@charset "UTF-8";

:root { --forest-950:#0d2b25; --forest-900:#123830; --forest-800:#174a3e; --forest-700:#1e5d4d; --green-500:#47ad77; --lime-300:#b8df7d; --cream-50:#fbfcf8; --cream-100:#f2f5ed; --ink-900:#17231f; --ink-600:#61706a; --line:#dfe7e1; --danger:#d74a49; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--cream-50); color:var(--ink-900); font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
svg { display:block; width:1em; height:1em; fill:currentColor; }
.login-page { display:grid; grid-template-columns:minmax(480px,1.08fr) minmax(460px,.92fr); min-height:100vh; }
.login-visual { position:relative; display:flex; flex-direction:column; min-height:100vh; padding:46px clamp(52px,6vw,104px) 38px; overflow:hidden; color:#fff; background:linear-gradient(145deg,rgba(7,35,29,.98),rgba(22,79,63,.94)),radial-gradient(circle at 70% 20%,#347a5e,transparent 48%); }
.login-visual::before,.login-visual::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.login-visual::before { width:560px; height:560px; right:-270px; top:-110px; }
.login-visual::after { width:420px; height:420px; left:-245px; bottom:-180px; }
.visual-glow { position:absolute; border-radius:50%; pointer-events:none; }
.visual-glow-one { width:330px; height:330px; top:12%; right:-130px; background:rgba(108,197,143,.12); }
.visual-glow-two { width:220px; height:220px; left:15%; bottom:12%; background:rgba(184,223,125,.08); }
.brand,.mobile-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-size:18px; font-weight:800; letter-spacing:.12em; }
.brand-mark { display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; }
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(7,29,24,.22)); }
.visual-content { position:relative; z-index:1; width:min(100%,650px); margin:auto 0; padding:64px 0; }
.eyebrow { margin:0 0 22px; color:var(--lime-300); font-size:12px; font-weight:800; letter-spacing:.22em; }
.visual-content h1 { margin:0; font-size:clamp(40px,4.2vw,66px); line-height:1.18; letter-spacing:-.045em; word-break:keep-all; }
.visual-description { margin:26px 0 0; color:rgba(255,255,255,.7); font-size:17px; line-height:1.85; }
.flow-card { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:54px; padding:25px 28px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:rgba(255,255,255,.07); box-shadow:0 24px 70px rgba(5,24,19,.24); backdrop-filter:blur(10px); }
.flow-step { display:grid; grid-template-columns:44px auto; column-gap:12px; align-items:center; }
.flow-step>span { grid-row:1/3; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; color:var(--lime-300); background:rgba(255,255,255,.1); }
.flow-step>span svg { width:21px; height:21px; }
.flow-step.is-active>span { color:var(--forest-900); background:var(--lime-300); }
.flow-step strong { font-size:14px; white-space:nowrap; }
.flow-step small { margin-top:3px; color:rgba(255,255,255,.48); font-size:10px; letter-spacing:.08em; }
.flow-arrow { color:rgba(255,255,255,.24); font-size:11px; }
.visual-footer { position:relative; z-index:1; margin:0; color:rgba(255,255,255,.4); font-size:12px; letter-spacing:.08em; }
.login-panel { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:50px clamp(40px,6vw,100px); background:radial-gradient(circle at 100% 0,rgba(184,223,125,.17),transparent 32%),var(--cream-50); }
.login-card { width:min(100%,440px); }
.mobile-brand { display:none; margin-bottom:46px; color:var(--forest-900); }
.login-heading { display:flex; align-items:center; gap:16px; }
.heading-icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:17px; color:var(--forest-700); background:#e8f3e8; font-size:20px; }
.heading-icon svg { width:23px; height:23px; }
.login-heading p { margin:0 0 3px; color:var(--green-500); font-size:12px; font-weight:800; letter-spacing:.08em; }
.login-heading h2 { margin:0; font-size:34px; line-height:1.2; letter-spacing:-.04em; }
.login-guide { margin:18px 0 38px; color:var(--ink-600); font-size:15px; }
.field-label { display:block; margin:0 0 9px; font-size:13px; font-weight:700; }
.input-wrap { position:relative; margin-bottom:22px; }
.input-icon { position:absolute; top:50%; left:17px; width:18px; height:18px; color:#82918b; transform:translateY(-50%); transition:color .2s ease; }
.input-wrap input { width:100%; height:56px; padding:0 50px; border:1px solid var(--line); border-radius:14px; outline:none; color:var(--ink-900); background:#fff; font-size:15px; transition:border-color .2s ease,box-shadow .2s ease; }
.input-wrap input::placeholder { color:#a6b0ac; }
.input-wrap input:focus { border-color:var(--green-500); box-shadow:0 0 0 4px rgba(71,173,119,.12); }
.input-wrap:focus-within>.input-icon { color:var(--green-500); }
.password-toggle { position:absolute; top:50%; right:10px; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; border-radius:10px; color:#82918b; background:transparent; cursor:pointer; transform:translateY(-50%); }
.password-toggle:hover { color:var(--forest-700); background:var(--cream-100); }
.password-toggle svg { width:19px; height:19px; }
.login-error { min-height:20px; margin:-9px 0 12px; color:var(--danger); font-size:13px; }
.login-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:58px; border:0; border-radius:15px; color:#fff; background:var(--forest-800); box-shadow:0 15px 30px rgba(23,74,62,.2); font-size:16px; font-weight:800; cursor:pointer; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.login-button:hover { background:var(--forest-700); box-shadow:0 18px 34px rgba(23,74,62,.26); transform:translateY(-2px); }
.login-button:active { transform:translateY(0); }
.login-button:disabled { cursor:wait; opacity:.72; transform:none; }
.login-button.is-loading i { animation:pulse-arrow .8s ease-in-out infinite alternate; }
.login-button svg { width:19px; height:19px; }
.login-button.is-loading svg { animation:pulse-arrow .8s ease-in-out infinite alternate; }
.demo-login-wrap { margin-top:20px; }
.demo-login-divider { display:flex; align-items:center; gap:12px; margin-bottom:14px; color:#9aa7a2; font-size:11px; }
.demo-login-divider::before,.demo-login-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.demo-login-button { width:100%; height:50px; border:1px solid #bfd4c7; border-radius:14px; color:var(--forest-800); background:#fff; font-size:14px; font-weight:800; cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.demo-login-button:hover { border-color:var(--green-500); background:#f3f8f3; }
.demo-login-button:disabled { cursor:wait; opacity:.65; }
.support-box { display:flex; align-items:center; gap:14px; margin-top:32px; padding:17px 18px; border-radius:14px; color:var(--ink-600); background:var(--cream-100); }
.support-box>svg { flex:0 0 auto; width:22px; height:22px; color:var(--green-500); }
.support-box strong,.support-box span { display:block; }
.support-box strong { margin-bottom:3px; color:var(--ink-900); font-size:12px; }
.support-box span { font-size:11px; }
.copyright { margin:32px 0 0; color:#a0aaa6; font-size:11px; text-align:center; }
@keyframes pulse-arrow { from { transform:translateX(-2px); } to { transform:translateX(3px); } }
@media (max-width:1080px) { .login-page { grid-template-columns:minmax(420px,.9fr) minmax(430px,1.1fr); } .flow-card { align-items:stretch; gap:10px; padding:20px; } .flow-step { grid-template-columns:1fr; justify-items:center; text-align:center; } .flow-step>span { grid-row:auto; margin-bottom:8px; } }
@media (max-width:820px) { .login-page { display:block; } .login-visual { display:none; } .login-panel { min-height:100vh; padding:42px 24px; } .mobile-brand { display:flex; } }
@media (max-width:480px) { .login-panel { align-items:flex-start; padding:30px 20px; } .mobile-brand { margin-bottom:38px; } .login-heading h2 { font-size:29px; } .login-guide { margin-bottom:32px; line-height:1.6; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }