/* ==========================================================================
   HAQEI 統一デザインシステム CSS
   青色基調のモダンデザイン - 全ページ対応
   ========================================================================== */

/* カスタムプロパティ（CSS変数）*/
:root {
  /* カラーパレット */
  --primary-blue: #3b82f6;
  --primary-blue-dark: #2563eb;
  --secondary-blue: #6366f1;
  --accent-blue: #8b5cf6;
  --light-blue: #dbeafe;
  --very-light-blue: #f0f9ff;
  
  /* グラデーション */
  /* 濃色寄せ（AA余裕） */
  --gradient-primary: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); /* blue-800 → blue-700 */
  --gradient-secondary: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%); /* blue-700 → indigo-700 */
  --gradient-light: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%);
  
  /* グレースケール - 改善されたコントラスト */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #6b7280; /* より暗く調整 */
  --gray-500: #4b5563; /* より暗く調整 */
  --gray-600: #374151; /* より暗く調整 */
  --gray-700: #1f2937; /* より暗く調整 */
  --gray-800: #111827; /* より暗く調整 */
  --gray-900: #030712; /* より暗く調整 */
  
  /* シャドウ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* ボーダー半径 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* スペーシング（8ptグリッド） */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  /* 互換レイヤ（既存ユーティリティ） */
  --spacing-xs: 0.5rem;   /* ≒8px */
  --spacing-sm: 0.75rem;  /* ≒12px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */

  /* 要約・分析セクション用カラー */
  --summary-bg: #f8fafc;
  --summary-border: #e2e8f0;
  --accordion-bg: #ffffff;
  --accordion-hover: #f1f5f9;
  
  /* フォント */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  /* タイプスケール（Figmaセマンティック） */
  --type-h1: 2rem;   /* 32 */
  --type-h2: 1.5rem; /* 24 */
  --type-h3: 1.25rem;/* 20 */
  --type-body: 1rem; /* 16 */
  --type-small: 0.875rem; /* 14 */
  
  /* トランジション */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* ベーススタイル */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--gray-900); /* より暗いテキストカラーに変更 */
  background: var(--white); /* 白背景に変更 */
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ベース見出し（AA確保） */
h1 { font-size: var(--type-h1); font-weight: 800; color: var(--gray-900); letter-spacing: 0.1px; margin: 0 0 var(--spacing-lg) 0; }
h2 { font-size: var(--type-h2); font-weight: 700; color: var(--gray-900); letter-spacing: 0.1px; margin: 0 0 var(--spacing-md) 0; }
h3 { font-size: var(--type-h3); font-weight: 700; color: var(--gray-900); letter-spacing: 0.1px; margin: 0 0 var(--spacing-sm) 0; }
p  { font-size: var(--type-body); color: var(--gray-800); }

/* Elevation */
.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: var(--shadow-sm); }
.elevation-2 { box-shadow: var(--shadow-md); }
.elevation-3 { box-shadow: var(--shadow-lg); }
.elevation-4 { box-shadow: var(--shadow-xl); }

/* Surface */
.surface { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.surface-muted { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }

/* コンテナ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-sm {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* カードコンポーネント */
.card {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--spacing-xl) !important;
  margin-bottom: var(--spacing-lg) !important;
  transition: all var(--transition-normal) !important;
  border: 1px solid var(--gray-200) !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .card,
body .card,
.container .card,
.service-grid .card {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--spacing-xl) !important;
  margin-bottom: var(--spacing-lg) !important;
  transition: all var(--transition-normal) !important;
  border: 1px solid var(--gray-200) !important;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-header {
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--primary-blue); /* グラデーションではなくソリッドカラーに */
  margin: 0;
}

.card-body {
  padding: 0;
}

.card-footer {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-lg);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* ボタンコンポーネント */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
  min-height: 44px !important;
  gap: var(--spacing-xs) !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .btn,
body .btn,
.container .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
  min-height: 44px !important;
  gap: var(--spacing-xs) !important;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #1e40af !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .btn.btn-primary,
body .btn.btn-primary,
.container .btn.btn-primary { background: #1e40af !important; color: var(--white) !important; box-shadow: var(--shadow-sm) !important; }

.btn-primary:hover:not(:disabled) { background: #1d4ed8; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-secondary { background: var(--white) !important; color: #1e40af !important; border: 2px solid #1e40af !important; }

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .btn.btn-secondary,
body .btn.btn-secondary,
.container .btn.btn-secondary {
  background: var(--white) !important;
  color: #1e40af !important;
  border: 2px solid #1e40af !important;
}

.btn-secondary:hover:not(:disabled) { background: #eff6ff; color: #1d4ed8; }

.btn-outline { background: #ffffff; color: #1e40af; border: 1px solid #1e40af; }

.btn-outline:hover:not(:disabled) { background: #eff6ff; border-color: #1d4ed8; color: #1d4ed8; }

/* Disabled states */
.btn:disabled,
.btn[disabled] { opacity: 1; cursor: not-allowed; }
.btn.btn-primary:disabled { background: #c7d2fe; color: #1e3a8a; box-shadow: none; }
.btn.btn-secondary:disabled { background: #f8fafc; color: #6b7280; border-color: #cbd5e1; }
.btn.btn-outline:disabled { background: #f8fafc; color: #9ca3af; border-color: #e5e7eb; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: var(--spacing-4); padding: 4px 8px; border-radius: 9999px; font-size: var(--font-size-sm); background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }

/* Tabs */
.tabs { display: flex; gap: var(--spacing-8); border-bottom: 1px solid var(--gray-200); }
.tab { background: #fff; border: 1px solid #e5e7eb; color: var(--gray-700); border-bottom: none; border-radius: 8px 8px 0 0; padding: 10px 14px; cursor: pointer; }
.tab[aria-selected="true"], .tab.active { color: #1e40af; border-color: #1e40af; }

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  min-height: 52px;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

/* ナビゲーションバー */
.navbar {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--gray-200);
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-blue);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-lg);
}

.navbar-nav a {
  color: var(--gray-700); /* より暗いナビゲーションテキスト */
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.navbar-nav a:hover {
  color: var(--primary-blue);
}

/* フォームコンポーネント */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-weight: 500;
  color: var(--gray-800); /* より暗いラベルカラー */
  margin-bottom: var(--spacing-xs);
}

.form-control {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: var(--white);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ラジオボタンとチェックボックス */
.option-label {
  display: flex !important;
  align-items: center !important;
  padding: var(--spacing-md) !important;
  margin-bottom: var(--spacing-sm) !important;
  background: var(--white) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  position: relative !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .option-label,
body .option-label,
.container .option-label,
.question-container .option-label {
  display: flex !important;
  align-items: center !important;
  padding: var(--spacing-md) !important;
  margin-bottom: var(--spacing-sm) !important;
  background: var(--white) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  position: relative !important;
}

.option-label:hover {
  border-color: var(--primary-blue) !important;
  background: var(--very-light-blue) !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .option-label:hover,
body .option-label:hover,
.container .option-label:hover,
.question-container .option-label:hover {
  border-color: var(--primary-blue) !important;
  background: var(--very-light-blue) !important;
}

.option-label input[type="radio"],
.option-label input[type="checkbox"] {
  margin-right: var(--spacing-sm);
  accent-color: var(--primary-blue);
}

.option-label input[type="radio"]:checked + span,
.option-label input[type="checkbox"]:checked + span {
  color: var(--primary-blue-dark);
  font-weight: 600;
}

.option-label:has(input:checked) {
  border-color: var(--primary-blue);
  background: var(--light-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 選択肢インジケーター（A、B、Cなど）のスタイル */
.option-indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--gray-100) !important;
  border: 2px solid var(--gray-300) !important;
  border-radius: 50% !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--gray-700) !important;
  margin-right: var(--spacing-md) !important;
  transition: all var(--transition-fast) !important;
  flex-shrink: 0 !important;
}

.option-label:hover .option-indicator {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  color: var(--white) !important;
}

.option-label:has(input:checked) .option-indicator {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  color: var(--white) !important;
}

/* 選択肢テキストのスタイル */
.option-text {
  flex: 1 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--gray-800) !important;
}

.option-label:has(input:checked) .option-text {
  color: var(--primary-blue-dark) !important;
  font-weight: 500 !important;
}

/* アラートコンポーネント */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  border-left: 4px solid;
}

.alert-info {
  background: var(--very-light-blue);
  border-left-color: var(--primary-blue);
  color: var(--primary-blue-dark);
}

.alert-success {
  background: #f0fdf4;
  border-left-color: #22c55e;
  color: #166534;
}

.alert-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #92400e;
}

.alert-error {
  background: #fef2f2;
  border-left-color: #ef4444;
  color: #991b1b;
}

/* プログレスバー */
.progress {
  width: 100% !important;
  height: 8px !important;
  background: var(--gray-200) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: var(--spacing-lg) !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .progress,
body .progress,
.container .progress,
.nav-controls .progress {
  width: 100% !important;
  height: 8px !important;
  background: var(--gray-200) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: var(--spacing-lg) !important;
}

.progress-bar {
  height: 100% !important;
  background: var(--gradient-primary) !important;
  transition: width var(--transition-normal) !important;
}

/* 既存CSSとの競合を解決するための詳細セレクタ */
html .progress-bar,
body .progress-bar,
.container .progress-bar,
.progress .progress-bar {
  height: 100% !important;
  background: var(--gradient-primary) !important;
  transition: width var(--transition-normal) !important;
}

/* ローディングスピナー */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gray-200);
  border-top: 4px solid var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: var(--spacing-lg) auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ユーティリティクラス */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary-blue); }
.text-secondary { color: var(--gray-700); } /* より暗く調整 */
.text-muted { color: var(--gray-600); } /* より暗く調整 */
.text-success { color: #22c55e; }
.text-warning { color: #f59e0b; }
.text-error { color: #ef4444; }

.bg-primary { background: var(--gradient-primary); }
.bg-light { background: var(--gray-50); }
.bg-white { background: var(--white); }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.m-0 { margin: 0; }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  .card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
  }
  
  .btn {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .navbar-content {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .navbar-nav {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }
  
  .card-footer {
    flex-direction: column;
  }
  
  .option-label {
    padding: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .card {
    padding: var(--spacing-md);
  }
  
  .btn-lg {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}

/* ---------------------------------------------------------
   Legacy class normalization (light theme enforcement)
   旧Tailwind風クラスの色味を白基調にマッピング
   --------------------------------------------------------- */
.bg-gray-900, .bg-gray-900\/50, .bg-gray-800, .bg-gray-700 { background:#ffffff !important; }
.bg-gray-600, .bg-gray-500 { background:#f8fafc !important; }
.border-gray-900, .border-gray-800, .border-gray-700 { border-color:#e5e7eb !important; }
.text-gray-100, .text-gray-200, .text-gray-300 { color:#374151 !important; }
.text-gray-400, .text-gray-500 { color:#6b7280 !important; }
.text-indigo-300, .text-indigo-400 { color:#1e40af !important; }
.text-indigo-300:hover, .text-indigo-400:hover { color:#1d4ed8 !important; }
.bg-indigo-600, .bg-indigo-700 { background:#1e40af !important; }
.hover\:bg-indigo-700:hover { background:#1d4ed8 !important; }


/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.slide-in {
  animation: slideIn var(--transition-normal) ease-out;
}

/* フォーカス管理 */
.focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* =================== */
/* 既存CSSとの統合コンポーネント */
/* =================== */

/* Service Grid (index.css互換) */
.service-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: var(--spacing-lg) !important;
  margin: var(--spacing-xl) 0 !important;
}

.service-card {
  background: white !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--spacing-xl) !important;
  transition: all var(--transition-normal) !important;
  border: 1px solid var(--gray-200) !important;
}

.service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Hero Section */
.hero-section {
  /* ダークな帯をやめ、淡いブルー系の面で分離し可読性向上 */
  background:
    radial-gradient(1200px 600px at 0% 0%, #eef2ff 0%, rgba(238,242,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  color: var(--gray-900) !important;
  padding: var(--spacing-2xl) var(--spacing-lg) !important;
  text-align: center !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--spacing-xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid #e8eef5 !important;
}

/* OS Analyzer Components */
.screen {
  background: white !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--spacing-xl) !important;
  margin: var(--spacing-lg) 0 !important;
}

.question-text {
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--gray-900) !important; /* より暗い質問テキスト */
  margin-bottom: var(--spacing-lg) !important;
  line-height: 1.6 !important;
}

.option {
  display: flex !important;
  align-items: center !important;
  padding: var(--spacing-md) !important;
  margin: var(--spacing-sm) 0 !important;
  background: white !important;
  border: 2px solid var(--gray-300) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  color: var(--gray-900) !important;
}

.option:hover {
  border-color: var(--primary-blue) !important;
  background: var(--very-light-blue) !important;
}

.nav-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--spacing-xl) !important;
  padding: var(--spacing-lg) 0 !important;
}

.result-header {
  text-align: center !important;
  margin-bottom: var(--spacing-xl) !important;
  padding: var(--spacing-lg) !important;
  background: var(--gradient-primary) !important;
  color: white !important;
  border-radius: var(--radius-lg) !important;
}

.os-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: var(--spacing-lg) !important;
  margin: var(--spacing-xl) 0 !important;
}

.os-card {
  background: white !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--spacing-xl) !important;
  border: 1px solid var(--gray-200) !important;
  transition: all var(--transition-normal) !important;
}

.os-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Error and Loading States */
.error-message {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) !important;
  margin: var(--spacing-md) 0 !important;
}

.loading {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: var(--spacing-xl) !important;
  color: var(--gray-700) !important; /* より暗いローディングテキスト */
}

/* Tab Navigation */
.tab-btn {
  background: transparent !important;
  border: none !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  transition: all var(--transition-fast) !important;
  font-weight: 500 !important;
}

.tab-btn.active {
  border-bottom-color: var(--primary-blue) !important;
  color: var(--primary-blue-dark) !important;
}

.tab-btn:hover {
  background: var(--gray-100) !important;
}

/* Layer Content */
.layer-content {
  padding: var(--spacing-lg) !important;
  background: white !important;
  border-radius: var(--radius-md) !important;
  margin-top: var(--spacing-md) !important;
}

/* Section Title */
.section-title {
  font-size: var(--font-size-xl) !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important; /* より暗いセクションタイトル */
  margin-bottom: var(--spacing-lg) !important;
  text-align: center !important;
}

/* Quality Grade Components */
.quality-grade-display {
  background: var(--gradient-primary) !important;
  color: white !important;
  padding: var(--spacing-lg) !important;
  border-radius: var(--radius-lg) !important;
  text-align: center !important;
  margin: var(--spacing-lg) 0 !important;
}

.grade-meter {
  background: var(--gray-200) !important;
  border-radius: var(--radius-xl) !important;
  height: 12px !important;
  overflow: hidden !important;
  margin: var(--spacing-md) 0 !important;
}

.quality-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: var(--spacing-md) !important;
  margin: var(--spacing-lg) 0 !important;
}

.metric-card {
  background: white !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) !important;
  text-align: center !important;
}

.quality-suggestions {
  background: var(--light-blue) !important;
  border: 1px solid var(--primary-blue) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-lg) !important;
  margin: var(--spacing-lg) 0 !important;
}

/* =================== */
/* 将来の拡張用 */
/* =================== */

/* =================== */
/* タブナビゲーションシステム */
/* =================== */

/* タブナビゲーター */
.tab-navigator {
  width: 100%;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* タブヘッダー */
.tab-header {
  display: flex;
  background: var(--gradient-light);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-header::-webkit-scrollbar {
  display: none;
}

/* タブボタン */
.tab-btn {
  flex: 1;
  min-width: 120px;
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  border: none;
  color: var(--gray-600);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
}

.tab-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-blue);
}

.tab-btn.active {
  background: white;
  color: var(--primary-blue);
  font-weight: 600;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
}

.tab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* タブコンテンツコンテナ */
.tab-content-container {
  position: relative;
  min-height: 400px;
}

/* タブコンテンツ */
.tab-content {
  display: none;
  padding: var(--spacing-xl);
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================== */
/* 基本結果タブスタイル */
/* =================== */

/* 基本結果コンテンツ */
.basic-results-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* 結果ヘッダー */
.results-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--gradient-light);
  border-radius: var(--radius-lg);
}

.results-header h2 {
  color: var(--gray-800);
  margin-bottom: var(--spacing-md);
  font-size: 2rem;
  font-weight: 700;
}

.overall-pattern {
  margin-bottom: var(--spacing-md);
}

.pattern-label {
  color: var(--gray-600);
  font-weight: 500;
}

.pattern-type {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 1.2rem;
  margin-left: var(--spacing-sm);
}

.pattern-description {
  color: var(--gray-700);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

/* Triple OSコンテナ */
.triple-os-container {
  margin-bottom: var(--spacing-xl);
}

.triple-os-container h3 {
  color: var(--gray-800);
  margin-bottom: var(--spacing-lg);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

/* OSカードグリッド */
.os-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* OSカード */
.os-card {
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.os-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.os-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-blue);
}

.engine-os::before {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

.interface-os::before {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}

.safemode-os::before {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* OSヘッダー */
.os-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.os-header h3 {
  color: var(--gray-800);
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

/* OSスコア */
.os-score {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 60px;
  text-align: center;
}

/* OSヘキサグラム */
.os-hexagram {
  text-align: center;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.hexagram-symbol {
  font-size: 2rem;
  margin-bottom: var(--spacing-xs);
}

.hexagram-name {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.9rem;
}

/* OS特性 */
.os-traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.trait-tag {
  background: var(--light-blue);
  color: var(--primary-blue);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
}

/* OS関係性 */
.os-relationship {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.os-relationship h4 {
  color: var(--gray-800);
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
  font-weight: 600;
}

.relationship-analysis {
  display: grid;
  gap: var(--spacing-sm);
}

.relationship-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background: white;
  border-radius: var(--radius-sm);
}

.relationship-label {
  color: var(--gray-700);
  font-weight: 500;
}

.relationship-value {
  color: var(--primary-blue);
  font-weight: 600;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--light-blue);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

/* =================== */
/* サマリーセクション */
/* =================== */

.summary-section {
  margin-bottom: var(--spacing-xl);
}

.summary-section h3 {
  color: var(--gray-800);
  margin-bottom: var(--spacing-lg);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.summary-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.summary-card h4 {
  color: var(--primary-blue);
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 2px solid var(--light-blue);
  padding-bottom: var(--spacing-xs);
}

.summary-card p {
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

.summary-card ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.summary-card li {
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: var(--spacing-xs);
}

/* =================== */
/* アクションボタン */
/* =================== */

.action-buttons {
  text-align: center;
}

.primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.secondary-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

/* ボタンスタイル */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 160px;
  white-space: nowrap;
}

.btn-primary { background: #1e40af; color: white; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-secondary { background: #ffffff; color: #1e40af; border: 2px solid #1e40af; box-shadow: none; }
.btn-secondary:hover { background: #eff6ff; color: #1d4ed8; }

.btn-accent {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background: white;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-outline:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
}

/* =================== */
/* 準備中メッセージ */
/* =================== */

.coming-soon-message {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--gradient-light);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
}

.coming-soon-message .icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.coming-soon-message h3 {
  color: var(--gray-800);
  margin-bottom: var(--spacing-md);
  font-size: 1.5rem;
  font-weight: 600;
}

.coming-soon-message p {
  color: var(--gray-600);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

/* =================== */
/* トーストメッセージ */
/* =================== */

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow-xl);
  border-left: 4px solid var(--primary-blue);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  max-width: 300px;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  border-left-color: #10b981;
}

.toast-error {
  border-left-color: #ef4444;
}

/* =================== */
/* エラー・ローディング */
/* =================== */

.error-message {
  text-align: center;
  padding: var(--spacing-xl);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
}

.error-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

.error-message h3 {
  color: #dc2626;
  margin-bottom: var(--spacing-md);
}

.error-message p {
  color: #7f1d1d;
  margin: 0;
}

.loading-message {
  text-align: center;
  padding: var(--spacing-xl);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gray-200);
  border-top: 4px solid var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =================== */
/* レスポンシブデザイン */
/* =================== */

@media (max-width: 768px) {
  .tab-header {
    flex-direction: column;
  }
  
  .tab-btn {
    min-width: auto;
    flex: none;
  }
  
  .os-cards-grid {
    grid-template-columns: 1fr;
  }
  
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .primary-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    min-width: 200px;
  }
  
  .tab-content {
    padding: var(--spacing-md);
  }
}

/* =================== */
/* BasicResultsTab専用スタイル */
/* =================== */

/* 基本結果コンテナ */
.basic-results-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* ヘッダーセクション */
.results-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-xl);
  background: var(--gradient-light);
  border-radius: var(--radius-xl);
  border: 1px solid var(--light-blue);
}

.results-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-md) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.title-icon {
  font-size: 2rem;
}

.results-subtitle {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
}

/* セクションタイトル */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-icon {
  font-size: 1.25rem;
}

/* Triple OSセクション */
.triple-os-section {
  margin-bottom: var(--spacing-2xl);
}

.os-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

/* OSカード */
.os-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.os-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.os-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-blue);
}

.os-card:hover::before {
  opacity: 1;
}

/* OSカードヘッダー */
.os-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.os-icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-light);
  border-radius: var(--radius-lg);
  border: 2px solid var(--light-blue);
  flex-shrink: 0;
}

.os-title-section {
  flex: 1;
}

.os-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 var(--spacing-xs) 0;
}

.os-description {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 0;
}

.os-score-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.score-icon {
  font-size: 1rem;
}

.score-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

/* スコアプログレスセクション */
.score-progress-section {
  margin-bottom: var(--spacing-lg);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.progress-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.progress-percentage {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-800);
}

.progress-bar-container {
  margin-bottom: var(--spacing-md);
}

.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width var(--transition-slow);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-interpretation {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

/* 易卦セクション */
.hexagram-section {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.hexagram-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.hexagram-symbol {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-300);
  flex-shrink: 0;
}

.hexagram-info {
  flex: 1;
}

.hexagram-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 var(--spacing-xs) 0;
}

.hexagram-meta {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 0;
}

/* キーワードセクション */
.keywords-section {
  margin-top: var(--spacing-md);
}

.keywords-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
}

.keywords-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.keyword-tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-blue);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.keyword-tag:hover {
  background: var(--primary-blue-dark);
  transform: scale(1.05);
}

/* 推奨アクションセクション */
.recommendations-section {
  margin-bottom: var(--spacing-lg);
}

.recommendations-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 var(--spacing-sm) 0;
}

.recommendations-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendation-item {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  padding-left: var(--spacing-lg);
}

.recommendation-item::before {
  content: '💡';
  position: absolute;
  left: 0;
  top: var(--spacing-xs);
  font-size: 0.875rem;
}

.recommendation-item:last-child {
  border-bottom: none;
}

/* OSカードフッター */
.os-card-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
}

.detail-btn {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gradient-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.detail-btn:hover {
  background: var(--gradient-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 分析サマリーセクション */
.analysis-summary-section {
  margin-bottom: var(--spacing-2xl);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.summary-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-normal);
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.summary-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.summary-icon {
  font-size: 1.5rem;
}

.summary-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.summary-value {
  margin-bottom: var(--spacing-md);
}

.large-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}

.medium-number {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

.summary-label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  font-weight: 500;
  display: block;
  margin-top: var(--spacing-xs);
}

.summary-description {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.4;
}

/* 全体的な洞察 */
.overall-insights {
  background: var(--gradient-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--light-blue);
}

.insights-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 var(--spacing-md) 0;
}

.insights-content {
  margin: 0;
}

.insight-text {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* アクションボタンセクション */
.action-buttons-section {
  margin-bottom: var(--spacing-2xl);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-width: 160px;
  justify-content: center;
}

.action-btn.primary {
  background: var(--gradient-primary);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.action-btn.primary:hover {
  background: var(--gradient-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.action-btn.secondary {
  background: var(--white);
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.action-btn.secondary:hover {
  background: var(--primary-blue);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.action-btn.tertiary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.action-btn.tertiary:hover {
  background: var(--gray-200);
  color: var(--gray-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-icon {
  font-size: 1.25rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .basic-results-container {
    padding: var(--spacing-md);
  }
  
  .os-cards-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    min-width: 200px;
  }
  
  .os-card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .os-icon {
    align-self: center;
  }
  
  .hexagram-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .keywords-tags {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .results-title {
    font-size: var(--font-size-2xl);
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .title-icon {
    font-size: 1.5rem;
  }
  
  .os-card {
    padding: var(--spacing-lg);
  }
  
  .large-number {
    font-size: 2rem;
  }
}

/* ==========================================================================
   要約・分析セクション用スタイル
   ========================================================================== */

/* 4行要約セクション */
.summary-section {
  background: var(--summary-bg);
  border: 2px solid var(--summary-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.summary-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.summary-header h2 {
  color: var(--primary-blue);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-2xl);
}

.summary-subtitle {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  margin: 0;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.summary-line {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-blue);
  transition: var(--transition-normal);
}

.summary-line:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.line-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.summary-line p {
  margin: 0;
  line-height: 1.6;
  color: var(--gray-800);
}

/* 詳細分析セクション */
.detailed-analysis-section {
  margin-top: var(--spacing-xl);
}

.detailed-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.detailed-header h2 {
  color: var(--secondary-blue);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-2xl);
}

.detailed-subtitle {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* アコーディオンスタイル */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.accordion-item {
  background: var(--accordion-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-normal);
}

.accordion-item:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  background: var(--accordion-hover);
  transition: var(--transition-fast);
}

.accordion-header:hover {
  background: var(--light-blue);
}

.accordion-header h3 {
  margin: 0;
  color: var(--gray-800);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.accordion-toggle {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-blue);
  min-width: 2rem;
  text-align: center;
  transition: var(--transition-fast);
}

.accordion-item.open .accordion-toggle {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item.open .accordion-content {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.accordion-body {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
}

.accordion-body p {
  margin: 0;
  line-height: 1.6;
  color: var(--gray-700);
}

/* スコア説明セクション */
.score-explanations {
  margin-top: var(--spacing-xl);
}

.score-explanations h3 {
  text-align: center;
  color: var(--accent-blue);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-xl);
}

.score-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.score-explanation-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: var(--transition-normal);
}

.score-explanation-card:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.score-header h4 {
  margin: 0;
  color: var(--gray-800);
  font-size: var(--font-size-lg);
}

.score-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary-blue);
}

.score-unit {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--gray-500);
}

/* プログレスバー */
.score-progress {
  margin: var(--spacing-md) 0;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 0.8s ease-out;
  border-radius: var(--radius-sm);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* スコアレベル表示 */
.score-interpretation {
  margin: var(--spacing-md) 0;
}

.score-level {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.score-level.exceptional {
  background: #dcfce7;
  color: #166534;
}

.score-level.high {
  background: #dbeafe;
  color: #1e40af;
}

.score-level.good {
  background: #fef3c7;
  color: #92400e;
}

.score-level.average {
  background: #f3f4f6;
  color: #374151;
}

.score-level.developing {
  background: #fecaca;
  color: #991b1b;
}

.score-description {
  margin: var(--spacing-sm) 0;
  color: var(--gray-700);
  line-height: 1.5;
}

.score-percentile {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  font-style: italic;
}

.score-advice {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--very-light-blue);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-blue);
}

.score-advice strong {
  color: var(--primary-blue);
}

.score-advice p {
  margin: var(--spacing-xs) 0 0 0;
  color: var(--gray-700);
  line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .summary-section {
    padding: var(--spacing-lg);
  }
  
  .summary-line {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .line-number {
    align-self: center;
  }
  
  .score-cards {
    grid-template-columns: 1fr;
  }
  
  .accordion-header h3 {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  .summary-header h2 {
    font-size: var(--font-size-xl);
  }
  
  .detailed-header h2 {
    font-size: var(--font-size-xl);
  }
  
  .score-explanation-card {
    padding: var(--spacing-md);
  }
}

/* ダークモード対応（将来の拡張用） */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #1f2937;
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-800: #f9fafb;
    --gray-900: #ffffff;
  }
}

/* ========================================
   九宮構成レイアウト
   ======================================== */
.nine-phase-section {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 30px;
}

.nine-phase-header {
    text-align: center;
    margin-bottom: 30px;
}

.nine-phase-header h2 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 10px;
}

.nine-phase-subtitle {
    color: #6c757d;
    font-size: 14px;
}

.nine-phase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
}

.phase-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.column-header {
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 10px;
}

.column-header h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.column-header p {
    font-size: 12px;
    opacity: 0.9;
}

/* OSタイプ別カラー */
.engine-column .column-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.interface-column .column-header {
    background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
}

.safemode-column .column-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* フェーズカード */
.phase-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.phase-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.phase-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.phase-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.phase-score {
    font-size: 12px;
    color: #6c757d;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
}

.phase-content {
    font-size: 13px;
    color: #495057;
    line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .nine-phase-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .phase-column {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 20px;
    }
    
    .phase-column:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .nine-phase-section {
        padding: 15px;
    }
    
    .nine-phase-grid {
        padding: 15px;
        gap: 20px;
    }
    
    .phase-card {
        padding: 12px;
    }
}

/* 拡張版フェーズカードのスタイル */
.phase-subtitle {
    font-size: 0.85rem;
    color: #666;
    margin: -5px 0 10px 0;
    font-style: italic;
}

.phase-content-rich {
    padding: 10px 0;
}

.phase-content-rich .content-main {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
    font-weight: 500;
}

.phase-content-rich > div {
    margin: 8px 0;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.phase-content-rich .content-metaphor {
    background: linear-gradient(135deg, #667eea15, #764ba215);
    border-left: 3px solid #667eea;
}

.phase-content-rich .content-example {
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.phase-content-rich .content-normal {
    background: #f3e5f5;
    border-left: 3px solid #9c27b0;
}

.phase-content-rich .content-energy {
    background: #fff3e0;
    border-left: 3px solid #ff9800;
}

.phase-content-rich .content-when {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.phase-content-rich .content-charge {
    background: #fce4ec;
    border-left: 3px solid #e91e63;
}

.phase-content-rich .content-warning {
    background: #ffebee;
    border-left: 3px solid #f44336;
    color: #c62828;
}

.phase-content-rich .content-tip {
    background: #fffde7;
    border-left: 3px solid #fbc02d;
}

.phase-content-rich .content-style {
    background: #e0f2f1;
    border-left: 3px solid #009688;
}

.phase-content-rich .content-good {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.phase-content-rich .content-notgood {
    background: #ffebee;
    border-left: 3px solid #f44336;
}

.phase-content-rich .content-who {
    background: #f3e5f5;
    border-left: 3px solid #9c27b0;
}

.phase-content-rich .content-advice {
    background: linear-gradient(135deg, #ffd89b15, #19547b15);
    border-left: 3px solid #ffd89b;
}

.phase-content-rich .content-action {
    background: #e8eaf6;
    border-left: 3px solid #3f51b5;
}

.phase-content-rich .content-recovery {
    background: #e0f7fa;
    border-left: 3px solid #00bcd4;
}

.phase-content-rich .content-time {
    background: #f1f8e9;
    border-left: 3px solid #689f38;
}

.phase-content-rich .content-env {
    background: #efebe9;
    border-left: 3px solid #795548;
}

.phase-content-rich .content-support {
    background: #fce4ec;
    border-left: 3px solid #ec407a;
}

.phase-content-rich .content-core {
    background: linear-gradient(135deg, #ff6b6b15, #4ecdc415);
    border-left: 3px solid #ff6b6b;
    font-weight: 500;
}

.phase-content-rich .content-rest {
    background: #e1f5fe;
    border-left: 3px solid #03a9f4;
}

.phase-content-rich .content-rest-how {
    background: #e0f7fa;
    border-left: 3px solid #00acc1;
}

.phase-content-rich .content-balance {
    background: #f9fbe7;
    border-left: 3px solid #827717;
}

.phase-content-rich .content-balanced {
    background: #e8f5e9;
    border-left: 3px solid #2e7d32;
}

.phase-content-rich .content-imbalanced {
    background: #fff3e0;
    border-left: 3px solid #e65100;
}

.phase-content-rich .content-avoid {
    background: #ffebee;
    border-left: 3px solid #c62828;
}

.phase-content-rich .content-strength {
    background: #e3f2fd;
    border-left: 3px solid #1565c0;
}

.phase-content-rich .content-weakness {
    background: #fce4ec;
    border-left: 3px solid #ad1457;
}

.phase-content-rich .content-bad {
    background: #ffccbc;
    border-left: 3px solid #bf360c;
}

.phase-content-rich .content-profile {
    background: #f3e5f5;
    border-left: 3px solid #6a1b9a;
}

.phase-content-rich .content-best {
    background: linear-gradient(135deg, #ffd700, #ffecb3);
    border-left: 3px solid #f57c00;
    font-weight: 500;
}

/* Phase 3 新規フィールドのスタイリング */

/* 核心価値 - 重要な洞察 */
.content-core-value {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.1), rgba(63, 81, 181, 0.1));
    border-left: 4px solid #673AB7;
    padding: 12px 16px;
    margin: 12px 0;
    font-weight: 600;
    font-size: 0.95em;
    border-radius: 8px;
}

/* 人生の使命 */
.content-life-mission {
    background-color: rgba(255, 193, 7, 0.08);
    border-left: 4px solid #FFC107;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.92em;
    font-style: italic;
}

/* 社会的使命 */
.content-social-mission {
    background-color: rgba(33, 150, 243, 0.08);
    border-left: 4px solid #2196F3;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.92em;
}

/* 内なる葛藤 */
.content-inner-conflict {
    background-color: rgba(255, 87, 34, 0.08);
    border-left: 4px solid #FF5722;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9em;
}

/* 成長への道 */
.content-growth-path {
    background: linear-gradient(to right, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
    border-left: 4px solid #4CAF50;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 0.92em;
    line-height: 1.6;
}

/* 朝の思考 */
.content-morning {
    background-color: rgba(255, 235, 59, 0.08);
    border-left: 3px solid #FFEB3B;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 意思決定 */
.content-decision {
    background-color: rgba(156, 39, 176, 0.08);
    border-left: 3px solid #9C27B0;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 問題解決 */
.content-problem {
    background-color: rgba(96, 125, 139, 0.08);
    border-left: 3px solid #607D8B;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 創造性 */
.content-creativity {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.08), rgba(156, 39, 176, 0.08));
    border-left: 3px solid #E91E63;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 最大の強み */
.content-strength {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4CAF50;
    padding: 10px 14px;
    margin: 10px 0;
    font-weight: 600;
    font-size: 0.92em;
}

/* 隠れた才能 */
.content-hidden {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.08), rgba(156, 39, 176, 0.08));
    border-left: 3px solid #673AB7;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
    font-style: italic;
}

/* 盲点 */
.content-blind {
    background-color: rgba(244, 67, 54, 0.08);
    border-left: 3px solid #F44336;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 改善方法 */
.content-improvement {
    background-color: rgba(0, 188, 212, 0.08);
    border-left: 3px solid #00BCD4;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9em;
    line-height: 1.6;
}

/* 第一印象 */
.content-impression {
    background-color: rgba(121, 85, 72, 0.08);
    border-left: 3px solid #795548;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* プレゼンテーション */
.content-presentation {
    background-color: rgba(63, 81, 181, 0.08);
    border-left: 3px solid #3F51B5;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 傾聴 */
.content-listening {
    background-color: rgba(0, 150, 136, 0.08);
    border-left: 3px solid #009688;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 関係性パターン */
.content-relationship {
    background-color: rgba(255, 152, 0, 0.08);
    border-left: 3px solid #FF9800;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 繋がり方 */
.content-connection {
    background: linear-gradient(to right, rgba(33, 150, 243, 0.08), rgba(0, 188, 212, 0.08));
    border-left: 3px solid #2196F3;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9em;
    line-height: 1.6;
}

/* 対立時 */
.content-conflict {
    background-color: rgba(255, 87, 34, 0.08);
    border-left: 3px solid #FF5722;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 防御機制 */
.content-defense {
    background-color: rgba(96, 125, 139, 0.08);
    border-left: 4px solid #607D8B;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.92em;
}

/* 弱点 */
.content-vulnerable {
    background-color: rgba(244, 67, 54, 0.08);
    border-left: 3px solid #F44336;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 癒しの道 */
.content-healing {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(0, 150, 136, 0.08));
    border-left: 4px solid #4CAF50;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9em;
    line-height: 1.6;
}

/* 初期兆候 */
.content-early-sign {
    background-color: rgba(255, 193, 7, 0.08);
    border-left: 3px solid #FFC107;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* ピーク時 */
.content-peak {
    background-color: rgba(255, 87, 34, 0.08);
    border-left: 3px solid #FF5722;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}

/* 限界点 */
.content-breaking {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 4px solid #F44336;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9em;
    font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .phase-content-rich > div {
        margin: 6px 0;
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}