/* ==========================================
   🎨 practice-log-styles.css
   役割: DQ3 型セーブシステムのスタイル
   ========================================== */

/* ========== モーダル基本 ========== */

.practice-log-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.practice-log-modal.open {
  display: flex;
}

.practice-log-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.practice-log-body {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

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

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ========== ホームメニュー ========== */

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.menu-btn:hover {
  background: var(--bg3);
  border-color: #4a7c9e;
}

.menu-btn:active {
  transform: scale(0.98);
}

.menu-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}

.menu-subtitle {
  font-size: 12px;
  color: var(--mute);
}

/* ========== モーダルヘッダー ========== */

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  color: var(--mute);
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ========== 既存ポップアップ互換 ========== */

.ex-practice-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}

.ex-practice-modal.open {
  display: flex;
}

.ex-practice-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.ex-practice-modal-body {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 980px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

.ex-practice-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  color: var(--mute);
  transition: all 0.2s;
  z-index: 1000;
}

.ex-practice-modal-close:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ========== ステータスページ(ハイブリッド3パネル) ========== */

.status-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  /* body(flex 縦・max-height・overflow-y:auto)の中で縮まないようにし、
     実寸を保って body 側を縦スクロールさせる(下部コンテンツの見切れ防止) */
  flex-shrink: 0;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
}

.status-header h2 {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ヘッダー右側のロード/セーブ(タイトルと同じ一段に収める) */
.status-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.hdr-btn {
  padding: 5px 12px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg2);
  color: var(--text);
  white-space: nowrap;
}

.hdr-btn.primary {
  background: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
}

/* メインコンテンツ: モバイル1カラム */
.status-content {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.status-panel {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
}

.panel-header {
  margin-bottom: 1rem;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 0.75rem;
}

.panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Panel 1: Overview */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-card.wide {
  grid-column: span 2;
}

.stat-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  text-align: center;
}

.stat-label {
  font-size: 10px;
  color: var(--mute);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.stat-unit {
  font-size: 10px;
  color: var(--mute);
}

.stat-detail {
  font-size: 9px;
  color: var(--mute);
  margin-top: 0.25rem;
}

.shape-coverage-section {
  margin-bottom: 1.5rem;
}

.shape-coverage-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.25rem 0;
}

.section-subtitle {
  font-size: 10px;
  color: var(--mute);
  margin: 0 0 0.75rem 0;
}

/* カバレッジ系セクション(12キー / CAGEDシェイプ 共通) */
.cov-section { margin-bottom: 1.25rem; }
.cov-section h4 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 0.25rem 0; }

/* 12キー: 横4×縦3のヒートマップ・タイル(練習量で色が濃くなる) */
/* Mission タブ(レベルアップ・ゲート7個) */
.mission-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.mission-card.mission-active { border-color: rgba(255,213,79,0.5); }
.mission-card.mission-locked { opacity: 0.65; }
.mission-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--mute); margin-bottom: 4px; }
.mission-no { font-weight: 700; letter-spacing: .5px; }
.mission-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.mission-cond { font-size: 11px; color: var(--mute); margin-bottom: 6px; line-height: 1.4; }
.mission-prog { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mission-prog-txt { font-size: 11px; color: #FFD54F; font-weight: 700; white-space: nowrap; }

/* 指定エクサ「クリア状況を見る」ボタン */
.desig-detail-btn {
  width: 100%; margin: 6px 0 2px; padding: 7px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: rgba(255,213,79,0.12); color: #FFD54F;
  border: 1px solid rgba(255,213,79,0.45); border-radius: 6px;
}
.desig-detail-btn:hover { background: rgba(255,213,79,0.22); }

/* balance 円グラフ(12キー / CAGEDシェイプ) */
.balance-pie-wrap { display: flex; justify-content: center; padding: 4px 0; }
.balance-pie-wrap svg { display: block; }
.balance-gaps { font-size: 11px; color: var(--mute); text-align: center; margin-top: 4px; line-height: 1.4; }

.key-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.key-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 2px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  transition: background 0.3s ease;
}
.key-tile { position: relative; overflow: hidden; }
.key-tile.active { border-color: rgba(76, 175, 80, 0.5); }
.key-tile.key-cleared { border-color: #FFD54F; box-shadow: 0 0 4px rgba(255,213,79,0.6); }
.key-tile-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.1; }
.key-tile-amt { font-size: 9px; color: var(--mute); }
.key-tile.active .key-tile-amt { color: #fff; }
/* 到達(mastered)= タイル下辺の金バー。width = 到達シェイプ/5 */
.key-tile-mastered { position: absolute; left: 0; bottom: 0; height: 3px; background: #FFD54F; transition: width 0.3s ease; }

/* 最小化した基本統計(1行) */
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  color: var(--mute);
  padding-top: 0.5rem;
  border-top: 0.5px solid var(--border);
}
.mini-stats b { color: var(--text); font-size: 12px; }

.shape-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shape-bar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shape-bar-item label {
  font-size: 12px;
  color: var(--text);
  width: 80px;
  flex-shrink: 0;
}

.bar-container {
  position: relative;
  flex: 1;
  height: 12px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  border: 0.5px solid var(--border);
}

.bar-fill {
  height: 100%;
  background: #4CAF50;
  transition: width 0.3s ease;
  border-radius: 3px;
}

/* 到達(mastered)= 練習バーの上に重ねる金バー。width = 到達キー/12 */
.bar-fill-mastered {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #FFD54F;
  transition: width 0.3s ease;
  border-radius: 3px;
}

.bar-fill.coverage-low { background: #F44336; }
.bar-fill.coverage-mid { background: #FF9800; }
.bar-fill.coverage-high { background: #4CAF50; }

.bar-percentage {
  font-size: 10px;
  color: var(--mute);
  width: 45px;
  text-align: right;
  flex-shrink: 0;
}

.bar-percentage.critical {
  color: #FF6B6B;
  font-weight: 600;
}

.recommendation-section {
  background: var(--bg);
  border-radius: 6px;
  padding: 0.75rem;
  border: 0.5px solid var(--border);
}

.recommendation-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: #FF6B6B;
  margin: 0 0 0.5rem 0;
}

.recommendation-box {
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}

/* Panel 2: Exercises */
.exercise-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tab-btn {
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--mute);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tab-btn.active {
  color: #4CAF50;
  border-color: #4CAF50;
  font-weight: 600;
}

.exercises-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 500px;
  overflow-y: auto;
}

.exercise-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.exercise-card:hover {
  border-color: var(--text);
}

.exercise-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.exercise-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.exercise-toggle {
  font-size: 12px;
  color: var(--mute);
}

.exercise-card.expanded .exercise-toggle {
  transform: rotate(180deg);
}

.exercise-card-coverage {
  font-size: 11px;
  color: var(--mute);
}

.exercise-card.expanded .exercise-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.exercise-card.collapsed .exercise-details {
  display: none;
}

.shape-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.shape-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
}

.shape-item-label {
  width: 40px;
  color: var(--mute);
}

.shape-item-bar {
  flex: 1;
  height: 8px;
  background: var(--bg2);
  border-radius: 2px;
  overflow: hidden;
}

.shape-item-bar-fill {
  height: 100%;
  background: #4CAF50;
  border-radius: 2px;
}

.shape-item-percent {
  width: 40px;
  text-align: right;
  color: var(--mute);
  font-size: 9px;
}

/* Panel 3: Sessions */
.sessions-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
}

.session-item {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem;
  font-size: 11px;
}

.session-item-clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.session-item-clickable:hover { border-color: #4a7c9e; background: var(--bg2); }

/* セッション詳細モーダルの行 */
.sdetail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
}
.sdetail-k { color: var(--mute); flex-shrink: 0; }
.sdetail-v { color: var(--text); text-align: right; word-break: break-word; }

.session-date {
  color: var(--mute);
  font-size: 9px;
  margin-bottom: 0.25rem;
}

.session-info {
  color: var(--text);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.session-meta {
  color: var(--mute);
  font-size: 9px;
}

.session-notes {
  color: var(--mute);
  font-size: 9px;
  margin-top: 0.25rem;
  font-style: italic;
}

.show-more-btn {
  background: var(--bg);
  border: 0.5px solid var(--border);
  color: var(--mute);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  margin-top: 0.75rem;
  width: 100%;
}

.show-more-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

/* レベル / EXP バナー(基本統計の先頭) */
.level-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
}
.level-badge { font-size: 12px; color: var(--mute); white-space: nowrap; }
.level-badge b { font-size: 22px; color: #ffca28; }
.level-bar {
  flex: 1;
  height: 10px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.level-bar-fill { height: 100%; background: #ffca28; border-radius: 5px; transition: width 0.3s ease; }
.level-meta { font-size: 9px; color: var(--mute); white-space: nowrap; text-align: right; line-height: 1.3; }

/* 自己評価トースト(Play区間終了直後・スキップ可) */
.selfeval-toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 10001;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100vw - 24px);
  animation: slideUp 0.2s ease-out;
}
.selfeval-q { font-size: 12px; color: var(--text); text-align: center; }
.selfeval-btns { display: flex; gap: 6px; align-items: center; }
.selfeval-btns button {
  flex: 1;
  padding: 9px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.selfeval-btns button:hover { border-color: #4a7c9e; }
.selfeval-btns .selfeval-skip { flex: 0 0 auto; width: 30px; padding: 9px 0; color: var(--mute); font-weight: 400; }

/* Ex.60 専用: できなかったキーのチェック(12キー・複数選択) */
.ex60-fail-keys { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 280px; }
.ex60-fail-key {
  padding: 5px 7px;
  min-width: 30px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ex60-fail-key:hover { border-color: #ff5555; }
.ex60-fail-key.on { background: #ff5555; border-color: #ff5555; color: #fff; }

/* 練習前の空状態バナー */
.status-empty {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.7;
}

/* スマホ縦(〜767px): コンパクト表示(はみ出し防止・BHページ同等の収まり) */
@media (max-width: 767px) {
  .status-container { max-width: 360px; margin: 0 auto; }
  .status-header { padding: 0.75rem; }
  .status-header h2 { font-size: 16px; }
  .status-content { gap: 0.75rem; padding: 0.75rem; }
  .status-panel { padding: 0.75rem; }
  .panel-header { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }
  .panel-header h3 { font-size: 13px; }
  .stats-cards { gap: 0.5rem; margin-bottom: 1rem; }
  .stat-card { padding: 0.5rem; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 9px; }
  .stat-detail { font-size: 8px; }
  .shape-coverage-section { margin-bottom: 1rem; }
  .shape-bar-item label { width: 60px; font-size: 11px; }
  .bar-container { height: 10px; }
  .bar-percentage { width: 40px; font-size: 9px; }
  .exercise-tabs { gap: 0.4rem; padding-bottom: 0.3rem; }
  .tab-btn { font-size: 10px; padding: 0.3rem 0.5rem; }
  .exercises-container { max-height: 300px; }
  .exercise-card { padding: 0.5rem; }
  .exercise-card-title { font-size: 11px; }
  .exercise-card-coverage { font-size: 10px; }
  .sessions-container { max-height: 250px; }
  .session-item { padding: 0.4rem; }
  .session-info { font-size: 10px; }
  .session-date, .session-meta, .session-notes { font-size: 8px; }
  /* ヘッダーのロード/セーブをコンパクトに(タイトルと同じ一段に収める) */
  .status-header h2 { font-size: 15px; }
  .hdr-btn { padding: 4px 8px; font-size: 11px; }
}

/* PC レイアウト(768px+): 3カラム */
@media (min-width: 768px) {
  .status-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.25rem;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .stat-card.wide {
    grid-column: span 1;
  }

  .exercises-container,
  .sessions-container {
    max-height: 600px;
  }
}

/* ========== 入力フィールド ========== */

input[type="text"],
textarea {
  font-family: inherit;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  color: var(--text);
  transition: border-color 0.2s;
}

input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: #4a7c9e;
  box-shadow: 0 0 0 2px rgba(74, 124, 158, 0.1);
}

input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--mute);
}

/* ========== ボタン ========== */

button {
  font-family: inherit;
  transition: all 0.2s;
}

button:active {
  transform: scale(0.98);
}

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

/* ========== 通知 ========== */

.practice-log-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  z-index: 10000;
  animation: slideUp 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ========== レスポンシブ ========== */

@media (max-width: 600px) {
  .practice-log-body {
    max-width: calc(100vw - 32px);
    padding: 16px;
  }
  
  .ex-practice-modal-body {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 32px);
  }

  .menu-btn {
    padding: 12px;
  }
  
  .menu-title {
    font-size: 14px;
  }
  
  .menu-subtitle {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .practice-log-body {
    max-width: calc(100vw - 16px);
    padding: 12px;
    border-radius: 8px;
  }
  
  .ex-practice-modal-body {
    max-width: calc(100vw - 8px);
    border-radius: 8px;
  }

  .menu-btn {
    padding: 10px;
    gap: 2px;
  }
  
  .menu-title {
    font-size: 13px;
  }
  
  .menu-subtitle {
    font-size: 10px;
  }
  
  input[type="text"],
  textarea {
    font-size: 16px;  /* iOS の自動ズーム防止 */
  }
}

/* ========== 横画面(高さが低い)コンパクト化 ========== */
/* スマホ横持ち等: 横は広いが縦が短い。3カラムは維持しつつ縦の余白を詰め、
   統計カードを横1列にして「シェイプ習得度」を折り返し上に出す。 */
@media (orientation: landscape) and (max-height: 600px) {
  .status-header { padding: 0.45rem 0.75rem; }
  .status-header h2 { font-size: 15px; }
  .status-content { gap: 0.75rem; padding: 0.75rem; align-items: start; }
  .status-panel { padding: 0.75rem; }
  .panel-header { margin-bottom: 0.6rem; padding-bottom: 0.5rem; }

  /* 統計カードを横1列(総練習時間 | セッション数 | 全体カバレッジ)に */
  .stats-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
  .stat-card.wide { grid-column: span 1; }
  .stat-card { padding: 0.45rem 0.35rem; }
  .stat-value { font-size: 16px; }
  .stat-detail { font-size: 8px; }

  .shape-coverage-section { margin-bottom: 0.75rem; }
  .shape-bars { gap: 0.4rem; }
  .recommendation-section { padding: 0.5rem; }

  /* 各列を独立スクロールにして、3つのヘッダーを常に見せる */
  .exercises-container { max-height: calc(100vh - 210px); }
  .sessions-container { max-height: calc(100vh - 210px); }

  .hdr-btn { padding: 4px 8px; font-size: 11px; }
}

/* ========== ダークモード対応 ========== */

body.dark .practice-log-body,
body.dark .ex-practice-modal-body {
  background: var(--bg);
  color: var(--text);
}

body.light .practice-log-body,
body.light .ex-practice-modal-body {
  background: #f5f5f5;
  color: #333;
  border-color: #ddd;
}

body.light .stat-card {
  background: #efefef;
  border-color: #ddd;
}

body.light .recommendation-section,
body.light .practice-log-notification {
  background: #f0f0f0;
  border-color: #ddd;
  color: #333;
}

body.light input[type="text"],
body.light textarea {
  background: #f5f5f5;
  border-color: #ddd;
  color: #333;
}

body.light input[type="text"]::placeholder,
body.light textarea::placeholder {
  color: #999;
}

body.light .menu-btn {
  background: #f0f0f0;
  border-color: #ddd;
  color: #333;
}

body.light .menu-btn:hover {
  background: #e5e5e5;
}

body.light .modal-close,
body.light .ex-practice-modal-close {
  background: #f0f0f0;
  border-color: #ddd;
  color: #666;
}

body.light .modal-close:hover,
body.light .ex-practice-modal-close:hover {
  background: #e5e5e5;
  color: #333;
}