/* 叮叮點歌 dingsong.ai・文字頁（本站原則、隱私、授權與出處；施工 1 B-1，2026-10-24）
   一欄長文：行寬約 40 字、小標分段、清單有間距；字級只用設計系統字級表，間距只用 --space-*。 */
.doc { padding-block: var(--space-48); }
.doc-in { max-width: 40em; }
.doc h1 { margin: 0 0 var(--space-16); font-size: clamp(34px, 4.4vw, 52px); }   /* 跟電台頁頁名同一條縮放（10-25 第 2 輪評審：768～1024 寬文字頁 52px、電台頁 34～45px，主從顛倒） */
.doc p.kick { margin: 0 0 var(--space-12); font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* 跟各電台頁頭的小標同一款（10-25 第 2 輪評審：文字頁沒有本站的「台呼」） */
.doc .lead-text { margin: 0 0 var(--space-28); color: var(--ink); }
.doc p.lead-text { font-size: 22px; line-height: 1.6; text-wrap: balance; }   /* 頁名下第一句＝這頁的結論（10-25 評審：原本被 .doc p 壓成跟內文一樣 17px）；22px＝設計系統 item-title 的字級 */
.doc h2 { margin: var(--space-44) 0 var(--space-12); font: 700 26px/1.3 var(--font-body); color: var(--ink); text-wrap: balance; }
.doc p, .doc li { font-size: 17px; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.doc p { margin: 0 0 var(--space-12); }
.doc ul { margin: 0 0 var(--space-12); padding-left: var(--space-22); display: grid; gap: var(--space-8); }
/* 清單符號：瀏覽器預設的黑圓點換成跟頁首刻度同一種的短刻線（10-26 第 4 輪評審品味 4）；只管文字頁本文的清單，出處總表每首那種清單不動 */
.doc-in > ul, .doc-in > details > ul { list-style: none; }
.doc-in > ul > li, .doc-in > details > ul > li { position: relative; }
.doc-in > ul > li::before, .doc-in > details > ul > li::before { content: ""; position: absolute; left: calc(var(--space-22) * -1); top: .85em; width: var(--space-12); height: 2px; background: var(--ink-2); }
/* 外部連結：後面一個 ↗（shell.js 加），讀屏另外聽到「會離開本站」 */
/* 這一頁的小標清單（隱私頁）：手機在頁名下面一行字；寬螢幕放到右邊空著的地方、捲動時留在畫面上（只有位置固定，不加動態） */
.doc-toc { margin: 0 0 var(--space-28); font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.doc-toc b { font-weight: 700; color: var(--ink); }
.doc-toc ul { list-style: none; display: inline; margin: 0; padding: 0; }
.doc-toc li { display: inline; font-size: 15px; white-space: nowrap; }   /* 一項不從中間斷開（第 5 輪評審 M3：「外部／連結」） */
.doc-toc a { display: inline-block; padding-block: var(--space-10); }   /* 手機點擊高度 ≥44px（原本 21px） */
.doc-toc li:not(:last-child)::after { content: "・"; color: var(--ink-2); }   /* 分隔點放在前一項的尾巴（不斷行的那一段裡）：換行只會發生在點後面，點不會跑到行首；簡中轉換把它黏成「·」也照樣能換行（10-26 第 6 輪評審 B1：放在下一項前面時，簡中 9 項黏成一行、整頁撐到 1,300px） */
.doc .doc-toc a { color: var(--ink); }   /* 目錄是導覽，不用本文連結的紅字 */
/* 英日文頁（10-27 英日文接線實測）：一項就可能比手機一行長（英文「Music videos and YouTube links on the home page」320 寬超出 47px；
   日文「サイトを置いている場所（Cloudflare）」連分隔點 297px、320 寬只有 288px），不能整項不換行（日文照片語斷，shell.js 插的 <wbr>）；
   英文分隔改成「 · 」，點後面留一個空白當換行點；「On this page:」後面補一個空白。寬螢幕（1100 起）一項一行，照下面的規則不放分隔 */
@media (max-width: 1099px) {
  html:is([lang="en"], [lang="ja"]) .doc-toc li { white-space: normal; }
  html[lang="en"] .doc-toc li:not(:last-child)::after { content: "\00a0· "; }
  html[lang="en"] .doc-toc b::after { content: " "; }
}
@media (min-width: 1100px) {
  .doc-in:has(> .doc-toc) { max-width: none; display: grid; grid-template-columns: minmax(0, 40em) 13em; column-gap: var(--space-52); }
  .doc-in:has(> .doc-toc) > * { grid-column: 1; }
  .doc-in > .doc-toc { grid-column: 2; grid-row: 1 / span 80; align-self: start; position: sticky; top: calc(var(--space-52) + var(--space-28)); margin: 0; padding-left: var(--space-16); border-left: 1px solid var(--line); }
  .doc-toc b { display: block; margin-bottom: var(--space-8); }
  .doc-toc ul, .doc-toc li { display: block; }
  .doc-toc li:not(:last-child)::after { content: none; }
  .doc-toc li { padding-block: 0; }
  .doc-toc a { padding-block: var(--space-4); }
}
.doc b { font-weight: 700; }
.doc a { color: var(--red-ink); text-underline-offset: 3px; }
.doc .fine-print { color: var(--ink-2); }
.doc .doc-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.doc .doc-updated { margin-top: var(--space-44); padding-top: var(--space-14); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .doc { padding-block: var(--space-28); }
  .doc h1 { font-size: 34px; }   /* 手機各頁頁名統一 34px（10-25 評審：各頁 32／34／40／52px 不一） */
  .doc h2 { margin-top: var(--space-28); font-size: 22px; }
}
/* 收起來的一段（出處總表「本站怎麼判斷」，10-26 第 4 輪評審：375 寬整頁要在 12,000px 內、第一首歌早一點出現）：前面一個箭頭、打開時轉向，不加動畫。
   10-26 小事修正：小標原本放在開關（summary）裡，讀屏把開關當按鈕念、跳不到小標 → 小標放在開關上面，開關只寫「看這 4 條」，點擊高度 44px */
.doc-in > details > summary { display: flex; align-items: center; gap: var(--space-10); min-height: var(--tap-min); cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; color: var(--ink); }
@media (hover: hover) { .doc-in > details > summary:hover { text-decoration: underline; text-underline-offset: 4px; } }
.doc-in > details[open] > summary { margin-bottom: var(--space-8); }
.doc-in > details > summary::-webkit-details-marker { display: none; }
.doc-in > details > summary::before { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.doc-in > details[open] > summary::before { transform: translateY(2px) rotate(225deg); }
.doc h2.src-rule-h { margin-bottom: var(--space-4); }   /* 小標跟下面的「看這 4 條」是一組 */