/* 🎨 Rephrase カラーシステム (Material Design 3.0風) */
:root {
  /* === プライマリカラー (英語学習ブランド) === */
  --primary-50: #e8f5e8;
  --primary-100: #c8e6c8;
  --primary-200: #a5d6a5;
  --primary-300: #81c784;
  --primary-400: #66bb6a;
  --primary-500: #4caf50;  /* メインブランドカラー */
  --primary-600: #43a047;
  --primary-700: #388e3c;
  --primary-800: #2e7d32;
  --primary-900: #1b5e20;

  /* === セカンダリカラー (アクセント・補助) === */
  --secondary-50: #e3f2fd;
  --secondary-100: #bbdefb;
  --secondary-200: #90caf9;
  --secondary-300: #64b5f6;
  --secondary-400: #42a5f5;
  --secondary-500: #2196f3;  /* セカンダリブランド */
  --secondary-600: #1e88e5;
  --secondary-700: #1976d2;
  --secondary-800: #1565c0;
  --secondary-900: #0d47a1;

  /* === ニュートラルカラー (グレースケール) === */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;

  /* === 機能的カラー === */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;

  /* === サーフェスカラー === */
  --surface-primary: #ffffff;
  --surface-secondary: var(--neutral-50);
  --surface-tertiary: var(--neutral-100);
  --surface-inverse: var(--neutral-800);

  /* === テキストカラー === */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --text-inverse: var(--neutral-50);

  /* === シャドウシステム（強化版） === */
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 7px -3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 24px -4px rgba(0, 0, 0, 0.15), 0 8px 16px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 24px 32px -8px rgba(0, 0, 0, 0.15), 0 16px 24px -10px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);

  /* === ボーダーシステム === */
  --border-light: 1px solid var(--neutral-200);
  --border-medium: 1px solid var(--neutral-300);
  --border-strong: 2px solid var(--neutral-400);

  /* === 角丸システム === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* ========================================= */
/* 📱 モバイル専用フォントサイズ設定          */
/* ========================================= */

/* モバイルデバイスのフォントサイズを小さく設定 */
.mobile-device h1 {
  font-size: 12px;
}

.mobile-device h2 {
  font-size: 10px;
}

.mobile-device #navigation-float-menu {
  font-size: 10px;
}

.mobile-device #navigation-float-menu a {
  font-size: 10px;
}

.mobile-device #navigation-float-menu span {
  font-size: 8px;
}

.mobile-device #navigation-float-menu select {
  font-size: 8px;
}

.mobile-device #navigation-float-menu button {
  font-size: 8px;
}

.mobile-device #navigation-float-menu label {
  font-size: 8px;
}

.mobile-device button {
  font-size: 10px;
}

/* ========================================= */
/* 🎯 UI全体の表示サイズ自動調整システム       */
/* ========================================= */

/* UI全体のコンテナに自動スケール調整を適用 */
#main-ui-container {
  transform-origin: top center;
  transition: transform 0.3s ease;
}

/* ビューポート高さに応じた段階的スケール調整 */
/* 1080px以下（1K）: 85%に縮小 */
@media (max-height: 1080px) {
  #main-ui-container {
    transform: scale(0.85);
  }
}

/* 900px以下: 75%に縮小 */
@media (max-height: 900px) {
  #main-ui-container {
    transform: scale(0.75);
  }
}

/* 768px以下: 65%に縮小 */
@media (max-height: 768px) {
  #main-ui-container {
    transform: scale(0.65);
  }
}

/* 600px以下: 55%に縮小 */
@media (max-height: 600px) {
  #main-ui-container {
    transform: scale(0.55);
  }
}

/* モバイルデバイスはスケール調整を無効化（別のシステムで対応） */
.mobile-device #main-ui-container {
  transform: none !important;
}

/* 基本レイアウト設定 */
body {
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  
  /* � 少し濃いめの青グラデーション（展開時の水色と差別化） */
  background: linear-gradient(135deg, 
    #b3d9f5 0%,     /* 濃いめの空色 */
    #8ec8ed 25%,    /* ミディアムスカイブルー */
    #64b5f6 75%,    /* しっかりしたブルー */
    #42a5f5 100%    /* 濃いスカイブルー */
  );
  background-attachment: fixed; /* スクロール時も背景固定 */
  
  /* 🎓 教育系らしい装飾パターン（テスト用に一時的に無効化） */
  /* background-image: 
    radial-gradient(circle at 20% 50%, rgba(66, 165, 245, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(76, 175, 80, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(255, 152, 0, 0.02) 0%, transparent 50%); */
  
  color: var(--text-primary);
  line-height: 1.6;
}

/* 🚨 最優先：サブスロチE��制御パネル専用ルール�E�他�Eルールより優先！E*/
[id*="-sub-"].hidden-subslot-text .slot-phrase {
  color: transparent !important;
  /* 🎯 チE��スト�E容のみ透�E化、枠�E�背景・墁E��線）�E残す */
}

/* 右上のファイル選択・ロードエリアのスタイル */
#file-load-area {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); /* � 白に近い薄い黄色のグラデーション */
  border: var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); /* より立体感のあるシャドウ */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
  padding: 16px;
}

#file-load-area input[type="file"] {
  border: var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#file-load-area input[type="file"]:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

#file-load-area button {
  background: var(--primary-500);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#file-load-area button:hover {
  background-color: var(--primary-600);
  transform: translateY(-1px);
}

/* 解答表示エリアトグルボタンのスタイル */
#toggle-dynamic-area {
  background: var(--secondary-500);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  padding: 12px 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

#toggle-dynamic-area:hover {
  background: var(--secondary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#toggle-dynamic-area:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* 基本的なタイトル要素の余白調整 */
h1 {
  margin-top: 24px;
  margin-bottom: 16px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 2rem;
}

/* 🎤 音声学習システムパネルのスタイル */
.voice-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.voice-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

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

.voice-btn.recording {
  background: #ff4444;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.voice-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
}

.voice-status.info {
  background: rgba(33, 150, 243, 0.2);
  color: white;
}

.voice-status.recording {
  background: rgba(255, 68, 68, 0.2);
  color: white;
  animation: pulse 1.5s infinite;
}

.voice-status.playing,
.voice-status.speaking {
  background: rgba(76, 175, 80, 0.2);
  color: white;
}

.voice-status.success {
  background: rgba(76, 175, 80, 0.2);
  color: white;
}

.voice-status.error {
  background: rgba(244, 67, 54, 0.2);
  color: white;
}

.voice-status.analyzing {
  background: rgba(156, 39, 176, 0.2);
  color: white;
}

.voice-status.stopped {
  background: rgba(158, 158, 158, 0.2);
  color: white;
}

/* 刁E��結果のスタイル�E�シンプル版！E*/
.analysis-results {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.analysis-results h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.analysis-item {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.4;
}

/* 音声分析結果エリア - 上に突き抜けないようにスクロール追加 */
#voice-analysis-results {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1);
}

/* Webkit browsers (Chrome, Safari) */
#voice-analysis-results::-webkit-scrollbar {
  width: 6px;
}

#voice-analysis-results::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

#voice-analysis-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#voice-analysis-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* パネル表示/非表示アニメーション */
#voice-control-panel {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.9);
}

#voice-control-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#voice-panel-open-btn {
  transition: all 0.2s ease;
}

#voice-panel-open-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* 🎤 音声学習シスチE��パネルのスタイル */
.voice-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.voice-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

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

.voice-btn.recording {
  background: #ff4444;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.voice-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
}

.voice-status.info {
  background: rgba(33, 150, 243, 0.2);
  color: white;
}

.voice-status.recording {
  background: rgba(255, 68, 68, 0.2);
  color: white;
  animation: pulse 1.5s infinite;
}

.voice-status.playing,
.voice-status.speaking {
  background: rgba(76, 175, 80, 0.2);
  color: white;
}

.voice-status.success {
  background: rgba(76, 175, 80, 0.2);
  color: white;
}

.voice-status.error {
  background: rgba(244, 67, 54, 0.2);
  color: white;
}

.voice-status.analyzing {
  background: rgba(156, 39, 176, 0.2);
  color: white;
}

.voice-status.stopped {
  background: rgba(158, 158, 158, 0.2);
  color: white;
}

/* 刁E��結果のスタイル�E�シンプル版！E*/
.analysis-results {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.analysis-results h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.analysis-item {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.4;
}

/* 音声分析結果エリア - 上に突き抜けないようにスクロール追加 */
#voice-analysis-results {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1);
}

/* Webkit browsers (Chrome, Safari) */
#voice-analysis-results::-webkit-scrollbar {
  width: 6px;
}

#voice-analysis-results::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

#voice-analysis-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#voice-analysis-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* パネル表示/非表示アニメーション */
#voice-control-panel {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.9);
}

#voice-control-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#voice-panel-open-btn {
  transition: all 0.2s ease;
}

#voice-panel-open-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* スロチE��画像（褁E��対応）�E共通スタイル */
.slot-image {
  display: inline-block;
  margin-right: 4px;
  max-height: 150px !important; /* 強制適用 */
  max-width: 160px !important; /* 幁E��制陁E*/
  min-height: 120px !important; /* 最小高さを保証 */
  min-width: 120px !important; /* 最小幁E��保証 */
  vertical-align: middle;
}

/* 🖼�E�E褁E��画像表示シスチE��用スタイル */
.multi-image-container {
  /* Grid Layout対忁E イラスト領域�E�衁E�E�に配置 */
  grid-row: 2;
  grid-column: 1;
  display: flex;
  gap: 6px; /* 画像間の間隔を調整 */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap !important; /* 🎯 折り返しを禁止して横一列に */
  width: 100%;
  height: 180px !important; /* 🎯 Grid衁Eの高さと完�E一致 */
  padding: 5px;
  box-sizing: border-box;
  border-radius: 4px;
  background: rgba(40, 167, 69, 0.05);
  border: 1px dashed rgba(40, 167, 69, 0.3);
  /* 🚫 スクロールバ�Eを削除 - 代わりに画像サイズを動皁E��整 */
  overflow: hidden; /* スクロールを完�Eに無効匁E*/
}

.slot-multi-image {
  /* 🎯 縦は常に枠ぁE��ぱぁE��横は画像枚数に応じて動的調整 */
  height: 160px !important; /* 🎯 縦は固定（スロチE��枠ぁE��ぱぁE��E*/
  width: auto !important; /* 🎯 横幁E�E動的計算で設定！ES側で制御�E�E*/
  max-width: none !important; /* 最大横幁E��限なぁE*/
  min-width: 50px !important; /* 最小横幁E�Eみ設定（極端に細くなることを防ぐ！E*/
  border-radius: 5px;
  border: 1px solid rgba(40, 167, 69, 0.6);
  object-fit: fill !important; /* 🎯 画像を強制皁E��持E��サイズに変形�E�縦横比無視！E*/
  display: block;
  visibility: visible;
  opacity: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, width 0.3s ease;
  flex-shrink: 1; /* 🎯 フレチE��スアイチE��として縮小可能 */
}

.slot-multi-image:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-color: rgba(40, 167, 69, 0.8);
}

/* 褁E��画像表示時�E単一画像を非表示にする */
.slot-container:has(.multi-image-container) .slot-image {
  display: none !important;
  visibility: hidden !important;
}

/* 褁E��画像表示時にコンチE��を確実に表示 */
.slot-container .multi-image-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* スロット全体の調整が必要な場合に備えた汎用クラス */
/* 🎯 上位スロット専用：6行固定レイアウト（詳細・個別ランダマイズボタンあり） */
.slot-wrapper:not([id$="-sub"]) .slot-container {
  /* 🎯 CSS Gridで完�Eに6行固定レイアウトを実裁E*/
  display: grid;
  grid-template-rows: 30px 180px 30px 30px 30px 30px; /* 6行固定（ID、画像、日本語、英語、詳細ボタン、個別ランダマイズボタン） */
  grid-template-columns: 1fr;
  gap: 6px; /* 行間も少し拡大 */
  align-items: center; /* 吁E��ル冁E��の中央揁E�� */
  justify-items: center; /* 吁E��ル冁E��の中央揁E�� */
  
  /* order属性への対応を追加 */
  order: 0; /* デフォルト値 */
  border: 1px solid #d0d0d0; /* 🎯 Phase 2修正: 薄い境界線でSVOC構造を見える化 */
  border-radius: 0; /* 🎯 Phase 1: 角丸を削除してスロットをくっつける */
  background: linear-gradient(180deg, #e8f5e8 0%, #c8e6c8 50%, #a5d6a5 100%); /* 薄い緑の縦グラデーション */
  box-shadow: none; /* 🎯 Phase 1: シャドウを削除してスロットをくっつける */
  padding: 15px; /* パディングも拡大 */
  margin: 0; /* 🎯 Phase 1: スロット間の隙間を0に */
  margin-left: -1px; /* 🎯 Phase 1: 隣接する境界線を重ねる */
  
  /* �E 動的幁E��整シスチE�� - 褁E��画像対応で大幁E��大 */
  min-width: 160px; /* 最小幁E��拡大 */
  width: auto; /* 自動幁E��整 */
  max-width: none; /* 🎯 ズーム機能のため固定幅制限を撤去 */
  flex: 0 0 auto; /* flexアイチE��として自動サイズ */
  
  /* アニメーション */
  transition: opacity 0.2s ease-out, width 0.3s ease;
  
  /* �E スロチE��全体�E高さを適刁E��設宁E*/
  height: auto; /* 自動高さ調整 */
  min-height: 380px; /* 6行固定レイアウト用の高さ（詳細ボタン・個別ランダマイズボタン行も含む） */
  box-sizing: border-box;
}

/* 🎯 サブスロット専用：4行固定レイアウト（詳細・個別ランダマイズボタンなし） */
.slot-wrapper[id$="-sub"] .slot-container {
  /* 🎯 CSS Gridで4行固定レイアウトを実装 */
  display: grid;
  grid-template-rows: 30px 180px 30px 30px; /* 4行固定（ID、画像、日本語、英語） */
  grid-template-columns: 1fr;
  gap: 6px; /* 行間も少し拡大 */
  align-items: center; /* セル内の中央揃え */
  justify-items: center; /* セル内の中央揃え */
  
  /* order属性への対応を追加 */
  order: 0; /* デフォルト値 */
  border: 1px solid #d0d0d0; /* 🎯 薄い境界線でSVOC構造を見える化 */
  border-radius: 0; /* 🎯 Phase 1: 角丸を削除してスロットをくっつける */
  background: linear-gradient(180deg, #e8f5e8 0%, #c8e6c8 50%, #a5d6a5 100%); /* 薄い緑の縦グラデーション */
  box-shadow: none; /* 🎯 Phase 1: シャドウを削除してスロットをくっつける */
  padding: 15px; /* パディングも拡大 */
  margin: 0; /* 🎯 Phase 1: スロット間の隙間を0に */
  margin-left: -1px; /* 🎯 Phase 1: 隣接する境界線を重ねる */
  
  /* 動的幅調整システム - 複数画像対応で大幅拡大 */
  min-width: 160px; /* 最小幅拡大 */
  width: auto; /* 自動幅調整 */
  max-width: none; /* 🎯 ズーム機能のため固定幅制限を撤去 */
  flex: 0 0 auto; /* flexアイテムとして自動サイズ */
  
  /* アニメーション */
  transition: opacity 0.2s ease-out, width 0.3s ease;
  
  /* サブスロット全体の高さを適切に設定 */
  height: auto; /* 自動高さ調整 */
  min-height: 320px; /* 4行固定レイアウト用の高さ（詳細ボタン・個別ランダマイズボタン行なし） */
  box-sizing: border-box;
}

/* 🎯 サブスロット内の英語テキスト行：テキストが折り返さないようにする */
.slot-wrapper[id$="-sub"] .subslot-phrase-row {
  flex-wrap: nowrap !important;
  min-width: max-content !important;
}

/* 🎯 サブスロット内の英語テキスト：1行表示を強制 */
.slot-wrapper[id$="-sub"] .slot-phrase {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  width: auto !important;
}

/* 🎯 サブスロット展開時：親スロットを下に延長してタブ感を演出 */
.active-parent-slot {
  position: relative;
  min-height: 460px !important; /* 380px → 460pxに拡大（+80px） */
  border-bottom: none !important; /* 下ボーダーを削除 */
  border-bottom-left-radius: 0 !important; /* 下の角丸を削除 */
  border-bottom-right-radius: 0 !important; /* 下の角丸を削除 */
  z-index: 1; /* サブスロットより後ろに配置 */
}

/* 🎯 サブスロット展開時：サブスロットエリアとの接続 */
.active-subslot-area {
  margin-top: -100px !important; /* 親スロットに大きく食い込む */
  padding-top: 100px !important; /* 食い込んだ分を上部余白で確保 */
  z-index: 2; /* 親スロットの上に配置（親スロット下端を隠す） */
}

/* 🎯 サブスロット展開時：サブスロット内の最初の要素の上ボーダーを削除 */
.active-subslot-area .subslot-container:first-of-type {
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* 🎯 Grid衁E: スロチE��名（忁E��1番目に配置�E�E*/
.slot-container label {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* セル高さを完�Eに使用 */
  font-size: 18px; /* フォントサイズを拡大 */
  font-weight: bold;
  color: #2d5a2d; /* � 薄い緑背景に濃い緑文字 */
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* 🎯 Grid衁E: イラスト領域�E�忁E��2番目に配置�E�E*/
.slot-container .slot-image {
  grid-row: 2;
  grid-column: 1;
  display: block;
  width: 160px !important; /* 強制適用 */
  height: 150px !important; /* 強制適用 */
  max-width: 160px !important;
  max-height: 150px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  object-fit: contain;
  margin: 0;
  padding: 0;
  /* イラストが無ぁE��合�E透�Eスペ�Eス確俁E*/
  background: transparent;
  border: 1px solid #f0f0f0; /* 枠を追加してサイズを視覚化 */
}

/* 🎯 Grid衁E: 英語テキスト（忁E��3番目に配置�E�E*/
.slot-container .slot-text {
  grid-row: 3;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* セル高さを完�Eに使用 */
  font-size: 11px; /* 日本語補助テキスト用に小さく */
  font-weight: 400;
  color: #4a4a4a; /* � 薄い緑背景に読みやすいダークグレー */
  text-align: center;
  margin: 0;
  padding: 4px;
  line-height: 1.1;
  /* 長ぁE��キスト�E折り返し */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 🎯 Grid衁E: 日本語補助チE��スト（忁E��4番目に配置�E�E*/
.slot-container .slot-phrase {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* 🎯 Phase 2修正: スロット内100% */
  margin: 0;
  height: 100%; /* セル高さを完�Eに使用 */
  font-size: 16px; /* �E フォントサイズを調整 */
  font-weight: 600;
  color: #222;
  text-align: center;
  padding: 2px; /* �E パディングを追加 */
  line-height: 1.2;
  
  /* �E 長ぁE��キスト対忁E*/
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal; /* 改行を許可 */
  
  /* 🎯 Phase 2修正: 背景透明（slot-wrapperの黄色い帯が見える） */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1000; /* テキストを全要素の最前面に */
}

/* スロチE��頁E��制御用 - JS側でdata-order属性を設定した場合�E優先度 */
[data-order] {
  order: attr(data-order number, 0);
}


/* Slot label for identifying slotKey (e.g., m1, s, o1) */
.slot-label {
  font-size: 12px;
  font-weight: bold;
  color: #444;
  margin-bottom: 4px;
}


/* 非表示制御用クラス */
.hidden {
  display: none;
}

.slot-wrapper {
  display: flex;
  flex-wrap: nowrap !important; /* 折り返しを絶対に防ぐ */
  gap: 0; /* 🎯 Phase 1: スロット間の隙間を0に */
  margin-bottom: 16px;
  flex-direction: row; /* 横並びに変更 */
  overflow-x: auto; /* 横スクロール有効 */
  overflow-y: hidden; /* 縦スクロール無効 */
  width: 100%; /* 親要素の幅いっぱいに */
  min-height: 350px; /* 最小高さを確保 */
  white-space: nowrap; /* 子要素の改行を防ぐ */
  position: relative; /* 🎯 Phase 2: 疑似要素の基準位置 */
}

/* 🎯 Phase 2: 親スロット用の黄色い帯 */
.slot-wrapper::before {
  content: '';
  position: absolute; /* 🎯 slot-wrapper基準の相対位置に戻す */
  left: -100vw; /* 🎯 左にウインドウ幅分伸ばす */
  right: -100vw; /* 🎯 右にウインドウ幅分伸ばす */
  top: 275px; /* 🎯 位置微調整 */
  height: 30px; /* slot-phraseの高さ */
  background: #FFF9C4;
  z-index: 999; /* 🎯 全要素より前、英語テキスト(z-index:1000)より後ろ */
  pointer-events: none; /* クリックを透過させる */
}

/* スロットコンテナの幅を内容に応じて可変、ただし縮小は防ぐ */
.slot-wrapper > .slot-container {
  flex-shrink: 0 !important; /* 縮小を防ぐ */
  flex-grow: 0; /* 不要な拡大を防ぐ */
  width: auto; /* 内容に応じた幅 */
  max-width: none; /* 最大幅制限を解除 */
  white-space: normal; /* スロット内は通常の改行 */
}

/* 🔄 サブスロット横スクロール機能 */
.slot-wrapper[id$="-sub"] {
  flex-direction: row !important; /* サブスロットは横並び */
  flex-wrap: nowrap !important; /* 折り返しなし */
  overflow-x: auto !important; /* 横スクロール有効 */
  overflow-y: hidden !important; /* 縦スクロール無効 */
  white-space: nowrap; /* 要素を横並びに強制 */
  cursor: grab; /* ドラッグ可能を示唆 */
  user-select: none; /* テキスト選択を無効化 */
  max-width: 100%; /* 親要素の幅を超えないように */
  box-sizing: border-box; /* ボーダーとパディングを含める */
  background-color: rgba(255, 0, 0, 0.1) !important; /* デバッグ用：薄い赤背景 */
  border: 2px solid red !important; /* デバッグ用：赤い境界線 */
  position: relative; /* 🎯 Phase 2: 擬似要素の基準位置 */
}

/* 🎯 Phase 2: サブスロット用の黄色い帯 */
.slot-wrapper[id$="-sub"]::before {
  content: '';
  position: absolute; /* 🎯 slot-wrapper基準の相対位置 */
  left: -100vw; /* 🎯 左にウインドウ幅分伸ばす */
  right: -100vw; /* 🎯 右にウインドウ幅分伸ばす */
  top: 355px; /* 🎯 英語テキストの位置 */
  height: 30px; /* サブslot-phraseの高さ */
  background: #FFF9C4;
  z-index: 999; /* 🎯 親スロットと同じく全要素より前、テキスト(1000)より後ろ */
  pointer-events: none;
}

.slot-wrapper[id$="-sub"]:active {
  cursor: grabbing; /* ドラッグ中のカーソル */
}

/* サブスロット内の個別コンテナはインライン化 */
.slot-wrapper[id$="-sub"] .subslot-container {
  display: inline-grid !important; /* 横並びのためinline-grid使用 */
  vertical-align: top; /* 上揃え */
  white-space: nowrap; /* 🎯 コンテナ内テキストを1行に（改行禁止） */
  min-width: fit-content; /* 🎯 テキスト幅に応じた最小幅 */
  width: auto; /* 🎯 自動幅（テキスト長に応じて調整） */
  max-width: none; /* 🎯 最大幅制限なし */
  flex-shrink: 0 !important; /* 縮小を防止 */
  flex-grow: 0 !important; /* 拡大を防止 */
  flex-basis: auto; /* 🎯 フレックスベースを自動に */
  background-color: rgba(0, 255, 0, 0.1) !important; /* デバッグ用：薄い緑背景 */
  border: 2px solid green !important; /* デバッグ用：緑の境界線 */
}

/* サブスロット全体の幅を広げて横スクロールを強制 */
.slot-wrapper[id$="-sub"] {
  min-width: calc(250px * 8 + 16px * 7) !important; /* 8個のサブスロット + gap */
  width: max-content !important; /* コンテンツに応じた幅 */
}

/* subslot 表示安定化のための共通構造 */
.subslot {
  min-width: 80px;
  min-height: 100px;
  padding: 4px;
  margin: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* .subslot冁E�E画像も大きくする */
.subslot .slot-image {
  width: 160px !important; /* 強制適用 */
  height: 150px !important; /* 強制適用 */
  max-width: 160px !important;
  max-height: 150px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  object-fit: contain;
}

/* サブスロチE��展開エリアは初期状態では非表示に */
[id^="slot-"][id$="-sub"] {
  display: none !important; /* 初期状態では忁E��非表示 */
  visibility: hidden; /* 視覚的にも隠ぁE*/
}

/* JavaScriptで表示された場合�Eみ有効になるスタイル */
[id^="slot-"][id$="-sub"].visible {
  display: flex !important;
  flex-wrap: wrap; /* サブスロチE��が多すぎる場合に折り返す */
  gap: 8px; /* サブスロチE��間�E隙間 */
  visibility: visible !important;
  align-content: flex-start; /* �E 折り返した行を上詰めで配置し、不要な空間を防ぁE*/
}

/* 高さ潰れ�E透�E化�E折り返し不備の対処 */
.slot-wrapper {
  min-height: 100px;
  visibility: visible;
  flex-wrap: nowrap; /* �E 横並びで折り返さなぁE*/
  flex-direction: row !important; /* 強制皁E��横並びに */
  display: flex !important; /* flex表示を強制 */
  align-items: flex-start;
  justify-content: flex-start; /* 左揁E�� */
  gap: 0; /* 🎯 Phase 1: スロット間の隙間を0に */
  position: relative; /* 🎯 Phase 2: 擬似要素の基準位置 */
  
  /* 🔍 ズーム対応：横スクロール無効化 */
  overflow-x: visible; /* 横スクロールを無効化してズーム対応 */
  overflow-y: visible; /* 縦スクロールも無効化 */
  padding-bottom: 10px; /* レイアウト用の余白は維持 */
  
  /* �E スクロールバ�Eのスタイル改喁E��Eebkit系ブラウザ�E�E*/
  scrollbar-width: thin; /* Firefox */
}

/* �E Webkit系ブラウザでのスクロールバ�Eスタイル */
.slot-wrapper::-webkit-scrollbar {
  height: 8px;
}

.slot-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.slot-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.slot-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
/* subslot 冁E�Eラベル表示用スタイル */
.subslot label {
  display: block;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
  text-align: center;
}


/* 🎯 Grid衁E: 詳細ボタン�E�忁E��5番目に配置�E�E サブスロチE��有無で動的表示 */
.slot-container .subslot-toggle-button {
  grid-row: 5;
  grid-column: 1;
  width: 100%;
  height: 100%; /* セル高さを完�Eに使用 */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slot-container .subslot-toggle-button button {
  font-size: 10px;
  padding: 4px 12px;
  margin: 0;
  min-height: 20px;
  background: var(--info);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.slot-container .subslot-toggle-button button:hover {
  background: var(--secondary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 🎯 Grid衁E: 個別ランダマイズボタン�E�忁E��6番目に配置�E�E 常に表示 */
.slot-container .individual-randomize-button {
  grid-row: 6;
  grid-column: 1;
  width: 100%;
  height: 100%; /* セル高さを完�Eに使用 */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slot-container .individual-randomize-button button {
  font-size: 11px;
  padding: 4px 12px;
  margin: 0;
  min-height: 20px;
  background: var(--warning);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.slot-container .individual-randomize-button button:hover {
  background: #f57c00;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 動的記載エリアを横並びに設宁E- 位置の修正 */
#dynamic-slot-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 5px; /* 允E�E値に戻ぁE*/
  padding-top: 10px; /* 允E�E値に戻ぁE*/
  padding-bottom: 24px;
  /* 点線を削除 */
  position: relative; /* 位置関係�E制御のため */
  clear: both; /* 他�E要素の影響を受けなぁE��ぁE�� */
  order: 9999; /* 表示優先度を最低に設定（一番最後に表示�E�E*/
}

/* 動的記載エリア冁E�EスロチE��要素のスタイル */
#dynamic-slot-area .slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  max-width: 200px;
  border: 1px solid #ddd;
  padding: 8px;
  margin: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 動的エリア冁E�Esubslotのスタイル */
#dynamic-slot-area .subslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  border: 1px solid #eee;
  padding: 8px;
  margin: 4px;
}

/* 動的記載エリアのタイトルを削除 */
#dynamic-slot-area::before {
  display: none;
}

/* 全サブスロチE��展開エリアのコンチE��スタイル */
[id$="-sub"] {
  margin-bottom: 24px; /* 展開エリア間�E間隔を確俁E*/
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

/* 動的記載エリアのコンチE��要素のスタイル強匁E*/
#dynamic-area-container {
  margin-top: 40px; /* 允E�E値に戻ぁE*/
  padding-top: 20px; /* 允E�E値に戻ぁE*/
  border-top: 2px solid #666; /* 区刁E��線を簡素匁E*/
  position: relative;
  clear: both;
  display: block;
  order: 9999; /* フレチE��スコンチE��冁E��確実に最後に配置 */
  z-index: 1; /* z-indexを低めに設宁E*/
  
  /* ビジュアルマ�Eカーの追加�E�デバッグ用�E�E*/
  position: relative;
}

/* 動的エリアの前�E区刁E��線を削除 */
#dynamic-area-container::before {
  /* グレーの実線を削除 */
  display: none;
}

/* 空のスロチE��非表示機構用のスタイル */
.empty-slot-hidden {
  display: none !important;
  visibility: hidden;
}

.display-at-top-hidden {
  display: none !important;
  visibility: hidden;
}

.empty-container-hidden {
  display: none !important;
  visibility: hidden;
}

/* 🔹 刁E��疑問詞エリアの非表示状慁E*/
#display-top-question-word.empty-slot-hidden,
#display-top-question-word.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* 🔥 静的スロチE��エリアのスマ�Eト表示制御 */
/* 空のスロチE��を動皁E��非表示にするクラス */
.slot-container.empty-slot {
  display: none !important;
  visibility: hidden !important;
}

/* 静的スロチE��エリアの基本表示設定�E上部のCSS Gridで定義済み */

/* 空スロチE��判定時に適用されるスタイル�E�グレー枠を完�Eに非表示�E�E*/
.slot-container.hidden-empty {
  display: none !important;
  visibility: hidden !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* 古ぁE�E離疑問詞スタイルを削除 - 新しいGrid構造が下で定義済み */

/* 古ぁE��問詞要素スタイルを削除 - 新しいGrid構造が下で定義済み */

/* アニメーション効果（オプション - 封E��の拡張用�E�E*/
.slot-container.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.slot-container.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* 🎯 統一された表示制御シスチE�� */

/* 上位スロチE��用の汎用表示制御 */
.slot-container.hidden-auxtext .slot-text { display: none !important; }
.slot-container.hidden-text > .slot-phrase { display: none !important; }

/* サブスロチE��用の汎用表示制御�E�Epacity統一�E�E*/
.subslot.hidden-auxtext .slot-text { display: none !important; }
/* サブスロチE��の一般皁E��hidden-textクラス - 無効匁E*/
/* .subslot.hidden-text > .slot-phrase { opacity: 0 !important; } */

/* サブスロチE��表示制御 - 統一版（古ぁE��ールは削除済み�E�E*/
[id*="-sub-"].hidden-auxtext .slot-text { display: none !important; }
/* 一般皁E��hidden-textクラス - 無効化（制御パネル専用を優先！E*/
/* [id*="-sub-"].hidden-text > .slot-phrase { opacity: 0 !important; } */

/* 🎛�E�EサブスロチE��制御パネル専用クラス�E�Eidden-subslot-xxxシリーズ�E�E*/
[id*="-sub-"].hidden-subslot-auxtext .slot-text { display: none !important; }
/* 制御パネル専用チE��スト制御は最上部で定義済み */

/* 🤁E画像�E動非表示機槁E*/
/* プレースホルダー画像�Eエラー画像�E無効画像�E自動非表示 */
.slot-image.auto-hidden-image {
  display: none !important;
  visibility: hidden !important;
}

/* 🎨 メタタグ画像�E常に表示�E�Euto-hidden-image を上書き！E*/
.slot-image[data-meta-tag="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 160px !important; /* サイズも強制適用 */
  height: 150px !important;
  max-width: 160px !important;
  max-height: 150px !important;
  min-width: 120px !important;
  min-height: 120px !important;
}

/* 手動制御と自動制御の優先度制御 */
/* 手動制御が優先される�E�手動非表示が設定されてぁE��場合�E自動制御を無効化！E*/
.slot-container.hidden-image .slot-image.auto-hidden-image,
.slot-container[class*="hidden-"][class*="-image"] .slot-image.auto-hidden-image {
  /* 手動制御が設定されてぁE��場合�E自動制御クラスを無効匁E*/
  display: none !important; /* 手動制御の結果を優允E*/
}

/* メタタグ画像�E手動制御も上書ぁE*/
.slot-container.hidden-image .slot-image[data-meta-tag="true"],
.slot-container[class*="hidden-"][class*="-image"] .slot-image[data-meta-tag="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 🎯 サブスロチE��コントロールパネルを下�Eに配置�E�静皁E��リア限定！E*/
/* #dynamic-slot-area の子孫ではなぁE[id$="-sub"] 冁E�Eパネルのみを対象とする */
[id$="-sub"]:not(#dynamic-slot-area *) .subslot-visibility-panel {
  /* flexコンチE��の幁E��100%にすることで、強制皁E��新しい行に折り返させる */
  flex-basis: 100%;
  /* 他�EサブスロチE��より後に表示されるよぁE��頁E��を最大にする */
  order: 999; 
  margin-top: 16px;
  
  /* �E レイアウト調整�E�中央揁E��と背景色変更�E�Eimportantで強制適用�E�E*/
  width: auto !important; /* 幁E��自動調整 */
  margin-left: auto !important; /* 中央揁E�� */
  margin-right: auto !important; /* 中央揁E�� */
  background-color: white !important; /* 背景色を白に */
  padding: 10px !important; /* 冁E�E余白 */
  border: 1px solid #ddd !important; /* 枠線を追加 */
  border-radius: 5px !important; /* 角を丸める */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* 上位パネルと影を合わせめE*/
}

/* 🔹 刁E��疑問詞エリアのスタイル - 他�EスロチE��と同じ高さに調整 */
#display-top-question-word {
  display: none !important; /* 初期状態�E非表示 */
  grid-template-rows: 30px 180px 30px 30px 30px 30px; /* 🎯 他�EスロチE��と同じ6行構造 */
  grid-template-columns: 1fr;
  gap: 6px; /* 🎯 他�EスロチE��と同じgap */
  width: auto !important; /* �E 自動幁E��整 */
  min-width: 140px !important; /* �E 最小幁E*/
  max-width: none !important; /* �E 最大幁E��限なぁE*/
  height: auto !important; /* 🎯 自動高さ調整 */
  min-height: 380px !important; /* 🎯 他�EスロチE��と同じ最小高さ */
  margin: 4px 4px 20px 4px !important; /* 🎯 他�EスロチE��と同じマ�Eジン */
  padding: 15px !important; /* 🎯 他�EスロチE��と同じパディング */
  border: 1px solid #eee !important; /* スロットと同じボーダー */
  border-radius: 0 !important; /* スロットと同じ角丸なし */
  background: linear-gradient(180deg, #e8f5e8 0%, #c8e6c8 50%, #a5d6a5 100%) !important; /* 🌱 スロットと同じ薄い緑の縦グラデーション */
  align-items: center;
  justify-items: center;
  box-sizing: border-box !important;
  order: -1 !important; /* 他�EスロチE��より前に表示 */
  transition: grid-template-rows 0.3s ease; /* 行�E高さ変更時�Eアニメーション */
}

/* JavaScriptで表示された場合�Eみ有効になるスタイル */
#display-top-question-word.visible {
  display: grid !important;
}

/* 🔧 補助チE��スト非表示時�E行�E高さ制御 */
#display-top-question-word.hide-auxtext {
  grid-template-rows: 30px 180px 0px 30px 30px 30px; /* 🎯 3行目�E�補助チE��スト行）を0pxに */
}

/* 疑問詞ラベル - Grid衁E */
#display-top-question-word .question-word-label {
  grid-row: 1;
  font-size: 18px; /* スロットラベルと同じサイズ */
  font-weight: bold;
  color: #2d5a2d; /* 🌱 スロットと同じ濃い緑文字 */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 疑問詞画像エリア - Grid衁E */
#display-top-question-word .question-word-image {
  grid-row: 2;
  max-height: 150px !important; /* 🎯 他�EスロチE��画像と同じサイズ */
  max-width: 160px !important; /* 🎯 他�EスロチE��画像と同じサイズ */
  min-height: 120px !important; /* 🎯 他�EスロチE��画像と同じサイズ */
  min-width: 120px !important; /* 🎯 他�EスロチE��画像と同じサイズ */
  background: transparent;
  border: 1px solid #f0f0f0; /* スロチE��画像と同じ枠 */
}

/* 疑問詞日本語補助チE��スチE- Grid衁E */
#display-top-question-word .question-word-auxtext {
  grid-row: 3;
  grid-column: 1;
  font-size: 11px; /* スロチE��の補助チE��ストと同じサイズ */
  font-weight: 400;
  color: #777;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 4px; /* スロチE��の補助チE��ストと同じパディング */
  line-height: 1.1; /* スロチE��の補助チE��ストと同じ行髁E*/
}

/* 疑問詞英語テキスト - Grid位置 */
#display-top-question-word .question-word-text {
  grid-row: 4;
  position: relative; /* z-indexを有効化 */
  z-index: 1000; /* 黄色い帯(999)より前面に表示 */
  font-size: 20px; /* 適度なサイズに調整 */
  font-weight: 600; /* スロットの英語テキストと同じ重み */
  color: #222;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 2px; /* スロットと同じパディング */
  line-height: 1.2; /* スロットの英語テキストと同じ行高 */
  
  /* 🎨 新しいデザインシステムに統一 - 例文テキストエリア */
  background: transparent; /* 黄色帯を透過させるため透明に */
  border: none; /* 枠線を削除 */
  border-radius: var(--radius-sm);
  box-shadow: none; /* 影を削除 */
  
  /* 長いテキスト対応 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal; /* 改行を許可 */
}

/* 疑問詞�Eタンプレースホルダー - Grid衁E,6�E�空のスペ�Eス�E�E*/
#display-top-question-word .question-word-button-placeholder {
  display: block;
  position: relative; /* z-indexを有効化 */
  z-index: 1000; /* 黄色い帯(999)より前面に表示 */
  width: 100%;
  height: 100%;
}

#display-top-question-word .question-word-button-placeholder:nth-of-type(5) {
  grid-row: 5;
}

#display-top-question-word .question-word-button-placeholder:nth-of-type(6) {
  grid-row: 6;
}

/* 英語テキスト行とボタンコンテナを帯の前面に */
#display-top-question-word .question-word-text-row,
#display-top-question-word .text-toggle-container {
  position: relative;
  z-index: 1000; /* 黄色い帯(999)より前面 */
}

/* 🎯 サブスロチE��専用の4行CSS GridレイアウチE*/
.subslot-container {
  /* CSS Gridで4行固定レイアウトを実裁E��詳細・ランダマイズボタンなし！E*/
  display: grid;
  grid-template-rows: 30px 180px 20px 25px; /* 画像行を120px ↁE180px にさらに拡大 */
  grid-template-columns: minmax(120px, max-content); /* 🎯 テキスト幅に応じて自動拡張 */
  gap: 4px; /* 行間の固定間隁E*/
  align-items: center; /* 吁E��ル冁E��の中央揁E�� */
  justify-items: center; /* 吁E��ル冁E��の中央揁E�� */
  
  /* スタイリング */
  border: 1px solid #d0d0d0; /* 🎯 薄い境界線でSVOC構造を見える化 */
  border-radius: 0; /* 🎯 Phase 1: 角丸を削除してスロットをくっつける */
  box-shadow: none; /* 🎯 Phase 1: シャドウを削除してスロットをくっつける */
  padding: 10px;
  margin: 0; /* 🎯 Phase 1: スロット間の隙間を0に */
  margin-left: -1px; /* 🎯 Phase 1: 隣接する境界線を重ねる */
  
  /* 動的幁E��整シスチE�� - 🎯 JSで幅調整しないのでCSSのみで制御 */
  min-width: 120px; /* 最小幁E*/
  width: fit-content; /* 🎯 テキスト幅に応じた幅 */
  max-width: none; /* 🎯 最大幅制限を解除 */
  flex: 0 0 auto; /* flexアイチE��として自動サイズ */
  
  /* アニメーション */
  transition: opacity 0.2s ease-out, width 0.3s ease;
  
  /* 固定高さ�E�E行構造�E�E*/
  height: 279px; /* 30+180+20+25+gap+padding に更新 */
  box-sizing: border-box;
}

/* サブスロチE��のスロチE��吁E- Grid衁E */
.subslot-container label {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px; /* 上位スロチE��より少し小さぁE*/
  font-weight: bold;
  color: #333;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* サブスロチE��のイラスチE- Grid衁E */
.subslot-container img.slot-image {
  grid-row: 2;
  grid-column: 1;
  width: 160px !important; /* 強制適用 */
  height: 150px !important; /* 強制適用 */
  max-width: 160px !important;
  max-height: 150px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  object-fit: contain; /* cover ↁEcontain に変更�E�画像�E縦横比を保持�E�E*/
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0;
  padding: 0;
}

/* サブスロチE��の補助チE��スチE- Grid衁E */
.subslot-container .slot-text {
  grid-row: 3;
  grid-column: 1;
  font-size: 11px;
  font-weight: 400;
  color: #777;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 4px;
  line-height: 1.1;
}

/* サブスロチE��の例文チE��スチE- Grid衁E�E�オレンジ背景・上下線！E*/
.subslot-container .slot-phrase {
  grid-row: 4;
  grid-column: 1;
  font-size: 14px; /* 上位スロチE��より少し小さぁE*/
  font-weight: 600;
  color: #222;
  text-align: center;
  width: max-content; /* 🎯 テキスト幅に応じた幅 */
  min-width: auto; /* 🎯 最小幅を自動に */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2px 8px; /* 左右パディング追加 */
  line-height: 1.2;
  white-space: nowrap; /* 🎯 テキストを1行で表示（改行禁止） */
  overflow: visible; /* 🎯 はみ出しを許可 */
  
  /* 🎯 Phase 2修正: 背景透明（slot-wrapperの黄色い帯が見える） */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1000; /* 🎯 黄色い帯(999)より手前にテキストを表示 */
}

/* =================================================================== */
/* 🔗 エクセル風タブ連結システム（Excel-style Tab Connection System） */
/* =================================================================== */

/* 📍 位置調整関連のベース設定 */
.slot-wrapper[id$="-sub"] {
  /* JavaScriptで設定されるmargin-leftを確実に適用 */
  margin-left: var(--dynamic-margin-left, 0px) !important;
}

/* 🔍 タブ連結エリアが表示されるように強制表示 */
.slot-wrapper.active-subslot-area[id$="-sub"] {
  /* タブ連結時は確実に表示 */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* 位置調整が適用されても画面内に留まるように */
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* 🔗 エクセル風タブ連結システム（再実装版） */

/* 展開中の上位スロット（親）の基本スタイル */
.slot-container.active-parent-slot {
  background: rgba(200, 230, 250, 0.95) !important; /* 💧 水色背景（展開中を明確化） */
  border: 2px solid #4FC3F7 !important; /* 💧 水色系境界線 */
  border-bottom: none !important; /* 下部境界線を除去してサブスロットと連結 */
  border-radius: 8px 8px 0 0 !important; /* 上部のみ角丸 */
  position: relative !important;
  z-index: 3 !important; /* サブスロットエリアの上に表示 */
  margin-bottom: 0 !important; /* 下部マージンを除去 */
  transition: all 0.3s ease !important;
  box-shadow: 0 -2px 8px rgba(79, 195, 247, 0.5) !important; /* 💧 水色系上部シャドウで浮遊感 */
}

/* 🎨 親スロット用の拡張背景（包み込み効果） */
.slot-container.active-parent-slot::before {
  content: '' !important;
  position: absolute !important;
  top: -5px !important;
  left: -5px !important;
  right: -5px !important;
  bottom: -5px !important;
  background: linear-gradient(180deg, rgba(173, 216, 230, 0.3) 0%, rgba(173, 216, 230, 0.1) 100%) !important;
  border: 2px solid rgba(135, 206, 235, 0.6) !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: none !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 展開中のサブスロットエリア全体のスタイル */
.slot-wrapper.active-subslot-area {
  background: rgba(200, 230, 250, 0.95) !important; /* 💧 親と同じ水色背景 */
  border: 2px solid #4FC3F7 !important; /* 💧 水色系境界線 */
  border-top: none !important; /* 上部境界線を除去して親スロットと連結 */
  border-radius: 0 0 12px 12px !important; /* 下部のみ角丸 */
  position: relative !important;
  margin-top: -2px !important; /* 親スロットとの境界線を重複させる */
  padding: 20px !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
  box-shadow: 
    0 -2px 4px rgba(79, 195, 247, 0.5),  /* 💧 水色系上向きの影で連結感を演出 */
    0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 🎨 サブスロットエリア用の拡張背景（包み込み効果の続き） */
/* ⚠️ 2026-01-04: 青い影の原因だった水色系を黄色い帯に置き換え */
.slot-wrapper.active-subslot-area::before {
  content: '' !important;
  position: absolute !important; /* 🎯 slot-wrapper基準の相対位置 */
  left: -100vw !important; /* 🎯 左にウインドウ幅分伸ばす */
  right: -100vw !important; /* 🎯 右にウインドウ幅分伸ばす */
  top: 355px !important; /* 🎯 英語テキストの位置 */
  height: 30px !important; /* サブslot-phraseの高さ */
  background: #FFF9C4 !important; /* 🎯 黄色い帯 */
  border: none !important; /* 水色系borderを無効化 */
  border-radius: 0 !important;
  z-index: 999 !important; /* 🎯 全要素より前、テキスト(1000)より後ろ */
  pointer-events: none !important;
}

/* サブスロットラベルのタブ風デザイン */
.subslot-label.tab-style {
  background: rgba(254, 243, 199, 0.95) !important; /* 🌻 統一された濃い黄色背景 */
  color: #78716c !important; /* 🌻 薄い黄色背景に温かみのあるブラウン文字 */
  font-weight: bold !important;
  padding: 8px 16px !important;
  border-radius: 8px 8px 0 0 !important;
  margin: -20px -20px 15px -20px !important; /* ラベルをコンテナの端まで拡張 */
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  font-size: 14px !important;
  position: relative !important;
}

/* タブ連結アニメーション */
@keyframes tabConnect {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slot-container.active-parent-slot,
.slot-wrapper.active-subslot-area {
  animation: tabConnect 0.3s ease-out !important;
}

/* ホバー効果で親スロットのリフトアップ */
.slot-container.active-parent-slot:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 -4px 12px rgba(135, 206, 235, 0.4) !important;
}

/* サブスロット内の個別スロットの整列 */
.slot-wrapper.active-subslot-area .slot-container {
  margin-bottom: 15px !important;
}

/* タブ連結時の制御パネルのスタイル統一 */
.subslot-control-panel.tab-connected {
  background: rgba(254, 243, 199, 0.95) !important; /* 🌻 統一された濃い黄色背景 */
  border: 1px solid #f59e0b !important; /* 🌻 黄色系境界線 */
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4) !important; /* 🌻 より濃い黄色系シャドウ */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slot-wrapper.active-subslot-area {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
  
  .slot-container.active-parent-slot::before,
  .slot-wrapper.active-subslot-area::before {
    left: -3px !important;
    right: -3px !important;
  }
}

/* =================================================================== */
/* 🔗 エクセル風タブ連結システム 終了 */
/* =================================================================== */

/* 学習データ保存確認ボタンのスタイル */
.save-confirmation {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
  text-align: center;
}

.save-confirmation p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #333;
  font-weight: bold;
}

.save-confirmation button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: bold;
}

.save-confirmation button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.save-confirmation button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

#save-yes-btn:hover {
  background: #218838 !important;
}

#save-no-btn:hover {
  background: #5a6268 !important;
}

/* =====================================
   🔍 手動ズーム・縮小機構スタイル
   ===================================== */

/* ズームスライダーのカスタムスタイル */
#zoomSlider {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #FF5722 0%, #FFC107 50%, #4CAF50 100%);
  outline: none;
  border-radius: 10px;
  height: 6px;
}

#zoomSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

#zoomSlider::-webkit-slider-thumb:hover {
  background: #1976D2;
  transform: scale(1.1);
}

#zoomSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ズーム適用時のコンテナ調整 */
.slot-wrapper {
  transition: transform 0.3s ease;
  transform-origin: top left;
  position: relative; /* 🎯 Phase 2: 擬似要素の基準位置 */
  /* ズーム時の幅制限を撤去してブラウザ幅に適応 */
  max-width: none;
  width: 100%;
}

/* ズーム時のオーバーフロー対応 */
.zoomed-container {
  overflow-x: visible; /* ズーム時は横スクロールを無効化 */
  overflow-y: visible;
  width: 100%;
}

/* ズーム値表示のスタイル強化 */
#zoomValue {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: color 0.2s ease;
}

/* ズームリセットボタンのホバー効果 */
#zoomResetButton:hover {
  background-color: #F57C00 !important;
  transform: scale(1.05);
}

#zoomResetButton:active {
  transform: scale(0.95);
}

/* 高ズーム時の調整（150%以上） */
.slot-wrapper[style*="scale(1.5)"] {
  margin-bottom: -50px;
}

/* 低ズーム時の調整（50%以下） */
.slot-wrapper[style*="scale(0.5)"] {
  margin-bottom: 50px;
}

/* ズーム時のスクロールヒント */
.zoom-scroll-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(33, 150, 243, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.zoom-scroll-hint.show {
  opacity: 1;
}

/* レスポンシブ対応：小画面でのズームコントローラー */
@media (max-width: 768px) {
  #zoomSlider {
    width: 60px;
  }
  
  #zoomValue {
    min-width: 30px;
    font-size: 10px;
  }
  
  #zoomResetButton {
    padding: 1px 4px;
    font-size: 9px;
  }
}

/* デバッグ用：ズーム境界表示 */
.debug-zoom-bounds {
  outline: 2px dashed rgba(255, 0, 0, 0.3);
  outline-offset: 2px;
}

/* 📚 解説システム用モーダルスタイル */
.explanation-modal {
  display: none;
  position: fixed;
  z-index: 15000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.explanation-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.explanation-modal-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 700px;
  max-height: 80vh;
  width: 90%;
  overflow: hidden;
  transform: scale(0.7);
  transition: transform 0.3s ease;
}

.explanation-modal.show .explanation-modal-content {
  transform: scale(1);
}

.explanation-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.explanation-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.explanation-close {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.explanation-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.explanation-modal-body {
  padding: 20px;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
  line-height: 1.6;
  font-size: 14px;
}

.explanation-modal-body h4 {
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 2px solid #667eea;
  padding-bottom: 5px;
}

.explanation-modal-body p {
  margin-bottom: 15px;
  color: #555;
}

.explanation-modal-body ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.explanation-modal-body li {
  margin-bottom: 8px;
  color: #555;
}

.explanation-modal-body strong {
  color: #333;
  font-weight: bold;
}

.explanation-modal-body code {
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #d63384;
}

/* 解説ボタンのスタイル */
.explanation-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 15px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.explanation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

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

/* ========================================= */
/* 🎨 PC版フロートメニュー：金属的シルバー背景 */
/* ========================================= */

/* PC版フロートメニューに金属的シルバーグラデーション背景を追加 */
#navigation-float-menu {
  /* 🎨 金属的シルバーグラデーション背景 */
  background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 25%, #c8c8c8 50%, #d0d0d0 75%, #e8e8e8 100%) !important;
  border: 1px solid #b0b0b0 !important; /* シルバーボーダー追加 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important; /* 少し強めのシャドウ */
}

/* ========================================= */
/* 🎯 オンボーディング・チュートリアル拡張スタイル */
/* ========================================= */

/* 比較デモスタイル */
.comparison-demo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-container {
  display: flex;
  gap: 40px;
  max-width: 800px;
  width: 90%;
}

.method {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.traditional-method {
  border: 3px solid #ff6b6b;
}

.rephrase-method {
  border: 3px solid #4CAF50;
}

.method h4 {
  margin-bottom: 15px;
  font-size: 18px;
}

.traditional-method h4 {
  color: #ff6b6b;
}

.rephrase-method h4 {
  color: #4CAF50;
}

.demo-area {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.6;
}

.illustration {
  font-size: 24px;
  margin: 10px 0;
}

.method button {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.method button:hover {
  transform: translateY(-2px);
}

/* 思考バブル */
.thinking-bubble {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 15px 25px;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: bubbleAppear 0.5s ease;
}

.thinking-bubble.traditional {
  background: linear-gradient(45deg, #ff6b6b, #ee5a52);
}

.thinking-bubble.direct {
  background: linear-gradient(45deg, #4CAF50, #45a049);
}

.thinking-bubble.problem {
  background: linear-gradient(45deg, #f44336, #d32f2f);
}

.thinking-bubble.solution {
  background: linear-gradient(45deg, #2196F3, #1976D2);
}

.thinking-bubble.magic {
  background: linear-gradient(45deg, #9C27B0, #7B1FA2);
}

.thinking-bubble.instruction {
  background: linear-gradient(45deg, #FF9800, #F57C00);
}

@keyframes bubbleAppear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* 統計アニメーション */
.stats-animation {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  gap: 30px;
  background: white;
  padding: 20px 30px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: statsSlideIn 0.6s ease;
}

.stat-item {
  text-align: center;
  font-weight: bold;
}

.stat-value {
  font-size: 28px;
  margin-bottom: 5px;
  animation: countUp 1s ease 0.5s both;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

@keyframes statsSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* シャッフルビジュアル効果 */
.shuffle-visual-effect {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  gap: 15px;
}

.shuffle-visual-effect .card {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  transition: all 0.5s ease;
}

.shuffle-visual-effect.shuffling .card:nth-child(1) {
  transform: translateX(100px) rotate(10deg);
}

.shuffle-visual-effect.shuffling .card:nth-child(2) {
  transform: translateX(-50px) rotate(-5deg);
}

.shuffle-visual-effect.shuffling .card:nth-child(3) {
  transform: translateX(-150px) rotate(15deg);
}

/* 改善されたオンボーディングモーダル */
.onboarding-modal .onboarding-content {
  max-width: 500px;
  padding: 25px 30px;
}

.onboarding-modal .onboarding-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
}

.onboarding-modal .onboarding-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 20px;
}

.onboarding-modal .onboarding-content strong {
  color: #4CAF50;
  font-weight: 700;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .comparison-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .stats-animation {
    flex-direction: column;
    gap: 15px;
  }
  
  .thinking-bubble {
    left: 10px;
    right: 10px;
    transform: none;
    width: calc(100% - 20px);
    text-align: center;
  }
}

/* 🆕 親スロット個別ボタン用のスタイル */
.upper-slot-phrase-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 100%; /* Gridセルを強制的に広げる */
  justify-self: stretch; /* Grid内で横幅を最大限に広げる */
  grid-row: 4; /* Grid構造に統合 */
  grid-column: 1;
}

.upper-slot-phrase-row .slot-phrase {
  flex: 1 !important;
  min-width: 0 !important;
  /* width: auto を削除 → flex: 1が正常に機能 */
  grid-row: unset !important; /* Gridを無効化 */
  grid-column: unset !important;
}

.upper-slot-toggle-btn {
  flex-shrink: 0;
  position: relative; /* 🎯 z-indexを有効にするためposition必須 */
  z-index: 1001 !important; /* 🎯 黄色い帯(999)・英語テキスト(1000)より手前 */
}

/* 🎯 サブスロット個別英語OFFボタン */
.subslot-toggle-btn {
  position: relative; /* 🎯 z-indexを有効にするためposition必須 */
  z-index: 1001 !important; /* 🎯 黄色い帯(999)・英語テキスト(1000)より手前 */
}