/* 叮叮點歌 dingsong.ai 操作樣稿 v1・共用外框的樣式（2026-10-21）
   載入順序：assets/ds/tokens.css → assets/ds/bundle.css → 這支 → 各頁自己的 css。
   只用設計系統的 token：顏色 var(--…)、間距 var(--space-…)、圓角 var(--radius-…)；字級只用字級表裡有的值（後面註明是哪一級）。
   標「照抄 bundle.css」的區塊是設計系統原本的值（例如手機底部選單），只是多套用到別的寬度。 */

/* ---------- 捲動與焦點 ---------- */
/* 頁首黏在最上面：用鍵盤或錨點移過去的東西，不能被頁首（或手機底部五台）蓋住 */
html { scroll-padding-top: calc(var(--header-height) + var(--space-12)); }
@media (max-width: 760px) { html { scroll-padding-bottom: calc(var(--space-52) + var(--space-12) + env(safe-area-inset-bottom, 0px)); } }
main[tabindex="-1"]:focus { outline: none; }   /* 「跳到主要內容」的落點本身不是可以按的東西，不畫焦點框 */

/* ---------- 版心左右留白 ---------- */
/* E 第 2 輪評審 H3：768～1180 寬左右只留 16px（bundle.css 的 .wrap 寫死），平板、筆電看起來貼邊。留白隨寬度從 16px 加到 48px；
   最大寬跟著加，內容欄最寬仍是 1148px（＝原本 1180 減兩邊 16），大螢幕版面不變 */
:root { --wrap-pad: clamp(var(--space-16), 4vw, var(--space-48)); }
.wrap { max-width: calc(1148px + 2 * var(--wrap-pad)); padding-left: max(var(--wrap-pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--wrap-pad), env(safe-area-inset-right, 0px)); }

/* ---------- 頁首 ---------- */
.site-head[data-shell="head"]:empty { min-height: calc(var(--header-height) + 1px); }   /* 程式畫上去之前先佔好高度，畫面不跳 */
.logo { flex: none; }
.logo-svg { display: block; fill: var(--red); }   /* 日夜自己換紅（日間 #D60017、夜間 #E0182F 都在 token 裡） */

/* 語言鈕（新元件）：ToolButton 的樣子＋地球圖示＋現在的語言；按了往下打開一張深色小面板，三種語言各用自己的寫法 */
.lang { position: relative; }
.lang-btn { white-space: nowrap; }
@media (min-width: 760px) and (max-width: 899px) { .lang-btn > span[lang] { display: none; } }   /* 10-25 評審 H3：768～783 寬頁首右邊只剩 1～9px；這段寬度語言鈕只留地球圖示（讀屏照念「選擇語言」） */
@media (pointer: coarse) { .tool { min-height: var(--tap-min); } }   /* 觸控：頁首語言、日夜鈕補到 44px 高 */   /* 四語以後寫「繁體中文」，768px 頁首擠時會斷成「繁體／中文」（shell.js 也不在 .tool 裡插 <wbr>） */
.lang-btn .caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang-btn[aria-expanded="true"] { border-color: var(--ink); }
.lang-btn[aria-expanded="true"] .caret { transform: translateY(2px) rotate(225deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + var(--space-8)); z-index: 40; margin: 0; padding: var(--space-6); list-style: none; min-width: 10.5em; display: grid; gap: var(--space-4); background: var(--glass); color: var(--glass-ink); border-radius: var(--radius-14); box-shadow: inset 0 0 0 1.5px var(--glass-edge); }   /* glass-edge 內框：落在收音機的深色玻璃上也分得出邊（對 glass 日 3.16／夜 3.20:1、對 bg 日 4.46／夜 3.03:1） */
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--tap-min); padding: 0 var(--space-14); border-radius: var(--radius-pill); color: var(--glass-ink); text-decoration: none; font: 700 15px/1 var(--font-body); }   /* ui-label */
.lang-menu a[lang="en"] { font-family: "Source Sans 3", var(--font-body-en); }   /* 10-27 W6b：繁中簡中頁也切了「English」那幾個字的 Source Sans 3 */
.lang-menu a[lang="ja"] { font-family: var(--font-body-ja); }
.lang-menu a[lang="zh-Hans"] { font-family: var(--font-body-sc); }
/* 簡中頁（2026-10-24）：整頁換 Noto Sans SC（繁中字型沒有简体字，會借別的字型、粗細不一）；選單裡的「繁體中文」照用繁中字型 */
html[lang="zh-Hans"] { --font-body: var(--font-body-sc); --font-display: "Big Shoulders Display", var(--font-body-sc); --font-mono: "Space Mono", var(--font-body-sc); }   /* mono 裡夾的中文（「FM 114.8・背景音樂」）：10-25 評審量到簡中頁畫成宋體 */
/* 繁中字型沒有的字（10-26 第 4 輪評審 N7：出處總表〈春が来た〉的「来」、《…読本》的「読」、Bądarzewska 的 ą、Dvořák 的 ř、op. 101 č. 7 的 č）：
   先借網站已經放的簡中字型，再借拉丁擴充字型（tools/fonts.py 的 DS Sans Latin），不要掉到系統字型；只有頁面真的用到這些字才會下載 */
html:root { --font-body-sc: "Noto Sans SC", "DS Sans Latin", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body-tc: "Noto Sans TC", "Noto Sans SC", "DS Sans Latin", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }   /* 繁中這一組：繁中頁內文、英日文頁上的中文歌名共用 */
html:root:not([lang="zh-Hans"]):not([lang="en"]):not([lang="ja"]) { --font-body: var(--font-body-tc); }   /* 繁中頁；簡中頁的 --font-body 由上一條換成 --font-body-sc，英日文頁看下面兩條 */
/* 英日文頁（10-27 英日文接線；原本上一條也管到英日文頁、權重又比 bundle.css 的 html[lang="en"]／[lang="ja"] 高，英日文頁整頁用繁中字型排：
   日文漢字畫成繁中字形、英文的 ’ “ ” 畫成全形）。
   英文：內文用本站自己放的 Source Sans 3（主控決定 #47；字型檔由 tools/fonts.py 切，字族名 "Source Sans 3"），後面接設計系統 body-en 的系統字型。
   日文：內文 Noto Sans JP（設計系統 body-ja）；頻率數字、等寬字裡夾的假名（「FM 114.8・BGM」）也改借日文字型（tokens 的 display、mono 後備是繁中字型） */
html:root[lang="en"] { --font-body: "Source Sans 3", var(--font-body-en); }
html:root[lang="ja"] { --font-body: var(--font-body-ja); --font-display: "Big Shoulders Display", var(--font-body-ja); --font-mono: "Space Mono", var(--font-body-ja); }
/* 英日文頁上標成中文的歌名、原詞（lang="zh-Hant-TW"）指回繁中字型：日文頁不然會用日文字形畫中文。
   字型變數用一般權重（裡面的元件寫 var(--font-…) 就拿到繁中這一組）；font-family 本身用 :where() 不加權重，元件自己的字型（例如等寬字）照樣算數 */
html:root:is([lang="en"], [lang="ja"]) [lang^="zh-Hant"] { --font-body: var(--font-body-tc); --font-display: "Big Shoulders Display", var(--font-body-tc); --font-mono: "Space Mono", var(--font-body-tc); }
:where(html:is([lang="en"], [lang="ja"]) [lang^="zh-Hant"]) { font-family: var(--font-body); }
/* 英日文頁不用 text-wrap 的 pretty／balance（10-27 主控決定）：設計系統 bundle.css:19 的 p, li { text-wrap: pretty }（與各頁的 balance）在 Chrome 排版卡死整頁——
   日文出處總表 320、375 寬（W6a 實測：關掉 pretty 3 秒載完，不關 4 分鐘沒反應；關掉斷詞、keep-all 都沒用）、英文作曲頁 375、1024 寬（W6b 在有 Source Sans 3 的 dist 量到）。
   只改 text-wrap-style（pretty／balance → 一般換行），不用 text-wrap 簡寫：簡寫會連 text-wrap-mode 一起蓋掉，white-space: nowrap 的地方（.nw、按鈕）會變成可以換行。
   繁中、簡中照舊；日文最後一行不落單改由 shell.js 的片語規則處理 */
html:root:is([lang="en"], [lang="ja"]) * { text-wrap-style: auto !important; }
html[lang="zh-Hans"] .lang-menu a[lang="zh-Hant-TW"] { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.lang-menu a:hover { background: var(--glass-2); }
.lang-menu a[aria-current] .gl { color: var(--glass-red-ink); }
.lang-menu :focus-visible { outline-color: var(--glass-red-ink); }   /* 深色面板裡的焦點框（設計系統第 4 版規則） */

/* 日夜鈕：761～860px 寬時頁首放不下，只留月亮（字留給讀屏） */
@media (min-width: 761px) and (max-width: 860px) {
  .theme-btn .theme-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 觸控裝置不分寬度，工具鈕都至少 44px 高（設計系統只寫在 640px 以下） */
@media (pointer: coarse) { .tool { min-height: var(--tap-min); padding-inline: var(--space-14); } }
/* 平板寬（761～1099）就算回報有滑鼠，也可能是 iPad 接觸控板、二合一筆電：語言、日夜鈕補到 44px 高（10-26 小事修正；第 5、6 輪評審量到 32px）。
   只加高、不加寬（左右內距照舊），頁首 66px 放得下，刻度與兩顆鈕的距離不變；1100 以上是電腦，照設計系統 32px */
@media (min-width: 761px) and (max-width: 1099px) { .tool { min-height: var(--tap-min); } }

/* ---------- 手機底部五台 ---------- */
/* 設計系統：760px 以下頁首刻度藏起來、640px 以下才出現底部選單 → 641～760px 沒有任何選單。這裡把底部選單延伸到 760px。
   以下照抄 bundle.css 640px 區塊裡的 .tabbar 規則，數值不變 */
@media (min-width: 641px) and (max-width: 760px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--glass); padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 48px; padding: 4px 2px; color: var(--glass-dim); text-decoration: none; font-size: 13px; font-weight: 700; }
  .tabbar a .f { font: 500 10px/1 var(--font-mono); }
  .tabbar a[aria-current] { color: var(--glass-ink); box-shadow: inset 0 2px 0 var(--glass-red-line); }
}
/* 底部五台的字放大一級（10-25 網站主人照建議，待決清單第 3 條：長輩看得清楚；設計系統原本頻率 10px、台名 13px）。320 寬每格 64px，「背景音樂」4 字 56px 放得下 */
@media (max-width: 760px) { .tabbar a { font-size: 14px; } .tabbar a .f { font-size: 12px; } }
/* 「選中」的膠囊與選項：琥珀底對頁面底只有 2.33:1（第 3～5 輪評審），外框改用墨色，看得出選了哪一個；琥珀底照舊（網站主人 10-26「都照你建議處理」）。
   前面加 html 提高優先度：bgm.css 等各頁的同一條規則排在後面 */
html .chip[aria-pressed="true"], html .chip[aria-current="true"], html .opt[aria-pressed="true"] { border-color: var(--ink); }
/* 外部連結後面的 ↗（shell.js extLinks：文字頁本文、頁尾姊妹站） */
.ext { margin-left: var(--space-2); }   /* 一般行內字，不用 inline-block：整塊的行內元素前後都能換行，↗ 會單獨掉到行首、後面的「、」也跟著到行首（第 5 輪評審必修 4） */
/* 頁首五台的頻率、收音機刻度數字 11px → 12px（10-26 第 4 輪評審品味：設計系統裡最小的字，跟手機底部五台的頻率同一級） */
.band-nav a .f, .dial-scale .num { font-size: 12px; }
/* 320～339 寬：「FM 114.8」12px 要 57.6px、格子只剩 57px，斷成兩行、五格不齊（第 4 輪評審 N1）→ 不換行、字距收一點、格子左右內距拿掉，不動 12px */
@media (max-width: 340px) { .tabbar a { padding-inline: 0; } .tabbar a .f { white-space: nowrap; letter-spacing: -.04em; } }
/* 日文：「ものがたり」5 個假名 14px 要 70px，320 寬格子只有 62px、375 寬 68px，斷成「ものがた／り」（10-27 英日文接線實測）→
   台名一律不換行；400 寬以下小一級（caption 13px）、字距收一點（400 寬以上格子 ≥72px，14px 放得下） */
html[lang="ja"] .tabbar a > span:last-child { white-space: nowrap; }
@media (max-width: 400px) { html[lang="ja"] .tabbar a > span:last-child { font-size: 13px; letter-spacing: -.04em; } }

/* ---------- 頁尾三欄（新元件；照姊妹站共同規格：本站介紹與聯絡／姊妹站／本站） ---------- */
footer[data-shell="foot"] { padding-block: var(--space-48); }
/* 讓開底部五台：五台高 56px（48＋上下 4）＋安全區，再留 24px；頁面底部另有固定列（--page-bar-h）也一起讓開。
   原本寫死 120px（10-26 小事修正：手機頁尾太長，這裡省 32px） */
@media (max-width: 760px) { footer[data-shell="foot"] { padding-bottom: calc(var(--space-52) + var(--space-12) + var(--space-24) + var(--page-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); } }
footer[data-shell="foot"] .wrap { display: block; }
/* 三欄（901 以上）：第一欄至少放得下「聯絡：信箱＋複製」一整行（10-26 小事修正：1024 寬第一欄 276px，「複製」被擠到下一行）；
   用內容量出來的寬（min-content＋不換行），英文、日文的「Contact:」「お問い合わせ：」長短不同也跟著變 */
.foot-cols { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-28) var(--space-44); }
@media (min-width: 901px) { .foot-col p.foot-mail { flex-wrap: nowrap; white-space: nowrap; } }
/* 360 寬以下：「聯絡：信箱＋複製」一行要 291px、320 寬只有 288px，「複製」掉到下一行 → 兩個間隔 10 → 6px（10-26 追加修正；按鈕大小不動） */
@media (max-width: 360px) { .foot-col p.foot-mail { gap: var(--space-6); } }   /* 下面 .foot-mail 原本的規則排在後面，這裡加 .foot-col p 提高優先度 */
@media (max-width: 900px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); } }
/* 手機頁尾縮短（10-26 小事修正：320 寬 950px、375 寬 877px，比一屏還長）：姊妹站四個排成兩欄（站名＋原本的說明句都留著），
   一個站從一整行變半行；說明句、CC0 出處、CY Lab、信箱、更新日期一個字都沒拿掉 */
@media (max-width: 640px) {
  footer[data-shell="foot"] { padding-top: var(--space-28); }   /* 跟文字頁手機的上下留白同一級（doc.css .doc） */
  .foot-sis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-16); }
}
.foot-h { font: 700 15px/1.25 var(--font-body); color: var(--ink); margin: 0 0 var(--space-10); }   /* ui-label */
.foot-col p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.foot-col p + p { margin-top: var(--space-6); }
.foot-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); margin-top: var(--space-10); }
.foot-col p.foot-mail { margin-top: var(--space-10); }
.foot-mail .mail { color: var(--ink); overflow-wrap: anywhere; }   /* 信箱用內文字型，跟文字頁內文一致（10-25 第 2 輪評審：同一屏兩種字型；設計規格 mono 只給頻率與時間） */
.foot-sis, .foot-links { list-style: none; margin: 0; padding: 0; }
.foot-sis { display: grid; gap: var(--space-12); }
.foot-links a { font-weight: 700; color: var(--red-ink); text-underline-offset: 3px; }
/* 姊妹站：站名＋說明句整個是一個連結（shell.js，10-26 小事修正），樣子照舊：站名紅字粗體底線、說明句灰字不畫底線 */
.foot-sis a.sis { display: block; color: var(--ink-2); text-decoration: none; }
.foot-sis .sis-n { font-weight: 700; color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .foot-sis a.sis:hover .sis-n { text-decoration-thickness: 2px; } }
.foot-sis small { display: block; margin-top: var(--space-4); font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-18); margin-bottom: var(--space-10); font-size: 14px; }
/* 找不到網址的頁（404.html，施工 1） */
/* 滑過的樣子（10-25 介面規範審查 M4、M5：一般 .btn、錄音鈕、純文字連結停上去完全沒變化；設計系統只有 btn-main／btn-ghost 有）。只給有滑鼠的裝置 */
@media (hover: hover) {
  .btn:not(.btn-main):not(.btn-ghost):not(:disabled):hover { box-shadow: 0 0 0 3px var(--line-strong); }
  a:not([class]):hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
.nf { padding-block: var(--space-48); }
.nf h1 { margin: 0 0 var(--space-16); font-size: clamp(34px, 4.4vw, 52px); }   /* 10-25 評審：標題與引言原本 0px（文字頁是 16px） */
@media (max-width: 640px) { .nf h1 { font-size: 34px; } }   /* 手機各頁頁名統一 34px */
/* 10-26 第 4 輪評審（上輪就提）：404 做成「這個頻率沒有訊號」——一條靜止的刻度、指針停在兩台中間（不加動態）；
   五台一排（手機 3＋2，不會剩一顆單獨一行），「回首頁」是這一頁唯一的紅色主按鈕、單獨一行 */
.nf .nf-kick { margin: 0 0 var(--space-12); font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }
.nf-dial { position: relative; max-width: 40em; height: var(--space-44); margin: var(--space-28) 0 var(--space-24); border-bottom: 1px solid var(--line-strong);
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px var(--space-12)) bottom / 100% 40% no-repeat; }
.nf-needle { position: absolute; left: 58%; top: 0; bottom: 0; width: 2px; background: var(--red); }   /* FM 113.8：108～118 的 58%，落在 112.8 與 114.8 之間（10-28 頻率移到廣播頻帶外） */
/* 刻度標出五台（10-26 小事修正；第 5、6 輪評審品味）：頻率跟首頁收音機、頁首、底部五台同一組，位置照 108～118 換算（(頻率−108)÷10；10-28 頻率移到廣播頻帶外）；
   一根直線＋上面的頻率字，不動、不加動畫。第一台在 8%，置中的字不超出刻度（320 寬也是） */
.nf-mark { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.nf-mark::after { content: ""; flex: 1; width: 2px; margin-top: var(--space-4); background: var(--ink-2); }
.nf-mark:nth-child(1) { left: 8%; }   /* 108.8 */
.nf-mark:nth-child(2) { left: 28%; }   /* 110.8 */
.nf-mark:nth-child(3) { left: 48%; }   /* 112.8 */
.nf-mark:nth-child(4) { left: 68%; }   /* 114.8 */
.nf-mark:nth-child(5) { left: 88%; }   /* 116.8 */
.nf-st { list-style: none; max-width: 40em; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-12); }
.nf-st .btn { display: grid; justify-items: center; gap: var(--space-4); width: 100%; height: auto; min-height: var(--tap-min); padding: var(--space-10) var(--space-4); text-align: center; white-space: nowrap; }   /* 台名跟底部五台同一個短名（AI 作曲）；左右內距小，320 寬 3＋2 也放得下（10-26 第 5 輪評審 M1：原本字超出框、「AI 作曲工作室」斷兩行） */
.nf-st small { font: 500 12px/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 360px) { .nf-st .btn { font-size: 15px; } }
.nf-home { margin: var(--space-24) 0 0; }
@media (max-width: 700px) { .nf-st { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nf-st li { grid-column: span 2; } .nf-st li:nth-child(n+4) { grid-column: span 3; } }
/* 英日文 404（10-27 英日文接線實測）：台名照翻譯表是全名（Background Music 135px、音楽ものがたり 109px），比繁中的短名長，
   3 欄時（320 寬每格 88px）撐破按鈕、整頁 327～378px → 台名可以換行；420 寬以下改兩欄、最後一顆佔一整列（不會剩一顆單獨縮在一格） */
html:is([lang="en"], [lang="ja"]) .nf-st .btn { white-space: normal; }
@media (max-width: 420px) {
  html:is([lang="en"], [lang="ja"]) .nf-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:is([lang="en"], [lang="ja"]) .nf-st li, html:is([lang="en"], [lang="ja"]) .nf-st li:nth-child(n+4) { grid-column: auto; }
  html:is([lang="en"], [lang="ja"]) .nf-st li:last-child { grid-column: 1 / -1; }
}
.foot-mock {margin-top: var(--space-28); padding-top: var(--space-14); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); }   /* caption */
@media (pointer: coarse) {
  .foot-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
  .foot-sis a.sis { min-height: var(--tap-min); }   /* 站名＋說明句一起算，本來就超過 44px */
  .copy { min-height: var(--tap-min); padding-inline: var(--space-16); }
}

/* ---------- 首頁右側姊妹站小標籤：不放（10-25 網站主人照建議「只放頁尾」，待決清單第 1 條；頁首已經很擠，姊妹站不是讀者來這裡要找的，頁尾三欄就有） ---------- */
.sistabs { display: none; }
/* ---------- 提示列：兩種語言各一行（點 English 時：中文一行＋英文一行） ---------- */
#toast .toast-msg { display: grid; gap: var(--space-4); padding-block: var(--space-4); }
@media print { .sistabs, .tabbar, #toast { display: none !important; } }

/* ---------- 10-22 主控：各頁共用的補充 ---------- */
/* 頁面底部多一條固定列（播放器、步驟列、三顆鈕）時，頁面在 :root 設 --page-bar-h，提示列與捲動留白一起讓開；底部太忙的頁可設 data-toast="top" 讓提示列放上面 */
#toast { bottom: calc(86px + var(--page-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
:root[data-toast="top"] #toast { top: calc(var(--header-height) + var(--space-12)); bottom: auto; }
@media (max-width: 760px) { html { scroll-padding-bottom: calc(var(--space-52) + var(--space-12) + var(--page-bar-h, 0px) + env(safe-area-inset-bottom, 0px)); } }
/* 兒童模式（頁面在 :root 設 data-kids）：頁首與底部五台不出現 AI 作曲工作室（規劃書 v2 §2.2 兒童模組紅線） */
:root[data-kids] .band-nav a[href*="make/"], :root[data-kids] .tabbar a[href*="make/"] { display: none; }
:root[data-kids] .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root[data-kids] .band-nav .f, :root[data-kids] .tabbar .f { display: none; }   /* 兒童模式不顯示 FM 頻率數字（小朋友讀者測試：看不懂），只留站名 */
/* 膠囊連結鈕：設計系統 .set-more 的樣子，但不分寬度都顯示（.set-more 在 641px 以上是隱藏的）；「文字＋箭頭」的連結一律用它 */
:where(.pill-link) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); min-height: var(--tap-min); padding: 0 var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
@media (hover: hover) { :where(.pill-link):hover { border-color: var(--ink); } }
:where(.pill-link) .gl { width: 16px; height: 16px; }
/* 樣稿註記（正式網站不會有）：各頁自己的樣式照樣優先 */
:where(.mock-notes) { margin-top: var(--space-48); padding-block: var(--space-12); border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: 14px; line-height: 1.7; }
:where(.mock-notes) > summary { display: flex; align-items: center; min-height: var(--tap-min); color: var(--ink); font-weight: 700; cursor: pointer; }
@media print { :where(.mock-notes) { display: none; } }