/* =============================================================================
   NOMISMA — PC の版面（2026-09-03）
   オーナー指摘「全てのデザインが PC だと中央に寄りすぎです。徹底的にプロのデザイナーとして見直せよ。」

   実測（1440×900・プレビュー 19111・pc-audit/before/measure.tsv）:
     学校の面の全頁（教本一覧・科目・航路・実物・用語・史料室・人物編・シラバス・科目の頁）が .yo（44rem＝704px）の
     一枠で組まれ、画面の 49% しか使っていなかった（左右に 368px ずつの空き）。索引まで同じ細い枠に流し込まれ、
     科目の札は 3 列 213px・実物は 5 列 132px・用語は 2 段組。入口も 節の頭（.ac-head--mid 672px）・貨幣学の読み物（720px）・
     入学案内（880px）・確認問題（720px）・末尾の帯（768px）が中央の狭い柱だった。学びの画面の一覧は 1180px。

   規則（1024px 以上にだけ効く。SP・タブレットの版面には触れない）:
     ① 器は 1280px（Stitch の max-w-7xl・theme-dark.css と同じ）。左右 32px。12 列の考え方で 題は左 7／説明は右 5
        （入口の WHY NOW が既に持っていた型を、頁の頭と全節の頭に広げる）
     ② 索引の頁（.yo--wide）は器いっぱい。札 4 列・実物 8 列・用語 4 段組・教本 2 列・表は全幅
     ③ 本文の頁（.yo--rail）は 本文 46rem（教本の中央列と同じ）＋ 右レール（関連・出典・次の一手）。レールは頭の下に貼り付く
     ④ 中央寄せはヒーロー（全幅の情景の上）だけに残す。節の頭・結び・帯・注記の中央寄せは左右の型へ
   ⚠ 変数は :root に置く（theme-dark.css の教訓: `body .ac { --x }` は学校の面で自分に当たらない）
   ⚠ 新しい数は作らない: 1280／32／64（列間 32×2）／46rem（教本 viewer の中央列）／80px（レールとの隙間＝頭の高さ）
   ⚠ 教本ビューア（/kamoku/:code/textbook）は対象外 — 1200px 以上で既に 66rem の版面を持つ（各 *-style.css 末尾）
   ========================================================================== */
:root {
  --pc-wrap: 1280px;
  --pc-gutter: 32px;
  --pc-gap: 64px;
  --pc-main: 46rem;
  --pc-rail-min: 280px;
  --pc-rail-gap: 80px;
  --pc-sticky: calc(var(--lpd-head-h) + 24px);
}

/* レール（.yo-side）は 1180px 未満では本文の下に続く。先頭の主釦（学校でひらく…）は以前どおり末尾へ回す（SP の並びを変えない） */
@media (max-width: 1179px) {
  body .yo-side { display: flex; flex-direction: column; }
  body .yo-side > .yo-back:first-child { order: 99; }
}

/* 入学案内の並び（app.js の ADMISSION を 側柱／本文 の二つの箱に分けた）。
   1024px 未満では以前と同じ順（価格 → 内訳 → 釦）に戻す。箱を透明にして順序だけ指定する */
@media (max-width: 1023px) {
  body .ac-adm { display: flex; flex-direction: column; }
  body .ac-adm-side, body .ac-adm-main { display: contents; }
  body .ac-adm-side .ac-adm-price { order: 0; }
  body .ac-adm-main > * { order: 1; }
  /* 2026-09-05（LP 分析 §12-5）: 釦が内訳と FAQ の下（値札から 1,309px）にあった。値札の直後へ */
  body .ac-adm-side .ac-btns { order: 0; }
}

@media (min-width: 1024px) {
  /* ── A. 頁の頭（.ac-pagehead）: 題を大きく、説明を長く。情景は右に残す ── */
  body .ac-pagehead { padding: 96px 0 80px; }
  body .ac-pagehead .ac-h1 { font-size: 44px; line-height: 1.2; letter-spacing: -.01em; max-width: 16em; }
  body .ac-pagehead .ac-lede { font-size: 17px; line-height: 1.8; max-width: 620px; margin-top: 20px; }

  /* ── B. 節の頭（.ac-head）: 題は左 7・説明は右 5（底揃え）。中央寄せ（--mid）も PC ではこの型 ── */
  body .ac-head, body .ac-head.ac-head--mid, body #why .ac-head {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--pc-gap);
    align-items: end; max-width: none; margin-left: 0; margin-right: 0; text-align: left;
  }
  body .ac-head > .ac-label { grid-column: 1; grid-row: 1; align-self: start; }
  body .ac-head > .ac-h2 { grid-column: 1; grid-row: 2; }
  body .ac-head > .ac-lede { grid-column: 2; margin-top: 0; max-width: none; }
  body .ac-head > .ac-lede:first-of-type { grid-row: 1 / span 2; }
  body .ac-head > .ac-lede + .ac-lede { margin-top: 12px; }

  /* ── C. 入口（LP）の中央の柱を左右の型へ ── */
  /* 貨幣学という学問: 題は左 5（貼り付く）・読み物は右 7 */
  body .ac-num {
    max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--pc-gap); align-items: start;
  }
  body .ac-num > .ac-head { display: block; grid-column: 1; grid-row: 1 / span 3; margin: 0; position: sticky; top: var(--pc-sticky); }
  body .ac-num > .ac-head .ac-h2 { margin: 0; }
  body .ac-num > .ac-body, body .ac-num > .ac-num-src, body .ac-num > .ac-num-map, body .ac-num > .ac-num-tl { grid-column: 2; }
  /* WHY NOW の結び: 中央の一文 → 2 枚目の札に揃えた引用の型 */
  body .ac-why-close {
    max-width: none; margin: 48px 0 0 calc((100% - 64px) / 3 + 32px); text-align: left;
    padding-left: 24px; border-left: 2px solid rgba(233, 195, 73, .4); font-size: 18px;
  }
  /* 一枚から読むの橋渡し: 右の「四つの問い」の列に揃える（.ac-one は 1fr 1.4fr・gap 48px） */
  body .ac-one-bridge { text-align: left; margin-left: calc((100% - 48px) / 2.4 + 48px); }
  /* 学び方の確認問題: 720px の中央 → 器いっぱいの札。左に見出し、右に設問 */
  body .ac-drill {
    max-width: none; margin: 48px 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--pc-gap); align-items: start; padding: 40px;
  }
  body .ac-drill > * { grid-column: 2; }
  body .ac-drill > .ac-card-meta { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  /* 注記と釦の中央寄せを解く */
  body .ac-note { text-align: left; }
  body #gain .ac-btns { justify-content: flex-start; }
  /* 入学案内: 左 5 に価格と釦（貼り付く）・右 7 に内訳 */
  body .ac-adm {
    max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--pc-gap); align-items: start;
  }
  /* ⚠ 2026-09-07（オーナー指示）: 金額の列は**貼りつけない**。
     sticky にすると、右の内訳を読んでいる間じゅう値札と釦が追いかけてきて、
     CTA の帯のように見える。入学の欄は読んで決める場所なので、その場に置く。 */
  body .ac-adm-side { position: static; }
  body .ac-adm-side .ac-adm-price { text-align: left; margin-bottom: 28px; }
  body .ac-adm-side .ac-adm-price b { font-size: 56px; }
  body .ac-adm .ac-btns { justify-content: flex-start; margin-top: 0; }
  body .ac-adm-main { min-width: 0; }
  /* 末尾の帯（入口の FINAL・学校の面の CTA 帯）: 題は左 7・釦は右 5 */
  body .ac-cta { text-align: left; }
  body .ac-cta .ac-wrap {
    max-width: var(--pc-wrap); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--pc-gap); align-items: center;
  }
  body .ac-cta .ac-h2 { grid-column: 1; margin: 0; }
  body .ac-cta .ac-lede { grid-column: 1; margin: 16px 0 0; max-width: none; }
  body .ac-cta .ac-btns { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin: 0; }

  /* ── D. 学校の面の本文の器（.yo）── 既定（.yo だけ）は 44rem 中央のまま（法務など短い文章の頁） */
  /* 索引: 器いっぱいの格子 */
  body .yo--wide { max-width: var(--pc-wrap); padding: 48px var(--pc-gutter) 96px; }
  body .yo--wide h1 { font-size: 2.6rem; }
  body .yo--wide .yo-lede { max-width: 60ch; }
  body .yo--wide .ac-grid--3 { grid-template-columns: repeat(4, 1fr); }
  body .yo--wide .ac-axismap { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
  body .yo--wide .ac-tray { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px 8px; }
  body .yo--wide .yo-idx { columns: 4; column-gap: 40px; }
  body .yo--wide .ac-books { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  body .yo--wide .ac-entry-card .ac-card-fig { flex: 0 0 50%; }
  body .yo--wide .ac-entry-card .ac-card-in { padding: 40px 48px; }
  body .yo--wide .ac-entry-card .ac-course-t { font-size: 32px; }
  body .yo--wide .ac-axis-lede, body .yo--wide .ac-src-note { max-width: 72ch; }
  body .yo--wide .yo-table { font-size: 1rem; }
  /* 主題の航路（/kouro/t）の停の目次: 一列 144 行 → 二段組 */
  body .yo--wide .ac-cross { columns: 2; column-gap: var(--pc-gap); }
  body .yo--wide .ac-cross li { break-inside: avoid; }

  /* ── E. 学びの画面の一覧（#/courses・#/coins …）: 1180px → 学校の面と同じ 1280px の器 ── */
  /* ⚠ 入口（body.on-lp）は除く — lp.css が .wrap を全幅にしており、ここで縛ると全幅の情景が右で切れる（実測 1440: main 1280@0） */
  body:not(.on-lp) main.wrap.wide { max-width: var(--pc-wrap); padding-left: var(--pc-gutter); padding-right: var(--pc-gutter); }
}

@media (min-width: 1180px) {
  /* 本文の頁: 本文 46rem ＋ 右レール。⚠ 1180px 未満ではレールを本文の下に続ける（本文列を 600px 未満に潰さない） */
  body .yo--rail {
    max-width: var(--pc-wrap); padding: 48px var(--pc-gutter) 96px;
    display: grid; grid-template-columns: minmax(0, var(--pc-main)) minmax(var(--pc-rail-min), 1fr);
    column-gap: var(--pc-rail-gap); align-items: start;
  }
  body .yo--rail > .yo-crumb { grid-column: 1 / -1; }
  body .yo-main { min-width: 0; }
  body .yo--rail h1 { font-size: 2.6rem; }
  body .yo-side {
    position: sticky; top: var(--pc-sticky); max-height: calc(100vh - var(--pc-sticky) - 24px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 4px 0 24px 32px; border-left: 1px solid var(--lpd-outline-variant); font-size: 14px;
  }
  body .yo-side h2 { margin: 28px 0 10px; }
  body .yo-side > h2:first-child, body .yo-side > .yo-back:first-child + h2 { margin-top: 0; }
  body .yo-side ul, body .yo-side ol { padding-left: 1.2em; margin: 0 0 8px; }
  body .yo-side li { margin: 0 0 6px; line-height: 1.7; }
  body .yo-side p { margin: 0 0 8px; }
  body .yo-side .yo-tags a { font-size: 13px; }
  body .yo-side .ac-src-dl { grid-template-columns: 1fr; gap: 2px 0; margin: 0 0 16px; }
  body .yo-side .ac-src-dl dd { margin-bottom: 10px; }
  /* レールの先頭の釦（学校でひらく・この航路を観る・実物を学校で見る）: 金の主釦 */
  body .yo-side > .yo-back:first-child {
    display: block; margin: 0 0 28px; padding: 14px 20px; text-align: center;
    background: var(--lpd-gold); color: var(--lpd-on-gold); border-radius: var(--lpd-r-btn);
    font-family: var(--lpd-sans); font-size: 13px; font-weight: 500; letter-spacing: .05em; text-decoration: none;
  }
  body .yo-side > .yo-back:first-child:hover { background: var(--lpd-gold-hover); color: var(--lpd-on-gold); }
}

/* ── 入学案内の左の列: 表紙は金額の下のまま、その位置で釣り合いを取る（2026-09-07）─────
   ⚠ 直す前の実測（1024px 以上でだけ崩れていた。SP は元から正しい）:
     ・480px の列に 200px の表紙だけが左寄せ → 右に 280px の空き（列の真ん中が凹む）
     ・表紙の下の余白が 0px（theme-dark.css の margin:24px auto 0 と
       layout-pc.css の .ac-btns{margin-top:0} が重なった）。近接の原理で表紙が「釦の付属物」に見え、
       表紙の影（下 20px）が金の釦に落ちて濁っていた
     ・左の列が右の列より 436px 早く終わり、左下に空きが残っていた
   直し: 価格・表紙・釦の三つを**同じ左右の端**にそろえる。表紙を列いっぱいにすると
   左の列の高さが右の列に近づき、凹みも下の空きも同時に消える。 */
@media (min-width: 1024px) {
  body .ac-adm-side .ac-adm-cover { max-width: none; width: 100%; margin: 32px 0 40px; }
}