/* record_ranking — entry "기록 랭킹" 카드. C안 디자인 개정(SDD §9, 2026-07-30).
   시각 정본: docs/sdd/record_ranking-design-c/ (index.html·styles.css·app.js·data.js).
   부 세그먼트는 전역 rtp-components.css 의 .rtp-stat-toggles/.rtp-stat-toggle 재사용 —
   기간 밑줄 탭·부문 드롭다운은 프로젝트에 동일 컴포넌트가 없어 이 파일에 신규(.rr-*)로 정의.
   색·간격·타이포는 --bb-* 토큰만. 모바일 우선(375px), 모든 탭타겟 ≥44px. */

.rr-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-2);
  margin: var(--bb-space-5) 0 var(--bb-space-2);
}
.rr-section__title {
  font: var(--bb-type-h5);
  color: var(--bb-ink);
  margin: 0;
}

.rr-card {
  padding: var(--bb-space-3);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-bg);
}

/* ── 1축 · 기간 밑줄 탭(오늘·대회 전체 — "이번 주" 탭 2026-07-30 제거) ──── */
.rr-card__periods {
  display: flex;
  gap: var(--bb-space-4);
  border-bottom: 1px solid var(--bb-border-soft);
  margin-bottom: var(--bb-space-3);
}
.rr-period {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-1);
  min-width: var(--bb-tap-target);
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-1);
  margin: 0 0 -1px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: var(--bb-type-body-sm);
  font-family: inherit;
  font-weight: 800;
  color: var(--bb-ink-muted);
  cursor: pointer;
  transition: color var(--bb-t-fast) var(--bb-ease), border-color var(--bb-t-fast) var(--bb-ease);
}
.rr-period--active {
  color: var(--bb-ink);
  border-color: var(--bb-rank-accent);
}
.rr-period__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--bb-space-1);
  border-radius: var(--bb-radius-4);
  background: var(--bb-rank-accent);
  color: var(--bb-neutral-0);
  font-size: var(--bb-text-2xs);
  font-weight: 900;
  line-height: 1;
}

/* ── 2축 · 부 세그먼트(좌) + 부문 드롭다운(우) ───────────────────────── */
.rr-card__filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-3);
  flex-wrap: wrap;
}
.rr-card__division.rtp-stat-toggles {
  width: auto;
  flex: 0 0 auto;
  gap: var(--bb-space-1);
  margin: 0;
  flex-wrap: wrap;
}
.rr-card__division .rtp-stat-toggle {
  flex: 0 0 auto;
  min-width: var(--bb-tap-target);
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-2);
  font-size: var(--bb-text-sm);
}

.rr-sort {
  position: relative;
  flex-shrink: 0;
}
.rr-sort__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
  min-height: var(--bb-tap-target);
  min-width: var(--bb-tap-target);
  padding: 0 var(--bb-space-2);
  border: none;
  border-radius: var(--bb-radius-8);
  background: var(--bb-accent-soft);
  color: var(--bb-accent-dark);
  font: var(--bb-type-body-sm);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.rr-sort__caret {
  transition: transform var(--bb-t-fast) var(--bb-ease);
}
.rr-sort__btn[aria-expanded="true"] .rr-sort__caret {
  transform: rotate(180deg);
}
.rr-sort__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--bb-space-1));
  z-index: 20;
  min-width: 140px;
  background: var(--bb-bg);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-lg);
  padding: var(--bb-space-1);
}
.rr-sort__menu[hidden] { display: none; }
.rr-sort__opt {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-2);
  background: none;
  border: none;
  border-radius: var(--bb-radius-8);
  font: var(--bb-type-body-sm);
  font-family: inherit;
  color: var(--bb-ink-sub);
  text-align: left;
  cursor: pointer;
}
.rr-sort__opt--active {
  background: var(--bb-accent-soft);
  color: var(--bb-accent-dark);
  font-weight: 800;
}
.rr-sort__opt--active::after {
  content: '\2713';
  margin-left: var(--bb-space-2);
}

/* ── 리스트 ───────────────────────────────────────────────────────── */
.rr-card__list {
  display: flex;
  flex-direction: column;
}

.rr-row {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  min-height: var(--bb-tap-target);
  padding: var(--bb-space-2) 0;
  border-bottom: 1px solid var(--bb-border-soft);
  text-decoration: none;
  color: inherit;
}
.rr-row:last-child { border-bottom: none; }
a.rr-row { cursor: pointer; }

.rr-row__rank {
  flex-shrink: 0;
  min-width: var(--bb-space-3);
  text-align: center;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-sm);
  font-weight: 900;
  color: var(--bb-ink-muted);
}
/* 1~3위 강조 — 배지 아님, 숫자 자체를 오렌지로 (--bb-rank-* 토큰만, 하드코딩 금지) */
.rr-row__rank--top { color: var(--bb-rank-accent); }

.rr-row__identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rr-row__name {
  font: var(--bb-type-body);
  font-weight: 700;
  color: var(--bb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-row__jersey {
  font: var(--bb-type-caption);
  color: var(--bb-ink-sub);
}
.rr-row__meta {
  font: var(--bb-type-caption);
  color: var(--bb-ink-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 값 위계 — 합계는 크게(1위 행만 강조색), "평균 X.X" 는 그 아래 아주 작고 연하게
   (사용자 요청 복원 2026-07-30 — meta 급 폰트, 합계 위계를 해치지 않는 선). */
.rr-row__stat {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.rr-row__value {
  font: var(--bb-type-h4);
  font-family: var(--bb-font-num);
  color: var(--bb-ink);
  white-space: nowrap;
}
.rr-row__value--lead { color: var(--bb-rank-accent); }
.rr-row__unit {
  margin-left: 2px;
  font: var(--bb-type-caption);
  font-weight: 700;
  color: var(--bb-ink-muted);
}
.rr-row__avg {
  font: var(--bb-type-caption);
  color: var(--bb-ink-sub);
  white-space: nowrap;
}

.rr-card__empty {
  margin: var(--bb-space-3) 0 0;
  padding: var(--bb-space-4) 0;
  text-align: center;
  font: var(--bb-type-body-sm);
  color: var(--bb-ink-sub);
}
.rr-card__empty[hidden] { display: none; }

.rr-card__footer {
  margin: var(--bb-space-2) 0 0;
  font: var(--bb-type-caption);
  color: var(--bb-ink-muted);
  text-align: right;
}