/* ============================================================
   VERSANT模擬テストUI — 共通デザイントークン
   8px グリッドシステム / 390px ベース
   ============================================================ */
:root {
  /* ── Color ── */
  --navy: #0f165b;
  --yellow: #ffcf06;
  --orange: #fc7564;
  --text: #282b42;
  --bg-gray: #eff1f9;
  --bg-num: #dcdeeb;
  --white: #ffffff;
  --green: #22c55e;
  --line-green: #06C755;

  /* ── Surface (カード) ── */
  --surface-bg: rgba(255,255,255,0.06);
  --surface-border: rgba(255,255,255,0.10);
  --surface-bg-hi: rgba(255,255,255,0.08);
  --surface-border-hi: rgba(255,255,255,0.14);

  /* ── Text opacity ── */
  --fg-1: rgba(255,255,255,1);     /* 見出し */
  --fg-2: rgba(255,255,255,0.80);  /* 本文 */
  --fg-3: rgba(255,255,255,0.55);  /* 補足 */
  --fg-4: rgba(255,255,255,0.35);  /* 極淡 */

  /* ── Spacing (8pxベース) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 40px;
  --sp-7: 48px;

  /* ── Gutter (画面端と本体の距離) ── */
  --gutter: 24px;

  /* ── Radius ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* ── Typography scale ── */
  --fs-h1: 24px;       /* 画面タイトル */
  --fs-h2: 18px;       /* セクション見出し */
  --fs-body: 14px;     /* 本文 */
  --fs-sm: 13px;       /* 補足 / カード内テキスト */
  --fs-xs: 12px;       /* キャプション */
  --fs-2xs: 11px;      /* ラベル / バッジ */
  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --ls-tight: -0.02em;
  --ls-wide: 0.05em;

  /* ── Phase color (Listening) ── */
  --listen-blue: #93c5fd;

  /* ── Button ── */
  --btn-h: 56px;
  --btn-r: 14px;

  /* ── Header ── */
  --header-pad-y: 16px;
  --header-logo-h: 22px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100vh; }

body {
  background: var(--navy);
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Phone wrap (390px固定) ── */
.phone-wrap {
  width: 100%;
  max-width: 390px;
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  flex-direction: column;
}

/* ── Header (共通 — ただし result は versant-result.html 側で独自指定) ── */
body:not(.page-result) .header {
  padding: var(--header-pad-y) var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
body:not(.page-result) .header .logo { height: var(--header-logo-h); width: auto; flex-shrink: 0; display: block; }

/* ── Main (共通) ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--gutter) var(--sp-6);
}

/* ── Section label (Step / タグ) ── */
.section-label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--yellow);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--sp-2);
}

/* ── Title ── */
.title {
  font-size: var(--fs-h1);
  font-weight: 900;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}

.title-en {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-5);
}

.sub {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-5);
}

/* ── Card base ── */
.card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-xl);
  padding: var(--sp-3);
}

/* ── Primary button ── */
.btn-primary {
  display: block;
  width: 100%;
  height: var(--btn-h);
  background: var(--yellow);
  border: none;
  border-radius: var(--btn-r);
  font-size: 16px;
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  letter-spacing: var(--ls-tight);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary[disabled], .btn-primary.is-disabled {
  opacity: 0.35; pointer-events: none;
}

/* ── Back link ── */
.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-3);
  text-decoration: none;
  padding-top: var(--sp-1);
}

.btn-wrap { margin-top: auto; }

/* ── Animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── icon centering fix ── */
.notice-icon, .card-icon, .info-icon, .ready-icon, .bottom-icon {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
}
.notice-icon svg, .card-icon svg, .info-icon svg,
.ready-icon svg, .bottom-icon svg,
#speakerBtnIcon svg, #micBtn svg { display: block; }

/* ============================================================
   Example セクション（Part D/E/F 用の共通スタイル）
   Part A/B/C は HTML 内に独自スタイルがあるが、Part D/E/F には
   なかったため tokens.css 側で補完する。
   ============================================================ */
.intro-example {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: left;
  width: 100%;
  max-width: 342px;
  margin: 0 auto 24px;
}
.example-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
  background: rgba(252,117,100,0.1);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 10px;
}
.example-label {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.example-q-box {
  background: rgba(255,255,255,0.09);
  border-radius: 8px 8px 8px 2px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
  line-height: 1.5;
}
.example-a-box {
  background: rgba(255,255,255,0.09);
  border-radius: 8px 8px 2px 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
}

/* ============================================================
   フェーズインジケーター（Listening / Speaking）
   各 Part の問題画面で「今は聞く / 今は話す」を明示する
   ============================================================ */
.phase-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px 40px;
  margin: 24px auto 0;
  width: 100%;
  max-width: 320px;
  border-radius: 28px;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Listening モード：落ち着いた青系 */
.phase-indicator[data-mode="listen"] {
  background: linear-gradient(160deg, rgba(96,165,250,0.20) 0%, rgba(59,130,246,0.10) 100%);
  color: var(--listen-blue);
  box-shadow: 0 0 0 1px rgba(147,197,253,0.15), inset 0 0 80px rgba(147,197,253,0.05);
}

/* Speaking モード：黄色系・パルスアニメ */
.phase-indicator[data-mode="speaking"] {
  background: linear-gradient(160deg, rgba(255,207,6,0.28) 0%, rgba(252,117,100,0.18) 100%);
  color: #ffcf06;
  box-shadow: 0 0 0 1px rgba(255,207,6,0.4), 0 0 32px rgba(255,207,6,0.15);
  animation: phasePulse 1.8s ease-in-out infinite;
  transform: scale(1.02);
}

@keyframes phasePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,207,6,0.4), 0 0 32px rgba(255,207,6,0.15); }
  50%      { box-shadow: 0 0 0 1px rgba(255,207,6,0.6), 0 0 48px rgba(255,207,6,0.35); }
}

.phase-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.phase-icon svg {
  display: block;
}

.phase-label {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
}
.phase-sub {
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.72;
  text-align: center;
}

/* Speaking 時に問題画面の背景全体も微かに変化（強めの視覚効果） */
body.page-part:has(.phase-indicator[data-mode="speaking"]) {
  background: linear-gradient(180deg, var(--navy) 0%, #1a1f5e 100%);
}


/* ============================================================
   試験中 Next ボタン（Phase1 監査 M-5 対応）
   旧: 各 Part 画面のインラインスタイル(高さ約45px) → 56px 規格に統一
   ============================================================ */
.next-runtime-btn {
  margin-top: var(--sp-5);
  height: var(--btn-h);
  padding: 0 40px;
  background: var(--yellow);
  color: var(--text);
  border: none;
  border-radius: var(--btn-r);
  font-size: 16px;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(255,207,6,0.3);
  transition: transform 0.15s;
}
.next-runtime-btn:active { transform: scale(0.98); }