/* fx-spot.css：佈點首頁「板橋示範區」的版面（只有佈點首頁載入）。
   資料沒載成功時整段是 hidden，頁面跟原本一模一樣。 */
.spot-live { --spot-bg: var(--navy-deep, #0a1424); --spot-hot: var(--coral, #ff5e5b); --spot-cream: var(--cream, #f3e8d2); --spot-label: var(--muted-dark, #bdc8d4); padding-top: var(--space-6, 48px); }
.spot-live[hidden] { display: none; }
.spot-live .section-intro { margin-bottom: var(--space-6, 48px); }
.dark.spot-live .lead { color: var(--muted-dark, #bdc8d4); }
.spot-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 32px); }
.spot-map { border: 1px solid var(--line-dark, #ffffff29); border-radius: var(--radius, 4px); overflow: hidden; background: var(--spot-bg); aspect-ratio: 3627 / 3113; }
.spot-map canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }
.spot-map canvas:focus-visible { outline: 2px solid var(--spot-hot); outline-offset: -2px; }
.spot-card { display: flex; flex-direction: column; gap: var(--space-3, 24px); min-width: 0; }
.dark .spot-card p.spot-where { margin: 0; color: var(--paper, #fbfaf6); font: 700 1.25rem/1.5 var(--font-title, serif); }
.spot-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-dark, #ffffff29); border-bottom: 1px solid var(--line-dark, #ffffff29); }
.spot-nums > div { padding: var(--space-3, 24px) 0 var(--space-3, 24px) var(--space-2, 16px); border-left: 1px solid var(--line-dark, #ffffff29); min-width: 0; }
.spot-nums > div:first-child { padding-left: 0; border-left: 0; }
.spot-nums dt { font-size: var(--text-xs, .8125rem); line-height: 1.6; color: var(--muted-dark, #bdc8d4); }
.spot-nums dd { margin: 6px 0 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; color: var(--paper, #fbfaf6); }
.spot-nums b { font: 600 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--font-number, sans-serif); font-variant-numeric: tabular-nums; }
.spot-nums > div:first-child b { color: var(--spot-hot); }
.spot-nums small { font-size: var(--text-xs, .8125rem); }
.spot-radius { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-dark, #ffffff29); border-radius: var(--radius, 4px); }
.spot-radius button { appearance: none; min-height: 44px; padding: 10px 16px; border: 0; background: transparent; color: var(--muted-dark, #bdc8d4); font: 500 var(--text-sm, .9375rem)/1.4 var(--font-body, sans-serif); cursor: pointer; }
.spot-radius button + button { border-left: 1px solid var(--line-dark, #ffffff29); }
.spot-radius button[aria-pressed="true"] { background: var(--paper, #fbfaf6); color: var(--navy, #0e1b2e); }
.spot-radius button:focus-visible { outline: 2px solid var(--spot-hot); outline-offset: 2px; }
.spot-card .button { align-self: flex-start; }
.dark .spot-card p.spot-note { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted-dark, #bdc8d4); }
@media (hover: hover) and (pointer: fine) {
  .spot-radius button:not([aria-pressed="true"]):hover { color: var(--paper, #fbfaf6); background: #ffffff14; }
}
@media (min-width: 1024px) {
  .spot-stage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8, 64px); align-items: center; }
  /* 矮螢幕也能一眼看到整張圖 */
  .spot-map { justify-self: start; width: min(100%, calc((100svh - 140px) * 3627 / 3113)); min-width: 420px; }
}
@media (max-width: 639px) {
  .spot-nums b { font-size: 1.625rem; }
  .spot-nums > div { padding: 16px 0 16px 12px; }
  .spot-card { gap: 20px; }
  .spot-card .button { align-self: stretch; }
}
@media print {
  .spot-live { display: none; }
}