/* =====================================================
   VERSANT 統一グリッドシステム (shared)
   8px base / 390px phone / 24px gutter
   — 既存レイアウトを壊さないミニマル上書き
   ===================================================== */

/* Phone wrap 全画面共通 */
.phone-wrap { max-width: 390px !important; }

/* ── Header (全画面共通 — ただし result は独自レイアウト維持) ── */
body:not(.page-result) .phone-wrap > .header { padding: 16px 24px 0 !important; gap: 8px !important; }

/* ── Typography (result 以外に適用) ────────────── */
body:not(.page-result):not(.page-landing) .title { font-size: 24px !important; line-height: 1.3 !important;
                letter-spacing: -0.02em !important; margin-bottom: 8px !important; }
body:not(.page-result) .title-en,
body:not(.page-result) .subtitle     { font-size: 12px !important; margin-bottom: 24px !important; }
body:not(.page-result) .section-label{ font-size: 12px !important; letter-spacing: 0.05em !important;
                margin-bottom: 8px !important; }

/* ── Primary buttons (Part 以外の全画面) — カード幅に揃える ── */
body:not(.page-part) .start-btn,
.next-btn {
  display: block !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  text-align: center !important;
  line-height: 56px !important;
  gap: 0 !important;
}

/* ── Bottom bar (Part screens) ──────────────────── */
.bottom-bar { max-width: 390px !important; padding: 16px 24px 32px !important; }

/* ── Back link ─────────────────────────────────── */
.back-link { font-size: 13px !important; padding: 4px 0 !important; min-height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; }

/* =====================================================
   ページ別スコープ (body クラスで限定)
   ===================================================== */

/* ── Landing ── */
body.page-landing .main    { padding: 32px 24px 40px !important; }
body.page-landing .points  { gap: 12px !important; margin-bottom: 32px !important; }
body.page-landing .trust   { gap: 16px !important; margin-bottom: 32px !important; }
body.page-landing .badge   { margin-bottom: 20px !important; }

/* ── Notice / QA / Points / Overview (縦リスト系) ── */
body.page-stack .main { padding: 24px 24px 32px !important; }
body.page-stack .notice-list,
body.page-stack .parts-list,
body.page-stack .check-cards,
body.page-stack .point-cards { gap: 8px !important; }
body.page-stack .notice-item,
body.page-stack .part-item,
body.page-stack .check-card,
body.page-stack .point-card { border-radius: 16px !important; padding: 16px !important; }

/* ── Part screens (問題画面) — 下部バー分だけ確保 ── */
body.page-part .main { padding: 80px 24px 160px !important; justify-content: center !important; align-items: center !important; }
body.page-part .topbar { padding: 10px 16px !important; }
body.page-part .part-label { font-size: 13px !important; white-space: nowrap !important;
  overflow: visible !important; text-overflow: clip !important; max-width: none !important;
  display: inline-flex !important; flex-direction: row !important; align-items: center !important;
  flex-wrap: nowrap !important; gap: 10px !important; line-height: 1.3 !important;
  min-width: 0 !important; flex: 0 1 auto !important; }
body.page-part .part-label .part-desc-inline { font-size: 13px !important; white-space: nowrap !important;
  display: inline !important; }
body.page-part .topbar .timer { flex-shrink: 0 !important; }
body.page-part .intro-example { margin-bottom: 20px !important; }
body.page-part .part-desc { margin-bottom: 20px !important; font-size: 15px !important;
  color: rgba(255,255,255,0.9) !important; line-height: 1.65 !important;
  word-break: auto-phrase !important; overflow-wrap: break-word !important;
  text-wrap: pretty !important; }
body.page-part .start-btn {
  display: block !important;
  width: 100% !important;
  padding: 0 !important; height: 56px !important;
  line-height: 56px !important;
  border-radius: 14px !important;
  font-size: 16px !important; text-align: center !important;
  margin-bottom: 24px !important;
}

/* ── Loading ── */
body.page-loading .main { padding: 40px 24px !important; }

/* ── Result (スクロール画面) ── */
body.page-result .main      { padding: 16px 0 32px !important; }
body.page-result .score-card,
body.page-result .cta-wrap  { margin-left: 16px !important; margin-right: 16px !important; }
body.page-result .btn-line  {
  height: 56px !important; border-radius: 14px !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
/* 密なラベルは折り返し禁止 */
body.page-result .header-right,
body.page-result .cefr-text,
body.page-result .score-range-text { white-space: nowrap !important; }

/* =====================================================
   Phase1 監査対応 (2026-06-12)
   ===================================================== */
/* H-7: ランディングのみ H1 をヒーローサイズに（32px 指定と 24px 強制の折衷） */
/* 英語サブタイトル削除（2026-06-12 椿さん指示）に伴い margin-bottom で間隔を確保 */
body.page-landing .title { font-size: 28px !important; margin-bottom: 24px !important; }
body.page-stack .title { margin-bottom: 16px !important; }