/* AT · 구 무접두 토큰 세트(:root --bg-main/--bg-card/--bg-header/--accent/--text-main/--text-sub/
   --text-odds/--border) 삭제. 근거: var() 소비 0 · JS getComputedStyle 참조 0(실측) = 화면 영향 0.
   무접두 이름(--border·--accent)이 --app-border 와 값이 우연히 같아 '같은 변수' 오인 함정이었고,
   --accent:var(--app-primary)(청록) dead 선언이 s3~c5 로 복제되는 것을 차단. 테마 토큰 정본 = app-front.css :root. */
/* AG2 · 저높이(642류) 컬럼 세로 스크롤 — 구 스크롤바 완전 숨김 폐기 → 슬림 다크(컬럼 한정).
   height=calc(100vh−115px)+overflow-y:auto 기존 축이라 max-height 충족·overscroll contain 만 보강.
   overflow:auto 특성상 콘텐츠가 넘칠 때만 출현 = 900px+ 높이(콘텐츠 수용)에선 스크롤바 미출현. */
.league_sidebar::-webkit-scrollbar {
    width: 6px;
}

.league_sidebar::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 10px;
}

.league_sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.league_sidebar {
    /* ⚠️ thin 금지 — layout.css §K-5(스크롤바 숨김 정본 · scrollbar-width:none)를 이 파일이
       **뒤에 로드**되며 되살리고 있었다(모던 크롬은 scrollbar-width 지원 → thin 이 바 노출).
       숨김으로 동기 — 스크롤 기능은 유지, 바만 비표시. */
    scrollbar-width: none;
    overscroll-behavior: contain; /* 컬럼 끝에서 페이지로 스크롤 전파 차단 */
}

/* AG2 · 우측 퀵바+카트 컬럼 동일 처리(§K-5 동기 — 같은 사유로 thin → none) */
.cart_sidebar {
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.cart_sidebar::-webkit-scrollbar {
    width: 6px;
}

.cart_sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* 기존 thumb 설정은 다른 영역(.right_detail_panel 등)을 위해 그대로 유지됩니다 */
.cart_sidebar::-webkit-scrollbar-thumb,
.right_detail_panel::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 10px;
}
/* 좌측 리그 리스트 (고정) — AF-미세 · flex:none = 고정폭 보장 축(절대 잘리지 않음. 수축은 가운데 2단 담당) */
.league_sidebar {
    width: 300px;   /* CJ-4b ⑤ · 260 → 300(GIF 배너 300px 원본과 정합) */
    flex: none;
    /*background: #1d201d;
    border-radius: 4px;
    border: 1px solid var(--app-border);*/
    /* AT-1 Option C · 사이드바는 레이아웃 셸의 좌측 컬럼이 되어 **최상단부터 전체 높이**를 차지한다.
       (헤더는 우측 컬럼 안으로 이동했으므로 더 이상 헤더 높이만큼 내려갈 이유가 없음 → 115px 폐기.)
       ⚠️ position:sticky 유지 근거: static 이면 스크롤 시 컬럼이 위로 사라지고,
          fixed 로 바꾸면 flow 에서 빠져 셸의 260px 폭 예약이 사라져 본문이 밑으로 파고든다.
          sticky 만이 "폭 예약 + 화면 고정"을 동시에 만족한다.
       ⚠️ 나머지 115px 12곳(left_panel·cart_sidebar·right_detail_panel·bet_history_container·보호 배너 2곳)은
          무접촉 — sticky;top:0 헤더도 뷰포트 최상단을 계속 점유하므로 그 값들은 여전히 "헤더 아래"를 의미한다.
       ⚠️ CJ §A · 헤더가 셸 밖 전폭 밴드로 승격되면서 기준선이 top:0 → 헤더 실높이(--app-hdr-h)로 내려갔다.
          0 으로 두면 스크롤 시 사이드바 상단이 sticky 헤더(z-index:1000) 밑으로 파고든다.
          토큰 정본·산식은 layout.css `#app { --app-hdr-h }` — 폴백 0px 는 토큰 미로드 시 구 동작 유지용. */
    position: sticky;
    top: var(--app-hdr-h, 0px);
    height: calc(100vh - var(--app-hdr-h, 0px));
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* 종목이 많아지면 사이드바 내부에서 스크롤 */
    /* B-FOLD · 접힘 전환(레이아웃 점프 없이). 폭만 전환 — 위치·높이 축은 불변. */
    transition: width .22s ease;
}

/* B-FOLD · 접힘 폭(사용자 의도 축). 폭 축이 이 파일 정본이라 여기 둔다 — 내부 요소 규칙은 layout.css.
   [r180 원 경위 — 보존] 원래 스코프 = (≥1350) AND 비-4단: `center = VW − 560` 산식·F1 경계(1350) 근거가
      사이드바 260 고정 전제라 4단은 제외했었다.
   🔴 S2-FOLD4 개정 — :not(.four_col) 해제(4단도 접힘 허용·PM 결정). 산식은 주석 도출값일 뿐 실폭은
      flex 잔여 분배라, 접힘 244px 는 카트(300 고정) 무접촉으로 중앙 2열만 흡수. 접힘 4단 하한 = 1186  [CJ-4b]
      (아래 S2-FOLD4 블록이 1186~1429.98 접힘 구간의 F2 레일 무효화·도킹 복원을 담당).
   레일 폭 56px = 아이콘 18 + 좌우 패딩 4+4 + 카드 테두리/여백(참고 목업 --sideC 와 동일 값). */
@media (min-width: 1430px) {
    html.sb_folded .page_shell > .league_sidebar {
        width: 56px;
    }
}

/* ============================================================
   S2-FOLD4 · 접힘 4단 확장 구간(1186~1429.98) — F2(레일) 무효화 + 접힌 도킹 복원.
   ⚠️ F2 대칭쌍: 아래 복원 속성들은 이 파일의 AF F2 블록
      (`@media (min-width:1024px) and (max-width:1429.98px) { .four_col .league_sidebar { position:fixed … } }`
      — sports.css AF 구간, .side_rail/.league_sidebar/backdrop 규칙)이 바꾼 것을 되돌리는 1:1 쌍이다.
      F2 원 규칙은 무접촉 — 이 블록은 소스상 F2 보다 앞이지만 특이도가 높아 이긴다
      (html.sb_folded … .page_shell.four_col ≥ (0,3,2) vs F2 .four_col X (0,2,0) — 소스 순서 무관 압승).
   경계 근거: 접힘 4단 필요폭 = 56(접힌 사이드바)+400(목록 min)+380(상세 min)+300(카트)+50(간격) = 1186  [CJ-4b ⑤ 재산정].
      1024~1145.98 접힘은 이 블록 미발동 = 현행 F2 레일/F3 상세 오버레이 그대로(12px 부족 구간을 만들지 않는 경계 선택).
   스코프 = html.sb_folded .page_shell.four_col 한정 — 밖으로 새는 셀렉터 0(3단·펼침·s1 무접촉).
   ============================================================ */
@media (min-width: 1186px) and (max-width: 1429.98px) {
    /* 레일·백드롭 숨김(F2 산물) — 접힌 사이드바가 그 자리를 대신한다. */
    html.sb_folded .page_shell.four_col .side_rail,
    html.sb_folded .page_shell.four_col .side_rail_backdrop {
        display: none;
    }

    /* 사이드바 = F2 fixed 플라이아웃 → 접힌 도킹(56px)으로 복원. 각 속성 = F2 규칙의 대칭 되돌림. */
    html.sb_folded .page_shell.four_col > .league_sidebar {
        position: sticky;          /* F2 fixed → 도킹(폭 예약 복원) */
        /* ⚠️ CJ §A · 기준선은 헤더 실높이(--app-hdr-h). 여기 top:0/100vh 를 남겨 두면 이 구간(1186~1429.98)
           에서만 사이드바가 전폭 헤더 밑으로 파고든다 — 기본 `.league_sidebar` 규칙과 같은 축으로 맞춘다. */
        top: var(--app-hdr-h, 0px);
        left: auto;
        height: calc(100vh - var(--app-hdr-h, 0px));
        z-index: auto;
        margin: 0;
        background: transparent;   /* F2 #141614 패널화 해제(기본 축 복원) */
        border-right: none;
        box-shadow: none;
        transform: none;           /* F2 translateX(-105%) 숨김 해제 */
        transition: width .22s ease;   /* F2 transform 트랜지션 → 기본(.league_sidebar) width 축 복원 */
        padding: 0;
        width: 56px;               /* 접힘 폭(≥1350 규칙과 동일 값 — 별값 금지) */
    }

    /* 접힘 중에도 펴기 버튼 접근 가능(layout.css 버튼 규칙은 ≥1350 — 이 구간 전용 보충). */
    html.sb_folded .page_shell.four_col .league_sidebar .side_fold_expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 24px;
        margin: 8px auto 0;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid var(--app-border);
        border-radius: 4px;
        background: transparent;
        color: var(--app-text-muted);
        font-size: 11px;
        line-height: 1;
        cursor: pointer;
    }

    /* 내부 숨김(layout.css ≥1350 세트와 동일 구성 — 이 구간 전용 보충. 값 동일·스코프만 4단 접힘).
       ⚠️ CJ-2 §I 신 블록 4종(유저카드·3버튼·3열 그리드·배너)을 함께 넣는다 —
          빠뜨리면 56px 폭에 그대로 눌려 들어가 좌측이 깨진다(layout.css ≥1350 세트와 같은 이유). */
    html.sb_folded .page_shell.four_col .league_sidebar .side_logo,
    html.sb_folded .page_shell.four_col .league_sidebar .side_menu_block_ttl,
    html.sb_folded .page_shell.four_col .league_sidebar .side_menu_label,
    html.sb_folded .page_shell.four_col .league_sidebar .sch_sp_box,
    html.sb_folded .page_shell.four_col .league_sidebar .side_section_head,
    html.sb_folded .page_shell.four_col .league_sidebar .side_tree,
    html.sb_folded .page_shell.four_col .league_sidebar .side_user,
    html.sb_folded .page_shell.four_col .league_sidebar .side_act_btns,
    html.sb_folded .page_shell.four_col .league_sidebar .addMenu-wrap,
    html.sb_folded .page_shell.four_col .league_sidebar .side_banners {
        display: none;
    }

    html.sb_folded .page_shell.four_col .league_sidebar .side_menu_block {
        margin: 8px 6px 0;
    }

    html.sb_folded .page_shell.four_col .league_sidebar .side_menu_item {
        justify-content: center;
        gap: 0;
        padding: 12px 4px;
    }
}

/* 검색창 스타일 */
.sch_sp_box {
    padding: 10px 0;
    margin: 10px 10px 0;   /* 지시 · side_user/side_act_btns 와 같은 인셋(좌측 열 공통 마진 관용구) */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp_sch, .sp_sch2 {
    position: relative;
    display: flex;
    align-items: center;
}

.sch_key, .sch_key2 {
    width: 100%;
    /* AT 마감 C · 브랜드 옅은 채움. 리터럴 rgba 금지 — 토큰 경유(데모별 브랜드색 따라감). */
    background: var(--app-primary-tint);
    border: 1px solid var(--app-border);
    border-radius: 20px; /* 둥근 검색창 */
    padding: 8px 35px 8px 15px;
    color: #fff;
    font-size: 11px;
}

.sch_sp_btn, .sch_sp_btn2 {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #93a196;
    cursor: pointer;
}

/* 섹션 타이틀 */
.left_ttl {
    background: linear-gradient(180deg, var(--app-bg-panel-2) 0%, var(--app-bg-panel) 100%);
    padding: 14px 8px;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    border-bottom: 2px solid var(--app-primary);
}
/* L-7 후속v2② — 인기경기 전용 보기 진입 상태 바(리스트 영역 상단). */
.popular_mode_bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #2a2f3a 0%, #222530 100%);
    border: 1px solid var(--app-primary);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
.popular_mode_bar .pm_icon { font-size: 15px; }
.popular_mode_bar .pm_text { flex: 1; }
.popular_mode_bar .pm_clear {
    background: var(--app-primary);
    color: #16181d;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-weight: bold;
    cursor: pointer;
}
.popular_mode_bar .pm_clear:hover { opacity: .85; }

/* L-7 후속v2② — 인기게임 헤더 ❯ = 인기경기 전용 보기 진입(우측 배치·클릭). */
.left_ttl .pop_arrow {
    float: right;
    cursor: pointer;
    color: var(--app-primary);
    opacity: .75;
    transition: opacity .15s, transform .15s;
}
.left_ttl .pop_arrow:hover {
    opacity: 1;
    transform: translateX(2px);
}
.snb_sp_box{
    margin-bottom:10px;
}
/* 종목 리스트 아이템 */
.snb_item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: linear-gradient(180deg, var(--app-bg-panel-2) 0%, #2f323a 100%);
    border-bottom: 1px solid var(--app-bg-panel);
    border-left: 3px solid transparent; /* 기본 상태에서 자리를 미리 잡아둠 */
    cursor: pointer;
    transition: all 0.2s ease;
}

    .snb_item:hover {
        background: var(--app-bg-panel);
    }

/* 기본적으로 숨김 */
.snb_leagues_wrapper {
    background: var(--app-bg-panel);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* 부드러운 애니메이션 효과 */
}

/* active 클래스가 붙었을 때만 노출 */
.snb_sp_group.active .snb_leagues_wrapper {
    max-height: 500px; /* 리그 리스트 길이에 맞춰 넉넉하게 설정 */
    display: block;
}

/* 활성화된 종목 스타일 */
.snb_sp_group.active .snb_item {
    /* 1. 배경을 더 어둡고 단단한 색상으로 변경하거나 그라데이션 반전 */
    background: #1a1c21;
    /* 2. 왼쪽 포인트 보더 강조 */
    border-left: 3px solid #81d8d0;
    /* 3. 약간의 입체감을 위한 내부 그림자 */
    box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.5);
}
/* 활성화 시 아이콘 밝기 조절 */
.snb_sp_group.active .icon_sp {
    filter: brightness(1.1) drop-shadow(0 0 3px rgba(239, 187, 44, 0.5));
}
.snb_league_item {
    display: flex; /* 가로 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    padding: 8px 15px 8px 30px; /* 들여쓰기 조정 */
    color: #93a196;
    font-size: 12px;
    cursor: pointer;
}

    .snb_league_item:hover {
        color: #fff;
        background: var(--app-bg-panel-2);
    }
.st_game_ico {
    margin-right: 2px; /* 이미지와 글자 사이 간격 */
    border-radius: 2px; /* 국기 이미지의 경우 살짝 둥글게 하면 깔끔함 */
    object-fit: contain;
}

.league_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 리그명이 길 경우 말줄임표 처리 */
}
.icon_sp {
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

/* 경기 목록 행 · 시각 앞 종목 아이콘 — 사이드바 트리용 .icon_sp 를 그대로 쓰되
   여기서는 여백만 좁히고 세로 중앙을 맞춘다(트리의 12px 는 목록 한 줄에서 과하다).
   ⚠️ 숨겨질 때(onerror display:none) margin 도 함께 사라져 좌측 정렬이 그대로 유지된다. */
.match_top_row .icon_sp {
    margin-right: 6px;
    vertical-align: middle;
    flex: none;
}

.snb_sp_name {
    flex: 1;
    color: #ccc;
    font-size: 13px;
}

.snb_sp_cnt {
    color: #b9b9b9;
    font-weight: bold;
    font-size: 12px;
}

/* L-7 — 공용 사이드바 신규 요소(리그 경기수·빈 상태·검색 힌트·인기게임 클릭). */
.snb_league_item .league_text { flex: 1; }
.snb_league_item .league_cnt { margin-left: auto; color: #7d8595; font-size: 11px; padding-left: 6px; }
.snb_empty, .five_empty { padding: 12px 15px; color: #6b7280; font-size: 12px; list-style: none; }
.sch_hint { padding: 4px 6px 0; color: #e0a23c; font-size: 11px; }
.five_game { cursor: pointer; transition: filter 0.15s ease; }
.five_game:hover { filter: brightness(1.1); }

/* 최신 인기게임 리스트 */
.five_spo_list {
    list-style: none;
    padding: 0;
}

.five_game {
    display: flex;
    padding: 12px 5px;
    border-bottom: 1px solid var(--app-bg-panel);
    align-items: center;
    background: linear-gradient(180deg, var(--app-bg-panel-2) 0%, #2f323a 100%);
}

.five_time {
    font-size: 13px;
    color: #f1f1f1;
    min-width: 40px;
}

.five_sport_icon {
    width: 36px;
    height: 36px;
    margin: 0 10px;
}

.five_team_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.five_team_row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini_logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.team_name {
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 레이아웃 분할 */
/* AH-EXT · 배팅 중앙 컬럼 — BK A-1 로 타이틀 바 폐기 → 종목 이동 드롭다운(.vm-dd-wrap) + betting_main_layout 세로 스택.
   AF 중앙 축(flex:1 1 0·min-width:0)을 이 래퍼가 승계(가로 수축 담당) — 내부 main_layout 는 세로 잔여만. */
.betting_center_col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* BK A-1·C · 구 .page_title_bar--betting 폐기(마크업 소비처 0) → 같은 자리에 종목 이동 드롭다운.
   클래스 관용구 vm-dd-* 는 미니게임·가상게임 것을 그대로 재사용하되, 그쪽 정의는 Mini.razor·Virtual.razor
   인라인 <style> 안에만 있어 스포츠 표면에서는 소비할 수 없다 → 여기 1벌 신설(신규 클래스 아님).
   차이 1곳: 미니/가상은 32px 원형 아이콘, 여기는 현재 메뉴명을 담는 라벨형 —
   h3 제목이 사라졌으므로 이 버튼이 제목을 겸한다(C-2).
   🔴 반드시 .vm-dd-wrap--surface 로 스코프할 것 — 미니게임·가상게임·충환전내역이 vm-dd-* 를 각자
      인라인 <style> 로 정의하는데 그쪽은 padding 을 안 잡는다. 전역으로 풀면 여기 padding 이 새어
      32px 원형 버튼이 부풀고 메뉴 정렬(right:0 vs left:0)도 어긋난다. 스코프가 양방향 차단이다.
   ⚠️ 값은 s2 Mini.razor 의 vm-dd-* 원본과 동일(양 프로젝트 미니 드롭다운이 이미 같은 금/흑 팔레트).
   ⚠️ 부모 .betting_center_col 이 flex column 이라 구 --betting 과 동일하게 flex:none 유지(세로 늘어남 차단). */
.vm-dd-wrap--surface {
    position: relative;
    flex: none;
    margin: 0 0 10px;
    /* BK후속 ① · PC 미노출. ≥1025 에서는 좌측 사이드 내비(.league_sidebar)의 활성 하이라이트가
       현재 위치를 표시하므로 이 버튼이 중복이다. 아래 미디어쿼리에서만 되살린다. */
    display: none;
}

/* BK후속 ① · 모바일 전용 노출 + 행 우측 정렬.
   🔴 컷 값 1024 는 새로 정한 값이 아니라 **좌측 사이드 내비가 off-canvas 로 빠지는 기존 컷**을 그대로 쓴 것.
      정본 = mobile.css `@media (max-width:1024px) { .league_sidebar { position:fixed; left:-300px } }`.
      둘이 어긋나면 사이드바도 드롭다운도 없는 폭 구간이 생겨 현재 위치 표시가 0이 된다 — 값 변경 시 양쪽 동시. */
@media (max-width: 1024px) {
    .vm-dd-wrap--surface {
        display: flex;
        justify-content: flex-end;
    }
}

.vm-dd-wrap--surface .vm-dd-btn {
    max-width: 100%;
    border: 1px solid #2c2a24;
    background: #17171a;
    color: #b9b29c;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    /* C-5 · 폭이 모자라면 잘리지 말고 말줄임 — 버튼 자체가 잘려나가는 것을 막는다. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-dd-wrap--surface .vm-dd-btn:hover {
    border-color: #5fbfb6;
    color: #b2ebe6;
}

.vm-dd-wrap--surface .vm-dd-menu {
    position: absolute;
    /* BK후속 ① · 버튼이 우측 정렬이므로 메뉴도 우측 기준(구 left:0 = 좌측 기준이라 버튼과 어긋난다). */
    right: 0;
    top: calc(100% + 4px);
    z-index: 80;
    min-width: 170px;
    max-height: 300px;
    overflow-y: auto;
    background: #17171a;
    border: 1px solid #3a3222;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

.vm-dd-wrap--surface .vm-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    background: none;
    border: 0;
    color: #b9b29c;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.vm-dd-wrap--surface .vm-dd-item:hover {
    background: #232019;
    color: #e3f4f2;
}

.vm-dd-wrap--surface .vm-dd-item.active {
    color: #b2ebe6;
    font-weight: 800;
}

.betting_main_layout {
    flex: 1 1 0; /* 남은 모든 공간 차지 */
    /* AF-미세 · flex item 기본 min-width:auto 차단 — 내부 min-content(긴 팀명 등)가 중앙 최소폭을
       밀어올려 우측(카트·퀵바)이 수 px 잘리던 근본 원인. 가운데가 잔여 폭만 나눠 갖는 축으로 전환. */
    min-width: 0;
    display: flex;
    gap: 10px;
}

/* AH-EXT · center_col 내부에선 main_layout 는 세로 잔여 높이(가로 축은 컬럼이 담당). */
.betting_center_col > .betting_main_layout {
    flex: 1 1 auto;
    min-width: 0;
}
.left_panel {
    position: sticky;
    top: 115px;
    height: calc(100vh - 115px);
    overflow-y: auto;
    border-radius:8px;
}

/* 중앙 내부의 좌/우 (정확히 50:50 — AF-미세 · 현행 시각 밸런스 유지 판단) */
.left_panel, .right_detail_panel {
    flex: 1 1 0;
    min-width: 0; /* 내부 배당판 찌그러짐 방지 */
    background: var(--app-bg-panel);
}

/* AF-미세 · 데스크톱 가독 하한(minmax 축) — AF 필요폭 산식(목록 400/상세 380)과 동일 값.
   min 도달 시 이후 수축은 AF3 모드 전환(F2 레일 1429.98↓ → F3 상세 오버레이 1173.98↓)이 이어받는다.
   1024 미만(모바일)은 미적용 — 좁은 화면 오버플로 방지. */
@media (min-width: 1024px) {
    .left_panel { min-width: 400px; }
    .right_detail_panel { min-width: 380px; }
}

/* 우측 배팅 카트 (고정) — AF-미세 · flex:none = 고정폭 보장 축(카트+퀵바 절대 잘리지 않음)
   ⚠️ CJ §A-2 · 구 `top:115px` 는 "구 sticky 헤더 아래" 를 뜻하는 하드코딩이었고, 좌측 사이드바(top:0)와
      기준선이 달라 3열 상단이 어긋나 있었다(§A-2 가 지목한 증상). 두 컬럼을 같은 토큰으로 통일한다.
   ⚠️ 폴백 115px 는 토큰 미로드 시 구 동작 유지용 — 값 자체는 여기서 다시 쓰지 않는다. */
.cart_sidebar {
    width: 300px;   /* CJ-4b ⑤ · 260 → 300 */
    flex: none;
    position: sticky;
    top: var(--app-hdr-h, 115px);
    height: calc(100vh - var(--app-hdr-h, 115px));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ── CJ §C · 우측 배너 열(카트 없는 라우트) ──
   카트 열과 **같은 폭·같은 기준선**을 쓰도록 .cart_sidebar 를 그대로 재사용하고, 카트 전용 장식만 해제한다.
   (신규 폭 상수 0 — 폭 산식 560 을 건드리지 않는다.) */
.cart_sidebar.right_banner_col {
    overflow-y: auto;
}

/* ── CJ §C-3/C-5 · GIF 배너 세로 스택(CJ-4c 3종 체계) ──
   폭 100%(열 폭 추종) · 비율 유지 · lazy 로딩(마크업 loading="lazy").
   좌우 인셋은 aside(.cart_sidebar 패딩 — layout.css) 단일 소스 → 여기 좌우 패딩 0(이중 인셋 방지). */
.right_banner_list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
}

.right_banner {
    display: block;
    line-height: 0;              /* 인라인 이미지 하단 여백 제거 */
    /*border-radius: var(--app-radius-sm);*/
    overflow: hidden;
}

/* §C-4 · 링크 소스가 없는 배너 = 표시만·클릭 무동작. 커서로도 클릭 가능처럼 보이지 않게 한다. */
.right_banner.is_static { cursor: default; }

/* CJ-4c ③ · 버튼형 배너(스포츠중계 — 준비중 모달) — 앵커가 아니라서 커서를 직접 준다. */
.right_banner.right_banner_btn { cursor: pointer; }

.right_banner_img {
    display: block;
    width: 100%;
    height: auto;
}
/* 탭 버튼 스타일 */
.cart_tabs {
    padding: 10px 0;
    border-bottom: 1px solid var(--app-border);
}

.tab_btn {
    width: 100%;
    /* L-7 — 은은한 액센트 보더 + 부드러운 트랜지션(hover/select). */
    padding: 14px 15px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
    .tab_btn:hover {
        color: var(--app-primary);
        border-color: var(--app-border-soft);
        background: var(--app-bg-panel-2);
    }
    .tab_btn.active {
        font-weight:bold;
    }
        .tab_btn.active .icon {
            filter: brightness(1.1) drop-shadow(0 0 3px rgba(239, 187, 44, 0.5));
        }
    .tab_btn .arrow {
        margin-left: auto;
        font-size: 10px;
        opacity: 0.5;
    }
    .tab_btn .icon{padding-right:4px}
    .cart_section {
        padding: 10px 0;
    }
/* 카트 헤더 */
.cart_header {
    padding: 15px;
    border-radius: 8px 8px 0 0;
    background: var(--app-bg-panel-2);
}

.slip_title {
    font-size: 14px;
    font-weight: 900;
    color: var(--app-primary);
    margin-bottom: 10px;
    /* Day 45 정정 — 간략히/펼치기 토글 우측 정렬. */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.slip_title .cart_toggle_btn {
    background: transparent;
    border: none;
    color: var(--app-primary);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
}
.slip_title .cart_toggle_btn:hover { color: #ffffff; }

/* cart_list 펼치기 — max-height 해제(담긴 폴더+보너스 전체 한눈에). 초기 간략히=현행 max-height 유지. */
.cart_list.expanded {
    max-height: none;
}

.cart_controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.fold_count{color:#fff}
.badge {
    background: var(--app-primary);
    color: var(--app-bg);
    margin-right: 4px;
}

.clear_all_btn {
    background: none;
    border: none;
    color: #fd4848;
    cursor: pointer;
    font-size: 11px;
}

/* 베팅 아이템 리스트 */
.cart_list {
    border-bottom: none;
    background: rgb(1, 4, 8);
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: rgb(24, 39, 64) transparent;
    min-height: 90px;
    max-height: calc(-709px + 100vh);
    padding: 6px 0 0 6px;
    border-right: 4px solid var(--app-bg-panel-2);
    border-left: 4px solid var(--app-bg-panel-2);
}

.cart_item {
    background: var(--app-bg-panel-2);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--app-primary);
}

    .cart_item.bonus {
        border-left-color: #81d8d0;
        background: #2a2820;
        font-weight: bold;
        color: #fff;
    }

.item_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bet_pick {
    font-weight: bold;
    color: #fff;
}
.cart_odds_wrap {
    display: flex;
    align-items: center;
    gap: 10px; /* 배당률과 X 버튼 사이 간격 */
    margin-left: auto; /* 왼쪽 공간을 다 차지해서 우측으로 밀어냄 */
}
.odds_val {
    color: #81d8d0;
    font-weight: bold;
}

.remove_btn {
    background: #fd4848;
    color: #fff;
    border: none;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    margin-left: 8px;
    cursor: pointer;
}

.item_bottom .market_name {
    font-size: 11px;
    color: #93a196;
    margin-bottom: 4px;
}

.item_bottom .match_name {
    font-size: 11px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 푸터 영역 (계산 및 베팅) */
.cart_footer {
    padding: 15px;
    background: var(--app-bg-panel-2);
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--app-border);
}

/* R2 · 슬립 한도 3열(최소베팅/최대베팅/최대당첨 — 레퍼런스 캡처2 동형·표기 전용). 미니·가상 카트도 동일 클래스 재사용. */
.cart_limits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 10px;
    padding: 10px 0px;
    background: #0f0f0f;
    /* border: 1px solid var(--app-border); */
    border-radius: 6px;
}

    .cart_limits .cl_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

.cart_limits .cl_lb {
    font-size: 11px;
    color: #93a196;
    white-space: nowrap;
}

.cart_limits .cl_val {
    font-size: 10px;
    font-weight: 400;
    color: #e3f4f2;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary_row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: #93a196;
}

    .summary_row.highlight span:last-child {
        color: #fff;
        font-weight: bold;
    }

.total_odds {
    color: #81d8d0 !important;
    font-weight: bold;
    font-size: 16px;
}

/* 입력창 */
.bet_input_wrapper {
    display: flex;
    justify-content: space-between; /* 양 끝으로 배치 */
    align-items: center;
    padding: 10px 0;
    background: transparent; /* 전체 배경은 투명하게 */
    border-top: 1px solid var(--app-bg-panel-2); /* 상단 구분선 (선택사항) */
    margin: 10px 0;
}
.left_area {
    display: flex;
    align-items: center;
    gap: 15px; /* 베팅 글자와 아이콘 사이 간격 */
}

    .left_area label {
        color: #fff;
        font-size: 15px;
        font-weight: bold;
    }

.refresh_btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .refresh_btn svg {
        width: 20px;
        height: 20px;
        fill: #93a196; /* 아이콘 색상 */
        transition: fill 0.2s, transform 0.3s;
    }

    .refresh_btn:hover svg {
        fill: #fff;
        transform: rotate(-45deg); /* 살짝 회전 애니메이션 */
    }

/* 입력창 박스 스타일 */
.input_box {
    background: #191919;
    border: 1px solid #39404c;
    border-radius: 4px;
    padding: 2px 12px;
    width: 60%;
}

.bet_amount_input {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    text-align: right;
    outline: none;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 0;
}
/* 퀵 버튼 그리드 */
.quick_amount_grid {
    display: grid;
    /* 1. 기본 3열 구조로 변경 */
    grid-template-columns: repeat(3, 1fr);
    gap: 6px; /* 캡처본의 여유로운 간격 반영 */
    margin-bottom: 15px;
}

    .quick_amount_grid button {
        background: #2a303d; /* 캡처본의 짙은 네이비/그레이 톤 */
        color: #ffffff;
        border: none;
        padding: 12px 0; /* 세로 높이감 조절 */
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s;
    }

        .quick_amount_grid button:hover {
            background: var(--app-bg-panel-3);
        }

        /* 2. 초기화 버튼 스타일 */
        .quick_amount_grid button.reset {
            color: #ffffff; /* 캡처본은 글자색이 흰색이므로 변경 (취향껏 유지 가능) */
            background: #3f4756; /* 약간 더 밝은 배경색 */
        }
            .quick_amount_grid button.reset:hover {
                background: var(--app-bg-panel-3); /* 호버 시 조금 더 밝게 */
                color: #fd4848; /* 글자색을 붉게 강조하고 싶다면 추가 */
            }
        /* 3. MAX 버튼: 2칸 차지하기 */
        .quick_amount_grid button.max {
            background: var(--app-bg-panel-3); /* 캡처본에서 가장 강조되는 색상 */
            color: #fff;
            font-weight: bold;
            /* 핵심: 2번째 칸부터 4번째 칸 직전까지(즉 2칸) 차지 */
            grid-column: span 2;
        }
            .quick_amount_grid button.max:hover {
                background: #566175; /* 호버 시 피드백 강화 */
            }
        /* 버튼 클릭 시 공통 효과 (실제 눌리는 느낌) */
        .quick_amount_grid button:active {
            transform: scale(0.96);
        }
/* 베팅 제출 버튼 */
.submit_bet_btn {
    width: 100%;
    background: rgb(35, 102, 203);
    color: #ffffff;
    border: none;
    padding: 15px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    /* 중앙 정렬 핵심 코드 */
    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center; /* 세로 중앙 (동일선상) */
    gap: 6px; /* 이미지와 글자 사이 간격 */

    transition: background 0.2s ease;
}
    .submit_bet_btn img {
        width: 18px; /* 24px 원본을 18px로 조절 (글자 크기와 밸런스) */
        height: 18px;
        object-fit: contain; /* 이미지 비율 유지 */
        display: block; /* 불필요한 하단 공백 제거 */
    }

    /* 마우스 호버 효과 (추가) */
    .submit_bet_btn:hover {
        background: rgb(28, 82, 164);
    }

    /* 버튼 클릭 시 눌리는 효과 (추가) */
    .submit_bet_btn:active {
        transform: scale(0.98);
    }

/* 제목 등 공통 스타일 */
.sidebar_title {
    padding: 15px;
    background: var(--app-bg-panel-2);
    font-weight: bold;
    border-bottom: 1px solid var(--app-border);
}
/* 커스텀 스크롤바 (사이드바 내부 스크롤을 깔끔하게) */
.league_sidebar::-webkit-scrollbar,
.cart_sidebar::-webkit-scrollbar {
    width: 4px;
}

.league_sidebar::-webkit-scrollbar-thumb,
.cart_sidebar::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 10px;
}
/* 보너스 바 */
.bonus_container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 정확히 3등분 */
    gap: 8px;
    margin: 10px 0; /* 좌우 마진은 0으로 해야 패널에 꽉 찹니다 */
    width: 100%;
    box-sizing: border-box;
}

/* 지시(수리) · 구 레거시 토큰(--bg-card/--border/--accent/--text-odds)은 s3 에 **정의가 없다**(정본 = --app-*)
   → 배경·보더·글색이 전부 무효로 떨어져 보너스 필이 깨져 보이던 원인. app 토큰으로 교체. */
.bonus_item {
    padding: 10px 5px; /* 높이 조절 */
    border-radius: 4px;
    font-size: 13px;
    /* 내부 텍스트 중앙 정렬 */
    gap: 10px;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

    .bonus_item .tag {
        color: var(--app-primary-light);
    }

    .bonus_item .odds {
        /* 배당 노랑 — .odds_box .odds_val 과 동일 축 */
        font-weight: bold;
    }

/* 경기 카드 스타일 — 지시 · 구 네이비 팔레트(#141d2b/#1c2b1f/#bdddff)를 s3 톤
   (회색·초록·연두·검정 계열)으로 교체. 구조·치수 무접촉 — 색만. */
.match_card {
    overflow: hidden;
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.league_header {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

/* 개별 경기 카드 내부 레이아웃 */
.match_item {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    margin: 10px;
    background-color: #0b0d0b;   /* 구 #080f1c(네이비 흑) → 녹회흑 */
}

.match_meta {
    width: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .match_meta .time {
        font-size: 12px;
        color: var(--app-text-secondary);
    }

/* 1층: 시간 및 상세버튼 (양끝 정렬) */
.match_top_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .match_top_row .time {
        font-size: 12px;
        color: #93a196;
    }

/* 1. 기본 상태 (비활성) */
.detail_btn_wrap {
    /* 어두운 배경 */
    padding: 4px 10px;
    /* 기본 포인트 컬러 (하늘색) */
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease; /* 부드러운 전환 효과 */
}
    /* 마우스 호버 시 (클릭 전 살짝 밝게) */

    /* 2. 활성화 상태 (.active 클래스가 붙었을 때) */
    .detail_btn_wrap.active {
        /* 배경을 하늘색으로 가득 채움 */
        /* 글자색을 어두운색으로 반전 */
        font-weight: bold;
        /* 빛나는 효과 */
    }

        /* 활성화 시 화살표 회전 효과 (선택사항) */
        .detail_btn_wrap.active .arrow {
            transform: rotate(90.5deg); /* 화살표를 아래쪽으로 꺾음 */
            transition: transform 0.2s;
        }

    .detail_btn_wrap .arrow {
        display: inline-block;
        font-style: normal;
        font-size: 10px;
    }

/* 2층: 팀 이름 (가운데 정렬) */
.match_mid_row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}
.match_mid_row .team {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex: 1;
}
.match_mid_row .team.home { text-align: right; }
.match_mid_row .team.away { text-align: left; }
.match_mid_row .vs_text {
    font-size: 14px;
    color: #f44336;
    font-weight: 900;
    font-style: italic;
}

/* 스페셜, 실시간 구조 변경으로 인해 가로 레이아웃 컨테이너 */
.match_horizontal_layout {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    padding: 10px 0;
    /*background: #1e2129;
    border-radius: 4px;*/
    gap: 2px;
    margin-bottom: 5px;
}
/* 경기 시간 박스 스타일 */
.match_time_box {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 130px; /* 너비 고정으로 배당률 라인 정렬 */
    justify-content: center;
}

.date_text, .time_text {
    margin: 0;
    font-size: 14px;
    color: #93a196;
    font-weight: 500;
}


/* 데드라인 박스 */
.match_time_deadline {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 오른쪽 끝으로 밀착 */
    min-width: 100px; /* 문구가 길어졌으므로 최소 너비 확보 */
    padding-left: 10px;
}

.deadline_content {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgb(255 244 244 / 10%);
    padding: 4px 10px;
    border-radius: 4px;
}

.deadline_timer {
    font-size: 14px;
    font-weight: 700;
    color: #2366cb;
}

.deadline_text {
    font-size: 12px;
    color: #93a196; /* "후 마감"은 보조 텍스트로 차분하게 */
    letter-spacing: -0.5px;
}

/* 수직 구분선 (Mui Divider 참고) */
.vertical_divider {
    width: 1px;
    height: 14px;
    background-color: #444b59;
    margin: 0 4px;
}
/* 배당률 섹션을 나머지 공간 전체 사용하게 설정 */
.match_bottom_row {
    flex: 1;
}
/* 3층: 배당 영역 (세로로 3줄) */
.match_bottom_row {
    width: 100%;
}
.team_names {
    width: 200px;
    font-weight: 600;
    color: var(--app-text-primary);
}

/* 배당 전체 영역을 세로로 정렬 */
.odds_section {
    display: flex !important;
    flex-direction: column !important; /* 배당 3줄을 위아래로 */
    gap: 6px;
}

/* 각 배당 그룹 (가로 3칸 그리드) — Day 45 정정: 홈/무·기준점/원정 균등 1fr (자릿수 무관 좌·우 흔들림 차단).
   AF-미세 · 1fr → minmax(0,1fr): grid 1fr의 암묵 min(auto=min-content — 긴 팀명 nowrap)이 행 폭을
   밀어올리던 잔존분 제거(고정 68px/60px Z1 규격은 불변 — 유연 트랙만 하한 0). */
.odds_group {
    display: grid !important;
    /* odds_kind 60px | 홈 | 가운데(무/handi/overunder) | 원정 */
    gap: 4px;
    width: 100%;
}

.odds_group_special {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 60px minmax(0, 1fr) !important; /* 홈 | 기준점 | 원정 */
    gap: 4px;
    width: 100%;

}

/* "승패", "핸디캡" 같은 작은 라벨 */
.market_label {
    font-size: 11px;
    padding-left: 2px;
}
/* 공통 스타일: 두 줄 배치 및 간격 */
.market_info_left, .market_info_right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 왼쪽 전용: 홈팀 정렬 */
.market_info_left {
    align-items: flex-start;
    text-align: left;
}

/* 오른쪽 전용: 원정팀 정렬 */
.market_info_right {
    align-items: flex-end;
    text-align: right;
}
.odds_kind {
    background: #2d353c;
    border: 2px solid #2d353c;
    height: 38px;
    color: #fff;
    align-items: center;
    cursor: pointer;
}
    .odds_kind span {
        font-size: 12px;
        color: #fff;
        font-weight: normal;
    }
.odds_box {
    border: 1px solid var(--app-border);
    height: 38px;
    /* 배당 노란색 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    position: relative;   /* L-5d — 자물쇠 오버레이(.odds_lock_overlay) 앵커 */
}

/* L-5d — 잠금 배당 셀 오버레이 (전 표면 공통: odds_box[크로스/국내/스페셜/live] + odds_item[크로스 우측 상세]).
   셀과 동일 크기 반투명 오버레이 → 뒤 배당값이 흐리게 비침 + 중앙 🔒. 클릭 불가(뒤 버튼 disabled + 오버레이 pointer-events none 로 통과, disabled 가 최종 차단). */
.odds_lock_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* BL-BLUR · 셀 단위 잠금도 동일 글리치 계열 — blur 제거(딜만). */
    background: rgb(20 21 24 / 60%);
    font-size: 15px;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none; /* 클릭은 뒤 버튼(disabled)이 최종 차단 */
    cursor: not-allowed;
}

    .odds_box.center {
        justify-content: center;
        font-size: 11px;
    }

    .odds_box span {
        font-size: 13px;
        font-weight: normal;
    }
    .odds_box .market_type {
        color: #969696;
        display:none;
    }
    .odds_box .odds_val {
        font-size: 0.8rem;
    }
    .odds_box.center.vs:hover{border-color:none}
    /* 데이터가 없는 빈 칸 처리 */
    .odds_box.empty {
        background: transparent;
        border: none;
        pointer-events: none;
    }

/* 우측 상세 패널
   AF2 · 구 width:420px 제거 — .left_panel/.right_detail_panel { flex:1; min-width:0 }(289행)과 충돌해
   렌더 경로에 따라 420px 고정이 활성화되면 4단 합계가 뷰포트를 밀어내던 1순위 원인(가로 스크롤). flex 단일화. */
.right_detail_panel {
    background: var(--app-bg-panel);
    border-radius: 8px;
    position: sticky;
    top: 115px;
    height: calc(100vh - 115px);
    overflow-y: auto;
}

.detail_header {
    background: var(--app-bg-panel-2);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--app-bg);
}

.detail_header .title { font-weight: 700; color: #fff; font-size: 14px; }
.close_btn { background: none; border: none; color: #93a196; font-size: 18px; cursor: pointer; }

/* 경기 정보 카드 영역 */
.detail_match_info {
    padding: 25px 15px;
    /* Day 45 Phase 3 정정 — 배경 빈 처리 (추후 TB_BOARD 동적 배너 영역). */
    background: transparent;
    border-bottom: 2px solid var(--app-bg);
    text-align: center;
}

/* IP-8.1 C-3 — 인플레이 상세 구장 배경(이미지 층 + 다크 그라데이션 층 + 콘텐츠 층).
   [운영자 2026-07-10 — C-3] 이미지 = GetStadiumImage(종목 코드) 매핑(inplay_soccer.jpg 등 7종 + default.jpg 폴백).
   좌우 페이드 마스크(1xbet 동일 요소 참고 규약) — 가장자리 자연 소멸. 그라데이션이 원본 톤과 무관하게
   텍스트 가독을 확보 — 프리매치 Detail_right 무접촉(인플레이 한정). */
.inplay_stadium_wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.inplay_stadium_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    z-index: 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%);
}
.inplay_stadium_shade {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0.72) 55%, rgba(13, 15, 20, 0.92) 100%);
}
.inplay_stadium_content { position: relative; z-index: 1; }
.detail_match_info .league_name { font-size: 12px; color: var(--app-primary); margin-bottom: 10px; }
/* 상단 리그 정보 바 */
.info_top_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.category_tag {
    background: var(--app-primary); /* 종목별로 이 색상만 바꿔주면 됩니다 */
    color: var(--app-bg);
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.league_text {
    font-size: 12px;
    color: #93a196;
    font-weight: bold;
}

.teams_display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* 팀-VS-팀 사이 간격 */
    padding: 10px 0;
}
    .teams_display .team {
        font-size: 15px;
        font-weight: 800;
        color: #fff;
        white-space: nowrap; /* 이름 줄바꿈 방지 */
        text-align: center;
    }
/* 팀 로고와 이름을 묶는 단위 */
.team_unit {
    display: flex;
    flex-direction: column; /* 로고가 위, 이름이 아래로 올 경우 (선택) */
    align-items: center;
    gap: 8px;
    flex: 1; /* 동일한 너비 확보 */
}

/* 팀 로고 사이즈 설정 */
.team_logo {
    width: 100px; /* 원본 캡처본 느낌의 적정 사이즈 */
    height: 100px;
    object-fit: contain; /* 이미지 비율 유지 */
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); /* 로고 입체감 */
}
/* VS 이미지 영역 */
.vs_unit {
    flex-shrink: 0; /* VS 이미지는 크기가 줄어들지 않게 */
}

.vs_img {
    width: 80px; /* VS 이미지 너비 */
    height: auto;
    display: block;
}
/* 모바일 대응: 화면이 아주 좁을 경우 로고와 이름을 가로로 배치 */
@media screen and (max-width: 400px) {
    .team_unit {
        gap: 5px;
    }

    .team_logo {
        width: 35px;
        height: 35px;
    }

    .teams_display .team {
        font-size: 13px;
    }
}
/* 상세 내용 스크롤 영역 */
.detail_content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* 마켓 그룹 박스 */
.market_box {
    margin-bottom: 15px;
    border: 1px solid var(--app-border);
    border-radius: 6px 6px 0 0;
    background: var(--app-bg);
    overflow: hidden;
}

/* 마켓 타이틀 바 — Day 45 정정: 좌측 정렬(icon 바로 옆) / gap 6px. */
.market_title_bar {
    background: #2a2f3a;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    border-left: 3px solid var(--app-primary); /* 원본 특유의 좌측 강조선 */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

/* 배당 그리드 (2열/3열 가변 가능) */
.market_odds_grid.two_cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px; /* 그리드 라인 효과 */
    background: var(--app-border);
}
/* 3열 그리드: 정확히 3등분 */
.market_odds_grid.three_cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* 33.3% 씩 3칸 */
    gap: 1px;
    background: var(--app-border);
}

/* 개별 배당 아이템 버튼 */
.odds_item {
    border: 1px solid var(--app-border);
    padding: 12px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;   /* L-5d — 자물쇠 오버레이(.odds_lock_overlay) 앵커 (크로스 우측 상세 패널) */
}
.odds_item:hover { background: var(--app-bg-panel-2); }

    .odds_item .team_label {
        color: #d9d9d9;
        font-size: 13px;
        font-weight: bold;
        text-align: left;
    }
.odds_item .odds_val { color: #9ff0e8; font-size: 14px; font-weight: 700; }

/* 배당 선택(활성화) 상태 — 지시 · 목록(.odds_box.selected)과 같은 진초록 축으로 통일. */
.odds_item.selected {
    background: #085423 !important;
    outline: 1px solid #0f7a37;
    z-index: 1;
}
.odds_item.selected .team_label { color: #fff; }


/* 탭 바깥 감싸는 박스 (가로 스크롤 담당) */
.sports_tab_wrapper {
    width: 100%;
    overflow-x: auto; /* 가로 스크롤 활성화 */
    overflow-y: hidden;
    background-color: var(--app-bg-panel);
    border-radius: 8px 8px 0 0; /* 상단 라운드 */
    border-bottom: 2px solid var(--app-bg);
    padding: 10px 5px;
    box-sizing: border-box;
}

/* 탭 내부 컨테이너 (버튼들을 일렬로 나열) */
.sports_tab_container {
    display: flex;
    gap: 8px;
    min-width: max-content; /* 자식 요소 너비만큼 늘어남 (스크롤의 핵심) */
    padding-bottom: 5px;
}

/* 개별 종목 버튼 */
.btn_sports_tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* 텍스트를 아래로 */
    width: 65px;
    height: 65px;
    background-color: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-position: center 8px; /* 아이콘 위치 */
    background-repeat: no-repeat;
    background-size: 28px 28px;
}

    /* 마우스 호버 및 선택 시 효과 */
    .btn_sports_tab:hover {
        background-color: var(--app-bg-panel-2);
        border-color: var(--app-primary);
    }

.btn_sports_tab_on {
    border: 1px solid #f90 !important; /* 원본의 오렌지색 포인트 */
    background-color: var(--app-bg-panel-2);
}

/* 경기 수 숫자 (우측 상단 또는 중앙) */
.btn_sports_tab .count {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    color: #9ff0e8;
    font-weight: bold;
}

/* 종목 이름 */
.btn_sports_tab .sport_name {
    font-size: 11px;
    color: #93a196;
    margin-top: 5px;
    font-weight: bold;
}

.btn_sports_tab_on .sport_name {
    color: #fff;
    font-weight: bold;
}

/* --- 아이콘 이미지 경로 설정 --- */
.btn_sports_tab[data-cate=all] {
    background-image: url('/img/icon/all.webp');
}

.btn_sports_tab[data-cate=soccer] {
    background-image: url('/img/icon/icon_soccer.webp');
}

.btn_sports_tab[data-cate=basket] {
    background-image: url('/img/icon/icon_basket.webp');
}

.btn_sports_tab[data-cate=baseball] {
    background-image: url('/img/icon/icon_baseball.webp');
}
.btn_sports_tab[data-cate=volley] {
    background-image: url('/img/icon/icon_volley.webp');
}
.btn_sports_tab[data-cate=hockey] {
    background-image: url('/img/icon/icon_hockey.webp');
}
.btn_sports_tab[data-cate=afootball] {
    background-image: url('/img/icon/icon_afootball.webp');
}
.btn_sports_tab[data-cate=tenis] {
    background-image: url('/img/icon/icon_tenis.webp');
}
.btn_sports_tab[data-cate=mma] {
    background-image: url('/img/icon/icon_mma.webp');
}
.btn_sports_tab[data-cate=handball] {
    background-image: url('/img/icon/icon_handball.webp');
}
/* --- 아이콘 이미지 경로 설정 --- */

/* 커스텀 스크롤바 디자인 (선택 사항) */
.scroll_bold::-webkit-scrollbar {
    height: 4px;
}

.scroll_bold::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 10px;
}

.scroll_bold::-webkit-scrollbar-track {
    background: transparent;
}

/* 컨테이너 및 헤더 */
.bet_history_container {
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-soft);
    border-radius: 4px;
    overflow: hidden;
    padding: 10px;
    width: 100%;
    height: calc(100vh - 115px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.history_header {
    padding: 15px 20px;
    background-color: var(--app-bg-panel-2);
    border-bottom: 1px solid var(--app-border-soft);
    border-radius: 4px 4px 0 0;
}

    .history_header .title {
        font-size: 16px;
        color: #fff;
        margin: 0;
    }

    .history_header .count_text {
        font-size: 12px;
        color: #8b949e;
        margin-left: 8px;
    }

/* 요약 테이블 스타일 */
.history_table {
    width: 100%;
    border-collapse: collapse;
}

    .history_table th {
        background-color: var(--app-bg);
        color: #8b949e;
        font-size: 13px;
        padding: 12px;
        border-bottom: 1px solid var(--app-border-soft);
    }

    .history_table td {
        padding: 15px 10px;
        color: #efefef;
        font-size: 13px;
        text-align: center;
        border-bottom: 1px solid var(--app-bg-panel-2);
    }

/* 요약 행 상태 */
.folder_row.active {
    background-color: var(--app-bg-panel);
}

.win_val.winning {
    color: #00ff00;
    font-weight: bold;
}

.badge {
    padding: 3px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
}

    .badge.win {
        background-color: #2d4d2d;
        color: #00ff00;
    }

    .badge.lose {
        background-color: #4d2d2d;
        color: #ff4d4d;
    }

/* ------------------------------------------------------
   ★ 배팅 상세 내역 (폴더 내부) 스타일
--------------------------------------------------------- */

.detail_row td {
    padding: 0 !important;
    border: none;
}

.bet_detail_box {
    padding: 12px 15px;
    background-color: #0b0d10;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bet_detail_item {
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-soft);
    border-radius: 4px;
    padding: 10px 15px; /* 패딩 최적화 */
}


/* 경기 내용 가로 정렬 */
.item_contents {
    display: flex;
    align-items: center;
    gap: 10px; /* 요소 간 간격 */
}

/* 상단 메타 정보 (리그/마켓) */
.item_meta {
    flex: 0 0 160px; /* 너비 고정하여 정렬 유지 */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
    .item_meta .market {
        font-size: 11px;
        color: #bebebe;
        font-weight: bold;
        text-align: right;
    }
/* 팀 영역 및 스코어 영역 공통 */
/* 팀 슬롯 (홈/원정) */
.team_slot {
    flex: 1; /* 남은 공간 등분 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--app-bg-panel-2);
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 13px;
}

/* 스코어 박스 */
.score_slot {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--app-bg-panel-2);
    border-radius: 3px;
    border: 1px solid transparent;
    padding: 4px 0;
}
.score_val { font-size: 14px; font-weight: bold; color: #fff; }
.vs_txt { font-size: 10px; color: #666; }

/* 지시 · s3 선택 상태 = 진초록 #085423 + **흰 글자**(어두운 배경이라 팀명·배당 전부 백색 통일 —
   배당판(odds_box)·베팅내역/경기결과(team_slot) 공용 축). s2 는 밝은 골드 배경이라 반대로 검정 글자(그쪽 파일). */
.selected { background-color: #085423 !important; color: #fff !important; }
.result_win { border: 1px solid #ffd400 !important; }
.selected .odds { color: #fff; }
.selected .name { color: #fff; }

/* 목록 배당셀 내부 span(팀명 .tname · 배당 .odds_val 등)은 자체 색이 있어 위 .selected 로는 안 덮인다 — 명시 백색. */
.odds_box.selected span,
.odds_box.selected .odds_val { color: #fff; }

/* 팀 이름 및 배당률 무승부*/
.team_slot.mu {
    flex: 0 0 90px;
    justify-content: center;
}
.team_slot .name {
    font-size: 13px;
}

.team_slot .odds {
    color: #ffd400;
    font-weight: bold;
}

/* 선택된 칸은 배당률도 흰색으로 */

/* 상태 표시 */
.status_slot {
    width: 50px;
    text-align: right;
    font-size: 12px;
    font-weight: bold;
}
.status_slot.win { color: #00ff00; }
.status_slot.lose { color: #ff4d4d; }
.status_slot.ing { color: #ffd400; }
.status_slot.before { color: #8b949e; }
.status_slot.cancel { color: #8b949e; }
/* S-3c A-2 · 폴더 판정(서버 folderOutcome) 색 — 적특(spec)·부분적중(partial) 신설 */
.status_slot.spec { color: #ffa94d; }
.status_slot.partial { color: #748ffc; }

/* ------------------------------------------------------
   ★ B-118-U0-4b 베팅내역 실데이터 (베팅 슬립형)
--------------------------------------------------------- */
.history_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.history_tools {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status_filter {
    display: flex;
    gap: 4px;
}
.status_filter button,
.expand_all_btn {
    background: var(--app-bg);
    border: 1px solid var(--app-border-soft);
    color: #8b949e;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.status_filter button.active {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-bg);
}
.expand_all_btn { color: #efefef; }

.history_state {
    padding: 40px 15px;
    text-align: center;
    color: #8b949e;
    font-size: 13px;
}

.bet_card_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}
.bet_card {
    border: 1px solid var(--app-border-soft);
    border-radius: 4px;
    overflow: hidden;
    background: var(--app-bg);
}
.bet_card.active { border-color: var(--app-primary); }

.bet_summary {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.6fr 0.7fr 1.1fr 0.7fr 24px;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    cursor: pointer;
    font-size: 13px;
    color: #efefef;
}
.bet_summary:hover { background: var(--app-bg-panel); }
.bet_summary .bs_date { color: #8b949e; }
.bet_summary .bs_odds { color: #ffd400; font-weight: bold; }
.bet_summary .bs_amount { text-align: right; }
.bet_summary .bs_status { font-weight: bold; text-align: center; }
.bet_summary .bs_status.win { color: #00ff00; }
.bet_summary .bs_status.lose { color: #ff4d4d; }
.bet_summary .bs_status.ing { color: #ffd400; }
.bet_summary .bs_status.cancel,
.bet_summary .bs_status.refund { color: #8b949e; }
.bet_summary .arrow_down { color: #8b949e; font-size: 11px; text-align: center; }

.item_meta .game_status {
    font-size: 11px;
    font-weight: bold;
}
.game_status.gs_result { color: #5bc0de; }
.game_status.gs_ing { color: #ffd400; }
.game_status.gs_before { color: #8b949e; }
.game_status.gs_cancel { color: #ff4d4d; }

.team_slot.base_slot {
    flex: 0 0 90px;
    justify-content: center;
}
.base_slot .base_val { font-size: 13px; font-weight: bold; color: #fff; }

.bonus_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bonus_item .bonus_label { font-size: 12px; color: #5bc0de; font-weight: bold; }
.bonus_item .bonus_odds { font-size: 13px; color: #ffd400; font-weight: bold; }

.bet_foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 15px;
    background: var(--app-bg);
    border-top: 1px solid var(--app-border-soft);
    font-size: 12px;
    color: #8b949e;
}
.bet_foot .bf_win { margin-left: auto; color: #efefef; font-weight: bold; }
/* L5 · foot 상태 색(status_slot 팔레트 미러 — foot 전용 클래스라 grid 배치 규칙 미오염) */
.bet_foot .bf_status { font-weight: bold; }
.bet_foot .bf_status.win { color: #00ff00; }
.bet_foot .bf_status.lose { color: #ff4d4d; }
.bet_foot .bf_status.ing { color: #ffd400; }
.bet_foot .bf_status.spec { color: #ffa94d; }
.bet_foot .bf_status.cancel, .bet_foot .bf_status.before { color: #8b949e; }
/* L3 · 팀명/매치 줄 — 모바일 전용(기본 숨김 · PC = 셀 팀명/메타 그대로) */
.bsd_team_line { display: none; }
/* M2 · 스코어+상태 래퍼 — PC = display:contents(자식이 부모 flex에 직접 참여 → 기존 레이아웃 무회귀) */
.bsd_row2 { display: contents; }

/* P4 · 미선택 셀 팀명/라벨 = 밝은 톤(PC 포함 — 배당 노랑·선택 파랑 배경 기존 규칙 유지) */
.bet_detail_item .team_slot { color: #efefef; }

/* P6 · BetGameCard(가상·미니) — PC도 모바일 L3 구조 정합(카드 세로: 1줄 meta / 2줄 팀명 / 3줄 선택+스코어).
   .bet_detail_box.bgc_card 특이성 = .betlist_new .item_meta(flex-basis 232px — column 부모에선 높이 축 오염) 우선 차단. */
.bet_detail_box.bgc_card .bet_detail_item { flex-direction: column; align-items: stretch; gap: 5px; }
.bet_detail_box.bgc_card .item_meta { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.bet_detail_box.bgc_card .meta_line { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.bet_detail_box.bgc_card .meta_line .market { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; text-align: left; }
.bet_detail_box.bgc_card .meta_line .market .game_time { margin-left: auto; padding-left: 6px; flex: none; }
.bet_detail_box.bgc_card .bsd_team_line { display: block; font-size: 11px; color: #c7d1e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px 2px; }
/* P1 · 카드 스코어 = 우측 끝(모바일은 bsd_row2 grid row2가 담당 — PC flex에선 margin auto) */
.bet_detail_box.bgc_card .item_contents .score_slot { margin-left: auto; }
/* L2 · 배팅내역 탭 활성 = 목업 룩(노랑 밑줄 — bl-tabs 한정 · 파트너 tab-item 원본 무접촉) */
.bl-tabs .tab-item.active { color: #ffd400; }
.bl-tabs .tab-item.active::after { background-color: #ffd400; }

.history_pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
}
.history_pager button {
    background: var(--app-bg);
    border: 1px solid var(--app-border-soft);
    color: #efefef;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
}
.history_pager button:disabled { opacity: 0.4; cursor: default; }
.history_pager .pager_info { font-size: 12px; color: #8b949e; }

/* U0-4c — old 테이블 구조 (마스터 행 + 클릭 펼침) */
.betlist_table .folder_row { cursor: pointer; }
.betlist_table .folder_row:hover { background-color: var(--app-bg-panel); }
.betlist_table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.betlist_table .folder .arrow_down { color: #8b949e; font-size: 11px; margin-left: 4px; }

/* U0-4c — 펼침 상세: item_meta(좌측) + item_contents(우측 슬립) 가로 배치 */
.bet_detail_item { display: flex; align-items: center; gap: 12px; }
.bet_detail_item > .item_contents { flex: 1 1 auto; min-width: 0; }

/* item_meta 좌측 박스 — 종목(명+이미지) / 리그(명+이미지) / [마켓명] (세로 스택) */
.item_meta .sport {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #efefef;
    font-weight: bold;
    min-width: 0;
}
.item_meta .sport .meta_sport_ico { width: 16px; height: 16px; object-fit: contain; flex: none; }
.item_meta .league {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #8b949e;
    white-space: normal;
    min-width: 0;
}
.item_meta .league .meta_league_ico { width: 16px; height: 16px; object-fit: contain; border-radius: 2px; flex: none; }
.item_meta .meta_txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* U0-4d — 1줄(종목 / 리그) + 2줄([구분명]). game_status는 우측 status_slot 중복이라 제거. */
.item_meta .meta_line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.item_meta .meta_sep { color: #5a6470; flex: none; }

/* U0-4d — 신규 betlist(.betlist_new)에만: 메타 폭 확대 + 양쪽 박스 높이 맞춤(stretch). betlist_old 시안 무영향. */
/* H3 · 210→232 — 최장 마켓명([1플레이어 오버언더 - 1세트]) + HH:mm 동시 표시(item_contents 소폭 축소). */
.betlist_new .item_meta { flex-basis: 232px; justify-content: center; }
.betlist_new .bet_detail_item { align-items: stretch; }

/* H3 · 폴더 경기시간(HH:mm) — 마켓명 라인 우측 병기(연도·날짜 생략). */
.item_meta .market .game_time { margin-left: 6px; color: #8b949e; font-weight: normal; }

/* H4 — 배팅내역 펼침 슬립 모바일 압축(<1024 · Betlist IsMobile 분기 정합). 배팅내역 전용 클래스 한정 — 공용 스타일 무접촉. */
@media screen and (max-width: 1023.98px) {
    /* 메타(아이콘+리그+[마켓]+시간) 1줄 / 슬립 1줄 세로 적층 */
    .bet_detail_item { flex-direction: column; align-items: stretch; gap: 5px; padding: 8px 10px; }
    .betlist_new .item_meta { flex-basis: auto; }
    .item_meta { flex: none; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
    /* 종목명 텍스트 제거 — 아이콘만. M3 · 아이콘 없는 카드(미니 bgc_top_txt) = 종목명 유지. */
    .item_meta .sport .meta_txt { display: none; }
    .item_meta .sport .meta_txt.bgc_top_txt { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .item_meta .meta_line { flex: none; flex-wrap: nowrap; min-width: 0; }
    /* I1-4 · 시간 = 행 우측 끝(margin-left:auto) / 마켓 라벨만 말줄임 */
    .item_meta .market { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; text-align: left; }
    .item_meta .market .market_label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .item_meta .market .game_time { margin-left: auto; padding-left: 6px; flex: none; }
    /* N6 · 배당판 폰트 압축(모바일 한정 — PC :2284 전역 규칙 무접촉). */
    .odds_box span { font-size: 11px; }

    /* J6-1 · 1줄차 = 고정폭 그리드(폴더 수·마켓 무관 세로선 고정) — 좌우 팀 균등(minmax 0 = 말줄임 허용),
       중앙 56px = 2-way 기준점 셀과 3-way 무 배당 셀이 같은 자리·같은 폭 공유. */
    .item_contents {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
        gap: 4px;
        align-items: stretch;
    }
    .team_slot { padding: 4px 6px; font-size: 11px; }
    .team_slot .name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .team_slot.home { grid-column: 1; grid-row: 1; }
    .team_slot.mu, .team_slot.base_slot { grid-column: 2; grid-row: 1; }
    .team_slot.away { grid-column: 3; grid-row: 1; }
    .base_slot .base_val { font-size: 11px; }
    /* J6-2/M2 · 2줄차 = 스코어+상태 우측 밀착 묶음(bsd_row2 flex — 구 개별 grid 배치의 넓은 간격 해소). */
    .bsd_row2 { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; align-items: center; gap: 6px; }
    .score_slot { flex-direction: row; gap: 4px; padding: 2px 4px; background: transparent; border: none; }
    .score_val { font-size: 12px; }
    .status_slot { width: auto; font-size: 11px; }
    /* K4 · 다중 선택지 픽 1줄(BetGameCard) — 1줄차 전폭(grid 3열 관통). */
    .bgc_single { grid-column: 1 / -1; grid-row: 1; }
    .bgc_single .team_slot { max-width: none; }
    /* L3 · 팀명/매치 줄 표시(ellipsis) + BetGameCard meta 안 중복(MetaSub) 숨김 */
    .bsd_team_line { display: block; font-size: 11px; color: #c7d1e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px 2px; }
    .item_meta .bgc_metasub_pc { display: none; }
    /* L4 · 미선택 셀 팀명/라벨 = 밝은 톤(배당 노랑·선택 셀 파랑 배경은 기존 규칙 유지) */
    .bet_detail_item .team_slot { color: #efefef; }
    /* L5 · bet_foot = 2열 3행 grid(유형|날짜 / 베팅금|배당률 / 예상적중금|상태) — 우측 열 우측 정렬 */
    .bet_foot.bf_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
    .bet_foot.bf_grid .bf_item:nth-child(even) { text-align: right; }
    .bet_foot.bf_grid .bf_win { margin-left: 0; }
}

/* U0-4e — 오버언더 방향 화살표 gif (betlist 슬롯 + cross 배당셀 공용 OuArrow).
   ⚠️ 배당 변동 플래시(.flash_arrow / odds_up·odds_down)와는 별개. */
.ou_arr { width: 14px; height: 14px; vertical-align: middle; margin: 0 2px; }

/* U3 — betlist 모바일(전폭 테이블). 사이드바는 IsMobile 조건으로 미렌더 → 가운데 flex:1 전폭. */
/* I1-2 · 전 셀 nowrap(미적중/진행중 1줄) + 폰트·패딩 축소 — ~380px 가로 잘림 없이 수습. */
.history_table.mobile th,
.history_table.mobile td { padding: 8px 3px; font-size: 11px; white-space: nowrap; }
/* I1-2 · 배팅시간 2단(날짜/시간 — CS d_date·d_time 관용구 동형) */
.history_table.mobile td.date .d_date,
.history_table.mobile td.date .d_time { display: block; line-height: 1.3; }
.history_table.mobile td.date .d_time { color: #8b949e; font-size: 10px; }
.history_table.mobile .act .mbet_btn { padding: 2px 6px; font-size: 11px; }
.history_table.mobile .gtype { font-weight: bold; color: #efefef; }
.history_table.mobile .bonus_odds_cell { color: #5bc0de; }
/* I2 · PC 요약행 배당 셀 — 보너스배당 값 병기(구 "*" 대체 · 모바일 bonus_odds_cell 색 관용구) */
.betlist_table .odds .bonus_inline { margin-left: 6px; color: #5bc0de; font-weight: bold; font-size: 11px; }
/* 취소/삭제 = 자리만 + 비활성(회색·무동작). 실기능은 별도 슬라이스. */
.mbet_btn {
    background: #2a2f38;
    border: 1px solid #3a4048;
    color: #6b7280;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: not-allowed;
}

/* 결과 태그 (badge 미사용 — 자체 스타일) */
.res_tag { font-size: 12px; font-weight: bold; }
.res_tag.win { color: #00ff00; }
.res_tag.lose { color: #ff4d4d; }
.res_tag.ing { color: #ffd400; }
.res_tag.cancel,
.res_tag.refund { color: #8b949e; }

/* 하단 고정 바 */
.mobile_cart_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 46px;
    background: #1c2b1f;
    display: flex;
    align-items: center;
    touch-action: none; /* M5 · iOS가 세로 제스처를 스크롤로 가로채(pointercancel) 스와이프가 죽는 것 방지 — 바(핸들) 한정·시트 내부 스크롤 무접촉 */
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    color: #fff;
    /* font-weight: bold; */
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 카트 오버레이 (슬라이드 업) */
.mobile_cart_overlay {
    position: fixed;
    bottom: -100%; /* 숨겨져 있다가 */
    left: 0;
    right: 0;
    background: #1a1a1a;
    z-index: 1001;
    transition: bottom 0.3s ease-out;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    flex-direction: column;
}

    .mobile_cart_overlay.open {
        bottom: 0; /* 활성화 시 위로 올라옴 */
    }
    /* N2 · 내용맞춤 높이 — 1폴더면 빈 영역 없이 수축, 초과분만 내부 스크롤(구 min-height 180px 폐기). */
    .mobile_cart_overlay .cart_section .cart_list {
        min-height: 0;
        height: auto;
        overflow-y: auto;
        max-height: calc(-600px + 110vh);
    }
    /* N3-보강 · 구 cart_collapsed 숨김 규칙 폐기 — 시트 모드(SheetMode)가 내부 접힘 자체를 비활성(상태 2개 보장·부분 높이 금지). */
    .cart_backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.7);
        z-index: 999;
    }

/* 오버레이 내부 컨텐츠 스크롤 */
.overlay_content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* ===== Day 45 Phase 3 신설 (크로스 백엔드 연동 / 분양 원본 다크 테마 정합) ===== */

/* 로딩 / 빈 결과 / 에러 메시지 */
.game_state_msg {
    padding: 40px 15px;
    text-align: center;
    color: #d9d9d9;
    font-size: 14px;
    background: var(--app-bg-panel);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    margin: 10px;
}
.game_state_msg.game_state_error { color: #ff6b6b; }

/* 다폴더 보너스 안내 문구 */
.bonus_notice {
    color: #9ff0e8;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 2px 8px;
}

/* 상세 패널 마켓 소제목 (GUBUN) */
.market_sub_label {
    color: #969696;
    font-size: 12px;
    padding: 6px 4px 2px;
}

/* 페이지네이션 (이전 / 번호 / 다음) */
.game_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    flex-wrap: wrap;
}
.game_pagination .page_btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, border-color 0.2s;
}
.game_pagination .page_btn:hover:not(:disabled) { border-color: var(--app-primary); }
.game_pagination .page_btn.active {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-bg);
    font-weight: bold;
}
.game_pagination .page_btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ===== Day 45 Phase 3 정정 1라운드 ===== */

/* 종목 탭 아이콘 (동적 종목 / 분양 원본 sidebar icon_sp 패턴) */
.btn_sports_tab .sport_tab_icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-bottom: 2px;
}

/* 즐겨찾기 탭 별표 아이콘 — [IP-8 B-8] 운영자 지정 스타일 교체 */
.btn_sports_tab .favorite_icon {
    font-size: 26px;
    line-height: 1;
    color: #9ff0e8;
    font-style: normal;
    margin-bottom: 1px;
}

/* 상세 패널 마켓 제목 측 GUBUN 묶음 표시 */
.market_title_bar .market_gubun {
    color: #969696;
    font-size: 12px;
    font-weight: normal;
    margin-left: 4px;
}

/* 핸디캡 / 오버언더 = 홈 / 기준점(중앙 단독) / 원정 3컬럼 — Day 45 정정: 기준점 너비 고정 56px(좌우 배당 균등). */
.market_odds_grid.three_cols_with_base {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    /*gap: 4px;*/
    align-items: stretch;
}
/* market_base — Day 45 정정: CROSS 기준점 셀(.odds_box.center) 동일 background/color + 클릭·hover X. */
.market_odds_grid.three_cols_with_base .market_base {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--app-bg-panel-2);            /* CROSS .odds_box.center 동일 */
    border: 1px solid var(--app-border);
    /*border-radius: 4px;*/
    pointer-events: none;            /* 클릭 X */
    cursor: default;
}
.market_odds_grid.three_cols_with_base .market_base .base_value {
    color: #ffffff;                  /* CROSS .odds_box.center color #fff 동일 */
    font-weight: bold;
    font-size: 13px;
}

/* ===== Day 45 Phase 4A (카트 잠정 베팅슬립 + 변동 CONFIRM 모달) ===== */

/* 잠정 베팅슬립 (Phase 4B = Cart.razor 동적 연동으로 대체) */
.phase4a_betslip {
    margin-top: 10px;
    background: var(--app-bg-panel);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 12px;
}
.phase4a_betslip .bs_summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d9d9d9;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
}
.phase4a_betslip .bs_rate { color: #9ff0e8; }
.phase4a_betslip .bs_expired {
    color: #ff6b6b;
    font-size: 12px;
    margin-bottom: 8px;
}
.phase4a_betslip .bs_items { list-style: none; padding: 0; margin: 0 0 10px; }
.phase4a_betslip .bs_item {
    border-bottom: 1px solid #2a2e38;
    padding: 7px 0;
}
.phase4a_betslip .bs_item.bonus { border-bottom: none; }
.phase4a_betslip .bs_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.phase4a_betslip .bs_match { color: #d9d9d9; font-size: 12px; }
.phase4a_betslip .bs_pick { color: #b8b8b8; font-size: 12px; margin-top: 2px; }
.phase4a_betslip .bs_pick b { color: #9ff0e8; margin-left: 4px; }
.phase4a_betslip .bs_pick.bonus { color: #9ff0e8; }
.phase4a_betslip .bs_remove {
    background: transparent;
    border: none;
    color: #ff6b6b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.phase4a_betslip .bs_amount input {
    width: 100%;
    box-sizing: border-box;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: #fff;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
}
.phase4a_betslip .bs_msg {
    color: var(--app-primary);
    font-size: 12px;
    margin: 8px 0 0;
}
.phase4a_betslip .bs_actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.phase4a_betslip .bs_clear {
    flex: 0 0 90px;
    background: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    color: #d9d9d9;
    border-radius: 4px;
    padding: 9px 0;
    cursor: pointer;
    font-size: 13px;
}
.phase4a_betslip .bs_submit {
    flex: 1;
    background: var(--app-primary);
    border: 1px solid var(--app-primary);
    color: var(--app-bg);
    border-radius: 4px;
    padding: 9px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}
.phase4a_betslip .bs_submit:disabled { opacity: 0.5; cursor: default; }

/* 배당 변동 CONFIRM 모달 */
.bet_confirm_modal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    /* CART-MODAL(2026-09-30) · 구 1000 = 모바일 카트(1101)·태블릿 드로어 카트(1300) 아래라 카트 열린 채 [배팅하기] 시
       확인 모달 버튼이 카트에 가려 눌리지 않았다 → 카트보다 위(게시판 모달과 같은 2000). */
    z-index: 2000;
}
.bet_confirm_modal {
    width: 92%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--app-bg-panel);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 20px;
    color: #d9d9d9;
}
.bet_confirm_modal h3 { margin: 0 0 12px; color: #fff; font-size: 16px; }
.bet_confirm_modal p { font-size: 13px; margin: 0 0 12px; }
.bet_confirm_modal .changed_list { display: flex; flex-direction: column; gap: 8px; }
.bet_confirm_modal .changed_item {
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 10px;
}
.bet_confirm_modal .match_info { color: #fff; font-size: 13px; font-weight: bold; }
.bet_confirm_modal .market_info { color: #969696; font-size: 12px; margin: 3px 0; }
.bet_confirm_modal .rate_change { font-size: 14px; }
.bet_confirm_modal .old_rate { color: #ff6b6b; text-decoration: line-through; }
.bet_confirm_modal .new_rate { color: #9ff0e8; font-weight: bold; }
.bet_confirm_modal .confirm_question { margin: 14px 0; font-weight: bold; color: #fff; }
.bet_confirm_modal .modal_buttons { display: flex; gap: 8px; }
.bet_confirm_modal .modal_buttons button {
    flex: 1;
    padding: 10px 0;
    border-radius: 4px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-panel-2);
    color: #d9d9d9;
    cursor: pointer;
    font-size: 14px;
}
.bet_confirm_modal .modal_buttons button.primary {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-bg);
    font-weight: bold;
}

/* ===== Day 45 Phase 4B (즐겨찾기 별표 + 동적 카트 보조) ===== */

/* 즐겨찾기 별표 (메인 리스트 / 상세 패널 헤더 공용) — Day 45 정정 사이즈 키움. */
.favorite_btn {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.favorite_btn.active { color: #9ff0e8; }

/* Day 45 정정 — 크로스 경기 카드 상단 줄: favorite_btn 을 detail_btn_wrap 직전 우측 그룹으로 묶음. */
/* HTML 순서(time -> favorite_btn -> detail_btn_wrap) 유지 / margin-left:auto 로 좌측 공간 흡수. */
.match_top_row .favorite_btn { margin-left: auto; }
.match_top_row .detail_btn_wrap { margin-left: 6px; }

/* ===== Day 45 Phase 4E — 배당 변동 시각 표시 (폴링 20초 / 상승 빨강·하락 파랑 / 60초 forwards) ===== */
/* 정정 — 배경 대신 숫자 색상 변경(팀명 span 색상은 보존) + 60초 지속 + 화살표 위치별. */
.odds_box.odds_up   { animation: oddsUpColor   60s ease-out forwards; }
.odds_box.odds_down { animation: oddsDownColor 60s ease-out forwards; }
/* L-2b v2 정정 — 종료 프레임 color:inherit 은 부모(어두운) 색을 상속 → 변동 후 검정 잔류 버그.
   일반 배당색(#9ff0e8)으로 복원하여 강조 종료 시 정상 색으로 되돌린다(3표면 공통). */
@keyframes oddsUpColor {
    0%   { color: #e24b4a; }
    98%  { color: #e24b4a; }
    100% { color: #9ff0e8; }
}
@keyframes oddsDownColor {
    0%   { color: #378add; }
    98%  { color: #378add; }
    100% { color: #9ff0e8; }
}
/* 팀명 span 측 색상 보존 — 변동 색상은 배당 숫자에만 적용. */
.odds_box.odds_up   span,
.odds_box.odds_down span { color: #d9d9d9; }

/* 화살표 — 홈(num_left)= 배당 숫자 왼쪽 / 원정·무(num_right)= 배당 숫자 오른쪽. */
.odds_box .flash_arrow {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}
.odds_box .flash_arrow.num_left  { margin-left: auto;  /*margin-right: 4px;*/ }
.odds_box .flash_arrow.num_right { margin-right: auto;/* margin-left:  4px;*/ }
/* center 셀(무)은 justify-content:center 라 auto 대신 단순 간격만. */
.odds_box.center .flash_arrow.num_right { margin: 0 0 0 4px; }
.odds_box.odds_up   .flash_arrow { color: #e24b4a; animation: none; }
.odds_box.odds_down .flash_arrow { color: #378add; animation: none; }

/* ===== Day 45 정정 — 셀 너비 통일 / 텍스트 cut / 무·기준점 선택·hover 비활성 ===== */
/* 기준점 셀(핸디캡 6 / 오버언더 6.5) 자릿수 차이로 너비 불일치 — 최소 너비 + 좌우 padding 통일. */
.odds_box.center.handi,
.odds_box.center.overunder {
    padding: 0 16px;
    min-width: 48px;
}
/* 무(vs placeholder) 셀: 승패 마켓 = OddsX 없음 — 기준점(center) 동일 색 + 비활성. */
.odds_box.center.vs {
    background: var(--app-bg-panel-2);
}

/* Day 45 정정 — OddsX 있는 무승부 셀(.draw): 홈/원정과 완전히 동일(클릭/selected/hover 정상) + center 정렬만. */
.odds_box.draw {
    justify-content: center;
}
.odds_box.draw .flash_arrow.num_right { margin: 0 0 0 4px; }

/* Detail 측 무승부 셀(.odds_item.draw) — Day 45 정정: CROSS(.odds_box.draw) 와 동일 시각/정렬. */
/* Razor 측 odds_val span 제거 + button 직접 텍스트 구조라 .odds_val override 불필요. */
/* color/font-size = 옛 .odds_val(노란 #9ff0e8 / 14px 700) 직접 button 측 적용. */
.odds_item.draw {
    justify-content: center;
    color: #9ff0e8;
    font-size: 14px;
    font-weight: 700;
}

/* Detail 승패(2배당) 가운데 VS placeholder — CROSS .odds_box.center.vs 동일 시각/비활성. */
.odds_item.vs {
    background: var(--app-bg-panel-2);             /* CROSS 기준점 동일 */
    color: #969696;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    cursor: default;
}
.odds_item.vs:hover,
.odds_item.vs.selected {
    background: var(--app-bg-panel-2);             /* hover/selected 시각 효과 X */
    border-color: var(--app-border);
    color: #969696;
}
/* 무·기준점·핸디 셀: 선택/hover 비활성 (.selected/:hover 효과 X / 클릭 동작 X). */
.odds_box.center.vs,
.odds_box.center.overunder,
.odds_box.center.handi {
    pointer-events: none;
    cursor: default;
}
.odds_box.center.vs:hover,
.odds_box.center.overunder:hover,
.odds_box.center.handi:hover,
.odds_box.center.vs.selected,
.odds_box.center.overunder.selected,
.odds_box.center.handi.selected {
    border-color: var(--app-border);       /* 기본 border 색 강제 유지 */
    background: inherit;
    color: inherit;
}
.odds_box.center.vs:hover { background: var(--app-bg); }
.odds_box.center.overunder:hover,
.odds_box.center.handi:hover { background: var(--app-bg-panel-2); }

/* 팀명 span cut — Day 45 정정: flex 측 min-width:0 + flex:0 1 auto 로 robust ellipsis(배당 숫자 침범 차단). */
.odds_box { gap: 4px; min-width: 0; }
.odds_box span {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* detail 측 team_label cut + odds_val 공간 보존 — Day 45 정정. */
.odds_item { gap: 8px; min-width: 0; }
.odds_item .team_label {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.odds_item .odds_val {
    flex: 0 0 auto;
    text-align: right;
}

/* ===== S3-5 · 크로스 상세 아코디언 + 배당 잘림 해소(셀 규격 고정) ===== */
.market_title_toggle { cursor: pointer; user-select: none; }
.market_title_bar .market_cnt { color: #93a196; font-weight: 600; font-size: 12px; }
.market_title_bar .market_chev { margin-left: auto; color: #93a196; font-size: 11px; }
/* 잘림("26." 등) = 배당 칸이 라벨에 밀리던 것 — 배당 고정폭 확대 + nowrap(라벨 쪽만 ellipsis). */
.odds_item .odds_val { min-width: 48px; white-space: nowrap; }
.odds_item.draw, .odds_item.vs { white-space: nowrap; }

/* ===== L-2b v2 — 국내형(/game/korea)·스페셜(/game/special)·크로스(/game/cross) 리스트 표면 ===== */
/* ④ odds_kind 잘림 — 국내형/스페셜은 .odds_group_special(grid odds_kind 120px) 채택으로 해결(razor 측).
   .odds_group(크로스·60px) 은 짧은 라벨(승패/핸디캡/오버언더 ≤4자)이라 유지하되 안전폭 소폭 확대. */
.odds_group { grid-template-columns: 68px minmax(0, 1fr) 60px minmax(0, 1fr) !important; }   /* AF-미세 · minmax 동기 */
.odds_kind span { white-space: nowrap; }

/* ⑤ match_teams — 상단 팀명 헤더(로고 없음·텍스트만). 검은 배경 위 흰색 가독. */
.match_teams {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.match_teams .team_name { color: #fff; }
.match_teams .vs_txt { color: #93a196; font-weight: 500; margin: 0 2px; }

/* ⑥ odds_box 팀 로고 — 홈=팀명 좌측 / 원정=팀명 우측(team_side 그룹으로 로고+팀명 인접).
   로고 = 팀이미지 > 사이트 공용 기본 로고(원형 배지) 폴백 · onerror 는 이미지 숨김(팀명만). 3표면 공용. */
.odds_box .team_side {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}
.odds_box .team_side.team_side_away { justify-content: flex-end; }
.odds_box .team_side .tname {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.odds_box .team_logo_odds {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    flex: 0 0 auto;
}

/* Part 0 #2 — 핸디캡 H 마커(관리자 배팅내역 abs-handi 정합·홈=팀명 오른쪽/원정=왼쪽·team_side 배치로 위치 결정). */
.odds_box .abs-handi {
    display: inline-block;
    color: #ff4d4f;
    font-weight: 700;
    margin: 0 3px;
    flex: 0 0 auto;
    animation: abs_handi_blink 1s steps(2, start) infinite;
}
@keyframes abs_handi_blink { 50% { opacity: .25; } }

/* L-3 Part A — 라이브(/game/live) 빈 상태(리스트 영역만·레이아웃 유지) + 경기 헤더 없는 배당 직행 행. */
.game_state_msg.live_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
}
.live_empty_icon { font-size: 40px; opacity: .5; }
.live_empty_title { font-size: 15px; font-weight: 700; color: #c7d0dc; }
.live_empty_desc { font-size: 12px; color: #93a196; }
.live_item .match_bottom_row { margin-top: 0; }

/* 카트 bet_pick cut — Day 45 정정: 팀명 길어도 odds_val + close_btn 영역 침범 차단. */
.item_top { gap: 8px; }
.cart_item .bet_pick {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart_odds_wrap { flex: 0 0 auto; }

/* 동적 카트 보조 (분양 원본 cart_section 내부) — Day 45 정정: 빈 카트 시 cart_empty 축소(footer 자리 확보). */
.cart_section .cart_empty {
    padding: 12px 15px;
    text-align: center;
    color: #969696;
    font-size: 12px;
}
/* 빈 카트 시 cart_list 측 min-height 제거 — 분양 원본 (~90px) 잠금이 footer 표시 영역 압박. */
.cart_section.is_empty .cart_list {
    min-height: 0;
    padding: 0 6px;
}
.cart_section .cart_expired {
    color: #ff6b6b;
    font-size: 12px;
    padding: 6px 12px;
}
.cart_section .cart_msg {
    color: var(--app-primary);
    font-size: 12px;
    padding: 6px 12px 0;
}

/* ==========================================================================
   AE · 카트 반응형 브레이크포인트 단일 관장(정본 — 폭 구간 값 변경은 이 블록 1곳)
   W1/W2 : ≥1360px          = PC 카트 도킹(현행 .cart_sidebar sticky). W2 아이콘 레일은 공수 판단 보류(AE4 — 지시서 허용).
   W3    : 1024 ~ 1359.98px = 카트 드로어(fixed 슬라이드) + 우하단 플로팅 토글.
   W4    : <1024px          = 모바일 현행(무접촉) — C# IsMobile(MainLayout width<1024)와 경계값 공유.
   상호 배타: W3 소자 전부 (min-width:1024px) 게이트 ∧ 모바일 카트 바는 IsMobile(<1024)에서만 렌더
             → 어떤 폭에서도 카트 진입점 정확히 1개.
   실측 근거: 좌 사이드바 300px + 카트 300px 고정(flex-shrink:0) → 1360px 미만이면 중앙 2패널이  [CJ-4b ⑤ 재산정]
             각 ~250px 이하로 붕괴 = 도킹 불가 판정. 1024 = 기존 모바일 컷(IsMobile) 그대로 공유.
   드로어 변형은 마커 .ae_drawer(SportsBetSidebar 전용) 한정 — Betlist 자체 aside(마커 없음)는 현행 도킹 유지.
   ========================================================================== */

/* 드로어 전용 소자 — 기본(W1·W2·W4) 숨김. W3 미디어쿼리에서만 표시. */
.cart_drawer_toggle { display: none; }
.cart_drawer_backdrop { display: none; }
.cart_drawer_close { display: none; }

@media (min-width: 1024px) and (max-width: 1359.98px) {
    /* W3 · 도킹 → 드로어 변형(같은 .cart_sidebar 마크업 — 컴포넌트·상태 단일 = 담긴 폴더 보존) */
    .cart_sidebar.ae_drawer {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 280px;
        z-index: 1300;
        margin: 0;
        padding: 40px 8px 8px;   /* 상단 40px = ✕ 버튼 전용 띠 */
        background: #0b111c;
        border-left: 1px solid var(--app-border-soft);
        box-shadow: -8px 0 24px rgba(0, 0, 0, .45);
        transform: translateX(105%);
        transition: transform .28s ease;
    }
    .cart_sidebar.ae_drawer.drawer_open { transform: translateX(0); }

    .cart_drawer_close {
        display: flex;
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 2;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--app-border-soft);
        border-radius: 6px;
        background: #17171a;
        color: #c0c0c0;
        font-size: 14px;
        cursor: pointer;
    }

    .cart_drawer_backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1290;
        background: rgba(0, 0, 0, .55);
    }

    /* AE3 · 플로팅 토글 — 우하단 원형+배지. go-btn(N4 · bottom:90px)과 같은 right 축 세로 스택:
       본 토글 상단 = 16+56 = 72px < go-btn 하단 90px → 18px 여유 무겹침(실측 — N4 오프셋 규칙 충족·추가 오버라이드 불요). */
    .cart_drawer_toggle {
        display: flex;
        position: fixed;
        right: 12px;
        bottom: 16px;
        z-index: 1280;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: #1b4dff;
        color: #fff;
        font-size: 22px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    }
    .cart_drawer_toggle .cart_toggle_badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        border-radius: 11px;
        background: #e53935;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cart_drawer_toggle.pulse { animation: aeCartTogglePulse .6s ease; }
}

@keyframes aeCartTogglePulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   AF · 4단 페이지(크로스·인플레이 — .sports_content_wrap.four_col 마커) 전용 구간 세트(정본 — 값 변경은 여기 1곳)
   원칙(PM): 가로 스크롤 금지 — 안 들어가면 모드 전환. 구간 경계 = "필요 폭 합"에서 파생(창 폭 임의 상수 아님):
     필요폭 산식(다이어트 후): 사이드바 260(레일 시 44) + 목록 가독하한 400(행 고정부 68+60+gap — Z1 규격 보존,
       팀명 ellipsis 여유 포함) + 상세 가독하한 380 + 카트 260 + 간격 50(wrap padding20+gap20+중앙gap10)
     [CJ-4b ⑤ 재산정 — 사이드바·카트 260 → 300 대입. 산식 자체는 무변경]
     F1 풀 4단   = 300+400+380+300+50 = 1430  →  ≥1430px          : 현행 도킹 4단
     F2 레일     =  44+400+380+300+50 = 1174  →  1174~1429.98px   : ① 사이드바 → 아이콘 레일(44px)+플라이아웃
     F3 상세오버 =  44+400+300+40     =  784  →  1024~1173.98px   : ② 상세 도킹 해제 → 우측 슬라이드 오버레이
     ③ 카트 드로어: F3 필요폭 744 < 모바일 컷 1024 → 4단 페이지에선 발동 구간 없음(아래에서 AE W3 해제·카트 도킹 유지)
     W4 <1024px : 모바일 현행(무접촉 — C# IsMobile 경계 공유)
   3단 페이지(국내형·스페셜·실시간 등 — 마커 없음)는 AE 구간(≥1360 도킹/1024~1359.98 카트 드로어) 그대로.
   ========================================================================== */

/* 레일·상세 오버레이 전용 소자 — 기본(F1·W4·3단 페이지) 숨김 */
.side_rail { display: none; }
.side_rail_backdrop { display: none; }
.af_detail_close { display: none; }
.af_detail_backdrop { display: none; }

/* ── F2+F3 공통(1024~1429.98) · 좌측 사이드바 = 아이콘 레일 + 플라이아웃(내용은 원본 사이드바 그대로 슬라이드) ── */
@media (min-width: 1024px) and (max-width: 1429.98px) {
    .four_col .side_rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 44px;
        flex-shrink: 0;
        position: sticky;
        top: 115px;
        height: calc(100vh - 115px);
        padding-top: 10px;
        background: #1d201d;
        border-radius: 8px;
    }
    .four_col .side_rail .rail_btn {
        width: 32px;
        height: 32px;
        border: 1px solid #333946;
        border-radius: 6px;
        background: #252831;
        color: #c0c0c0;
        font-size: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .four_col .side_rail .rail_label {
        writing-mode: vertical-rl;
        color: #93a196;
        font-size: 11px;
        letter-spacing: 2px;
    }
    .four_col .league_sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1260;
        margin: 0;
        background: #141614;
        border-right: 1px solid #333a34;
        box-shadow: 8px 0 24px rgba(0, 0, 0, .45);
        transform: translateX(-105%);
        transition: transform .28s ease;
        padding: 8px;
    }
    .four_col .league_sidebar.rail_open { transform: translateX(0); }
    .four_col .side_rail_backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: rgba(0, 0, 0, .55);
    }
}

/* ── F3(1024~1173.98) · 상세 패널 = 우측 슬라이드 오버레이(내용물 = PC 상세 컴포넌트 그대로) ── */
@media (min-width: 1024px) and (max-width: 1173.98px) {
    .four_col .right_detail_panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 420px;
        max-width: 92vw;
        z-index: 1270;
        margin: 0;
        padding-top: 40px;   /* 상단 40px = ✕ 전용 띠 */
        background: #1d201d;
        border-left: 1px solid #333a34;
        border-radius: 0;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .45);
        transform: translateX(105%);
        transition: transform .28s ease;
    }
    .four_col .right_detail_panel.detail_open { transform: translateX(0); }
    .four_col .af_detail_close {
        display: flex;
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 2;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border: 1px solid #333a34;
        border-radius: 6px;
        background: #17171a;
        color: #c0c0c0;
        font-size: 14px;
        cursor: pointer;
    }
    .four_col .af_detail_backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1265;
        background: rgba(0, 0, 0, .5);
    }
}

/* ── 4단 페이지에서 AE W3 카트 드로어 해제(양보 순서상 카트 도킹이 마지막 — F3까지 도킹 유지·진입점 1개 보장) ── */
@media (min-width: 1024px) and (max-width: 1359.98px) {
    .four_col .cart_sidebar.ae_drawer {
        position: sticky;
        top: 115px;
        height: calc(100vh - 115px);
        width: 300px;   /* CJ-4b ⑤ */
        z-index: auto;
        margin: 0;
        padding: 0;
        background: transparent;
        border-left: none;
        box-shadow: none;
        transform: none;
        transition: none;
    }
    .four_col .cart_drawer_toggle,
    .four_col .cart_drawer_close,
    .four_col .cart_drawer_backdrop { display: none; }
}

/* ===== Day 45 Phase 4D — 카트 외부 알림 영역 (조합 차단 / 폴더·배당 한도 / 한도 미달 등 / 3초 자동 사라짐) ===== */

.main_index_container > .bet_alert {
    position: fixed;
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    min-width: 320px;
    max-width: 90vw;
    background: #1a1d24;
    border: 1px solid #d23838;
    border-left: 4px solid #d23838;
    color: #ffe4e4;
    padding: 12px 18px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    animation: betAlertIn 0.18s ease-out;
}
.main_index_container > .bet_alert .bet_alert_icon {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: #d23838;
    color: #fff;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    line-height: 22px;
}
.main_index_container > .bet_alert .bet_alert_text {
    flex: 1 1 auto;
    word-break: keep-all;
}
@keyframes betAlertIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0);    }
}

/* ===== Day 45 Phase 4D — 배팅 확인 / 완료 모달 (기존 .bet_confirm_modal_overlay·.bet_confirm_modal 재사용) ===== */

.bet_confirm_modal .bet_confirm_rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 14px;
}
.bet_confirm_modal .bc_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #14161b;
    border: 1px solid #333946;
    border-radius: 6px;
    padding: 10px 12px;
    color: #d9d9d9;
    font-size: 13px;
}
.bet_confirm_modal .bc_row.highlight { background: #1a2230; border-color: #2d5a8e; }
.bet_confirm_modal .bc_label { color: #969696; }
.bet_confirm_modal .bc_value { color: #9ff0e8; font-weight: bold; }
.bet_confirm_modal .bc_row.highlight .bc_value { color: #62e2ed; font-size: 14px; }

.bet_confirm_modal .bet_complete_msg {
    color: #d9d9d9;
    line-height: 1.6;
    margin: 14px 0 16px;
}

/* ===================================================================
   IP-2 — 유저 인플레이(/game/inplay) 전용 스타일.
   좌 카드(진행중 배지·총점·진행분) / 우 상세(피리어드 스코어 판) / 상세 배당 변동 flash.
   =================================================================== */

/* 좌 경기 카드 — 인플레이 행: 선택 시 강조 + LIVE 배지. */
.match_item.inplay_item { cursor: pointer; }
.match_item.inplay_item.active { background: #1a2230; }

/* IP-6 B-4 — 경기 발매 잠금(숨김 아님): 카드 전체 반투명 오버레이 + 🔒 (L-5d .odds_lock_overlay 톤 정합).
   오버레이가 카드 클릭 전체 차단(detail_btn 포함) — OnFixtureClick 가드는 2차 방어선. */
.match_item.inplay_item.inplay_locked { position: relative; }
.inplay_lock_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* BL-BLUR(2026-08-30 지시 · CEO 선행) · backdrop blur 제거 — 모바일에서 부분 래스터화로
       뒷 내용이 거울처럼 반전되던 글리치(미니 마감 오버레이·좌측메뉴 이력 동일 계열). 딜만 살짝 진하게. */
    background: rgb(20 21 24 / 68%);
    z-index: 5;
    border-radius: inherit;
    cursor: not-allowed;
}
.inplay_lock_overlay .lock_ico { font-size: 22px; opacity: .92; }
.match_item.inplay_item.inplay_locked .detail_btn_wrap { opacity: .5; }

/* IP-6 B-4 — 우 상세 잠금 안내(열람 중 발매 0 전환 시 배당 영역 교체·해제 시 자동 복귀). */
.inplay_lock_notice { padding: 44px 12px; text-align: center; color: #c7d0dc; }
.inplay_lock_notice .lock_icon { font-size: 34px; margin-bottom: 10px; }
.inplay_lock_notice .lock_title { font-size: 15px; font-weight: 700; color: #e6e6e6; margin-bottom: 4px; }
.inplay_lock_notice .lock_desc { font-size: 12px; color: #969696; }

/* IP-6 B-4 — 카트 잠금 leg 경고 태그(제거 강제 X). */
.cart_locked_tag { margin-top: 3px; font-size: 11px; color: #9ff0e8; }
.match_top_row .live_badge {
    color: #e24b4a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    animation: inplayLivePulse 1.6s ease-in-out infinite;
}
.match_top_row .inplay_progress { color: #62e2ed; }
@keyframes inplayLivePulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* 좌 카드 팀·총점 줄 — 홈 / 총점 / 원정. */
.match_mid_row.inplay_mid_row .team .tname { color: #e6e6e6; font-size: 13px; }
.match_mid_row.inplay_mid_row .team .team_logo_odds {
    width: 18px; height: 18px; object-fit: contain; vertical-align: middle;
}
.match_mid_row.inplay_mid_row .team.home { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.match_mid_row.inplay_mid_row .team.away { display: flex; align-items: center; justify-content: flex-start; gap: 5px; }
.vs_text.inplay_score {
    min-width: 56px;
    text-align: center;
    color: #9ff0e8;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* 우 상세 — LIVE 태그 + 총점/진행. */
.inplay_live_tag { margin-left: auto; color: #e24b4a; font-size: 11px; font-weight: 700; }
.teams_display.inplay_teams_display { align-items: center; }
.inplay_total_score { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.inplay_total_score .score { color: #9ff0e8; font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.inplay_total_score .progress { color: #62e2ed; font-size: 11px; margin-top: 2px; }

/* 우 상세 — 피리어드 스코어 판. */
.inplay_score_board {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 12px;
    color: #c7d0dc;
}
.inplay_score_board th,
.inplay_score_board td {
    border: 1px solid #333946;
    padding: 4px 6px;
    text-align: center;
    white-space: nowrap;
}
.inplay_score_board thead th { background: #1b1e25; color: #969696; font-weight: 600; }
.inplay_score_board td.sb_team,
.inplay_score_board th.sb_team {
    text-align: left;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e6e6e6;
}
.inplay_score_board .sb_now { background: #23324a; color: #62e2ed; font-weight: 700; }
.inplay_score_board .sb_total { background: #1a2230; color: #9ff0e8; font-weight: 700; }

/* 우 상세 배당 변동 flash — .odds_box(리스트) 와 별개로 .odds_item(상세) 에도 적용. */
.odds_item.odds_up   { animation: oddsUpColor   60s ease-out forwards; }
.odds_item.odds_down { animation: oddsDownColor 60s ease-out forwards; }
.odds_item.odds_up   .team_label,
.odds_item.odds_down .team_label { color: #d9d9d9; }
.odds_item .flash_arrow {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    margin-right: 2px;
}
.odds_item.odds_up   .flash_arrow { color: #e24b4a; animation: none; }
.odds_item.odds_down .flash_arrow { color: #378add; animation: none; }

/* IP-2 S3 — 배당변경 수락 팝업. */
.odds_change_modal .oc_desc { color: #c7d0dc; font-size: 12px; margin: 6px 0 12px; line-height: 1.5; }
.odds_change_modal .oc_legs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.odds_change_modal .oc_leg {
    background: #14161b; border: 1px solid #333946; border-radius: 6px; padding: 8px 10px;
}
.odds_change_modal .oc_leg.changed { border-color: #4a3d23; }
.odds_change_modal .oc_leg_match { color: #e6e6e6; font-size: 12px; }
.odds_change_modal .oc_leg_pick { color: #969696; font-size: 11px; margin-top: 1px; }
.odds_change_modal .oc_leg_rate { margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.odds_change_modal .oc_leg_rate .old { color: #93a196; text-decoration: line-through; }
.odds_change_modal .oc_leg_rate .arrow { color: #969696; margin: 0 6px; }
.odds_change_modal .oc_leg_rate .new { color: #9ff0e8; font-weight: 700; }
.odds_change_modal .oc_leg_rate .new.up { color: #e24b4a; }
.odds_change_modal .oc_leg_rate .new.down { color: #378add; }
.odds_change_modal .bc_value .old { color: #93a196; text-decoration: line-through; margin-right: 4px; }

/* IP-2 S4 — 회원 배팅내역: 인플레이 승인상태 배지 + 배팅시점 스코어. */
.approve_tag {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.approve_tag.ap-ok     { background: #16351f; color: #4ade80; border: 1px solid #276a3a; }
.approve_tag.ap-wait   { background: #33290f; color: #f6c453; border: 1px solid #6a5220; }
.approve_tag.ap-cancel { background: #351616; color: #f28b82; border: 1px solid #6a2727; }
.approve_tag.ap-none   { display: none; }
/* 배팅시점 스냅샷 스코어(관리자 슬립 [ ] 포맷 정합). */
.item_meta .bettime_score {
    font-size: 10px;
    color: #62e2ed;
    text-align: right;
    white-space: nowrap;
}
/* IP-10 ③ — 인플레이 상세 "곧 시작" 태그(시작 전 = 배당 자물쇠·시작 시 자동 개방) */
.inplay_soon_tag {
    background: #ffc107;
    color: #14161b;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ==========================================================================
   CEO-3(2026-08-19) · 배당판 색감 = 캡쳐 7(네이비 카드 · 파랑 선택 · 주황↑/파랑↓ · 라이트 텍스트).
   구조·마크업 무접촉 — 색/보더만 재정의(뒤에 와서 이긴다). 표면 공통(odds_box / odds_item / league_header / match_card).
   ========================================================================== */
:root { --ceo-sp-bg: transparent; --ceo-sp-card: #1b1b1b; --ceo-sp-cell: #242424; --ceo-sp-cell2: #1c1c1c; --ceo-sp-line: #34302a; --ceo-sp-text: #e6e6e6; --ceo-sp-sub: #a0a0a0; --ceo-sp-sel: #6f5420; --ceo-sp-sel2: #81d8d0; --ceo-sp-up: #f39c12; --ceo-sp-down: #4aa3ff; }   /* CEO-4 · 네이비 → 다크 그레이 + 골드 선택(원본 캡쳐 톤) */

.sports_content_wrap, .game_view_area { background: var(--ceo-sp-bg); }
.match_card { background: var(--ceo-sp-card); border-color: var(--ceo-sp-line); border-radius: 8px; margin: 12px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.league_header { background: #262626; color: #b2ebe6; border-bottom: 1px solid var(--ceo-sp-line); font-weight: 700; }
.match_top_row .time, .date_text { color: var(--ceo-sp-sub); }
.time_text { color: #fff; }
.match_time_box { background: #2c2c2c; border: 1px solid #3a3a3a; border-radius: 4px; padding: 2px 8px; }
.market_label { color: var(--ceo-sp-sub); }

/* 배당 셀 — 네이비 · 라이트 텍스트 · 배당값 흰색 */
.odds_box { background: var(--ceo-sp-cell); border-color: var(--ceo-sp-line); color: var(--ceo-sp-text); }
.odds_box span { color: var(--ceo-sp-text); }
.odds_box .odds_val { color: #fff; font-weight: 700; }
.odds_box.center { background: var(--ceo-sp-cell2); color: #fff; }
.odds_box:hover { border-color: var(--ceo-sp-sel2); background: #2c2a24; }
.odds_item { background: var(--ceo-sp-cell); border-color: var(--ceo-sp-line); color: var(--ceo-sp-text); }
.odds_item:hover { border-color: var(--ceo-sp-sel2); }

/* 선택 = 파랑(구 진초록 #085423 재정의) */
.selected, .odds_box.selected, .odds_item.selected { background: var(--ceo-sp-sel) !important; border-color: var(--ceo-sp-sel2) !important; color: #fff !important; }
.odds_box.selected span, .odds_box.selected .odds_val, .odds_item.selected .team_label, .selected .odds, .selected .name { color: #fff !important; }

/* 배당 변동 = 주황↑ / 파랑↓ */
.odds_box.odds_up .flash_arrow, .odds_item.odds_up .flash_arrow, .odds_change_modal .oc_leg_rate .new.up { color: var(--ceo-sp-up); }
.odds_box.odds_down .flash_arrow, .odds_item.odds_down .flash_arrow, .odds_change_modal .oc_leg_rate .new.down { color: var(--ceo-sp-down); }

/* +N 추가 베팅옵션 버튼 · 보너스 폴더 바 */
.detail_btn_wrap { background: #2a2a2a; border: 1px solid #3d3d3d; color: #ddd; border-radius: 4px; }
.detail_btn_wrap:hover { background: #3a3a3a; border-color: var(--ceo-sp-sel2); }
.detail_btn_wrap.active { background: var(--ceo-sp-sel) !important; color: #fff !important; box-shadow: none; }
.bonus_container { border: 1px solid #5a4630; border-radius: 6px; }   /* TIFFANY-2(2026-10-14) · 배경 #2a2118 삭제(지시) */
.bonus_container .bonus_title, .bonus_container .title { color: #b2ebe6; }
.bonus_item { background: #242424; border: 1px solid var(--ceo-sp-line); color: var(--ceo-sp-text); }
.bonus_item .odds { color: #fff; }

/* 상단 종목 탭 — 다크 사각 버튼(캡쳐 7 우상단) */
.tab_btn { background: #1f1f1f; border: 1px solid #3a3a3a; color: var(--ceo-sp-text); }
.tab_btn.active { background: #3a3020; border-color: var(--ceo-sp-sel2); color: #fff; }

/* CEO-4 · 카트(우측 BET SLIP) 강조 — 배너 열과 같은 톤이라 묻히던 것: 카드화(골드 라인·진한 헤더·약한 발광) */
.cart_sidebar .cart_section { background: #161616; border: 1px solid #5fbfb6; border-radius: 8px; box-shadow: 0 0 0 1px rgba(95, 191, 182,.25), 0 6px 18px rgba(0,0,0,.45); overflow: hidden; }
.cart_sidebar .cart_header { background: linear-gradient(180deg, #2a2416 0, #1a1a1a); border-bottom: 1px solid #1f3b38; }
.cart_sidebar .slip_title { color: #b2ebe6; }
.cart_sidebar .cart_section.is_empty .cart_empty { color: #bdbdbd; }

/* CEO-4b · 우측 열 적층 수리 — 카트(cart_section)는 내용 높이 전부(flex 축소 금지 · 클리핑 해제) → 그 아래에 배너. 보더 제거(카드 발광만). */
.cart_sidebar > .cart_section, .cart_sidebar .cart_section { flex: 0 0 auto; overflow: visible; border: 0; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.cart_sidebar .right_banner_list { flex: 0 0 auto; margin-top: 10px; }
.cart_sidebar > .rt_user, .rt_user { border: 0; }

/* LEDGER-FIX(2026-08-19) · 머니내역/포인트내역(MemberLedgerPanel .betlist_new) — 컨테이너 고정 높이(100vh-115) + 내부 스크롤이
   페이지 스크롤과 겹쳐 마지막 행·페이징이 잘려 보이던 것 수리: 높이 = 내용(흐름) · 스크롤은 페이지 1개. Betlist(.bet_history_container 단독)는 무접촉. */
.bet_history_container.ledger_panel { height: auto; min-height: 0; overflow: visible; cursor: default; }   /* 스코프 = MemberLedgerPanel 전용 마커(betlist_new 는 Betlist/Result 도 공유) */

/* ══ SP-3(2026-09-07) · 스페셜 3단 블록 + 시간순 단계 헤더 ═══════════════════════════════
   가운데 셀에 고유 이름이 있는 3열 마켓(더블 찬스·하프타임/풀타임·전반/후반·점수 높은 하프)
   = [구분명 전폭] / [이름 3칸] / [배당 3칸] 세로 스택. 이름 칸은 배당 칸과 폭·간격·기본 높이(38px)가 같고
   더 어두운 색(선택 불가 안내). 예/아니오·승무패·라인형은 종전 .odds_group_special 한 줄. cross 상세도 같은 규격. */
.odds_group_special.stack {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}
.odds_kind_full {
    background: #2d353c;
    border: 2px solid #2d353c;
    height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px;
}
.odds_names, .odds_cells {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    min-width: 0;
}
.odds_names span {
    min-height: 38px;
    background: #1b202a;            /* 구분명(#2d353c)·타이틀바보다 어둡게 = 선택 불가 셀 */
    border: 1px solid #333946;
    color: #9aa4b3;
    font-size: 11px; line-height: 1.3; padding: 3px 6px; text-align: center;
    display: flex; align-items: center; justify-content: center;
    white-space: normal; word-break: keep-all; overflow-wrap: anywhere; min-width: 0;
}
.odds_cells .odds_box { justify-content: center; min-width: 0; }
.market_phase { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 11px; color: #8f99a8; }
.market_phase span { color: #9ff0e8; font-size: 12px; font-weight: 700; }
.market_phase::after { content: ""; flex: 1; height: 1px; background: #1f2836; }

/* 우측 상세 패널 — 타이틀바(=구분명) 아래 [이름 3칸] / [배당 3칸]. 배당 행은 3등분 전용(.three_equal — 모바일 1fr 56px 1fr 예외 회피). */
.market_stack { display: grid; gap: 1px; background: #333946; }
.market_names, .market_odds_grid.three_equal {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 1px;
    background: #333946;
}
.market_names span {
    min-height: 38px;
    background: #1e232c;            /* .market_title_bar(#2a2f3a)보다 어둡게 = 선택 불가 셀 */
    color: #9aa4b3;
    font-size: 11px; line-height: 1.3; padding: 3px 6px; text-align: center;
    display: flex; align-items: center; justify-content: center;
    white-space: normal; word-break: keep-all; overflow-wrap: anywhere; min-width: 0;
}
.market_stack .odds_item.center_val { justify-content: center; }
@media (max-width: 1024px) {
    .odds_kind_full { display: flex; }                       /* 모바일 .odds_kind 숨김 규칙과 별개 — 전폭 제목은 유지 */
    .odds_names span, .market_names span { font-size: 10px; padding: 2px 4px; }
}

/* SP-4(2026-09-07) · 스페셜 +N 펼침 영역 — 이 경기에서 파생된 배당임을 감싸서 표시(좌측 강조선 + 살짝 밝은 바탕). */
.odds_more_wrap {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 2px; padding: 8px 8px 8px 10px;
    border-left: 3px solid #62e2ed;
    background: rgba(98, 226, 237, 0.04);
    border-radius: 0 4px 4px 0;
}
.odds_more_wrap .market_phase { margin: 2px 0 2px; }

/* ══ SP-5(2026-09-07 airplane 정본 → 전 미러 통일) · 스페셜 = 경기 정보 카드 + 클릭 펼침 ═══════════════════════
   접힘 = [아이콘·시간 … ☆ +N] / [날짜][홈][VS][원정](배팅판 행 규격·배당 숫자 없음). 배당은 펼쳤을 때만(.odds_more_wrap). */
.match_top_row_info { align-items: center; }
.match_top_row_info .time { white-space: nowrap; }
.match_info_spacer { flex: 1 1 auto; }

/* 지시 · 다크 단일 스킨 — 단계 헤더 글자 노랑 유지 · 펼침 영역 = 남색 반투명, 좌측 강조선 없음(airplane 정본과 동일 형태). */
.market_phase span { color: #9ff0e8; }
.odds_more_wrap { background: rgb(30 46 93 / 45%); border-left: 0; border-radius: 4px; padding: 8px; }
.market_phase::after { background: rgba(255,255,255,.12); }

/* 지시 · 모바일에서도 구분명(odds_kind) 표시 — mobile.css 의 .odds_kind{display:none} 을 스페셜 행에서만 되살려
   [구분명 전폭] / [홈][가운데][원정] 2줄로(그리드 첫 행 전체 span). 3단 스택 행은 .odds_kind_full 이 이미 전폭. */
@media (max-width: 1024px) {
    .odds_section .odds_group_special .odds_kind {
        display: flex !important;
        grid-column: 1 / -1;
        height: 26px; justify-content: center;
        border-width: 1px;
    }
    .odds_section .odds_group_special .odds_kind span { font-size: 11.5px; }
}

/* SP-5b(지시) · 경기 정보 줄 = 배팅판 행 규격 재사용(.odds_group_special) — 배당 숫자 없이 [날짜][홈][VS][원정]. 전체 클릭 = 펼침. */
.odds_group_special.info_row { cursor: pointer; margin-top: 4px; }
.odds_group_special.info_row .odds_box { cursor: pointer; }
.odds_group_special.info_row .odds_box:last-child { justify-content: flex-end; }
.odds_group_special.info_row .odds_box .tname { font-weight: 700; }
.odds_group_special.info_row:hover .odds_box { border-color: var(--app-primary); }

/* ==========================================================================
   SCROLL-LOAD(2026-09-29) · 스포츠 목록 무한 스크롤 하단(ScrollLoadFooter) + 150경기 블록 페이지(BlockPager = .game_pagination 재사용)
   자동 로드 중 표시 · 「더 보기」/「다시 시도」 버튼 · 끝 표시. 색은 사이트 토큰(--app-*)만 — 사이트마다 톤 자동 추종.
   ========================================================================== */
.scroll_list_top { scroll-margin-top: 140px; }   /* 페이지 이동 후 맨 위 — sticky 헤더에 가리지 않게 */
.scroll_load { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; }
.scroll_load:empty { padding: 0; }
.scroll_load_btn {
    width: 100%; max-width: 360px; height: 40px; padding: 0 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--app-bg-panel); border: 1px solid var(--app-primary); border-radius: 6px;
    color: var(--app-primary); font-size: 13px; cursor: pointer;
}
.scroll_load_btn:hover { background: var(--app-bg); }
.scroll_load_btn.is_loading { border-color: var(--app-border); color: var(--app-text-muted); cursor: default; }
.scroll_load_spin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--app-border); border-top-color: var(--app-primary);
    animation: scrollLoadSpin 1s linear infinite;
}
@keyframes scrollLoadSpin { to { transform: rotate(360deg); } }
.scroll_load_err { font-size: 12px; color: #e07a7a; }
.scroll_load_end { font-size: 12px; color: var(--app-text-muted); padding: 4px 0; }
.scroll_list_top + .game_pagination { margin: 0 0 12px; }   /* 2페이지부터 맨 위 페이지 버튼 */

/* DC-VIEW(2026-09-29) · 배팅내역 슬립 더블 찬스 — 칸 = 선택지 이름(길다 → 줄바꿈) · 적중 2칸 안내 */
.team_slot.dc .name { white-space: normal; line-height: 1.25; }
.team_slot.mu.dc { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bet_detail_item .dc_note { margin-left: 6px; color: #3fb950; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* AXIS-BET · 배팅내역 축배팅 표기(중복배팅·보험·회수) */
.axis-tag { display: inline-block; font-size: 11px; line-height: 16px; color: #e8590c; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; vertical-align: middle; }

/* IPN(2026-10-18) — 인플레이 전역 안내 모달(InplayNoticeWatcher · 배당변경 확인/취소 환불/승인 확정).
   모달 자체는 스크롤 없음 — 폴더 목록만 안에서 스크롤, 제목·총배당·버튼 고정(다폴더). */
/* 사이트 팝업(PopupHost 1500~1800) 위 · 공용 알림(9999)·로그인(9998) 아래 — 홈 팝업에 가려지던 실측(10-18) 수리 */
.bet_confirm_modal_overlay.notice_overlay { z-index: 2000; }
.bet_confirm_modal.notice_modal { display: flex; flex-direction: column; overflow: hidden; max-height: 86vh; padding: 0; z-index: 1001; }
.notice_modal .notice_head { padding: 18px 20px 10px; }
.notice_modal .notice_head h3 { margin: 0 0 6px; }
.notice_modal .notice_desc { color: #c7d0dc; font-size: 12px; line-height: 1.6; margin: 0; }
.notice_modal .notice_warn { color: #ffca28; font-size: 12px; margin: 6px 0 0; }
.notice_modal .notice_legs { flex: 1 1 auto; min-height: 0; max-height: 42vh; overflow-y: auto; margin: 0 20px;
    display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.notice_modal .notice_leg { background: #14161b; border: 1px solid #333946; border-radius: 6px; padding: 8px 10px; flex-shrink: 0; }
.notice_modal .notice_leg.changed { border-color: #6b5422; background: #1d1a12; }
.notice_modal .notice_leg_match { color: #969696; font-size: 11px; }
.notice_modal .notice_leg_row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; }
.notice_modal .notice_leg_pick { color: #e6e6e6; font-size: 13px; }
.notice_modal .notice_leg_rate { color: #e6e6e6; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice_modal .notice_leg_rate .old,
.notice_modal .notice_value .old { color: #93a196; text-decoration: line-through; margin-right: 4px; }
.notice_modal .notice_leg_rate .arrow { color: #969696; margin-right: 4px; }
.notice_modal .notice_leg_rate .new { color: #ffca28; font-weight: 700; }
.notice_modal .notice_leg_rate .new.up { color: #e24b4a; }
.notice_modal .notice_leg_rate .new.down { color: #378add; }
.notice_modal .notice_foot { padding: 12px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.notice_modal .notice_row { display: flex; justify-content: space-between; font-size: 13px; }
.notice_modal .notice_label { color: #969696; }
.notice_modal .notice_value { color: #ffca28; font-weight: bold; font-variant-numeric: tabular-nums; }
.notice_modal .notice_value.refund { color: #5dcaa5; }
.notice_modal .notice_timer { color: #ffca28; font-size: 12px; margin-top: 4px; }
.notice_modal .notice_note { color: #c7d0dc; font-size: 12px; line-height: 1.5; margin-top: 4px; }
.notice_modal .notice_note b { color: #ffca28; }
.notice_modal .notice_reason { color: #ffca28; font-size: 12px; font-weight: 700; margin: 6px 0 0; }
.notice_modal .notice_leg_tag { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 4px;
    background: #3a2f16; color: #ffca28; font-size: 11px; }
.notice_modal .modal_buttons { margin-top: 6px; }

/* AUTO-TOAST(2026-10-19) · 인플레이 자동 확정 작은 알림 — 화면 위 가운데·버튼 없음·4초 뒤 사라짐(눌러도 닫힘) · 모달(2000) 위 */
.ipn_toast_stack { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    z-index: 2100; display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.ipn_toast { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: #14161b; border: 1px solid #2f6b4f; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    color: #e6e6e6; font-size: 13px; line-height: 1.4; animation: ipn_toast_in .2s ease-out; }
.ipn_toast_icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #3fb950; color: #0d1117;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ipn_toast_text { font-variant-numeric: tabular-nums; }
@keyframes ipn_toast_in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }