/* rise.smilestory.ai — site theme: DARK overlay (2026-10-28).
   ORIGINAL look = LIGHT (assets/css/main.css, :root tokens). main.css is NOT changed. Load this file LAST in <head>
   (after /assets/css/main.css, after admin/index.html's own <style> on that page), with the wia-site-theme engine
   setting <html data-theme="light|dark"> before first paint. Every rule below is scoped to html[data-theme="dark"],
   so light renders exactly as before (0 px difference). color-scheme is set by the engine — not here.

   Pages sharing main.css: index.html, apply.html, thanks.html, region/*.html (18), course/*.html (16) — all built
   from build.js with the same header/footer — and admin/index.html (+ its own <style>; internal, token-gated).

   Dark palette (warm-neutral so the navy/gold brand stays warm; ratios measured against page #0f1014 / card #1a1b21):
   ┌──────────────────┬──────────┬─────────────────────────────────────────────────────────────────┐
   │ page bg          │ #0f1014  │ (hero #141824→#0f1014 gradient, section-bg #15161b)              │
   │ card             │ #1a1b21  │ course/trust/region/faq cards, form, mobile nav, header 92 %      │
   │ text             │ #ebe8e1  │ 15.5:1 page · 14.0:1 card                                        │
   │ text-soft        │ #b8b3aa  │  9.1:1 · 8.2:1                                                   │
   │ text-muted       │ #9a948a  │  6.3:1 · 5.7:1                                                   │
   │ border           │ #30323b  │ hairline (decorative; form-field borders use #666a75 ≥ 3.2:1)    │
   │ primary (links)  │ #9fbbea  │  9.8:1 · 8.8:1 — navy #1a3a6e is 1.5:1 on dark, so links lighten │
   │ primary-dark     │ #d6e0f3  │ headings 14.3:1                                                  │
   │ accent (gold)    │ #d9b55c  │ fills/lines; #1a1a1a text on it 8.9:1                            │
   │ accent-dark      │ #e6c56f  │ GOLD AS TEXT 11.4:1 page · 10.3:1 card · 9.3:1 on gold tint      │
   │ gold tint        │ #2a2412  │ replaces #fff8e9 boxes; border #5a4a1e                            │
   │ cta fill         │ #2a5494  │ white text 7.5:1 (hover #35649f)                                 │
   │ warn / success   │ #f0b35a / #5ad07f (10.2:1 / 9.7:1)                                          │
   └──────────────────┴──────────┴─────────────────────────────────────────────────────────────────┘
   Inline style="color:#…" spots (breadcrumbs, loading text, the gold notice under 강사, course 학습성과 list,
   apply.js status message) can only be covered with !important — each such rule says why. */

/* ===== tokens ===== */
html[data-theme="dark"] {
  --c-primary: #9fbbea;        /* was #1a3a6e — used for a, .brand, .btn-outline, icons, focus of inputs */
  --c-primary-dark: #d6e0f3;   /* was #0f2548 — headings */
  --c-accent: #d9b55c;         /* was #c9a44c — gold fills/lines/focus ring */
  --c-accent-dark: #e6c56f;    /* was #a0822f — gold as text */
  --c-bg: #0f1014;
  --c-bg-soft: #15161b;
  --c-bg-card: #1a1b21;
  --c-border: #30323b;
  --c-text: #ebe8e1;
  --c-text-soft: #b8b3aa;
  --c-text-muted: #9a948a;
  --c-warn: #f0b35a;
  --c-success: #5ad07f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .55);
  /* overlay-only tokens */
  --t-fill: #2a5494;           /* solid button fill behind white text */
  --t-fill-hover: #35649f;
  --t-gold-tint: #2a2412;
  --t-gold-line: #5a4a1e;
  --t-navy-tint: #1f2a40;      /* icon chips, table heads (was #eef2fb) */
  --t-input-line: #666a75;     /* form-field boundary ≥ 3:1 on soft/card */
}
html[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }

/* ===== header / nav ===== */
html[data-theme="dark"] .site-header { background: rgba(15, 16, 20, .92); border-bottom-color: var(--c-border); }
html[data-theme="dark"] .brand-name { color: var(--c-primary-dark); }
html[data-theme="dark"] .brand-sub { color: var(--c-accent-dark); }
/* logo smilestory-s.png is solid gold (#edb41c) on transparent — reads fine on dark, no filter needed */
html[data-theme="dark"] .nav-primary a { color: var(--c-text); }
/* the two inline-colored links (WIA SOOM / .wia, style="color:#E5A100") are 8.5:1 on #0f1014 — left as they are */
html[data-theme="dark"] .btn-cta { background: var(--t-fill); color: #fff !important; } /* !important matches main.css's own */
html[data-theme="dark"] .btn-cta:hover { background: var(--t-fill-hover); }
html[data-theme="dark"] .btn-outline { color: var(--c-primary); border-color: var(--c-primary); }
html[data-theme="dark"] .btn-outline:hover { background: var(--t-fill); border-color: var(--t-fill); color: #fff !important; }
html[data-theme="dark"] .skip-link { background: var(--t-fill); color: #fff; }
@media (max-width: 768px) {
  html[data-theme="dark"] .nav-primary { background: var(--c-bg-card); border-bottom-color: var(--c-border); box-shadow: var(--shadow-md); }
  html[data-theme="dark"] .nav-toggle { color: var(--c-primary); }
}

/* ===== hero (index / apply / thanks / course) ===== */
html[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #161a26 0%, #0f1014 100%);
  border-bottom-color: var(--c-border);
}
html[data-theme="dark"] .hero h1 { color: var(--c-primary-dark); }
html[data-theme="dark"] .hero .lead { color: var(--c-text-soft); }
html[data-theme="dark"] .badge { background: var(--c-bg-card); border-color: var(--c-border); color: var(--c-text-soft); }
html[data-theme="dark"] .badge.accent { background: var(--t-gold-tint); border-color: var(--t-gold-line); color: var(--c-accent-dark); }

/* ===== sections / cards ===== */
html[data-theme="dark"] .section-bg { background: var(--c-bg-soft); }
html[data-theme="dark"] h2.section-title { color: var(--c-primary-dark); }
html[data-theme="dark"] .section-lead { color: var(--c-text-muted); }

html[data-theme="dark"] .trust-item,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .region-card,
html[data-theme="dark"] .uni-item,
html[data-theme="dark"] .faq details,
html[data-theme="dark"] .apply-form { background: var(--c-bg-card); border-color: var(--c-border); }
html[data-theme="dark"] .trust-item .icon { background: var(--t-navy-tint); color: var(--c-primary); }
html[data-theme="dark"] .trust-item h3,
html[data-theme="dark"] .course-card h3,
html[data-theme="dark"] .region-card .name,
html[data-theme="dark"] .region-hero h1,
html[data-theme="dark"] .combo-item .label,
html[data-theme="dark"] .faq summary { color: var(--c-primary-dark); }
html[data-theme="dark"] .trust-item p,
html[data-theme="dark"] .course-card ul,
html[data-theme="dark"] .faq p,
html[data-theme="dark"] .region-hero .meta,
html[data-theme="dark"] .social-proof { color: var(--c-text-soft); }
html[data-theme="dark"] .course-card .sub,
html[data-theme="dark"] .region-card .count { color: var(--c-text-muted); }
html[data-theme="dark"] .region-card { color: var(--c-text); }
html[data-theme="dark"] .region-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); }
html[data-theme="dark"] .region-card.central { background: var(--t-gold-tint); border-color: var(--t-gold-line); }
html[data-theme="dark"] .region-card.central .name { color: var(--c-accent-dark); }
html[data-theme="dark"] .region-hero { background: var(--c-bg-soft); border-bottom-color: var(--c-border); }
html[data-theme="dark"] .social-proof { background: var(--c-bg-card); border-color: var(--c-accent); }
html[data-theme="dark"] .social-proof strong { color: var(--c-accent-dark); }
html[data-theme="dark"] .faq summary::before { color: var(--c-accent); }
html[data-theme="dark"] .faq details[open] { box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .note-box { background: var(--t-gold-tint); border-color: var(--t-gold-line); color: var(--c-accent-dark); }
html[data-theme="dark"] .note-box a { color: var(--c-primary); }

/* WIA SOOM banner: navy gradient is already dark — keep, add a faint edge so it separates from the dark section */
html[data-theme="dark"] .soom-banner { background: linear-gradient(135deg, #1a3a6e 0%, #0f2548 100%); border: 1px solid rgba(255, 255, 255, .08); }
html[data-theme="dark"] .soom-banner .btn-cta { background: var(--c-accent); color: #1a1a1a !important; } /* gold fill, 8.9:1 */
html[data-theme="dark"] .soom-banner .btn-cta:hover { background: #e6c56f; color: #1a1a1a !important; }
html[data-theme="dark"] .soom-banner .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff !important; }

/* ===== form (apply.html; combo rows are injected by assets/js/apply.js with these same classes) ===== */
html[data-theme="dark"] .form-row label { color: var(--c-text); }
html[data-theme="dark"] .form-row .req { color: #f87171; } /* #dc2626 was 3.6:1 on the dark card */
html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row select,
html[data-theme="dark"] .form-row textarea,
html[data-theme="dark"] .combo-item input {
  background: var(--c-bg-soft); color: var(--c-text); border-color: var(--t-input-line);
}
html[data-theme="dark"] .form-row input::placeholder,
html[data-theme="dark"] .form-row textarea::placeholder { color: var(--c-text-muted); }
html[data-theme="dark"] .form-row input:focus,
html[data-theme="dark"] .form-row select:focus,
html[data-theme="dark"] .form-row textarea:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(159, 187, 234, .25); }
html[data-theme="dark"] .form-hint { color: var(--c-text-muted); }
html[data-theme="dark"] .combo-item { background: var(--c-bg-soft); }
html[data-theme="dark"] .combo-item .label .sub { color: var(--c-text-muted); }
html[data-theme="dark"] .combo-item input[type="checkbox"] { accent-color: var(--c-primary); }
/* apply.js writes msg.style.color = '#dc2626' | '#1a3a6e' (serialised as rgb(...)); navy is 1.5:1 on the card,
   so the "sent" confirmation would vanish — inline style can only be beaten with !important */
html[data-theme="dark"] #form-msg[style*="220, 38, 38"] { color: #f87171 !important; }
html[data-theme="dark"] #form-msg[style*="26, 58, 110"] { color: var(--c-success) !important; }

/* ===== footer (already navy; keep, just deepen the edge and lift the faintest line) ===== */
html[data-theme="dark"] .site-footer { background: #0c1424; border-top: 1px solid var(--c-border); }
html[data-theme="dark"] .site-footer .footer-cert { background: linear-gradient(135deg, #16305c 0%, #0c1424 100%); }
html[data-theme="dark"] .site-footer .footer-corp { border-top-color: #243654; }
html[data-theme="dark"] .site-footer .copyright { color: #8494ad; } /* #64748b was 3.2:1 on navy → 5.3:1 */

/* ===== course pages: build.js injects a <style> with rc-* (curriculum) rules — white cards, indigo accents ===== */
html[data-theme="dark"] .rc-pillar { background: var(--t-navy-tint); border-color: #3a4a6e; color: #c7d2fe; }
html[data-theme="dark"] .rc-total { background: var(--t-navy-tint); color: #c7d2fe; }
html[data-theme="dark"] .rc-day { background: var(--c-bg-card); border-color: var(--c-border); }
html[data-theme="dark"] .rc-row { border-bottom-color: var(--c-border); }
html[data-theme="dark"] .rc-time { color: #a5b4fc; }
html[data-theme="dark"] .rc-body h4 { color: var(--c-text); }
html[data-theme="dark"] .rc-pts { color: var(--c-text-soft); }
html[data-theme="dark"] .rc-sub { color: var(--c-text-muted); }
html[data-theme="dark"] .rc-break { background: var(--c-bg-soft); color: var(--c-text-muted); }
html[data-theme="dark"] .rc-break .rc-time { color: var(--c-text-muted); }

/* ===== inline style="…" spots (static HTML / build.js output) — !important is the only way past an inline style ===== */
/* breadcrumbs (course/region), "불러오는 중…" placeholders (index #regions-grid, apply #combo-list, main.js error text):
   #6b7280 is 3.9:1 on the dark page */
html[data-theme="dark"] main [style*="color:#6b7280"] { color: var(--c-text-muted) !important; }
/* thanks.html #ref (접수번호) */
html[data-theme="dark"] #ref { color: var(--c-text-muted) !important; }
/* index.html line 118: gold notice under 강사 — style="background:#fff8e9;border:1px solid #f1d98a;…;color:#a0822f" */
html[data-theme="dark"] main [style*="background:#fff8e9"] {
  background: var(--t-gold-tint) !important; border-color: var(--t-gold-line) !important; color: var(--c-accent-dark) !important;
}
/* course pages: 학습 성과 list is style="…color:#1f2937" (1.7:1 on dark) */
html[data-theme="dark"] main [style*="color:#1f2937"] { color: var(--c-text) !important; }
/* region pages: campus district spans style="color:#9ca3af" are 7.5:1 on dark — left as they are */

/* ===== admin/index.html (internal, token-gated): its own <style> hard-codes light surfaces — shell only.
   (its body{background:#f7f8fb} is beaten by the html[data-theme="dark"] body rule above — higher specificity) ===== */
html[data-theme="dark"] .hub .panel,
html[data-theme="dark"] .hub .copy-btn { background: var(--c-bg-card); border-color: var(--c-border); color: var(--c-text); }
html[data-theme="dark"] .hub .panel th { background: var(--t-navy-tint); color: var(--c-primary-dark); }
html[data-theme="dark"] .hub .panel code { background: var(--c-bg-soft); color: var(--c-primary-dark); }
html[data-theme="dark"] .hub .stat { background: var(--c-bg-soft); border-color: var(--c-border); }
html[data-theme="dark"] .hub .badge-pill { background: var(--t-navy-tint); color: var(--c-primary); }
html[data-theme="dark"] .hub .badge-pill.gold { background: var(--t-gold-tint); color: var(--c-accent-dark); }
html[data-theme="dark"] .hub .panel .ok { color: var(--c-success); }
html[data-theme="dark"] .hub .panel .warn { color: var(--c-warn); }
html[data-theme="dark"] .hub .panel .err,
html[data-theme="dark"] .hub [style*="color:#dc2626"] { color: #f87171 !important; }