/* 로그인 화면 전용 스타일 (Views/Account/Login.cshtml · wwwroot/js/login.js 공용)
   — 인라인 스타일 금지 규칙(2026-10-20)에 따라 화면별 CSS 로 분리 관리.
   — Layout = null 독립 페이지: 전역 리셋·:root 변수를 이 파일에서 직접 정의 (타 화면과 공유 안 함) */

@font-face {
    font-family: 'Pretendard';
    src: url('/lib/pretendard/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-display: swap;
}

:root {
    --primary: #2457C5; --primary-hover: #1C46A4; --primary-weak: #EDF2FC;
    --navy-0: #070F22; --navy-1: #0B1B3A; --navy-2: #102A5C;
    --ink: #171E2B; --ink-2: #5A6473; --ink-3: #9AA3B2;
    --line: #E6EAF1; --bg-input: #F4F6FA; --danger: #D13438; --ok: #0E8A5F;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Pretendard', 'Segoe UI', 'Malgun Gothic', sans-serif;
    color: var(--ink); letter-spacing: -0.01em; background: #fff;
}

.shell { display: flex; min-height: 100vh; }

/* ───────────── 좌측 브랜드 패널 ───────────── */
.brand-panel {
    width: 44%; min-width: 420px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--navy-0) 0%, var(--navy-1) 48%, var(--navy-2) 100%);
    color: #fff; display: flex; flex-direction: column; justify-content: space-between;
    padding: 52px 56px;
}
/* 도트 그리드 + 글로우 */
.brand-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.25));
}
.brand-panel::after {
    content: ""; position: absolute; width: 760px; height: 760px; right: -300px; bottom: -340px;
    background: radial-gradient(circle, rgba(58,110,220,.28) 0%, transparent 65%);
    pointer-events: none;
}

.brand-copy { position: relative; z-index: 1; margin: auto 0; }
/* 로고 락업: 마크 이미지(logo_01_silver = 텍스트 없는 마크 전용) + 타이포 제품명 */
.brand-lockup { display: flex; align-items: center; gap: 18px; margin-bottom: 38px; }
.brand-lockup .mark img { height: 84px; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.brand-lockup .name { font-size: 34px; font-weight: 800; letter-spacing: .02em; color: #fff; line-height: 1; }
.brand-lockup .name b { color: #8FB2F5; font-weight: 800; }
.brand-copy .eyebrow {
    font-size: 12.5px; font-weight: 650; color: #7E9CD8; letter-spacing: .14em; margin-bottom: 18px;
}
.brand-copy h2 { font-size: 34px; font-weight: 800; line-height: 1.32; letter-spacing: -0.025em; }
.brand-copy h2 em { font-style: normal; color: #8FB2F5; }
.brand-copy p { margin-top: 14px; font-size: 14.5px; color: #93A1BE; line-height: 1.7; font-weight: 450; }

.brand-copy .feats { margin-top: 34px; display: flex; flex-direction: column; gap: 13px; }
.brand-copy .feat { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #B8C4DC; font-weight: 500; }
.brand-copy .feat .ic {
    width: 21px; height: 21px; border-radius: 6px; flex-shrink: 0;
    background: rgba(143,178,245,.13); display: flex; align-items: center; justify-content: center;
}
.brand-copy .feat .ic svg { width: 11px; height: 11px; fill: #8FB2F5; }

.brand-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5F6F93; font-weight: 500; }
.brand-foot svg { width: 13px; height: 13px; fill: #5F6F93; }
.brand-foot .sep { opacity: .45; }

/* ───────────── 우측 폼 패널 ───────────── */
.form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.form-inner { width: 100%; max-width: 384px; animation: rise .5s cubic-bezier(.16,.84,.3,1); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; }
.lead { margin-top: 9px; font-size: 14px; color: var(--ink-2); line-height: 1.65; font-weight: 450; }
.lead b { color: var(--ink); font-weight: 650; }

form { margin-top: 30px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 7px; }
.control { position: relative; }
.control input {
    width: 100%; height: 50px; padding: 0 16px; font-size: 14.5px; font-weight: 500;
    font-family: inherit; color: var(--ink);
    background: var(--bg-input); border: 1.5px solid transparent; border-radius: 12px;
    outline: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
.control input::placeholder { color: #AEB6C4; font-weight: 450; }
.control input:hover { background: #EFF2F8; }
.control input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(36,87,197,.1); }
.control input[readonly] { color: var(--ink-3); }

.pw-toggle {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.pw-toggle:hover { background: rgba(23,30,43,.06); }
.pw-toggle svg { width: 18px; height: 18px; fill: var(--ink-3); }

.btn {
    width: 100%; height: 50px; margin-top: 10px; font-size: 15px; font-weight: 700; font-family: inherit;
    color: #fff; background: var(--primary); border: 0; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    transition: background .15s, transform .08s, box-shadow .2s;
}
.btn:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 8px 22px rgba(36,87,197,.28); }
.btn:active:not(:disabled) { transform: scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .spinner {
    width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite; display: none;
}
.btn.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────── OTP 단계 ───────────── */
#otpStep { display: none; }
#otpStep.on { display: block; animation: rise .4s cubic-bezier(.16,.84,.3,1); }
#credStep.off { display: none; }

.otp-cells { display: flex; gap: 9px; margin-top: 4px; }
.otp-cells input {
    flex: 1; min-width: 0; height: 58px; text-align: center; font-size: 23px; font-weight: 750;
    font-family: inherit; color: var(--ink); caret-color: var(--primary);
    background: var(--bg-input); border: 1.5px solid transparent; border-radius: 12px;
    outline: none; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.otp-cells input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(36,87,197,.1); }
.otp-cells input.filled { background: var(--primary-weak); border-color: rgba(36,87,197,.3); }

.otp-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.otp-timer { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--primary); font-variant-numeric: tabular-nums; }
.otp-timer svg { width: 14px; height: 14px; fill: currentColor; }
.otp-timer.expired { color: var(--danger); }
.link-btn {
    border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 650;
    color: var(--ink-2); cursor: pointer; padding: 6px 4px; border-radius: 6px; transition: color .15s;
}
.link-btn:hover:not(:disabled) { color: var(--primary); }
.link-btn:disabled { opacity: .45; cursor: not-allowed; }
.back-row { margin-top: 18px; text-align: center; }
.back-row .link-btn { color: var(--ink-3); font-weight: 550; }

/* ───────────── SweetAlert2 커스텀 스킨 (기성 티 제거) ───────────── */
.swal2-container.swal2-backdrop-show { background: rgba(10,16,30,.45) !important; backdrop-filter: blur(3px); }
.vp-popup {
    border-radius: 20px !important; padding: 30px 28px 26px !important; width: 25.5em !important;
    box-shadow: 0 24px 64px rgba(10,20,45,.28) !important; font-family: 'Pretendard', sans-serif !important;
}
.vp-title { font-size: 17.5px !important; font-weight: 750 !important; color: var(--ink) !important; letter-spacing: -0.02em !important; padding: 14px 0 0 !important; }
.vp-html { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.65 !important; margin-top: 8px !important; font-weight: 450 !important; }
.vp-confirm {
    background: var(--primary) !important; border-radius: 11px !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 700 !important; padding: 11.5px 34px !important;
    font-family: inherit !important; letter-spacing: -0.01em !important;
}
.vp-confirm:focus { box-shadow: 0 0 0 4px rgba(36,87,197,.18) !important; }
.vp-popup .swal2-icon { transform: scale(.78); margin: 2px auto 0 !important; }
.vp-toast {
    border-radius: 12px !important; box-shadow: 0 10px 34px rgba(10,20,45,.16) !important;
    padding: 13px 18px !important; font-family: 'Pretendard', sans-serif !important;
}
.vp-toast .swal2-title { font-size: 13.5px !important; font-weight: 650 !important; color: var(--ink) !important; }
.vp-toast .swal2-icon { transform: scale(.62); margin: 0 !important; }

/* ───────────── 반응형 ───────────── */
@media (max-width: 920px) {
    .brand-panel { display: none; }
    .form-panel { min-height: 100vh; background: linear-gradient(180deg, #F7F9FC 0%, #fff 220px); }
}

/* ───────────── 인라인 스타일 추출분 (lgn-) ───────────── */
.lgn-spacer { height: 26px; }            /* 제목(lead)과 입력 폼 사이 간격 (1·2단계 공용) */
.lgn-pw-input { padding-right: 48px; }   /* 비밀번호 입력칸 — 우측 표시 토글 버튼 자리 확보 */
.lgn-login-btn { margin-top: 22px; }     /* OTP 단계 로그인 버튼 상단 간격 */