:root { --bg:#fbfaf7; --fg:#1d2125; --muted:#5d6670; --line:#e3e0d8; --accent:#1f6f5c; --err:#b3412e; --soft:#f1efe9; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#15181b; --fg:#e8e6e1; --muted:#9aa3ab; --line:#2b3035; --accent:#5fbfa3; --err:#ec8a73; --soft:#1c2024; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
main { max-width:420px; margin:0 auto; padding:12vh 16px 64px; }
main.wide { max-width:560px; padding-top:8vh; }
h1 { font-size:1.6rem; margin:0 0 .2em; letter-spacing:-.02em; }
h1 a { color:inherit; text-decoration:none; } h1 span { color:var(--accent); }
h2 { font-size:1.1rem; margin:2em 0 .6em; }
p.sub { color:var(--muted); margin:0 0 1.8em; }
label { display:block; font-size:.9rem; margin:1em 0 .3em; color:var(--muted); }
input { width:100%; font:inherit; color:var(--fg); background:var(--bg); padding:.6em .7em;
  border:1px solid var(--line); border-radius:8px; }
input:focus { outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color:var(--accent); }
button { font:inherit; padding:.6em 1.1em; border-radius:8px; border:1px solid var(--accent);
  background:var(--accent); color:var(--bg); cursor:pointer; margin-top:1.2em; }
button.ghost { background:transparent; color:var(--accent); }
button.danger { background:transparent; color:var(--err); border-color:var(--err); }
button:disabled { opacity:.5; cursor:default; }
.msg { min-height:1.4em; margin-top:.8em; font-size:.92rem; }
.msg.err { color:var(--err); } .msg.ok { color:var(--accent); }
.card { border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:.6em 0; }
.kv { display:grid; grid-template-columns:7em 1fr; gap:.3em 1em; font-size:.95rem; }
.kv dt { color:var(--muted); } .kv dd { margin:0; overflow-wrap:anywhere; }
code.tok { display:block; padding:10px 12px; background:var(--soft); border-radius:8px; font-size:.85rem;
  overflow-wrap:anywhere; user-select:all; margin:.6em 0; }
pre { background:var(--soft); border-radius:8px; padding:10px 12px; font-size:.8rem; overflow-x:auto; }
nav.links { margin-top:2em; font-size:.92rem; } nav.links a { color:var(--accent); margin-right:1em; }