/* =================================================
   base.css - 基本共通スタイル
   
   構成順序:
   1. CSS変数システム
   2. ベーススタイル（body, html）
   3. レイアウトユーティリティ
   4. タイポグラフィ
   5. カラークラス
   6. コンポーネント
   7. アニメーション
   ================================================= */

/* =================================================
   1. CSS変数システム
   ================================================= */
:root {
  /* スペーシングシステム */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* 境界線半径 */
  --radius-sm: 0.125rem;    /* 2px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */

  /* ガラス効果 */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-hover: rgba(255, 255, 255, 0.12);

  /* カラーパレット */
  --color-primary: #3b82f6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* テキストカラー */
  --text-white: #ffffff;
  --text-white-90: rgba(255, 255, 255, 0.9);
  --text-white-80: rgba(255, 255, 255, 0.8);
  --text-white-70: rgba(255, 255, 255, 0.7);
  --text-white-60: rgba(255, 255, 255, 0.6);

  /* 背景色 */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-accent: #581c87;
}

/* =================================================
   2. ベーススタイル
   ================================================= */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
  color: var(--text-white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-variation-settings: normal;
}

/* standalone（ホーム画面から起動）時 */
@media all and (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* 入力要素はテキスト選択を許可 */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* デフォルトマージン・パディングリセット */
p,
h1, h2, h3, h4, h5, h6,
ul, ol, li,
blockquote, pre,
figure, figcaption,
dl, dd, dt,
fieldset, form, label, legend {
  margin: 0;
  padding: 0;
}

/* リストスタイルリセット */
ul, ol {
  list-style: none;
}

/* リンクスタイルリセット */
a {
  text-decoration: none;
  color: inherit;
}

/* メディア要素の隙間防止 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* フォーム要素リセット */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* ボタンのカーソル */
button {
  cursor: pointer;
}

/* テーブルリセット */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 背景グラデーションアニメーション */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0f172a 0%, #581c87 50%, #0f172a 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  -webkit-animation: gradientShift 15s ease infinite;
  z-index: -1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: background-position;
}

/* =================================================
   3. レイアウトユーティリティ
   ================================================= */

/* コンテナ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);  /* PC・モバイル共通 */
}

/* セッション評価・総合評価・記録ページ専用（モバイルのみパディングなし） */
.container-result-session,
.container-results-overview,
.container-records {
  padding: 0 var(--space-6);  /* PC: 通常のパディング */
}

@media (max-width: 768px) {
  .container-result-session,
  .container-results-overview,
  .container-records {
    padding: 0;  /* モバイル: マージン削除 */
  }
}

/* メインコンテンツ */
.main-content {
  padding: 0 1rem;
  max-width: 100%;
}

/* 最小高さ */
.min-h-screen {
  min-height: 100vh;
}

/* パディング */
.p-6 {
  padding: var(--space-6);
}

/* マージン */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* スペーシング */
.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }

/* テキスト配置 */
.text-center { text-align: center; }

/* グリッド */
.component-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* グリッドレイアウト */
.grid { 
  display: grid; 
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ギャップクラス */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* 統計グリッド（レスポンシブ対応） */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* =================================================
   4. タイポグラフィ
   ================================================= */

/* フォントサイズ */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* フォントウェイト */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* タイポグラフィクラス */
.text-main-title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: 4px;
}

.text-section-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: 4px;
}

.text-sub-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: 4px;
}

.text-body {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: 4px;
}

.text-sub-text {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 0;
  margin-bottom: 4px;
  color: var(--text-white-70);
}

.text-caption {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-white-60);
  margin-bottom: 4px;
}

/* レスポンシブフォント */
/* === bolt-new-design移植: ページヘッダーシステム === */
.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
  gap: 1.25rem;
  /* position: relative は総合評価ナビのドロップダウンメニュー(position:absolute)の基準点に必要 */
  position: relative;
}

.page-title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: 0.25rem;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}


.page-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  line-height: 1.375rem;
}


.page-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

/* === タイポグラフィ カラーバリエーション === */

/* text-main-title バリエーション (2.25rem, 700) */
.text-main-title-yellow { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #fde047; margin-top: 0; margin-bottom: 4px; }
.text-main-title-green { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #86efac; margin-top: 0; margin-bottom: 4px; }
.text-main-title-blue { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #93c5fd; margin-top: 0; margin-bottom: 4px; }
.text-main-title-red { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #fca5a5; margin-top: 0; margin-bottom: 4px; }
.text-main-title-purple { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #c4b5fd; margin-top: 0; margin-bottom: 4px; }

/* text-section-title バリエーション (1.5rem, 700) */
.text-section-title-yellow { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fde047; margin-top: 0; margin-bottom: 4px; }
.text-section-title-green { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #86efac; margin-top: 0; margin-bottom: 4px; }
.text-section-title-blue { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #93c5fd; margin-top: 0; margin-bottom: 4px; }
.text-section-title-red { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fca5a5; margin-top: 0; margin-bottom: 4px; }
.text-section-title-purple { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #c4b5fd; margin-top: 0; margin-bottom: 4px; }

/* 音程偏差表示専用クラス (1.5rem, 700) */
.text-pitch-deviation-plus { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #93C5FD; margin-top: 0; margin-bottom: 4px; } /* 青200 - プラス偏差（さらに明るく） */
.text-pitch-deviation-minus { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #FCA5A5; margin-top: 0; margin-bottom: 4px; } /* 赤300 - マイナス偏差（さらに明るく） */

/* モバイルでは誤差表示を小さく */
@media (max-width: 768px) {
  .text-pitch-deviation-plus,
  .text-pitch-deviation-minus {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5rem; /* 24px */
  }
}

/* text-sub-title バリエーション (1.25rem, 500) */
.text-sub-title-yellow { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: #fde047; margin-top: 0; margin-bottom: 4px; }
.text-sub-title-green { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: #86efac; margin-top: 0; margin-bottom: 4px; }
.text-sub-title-blue { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: #93c5fd; margin-top: 0; margin-bottom: 4px; }
.text-sub-title-red { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: #fca5a5; margin-top: 0; margin-bottom: 4px; }
.text-sub-title-purple { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: #c4b5fd; margin-top: 0; margin-bottom: 4px; }

/* text-body バリエーション (1rem, 400) */
.text-body-yellow { font-size: 1rem; line-height: 1.5rem; color: #fde047; margin-top: 0; margin-bottom: 4px; }
.text-body-green { font-size: 1rem; line-height: 1.5rem; color: #86efac; margin-top: 0; margin-bottom: 4px; }
.text-body-blue { font-size: 1rem; line-height: 1.5rem; color: #93c5fd; margin-top: 0; margin-bottom: 4px; }
.text-body-red { font-size: 1rem; line-height: 1.5rem; color: #fca5a5; margin-top: 0; margin-bottom: 4px; }
.text-body-purple { font-size: 1rem; line-height: 1.5rem; color: #c4b5fd; margin-top: 0; margin-bottom: 4px; }

/* text-sub-text バリエーション (1rem, 400, 200番台の色) */
.text-sub-text-yellow { font-size: 1rem; line-height: 1.5rem; color: #fef08a; margin-top: 0; margin-bottom: 4px; }
.text-sub-text-green { font-size: 1rem; line-height: 1.5rem; color: #bbf7d0; margin-top: 0; margin-bottom: 4px; }
.text-sub-text-blue { font-size: 1rem; line-height: 1.5rem; color: #bae6fd; margin-top: 0; margin-bottom: 4px; }
.text-sub-text-red { font-size: 1rem; line-height: 1.5rem; color: #fecaca; margin-top: 0; margin-bottom: 4px; }
.text-sub-text-purple { font-size: 1rem; line-height: 1.5rem; color: #ddd6fe; margin-top: 0; margin-bottom: 4px; }

/* text-caption バリエーション (0.875rem, 400, 200番台の色) */
.text-caption-yellow { font-size: 0.875rem; line-height: 1.25rem; color: #fef08a; margin-top: 0; margin-bottom: 4px; }
.text-caption-green { font-size: 0.875rem; line-height: 1.25rem; color: #bbf7d0; margin-top: 0; margin-bottom: 4px; }
.text-caption-blue { font-size: 0.875rem; line-height: 1.25rem; color: #bae6fd; margin-top: 0; margin-bottom: 4px; }
.text-caption-red { font-size: 0.875rem; line-height: 1.25rem; color: #fecaca; margin-top: 0; margin-bottom: 4px; }
.text-caption-purple { font-size: 0.875rem; line-height: 1.25rem; color: #ddd6fe; margin-top: 0; margin-bottom: 4px; }

@media (max-width: 768px) {
  .text-4xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .text-2xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-main-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .text-section-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  /* === bolt-new-design移植: レスポンシブヘッダー === */
  .page-title {
    font-size: 1.5rem;
  }
}

/* スコア表示用 */
.base-note-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.error-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.score-base-note {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: bold;
}

.score-average {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: bold;
  white-space: nowrap;
}

@media (min-width: 481px) {
  .score-base-note {
    font-size: 2.5rem;
  }
  .score-average {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* =================================================
   5. カラークラス
   ================================================= */

/* 基本テキスト色 */
.text-white { color: #ffffff; }
.text-white-90 { color: rgba(255, 255, 255, 0.9); }
.text-white-80 { color: rgba(255, 255, 255, 0.8); }
.text-white-70 { color: rgba(255, 255, 255, 0.7); }
.text-white-60 { color: rgba(255, 255, 255, 0.6); }

/* 200番台 - ラベル・サブテキスト用 */
.text-yellow-200 { color: #fef08a; }
.text-green-200 { color: #bbf7d0; }
.text-blue-200 { color: #bae6fd; }
.text-red-200 { color: #fecaca; }
.text-purple-200 { color: #ddd6fe; }
.text-orange-200 { color: #fed7aa; }

/* 300番台 - アイコン・強調用 */
.text-yellow-300 { color: #fde047; }
.text-green-300 { color: #86efac; }
.text-blue-300 { color: #93c5fd; }
.text-red-300 { color: #fca5a5; }
.text-gray-300 { color: #9ca3af; }
.text-orange-300 { color: #fdba74; }
.text-purple-300 { color: #c4b5fd; }

/* 400番台 */
.text-yellow-400 { color: #facc15; }
.text-green-400 { color: #4ade80; }
.text-blue-400 { color: #60a5fa; }
.text-red-400 { color: #f87171; }
.text-orange-400 { color: #fb923c; }
.text-gray-400 { color: #9ca3af; }

/* 500番台 */
.text-gray-500 { color: #6b7280; }
.text-amber-500 { color: #f59e0b; }  /* warning-alertと同じamber色 */
.text-amber-400 { color: #fbbf24; }  /* 明るいamber色（アラートアイコン用） */

/* 特殊色 */
.text-golden-yellow { color: #ffa500; }

/* 背景色 */
.color-basic-blue { background: #3b82f6; }
.color-basic-green { background: #10b981; }
.color-basic-orange { background: #f59e0b; }
.color-basic-red { background: #ef4444; }
.color-basic-purple { background: #8b5cf6; }

/* 評価カラー */
.color-eval-gold { background: #fbbf24; }
.color-eval-excellent { background: #fcd34d; }
.color-eval-good { background: #6ee7b7; }
.color-eval-pass { background: #7dd3fc; }
.color-eval-warning { background: #fdba74; }
.color-eval-practice { background: #fca5a5; }

/* グラデーション */
.gradient-catalog-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.gradient-catalog-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.gradient-catalog-green { background: linear-gradient(135deg, #10b981, #059669); }
.gradient-catalog-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.gradient-catalog-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
.gradient-catalog-yellow { background: linear-gradient(135deg, #eab308, #ca8a04); }

/* =================================================
   6. コンポーネント
   ================================================= */

/* --- アイコンサイズシステム --- */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-help { width: 20px; height: 20px; } /* ヘルプアイコン専用 */
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 40px; height: 40px; }
.icon-2xl { width: 48px; height: 48px; }
.icon-3xl { width: 64px; height: 64px; }
.icon-4xl { width: 80px; height: 80px; }

/* --- 見出しシステム --- */
.heading-sm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.heading-sm i {
  width: 20px;
  height: 20px;
  color: var(--text-white);
}


.heading-md {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 0.75rem;
}


.heading-md i {
  width: 24px;
  height: 24px;
  color: var(--text-white);
}

/* ヘルプボタン付き見出し行 */
.section-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.section-header-row .heading-md {
  margin-bottom: 0;
}

.section-header-help {
  margin-left: auto;
}

.heading-lg {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.heading-lg i {
  width: 28px;
  height: 28px;
  color: var(--text-white);
}

/* --- ガラスカード --- */
/* 【v2.3.0】backdrop-filter削除: iPadで重複時に白化するため */
/* 背景不透明度を0.08→0.12に調整して視認性を確保 */
.glass-card {
  background: rgba(255, 255, 255, 0.12);
  /* backdrop-filter: blur(8px); 削除 - iPad白化問題対策 */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-4px);
}

.glass-card-sm {
  background: var(--glass-bg);
  /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-sm:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-4px);
}

/* 【v2.3.0】backdrop-filter削除: iPadで重複時に白化するため */
.glass-card-lg {
  background: rgba(255, 255, 255, 0.12);
  /* backdrop-filter: blur(8px); 削除 - iPad白化問題対策 */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  margin-bottom: var(--space-6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-lg:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .glass-card {
    padding: var(--space-6);
  }

  .glass-card-sm {
    padding: var(--space-3);
  }
}

/* --- 改善トレンドカード --- */
.trend-card {
  background: rgba(255, 255, 255, 0.05);
  /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;  /* bolt-new-designに合わせる */
  min-height: 48px;
  width: 100%;  /* デフォルトを100%に変更 */
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* 基音試聴専用ボタン（完全独立クラス） */
.base-note-button {
  /* 基本スタイル */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  min-height: 48px;
  width: 100%;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  /* プライマリカラー */
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);

  /* インタラクション無効化 */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  /* トランジション無効 */
  transition: none;
}

.base-note-button:active,
.base-note-button:focus,
.base-note-button:focus-visible {
  /* すべてのインタラクティブ状態で通常スタイルを維持 */
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
  transform: none !important;
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* iPad専用: hoverを完全無効化 */
@media (pointer: coarse) {
  .base-note-button:hover {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
    transform: none !important;
    outline: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* デスクトップ用: hoverを無効化 */
@media (pointer: fine) {
  .base-note-button:hover {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
    transform: none !important;
    outline: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

.base-note-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 【iOS Safari対応 v4】基音試聴ボタンの状態表示（CSS制御） */
/* JS DOM操作を排除してブチ音を防止 */

/* 通常状態: 「基音を試聴」のみ表示 */
.base-note-button .btn-text-ready {
  display: inline;
}
.base-note-button .btn-text-loading,
.base-note-button .btn-text-playing {
  display: none;
}

/* 無効化状態（btn-disabled）: 「初期化中...」のみ表示 */
.base-note-button.btn-disabled .btn-text-ready,
.base-note-button.btn-disabled .btn-text-playing {
  display: none;
}
.base-note-button.btn-disabled .btn-text-loading {
  display: inline;
}

/* 再生中状態（btn-playing）: 「再生中...」のみ表示 */
.base-note-button.btn-playing .btn-text-ready,
.base-note-button.btn-playing .btn-text-loading {
  display: none;
}
.base-note-button.btn-playing .btn-text-playing {
  display: inline;
}

.base-note-button svg,
.base-note-button i {
  width: 24px;
  height: 24px;
}

.btn i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --- ボタン状態管理（innerHTML排除・タイミング完璧化） --- */
/* すべての状態を非表示（デフォルト） */
.btn-state {
  display: none;
}

/* data-state属性に応じて対応する状態のみ表示 */
.btn[data-state="idle"] .btn-state-idle,
.btn[data-state="init"] .btn-state-init,
.btn[data-state="mic"] .btn-state-mic,
.btn[data-state="playing"] .btn-state-playing,
.btn[data-state="error"] .btn-state-error,
.btn[data-state="retry"] .btn-state-retry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* btn-largeクラスは削除 - 統一されたボタンサイズを使用 */

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  border: 1px solid rgba(34, 197, 94, 0.3);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}

.btn-success:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4);
}

/* ロックボタン（プレミアム機能制限用） */
.btn-locked {
  background: rgba(75, 85, 99, 0.4);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(234, 179, 8, 0.4);
  cursor: pointer;
}

.btn-locked:hover {
  background: rgba(75, 85, 99, 0.5);
  border-color: rgba(234, 179, 8, 0.7);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.2);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-2px);
}

/* パルスグロー（注目させたいCTA用） */
.btn-pulse-glow {
  animation: btn-pulse-glow 2.4s ease-in-out infinite;
}

@keyframes btn-pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35);
  }
  50% {
    box-shadow: 0 4px 28px rgba(59, 130, 246, 0.6), 0 0 36px rgba(96, 165, 250, 0.35);
  }
}

.btn-pulse-glow:hover {
  animation: none;
}

/* === ボタン幅バリエーション === */
/* デフォルトはauto（コンテンツに合わせる）、min-widthは既に設定済み */

/* 横並び用 */
.btn-w-auto {
  width: auto;
  min-width: 120px;
}

/* モバイルファースト：基本クラス */
.btn-w-full {
  width: 100%;
}

/* タブレット以上（768px〜）のレスポンシブクラス */
@media (min-width: 768px) {
  /* Flexboxレスポンシブ */
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:text-left {
    text-align: left;
  }

  /* ボタン幅バリエーション */
  .md\:btn-w-full {
    width: 100%;
  }

  .md\:btn-w-3\/4 {
    width: 75%;
  }

  .md\:btn-w-2\/3 {
    width: 66.67%;
  }

  .md\:btn-w-1\/2 {
    width: 50%;
  }

  .md\:btn-w-1\/3 {
    width: 33.33%;
  }

  .md\:btn-w-1\/4 {
    width: 25%;
  }

  .md\:btn-w-auto {
    width: auto;
    min-width: 120px;
  }

  .md\:btn-w-fixed {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === ナビゲーションボタン・リンク統一スタイル === */
.nav-button {
  padding: 0.5rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-button:hover {
  color: rgb(255, 255, 255);
}

.nav-link {
  padding: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link:hover {
  color: rgb(255, 255, 255);
}


/* --- プログレスバー --- */
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  /* backdrop-filter削除: 親.glass-cardと重複してiPadで白化するため */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15),
              0 1px 2px rgba(255, 255, 255, 0.1);
}

.progress-bar.flex {
  flex: 1;
}

.progress-bar.with-margin {
  margin-bottom: 0;
}

/* トレーニング用進行バーセクション → training.cssに移行 */

.progress-fill {
  height: 100%;
  border-radius: 4px;
  max-width: 100%;  /* 音量値が100%を超える場合のクランプ */
}

/* 音量バー専用: 初期スパイク・急激な変化を視覚的に平滑化 */
/* セッション進行バー（青）には適用しない */
#volume-progress,
#range-test-volume-bar,
#training-volume-progress {
  transition: width 300ms ease-out;
}

.progress-fill-custom {
  height: 100%;
  border-radius: 4px;
  background-blend-mode: overlay;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
              inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  opacity: 0.85;
}

.progress-fill-custom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.15) 100%);
  border-radius: 4px;
  pointer-events: none;
}

/* --- ページヘッダーアイコン --- */
.page-header-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: float 6s ease-in-out infinite;
}

.page-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.page-header-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- ホーム・総合評価ページ用メインコンテンツ（ページ幅最大） --- */
.wide-main {
  position: relative;
  z-index: 10;
  /* パディングは.containerで管理（二重適用回避） */
}

/* --- トレーニング・準備ページ用メインコンテンツ（700px制限） --- */
.narrow-main {
  max-width: 700px;
  margin: 0 auto;
}

/* モバイルでは横幅制限を解除 */
@media (max-width: 768px) {
  .narrow-main {
    max-width: 100%;
  }
}

/* --- フッター --- */
.footer-base {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-content {
  margin-bottom: 1.5rem;
}

.footer-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-stat-item {
  text-align: center;
}

.footer-stat-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 0.5rem;
  display: block;
}

.footer-stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.footer-stat-value {
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}


.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1rem 0;
}

.footer-link {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-style: italic;
}

/* Footer Action Row (応援する + 共有する) */
.footer-action-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 0.5rem;
}

.footer-action-row .footer-donation-link {
  margin: 0;
}

button.footer-donation-link {
  background: none;
  cursor: pointer;
}

/* --- その他のコンポーネント --- */

/* チャートコンテナ */
.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

/* セクションヘッダー */
.section-header {
  margin-bottom: 1rem;
}

/* セクション内の最後の項目用
   セクション内の最後のコンテンツに設定して
   ボトムマージンが重複しないようにするクラス */
.section-bottom-item {
  margin-bottom: 0;
}

/* アクションボタン群 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .action-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

/* === 設定ページ専用スタイル === */
.settings-description-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
}

.settings-warning-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-home-button {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* === 目盛り付きスライダー === */
.tick-slider-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto; /* 中央寄せ */
}

.tick-slider-wrapper {
  position: relative;
  padding: 0 10px;
}

.tick-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.tick-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tick-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.7);
}

.tick-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}

.tick-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}

.tick-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  width: 40px;
  transition: color 0.2s ease;
}

.tick-label.active {
  color: #3b82f6;
  font-weight: 600;
}

.tick-slider-hint {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============ 次のステップ v5.0.0 ============ */

/* コンテナ */
.next-steps-container {
  display: flex;
  flex-direction: column;
}

/* 達成バッジ（インライン横並び） */
.achievement-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.achievement-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.achievement-icon.rank-s {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}
.achievement-icon.rank-a {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
}
.achievement-icon.rank-b {
  background: linear-gradient(135deg, #fb923c, #f97316);
}
.achievement-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.achievement-text.rank-s { color: #fbbf24; }
.achievement-text.rank-a { color: #9ca3af; }
.achievement-text.rank-b { color: #f97316; }
.achievement-text span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* 推薦カード */
.recommend-card {
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}
.recommend-card.rc-blue {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.recommend-card.rc-green {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.recommend-card.rc-amber {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.recommend-card.rc-locked {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.recommend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.recommend-badge.rb-blue { color: #60a5fa; background: rgba(59, 130, 246, 0.15); }
.recommend-badge.rb-green { color: #34d399; background: rgba(16, 185, 129, 0.15); }
.recommend-badge.rb-amber { color: #fbbf24; background: rgba(245, 158, 11, 0.15); }
.recommend-badge.rb-muted { color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }

.recommend-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 6px;
}
.recommend-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-bottom: 14px;
}
.recommend-card .premium-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 12px;
}

/* 推薦カード内のプライマリボタン */
.recommend-card .btn-rc-primary {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
}
.btn-rc-primary.rc-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.btn-rc-primary.rc-green { background: linear-gradient(135deg, #10b981, #059669); }
.btn-rc-primary.rc-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* ロックボタン */
.recommend-card .btn-rc-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}

/* サブアクション（ゴーストボタン） */
.sub-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-ghost {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.sub-actions.three-cols .btn-ghost {
  font-size: 12px;
  padding: 10px 6px;
}

/* 通常フロー: 縦並びリスト */
.normal-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.normal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.normal-card:active {
  background: rgba(255, 255, 255, 0.08);
}
.normal-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.normal-card-body {
  flex: 1;
  min-width: 0;
}
.normal-card-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}
.normal-card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}
.normal-card-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
}
.normal-card.locked {
  opacity: 0.6;
}
.normal-card .lock-badge {
  font-size: 10px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* アイコン背景ユーティリティ */
.icon-bg-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.icon-bg-green { background: linear-gradient(135deg, #10b981, #059669); }
.icon-bg-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.icon-bg-gray { background: linear-gradient(135deg, #6b7280, #4b5563); }

/* ============ 次のステップ（preparation-ios用） v4.11.0 ============ */

/* 達成バッジ */
.next-step-achievement {
  text-align: center;
  margin-bottom: 16px;
}
.next-step-achievement-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.next-step-achievement-text {
  font-size: 18px;
  font-weight: 700;
  color: #fbbf24;
  margin: 0;
}
.next-step-achievement-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0 0;
}

/* 推薦カード */
.next-step-recommend {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
}
.next-step-recommend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.next-step-recommend-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 6px;
}
.next-step-recommend-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0 0 14px;
}
.next-step-recommend .btn {
  width: 100%;
}

/* サブカード（2列） */
.next-steps-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 個別カード（サブ・通常共通） */
.next-step-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.next-step-card:active {
  background: rgba(255, 255, 255, 0.08);
}
.next-step-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.next-step-card-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px;
}
.next-step-card-description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin: 0 0 12px;
}
.next-step-card .btn {
  width: 100%;
  font-size: 13px;
  padding: 10px 8px;
}

/* 通常パターン（3カード縦並び）: サブ以外の直接子カード */
.next-steps-container > .next-step-card {
  margin-bottom: 10px;
}
.next-steps-container > .next-step-card:last-child {
  margin-bottom: 0;
}

/* ヘルプボタン */
.help-icon-btn {
  position: absolute;
  bottom: -12px;
  right: -16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
  z-index: 10;
}

.help-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ヘルプボタン（インライン配置） */
.help-icon-btn-inline {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.help-icon-btn-inline:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  transform: scale(1.1);
}

/* === bolt-new-design移植: 特化カードシステム（削除 - 下部の新定義を使用） === */

.base-note-card {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* === bolt-new-design移植: 結果表示レイアウト（v2対応版） === */

/* === 音感精度評価アイコンバッジ === */
.accuracy-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    position: relative;
}

.accuracy-badge-excellent {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.accuracy-badge-good {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.accuracy-badge-pass {
    background: rgba(96, 165, 250, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.accuracy-badge-practice {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.accuracy-icon {
    width: 64px;
    height: 64px;
}

/* アイコン位置微調整 */
.accuracy-icon-thumbsup {
    transform: translateY(-2px) translateX(2px);
}

.accuracy-icon-triangle {
    transform: translateY(-3px);
}


/* === 汎用ホバーエフェクトクラス === */
.hover-pop {
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-pop:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   課金制御・サブスクリプションUI
   ========================================================================== */


/* モーダルオーバーレイ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.btn-close {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--white-60);
  transition: color 0.2s;
}

.btn-close:hover {
  color: var(--white);
}

/* ==========================================================================
   モーダル共通グラススタイル
   単体表示のモーダルコンテンツに適用（backdrop-filter安全）
   glass-cardとは異なりモーダルは排他表示のためblur使用可
   ========================================================================== */

.modal-glass {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   アラートダイアログ（確認ダイアログ用）
   【v2.5.0】iPadグラスカード重なり対策: backdrop-filterなし
   ========================================================================== */

.alert-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300000;
  padding: 1rem;
}

.alert-dialog {
  max-width: 400px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.alert-dialog-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.alert-dialog-icon i[data-lucide] {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 8px currentColor);
}

.alert-dialog-title {
  margin-bottom: 8px;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
}

.alert-dialog-subtitle {
  margin-bottom: 8px;
  color: var(--white-80);
  font-size: 0.9rem;
}

.alert-dialog-text {
  margin-bottom: 20px;
  color: var(--white-60);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* 長文メッセージ用: 本文をスクロール可能にしてOKボタンへ常に到達できるようにする */
.alert-dialog-text--scrollable {
  max-height: 50vh;
  overflow-y: auto;
}

/* 上行・下行ガイドモーダル */
.direction-guide-content {
  text-align: center;
  line-height: 1.7;
}

.direction-guide-item {
  margin-bottom: 12px;
}

.direction-guide-item strong {
  font-size: 0.95em;
}

.direction-guide-item .direction-detail {
  opacity: 0.7;
  font-size: 0.85em;
}

.direction-guide-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 4px 0 12px;
}

.direction-guide-footer {
  font-size: 0.85em;
  opacity: 0.8;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 12px;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* 不完全レッスン削除完了ボタン（テキスト改行防止） */
#ios-delete-complete-section .btn,
#delete-complete-section .btn {
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 0.9rem;
}

.alert-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-dialog-actions .btn {
  width: 100%;
}

.alert-dialog-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--white-60);
  font-size: 0.85rem;
  cursor: pointer;
}

.alert-dialog-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-blue);
}

/* ウェルカムカード（フロストグラス/グラスモーフィズム風独自スタイル） */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  padding: 24px 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.welcome-overlay.welcome-visible {
  opacity: 1;
}

.welcome-card {
  /* すりガラス効果 — カード自体にblurをかけて白みを載せる */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 36px 28px 28px;
  max-width: 380px;
  width: 100%;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(-120vh);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.welcome-visible .welcome-card {
  transform: translateY(0);
}

/* ヒーローアイコン（音符） */
.welcome-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.welcome-hero-icon-svg {
  width: 40px;
  height: 40px;
  color: rgba(167, 139, 250, 0.6);
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.25));
}

/* タイトル */
.welcome-card-title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  color: #fff;
}

/* サブタイトル */
.welcome-card-subtitle {
  text-align: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

/* アイテム（アイコン上・中央揃え） */
.welcome-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}

.welcome-item-icon {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.welcome-item-icon i[data-lucide] {
  width: 24px;
  height: 24px;
}

.welcome-item-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.welcome-item-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* 注意事項（アイテムと同じアイコン上レイアウト） */
.welcome-section-caution {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
  color: #fca5a5;
}

.welcome-section-caution i[data-lucide],
.welcome-section-caution svg {
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.welcome-section-caution span {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ホーム画面追加の警告はPCでは非表示（JS判定で .hidden を付与） */

/* ポップアップ専用のはじめるボタン */
.welcome-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: opacity 0.2s ease;
}

.welcome-btn-primary:active {
  opacity: 0.85;
}

@media (max-width: 380px) {
  .welcome-card {
    padding: 30px 20px 24px;
    border-radius: 20px;
  }
}

/* 価格カード */
.pricing-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
}

.pricing-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.price .currency {
  font-size: 1.25rem;
  color: var(--white-80);
}

.price .amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
}

.price .period {
  font-size: 1rem;
  color: var(--white-60);
}

/* 機能リスト */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--white-80);
}

/* アクションボタン */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}


.btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  width: 100%;
}


/* 期限切れ通知 */
.expiration-notice {
  background: linear-gradient(135deg, 
    rgba(251, 191, 36, 0.1) 0%,
    rgba(245, 158, 11, 0.1) 100%);
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.notice-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* トースト通知 */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  animation: slide-up 0.3s ease-out;
}

.toast-success {
  border: 1px solid rgba(134, 239, 172, 0.3);
}

.toast-error {
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.toast-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

@keyframes slide-up {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
}

/* ナビゲーション制限 */
.nav-restricted {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}

.nav-restricted::after {
  content: '\1F512';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.75rem;
}

.hover-lift {
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.hover-glow {
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}


/* === bolt-new-design移植: インタラクティブ要素 === */
/* .note-circle定義はtraining.cssに移行（トレーニング専用のため） */

.volume-meter {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.volume-fill {
  height: 100%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: var(--radius-md);
  width: 60%;
}

/* === アラートシステム（共通） === */
.info-alert,
.success-alert,
.warning-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

/* アイコン用の固定スペース確保 - 中央配置 */
.info-alert i[data-lucide],
.success-alert i[data-lucide],
.warning-alert i[data-lucide] {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block !important;
  overflow: visible !important;
}

/* アラート色バリエーション */
.info-alert {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.success-alert {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.warning-alert {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* アラート内コンテナ（ネストされたdiv要素） */
.info-alert > div,
.success-alert > div,
.warning-alert > div {
  flex: 1;
}

/* アラート内テキスト */
.info-alert p,
.success-alert p,
.warning-alert p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  margin: 0;
}

/* 直接p要素の場合もflexを適用 */
.info-alert > p,
.success-alert > p,
.warning-alert > p {
  flex: 1;
}

/* すべての可能なLucideアイコン要素に適用 */
.info-alert i[data-lucide] *,
.success-alert i[data-lucide] *,
.warning-alert i[data-lucide] *,
.info-alert i[data-lucide] svg,
.success-alert i[data-lucide] svg,
.warning-alert i[data-lucide] svg {
  width: 32px !important;
  height: 32px !important;
  max-width: none !important;
  max-height: none !important;
  font-size: 32px !important;
}

/* デスクトップでは少し小さめに */
@media (min-width: 768px) {
  .info-alert i[data-lucide],
  .success-alert i[data-lucide],
  .warning-alert i[data-lucide] {
    width: 28px;
    height: 28px;
  }

  .info-alert i[data-lucide] svg,
  .success-alert i[data-lucide] svg,
  .warning-alert i[data-lucide] svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* === 音量調整コントロール === */
.volume-control-container {
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.volume-control-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.volume-control-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.volume-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.volume-indicator {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  min-width: 20px;
  text-align: center;
  user-select: none;
}

/* カスタム range input スタイル */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  position: relative;
}

/* スライダーのトラック（Webkit） */
.volume-slider::-webkit-slider-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
}

/* スライダーのトラック（Firefox） */
.volume-slider::-moz-range-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
}

/* スライダーのつまみ（Webkit） */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* スライダーのつまみ（Firefox） */
.volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ホバー時のつまみ */
.volume-slider::-webkit-slider-thumb:hover {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.5);
  transform: scale(1.1);
}

.volume-slider::-moz-range-thumb:hover {
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.5);
  transform: scale(1.1);
}

/* スライダー全体のホバー */
.volume-slider:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

/* スライダーのフォーカス */
.volume-slider:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .volume-control-container {
    padding: 16px;
  }

  .volume-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }

  .volume-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}

/* === bolt-new-design移植: バッジシステム === */
.difficulty-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.difficulty-badge.beginner {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}

.difficulty-badge.intermediate {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.difficulty-badge.advanced {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.3);
}

.difficulty-badge.special-badge {
  background: rgba(236, 72, 153, 0.15);
  color: #f9a8d4;
  border-color: rgba(236, 72, 153, 0.3);
}

/* === 音階方向・基音方向バッジ === */
.direction-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

/* 音階方向: 上行 */
.direction-badge.ascending {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}

/* 音階方向: 下行 */
.direction-badge.descending {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

/* 基音方向: 上昇 */
.direction-badge.chromatic-up,
.direction-badge.chromatic-ascending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

/* 基音方向: 下降 */
.direction-badge.chromatic-down,
.direction-badge.chromatic-descending {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}

/* 基音方向: 両方向 */
.direction-badge.chromatic-both {
  background: rgba(234, 179, 8, 0.15);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.3);
}

.session-badge {
  padding: var(--space-2) var(--space-4);
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  color: #93c5fd;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* === bolt-new-design移植: グリッドレイアウト（削除 - 新定義を使用） === */

.distribution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.session-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}


@media (max-width: 768px) {
  
  .distribution-grid,
  .notes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .session-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
}

@media (max-width: 480px) {
  .session-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .notes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* === bolt-new-design移植: デバッグナビゲーション === */
.debug-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  min-width: 200px;
}

.debug-nav h4 {
  color: var(--text-white);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  text-align: center;
}

.debug-nav .nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.debug-nav .nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: flex-start;
}

.debug-nav .nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  transform: translateY(-1px);
}

.debug-nav .nav-btn.current {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}

@media (max-width: 768px) {
  .debug-nav {
    top: 10px;
    right: 10px;
    padding: var(--space-3);
    min-width: 160px;
  }
  
  .debug-nav h4 {
    font-size: 0.75rem;
  }
  
  .debug-nav .nav-btn {
    padding: var(--space-1) var(--space-2);
    font-size: 0.7rem;
  }
}


/* =================================================
   7. アニメーション
   ================================================= */

/* 背景グラデーション */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@-webkit-keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* フロートアニメーション */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}


/* 進行バーセクション統一システム */
.progress-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* セッション完了時：ボタン追加 */
.progress-section.completed {
  /* 基本レイアウトは共通 */
}

.progress-content {
  flex: 1;
}

.progress-label {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.progress-action {
  white-space: nowrap;
  align-self: center;
  width: auto !important;  /* ボタンのデフォルト100%を上書き */
  min-width: 140px;
}

/* PC表示（768px以上）でレイアウト変更 */
@media (min-width: 768px) {
  .progress-section.completed {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  
  .progress-section.completed .progress-action {
    align-self: auto;
  }
  
  .progress-section.completed .progress-label {
    text-align: left;
  }
}

/* === bolt-new-design移植: 高度なアニメーション === */
@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* ==========================================================================
   ユーティリティクラス（汎用）
   ========================================================================== */

/* 表示制御 */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline-flex {
  display: inline-flex;
}

/* テキスト配置（追加分） */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* マージン（重複削除 - 194-201行に統合） */

/* フォントサイズ */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* 透明度 */
.text-white-60 {
  color: rgba(255, 255, 255, 0.6);
}

.text-white-80 {
  color: rgba(255, 255, 255, 0.8);
}

.note-circle.current::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: rgba(255, 105, 180, 0.3);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  animation: ripple 2s ease-out infinite;
  z-index: -1;
}

.note-circle.current::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: rgba(255, 105, 180, 0.2);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  animation: ripple 2s ease-out infinite 0.7s;
  z-index: -1;
}

/* === bolt-new-design移植: Home Page Styles === */
.hero-section {
  padding: 0 0 40px 0;
}

.modes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .modes-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
}


/* 次期バージョン予告モード */
.mode-card.coming-soon {
  opacity: 0.6;
}

.mode-card.coming-soon .mode-icon {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  border-color: rgba(156, 163, 175, 0.3);
  box-shadow: 0 4px 20px rgba(156, 163, 175, 0.4);
}

.difficulty-badge.coming-soon {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
  border-color: rgba(156, 163, 175, 0.3);
}

.btn.disabled,
.btn.btn-disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-full {
  width: 100% !important;
  min-width: auto !important;
}

.card-footer {
  margin-top: 0;
}

.card-footer .btn {
  width: 100%;
  min-width: auto;
  box-sizing: border-box;
  padding: 12px 24px;
  min-height: 48px;
}

/* 方向ボタン: メインボタン（フルワイド） */
.btn-direction-main {
  width: 100%;
  white-space: nowrap;
}

/* 方向ボタン: サブラベル（下行ラベル） */
.direction-sub-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(252, 165, 165, 0.7);
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 方向ボタン: セミゴースト下行ボタン（フルワイド） */
.btn-sub-direction {
  width: 100%;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(185, 28, 28, 0.08));
  color: rgba(252, 165, 165, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

.btn-sub-direction:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.14));
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.btn-sub-direction:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 方向ボタン: 12音階セミゴーストコンパクト */
.btn-sub-direction-compact {
  flex: 1;
  padding: 9px 4px;
  font-size: 0.82rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(185, 28, 28, 0.08));
  color: rgba(252, 165, 165, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

.btn-sub-direction-compact:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.14));
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.btn-sub-direction-compact:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.mode-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

/* タブレット〜: サブタイトル1行に収める */
@media (min-width: 768px) {
  .mode-subtitle {
    font-size: 0.8rem;
    white-space: nowrap;
  }
}

/* PC: グリッド表示 */
@media (min-width: 1024px) {
  .mode-card {
    min-height: auto;
  }

  .mode-card .mode-title {
    font-size: 1.25rem;
  }
}

.mode-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-8px);
}

.mode-card:hover .mode-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6);
}

.mode-card.beginner:hover .mode-icon {
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.6);
}

.mode-card.intermediate:hover .mode-icon {
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.6);
}

.mode-card.advanced:hover .mode-icon {
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6);
}

.mode-card.special:hover .mode-icon {
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.6);
}

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

.mode-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.mode-icon svg {
  width: 32px !important;
  height: 32px !important;
}

.mode-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

.mode-card.beginner .mode-icon {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.mode-card.intermediate .mode-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.mode-card.advanced .mode-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.mode-card.special .mode-icon {
  background: linear-gradient(135deg, #ec4899, #be185d);
  border-color: rgba(236, 72, 153, 0.3);
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
}

/* ヘッダー専用スタイル */
.app-header {
  position: relative;
  z-index: 100000;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-header .header-brand {
  position: relative;
  min-width: 0;
}

@media (min-width: 768px) {
  .app-header {
    padding: 1.5rem 0;
  }
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-icon-wrapper {
  display: none;
}

@media (min-width: 768px) {
  .header-icon-wrapper {
    display: block;
  }
  
  .header-icon {
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ハンバーガーメニューボタン */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.menu-toggle i {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* PC用ナビゲーション */
.header-nav {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

/* モバイルメニュー開いた状態（総合評価のfinal-nav-menuと統一） */
.header-nav.active {
  display: flex;
  position: fixed;
  top: 80px;
  right: 1rem;
  left: auto;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 10px;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 99999;
  min-width: 190px;
  gap: 6px;
}

.header-nav.active .nav-link,
.header-nav.active .nav-button {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  transition: all 0.2s ease;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.header-nav.active .nav-link i,
.header-nav.active .nav-button i {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  opacity: 0.85;
}

.header-nav.active .nav-link:hover,
.header-nav.active .nav-button:hover,
.header-nav.active .nav-link:active,
.header-nav.active .nav-button:active {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.3);
}

/* PC表示時（総合評価のfinal-nav-btnと統一） */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .header-nav {
    display: flex;
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    flex-direction: row;
    gap: 8px;
    box-shadow: none;
    backdrop-filter: none;
  }

  .header-nav .nav-button,
  .header-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 4px 6px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
    text-decoration: none;
  }

  .header-nav .nav-button i,
  .header-nav .nav-link i {
    width: 26px !important;
    height: 26px !important;
  }

  .header-nav .nav-button:hover,
  .header-nav .nav-button:active,
  .header-nav .nav-link:hover,
  .header-nav .nav-link:active {
    color: rgba(255, 255, 255, 1);
  }

  .header-nav .nav-text {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* デスクトップ幅（1200px〜）でナビをゆったり表示 */
@media (min-width: 1200px) {
  .header-nav {
    gap: 16px;
  }

  .header-nav .nav-button,
  .header-nav .nav-link {
    gap: 4px;
    padding: 6px 10px;
  }

  .header-nav .nav-button i,
  .header-nav .nav-link i {
    width: 32px !important;
    height: 32px !important;
  }

  .header-nav .nav-text {
    font-size: 13px;
  }
}

.header-brand h1 {
  margin-top: 0;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  font-size: 1.5rem;
}

.header-brand p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .header-brand h1 {
    font-size: 2.25rem;
  }
  
  .header-brand p {
    font-size: 1rem;
  }
}


.difficulty-badge {
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.difficulty-badge.beginner {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}

.difficulty-badge.intermediate {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.difficulty-badge.advanced {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.3);
}

.difficulty-badge .free-label {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-top: 3px;
  color: #34d399;
}

.card-body {
  flex: 1;
  margin-bottom: 24px;
}

.mode-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 8px;
}

/* ホームページのモードカード用 */
.mode-card .mode-title {
  margin-bottom: 12px;
}

.mode-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
  text-align: center;
}

.mode-card.beginner .mode-subtitle { color: #86efac; }
.mode-card.intermediate .mode-subtitle { color: #fbbf24; }
.mode-card.advanced .mode-subtitle { color: #c4b5fd; }
.mode-card.special .mode-subtitle { color: #f9a8d4; }

/* モード説明の折りたたみ（<details>要素） */
.mode-detail-collapse {
  margin-top: 0;
}

.mode-detail-summary {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-align: center;
  padding: 4px 0;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease;
}

.mode-detail-summary::-webkit-details-marker {
  display: none;
}

.mode-detail-summary::after {
  content: ' ▼';
  font-size: 0.7rem;
}

details[open] > .mode-detail-summary::after {
  content: ' ▲';
}

.mode-detail-summary:hover {
  color: rgba(255, 255, 255, 0.8);
}

.mode-detail-body {
  margin-top: 12px;
  animation: detailSlideDown 0.2s ease-out;
}

@keyframes detailSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* モバイル: モードカードをコンパクト化 */
@media (max-width: 767px) {
  .mode-card {
    padding: 20px;
    border-radius: 20px;
  }

  .card-header {
    margin-bottom: 16px;
  }

  .mode-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .card-body {
    margin-bottom: 16px;
  }

  .mode-card .mode-title {
    margin-bottom: 6px;
  }

  .mode-subtitle {
    margin-bottom: 8px;
    font-size: 0.9rem;
  }
}

.mode-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 24px;
}

.features {
  margin-bottom: 0;
}

.feature-highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-highlight span {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  font-weight: 500;
}


/* 下部セクション: ゴール + 脳内ピアノ理論 */
.about-app-section {
  padding: 0 0 28px 0;
  margin-top: 1.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-app-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 20px;
}

/* 次期公開予告カード */
.coming-soon-card {
  padding: 16px 20px;
}

.coming-soon-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6b7280, #4b5563);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coming-soon-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.coming-soon-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.coming-soon-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 2px 0 0;
}

.coming-soon-icon-pink {
  background: linear-gradient(135deg, #ec4899, #be185d);
}

/* 12音階ボタン横並び */
.tone12-btn-group {
  display: flex;
  gap: 6px;
}

.tone12-btn-group .btn-compact {
  flex: 1;
  padding: 0.6rem 0.25rem;
  justify-content: center;
  min-width: 0;
}

.app-goal-header,
.theory-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.app-goal-header h4,
.theory-header h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.app-goal-header i,
.theory-header i {
  flex-shrink: 0;
}

.app-goal-desc,
.theory-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* トレーニングパス (Step1 → Step2 → Goal) */
.training-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.path-step {
  text-align: center;
  flex: 1;
  max-width: 140px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 8px;
}

.path-step-goal {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
}

.path-step-number {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.path-step-goal .path-step-number {
  color: #c4b5fd;
}

.path-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.path-step-detail {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.path-arrow {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.theory-benefits {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theory-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.theory-benefits li i {
  flex-shrink: 0;
}

/* ゴールリボン（12音階カード用） */
.mode-card {
  position: relative;
}

.goal-ribbon {
  position: absolute;
  top: -4px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 12px 16px 28px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(245, 158, 11, 0.5));
}

.goal-ribbon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  animation: goalShine 3s ease-in-out infinite;
}

@keyframes goalShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

.goal-ribbon i {
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.goal-ribbon span {
  position: relative;
  z-index: 1;
  letter-spacing: 0.1em;
}

@media (max-width: 360px) {
  .training-path {
    gap: 3px;
  }

  .path-step {
    padding: 8px 4px;
  }

  .path-step-label {
    font-size: 0.75rem;
  }
}

/* =================================================
   7. アニメーション
   ================================================= */

/* スピンアニメーション（ローディング用） */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in;
}

/* パルスアニメーション */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ================================================================
   クイックスタートセクション（ホームページ用）
   ================================================================ */

/* クイックスタート ヒーローセクション */
.quick-start-hero {
    margin: 1rem 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.quick-start-hero::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.quick-start-text {
    position: relative;
    z-index: 1;
}

.quick-start-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.quick-start-mode-name {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 4px;
}

.quick-start-mode-detail {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
}

.quick-start-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.quick-start-play-btn:active {
    opacity: 0.85;
    transform: scale(0.98);
}

.quick-start-play-btn-locked {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.4), rgba(71, 85, 105, 0.4));
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* タブレット: クイックスタート横レイアウト */
@media (min-width: 768px) {
    .quick-start-hero {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 24px 28px;
    }
    .quick-start-hero::before {
        top: -40px;
        right: -40px;
        width: 140px;
        height: 140px;
    }
    .quick-start-text {
        flex: 1;
    }
    .quick-start-label {
        margin-bottom: 8px;
    }
    .quick-start-mode-name {
        font-size: 20px;
    }
    .quick-start-mode-detail {
        margin-bottom: 0;
    }
    .quick-start-play-btn {
        width: auto;
        min-width: 220px;
        flex-shrink: 0;
        padding: 16px 32px;
        font-size: 17px;
    }
}

/* ================================================================
   モード選択ガイド（ホームページ用）
   ================================================================ */

.mode-selection-guide {
    margin: 1rem 0 0.5rem 0;
}

.mode-selection-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.75rem;
}

.mode-selection-header .heading-lg {
    margin-bottom: 0 !important;
}

/* アップグレードボタン（mode-iconスタイル準拠） */
.upgrade-btn {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upgrade-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.upgrade-btn-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #eab308, #ca8a04);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(234, 179, 8, 0.4);
}

.upgrade-btn-icon i {
    width: 14px;
    height: 14px;
    color: white;
}

/* プレミアム利用中の状態 */
.upgrade-btn.premium-active {
    border-color: rgba(34, 197, 94, 0.3);
    cursor: default;
}

.upgrade-btn.premium-active .upgrade-btn-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
}

.upgrade-btn.premium-active:hover {
    transform: none;
}

/* アップグレードボタンのテキスト切り替え（PC/モバイル） */
.upgrade-btn-text-full {
    display: inline;
}

.upgrade-btn-text-short {
    display: none;
}

/* タブレット以下: 重なり防止のためflexbox配置に変更 */
@media (max-width: 768px) {
    .mode-selection-header {
        justify-content: space-between;
    }

    .upgrade-btn {
        position: static;
    }

    /* モバイルでは短いテキストを表示 */
    .upgrade-btn-text-full {
        display: none;
    }

    .upgrade-btn-text-short {
        display: inline;
    }
}

.mode-selection-guide .heading-lg {
    justify-content: center;
    margin-bottom: 0.75rem;
}

.section-divider {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 0 0.75rem 0;
}

/* ================================================================
   上行・下行タブナビゲーション（ホームページ用）
   ================================================================ */

/* セクションコンテナ */
/* 方向タブ + モードカードの一体化ラッパー */
.direction-modes-wrapper {
    margin-top: 0.25rem;
}

@media (max-width: 480px) {
    .direction-modes-wrapper .mode-card {
        padding: 0.75rem;
    }
}

.direction-modes-wrapper .direction-selection-section {
    margin: 0;
}

.direction-modes-wrapper .hero-section {
    padding: 0;
}

.direction-modes-wrapper .modes-grid {
    margin-top: 0.5rem;
}

.direction-selection-section {
    margin: 2rem 0 0.5rem 0;
}

/* 上行・下行タブナビゲーション（ホームページ専用） */
.direction-tab-navigation {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 0.5rem;
    border-radius: 16px;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

/* 上行・下行タブボタン（ホームページ専用） */
.direction-tab-navigation .tab-button {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.direction-tab-navigation .tab-button i,
.direction-tab-navigation .tab-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 3;
}

/* タブラベル（PC: 上行モード、iPhone: 上行） */
.tab-label-short,
.tab-label-full {
    display: inline;
}

@media (max-width: 480px) {
    .tab-label-full {
        display: none;
    }
}

.direction-tab-navigation .tab-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* 上行モード（青・不透明・枠線） */
.direction-tab-navigation .tab-button[data-direction="ascending"].active {
    background: rgba(59, 130, 246, 0.2);
    border: 2px solid rgba(59, 130, 246, 0.5);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 下行モード（赤・不透明・枠線） */
.direction-tab-navigation .tab-button[data-direction="descending"].active {
    background: rgba(239, 68, 68, 0.2);
    border: 2px solid rgba(239, 68, 68, 0.5);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.direction-tab-navigation .tab-button.tab-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* 情報パネルコンテナ */
.direction-info-panels {
    position: relative;
    width: 100%;
}

/* 個別情報パネル */
.direction-info-panel {
    display: none;
    animation: fadeIn 0.3s ease;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 1.5rem;
    padding-top: 1rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    min-height: 100px;
    position: relative;
    margin-top: 0.5rem;

    /* 下端のみフェードアウトするグラデーションマスク */
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0.6) 85%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0.6) 85%,
        rgba(0,0,0,0) 100%
    );
}

.direction-info-panel.active {
    display: block;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .tab-button {
        font-size: 1rem;
        padding: 0.625rem 1rem;
    }
}

/* ================================================================
   プレミアム分析専用スタイルは premium-analysis.css に移動しました
   ================================================================ */

/* ================================================================
   Danger Zone（危険ゾーン）
   ================================================================ */

.danger-zone {
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.1) 100%);
}

.danger-zone-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.danger-zone-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.danger-zone-info {
    flex: 1;
}

.danger-zone-info h3 {
    margin: 0 0 0.5rem 0;
}

.danger-zone-info p {
    margin: 0;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
}

/* モバイル対応 */
@media (max-width: 768px) {
    .danger-zone-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-danger {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================
   ヘッダー認証エリア
   ================================================= */

.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.25rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-auth-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 1;
  min-width: 0;
}

.nav-user-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

@media (min-width: 1200px) {
  .nav-user-name {
    font-size: 0.875rem;
    max-width: 120px;
  }
}

.nav-logout-btn {
  color: #f87171 !important;
  white-space: nowrap;
}

.nav-logout-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
}

/* モバイルメニュー内の認証エリア（カード型に統一） */
.header-nav.active .nav-auth {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  margin-top: 2px;
  flex-direction: column;
  align-items: stretch;
}

.header-nav.active .nav-auth-user {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.header-nav.active .nav-user-name {
  max-width: none;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
}

/* ========================================
   ベータガイド・ヘルプ共通スタイル
   ======================================== */

/* ステップカード（参加方法など） */
.step-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  color: white;
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  margin: 0 0 0.5rem 0;
}

.step-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* 警告ボックス */
.warning-box {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 12px;
  padding: 1rem;
}

.warning-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  margin: 0 0 0.75rem 0;
}

.warning-title i,
.warning-title svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

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

.warning-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.warning-list li:last-child {
  margin-bottom: 0;
}

.warning-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: rgba(234, 179, 8, 0.8);
}


/* =================================================
   YINアルゴリズム テストバッジ（開発用）
   ================================================= */
.yin-test-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #c4b5fd;
}

.yin-test-badge i,
.yin-test-badge svg {
  color: #a78bfa;
}

/* =================================================
   ラジオボタングループ（設定ページ用）
   ================================================= */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.radio-option:has(input:checked) {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
}

.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  margin: 0;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-option input[type="radio"]:checked {
  border-color: #a78bfa;
  background: #a78bfa;
  box-shadow: inset 0 0 0 4px rgba(15, 23, 42, 0.9);
}

.radio-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.radio-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: white;
}

.radio-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

/* トグルグループ（ON/OFF切替） */
.toggle-group {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.toggle-option {
  cursor: pointer;
}

.toggle-option input[type="radio"] {
  display: none;
}

.toggle-label {
  display: block;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.toggle-option:hover .toggle-label {
  color: rgba(255, 255, 255, 0.8);
}

.toggle-option input[type="radio"]:checked + .toggle-label {
  background: rgba(139, 92, 246, 0.8);
  color: white;
}

/* 小さいボタン */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* ===== 応援寄付セクション ===== */
.donation-amount-group {
  position: relative;
  display: flex;
  align-items: center;
}

.donation-currency-symbol {
  position: absolute;
  left: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.donation-amount-input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease;
  -moz-appearance: textfield;
}

.donation-amount-input::-webkit-outer-spin-button,
.donation-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.donation-amount-input:focus {
  border-color: rgba(239, 68, 68, 0.5);
}

.donation-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.7), rgba(220, 38, 38, 0.7));
}

.donation-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 38, 0.85));
}

.footer-donation-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fca5a5;
  text-decoration: none;
  margin-bottom: 1rem;
  padding: 0.375rem 1rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 20px;
  transition: all 0.2s ease;
}

.footer-donation-link i,
.footer-donation-link svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.footer-donation-link:hover {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
}

/* ===========================================
   Donation Modal
   =========================================== */

.donation-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.donation-modal-overlay.donation-modal-visible {
  opacity: 1;
  pointer-events: auto;
}

.donation-modal-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 32px 28px 24px;
  max-width: 380px;
  width: 100%;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.donation-modal-visible .donation-modal-card {
  transform: translateY(0);
}

.donation-modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.donation-modal-icon i,
.donation-modal-icon svg {
  width: 36px;
  height: 36px;
  color: #fca5a5;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.25));
}

.donation-modal-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}

.donation-modal-desc {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
}

.donation-modal-error {
  display: none;
  font-size: 0.85rem;
  color: #f87171;
  text-align: center;
  margin: -4px 0 8px;
}

.donation-modal-card .donation-amount-group {
  margin-bottom: 12px;
}

.donation-modal-card .donation-btn {
  width: 100%;
  margin-bottom: 8px;
}

.donation-modal-close {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.donation-modal-close:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ===========================================
   Review Modal
   =========================================== */
.review-modal-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 20px;
}

.review-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.review-modal-content {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 2rem 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.review-modal-content::-webkit-scrollbar {
  width: 6px;
}

.review-modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.review-modal-overlay.active .review-modal-content {
  transform: scale(1);
}

.review-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background 0.2s;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.review-close-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

.review-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #fff;
}

.review-field {
  margin-bottom: 1.25rem;
  position: relative;
}

.review-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.review-required {
  color: #f87171;
}

.review-stars {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.review-star {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  padding: 4px;
  transition: transform 0.15s, color 0.15s;
}

.review-star:hover {
  transform: scale(1.15);
}

.review-star-filled {
  color: #fbbf24;
}

.review-input,
.review-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.review-input:focus,
.review-textarea:focus {
  border-color: rgba(167, 139, 250, 0.5);
}

.review-textarea {
  resize: vertical;
  min-height: 100px;
}

.review-char-count {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.25rem;
}

.review-stats {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.review-stats-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.review-stats-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.review-stats-badge {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.review-error {
  font-size: 0.875rem;
  color: #f87171;
  margin-bottom: 1rem;
}

.review-submit-btn {
  width: 100%;
  box-sizing: border-box;
}

/* レビュー・フィードバック促進ポップアップ */
.review-feedback-prompt-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 20px;
}

.review-feedback-prompt-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.review-feedback-prompt-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 2rem 1.5rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.review-feedback-prompt-overlay.active .review-feedback-prompt-card {
  transform: scale(1);
}

.review-feedback-prompt-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}

.review-feedback-prompt-desc {
  font-size: 1.1rem;
  font-weight: 600;
  color: #93c5fd;
  margin-bottom: 1.5rem;
}

.review-feedback-prompt-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.review-feedback-prompt-btn {
  width: 100%;
  justify-content: center;
}

.review-feedback-prompt-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.review-feedback-prompt-dismiss:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ハイブリッドレビュー・フィードバックモーダル */
.rfp-hybrid-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.review-feedback-prompt-overlay.active .rfp-hybrid-card {
  transform: scale(1);
}
.rfp-hybrid-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
  text-align: center;
}
.rfp-hybrid-desc {
  font-size: 1.1rem;
  font-weight: 600;
  color: #93c5fd;
  margin-bottom: 1.25rem;
  text-align: center;
}
.rfp-section {
  margin-bottom: 0.75rem;
}
.rfp-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0.75rem;
}
.rfp-section-title svg {
  flex-shrink: 0;
  color: #94a3b8;
}
.rfp-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.rfp-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #64748b;
  transition: transform 0.15s;
}
.rfp-star:active {
  transform: scale(1.2);
}
.rfp-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 1rem 0;
}
.rfp-hybrid-card .review-input,
.rfp-hybrid-card .review-textarea,
.rfp-hybrid-card .feedback-select {
  width: 100%;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
.rfp-hybrid-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.rfp-submit-btn {
  width: 100%;
}
.rfp-dismiss-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}
.rfp-dismiss-link:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* 支払いアラートバナー */
#payment-alert-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.875rem;
}
#payment-alert-banner span {
  flex: 1;
}
#payment-alert-banner a {
  color: inherit;
  flex-shrink: 0;
}
#payment-alert-banner button {
  background: none;
  border: none;
  color: #fca5a5;
  cursor: pointer;
  padding: 0.25rem;
  opacity: 0.7;
  flex-shrink: 0;
}
#payment-alert-banner button:hover {
  opacity: 1;
}
#payment-alert-banner.past-due {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
#payment-alert-banner.past-due button {
  color: #fbbf24;
}

/* =================================================
   お知らせバナー
   ================================================= */
.announcement-banner {
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid;
  margin-bottom: 12px;
}
.announcement-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.announcement-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.announcement-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.announcement-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
}
.announcement-message {
  font-size: 0.9rem;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.announcement-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.announcement-close:hover {
  color: rgba(255, 255, 255, 0.8);
}
/* info: 青 */
.announcement-info {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}
.announcement-info .announcement-icon,
.announcement-info .announcement-label {
  color: #60a5fa;
}
/* new: 緑 */
.announcement-new {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
}
.announcement-new .announcement-icon,
.announcement-new .announcement-label {
  color: #4ade80;
}
/* tip: 紫 */
.announcement-tip {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
}
.announcement-tip .announcement-icon,
.announcement-tip .announcement-label {
  color: #c084fc;
}
/* warning: 黄 */
.announcement-warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}
.announcement-warning .announcement-icon,
.announcement-warning .announcement-label {
  color: #fbbf24;
}
/* maintenance: 赤 */
.announcement-maintenance {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}
.announcement-maintenance .announcement-icon,
.announcement-maintenance .announcement-label {
  color: #f87171;
}

/* =================================================
   初回ユーザー向け無料モード案内
   ================================================= */
.first-visit-guide {
  position: relative;
  padding: 24px;
  border-radius: var(--radius-3xl);
  border: 2px solid rgba(34, 197, 94, 0.5);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.08));
  margin-bottom: var(--space-6);
  text-align: center;
}
.first-visit-guide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.first-visit-guide-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.first-visit-guide-icon-svg {
  width: 22px;
  height: 22px;
  color: #4ade80;
}
.first-visit-guide-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.5;
}
.first-visit-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.first-visit-guide-btn:active {
  transform: scale(0.97);
}
.first-visit-guide-btn {
  animation: first-visit-btn-glow 2s ease-in-out infinite;
}
@keyframes first-visit-btn-glow {
  0%, 100% { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.2); }
}
/* バナー全体のグロウ（カードと連動 2.5秒周期） */
.first-visit-guide-glow {
  animation: first-visit-guide-glow 2.5s ease-in-out infinite;
}
@keyframes first-visit-guide-glow {
  0%, 100% { border-color: rgba(34, 197, 94, 0.3); box-shadow: none; }
  50% { border-color: rgba(34, 197, 94, 0.6); box-shadow: 0 0 16px rgba(34, 197, 94, 0.2); }
}
.first-visit-guide-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.first-visit-guide-close:hover {
  color: rgba(255, 255, 255, 0.8);
}
/* カード枠のハイライト（ページ遷移まで持続ループ） */
.first-visit-highlight {
  animation: first-visit-pulse 2.5s ease-in-out infinite;
}
@keyframes first-visit-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.6), 0 0 24px rgba(34, 197, 94, 0.25); }
}
/* 「始める」ボタンのグロウ（ページ遷移まで持続ループ） */
.first-visit-btn-highlight {
  animation: first-visit-btn-pulse 2.5s ease-in-out infinite;
}
@keyframes first-visit-btn-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 0 0 2px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 24px rgba(34, 197, 94, 0.7), 0 0 0 3px rgba(34, 197, 94, 0.5), 0 0 40px rgba(34, 197, 94, 0.3); }
}

/* =================================================
   PWA インストール案内バナー
   ================================================= */
.pwa-install-banner {
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.15);
  margin-bottom: 12px;
}
.pwa-install-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pwa-install-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #a78bfa;
}
.pwa-install-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #a78bfa;
}
.pwa-install-message {
  font-size: 0.9rem;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.pwa-install-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  vertical-align: middle;
}
.pwa-install-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.pwa-install-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   お問い合わせフォーム入力要素
   ========================================== */
#inquiry-form input,
#inquiry-form select,
#inquiry-form textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--text-white);
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

#inquiry-form input::placeholder,
#inquiry-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

#inquiry-form textarea {
  resize: none;
}

#inquiry-form select option {
  color: #000;
}

/* ==========================================
   設定ページ — PC幅ボタン制限
   ========================================== */
@media (min-width: 600px) {
  .settings-page .btn {
    max-width: 320px;
  }
}

/* ==========================================
   更新履歴（Changelog）
   ========================================== */
.changelog-entry {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.changelog-entry:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.changelog-version {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.changelog-version-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 6px;
}
.changelog-date {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.changelog-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.changelog-items li {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  padding-left: 16px;
  position: relative;
}
.changelog-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

/* ============ プレミアムロックボタン ============ */
.premium-locked-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(180, 120, 0, 0.15));
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
  cursor: default;
  pointer-events: none;
}
.premium-hint-text {
  font-size: 0.875rem;
  margin-top: 8px;
  color: #fbbf24;
}

/* ============ 再読込バナー（IDB 障害通知） ============ */
.reload-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  background: linear-gradient(180deg, #b91c1c, #991b1b);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.reload-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 16px;
}
.reload-banner-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #fde68a;
}
.reload-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.reload-banner-text strong {
  font-weight: 600;
}
.reload-banner-text span {
  font-size: 0.875rem;
  opacity: 0.9;
}
.reload-banner-button {
  background: #ffffff;
  color: #991b1b;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.reload-banner-button:hover {
  background: #fde68a;
}
.reload-banner-button:active {
  background: #fbbf24;
}