/**
 * BESTPICK 랭킹 페이지 모바일 스타일
 *
 * 적용 페이지:
 * - /ranking.php
 *
 * 반드시 /css/pages/ranking.css 다음에 불러옵니다.
 * 모든 규칙은 768px 이하에서만 적용됩니다.
 */

@media (max-width: 768px) {
    .bp-ranking-page {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding:0;
    }

    .bp-ranking-jump a{padding:10px 5px;}

    .bp-ranking-page *,
    .bp-ranking-page *::before,
    .bp-ranking-page *::after {
        box-sizing: border-box;
    }

    .bp-ranking-page img {
        max-width: 100%;
    }

    /* 상단 */
    .bp-ranking-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100%;
        min-width: 0;
        padding: 20px 15px !important;
        border-radius: 18px !important;
    }

    .bp-ranking-hero > div {
        min-width: 0;
    }

    .bp-ranking-hero h1 {
        margin: 0;
        font-size: 1.5rem !important;
        line-height: 1.25;
    }

    .bp-ranking-hero p {
        margin: 8px 0 0;
        font-size: .85rem !important;
        line-height: 1.55;
        word-break: keep-all;
    }

    .bp-ranking-updated {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 11px 13px !important;
    }

    .bp-ranking-updated span,
    .bp-ranking-updated strong {
        margin: 0 !important;
        font-size: .75rem !important;
        line-height: 1.25;
        white-space: nowrap;
    }

    /* 종목 탭 */
    .bp-ranking-sport-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1px !important;
        width: 100%;
        min-width: 0;
        margin: 14px 0 !important;
        padding: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bp-ranking-sport-head span{font-size:.85rem;}

    .bp-ranking-sport-tabs::-webkit-scrollbar {
        display: none;
    }

    .bp-ranking-sport-tabs a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        font-size: .75rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* 종목 섹션 */
    .bp-ranking-sport-section,
    .bp-ranking-section {
        width: 100%;
        min-width: 0;
        margin-top: 18px !important;
    }

    .bp-ranking-sport-head,
    .bp-ranking-section-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
        margin-bottom: 12px !important;
    }

    .bp-ranking-sport-head > div,
    .bp-ranking-section-head > div {
        min-width: 0;
    }

    .bp-ranking-jump span{min-width:20px;height:20px;}

    .bp-ranking-jump a{font-size:.75rem;}
    .bp-ranking-jump span{font-size:.75rem;}
    .bp-ranking-section-head > strong{font-size:.85rem;}

    .bp-ranking-sport-head h2,
    .bp-ranking-section-head h2 {
        margin: 0;
        font-size: 1.5rem !important;
        line-height: 1.35;
    }

    .bp-ranking-sport-head p,
    .bp-ranking-section-head p {
        margin: 5px 0 0;
        font-size: .85rem !important;
        line-height: 1.5;
        word-break: keep-all;
    }

    .bp-ranking-section-kicker {
        font-size: .68rem !important;
        white-space: nowrap;
    }

    .bp-ranking-jump {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 34px;
        padding: 0 9px !important;
        font-size: .7rem !important;
        white-space: nowrap;
    }

    /* 대회 카드 */
    .bp-ranking-competition-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-ranking-competition-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border-radius: 16px !important;
    }

    .bp-ranking-card-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 11px !important;
        width: 100%;
        min-width: 0;
        padding: 13px 12px !important;
    }

    .bp-ranking-competition-title {
        display: grid !important;
        grid-template-columns: 50px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-ranking-competition-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px;
        overflow: hidden;
        border-radius: 12px !important;
    }

    .bp-ranking-competition-logo img {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain;
    }

    .bp-ranking-competition-title > span:last-child {
        min-width: 0;
    }

    .bp-ranking-competition-title strong,
    .bp-ranking-competition-title small {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-ranking-competition-title strong {
        font-size: 1rem !important;
        line-height: 1.3;
    }

    .bp-ranking-competition-title small {
        margin-top: 4px;
        font-size: .85rem !important;
        line-height: 1.25;
    }

    .bp-ranking-card-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-ranking-live-badge,
    .bp-ranking-more {
        font-size: .75rem !important;
        white-space: nowrap;
    }

    .bp-ranking-card-body {
        width: 100%;
        min-width: 0;
        padding: 12px !important;
    }

    /* 팀순위와 득점 TOP은 세로 */
    .bp-ranking-top-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-ranking-column,
    .bp-ranking-assists-section {
        width: 100%;
        min-width: 0;
        padding: 12px 10px !important;
        border-radius: 13px !important;
    }

    .bp-ranking-assists-section {
        margin-top: 12px !important;
    }

    .bp-ranking-column-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
        margin-bottom: 9px !important;
    }

    .bp-ranking-column-title h3 {
        margin: 0;
        font-size: .85rem !important;
        line-height: 1.3;
    }

    .bp-ranking-column-title span {
        font-size: .85rem !important;
        white-space: nowrap;
    }

    /* 공통 TOP 목록 */
    .bp-ranking-list,
    .bp-ranking-assist-grid,
    .bp-ranking-team-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .bp-ranking-list > li,
    .bp-ranking-assist-grid > li,
    .bp-ranking-team-list > li {
        width: 100%;
        min-width: 0;
    }

    .bp-ranking-list > li > a,
    .bp-ranking-assist-grid > li > a,
    .bp-ranking-team-list > li > a {
        display: grid !important;
        grid-template-columns: 26px 40px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
        min-width: 0;
        min-height: 56px;
        padding: 8px 7px !important;
        border-radius: 11px !important;
    }

    .bp-ranking-number {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px;
        min-width: 26px;
        font-size: .75rem !important;
        line-height: 1;
        text-align: center;
    }

    .bp-ranking-team-logo,
    .bp-ranking-player-photo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        overflow: hidden;
        border-radius: 10px !important;
    }

    .bp-ranking-team-logo img,
    .bp-ranking-player-photo img {
        width: 38px !important;
        height: 38px !important;
        object-fit: contain;
    }

    .bp-ranking-player-photo img {
        object-fit: cover;
    }

    .bp-ranking-player-copy {
        display: block !important;
        min-width: 0;
    }

    .bp-ranking-player-copy strong,
    .bp-ranking-player-copy small {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-ranking-player-copy strong {
        font-size: .75rem !important;
        line-height: 1.25;
    }

    .bp-ranking-player-copy small {
        margin-top: 3px;
        font-size: .75rem !important;
        line-height: 1.2;
    }

    .bp-ranking-list > li > a > b,
    .bp-ranking-assist-grid > li > a > b,
    .bp-ranking-team-list > li > a > b {
        font-size: .75rem !important;
        line-height: 1.2;
        text-align: right;
        white-space: nowrap;
    }

    .bp-ranking-list > li > a > b em,
    .bp-ranking-assist-grid > li > a > b em,
    .bp-ranking-team-list > li > a > b em {
        font-size: .62rem !important;
    }

    .bp-ranking-empty,
    .bp-ranking-empty-compact {
        width: 100%;
        min-width: 0;
        padding: 20px 10px !important;
        font-size: .72rem !important;
        text-align: center;
    }

    @media (max-width: 390px) {
        .bp-ranking-sport-head,
        .bp-ranking-section-head {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        .bp-ranking-jump {
            justify-self: end;
        }

        .bp-ranking-list > li > a,
        .bp-ranking-assist-grid > li > a,
        .bp-ranking-team-list > li > a {
            grid-template-columns: 22px 36px minmax(0, 1fr) auto !important;
            gap: 6px !important;
        }

        .bp-ranking-number {
            width: 22px;
            min-width: 22px;
        }

        .bp-ranking-team-logo,
        .bp-ranking-player-photo {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px;
        }

        .bp-ranking-team-logo img,
        .bp-ranking-player-photo img {
            width: 34px !important;
            height: 34px !important;
        }
    }
}