/*
    Step3-41 縦切り22枚目 /user（全ての投稿一覧）の「Green で作った意図的差分」だけを集めた1枚。
    Blue から運んだ2枚（Base.css＝狭い幅／pc.css＝広い幅）は**どちらも触らず**、
    統合 DOM を成立させるために必要な出し分けだけをここに書く。**必ず最後に読み込む。**

    ── しきい値 768px の根拠 ──────────────────────────────────
    このページの Blue の CSS は PC 版・モバイル版とも **@media を1つも持たない**
    （UA だけで着せ替えていたため必要が無かった）＝21枚目とまったく同じ状況。
    → レイアウトが PC 用 CSS を着せる条件と同値にする。
      Views/Shared/_LayoutMain.cshtml が layout201911/Main.css を
      media="(min-width: 768px)" で着せているので、こちらも 768px。
    境界の 0.02px（767.98〜768px）はどちらも当たらない＝17・19・21枚目と同じ手。

    ── 🔴 素（media の外）の宣言はゼロ ─────────────────────────
    Base.css と pc.css は <link> の media 属性で**完全に排他**されている（案A）。
    この1枚も同じ流儀を守る＝**打ち消しが原理的に要らない**
    （[[feedback_ua_split_css_cannot_be_layered]]）。

    ── 📌 ここに書いてあるのは全部「Blue の DOM が2種類だったから要らなかった」もの ──
    Blue は PC が <ul> のタブ＋<section>、モバイルが <dl> と**別の HTML**を配っていた。
    Green は1つの DOM（<dl> が土台・プラン §2）なので、
    「その幅では出番の無い部品」を隠す仕事が新しく発生する。
*/

/* ==================================================================
 * 広い幅（768px 以上）＝ Blue の PC 版に合わせる
 * ================================================================== */
@media (min-width: 768px) {

    /* Blue の PC に <dt> は無い（タブのラベルが見出しの役）。 */
    #h2_body_inner_wrap > dl > dt {
        display: none;
    }

    /* 「※画像は横にスクロール出来ます」の案内は狭い幅だけ（ユーザー確定 U-2）。
     * 広い幅は折り返し一覧なので、案内が嘘になる。 */
    #h2_body_inner_wrap #notes_wrap {
        display: none;
    }

    /* 「表示切り替え」も狭い幅だけ（ユーザー確定・罠 T-7）。
     * 広い幅は折り返し一覧＝scroll⇔grid で切り替える相手がいない。 */
    #h2_body_inner_wrap > dl > dd .view_toggle {
        display: none;
    }

    /* 🔴 x{n} のバッジは Blue の PC に無い（§1-1）。
     * Base.css が .scroll / .grid の中で出し分けているが、あちらは狭い幅専用なので
     * ここで隠さないと**広い幅にだけバッジが出る**（Blue に無いものが増える）。 */
    #h2_body_inner_wrap .photo-count-badge {
        display: none;
    }

    /* 🔴 タブの排他表示。Blue の PC は `.tab_contents section` を隠して
     * `#tab_N:checked ~ .tab_contents section:nth-child(N)` で1つだけ出していた。
     * 統合 DOM には <section> が無いので **<dd> の n 番目**で同じことをする。
     * ラジオは <dl> の**前の兄弟**なので `~` で届く（プラン §2-3）。 */
    #h2_body_inner_wrap > dl > dd {
        display: none;
    }

    #tab_1:checked ~ dl > dd:nth-of-type(1),
    #tab_2:checked ~ dl > dd:nth-of-type(2),
    #tab_3:checked ~ dl > dd:nth-of-type(3),
    #tab_4:checked ~ dl > dd:nth-of-type(4) {
        display: block;
        background: white;
    }
}

/* ==================================================================
 * 狭い幅（768px 未満）＝ Blue のモバイル版に合わせる
 * ================================================================== */
@media (max-width: 767.98px) {

    /* 🔴 Blue のモバイルにタブは無い（4種類が常に縦に並ぶだけ＝§1-3）。
     * ラジオもラベルも DOM には居るので、ここで隠さないと
     * **狭い幅にラジオボタン4個とタブの見出しが生で出る**。
     * ⚠️ pc.css の `> input { display:none }` は広い幅専用＝狭い幅には届かない。 */
    #h2_body_inner_wrap > input,
    #h2_body_inner_wrap > .tab_buttons {
        display: none;
    }
}