* {
  box-sizing: border-box;
}

/* ── 테마 변수 ── */
: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);
  --btn-fold:          #ef4444;
  --btn-fold-hover:    #dc2626;
  --btn-check:         #6b7280;
  --btn-check-hover:   #4b5563;
  --btn-bet:           #2563eb;
  --btn-bet-hover:     #1d4ed8;
  --btn-bet-active:    #1e40af;
  --feedback-bg:       #f0fdf4;
  --feedback-border:   #bbf7d0;
  --badge-good-bg:     #dcfce7;
  --badge-good-text:   #16a34a;
  --badge-leak-bg:     #fee2e2;
  --badge-leak-text:   #dc2626;
  --ev-positive:       #16a34a;
  --ev-negative:       #dc2626;
  --range-always:      #2563eb;
  --range-mixed:       #93c5fd;
  --range-check:       #e5e7eb;
  --range-hero:        #fbbf24;
  --range-text:        #374151;
}

: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);
  --btn-fold:          #ef4444;
  --btn-fold-hover:    #dc2626;
  --btn-check:         #64748b;
  --btn-check-hover:   #475569;
  --btn-bet:           #3b82f6;
  --btn-bet-hover:     #2563eb;
  --btn-bet-active:    #1d4ed8;
  --feedback-bg:       #0f2918;
  --feedback-border:   #166534;
  --badge-good-bg:     #14532d;
  --badge-good-text:   #4ade80;
  --badge-leak-bg:     #450a0a;
  --badge-leak-text:   #f87171;
  --ev-positive:       #4ade80;
  --ev-negative:       #f87171;
  --range-always:      #3b82f6;
  --range-mixed:       #1e40af;
  --range-check:       #334155;
  --range-hero:        #f59e0b;
  --range-text:        #cbd5e1;
}

/* ── 베이스 ── */
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: 640px;
  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;
}
.trainer-header h1 {
  margin: 0;
  font-size: 1.6rem;
}
.progress-badge {
  background: var(--section-bg);
  border: 1px solid var(--section-border);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tool-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tool-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;
}

.tool-nav a:hover {
  color: #fff;
  background: var(--btn-bet);
  border-color: var(--btn-bet);
}

/* ── 상황 바 ── */
.situation-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--section-bg);
  border: 1px solid var(--section-border);
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.situation-item { color: var(--text-muted); }
.situation-item strong { color: var(--text-color); }
.divider { color: var(--section-border); }
.street {
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── 섹션 공통 ── */
.section-label {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── 보드 카드 ── */
.board-section { margin-bottom: 1.25rem; }
.board-cards {
  display: flex;
  gap: 0.6rem;
}
.board-card {
  width: 56px;
  height: 76px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  box-shadow: 0 4px 10px var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background 0.3s, border-color 0.3s;
}
.bc-rank {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}
.bc-suit {
  font-size: 1rem;
  line-height: 1;
}
.bc-rank.red, .bc-suit.red { color: #dc2626; }
.bc-rank.black, .bc-suit.black { color: var(--text-color); }

/* ── 히어로 핸드 ── */
.hero-section { margin-bottom: 1rem; }
.hero-cards {
  display: flex;
  gap: 0.6rem;
}
.hero-card {
  width: 72px;
  height: 100px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 2px solid #2563eb;
  box-shadow: 0 6px 16px var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background 0.3s;
}
.hc-rank {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}
.hc-suit {
  font-size: 1.2rem;
  line-height: 1;
}
.hc-rank.red, .hc-suit.red { color: #dc2626; }
.hc-rank.black, .hc-suit.black { color: var(--text-color); }

/* ── 포지션 배지 ── */
.position-badge {
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ── 상대 액션 ── */
.opponent-action {
  margin: 1rem 0 0.85rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.opponent-action strong { color: var(--text-color); }

/* ── 액션 버튼 ── */
.action-section {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.action-btn {
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, transform 0.1s;
}
.action-btn:active { transform: scale(0.96); }
.fold-btn  { background: var(--btn-fold);  }
.fold-btn:hover  { background: var(--btn-fold-hover); }
.check-btn { background: var(--btn-check); }
.check-btn:hover { background: var(--btn-check-hover); }
.bet-group {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.bet-btn { background: var(--btn-bet); }
.bet-btn:hover { background: var(--btn-bet-hover); }
.bet-btn.active-size {
  background: var(--btn-bet-active);
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* ── 피드백 섹션 ── */
.feedback-section {
  background: var(--feedback-bg);
  border: 1.5px solid var(--feedback-border);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  transition: background 0.3s, border-color 0.3s;
}
.feedback-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.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-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.feedback-gto {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gto-action {
  font-size: 1.3rem;
  font-weight: 800;
}
.gto-freq {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.feedback-ev-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.ev-box {
  flex: 1;
  background: var(--container-bg);
  border: 1px solid var(--section-border);
  border-radius: 10px;
  padding: 0.6rem;
  text-align: center;
  transition: background 0.3s;
}
.ev-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
  font-weight: 600;
  text-transform: uppercase;
}
.ev-value {
  font-size: 1.15rem;
  font-weight: 800;
}
.ev-value.positive { color: var(--ev-positive); }
.ev-value.negative { color: var(--ev-negative); }
.feedback-explanation {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.1rem;
}
.next-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem;
  background: #2563eb;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.next-btn:hover { background: #1d4ed8; }

/* ── 레인지 매트릭스 ── */
.range-section { }
.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;
}
.always-bet-color { background: var(--range-always); }
.mixed-color      { background: var(--range-mixed); }
.check-color      { background: var(--range-check); border: 1px solid var(--card-border); }

.range-matrix {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
}
.range-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--range-check);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--range-text);
  cursor: default;
  transition: background 0.3s;
}
.range-cell.always-bet { background: var(--range-always); color: #fff; }
.range-cell.mixed      { background: var(--range-mixed); color: #fff; }
.range-cell.hero-hand  { outline: 2px solid var(--range-hero); outline-offset: 1px; }

/* ── 반응형 ── */
@media (max-width: 420px) {
  .container { padding: 1.25rem; }
  .feedback-ev-row { flex-direction: column; }
  .action-section { gap: 0.4rem; }
  .bet-group { gap: 0.3rem; }
}