/* ============================================================
   Course Kit 官網 — Blog 文章頁專屬樣式（page-article.css）
   兩篇範本（長文 blog-actual-rate.html／短文 blog-package-checklist.html）
   共用這份檔案，之後 10+ 篇正式文章都吃同一份模板 CSS。
   跟 site.css 一起載入，site.css 在前。
   本檔管：文章 header／封面圖佔位框／關鍵摘要框／TOC（桌機 sticky／
   手機摺疊）／內文排版（表格、清單）／文中 CTA 帶的間距收斂／FAQ／
   作者 bio／相關文章／訂閱區。
   ============================================================ */

/* ---------- 紙感（paper）色板：page-blog.css 同步定義同一份 token，兩檔各留一份
   （CSS custom property 重複定義是 idempotent，不會互相打架）。這組色只有這兩檔的
   「紙感」裝飾用，跟全站 --surface／--heading 分開，因為它要在 dark mode 仍然讀成
   「暖色紙」而不是翻成一般深藍卡片色。light 值＝改動前的原始 hex，數值不變，
   零視覺變化；dark 值見檔案末尾 :root[data-theme="dark"] 覆寫區塊。 ---------- */
:root{
  --paper-bg:#fbf7e4; --paper-bg-2:#f3ecd6;
  --paper-border:#e9e2c4; --paper-border-2:#e2d9b4;
  --paper-rule:rgba(105,125,155,.24);
  --paper-ink:#5f5a45; --paper-ink-muted:#9a9276; --paper-ink-soft:#8a7b56;
  --paper-accent:#a08f4e;
  --paper-tag-bg:#fff; --paper-chip-bg:rgba(255,255,255,.86);
}

/* ---------- 文章 header ---------- */
.art-head{max-width:78ch}
.art-head .tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  color:var(--brand-text);background:var(--brand-tint-2);border:1px solid var(--brand-border);
  border-radius:999px;padding:5px 14px;margin-bottom:14px}
.art-head h1{margin-top:0}
.art-head .art-sub{font-size:clamp(16px,1.9vw,19px);color:var(--ink-2);margin-top:14px;max-width:60ch}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:20px;font-size:var(--fs-sm);color:var(--faint)}
.art-meta .dot{opacity:.6}

/* ---------- 紙感抬頭（.art-head.paper）2026-08-08，Lucy 選 _demo-blog-paper.html 方向 C ----------
   只有 blog 兩篇內頁掛 .paper。`.art-head` 本身被 12 個頁面共用（help-* 全套都吃這條），
   所以紙感一律走 modifier，沒掛的頁面視覺零變化。
   紙色 #fbf7e4／框線 #e9e2c4 跟 page-blog.css 的 .bs-head 是同一組。2026-08-09 dark
   mode 這批已經升成 --paper-* page-scoped token（見本檔開頭 :root 區塊），page-blog.css
   同步定義同一份，兩檔各留一份、沒有共用進 site.css 的全站 :root（CSS custom property
   重複定義是 idempotent，不會互相打架）。要動色的時候兩邊都要改，別漏。 */
/* overflow:hidden 給齒孔用：::before 是直角矩形，兩端會凸出 28px 圓角外面，靠父層裁掉。
   paperFlip 跟 blog 列表頁的抬頭同一顆動畫（page-blog.css 也有一份），以上緣為軸掀下來。
   兩檔各留一份 keyframes：內頁不載 page-blog.css，共用得先把動畫搬進 site.css，
   但那顆 keyframes 目前只有 blog 兩頁在用，還不值得升成全站資產。改的時候兩邊都要改。 */
@keyframes paperFlip{
  from{opacity:0;transform:perspective(1400px) rotateX(-13deg) translateY(-10px)}
  to{opacity:1;transform:perspective(1400px) rotateX(0) translateY(0)}
}
.art-head.paper{position:relative;overflow:hidden;padding:30px 34px 28px;background:var(--paper-bg);
  border:1px solid var(--paper-border);border-radius:var(--r-lg);
  transform-origin:top center;animation:paperFlip .68s cubic-bezier(.22,.85,.3,1) both;
  background-image:repeating-linear-gradient(180deg,transparent 0 28.4px,var(--paper-rule) 28.4px 30px);
  background-position:0 22px}
/* 頂緣撕頁齒孔，純裝飾 */
.art-head.paper::before{content:"";position:absolute;left:0;right:0;top:0;height:11px;
  background:repeating-linear-gradient(90deg,var(--paper-border-2) 0 7px,transparent 7px 24px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;opacity:.7}
.art-head.paper .tag{position:relative;background:var(--paper-tag-bg);border-color:var(--paper-border-2);color:var(--paper-accent)}
.art-head.paper .art-sub{color:var(--paper-ink)}
.art-head.paper .art-meta{color:var(--paper-ink-muted)}

/* ---------- 封面圖佔位框（純 CSS 佔位＋吉祥物，不新增圖檔） ---------- */
.art-cover{margin-top:32px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  aspect-ratio:21/9;min-height:180px;
  background:linear-gradient(135deg,var(--brand-tint) 0%,var(--brand-tint-2) 55%,var(--warm) 100%);
  border:1px solid var(--brand-border);display:flex;align-items:center;justify-content:center}
.art-cover img{width:clamp(96px,11vw,140px);height:auto;filter:drop-shadow(0 14px 24px rgba(6,60,94,.16))}
.art-cover .cover-note{position:absolute;left:16px;bottom:14px;font-size:var(--fs-xs);font-weight:700;
  color:var(--ink-2);background:rgba(255,255,255,.82);border:1px solid var(--brand-border);
  border-radius:999px;padding:4px 12px;backdrop-filter:blur(6px)}

/* 2026-08-08 紙感抬頭底下的封面佔位框（只有 blog 兩篇會命中這條相鄰選擇器）。
   原本 21/9 全寬、藍綠漸層，配上暖黃紙盒後色系打架，而且一塊空框就吃掉整個第一屏，
   等於開頭先跟讀者說「這裡還沒做完」。壓扁成 3.4/1、換成同一組紙色，讓它退成紙的延伸。
   真封面補上之後這條要重新評估——有內容的圖值得佔版面，空框不值得。 */
/* max-width 跟 .art-head 的 78ch 對齊。不設的話紙盒收在 78ch、封面框吃滿 wrap 的 1140，
   右緣差兩百多 px，看起來像兩個沒對齊的區塊 */
.art-head.paper+.art-cover{margin-top:16px;aspect-ratio:7/1;min-height:112px;max-width:78ch;
  background:linear-gradient(135deg,var(--paper-bg) 0%,var(--paper-bg-2) 55%,var(--brand-tint-2) 100%);
  border-color:var(--paper-border)}
.art-head.paper+.art-cover img{width:clamp(74px,7vw,96px)}
.art-head.paper+.art-cover .cover-note{background:var(--paper-chip-bg);border-color:var(--paper-border-2);color:var(--paper-ink-soft)}

/* ---------- 內文區主體：wrap 收窄成閱讀寬度，跟 landing 的滿版 section 不同 ---------- */
.art-body{padding:var(--pad-body-top) 0 var(--pad-sec)}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(32px,5vw,64px);align-items:start}
.art-content{max-width:78ch}

/* ---------- 關鍵摘要框（AI 引用率最高的區塊，視覺要跟一般內文分開） ---------- */
.key-takeaway{margin:0 0 36px;padding:22px 26px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--brand-tint-2),var(--surface) 62%);
  border:1px solid var(--brand-border);box-shadow:var(--shadow-sm)}
.key-takeaway .kt-label{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.1em;color:var(--brand-text);text-transform:uppercase;margin-bottom:8px}
.key-takeaway p{margin-top:0;color:var(--ink-2);font-size:var(--fs-lg);line-height:1.75}
.key-takeaway p + p{margin-top:8px}

/* ---------- TOC：桌機 sticky 側欄 ---------- */
.art-toc{position:sticky;top:96px;font-size:var(--fs-sm)}
.art-toc .toc-label{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;color:var(--faint);
  text-transform:uppercase;margin-bottom:12px}
.art-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.art-toc li{margin:0}
.art-toc a{display:block;padding:7px 0 7px 16px;color:var(--sub);border-left:2px solid transparent;
  margin-left:-2px;transition:color .2s,border-color .2s}
.art-toc a:hover{color:var(--brand-text)}
.art-toc .toc-sub{padding-left:30px;font-size:var(--fs-sm)}
/* 讀到哪一段就亮哪一條（site-motion.js 捲動時切 .on）。
   注意：help 系的 .art-toc.help-toc 是跨頁導覽、.on 靜態標當前頁，
   由 page-help.css 自己定義，兩者視覺一致但來源不同，別合併。 */
.art-toc a.on{color:var(--brand-text);font-weight:800;border-left-color:var(--brand-deep)}

/* 手機摺疊版 TOC（桌機隱藏，用 <details>，跟 .faq 同一套視覺語言） */
.toc-mobile{display:none}

@media (max-width:900px){
  .art-layout{grid-template-columns:minmax(0,1fr)}
  .art-toc{display:none}
  .toc-mobile{display:block;margin:0 0 32px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);padding:0 20px;box-shadow:var(--shadow-sm)}
  .toc-mobile summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;color:var(--heading);
    font-size:var(--fs-md);display:flex;align-items:center;justify-content:space-between;gap:12px}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile summary::after{content:"";width:9px;height:9px;border:2px solid var(--brand-deep);
    border-top:0;border-left:0;transform:rotate(45deg) translateY(-2px);transition:transform .3s;flex:0 0 auto}
  .toc-mobile[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .toc-mobile ol{list-style:none;margin:0;padding:0 0 16px;border-left:2px solid var(--line)}
  .toc-mobile a{display:block;padding:6px 0 6px 14px;color:var(--sub)}
  .toc-mobile .toc-sub{padding-left:28px;font-size:var(--fs-sm)}
}

/* ---------- 內文排版 ---------- */
.art-content h2{margin-top:52px;scroll-margin-top:88px}
/* 原本這裡是 .art-content h2:first-child{margin-top:0}，但 .art-content 的真正第一個
   子元素是 .key-takeaway（後面接 .toc-mobile），h2 從來不是 first-child，這條規則永遠不生效。
   改成明確選到摘要框（經過 toc-mobile）銜接第一個 h2 這個接合處，把間距收成刻意值。 */
.art-content > .key-takeaway + .toc-mobile + h2{margin-top:32px}
.art-content h3{margin-top:28px;scroll-margin-top:88px;font-size:clamp(18px,2vw,21px)}
/* M19（DESIGN_REVIEW 2026-08-01）：help-shared-courses.html 頁內 1-5 編號用 h3，
   後面兩段「記錄出席，雙方介面不同」「付費邊界」是無編號的補充說明，跟編號節奏打架。
   2026-08-02 把這兩段降一級到 h4（文字不動）。site.css 沒有全站 h4 規則，這裡把
   h3 原本吃到的視覺（site.css 的 h1,h2,h3 標籤選擇器＋上面這條 .art-content h3）整組複製給
   .art-content h4，範圍只鎖在 .art-content，不影響其他頁；本檔目前沒有其他頁在 .art-content
   底下用真正的 <h4>，視覺零變化。 */
.art-content h4{color:var(--heading);margin:0;letter-spacing:-.022em;line-height:1.35;font-weight:800;margin-top:28px;scroll-margin-top:88px;font-size:clamp(18px,2vw,21px)}
.art-content p{max-width:74ch}
.art-content ul,.art-content ol{color:var(--sub);padding-left:22px;margin:14px 0 0}
.art-content li{margin-top:8px;line-height:1.75}
.art-content li::marker{color:var(--brand-deep);font-weight:700}
/* 2026-08-01 batch4：字級從 14.5px 調成 15px，跟下面 .qa-list p 對齊，
   兩篇文章的輔助說明文字大小才一致（Lucy 已知的 drift 消除） */
.art-content .hint{font-size:var(--fs-md);color:var(--faint);font-style:normal;border-left:3px solid var(--brand-border);
  padding:2px 0 2px 14px;margin:10px 0 0}
.art-content .fill{color:var(--brand-text);font-weight:700}

/* 表格（測長文上限用，直式滾動避免手機爆版） */
.table-wrap{overflow-x:auto;margin:24px 0 4px;border-radius:var(--r-sm);border:1px solid var(--line)}
.art-content table{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--fs-md);background:var(--surface)}
.art-content th,.art-content td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.art-content thead th{color:var(--heading);font-weight:800;background:var(--brand-tint-2);white-space:nowrap}
.art-content tbody tr:last-child td{border-bottom:0}
.table-note{margin-top:10px}

/* 五問清單（短文測下限用，跟一般 ul 分開一個變體，題目要凸出） */
.qa-list{list-style:none;padding:0;margin:20px 0 0;counter-reset:qa}
.qa-list li{counter-increment:qa;position:relative;padding:18px 20px 18px 54px;margin-top:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.qa-list li::before{content:counter(qa);position:absolute;left:16px;top:18px;width:26px;height:26px;
  border-radius:50%;background:var(--brand-tint-2);border:1px solid var(--brand-border);color:var(--brand-text);
  font-weight:800;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center}
.qa-list li::marker{content:none}
.qa-list b{display:block;color:var(--heading);font-size:var(--fs-lg)}
.qa-list p{margin-top:6px;font-size:var(--fs-md)}


/* ---------- FAQ（跟 site.css 的 .faq 共用同一套視覺語言，2026-08-01 batch4 收斂：
   summary/ans/details 的樣式主體現在都來自 site.css，這裡原本字級比 canonical
   小 0.5px（summary 16.5px／ans 15.5px），已改成跟 canonical 一致的 17／16px，
   兩篇文章的 FAQ 字級各大 0.5px，是刻意的 drift 消除（Lucy 已知）。
   .faq 容器寬度仍是本頁自己覆寫：文章版面已收窄到 78ch，不需要 site.css 的
   820px 置中版型。上方間距不能一起歸零：h2 的 line-height 是 1.16，緊貼會讓第一張
   卡片壓到標題字身。 ---------- */
.faq{max-width:none;margin:24px 0 0}

/* ---------- 作者 bio ---------- */
.author-bio{display:flex;align-items:center;gap:16px;margin-top:52px;padding:20px 24px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md)}
.author-bio img{width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:var(--surface);border:1px solid var(--line)}
.author-bio b{display:block;color:var(--heading);font-size:var(--fs-md)}
.author-bio p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--sub)}

/* ---------- 相關文章 ---------- */
.related{margin-top:52px}
.related h2{font-size:clamp(21px,2.6vw,26px)}
.related .posts{margin-top:24px;grid-template-columns:repeat(3,1fr)}

/* ---------- 訂閱區 ---------- */
.subscribe{margin-top:52px;padding:32px 30px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--warm),var(--surface) 65%);border:1px solid var(--warm-line);text-align:center}
.subscribe h2{font-size:clamp(21px,2.6vw,26px)}
.subscribe p{max-width:52ch;margin:10px auto 0}
.subscribe form.capture{justify-content:center;margin:24px auto 0}
.subscribe .form-note{text-align:center;text-wrap:pretty}
/* 2026-08-08 表單小字跟贈品頁（page-resources.css）統一：隱私政策連結要看得出能點，
   「取消訂閱」包 .nw 擋中文任意斷行。兩檔各留一份規則，改的時候兩邊都要動。 */
.subscribe .form-note a{color:var(--brand-text);text-decoration:underline;
  text-decoration-color:var(--brand-border);text-underline-offset:2px}
.subscribe .form-note a:hover{text-decoration-color:var(--brand-text)}
.subscribe .form-note .nw{white-space:nowrap}

@media (max-width:900px){
  .related .posts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .art-cover{aspect-ratio:4/3}
  /* 窄螢幕的紙感抬頭：3.4/1 在手機寬度下只剩 100px 出頭，一隻海獺塞不進去 */
  .art-head.paper+.art-cover{aspect-ratio:3/1;min-height:96px}
}

/* 全站慣例：reduce 覆寫放檔案末段 */
@media (prefers-reduced-motion:reduce){
  .art-head.paper{animation:none}
}

/* ---------- dark mode ----------
   一般卡片（.toc-mobile／.art-content table／.qa-list li／.author-bio img／
   .key-takeaway／.subscribe 的 #fff 漸層終點）已經在上方原地把 #fff 換成
   var(--surface)、var(--ink) 換成 var(--heading)，light 值不變、dark 會自動接上
   site.css 的 --surface／--heading 覆寫，這裡不用重複列。
   這裡只覆寫「紙感」token（--paper-*）：紙的本質是暖色系裝飾面，不該在 dark
   模式被拉成跟一般卡片一樣的深藍 --surface，維持「暖紙」但整體壓暗成深咖啡／
   深卡其色，文字改用亮暖白維持可讀。對比抓寬鬆margin（見下方數字），不用剛好卡
   4.5:1，寧可亮一點。
   --paper-bg #241f16 對 --paper-ink #EFE6C9 ≈13:1；對 --paper-ink-muted #C9BD98 ≈8.7:1；
   對 --paper-ink-soft #D8CCA8 ≈10.2:1；對 --paper-accent #D9C177 ≈9.2:1（手動估算，
   無法跑自動對比工具，數字都留了明顯餘裕，不是卡在門檻邊緣）。
   --paper-tag-bg #362d1e 比 --paper-bg 亮一階（跟 light 模式「白 tag 貼在米色紙上」
   同一種「淺一階」關係），對 --paper-accent 文字 ≈7.6:1。
   --paper-border／--paper-border-2／--paper-rule 是純裝飾邊框與筆記線，比照 light
   模式原本就偏低對比的「紙紋」質感，刻意不追高對比。 ---------- */
:root[data-theme="dark"]{
  --paper-bg:#241f16; --paper-bg-2:#2c2418;
  --paper-border:#4a3f2a; --paper-border-2:#5c4e34;
  --paper-rule:rgba(220,205,160,.16);
  --paper-ink:#EFE6C9; --paper-ink-muted:#C9BD98; --paper-ink-soft:#D8CCA8;
  --paper-accent:#D9C177;
  --paper-tag-bg:#362d1e; --paper-chip-bg:rgba(255,255,255,.08);
}
/* 另一個既有配色地雷：非紙感版 .art-cover（一般文章封面佔位框）背景是
   linear-gradient(135deg, var(--brand-tint) 0%, var(--brand-tint-2) 55%, var(--warm) 100%)。
   頭尾兩個錨點 --brand-tint／--warm 都是永遠不隨主題變的固定色（見 site.css dark
   區塊註解），中段 --brand-tint-2 雖然會變，但整體漸層兩端釘住淺色，視覺上仍是
   「固定淺色貼紙」。.cover-note 疊在上面的 chip 底色 rgba(255,255,255,.82) 也是固定
   不變的白色半透明。文字卻用會隨主題翻轉的 var(--ink-2)，dark 模式下會變成
   接近白色（#B9CEDC），疊在同樣接近白色的固定底色上等於看不見。這裡跟
   .callout-warn 是同一種地雷（固定底色配到會翻轉的文字 token），修法也一樣：
   dark-only 覆寫把文字釘回 light 模式原本的 --ink-2 數值（#1f5e80，site.css :root
   定義），讓這個貼紙不管在哪個主題下都維持「固定淺底配固定深字」。 */
:root[data-theme="dark"] .art-cover .cover-note{color:#1f5e80}
/* 上面這條選到的 `.art-cover .cover-note` 是後代選擇器，紙感版封面框
   （.art-head.paper+.art-cover，本檔 79-83 行）的 .cover-note 剛好也符合，
   兩條規則 specificity 打平（都是 4 個 class-level selector），源碼順序後者
   （就是上面這條）勝出，把紙感版文字錯誤釘死成固定 #1f5e80。但紙感版底色
   其實吃 --paper-chip-bg，會跟著紙感 token 一起翻轉（231-248 行），文字也該
   繼續用會翻轉的 --paper-ink-soft，不該被「非紙感版固定色貼紙」修法波及。
   這裡疊多兩個 class 拉高 specificity 贏回來，紙感版維持「暖底配會翻轉的暖字」。 */
:root[data-theme="dark"] .art-head.paper+.art-cover .cover-note{color:var(--paper-ink-soft)}
/* .subscribe（文章尾訂閱卡）背景是 linear-gradient(135deg, var(--warm), var(--surface) 65%)：
   起點固定不變、終點會跟著暗下來，light 模式看起來是「暖黃漸層到白卡」，dark 模式變成
   「暖黃漸層到深底」，起點那塊固定亮黃在深色頁面上格外刺眼（跟 .pin-wrap／.warm 同一種
   「暖色錨點 + 會變暗的另一端」地雷）。改用低透明度暖金色版本，維持同一個漸層方向與
   「暖色調收尾」的視覺記憶，但不再是一塊突兀的亮黃。 */
:root[data-theme="dark"] .subscribe{background:linear-gradient(135deg,rgba(232,201,120,.16),var(--surface) 65%)}

/* ============================================================
   2026-08-19 第一篇有真封面圖與內文插圖的文章上線
   （zh/blog/what-is-lesson-credit-management.html）新增的三個元件。
   在此之前 blog 模板只有「封面佔位框 + 純文字內文」，這三種 markup 站上都還沒有樣式。
   ============================================================ */

/* ---------- 真封面圖：is-photo 版本 ----------
   既有 .art-cover（含 .art-head.paper+.art-cover）是「佔位框」：固定 aspect-ratio、
   漸層底色、把裡面的吉祥物縮成 74-140px 置中。真封面圖走的是相反的需求——圖本身就是內容，
   要吃滿框、不裁切、不套底色。這裡不改既有規則（兩篇舊文還在用佔位框），另開 modifier。
   選擇器要疊 .art-head.paper+ 才蓋得過 79-83 行那條相鄰選擇器，不然 aspect-ratio:7/1
   會把 21:9 的封面壓扁。 */
.art-cover.is-photo,
.art-head.paper+.art-cover.is-photo{aspect-ratio:auto;min-height:0;padding:0;
  background:var(--surface);border-color:var(--line);max-width:78ch}
.art-cover.is-photo img,
.art-head.paper+.art-cover.is-photo img{width:100%;height:auto;display:block;filter:none}

/* ---------- 內文插圖 ----------
   .is-phone 給直式手機截圖（本篇的課程詳情頁是 380x851），不限寬會佔掉整個閱讀區高度，
   壓到 300px 才跟旁邊的段落比例相稱。橫式圖（試算表那張 1096x470）用預設滿寬。 */
.art-fig{margin:28px 0}
.art-fig img{max-width:100%;height:auto;display:block;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface)}
.art-fig.is-phone img{max-width:300px;margin-inline:auto}
.art-fig figcaption{margin-top:10px;font-size:var(--fs-sm);line-height:1.7;color:var(--sub);text-align:center}

/* ---------- 引言（用戶評價、外部引用） ----------
   cite 拿掉 italic：中文斜體是把直排字硬拉斜，字形會壞掉。 */
.art-content blockquote{margin:26px 0;padding:18px 22px;background:var(--surface);
  border-left:4px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0}
/* 引言內文不指定 color：--ink 是不隨主題翻轉的固定深藍（site.css :root），寫上去在 dark 模式
   會變成深藍字疊深藍底幾乎看不見（跟 .callout-warn／.art-cover .cover-note 同一種地雷）。
   留空繼承 body 的文字色，兩個主題都對。 */
.art-content blockquote p{margin:0}
.art-content blockquote cite{display:block;margin-top:12px;font-style:normal;
  font-size:var(--fs-sm);color:var(--sub)}

/* ---------- 內文裡的商店徽章（收尾硬 CTA） ----------
   .store-badges 本體樣式在 site.css，這裡只給內文用的外距與置中。 */
.art-store{margin:26px 0 8px;justify-content:center}

/* ---------- 長文字比較表：is-compare ----------
   158-161 行的表格樣式對 td 下了 white-space:nowrap，那是為了「數字型小表」（舊文的單價變化表
   五欄都是短字串）不要在中途折行。堂數管理指南的五種做法比較表有七欄、每格都是一整句話，
   套上 nowrap 會撐到約 1980px，在 770px 的閱讀欄裡等於只看得到三欄半，讀者得橫向拉三次。
   這個 modifier 只放行折行，其餘（框線、表頭底色、padding）照舊。
   vertical-align:top 是折行後的必要條件，不然各欄行數不同時字會垂直置中、上緣參差。
   字級降一級到 --fs-sm：七欄擠在 770px 裡，用內文字級每行只放得下三到四個字，
   欄位會變成一條條細長的字串；小一級每行多兩到三個字，行數少一半，掃讀才跟得上。 */
.art-content table.is-compare{min-width:520px;font-size:var(--fs-sm)}
.art-content table.is-compare th,
.art-content table.is-compare td{vertical-align:top;line-height:1.7;padding:11px 12px}
.art-content table.is-compare td{white-space:normal}
/* 表頭維持 nowrap：七個欄名都是三到四個字，放行折行反而會出現「上手難／度」這種孤兒行。
   nowrap 同時把每欄的最小寬度釘在欄名的寬度，欄寬分配也比較平均。 */
.art-content table.is-compare th{white-space:nowrap}
/* 第一欄（做法名稱）盡量不折行，但長名稱（"Google Sheets / Excel"）若因此把整張表撐出
   閱讀欄，寧可讓它折成兩行也不要讓讀者橫拉。max-width 就是這個閥值：短名稱吃不到上限、
   維持單行，只有超長的那格會折。 */
.art-content table.is-compare td:first-child{white-space:nowrap;max-width:150px;overflow-wrap:break-word}
@supports (text-wrap:balance){.art-content table.is-compare td:first-child{white-space:normal;text-wrap:balance}}

/* ---------- 短元素的孤兒行 ----------
   2026-08-19 實測 390px：ja 版 .art-sub 三行、最後一行只剩 12% 寬（兩三個字），
   FAQ 最長那題三行、最後一行 7%。中日文沒有空白可斷，逐句手改文案在三個語系都要重來一次，
   改不完也擋不住之後新增的文章。交給 text-wrap:balance 讓瀏覽器平均分配行寬，
   短元素（標題、副標、FAQ 題目、圖說）一次全解，長段落不套（balance 對多行本文沒有意義且有成本）。 */
.art-head h1,
.art-head .art-sub,
.faq summary,
.art-fig figcaption{text-wrap:balance}

/* ---------- 內文行內程式碼 ----------
   2026-08-19 表格範本那篇要寫公式（=B3-C3、=F3-TODAY()<14），全站在此之前沒有 <code> 樣式，
   不給樣式會跟一般內文混在一起讀不出是要照打的字串。等寬字避免 O 與 0 分不出來。 */
.art-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  padding:2px 6px;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--line);
  white-space:nowrap}

/* ---------- 內文連結 ----------
   2026-08-19 發現：page-article.css 在此之前沒有任何 .art-content a 規則，內文連結繼承成
   #6e6e73 灰字、無底線，跟一般內文分不出來（舊兩篇文章內文幾乎沒有連結，所以一直沒人踩到）。
   支柱頁與 spoke 互連、外部參考文件都靠內文連結，看不出來等於沒有。
   用品牌色＋底線，offset 拉開避免壓到中日文的下緣。
   .faq .ans 與 .key-takeaway 內的連結一併吃，那兩塊也是內文。
   排除 .cta-band／.store-badge／.author-bio，那些是元件，自己有樣式。 */
.art-content p a,
.art-content li a,
.art-content .ans a,
.art-content blockquote a{color:var(--brand-text);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--brand-border);transition:color .2s,text-decoration-color .2s}
.art-content p a:hover,
.art-content li a:hover,
.art-content .ans a:hover,
.art-content blockquote a:hover{color:var(--brand-deep);text-decoration-color:var(--brand-deep)}