/*
    🎯 Green の意図的差分だけを書く場所（Step3-35-4）。
       Blue から運んだ `show/Main.css`（PC）と `show.mobile/Main.css`（モバイル）は
       **1バイトも書き換えない**ので、「1種類の HTML を幅で出し分ける」ために必要な調整だけを集める。

    ── 🔴🔴 重ね方（35-4d で「完全排他」に落ち着いた）──────────────────────
    ビュー側の読み込みは **PC とモバイルを `media` で完全に分ける**:

        show/Main.css          media="(min-width: 810px)"
        show.mobile/Main.css   media="(max-width: 809.98px)"
        green.css                                        (media 無し＝常に効く・最後)

    ⚠️ **「どちらかを土台にする」型は2回とも失敗した**（どちらも実機の崩れとして表面化）:
      ① モバイル土台（35-4b まで）… Blue のモバイル CSS は `> div#…` を挟むぶん要素セレクタが
         1つ多く**詳細度が構造的に高い**ため、広い幅で PC CSS が上書きできない
         → グローバルメニューが高さ 176px の箱に崩れた。
      ② PC 土台（35-4c）… モバイル CSS が**書いていない**プロパティは打ち消されず狭い幅に残る
         → `width: 210mm` で横スクロール 338px／`#header_wrap` の `display:flex` で
            ヘッダーのボタンが 100px に潰れ文字が切れた。
    🔑 **どちらを土台にしても「相手が書いていないプロパティ」が漏れる**＝打ち消しのモグラ叩き。
       **Blue は UA で HTML ごと分けており、2つの CSS は互いの存在を想定していない。**
       → CSS 側も完全に分けたことで、**打ち消しは原理的に1件も要らなくなった**。

    ⚠️ 代償＝境界の **0.02px（809.98〜810px）でどちらも当たらない**。
       Step3-27-6 で同じ手（`999.98px`）を採った前例があり、
       デバイスの CSS ピクセル幅は整数が普通なので実用上は踏まない。

    📌 しきい値 810px の根拠＝**カレンダーの実寸 794px ＋ スクロールバー 15px**（2026-08-08 実測）。
       809px で `clientWidth` が 794 になり過不足なく収まり、800px では 9px はみ出す。
    🔑 **しきい値は「ビューの link 2箇所」と「このファイルの @media 2箇所」だけ**。
       JS 側には持たせていない（`setScrollPos()` は広い幅でスクロール量が負になり
       `scrollLeft` が 0 に丸められるだけ＝無害）。
*/

/* ── 狭い幅＝モバイル CSS が効く範囲 ──────────────────────────────────
   ⚠️ ここは「Blue のモバイル版 HTML と Green の HTML の作りが違う」ことへの対処だけ。 */
@media (max-width: 809.98px) {

  /* 🔴🔴 狭い幅では横並びメニューを出さない（Step3-52・F-3・ユーザー依頼 2026-08-12）。

     【なぜこの1枚だけ出ていたか】Green は「狭い幅では横並びを隠しハンバーガーだけ使う」規則を
     `shared/layoutmain/Main.css:35` に持っているが、**このページは受け取っていない**＝
     `Views/Calendars/Show.cshtml` は `Layout = ""` の**自己完結ページ**で `layoutmain/Main.css` を
     読まないため。そこへ移送物のモバイル CSS が3列グリッド（`show.mobile/Main.css:326` の
     `width: 33.33333%`）を当てていたので、**ここだけ 60px の箱が3列で並んでいた**。
     📌 **L-121 / L-122 と同じ家系**＝共有ルールを受け取らない1枚が静かに違う姿になる型（3回目）。

     ⚠️ **詳細度**＝移送物は `html > body #body_wrap > div#global_menu > …` と異常に強いので、
        素の `#global_menu` では**負けて何も効かない**（`layoutmain/Main.css:18-22` に前科の記録）。
     🔑 **導線は消えない**＝ハンバーガー（`_SiteNav`）は `Show.cshtml:116` で出ている。

     📌 **この規則が入ったことで、下の2つ（`li.separates` の非表示と `a > em` の位置指定）は
        隠れた要素への装飾になり、実質的に効かなくなる**。消すかどうかは別途判断（今回は残す）。 */
  html > body #body_wrap > div#global_menu {
    display: none;
  }

  /* 🔴 Blue は PC 版とモバイル版で**別のグローバルメニュー部品**を持っている:
        - `_GlobalMenu.cshtml`（PC）  … 項目間に `<li class="separates">` を8個挟む／`New!` は `<a>` の中
        - `_GlobalMenu.Mobile.cshtml` … `separates` は無く `<li>` は項目9個だけ／`New!` は `<a>` の外
        Green は HTML を1種類しか出さないので **PC 版の作り**に統一している。
        → モバイル CSS の3列グリッド（`ul > li { width: 33.33% }`）に空の `separates` が
           セルとして並び、**歯抜けのグリッド**になる（実機でユーザーが発見）。 */
  html > body #body_wrap > div#global_menu > nav > ul > li.separates {
    display: none;
  }

  /* 🔴 `New!` バッジ。Blue のモバイル CSS は `li > em` に当てるが Green は `a > em` にあるので
        当たらず**素の斜体**で出る。Blue モバイルと同値を `a > em` に当て直す。 */
  html > body #body_wrap > div#global_menu > nav > ul > li > a > em {
    position: absolute;
    color: red;
    top: 0;
    left: 0;
    font-size: 1.0rem;
    margin: 0;
  }

  /* 🟢 印刷ボタンは Blue の PC が上下2個・モバイルが上1個。
        HTML は1種類しか出せない（サーバー UA 出し分けは禁止＝PERF-04 のキャッシュ事故）ので、
        **2個とも置いて狭い幅で下側を隠す**。 */
  html > body #body_wrap > div#main_content_wrap .print_button_bottom {
    display: none;
  }
}

/* ── 広い幅＝PC CSS だけが効く範囲 ───────────────────────────────────
   ⚠️ ここは「モバイル専用の要素が HTML に残っている」ことへの対処だけ。
      モバイル CSS は media で外れているので、**打ち消しは1件も要らない**。 */
@media (min-width: 810px) {

  /* 🔴 ハンバーガーは狭い幅だけの部品。Blue の PC ページには要素自体が無いため
        PC CSS も隠す規則を持たない。＝放置すると**素の画像リンクが3つ表に出る**。 */
  html > body #body_wrap > a#open_hamburger_menu_button,
  html > body #body_wrap > a#close_hamburger_menu_button,
  html > body #body_wrap > div#hamburger_menu_wrap {
    display: none;
  }

  /* 🟢 「指で動かして確認して下さい」はモバイル専用の文言（Blue の PC には無い）。 */
  html > body #body_wrap #main_content_wrap .note_narrow_only {
    display: none;
  }

  /* 🔴 24-2c と同じ「複製で牙を剥く」型の対処。
        Blue の PC は `.note` が1個だけなので `.note:last-of-type` がその1個に当たり
        `margin: 0 auto 10px` になる。Green は `.note` を2個持つため、2個目を
        `display:none` にしても **`:last-of-type` は隠れた2個目に当たり続ける**。
        → 1個目に PC の値を明示し直さないと、**下余白が 10px 減る**（例外もエラーも出ない差）。 */
  html > body #body_wrap #main_content_wrap .note:first-of-type {
    margin: 0 auto 10px;
  }
}

/* ── 印刷 ───────────────────────────────────────────────────────────
   🔴🔴 **印刷時のレイアウト幅は「画面」ではなく「紙」の幅になる**。
      A4 は 210mm＝**793.7px** で、これは上のしきい値 **810px を下回る**
      ＝**PC から印刷しても Green はモバイル CSS に切り替わる**。
      🔑 Blue は UA で HTML ごと分けるので、PC から印刷すれば紙幅に関係なく PC CSS のまま。
         ＝**この現象は「幅で出し分ける」Green だけが持つ**（35-4 の教訓の印刷版）。

   🔴 移送したモバイル CSS の印刷規則は `#calendar_outer_wrap` の
      `width` / `height` / `border` / `overflow` / `box-sizing` を上書きするが、
      **`margin: 15px auto` を打ち消していない**。
      → 上 15px ＋ 下 15px ＝ **30px** はみ出し、文書高が **1149px** になって
        **A4（1118.74px）に収まらず2ページ目が生まれる**（2026-08-09 ユーザーが印刷プレビューで発見）。
      🎯 消すと **1118.74px＝Blue の PC 印刷と同値**（1ページ）に戻る。

   📌 **左右の `auto` は残す**（カレンダーの中央寄せ）＝消すのは上下だけ。
   📌 `!important` が要るのは、移送側が
      `html > body #body_wrap > div#main_content_wrap #calendar_outer_wrap`（id 3つ＋要素3つ）
      という**詳細度の高いセレクタ**で書いているため。
   ⚠️ **移送した CSS は1バイトも書き換えない**ので、打ち消しはこちらに置く。 */
@media print {

  html > body #body_wrap > div#main_content_wrap #calendar_outer_wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}