/* 2026 縣市長藍綠版圖互動圖表（由 2026縣市長藍綠變化.html 搬移）
   所有樣式皆限定在 .bgMap 範圍內，避免影響頁首、選單、頁尾等共用樣式。
   原檔的 rem 以 html 18px（手機 17px）為基準，這裡改用 --rem 變數換算，尺寸與原檔一致。 */

/* 前言 */
.electionLead {
  max-width: 1120px;
  margin: 80px auto;
  padding: 0 16px;
  font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
  text-align: center;
}
.electionLead-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 0.5em;
}
.electionLead-text {
  font-size: 18px;
  line-height: 1.8;
  color: #475569;
  margin: 0;
}
@media (max-width: 768px) {
  .electionLead-title { font-size: 20px; text-align: left; }
  .electionLead-text { font-size: 17px; text-align: left; }
}

/* 圖表外框（取代原檔 html / body 的設定） */
.bgMap {
  --rem: 18px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  background: transparent !important;
  color: var(--text-main);
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(0.75 * var(--rem)) 16px;
  overflow-x: hidden;
  overflow-x: clip; /* 支援的瀏覽器改用 clip：不會形成捲動容器，桌機版地圖的 sticky 才能正常跟著畫面走 */
}

.bgMap {
  color-scheme: light;
  --bg-transparent: transparent;
  --card-border: #cbd5e1;
  --card-border-light: #e2e8f0;
  --text-main: #0f172a;       /* 高對比深色主字體 */
  --text-secondary: #475569;  /* 次要文字清晰灰 */
  --text-muted: #64748b;      /* 輔助標註灰 */
  --line: #cbd5e1;            /* 網格座標軸線 */
  
  /* 系列與政黨代表色（嚴格延續 changhua-1 色系規範） */
  --color-kmt: #147b9b;       /* 中國國民黨（深海藍） */
  --color-dpp: #5c9b45;       /* 民主進步黨（草木綠） */
  --color-ind: #e79b13;       /* 無黨籍／無黨籍及未經政黨推薦（琥珀金） */
  --color-tpp: #28d2c5;       /* 台灣民眾黨（蒂芬妮藍 Tiffany Blue） */
  --color-tpp-text: #00a396;  /* 台灣民眾黨文字深蒂芬妮藍（確保亮底高對比度） */
  
  --font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 電腦版基準字體 18px，整體背景全透明，嚴格維持最小字級 >= 16px */

.bgMap *, 
.bgMap *::before, 
.bgMap *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* 防掉字語意塊：確保括號、票數、百分比與專有名詞完整不拆字 */

.bgMap .nowrap {
  white-space: nowrap;
  display: inline-block;
}

/* 主容器（全透明背景，防溢位響應式結構） */

.bgMap .main-container {
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  background: transparent !important;
  border: none; /* 已移除外框線 */
  padding: calc(1.35 * var(--rem)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(1.35 * var(--rem));
}

/* ── 1. 頂部凸顯縣市下拉選單（參考指定圖示設計風格） ── */

.bgMap .top-control-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.15 * var(--rem));
  border-bottom: 1px solid var(--card-border-light);
  padding-bottom: calc(1.15 * var(--rem));
  width: 100%;
}

.bgMap .hero-dropdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.55 * var(--rem));
  width: 100%;
  max-width: 360px;
}

.bgMap .hero-select-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgMap .hero-county-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 60px;
  background: transparent;
  border: 2px solid #c8cfd8;
  border-radius: 999px;
  padding: 0 calc(3.2 * var(--rem)) 0 calc(3.2 * var(--rem));
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bgMap .hero-county-select:hover, 
.bgMap .hero-county-select:focus {
  border-color: var(--color-kmt);
  box-shadow: 0 0 0 3px rgba(20, 123, 155, 0.12);
  outline: none;
}

.bgMap .hero-select-arrow {
  position: absolute;
  right: calc(1.4 * var(--rem));
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
}

.bgMap .hero-dropdown-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.4 * var(--rem));
  font-size: 17px;
  font-weight: 500;
  color: #555;
  letter-spacing: 0.02em;
  user-select: none;
}

.bgMap .hand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #52525b;
  transform: translateY(-1px);
}

/* 版圖主題切換選單（3 Tabs，立體可點選按鈕設計） */

.bgMap .map-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(0.75 * var(--rem));
  width: 100%;
  margin-top: 50px;
}

.bgMap .mode-tab-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid #94a3b8;
  border-radius: 12px;
  padding: calc(0.75 * var(--rem)) calc(1 * var(--rem));
  min-height: 54px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  line-height: 1.3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(0.55 * var(--rem));
  box-shadow: 0 3px 0 #cbd5e1, 0 4px 10px rgba(15, 23, 42, 0.06);
  user-select: none;
  position: relative;
}

/* 左側單選圓鈕指示器（一眼識別可點擊切換） */

.bgMap .tab-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.bgMap .tab-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0);
  transition: all 0.18s ease;
}

/* 右側點擊手勢圖示 */

.bgMap .tab-click-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
  opacity: 0.85;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.bgMap .mode-tab-btn:not(.active):hover {
  border-color: var(--color-kmt);
  color: var(--color-kmt);
  background: rgba(20, 123, 155, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(20, 123, 155, 0.35), 0 8px 16px rgba(20, 123, 155, 0.12);
}

.bgMap .mode-tab-btn:not(.active):hover .tab-radio {
  border-color: var(--color-kmt);
}

.bgMap .mode-tab-btn:not(.active):hover .tab-radio::after {
  background: rgba(20, 123, 155, 0.45);
  transform: scale(1);
}

.bgMap .mode-tab-btn:not(.active):hover .tab-click-icon {
  color: var(--color-kmt);
  opacity: 1;
  transform: scale(1.1);
}

.bgMap .mode-tab-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #94a3b8 !important;
}

.bgMap .mode-tab-btn.active {
  background: var(--color-kmt);
  border-color: #0e5a73;
  color: #ffffff;
  box-shadow: 0 3px 0 #0e5a73, 0 6px 14px rgba(20, 123, 155, 0.28);
}

.bgMap .mode-tab-btn.active .tab-radio {
  border-color: #ffffff;
}

.bgMap .mode-tab-btn.active .tab-radio::after {
  background: #ffffff;
  transform: scale(1);
}

.bgMap .mode-tab-btn.active .tab-click-icon {
  color: #ffffff;
  opacity: 1;
}

/* ── 2. 頂部席次總覽區塊（取代原本三張卡片的位置） ── */

.bgMap .summary-top-section {
  border: 1px solid var(--card-border-light);
  border-radius: 16px;
  padding: calc(1.15 * var(--rem)) calc(1.25 * var(--rem));
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: calc(0.65 * var(--rem));
  min-width: 0;
}

.bgMap .summary-top-heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--rem));
}

.bgMap .summary-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.55 * var(--rem));
  align-items: center;
}

.bgMap .summary-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.45 * var(--rem));
  padding: calc(0.35 * var(--rem)) calc(0.8 * var(--rem));
  border-radius: 10px;
  border: 1px solid var(--card-border);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
}

.bgMap .summary-chip:hover {
  border-color: var(--color-kmt);
  background: rgba(20, 123, 155, 0.05);
}

/* ── 2. 選中縣市核心指標卡片（位於主視覺上方，延續 changhua-1 設計） ── */

.bgMap .detail-section {
  display: flex;
  flex-direction: column;
  gap: calc(0.75 * var(--rem));
  min-width: 0;
}

.bgMap .detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--rem));
}

.bgMap .detail-title-wrap {
  display: flex;
  align-items: center;
  gap: calc(0.6 * var(--rem));
  flex-wrap: wrap;
}

.bgMap .detail-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.bgMap .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(0.3 * var(--rem));
  padding: calc(0.2 * var(--rem)) calc(0.65 * var(--rem));
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  background: transparent;
}

.bgMap .badge-pill.note-warn {
  color: var(--color-ind);
  border-color: var(--color-ind);
  background: rgba(231, 155, 19, 0.08);
}

.bgMap .metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(0.75 * var(--rem));
  min-width: 0;
}

.bgMap .metric-card {
  background: transparent !important;
  border: 1px solid var(--card-border-light);
  border-radius: 14px;
  padding: calc(0.95 * var(--rem)) calc(0.85 * var(--rem));
  min-width: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(0.45 * var(--rem));
}

.bgMap .metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-border);
}

.bgMap .metric-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.4 * var(--rem));
  white-space: nowrap;
}

.bgMap .metric-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: calc(0.3 * var(--rem));
  flex-wrap: wrap;
  word-break: keep-all;
}

.bgMap .metric-sub {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: calc(0.25 * var(--rem));
  word-break: keep-all;
}

.bgMap .metric-sub-line {
  display: block;
  line-height: 1.5;
}

.bgMap .swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--series-color);
  flex-shrink: 0;
  display: inline-block;
}

/* ── 3. 主視覺雙欄舞台：左「台灣版圖互動地圖」＋右「選中縣市數據圖表表現」 ── */

.bgMap .hero-stage {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: calc(1.25 * var(--rem));
  align-items: stretch;
  min-width: 0;
}

.bgMap .stage-panel {
  background: transparent !important;
  border: 1px solid var(--card-border-light);
  border-radius: 16px;
  padding: calc(1.1 * var(--rem)) calc(1.15 * var(--rem));
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(0.9 * var(--rem));
  position: relative;
}

.bgMap .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.6 * var(--rem));
  border-bottom: 1px dashed var(--card-border);
  padding-bottom: calc(0.7 * var(--rem));
}

.bgMap .panel-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: calc(0.45 * var(--rem));
}

.bgMap .panel-tip {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 子選單膠囊切換鈕 */

.bgMap .pill-toggle-group {
  display: inline-flex;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  flex-wrap: wrap;
}

.bgMap .pill-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-right: 1px solid var(--card-border);
  padding: calc(0.4 * var(--rem)) calc(0.8 * var(--rem));
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.bgMap .pill-btn:last-child {
  border-right: none;
}

.bgMap .pill-btn.active {
  color: var(--color-kmt);
  font-weight: 800;
  background: rgba(20, 123, 155, 0.08);
}

/* 台灣地圖畫布與動態效果 */

.bgMap .map-svg-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: transparent !important;
  overflow: hidden;
}

.bgMap #tw-map-svg {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  background: transparent !important;
  touch-action: manipulation;
}

.bgMap .county-path {
  cursor: pointer;
  transition: fill-opacity 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bgMap .county-path:hover {
  fill-opacity: 0.95 !important;
  filter: brightness(1.05);
}

.bgMap .map-label-group {
  cursor: pointer;
  user-select: none;
}

/* 地圖底部圖例與席次統計列 */

.bgMap .map-footer-bar {
  display: flex;
  flex-direction: column;
  gap: calc(0.55 * var(--rem));
  padding-top: calc(0.6 * var(--rem));
  border-top: 1px dashed var(--card-border);
}

.bgMap .map-footer-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-secondary);
}

.bgMap .seat-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.45 * var(--rem));
  align-items: center;
}

.bgMap .seat-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.4 * var(--rem));
  padding: calc(0.3 * var(--rem)) calc(0.65 * var(--rem));
  border-radius: 8px;
  border: 1px solid var(--card-border);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bgMap .seat-chip:hover {
  border-color: var(--color-kmt);
}

/* ── 右側：選中縣市專屬響應式數據圖表區（零溢位雙層結構，字級皆 >= 16px） ── */

.bgMap .county-charts-container {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--rem));
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
}

.bgMap .sub-chart-box {
  border: 1px solid var(--card-border-light);
  border-radius: 14px;
  padding: calc(1 * var(--rem)) calc(1.05 * var(--rem));
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: calc(0.75 * var(--rem));
  min-width: 0;
}

.bgMap .sub-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(0.4 * var(--rem));
  border-bottom: 1px solid var(--card-border-light);
  padding-bottom: calc(0.5 * var(--rem));
}

.bgMap .sub-chart-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
}

.bgMap .sub-chart-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 年度分組區塊 */

.bgMap .year-chart-group {
  display: flex;
  flex-direction: column;
  gap: calc(0.65 * var(--rem));
  padding-bottom: calc(0.7 * var(--rem));
  border-bottom: 1px dashed var(--card-border-light);
}

.bgMap .year-chart-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.bgMap .year-group-badge {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(0.4 * var(--rem));
}

.bgMap .bar-item-row {
  display: flex;
  flex-direction: column;
  gap: calc(0.3 * var(--rem));
  width: 100%;
}

.bgMap .bar-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(0.35 * var(--rem)) calc(0.6 * var(--rem));
  font-size: 16px;
}

.bgMap .bar-cand-info {
  display: inline-flex;
  align-items: center;
  gap: calc(0.4 * var(--rem));
  font-weight: 700;
  color: var(--text-main);
  word-break: break-word;
}

.bgMap .winner-star-tag {
  display: inline-flex;
  align-items: center;
  padding: calc(0.05 * var(--rem)) calc(0.45 * var(--rem));
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.07);
  color: var(--text-main);
}

.bgMap .bar-val-text {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.bgMap .bar-track {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--card-border-light);
  background: rgba(203, 213, 225, 0.22);
  overflow: hidden;
}

.bgMap .bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.bgMap .bar-ref-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62.5%; /* 50% / 80% = 62.5% */
  width: 2px;
  background: rgba(15, 23, 42, 0.35);
  pointer-events: none;
}

.bgMap .scale-ticks-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  padding-top: calc(0.2 * var(--rem));
}

/* 雙向得票率消長變化軌道（左負右正，0 為基準軸） */

.bgMap .diverging-track {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--card-border-light);
  background: rgba(203, 213, 225, 0.22);
  overflow: hidden;
}

.bgMap .diverging-zero-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62.5%; /* min=-50, max=+30 => 0 位於 50/80 = 62.5% */
  width: 2px;
  background: var(--text-main);
  z-index: 2;
}

.bgMap .diverging-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  transition: left 0.3s ease, width 0.3s ease;
}

/* ── 4. 下方全臺 22 縣市互動對照總覽區塊（響應式防跑版卡片列，字級皆 >= 16px） ── */

.bgMap .overview-section {
  border: 1px solid var(--card-border-light);
  border-radius: 16px;
  padding: calc(1.15 * var(--rem)) calc(1.25 * var(--rem));
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--rem));
  min-width: 0;
}

.bgMap .overview-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.75 * var(--rem));
  padding-bottom: calc(0.75 * var(--rem));
  border-bottom: 1px dashed var(--card-border);
}

.bgMap .overview-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--rem));
}

.bgMap .select-input {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(0.7 * var(--rem)) center;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: calc(0.42 * var(--rem)) calc(2 * var(--rem)) calc(0.42 * var(--rem)) calc(0.8 * var(--rem));
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.bgMap .select-input:hover, 
.bgMap .select-input:focus {
  border-color: var(--color-kmt);
  outline: none;
}

.bgMap .legend-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--rem));
}

.bgMap .legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: calc(0.38 * var(--rem)) calc(0.75 * var(--rem));
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bgMap .legend-btn[aria-pressed="false"] {
  opacity: 0.38;
  filter: grayscale(0.5);
}

/* 22 縣市總覽列表（桌面雙欄網格、手機單欄，完全無水平溢位） */

.bgMap .overview-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(0.75 * var(--rem));
  width: 100%;
  min-width: 0;
}

.bgMap .ov-county-card {
  border: 1px solid var(--card-border-light);
  border-radius: 12px;
  padding: calc(0.85 * var(--rem)) calc(1 * var(--rem));
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: calc(0.55 * var(--rem));
  min-width: 0;
}

.bgMap .ov-county-card:hover {
  border-color: var(--color-kmt);
}

.bgMap .ov-county-card.active-ov {
  border-color: var(--color-kmt);
  box-shadow: inset 0 0 0 1.5px var(--color-kmt);
  background: rgba(20, 123, 155, 0.05);
}

.bgMap .ov-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.4 * var(--rem));
}

.bgMap .ov-county-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: calc(0.45 * var(--rem));
}

.bgMap .ov-winner-tag {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* 懸停提示浮層 (Tooltip，最小字級 >= 16px) */

.bgMap .tooltip {
  position: fixed;
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 16px;
  line-height: 1.55;
  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 0.12s ease;
  backdrop-filter: blur(4px);
}

.bgMap .tooltip[hidden] {
  display: none;
}

/* 頁尾備註（最小字級 16px） */

.bgMap footer {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
  padding-top: calc(0.65 * var(--rem));
  border-top: 1px dashed var(--card-border);
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--rem));
}

/* 桌機版（≥ 921px）：台灣地圖區塊不再被右側內容撐出上方空白
   地圖改為貼齊標題下方，並在捲動右側圖表時固定於畫面中（sticky），隨時可點選縣市。
   --map-sticky-top 為地圖固定時距離視窗頂端的距離，若頁首為固定式（fixed）請調成頁首高度＋間距。 */
@media (min-width: 921px) {
  .bgMap {
    --map-sticky-top: 100px; /* 頁首選單高度約 70px ＋ 30px 間距 */
  }

  .bgMap .hero-stage > .stage-panel:first-child {
    justify-content: flex-start;
  }

  .bgMap .hero-stage > .stage-panel:first-child .map-svg-wrap {
    position: sticky;
    top: var(--map-sticky-top);
  }
}

/* ── 響應式斷點設計（平板與手機版防跑版，最小字級嚴格維持 >= 16px） ── */

@media (max-width: 920px) {
  .bgMap .hero-stage {
    grid-template-columns: 1fr;
  }

  .bgMap .metrics-grid {
    grid-template-columns: 1fr;
  }

  .bgMap .overview-list-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bgMap {
  --rem: 17px;
}

  .bgMap {
    padding: calc(0.5 * var(--rem)) 16px;
  }

  .bgMap .main-container {
    padding: calc(1.1 * var(--rem)) 0;
    gap: calc(1.1 * var(--rem));
  }

  .bgMap .hero-county-select {
    height: 56px;
    font-size: 22px;
  }

  .bgMap .map-mode-tabs {
    grid-template-columns: 1fr;
    gap: calc(0.5 * var(--rem));
  }

  .bgMap .mode-tab-btn {
    padding: calc(0.65 * var(--rem)) calc(0.85 * var(--rem));
  }

  .bgMap .summary-top-section {
    padding: calc(0.95 * var(--rem)) calc(0.85 * var(--rem));
  }

  .bgMap .stage-panel {
    padding: calc(0.95 * var(--rem)) calc(0.85 * var(--rem));
  }

  .bgMap .sub-chart-box {
    padding: calc(0.85 * var(--rem)) calc(0.8 * var(--rem));
  }

  .bgMap .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bgMap .pill-toggle-group {
    width: 100%;
    display: flex;
  }

  .bgMap .pill-btn {
    flex: 1;
    text-align: center;
    padding: calc(0.45 * var(--rem)) calc(0.5 * var(--rem));
  }

  .bgMap .overview-section {
    padding: calc(0.95 * var(--rem)) calc(0.85 * var(--rem));
  }

  .bgMap .overview-controls-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bgMap .overview-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .bgMap .select-input {
    width: 100%;
  }

  .bgMap footer {
    flex-direction: column;
  }
}

/* 小螢幕手機（≤ 480px）RWD 補強：長標題可換行、頁籤按鈕縮小留白，避免內容超出畫面 */
@media (max-width: 480px) {
  .bgMap .detail-title,
  .bgMap .badge-pill {
    white-space: normal;
    display: inline;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .bgMap .badge-pill {
    display: inline-flex;
    max-width: 100%;
  }

  .bgMap .mode-tab-btn {
    font-size: 17px;
    padding: 0.6em 0.6em;
    gap: 0.4em;
  }

  .bgMap .mode-tab-btn .nowrap {
    white-space: normal;
    display: inline;
  }

  .bgMap .hero-county-select {
    font-size: 20px;
  }

  .bgMap .metric-label {
    white-space: normal;
  }
}