ゆめマガ ビューワー
月刊高卒採用情報誌「ゆめマガ」のWebビューワー。1,020行のImageSpreadViewerコンポーネントがコアで、デスクトップ見開き表示/モバイル単ページ表示を1200pxブレークポイントで自動切替。Refs駆動のアニメーション（60fps）、タッチスワイプ（velocity判定+15%threshold）、ピンチズーム（0.5x-4x、rubberband）、パン、ダブルタップリセット、キーボード操作を実装。PDF.jsベースのSpreadViewerとの切替にも対応し、外部CDN（assets.yumesuta.com）からの画像配信とPDFダウンロードを統合。
Next.js 15React 19TypeScriptNext.js ImagePDF.jsReact DOM flushSyncTailwind CSS 4
見開き/単ページ自動切替
1200pxブレークポイントでデスクトップ見開き（表紙単独→見開きペア→最終ページ単独）とモバイル単ページを自動切替。3パネルトラックによるスムーズスライド（300ms cubic-bezier）
- デスクトップ: 1 + ceil((totalPages-2)/2) + 1 スプレッド計算
- モバイル: totalPages = スプレッド数（1ページずつ）
- navigateToAdjacent: 3パネルトラックのtranslateXスライド（300ms）
- jumpToSpread: フェードイン/アウト（150ms×2）で遠いページへジャンプ
タッチ・スワイプ・ピンチズーム
1本指スワイプ（velocity 0.5px/ms + viewport 15%のthreshold判定）、2本指ピンチズーム（0.5x-4x、1x以下はrubberband 35%抵抗）、ズーム時パン、ダブルタップリセット
- touchstart: 指の本数で分岐（1本=スワイプ/パン、2本=ピンチ）
- スワイプ: 方向ロック10px → ドラッグ追従 → velocity/threshold判定 → 250msスライド or 300msスナップバック
- ピンチ: 距離比からスケール算出、1x以下は35%レジスタンス、リリース時1.1x未満はスナップバック（350ms overshoot）
- エッジ抵抗: 先頭/末尾スプレッドで30%減衰
UI表示制御 + 初回ヒント
センタータップ（25%-75%範囲）でヘッダー/スクラバーをトグル。IntersectionObserver連動でServiceSidebar/FloatingCTAも連動。初回ユーザーにはスワイプ/ピンチヒントを遅延表示
- viewer-ui-toggleカスタムイベントでサイト全体のUI連動
- showUI=false時にプログレスバー表示（反転ロジック）
- 初回ヒント: 未対話1.5秒/対話後60秒で表示、animate-pulse/animate-swipeHint
- キーボード: ArrowLeft/Right/Home/End対応