:root{
  --ink:#1a2536; --ink-soft:#4a5568; --muted:#78849a; --paper:#f6f4ef; --card:#ffffff;
  --line:#e2ddd2; --navy:#16223a; --navy-2:#1e2d49; --danger:#a33a2c;
  --font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.6; padding:24px;
}
.box{
  width:min(380px,100%); background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:32px 28px; box-shadow:0 1px 2px rgba(24,32,48,.05), 0 12px 32px -20px rgba(24,32,48,.35);
}
h1{margin:0 0 4px; font-size:24px; letter-spacing:-.01em}
.sub{margin:0 0 22px; color:var(--muted); font-size:14px}
form{display:flex; flex-direction:column; gap:14px}
label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-soft); font-weight:700}
input{
  font:inherit; color:inherit; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; font-weight:400;
}
input:focus{outline:2px solid var(--navy); outline-offset:1px}
button{
  font:inherit; margin-top:6px; padding:11px 14px; border-radius:10px; border:1px solid var(--navy);
  background:var(--navy); color:#fff; font-weight:700; cursor:pointer;
}
button:hover:not(:disabled){background:var(--navy-2)}
button:disabled{opacity:.5; cursor:default}
#message{margin:14px 0 0; color:var(--danger); font-weight:700; font-size:14px}
.help{margin:18px 0 0; color:var(--muted); font-size:12px}
code{background:var(--paper); padding:1px 5px; border-radius:5px}