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

@media (max-width: 768px) {
    /* =====================================================
     * 페이지 공통
     * ===================================================== */
    .bp-statistics-page {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding:0;
    }

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

    /* =====================================================
     * 상단 히어로
     * ===================================================== */
    .bp-statistics-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-statistics-hero > div {
        min-width: 0;
    }

    .bp-statistics-hero > div > p:last-child{font-size:.85rem;}

    .bp-statistics-hero .bp-eyebrow {
        margin: 0 0 6px;
        font-size: .85rem;
        line-height: 1.2;
    }

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

    .bp-statistics-hero p {
        margin: 8px 0 0;
        font-size: .82rem;
        line-height: 1.55;
        word-break: keep-all;
    }

    .bp-statistics-update {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 11px 13px !important;
        border-radius: 13px !important;
    }

    .bp-statistics-update span,
    .bp-statistics-update strong {
        margin: 0 !important;
        font-size: .75rem !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    /* =====================================================
     * 종목 탭
     * ===================================================== */
    .bp-statistics-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-statistics-sport-tabs::-webkit-scrollbar {
        display: none;
    }

    .bp-statistics-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-statistics-sticky {
        position: static !important;
        top: auto !important;
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-summary-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-summary-card {
        width: 100%;
        min-width: 0;
        padding: 15px 13px !important;
        border-radius: 15px !important;
    }

    .bp-statistics-summary-card > span {
        display: block;
        font-size: .85rem !important;
        line-height: 1.3;
    }

    .bp-statistics-summary-card > strong {
        display: block;
        margin-top: 6px !important;
        font-size: 1.5rem !important;
        line-height: 1.1;
    }

    .bp-statistics-progress {
        width: 100%;
        min-width: 0;
        height: 9px !important;
        margin-top: 10px !important;
        overflow: hidden;
        border-radius: 999px;
    }

    .bp-statistics-progress > i {
        display: block;
        height: 100%;
        border-radius: inherit;
    }

    .bp-statistics-summary-card > p {
        margin: 9px 0 0 !important;
        font-size: .85rem !important;
        line-height: 1.45;
        word-break: keep-all;
    }

    /* =====================================================
     * 결과 필터 / 조회 기간
     * ===================================================== */
    .bp-statistics-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
        margin: 14px 0 !important;
    }

    .bp-statistics-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-tabs a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        min-width: 0;
        min-height: 42px !important;
        padding: 0 7px !important;
        font-size: .75rem !important;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    .bp-statistics-tabs em {
        flex: 0 0 auto;
        font-size: .68rem !important;
    }

    .bp-statistics-period {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100%;
        min-width: 0;
        padding: 10px 12px !important;
    }

    .bp-statistics-period label {
        font-size: .75rem !important;
        white-space: nowrap;
    }

    .bp-statistics-period select {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 10px;
        font-size: .75rem;
    }

    /* =====================================================
     * 목록 제목
     * ===================================================== */
    .bp-statistics-list-section {
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-list-section .bp-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-statistics-list-section .bp-section-head > div {
        min-width: 0;
    }

    .bp-statistics-list-section .bp-section-head h2 {
        margin: 0;
        font-size: 1rem !important;
        line-height: 1.35;
    }

    .bp-statistics-list-section .bp-section-head p {
        margin: 5px 0 0;
        font-size: .75rem !important;
        line-height: 1.5;
        word-break: keep-all;
    }

    .bp-statistics-list-section .bp-section-head > span {
        font-size: .75rem !important;
        white-space: nowrap;
    }

    /* =====================================================
     * 경기 결과 카드
     * ===================================================== */
    .bp-statistics-match-list {
        display: grid;
        gap: 11px;
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-match-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        padding: 13px 11px !important;
        border-radius: 16px !important;
    }

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

    .bp-statistics-match-head > div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px 7px !important;
        min-width: 0;
    }

    .bp-statistics-sport-badge {
        flex: 0 0 auto;
        font-size: .75rem !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .bp-statistics-match-head > div > a {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        font-size: .85rem !important;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-statistics-match-head > div > span:last-child {
        flex-basis: 100%;
        font-size: .75rem !important;
        line-height: 1.3;
    }

    .bp-statistics-detail-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 0 9px !important;
        font-size: .75rem !important;
        white-space: nowrap;
    }

    .bp-statistics-match-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 13px !important;
        width: 100%;
        min-width: 0;
        margin-top: 13px !important;
    }

    /* 팀 / 최종 점수 */
    .bp-statistics-score {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-team {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 6px !important;
        min-width: 0;
        text-align: center;
    }

    .bp-statistics-team.away {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bp-statistics-team > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;
        overflow: hidden;
        border-radius: 11px;
    }

    .bp-statistics-team img {
        display: block;
        width: 42px !important;
        height: 42px !important;
        object-fit: contain;
    }

    .bp-statistics-team strong {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        font-size: .75rem !important;
        line-height: 1.25;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-statistics-final-score {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px;
        min-width: 52px;
        text-align: center;
    }

    .bp-statistics-final-score strong {
        margin: 0;
        font-size: 1rem !important;
        line-height: 1;
        white-space: nowrap;
    }

    .bp-statistics-final-score span {
        margin-top: 6px !important;
        font-size: .75rem !important;
        line-height: 1;
    }

    /* 예측 결과 */
    .bp-statistics-predictions {
        display: grid !important;
        gap: 8px !important;
        width: 100%;
        min-width: 0;
    }

    .bp-statistics-prediction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
        min-width: 0;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .bp-statistics-prediction-row > div {
        min-width: 0;
    }

    .bp-statistics-prediction-row span,
    .bp-statistics-prediction-row strong {
        display: block;
        min-width: 0;
        margin: 0;
        line-height: 1.35;
    }

    .bp-statistics-prediction-row span {
        font-size: .75rem !important;
    }

    .bp-statistics-prediction-row strong {
        margin-top: 3px !important;
        overflow: hidden;
        font-size: .75rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bp-statistics-prediction-row em {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 52px;
        min-height: 28px;
        margin: 0;
        padding: 0 8px;
        font-size: .75rem !important;
        line-height: 1;
        white-space: nowrap;
    }

    .bp-statistics-page .bp-empty {
        width: 100%;
        min-width: 0;
        padding: 24px 12px;
        font-size: .76rem;
        text-align: center;
    }

    /* =====================================================
     * 매우 좁은 화면
     * ===================================================== */
    @media (max-width: 390px) {
        .bp-statistics-tabs {
            grid-template-columns: minmax(0, 1fr);
        }

        .bp-statistics-period {
            grid-template-columns: minmax(0, 1fr);
        }

        .bp-statistics-score {
            grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) !important;
            gap: 5px !important;
        }

        .bp-statistics-final-score {
            width: 46px;
            min-width: 46px;
        }

        .bp-statistics-team > div {
            width: 42px !important;
            height: 42px !important;
            min-width: 42px;
        }

        .bp-statistics-team img {
            width: 38px !important;
            height: 38px !important;
        }

        .bp-statistics-prediction-row {
            grid-template-columns: minmax(0, 1fr);
        }

        .bp-statistics-prediction-row em {
            justify-self: stretch;
            width: 100%;
        }
    }
}