/* ============================================================
   codebrunch — design tokens
   base   : awesome-design-md / linear.app
            (4-step surface ladder, hairline borders, no drop
             shadows, single chromatic accent)
   accent : lavender #5e6ad2 -> warm amber #ff9d47 (codebrunch)
            fills only — brand mark, primary CTA. text-on-canvas
            uses --accent-ink, which darkens in light mode so it
            stays readable. never a section background.

   THEME — three states, per the standard pattern:
     :root                                  complete light palette
     @media (prefers-color-scheme: dark)    system dark, unless the
       :root:not([data-theme="light"])      viewer forced light
     :root[data-theme="dark"]               explicit toggle wins
   Every color is defined on bare :root first; the dark blocks only
   redefine. Never give a color its ONLY definition inside a media
   or [data-theme] block.
   ============================================================ */
:root{
  color-scheme:light;

  /* surface ladder — light */
  --canvas:#ffffff;
  --surface-1:#faf9f7;
  --surface-2:#f4f3f0;
  --surface-3:#edebe7;
  --hairline:#e5e3de;
  --hairline-strong:#d2cfc8;

  /* ink ladder — light */
  --ink:#16171a;
  --ink-muted:#3d4046;
  --ink-subtle:#6b6f76;
  --ink-tertiary:#91959c;

  /* single chromatic accent */
  --accent:#ff9d47;        /* fill — identical in both themes */
  --accent-hover:#ffb26b;
  --accent-press:#e8833a;
  --on-accent:#18191a;     /* text on an accent fill */
  --accent-ink:#a85c05;    /* accent as text/rule on the canvas */

  --nav-bg:rgba(255,255,255,.82);

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px;
  --section:96px;

  --sans:"Inter","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1120px;
  --nav-h:56px;
}

/* system dark — skipped when the viewer has explicitly chosen light */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#010102;
    --surface-1:#0f1011;
    --surface-2:#141516;
    --surface-3:#18191a;
    --hairline:#23252a;
    --hairline-strong:#34343a;
    --ink:#f7f8f8;
    --ink-muted:#d0d6e0;
    --ink-subtle:#8a8f98;
    --ink-tertiary:#62666d;
    --accent-ink:#ff9d47;
    --nav-bg:rgba(1,1,2,.82);
  }
}

/* explicit toggle — wins over the system setting in both directions */
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#010102;
  --surface-1:#0f1011;
  --surface-2:#141516;
  --surface-3:#18191a;
  --hairline:#23252a;
  --hairline-strong:#34343a;
  --ink:#f7f8f8;
  --ink-muted:#d0d6e0;
  --ink-subtle:#8a8f98;
  --ink-tertiary:#62666d;
  --accent-ink:#ff9d47;
  --nav-bg:rgba(1,1,2,.82);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.05px;
  word-break:keep-all;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
code{
  font-family:var(--mono);font-size:.88em;letter-spacing:0;
  background:var(--surface-3);border:1px solid var(--hairline);
  border-radius:var(--r-xs);padding:1px 5px;
}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:var(--r-xs)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-lg)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-md);top:var(--sp-md);z-index:100;background:var(--surface-2);padding:10px 16px;border-radius:var(--r-md)}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{height:100%;display:flex;align-items:center;gap:var(--sp-lg)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.3px;margin-right:auto}
.brand-mark{
  width:26px;height:26px;border-radius:var(--r-md);
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;
}
.nav-links{display:flex;gap:var(--sp-lg);align-items:center}
.nav-links a{font-size:14px;color:var(--ink-subtle);transition:color .15s}
.nav-links a:hover{color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.2;
  padding:10px 16px;border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;min-height:40px;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{background:var(--accent-press)}
.btn-secondary{background:var(--surface-1);color:var(--ink);border-color:var(--hairline)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--hairline-strong)}
.btn-sm{padding:7px 12px;min-height:36px;font-size:13px}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.nav-toggle{
  display:none;background:none;border:1px solid var(--hairline);border-radius:var(--r-md);
  width:38px;height:38px;color:var(--ink);cursor:pointer;
  align-items:center;justify-content:center;font-size:15px;
}

/* theme toggle — always visible, outside the collapsible link list.
   the icon shows the theme you would switch TO. */
.theme-toggle{
  background:none;border:1px solid var(--hairline);border-radius:var(--r-md);
  width:38px;height:38px;flex:none;cursor:pointer;color:var(--ink-subtle);
  display:inline-grid;place-items:center;
  transition:color .15s,background .15s,border-color .15s;
}
.theme-toggle:hover{color:var(--ink);background:var(--surface-1);border-color:var(--hairline-strong)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}

/* ---------------- hero ---------------- */
.hero{padding:calc(var(--section) + 16px) 0 var(--section)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;letter-spacing:.4px;color:var(--ink-subtle);
  background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:5px 12px;margin:0 0 var(--sp-lg);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
h1{margin:0 0 var(--sp-lg);font-size:clamp(34px,5.6vw,68px);font-weight:600;line-height:1.08;letter-spacing:-2.2px}
h1 .accent{color:var(--accent-ink)}
.lede{margin:0 0 var(--sp-xl);max-width:54ch;font-size:18px;line-height:1.65;color:var(--ink-muted);letter-spacing:-.1px}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}

/* ---------------- section scaffolding ---------------- */
section{padding:var(--section) 0;border-top:1px solid var(--hairline)}
.sec-head{margin-bottom:var(--sp-2xl);max-width:62ch}
.sec-label{margin:0 0 var(--sp-sm);font-size:13px;font-weight:500;letter-spacing:.4px;color:var(--accent-ink);text-transform:uppercase}
h2{margin:0 0 var(--sp-sm);font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.15;letter-spacing:-1px}
.sec-head p{margin:0;color:var(--ink-subtle);font-size:16px;line-height:1.6}

/* ---------------- app cards ---------------- */
.grid{display:grid;gap:var(--sp-md)}
.apps{grid-template-columns:repeat(3,1fr)}
.app-card{
  background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-lg);
  display:grid;grid-template-columns:56px 1fr;
  column-gap:var(--sp-md);row-gap:var(--sp-md);align-content:start;
  transition:background .18s,border-color .18s,transform .18s;
}
.app-card:hover{background:var(--surface-2);border-color:var(--hairline-strong);transform:translateY(-2px)}

/* games sit in their own section — one full-width card, larger icon,
   so the category reads as different at a glance rather than by label alone */
.games{grid-template-columns:1fr}
.app-card.featured{grid-template-columns:88px 1fr;padding:var(--sp-xl)}
.app-card.featured .app-icon{width:88px;height:88px;font-size:40px;border-radius:var(--r-xl)}
.app-card.featured h3{font-size:26px;letter-spacing:-.5px}
.app-card.featured .desc{max-width:72ch}
.app-icon{
  width:56px;height:56px;border-radius:var(--r-lg);
  display:grid;place-items:center;font-size:26px;
  background:var(--surface-3);border:1px solid var(--hairline);flex:none;
}
.app-head{min-width:0;align-self:center}
.app-card h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.4px;line-height:1.25}
.app-card h3 .en{color:var(--ink-tertiary);font-size:15px;font-weight:400}
.app-card .pkg{margin:4px 0 0;font-family:var(--mono);font-size:12px;color:var(--ink-tertiary);letter-spacing:0}
.app-card .desc{grid-column:1 / -1;margin:0;color:var(--ink-subtle);font-size:15px;line-height:1.6}
.app-card .tags{grid-column:1 / -1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-size:12px;color:var(--ink-muted);
  background:var(--surface-3);border:1px solid var(--hairline);
  border-radius:var(--r-sm);padding:3px 8px;letter-spacing:0;
}
.app-actions{
  grid-column:1 / -1;
  display:flex;gap:var(--sp-xs);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--sp-md);border-top:1px solid var(--hairline);
}

/* ---------------- manuals ---------------- */
.manuals{grid-template-columns:repeat(2,1fr)}
.doc-row{
  display:flex;align-items:center;gap:var(--sp-md);
  background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-md) var(--sp-lg);
  transition:background .18s,border-color .18s;
}
.doc-row:hover{background:var(--surface-2);border-color:var(--hairline-strong)}
.doc-row .num{font-family:var(--mono);font-size:13px;color:var(--ink-tertiary);min-width:26px;flex:none}
.doc-row .body{flex:1;min-width:0}
.doc-row strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.2px}
.doc-row .sub{display:block;font-size:14px;color:var(--ink-subtle);margin-top:2px}
.doc-row .arrow{color:var(--ink-tertiary);transition:color .18s,transform .18s;flex:none}
.doc-row:hover .arrow{color:var(--accent-ink);transform:translateX(3px)}
.doc-row.soon{opacity:.55;pointer-events:none}
.doc-row.soon .arrow{visibility:hidden}
.badge-soon{
  font-size:11px;font-family:var(--mono);color:var(--ink-tertiary);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:2px 8px;flex:none;
}

/* ---------------- faq ---------------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--sp-lg) 0;
  font-size:16px;font-weight:500;letter-spacing:-.2px;
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-md);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink-tertiary);font-size:18px;flex:none}
.faq details[open] summary::after{content:"\2212";color:var(--accent-ink)}
.faq details p{margin:0 0 var(--sp-lg);color:var(--ink-subtle);font-size:15px;line-height:1.7;max-width:66ch}
.faq details p a{color:var(--accent-ink)}

/* ---------------- cta banner ---------------- */
.cta{
  background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-2xl);
  display:flex;flex-wrap:wrap;gap:var(--sp-lg);align-items:center;justify-content:space-between;
}
.cta h2{margin:0 0 6px;font-size:28px;letter-spacing:-.6px}
.cta p{margin:0;color:var(--ink-subtle);font-size:15px;line-height:1.6}
.mono-mail{font-family:var(--mono);font-size:14px;color:var(--accent-ink);letter-spacing:0}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--hairline);padding:64px 0 48px;color:var(--ink-subtle)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-xl);margin-bottom:var(--sp-2xl)}
.foot-col h4{margin:0 0 var(--sp-sm);font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.3px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col a{font-size:13px;color:var(--ink-subtle);transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-about p{margin:var(--sp-sm) 0 0;font-size:13px;max-width:36ch;line-height:1.7}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-md);justify-content:space-between;align-items:center;
  padding-top:var(--sp-lg);border-top:1px solid var(--hairline);
  font-size:12px;color:var(--ink-tertiary);
}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .apps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-about{grid-column:1 / -1}
}
@media (max-width:768px){
  :root{--section:64px}
  .nav-toggle{display:inline-flex}
  .app-card.featured{grid-template-columns:56px 1fr;padding:var(--sp-lg)}
  .app-card.featured .app-icon{width:56px;height:56px;font-size:26px;border-radius:var(--r-lg)}
  .app-card.featured h3{font-size:22px}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--canvas);border-bottom:1px solid var(--hairline);
    padding:var(--sp-xs) var(--sp-lg) var(--sp-lg);
  }
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--hairline);font-size:15px}
  .nav-links .btn{margin-top:var(--sp-md)}
  .apps,.manuals{grid-template-columns:1fr}
  .cta{padding:var(--sp-xl);flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ---------------- manual documents ----------------
   Long-form pages under /manuals/. The prose column is capped near
   72ch; only tables and code blocks are allowed to break out, and
   they scroll inside themselves so the page never scrolls sideways. */
.doc{padding:var(--sp-2xl) 0 var(--section)}
.doc-wrap{max-width:760px}
.doc h1{font-size:clamp(28px,4.2vw,44px);letter-spacing:-1.2px;margin:0 0 var(--sp-md)}
.doc .lede{font-size:17px;margin-bottom:var(--sp-xl)}

.doc-meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:center;
  padding:var(--sp-md) 0;margin-bottom:var(--sp-xl);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  font-size:13px;color:var(--ink-subtle);
}
.doc-meta .k{color:var(--ink-tertiary);margin-right:6px}

.toc{
  background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-lg);margin:0 0 var(--sp-2xl);
}
.toc h2{font-size:13px;font-weight:500;letter-spacing:.4px;color:var(--accent-ink);
  text-transform:uppercase;margin:0 0 var(--sp-sm)}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:8px}
.toc a{font-size:15px;color:var(--ink-muted)}
.toc a:hover{color:var(--ink-subtle);text-decoration:underline}

.prose{max-width:72ch}
.prose h2{
  font-size:24px;letter-spacing:-.5px;margin:var(--sp-2xl) 0 var(--sp-md);
  padding-top:var(--sp-lg);border-top:1px solid var(--hairline);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:18px;font-weight:500;letter-spacing:-.3px;margin:var(--sp-xl) 0 var(--sp-xs)}
.prose p{margin:0 0 var(--sp-md);color:var(--ink-muted);line-height:1.75}
.prose ul,.prose ol{margin:0 0 var(--sp-md);padding-left:1.35em;color:var(--ink-muted);line-height:1.75}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--ink-tertiary)}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}

.prose .steps{list-style:none;padding:0;counter-reset:step}
.prose .steps>li{
  counter-increment:step;position:relative;
  padding-left:38px;margin-bottom:var(--sp-md);
}
.prose .steps>li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--hairline);
  color:var(--ink-subtle);font-family:var(--mono);font-size:12px;
  display:grid;place-items:center;
}

.note{
  border:1px solid var(--hairline);border-left:3px solid var(--accent);
  background:var(--surface-1);border-radius:var(--r-md);
  padding:var(--sp-md) var(--sp-lg);margin:0 0 var(--sp-md);
}
.note p:last-child{margin-bottom:0}
.note .label{
  display:block;font-size:12px;font-weight:500;letter-spacing:.4px;
  color:var(--accent-ink);text-transform:uppercase;margin-bottom:6px;
}

.table-scroll{overflow-x:auto;margin:0 0 var(--sp-md);-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:420px;font-size:14px}
.prose th,.prose td{
  border:1px solid var(--hairline);padding:9px 12px;text-align:left;
  color:var(--ink-muted);line-height:1.6;vertical-align:top;
}
.prose th{background:var(--surface-2);color:var(--ink);font-weight:500}

.doc-nav{
  display:flex;flex-wrap:wrap;gap:var(--sp-sm);
  margin-top:var(--sp-2xl);padding-top:var(--sp-lg);border-top:1px solid var(--hairline);
}

/* ---------------- privacy policy documents ----------------
   The four policy pages are imported verbatim — the wording, tables and
   section order are legal text and must not be touched. So instead of
   rewriting their markup we map the classes they already carry onto the
   site tokens. Editing a policy means editing its words, never these
   rules. Legacy classes in use: meta, updated, eyebrow, langbar, summary,
   callout, scroll, section, en, lang-switch. */
[hidden]{display:none !important}

.policy .meta,
.policy .updated{
  margin:0 0 var(--sp-xl);padding:var(--sp-md) 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  font-size:13px;line-height:1.8;color:var(--ink-subtle);
}
.policy .meta b{color:var(--ink);font-weight:500}

.policy .eyebrow{
  display:block;background:none;border:0;border-radius:0;padding:0;
  margin:0 0 var(--sp-sm);
  font-size:13px;font-weight:500;letter-spacing:.4px;
  color:var(--accent-ink);text-transform:uppercase;
}

.policy .langbar{margin:0 0 var(--sp-xl);font-size:14px}
.policy .langbar a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}

/* the "in short" box each policy opens with */
.policy .summary,
.policy .callout{
  border:1px solid var(--hairline);border-left:3px solid var(--accent);
  background:var(--surface-1);border-radius:var(--r-md);
  padding:var(--sp-md) var(--sp-lg);margin:0 0 var(--sp-xl);
}
.policy .summary p,
.policy .callout p{margin:0 0 var(--sp-xs)}
.policy .summary p:last-child,
.policy .callout p:last-child{margin-bottom:0}

.policy .scroll{overflow-x:auto;margin:0 0 var(--sp-md);-webkit-overflow-scrolling:touch}

.policy hr.section{
  border:0;border-top:1px solid var(--hairline-strong);
  margin:var(--section) 0 var(--sp-2xl);
}
.policy .en{display:block;margin-top:var(--section);padding-top:var(--sp-2xl);border-top:1px solid var(--hairline-strong)}
.policy hr.section + .en{margin-top:0;padding-top:0;border-top:0}

/* triplog serves both languages from one page and swaps them with JS */
.policy .lang-switch{
  display:flex;gap:var(--sp-xs);flex-wrap:wrap;
  margin:0 0 var(--sp-xl);padding-bottom:var(--sp-lg);
  border-bottom:1px solid var(--hairline);
}
.policy .lang-switch button{
  font:inherit;font-size:13px;font-weight:500;
  padding:7px 14px;min-height:36px;cursor:pointer;
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--surface-1);color:var(--ink-subtle);
  transition:background .15s,border-color .15s,color .15s;
}
.policy .lang-switch button:hover{background:var(--surface-2);border-color:var(--hairline-strong);color:var(--ink)}
.policy .lang-switch button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}