---
// 地図の見方・凡例。地図と一覧表を近づけるため、一覧表の下に表示する。
// 遊具アイコンの凡例は ParkMap.astro のスクリプトが [data-play-legend] に流し込む。
---

<details class="park-map-help">
  <summary>地図の見方・凡例</summary>
  <div class="park-map-legend" aria-hidden="true">
    <span><i class="swatch swatch-matched"></i>一覧と一致</span>
    <span><i class="swatch swatch-unmatched"></i>一覧にない公園・緑地</span>
    <span><i class="swatch swatch-nearby"></i>市外の近い公園（500m以内）</span>
    <span><i class="swatch swatch-facility"></i>公共施設</span>
    <span><i class="swatch swatch-facility-nearby"></i>市外の公共施設</span>
    <span><i class="swatch swatch-boundary"></i>小平市の境界</span>
    <span><i class="swatch-fac swatch-fac-toilet">WC</i>トイレ</span>
    <span><i class="swatch-fac swatch-fac-water"><svg viewBox="0 0 24 24" width="10" height="10" aria-hidden="true"><path fill="currentColor" d="M12 2.7c-3.4 4.2-6 8.1-6 11.3a6 6 0 0 0 12 0c0-3.2-2.6-7.1-6-11.3z" /></svg></i>水飲み場（拡大時）</span>
  </div>
  <div class="park-play-legend" data-play-legend></div>
  <p class="park-map-note">
    公園の範囲を赤、市外の近い公園を青、公共施設を紫（市外はオレンジ）で表示しています。地図を拡大すると見やすくなります。PCでは地図上でスクロールするとズームできます。市外の近い公園のうち、範囲が取得できないものは丸で表示しています。トイレと水飲み場のアイコンは拡大すると表示されます。さらに拡大すると、遊具アイコン（上の凡例）が表示されます。OpenStreetMapに公園として登録されている範囲を表示しているため、すべての公園を網羅しているわけではありません。現在地は端末内でのみ利用し、サーバーには送信しません。地図データ © <a
      href="https://www.openstreetmap.org/copyright"
      target="_blank"
      rel="noopener">OpenStreetMap</a
    > contributors
  </p>
</details>

<style>
  .park-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    margin-top: 0.5rem;
    color: var(--sl-color-gray-2);
    font-size: 0.8rem;
  }
  .park-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
  }
  .swatch-matched {
    background: #e53935;
  }
  .swatch-unmatched {
    background: #ffcdd2;
  }
  .swatch-nearby {
    background: #42a5f5;
  }
  .swatch-facility {
    background: #8e24aa;
    border-radius: 50%;
  }
  .swatch-facility-nearby {
    background: #fb8c00;
    border-radius: 50%;
  }
  .swatch-boundary {
    height: 0;
    border-top: 4px solid #6a1b9a;
    border-radius: 0;
    background: transparent;
  }
  .swatch-fac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 0.3rem;
    color: #fff;
    font-style: normal;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
  }
  .swatch-fac-toilet {
    background: #455a64;
    border-radius: 4px;
  }
  .swatch-fac-water {
    background: #0277bd;
    border-radius: 50%;
  }
  .park-map-note {
    margin-top: 0.4rem;
    color: var(--sl-color-gray-2);
    font-size: 0.8rem;
  }
  .park-play-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin: 0.5rem 0 0;
    color: var(--sl-color-gray-2);
    font-size: 0.78rem;
  }
  .park-play-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
</style>