/*
 * 前段：變數、頁首、頁尾、排行列、卡片——**第一屏就要用的**。
 * 2026-10-03 把捲下去才看得到的四段（讀者反應、會員、祈福牆、推薦）拆到 `site-blocks.css`，
 * 收尾的覆蓋層（手機版面等）拆到 `site-tail.css`。三份要照 `site.css → site-blocks.css → site-tail.css`
 * 的順序掛在 <head>（見 layouts/site），**順序換了層疊就不對**。
 */
  /* 手機：按鈕不觸發雙擊縮放、不閃灰底（推可以連點） */
  button, [role="button"], a, .rxn-think, .rc-sp, [data-like] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  :root {
    --background: #f4f5f7;
    --foreground: #15171c;
    --card: #ffffff;
    --muted: #eef0f3;
    --muted-foreground: #676c75;
    --border: #e1e4e9;
    --primary: #15171c;
    --primary-foreground: #ffffff;
    --push: oklch(0.55 0.16 252);
    --up: #d62839;
    --up-soft: #fbe7e9;
    --down: #178a55;
    --down-soft: #e2f3ea;
    --boo: #178a55;
    --arrow: #b7bcc4;
    --grid: #eceef1;
    /* 飆升跑馬燈：白底細線（ticker-v1 方案 C），跟頁首連成一片，只有「飆升中」標籤和數字是紅的 */
    --tape: #ffffff;
    --tape-foreground: #15171c;
    --tape-muted: #b7bcc4;
    --tape-up: #d62839;
    --logo-news: #f0a500;
    --rank1: #c8102e;
    --rank2: #e4570f;
    --rank3: #c98a00;
    --logo-tile: #0d0e11;
  }
  :root[data-mode="dark"] {
    color-scheme: dark;
    --push: oklch(0.7 0.14 250);
    --background: #0c0e12;
    --foreground: #eceef2;
    --card: #14171c;
    --muted: #1d2128;
    --muted-foreground: #969ca6;
    --border: #252a32;
    --primary: #eceef2;
    --primary-foreground: #14171c;
    --up: #ff4d5e;
    --up-soft: #3a1419;
    --down: #3cc98a;
    --down-soft: #10291d;
    --boo: #3cc98a;
    --arrow: #4a505a;
    --grid: #1e2229;
    --tape: #14171c;
    --tape-foreground: #eceef2;
    --tape-muted: #4a505a;
    --tape-up: #ff4d5e;
    --logo-news: #ffc20e;
    --rank1: #ff3b4f;
    --rank2: #ff8a3d;
    --rank3: #ffc247;
    --logo-tile: #2a2e36;
  }
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  * { border-color: var(--border); }
  .logo-wm { display: inline-flex; align-items: baseline; font-family: "Barlow Condensed", "Noto Sans TC", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
  .logo-once { font-weight: 600; font-size: 0.5em; color: var(--muted-foreground); margin-right: 0.16em; letter-spacing: 0.02em; }
  .logo-top { color: #e3233c; }
  .logo-news { color: var(--logo-news); margin-left: 0.12em; }
  .media-band { --b-bg: #eaf0f7; --b-edge: #dbe3ee; --b-line: #e6e9ee; --b-dash: #b9c0ca; --b-label: #3d434c; background: var(--b-bg); border-top: 1px solid var(--b-edge); border-bottom: 1px solid var(--b-edge); }
  :root[data-mode="dark"] .media-band { --b-bg: #10151c; --b-edge: #1c232d; --b-line: #232a33; --b-dash: #3a424e; --b-label: #c9ced6; }
  .media-band svg text { font-family: "Noto Sans TC", sans-serif; }
  /* 媒體定位圖可以收合（使用者 2026-10-05）：收起來只留標題那一列，狀態記在 localStorage（otn.bandFold）。
     內容換範圍時整塊會被換掉，所以收合的記號放在外層 section 上、按鈕的字用 CSS 切換 */
  #media-band .mbf .f-off, #media-band.is-folded .mbf .f-on { display: none; }
  #media-band.is-folded .mbf .f-off { display: inline; }
  #media-band.is-folded > div > :not(:first-child) { display: none; }
  #media-band.is-folded > div > :first-child [role="group"], #media-band.is-folded [data-share] { display: none; }
  #media-band.is-folded > div { padding-top: 16px; padding-bottom: 16px; }
  :root { --h0: #f3f4f6; --h1: #fde2e4; --h2: #f9b4bc; --h3: #f27c8a; --h4: #e3485c; --h5: #c8102e; }
  :root[data-mode="dark"] { --h0: #1d2128; --h1: #3a1a20; --h2: #5c2029; --h3: #8a2433; --h4: #c22a3f; --h5: #ff4d5e; }
  :root { --ah1: #eef0f3; --ah2: #fbe3e6; --ah3: #f6c1c8; --ah4: #ec8795; --ah5: #c8102e; }
  :root[data-mode="dark"] { --ah1: #23272e; --ah2: #3a1a20; --ah3: #5c2029; --ah4: #9a2636; --ah5: #ff4d5e; }
  /* 看過的新聞標題變淡：瀏覽器本來就記得點過哪些連結（:visited），不用程式、不記錄資料 */
  :root { --visited: #9aa0a9; }
  :root[data-mode="dark"] { --visited: #6b717b; }
  a.news-link:visited { color: var(--visited) !important; }
  .evl { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; margin-top: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px 1px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .evl:hover { background: var(--muted); }
  .evl i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  @media (max-width: 640px) { .evl .evl-more { display: none; } }
  .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(0 0 0 / .06); }
  .pwa-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgb(0 0 0 / .14); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  @media (min-width: 640px) { .pwa-sheet { left: auto; right: 24px; bottom: 24px; width: 380px; border: 1px solid var(--border); border-radius: 14px; } }
  /* ===== 頁尾（範本 footer-v1）：依頁尾本身的寬度切換（container query） ===== */
  .ft { container: ft / inline-size; background: var(--card); border-top: 1px solid var(--border); }
  .ft-in { max-width: 80rem; margin: 0 auto; padding: 34px 24px 0; }
  .ft-grid { display: grid; gap: 28px 32px; }
  @container ft (min-width: 1000px) { .ft-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .7fr)) minmax(0, 2fr); } }
  .ft-brand p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--muted-foreground); max-width: 30ch; }
  .ft-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; margin-top: 14px; }
  .ft-stats dt { font-size: 11px; color: var(--muted-foreground); } .ft-stats dd { margin: 0; font: 700 20px/1.1 "Barlow Condensed", sans-serif; }
  .ft-stats dd small { font: 400 11px "Noto Sans TC", sans-serif; color: var(--muted-foreground); margin-left: 2px; }
  .ft-follow { display: flex; gap: 8px; margin-top: 16px; }
  .ft-follow a { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
  .ft-follow a:hover { opacity: .88; }
  :root[data-mode="dark"] .ft-follow a.threads { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
  .ft-col h3, .ft-fam h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; }
  .ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; color: var(--muted-foreground); }
  .ft-col a, .ft-col button { text-align: left; }
  .ft-col a:hover, .ft-col button:hover { color: var(--foreground); }
  .ft-col .new { font: 700 10px/1 "Noto Sans TC", sans-serif; color: var(--up); background: var(--up-soft); border-radius: 4px; padding: 2px 4px; margin-left: 4px; vertical-align: 1px; }
  .ft-col summary { list-style: none; }
  .ft-col summary::-webkit-details-marker { display: none; }
  .ft-fam { min-width: 0; background: color-mix(in srgb, var(--muted) 45%, var(--card)); border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 12px; }
  .ft-fam h3 small { font-weight: 400; color: var(--muted-foreground); font-size: 11.5px; margin-left: 6px; }
  .ft-fam ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .ft-fam li { min-width: 0; }
  .ft-fam li a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px; border-radius: 8px; }
  .ft-fam li a:hover { background: var(--card); }
  .ft-fam .ic { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .ft-fam .ic img { width: 20px; height: 20px; object-fit: contain; }
  .ft-fam .fn { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft-fam .fd { display: block; font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft-fam a.me { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
  .ft-bottom { margin-top: 30px; border-top: 1px solid var(--border); padding: 16px 0 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; color: var(--muted-foreground); line-height: 1.7; }
  .ft-bottom a, .ft-bottom button { text-decoration: underline; text-underline-offset: 2px; }
  @container ft (max-width: 999px) {
    .ft-in { padding: 26px 16px 0; }
    .ft-grid { gap: 0; }
    .ft-brand { padding-bottom: 20px; }
    .ft-col { border-top: 1px solid var(--border); }
    .ft-col h3 { margin: 0; }
    .ft-col summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; }
    .ft-col summary::after { content: "+"; font-size: 18px; color: var(--muted-foreground); }
    .ft-col details[open] summary::after { content: "−"; }
    .ft-col ul { padding: 0 2px 14px; }
    .ft-fam { margin-top: 18px; }
  }
  @container ft (max-width: 330px) { .ft-fam ul { grid-template-columns: 1fr; } }
  /* 靜態站多的一條（第 121 輪，原型沒有）：HTML 一律輸出 `<details open>`（沒有 JavaScript 的人
     看得到全部連結），寬版把 summary 變成純標題——`+`／`−` 與可點的游標只在窄版出現。
     **收合是 JS 做的**（`site-footer.js` 在窄版拿掉 open）：`<details>` 沒有 open 時，
     Chrome 不是用一條可以覆蓋的 `display:none` 藏內容，CSS 叫不出來。見 App\Domain\Site\SiteFooter */
  @container ft (min-width: 1000px) {
    .ft-col summary { pointer-events: none; }
    .ft-col summary::after { content: none; }
  }
  /* 關於、隱私權政策 */
  .doc { max-width: 46rem; }
  .doc h2 { margin: 28px 0 8px; font-size: 18px; font-weight: 900; }
  .doc p { margin: 0 0 12px; font-size: 15px; line-height: 1.9; }
  .doc ul { margin: 0 0 12px; padding-left: 1.3em; font-size: 15px; line-height: 1.9; list-style: disc; }
  .doc li { margin: 2px 0; }
  .doc a { text-decoration: underline; text-underline-offset: 2px; }
  :root { --click: #7c3aed; --click-soft: #f1ebfe; }
  :root[data-mode="dark"] { --click: #a78bfa; --click-soft: #2a2140; }
  .own-tag { font-size: 10.5px; font-weight: 700; color: var(--click); background: var(--click-soft); border-radius: 4px; padding: 1px 6px; }
  /* 分類列右邊的縮小版追蹤按鈕（使用者 2026-10-05，原型 home-v7）：高度跟分類的膠囊一樣，
     顏色照下面那張卡片（Facebook 藍、Threads 黑、通知深灰）；不佔額外高度 */
  .cat-row { display: flex; align-items: center; gap: 10px; }
  .cat-follow { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
  .cat-follow .cf-label { font-size: 12px; color: var(--muted-foreground); }
  .cfb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .cfb:hover { opacity: .9; }
  .cfb svg { width: 14px; height: 14px; }
  .cfb.push { background: #3f3f46; }
  :root[data-mode="dark"] .cfb { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
  .cfb.push.on { background: var(--card); color: #15803d; box-shadow: inset 0 0 0 1px #86efac; }
  /* 手機：按鈕折到分類的下一行（使用者 2026-10-05：擠在同一行「太擠了」），字照樣顯示 */
  /* 手機的主區塊左右沒有內距（卡片貼邊），這一列自己留 12px，跟上面的標題對齊（原本「分類」兩個字貼著螢幕邊） */
  @media (max-width: 639px) { .cat-row { padding: 0 12px; } }
  /* 四顆（加了 YouTube，使用者 2026-10-05）在 320 寬排不下：字縮一點、「每天通知」只留鈴鐺 */
  @media (max-width: 639px) { .cat-row { flex-wrap: wrap; row-gap: 8px; } .cat-row > #cat-bar { flex-basis: 100%; } .cat-follow { gap: 5px; } .cfb { padding: 0 7px; gap: 3px; font-size: 11.5px; } .cfb.push { width: 28px; padding: 0; } .cfb.push .lb { display: none; } .cat-follow .cf-label { display: none; } }
  /* 今天吵最兇的事件：電腦一排五格（每格上下排：名次＋名稱、代表標題、數字與長條），手機一列一個（左名次、中名稱、右數字） */
  .et-list { display: grid; gap: 1px; overflow: hidden; border-radius: 0 0 8px 8px; background: var(--border); }
  .et-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; height: 100%; padding: 10px 14px; background: var(--card); }
  .et-item:hover { background: var(--muted); }
  .et-pad { display: none; background: var(--card); }
  @media (min-width: 1024px) { .et-pad { display: block; } }
  .et-rank { font-size: 26px; font-weight: 800; line-height: 1; }
  .et-main { min-width: 0; }
  .et-name { display: block; overflow: hidden; font-size: 16px; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .et-head { display: -webkit-box; overflow: hidden; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .et-nums { display: grid; justify-items: end; gap: 3px; }
  .et-n .fig { font-size: 18px; font-weight: 800; }
  .et-unit { margin-left: 3px; color: var(--muted-foreground); font-size: 11px; }
  .et-bar { display: none; }
  .et-meta { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }
  @media (min-width: 1024px) {
    .et-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .et-item { grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 8px 8px; padding: 14px 16px 16px; }
    .et-rank { font-size: 34px; }
    .et-name { font-size: 18px; }
    .et-head { -webkit-line-clamp: 2; min-height: 2.9em; }
    .et-nums { grid-column: 1 / -1; justify-items: start; gap: 6px; }
    .et-n .fig { font-size: 24px; }
    .et-bar { display: block; overflow: hidden; width: 100%; height: 5px; border-radius: 999px; background: var(--muted); }
    .et-bar span { display: block; height: 100%; border-radius: 999px; }
  }
  /* 今天的影片：左邊 16:9 縮圖（按了換成播放器）、右邊說明與訂閱鈕；窄螢幕上下排 */
  .dv { display: grid; gap: 14px 20px; align-items: center; padding: 16px; }
  @media (min-width: 768px) { .dv { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); padding: 18px 20px; } }
  .dv-thumb, .dv-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 8px; background: #000; }
  .dv-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .dv-play { position: absolute; left: 50%; top: 50%; display: flex; width: 60px; height: 42px; margin: -21px 0 0 -30px; align-items: center; justify-content: center; border-radius: 10px; background: rgb(255 0 0 / .92); }
  .dv-thumb:hover .dv-play { background: #ff0000; }
  .dv-len { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgb(0 0 0 / .8); color: #fff; font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .fbtn.dv-ghost { background: var(--card); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }

  /* ---- 首頁〈OnceTopNews 影片〉（#own-videos，使用者 2026-10-09）---- */
  /*
   * **一種一排、可以左右滑**（第二版）。第一版是「大主角 ＋ 右邊小縮圖側欄」，
   * 使用者退回：「short 都太小了」——側欄縮圖只有 64px，而短片才是觀看數最高的。
   *
   * 滑動用**原生捲動 ＋ scroll-snap**，不是 JS 輪播：手機本來就會滑、沒有 JavaScript 也能滑，
   * 箭頭只是桌機的輔助。卡片寬度用 `clamp()` 讓它自己適應，不寫死幾張。
   */
  #own-videos { container-type: inline-size; }
  .ov-row { padding: 12px 0 14px; border-bottom: 1px solid var(--border); }
  .ov-row:last-of-type { border-bottom: 0; }
  .ov-rowhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
  .ov-rowhd h3 { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; font-weight: 800; }
  .ov-rowhd h3 .num { font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); }

  .ov-arrows { display: none; gap: 6px; }
  /* 有滑鼠才給箭頭：觸控裝置直接滑比較快，箭頭只會佔位 */
  @media (hover: hover) { .ov-arrows { display: flex; } }
  .ov-arrows button { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 999px; font-size: 15px; line-height: 1; color: var(--muted-foreground); }
  .ov-arrows button:hover { background: var(--muted); color: var(--foreground); }

  /* 一排卡：橫向捲動 ＋ 對齊。左右留 16px 內距，捲到底時最後一張不會貼邊 */
  /*
   * **`scroll-padding-inline` 一定要跟 `padding` 一樣**（使用者 2026-10-09：
   * 「捲軸怎麼一開始就有值了」「左邊沒有邊距」）。
   *
   * `scroll-snap-align: start` 對齊的是**捲動區的內距框**，不是內容框——沒有這一行的話
   * 瀏覽器一載入就把第一張卡對齊到內距內側，`scrollLeft` 直接變成 16（實測），
   * 畫面上就是第一張卡貼著邊、捲軸鈕一開始就不在最左邊。
   *
   * 捲軸**留著**：一度把它藏掉，結果桌機滑鼠只剩箭頭可按、而這一排總共只能捲 198px，
   * 按一下就到底又看不出狀態，使用者回報「不能滑了」。改成細捲軸 ＋ `padding-bottom`
   * 把它跟卡片文字隔開（原本的抱怨是「貼太近」，不是「不要捲軸」）。
   */
  .ov-rail { display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 0 16px 10px; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    overscroll-behavior-x: contain; }
  .ov-rail::-webkit-scrollbar { height: 8px; }
  .ov-rail::-webkit-scrollbar-track { background: transparent; }
  .ov-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
  .ov-rail:hover::-webkit-scrollbar-thumb { background: var(--muted-foreground); }
  .ov-rail > li { scroll-snap-align: start; }
  /* 橫式長片：一張 clamp(260,30cqw,360)px；直式短片窄一半多 */
  .ov-rail { grid-auto-columns: clamp(240px, 30cqw, 340px); }
  .ov-rail.is-port { grid-auto-columns: clamp(132px, 15cqw, 176px); }

  /* `/video` 整頁：同一套卡，只是換行的格子而不是一排。橫式一格最小 240px、直式 140px */
  .ov-grid { display: grid; gap: 18px 12px; padding: 14px 16px 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
  .ov-grid.is-port { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
  /* 同一節的第二個格子（直式一個、橫式一個）：接在上面那個下面，不要再補一次上內距 */
  .ov-grid + .ov-grid { padding-top: 0; }
  /* 直式在手機上**不能讓 auto-fill 自己算**：360 寬時一欄 328px、卡片高 583px，
     一支就佔滿整個畫面，15 支要捲十幾頁（第 216 輪 360 截圖撿到）→ 窄螢幕寫死欄數 */
  @media (max-width: 560px) { .ov-grid.is-port { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; } }
  @media (max-width: 380px) { .ov-grid.is-port { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ov-grid .ov-thumb { aspect-ratio: 16 / 9; }
  .ov-grid.is-port .ov-thumb { aspect-ratio: 9 / 16; }

  .ov-thumb { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #000; }
  .ov-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .ov-rail .ov-thumb { aspect-ratio: 16 / 9; }
  .ov-rail.is-port .ov-thumb { aspect-ratio: 9 / 16; }
  /* 按下去之後縮圖會被換成 `.dv-frame`（site-daily-video.js），它預設寫死 16:9 →
     直式那一排要把比例改回來，不然播放器會把卡片撐成橫的 */
  .ov-rail.is-port .dv-frame, .ov-grid.is-port .dv-frame { aspect-ratio: 9 / 16; }
  /* 播放鍵放左下角、不放正中間：我們的縮圖正中間就是標題，蓋在中間會把字擋掉（第 216 輪截圖撿到） */
  .ov-play { position: absolute; left: 6px; bottom: 6px; display: flex; width: 36px; height: 24px; align-items: center; justify-content: center; border-radius: 5px; background: rgb(255 0 0 / .92); }
  .ov-play svg { width: 20px; height: 20px; }
  .ov-thumb:hover .ov-play { background: #ff0000; }
  .ov-len { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgb(0 0 0 / .8); color: #fff; font-size: 11.5px; font-variant-numeric: tabular-nums; }

  /* 訂閱鈕：YouTube 紅，跟追蹤卡片的 .fbtn 同一個語彙但小一號 */
  .ov-sub { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 8px; background: #ff0000; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .ov-sub:hover { opacity: .9; }

  .ov-t { margin-top: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ov-m { margin-top: 2px; font-size: 11px; color: var(--muted-foreground); }
  .ov-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; }
  .fwrap { container-type: inline-size; }
  .follow { display: grid; gap: 14px 24px; align-items: center; padding: 18px 20px; }
  @container (min-width: 700px) { .follow { grid-template-columns: minmax(0, 1fr) auto; } }
  .fbtns { display: flex; flex-wrap: wrap; gap: 8px; }
  .fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 8px; color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
  .fbtn:hover { opacity: .9; }
  :root[data-mode="dark"] .fbtn.threads { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
  /* 第三顆：每天通知我今日排行（瀏覽器推播，沒登入也能開；中性深色，不搶 Facebook／Threads 的品牌色）。原型 home-v6 .fbtn.pushbtn */
  button.fbtn { border: 0; cursor: pointer; font-family: inherit; }
  .fbtn.pushbtn { background: #3f3f46; }
  :root[data-mode="dark"] .fbtn.pushbtn { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
  .fbtn.pushbtn svg { width: 17px; height: 17px; }
  .fbtn.pushbtn.on { background: var(--card); color: #15803d; box-shadow: inset 0 0 0 1px #86efac; }
  .fbtn.pushbtn.dis { background: var(--muted); color: var(--muted-foreground); cursor: default; box-shadow: inset 0 0 0 1px var(--border); }
  .fbtn.pushbtn.dis:hover { opacity: 1; }
  .fnote { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted-foreground); }
  @container (max-width: 520px) { .fbtns { display: grid; grid-template-columns: 1fr; } .fbtn { height: 44px; } }
  .emb { --e-bg: #fff; --e-fg: #15171c; --e-mut: #676c75; --e-line: #e6e8ec; --e-soft: #f4f5f7; --e-up: #d62839; --e-r1: #c8102e; --e-r2: #e4570f; --e-r3: #c98a00; --e-tile: #0d0e11; --e-news: #f0a500;
    background: var(--e-bg); color: var(--e-fg); border: 1px solid var(--e-line); border-radius: 10px; overflow: hidden; width: 100%; max-width: 640px; min-width: 0; text-align: left; }
  .emb.dark { --e-bg: #14171c; --e-fg: #eceef2; --e-mut: #969ca6; --e-line: #262b33; --e-soft: #1b1f26; --e-up: #ff4d5e; --e-r1: #ff3b4f; --e-r2: #ff7a3d; --e-r3: #f0b429; --e-tile: #2a2e36; --e-news: #ffc20e; }
  /* 嵌入頁（`pages/embed`）只載這一支 CSS，沒有 Tailwind 的 preflight：沒有這一行的話
     卡片裡的連結會變回瀏覽器預設的藍字加底線（首頁的彈窗裡看不出來，嵌入頁一看就破，
     第 132 輪截圖撿到）。全站規定也是「可以點的文字不加底線」。
     **這是我們加的，原型第 162～191 行那一段沒有**（原型整頁都有 preflight） */
  .emb a { color: inherit; text-decoration: none; }
  .e-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--e-line); height: 52px; }
  .e-brand { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .e-wm { font: 800 17px/1 "Barlow Condensed", sans-serif; white-space: nowrap; }
  .e-wm i { font-style: normal; font-weight: 600; font-size: .55em; color: var(--e-mut); margin-right: 3px; }
  .e-wm b { color: #e3233c; } .e-wm u { text-decoration: none; color: var(--e-news); margin-left: 2px; }
  .e-ttl { min-width: 0; text-align: right; }
  .e-ttl p { margin: 0; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .e-ttl small { display: block; font-size: 10.5px; color: var(--e-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .e-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 14px; height: 60px; border-bottom: 1px solid var(--e-line); }
  .e-rk { font: 700 18px "Barlow Condensed", sans-serif; color: var(--e-mut); text-align: center; }
  .e-t { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .e-m { font-size: 11px; color: var(--e-mut); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .e-v { text-align: right; font: 700 18px/1 "Barlow Condensed", sans-serif; white-space: nowrap; }
  .e-v small { display: block; font: 400 10px "Noto Sans TC", sans-serif; color: var(--e-mut); margin-top: 3px; }
  .e-ft { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 14px; height: 36px; font-size: 11.5px; color: var(--e-mut); background: var(--e-soft); }
  .e-ft a { color: var(--e-fg); font-weight: 700; white-space: nowrap; }
  .e-ev { padding: 12px 14px 0; }
  .e-ev h4 { margin: 0; font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
  .e-st { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
  .e-kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--e-line); border-top: 1px solid var(--e-line); border-bottom: 1px solid var(--e-line); margin: 10px 0 0; }
  .e-kp div { background: var(--e-bg); padding: 7px 12px; }
  .e-kp dt { font-size: 10.5px; color: var(--e-mut); } .e-kp dd { margin: 0; font: 700 21px/1.1 "Barlow Condensed", sans-serif; }
  .e-kp dd small { font: 400 10px "Noto Sans TC", sans-serif; color: var(--e-mut); }
  .e-mk { margin: 0; padding: 6px 14px 8px; list-style: none; }
  .e-mk li { display: grid; grid-template-columns: 76px 1fr; gap: 6px; font-size: 12px; padding: 3px 0; }
  .e-mk li span { color: var(--e-mut); font-family: "IBM Plex Mono", monospace; font-size: 11px; }
  /* 週報的 <h1> 也是襯線字（原型 renderWeekly 的 inline style：font-family:'Noto Serif TC',serif） */
  .wk-h1 { font-family: "Noto Serif TC", "Noto Sans TC", serif; text-wrap: balance; }
  .wk-prose { font-family: "Noto Serif TC", "Noto Sans TC", serif; font-size: 17px; line-height: 1.95; max-width: 72ch; }
  .wk-prose p { margin: 0 0 1.1em; }
  .wk-prose h2 { font-family: "Noto Sans TC", sans-serif; font-size: 19px; font-weight: 900; margin: 1.6em 0 .6em; }
  .wk-prose .data { font-family: "Noto Sans TC", sans-serif; font-size: 14px; line-height: 1.6; margin: 1.2em 0 1.5em; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  @media (max-width: 640px) { .wk-prose { font-size: 16px; line-height: 1.85; } }
  .acal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); }
  .acal > * { background: var(--card); min-width: 0; }
  .acal .wd { background: var(--muted); font-size: 11.5px; color: var(--muted-foreground); text-align: center; padding: 6px 0; }
  .acal .day { min-height: 118px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
  .acal a.day:hover { background: color-mix(in srgb, var(--muted) 55%, var(--card)); }
  .acal .out { background: color-mix(in srgb, var(--muted) 40%, var(--card)); }
  .acal .day.max { box-shadow: inset 0 0 0 2px var(--up); }
  .acal .ttl { font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  @media (max-width: 700px) { .acal .day { min-height: 62px; padding: 5px; } .acal .ttl, .acal .evtag, .acal .unit, .acal .badge { display: none; } }
  /* 刻意跟原型不一樣：原型 320 寬時 5 位數推文數被格子切掉；手機只露縮寫（1.1萬） */
  .acal .n-short { display: none; }
  @media (max-width: 700px) { .acal .n-full { display: none; } .acal .n-short { display: inline; font-size: 13px; } }
  @media (max-width: 420px) { .acal .day { padding: 4px 3px; } .acal .n-short { font-size: 11.5px; } }
  .hl-card { background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--muted) 45%, var(--card)) 100%); }
  .yt-grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  @media (max-width: 640px) { .yt-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } .yt-extra { display: none; } }
  .shelf-arrows { display: none; }
  @media (hover: hover) and (pointer: fine) { .shelf-arrows { display: inline-flex; } [data-drag-scroll] { cursor: grab; } }
  [data-drag-scroll].dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  [data-drag-scroll].dragging a, [data-drag-scroll].dragging button { pointer-events: none; }
  .yt-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .yt-2line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yt-3line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ev-st { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
  .ev-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .ev-st.boom { background: var(--up-soft); color: var(--up); }
  .ev-st.hot { background: color-mix(in srgb, var(--rank2) 14%, transparent); color: var(--rank2); }
  .ev-st.cool { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
  .ev-st.end { background: var(--muted); color: var(--muted-foreground); }
  .ev-chart text { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--muted-foreground); }
  /* 事件頁〈各家媒體怎麼報〉：先列 8 家，第 9 列以後靠 CSS 藏起來（`.ev-more` 按了加 `.open`）。
     原型那一行「看全部 N 家 ▾」是按不動的 `<p>`，我們做成按鈕，樣子照它（借 `.ot-more` 的版面） */
  .ev-media:not(.open) > tr:nth-child(n + 9) { display: none; }
  .ev-more { display: block; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--border); background: var(--card); font: 400 12px "Noto Sans TC", sans-serif; color: var(--muted-foreground); text-align: left; cursor: pointer; }
  .ev-more:hover { color: var(--foreground); }
  .og-box { position: relative; width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }
  .og { position: absolute; left: 0; top: 0; width: 1200px; height: 630px; transform-origin: 0 0; background: var(--card); color: var(--foreground); overflow: hidden; }
  .og .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .num { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
  .fig { font-family: "Barlow Condensed", "Noto Sans TC", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .chart text { fill: var(--muted-foreground); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; }
  .no-scrollbar { scrollbar-width: none; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .strip-fade { mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  button:not(:disabled), summary, label[for] { cursor: pointer; }
  [data-tip] { position: relative; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    z-index: 60; pointer-events: none; white-space: nowrap; padding: 4px 8px; border-radius: 6px;
    background: #15171c; color: #fff; font: 400 12px/1.4 "Noto Sans TC", system-ui, sans-serif; letter-spacing: 0;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
  }
  [data-tip-align="end"]:hover::after, [data-tip-align="end"]:focus-visible::after { left: auto; right: 0; transform: none; }
  @media (hover: none) { [data-tip]:hover::after { display: none; } }
  button:disabled { cursor: not-allowed; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--up); outline-offset: 2px; border-radius: 4px; }

  .ticker { overflow: hidden; outline: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 92%, transparent); }
  .ticker-nav { display: none; }
  .ticker:focus-visible { box-shadow: inset 0 0 0 2px var(--up); }
  .ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-50%); } }

  .skeleton { background: linear-gradient(90deg, var(--muted) 25%, var(--grid) 50%, var(--muted) 75%); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; border-radius: 4px; }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .fade-in { animation: fadein .35s ease-out; }
  @keyframes fadein { from { opacity: .35; } to { opacity: 1; } }

  /* 換分頁、換時距、換分類時要去抓一份片段回來，整塊的內容會被換掉（`site-*.js` 的 `load()`／`reload()`）。
     原型是 JS 現場重算、瞬間就換好，所以原型沒有這個狀態；我們要等一趟網路，照自動開發指令第十一節
     「原型沒畫到、但一定要有的狀態：載入中」補上。**舊內容留在畫面上只是變淡**，不換成骨架：
     骨架會讓整塊的高度瞬間縮掉、下面的頁面往上跳，比等 100 毫秒難看。
     這段時間裡面的按鈕與連結不能按（JS 自己的 `loading` 旗標是第一道，這是第二道）。 */
  .is-swapping { opacity: .5; transition: opacity .12s linear; cursor: progress; }
  .is-swapping button, .is-swapping a { pointer-events: none; }

  .ad-slot { background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--grid) 10px 11px); }

  dialog::backdrop { background: rgb(0 0 0 / 0.55); }

  @media (prefers-reduced-motion: reduce) {
    /* 讀者反應區（.rxm）與徽章慶祝（.bdc-bg）不套用：動作很小，關掉動畫的電腦也照樣播（10 文件的原則） */
    :is(*, *::before, *::after):not(.rxm, .rxm *, .bdc-bg, .bdc-bg *, .mbm, .mbm *, .rcm, .rcm *, .rc-lm, .rc-lm *, .rc-spark) { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    /* 關掉動畫的電腦：跑馬燈停住，改成可以用滑鼠滾輪或手指左右捲，但不顯示捲軸 */
    .ticker { overflow-x: auto; scrollbar-width: none; }
    .ticker::-webkit-scrollbar { display: none; }
    .ticker { cursor: grab; }
    .ticker.dragging { cursor: grabbing; user-select: none; }
    @media (hover: hover) and (min-width: 768px) { .ticker-nav { display: flex; } } /* 手機不要箭頭（2026-09-27 使用者）：用手指滑就好，箭頭會把標題擠掉 */
  }