/* 依《疫情資料視覺化指引》v1.1 設計 token（主色 Sage #739A6D、中性灰帶綠、Noto Sans/Serif TC） */
:root {
  --p-50:#F6F9F6; --p-100:#E8EEE7; --p-200:#D1DECF; --p-300:#B4C9B1; --p-400:#91B08C; --p-500:#739A6D;
  --p-600:#5D7F58; --p-700:#496345; --p-800:#374C34; --p-900:#253423;
  --n-0:#FFFFFF; --n-50:#FAFAFA; --n-100:#F2F3F1; --n-200:#E4E7E4; --n-300:#CACFC9; --n-400:#A2ABA0;
  --n-500:#7A8778; --n-600:#5D675B; --n-700:#444C43; --n-800:#2C312B; --n-900:#181B18;
  --slate:#587A9D; --mustard:#C8A041; --mustard-line:#A8821F; --teal:#49888D;
  --alert:#BE373C; --caution:#D2962D; --info:#477A9E;
  --serif:'Noto Serif TC', serif; --sans:'Noto Sans TC', 'Noto Sans', sans-serif; --mono:'JetBrains Mono', monospace;
  --maxw:1180px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); color:var(--n-800); background:var(--n-50); line-height:1.7; font-size:15px; -webkit-font-smoothing:antialiased; }
a { color:var(--p-600); }
.num, td.num, th.num, .kpi .value, .tbl td, .forecast-table td { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* 頁首 */
.masthead { background:var(--n-900); color:var(--n-100); border-bottom:4px solid var(--p-500); }
.masthead-inner { max-width:var(--maxw); margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.masthead-left { display:flex; align-items:center; gap:14px; }
.crest { width:36px; height:36px; border:1.5px solid var(--p-400); display:grid; place-items:center; font-family:var(--serif); font-weight:700; color:var(--p-300); font-size:14px; letter-spacing:1px; }
.masthead-title { font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.4px; }
.masthead-title small { display:block; font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--n-400); letter-spacing:2px; margin-top:2px; }
.masthead-right { display:flex; gap:22px; font-size:12.5px; letter-spacing:1px; }
.masthead a { color:var(--n-200); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; }
.masthead a:hover, .masthead a.active { border-color:var(--p-400); color:var(--n-0); }
a.masthead-left, a.masthead-left:hover { border:none; padding:0; color:inherit; }
/* 第二層：疾病內的頁面 */
.subnav { background:var(--n-0); border-bottom:1px solid var(--n-200); }
.subnav-inner { max-width:var(--maxw); margin:0 auto; padding:0 32px; display:flex; align-items:stretch; gap:2px; overflow-x:auto; }
.subnav-title { font-family:var(--serif); font-weight:700; font-size:15px; color:var(--n-900); padding:11px 18px 11px 0; margin-right:8px; border-right:1px solid var(--n-200); white-space:nowrap; }
.subnav a { padding:11px 14px; font-size:13.5px; color:var(--n-600); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.subnav a:hover { color:var(--n-900); }
.subnav a.active { color:var(--n-900); font-weight:600; border-bottom-color:var(--p-500); }
/* 總覽頁 */
.dz-card { display:flex; flex-direction:column; gap:10px; min-width:0; }
.grid-2 > .dz-card .tbl-wrap, .dz-card .chart-box { max-width:100%; overflow-x:auto; }
.dz-card h3 { display:flex; align-items:baseline; gap:10px; font-size:20px; }
.dz-card h3 a { color:var(--n-900); text-decoration:none; }
.dz-card .dz-meta { font-size:12px; color:var(--n-500); }
.dz-card .dz-headline { font-size:14px; line-height:1.7; color:var(--n-800); }
.dz-card .dz-nums { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; border-top:1px solid var(--n-200); padding-top:10px; }
.dz-card .dz-nums .label { font-size:11.5px; color:var(--n-500); }
.dz-card .dz-nums .value { font-size:20px; font-weight:600; color:var(--n-900); font-variant-numeric:tabular-nums; }
.dz-card .dz-nums .value small { font-size:12px; font-weight:400; color:var(--n-500); margin-left:2px; }
.dz-card .dz-links { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; margin-top:auto; padding-top:6px; }
.status { display:inline-block; font-size:11.5px; padding:2px 8px; border-radius:2px; border:1px solid var(--n-300); color:var(--n-600); font-weight:500; }
.status.on { border-color:var(--alert); color:var(--alert); }
.status.watch { border-color:var(--caution); color:#9a6a12; }
.status.off { border-color:var(--p-400); color:var(--p-700); }

main { max-width:var(--maxw); margin:0 auto; padding:36px 32px 64px; }
.hero-kicker { font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--p-600); text-transform:uppercase; margin-bottom:10px; }
.hero-kicker::before { content:"—"; margin-right:12px; color:var(--p-400); }
h1.page-title, h1.report-title { font-family:var(--serif); font-size:34px; font-weight:700; line-height:1.25; color:var(--n-900); letter-spacing:-.5px; margin-bottom:10px; }
h1 em { font-style:normal; color:var(--p-600); font-weight:600; }
.lead { color:var(--n-700); max-width:820px; margin-bottom:22px; font-size:15.5px; }
.meta-strip { display:flex; flex-wrap:wrap; gap:10px 28px; font-size:12.5px; color:var(--n-600); margin-bottom:28px; }
.meta-strip b { color:var(--n-800); font-weight:600; }

/* 區段 */
section { margin-bottom:44px; }
.section-head { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--n-300); }
.section-num { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--p-600); }
.section-head h2 { font-family:var(--serif); font-size:22px; font-weight:700; color:var(--n-900); }
.section-head .en { font-family:var(--serif); font-size:13px; color:var(--n-500); margin-left:auto; }

/* 卡片與格線 */
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px; }
.card { background:var(--n-0); border:1px solid var(--n-200); border-radius:4px; padding:18px 20px 14px; }
.card h3 { font-family:var(--sans); font-size:16px; font-weight:600; color:var(--n-900); margin-bottom:2px; }
.card .sub { font-size:12.5px; color:var(--n-600); margin-bottom:10px; }
.chart-box { position:relative; height:300px; }
.chart-box.tall { height:360px; }
.chart-box.short { height:240px; }
.card.wide { margin-bottom:20px; }
.source { font-size:11px; color:var(--n-500); margin-top:8px; }

/* KPI */
.kpi-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid var(--n-200); border-bottom:1px solid var(--n-200); margin:6px 0 30px; padding:18px 0; }
.kpi { padding:0 22px 0 0; border-right:1px solid var(--n-200); margin-right:22px; }
.kpi:last-child { border-right:none; margin-right:0; }
.kpi .label { font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--n-500); text-transform:uppercase; margin-bottom:6px; }
.kpi .value { font-family:var(--sans); font-size:28px; font-weight:600; color:var(--n-900); line-height:1.15; font-variant-numeric:normal; }
.kpi .value small { font-size:14px; font-weight:500; color:var(--n-600); margin-left:4px; }
.kpi .sub { font-size:12px; color:var(--n-600); margin-top:4px; }
.kpi .delta { font-size:12.5px; margin-top:4px; color:var(--n-700); }
.kpi .delta .arrow { font-weight:700; }
.badge { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:1.2px; padding:2px 7px; border:1px solid var(--n-300); border-radius:2px; color:var(--n-600); vertical-align:middle; margin-left:6px; }
.badge.cny { border-color:var(--mustard); color:var(--mustard-line); }
.badge.verified { border-color:var(--p-400); color:var(--p-700); }
.badge.alert { border-color:var(--alert); color:var(--alert); }

/* 控制列（放所有圖表上方的一列） */
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; background:var(--n-0); border:1px solid var(--n-200); border-radius:4px; padding:12px 18px; margin-bottom:22px; }
.controls label { font-size:12.5px; color:var(--n-600); margin-right:6px; }
.controls select, .seg-btn { font-family:var(--sans); font-size:13px; color:var(--n-800); background:var(--n-0); border:1px solid var(--n-300); border-radius:3px; padding:5px 10px; }
.controls select:focus, .seg-btn:focus { outline:2px solid var(--p-300); outline-offset:1px; }
.seg-group { display:inline-flex; gap:0; }
.seg-btn { cursor:pointer; margin-left:-1px; }
.seg-btn.active { background:var(--p-100); border-color:var(--p-500); color:var(--p-800); font-weight:600; }

/* 表格 */
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--n-0); border:1px solid var(--n-200); }
.tbl th, .tbl td { padding:8px 12px; border-bottom:1px solid var(--n-200); text-align:left; vertical-align:middle; }
.tbl th { font-size:11.5px; font-weight:600; color:var(--n-600); letter-spacing:.3px; background:var(--n-100); white-space:nowrap; }
.tbl th.sortable { cursor:pointer; }
.tbl th.sortable:hover { color:var(--p-700); }
.tbl th.sorted::after { content:" ▾"; color:var(--p-600); }
.tbl td.num, .tbl th.num { text-align:right; }
.tbl tr.best td { background:var(--p-50); }
.tbl tr.best td:first-child { border-left:3px solid var(--p-500); }
.tbl tr.baseline td { color:var(--n-600); }
.tbl .bar { display:inline-block; height:9px; background:var(--p-300); vertical-align:middle; margin-right:8px; border-radius:1px; }
.tbl tr.baseline .bar { background:var(--n-300); }
.tbl.compact { font-size:13px; }
#lb td:first-child { min-width:260px; }
#lb th:first-child { min-width:260px; }
.tbl-wrap { overflow-x:auto; }
.forecast-table td:first-child { white-space:nowrap; }

/* 圖例說明、註腳 */
.note { font-size:13px; color:var(--n-700); background:var(--p-50); border-left:3px solid var(--p-400); padding:10px 14px; margin:14px 0; }
.findings { padding-left:20px; }
.findings li { margin-bottom:8px; }
footer.site-footer, footer.report-footer { max-width:var(--maxw); margin:0 auto; padding:24px 32px 40px; font-size:12px; color:var(--n-500); border-top:1px solid var(--n-200); }

/* 報告頁 */
main.report { max-width:880px; }
main.report section h2 { font-family:var(--serif); font-size:20px; color:var(--n-900); margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--n-300); }
main.report p { margin-bottom:10px; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .two-col { grid-template-columns:1fr; }
  .kpi-strip { grid-template-columns:repeat(2, 1fr); gap:16px; }
  .kpi { border-right:none; margin-right:0; }
  main { padding:24px 18px 48px; }
  .masthead-inner { padding:12px 18px; flex-direction:column; align-items:flex-start; gap:10px; }
  .masthead-right { gap:16px; overflow-x:auto; max-width:100%; }
  .controls select { max-width:calc(100vw - 40px); }
  code { word-break:break-all; }
  main.report table.tbl, .card > table.tbl { display:block; overflow-x:auto; max-width:100%; }
  .two-col > *, .grid-2 > * { min-width:0; }
  .subnav-inner { padding:0 18px; }
  .dz-card .dz-nums { grid-template-columns:repeat(2, 1fr); }
  h1.page-title, h1.report-title { font-size:26px; }
}
@media print {
  .masthead, .subnav, .controls, .masthead-right { display:none; }
  body { background:#fff; font-size:12px; }
  main.report { max-width:100%; padding:0; }
  .card { break-inside:avoid; }
  .chart-box { height:230px; }
  a { color:inherit; text-decoration:none; }
}

/* 每週預測頁最上方的趨勢判讀 */
.brief { margin: 6px 0 30px; }
.brief-headline { font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.6; color:var(--p-900); background:var(--p-50); border-left:4px solid var(--p-500); padding:14px 18px; margin-bottom:16px; }
.brief-list { font-size:14px; line-height:1.75; }
.brief-list li { margin-bottom:8px; }
.brief-caveats { list-style:none; padding:10px 0 0; margin-top:10px; border-top:1px solid var(--n-200); font-size:12px; color:var(--n-600); }
.brief-caveats li { margin-bottom:4px; padding-left:14px; text-indent:-14px; }
.brief-caveats li::before { content:"※ "; color:var(--n-400); }