.tracker-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
}

.tracker-header {
  min-height: 72px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.tracker-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  color: #f8fffd;
  background: var(--accent);
  border-radius: var(--r-md);
  font: 700 18px/1 'Geist', sans-serif;
}
.header-kicker { color: var(--accent); font-size: 11px; font-weight: 700; }
.tracker-header h1 { margin: 3px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
.reload-button {
  min-height: 44px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.reload-button:hover { color: var(--accent-strong); background: var(--accent-soft); }

.tracker-main { width: 100%; padding: 16px 18px 32px; }
.control-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 168px;
  gap: 10px 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.field { min-width: 0; }
.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
}
.field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: 600 13px/1 inherit;
}
.school-field .combo-display {
  min-height: 46px;
  height: auto;
  padding: 0 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: 13px;
}
.school-field .combo-menu { z-index: 20; }
.school-field .combo-search input,
.school-field .combo-item { min-height: 44px; }
.source-note,
.selection-meta {
  margin: 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.45;
}
.source-note { display: flex; align-items: center; gap: 5px; }
.source-note i { color: var(--accent); font-size: 15px; }
.selection-meta { text-align: right; }

.status-panel {
  min-height: 220px;
  margin-top: 14px;
  padding: 32px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--text-3);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}
.status-panel i { color: var(--accent); font-size: 30px; }
.status-panel strong { color: var(--text); font-size: 15px; }
.status-panel span { max-width: 440px; font-size: 12px; line-height: 1.55; }
.status-panel.loading i { animation: tracker-spin .8s linear infinite; }
@keyframes tracker-spin { to { transform: rotate(360deg); } }

.record-sheet {
  margin-top: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.table-scroll {
  width: 100%;
  max-height: calc(100vh - 240px);
  min-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
}
.record-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.record-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}
.record-table th {
  height: 52px;
  padding: 8px 10px;
  color: var(--text-2);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
}
.record-table td {
  height: 112px;
  padding: 9px;
  vertical-align: top;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.record-table tbody tr:last-child td { border-bottom: 0; }
.record-table th:last-child,
.record-table td:last-child { border-right: 0; }
.record-table tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); }

.student-column {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 126px;
  min-width: 126px;
  max-width: 126px;
  text-align: left !important;
  box-shadow: 1px 0 0 var(--border);
}
th.student-column { z-index: 5; background: var(--surface-3); }
td.student-column { padding: 13px 11px; background: var(--surface); }
.student-name { display: block; color: var(--text); font-size: 15px; font-weight: 800; }
.student-meta { display: block; margin-top: 5px; color: var(--text-3); font-size: 11px; }
.student-source { display: block; margin-top: 9px; color: var(--accent); font-size: 10px; font-weight: 700; }

.grade-column { width: 112px; min-width: 112px; max-width: 112px; }
.event-column { width: 184px; min-width: 184px; max-width: 184px; }
.score-column { width: 94px; min-width: 94px; max-width: 94px; }
.gap-column { width: 118px; min-width: 118px; max-width: 118px; }
.grade-cell,
.score-cell,
.gap-cell { padding-top: 15px !important; text-align: center; }
.grade-level,
.score-value { display: block; color: var(--text); font: 700 16px/1.2 'Geist', 'Pretendard', sans-serif; }
.grade-score,
.score-label,
.gap-detail { display: block; margin-top: 6px; color: var(--text-3); font-size: 10.5px; line-height: 1.35; }
.gap-value { display: block; font: 800 17px/1.2 'Geist', sans-serif; }
.gap-cell.ahead { background: var(--accent-soft); }
.gap-cell.ahead .gap-value { color: var(--accent-strong); }
.gap-cell.behind { background: var(--warn-soft); }
.gap-cell.behind .gap-value { color: var(--warn); }
.gap-cell.even .gap-value { color: var(--info); }
.gap-cell.unknown .gap-value { color: var(--text-3); }
.manual-note { display: block; margin-top: 7px; color: var(--warn); font-size: 10px; line-height: 1.35; }

.event-best {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--text-3);
  font-size: 10.5px;
}
.event-best strong { color: var(--text); font-size: 12px; }
.record-control { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 5px; }
.record-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 9px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: 700 15px/1 'Geist', 'Pretendard', sans-serif;
  text-align: center;
}
.record-save {
  min-width: 48px;
  min-height: 44px;
  padding: 0;
  color: #f8fffd;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.record-save:hover { background: var(--accent-strong); }
.record-save:disabled { opacity: .55; cursor: wait; }
.attempts { min-height: 25px; margin-top: 5px; display: flex; gap: 4px; overflow-x: auto; }
.attempt-chip {
  min-height: 44px;
  padding-left: 7px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 10px;
}
.attempt-chip.best { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-ring); }
.attempt-delete {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.attempt-delete:hover { color: var(--danger); background: var(--danger-soft); }
.attempt-empty { margin: auto 0; color: var(--text-3); font-size: 10px; }
.event-unavailable { display: grid; place-items: center; height: 100%; color: var(--text-3); font-size: 11px; }

.save-announcer { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 820px) {
  .tracker-header { min-height: 64px; padding: 9px 14px; }
  .tracker-main { padding: 12px 10px 24px; }
  .control-bar { grid-template-columns: minmax(0, 1fr) 148px; padding: 11px; }
  .table-scroll { max-height: calc(100vh - 218px); }
  .student-column { width: 100px; min-width: 100px; max-width: 100px; }
  .grade-column { width: 92px; min-width: 92px; max-width: 92px; }
  .event-column { width: 158px; min-width: 158px; max-width: 158px; }
  .score-column { width: 72px; min-width: 72px; max-width: 72px; }
  .gap-column { width: 94px; min-width: 94px; max-width: 94px; }
  .record-table td { padding-left: 7px; padding-right: 7px; }
}

@media (max-width: 560px) {
  .brand-mark { width: 38px; height: 38px; }
  .tracker-header h1 { font-size: 17px; }
  .reload-button { width: 44px; padding: 0; }
  .reload-button span { display: none; }
  .control-bar { grid-template-columns: 1fr; }
  .selection-meta { text-align: left; }
  .table-scroll { max-height: calc(100vh - 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .status-panel.loading i { animation: none; }
}