/*
    Green 製の CSS（海外マップ・Step3-24-2a で新設）。
    Blue に対応するファイルは無い＝**移送物ではない**。

    ── ここに書いてよいものは2種類だけ ────────────────────────────
    (1) 幅で出し分ける（見せる / 畳む）  … Step3-24-2a
        Blue は PC とモバイルで**別の HTML** を返していたので、片方にしか無い部品は
        もう片方に「出てこない」だけで済んでいた。HTML を1種類にすると
        **両方が同時に DOM に在る**ので、幅で畳む係がどうしても要る。
    (2) 残留プロパティの打ち消し（値を Blue 本番 PC の実測に戻す） … Step3-24-2c
        モバイル版が宣言していて PC 版が再宣言していないプロパティは、
        広い幅でもモバイルの値が残る。**値は必ず Blue の実測から採る（発明しない）。**

    ⚠️ **移送物（Blue 原本の CSS）は1バイトも触らない。** 差はこの1本に集約する。
    ⚠️ しきい値 **1000px** は レイアウトが読む PC 用 CSS の `media`・各ページの `media`・
       JS の `isNarrowLayout()`・レイアウトの `pcQuery` と**同値**にすること（計5箇所）。
       ズレると「PC の見た目なのに出し分けが効かない幅」が生まれる。
       🔴 **海外系は通常もマップも 1000px**（`_LayoutLangMain` は Step3-32 で上げた）。
          **768px のままなのは日本語系だけ**＝あちらは骨格が 1000px を要求していない。
          ここが 1000px なのは**PC 骨格が `layoutmap/Main.css` の `min-width: 1000px` を要求する**ため。
          768px のままだと 768〜999px で骨格が入りきらず、モバイル環境では
          ブラウザが縮小表示に入って**下に白帯**が出る（Step3-27-6・ユーザーが実機で発見）。
       🔑 **同値であることは `LangMoonMapPageTests.しきい値はCSSとJSとレイアウトで同値である` が見張る**
          （目録のサイズ/ハッシュは「何かが変わった」しか言わないので別に要る）。

    ── 🔴🔑 セレクタは「打ち消したい相手」と同じ鎖で書くこと（2026-08-06 に実際に外した）──
    後に読み込むだけでは勝てない。**詳細度が同じか強くないと負ける**。
    最初 `tbody #map_wrap …`（要素5個）と短く書いたら、移送物の
    `tbody tr td #map_wrap …`（要素7個）に負けて **PC 幅で畳めていなかった**
    （ユーザーが実機で発見）。⚠️ **エラーは出ず、ただ消えないだけ**。
    → **相手のセレクタをそのまま写して末尾に足す**のが安全。
*/

/* =========================================================================
   狭い幅（Blue のモバイルに合わせる）＝PC 専用の部品を畳む
   ========================================================================= */
/* 🔴 `999.98px` であって `999px` ではない（Step3-27-6 で実測）＝
      幅が小数（999.5px 等）になると **`max-width: 999px` も `min-width: 1000px` も外れて
      どちらの規則も当たらない隙間**ができる。実際に 999px で左カラムが畳まれず地図が幅0になった。
      📌 プロジェクトの他の CSS（`photos` / `privacy`）が `767.98px` と書いているのと同じ作法。 */
@media (max-width: 999.98px) {
    /* PC の左カラム（検索・SNS・のちにカレンダー等）。Blue のモバイルはセルが1つ。 */
    html body > table > tbody > tr > td.left_column {
        display: none;
    }

    /*
        PC のヘッダナビ。
        🔴 モバイル CSS には #nav_wrap の規則が1つも無いので、畳まないと
           **素のリンクの箇条書きがヘッダに露出する**（背景も効かないので文字が重なる）。
    */
    html body > table > thead > tr > td #nav_wrap {
        display: none;
    }

    /*
        PC のインライン広告の器（中身は Step3-24-4）。
        📌 Blue のモバイルはインライン枠を持たない（アンカー広告だけ）。
    */
    html body > table > thead > tr > td #ad_wrap {
        display: none;
    }

    /*
        🔴 ヘッダを div で包んだぶんの復元（2026-08-06・ユーザーが実機で発見）。

        Blue のモバイル CSS は `td > div { width: 100% }` と書いており、これは
        **ヘッダ直下の3つ**（#title_wrap / #rise_set_time_wrap / #date_and_buttons_wrap）に
        当たっていた。PC が `td > div` を名指ししている都合で包み直したので、
        **相手が包み側に移り、中の3つが width:100% を失った**。

        ⚠️ 症状＝`#title_wrap` は `display:flex` かつ `margin: 0 25px 0 0` なので、
           100% が無いと **右に 25px の白い隙間**ができる（Blue は 100%+25px で
           はみ出し、body の overflow:hidden で切られていた＝これが元の姿）。
        📌 **値は発明していない**＝移送物が書いていた `width: 100%` をそのまま戻すだけ。
    */
    html body > table > thead > tr > td > div > div {
        width: 100%;
    }
}

/* =========================================================================
   広い幅（Blue の PC に合わせる）＝モバイル専用の部品を畳む
   ========================================================================= */
@media (min-width: 1000px) {
    /*
        地図の上に重ねたページ移動ボタン（月／国／写真／国内向け）。
        📌 Blue の PC は同じ行き先を #nav_wrap に持つので、ここは畳む。
        ⚠️ 1つ目の ul（現在地・目印）は **PC にも在る**ので畳まない。
        🔴 セレクタは移送物と同じ鎖（`tbody tr td …`）で書くこと＝短くすると負ける（冒頭の注意）。
    */
    html body > table > tbody tr td #map_wrap #map_top_right_control_buttons_wrap ul:nth-of-type(2) {
        display: none;
    }

    /*
        🔴 モバイル版の複製を畳む（Step3-24-2b）。
        PC 版の同じ部品は左カラム（td.left_column）の中に別に在り、そちらが Blue の PC CSS で
        整形される。⚠️ **狭い幅では逆に PC 版が畳まれる**（左カラムごと display:none）ので、
        こちら側に対の指定は要らない。
        📌 時刻欄は骨格が違う（モバイル＝table 1行4セル／PC＝div 2つ）。
    */
    html body > table > thead > tr > td #rise_set_time_wrap {
        display: none;
    }

    /*
        🔴 日付バー（前日／カレンダーを開く／翌日）＝**Blue の PC には存在しない**。
        モバイルで地図を全画面にするために生まれた代替 UI で、
        PC は左カラムのカレンダーを直接クリックして日付を変える。
    */
    html body > table > thead > tr > td #date_and_buttons_wrap {
        display: none;
    }

    /*
        🔴 オーバーレイ（カレンダー＋時差）。PC は左カラムに常時表示の複製を持つ。
        📌 移送物でも既定は display:none で、開くのは JS。PC では開くボタン
           （#calendar_open_button）ごと畳んでいるので開けないが、明示的にも畳んでおく。
        ⚠️ **インラインスタイルには勝てない**ので、Step3-24-3 の JS 側でも
           「広い幅では開かない」を担保すること。
    */
    html body #mask_wrap {
        display: none;
    }

    /*
        📌 **SNS を畳む規則はもう要らない**（Step3-24-3c・ユーザー判断で SNS ごと撤去）。
           以前はここで地図上の SNS と開閉ボタンを PC 幅で `display:none` にしていたが、
           **要素そのものが DOM から消えた**ので、畳む対象が無い。
        ⚠️ 移送 CSS（`layoutmap.mobile/Main.css` 等）には SNS の装飾規則が残っているが、
           **当たる要素が無いだけ**で無害＝移送物は触らない（原則）。
    */
}

/* =========================================================================
   広い幅＝残留プロパティの打ち消し（Step3-24-2c）

   モバイル版が宣言していて PC 版が再宣言しないプロパティは、広い幅でも
   モバイルの値が残る。ここに書くのは**打ち消しだけ**で、値は必ず
   Blue 本番 PC（1280x900）の computed style 実測から採る（発明しない）。

   📊 2026-08-06 の総当たり突合（31要素 x 479プロパティ）で見つかった残留は
      **下の2件だけ**。他の差はすべて 24-3（JS 未実装）／24-4（広告）に帰着した。
   ========================================================================= */
@media (min-width: 1000px) {
    /*
        🔴 残留1＝ページ全体の文字選択が禁止されたままになる。

        移送物 `shared/layoutmap.mobile/Main.css` が **`html` に直付け**で
        `user-select: none` を宣言している（タップ時の意図しない選択を防ぐ狙い）。
        `user-select` は**継承する**ので、1箇所の宣言がページの全要素に効く
        （実測で 21 要素が none になっていた）。

        Blue の PC は この規則を持たない CSS しか読まないので `auto`。
        ⚠️ 症状は「**マウスで文字をドラッグ選択できない**」だけで、
           例外もコンソール出力も出ず、見た目も 1px も変わらない。
        📌 値は Blue PC の実測 `auto` をそのまま戻すだけ。
    */
    html {
        -webkit-user-select: auto;
        user-select: auto;
    }

    /*
        🔴 残留2＝地図右上のボタン群が 10px 高くなる（108px → 118px）。

        移送物のモバイル CSS は「1つ目の ul（現在地・目印）と 2つ目の ul
        （月／国／写真への移動）の間隔」として `margin: 0 0 20px` を宣言している。
        🎯 **Blue の PC には ul が1つしか無いので、この規則は無意味だった**。
           Green は複製方式で **両方を DOM に持つ**ため、2つ目を畳んでも
           「1つ目の下余白」だけが生き残った＝**複製方式の副作用**。

        ⚠️ セレクタは移送物の鎖をそのまま写すこと（短く書くと詳細度で負ける）。
        📌 値は Blue PC の実測 `margin-bottom: 0px` から。
    */
    html body > table > tbody tr td #map_wrap #map_top_right_control_buttons_wrap ul:nth-of-type(1) {
        margin-bottom: 0;
    }
}

/* =========================================================================
   打ち消さないと決めた差（2026-08-06・Step3-24-2c の突合で検出・記録のみ）

   ⚠️ 「見落とした」のか「不要と判断した」のかを後から区別できるように、
      **打ち消さない理由をここに残す**（消さないこと）。

   (C) #title_wrap の背景色 … Blue=transparent / Green=rgb(28,168,245)
       移送物のモバイル CSS が `#title_wrap` 自身にも青を塗っているため。
       🎯 **親の div が Blue でも Green でも同じ青**なので、
          重ね塗りになるだけで**画面上の色は完全に同一**。打ち消す意味が無い。

   (D) outline-width … Blue=0px / Green=2.66667px（button 4つ + #map_canvas）
       🎯 **`outline-style` が両方とも `none`** なので**描画されない**。
          幅だけが既定値のまま残っているが、線は 1px も出ない。
   ========================================================================= */