SUI hair atelier ― 予約体験デモ
==================================================
架空の美容室の予約フローのデザイン／プロトタイプです。
実店舗ではありません。実際の予約は作成されません。

■ ファイル
--------------------------------------------------
SUI hair atelier 予約アプリ.dc.html
    デザイン本体。PC側の説明 ＋ 390px 端末モック。
    Tweaks: showIntro（説明の表示）/ startStep（開始ステップ 1–5）/
            showEndTime（時間枠に終了時刻を併記）

booking.html
    単体で動く版。CSS / JS / SVG をすべて内包。
    外部ライブラリ・外部フォント・外部画像を一切読み込みません。
    ファイルをダブルクリックするだけで動作します。

notes.txt
    このファイル。


■ 画面フロー
--------------------------------------------------
① メニュー   → ② 担当者 → ③ 日時 → ④ 内容確認 → ⑤ 完了見本

  ・「次へ進む」で前進。④ では「デモの予約を確定」。
  ・「戻る」で①〜④を後退。戻っても選択内容は保持されます。
  ・⑤ の「最初から試す」で全選択をリセットし ① へ。
  ・進む前に必須選択を検証。未選択のまま押すと
    フッターにエラーメッセージを表示し、前進しません。
  ・現在ステップはヘッダーの「STEP n / 5」、プログレスバー、
    5つのステップ名（現在のみ白＋太字）の3か所で示します。


■ 固定サンプルデータ
--------------------------------------------------
メニュー（すべて税込・指名料なし・追加料金なし）
  カット            60分   ¥5,500
  カット＋カラー    120分  ¥12,100
  ヘッドスパ        45分   ¥4,400

担当者（実在人物ではありません。顔写真・経歴は使用していません）
  おまかせ  空いているスタッフが担当します
  青木      ショート・骨格に合わせた設計が得意
  森        カラー・透明感のある色づくりが得意

日付（2026年10月1日(木) 〜 10月7日(水) の1週間で固定）
  10/1(木) 10/2(金) 10/3(土) 10/4(日) 10/5(月)=定休 10/6(火) 10/7(水)

時間枠（営業時間 10:00〜19:00）
  10:00 / 13:00 / 16:00
  最長コース120分でも 16:00 + 120分 = 18:00 で閉店を越えません。

選択不可の枠と、その理由表示
  10/5(月)      → 日付セルを破線グレー＋「定休」と表記
  10/1 13:00    → 「この枠は満席です（固定サンプル）」＋「満席」バッジ
  10/3 10:00    → 同上


■ 状態遷移
--------------------------------------------------
state = { step, menu, stylist, date, time, error }

  メニュー選択    → menu を更新、error クリア
  担当者選択      → stylist を更新、error クリア
  日付選択        → date を更新、★ time を null にクリア、error クリア
                    （別の日に切り替えると時間選択は必ず解除される）
  時間選択        → time を更新、error クリア
  次へ            → 検証OK なら step+1、NG なら error のみ更新
  戻る            → step-1（選択値はそのまま保持）、error クリア
  最初から試す    → 全項目を初期値に戻し step=1

検証ルール
  step1: menu 必須      → 「メニューを選んでください。」
  step2: stylist 必須   → 「担当者を選んでください。」
  step3: date 必須      → 「日付を選んでください。」
  step3: time 必須      → 「時間を選んでください。」

金額・所要時間の一貫性
  ④確認・⑤完了に出る税込総額／所要時間は、いずれも選択中の
  メニュー1件から算出しています（追加料金・指名料の加算なし）。
  リセットするまで state を保持するため、①〜⑤で必ず一致します。


■ アクセシビリティ／レイアウト上の配慮
--------------------------------------------------
・選択肢はすべて <button>。Tab / Shift+Tab で移動、Enter・Space で選択。
・選択状態は色だけに頼らず、2px の枠線＋「✓ 選択中」ラベル＋
  aria-pressed="true" の3つで示します。
・選択不可の枠は aria-disabled="true"、破線の枠、テキストの理由を併記。
・ステップが変わると見出し（tabindex="-1"）へフォーカスを移します。
  ページ読み込み直後は勝手にフォーカスを奪いません。
・タップ領域は 44px 以上（日付セル58px、時間枠60px、ボタン52px）。
・フッターは固定。本文の下に 130px の余白を確保しているため、
  最後の項目がボタンに隠れません。iOS の safe-area にも対応。
・横スクロールなし。日付は 7 列 grid（minmax(0,1fr)）で収めています。
・PC（861px〜）では左に落ち着いた説明、右に 390px の端末モック。
  モバイル（〜860px）ではアプリが全画面、説明はその下。


■ 実サービス化で必要になる未実装項目
--------------------------------------------------
・空き枠のリアルタイム取得と排他制御（二重予約の防止）
・氏名・連絡先の入力と本人確認、会員登録／ログイン
・予約の送信・保存（サーバー／DB）、予約番号の発行
・確認メール・SMS・プッシュ通知、リマインド
・決済（事前決済・デポジット）、キャンセル・変更・キャンセルポリシー
・スタッフ別のシフトと施術可能メニューの管理、指名料・オプション料金
・複数メニューの同時予約、所要時間の可変見積り
・営業日カレンダーの管理（臨時休業・繁忙期）
・多言語対応、利用規約・プライバシーポリシー
