/* =================================================
 * 全頁版面縮放（container / viewport）
 * ================================================= */
.container {
  max-width: 80vw;
}

.responsive-header {
  font-size: 2.25rem;
  font-weight: bold;
}

@media (max-width: 1400px) {
  .container {
    max-width: 90vw;
  }
  .responsive-header {
    font-size: 2.5rem;
  }
}

/* 平板橫向、低解析度筆電 (992px 以下) */
@media (max-width: 992px) {
  .container {
    max-width: 95vw;
  }
  .responsive-header {
    font-size: 2rem;
  }
}

/* 平板直向、手機 (768px 以下) */
@media (max-width: 768px) {
  .container {
    max-width: 99vw;
  }
  .responsive-header {
    font-size: 1.2rem;
  }
}

/* =================================================
 * 載入遮罩
 * ================================================= */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #267583;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-content {
  text-align: center;
  color: #267583;
  font-family: sans-serif;
}


/* =================================================
 * Card 外觀（不鎖高度）
 * ================================================= */
.card {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  margin: 1rem auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  display: flex;
  flex-direction: column;
}

/* Header / Footer 不壓縮 */
.card-header,
.card-footer {
  flex-shrink: 0;
}

/* 讓 body 自然撐開 */
.card-body {
  width: 100%;
}

/* 小畫面只調整間距 */
@media (max-width: 768px) {
  .card {
    padding: 1rem;
    margin: 0.5rem auto;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 0.5rem;
    margin: 0.25rem auto;
  }
}

/* =================================================
 * Card Footer 文字對齊
 * ================================================= */
#statsInfo,
#statsSrc {
  text-align: justify;
  text-justify: inter-ideograph; /* 中文字元間距 */
}

/* =================================================
 * Chart / SVG 容器（高度交給 JS）
 * ================================================= */
#chartContainer,
#svgMapContainer,
#svgMapLegend,
#timelineContainer {
  width: 100%;
}

/* ❗ 不在 CSS 設 height / min-height */

/* =================================================
 * SVG Map Container（置中、不塌陷）
 * ================================================= */
#svgMapContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SVG path 互動 */
#svgMapContainer svg path {
  cursor: pointer;
  fill: #e0e0e0;
  transition: fill 0.3s ease;
}

#svgMapContainer path.active {
  stroke: red !important;
  stroke-width: 3px !important;
}

/* =================================================
 * SVG 地圖色階
 * ================================================= */
.Gp_1 {
  fill: #e0e0e0 !important;
  background-color: #e0e0e0;
}
.Gp_2 {
  fill: #abd5e2 !important;
  background-color: #abd5e2;
}
.Gp_3 {
  fill: #58d7e9 !important;
  background-color: #58d7e9;
}
.Gp_4 {
  fill: #42acbe !important;
  background-color: #42acbe;
}
.Gp_5 {
  fill: #267583 !important;
  background-color: #267583;
}

/* =================================================
 * SVG Legend（排版 only）
 * ================================================= */
.legend-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.color-box {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  margin-right: 3px;
  border: 1px solid #999;
}

/* =================================================
 * Button group（維持原樣）
 * ================================================= */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 20px;
}

.btn-custom {
  width: 120px;
  text-align: center;
}