/* 儀表板：科學期刊風格（白紙、襯線標題、圖表編號） */
:root {
  --paper: #fbfaf7; --white: #ffffff; --ink: #1a1a1a; --text: #3d3a35; --muted: #5c5850;
  --rule: #d8d4cc; --soft: #ece8e0; --navy: #1f3a5f; --red: #9f1d20;
  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans: "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: var(--red); text-decoration: none; font-weight: 500; }
a:hover { color: #6e1416; }

.masthead { max-width: 1200px; margin: 0 auto; padding: 18px 16px 12px; }
.masthead > * { margin: 0; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.topline nav { display: flex; gap: 14px; }
.topline nav a { padding: 10px 0; }
.masthead h1 { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.25; margin: 2px 0 4px; }
.meta { font-size: 13px; color: var(--muted); padding-bottom: 10px; border-bottom: 2px solid var(--ink); }

main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 48px;
  display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .wide { grid-column: 1 / -1; }
}
.col { display: grid; gap: 22px; align-content: start; min-width: 0; }

figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
figcaption, caption { font-size: 12.5px; line-height: 1.65; color: var(--muted); text-align: left; }
figcaption b, caption b { color: var(--ink); }
canvas { display: block; width: 100%; background: var(--white); border: 1px solid var(--rule); }
.map { aspect-ratio: 3 / 2; }
.raster { height: 300px; }
.timeline { height: 64px; }
.errplot { height: 120px; }
.compass-fig { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; }
.compass { width: 120px; height: 120px; border: 0; background: none; }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text); }
.legend i { display: inline-block; width: 14px; height: 10px; margin-right: 5px; vertical-align: -1px; }

.now { border-top: 1px solid var(--rule); padding-top: 12px; }
.now .label { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.behavior { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--red); margin: 2px 0; }
.sub { font-size: 13px; color: var(--text); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data caption { padding-bottom: 6px; }
table.data tbody tr:first-child td { border-top: 1.5px solid var(--ink); }
table.data td, table.data th { border-top: 1px solid var(--rule); padding: 8px 0; text-align: left; }
table.data tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
table.data .num { text-align: right; font-family: var(--serif); font-size: 16px; font-variant-numeric: tabular-nums; }
table.nodes thead th { border-top: 1.5px solid var(--ink); font-size: 12px; font-weight: 500; color: var(--muted); }
table.nodes thead + tbody tr:first-child td { border-top: 1px solid var(--rule); }
table.nodes td { padding: 6px 8px 6px 0; vertical-align: middle; }
table.nodes .num { font-size: 14px; padding-right: 0; }
table.nodes .region { color: var(--muted); font-size: 12.5px; }
table.nodes .barcol { width: 30%; }
table.nodes tr.row { cursor: pointer; }
table.nodes tr.row:hover td { background: #f4f1ea; }
table.nodes .group td { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 14px; border-top: 0; }
table.nodes .detail td { font-size: 12.5px; line-height: 1.6; color: var(--text); background: #f4f1ea; padding: 8px 10px; }
.spk { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--soft); vertical-align: 1px; }
.spk.on { background: var(--red); }
.bar { display: block; height: 6px; background: var(--soft); }
.bar i { display: block; height: 100%; width: 0; background: var(--navy); }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin: 10px 0 0; }

@media (max-width: 599px) {
  table.nodes .region { display: none; }
  table.nodes .barcol { width: 34%; }
  .masthead h1 { font-size: 24px; }
}