/* purchase.css — 購入ページ（商品A＝gate.html・商品B＝gate_aisho.html）の共通スタイル（2026-09-29 に gate.html の <style> から切り出し）。
 * 以下は商品Aのときの注記：購入ページ（商品A「設計図の全文」）。黄金の門の先＝有料ゾーン（白・天界）。
 * ⚠ ページ名（gate.html）と金の扉の部品（js/gate.js・css/gate.css）は別物。ページのロジックは js/purchase.js。
 * 文言の正＝docs/content/GENELOG_購入と納品の文言_v3-2.md §1（配信用＝src/content/purchase_flow.json の purchase）。
 * 価格の数字は order_config.json の price_jpy（1箇所）→ build_content が purchase_flow.json に入れる。
 * 文章は中央揃え（report.html の .lead と同じ）。【含まれるもの】のリストだけ左揃え。 */
/* 幅：原稿のいちばん長い1行（「お支払いのあと、…お答えいただきます。」33字）が1行に収まる幅 */
.purchase .screen-inner { max-width: 760px; padding-top: 84px; padding-bottom: 56px; }
.purchase .nav .brand, .purchase .nav a { color: var(--fg); }
.panel { background: rgba(255, 255, 255, 0.82); border: 1px solid var(--card-border); border-radius: 18px; padding: 32px 24px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 40px rgba(16, 26, 58, 0.08); }
@media (min-width: 640px) { .panel { padding: 44px 48px; } }

.lead { text-align: center; }
.lead h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.18em; color: var(--gold); font-size: 1.5rem; margin: 0 0 28px; white-space: nowrap; }
.lead h1::before, .lead h1::after { content: "──"; color: var(--gold-dim); margin: 0 0.6em; letter-spacing: 0; }
/* 原稿の改行は <br class="soft">（js/purchase.js）。狭い画面では隠して自然に流す（空白にしない）。折り返しは文節で */
.lead p, .includes li small { word-break: auto-phrase; text-wrap: pretty; }
.lead p { margin: 0 0 1.2em; line-height: 2; letter-spacing: 0.04em; }

/* 【含まれるもの】：見出しは中央・リストは左揃え（ブロックごと中央に置く） */
.includes { margin: 30px 0 28px; }
.includes h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.14em; color: var(--gold); margin: 0 0 16px; }
.includes ul { display: inline-block; text-align: left; list-style: none; margin: 0; padding: 0; }
.includes li { position: relative; padding-left: 1.3em; margin: 0 0 0.9em; line-height: 1.8; }
.includes li::before { content: "・"; position: absolute; left: 0; color: var(--gold); }
.includes li b { font-weight: 600; }
.includes li small { display: block; font-size: 0.85rem; color: var(--fg-muted); letter-spacing: 0.02em; }

.price { margin: 26px 0 30px; font-family: var(--font-serif); letter-spacing: 0.06em; color: var(--fg); }
.price b { font-size: 2rem; font-weight: 500; color: var(--gold); }
.price span { font-size: 0.9rem; margin-left: 0.3em; color: var(--fg-muted); }

.cta { margin: 34px 0 18px; }
.cta .gate-note { margin-top: 18px; font-size: 0.8rem; line-height: 1.9; color: var(--fg-muted); }
.cta .msg { margin: 16px auto 0; max-width: 28em; font-size: 0.9rem; line-height: 1.9; color: var(--fg); }
.cta .msg a { color: var(--gold); }
/* 決済の受付前（site_flags.payment_live が false）：扉の下の1行 */
.cta .pending { margin: 14px auto 0; max-width: 28em; font-size: 0.92rem; line-height: 1.9; color: var(--fg); }

/* 最終確認の表示（2022年改正特商法）：扉の手前に、提供時期・キャンセルの条件・特商法へのリンク。価格はこの上に出ている */
.terms { margin: 28px auto 0; max-width: 34em; padding: 16px 18px; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); font-size: 0.84rem; line-height: 1.9; color: var(--fg-muted); text-align: left; }
.terms p { margin: 0 0 0.5em; line-height: 1.9; letter-spacing: 0.02em; }
.terms p:last-child { margin-bottom: 0; text-align: center; }
.terms b { color: var(--fg); font-weight: 600; margin-right: 0.4em; }
.terms a { color: var(--gold); }

.expert { margin-top: 20px; text-align: center; }
.expert h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; letter-spacing: 0.1em; margin: 0 0 8px; }
.expert p { margin: 0; color: var(--fg-muted); }

/* 狭い画面：原稿の改行に自動の折り返しが重なると1〜2字だけの行が出るので、改行をやめて文節で流す */
@media (max-width: 480px) {
  .panel { padding: 28px 18px; }
  .lead h1 { font-size: 1.25rem; letter-spacing: 0.12em; }
  .lead h1::before, .lead h1::after { margin: 0 0.4em; }
  .lead p { font-size: 0.95rem; }
  br.soft { display: none; }
  .purchase .nav ul { gap: 14px; }
}

/* 商品B：【ご用意いただくもの】と、※で始まる補足の段落 */
.prepare { margin-top: 34px; }
.lead p.aside { font-size: 0.9rem; color: var(--fg-muted); }
.lead p.aside a { color: var(--gold); }