/*
 * 내부 지표 지면(/stats).
 * 카드가 없는 한 장의 시트 — 구획은 1px 헤어라인, 숫자가 주인공입니다.
 * 모바일에서 먼저 읽히도록 짜고 넓은 화면에서 여백만 넓힙니다.
 */

html body:has(.stats-sheet) {
  height: auto;
  min-height: 100%;
  /* 지면 톤은 전역 배경을 그대로 따릅니다. */
  background: var(--warm-50);
}

.stats-sheet {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-10);
  color: var(--ink);
  background: var(--warm-50);
}

/* ── 공통 라벨 — 초소형 대문자 + 넓은 자간 ───────────────── */

.stats-sheet .label {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-label);
  letter-spacing: 0.2em;
}

.stats-sheet .caption {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.75;
  word-break: keep-all;
}

.stats-sheet .empty {
  margin: var(--space-6) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ── 머리 ────────────────────────────────────────────────── */

.stats-sheet .stats-sheet__head {
  padding: var(--space-7) 0 var(--space-6);
}

.stats-sheet .stats-sheet__title {
  margin: var(--space-3) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--display-weight-strong);
  letter-spacing: -0.045em;
}

.stats-sheet .stats-sheet__period {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.stats-sheet .stats-sheet__period span {
  color: rgb(0 0 0 / 32%);
}

/* ── 핵심 지표 3열 — 수직 헤어라인으로만 나눔 ─────────────── */

.stats-sheet .figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}

.stats-sheet .figure {
  padding: var(--space-6) var(--space-3) var(--space-6) 0;
}

.stats-sheet .figure + .figure {
  padding-left: var(--space-4);
  border-left: 1px solid var(--hairline);
}

/* 숫자가 주인공 — 얇은 웨이트로 크게. */
.stats-sheet .figure__value {
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 12vw, 60px);
  font-weight: var(--display-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
  line-height: 0.95;
}

.stats-sheet .figure__label {
  margin: var(--space-3) 0 0;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-label);
  letter-spacing: 0.16em;
}

/* ── 섹션 ────────────────────────────────────────────────── */

.stats-sheet .block {
  padding: var(--space-7) 0 var(--space-7);
  border-bottom: 1px solid var(--hairline);
}

.stats-sheet .block__head {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.stats-sheet .block__aux {
  margin: 0;
  color: rgb(0 0 0 / 32%);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

/* ── 점 차트 ─────────────────────────────────────────────── */

.stats-sheet .chart {
  margin: 0;
}

.stats-sheet .chart svg {
  display: block;
  width: 100%;
  height: auto;
  /* 점 차트는 가장자리 점이 잘리지 않게 넘치도록 두고, 좌표 플롯만 따로 자릅니다. */
  overflow: visible;
}

.stats-sheet .chart__base {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

/* 이동중앙값 — 얇은 실선 하나만. */
.stats-sheet .chart__median {
  fill: none;
  stroke: rgb(0 0 0 / 38%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stats-sheet .chart__dot {
  fill: var(--ink);
}

/* 기록이 없는 날도 축의 리듬으로 남깁니다. */
.stats-sheet .chart__dot.is-zero {
  fill: rgb(0 0 0 / 30%);
}

/* 이상치는 색이 아니라 테두리로만 구분합니다. */
.stats-sheet .chart__ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}

.stats-sheet .chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  color: rgb(0 0 0 / 32%);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* ── 부산 좌표 산점도 ────────────────────────────────────── */

/* 좌표 플롯은 지면 전체를 먹지 않게 폭을 좁혀 가운데 둡니다.
   `.chart svg { overflow: visible }` 보다 셀렉터를 한 단계 더 써서 클리핑이 이깁니다. */
.stats-sheet .chart .scatter {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  /* 프레임 밖으로 뻗는 노선을 여기서 자릅니다. */
  overflow: hidden;
}

/* 참조선 — 있는 줄만 알 정도로 조용하게. */
.stats-sheet .scatter__rail path {
  fill: none;
  stroke: rgb(0 0 0 / 13%);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stats-sheet .scatter__dot {
  fill: var(--ink);
}

/* 조회가 없는 곳도 '있다'는 사실은 보여야 해서 속 빈 원으로 남깁니다. */
.stats-sheet .scatter__dot--idle {
  fill: var(--warm-50);
  stroke: rgb(0 0 0 / 42%);
  stroke-width: 1.1;
}

/* ── 순위 목록 ───────────────────────────────────────────── */

.stats-sheet .ranks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-sheet .rank {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}

.stats-sheet .ranks--compact .rank {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  padding: var(--space-3) 0;
}

.stats-sheet .rank:last-child {
  border-bottom: 0;
}

.stats-sheet .rank__index {
  color: var(--spark);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.stats-sheet .rank__name {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-sheet .rank__name--mono {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-body);
}

/* 비중은 막대가 아니라 점 한 줄로. */
.stats-sheet .rank__dots {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.stats-sheet .rank__dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
}

.stats-sheet .rank__value {
  min-width: 30px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── 시각 + 내용 한 줄 목록 ──────────────────────────────── */

.stats-sheet .lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-sheet .line {
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}

.stats-sheet .line:last-child {
  border-bottom: 0;
}

.stats-sheet .line__time {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: rgb(0 0 0 / 32%);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.stats-sheet .line__main {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-label);
}

.stats-sheet .line__sub {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ── 꼬리 ────────────────────────────────────────────────── */

.stats-sheet .stats-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding: var(--space-6) 0 0;
}

.stats-sheet .stats-sheet__foot p {
  margin: 0;
  color: rgb(0 0 0 / 32%);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
}

/* ── 넓은 화면 — 여백만 넓히고 조판은 그대로 ─────────────── */

@media (min-width: 700px) {
  .stats-sheet {
    padding: 0 var(--space-7) var(--space-12);
  }

  .stats-sheet .stats-sheet__head {
    padding: var(--space-10) 0 var(--space-7);
  }

  .stats-sheet .stats-sheet__title {
    font-size: var(--text-3xl);
  }

  .stats-sheet .figure {
    padding: var(--space-7) var(--space-4) var(--space-7) 0;
  }

  .stats-sheet .figure + .figure {
    padding-left: var(--space-6);
  }

  .stats-sheet .figure__label {
    font-size: var(--text-2xs);
  }

  .stats-sheet .block {
    padding: var(--space-9) 0 var(--space-8);
  }

  .stats-sheet .caption {
    max-width: 62ch;
    font-size: var(--text-xs);
  }
}