:root {
  --bg:#fff; --fg:#111418; --dim:#6b727d; --faint:#99a0aa;
  --line:#e2e5ea; --rule:#c7ccd4; --accent:#0b5fff; --on-accent:#fff;
  --soft:#f7f8fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1013; --fg:#e8ebf0; --dim:#99a1ac; --faint:#6d747f;
    --line:#22262d; --rule:#3a414b; --accent:#6aa5ff; --on-accent:#0b1220;
    --soft:#14171c;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.85 var(--font-ui, -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif);
       -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
b { font-weight:600; }
code { font-family:var(--font-mono, ui-monospace,SFMono-Regular,Menlo,monospace); font-size:.92em; }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:9; background:var(--bg); color:var(--accent);
              padding:.5rem .9rem; border:1px solid var(--accent); border-radius:6px; }

.top { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
       max-width:56rem; margin:0 auto; padding:1.6rem 1.5rem;
       border-bottom:1px solid var(--line); }
.top .wordmark { margin:0; margin-right:auto; }
.top nav { display:flex; align-items:center; gap:1.4rem; font-size:.9rem; }
.top nav a { color:var(--dim); text-decoration:none; }
.top nav a:hover { color:var(--fg); }
.top nav a.cta { color:var(--accent); font-weight:600; }

main { max-width:56rem; margin:0 auto; padding:0 1.5rem; }
section { padding:4rem 0; border-bottom:1px solid var(--line); }
section:last-child { border-bottom:0; }

h1 { margin:0 0 1.2rem; font-size:2.15rem; line-height:1.35; letter-spacing:-.03em;
     font-weight:600; }
h2 { margin:0 0 1.4rem; font-size:1.2rem; letter-spacing:-.02em; font-weight:600; }
h3 { margin:0 0 .5rem; font-size:.98rem; font-weight:600; letter-spacing:-.01em; }
p { margin:0 0 1rem; }

.hero { padding:4.5rem 0 4rem; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 1rem; color:var(--accent); font-size:.8rem; letter-spacing:.08em;
           font-family:var(--font-mono, monospace); }
.lede { max-width:40rem; color:var(--dim); font-size:1.02rem; }
.lede b { color:var(--fg); }
.cta-row { display:flex; flex-wrap:wrap; gap:.7rem; margin:2rem 0 1.6rem; }
.btn { display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
       font-weight:600; font-size:.94rem; border-radius:6px; padding:.6rem 1.15rem;
       background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); }
.btn.ghost { background:none; color:var(--fg); border-color:var(--rule); }
.btn:hover .a { transform:translateX(.2rem); }
.a { transition:transform .18s; }
.note { max-width:40rem; margin:0; padding-top:1.4rem; border-top:1px solid var(--line);
        color:var(--faint); font-size:.88rem; }
.note b { color:var(--dim); }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:2rem 2.5rem; }
.cell p { margin:0; color:var(--dim); font-size:.93rem; }
.cell p b { color:var(--fg); }

.say { max-width:42rem; color:var(--dim); }
.say b { color:var(--fg); }

.spec, .biz { width:100%; border-collapse:collapse; margin:0 0 1.2rem; font-size:.93rem; }
.spec th, .spec td, .biz th, .biz td { text-align:left; padding:.6rem .4rem;
       border-bottom:1px solid var(--line); vertical-align:top; }
.spec th, .biz th { color:var(--dim); font-weight:500; font-size:.86rem; white-space:nowrap;
       width:9.5rem; }
.todo { color:var(--faint); }

.price th { width:auto; }
.price thead th { border-bottom:1px solid var(--rule); color:var(--dim); }
.price thead th:not(:first-child), .price tbody td:not(:first-child) { text-align:right; }
.price tbody td { font-variant-numeric:tabular-nums; }
.price tbody td:first-child { font-family:var(--font-mono, monospace); font-size:.9em; }

footer { background:var(--soft); border-top:1px solid var(--line); margin-top:0; }
footer > * { max-width:56rem; margin-left:auto; margin-right:auto; padding-left:1.5rem;
             padding-right:1.5rem; }
footer .wordmark { padding-top:3rem; margin:0 auto .5rem; }
footer .biz { max-width:56rem; margin:1rem auto 1.5rem; font-size:.86rem; }
footer .biz th { width:11rem; }
.links { display:flex; flex-wrap:wrap; gap:1.2rem; margin:0 auto .8rem; font-size:.88rem; }
.links a { text-decoration:none; }
.links a:hover { text-decoration:underline; }
.copy { margin:0 auto; padding-bottom:3rem; color:var(--faint); font-size:.82rem; }

:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
                 outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .a { transition:none } }

@media (max-width:34rem) {
  h1 { font-size:1.65rem; }
  .top { gap:.8rem; }
  .top nav { gap:1rem; font-size:.85rem; }
  
  .spec:not(.price) th, .biz th, footer .biz th { width:auto; display:block; border:0; padding-bottom:0; }
  .spec:not(.price) td, .biz td { display:block; padding-top:.15rem; }
  .price { display:block; overflow-x:auto; white-space:nowrap; }
}