/* ============================================================
   이용 통계 — 화면 전용 스타일
   (공통 토큰/컴포넌트는 bootstrap.custom.css · custom.css 사용)
   ============================================================ */

/* 방별 이용률 — 순위 랭킹 바 */
.room-rank {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rank-row {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 15px;
    align-items: center;
}

.rank-row .rk {
    width: 26px;
    height: 26px;
    border-radius: var(--bs-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-small);
    font-weight: 700;
    background: var(--bs-border-color);
    color: var(--bs-secondary);
}

.rank-row.top .rk {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.rank-main {
    min-width: 0;
}

.rank-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 5px;
}

.rank-top .rname {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    font-size: var(--font-normal);
}

.rank-top .rpct {
    font-weight: 700;
    color: var(--bs-primary);
    font-size: var(--font-normal);
}

.rank-row .track {
    height: 8px;
    border-radius: var(--bs-border-radius);
    background: var(--bs-border-color);
    overflow: hidden;
}

.rank-row .fill {
    height: 100%;
    border-radius: var(--bs-border-radius);
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-primary-light));
    transition: width 0.7s ease;
}

/* 차트 컨테이너 */
.stats-chart {
    width: 100%;
}

/* 다크 테마 보정 */
[data-bs-theme="dark"] .rank-row .rk,
[data-bs-theme="dark"] .rank-row .track { background: var(--bs-slate-700); }
[data-bs-theme="dark"] .rank-row.top .rk { background: rgba(var(--bs-primary-rgb), 0.25); }