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

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

/* サイドメニューの「お酒の種類」はPC専用（スマホの下タブでは出さない） */
.side-cats{display:none}

/* ──────────────────────────────────────────────
   共通（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}

  /* ── 下タブ → 左サイドメニュー（画面の左端に固定・全高） ── */
  .tab{
    top:0;bottom:0;left:0;right:auto;
    width:240px;height:auto;
    flex-direction:column;
    justify-content:flex-start;
    gap:4px;
    padding:116px 16px 20px;       /* 上はロゴぶんのスペース */
    border-top:none;
    border-right:1px solid var(--line);
    background:#fff;
    backdrop-filter:none;
    overflow-y:auto;
  }

  /* サイドメニュー上部のロゴ（酒記＋SHUKI）— 2026-06-11 少し大きく */
  .tab::before{
    content:"酒 記";
    position:absolute;
    top:28px;left:26px;
    font-family:var(--serif);
    font-size:31px;
    letter-spacing:8px;
    color:var(--indigo);
  }
  .tab::after{
    content:"SHUKI — ALCOHOL REVIEW";
    position:absolute;
    top:74px;left:27px;
    font-size:9px;
    letter-spacing:1.8px;
    color:var(--dim);
  }

  /* メニュー項目：横並び（アイコン＋文字）・左寄せ・大きめ */
  .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:var(--steel);
    transition:background .15s;
  }
  .tab button .ti{font-size:20px}
  .tab button .ti svg{width:22px;height:22px}
  .tab button.on::after{display:none} /* サイドメニューでは下線バー不要 */
  .tab button:hover{background:var(--panel)}
  .tab button.on{
    color:var(--indigo);
    background:var(--panel-2);
    font-weight:600;
  }

  /* サイドメニュー内「お酒の種類」ショートカット（app.jsがPC用に注入） */
  .side-cats{display:block;width:100%;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
  .side-cats .sc-label{font-size:10.5px;letter-spacing:2px;color:var(--dim);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:var(--steel);font-family:var(--sans);
    border-radius:9px;text-align:left;transition:background .15s;
  }
  .side-cats button:hover{background:var(--panel);color:var(--indigo)}

  /* 本文（各ビュー）は読みやすい最大幅で中央寄せ */
  .head,.searchbar,.chips,#homeScroll,#searchScroll,#mineScroll,#drinkScroll,
  #vForm .scroll,.topbar{
    max-width:1240px;margin-left:auto;margin-right:auto;width:100%;
  }
  .scroll{padding-bottom:48px}

  /* ビュー上部の小ヘッダはPCでは非表示（ロゴ・見出しはサイドメニューにあるため重複） */
  .head{display:none}
  .searchbar{margin:30px 40px 14px;max-width:680px}
  .chips{padding:0 40px 16px}

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

  /* 画面下に固定されるバー（投稿保存・銘柄詳細CTA）も本文幅に合わせる */
  .d-cta,.form-save{
    left:240px;right:0;
    max-width:none;margin:0;
  }
  .app:has(.tab[style*="none"]) .d-cta,
  .app:has(.tab[style*="none"]) .form-save{left:0}

  /* 横長の商品画像がカード幅を押し広げないように（全幅共通の保険） */
  .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,
  #homeScroll > .sec-h,
  #homeScroll > .home-welcome,
  #homeScroll > .hscroll,
  #homeScroll > .catgrid,
  #homeScroll > div[style*="height"]{grid-column:1/-1}
  #homeScroll > .urow{grid-column:1/-1;max-width:640px}

  /* ヒーロー：特集バナー。900〜1199pxは安定版（テキスト列が狭くなるため
     装飾を抑える）、リッチな演出は1200px以上で段階的に追加 */
  #homeScroll .hero{
    position:relative;
    display:grid;
    grid-template-columns:1fr minmax(170px,230px);
    align-items:center;
    column-gap:28px;
    min-height:210px;
    padding:34px 40px;
    border-radius:22px;
    margin:26px 0 16px;
    overflow:hidden;
    box-shadow:0 18px 44px rgba(30,42,68,.20);
  }
  /* ラベル: 金茶の罫線＋「今週の一本」（折返し禁止・左寄せ） */
  #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(23px,2.4vw,40px);line-height:1.3;margin:14px 0 8px;letter-spacing:.04em}
  #homeScroll .hero .hero-sub{font-size:13.5px;letter-spacing:.05em;color:rgba(255,255,255,.72)}
  #homeScroll .hero .hero-rate{font-size:19px;margin-top:12px;color:var(--gold);letter-spacing:.04em}
  #homeScroll .hero .hero-rate small{font-size:12px}
  /* 「詳しく見る →」: 細枠のゴーストボタン（ホバーで白く） */
  #homeScroll .hero .hero-cta{
    display:inline-block;
    margin-top:18px;
    padding:9px 20px;
    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:190px;
    border-radius:16px;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:168px;max-width:88%;object-fit:contain}

  /* 見出しはエディトリアルに大きく */
  #homeScroll .sec-h{padding:30px 0 6px}
  #homeScroll .sec-h .t{font-size:21px;letter-spacing:.08em}
  #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(168px,1fr));
    gap:20px;
    overflow:visible;
    padding:8px 0 10px;
  }
  #homeScroll .hscroll .bcard{
    flex:none;width:auto;min-width:0;
    padding:14px 14px 16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    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:190px;overflow:hidden}
  #homeScroll .bcard .bimg img{max-height:175px;max-width:100%;object-fit:contain}
  #homeScroll .bcard .bimg svg{height:165px}
  #homeScroll .bcard .bn{font-size:14px;margin-top:12px}
  #homeScroll .bcard .bb{font-size:11.5px}
  #homeScroll .bcard .br{font-size:12.5px}

  /* カテゴリから探す：文字が1行で収まる幅を確保（狭い画面では自動で2段に折り返す）＋カードhover */
  #homeScroll .catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;overflow:visible}
  #homeScroll .catcell .cl{white-space:nowrap}
  #homeScroll .catcell{transition:background .15s, box-shadow .2s, transform .2s}
  #homeScroll .catcell:hover{background:#fff;box-shadow:0 8px 20px rgba(30,42,68,.10);transform:translateY(-2px)}

  /* レビューカード：2カラム配置（グリッドの自動配置に任せる） */
  #homeScroll > .review-card{margin:0 0 16px;height:fit-content}

  /* ============ 探す ============ */
  #searchScroll{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
    column-gap:28px;
    align-content:start;
    padding:0 40px 40px;
  }
  #searchScroll > .sec-h,
  #searchScroll > .sort-bar,
  #searchScroll > .search-req,
  #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}
  #searchScroll > .rev-item:hover{box-shadow:0 6px 18px rgba(30,42,68,.08)}
  #searchScroll .sec-h .t{font-size:18px}
  #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-row{justify-content:flex-start;gap:34px}

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

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

/* ──────────────────────────────────────────────
   ワイドPC（1100px以上）：銘柄詳細を2カラムに
   （左=ボトル画像sticky・右=情報→レビュー。狭い幅では右カラムが
   潰れるため1100px以上に限定）
   ────────────────────────────────────────────── */
@media (min-width:1100px){
  #drinkScroll{
    max-width:1240px;
    display:grid;
    grid-template-columns:440px 1fr;
    column-gap:48px;
    align-content:start;
    align-items:start; /* 行のstretchで.d-counts等が潰れるのを防ぐ */
    padding:10px 40px 150px;
  }
  /* 左カラム：画像（スクロールしても付いてくる） */
  #drinkScroll .d-hero{
    grid-column:1;
    grid-row:1 / span 8;
    position:sticky;top:18px;
    height:480px;margin:0;
    border-radius:20px;
  }
  #drinkScroll .d-hero img{max-height:440px}
  #drinkScroll .d-hero svg{height:400px}
  /* 右カラム：情報とレビューを縦に流す */
  #drinkScroll > :not(.d-hero){grid-column:2}
  #drinkScroll .d-name{font-size:30px}
  #drinkScroll .d-title{text-align:left;padding-top:8px}
  #drinkScroll .d-rate{text-align:left}
  #drinkScroll .d-rate .big{font-size:30px}
  #drinkScroll .d-voice{text-align:left;padding-left:0}
  #drinkScroll .dv-chips{justify-content:flex-start}
  /* overflow:hiddenがグリッド行の高さ計算を壊すため解除（角丸の切り抜きは不要・子はテキストのみ） */
  #drinkScroll .d-counts{max-width:520px;display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  #drinkScroll .d-info{max-width:640px}
  #drinkScroll .rev-tabs{justify-content:flex-start}
  #drinkScroll .rev-item{max-width:760px}
  /* CTAボタンは右カラムの下に固定幅で */
  .d-cta{padding-left:520px;padding-right:40px}
  .d-cta button{max-width:280px}
}

/* ──────────────────────────────────────────────
   中間の幅（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}

  /* 横スクロール行は折り返し（マウスで横スクロールしづらいため） */
  .hscroll{flex-wrap:wrap;overflow-x:visible;padding-bottom:8px}
  .hscroll .bcard{flex:0 0 132px}
  .catgrid{flex-wrap:wrap;overflow-x:visible}

  /* 探す一覧：2列まで */
  #searchScroll{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    column-gap:20px;
    align-content:start;
    padding:0 24px 32px;
  }
  #searchScroll > .sec-h,
  #searchScroll > .sort-bar,
  #searchScroll > .search-req,
  #searchScroll > .empty{grid-column:1/-1}
  #searchScroll > .rev-item{margin:0}
}