:root{
  --bg:#ffffff; --sub:#f5f7f8; --line:#dfe3e7; --line-strong:#c8cfd5;
  --text:#1b2126; --muted:#5b666f; --accent:#00777a; --accent-hover:#005f61; --accent-bg:#e0f1f1; --on-accent:#ffffff;
  --sans:"Pretendard",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Pretendard",monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1417; --sub:#141a1e; --line:#262f35; --line-strong:#36414a;
  --text:#e1e6ea; --muted:#9aa5ae; --accent:#55c4c1; --accent-hover:#7ad6d3; --accent-bg:#113131; --on-accent:#0b1a1a;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;word-break:keep-all;display:grid;place-items:center;padding:32px 16px;background:var(--sub);color:var(--text);font:14px/1.55 var(--sans)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{width:100%;max-width:400px}
.lockup{display:flex;flex-direction:column;align-items:center;line-height:1.2;margin-bottom:20px}
.lockup small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.lockup strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.card{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
h1{margin:0;padding:18px 22px 14px;font-size:18px;font-weight:700;letter-spacing:-.01em;border-bottom:1px solid var(--line)}
.step{padding:18px 22px 20px}
.step+.step{border-top:1px dashed var(--line-strong);background:var(--sub)}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:var(--mono);font-size:11.5px;font-weight:500;flex:none}
.step .n{background:var(--accent);color:var(--on-accent)}
.step-next .n{background:transparent;color:var(--muted);border:1px solid var(--line-strong)}
label{font-size:13.5px;font-weight:600}
.row{display:flex;gap:8px}
input{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;height:38px}
input::placeholder{color:var(--muted);opacity:.75}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
input.email{font-family:var(--mono);font-size:13.5px}
input.code{width:100%;font-family:var(--mono);font-size:20px;letter-spacing:.45em;text-indent:.45em;text-align:center;height:44px}
button{font:inherit;font-size:13.5px;font-weight:600;border-radius:6px;padding:0 14px;height:38px;cursor:pointer;white-space:nowrap}
.primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.secondary{background:var(--bg);color:var(--text);border:1px solid var(--line-strong);width:100%;margin-top:8px;height:40px}
.secondary:hover{border-color:var(--accent);color:var(--accent)}
.help{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.help code{font-family:var(--mono);font-size:12px;color:var(--text)}
@media (max-width:420px){
  .row{flex-direction:column}
  .row button{height:40px}
  .step,h1{padding-left:18px;padding-right:18px}
}