:root {
  --color-primary: #0E8A9E;
  --color-primary-dark: #0A6B7A;
  --color-primary-light: #5FD4E0;
  --color-secondary: #2569A8;
  --color-secondary-dark: #1B4E82;
  --color-accent: #6FA83C;
  --color-accent-dark: #4F7A28;
  --color-warm: #F0A83A;
  --color-warm-dark: #C67F1E;
  --color-surface: #F7FBF7;
  --color-ink: #1C3934;
  --color-muted-fg: #5C776C;
  --color-line: #BFE6D6;

  --gradient-brand: linear-gradient(135deg, #0E8A9E 0%, #2569A8 100%);
  --gradient-brand-hover: linear-gradient(135deg, #0A6B7A 0%, #1B4E82 100%);
  --gradient-teal: linear-gradient(135deg, #0E8A9E 0%, #5FD4E0 100%);
  --gradient-navy: linear-gradient(135deg, #2569A8 0%, #5B94D6 100%);
  --gradient-green: linear-gradient(135deg, #4F7A28 0%, #A8D975 100%);
  --gradient-warm: linear-gradient(135deg, #C67F1E 0%, #FFCE73 100%);
  --gradient-footer: linear-gradient(165deg, #1B4E82 0%, #0A6B7A 55%, #1E4A3D 100%);
}

html {
  scroll-behavior: smooth;
  font-size: 112.5%; /* 18px 預設字級（原生 16px 的「中」再放大一級） */
}
html.text-size-small { font-size: 100%; }  /* 16px 小 */
html.text-size-large { font-size: 125%; }  /* 20px 大 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body { -webkit-font-smoothing: antialiased; }

/* ===== Text size toggle (字級大小設定) ===== */
.text-size-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.text-size-btn {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.5rem 0.65rem;
  color: var(--color-muted-fg);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.text-size-btn:hover { background: #EAF6F0; }
.text-size-btn.active { background: var(--color-primary); color: #fff; }
.text-size-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #ffffff;
  color: var(--color-primary-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

.focus-ring:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Nav */
.nav-link {
  padding: 0.65rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.nav-link:hover { background: var(--color-surface); color: var(--color-primary-dark); }

.mobile-nav-link {
  padding: 0.85rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--color-ink);
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.mobile-nav-link:hover { background: var(--color-surface); }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gradient-brand);
  color: #ffffff;
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(10,107,122,0.45);
  transition: box-shadow 200ms ease, transform 150ms ease, background 200ms ease;
  min-height: 44px;
}
.btn-primary:hover { background: var(--gradient-brand-hover); box-shadow: 0 8px 20px -6px rgba(10,107,122,0.55); }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  transition: background-color 200ms ease, color 200ms ease;
  min-height: 44px;
}
.btn-outline:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; }

.btn-warm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gradient-warm);
  color: #ffffff;
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(198,127,30,0.5);
  transition: box-shadow 200ms ease, transform 150ms ease, filter 200ms ease;
  min-height: 44px;
}
.btn-warm:hover { filter: brightness(1.06); box-shadow: 0 8px 20px -6px rgba(198,127,30,0.6); }
.btn-warm:active { transform: scale(0.98); }

/* Hero */
.hero-gradient {
  background: radial-gradient(1100px 560px at 12% -10%, rgba(95,212,224,0.22) 0%, transparent 60%),
              radial-gradient(900px 520px at 100% 0%, rgba(37,105,168,0.16) 0%, transparent 55%),
              radial-gradient(700px 420px at 70% 110%, rgba(240,168,58,0.14) 0%, transparent 60%),
              var(--color-surface);
}

/* Stats */
.stat-item { text-align: center; padding: 0.5rem; }
.stat-num {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-num .stat-plus { background: none; -webkit-text-fill-color: initial; color: var(--color-warm-dark); }
.stat-label { margin-top: 0.4rem; font-size: 0.8rem; color: var(--color-muted-fg); font-weight: 500; }

/* Section headings */
.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  text-transform: uppercase;
}
.section-title {
  margin-top: 0.35rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--color-primary-dark);
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  transition: gap 200ms ease, color 200ms ease;
}
.link-more:hover { gap: 0.6rem; color: var(--color-primary-dark); }

/* Pillar cards */
.pillar-card {
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(14,138,158,0.22); }
.pillar-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(14,138,158,0.4);
}
.icon-standalone { width: 3.5rem; height: 3.5rem; margin-bottom: 0; }
.icon-inline { margin-bottom: 0; }
.icon-teal { background: var(--gradient-teal); }
.icon-navy { background: var(--gradient-navy); }
.icon-green { background: var(--gradient-green); }
.icon-warm { background: var(--gradient-warm); }

.pillar-title { font-weight: 800; color: var(--color-ink); font-size: 1.05rem; }
.pillar-text { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted-fg); line-height: 1.6; }

/* News */
.news-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  flex-wrap: wrap;
}
.news-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  color: #ffffff;
}
.tag-primary { background: var(--gradient-teal); }
.tag-secondary { background: var(--gradient-navy); }
.tag-accent { background: var(--gradient-green); }
.tag-warm { background: var(--gradient-warm); }
.news-title {
  flex: 1;
  min-width: 200px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: color 200ms ease;
}
.news-title:hover { color: var(--color-primary); text-decoration: underline; }
.news-date { font-size: 0.8rem; color: var(--color-muted-fg); white-space: nowrap; }

/* Map CTA */
.map-cta-bg {
  background: linear-gradient(120deg, #0E8A9E 0%, #2569A8 65%, #1B4E82 100%);
}

/* Activities */
.activity-card {
  background: #fff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(14,138,158,0.22); }
.activity-thumb {
  height: 12rem;
  display: flex; align-items: center; justify-content: center;
}
.thumb-1 { background: var(--gradient-green); }
.thumb-2 { background: var(--gradient-navy); }
.thumb-3 { background: var(--gradient-warm); }
.thumb-4 { background: var(--gradient-teal); }

/* Videos */
.video-card { display: block; cursor: pointer; }
.video-thumb {
  position: relative;
  height: 14rem;
  border-radius: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.thumb-video-1 { background: var(--gradient-brand); }
.thumb-video-2 { background: linear-gradient(135deg, #4F7A28 0%, #F0A83A 100%); }
.thumb-video-3 { background: var(--gradient-teal); }
.thumb-video-4 { background: var(--gradient-navy); }
.thumb-video-5 { background: var(--gradient-warm); }
.thumb-video-6 { background: linear-gradient(135deg, #1B4E82 0%, #4F7A28 100%); }
.play-btn {
  width: 4rem; height: 4rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  transition: transform 200ms ease;
}
.video-card:hover .play-btn { transform: scale(1.08); }

/* Partners */
.partner-badge {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Footer */
.footer-bg { background: var(--gradient-footer); }
.footer-link { cursor: pointer; transition: color 200ms ease; }
.footer-link:hover { color: #ffffff; text-decoration: underline; }
.social-icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.social-icon:hover { background: rgba(255,255,255,0.2); }

/* ===== Nav dropdown ===== */
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 0.85rem;
  box-shadow: 0 12px 28px -10px rgba(14,138,158,0.28);
  min-width: 176px;
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.dropdown-item:hover { background: var(--color-surface); color: var(--color-primary-dark); }
.mobile-subgroup-label {
  padding: 0.5rem 0.75rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-muted-fg);
  text-transform: uppercase;
}

/* ===== Page hero (subpages) ===== */
.page-hero {
  background: radial-gradient(900px 420px at 10% -20%, rgba(95,212,224,0.20) 0%, transparent 60%),
              radial-gradient(700px 380px at 100% 0%, rgba(37,105,168,0.14) 0%, transparent 55%),
              var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-muted-fg);
  margin-bottom: 0.9rem;
}
.breadcrumb a {
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms ease;
}
.breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.breadcrumb i { font-size: 0.7rem; color: var(--color-line); }
.page-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--color-primary-dark);
  line-height: 1.2;
}
.page-subtitle {
  margin-top: 0.6rem;
  color: var(--color-muted-fg);
  max-width: 640px;
  line-height: 1.7;
}

/* ===== Filter tabs (news / activities / orgs) ===== */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-tab {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  min-height: 40px;
}
.filter-tab:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.filter-tab.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(10,107,122,0.4);
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
}
.page-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.page-btn:hover { background: var(--color-surface); }
.page-btn.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ===== Gallery ===== */
.gallery-tile {
  border-radius: 1rem;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
}

/* ===== Org card ===== */
.org-card {
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.org-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(14,138,158,0.22); }
.org-type-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
}
.org-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-muted-fg);
  margin-top: 0.4rem;
  line-height: 1.5;
}
.org-meta i { margin-top: 0.15rem; color: var(--color-primary); flex-shrink: 0; }

/* ===== Link card (相關網站) ===== */
.link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(14,138,158,0.2); border-color: var(--color-primary-light); }

/* ===== Category tiles + panels (相關網站 two-tier) ===== */
.category-tile {
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.category-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(14,138,158,0.22); border-color: var(--color-primary-light); }
.category-tile.active { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 12px 24px -8px rgba(14,138,158,0.28); }
.category-tile .pillar-icon { margin: 0 auto 0.85rem; }
.category-tile-name { font-weight: 800; color: var(--color-ink); font-size: 0.92rem; line-height: 1.35; }
.category-tile-count { margin-top: 0.3rem; font-size: 0.72rem; color: var(--color-muted-fg); }

.link-category-panel { display: none; }
.link-category-panel.active { display: block; }
.panel-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  margin-bottom: 1.25rem;
  transition: color 200ms ease, gap 200ms ease;
}
.panel-back-btn:hover { color: var(--color-primary-dark); gap: 0.6rem; }

/* ===== Map placeholder ===== */
.map-placeholder {
  background: linear-gradient(135deg, rgba(14,138,158,0.08) 0%, rgba(111,168,60,0.1) 100%);
  border: 1px dashed var(--color-line);
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-fg);
  gap: 0.5rem;
  min-height: 240px;
}

/* ===== Article body (news / activity detail) ===== */
.article-body {
  color: var(--color-ink);
  line-height: 1.9;
  font-size: 1rem;
}
.article-body p { margin-bottom: 1.2rem; }
.article-body h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 2rem 0 0.9rem;
}

/* ===== Interactive Changhua township map ===== */
.map-section-card {
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px -4px rgba(14,138,158,0.14);
  padding: 1.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .map-section-card { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 2rem; }
}
.map-svg-wrap { position: relative; }
.changhua-map-svg { width: 100%; height: auto; display: block; }
.changhua-map-svg .township {
  fill: var(--color-line);
  stroke: #ffffff;
  stroke-width: 4;
  cursor: pointer;
  transition: fill 200ms ease, opacity 200ms ease;
  outline: none;
}
.changhua-map-svg .township:hover { fill: var(--color-primary-light); }
.changhua-map-svg .township:focus-visible { fill: var(--color-primary-light); stroke: var(--color-primary-dark); stroke-width: 6; }
.changhua-map-svg .township.has-orgs { fill: #8FE0D4; }
.changhua-map-svg .township.has-orgs:hover { fill: var(--color-primary-light); }
.changhua-map-svg .township.active { fill: var(--color-primary); }
.changhua-map-svg .township.active:hover { fill: var(--color-primary-dark); }

.map-info { display: flex; flex-direction: column; gap: 1rem; }
.map-info-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-secondary); text-transform: uppercase; }
.map-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  min-height: 2rem;
}
.map-status .count-pill {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}
.map-reset-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-muted, #EAF6F0);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.map-reset-btn:hover { background: var(--color-line); }
.map-reset-btn[hidden] { display: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.8rem; color: var(--color-muted-fg); }
.map-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.map-legend-swatch { width: 0.7rem; height: 0.7rem; border-radius: 999px; display: inline-block; }

/* ===== Footer visit-stats ===== */
.visit-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}
.visit-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}
.visit-stat i { font-size: 1rem; color: rgba(255,255,255,0.5); }
.visit-stat strong {
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.online-dot { color: #4ADE80 !important; animation: online-pulse 2s ease-in-out infinite; }
@keyframes online-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none; }
}

/* ===== Lightbox（圖片放大彈窗） ===== */
[data-lightbox-item] { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,30,28,0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-overlay img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease;
  border: none;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-close { top: 1.25rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  text-align: center;
  padding: 0 3rem;
}

/* ===== 活動辦理地點分布圖 ===== */
.activity-map-svg .township { fill: #EAF6F0; stroke: #ffffff; stroke-width: 3; transition: fill 150ms ease; }
.activity-map-svg .township.has-activity { fill: #8FE0D4; cursor: pointer; }
.activity-map-svg .township.has-activity:hover { fill: var(--color-primary-light); }
.activity-map-svg .township.has-activity:focus-visible { fill: var(--color-primary-light); stroke: var(--color-primary-dark); stroke-width: 6; }
.activity-map-svg .township.card-highlight { fill: var(--color-primary) !important; }

.activity-map-badge { cursor: pointer; }
.activity-map-badge circle { fill: var(--color-warm-dark); stroke: #fff; stroke-width: 4; transition: fill 150ms ease; }
.activity-map-badge:hover circle, .activity-map-badge:focus-visible circle { fill: var(--color-primary-dark); }
.activity-map-badge text {
  fill: #fff;
  font-weight: 800;
  font-size: 34px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.township-card {
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  transition: box-shadow 200ms ease, border-color 200ms ease;
  scroll-margin-top: 6rem;
}
.township-card.card-flash { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14,138,158,0.18); }
.township-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.township-card-name { font-weight: 800; color: var(--color-ink); font-size: 0.98rem; }
.township-card-count { font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--color-warm-dark); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; }
.township-card ul { font-size: 0.82rem; color: var(--color-muted-fg); line-height: 1.7; padding-left: 1.1rem; list-style: disc; }

.route-activity-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(191,230,214,0.7);
}
.route-activity-path { font-size: 0.78rem; font-weight: 700; color: var(--color-secondary); white-space: nowrap; }
.route-activity-title { font-size: 0.85rem; color: var(--color-ink); }

/* ===== 首頁輪播圖 ===== */
.carousel {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--gradient-brand);
  box-shadow: 0 16px 36px -16px rgba(14,138,158,0.35);
}
.carousel-track { display: flex; transition: transform 550ms cubic-bezier(0.65,0,0.35,1); }
.carousel-slide { flex: 0 0 100%; aspect-ratio: 21/9; position: relative; background: var(--gradient-brand); }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 1.5rem 1.25rem;
  background: linear-gradient(0deg, rgba(10,107,122,0.75) 0%, rgba(10,107,122,0) 100%);
  color: #fff; font-size: 0.85rem; font-weight: 700;
}
@media (max-width: 640px) { .carousel-slide { aspect-ratio: 4/3; } }
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: rgba(255,255,255,0.9); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; transition: background-color 150ms ease, transform 150ms ease;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.3);
}
.carousel-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }
.carousel-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2; }
.carousel-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.55); border: none; cursor: pointer; padding: 0; transition: background-color 150ms ease, width 150ms ease; }
.carousel-dot.active { background: #fff; width: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}