/* 安頓地圖試點（地圖為主版）：2 主色 + 2 輔色，3 級字體（14 / 16 / 32px），8 / 16 / 24 / 32px 間距階梯 */
:root {
  --navy: #12395b;
  --teal: #0e7c6b;
  --bg: #f4f6f8;
  --amber: #8a5a00;
  --text: #1c2430;
  --muted: #52606d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.stage { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link:focus {
  position: static;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  padding: 16px 24px;
}
.site-header { background: var(--navy); color: #fff; padding: 32px 0 24px; }
.site-header h1 { font-size: 32px; margin: 8px 0; }
.eyebrow { font-size: 14px; letter-spacing: .04em; margin: 0; color: #cfe3dd; }
.lede { font-size: 16px; margin: 8px 0 16px; }
.notice {
  background: #fff8e1;
  border-left: 4px solid var(--amber);
  padding: 16px;
  color: var(--text);
}
.site-header .notice { background: rgba(255, 255, 255, .12); border-left-color: #ffd166; color: #fff; }
.card {
  background: #fff;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
}
h2 { font-size: 16px; margin-top: 0; color: var(--navy); }
h3 { font-size: 16px; color: var(--navy); margin-top: 24px; }
label { display: block; font-weight: 600; margin-top: 16px; }
input, select, textarea {
  width: 100%;
  font-size: 16px;
  padding: 16px;
  margin-top: 8px;
  border: 1px solid #9aa5b1;
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 3px solid #7fb8ad; outline-offset: 1px; }
button {
  font-size: 16px;
  padding: 16px 24px;
  margin-top: 16px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 48px;
}
button.primary { background: var(--teal); color: #fff; border: 1px solid var(--teal); }
button.secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.help, .source { color: var(--muted); font-size: 14px; }
.form-message { font-weight: 600; }
.toggles label { display: block; font-weight: 400; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { margin: 8px 0; }
.checklist input { width: auto; margin-right: 8px; }
a { color: #0b5cab; }
a:focus { outline: 3px solid #7fb8ad; outline-offset: 1px; }
/* 使用目的：兩枚小型點選標籤 */
.mode-fieldset { border: 0; padding: 0; margin: 24px 0 0; }
.mode-fieldset legend { font-weight: 600; }
.mode-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mode-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 8px 16px;
  border: 1px solid #9aa5b1;
  border-radius: 8px;
  cursor: pointer;
  min-height: 48px;
}
.mode-chip input { width: 16px; height: 16px; margin: 0 8px 0 0; accent-color: var(--teal); }
.mode-chip span { font-weight: 400; }
.mode-chip:has(input:checked), .mode-chip.is-selected { border: 3px solid var(--teal); background: var(--bg); font-weight: 600; }
.mode-chip:focus-within { outline: 3px solid #7fb8ad; outline-offset: 1px; }
/* 試點快速選擇 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  margin-top: 0;
  padding: 8px 16px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  font-weight: 600;
}
/* 地圖為主（方案 C）：地圖佔頁面主導，右側窄浮動面板浮於地圖之上 */
.map-wrap {
  position: relative;
  height: 72vh;
  min-height: 520px;
  max-height: 820px;
  margin: 16px 0 0;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 0;
}
#map-fallback {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 348px);
  background: #fff;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  padding: 16px;
  z-index: 900;
}
.float-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
  padding: 16px;
  overflow: auto;
  z-index: 1000;
}
.float-panel h2 { margin-top: 24px; }
.float-panel .mode-fieldset { margin-top: 16px; }
.float-panel .chips { margin-top: 16px; }
.float-panel .chip { padding: 8px 12px; }
.panel-detail { background: var(--bg); border-radius: 8px; padding: 16px; margin-top: 8px; }
.panel-detail p { margin: 0; }
.panel-detail button { padding: 8px 16px; }
#panel-landmark-list { list-style: none; padding-left: 0; }
#panel-landmark-list li { margin: 8px 0; }
#panel-landmark-list button {
  width: 100%;
  text-align: left;
  margin-top: 0;
  padding: 8px 16px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  font-weight: 600;
}
#toggle-landmarks { width: 100%; }
.map-bar { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.leaflet-popup-content button { padding: 8px 16px; margin-top: 8px; }
/* 地標圖釘：文字＋顏色雙重區分，不只靠顏色 */
.map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--navy);
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
}
.map-marker.school { border-color: var(--teal); color: var(--teal); }
.map-marker.medical { border-color: var(--amber); color: var(--amber); }
.marker-toggles label { display: inline-block; font-weight: 400; margin-right: 16px; }
.marker-toggles input { width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; accent-color: var(--teal); }
.legend { margin-top: 16px; }
.marker-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--navy);
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  margin: 0 8px 0 16px;
}
.marker-sample.school { border-color: var(--teal); color: var(--teal); }
.marker-sample.medical { border-color: var(--amber); color: var(--amber); }
/* 資訊圖層分頁 */
.layer-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.layer-tab {
  margin-top: 0;
  padding: 8px 16px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  font-weight: 600;
}
.layer-tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.layer-panel { margin-top: 24px; }
.report-link { margin-top: 16px; }
.report-link a { font-weight: 600; }
#show-feedback { display: block; }
details.card summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: 48px; }
details.card summary:focus { outline: 3px solid #7fb8ad; outline-offset: 1px; }
footer { padding-bottom: 32px; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .card { padding: 16px; }
  .stage { padding: 0 8px; }
  .map-wrap { height: 620px; min-height: 0; }
  #map-fallback { left: 8px; right: 8px; top: 8px; max-width: none; }
  .float-panel {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    width: auto;
    max-height: 46%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, #map-stage, #not-covered, #layers-card, #show-feedback, #feedback-card, .layer-tabs, .report-link, .skip-link { display: none !important; }
}