/* a11y.wiabook.com — site theme overlay, LIGHT over a DARK original (2026-10-29, family56 bundle E).
   ORIGINAL = DARK (hand-written shell): root index.html body <style> :root{--bg:#0f172a …} 11 tokens + header.wia-topnav
   rgba(15,23,42,.98) + .wia-seo-intro; the 9 static pages copy the same tokens (guide/checks/standards/verify = --bg --bg2
   --bg3 --primary --blue --text --muted --border; fixer/pricing/docs = --bg --bg-card --primary --secondary --gold --text
   --text-muted --border …). privacy/ and ai-connect/ are LIGHT originals with a prefers-color-scheme:dark token block
   (ai-connect already guards it with :root:not([data-theme="light"]) — nothing to do there; privacy does not → restored here).
   REACT BODY (#root, bundle /assets/index-BL4d3i2_.css, Tailwind 3 with darkMode = media): every `x dark:y` pair compiles
   to .x (0,1,0) + @media(prefers-color-scheme:dark){.dark\:y (0,1,0)} — the engine's data-theme cannot switch it, so on a
   dark-OS device the dark halves stay on under our light page. Each dark\: utility used by the live bundles
   (index-h04Wa11y.js · ResultsPage-h04Wa11y.js, class strings enumerated 2026-10-29) is overridden below with
   html[data-theme="light"] #root .dark\:y (1,2,1) and given the value of its light sibling (or a darker tone when the light
   sibling fails 4.5:1). The inject scripts (badge-inject · fixer-estimate-inject · issue-detail-inject · pack-cta-inject)
   add their own <style> with a prefers-color-scheme:dark half — overridden the same way (section 5).
   Tailwind escapes: `:`→`\:`, `/`→`\/`.
   Every rule is scoped to html[data-theme="light"]. Load just before </head> (after /assets/index-*.css; the body <style>
   blocks of the hand shell come later in source order but only reach (0,1,0)/(0,1,1) — ours are (0,1,1)+ and win).
   `color-scheme` is NOT set here (engine sets it on <html>; the bundle's @media :root{color-scheme:dark} is (0,1,0) and
   loses to the engine's inline style). `!important` only where the original value is an inline style= (6 spots, marked).

   Light palette:  page #f7f8fb · card/header #fff · band #eef2f7 · field #fff · text #0f172a (16:1) · text-2 #334155 (10:1)
     muted #475569 (7.5:1) · faint #64748b (4.7:1) · line #d4d9e2 (decorative) · line-strong #7b879c (3.6:1, inputs/controls)
     purple #6d28d9 (6.3:1) · blue #1d4ed8 (6.3:1) · green #047857 / #15803d (4.9:1 on #f0fdf4) · amber #b45309 / #a16207
     red #b91c1c · tints: blue #eff6ff · green #f0fdf4 · yellow #fefce8 · red #fef2f2 · purple #f5f3ff
   Kept as-is: React footer (inline neon on its own dark gradient — stays a dark footer), .wia-cta #7c3aed (4.6:1 with white),
     React primary buttons (blue-600/purple-600 gradients + white), badge embed <textarea> (dark code box, inline style),
     language modal (white card already), skip link (#111/#fff), verify/ lightbox overlay. */

/* ====================================================================================
   1. TOKENS — hand shell + 9 static pages (all :root (0,1,0) → html[data-theme] (0,1,1))
   ==================================================================================== */
html[data-theme="light"] {
    /* root index · guide · checks · standards · verify */
    --bg: #f7f8fb;
    --bg2: #ffffff;
    --bg3: #e9edf3;
    --primary: #6d28d9;
    --green: #047857;
    --yellow: #b45309;
    --red: #b91c1c;
    --blue: #1d4ed8;
    --text: #0f172a;
    --muted: #475569;
    --border: #d4d9e2;
    /* fixer · pricing · docs */
    --bg-card: #ffffff;
    --bg-card-alt: #f1f5f9;
    --bg-code: #f1f5f9;
    --secondary: #047857;
    --gold: #854d0e;
    --danger: #b91c1c;
    --orange: #c2410c;
    --text-muted: #475569;
    --accent: #1d4ed8;
    --method-post: #b45309;
    --method-get: #047857;
    /* privacy/ · privacy/site/ — light originals; their @media(prefers-color-scheme:dark) :root block is (0,1,0) and
       would still win on a dark-OS device, so the light values are pinned here */
    --card: #ffffff;
    --ink: #1b2130;
    --line: #d9dde5;
    --brand: #1f4fd8;
}
/* fixer/ and pricing/ use --primary as BLUE (#3b82f6), the other pages as purple — keep their hue.
   :has() on html: Chrome 105+/Safari 15.4+/Firefox 121+; older browsers simply get purple (still readable). */
html[data-theme="light"]:has(header.global-header) { --primary: #1d4ed8; }

html[data-theme="light"] body { background: #f7f8fb; color: #0f172a; }
html[data-theme="light"] ::selection { background: rgba(109, 40, 217, 0.18); }

/* ====================================================================================
   2. ROOT index.html — hand header (header.wia-topnav) · feature bar · SEO intro
   ==================================================================================== */
html[data-theme="light"] .wia-topnav {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: #d4d9e2;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .wia-topnav-links a:hover { background: #eef2f7; color: #0f172a; }
html[data-theme="light"] .wia-topnav-links a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
/* .wia-cta #7c3aed + white = 4.6:1 — kept; hover opacity .9 → still ≥4.1 on white, so pin a solid darker hover instead */
html[data-theme="light"] .wia-topnav-links a.wia-cta:hover { opacity: 1; background: #6d28d9; }
/* language button = the anchor neighbour: border must read as a control (3:1) */
html[data-theme="light"] .wia-lang-trigger {
    color: #334155;
    border-color: #7b879c;
    background: #fff;
}
html[data-theme="light"] .wia-lang-trigger:hover { background: #eef2f7; color: #0f172a; }
html[data-theme="light"] .wia-lang-trigger:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
/* INLINE: <span style="font-size:10px;color:#ffd200">₩3만~</span> in the Fixer nav link (index + standards) — yellow on
   white is 1.4:1; inline style only yields to !important */
html[data-theme="light"] .wia-topnav-links a span[style*="ffd200"],
html[data-theme="light"] .topnav-links a span[style*="ffd200"] { color: #854d0e !important; }
html[data-theme="light"] .wia-feature-bar {
    background: rgba(29, 78, 216, 0.07);
    border-top-color: rgba(29, 78, 216, 0.18);
}
/* INLINE: <span style="font-weight:700;color:#60a5fa">♿ 88 Languages</span> — 2.6:1 on white */
html[data-theme="light"] .wia-feature-bar p span[style*="60a5fa"] { color: #1d4ed8 !important; }
/* logo text: gradient var(--primary)→var(--blue) follows the tokens (#6d28d9→#1d4ed8); the subtitle uses var(--muted) */
html[data-theme="light"] .wia-seo-intro { border-bottom-color: #d4d9e2; }
html[data-theme="light"] .wia-seo-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .wia-seo-intro a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* ====================================================================================
   3. REACT BODY — Tailwind dark: halves (media-compiled) → light values. Scope: #root (footer has no dark: class)
   ==================================================================================== */
/* --- app root / sections --- */
html[data-theme="light"] #root .bg-white.dark\:bg-gray-900 { background-color: #f7f8fb; }   /* App root + hidden Header */
html[data-theme="light"] #root .dark\:text-gray-100 { color: #0f172a; }
html[data-theme="light"] #root section.dark\:bg-gray-900 { background-color: #eef2f7; }     /* features band (bg-gray-50 pair) */
html[data-theme="light"] #root .rounded.dark\:bg-gray-900,
html[data-theme="light"] #root .rounded-lg.dark\:bg-gray-900 { background-color: #f1f5f9; } /* code node box · badge preview box */
html[data-theme="light"] #root .dark\:border-gray-800 { border-color: #e2e8f0; }

/* --- hero gradient: from-blue-50 via-purple-50 to-pink-50 | dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 --- */
html[data-theme="light"] #root .dark\:from-gray-900 {
    --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] #root .dark\:via-gray-800 {
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="light"] #root .dark\:to-gray-900 { --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position); }
/* FixerPage custom card: from-purple-50 to-pink-50 | dark:from-purple-900/20 dark:to-pink-900/20 */
html[data-theme="light"] #root .dark\:from-purple-900\/20 {
    --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] #root .dark\:to-pink-900\/20 { --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position); }
/* Results urgency CTA: from-red-50 via-orange-50 to-yellow-50 | dark:from-red-900/30 dark:via-orange-900/30 dark:to-yellow-900/30 */
html[data-theme="light"] #root .dark\:from-red-900\/30 {
    --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] #root .dark\:via-orange-900\/30 {
    --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="light"] #root .dark\:to-yellow-900\/30 { --tw-gradient-to: #fefce8 var(--tw-gradient-to-position); }

/* --- tabs (bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300) · secondary buttons (bg-gray-200 dark:bg-gray-700) --- */
html[data-theme="light"] #root .bg-gray-200.dark\:bg-gray-800 { background-color: #e2e8f0; }
html[data-theme="light"] #root .bg-gray-200.dark\:bg-gray-700 { background-color: #e2e8f0; }
html[data-theme="light"] #root .dark\:hover\:bg-gray-600:hover { background-color: #cbd5e1; }
html[data-theme="light"] #root .dark\:text-gray-300 { color: #334155; }
html[data-theme="light"] #root .dark\:text-gray-200 { color: #0f172a; }
html[data-theme="light"] #root .dark\:hover\:text-gray-300:hover { color: #0f172a; }
html[data-theme="light"] #root .dark\:hover\:bg-gray-700:hover { background-color: #eff6ff; }   /* white outline button → primary-50 */

/* --- cards (bg-white dark:bg-gray-800) · grey panels (bg-gray-50 / bg-gray-100 dark:bg-gray-800) --- */
html[data-theme="light"] #root .dark\:bg-gray-800 { background-color: #fff; }
html[data-theme="light"] #root .bg-gray-50.dark\:bg-gray-800,
html[data-theme="light"] #root .bg-gray-100.dark\:bg-gray-800 { background-color: #f1f5f9; }
html[data-theme="light"] #root .rounded-2xl.shadow-xl,
html[data-theme="light"] #root .rounded-xl.shadow-lg { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0; }
html[data-theme="light"] #root .hover\:shadow-2xl:hover { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px #e2e8f0; }

/* --- fields: input/select/textarea (border-gray-300 dark:border-gray-600 · dark:bg-gray-700 · dark:text-white) --- */
html[data-theme="light"] #root input.dark\:bg-gray-700,
html[data-theme="light"] #root select.dark\:bg-gray-700,
html[data-theme="light"] #root textarea.dark\:bg-gray-700 { background-color: #fff; }
html[data-theme="light"] #root .dark\:text-white { color: #0f172a; }
html[data-theme="light"] #root .border-gray-300,
html[data-theme="light"] #root .dark\:border-gray-600 { border-color: #7b879c; }          /* inputs · dropzone · toolbar rules */
html[data-theme="light"] #root input::placeholder,
html[data-theme="light"] #root textarea::placeholder { color: #64748b; }
html[data-theme="light"] #root .h-3.dark\:bg-gray-700 { background-color: #e2e8f0; }     /* category progress track */
html[data-theme="light"] #root .dark\:text-gray-700 { color: #e2e8f0; }                  /* score ring track (stroke=currentColor) */
/* spinner: border-gray-300 border-t-gray-900 | dark:border-gray-700 dark:border-t-gray-100 */
html[data-theme="light"] #root .animate-spin.dark\:border-gray-700 { border-color: #cbd5e1; }
html[data-theme="light"] #root .dark\:border-t-gray-100 { border-top-color: #0f172a; }

/* --- grey text --- */
html[data-theme="light"] #root .dark\:text-gray-400,
html[data-theme="light"] #root .dark\:text-gray-500 { color: #475569; }
html[data-theme="light"] #root .dark\:text-gray-600 { color: #64748b; }                  /* text-xs text-gray-400 (2.5:1) pair → 4.7:1 */
html[data-theme="light"] #root main .text-gray-400 { color: #64748b; }                   /* light half alone was 2.5:1 (badge-not-eligible note, ids) */
html[data-theme="light"] #root main .text-gray-500 { color: #475569; }

/* --- blue / primary --- */
html[data-theme="light"] #root .dark\:bg-blue-900,
html[data-theme="light"] #root .dark\:bg-blue-900\/20,
html[data-theme="light"] #root .dark\:bg-primary-900\/20 { background-color: #eff6ff; }
html[data-theme="light"] #root .dark\:border-blue-800 { border-color: #bfdbfe; }
html[data-theme="light"] #root .dark\:text-blue-100 { color: #1e3a8a; }
html[data-theme="light"] #root .dark\:text-blue-400,
html[data-theme="light"] #root .dark\:text-primary-400 { color: #1d4ed8; }
html[data-theme="light"] #root .dark\:text-purple-400 { color: #6d28d9; }

/* --- green (stats card · file-selected · all-passed) --- */
html[data-theme="light"] #root .dark\:bg-green-900 { background-color: #f0fdf4; }
html[data-theme="light"] #root .dark\:bg-green-900\/30 { background-color: #dcfce7; }
html[data-theme="light"] #root .dark\:border-green-700 { border-color: #86efac; }
html[data-theme="light"] #root .dark\:text-green-100,
html[data-theme="light"] #root .dark\:text-green-300 { color: #166534; }
html[data-theme="light"] #root .dark\:text-green-400 { color: #15803d; }
html[data-theme="light"] #root main .text-green-600,
html[data-theme="light"] #root main .text-green-500,
html[data-theme="light"] #root main .hover\:text-green-600:hover { color: #15803d; }     /* green-600 on green-50 = 3.3:1 → 4.9:1 */

/* --- red (error box · stats card · legal-risk FAQ) --- */
html[data-theme="light"] #root .dark\:bg-red-900,
html[data-theme="light"] #root .dark\:bg-red-900\/20 { background-color: #fef2f2; }
html[data-theme="light"] #root .dark\:bg-red-800 { background-color: #fee2e2; }
html[data-theme="light"] #root .dark\:border-red-700 { border-color: #fca5a5; }
html[data-theme="light"] #root .dark\:border-red-800 { border-color: #fecaca; }
html[data-theme="light"] #root .dark\:hover\:border-red-500:hover { border-color: #dc2626; }
html[data-theme="light"] #root .dark\:text-red-200,
html[data-theme="light"] #root .dark\:text-red-300 { color: #991b1b; }
html[data-theme="light"] #root .dark\:text-red-400 { color: #b91c1c; }
html[data-theme="light"] #root main .text-red-500 { color: #b91c1c; }                    /* red-500 on red-50 = 3.7:1 */

/* --- yellow (stats card "개선 권고" · FAQ III) --- */
html[data-theme="light"] #root .dark\:bg-yellow-900 { background-color: #fefce8; }
html[data-theme="light"] #root .dark\:border-yellow-700 { border-color: #fde68a; }
html[data-theme="light"] #root .dark\:hover\:border-yellow-500:hover { border-color: #ca8a04; }
html[data-theme="light"] #root .dark\:text-yellow-300 { color: #854d0e; }
html[data-theme="light"] #root .dark\:text-yellow-400 { color: #a16207; }
html[data-theme="light"] #root main .text-yellow-600,
html[data-theme="light"] #root main .text-yellow-500,
html[data-theme="light"] #root main .hover\:text-yellow-600:hover { color: #a16207; }    /* yellow-600 on yellow-50 = 3.1:1 → 4.9:1 */

/* --- score ring / badge --- */
/* getScoreColor → text-green-600 / text-yellow-600 / text-red-600 (handled above; red-600 #dc2626 on #fff = 4.6:1 kept) */
html[data-theme="light"] #root .from-gray-300 { --tw-gradient-from: #94a3b8 var(--tw-gradient-from-position); }   /* "A Premium" silver pill: white text on gray-300 was 1.6:1 */
html[data-theme="light"] #root .to-gray-500 { --tw-gradient-to: #475569 var(--tw-gradient-to-position); }
html[data-theme="light"] #root .from-yellow-400 { --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position); } /* "A+ Platinum" gold pill: white on yellow-400 was 1.6:1 */
html[data-theme="light"] #root .to-yellow-600 { --tw-gradient-to: #a16207 var(--tw-gradient-to-position); }
html[data-theme="light"] #root .from-blue-400 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position); }   /* grade pill ≥70 */
html[data-theme="light"] #root .from-red-400 { --tw-gradient-from: #dc2626 var(--tw-gradient-from-position); }    /* grade pill <70 */
/* impact pills (bg-*-100 text-*-800 border-*-300) are already light & ≥6:1 — untouched */

/* --- accessibility toolbar (fixed, .accessibility-toolbar has its own @media dark pair in the bundle) --- */
html[data-theme="light"] .accessibility-toolbar { background-color: #fff; border-color: #cbd5e1; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16); }
html[data-theme="light"] .accessibility-toolbar .text-gray-500 { color: #475569; }

/* --- focus ring (index.css *:focus-visible → ring-primary-500 #3b82f6 = 3.7:1 on white ≥ 3:1) kept --- */

/* ====================================================================================
   4. REACT FOOTER — kept dark (inline neon on inline gradient; every colour is style=). Only the seams:
   ==================================================================================== */
html[data-theme="light"] #root footer { border-top: 1px solid #0f172a; }   /* hard edge instead of neon-on-white bleed */

/* ====================================================================================
   5. INJECT SCRIPTS (results page) — their <style> carries a @media(prefers-color-scheme:dark) half
   ==================================================================================== */
/* issue-detail-inject.js: .wia-idt / #incomplete-section.wia-rev */
html[data-theme="light"] .wia-idt { color: #1b2130; }
html[data-theme="light"] .wia-idt > summary { color: #1f4fd8; }
html[data-theme="light"] .wia-idt li { background: #f4f6fa; border-color: #d9dde5; }
html[data-theme="light"] .wia-idt dt,
html[data-theme="light"] .wia-idt .more { color: #4f586b; }
html[data-theme="light"] .wia-idt code { color: #8a1c12; }
html[data-theme="light"] #incomplete-section.wia-rev { background: #fff; color: #1b2130; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0; }
html[data-theme="light"] #incomplete-section .lead { color: #4f586b; }
html[data-theme="light"] #incomplete-section .rule { border-color: #ca8a04; }
/* pack-cta-inject.js: #wia-pack-cta */
html[data-theme="light"] #wia-pack-cta { background: #fff; color: #1b2130; border-color: #1f4fd8; }
html[data-theme="light"] #wia-pack-cta .pc-btn { border-color: #1f4fd8; }
html[data-theme="light"] #wia-pack-cta .pc-btn.pri { background: #1f4fd8; color: #fff; }
html[data-theme="light"] #wia-pack-cta .pc-btn.sec { color: #1f4fd8; background: transparent; }
html[data-theme="light"] #wia-pack-cta .pc-note,
html[data-theme="light"] #wia-pack-cta th { color: #4f586b; }
html[data-theme="light"] #wia-pack-cta th,
html[data-theme="light"] #wia-pack-cta td { border-color: #d9dde5; }
html[data-theme="light"] #wia-pack-cta .pc-fail { color: #b42318; }
html[data-theme="light"] #wia-pack-cta a { color: #1f4fd8; }
/* badge-inject.js: #wia-free-badge (.t title · .d desc · .v verify link) */
html[data-theme="light"] #wia-free-badge .t { color: #1e1b4b; }
html[data-theme="light"] #wia-free-badge .d { color: #475569; }
html[data-theme="light"] #wia-free-badge .v { color: #1d4ed8; }
/* (its embed-code <textarea style="background:#0f172a;color:#93c5fd…"> stays a dark code box — inline, readable, see NOTES ③) */
/* fixer-estimate-inject.js: #wia-estimate-badge (.t .c grey · .a .r green) */
html[data-theme="light"] #wia-estimate-badge .t,
html[data-theme="light"] #wia-estimate-badge .c { color: #475569; }
html[data-theme="light"] #wia-estimate-badge .a,
html[data-theme="light"] #wia-estimate-badge .r { color: #047857; }
/* privacy-link.js appends .wia-privacy-p into the (dark) React footer with color:inherit — nothing to do */

/* ====================================================================================
   6. STATIC PAGES — shell pieces that are hard-coded (not tokens)
   ==================================================================================== */
/* -- fixer/ · pricing/ (header.global-header · .footer rgba(10,10,15,.98) · body gradient to #1a1a2e) -- */
html[data-theme="light"] .global-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: #d4d9e2;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .global-nav a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
html[data-theme="light"] .footer { background: #eef2f7; border-top-color: #d4d9e2; }
html[data-theme="light"] .footer p,
html[data-theme="light"] .footer-section p,
html[data-theme="light"] .footer-copyright { color: #475569; }
html[data-theme="light"] .page-header,
html[data-theme="light"] .site-header { background: linear-gradient(135deg, rgba(29, 78, 216, 0.06) 0%, rgba(4, 120, 87, 0.06) 100%); }
html[data-theme="light"] .pricing-model,
html[data-theme="light"] .estimate-section,
html[data-theme="light"] .form-section,
html[data-theme="light"] .flow-diagram,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .price-calculator,
html[data-theme="light"] .info-box { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .pricing-formula { background: #f1f5f9; color: #047857; }
html[data-theme="light"] .pricing-formula .highlight { color: #854d0e; }
html[data-theme="light"] .rate-table th { background: #eef2f7; }
html[data-theme="light"] .rate-table tr:hover td { background: rgba(29, 78, 216, 0.05); }
html[data-theme="light"] .breakdown-row { border-bottom-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .message.success { background: #ecfdf5; border-color: #047857; color: #065f46; }
html[data-theme="light"] .message.cancel { background: #fef2f2; border-color: #b91c1c; color: #991b1b; }
html[data-theme="light"] .auto-badge { background: #d1fae5; color: #065f46; }
html[data-theme="light"] .option-card.selected { background: #ecfdf5; }
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .calc-control input,
html[data-theme="light"] .calc-row select,
html[data-theme="light"] .calc-row input,
html[data-theme="light"] .option-card { background: #fff; border-color: #7b879c; }
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] .option-card:hover { border-color: #1d4ed8; }
html[data-theme="light"] .form-group select,
html[data-theme="light"] .calc-row select { color: #0f172a; }
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder { color: #64748b; }
html[data-theme="light"] .submit-btn { box-shadow: 0 4px 16px rgba(185, 28, 28, 0.25); }
/* pricing/: hard-coded #8b5cf6 (3.3:1 on white) → #6d28d9; #ef4444 cancel → red token; #00ffff ×2 are inline (see NOTES ③) */
html[data-theme="light"] .api-section { background: linear-gradient(135deg, rgba(109, 40, 217, 0.06) 0%, rgba(29, 78, 216, 0.06) 100%); border-color: rgba(109, 40, 217, 0.3); }
html[data-theme="light"] .api-section .section-title,
html[data-theme="light"] .calc-total,
html[data-theme="light"] .plan-price { color: #6d28d9; }
html[data-theme="light"] .plan-card:hover,
html[data-theme="light"] .plan-card.featured { border-color: #6d28d9; }
html[data-theme="light"] .plan-card .plan-badge { background: #6d28d9; }
html[data-theme="light"] .api-badge,
html[data-theme="light"] .pricing-btn.api { background: linear-gradient(90deg, #6d28d9, #1d4ed8); }
html[data-theme="light"] .pricing-btn.consulting { background: linear-gradient(90deg, #1d4ed8, #6d28d9); }
html[data-theme="light"] .pricing-btn.certification { background: linear-gradient(90deg, #047857, #0f766e); }
html[data-theme="light"] .calc-result { background: rgba(109, 40, 217, 0.08); }
html[data-theme="light"] .score-req { background: #dbeafe; color: #1e40af; }
html[data-theme="light"] .format-tags span { background: #dbeafe; color: #1e40af; }

/* -- docs/ (sidebar rgba(10,10,15,.98) · pre #0d1117/#e2e8f0 · endpoint header rgba(0,0,0,.3)) — code blocks go LIGHT -- */
html[data-theme="light"] .sidebar { background: #fff; border-right-color: #d4d9e2; }
html[data-theme="light"] .sidebar a:hover,
html[data-theme="light"] .sidebar a.active { background: #ede9fe; color: #5b21b6; }
html[data-theme="light"] .method-post { background: #fef3c7; color: #92400e; }
html[data-theme="light"] .method-get { background: #d1fae5; color: #065f46; }
html[data-theme="light"] .endpoint { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .endpoint-header { background: #eef2f7; }
/* scoped to .docs-layout so the results page's <code class="text-red-600"> node snippets keep their own colour */
html[data-theme="light"] .docs-layout pre { background: #f1f5f9; border-color: #d4d9e2; color: #0f172a; }
html[data-theme="light"] .docs-layout code { background: #ede9fe; color: #4c1d95; }
html[data-theme="light"] .docs-layout pre code { background: transparent; color: inherit; }

/* -- standards/ (header is an INLINE style= block, nav .topnav-links, neon inline spans) -- */
/* INLINE: <header style="background:rgba(15,23,42,0.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)…"> */
html[data-theme="light"] header[style*="rgba(15,23,42"] { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .topnav-links a:hover,
html[data-theme="light"] .topnav-links a.active { background: #eef2f7; color: #0f172a; }
html[data-theme="light"] .topnav-links a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
/* INLINE: 13× <a style="color:#00ffff;text-shadow:0 0 8px rgba(0,255,255,.5)"> (standards + pricing footers) → teal 700, no glow */
html[data-theme="light"] [style*="color:#00ffff"] { color: #0e7490 !important; text-shadow: none !important; }
/* INLINE: 13× <span style="…color:#4ade80"> pills / lines (standards "지원" marks) → green 700 */
html[data-theme="light"] [style*="color:#4ade80"] { color: #15803d !important; }
html[data-theme="light"] [style*="rgba(74,222,128,0.15)"] { background: #dcfce7 !important; border-color: #86efac !important; }
html[data-theme="light"] .hero-badges span { background: #fff; }
html[data-theme="light"] .check-table thead,
html[data-theme="light"] .grade-table thead { background: #eef2f7; }
html[data-theme="light"] .check-table td,
html[data-theme="light"] .grade-table td,
html[data-theme="light"] .grade-table th { border-bottom-color: #e2e8f0; }
html[data-theme="light"] .check-table tr:hover { background: rgba(109, 40, 217, 0.05); }
html[data-theme="light"] .sev-critical { background: #fee2e2; color: #991b1b; }
html[data-theme="light"] .sev-major { background: #fef3c7; color: #92400e; }
html[data-theme="light"] .sev-minor { background: #dbeafe; color: #1e40af; }
html[data-theme="light"] .cat-header.structure { background: #ecfdf5; }
html[data-theme="light"] .cat-header.metadata { background: #f5f3ff; }
html[data-theme="light"] .cat-header.content { background: #fffbeb; }
html[data-theme="light"] .cat-header.navigation { background: #eff6ff; }
html[data-theme="light"] .format-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
/* grade badges: white on #f59e0b (B) / #6b7280 (C) were 2.1:1 / 4.7:1 → darker fills, same hue */
html[data-theme="light"] .grade-badge.grade-ap { background: linear-gradient(135deg, #047857, #065f46); }
html[data-theme="light"] .grade-badge.grade-a { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
html[data-theme="light"] .grade-badge.grade-b { background: linear-gradient(135deg, #b45309, #92400e); }
html[data-theme="light"] .grade-badge.grade-c { background: linear-gradient(135deg, #4b5563, #374151); }
html[data-theme="light"] .grade-badge.grade-f { background: linear-gradient(135deg, #dc2626, #b91c1c); }
html[data-theme="light"] .cta-box { background: linear-gradient(135deg, #fff, #f5f3ff); border-color: #c4b5fd; }
html[data-theme="light"] .cta-btn:hover { box-shadow: 0 8px 20px rgba(109, 40, 217, 0.25); }

/* -- verify/ (header rgba(15,23,42,.98) hard-coded · footer #7d8ba1 · lightbox stays dark) -- */
html[data-theme="light"] body > header:not(.wia-topnav):not(.global-header) {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: #d4d9e2;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
html[data-theme="light"] body > footer { color: #475569; }
html[data-theme="light"] .badge-zoom:focus-visible { outline-color: #1d4ed8; }
html[data-theme="light"] .lb-close { background: #fff; color: #0f172a; border-color: #7b879c; }
html[data-theme="light"] .lb-close:hover { background: #eef2f7; }
/* verify's language button is inline style= on var(--bg3)/var(--border)/var(--text) → follows the tokens, nothing to add */

/* -- guide/ · checks/ (a{color:#93b4fb} hard-coded) -- */
html[data-theme="light"] .wrap a { color: #1d4ed8; }
html[data-theme="light"] .wrap a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
html[data-theme="light"] .wrap table,
html[data-theme="light"] .wrap .card,
html[data-theme="light"] .wrap .toc,
html[data-theme="light"] .wrap .stat,
html[data-theme="light"] .wrap .note { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .wrap .cta { color: #fff; }

/* ====================================================================================
   7. SHARED — scrollbar/focus on the hand shell · language modal (white card already; only its hover/footer tints)
   ==================================================================================== */
html[data-theme="light"] .wia-skip-link:focus { outline: 3px solid #1d4ed8; outline-offset: 2px; }
html[data-theme="light"] .wia-nav-modal-close:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }