:root { color-scheme: light dark; --bg:#fffdf5; --fg:#222; --mut:#777; --acc:#ffd400; --acc-ink:#4a3f00; --line:#eee6c8; --err:#d2322d; --card:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#111; --fg:#f2f2f2; --mut:#9a9a9f; --line:#2c2c2e; --card:#1b1b1d; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
       min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:16px; }
main { width:100%; max-width:380px; }
h1 { font-size:22px; margin:0 0 6px; text-align:center; }
.sub { color:var(--mut); margin:0 0 20px; font-size:15px; text-align:center; }
form { display:flex; flex-direction:column; gap:10px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mut); }
input { width:100%; font-size:17px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--fg); }
input.code { font-size:26px; letter-spacing:10px; text-align:center; }
input:focus { outline:none; border-color:var(--acc); }
button { width:100%; margin-top:6px; padding:15px; font-size:17px; font-weight:700; border:0; border-radius:14px; background:var(--acc); color:var(--acc-ink); }
button.ghost { background:transparent; color:var(--mut); font-weight:500; font-size:14px; padding:8px; }
.msg { min-height:22px; margin-top:12px; font-size:14px; color:var(--err); text-align:center; }
.note { font-size:13px; color:var(--mut); line-height:1.5; margin:12px 0 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.qr { display:block; margin:0 auto 10px; width:220px; height:220px; background:#fff; border-radius:12px; padding:8px; }
.secret { font-family: ui-monospace, Menlo, monospace; font-size:15px; letter-spacing:1px; word-break:break-all; text-align:center;
          background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:10px; user-select:all; }
a.btnlink { display:block; text-align:center; padding:12px; border-radius:12px; border:1.5px solid var(--line); color:var(--fg); text-decoration:none; font-weight:600; }
ol { padding-left:20px; margin:8px 0; font-size:14px; color:var(--mut); line-height:1.6; }