/* ==========================================================================
 * Ocean Chat — スマホ表示専用スタイルシート
 *
 * 目的: PC版（index.html）を止めずに、スマホの見た目だけを並行して直すための場所。
 * 担当: Codex レーン（2026-07-28 水谷さん決裁・dev-rules §0-J のレーン分離に基づく）
 *
 * --------------------------------------------------------------------------
 * ★このファイルを触る人へ（絶対に守ること）
 * --------------------------------------------------------------------------
 * 1. 触ってよいのは この mobile.css だけ。
 *    - index.html / worker/ / firestore.rules は絶対に編集しない
 *      （index.html は Claude レーンが1日に何十回も書き換えている。触ると片方の作業が消える）
 * 2. deploy しない。
 *    - firebase-deploy/public/ は丸ごと1サイトとして出るため、こちらから deploy すると
 *      Claude レーンの未反映分が巻き戻る（2026-07-22 に実際に起きた事故と同じ形）。
 *    - 編集して commit / push まで。本番反映は Claude レーン（繋）がまとめて行う。
 * 3. commit はファイル限定で。
 *      git commit -m "..." -- public/mobile.css
 *    （引数なしの commit は他人の作業を巻き込む。dev-rules §5-4-E）
 * 4. HTML の構造そのものを変えないと直らない崩れに当たったら、
 *    CSS で無理をせず「どの要素をどう変えたいか」を書いて繋に渡すこと。
 *
 * --------------------------------------------------------------------------
 * 書き方
 * --------------------------------------------------------------------------
 * - このファイルは index.html の <style> より後に読み込まれる。
 *   同じ詳細度なら後勝ちなので、!important を使わずに上書きできる。
 *   （!important は次に直す人が上書きできなくなるので、極力使わない）
 * - 必ず @media で囲み、PC表示に影響を与えないこと。
 *   PC版のブレークポイントは 820px / 900px / 1024px が使われている。
 * - 文字は「読める大きさ・濃さ」で（dev-rules §1-0）。
 *   12px 以下、#888 より薄いグレー、opacity での薄字は禁止。
 * - ボタン・チップ・バッジは角丸4〜6pxの四角。楕円pillは禁止（全システム共通ルール）。
 *
 * --------------------------------------------------------------------------
 * 直す対象（2026-07-28 時点で分かっている崩れ）
 * --------------------------------------------------------------------------
 * - ヘッダーの要素が重なる
 * - 画面の中央に説明のつかない縦線が入る（西塚さんからも報告あり）
 * - 下部タブのラベルが見切れる
 * ※ 実機スクショを見てから直すこと。推測で足すと悪化する。
 * ========================================================================== */

@media (max-width: 820px) {
  /* ここにスマホ用の指定を書く */
}