:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f3f4f1; color: #1b2230;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; }
main { width: min(92vw, 340px); }
form { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 24px; background: #fff;
  border: 1px solid #d9dde3; border-radius: 16px; text-align: center; }
svg { color: #24406a; }
h1 { margin: 0; font-size: 1.2rem; }
input { width: 100%; padding: 12px; font: inherit; font-size: 1.5rem; letter-spacing: 0.4em; text-align: center;
  border: 1px solid #d9dde3; border-radius: 10px; font-variant-numeric: tabular-nums; }
input:focus { outline: 2px solid #345a91; outline-offset: 0; border-color: transparent; }
button { width: 100%; padding: 12px; font: inherit; font-weight: 700; color: #fff; background: #24406a; border: 0; border-radius: 10px; cursor: pointer; }
.err { margin: 0; color: #b0362c; font-weight: 600; font-size: 0.9rem; }
.hint { margin: 0; color: #697282; font-size: 0.8rem; }
.pin-hint { margin: -4px 0 0; padding: 6px 12px; border-radius: 999px; background: #e4f0f9; color: #4f86b3; font-size: 0.88rem; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }