展開図アセンブリガイド（組み立て手順ステップ表示）の追加

## 1. 目的
展開図を印刷・切り取った後に「どこをどう折ればよいか」がわからず完成できないユーザーの離脱を防ぐ。図形ごとに番号付きの組み立て手順をステップ形式で表示し、ペーパークラフト初心者でも完成まで導く。

## 2. 具体的な仕様

### 2-1. UIの追加位置
- PCレイアウト：右カラム（プレビュー下）に「組み立てガイド」セクションを追加
- スマホレイアウト：既存タブ（設定・プレビュー等）の末尾に「ガイド」タブを追加
- 既存のプレビュー・設定UIには一切手を加えない

### 2-2. ガイド表示内容
- 選択中の図形に応じて、PHPまたはJSの静的データ（連想配列）から手順テキストと対応する面番号を取得して表示
- 各ステップは以下の構成：
- ステップ番号（例：STEP 1）
- 短い説明文（例：「底面①を折り線に沿って内側に折ります」）
- ハイライト面ID（例：face_bottom）→ 展開図SVG上の該当面を黄色の点滅枠でハイライト
- ステップは「◀ 前へ」「次へ ▶」ボタンで1つずつ進める形式（全ステップ数も表示：例 2 / 6）
- 「全ステップを一覧表示」トグルで全手順をリスト表示に切り替え可能

### 2-3. ハイライト連動仕様
- ステップ切り替え時、展開図SVGの対象face要素に `.guide-highlight` クラスを付与
- CSSで黄色半透明の枠＋点滅アニメーション（`@keyframes`）を付与し、0.5秒後に安定表示
- ステップ移動時に前のハイライトは解除
- 展開図のカスタマイズ設定（色・パターン等）には影響しない（ハイライトはオーバーレイのみ）

### 2-4. データ構造（JS静的オブジェクト）
```js
const ASSEMBLY_GUIDES = {
cube: [
{ step: 1, text: "展開図を輪郭線に沿って切り取ります", faces: [] },
{ step: 2, text: "すべての折り目を山折りにします", faces: ["all"] },
{ step: 3, text: "底面①を折り曲げます", faces: ["face_bottom"] },
{ step: 4, text: "側面②③④⑤を順に立ち上げます", faces: ["face_side1","face_side2","face_side3","face_side4"] },
{ step: 5, text: "のりしろにのりを付けて側面を接着します", faces: ["glue_tabs"] },
{ step: 6, text: "最後に天面⑥を閉じて完成です", faces: ["face_top"] }
],
// 他9図形も同様に定義（triangular_prism, hexagonal_prism 等）
};
```

### 2-5. 印刷・PNG出力への組み込み（オプション）
- 印刷時に「ガイドも印刷する」チェックボックスを追加（デフォルトOFF）
- ONの場合、展開図の下部に手順テキスト一覧をHTMLとして追加してからwindow.print()を呼ぶ
- PNG出力には含めない（展開図の純粋性を維持）

## 3. 既存機能との整合
- 展開図SVGの生成ロジック・サイズスライダー・色設定・URL共有・LocalStorage保存には一切変更を加えない
- ハイライトはSVG要素へのクラス付け外しのみで実現し、face要素のfill等の属性は書き換えない
- 図形切り替え時にガイドを自動でSTEP 1にリセットするイベントリスナーをDOMContentLoaded後に追加するだけで既存の図形選択処理を壊さない
- スマホタブ追加はtabindexとaria属性を適切に付与し、既存タブのインデックスを変えずに末尾追加する