/* ===
Game Ranking table (ranking.html 전용)
CSS grid 로 컬럼을 고정해 어떤 데이터에서도 정렬이 흐트러지지 않게 한다
=== */

.rk-table {margin: 20px auto 10px; border-top: 1px solid rgba(255,255,255,0.15);}

/* 공통 행 그리드: # | 게임 | 평점 | 리뷰 | 다운로드 */
.rk-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 2.4fr) 150px minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid #262626;
    color: inherit; text-decoration: none;
}
a.rk-row {transition: background-color 0.15s;}
a.rk-row:nth-child(2n+1) {background-color: rgba(255,255,255,0.045);}
a.rk-row:hover {background-color: rgba(255,0,102,0.08);}

/* 헤더 행 */
.rk-head {
    background-color: var(--color-background-sub2);
    font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.5px;
    color: var(--font-color-desc); text-transform: uppercase;
    padding: 11px 14px; user-select: none;
}
.rk-head > div {white-space: nowrap;}
.rk-head .rk-sort {cursor: pointer; transition: color 0.15s;}
.rk-head .rk-sort:hover {color: var(--font-color-basic);}
.rk-head .rk-sort::after {content: '↕'; opacity: 0.4; margin: 0 0 0 4px; font-size: 0.9em;}
.rk-head .rk-sort.desc::after {content: '▼'; opacity: 1; color: var(--color-highlight-normal);}
.rk-head .rk-sort.asc::after {content: '▲'; opacity: 1; color: var(--color-highlight-normal);}

/* 순위 */
.rk-rank {text-align: center; font-weight: 700; color: var(--font-color-sub); font-size: var(--font-size-md3);}
.rk-rank .badge {
    display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%;
    text-align: center; font-size: var(--font-size-md2); color: #1a1a1a;
}
.rk-rank .badge.b1 {background: linear-gradient(135deg, #ffe27a, #e8b210);}
.rk-rank .badge.b2 {background: linear-gradient(135deg, #e8eaee, #9aa4b2);}
.rk-rank .badge.b3 {background: linear-gradient(135deg, #ecb98a, #b96f34);}

/* 게임 (아이콘 + 이름/장르) */
.rk-game {display: flex; align-items: center; gap: 12px; min-width: 0;}
.rk-game img {
    width: 44px; height: 44px; border-radius: 10px; flex: none;
    border: 1px solid rgba(255,255,255,0.12); display: block;
}
.rk-game .txt {min-width: 0;}
.rk-game .nm {
    display: block; font-weight: 600; color: var(--font-color-basic); font-size: var(--font-size-md2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-game .meta {
    display: block; color: var(--font-color-sub); font-size: var(--font-size-sm); margin: 3px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 평점: 숫자 + 5점 만점 게이지 바 */
.rk-rating .num {display: block; font-weight: 600; color: var(--font-color-basic); font-size: var(--font-size-md2);}
.rk-rating .num::before {content: '★'; color: #ffd34d; margin: 0 4px 0 0;}
.rk-rating .bar {
    display: block; margin: 5px 0 0; width: 110px; height: 4px; border-radius: 2px;
    background-color: var(--color-background-sub3); overflow: hidden;
}
.rk-rating .bar > i {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(to right, #bb3e8d, #5045d4);
}

/* 리뷰 수 / 다운로드 */
.rk-reviews {text-align: right; color: var(--font-color-desc); font-variant-numeric: tabular-nums;}
.rk-installs {text-align: right; min-width: 0;}
.rk-installs .cnt {display: block; color: var(--font-color-basic); font-weight: 500; font-variant-numeric: tabular-nums;}
.rk-installs .dev {
    display: block; color: var(--font-color-sub); font-size: var(--font-size-sm); margin: 3px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 빈 결과 */
.rk-empty {text-align: center; color: var(--font-color-sub); padding: 40px 0; border-bottom: 1px solid #262626;}

/* 갱신일 표시 */
.rk-updated {text-align: right; color: var(--font-color-sub); font-size: var(--font-size-sm); margin: 8px 0 0;}

/* ── 모바일: 3컬럼 압축(#/게임/평점), 다운로드는 메타 라인으로 ── */
@media screen and (max-width:768px) {
    .rk-row {grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 8px; padding: 11px 8px;}
    .rk-reviews, .rk-installs {display: none;}
    .rk-head {padding: 9px 8px;}
    .rk-rank {font-size: var(--font-size-md);}
    .rk-rank .badge {width: 26px; height: 26px; line-height: 26px; font-size: var(--font-size-sm);}
    .rk-game img {width: 40px; height: 40px;}
    .rk-rating .bar {width: 80px;}
}