概要：なぜ横向きが細くなるのか

公開中の /kokage では .page-sheet の幅が高さ（例: 100svh / √2）に連動しています。 Apple iPhone Duo のような折りたたみ・横長ビューでは、高さが低いほど紙面が極端に細くなります。本マニュアルは、画面幅ベースへ切り替える追加CSSの説明と適用手順です。

本番適用済（2026-09-10）実機チェックのみ任意

適用手順へ duo-responsive.css を取得

何が問題か

高さ依存の紙面幅 — .page-sheet が 100svh / 1.41421 などで制限され、例として 844×390 の横長ビューでは幅が約 276px 程度まで縮みます。
文字・余白の連動 — 本文サイズや余白もこの幅に引きずられるため、幅だけ直すと文字が過大になります。
グリッドの誤判定 — ホームのカードが狭い画面でも2列になり、相談・来場フォームの段組みが紙面幅ではなく viewport 幅に依存します。

注意： 上記のピクセル例は一般的な横長 viewport の説明用です。Duo の確定 CSS viewport 寸法を示すものではありません。

Duo向けの方針

機種名判定や未確認の折り目 API に頼らず、利用可能な画面幅と safe-area に合わせてレイアウトします。

高さ依存をやめ、最大 72rem の画面幅ベースの紙面へ変更
本文を 1rem に固定し、余白は上限付きの可変値（必要なら container query）
出店・物語カードを 1 / 2 / 4 列、相談・来場フォームをコンテナ幅で切替
タップ領域・長いファイル名・safe-area・低い画面高に対応
開閉時にコンポーネントを再生成せず、入力・送信・相談の状態を維持

提供物

duo-responsive.css — 追加スタイル本体
apply-snippet.txt — import / ビルドの短いメモ
パッチ元（BOX）: /workspace/kokage-duo-patch/

対象パス（参考）

公開URL: https://macbook-air.tail70852b.ts.net/kokage
編集元（Mac）: /Users/yuika/Sites/kokage-soudan
想定スタック: Next.js + 既存グローバル CSS

本マニュアルサイトは BOX 上で完結しています。Mac への適用は別手順です。

ソース取得後の追加候補

CSSパッチ以外に、ソース接続後に検討する項目です（本マニュアルの必須作業ではありません）。

相談入力の Enter に isComposing / Safari keyCode === 229 ガード
操作行・トピック欄の折り返しをコンテナ基準に
狭幅フォームの入れ子余白を実コンポーネントで調整