/* ── global.css（自動產生，請勿直接編輯本檔） ── */
/* 站台共用版型。
   包含：色票 tokens、深淺色三態、卡片、文章排版、影音庫、資源卡、列表分頁 */

:root {
  --red: #FA0F00;  --red-2: #D60F0F;  --navy: #04194e;  --cyan: #0084b3;
  --ink: #1d1d1f;  --ink-2: #424245;  --ink-3: #6e6e73;
  --bg: #ffffff;   --surface: #fbfbfd; --border: #d2d2d7;
  --panel: #0E0E10; --panel-ink: #ffffff;
  --note: #FA0F00;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red: #FF4A3D;  --red-2: #FF6B60;  --cyan: #4FC3E8;
    --ink: #f2f2f4;  --ink-2: #c8c8cd;  --ink-3: #94949c;
    --bg: #131316;   --surface: #1c1c20; --border: #34343a;
    --panel: #08080a; --panel-ink: #ffffff;
    --note: #FF7A70;
    --shadow: 0 1px 3px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --red: #FF4A3D;  --red-2: #FF6B60;  --cyan: #4FC3E8;
  --ink: #f2f2f4;  --ink-2: #c8c8cd;  --ink-3: #94949c;
  --bg: #131316;   --surface: #1c1c20; --border: #34343a;
  --panel: #08080a; --panel-ink: #ffffff;
  --note: #FF7A70;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* height:auto 不可拿掉：max-width 縮小寬度後，沒有它高度會沿用 HTML 屬性的原值，大圖會被拉伸變形。
   需要固定高度的圖都用 class 選擇器，優先級較高，不受影響。 */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* 內容欄寬 1440px，全站一致 */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* ── 段落標頭 ── */
.part { padding-block: 72px; }
.part--alt { background: var(--surface); border-top: 1px solid var(--border); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .18em; color: var(--red); margin-bottom: 10px; }
h2.part-title { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 900; margin: 0 0 8px; }
.part-sub { color: var(--ink-3); margin: 0; max-width: 60ch; line-height: 1.7; }

/* ── PART A：卡片 ── */
.section-head { text-align: center; margin: 56px 0 40px; }
.section-head h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 900; margin: 0; }
.section-head .rule { width: 48px; height: 3px; background: var(--red); border-radius: 99px; margin: 12px auto 0; }

.grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
/* 1440 欄寬下 3 欄會把卡片撐到 ~440px，改 4 欄（每張 ~325px） */
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.card .thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); position: relative; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* 白底縮圖會與 --surface(#fbfbfd) 的卡片連成一片、看不出圖到哪裡結束（實測 17 張新聞縮圖
   下緣亮度 253-255，與卡片只差 2-4 個色階）。用一層極淡的內框線把邊界畫出來。
   刻意用半透明黑而不是 var(--border)：它只在圖夠淺時才顯形，深色圖上會被吸收，
   所以深淺兩種圖共用同一條規則就夠，不必分開處理。
   蓋在 img 上（::after）而不是給 .thumb 加 box-shadow：img 會 hover 放大，
   陰影畫在容器上會被放大的圖蓋住。 */
.card .thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.card:hover .thumb img { transform: scale(1.05); }
.card .body { padding: 22px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.card h4 {
  margin: 0; font-size: .95rem; font-weight: 900; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* 中文標題斷行：中文字之間沒有空格，瀏覽器預設會在任意兩字間斷開，
   造成「全面升／級」這種把詞彙劈半的斷法。三道防線疊加：
   auto-phrase 讓瀏覽器依語義片語斷（Chrome 119+）；
   balance 讓各行長度平均、避免最後一行只剩一兩個字；
   strict 讓標點不落在行首。不支援 auto-phrase 的瀏覽器仍有後兩者。 */
/* 走 JS 斷詞的標題：keep-all 禁止在中文字元間任意斷開，
   只有瀏覽器端 cjk-wrap script 用 Intl.Segmenter 插進去的 <wbr> 是合法斷點。
   html.cjk-seg 是該 script 跑完才加的旗標——沒跑（無 JS／爬蟲）就不套 keep-all，
   否則長標題會整行不斷而溢出。 */
.card h4, h1.article-title, .rel h4 {
  text-wrap: balance;
  line-break: strict;
}
html.cjk-seg .card h4, html.cjk-seg h1.article-title, html.cjk-seg .rel h4 {
  word-break: keep-all;
}
/* 寫死在 HTML 裡的中文（沒經過 JS 斷詞）不能用 keep-all，否則會整行不斷而溢出，
   只能靠瀏覽器的語義斷詞盡力而為。 */
h2.part-title, .section-head h3, .part-sub, .cta h3 {
  word-break: auto-phrase;
  text-wrap: balance;
  line-break: strict;
}
.card .meta { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; margin-top: auto; }
.card .meta time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card .meta .more { color: var(--cyan); font-weight: 700; transition: color .25s; }
.card:hover .meta .more { color: var(--red); }

.center { text-align: center; margin-top: 48px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 99px;
  background: var(--ink); color: var(--bg); font-weight: 700; transition: background .25s;
}
.btn:hover { background: var(--red); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.hint { font-size: .85rem; color: var(--ink-3); margin-top: 16px; }

/* ── PART B：文章 ── */
.article {
  background: var(--bg); max-width: 880px; margin: 48px auto 0;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow);
}
.article-inner { padding: 48px clamp(24px, 5vw, 56px); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--ink-3); margin-bottom: 20px; }
.crumbs a:hover { color: var(--red); }

.note {
  border-left: 3px solid var(--note); padding-left: 12px; margin: 0 0 32px;
  font-size: .8rem; line-height: 1.75; color: var(--note);
}
.note b { font-weight: 700; }

.chip {
  display: inline-block; padding: 5px 14px; border-radius: 99px; font-size: .75rem; font-weight: 700;
  background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); margin-bottom: 18px;
}
h1.article-title {
  font-size: clamp(1.6rem, 4.4vw, 2.3rem); font-weight: 900; line-height: 1.35;
  margin: 0 0 24px;
}
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  font-size: .88rem; color: var(--ink-3); padding-bottom: 28px; border-bottom: 1px solid var(--border);
}
.byline .who { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 28px; height: 28px; border-radius: 99px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: .65rem; font-weight: 700;
}
.byline time, .byline .mins { font-variant-numeric: tabular-nums; }

.hero { margin: 32px 0 12px; }
.hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; }

.prose { max-width: 46rem; font-size: 1.03rem; line-height: 1.95; color: var(--ink-2); }
.prose p { margin: 0 0 1.5rem; }
.prose img { border-radius: 12px; margin: 2rem 0; }
.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose font { font-size: inherit !important; color: inherit !important; }

.source-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding-top: 32px; border-top: 1px solid var(--border);
}
.btn-red {
  display: inline-flex; padding: 13px 26px; border-radius: 10px;
  background: var(--red); color: #fff; font-weight: 700; transition: background .25s;
}
.btn-red:hover { background: var(--red-2); }
.btn-red:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.credit { font-size: .85rem; color: var(--ink-3); }

/* ── 乾貨下載 ── */
/* 資源下載卡。與上方影音卡（.watch，深色底）刻意區隔：白底＋較粗邊框＋較大圓角。
   縮圖寬度與 .watch-thumb 統一為 200px。 */
.dl {
  margin-top: 48px; display: flex; gap: clamp(20px, 4vw, 32px); flex-wrap: wrap;
  padding: clamp(24px, 4vw, 32px); border: 2px solid var(--border); border-radius: 18px;
  /* 🔴 顏色一律走變數，不可寫死 #fff：深色模式下 --ink 是近白色，背景若硬白就成白底白字。
     寫死值只留給「本來就該是白的東西」（PDF 封面底、QR 碼底）。 */
  background: var(--surface);
}
.dl-cover {
  width: 200px; flex-shrink: 0; border-radius: 10px; align-self: flex-start;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.35); border: 1px solid var(--border);
}
.dl-body { flex: 1; min-width: 260px; }
.dl-tag {
  display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: .72rem; font-weight: 700;
  background: var(--red); color: #fff; margin-bottom: 12px;
}
.dl-body h3 { font-size: 1.3rem; font-weight: 900; margin: 0 0 8px; line-height: 1.45; }
.dl-meta { font-size: .83rem; color: var(--ink-3); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.dl-desc { font-size: .95rem; line-height: 1.8; color: var(--ink-2); margin: 0 0 10px; }
.dl-only { font-size: .88rem; line-height: 1.75; color: var(--ink); margin: 0 0 20px; }
.dl-only b { color: var(--red); }
.dl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* 🔴 :where() 內的選擇器不計特異度，所以這條重置降成 (0,1,0)，與 .dl-line／.dl-mail 等
   變體同級，而變體寫在後面 → 變體勝出。
   若改寫成 `.dl-actions a, .dl-actions button`（0,1,1），重置反而比變體強：
   `background: transparent` 會蓋掉 .dl-line 的 LINE 綠、`border: 0` 會蓋掉 .dl-mail 的外框。
   維持 :where() 也讓日後新增按鈕變體不必再跟它比特異度。 */
.dl-actions :where(a, button) {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px;
  border-radius: 10px; font-weight: 700; font-size: .95rem; transition: background .25s, border-color .25s;
  font-family: inherit; cursor: pointer; border: 0; background: transparent; line-height: normal;
}
.dl-actions a:focus-visible, .dl-actions button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.dl-line { background: #06C755; color: #fff; }
.dl-line:hover { background: #05a948; }
.dl-mail { border: 1.5px solid var(--border); color: var(--ink); }
.dl-mail:hover { border-color: var(--ink); background: var(--bg); }
.dl-why { font-size: .78rem; color: var(--ink-3); margin: 16px 0 0; line-height: 1.7; }

.cta { margin-top: 48px; border-radius: 18px; background: var(--panel); color: var(--panel-ink); padding: clamp(28px, 5vw, 40px); }
.cta .kicker { color: var(--red); font-weight: 700; font-size: .85rem; margin: 0 0 8px; }
.cta h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.cta p { color: rgba(255,255,255,.72); margin: 0 0 24px; max-width: 34rem; line-height: 1.75; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row a { padding: 13px 26px; border-radius: 99px; font-weight: 700; transition: background .25s; }
.cta-row .primary { background: var(--red); color: #fff; }
.cta-row .primary:hover { background: var(--red-2); }
.cta-row .ghost { border: 1px solid rgba(255,255,255,.3); }
.cta-row .ghost:hover { background: rgba(255,255,255,.1); }

.related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.related h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 24px; }
.related-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
.rel {
  display: flex; gap: 16px; align-items: center; padding: 10px;
  border-radius: 12px; transition: background .25s;
}
.rel:hover { background: var(--surface); }
.rel img { width: 108px; height: 76px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.rel h4 {
  margin: 0 0 4px; font-size: .82rem; font-weight: 900; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel time { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 列表頁：搜尋與分頁 ── */
.list-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.search {
  flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border: 1.5px solid var(--border); border-radius: 99px; background: var(--bg);
}
.search:focus-within { border-color: var(--ink-3); }
.search input {
  flex: 1; border: 0; outline: none; background: transparent; color: var(--ink);
  font-family: inherit; font-size: .95rem;
}
.search input::placeholder { color: var(--ink-3); }
.search svg { flex-shrink: 0; color: var(--ink-3); }
.list-count { font-size: .88rem; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }

/* RSS 入口：feed 檔一直都在，缺的只是一道人看得見的門 */
.list-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rss-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 99px;
  font-size: .85rem; color: var(--ink-3); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.rss-link:hover, .rss-link:focus-visible { border-color: var(--ink-3); color: var(--ink); }
.rss-link svg { flex-shrink: 0; }

/* ── 電子報訂閱條 ── */
/* 刻意做成淺色細長一條，不做深色大卡：文章頁底部的 .cta（索取報價）已經是深色卡＋紅鈕，
   同型的東西放兩個會互相稀釋，而訂閱本來就比索取報價輕，份量不該搶過它。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sub-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin: 0 0 28px; padding: 18px 22px;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface);
}
/* max-width 是為了不讓文字把表單一路推到最右緣——右下角浮著客服氣泡（fixed），
   視窗約 1440px 時（.wrap 剛好滿版）氣泡會正好蓋住「訂閱」按鈕，點不到。
   限制文字寬度後表單緊跟其後，右側自然留白，兩者不再重疊。 */
.sub-bar-copy { flex: 1 1 260px; min-width: 0; max-width: 560px; }
.sub-bar-copy strong { display: block; font-size: .98rem; color: var(--ink); line-height: 1.5; }
.sub-bar-copy span {
  display: block; margin-top: 3px; font-size: .85rem; color: var(--ink-3); line-height: 1.6;
  word-break: auto-phrase; text-wrap: pretty; line-break: strict;
}
.sub-bar-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sub-bar-form[hidden] { display: none; }
.sub-bar-form input[type="email"] {
  width: 236px; max-width: 100%; padding: 11px 16px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: .92rem;
}
.sub-bar-form input[type="email"]::placeholder { color: var(--ink-3); }
.sub-bar-form input[type="email"]:focus { outline: none; border-color: var(--ink-3); }
.sub-bar-form .btn-red {
  border: 0; cursor: pointer; font-family: inherit; font-size: .92rem; padding: 11px 24px;
}
.sub-bar-form .btn-red:disabled { opacity: .6; cursor: default; }
/* 蜜罐：真人看不到也 tab 不到，機器人照填——填了就代表是機器人 */
.sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sub-bar-note { flex-basis: 100%; margin: 0; font-size: .85rem; }
.sub-bar-note:empty { display: none; }
/* 成功訊息刻意不用綠色：這條的底是 var(--surface)，深淺兩色模式差很多，
   單一個綠色值一定有一邊對比不足。用 --ink 粗體，兩邊都讀得清楚。 */
.sub-bar-note[data-kind="ok"] { color: var(--ink); font-weight: 700; }
.sub-bar-note[data-kind="err"] { color: var(--red-2); font-weight: 600; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 40px; }
.pager button {
  min-width: 42px; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--border);
  background: transparent; color: var(--ink-2); font-family: inherit; font-size: .9rem;
  font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
  font-variant-numeric: tabular-nums;
}
.pager button:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.pager button[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }
.pager button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.pager .dots { color: var(--ink-3); padding: 0 4px; }
.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.thumb-ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--border); color: var(--ink-3); font-size: .78rem; letter-spacing: .04em;
}

/* ── 影片分類篩選 ── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
#topicFilters { margin-bottom: 14px; }   /* 主題列與年份列靠近一點，讀成同一組篩選 */
/* 年份列為純文字（無外框），跟主題膠囊做出區隔 */
#yearFilters { gap: 4px 22px; margin-bottom: 40px; }
#yearFilters button { border: 0; border-radius: 0; padding: 6px 2px; background: transparent; color: var(--ink-3); font-weight: 600; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
#yearFilters button:hover { color: var(--ink); background: transparent; }
#yearFilters button[aria-pressed="true"] { background: transparent; color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--red); }
#yearFilters .count { opacity: .5; }
#more { padding: 12px 28px; font-weight: 700; }
.filters button {
  padding: 9px 18px; border-radius: 99px; border: 1.5px solid var(--border);
  background: transparent; color: var(--ink-2); font-family: inherit;
  font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.filters button:hover { border-color: var(--ink-3); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.filters button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.filters .count { opacity: .55; font-weight: 400; margin-left: 4px; }
/* 膠囊摺疊：少於 3 篇的冷門主題收進「更多 ▾」；選中的冷門膠囊收合時仍要看得見 */
#topicFilters button.cold { display: none; }
#topicFilters.expanded button.cold,
#topicFilters button.cold[aria-pressed="true"] { display: block; }
#topicFilters .fold-toggle { border-style: dashed; color: var(--ink-3); }

/* ── 影音庫：分類分組 ── */
.vid-section { margin-bottom: 56px; scroll-margin-top: 24px; }
.vid-section-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 24px; border-bottom: 2px solid var(--border);
}
/* h2 與 h3 都列是刻意的容錯：分類標題的層級日後若調整，樣式不會靜默失效。 */
.vid-section-head h2, .vid-section-head h3 { font-size: 1.35rem; font-weight: 900; margin: 0; }
.vid-section-head .n { font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vid-section-head .bar { width: 4px; height: 22px; background: var(--red); border-radius: 2px; align-self: center; }
/* 分類標題的 Adobe 產品標誌。父層是 align-items:baseline，圖片得自己置中，
   不然會以文字基線對齊而往下沉。 */
.vid-section-head .vid-cat-logo { display: block; width: 26px; height: 26px; align-self: center; }
.vid-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.vid-nav a {
  padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--border);
  font-size: .86rem; font-weight: 700; color: var(--ink-2); transition: background .2s, color .2s, border-color .2s;
}
.vid-nav a:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.vid-nav a .count { opacity: .55; font-weight: 400; margin-left: 5px; }

/* ── 影片 ── */
.vid-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.vid-grid[hidden] { display: none; }
@media (min-width: 700px)  { .vid-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .vid-grid { grid-template-columns: repeat(4, 1fr); } }

.vid {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s;
}
.vid:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vid:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.vid-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vid:hover .vid-thumb img { transform: scale(1.06); }
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(transparent 45%, rgba(0,0,0,.55));
}
.vid-play span {
  width: 56px; height: 56px; border-radius: 99px; background: rgba(0,0,0,.62);
  display: grid; place-items: center; transition: background .25s, transform .25s;
}
.vid:hover .vid-play span { background: var(--red); transform: scale(1.08); }
.vid-play svg { fill: #fff; margin-left: 3px; }
.vid-time {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 4px;
  background: rgba(0,0,0,.8); color: #fff; font-size: .72rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vid-body { padding: 16px 18px 20px; }
.vid-body h4 {
  margin: 0; font-size: .9rem; font-weight: 900; line-height: 1.6;
  word-break: keep-all; text-wrap: balance; line-break: strict;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 文章內的延伸觀看。與資源下載卡（.dl）刻意做出區隔，並排時要一眼分得出是兩種東西：
   影音＝深色底（對應影片的觀看情境）＋左緣紅線；資源＝白底卡片。
   縮圖寬度兩邊統一 200px。 */
.watch {
  margin-top: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 20px 20px 20px 24px; border: 1px solid var(--ink); border-radius: 14px;
  background: var(--ink); color: #fff; border-left: 4px solid var(--red);
}
.watch:hover { background: #14141c; }
.watch .watch-kicker { color: #ff7a70; }
.watch .watch-meta { color: rgba(255,255,255,.62); }
.watch-thumb { position: relative; width: 200px; flex-shrink: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; }
.watch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.watch-body { flex: 1; min-width: 220px; }
.watch-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--red); margin: 0 0 6px; }
.watch-body h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 900; line-height: 1.6; word-break: keep-all; }
.watch-meta { font-size: .8rem; color: var(--ink-3); margin: 0; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   區塊小首頁（section hero）
   ──────────────────────────────────────────────────────────────
   構成要件：深色滿版帶 → 紅色 eyebrow → 大標（尾段套漸層）→
   一句寫清楚「這裡有什麼、能拿它做什麼」的說明。

   每個區塊底色不同但同一個品牌家族：底色一律 #0E0E10（＝頁首的
   --sh-black），差異只做在光暈的色相角度與紋理密度上，色相全部取自
   既有的品牌漸層停點（firefly #FF61F6 / red #FA0F00 / #FFAE00 /
   firefly-2 #6B2DA2），不引入新色系。

   ⚠️ 前景色刻意不用 var(--red)：#FA0F00 疊在被光暈提亮後的底上只有
   3.6:1，過不了 AA。這裡固定用亮紅 #FF7A70（＝深色模式的 --note）。
   ══════════════════════════════════════════════════════════════ */
.sec-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0E0E10;
  color: #fff;
  text-align: center;
  /* main 有 padding-top: var(--sh-h) 讓位給 fixed header；這裡吃回來，
     讓深色帶直接接在深色 header 底下，中間不留一條白 */
  margin-top: calc(-1 * var(--sh-h, 64px));
  padding: calc(var(--sh-h, 64px) + 60px) 24px 64px;
  /* 各區塊小首頁高度一致（389px）：短的補齊、內容垂直居中。
     說明句行數不同會讓實際高度上下幾十 px，所以文案也要控制在 2 行以內。 */
  min-height: 389px;
  display: flex; flex-direction: column; justify-content: center;
}
.sec-hero::before,
.sec-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* 🔴 下面三條 clamp 與站台既有的 fluid 字級刻度（h1／lead／sm）採同一組公式，
   讓兩套實作在同一寬度下算出相同字級。
   ⚠️ 調整那組 fluid 刻度時，這三條要一起改，否則兩邊會分歧。 */
.sec-hero-eyebrow {
  font-size: clamp(.8125rem, .1vw + .775rem, .875rem); line-height: 1.55;
  font-weight: 700; letter-spacing: .2em;
  color: #FF7A70; margin: 0 0 12px;
}
.sec-hero h1 {
  font-size: clamp(3rem, 4vw + 1.2rem, 6rem); line-height: 1.05;
  font-weight: 900; margin: 0 0 20px;
  word-break: keep-all; text-wrap: balance;
}
.sec-hero h1 .accent {
  background: linear-gradient(115deg, #FF61F6 0%, #FF4A3D 52%, #FFAE00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sec-hero-lead {
  /* 與站台 lead 的字級刻度與最大寬度一致（42rem＝672px） */
  font-size: clamp(1.125rem, .67vw + .7rem, 1.5rem); line-height: 1.5;
  color: rgba(255,255,255,.8); max-width: 42rem; margin: 0 auto;
  word-break: keep-all;
}
.sec-hero-lead b { color: #fff; font-weight: 700; }
/* 小首頁之後的內容區不必再留 72px 上緣 */
.sec-hero + .part { padding-block-start: 48px; }

/* ── 各區塊的底：光暈角度＋紋理密度都不同 ── */

/* 最新消息：紅光從左上斜射 ＋ 細橫線（報紙欄線密度 8px） */
.sec-hero--news::before {
  background:
    radial-gradient(105% 105% at 8% -12%, rgba(250,15,0,.46) 0%, rgba(14,14,16,0) 60%),
    radial-gradient(85% 70% at 92% 108%, rgba(214,15,15,.24) 0%, rgba(14,14,16,0) 58%);
}
.sec-hero--news::after {
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px);
}

/* 影音庫：桃紅光從右下升起 ＋ 45° 斜線（膠捲密度 14px） */
.sec-hero--videos::before {
  background:
    radial-gradient(110% 95% at 82% 118%, rgba(255,97,246,.30) 0%, rgba(14,14,16,0) 62%),
    radial-gradient(90% 80% at 6% 4%, rgba(250,15,0,.20) 0%, rgba(14,14,16,0) 58%);
}
.sec-hero--videos::after {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 1px, transparent 1px 14px);
}

/* 資源中心：暖橘光從正下方 ＋ 點陣（藍圖／文件感，22px 疏格） */
.sec-hero--resources::before {
  background:
    radial-gradient(120% 105% at 50% 128%, rgba(255,174,0,.44) 0%, rgba(14,14,16,0) 58%),
    radial-gradient(70% 60% at 50% -18%, rgba(250,15,0,.20) 0%, rgba(14,14,16,0) 62%);
}
.sec-hero--resources::after {
  background: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

/* 活動：紫光從正上方打下來（舞台聚光燈）＋ 紅光從左下補 ＋ 垂直細線（燈桿／座位排，18px）
   色系沿用既有三色（#FA0F00 / #FFAE00 / firefly-2 #6B2DA2），不新增色票。 */
.sec-hero--events::before {
  background:
    radial-gradient(95% 90% at 50% -20%, rgba(107,45,162,.52) 0%, rgba(14,14,16,0) 62%),
    radial-gradient(80% 75% at 4% 112%, rgba(250,15,0,.26) 0%, rgba(14,14,16,0) 58%);
}
.sec-hero--events::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 18px);
}

/* 🔴 .sec-hero 是 display:flex，權重高過瀏覽器預設的 [hidden]{display:none}，
   所以掛了 hidden 的 hero 仍然會顯示出來。/events/ 同時渲染兩個 hero 再由日期決定
   顯示哪一個，少了這條就會兩個一起出現——而且只在「有兩個 hero」的頁面才看得出來。 */
.sec-hero[hidden] { display: none; }

/* 手機維持置中，與其他區塊小首頁一致——改成左對齊會多出一個沒理由的差異 */
@media (max-width: 640px) {
  .sec-hero { padding: calc(var(--sh-h, 64px) + 36px) 20px 42px; }
}

/* ── 文件庫／成功案例：可複選篩選清單 ──────────────────────────────────────
   🔴 這一區**必須留在共用樣式表**，不能搬進元件的 scoped style。
   卡片是執行時用 innerHTML 產生的，scoped style 靠建置時加在元素上的
   data 屬性生效，runtime 產生的元素沒有那個屬性 ⇒ 樣式會整組不生效，而且畫面
   只是「看起來沒套樣式」不會報錯。                                          */

/* 篩選列：每一軸一行，左邊掛說明文字。
   .filters 本身是 justify-content:center（影片頁的用法），這裡改左對齊——
   有了軸標籤之後置中會讓每一行的起點對不齊，讀起來像四組不相關的東西。 */
.lib-axis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 10px; }
.lib-axis-label {
  flex: 0 0 auto; min-width: 4.5em; font-size: .82rem; font-weight: 800;
  color: var(--ink-3); letter-spacing: .04em;
}
.lib-axis .filters { flex: 1; justify-content: flex-start; margin-bottom: 0; gap: 8px; }
.lib-axis .filters button { padding: 7px 14px; font-size: .84rem; }
.lib-hint { margin: 6px 0 30px; font-size: .8rem; color: var(--ink-3); }

.lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lib-card {
  display: flex; gap: 20px; padding: 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.lib-cover {
  flex: 0 0 auto; width: 200px; height: auto; align-self: flex-start;
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); background: #fff;
}
/* 連結型項目（點了是跳轉外部網頁，不是下載檔）用情境圖當封面，圖上疊兩個訊號：
   底部的「線上查閱」標籤負責區分「跳轉 vs 下載」，右上角的產品 icon 負責區分產品線。
   後者不可省——同類文件的標題常常只差中間一個詞，縮到網格的欄寬時文字認不出來。
   比例對齊真封面（600:776），網格排起來不會有一格高矮不一。
   ⚠️ 這段必須留在共用樣式表：卡片是執行時動態產生的，
      元件的 scoped 樣式吃不到它——class 加得上去、畫面卻完全沒變。 */
.lib-cover-web {
  position: relative; overflow: hidden; aspect-ratio: 600 / 776;
  padding: 0; background: var(--bg);
}
/* :not() 不可省：底圖與角落的 icon 都是直接子層的 img，少了它 icon 會被撐成滿版 */
.lib-cover-web > img:not(.lib-cover-app) {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 這兩處的白與黑刻意寫死不走變數：它們疊在照片上，而照片不隨淺色/深色模式改變，
   跟著主題翻轉反而會在其中一個模式下讓 icon 或標籤消失在圖裡。 */
.lib-cover-app {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; padding: 6px;
  border-radius: 10px; background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.lib-cover-tag {
  position: absolute; inset: auto 0 0 0;
  padding: 20px 10px 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
}
/* 還沒配圖的項目：虛線佔位，保住網格不塌一格 */
.lib-cover-blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; aspect-ratio: 600 / 776;
  border-style: dashed; box-shadow: none;
  background: var(--bg); color: var(--ink-3);
}
.lib-cover-blank svg { width: 32px; height: 32px; }
.lib-cover-blank span { font-size: .8rem; }

/* 有中文版的案例封面：疊一張中文版，滑過換圖。
   🔴 換圖只在真的有滑鼠的裝置啟用。觸控裝置沒有 hover，開了只會卡在
   「按一下才變、再按才連走」的半吊子狀態；手機靠右上角那個常駐角標傳達同一件事。 */
.lib-cover-swap {
  position: relative; overflow: hidden; aspect-ratio: 600 / 776;
  padding: 0; background: #fff;
}
.lib-cover-swap > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* .22s + ease-out 曲線：`ease` 的頭尾都慢，短距離動畫會有「拖一下」的感覺；
   ease-out 起步快、收尾緩，換圖看起來是「跟著滑鼠到位」而不是「等了一下才動」。
   will-change 把這層先提到合成層，避免第一次 hover 才臨時提升造成掉幀。 */
.lib-cover-zh {
  opacity: 0;
  transition: opacity .22s cubic-bezier(.33, 0, .2, 1);
  will-change: opacity;
}
@media (hover: hover) {
  .lib-card:hover .lib-cover-zh,
  .lib-card:focus-within .lib-cover-zh { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-cover-zh { transition: none; }
}
/* 語系角標走右上角，不用 .lib-cover-tag 的底部橫幅——底部那條是給「線上查閱」用的，
   兩者可能同時出現在網格裡，形狀不同才分得出是兩件事。
   兩個角標疊在同一位置，與封面一起切換：它們回答同一個問題「現在看到的是哪一版」。 */
.lib-cover-lang {
  position: absolute; inset: 8px 8px auto auto;
  padding: 3px 9px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  text-align: center; white-space: nowrap;
  background: var(--ink); color: var(--bg);
  /* 曲線與時長必須和 .lib-cover-zh 完全一致——角標和封面是一起切換的，
     只要差一點就會看到「圖已經換了、標籤還在追」的錯位。 */
  transition: opacity .22s cubic-bezier(.33, 0, .2, 1);
}
/* 中文版用品牌紅：顏色一起變，換版的訊號比只換文字明確 */
.lib-cover-lang-zh { background: var(--red); color: #fff; opacity: 0; }
@media (hover: hover) {
  .lib-card:hover .lib-cover-lang-zh,
  .lib-card:focus-within .lib-cover-lang-zh { opacity: 1; }
  .lib-card:hover .lib-cover-lang:not(.lib-cover-lang-zh),
  .lib-card:focus-within .lib-cover-lang:not(.lib-cover-lang-zh) { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-cover-lang { transition: none; }
}
.lib-body { min-width: 0; }
.lib-title { margin: 0 0 2px; font-size: 1.02rem; line-height: 1.4; }
.lib-sub { margin: 0 0 6px; font-size: .82rem; color: var(--ink-3); }
.lib-meta { margin: 0 0 8px; font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lib-desc { margin: 0 0 14px; font-size: .9rem; line-height: 1.75; color: var(--ink-2); }
.lib-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.lib-btn {
  display: inline-block; padding: 9px 18px; border-radius: 99px;
  background: var(--red); color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: filter .25s;
}
.lib-btn:hover { filter: brightness(1.08); }
.lib-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* 次要動作（原版下載）：同尺寸的空心版，讓「中文版」在視覺上是主動作。
   顏色全走變數，深色模式才不會變成白底白字。 */
.lib-btn-ghost {
  background: transparent; color: var(--red);
  box-shadow: inset 0 0 0 1.5px var(--red);
}
.lib-btn-ghost:hover { background: var(--red); color: #fff; filter: none; }
.lib-src { font-size: .8rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.lib-src:hover { color: var(--ink); }

/* 檢視切換（清單／網格）。
   🔴 這一段和下面的網格規則**必須留在共用樣式表**：卡片是執行時 innerHTML 產生的，
      搬進元件的 scoped style 會整組失效，而且畫面只是「沒套到樣式」不會報錯。
   切換只改容器上的 data-view，卡片 HTML 兩種模式完全相同——所以下面每一條都是
   「同一份 HTML 的另一種排法」，不可依賴只在某一模式才存在的元素。 */
.view-toggle {
  display: flex; gap: 2px; padding: 3px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 99px; background: var(--bg);
}
.view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 99px; background: none;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--ink-3);
  cursor: pointer; transition: background .2s, color .2s;
}
.view-toggle button:hover { color: var(--ink); }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.view-toggle button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.view-toggle svg { flex-shrink: 0; }

/* 網格檢視：封面移到卡片頂端、整排等寬。
   auto-fill + minmax 讓欄數跟著容器寬度自己長，不必寫死斷點，手機上自然收成單欄。 */
.lib-grid[data-view="grid"] .lib-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.lib-grid[data-view="grid"] .lib-card { flex-direction: column; gap: 14px; }
.lib-grid[data-view="grid"] .lib-cover { width: 100%; align-self: stretch; }
.lib-grid[data-view="grid"] .lib-body { display: flex; flex-direction: column; flex: 1; }
/* 說明文字長短差很多，在窄卡片裡會讓整面牆參差不齊——清單模式一行一筆看不出來，
   排成網格就很明顯。截三行讓高度接近，按鈕再靠 margin-top:auto 對齊底部。 */
.lib-grid[data-view="grid"] .lib-desc {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.lib-grid[data-view="grid"] .lib-actions { margin-top: auto; }

@media (max-width: 640px) {
  .lib-card { flex-direction: column; gap: 14px; }
  .lib-cover { width: 140px; }
  .lib-axis { flex-direction: column; gap: 4px; }
  .lib-axis-label { min-width: 0; }
}
/* 頁尾 LINE QR：桌機掃碼、手機點擊直接開 LINE，同一個元素兩種用法。
   白底內距是必要的：QR 圖本身的 quiet zone 為 0，黑點直接切齊邊緣。QR 規範要求四周留白
   才掃得穩，深色頁尾上少了這圈白，定位點會跟背景糊在一起。**不要拿掉這個 padding。** */
.f-qr { display: inline-block; margin-top: 10px; background: #fff; padding: 5px; border-radius: 8px; line-height: 0; }
.f-qr img { display: block; width: 96px; height: 96px; }
/* ⚠️ 提權：頁尾的 `.footer-grid a { display: block }`（權重 0,1,1）會蓋掉 .f-qr 的
   inline-block（權重 0,1,0），白底卡會被撐滿整個 grid 欄位。這條 (0,2,1) 把 inline-block
   搶回來。上面那行別刪：非 .footer-grid 脈絡下複用時仍靠它。 */
.footer-grid a.f-qr { display: inline-block; }

/* 官方通路徽章。
   ⚠️ 選擇器刻意寫成 (0,2,1)，與 .f-qr 同理：
      頁尾的 .footer-grid a { display:block }（0,1,1）會把連結撐滿整個 grid 欄位，
      白底徽章會變成一條橫跨整欄的白帶。別把選擇器簡化成 .f-badge，那會失效。
   🔴 圖片本身不設 filter／opacity／background／border-radius——官方規範禁止改動徽章外觀，
      白底與圓角都是原檔的一部分。這裡只控制尺寸與周圍留白。
   淨空 32px = 徽章高度 64px 的一半（原廠規範的最低要求）。 */
.footer-grid a.f-badge { display: inline-block; margin: 20px 0 8px; line-height: 0; }
.f-badge img { display: block; width: 180px; height: auto; }

/* ── 站內推廣版位 ──────────────────────────────────────────────────────────
   新聞內文頁用 banner、知識庫內文頁用 sidebar，一頁只掛一種。
   ⚠️ class 名刻意不用 ad／advert／banner 開頭：擋廣告插件的預設清單會依 class 名整塊隱藏，
      而那種失敗是靜默的（版面不報錯、只是空一塊）。 */
.promo-slot { margin: 40px 0; }
.promo-label {
  margin: 0 0 8px; font-size: 12px; line-height: 1.4; letter-spacing: .08em;
  color: var(--ink-3); text-transform: none;
}

/* 用 scroll-snap 而不是自己算位移：手機原生滑動、鍵盤捲動、螢幕閱讀器跳轉三件事免費送。
   scrollbar 藏起來但捲動仍可用——版位只有兩三張，捲軸比內容還顯眼。 */
/* 🔴 寬度必須鎖成「單張圖的寬度」，這是輪播成立的前提。
   不鎖的話 flex 會把所有張並排展開：banner 變成兩張並排後整組置中（於是第一張看起來
   往右偏、對不齊內文左緣），sidebar 變成兩張同時露出、側欄兩倍高——兩種都不是輪播，
   而且版面不會報錯，只是看起來「怪怪的」。 */
.promo-track {
  display: flex; gap: 16px;
  width: 300px; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-item { flex: 0 0 auto; scroll-snap-align: start; line-height: 0; border-radius: 10px; overflow: hidden; }
.promo-item img { display: block; max-width: 100%; height: auto; }

/* 指示點。44px 命中區是觸控最低標準，視覺上只有 8px 的點——padding 撐出可點範圍，
   不要把點本身放大成 44px，那在版位旁邊會比廣告還搶眼。 */
.promo-dots { display: flex; gap: 2px; justify-content: center; margin-top: 8px; }
.promo-dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.promo-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background .2s ease, transform .2s ease;
}
.promo-dot[aria-selected='true']::before { background: var(--red, #FA0F00); transform: scale(1.25); }

/* banner：桌機拉到與內文同寬、未達 1024px 換成 300×250 方形。
   靠左對齊而不是置中——內文是靠左的，版位置中會多出一道跟其他區塊都對不上的軸線。 */
.promo-banner { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) {
  /* 與文章同寬。素材標示 728×90，等比撐到 880 後高度約 109px。
     不會糊：PNG 實際像素是 1456×180（@2x），880 仍在原生解析度之內。
     picture 預設是 inline，不給 display:block 的話撐不滿也吃不到 width。 */
  .promo-banner .promo-track { width: 100%; }
  .promo-banner .promo-item { flex: 0 0 100%; }
  .promo-banner .promo-item picture { display: block; width: 100%; }
  .promo-banner .promo-item img { width: 100%; height: auto; }
}

/* sidebar：只在知識庫內文頁出現，跟著捲動黏在視窗上。
   top 值 = 頁首高度 64px + 24px 呼吸空間；頁首是 fixed，不留這段會被蓋住。
   ⚠️ 捲動方向維持水平（跟 banner 同一套）：圖是直的不代表輪播要是直的，
      改成垂直會讓 JS 那邊的 scrollLeft 全部失效，而且失效的樣子是「不會動」不是報錯。 */
.promo-sidebar { margin: 0; }
@media (min-width: 1024px) {
  .promo-sidebar { position: sticky; top: 88px; }
  .promo-sidebar .promo-track { width: 160px; }
  .promo-sidebar .promo-dots { margin-top: 12px; justify-content: flex-start; }
}
/* 未達 1024px 側欄會塌到文章下方，這時它跟 banner 長得一樣（都是 300×250）。 */
@media (max-width: 1023px) {
  .promo-sidebar { margin: 40px 0; display: flex; flex-direction: column; align-items: flex-start; }
  /* 還沒有方形圖的那則：整則連同指示點藏起來。必須排在 .promo-dot 之後——同權重比先後。 */
  .promo-desktop-only { display: none; }
}

/* ── site.css（自動產生，請勿直接編輯本檔） ── */
/* 內容站專用：導覽列、頁尾、文章頁容器。 */

/* ── 文章頁容器 ── */
.article-wrap { max-width: 880px; }

/* ── 頁尾 ── */
.site-footer {
  background: var(--navy);
  color: #fff;
  margin-top: 80px;
  padding-block: 56px 28px;
}
.footer-grid {
  display: grid; gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }

.footer-grid a,
.footer-grid .f-plain {
  display: block;
  font-size: .88rem;
  line-height: 2.1;
  color: rgba(255,255,255,.72);
  transition: color .2s;
}
.footer-grid a:hover { color: #fff; }
.footer-grid a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

.f-brand { font-size: 1.05rem; font-weight: 900; margin: 0 0 8px; }
.f-sub   { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.8; }
.f-head  {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  color: var(--red); margin: 0 0 10px;
}

.f-bottom {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: baseline; justify-content: space-between;
}
.f-sites { font-size: .82rem; color: rgba(255,255,255,.55); margin: 0; }
.f-sites a { display: inline; margin-left: 14px; color: rgba(255,255,255,.72); }
.f-sites a:first-of-type { margin-left: 8px; }
.f-legal { font-size: .78rem; color: rgba(255,255,255,.42); margin: 0; }
.f-legal a { color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; }
.f-legal a:hover { color: #fff; }

/* 頁尾分享鈕（2026-09-04）。
   色值刻意全部寫成 rgba(255,255,255,…) 而不是走 CSS 變數：頁尾是固定深藍底白字、
   深色模式只換更深的底（見下方 media query），文字色從來不跟著切換。
   用 var(--ink) 這類會跟著配色切換的 token，反而會在深色模式變成深底深字。 */
.f-share {
  margin-top: 36px;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
}
.f-share-label { font-size: .82rem; color: rgba(255,255,255,.55); }
.f-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .82rem; line-height: 1;
  padding: 9px 15px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.f-share-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.42);
  color: #fff;
}
.f-share-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.f-share-btn[data-state="done"] {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.48);
  color: #fff;
}
.f-share-btn svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) { .f-share-btn { transition: none; } }

/* 頁尾在深藍底上，深色模式不需要再變 —— 但文字對比要顧到 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer { background: #06122f; }
}
:root[data-theme="dark"] .site-footer { background: #06122f; }

/* ── kb.css（自動產生，請勿直接編輯本檔） ── */
/* 知識庫（KB）文章版型。色票沿用站台共用 tokens，不另創一套。
   刻意獨立成一檔、不 import 共用樣式：兩份 bundle 必須互相隔離，
   任一邊新增樣式都不得改動另一邊的產物。 */

/* 部分圖片帶 width/height 屬性，欄位縮窄時高度會釘在屬性值造成直向拉伸——
   本行讓高度跟著等比縮 */
img { height: auto; }

/* ── 開頭三行自我判定區（模板固定區塊）── */
.kb-triage {
  display: grid; gap: 10px; margin: 28px 0 8px;
  padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); font-size: .93rem; line-height: 1.8;
}
.kb-triage-row { display: flex; gap: 10px; }
.kb-triage-row dt {
  flex: 0 0 6.5em; font-weight: 700; color: var(--ink);
}
.kb-triage-row dd { margin: 0; color: var(--ink-2); }
.kb-triage-row dd .kb-admin { color: var(--note); font-weight: 700; }

/* ── 仿系統錯誤對話框（可重用元件；原文無截圖時的預設呈現）── */
.kb-errbox {
  max-width: 34rem; margin: 2rem auto; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg);
  background: var(--bg); font-size: .95rem;
}
.kb-errbox-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: .8rem; font-weight: 700; color: var(--ink-3);
}
.kb-errbox-bar::before { content: '!'; color: var(--note); font-weight: 900; font-size: .95rem; }
.kb-errbox-body { padding: 18px 20px 6px; }
.kb-errbox-body .zh { margin: 0 0 10px; color: var(--ink); font-weight: 500; line-height: 1.8; }
.kb-errbox-body .en { margin: 0 0 10px; color: var(--ink-3); font-size: .88rem; line-height: 1.7; }
.kb-errbox-body .code {
  margin: 0; font-size: .82rem; color: var(--ink-3);
  font-family: Consolas, 'Courier New', monospace;
}
.kb-errbox-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
.kb-errbox-btns span {
  padding: 5px 22px; border: 1px solid var(--border); border-radius: 6px;
  font-size: .85rem; color: var(--ink-2); background: var(--surface); user-select: none;
}
.kb-errbox-note { text-align: center; font-size: .78rem; color: var(--ink-3); margin: -1.2rem auto 2rem; max-width: 34rem; }

/* ── 解法步驟（有序、風險遞增）── */
.prose ol.kb-steps { counter-reset: kbstep; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.prose ol.kb-steps > li {
  counter-increment: kbstep; position: relative;
  padding: 0 0 1.6rem 52px; margin: 0;
}
.prose ol.kb-steps > li::before {
  content: counter(kbstep); position: absolute; left: 0; top: 2px;
  width: 34px; height: 34px; border-radius: 99px;
  background: var(--navy); color: #fff; font-weight: 900; font-size: 1rem;
  display: grid; place-items: center;
}
.prose ol.kb-steps > li > strong:first-child { display: block; color: var(--ink); font-size: 1.06rem; margin-bottom: 4px; }

/* ── 警告框（有風險步驟前＋回退方法）── */
.kb-warn {
  border: 1px solid color-mix(in srgb, var(--note) 45%, transparent);
  border-left: 4px solid var(--note); border-radius: 10px;
  background: color-mix(in srgb, var(--note) 7%, var(--bg));
  padding: 14px 18px; margin: 0 0 1.2rem; font-size: .9rem; line-height: 1.8;
}
.kb-warn b:first-child { color: var(--note); }
.kb-warn .undo { display: block; margin-top: 6px; color: var(--ink-2); }
.kb-warn .undo::before { content: '回退方法：'; font-weight: 700; color: var(--ink); }

/* ── 圖片統一：寬度上限／外框／置中＋figcaption 圖說 ── */
.prose figure.kb-fig { margin: 2rem auto; max-width: 640px; }
.prose figure.kb-fig img {
  margin: 0 auto; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; box-shadow: var(--shadow);
}
.prose figure.kb-fig figcaption {
  margin-top: 10px; font-size: .82rem; color: var(--ink-3);
  text-align: center; line-height: 1.7;
}
.prose figure.kb-fig figcaption .old-ui { color: var(--note); font-weight: 700; }
/* 點圖放大：游標提示可點，dialog 滿版深底顯示原圖 */
.prose figure.kb-fig img { cursor: zoom-in; }
#kb-zoom {
  max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; padding: 24px;
  border: 0; background: transparent; cursor: zoom-out;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
#kb-zoom[open] { display: flex; }
#kb-zoom::backdrop { background: rgba(0, 0, 0, .86); }
#kb-zoom img { max-width: 100%; max-height: calc(100vh - 80px); width: auto; height: auto; border-radius: 6px; background: #fff; }
#kb-zoom p { margin: 0; color: #ddd; font-size: .85rem; }

/* ── 摺疊（長段落收進摺疊）── */
.prose details.kb-fold {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0 18px; margin: 0 0 1.5rem; background: var(--surface);
}
.prose details.kb-fold > summary {
  cursor: pointer; padding: 13px 0; font-weight: 700; color: var(--ink); list-style: none;
}
.prose details.kb-fold > summary::before { content: '▸ '; color: var(--red); }
.prose details.kb-fold[open] > summary::before { content: '▾ '; }
.prose details.kb-fold > :last-child { margin-bottom: 1.2rem; }

/* ── 參考長文的表格版型 ── */
.kb-longform-badge {
  display: inline-block; padding: 5px 14px; border-radius: 99px; font-size: .75rem; font-weight: 700;
  background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--navy); margin: 0 0 18px 8px;
}
:root[data-theme="dark"] .kb-longform-badge { color: var(--cyan); }
.kb-table-wrap { overflow-x: auto; margin: 0 0 1.8rem; }
.prose table.kb-table {
  width: 100%; border-collapse: collapse; font-size: .88rem; line-height: 1.7;
}
/* th 不設 white-space:nowrap：表頭字一多會把整欄撐開、撐出橫向卷軸，讓它能換行。
   ⚠️ 文章內表格的欄數結構各不相同，此處刻意不做手機整列堆疊（見下方 @media 的做法）。 */
.prose table.kb-table th {
  text-align: left; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); padding: 9px 12px;
}
.prose table.kb-table td { border: 1px solid var(--border); padding: 8px 12px; color: var(--ink-2); }

/* 手機（≤640px）：縮字級＋允許長字串斷行，讓 2–3 欄的表格直接塞得進 375px，
   而不是給一條橫向卷軸。
   不做「整列堆疊」：那要給每個 td 加 data-label 才看得出哪個值是什麼欄位（表頭堆疊後會消失），
   等於要改動每篇文章的 HTML。
   🔴 `overflow-wrap: anywhere` 是關鍵：表格裡有 `lm.licenses.adobe.com` 這種不可斷的
      英文網域，不給它斷點的話縮字級也救不了。 */
@media (max-width: 640px) {
  .prose table.kb-table { font-size: .78rem; }
  .prose table.kb-table th,
  .prose table.kb-table td { padding: 6px 8px; overflow-wrap: anywhere; }
  /* 例外：規格矩陣（欄數多、價值在跨欄並排比對）保留橫向卷軸——堆疊或壓縮都會摧毀比對能力。 */
  .prose table.kb-table--matrix { font-size: .82rem; }
  .prose table.kb-table--matrix th,
  .prose table.kb-table--matrix td { white-space: normal; overflow-wrap: normal; }
}
.prose table.kb-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.prose table.kb-table code { font-family: Consolas, 'Courier New', monospace; font-size: .85em; word-break: break-all; }

/* ── 逾 18 個月過時提示 ── */
.kb-stale {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--note) 40%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--note) 8%, var(--bg));
  padding: 12px 16px; margin: 20px 0 0; font-size: .88rem; line-height: 1.7; color: var(--ink-2);
}
.kb-stale b { color: var(--note); }

/* ── 參考來源 ── */
.kb-sources { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.kb-sources h2 { font-size: 1.05rem; font-weight: 900; margin: 0 0 14px; }
.kb-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kb-sources li { font-size: .9rem; line-height: 1.7; }
.kb-sources li.src-none { color: var(--note); font-weight: 700; }
.kb-sources a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.kb-sources .src-tag {
  display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; background: var(--surface);
  border: 1px solid var(--border); color: var(--ink-3);
}
.kb-sources .src-note { color: var(--ink-3); font-size: .82rem; display: block; }

/* ── 「還是沒解決？」＋聯繫前準備清單（模板固定區塊）── */
.kb-escalate {
  margin-top: 40px; border: 2px solid var(--border); border-radius: 18px;
  padding: clamp(22px, 4vw, 30px); background: var(--surface);
}
.kb-escalate h2 { font-size: 1.2rem; font-weight: 900; margin: 0 0 8px; }
.kb-escalate > p { margin: 0 0 16px; color: var(--ink-2); font-size: .95rem; line-height: 1.8; }
.kb-prep { margin: 0 0 20px; padding: 14px 18px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg); }
.kb-prep p { margin: 0 0 8px; font-weight: 700; font-size: .9rem; }
.kb-prep ol { margin: 0; padding-left: 1.4em; font-size: .9rem; line-height: 2; color: var(--ink-2); }
.kb-escalate .kb-line-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 10px;
  background: #06C755; color: #fff; font-weight: 700; transition: filter .25s;
}
.kb-escalate .kb-line-btn:hover { filter: brightness(.92); }
.kb-escalate .kb-alt { font-size: .85rem; color: var(--ink-3); margin: 12px 0 0; }

/* ── 頁尾錨定行 ── */
.kb-foot {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--ink-3); display: grid; gap: 4px;
}
.kb-foot .anchor-line b { color: var(--ink-2); }

/* ── 相關 KB 文章（同錯誤家族互鏈）── */
.kb-related { margin-top: 40px; }
.kb-related h2 { font-size: 1.05rem; font-weight: 900; margin: 0 0 14px; }
.kb-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kb-related-grid a {
  display: block; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); font-size: .92rem; font-weight: 700; line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
}
.kb-related-grid a:hover { border-color: var(--red); box-shadow: var(--shadow); }
.kb-related-grid a .sub { display: block; margin-top: 4px; font-size: .78rem; font-weight: 400; color: var(--ink-3); }

/* ── 可複製區塊：指令／機碼路徑／網域等要照抄的文字 ── */
.kb-copy { position: relative; margin: 0 0 1.4rem; }
.kb-copy pre {
  margin: 0; padding: 14px 16px; padding-right: 74px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  overflow-x: auto; font-size: .85rem; line-height: 1.8;
}
.kb-copy code { font-family: Consolas, 'Courier New', monospace; color: var(--ink); }
.kb-copy-btn {
  position: absolute; top: 8px; right: 8px; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
  font-size: .75rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  font-family: inherit; transition: color .2s, border-color .2s;
}
.kb-copy-btn:hover { color: var(--red); border-color: var(--red); }
.kb-copy-btn.done { color: #0a7d33; border-color: #0a7d33; }

/* ── 影片嵌入（既有教學影片照用）── */
.prose .kb-video { position: relative; aspect-ratio: 16 / 9; margin: 2rem 0; }
.prose .kb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* ── 列印：隱藏導覽／按鈕，步驟完整印出 ── */
@media print {
  .sh-header, .sh-drawer, .site-footer, .crumbs,
  .kb-escalate, .kb-copy-btn, .kb-related { display: none !important; }
  body { padding-top: 0 !important; }
  .kb-triage, .kb-warn, .kb-errbox { break-inside: avoid; }
  .prose ol.kb-steps > li { break-inside: avoid; }
  .kb-copy pre { border: 1px solid #999; overflow: visible; white-space: pre-wrap; word-break: break-all; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .75em; color: #555; }
}

/* ── 錯誤代碼速查表頁 /kb/error-codes/：兩欄版型 ──
   「錯誤代碼」欄裝的多半是訊息原文（最長可達 86 字），與症狀本來就是同一件事的兩面，
   所以併進同一格、代碼斷行後接症狀。
   🔴 橫向卷軸的真正來源不是欄數，是 .code-cell 若設 white-space:nowrap：
      長訊息不准換行，併成兩欄照樣撐爆。兩件事要一起做。 */
.kb-codes-table-wrap { overflow-x: auto; margin-top: 32px; }
table.kb-codes {
  width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.7;
}
table.kb-codes th {
  text-align: left; background: var(--surface); border-bottom: 2px solid var(--border);
  padding: 12px 14px; white-space: nowrap;
}
table.kb-codes td { border-bottom: 1px solid var(--border); padding: 12px 14px; vertical-align: top; }
/* 右欄釘 38%：不釘的話瀏覽器按內容分配寬度，86 字的訊息會把文章標題那欄擠成一根柱子 */
table.kb-codes th:last-child, table.kb-codes td:last-child { width: 38%; }
table.kb-codes .code-cell {
  display: block; font-family: Consolas, 'Courier New', monospace; font-size: .85em;
  color: var(--ink); font-weight: 700;
  overflow-wrap: anywhere;   /* 長英文訊息必須斷得開；中文本來就能任意斷行 */
}
table.kb-codes .kb-codes-symptom { display: block; margin-top: 5px; font-size: .85em; color: var(--ink-3); }
table.kb-codes .kb-codes-date { display: block; margin-top: 4px; font-size: .8em; color: var(--ink-3); }
table.kb-codes a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* 手機（≤640px）：兩欄各只剩約 170px，長訊息會擠成一根柱子——沒有卷軸了但更難讀，
   所以這一張表整列堆疊。 */
@media (max-width: 640px) {
  table.kb-codes thead { display: none; }
  table.kb-codes, table.kb-codes tbody, table.kb-codes tr, table.kb-codes td { display: block; width: 100%; }
  table.kb-codes tr { border-bottom: 1px solid var(--border); padding: 14px 0; }
  table.kb-codes td { border: 0; padding: 0; }
  table.kb-codes td:last-child { width: 100%; margin-top: 8px; }
}

/* ── 分類列表頁 /kb/<分類>/ ──
   一列裡「症狀」比「標題」大：來的人手上拿的是現象（開檔跳這串字），不是文章命名。
   不用縮圖卡（站上 .grid > .card 那套）——KB 文章沒有縮圖，空圖框只會讓整頁看起來壞掉。 */
/* 分類標題前掛 Adobe 產品標誌。多顆並排是刻意的——有些分類涵蓋兩、三個產品。
   標誌本身是彩色方塊，不套底色容器。 */
.kb-subcat-h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kb-subcat-logos { display: inline-flex; align-items: center; gap: 6px; }
.kb-subcat-logos img { display: block; width: 36px; height: 36px; }
@media (max-width: 640px) { .kb-subcat-logos img { width: 30px; height: 30px; } }

.kb-subcat-count { margin: 14px 0 0; font-size: .88rem; color: var(--ink-3); }
.kb-subcat-count a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.kb-subcat-list { list-style: none; padding: 0; margin: 28px 0 0; }
.kb-subcat-list > li { padding: 18px 0; border-bottom: 1px solid var(--border); }
.kb-subcat-list > li:first-child { border-top: 1px solid var(--border); }
.kb-subcat-list a { display: block; text-decoration: none; }
.kb-subcat-symptom { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.65; color: var(--ink); }
.kb-subcat-list a:hover .kb-subcat-symptom,
.kb-subcat-list a:focus-visible .kb-subcat-symptom { color: var(--red); }
.kb-subcat-title { display: block; margin-top: 6px; font-size: .87rem; color: var(--ink-3); line-height: 1.6; }
.kb-subcat-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: .8rem; color: var(--ink-3); }
.kb-subcat-codes {
  font-family: Consolas, 'Courier New', monospace; font-size: .95em;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px;
}

.kb-subcat-nav { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.kb-subcat-nav > p { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.kb-subcat-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.kb-subcat-nav a {
  display: inline-block; padding: 7px 14px; font-size: .85rem; font-weight: 700;
  color: var(--ink-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.kb-subcat-nav a:hover, .kb-subcat-nav a:focus-visible { color: var(--red); border-color: var(--red); }

/* ── 知識庫內文頁的兩欄版型（右側推廣版位）──────────────────────────────
   只有 .kb-with-aside 吃這條，其他用 .article-wrap 的內文頁完全不受影響——
   兩邊共用同一個 .article-wrap，若直接改它會把所有內文頁一起變成兩欄。

   斷點選 1240px 而不是 1024px：主欄 880 ＋ 側欄 300 ＋ 間距 40 ＝ 1220，
   再加 .wrap 的左右 padding 各 24 就是 1268。低於這個寬度硬排會壓縮主欄，
   而主欄寬度是既有排版的固定值，不動它。所以窄一點就直接塌回單欄。 */
@media (min-width: 1240px) {
  .article-wrap.kb-with-aside {
    max-width: 1220px;
    display: grid;
    grid-template-columns: 880px 300px;
    gap: 40px;
    align-items: start;
  }
  /* 主欄要能收縮到 0 以下才不會被超寬的程式碼區塊撐破 grid 欄位——
     grid 項目的 min-width 預設是 auto，內容多寬欄就多寬，側欄會被擠出畫面。 */
  .kb-with-aside .kb-main { min-width: 0; }
}