/* ── Reset & Base ──────────────────────────────────────────── */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.6;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── Header ───────────────────────────────────────────────── */

header {
  text-align: center;
  margin-bottom: 24px;
}

header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.subtitle {
  font-size: 0.88rem;
  color: #555;
}

/* ── Mode Toggle (심판별 / 팀별) ──────────────────────────── */

.mode-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
}

.mode-btn {
  padding: 8px 24px;
  border: 1px solid #1a73e8;
  background: #fff;
  color: #1a73e8;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mode-btn:first-child {
  border-radius: 6px 0 0 6px;
  border-right-width: 0;
}

.mode-btn:last-child {
  border-radius: 0 6px 6px 0;
}

.mode-btn:hover {
  background: #e8f0fe;
}

.mode-btn.active {
  background: #1a73e8;
  color: #fff;
}

/* ── View Toggle ──────────────────────────────────────────── */

.view-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.toggle-btn {
  padding: 6px 18px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.toggle-btn:hover {
  border-color: #888;
}

.toggle-btn.active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}

/* ── Table Wrapper ────────────────────────────────────────── */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Table ─────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

thead th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  border-bottom: 2px solid #ddd;
  padding: 10px 8px;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

thead th.sortable,
thead th[data-col] {
  cursor: pointer;
}

thead th[data-col]:hover {
  background: #e8e8e8;
}

/* 정렬 화살표 */
thead th.sort-asc::after {
  content: " \25B2";
  font-size: 0.65rem;
  color: #1a73e8;
}

thead th.sort-desc::after {
  content: " \25BC";
  font-size: 0.65rem;
  color: #1a73e8;
}

tbody td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

tbody tr:nth-child(even):not(.detail-row) {
  background: #f9f9f9;
}

tbody tr:not(.detail-row) {
  cursor: pointer;
}

tbody tr:not(.detail-row):hover {
  background: #eef4fd;
}

/* 열 너비 힌트 */
.col-rank { width: 40px; }
.col-name { text-align: left !important; }
.col-num  { width: 70px; }
.col-rate { width: 130px; }

tbody td.td-name {
  text-align: left;
  font-weight: 600;
}

/* ── 번복률 Bar ───────────────────────────────────────────── */

.rate-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.rate-bar-bg {
  flex: 0 0 60px;
  height: 12px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.rate-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s;
}

.rate-text {
  flex: 0 0 42px;
  text-align: right;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* ── Detail Row ───────────────────────────────────────────── */

.detail-row td {
  padding: 0;
  background: #fafbfd;
}

.detail-content {
  padding: 16px 12px 16px 28px;
}

.detail-content h3 {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.detail-content h3:not(:first-child) {
  margin-top: 20px;
}

/* 유형별 소계 테이블 */
.breakdown-table,
.reviews-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.breakdown-table th,
.reviews-table th {
  background: #eef0f4;
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
  white-space: nowrap;
}

.breakdown-table td,
.reviews-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.breakdown-table tbody tr:nth-child(even),
.reviews-table tbody tr:nth-child(even) {
  background: #f3f4f7;
}

/* 결과 색상 */
.result-reversed {
  color: #d32f2f;
  font-weight: 600;
}

.result-maintained {
  color: #388e3c;
  font-weight: 600;
}

/* kborc 시퀀스 배지 */
.seq-badge {
  display: inline-block;
  font-size: 0.72rem;
  background: #e8eaf6;
  color: #3949ab;
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* 비디오 링크 버튼 */
.video-link {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border: 1px solid #90a4ae;
  border-radius: 4px;
  color: #455a64;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.video-link:hover {
  background: #455a64;
  color: #fff;
}

/* ── Footer ───────────────────────────────────────────────── */

footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 0.78rem;
  color: #888;
  text-align: center;
}

footer a {
  color: #1a73e8;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer p + p {
  margin-top: 4px;
}

.note {
  margin-top: 8px;
  font-size: 0.74rem;
  color: #aaa;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
  header h1 {
    font-size: 1.2rem;
  }

  .toggle-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
  }

  .detail-content {
    padding: 12px 8px 12px 12px;
  }
}