/* ================================================
   RunnerOn - 명예의 전당 (Hall of Fame) Ranking
   ================================================ */

.runneron_ranking-page {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(ellipse at top center, #0f1729 0%, #080c18 40%, #050812 100%);
    padding: 0 0 80px;
    overflow: hidden;
}

/* === 배경 별 반짝이 === */
.runneron_ranking-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4) 50%, transparent 50%),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,215,0,0.5) 50%, transparent 50%),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.25) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.35) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,215,0,0.4) 50%, transparent 50%),
        radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 35% 90%, rgba(56,189,248,0.4) 50%, transparent 50%),
        radial-gradient(1px 1px at 75% 65%, rgba(255,255,255,0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 5% 50%, rgba(255,215,0,0.3) 50%, transparent 50%);
    animation: runneron_ranking-stars-twinkle 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes runneron_ranking-stars-twinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 배경 파티클 애니메이션 */
.runneron_ranking-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.runneron_ranking-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(60px);
}

.runneron_ranking-particle--1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #4e8fff, transparent);
    top: -100px; left: -100px;
    animation: runneron_ranking-float 20s ease-in-out infinite;
}

.runneron_ranking-particle--2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #FFD700, transparent);
    top: 10%; right: -80px;
    animation: runneron_ranking-float 16s ease-in-out infinite reverse;
}

.runneron_ranking-particle--3 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #ff7f50, transparent);
    bottom: 20%; left: 10%;
    animation: runneron_ranking-float 22s ease-in-out infinite 3s;
}

.runneron_ranking-particle--4 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #a78bfa, transparent);
    top: 50%; right: 20%;
    animation: runneron_ranking-float 18s ease-in-out infinite 5s;
}

.runneron_ranking-particle--5 {
    width: 150px; height: 150px;
    background: radial-gradient(circle, #34d399, transparent);
    bottom: 10%; right: 5%;
    animation: runneron_ranking-float 24s ease-in-out infinite 2s;
}

@keyframes runneron_ranking-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.1); }
    50% { transform: translate(-20px, 30px) scale(0.9); }
    75% { transform: translate(40px, 20px) scale(1.05); }
}

/* 히어로 타이틀 */
.runneron_ranking-hero {
    text-align: center;
    padding: 60px 0 40px;
    position: relative;
    z-index: 1;
}

.runneron_ranking-trophy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.25), rgba(255,165,0,0.08));
    border: 1px solid rgba(255,215,0,0.25);
    margin-bottom: 20px;
    animation: runneron_ranking-trophy-pulse 3s ease-in-out infinite;
    position: relative;
}

/* 트로피 주변 회전 링 */
.runneron_ranking-trophy-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255,215,0,0.4);
    border-right-color: rgba(255,165,0,0.2);
    animation: runneron_ranking-ring-spin 4s linear infinite;
}

.runneron_ranking-trophy-icon svg {
    width: 52px;
    height: 52px;
}

@keyframes runneron_ranking-trophy-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(255,215,0,0.15), 0 0 80px rgba(255,215,0,0.06); transform: scale(1); }
    50% { box-shadow: 0 0 50px rgba(255,215,0,0.3), 0 0 100px rgba(255,215,0,0.12); transform: scale(1.08); }
}

.runneron_ranking-title {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 30%, #ffffff 60%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: runneron_ranking-shimmer 4s linear infinite;
}

@keyframes runneron_ranking-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.runneron_ranking-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
    margin: 0;
    font-weight: 400;
}

/* 탭 */
.runneron_ranking-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 48px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 4px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.08);
}

.runneron_ranking-tab {
    flex: 1;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    border-radius: 999px;
    transition: all 0.25s ease;
    text-decoration: none;
}

.runneron_ranking-tab:hover {
    color: rgba(255,255,255,0.7);
}

.runneron_ranking-tab--active {
    background: linear-gradient(135deg, #4e8fff, #38bdf8);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(78,143,255,0.4);
}

/* 포디엄 (상위 3명) */
.runneron_ranking-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    margin-bottom: 48px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.runneron_ranking-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 180px;
    padding: 20px 12px 0;
    border-radius: 24px 24px 0 0;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-bottom: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: default;
}

.runneron_ranking-podium-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.runneron_ranking-podium--gold {
    background: linear-gradient(180deg, rgba(255,215,0,0.06) 0%, rgba(255,215,0,0.02) 50%, transparent 100%);
    border-color: rgba(255,215,0,0.1);
}

.runneron_ranking-podium--gold:hover {
    box-shadow: 0 20px 80px rgba(255,215,0,0.15), 0 0 40px rgba(255,215,0,0.08);
}

.runneron_ranking-podium--silver {
    background: linear-gradient(180deg, rgba(192,192,192,0.04) 0%, transparent 100%);
    border-color: rgba(192,192,192,0.06);
}

.runneron_ranking-podium--bronze {
    background: linear-gradient(180deg, rgba(205,127,50,0.04) 0%, transparent 100%);
    border-color: rgba(205,127,50,0.06);
}

/* gold item already styled above, just adding margin */

/* === 1등 스포트라이트 광선 효과 === */
.runneron_ranking-podium-spotlight {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
}

.runneron_ranking-podium-rays {
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, rgba(255,215,0,0.06) 10deg, transparent 20deg,
            transparent 40deg, rgba(255,215,0,0.04) 50deg, transparent 60deg,
            transparent 80deg, rgba(255,215,0,0.06) 90deg, transparent 100deg,
            transparent 120deg, rgba(255,215,0,0.04) 130deg, transparent 140deg,
            transparent 160deg, rgba(255,215,0,0.06) 170deg, transparent 180deg,
            transparent 200deg, rgba(255,215,0,0.04) 210deg, transparent 220deg,
            transparent 240deg, rgba(255,215,0,0.06) 250deg, transparent 260deg,
            transparent 280deg, rgba(255,215,0,0.04) 290deg, transparent 300deg,
            transparent 320deg, rgba(255,215,0,0.06) 330deg, transparent 340deg,
            transparent 360deg
        );
    border-radius: 50%;
    animation: runneron_ranking-rays-spin 20s linear infinite;
}

@keyframes runneron_ranking-rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.runneron_ranking-podium-glow-ring {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, rgba(255,165,0,0.05) 50%, transparent 70%);
    animation: runneron_ranking-glow-pulse 3s ease-in-out infinite;
}

@keyframes runneron_ranking-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* === 격차 표시 === */
.runneron_ranking-podium-gap {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,143,80,0.7);
    margin-top: 4px;
    padding: 3px 10px;
    background: rgba(255,143,80,0.08);
    border-radius: 999px;
    border: 1px solid rgba(255,143,80,0.12);
    white-space: nowrap;
}

.runneron_ranking-podium-crown {
    font-size: 28px;
    margin-bottom: -8px;
    animation: runneron_ranking-crown-bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(255,215,0,0.4));
    position: relative;
    z-index: 1;
}

@keyframes runneron_ranking-crown-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-3deg); }
    75% { transform: translateY(-4px) rotate(3deg); }
}

.runneron_ranking-podium-medal {
    font-size: 24px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.runneron_ranking-podium-avatar-wrap {
    position: relative;
    width: 72px; height: 72px;
    margin-bottom: 12px;
    z-index: 1;
}

.runneron_ranking-podium-avatar-wrap--gold {
    width: 100px; height: 100px;
}

.runneron_ranking-podium-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(192,192,192,0.6), rgba(192,192,192,0.2), rgba(192,192,192,0.6));
    animation: runneron_ranking-ring-spin 6s linear infinite;
}

.runneron_ranking-podium--gold .runneron_ranking-podium-avatar-wrap::before {
    background: conic-gradient(from 0deg, #FFD700, #FFA500, #FFD700, #ffffff, #FFD700);
    box-shadow: 0 0 30px rgba(255,215,0,0.3);
    animation: runneron_ranking-ring-spin 3s linear infinite;
}

.runneron_ranking-podium--bronze .runneron_ranking-podium-avatar-wrap::before {
    background: conic-gradient(from 0deg, #CD7F32, #8B4513, #CD7F32, #DEB887, #CD7F32);
}

@keyframes runneron_ranking-ring-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.runneron_ranking-podium-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    background: #1e293b;
    border: 3px solid #0f172a;
}

.runneron_ranking-podium-rank {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #1e293b;
    border: 2px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    z-index: 2;
}

.runneron_ranking-podium--gold .runneron_ranking-podium-rank {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FFD700;
    color: #1a1a1a;
}

.runneron_ranking-podium--silver .runneron_ranking-podium-rank {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    border-color: #C0C0C0;
    color: #1a1a1a;
}

.runneron_ranking-podium--bronze .runneron_ranking-podium-rank {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
    border-color: #CD7F32;
}

.runneron_ranking-podium-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

.runneron_ranking-podium-name--gold {
    font-size: 19px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(255,215,0,0.3));
}

.runneron_ranking-podium-realname {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.runneron_ranking-podium-distance {
    font-size: 18px;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
    font-feature-settings: "tnum";
    position: relative;
    z-index: 1;
}

.runneron_ranking-podium-distance--gold {
    font-size: 26px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 40%, #ffffff 70%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: runneron_ranking-shimmer 4s linear infinite;
    position: relative;
}

.runneron_ranking-podium-bar {
    width: 100%;
    margin-top: 16px;
    border-radius: 12px 12px 0 0;
    position: relative;
    overflow: hidden;
    transform-origin: bottom center;
    max-height: 0;
    opacity: 0;
    transition: max-height 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.runneron_ranking-podium-bar.runneron_ranking-bar-animate {
    max-height: 200px;
    opacity: 1;
}

.runneron_ranking-podium-bar--gold {
    height: 130px;
    background: linear-gradient(180deg, rgba(255,215,0,0.30) 0%, rgba(255,165,0,0.12) 40%, rgba(255,165,0,0.05) 100%);
    border: 1px solid rgba(255,215,0,0.25);
    border-bottom: none;
    box-shadow: 0 -10px 50px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,215,0,0.3);
    border-radius: 16px 16px 0 0;
}

/* 골드 바 내부 빛나는 필 효과 */
.runneron_ranking-podium-bar-fill {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,215,0,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 20%, rgba(255,215,0,0.1), transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(255,165,0,0.08), transparent 60%);
    animation: runneron_ranking-bar-fill-pulse 2.5s ease-in-out infinite;
}

@keyframes runneron_ranking-bar-fill-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 골드 바 숫자 */
.runneron_ranking-podium-bar--gold::before {
    content: '1';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36px;
    font-weight: 900;
    color: rgba(255,215,0,0.12);
    z-index: 1;
    font-feature-settings: "tnum";
}

.runneron_ranking-podium-bar--silver {
    height: 90px;
    background: linear-gradient(180deg, rgba(192,192,192,0.22) 0%, rgba(192,192,192,0.06) 100%);
    border: 1px solid rgba(192,192,192,0.18);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(192,192,192,0.2);
    border-radius: 12px 12px 0 0;
}

.runneron_ranking-podium-bar--silver::before {
    content: '2';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 900;
    color: rgba(192,192,192,0.1);
    z-index: 1;
}

.runneron_ranking-podium-bar--bronze {
    height: 65px;
    background: linear-gradient(180deg, rgba(205,127,50,0.22) 0%, rgba(205,127,50,0.06) 100%);
    border: 1px solid rgba(205,127,50,0.18);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(205,127,50,0.2);
    border-radius: 12px 12px 0 0;
}

.runneron_ranking-podium-bar--bronze::before {
    content: '3';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 900;
    color: rgba(205,127,50,0.1);
    z-index: 1;
}

/* 바 상단 빛 슬라이드 */
.runneron_ranking-podium-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; right: 0; bottom: 0;
    width: 200%;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: runneron_ranking-bar-gleam 4s ease-in-out infinite;
}

@keyframes runneron_ranking-bar-gleam {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

/* 랭킹 리스트 */
.runneron_ranking-list {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.runneron_ranking-list-header {
    display: grid;
    grid-template-columns: 60px 1fr 80px 100px 100px;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.runneron_ranking-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px 100px 100px;
    align-items: center;
    padding: 14px 20px;
    border-radius: 16px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.runneron_ranking-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.runneron_ranking-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    transform: translateX(6px) scale(1.01);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.runneron_ranking-row:hover::before {
    opacity: 1;
}

/* 메달 랭크 행 */
.runneron_ranking-row--gold {
    background: linear-gradient(90deg, rgba(255,215,0,0.08) 0%, rgba(255,215,0,0.02) 100%);
    border-color: rgba(255,215,0,0.15);
    position: relative;
}

/* 1등 행 빛나는 좌측 보더 */
.runneron_ranking-row--gold::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #FFD700, #FFA500);
    box-shadow: 0 0 12px rgba(255,215,0,0.5);
    animation: runneron_ranking-gold-border-pulse 2s ease-in-out infinite;
}

@keyframes runneron_ranking-gold-border-pulse {
    0%, 100% { opacity: 0.7; box-shadow: 0 0 8px rgba(255,215,0,0.3); }
    50% { opacity: 1; box-shadow: 0 0 16px rgba(255,215,0,0.6); }
}

.runneron_ranking-row--gold:hover {
    background: linear-gradient(90deg, rgba(255,215,0,0.14) 0%, rgba(255,215,0,0.04) 100%);
    border-color: rgba(255,215,0,0.3);
    box-shadow: 0 8px 32px rgba(255,215,0,0.12);
}

.runneron_ranking-row--silver {
    background: linear-gradient(90deg, rgba(192,192,192,0.06) 0%, rgba(192,192,192,0.01) 100%);
    border-color: rgba(192,192,192,0.1);
}

.runneron_ranking-row--silver:hover {
    border-color: rgba(192,192,192,0.2);
    box-shadow: 0 4px 20px rgba(192,192,192,0.08);
}

.runneron_ranking-row--bronze {
    background: linear-gradient(90deg, rgba(205,127,50,0.06) 0%, rgba(205,127,50,0.01) 100%);
    border-color: rgba(205,127,50,0.1);
}

.runneron_ranking-row--bronze:hover {
    border-color: rgba(205,127,50,0.2);
    box-shadow: 0 4px 20px rgba(205,127,50,0.08);
}

/* 행 내부 요소 */
.runneron_ranking-row-rank {
    display: flex;
    align-items: center;
    justify-content: center;
}

.runneron_ranking-rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: runneron_ranking-badge-glow 2s ease-in-out infinite;
}

.runneron_ranking-rank-badge--gold {
    filter: drop-shadow(0 2px 8px rgba(255,215,0,0.4));
}

.runneron_ranking-rank-badge--silver {
    filter: drop-shadow(0 2px 8px rgba(192,192,192,0.3));
}

.runneron_ranking-rank-badge--bronze {
    filter: drop-shadow(0 2px 8px rgba(205,127,50,0.3));
}

@keyframes runneron_ranking-badge-glow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.runneron_ranking-rank-number {
    font-size: 16px;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    font-feature-settings: "tnum";
}

.runneron_ranking-row-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.runneron_ranking-row-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #1e293b;
    border: 2px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.runneron_ranking-row--gold .runneron_ranking-row-avatar {
    border-color: rgba(255,215,0,0.3);
}

.runneron_ranking-row-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.runneron_ranking-row-nickname {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

.runneron_ranking-row--gold .runneron_ranking-row-nickname {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.runneron_ranking-row-realname {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

.runneron_ranking-row-runs,
.runneron_ranking-row-pace {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    font-feature-settings: "tnum";
    text-align: center;
}

.runneron_ranking-row-distance {
    text-align: right;
    font-feature-settings: "tnum";
}

.runneron_ranking-distance-value {
    font-size: 18px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
}

.runneron_ranking-row--gold .runneron_ranking-distance-value {
    color: #FFD700;
}

.runneron_ranking-distance-unit {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    margin-left: 3px;
}

/* CTA */
.runneron_ranking-cta {
    max-width: 640px;
    margin: 60px auto 0;
    padding: 48px 36px;
    text-align: center;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(78,143,255,0.06) 0%, rgba(56,189,248,0.04) 50%, rgba(255,215,0,0.04) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.runneron_ranking-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(78,143,255,0.12);
    border-color: rgba(78,143,255,0.15);
}

.runneron_ranking-cta-glow {
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78,143,255,0.12), rgba(255,215,0,0.06) 40%, transparent 70%);
    pointer-events: none;
    animation: runneron_ranking-cta-glow-pulse 4s ease-in-out infinite;
}

@keyframes runneron_ranking-cta-glow-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

.runneron_ranking-cta-emoji {
    font-size: 40px;
    margin-bottom: 12px;
    animation: runneron_ranking-cta-emoji-bounce 2s ease-in-out infinite;
}

@keyframes runneron_ranking-cta-emoji-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(5deg); }
}

.runneron_ranking-cta-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px;
    position: relative;
}

.runneron_ranking-cta-text {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
    margin: 0 0 28px;
    line-height: 1.6;
}

.runneron_ranking-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #4e8fff, #38bdf8);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(78,143,255,0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.runneron_ranking-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.runneron_ranking-cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 44px rgba(78,143,255,0.5);
}

.runneron_ranking-cta-btn:hover::before {
    transform: translateX(100%);
}

/* 애니메이션 */
.runneron_ranking-fadein {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: runneron_ranking-fadein-anim 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes runneron_ranking-fadein-anim {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.runneron_ranking-slidein {
    opacity: 0;
    transform: translateX(-24px);
    animation: runneron_ranking-slidein-anim 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes runneron_ranking-slidein-anim {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 반응형 */
@media (max-width: 768px) {
    .runneron_ranking-hero {
        padding: 40px 0 30px;
    }

    .runneron_ranking-podium {
        gap: 8px;
        padding: 0 12px;
    }

    .runneron_ranking-podium-item {
        flex: 0 0 120px;
        padding: 14px 8px 0;
    }

    .runneron_ranking-podium-avatar-wrap {
        width: 56px; height: 56px;
    }

    .runneron_ranking-podium-avatar-wrap--gold {
        width: 72px; height: 72px;
    }

    .runneron_ranking-podium-name { font-size: 13px; }
    .runneron_ranking-podium-distance { font-size: 15px; }
    .runneron_ranking-podium-distance--gold { font-size: 18px; }

    .runneron_ranking-podium-bar--gold { height: 90px; }
    .runneron_ranking-podium-bar--silver { height: 60px; }
    .runneron_ranking-podium-bar--bronze { height: 40px; }

    .runneron_ranking-podium-spotlight { width: 180px; height: 180px; top: -30px; }
    .runneron_ranking-podium-gap { font-size: 10px; padding: 2px 8px; }

    .runneron_ranking-podium-bar--gold::before { font-size: 28px; }
    .runneron_ranking-podium-bar--silver::before { font-size: 22px; }
    .runneron_ranking-podium-bar--bronze::before { font-size: 18px; }

    .runneron_ranking-list-header {
        grid-template-columns: 44px 1fr 90px;
        font-size: 10px;
    }

    .runneron_ranking-list-header .runneron_ranking-list-col-runs,
    .runneron_ranking-list-header .runneron_ranking-list-col-pace {
        display: none;
    }

    .runneron_ranking-row {
        grid-template-columns: 44px 1fr 90px;
        padding: 12px 14px;
    }

    .runneron_ranking-row-runs,
    .runneron_ranking-row-pace {
        display: none;
    }

    .runneron_ranking-row-avatar {
        width: 34px; height: 34px;
    }

    .runneron_ranking-row-nickname { font-size: 13px; }
    .runneron_ranking-distance-value { font-size: 15px; }

    .runneron_ranking-cta {
        margin: 40px 12px 0;
        padding: 28px 20px;
    }
}

@media (max-width: 480px) {
    .runneron_ranking-podium-item {
        flex: 0 0 95px;
    }

    .runneron_ranking-podium-avatar-wrap {
        width: 48px; height: 48px;
    }

    .runneron_ranking-podium-item {
        flex: 0 0 100px;
        padding: 10px 6px 0;
    }

    .runneron_ranking-podium-avatar-wrap--gold {
        width: 60px; height: 60px;
    }

    .runneron_ranking-podium-name { font-size: 12px; }
    .runneron_ranking-podium-realname { font-size: 10px; }
    .runneron_ranking-podium-crown { font-size: 22px; }
    .runneron_ranking-podium-medal { font-size: 18px; }
    .runneron_ranking-podium-spotlight { width: 140px; height: 140px; top: -20px; }
    .runneron_ranking-podium-gap { display: none; }

    .runneron_ranking-podium-bar--gold::before { font-size: 22px; }
    .runneron_ranking-podium-bar--silver::before { font-size: 18px; }
    .runneron_ranking-podium-bar--bronze::before { font-size: 16px; }

    .runneron_ranking-tabs {
        max-width: 100%;
        margin-left: 12px;
        margin-right: 12px;
    }

    .runneron_ranking-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* 랭킹 페이지에서 헤더/푸터 테마 보정 */
.runneron_ranking-page ~ .runneron_footer,
.runneron_ranking-page + .runneron_footer {
    border-top-color: rgba(255,255,255,0.06);
    background: #0a0e1a;
    color: rgba(255,255,255,0.4);
}

/* ================================================
   Champion Spotlight Overlay
   ================================================ */
.runneron_ranking-spotlight {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.runneron_ranking-spotlight-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 400px 400px at center, rgba(255,215,0,0.10) 0%, transparent 70%),
        rgba(5,8,18,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.runneron_ranking-spotlight-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

/* Crown */
.runneron_ranking-spotlight-crown {
    font-size: 48px;
    margin-bottom: -4px;
    animation: runneron_ranking-spotlight-crown-bounce 1.5s ease-in-out infinite;
    filter: drop-shadow(0 6px 16px rgba(255,215,0,0.5));
}

@keyframes runneron_ranking-spotlight-crown-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-10px) rotate(-4deg); }
    70% { transform: translateY(-6px) rotate(4deg); }
}

/* Avatar with rotating gold ring */
.runneron_ranking-spotlight-avatar-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 8px 0 16px;
}

.runneron_ranking-spotlight-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FFD700, #FFA500, #FFD700, #ffffff, #FFD700);
    animation: runneron_ranking-spotlight-ring-spin 3s linear infinite;
    box-shadow: 0 0 40px rgba(255,215,0,0.4), 0 0 80px rgba(255,215,0,0.15);
}

@keyframes runneron_ranking-spotlight-ring-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.runneron_ranking-spotlight-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    background: #1e293b;
    border: 4px solid #0f172a;
}

/* Label */
.runneron_ranking-spotlight-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.8);
    margin-bottom: 4px;
}

/* Champion name */
.runneron_ranking-spotlight-name {
    font-size: clamp(32px, 7vw, 52px);
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 40%, #ffffff 70%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: runneron_ranking-shimmer 3s linear infinite;
    line-height: 1.2;
}

/* Distance */
.runneron_ranking-spotlight-distance {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.runneron_ranking-spotlight-distance-num {
    font-size: clamp(48px, 10vw, 72px);
    font-weight: 900;
    color: #ffffff;
    font-feature-settings: "tnum";
    line-height: 1;
    text-shadow: 0 4px 30px rgba(255,215,0,0.3);
}

.runneron_ranking-spotlight-distance-unit {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 700;
    color: rgba(255,255,255,0.45);
}

/* Real name */
.runneron_ranking-spotlight-realname {
    font-size: 15px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* Sparkle particles */
.runneron_ranking-spotlight-particles {
    position: absolute;
    inset: -80px;
    pointer-events: none;
}

.runneron_ranking-spotlight-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFD700;
    box-shadow: 0 0 8px 2px rgba(255,215,0,0.6);
    animation: runneron_ranking-spotlight-sparkle-float 2.5s ease-in-out infinite;
}

.runneron_ranking-spotlight-sparkle--1 { top: 10%; left: 15%; animation-delay: 0s; }
.runneron_ranking-spotlight-sparkle--2 { top: 5%; right: 20%; animation-delay: 0.3s; width: 4px; height: 4px; }
.runneron_ranking-spotlight-sparkle--3 { top: 40%; left: 5%; animation-delay: 0.6s; }
.runneron_ranking-spotlight-sparkle--4 { top: 35%; right: 8%; animation-delay: 0.9s; width: 5px; height: 5px; }
.runneron_ranking-spotlight-sparkle--5 { bottom: 20%; left: 12%; animation-delay: 1.2s; width: 4px; height: 4px; }
.runneron_ranking-spotlight-sparkle--6 { bottom: 15%; right: 15%; animation-delay: 1.5s; }
.runneron_ranking-spotlight-sparkle--7 { bottom: 40%; left: 25%; animation-delay: 0.4s; width: 3px; height: 3px; background: #ffffff; }
.runneron_ranking-spotlight-sparkle--8 { top: 20%; right: 30%; animation-delay: 0.8s; width: 3px; height: 3px; background: #FFA500; }

@keyframes runneron_ranking-spotlight-sparkle-float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    25% { transform: translate(8px, -12px) scale(1.4); opacity: 1; }
    50% { transform: translate(-6px, -20px) scale(0.8); opacity: 0.4; }
    75% { transform: translate(10px, -8px) scale(1.2); opacity: 0.9; }
}

/* Entrance animation */
.runneron_ranking-spotlight--enter .runneron_ranking-spotlight-bg {
    animation: runneron_ranking-spotlight-bg-in 0.5s ease-out forwards;
}

.runneron_ranking-spotlight--enter .runneron_ranking-spotlight-content {
    animation: runneron_ranking-spotlight-content-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.15s;
    opacity: 0;
}

@keyframes runneron_ranking-spotlight-bg-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes runneron_ranking-spotlight-content-in {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Exit animation */
.runneron_ranking-spotlight--exit .runneron_ranking-spotlight-bg {
    animation: runneron_ranking-spotlight-bg-out 0.6s ease-in forwards;
}

.runneron_ranking-spotlight--exit .runneron_ranking-spotlight-content {
    animation: runneron_ranking-spotlight-content-out 0.5s ease-in forwards;
}

@keyframes runneron_ranking-spotlight-bg-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes runneron_ranking-spotlight-content-out {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.85) translateY(-20px);
    }
}

/* Responsive spotlight */
@media (max-width: 768px) {
    .runneron_ranking-spotlight-avatar-wrap {
        width: 110px;
        height: 110px;
    }

    .runneron_ranking-spotlight-crown {
        font-size: 36px;
    }

    .runneron_ranking-spotlight-particles {
        inset: -40px;
    }
}

@media (max-width: 480px) {
    .runneron_ranking-spotlight-avatar-wrap {
        width: 90px;
        height: 90px;
    }

    .runneron_ranking-spotlight-crown {
        font-size: 30px;
    }

    .runneron_ranking-spotlight-label {
        font-size: 12px;
    }

    .runneron_ranking-spotlight-realname {
        font-size: 13px;
    }

    .runneron_ranking-spotlight-particles {
        inset: -20px;
    }
}