/* 叮叮點歌 dingsong.ai 操作樣稿 v1・背景音樂頁（BGM 音樂庫，FM 114.8）2026-10-21
   載入順序：ds/tokens.css → ds/bundle.css → shell.css → 這支。只用設計系統的 token：顏色 var(--…)、間距 var(--space-…)、圓角 var(--radius-…)；
   字級只用字級表的值（後面註明級別）。借用的元件：Chip、Segmented（.seg）、Button、RequestSlip（.slip .flow）、Toast、SectionHead 的小標寫法。
   新元件（之後補進設計系統）：用途格（.tiles）、用途清單（.uses）、段落標籤列（.l3）、篩選欄（.flt）、曲子列（.trk）、下載單（.dl）、補曲中（.bgm-fill）、
   當季（.now-row）、小播放器（.bgm-player）、能量直條（.nrg）、樣稿註記（.mock-notes）。 */

/* 程式會改的三個量（播放器高度、手機底部五台高度、iPhone 底部安全區）：預設 0 */
html { --pl-h: 0px; --tabbar-h: 0px; --pl-safe: 0px; }

/* ---------- 圖示（bgm-icons.js：24 格、線寬不隨大小變） ---------- */
.bi { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bi * { vector-effect: non-scaling-stroke; }
.bi .fill { fill: currentColor; stroke: none; }
.bi-g { width: 36px; height: 36px; }
.bi-u { width: 26px; height: 26px; }
.bi-i { width: 22px; height: 22px; stroke-width: 1.6; }
.bi-fallback { color: var(--ink-2); }                     /* 還沒專屬圖的用途：先放那一組的圖，淡一點 */
.nrg { width: 14px; height: 12px; flex: none; vertical-align: -1px; }
.nrg rect { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.nrg .on { fill: currentColor; }

/* ---------- 頻道頭 ---------- */
/* 第 3 輪 R3-B1：頻道頭上下收一點，曲子才進得了第一個畫面 */
.bgm-head .wrap { padding-block: var(--space-22) var(--space-10); }
.bgm-home, .bgm-dhead { display: grid; gap: var(--space-10); }
.bgm-dhead:empty { display: none; }
html.bgm-deep .bgm-home { display: none; }   /* 點進某一類以後：首頁那一組（大標「BGM 音樂庫」、第一句、免費說明）收起來，換成那一類自己的頁名（第 3 輪 R3-B2） */
/* 那一類自己的頁名：上方小字是麵包屑（FM 114.8・BGM 音樂庫 › 學校與教學，每段都能點），下面 h1＝這一類 */
.bgm-crumb { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-8); font: 800 15px/1.4 var(--font-display); letter-spacing: .08em; color: var(--red-ink); }
.bgm-crumb a { color: var(--red-ink); text-decoration: none; padding-block: var(--space-12); }   /* 行內元素的上下內距：點擊範圍約 44px 高、不撐高這一行 */
.bgm-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bgm-crumb .sep { color: var(--ink-2); }
.bgm-dhead .vhead h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }   /* page-title：一頁一個 h1 */
.bgm-dhead .vhead h1:focus { outline: none; }
.bgm-dhead .vsub { margin-top: 0; }
.bgm-head .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* kicker：跟這一台的名字一致（FM 114.8・背景音樂） */
.bgm-head h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }   /* page-title */
.bgm-head .lead { font-size: 18px; line-height: 1.7; color: var(--ink); max-width: 34em; }   /* lead-text：第一句就講這頁能做什麼 */
.bgm-promise { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 46em; }   /* body-small */
html.bgm-deep .bgm-try { display: none; }   /* 點進某一類以後（分享來的連結也一樣）：「試試」收掉 */
.bgm-promise a { font-weight: 700; text-underline-offset: 3px; }
.bgm-promise b { color: var(--ink); font-weight: 700; }   /* 讀者最先想知道的：要不要錢、要不要註冊（讀者測試 10-22） */

/* ---------- 每首一頁的開頭（/bgm/<代號>/，設計評審 10-25 必修 1～3）：曲名當大標，播放與下載整首在第一個畫面；不加框、不加底色 ---------- */
.bgm-pin .wrap { display: grid; gap: var(--space-10); padding-block: var(--space-22) var(--space-24); }
/* 手機：補曲後有幾首的「用在…」變成三行，320×568 的紅色「下載整首 MP3」被擠到底部五台下面 2px（stw-5、stw-13、gam-26）→ 上緣與間距收一點 */
@media (max-width: 640px) { .bgm-pin .wrap { gap: var(--space-8); padding-top: var(--space-14); } }
.bgm-pin .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }
.bgm-pin .crumb { margin-bottom: 0; }
/* 第 4 輪品味 4：頂端一行麵包屑（跟大類頁同一個樣子）；品味 1：1024 以上兩欄，右邊是整首波形 */
.pin-top, .pin-l { display: grid; gap: var(--space-10); }
@media (max-width: 640px) { .pin-top, .pin-l { gap: var(--space-8); } }
.pin-crumb { margin-block: calc(-1 * var(--space-10)) calc(-1 * var(--space-6)); }   /* 麵包屑的連結上下各有 12px 點擊範圍：不撐開跟曲名的距離 */
.pin-sub a { color: inherit; text-underline-offset: 3px; }
.pin-wave { display: none; }
@media (min-width: 1024px) {
  .pin-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--space-44); align-items: center; }
  .pin-wave:not([hidden]) { display: grid; gap: var(--space-8); }
}
/* 第 5 輪品味 4：1 分鐘以上的曲子，手機與平板也放一條 44px 高的細波形，排在「播放／下載」那一列下面（左欄拆開排：display: contents＋order） */
@media (max-width: 1023px) {
  .pin-l { display: contents; }
  .pin-l > .pin-more { order: 2; }
  .pin-wave.pw-long:not([hidden]) { display: grid; gap: var(--space-4); order: 1; }
  .pin-wave .pw-lane { height: 44px; }
  .pin-wave .pw-help { display: none; }   /* 手機上一行說明太佔位置；讀屏的名稱裡已經說了「點波形從那裡播」 */
}
.pw-lane { position: relative; height: 120px; cursor: pointer; touch-action: manipulation; border-radius: var(--radius-6); }
.pw-svg { display: block; width: 100%; height: 100%; }
.pw-all, .pw-in { fill: none; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pw-all { stroke: var(--line-strong); }
.pw-in { stroke: var(--ink); }   /* 播過的那一段：墨色加深（第 5 輪品味 3：原本整段實心紅，同一畫面已有紅色下載鈕與底部播放鍵）；紅色只留給播放線 */
.pw-head { position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: 2px; transform: translateX(-50%); background: var(--red-ink); opacity: 0; pointer-events: none; }
.pw-lane.on .pw-head { opacity: 1; }
.pw-lane:hover .pw-all { stroke: var(--ink-2); }
.pw-ruler { position: relative; height: 18px; font: 400 12px/1 var(--font-mono); color: var(--ink-2); }   /* mono-label：時間刻度 */
.pw-ruler span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pw-ruler span:first-child { transform: none; }
.pw-ruler .pw-end { right: 0; transform: none; }
.pw-help { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.bgm-pin h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }   /* page-title */
.bgm-pin h1:focus { outline: none; }
.pin-info { font-size: 18px; line-height: 1.6; color: var(--ink); }   /* lead-text：長度・速度・氣氛・能量 */
.pin-sub { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 46em; }   /* body-small：主奏、拍子、結尾；用在哪裡 */
.pin-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); margin-top: var(--space-4); }
.pin-acts .p-play { min-height: 48px; padding: 0 var(--space-18); font-size: 16px; }
.pin-acts .p-play .gl { width: 18px; height: 18px; }
.pin-acts .btn-main { min-height: 48px; }
.pin-more { display: grid; justify-items: start; }
.pin-more > .trk-dl, .pin-more > .dl { grid-area: auto; }   /* 曲子列裡的 grid-area（dl、panel）在這裡沒有對應的格子，不拿掉會疊在一起 */
.pin-more .dl { justify-self: stretch; }
.pin-more .trk-dl { white-space: normal; text-align: left; line-height: 1.3; padding-block: var(--space-8); }
.pin-sim-h, .pin-lib h2 { margin-top: var(--space-18); font-size: 22px; line-height: 1.3; }   /* item-title */
.pin-lib p, .pin-sim-p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }   /* body-small */
.pin-lib { display: grid; gap: var(--space-8); }
.pin-lib-go { margin-top: var(--space-4); }
/* 第 2 輪（網站主人同意每首一頁精簡）：在這一首的網址上，頁面只留這一首自己的內容；音樂庫的區塊收起來（按「回到音樂庫」不重新載入就回來） */
html.bgm-pinview main > :not(.bgm-pin) { display: none; }
html.bgm-trackpage main > :not(.bgm-pin):not(.bgm-head) { display: none; }   /* 每首一頁（build.mjs 3c 加的）：程式跑起來前只留音樂庫的頭（h1 已是曲名），不先閃出整套音樂庫；不跑程式的讀者也還看得到曲名 */
.bgm-pin .trk-list { margin-top: 0; }

/* ---------- 搜尋 ---------- */
.bgm-search-wrap { display: grid; gap: var(--space-10); padding-bottom: var(--space-16); }
.bgm-search { display: flex; gap: var(--space-8); max-width: 760px; }
.q-field { position: relative; flex: 1 1 auto; min-width: 0; }
.q-field input { width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-12) 0 var(--space-44); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font: 400 17px/1.3 var(--font-body); -webkit-appearance: none; appearance: none; }   /* 17px：iPhone 不會自動放大 */
.q-field input::placeholder { color: var(--ink-2); opacity: 1; }
.q-field input:hover { border-color: var(--ink); }
.q-field .q-ico { position: absolute; left: var(--space-16); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.bgm-search .btn { min-height: 48px; }
.bgm-try { display: flex; align-items: center; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: var(--space-4); }
.bgm-try::-webkit-scrollbar { display: none; }
.bgm-try > span { flex: none; font-size: 14px; color: var(--ink-2); }   /* fine-print */
.bgm-try .chip { flex: none; min-height: 40px; padding-inline: var(--space-14); font-size: 14px; }
@media (pointer: coarse) { .bgm-try .chip { min-height: var(--tap-min); } }
@media (max-width: 640px) {   /* 手機：頻道頭、搜尋收緊一點，第一屏看得到兩排用途格 */
  .bgm-head h1, .bgm-pin h1, .bgm-dhead .vhead h1 { font-size: 34px; }   /* 各頁頁名在手機統一 34px（設計評審 10-25：各頁 32／34／40／52px 不一） */
  .bgm-head .wrap { padding-block: var(--space-18) var(--space-6); }
  .bgm-home, .bgm-dhead { gap: var(--space-8); }
  .bgm-head .lead { font-size: 17px; }
  .bgm-promise { font-size: 15px; line-height: 1.6; }
  .bgm-search-wrap { gap: var(--space-4); padding-bottom: var(--space-8); }
  .bgm-try { padding-block: 0; }
}
.q-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); padding: var(--space-10) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; }
.q-banner b { font-weight: 700; }
.q-banner .chip { cursor: default; }
.q-banner .q-x { cursor: pointer; }
.q-song { flex-basis: 100%; font-size: 16px; line-height: 1.6; color: var(--ink); }   /* 搜的是有名的那首歌、這裡沒有：直接講（讀者測試 10-24） */

/* ---------- 區段 ---------- */
.bgm-sec { padding-block: var(--space-22); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .bgm-sec { padding-block: var(--space-22); } #bgm-nav .sec-head { margin-bottom: var(--space-6); } #bgm-nav { padding-top: var(--space-14); } }
.bgm-sec > .sec-head { margin-bottom: var(--space-18); }
.sec-head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }   /* section-title（手機 26） */
.sec-head .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }

/* ---------- 第一層：用途格（新元件）——圖示在左、名字＋例子在右，不加底框 ----------
   第 3 輪 R3-B1：原本一格 116px 高（圖示在上、字在下），兩排就占掉半個畫面，曲子被推到第 2～3 個畫面 → 緊湊格：電腦 6 欄 2 排、平板 4 欄、手機 2 欄
   R3-B6：例子原本用「・」接、在「・」後面換行，行尾留一個孤單的「・」→ 每個詞各自一塊、用間距分開；手機只留第一個詞 */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-8); }
.tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic b" "ic s"; column-gap: var(--space-10); row-gap: var(--space-2); align-items: center; align-content: center; height: 100%; min-height: 64px; padding: var(--space-8) var(--space-6); border-radius: var(--radius-14); color: var(--ink); text-align: left; text-decoration: none; }
.tile:hover { background: var(--panel); }
.tile:hover b { text-decoration: underline; text-underline-offset: 4px; }
.tile b { grid-area: b; align-self: end; font-size: 16px; line-height: 1.3; font-weight: 700; word-break: keep-all; }   /* body-small，加粗 */
/* body-small 15px、主文字色（讀者測試 10-24：小安靠這行小字才找到「生日」，13px 淡灰太小太淡） */
.tile small { grid-area: s; align-self: start; display: flex; flex-wrap: wrap; column-gap: var(--space-8); font-size: 15px; line-height: 1.35; color: var(--ink); }
.tile small .w { white-space: nowrap; }
.tile small .gl { width: 15px; height: 15px; margin-inline-start: var(--space-4); vertical-align: -0.125em; }
/* 格子的圖示 40px（設計評審 10-24：36px 跟字比起來太輕；設計系統樂器圖示 .ic 是 42px，同一個份量） */
.tile .bi-g { grid-area: ic; width: 40px; height: 40px; margin: 0; }
.tile .cnt-fill { grid-column: 2; justify-self: start; margin-top: var(--space-2); }
@media (min-width: 1024px) { .tiles > li:nth-child(n+7) { border-top: 1px solid var(--line); } }   /* 電腦 6 欄：前 6 格與後 6 格之間一條細線 */
@media (max-width: 1023px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 1024 寬一格只剩約 96px：圖示 34px、名字 15px，「鈴聲與提示音」才放得進一行 */
@media (min-width: 1024px) and (max-width: 1279px) { .tile { grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--space-8); } .tile .bi-g { width: 34px; height: 34px; } .tile b { font-size: 15px; } }
@media (min-width: 641px) { #bgm-nav .sec-head { margin-bottom: var(--space-10); } }
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .tile { min-height: 48px; padding: var(--space-4); column-gap: var(--space-8); }
  .tile b { font-size: 15px; }
  .tile small { line-height: 1.3; }
}
/* 例子只放前兩個詞，一行放得下（三個詞在手機與 1024～1280 寬會擠成兩行，曲子就被推出第一個畫面；兩個詞在 320 寬最長約 83px，格子裡放得下約 93px）。
   手機原本想只留一個詞，但只剩兩個字的一行讀起來像孤字（bgm-lines 量到 24 處），兩個詞剛好一行 */
.tile small .w ~ .w ~ .w, .tile small .w ~ .w ~ .sr { display: none; }
/* 第 4 輪 R4-B10：320 寬「長輩與社區」例子換行、「鈴聲與提示音」名字斷兩行，同一列兩格不等高 → 340px 以下圖示縮成 32px（字級不動），名字與例子都一行放得下 */
@media (max-width: 340px) {
  .tile { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-6); }
  .tile .bi-g { width: 32px; height: 32px; }
  .tile b { white-space: nowrap; }
  .tile small { flex-wrap: nowrap; column-gap: var(--space-6); }
}
/* 英日文（10-27 接線）：大類名字與例子比中文長（Workplaces & organizations、入場・ウォームアップ），上面「一行放得下」的設定會撐出格子、整頁橫捲（390 寬量到 624px）→
   英日文頁照空白（英文，太長的字加連字號）或文節（日文）換行；例子的詞也可以在詞內換行 */
html:is([lang="en"], [lang="ja"]) .tile b, html:is([lang="en"], [lang="ja"]) .tile small .w { white-space: normal; overflow-wrap: break-word; }
html[lang="en"] .tile b, html[lang="en"] .tile small .w { hyphens: auto; }
@media (max-width: 340px) { html:is([lang="en"], [lang="ja"]) .tile small { flex-wrap: wrap; } }
/* 英日文：按鈕字比中文長（「Print this explanation (to attach to …)」「Want background music of your own? …」），設計系統的 .btn 不換行，手機上撐出畫面 → 背景音樂頁裡的按鈕可以換行 */
html:is([lang="en"], [lang="ja"]) #main .btn { white-space: normal; line-height: 1.3; text-align: start; max-width: 100%; }
/* 英文：節目表左欄的段落名（Entrance (processional)、Award presentations）在 320 寬放不下一個字 → 長字加連字號換行 */
html[lang="en"] .prog .flow > li > .step { hyphens: auto; overflow-wrap: break-word; min-width: 0; }

/* ---------- 「文字＋箭頭」的連結＝膠囊鈕（照設計系統 .set-more 的樣子：line-strong 外框、15px 粗體、44px 高；主控 10-21 全站一致） ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--space-8); 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 var(--font-body); text-decoration: none; cursor: pointer; }
.pill:hover { border-color: var(--ink); }
.pill .gl { width: 16px; height: 16px; }

/* ---------- 麵包屑、組頁與用途頁的頭 ---------- */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-bottom: var(--space-14); font-size: 15px; color: var(--ink-2); }
.crumb [aria-current] { color: var(--ink); font-weight: 700; }
.vhead { display: flex; align-items: center; gap: var(--space-12); }
.vhead h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }   /* section-title */
.vhead h2:focus { outline: none; }
.vsub { margin-top: var(--space-8); font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 46em; }   /* body-small */
.bridge-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
/* 第 4 輪 R4-B3：「鈴聲與提示音」大類頁的三條路；手機上跟用途膠囊一樣排成一排橫捲（不把清單往下推三行） */
@media (max-width: 640px) {
  .uses-chips + .bridge-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-top: var(--space-6); padding: var(--space-2) var(--space-4) var(--space-4); }
  .uses-chips + .bridge-row::-webkit-scrollbar { display: none; }
  .uses-chips + .bridge-row .pill { flex: none; }
}
/* 第 4 輪 R4-B4：還沒有專用曲的節慶，收成清單下面一行小字（每個都能點） */
.sea-empty { margin-top: var(--space-18); font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.sea-empty a { color: var(--ink); }
@media (pointer: coarse) { .sea-empty a { display: inline-block; min-height: var(--tap-min); line-height: var(--tap-min); } }
.sea-one + .sea-empty { margin-top: var(--space-6); }
@media (max-width: 640px) { .sea-one { display: none; } }   /* 小事修正 10-26：手機的節日膠囊列已經有這幾個（標「1」），不重複 */

/* 第二層：用途清單（新元件）——每列 小圖＋名稱＋「用在…」＋曲數或補曲中 */
.uses { list-style: none; margin: var(--space-18) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-28); }
.uses > li { border-top: 1px solid var(--line); }
.use-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-12); min-height: 56px; padding: var(--space-8) var(--space-4); border-radius: var(--radius-6); color: var(--ink); text-decoration: none; }
.use-row:hover { background: var(--panel); }
.use-row:hover b { text-decoration: underline; text-underline-offset: 4px; }
.use-row b { display: block; font-size: 17px; line-height: 1.35; font-weight: 700; }   /* body，加粗 */
.use-row small { display: block; margin-top: var(--space-4); font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.use-row .go { display: inline-flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.use-row .go .gl { width: 16px; height: 16px; color: var(--ink-2); }
.uses-region { margin-top: var(--space-22); font: 700 15px/1.25 var(--font-body); color: var(--ink-2); grid-column: 1 / -1; }   /* ui-label：節慶依地區分段 */
.uses-region + li, .uses > li.first { border-top-color: var(--line); }
@media (max-width: 760px) { .uses { grid-template-columns: minmax(0, 1fr); } }
.uses-first { margin-top: 0; }
/* 電腦：用途三欄、「用在…」一行（放不下的用…；點進用途頁看得到整句）——8 個用途從 4 排變 3 排，第一個畫面看得到曲子（第 3 輪 R3-B1） */
@media (min-width: 1024px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } .use-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .use-row small wbr { display: none; } }   /* 外框以詞換行插的 <wbr> 在 nowrap 裡照樣會換行，這裡關掉 */   /* 頁名移到頻道頭以後，用途清單就是這一段的第一樣東西 */
/* 用途在手機是一排橫捲的膠囊（第 3 輪 R3-B1：8 列用途在手機占一整個畫面）；電腦、平板照舊兩欄清單 */
.uses-chips { display: none; }
/* 第 5 輪 R5-B8：節日頁（?g=season&s=…）電腦也只放一排膠囊（手機那一排的樣子），12 張節日卡片不再把第一首推出第一個畫面 */
.uses-chips.sea-chips-all { display: flex; gap: var(--space-8); padding: var(--space-4) var(--space-4) var(--space-6); }
@media (min-width: 641px) { .uses-chips.sea-chips-all { flex-wrap: wrap; } }   /* 手機照舊一排橫捲（下面 640 以下那一段） */
.uses-chips.sea-chips-all .chip { text-decoration: none; font-size: 14px; min-height: var(--tap-min); padding-inline: var(--space-14); }
@media (max-width: 640px) {
  #bgm-nav .uses:not(:has(.uses-region)) { display: none; }
  .uses-chips { display: flex; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: var(--space-4) var(--space-4) var(--space-6); }
  .uses-chips::-webkit-scrollbar { display: none; }
  .uses-chips .chip { flex: none; text-decoration: none; font-size: 14px; min-height: var(--tap-min); padding-inline: var(--space-14); }
  html.bgm-deep #bgm-nav { padding-block: var(--space-10); }
}

/* 曲數與補曲中 */
.cnt { font-size: 15px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }   /* ui-label */
/* caption：「還在做」。實線框（讀者測試 10-24：虛線框看起來按不下去，可是整列都按得下去） */
.cnt-fill { display: inline-block; padding: var(--space-4) var(--space-10); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; line-height: 1.2; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cnt-quiet { color: var(--ink-2); font-weight: 400; }

/* 這類音樂通常要什麼（研究 15 的典型需求） */
.need-box { margin-top: var(--space-14); border-top: 1px solid var(--line); }
.need-box > summary { display: flex; align-items: center; gap: var(--space-8); min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; }
.need-box > summary::-webkit-details-marker { display: none; }
.need-box > summary .gl { width: 16px; height: 16px; transition: transform .15s; }
.need-box[open] > summary .gl { transform: rotate(180deg); }
.need { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-6) var(--space-16); margin: 0 0 var(--space-12); font-size: 16px; line-height: 1.6; }   /* body-small */
.need dt { color: var(--ink-2); }
.need dd { margin: 0; color: var(--ink); }
/* 以詞換行：外框在詞與詞之間插 <wbr>，設計系統只替 h1～h3、p、li 開 keep-all；這頁的說明字也在 span、b、dt、dd、small、summary、h4 裡（不然「循環」會斷成「循／環」）。一個詞太長還是會斷，不會撐破 */
:where(#main) :is(span, b, dt, dd, label, small, summary, h4) { word-break: keep-all; overflow-wrap: break-word; }

/* 第三層：段落／情境標籤列（新元件）——結果上方一排橫捲 */
.l3-wrap { margin-top: var(--space-14); }
.l3-cap { font-size: 14px; color: var(--ink-2); margin-bottom: var(--space-6); }   /* fine-print */
.l3 { display: flex; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--space-4) var(--space-4) var(--space-10); scrollbar-width: thin; }
.l3 .chip { flex: none; text-decoration: none; font-size: 14px; min-height: 40px; padding-inline: var(--space-14); }
.chip .n { font: 400 13px/1 var(--font-mono); color: var(--ink-2); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.chip[aria-current="true"] .n, .chip[aria-pressed="true"] .n { color: var(--on-amber); }
/* 0 首的段落標籤照樣按得下去（點了看相近的曲子），所以不用虛線框，只把字放淡 */
.chip.zero { color: var(--ink-2); }
/* 橫捲的一排還有沒露出來的：右緣淡出（遮罩只看透明度，var(--ink) 只是「不透明」的意思）；捲到底就不淡出 */
.hs.more-r { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 56px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 56px), transparent); }
.l3-more { margin-inline-start: var(--space-8); color: var(--ink); font-weight: 700; }
.l3-more::after { content: " →"; }
.chip.zero[aria-current="true"] { color: var(--on-amber); }

/* ---------- 當季（新元件） ---------- */
.now-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-18); }
.now-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--space-10); row-gap: var(--space-4); align-items: start; height: 100%; padding: var(--space-12) var(--space-4); border-top: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.now-card:hover b { text-decoration: underline; text-underline-offset: 4px; }
.now-card .bi-u { grid-row: span 3; }
.now-card b { font-size: 17px; line-height: 1.35; font-weight: 700; }   /* body，加粗 */
.now-card .when { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.now-card .cnt, .now-card .cnt-fill { justify-self: start; }
.now-card .cnt-in { color: var(--ink); font-weight: 700; }   /* 曲數接在日期後面 */
@media (max-width: 760px) { .now-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 當季加起來不到 3 首：不佔一整區，只留一行連結（設計評審 10-25 品味 7） */
#bgm-now.now-compact { padding-block: var(--space-14); }
.now-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-12); font-size: 16px; line-height: 1.6; }
.now-line-h { font-weight: 700; color: var(--ink); }
.now-link { color: var(--ink); text-underline-offset: 4px; }
.now-link .when { color: var(--ink-2); }
.now-link .cnt-in { color: var(--ink); font-weight: 700; }
@media (pointer: coarse) { .now-link { display: inline-flex; flex-wrap: wrap; align-items: center; min-height: var(--tap-min); } }

/* ---------- 節目表（RequestSlip＋Segmented；新加：每段一顆播放、一顆下載） ---------- */
.prog .seg { margin-bottom: var(--space-18); }
.prog .seg button[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }   /* 第 3 輪 R3-B3：同一頁的「選中」只有一種樣子（琥珀），跟篩選、段落標籤一樣 */
.prog .slip { max-width: 860px; }
.prog .slip h3 { font-size: 22px; line-height: 1.3; }   /* item-title */
.prog .flow { margin-top: var(--space-12); }
.prog .flow > li { grid-template-columns: 8.5em minmax(0, 1fr) auto auto auto; grid-template-areas: "step t len play dl" "panel panel panel panel panel"; align-items: center; column-gap: var(--space-12); }
.prog .flow > li > .step { grid-area: step; display: grid; gap: var(--space-4); }
.prog .flow > li > .step small { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--ink-2); }   /* caption：行話旁邊的白話 */
.prog .flow > li > .t { grid-area: t; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.prog .flow > li > .len { grid-area: len; color: var(--ink-2); white-space: nowrap; font-size: 15px; }
.prog .flow > li > .p-play { grid-area: play; }
.prog .flow > li > .trk-dl { grid-area: dl; }
.prog .flow > li > .dl { grid-area: panel; }
.prog-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-18); margin-top: var(--space-18); }
.prog-acts .fine { max-width: 36em; }
#prog-all { background: var(--ink); color: var(--bg); }   /* 全部播放＝墨色按鈕（紅色只給錄音、正在播與主按鈕） */
@media (max-width: 640px) {
  .prog .flow > li { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "step len play" "t t dl" "panel panel panel"; row-gap: var(--space-6); }
}

/* ---------- 找曲子：左欄篩選＋右欄結果（電腦版的版面寫在篩選欄樣式後面，才蓋得過去） ---------- */
.find { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-18); }

/* 篩選欄（新元件） */
.flt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.flt-h { font: 700 17px/1.3 var(--font-body); }   /* body，加粗 */
@media (max-width: 1023px) { .flt-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #flt { padding-top: var(--space-8); } }
.flt-toggle { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; padding: 0 var(--space-18); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 16px/1 var(--font-body); cursor: pointer; }
.flt-toggle:hover { border-color: var(--ink); }
.flt-toggle .gl { width: 18px; height: 18px; }
.flt-toggle[aria-expanded="true"] { border-color: var(--ink); }
.flt-toggle .gl:last-child, .trk-dl .chev { transition: transform .15s; }
.flt-toggle[aria-expanded="true"] .gl:last-child, .trk-dl[aria-expanded="true"] .chev { transform: rotate(180deg); }
.flt-clear { min-height: 44px; padding: 0 var(--space-8); border: 0; background: transparent; color: var(--red-ink); font: 700 15px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flt-note { margin-top: var(--space-8); font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.facet { padding-block: var(--space-14); border-top: 1px solid var(--line); }
.facet:first-of-type { margin-top: var(--space-10); }
.facet > h3, .facet > .fh { margin: 0 0 var(--space-10); font: 700 15px/1.25 var(--font-body); }   /* ui-label */
.facet .sub { margin: var(--space-12) 0 var(--space-8); font-size: 14px; line-height: 1.4; color: var(--ink-2); }   /* fine-print */
.opts { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.opt { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 36px; padding: var(--space-6) var(--space-12); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 14px/1.2 var(--font-body); text-align: left; cursor: pointer; }   /* tool-label 字級 */
.opt:hover { border-color: var(--ink); }
.opt .n { font: 400 13px/1 var(--font-mono); color: var(--ink-2); }
.opt .x { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }   /* 速度的「每分鐘幾拍」 */
.opt[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.opt[aria-pressed="true"] .n, .opt[aria-pressed="true"] .x { color: var(--on-amber); }
/* 選中的選項與段落標籤前面加一個勾：日間琥珀底對頁面底只有約 2.3:1，光靠顏色分不出選了沒（色弱也一樣）；勾對琥珀底約 6.6:1 */
.opt .ok, .l3 .chip .ok { width: 16px; height: 16px; flex: none; }
.opt[aria-disabled="true"] { border-style: dashed; color: var(--ink-2); cursor: default; }   /* 0 首：變淡但字看得清楚（用 ink-2，不用透明度） */
.opt[aria-disabled="true"]:hover { border-color: var(--line-strong); }
.opt .bi-i { width: 22px; height: 22px; }
.opt .nrg { width: 16px; height: 14px; }
.facet details { border-top: 1px dashed var(--line); }
.facet details:first-of-type { border-top: 0; }
.facet summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 40px; cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }
.facet summary::-webkit-details-marker { display: none; }
.facet summary .gl { width: 16px; height: 16px; transition: transform .15s; }
.facet details[open] summary .gl { transform: rotate(180deg); }
.facet details .opts { padding-bottom: var(--space-10); }
.facet summary .n { font: 400 13px/1 var(--font-mono); color: var(--ink-2); }
/* 手機：篩選面板約 1,350px 高，底部黏一顆「看結果（N 首）」；墨色，不用紅（紅色只給主按鈕與正在播） */
/* 讓開手機底部五台與播放器（不然按到的是底部選單）；底下墊一條頁面底色，捲過去的選項不會跟按鈕疊在一起（不用陰影：頁面樣式不寫色碼） */
.flt-done { position: sticky; bottom: calc(var(--tabbar-h) + var(--pl-h) + var(--space-12)); padding-top: var(--space-12); background: var(--bg); }
.flt-go { width: 100%; justify-content: center; min-height: 48px; background: var(--ink); color: var(--bg); }
.flt-go:hover { filter: brightness(1.2); }
#flt .opt, #flt summary { scroll-margin-bottom: calc(var(--tabbar-h) + var(--pl-h) + 72px); }   /* 用 Tab 走到面板下方時，不被黏住的「看結果」蓋住 */
@media (min-width: 1024px) {
  .flt-done { display: none; }
  .find { grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-28) var(--space-44); align-items: start; }
  /* 設計評審第 2 輪 D1：原本側欄黏在頂端、自己捲（內容 1,354px，1280×800 只看得到 645px），「速度」「主奏樂器」「節慶季節」整組不在畫面上、「快」被切半顆，
     Mac 上連捲軸都看不到 → 不黏住、不自己捲，跟清單一起往下捲（Artlist、Epidemic Sound 的側欄也是跟著頁面捲） */
  .side { padding-right: var(--space-6); }
  .flt-toggle { display: none; }
  .flt[hidden] { display: block !important; }   /* 電腦上篩選常駐（手機才收起來） */
}

/* 結果頭 */
.res-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-14); }
.res-head h2 { font-size: 26px; line-height: 1.25; margin-right: auto; }   /* program-title */
.res-head h2:focus { outline: none; }
.res-count { font: 700 15px/1.2 var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.grp-best { margin-top: var(--space-8); font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 46em; }   /* body-small：大類頁「先列最適合的 20 首」（設計評審第 2 輪） */
.sort { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 15px; color: var(--ink-2); }
.sort select { min-height: 40px; font-size: 15px; }
.active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-top: var(--space-12); }
.active > span { font-size: 14px; color: var(--ink-2); }
.active .chip .gl { width: 12px; height: 12px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12); margin-top: var(--space-10); font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print：直條＝能量的圖例 */
.legend span { display: inline-flex; align-items: center; gap: var(--space-6); }
.sec-label { margin: var(--space-22) 0 var(--space-6); font: 700 15px/1.25 var(--font-body); color: var(--ink-2); }   /* ui-label：專為這個場合／各段落可用 */
.sec-label:first-child { margin-top: var(--space-14); }

/* ---------- 曲子列（新元件）：播放鈕｜曲名・長度・速度・氣氛｜下載 ---------- */
.trk-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.trk { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "play main dl" "panel panel panel"; column-gap: var(--space-12); align-items: center; padding-block: var(--space-12); border-top: 1px solid var(--line); }
.trk:last-child { border-bottom: 1px solid var(--line); }
/* 捲到某一首時（舊的 ?t= 分享網址、播放器的「下載」）讓開固定的頁首（設計評審 10-25 必修 1） */
.trk, .prog .flow > li, #pin-h { scroll-margin-top: calc(var(--header-height) + var(--space-12)); }
.trk-play { grid-area: play; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.trk-play:hover { border-color: var(--ink); }
.trk-play .gl { width: 18px; height: 18px; }
.trk-play .gl.play { transform: translateX(1px); }
/* 清單那一列「正在播」：紅字＋紅色描邊，不是實心紅（網站主人 10-25 定案：手機上清單那列與底部播放器原本各一顆紅色實心暫停鈕 → 清單改描邊、播放器留紅，每個畫面只有一顆紅色實心） */
.trk.on .trk-play { background: transparent; border-color: var(--red-ink); color: var(--red-ink); }
/* 設計評審第 2 輪 D2：膠囊形的播放鈕（每首一頁、節目表）播放中原本也是紅色實心，跟旁邊紅色「下載整首 MP3」同高同形同色 →
   描邊照舊（line-strong）、字與圖示用 red-ink，加音量表三條（設計系統 ON AIR 的音量表）；紅色實心只留給主按鈕 */
.p-play.on { color: var(--red-ink); border-color: var(--line-strong); }
.p-meter { display: inline-flex; align-items: flex-end; gap: var(--space-2); height: 14px; margin-inline-start: var(--space-2); }
.p-meter i { width: 3px; border-radius: var(--radius-2); background: currentColor; transform-origin: bottom; }
.p-meter i:nth-child(1) { height: 45%; } .p-meter i:nth-child(2) { height: 80%; } .p-meter i:nth-child(3) { height: 60%; }
.p-play.on .p-meter i { animation: vu .45s ease-in-out infinite alternate; }   /* 讀者自己按了播放才出現（不是捲動動態）；減少動態時外框整站關掉動畫 */
.p-play.on .p-meter i:nth-child(2) { animation-delay: .12s; } .p-play.on .p-meter i:nth-child(3) { animation-delay: .24s; }
.trk-main { grid-area: main; min-width: 0; display: grid; gap: var(--space-4); color: var(--ink); text-decoration: none; border-radius: var(--radius-6); }
/* 曲名那一塊連到這一首自己的頁面（第 2 輪）：平常不畫底線（一整列都是底線太吵），滑過時曲名畫底線 */
@media (hover: hover) { .trk-main:hover .trk-t { text-decoration: underline; text-underline-offset: 4px; } }
.trk-t { font-size: 17px; line-height: 1.35; font-weight: 700; }   /* body，加粗 */
/* 正在播的曲名不改紅字：red-ink 對日間底只有 6.0:1，曲名是主要文字要 ≥7；「正在播」由紅色暫停鈕＋紅色進度條表示 */
.trk-m { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print：一行字（點號緊貼），太長才換行 */
.trk-m .nrg { margin-left: var(--space-4); }
/* 第 5 輪 R5-B5：手機上每一列第一行都停在「・」、長曲「2 分／58 秒」被拆兩行 → 小字分兩組（長度・速度｜氣氛・能量）。
   第 6 輪 R6-B2：第 5 輪用外框裁切藏「・」，一組在組內換行時裁掉的是真的字（320 寬 61% 的列）→ 不裁切。
   每一小塊（.nw：「2 分 58 秒・中速」「溫馨、」「明亮・有活力」；外框以詞換行不會在 .nw 裡插 <wbr>）不換行，只在塊與塊之間換行：數字不拆、行頭行尾沒有「・」。
   手機（767 以下）兩組各一行；兩組中間的「・」（.tg-sep，包在第二組第一塊的開頭）只給讀屏念。電腦上兩組同一行，「・」跟前面黏在一起 */
@media (max-width: 767px) {
  .trk-m .tg { display: block; }
  .trk-m .tg-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 同 .sr：看不到、讀屏念得到 */
}
.trk-m .tag { margin-right: var(--space-6); vertical-align: 1px; }   /* 標籤放在這一行最前面：「相近」一眼看得到，也不會單獨掉到第二行 */
.dim { color: var(--ink-2); font-weight: 400; }
.tag { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-8); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; line-height: 1; font-weight: 700; color: var(--ink-2); white-space: nowrap; }   /* caption */
.tag.near { border-style: dashed; }
.trk-dl { grid-area: dl; display: inline-flex; align-items: center; gap: var(--space-6); min-height: 44px; padding: 0 var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); cursor: pointer; white-space: nowrap; }   /* 看起來就是按鈕：有框、有字 */
.trk-dl:hover { border-color: var(--ink); }
.trk-dl .gl { width: 18px; height: 18px; }
.trk-dl[aria-expanded="true"] { border-color: var(--ink); }
.trk-dl .chev { width: 14px; height: 14px; margin-inline-start: calc(-1 * var(--space-2)); }
.trk-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.trk-bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.p-play { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); min-height: 40px; padding: 0 var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.p-play:hover { border-color: var(--ink); }
.p-play .gl { width: 14px; height: 14px; }
.more-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-top: var(--space-18); }
.more-row .fine { flex: 1 1 14em; }
.prog .flow > li > .trk-dl, .prog .flow > li > .p-play { justify-self: end; }
@media (max-width: 400px) { .trk-dl { padding: 0 var(--space-12); gap: var(--space-4); } }   /* 很窄的手機：下載鈕照樣寫「下載」（長輩靠字認按鈕），只把內距收一點 */
@media (pointer: coarse) {   /* 觸控：每個可點的東西至少 44px 高（句子裡的連結也撐高，不靠手指點準） */
  .p-play, #main .chip, .opt, .sort select, .facet summary, .pl-seek { min-height: var(--tap-min); }
  /* 設計評審第 2 輪 D6：原本把句子裡的連結撐成 inline-flex 44px 高，含連結那一行的行距從 24px 變 34px →
     改用上下內距把點擊範圍撐開（行內元素的上下內距不會撐高那一行，點擊範圍照樣約 44px 高） */
  .bgm-promise a, .dl-note a, .lic .fine a, .lic ul.plain a, .lic-terms a { display: inline; padding-block: var(--space-12); }
}

/* ---------- 提示詞單（新元件；10-27 由下載單改成 BGM 詞庫）：按「提示詞」原地展開；上緣撕線（同節目表） ---------- */
.dl { grid-area: panel; display: grid; gap: var(--space-14); margin-top: var(--space-12); padding: var(--space-14) 0 var(--space-6); border-top: 2px dashed var(--line); }
.dl-note { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 52em; }
.dl-note a { font-weight: 700; text-underline-offset: 3px; }
.dl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.dl-acts .chip { text-decoration: none; font-size: 14px; min-height: 40px; padding-inline: var(--space-14); }
.dl-acts .gl { width: 15px; height: 15px; }
.dl-meta { font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
/* 提示詞框本身（.pr-h、.pr-text…）在設計系統 bundle.css（PromptPanel），鈴聲頁共用 */
.dl-acts .btn-main .gl { width: 18px; height: 18px; }
@media (pointer: coarse) { .dl-acts .chip { min-height: var(--tap-min); } }

/* ---------- 補曲中（新元件）：這類音樂通常要什麼＋相近可試聽＋自己寫一首＋寫信告訴我們 ---------- */
.bgm-fill { display: grid; gap: var(--space-14); margin-top: var(--space-14); padding-top: var(--space-18); border-top: 2px dashed var(--line-strong); }
.bgm-fill h3 { font-size: 22px; line-height: 1.3; }   /* item-title */
.bgm-fill > p { font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 46em; }
.bgm-fill .need { margin-bottom: 0; }
.bgm-fill h4 { margin: var(--space-10) 0 0; font: 700 17px/1.35 var(--font-body); }
.bgm-fill .near-note { font-size: 14px; color: var(--ink-2); }
.ask { display: grid; gap: var(--space-12); margin-top: var(--space-6); padding-top: var(--space-14); border-top: 1px solid var(--line); }
.ask-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); }
.ask-acts .btn .gl { width: 18px; height: 18px; }
.mail-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); font-size: 16px; line-height: 1.6; }
.mail-line .mail { font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
@media (pointer: coarse) { .mail-line .chip { min-height: var(--tap-min); padding-inline: var(--space-16); } }

/* 找不到（研究 09／規劃書 v2 §8.3 的順序） */
.none { display: grid; gap: var(--space-14); margin-top: var(--space-14); }
.none h3 { font-size: 22px; line-height: 1.3; }   /* item-title */
.none h4 { margin: var(--space-6) 0 0; font: 700 16px/1.4 var(--font-body); }
.none .row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.none .row .chip { text-decoration: none; font-size: 14px; min-height: 40px; padding-inline: var(--space-14); }

/* ---------- 授權說明、怎麼做的、找不到想要的 ---------- */
.lic-terms { margin: var(--space-14) 0 0; padding-left: var(--space-26); display: grid; gap: var(--space-10); font-size: 16px; line-height: 1.75; max-width: 50em; }
.lic-terms > li::marker { font-weight: 700; }
.lic-sub { margin: var(--space-6) 0; padding-left: var(--space-26); display: grid; gap: var(--space-4); }
.lic-terms a { text-underline-offset: 3px; }
.lic-ok { list-style: none; margin: var(--space-14) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-28); }
.lic-ok li { display: flex; align-items: flex-start; gap: var(--space-10); font-size: 17px; line-height: 1.6; }
.lic-ok .gl { width: 20px; height: 20px; margin-top: var(--space-4); }
.lic h3 { margin: var(--space-24) 0 var(--space-8); font-size: 22px; line-height: 1.3; }   /* item-title */
.lic ul.plain { margin: 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); font-size: 16px; line-height: 1.7; max-width: 50em; }
.lic .lead { font-size: 18px; line-height: 1.7; max-width: 40em; }
.lic .fine { margin-top: var(--space-18); max-width: 52em; }
.lic .fine a { text-underline-offset: 3px; }
.lic-acts { margin-top: var(--space-18); display: flex; flex-wrap: wrap; gap: var(--space-10); }
.lic-acts .btn .gl, .how .btn .gl { width: 18px; height: 18px; }
.how ul { margin: 0; padding-left: var(--space-22); display: grid; gap: var(--space-8); font-size: 16px; line-height: 1.7; max-width: 50em; }
.how .btn { margin-top: var(--space-18); }
@media (max-width: 760px) { .lic-ok { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 樣稿註記（正式網站不會有）：頁尾上方、預設收起 ---------- */
.mock-notes { margin-block: var(--space-28) var(--space-12); padding-top: var(--space-10); border-top: 1px dashed var(--line-strong); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.mock-notes > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink); }
.mock-notes ol { margin: var(--space-6) 0 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); max-width: 60em; }

/* ---------- 底部小播放器（新元件）：機器面板（glass），手機在底部五台上面 ---------- */
.bgm-player { position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 29; background: var(--glass); color: var(--glass-ink); border-top: 1px solid var(--glass-rule); padding: var(--space-8) max(var(--space-16), env(safe-area-inset-right, 0px)) calc(var(--space-8) + var(--pl-safe)) max(var(--space-16), env(safe-area-inset-left, 0px)); }
.bgm-player :focus-visible { outline-color: var(--glass-red-ink); }   /* 深色面板裡的焦點框（設計系統第 4 版規則） */
.pl-in { max-width: 1148px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 16em) minmax(0, 1fr) auto; grid-template-areas: "play info seek btns"; align-items: center; gap: var(--space-8) var(--space-14); }
.pl-play { grid-area: play; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--glass-2); color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); display: grid; place-items: center; cursor: pointer; }
.pl-play .gl { width: 20px; height: 20px; }
.bgm-player.playing .pl-play { background: var(--glass-red); color: var(--on-amber); box-shadow: none; }   /* 深色面板上的「正在播」用 glass-red（對面板日 5.4／夜 6.6:1；--red 只有 3.0），三角形用深色字（5.9:1），同音樂教室的「下一個」 */
.pl-info { grid-area: info; min-width: 0; display: grid; gap: var(--space-4); }
.pl-top { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.pl-t { font-size: 16px; line-height: 1.3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* body-small，加粗 */
.pl-time { font-size: 13px; line-height: 1.3; color: var(--glass-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }   /* caption */
.pl-onair { flex: none; display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--red); color: var(--on-red); font: 800 12px/1 var(--font-display); letter-spacing: .14em; visibility: hidden; }
.bgm-player.playing .pl-onair { visibility: visible; }   /* 平常不亮（常亮會被讀成「正在直播」）；真的在播才亮 */
.pl-seek { grid-area: seek; width: 100%; min-width: 0; height: 40px; margin: 0; accent-color: var(--glass-red-line); cursor: pointer; }
.pl-btns { grid-area: btns; display: flex; align-items: center; gap: var(--space-6); }
.pl-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); display: grid; place-items: center; cursor: pointer; flex: none; }
.pl-btn:hover, .pl-play:hover { filter: brightness(1.25); }
.pl-btn .gl { width: 16px; height: 16px; }
.pl-btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
/* 播完以後：單曲循環／本類輪播（使用者 10-27）的外觀在設計系統 bundle.css（PlayModes）；這裡只管它在播放器裡的位置 */
.pl-meter { display: inline-flex; align-items: flex-end; gap: var(--space-4); height: 14px; }
.pl-meter i { width: 3px; border-radius: var(--radius-2); background: var(--amber); transform-origin: bottom; }
.pl-meter i:nth-child(1) { height: 45%; } .pl-meter i:nth-child(2) { height: 80%; } .pl-meter i:nth-child(3) { height: 60%; }
.bgm-player.playing .pl-meter i { animation: vu .45s ease-in-out infinite alternate; }
.bgm-player.playing .pl-meter i:nth-child(2) { animation-delay: .12s; } .bgm-player.playing .pl-meter i:nth-child(3) { animation-delay: .24s; }
/* 鍵盤說明（空白鍵、上下鍵、左右鍵）：第 3 輪 R3-B10 從播放器拿掉，改成播放器的 aria-describedby（#pl-keys-d，只給讀屏）；大螢幕播放器只剩一列控制 */
@media (min-width: 901px) { .pl-seek { height: 28px; } }
@media (max-width: 900px) {
  .pl-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "play info btns" "seek seek seek"; row-gap: var(--space-4); }
  .pl-seek { height: 32px; }
}
/* 手機收起來時頂端的細進度線（D7）；電腦、手機展開時有完整的進度條，不顯示 */
.pl-line { display: none; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.pl-line i { display: block; height: 100%; background: var(--glass-red-line); transform: scaleX(0); transform-origin: left; }
.pl-exp { display: none; }
@media (max-width: 640px) {
  /* 設計評審第 2 輪 D7：原本兩排 113px＋底部五台 56px＝169px，320×568 播放中內容只剩 58% →
     平常收成一列（播放｜曲名＋時間｜下一首｜關掉，約 60px），進度改成播放器頂端 3px 細線；點曲名展開「上一首｜進度條」與「播完以後」兩排。
     （10-22：手機拿掉播放器的下載鈕（清單那一列就有「下載」）與 ON AIR（播放鈕變紅已經表示正在播）；10-25 第 1 輪：進度條要夠寬，展開時吃滿整排） */
  .pl-line { display: block; }
  .pl-play { width: var(--tap-min); height: var(--tap-min); }   /* 一列的高度＝44px 的鈕＋上下內距 */
  .bgm-player.pl-open .pl-line { display: none; }
  .pl-in { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "play info nx cl"; column-gap: var(--space-6); row-gap: var(--space-6); }
  .bgm-player.pl-open .pl-in { grid-template-areas: "play info nx cl" "pv seek seek seek" "au au au au"; }   /* 進度條吃滿第二排（320 寬約 220px），「播完以後」放第三排 */
  .bgm-player.pl-open .pl-end { justify-self: start; }
  .pl-btns { display: contents; }
  #pl-prev { grid-area: pv; } #pl-next { grid-area: nx; } .pl-end { grid-area: au; } #pl-close { grid-area: cl; justify-self: end; }
  #pl-prev, .pl-seek, .pl-end { display: none; }
  .bgm-player.pl-open #pl-prev { display: grid; }
  .bgm-player.pl-open .pl-end { display: inline-flex; }
  .bgm-player.pl-open .pl-seek { display: block; }
  /* 點曲名展開：整塊曲名＋時間就是按鈕（透明、蓋在上面），右邊一個小箭頭告訴讀者點得開 */
  .pl-info { position: relative; padding-inline-end: var(--space-22); }
  .pl-exp { display: block; position: absolute; inset: calc(-1 * var(--space-4)) 0; width: 100%; min-height: var(--tap-min); padding: 0; border: 0; border-radius: var(--radius-6); background: transparent; color: var(--glass-dim); cursor: pointer; }
  .pl-exp .gl { position: absolute; right: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); transition: transform .15s; }
  .bgm-player.pl-open .pl-exp .gl { transform: translateY(-50%) rotate(180deg); }
  .pl-time { overflow: hidden; text-overflow: ellipsis; }
  .pl-onair { display: none; }
  .pl-mode { font-size: 13px; }
}
@media (pointer: coarse) { .pl-btn { width: auto; min-width: var(--tap-min); min-height: var(--tap-min); height: var(--tap-min); } .pl-mode { min-height: var(--tap-min); } }
/* 播放器出現時：頁尾往上讓位、焦點跟提示列不被蓋住 */
html.has-player body { padding-bottom: var(--pl-h); }
html.has-player { scroll-padding-bottom: calc(var(--pl-h) + var(--tabbar-h) + var(--space-12)); }
html.has-player #toast { bottom: calc(var(--pl-h) + var(--tabbar-h) + var(--space-12)); }