/* =========================================
   BASE.CSS — Design System Foundation
   STATIZ PRO · KBO Analytics Platform
   Light Theme — inspired by existing KBO UI
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables ─────────────────────── */
:root {
  /* Core palette — from existing spring-app */
  --navy:          #0F1F3D;
  --navy-mid:      #1A3361;
  --navy-light:    #1e4080;
  --blue-accent:   #2563EB;
  --blue-light:    #DBEAFE;
  --blue-xlight:   #EFF6FF;
  --green-field:   #166534;
  --green-light:   #DCFCE7;
  --red-live:      #DC2626;
  --red-light:     #FEE2E2;
  --gold:          #D97706;
  --gold-light:    #FEF3C7;
  --purple:        #7C3AED;
  --purple-light:  #EDE9FE;

  /* Backgrounds */
  --bg:            #F0F4FF;
  --bg-card:       #FFFFFF;
  --bg-elevated:   #F8FAFF;
  --bg-hover:      #EEF2FF;
  --bg-input:      #FFFFFF;

  /* Borders */
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --border-accent: rgba(37,99,235,0.2);

  /* Text */
  --text-strong:   #0F172A;
  --text-mid:      #475569;
  --text-soft:     #94A3B8;
  --text-disabled: #CBD5E1;

  /* Shadows — from existing */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(15,31,61,0.10);
  --shadow-lg:  0 8px 32px rgba(15,31,61,0.16);
  --shadow-card: 0 2px 8px rgba(15,31,61,0.07);

  /* Layout */
  --header-h:      64px;
  --content-max:   1440px;
  --card-radius:   12px;
  --radius-sm:     8px;
  --radius-lg:     16px;

  /* Transitions */
  --transition:      0.15s ease;
  --transition-slow: 0.3s cubic-bezier(0.4,0,0.2,1);

  /* Compatibility aliases — used in game-detail & PVB modal */
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text-mid);
  --text-muted:     var(--text-soft);
  --border-subtle:  var(--border);
  --bg-secondary:   var(--bg-elevated);
  --accent-red:     var(--red-live);
}

/* ── Reset ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  background: var(--bg);
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── Typography ─────────────────────────── */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* ── Layout ─────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 16px;
}

.page-body {
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: 80px;
  min-height: 100vh;
}

/* ── Card ───────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Section card — white with top border accent */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.section-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.2px;
}

.section-card-title svg { color: var(--blue-accent); }

.section-card-body { padding: 18px; }

/* ── Section Label ──────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

/* ── Badge / Chip ───────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.badge-blue   { background: var(--blue-light);   color: var(--blue-accent); }
.badge-green  { background: var(--green-light);  color: var(--green-field); }
.badge-red    { background: var(--red-light);    color: var(--red-live); }
.badge-gold   { background: var(--gold-light);   color: var(--gold); }
.badge-purple { background: var(--purple-light); color: var(--purple); }
.badge-navy   { background: var(--navy);         color: #fff; }
.badge-gray   {
  background: #F1F5F9;
  color: var(--text-mid);
  border: 1px solid var(--border);
}

.badge-live {
  background: var(--red-live);
  color: #fff;
  animation: pulse-live 1.4s ease-in-out infinite;
}

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

/* ── Stat Card ──────────────────────────── */
.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  text-align: center;
}

.stat-card .stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 5px;
}

.stat-card .stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-card .stat-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
}

.stat-card .stat-delta.pos { color: var(--green-field); }
.stat-card .stat-delta.neg { color: var(--red-live); }

/* ── Progress Bar ───────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.progress-fill.blue   { background: linear-gradient(90deg, #1D4ED8, var(--blue-accent)); }
.progress-fill.green  { background: linear-gradient(90deg, #14532D, var(--green-field)); }
.progress-fill.red    { background: linear-gradient(90deg, #991B1B, var(--red-live)); }
.progress-fill.gold   { background: linear-gradient(90deg, #92400E, var(--gold)); }
.progress-fill.navy   { background: linear-gradient(90deg, var(--navy), var(--navy-mid)); }

/* ── Data Table ─────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  background: var(--bg-elevated);
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.data-table .td-highlight {
  color: var(--navy);
  font-weight: 700;
}

/* ── Divider ────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ── Tab Bar ────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.tab-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  transition: background var(--transition), color var(--transition);
  text-align: center;
}

.tab-btn.active {
  background: var(--blue-accent);
  color: #fff;
}

.tab-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text-mid);
}

/* ── Input ──────────────────────────────── */
.input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-strong);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}

.input:focus {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.input::placeholder { color: var(--text-soft); }

/* ── Button ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all var(--transition);
}

.btn-primary {
  background: var(--blue-accent);
  color: #fff;
}

.btn-primary:hover {
  background: #1D4ED8;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--bg-card);
  color: var(--text-mid);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--navy);
  border-color: var(--blue-accent);
}

/* ── Filter Btn ─────────────────────────── */
.filter-btn {
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.filter-btn:hover {
  background: var(--bg-hover);
  border-color: var(--blue-accent);
  color: var(--blue-accent);
}

.filter-btn.active {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #fff;
}

/* ── Grade Ring ─────────────────────────── */
.grade-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.grade-circle svg {
  position: absolute;
  top: 0; left: 0;
  transform: rotate(-90deg);
}

/* ── Scrollbar ──────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }

/* ── Tooltip ────────────────────────────── */
[data-tooltip] { position: relative; cursor: help; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 100;
}

[data-tooltip]:hover::after { opacity: 1; }

/* ── Animations ─────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.fade-in { animation: fadeIn 0.35s ease both; }

.skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, #e8eef8 50%, var(--bg) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 1024px) { .container { padding: 0 16px; } }
@media (max-width: 768px)  {
  .container { padding: 0 12px; }
  .page-body { padding-top: calc(var(--header-h) + 16px); padding-bottom: 60px; }
}