/*
 * ChooGo 部落格文章頁版型重新設計（WO-CHOOGO-SSG-001，Edison，2026-08-08）
 * 規格來源：deliverables/WO-CHOOGO-SSG/article-redesign-spec-20260808.md（Wendy）
 *
 * 只注入 post/blog 5 頁（test1~4、/blog/），見
 * build/article_redesign.py::apply_article_redesign()——其餘 49 頁不載入這份檔案，
 * 不會被本檔任何規則波及（full_scan 驗收清單有抽查非文章頁）。
 *
 * 覆蓋順序說明（規格第 0 節）：全站共用內嵌 <style id="bricks-frontend-inline-inline-css">
 * 對 `.brxe-post-content h1/h2/h3/p/table` 這類選擇器下了 `!important`（含 991px/767px
 * 兩層 media query，同樣 `!important`）。本檔用「同樣 `!important` ＋更高特異度」正面
 * 覆蓋——文章主體容器 `#brxe-ezgokq`（Bricks 模板固定 id，test1~4 四頁皆相同，已逐頁核對）
 * 的 ID 選擇器特異度遠高於 `.brxe-post-content` 這個 class 選擇器，兩者同為 `!important`
 * 時以特異度定勝負，不依賴 <link> 載入順序（但仍照規範把本檔 <link> 插在
 * `</head>` 前、晚於既有內嵌樣式，雙重保險）。純新增的元件 class（.cg-breadcrumb／
 * .cg-toc／.cg-faq／.cg-note／.cg-article-cta／.cg-card-grid 等）沒有既有規則衝突，
 * 不需要 `!important`；但這些元件內部若含 `<p>`／`<td>`／`<th>` 等會被全站 `!important`
 * 規則命中的標籤（例：.cg-note 內的 <p>、.cg-faq-item 內的 <p>），仍需個別加
 * `#brxe-ezgokq` 前綴＋`!important` 才能生效，逐一標註見下方對應區塊。
 */

:root {
  /* ChooGo 品牌色（單一事實源＝現行 .choo-booking-box 內已定義的三色，本規格提升為文章模組全域可用） */
  --cg-blue-dark: #1D416F;   /* 標題／強調文字／深色底 */
  --cg-blue: #4385DF;        /* 互動色：連結／按鈕／格線／H2 裝飾條 */
  --cg-green: #19B85C;       /* CP 值／推薦語意色：徽章／次要 CTA */

  /* 中性色階 */
  --cg-text: #3D3D3D;        /* 內文（沿用 --choo-text） */
  --cg-muted: #8290A3;       /* 圖說／meta／輔助文字（沿用 --choo-muted） */
  --cg-line: #E3E8F0;        /* 邊框／分隔線 */
  --cg-surface: #F5F8FC;     /* 淡藍灰底：note 卡片、TOC 底、表頭底 */
  --cg-white: #FFFFFF;

  /* 語意色淡染（表格斑馬紋、徽章底色） */
  --cg-blue-tint: #EAF1FC;   /* --cg-blue 10% on white */
  --cg-green-tint: #E7F8EE;  /* --cg-green 12% on white */

  /* 字級（沿用全站 Noto Sans TC；桌機基準見下，手機在對應 media query 覆寫） */
  --cg-fs-h1: 1.75rem;       /* 28px，手機；桌機 2.25rem/36px，見 4.2 節 */
  --cg-fs-h2: 1.375rem;      /* 22px，手機；桌機 1.625rem/26px */
  --cg-fs-h3: 1.125rem;      /* 18px，手機；桌機 1.25rem/20px */
  --cg-fs-body: 1rem;        /* 16px，固定不隨斷點縮，長文閱讀優先 */
  --cg-fs-small: 0.875rem;   /* 14px：meta、圖說、note */

  /* 間距節奏 */
  --cg-space-block: 2rem;    /* 區塊間（H2 前） */
  --cg-space-tight: 0.75rem; /* 區塊內小間距 */

  /* 版心 */
  --cg-article-max: 720px;   /* 內文欄寬（CJK 閱讀行長最佳區間） */
  --cg-container-max: 1200px;

  --cg-radius: 14px;
  --cg-radius-sm: 8px;
  --cg-shadow-card: 0 2px 10px rgba(29, 65, 111, 0.08);
  --cg-shadow-lift: 0 14px 28px rgba(29, 65, 111, 0.16);
}

/* ==========================================================================
   A. 覆蓋既有全站內嵌樣式（#brxe-ezgokq 高特異度 + !important，見檔頭說明）
   ========================================================================== */

#brxe-ezgokq.brxe-post-content { max-width: none; }

/* 版心：內文欄自己收窄，外層白卡容器維持現況寬度不動 */
#brxe-ezgokq.cg-article-body {
  max-width: var(--cg-article-max);
  margin-left: auto;
  margin-right: auto;
}

#brxe-ezgokq h2.wp-block-heading,
#brxe-ezgokq h2 {
  font-size: 22px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  font-weight: 800 !important;
  margin-top: 2.5em !important;
  margin-bottom: 0.6em !important;
  position: relative;
  padding-left: 1rem;
  border-left: 6px solid var(--cg-blue);
  color: var(--cg-blue-dark);
  scroll-margin-top: 84px;
}
#brxe-ezgokq h3.wp-block-heading,
#brxe-ezgokq h3 {
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  font-weight: 700 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
  position: relative;
  padding-left: 0.8rem;
  border-left: 4px solid var(--cg-green);
  color: var(--cg-blue-dark);
  scroll-margin-top: 84px;
}
#brxe-ezgokq p.wp-block-paragraph,
#brxe-ezgokq p {
  font-size: 16px !important;
  line-height: 1.8 !important;
  letter-spacing: normal !important;
  margin-bottom: 1.4em !important;
  color: var(--cg-text);
}
#brxe-ezgokq ul, #brxe-ezgokq ol {
  padding-left: 1.5em !important;
  margin: 0.8em 0 1.2em !important;
}
#brxe-ezgokq li { margin-bottom: 0.4em !important; }

#brxe-ezgokq a { color: var(--cg-blue); text-decoration: underline; text-underline-offset: 0.15em; }
#brxe-ezgokq a:hover { color: var(--cg-blue-dark); }
#brxe-ezgokq strong { font-weight: 700 !important; color: var(--cg-blue-dark); }

@media (min-width: 768px) {
  #brxe-ezgokq h2.wp-block-heading, #brxe-ezgokq h2 { font-size: 26px !important; line-height: 1.5 !important; }
  #brxe-ezgokq h3.wp-block-heading, #brxe-ezgokq h3 { font-size: 20px !important; line-height: 1.5 !important; }
  #brxe-ezgokq p.wp-block-paragraph, #brxe-ezgokq p { font-size: 17px !important; line-height: 1.9 !important; }
}

/* 表格（覆蓋全站 .wp-block-table 固定灰框樣式） */
#brxe-ezgokq .wp-block-table table,
#brxe-ezgokq table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--cg-blue) !important;
  border-radius: var(--cg-radius-sm);
  overflow: hidden;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}
#brxe-ezgokq thead { background: var(--cg-blue-tint); }
#brxe-ezgokq .wp-block-table th,
#brxe-ezgokq .wp-block-table td,
#brxe-ezgokq th,
#brxe-ezgokq td {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  padding: 0.75em 0.7em !important;
  border: 0 !important;
  border-right: 1px solid var(--cg-line) !important;
  border-bottom: 1px solid var(--cg-line) !important;
  vertical-align: middle !important;
  text-align: left;
}
#brxe-ezgokq th { font-weight: 700 !important; color: var(--cg-blue-dark); background: transparent !important; }
#brxe-ezgokq th:last-child, #brxe-ezgokq td:last-child { border-right: 0 !important; }
#brxe-ezgokq tbody tr:last-child td { border-bottom: 0 !important; }
#brxe-ezgokq tbody td:first-child { font-weight: 700 !important; color: var(--cg-blue-dark); }
#brxe-ezgokq tbody tr:nth-child(even) { background: var(--cg-surface); }

/* 推薦列徽章：由 build-time transform 對指定列加 data-highlight="best"（見
   article_redesign.py::_maybe_highlight_recommended_row，非任意猜測，只認
   第一欄文字精確等於「機場接送」的列，對應本規格檔頭第 5.9 節「機場接送」例） */
#brxe-ezgokq tr[data-highlight="best"] { background: var(--cg-green-tint) !important; border-left: 4px solid var(--cg-green); }
#brxe-ezgokq tr[data-highlight="best"] td:first-child::after {
  content: "ChooGo 推薦";
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--cg-green);
  border-radius: 999px;
  vertical-align: middle;
}

/* 768–991px：欄數多維持橫向捲動，不強制轉卡片 */
@media (max-width: 991px) and (min-width: 768px) {
  #brxe-ezgokq .cg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #brxe-ezgokq .cg-table-wrap table { min-width: 720px; }
}

/* ≤767px：轉卡片式（data-title 由 build-time transform 直接注入 DOM，非執行期 JS，
   見 article_redesign.py::_transform_table；比規格建議的 client-side JS 手法更穩，
   零 JS 依賴、無 JS disabled 情境下的降級問題） */
@media (max-width: 767px) {
  #brxe-ezgokq .cg-table-wrap table,
  #brxe-ezgokq .cg-table-wrap tbody,
  #brxe-ezgokq .cg-table-wrap tr,
  #brxe-ezgokq .cg-table-wrap td { display: block !important; width: 100% !important; }
  #brxe-ezgokq .cg-table-wrap thead { display: none !important; }
  #brxe-ezgokq .cg-table-wrap table { border: 0 !important; }
  #brxe-ezgokq .cg-table-wrap tr {
    margin-bottom: 1rem;
    border: 1px solid var(--cg-line) !important;
    border-left: 4px solid var(--cg-blue) !important;
    border-radius: var(--cg-radius-sm);
    padding: 0.5rem 0.9rem;
    background: var(--cg-white);
  }
  #brxe-ezgokq .cg-table-wrap tr[data-highlight="best"] { border-left-color: var(--cg-green) !important; }
  #brxe-ezgokq .cg-table-wrap tbody tr:nth-child(even) { background: var(--cg-white); }
  #brxe-ezgokq .cg-table-wrap td { border: 0 !important; border-bottom: 1px solid var(--cg-line) !important; padding: 0.6em 0 !important; }
  #brxe-ezgokq .cg-table-wrap td:last-child { border-bottom: 0 !important; }
  #brxe-ezgokq .cg-table-wrap td[data-title]::before {
    content: attr(data-title);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cg-blue);
    margin-bottom: 0.25em;
  }
}

.cg-table-wrap { margin: 1.5em 0; }

/* 圖片與圖說 */
#brxe-ezgokq figure { margin: 1.5em 0 !important; }
#brxe-ezgokq figure.wp-block-image img,
#brxe-ezgokq .cg-article-body > img,
#brxe-ezgokq figure:not(.wp-block-table) img {
  width: 100%;
  border-radius: var(--cg-radius);
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.cg-figcaption { font-size: var(--cg-fs-small); color: var(--cg-muted); text-align: center; margin-top: 0.5em; }
@media (min-width: 768px) { .cg-figcaption { font-size: 14px; } }

/* ==========================================================================
   B. 新增元件（無既有規則衝突，一般特異度即可；內含 <p> 的子元素個別覆蓋見各段）
   ========================================================================== */

/* B0. 文章外層版心（.cg-article-body 本身在上面 A 段已設 max-width，這裡放跟內文
       欄位無關、但仍在同一容器作用範圍內的共用元件間距） */

/* B1. 麵包屑 */
.cg-breadcrumb { font-size: 0.8rem; color: var(--cg-muted); margin-bottom: 0.8rem; }
.cg-breadcrumb a { color: var(--cg-muted); text-decoration: none; }
.cg-breadcrumb a:hover { color: var(--cg-blue); }
.cg-breadcrumb__current { color: var(--cg-blue-dark); font-weight: 600; }
@media (max-width: 478px) {
  .cg-breadcrumb__current { max-width: 60vw; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}

/* B2. 文章頭部（meta 列＋標題） */
.cg-tag { display: inline-block; padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--cg-blue-tint); color: var(--cg-blue-dark); font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.cg-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; color: var(--cg-muted); font-size: 0.8rem; margin-bottom: 0.8rem; }
.cg-article__title { font-size: var(--cg-fs-h1); color: var(--cg-blue-dark); font-weight: 900; line-height: 1.4; margin: 0; }
@media (min-width: 768px) { .cg-article__title { font-size: 2.25rem; line-height: 1.35; } }

/* B3. 導言（Lead）——第一段 <p> 同時命中全站 !important 段落規則，需覆蓋 */
#brxe-ezgokq .cg-article__lead,
#brxe-ezgokq p.cg-article__lead {
  font-size: 1.125rem !important;
  line-height: 1.9 !important;
  letter-spacing: normal !important;
  color: var(--cg-text);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cg-line);
  margin-bottom: 1.5rem !important;
}

/* B4. 重點框（Note/Callout）——內含 <p>，同樣需要覆蓋全站段落規則 */
.cg-note {
  display: flex;
  gap: 0.6rem;
  background: var(--cg-blue-tint);
  border-left: 4px solid var(--cg-blue);
  border-radius: var(--cg-radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: var(--cg-fs-small);
  color: var(--cg-blue-dark);
  margin: 1.2em 0;
}
.cg-note::before { content: "📝"; flex-shrink: 0; }
#brxe-ezgokq .cg-note p {
  font-size: var(--cg-fs-small) !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  color: inherit;
}

/* B5. 目錄（TOC） */
.cg-toc { background: var(--cg-surface); border-radius: var(--cg-radius-sm); margin: 1.5em 0; padding: 0.8rem 1.1rem; }
.cg-toc summary { font-weight: 700; color: var(--cg-blue-dark); cursor: pointer; }
.cg-toc ol { margin: 0.6em 0 0 !important; padding-left: 1.2em !important; }
.cg-toc a { color: var(--cg-blue); font-size: 0.9rem; line-height: 2; text-decoration: none; }
.cg-toc a:hover { text-decoration: underline; }
@media (min-width: 992px) { .cg-toc__mobile { } } /* 桌機預設展開由 HTML details[open] 屬性決定，見 article_redesign.py */

/* B6. FAQ 區塊——summary 之外另有 <p>（答案），同樣需要覆蓋全站段落規則 */
.cg-faq-item { border: 1px solid var(--cg-line); border-radius: var(--cg-radius-sm); margin-bottom: 0.7rem; padding: 0.9rem 1.1rem; }
.cg-faq-item summary { font-weight: 700; color: var(--cg-blue-dark); cursor: pointer; list-style: none; }
.cg-faq-item summary::-webkit-details-marker { display: none; }
.cg-faq-item summary::after { content: "＋"; float: right; color: var(--cg-blue); }
.cg-faq-item[open] summary::after { content: "－"; }
#brxe-ezgokq .cg-faq-item p {
  margin: 0.7em 0 0 !important;
  font-size: var(--cg-fs-body) !important;
  line-height: 1.8 !important;
  letter-spacing: normal !important;
  color: var(--cg-text);
}

/* B7. 文末 CTA 區塊
 * 2026-08-11 董事長註解 choogo-20260811-2294d988371e 修正：
 * 舊版（漸層背景＋無 #brxe-ezgokq 前綴的元件選擇器）在 cascade 上輸給本檔 A 段
 * 的全站覆蓋規則——`#brxe-ezgokq h2`／`#brxe-ezgokq p`／`#brxe-ezgokq a`
 * 皆為「ID + 標籤」特異度，高於原本「純 class」選擇器，實際渲染結果經
 * computed style 實測（見部署報告）：
 *   標題 color 被奪回成 --cg-blue-dark（深藍字疊深藍/漸層底，接近不可讀）
 *   次要文字 color 被奪回成 --cg-text（深灰字疊藍底）
 *   按鈕文字 color 被奪回成 --cg-blue 且 text-decoration:underline（變成普通藍色底線連結字，非白色實心按鈕字）
 *   標題還額外被通用 h2 規則加上左側 6px 藍色色條＋1rem 左內距（章節標題母題），
 *   在置中的 CTA 卡片內造成一根偏移的藍色小豎線，視覺上是排版錯誤。
 * 修法：①元件選擇器一律補 #brxe-ezgokq 前綴＋!important，用「ID+class」
 * 特異度正面壓過全站「ID+標籤」規則，奪回白字／按鈕白字／清除誤植的左色條
 * ②背景由雙色漸層改單一實色 --cg-blue-dark——WCAG 對比實測白字/深藍底
 * 10.31:1（遠超本文淨色 4.5:1 門檻），漸層淺端 --cg-blue 對白字僅 3.71:1
 * 不足以通過內文字級，故不能維持漸層或改用更淺的品牌藍當滿版底色；
 * 用單一實色取代雙色漸層本身即降低了「兩色混雜」的視覺雜訊，是在守住對比
 * 門檻前提下能做到的「清爽」處理 ③加綠色頂部 4px 強調線（沿用既有
 * CP 值語意色，非新色）＋加大內距＋改用既有 --cg-shadow-lift 柔和陰影，
 * 取代原本無陰影的重色實心色塊觀感；CTA 按鈕維持綠色不變。
 * 全部 token 沿用 deliverables/WO-CHOOGO-SSG/article-redesign-spec-20260808.md
 * 第 4 節既有變數，未發明新色。
 */
.cg-article-cta {
  position: relative;
  background: var(--cg-blue-dark);
  border-radius: var(--cg-radius);
  padding: 2.75rem 2.25rem;
  text-align: center;
  color: #fff;
  margin: 2.5em 0 0;
  box-shadow: var(--cg-shadow-lift);
  overflow: hidden;
}
.cg-article-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cg-green);
}
#brxe-ezgokq .cg-article-cta__title {
  color: #fff !important;
  font-size: 1.375rem !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  padding-left: 0 !important;
  border-left: 0 !important;
  position: static !important;
}
#brxe-ezgokq .cg-article-cta__sub {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 1.3rem !important;
}
#brxe-ezgokq .cg-btn--primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2.2rem; border-radius: 999px;
  background: var(--cg-green); color: #fff !important; font-weight: 800; font-size: 1rem;
  text-decoration: none !important; box-shadow: 0 8px 18px rgba(25,184,92,0.32);
}
#brxe-ezgokq .cg-btn--primary:hover { background: #14a04f; color: #fff !important; }
@media (max-width: 767px) { .cg-article-cta { padding: 2.25rem 1.5rem; } .cg-btn--primary { width: 100%; } }

/* ==========================================================================
   C. 部落格分類頁卡片版型（`/blog/travel-guide/`／`/blog/before-you-go/`）

   2026-08-14 改版（WO-CHOOGO-GOLIVE-001 工作流 #8，部落格回歸＋資訊架構改造）：
   原本「單頁兩個 Bricks x-tabs JS 面板」版型已整組移除（含 C2 手機空白頁修復——
   該修復本身是「兩個 panel 堆疊在同一頁」架構下才需要的權宜之計，新架構每個
   分類各自獨立成頁，只顯示自己的內容，沒有「另一個 panel」要堆疊或隱藏，問題
   本身不存在，不需要對應修復）。新版由 `build/blog_categories.py` 產生純
   靜態、零 JS 依賴的分類頁殼層：`.cg-blog-hub`（沿用既有 `#brxe-oepzwt` 容器
   id，continue 吃全站既有內嵌樣式的寬度／間距規則，不重新定義版心）＋
   `.cg-blog-tabs`（真實 `<a href>` 導航，不是 JS 假分頁——點擊＝整頁導航到另一
   個分類頁）＋內容區（`.cg-card-grid` 有文章時／`.cg-blog-empty` 無文章時）。
   ========================================================================== */

/* 分類頁頁首：眉標「部落格」＋ H1（分類名稱本身，例：「行前必看」）——全頁僅
   一個 H1，滿足既有驗收基準（沿用文章頁／舊列表頁同一條規則）。 */
.cg-blog-eyebrow {
  font-size: var(--cg-fs-small);
  color: var(--cg-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 0.4rem;
}
.cg-blog-title { font-size: var(--cg-fs-h1); color: var(--cg-blue-dark); font-weight: 900; margin: 0 0 1.2rem; }
@media (min-width: 768px) { .cg-blog-title { font-size: 2.25rem; } }

/* 分類 tab 列——視覺沿用既有 tab 外觀慣例（底線指示目前分類），但底層是純
   `<a>` 清單，不依賴任何 JS 元件（Bricks x-tabs 的 `data-x-tabs`／URL 參數讀取
   機制已隨舊版整組淘汰，見 blog_categories.py 模組檔頭）。 */
.cg-blog-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--cg-line);
  margin: 0 0 1.75rem;
}
.cg-blog-tab {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cg-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cg-blog-tab:hover { color: var(--cg-blue-dark); }
.cg-blog-tab--active,
.cg-blog-tab--active:hover {
  color: var(--cg-blue-dark);
  border-bottom-color: var(--cg-blue);
}

/* 空狀態（Wendy 判斷準則「每個列表要定義空狀態」，見
   deliverables/WO-CHOOGO-SSG/overview-redesign-spec-20260811.md §5.4 同一原則
   的另一次落地）：文案簡潔，樣式沿用站上卡片容器語彙（淡藍灰底、圓角），不
   另起爐灶。 */
.cg-blog-empty {
  background: var(--cg-surface);
  border-radius: var(--cg-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--cg-muted);
  font-size: 0.95rem;
}

.cg-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cg-card {
  display: block; color: inherit; text-decoration: none;
  background: var(--cg-white); border: 1px solid var(--cg-line); border-radius: var(--cg-radius);
  overflow: hidden; box-shadow: var(--cg-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cg-card:hover { transform: translateY(-4px); box-shadow: var(--cg-shadow-lift); color: inherit; }
.cg-card__media { aspect-ratio: 16/9; overflow: hidden; }
.cg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.cg-card:hover .cg-card__media img { transform: scale(1.04); }
.cg-card__body { padding: 1.1rem 1.2rem 1.3rem; }
.cg-card__body .cg-tag { margin-bottom: 0.5rem; }
.cg-card__title { font-size: 1.05rem; line-height: 1.5; color: var(--cg-blue-dark); font-weight: 700; margin: 0.3em 0 0.4em; }
.cg-card__excerpt { font-size: 0.85rem; color: var(--cg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 991px) { .cg-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .cg-card-grid { grid-template-columns: 1fr; gap: 1rem; } .cg-card__excerpt { display: none; } }

/* ==========================================================================
   D. 系統/瀏覽器強制深色模式防呆（規格第 0/7 節：站上無真正 dark 主題，只需確保
      不會被瀏覽器/系統強制反色到不可讀，不要求做出對等深色版型）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .cg-article-body, .cg-article__head, .cg-breadcrumb, .cg-toc, .cg-faq-item,
  .cg-note, .cg-card, .cg-card-grid {
    color-scheme: light;
  }
}