/* ============================================================================
   PC（大きい画面）専用の並べ替え。2026-08-25 新規。

   ■ 何のためか
     この現場の画面は全部「スマホ1列」で組んである。PCで開くと
     **画面の真ん中に細い柱が立ち、左右が余白**になっていた（Satoru 報告）。
     DMM の担当者に見せるデモなので、PCで開いても「PCのサイト」に見える必要がある。

   ■ ★このファイルの決まり（守らないとスマホが壊れる）
     1. **すべての指定を @media (min-width:1024px) の中に書く。** 外に書かない。
        スマホ（〜1023px）の見た目は**1pxも変えない**のがこのファイルの前提。
        （確認のしかたは下の「確かめ方」）
     2. 既存のCSSを書き換えない。**足すだけ。** 戻すときはこの1枚を外せば元に戻る。
     3. ★**すべてのセレクタを `html` から始める。**
        理由: このファイルは inc_head_v2.html で読むが、**画面によっては
        その後ろで自前の CSS を読む**（chat.html / index2.html など30画面）。
        同じ優先度なら後から読んだほうが勝つので、`html` を1つ足して
        **読み込み順に関係なく勝つ**ようにしてある。
        （実際に踏んだ: chat.html が後から dmm_ui.css を読み、
          `body#chat.dm-page .dm{max-width:430px}` に負けて黄帯が潰れた）

   ■ 2つの器がある（画面によって違う）
     ① .dm  … DMMぱちタウン風の新しい画面（ホーム・ホール・島・台一覧・チャットほか）
              → PCでは**下タブを左の縦ナビに**移し、内容を横に広げる
     ② .v2-app … 残り約40画面（ログイン・登録・規約・カードBOX・お問い合わせほか）
              → PCでは**読みやすい幅の中央1列**。フォームと文章の画面なので、
                横いっぱいに広げるとかえって読みにくい。

   ■ ★なぜ .v2-app は「高さから幅」だったのか（消してはいけない事情）
     aamuse_v2_shell.css の --v2-appw は min(100vw, 100dvh/1.9464, 760px)。
     スマホでどの端末でも同じ形にするための式で、**スマホでは正しい**。
     ところがPC（横長）では 900/1.9464 = 462px となり、細い柱になる。
     ここではPCのときだけ高さ基準をやめる。**スマホの式は触らない。**

   ■ 確かめ方（スマホを壊していないことの確認込み）
     本番の実物HTMLを取ってきて Chrome で撮り、PC幅とスマホ幅を見比べる。
     手順は docs/HANDOFF_20260822.md §15。
   ============================================================================ */

@media (min-width:1024px){

/* ══ ① DMMぱちタウン風の画面（.dm）═══════════════════════════════════════
   スマホ: 黒帯 / 黄帯 / 本文 / 下タブ（縦に積む）
   PC   : 黒帯（全幅）/ 左に縦ナビ ＋ 右に本文
   ★DOMは変えていない。下タブ（.dm-tabs）を position:fixed で左へ移すだけ。 */

  html:root{ --pc-nav:232px; --pc-top:64px; --pc-max:1180px; }

  /* 器。スマホでは max-width:640px の柱だった */
  html .dm-page .dm{ max-width:none; }

  /* 黒帯は全幅・ロゴは左（PCのサイトはロゴが左にある） */
  html .dm-page .dm-top{
    height:var(--pc-top);
    justify-content:flex-start;
    padding-left:28px; padding-right:28px;
    border-bottom:1px solid #1c1c1c;
  }
  html .dm-page .dm-top .dmm-logo{ font-size:20px; }

  /* 下タブ → 左の縦ナビ */
  html .dm-page .dm-tabs{
    position:fixed; left:0; top:var(--pc-top); bottom:0; width:var(--pc-nav);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:14px 12px; gap:4px; z-index:40;
    border-right:1px solid #1c1c1c;
  }
  html .dm-page .dm-tabs .dm-tab{
    flex:none; height:52px; flex-direction:row; justify-content:flex-start; gap:14px;
    padding:0 14px; border-radius:12px; font-size:15px; font-weight:800;
  }
  html .dm-page .dm-tabs .dm-tab svg{ width:22px; height:22px; }
  html .dm-page .dm-tabs .dm-tab.on{ background:rgba(252,208,0,.14); }
  html .dm-page .dm-tabs .dm-tab:hover{ background:rgba(255,255,255,.08); }
  html .dm-page .dm-tabs .dm-tab .dot{ position:static; margin:0 0 0 auto; }

  /* 本文側を縦ナビのぶんだけ右へ。★タブのある画面だけずらす
     （タブが無い画面でずらすと、左が黒いだけの帯になる）
     ★中身の名前を列挙しないこと。画面ごとに .dm の子は違う
       （.dm-body / .fl / .sg / .cw / .v3 …）。列挙すると必ず取りこぼし、
       その画面だけ中身がナビの下に潜る（島えらびで実際に踏んだ）。 */
  html .dm-page .dm:has(> .dm-tabs) > *:not(.dm-top):not(.dm-tabs){
    margin-left:var(--pc-nav);
  }

  /* 黄帯＝ページの見出し。PCでは中央寄せをやめて左に置く */
  html .dm-page .dm-bar{ height:60px; padding:0 28px; }
  html .dm-page .dm-bar__ttl{ text-align:left; font-size:20px; }

  /* 本文。読みやすい幅で中央に置く */
  html .dm-page .dm-body{ padding:26px 28px 40px; }
  html .dm-page .dm-body > *{ max-width:var(--pc-max); margin-left:auto; margin-right:auto; }

/* ── ホーム（.dm-home）───────────────────────────────────────────────
   ★表の写真は aspect-ratio:3/2。PCの幅（1180px）だと高さ787pxになり、
     写真だけで画面が埋まってショートカットが下に押し出される。横長に。 */
  html .dm-home .dm-photo--hero{ aspect-ratio:16/6; }
  html .dm-home .dm-grid--3{ grid-template-columns:repeat(6,1fr); gap:14px; }
  html .dm-home .dm-grid--3 .dm-tile{ min-height:104px; font-size:14px; gap:10px; }
  html .dm-home .dm-grid--3 .dm-tile .dm-row__ic{ width:46px; height:46px; }

/* ── ホールをえらぶ（.dm-halls）─────────────────────────────────────
   ★grid ではなく flex にしてある。grid にすると、写真（.dm-photo は
     aspect-ratio で高さを作る）の高さが行の高さに入らず、カードが途中で切れて
     次の要素と重なった（実際に踏んだ）。flex なら中身なりの高さになる。 */
  html .dm-halls .dm-body{
    display:flex; flex-wrap:wrap; gap:20px; align-content:flex-start;
    max-width:var(--pc-max); margin-left:auto; margin-right:auto;
  }
  html .dm-halls .dm-body > *{ max-width:none; margin:0; width:100%; }
  html .dm-halls .dm-body > .dm-card:not(.dm-note){ width:calc(50% - 10px); }
  html .dm-halls .dm-card + .dm-card{ margin-top:0; }
  /* 写真は 3:2 のまま横に広がると背が高すぎて、カードの中身が画面に入らない */
  html .dm-halls .dm-photo{ aspect-ratio:16/7; }

/* ── 島えらび（body#floor）────────────────────────────────────────
   実際の配置図。--cell を大きくすれば図ごと拡大する（.fl-isle も .fl-dot も
   --cell から作られている）。PCでは島の点が読める大きさに。 */
  html body#floor.dm-page .fl-map{ --cell:40px; }
  html body#floor.dm-page .fl-wrap{ padding:18px 28px; }
  html body#floor.dm-page .fl-floors,
  html body#floor.dm-page .fl-find,
  html body#floor.dm-page .fl-legend,
  html body#floor.dm-page .fl-note{ padding-left:28px; padding-right:28px; }

/* ── お知らせ・マイページ・フレンド・設定・お問い合わせ（body.v3info）────
   この系統は元から2列（.v3-side + .v3-main）で組んであり、700px 以下でだけ
   1列に落とす作りになっていた（aamuse_v3_info.css の @media (max-width:700px)）。
   ＝ PCの並べ方はもともと持っている。**幅と余白を与えるだけでよい。** */
  html body.v3info.dm-page .v3-body{
    padding:24px 28px 40px; gap:22px;
    max-width:var(--pc-max); margin-left:auto; margin-right:auto; width:100%;
  }
  /* 下に貼り付く送信ボタン。PCで1200px幅のボタンは押し間違えそうに見える */
  html body.v3info.dm-page .r-send > button{ max-width:420px; margin:0 auto; display:block; }

/* ── チャット（body#chat）──────────────────────────────────────────
   ★スマホでは 430px 固定（dmm_ui.css）。この指定は chat.html が**後から**
     読むので、html を足して勝たせている（このファイル冒頭の決まり3）。 */
  html body#chat.dm-page .dm{ max-width:none; }
  html body#chat.dm-page .cw{ max-width:960px; margin-left:auto; margin-right:auto; width:100%; }

/* ══ ② 残り約40画面（.v2-app）════════════════════════════════════════
   ログイン・登録・規約・カードBOX・お問い合わせなど。
   ★高さから幅を決める式（スマホ用）をここでやめる。 */

  html:root{ --v2-appw: min(calc(100vw - 80px), 860px); }

  html .v2-stage{ background:var(--dm-bg); }
  html .v2-app{
    box-shadow:0 10px 40px rgba(0,0,0,.14);
    border-left:1px solid var(--dm-line);
    border-right:1px solid var(--dm-line);
  }
  /* ★黒帯を画面いっぱいに見せる。
     この系統の黒帯は .v2-app::before（CSSで作った1段）なので、列の幅しかない。
     PCだと「黒い札が宙に浮いている」ように見えるので、画面の上端に同じ黒を敷いて
     つなげる。★敷くだけの飾り。押せる場所は1つも増やさない。 */
  html .v2-stage::before{
    content:""; position:fixed; left:0; right:0; top:0; height:56px;
    background:var(--dm-black); z-index:0; pointer-events:none;
  }

  /* ログイン・新規登録・パスワード再設定（.v2-auth を持つ画面）は
     入力欄が3つ4つしかない。860px まで広げると入力欄だけが伸びて間が抜けるので、
     ★フォームの画面だけ細くする（PCのログイン画面はふつう中央の細い列）。 */
  html .v2-stage:has(.v2-auth) .v2-app{ width:min(calc(100vw - 80px), 520px); }

  /* カードBOX。3列のままだと1枚が巨大になるので列を増やす */
  html .v2-cardgrid{ grid-template-columns:repeat(5,1fr); gap:14px; }

}