* { box-sizing: border-box; }

/* ── 테마 변수 (gto-styles.css와 동일 패턴) ── */
:root {
  --bg-gradient-start: #f0f4ff;
  --bg-gradient-end:   #e4ecff;
  --text-color:        #1f2937;
  --text-muted:        #6b7280;
  --container-bg:      #ffffff;
  --container-shadow:  rgba(31, 41, 55, 0.1);
  --section-bg:        #f8faff;
  --section-border:    #e5e7eb;
  --card-bg:           #ffffff;
  --card-border:       #d1d5db;
  --card-shadow:       rgba(15, 23, 42, 0.1);
  --range-hero:        #fbbf24;
  --range-text:        #1f2937;
  --cell-empty:        #eef1f6;
  /* 액션 색상 */
  --act-raise:         #ef4444;
  --act-call:          #22c55e;
  --act-fold:          #cbd5e1;
  --badge-good-bg:     #dcfce7;
  --badge-good-text:   #16a34a;
  --badge-leak-bg:     #fee2e2;
  --badge-leak-text:   #dc2626;
  --badge-mix-bg:      #fef3c7;
  --badge-mix-text:    #b45309;
  --accent:            #2563eb;
  --accent-hover:      #1d4ed8;
}

:root.dark {
  --bg-gradient-start: #0f172a;
  --bg-gradient-end:   #1e293b;
  --text-color:        #e2e8f0;
  --text-muted:        #94a3b8;
  --container-bg:      #1e293b;
  --container-shadow:  rgba(0, 0, 0, 0.4);
  --section-bg:        #273548;
  --section-border:    #334155;
  --card-bg:           #334155;
  --card-border:       #475569;
  --card-shadow:       rgba(0, 0, 0, 0.3);
  --range-hero:        #f59e0b;
  --range-text:        #f1f5f9;
  --cell-empty:        #334155;
  --act-raise:         #f05252;
  --act-call:          #34d399;
  --act-fold:          #475569;
  --badge-good-bg:     #14532d;
  --badge-good-text:   #4ade80;
  --badge-leak-bg:     #450a0a;
  --badge-leak-text:   #f87171;
  --badge-mix-bg:      #422006;
  --badge-mix-text:    #fbbf24;
  --accent:            #3b82f6;
  --accent-hover:      #2563eb;
}

/* ── 베이스 ── */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  color: var(--text-color);
  padding: 2rem 1rem;
  transition: background 0.3s, color 0.3s;
}

/* ── 테마 토글 ── */
.theme-toggle {
  position: fixed; top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--container-bg);
  box-shadow: 0 2px 8px var(--container-shadow);
  font-size: 1.3rem; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 10;
}
.theme-toggle:hover { box-shadow: 0 4px 14px var(--container-shadow); }

/* ── 컨테이너 ── */
.container {
  max-width: 720px;
  margin: 0 auto;
  background: var(--container-bg);
  border-radius: 20px;
  box-shadow: 0 12px 40px var(--container-shadow);
  padding: 2rem;
  transition: background 0.3s;
}

/* ── 헤더 + 내비 ── */
.trainer-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;
}
.trainer-header h1 { margin: 0; font-size: 1.6rem; }
.top-nav { display: flex; gap: 0.5rem; }
.top-nav a {
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  color: var(--text-muted);
  background: var(--section-bg);
  border: 1px solid var(--section-border);
  border-radius: 999px; padding: 0.3rem 0.85rem;
  transition: background 0.2s, color 0.2s;
}
.top-nav a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ── 탭 ── */
.tab-bar { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; }
.tab-btn {
  flex: 1; border: 1px solid var(--section-border);
  background: var(--section-bg); color: var(--text-muted);
  border-radius: 10px; padding: 0.6rem; font-size: 0.95rem;
  font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── 데이터 경고 ── */
.data-warning {
  background: var(--badge-mix-bg); color: var(--badge-mix-text);
  border-radius: 10px; padding: 0.85rem 1rem;
  font-size: 0.9rem; margin-bottom: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--badge-mix-text) 22%, transparent);
}
.data-warning[data-tone="error"] {
  background: var(--badge-leak-bg);
  color: var(--badge-leak-text);
  border-color: color-mix(in srgb, var(--badge-leak-text) 22%, transparent);
}
.data-warning-title {
  display: block;
  margin-bottom: 0.35rem;
}
.data-warning-text {
  margin: 0;
  line-height: 1.5;
}
.data-warning-list {
  margin: 0.65rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.45;
}
.data-warning code { font-size: 0.85rem; }

/* ── 뷰어 컨트롤 ── */
.viewer-controls { margin-bottom: 0.75rem; }
.select-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 0.35rem;
}
.range-select {
  width: 100%; padding: 0.6rem 0.75rem;
  border-radius: 10px; border: 1px solid var(--card-border);
  background: var(--card-bg); color: var(--text-color);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.range-desc {
  font-size: 0.85rem; color: var(--text-muted);
  line-height: 1.5; margin: 0 0 1rem;
}

/* ── 통계 ── */
.range-stats { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.stat-box {
  flex: 1; background: var(--section-bg);
  border: 1px solid var(--section-border); border-radius: 10px;
  padding: 0.6rem; text-align: center;
}
.stat-label {
  display: block; font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; font-weight: 600; margin-bottom: 0.2rem;
}
.stat-value { font-size: 1.1rem; font-weight: 800; }

/* ── 범례 ── */
.range-legend {
  display: flex; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.legend-item {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--text-muted);
}
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }

/* ── 13x13 매트릭스 ── */
.range-matrix {
  display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px;
  margin-bottom: 0.85rem;
}
.range-cell {
  position: relative; aspect-ratio: 1; border-radius: 3px;
  overflow: hidden; cursor: pointer;
  background: var(--cell-empty);
  border: 1px solid transparent;
}
/* 빈도 밴드: 수직으로 쌓임 (위→아래) */
.cell-bands {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.cell-band { width: 100%; }
.cell-band.raise { background: var(--act-raise); }
.cell-band.call  { background: var(--act-call); }
.cell-band.fold  { background: var(--act-fold); }
.cell-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 800;
  color: var(--range-text);
  text-shadow: 0 0 2px rgba(255,255,255,0.55);
  pointer-events: none;
}
:root.dark .cell-text { text-shadow: 0 0 2px rgba(0,0,0,0.6); }
.range-cell.hero-hand { outline: 2px solid var(--range-hero); outline-offset: -1px; z-index: 2; }
.range-cell.selected  { outline: 2px solid var(--accent); outline-offset: -1px; z-index: 3; }

/* ── 셀 상세 ── */
.cell-detail {
  background: var(--section-bg); border: 1px solid var(--section-border);
  border-radius: 10px; padding: 0.7rem 0.9rem;
  font-size: 0.88rem; color: var(--text-muted); min-height: 2.5rem;
}
.cell-detail strong { color: var(--text-color); }

/* ── 트레이너 ── */
.trainer-scorebar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--section-bg); border: 1px solid var(--section-border);
  border-radius: 10px; padding: 0.6rem 1rem; margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.score-item strong { color: var(--accent); }
.score-note {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.spot-card {
  background: var(--section-bg); border: 1px solid var(--section-border);
  border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem;
  text-align: center;
}
.spot-line { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
.hero-cards { display: flex; gap: 0.6rem; justify-content: center; }
.hero-card {
  width: 64px; height: 90px; border-radius: 10px;
  background: var(--card-bg); border: 2px solid var(--accent);
  box-shadow: 0 6px 16px var(--card-shadow);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.hc-rank { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.hc-suit { font-size: 1.1rem; line-height: 1; }
.hc-rank.red, .hc-suit.red { color: #dc2626; }
.hc-rank.black, .hc-suit.black { color: var(--text-color); }
.hero-label { margin: 0.7rem 0 0; font-weight: 800; font-size: 1.05rem; }

.trainer-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 1.25rem;
}
.t-action-btn {
  border: 0; border-radius: 10px; padding: 0.7rem 1.5rem;
  font-size: 0.95rem; font-weight: 700; color: #fff; cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.t-action-btn:active { transform: scale(0.96); }
.t-action-btn:disabled { opacity: 0.55; cursor: default; }
.t-action-btn.raise { background: var(--act-raise); }
.t-action-btn.call  { background: var(--act-call); }
.t-action-btn.fold  { background: #6b7280; }

.trainer-feedback {
  background: var(--section-bg); border: 1px solid var(--section-border);
  border-radius: 14px; padding: 1.25rem;
}
.tf-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.feedback-badge {
  border-radius: 999px; padding: 0.2rem 0.7rem;
  font-size: 0.78rem; font-weight: 700;
}
.feedback-badge.good { background: var(--badge-good-bg); color: var(--badge-good-text); }
.feedback-badge.leak { background: var(--badge-leak-bg); color: var(--badge-leak-text); }
.feedback-badge.mix  { background: var(--badge-mix-bg);  color: var(--badge-mix-text); }
.tf-title { font-weight: 700; font-size: 0.95rem; }
.tf-award {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}
.tf-explain { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 0.9rem; }
.tf-freqs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.freq-chip {
  font-size: 0.8rem; font-weight: 700; color: #fff;
  border-radius: 8px; padding: 0.25rem 0.6rem;
}
.freq-chip.raise { background: var(--act-raise); }
.freq-chip.call  { background: var(--act-call); }
.freq-chip.fold  { background: #6b7280; }

.next-btn {
  width: 100%; border: 0; border-radius: 10px; padding: 0.7rem;
  background: var(--accent); color: #fff; font-size: 1rem;
  font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.next-btn:hover { background: var(--accent-hover); }

/* ── 반응형 ── */
@media (max-width: 480px) {
  .container { padding: 1.25rem; }
  .range-stats { flex-wrap: wrap; }
  .trainer-scorebar { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
  .tf-header { flex-wrap: wrap; }
  .tf-award {
    width: 100%;
    margin-left: 0;
  }
  .cell-text { font-size: 0.42rem; }
  .hero-card { width: 54px; height: 76px; }
}