@media (max-width:640px) {
    .pc { display: none !important;}
    .mo { display: block !important;}
}
/* 모바일 대응 */
@media (max-width: 1248px) {
    .main_content_wrap.w-1248px {padding: 10px}
    .w-1248px { width: 100% !important; padding: 20px; box-sizing: border-box; }
    .top_content_row { flex-direction: column; }
    .casino_slider_section { width: 100%; }
    .slider_viewport, .slider_item img { width: 100%; height: auto; aspect-ratio: 610 / 200; }
    .game_grid.col_5 { grid-template-columns: repeat(2, 1fr); }
    .game_grid.col_4 { grid-template-columns: repeat(2, 1fr); }
    .game_grid.col_6 { grid-template-columns: repeat(2, 1fr); }
    .message_content_view{ padding: 4px 6px; }
}

/* 미니게임 모바일 쿼리 */
@media screen and (max-width: 1024px) {
    .cart_section{padding:0 !important}
    /* 1. 전체 컨테이너 여백 조정 */
    .main_content_wrap.w-1248px {
        width: 100% !important;
        padding: 10px 0 !important;
        gap: 20px !important;
    }

    /* 2. 게임 영역 너비 강제 고정 방지 */
    .game_view_area {
        width: 100% !important;
        min-width: 0; /* flex 자식의 너비 탈출 방지 */
    }

    /* 3. 아이프레임 반응형 처리 */
    .grid_container_box.game_screen_box {
        width: 100%;
        overflow: hidden; /* 스케일로 인해 삐져나가는 부분 방지 */
    }

    .iframe_wrap {
        position: relative;
        width: 100%;
        /* 830x660 비율을 유지하기 위한 높이 설정 */
        /* 높이 / 너비 * 100 = 660 / 830 * 100 = 약 79% */
        padding-top: 79.5%; 
        overflow: hidden;
    }

    .iframe_wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 830px !important; /* 원본 너비 유지 */
        height: 660px !important; /* 원본 높이 유지 */
        
        /* [핵심] 830px 화면을 모바일 너비(100%)에 맞게 축소 */
        /* 가로가 415px인 폰이라면 0.5배로 축소됨 */
        transform-origin: 0 0;
        transform: scale(calc(100vw / 850)); /* 양옆 여백 고려해 850으로 계산 */
        
        border: none;
    }

    /* 4. 베팅 버튼 행 (가로 스크롤 또는 줄바꿈) */
    .bet_row {
        flex-wrap: wrap; /* 모바일에서 버튼이 많으면 다음 줄로 넘김 */
        gap: 4px;
    }

    /* 모바일에서는 5열 버튼이 너무 작으므로 최소 너비 확보 */
    .bet_row.col_4 .btn_bet_item,
    .bet_row.col_5 .btn_bet_item {
        flex: 1 1 calc(50% - 4px); /* 모바일에서는 2열씩 보이게 조정 */
        padding: 15px 0;
    }

    /* 숫자 볼(Ball) 버튼은 5열 유지하고 싶을 경우 */
    .bet_row.col_5.mt-10 .btn_bet_item,
    .bet_row.col_5.mt-5 .btn_bet_item {
        flex: 1 1 calc(20% - 4px);
        min-width: 0;
    }
    
    .ball_num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

/* 스포츠 화면 모바일 쿼리 */
@media (max-width: 1024px) {
    .odds_box { padding:0 2px;
    }
    .odds_kind {
        display: none
    }
    .market_type {
        display: block !important
    }
    .odds_group {
        grid-template-columns: 1fr 48px 1fr !important;
    }
    .odds_group_special {
        grid-template-columns: 1fr 48px 1fr !important;
    }
    .market_odds_grid.three_cols {
        grid-template-columns: 1fr 56px 1fr !important;
    }
    .betting_main_layout {
        display: block; /* Flex 해제 */
        width: 100%; /* 화면 너비에 맞춤 */
        margin: 0; /* 외부 여백 제거 (필요시) */
        padding: 0;
        overflow-x: hidden; /* 가로 스크롤 방지 */
    }

    /* 1. 사이드바 밀어넣기 (화면 밖) */
    .league_sidebar {
        position: fixed;
        left: -280px; /* 왼쪽 밖 */
        transition: 0.3s;
        z-index: 1000;
    }

    .cart_sidebar {
        position: fixed;
        right: -320px; /* 오른쪽 밖 */
        transition: 0.3s;
        z-index: 1000;
    }

    /* 2. 메인 레이아웃을 세로 정렬로 변경 */
    .betting_main_layout {
        flex-direction: column;
        display: block; /* Flex 해제하여 순서대로 쌓이게 함 */
    }

    /* 3. 상세 패널 설정 */
    .right_detail_panel {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        display: none;
        border-radius: 0 0 8px 8px;
        margin-top: 6px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

        .right_detail_panel.active {
            display: block; /* 활성화 시 노출 */
        }
    /* 상세 페이지 내부 헤더 (모바일 전용 닫기 버튼 권장) */
    .detail_header {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        background: #252b36;
    }
}
/* ============================================================
   AT 단계 4 · ≤1024 좌측 메뉴 = 전역 사이드바 자체가 off-canvas 드로어.
   구 `.mobile_menu_wrapper`(Game 10 + Quick 12) 제거 — 22항목 전부 사이드바가 보유하므로
   내비게이션 축을 둘로 가르지 않는다. 햄버거는 기존 btn_m_menu 1개.
   위 118행 `.league_sidebar { position:fixed; left:-280px }` 가 닫힘 상태 정본.
   ============================================================ */
@media (max-width: 1024px) {
    .league_sidebar.m_open {
        left: 0;
        /* 컬럼 끝에서 페이지로 스크롤 전파 차단(기존 관용구와 동일 축) */
        overscroll-behavior: contain;
        /* D-4 · 불투명 배경 + 우측 그림자.
           단계 선택 = --app-bg(#0a0a0d, 콘텐츠 배경 단계). 사유: 드로어 내부의 블록 카드가
           --app-bg-panel-2(#1c1c22) 라 그보다 어두운 단계여야 카드가 카드로 보인다. panel 단계를 쓰면
           카드와 바탕이 거의 같은 톤이 되어 경계가 사라짐. bg-root(#050507)는 본문과 대비가 과함.
           ⚠️ 백드롭(.m_side_backdrop rgba(0,0,0,.5))과 역할 분리 — 이건 드로어 자체의 불투명 채움. */
        background: var(--app-bg);
        box-shadow: 6px 0 20px rgba(0, 0, 0, .5);
    }

    .m_side_backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;   /* .league_sidebar(1000) 바로 아래 */
    }
}

/* ≥1025 에서는 드로어 소자 미노출(데스크톱은 사이드바 상주) */
.m_side_backdrop { display: none; }

@media (max-width: 1024px) {
    .m_side_backdrop { display: block; }
}
/* ============================================================================
   AV §1 · 모바일 스포츠 목록 = 페이지 전체 스크롤 1개로 통일 (≤1024 · 기존 컷 재사용)
   ⚠️ 원인: `.left_panel { position:sticky; top:115px; height:calc(100vh - 115px); overflow-y:auto }`
      (sports.css)가 모바일에서 **해제되지 않았다**. 같은 블록의 `.right_detail_panel` 은
      이미 `height:auto !important; position:static !important` 로 풀려 있는데 `.left_panel` 만 누락된 것.
      → 목록이 자체 내부 스크롤 영역이 되어 스크롤 주체가 둘이 되고, 하단 페이징이 갇혔다.
   ⚠️ `100vh` 는 iOS 에서 주소창·하단바를 제외하지 않은 높이라 계산 결과가 실제 가시영역보다 커서
      마지막 행이 잘리는 직접 원인이 된다. 모바일에서는 높이 계산 자체를 없앤다(auto).
   데스크톱(≥1025)은 이 블록 밖이라 **무변경** — 내부 스크롤 4단 레이아웃 그대로.
   ============================================================================ */
@media (max-width: 1024px) {
    .left_panel {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        top: auto !important;
    }

    /* 하단 고정 베팅슬립 바(.mobile_cart_bar 46px)에 페이징이 가리지 않게 여백 확보.
       safe-area = 홈 인디케이터·브라우저 하단바 몫. */
    .betting_main_layout {
        padding-bottom: calc(46px + 16px + env(safe-area-inset-bottom, 0px));
    }
}
/* ============================================================================
   AV §2-2 · s2 좌측 드로어 — **동작만** 보강. 배경 비침(반투명 백드롭)은 의도된 디자인이라 무접촉.
   실측: body 잠금(appBodyScrollLock — 위치 보존/복원 내장) · overscroll-behavior:contain ·
         전면 백드롭(.m_side_backdrop inset:0 · 탭하면 닫힘) 은 **이미 구현돼 있다**.
         → 남은 결함 2가지만 고친다: ① 100vh 잘림 ② UP/DOWN 플로팅 버튼이 드로어 위에 겹침.
   ============================================================================ */
@media (max-width: 1024px) {
    .league_sidebar {
        /* ⚠️ 100vh 는 iOS 에서 주소창·하단바를 빼지 않아 마지막 항목이 잘린다.
           dvh 우선 + vh 폴백(선언 순서로 처리 — 미지원 브라우저는 뒤 선언을 무시). */
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        /* 홈 인디케이터·브라우저 하단바에 마지막 항목이 가리지 않게. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* UP/DOWN 플로팅(z-index 1200)이 드로어(1000)·백드롭(999) 위로 떠 있었다.
       드로어가 열린 동안에는 감춘다(닫히면 자동 복귀 — 상태 클래스 기반이라 JS 불요). */
    body:has(.league_sidebar.m_open) #go-btn { display: none; }
}

/* ============================================================================
   AV §3-2(재수정) · s2 가로모드 베팅슬립
   🔴 앞 구현이 **대상 요소를 잘못 잡았다**. 정정 내용:
      · 모바일 펼침 패널의 정본은 `.cart_sidebar` 가 아니라 **`.mobile_cart_overlay`** 다
        (`.cart_sidebar.ae_drawer.drawer_open` 은 PC 1024~1279.98 구간 드로어 — 모바일과 별개 축).
      · 열림 클래스도 `.open`(overlay) 이지 내가 썼던 `.cart_sidebar.open` 이 아니었다 → 규칙이 아무 데도 안 걸렸다.
   ① 패널이 "이미 펼쳐진 채" 보이던 원인:
      `.mobile_cart_overlay` 의 기본 숨김(`bottom:-100%`)이 **`@media (max-width:1023.98px)` 안에만** 있다.
      가로로 돌리면 폭이 1024 를 넘어 그 블록이 해제되고, 패널은 **스타일 없는 일반 블록**이 되어
      문서 흐름에 그대로 노출된다. 접힌 바와 패널이 동시에 보이던 게 이것이다.
   ② 펼침 = **우측 슬라이드**(하단 아님). 근거: 폰 가로 높이가 390~430px 뿐이라 하단에서 올라오면
      경기 목록이 서너 줄만 남는다. 우측이면 세로 전체를 쓰면서 목록도 절반 이상 유지된다.
      폭 = `min(360px, 46vw)` — 가로 실폭 844~932 기준 388~429px 이라 **화면 절반 이하**를 지킨다.
   ③ 스크롤 격리: 패널이 **실제 스크롤 컨테이너**가 되도록 `height:100%` + `overflow-y:auto` 를 명시했다.
      앞 구현은 높이 제한이 실효되지 않아 컨테이너가 스크롤되지 않았고, 그래서
      `overscroll-behavior:contain` 이 걸어도 아무 효과가 없었다(스크롤이 없으면 체이닝 규칙도 무의미).
   ④ UP/DOWN 플로팅 — §2-2 와 **동일 방식**(`body:has(...)` 상태 선택자)으로 통일.
   ⑤ 기존 max-width 값(1023.98·1024·1279.98) 무변경. 이 블록은 조건 '추가'만 한다.
   ============================================================================ */
@media (max-height: 540px) {
    /* 하단 접힌 바 — 폭이 1024 를 넘어도 유지(가로에서도 같은 조작 관용구). */
    .mobile_cart_bar {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 1100;
    }

    /* 펼침 패널 = 우측 슬라이드. 기본은 화면 밖(= 접힘). 바를 눌러 .open 이 붙어야 들어온다. */
    .mobile_cart_overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: min(360px, 46vw);          /* 화면 절반 이하 — 목록이 계속 보이게 */
        height: 100%;                      /* ③ 실제 스크롤 컨테이너가 되기 위한 확정 높이 */
        max-height: 100%;
        transform: translateX(105%);       /* 숨김 축을 bottom → transform 으로 교체 */
        transition: transform .28s ease;
        border-radius: 0;                  /* 상단 라운드는 하단 시트용 — 우측 패널에선 해제 */
        overflow-y: auto;                  /* ③ */
        overscroll-behavior: contain;      /* ③ 뒤 목록으로 스크롤 전파 차단 */
        z-index: 1101;
    }

    .mobile_cart_overlay.open {
        bottom: 0;                         /* 구 규칙 무력화(우측 축으로 통일) */
        transform: translateX(0);
    }

    /* ④ UP/DOWN 플로팅이 패널 위에 겹치던 것 — §2-2 와 동일 관용구로 통일. */
    body:has(.mobile_cart_overlay.open) #go-btn { display: none; }

    /* 목록 하단 여백 = 접힌 바(46) + 여유 + safe-area(§1 과 같은 축). */
    .betting_main_layout { padding-bottom: calc(46px + 16px + env(safe-area-inset-bottom, 0px)); }

    /* 좌측 패널 내부 스크롤 해제 — 가로는 세로 여유가 더 없어 100vh 계산이 특히 위험하다(§1 동축). */
    .left_panel {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* ============================================================================
   CART-BAR · 모바일 배팅슬립 바 — 하단 탭바(sk_bnav 64px·z1300) 위로 승격 + 옅은 핑크 톤(스킨 축).
   구: bottom:0·z1000 → 탭바에 깔려 "선택된 경기/배당/베팅슬립" 바가 가려지던 실측 사고 수리.
   mobile.css 최후 로드라 sports.css 기본값·본 파일 상단(max-height 540) 규칙을 순서로 이긴다.
   ============================================================================ */
@media (max-width: 1024px) {
    .mobile_cart_bar {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: 1290;   /* 콘텐츠 위 · 탭바(1300) 아래 — 오프셋으로 물리 분리라 겹침 없음 */
        background: linear-gradient(180deg, #ffd9e7, #ffc0d8);
        color: #7a1436;
        border-top: 1px solid #ff9ac2;
    }
    .mobile_cart_bar .badge { background: #e8186a; color: #fff; }
    .mobile_cart_bar .total_odds { color: #e8186a; font-weight: 800; }
    .mobile_cart_bar .cart_info_right { color: #a3134f; }
    /* 펼침 시트·백드롭 = 탭바 위 전면(펼친 동안 탭바 조작 대상 아님) */
    .mobile_cart_overlay { z-index: 1310; }
    .cart_backdrop { z-index: 1305; }
    /* 목록 하단 여백 = 카트바(46) + 탭바(64) + 여유 — 페이징 가림 방지 보정 */
    .betting_main_layout { padding-bottom: calc(46px + 64px + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* CART-BAR-2 · 배당 영역(cart_info_center) — 연핑크 바탕에서 구 노랑/핑크 글자가 안 보이던 것 → 진한 자주 계열로 대비 확보 */
@media (max-width: 1024px) {
    .mobile_cart_bar .cart_info_center { color: #7a1436; }
    .mobile_cart_bar .cart_info_center .total_odds { color: #b1124d; font-weight: 800; }
    .mobile_cart_bar .cart_info_center .unit { color: #7a1436; }
    .mobile_cart_bar .cart_info_left .text { color: #7a1436; }
}

/* CEO-M-FIX · 모바일 당겨서 새로고침(pull-to-refresh) 차단(지시 — 전 미러 확장) —
   스크롤 최상단에서 아래로 당길 때 브라우저 새로고침(서킷 재수립 = 풀 리로드) 발동 방지.
   y축만 차단(contain) — 좌우 스와이프 뒤로가기는 유지. iOS 16+/안드 크롬 지원, 미지원 구형 = 기존 동작(무해). */
@media (max-width: 1024px) {
    html, body {
        overscroll-behavior-y: contain;
    }
}