:root{
  --bg:#0E1117; --surface:#161A22; --surface2:#1D222C;
  --ink:#E7EAF0; --ink2:#AEB6C4; --ink3:#7C8698;
  --line:#262C37; --line2:#3A4250;
  --accent:#8AA0FF; --accent-soft:#1B2240;
  --block:#EF7B72; --block-bg:#2E1917;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F4F6F9; --surface:#FFFFFF; --surface2:#EDF0F5;
    --ink:#131722; --ink2:#444E60; --ink3:#737E92;
    --line:#DDE2EA; --line2:#C3CBD8;
    --accent:#2C46C8; --accent-soft:#E6EAFB;
    --block:#B4302A; --block-bg:#FAE7E5;
  }
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans KR','Apple SD Gothic Neo',sans-serif;
  -webkit-font-smoothing:antialiased;word-break:keep-all;
  display:flex;align-items:center;justify-content:center;padding:24px}
.shell{width:100%;max-width:392px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:32px 30px;display:flex;flex-direction:column;gap:17px;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 20px 50px -30px rgba(0,0,0,.9)}
header{display:flex;flex-direction:column;gap:5px;margin-bottom:5px}
.mark{width:26px;height:26px;border-radius:6px;margin-bottom:9px;
  background:var(--accent);position:relative}
.mark::after{content:"";position:absolute;inset:8px 8px auto 8px;height:10px;
  border-left:2px solid var(--surface);border-bottom:2px solid var(--surface)}
h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.sub{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:12.5px;color:var(--ink2);display:flex;gap:7px;align-items:baseline}
.field em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.06em;color:var(--ink3)}
input{background:var(--surface2);border:1px solid var(--line2);border-radius:6px;
  padding:11px 13px;color:var(--ink);font-family:inherit;font-size:14.5px;width:100%;
  transition:border-color .12s,background .12s}
input:focus{outline:none;border-color:var(--accent);background:var(--bg)}
input.otp{font-family:'IBM Plex Mono',monospace;font-size:22px;letter-spacing:.42em;
  text-align:center;padding:12px 13px}
input.otp::placeholder{color:var(--line2);letter-spacing:.42em}
button{margin-top:4px;background:var(--accent);color:#0E1117;border:none;border-radius:6px;
  padding:12px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:filter .12s}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) button{color:#fff}}
button:hover:not(:disabled){filter:brightness(1.1)}
button:disabled{opacity:.55;cursor:progress}
.msg{margin:0;background:var(--block-bg);border:1px solid var(--block);color:var(--block);
  border-radius:6px;padding:10px 12px;font-size:12.5px;line-height:1.55}
.hint{margin:2px 0 0;font-size:11.5px;color:var(--ink3);line-height:1.6}
.foot{margin:0;text-align:center;font-size:11.5px;color:var(--ink3);line-height:1.6}
.foot strong{color:var(--block);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.foot .ok{color:var(--accent);font-weight:600}