/*
 * 비인증 화면 셸 — 로그인 · 비밀번호 초기화 요청.
 *
 * ★ <b>왜 파일로 뽑았나</b> — 원래 login.html 안에 <style> 로 있었는데, 비밀번호 초기화
 *   화면도 같은 모양이 되면서 <b>두 벌</b>이 될 뻔했다. 이 저장소는 같은 코드가 두 벌 되어
 *   한쪽만 고치는 일을 여러 번 겪었다(escapeHtml 세 벌 중 하나만 동작이 달랐던 적도 있다).
 *   화면이 둘이 된 순간 파일로 옮긴다.
 *
 * 쓰는 곳: templates/login.html · templates/password-reset-request.html
 * 배경 애니메이션은 lib/login-particles.js 가 <canvas class="vx-login-bg"> 에 붙인다.
 */
/* ══ 로그인 — 어두운 배경 위 중앙 카드 (형님 2026-08-31, DMS 화면과 같은 언어) ═══════════
   ★ 이 화면은 <b>레이아웃 셸을 쓰지 않는다</b>(헤더·GNB 가 없다). 벤더의 .member-wrap 대신
     전용 클래스로 짠다 — 벤더 규칙과 싸우다 특이도 전쟁이 되는 것을 피한다. */
.vx-login {
    position: relative; min-height: 100vh;
    /* ★ <b>세로 flex</b> 다. 카드 영역이 남는 높이를 다 먹고(flex:1) 푸터가 흐름의 끝에
       놓이므로, 푸터를 absolute 로 띄우지 않아도 <b>항상 화면 바닥</b>이다. 내용이
       화면보다 길어지면 겹치는 대신 아래로 밀린다. */
    display: flex; flex-direction: column;
    /* 점·선이 떠 보이도록 어두운 <b>파랑</b> 바탕(형님 2026-08-31, DMS 화면과 같은 계열).
       위가 밝고 아래가 짙어 카드가 가운데서 뜬다. */
    background: radial-gradient(1200px 700px at 50% 20%, #16324f 0%, #0c1a2c 55%, #060d16 100%);
    overflow: hidden;
}
.vx-login-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vx-login-center {
    position: relative; z-index: 1; flex: 1;
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 40px 20px;
}

.vx-login-card {
    width: 100%; max-width: 400px; margin: 0 auto;
    border-radius: 14px; overflow: hidden;
    background: rgba(16, 27, 42, .92);
    border: 1px solid rgba(255, 255, 255, .10);
    /* 배경이 어두워 그림자만으로는 안 떠 보인다 — 안쪽 밝은 선을 함께 준다. */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.vx-login-head { padding: 26px 28px 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.vx-login-logo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; }
.vx-login-logo .vx {
    display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px;
    background: #2E7F7A; color: #fff; font-style: normal; font-weight: 800;
}
.vx-login-sub { margin: 10px 0 0; font-size: 14px; color: #9db2cc; }

.vx-login-body { padding: 24px 28px 28px; }

/* 안내 — hidden 을 쓰므로 display 를 주는 규칙과 겹치지 않게 !important 로 되살린다
   (대시보드에서 `hidden` 이 `display:flex` 에 져서 배너가 늘 떠 있던 실수를 되풀이하지 않는다). */
.vx-login-notice {
    margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
    background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .38); color: #fbd38d;
}
.vx-login-notice[hidden] { display: none !important; }

.vx-login-field { position: relative; margin-bottom: 12px; }
.vx-login-ico {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: #7488a3; pointer-events: none;
}
.vx-login-ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.vx-login-field input {
    width: 100%; height: 48px; padding: 0 14px 0 42px;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06); color: #e9f0f8; font-size: 14px;
    transition: border-color .15s, background .15s;
}
.vx-login-field input::placeholder { color: #7488a3; }
.vx-login-field input:focus {
    outline: none; border-color: #2E7F7A; background: rgba(255, 255, 255, .09);
    box-shadow: 0 0 0 3px rgba(46, 127, 122, .22);
}

.vx-login-submit {
    width: 100%; height: 48px; margin-top: 6px;
    border: 0; border-radius: 8px; background: #2E7F7A; color: #fff;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.vx-login-submit:hover { background: #26706b; }
.vx-login-submit:focus-visible { outline: 3px solid rgba(46, 127, 122, .5); outline-offset: 2px; }

.vx-login-links { margin-top: 18px; text-align: center; font-size: 13px; }
.vx-login-links a { color: #9db2cc; text-decoration: none; }
.vx-login-links a:hover { color: #d5e2f2; text-decoration: underline; }
.vx-login-sep { margin: 0 8px; color: #3f5266; }

.vx-login-foot {
    /* 화면 바닥에 붙는다(형님 2026-08-31). 카드가 위로 밀리지 않는 것은
       .vx-login-center 가 flex:1 로 남는 높이를 다 먹기 때문이다. */
    position: relative; z-index: 1; flex: none;
    margin: 0; padding: 14px 20px; text-align: center;
    color: #7488a3; font-size: 12px; line-height: 1.9;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: rgba(0, 0, 0, .22);
}
.vx-login-foot strong { color: #8ea2bd; margin-right: 8px; }
/* 로고 — 글자와 밑선을 맞춘다. 파일이 없으면 onerror 로 스스로 숨는다(조각 참조). */
.vx-login-foot-logo { height: 14px; vertical-align: -2px; margin-right: 8px; opacity: .75; }
/* 전화·메일 링크 — 본문과 같은 색으로 두되 hover 에서만 밝힌다(푸터가 링크투성이로 보이지 않게). */
.vx-login-foot a { color: inherit; text-decoration: none; }
.vx-login-foot a:hover { color: #d5e2f2; text-decoration: underline; }
.vx-login-foot span { margin-right: 8px; }
.vx-login-copy { margin: 6px 0 0; color: #54687f; }

/* ── 비밀번호 초기화 요청에서만 쓰는 것 ──────────────────────────────────────
   ★ .vx-login-notice 는 <b>경고색(주황)</b>이라 안내에 쓰지 않는다 — 자동 로그아웃 배너와
     같은 색이면 "무슨 문제가 생겼나" 로 읽힌다. 안내는 조용한 회색이다. */
.vx-login-guide {
    margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #9db2cc; text-align: center;
}
/* 링크가 하나뿐일 때 — 로그인 화면의 두 개짜리(.vx-login-links)와 여백을 맞춘다. */
.vx-login-back { margin-top: 18px; text-align: center; font-size: 13px; }
.vx-login-back a { color: #9db2cc; text-decoration: none; }
.vx-login-back a:hover { color: #d5e2f2; text-decoration: underline; }

/* .vx-sr-only 는 여기 없다 — assets/css/vx-overrides.css 한 곳에 있다.
   그 파일은 layouts/default 의 head 조각에서 <b>모든 화면</b>에 실리므로 이 화면들도 받는다.
   종전엔 양쪽에 한 벌씩 있었다(2026-09-03 정리). 두 벌이면 한쪽만 고쳐진다. */

/* 아주 낮은 화면에서는 카드와 겹칠 수 있어 접는다 — 바닥 고정이라 임계를 낮게 잡았다. */
@media (max-height: 560px) { .vx-login-foot { display: none; } }

/* ══ 회원가입 (형님 2026-09-03) ══════════════════════════════════════════
   ★ 로그인과 <b>같은 카드</b>를 쓴다. 다른 것은 셋뿐이다:
     ① 줄이 아홉이라 아이콘을 없앤다(같은 그림이 늘어서면 오히려 읽기 나쁘다)
     ② 필수/선택을 가르는 한 줄
     ③ 동의 체크박스
   ══════════════════════════════════════════════════════════════════════ */

/* 아이콘 칸이 없으니 왼쪽 여백을 로그인(42px)에서 되돌린다. */
.vx-login-field--plain input { padding-left: 14px; }

.vx-login-optional {
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: #7488a3;
}

.vx-login-agree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    font-size: 13px;
    color: #9db2cc;
    cursor: pointer;
}
/* 체크박스는 브라우저 기본이 밝은 바탕을 전제해 어두운 카드에서 안 보인다 —
   accent-color 로 우리 색을 준다(직접 그리면 포커스 링·키보드 조작을 잃는다). */
.vx-login-agree input[type="checkbox"] {
    width: 16px; height: 16px; flex: none;
    accent-color: #2E7F7A;
    cursor: pointer;
}
.vx-login-agree:hover { color: #d5e2f2; }

/* ★ 카드가 화면보다 길면(가입은 아홉 줄이라 그렇다) flex 가운데정렬은 <b>위가 잘린다</b>
   — 넘친 만큼이 음수 여백이 되어 스크롤로도 못 올라간다. 가입 화면만 위에서부터 흐르게 한다.
   ★★ `.vx-login-center` 를 <b>그냥</b> 고치지 않는다. 그 클래스는 로그인·비밀번호 초기화도
      쓴다 — 짧아서 멀쩡한 두 화면의 세로 가운데정렬을 같이 깨뜨린다. 공용을 건드릴 때는
      그 공용을 쓰는 곳을 본다(2026-09-01 에 레이아웃에서 똑같이 겪었다). */
.vx-login--signup .vx-login-center { align-items: flex-start; }