/*
 * global-design.css — native-real.com Design System v3
 * 「クリーム地に手描き感のあるやわらかい学習アプリ」
 * Cream #f6f3ec base + teal #1d7f96 + coral CTA #ef8577 + Zen Maru Gothic
 * Injected via <link> before </head> in all HTML files.
 * Uses !important to override inline <style> blocks.
 * v3 spec: DESIGN.md §0 (2026-07-12)
 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

/* ═══════════════════════════════════════════
   1. CSS VARIABLES (Design System v3 tokens)
   ═══════════════════════════════════════════ */
:root {
  /* ── 背景 ── */
  --bg-base:       #f6f3ec;             /* ページ背景（クリーム） */
  --bg-dot:        rgba(23,115,135,.10);/* ドット柄 */
  --bg-card:       #ffffff;
  --bg-card-sub:   #faf8f3;             /* カード内のサブ領域 */
  --bg-teal-pale:  #eaf5f7;             /* ティール淡背景（バッジ・選択中） */
  --bg-coral-pale: #fdeae6;             /* コーラル淡背景 */
  --bg-sand:       #f0ede4;             /* グレー系淡背景 */

  /* ── ブランドカラー ── */
  --teal:          #1d7f96;             /* プライマリ。ボタン・アクティブ・グラフ */
  --teal-text:     #186f83;             /* 見出し・リンク */
  --teal-dark:     #14596a;             /* ティールボタンの下影 */
  --teal-light:    #8dc2cd;             /* グラフ中間色 */
  --teal-pale:     #cfe3e8;
  --highlight:     #c3e6ee;             /* テキストマーカー（蛍光ペン風） */

  --coral:         #ef8577;             /* メインCTA */
  --coral-dark:    #d96c5e;             /* コーラルボタンの下影 */
  --coral-text:    #e2695a;
  --coral-border:  #f0a496;

  --green:         #35a06c;             /* 正解・達成 */
  --skin:          #f7d9b8;             /* キャラクターの肌色 */

  /* ── テキスト ── */
  --text:          #33414a;
  --text-sub:      #7b8790;
  --text-faint:    #9aa4ab;
  --text-disabled: #b6b0a2;

  /* ── ボーダー ── */
  --border:        #e5dfd2 !important;
  --border-strong: #d8d2c4;
  --border-teal:   #d8e6ea;

  /* ── 旧トークン互換エイリアス（既存ページの var() 参照を v3 値へ誘導） ── */
  --bg:            #f6f3ec !important;
  --bg-elevated:   #ffffff;
  --bg-subtle:     #f0ede4;
  --bg-gray:       #f0ede4;
  --surface:       rgba(23,115,135,0.05);
  --surface-2:     rgba(23,115,135,0.09);
  --surface-hover: rgba(23,115,135,0.07);
  --text-1:        #33414a;
  --text-2:        #5b6a73;
  --text-3:        #7b8790;
  --text-muted:    #7b8790;
  --gold:          #1d7f96;             /* 旧アクセント参照 → ティールへ */
  --gold-dim:      rgba(29,127,150,0.65);
  --gold-glow:     rgba(29,127,150,0.18);
  --gold-bg:       rgba(29,127,150,0.10);

  /* ── Quiz Feedback ── */
  --success:       #35a06c;
  --success-bg:    #eaf7f0;
  --error:         #d96c5e;
  --error-bg:      #fdeae6;
  --hint:          #8a7a3b;
  --hint-bg:       #fffdf5;

  /* ── Gamification ── */
  --xp:            #1d7f96;
  --streak:        #e2695a;
  --streak-bg:     #fdeae6;

  /* ── Interactive（旧セカンダリ） ── */
  --teal-bg:       rgba(29,127,150,0.08);

  /* ── Shape ── */
  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     20px;
  --radius-pill:   9999px;

  /* ── Motion ── */
  --t:             0.18s ease;
  --t-fast:        0.10s ease;
}

/* ═══════════════════════════════════════════
   2. BODY & PAGE BACKGROUND — クリーム地 + ティールドット柄
   ═══════════════════════════════════════════ */
body {
  background: #f6f3ec !important;
  background-image: radial-gradient(var(--bg-dot) 1.2px, transparent 1.2px) !important;
  background-size: 22px 22px !important;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif !important;
  color: var(--text);
}

/* Override any inline :root --bg: #FFFFFF or #F8F6F1 */
html {
  --bg: #f6f3ec !important;
}

/* 見出し・ボタンは 900、本文 500（spec: タイポグラフィ） */
h1, h2, h3, .hero-h1 {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

/* キーワード強調: 蛍光ペン風 */
mark, .mk-hl {
  background: var(--highlight) !important;
  border-radius: 4px;
  padding: 0 3px;
  color: inherit;
}

/* ═══════════════════════════════════════════
   3. SITE HEADER — Cream Backdrop
   ═══════════════════════════════════════════ */
.site-header-spacer { height: 54px; }

.site-header {
  background: rgba(246,243,236,0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid #e5dfd2 !important;
  border-bottom-color: #e5dfd2 !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 300 !important;
  padding: 10px 0 !important;
}

.site-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.site-header-logo {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--teal-text) !important;
  white-space: nowrap !important;
  min-height: 44px !important;  /* 指で押せる高さ（ヘッダー高は据え置き・当たり判定のみ） */
}
.site-header-logo svg {
  width: 18px !important;
  height: 18px !important;
  color: #1d7f96 !important;
  flex-shrink: 0 !important;
}

/* ── Nav ── */
.site-header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
.site-header-nav > a {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--text-sub) !important;
  text-decoration: none !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  position: relative !important;
}
.site-header-nav > a:hover {
  color: var(--teal-text) !important;
  background: var(--bg-teal-pale) !important;
}
.site-header-nav > a.active {
  color: #1d7f96 !important;
  font-weight: 900 !important;
}
.site-header-nav > a.active::after {
  content: '' !important;
  position: absolute !important; bottom: 2px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 16px !important; height: 3px !important;
  border-radius: 2px !important; background: #1d7f96 !important;
}

/* ── Nav Dropdown ── */
.nav-dd { position: relative !important; }
.nav-dd-trigger {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--text-sub) !important;
  background: none !important; border: none !important;
  cursor: pointer !important;
  padding: 7px 12px !important; border-radius: 999px !important;
  white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 3px !important;
  font-family: inherit !important;
}
.nav-dd-trigger:hover {
  color: var(--teal-text) !important;
  background: var(--bg-teal-pale) !important;
}
.nav-dd-trigger.active { color: #1d7f96 !important; font-weight: 900 !important; }
.dd-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.nav-dd:hover .dd-chevron, .nav-dd.open .dd-chevron { transform: rotate(180deg); }

.nav-dd-menu {
  display: none !important;
  position: absolute !important; top: 100% !important; left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 180px !important;
  background: #ffffff !important;
  border: 1px solid #e5dfd2 !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 14px rgba(23,115,135,0.10) !important;
  padding: 6px !important; margin-top: 4px !important; z-index: 310 !important;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd.open .nav-dd-menu { display: block !important; }
.nav-dd-menu a {
  display: block !important;
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--text-sub) !important;
  text-decoration: none !important;
  padding: 9px 14px !important; border-radius: 10px !important;
  white-space: nowrap !important;
}
.nav-dd-menu a:hover {
  color: var(--teal-text) !important;
  background: var(--bg-teal-pale) !important;
}
.nav-dd-menu a.active { color: #1d7f96 !important; font-weight: 900 !important; }

/* ── Hamburger ── */
.site-hamburger {
  display: none !important;
  background: none !important; border: none !important;
  cursor: pointer !important; padding: 8px !important;
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important; position: relative !important; z-index: 302 !important;
}
.site-hamburger span {
  display: block !important;
  width: 18px !important; height: 2px !important;
  background: var(--text) !important;
  margin: 4px auto !important; border-radius: 2px !important;
}
.site-hamburger:hover { background: var(--bg-teal-pale) !important; }
@media (max-width: 768px) {
  .site-header-nav { display: none !important; }
  .site-hamburger { display: block !important; }
}

/* ── Mobile Nav ── */
.site-mobile-nav {
  display: flex !important; visibility: hidden !important;
  pointer-events: none !important;
  position: fixed !important; inset: 0 !important;
  background: rgba(20,60,72,0.97) !important;
  z-index: 301 !important; backdrop-filter: blur(20px) !important;
  flex-direction: column !important;
  /* スクロールは内側の .site-mobile-nav-scroll が担当（閉じるボタンを固定するため） */
  overflow: hidden !important;
  opacity: 0 !important; transition: opacity 0.3s, visibility 0.3s !important;
}
.site-mobile-nav-scroll {
  flex: 1 !important; min-height: 0 !important; width: 100% !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important;
  /* justify-content:center + overflow は上側のあふれをスクロール不能にする。
     flex-start を基準に、safe center を解する browser のみ中央寄せ。 */
  justify-content: flex-start !important; gap: 4px !important;
  justify-content: safe center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 72px 0 calc(40px + env(safe-area-inset-bottom, 0px)) !important;
}
.site-mobile-nav.active {
  visibility: visible !important; pointer-events: auto !important; opacity: 1 !important;
}
.site-mobile-nav a {
  color: rgba(255,255,255,0.75) !important; text-decoration: none !important;
  font-size: 17px !important; font-weight: 700 !important;
  padding: 14px 40px !important; border-radius: 14px !important;
  width: 260px !important; text-align: center !important;
}
.site-mobile-nav a:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.site-mobile-nav a.active { color: #8dc2cd !important; }
.mobile-nav-label {
  color: rgba(255,255,255,0.4) !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 0 2px !important; width: 260px !important; text-align: center !important;
}
.mobile-nav-close {
  position: absolute !important; top: 20px !important; right: 20px !important;
  background: rgba(255,255,255,0.1) !important; border: none !important;
  color: #fff !important; cursor: pointer !important;
  width: 44px !important; height: 44px !important; border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.mobile-nav-close:hover { background: rgba(255,255,255,0.2) !important; }

/* ── App Header (quiz screens) ── */
.app-header {
  background: rgba(246,243,236,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom-color: #e5dfd2 !important;
}

/* ═══════════════════════════════════════════
   4. SECTION BACKGROUNDS
   ═══════════════════════════════════════════ */
.section-alt,
.lp-section-alt {
  background: var(--bg-sand, #f0ede4) !important;
}

.philosophy-section {
  background: linear-gradient(180deg, #f0ede4 0%, #eae6da 60%, #f0ede4 100%) !important;
  border-top-color: rgba(29,127,150,0.12) !important;
  border-bottom-color: rgba(29,127,150,0.12) !important;
}

/* ═══════════════════════════════════════════
   5. CARDS & CONTAINERS — 白カード + 淡ティール影 + 浮くホバー
   ═══════════════════════════════════════════ */
.cross-card-mini,
.philosophy-conclusion,
.mission-modal {
  background: var(--bg-card, #ffffff) !important;
}

.step-card,
.pricing-card {
  background: #ffffff !important;
  border-color: transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(23,115,135,0.07) !important;
  transition: transform var(--t), box-shadow var(--t) !important;
}
.step-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 14px rgba(23,115,135,0.12) !important;
}

.feature-strip {
  background: var(--bg-card-sub, #faf8f3) !important;
  border-color: #e5dfd2 !important;
}
.feature-item {
  border-color: #e5dfd2 !important;
}

/* ═══════════════════════════════════════════
   6. QUIZ OPTION BUTTONS — 白地 2.5px 枠 / 正解=緑 / 不正解=コーラル
   ═══════════════════════════════════════════ */
.opt-btn {
  background: #ffffff !important;
  border: 2.5px solid var(--border, #e5dfd2) !important;
  border-radius: 16px !important;
  color: var(--text, #33414a) !important;
  font-weight: 700 !important;
  transition: all 0.18s ease !important;
}
.opt-btn:hover:not(:disabled) {
  background: #ffffff !important;
  border-color: var(--teal, #1d7f96) !important;
}
.opt-btn.correct {
  background: #eaf7f0 !important;
  border-color: var(--green, #35a06c) !important;
  color: #2b7d55 !important;
}
.opt-btn.wrong {
  background: var(--bg-coral-pale, #fdeae6) !important;
  border-color: var(--coral-border, #f0a496) !important;
  color: var(--coral-text, #e2695a) !important;
}
.opt-btn.selected {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  border-color: var(--teal, #1d7f96) !important;
}
.opt-num {
  background: var(--bg-sand, #f0ede4) !important;
  color: var(--text-sub, #7b8790) !important;
}
.opt-btn.correct .opt-num {
  background: var(--green, #35a06c) !important;
  color: #fff !important;
}
.opt-btn.wrong .opt-num {
  background: var(--coral, #ef8577) !important;
  color: #fff !important;
}

/* ── Quiz Animations ── */
@keyframes correct-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,160,108,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(53,160,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,160,108,0); }
}
.opt-btn.correct.anim-pop {
  animation: anim-pop 0.3s ease-out, correct-pulse 0.5s ease-out !important;
}

/* ═══════════════════════════════════════════
   7. EXPLANATION & TRANSCRIPT — 💡解説カード（破線枠）
   ═══════════════════════════════════════════ */
.explanation {
  background: #fffdf5 !important;
  border: 1.5px dashed var(--border-strong, #d8d2c4) !important;
  border-radius: 14px !important;
}

.transcript {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  border-color: var(--border-teal, #d8e6ea) !important;
}

/* ═══════════════════════════════════════════
   8. HINT PANEL
   ═══════════════════════════════════════════ */
.hint-panel,
.hint-box {
  background: #fffdf5 !important;
  border: 1.5px dashed var(--border-strong, #d8d2c4) !important;
  border-radius: var(--radius-sm, 10px) !important;
  color: var(--text, #33414a) !important;
}

/* ═══════════════════════════════════════════
   9. XP / LEVEL BAR (Gamification)
   ═══════════════════════════════════════════ */
.level-xp-track,
.xp-bar-track {
  background: var(--border, #e5dfd2) !important;
  border-radius: 9999px !important;
}
.level-xp-fill,
.xp-bar-fill {
  background: linear-gradient(90deg, #186f83, #1d7f96, #8dc2cd) !important;
  border-radius: 9999px !important;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.level-badge {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  color: #186f83 !important;
  border: 1px solid var(--border-teal, #d8e6ea) !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.streak-badge {
  background: var(--bg-coral-pale, #fdeae6) !important;
  color: var(--coral-text, #e2695a) !important;
  border: 1px solid var(--coral-border, #f0a496) !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.level-name {
  color: var(--text, #33414a) !important;
}

/* ═══════════════════════════════════════════
   10. AUDIO CARD
   ═══════════════════════════════════════════ */
.audio-card {
  background: linear-gradient(135deg, #186f83 0%, #1d7f96 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════
   11. PRIMARY CTA — コーラル押しボタン（下影 + 沈む）
   ═══════════════════════════════════════════ */
.btn-primary-lg,
.plan-btn-gold,
.next-btn {
  background: var(--coral, #ef8577) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 0 var(--coral-dark, #d96c5e) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  white-space: nowrap !important;
}
.btn-primary-lg:hover,
.plan-btn-gold:hover,
.next-btn:hover {
  box-shadow: 0 4px 0 var(--coral-dark, #d96c5e), 0 6px 16px rgba(239,133,119,0.35) !important;
}
.btn-primary-lg:active,
.plan-btn-gold:active,
.next-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--coral-dark, #d96c5e) !important;
}

/* Ghost / Secondary button — 白背景 + ティール枠 */
.btn-ghost,
.plan-btn-ghost {
  background: #ffffff !important;
  color: var(--teal-text, #186f83) !important;
  border: 2px solid var(--border-teal, #d8e6ea) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.btn-ghost:hover,
.plan-btn-ghost:hover {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  color: var(--teal-text, #186f83) !important;
  border-color: var(--teal, #1d7f96) !important;
}

/* Teal button — ティール押しボタン */
.plan-btn-teal,
.btn-teal {
  background: var(--teal, #1d7f96) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 var(--teal-dark, #14596a) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  white-space: nowrap !important;
}
.plan-btn-teal:active,
.btn-teal:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--teal-dark, #14596a) !important;
}

/* ═══════════════════════════════════════════
   12. TAB NAVIGATION
   ═══════════════════════════════════════════ */
.filter-tabs button,
.mode-tab,
.cat-tab {
  background: transparent !important;
  color: var(--text-sub, #7b8790) !important;
  border: none !important;
  font-weight: 700 !important;
  transition: box-shadow 0.15s ease, color 0.15s ease !important;
}
.filter-tabs button:hover,
.mode-tab:hover,
.cat-tab:hover {
  color: var(--teal-text, #186f83) !important;
  box-shadow: var(--teal-pale, #cfe3e8) 0px -3px 0px 0px inset !important;
}
.filter-tabs button.active,
.mode-tab.active,
.cat-tab.active {
  color: #1d7f96 !important;
  box-shadow: #1d7f96 0px -3px 0px 0px inset !important;
}

/* ═══════════════════════════════════════════
   13. STATS DISPLAY
   ═══════════════════════════════════════════ */
.stat-num,
.stat-value {
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
  color: var(--text, #33414a) !important;
}
.stat-label {
  color: var(--text-sub, #7b8790) !important;
}

/* ═══════════════════════════════════════════
   14. AXIS FEEDBACK PANEL — 統計バー（弱点=コーラル / 良好=ティール）
   ═══════════════════════════════════════════ */
.axis-feedback {
  background: var(--bg-card-sub, #faf8f3) !important;
  border-color: #e5dfd2 !important;
}
.af-bar-wrap {
  background: var(--bg-sand, #f0ede4) !important;
}
.af-bar {
  background: #1d7f96 !important;
}
.af-bar.weak {
  background: var(--coral, #ef8577) !important;
}
.af-bar.strong {
  background: var(--green, #35a06c) !important;
}

/* ═══════════════════════════════════════════
   15. MISSION MODAL
   ═══════════════════════════════════════════ */
.mission-modal {
  background: #ffffff !important;
  border: 1px solid #e5dfd2 !important;
  box-shadow: 0 8px 32px rgba(23,115,135,0.18) !important;
}

.share-card-wrap {
  background: var(--bg-card-sub, #faf8f3) !important;
}

/* ═══════════════════════════════════════════
   16. BACKGROUND ORBS
   ═══════════════════════════════════════════ */
.orb-1 {
  background: radial-gradient(circle at center, rgba(29,127,150,0.08), transparent 70%) !important;
}
.orb-2 {
  background: radial-gradient(circle at center, rgba(29,127,150,0.12), transparent 70%) !important;
}
.orb-3 {
  background: radial-gradient(circle at center, rgba(239,133,119,0.08), transparent 70%) !important;
}

/* ═══════════════════════════════════════════
   17. RESET / END BUTTONS
   ═══════════════════════════════════════════ */
.reset-btn {
  background: #ffffff !important;
  border-color: #e5dfd2 !important;
  color: var(--text-sub, #7b8790) !important;
}
.reset-btn:hover {
  background: var(--bg-sand, #f0ede4) !important;
  color: var(--text, #33414a) !important;
}

.end-session-btn {
  border-color: #e5dfd2 !important;
  color: var(--text-sub, #7b8790) !important;
}
.end-session-btn:hover {
  background: var(--bg-sand, #f0ede4) !important;
  color: var(--text, #33414a) !important;
}

/* ═══════════════════════════════════════════
   18. ARTICLE / SERVICE PAGE OVERRIDES
   ═══════════════════════════════════════════ */
.cta-box,
.sticky-cta {
  background: #ffffff !important;
  border-color: #e5dfd2 !important;
}

.compare-table th,
.compare-table td {
  border-color: #e5dfd2 !important;
}

.toc-sidebar,
.toc-wrap {
  background: #ffffff !important;
  border-color: #e5dfd2 !important;
}

.faq-q,
.faq-item {
  border-color: #e5dfd2 !important;
}

.card-service,
.service-card {
  background: #ffffff !important;
  border-color: transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(23,115,135,0.07) !important;
  transition: transform var(--t), box-shadow var(--t) !important;
}
.card-service:hover,
.service-card:hover {
  transform: translateY(-2px) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 14px rgba(23,115,135,0.12) !important;
}

/* ═══════════════════════════════════════════
   19. QUIZ MODE CARDS
   ═══════════════════════════════════════════ */
.mode-card {
  background: #ffffff !important;
  border-color: transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(23,115,135,0.07) !important;
}
.mode-card:hover,
.mode-card.selected {
  border-color: rgba(29,127,150,0.4) !important;
  box-shadow: 0 3px 14px rgba(23,115,135,0.12) !important;
}

/* ═══════════════════════════════════════════
   20. LEVEL-UP TOAST
   ═══════════════════════════════════════════ */
.level-up-toast {
  background: rgba(20,89,106,0.95) !important;
  box-shadow: 0 8px 32px rgba(23,115,135,0.3) !important;
}
.level-up-toast .lvup-label {
  color: #8dc2cd !important;
}

/* ═══════════════════════════════════════════
   21. KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes toast-in {
  from { transform: translateY(-20px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════
   22. SCORE DISPLAY
   ═══════════════════════════════════════════ */
.score-num {
  color: #1d7f96 !important;
  font-weight: 900 !important;
}

.seen-bar-track {
  background: var(--border, #e5dfd2) !important;
}
.seen-bar-fill {
  background: linear-gradient(90deg, #186f83, #1d7f96) !important;
}

/* ═══════════════════════════════════════════
   23. KEY PHRASE BADGES
   ═══════════════════════════════════════════ */
.kp {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  border-color: var(--border-teal, #d8e6ea) !important;
  color: #186f83 !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════
   24. MOBILE NAV OVERLAY
   ═══════════════════════════════════════════ */
.site-mobile-nav a.active {
  color: #8dc2cd !important;
}

/* ═══════════════════════════════════════════
   25. PHILOSOPHY QUOTE
   ═══════════════════════════════════════════ */
.philosophy-quote {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  border-left-color: #1d7f96 !important;
}

.philosophy-conclusion {
  background: #ffffff !important;
  border-color: rgba(29,127,150,0.22) !important;
}

/* ═══════════════════════════════════════════
   26. PRICING MONITOR
   ═══════════════════════════════════════════ */
.pricing-monitor {
  background: var(--bg-teal-pale, #eaf5f7) !important;
  border-color: #8dc2cd !important;
}

/* ═══════════════════════════════════════════
   27. LANGUAGE TOGGLE
   ═══════════════════════════════════════════ */
.lang-toggle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub) !important;
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  transition: all var(--t);
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--bg-teal-pale) !important;
  color: var(--teal-text) !important;
}

/* ═══════════════════════════════════════════
   28. JAPANESE HINTS (English pages)
   ═══════════════════════════════════════════ */
.ja-hint {
  display: none;
  font-size: 13px;
  color: var(--text-faint) !important;
  margin-top: 4px;
  line-height: 1.5;
}
body.hints-on .ja-hint {
  display: block;
}
.hint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all var(--t);
}
.hint-toggle:hover {
  background: var(--bg-teal-pale);
  color: var(--teal-text);
}
.hint-toggle .hint-state {
  color: var(--teal);
  font-weight: 900;
}

/* ═══════════════════════════════════════════
   FLOATING FEEDBACK BUTTON
   ═══════════════════════════════════════════ */
.fb-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-text, #186f83);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--teal-dark, #14596a);
  transition: background 0.2s, transform 0.2s, opacity 0.3s, box-shadow 0.1s;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.fb-float.visible {
  opacity: 1;
  pointer-events: auto;
}
.fb-float:hover {
  background: var(--teal, #1d7f96);
  transform: translateY(-2px);
}
.fb-float:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--teal-dark, #14596a);
}
.fb-float svg {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .fb-float span { display: none; }
  .fb-float { padding: 12px; }
}

/* ═══════════════════════════════════════════
   V3 COMPONENTS — 画面ヘッダー / 押しボタン / ピル / 音声 /
   キャラクター / 下タブバー（新規マークアップ用ユーティリティ）
   ═══════════════════════════════════════════ */

/* ── 画面ヘッダー: 戻る円ボタン + ツール名 + ステータスピル ── */
.v3-screen-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
}
.v3-back-btn {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-strong, #d8d2c4);
  color: var(--text-sub, #7b8790);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.v3-back-btn:hover { border-color: var(--teal); color: var(--teal-text); }
.v3-back-btn:active { transform: translateY(2px); }
.v3-screen-title {
  flex: 1; text-align: center;
  font-weight: 900; font-size: 16px;
  color: var(--teal-text, #186f83);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-status-pill {
  flex: 0 0 auto;
  background: var(--bg-teal-pale, #eaf5f7);
  color: var(--teal-text, #186f83);
  border-radius: 999px;
  font-size: 12px; font-weight: 900;
  padding: 5px 12px;
  white-space: nowrap;
}

/* ── プログレスバー ── */
.v3-progress {
  height: 8px; border-radius: 999px;
  background: var(--border, #e5dfd2);
  overflow: hidden;
}
.v3-progress > i {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--coral, #ef8577);
  transition: width 0.35s ease;
}
.v3-progress.teal > i { background: var(--teal, #1d7f96); }

/* ── コーラル押しボタン / ティール押しボタン / アウトライン ── */
.v3-btn-coral,
.v3-btn-teal,
.v3-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px; font-weight: 900;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.v3-btn-coral {
  background: var(--coral, #ef8577); color: #fff; border: none;
  box-shadow: 0 4px 0 var(--coral-dark, #d96c5e);
}
.v3-btn-coral:hover { box-shadow: 0 4px 0 var(--coral-dark), 0 6px 16px rgba(239,133,119,0.35); }
.v3-btn-coral:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-dark); }
.v3-btn-teal {
  background: var(--teal, #1d7f96); color: #fff; border: none;
  box-shadow: 0 4px 0 var(--teal-dark, #14596a);
}
.v3-btn-teal:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-dark); }
.v3-btn-outline {
  background: #fff; color: var(--teal-text, #186f83);
  border: 2px solid var(--border-teal, #d8e6ea);
}
.v3-btn-outline:hover { background: var(--bg-teal-pale, #eaf5f7); border-color: var(--teal); }
.v3-btn-outline:active { transform: translateY(2px); }

/* ── チップ / バッジ ── */
.v3-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1.5px solid var(--border, #e5dfd2);
  color: var(--text-sub, #7b8790);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  padding: 7px 14px;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.v3-chip:hover { border-color: var(--teal-pale); color: var(--teal-text); }
.v3-chip.active {
  background: var(--teal, #1d7f96); color: #fff;
  border-color: var(--teal, #1d7f96);
  font-weight: 900;
}

/* ── カード ── */
.v3-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(23,115,135,0.10);
  transition: transform var(--t), box-shadow var(--t);
}
.v3-card.sm { border-radius: 18px; box-shadow: 0 2px 8px rgba(23,115,135,0.07); }
.v3-card.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(23,115,135,0.14);
}

/* ── 記事内ツール導線 (tool-promo) — articles/ 記事末尾・サイドバーの CTA。
   scripts/inject_tool_promo.py がマーカー間に挿入する。
   本文カードは .v3-card.hoverable と併用、レイアウトのみここで定義。 ── */
.tool-promo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  margin: 32px 0;
  border: 1px solid var(--border-teal, #d8e6ea);
}
.tool-promo-icon {
  flex: 0 0 auto;
  font-size: 40px;
  line-height: 1;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: var(--bg-teal-pale, #eaf5f7);
}
.tool-promo-body { flex: 1 1 auto; min-width: 0; }
.tool-promo-eyebrow {
  margin: 0 0 4px;
  font-size: 12.5px; font-weight: 700;
  color: var(--teal-text, #186f83);
  letter-spacing: 0;
}
.tool-promo-title {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 800;
  color: var(--text, #33414a);
  line-height: 1.4;
}
.tool-promo-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-sub, #7b8790);
}
.tool-promo-btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .tool-promo { flex-wrap: wrap; }
  .tool-promo-icon { width: 48px; height: 48px; font-size: 28px; border-radius: 14px; }
  .tool-promo-btn { width: 100%; }
}

/* サイドバー版: 縦積みの小型カード */
.tool-promo-widget {
  padding: 20px;
  text-align: center;
}
.tool-promo-widget .tool-promo-icon {
  margin: 0 auto 12px;
}
.tool-promo-widget .tool-promo-body { margin-bottom: 14px; }
.tool-promo-widget .tool-promo-btn { width: 100%; }

/* ── 統計バー ── */
.v3-stat-row { display: flex; align-items: center; gap: 10px; }
.v3-stat-bar {
  flex: 1; height: 10px; border-radius: 999px;
  background: var(--bg-sand, #f0ede4);
  overflow: hidden;
}
.v3-stat-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--teal, #1d7f96); }
.v3-stat-bar.weak > i { background: var(--coral, #ef8577); }
.v3-stat-pct {
  flex: 0 0 auto;
  font-weight: 900; font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #33414a);
  white-space: nowrap;
}

/* ── 音声再生ボタン: ティール円 + イコライザー4本 ── */
.v3-audio-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--teal, #1d7f96);
  border: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--teal-dark, #14596a);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.v3-audio-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-dark); }
.v3-audio-btn .eq { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.v3-audio-btn .eq i {
  width: 5px; border-radius: 3px; background: #fff;
  height: 30%;
}
.v3-audio-btn.playing .eq i { animation: v3-eq 0.9s ease-in-out infinite; }
.v3-audio-btn.playing .eq i:nth-child(2) { animation-delay: 0.15s; }
.v3-audio-btn.playing .eq i:nth-child(3) { animation-delay: 0.3s; }
.v3-audio-btn.playing .eq i:nth-child(4) { animation-delay: 0.45s; }
.v3-audio-btn .eq i:nth-child(1) { height: 45%; }
.v3-audio-btn .eq i:nth-child(2) { height: 90%; }
.v3-audio-btn .eq i:nth-child(3) { height: 60%; }
.v3-audio-btn .eq i:nth-child(4) { height: 80%; }
@keyframes v3-eq {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-audio-btn.playing .eq i { animation: none; }
}

/* ── キャラクター（肌色円 + 閉じ目 + 頬 + 口） ── */
.v3-chara {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--skin, #f7d9b8);
  display: inline-block;
  flex: 0 0 auto;
}
.v3-chara::before {
  /* 閉じた目 ×2 */
  content: '';
  position: absolute; top: 42%; left: 50%;
  width: 34px; height: 8px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle 5px at 6px -1px, transparent 4.2px, #33414a 4.4px, #33414a 5.6px, transparent 6px) left/10px 8px no-repeat,
    radial-gradient(circle 5px at 6px -1px, transparent 4.2px, #33414a 4.4px, #33414a 5.6px, transparent 6px) right/10px 8px no-repeat;
}
.v3-chara::after {
  /* 頬 ×2 + 口 */
  content: '';
  position: absolute; top: 56%; left: 50%;
  width: 44px; height: 12px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 6px 4px at center, rgba(239,133,119,0.55), transparent 70%) left top/12px 8px no-repeat,
    radial-gradient(ellipse 6px 4px at center, rgba(239,133,119,0.55), transparent 70%) right top/12px 8px no-repeat,
    radial-gradient(circle 4px at 4px 0px, transparent 2.6px, #c96f5e 2.8px, #c96f5e 3.8px, transparent 4.2px) center bottom/8px 5px no-repeat;
}
.v3-chara-bubble {
  display: inline-block;
  background: var(--teal, #1d7f96);
  color: #fff;
  font-size: 12px; font-weight: 900;
  border-radius: 12px;
  padding: 6px 12px;
  position: relative;
  white-space: nowrap;
}
.v3-chara-bubble::after {
  content: '';
  position: absolute; left: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: 7px solid var(--teal, #1d7f96);
  border-left: 0;
}

/* ── 下タブバー（アプリ的ページ用・opt-in マークアップ） ── */
.v3-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 250;
  display: flex;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border, #e5dfd2);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.v3-tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 48px; justify-content: center;
  text-decoration: none;
  color: var(--text-faint, #9aa4ab);
  font-size: 10.5px; font-weight: 700;
  border-radius: 12px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.v3-tabbar a svg { width: 22px; height: 22px; }
.v3-tabbar a.active {
  color: var(--teal, #1d7f96);
  font-weight: 900;
}
body.has-v3-tabbar { padding-bottom: 70px !important; }
/* タブバーと固定フローティング要素の共存（モバイル） */
body.has-v3-tabbar .fb-float { bottom: 84px; }
body.has-v3-tabbar .pwa-banner { bottom: 84px; }
@media (min-width: 900px) {
  .v3-tabbar { display: none; }
  body.has-v3-tabbar { padding-bottom: 0 !important; }
  body.has-v3-tabbar .fb-float { bottom: 20px; }
  body.has-v3-tabbar .pwa-banner { bottom: 20px; }
}

/* ═══════════════════════════════════════════
   MOTION & ACCESSIBILITY
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* §10 Accessibility: キーボード操作時のみフォーカスリングを表示。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   14. 極小幅（〜360px）— iPhone SE / 折りたたみ表示
   CTA は白ボタン幅の担保のため white-space:nowrap を敷いているが、
   320px 幅では nowrap + 左右 32px 余白の固有幅が viewport を超え、
   flex 親（ヘッダー等）ごと横に押し広げてページ全体が横スクロールする。
   極小幅のときだけ折り返しを許可し、余白を詰めて内側に収める。
   ═══════════════════════════════════════════ */
@media (max-width: 360px) {
  .btn-primary-lg,
  .plan-btn-gold,
  .next-btn,
  .btn-counsel-lg,
  .btn-ghost,
  .plan-btn-ghost {
    white-space: normal !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
  /* flex 子は既定で min-width:auto = 内容幅より縮まない。0 にして親に従わせる */
  .site-header-inner > *,
  .lp-nav-inner > * {
    min-width: 0;
  }
  .site-header-inner,
  .lp-nav-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}