<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>文化祭 模擬店マップ</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- Panzoom（CDN）: ピンチ / ドラッグ / ズーム用 -->
<script src="https://unpkg.com/@panzoom/panzoom/dist/panzoom.min.js"></script>
</head>
<body>
<header class="site-header" role="banner">
<h1>文化祭 模擬店マップ</h1>
<p class="sub">スマホで見やすく — 1F / 2F 切替・ピンチでズーム</p>
</header>
<!-- タブ -->
<nav class="tabs" role="tablist" aria-label="フロア">
<button class="tab-button active" data-floor="1" role="tab" aria-selected="true">1階</button>
<button class="tab-button" data-floor="2" role="tab" aria-selected="false">2階</button>
</nav>
<!-- メイン（マップ領域：縦長にフィット） -->
<main class="main" role="main">
<div class="map-wrapper">
<!-- map (Panzoom を適用する要素) -->
<div id="map" class="map-container" aria-live="polite" aria-label="文化祭マップ">
<img id="mapImage" src="images/1F.png" alt="学校見取り図 1階">
<!-- ピン・吹き出しは script.js でここに挿入されます -->
</div>
</div>
</main>
<!-- 一覧を開くボタン -->
<button id="listToggle" class="list-toggle" aria-expanded="false" aria-controls="listPanel">
模擬店一覧
</button>
<!-- 一覧パネル（ボトムシート） -->
<div id="listPanel" class="list-panel" role="dialog" aria-hidden="true" aria-label="模擬店一覧">
<header class="list-panel-header">
<h2>模擬店一覧</h2>
<button id="closeList" class="close-btn" aria-label="閉じる一覧">✕</button>
</header>
<div id="listContent" class="list-content" tabindex="0">
<!-- JS で項目を生成 -->
</div>
</div>
<!-- スクリプト（defer扱いでロード） -->
<script src="script.js" defer></script>
</body>
</html>
