/* 트렌드 탭 — genre 서브탭 화면 스타일. 두 셸 공용(토큰만). 새 셸 전용은 body.shell-v2 로 가둔다.
 * 순위는 서열이다 — 1→2→3 이 세로 흐르게 놓고(포디움 → 2열 목록, 왼쪽 열을 다 읽고 오른쪽으로),
 * 숫자는 전부 tabular 로 자리가 맞게 한다. 데이터에 파랑 안 쓴다(DESIGN.md) — 잉크 단색만. */

.gr-entries { display: flex; flex-direction: column; gap: var(--sp-lg); }
.gr-meta-count { font-variant-numeric: tabular-nums; }

/* ── 커버 ── */
.gr-cover {
  flex: none; aspect-ratio: 3 / 4; background: var(--surface-1); border-radius: var(--r-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.gr-cover--lg { width: 116px; border-radius: var(--r-md); }
.gr-cover--sm { width: 44px; }
.gr-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-cover-noimg { font-size: var(--fs-fine); color: var(--ink-48); text-align: center; padding: 2px; line-height: 1.2; }

/* ── 공통 글 ── */
.gr-title { color: var(--ink); font-weight: 600; font-size: var(--fs-caption); line-height: var(--lh-caption); min-width: 0; }
/* 제목은 바깥 링크여도 잉크다 — 새 셸의 `body.shell-v2 a`(파랑)를 클래스 둘로 이긴다.
   한 화면에 37개가 전부 파랗면 순위(숫자·지표)보다 제목이 먼저 튀어, '나간다'는 표시는 옆 아이콘이 진다. */
.gr-title.gr-title--link { color: var(--ink); text-decoration: none; display: inline; }
.gr-title--link:hover { text-decoration: underline; text-underline-offset: 2px; }
.gr-title--link:focus-visible { outline: none; border-radius: var(--r-xs); box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }
/* 바깥으로 나간다는 표시 — 제목 끝에 붙어 같이 줄바꿈한다. */
.gr-title-ext { display: inline-block; vertical-align: -2px; margin-left: 4px; color: var(--ink-48); }
.gr-author { font-size: var(--fs-fine); color: var(--ink-48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.gr-metric-value { font-size: var(--fs-caption); color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.gr-metric-label { font-size: var(--fs-fine); color: var(--ink-48); }

/* ── 1~3위 포디움 — 커버가 커야 앞자리다 ── */
.gr-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); }
.gr-podium-card {
  display: flex; gap: var(--sp-md); min-width: 0;
  padding: var(--sp-md); border-radius: var(--r-lg); background: var(--surface-1);
}
.gr-podium-body { display: flex; flex-direction: column; gap: var(--sp-xxs); min-width: 0; flex: 1; }
.gr-podium-rank {
  font-family: var(--font-heading); font-size: var(--fs-lead); line-height: 1; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-xxs);
}
.gr-title--lg {
  font-size: var(--fs-body); line-height: var(--lh-caption);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 지표는 카드 바닥에 붙인다 — 제목이 한 줄이든 두 줄이든 세 카드의 수치가 같은 높이에서 읽힌다. */
.gr-podium-card .gr-metric { align-items: flex-start; margin-top: auto; padding-top: var(--sp-xs); }

/* ── 4위부터 — 2열 순위 목록. 열은 CSS 가 정하고, 끊길 자리(--gr-rows)만 호출부가 준다 ──
   ⚠️ CSS columns 가 아니라 grid 인 이유: columns 는 지연 로드된 커버 때문에 행 가운데에서 잘린다. */
.gr-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--gr-rows, 1), auto);
  grid-auto-flow: column;
  column-gap: var(--sp-xl); row-gap: 0;
}
.gr-row {
  display: grid; grid-template-columns: 3ch 44px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-xs);
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  transition: background-color .18s ease;
}
@media (hover: hover) { .gr-row:hover { background: var(--surface-1); } }
.gr-row-rank { font-size: var(--fs-caption); color: var(--ink-48); font-variant-numeric: tabular-nums; text-align: right; }
.gr-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gr-row .gr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 뼈대 — 위 모양을 그대로 닮는다(스켈레톤은 모양이 곧 요점) ── */
.gr-skel { display: flex; flex-direction: column; gap: var(--sp-lg); }
.gr-podium-skel { --skel-cols: 3; --skel-gap: var(--sp-md); --skel-card-pad: var(--sp-md); --skel-card-bg: var(--surface-1); --skel-card-r: var(--r-lg); }
.gr-podium-skel .skel-card { flex-direction: row; align-items: flex-start; gap: var(--sp-md); }
.gr-podium-skel .skel-thumb { width: 116px; aspect-ratio: 3 / 4; flex: none; border-radius: var(--r-md); }
.gr-podium-skel .skel-lines { flex: 1; min-width: 0; }
.gr-list-skel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-xl); row-gap: var(--sp-sm);
}
.gr-list-skel .skel-row { padding: var(--sp-xs); }
.gr-list-skel .skel-avatar { width: 44px; height: 59px; border-radius: var(--r-sm); }

/* ── 좁은 화면 — 포디움도 목록도 한 열로 ── */
@media (max-width: 810px) {
  .gr-podium { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .gr-podium-card { padding: var(--sp-sm); }
  .gr-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .gr-row { gap: var(--sp-xs); min-height: 56px; }
  .gr-podium-skel { --skel-cols: 1; }
  .gr-list-skel { grid-template-columns: 1fr; }
}