/* wiatools.smilestory.ai — site theme overlay (2026-10-28, family56 bundle B).
   ORIGINAL = DARK (body #0f0f1a, white text, rainbow kit header/footer). Nothing below touches the original:
   every rule is scoped to html[data-theme="light"], which the engine (wia-site-theme.template.js build) sets on
   <html> before first paint. Load this file LAST in <head> (after the page's own <style>) on index.html and the
   9 section pages (about/api/contact/mypage/pricing/privacy/simulators/terms/tools). The kit's own CSS
   (<style id="wt-site-kit-styles">, wt-site-kit-v2.js line 126, inserted into <head> at line 461) comes AFTER
   this file in the cascade, so every kit override here carries higher specificity (html[data-theme] + class)
   and !important only where the kit itself uses !important or an inline style.
   The 271 pages under /tools/ and /simulators/<slug>/ are NOT themed by this file: their bodies are light by
   default and follow the OS (@media (prefers-color-scheme: dark)); only the kit header/footer/modals (which
   they share) would pick up these rules if the file were loaded there.

   Light palette (contrast on #f7f8fb / #fff):
     page #f7f8fb · card #fff · text #0f172a (16:1) · muted #475569 (7.5:1) · line #e2e8f0 · line-strong #cbd5e1
     purple #6d28d9 (6.6:1) · indigo #4338ca (7.7:1) · teal #0e7490 (5.4:1) · green #15803d (5.0:1)
     gold #b45309 (4.9:1) · red #b91c1c (5.9:1) · header/footer = the kit rainbow under a 90% white wash
   Hard-coded colors that stay dark on purpose (self-contained bands, see NOTES.md ④): index K-Pop block,
   api .code-block, the kit's OTA/Korean Today bands (#wt-divine-extras), Donate button, filled CTA buttons. */

/* ===== tokens (new — the kit and the pages have no :root tokens) ===== */
html[data-theme="light"] {
    --wst-bg: #f7f8fb;
    --wst-card: #fff;
    --wst-text: #0f172a;
    --wst-text-2: #334155;
    --wst-muted: #475569;
    --wst-line: #e2e8f0;
    --wst-line-strong: #7b879c /* 2026-10-28 리뷰: 입력창 테두리 3:1(#cbd5e1 1.5:1 → 3.6:1) */;
    --wst-purple: #6d28d9;
    --wst-indigo: #4338ca;
    --wst-rainbow: linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #01a3a4, #ff6b6b);
    --wst-wash: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90));
    --wst-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
html[data-theme="light"] body { background: var(--wst-bg); color: var(--wst-text); }
html[data-theme="light"] ::selection { background: rgba(109,40,217,0.18); }

/* ===== kit header (wt-site-kit-v2.js lines 135-191; HTML lines 292-323) =====
   The rainbow stays as brand, washed to pastel so dark text reads (#0f172a on the palest stop ≥ 12:1).
   Two background layers: the wash on top, the kit's animated rainbow below (wtRainbow keeps animating). */
html[data-theme="light"] .wt-header {
    background-image: var(--wst-wash), var(--wst-rainbow);
    background-size: 100% 100%, 400% 400%;
    border-bottom-color: var(--wst-line);
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
/* skeleton: kit line 465 writes the rainbow as an INLINE style on #wt-header before the real header renders → !important */
html[data-theme="light"] #wt-header {
    background-image: var(--wst-wash), var(--wst-rainbow) !important;
    background-size: 100% 100%, 400% 400% !important;
}
html[data-theme="light"] .wt-logo-text { color: var(--wst-text); }
html[data-theme="light"] .wt-logo-text span { color: var(--wst-muted); }
html[data-theme="light"] .wt-logo-badge { background: rgba(15,23,42,0.08); color: #1e293b; }
/* favicon.ico is teal (#00a0c0) on transparent: readable on the pale header, a hairline shadow keeps the edge */
html[data-theme="light"] .wt-logo-icon,
html[data-theme="light"] .wt-footer-logo-icon { filter: drop-shadow(0 1px 1px rgba(15,23,42,0.25)); }

html[data-theme="light"] .wt-nav-link { color: var(--wst-text-2); }
html[data-theme="light"] .wt-nav-link:hover { color: var(--wst-text); background: rgba(15,23,42,0.06); }
/* kit line 160 uses !important on the Login pill → same here, higher specificity wins */
html[data-theme="light"] .wt-nav-login {
    background: var(--wst-card) !important;
    border-color: var(--wst-line-strong) !important;
    color: var(--wst-text) !important;
}
html[data-theme="light"] .wt-nav-login:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; }
/* language button (desktop .wt-desktop-nav .wt-nav-lang + mobile .wt-mobile-header-lang.wt-nav-lang, kit line 178) */
html[data-theme="light"] .wt-nav-lang { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .wt-nav-lang:hover { background: #f1f5f9; box-shadow: 0 0 0 3px rgba(109,40,217,0.14); }
/* the 1px divider between the language button and Login is an inline style (kit line 302) */
html[data-theme="light"] .wt-desktop-nav > div[style*="width:1px"] { background: var(--wst-line-strong) !important; }

/* profile dropdown (logged in) */
html[data-theme="light"] .wt-user-profile-btn { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .wt-user-profile-btn:hover { background: #f1f5f9; }
html[data-theme="light"] .wt-user-avatar { border-color: var(--wst-line-strong); }
html[data-theme="light"] .wt-dropdown-arrow { color: var(--wst-muted); }
html[data-theme="light"] .wt-user-dropdown-menu {
    background: var(--wst-card); border-color: var(--wst-line);
    box-shadow: 0 10px 40px rgba(15,23,42,0.16);
}
html[data-theme="light"] .wt-user-dropdown-menu a { color: var(--wst-text); border-bottom-color: #f1f5f9; }
html[data-theme="light"] .wt-user-dropdown-menu a:hover { background: #f5f3ff; color: var(--wst-purple); }

/* mobile header + slide menu (kit lines 182-191) */
html[data-theme="light"] .wt-hamburger-line { background: var(--wst-text); }
html[data-theme="light"] .wt-mobile-header-login { color: var(--wst-text); border-color: var(--wst-line-strong); background: var(--wst-card); }
html[data-theme="light"] .wt-mobile-nav { background: var(--wst-bg); }
html[data-theme="light"] .wt-mobile-nav-title { color: var(--wst-muted); }
html[data-theme="light"] .wt-mobile-nav a { color: var(--wst-text); border-bottom-color: var(--wst-line); }
html[data-theme="light"] .wt-mobile-nav-lang {
    background-image: linear-gradient(rgba(255,255,255,0.86), rgba(255,255,255,0.86)), linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #54a0ff, #5f27cd);
    background-size: 100% 100%, 400% 400%;
    color: var(--wst-text);
    box-shadow: inset 0 0 0 1px var(--wst-line);   /* a border would change its size; inset shadow does not */
}

/* G5 band under the header (#wt-g5-band, kit lines 836-848) follows the OS via prefers-color-scheme → pin it light */
html[data-theme="light"] #wt-g5-band { background: #fff4f6; color: #5b1b2c; border-bottom-color: #f3c6d0; }
html[data-theme="light"] #wt-g5-band a { color: #b4234a; }
html[data-theme="light"] #wt-g5-band button:hover,
html[data-theme="light"] #wt-g5-band button:focus { background: rgba(0,0,0,0.08); }

/* ===== kit footer (kit lines 195-243; HTML lines 337-377) — kit uses !important on the rainbow → !important here ===== */
html[data-theme="light"] .wt-footer {
    background-image: var(--wst-wash), var(--wst-rainbow) !important;
    background-size: 100% 100%, 400% 400% !important;
    border-top-color: var(--wst-line);
    color: var(--wst-text);
}
html[data-theme="light"] .wt-footer-logo-text { color: var(--wst-text); }
html[data-theme="light"] .wt-footer-logo-text span { color: var(--wst-muted); }
html[data-theme="light"] .wt-footer-brand p { color: var(--wst-text-2); }
html[data-theme="light"] .wt-footer-stats { color: #1e293b; }
html[data-theme="light"] .wt-footer-section h4,
html[data-theme="light"] .wt-footer-family h4 { color: var(--wst-text); }
html[data-theme="light"] .wt-footer-section a { color: var(--wst-text-2); }
html[data-theme="light"] .wt-footer-section a:hover { color: var(--wst-purple); text-shadow: none; }
html[data-theme="light"] .wt-footer-family-sub,
html[data-theme="light"] .wt-footer-stats-small { color: var(--wst-muted); }
html[data-theme="light"] .family-site-btn { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .family-site-btn:hover { background: #f1f5f9; border-color: #94a3b8; box-shadow: 0 5px 20px rgba(15,23,42,0.12); }
/* "Follow Us:" is inline magenta #ff00ff with a glow (kit line 367) → #a21caf per the brief, glow off */
html[data-theme="light"] .wt-footer-family span[style*="#ff00ff"] { color: #a21caf !important; text-shadow: none !important; }
html[data-theme="light"] .wt-footer-bottom { border-top-color: #d9e0ea; }
html[data-theme="light"] .wt-footer-bottom p { color: var(--wst-muted); }
html[data-theme="light"] .wt-footer-bottom a { color: var(--wst-text); }
/* "Powered by SmileStory" inline #00d4ff (kit line 375) and the A11Y caption inline #94a3b8 (line 376) */
html[data-theme="light"] .wt-footer-bottom span[style*="#00d4ff"] { color: #0e7490 !important; }
html[data-theme="light"] .wt-footer-bottom div[style*="#94a3b8"] { color: var(--wst-muted) !important; }

/* family sites modal (kit lines 227-238) */
html[data-theme="light"] .family-site-modal-content {
    background: var(--wst-card); border-color: var(--wst-line);
    box-shadow: 0 20px 60px rgba(15,23,42,0.22);
}
html[data-theme="light"] .family-site-modal-header {
    background: rgba(255,255,255,0.92); color: var(--wst-text); border-bottom-color: var(--wst-line);
}
html[data-theme="light"] .family-site-close { color: var(--wst-muted); }
html[data-theme="light"] .family-site-close:hover { color: #b91c1c; }
html[data-theme="light"] .family-site-item { background: #f8fafc; border-color: var(--wst-line); }
html[data-theme="light"] .family-site-item:hover { background: #f5f3ff; border-color: rgba(109,40,217,0.4); box-shadow: 0 10px 30px rgba(15,23,42,0.10); }
html[data-theme="light"] .family-site-name { color: var(--wst-text); }
html[data-theme="light"] .family-site-url { color: var(--wst-muted); }

/* ===== language modal (components/language-modal/language-modal.js lines 263-368) =====
   The modal card is already white in both themes; only the near-black backdrop is softened. */
html[data-theme="light"] #wiaNavLangModal { background: rgba(15,23,42,0.55); }
html[data-theme="light"] .wia-nav-modal-content { box-shadow: 0 30px 60px rgba(15,23,42,0.25); }

/* ===== index.html first screen (inline <style>, lines 17-189) ===== */
/* rainbow headline: the original stops (#feca57, #48dbfb) vanish on a light page → same hues, darker tones; animation kept */
html[data-theme="light"] .hero h1 .gradient-text {
    background-image: linear-gradient(270deg, #dc2626, #b45309, #0e7490, #a21caf, #1d4ed8, #5b21b6, #0f766e, #dc2626);
}
html[data-theme="light"] .hero .subtitle { color: var(--wst-muted); }
html[data-theme="light"] .cta-primary { box-shadow: 0 4px 14px rgba(124,58,237,0.25); }
html[data-theme="light"] .cta-secondary { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .cta-secondary:hover { background: #f1f5f9; }
/* "Browse Islamic" carries an inline border-color (index line 221) → !important, deeper green for a 3:1 edge */
html[data-theme="light"] .cta-secondary[style*="16,185,129"] { border-color: rgba(15,118,110,0.55) !important; }

html[data-theme="light"] .stat-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .stat-card:hover { border-color: rgba(109,40,217,0.45); box-shadow: 0 8px 30px rgba(15,23,42,0.10); }
html[data-theme="light"] .stat-number.purple { color: #6d28d9; }
html[data-theme="light"] .stat-number.blue { color: #1d4ed8; }
html[data-theme="light"] .stat-number.green { color: #15803d; }
html[data-theme="light"] .stat-number.orange { color: #b45309; }
html[data-theme="light"] .stat-number.emerald { color: #047857; }
html[data-theme="light"] .stat-label { color: var(--wst-muted); }

html[data-theme="light"] .section-title { background-image: linear-gradient(135deg, #4f46e5, #6d28d9); }
html[data-theme="light"] .cat-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .cat-card:hover { border-color: rgba(109,40,217,0.45); background: #f5f3ff; }
html[data-theme="light"] .cat-info p { color: var(--wst-muted); }
html[data-theme="light"] .arabic-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .arabic-card:hover { border-color: rgba(15,118,110,0.45); background: #ecfdf5; }
html[data-theme="light"] .arabic-card h3 { color: var(--wst-text); }
html[data-theme="light"] .arabic-card p { color: var(--wst-muted); }
html[data-theme="light"] .feature-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .feature-card:hover { border-color: rgba(109,40,217,0.35); }
html[data-theme="light"] .feature-card p { color: var(--wst-muted); }
/* K-Pop block (index lines 236-362) is left as a dark feature band on purpose — see NOTES.md ④.
   Only its outer edge gets a visible line so the band does not float on the light page. */
html[data-theme="light"] .section[style*="#2d1b4e"] { border-color: #c4bfd6 !important; box-shadow: 0 10px 30px rgba(15,23,42,0.12); }

/* ===== section pages: common shell (about / api / contact / privacy / terms / pricing — inline <style>) ===== */
html[data-theme="light"] h1 .gradient { background-image: linear-gradient(135deg, #4f46e5, #6d28d9); }
html[data-theme="light"] .lead { color: var(--wst-muted); }
html[data-theme="light"] .updated { color: #64748b; }
html[data-theme="light"] .page .section h2 { color: var(--wst-purple); }
html[data-theme="light"] .page .section p,
html[data-theme="light"] .page .section li { color: var(--wst-text-2); }
/* about: the only page whose .section is a padded, bordered card (privacy/terms/api .section is a bare block) */
html[data-theme="light"] .page:has(.stats-row) .section { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .mini-stat { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .mini-stat .num { color: var(--wst-purple); }
html[data-theme="light"] .mini-stat .lbl { color: var(--wst-muted); }

/* contact */
html[data-theme="light"] .contact-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .contact-card:hover { border-color: rgba(109,40,217,0.45); }
html[data-theme="light"] .contact-info p { color: var(--wst-muted); }
html[data-theme="light"] .contact-info a { color: var(--wst-purple); }

/* api (the dark .code-block stays dark — a code panel on a light page; its token colors are tuned for it) */
html[data-theme="light"] .badge-base { background: #ecfdf5; color: #047857; border-color: rgba(4,120,87,0.30); }
html[data-theme="light"] .code-block { border-color: #2d2d5e; }
html[data-theme="light"] .endpoint-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .endpoint-path { color: var(--wst-text); }
html[data-theme="light"] .endpoint-desc { color: var(--wst-muted); }
html[data-theme="light"] .method-badge.get { background: rgba(29,78,216,0.10); color: #1d4ed8; }
html[data-theme="light"] .method-badge.post { background: rgba(4,120,87,0.10); color: #047857; }
html[data-theme="light"] .rate-table th { color: var(--wst-purple); border-bottom-color: var(--wst-line); }
html[data-theme="light"] .rate-table td { color: var(--wst-text-2); border-bottom-color: var(--wst-line); }
/* api line ~60: <a href="/pricing/" style="color:#a78bfa;"> — inline → !important */
html[data-theme="light"] .page a[style*="#a78bfa"] { color: var(--wst-purple) !important; }

/* pricing */
html[data-theme="light"] .plan { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .plan.featured { border-color: #7c3aed; box-shadow: 0 0 40px rgba(124,58,237,0.14); }
html[data-theme="light"] .plan-price .currency { color: var(--wst-muted); }
html[data-theme="light"] .plan-price .period { color: #64748b; }
html[data-theme="light"] .plan-desc { color: var(--wst-muted); }
html[data-theme="light"] .plan-features li { color: var(--wst-text-2); }
html[data-theme="light"] .check { color: #15803d; }
html[data-theme="light"] .btn-free,
html[data-theme="light"] .btn-team { background: var(--wst-card); color: var(--wst-text); border-color: var(--wst-line-strong); }
html[data-theme="light"] .btn-free:hover,
html[data-theme="light"] .btn-team:hover { background: #f1f5f9; }
html[data-theme="light"] .faq h2 { color: var(--wst-purple); }
html[data-theme="light"] .faq-item { border-bottom-color: var(--wst-line); }
html[data-theme="light"] .faq-a { color: var(--wst-muted); }
html[data-theme="light"] .billing-toggle span { color: var(--wst-muted); }
html[data-theme="light"] .billing-toggle span.active { color: var(--wst-text); }
html[data-theme="light"] .toggle-track { background: var(--wst-line-strong); }
html[data-theme="light"] .toggle-switch input:checked + .toggle-track { background: #7c3aed; }
html[data-theme="light"] .save-badge { background: #dcfce7; color: #15803d; }
html[data-theme="light"] .alert-success { background: #f0fdf4; border-color: rgba(21,128,61,0.35); color: #15803d; }
html[data-theme="light"] .alert-cancel { background: #fffbeb; border-color: rgba(180,83,9,0.35); color: #92400e; }

/* mypage (inline <style>, lines 9-83) */
html[data-theme="light"] .sub,
html[data-theme="light"] .who-mail,
html[data-theme="light"] .link small,
html[data-theme="light"] .note,
html[data-theme="light"] #gate p,
html[data-theme="light"] .wrap dt { color: var(--wst-muted); }
html[data-theme="light"] .wrap .card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .wrap .card h2 { color: var(--wst-indigo); }
html[data-theme="light"] .wrap .badge { background: #e0e7ff; color: #3730a3; }
html[data-theme="light"] .wrap .link { background: #f8fafc; border-color: var(--wst-line); color: var(--wst-text); }
html[data-theme="light"] .wrap .link:hover,
html[data-theme="light"] .wrap .link:focus-visible { border-color: rgba(67,56,202,0.5); background: #eef2ff; }
html[data-theme="light"] .wrap .btn { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .wrap .btn:hover { border-color: #94a3b8; }
html[data-theme="light"] .wrap .btn-primary { border-color: transparent; color: #fff; }   /* keeps its gradient fill */

/* ===== /tools/ and /simulators/ hubs (inline <style>; hero is .container > .hero — index and pricing heroes are not) ===== */
html[data-theme="light"] .container > .hero {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 40%, #ecfeff 75%, #f8fafc 100%);
    box-shadow: inset 0 0 0 1px var(--wst-line);
}
html[data-theme="light"] .container > .hero h1 { color: var(--wst-text); }
html[data-theme="light"] .container > .hero h1 .accent { background-image: linear-gradient(135deg, #4f46e5, #4338ca); }
html[data-theme="light"] .container > .hero h1 .gold { background-image: linear-gradient(135deg, #b45309, #92400e); }
html[data-theme="light"] .hero-badge { color: var(--wst-indigo); background: #e0e7ff; border-color: rgba(67,56,202,0.30); }
html[data-theme="light"] body:has(.sims-grid) .hero-badge { color: #92400e; background: #fef3c7; border-color: rgba(180,83,9,0.35); }
html[data-theme="light"] .hero-tagline { color: var(--wst-text-2); }
html[data-theme="light"] .hero-tagline-sub { color: var(--wst-muted); }
html[data-theme="light"] .hero-stat-num { background-image: linear-gradient(135deg, #4f46e5, #4338ca); }
html[data-theme="light"] body:has(.sims-grid) .hero-stat-num { background-image: linear-gradient(135deg, #b45309, #92400e); }
html[data-theme="light"] .hero-stat-label { color: var(--wst-muted); }
html[data-theme="light"] .hero-stat-plus { color: #94a3b8; }
html[data-theme="light"] .hero-feature,
html[data-theme="light"] .hero-highlight { color: var(--wst-muted); }
html[data-theme="light"] .hero-cta-secondary { background: var(--wst-card); color: #3730a3; border-color: rgba(67,56,202,0.35); }
html[data-theme="light"] .hero-cta-secondary:hover { background: #eef2ff; border-color: rgba(67,56,202,0.6); }

html[data-theme="light"] .search-input { background: var(--wst-card); color: var(--wst-text); border-color: var(--wst-line-strong); }
html[data-theme="light"] .search-input:focus { background: var(--wst-card); border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.12); }
html[data-theme="light"] .search-input::placeholder { color: #64748b; }
html[data-theme="light"] .filter-btn { background: var(--wst-card); color: var(--wst-muted); border-color: var(--wst-line); }
html[data-theme="light"] .filter-btn:hover { color: #3730a3; border-color: rgba(99,102,241,0.5); }
html[data-theme="light"] .tool-card,
html[data-theme="light"] .sim-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .sim-card:hover { box-shadow: 0 12px 24px rgba(99,102,241,0.16); }
html[data-theme="light"] .tool-name,
html[data-theme="light"] .sim-name { color: var(--wst-text); }
html[data-theme="light"] .tool-desc,
html[data-theme="light"] .sim-desc { color: var(--wst-muted); }
html[data-theme="light"] .sim-icon { filter: none; }