.hall-of-fame {
  padding: 110px max(28px, calc((100vw - 1144px) / 2));
  color: #f7f3ff;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 200, 61, .2), transparent 28%),
    linear-gradient(145deg, #17132d, #221843 55%, #151125);
}
.ranking-heading {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 42px;
}
.hall-of-fame .eyebrow { color: #ffc83d; }
.ranking-summary { text-align: right; }
.ranking-summary strong { display: block; color: #ffc83d; font-size: 48px; line-height: 1; }
.ranking-summary span { font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.ranking-summary p { max-width: 430px; margin: 13px 0 0 auto; color: #bbb5cf; font-size: 13px; }
/* minmax(0,1fr): auto 트랙이 테이블 min-width(850px)의 본질 폭을 물려받아
   뷰포트를 넘는 것을 차단 — 좁은 화면에선 .ranking-table-wrap 이 내부 스크롤로 처리 */
.ranking-groups { display: grid; grid-template-columns: minmax(0, 1fr); }
.ranking-tab-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ranking-tablist { display: flex; flex-wrap: wrap; gap: 10px; }
.ranking-tablist label {
  display: grid; gap: 3px; padding: 13px 22px;
  border: 1px solid rgba(126, 105, 177, .42); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: rgba(10, 7, 24, .3); color: #b9b0d0; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ranking-tablist label:hover { color: #fff; background: rgba(37, 27, 70, .6); }
.ranking-tab-title { font-size: clamp(15px, 2.2vw, 19px); font-weight: 900; }
.ranking-tab-meta { font-size: 11px; font-weight: 800; letter-spacing: .05em; opacity: .78; }
#ranking-tab-recent:checked ~ .ranking-tablist label[for="ranking-tab-recent"],
#ranking-tab-archive:checked ~ .ranking-tablist label[for="ranking-tab-archive"] {
  color: #fff; border-color: rgba(255, 200, 61, .5);
  background: linear-gradient(160deg, rgba(255, 200, 61, .18), rgba(10, 7, 24, .5) 70%);
}
#ranking-tab-recent:checked ~ .ranking-tablist label[for="ranking-tab-recent"] .ranking-tab-meta,
#ranking-tab-archive:checked ~ .ranking-tablist label[for="ranking-tab-archive"] .ranking-tab-meta { color: #ffc83d; opacity: 1; }
#ranking-tab-recent:focus-visible ~ .ranking-tablist label[for="ranking-tab-recent"],
#ranking-tab-archive:focus-visible ~ .ranking-tablist label[for="ranking-tab-archive"] { outline: 3px solid #ffc83d; outline-offset: 3px; }
.ranking-panel {
  display: none; padding: 24px; border: 1px solid rgba(126, 105, 177, .42);
  border-radius: 0 28px 28px 28px; background: rgba(10, 7, 24, .36); box-shadow: 0 20px 55px rgba(5, 3, 16, .2);
}
#ranking-tab-recent:checked ~ .ranking-panel-recent,
#ranking-tab-archive:checked ~ .ranking-panel-archive { display: block; }
.ranking-panel-recent { border-color: rgba(255, 200, 61, .5); background: linear-gradient(145deg, rgba(255, 200, 61, .1), rgba(10, 7, 24, .42) 42%); }
.ranking-table-wrap { overflow-x: auto; border: 2px solid #3b315d; border-radius: 20px; background: rgba(11, 8, 25, .48); }
.ranking-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 16px 18px; border-bottom: 1px solid #332b50; text-align: right; }
.ranking-table thead th { color: #978dac; font-size: 11px; letter-spacing: .07em; }
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) { text-align: left; }
.ranking-table tbody tr:last-child th, .ranking-table tbody tr:last-child td { border-bottom: 0; }
.ranking-table tbody td:first-child { width: 78px; color: #b9afd2; }
.ranking-table tbody th { color: white; font-size: 15px; }
.ranking-table tbody td { color: #bbb5c8; font-size: 13px; }
.ranking-table tbody td strong { color: #fff; font-size: 17px; }
.ranking-version { display: inline-flex; padding: 5px 9px; border: 1px solid rgba(117, 218, 255, .35); border-radius: 999px; color: #9fe6ff; background: rgba(46, 143, 183, .13); font-size: 11px; font-weight: 900; white-space: nowrap; }
.ranking-podium { background: rgba(255, 200, 61, .08); }
.ranking-podium-1 td:first-child b { color: #ffd54f; }
.ranking-podium-2 td:first-child b { color: #cfd8dc; }
.ranking-podium-3 td:first-child b { color: #ffa45b; }
.ranking-empty { padding: 55px 25px; border: 2px dashed #51466d; border-radius: 20px; color: #aaa2bb; text-align: center; }
.ranking-privacy { margin: 15px 0 0; color: #827b93; font-size: 11px; text-align: right; }
.ranking-retention { margin: 5px 0 0; color: #827b93; font-size: 11px; text-align: right; }
@media (max-width: 700px) {
  .hall-of-fame { padding: 75px 18px; }
  .ranking-heading { grid-template-columns: 1fr; gap: 25px; }
  .ranking-summary { text-align: left; }
  .ranking-summary p { margin-left: 0; }
  .ranking-summary strong { font-size: 40px; }
  .ranking-panel { padding: 16px; border-radius: 0 22px 22px 22px; }
  .ranking-tablist { gap: 6px; }
  .ranking-tablist label { flex: 1 1 0; padding: 11px 12px; border-radius: 14px 14px 0 0; text-align: center; }
  .ranking-tab-meta { font-size: 10px; }
  /* 테이블 → 2줄 카드형 행: 가로 스크롤 없이 전 컬럼(단계·환생·버전·접속)을 표시 */
  .ranking-table { min-width: 0; }
  .ranking-table thead { display: none; }
  .ranking-table tbody { display: block; }
  .ranking-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 13px;
    border-bottom: 1px solid #332b50;
  }
  .ranking-table tbody tr:last-child { border-bottom: 0; }
  .ranking-table tbody th, .ranking-table tbody td {
    display: block; padding: 0; border: 0; text-align: left;
  }
  .ranking-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; width: auto; }
  .ranking-table tbody th:nth-child(2) { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ranking-table tbody td:nth-child(6) { grid-column: 3; grid-row: 1; font-size: 11px; }
  .ranking-table tbody td:nth-child(3) { grid-column: 1; grid-row: 2; white-space: nowrap; }
  .ranking-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .ranking-table tbody td:nth-child(4)::before { content: "환생 "; color: #978dac; }
  .ranking-table tbody td:nth-child(5) { grid-column: 3; grid-row: 2; justify-self: end; }
  .ranking-privacy, .ranking-retention { text-align: left; }
}