@charset "utf-8";
/*
 * 로그인·아이디/비밀번호 찾기 화면 공통 스타일 (EgovLoginUsr.jsp, EgovFindAccount.jsp) — 인수인계 74장
 *   1. 색 변수 (밝은 :root / 다크 body.dark-mode)  2. 로그인 화면 틀·입력·버튼  3. 아이디·비밀번호 찾기 (탭·단계·안내)
 *   예전에는 로그인 JSP 안 <style>에 있던 것을 두 화면이 같이 쓰도록 옮김
 */

:root {
    --login-bg: #edf4f7;
    --login-panel: #ffffff;
    --login-text: #172632;
    --login-muted: #71818d;
    --login-line: #d9e4e9;
    --login-primary: #1689bd;
    --login-primary-dark: #0b4362;
    --login-soft: #dff3fa;
    --login-shadow: rgba(31, 63, 79, 0.14);
    --login-error-text: #b42318;
    --login-error-bg: #fdecea;
}

body.wancut-login-page.dark-mode {
    --login-bg: #0c141b;
    --login-panel: #152029;
    --login-text: #eef6fa;
    --login-muted: #9aaab5;
    --login-line: #2c3b45;
    --login-primary: #42b4e4;
    --login-primary-dark: #082f47;
    --login-soft: #173747;
    --login-shadow: rgba(0, 0, 0, 0.35);
    --login-error-text: #ff9a8f;
    --login-error-bg: #3a1f22;
}

html, body { width: 100%; min-height: 100%; }
body.wancut-login-page {
    margin: 0;
    color: var(--login-text);
    background: var(--login-bg);
    font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.wancut-login-page *, .wancut-login-page *::before, .wancut-login-page *::after { box-sizing: border-box; }
.wancut-login-page button, .wancut-login-page input { font: inherit; }
.wancut-login-page .skip_navi {
    position: absolute; left: -9999px; top: 0;
}
.wancut-login-page .skip_navi:focus {
    left: 16px; top: 12px; z-index: 100; padding: 10px 14px;
    color: #fff; background: #111; border-radius: 6px;
}
.wancut-login {
    position: relative; min-height: 100vh; overflow: hidden;
    background: var(--login-bg);
}
.wancut-login__header {
    position: relative; z-index: 5; height: 76px;
    display: flex; align-items: center; padding: 0 42px;
}
.wancut-brand { display: flex; align-items: center; gap: 11px; }
.wancut-brand__mark {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; color: #fff; background: var(--login-primary);
    font-size: 17px; font-weight: 700;
}
.wancut-brand__name { display: block; color: var(--login-text); font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.wancut-brand__sub { display: block; margin-top: 2px; color: var(--login-muted); font-size: 11px; }
.wancut-login__header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--login-muted); font-size: 12px; }
.wancut-mode-button {
    width: 40px; height: 40px; border: 1px solid var(--login-line);
    border-radius: 11px; color: var(--login-muted); background: var(--login-panel);
    cursor: pointer;
}
.wancut-mode-button:hover { color: var(--login-primary); border-color: var(--login-primary); }
.wancut-mode-button svg { width: 18px; height: 18px; vertical-align: middle; }
.wancut-mode-button .icon-sun { display: none; }
.dark-mode .wancut-mode-button .icon-moon { display: none; }
.dark-mode .wancut-mode-button .icon-sun { display: inline-block; }
.wancut-login__visual {
    position: absolute; left: 0; top: 76px; bottom: 0; width: 52%;
    padding: 8vh 6vw 50px;
}
.wancut-login__eyebrow { color: var(--login-primary); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.wancut-login__visual h1 {
    max-width: 560px; margin: 16px 0 18px;
    color: var(--login-text); font-size: clamp(39px, 4vw, 62px);
    line-height: 1.14; font-weight: 800; letter-spacing: -.055em;
}
.wancut-login__visual p {
    max-width: 470px; margin: 0; color: var(--login-muted);
    font-size: 15px; line-height: 1.8;
}
.wancut-route {
    position: absolute; left: 6vw; right: 3vw; bottom: 82px; height: 150px;
    border-bottom: 2px solid var(--login-line); transform: skewY(-7deg);
}
.wancut-route::before {
    content: ""; position: absolute; left: 72px; right: 118px; bottom: 32px;
    border-bottom: 2px dashed var(--login-line);
}
.wancut-pin {
    position: absolute; width: 16px; height: 16px;
    border-radius: 50% 50% 50% 0; background: var(--login-primary);
    transform: rotate(-45deg);
}
.wancut-pin--one { left: 7vw; bottom: 148px; }
.wancut-pin--two { right: 8vw; bottom: 95px; background: var(--login-primary-dark); }
.wancut-camera {
    position: absolute; right: 5vw; bottom: 98px; width: 112px; height: 80px;
    border-radius: 23px; background: var(--login-primary-dark);
    box-shadow: 0 18px 36px var(--login-shadow);
}
.wancut-camera::before {
    content: ""; position: absolute; left: 37px; top: 21px;
    width: 40px; height: 40px; border: 8px solid var(--login-soft); border-radius: 50%;
}
.wancut-camera::after {
    content: ""; position: absolute; left: 18px; top: -10px;
    width: 40px; height: 16px; border-radius: 8px 8px 0 0; background: var(--login-primary-dark);
}
.wancut-login__panel {
    position: absolute; right: 0; top: 76px; bottom: 0; width: 48%;
    display: flex; align-items: center; justify-content: center;
    padding: 44px 7vw; background: var(--login-panel);
    border-left: 1px solid var(--login-line);
}
.wancut-login-form { width: 100%; max-width: 410px; }
.wancut-login-form h2 { margin: 0; color: var(--login-text); font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.wancut-login-form__description { margin: 10px 0 34px; color: var(--login-muted); font-size: 13px; }
.wancut-field { margin-bottom: 18px; }
.wancut-field label { display: block; margin-bottom: 8px; color: var(--login-muted); font-size: 13px; font-weight: 700; }
.wancut-input {
    height: 52px; display: flex; align-items: center; gap: 10px;
    padding: 0 15px; border: 1px solid var(--login-line); border-radius: 11px;
    background: var(--login-panel); transition: border-color .15s, box-shadow .15s;
}
.wancut-input:focus-within { border-color: var(--login-primary); box-shadow: 0 0 0 4px var(--login-soft); }
.wancut-input__icon { width: 20px; height: 20px; color: var(--login-muted); text-align: center; }
.wancut-input__icon svg { width: 18px; height: 18px; }
.wancut-input input {
    min-width: 0; flex: 1; height: 48px; padding: 0; border: 0; outline: 0;
    color: var(--login-text); background: transparent; font-size: 14px;
}
.wancut-input input::placeholder { color: var(--login-muted); opacity: .7; }
.wancut-password-toggle {
    width: 34px; height: 34px; display: grid; place-items: center;
    padding: 0; border: 0; color: var(--login-muted); background: transparent;
    cursor: pointer;
}
.wancut-password-toggle:hover { color: var(--login-primary); }
.wancut-password-toggle svg { width: 18px; height: 18px; }
.wancut-login-options { display: flex; align-items: center; margin: 2px 0 25px; color: var(--login-muted); font-size: 12px; }
.wancut-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.wancut-check input { width: 15px; height: 15px; accent-color: var(--login-primary); }
.wancut-login-submit {
    width: 100%; height: 52px; border: 0; border-radius: 11px;
    color: #fff; background: var(--login-primary); font-size: 14px; font-weight: 800;
    cursor: pointer; box-shadow: 0 12px 25px rgba(22, 137, 189, .24);
}
.wancut-login-submit:hover { filter: brightness(.93); }
/* 테스트용 바로 로그인 버튼 (EgovLoginUsr.jsp, 운영 전에 뺀다) */
.wancut-login-test { display: flex; gap: 8px; margin-top: 10px; }
.wancut-login-test button {
    flex: 1 1 0; height: 40px; border: 1px dashed var(--login-line); border-radius: 9px;
    color: var(--login-muted); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer;
}
.wancut-login-test button:hover { color: var(--login-primary); border-color: var(--login-primary); }
.wancut-login-secure { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--login-muted); font-size: 11px; text-align: center; }
.wancut-login-secure svg { width: 15px; height: 15px; color: var(--login-primary); }
.wancut-login__footer { position: absolute; left: 42px; bottom: 24px; z-index: 5; color: var(--login-muted); font-size: 11px; }

@media (max-width: 860px) {
    .wancut-login__visual { display: none; }
    .wancut-login__panel { left: 0; width: 100%; border-left: 0; padding: 32px 24px 70px; }
    .wancut-login__header { padding: 0 22px; }
    .wancut-login__header-right > span { display: none; }
    .wancut-login__footer { left: 0; width: 100%; text-align: center; }
}

/* ---------- 3. 로그인 화면의 찾기 링크 + 아이디·비밀번호 찾기 화면 ---------- */
.wancut-login-options .wancut-find-links { margin-left: auto; display: flex; gap: 10px; }
.wancut-find-links a { color: var(--login-muted); text-decoration: none; }
.wancut-find-links a:hover { color: var(--login-primary); text-decoration: underline; }

.wancut-find-tabs { display: flex; gap: 6px; margin: 0 0 22px; padding: 4px; border: 1px solid var(--login-line); border-radius: 12px; }
.wancut-find-tabs a {
    flex: 1 1 0; height: 40px; display: grid; place-items: center;
    border-radius: 9px; color: var(--login-muted); font-size: 14px; font-weight: 700; text-decoration: none;
}
.wancut-find-tabs a[aria-current="page"] { color: #fff; background: var(--login-primary); }
.wancut-find-steps { display: flex; gap: 6px; margin: -6px 0 22px; color: var(--login-muted); font-size: 12px; }
.wancut-find-steps span { flex: 1 1 0; padding-top: 6px; border-top: 3px solid var(--login-line); }
.wancut-find-steps span.is-on { color: var(--login-primary); border-top-color: var(--login-primary); font-weight: 700; }
.wancut-find-msg { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6; }
.wancut-find-msg.is-info { color: var(--login-text); background: var(--login-soft); }
.wancut-find-msg.is-error { color: var(--login-error-text); background: var(--login-error-bg); }
.wancut-find-hint { margin: -10px 0 18px; color: var(--login-muted); font-size: 12px; }
.wancut-find-back { display: block; margin-top: 16px; color: var(--login-muted); font-size: 13px; text-align: center; text-decoration: none; }
.wancut-find-back:hover { color: var(--login-primary); }
.wancut-find-link-button { display: grid; place-items: center; text-decoration: none; }   /* 버튼 모양 링크 (완료 → 로그인 화면으로) */