/*
    Step3-40 縦切り21枚目 /user/{userId}（投稿者ホーム）の「Green で作った意図的差分」だけを集めた1枚。

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

    ── なぜ「PC を土台にして狭い幅で上書き」で成立するのか ────────────────
    ⚠️ 一般には UA で分かれていた PC/モバイル CSS を「土台＋上書き」にはできない
       （打ち消しきれない宣言が残る）。**このページに限って成立するのは、
       PC 版とモバイル版の差が下の3宣言しか無いことを diff で全数確認したから**。
       132行 vs 132行・セレクタの差ゼロ・宣言の差3件（2026-08-09 実測）。
    🔴 3件のうち「hover の見た目」だけは打ち消しが要る（PC=背景色 / モバイル=枠色）。
       打ち消しに使うのは **その環境での初期値** だけ＝background-color: transparent
       （Blue のモバイル版はこの宣言を持たないので、算出値は初期値の transparent）。
*/

/* ==================================================================
 * 狭い幅（768px 未満）＝ Blue のモバイル版 CSS との差分3件
 * ================================================================== */
@media (max-width: 767.98px) {

    /* 差分1: グリッドの最小列幅 150px → 120px */
    #tab_wrap > div > section {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    /* 差分2: hover の見せ方が別物（PC＝背景色を敷く / モバイル＝枠の色を変える）。
     *        🔴 background-color を初期値に戻さないと、PC の水色背景が狭い幅にも残る。 */
    #tab_wrap > div > section .post_photo_wrap > a:hover {
        background-color: transparent;
        border: 5px solid #79bfd9;
    }

    /* 差分3: 撮影日・views の文字色 #222 → #555 */
    #tab_wrap > div > section .post_photo_wrap > div > span {
        color: #555;
    }
}

/* ==================================================================
 * ⛔ ブログ1行の装飾は置かない（ユーザー確定 2026-08-09・台帳 L-85）
 * ==================================================================
 * Blue は右カラムに「プロフィール」の箱を置き、その中の表に4つを並べていた。
 * Green の右カラムは広告専用（狭い幅では丸ごと消える）なので本文へ移そうとしたが、
 * 中身を実測したら **3つは運ぶ価値が無かった**:
 *   ⛔ ニックネーム … リンク先が **このページ自身**（自己リンク）
 *   ⛔ フォトマップ … Url.Action が ambient route value で userId を補完するため
 *                     /user/{id}/map ＝ 本文の「大きい地図で見る」と**同じ宛先**
 *   ⛔ SNS 3種     … 右カラムの前例（Step3-17-3・19枚目）で落とす対象
 * 残った「ブログなど」1行を本文の先頭に置いたが、**実機を見たユーザーの判断で取り下げた**
 * （「一旦いらない。後ほど置き方を考える」）。
 * 🔴 情報そのものを捨てたのではなく **置き場所を保留にしただけ**。
 *    置き方が決まったら、ビュー側の器と一緒にここへ装飾を足す。
 * 🎁 副産物＝外部 JS（b.st-hatena.com）が1本消えた。
 */