ParkMap.astro: フキダシの項目名を文字アイコン化

- 水飲み場はあり/なしで表示し、水滴アイコンを塗りつぶしに変更
- じゃぶじゃぶ池の池アイコンを追加し、地図上にも表示
- 特殊遊具のアイコンを星に変更
- ベンチ・椅子をベンチの絵に変更
- 試合形式は独立行をやめ、ボール遊びに括弧書きで併記
- 防災用具から防火水槽・消火栓を除外
- 一覧表はスマホでカード表示にして横スクロールをなくす

1 files changed, 72 insertions, 9 deletions

diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro
index 4918b2c..f85fea3 100644
--- a/src/components/ParksTable.astro
+++ b/src/components/ParksTable.astro
@@ -106,7 +106,7 @@ function facilityBadges(p: Park): Badge[] {
 // スイング遊具・健康遊具の判定用
 const SPRING_TOKENS = [
   "スプリング", "スイング", "リトルポップ", "リンクミニ", "ルッキンロッキン",
-  "リーフィー", "チューリー", "ロッキンパッピー", "ビー", "ハッピー",
+  "リーフィー", "チューリー", "ロッキンパッピー", "ロッキンパピー", "ビー", "ハッピー",
   "ハニー", "クップル", "ウゴウゴ",
 ];
 const HEALTH_TOKENS = [
@@ -188,17 +188,27 @@ const DETAIL_FIELDS: { key: string; icon: string }[] = [
   { key: "多目的広場", icon: "🏟" },
   { key: "築山", icon: "⛰" },
   { key: "じゃぶじゃぶ池", icon: "💦" },
-  { key: "防災用具", icon: "🧯" },
+  { key: "防災用具", icon: "🛟" },
   { key: "遊具", icon: "🎠" },
   { key: "時計", icon: "⏰" },
   { key: "駐車場", icon: "🅿" },
   { key: "その他設備", icon: "🔧" },
   { key: "備考", icon: "" },
 ];
+function disasterText(value: string): string {
+  return value
+    .split(/[、,]/)
+    .map((s) => s.trim())
+    .filter((s) => s && !s.includes("防火水槽") && !s.includes("消火栓"))
+    .filter((s) => /かまど|カマド|防災収納|レスキュー|防災器具|避難/.test(s))
+    .join("、");
+}
 function detailText(p: Park): string {
   const parts: string[] = [];
   for (const { key, icon } of DETAIL_FIELDS) {
-    const value = p[key];
+    const raw = p[key];
+    if (!raw) continue;
+    const value = key === "防災用具" ? disasterText(raw) : raw;
     if (!value) continue;
     parts.push(icon ? `${icon} ${value}` : value);
   }
@@ -705,7 +715,7 @@ function isUnconfirmed(p: Park): boolean {
     content: "🚻";
   }
   .parks .fac-water::before {
-    content: "🚰";
+    content: "💧";
   }
   .parks .fac-toy::before {
     content: "🎠";
@@ -729,14 +739,67 @@ function isUnconfirmed(p: Park): boolean {
     opacity: 0.85;
   }
 
-  /* スマートフォンでも表形式を維持し、横スクロールで見られるようにする。 */
-  @media (max-width: 640px) {
+  /* スマートフォンでは表をカード状に組み替え、横スクロールなしで読めるようにする。 */
+  @media (max-width: 700px) {
     .parks table {
-      font-size: 0.75rem;
+      display: block;
+      width: 100%;
+      min-width: 0;
+      font-size: 0.8rem;
+    }
+    .parks thead {
+      display: none;
+    }
+    .parks tbody,
+    .parks tbody tr,
+    .parks td {
+      display: block;
+    }
+    .parks tbody tr {
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+      grid-template-areas:
+        "name name name"
+        "addr area type"
+        "fac fac fac";
+      gap: 0.15rem 0.5rem;
+      padding: 0.45rem 0.55rem;
+      border-bottom: 1px solid var(--sl-color-hairline, #ddd);
+    }
+    .parks tbody tr:nth-child(even) td {
+      background: transparent;
+    }
+    .parks tbody tr:nth-child(even) {
+      background: color-mix(in srgb, var(--sl-color-text, #333) 5%, transparent);
     }
-    .parks th,
     .parks td {
-      padding: 0.3rem 0.4rem;
+      border: 0;
+      padding: 0;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+    .parks .is-name {
+      grid-area: name;
+    }
+    .parks .is-address {
+      grid-area: addr;
+      min-width: 0;
+    }
+    .parks .is-num {
+      grid-area: area;
+      text-align: left;
+    }
+    .parks .is-type {
+      grid-area: type;
+      text-align: left;
+    }
+    .parks .is-facility {
+      grid-area: fac;
+      min-width: 0;
+      max-width: none;
+    }
+    .parks tbody tr.is-selected td:first-child {
+      box-shadow: none;
     }
   }
 </style>