/* ============================================
   Rankings Page - 데이터 테이블 중심 디자인
   ============================================ */

:root {
    --rankings-text-primary: #1A1A1A;
    --rankings-text-secondary: #4A5568;
    --rankings-text-muted: #718096;
    --rankings-border: #E2E8F0;
    --rankings-bg-primary: #FFFFFF;
    --rankings-bg-hover: #F7FAFC;
    --rankings-accent: var(--color-accent, #1E293B);
    --rankings-diff-up: var(--color-success, #16A34A);
    --rankings-diff-down: var(--color-danger, #D97706);
    --rankings-diff-flat: #718096;
}

/* ============================================
   페이지 타이틀 영역
   ============================================ */
.rankings-header {
    padding: 2rem 0 1.5rem 0;
    border-bottom: 1px solid var(--rankings-border);
}

.rankings-header-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem;
}

.rankings-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rankings-text-primary);
    margin: 0;
    line-height: 1.2;
}

/* ============================================
   포지션 탭 (필터 느낌)
   ============================================ */
.rankings-tabs-wrapper {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rankings-border);
    background: var(--rankings-bg-primary);
}

.rankings-tabs {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.rankings-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rankings-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    margin-right: 0.5rem;
}

.rankings-tab:hover {
    color: var(--rankings-text-primary);
}

.rankings-tab.active {
    color: var(--rankings-text-primary);
    font-weight: 600;
    border-bottom-color: var(--color-accent, #1E293B);
}

/* ============================================
   랭킹 테이블
   ============================================ */
.rankings-table-wrapper {
    padding: 1.5rem 0;
    max-width: 1080px;
    margin: 0 auto;
}

.rankings-table-card {
    background: var(--rankings-bg-primary);
    border: 1px solid var(--rankings-border);
    border-radius: 6px;
    overflow: hidden;
}

.rankings-table-container {
    overflow-x: auto;
}

.rankings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.rankings-table thead {
    background: var(--rankings-bg-hover);
    border-bottom: 1px solid var(--rankings-border);
}

.rankings-table th {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rankings-text-secondary);
    text-align: left;
    white-space: nowrap;
}

.rankings-table th.score-col,
.rankings-table th.diff-col,
.rankings-table th.winrate-col {
    text-align: right;
}

.rankings-table tbody tr {
    border-bottom: 1px solid var(--rankings-border);
    transition: background-color 0.2s;
}

.rankings-table tbody tr:last-child {
    border-bottom: none;
}

.rankings-table tbody tr:hover {
    background: var(--rankings-bg-hover);
}

.rankings-table td {
    padding: 0.75rem 1rem;
    color: var(--rankings-text-primary);
    vertical-align: middle;
}

.rankings-table td.score-col,
.rankings-table td.diff-col,
.rankings-table td.winrate-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 순위 컬럼 */
.rank-col {
    width: 60px;
    font-weight: 600;
    color: var(--rankings-text-secondary);
    text-align: center !important;
}

/* 메달 스타일 */
.rank-medal {
    font-size: 1.25rem;
    display: inline-block;
    line-height: 1;
}

/* 1,2,3등 행 스타일 */
.rankings-row.rank-first {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%);
    border-left: 3px solid #FFD700;
}

.rankings-row.rank-first:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 215, 0, 0.06) 100%);
}

.rankings-row.rank-second {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.08) 0%, rgba(192, 192, 192, 0.03) 100%);
    border-left: 3px solid #C0C0C0;
}

.rankings-row.rank-second:hover {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.12) 0%, rgba(192, 192, 192, 0.06) 100%);
}

.rankings-row.rank-third {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.08) 0%, rgba(205, 127, 50, 0.03) 100%);
    border-left: 3px solid #CD7F32;
}

.rankings-row.rank-third:hover {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.12) 0%, rgba(205, 127, 50, 0.06) 100%);
}

.rankings-row.rank-first .rank-col,
.rankings-row.rank-second .rank-col,
.rankings-row.rank-third .rank-col {
    font-weight: 700;
}

/* 플레이어 컬럼 */
.player-col {
    min-width: 200px;
}

.player-name-link {
    color: var(--rankings-text-primary);
    text-decoration: none;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    display: inline-block;
    transition: text-decoration 0.2s;
}

.player-name-link:hover {
    text-decoration: underline;
    color: var(--rankings-text-primary);
}

.player-name-empty {
    color: var(--rankings-text-muted);
}

/* 포지션 컬럼 */
.role-col {
    width: 100px;
    color: var(--rankings-text-secondary);
}

/* 점수 컬럼 */
.score-col {
    width: 100px;
    font-weight: 700;
    color: var(--rankings-text-primary);
}

/* 변동 컬럼 */
.diff-col {
    width: 100px;
}

.diff-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.diff-up {
    color: var(--color-success, #16A34A);
}

.diff-down {
    color: var(--color-danger, #D97706);
}

.diff-flat {
    color: var(--rankings-diff-flat, #718096);
}

/* 전적 컬럼 */
.record-col {
    width: 120px;
    color: var(--rankings-text-secondary);
    font-size: 0.8125rem;
}

/* 승률 컬럼 */
.winrate-col {
    width: 80px;
    font-weight: 600;
    color: var(--rankings-text-primary);
}

/* 빈 상태 */
.rankings-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rankings-text-muted);
}

.rankings-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 992px) {
    .rankings-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .rankings-tab {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .rankings-header {
        padding: 1.5rem 0 1rem 0;
    }
    
    .rankings-title {
        font-size: 1.25rem;
    }
    
    .rankings-table-wrapper {
        padding: 1rem 0;
    }
    
    .rankings-table-card {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    
    /* 모바일에서 일부 컬럼 숨김 */
    .rankings-table th.record-col,
    .rankings-table td.record-col,
    .rankings-table th.winrate-col,
    .rankings-table td.winrate-col {
        display: none;
    }
    
    .rankings-table th,
    .rankings-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .player-col {
        min-width: 150px;
    }
}