/*
 * Stat Detail (내 기록 상세 · 부문별) — screen component styles
 * 규약: docs/conventions/frontend.md "Design Tokens" + "Basketball 디자인 시스템"
 *   - 모든 값은 var(--bb-*) 토큰. raw hex / raw px(색·간격·모서리) 없음.
 *   - 스크린 컴포넌트 네이밍은 이 앱의 rtp-* 관례를 따름 → prefix: .rtp-sd-*
 *   - stat-detail-v2.html 목업(로컬 --orange/--ink2 등)을 bb 토큰으로 정렬한 정본.
 *
 * 로드 순서: tokens.css → base.css → components.css → (rtp-*) → stat-detail.css
 * 이 화면은 _rtp_base.html 셸 안에서 렌더 (폰 베젤·상태바 없음).
 */

/* ============================================================
 * R2 — 그래프 채우기 애니메이션 (stat_detail_ux)
 * 서버가 내려주는 인라인 width/left(%) 는 정답 원천 — stat-detail.js 가 로드 시
 * 시작값만 0/기준선으로 세팅했다가 같은 인라인 값으로 복원해 transition 을 발동한다.
 * prefers-reduced-motion 사용자는 JS 가 애니메이션을 건너뛰므로 아래 transition 은
 * 발동되지 않지만, 방어적으로 media query 로도 명시 차단한다.
 * ============================================================ */
.rtp-sd-gauge__fill,
.rtp-sd-compare__fill,
.rtp-sd-quarter__fill {
  transition: width var(--bb-t-graph) var(--bb-ease);
}
.rtp-sd-gauge__dot,
.rtp-sd-gauge__tick,
.rtp-sd-compare__marker,
.rtp-sd-quarter__marker {
  transition: left var(--bb-t-graph) var(--bb-ease);
}
.rtp-sd-trend__chart path {
  transition: stroke-dashoffset var(--bb-t-graph) var(--bb-ease);
}
@media (prefers-reduced-motion: reduce) {
  .rtp-sd-gauge__fill,
  .rtp-sd-compare__fill,
  .rtp-sd-quarter__fill,
  .rtp-sd-gauge__dot,
  .rtp-sd-gauge__tick,
  .rtp-sd-compare__marker,
  .rtp-sd-quarter__marker,
  .rtp-sd-trend__chart path {
    transition: none;
  }
}

/* 스탯 숫자 전용 스케일 — 재사용되면 tokens.css 의 --bb-stat-num-* 로 승격 예정.
   (일반 타이포는 --bb-type-* / --bb-text-* 사용, 아래는 Barlow 대형 수치 전용) */
.rtp-sd-body {
  --sd-num-hero: 54px;
  --sd-num-lg:   40px;
  --sd-num-md:   30px;
  --sd-num-sm:   24px;
  --sd-num-xs:   22px;

  display: flex;
  flex-direction: column;
  padding: var(--bb-space-3) var(--bb-space-25) var(--bb-space-4);
  background: var(--bb-neutral-100);
  font-family: var(--bb-font);
  color: var(--bb-ink);
}

/* ============================================================
 * Screen header (부문 상세 타이틀 — _rtp_base 셸 내부 상단)
 * ============================================================ */
.rtp-sd-head {
  display: flex;
  align-items: center;
  gap: var(--bb-space-1);
  padding: var(--bb-space-05) var(--bb-space-2) var(--bb-space-15);
  background: var(--bb-bg);
}
.rtp-sd-head__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-tap-target);
  height: var(--bb-tap-target);
  border: none;
  background: transparent;
  color: var(--bb-ink);
  cursor: pointer;
}
.rtp-sd-head__title {
  flex: 1;
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: var(--bb-ink);
}
.rtp-sd-head__season {
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-sm);
  font-weight: 700;
  color: var(--bb-ink-muted);
}

/* ============================================================
 * Section band (강점 · 성장 · 상태 배지)
 * ============================================================ */
.rtp-sd-band {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
  align-self: flex-start;
  margin-bottom: var(--bb-space-15);
  padding: var(--bb-space-1) var(--bb-space-15);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary-soft);
}
.rtp-sd-band__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
}
.rtp-sd-band__label {
  font-size: 11px;
  font-weight: 800;
  color: var(--bb-primary);
}
.rtp-sd-band--gray               { background: var(--bb-neutral-100); }
.rtp-sd-band--gray .rtp-sd-band__dot   { background: var(--bb-ink-muted); }
.rtp-sd-band--gray .rtp-sd-band__label { color: var(--bb-ink-sub); }

/* ============================================================
 * Card shell (전 컴포넌트 공통 컨테이너)
 * ============================================================ */
.rtp-sd-card {
  margin-bottom: var(--bb-space-15);
  padding: var(--bb-space-3) var(--bb-space-25);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-xl);
  background: var(--bb-bg);
}
.rtp-sd-card--sm {
  padding: var(--bb-space-3);
}
.rtp-sd-card__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--bb-ink);
}
.rtp-sd-card__sub {
  margin-top: var(--bb-space-1);
  font-size: 11px;
  color: var(--bb-ink-muted);
}
.rtp-sd-card__micro {
  font-size: 11px;
  line-height: 1.5;
  color: var(--bb-ink-muted);
}

/* ============================================================
 * Hero gauge (heroStd) — 압도/성장 게이지
 * ============================================================ */
.rtp-sd-gauge__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bb-space-2);
}
.rtp-sd-gauge__head {
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-primary);
}
.rtp-sd-gauge__val {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 5px;
}
.rtp-sd-gauge__num {
  font-family: var(--bb-font-num);
  font-size: var(--sd-num-hero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--bb-ink);
}
.rtp-sd-gauge__unit {
  font-family: var(--bb-font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-ink-muted);
}
.rtp-sd-pill {
  padding: 5px 11px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary-soft);
  font-family: var(--bb-font);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bb-primary);
  white-space: nowrap;
}
.rtp-sd-pill__sub {
  display: block;
  margin-top: 5px;
  font-family: var(--bb-font-num);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  color: var(--bb-ink-muted);
}

.rtp-sd-gauge__bar {
  position: relative;
  height: 12px;
  margin-top: var(--bb-space-4);
  border-radius: 6px;
  background: var(--bb-border-soft);
}
.rtp-sd-gauge__fill {
  height: 12px;
  border-radius: 6px;
  background: var(--bb-primary);
}
.rtp-sd-gauge__tick {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 22px;
  border-radius: 1px;
}
.rtp-sd-gauge__tick--avg { background: var(--bb-ink-muted); }
.rtp-sd-gauge__tick--top { background: var(--bb-ink); }
.rtp-sd-gauge__dot {
  position: absolute;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-bg);
  border: 3px solid var(--bb-primary);
}
.rtp-sd-gauge__labels {
  position: relative;
  height: 26px;
  margin-top: var(--bb-space-1);
  font-family: var(--bb-font-num);
  font-size: 10px;
  font-weight: 700;
}
.rtp-sd-gauge__labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.rtp-sd-gauge__lab--avg { color: var(--bb-ink-muted); }
.rtp-sd-gauge__lab--top { color: var(--bb-ink); }
.rtp-sd-gauge__cap {
  margin-top: var(--bb-space-05);
  font-size: 10.5px;
  color: var(--bb-ink-muted);
}
.rtp-sd-gauge__hint {
  margin-top: var(--bb-space-05);
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-ink-muted);
}

/* ============================================================
 * Compare bars (compareCard) — 리그 평균 비교
 * ============================================================ */
.rtp-sd-compare__rows {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  margin-top: var(--bb-space-3);
}
.rtp-sd-compare__head {
  display: flex;
  align-items: baseline;
  gap: 8px;   /* 값을 이름 옆에(게이지처럼) */
}
.rtp-sd-compare__key {
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-ink-sub);
}
.rtp-sd-compare__keyhint {
  margin-left: var(--bb-space-1);
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-neutral-400);
}
.rtp-sd-compare__vals {
  display: flex;
  align-items: baseline;
  gap: var(--bb-space-2);
}
.rtp-sd-compare__v {
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: var(--bb-ink);
}
.rtp-sd-compare__v--sp    { color: var(--bb-primary); }
.rtp-sd-compare__v--muted { color: var(--bb-neutral-400); }
.rtp-sd-compare__avg {
  font-family: var(--bb-font-num);
  font-size: 11px;
  color: var(--bb-ink-muted);
}
.rtp-sd-compare__track {
  position: relative;
  height: 6px;
  margin-top: var(--bb-space-1);
  border-radius: 3px;
  background: var(--bb-border-soft);
}
.rtp-sd-compare__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--bb-accent);
}
.rtp-sd-compare__marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--bb-primary);
}
.rtp-sd-compare__gnote {
  margin-top: var(--bb-space-1);
  font-size: 10px;
  color: var(--bb-neutral-400);
}
/* 1위(top) 틱 — 게이지처럼 오른쪽 끝. 평균 marker(주황)와 구분되게 어두운 색. */
.rtp-sd-compare__top {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--bb-ink);
}
.rtp-sd-compare__top-label {
  font-family: var(--bb-font-num);
  font-size: 11px;
  color: var(--bb-ink);
  font-weight: 700;
  margin-left: 6px;
}
.rtp-sd-compare__desc {
  margin-top: var(--bb-space-1);
  font-size: 10.5px;
  color: var(--bb-ink-muted);
  line-height: 1.4;
}
.rtp-sd-compare__legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--bb-ink-muted);
}
.rtp-sd-compare__legdot {
  display: inline-block;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: var(--bb-primary);
}
/* 평균 캡션 — 바 아래로 분리(정리). 내 값+1위는 상단. */
.rtp-sd-compare__cap {
  margin-top: 4px;
  font-family: var(--bb-font-num);
  font-size: 11px;
  color: var(--bb-ink-muted);
}
/* 1위 — 내 값 오른쪽 끝(게이지처럼). */
.rtp-sd-compare__vtop {
  font-family: var(--bb-font-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--bb-ink);
  margin-left: 8px;
}
/* 평균(주황선 밑)·1위(끝) 위치 라벨 — 게이지 라벨과 동일 패턴. */
.rtp-sd-compare__labels {
  position: relative;
  height: 15px;
  margin-top: 3px;
  font-family: var(--bb-font-num);
  font-size: 10px;
  font-weight: 700;
}
.rtp-sd-compare__labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.rtp-sd-compare__lab--avg { color: var(--bb-ink-muted); }
.rtp-sd-compare__lab--top { color: var(--bb-ink); }

/* ============================================================
 * Trend (trackCard) — 최근 N경기 추이
 * ============================================================ */
.rtp-sd-trend__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-05);
}
.rtp-sd-trend__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--bb-ink);
}
.rtp-sd-trend__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--bb-font-num);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--bb-ink-muted);
}
.rtp-sd-trend__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.rtp-sd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
  padding: var(--bb-space-1) var(--bb-space-2);
  border-radius: var(--bb-radius-pill);
}
.rtp-sd-badge__arrow { font-size: 8px; font-style: normal; }
.rtp-sd-badge__txt {
  font-family: var(--bb-font-num);
  font-size: 11px;
  font-weight: 800;
}
.rtp-sd-badge--good { background: var(--bb-primary-soft); }
.rtp-sd-badge--good .rtp-sd-badge__arrow,
.rtp-sd-badge--good .rtp-sd-badge__txt { color: var(--bb-primary); }
.rtp-sd-badge--flat { background: var(--bb-neutral-100); }
.rtp-sd-badge--flat .rtp-sd-badge__arrow,
.rtp-sd-badge--flat .rtp-sd-badge__txt { color: var(--bb-ink-muted); }
.rtp-sd-badge--cons {
  background: var(--bb-bg);
  border: 1px solid var(--bb-border);
}
.rtp-sd-badge--cons .rtp-sd-badge__txt {
  font-family: var(--bb-font);
  font-weight: 700;
  color: var(--bb-ink-sub);
}
.rtp-sd-badge--cons em {
  font-style: normal;
  font-family: var(--bb-font-num);
  font-weight: 800;
  color: var(--bb-primary);
}
.rtp-sd-trend__chart { display: block; }
.rtp-sd-trend__foot {
  display: flex;
  gap: var(--bb-space-2);
  margin-top: var(--bb-space-2);
}
.rtp-sd-trend__box {
  flex: 1;
  padding: var(--bb-space-15);
  border-radius: var(--bb-radius);
  text-align: center;
}
.rtp-sd-trend__box .k { font-size: 11px; font-weight: 700; }
.rtp-sd-trend__box .v {
  margin-top: 3px;
  font-family: var(--bb-font-num);
  font-size: var(--sd-num-xs);
  font-weight: 800;
}
.rtp-sd-trend__box--hi { background: var(--bb-primary-soft); }
.rtp-sd-trend__box--hi .k,
.rtp-sd-trend__box--hi .v { color: var(--bb-primary); }
.rtp-sd-trend__box--pl { background: var(--bb-neutral-100); }
.rtp-sd-trend__box--pl .k { color: var(--bb-ink-muted); }
.rtp-sd-trend__box--pl .v { color: var(--bb-ink); }

/* ============================================================
 * Quarter profile (quarterCard) — pts 전용
 * ============================================================ */
.rtp-sd-quarter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-2);
}
.rtp-sd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
  padding: var(--bb-space-1) var(--bb-space-15);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary-soft);
}
.rtp-sd-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
}
.rtp-sd-chip__label {
  font-size: 11px;
  font-weight: 800;
  color: var(--bb-primary);
}
.rtp-sd-quarter__copy {
  margin-top: var(--bb-space-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--bb-ink-sub);
}
.rtp-sd-quarter__copy b { color: var(--bb-primary); }
.rtp-sd-quarter__rows {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-15);
  margin-top: var(--bb-space-15);
}
.rtp-sd-quarter__row {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
}
.rtp-sd-quarter__q {
  width: 22px;
  font-family: var(--bb-font-num);
  font-size: 11px;
  font-weight: 800;
  color: var(--bb-ink-muted);
}
.rtp-sd-quarter__track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bb-border-soft);
}
.rtp-sd-quarter__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--bb-accent);
}
.rtp-sd-quarter__marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--bb-primary);
}
.rtp-sd-quarter__pv {
  width: 34px;
  text-align: right;
  font-family: var(--bb-font-num);
  font-size: 12px;
  font-weight: 800;
  color: var(--bb-ink);
}
.rtp-sd-legend {
  display: flex;
  gap: var(--bb-space-15);
  margin-top: var(--bb-space-15);
  font-size: 10px;
  font-weight: 600;
  color: var(--bb-ink-muted);
}
.rtp-sd-legend i {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--bb-space-1);
}
.rtp-sd-legend .b1 { width: 12px; height: 4px; border-radius: 2px; background: var(--bb-accent); }
.rtp-sd-legend .b2 { width: 2px; height: 10px; background: var(--bb-primary); }

/* ============================================================
 * Win contribution (winCard) — pts 전용
 * ============================================================ */
.rtp-sd-win__copy {
  margin-top: var(--bb-space-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--bb-ink-sub);
}
.rtp-sd-win__copy b { color: var(--bb-primary); }
.rtp-sd-win__boxes {
  display: flex;
  gap: var(--bb-space-2);
  margin-top: var(--bb-space-15);
}
.rtp-sd-win__box {
  flex: 1;
  padding: 13px var(--bb-space-15);
  border-radius: var(--bb-radius);
  text-align: center;
}
.rtp-sd-win__box .k { font-size: 11px; font-weight: 700; }
.rtp-sd-win__box .v {
  margin-top: 3px;
  font-family: var(--bb-font-num);
  font-size: var(--sd-num-sm);
  font-weight: 800;
}
.rtp-sd-win__box .g {
  margin-top: var(--bb-space-05);
  font-family: var(--bb-font-num);
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-neutral-400);
}
.rtp-sd-win__box--hi { background: var(--bb-primary-soft); }
.rtp-sd-win__box--hi .k,
.rtp-sd-win__box--hi .v { color: var(--bb-primary); }
.rtp-sd-win__box--pl { background: var(--bb-neutral-100); }
.rtp-sd-win__box--pl .k { color: var(--bb-ink-muted); }
.rtp-sd-win__box--pl .v { color: var(--bb-ink); }
.rtp-sd-win__note {
  margin-top: var(--bb-space-2);
  font-size: 10px;
  color: var(--bb-neutral-400);
}
/* 무패(전승) — 임계 대비 박스 대신 배지 */
.rtp-sd-win__sweep {
  margin-top: var(--bb-space-2);
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
}
.rtp-sd-win__sweep-badge {
  flex: none;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--bb-primary-soft);
  color: var(--bb-primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.rtp-sd-win__sweep-copy {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bb-ink-sub);
}
.rtp-sd-win__sweep-copy b { color: var(--bb-primary); }

/* ============================================================
 * Reference players (refsCard)
 * ============================================================ */
.rtp-sd-refs__desc {
  margin: 0 0 var(--bb-space-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--bb-ink-muted);
}
.rtp-sd-refs__row {
  display: flex;
  gap: var(--bb-space-2);
}
.rtp-sd-refs__item {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: var(--bb-space-2);
  border-radius: var(--bb-radius);
  background: var(--bb-neutral-100);
  text-decoration: none;
  color: inherit;
}
.rtp-sd-refs__item--empty {
  justify-content: center;
  border: 1px dashed var(--bb-neutral-400);
  background: transparent;
}
.rtp-sd-refs__empty {
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-neutral-400);
}
.rtp-sd-sil {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-border);
}
.rtp-sd-refs__body { min-width: 0; }
.rtp-sd-refs__name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rtp-sd-refs__school,
.rtp-sd-refs__role {
  margin-top: 1px;
  overflow: hidden;
  font-size: 10px;
  color: var(--bb-ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rtp-sd-refs__role b {
  font-family: var(--bb-font-num);
  color: var(--bb-ink-sub);
}

/* ============================================================
 * Info / empty state (infoCard)
 * ============================================================ */
.rtp-sd-info {
  margin-bottom: var(--bb-space-15);
  padding: var(--bb-space-4) var(--bb-space-25);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-xl);
  background: var(--bb-bg);
  text-align: center;
}
.rtp-sd-info__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-tap-target);
  height: var(--bb-tap-target);
  margin: 0 auto var(--bb-space-15);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-neutral-100);
}
.rtp-sd-info__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--bb-ink);
}
.rtp-sd-info__sub {
  margin-top: var(--bb-space-1);
  font-size: 12px;
  line-height: 1.6;
  color: var(--bb-ink-muted);
}
.rtp-sd-info__cta {
  display: block;
  width: 100%;
  min-height: var(--bb-tap-target);
  margin-top: var(--bb-space-15);
  border: none;
  border-radius: var(--bb-radius);
  background: var(--bb-ink);
  color: var(--bb-bg);
  font-family: var(--bb-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================
 * Plain value (plainVal) — 상태 A/B
 * ============================================================ */
.rtp-sd-plain__k {
  margin-bottom: var(--bb-space-1);
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-ink-sub);
}
.rtp-sd-plain__val {
  display: flex;
  align-items: baseline;
  gap: var(--bb-space-1);
}
.rtp-sd-plain__num {
  font-family: var(--bb-font-num);
  font-size: var(--sd-num-lg);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--bb-ink);
}
.rtp-sd-plain__unit {
  font-family: var(--bb-font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-ink-muted);
}

/* ============================================================
 * Celebration (celeCard) — 상태 G (리그 1위)
 * ============================================================ */
.rtp-sd-cele {
  position: relative;
  margin-bottom: var(--bb-space-15);
  padding: var(--bb-space-4) var(--bb-space-25);
  border-radius: var(--bb-radius-20);
  overflow: hidden;
}
.rtp-sd-cele--dark {
  background: var(--bb-hero-dark);
  border-top: 2px solid var(--bb-primary);
}
.rtp-sd-cele--orange { background: var(--bb-primary); }
.rtp-sd-cele__tag {
  font-family: var(--bb-font-num);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.rtp-sd-cele--dark   .rtp-sd-cele__tag { color: var(--bb-primary); }
.rtp-sd-cele--orange .rtp-sd-cele__tag { color: var(--bb-primary-soft); }
.rtp-sd-cele__h {
  margin-top: var(--bb-space-2);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.4px;
  color: var(--bb-bg);
}
.rtp-sd-cele__s {
  margin-top: var(--bb-space-2);
  font-size: 12px;
  font-weight: 600;
}
.rtp-sd-cele--dark   .rtp-sd-cele__s { color: var(--bb-neutral-400); }
.rtp-sd-cele--orange .rtp-sd-cele__s { color: var(--bb-primary-soft); }
.rtp-sd-cele__n {
  position: absolute;
  right: var(--bb-space-15);
  top: var(--bb-space-1);
  font-family: var(--bb-font-num);
  font-size: 74px;
  font-weight: 800;
  line-height: 1;
  color: var(--bb-bg);
  opacity: .14;
}

/* ============================================================
 * Defense dual-gauge (수비 — 스틸/블록 인라인 게이지)
 * ============================================================ */
.rtp-sd-dual {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
}
.rtp-sd-dual__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rtp-sd-dual__label {
  display: flex;
  align-items: baseline;
  gap: var(--bb-space-2);
}
.rtp-sd-dual__k { font-size: 14px; font-weight: 800; color: var(--bb-ink); }
.rtp-sd-dual__v {
  font-family: var(--bb-font-num);
  font-size: var(--sd-num-md);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--bb-ink);
}
.rtp-sd-dual__unit {
  margin-left: var(--bb-space-05);
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-ink-muted);
}
.rtp-sd-dual__bar {
  position: relative;
  height: 8px;
  margin-top: var(--bb-space-15);
  border-radius: 5px;
  background: var(--bb-border-soft);
}
.rtp-sd-dual__fill { height: 8px; border-radius: 5px; background: var(--bb-primary); }
.rtp-sd-dual__tick {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  border-radius: 1px;
}
.rtp-sd-dual__tick--avg { background: var(--bb-ink-muted); }
.rtp-sd-dual__tick--top { background: var(--bb-ink); }
.rtp-sd-dual__labels {
  position: relative;
  height: 15px;
  margin-top: 5px;
  font-family: var(--bb-font-num);
  font-size: 9.5px;
  font-weight: 700;
}
.rtp-sd-dual__labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.rtp-sd-dual__lab--avg { color: var(--bb-ink-muted); }
.rtp-sd-dual__lab--top { color: var(--bb-ink); }

/* 진입 로딩 오버레이(공통2) — 순수 CSS. 약 0.95s 로더 → 1.3s 에 페이드아웃·소멸. */
.rtp-sd-loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bb-bg);
  animation: rtp-sd-loadout 1.3s ease forwards;
}
.rtp-sd-loading__bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 34px;
}
.rtp-sd-loading__bars i {
  width: 7px;
  height: 100%;
  border-radius: 3px;
  background: var(--bb-primary);
  transform-origin: bottom;
  animation: rtp-sd-loadbar 0.9s ease-in-out infinite;
}
.rtp-sd-loading__bars i:nth-child(2) { animation-delay: .12s; }
.rtp-sd-loading__bars i:nth-child(3) { animation-delay: .24s; }
.rtp-sd-loading__bars i:nth-child(4) { animation-delay: .36s; }
.rtp-sd-loading__txt {
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-ink-muted);
}
@keyframes rtp-sd-loadbar {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
@keyframes rtp-sd-loadout {
  0%, 72%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rtp-sd-loading { display: none; }
}