/*
 * DechoNet design tokens — loaded after brutalist.css (which stays untouched).
 * Source: Notion "디자인 시스템 · UX 개선안" (2026-10-06/07). Every brand value
 * is kept; this adds text tokens that reach WCAG AA, Korean fallback fonts, a
 * 12px floor, label-only uppercase and touch sizes. Tests:
 * tests/e2e/ux-tokens.spec.ts.
 */
:root {
  /* text-on-white versions of the brand colors (the brand values stay for borders and fills) */
  --accent-ink: #e01e1e;  /* white text on red: 4.8:1 (accent #ff2f2f is 3.68:1) */
  --ok-ink: #176b2c;      /* 5.82:1 (ok #1f8f3a is 3.66:1) */
  --warn-ink: #8a5300;    /* 5.81:1 (warn #e28700 is 2.5:1) */
  --muted-ink: #666666;   /* all secondary text (#555/#666/#888/#999 were mixed) */
  --muted: #888888;       /* icons and decoration only */
  --stripe: #ededed;

  --font-display: 'Bebas Neue', 'Do Hyeon', sans-serif;
  --font-mono: 'Space Mono', 'Nanum Gothic Coding', monospace;

  --fs-caption: 12px;
  --fs-label: 12px;
  --fs-body-sm: 13px;
  --fs-body: 14px;
  --fs-title: 16px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --touch: 44px;
  --chip-h: 32px;
}

/* ---- fonts (UX #7): Bebas Neue and Space Mono have no Hangul glyphs. Display Hangul: Do Hyeon
   (2026-10-07; Black Han Sans was so heavy at 34px that the ㅁ in 메 closed into a block) ---- */
body { font-family: var(--font-mono); }
.brand h1, .hero h1, .hero h2, .tool-head h1 { font-family: var(--font-display); }

/* ---- case (UX #6): uppercase on labels only; values and sentences keep theirs ---- */
body { text-transform: none; }
input, select, textarea { text-transform: none; }
.btn, .tab, .chip, .status, .table th, .block-title, .section-title, .kpi h4, .field h5,
.upsell-hint .label, .aff-card .tag, .guide-section-title, .nav-list a, .brand p,
.insight::before { text-transform: uppercase; }

/* ---- 12px floor (UX #8) ---- */
.brand p, .block-title, .nav-list a, .btn, .chip, .status, .kpi h4, .insight::before, .tab,
.field h5, .guide-section-title, .upsell-hint .label, .aff-card .tag, .notice, .footer-note,
input::placeholder { font-size: var(--fs-label); }
.tool-card p, .info-card p, .aff-card p, .guide-link { font-size: var(--fs-label); }
.tool-card h3, .info-card h3, .aff-card h3, .section-title, .insight p, .checklist li,
.field p, .field pre, .table th, .table td, .upsell-hint, .partial-banner { font-size: var(--fs-body-sm); }
.checklist li::before { font-size: var(--fs-label); }

/* ---- contrast (UX #4) ---- */
.btn.primary { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.primary:hover { background: var(--fg); border-color: var(--fg); }
.btn.share:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.status { color: var(--warn-ink); }
.status.ok { color: var(--ok-ink); }
.status.bad { color: var(--bad); }
.status.info { color: var(--info); }
.partial-banner { color: var(--warn-ink); }
.kpi h4, .field h5, .footer-note, .notice { color: var(--muted-ink); }
input::placeholder { color: var(--muted-ink); }
.aff-card .tag { color: var(--accent-ink); }

/* ---- touch sizes (UX #9) ---- */
.chip { min-height: var(--chip-h); display: inline-flex; align-items: center; }
@media (max-width: 1120px) {
  .btn, .tab, input, select { min-height: var(--touch); }
}

/* An ad/affiliate card with nothing inside (ads off, no affiliate link) is not drawn. */
.card:has(> .ad-grid):not(:has(.adsbygoogle, .aff-card)) { display: none; }

/* ---- no horizontal page scroll (2026-10-07; tests/e2e/ux-baseline.spec.ts "no horizontal overflow") ----
   Grid columns are 1fr = minmax(auto, 1fr): a long unbroken line (one-line card text,
   a code block, the footer links) widened the whole page on phones. */
.main { grid-template-columns: minmax(0, 1fr); }
.main > *, .layout > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .kpi-grid > * { min-width: 0; }
.footer-links { flex-wrap: wrap; row-gap: 8px; }
.main pre, .main table { max-width: 100%; overflow-x: auto; }
.main table { display: block; }