/*
    Step3-41 縦切り22枚目 /user（全ての投稿一覧）— **広い幅（768px 以上）専用の1枚**。
    Blue の PC 版 `Areas/User/Content/Css/Home/AllUsers/Base.css`（6,326B・52規則）から
    統合 DOM で生きる27規則を抜き出したもの（プラン impl-plan-step3-41.md N-2）。

    ── 🔴 なぜ「タブの装飾だけ」では足りなかったのか（案A・ユーザー確定 2026-08-10）──
    プラン v1.0 は「PC から抜き出すのはタブボタンの装飾だけ」と書いていたが、
    **T-1（@media で完全排他）と両立しないことが規則単位の全数 diff で判明した**。
      ・`Base.css`（モバイル版の逐語移送）には **広い幅で効かせてはいけない24規則**
        （`.scroll` の `nowrap + overflow-x + height:170px` 等）が入っている
        → `Base.css` は `media="(max-width: 767.98px)"` でしか読めない
      ・ところが同じファイルに **両方の幅で要る19規則**（`<dl>`/`<dt>` の骨格）も入っている
        → タブ装飾9規則だけの pc.css では、広い幅が骨格を失う
    → **案A＝2枚とも「その幅だけで自己完結する」形にする**（Blue の UA 出し分けを、
      そのまま幅の出し分けに置き換えただけ）。**代償＝重複が19規則ぶん（約1.5KB）。**
      1ページに1回きりなので、21枚目の 240KB（1件 × 1,444回）とは桁が違う。
    🔑 **打ち消しが1つも要らない**のが案Aの本質（[[feedback_ua_split_css_cannot_be_layered]]）。

    ── 📌 中身の出どころ（手打ちゼロ）────────────────────────────────
    27規則すべて、**Blue PC 版の本文をプログラムで引いて組んだ**（宣言は1バイトも変えていない）。
    変えたのは**セレクタだけ**。⚠️ 抜き出しコピーなので SHA256 で「Blue と同じ」を言えない
    （19枚目 Profile.css の教訓）→ **規則数と中身を別々に見張る**（N-7）。

    ── 🔴 セレクタの書き換え2種 ───────────────────────────────────
    ① `#tab_wrap` / `#post_photos_wrap` → **`#h2_body_inner_wrap`**
       統合 DOM の器はモバイル版の名前を採る。理由＝モバイル版 Base.css は
       **全51規則のうち39規則が `#h2_body_inner_wrap > …` の直下セレクタ**で、
       器を改名すると**その39規則が丸ごと空振りする**（実測）。
       ※ `#tab_1..4:checked ~ .tab_buttons label[for=…]` は器の id を含まないので**そのまま**。
       🎁 Blue PC 版が持つ `#post_photos_wrap > dl …` は「昔 PC もアコーディオンだった頃の残骸」
          （罠 T-5）だが、**中身はモバイル版の生きている規則と1バイトも違わなかった**（実測）。
          ＝広い幅で骨格が要るとき、運ぶ中身はモバイル版と同じで済む。
    ② 一覧の器 `#tab_wrap > div:nth-of-type(2) > section > div`
       → **`#h2_body_inner_wrap > dl > dd .post_photos_wrap`**
       統合 DOM に `<section>` は無い（`<dd>` になる）ため（罠 T-2）。

    ── ⛔ 抜き出さなかったもの（全部 実測で「当たらない」or「死蔵」）──────
    ⛔ `.tab_contents section { display:none }` と `#tab_N:checked ~ .tab_contents section:nth-child(N)`
       ＝タブの排他表示。統合 DOM では `input ~ dl > dd:nth-of-type(N)` で作る（green.css・§2-3）。
    ⛔ `.post_photo_wrap > span`＝その <span> を出す JS が**0件**（全走査）。死蔵（罠 T-4）。
    ⛔ `#post_photos_wrap > dl > dt …` 13規則＝広い幅では <dt> を出さない（タブのラベルが代わり）。
    ⛔ `#post_photos_wrap > dl > dd > div …` 5規則＝旧 PC 一覧の残骸。**統合 DOM にうっかり当たる**
       形なので、運んでいないことを見張る（罠 T-5）。
    ⛔ `#post_photo_wrap:after`＝id セレクタ。統合 DOM は class（`.post_photo_wrap`）＝当たらない。
    ⛔ `#post_photos_wrap #notes_wrap` ×3＝`notes_wrap` は**狭い幅だけ**（ユーザー確定 U-2）。

    ── ⏭️ Step3-41-4（ビュー作成）へ申し送り ──────────────────────
    この1枚は「Blue の PC がやっていたこと」だけを持つ。**Green の意図的差分は green.css 側**:
      ・広い幅で `<dt>` を隠す／狭い幅で `.tab_buttons` とラジオを隠す
      ・タブの排他表示 `input ~ dl > dd:nth-of-type(N)`
      ・広い幅で `.photo-count-badge` を隠す（Blue の PC にバッジは無い）
    🔴 セレクタを書き換えた6規則（一覧の器と中のカード）は **41-4 の実機で当たりを確認する**。
    ── 🔴 2026-08-10 追記＝読込中オーバーレイ2規則を後から足した（Step3-41-4）────
    41-1 の時点では「同じ役をモバイル版の #post_loading_wrap が持つので運ばない」と書いたが、
    **案A で Base.css が狭い幅専用になった以上、広い幅には誰も居なくなる**
    （＝装飾のない素の <div> が本文の途中に居座り、オーバーレイにならない）。
    → Blue PC の `#tab_wrap > div:nth-of-type(1)` ×2 を、セレクタだけ
      `#h2_body_inner_wrap #post_loading_wrap` に書き換えて足した。
    ⚠️ 元の `div:nth-of-type(1)` を**そのまま**運んではいけない＝統合 DOM の最初の div は
       `#notes_wrap` なので**誤爆する**（Blue PC に notes_wrap は無いから成立していた）。

*/

#map_canvas_wrap {
  position: relative;
}
#map_canvas_wrap #map_canvas {
  height: 300px;
}
#h2_body_inner_wrap {
  position: relative;
}
#tab_1:checked ~ .tab_buttons label[for=tab_1],
#tab_2:checked ~ .tab_buttons label[for=tab_2],
#tab_3:checked ~ .tab_buttons label[for=tab_3],
#tab_4:checked ~ .tab_buttons label[for=tab_4] {
  background-color: #05f;
  color: #fff;
}
#h2_body_inner_wrap > input {
  display: none;
}
#h2_body_inner_wrap > ul {
  margin: 15px 0 25px;
  padding: 0;
  list-style: none;
  display: flex;
}
#h2_body_inner_wrap > ul > li > label {
  display: inline-block;
  padding: 5px 0;
  text-align: center;
  height: 60px;
  line-height: 25px;
  width: 70px;
  box-sizing: border-box;
  border: 1px solid #aaa;
  background-color: #e2e2e2;
  cursor: pointer;
}
#h2_body_inner_wrap > ul > li > label:hover {
  opacity: 0.8;
}
#h2_body_inner_wrap > ul > li > label > span {
  display: block;
}
#h2_body_inner_wrap > ul > li > label > span:before {
  content: "(";
}
#h2_body_inner_wrap > ul > li > label > span:after {
  content: ")";
}
#h2_body_inner_wrap > dl {
  margin: 0;
}
#h2_body_inner_wrap > dl > dd {
  margin: 0 0 50px;
}
#h2_body_inner_wrap > dl > dd:last-of-type {
  margin: 0 0 25px;
}
#h2_body_inner_wrap > dl > dd .post_photos_wrap {
  display: flex;
  flex-wrap: wrap;
}
#h2_body_inner_wrap > dl > dd .post_photos_wrap .post_photo_wrap {
  float: left;
  width: 160px;
  margin: 0 0 10px;
}
#h2_body_inner_wrap > dl > dd .post_photos_wrap .post_photo_wrap > a {
  position: relative;
  display: block;
  border: 5px solid #fff;
}
#h2_body_inner_wrap > dl > dd .post_photos_wrap .post_photo_wrap > a:hover {
  border: 5px solid #79bfd9;
}
#h2_body_inner_wrap > dl > dd .post_photos_wrap .post_photo_wrap > a > p {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  background: linear-gradient(rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0));
  width: 140px;
  padding: 5px;
  font-size: 13px;
  text-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}
#h2_body_inner_wrap > dl > dd .post_photos_wrap .post_photo_wrap > a > img {
  vertical-align: bottom;
  height: 150px;
}
.load-more-container {
  text-align: center;
  margin: 50px 0;
  clear: both;
  justify-content: center;
}
.load-more-container .load-more-btn {
  background-color: #05f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 160px;
}
.load-more-container .load-more-btn:hover:not(:disabled) {
  background-color: #0044cc;
  transform: translateY(-1px);
}
.load-more-container .load-more-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}
.load-more-container .load-more-btn:active:not(:disabled) {
  transform: translateY(0);
}
.loading-more {
  text-align: center;
  padding: 20px;
  color: #666;
}
.loading-more img {
  margin-right: 10px;
}
#h2_body_inner_wrap #post_loading_wrap {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  padding: 15px;
  margin: 0 0 25px;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  color: #fff;
}
#h2_body_inner_wrap #post_loading_wrap > img {
  margin: 0 10px 0 0;
}