/* chartline — 화면 규칙. 색·서체·치수는 tokens.css 의 var() 만 쓴다(raw 색 0).
 * 원칙: 차트가 표지 · 숫자가 제목 · 색은 한 도(heat 하나). 판(plate) 위 글자는 ink-inverse 만.
 */

/* ── 파생 치수 ─────────────────────────────────────────────────────────── */
:root {
  /* Top 5 막대 칸 높이: 680px 이 기본이고, 낮은 화면에서는 masthead·탭·속보 띠를 뺀 만큼으로 줄인다 —
     첫 화면에 막대 다섯과 띠가 함께 서야 해서(wireframe 1-a). 너무 낮으면 slab-min + 여유에서 멈춘다. */
  --slab-h: max(
    calc(var(--spacing-slab-min) + var(--spacing-3xl)),
    min(
      var(--spacing-slab-max),
      calc(100svh - var(--spacing-masthead) - var(--spacing-rule-bold) - var(--spacing-tabs) - var(--spacing-ticker) - var(--spacing-lg) - var(--spacing-md))
    )
  );
}

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--spacing-md);
  background: var(--color-bg);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

:where(h1, h2, h3, p, ol, ul, dl, dd, figure) {
  margin: 0;
}

:where(ol, ul) {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-none);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--spacing-md);
  top: -4rem;
  z-index: 10;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-heat-plate);
  color: var(--color-ink-inverse);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: var(--spacing-sm);
}

.skip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* 글자 링크의 손가락 판정 영역을 44px 로 — 위아래 안쪽 여백을 같은 음수 바깥 여백으로 되돌려 배치는 그대로
   (인라인이면 세로 여백이 줄 높이에 안 들어가고, 블록이면 음수 여백이 상쇄한다) */
.row__link,
.slab__title a,
.rel__title a {
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}

/* 대문자 라벨 — 모노 대신 Sora 600 + 자간이 기계 느낌을 맡는다(DESIGN 서체 쌍) */
.mast__week,
.mast__link,
.tab__no,
.week__btn,
.week__note,
.bar__count,
.slab__unit,
.slab__trend-label,
.ticker__item b,
.chip,
.chart thead th,
.band th,
.stat__cmp,
.rules dt,
.notice__label,
.foot__label,
.foot__off,
.crumb,
.ihero__kicker,
.fig dt,
.plot__y,
.pt__tip,
.hist dt,
.note__meta,
.note__votes {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── 변동 표지 — 방향은 색이 아니라 채움(▲)과 비움(▼)으로 ─────────────── */
.tri {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.5625rem;
  background: currentColor;
}

.mv--up .tri,
.tri--up-f {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mv--down .tri,
.tri--down-o {
  clip-path: polygon(evenodd, 0 0, 100% 0, 50% 100%, 0 0, 24% 16%, 50% 66%, 76% 16%, 24% 16%);
}

.tri--left {
  width: 0.5rem;
  height: 0.625rem;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.tri--right {
  width: 0.5rem;
  height: 0.625rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mv {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv--up,
.mv--new {
  color: var(--color-heat);
}

.mv--down,
.mv--re,
.mv--same {
  color: var(--color-ink-dim);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding-inline: 0.35em;
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.mast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--spacing-masthead);
  padding-inline: var(--spacing-gutter);
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
}

.mast__mark {
  justify-self: start;
  display: inline-flex;
  align-items: flex-start;
  min-height: var(--spacing-masthead);
  padding-top: var(--spacing-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.mast__reg {
  font-size: 0.45em;
  margin-left: 0.1em;
  letter-spacing: 0;
}

.mast__week {
  color: var(--color-ink-dim);
  text-align: center;
  white-space: nowrap;
}

.mast__wk {
  color: var(--color-ink);
}

.mast__nav {
  justify-self: end;
  display: flex;
}

.mast__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-masthead);
  padding-inline: var(--spacing-md);
  text-decoration: none;
}

.mast__link[aria-current="page"] {
  color: var(--color-heat);
}

@media (hover: hover) {
  .mast__link:hover,
  .mast__mark:hover {
    text-decoration: underline;
  }
}

/* ── 히어로 — 탭 · Top 5 막대 · 속보 띠 ─────────────────────────────────── */
.hero {
  position: relative;
}

/* 헤드라인은 막대가 오른쪽으로 내려가며 생긴 빈 삼각형(3–5칸 위)에 선다. 크기는 막대 칸 높이에 묶는다 —
   #3 막대 윗면(칸 높이의 26%)보다 두 줄이 낮아지지 않게(0.118 × 0.9 × 2 ≈ 21%). */
.hero__title {
  position: absolute;
  z-index: 2;
  top: calc(var(--spacing-tabs) + var(--spacing-lg));
  right: var(--spacing-gutter);
  max-width: 62%;
  text-align: right;
  font-family: var(--font-display);
  font-size: min(var(--text-3xl), calc(var(--slab-h) * 0.118));
  font-weight: 800;
  line-height: var(--text-3xl--line-height);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero__title span {
  display: block;
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  height: var(--spacing-tabs);
  padding-inline: var(--spacing-gutter);
  border-bottom: 1px solid var(--color-rule);
}

.tabs {
  display: flex;
  gap: var(--spacing-sm);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 10.5rem;
  height: var(--spacing-masthead);
  padding-inline: var(--spacing-md);
  border: 1px solid var(--color-ink-dim);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    background-color 120ms var(--ease-snap),
    border-color 120ms var(--ease-snap),
    color 120ms var(--ease-snap);
}

.tab__no {
  color: var(--color-ink-dim);
}

.tab[aria-selected="true"] {
  background: var(--color-heat-plate);
  border-color: var(--color-heat-plate);
  color: var(--color-ink-inverse);
}

.tab[aria-selected="true"] .tab__no {
  color: var(--color-ink-inverse);
}

@media (hover: hover) {
  .tab:hover {
    border-color: var(--color-ink);
  }
  .tab[aria-selected="true"]:hover {
    border-color: var(--color-heat-plate);
  }
}

.week {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.week--bar {
  margin-left: auto;
}

.week--rest {
  display: none;
}

.week__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 2.75rem;
  padding-inline: var(--spacing-sm);
  color: var(--color-ink-dim);
  cursor: not-allowed;
}

.week__note {
  position: absolute;
  z-index: 3;
  top: calc(100% + var(--spacing-xs));
  right: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-plate);
  color: var(--color-ink-inverse);
  white-space: nowrap;
}

.week__note:empty {
  display: none;
}

.bar__count {
  color: var(--color-ink-dim);
  white-space: nowrap;
}

.top5 {
  padding-top: var(--spacing-lg);
}

/* 칸 사이 1px 격자선 = 격자 배경(rule)이 gap 으로 드러난 것. #1 애시드와 #2 뼈색은 명도가 같아(1.05:1)
   이 선이 없으면 두 막대가 한 덩어리로 붙는다(DESIGN 금지). */
.slabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-hair);
  background: var(--color-rule);
}

.slab {
  --plate: var(--color-plate);
  /* 막대 윗면까지의 거리 — 점수 비율로, 단 숫자 + 정보 3줄이 들어가는 최소 높이에서 자른다 */
  --top: calc(var(--slab-h) - max(var(--spacing-slab-min), var(--slab-h) * var(--ratio)));
  position: relative;
  height: var(--slab-h);
  overflow: hidden;
  background: var(--color-bg);
}

.slab--heat {
  --plate: var(--color-heat-plate);
}

/* 막대는 칸 높이 그대로의 판을 아래로 밀어 둔 것 — 높이가 아니라 transform 만 움직인다(Layout thrashing 금지).
   탭을 연달아 눌러도 지금 자리에서 새 목표로 간다(keyframes 가 아니라 transition = Interruptible). */
.slab__plate {
  position: absolute;
  inset: 0;
  background: var(--plate);
  transform: translateY(var(--top));
}

.slab__rank {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--spacing-sm) var(--spacing-gutter) 0;
  font-family: var(--font-display);
  font-size: var(--text-slab);
  font-weight: 800;
  line-height: var(--text-slab--line-height);
  letter-spacing: -0.04em;
  color: var(--color-ink-inverse);
  transform: translateY(var(--top));
}

/* 막대 transition 은 탭을 바꾸는 동안만 켠다(main.js 가 .is-moving 을 붙였다 뗀다) — 늘 켜 두면 창 크기·전체 높이
   캡처로 --slab-h 가 잠깐 바뀔 때도 막대가 다시 움직여 반쯤 내려간 막대가 찍힌다(실측, 2026-09-25) */
.top5.is-moving .slab__plate,
.top5.is-moving .slab__rank {
  transition: transform 480ms var(--ease-out-quart);
}

.slab__info {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  padding: 0 var(--spacing-gutter) var(--spacing-lg);
  color: var(--color-ink-inverse);
}

.slab__info > * {
  transition: opacity 80ms linear;
}

.top5.is-swap .slab__info > * {
  opacity: 0;
}

.slab__title {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--text-lg--line-height);
  text-wrap: balance;
}

.slab__title a {
  text-decoration: none;
}

@media (hover: hover) {
  .slab__title a:hover {
    text-decoration: underline;
  }
}

.slab__credit {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.slab__score {
  margin-top: var(--spacing-sm);
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.slab__move {
  margin-top: var(--spacing-sm);
  justify-self: end;
}

.slab__info .mv {
  color: var(--color-ink-inverse);
}

.slab__trend {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid currentColor;
}

/* 스파크라인 — 96×24 비율 고정(찌그러지지 않게). 선 1.5px, 이번 주 점은 네모 */
.spark {
  flex: none;
  width: 6rem;
  height: 1.5rem;
  overflow: visible;
  fill: none;
  stroke: var(--color-ink-dim);
  stroke-width: 1.5;
  stroke-linejoin: miter;
}

.spark__dot {
  fill: var(--color-heat);
  stroke: none;
}

.slab .spark {
  stroke: var(--color-ink-inverse);
}

.slab .spark__dot {
  fill: var(--color-ink-inverse);
}

/* 첫 진입 — 막대가 바닥에서 솟는다(Scale in Y 와 같은 모양: 판이 단색이라). 글자는 180ms 늦게 Fade in.
   전체 600ms 안(4×40 + 440) — G2 컷이 반쯤 선 막대를 찍지 않게(lessons #18·#28) */
/* .is-entering 은 HTML 에 박혀 있고 main.js 가 800ms 뒤 뗀다 — 막이 한 번만 돈다. 떼지 않으면 전체 높이 캡처·창 크기
   변경이 모바일 구간을 스칠 때 animation-name 이 바뀌어 등장이 처음부터 다시 돌았다(실측). JS 가 없어도 CSS 로 한 번은 돈다 */
@media (prefers-reduced-motion: no-preference) {
  .top5.is-entering .slab__plate,
  .top5.is-entering .slab__rank {
    animation: slab-rise 440ms var(--ease-out-quart) backwards;
    animation-delay: calc(var(--i) * 40ms);
  }
  .top5.is-entering .slab__info > * {
    animation: fade-in 200ms var(--ease-out-quart) backwards;
    animation-delay: calc(var(--i) * 40ms + 220ms);
  }
}

@keyframes slab-rise {
  from {
    transform: translateY(var(--slab-h));
  }
}

@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* 속보 띠 — Marquee(linear, 40s). 올리거나 포커스하면 멈춘다. 사본은 aria-hidden */
/* position: relative — 띠 안의 .vh(absolute)가 띠의 clip 을 벗어나지 않게. reduced-motion 에서 transform 이 없으면
   그 조각들이 문서 폭을 4500px 로 늘렸다(실측) */
.ticker {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--spacing-ticker);
  overflow: hidden;
  background: var(--color-band);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.ticker:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--color-heat);
  outline-offset: -2px;
}

.ticker__track {
  display: flex;
  flex: none;
  width: max-content;
}

.ticker__list {
  display: flex;
  flex: none;
  align-items: center;
}

/* 대문자는 짧은 표제(b)만 — 항목명·카테고리는 본문체 그대로(긴 대문자 줄은 읽히지 않는다) */
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-inline: var(--spacing-md);
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-dim);
}

.ticker__item b {
  color: var(--color-ink);
  font-weight: 800;
}

.ticker__num {
  font-family: var(--font-data);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.ticker__item .tri--up-f {
  color: var(--color-heat);
}

.ticker__sep {
  color: var(--color-ink-dim);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker__track {
    animation: marquee 40s var(--ease-linear) infinite;
  }
  .ticker:hover .ticker__track,
  .ticker:focus-visible .ticker__track {
    animation-play-state: paused;
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ── 표 6–50 ─────────────────────────────────────────────────────────── */
.rest {
  padding: var(--spacing-3xl) var(--spacing-gutter) var(--spacing-2xl);
  scroll-margin-top: 0;
}

.rest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-md) var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
}

.rest__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--text-2xl--line-height);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.rest__range {
  color: var(--color-ink-dim);
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 2.75rem;
  padding-inline: var(--spacing-md);
  border: 1px solid var(--color-ink-dim);
  font-size: var(--text-xs);
  transition:
    background-color 120ms var(--ease-snap),
    border-color 120ms var(--ease-snap),
    color 120ms var(--ease-snap);
}

.chip__n {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-dim);
}

.chip[aria-pressed="true"] {
  background: var(--color-heat-plate);
  border-color: var(--color-heat-plate);
  color: var(--color-ink-inverse);
}

.chip[aria-pressed="true"] .chip__n {
  color: var(--color-ink-inverse);
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--color-ink);
  }
  .chip[aria-pressed="true"]:hover {
    border-color: var(--color-heat-plate);
  }
}

.chart {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.k-rank {
  width: clamp(4rem, 6vw, 6rem);
}

.k-move {
  width: clamp(4rem, 5.5vw, 5.5rem);
}

.k-score {
  width: clamp(11rem, 20vw, 18rem);
}

.k-wks,
.k-peak {
  width: 4.5rem;
}

.k-spark {
  width: 8rem;
}

.chart thead th {
  height: 2.5rem;
  padding: 0 var(--spacing-sm);
  text-align: left;
  vertical-align: middle;
  color: var(--color-ink-dim);
  border-bottom: 1px solid var(--color-rule);
}

.chart__head--quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.band th {
  padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-xs);
  text-align: left;
  color: var(--color-ink-dim);
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.row td {
  height: 3rem;
  padding: 0 var(--spacing-sm);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-rule);
  transition:
    background-color 120ms var(--ease-snap),
    color 120ms var(--ease-snap);
}

.row--alt td {
  background: var(--color-surface);
}

.c-rank {
  font-family: var(--font-data);
  font-size: var(--text-rank);
  font-weight: 800;
  line-height: var(--text-rank--line-height);
  letter-spacing: -0.03em;
}

.c-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row__link {
  font-weight: 700;
  text-decoration: none;
}

.row__credit {
  margin-left: var(--spacing-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-dim);
}

.row__meta {
  display: none;
}

.c-score {
  white-space: nowrap;
}

/* 트랙 밑선 = 그 카테고리 1위 점수(막대 폭의 기준)를 보여 준다 */
.meter {
  display: inline-block;
  width: calc(100% - 4.5rem);
  height: var(--spacing-bar-thin);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-rule);
}

.meter__fill {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  background: var(--color-plate);
}

.row__val {
  display: inline-block;
  width: 4rem;
  margin-left: var(--spacing-sm);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 700;
  vertical-align: middle;
}

.c-wks,
.c-peak {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 행 반전 — 뼈색 판 + 역청 글자. 판 위에는 heat 를 두지 않는다(대비표 금지) — 표지·막대·선 전부 ink-inverse */
.row:focus-within td {
  background: var(--color-plate);
  color: var(--color-ink-inverse);
}

@media (hover: hover) {
  .row:hover td {
    background: var(--color-plate);
    color: var(--color-ink-inverse);
  }
  .row:hover .row__credit,
  .row:hover .mv,
  .rel__row:hover .rel__credit,
  .rel__row:hover .mv {
    color: var(--color-ink-inverse);
  }
  .row:hover .meter__fill,
  .rel__row:hover .meter__fill {
    background: var(--color-ink-inverse);
  }
  .row:hover .spark {
    stroke: var(--color-ink-inverse);
  }
  .row:hover .spark__dot {
    fill: var(--color-ink-inverse);
  }
}

.row:focus-within .row__credit,
.row:focus-within .mv {
  color: var(--color-ink-inverse);
}

.row:focus-within .meter__fill {
  background: var(--color-ink-inverse);
}

.row:focus-within .spark {
  stroke: var(--color-ink-inverse);
}

.row:focus-within .spark__dot {
  fill: var(--color-ink-inverse);
}

.row__link:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--color-ink-inverse);
  outline-offset: 3px;
}

.more__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  margin-top: var(--spacing-lg);
  padding-inline: var(--spacing-md);
  border: 1px solid var(--color-ink-dim);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.more__sum::-webkit-details-marker {
  display: none;
}

.more__hide {
  display: none;
}

.more[open] .more__show {
  display: none;
}

.more[open] .more__hide {
  display: inline;
}

.more[open] .more__arrow {
  transform: rotate(180deg);
}

.more[open] .more__sum {
  margin-bottom: var(--spacing-sm);
}

@media (hover: hover) {
  .more__sum:hover {
    border-color: var(--color-ink);
  }
}

/* ── 구획 머리 (요약 · 상세 구획들) ───────────────────────────────────── */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
}

.sec-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--text-2xl--line-height);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sec-sub {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-dim);
}

/* ── 이번 주 요약 ─────────────────────────────────────────────────────── */
.summary {
  padding: var(--spacing-2xl) var(--spacing-gutter);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-hair);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
  padding: var(--spacing-lg) var(--spacing-gutter) var(--spacing-xl);
  background: var(--color-surface);
}

.stat__n {
  margin-bottom: var(--spacing-md);
  font-family: var(--font-data);
  /* 4칸 한 줄에서 "412M" 이 칸을 넘지 않게(1440: 칸 안쪽 279px) — 토큰 상한을 폭으로 한 번 더 누른다 */
  font-size: min(var(--text-stat), 7vw);
  font-weight: 800;
  line-height: var(--text-stat--line-height);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat__unit {
  font-size: 0.5em;
  letter-spacing: 0;
  margin-left: 0.04em;
}

.stat__label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
}

.stat__sub {
  font-size: var(--text-sm);
  color: var(--color-ink-dim);
}

.stat__cmp {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: auto;
  padding-top: var(--spacing-lg);
  color: var(--color-ink-dim);
}

/* 비교 막대: 이번 주 = 뼈색 판, 지난주 = 막대 아래의 눈금(판 밖이라 뼈색 잉크) */
.gauge {
  position: relative;
  display: block;
  height: var(--spacing-bar-thin);
}

.gauge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w) * 100%);
  background: var(--color-plate);
}

.gauge__tick {
  position: absolute;
  top: calc(100% + 2px);
  left: calc(var(--w) * 100%);
  width: var(--spacing-rule-bold);
  height: var(--spacing-sm);
  margin-left: -1px;
  background: var(--color-ink);
}

/* ── 집계 방식 · 고지 ─────────────────────────────────────────────────── */
.method {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--spacing-xl) var(--spacing-2xl);
  padding: var(--spacing-2xl) var(--spacing-gutter) var(--spacing-3xl);
}

.method__main .sec-title {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
}

.formula {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.formula__line {
  display: block;
}

.formula b {
  color: var(--color-heat);
  font-weight: 700;
}

.rules {
  align-self: end;
  border-top: 1px solid var(--color-rule);
}

.rules__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--spacing-md);
  padding-block: var(--spacing-md);
  border-bottom: 1px solid var(--color-rule);
}

.rules dt {
  padding-top: 0.3em;
  color: var(--color-ink-dim);
}

.rules dd {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.rules dd .tri {
  vertical-align: 0.05em;
}

.rules dd .tri--up-f {
  color: var(--color-heat);
}

.rules dd .tri--down-o {
  color: var(--color-ink-dim);
}

.notice {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-gutter);
  border: 1px solid var(--color-ink);
  font-size: var(--text-lg);
  line-height: 1.4;
}

.notice__label {
  color: var(--color-heat);
}

.notice__text {
  max-width: 62ch;
}

/* ── 꼬리 ─────────────────────────────────────────────────────────────── */
.foot {
  container-type: inline-size;
  overflow: hidden;
  padding: var(--spacing-xl) var(--spacing-gutter) 0;
  background: var(--color-band);
}

.foot__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-dim);
}

.foot__notice {
  color: var(--color-ink);
}

.foot__weeks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-sm);
}

.foot__label {
  color: var(--color-ink);
}

.foot__off {
  text-decoration: line-through;
}

.foot__credit {
  justify-self: end;
  text-align: right;
}

.foot__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* 워드마크는 꼬리 폭에 맞춰 잰다 — Sora 800 "CHARTLINE" 은 6.11em(캔버스 실측), 자간 −0.02em 이면 5.93em */
.foot__mark {
  margin: var(--spacing-md) 0 -0.17em;
  font-family: var(--font-display);
  font-size: min(var(--text-wordmark), calc(100cqi / 6.02));
  font-weight: 800;
  line-height: var(--text-wordmark--line-height);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink);
}

/* ── 상세: breadcrumb · 히어로 ────────────────────────────────────────── */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--spacing-lg);
  padding-inline: var(--spacing-gutter);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-dim);
}

.crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.crumb__list li {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.crumb__list li + li::before {
  content: "/";
  padding-inline: var(--spacing-sm);
  color: var(--color-ink-dim);
}

.crumb__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
}

.crumb__list [aria-current] {
  color: var(--color-ink-dim);
}

.crumb__back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .crumb__back:hover {
    text-decoration: underline;
  }
}

/* 거대 1 은 0.43em 으로 좁다 — 5:7 이면 숫자와 제목 사이가 420px 비어 4:8 로 당겼다(제목 STATIC BLOOM 7.85em 은 8칸에 한 줄) */
.ihero {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: end;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-gutter) var(--spacing-2xl);
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
}

/* 거대 순위 숫자 — 비례 숫자(좁은 1), heat. 칸 높이를 채운다 */
.ihero__rank {
  font-family: var(--font-display);
  font-size: var(--text-mega);
  font-weight: 800;
  line-height: var(--text-mega--line-height);
  letter-spacing: -0.06em;
  color: var(--color-heat);
}

.ihero__body {
  padding-bottom: var(--spacing-sm);
}

.ihero__kicker {
  color: var(--color-ink-dim);
}

.ihero__title {
  margin-top: var(--spacing-md);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--text-3xl--line-height);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ihero__credit {
  margin-top: var(--spacing-md);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--text-xl--line-height);
  color: var(--color-ink-dim);
}

.figs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-hair);
  margin-top: var(--spacing-xl);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.fig {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-bg);
}

.fig dt {
  color: var(--color-ink-dim);
}

.fig dd {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-data);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pick {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 3.5rem;
  margin-top: var(--spacing-lg);
  padding-inline: var(--spacing-lg);
  border: 1px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 120ms var(--ease-snap),
    border-color 120ms var(--ease-snap),
    color 120ms var(--ease-snap),
    transform 100ms var(--ease-snap);
}

.pick:active {
  transform: scale(0.97);
}

.pick[aria-pressed="true"] {
  background: var(--color-heat-plate);
  border-color: var(--color-heat-plate);
  color: var(--color-ink-inverse);
}

@media (hover: hover) {
  .pick:hover {
    background: var(--color-plate);
    border-color: var(--color-plate);
    color: var(--color-ink-inverse);
  }
  .pick[aria-pressed="true"]:hover {
    background: var(--color-heat-plate);
    border-color: var(--color-heat-plate);
  }
}

/* ── 상세: 순위 이력 ─────────────────────────────────────────────────── */
.history,
.compare,
.notes,
.related {
  padding: var(--spacing-3xl) var(--spacing-gutter) 0;
}

.plot {
  padding-left: 3rem;
}

.plot__area {
  position: relative;
  height: 20rem;
  margin-block: var(--spacing-xl) var(--spacing-lg);
}

.plot__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plot__grid line {
  stroke: var(--color-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.plot__line {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.plot__y {
  position: absolute;
  left: -3rem;
  top: calc(var(--y) * 100%);
  width: 2.25rem;
  text-align: right;
  color: var(--color-ink-dim);
  font-variant-numeric: tabular-nums;
  translate: 0 -50%;
}

.pt {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: 0.625rem;
  height: 0.625rem;
  background: var(--color-ink);
  translate: -50% -50%;
  cursor: default;
}

/* 손가락·마우스 판정 영역을 넓힌다(점은 10px) */
.pt::before {
  content: "";
  position: absolute;
  inset: -0.875rem;
}

.pt--now {
  width: 0.875rem;
  height: 0.875rem;
  background: var(--color-heat);
}

.pt__tip {
  position: absolute;
  bottom: calc(100% + var(--spacing-sm));
  left: 50%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-plate);
  color: var(--color-ink-inverse);
  white-space: nowrap;
  opacity: 0;
  translate: -50% 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-snap);
}

.pt--top .pt__tip {
  top: calc(100% + var(--spacing-sm));
  bottom: auto;
}

/* 이번 주 점은 맨 위(1위) 오른쪽 끝 — 말풍선을 위로, 오른쪽 끝에 맞춰 계단 선을 덮지 않는다 */
.pt--now .pt__tip {
  right: 0;
  bottom: calc(100% + var(--spacing-sm));
  left: auto;
  translate: 0 0;
  background: var(--color-heat-plate);
  opacity: 1;
}

.pt:hover .pt__tip,
.pt:focus-visible .pt__tip {
  opacity: 1;
}

.hist {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-left: 3rem;
  border-top: 1px solid var(--color-rule);
}

.hist__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding-block: var(--spacing-sm);
}

.hist dt {
  color: var(--color-ink-dim);
}

.hist dd {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hist__cell--now dd {
  color: var(--color-heat);
}

/* ── 상세: 지표 비교 ─────────────────────────────────────────────────── */
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-md);
}

.keys__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  white-space: nowrap;
}

.key {
  display: inline-block;
  width: 1.5rem;
  height: var(--spacing-bar-thin);
}

.key--this {
  background: var(--color-heat-plate);
}

.key--two {
  background: var(--color-plate);
}

.key--median {
  border: 1px solid var(--color-ink-dim);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-hair);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.metric {
  padding: var(--spacing-lg) var(--spacing-gutter) var(--spacing-xl);
  background: var(--color-surface);
}

.metric__name {
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--text-xl--line-height);
  text-transform: uppercase;
}

.metric__bars {
  display: grid;
  gap: var(--spacing-md);
}

.mbar {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--text-sm);
}

.mbar__label {
  color: var(--color-ink-dim);
}

.mbar--this .mbar__label {
  color: var(--color-ink);
  font-weight: 700;
}

.mbar__track {
  display: block;
  height: var(--spacing-bar);
}

.mbar__fill {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  background: var(--color-plate);
  transform-origin: left center;
}

.mbar--this .mbar__fill {
  background: var(--color-heat-plate);
}

.mbar--median .mbar__fill {
  background: transparent;
  border: 1px solid var(--color-ink-dim);
}

.mbar__val {
  font-family: var(--font-data);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── 상세: 팬 노트 ────────────────────────────────────────────────────── */
.notes {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--spacing-xl);
}

.notes__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: var(--spacing-rule-bold) solid var(--color-ink);
}

.notes__list {
  border-top: var(--spacing-rule-bold) solid var(--color-ink);
}

.note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding-block: var(--spacing-lg);
  border-bottom: 1px solid var(--color-rule);
}

.note__meta {
  color: var(--color-ink-dim);
}

.note__handle {
  color: var(--color-ink);
}

.note__text {
  grid-column: 1;
  max-width: 60ch;
  font-size: var(--text-lg);
  line-height: 1.45;
}

.note__votes {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: var(--spacing-xs);
  color: var(--color-ink-dim);
  font-variant-numeric: tabular-nums;
}

/* ── 상세: 관련 항목 ─────────────────────────────────────────────────── */
.related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xl);
  padding-bottom: var(--spacing-3xl);
}

.rel__head {
  padding-bottom: var(--spacing-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--text-xl--line-height);
  text-transform: uppercase;
  border-bottom: var(--spacing-rule-bold) solid var(--color-ink);
}

.rel__row {
  display: grid;
  grid-template-columns: 3rem 3.5rem minmax(0, 1fr) minmax(0, 9rem);
  align-items: center;
  gap: var(--spacing-md);
  min-height: 3.5rem;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-rule);
  transition:
    background-color 120ms var(--ease-snap),
    color 120ms var(--ease-snap);
}

.rel__rank {
  font-family: var(--font-data);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rel__title {
  min-width: 0;
}

.rel__title a {
  font-weight: 700;
  text-decoration: none;
}

.rel__credit {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-dim);
}

.rel__score {
  display: grid;
  gap: var(--spacing-xs);
}

.rel__score .meter {
  width: 100%;
}

.rel__val {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rel__row:focus-within {
  background: var(--color-plate);
  color: var(--color-ink-inverse);
}

.rel__row:focus-within .rel__credit,
.rel__row:focus-within .mv {
  color: var(--color-ink-inverse);
}

.rel__row:focus-within .meter__fill {
  background: var(--color-ink-inverse);
}

.rel__title a:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--color-ink-inverse);
  outline-offset: 3px;
}

@media (hover: hover) {
  .rel__row:hover {
    background: var(--color-plate);
    color: var(--color-ink-inverse);
  }
}

/* ── 중간 폭 ─────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .tab {
    min-width: 8.5rem;
  }
  .bar__count {
    display: none;
  }
  .k-spark {
    width: 6.75rem;
  }
}

/* ── 모바일 (≤ 899px) — 다시 배치: 막대가 가로로 눕는다 ───────────────── */
@media (max-width: 899px) {
  .mast {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mark week"
      "nav nav";
    padding-inline: 0;
  }
  .mast__mark {
    grid-area: mark;
    padding-left: var(--spacing-gutter);
  }
  .mast__week {
    grid-area: week;
    padding-right: var(--spacing-gutter);
  }
  .mast__dates {
    display: none;
  }
  .mast__nav {
    grid-area: nav;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-rule);
  }
  .mast__link {
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 0;
  }
  .mast__link + .mast__link {
    border-left: 1px solid var(--color-rule);
  }

  .hero__title {
    position: static;
    max-width: none;
    padding: var(--spacing-md) var(--spacing-gutter) var(--spacing-sm);
    text-align: left;
    /* "RANKED LOUD." 7.97em(캔버스 실측) − 자간 → 390 폭 안에 한 줄 */
    font-size: min(var(--text-3xl), 11.2vw);
  }

  .bar {
    height: 3.5rem;
    gap: 0;
  }
  .tabs {
    flex: 1;
  }
  .tab {
    flex: 1;
    justify-content: center;
    min-width: 0;
    height: 2.75rem;
    padding-inline: var(--spacing-xs);
    font-size: var(--text-sm);
  }
  .week--bar {
    display: none;
  }
  .week--rest {
    display: flex;
    margin-left: auto;
  }

  .top5 {
    padding-top: 0;
  }
  .slabs {
    grid-template-columns: 1fr;
  }
  .slab {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "rank title move"
      "rank credit credit"
      "rank bar bar";
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-md);
    height: auto;
    min-height: 6.5rem;
    padding: var(--spacing-sm) var(--spacing-gutter);
    overflow: visible;
  }
  .slab__plate {
    grid-area: bar;
    position: static;
    height: var(--spacing-bar);
    margin-top: var(--spacing-xs);
    transform: scaleX(var(--ratio));
    transform-origin: left center;
  }
  .slab__rank {
    grid-area: rank;
    position: static;
    padding: 0;
    transform: none;
    color: var(--color-ink);
  }
  .slab--heat .slab__rank {
    color: var(--color-heat);
  }
  .slab__info {
    display: contents;
    color: var(--color-ink);
  }
  .slab__title {
    grid-area: title;
    grid-column: auto;
    align-self: end;
    font-size: var(--text-base);
    line-height: 1.25;
    text-wrap: pretty;
  }
  .slab__credit {
    grid-area: credit;
    grid-column: auto;
    color: var(--color-ink-dim);
  }
  .slab__score {
    grid-area: bar;
    position: relative;
    z-index: 1;
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-sm);
    font-size: var(--text-micro);
    line-height: var(--spacing-bar);
    color: var(--color-ink-inverse);
  }
  .slab__move {
    grid-area: move;
    align-self: end;
    margin-top: 0;
  }
  .slab__info .mv--up,
  .slab__info .mv--new {
    color: var(--color-heat);
  }
  .slab__info .mv--down,
  .slab__info .mv--re,
  .slab__info .mv--same {
    color: var(--color-ink-dim);
  }
  .slab__trend {
    display: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .top5.is-entering .slab__plate {
      animation-name: bar-grow;
    }
    .top5.is-entering .slab__rank {
      animation: none;
    }
  }

  .ticker {
    height: 2.5rem;
  }

  .rest {
    padding-top: var(--spacing-2xl);
  }
  .rest__head {
    gap: var(--spacing-sm);
  }
  .rest__title {
    width: 100%;
  }
  .chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    gap: var(--spacing-xs);
  }
  .chip {
    justify-content: space-between;
    padding-inline: var(--spacing-md);
  }

  .chart,
  .chart tbody {
    display: block;
  }
  .chart colgroup,
  .chart thead {
    display: none;
  }
  .band {
    display: block;
  }
  .band th {
    display: block;
    padding-inline: var(--spacing-xs);
  }
  .row {
    display: grid;
    grid-template-columns: 2.5rem 2.75rem minmax(0, 1fr) 4rem;
    grid-template-areas:
      "rank move title spark"
      "rank move score score";
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-xs);
    border-bottom: 1px solid var(--color-rule);
    transition: background-color 120ms var(--ease-snap);
  }
  .row--alt {
    background: var(--color-surface);
  }
  .row td,
  .row--alt td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }
  .row:focus-within {
    background: var(--color-plate);
    color: var(--color-ink-inverse);
  }
  .row:focus-within td {
    background: none;
  }
  @media (hover: hover) {
    .row:hover {
      background: var(--color-plate);
      color: var(--color-ink-inverse);
    }
    .row:hover td {
      background: none;
    }
    .row:hover .row__meta {
      color: var(--color-ink-inverse);
    }
  }
  .row .c-rank {
    grid-area: rank;
    align-self: start;
    font-size: var(--text-xl);
  }
  .row .c-move {
    grid-area: move;
    align-self: start;
    padding-top: var(--spacing-xs);
  }
  .row .c-title {
    grid-area: title;
    white-space: normal;
  }
  .row__link {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .row__credit {
    margin-left: 0;
    font-size: var(--text-xs);
  }
  .row__meta {
    display: inline;
    font-size: var(--text-xs);
    color: var(--color-ink-dim);
  }
  .row:focus-within .row__meta {
    color: var(--color-ink-inverse);
  }
  .row .c-score {
    grid-area: score;
    display: flex;
    align-items: center;
  }
  .row .meter {
    flex: 1;
    width: auto;
  }
  .row .c-wks,
  .row .c-peak {
    display: none;
  }
  .row .c-spark {
    grid-area: spark;
    justify-self: end;
  }
  .row .c-spark .spark {
    width: 4rem;
    height: 1rem;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  }
  .stat__n {
    font-size: min(var(--text-stat), 12vw);
  }
  .stat__label {
    font-size: var(--text-sm);
  }

  .method {
    grid-template-columns: 1fr;
    padding-bottom: var(--spacing-2xl);
  }
  .rules__row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
  .notice {
    font-size: var(--text-base);
  }

  .foot__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .foot__credit {
    justify-self: start;
    text-align: left;
  }

  .crumb {
    padding-block: 0;
  }

  .ihero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: var(--spacing-md);
  }
  .ihero__rank {
    font-size: max(var(--text-mega), 66vw);
  }
  .ihero__title {
    margin-top: var(--spacing-sm);
    font-size: min(var(--text-3xl), 12vw);
  }
  .ihero__credit {
    margin-top: var(--spacing-sm);
  }
  .figs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: var(--spacing-lg);
  }
  .fig {
    grid-column: span 2;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }
  .fig:nth-child(n + 4) {
    grid-column: span 3;
  }
  .pick {
    width: 100%;
    justify-content: center;
  }

  .history,
  .compare,
  .notes,
  .related {
    padding-top: var(--spacing-2xl);
  }
  .plot {
    padding-left: 2.25rem;
  }
  .plot__area {
    height: 13.75rem;
  }
  .plot__y {
    left: -2.25rem;
    width: 1.75rem;
  }
  .hist {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-left: 0;
  }
  .hist__cell:nth-child(n + 7) {
    border-top: 1px solid var(--color-rule);
  }

  .metrics {
    grid-template-columns: 1fr;
  }
  .mbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label val"
      "track track";
    gap: var(--spacing-xs) var(--spacing-md);
  }
  .mbar__label {
    grid-area: label;
  }
  .mbar__val {
    grid-area: val;
  }
  .mbar__track {
    grid-area: track;
  }

  .notes,
  .related {
    grid-template-columns: 1fr;
  }
  .note__text {
    font-size: var(--text-base);
  }
  .rel__row {
    grid-template-columns: 2.25rem 3rem minmax(0, 1fr) 5.5rem;
    gap: var(--spacing-sm);
    padding-inline: var(--spacing-xs);
  }
}

/* ── 동작 줄이기 — 도는 것 0, 막대는 바로 새 높이로 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}