/* =========================================================
   inner-light.css — 內頁淺色化覆蓋層
   ---------------------------------------------------------
   內頁（news / wr 等模組頁）的版型完全沿用骨架範本 btp_rwd_5_c_a_v19
   的 custom.css + article.css + article-orient.css。那三支是「TITAN TECH
   深藍太空色系」，本檔負責把它們改成 c_c 首頁的淺色系（雪白底 + 天空藍強調色）。
   （2026-08-11 之前是 c_b 的米白底 + 橄欖綠，該版色票見下方對照表的「原 c_b」欄。）

   ⚠ 維護原則：**不要去改 custom.css / article.css / article-orient.css**，
      顏色一律在本檔覆蓋。這三支保持與 c_a_v19 一字不差，日後 c_a 更新版型
      可直接覆蓋複製，不必重做淺色化。

   載入順序（見 theme.tpl，僅內頁載入）：
     bootstrap → bootstrap-icons → xoops → custom → article → article-orient
     → style.css（c_b header/footer，壓過 c_a 的元素選擇器）
     → inner-light.css（本檔，最後覆蓋顏色）

   色票對應（c_a 深藍 → c_c 冷色淺調。2026-08-11 由 c_b 暖色改為 c_c）：
     --bg           #0A1628 → #f4f7fb  雪白（＝首頁 .news / .feature 區段底，原 c_b #f2f2ec 米白）
     --bg-2         #0E1D33 → #eef2f7  抬升面（＝首頁 .shop / .faq 區段底，原 c_b #ffffff）
     --fg-1         #E8EEF7 → #0b1119  主文字（＝--color-ink，原 c_b #141414）
     --fg-2         #7E8FA8 → rgba(11,17,25,.62)  次要（＝首頁 .shop-lead-text，原 c_b #5f6b6f 暖灰）
     --fg-3         #3A4A63 → rgba(11,17,25,.38)  最弱（＝首頁 .shop-cap-orig，原 c_b #a8a49a 暖灰）
     --border       #2A3A55 → rgba(11,17,25,.14)（原 c_b #e2e0d6）
     --accent       #4DB8FF → #1AA2EB  天空藍（＝--color-accent，原 c_b #77835c 橄欖綠）
     --accent-ink   （新增）  #0070B5  加深階，見下方說明
   ========================================================= */

/* ---------- 1. 設計 token 換色 ----------
   custom.css / article.css 絕大多數顏色都走 var(--token)，換掉 token 即整體淺色化。

   🔴 --accent 為什麼要拆兩階（2026-08-11 新增）：
      --accent (#1AA2EB) 是首頁為**深底**設計的色，對深底 6.38:1 ✅，
      但對本檔的淺色內容區只有 **2.5:1**，當內文文字不合格（AA 需 4.5:1）。
      故：
        --accent      → 裝飾用（框線、圖示、hover 底、按鈕實底、底線）
        --accent-ink  → 文字用（內文連結、小字、表單焦點、option:checked）
      改本檔任何顏色時，先問「這是文字還是裝飾」，再決定用哪一個。 */
:root {
  --bg:        #f4f7fb;
  --bg-2:      #eef2f7;

  --fg-1:      #0b1119;
  --fg-2:      rgba(11,17,25,0.62);
  --fg-3:      rgba(11,17,25,0.38);

  --border:        rgba(11,17,25,0.14);
  --border-strong: rgba(11,17,25,0.25);

  --accent:       #1AA2EB;   /* 裝飾用　oklch(.68 .15 240)　淺底 2.5:1 ⚠ 不可作文字 */
  --accent-ink:   #0070B5;   /* 文字用　oklch(.52 .15 240)　淺底 4.7~5.3:1 ✅ */
  --accent-press: #00589B;   /* 按下態　oklch(.44 .15 240) */
  --accent-wash:  rgba(26,162,235,0.10);   /* hover 底、選取列 */

  --overlay-scrim: rgba(11,17,25,0.45);
  --overlay-menu:  rgba(244,247,251,0.97);

  /* c_a 原設 --nav-h:72px。c_c 的 header 高度由 style.css 的 --header-h 定為 84px，
     c_a 的版型用 calc(var(--nav-h) + N) 來避開 fixed header，故一併校正對齊。
     （2026-08-07 換底 demo_C：原 c_b header 實測 104px → 改 84px。） */
  --nav-h: 84px;
}

/* ---------- 1-1. 內容區的 accent ----------
   全站強調色 2026-08-11 由橄欖綠 #77835c 改為天空藍 #1AA2EB（＝首頁 --color-accent）。
   （沿革：金棕 #8a6d47 → 2026-07-15 橄欖綠 #77835c → 2026-08-11 天空藍 #1AA2EB）
   此處在 `.df-inner`（模組內容區 <main>）明確宣告一次，讓內容區不必依賴 body
   `.sc-root-div-1` 的宣告 —— 那條是為首頁元件設的，掛在 body 上（權重贏過上面的 :root）。
   兩者現在同值，故本區塊實際上不改變任何顏色，但保留可讓「內容區用什麼 accent」一目了然，
   日後若要讓內頁走與首頁不同的強調色，改這裡即可。

   ⚠️ 若日後真要讓內頁 accent 與首頁不同，**只能掛在 `.df-inner`，不可掛在 body**：
      footer 的社群圖示 hover 是用 `var(--accent)` 上色，掛 body 會連內頁 footer 一起變色，
      與首頁不一致。掛 .df-inner 則 header/footer 仍沿用 body 的 --accent（同首頁）。 */
.df-inner {
  --accent:       #1AA2EB;
  --accent-ink:   #0070B5;
  --accent-press: #00589B;
  --accent-wash:  rgba(26,162,235,0.10);

  /* 🔴 style.css 2284 行寫死 `.df-inner { color:#141414 }`（c_b 的中性黑），
     權重與本條相同但先載入 → 若不覆蓋，內容區文字會停在 #141414，
     而不是上面 :root 設的 --fg-1 #0b1119（＝首頁 --color-ink 的冷黑）。
     兩者肉眼差異極小，但既然目標是「與首頁同色」，這裡交還給 token。
     ⚠ 依本檔的維護原則（顏色一律在 inner-light.css 覆蓋），不去改 style.css。 */
  color: var(--fg-1);
}

/* ---------- 1-1b. 內頁的 body 底色（🔴 階段 9 修正的回歸缺陷）----------
   c_b 是靠 `<body class="sc-root-div-1">` 提供內頁米白底
   （c_b 的 style.css 365 行：`background:#f2f2ec; color:#181818` —— 這是 **c_b 檔案裡的原值**，
    不是本佈景的值，勿隨本檔換色一起改）。
   **階段 0 換底 demo_C 時把 sc-root-div-1 從 <body> 移除了**，於是內頁的底色掉回
   style.css 86 行的 `body#top { background: var(--color-ink) }`（#0b1119 深藍黑），
   而 `.df-inner` 又設 `color:#141414`（近黑）→ **深底深字**。

   custom.css 67 行雖然有 `body { background-color: var(--bg) }`（米白），但權重只有
   (0,0,1)，**壓不過 body#top 的 (1,0,1)**（ID 選擇器），所以一直沒生效。
   → 這裡用 `body#top.df-inner-page`，權重 (1,1,1)，穩定勝過 (1,0,1)。

   ⚠️ **只覆蓋 background，不動 color**：body 的 `color: var(--color-snow)`（亮色）要留給
      header / footer 繼承（它們是深色實底）。內容區的文字色原由 style.css 的
      `.df-inner { color:#141414 }` 負責 —— 2026-08-11 已在上方 §1-1 用
      `.df-inner { color: var(--fg-1) }` 交還給 token（#0b1119），全部內頁內容都在
      `<main class="df-inner">` 裡面。 */
body#top.df-inner-page { background: var(--bg); }

/* ---------- 1-2. 內頁的 header ----------
   `.site-header` 在 style.css 是「半透明漸層 + 白字」，因為首頁第一屏是深色 hero 大圖
   （1404 行 `linear-gradient(rgba(6,10,16,.55) → transparent)`）。內頁背景是米白，
   白字會糊掉，故內頁的 header 直接給深色實底（body 的 .df-inner-page 由 theme.tpl 在
   有模組內容時輸出）。

   ⚠️ 本條權重 (0,2,0) 與 style.css 的 `.site-header.is-scrolled` 相同，但 inner-light.css
      後載入 → 本條勝出。效果是**內頁 header 不論捲動與否都是實底**，這正是要的行為。
   ⚠️ 色值取 `.site-footer` 的 #0e1626，讓內頁的頁首與頁尾同色。 */
.df-inner-page .site-header {
  background: #0e1626;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- 1-3. 還原 header / footer 的連結顏色 ----------
   ⚠️ 這是內頁載入 custom.css 後最容易被忽略的副作用：
   custom.css 有三條**全域**連結規則（1884~1886 行）：
       a, a:link  { color: var(--accent); }
       a:visited  { color: var(--accent); }
       a:hover,a:focus { color: var(--accent-press); }
   `a:link` 的權重是 (0,1,1)，**比佈景 header/footer 那些 class 規則 (0,1,0) 還高**，
   所以就算 style.css 後載也蓋不掉 —— 內頁的主選單、頁尾聯絡值、兩個 logo
   全被染成 accent（現為天空藍），與首頁不一致。

   修法：用 `.df-inner-page` 前綴把顏色照 style.css 的原值重寫一次，權重升到 (0,2,0)，
   穩定勝過 (0,1,1)。**值必須與 style.css 中同名 class 保持一致**，
   日後改了 header/footer 的連結配色，這裡要同步。

   ⚠️ **只列「權重 (0,1,0) 會輸」的那些**。以下這些是 (0,1,1)，與 a:link 平手、
      靠 style.css 後於 custom.css 載入而勝出，**不需要也不應該在這裡重複**：
        .footer-col a／.footer-social a／.footer-credit a

   🔴 **但底下那組「狀態還原」不可省** —— 這是 2026-08-11 用 CDP 實測抓到的：
      本節的基礎規則（如 `.df-inner-page .main-nav-link`）權重是 (0,2,0)，
      **與 style.css 的 `.main-nav-link.is-current`／`.main-nav-link:hover`／
      `.sub-link:hover`／`.footer-contact-item:hover .footer-contact-value` 完全同權重**，
      而 inner-light.css 後載入 → **基礎規則會反過來把那些狀態色蓋掉**，
      造成內頁的「目前頁反白」與 hover 全部失效（實測 navCurrent 與 navLink 同色）。
      → 故必須把這些狀態也加 `.df-inner-page` 前綴重寫一次，升到 (0,3,0) 才蓋得回來。
      ⚠ **日後若在本節新增任何基礎連結規則，務必同步檢查它是否壓掉了對應的
        `:hover` / `.is-current` / `[aria-*]` 等狀態規則。**

   （階段 8 之前這一節指向的是 c_b 的 .sc-*／.df-lang*／.df-social 等 13 個 class，
     它們已隨階段 0/1/8 的改寫全部消失，整節在階段 9 依新 class 重寫。） */

/* --- 基礎色（權重 (0,2,0)，勝過 custom.css 的 a:link (0,1,1)） --- */

/* header：主選單第 1 層與第 2/3 層 */
.df-inner-page .main-nav-link,
.df-inner-page .sub-link { color: var(--color-snow-dim); }

/* header / footer：兩個 logo 連結（本身不設 color，靠繼承外殼的亮色） */
.df-inner-page .site-logo,
.df-inner-page .footer-logo { color: inherit; }

/* footer：聯絡三列的值（電話／信箱／地址） */
.df-inner-page .footer-contact-value { color: var(--color-snow); }

/* --- 狀態還原（權重 (0,3,0)，蓋回被上面壓掉的 hover / is-current） ---
   值必須與 style.css 中同名規則一致：
     .main-nav-link:hover / .is-current      → var(--color-snow)（1467~1468 行）
     .sub-link:hover                          → var(--color-snow)（1545 行）
     .footer-contact-item:hover .footer-…value→ var(--color-accent)（1213 行） */
.df-inner-page .main-nav-link:hover,
.df-inner-page .main-nav-link.is-current,
.df-inner-page .sub-link:hover { color: var(--color-snow); }

.df-inner-page .footer-contact-item:hover .footer-contact-value,
.df-inner-page a.footer-contact-value:hover { color: var(--color-accent); }

/* ---------- 1-4. 擋掉 c_a 骨架 CSS 的「同名 class」滲透 ----------
   🔴 2026-08-11 用 CDP 逐屬性比對首頁 vs 內頁的外殼，才發現這一整類問題。

   c_a_v19 的 custom.css 自己也有一套頁尾，**class 名稱與 demo_C 大量重疊**
   （`.footer-bottom` / `.footer-heading` / `.footer-logo` / `.footer-social`）。
   兩邊權重都是 (0,1,0)，style.css 後於 custom.css 載入，所以「**兩邊都有設**」的屬性
   由 style.css 勝出、沒問題；但**只有 custom.css 有設**的屬性就會原封不動滲透進來，
   讓內頁的共用頁尾與首頁長得不一樣。

   實測抓到的 4 個滲透點（右欄為 custom.css 的行號）：
     .footer-bottom  字體→JetBrains Mono、字級 16→11px、全大寫、字距 .14em、
                     色→var(--fg-2)、margin-top 40px、**多一條 dashed 上框**   1775
     .footer-heading text-transform: uppercase                                  1718
                     ⚠ 另有第二個來源：custom.css 152 的 `.display-heading, .h1, .h2`
                       也設了 uppercase —— 因為工作規則 3 規定標題要寫成
                       `<div class="h2 footer-heading">`，那個 `.h2` 剛好被命中。
     .footer-logo    opacity: .92、filter: brightness(0) invert(1)、height: 42px  1712
     .footer-social  margin: 14px 0 0                                            1750

   `.footer-copy` / `.footer-credit` 自己沒被撞名，但字體／大小寫／字距是
   **從 .footer-bottom 繼承**來的，所以修好父層就一起好了（不必個別列）。

   ⚠️ **維護原則不變：不要去改 custom.css**（那三支要與 c_a_v19 保持一字不差）。
      一律在本檔用 `.df-inner-page` 前綴把值改回 style.css 的樣子，權重 (0,2,0)。
   ⚠️ **日後在 style.css 為外殼新增 class 時，先 grep 一次 custom.css 有沒有同名的**：
      `grep -n '\.你的class' css/custom.css css/article.css`
      有的話就要檢查「custom.css 有設、style.css 沒設」的屬性，並在此處擋掉。 */

/* 版權列：改回繼承外殼的字體與文字樣式（首頁的 .footer-bottom 本來就什麼都沒設，
   全靠繼承，所以這裡用 inherit 最貼近原狀，也不必跟著 style.css 的值同步維護）。 */
.df-inner-page .footer-bottom {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  border-top: 0;
}

/* 品牌標語大標：擋掉 custom.css 的 uppercase（含 .h2 那條） */
.df-inner-page .footer-heading { text-transform: none; }

/* 頁尾 logo：擋掉 c_a 給圖檔式 logo 用的高度限制與反白濾鏡（本佈景的 logo 是文字） */
.df-inner-page .footer-logo {
  height: auto;
  filter: none;
  opacity: 1;
}

/* 社群圖示格：擋掉 c_a 的 margin-top（本佈景用 .footer-cell 的 padding 控間距） */
.df-inner-page .footer-social { margin: 0; }

/* ---------- 2. 封面圖上的疊字區：維持深色 ----------
   文章封面(.article-hero) 與橫幅封面(.na-hero) 是「大圖 + 深色漸層遮罩 + 疊字」。
   遮罩本來就是為了讓圖上的字看得清楚，屬於圖片處理、不是「暗色系版面」，故保留。
   但 token 改淺後疊字會變深色而消失在圖上 —— 這裡用「區域內重新宣告變數」把
   該範圍的文字色改回白系（CSS 變數會沿 DOM 繼承，只影響此容器內部）。 */
.article-hero:not(.no-cover),
.na-hero {
  background-color: #0b1119;   /* 圖片載入前的底色 ＝ --color-ink（2026-08-11 由 c_b 的 #141414 改） */
  --fg-1:   #ffffff;
  --fg-2:   rgba(255,255,255,0.72);
  --fg-3:   rgba(255,255,255,0.45);
  --border: rgba(255,255,255,0.28);
}

/* 無封面圖的文章標頭：透明底 + 深色字（token 已處理，此處僅確保不被上面波及） */
.article-hero.no-cover {
  background: transparent;
}

/* ---------- 3. 寫死深色的背景 → 淺色 ---------- */
.pager-thumb,            /* 上/下篇縮圖的墊底色 */
.news-thumbnail {        /* 消息縮圖墊底色 */
  background: #e3e8ef;
}

/* 直式/方形圖的圖框（背後是模糊放大的同一張圖，墊底色只在圖載入前可見） */
.na-frame {
  background: #e3e8ef;
}

/* ---------- 4. accent 底上的文字：深色 → 白色 ----------
   c_a 的 accent 是亮藍(#4DB8FF)，配深色字；本佈景的 accent 是天空藍(#1AA2EB)，
   屬中深色，必須改配白字才有足夠對比。 */
.tag-live,
input[type="submit"],
input[type="button"],
input[type="reset"],
#tabNavigation .selectedTab a:hover,
.products-viewall:focus,
.mobile-products-viewall:focus {
  color: #ffffff !important;
}
/* 註：.btn-dark／.btn-primary／.btn-warning 原本也在上面的白字清單裡，
   已移除 —— Bootstrap 按鈕的配色改由本檔最末「Bootstrap 按鈕還原原廠配色」
   區塊統一處理，見該區塊說明。 */

/* ---------- 5. 表單下拉選單：全站暗色化 → 淺色 ----------
   custom.css 2887~2926 用「寫死深藍 hex + !important」把全站原生 <select>／<option>／
   <optgroup> 暗色化（深藍底 #0E1D33 + 亮字 #E8EEF7），因非 var() 故 :root 換色蓋不到。
   此處照樣用寫死 hex 覆蓋回淺色，確保原生 popup 渲染層也生效。 */
:root { color-scheme: light; }                 /* 原生下拉／捲軸走淺色渲染 */

/* XOOPS 原生裸 <select>（custom.css 以 appearance:none + 深藍底 + 藍箭頭接管） */
select:not(.form-select):not(.news-select) {
  background-color: #ffffff !important;
  color:            #0b1119 !important;
  border:           1px solid rgba(11,17,25,0.14) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230070B5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* 全站下拉選項清單（含 Bootstrap .form-select、liaise 的下拉，其 option 亦被 custom.css 染深） */
option {
  background-color: #ffffff !important;
  color:            #0b1119 !important;
}
optgroup {
  background-color: #f4f7fb !important;
  color:            rgba(11,17,25,0.62) !important;
}
optgroup option {
  background-color: #ffffff !important;
  color:            #0b1119 !important;
}
/* 選中項：底用 --accent-wash、字用 --accent-ink（文字須過 AA），
   須排在 option 覆蓋之後才不被上面壓過 */
option:checked {
  background-color: rgba(26,162,235, 0.22) !important;
  color:            #0070B5 !important;
}

/* ---------- 5-2. XOOPS 系統 UI（表格 / 訊息框 / blockquote / code） ----------
   custom.css 把 XOOPS 內建元件（system 的登入、註冊、會員資料；pm 站內信；各模組的
   表格與訊息框）全設成深藍半透明底，在米白內頁上會變成一條條看不清字的灰藍橫幅。
   這裡整組改成淺色。選擇器與 custom.css 相同、靠載入順序在後而勝出（部分原規則帶
   !important，故此處也必須加）。 */
blockquote {
  background-color: #eef2f7;   /* ＝--bg-2 抬升面（2026-08-11 由暖米黃 #faf9f4 改） */
}
.outer, .head, .even, .odd {
  background-color: #ffffff !important;
}
tr.even, tr.odd {
  background-color: #eef2f7 !important;   /* 斑馬列 ＝--bg-2（2026-08-11 由暖米黃 #faf9f4 改） */
}
tr.even:hover, tr.odd:hover {
  background-color: rgba(26,162,235,0.08) !important;
}
table th, table td {
  background-color: transparent;
}
tr.active > td, tr.active > th {
  background-color: rgba(26,162,235,0.12) !important;
  color: var(--fg-1) !important;
}
#fullSupport,
.confirmMsg, .errorMsg, .resultMsg {
  background-color: #ffffff !important;
  color: var(--fg-1) !important;
}
/* 表格語意色：c_a 是「深底 + 淺字」，淺色頁需反過來（淺底 + 深字） */
td.warning, tr.warning > td { background-color: rgba(168,72,12,0.14) !important;  color: #8a3b0a !important; }
td.success, tr.success > td { background-color: rgba(26,127,75,0.16) !important;  color: #14603a !important; }
td.info,    tr.info > td    { background-color: rgba(26,162,235,0.10) !important; color: var(--accent-ink) !important; }
td.danger,  tr.danger > td  { background-color: rgba(170,60,60,0.12)  !important; color: #8c2f2f !important; }
/* 行內程式碼：原為「白色半透明」（給深底用），淺底需改成淺灰 */
code, pre, kbd, samp {
  background-color: rgba(20,20,20,0.05);
}
/* 選取反白：c_a 亮藍 → 本佈景天空藍 */
::selection { background: rgba(26,162,235,0.28); color: #0b1119; }

/* ---------- 5-2b. 表格 Bootstrap 化 + RWD ----------
   針對「class=outer 的表格」與「無 class 的裸表格」。這些多由 XOOPS 核心／模組以 PHP
   產生（拿不到 .table class），故把 Bootstrap 5 的 .table + .table-hover 外觀用 CSS 複製上去。
   有指定 class 的表格（.table、width70… 等）不受此段影響（選擇器只命中 .outer 與無 class）。
   顏色沿用 5-2 段的淺色（框 rgba(11,17,25,0.14)、hover accent 8%）。 */
table.outer,
table:not([class]) {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  color: #0b1119;
  vertical-align: top;
}
table.outer th, table.outer td,
table:not([class]) th, table:not([class]) td {
  padding: .5rem .5rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(11,17,25,0.14) !important;   /* .table 的列間橫線 */
}
table.outer th,
table:not([class]) th {
  text-align: left;
  font-weight: 600;
  border-bottom-width: 2px !important;           /* thead 加重（同 .table thead） */
}
table.outer tbody tr:hover > *,
table:not([class]) tbody tr:hover > * {
  background-color: rgba(26,162,235,0.08) !important;   /* .table-hover */
}
/* RWD：窄螢幕欄多時可橫向捲動（等同 .table-responsive，免外層 wrapper）；
   欄少時仍會自動換行填滿。桌機維持正常全幅表格。 */
@media (max-width: 767.98px) {
  table.outer,
  table:not([class]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 5-3. 裸 .hN 的標題字級 ----------
   佈景規範是「不用 <h1>~<h6>，改用 <div class="hN">」。首頁與各模組內頁的標題都另外帶了
   自己的 class（如 .news-card-title、.na-title）來提供字級，但 **XOOPS 內建樣板**（搜尋結果、
   會員資料、站內信、留言）只有一個裸的 `class="h3"` / `class="h4"`，沒有任何字級來源。

   在 style.css 的「Bootstrap 相容防護」把 .h1~.h6 中和成 font-size:inherit 之後，這些裸標題
   會掉成內文大小、看不出是標題。此處補上佈景自己的標題字級。

   ⚠️ 選擇器用 `[class="hN"]`（屬性**精確**匹配）：只命中「class 剛好只有 hN、沒有別的 class」
      的元素。有自己 class 的標題（首頁、news、wr…）完全不受影響，不會被這裡覆蓋。 */
.df-inner [class="h1"],
.df-inner [class="h2"],
.df-inner [class="h3"],
.df-inner [class="h4"],
.df-inner [class="h5"],
.df-inner [class="h6"] {
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .5rem;
  color: var(--fg-1);
}
.df-inner [class="h1"] { font-size: 2rem; }
.df-inner [class="h2"] { font-size: 1.75rem; }
.df-inner [class="h3"] { font-size: 1.55rem; }
.df-inner [class="h4"] { font-size: 1.4rem; }
.df-inner [class="h5"] { font-size: 1.2rem; }
.df-inner [class="h6"] { font-size: 1.05rem; }

/* ---------- 5-4. 登入／編輯 modal：內頁維持深色皮膚（與首頁一致） ----------
   ⚠️ custom.css 用 **ID 選擇器 + !important** 把 modal 改成淺色（`#mymodal_login .modal-content
      { background-color: var(--bg-2) !important }` 等，權重 (1,0,1)），會壓過佈景的
      `.df-modal .modal-content`（權重 0,2,0）。結果內頁 modal 變白底，但佈景的深色皮膚元件
      （白色的關閉鈕 X、白字的「記住登錄資訊」、白色的忘記密碼／註冊連結、白字按鈕）還在，
      形成一堆「白字壓白底」而消失。

   modal 與 header/footer 同屬全站共用元件，兩邊外觀應一致 → 內頁一律覆蓋回深色皮膚。
   選擇器用 `#id.df-modal`（權重 (1,1,0)＋後代 class）以穩定勝過 custom.css 的 (1,0,1)；
   custom.css 該組規則帶 !important，故此處也必須加。 */
#mymodal_login.df-modal .modal-content,
#mymodal_edit.df-modal .modal-content {
  background-color: #141414 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}
#mymodal_login.df-modal .modal-header,
#mymodal_edit.df-modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#mymodal_login.df-modal .modal-title,
#mymodal_login.df-modal .modal-header .h5,
#mymodal_login.df-modal #mymodal_loginLabel,
#mymodal_edit.df-modal .modal-title,
#mymodal_edit.df-modal .modal-header .h5,
#mymodal_edit.df-modal #mymodal_editLabel {
  color: #fff !important;
}
#mymodal_login.df-modal .modal-body,
#mymodal_edit.df-modal .modal-body { background: transparent !important; }
/* 關閉鈕：深底上要用白色 X（invert 把預設的黑 X 反白） */
#mymodal_login.df-modal .btn-close,
#mymodal_edit.df-modal .btn-close { filter: invert(1) grayscale(1) !important; opacity: .7 !important; }
#mymodal_login.df-modal .btn-close:hover,
#mymodal_edit.df-modal .btn-close:hover { opacity: 1 !important; }
/* 輸入框 */
#mymodal_login.df-modal .form-control {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}
#mymodal_login.df-modal .form-control::placeholder { color: rgba(255,255,255,.45) !important; }
#mymodal_login.df-modal .form-control:focus {
  background-color: rgba(255,255,255,.08) !important;
  border-color: #1AA2EB !important;
  box-shadow: none !important;
}
#mymodal_login.df-modal .form-check-label { color: rgba(255,255,255,.75) !important; }
#mymodal_login.df-modal .form-check-input:checked {
  background-color: #1AA2EB !important;
  border-color: #1AA2EB !important;
}
/* 按鈕文字鎖白：編輯／登出鈕是 <a class="btn df-modal-btn">，被 custom.css 全域
   a:link／a:hover（權重 0,1,1、無 !important）染成 accent → 疊在 accent 底上看不見文字。
   （登入鈕是 <button> 不受 a:link 影響，故只有 <a> 型按鈕中招。）
   用 .df-inner-page 前綴 (0,2,0) + !important 一律壓過，恢復白字（含各狀態）。 */
.df-inner-page .df-modal-btn,
.df-inner-page .df-modal-btn:hover,
.df-inner-page .df-modal-btn:focus,
.df-inner-page .df-modal-btn:active,
.df-inner-page .df-modal-btn-ghost,
.df-inner-page .df-modal-btn-ghost:hover,
.df-inner-page .df-modal-btn-ghost:focus,
.df-inner-page .df-modal-btn-ghost:active {
  color: #fff !important;
}

/* ---------- 5-5. header 的搜尋框：還原成無框透明（與首頁一致） ----------
   ⚠️ custom.css 有一條**全域** `input, select, textarea {...!important}`（約 1913 行），給所有
      輸入框加了 `border:1px solid var(--border)` + 底色。它只在內頁載入，於是 header 展開的
      搜尋框（`.df-search-input`，首頁設計是 border:none;background:transparent）被套上一個方框。
   header 是全站共用元件，內頁應與首頁一致 → 把搜尋框還原為無框透明。custom.css 帶 !important，
   故此處也必須加。 */
.df-inner-page .df-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
}
.df-inner-page .df-search-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- 6. 內文連結 ----------
   c_a 的 a:link 已走 var(--accent)，換 token 後自動變天空藍；此處僅補 hover 手感。 */
.df-inner a:hover {
  color: var(--accent-press);
}

/* ---------- 7. TinyMCE 對話框標題（.tox-dialog__header / __title） ----------
   custom.css 把標題文字寫死 #E8EEF7（為深底設計的近白色，帶 !important），但 header 背景是
   var(--bg)＝內頁米白 #f4f7fb → 淺字疊淺底看不清。改深色文字（含 header 內任何 h1）。 */
.tox .tox-dialog__header,
.tox .tox-dialog__title,
.tox .tox-dialog__header h1,
.tox .tox-dialog__header .h1 {
  color: #0b1119 !important;
}

/* ---------- 8. Bootstrap 按鈕：還原原廠配色 ----------
   custom.css 把 Bootstrap 5 的語意色按鈕整組改寫成本佈景色系（皆帶 !important）：
     custom.css 1950  .btn-dark                 → accent 底 + #051121 字
     custom.css 2730  .btn-primary／.btn-warning → accent 底
     custom.css 2754  .btn-info                 → 透明底 ghost
     custom.css 2772  .btn-success              → 透明底 ghost
     custom.css 2790  .btn-danger               → 透明底 ghost
     custom.css 2808  .btn-default              → 透明底 ghost
   本區塊把八個語意色按鈕的 --bs-btn 變數改回 bootstrap.css 2873~3007 的原廠值，
   再用共用規則把被寫死的 background-color／border-color／color 交還給那些變數。
   custom.css 的宣告都帶 !important，故此處也必須 !important，且本檔最後載入才蓋得掉。
   .btn-secondary 與 .btn-light 未被 custom.css 動過，仍一併列出以保持一致。
   .btn-default 是 Bootstrap 3 殘留（BS5 已無此 class），沒有自己的變數，
   var() 會落回 .btn 基礎值，等同回到 Bootstrap 預設的無底色基礎按鈕。
   .btn-outline 系列與 .btn-close 不在此範圍，維持原樣。 */
.btn-primary {
  --bs-btn-color:              #fff !important;
  --bs-btn-bg:                 #0d6efd !important;
  --bs-btn-border-color:       #0d6efd !important;
  --bs-btn-hover-color:        #fff !important;
  --bs-btn-hover-bg:           #0b5ed7 !important;
  --bs-btn-hover-border-color: #0a58ca !important;
  --bs-btn-focus-shadow-rgb:   49, 132, 253 !important;
  --bs-btn-active-color:       #fff !important;
  --bs-btn-active-bg:          #0a58ca !important;
  --bs-btn-active-border-color:#0a53be !important;
  --bs-btn-disabled-color:     #fff !important;
  --bs-btn-disabled-bg:        #0d6efd !important;
  --bs-btn-disabled-border-color:#0d6efd !important;
}
.btn-secondary {
  --bs-btn-color:              #fff !important;
  --bs-btn-bg:                 #6c757d !important;
  --bs-btn-border-color:       #6c757d !important;
  --bs-btn-hover-color:        #fff !important;
  --bs-btn-hover-bg:           #5c636a !important;
  --bs-btn-hover-border-color: #565e64 !important;
  --bs-btn-focus-shadow-rgb:   130, 138, 145 !important;
  --bs-btn-active-color:       #fff !important;
  --bs-btn-active-bg:          #565e64 !important;
  --bs-btn-active-border-color:#51585e !important;
  --bs-btn-disabled-color:     #fff !important;
  --bs-btn-disabled-bg:        #6c757d !important;
  --bs-btn-disabled-border-color:#6c757d !important;
}
.btn-success {
  --bs-btn-color:              #fff !important;
  --bs-btn-bg:                 #198754 !important;
  --bs-btn-border-color:       #198754 !important;
  --bs-btn-hover-color:        #fff !important;
  --bs-btn-hover-bg:           #157347 !important;
  --bs-btn-hover-border-color: #146c43 !important;
  --bs-btn-focus-shadow-rgb:   60, 153, 110 !important;
  --bs-btn-active-color:       #fff !important;
  --bs-btn-active-bg:          #146c43 !important;
  --bs-btn-active-border-color:#13653f !important;
  --bs-btn-disabled-color:     #fff !important;
  --bs-btn-disabled-bg:        #198754 !important;
  --bs-btn-disabled-border-color:#198754 !important;
}
.btn-danger {
  --bs-btn-color:              #fff !important;
  --bs-btn-bg:                 #dc3545 !important;
  --bs-btn-border-color:       #dc3545 !important;
  --bs-btn-hover-color:        #fff !important;
  --bs-btn-hover-bg:           #bb2d3b !important;
  --bs-btn-hover-border-color: #b02a37 !important;
  --bs-btn-focus-shadow-rgb:   225, 83, 97 !important;
  --bs-btn-active-color:       #fff !important;
  --bs-btn-active-bg:          #b02a37 !important;
  --bs-btn-active-border-color:#a52834 !important;
  --bs-btn-disabled-color:     #fff !important;
  --bs-btn-disabled-bg:        #dc3545 !important;
  --bs-btn-disabled-border-color:#dc3545 !important;
}
.btn-warning {
  --bs-btn-color:              #000 !important;
  --bs-btn-bg:                 #ffc107 !important;
  --bs-btn-border-color:       #ffc107 !important;
  --bs-btn-hover-color:        #000 !important;
  --bs-btn-hover-bg:           #ffca2c !important;
  --bs-btn-hover-border-color: #ffc720 !important;
  --bs-btn-focus-shadow-rgb:   217, 164, 6 !important;
  --bs-btn-active-color:       #000 !important;
  --bs-btn-active-bg:          #ffcd39 !important;
  --bs-btn-active-border-color:#ffc720 !important;
  --bs-btn-disabled-color:     #000 !important;
  --bs-btn-disabled-bg:        #ffc107 !important;
  --bs-btn-disabled-border-color:#ffc107 !important;
}
.btn-info {
  --bs-btn-color:              #000 !important;
  --bs-btn-bg:                 #0dcaf0 !important;
  --bs-btn-border-color:       #0dcaf0 !important;
  --bs-btn-hover-color:        #000 !important;
  --bs-btn-hover-bg:           #31d2f2 !important;
  --bs-btn-hover-border-color: #25cff2 !important;
  --bs-btn-focus-shadow-rgb:   11, 172, 204 !important;
  --bs-btn-active-color:       #000 !important;
  --bs-btn-active-bg:          #3dd5f3 !important;
  --bs-btn-active-border-color:#25cff2 !important;
  --bs-btn-disabled-color:     #000 !important;
  --bs-btn-disabled-bg:        #0dcaf0 !important;
  --bs-btn-disabled-border-color:#0dcaf0 !important;
}
.btn-light {
  --bs-btn-color:              #000 !important;
  --bs-btn-bg:                 #f8f9fa !important;
  --bs-btn-border-color:       #f8f9fa !important;
  --bs-btn-hover-color:        #000 !important;
  --bs-btn-hover-bg:           #d3d4d5 !important;
  --bs-btn-hover-border-color: #c6c7c8 !important;
  --bs-btn-focus-shadow-rgb:   211, 212, 213 !important;
  --bs-btn-active-color:       #000 !important;
  --bs-btn-active-bg:          #c6c7c8 !important;
  --bs-btn-active-border-color:#babbbc !important;
  --bs-btn-disabled-color:     #000 !important;
  --bs-btn-disabled-bg:        #f8f9fa !important;
  --bs-btn-disabled-border-color:#f8f9fa !important;
}
.btn-dark {
  --bs-btn-color:              #fff !important;
  --bs-btn-bg:                 #212529 !important;
  --bs-btn-border-color:       #212529 !important;
  --bs-btn-hover-color:        #fff !important;
  --bs-btn-hover-bg:           #424649 !important;
  --bs-btn-hover-border-color: #373b3e !important;
  --bs-btn-focus-shadow-rgb:   66, 70, 73 !important;
  --bs-btn-active-color:       #fff !important;
  --bs-btn-active-bg:          #4d5154 !important;
  --bs-btn-active-border-color:#373b3e !important;
  --bs-btn-disabled-color:     #fff !important;
  --bs-btn-disabled-bg:        #212529 !important;
  --bs-btn-disabled-border-color:#212529 !important;
}

/* 把 custom.css 寫死的 background-color／border-color／color 交還給上面的變數 */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-default {
  background-color: var(--bs-btn-bg) !important;
  border-color:     var(--bs-btn-border-color) !important;
  color:            var(--bs-btn-color) !important;
}
.btn-primary:hover,   .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-success:hover,   .btn-success:focus,
.btn-danger:hover,    .btn-danger:focus,
.btn-warning:hover,   .btn-warning:focus,
.btn-info:hover,      .btn-info:focus,
.btn-light:hover,     .btn-light:focus,
.btn-dark:hover,      .btn-dark:focus,
.btn-default:hover,   .btn-default:focus {
  background-color: var(--bs-btn-hover-bg) !important;
  border-color:     var(--bs-btn-hover-border-color) !important;
  color:            var(--bs-btn-hover-color) !important;
}
/* 上面的共用規則帶 !important，會蓋掉 Bootstrap 原本非 important 的
   active／disabled 樣式，所以這兩種狀態要在這裡補回來 */
.btn-primary:active,   .btn-primary.active,   .btn-primary.show,
.btn-secondary:active, .btn-secondary.active, .btn-secondary.show,
.btn-success:active,   .btn-success.active,   .btn-success.show,
.btn-danger:active,    .btn-danger.active,    .btn-danger.show,
.btn-warning:active,   .btn-warning.active,   .btn-warning.show,
.btn-info:active,      .btn-info.active,      .btn-info.show,
.btn-light:active,     .btn-light.active,     .btn-light.show,
.btn-dark:active,      .btn-dark.active,      .btn-dark.show,
.btn-default:active,   .btn-default.active,   .btn-default.show,
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-secondary,
.btn-check:checked + .btn-success,
.btn-check:checked + .btn-danger,
.btn-check:checked + .btn-warning,
.btn-check:checked + .btn-info,
.btn-check:checked + .btn-light,
.btn-check:checked + .btn-dark {
  background-color: var(--bs-btn-active-bg) !important;
  border-color:     var(--bs-btn-active-border-color) !important;
  color:            var(--bs-btn-active-color) !important;
}
.btn-primary:disabled,   .btn-primary.disabled,
.btn-secondary:disabled, .btn-secondary.disabled,
.btn-success:disabled,   .btn-success.disabled,
.btn-danger:disabled,    .btn-danger.disabled,
.btn-warning:disabled,   .btn-warning.disabled,
.btn-info:disabled,      .btn-info.disabled,
.btn-light:disabled,     .btn-light.disabled,
.btn-dark:disabled,      .btn-dark.disabled,
.btn-default:disabled,   .btn-default.disabled {
  background-color: var(--bs-btn-disabled-bg) !important;
  border-color:     var(--bs-btn-disabled-border-color) !important;
  color:            var(--bs-btn-disabled-color) !important;
}

/* ---------- 9. 核取方塊／單選鈕：勾選記號看不見 ----------
   custom.css 1913 有一條無差別套用到所有 input 的規則（含 checkbox／radio）：
     input, select, textarea, .form-control, .form-select {
       background-color: rgba(255,255,255,0.04) !important; ... }
   那是為 c_a 深藍底設計的近乎透明白底。換成 c_b 米白內頁後：
     原生 checkbox        → 底色被改成近乎透明，瀏覽器畫的勾仍是白色 → 白勾疊白底
     Bootstrap .form-check-input → 勾選時的藍底被這條 !important 蓋掉，
                                   SVG 勾本身是白色 → 同樣看不見
   custom.css 只在 #mymodal_login(2416) 補救過，.df-modal 由 style.css 2610 補救，
   其餘表單全中招。此處統一補回，仍遵守「不改 custom.css」的原則。
   首頁不載入 custom.css，本來就沒這問題，也不載入本檔，不受影響。 */
.form-check-input {
  background-color: #ffffff !important;
  border-color:     rgba(11,17,25,0.25) !important;
}
.form-check-input:checked {
  background-color: #0070B5 !important;   /* --accent-ink 底 + Bootstrap 原本的白色 SVG 勾（白勾 5.3:1） */
  border-color:     #0070B5 !important;
}
/* 原生 checkbox／radio（XOOPS 表單多半沒有 Bootstrap class）：
   用 revert 把底色與邊框交還瀏覽器的預設繪製，再以 accent-color 指定勾選色，
   得到 --accent-ink 底配白勾。若寫死 background-color 反而會蓋掉原生控制項的繪製。 */
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
  background-color: revert !important;
  border:           revert !important;
  accent-color:     #0070B5;
}

/* ---------- 10. 新聞文章：hover 底色的 c_a 亮藍 → 本佈景天空藍 ----------
   article.css 這幾條的 hover 底色是寫死的 c_a 亮藍 rgba(77,184,255,x)，
   沒有走 var(--accent)，所以第 1 節換 token 蓋不到，內頁米白底上會浮出藍色：
     article.css 270  .share-btn:hover/:focus-visible   分享鈕（實際只有「複製連結」
                      吃得到這條；fb／line／email 在 273~275 各自帶品牌色底）
     article.css 553  .attachment-row:hover             附件文件列
     article.css 657  .pager-card:hover                 上下篇卡片
     article.css 641  .pager-card::before／::after       上下篇卡片外框的光暈
     article.css 736  .pager-backlink a:hover           上下篇下方的返回列表連結
   選擇器與原規則相同、本檔最後載入，故後者勝出，不需要 !important。
   透明度由原本的 0.04~0.06 微調到 0.06~0.08：原設計是「亮藍疊深底」，
   換成「深綠疊米白」後同樣的 alpha 會偏淡。 */
.share-btn:hover,
.share-btn:focus-visible {
  background: rgba(26,162,235,0.08);
}
.attachment-row:hover {
  background: rgba(26,162,235,0.06);
}
.pager-card:hover {
  background: rgba(26,162,235,0.07);
}
.pager-card::before,
.pager-card::after {
  filter: drop-shadow(0 0 8px rgba(26,162,235,0.45));
}
.pager-backlink a:hover {
  background: rgba(26,162,235,0.08);
}

/* ---------- 11. 其餘寫死的 c_a 亮藍 rgba(77,184,255) 一次掃除 ----------
   custom.css / article.css / article-orient.css 共有 79 處寫死 rgba(77,184,255,x)。
   逐一比對「該 class 是否真的出現在本佈景樣板」後，實際會生效的只有以下這些，
   其餘屬下列三種情形，不需要（也不應該）覆蓋：

   (a) c_a 首頁元件，本佈景樣板沒有這些 class → 規則永遠不匹配：
       .product / .product-accordion-item / .product-close / .product-rail-arrow /
       .news-item / .news-arrow / .glass-button / .learn-link / .mission /
       .search-hint / .to-top / .floating-contact-link / .footer-social-link /
       .submenu / .blockTitle / .cBlockTitle / .article-category / .na-category /
       .na-switch / .na-status / .live-dot（含 @keyframes live_pulse）/ .v-tactical
   (b) 已被後載入的 style.css 中和：custom.css 70／138 的 body 藍色徑向漸層，
       被 style.css 51 的 background 簡寫清成單色，再由 .sc-root-div-1 定成米白。
       這裡若補綠色漸層反而會憑空多出一層綠光，故刻意不動。
   (c) 已由本檔其他節處理：.btn-primary／.btn-warning／.btn-info／.btn-default
       的 --bs-btn 變數見第 8 節；option:checked 見第 5 節；
       .share-btn／.attachment-row／.pager-card／.pager-backlink 見第 10 節。

   另註：custom.css 與 article.css 裡所有 #maincontent 前綴的規則，在本佈景同樣是
   死碼 —— 該 id 只存在於 c_a_v16~v19 骨架的 theme.tpl，本佈景的 theme.tpl 沒有輸出。 */

/* 內文連結底線與行內程式碼 */
.article-content a          { border-bottom: 1px solid rgba(26,162,235,0.4); }
.article-content code       { background: rgba(26,162,235,0.10); }

/* 文章閱讀進度條（news_item.html 256 行實際有輸出）：漸層尾端 #9bdcff 亦為寫死的亮藍 */
.read-progress-bar {
  background: linear-gradient(90deg, #0070B5, #8FD2F0);
  box-shadow: 0 0 10px rgba(26,162,235,0.6);
}

/* 選取文字的反白色 */
::selection { background: rgba(26,162,235,0.35); color: #fff; }

/* XOOPS 表格：斑馬列 hover 與 info 語意色 */
tr.even:hover, tr.odd:hover { background-color: rgba(26,162,235,0.08) !important; }
.table-info {
  --bs-table-bg:    rgba(26,162,235,0.08) !important;
  background-color: rgba(26,162,235,0.08) !important;
}
td.info, tr.info > td { background-color: rgba(26,162,235,0.08) !important; }

/* 表單焦點光暈（全站輸入框、含登入 modal） */
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 3px rgba(26,162,235,0.18) !important;
}
#mymodal_login .form-control:focus {
  background-color: rgba(26,162,235,0.04) !important;
  box-shadow: 0 0 0 0.15rem rgba(26,162,235,0.18) !important;
}
#mymodal_login .btn.btn-dark:hover,
#mymodal_login .btn.btn-dark:focus,
#mymodal_login a.btn.btn-dark:hover,
#mymodal_login a.btn.btn-dark:focus {
  background-color: rgba(26,162,235,0.08) !important;
}

/* 主選單區塊（system_block_mainmenu.tpl 用 .bs-docs-sidebar） */
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a,
.bs-docs-sidebar .nav .nav > .active > a,
.bs-docs-sidebar .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav > li > a:focus {
  background-color: rgba(26,162,235,0.06) !important;
}

/* Bootstrap .badge（模組輸出時會用到） */
.badge { background-color: rgba(26,162,235,0.18) !important; }

/* TinyMCE 編輯器欄位的焦點光暈 */
.tox .tox-textfield:focus,
.tox .tox-textarea:focus,
.tox .tox-listbox:focus {
  box-shadow: 0 0 0 2px rgba(26,162,235,0.2) !important;
}