/* 회원 랭킹 (/ranking) */
.rk { display: flex; flex-direction: column; gap: var(--sp-5); }
.rk .pills .pill { min-height: 36px; font-size: var(--fs-sm); }

/* 한 줄 = 순위 · 회원 · 곁 정보 · 값. 글을 읽는 영역이라 불투명 바탕 */
.rk-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-solid); overflow: hidden; }
.rk-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4); min-height: 60px; padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--line); }
.rk-row:last-child { border-bottom: 0; }
.rk-row:hover { background: var(--hover); }
.rk-no { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rk-user { color: var(--text); }
.rk-user:hover { color: var(--text-strong); }
.rk-user .user__name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.rk-sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.rk-value { min-width: 88px; text-align: right; font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rk-value small { margin-left: 2px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); }

/* 1~3위 시상대 (명예의 전당 색 · 글꼴): 2위 · 1위 · 3위 순으로 놓고 1위가 가장 높음. 뒤에 조명, 아래 붉은 단 */
.rk-pod { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--sp-3); max-width: 640px; width: 100%; margin: 0 auto; padding: var(--sp-10) 0 0; isolation: isolate; } /* 작게: 가운데 640px 안 */
.rk-pod::before { content: ''; position: absolute; inset: 0 8% auto; height: 100%; z-index: -1; background: radial-gradient(60% 70% at 50% 0%, rgba(var(--hof-gold-rgb), .16), transparent 70%); pointer-events: none; } /* 위에서 내리는 조명 */
.rk-card { --m: var(--hof-silver); position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-5) var(--sp-3) 0; color: var(--hof-cream); text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--m) 10%, var(--hof-plate)), var(--hof-plate) 60%); border: 1px solid color-mix(in srgb, var(--m) 45%, transparent); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -10px 24px -18px color-mix(in srgb, var(--m) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--m) 40%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.rk-card:hover { color: var(--hof-cream); transform: translateY(-4px); box-shadow: 0 -22px 50px -24px color-mix(in srgb, var(--m) 90%, transparent), inset 0 1px 0 color-mix(in srgb, var(--m) 60%, transparent); }
.rk-card--1 { --m: var(--hof-gold); order: 2; padding-top: var(--sp-6); }
.rk-card--2 { --m: var(--hof-silver); order: 1; }
.rk-card--3 { --m: var(--hof-bronze); order: 3; }
.rk-card__crown { position: absolute; top: -30px; left: 50%; z-index: 2; transform: translateX(-50%) rotate(-8deg); color: var(--hof-gold); filter: drop-shadow(0 0 12px rgba(var(--hof-gold-rgb), .8)); animation: rk-crown 2.4s ease-in-out infinite; } /* 1위 왕관: 크게 · 살짝 기울여 둥실 */
@keyframes rk-crown { 50% { transform: translateX(-50%) translateY(-3px) rotate(-8deg); } }
/* 명판 반짝임: 왼쪽 위에서 오른쪽으로 대각선 빛줄기가 지나감 (1 · 2 · 3위 차례로)
   빛줄기만 옮김(transform) → 화면을 다시 그리지 않아 매끄러움. 예전엔 배경 위치를 움직여 빛이 지날 때마다 명판 전체를 다시 그려 한 번씩 끊겼음 */
.rk-card__shine { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.rk-card__shine::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; background: linear-gradient(115deg, transparent 20%, rgba(var(--hof-gold-light-rgb), .28) 45%, rgba(var(--hof-gold-light-rgb), .08) 58%, transparent 80%); transform: translateX(-110%); animation: rk-shine 3.6s ease-in-out infinite; will-change: transform; }
.rk-card--2 .rk-card__shine::before { animation-delay: .5s; }
.rk-card--3 .rk-card__shine::before { animation-delay: 1s; }
@keyframes rk-shine { 0% { transform: translateX(-110%); } 45%, 100% { transform: translateX(160%); } }
.rk-card__crown { will-change: transform; } /* 둥실거림도 옮기기만 (그림자 효과를 다시 그리지 않게) */
@media (prefers-reduced-motion: reduce) { .rk-card__shine::before, .rk-card__crown { animation: none; } }
.rk-card__rank { position: absolute; top: var(--sp-2); left: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1; background: linear-gradient(180deg, var(--hof-gold-light), var(--m) 55%, color-mix(in srgb, var(--m) 55%, #000)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk-card__face .avatar { width: 48px; height: 48px; font-size: var(--fs-lg); box-shadow: 0 0 0 2px var(--m), 0 6px 16px -6px color-mix(in srgb, var(--m) 80%, transparent); }
.rk-card--1 .rk-card__face .avatar { width: 56px; height: 56px; }
.rk-card__name { max-width: 100%; margin-top: var(--sp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--hof-font); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--hof-gold-light); }
.rk-card--1 .rk-card__name { font-size: var(--fs-lg); }
.rk-card__value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--m); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px color-mix(in srgb, var(--m) 40%, transparent); }
.rk-card__value small { margin-left: 2px; font-family: var(--font); font-size: var(--fs-xs); color: var(--hof-cream); }
.rk-card__sub { min-height: 1.4em; font-size: var(--fs-xs); color: var(--text-sub); }
/* 단상: 1위가 가장 높은 붉은 받침 (명예의 전당 카펫 색) */
.rk-card__base { align-self: stretch; height: 10px; margin: var(--sp-2) calc(var(--sp-3) * -1) 0; background: var(--hof-carpet); border-top: 2px solid var(--m); }
.rk-card--1 .rk-card__base { height: 22px; }
.rk-card--2 .rk-card__base { height: 16px; }
.rk-pod + .rk-list { margin-top: 0; } /* 시상대 아래 목록 */

.rk-empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }

@media (max-width: 480px) {
  .rk-card__face .avatar, .rk-card--1 .rk-card__face .avatar { width: 44px; height: 44px; }
  .rk-card__name, .rk-card--1 .rk-card__name { font-size: var(--fs-sm); }
}
}
@media (max-width: 480px) {
  .rk-card .lv, .rk-card__sub { display: none; }
  .rk-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
  .rk-sub { grid-column: 2 / -1; grid-row: 2; margin-top: -6px; padding-left: calc(var(--icon-size) + var(--sp-2)); }
  .rk-value { min-width: 0; }
}