/* ================================================================
   ZeroAPI v5.0 · Design System
   Minimal editorial — clean, trustworthy, precise.
   ================================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

:root{
  --bg:#ffffff;
  --bg-alt:#fafafa;
  --ink:#111111;
  --line:#111111;
  --line-soft:#e0e0e0;
  --line-faint:#f3f3f3;
  --muted:#777777;
  --accent:#111111;
  --ok:#1a7f37;
  --warn:#9a6700;
  --err:#cf222e;
  --radius:0;
  --max-w:1080px;
  --serif:Georgia,"Times New Roman","Noto Serif KR",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif;
  --mono:"SF Mono","Menlo","Consolas","Noto Sans Mono",monospace;
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.55;letter-spacing:-0.01em;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* ─── Typography ─── */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}

h2.sh{font-family:var(--serif);font-size:30px;line-height:1.2;letter-spacing:-0.025em;font-weight:700}
h3.sh{font-family:var(--serif);font-size:20px;line-height:1.25;letter-spacing:-0.015em;font-weight:700}

.label{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.deck{font-size:14px;line-height:1.6;color:var(--muted)}
.byline{margin-top:12px;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.center{text-align:center}
.crossed{text-decoration:line-through;color:var(--muted)}
.hidden{display:none !important}

/* ─── Top banner ─── */
.topbar{
  background:var(--ink);color:var(--bg);
  text-align:center;padding:9px 24px;
  font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
}

/* ─── Utility nav ─── */
.nav{border-bottom:1px solid var(--line);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;position:sticky;top:0;z-index:100;background:var(--bg)}
.nav .inner{max-width:var(--max-w);margin:0 auto;padding:8px 24px;display:flex;justify-content:space-between;align-items:center}
.nav a{margin-left:16px;color:var(--muted);transition:color .15s}
.nav a:hover{color:var(--ink)}

/* ─── Masthead ─── */
.masthead{border-bottom:3px double var(--line);text-align:center;padding:32px 24px 26px}
.masthead .pre{font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.masthead h1{font-family:var(--serif);font-size:56px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.masthead h1.sm{font-size:40px}
.masthead .sub{margin-top:12px;font-size:13px;color:var(--muted);letter-spacing:0.02em}
.masthead .tags{margin-top:16px;display:flex;justify-content:center;gap:16px;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.masthead .tags span{position:relative;padding-left:16px}
.masthead .tags span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--muted)}

/* ─── Section nav ─── */
.secnav{border-bottom:1px solid var(--line);font-size:13px;font-weight:500}
.secnav .inner{max-width:var(--max-w);margin:0 auto;padding:12px 24px;display:flex;gap:28px;flex-wrap:wrap}
.secnav a{padding:4px 0;position:relative;transition:opacity .15s}
.secnav a:hover{opacity:.6}
.secnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;background:var(--ink)}

/* ─── Layout ─── */
.wrap{max-width:var(--max-w);margin:0 auto;padding:48px 24px}
.wrap-sm{max-width:680px;margin:0 auto;padding:48px 24px}
.wrap-xs{max-width:440px;margin:0 auto;padding:48px 24px}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;background:var(--ink);color:var(--bg);
  font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  border:1px solid var(--ink);min-width:100px;transition:all .15s;
}
.btn:hover{opacity:.85}
.btn--o{background:transparent;color:var(--ink)}
.btn--o:hover{background:var(--ink);color:var(--bg);opacity:1}
.btn--sm{padding:7px 14px;font-size:11px;min-width:0}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn--err{border-color:var(--err);color:var(--err);background:transparent}
.btn--err:hover{background:var(--err);color:var(--bg);opacity:1}

/* ─── Panels ─── */
.panel{border:1px solid var(--line);padding:24px}
.panel+.panel{margin-top:20px}
.panel h2{font-family:var(--serif);font-size:20px;letter-spacing:-0.015em;margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline}
.panel h3{font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:8px;color:var(--muted)}

/* ─── Stat cards ─── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.stat{border:1px solid var(--line);padding:20px}
.stat .lbl{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:500}
.stat .val{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:-0.02em;line-height:1}
.stat .note{margin-top:6px;font-size:12px;color:var(--muted)}

/* ─── Tables ─── */
table.zt{width:100%;border-collapse:collapse;font-size:13px}
table.zt th,table.zt td{padding:10px;text-align:left;border-bottom:1px solid var(--line-soft)}
table.zt th{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
table.zt tr:last-child td{border-bottom:1px solid var(--line)}
table.zt td.r{text-align:right;font-variant-numeric:tabular-nums}

/* ─── Badges ─── */
.badge{display:inline-block;padding:2px 7px;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;border:1px solid var(--line);font-weight:600}
.badge--ok{border-color:var(--ok);color:var(--ok)}
.badge--warn{border-color:var(--warn);color:var(--warn)}
.badge--err{border-color:var(--err);color:var(--err)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:5px;vertical-align:1px}
.dot--ok{background:var(--ok)}
.dot--warn{background:var(--warn)}
.dot--err{background:var(--err)}

/* ─── Forms ─── */
.field{display:block;margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-width:2px;padding:9px 11px}
.field .hint{margin-top:5px;font-size:12px;color:var(--muted)}
.field .err{margin-top:5px;font-size:12px;color:var(--err)}

/* ─── Stepper ─── */
.steps{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{flex:1;padding:14px 12px;text-align:center;border-right:1px solid var(--line-soft);position:relative}
.step:last-child{border-right:none}
.step .num{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--muted)}
.step .ttl{margin-top:4px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.step.on .num,.step.on .ttl{color:var(--ink)}
.step.done .num{color:var(--ink)}
.step.done .num::after{content:" ·"}

/* ─── Tabs ─── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:28px}
.tabs button{
  background:transparent;border:none;padding:12px 20px;
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;font-weight:600;
}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}

/* ─── Footer ─── */
.footer{border-top:3px double var(--line);padding:40px 24px;text-align:center;margin-top:48px}
.footer .inner{max-width:var(--max-w);margin:0 auto;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted)}
.footer a{transition:color .15s}.footer a:hover{color:var(--ink)}

/* ─── Alert boxes ─── */
.alert{padding:12px 16px;font-size:13px;line-height:1.6;margin:16px 0}
.alert--warn{background:#fffbeb;border-left:3px solid var(--warn);color:#92400e}
.alert--err{background:#fef2f2;border-left:3px solid var(--err);color:#7f1d1d}
.alert--ok{background:#f0fdf4;border-left:3px solid var(--ok);color:#14532d}
.alert b,.alert strong{font-weight:600}

/* ─── Grid helpers ─── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ─── Section divider ─── */
.divider{border-bottom:1px solid var(--line-soft);padding-bottom:48px;margin-bottom:48px}

/* ─── Responsive ─── */
@media(max-width:760px){
  body{font-size:15px}
  .masthead h1{font-size:40px}
  .masthead h1.sm{font-size:30px}
  h2.sh{font-size:24px}
  .wrap{padding:28px 16px}
  .grid-2{grid-template-columns:1fr;gap:28px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .steps{flex-wrap:wrap}
  .step{flex:1 1 50%;border-right:none;border-bottom:1px solid var(--line-soft)}
}