/**
 * v7/widgets/layout/layout.sidebar-left.point-ranking.css
 *
 * 포인트 랭킹 50 위젯 전용 CSS.
 * 현대적이고 심플한 미니멀 디자인.
 * Web Awesome CSS 변수 활용, Font Awesome Light 아이콘.
 *
 * @see v7/widgets/layout/layout.sidebar-left.point-ranking.php
 */

/* ===== 위젯 헤더 ===== */
.point-ranking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.point-ranking-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.point-ranking-title i {
    color: var(--wa-color-warning-50, #eab308);
    font-size: 0.9em;
}

.point-ranking-subtitle {
    font-weight: 400;
    font-size: 0.9em;
    color: var(--wa-color-neutral-50, #999);
}

/* ===== 포인트 랭킹 리스트 컨테이너 ===== */
.point-ranking-list {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 스크롤바 스타일 (미니멀) */
.point-ranking-list::-webkit-scrollbar {
    width: 3px;
}
.point-ranking-list::-webkit-scrollbar-track {
    background: transparent;
}
.point-ranking-list::-webkit-scrollbar-thumb {
    background: var(--wa-color-neutral-80, #ddd);
    border-radius: 3px;
}
.point-ranking-list::-webkit-scrollbar-thumb:hover {
    background: var(--wa-color-neutral-60, #aaa);
}

/* Firefox 스크롤바 */
.point-ranking-list {
    scrollbar-width: thin;
    scrollbar-color: var(--wa-color-neutral-80, #ddd) transparent;
}

/* ===== 링크 래퍼 ===== */
.point-ranking-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.point-ranking-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ===== 각 랭킹 아이템 ===== */
.point-ranking-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 1em;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.point-ranking-item:hover {
    background: var(--wa-color-neutral-95, #f8f9fa);
}

/* ===== 1~3위 배경 강조 (단색 — 조금 어두운 neutral) ===== */
.point-ranking-item.rank-top1,
.point-ranking-item.rank-top2,
.point-ranking-item.rank-top3 {
    background: var(--wa-color-neutral-90, #e9ecef);
}

.point-ranking-item.rank-top1:hover,
.point-ranking-item.rank-top2:hover,
.point-ranking-item.rank-top3:hover {
    background: var(--wa-color-neutral-85, #dee2e6);
}

/* ===== 순위 영역 ===== */
.ranking-rank {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1~3위 이모지 */
.ranking-emoji {
    font-size: 0.95em;
    line-height: 1;
}

/* 4위~ 숫자 순위 */
.ranking-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-weight: 600;
    color: var(--wa-color-neutral-50, #999);
    font-size: 0.88em;
}

/* ===== 아바타 영역 (24px 둥근 원) ===== */
.ranking-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ranking-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.ranking-avatar-fallback {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wa-color-neutral-90, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65em;
    color: var(--wa-color-neutral-50, #adb5bd);
    font-weight: 600;
}

/* ===== 닉네임 영역 ===== */
.ranking-nickname {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 0.95em;
    color: var(--wa-color-neutral-20, #333);
}

/* ===== 포인트 배지 ===== */
.ranking-points {
    flex-shrink: 0;
    margin-left: auto;
}

.ranking-point-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* 포인트 색상: >=300 danger, >=100 primary, 나머지 success */
.ranking-point-badge.point-danger {
    background: var(--wa-color-danger-95, #fde8e8);
    color: var(--wa-color-danger-40, #dc2626);
    font-weight: 700;
}
.ranking-point-badge.point-primary {
    background: var(--wa-color-brand-95, #dbeafe);
    color: var(--wa-color-brand-50, #2563eb);
}
.ranking-point-badge.point-success {
    background: var(--wa-color-success-95, #dcfce7);
    color: var(--wa-color-success-40, #16a34a);
}

/* ===== 하단 링크 ===== */
.point-ranking-footer {
    text-align: center;
    padding: 0.5rem 0.75rem;
}

.point-ranking-footer a {
    font-size: 0.9em;
    color: var(--wa-color-brand-50, #0d6efd);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.point-ranking-footer a i {
    font-size: 0.7em;
    margin-left: 0.2em;
    transition: transform 0.15s ease;
}

.point-ranking-footer a:hover {
    color: var(--wa-color-brand-40, #0b5ed7);
}

.point-ranking-footer a:hover i {
    transform: translateX(2px);
}