:root { --blue:#2563eb; --ink:#172033; --muted:#667085; --line:#d0d5dd; --paper:#fff; --danger:#b42318; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:#f3f6fb; color:var(--ink); font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif; line-height:1.55; }
.recovery-page { min-height:100vh; display:grid; place-items:center; padding:32px 16px; }
.recovery-card { width:min(480px,100%); padding:32px; border:1px solid #e1e7ef; border-radius:16px; background:var(--paper); box-shadow:0 18px 50px rgba(16,24,40,.10); }
.brand { display:inline-block; margin-bottom:24px; color:#173958; font-size:19px; font-weight:900; text-decoration:none; }
.brand strong { color:var(--blue); }
h1 { margin:0 0 10px; font-size:26px; line-height:1.25; }
.description,.muted { color:var(--muted); font-size:14px; }
.field { display:block; margin-top:22px; }
.field span { display:block; margin-bottom:7px; font-size:14px; font-weight:800; }
.field input { width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; font-size:16px; }
.field input:focus { outline:3px solid rgba(37,99,235,.18); border-color:var(--blue); }
.primary,.secondary { min-height:48px; display:flex; align-items:center; justify-content:center; width:100%; margin-top:18px; border-radius:8px; font-size:15px; font-weight:800; cursor:pointer; text-decoration:none; }
.primary { border:1px solid var(--blue); color:#fff; background:var(--blue); }
.secondary { border:1px solid var(--line); color:#344054; background:#fff; }
.notice,.error { margin:20px 0 0; padding:13px 14px; border-radius:8px; font-size:14px; }
.notice { border:1px solid #b2ccff; background:#eff4ff; color:#1849a9; }
.error { border:1px solid #fecdca; background:#fef3f2; color:var(--danger); }
.error ul { margin:0; padding-left:20px; }
.links { margin-top:22px; display:grid; gap:10px; text-align:center; font-size:14px; }
.links a { color:#344054; }
[hidden] { display:none !important; }
@media (max-width:390px) { .recovery-page { padding:12px; } .recovery-card { padding:24px 18px; } h1 { font-size:23px; } .description,.muted,.notice,.error { font-size:14px; } }