@media (max-width:640px) {
    .pc { display: none !important;}
    .mo { display: block !important;}
}

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

/* 모바일 대응 */
@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 !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 {
        /* Flex 해제 */
        width: 100%; /* 화면 너비에 맞춤 */
        margin: 0; /* 외부 여백 제거 (필요시) */
        padding: 0;
        overflow-x: hidden; /* 가로 스크롤 방지 */
    }

    /* 1. 사이드바 밀어넣기 (화면 밖)
       ⚠️ 오프셋은 사이드바 실폭과 동기 — CJ-4b 가 폭을 260 → 300 으로 올렸는데 -280 그대로 두면
          닫힘 상태에서 우측 20px 가 화면에 삐져나온다(실사고). 폭 변경 시 이 값도 함께. */
    .league_sidebar {
        position: fixed;
        left: -300px; /* 왼쪽 밖(= sports.css .league_sidebar width 300 과 동기) */
        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: #1e221f;
    }
}
/* ============================================================
   AT 단계 4 · ≤1024 좌측 메뉴 = 전역 사이드바 자체가 off-canvas 드로어.
   구 `.mobile_menu_wrapper`(Game 10 + Quick 12) 제거 — 22항목 전부 사이드바가 보유하므로
   내비게이션 축을 둘로 가르지 않는다. 햄버거는 기존 btn_m_menu 1개.
   위 118행 `.league_sidebar { position:fixed; left:-300px }` 가 닫힘 상태 정본.
   ============================================================ */
@media (max-width: 1024px) {
    .league_sidebar.m_open {
        left: 0;
        /* BL(2026-08-30 지시) · 드로어 = 화면 맨 위부터(한줄공지 위를 덮음) — 카트 오버레이(top:0)와 동일 축.
           구 fixed+top 미지정은 정적 오프셋(헤더+공지 아래)에서 시작해 공지가 드로어 위에 남았다. */
        top: 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;
    }
}

/* ============================================================================
   CJ — front.s3 모바일 (§D-1 메뉴 그리드 / §D-3 카트 방향 전환 / §A 헤더 토큰 해제)
   ⚠️ 이 파일이 CSS 링크 순서상 **마지막**이라(App.razor) 위 파일들의 값을 덮는다.
      새 브레이크포인트는 만들지 않는다 — 1024 는 이 파일이 이미 쓰는 모바일 컷이다.
   ============================================================================ */

/* ── §A · 모바일에는 PC 헤더가 없다 ──
   layout.css `--app-hdr-h`(104/142)는 PC 전폭 헤더 아래 3열 기준선을 만드는 값이다.
   ≤1024 에서는 PC 헤더가 숨고 사이드바·카트가 off-canvas(position:fixed)로 바뀌므로
   그 값을 그대로 두면 드로어가 화면 위에서 104px 내려온 채로 뜬다. 0 으로 되돌린다. */
@media screen and (max-width: 1024px) {
    #app { --app-hdr-h: 0px; }
}

/* ── §D-1 → CJ-2 §I② · 메뉴 3열 그리드 ──
   [CJ-1] PC 숨김 + ≤1024 전용이었다.
   [CJ-2] §I 로 이 그리드가 **좌측 열 정본**이 되어 PC 에도 노출된다 → 기본 숨김 규칙 폐기.
          규격(그리드·칸·색)은 layout.css `.league_sidebar .addMenu-wrap`(0,2,0)이 정본이고,
          여기는 모바일에서만 다른 값만 남긴다(터치 타겟 확대).
   ⚠️ 구 `.addMenu-wrap.inv`(녹색 3칸) 규칙은 폐기 — 마크업이 §I① `.side_act_btns` 버튼형으로 대체됐다. */
@media screen and (max-width: 1024px) {
    /* 손가락 타겟 = 44 → 52px. 그 외 값은 layout.css 정본을 그대로 쓴다. */
    /* 지시 · 높이 오버라이드 제거 — PC 정본(40px)과 통일. 폰트만 모바일 보정 유지. */
    .league_sidebar .addMenu-wrap > a { font-size: 13px; }
    .league_sidebar .addMenu-wrap > a:active { background: #1a1a1a; }
}

/* ── §D-3 · 모바일 카트 = 하단 상승 → **우측 슬라이드 인** ──
   좌측 메뉴 드로어(좌→우)와 대비시키기 위한 방향 전환.
   ⚠️ 신규 발명 0 — 선언 세트는 위 `@media (max-height:540px)` 가로모드 블록의 관용구를 그대로 옮긴 것이고,
      **방향 파라미터(폭)만** 세로 화면에 맞게 바꾼다(46vw → 86vw. 세로 375px 에서 46vw 는 172px 로 못 쓴다).
   ⚠️ 열림 축은 그대로 `.open` 클래스 1개(C# IsCartOpen) — JS 배선·상태 신설 0.
   ⚠️ 카트 바(.mobile_cart_bar)·backdrop·배경 스크롤 잠금은 §D-4 대로 현행 유지(무접촉). */
@media screen and (max-width: 1024px) {
    .mobile_cart_overlay {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 360px !important;   /* BL(2026-08-30 지시) · 모바일 카트 폭 확대(구 min(360,86vw)) */
        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;                         /* 구 `bottom:-100%` 무력화(우측 축으로 통일) */
        transform: translateX(0);
    }

    /* 우측 패널은 세로 전체를 쓰므로 하단 시트용 높이 상한(sports.css calc(-600px + 110vh))을 해제한다. */
    .mobile_cart_overlay .cart_section .cart_list { max-height: none; }
}

/* ── §D-3 · 카트 아래 GIF 배너 4종 ── 열 폭 100% 추종(공용 규격은 sports.css 정본). */
@media screen and (max-width: 1024px) {
    .mobile_cart_overlay .right_banner_list { padding: 10px; }
}