/* ============================================================
   article-components.css
   醫藥新聞編輯台｜文章內文元件定案樣式（給 blog-mockup 官網套用）

   範圍：只有「文章正文內的元件」——stat-strip／goal-grid／quad-grid／
   chart-card／em／timeline／inline-cta／cta-final／quiz-promo-grid／
   editor-note／inline-figure／inline-figure.figure-portrait／
   compare-grid／compare-card／range-bar／growth（第四種狀態色）。
   不含整頁版型、導覽／頁尾、文章卡片外框。

   色票來源：《部落格文章頁-視覺設計規格書》v1.4（2026-08-24）＋
   《美編常用元件》（chart-card §1、quiz-promo-grid §2）。
   選擇器統一加 .article-body 前綴，避免影響頁面其他區塊。

   最後更新：2026-09-10（健保降血脂新制：新增 insight-card 淺綠知識卡、
   chart-table.has-def-col 定義欄欄寬、.lead-accent 列表小標粉色）。
   2026-09-04（新增第四種狀態色 growth，見 :root 區塊說明——
   語意是「介入後更積極正向的結果」，跟既有 healthy（良好／對照組）不同；
   選色過程是先做 pine／moss／jade 三色相選項稿，跟現有 sage／olive／
   quad-full／range-healthy 並排比對，再把 pine／moss 兩個候選鋪進三種
   頁面底色與 chart-card／compare-card 情境比對，最後定案色相介於 sage
   與 healthy 藍之間的 pine 版本。補上 bar-fill／bar-value／legend-dot／
   pie-dot／compare-card.accent-growth 對應 class，跟現有 healthy 家族
   的收錄範圍一致）。同日稍早（表格：tbody th 改用正文色，避免列標跟
   goal-row 一樣因 --text-soft 對比不足。同日稍早 ACSM阻力訓練指引：補上早期預覽稿用的
   .bar-fill.muted，對應中性比較色 indigo，避免長條圖填色變透明；
   同時把 goal-row 列標改用正文色，--text-soft 在白底卡片上對比不足。
   同日稍早：呼吸法科學或玄學報導新增第12a節
   inline-figure.figure-portrait，直式照片桌機縮小置右浮動＋文字繞排、
   手機裁切成跟橫式內文圖同高的變體；同時補上.article-body h2{clear:both}
   避免浮動圖片跨到下一個小標）。2026-08-29（CGM血糖曲線報導再補一個段落級文字工具class
   p.nav-hint，用於文中「你也可以先跳到底下看完重點整理」這類讀者導引
   句獨立成一整段、字級縮小＋改用次要文字色。同日稍早已新增第16節
   range-bar／range-bar-ticks／range-bar-legend，血糖區間分段長條圖，
   用於視覺化TIR／TBR／TAR管理目標；屬於「提案／官網尚未支援」狀態。
   同時補上legend-dot.caution／legend-dot.healthy兩個原本漏掉的基本色階）。
   2026-08-24（色彩延伸提案定案，三案全數收錄進 :root，新增第15節
   工具class＋完整使用邏輯見規格書§1.1；本篇報導的圓餅圖「其他」類原本
   試用方案C焦糖棕，跟caution金色肉眼太像又換成方案A鼠尾草綠，分齡
   比較圖則改用方案B深淺兩階表示風險升降方向，兩處都是定案後的第二輪
   修正，過程也一併寫進規格書，避免同樣的「選色沒有跟鄰近色比對」再發生）。2026-08-24（隨休閒性藥物中風報導一起交付，新增第13節
   compare-legend／compare-group（chart-card內的分齡雙欄比較延伸樣式）
   與 compare-grid／compare-card（全新左右對照卡片元件，屬於「提案／
   官網尚未支援」，需要網站工程師確認之後才能算是跟 window-grid 一樣
   的正式收錄元件）。2026-08-21（隨 mRNA醫學革命 EP01 一起交付，新增
   goal-card 三色 accent、.em、timeline；同日取得 weekly-digest-vol01-v3.html
   原始檔後，逐值核對修正 chart-card 數字樣式與 quiz-promo-grid）
   ============================================================ */

/* ---- 色彩變數（對齊視覺設計規格書 §1；若官網全域已定義同名變數，
   這裡的值必須跟全域一致，不要另開一份不同數字） ---- */
:root {
  --bg-card:   #FFFFFF;
  --text:      #5A473C;
  --text-soft: #B79A8D;
  --line:      #F0D9D0;
  --pink:      #E9A99C;
  --pink-soft: #FCE9E4;
  --bg-alt:    #FBEEEA;
  --status-critical: #C2604E; /* 警示：填色／邊框用（bar-fill、goal-card 邊條） */
  --status-caution:  #C08A3E; /* 提醒：填色／邊框用 */
  --status-healthy:  #2D6A8A; /* 良好／對照：填色／邊框用 */
  /* growth：第四種狀態色，2026-09-04 呼吸法科學或玄學報導定案。跟 healthy
     不同語意——healthy 是「良好／對照組」，growth 是「介入後更積極正向的
     結果」（例如實驗組 vs 對照組的改善幅度）。色相 H150°，選色過程見
     選項稿 green_options.html／green_options_context.html：跟現有的
     sage／olive／quad-full／range-healthy 並排比對過，也鋪進三種頁面底色
     （--bg／--bg-alt／--bg-card）比對融合度，最後選定跟共用狀態色同一套
     降飽和公式、色相介於 sage 與 healthy 藍之間的版本（候選代號 pine）。 */
  --status-growth:       #509B75;
  --status-growth-light: #97C4AD;
  --status-growth-dark:  #2E6147;
  /* 注意：文字用的「危急紅」是 #A13A2F，跟上面填色用的 --status-critical
     (#C2604E) 是兩個不同色號，不要合併成同一個變數——這是規格書沿用舊版
     示意稿另外挑的「文字強調紅」，用在白底上要比填色的降飽和紅更深、更好讀，
     2026-08-18 已跟網站工程師確認 quad-grid 是官網正式支援的元件，這組
     文字色維持原樣，不要改成 --status-critical。 */
  --text-critical: #A13A2F;

  /* ---- 色彩延伸提案（2026-08-24 定案，三案全數收錄）----
     來源：色彩延伸提案 Artifact（方案A擴增色相／方案B深淺雙階／方案C暖色系延伸）。
     這些是「可選色」，不是每篇文章都要用；沿用既有 critical／caution／healthy／
     highlight 語意的圖表，預設還是用原本四色，只有在分類數量超過四種、或需要
     「中性比較群組」「同分類強弱層次」時才挑用下面這些。 */
  --accent-indigo:     #5B6E8C; /* 方案A：中性但有存在感——中性比較群組、或取代「其他」用的灰色 */
  --accent-sage:       #5C8562; /* 方案A：正面／良好狀態的另一種選擇 */
  --accent-plum:       #8B5A72; /* 方案A：第六個分類色，介於粉與藍之間 */
  --status-critical-light: #E0A99B; /* 方案B：危急色淺階，同分類內表示較輕程度 */
  --status-critical-dark:  #8B3E2E; /* 方案B：危急色深階，同分類內表示最嚴重程度 */
  --status-caution-light:  #E0C68A;
  --status-caution-dark:   #8C6428;
  --status-healthy-light:  #7FA8BE;
  --status-healthy-dark:   #1C4A61;
  --accent-terracotta: #D97B4F; /* 方案C：介於危急紅與提醒金之間的中段層次 */
  --accent-caramel:    #A97C50; /* 方案C：取代圖表裡的中性灰，當「其他／未分類」 */
  --accent-wine:       #7A3B42; /* 方案C：比危急紅更深，留給最高等級警訊 */
  --accent-olive:      #7C8B5A; /* 方案C：取代對照藍，當「正面／良好」的暖色版本 */

  /* range-bar 專屬色票（特例，2026-08-29 CGM血糖曲線報導定案，詳見視覺
     設計規格書 §1.2）：這組顏色刻意比上面的 --status-critical/caution/
     healthy 更飽和、更接近臨床CGM App報告的紅綠燈配色，只給 range-bar
     這個元件用，不要跟 --status-* 共用變數合併，也不要拿這組顏色去改
     其他圖表（chart-card、pie-chart、compare-grid 等）的色票。 */
  --range-healthy:       #2FA968; /* 翠綠，對應TIR目標範圍 */
  --range-caution:       #F5B400; /* 亮黃，對應TBR／TAR的一般警戒 */
  --range-critical:      #E5483C; /* 紅，對應TAR>250 mg/dL */
  --range-critical-dark: #C23327; /* 深紅，對應TBR<54 mg/dL */

  /* insight-card 專屬淺綠底（2026-09-08 定案）：跟 --pink-soft 同一套
     明度公式（H129° 同 --accent-sage 色相，S40 L94），只給 insight-card 用 */
  --sage-soft: #EAF6EB;
}

/* ============================================================
   1. stat-strip／stat-highlight／stat-critical
   關鍵統計數字重點框。定案長相：白底 + 細線空心框（不是粉底實心塊）。
   ============================================================ */
.article-body .stat-strip {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.75;
  margin: 26px 0 30px;
}
.article-body .stat-strip .stat-critical { color: var(--text-critical); }
.article-body .stat-strip .stat-highlight { color: var(--pink); }

/* ============================================================
   2. goal-grid／goal-card／goal-title／goal-row
   規格／目標卡片組，直向堆疊。左邊色條預設粉，可用 accent-rust／
   accent-gold（狀態色）或 accent-terracotta／accent-caramel／
   accent-wine（方案C暖色延伸）換色，用來區隔三種不同性質的卡片。
   ============================================================ */
.article-body .goal-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 30px;
}
.article-body .goal-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pink);
  border-radius: 12px;
  padding: 20px 22px;
}
.article-body .goal-card.accent-rust { border-left-color: var(--status-critical); }
.article-body .goal-card.accent-gold { border-left-color: var(--status-caution); }
.article-body .goal-card.accent-terracotta { border-left-color: var(--accent-terracotta); }
.article-body .goal-card.accent-caramel    { border-left-color: var(--accent-caramel); }
.article-body .goal-card.accent-wine       { border-left-color: var(--accent-wine); }
.article-body .goal-card .goal-title {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 10px;
}
.article-body .goal-card .goal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.article-body .goal-card .goal-row span {
  flex-shrink: 0;
  color: var(--text);
}
.article-body .goal-card .goal-row:last-child { border-bottom: none; }
.article-body .goal-card .goal-row strong {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

/* ============================================================
   3. window-grid／window-card
   ⚠️ 尚未定案。編輯台這邊目前沒有任何文章實際用過這個元件，
   《美編常用元件》只列了用途（「三種人／三種行動」），沒有任何
   pixel-precise 的 CSS 數值或範例 HTML。
   請不要照這裡的猜測值上刊——等編輯台真的要用到這個元件、跟視覺
   設計規格書一起定案後，再補進這份檔案。目前故意留白，避免「預覽
   跟正式站各自猜一版」。
   ============================================================ */

/* ============================================================
   4. quad-grid／quad-card／quad-name／quad-desc
   2×2 狀態方框（危急／偏低／健康／飽滿），2026-08-18 已跟網站工程師
   確認官網正式支援，class 名稱維持 quad-grid。
   ============================================================ */
.article-body .quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 30px;
}
.article-body .quad-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
}
.article-body .quad-card .quad-name {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}
.article-body .quad-card .quad-name.critical { color: #A13A2F; }
.article-body .quad-card .quad-name.low      { color: #B8863B; }
.article-body .quad-card .quad-name.healthy  { color: #2D6A8A; }
.article-body .quad-card .quad-name.full     { color: #4A7A5A; }
.article-body .quad-card .quad-desc {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.7;
}

/* ============================================================
   5. chart-card／chart-title／chart-subtitle／bar-row／bar-fill／bar-value
   多組百分比對照長條圖。語意色 class 名稱以《美編常用元件》§1 為準
   （critical／caution／healthy／highlight，該文件標註「已在站上」）——
   跟編輯台預覽腳本 build_preview.py 目前用的 muted／highlight 兩類命名
   不一致，這份 CSS 以「已在站上」的版本為準，預覽腳本之後要同步跟改，
   避免同一元件在預覽與正式站各用不同 class 名稱。
   ============================================================ */
.article-body .chart-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 26px 20px;
  margin: 30px 0;
}
.article-body .chart-title {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 4px;
}
.article-body .chart-subtitle { font-size: 12.5px; color: var(--text-soft); margin: 0 0 24px; }
.article-body .bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.article-body .bar-label { width: 108px; flex-shrink: 0; font-size: 12px; color: var(--text-soft); text-align: right; }
.article-body .bar-track { flex: 1; height: 20px; background: var(--bg, #FDF8F3); border-radius: 5px; overflow: hidden; }
.article-body .bar-fill { height: 100%; border-radius: 5px; }
.article-body .bar-fill.critical  { background: var(--status-critical); }
.article-body .bar-fill.caution   { background: var(--status-caution); }
.article-body .bar-fill.healthy   { background: var(--status-healthy); }
.article-body .bar-fill.growth    { background: var(--status-growth); } /* 積極正向結果，2026-09-04 起可用，見§1 :root growth 說明 */
.article-body .bar-fill.highlight { background: var(--pink); }
.article-body .bar-fill.indigo    { background: var(--accent-indigo); } /* 中性比較群組色，2026-08-24 起可用 */
.article-body .bar-fill.muted     { background: var(--accent-indigo); } /* 早期預覽稿別名，等同 indigo；沒有填色會長條變透明 */
.article-body .bar-value {
  min-width: 46px;
  flex-shrink: 0;
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.article-body .bar-value.critical  { color: var(--status-critical); }
.article-body .bar-value.caution   { color: var(--status-caution); }
.article-body .bar-value.healthy   { color: var(--status-healthy); }
.article-body .bar-value.growth    { color: var(--status-growth-dark); } /* 白底上比 --status-growth 更深，讀起來更清楚 */
.article-body .bar-value.indigo    { color: var(--accent-indigo); }
.article-body .bar-value.critical-light { color: var(--status-critical-light); }
.article-body .bar-value.critical-dark  { color: var(--status-critical-dark); }
.article-body .bar-value.caution-light  { color: var(--status-caution-light); }
.article-body .bar-value.caution-dark   { color: var(--status-caution-dark); }
.article-body .bar-value.healthy-light  { color: var(--status-healthy-light); }
.article-body .bar-value.healthy-dark   { color: var(--status-healthy-dark); }
.article-body .bar-value.growth-light   { color: var(--status-growth); }
.article-body .bar-value.growth-dark    { color: var(--status-growth-dark); }
.article-body .chart-foot { margin-top: 4px; font-size: 11.5px; color: var(--text-soft); text-align: left; }

/* ============================================================
   5b. .chart-table — 文字比較表（例如兩款疫苗規格對照）
   跟 .chart-card 同一個外層卡片樣式，內容改用 <table> 呈現逐項規格對照。
   2026-08-26 帶狀疱疹疫苗／失智症報導新增，第一次實際套用。
   ============================================================ */
.article-body .chart-table {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 20px;
  margin: 30px 0;
}
.article-body .chart-table .chart-title { margin: 0 0 20px; }
.article-body .chart-table-scroll { overflow-x: auto; }
.article-body .chart-table table { width: 100%; min-width: 480px; border-collapse: collapse; }
.article-body .chart-table table.has-def-col { min-width: 520px; table-layout: fixed; }
.article-body .chart-table table.has-def-col th:nth-child(1) { width: 18%; }
.article-body .chart-table table.has-def-col th:nth-child(2),
.article-body .chart-table table.has-def-col td.def-col { width: 42%; }
.article-body .chart-table table.has-def-col th:nth-child(3) { width: 20%; }
.article-body .chart-table table.has-def-col th:nth-child(4) { width: 20%; }
.article-body .chart-table td.def-col { color: var(--text-soft); }
.article-body .chart-table th,
.article-body .chart-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.article-body .chart-table thead th {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  padding-bottom: 14px;
}
.article-body .chart-table thead th:first-child { width: 110px; }
.article-body .chart-table-sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-soft); margin-top: 3px; }
.article-body .chart-table tbody th {
  text-align: left;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  padding-right: 14px;
}
.article-body .chart-table tbody tr:last-child th,
.article-body .chart-table tbody tr:last-child td { border-bottom: none; }
.article-body .chart-table .chart-foot { margin-top: 14px; text-align: left; }
@media (max-width: 600px) {
  .article-body .chart-table th, .article-body .chart-table td { font-size: 12.5px; padding: 10px 10px; }
  .article-body .bar-label { width: 88px; font-size: 11px; }
  .article-body .bar-value { font-size: 14px; }
  .article-body .bar-row { gap: 8px; }
}

/* ============================================================
   6. .em — 段中重點強調
   字重、顏色都跟內文一樣，只在字腳托一層淡粉（--pink-soft），像螢光筆。
   不要用底線、不要加粗、不要整字上色。（視覺設計規格書 4.14 為權威來源，
   2026-08-21 曾因憑印象自己編錯顏色，已改回這個定案版本。）
   ============================================================ */
.article-body .em {
  font-weight: inherit;
  color: inherit;
  background-image: linear-gradient(var(--pink-soft), var(--pink-soft));
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  padding: 0 .04em;
}

/* 段中重點強調（紅字版）：跟 .em 同一層級，但用在「純粹要換色標出關鍵詞」
   而非「螢光筆停頓感」的場合，不加粗，只變色。跟 .term-hl（粗體＋紅）分開，
   一個是純變色、一個是變色＋加粗，依內容需要的強調程度挑選。
   2026-08-26 帶狀疱疹疫苗／失智症報導新增，第一次實際套用。 */
.article-body .red-text { color: var(--text-critical); font-weight: inherit; }
.article-body .lead-accent { color: var(--pink); }

/* 段落級／讀者導引提示（p.nav-hint）：獨立成一整段的輕量提示句，
   例如「你也可以先跳到底下看完重點整理」這類跳轉引導語，不是內文重點，
   要跟正文明顯拉開視覺層級——比內文小一號、用次要文字色，不加粗、不畫底線。
   段內連結沿用既有 .article-body p a 規則（accent色），不受這裡影響，
   維持可辨識的可點擊狀態。2026-08-29 CGM血糖曲線報導新增，第一次實際套用。 */
.article-body p.nav-hint {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.8;
  margin: -10px 0 26px;
}

/* ============================================================
   7. ul.timeline／term-hl
   時間軸列表：左側連接線＋每個時間點一個圓點；關鍵詞紅字強調沿用
   quad-grid「危急」文字色 #A13A2F。
   ============================================================ */
.article-body ul.timeline {
  list-style: none;
  padding-left: 0;
  margin: 0 0 30px;
}
.article-body ul.timeline li {
  position: relative;
  padding: 0 0 18px 24px;
  font-size: 15.5px;
  line-height: 1.8;
  border-left: 2px solid var(--line);
  margin-left: 4px;
  margin-bottom: 0;
}
.article-body ul.timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--bg-card);
}
.article-body ul.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.article-body .term-hl { color: var(--text-critical); font-weight: 700; }

/* ============================================================
   8. inline-cta — 單一深色膠囊按鈕
   ============================================================ */
.article-body a.inline-cta {
  display: inline-block;
  background: var(--accent, #241C16);
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 999px;
  margin: 0 2px;
}

/* ============================================================
   9. cta-final — 文末導流卡片（問句／按鈕／補充說明三段置中）
   ============================================================ */
.article-body .cta-final {
  margin: 44px 0 8px;
  padding: 36px 30px 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--pink-soft);
  text-align: center;
}
.article-body .cta-final p {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.8;
}
.article-body .cta-final p:last-child {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}
.article-body .cta-final a.inline-cta {
  margin: 0;
  font-size: 15px;
  padding: 11px 30px;
}
.article-body .cta-final a:not(.inline-cta) {
  color: var(--text);
}

/* ============================================================
   10. quiz-promo-grid／quiz-promo-card
   定案來源：weekly-digest-vol01-v3.html（2026-08-21 使用者提供原始
   檔，逐值核對過，取代先前的估算草稿）。
   ============================================================ */
.article-body .quiz-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0;
}
.article-body .quiz-promo-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none !important;
}
.article-body .quiz-promo-kicker {
  margin: 0 0 10px;
  font-family: var(--sans, 'Jost', 'Helvetica Neue', 'PingFang TC', sans-serif);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 2.4px;
  color: var(--text-soft);
}
.article-body .quiz-promo-title {
  margin: 0 0 12px;
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .4px;
  color: var(--text);
}
.article-body .quiz-promo-meta {
  margin: 0;
  font-family: var(--sans, 'Jost', 'Helvetica Neue', 'PingFang TC', sans-serif);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 1.4px;
  color: var(--text-soft);
}
@media (max-width: 768px) {
  .article-body .quiz-promo-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   11. editor-note — 詩詩觀點引言卡（第一人稱心得段落）
   不在需求文件的明列清單，但幾乎每篇文章都會用到，一併附上定案樣式。
   ============================================================ */
.article-body .editor-note {
  background: var(--pink-soft);
  border-radius: 20px;
  padding: 34px 36px;
  margin: 40px 0;
}
.article-body .editor-note .quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  line-height: 0.4;
  color: var(--pink);
  display: block;
}
.article-body .editor-note .quote-mark.close { text-align: right; }
.article-body .editor-note p {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text);
  margin: 14px 0;
}
.article-body .editor-note .attribution {
  text-align: right;
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 6px 0 0;
}

/* ============================================================
   11a. insight-card — 淺綠知識重點卡
   2026-09-08 健保降血脂新制報導首次使用。結構仿 editor-note，
   但不是第一人稱心得，不用引號與署名，改用小標籤標示重點知識。
   ============================================================ */
.article-body .insight-card {
  background: var(--sage-soft);
  border-radius: 20px;
  padding: 34px 36px;
  margin: 40px 0;
}
.article-body .insight-card .insight-label {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4A7A5A;
  margin: 0 0 14px;
}
.article-body .insight-card p {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

/* ============================================================
   12. inline-figure — 正文中穿插的照片（跟置頂圖不同：四角都圓）
   ============================================================ */
.article-body .inline-figure { margin: 36px 0; }
.article-body .inline-figure img { width: 100%; border-radius: 16px; display: block; }
.article-body .inline-figure figcaption {
  font-size: 12.5px;
  color: var(--text-soft);
  font-style: italic;
  margin-top: 12px;
}

/* 12a. inline-figure.figure-portrait — 直式照片變體，2026-09-04呼吸法報導首次使用。
   桌機：縮小置右浮動，讓文字接續在圖片左邊；手機：不滿版直放，裁切成
   跟橫式內文圖差不多的高度（3:2，靠上裁切保留人臉/主體）。 */
@media (min-width: 641px) {
  .article-body .inline-figure.figure-portrait {
    float: right;
    width: 42%;
    margin: 6px 0 26px 30px;
  }
}
@media (max-width: 640px) {
  .article-body .inline-figure.figure-portrait { margin: 28px 0; }
  .article-body .inline-figure.figure-portrait img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 22%;
  }
}
.article-body h2 { clear: both; }

/* ============================================================
   13. compare-legend／compare-group／compare-title／compare-grid／compare-card
   （chart-card 內的雙欄比較延伸樣式 ＋ 全新的左右兩欄對照卡片，2026-08-24
   休閒性藥物中風報導首次使用：分齡風險比較圖、主動求助 vs 被查獲對照卡）
   ============================================================ */
.article-body .compare-legend { display: flex; gap: 20px; margin: 0 0 20px; font-size: 12px; color: var(--text-soft); }
.article-body .legend-item { display: flex; align-items: center; gap: 6px; }
.article-body .legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.article-body .legend-dot.highlight { background: var(--pink); }
.article-body .legend-dot.critical { background: var(--status-critical); }
.article-body .legend-dot.indigo { background: var(--accent-indigo); }
.article-body .legend-dot.critical-light { background: var(--status-critical-light); }
.article-body .legend-dot.critical-dark  { background: var(--status-critical-dark); }
.article-body .legend-dot.caution-light  { background: var(--status-caution-light); }
.article-body .legend-dot.caution-dark   { background: var(--status-caution-dark); }
.article-body .legend-dot.healthy-light  { background: var(--status-healthy-light); }
.article-body .legend-dot.healthy-dark   { background: var(--status-healthy-dark); }
.article-body .legend-dot.caution { background: var(--status-caution); } /* 原本這裡漏了 caution／healthy 基本階，2026-08-29 range-bar 補上 */
.article-body .legend-dot.healthy { background: var(--status-healthy); }
.article-body .legend-dot.growth { background: var(--status-growth); }
.article-body .legend-dot.growth-light { background: var(--status-growth-light); }
.article-body .legend-dot.growth-dark  { background: var(--status-growth-dark); }
.article-body .compare-group { margin-bottom: 22px; }
.article-body .compare-group:last-child { margin-bottom: 0; }
.article-body .compare-title {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.article-body .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 30px; }
.article-body .compare-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pink);
  border-radius: 14px;
  padding: 20px 20px;
}
.article-body .compare-card.accent-positive { border-top-color: var(--status-healthy); }
.article-body .compare-card.accent-positive .compare-card-title { color: var(--status-healthy); }
.article-body .compare-card.accent-negative { border-top-color: var(--status-critical); }
.article-body .compare-card.accent-negative .compare-card-title { color: var(--status-critical); }
.article-body .compare-card.accent-growth { border-top-color: var(--status-growth); } /* 介入後更積極正向的結果，跟accent-positive（單純良好/對照）語意不同 */
.article-body .compare-card.accent-growth .compare-card-title { color: var(--status-growth-dark); }
.article-body .compare-card-title {
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 10px;
}
.article-body .compare-card ul { margin: 0; padding-left: 18px; }
.article-body .compare-card li { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin-bottom: 6px; }
.article-body .compare-card li:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .article-body .compare-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   14. pie-chart／pie-legend — 純CSS圓餅圖（conic-gradient），2026-08-24
   休閒性藥物中風報導首次使用：台灣查獲毒品結構圖
   ============================================================ */
.article-body .pie-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 10px 0 4px; }
.article-body .pie-chart { width: 160px; height: 160px; border-radius: 50%; flex-shrink: 0; }
.article-body .pie-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 200px; }
.article-body .pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.article-body .pie-legend-item strong {
  color: var(--text);
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  margin-left: auto;
  padding-left: 12px;
}
.article-body .pie-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.article-body .pie-dot.critical { background: var(--status-critical); }
.article-body .pie-dot.caution { background: var(--status-caution); }
.article-body .pie-dot.healthy { background: var(--status-healthy); }
.article-body .pie-dot.other { background: var(--accent-sage); } /* 2026-08-24 原本借用 --line 灰色頂著「其他」類；先試過方案C焦糖棕，但跟caution金色太像肉眼難分，改用方案A鼠尾草綠 */
.article-body .pie-dot.critical-light { background: var(--status-critical-light); }
.article-body .pie-dot.critical-dark  { background: var(--status-critical-dark); }
.article-body .pie-dot.caution-light  { background: var(--status-caution-light); }
.article-body .pie-dot.caution-dark   { background: var(--status-caution-dark); }
.article-body .pie-dot.healthy-light  { background: var(--status-healthy-light); }
.article-body .pie-dot.healthy-dark   { background: var(--status-healthy-dark); }
.article-body .pie-dot.growth         { background: var(--status-growth); }
.article-body .pie-dot.growth-light   { background: var(--status-growth-light); }
.article-body .pie-dot.growth-dark    { background: var(--status-growth-dark); }
@media (max-width: 480px) {
  .article-body .pie-wrap { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   15. 色彩延伸提案 — 新色的通用 modifier class
   2026-08-24 定案。方案A／B／C三案的顏色都已經收錄進 :root（見檔案開頭
   色彩變數區），這裡統一補齊 bar-fill／bar-value／pie-dot／legend-dot
   可以直接用的 class，格式跟既有的 .critical／.caution／.healthy／
   .highlight 完全對齊，之後新文章要用新色，直接加 class 就好，不用另外
   寫 inline style。

   完整使用邏輯（何時用哪一組、依什麼順序判斷）見《部落格文章頁-視覺設計
   規格書》§1.1，這裡只記實際用過的案例，不要只看這裡就自己套：

   - .critical／.caution／.healthy／.highlight（原本四色）：預設語意色，
     表示「嚴重程度」或「整體 vs. 對照組」，大多數圖表不需要用到下面
     這些延伸色，先確認這四色真的不夠用再往下挑。
   - .critical-light／.critical-dark 等（方案B，深淺三階）：**同一個
     色相家族內，用深淺表示同一件事的強弱或方向**，不是拿來做分類。
     本篇報導「分齡風險比較圖」：55歲以下風險比整體高（安非他命、
     古柯鹼）用原本的 critical；風險反而比整體低（大麻）改用
     critical-light，深淺直接對應「風險升高／降低」的方向。
   - .indigo／.sage／.plum（方案A，擴增分類色）：**純粹分類，不代表
     嚴重程度**，分類數量超過四種時才用。本篇報導「台灣查獲毒品結構」
     圓餅圖的「其他」類：先試過方案C的焦糖棕，跟 caution 金色肉眼太
     像分不出來，換成方案A的鼠尾草綠（sage）才有足夠對比——**選色後
     一定要放進實際圖表裡跟鄰近色並排比對，不能只看色票本身夠不夠
     分明。**
   - .terracotta／.caramel／.wine／.olive（方案C，暖色延伸）：整組
     圖表想維持純暖色調、完全不想引入 healthy 用的藍色系時使用。
     目前站上還沒有正式案例（caramel 原本要用在上面那個圓餅圖的
     「其他」類，已經換成 sage，見上一條）。
   ============================================================ */
.article-body .bar-fill.sage        { background: var(--accent-sage); }
.article-body .bar-fill.plum        { background: var(--accent-plum); }
.article-body .bar-fill.terracotta  { background: var(--accent-terracotta); }
.article-body .bar-fill.caramel     { background: var(--accent-caramel); }
.article-body .bar-fill.wine        { background: var(--accent-wine); }
.article-body .bar-fill.olive       { background: var(--accent-olive); }
.article-body .bar-fill.critical-light { background: var(--status-critical-light); }
.article-body .bar-fill.critical-dark  { background: var(--status-critical-dark); }
.article-body .bar-fill.caution-light  { background: var(--status-caution-light); }
.article-body .bar-fill.caution-dark   { background: var(--status-caution-dark); }
.article-body .bar-fill.healthy-light  { background: var(--status-healthy-light); }
.article-body .bar-fill.healthy-dark   { background: var(--status-healthy-dark); }
.article-body .bar-fill.growth-light   { background: var(--status-growth-light); }
.article-body .bar-fill.growth-dark    { background: var(--status-growth-dark); }

.article-body .bar-value.sage       { color: var(--accent-sage); }
.article-body .bar-value.plum       { color: var(--accent-plum); }
.article-body .bar-value.terracotta { color: var(--accent-terracotta); }
.article-body .bar-value.caramel    { color: var(--accent-caramel); }
.article-body .bar-value.wine       { color: var(--accent-wine); }
.article-body .bar-value.olive      { color: var(--accent-olive); }

.article-body .pie-dot.indigo       { background: var(--accent-indigo); }
.article-body .pie-dot.sage         { background: var(--accent-sage); }
.article-body .pie-dot.plum         { background: var(--accent-plum); }
.article-body .pie-dot.terracotta   { background: var(--accent-terracotta); }
.article-body .pie-dot.caramel      { background: var(--accent-caramel); }
.article-body .pie-dot.wine         { background: var(--accent-wine); }
.article-body .pie-dot.olive        { background: var(--accent-olive); }

.article-body .legend-dot.sage      { background: var(--accent-sage); }
.article-body .legend-dot.plum      { background: var(--accent-plum); }
.article-body .legend-dot.terracotta{ background: var(--accent-terracotta); }
.article-body .legend-dot.caramel   { background: var(--accent-caramel); }
.article-body .legend-dot.wine      { background: var(--accent-wine); }
.article-body .legend-dot.olive     { background: var(--accent-olive); }

/* ============================================================
   16. range-bar／range-bar-ticks／range-bar-legend／bracket-row — 血糖區間分段長條圖
   2026-08-29 CGM血糖曲線報導首次使用（TIR／TBR／TAR 管理目標視覺化）。
   屬於「提案／官網尚未支援」，需要網站工程師確認之後才能算是正式收錄
   元件，跟 window-grid、compare-grid 剛推出時狀態相同。
   單一長條依血糖數值（mg/dL）等比例切成5段（危急深／提醒／良好／提醒／
   危急深）。⚠️ 色階用的是專屬的 --range-* 變數（見檔案開頭色彩變數區），
   刻意比站上其他狀態色更飽和、更接近臨床CGM App報告的紅綠燈配色，
   不要跟 --status-critical/caution/healthy 共用變數合併，也不要拿這組
   顏色去改其他圖表，詳見視覺設計規格書 §1.2。
   下方用絕對定位的 span 在對應百分比位置標數值刻度（range-bar-ticks），
   再往下 bracket-row 是選用的括線標示（標出每個色塊對應的目標時間
   百分比），數字統一用深色細字（不跟隨色塊變色、不加粗），保持清爽。
   ============================================================ */
.article-body .range-bar { display: flex; height: 22px; border-radius: 11px; overflow: hidden; margin: 4px 0 6px; }
.article-body .range-seg { height: 100%; }
.article-body .range-seg.critical-dark { background: var(--range-critical-dark); }
.article-body .range-seg.critical { background: var(--range-critical); }
.article-body .range-seg.caution { background: var(--range-caution); }
.article-body .range-seg.healthy { background: var(--range-healthy); }
.article-body .range-bar-ticks { position: relative; height: 16px; margin-bottom: 4px; }
.article-body .range-bar-ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-soft);
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
}
.article-body .bracket-row { position: relative; height: 34px; margin-top: 2px; margin-bottom: 14px; }
.article-body .bracket-row .bracket { position: absolute; top: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line); height: 8px; }
.article-body .bracket-row .bracket-label {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}
.article-body .range-bar-legend { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.article-body .range-bar-legend-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); line-height: 1.65; }
.article-body .range-bar-legend-item .legend-dot { margin-top: 5px; flex-shrink: 0; }
.article-body .legend-dot.range-healthy      { background: var(--range-healthy); }
.article-body .legend-dot.range-caution      { background: var(--range-caution); }
.article-body .legend-dot.range-critical     { background: var(--range-critical); }
.article-body .legend-dot.range-critical-dark{ background: var(--range-critical-dark); }

/* ============================================================
   17. album-grid／album-card／album-entry／podcast-card
   2026-08-31《爵士之詩》節目報導首次使用；2026-09-04 加 album-entry。
   屬於「提案／官網尚未支援」。

   曲目排版擇一（整份曲目區不要混用）：
   A. 各專輯只播一首 → album-grid + album-card（大圖在上、文字在下，一行四張）
   B. 同專輯 ≥2 首 → album-grid album-grid--entries + album-entry
      （左小封面、右曲目；每首歌都是 title+meta；同專輯共用封面）
   Live／非專輯收錄版獨立成格，不併入錄音室專輯。

   文末「收聽本集」：podcast-card + listen-note。
   ============================================================ */
.article-body .album-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 12px;
  margin: 8px 0 36px;
  width: 100%;
}
.article-body a.album-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none !important;
  color: inherit;
}
.article-body .album-card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  border: 1px solid var(--line);
}
.article-body .album-card .album-title {
  margin: 8px 0 2px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}
.article-body .album-card .album-meta {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-soft);
}
/* 曲目列：每首歌文字層級一致；同專輯共用左側封面（2026-09-04） */
.article-body .album-grid.album-grid--entries {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}
.article-body .album-entry {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  min-width: 0;
  color: inherit;
}
.article-body .album-entry > img {
  width: 88px;
  height: 88px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  border: 1px solid var(--line);
}
.article-body .album-entry-tracks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}
.article-body a.album-entry-track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-decoration: none !important;
  color: inherit;
}
.article-body .album-entry-track .album-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}
.article-body .album-entry-track .album-meta {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-soft);
}
.article-body a.album-entry-track:hover .album-title,
.article-body a.album-entry-track:focus-visible .album-title {
  text-decoration: underline;
  text-decoration-color: var(--pink, #E9A99C);
  text-underline-offset: 2px;
}
.article-body figure.podcast-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  margin: 8px 0 16px;
  text-align: left;
}
.article-body figure.podcast-card > a {
  flex-shrink: 0;
  line-height: 0;
}
.article-body figure.podcast-card img {
  width: 148px;
  max-width: none;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin: 0;
  border: 1px solid var(--line);
}
.article-body figure.podcast-card figcaption {
  margin: 0;
  font-style: normal;
  flex: 1;
  min-width: 0;
}
.article-body figure.podcast-card figcaption a {
  display: block;
  font-family: var(--serif, 'LXGW WenKai TC', 'Playfair Display', Georgia, 'Noto Serif TC', serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  text-decoration: none;
  text-align: left;
}
.article-body p > a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--pink, #E9A99C);
  text-underline-offset: 2px;
}
.article-body .listen-note {
  margin: 0 0 36px;
}
.article-body .listen-note p {
  margin: 0 0 4px;
}
.article-body .listen-note p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .article-body .album-grid { grid-template-columns: repeat(2, 1fr); }
  .article-body .album-grid.album-grid--entries { grid-template-columns: 1fr; }
  .article-body .album-entry { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; }
  .article-body .album-entry > img { width: 72px; height: 72px; }
  .article-body figure.podcast-card { gap: 16px; }
  .article-body figure.podcast-card img { width: 112px; }
}