/* ============================================================
   酒記 / SHUKI — PC・タブレット（広い画面）専用レイアウト v2
   「モノクロ・モダングリッド」（2026-06-11 オーナー選定モック準拠）
   style.css の後に読み込む追加スタイル。

   画面幅による3段階の切り替え：
   ・900px以上 …… フル表示（左サイドメニュー240px＋雑誌的グリッド本文）
   ・481〜899px … コンパクト表示（アイコンメニュー68px・本文は1〜2列）
   ・480px以下 …… スマホ表示（style.cssの従来デザインのまま・無変更）
   ============================================================ */

/* サイドメニューの「お酒の種類」はPC専用（スマホの下タブでは出さない） */
.side-cats{display:none}
/* desktop.css cache-bump marker: v123 (一体感トークン統一 2026-06-20) */

/* ──────────────────────────────────────────────
   共通（481px以上）：スマホ枠を外して画面いっぱいに表示
   ────────────────────────────────────────────── */
@media (min-width:481px){

  body{padding:0;background:#fff;display:block}

  .app{
    width:100vw;
    max-width:none;
    height:100vh;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding-left:240px;            /* 左サイドメニューの幅ぶん、本文を右へ */
  }

  /* ログイン画面などメニュー非表示のときは左余白を作らない */
  .app:has(.tab[style*="none"]){padding-left:0}

  /* ── 下タブ → 左サイドメニュー（画面の左端に固定・全高） ── */
  /* サイドナビ＝紺の帯（2026-06-13 オーナー指示・スマホ下タブと統一） */
  .tab{
    top:0;bottom:0;left:0;right:auto;
    width:240px;height:auto;
    z-index:20;          /* スワイプの複製ゴースト(z-index:3)の上にレールを置き、横切りの重なりを防ぐ */
    flex-direction:column;
    justify-content:flex-start;
    gap:4px;
    padding:116px 16px 20px;       /* 上はロゴぶんのスペース */
    border-top:none;
    border-right:none;
    background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-2) 100%);
    backdrop-filter:none;
    overflow-y:auto;
  }

  /* サイドメニュー上部のロゴ（酒記＋SHUKI）— 紺地に白明朝＋金茶英字 */
  .tab::before{
    content:"酒 記";
    position:absolute;
    top:28px;left:26px;
    font-family:var(--logo-serif);
    font-size:31px;
    letter-spacing:8px;
    color:#fff;
  }
  .tab::after{
    content:"SHUKI — ALCOHOL REVIEW";
    position:absolute;
    top:74px;left:27px;
    font-size:9px;
    letter-spacing:1.8px;
    color:rgba(203,171,120,.9);
  }

  /* メニュー項目：横並び（アイコン＋文字）・左寄せ・大きめ */
  .tab button{
    flex:0 0 auto;
    flex-direction:row;
    justify-content:flex-start;
    gap:14px;
    width:100%;
    height:48px;
    padding:0 16px;
    border-radius:12px;
    font-size:14.5px;
    color:rgba(255,255,255,.62);
    transition:background .15s;
  }
  .tab button .ti{font-size:20px;padding:0;background:none!important;color:inherit!important} /* スマホ用のピル反転はサイドメニューでは使わない */
  .tab button .ti svg{width:22px;height:22px}
  .tab button.on::after{display:none} /* サイドメニューでは下線バー不要 */
  .tab button:hover{background:rgba(255,255,255,.08)}
  /* アクティブ項目は白塗り＋紺文字に反転（紺地のサイドナビ上での現在地表示） */
  .tab button.on{
    color:var(--indigo);
    background:#fff;
    font-weight:600;
  }
  .tab button.on:hover{background:#fff}

  /* サイドメニュー内「お酒の種類」ショートカット（app.jsがPC用に注入・紺地に合わせた配色） */
  .side-cats{display:block;width:100%;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
  .side-cats .sc-label{font-size:10.5px;letter-spacing:2px;color:rgba(203,171,120,.85);padding:0 16px 8px}
  .side-cats button{
    display:flex;align-items:center;width:100%;
    padding:7px 16px;border:none;background:none;cursor:pointer;
    font-size:13px;color:rgba(255,255,255,.6);font-family:var(--sans);
    border-radius:9px;text-align:left;transition:background .15s;
  }
  .side-cats button:hover{background:rgba(255,255,255,.08);color:#fff}

  /* 本文（各ビュー）は読みやすい最大幅で中央寄せ */
  .head,.searchbar,.chips,#homeScroll,#searchScroll,#mineScroll,#drinkScroll,
  #vForm .scroll,.topbar{
    max-width:1400px;margin-left:auto;margin-right:auto;width:100%; /* 大画面の一覧性向上(2026-06-13) */
  }
  .scroll{padding-bottom:48px}

  /* ビュー上部の小ヘッダはPCでは非表示（ロゴ・見出しはサイドメニューにあるため重複）
     マイページのタイトルも同様に隠す（⚙ボタンは残す） */
  .head{display:none}
  .mine-topbar .logo{display:none}
  #vFeed .topbar{display:none} /* タイムラインのタイトルもPCでは隠す（サイドナビが現在地を示すため・2026-06-15） */
  #feedScroll .feed-list{max-width:720px;margin-left:auto;margin-right:auto;padding:24px 24px 0} /* タイムラインのカードを中央寄せ */
  .searchbar{margin:30px 40px 14px;max-width:680px}
  .chips{padding:0 40px 16px}

  /* ログインフォームは広い画面では読みやすい幅に整えて中央寄せ */
  .auth-wrap{max-width:460px;margin:0 auto;width:100%}

  /* 画面下に固定されるバー（投稿保存・銘柄詳細CTA）も本文幅に合わせる。
     PC・タブレットでは下タブバーが無いので bottom:0 に戻す（style.css の bottom:58px を上書き）*/
  .d-cta,.form-save{
    left:240px;right:0;
    max-width:none;margin:0;
    bottom:0;
  }
  .app:has(.tab[style*="none"]) .d-cta,
  .app:has(.tab[style*="none"]) .form-save{left:0}

  /* PWAインストールバナーも本文幅に合わせ、左サイドレールを横断しないようにする。
     PC・タブレットは下タブが無いので bottom:0（style.cssのsafe-area込みオフセットを上書き）*/
  .pwa-banner{left:240px;right:0;bottom:0}
  .app:has(.tab[style*="none"]) .pwa-banner{left:0}
  /* FABは右下固定。下タブが無いPCでは bottom:72px の無意味な浮きを素直な右下に */
  .fab-rec{bottom:24px}

  /* 横長の商品画像がカード幅を押し広げないように（全幅共通の保険） */
  .bcard{min-width:0}
  .bcard .bimg{overflow:hidden}
  .bcard .bimg img{max-width:100%;object-fit:contain}
}

/* ──────────────────────────────────────────────
   フルPC（900px以上）：雑誌的グリッド
   ────────────────────────────────────────────── */
@media (min-width:900px){

  /* カテゴリチップはPCでは折り返して全部見せる（横スクロールさせない） */
  .chips{flex-wrap:wrap;overflow-x:visible}

  /* ============ ホーム ============ */
  #homeScroll{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:28px;
    align-content:start;
    align-items:start; /* 行のstretchでhero等(overflow:hidden)が潰れるのを防ぐ */
    padding:0 40px 48px;
  }
  /* フル幅にまたぐ要素 */
  #homeScroll > .hero-wrap,
  #homeScroll > .sec-h,
  #homeScroll > .home-welcome,
  #homeScroll > .hscroll,
  #homeScroll > .wishband,
  #homeScroll > .feature-wrap,
  #homeScroll > .feed-tabs,
  #homeScroll > .hrev-list,
  #homeScroll > .feed-empty,
  #homeScroll > .mini-shelf,
  #homeScroll > .taste-cloud,
  #homeScroll > .home-foot,
  #homeScroll > .onboard-lead,
  #homeScroll > .onboard-grid,
  #homeScroll > .guide-card,
  #homeScroll > div[style*="height"]{grid-column:1/-1}
  /* 飲んだ導線グリッドはPCでは列数を増やす（.onboard-grid は scroll container ではないので重なりは起きない） */
  #homeScroll .onboard-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  #homeScroll > .urow{grid-column:1/-1;max-width:640px}
  /* 横スクロール棚（最近見た／おすすめ＝.mini-shelf）はPCグリッドでは折り返しにする。
     overflow-x:auto のままだと scroll container 扱いになり、グリッドの行高が min-content
     まで潰れて下のセクションと重なる（hero-wrap/feature-wrap と同じ理屈の再発・2026-06-15修正） */
  #homeScroll .mini-shelf{flex-wrap:wrap;overflow:visible}
  /* 右サイド列ラッパーは常に全幅セル（2列化はPC≥1100でファイル後段が担当・900〜1099は従来の1列） */
  #homeScroll > .home-cols{grid-column:1/-1}

  /* ヒーロー：特集バナー。900〜1199pxは安定版（テキスト列が狭くなるため
     装飾を抑える）、リッチな演出は1200px以上で段階的に追加 */
  #homeScroll .hero{
    position:relative;
    display:grid;
    grid-template-columns:1fr minmax(150px,190px);
    align-items:center;
    column-gap:24px;
    min-height:168px;
    padding:26px 36px;
    border-radius:18px;
    margin:18px 0 10px;
    overflow:hidden;
    box-shadow:0 14px 32px rgba(30,42,68,.16);
  }
  /* ラベル: 金茶の罫線＋「今週の一本」（折返し禁止・左寄せ） */
  #homeScroll .hero .hero-label{
    display:flex;align-items:center;gap:12px;
    font-size:11.5px;letter-spacing:3px;
    color:rgba(255,255,255,.78);
    white-space:nowrap;
  }
  #homeScroll .hero .hero-label::before{
    content:"";width:28px;height:1px;background:var(--gold);flex:0 0 28px;
  }
  #homeScroll .hero .hero-name{font-size:clamp(20px,1.6vw,28px);line-height:1.3;margin:10px 0 6px;letter-spacing:.04em}
  #homeScroll .hero .hero-sub{font-size:12.5px;letter-spacing:.05em;color:rgba(255,255,255,.72)}
  #homeScroll .hero .hero-rate{font-size:16px;margin-top:10px;color:var(--gold);letter-spacing:.04em}
  #homeScroll .hero .hero-rate small{font-size:12px}
  /* 「詳しく見る →」: 細枠のゴーストボタン（ホバーで白く） */
  #homeScroll .hero .hero-cta{
    display:inline-block;
    margin-top:12px;
    padding:7px 16px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:22px;
    font-size:12px;letter-spacing:.12em;
    color:rgba(255,255,255,.85);
    transition:all .2s;
  }
  #homeScroll .hero:hover .hero-cta{background:#fff;color:var(--indigo);border-color:#fff}
  /* 画像: 枠内に確実に収める（縦中央） */
  #homeScroll .hero .hero-img{
    width:100%;height:148px;
    border-radius:14px;justify-self:end;align-self:center;
    box-shadow:0 14px 34px rgba(0,0,0,.30);
    padding-bottom:0;align-items:center;
    transition:transform .3s;
  }
  #homeScroll .hero:hover .hero-img{transform:translateY(-3px)}
  #homeScroll .hero .hero-img img,
  #homeScroll .hero .hero-img svg{max-height:132px;max-width:88%;object-fit:contain}

  /* 見出しはエディトリアルに大きく */
  #homeScroll .sec-h{padding:22px 0 4px}
  #homeScroll .sec-h .t{font-size:17px;letter-spacing:.06em}
  #homeScroll .home-welcome{padding:0 0 12px}

  /* ランキング/注目カード：大判グリッド（幅に応じて4〜6列・ホバーで浮く）
     min-width:0 と max-width:100% は必須 — 横長の商品画像が列幅を
     押し広げてページ全体が横にはみ出すのを防ぐ */
  #homeScroll .hscroll{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(144px,1fr));
    gap:14px;
    overflow:visible;
    padding:8px 0 10px;
  }
  #homeScroll .hscroll .bcard{
    flex:none;width:auto;min-width:0;
    padding:10px 10px 12px;
    /* border/background はstyle.cssのカード基本スタイルを継承（二重にしない） */
    border-radius:var(--r-card);
    transition:box-shadow .2s, transform .2s;
  }
  #homeScroll .hscroll .bcard:hover{
    box-shadow:0 10px 28px rgba(30,42,68,.10);
    transform:translateY(-3px);
  }
  #homeScroll .bcard .bimg{height:150px;overflow:hidden}
  #homeScroll .bcard .bimg img{max-height:138px;max-width:100%;object-fit:contain}
  #homeScroll .bcard .bimg svg{height:136px}
  #homeScroll .bcard .bn{font-size:13px;margin-top:8px}
  #homeScroll .bcard .bb{font-size:11.5px}
  #homeScroll .bcard .br{font-size:12.5px}

  /* カテゴリから探す：文字が1行で収まる幅を確保（狭い画面では自動で2段に折り返す）＋カードhover */
  /* （カテゴリグリッドはv68で廃止＝上部の目次タブに集約） */

  /* ホーム新構成 v68: 飲みたい棚・特集・統合フィードのPC調整 */
  /* 棚と特集は「横一列の棚」を保つ（ランキング用のグリッド化を打ち消す） */
  #homeScroll .wishband .hscroll,
  #homeScroll .feature .hscroll{display:flex;flex-wrap:nowrap;overflow-x:auto;grid-template-columns:none;gap:14px}
  #homeScroll > .hrev-list{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;padding:0}
  #homeScroll > .feed-tabs{padding:0 0 2px}
  #homeScroll > .taste-cloud{padding:2px 0 8px}
  #homeScroll .wishband{border-radius:16px;border:1px solid rgba(168,133,74,.16);margin-top:22px}
  #homeScroll .wishband .sec-h{padding:18px 22px 4px}
  #homeScroll .wish-lead{padding:0 22px 10px}
  #homeScroll .wishband .hscroll{padding:2px 22px 16px}
  #homeScroll .wcard{flex:0 0 130px}
  #homeScroll .wcard .wph{height:110px}
  #homeScroll .wcard .wph img{max-height:104px}
  #homeScroll .feature{margin:4px 0 6px;padding:20px 0 8px;border-radius:18px}
  #homeScroll .f-label{padding:0 26px}
  #homeScroll .f-title{font-size:20px;padding:8px 26px 0}
  #homeScroll .f-lead{font-size:12px;padding:6px 26px 12px}
  #homeScroll .feature .hscroll{padding:2px 26px 8px}
  #homeScroll .fcard{flex:0 0 112px}
  #homeScroll .fcard .fph{height:98px}
  #homeScroll .fcard .fph img{max-height:92px}

  /* みんなの新着：2カラムでは:last-childだけ罫線を消すと最終行の左右が不揃いになるため全行に出す */
  #homeScroll .hrev:last-child{border-bottom:1px solid #f1f2f5}

  /* ============ 探す ============ */
  #searchScroll{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    column-gap:20px;
    align-content:start;
    padding:0 40px 40px;
  }
  /* 行は #searchList(display:contents) 内にあるため子孫セレクタで指定（v86: 半分潰れバグ修正） */
  #searchScroll .sec-h,
  #searchScroll .sort-bar,
  #searchScroll .search-req,
  #searchScroll .mini-shelf,
  #searchScroll .empty{grid-column:1/-1}
  #searchScroll .rev-item{margin:0;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;transition:box-shadow .2s, transform .16s ease}/* transformも含める＝この詳細度が所作(.drow)のtransitionを上書きして沈み込みが消えるのを防ぐ */
  #searchScroll .rev-item:hover{box-shadow:0 6px 18px rgba(30,42,68,.08)}
  #searchScroll .sec-h .t{font-size:17px}
  #searchScroll .sort-bar{padding-left:0;padding-right:0}

  /* ============ 銘柄詳細（900〜1099px：1カラム中央寄せ） ============ */
  .topbar{padding:18px 40px 0}
  #drinkScroll{max-width:720px;padding-bottom:150px}

  /* ============ マイページ ============ */
  #mineScroll{max-width:1000px;padding:10px 40px 60px}
  #mineScroll .mp-hero{border-radius:20px;margin-top:18px}
  #mineScroll .shelf{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px}
  #mineScroll .shelf-item:hover{box-shadow:0 8px 20px rgba(30,42,68,.10);transform:translateY(-2px)}
  /* ⑤ 設定(⚙)はPCでは大きく・右寄せ（ロゴ非表示のため左に寄ってしまうのを防ぐ） */
  #mineGear{font-size:28px;width:48px;height:48px;margin-left:auto}
  #mineGear:hover{background:rgba(30,42,68,.07)}

  /* ============ 投稿フォーム ============ */
  #vForm .scroll{max-width:760px}
}

/* ──────────────────────────────────────────────
   ワイドPC（1200px以上）：ヒーローのリッチ演出
   （テキスト列に十分な幅があるときだけ装飾を足す）
   ────────────────────────────────────────────── */
@media (min-width:1200px){
  #homeScroll .hero{
    grid-template-columns:1fr minmax(180px,230px);
    min-height:200px;
    padding:30px 44px;
    border-radius:20px;
  }
  /* 背景の巨大透かし「酒」（明朝・ごく薄く） */
  #homeScroll .hero::before{
    content:"酒";
    position:absolute;
    right:-36px;bottom:-86px;
    font-family:var(--logo-serif);
    font-size:300px;line-height:1;
    color:rgba(255,255,255,.045);
    pointer-events:none;
  }
  /* 英字サブラベルは広い画面のみ */
  #homeScroll .hero .hero-label::after{
    content:"BOTTLE OF THE MONTH";
    font-size:9px;letter-spacing:2.5px;color:rgba(255,255,255,.38);
  }
  #homeScroll .hero .hero-name{margin:12px 0 8px}
  #homeScroll .hero .hero-rate{font-size:17px;margin-top:10px}
  #homeScroll .hero .hero-cta{margin-top:14px;padding:8px 18px}
  #homeScroll .hero .hero-img{height:165px;border-radius:16px}
  #homeScroll .hero .hero-img img,
  #homeScroll .hero .hero-img svg{max-height:148px}
}

/* ──────────────────────────────────────────────
   ワイドPC（1100px以上）：銘柄詳細を2カラムに
   （左=ボトル画像sticky・右=情報→レビュー。狭い幅では右カラムが
   潰れるため1100px以上に限定）
   ────────────────────────────────────────────── */
@media (min-width:1100px){
  /* 案A（2026-06-15オーナー確定）: 銘柄詳細は中央寄せの単一カード（旧2カラムは廃止）。
     スマホと同じ縦積みカードを、PCでは幅を抑えて中央に置く。 */
  #drinkScroll{max-width:680px;margin:0 auto;padding:16px 24px 150px}
  #drinkScroll .d-card{display:block;margin:0}
  #drinkScroll .d-name{font-size:26px}
  #drinkScroll .d-hero .bottle-img{max-height:236px}
  #drinkScroll .d-hero .ph{width:150px;min-height:190px}
  #drinkScroll .d-stats .d-stars{font-size:18px}
  #drinkScroll .rev-item{max-width:none}
  /* CTAボタンも本文(680px)に合わせて中央寄せ（旧2カラム用スペーサーは解除） */
  .d-cta{max-width:680px;margin:0 auto;padding:12px 24px}
  .d-cta::before{display:none}
  .d-cta button{max-width:none;flex:1}
}

/* ──────────────────────────────────────────────
   中間の幅（481〜899px）：アイコンだけの細いメニューに切り替え
   ────────────────────────────────────────────── */
@media (min-width:481px) and (max-width:899px){

  .app{padding-left:68px}

  .tab{
    width:68px;
    padding:64px 10px 16px;
    align-items:center;
  }

  /* ロゴは「酒」一文字に */
  .tab::before{
    content:"酒";
    top:22px;left:0;
    width:100%;
    text-align:center;
    font-size:21px;
    letter-spacing:0;
  }
  .tab::after{display:none}
  .side-cats{display:none}

  /* 文字を隠してアイコンだけに（font-size:0 で文字を消し、アイコンだけ戻す） */
  .tab button{
    justify-content:center;
    gap:0;
    width:48px;
    height:46px;
    padding:0;
    font-size:0;
  }
  .tab button .ti{font-size:21px}

  .d-cta,.form-save{left:68px}
  .pwa-banner{left:68px}

  /* 横スクロール行は折り返し（マウスで横スクロールしづらいため） */
  .hscroll{flex-wrap:wrap;overflow-x:visible;padding-bottom:8px}
  .hscroll .bcard{flex:0 0 132px}
  /* ただし飲みたい棚と特集は「横一列の棚」のデザインなので折り返さない */
  .wishband .hscroll,.feature .hscroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:14px}

  /* 探す一覧：2列まで */
  #searchScroll{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    column-gap:20px;
    align-content:start;
    padding:0 24px 32px;
  }
  /* 行は #searchList(display:contents) 内にあるため子孫セレクタで指定（v86: 半分潰れバグ修正） */
  #searchScroll .sec-h,
  #searchScroll .sort-bar,
  #searchScroll .search-req,
  #searchScroll .mini-shelf,
  #searchScroll .empty{grid-column:1/-1}
  /* margin:0だけだと border-bottom が消えるため再指定 */
  #searchScroll .rev-item{margin:0;border-bottom:1px solid var(--line)}
}

/* ──────────────────────────────────────────────
   ホーム右サイド列（PC≥1100・2026-06-20オーナー承認の雑誌的リッチ化）
   左メイン（ランキング/おすすめ/特集/みんなの新着）＋右レール（最近見た/飲みたい/味わい/おすすめユーザー）。
   .home-main/.home-rail を独立した縦カラムにして高さは各列で完結＝行揃えの隙間を作らない。
   <1100px は style.css の flex+order が効いて従来の1列縦積みに戻る＝スマホ/タブレット無変更。
   ────────────────────────────────────────────── */
@media (min-width:1100px){
  #homeScroll > .home-cols{display:grid;grid-template-columns:1.7fr 1fr;column-gap:30px;align-items:start}
  #homeScroll .home-main,#homeScroll .home-rail{display:flex;flex-direction:column;min-width:0}
  /* レールを「サイドバー」として薄い縦罫で区切る（誌面の構造を明確に） */
  #homeScroll .home-rail{padding-left:30px;border-left:1px solid var(--line-2)}
  #homeScroll .hsec{min-width:0}
  /* レールの各セクションは上に小さな区切り余白（メイン列は sec-h の上padding で足りる） */
  #homeScroll .home-rail .hsec:not(:first-child){margin-top:8px}
}

/* ──────────────────────────────────────────────
   超ワイドPC（1500px以上）: フィードを3列にして一覧性をさらに上げる（2026-06-13）
   ────────────────────────────────────────────── */
@media (min-width:1500px){
  #homeScroll > .hrev-list{grid-template-columns:1fr 1fr 1fr;column-gap:36px}
}