/* 主題頁與地區頁共用樣式。與六張地圖、入口頁同一套 token。
   版面：刊頭 → 21:9 主圖＋標題 → 目錄 → 區塊（文字、圖、表、卡）→ 相關地圖 → 來源與圖片出處 → 頁尾 */
:root{
  --paper:#f4f5f2; --sheet:#ffffff; --paper-2:#e9eae5; --ink:#1b1f27; --ink-2:#5b6270; --ink-3:#8a909b; --line:#dfe2dc;
  --ai:#22365c; --cover:#1f3253; --shu:#c8463a; --glow:#f2b632; --tabe:#d0601a; --kin:#a8802f; --kinu:#2f5a48; --ok:#2e7d5b; --warn:#b2493a;
  --shadow:0 18px 40px -18px rgba(22,30,48,.35);
  --f-display:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --head-h:56px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12151b; --sheet:#1a1e26; --paper-2:#22262f; --ink:#e8eaee; --ink-2:#9aa1ae; --ink-3:#6c7381; --line:#2a303b;
    --ai:#8fa8d6; --cover:#141d31; --shu:#e0695b; --glow:#ffcc4d; --tabe:#f08a4b; --kin:#d6b26a; --kinu:#6fb39a; --ok:#6cc59a; --warn:#e3806f;
    --shadow:0 18px 40px -18px rgba(0,0,0,.7); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12151b; --sheet:#1a1e26; --paper-2:#22262f; --ink:#e8eaee; --ink-2:#9aa1ae; --ink-3:#6c7381; --line:#2a303b;
  --ai:#8fa8d6; --cover:#141d31; --shu:#e0695b; --glow:#ffcc4d; --tabe:#f08a4b; --kin:#d6b26a; --kinu:#6fb39a; --ok:#6cc59a; --warn:#e3806f;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15.5px/1.75 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--cover)}
a{color:var(--ai)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:2px}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.prose{max-width:720px}

/* 刊頭（內容由 site-nav.js 填入） */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--cover);color:#f4f5f2;border-bottom:1px solid rgba(255,255,255,.08)}
.mast .wrap{height:var(--head-h);display:flex;align-items:center;gap:16px}
.mast .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;white-space:nowrap}
.mast .brand b{font:700 16px/1 var(--f-display);letter-spacing:.12em}
.mast .right{margin-left:auto;font:400 12px var(--f-mono);color:rgba(255,255,255,.65);white-space:nowrap}
@media (max-width:640px){.mast .right{display:none}}

/* 主圖 */
.hero{position:relative;background:var(--cover);color:#fff;overflow:hidden}
.hero .ph{aspect-ratio:21/9;max-height:520px;width:100%;border-radius:0;background:var(--cover)}
.hero .ph img{opacity:.82}
.hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,50,83,.1) 30%,rgba(31,50,83,.88) 100%)}
.hero .text{position:absolute;left:0;right:0;bottom:0;padding-bottom:34px}
.hero .kicker{margin:0 0 10px;font:500 11.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;gap:14px;flex-wrap:wrap}
.hero h1{margin:0;font:900 clamp(32px,5.4vw,60px)/1.12 var(--f-display);letter-spacing:.06em;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero .lede{margin:14px 0 0;max-width:40em;font-size:16px;line-height:1.8;color:rgba(255,255,255,.85)}
.hero figcaption{position:absolute;right:12px;top:10px;font:400 11px var(--f-mono);color:rgba(255,255,255,.55);background:rgba(0,0,0,.25);padding:2px 8px;border-radius:4px}
@media (max-width:640px){.hero .ph{aspect-ratio:4/3}.hero .text{padding-bottom:22px}.hero .lede{font-size:14.5px}}

/* 目錄 */
.toc{display:flex;flex-wrap:wrap;gap:6px 18px;padding:18px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.toc a{text-decoration:none;color:var(--ink-2);display:inline-flex;gap:6px;align-items:baseline}
.toc a::before{content:counter(toc,decimal-leading-zero);counter-increment:toc;font:500 11px var(--f-mono);color:var(--kin)}
.toc{counter-reset:toc}
.toc a:hover{color:var(--ai)}

/* 區塊 */
.sec{padding-block:56px 8px;scroll-margin-top:calc(var(--head-h) + 12px)}
.sec+.sec{border-top:1px solid var(--line)}
.sec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sec-h h2{margin:0;font:700 clamp(22px,3vw,30px)/1.25 var(--f-display);letter-spacing:.08em;text-wrap:balance}
.sec-h .en{font:500 11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sec-h p{flex:0 0 100%;margin:0;color:var(--ink-2);max-width:66ch}
h3{font:700 19px/1.35 var(--f-display);letter-spacing:.06em;margin:28px 0 8px}
p{margin:0 0 12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.two>*{min-width:0}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* 圖片 */
.ph{position:relative;background:var(--paper-2);aspect-ratio:3/2;overflow:hidden;border-radius:10px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.wide{aspect-ratio:16/9}
.ph.is-error img{display:none}
.ph.is-error::after{content:attr(data-glyph);position:absolute;inset:0;display:grid;place-items:center;font:900 44px/1 var(--f-display);color:var(--kin);opacity:.5}
figure{margin:0}
figure.ph{aspect-ratio:auto;background:none;border-radius:0}
figure.ph .ph{margin:0}
figure.ph figcaption,.cap{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
figure.ph figcaption .credit,.cap .credit{color:var(--ink-3);font-family:var(--f-mono);font-size:11px;margin-left:6px}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:18px 0}
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;background:var(--sheet);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card .ph{border-radius:0}
.card .body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:4px}
.card .k{font:500 10.5px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--kin)}
.card h3,.card h4{margin:0;font:700 17px/1.35 var(--f-display);letter-spacing:.04em}
.card p{margin:0;font-size:13.5px;color:var(--ink-2)}
.card .meta{font:500 12px var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 18px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-bottom:2px solid var(--ink)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:hover td{background:var(--sheet)}
.tbl-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tbl-wrap .tbl{min-width:560px}

/* 數字與提示 */
.facts{display:flex;flex-wrap:wrap;gap:0;margin:14px 0}
.facts div{padding:0 22px;border-left:1px solid var(--line)}
.facts div:first-child{padding-left:0;border-left:0}
.facts dt{font-size:11.5px;color:var(--ink-3);letter-spacing:.1em}
.facts dd{margin:0;font:500 20px/1.4 var(--f-mono);font-variant-numeric:tabular-nums}
.facts dd small{font:400 12px var(--f-body);color:var(--ink-2);margin-left:4px}
.note{border-left:3px solid var(--kin);background:var(--sheet);padding:12px 16px;border-radius:0 8px 8px 0;font-size:14px;margin:14px 0}
.note.warn{border-color:var(--warn)}
.note b{font-family:var(--f-display);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);color:var(--ink-2)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 時間軸（行程） */
.tl{list-style:none;margin:12px 0;padding:0}
.tl li{display:grid;grid-template-columns:64px 1fr;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.tl time{font:500 13px var(--f-mono);color:var(--kin);padding-top:2px}
.tl b{font-size:15.5px}
.tl p{margin:0;font-size:13.5px;color:var(--ink-2)}
.tl .mv{grid-column:2;font:400 12px var(--f-mono);color:var(--ink-3)}

/* 相關地圖 */
.related{margin-top:48px;padding-top:28px;border-top:2px solid var(--ink)}
.related h2{margin:0 0 14px;font:700 20px var(--f-display);letter-spacing:.1em}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{font-size:13.5px;text-decoration:none;color:var(--ink);padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--sheet)}
.links a:hover{border-color:var(--ai);color:var(--ai)}
.links a.main{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 頁尾 */
.sources{margin-top:40px;font-size:13px;color:var(--ink-2)}
.sources h2,.credits h2{font:700 15px var(--f-display);letter-spacing:.12em;margin:0 0 6px}
.sources ul{margin:0;padding-left:1.2em}
.credits{margin-top:24px;font-size:13px;color:var(--ink-2)}
footer.foot{margin-top:40px;padding-block:24px 56px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 24px}
footer.foot a{color:inherit}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}