公園マップ: ポリゴンのハイライト配色を3種類から選べるようにする

ParkMap.astro: 通常のハイライトと選択中の色・線幅・光彩を
data-park-theme で切り替えられるようにする
ParksFilters.astro: 「ハイライト」（標準/強調/色覚配慮）の選択を追加
選択は localStorage に保存し、再読み込み後も保持する

1 files changed, 68 insertions, 3 deletions

diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index b9aa641..5a1a530 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -7,6 +7,7 @@
   <div
     id="park-map"
     class="park-map"
+    data-park-theme="standard"
     role="region"
     aria-label="小平市の公園の位置（OpenStreetMap）"
   ></div>
@@ -330,14 +331,48 @@
   :global(.park-map-fullscreen button:hover) {
     background: #f1f5f9;
   }
+  /* 公園ポリゴンのハイライト配色。色覚や見やすさに合わせて3種類から選べる。
+     park-blink＝通常のハイライト（何も選択していないとき）、
+     park-selected＝抽出・選択された公園。 */
+  :global(.leaflet-overlay-pane path.park-blink) {
+    animation: park-blink-pulse 2s ease-in-out infinite;
+  }
   :global(.leaflet-overlay-pane path.park-selected) {
-    filter: drop-shadow(0 0 6px rgba(27, 94, 32, 0.95));
     animation: park-selected-pulse 1.2s ease-in-out infinite;
   }
-  :global(.leaflet-overlay-pane path.park-blink) {
+  /* 標準（黄・緑） */
+  :global(.park-map[data-park-theme="standard"] path.park-blink) {
     fill: #ffd54f;
     stroke: #ff6d00;
-    animation: park-blink-pulse 2s ease-in-out infinite;
+  }
+  :global(.park-map[data-park-theme="standard"] path.park-selected) {
+    fill: #69f0ae;
+    stroke: #1b5e20;
+    filter: drop-shadow(0 0 6px rgba(27, 94, 32, 0.95));
+  }
+  /* 強め（黄・紫＋黒フチでコントラストを強く） */
+  :global(.park-map[data-park-theme="strong"] path.park-blink) {
+    fill: #ffeb3b;
+    stroke: #111111;
+    stroke-width: 2.4;
+  }
+  :global(.park-map[data-park-theme="strong"] path.park-selected) {
+    fill: #d500f9;
+    stroke: #111111;
+    stroke-width: 4.5;
+    filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.8));
+  }
+  /* 色覚配慮（青・橙）。色だけに頼らず線の太さでも区別する */
+  :global(.park-map[data-park-theme="cvd"] path.park-blink) {
+    fill: #90caf9;
+    stroke: #0d47a1;
+    stroke-width: 2.2;
+  }
+  :global(.park-map[data-park-theme="cvd"] path.park-selected) {
+    fill: #ffb74d;
+    stroke: #bf360c;
+    stroke-width: 4.5;
+    filter: drop-shadow(0 0 7px rgba(191, 54, 12, 0.8));
   }
   @keyframes park-selected-pulse {
     0%,
@@ -859,6 +894,36 @@
   if (el && !el.dataset.initialized) {
     el.dataset.initialized = "1";
 
+    // 公園ポリゴンのハイライト配色（標準 / 強め / 色覚配慮）。
+    // 選んだ配色はブラウザに記憶する。
+    const themeSelect = document.querySelector<HTMLSelectElement>(
+      "[data-park-theme-select]",
+    );
+    const THEME_KEY = "park-highlight-theme";
+    const THEMES = ["standard", "strong", "cvd"];
+    const applyTheme = (value: string) => {
+      el.dataset.parkTheme = THEMES.includes(value) ? value : "standard";
+    };
+    let savedTheme = "standard";
+    try {
+      const stored = localStorage.getItem(THEME_KEY);
+      if (stored && THEMES.includes(stored)) savedTheme = stored;
+    } catch {
+      // ブラウザの保存が使えなくても配色は既定で動作する
+    }
+    applyTheme(savedTheme);
+    if (themeSelect) {
+      themeSelect.value = el.dataset.parkTheme || "standard";
+      themeSelect.addEventListener("change", () => {
+        applyTheme(themeSelect.value);
+        try {
+          localStorage.setItem(THEME_KEY, themeSelect.value);
+        } catch {
+          // 保存できなくても配色の切り替え自体は有効
+        }
+      });
+    }
+
     const isTouch =
       L.Browser.mobile || window.matchMedia("(pointer: coarse)").matches;
     const map = L.map(el, {