:root { --ink:#172033; --muted:#6b7689; --line:#ccd5e2; --accent:#1428a0; --paper:#fff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin:0; display:grid; place-items:center; padding:24px; color:var(--ink); font-family:"Avenir Next","Noto Sans KR",sans-serif; background:linear-gradient(135deg,rgba(20,40,160,.12),transparent 42%),repeating-linear-gradient(90deg,transparent 0 39px,rgba(23,32,51,.035) 40px),#edf1f7; }
.login-card { width:min(100%,390px); padding:34px; border:1px solid var(--line); border-top:5px solid var(--accent); border-radius:14px; background:var(--paper); box-shadow:0 24px 60px rgba(23,32,51,.14); }
.login-kicker { margin:0 0 8px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; }
h1 { margin:0 0 28px; font-size:30px; letter-spacing:-.04em; }
form { display:grid; gap:8px; }
label { margin-top:8px; color:var(--muted); font-size:12px; font-weight:600; }
input { width:100%; height:44px; border:1px solid var(--line); border-radius:8px; padding:0 12px; color:var(--ink); background:#fbfcfe; font:inherit; }
input:focus { outline:3px solid rgba(20,40,160,.14); border-color:var(--accent); }
#login_error { min-height:18px; margin:6px 0 0; color:#c81e2b; font-size:12px; }
button { height:44px; border:0; border-radius:8px; color:#fff; background:var(--accent); font-size:14px; font-weight:700; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }