@charset "UTF-8";

/* Paperlogy 폰트 — 로그인/역할선택 화면(자체 .cshtml은 app.css 미로드)을 관리자 화면과 동일 폰트로 통일.
   login.css 는 _content/JNU.FRS.UI.Common/css/ 에서 서빙 → ../fonts/ = UI.Common/wwwroot/fonts (common.css 와 동일 규칙).
   단일 'Paperlogy' 패밀리에 weight별 글리프 매핑(faux-bold 아님) — AdminWeb app.css 와 동일. font-display:swap + 지연 로딩. */
@font-face { font-family:'Paperlogy'; font-style:normal; font-weight:400; font-display:swap;
    src:url('../fonts/Paperlogy-Regular.woff2') format('woff2'), url('../fonts/Paperlogy-Regular.woff') format('woff'); }
@font-face { font-family:'Paperlogy'; font-style:normal; font-weight:500; font-display:swap;
    src:url('../fonts/Paperlogy-Medium.woff2') format('woff2'), url('../fonts/Paperlogy-Medium.woff') format('woff'); }
@font-face { font-family:'Paperlogy'; font-style:normal; font-weight:600; font-display:swap;
    src:url('../fonts/Paperlogy-SemiBold.woff2') format('woff2'), url('../fonts/Paperlogy-SemiBold.woff') format('woff'); }
@font-face { font-family:'Paperlogy'; font-style:normal; font-weight:700; font-display:swap;
    src:url('../fonts/Paperlogy-Bold.woff2') format('woff2'), url('../fonts/Paperlogy-Bold.woff') format('woff'); }

/* 로그인/역할선택 컨테이너 전역 폰트 — 폼 컨트롤(select/input/button)은 font 상속이 안 되므로 함께 지정.
   .login-page-body 스코프라 이 클래스를 안 쓰는 지원자 웹(login.css 공유)에는 영향 없음. */
.login-page-body,
.login-page-body input,
.login-page-body select,
.login-page-body button,
.login-page-body textarea {
    font-family: "Paperlogy", "Pretendard", "Malgun Gothic", "Segoe UI", sans-serif;
}

.login-wrap {display: grid; grid-template-columns: 1fr 1fr; border-radius: 30px; background: #fff; box-shadow: 0 3px 14px 3px rgba(158, 158, 158, 0.25); padding: 80px 0; margin-bottom: 200px;}
.login-wrap > div {padding: 0 80px;}
.login-title {color: #333; font-size: 30px; font-weight: 700; display: flex; align-items: flex-end; gap: 8px;}
.login-title:after {content: ""; display: block; width: 10px; height: 10px; background: #1356bc; border-radius: 100%; margin-bottom: 8px;}
.login {border-right: 1px solid rgba(0, 0, 0, 0.18);}

/* login form */
.login-form { margin-top: 40px; display: flex; flex-direction: column; gap: 30px;}
.login-form-item { position: relative; display: flex; flex-direction: column; gap: 10px;}
.login-label { display: flex; gap: 6px; align-items: center; color: #515151; font-size: 20px; font-weight: 700; position: absolute; background: #fff; left: 24px; padding: 0 8px;}
.login-label img {filter: brightness(0);}
.login-input { width: 100%; height: 65px; border: 1px solid #bebebe; border-radius: 10px; outline: none; transition: border-color 0.2s ease; margin-top: 18px; color: #5d5d5d; font-size: 20px; font-weight: 500; padding: 24px 30px 14px; }
.login-input:focus { border-color: #1c60c5; background: #fff; box-shadow: 2px 4px 4px 0 rgba(146, 193, 232, 0.25); }
.login-form-item:focus-within .login-label {color: #039;}
.login-form-item:focus-within .login-label img {filter: none;}
.login-form-item > button { position: absolute; right: 32px; bottom: 36px; transform: translateY(50%); background: none; border: none; cursor: pointer; padding: 0; line-height: 0; transition: opacity 0.2s ease;}
.btn-pw-toggle.is-active {opacity: 0.3;}
.login-bottom-info { display: flex; align-items: center; justify-content: space-between;}
.login-remember { display: flex; align-items: center; gap: 8px; color: #4b4b4b; text-align: right; font-size: 20px; font-weight: 500; line-height: 20px; /* 100% */ cursor: pointer; user-select: none;}
.login-remember .agree-btn { width: auto; }
.login-remember input[type="checkbox"] {appearance: none; -webkit-appearance: none; width: 22px; height: 22px; background: url('../images/login/icon_checkbox_off.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; flex-shrink: 0;}
.login-remember input[type="checkbox"]:checked {background: url('../images/login/icon_checkbox_on.svg');}
.login-find-wrap {display: flex; align-items: center;}
.login-find-wrap a {color: #3c3c3c; font-size: 20px; font-weight: 500;}
.login-find-wrap a + a::before { content: ""; display: inline-block; width: 1px; height: 17px; background: #919191; margin: 0 18px; vertical-align: middle;}

.btn-login-submit { width: 154px; height: 154px; background: #1c60c5; filter: drop-shadow(1px 4px 4px #cde1ff); color: #fff; border-radius: 100px; color: #fff;text-align: center; font-size: 26px; font-weight: 700; line-height: 31.2px; /* 120% */ cursor: pointer; transition: opacity 0.2s ease; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.btn-login-submit img {filter: brightness(0) invert(1);}
.login-btn-wrap {display: flex; justify-content: space-between; flex-direction: row-reverse;}

.login-sub-title {margin-top: 38px; color: #484848; font-size: 22px; font-weight: 500; line-height: 38px; /* 172.727% */ letter-spacing: -0.22px;}
.signup { display: flex; flex-direction: column;}
.signup .login-btn-wrap {flex: 1; align-items: flex-end; gap: 24px; flex-direction: row;}  /* base의 row-reverse 무효화 — DOM 순서대로 로그인(좌)·회원가입(우) */
.signup .login-btn-wrap .btn-login-submit {background: none; border: 1px solid #1c60c5; color: #1356bc; filter: none; font-weight: 500;}
.signup .login-btn-wrap .btn-login-submit img {filter: none;}
.login-btn-wrap > img {width: 60%; max-width: 351px;}
.login-input-with-btn {display: flex;  gap: 8px;  align-items: center;  width: 100%;}
.login-input-with-btn .login-input {flex: 1;}

/* 역할(심사구분) 선택 카드 — 옵션에 심사분야 전체명이 붙어 길어짐.
   카드 좌우 패딩(80→40) 축소 + 셀렉트 폰트(20→16) 축소로 긴 옵션이 select 박스 안에 들어오게 해
   펼쳤을 때 네이티브 팝업이 우측으로 쏠리지 않고 중앙 카드와 같은 폭으로 가운데 보이게 함. */
.role-select-wrap > div { padding: 0 40px; }
.role-select-wrap #roundSelect,
.role-select-wrap #kindSelect { font-size: 16px; }

/* 옵션 행 위아래 간격(시인성) — 네이티브 select는 option padding을 무시(Blink).
   신형 커스터마이즈 select(appearance:base-select, Chrome 135+/Edge)로 펼침 목록을 스타일링해 간격 부여.
   미지원 브라우저는 위 두 셀렉트가 기존 네이티브로 폴백되고 아래 규칙은 전부 무시됨. */
.role-select-wrap #roundSelect,
.role-select-wrap #kindSelect { appearance: base-select; }
.role-select-wrap #roundSelect::picker-icon,
.role-select-wrap #kindSelect::picker-icon { display: none; }  /* 기존 부트스트랩 화살표 유지 — 중복 방지 */
.role-select-wrap #roundSelect::picker(select),
.role-select-wrap #kindSelect::picker(select) {
    appearance: base-select;
    border: 1px solid #bebebe; border-radius: 12px; background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15); padding: 6px;
    /* select 바로 아래로 고정(기본 앵커가 위로 띄우는 것 방지) + select와 동일 폭(짧은 데이터여도 폭 유지) */
    position-area: none;
    top: anchor(bottom); left: anchor(left); right: anchor(right); bottom: auto;
    width: auto; box-sizing: border-box; margin-top: 4px;
    max-height: 50vh; overflow-y: auto;
}
.role-select-wrap #roundSelect option,
.role-select-wrap #kindSelect option {
    padding: 14px 16px; border-radius: 8px; line-height: 1.4;
}
.role-select-wrap #roundSelect option:hover,
.role-select-wrap #kindSelect option:hover { background: #eef4ff; }
.role-select-wrap #roundSelect option:checked,
.role-select-wrap #kindSelect option:checked { background: #1c60c5; color: #fff; }
.role-select-wrap option::checkmark { display: none; }  /* 선택표시 체크 칸 제거 → 좌측 정렬 유지 */


@media all and (max-width: 1200px) {
  .login-bottom-info { flex-direction: column; align-items: flex-start; gap: 24px;}
  .login-btn-wrap > img {display: none;}
}




@media all and (max-width: 1024px) {
  .login-wrap { grid-template-columns: 1fr; padding: 50px 0; margin-bottom: 80px; }
  .login-wrap > div { padding: 0 40px; }
  .login-wrap > div.login { order: 1; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.18); padding-bottom: 40px; }
  .login-wrap > div.signup { order: 2; padding-top: 40px; }
  .login-title {font-size: 32px;}
  .login-label {font-size: 14px;}
  .login-label img {height: 16px;}
  .login-input {font-size: 16px; padding: 20px 24px 16px; height: auto; }
  .login-form-item > button {right: 20px; bottom: 28px;}
  .login-remember,
  .login-find-wrap a {font-size: 16px;}
  .btn-login-submit {width: 120px; height: 120px; font-size: 20px; line-height: 24px;}
  .btn-login-submit img { bottom: 22px; }
  .login-sub-title {font-size: 16px; line-height: 21px; margin-bottom: 30px;}
  .btn-login-submit img { opacity: 0 !important; }
  .btn-login-submit:hover img { opacity: 0 !important; transform: translateX(-50%) translateY(-8px) !important; }
  .btn-login-submit:hover span { transform: translate(-50%, -50%) !important; }
}

@media all and (max-width: 768px) {
  .login-wrap { padding: 36px 0; margin-bottom: 50px; border-radius: 16px; }
  .login-wrap > div { padding: 0; }
  .login-wrap > div.login { padding-bottom: 32px; }
  .login-wrap > div.signup { padding-top: 32px; }
  .login-title { font-size: 26px; }
  .login-form { gap: 20px; margin-top: 28px; }
  .login-input { font-size: 15px; padding: 18px 20px 12px; }
  .login-label { font-size: 16px; }
  .login-remember,
  .login-find-wrap a { font-size: 16px; }
  .login-find-wrap a + a::before { margin: 0 10px; }
  .btn-login-submit { width: 100px; height: 100px; font-size: 17px; line-height: 21px; }
  .btn-login-submit img { bottom: 16px; width: 20px; }
  .login-sub-title { font-size: 18px; line-height: 30px; margin-bottom: 20px; }
  .login-input-with-btn { flex-direction: column; }
  .login-input-with-btn .login-input { flex: none; width: 100%; }
  .login-input-with-btn #btnSendCode { width: 100%; margin-top: 8px !important; }
}


/* login button hover arrow */
.btn-login-submit { position: relative; }
.btn-login-submit span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.25s ease; white-space: nowrap; color: #fff; }
.signup .login-btn-wrap .btn-login-submit span { color: #1356bc; }
.btn-login-submit img { position: absolute; left: 50%; bottom: 44px; width: 25px; height: auto; transform: translateX(-50%) translateY(-8px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; }
.btn-login-submit:hover span { transform: translate(-50%, calc(-50% - 13px)); }
.btn-login-submit:hover img { opacity: 1; transform: translateX(-50%) translateY(0); }

			@property --g1 { syntax: '<color>'; initial-value: #ddeeff; inherits: false; }
			@property --g2 { syntax: '<color>'; initial-value: #eaf4ff; inherits: false; }
			@property --g3 { syntax: '<color>'; initial-value: #f3f9ff; inherits: false; }
			@property --g4 { syntax: '<color>'; initial-value: #e4f1fd; inherits: false; }

			.login-page-body { position: relative; height: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; box-sizing: border-box; background: linear-gradient(155deg, var(--g1) 0%, var(--g2) 35%, var(--g3) 65%, var(--g4) 100%); animation: gradientPulse 5s ease-in-out infinite alternate; overflow-x: hidden; }
			@keyframes gradientPulse {
				0%   { --g1: #ddeeff; --g2: #eaf4ff; --g3: #f3f9ff; --g4: #e4f1fd; }
				50%  { --g1: #edf6ff; --g2: #ddeeff; --g3: #e8f4ff; --g4: #f3f9ff; }
				100% { --g1: #f0f7ff; --g2: #f5faff; --g3: #daeafc; --g4: #eaf3ff; }
			}
			.login-wrap { align-items: stretch !important; }
			.login, .signup { display: flex; flex-direction: column; height: 100%; }
			.login .login-form, .signup .login-form { flex: 1; display: flex; flex-direction: column; justify-content: center; }
			.login-form > img { display: block; width: 150px; height: 150px; object-fit: contain; margin: 0 auto 16px; }

			/* 파도 배경 */
			.bg-waves { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; }
			.bg-waves .waves { width: 100%; height: 15vh; min-height: 100px; max-height: 150px; margin-bottom: -7px; }
			.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; }
			.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
			.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
			.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
			.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
			@keyframes move-forever {
				0%   { transform: translate3d(-90px, 0, 0); }
				100% { transform: translate3d(85px, 0, 0); }
			}

			/* 버튼 공통 */
			.btn-panel-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 8px; font-size: 21px; font-weight: 600; box-sizing: border-box; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; z-index: 1; transition: all .3s; gap: 0; }
			.btn-panel-sso { color: #fff !important; background: #1c60c5; border: none; }
			.btn-panel-sso span { color: #fff !important; }
			.btn-panel-outline { color: #1c60c5 !important; border: 1px solid #1c60c5; background: transparent; }
			.btn-panel-outline span { color: #1c60c5 !important; }
			.btn-panel-submit .btn-arrow { width: 18px; height: 18px; object-fit: contain; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s, margin-left .3s; flex-shrink: 0; margin-left: 0; }
			.btn-panel-submit:hover .btn-arrow { opacity: 1; transform: translateX(0); margin-left: 8px; }

			.login-wrap-centered { width: 100%; max-width: 1400px; margin-bottom: 0; padding: 70px 0 100px 0; background: rgba(255,255,255); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 32px; overflow: hidden; }
			.login-logo-area { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; }
			.login-logo-area img { height: 52px; width: auto; flex-shrink: 0; }
			.login-logo-text .title { color: #ffffff; font-size: 24px; font-weight: 700; line-height: 1.3; }
			.login-logo-text .subtitle { color: #fff; font-size: 18px; font-weight: 400; margin-top: 2px; }
			.login-copyright { margin-top: 28px; text-align: center; color: #ffffff; font-size: 16px; line-height: 1.6; }

			@media all and (max-width: 1024px) {
				.login-bg-deco { display: none; }
				.login-logo-area img { height: 40px; }
				.login-logo-text .title { font-size: 18px; }
			}
			@media all and (max-width: 768px) {
				.login-page-body { padding: 20px 16px; justify-content: flex-start; }
				.login-wrap-centered { padding: 20px 0 30px 0; }
				.login-logo-area { gap: 12px; margin-bottom: 20px; }
				.login-logo-area img { height: 30px; }
				.login-logo-text .title { font-size: 15px; }
				.login-logo-text .subtitle { font-size: 11px; }
				.login-copyright { font-size: 11px; margin-top: 20px; }
				.bg-waves .waves { height: 40px; min-height: 40px; }
			}

/* 처리 중 비활성 버튼 시각 피드백 — 클릭 후 서버 왕복(비번검증 ~0.5s+) 동안 "무반응"으로 보이는 문제 방지 */
.btn-panel-submit:disabled { opacity:.55; cursor:default; }

/* ── 외부심사위원 로그인 2단계 인증 모달 (2026-07-15 목업 확정) ─────────────
   토큰은 login.css 기존값 상속: #1c60c5(액션)·#1356bc(점/아이콘)·#bebebe(테두리)·#eef4ff(틴트).
   신규 색상은 타이머/오류용 #d4453c 하나. */
.otp-dim { position:fixed; inset:0; background:rgba(23,37,60,.44); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:9100; }
.otp-modal { position:fixed; z-index:9101; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px,92vw); background:#fff; border-radius:24px; box-shadow:0 24px 70px rgba(16,42,89,.28); padding:40px 48px 36px; }
.otp-head { display:flex; align-items:flex-start; justify-content:space-between; }
.otp-title { color:#333; font-size:24px; font-weight:700; display:flex; align-items:flex-end; gap:7px; }
.otp-title:after { content:""; display:block; width:8px; height:8px; background:#1356bc; border-radius:100%; margin-bottom:7px; }
.otp-close { background:none; border:none; line-height:0; padding:6px; margin:-2px -8px 0 0; color:#919191; cursor:pointer; transition:color .2s; }
.otp-close:hover { color:#333; }
.otp-sub { margin-top:14px; color:#6a6a6a; font-size:16px; font-weight:500; line-height:1.55; }
.otp-sub b { color:#333; font-weight:700; }
.otp-channels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.otp-card { border:1px solid #bebebe; border-radius:14px; background:#fff; padding:26px 16px 22px;
    display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
    transition:border-color .2s, background .2s, box-shadow .2s; }
.otp-card:hover { border-color:#1c60c5; background:#f7faff; box-shadow:2px 4px 4px 0 rgba(146,193,232,.25); }
.otp-card:disabled { opacity:.55; cursor:default; }
.otp-card-icon { width:56px; height:56px; border-radius:16px; background:#eef4ff; display:flex; align-items:center; justify-content:center; margin-bottom:8px; transition:background .2s; }
.otp-card:hover .otp-card-icon { background:#e2edff; }
.otp-card strong { color:#333; font-size:18px; font-weight:700; }
.otp-card-value { color:#5d5d5d; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.otp-foot { margin-top:22px; color:#919191; font-size:14px; font-weight:500; text-align:center; }
.otp-code-item { margin-top:26px; }
.otp-code-item .login-label { font-size:17px; }
.otp-code-input { font-size:24px; letter-spacing:8px; font-variant-numeric:tabular-nums; padding-right:110px; }
.otp-code-input::placeholder { font-size:18px; letter-spacing:0; color:#b3b3b3; }
.otp-timer { position:absolute; right:26px; bottom:21px; color:#d4453c; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.otp-msg { margin-top:10px; font-size:14.5px; font-weight:500; color:#d4453c; min-height:20px; visibility:hidden; }
.otp-msg.show { visibility:visible; }
.otp-confirm { margin-top:18px; }
.otp-confirm:disabled { background:#b9cae4; cursor:default; }
.otp-confirm:disabled .btn-arrow { display:none; }
.otp-links { display:flex; align-items:center; justify-content:center; margin-top:22px; }
.otp-links button { background:none; border:none; color:#3c3c3c; font-size:15.5px; font-weight:500; padding:2px 0; cursor:pointer; }
.otp-links button:hover { color:#1356bc; }
.otp-links button:disabled { color:#a5a5a5; cursor:default; }
.otp-links button + button::before { content:""; display:inline-block; width:1px; height:14px; background:#919191; margin:0 16px; vertical-align:middle; }
.otp-done { display:flex; flex-direction:column; align-items:center; padding:26px 0 12px; }
.otp-done-check { width:60px; height:60px; border-radius:50%; background:#1c60c5; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.otp-done h3 { color:#333; font-size:21px; font-weight:700; }
.otp-done p { margin-top:8px; color:#6a6a6a; font-size:15.5px; font-weight:500; }
@media all and (max-width:640px) {
  .otp-modal { padding:30px 24px 28px; border-radius:18px; }
  .otp-channels { grid-template-columns:1fr; }
  .otp-card { flex-direction:row; justify-content:flex-start; gap:14px; padding:16px 18px; }
  .otp-card-icon { margin-bottom:0; width:46px; height:46px; }
  .otp-card strong { font-size:16px; }
  .otp-card-value { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .otp-card, .otp-card-icon, .otp-close { transition:none; }
}