/* 叮叮點歌 dingsong.ai・音樂故事（FM 112.8）：有聲故事書（2026-10-25 改版）
   書架 → 封面（書名、標語、短介紹、開始聽故事、目錄）→ 一本書（分鏡圖跟著音樂換、正在唱的那一句、播放鈕與時間軸、這一幕的故事）→ 結尾（再聽一次、YouTube 外連、其他幾本）。
   只用設計系統的 token；字級只用字級表（後面註明級別）；間距 var(--space-…)；圓角 var(--radius-…)。不寫 style 屬性：位置由程式用 CSSOM 設 --x、--p。
   手機：不放任何固定在下面的列（第 2 輪評審：固定列把可讀高度壓到剩 21%～44%）；圖貼齊螢幕兩邊，第一屏就看得到圖、播放鈕和故事開頭。
   電腦（1000px 以上）：左頁是圖、右頁是故事，像一本打開的書。
   10-25 拿掉的元件：四台分頁、注意聽、聆聽地圖、學習單、幕後、兒童模式、主持人開場、YouTube 播放器、手機底部三顆鈕。 */

/* ---------- 共用的小元件 ---------- */
.st-pill { display: inline-flex; align-items: 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 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }   /* ui-label；設計系統 .set-more 的膠囊鈕 */
.st-pill:hover { border-color: var(--ink); }
.st-pill .gl, .btn .gl { width: 1em; height: 1em; }
#st-app { word-break: keep-all; overflow-wrap: break-word; }   /* 以詞換行（詞之間有 <wbr>） */
.st-freq { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* kicker */
.st-kick { font: 500 14px/1.5 var(--font-body); letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* fine-print；中文小標不用等寬字型 */
.st-sub { display: inline-block; margin-left: var(--space-10); font-size: max(13px, .58em); font-weight: 700; color: var(--ink-2); }
.st-tag { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 15px; line-height: 1.5; color: var(--ink-2); }   /* 書上的標籤：全家都能看／戰爭題材／感情題材 */
.st-tag .gl { width: 18px; height: 18px; flex: none; }
.st-tag--war, .st-tag--adult { color: var(--ink); font-weight: 700; }
.st-tag--war .gl, .st-tag--adult .gl { color: var(--red-ink); }
.st-chip-row, .st-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); }
.st-big-btn { min-height: var(--tap-min); padding-inline: var(--space-14); font-size: 15px; }   /* Chip 當開關（按下＝琥珀底）；長輩找得到、按得到：44px 高、15px */
.st-big-btn .gl { width: 16px; height: 16px; }
.st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-12); }
.st-cta-note { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.st-bad { padding-top: var(--space-8); color: var(--ink); font-weight: 700; }
.st-bad a { color: var(--red-ink); }
/* 手機上的圖貼齊螢幕兩邊（抵掉 .wrap 的左右內距） */
@media (max-width: 640px) {
  .st-pic, .st-cover-img { margin-inline: calc(50% - 50vw); border-radius: 0; }
}

/* ---------- 書架 ---------- */
.st-shelf { padding-bottom: var(--space-24); }
.st-shelf-head { display: grid; gap: var(--space-12); padding-block: var(--space-44) var(--space-28); }
.st-shelf-head h1, .st-static h1 { font: 700 min(52px, max(34px, 4.4vw))/1.1 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.st-lead { font-size: 18px; color: var(--ink); max-width: 30em; }   /* lead-text */
.st-what { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 36em; }   /* body */
.st-books { padding-block: var(--space-8) var(--space-44); display: grid; gap: var(--space-44); }
.st-book { display: grid; gap: var(--space-14); align-content: start; min-width: 0; }
.st-book-img { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-10); overflow: hidden; background: var(--panel); }
.st-book-img img, .st-mv-img img, .st-cover-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-book-txt { display: grid; gap: var(--space-8); align-content: start; }
.st-book h3 { font: 700 22px/1.3 var(--font-body); }   /* program-title */
.st-book-line { font-size: 17px; line-height: 1.7; color: var(--ink); }
.st-open { justify-self: start; margin-top: var(--space-6); }
.st-book--feature h3 { font-size: min(40px, max(26px, 3vw)); line-height: 1.2; }   /* section-title */
.st-book--feature .st-book-line { font-size: 18px; }
@media (min-width: 900px) { .st-book--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-44); align-items: center; } }
.st-grid { display: grid; gap: var(--space-44) var(--space-28); }
@media (min-width: 600px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-all { padding-block: var(--space-8) var(--space-44); display: grid; gap: var(--space-14); }
.st-all h2 { padding-top: var(--space-28); border-top: 1px solid var(--line); font: 700 26px/1.3 var(--font-body); }   /* 分隔線畫在內容寬度裡（畫在 .wrap 上會連左右內距一起畫） */
.st-all-p { color: var(--ink-2); max-width: 40em; }
.st-mvs { display: grid; gap: var(--space-24) var(--space-28); margin-top: var(--space-10); }
@media (min-width: 600px) { .st-mvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-mv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-14); align-items: start; }
.st-mv-img { aspect-ratio: 16 / 9; border-radius: var(--radius-8); overflow: hidden; background: var(--panel); }
.st-mv-txt { display: grid; gap: var(--space-6); align-content: start; }
.st-mv h3 { font: 700 18px/1.35 var(--font-body); }
.st-mv .st-pill { justify-self: start; margin-top: var(--space-4); }
.st-static { padding-block: var(--space-44); display: grid; gap: var(--space-12); }
.st-static-list { display: grid; gap: var(--space-8); }

/* ---------- 一本書的頂端列：回書架、書名、大字 ---------- */
.st-bar { display: flex; align-items: center; gap: var(--space-10); padding-block: var(--space-12); }
.st-bar .st-big-btn { margin-left: auto; }
.st-bar-title { flex: 1 1 auto; min-width: 0; font: 700 18px/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 一本書裡的頁名：讀的時候不佔版面（封面才用大標） */
.st-bar-title a { display: block; padding-block: var(--space-12); overflow: hidden; text-overflow: ellipsis; color: var(--ink); text-decoration: none; }   /* 可按高度 44px 以上 */
.st-bar-title a:hover { text-decoration: underline; }
.st-bar-title .st-sub { font-size: 15px; }
@media (max-width: 420px) { .st-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .st-back { min-width: var(--tap-min); justify-content: center; padding-inline: var(--space-12); } }   /* 很窄的手機：「書架」只留箭頭（讀屏照樣念「書架」） */

/* ---------- 封面 ---------- */
.st-cover { padding-bottom: var(--space-48); }
.st-cover-body { display: grid; gap: var(--space-24); }
@media (min-width: 900px) { .st-cover-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-44); align-items: center; } }
.st-cover-img { aspect-ratio: 16 / 9; border-radius: var(--radius-14); overflow: hidden; background: var(--panel); }
.st-cover-txt { display: grid; gap: var(--space-14); align-content: start; }
.st-title { font: 700 min(52px, max(34px, 4.4vw))/1.15 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.st-tagline { font-size: 18px; line-height: 1.7; color: var(--ink); }   /* lead-text */
.st-intro { font-size: 17px; line-height: 1.85; color: var(--ink); max-width: 34em; }
.st-contents { margin-top: var(--space-44); padding-top: var(--space-24); border-top: 1px solid var(--line); display: grid; gap: var(--space-12); }
.st-contents h2 { font: 700 26px/1.3 var(--font-body); }
.st-contents .st-toc { max-width: 48em; }
/* 手機封面：第一屏就是圖、書名、標語和「開始聽故事」（第 3 輪：320×568 原本按鈕掉到第一屏外；品味建議 6） */
@media (max-width: 640px) {
  .st-cover-body { gap: var(--space-14); }
  .st-cover-txt { gap: var(--space-8); }
  .st-cover-txt .st-tag { order: 1; }   /* 題材標籤排到按鈕後面（按鈕先進第一屏）；不是可以按的東西，Tab 順序不受影響 */
  .st-cover-txt .st-intro { order: 2; margin-top: var(--space-8); }
}

/* 目錄（封面、書裡的「目錄」都用這一份）：按一幕就從那一幕開始聽 */
.st-toc { list-style: none; margin: 0; padding: 0; display: grid; }
.st-toc li { border-bottom: 1px solid var(--line); }
.st-toc-row { display: grid; grid-template-columns: var(--space-44) minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; min-height: var(--tap-min); padding-block: var(--space-12); color: var(--ink); text-decoration: none; }
.st-toc-row:hover .st-toc-t b { text-decoration: underline; }
.st-toc-n { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.st-toc-row[aria-current] .st-toc-n { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.st-toc-t { display: grid; gap: var(--space-2); min-width: 0; }
.st-toc-t b { font-size: 17px; line-height: 1.4; }
.st-toc-t > span { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.st-toc-time { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 一本書 ---------- */
.st-reader { padding-bottom: var(--space-48); }
.st-spread { display: grid; gap: var(--space-22); }
/* 電腦：左頁圖約 60%、右頁故事 340～400px（中文每行約 22 字）；書頁至少一個視窗高，頁尾不出現在讀故事的第一屏（第 3 輪品味建議 4、5） */
@media (min-width: 1000px) {
  .st-reader { min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); }
  .st-spread { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-areas: "stage text" "toc text"; gap: 0 var(--space-44); align-items: start; }
  .st-stage { grid-area: stage; } .st-text { grid-area: text; } .st-tocbox { grid-area: toc; }
}
@media (min-width: 641px) and (max-width: 999px) { .st-stage, .st-text, .st-tocbox { width: 100%; max-width: 760px; justify-self: center; } }
.st-stage { min-width: 0; }
/* 分鏡圖：兩張疊著，新的那張淡入（0.45 秒）；減少動態時直接換 */
.st-pic { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-14); overflow: hidden; background: var(--panel); touch-action: pan-y; }
.st-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.st-img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .st-img { transition: none; } }
.st-pic .onair { right: var(--space-12); top: var(--space-12); z-index: 1; }   /* ON AIR 燈：疊在圖的右上角，只有在播的時候亮（bundle .onair） */

/* 跟著唱的那一句：像字幕，在圖的正下方；沒在唱的時候空著（位置先留好，故事不會跳來跳去） */
.st-sing { display: grid; align-content: start; justify-items: center; gap: var(--space-2); min-height: 4.2em; padding-top: var(--space-12); text-align: center; text-wrap: balance; }
.st-reader:not([data-sing]) .st-sing { display: none; }   /* 這一幕沒有歌詞（前奏、純音樂段落）：不留空格（第 3 輪必修 1） */
.st-sing-o { font: 700 18px/1.45 var(--font-body); color: var(--ink); }
.st-sing-z { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 1000px) { .st-sing { min-height: 3.6em; } }

/* 播放：時間軸（可以拖）＋上一幕／播放／下一幕＋目錄 */
.st-ctl { display: grid; gap: var(--space-2); padding-top: var(--space-6); }
.st-posl { display: block; }
.st-track { position: relative; display: block; }
#st-pos { --p: 0%; display: block; width: 100%; min-height: var(--tap-min); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#st-pos::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--ink) var(--p), var(--line-strong) var(--p)); }
#st-pos::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: calc(var(--space-8) * -1); border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); }
#st-pos::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--line-strong); }
#st-pos::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--ink); }
#st-pos::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); }
#st-pos:focus-visible { outline-offset: 0; }
.st-ticks { position: absolute; left: 11px; right: 11px; top: calc(50% + var(--space-6)); height: var(--space-6); pointer-events: none; }   /* 每一幕從哪裡開始（裝飾；跳幕用目錄） */
.st-ticks i { position: absolute; left: var(--x); top: 0; width: 2px; height: 100%; transform: translateX(-50%); background: var(--line-strong); }
.st-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-10); }
.st-time { display: grid; gap: var(--space-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#st-time-now { font-size: 15px; font-weight: 700; color: var(--ink); }
.st-time-all { font-size: 13px; color: var(--ink-2); }
.st-trio { display: flex; align-items: center; gap: var(--space-12); }
.st-round { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.st-round:hover:not(:disabled) { border-color: var(--ink); }
.st-round:disabled { opacity: .35; cursor: not-allowed; }
.st-round .gl { width: 20px; height: 20px; }
.st-knob { width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow-knob); cursor: pointer; }   /* 收音機旋鈕同一顆（首頁 .mv-knob） */
.st-knob .gl { width: 24px; height: 24px; }
.st-knob[aria-busy] { opacity: .7; }
.st-reader[data-end] .st-knob { display: none; }   /* 結尾頁只留紅色「再聽一次」（第 4 輪評審品味建議 2）；原本 visibility: hidden 留著位置，電腦、平板的控制列「上一幕〔空 60px〕下一幕」中間空一個洞（10-26 第 6 輪評審小事）→ 整顆拿掉，上一幕、下一幕靠在一起 */
.st-reader[data-end] .st-trio { min-height: 60px; }   /* 播放鈕 60px 拿掉以後，控制列高度照舊（版面不跳）；手機直放、橫放的 .st-trio 是 display: contents，這條不作用 */
.st-knob:hover { filter: brightness(1.2); }
.st-knob, .st-round, .st-pill, .st-toc-row, #st-pos { touch-action: manipulation; }   /* 手機連點不放大頁面（Web Interface Guidelines） */
.st-side { display: flex; justify-content: flex-end; }
.st-tocbtn { padding-inline: var(--space-12); }
.st-tocbtn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.st-tocbox { margin-top: var(--space-12); border-top: 1px solid var(--line); }
.st-tocbtn .gl { width: 18px; height: 18px; }

/* ---------- 手機、平板直放：一本書剛好一個畫面（第 3 輪必修 1、2） ----------
   圖、歌詞、播放列固定在上半，故事那一格自己捲：往下讀故事時，圖和歌詞不會離開畫面；
   沒有任何東西疊在字上（第 2 輪：固定列擋字），也沒有捲動動態。高度＝視窗 − 頁首 −（760px 以下）底部五台。 */
@media (max-width: 999px) and (orientation: portrait) {
  .st-reader { display: flex; flex-direction: column; height: calc(100vh - var(--st-head, var(--header-height)) - var(--st-tabbar, 0px)); height: calc(100dvh - var(--st-head, var(--header-height)) - var(--st-tabbar, 0px)); padding-bottom: 0; }   /* --st-head、--st-tabbar：stories.js 量頁首與底部五台的實際高度（外框改了尺寸也對得上） */
  .st-spread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
  .st-stage { flex: none; }
  .st-text, .st-tocbox { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: var(--space-8); padding-block: var(--space-12); border-top: 1px solid var(--line); }
  .st-reader.is-toc .st-text { display: none; }   /* 目錄打開時暫時取代故事那一格 */
  .st-text:focus-visible { outline-offset: calc(var(--space-3) * -1); }
}
/* 手機：書名列收成 44px；播放列收成一列「上一幕｜時間軸｜下一幕｜目錄」，播放鈕放在圖的右下角（像 Apple Music 的迷你播放鈕） */
@media (max-width: 640px) {
  .st-bar { padding-block: 0; gap: var(--space-8); }
  .st-bar-title { font-size: 17px; }
  .st-bar-title a { padding-block: var(--space-12); }
  .st-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--space-6); align-items: center; }
  .st-pic, .st-sing { grid-column: 1 / -1; }
  .st-pic { grid-row: 1; }
  .st-ctl, .st-btns, .st-trio, .st-side { display: contents; }
  .st-time { display: none; }   /* 時間照樣由時間軸念給讀屏；畫面上只留圖、歌詞、故事 */
  .st-posl { grid-column: 2; grid-row: 3; }
  .st-round[data-act="prev"] { grid-column: 1; grid-row: 3; }
  .st-round[data-act="next"] { grid-column: 3; grid-row: 3; }
  .st-tocbtn { grid-column: 4; grid-row: 3; width: var(--tap-min); padding: 0; justify-content: center; }
  .st-tocbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 只留圖示；讀屏照樣念「目錄」 */
  .st-knob { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: end; position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 var(--space-12) var(--space-12) 0; }
  .st-sing { min-height: 3.2em; padding-top: var(--space-8); }
  .st-sing-o { font-size: 16px; line-height: 1.4; }
  .st-sing-z { font-size: 14px; line-height: 1.45; }
  .st-text, .st-tocbox { margin-top: var(--space-2); padding-block: var(--space-8); }
  .st-reader .st-text { gap: var(--space-6); }
  .st-of { display: none; }   /* 「・共 6 幕」：手機省下來，幕名和故事早一行出現 */
}
@media (max-width: 360px) { .st-scene-h { font-size: 18px; } }   /* 320 寬：幕名排一行 */
/* 手機開大字：歌詞與故事照樣放大，但不能把故事擠出第一屏（第 3 輪必修 1：大字時 375×667 原本 0 行） */
@media (max-width: 640px) {
  html.st-big .st-sing { min-height: 3.2em; }
  html.st-big .st-sing-o { font-size: 18px; line-height: 1.4; }
  html.st-big .st-sing-z { font-size: 16px; line-height: 1.45; }
  html.st-big .st-story { font-size: 22px; line-height: 1.6; }
  html.st-big .st-scene-h { font-size: 22px; }
}
@media (max-width: 360px) { html.st-big .st-scene-h { font-size: 18px; } html.st-big .st-scene-head .st-kick { font-size: 15px; } html.st-big .st-sing-o { font-size: 16px; } html.st-big .st-sing-z { font-size: 14px; } }   /* 320 寬開大字：歌詞維持一般大小，把空間留給放大的故事 */


/* 這一幕的故事（電腦是右頁） */
.st-text { display: grid; gap: var(--space-12); align-content: start; min-width: 0; }
.st-scene-h { font: 700 26px/1.3 var(--font-body); }   /* section-title（小） */
.st-scene-head { display: grid; gap: var(--space-4); }
.st-story { font-size: 18px; line-height: 1.9; color: var(--ink); max-width: 34em; text-wrap: pretty; }   /* lead-text 字級：這頁的主角 */
.st-next { margin-top: var(--space-6); padding-top: var(--space-12); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--ink-2); }   /* 預告：翻頁前的一句話 */
/* 預告平常先藏著（位置留好，故事不會跳），這一幕最後約 6 秒才淡入；減少動態時直接出現 */
.st-next { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.st-next.is-shown { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .st-next, .st-next.is-shown { transition: none; } }
@media (max-width: 640px) {
  .st-scene-h { font-size: 22px; }
  .st-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-10); }   /* 手機：幕次和幕名排同一行，故事早一行出現 */
  .st-story { font-size: 17px; line-height: 1.85; }
  .st-shelf-head h1, .st-static h1, .st-title { font-size: 34px; }   /* 手機各頁頁名統一 34px（10-25 評審） */
  .st-spread { gap: var(--space-14); }
}
/* 很矮的手機（320×568 這類，高 600px 以下）：故事格至少露出 2 行故事（第 4 輪評審：原本只有 1 行）。
   照評審品味建議 1：幕次和幕名縮成一行小字（幕名 15px 粗、幕次 14px）；跟唱列、故事格的上內距收小。圖、歌詞、播放列的大小不動，沒有東西疊在字上。 */
@media (max-width: 640px) and (max-height: 600px) and (orientation: portrait) {
  .st-spread { gap: var(--space-6); }   /* 播放列和故事格之間：故事格上緣本來就有一條細線分開 */
  .st-scene-head { gap: 0 var(--space-8); }
  .st-scene-head .st-kick, html.st-big .st-scene-head .st-kick { font-size: 14px; line-height: 1.5; }
  .st-scene-h, html.st-big .st-scene-h { font-size: 15px; line-height: 1.5; }
  .st-text, .st-tocbox { padding-top: var(--space-4); }
  .st-reader .st-text { gap: var(--space-4); }
}
/* 結尾 */
.st-end { display: grid; gap: var(--space-14); align-content: start; }
.st-end h2 { font: 700 32px/1.25 var(--font-body); }
/* 手機：結尾頁的播放鈕藏起來以後（第 4 輪品味建議 2），紅色「再聽一次」要在故事格的第一眼就看得到（320×568 原本要往下捲）：
   按鈕排到「故事說完了」正下方，書的標語移到按鈕後面。可以按的東西順序不變（只動不能按的標語）。 */
@media (max-width: 640px) {
  .st-end > .st-story { order: 1; }
  .st-end > .st-more { order: 2; }
}
.st-more { margin-top: var(--space-18); padding-top: var(--space-18); border-top: 1px solid var(--line); display: grid; gap: var(--space-8); }
.st-more h3 { font: 700 18px/1.4 var(--font-body); }
.st-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.st-more-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-12); align-items: center; padding-block: var(--space-6); color: var(--ink); text-decoration: none; }
.st-more-row img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius-6); }
.st-more-row > span { display: grid; gap: var(--space-2); min-width: 0; }
.st-more-row b { font-size: 17px; line-height: 1.4; }
.st-more-row:hover b { text-decoration: underline; }
.st-more-row > span > span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- 樣稿註記（頁尾上方、預設收起；正式網站不會有） ---------- */
.st-notes-wrap { padding-block: var(--space-24) var(--space-12); }
.mock-notes { padding-top: var(--space-12); border-top: 2px dashed var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.mock-notes summary { display: flex; align-items: center; min-height: var(--tap-min); font-weight: 700; color: var(--ink); cursor: pointer; }
.mock-notes ul { margin: var(--space-8) 0 0; padding-left: var(--space-24); display: grid; gap: var(--space-4); }

/* ---------- 大字（無障礙：長輩、投影）：字和按鈕都放大 ---------- */
.st-big .st-story, .st-big .st-intro, .st-big .st-book-line, .st-big .st-what, .st-big .st-sing-o { font-size: 22px; line-height: 1.75; }   /* item-title 字級 */
.st-big .st-sing-z, .st-big .st-next, .st-big .st-toc-t b, .st-big .st-tag, .st-big .st-cta-note, .st-big .st-more-row b, .st-big .st-tagline { font-size: 18px; }
.st-big .st-toc-t > span, .st-big .st-kick, .st-big .st-toc-time, .st-big #st-time-now, .st-big .st-more-row > span > span, .st-big .st-all-p { font-size: 17px; }
.st-big .st-time-all { font-size: 15px; }
.st-big .st-pill, .st-big .btn, .st-big .st-big-btn { font-size: 18px; }
.st-big .st-scene-h { font-size: 30px; }
.st-big .st-sing { min-height: 5em; }

/* ---------- 手機橫放（高 ≤ 520，667×375、844×390）：一本書剛好一個畫面，左邊整張圖、右邊歌詞與故事（10-26 第 6 輪評審必修 3）----------
   原本照直放排：圖（16:9）比頁首到五台之間還高，任何時候都看不到整張圖，故事字在兩屏以下。
   照教室一首歌頁的手機橫放（主控核准過的取捨）：頁首不黏、底部五台在讀書時收起（「書架」鈕與頁首 Logo 照樣能離開）。
   排法照電腦版的左右兩頁：左＝圖＋一列「上一幕｜時間軸｜下一幕｜目錄」（播放鈕疊在圖的右下角，跟手機直放一樣）；右＝書名列、正在唱的那一句、故事（自己捲）。
   圖寬取「畫面寬 6 成」和「高度放得下的寬」兩者小的，整張圖一定在畫面裡；沒有捲動動態。 */
@media (max-height: 520px) and (orientation: landscape) {
  .site-head { position: relative; }
  html:has(.st-reader) .tabbar { display: none; }
  .st-reader { --st-h: calc(100dvh - var(--st-head, var(--header-height)) - var(--st-tabbar, 0px));
    --st-pic-w: min(60%, calc((var(--st-h) - 2 * var(--space-8) - 2 * var(--space-6) - var(--tap-min)) * 16 / 9));
    height: var(--st-h); padding-block: var(--space-8); display: grid;
    grid-template-columns: var(--tap-min) minmax(0, calc(var(--st-pic-w) - 3 * var(--tap-min) - 3 * var(--space-6))) var(--tap-min) var(--tap-min) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: var(--space-6); row-gap: var(--space-6); }
  .st-spread, .st-stage, .st-ctl, .st-btns, .st-trio, .st-side { display: contents; }
  .st-bar { grid-column: 5; grid-row: 1; padding-block: 0; margin-inline-start: var(--space-10); gap: var(--space-8); }
  .st-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .st-back { min-width: var(--tap-min); justify-content: center; padding-inline: var(--space-12); }   /* 「書架」只留箭頭（讀屏照樣念） */
  .st-bar-title { font-size: 17px; }
  .st-bar-title a { padding-block: var(--space-10); }
  .st-bar-title a, .st-bar-title a * { white-space: nowrap; }   /* 書名一行（放不下就省略號），不把右邊擠矮 */
  .st-bar .st-big-btn, .st-big .st-bar .st-big-btn { font-size: 15px; }
  .st-big .st-reader { --st-pic-w: min(52%, calc((var(--st-h) - 2 * var(--space-8) - 2 * var(--space-6) - var(--tap-min)) * 16 / 9)); }   /* 大字：右邊的故事寬一點 */
  .st-pic { grid-column: 1 / 5; grid-row: 1 / 4; align-self: end; width: 100%; margin-inline: 0; border-radius: var(--radius-8); }
  .st-knob { grid-column: 1 / 5; grid-row: 1 / 4; justify-self: end; align-self: end; position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 var(--space-12) var(--space-12) 0; }
  .st-round[data-act="prev"] { grid-column: 1; grid-row: 4; }
  .st-posl { grid-column: 2; grid-row: 4; align-self: center; }
  .st-round[data-act="next"] { grid-column: 3; grid-row: 4; }
  .st-tocbtn { grid-column: 4; grid-row: 4; width: var(--tap-min); padding: 0; justify-content: center; }
  .st-tocbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 只留圖示；讀屏照樣念「目錄」 */
  .st-time { display: none; }   /* 時間照樣由時間軸念給讀屏 */
  .st-sing { grid-column: 5; grid-row: 2; justify-items: start; text-align: start; min-height: 3.2em; padding: 0 0 0 var(--space-10); }
  .st-sing-o { font-size: 16px; line-height: 1.4; }
  .st-sing-z { font-size: 14px; line-height: 1.45; }
  .st-big .st-sing { min-height: 3.4em; }
  .st-big .st-sing-o { font-size: 18px; line-height: 1.4; }   /* 大字的歌詞跟手機直放的大字一樣大，空間留給放大的故事 */
  .st-big .st-sing-z { font-size: 15px; line-height: 1.45; }
  .st-text, .st-tocbox { grid-column: 5; grid-row: 3 / 5; width: auto; max-width: none; justify-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--space-8) 0 var(--space-8) var(--space-10); border-top: 1px solid var(--line); }
  .st-reader.is-toc .st-text { display: none; }   /* 目錄打開時暫時取代故事那一格 */
  .st-text:focus-visible { outline-offset: calc(var(--space-3) * -1); }
  .st-reader .st-text { gap: var(--space-6); }
  .st-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-10); }   /* 幕次和幕名排同一行，故事早一行出現 */
  .st-scene-h { font-size: 18px; } .st-big .st-scene-h { font-size: 22px; }
  .st-of { display: none; }
  .st-story { font-size: 17px; line-height: 1.8; }
}

/* ---------- 列印：只印文字 ---------- */
@media print {
  .st-ctl, .st-bar .chip, .st-tocbox, .st-sing, .st-cta { display: none; }
  .st-img:not(.is-on) { display: none; }
}
/* 英日文頁（10-27 接線）：膠囊鈕的字比中文長（Watch the music video on YouTube／YouTube で MV を見る），不換行會把 MV 卡片撐出畫面 → 可以換行 */
html:is([lang="en"], [lang="ja"]) .st-pill { white-space: normal; line-height: 1.3; padding-block: var(--space-6); }
/* 英日文頁：不換行的 .nw 只給中文頁用；英日文的長片語要能斷（跟 home.css 同一條） */
html:is([lang="en"], [lang="ja"]) main .nw { white-space: normal; overflow-wrap: anywhere; }