/* =================================================================== */
/* Kaname デスクトップ最適化CSS（kaname_desktop.css）2026-07-24         */
/*   担当：PC表示の最適化（オーナー指摘「PCとスマホがほぼ同じ」への対応）。 */
/*   背景：モバイル1st設計のため、PC幅でも本文が幅600pxの中央1列のまま     */
/*         ＝広い画面を活かせていなかった（2026-07-05は外余白の化粧のみ）。   */
/*   方針（厳守）：                                                       */
/*     ① モバイル/タブレット（≤1023px）は一切変更しない。                  */
/*        すべて @media (min-width: 1024px) の中だけで完結させる。         */
/*     ② 【2026-07-24 オーナー指示で方針拡大】対象は「全ページ」。          */
/*        当初は公開ページのみだったが、オーナーの「すべてのページをPC対応に・  */
/*        複数列に」の指示で、会員アプリ本体も含め全ページの既定幅を広げる     */
/*        （§0）。フォーム系だけは読みやすさのため狭く保つ。                 */
/*     ③ 色・フォント・角丸・影・世界観は不変。レイアウト（幅と段組み）だけ。 */
/*        散文は読みやすい行長に保ち、カード群は横に広げて複数列にする。      */
/*   既存トークン（--kt-*）と body:has() ページ判定は kaname.css を踏襲。   */
/*   base.html で他CSSより後に読み込む（kaname_mobile.css の後）。          */
/* =================================================================== */

@media (min-width: 1024px) {

  /* --- 0. 【2026-07-24・全ページPC対応】既定の本文列を広げる ---
     背景：これまでPCでも本文が幅600pxの中央1列のままで、ほとんどのページが
     「引き伸ばしたモバイル」に見えていた（オーナー指摘）。PC(≥1024px)では既定を
     広げ、全ページが画面幅を活かすようにする。モバイル/タブレット(≤1023px)は不変。
     読み物の行長が伸びすぎないよう、散文ブロックは各所で最大幅を別途キャップする。 */
  /* 【2026-07-24 追補・オーナー指摘「横幅を大きくしたら表示が左寄りになる項目がある」の是正】
     既定を860→760pxへ。860pxだと“単列コンテンツ（現在地ヘッダー・注意カード・横長カード）”が
     広い枠の中で左に張り付き右側が大きく空いて見えた。760pxでも十分にモバイル(600px)より広く、
     散文の行長も読みやすい。カード群を本当に複数列にできるページ（LP/ブログ一覧/料金/結果）は
     下で個別にさらに広げる＝“中身が幅を埋めるページだけ広くする”方針に修正。 */
  /* 【2026-07-25・オーナー決裁「全ページ幅を1つに完全統一」】
     以前はページ種別ごとに幅を変えていた（760/820/860/1040/980/900/720px）が、遷移のたびに
     本文列の幅が跳ねて「統一されていない」と映った（オーナー指摘）。→ PC(≥1024px)は全ページ
     単一幅に統一する。ページ種別ごとの --kt-app-w 上書きは全廃（signin/restore/LP/ブログ一覧/
     料金/診断結果/記事本文を含む）。読み幅の最適化より“端が揃う統一感”を優先する決裁。
     ※単列コンテンツが広い枠で左寄りに見えないよう、列内ブロックは中央寄せ(下の統一ルール)で詰める。 */
  :root { --kt-app-w: 960px; }

  /* 列を広げても、散文（見出し下のリード等）は読みやすい行長に保つ。
     カード/グリッドのセクションは下の個別ルールで横へ広げる。 */
  body:has(.kt-lp-free-grid) .kt-lead,
  body:has(.kt-lp-free-grid) .kt-lp-oneline,
  body:has(.kt-lp-free-grid) .kt-lp-oneline-text,
  body:has(.kt-balance) .kt-balance-sub {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- 2. LP：はじめての3ステップを横3列に（縦積み→横並び） --- */
  .kt-lp-steps-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .kt-lp-steps-list > .kt-lp-step { height: 100%; }

  /* --- 3. （削除）「無料でできること」は現状1枚の全幅カード設計（テンプレ側で
     grid-column:1/-1 指定・既存CSSにも全幅ルールあり）のため、ここでの列指定は
     効かず将来衝突するだけ。触らない（Codexレビュー2026-07-24指摘）。 --- */

  /* --- 4. LP：3ステップの導線(vista)が横並び構造なら間隔を最適化 --- */
  .kt-lp-vista-flow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- 5. ブログ一覧：縦1列→複数列のカードグリッド ---
     記事数が少なくても崩れないよう auto-fit＋中央寄せ。
     ・記事1本 → 1枚が中央（右側が空く不格好を防ぐ）
     ・2本   → 2枚が中央
     ・3本以上 → 折り返して最大3列
     カード幅は 300〜440px に収め、横に間延びさせない。 */
  body:has(.kt-blogsearch-bar) .kt-blogindex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 440px));
    justify-content: center;
    align-items: stretch;
  }
  body:has(.kt-blogsearch-bar) .kt-blogindex-card { height: 100%; }

  /* --- 6. 料金(club)：本文を広げつつ、散文は読みやすい幅に中央寄せ --- */
  body:has(.kt-club-core-list) .kt-club-core-note,
  body:has(.kt-club-core-list) .kt-club-band-title,
  body:has(.kt-club-core-list) .kt-club-band-kicker {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- 7. 診断結果：本文（読み物）は読みやすい幅に保ち、余白で呼吸させる --- */
  body:has(.kt-balance) .kt-balance-head {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- 8. 現在地ヘッダー（_kt_pagehead）をPCでは中央寄せ ---
     背景：オーナー指摘「左寄りになる項目」の代表。この帯は左寄せテキストのため、
     広い列だと左に張り付き右が大きく空いて“壊れて”見えた。PCではタイトル/一言ガイド/
     小ラベルを中央寄せして左右バランスを取る（「← ホームへ」の戻り行だけ左のまま）。
     モバイル(≤1023px)は不変。 */
  .kt-phead { text-align: center; }
  .kt-phead-top { text-align: left; }   /* 「← ホームへ」は左上のまま */
  .kt-phead-kicker,
  .kt-phead-title,
  .kt-phead-guide {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .kt-phead-next { justify-content: center; }

  /* --- 9. PCの迷子対策：常設のトップナビを見せ、モバイル用の下タブは隠す ---
     背景：オーナー「まだ迷子になる」。PCは画面が広いのにナビが全部ハンバーガー≡に隠れ、
     常に見える行き先が無かった。ヘッダーに主要5導線（下タブと同じ）を横並びで常設し、
     画面下固定のタブバー（モバイル前提のUI）はPCでは非表示にする＝“上に見えるナビ”へ一本化。
     ≡メニュー（完全索引）は引き続き併設。モバイルは一切不変（下タブ＋≡のまま）。 */
  .kt-gnav-plink--desk { display: inline-flex !important; }
  /* 診断は「1問1画面の集中フロー」なので、PCでもヘッダーに行き先リンクを並べず、
     ロゴ＋診断チップ＋≡メニューのコンパクトなヘッダーに留める（幅は全ページ共通960pxに統一済み
     だが、離脱を誘う常設ナビを診断中だけ出さない＝集中優先。行き先は≡メニューで辿れる）。 */
  body:has(.kt-diagnose) .kt-gnav-plink--desk { display: none !important; }
  /* 下タブ非表示は「トップナビ(.kt-gnav)を持つページ」だけに限定する。
     ≡ナビを含まない管理(admin)ページは独自の戻り導線を持たないため、下タブを残して
     ナビ皆無を防ぐ（Codex指摘＝tools等のナビ欠落調査で判明した派生問題の是正）。 */
  body:has(.kt-gnav) .kt-tabbar { display: none !important; }
  /* 下タブを隠すページでは、タブ高トークン --kt-tabbar-h を0にする＝これ1つで、
     ①body の下パディング（kaname.css/tabbar/wayfind が全て var(--kt-tabbar-h) 依存）
     ②固定 .kt-wayfind 帯の bottom 位置（旧＝タブ高分だけ浮いて64px空白が残っていた）
     ③フィードバックFABの bottom 位置
     がまとめて“タブ無し”前提に是正される（Codex P1指摘の是正）。admin（.kt-gnav無し）は
     64pxのまま＝下タブと整合。kaname_desktop.css は tabbar/wayfind より後に読むので勝つ。 */
  body:has(.kt-gnav) { --kt-tabbar-h: 0px; }

  /* --kt-tabbar-h に依存しない“固定値”の下タブ避けが2箇所残る＝
     kaname_mobile.css の body{padding-bottom:64px+…}（var非依存）と、
     kaname_ux.css の「上へ戻る」ボタン bottom:72px。下タブを消したPCでは、これらが
     消えた下タブぶんの余白/浮きとして残る。wayfind帯を持たない .kt-gnav ページ（LP/診断/
     ログイン等）に限って詰める（wayfind有りは帯ぶんを空ける既存calcが正しいので触らない）。
     Codex P2/P3指摘の是正。 */
  body:has(.kt-gnav):not(:has(.kt-wayfind)) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  body:has(.kt-gnav):not(:has(.kt-wayfind)) .kt-totop {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}