:root {
  color-scheme: light;
  --ink: #16384a;
  --muted: #647986;
  --line: #d7e1e5;
  --paper: #f4f7f8;
  --panel: #ffffff;
  /* The masthead band is Claude's report ground (ivory #FAF9F5, the
     --app-claude-ivory token the Claude Code extension itself ships), with the
     Claude icon terracotta as its base edge so the band still separates from the
     page below. Everything drawn on the band reads from these tokens. */
  --masthead-bg: #FAF9F5;
  --masthead-divider: #D97757;
  --masthead-ink: #16384a;
  --masthead-ink-soft: #3D5260;
  --masthead-line: rgba(22, 56, 74, .22);
  --masthead-badge-bg: rgba(22, 56, 74, .06);
  --masthead-chip-bg: #16384a;
  --masthead-chip-ink: #FAF9F5;
  /* The 系統合計 marker keeps its gold; it identifies a category, not the band. */
  --system-marker: #C89B3C;
  --accent: #087c80;
  --accent-soft: #e5f3f2;
  /* 建模中心可展開說明框（參數說明、權威來源與固定模型邊界）的標題底：淺綠。 */
  --explanation-summary-bg: #e6f4ea;
  --explanation-summary-bg-hover: #d5ebdc;
  --reference: #d18b22;
  --reference-soft: #fff4df;
  --danger: #b64236;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 34px clamp(28px, 4vw, 72px) 28px;
  color: var(--masthead-ink);
  background: var(--masthead-bg);
  border-bottom: 4px solid var(--masthead-divider);
}

.masthead--compact {
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
.masthead-title-row { display: flex; align-items: center; gap: 18px; min-width: 0; }
.masthead-title-row h1 { white-space: nowrap; }
.masthead--compact .masthead-actions { display: flex; align-items: center; gap: 12px; }
.masthead--compact .status-pill[hidden] { display: none; }

.eyebrow, .label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(30px, 3vw, 48px); letter-spacing: -.03em; }
.subtitle { margin: 12px 0 0; color: var(--masthead-ink-soft); font-size: 17px; }
.status-pill {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  min-width: 0; max-width: min(240px, 20vw); padding: 10px 14px;
  border: 1px solid var(--masthead-line); border-radius: 999px; font-weight: 650;
  color: var(--masthead-ink-soft);
}
.status-pill > span:first-child {
  flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #4fc07b;
}
.status-pill #saveStatus {
  display: block; min-width: 0; width: auto; height: auto; overflow: hidden;
  border-radius: 0; background: transparent; text-overflow: ellipsis;
}
.masthead-actions { display: grid; justify-items: end; gap: 12px; }
.project-version {
  display: flex; align-items: center; gap: 8px; color: var(--masthead-ink-soft);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.project-version strong {
  padding: 5px 9px; border: 1px solid var(--masthead-line); border-radius: 999px;
  background: var(--masthead-badge-bg); color: var(--masthead-ink-soft);
  font-size: 13px; letter-spacing: .04em;
}
.project-nav { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--masthead-line); border-radius: 10px; }
.project-nav a {
  padding: 8px 11px; border-radius: 7px; color: var(--masthead-ink-soft); font-size: 14px;
  font-weight: 700; text-decoration: none;
}
.project-nav a.active { color: var(--masthead-chip-ink); background: var(--masthead-chip-bg); }

.document-shell {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 920px);
  justify-content: center;
  gap: 26px;
  align-items: start;
}
.document-toc {
  display: grid;
  gap: 5px;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.document-toc strong { margin-bottom: 7px; font-size: 18px; }
.document-toc a {
  padding: 7px 9px;
  border-radius: 7px;
  color: #385864;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.document-toc a:hover { color: white; background: var(--accent); }
.document-toc a.subsection { padding-left: 20px; color: var(--muted); font-weight: 600; }
.document-page {
  min-width: 0;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  box-shadow: 0 12px 34px rgba(22, 56, 74, .07);
}
.system-flow {
  margin: calc(clamp(26px, 4vw, 52px) * -1) calc(clamp(26px, 4vw, 52px) * -1) 42px;
  padding: clamp(24px, 3.5vw, 42px);
  border-radius: 16px 16px 0 0;
  background: #f7fafb;
}
.system-flow-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.system-flow-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 29px;
}
.system-flow-head > p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
  text-align: right;
}
.flow-track {
  display: grid;
  grid-template-columns:
    minmax(95px, .8fr) 16px
    minmax(100px, .85fr) 16px
    minmax(170px, 1.4fr) 16px
    minmax(105px, .9fr) 18px
    minmax(125px, 1fr) 18px
    minmax(115px, .95fr);
  align-items: stretch;
  gap: 5px;
}
.flow-stage {
  min-width: 0;
  padding: 14px 11px;
  border: 1px solid #cbd9df;
  border-top: 5px solid var(--accent);
  border-radius: 11px;
  background: white;
}
.flow-stage h3 { margin: 7px 0 9px; font-size: 16px; }
.flow-stage p { margin: 0; color: #385864; font-size: 13px; line-height: 1.55; }
.flow-kicker {
  display: inline-block;
  color: #075c60;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.flow-stage.spectra { background: #edf7f6; }
.flow-stage.targets { border-top-color: #315f78; }
.flow-stage.expert {
  border-color: #d5a049;
  border-top-color: #c47b00;
  background: #fff8eb;
  box-shadow: 0 0 0 3px rgba(196, 123, 0, .08);
}
.flow-stage.expert .flow-kicker { color: #8a5600; }
.flow-stage.downstream { border-top-color: #315f78; }
.spectrum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.spectrum-grid span {
  padding: 7px 8px;
  border-radius: 7px;
  background: white;
  color: #385864;
  font-size: 11px;
  line-height: 1.35;
}
.spectrum-grid b { color: var(--accent); }
.flow-arrow {
  display: grid;
  place-items: center;
  color: #315f78;
  font-size: 25px;
  font-weight: 800;
}
.flow-arrow.emphasized { color: #c47b00; }
.flow-delivery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 9px;
  color: #385864;
  background: #e8eff2;
  font-size: 13px;
  font-weight: 700;
}
.flow-delivery b { color: var(--accent); }
.document-page h1 { margin-bottom: 24px; font-size: clamp(30px, 4vw, 48px); }
.document-page h2 {
  scroll-margin-top: 20px;
  margin: 46px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-soft);
  font-size: 27px;
}
.document-page h3 { scroll-margin-top: 20px; margin: 30px 0 12px; font-size: 21px; }
.document-page p, .document-page li { min-width: 0; overflow-wrap: anywhere; color: #385864; line-height: 1.8; }
.document-page p { margin: 12px 0; }
.document-page ul, .document-page ol { display: grid; gap: 7px; padding-left: 24px; }
.document-page code {
  padding: 2px 6px;
  border-radius: 5px;
  color: #075c60;
  background: #edf6f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.document-page :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
.document-page pre {
  overflow: auto;
  padding: 18px;
  border-radius: 10px;
  background: #102f40;
}
.document-page pre code { padding: 0; color: #e7f3f5; background: transparent; line-height: 1.7; }
.doc-table-scroll { margin: 18px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.document-page table { width: 100%; border-collapse: collapse; }
.document-page th, .document-page td {
  padding: 11px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  line-height: 1.55;
}
.document-page th { color: white; background: var(--ink); }
.document-page tr:last-child td { border-bottom: 0; }

main { padding: 22px clamp(20px, 3.2vw, 58px) 42px; }
.regional-method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.regional-method article {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.regional-method span { color: var(--accent); font-weight: 750; }
.regional-method h2 { margin: 7px 0; font-size: 20px; }
.regional-method p { margin: 0; color: var(--muted); line-height: 1.65; }
.regional-baseline-panel {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #b8d7d4;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbfa 0%, #f7fafc 100%);
}
.regional-baseline-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.regional-baseline-head h2 { margin: 3px 0 0; font-size: 22px; }
.regional-baseline-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.regional-baseline-control {
  min-width: 0; padding: 13px; border: 1px solid #c7d8dc; border-radius: 10px; background: white;
}
.regional-baseline-control > label { display: block; margin-bottom: 7px; color: #385864; font-size: 13px; font-weight: 850; }
.regional-baseline-control select {
  width: 100%; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 34px 0 11px;
  border: 1px solid #9fb8bf; border-radius: 8px; color: var(--ink); background: #fbfcfd;
  font: inherit; font-size: 14px; font-weight: 700;
}
.regional-baseline-control.is-fixed { border-color: #d9cba5; background: #fffaf0; }
.regional-baseline-fixed-value { display: grid; gap: 4px; min-height: 44px; align-content: center; }
.regional-baseline-fixed-value strong { color: #684b18; font-size: 14px; }
.regional-baseline-fixed-value span { color: #826d42; font-size: 12px; font-weight: 700; }
.regional-year-chart-card {
  min-width: 0; margin: 0 0 14px; padding: 18px; border: 1px solid #bfd0d6; border-radius: 14px; background: white;
}
.regional-category-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 12px; color: #385864; font-size: 12px; font-weight: 750; }
.regional-category-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.regional-category-chart-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--region-color); }
.regional-year-chart { display: grid; grid-auto-rows: 1fr; gap: 10px; margin-top: 16px; min-height: 0; }
.regional-category-chart-row {
  display: grid; grid-template-columns: minmax(126px, 190px) minmax(160px, 1fr) auto; align-items: center; gap: 14px;
  min-width: 0; padding: 10px 12px; border: 1px solid #d9e3e6; border-radius: 10px; background: #fbfcfd;
}
.regional-category-chart-name { overflow-wrap: anywhere; }
.regional-category-chart-bar { display: flex; height: 18px; overflow: hidden; border-radius: 999px; background: #e5ecef; }
.regional-category-chart-segment { display: block; min-width: 0; height: 100%; background: var(--region-color); cursor: default; outline-offset: -2px; }
.regional-category-chart-segment + .regional-category-chart-segment { border-left: 1px solid #ffffffb8; }
.regional-category-chart-segment:focus { outline: 3px solid #17384b; }
.regional-category-chart-share { color: #385864; font-size: 12px; font-weight: 800; white-space: nowrap; }
.regional-year-chart-tooltip { position: fixed; z-index: 50; max-width: min(360px, calc(100vw - 24px)); padding: 8px 10px; border: 1px solid #075c60; border-radius: 8px; color: white; background: #17384b; box-shadow: 0 5px 18px #17384b40; font-size: 13px; font-weight: 800; line-height: 1.5; pointer-events: none; }
.regional-year-chart-summary { margin: 12px 0 0; color: #075c60; font-size: 13px; font-weight: 800; }
.regional-chart-map-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 18px; align-items: stretch; margin-top: 0; }
.regional-chart-map-bars { display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
.regional-chart-map-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid #d9e3e6; border-radius: 10px; background: #f7fafb; }
.regional-chart-map-controls > p { margin: 0; color: #075c60; font-size: 13px; font-weight: 850; }
.regional-chart-map-controls > p { grid-column: 1 / -1; }
.regional-chart-map-controls label { display: grid; gap: 5px; color: #385864; font-size: 13px; font-weight: 850; }
.regional-chart-map-controls select { width: 100%; min-width: 0; height: 40px; padding: 0 30px 0 10px; border: 1px solid #8caab2; border-radius: 8px; color: var(--ink); background: white; font: inherit; font-weight: 750; }
/* White, because the artwork is opaque: on a tinted panel its cropped column showed as a pale block
   once the inset outlines were removed. */
.regional-taiwan-map-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: 14px; border: 1px solid #bfd0d6; border-radius: 12px; background: #fefefe; }
.regional-taiwan-map-head { align-self: start; }
.regional-taiwan-map-panel h3 { margin: 3px 0 0; font-size: 20px; }
.regional-taiwan-map-shell {
  position: relative; align-self: center; justify-self: center; width: min(100%, 580px);
  aspect-ratio: 1195 / 1316; margin: 8px 0 0; overflow: hidden;
}
/* The artwork supplies only line work now: the greyed left column carries the three inset boxes and
   their labels, and every region colour comes from SVG fill. The top strip that used to carry the
   baked legend is cropped away because the legend is a DOM list under the title. */
.regional-taiwan-map-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.regional-taiwan-map-image--chrome { filter: grayscale(1); clip-path: inset(8% 69.87% 0 0); }
.regional-map-legend { margin-top: 8px; }
.regional-taiwan-map { display: none; }
.regional-map-inset { fill: white; stroke-width: 2; }
.regional-map-inset--lienchiang { stroke: #6D4C41; }
.regional-map-inset--kinmen { stroke: #C2185B; }
.regional-map-inset--south { stroke: #F4A261; }
.regional-map-region { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; appearance: none; cursor: default; outline: none; background: transparent; }
.regional-map-region path { fill: var(--region-map-color, #dbe8ea); stroke: #ffffff; stroke-width: 3; transition: filter 120ms ease, transform 120ms ease; }
.regional-map-region text { fill: #17384b; font-size: 15px; font-weight: 850; pointer-events: none; text-anchor: middle; }
.regional-map-region:hover, .regional-map-region:focus { outline: 3px solid #17384b; outline-offset: -3px; }
/* Each block is one traced shape whose colour is the fill attribute the script writes, so a lightened
   block is a flat lighter colour rather than an overlay that lets the old colour show through. */
.regional-map-shapes { position: absolute; inset: 0; width: 100%; height: 100%; }
.regional-map-knockout { fill: #fefefe; stroke: #fefefe; stroke-width: 11; pointer-events: none; }
.regional-map-shape { stroke: #ffffff; stroke-width: 3; cursor: pointer; outline: none; transition: fill 140ms ease, filter 140ms ease, stroke-width 140ms ease; }
/* Pointing at a block lifts it off the map instead of ringing it: the script also moves the hovered
   shape to the end of the group so its shadow is never painted over by a later neighbour. */
.regional-map-shape:hover { filter: drop-shadow(0 5px 7px rgba(23, 56, 75, .42)) drop-shadow(0 1px 2px rgba(23, 56, 75, .3)); stroke-width: 4; }
.regional-map-shape:focus-visible { filter: drop-shadow(0 5px 7px rgba(23, 56, 75, .42)); stroke: #333333; stroke-width: 5; }
/* The artwork's three inset outlines and their 連江 / 金門 / 澎湖 captions are painted out: the wide
   white stroke covers each baked outline, the filled rectangles cover each baked caption. The island
   shapes and their own labels underneath are left alone. */
.regional-map-inset-wipe { pointer-events: none; }
.regional-map-inset-wipe-outline { fill: none; stroke: #fefefe; stroke-width: 22; }
.regional-map-inset-wipe-title { fill: #fefefe; }
/* Matches the artwork's own island captions: 大金門 measures 63 units across three full-width glyphs,
   so 21 units per em, inked at #333. */
.regional-map-annotation { fill: #333; font-size: 21px; font-weight: 700; pointer-events: none; }
/* The footnote carries the bar chart share label's spec, so it is a DOM node rather than SVG text:
   12 user units inside the viewBox would render at roughly 6 CSS px once the map is scaled down. */
.regional-map-footnote {
  position: absolute; right: 1.5%; bottom: 1.5%; margin: 0; pointer-events: none;
  color: #385864; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.regional-map-labels { position: absolute; inset: 0; pointer-events: none; }
.regional-map-label { position: absolute; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 999px; color: #333; background: #ffffffdb; font-size: 12px; font-weight: 850; line-height: 1.6; white-space: nowrap; }
.regional-map-label--north-east { left: 82%; top: 16%; }
.regional-map-label--north-west { left: 63%; top: 21%; }
.regional-map-label--central { left: 55%; top: 43%; }
.regional-map-label--south { left: 46%; top: 72%; }
.regional-map-label--east { left: 71%; top: 57%; }
/* Both offshore labels sit top left of their island group, where the removed caption used to be, and
   carry a light grey outline so the pill still reads against the white background. */
.regional-map-label--kinmen { left: 4%; top: 44.5%; transform: translate(0, -50%); border: 1px solid #c9cdd0; }
.regional-map-label--lienchiang { left: 4%; top: 14.5%; transform: translate(0, -50%); border: 1px solid #c9cdd0; }
.regional-map-tooltip .regional-map-tooltip-value { display: block; }
.regional-map-tooltip .regional-map-trend { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid #ffffff2e; }
.regional-map-trend-chart { display: block; overflow: visible; }
.regional-map-trend-line { fill: none; stroke: #7fd3dc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.regional-map-trend-dot { fill: #17384b; stroke: #7fd3dc; stroke-width: 1.5; }
.regional-map-trend-current { fill: #ffffff; stroke: none; }
.regional-map-trend-cagr { display: block; margin-top: 3px; color: #cfe9ee; font-size: 11px; font-weight: 750; }
.regional-map-trend-hint { display: block; margin-top: 5px; color: #9fc4cf; font-size: 11px; font-weight: 700; }
/* 7區劃分原則 carries the chart card's frame and the legend's colour dot, so the
   division list reads as the same system as the bars and the map above it. All
   seven blocks share one row at equal width, and the grid's default stretch
   keeps every block the same height however short its own list is. */
.regional-division-card {
  min-width: 0; margin: 0 0 14px; padding: 18px; border: 1px solid #bfd0d6; border-radius: 14px; background: white;
}
.regional-division-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.regional-division-region {
  min-width: 0; padding: 12px 13px; border: 1px solid #d9e3e6; border-radius: 10px; background: #fbfcfd;
}
.regional-division-region h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--ink); font-size: 16px; font-weight: 850; }
.regional-division-region h3 i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--region-color); }
.regional-division-region ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.regional-division-region li { min-width: 0; }
.regional-division-region b { display: block; color: var(--ink); font-size: 13px; font-weight: 800; }
.regional-division-region span { display: block; margin-top: 2px; color: #385864; font-size: 12px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.equation-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  color: #e8f5f5;
  background: var(--ink);
}
.equation-strip code { font-size: 15px; }
.regional-parameters { margin: 14px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.regional-parameters summary { padding: 14px 18px; color: var(--ink); font-size: 17px; font-weight: 850; cursor: pointer; }
.regional-parameters > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; }
.regional-parameter-item { padding: 12px 14px; border-left: 4px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
.regional-parameter-item strong { display: block; margin-bottom: 4px; }
.regional-parameter-item span { color: var(--muted); line-height: 1.55; }
.regional-workspace .total-row th, .regional-workspace .total-row td {
  color: #075c60;
  background: #e8f5f4;
  font-weight: 800;
}
.regional-four-d-table tbody tr.total-row th,
.regional-four-d-table tbody tr.total-row td {
  color: #075c60;
  background: #e8f5f4 !important;
  background-clip: padding-box !important;
  font-weight: 800;
}
.regional-four-d-table tbody tr.total-row .actual-col {
  background: #d2ebe6 !important;
}
.dashboard-reference { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.regional-blocks-container { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.regional-block-card { border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.regional-block-card.system-total-card { border: 2px solid #0b6b62; background: #f4faf9; }
.regional-block-header { padding: 10px 16px; background: #eef5f6; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.regional-block-card.system-total-card .regional-block-header { background: #0b6b62; color: white; }
.regional-block-title { font-size: 15px; font-weight: 850; letter-spacing: 0.02em; }
.regional-block-card.system-total-card .regional-block-title { color: white; }
.regional-block-subhint { font-size: 12px; font-weight: 700; color: #4b6a75; }
.regional-block-card.system-total-card .regional-block-subhint { color: #d0f0eb; }
.card-top-scroll { overflow-x: scroll !important; overflow-y: hidden !important; height: 14px; background: #eef5f6; border-bottom: 1px solid var(--line); scrollbar-gutter: stable; }
.regional-block-card.system-total-card .card-top-scroll { background: #e2edea; }
.card-top-scroll-inner { height: 1px; min-width: 1740px; }
.regional-table-scroll,
.card-top-scroll {
  overflow-x: scroll !important;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #1b5e55 #dbece8;
}
.regional-table-scroll::-webkit-scrollbar,
.card-top-scroll::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: block !important;
  height: 14px !important;
}
.regional-table-scroll::-webkit-scrollbar-track,
.card-top-scroll::-webkit-scrollbar-track {
  background: #dbece8 !important;
  border-radius: 7px !important;
  margin: 0 2px !important;
}
.regional-table-scroll::-webkit-scrollbar-thumb,
.card-top-scroll::-webkit-scrollbar-thumb {
  background: #1b5e55 !important;
  border: 2px solid #dbece8 !important;
  border-radius: 7px !important;
  min-width: 50px !important;
  cursor: pointer !important;
}
.regional-table-scroll::-webkit-scrollbar-thumb:hover,
.card-top-scroll::-webkit-scrollbar-thumb:hover {
  background: #0b3d36 !important;
}
.regional-four-d-table { min-width: 1740px; table-layout: fixed; }
.regional-four-d-table th,
.regional-four-d-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.regional-four-d-table thead th { border-right: 1px solid #2c4e60; border-bottom: 1px solid #2c4e60; }
.regional-four-d-table .dimension-head,
.regional-four-d-table .dimension-cell { position: sticky; left: 0; z-index: 4; width: 120px; min-width: 120px; max-width: 120px; }
.regional-four-d-table .metric-head,
.regional-four-d-table .metric-cell { position: sticky; left: 120px; z-index: 4; width: 110px; min-width: 110px; max-width: 110px; }
.regional-four-d-table thead th:not(.dimension-head):not(.metric-head) { width: 94px; min-width: 94px; }
.regional-four-d-table tbody .dimension-cell { color: var(--ink); background: white !important; background-clip: padding-box !important; font-weight: 800; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.regional-four-d-table tbody .metric-cell { color: var(--ink); background: white !important; background-clip: padding-box !important; font-weight: 750; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.regional-four-d-table tbody tr,
.regional-four-d-table tbody td { background: white; }
.regional-four-d-table tbody td { text-align: right; padding-left: 8px; padding-right: 10px; }
.regional-four-d-table thead .actual-col { color: white; background: #0b6b62; }
.regional-four-d-table tbody .actual-col { background: var(--accent-soft); font-weight: 750; }
.regional-four-d-table .percent-row td { color: #46636e; }
.dashboard-reference h3 { margin: 0 0 8px; }
.dashboard-reference p { margin: 4px 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) {
  .regional-method { grid-template-columns: 1fr; }
  .regional-parameters > div { grid-template-columns: 1fr; }
}
.contract-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 14px;
}
.contract-strip article {
  display: flex; align-items: baseline; gap: 11px; padding: 18px 22px; background: var(--panel);
}
.contract-strip strong { font-size: 28px; }
.contract-strip span { color: var(--muted); font-weight: 650; }
.notice {
  display: flex; gap: 16px; align-items: center; margin: 14px 0 20px; padding: 13px 18px;
  border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 8px;
}
.notice span { color: #385864; }

.parameter-intro {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  margin-bottom: 18px; padding: 2px 2px 14px; border-bottom: 1px solid var(--line);
}
.parameter-intro h2, .parameter-section-head h2 { margin: 0; font-size: 30px; }
.parameter-intro > p {
  max-width: 690px; margin: 0; color: var(--muted); line-height: 1.65; text-align: right;
}
.forecast-policy {
  margin-bottom: 18px; padding: 18px; border: 1px solid #9ebfc2;
  border-radius: 14px; background: #f2f9f9;
}
.forecast-policy h2 { margin: 0 0 12px; font-size: 21px; }
.forecast-policy > div {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px;
}
.forecast-policy article {
  padding: 12px; border-radius: 9px; background: white; border: 1px solid var(--line);
}
.forecast-policy strong { color: #075c60; font-size: 13px; }
.forecast-policy p { margin: 6px 0 0; color: #385864; font-size: 13px; line-height: 1.55; }
.masthead:has(.parameter-nav-bar) {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 14px;
}
.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.parameter-nav-bar {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.parameter-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.parameter-nav a,
.parameter-nav .category-button {
  padding: 9px 16px; border-radius: 8px; color: var(--ink); background: white;
  border: 1px solid var(--line); font-size: 16px; font-weight: 750; text-decoration: none;
  transition: all 0.15s ease;
}
.parameter-nav a:hover,
.parameter-nav .category-button:hover { color: white; background: var(--accent); border-color: var(--accent); }
.parameter-nav a.active,
.parameter-nav .category-button.active {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(8, 124, 128, 0.4);
}
.parameter-nav-dropdown { display: none; }
.parameter-nav-dropdown summary {
  list-style: none;
}
.parameter-nav-dropdown summary::-webkit-details-marker { display: none; }
.parameter-nav-mobile { display: grid; }
.parameter-sections { display: grid; min-width: 0; gap: 22px; }
.parameter-section {
  min-width: 0; scroll-margin-top: 148px; padding: 24px; border: 1px solid var(--line);
  border-radius: 16px; background: white;
}
.parameter-section[hidden] {
  display: none !important;
}
.parameter-explanation {
  margin-top: 16px; border: 1px solid #9fc4c7; border-radius: 12px;
  background: #fbfdfd; overflow: clip;
}
.parameter-explanation summary {
  padding: 16px 18px; color: #075c60; background: var(--explanation-summary-bg);
  font-size: 19px; font-weight: 800; cursor: pointer;
}
.parameter-explanation summary::marker { color: var(--accent); }
.parameter-explanation-body { padding: 0 18px 18px; }
.parameter-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.parameter-version {
  min-width: 0; max-width: 48%; padding: 8px 11px; border-radius: 8px; color: #075c60;
  background: var(--accent-soft); font-size: 13px; font-weight: 750; text-align: right;
  overflow-wrap: anywhere;
}
.parameter-source, .parameter-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px;
}
.parameter-source { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parameter-card {
  min-width: 0; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #f7fafb;
}
.parameter-card span, .parameter-card small {
  display: block; color: var(--muted); font-size: 12px; line-height: 1.45;
}
.parameter-card strong {
  display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--ink);
  font-size: 15px; line-height: 1.5;
}
.parameter-card small { margin-top: 5px; }
.working-baseline-intro {
  margin-top: 16px; padding: 15px 17px; border: 1px solid #78aaa5;
  border-radius: 12px; background: #eef8f6;
}
.working-baseline-intro > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.working-baseline-intro h3 { margin: 0; font-size: 17px; }
.working-baseline-badge {
  display: inline-flex; align-items: center; min-height: 27px; padding: 4px 10px;
  border-radius: 999px; color: #075c60; background: white; font-size: 12px; font-weight: 800;
}
.working-baseline-badge[data-mode="working"] { color: #714900; background: #fff2cc; }
.working-baseline-badge[data-mode="preview"] { color: #0b4f8a; background: #e3f0ff; }
.working-baseline-badge[data-mode="error"] { color: #9e3027; background: #fff0ee; }
.working-baseline-status,
.working-baseline-notice { margin: 9px 0 0; color: #25505a; font-size: 13px; line-height: 1.55; }
.working-baseline-notice { color: #526b73; }
.working-baseline-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.working-baseline-control { display: block; }
.working-baseline-control select {
  width: 100%; min-height: 40px; margin-top: 7px; padding: 8px 30px 8px 10px;
  border: 1px solid #91aaaf; border-radius: 7px; color: var(--ink); background: white;
  font: inherit; font-size: 14px; font-weight: 700;
}
.working-baseline-control select:focus-visible {
  outline: 3px solid #4f9b9480; outline-offset: 2px;
}
.working-baseline-coefficient { border-style: dashed; background: #f1f5f6; }
.working-baseline-coefficient small { color: #075c60; font-weight: 750; }
.working-baseline-control > span,
.working-baseline-coefficient > span { color: #3f4a4f; font-weight: 700; }
.working-baseline-coefficient strong {
  display: flex; align-items: center; min-height: 40px; margin-top: 7px;
}
.parameter-principles {
  margin-top: 14px; padding: 16px 18px; border-left: 4px solid var(--accent);
  border-radius: 8px; background: var(--accent-soft);
}
.parameter-principles h3, .parameter-table-card h3 { margin: 0 0 10px; font-size: 17px; }
.parameter-principles ol {
  display: grid; gap: 7px; margin: 0; padding-left: 22px; color: #385864; line-height: 1.55;
}
.parameter-principles li { min-width: 0; overflow-wrap: anywhere; }
.model-guide {
  margin-top: 16px; padding: 18px; border: 1px solid #b8ced1;
  border-radius: 12px; background: #fbfdfd;
}
.model-guide h3 { margin: 0 0 12px; font-size: 19px; }
.model-pipeline {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0;
  list-style: none; counter-reset: guide-step;
}
.model-pipeline li {
  display: flex; align-items: center; gap: 7px; padding: 8px 11px;
  border-radius: 999px; background: var(--accent-soft); color: #25505a;
  font-size: 13px; font-weight: 700; counter-increment: guide-step;
}
.model-pipeline li::before {
  content: counter(guide-step); display: grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; color: white; background: var(--accent); font-size: 11px;
}
.model-equations {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  align-items: stretch;
}
.model-equations article {
  min-width: 0; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 9px; background: white;
  display: flex; flex-direction: column;
}
.model-equations strong { display: block; margin-bottom: 7px; }
.model-equations code {
  display: block; padding: 8px 10px; overflow-wrap: anywhere; border-radius: 6px;
  color: #075c60; background: #edf6f6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.55;
}
.model-equations p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; flex: 1; }
.model-diagnostics {
  margin-top: 12px; padding: 13px 15px; border-left: 4px solid #c47b00;
  border-radius: 7px; background: #fff8eb;
}
.model-diagnostics strong { color: #704600; }
.model-diagnostics ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; line-height: 1.55; }
.model-diagnostics li { min-width: 0; overflow-wrap: anywhere; }
.traditional-review-card {
  margin: 18px 0 22px;
  padding: 20px;
  border: 2px solid #0b6b62;
  border-radius: 14px;
  background: linear-gradient(145deg, #f4fbf9 0%, #ffffff 68%);
  box-shadow: 0 8px 24px rgba(11, 107, 98, 0.09);
}
.traditional-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.traditional-review-head h3 { margin: 2px 0 6px; font-size: 24px; }
.traditional-review-subtitle { margin: 0; color: var(--muted); line-height: 1.55; }
.traditional-review-badge {
  flex: 0 0 auto; padding: 7px 11px; border: 1px solid #b26a00; border-radius: 999px;
  color: #754600; background: #fff2d7; font-size: 12px; font-weight: 800;
}
.traditional-review-boundary {
  margin: 16px 0; padding: 11px 14px; border-left: 4px solid #b26a00;
  color: #5e430f; background: #fff8e9; font-weight: 750; line-height: 1.6;
}
.traditional-review-source { margin: 14px 0; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.traditional-review-table-card h4 { margin: 0 0 4px; font-size: 18px; }
.traditional-review-table-card > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.traditional-review-table { min-width: 2050px; table-layout: fixed; }
.traditional-review-table th, .traditional-review-table td { padding: 9px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.traditional-review-table thead th { background: #173f4d; color: white; text-align: center; }
.traditional-review-table tbody td { background: white; text-align: right; }
.traditional-review-table .traditional-dimension-head,
.traditional-review-table .traditional-dimension-cell { position: sticky; z-index: 3; text-align: center; }
.traditional-review-table .traditional-dimension-head { z-index: 7; }
/* 範疇、指標、單位；類別/區域整欄相同，已不再顯示。 */
.traditional-review-table .traditional-dimension-head--1,
.traditional-review-table .traditional-dimension-cell--1 { left: 0; width: 104px; min-width: 104px; }
.traditional-review-table .traditional-dimension-head--2,
.traditional-review-table .traditional-dimension-cell--2 { left: 104px; width: 168px; min-width: 168px; }
.traditional-review-table .traditional-dimension-head--3,
.traditional-review-table .traditional-dimension-cell--3 { left: 272px; width: 104px; min-width: 104px; }
.traditional-review-table .traditional-dimension-cell { font-weight: 750; }

/* 範疇改以整列底色區分：稽核輸入、模型參數、模型輸出。固定欄同色但更深一階，
   捲動時左側不會與資料列脫節；2025 實績錨點再疊一層同色調的強調。 */
.traditional-review-table tbody tr.traditional-scope-row--input td { background: #f2f3f4; }
.traditional-review-table tbody tr.traditional-scope-row--input .traditional-dimension-cell { background: #e5e7e9; }
.traditional-review-table tbody tr.traditional-scope-row--parameter td { background: #eef4f7; }
.traditional-review-table tbody tr.traditional-scope-row--parameter .traditional-dimension-cell { background: #dde9ef; }
.traditional-review-table tbody tr.traditional-scope-row--output td { background: #e9f4f0; }
.traditional-review-table tbody tr.traditional-scope-row--output .traditional-dimension-cell { background: #d6eae3; }
.traditional-review-table .traditional-anchor-cell {
  background-image: linear-gradient(rgba(8, 124, 128, 0.13), rgba(8, 124, 128, 0.13));
  font-weight: 850;
}
.parameter-table-card { min-width: 0; margin-top: 16px; }
.parameter-table-card th:first-child, .parameter-table-card td:first-child,
.parameter-table-card th:nth-child(2), .parameter-table-card td:nth-child(2),
.parameter-table-card th:nth-child(3), .parameter-table-card td:nth-child(3) { text-align: center; }
.parameter-four-d-card h3 { margin-bottom: 4px; font-size: 20px; }
.parameter-four-d-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.parameter-four-d-scroll { border-color: #111; border-radius: 8px; }
.parameter-four-d-scroll--tech-ict {
  max-height: min(68vh, 720px);
  overflow-x: scroll;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.parameter-four-d-top-scroll {
  height: 22px;
  margin: 8px 0 5px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid #111;
  border-radius: 8px;
  background: #eef5f2;
  scrollbar-gutter: stable;
}
.parameter-four-d-top-scroll-track { height: 1px; min-width: 2302px; }
.parameter-four-d-top-scroll,
.parameter-four-d-scroll--tech-ict {
  scrollbar-width: auto;
  scrollbar-color: #1b5e55 #dbece8;
}
.parameter-four-d-top-scroll::-webkit-scrollbar,
.parameter-four-d-scroll--tech-ict::-webkit-scrollbar { height: 14px; }
.parameter-four-d-top-scroll::-webkit-scrollbar-track,
.parameter-four-d-scroll--tech-ict::-webkit-scrollbar-track { background: #dbece8; }
.parameter-four-d-top-scroll::-webkit-scrollbar-thumb,
.parameter-four-d-scroll--tech-ict::-webkit-scrollbar-thumb {
  min-width: 50px;
  border: 2px solid #dbece8;
  border-radius: 7px;
  background: #1b5e55;
}
.parameter-four-d-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}
.parameter-four-d-highlights span {
  padding: 7px 11px;
  border: 1px solid #93b9af;
  border-radius: 999px;
  color: #174d45;
  background: #edf7f1;
  font-size: 13px;
}
/* 這條列的高度跟著上方重點徽章走：徽章是 13px 文字 + 7px 內距，
   所以這裡的欄位用同一組數值，外框只留最小內距，兩列之間才不會
   突然拉高一倍。 */
.parameter-four-d-baseline {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 10px 0 8px;
  padding: 5px 11px;
  border: 1px solid #93b9af;
  border-radius: 10px;
  background: #f6fbf9;
  overflow-x: auto;
}
.parameter-four-d-baseline h4 {
  flex: 0 0 auto;
  margin: 0;
  color: #17384b;
  font-size: 14px;
  white-space: nowrap;
}
.parameter-four-d-baseline > div {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
}
.parameter-four-d-baseline article {
  display: flex;
  align-items: baseline;
  flex: 1 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 7px 11px;
  border: 1px solid #c6ddd7;
  border-radius: 8px;
  background: white;
  white-space: nowrap;
}
.parameter-four-d-baseline article:nth-child(even) { background: white; }
.parameter-four-d-baseline strong { color: #17384b; font-size: 13px; }
.parameter-four-d-baseline span {
  color: #174d45;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.parameter-four-d-table {
  min-width: 2580px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.parameter-four-d-table th,
.parameter-four-d-table td {
  min-width: 88px;
  padding: 9px 8px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  white-space: nowrap;
}
.parameter-four-d-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  color: white;
  background: var(--ink);
  text-align: center;
}
.parameter-four-d-table tbody td { background: white; text-align: right; }
.parameter-four-d-table .parameter-text-cell {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: left;
}
.parameter-four-d-table .parameter-dimension-head,
.parameter-four-d-table .parameter-dimension-cell { position: sticky; text-align: center; }
.parameter-four-d-table .parameter-dimension-head { z-index: 8; }
.parameter-four-d-table .parameter-dimension-cell { z-index: 3; background: white; }
.parameter-four-d-table .parameter-dimension-head--1,
.parameter-four-d-table .parameter-dimension-cell--1 { left: 0; width: 92px; min-width: 92px; max-width: 92px; }
.parameter-four-d-table .parameter-dimension-head--2,
.parameter-four-d-table .parameter-dimension-cell--2 { left: 92px; width: 170px; min-width: 170px; max-width: 170px; }
.parameter-four-d-table .parameter-dimension-head--3,
.parameter-four-d-table .parameter-dimension-cell--3 { left: 262px; width: 190px; min-width: 190px; max-width: 190px; }
.parameter-four-d-table .parameter-dimension-head--4,
.parameter-four-d-table .parameter-dimension-cell--4 { left: 452px; width: 88px; min-width: 88px; max-width: 88px; }
.parameter-four-d-table .parameter-dimension-cell--1,
.parameter-four-d-table .parameter-dimension-cell--2 { font-weight: 800; }
.parameter-four-d-table .parameter-dimension-cell--3 { font-weight: 700; }
.parameter-four-d-table .parameter-dimension-cell--4 { color: var(--muted); }
.parameter-four-d-table--tech-ict { min-width: 2302px; }
/* 電子零組件契約：值區一律靠右，缺值佔位符也是。指標與單位帶
   .parameter-dimension-cell，維持置中。沒有這條規則時，位置型的
   .parameter-table-card td:nth-child(3) 會贏過 tbody td 的靠右，
   而「指標」的合併儲存格讓「第三格」在每一列指向不同年度。 */
.parameter-four-d-table--electronic-components tbody td:not(.parameter-dimension-cell) {
  text-align: right;
}
/* 傳統高耗能契約比照電子零組件合併指標儲存格，值區同樣一律靠右。 */
.parameter-four-d-table--high-energy tbody td:not(.parameter-dimension-cell) {
  text-align: right;
}
.parameter-four-d-table--tech-ict .parameter-dimension-head--1,
.parameter-four-d-table--tech-ict .parameter-dimension-cell--1 {
  left: 0; width: 190px; min-width: 190px; max-width: 190px;
}
.parameter-four-d-table--tech-ict .parameter-dimension-head--2,
.parameter-four-d-table--tech-ict .parameter-dimension-cell--2 {
  left: 190px; width: 88px; min-width: 88px; max-width: 88px;
}
.parameter-four-d-table--tech-ict .parameter-dimension-cell--2 {
  color: var(--muted); font-weight: 400;
}
.parameter-four-d-table .parameter-anchor-cell { background: #e5f4f1; font-weight: 800; }
.parameter-four-d-table--tech-ict tbody tr.parameter-row--alternate td { background: #edf7f1; }
.parameter-four-d-table--tech-ict tbody tr:not(.parameter-row--alternate) td { background: white; }
.parameter-four-d-table--tech-ict .parameter-anchor-cell {
  font-weight: 800;
  box-shadow: none;
}
.parameter-four-d-table--aidc-telecom tbody tr.parameter-row--aidc-annual-increment td {
  background: #e8f4fb;
}
.parameter-four-d-table--aidc-telecom tbody tr.parameter-row--aidc-cumulative td {
  background: #fff8df;
}
.parameter-four-d-table--spectrum-d { min-width: 2400px; }
.parameter-four-d-table--spectrum-d .parameter-dimension-head--1,
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--1 {
  left: 0; width: 100px; min-width: 100px; max-width: 100px;
}
.parameter-four-d-table--spectrum-d .parameter-dimension-head--2,
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--2 {
  left: 100px; width: 190px; min-width: 190px; max-width: 190px;
}
.parameter-four-d-table--spectrum-d .parameter-dimension-head--3,
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--3 {
  left: 290px; width: 88px; min-width: 88px; max-width: 88px;
}
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--1 { vertical-align: middle; white-space: pre-line; }
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--1,
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--2 { color: var(--ink); }
.parameter-four-d-table--spectrum-d .parameter-dimension-cell--2 { font-weight: 800; }
.parameter-four-d-table--spectrum-d tbody tr.parameter-row--spectrum-d-1 td { background: #fff6d6; }
.parameter-four-d-table--spectrum-d tbody tr.parameter-row--spectrum-d-2 td { background: #eaf7e7; }
.parameter-four-d-table--spectrum-d tbody tr.parameter-row--spectrum-d-3 td { background: #e8f4ff; }
.parameter-four-d-table--spectrum-d tbody tr.parameter-row--spectrum-d-4 td { background: #fff; }
.parameter-four-d-table tbody tr:last-child td { border-bottom: 0; }

/* --- Enhanced Model Center Styles --- */

/* Variable glossary */
.model-variable-glossary {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #c5dfe1;
  border-radius: 10px;
  background: #f0f8f8;
}
.model-variable-glossary h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #075c60;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.model-variable-glossary dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.model-variable-glossary dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #075c60;
  font-weight: 700;
  white-space: nowrap;
}
.model-variable-glossary dd {
  margin: 0;
  color: #385864;
}

/* Section summary */
.section-summary {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fcfc, #f2f9f9);
  border: 1px solid #d0e4e5;
  color: #2a4a54;
  font-size: 15px;
  line-height: 1.7;
}

/* Wide parameter card */
.parameter-card--wide {
  grid-column: 1 / -1;
}

/* Semiconductor scenario workspace */
.scenario-workspace {
  min-width: 0;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #9ac9c8;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0f9f8, #ffffff 65%);
}
.scenario-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.scenario-workspace-head .eyebrow { color: #087c80; }
.scenario-workspace h3 { margin: 2px 0 6px; font-size: 21px; }
.scenario-workspace-head p:not(.eyebrow) { max-width: 720px; margin: 0; color: #385864; line-height: 1.55; }
.scenario-baseline-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #6daead;
  border-radius: 999px;
  color: #075c60;
  background: white;
  font-size: 12px;
  font-weight: 800;
}
.scenario-notice {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-left: 4px solid #c47b00;
  border-radius: 7px;
  color: #704600;
  background: #fff8eb;
  font-size: 13px;
  line-height: 1.55;
}
.scenario-control-bar, .scenario-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.scenario-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aidc-scenario-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scenario-control-bar label, .scenario-option {
  display: grid;
  gap: 6px;
  color: #385864;
  font-size: 13px;
  font-weight: 750;
}
.scenario-control-bar input, .scenario-control-bar select, .scenario-option select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #b8ced1;
  border-radius: 8px;
  color: var(--ink);
  background: white;
  font: inherit;
}
.scenario-option {
  padding: 12px;
  border: 1px solid #c5dfe1;
  border-radius: 10px;
  background: rgba(255,255,255,.82);
}
#SEMICONDUCTOR .scenario-option select { height: 38px; min-height: 38px; box-sizing: border-box; background: #f1f3f4; }
.scenario-option small { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.scenario-locked {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  overflow: clip;
}
.scenario-locked summary { height: 56px; min-height: 56px; box-sizing: border-box; padding: 0 14px; color: #385864; background: var(--explanation-summary-bg); font-size: 19px; font-weight: 800; line-height: 56px; cursor: pointer; }
.parameter-explanation summary:hover, .scenario-locked summary:hover { background: var(--explanation-summary-bg-hover); }
.scenario-locked ul { display: grid; gap: 6px; margin: 0; padding: 0 22px 14px 34px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.scenario-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.scenario-button {
  padding: 9px 12px;
  border: 1px solid #3f8888;
  border-radius: 8px;
  color: #075c60;
  background: white;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.scenario-button:hover { color: white; background: var(--accent); }
.scenario-button--promote { color: white; border-color: #9b6500; background: #b67500; }
.scenario-button--promote:hover { background: #8d5900; }
.scenario-status { margin: 14px 0 0; color: #385864; font-size: 13px; line-height: 1.5; }
.scenario-status[data-type="error"] { color: #9e3027; font-weight: 750; }
.scenario-status[data-type="success"] { color: #075c60; font-weight: 750; }
.scenario-live-table.aidc-live-table { min-width: 1420px !important; }
.aidc-live-table th,
.aidc-live-table td { text-align: right; }
.aidc-live-table thead th:first-child,
.aidc-live-table tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 150px;
  min-width: 150px;
  text-align: left;
}
.aidc-live-table thead th:first-child { z-index: 7; }
.aidc-live-table tbody th {
  border-right: 1px solid #b7c9cc;
  color: #17404d;
  background: white;
}
.three-targets-linkage-status { margin: 0 0 14px; color: #385864; font-size: 13px; line-height: 1.55; }
.three-targets-linkage-status[data-type="preview"] { color: #075c60; font-weight: 750; }
.three-targets-linkage-status[data-type="working"] { color: #075c60; font-weight: 750; }
.three-targets-linkage-status[data-type="error"] { color: #9e3027; font-weight: 750; }
.scenario-result { min-width: 0; margin-top: 14px; }
.scenario-result h4 { margin: 0 0 8px; font-size: 16px; }
.scenario-result-description { margin: 0 0 6px; color: #385864; font-size: 13px; line-height: 1.55; }
.scenario-result-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.scenario-result .table-scroll { max-width: 100%; overflow-x: scroll; scrollbar-gutter: stable; }
.scenario-top-scroll {
  height: 22px;
  margin: 8px 0 5px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef5f6;
  scrollbar-gutter: stable;
}
.scenario-top-scroll-track { height: 1px; min-width: 1500px; }
.scenario-top-scroll,
.scenario-result .scenario-four-d-scroll {
  scrollbar-color: #1b5e55 #dbece8;
  scrollbar-width: auto;
}
.scenario-top-scroll::-webkit-scrollbar,
.scenario-result .scenario-four-d-scroll::-webkit-scrollbar { height: 16px; }
.scenario-top-scroll::-webkit-scrollbar-track,
.scenario-result .scenario-four-d-scroll::-webkit-scrollbar-track { background: #dbece8; }
.scenario-top-scroll::-webkit-scrollbar-thumb,
.scenario-result .scenario-four-d-scroll::-webkit-scrollbar-thumb {
  border: 3px solid #dbece8;
  border-radius: 999px;
  background: #1b5e55;
}
.scenario-comparison-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.scenario-comparison-legend span {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.scenario-legend-source { color: #704600; background: #fff0ce; }
.scenario-legend-model { color: #075c60; background: #dff2ef; }
.scenario-four-d-scroll { position: relative; }
.scenario-result .scenario-four-d-table {
  min-width: 1770px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.scenario-four-d-table th,
.scenario-four-d-table td {
  min-width: 78px;
  padding: 10px 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.scenario-four-d-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  color: white;
  background: var(--ink);
  text-align: center;
}
.scenario-four-d-table tbody tr:last-child th,
.scenario-four-d-table tbody tr:last-child td { border-bottom: 0; }
.scenario-four-d-table .scenario-scope-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 100px;
  width: 100px;
  color: white;
  background: #244e61;
  text-align: center;
}
.scenario-four-d-table .scenario-category-cell {
  position: sticky;
  left: 100px;
  z-index: 3;
  min-width: 110px;
  width: 110px;
  text-align: center;
}
.scenario-four-d-table .scenario-category-cell--source { color: #704600; background: #fff0ce; }
.scenario-four-d-table .scenario-category-cell--model { color: #075c60; background: #dff2ef; }
.scenario-four-d-table .scenario-indicator-cell {
  position: sticky;
  left: 210px;
  z-index: 2;
  min-width: 100px;
  width: 100px;
  color: #274c59;
  background: white;
  text-align: center;
}
.scenario-four-d-table .scenario-unit-cell {
  position: sticky;
  left: 310px;
  z-index: 2;
  min-width: 70px;
  width: 70px;
  color: var(--muted);
  background: white;
  text-align: center;
}
.scenario-four-d-table .scenario-dimension-head { z-index: 6; }
/* 指標 and 單位 are sticky data columns whose own white column colour would
   otherwise outrank the header band. Inside thead they stay on the same ink
   band as the year headers beside them. */
.scenario-four-d-table thead th.scenario-dimension-head {
  color: white;
  background: var(--ink);
}
.scenario-four-d-table .scenario-dimension-head--1 { left: 0; min-width: 100px; width: 100px; }
.scenario-four-d-table .scenario-dimension-head--2 { left: 100px; min-width: 110px; width: 110px; }
.scenario-four-d-table .scenario-dimension-head--3 { left: 210px; min-width: 100px; width: 100px; }
.scenario-four-d-table .scenario-dimension-head--4 { left: 310px; min-width: 70px; width: 70px; }
.scenario-four-d-table .scenario-source-row td:not(.scenario-unit-cell) { background: #fffbf2; }
.scenario-four-d-table .scenario-model-row td:not(.scenario-unit-cell) { background: #f5fbfa; }
.scenario-four-d-table .scenario-source-extension-cell {
  color: #684b78;
  background: #f6f0f8 !important;
}
.scenario-four-d-table .scenario-missing-cell { color: #9aabb2; text-align: center; }
.scenario-live-table { min-width: 1500px !important; }
/* 同理：全域的 td:nth-child(3) 會把即時試算表的第一個年度欄置中。 */
.scenario-four-d-table.scenario-live-table tbody td:not(.scenario-unit-cell) {
  text-align: right;
}
.scenario-live-table .scenario-indicator-cell { left: 0; min-width: 120px; width: 120px; }
.scenario-live-table .scenario-unit-cell { left: 120px; min-width: 78px; width: 78px; }
.scenario-boundary-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #8aa9b4;
  color: #526d77;
  background: #f5f8f9;
  font-size: 12px;
  line-height: 1.6;
}

/* Equation formula enhancement */
.model-equations code {
  position: relative;
  font-size: 14px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .regional-chart-map-layout { grid-template-columns: 1fr; }
  .regional-taiwan-map-shell { width: min(100%, 420px); }
  .model-equations { grid-template-columns: 1fr; }
  .forecast-policy > div { grid-template-columns: 1fr; }
  .scenario-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regional-baseline-controls { grid-template-columns: 1fr; }
  .regional-baseline-head { flex-direction: column; }
  .regional-category-chart-row { grid-template-columns: minmax(112px, 155px) minmax(0, 1fr); }
  .regional-category-chart-share { grid-column: 1 / -1; }
}

.workspace {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px;
}
aside, .chart-card, .table-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
aside { padding: 16px; align-self: start; position: sticky; top: 16px; }
.aside-title { margin: 3px 8px 10px; color: var(--muted); font-size: 13px; font-weight: 750; }
.regional-workspace { display: block; }
.regional-region-switcher {
  display: grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 10px;
  /* Sits directly above the four-dimension table it drives, so it binds downward. */
  margin: 10px 0 4px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}
/* 建模彙總表：系統＋7類橫向切換列沿用建模中心的 .parameter-nav 排版；
   系統合計以深青綠色系、2px 邊框、金色菱形標記與右側分隔線區隔於七類用電。 */
.summary-workspace { display: block; }
.summary-category-nav .category-button { font-family: inherit; cursor: pointer; }
.summary-category-nav .category-button.system-total {
  position: relative; margin-right: 18px; padding: 8px 18px 8px 14px;
  color: #0b6b62; background: #eef8f6; border: 2px solid #0b6b62; font-weight: 850;
}
.summary-category-nav .category-button.system-total::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px;
  border-radius: 2px; background: var(--system-marker); transform: rotate(45deg) translateY(-1px);
}
.summary-category-nav .category-button.system-total::after {
  content: ""; position: absolute; top: 12%; right: -14px; width: 1px; height: 76%;
  background: rgba(255, 255, 255, 0.42);
}
.summary-category-nav .category-button.system-total:hover {
  color: white; background: #0b6b62; border-color: #0b6b62;
}
.summary-category-nav .category-button.system-total.active {
  color: white; background: #0b6b62; border-color: #0b6b62;
  box-shadow: 0 0 0 3px var(--system-marker), 0 2px 10px rgba(11, 107, 98, 0.45);
}
.region-button {
  width: 100%; min-height: 72px; padding: 10px 12px; text-align: center; color: var(--ink); background: white;
  border: 1px solid #c7d8dc; border-radius: 9px; font: inherit; font-size: 15px; font-weight: 750; cursor: pointer;
}
.region-button span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.region-button:hover { background: #f0f5f6; }
.region-button.active { color: #075c60; background: var(--accent-soft); }
.region-button.system-total { border-color: #8fb9b5; }

.content { min-width: 0; }
.toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 3px 2px 15px; }
/* The text block yields; the metric tabs never shrink or wrap. Otherwise a long
   lock note (專家頁的系統合計說明) squeezes 夜尖峰／尖峰／供電量 into two lines. */
.toolbar > div:first-child { min-width: 0; }
.toolbar h2 { margin: 0; font-size: 30px; }
/* Same toolbar treatment, but opening the lower half of the page rather than the top. */
.regional-section-toolbar { margin-top: 22px; }
.metric-tabs { display: flex; flex: 0 0 auto; gap: 7px; padding: 5px; background: #e8eef0; border-radius: 10px; }
.metric-tabs button {
  padding: 9px 14px; border: 0; border-radius: 7px; color: var(--muted); background: transparent;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.metric-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 4px #17384b20; }

.chart-card { padding: 22px 24px 16px; }
.chart-head, .table-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.chart-head h3, .table-head h3 { margin: 0; font-size: 20px; }
.legend { display: flex; gap: 18px; color: var(--muted); font-size: 14px; font-weight: 650; }
.legend i { display: inline-block; width: 18px; height: 4px; margin: 0 7px 3px 0; border-radius: 3px; }
.legend .model { background: var(--accent); }
.legend .reference { background: var(--reference); }
.legend .ai-related { background: #3f7fc4; }
.legend .non-ai-related { background: #74a66a; }
.legend .original { background: #80939c; }
.chart-actions { display: flex; align-items: center; gap: 14px; }
.reset-category-button {
  flex: 0 0 auto; padding: 8px 18px; border: 1px solid #087c80; border-radius: 8px;
  color: #075c60; background: white; font: inherit; font-weight: 800; cursor: pointer;
}
.reset-category-button:hover { color: white; background: var(--accent); }
.reset-category-button[hidden] { display: none; }
canvas { display: block; width: 100%; margin-top: 12px; }
canvas:not(.locked) { cursor: ns-resize; touch-action: none; }
canvas.locked { cursor: not-allowed; }

.table-card { margin-top: 8px; padding: 10px 12px 12px; }
.table-head { margin-bottom: 15px; }
.table-head p:last-child { max-width: 540px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.table-scroll { min-width: 0; max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; min-width: 1500px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: right; }
th { position: sticky; top: 0; color: white; background: var(--ink); font-size: 12px; }
th:first-child, td:first-child { text-align: center; }
th:nth-child(2), td:nth-child(2) { text-align: center; }
th:nth-child(3), td:nth-child(3) { text-align: center; }
td { font-size: 13px; white-space: nowrap; }
td[rowspan] {
  vertical-align: middle;
  text-align: center;
  font-weight: 750;
  background: white !important;
}
tbody tr:nth-child(even) { background: #f7fafb; }
tbody tr.component-row { background: #eef7f2; }
tbody tr.reference-row { background: var(--reference-soft); }
tbody tr.difference-row { font-weight: 700; }
tbody tr.original-row { color: #586e79; background: #edf2f4; }

.expert-notice { margin-top: 0; }
.expert-meta {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end;
  margin-bottom: 20px; padding: 16px 18px; background: white; border: 1px solid var(--line);
  border-radius: 12px;
}
.expert-meta label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.expert-meta input, .expert-meta select {
  width: 100%; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid #bdccd2; border-radius: 8px; color: var(--ink); background: #fbfcfd;
  font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.4;
}
.expert-meta button {
  padding: 11px 16px; border: 0; border-radius: 8px; color: white; background: var(--accent);
  font: inherit; font-weight: 750; cursor: pointer;
}
.expert-file-actions { display: flex; gap: 8px; }
.expert-file-actions button { white-space: nowrap; }
.expert-file-actions button.secondary {
  color: var(--ink); background: white; border: 1px solid #9eb1ba;
}
.editability-label { margin: 7px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.expert-chart-card { position: relative; padding-bottom: 8px; }
.lock-note { max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.6; }

footer {
  display: flex; justify-content: space-between; gap: 20px; padding: 18px clamp(28px, 4vw, 72px);
  color: #c9d8df; background: var(--ink); font-size: 13px;
}

/* Mobile Navigation Toggle Button */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--masthead-badge-bg);
  border: 1px solid var(--masthead-line);
  border-radius: 8px;
  color: var(--masthead-ink-soft);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:active {
  background: rgba(255, 255, 255, 0.26);
}

/* Mobile Nav Overlay & Dropdown Drawer */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-dropdown {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 290px;
  max-width: 82vw;
  background: #0f2733;
  color: white;
  z-index: 9999;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-dropdown.is-open {
  transform: translateX(0);
}

.mobile-nav-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0b1f29;
}
.mobile-nav-title span {
  display: block;
  font-size: 16px;
  font-weight: 850;
  color: white;
}
.mobile-nav-title small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #7d9ba6;
}
.mobile-nav-close {
  background: transparent;
  border: none;
  color: #a0b8c4;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}
.mobile-nav-close:hover {
  color: white;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  overflow-y: auto;
}
.mobile-nav-list a {
  padding: 12px 16px;
  border-radius: 8px;
  color: #c2d8e2;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.mobile-nav-list a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
.mobile-nav-list a.active {
  background: #0b6b62;
  color: white;
  font-weight: 850;
}

@media (max-width: 980px) {
  .regional-division-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .traditional-review-head { flex-direction: column; gap: 10px; }
  .masthead { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; }
  .masthead-actions { width: auto; justify-items: end; }
  .desktop-nav { display: none !important; }
  .mobile-menu-toggle { display: inline-flex !important; }
  .toolbar, .chart-head, .table-head { align-items: flex-start; flex-direction: column; }
  .chart-actions { width: 100%; justify-content: space-between; }
  .masthead-title-row { flex-wrap: wrap; }
  .document-shell { grid-template-columns: 1fr; }
  .document-toc { position: static; max-height: none; }
  .system-flow-head { align-items: flex-start; flex-direction: column; }
  .system-flow-head > p { text-align: left; }
  .flow-track { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); min-height: 26px; }
  .flow-delivery { flex-wrap: wrap; }
  .contract-strip { grid-template-columns: repeat(2, 1fr); }
  .workspace { grid-template-columns: 1fr; }
  aside { position: static; }
  .expert-meta { grid-template-columns: 1fr; }
  .parameter-intro, .parameter-section-head { align-items: flex-start; flex-direction: column; }
  .parameter-intro > p, .parameter-version { max-width: none; text-align: left; }
  .parameter-source, .parameter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .working-baseline-intro > div { align-items: flex-start; flex-direction: column; }
  .scenario-workspace-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .traditional-review-card { margin: 12px 0 18px; padding: 14px; }
  .traditional-review-head h3 { font-size: 21px; }
  .traditional-review-table { min-width: 1790px; }
  .masthead { padding: 10px 14px; }
  .masthead-title-row h1 { font-size: 18px; }
  .parameter-nav-bar { padding-top: 8px; }
  .parameter-nav { display: none; }
  .parameter-nav-dropdown { display: block; position: relative; }
  .parameter-nav-dropdown > summary {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #8aa6b0;
    border-radius: 9px; color: var(--ink); background: white;
    font-size: 16px; font-weight: 850; cursor: pointer;
  }
  .parameter-nav-dropdown > summary::after {
    content: "⌄"; color: var(--accent); font-size: 21px; line-height: 1;
    transform: translateY(-2px); transition: transform 0.15s ease;
  }
  .parameter-nav-dropdown[open] > summary::after {
    transform: rotate(180deg) translateY(1px);
  }
  .parameter-nav-mobile {
    grid-template-columns: 1fr; gap: 6px; margin-top: 7px; padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
    background: var(--masthead-bg); box-shadow: 0 12px 28px rgba(6, 20, 38, 0.28);
  }
  .parameter-nav-mobile a,
  .parameter-nav-mobile .category-button {
    padding: 10px 12px; border: 1px solid #8aa6b0; border-radius: 8px;
    color: var(--ink); background: white; font-size: 15px; font-weight: 750;
    text-decoration: none;
  }
  .parameter-nav-mobile .category-button { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
  .parameter-nav-mobile a:hover,
  .parameter-nav-mobile a.active,
  .parameter-nav-mobile .category-button:hover,
  .parameter-nav-mobile .category-button.active {
    color: white; background: var(--accent); border-color: var(--accent);
  }
  .parameter-nav-mobile .category-button.system-total { margin: 0 0 4px; padding: 9px 12px; }
  .parameter-nav-mobile .category-button.system-total::after { display: none; }
  .masthead--compact .status-pill {
    position: fixed; right: 14px; bottom: 14px; z-index: 40;
    max-width: calc(100vw - 28px); background: var(--ink); color: white;
    box-shadow: 0 8px 24px #102f3f40;
  }
  .contract-strip { grid-template-columns: 1fr; }
  .metric-tabs { width: 100%; overflow: auto; }
  .regional-year-chart-card { padding: 14px; }
  .regional-division-card { padding: 14px; }
  .regional-division-grid { grid-template-columns: 1fr; }
  .regional-chart-map-layout { grid-template-columns: 1fr; }
  .regional-chart-map-controls { grid-template-columns: 1fr 1fr; align-items: end; }
  .regional-taiwan-map-shell { width: min(100%, 360px); }
  .regional-map-label { padding: 0 5px; font-size: 10px; }
  .regional-category-chart-row { padding: 10px; }
  .regional-category-chart-share { white-space: normal; }
  .notice { align-items: flex-start; flex-direction: column; }
  .parameter-source, .parameter-grid { grid-template-columns: 1fr; }
  .parameter-four-d-baseline > div { flex: 1 0 auto; }
  .scenario-control-bar, .scenario-option-grid { grid-template-columns: 1fr; }
  .parameter-four-d-table { min-width: 2154px; }
  .parameter-four-d-table th,
  .parameter-four-d-table td { padding: 7px 5px; }
  .parameter-four-d-table .parameter-dimension-head,
  .parameter-four-d-table .parameter-dimension-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .parameter-four-d-table .parameter-dimension-head--1,
  .parameter-four-d-table .parameter-dimension-cell--1 { left: 0; width: 42px; min-width: 42px; max-width: 42px; }
  .parameter-four-d-table .parameter-dimension-head--2,
  .parameter-four-d-table .parameter-dimension-cell--2 { left: 42px; width: 54px; min-width: 54px; max-width: 54px; }
  .parameter-four-d-table .parameter-dimension-head--3,
  .parameter-four-d-table .parameter-dimension-cell--3 { left: 96px; width: 82px; min-width: 82px; max-width: 82px; }
  .parameter-four-d-table .parameter-dimension-head--4,
  .parameter-four-d-table .parameter-dimension-cell--4 { left: 178px; width: 40px; min-width: 40px; max-width: 40px; }
  .parameter-four-d-table--tech-ict { min-width: 2146px; }
  .parameter-four-d-table--tech-ict .parameter-dimension-head--1,
  .parameter-four-d-table--tech-ict .parameter-dimension-cell--1 {
    left: 0; width: 82px; min-width: 82px; max-width: 82px;
  }
  .parameter-four-d-table--tech-ict .parameter-dimension-head--2,
  .parameter-four-d-table--tech-ict .parameter-dimension-cell--2 {
    left: 82px; width: 40px; min-width: 40px; max-width: 40px;
  }
  .parameter-four-d-table--spectrum-d .parameter-dimension-head--1,
  .parameter-four-d-table--spectrum-d .parameter-dimension-cell--1 {
    left: 0; width: 42px; min-width: 42px; max-width: 42px;
  }
  .parameter-four-d-table--spectrum-d .parameter-dimension-head--2,
  .parameter-four-d-table--spectrum-d .parameter-dimension-cell--2 {
    left: 42px; width: 82px; min-width: 82px; max-width: 82px;
  }
  .parameter-four-d-table--spectrum-d .parameter-dimension-head--3,
  .parameter-four-d-table--spectrum-d .parameter-dimension-cell--3 {
    left: 124px; width: 40px; min-width: 40px; max-width: 40px;
  }
  .parameter-four-d-table--spectrum-d .parameter-dimension-cell--1 { white-space: pre-line; }
}
/* Traditional manufacturing method layout: three fixed bands under the section
   heading. Top: new (IIP) method. Middle: current (Spectrum B) formal default.
   Bottom: current/new four-milestone comparison. Each band names its own method
   version, so there is no separate order guide; both methods stay visible and
   nothing switches, hides or remembers a selection. */
.traditional-method-band {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #bed5cc;
  border-radius: 16px;
  background: #fff;
  scroll-margin-top: 148px;
}

.traditional-method-band--new {
  border-left: 6px solid #c89b3c;
  background: linear-gradient(160deg, #fff9ee 0%, #ffffff 42%);
}

.traditional-method-band--current {
  border-left: 6px solid #184f46;
  background: linear-gradient(160deg, #f1f8f6 0%, #ffffff 42%);
}

.traditional-method-band--comparison {
  border-left: 6px solid #6b7c78;
  background: #fbfcfc;
}

.traditional-method-band__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.traditional-method-band__head {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.traditional-method-band__copy { min-width: 0; }

.traditional-method-band__eyebrow {
  display: flex;
  align-items: center;
}

.traditional-method-band__head h3,
.traditional-parameter-registry h4 {
  margin: 0;
  color: #173c34;
}

.traditional-method-band__head h3 { font-size: 22px; }

.traditional-method-band__note,
.traditional-parameter-registry > p {
  margin: 6px 0 0;
  color: #596b66;
  line-height: 1.65;
}

.traditional-method-band__intro {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f1f8f6;
  color: #294d43;
  line-height: 1.65;
}

.traditional-method-band__badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.traditional-method-band--new .traditional-method-band__badge {
  border: 1px solid #b26a00;
  background: #fff2d7;
  color: #754600;
}

.traditional-method-band--current .traditional-method-band__badge {
  border: 1px solid #26856b;
  background: #dff2e9;
  color: #17634f;
}

.traditional-method-band--comparison .traditional-method-band__badge {
  border: 1px solid #9aa7a3;
  background: #eef2f1;
  color: #3b4a46;
}

.traditional-parameterization__boundary {
  margin: 16px 0 12px;
  padding: 12px 14px;
  border-left: 4px solid #cc7a2a;
  border-radius: 8px;
  background: #fff7eb;
  color: #74420f;
  font-weight: 700;
  line-height: 1.6;
}

/* The band header already names the method, so the step 6 card keeps its title,
   subtitle, boundary, formulas and audit table but drops its duplicate eyebrow
   and badge. */
.traditional-method-band--new .traditional-method-chain { background: #ffffff; }

.traditional-method-chain .model-variable-glossary dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.traditional-method-chain .model-variable-glossary__item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #cfe4e5;
  border-radius: 8px;
  background: #ffffff;
}

.traditional-method-chain .model-variable-glossary dt { overflow-wrap: anywhere; }
.traditional-method-chain .model-variable-glossary dd { margin: 0; }

/* Three cards get too narrow for their definitions below this width; two per row
   with the last one spanning keeps the block flush. */
@media (max-width: 1080px) {
  .traditional-method-chain .model-variable-glossary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traditional-method-chain .model-variable-glossary__item:last-child { grid-column: 1 / -1; }
}
/* 模型計算鏈四個區塊各自收合，避免整條鏈一次攤開過長。 */
.traditional-method-chain__section {
  overflow: hidden;
  border: 1px solid #c5dfe1;
  border-radius: 10px;
  background: #f7fbfb;
}

.traditional-method-chain__section + .traditional-method-chain__section { margin-top: 8px; }

.traditional-method-chain__section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  color: #075c60;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

/* The default disclosure marker disappears under display:flex, so the summary
   carries its own chevron; without it nothing says the row opens. */
.traditional-method-chain__section > summary { list-style: none; }
.traditional-method-chain__section > summary::-webkit-details-marker { display: none; }

.traditional-method-chain__section > summary strong::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--accent);
  transition: transform 120ms ease;
}

.traditional-method-chain__section[open] > summary strong::before { transform: rotate(90deg); }
.traditional-method-chain__section > summary:hover { background: #edf6f6; }
.traditional-method-chain__section > summary span { color: #71817d; font-size: 12px; font-weight: 700; }
.traditional-method-chain__section[open] > summary { border-bottom: 1px solid #dcebec; }
.traditional-method-chain__section > :not(summary) { margin: 0; padding: 12px 14px; }
.traditional-method-chain__section .model-variable-glossary,
.traditional-method-chain__section .model-diagnostics {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.traditional-method-chain__section .model-diagnostics { border-left: 4px solid #c47b00; }
.traditional-method-band--new .traditional-method-chain__section > summary { color: #6d4a10; }
.traditional-method-band--new .traditional-method-chain__section > summary strong::before { color: #c89b3c; }
.traditional-method-band--new .traditional-method-chain__section > summary:hover { background: #fdf6ea; }

/* 完整流程：七個治理步驟，每一步帶自己的說明句，而不是一排階段標籤。 */
.traditional-method-flow {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  counter-reset: flow-step;
}

.traditional-method-flow li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 3px 11px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid #d7e9ea;
  border-radius: 10px;
  background: #ffffff;
  counter-increment: flow-step;
}

.traditional-method-flow li::before {
  content: counter(flow-step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.traditional-method-flow strong { color: #173c34; font-size: 14px; }

.traditional-method-flow p {
  margin: 0;
  color: #596b66;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.traditional-method-flow code {
  padding: 1px 6px;
  border-radius: 5px;
  color: #075c60;
  background: #edf6f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.traditional-method-band--new .traditional-method-flow li::before { background: #c89b3c; }

.traditional-method-band--new .traditional-review-card {
  margin: 14px 0 0;
  border-width: 1px;
  box-shadow: none;
}

.traditional-method-band--new .traditional-review-head .eyebrow,
.traditional-method-band--new .traditional-review-badge { display: none; }
.traditional-method-band--new .traditional-review-head h3 { font-size: 18px; }

.traditional-parameterization__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.traditional-parameterization__scope span {
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid #c7d8d2;
  border-radius: 8px;
  background: #fff;
  color: #32554b;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.traditional-parameterization__scope small {
  margin-left: auto;
  color: #596b66;
  font-weight: 700;
}

.traditional-parameter-registry {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #d5e1dd;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
}

.traditional-parameter-comparison__scroll {
  margin-top: 12px;
  border: 1px solid #e0e8e5;
  border-radius: 10px;
}

.traditional-method-band--comparison .traditional-parameter-comparison__scroll { margin-top: 14px; }

/* The global table rule forces min-width: 1500px for the year-wide tables; this
   narrow table must fit the band at desktop widths and only scroll on small screens. */
.traditional-parameter-comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.traditional-parameter-comparison__table { min-width: 640px; }

.traditional-parameter-comparison__table th,
.traditional-parameter-comparison__table td {
  padding: 9px 10px;
  border-bottom: 1px solid #e6ecea;
  text-align: left;
  vertical-align: top;
}

.traditional-parameter-comparison__table th {
  background: #edf5f2;
  color: #294d43;
  white-space: nowrap;
}

.traditional-parameter-comparison__metric {
  color: #173c34;
  font-weight: 800;
  vertical-align: middle;
}

.traditional-parameter-comparison__unit {
  color: #596b66;
  vertical-align: middle;
  white-space: nowrap;
}

.traditional-parameter-comparison__method {
  max-width: 220px;
  font-weight: 700;
  white-space: normal;
}

.traditional-parameter-comparison__value {
  padding: 9px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.traditional-parameter-comparison__row--current td { background: #f1f8f6; }
.traditional-parameter-comparison__row--new td { background: #fff9ee; }
/* The dashboard reference uses the same reference tint 建模彙總表 gives its 儀表板參照 rows. */
.traditional-parameter-comparison__row--reference td { background: var(--reference-soft); }
.traditional-parameter-comparison__row--diff-reference td { background: #fff; color: #8a5600; font-weight: 700; }

.traditional-parameter-comparison__row--diff td {
  background: #fff;
  color: #5e430f;
  font-weight: 700;
}

.traditional-parameter-registry__grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.traditional-parameter-group {
  overflow: hidden;
  border: 1px solid #d8e4e0;
  border-radius: 10px;
  background: #fff;
}

/* 影響範圍 moved out of every row into the group summary; a row only carries it
   when that parameter differs from the rest of its group. */
.traditional-parameter-group__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.traditional-parameter-group__effect {
  padding: 3px 9px;
  border: 1px solid #cfe0da;
  border-radius: 999px;
  background: #f1f8f5;
  color: #35635a !important;
  font-size: 11px;
  font-weight: 750;
}

.traditional-parameter-effect {
  display: block;
  margin-top: 3px;
  color: #8a6a2a;
  font-size: 11px;
  font-weight: 700;
}

.traditional-parameter-value {
  color: #143f34;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* A long list value renders one chip per entry on a full-width card; the seven
   candidate model ids joined onto one line would overflow any single card. */
.traditional-parameter-value__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

@media (max-width: 640px) {
  .traditional-method-band {
    padding: 14px;
    border-radius: 14px;
  }

  .traditional-method-band__head {
    flex-direction: column;
  }

  .traditional-method-band__badge {
    white-space: normal;
  }

  /* The variable glossary is the first content to use this shell; on a narrow
     screen the definition needs the full width instead of a second column. */
  .traditional-method-chain .model-variable-glossary dl { grid-template-columns: 1fr; }
  .traditional-method-chain .model-equations { grid-template-columns: 1fr; }

  .traditional-parameterization__scope small {
    width: 100%;
    margin-left: 0;
  }

  /* Small screens scroll the comparison table sideways, so the method label
     stays on one line instead of stacking into four. */
  .traditional-parameter-comparison__method {
    max-width: none;
    white-space: nowrap;
  }
}

/* 半導體參數槓桿附表：靜態揭露，基線列加粗、守門結果以色標示 */
.scenario-leverage { margin-top: 18px; }
.scenario-leverage-table td:nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scenario-leverage-table td.scenario-leverage-pass,
.scenario-leverage-table td.scenario-leverage-fail { text-align: left; }
.scenario-leverage-baseline td { font-weight: 600; }
.scenario-leverage-pass { color: #1f6b47; }
.scenario-leverage-fail { color: #a33a2a; }

/* 半導體外部參照列：靜態並列比較，不是真值 */
.scenario-external-reference { margin-top: 18px; }
.scenario-external-reference-table td:nth-child(n + 2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* IIP new method parameter registry: each group is a tinted, collapsible
   panel that starts open. Its cards are the same grid Spectrum B uses for
   its parameters (label above, value in bold, unit below) and stay white so
   they lift off the tinted panel. */
.traditional-parameter-group {
  padding: 0;
  border-color: #cfe0da;
  background: #eef6f3;
}

.traditional-parameter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #e3f0ea;
  color: #294d43;
  cursor: pointer;
  list-style: none;
}

.traditional-parameter-group__head::-webkit-details-marker { display: none; }
.traditional-parameter-group__head:hover { background: #d8eae2; }
.traditional-parameter-group__head strong { font-size: 15px; }

.traditional-parameter-group__head strong::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: #35635a;
  transition: transform 0.15s ease;
}

.traditional-parameter-group[open] > .traditional-parameter-group__head strong::before { transform: rotate(90deg); }
.traditional-parameter-group .traditional-parameter-cards { margin: 0; padding: 12px 14px 14px; }
.traditional-parameter-card { background: #fff; }
.traditional-parameter-card > span { color: #596b66; }
.traditional-parameter-card .traditional-parameter-value { margin-top: 5px; font-size: 15px; }
.traditional-parameter-card--list { grid-column: 1 / -1; }

.traditional-parameter-value__list span {
  padding: 4px 9px;
  border: 1px solid #cfe0da;
  border-radius: 999px;
  background: #fff;
  color: #143f34;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
}

/* The seven candidate model formulas sit in the model chain between the
   computation formulas and the diagnostics, one card per published id. */
.traditional-candidate-formulas__lead {
  margin: 0 0 10px;
  color: #596b66;
  font-size: 13px;
  line-height: 1.6;
}

.traditional-candidate-formulas__list article strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}