/* 詐騙案件簿 — 站台樣式（定案版，見《37 版面定案》）
   從 prototype/story.html 抽出，移除原型控制台與被否決的模式。
   保留 data-note 屬性於 HTML，但不顯示——右側邊注是備用方案，開啟只需改本檔。 */

:root{
  /* 複寫聯：白聯紙、公文藍、桃紅副聯、鉛筆批註 */
  --paper:#E9EBE6;
  --sheet:#FBFBF8;
  --card:#FFFFFF;
  --ink:#171E26;
  --ink-soft:#4A5560;
  --ink-faint:#8C949C;
  --rule:#D6D9D2;

  --c-jud:#23547F;   /* 〔判〕判決逐字引文 */
  --c-rep:#A3405F;   /* 〔165〕報案自述 */
  --c-ed:#66705C;    /* 〔編〕本專案詮釋 */
  --alarm:#B3382C;   /* 未攔截，全頁只用一次 */
  --rep-tint:6%;     /* 165 區塊底色濃度，暗色需要更濃才看得出 */

  --sans:"PingFang TC","Noto Sans CJK TC","Heiti TC",-apple-system,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Courier New",monospace;

  --measure:33rem;
  --gutter:7rem;
}

/* 暗色：不是把亮色反過來，是換一組色票——夜裡看同一份卷宗。
   紙面仍比桌面亮一階，三個來源色各自提亮到暗底上還分得出來。
   tokens 寫兩次是刻意的：媒體查詢跟隨系統，[data-theme] 讓手動切換兩個方向都蓋得過。 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111519;
    --sheet:#181D23;
    --card:#1F252C;
    --ink:#DCE2E7;
    --ink-soft:#A5AFB8;
    --ink-faint:#707A84;
    --rule:#2D343C;
    --c-jud:#7FADD8;
    --c-rep:#D98CA8;
    --c-ed:#9DAC93;
    --alarm:#E4796B;
    --rep-tint:12%;
  }
}
:root[data-theme="dark"]{
  --paper:#111519;
  --sheet:#181D23;
  --card:#1F252C;
  --ink:#DCE2E7;
  --ink-soft:#A5AFB8;
  --ink-faint:#707A84;
  --rule:#2D343C;
  --c-jud:#7FADD8;
  --c-rep:#D98CA8;
  --c-ed:#9DAC93;
  --alarm:#E4796B;
  --rep-tint:12%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* 字體定案：全站黑體。明體只有 macOS/iOS 拿得到，其他平台 fallback 不受控。 */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.9;letter-spacing:.01em;
  text-rendering:optimizeLegibility;
}

.sheet{
  max-width:calc(var(--gutter) + var(--measure) + 8rem);
  margin:0 auto;background:var(--sheet);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  padding:4.5rem 3rem 6rem;min-height:100vh;
}
.col{max-width:var(--measure);margin-left:var(--gutter)}

/* ---------- 刊頭 ---------- */
.masthead{
  display:flex;align-items:baseline;gap:.9rem;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;
  color:var(--ink-faint);
  padding-bottom:1.4rem;margin-bottom:3.2rem;border-bottom:1px solid var(--rule);
}
.masthead a{color:var(--ink-soft);text-decoration:none;font-weight:600;letter-spacing:.22em}
.masthead a:hover{color:var(--c-jud)}
.masthead .line-tag{margin-left:auto;font-family:var(--mono);letter-spacing:.06em}

.draft-banner{
  background:var(--alarm);color:#fff;font-size:.72rem;letter-spacing:.1em;
  padding:.5rem 1rem;text-align:center;
}

h1{
  font-size:clamp(2rem,5.2vw,2.9rem);line-height:1.4;letter-spacing:-.01em;
  font-weight:600;margin:0 0 1.6rem;text-wrap:balance;
}

/* ---------- 段落 ---------- */
section{position:relative;margin:3.6rem 0 0}
.sec-label{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.5em;font-weight:600;
  color:var(--ink);
  position:absolute;left:calc(-1 * var(--gutter));top:.35rem;
  writing-mode:vertical-rl;
  border-right:2px solid var(--ink);padding:.2rem .45rem .2rem 0;
}
.sec-label span{display:block;font-size:.62rem;letter-spacing:.2em;
  color:var(--ink-faint);font-weight:400;margin-top:.8rem}
p{margin:0 0 1.5rem}
strong{font-weight:600}

blockquote{
  margin:1.9rem 0;padding:.1rem 0 .1rem 1.2rem;
  border-left:2px solid var(--rule);
  font-size:.97rem;line-height:1.9;color:var(--ink);
}

/* 只標例外（《37》第二節改版）：〔判〕是預設不標，〔165〕與〔編〕整塊隔開。
   連續的同源段落包成一塊、標籤只掛一次，讀者不必解讀任何符號。 */
aside{margin:2rem 0}
aside.rep{
  padding:.9rem 1.1rem 1rem;
  border-left:2px solid var(--c-rep);
  background:color-mix(in srgb,var(--c-rep) var(--rep-tint),transparent);
}
aside.ed{
  padding:.1rem 0 .1rem 1.2rem;
  border-left:2px dashed color-mix(in srgb,var(--c-ed) 60%,transparent);
}
.src-label{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.1em;
  margin:0 0 .7rem;
}
aside.rep .src-label{color:var(--c-rep)}
aside.ed .src-label{color:var(--c-ed)}
aside > :last-child{margin-bottom:0}
/* 區塊已經把來源講清楚了，裡面的引文不必再畫一條線 */
aside.rep blockquote{border-left:none;padding-left:0;margin:0}
aside.ed blockquote{margin:1.2rem 0}

ul{margin:1.4rem 0;padding-left:1.2rem}
li{margin-bottom:.9rem}

/* ---------- 來源標記：行內方括號 ---------- */
[data-src="判"]{--c:var(--c-jud)}
[data-src="165"]{--c:var(--c-rep)}
[data-src="編"]{--c:var(--c-ed)}
.src{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.02em;
  color:var(--c,var(--c-jud));
  border:1px solid color-mix(in srgb,var(--c,var(--c-jud)) 40%,transparent);
  border-radius:2px;padding:.1em .3em;margin-left:.25em;
  vertical-align:.18em;white-space:nowrap;user-select:none;
}
.src[data-t="判"]{--c:var(--c-jud)}
.src[data-t="165"]{--c:var(--c-rep)}
.src[data-t="編"]{--c:var(--c-ed)}

/* ---------- 攔截點：標示，不可點（未達開通門檻） ---------- */
.point{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;
  margin:0 0 2.6rem;padding:.7rem .9rem;
  border:1px solid var(--rule);background:var(--card);
}
.point-k{color:var(--ink-faint);letter-spacing:.16em;font-size:.66rem}
.chip{border:1px solid var(--ink-soft);padding:.22em .6em;color:var(--ink);border-radius:2px}
.chip.miss{border-color:var(--alarm);color:var(--alarm)}

/* ---------- 出處 ---------- */
.colophon{
  margin:4rem 0 0;padding-top:1.6rem;border-top:1px solid var(--ink);
  font-family:var(--sans);font-size:.78rem;line-height:1.85;color:var(--ink-soft);
}
.colophon h2{font-size:.72rem;letter-spacing:.24em;margin:0 0 1rem;color:var(--ink);font-weight:600}
.colophon dl{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem 1rem;margin:0}
.colophon dt{color:var(--ink-faint);letter-spacing:.08em}
.colophon dd{margin:0}
.colophon dd a{color:var(--ink-soft)}
.colophon dd a:hover{color:var(--c-jud)}
.verify-mark{display:inline-flex;align-items:center;gap:.4rem;color:var(--c-jud);font-size:.74rem}

/* ---------- 全站頁尾：顯名聲明與關於連結（《40》第六節） ---------- */
.site-foot{
  margin:3.5rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.7rem;line-height:1.8;color:var(--ink-faint);
}
.site-foot p{margin:0 0 .7rem}
.site-foot a{color:var(--ink-soft)}
.site-foot a:hover{color:var(--c-jud)}

/* ---------- 首頁 ---------- */
.lede{font-size:1.05rem;line-height:1.85;color:var(--ink-soft);
  margin:0 0 3rem;padding-left:1rem;border-left:2px solid var(--rule)}
.line-head{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;font-weight:600;
  margin:3rem 0 .4rem;padding-bottom:.5rem;border-bottom:1px solid var(--ink);
}
.line-head em{font-style:normal;color:var(--ink-faint);font-weight:400;letter-spacing:.06em}
.toc{list-style:none;margin:0;padding:0}
.toc li{margin:0;border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:1.1rem .2rem;color:var(--ink);text-decoration:none}
.toc a:hover{background:var(--card)}
.toc b{display:block;font-size:1.05rem;font-weight:600;margin-bottom:.35rem}
.toc span{font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--ink-faint)}
.toc .miss{color:var(--alarm)}

a:focus-visible,button:focus-visible{outline:2px solid var(--c-jud);outline-offset:2px}

@media (max-width:760px){
  :root{--gutter:0rem;--measure:100%}
  body{font-size:16px}
  .sheet{padding:2.5rem 1.25rem 4rem}
  .sec-label{position:static;writing-mode:horizontal-tb;display:inline-block;
    border-right:none;border-bottom:2px solid var(--ink);padding:0 0 .3rem;margin-bottom:1.2rem}
  .sec-label span{display:inline;margin-left:.6rem}
  .colophon dl{grid-template-columns:1fr;gap:.2rem}
  .colophon dt{margin-top:.8rem}
}

/* ---------- 全站導覽（《40》六完成後的站台改版，2026-08-13） ----------
   sticky 但不喧賓奪主：刊頭以下的閱讀區維持原本的欄寬與留白。
   A／B 線指向首頁錨點，不做獨立中間頁（內容單薄的頁面對 SEO 是負分）。 */
.site-nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding:.85rem max(1.5rem,calc((100vw - var(--measure) - var(--gutter) - 8rem)/2 + 3rem));
  background:color-mix(in srgb,var(--sheet) 92%,transparent);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
}
.site-nav .brand{
  font-weight:700;letter-spacing:.2em;color:var(--ink);text-decoration:none;
  font-size:.82rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.55rem;
}
.site-nav .brand img{display:block;flex:none}
.site-nav .brand:hover{color:var(--c-jud)}
.nav-links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-left:auto}
.nav-links a{color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--c-jud)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--c-jud)}
/* 副標是註解不是並列項：靠字級與顏色壓低，不靠標點或括號 */
.nav-sub{margin-left:.5em;font-size:.92em;font-weight:400;
  letter-spacing:.02em;color:var(--ink-faint)}
.nav-links a:hover .nav-sub{color:var(--ink-soft)}

/* 有了 nav 之後，刊頭只留頁別與線別 */
.site-nav + .sheet{padding-top:3rem}

/* ---------- 首頁：用意 ---------- */
/* 不加左邊框——sec-label 的直排框線已經是這一段的左界，兩條會打架 */
.purpose{margin:0 0 3rem;padding:1.6rem 1.8rem;background:var(--card);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.purpose-lead{margin:0;font-size:.94rem;line-height:1.85;color:var(--ink)}
.purpose ul{list-style:none;padding:0;margin:1.1rem 0 0}
.purpose li{margin:0 0 .95rem;padding-left:1.1rem;position:relative;
  font-size:.94rem;line-height:1.85;color:var(--ink-soft)}
.purpose li:last-child{margin-bottom:0}
.purpose li::before{content:"—";position:absolute;left:0;color:var(--ink-faint)}
.purpose li b{color:var(--ink);font-weight:600}
.purpose .who{margin:1.3rem 0 0;padding-top:1.2rem;
  border-top:1px solid var(--rule);
  font-size:.94rem;line-height:1.85;color:var(--ink-soft)}
.purpose .who b{color:var(--ink);font-weight:600}
.purpose .more{margin:1.1rem 0 0;font-size:.86rem}
.purpose .more a{color:var(--c-jud);text-decoration:none}
.purpose .more a:hover{text-decoration:underline}

/* ---------- 首頁：兩張線卡（清單本身在 /a/ 與 /b/） ---------- */
.line-card{
  display:block;text-decoration:none;color:inherit;
  margin:0 0 1.4rem;padding:1.5rem 1.7rem;
  border:1px solid var(--rule);border-left:3px solid var(--c-jud);
  background:var(--sheet);transition:background .15s,border-color .15s;
}
.line-card:hover{background:var(--card);border-color:var(--c-jud)}
.line-card h2{
  font-family:var(--sans);font-size:1.05rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink);margin:0;display:flex;align-items:baseline;gap:.7rem;
}
.line-card h2 em{font-style:normal;font-size:.88rem;font-weight:400;
  letter-spacing:.04em;color:var(--ink-soft)}
.line-card-sub{margin:.5rem 0 0;font-size:.9rem;line-height:1.8;color:var(--ink-soft)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:1rem 0 0}
.chips li{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.03em;color:var(--ink-soft);
  border:1px solid var(--rule);border-radius:2px;padding:.22rem .55rem;
  display:flex;align-items:center;gap:.35rem;
}
.chips li span{color:var(--ink-faint);font-size:.9em}
.line-card-go{margin:1rem 0 0;font-family:var(--sans);font-size:.8rem;
  letter-spacing:.06em;color:var(--c-jud)}

/* ---------- A／B 線頁 ---------- */
h1 .line-sub{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:.9rem;font-weight:400;letter-spacing:.1em;color:var(--ink-soft);
  margin-top:.6rem;
}
.line-switch{margin:3rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.86rem;letter-spacing:.04em}
.line-switch a{color:var(--c-jud);text-decoration:none}
.line-switch a:hover{text-decoration:underline}

/* ---------- 線頁：cluster 分組 ---------- */
.counts{font-size:.86rem;color:var(--ink-soft);margin:0 0 3rem;line-height:1.9}
.counts strong{color:var(--ink);font-weight:600}
.line-block{margin-bottom:4rem}
.cluster{margin:0 0 2.4rem}
.cluster-head{
  font-size:.9rem;font-weight:600;letter-spacing:.04em;color:var(--ink);
  margin:0 0 .2rem;padding-top:1.4rem;border-top:1px solid var(--rule);
}
.cluster-head span{
  display:block;font-size:.72rem;font-weight:400;letter-spacing:.02em;
  color:var(--ink-faint);margin-top:.25rem;
}
.cluster .toc{margin-top:.7rem}
.cluster .toc li{border-bottom:none}
.cluster .toc a{padding:.55rem .2rem .55rem .9rem;border-left:2px solid var(--rule)}
.cluster .toc a:hover{border-left-color:var(--c-jud);background:var(--card)}
.cluster .toc b{font-size:.98rem;margin-bottom:.2rem}

@media (max-width:720px){
  .site-nav{padding:.7rem 1.1rem;gap:.8rem}
  .nav-links{gap:1rem;font-size:.74rem}
  .nav-sub{display:none}   /* nav 是 sticky，換行會長期佔用螢幕 */
  .col{margin-left:0}
  .sheet{padding:2.5rem 1.2rem 4rem}
  .purpose{padding:1.2rem 1.1rem}
}

/* podcast 單集卡：與 .line-card 同一套視覺，但不是連結（播放器要能點） */
.ep{
  border-top:1px solid var(--rule);padding:1.6rem 0 1.8rem;
}
.ep h2{
  font-size:1.05rem;line-height:1.5;margin:0 0 .3rem;
  display:flex;gap:.7rem;align-items:baseline;
}
.ep h2 span{
  flex:none;font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint);
  border:1px solid var(--rule);border-radius:2px;padding:.1rem .35rem;
}
.ep-meta{font-size:.76rem;color:var(--ink-faint);margin:0 0 .8rem}
.ep audio{width:100%;height:36px;margin:0 0 .9rem}
.ep-sum{font-size:.92rem;line-height:1.85;margin:0 0 .6rem}
.ep .more{margin:0}

/* 平台收聽入口：文字按鈕，不掛各家 logo——那是他們的商標資產、用法有規範，
   而且全站唯一的圖是 nav 那顆 favicon，塞三顆彩色標誌會把文件感變成落地頁 */
.subs{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0}
.sub-btn{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;
  text-decoration:none;color:var(--ink);background:var(--sheet);
  border:1px solid var(--rule);border-radius:2px;padding:.45rem .95rem;
  transition:background .15s,border-color .15s,color .15s;
}
.sub-btn:hover{background:var(--card);border-color:var(--c-jud);color:var(--c-jud)}

/* 首頁的 podcast 入口：比線卡低一階的視覺重量——它不是這一頁的主要去處 */
.pod-card{
  display:flex;align-items:center;gap:1rem;text-decoration:none;
  border:1px solid var(--rule);border-radius:3px;padding:.9rem 1.1rem;
  margin:1.6rem 0 0;color:inherit;
}
.pod-card:hover{background:var(--card);border-color:var(--c-jud)}
.pod-card img{flex:none;border-radius:2px;display:block}
.pod-card span{display:block}
.pod-card b{display:block;font-size:.95rem;margin-bottom:.2rem}
.pod-card em{font-style:normal;font-size:.82rem;color:var(--ink-faint);line-height:1.7}
.pod-go{margin-left:auto;flex:none;font-size:.8rem;color:var(--ink-faint)}
@media (max-width:720px){ .pod-go{display:none} }