:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-tint: #f5f5f5;
  --border: #ececec;
  --border-strong: #d4d4d4;
  --fg: #0a0a0a;
  --fg-muted: #737373;
  --fg-subtle: #a3a3a3;
  --brand-blue: #00a1ff;
  --critical: #d92d20;
  --critical-bg: #fef3f2;
  --critical-border: #fecdca;
  --positive: #079455;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; }
html { background:var(--bg); }
body { font-family:Pretendard,'Pretendard Variable',sans-serif; letter-spacing:-0.3px; background:var(--bg); color:var(--fg); min-height:100vh; word-break:keep-all; }
a { color:inherit; text-decoration:none; }
code { font-family:'SF Mono','Monaco',ui-monospace,monospace; font-size:12.5px; background:var(--bg-tint); padding:1px 6px; border-radius:4px; border:1px solid var(--border); color:var(--fg); }

/* Top nav */
.topnav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.85); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border); }
.topnav-inner { max-width:1280px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-0.4px; }
.brand-mark { width:28px; height:28px; border-radius:8px; object-fit:contain; display:block; }
.brand-name code { font-family:'SF Mono','Monaco',ui-monospace,monospace; font-size:14px; font-weight:600; padding:2px 8px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-link { font-size:13px; color:var(--fg-muted); padding:8px 12px; border-radius:6px; font-weight:500; transition:background .15s, color .15s; }
.nav-link:hover { background:var(--bg-tint); color:var(--fg); }
.nav-link.active { color:var(--fg); background:var(--bg-tint); }
.nav-cta { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:var(--fg); color:#fff; border-radius:8px; font-size:13px; font-weight:600; transition:background .15s, transform .15s; }
.nav-cta:hover { background:#262626; transform:translateY(-1px); }
.nav-cta svg { width:14px; height:14px; fill:currentColor; }

/* Layout */
.wrap { max-width:1080px; margin:0 auto; padding:48px 24px 96px; }
.wrap-narrow { max-width:880px; margin:0 auto; padding:48px 24px 96px; }

/* Hero */
.page-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 11px; background:var(--bg-tint); border:1px solid var(--border); color:var(--fg-muted); border-radius:9999px; font-size:11px; font-weight:600; letter-spacing:0.3px; margin-bottom:18px; text-transform:uppercase; }
.page-h1 { font-size:40px; line-height:1.15; font-weight:800; color:var(--fg); margin-bottom:14px; letter-spacing:-1px; }
.page-lead { font-size:16px; line-height:1.6; color:var(--fg-muted); margin-bottom:36px; max-width:720px; }
.page-lead b { color:var(--fg); font-weight:600; }
.page-lead a { color:var(--brand-blue); text-decoration:underline; text-underline-offset:2px; }

/* Section */
.sect { margin-bottom:48px; }
.sect-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sect-head h2 { font-size:20px; font-weight:700; color:var(--fg); letter-spacing:-0.4px; }
.sect-head .count { font-size:12px; color:var(--fg-subtle); font-weight:500; }
.sect p.desc { font-size:13px; color:var(--fg-muted); margin-bottom:18px; line-height:1.6; }

/* Foot */
.foot { max-width:1080px; margin:32px auto 0; padding:32px 24px 48px; border-top:1px solid var(--border); font-size:12px; color:var(--fg-muted); line-height:1.6; }
.foot strong { color:var(--fg); font-weight:600; }
.foot code { font-size:11px; }