로그인

src/main/webapp/WEB-INF/jsp/uat/uia/EgovLoginUsr.jsp

@@ -24,16 +24,23 @@
 <meta http-equiv="Content-Language" content="ko">
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title>로그인</title>
-<script src="/kccadrPb/usr/script/jquery-3.5.0.js"></script>
+
+<!-- css -->
+<link rel="stylesheet" href="/publish/common/css/reset.css">
+<link rel="stylesheet" href="/publish/common/css/font.css">
+<link rel="stylesheet" href="/publish/common/css/style.css">
+<link rel="stylesheet" href="/publish/adm/css/common.css">
+<link rel="stylesheet" href="/publish/adm/css/style.css">
+<link rel="stylesheet" href="/publish/adm/css/button.css">
+<link rel="stylesheet" href="/publish/adm/css/tab.css">
+<link rel="stylesheet" href="/publish/adm/css/table.css">
+<link rel="stylesheet" href="/publish/adm/css/calendar.css">
+<link rel="stylesheet" href="/publish/adm/login/login.css" />
+
+<!-- script -->
+<script src="/js/jquery-3.5.0.js"></script>
 <script type="text/javascript" src="/js/new_login.js"></script>
 
-<link rel="stylesheet" href="/kofair_case_seed/css/font.css" />
-<link rel="stylesheet" href="/kofair_case_seed/css/reset.css" />
-<link rel="stylesheet" href="/kofair_case_seed/adm/style/common.css" />
-<link rel="stylesheet" href="/kofair_case_seed/adm/style/layout.css" />
-<link rel="stylesheet" href="/kofair_case_seed/adm/style/style.css" />
-
-
 <script type="text/javascript">
 <c:if test="${!empty message}">alert("${message}");</c:if>
 $( document ).ready(function(){
@@ -123,7 +130,48 @@ function getid(form){
 		<input type="hidden" id="password2" name="password2">
 
 		<input name="j_username" type="hidden" />
-		<div class="login_all_wrap">
+		
+		<div class="login_container">
+
+		    <div class="login_content">
+		
+		      <div class="left">
+		        <h1 class="logo"><img src="" alt="">logo</h1>
+		      </div>
+		      <div class="right">
+		
+		        <div class="login_form_wrap">
+		          <h2>로그인</h2>
+		          <ul class="login_form">
+		            <li>
+		              <strong>아이디</strong>
+		              <input type="text" id="id_text" name="id_text" class="input w100per" maxlength="15" placeholder="아이디를 입력해주세요">
+		            </li>
+		            <li>
+		              <strong>비밀번호</strong>
+		              <input type="password" autocomplete="off" id="password_text" name="password_text" class="input w100per" value="<c:out value='${password}'/>" placeholder="비밀번호를 입력해주세요." onkeydown="javascript:if (event.keyCode == 13) { actionLogin();return false; }">
+		            </li>
+		          </ul>
+		          <div class="form_wrap checkbox_wrap column">
+		            <label for="checkId" class="checkbox_item">
+		              <input type="checkbox" id="checkId" name="checkId">
+		              <span>아이디 저장</span>
+		            </label>
+		          </div>
+		
+		          <div class="btn_wrap w100per">
+		            <button type="button" class="btn fill primary xlarge w100per" id="login_submit" onclick="javascript:actionLogin();return false;">로그인</button>
+		          </div>
+		
+		        </div>
+		
+		      </div>
+		
+		    </div>
+		
+		  </div>
+				
+		<%-- <div class="login_all_wrap">
 			<div class="login_wrap">
 				<div class="login_left_box">
  					<img src="/direct/img/login/login_logo.png" alt="프레임워크">
@@ -131,35 +179,35 @@ function getid(form){
 				</div>
 				<div class="login_right_box login_right_otp_box">
 					<p class="login_tit">로그인</p>
-					<%-- <kc:profile value="local">
+					<kc:profile value="local">
                    			 아이디 선택 : <select id="devIdSelect" style="width: 100%; height: 30px;" onchange="login()">
 							<option value="">로그인할 아이디를 선택해주세요.</option>
 							<option value="seed">관리자1-ROLE_ADMIN</option>
 							<option value="member">관리자2-ROLE_ADMIN2</option>
 						</select>
 						<br></br>
-					</kc:profile> --%>
+					</kc:profile>
 					<div class="id_box">
 						<p>ID</p>
 						<label for="id_text"></label>
-						<input type="text" id="id_text" name="id_text" class="input_text w100per" maxlength="15" placeholder="아이디를 입력해주세요" class="id">
+						<input type="text" id="id_text" name="id_text" class="input w100per" maxlength="15" placeholder="아이디를 입력해주세요" class="id">
 					</div>
 					<div class="pw_box">
 						<p>PASSWORD</p>
 						<label for="password_text"></label>
-						<input type="password" autocomplete="off" id="password_text" name="password_text" class="input_text w100per" value="<c:out value='${password}'/>" placeholder="비밀번호를 입력해주세요." class="pw" onkeydown="javascript:if (event.keyCode == 13) { actionLogin();return false; }">
+						<input type="password" autocomplete="off" id="password_text" name="password_text" class="input w100per" value="<c:out value='${password}'/>" placeholder="비밀번호를 입력해주세요." onkeydown="javascript:if (event.keyCode == 13) { actionLogin();return false; }">
 					</div>
 					<div class="saveId">
 						<input type="checkbox" id="checkId" name="checkId">
 						<label for="checkId">아이디저장</label>
 					</div>
 					<div class="submit_box">
-						<input type="submit" value="로그인" class="btn btn_text blue_fill w100per submit" id="login_submit" onclick="javascript:actionLogin();return false;">
-						
+						<button type="button" class="btn fill primary xlarge w100per" id="login_submit" onclick="javascript:actionLogin();return false;">로그인</button>
+						<!-- <input type="submit" value="로그인" class="btn btn_text blue_fill w100per submit" id="login_submit" onclick="javascript:actionLogin();return false;"> -->
 					</div>
 				</div>
 			</div>
-		</div>
+		</div> --%>
 	</form:form>
 </body>
 </html>

src/main/webapp/publish/adm/login/login.css

@@ -0,0 +1,17 @@
+@charset "utf-8";
+
+/* 로그인 */
+*{font-family:var(--primary-title-font);}
+.login_container{display:flex;width:100%;min-width:1240px;height:100vh;justify-content:center;align-items:center;padding:50px 0;box-sizing:border-box;background-color:#fbf9f7;background-image:url(/publish/adm/login/images/login_bg_left.png), url(/publish/adm/login/images/login_bg_right.png);background-position:left bottom, right top; background-repeat:no-repeat;}
+.login_content{display: flex; width: 1000px; height: 584px; background-color: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,0.2);}
+.login_content .left,.login_content .right{width: 50%;}
+.login_content .left{display: flex; flex-direction:column; justify-content: center; align-items: center; background-image: url(/publish/adm/login/images/login.jpg); background-repeat: no-repeat;}
+.login_content .left img{margin:50px 0 10px 0;}
+.login_content .right{position:relative;display:flex;justify-content:center;align-items:center;box-sizing: border-box;}
+.login_form_wrap{width:75%;}
+.login_form_wrap h2{position:relative;font-size:34px;font-weight:600;color:var(--primary-color);margin:0 0 32px 0;}
+.login_form{display:flex;margin:0 0 8px 0;flex-direction:column;gap:32px;}
+.login_form li{display:flex;flex-direction:column;gap:8px;}
+.login_form input{height:44px;}
+.btn_wrap{display:block;margin:40px 0 0 0;}
+

src/main/webapp/publish/adm/login/login.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>로그인</title>
+
+  <!-- css -->
+  <link rel="stylesheet" href="../../../css/reset.css">
+  <link rel="stylesheet" href="../../../css/font.css">
+  <link rel="stylesheet" href="../css/common.css">
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/button.css">
+  <link rel="stylesheet" href="../css/tab.css">
+  <link rel="stylesheet" href="../css/table.css">
+  <link rel="stylesheet" href="../css/calendar.css">
+  <link rel="stylesheet" href="../login/login.css" />
+  <!-- //css -->
+
+  <!-- script -->
+  <script src="../../../js/jquery-3.5.0.js"></script>
+  <!-- //script -->
+
+
+</head>
+
+<body>
+
+  <div class="login_container">
+
+    <div class="login_content">
+
+      <div class="left">
+        <h1 class="logo"><img src="" alt="">logo</h1>
+      </div>
+      <div class="right">
+
+        <div class="login_form_wrap">
+          <h2>로그인</h2>
+          <ul class="login_form">
+            <li>
+              <strong>아이디</strong>
+              <input type="text" id="id_text" name="id_text" class="input w100per" maxlength="15" placeholder="아이디를 입력해주세요">
+            </li>
+            <li>
+              <strong>비밀번호</strong>
+              <input type="password" autocomplete="off" id="password_text" name="password_text" class="input w100per" value="<c:out value='${password}'/>" placeholder="비밀번호를 입력해주세요." onkeydown="javascript:if (event.keyCode == 13) { actionLogin();return false; }">
+            </li>
+          </ul>
+          <div class="form_wrap checkbox_wrap column">
+            <label for="checkId" class="checkbox_item">
+              <input type="checkbox" id="checkId" name="checkId">
+              <span>아이디 저장</span>
+            </label>
+          </div>
+
+          <div class="btn_wrap">
+            <button type="button" class="btn fill primary xlarge w100per" id="login_submit" onclick="javascript:actionLogin();return false;">로그인</button>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+
+</body>
+
+</html>

src/main/webapp/publish/common/css/font.css

@@ -0,0 +1,316 @@
+/* ================================
+   Noto Sans KR
+   ================================ */
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 300;
+     src: url('../font/NotoSansKR-Light.woff2') format('woff2'),
+          url('../font/NotoSansKR-Light.woff') format('woff'),
+          url('../font/NotoSansKR-Light.ttf') format('truetype');
+     font-display: block;
+}
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 400;
+     src: url('../font/NotoSansKR-Regular.woff2') format('woff2'),
+          url('../font/NotoSansKR-Regular.woff') format('woff'),
+          url('../font/NotoSansKR-Regular.ttf') format('truetype');
+     font-display: block;
+}
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 500;
+     src: url('../font/NotoSansKR-Medium.woff2') format('woff2'),
+          url('../font/NotoSansKR-Medium.woff') format('woff'),
+          url('../font/NotoSansKR-Medium.ttf') format('truetype');
+     font-display: block;
+}
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 700;
+     src: url('../font/NotoSansKR-Bold.woff2') format('woff2'),
+          url('../font/NotoSansKR-Bold.woff') format('woff'),
+          url('../font/NotoSansKR-Bold.ttf') format('truetype');
+     font-display: block;
+}
+
+@font-face {
+     font-family: 'Noto Sans KR';
+     font-style: normal;
+     font-weight: 800;
+     src: url('../font/NotoSansKR-ExtraBold.woff2') format('woff2'),
+          url('../font/NotoSansKR-ExtraBold.woff') format('woff'),
+          url('../font/NotoSansKR-ExtraBold.ttf') format('truetype');
+     font-display: block;
+}
+
+
+/* ================================
+     Pretendard
+     ================================ */
+
+/* Thin (100) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 100;
+     font-style: normal;
+     src: url('../font/Pretendard-Thin.woff2') format('woff2'),
+          url('../font/Pretendard-Thin.woff') format('woff'),
+          url('../font/Pretendard-Thin.ttf') format('truetype'),
+          url('../font/Pretendard-Thin.otf') format('opentype');
+     font-display: swap;
+}
+
+/* ExtraLight (200) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 200;
+     font-style: normal;
+     src: url('../font/Pretendard-ExtraLight.woff2') format('woff2'),
+          url('../font/Pretendard-ExtraLight.woff') format('woff'),
+          url('../font/Pretendard-ExtraLight.ttf') format('truetype'),
+          url('../font/Pretendard-ExtraLight.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Light (300) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 300;
+     font-style: normal;
+     src: url('../font/Pretendard-Light.woff2') format('woff2'),
+          url('../font/Pretendard-Light.woff') format('woff'),
+          url('../font/Pretendard-Light.ttf') format('truetype'),
+          url('../font/Pretendard-Light.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Regular (400) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 400;
+     font-style: normal;
+     src: url('../font/Pretendard-Regular.woff2') format('woff2'),
+          url('../font/Pretendard-Regular.woff') format('woff'),
+          url('../font/Pretendard-Regular.ttf') format('truetype'),
+          url('../font/Pretendard-Regular.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Medium (500) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 500;
+     font-style: normal;
+     src: url('../font/Pretendard-Medium.woff2') format('woff2'),
+          url('../font/Pretendard-Medium.woff') format('woff'),
+          url('../font/Pretendard-Medium.ttf') format('truetype'),
+          url('../font/Pretendard-Medium.otf') format('opentype');
+     font-display: swap;
+}
+
+/* SemiBold (600) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 600;
+     font-style: normal;
+     src: url('../font/Pretendard-SemiBold.woff2') format('woff2'),
+          url('../font/Pretendard-SemiBold.woff') format('woff'),
+          url('../font/Pretendard-SemiBold.ttf') format('truetype'),
+          url('../font/Pretendard-SemiBold.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Bold (700) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 700;
+     font-style: normal;
+     src: url('../font/Pretendard-Bold.woff2') format('woff2'),
+          url('../font/Pretendard-Bold.woff') format('woff'),
+          url('../font/Pretendard-Bold.ttf') format('truetype'),
+          url('../font/Pretendard-Bold.otf') format('opentype');
+     font-display: swap;
+}
+
+/* ExtraBold (800) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 800;
+     font-style: normal;
+     src: url('../font/Pretendard-ExtraBold.woff2') format('woff2'),
+          url('../font/Pretendard-ExtraBold.woff') format('woff'),
+          url('../font/Pretendard-ExtraBold.ttf') format('truetype'),
+          url('../font/Pretendard-ExtraBold.otf') format('opentype');
+     font-display: swap;
+}
+
+/* Black (900) */
+@font-face {
+     font-family: 'Pretendard';
+     font-weight: 900;
+     font-style: normal;
+     src: url('../font/Pretendard-Black.woff2') format('woff2'),
+          url('../font/Pretendard-Black.woff') format('woff'),
+          url('../font/Pretendard-Black.ttf') format('truetype'),
+          url('../font/Pretendard-Black.otf') format('opentype');
+     font-display: swap;
+}
+
+
+/* ================================
+     Gmarket Sans TTF
+     ================================ */
+
+@font-face {
+     font-family: 'Gmarket Sans TTF';
+     font-weight: 300;
+     font-style: normal;
+     src: url('../font/GmarketSansTTFLight.woff2') format('woff2'),
+          url('../font/GmarketSansTTFLight.woff') format('woff'),
+          url('../font/GmarketSansTTFLight.ttf') format('truetype'),
+          url('../font/GmarketSansTTFLight.eot?#iefix') format('embedded-opentype');
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'Gmarket Sans TTF';
+     font-weight: 500;
+     font-style: normal;
+     src: url('../font/GmarketSansTTFMedium.woff2') format('woff2'),
+          url('../font/GmarketSansTTFMedium.woff') format('woff'),
+          url('../font/GmarketSansTTFMedium.ttf') format('truetype'),
+          url('../font/GmarketSansTTFMedium.eot?#iefix') format('embedded-opentype');
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'Gmarket Sans TTF';
+     font-weight: 700;
+     font-style: normal;
+     src: url('../font/GmarketSansTTFBold.woff2') format('woff2'),
+          url('../font/GmarketSansTTFBold.woff') format('woff'),
+          url('../font/GmarketSansTTFBold.ttf') format('truetype'),
+          url('../font/GmarketSansTTFBold.eot?#iefix') format('embedded-opentype');
+     font-display: swap;
+}
+
+/* ================================
+     S-Core Dream 1
+     ================================ */
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-1Thin.eot');
+     src: url('../font/S-CoreDream-1Thin.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-1Thin.woff2') format('woff2'),
+          url('../font/S-CoreDream-1Thin.woff') format('woff'),
+          url('../font/S-CoreDream-1Thin.ttf') format('truetype');
+     font-weight: 100;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-2ExtraLight.eot');
+     src: url('../font/S-CoreDream-2ExtraLight.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-2ExtraLight.woff2') format('woff2'),
+          url('../font/S-CoreDream-2ExtraLight.woff') format('woff'),
+          url('../font/S-CoreDream-2ExtraLight.ttf') format('truetype');
+     font-weight: 200;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-3Light.eot');
+     src: url('../font/S-CoreDream-3Light.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-3Light.woff2') format('woff2'),
+          url('../font/S-CoreDream-3Light.woff') format('woff'),
+          url('../font/S-CoreDream-3Light.ttf') format('truetype');
+     font-weight: 300;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-4Regular.eot');
+     src: url('../font/S-CoreDream-4Regular.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-4Regular.woff2') format('woff2'),
+          url('../font/S-CoreDream-4Regular.woff') format('woff'),
+          url('../font/S-CoreDream-4Regular.ttf') format('truetype');
+     font-weight: 400;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-5Medium.eot');
+     src: url('../font/S-CoreDream-5Medium.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-5Medium.woff2') format('woff2'),
+          url('../font/S-CoreDream-5Medium.woff') format('woff'),
+          url('../font/S-CoreDream-5Medium.ttf') format('truetype');
+     font-weight: 500;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-6Bold.eot');
+     src: url('../font/S-CoreDream-6Bold.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-6Bold.woff2') format('woff2'),
+          url('../font/S-CoreDream-6Bold.woff') format('woff'),
+          url('../font/S-CoreDream-6Bold.ttf') format('truetype');
+     font-weight: 600;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-7ExtraBold.eot');
+     src: url('../font/S-CoreDream-7ExtraBold.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-7ExtraBold.woff2') format('woff2'),
+          url('../font/S-CoreDream-7ExtraBold.woff') format('woff'),
+          url('../font/S-CoreDream-7ExtraBold.ttf') format('truetype');
+     font-weight: 700;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-8Heavy.eot');
+     src: url('../font/S-CoreDream-8Heavy.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-8Heavy.woff2') format('woff2'),
+          url('../font/S-CoreDream-8Heavy.woff') format('woff'),
+          url('../font/S-CoreDream-8Heavy.ttf') format('truetype');
+     font-weight: 800;
+     font-style: normal;
+     font-display: swap;
+}
+
+@font-face {
+     font-family: 'S-Core Dream';
+     src: url('../font/S-CoreDream-9Black.eot');
+     src: url('../font/S-CoreDream-9Black.eot?#iefix') format('embedded-opentype'),
+          url('../font/S-CoreDream-9Black.woff2') format('woff2'),
+          url('../font/S-CoreDream-9Black.woff') format('woff'),
+          url('../font/S-CoreDream-9Black.ttf') format('truetype');
+     font-weight: 900;
+     font-style: normal;
+     font-display: swap;
+}

src/main/webapp/publish/common/css/reset.css

@@ -0,0 +1,210 @@
+/* ========================================================================
+   reset.css — 2025
+   작성자: 정수빈 
+   날짜: 2025-10-17
+   ======================================================================== */
+
+/* box-sizing & 기본 리셋 */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* HTML5 요소 기본 표시 보장 */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, main {
+  display: block;
+}
+
+/* root 설정 */
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+  font-size: 16px;
+}
+
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  font-family: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.35px;
+  color: #222;
+  background-color: #fff;
+}
+
+/* 텍스트 요소 */
+h1, h2, h3, h4, h5, h6, p {
+  font-weight: inherit;
+  font-size: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  display: inline-block;
+}
+a:focus-visible {
+  outline: 2px solid #222;
+  outline-offset: 3px;
+}
+
+/* 리스트 */
+ol, ul {
+  list-style: none;
+}
+
+/* 이미지 및 미디어 */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 0;
+  font-size: 0;
+}
+
+/* 표 */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%;
+}
+
+/* 폼 요소 */
+button, input, select, textarea {
+  font: inherit;
+  color: inherit;
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  
+  appearance: none;
+}
+
+/* 라디오, 체크박스는 appearance 제거 금지 (기본 표시 유지) */
+input[type="radio"],
+input[type="checkbox"] {
+  appearance: auto;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  display: inline-block;
+  width: auto;
+  height: auto;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+button {
+  cursor: pointer;
+  background: transparent;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #777;
+  font-weight: 400;
+  font-size:14px;
+}
+
+input:disabled,
+input:read-only,
+textarea:disabled,
+textarea:read-only,
+select:disabled,
+select:read-only
+input.readonly,
+textarea.readonly,
+select.readonly{
+  background-color: var(--disable-fill-bg-color) !important;
+  color: var(--disable-fill-text-color) !important;
+  border: 1px solid var(--disable-fill-line-color) !important;
+  cursor: not-allowed;
+}
+
+/* 접근성 - label 숨김 처리 */
+caption,.caption, .label, .sr-only, .visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* 스크롤바 커스터마이징 */
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+::-webkit-scrollbar-thumb {
+  background: #adadad;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 인용, 기타 */
+blockquote, q {
+  quotes: none;
+}
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: '';
+}
+
+/* 폼 예외 처리 */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  appearance: none;
+}
+
+/* 주소, 이탤릭 등 */
+address, em, i {
+  font-style: normal;
+}
+
+/* hr */
+hr {
+  border: none;
+  height: 1px;
+  background: #e0e0e0;
+  margin: 0;
+}
+
+/* 텍스트영역 기본 */
+textarea {
+  resize: vertical;
+  color: #333;
+}
+
+/* 접근성: 모션 줄이기 선호 시 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* 다크모드 기본 대응 */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #e6e6e6;
+    background-color: #111;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #666;
+  }
+}

src/main/webapp/publish/common/css/reset_bak.css

@@ -0,0 +1,53 @@
+/* reset 파일 정리 */
+
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;color: inherit;font-weight: inherit;font-family: 'Noto Sans KR', sans-serif; word-break: keep-all;}
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block; font-family: 'Noto Sans KR', sans-serif; margin: 0; padding: 0; border: 0; font-size: 100%;}
+body {min-height: 100vh;line-height: 1.4;-webkit-font-smoothing: antialiased;letter-spacing:-0.5px;;}
+ol,ul,li {list-style: none;}
+p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;letter-spacing: -0.35px;}
+h1, h2, h3, h4, h5, h6, button, input, label{line-height:1.1;}
+a {color: inherit; text-decoration: none; display: block;}
+/* a:focus:active:hover{outline: 0} */
+img {display:block;max-width: 100%;font-size: 0; border: 0;}
+table {border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
+select, input {vertical-align: middle; font-family: 'Noto Sans KR', sans-serif; margin:0;}
+caption, .label{position: absolute;width: 1px; height: 1px; margin: 0; border: none; clip: rect(0,0,0,0); overflow: hidden;}
+/* 안드로이드 및 아이폰에서 기본적으로 적용되어있는 select, input css 제거. */
+select {background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
+select::-ms-expand {display: none;}
+button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer; *overflow: visible; font-family: 'Noto Sans KR', sans-serif;}
+button[disabled],html input[disabled] {cursor: default;}
+/* ie 하위버전 기본적으로 적용되어 있는 css 변경 */
+input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0; *height: 13px; *width: 13px;}
+/* 아이폰 기본적으로 적용되어 있는 버튼 css 변경 */
+input{-webkit-appearance: button;}
+input::placeholder{font-size:15px;font-weight:300;font-family:'Noto Sans KR', sans-serif;}
+/* 사파리5, 크롬에서 기본적으로 적용되어 있는 css 변경 */
+input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
+input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
+address, em, i {font-style: normal;}
+button {border: 0; background: none; cursor: pointer;}
+hr {margin: 0; border: none; padding: 0; display: block;}
+figure, figcaption {margin: 0; padding: 0;}
+form, fieldset {border: none; margin: 0; padding: 0; line-height: 1;}
+input[type="submit"] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
+header, footer, article, section, aside, nav, main {display: block;}
+textarea{color: #666;font-size: 20px;font-weight: 300; font-family: 'Noto Sans KR', sans-serif;}
+
+input::placeholder,input[type="text"]::placeholder,input[type="password"]::placeholder,input[type="text"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder{color: #666 !important; font-size: 16px !important;}
+input[type="text"]:focus::placeholder,input[type="password"]:focus::placeholder{color: transparent;}
+
+input:disabled,input[disabled="disabled"],input:read-only,input[readonly="readonly"]{background-color: #f8f9fa !important; color: #aaa !important; border:1px solid #d8d8d8 !important; font-size: 16px;}
+button:disabled,button[disabled="disabled"]{background-color: #f8f9fa !important; color: #aaa !important; border: 1px solid #d8d8d8 !important;}
+select:disabled,select[disabled="disabled"],select.read-only,select[readonly="readonly"]{background-color: #f8f9fa !important; color: #aaa !important; border: 1px solid #d8d8d8 !important;pointer-events:none;}
+*,*::before,*::after {box-sizing: border-box;}
+
+:target{scroll-margin-block: 5ex;}
+
+/* a:hover, a:active,a:hover:active { outline: none; }
+a:focus:not(:focus) {outline: none;}
+a:focus:not(:focus-visible){outline: none;} */
+
+::-webkit-scrollbar{width:7px;height:7px;} /* 스크롤바 너비 */
+::-webkit-scrollbar-thumb{background:#adadad;border-radius:10px;} /* 스크롤바 모양 */
+::-webkit-scrollbar-track{background:transparent;} /* 뒷배경 */

src/main/webapp/publish/common/css/style.css

@@ -0,0 +1,187 @@
+@charset "utf-8";
+
+/* 간격 */
+.p0 {padding: 0px!important;}
+.p5 {padding: 5px!important;}
+
+.pt5 {padding-top: 5px!important;}
+.pt10 {padding-top: 10px!important;}
+.pt15 {padding-top: 15px!important;}
+.pt20 {padding-top: 20px!important;}
+.pt25 {padding-top: 25px!important;}
+.pt30 {padding-top: 30px!important;}
+.pt35 {padding-top: 35px!important;}
+.pt40 {padding-top: 40px!important;}
+.pt45 {padding-top: 45px!important;}
+.pt50 {padding-top: 50px!important;}
+
+.pr0 {padding-right: 0px!important;}
+.pr20 {padding-right: 20px!important;}
+
+.pb5 {padding-bottom: 5px!important;}
+.pb10 {padding-bottom: 10px!important;}
+.pb15 {padding-bottom: 15px!important;}
+.pb20 {padding-bottom: 20px!important;}
+.pb25 {padding-bottom: 25px!important;}
+.pb30 {padding-bottom: 30px!important;}
+.pb35 {padding-bottom: 35px!important;}
+.pb40 {padding-bottom: 40px!important;}
+.pb45 {padding-bottom: 45px!important;}
+.pb50 {padding-bottom: 50px!important;}
+
+.pl0 {padding-left: 0px!important;}
+.pl15 {padding-left: 15px!important;}
+.pl20 {padding-left: 20px!important;}
+
+.m20 {margin: 20px!important;}
+
+.mt-1 {margin-top: -1px!important;}
+.mt0 {margin-top: 0px!important;}
+.mt5 {margin-top: 5px!important;}
+.mt10 {margin-top: 10px!important;}
+.mt15 {margin-top: 15px!important;}
+.mt20 {margin-top: 20px!important;}
+.mt25 {margin-top: 25px!important;}
+.mt30 {margin-top: 30px!important;}
+.mt35 {margin-top: 35px!important;}
+.mt40 {margin-top: 40px!important;}
+.mt45 {margin-top: 45px!important;}
+.mt50 {margin-top: 50px!important;}
+.mt60 {margin-top: 60px!important;}
+.mt70 {margin-top: 70px!important;}
+.mt80 {margin-top: 80px!important;}
+.mt90 {margin-top: 90px!important;}
+.mt100 {margin-top: 100px!important;}
+
+.mr0 {margin-right: 0px!important;}
+.mr3 {margin-right: 3px!important;}
+.mr5 {margin-right: 5px!important;}
+.mr10 {margin-right: 10px!important;}
+.mr15 {margin-right: 15px!important;}
+.mr20 {margin-right: 20px!important;}
+.mr25 {margin-right: 25px!important;}
+.mr30 {margin-right: 30px!important;}
+.mr35 {margin-right: 35px!important;}
+.mr40 {margin-right: 40px!important;}
+.mr45 {margin-right: 45px!important;}
+.mr50 {margin-right: 50px!important;}
+.mr60 {margin-right: 60px!important;}
+.mr70 {margin-right: 70px!important;}
+.mr80 {margin-right: 80px!important;}
+.mr90 {margin-right: 90px!important;}
+.mr100 {margin-right: 100px!important;}
+
+.mb-4 {margin-bottom: -4px!important;}
+.mb0 {margin-bottom: 0px!important;}
+.mb1 {margin-bottom: 1px!important;}
+.mb5 {margin-bottom: 5px!important;}
+.mb10 {margin-bottom: 10px!important;}
+.mb15 {margin-bottom: 15px!important;}
+.mb18 {margin-bottom: 18px!important;}
+.mb20 {margin-bottom: 20px!important;}
+.mb25 {margin-bottom: 25px!important;}
+.mb30 {margin-bottom: 30px!important;}
+.mb35 {margin-bottom: 35px!important;}
+.mb40 {margin-bottom: 40px!important;}
+.mb45 {margin-bottom: 45px!important;}
+.mb50 {margin-bottom: 50px!important;}
+.mb60 {margin-bottom: 60px!important;}
+.mb70 {margin-bottom: 70px!important;}
+.mb80 {margin-bottom: 80px!important;}
+.mb90 {margin-bottom: 90px!important;}
+.mb100 {margin-bottom: 100px!important;}
+
+.ml0 {margin-left: 0px!important;}
+.ml5 {margin-left: 5px!important;}
+.ml10 {margin-left: 10px!important;}
+.ml15 {margin-left: 15px!important;}
+.ml20 {margin-left: 20px!important;}
+.ml25 {margin-left: 25px!important;}
+.ml30 {margin-left: 30px!important;}
+.ml35 {margin-left: 35px!important;}
+.ml40 {margin-left: 40px!important;}
+.ml45 {margin-left: 45px!important;}
+.ml50 {margin-left: 50px!important;}
+.ml60 {margin-left: 60px!important;}
+.ml70 {margin-left: 70px!important;}
+.ml80 {margin-left: 80px!important;}
+.ml90 {margin-left: 90px!important;}
+.ml100 {margin-left: 100px!important;}
+
+/* 너비, 높이 */
+.w100per {width: 100% !important;}
+.w99per {width: 99%;}
+.w95per {width: 95%;}
+.w90per {width: 90%;}
+.w85per {width: 85%;}
+.w80per {width: 80%;}
+.w75per {width: 75%;}
+.w70per {width: 70%;}
+.w65per {width: 65%;}
+.w60per {width: 60%;}
+.w50per {width: 50%;}
+.w55per {width: 55%;}
+.w45per {width: 45%;}
+.w40per {width: 40%;}
+.w35per {width: 35%;}
+.w33per {width: 33.3333333%;}
+.w30per {width: 30%;}
+.w25per {width: 25%;}
+.w20per {width: 20%;}
+.w19per {width: 19%;}
+.w18per {width: 18%;}
+.w17per {width: 17%;}
+.w16per {width: 16%;}
+.w15per {width: 15%;}
+.w14per {width: 14%;}
+.w13per {width: 13%;}
+.w12per {width: 12%;}
+.w11per {width: 11%;}
+.w10per {width: 10%;}
+.w9per {width: 9%;}
+.w8per {width: 8%;}
+.w7per {width: 7%;}
+.w6per {width: 6%;}
+.w5per {width: 5%;}
+.w4per {width: 4%;}
+.w3per {width: 3%;}
+.w2per {width: 2%;}
+.w1per {width: 1%;}
+
+.w5 {width: 5px;}
+.w10 {width: 10px;}
+.w15 {width: 15px;}
+.w20 {width: 20px;}
+.w25 {width: 25px;}
+.w30 {width: 30px;}
+.w35 {width: 35px;}
+.w40 {width: 40px;}
+.w45 {width: 45px;}
+.w50 {width: 50px;}
+.w55 {width: 55px;}
+.w60 {width: 60px;}
+.w70 {width: 70px;}
+.w80 {width: 80px;}
+.w90 {width: 90px;}
+.w100 {width: 100px;}
+.w110 {width: 110px;}
+.w120 {width: 120px;}
+.w130 {width: 130px;}
+.w140 {width: 140px;}
+.w150 {width: 150px;}
+.w160 {width: 160px;}
+.w170 {width: 170px;}
+.w180 {width: 180px;}
+.w190 {width: 190px;}
+.w200 {width: 200px;}
+.w250 {width: 250px;}
+.w300 {width: 300px;}
+.w325 {width: 325px;}
+.w350 {width: 350px;}
+.w400 {width: 400px;}
+.w500 {width: 500px;}
+
+.mw100 {min-width: 100px;}
+
+.h100 {height: 100px;}
+.h100per {height: 100%;}