/* ============================================================================
   W3L 文章閱讀區淺色選項（H24-BETA-REDESIGN-W3L，2026-10-28，beta 對照用）
   - 只在 html[data-read-theme="light"] 生效；預設深色、不跟隨系統。
   - 範圍（W5S 2026-10-28 起）：整個閱讀外框 .h24-reader（hero 外圍、chips、intro、章節條、正文、側欄、文末）＋頁底。
     兩版 ?light=page|card（.h24-reader[data-light]，staging 才讀，預設 page）：
       page＝頁底 --read-page-bg #e9e5da、外框 #f4f1e8；card＝頁底維持深色 --bg-base、外框 #f4f1e8。兩版幾何完全相同。
     外框內只有一個底色（--bg-read 在範圍內改指 --read-bg），正文不再是另一張卡 → 沒有深淺條帶。
     header 維持深色；疊圖標題（桌機 full／cover）的遮罩與白字寫死，不跟 token。
   - 做法：在範圍元素上把深色 token 改指向 design-tokens.css 的 --read-*（深色 token 本身的值不動），
     既有規則（style.css／w3-structure.css／w3-reading.css）因為都走 var() 會自動跟著換色。
     token 改寫用 :where() 包住前綴、權重壓到最低：文章自帶 <style> 的深色區塊（寫死色值的普通 selector）
     保持原樣，不會被蓋成深字。只有少數寫死淺色字的站內元件才用一般權重個別覆蓋。
   - 只改顏色：本檔不得出現任何影響幾何的屬性（寬高、margin、padding、border-width、font-size…）。
     例外只有切換鈕本身（.h24-read-theme，深淺兩態都存在，幾何相同）。
   - var() 都帶 fallback：design-tokens.css 走 Autoptimize 非同步載入，首幀時 --read-* 可能尚未定義。
   ============================================================================ */

/* ---------- 1. 範圍內 token 改指向淺色色票 ---------- */
:where(html[data-read-theme="light"]) :where(.h24-reader) {
  --bg-read: var(--read-bg, #f4f1e8);
  --bg-surface: var(--read-surface, #fbfaf6);
  --bg-raised: var(--read-raised, #ebe7dc);
  --c-text: var(--read-text, #1f2937);
  --c-text-2: var(--read-text-2, #4b5563);
  --c-text-3: var(--read-text-3, #5f6673);
  --c-heading: var(--read-heading, #111827);
  --c-blue: var(--read-link, #075ba8);
  --c-blue-hover: var(--read-link-hover, #053f78);
  --c-blue-soft: rgba(7, 91, 168, 0.10);
  --c-pink: var(--read-accent, #b3183f);
  --c-pink-hover: #8f1233;
  --c-pink-soft: rgba(179, 24, 63, 0.10);
  --border-1: var(--read-border, #d9d4c7);
  --border-2: var(--read-border, #d9d4c7);
  --border-strong: var(--read-text-3, #5f6673);
  --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.08);
  --shadow-raised: 0 4px 16px rgba(17, 24, 39, 0.12);
  --glow-blue: 0 0 0 1px rgba(7, 91, 168, 0.45), 0 2px 10px rgba(7, 91, 168, 0.18);
  --glow-pink: 0 0 0 1px rgba(179, 24, 63, 0.45), 0 2px 10px rgba(179, 24, 63, 0.18);
  color: var(--c-text);
}

/* ---------- 1b. 文章自帶深色區塊（JS 對比守門標記）---------- */
/* html 就是 :root，這裡的 var(--c-*) 取到的是深色原值；存成 --h24-dk-* 給深色孤島還原用 */
:where(html[data-read-theme="light"]) {
  --h24-dk-bg-read: var(--bg-read, #171a21);
  --h24-dk-bg-surface: var(--bg-surface, #1b2230);
  --h24-dk-bg-raised: var(--bg-raised, #232c3d);
  --h24-dk-text: var(--c-text, #e6e9ef);
  --h24-dk-text-2: var(--c-text-2, #aeb6c4);
  --h24-dk-text-3: var(--c-text-3, #7e8799);
  --h24-dk-heading: var(--c-heading, #ffffff);
  --h24-dk-blue: var(--c-blue, #1a9fff);
  --h24-dk-blue-hover: var(--c-blue-hover, #66c0f4);
  --h24-dk-pink: var(--c-pink, #e02d55);
  --h24-dk-border-1: var(--border-1, rgba(255, 255, 255, 0.08));
  --h24-dk-border-2: var(--border-2, rgba(255, 255, 255, 0.14));
}
/* 自帶深底的區塊（.h24-read-island）：token 還原成深色，字色權重 0，作者自己寫的色值照樣生效 */
:where(html[data-read-theme="light"]) .h24-reader .h24-read-island {
  --bg-read: var(--h24-dk-bg-read);
  --bg-surface: var(--h24-dk-bg-surface);
  --bg-raised: var(--h24-dk-bg-raised);
  --c-text: var(--h24-dk-text);
  --c-text-2: var(--h24-dk-text-2);
  --c-text-3: var(--h24-dk-text-3);
  --c-heading: var(--h24-dk-heading);
  --c-blue: var(--h24-dk-blue);
  --c-blue-hover: var(--h24-dk-blue-hover);
  --c-pink: var(--h24-dk-pink);
  --border-1: var(--h24-dk-border-1);
  --border-2: var(--h24-dk-border-2);
}
:where(html[data-read-theme="light"] .h24-reader .h24-read-island) {
  color: var(--c-text);
}
/* 自帶淺字卻落在淺底上的元素（.h24-read-fixfg）：改深字 */
html[data-read-theme="light"] .h24-reader .h24-read-fixfg {
  color: var(--read-text, #1f2937) !important;
}

/* ---------- 2. 底色：外框一個底色＋頁底一個底色（兩版只差頁底，幾何相同） ---------- */
html[data-read-theme="light"] .h24-reader {
  background-color: var(--read-bg, #f4f1e8);
  border-color: var(--read-border, #d9d4c7);
}
/* page 版：頁底轉淺；card 版：頁底維持深色（不寫規則＝沿用 --bg-base） */
html[data-read-theme="light"] body:has(.h24-reader[data-light="page"]),
html[data-read-theme="light"] .h24-single-main:has(.h24-reader[data-light="page"]) {
  background-color: var(--read-page-bg, #e9e5da);
}
/* 正文、章節條、側欄外層、文末容器都是外框同色（透過 --bg-read）；側欄 widget／資訊表／卡片走 --read-surface */
/* 閱讀進度條（在外框外、fixed）：淺色用 --read-accent */
html[data-read-theme="light"] .h24-progress__bar { background: var(--read-accent, #b3183f); }

/* ---------- 3. 正文細節 ---------- */
/* 正文連結：與正文色差 < 3:1，淺色下一律加底線（不影響幾何） */
html[data-read-theme="light"] .h24-reader .entry-content :is(p, li, td, th, dd, blockquote):not(.has-link-color):not(.has-background) a:not(.wp-element-button):not([class*="btn"]):not([class*="button"]):not(.hgame-tag-link):not(.hgame-tag-pill) {
  color: var(--c-blue);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
html[data-read-theme="light"] .h24-reader .entry-content :is(p, li, td, th, dd, blockquote):not(.has-link-color):not(.has-background) a:not(.wp-element-button):not([class*="btn"]):not([class*="button"]):not(.hgame-tag-link):not(.hgame-tag-pill):hover {
  color: var(--c-blue-hover);
}
:where(html[data-read-theme="light"]) .h24-reader :where(code, kbd, pre) {
  background-color: var(--read-code-bg, #ece8dd);
  color: var(--read-text, #1f2937);
}
:where(html[data-read-theme="light"]) .h24-reader :where(blockquote) {
  border-left-color: var(--read-blockquote-bar, #b3183f);
}
/* 站內共用元件（站內 inline <style> 寫死給深底的淺字），淺色下改深字 */
/* 資訊表：th 走 --read-raised、td 走 --read-surface（外框內只允許外框色與這兩階卡面，C9） */
html[data-read-theme="light"] .h24-reader .h24-info-table th {
  color: var(--c-heading);
  background-color: var(--read-raised, #ebe7dc);
}
html[data-read-theme="light"] .h24-reader .h24-info-table td {
  background-color: var(--read-surface, #fbfaf6);
}
/* hgame-tagger 正文末「詳細分類」卡（外掛 inline CSS 寫死深色漸層）：淺色時改走卡面色，避免外框內出現深色條帶 */
html[data-read-theme="light"] .h24-reader .hgame-detail-tags {
  background: var(--read-surface, #fbfaf6);
  border-color: var(--read-border, #d9d4c7);
  color: var(--read-text, #1f2937);
}
html[data-read-theme="light"] .h24-reader .hgame-detail-title { color: var(--read-heading, #111827); border-bottom-color: var(--read-border, #d9d4c7); }
html[data-read-theme="light"] .h24-reader .hgame-detail-dim { color: var(--read-text-2, #4b5563); border-left-color: var(--read-text-3, #5f6673); }
html[data-read-theme="light"] .h24-reader .hgame-tag-link {
  color: var(--read-link, #075ba8) !important;
  background: var(--read-raised, #ebe7dc);
  border-color: var(--read-border, #d9d4c7);
}
html[data-read-theme="light"] .h24-reader .hgame-tag-link:hover { color: #fff !important; background: var(--read-link, #075ba8); border-color: var(--read-link, #075ba8); }
html[data-read-theme="light"] .h24-reader .hgame-detail-more summary,
html[data-read-theme="light"] .h24-reader .hgame-detail-more[open] summary {
  color: var(--read-text-2, #4b5563);
  background: var(--read-raised, #ebe7dc);
  border-color: var(--read-text-3, #5f6673);
}
html[data-read-theme="light"] .h24-reader .hgame-detail-cta { border-top-color: var(--read-border, #d9d4c7); }
html[data-read-theme="light"] .h24-reader .h24-info-table :is(th, td) {
  border-color: var(--border-2);
}
html[data-read-theme="light"] .h24-reader :is(.h24-media-caption, .h24-split-media figcaption, .entry-content figcaption, .wp-caption-text) {
  color: var(--c-text-2);
}
html[data-read-theme="light"] .h24-reader .cps-main-title {
  color: var(--read-text-2, #4b5563);
}

/* ---------- 4. TOC（原位預覽與章節條面板）---------- */
html[data-read-theme="light"] .h24-reader #ez-toc-container {
  background-color: var(--read-surface, #fbfaf6);
  border-color: var(--read-border, #d9d4c7);
  color: var(--read-text, #1f2937);
}
html[data-read-theme="light"] .h24-reader #ez-toc-container :is(.ez-toc-title, p.ez-toc-title) {
  color: var(--read-heading, #111827);
}
html[data-read-theme="light"] .h24-reader #ez-toc-container a,
html[data-read-theme="light"] .h24-reader #ez-toc-container a:visited {
  color: var(--read-link, #075ba8);
}
html[data-read-theme="light"] .h24-reader #ez-toc-container a:hover {
  color: var(--read-link-hover, #053f78);
}
html[data-read-theme="light"] .h24-reader .h24-chapterpanel a { color: var(--read-text-2, #4b5563); }
html[data-read-theme="light"] .h24-reader .h24-chapterpanel a:hover,
html[data-read-theme="light"] .h24-reader .h24-chapterpanel a.is-current { color: var(--read-link, #075ba8); }

/* ---------- 5. 文末元件 ---------- */
html[data-read-theme="light"] .h24-reader .h24-readnext__reason {
  color: var(--read-link, #075ba8);
  background-color: rgba(7, 91, 168, 0.10);
}
html[data-read-theme="light"] .h24-reader .h24-readnext__reason--latest {
  color: var(--read-text-2, #4b5563);
  background-color: rgba(17, 24, 39, 0.06);
}
html[data-read-theme="light"] .h24-reader .h24-readnext__link:hover,
html[data-read-theme="light"] .h24-reader .h24-readnext__main-title a:hover {
  color: var(--read-link, #075ba8);
}
/* 按鈕／輸入框外框：非文字 ≥ 3:1 */
html[data-read-theme="light"] .h24-reader :is(.h24-share__btn, .h24-toc-more, .h24-chapterbar__btn, input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea) {
  border-color: var(--read-text-3, #5f6673);
}
html[data-read-theme="light"] .h24-reader :is(.h24-share__btn:hover, .h24-share__btn:focus-visible) {
  color: #fff;
}
/* 焦點環 */
html[data-read-theme="light"] .h24-reader :is(a, button, summary, input, textarea):focus-visible {
  outline-color: var(--read-link, #075ba8);
}
/* 手機 CPS 外框：圖片不加任何濾鏡（贊助素材原樣） */
html[data-read-theme="light"] .h24-reader .h24-cps-mobile {
  background-color: var(--read-surface, #fbfaf6);
}

/* ---------- 6. 切換鈕（header 內，深淺兩態同尺寸；header 本身維持深色）---------- */
.h24-read-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 0 var(--sp-2) 0 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  cursor: pointer;
}
.h24-read-theme:hover { color: var(--c-blue); border-color: var(--c-blue); }
.h24-read-theme:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.h24-read-theme svg { display: block; }
.h24-read-theme .h24-read-theme__moon { display: none; }
html[data-read-theme="light"] .h24-read-theme .h24-read-theme__sun { display: none; }
html[data-read-theme="light"] .h24-read-theme .h24-read-theme__moon { display: block; }
/* 手機：左側工具組寬度是站名閃避區的計算基準（112px），不能再加寬 →
   切換鈕改絕對定位到站名與語言鈕之間的空隙（390：站名右緣 277、語言鈕左緣 319）。 */
@media (max-width: 860px) {
  .h24-read-theme {
    position: absolute;
    top: 50%;
    right: 76px;
    width: 32px;
    height: 32px;
    margin: -16px 0 0;
  }
  .h24-site-header:has(.h24-primary-nav.is-open) .h24-read-theme,
  .h24-site-header:has(.h24-header-search:not([hidden])) .h24-read-theme {
    top: calc(12px + 22px);
  }
}

/* 標籤列連結：與正文色差 < 3:1，淺色下加底線 */
html[data-read-theme="light"] .h24-reader .h24-single__tags a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* 桌機疊圖標題（full／cover、未回流）：標題列壓在深色遮罩上，區塊內 token 還原深色（收藏鈕、分類 chip 跟著深色） */
@media (min-width: 769px) {
  :where(html[data-read-theme="light"]) .h24-reader:is([data-hero="full"], [data-hero="cover"]):not(.h24-reader--title-below) .h24-reader__titlebox {
    --bg-read: var(--h24-dk-bg-read);
    --bg-surface: var(--h24-dk-bg-surface);
    --bg-raised: var(--h24-dk-bg-raised);
    --c-text: var(--h24-dk-text);
    --c-text-2: var(--h24-dk-text-2);
    --c-heading: var(--h24-dk-heading);
    --c-blue: var(--h24-dk-blue);
    --c-blue-hover: var(--h24-dk-blue-hover);
    --border-1: var(--h24-dk-border-1);
    --border-2: var(--h24-dk-border-2);
  }
}

/* ---------- W5I 資訊層：遊戲資料卡與一致化元件的淺色覆蓋（只換色，不改幾何） ---------- */
html[data-read-theme="light"] .h24-reader .h24-gamefacts {
  background: var(--read-surface, #fbfaf6);
  border-color: var(--read-border, #d9d4c7);
  color: var(--read-text, #1f2937);
}
html[data-read-theme="light"] .h24-reader .h24-gamefacts__title,
html[data-read-theme="light"] .h24-reader .h24-gamefacts__row dt { color: var(--read-text-2, #4b5563); }
html[data-read-theme="light"] .h24-reader .h24-gamefacts__row dd { color: var(--read-text, #1f2937); }
html[data-read-theme="light"] .h24-reader .h24-gamefacts__store { color: var(--read-link, #075ba8); }
html[data-read-theme="light"] .h24-reader a.h24-gamefacts__store:hover { color: var(--read-link-hover, #053f78); }
html[data-read-theme="light"] .h24-reader .h24-gamefacts__sep { color: var(--read-text-3, #5f6673); }
html[data-read-theme="light"] .h24-reader .entry-content details:not(.h24-comments):not(.hgame-detail-more) { border-color: var(--read-border, #d9d4c7); }
html[data-read-theme="light"] .h24-reader :is(.h24-media-caption, .h24-split-media figcaption, .h24-img-grid-item figcaption, .entry-content figcaption, .wp-caption-text) {
  color: var(--read-text-2, #4b5563);
}
html[data-read-theme="light"] .h24-reader .h24-info-table td[data-label]::before { color: var(--read-text-2, #4b5563); }

/* ---------- home (HOME3-H1)：首頁淺色（2026-10-29）----------
   只改 #main.h24-home 內部（卡片底、文字、區塊分隔線、CPS 標題）；header／footer 與文章頁一致維持深色。
   做法同第 1 段：在 #main.h24-home 上把深色 token 改指向既有 --read-*（不新增 token），
   css/home*.css 的規則都走 var() 自動跟著換色。本段同步載入，背景直接寫在這裡，淺色使用者首幀不閃深色。
   只改顏色，不得出現幾何屬性。 */
html[data-read-theme="light"] #main.h24-home {
  --bg-base: var(--read-page-bg, #e9e5da);
  --bg-read: var(--read-bg, #f4f1e8);
  --bg-surface: var(--read-surface, #fbfaf6);
  --bg-raised: var(--read-raised, #ebe7dc);
  --c-text: var(--read-text, #1f2937);
  --c-text-2: var(--read-text-2, #4b5563);
  --c-text-3: var(--read-text-3, #5f6673);
  --c-heading: var(--read-heading, #111827);
  --c-blue: var(--read-link, #075ba8);
  --c-blue-hover: var(--read-link-hover, #053f78);
  --c-pink: var(--read-accent, #b3183f);
  --border-1: var(--read-border, #d9d4c7);
  --border-2: var(--read-border, #d9d4c7);
  color: var(--read-text, #1f2937);
  background: var(--read-page-bg, #e9e5da);
}
html[data-read-theme="light"] #main.h24-home :is(h1, h2, h3) { color: var(--read-heading, #111827); }
html[data-read-theme="light"] #main.h24-home .h24-card { background: var(--read-surface, #fbfaf6); }
html[data-read-theme="light"] #main.h24-home .h24-h-feature .h24-card { background: var(--read-bg, #f4f1e8); }
html[data-read-theme="light"] #main.h24-home .h24-h-section { box-shadow: 0 -1px 0 var(--read-border, #d9d4c7); }
html[data-read-theme="light"] #main.h24-home .cps-main-title { color: var(--read-heading, #111827); }
html[data-read-theme="light"] #main.h24-home .h24-cps-seed { background: var(--read-raised, #ebe7dc); }
html[data-read-theme="light"] #main.h24-home .h24-h-chips a { color: var(--read-text, #1f2937); background: var(--read-surface, #fbfaf6); border-color: var(--read-border, #d9d4c7); }
html[data-read-theme="light"] #main.h24-home :is(.h24-h-store, .h24-h-about) { border-color: var(--read-border, #d9d4c7); }
html[data-read-theme="light"] #main.h24-home .h24-h-feature .h24-h-read { color: var(--read-accent-text, #fff); background: var(--read-accent, #b3183f); border-color: var(--read-accent, #b3183f); }
/* home hero under light (主線 2026-10-29)：主推遮罩與標題維持深底白字，不跟 --bg-base 變淺（R2：淺色洗白主視覺） */
html[data-read-theme="light"] #main.h24-home .h24-h-feature .h24-card { background: #12151c; }
html[data-read-theme="light"] #main.h24-home .h24-h-feature .h24-card__thumb::after { background: linear-gradient(0deg, #12151c, transparent 95%), linear-gradient(90deg, #12151c, transparent); }
html[data-read-theme="light"] #main.h24-home .h24-h-feature :is(.h24-card__title, .h24-card__title a, h2) { color: #fff; }
html[data-read-theme="light"] #main.h24-home .h24-h-feature .h24-h-meta { color: #c9ced8; }