/* robot.smilestory.ai — site theme overlay (2026-10-28, family56 bundle B).
   ORIGINAL look = DARK (index.html inline <style>, :root --bg #0b0d12). This file is the LIGHT overlay only:
   every rule is scoped to html[data-theme="light"], so with nothing saved (data-theme="dark") the page renders
   exactly as before. Load at the END of <head> (after the page's inline <style>; the engine wia-site-theme.js
   sets <html data-theme> before first paint). The page CSS only reads :root tokens, so most of the work is the
   token block below; the rest is hard-coded colors (header rgba, .wia gradient, .code, .shot shadow, inline #888).
   Pages: / (ko) · /en/ (same inline CSS, minified) · /sim/ (own 6-token <style>, iframe → wiatools, not themable).

   Light palette                                        contrast (on #fff / #f7f8fb)
   ─ page   --bg   #f7f8fb   band --bg2 #eef1f6   card --card #fff
   ─ text   --text #0f172a  (17.9 / 16.8)         muted --dim  #475569 (7.6 / 7.1)
   ─ line   --line #e2e8f0 (decorative)           control border #7b879c (≥3:1, buttons only)
   ─ gold   --gold2 #854d0e (6.9 / 6.5) = all gold TEXT (eyebrow, brand, h1 span, prices, links)
            --gold  #b45309 (5.0 / 4.7) = hover/border accent
            gold-FILLED buttons keep the original #d4af37→#f0d77a gradient with dark text (#1a1400, 10:1+)
   ─ green  #8fd6a0 / #34d27b → #15803d (5.0)     accent #5b8cff → #2563eb (unused by page CSS; hero.svg is baked)
   Kept dark on purpose (product screenshot look, tokens re-pinned inside): .shot.live RobotOps console, hero.svg.
   !important is used only where the page has inline style="color:#…" (bottom legal footer). */

/* ===== tokens (page CSS reads these everywhere: body, header, cards, pills, price, footer) ===== */
html[data-theme="light"] {
  --bg: #f7f8fb;
  --bg2: #eef1f6;
  --card: #ffffff;
  --line: #e2e8f0;
  --text: #0f172a;
  --dim: #475569;
  --gold: #b45309;
  --gold2: #854d0e;
  --accent: #2563eb;
}
html[data-theme="light"] body { background: #f7f8fb; color: #0f172a; }
html[data-theme="light"] ::selection { background: rgba(180, 83, 9, .18); }

/* ===== header (sticky, translucent) ===== */
html[data-theme="light"] header { background: rgba(247, 248, 251, .88); border-bottom-color: #e2e8f0; }
html[data-theme="light"] .nav-links { color: #334155; }
html[data-theme="light"] .nav-links a:hover { color: #0f172a; }
/* language button: ko = button.lang.soom-btn-lang (inline background:transparent), en = a.lang */
html[data-theme="light"] .lang { color: #475569; border-color: #7b879c; }
html[data-theme="light"] .lang:hover { color: #854d0e; border-color: #b45309; }
/* mark.svg is a gold (#f0d77a) line icon with no background → 1.4:1 on a light page. filter darkens it to ≈#806c22 (4.8:1).
   Applies to the header brand and the footer brand (same <img>). */
html[data-theme="light"] .brand img { filter: brightness(.5) saturate(1.6); }

/* ===== buttons ===== */
/* gold-filled CTA keeps its light-gold fill with dark text; the token change above must NOT darken the fill */
html[data-theme="light"] .btn-gold { background: linear-gradient(135deg, #d4af37, #f0d77a); color: #1a1400; }
html[data-theme="light"] .btn-gold:hover { box-shadow: 0 8px 24px rgba(180, 83, 9, .22); }
html[data-theme="light"] .btn-ghost { background: #fff; color: #0f172a; border-color: #7b879c; }
html[data-theme="light"] .btn-ghost:hover { border-color: #b45309; background: #fffbeb; }

/* ===== hero ===== */
html[data-theme="light"] .hero::before { background: radial-gradient(55% 55% at 78% 8%, rgba(212, 175, 55, .16), transparent 70%); }
html[data-theme="light"] .badge { background: #fff; border-color: rgba(180, 83, 9, .35); color: #854d0e; }
html[data-theme="light"] .hero h1 .nobuild { color: #475569; }
/* hero.svg has its own dark background baked in (gradient #11141c→#0b0d12, 1200×820, square corners) — it stays a dark
   illustration in light mode; round the corners and soften the black drop shadow so it reads as a framed panel.
   Better fix (not done here, asset work): a hero-light.svg swapped via <picture> or CSS content. */
html[data-theme="light"] .hero-art { border-radius: 18px; filter: drop-shadow(0 16px 40px rgba(15, 23, 42, .22)); }
html[data-theme="light"] .hero-fallback { background: radial-gradient(40% 40% at 50% 30%, rgba(212, 175, 55, .18), transparent), #fff; }

/* ===== trust strip / sections / cards ===== */
html[data-theme="light"] .trust { background: #eef1f6; }
html[data-theme="light"] .trust .wrap { color: #334155; }
html[data-theme="light"] .card { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
html[data-theme="light"] .card:hover { border-color: rgba(180, 83, 9, .45); box-shadow: 0 14px 34px rgba(15, 23, 42, .10); }
html[data-theme="light"] .card p { color: #475569; }
html[data-theme="light"] .pill { background: #fff; }
html[data-theme="light"] .pill b { color: #854d0e; }

/* ===== RobotOps console demo (.shot.live) — kept DARK as a product screenshot.
   Its inner CSS mixes hard-coded darks (#0a0c12 panel, #0a0d14 map, #222838 battery, #11151f nodes, white-alpha
   top bar) with the page tokens; re-pinning the tokens inside the panel keeps it pixel-identical to the original
   instead of half-flipping. Only the panel's outer shadow/border are adapted to the light page. ===== */
html[data-theme="light"] .shot.live {
  --card: #161a24; --line: #232838; --text: #e9ecf2; --dim: #9aa3b5; --gold: #d4af37; --gold2: #f0d77a; --bg: #0b0d12;
  border-color: #cbd5e1;
}
html[data-theme="light"] .shot { box-shadow: 0 24px 60px rgba(15, 23, 42, .22); }
html[data-theme="light"] .shot::after { color: #f0d77a; }

/* ===== .wia runbook block + code sample ===== */
html[data-theme="light"] .wia { background: linear-gradient(160deg, #ffffff, #f1f4f9); }
html[data-theme="light"] .code { background: #f1f5f9; border-color: #d9e0ea; color: #1e293b; }
html[data-theme="light"] .code .k { color: #854d0e; }
html[data-theme="light"] .code .c { color: #64748b; }
html[data-theme="light"] .code .s { color: #15803d; }
/* "📄 연구 논문" paragraph + price footnote: inline color:var(--dim) → token already handles it; the .gold link inside */
html[data-theme="light"] a.gold { color: #854d0e; text-decoration: underline; text-underline-offset: 2px; }

/* ===== pricing ===== */
html[data-theme="light"] .price { border-color: rgba(180, 83, 9, .35); box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
html[data-theme="light"] .price .amt { color: #854d0e; }
html[data-theme="light"] .price .amt small { color: #475569; }
html[data-theme="light"] .price li { color: #334155; }
html[data-theme="light"] .price li::before { color: #b45309; }

/* ===== footers ===== */
html[data-theme="light"] footer { color: #475569; }
html[data-theme="light"] .foot a:hover { color: #854d0e; }
/* second (legal) footer is inline-styled: style="…color:#888;border-top:1px solid #2a2a2a" — #888 on #f7f8fb is 3.3:1 at 12px,
   and the #2a2a2a rule would be a black line on a light page → the only !important in this file. */
html[data-theme="light"] footer[style*="color:#888"] { color: #475569 !important; border-top-color: #e2e8f0 !important; }

/* ===== language modal (soom-language-modal.js injects a white card with a .95 black overlay) ===== */
html[data-theme="light"] .slm-overlay { background: rgba(15, 23, 42, .55); }

/* ===== /sim/ shell (sim/index.html: own tokens --bg --bar --line --text --dim --gold2; iframe content is wiatools, untouched) ===== */
html[data-theme="light"] { --bar: #ffffff; }
html[data-theme="light"] .bar { background: #fff; border-bottom-color: #e2e8f0; }
html[data-theme="light"] .bar .demo { color: #854d0e; border-color: rgba(180, 83, 9, .4); }
html[data-theme="light"] .bar .back { color: #0f172a; border-color: #7b879c; }
html[data-theme="light"] .bar .back:hover { color: #854d0e; border-color: #b45309; }
html[data-theme="light"] iframe#f { background: #f7f8fb; }