/* 전체 배경 설정 */
body {
    /* AT · 전역 톤다운 — 최외곽은 콘텐츠 영역(--app-bg)보다 한 단계 더 어둡게(시안 정본 #050507). */
    background-color: var(--app-bg-root);
    margin: 0;
    padding: 0;
    /*height: 100%;*/ /* 전체 높이 고정 */
    /*overflow: hidden;*/ /* 스크롤 차단 */
    /*position: fixed;*/ /* 모바일 브라우저 튕김 방지 */
    /*width: 100%;*/
}

a {
    text-decoration: none !important; /* 밑줄 강제 제거 */
    color: inherit;                  /* 부모의 글자색을 그대로 상속 */
}
.secondary_header {
    background-color: rgb(8, 15, 28); 
    height: 60px;
    display: flex;
    justify-content: center;
    position: relative;
    /* 서브메뉴가 헤더 위로 올라오지 않게 설정 */
}


/* 1. 부모 컨테이너 (너비 100% 확보) */
.main_index_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    /* AT-1 Option C · 구 `padding-top:100px` 제거 — 고정 헤더가 덮던 자리를 비우는 보정값이었으나
       헤더가 sticky 로 전환돼 flow 공간을 직접 차지하므로 중복 여백이 된다. */
}

/* 2. 메인 배너 — AP1 보강②: 고정 460px 폐기 → 규격 정본은 app-home.css aspect-ratio(PC 1920/461).
   래퍼는 폭·배경만(높이 = 자식 비율 컨테이너 소관 — 모바일 첫 이미지 비율 축과 양립). */
.main_banner_wrap {
    width: 100%;
    overflow: hidden;
    /* 배율 조정 시 발생할 수 있는 미세 여백 방지 */
    /*background-color: #0b1425;*/
    padding: 10px 20px 0 20px;
}

.banner_container {
    width: 100%;
    height: 100%;
    /* 배율 조정 시 중앙 정렬 유지 */
    display: flex;
    justify-content: center;
}

.banner_container img {
    /* 고정 px 대신 100%를 사용하여 브라우저가 계산한 너비를 그대로 따르게 함 */
    width: 100%;
    min-width: 100%;
    height: 100%;   /* AP1 보강② — 구 460px 고정 폐기(컨테이너 비율 정본) */
    display: block;
    /* 배율 조정 시 이미지가 찌그러지지 않게 꽉 채움 */
    object-fit: cover;
    object-position: center;
}

/* 3. 콘텐츠 영역 (여기가 핵심!) */
.main_content_wrap.w-1248px {
    /* 검증 C 이력 · 구 `width:1248px` 고정이 1249~1517 띠에서 가로 오버플로를 냈고 max-width 로 전환했으나,
       정정 B 로 상한 자체를 해제해 근본 해소(컨테이너 폭을 따라감).
       ⚠️ 4단 페이지(cross·inplay)는 이 클래스를 쓰지 않으므로(실측 0건) 폭 산식 560 전제에 영향 없음. */
    /* AT 정정 B · 상한 해제 — 사이드바가 260px 를 상시 점유하므로 1248 고정 시 1920 에서 좌우 240px 씩 비었다.
       회원 페이지는 셸 컬럼을 꽉 채운다. (파트너는 `.main-content w-1248px` 조합이라 partner.css 상한 유지) */
    max-width: none;
    width: 100%;
    margin: 0 auto;
    /* 정정 A · 가로 패딩 20px — 셸 패딩 제거분을 여기서 받는다(1249~1517 띠에서 사이드바·화면끝 붙음 방지).
       ≤1248 미디어의 `padding:20px` 와 좌우값이 같아 경계에서 여백이 튀지 않는다.
       box-sizing:border-box 이므로 좌우 40px 이 컨테이너 폭 안쪽에서 소모된다. */
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 */
}

.sports_content_wrap {
    display: flex;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    /*background-color: #14161c;*/
}

/* ==========================================================================
   AT-1 · 신 골격 셸 — 좌측 사이드바를 레이아웃이 소유(페이지는 카트 필요 여부만 선언).
   ⚠️ 폭 산식 보존(조항 F): 셸은 padding·gap **0**. 간격은 사이드바 margin-left 10px 로만 만든다.
      고정 소모 = 10(margin) + 300(sidebar) + 20(wrap padding) + 10(wrap gap) + 300(cart) = 640  [CJ-4b ⑤]
      → center = VW − 560 으로 이동 전과 **정확히 동일**(1920/1600/1440/1350 = 675/515/435/400).
      셸에 padding·gap 을 주면 1440 여유 35px 가 즉시 잠식되므로 값 변경 금지.
   ⚠️ position:sticky 생존(보강): 셸·본문 래퍼에 overflow:hidden / transform 을 **넣지 않는다**.
      둘 중 하나라도 생기면 .league_sidebar 의 sticky 가 죽는다.
   ⚠️ sports.css:2644 AF 배너(F1/F2/F3 경계·레일 플라이아웃)는 무접촉 — 여기서 재정의하지 않는다.
   ========================================================================== */
.page_shell {
    /* AT · 콘텐츠 영역 배경(최외곽 body 보다 한 단계 밝음 — 시안 정본). */
    background: var(--app-bg);
    display: flex;
    padding: 0;
    gap: 0;
    align-items: flex-start;   /* stretch 로 인한 사이드바 높이 강제 방지(자체 height 유지) */
}

/* ==========================================================================
   CJ §A · 헤더 승격 — 3열의 sticky 기준선 토큰.
   AT-1 에서는 `.pc_header` 가 셸 **안**(우측 컬럼)이라 좌측 사이드바가 top:0 부터 시작해도 겹치지 않았다.
   CJ 에서 헤더가 셸 **밖 전폭 밴드**가 되면서, 셸의 sticky 컬럼들이 top:0 이면 헤더 아래로 파고든다
   (헤더 z-index:1000 — 컬럼 상단이 가려진다). 그래서 기준선을 헤더 실높이만큼 내린다.
   ⚠️ 행 높이가 전부 **고정값**이라 상수 파생으로 충분하다(측정 JS·ResizeObserver 0).
      [CJ-3 §J-2 재구성 반영] 헤더는 **로그인 여부와 무관하게 2행 고정**이 됐다(구 Row2 폐기):
        hdr_row0(52) + hdr_gnb(48) = **100** — 비로그인·로그인 동일.
   ⚠️ 두 값(52/48) 중 하나라도 고치면 이 합계도 함께 고칠 것 — 어긋나면 3열 상단이 헤더에 가린다.
   ⚠️ 구 `#app.hdr_two_row`(로그인 시 3행) 분기는 Row2 소멸로 **불필요해져 폐기**했다.
   ⚠️ ≤1024 에서는 PC 헤더가 사라지고 컬럼이 off-canvas(position:fixed)로 바뀌므로
      mobile.css 가 이 토큰을 0 으로 되돌린다(그쪽이 그 구간의 정본).
   ========================================================================== */
#app { --app-hdr-h: 128px; }   /* CEO-1e · row0 84 + gnb 44 */

/* 본문 래퍼 = 유일한 신축 축.
   ⚠️ min-width:0 필수 — flex 아이템 기본 min-width:auto 는 내부 min-content(긴 팀명 등)에 막혀
      축소되지 않고 우측 카트를 화면 밖으로 밀어낸다(이 계열 대표 함정).
   .sports_content_wrap 의 width:100% 는 이 래퍼 기준이 되므로 그대로 유효(수정 불요). */
.page_shell_body {
    flex: 1 1 0;
    min-width: 0;
}

/* 정정 A · 구 `.page_shell:not(.four_col) .page_shell_body { padding:0 16px }` 제거.
   여백 책임을 셸에서 **각 콘텐츠 컨테이너**로 내렸다(.w-1248px 가로 패딩 / 홈 신 섹션 자체 처리).
   부수 효과: :not(.four_col) 예외 스코프가 불필요해져 4단 폭 산식(560)을 잠식할 요소가 사라짐. */

/* 사이드바는 셸의 직속 flex 아이템 — 좌측 간격만 담당(폭 260 은 sports.css .league_sidebar 정본). */
/* 추가① · 좌측 여백 제거 — 사이드바는 화면 좌측 끝에 붙는다(구 margin-left:10px 폐기).
   ⚠️ 폭 260 은 sports.css `.league_sidebar` 정본 — 여기서 재정의하지 않는다. */
.page_shell > .league_sidebar {
    margin-left: 0;
}
/* 2. 상단 섹션 레이아웃 (반반 아님) */
.top_content_row {
    display: flex;
    gap: 24px; /* 박스 사이 간격 */
    margin-top: 40px;
    width: 100%;
    align-items: stretch;
}

.notice_section {
    /* FRONT-NOTICE: 공지/이벤트 2섹션 분리 — 각 2(합 4·카지노 6 비율 유지) */
    flex: 2;
    min-width: 0;
}

/* 3. 공지사항 리스트 디자인 (데이터가 있을 때) */
.notice_list_wrap {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    height: 245px;
    width: 100%;
    overflow-y: auto; /* FRONT-NOTICE: 목록 넘치면 세로 스크롤 */
}

.notice_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.notice_item:last-child {
    border-bottom: none;
}

.title_area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0; /* 말줄임표 작동을 위한 설정 */
}

.cate {
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.cate.event { background-color: #00bcd4; } /* 하늘색 */
.cate.notice { background-color: #ff9800; } /* 주황색 */

/* FRONT-NOTICE: row = 제목(좌 flex·말줄임) + 날짜(우측 끝 고정) */
.notice_item .item_link {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    text-decoration: none;
}

.notice_item .subject {
    color: #cbd5e0;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 제목 길면 ... 처리 */
    flex: 1;
    min-width: 0;
}

.notice_item .date {
    color: #8b95a5; /* FRONT-NOTICE: 다크 톤 가독 보정(구 #555) */
    font-size: 13px;
    margin-left: 15px;
    flex-shrink: 0;
}
.casino_slider_section {
    flex: 6;
    min-width: 0;
}

/* 3. 슬라이더 (610x200) */
/* 슬라이더 내부 이미지 가득 채우기 */
.slider_viewport, .slider_list, .slider_item {
    width: 100%;
    height: 100%;
}

.slider_item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 66.6% 너비에 맞춰 이미지가 꽉 참 */
}

/* 4. 공통 헤더 바 (텍스트 색상을 밝게 변경) */
.header_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}
.header_bar .title {
    font-size: 18px;
    /* font-weight: bold; */
    color:#fff
}
.menu_header_bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}
.menu_header_bar .title {
    font-size: 18px;
    /* font-weight: bold; */
    color: rgb(87, 97, 102);
}
.btn_plus {
    font-size: 13px;
    color: #aaa;
    text-decoration: none;
}

/* --- 게임 섹션 공통 간격 — T1 · 섹션 통합 규칙(.charge_section 블록)으로 이설(개별 규칙 삭제) --- */

/* --- [추천 게임] 전용: 5열 그리드 & 1:1 비율 --- */
/* 게임 그리드를 감싸는 박스 테두리 설정 */
.grid_container_box {
    background-color: var(--app-bg-panel);   /* AT · 카드 배경 토큰 */
    border: 1px solid var(--app-border);      /* AT · 라인 토큰 */
    border-radius: 12px; /* 모서리 곡선 */
    padding: 20px; /* 테두리와 내부 카드 사이의 간격 */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* 안쪽으로 살짝 들어간 느낌 (옵션) */
}

/* 높이 동기화 (슬라이더 이미지 높이에 맞춤) */
.content_fixed_height {
    height: 245px;
    padding: 20px 4px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    box-sizing: border-box;
}

.slider_fixed_box {
    padding: 0 !important;
    height: 245px; /* 공지사항 박스와 높이를 맞추세요 */
    position: relative;
    overflow: hidden;
    border: none; /* 필요시 추가 */
}
/* 슬라이더 컨테이너 */
.main-slick-slider, .slick-list, .slick-track {
    height: 100% !important;
}

.main-slick-slider img {
    width: 100%;
    height: 200px; /* 버튼 영역을 제외한 이미지 높이 */
    object-fit: cover;
    display: block;
}

/* 하단 버튼(Dots) 영역 스타일 - 이미지 바로 아래 붙이기 */
.slick-dots {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px; /* 버튼 영역 높이 */
    display: flex !important;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slick-dots li {
    flex: 1; /* 버튼 너비를 1/N로 균등 배분 */
    height: 100%;
    margin: 0;
}

.slick-dots li .slick_text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a2436; /* 비활성 배경색 */
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

/* 활성화된 버튼 색상 (보타/에볼루션 선택된 느낌) */
.slick-dots li.slick-active .slick_text {
    background-color: #46b4c3; /* 캡처본의 하늘색 계열 */
    font-weight: bold;
}

.game_grid.col_5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.recommend_card {
    border-radius: 12px;
    overflow: hidden;
    background: #1a2436;
    transition: transform 0.3s;
    cursor: pointer;
}

.recommend_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    border : 4px solid #20c2ff
}

/* --- [슬롯 게임] 전용: 4열 그리드 & 272x145 비율 --- */
.game_grid.col_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* 지시 · 슬롯 6열 — col_4/col_5 와 같은 정적 축(구 gflex/--gcols 가변축 폐기). */
.game_grid.col_6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.slot_item_card {
    border-radius: 12px;
    overflow: hidden;
    background: #1a2436;
    transition: transform 0.3s;
    cursor: pointer;
}

.slot_item_card .img_box {
    width: 100%;
    aspect-ratio: 272 / 145; /* 슬롯 이미지 전용 비율 */
    border-radius: 8px;
    overflow: hidden;
    background: #1a2436;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.slot_item_card .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot_item_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    border : 4px solid #20c2ff
}

/* 슬롯 하단 설명 텍스트 */
.marketing_banner_text {
padding-top: 8px;
    min-height: 40px;
    margin-bottom: 0px;
    border: 1px solid rgb(30, 43, 61);
    border-radius: 0px 0px 8px 8px;
    background-color: rgb(11, 20, 37);
    color: rgb(255, 255, 255);
    transition: background-color 0.2s ease-in;
    font-size: 14px;
    text-align: center;
}

/*.support_section { background-color: #0b101b; color: #ffffff; margin-top: 40px; }
.support_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.main_title { font-size: 24px; color: #fff; display: inline-block; }
.sub_title { font-size: 14px; color: #888; margin-left: 15px; }

.list_head { display: flex; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 4px; font-weight: bold; }
.col_subject { flex: 8; }
/* BM-C(2026-08-30 지시 · CEO) · 관리자 공지글 행 = 제목 가운데 정렬(목록별 text-align:left 규칙보다 특이도 우위). */
.board_list3 .col_subject.subject_center,
.col_subject.subject_center { text-align: center; }
.col_date { flex: 2; text-align: center; }
.col_status { flex: 2; text-align: center; }

.item_row { display: flex; padding: 15px; border-bottom: 1px solid #333; cursor: pointer; }
.item_detail_view { background: #1a1a1a; padding: 20px; border-bottom: 1px solid #333; }
.status_tag.완료 { background: #2366cb; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 12px; }

*/

/* 고객센터 */
/* 컨테이너 및 기본 배경 — T1 · 섹션 통합 규칙(.charge_section 블록)으로 이설(개별 규칙 삭제·구 padding 30px 0 폐기) */

.support_container {
    /*background-color: #0b111c;*/ /* 매우 어두운 네이비 배경 */
    /*border-radius: 8px;
    padding: 24px;*/
}

/* 상단 헤더 영역 */
.support_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.main_title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: inline-block;
}

.sub_text {
    font-size: 13px;
    color: #8a96a3;
    margin-left: 15px;
}

/* 버튼 디자인 */
.action_buttons {
    display: flex;
    gap: 10px;
}

/* S1 · 공통 페이지 헤더(PageHeader) — action_buttons = absolute 우측·수직 중앙(버튼 유무·크기 무관 헤더 높이 고정) */
.support_header.page_header {
    position: relative;
    min-height: 44px;
}

.support_header.page_header .action_buttons {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* T4 · page_header 액션 버튼 공통 소형 규격(줄바꿈·헤더 높이 변형 금지 — 컨텍스트 규칙·유틸 클래스 아님) */
.support_header.page_header .action_buttons button {
    padding: 7px 14px;
    font-size: 13px;
    white-space: nowrap;
}

/* AH3 · 구 game_page_title(T2 경량 h3) 폐기 — 소비처 0. 규칙 제거. */

/* BK A-3 · 구 .page_title_bar(+ ≤900 모바일 축소) 폐기 — 마크업 소비처 0 실증 후 정의 삭제.
   배팅 5표면 = 종목 이동 드롭다운(sports.css .vm-dd-*) / 미니·가상 = support_header page_header 로 이설.
   modifier .page_title_bar--betting 도 같은 회차에 sports.css 에서 제거됨. */

.btn_outline {
    background: transparent;
    border: 1px solid #4ea5c9;
    color: #4ea5c9;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

    .btn_outline:hover {
        background: rgba(78, 165, 201, 0.1);
    }

.btn_filled {
    background: #4ea5c9;
    border: 1px solid #4ea5c9;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* 게시판 테이블 구조 */
.board_table {
    background-color: #0b111c;
    border-top: 1px solid #1f293d;
}

.table_head {
    display: flex;
    padding: 15px 20px;
    color: #8a96a3;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #1f293d;
}

.table_row {
    display: flex;
    padding: 18px 20px;
    cursor: pointer;
    align-items: center;
    transition: background 0.2s;
}

    .table_row:hover {
        background: rgba(255, 255, 255, 0.02);
    }

.table_row_group {
    background-color: #16202f;
}
/* 컬럼 비율 */
.col_title {
    text-align: left;
}
.col_title_16 {
    flex-basis: 16.6667%;
    -webkit-box-flex: 0;
    flex-grow: 0;
    max-width: 16.6667%;
}
.col_title_83 {
    flex-basis: 83.3333%;
    -webkit-box-flex: 0;
    flex-grow: 0;
    max-width: 83.3333%;
}
.col_date {
    font-size: 13px;
}
.col_date_16 {
    flex-basis: 16.6667%;
    -webkit-box-flex: 0;
    flex-grow: 0;
    max-width: 16.6667%;
}

.col_date_83 {
    flex-basis: 83.3333%;
    -webkit-box-flex: 0;
    flex-grow: 0;
    max-width: 83.3333%;
}
.col_status {
    flex: 2;
    text-align: center;
}

/* 답변완료 뱃지 */
.badge_status.blue {
    background-color: #2366cb;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* 토글 시 열리는 콘텐츠 영역 */
.content_view {
    background-color: #0d1421;
    padding: 30px;
    border-top: 1px dashed #1f293d;
    border-bottom: 1px solid #1f293d;
}

.user_question {
    font-size: 15px;
    color: #e1e5eb;
    margin-bottom: 25px;
}

/* 관리자 답변 영역 */
.admin_answer {
    border-top: 1px dashed #1f293d;
    padding-top: 25px;
}

.badge_admin {
    background-color: #2366cb;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 15px;
    display: inline-block;
}

.answer_body {
    line-height: 1.8;
    color: #adb5bd;
    font-size: 14px;
}

.brand_color {
    color: #ff6b6b;
    font-weight: bold;
}

.highlight_text {
    color: #ff9900;
    font-weight: bold;
    font-size: 15px;
}

/* 애니메이션 효과 (선택사항) */
.table_row_group.is_open .table_row {
    background: rgba(255, 255, 255, 0.03);
}
/* 아이콘 공통 */
.icon_btn_b, .icon_btn_n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin: 0 2px;
    color: #fff;
    vertical-align: middle;
}

.icon_btn_b { background-color: #e74c3c; } /* 배팅 아이콘: 빨간색 */
.icon_btn_n { background-color: #ffeb00; color: #000;} /* 새글 아이콘: 노란색 */

/* 깜빡임 애니메이션  */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.blink_ani {
    animation: blink 1s step-end infinite;
}

/* 댓글 UI */
.comment_section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #5a5a5a;
}

.comment_input_box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.comment_input_box textarea {
    flex: 1;
    height: 60px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    background: #f9f9f9;
}

.btn_comment_submit {
    width: 80px;
    background: #34495e;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.comment_item {
    padding: 12px 0;
    border-bottom: 1px solid #5a5a5a;
}

.comment_info {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.comment_info .writer { font-weight: bold; font-size: 13px; }
.comment_info .date { color: #999; font-size: 12px; }
.comment_text { font-size: 14px; color: #C5C5C5; line-height: 1.4; }
.comment_actions { text-align: right; }
.btn_del { font-size: 11px; color: #e74c3c; border: none; background: none; cursor: pointer; }

/* 쪽지 */
/* 탭 하단 컨트롤 바 */
.board_control_bar {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 1px;
}

.checkbox_group {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d1d5db;
    font-size: 14px;
}

/* 커스텀 체크박스 (기본 스타일 제거 후 재설계) */
.custom_check {
    width: 18px;
    height: 18px;
    border: 1px solid #4ea5c9;
    background: transparent;
    cursor: pointer;
    accent-color: #4ea5c9; /* 체크 시 파란색 */
}

/* 테이블 헤더 */
.message_board .table_head {
    display: flex;
    padding: 12px 20px;
    background: #161d2b;
    color: #8a96a3;
    font-size: 14px;
    border-bottom: 1px solid #1f293d;
}

.col_check {
    width: 50px;
    text-align: center;
}

.col_title {
    flex: 1;
    padding-left: 10px;
}

.col_date {
    /* TEST-BET 수리 — 150px 고정폭이 게시판 표 폭을 넘겨 날짜가 삐져나오던 실측. yy-MM-dd 는 90px 로 충분(줄어들지 않게만 고정). */
    width: 90px;
    flex: 0 0 auto;
    text-align: center;
    color: #8a96a3;
}

/* 쪽지 행 */
.message_row {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #1f293d;
    cursor: pointer;
    transition: background 0.2s;
}

    .message_row:hover {
        background: rgba(255, 255, 255, 0.03);
    }

/* 읽음/안읽음 뱃지 */
.badge_read {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    margin-right: 10px;
    color: #fff;
}

    .badge_read.red {
        background-color: #fe3d3d;
    }
    /* 읽음 */
    .badge_read.blue {
        background-color: #2a73e1;
    }
    .badge_read.primary {
        background-color: #289caf;
    }
    .badge_read.admin {
        border-radius: 0px !important;
        background-color: #fff727;
        color: #424242;
        font-weight: bold;
    }
/* 안읽음 */

.subject_text {
    color: #e1e5eb;
    font-size: 14px;
}

/* 상세 내용 뷰 */
.message_content_view {
    background-color: #0d1421;
    padding: 25px 70px; /* 체크박스 공간만큼 왼쪽 여백 */
    border-bottom: 1px solid #1f293d;
    color: #adb5bd;
    line-height: 1.6;
}

/* 페이지네이션 (이미지 중앙 노란색 포인트 반영) */
.pagination_container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination {
    display: flex;
    list-style: none;
    gap: 8px;
}

.page_num, .page_arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d1421;
    border: 1px solid #1f293d;
    cursor: pointer;
    color: #8a96a3;
}

    .page_num.active {
        background-color: #ffd700; /* 이미지의 노란색 포인트 */
        color: #000;
        border: 1px solid #ffd700;
        font-weight: bold;
    }

/* 탭 전체 컨테이너 */
.support_tabs_container {
    background-color: #0b111c; /* 전체 배경색과 통일 */
    border-bottom: 1px solid #1f293d; /* 하단 리스트와의 구분선 */
}

.tabs_list {
    display: flex;
    width: 100%;
}

/* 개별 탭 버튼 스타일 */
.tab_item {
    flex: 1; /* 탭 너비를 1:1로 균등 배분 (MUI fullWidth 기능) */
    position: relative;
    background: transparent;
    border: none;
    /* 비활성 글자색 */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    outline: none;
}

    /* 활성화된 탭 (Active) */

        /* 활성화된 탭 하단 노란색 선 (Indicator) */
        .tab_item.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #ffd700; /* 노란색 강조선 */
        }

    /* 호버 시 글자 밝아짐 */


    /* 충전 */
/* T1 · 섹션 클래스 CSS 통합 — 4종 단일 규칙(support/game 개별 규칙 삭제·구 상하 패딩은 의도적 폐기).
   신규/개편 페이지는 content_section 사용(charge_section 등은 잔존 페이지 호환 별칭). */
.support_section,
.charge_section,
.content_section,
.game_section {
    padding: 0 10px;
    color: #ffffff;
}

/* 라디오 리스트 레이아웃 */
.bonus_option_list {
    list-style: none;
    padding: 0;
    margin: 0;
    /*background-color: #161d2b;
    border: 1px solid #1f293d;*/
    border-radius: 4px;
}

.bonus_kind {
    padding: 12px 15px;
    /*border-bottom: 1px solid #1f293d;*/
}

    .bonus_kind:last-child {
        border-bottom: none;
    }

/* 커스텀 라디오 버튼 스타일 */
.radio_container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    color: #ffffff;
}

    .radio_container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    /* 추가: 자 요소를 중앙으로 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio_container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* 체크되었을 때 파란색 원 내부 점 */
.radio_container input:checked ~ .checkmark {
    background-color: #fff;
    border: 1px solid #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio_container input:checked ~ .checkmark:after {
    display: block;
}

.radio_container .checkmark:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2196F3;
}

/* 옵션 텍스트 내 강조색상 */
.option_text b {
    font-weight: 600;
    color: #fff;
}

    .option_text b.blue {
        color: #2196F3;
    }

.option_text .red {
    color: #fe3d3d;
    margin-left: 5px;
}

/* 입금계좌 문의 버튼 (우상단) */
.btn_query_account {
    background-color: #2a8a9d; /* 청록색 */
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

/* 폼 디자인 */
/* F · 톤다운 후 밝은 남색(#162033)이 튀어 토큰으로 교체. 이번 회차는 이 규칙만(범위 확대 금지). */
.charge_section_wrapper {
    background-color: var(--app-bg-panel);
    border: 1px solid var(--app-border);
    padding: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.charge_form_container {
    padding: 40px 0;
    max-width: 800px; /* 이미지처럼 중앙 집중형 레이아웃 */
    margin: 0 auto;
}

.form_row {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.form_label_area {
    flex: 3;
    text-align: right;
    padding-right: 30px;
}

.form_input_area {
    flex: 7;
}

.form_label {
    color: #fff;
    font-size: 15px;
}

    .form_label.required::after {
        content: " *";
        color: #fe3d3d;
    }

/* 입력창 스타일 */
.form_control {
    width: 100%;
    background-color: #1a2235;
    border: 1px solid #2d384e;
    padding: 12px 15px;
    color: #fff;
    text-align: right; /* 이미지 기준 우측 정렬 */
    font-size: 1.1rem;
    border-radius: 4px;
}

.input_readonly {
    color: #8a96a3;
    cursor: default;
}

/* 안내 문구 */
.amount_notice {
    color: #fe3d3d;
    font-size: 13px;
    margin: 10px 0;
    text-align: center;
}

/* 금액 버튼 그리드 */
.money_btn_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 15px;
}

.btn_amt {
    background-color: #2a8a9d;
    color: #fff;
    border: none;
    padding: 12px 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

    .btn_amt.reset {
        background-color: #3b465c; /* 초기화 버튼은 회색톤 */
    }

/* 최종 신청 버튼 */
.submit_area {
    margin-top: 40px;
    text-align: center;
}

/* ONE-BTN · 입금계좌 문의 — 충전 신청과 동일 규격(.btn_submit_charge 상속) · 색만 분리(지시). */
.btn_submit_charge.btn_account_inquiry {
    background-color: #5a6472;   /* 뒤의 .btn_submit_charge 선언보다 특이도 우위 — 순서 무관 색 분리 보장 */
}

.btn_submit_charge {
    width: 100%;
    max-width: 400px;
    background-color: #2a8a9d;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.spacer_v {
    /* AB2 · 고정 height=40px → min-height (내부 GUIDE 안내가 박스 밖으로 넘치던 수리 — 내용만큼 확장) */
    min-height: 40px;
    border: 1px solid rgb(30, 43, 61);
    background-color: rgb(8, 15, 28);
    padding: 0 12px;
    overflow: hidden;
}
/* 읽기 전용 텍스트 스타일 (은행, 계좌 등) */
.readonly_text {
    background-color: #161d2b !important; /* 입력창보다 약간 더 어두운 배경 */
    border: 1px solid #1f293d !important;
    color: #8a96a3;
    display: flex;
    justify-content: flex-end; /* 텍스트 우측 정렬 */
    align-items: center;
    min-height: 48px;
}

.highlight_white {
    color: #ffffff; /* 보유머니 등 강조가 필요한 경우 */
}


/* 금액 입력 필드 포커스 효과 */
.input_amount:focus {
    outline: none;
    border-color: #2a8a9d;
    box-shadow: 0 0 0 1px rgba(42, 138, 157, 0.3);
}

/* 내역 테이블 */
/* 테이블 컨테이너 */
.history_table_container {
    margin-top: 1px;
    background-color: #0b111c;
}

.history_table {
    font-size: 14px;
}

    /* 헤더 스타일 */
    .history_table thead tr {
        background-color: #161d2b;
        border-bottom: 1px solid #1f293d;
    }

    .history_table th {
        font-weight: 600;
        text-align: center;
    }

    /* 바디 스타일 */
    .history_table tbody tr {
        border-bottom: 1px solid #1f293d;
        transition: background 0.2s;
    }

        .history_table tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.02);
        }

    .history_table td {
        vertical-align: middle;
    }

/* 텍스트 정렬 공통 클래스 */
.text_right {
    text-align: right !important;
    padding-right: 30px !important;
}

.text_date {
    color: #8a96a3;
    font-size: 13px;
}

/* 내역 구분 뱃지 (충전/환전) */
.badge_type {
    white-space: nowrap; /* AC1 · 좁은 셀에서 "충\n전" 2줄 깨짐 금지 */
}

    .badge_type.charge {
        background-color: #2a8a9d;
    }
    /* 충전: 청록색 */
    .badge_type.withdraw {
        background-color: #6c757d;
    }
/* 환전: 회색계열 */

/* 진행상태 뱃지 및 삭제 버튼 */
.status_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.badge_status {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
}

    .badge_status.cancel {
        background-color: #fe3d3d;
    }
    /* 취소: 빨간색 */
    .badge_status.complete {
        background-color: #2a73e1;
    }
/* 완료: 파란색 */
    /* AC1 · 충/환전내역 상태 배지 — 전 상태 배경 필 통일(구 success/process = 배경 미정의 텍스트 노출 수리) */
    .badge_status.success {
        background-color: #2e7d32;
    }
    /* 완료: 녹색계 */
    .badge_status.process {
        background-color: #5fbfb6;
        color: #1a1a1a;
    }
/* 진행중: 노랑계(가독 위해 어두운 글자) */

/* 삭제 아이콘 버튼 (-) */
.btn_delete_history {
    background: transparent;
    border: 1px solid #8a96a3;
    color: #8a96a3;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

    .btn_delete_history::before {
        content: "−"; /* 마이너스 기호 */
        font-weight: bold;
    }

    .btn_delete_history:hover {
        color: #fff;
        border-color: #fff;
    }
/* 모바일 대응 */
@media (max-width: 1248px) {
    .main_content_wrap {padding: 10px}
    .sports_content_wrap {padding: 10px}
}

/* ==========================================================================
   B-118-B2/B2b · 유저 게시판(BoardView / BoardDetailView / BoardBody) 공용 스타일.
   ⚠️ badge·-sm 금지 → badge_type 자체 스타일.
   ========================================================================== */
.board_state { text-align: center; padding: 40px 0; color: #888; font-size: 14px; }
.crown { margin-right: 3px; }
.dot { color: #ccc; margin: 0 4px; }

/* 말머리 뱃지 (공지=청록 / 이벤트=빨강 / EVENT_COLOR 우선) */
.badge_type { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; color: #fff; font-weight: bold; margin-right: 6px; vertical-align: middle; }

/* 리스트형 3구역 (작성자 | 제목 | 작성일) — B-2f 다크 정합(검정 배경) */
.board_list3 .table_head,
.board_list3 .message_row { display: grid; grid-template-columns: 130px 1fr 120px; align-items: center; }
.board_list3 .table_head { font-weight: bold; color: #9aa4af; border-bottom: 1px solid #2d3642; padding-bottom: 8px; }
.board_list3 .col_writer { text-align: center; color: #b6bec8; }
.board_list3 .col_date { text-align: center; color: #7a8590; font-size: 13px; }
.board_list3 .col_subject { text-align: left; }
.board_list3 .message_row { cursor: pointer; padding: 12px 8px; }        /* 보더 제거 */
.board_list3 .message_row:hover,
.board_list3 .message_item_group.is_open .message_row { background: rgba(255,255,255,0.05); }   /* 흰색 hover/select 제거 */
.board_list3 .subject_text { font-weight: 500; color: #d5d5d5; }
.board_list3 .reply_cnt { color: #e06c6c; font-weight: bold; margin-left: 6px; font-size: 13px; }
.board_list3 .hits_text { color: #6b7480; font-size: 12px; margin-left: 8px; }

/* ===== O · 게시판 목록 리스타일(board_restyle — 레퍼런스 밀도·다크 톤 유지. 구 3구역 규칙 오버라이드) ===== */
/* PC: 번호(60px) | 제목 | 닉네임(150px) | 날짜(70px yy-MM-dd) — 행 패딩 촘촘 */
.board_restyle .message_row { padding: 9px 8px; }
.board_restyle .table_head { font-size: 13px; }
.board_restyle .col_no { text-align: center; color: #7a8590; font-size: 13px; }
.board_restyle .col_subject { overflow: hidden; }
.board_restyle .subject_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; vertical-align: middle; }
.board_restyle .lv_ico { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-right: 3px; }
/* 모바일: 헤더 없음 · 행 = 블록(1줄 공지 / 2줄 자유) — 날짜·조회수 없음 */
.board_restyle.m .message_row { display: block; padding: 10px 8px; border-bottom: 1px solid #232833; }
.board_restyle.m .m_row1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.board_restyle.m .m_row1 .subject_text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_restyle.m .m_row1 .reply_cnt { flex: none; }
.board_restyle.m .m_row2 { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: #8b949e; }
.board_restyle.m .badge_type { padding: 2px 8px; font-size: 11px; flex: none; }
/* AD2 · 공지·이벤트(nb) = 게시판식 2줄 — PC·모바일 공통(자유 모바일 m_stack 규칙 미러 + 2줄 맨 우측 날짜) */
.board_restyle.nb .message_row { display: block; padding: 10px 8px; border-bottom: 1px solid #232833; }
.board_restyle.nb .m_row1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.board_restyle.nb .m_row1 .subject_text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.board_restyle.nb .m_row1 .reply_cnt { flex: none; }
.board_restyle.nb .m_row2 { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: #8b949e; }
.board_restyle.nb .badge_type { padding: 2px 8px; font-size: 11px; flex: none; }
.board_restyle.nb .nb_date { margin-left: auto; color: #7a8590; font-size: 12px; }
.board_list3 .message_content_view { padding: 16px; background: #16191f; border-top: 1px solid #2d3642; }
.board_plain { white-space: pre-wrap; word-break: break-word; color: #d5d5d5; line-height: 1.6; }

/* 유저 글쓰기 인라인 (B-2c 다크 테마 — 검정 배경 사이트 정합) */
.board_write_box { border: 1px solid #2d3642; border-radius: 8px; padding: 16px; margin: 12px 0; background: #1a1d23; }
/* 말머리 행: 라벨 10% / select 10% / 빈칸 80% */
.board_write_tagrow { display: grid; grid-template-columns: 10% 10% 80%; align-items: center; gap: 8px; margin-bottom: 10px; }
.board_write_taglabel { color: #8b949e; font-size: 13px; white-space: nowrap; }
.board_write_tagsel { padding: 8px 10px; background: #252a34; border: 1px solid #2d3642; color: #efefef; border-radius: 6px; }
.board_write_title, .board_write_content { width: 100%; padding: 10px 12px; background: #252a34; border: 1px solid #2d3642; border-radius: 6px; color: #efefef; box-sizing: border-box; }
.board_write_title { margin-bottom: 8px; }
.board_write_content { min-height: 150px; resize: vertical; }
.board_write_title::placeholder, .board_write_content::placeholder { color: #5a6470; }
.board_write_title:focus, .board_write_content:focus, .board_write_tagsel:focus { outline: none; border-color: #00c2b3; }
.board_write_notice { color: #7a8590; font-size: 12px; margin: 8px 2px 0; }
.board_write_actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* B-118-C3 · 배팅첨부 (betlist 체크박스 + 글쓰기 첨부 표시) */
.betlist_table .chk { width: 40px; text-align: center; }
.attach_board_btn { background: #00c2b3; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; margin-left: 8px; font-size: 13px; }
.attach_board_btn:hover { background: #00a99c; }
.board_write_attach { margin-top: 12px; border-top: 1px solid #2b323c; padding-top: 12px; }
.board_write_attach .attach_head { color: #b6bec8; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.board_write_attach .attach_cnt { color: #00c2b3; margin-left: 4px; }
.board_write_attach .attach_item { position: relative; margin-bottom: 10px; background: #1a1d23; border: 1px solid #2b323c; border-radius: 6px; padding: 10px 32px 10px 10px; }
.board_write_attach .attach_remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 4px; background: #3a4451; color: #d6dbe1; cursor: pointer; line-height: 1; }
.board_write_attach .attach_remove:hover { background: #c0392b; color: #fff; }

/* B-118-C3b · read측 첨부 표시 + 배팅아이콘 + New + 말머리 텍스트 */
.board_read_attach { margin-top: 14px; border-top: 1px solid #2b323c; padding-top: 12px; }
.board_read_attach .attach_head { color: #b6bec8; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.board_read_attach .attach_cnt { color: #00c2b3; margin-left: 4px; }
.board_read_attach .attach_item { margin-bottom: 10px; background: #1a1d23; border: 1px solid #2b323c; border-radius: 6px; padding: 10px; }
.board_read_attach .attach_casino { color: #9aa4af; font-size: 13px; }
.bet_attach_ico { margin-right: 4px; font-size: 13px; }
.tag_text { color: #9aa4af; font-size: 13px; margin-right: 4px; }
.board_new_badge { display: inline-block; margin-left: 6px; color: #ff5a5a; font-weight: 700; font-size: 11px; animation: board_new_blink 1s ease-in-out infinite; }
/* B-118-C7d 레벨 텍스트 뱃지(gif 대체·다크) */
.lv_badge { display: inline-block; padding: 0 5px; border-radius: 3px; background: #2b323c; color: #9aa4af; font-size: 11px; font-weight: 700; }
.cmt_lv { margin-right: 6px; }
@keyframes board_new_blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* B-118-C8 · 게시판 첨부 슬립 = admin 정합(핸디캡 빨간 H·오버언더 화살표 깜빡 + 하단 abs-info 한줄/3D) */
.handi_h { display: inline-block; color: #ff4d4f; font-weight: 700; margin: 0 3px; animation: abs_handi_blink 1s steps(2, start) infinite; }
.ou_blink { display: inline-block; animation: abs_handi_blink 1s steps(2, start) infinite; }
@keyframes abs_handi_blink { 50% { opacity: .25; } }
.abs-info { margin-top: 10px; padding: 10px 12px; background: #153542; border-radius: 6px; color: #c7d0dc; font-size: 12px;
    white-space: nowrap; overflow-x: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25); }
.abs-info b { color: #e9eef3; }
.abs-info .hit_amt { color: #ffd43b; }
.abs-info-no { color: #8a93a2; font-weight: 700; margin-right: 6px; }
.abs-info-type { display: inline-block; padding: 0 8px; border-radius: 4px; background: #0d6efd; color: #fff; font-size: 11px; font-weight: 700; }
.abs-info-sep { color: #5a6b78; margin: 0 7px; }
.board_write_box .btn_line { background: transparent; border: 1px solid #3a4451; color: #b6bec8; padding: 8px 18px; border-radius: 6px; cursor: pointer; }
.board_write_box .btn_filled { background: #00c2b3; border: none; color: #06232a; font-weight: bold; padding: 8px 20px; border-radius: 6px; cursor: pointer; }

/* 썸네일형 그리드 (PC 4/줄 · 모바일 2/줄) — B-2f 다크 카드 */
.board_thumb_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px 0; }
.board_thumb_card { border: 1px solid #2a3548; border-radius: 8px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
/* ⚠️ gif 원본 정사각(300x300) 등 다양 → object-fit:contain(짤림 방지, 여백은 다크). gif 애니메이션 유지. */
.thumb_img_wrap { position: relative; width: 100%; /*aspect-ratio: 16 / 10;*/ overflow: hidden; background: #0f141b; }
.thumb_img_wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb_badge { position: absolute; top: 8px; left: 8px; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 4px; z-index: 1; }
.thumb_body { padding: 10px 12px; }
/* 제목 한 줄 말줄임 — 구 2줄 클램프(-webkit-line-clamp:2) 폐기.
   앞머리 배지(.board_new_badge N · .bet_attach_ico 📊)는 제목 텍스트보다 **앞**에 오는 인라인 요소라
   nowrap 상태에서 그대로 렌더되고, 잘리는 건 뒤따르는 제목 텍스트뿐이다(배지 온전).
   그래서 flex + flex-shrink:0 구조가 필요 없다 — 마크업 무변경으로 성립. */
.thumb_title { font-weight: bold; font-size: 14px; margin: 4px 0 6px; color: #d5d5d5; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb_meta { font-size: 12px; color: #8b949e; display: flex; flex-wrap: wrap; align-items: center; }

/* 상세 _view 페이지 — B-2f 다크 정합 */
.board_view_wrap { padding: 8px 0 24px; }
.board_view_head { border-bottom: 2px solid #2d3642; padding-bottom: 14px; margin-bottom: 18px; }
.board_view_title { font-size: 20px; font-weight: bold; color: #e5e5e5; margin: 6px 0; }
.board_view_meta { color: #7a8590; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; }
.board_view_body { min-height: 160px; padding: 10px 4px 24px; color: #d5d5d5; font-size: 14px; line-height: 1.7; }
.board_view_body img { max-width: 100%; height: auto; }

/* ── SunEditor 본문 표시 규칙 (admin 에디터 산출 마크업 해석) ───────────────────
   SunEditor는 이미지 정렬·크기를 "클래스 + 인라인 style"로만 기록하고 해석은 콘텐츠 CSS 몫.
   admin은 suneditor.min.css가 해석하지만 front엔 그 CSS가 없어
   센터 지정 이미지가 좌측으로 붙고 원본 대형 이미지가 컨테이너를 벗어났다.
   아래는 suneditor.min.css의 .sun-editor-editable 규칙 중 "표시에 필요한 것만" 발췌·이식.
   ⚠️ 본문 래퍼 스코프 한정 — 전역 적용 금지(홈 그리드·배너 이미지 회귀 방지).
        .board_view_body = 공지(KIND2)·이벤트(KIND4)·자유게시판(KIND1) 상세(BoardDetailView)
        .inner_text      = 고객센터 게시판 상세(BoardView) · 쪽지 본문(Paper)
   ⚠️ 클래스 생존은 common/HtmlSanitize의 AllowedClasses 화이트리스트가 전제 —
      그쪽을 되돌리면 아래 __se__float-* 규칙은 전부 죽은 코드가 된다.
   ⚠️ 센터는 float로 하지 않는다. SunEditor 원본은 .__se__float-center{float:center}로
      적어두었으나 float에 center 값은 없어 무효(no-op)이고, 실제 중앙 정렬은
      .se-component{display:flex} + figure{margin:auto}가 만든다. 그래서 그대로 옮기지 않았다.
   ⚠️ figure 인라인 width(예: width:1000px)는 살아남는다. 넘침을 막는 건
      .se-component{display:flex}의 flex-shrink — figure가 컨테이너 폭까지 줄어든다. */
.board_view_body .se-component,
.inner_text .se-component { display: flex; padding: 1px; margin: 0 0 10px; }

.board_view_body .se-image-container,
.inner_text .se-image-container { width: auto; height: auto; max-width: 100%; }

/* figure 기본 마진(브라우저 기본 1em 40px) 제거 — 안 지우면 본문 이미지가 들여쓰기된다. */
.board_view_body figure,
.inner_text figure { margin: 0; max-width: 100%; }

.board_view_body img,
.inner_text img { max-width: 100%; height: auto; }

/* 정렬 3종: 컨테이너가 float를 잡고, 그 안 figure는 margin:auto로 중앙 배치. */
.board_view_body .__se__float-center figure,
.board_view_body .__se__float-left figure,
.board_view_body .__se__float-right figure,
.inner_text .__se__float-center figure,
.inner_text .__se__float-left figure,
.inner_text .__se__float-right figure { margin: auto !important; }

.board_view_body .__se__float-left,
.inner_text .__se__float-left { float: left; margin-right: 4px; }

.board_view_body .__se__float-right,
.inner_text .__se__float-right { float: right; margin-left: 4px; }

.board_view_body .__se__float-none,
.inner_text .__se__float-none { float: none; }

/* 좌/우 정렬 이미지의 float가 본문 밖(댓글·버튼바)으로 새는 것 차단. */
.board_view_body::after,
.inner_text::after { content: ""; display: block; clear: both; }

.board_view_foot { text-align: center; border-top: 1px solid #2d3642; padding-top: 16px; }

/* 작성 완료 모달 */
.board_modal_overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; }
.board_msg_modal { background: #fff; border-radius: 10px; padding: 28px 32px; text-align: center; min-width: 260px; }
.board_msg_text { font-size: 15px; color: #222; margin-bottom: 18px; }

@media screen and (max-width: 768px) {
    .board_thumb_grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .board_list3 .table_head, .board_list3 .message_row { grid-template-columns: 80px 1fr 84px; }
}

/* ==========================================================================
   B-118-B2e-3 · 게시판 댓글(BoardComments) — 다크 테마(betlist/cross 정합).
   ========================================================================== */
.cmt_section { margin-top: 20px; border-top: 1px solid #2d3642; padding-top: 16px; }
.cmt_header { color: #efefef; font-weight: bold; font-size: 15px; margin-bottom: 12px; }
.cmt_count { color: #00c2b3; }
.cmt_empty { color: #7a8590; font-size: 13px; padding: 14px 0; }

.cmt_list { display: flex; flex-direction: column; gap: 2px; }
.cmt_item { display: flex; gap: 10px; padding: 12px 6px; border-bottom: 1px solid #232a33; }
.cmt_item.is_reply { padding-left: 28px; background: #14171c; position: relative; }
.cmt_reply_arrow { color: #5a6470; margin-right: 2px; }
.cmt_level_icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: #252a34; }
.cmt_body { flex: 1; min-width: 0; }
.cmt_meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.cmt_crown { }
.cmt_writer { color: #efefef; font-weight: bold; font-size: 13px; }
.cmt_author_badge { background: #00c2b3; color: #06232a; font-size: 11px; font-weight: bold; padding: 1px 7px; border-radius: 10px; }
.cmt_time { color: #6b7480; font-size: 11px; }
.cmt_text { color: #d5dae0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cmt_actions { display: flex; gap: 10px; margin-top: 6px; }
.cmt_link { background: none; border: none; color: #8b949e; font-size: 12px; cursor: pointer; padding: 0; }
.cmt_link:hover { color: #00c2b3; }
.cmt_del:hover { color: #e06c6c; }

/* 댓글/대댓글 폼 */
.cmt_form { margin-top: 10px; }
.cmt_reply_form { margin-top: 8px; }
.cmt_textarea { width: 100%; min-height: 64px; padding: 10px 12px; background: #252a34; border: 1px solid #2d3642; border-radius: 6px; color: #efefef; box-sizing: border-box; resize: vertical; }
.cmt_textarea::placeholder { color: #5a6470; }
.cmt_textarea:focus { outline: none; border-color: #00c2b3; }
.cmt_form_foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.cmt_counter { color: #6b7480; font-size: 12px; margin-right: auto; }
.cmt_btn_submit { background: #00c2b3; border: none; color: #06232a; font-weight: bold; padding: 7px 18px; border-radius: 6px; cursor: pointer; }
.cmt_btn_line { background: transparent; border: 1px solid #3a4451; color: #b6bec8; padding: 7px 16px; border-radius: 6px; cursor: pointer; }

/* ==========================================================================
   U0~U3 · 충전/환전 개편 — 유형 2줄 라디오·상품권 PIN·외부 URL·안내 패널·롤링현황 카드.
   ========================================================================== */
/* U0 · 충전유형 — 자체 섹션 헤더 + 세로 라디오(1줄=유형명+보너스% 노랑/2줄=롤링%)·선택 하이라이트(PC 표기 동일). */
.charge_type_section { margin-bottom: 14px; }
.charge_type_head { font-size: 14px; font-weight: 700; color: #c0c0c0; padding: 8px 0; border-bottom: 1px solid #2c2c2c; margin-bottom: 8px; }
.charge_type_list { display: flex; flex-direction: column; gap: 6px; }
.charge_type_item { border: 1px solid #2c2c2c; border-radius: 8px; padding: 9px 12px; background: rgba(255,255,255,.02); }
/* BS ③ · 선택 액센트 색 축을 변수로 승격 — mp_notice(마이페이지 안내)가 같은 축을 참조(값 복제 금지). 값 무변경. */
:root { --sel-accent: #1b4dff; --sel-accent-bg: rgba(27,77,255,.08); }
.charge_type_item.selected { border-color: var(--sel-accent); background: var(--sel-accent-bg); }
.charge_type_item .radio_container { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.type_lines { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.type_line1 { font-size: 13px; color: #e6e6e6; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.type_line1 b { color: #fff; }
.tl_pct { color: #9ff0e8; font-weight: 800; }
.tl_muted { color: #8a96a3; }
.type_line2 { font-size: 12px; color: #8a96a3; }

/* U2 · 상품권 PIN 다건 입력 */
.pin_row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pin_no { flex: 0 0 18px; text-align: center; color: #8a96a3; font-size: 12px; }
.pin_input { flex: 1 1 auto; min-width: 0; }
.pin_actions { display: flex; gap: 6px; margin: 4px 0; }

/* U2 · 외부 URL 방식(신청 폼 미노출) — W3 · 버튼 = 앵커(새 창·noopener) */
.charge_external_box { padding: 24px 12px; text-align: center; }
.charge_external_msg { color: #c0c0c0; font-size: 14px; margin-bottom: 14px; }
.charge_external_link { display: inline-block; text-decoration: none; text-align: center; min-width: 220px; }

/* U1 · 공통/방식별 안내 패널 — PC 즉시 / 모바일 버튼 펼침
   AB2 · 컨테이너(spacer_v) 내 수용 — 폭 이탈 금지(긴 문자열 줄바꿈·이미지는 mg_body/mg_method img 기존 규칙) */
.money_guide_panel { margin: 12px 0; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.mg_toggle { width: 100%; padding: 10px; border: 1px solid #2d3642; border-radius: 8px; background: #17171a; color: #c0c0c0; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; justify-content: center; gap: 6px; }
.mg_chev { color: #8a96a3; }
.mg_body { padding: 10px 2px; color: #d5d5d5; font-size: 13px; line-height: 1.6; }
.mg_body img { max-width: 100%; height: auto; }
/* W4/Y1 · 방식별 GUIDE = admin 에디터 HTML 렌더(mg_method — 구 mg_extra 폐기·spacer_v 영역 배치) */
.mg_method { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #2c2c2c; color: #c8d0da; line-height: 1.6; }
.mg_method img { max-width: 100%; height: auto; }

/* U3 · 롤링현황 카드(환전 탭 상단) */
.rolling_card { border: 1px solid #2d3642; border-radius: 10px; background: #171a21; margin: 10px 0 14px; overflow: hidden; }
.rc_head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: #1c2028; }
.rc_title { font-weight: 800; color: #e3f4f2; font-size: 14px; }
.rc_pct { margin-left: auto; color: #9ff0e8; font-weight: 800; font-size: 13px; }
.rc_pct.done { color: #58d68d; }
.rc_chev { color: #8a96a3; font-size: 11px; }
.rc_body { padding: 12px 14px; }
.rc_summary { display: flex; flex-wrap: wrap; gap: 10px; color: #aab4c0; font-size: 13px; margin-bottom: 10px; align-items: center; }
.rc_summary b { color: #e3f4f2; }
.rc_type { padding: 2px 10px; border-radius: 10px; background: #132523; border: 1px solid #5fbfb6; color: #b2ebe6; font-size: 12px; font-weight: 700; }
.rc_waived { color: #58d68d; font-weight: 700; }
.rc_bar_wrap { height: 10px; background: #10131a; border-radius: 6px; overflow: hidden; }
/* AT · 롤링 진행바 그라디언트 = 브랜드 축으로 교체(구 블루→청록). */
.rc_bar { height: 100%; background: var(--app-primary-grad); }
.rc_bar_meta { display: flex; justify-content: space-between; color: #8a96a3; font-size: 12px; margin: 6px 0 10px; }
.rc_bar_meta .done { color: #58d68d; font-weight: 700; }
.rc_games { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rc_game_card { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: #10131a; border: 1px solid #262c38; border-radius: 8px; text-align: center; }
.rc_game_name { font-size: 12px; color: #8a96a3; font-weight: 700; }
.rc_game_amt { font-size: 13px; color: #e3f4f2; font-weight: 700; }
.rc_game_cnt { font-size: 11px; color: #6b7480; }

/* V3 · 충전 수수료 안내 3줄(FEE_RATE>0 계좌만 — 실시간 계산·표기 전용) */
.fee_notice_box { margin: 12px 0 4px; padding: 10px 14px; border: 1px solid #2d3642; border-radius: 8px; background: #171a21; }
.fee_notice_box .fee_row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; color: #aab4c0; font-size: 13px; }
.fee_notice_box .fee_row b { color: #e3f4f2; }
.fee_notice_box .fee_minus b { color: #ff6b5e; }
.fee_notice_box .fee_net { border-top: 1px dashed #2c2c2c; margin-top: 4px; padding-top: 8px; }
.fee_notice_box .fee_net b { color: #58d68d; font-size: 14px; }
.rc_fee b { color: #ff6b5e; }

/* U0 · 모바일 목업 스펙 — 좌 라벨 64px·폰트 12~13px 일관·금액 버튼 4열 */
@media screen and (max-width: 1023.98px) {
    /* AD3 · 좌측 라벨 = 좌측 정렬 + 폭 축소(AB2 우측 정렬 3:7 개정 — 컨트롤 영역 최대화·라벨 1줄 유지) */
    .charge_form_container .form_label_area { flex: 2; text-align: left; padding-right: 10px; }
    .charge_form_container .form_label { font-size: 12px; white-space: nowrap; }
    .charge_form_container .form_control,
    .charge_form_container .amount_notice { font-size: 12px; }
    /* AD3 · 금액 8버튼 = 2×4 균등(minmax(0,1fr) — 내용폭 초과 방지) · "1000만원" 포함 줄바꿈 0(폰트 1단계 축소) */
    .charge_form_container .money_btn_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .charge_form_container .btn_amt { font-size: 11px; padding: 8px 2px; white-space: nowrap; }
    .charge_type_head { font-size: 13px; }
    .type_line1 { font-size: 12px; }
    .type_line2 { font-size: 11px; }
    .rc_games { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   AT 단계 3 · 전역 사이드바 신 구성(로고 슬롯 + 3블록 카드).
   ⚠️ 폭·위치 축(.league_sidebar 260 / sticky top:0 / height:100vh)은 sports.css 정본 — 여기서 재정의 금지.
      이 블록은 **사이드바 내부 요소**만 다룬다.
   색은 font.css THEME TOKENS 참조(리터럴 산재 금지).
   ============================================================ */

/* 로고 슬롯 — 로고 이미지 교체 지점은 SportsSidebar.razor 의 .side_logo_text 1곳. */
.league_sidebar .side_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    flex: 0 0 auto;
    text-decoration: none;
    border-bottom: 1px solid var(--app-border);
}

.league_sidebar .side_logo_text {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
    background: var(--app-primary-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 블록 카드 */
.league_sidebar .side_menu_block {
    flex: 0 0 auto;
    margin: 8px 10px 0;   /* D-1 */
    padding: 6px 0;
    background: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

.league_sidebar .side_menu_block_ttl {
    padding: 4px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--app-text-muted);
    /* B-FOLD · 접기 버튼을 제목 우측 끝으로 밀기 위한 flex. 버튼이 없는 블록(이용·지원)은
       자식이 제목 1개뿐이라 space-between 이 좌측 정렬을 그대로 유지한다(외형 변화 0). */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* ============================================================
   B-FOLD · 사이드바 접기/펴기(사용자 의도 축).
   ⚠️ AF3-①(폭 축 · 1024~1429.98 · 레일에 ☰만 · 브레이크포인트 트리거)과 **별개 기구**다.
      대체가 아니라 공존 — AF3 규칙은 무접촉이고, 이 블록은 아래 스코프 밖으로 절대 새지 않는다.

   [r180 원 경위 — 보존] 표시·발동 조건 = (≥1350) AND (비-4단 페이지)로 시작한 근거:
      · 4단(cross·inplay)의 center = VW − 560 은 사이드바 260 고정이 전제고, AF3 F1 경계 1350 도
        260+400+380+260+50 계산에서 나온 값이다. 접어서 260→56 이 되면 center = VW − 356 이 되어
        폭 산식과 F1 경계 근거가 동시에 깨지고 검증 표면이 두 배가 된다 — 그래서 4단은 숨겼었다.
      · F2(1024~1429.98)는 AF3-① 관할(이미 레일) / ≤1024 는 off-canvas 드로어 → 둘 다 미발동.
   🔴 S2-FOLD4 개정(PM 결정: 4단도 접힘 허용) — :not(.four_col) 스코프 해제(아래 셀렉터군).
      성립 근거: "VW−560" 은 calc 규칙이 아니라 주석 도출값이고 중앙 2열은 flex 잔여 분배라,
      접힘 시 확보 204px(260−56)는 카트(260 고정) 무접촉으로 left/right 2열만 자동 흡수한다.
      접힘 4단 하한 = 56+400+380+260+50 = 1146. 1146~1349.98 접힘 구간의 F2(레일) 무효화 +
      도킹 복원은 sports.css S2-FOLD4 블록(F2 대칭쌍) 1곳 소관 — 여기 규칙은 ≥1350 그대로.
   → 상태(<html>.sb_folded)는 전역·효과는 이 미디어쿼리 스코프 안에서만(불변).
   ============================================================ */

/* 접기·펴기 버튼 — 기본 미렌더(4단·F2·≤1024·비대상 전부). */
.side_fold_btn { display: none; }

@media (min-width: 1430px) {
    /* 펴진 상태 = ◀(접기)만 / 접힌 상태 = ▶(펴기)만. */
    .page_shell .league_sidebar .side_fold_collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid var(--app-border);
        border-radius: 4px;
        background: transparent;
        color: var(--app-text-muted);
        font-size: 10px;
        line-height: 1;
        cursor: pointer;
    }

    .page_shell .league_sidebar .side_fold_collapse:hover {
        color: var(--app-primary-light);
        border-color: var(--app-primary);
    }

    html.sb_folded .page_shell .league_sidebar .side_fold_collapse { display: none; }

    html.sb_folded .page_shell .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;
    }

    html.sb_folded .page_shell .league_sidebar .side_fold_expand:hover {
        color: var(--app-primary-light);
        border-color: var(--app-primary);
    }

    /* ── 접힘 상태 내부 구성 ──
       숨김 대상(지시서): 로고 · 블록 제목 · 항목 라벨 · 검색창 2개 · 종목 트리(+ 섹션 제목) · 경기 수.
       ⚠️ 검색창과 종목 트리는 접으면 접근 불가가 된다(참고 목업에도 없음 — 사실 보고 대상).
       아이콘은 title 속성이 유일한 식별 수단 → SportsSidebar 의 title="@item.Label" 이 그 역할(기존재).
       게이트 5종은 Blocks() 가 항목 자체를 만들지 않으므로 접힘 상태에서도 그대로 반영된다. */
    html.sb_folded .page_shell .league_sidebar .side_logo,
    html.sb_folded .page_shell .league_sidebar .side_menu_block_ttl,
    html.sb_folded .page_shell .league_sidebar .side_menu_label,
    html.sb_folded .page_shell .league_sidebar .sch_sp_box,
    html.sb_folded .page_shell .league_sidebar .side_section_head,
    html.sb_folded .page_shell .league_sidebar .side_tree {
        display: none;
    }

    /* 블록 카드 구조는 유지하고 아이콘만 세로로 쌓인다(목업 정합). */
    html.sb_folded .page_shell .league_sidebar .side_menu_block {
        margin: 8px 6px 0;
    }

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

/* 항목 = 아이콘 + 라벨 1행 */
.league_sidebar .side_menu_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;   /* D-1 */
    color: var(--app-text-secondary);
    font-size: 14px;      /* D-1 */
    text-decoration: none;
    white-space: nowrap;
}

.league_sidebar .side_menu_item:hover {
    color: var(--app-text-primary);
    background: rgba(29, 185, 84, .08);
}

.league_sidebar .side_menu_item.on {
    color: var(--app-primary-light);
    background: rgba(29, 185, 84, .14);
    box-shadow: inset 2px 0 0 var(--app-primary);
}

.league_sidebar .side_menu_ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
}

.league_sidebar .side_menu_label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 모바일 사용자 드로어 하단 3버튼 — AT 마감 E-3 로 (충전 / 환전 / 문의) 로 교체.
   구 [머니전환]은 E-2 에서 포인트 행 인라인 `⇄` 로 이동(중복 진입점 제거).
   색은 THEME TOKENS 참조. 배팅머니 줄은 없음(심리스 구조 — 항상 0). */
.mobile_user_drawer .drawer_actions {
    display: flex;
    gap: 8px;
    padding: 12px 14px 4px;
}

.mobile_user_drawer .drawer_btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 0;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-panel-3);
    color: var(--app-text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mobile_user_drawer .drawer_btn:hover {
    color: var(--app-text-primary);
    border-color: var(--app-primary);
}

.mobile_user_drawer .drawer_btn_primary {
    background: var(--app-primary-grad);
    border-color: var(--app-primary);
    color: #04180c;
}

/* E-2 · 포인트 행 인라인 전환 버튼 — PC 헤더 .hdr_swap 과 동일 규격·동일 아이콘.
   ⚠️ partner.css `.info_list .value` 가 flex(gap:8px)라 이 버튼은 그 안에서 자연히 우측 인라인 배치된다.
   ⚠️ 색 하드코딩 0 — 전부 토큰(E-4). */
.mobile_user_drawer .drawer_swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    background: var(--app-bg-panel-3);
    color: var(--app-text-secondary);
    cursor: pointer;
}

.mobile_user_drawer .drawer_swap svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.mobile_user_drawer .drawer_swap:hover {
    border-color: var(--app-primary);
    color: var(--app-primary-light);
}

/* E-4 · 드로어 자산 행 토큰화 — 라벨 좌측 / 값 우측 / 값 강조색 / 행 구분선.
   ⚠️ partner.css `.info_list .value`가 `#00ffcc`(민트 하드코딩)라 골드 테마에서 튄다.
      그런데 `.info_list` 는 **MainLayout_Partner 도 함께 쓰는 이름**이라 partner.css 원본을 고치면
      범위 밖 파트너 레이아웃까지 바뀐다. → `.mobile_user_drawer` 로 스코프를 좁혀(0,2,0) 여기서만 상쇄한다. */
.mobile_user_drawer .info_list li { border-top-color: var(--app-border); }
.mobile_user_drawer .info_list .label { color: var(--app-text-secondary); }
.mobile_user_drawer .info_list .value { color: var(--app-primary-light); }
.mobile_user_drawer .info_list .value span { color: var(--app-text-muted); }

/* AT · 스포츠 경기 트리 — 3블록(게임/이용/지원)과 동일 카드 톤으로 통일.
   ⚠️ 트리 데이터·클릭 동작(GoLeague·SportsFilterState)은 무접촉 — 외형만. */

/* 섹션 헤더: 골드 원형 아이콘 + 골드 텍스트 (D-2 · 뒷배경 제거)
   ⚠️ 배경·하단선의 출처는 sports.css `.left_ttl`(그라디언트 + 청록 2px border-bottom)이다.
      그 규칙은 **청록 27건 착수 금지** 대상이라 손대지 않고, 여기 복합 셀렉터(0,2,0 > 0,1,0)로 상쇄한다.
      → 이 요소에서만 배경·테두리가 사라지고 sports.css 의 다른 .left_ttl 소비처는 무영향. */
.league_sidebar .side_section_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 10px 6px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--app-primary);
}

.league_sidebar .side_section_dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--app-primary-grad);
    font-size: 12px;
    line-height: 1;
}

/* 종목 행 = 개별 라운드 카드(연속 리스트 아님 — 행 사이 간격) */
.league_sidebar .side_tree {
    margin: 0 6px;
}

.league_sidebar .side_tree .snb_sp_group {
    margin-bottom: 4px;
    background: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow: hidden;
}

.league_sidebar .side_tree .snb_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--app-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.league_sidebar .side_tree .snb_item:hover {
    color: var(--app-text-primary);
    background: rgba(29, 185, 84, .08);
}

.league_sidebar .side_tree .snb_sp_group.active .snb_item {
    color: var(--app-primary-light);
}

.league_sidebar .side_tree .icon_sp {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
}

.league_sidebar .side_tree .snb_sp_name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 경기 수 — 레퍼런스엔 없지만 유지(어디에 경기가 몰렸는지 판단 정보). 행 우측 정렬. */
.league_sidebar .side_tree .snb_sp_cnt {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--app-bg-panel-3);
    color: var(--app-text-muted);
    font-size: 11px;
}

.league_sidebar .side_tree .snb_sp_group.active .snb_sp_cnt {
    background: rgba(29, 185, 84, .18);
    color: var(--app-primary-light);
}

/* ============================================================
   AT-3 · PC 헤더 2행 — 처음부터 --app-* 토큰만 사용(톤다운 부작용 0).
   Row1 = 마퀴(좌·신축) + 액션(우) / Row2 = 사용자·메일·잔액·포인트·통화(우측 정렬).
   ⚠️ .pc_header 자체(position:sticky;top:0 · width:100%)는 partner.css 정본 — 여기서 재정의 금지.
   ⚠️ 표시/숨김 경계(≤1024 → mobile_header)도 partner.css 소관 — 무접촉.
   ============================================================ */
/* CEO-DEDUP · hdr_row/hdr_row0 중복 정리(hdr_logo 와 동일 방식 — 덮여 죽은 선언만 제거·적용값 무변).
   .hdr_row 소비 실물 = row0·gnb 2곳뿐(실측). gap/padding/background 는 두 곳 모두 후속 회차가 덮어 사망분 제거.
   row0 최종 적용치: §H①(패딩 0 14·투명 배경·보더 0·gap 14) + CEO-1c(grid-row 1·col 2) + CEO-1e(height 84). */
.pc_header .hdr_row {
    display: flex;
    align-items: center;
}

/* (CEO-DEDUP · 구 CJ §A-1 Row0 기저 블록(height 64·패널 배경·하단 보더) 삭제 — §H①·CEO-1e 에 전량 덮여 사망) */

/* CEO-DEDUP · hdr_logo 중복 정리 — 회차마다 쌓인 동일 셀렉터 6벌에서 **덮여 죽은 선언만 제거**(적용값 무변).
   최종 적용치: 본체 = CEO-1b(폭 300·center·bg none) + CEO-1c(grid-row/col) + CEO-1e(height 84) /
   img = width:auto·display:block(여기) + max-height 80px(CEO-1e — 정본 위치 유지). */
.pc_header .hdr_logo {
    text-decoration: none;
}

.pc_header .hdr_logo img {
    width: auto;
    display: block;
}

/* (CEO-DEDUP · 구 .hdr_row1/.hdr_row2 블록 삭제 — CJ-2 Row0 재구성으로 마크업 소멸(전 razor grep 매칭 0 실측).
   ⚠️ 파트너 행 클래스 .hdr_row2_pnav 는 별개 — 무접촉.) */

/* ==========================================================================
   AT · 헤더 한줄공지 티커. 구 `.hdr_marquee`(정적 ellipsis) 대체.
   ⚠️ 흐름 미동작 원인 = **애니메이션 미구현**(구 규칙에 animation 선언도 @keyframes 도 없었음).
      이름만 marquee 였고 실제 구현은 한 줄 말줄임이었다.
   ⚠️ `<marquee>` 태그 미사용(비표준·폐기 예정) — transform 애니메이션.
   ⚠️ 스크롤바 절대 노출 금지 → overflow:hidden 만(overflow-x:auto 금지).
   duration 은 JS(appNoticeTicker)가 `한 벌 폭 ÷ 60px/s` 로 넣는다 — 여기 고정값을 두지 않는다.
   ========================================================================== */
.pc_header .hdr_notice {
    min-width: 0;          /* ⚠️ 없으면 flex 자식이 줄지 않아 우측 액션이 밀려 나간다 */
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

/* 좌측 고정 라벨 — 흐르지 않는다. 문구는 하드코딩(설정화 금지 — 이번 범위 밖). */
.pc_header .hdr_notice_tag {
    flex: none;
    gap: 5px;
    border-right: 1px solid var(--app-border);
    color: var(--app-warning);
    font-weight: 700;
    white-space: nowrap;
}

.pc_header .hdr_notice_tag::before {
    /* ▲ */
    font-size: 9px;
    transform: translateY(-1px);
}

.pc_header .hdr_notice_vp {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;      /* 스크롤바 0 */
    position: relative;
    height: 100%;
}

.pc_header .hdr_notice_track {
    /* 지시(흐름 보장) · 절대배치 — 트랙이 아무리 길어도 레이아웃(필 폭)에 영향 0(침범 원천 차단).
       기준 = .hdr_notice_vp(position:relative · overflow:hidden). 절대배치 폭 = 내용 폭(nowrap)이라
       JS 의 scrollWidth 실측·translate -50% 산식은 그대로 유효하다. */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    will-change: transform;
    /* 지시(흐름 보장) · 30s = **폴백 duration**. 구 축약형은 duration 생략 = 0s 라서
       JS(appNoticeTicker) 주입이 실패·지연되면 애니메이션이 정지해 "긴 공지 확인 불가"가 됐다(실사고).
       JS 가 뜨면 실측값(한 벌 폭 ÷ 60px/s)으로 이 값을 덮어쓴다. */
    animation: hdrTicker 30s linear infinite;
}

/* 읽는 도중 지나가버리지 않게 — 마우스 오버 시 정지. */
.pc_header .hdr_notice_vp:hover .hdr_notice_track { animation-play-state: paused; }

/* 두 벌 복제 + -50% = 끊김 없는 순환(한 벌 -100% 방식은 매 바퀴 빈 구간이 생긴다). */
@keyframes hdrTicker {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.pc_header .hdr_notice_seg {
    padding-right: 60px;   /* 반복 사이 간격 */
    color: var(--app-text-muted);
    font-size: 12px;
}

/* [[ ]] 강조 — 본문에서 치환된 span. */
.pc_header .hdr_notice_seg .hl { color: var(--app-warning); font-weight: 700; }

/* 우측 페이드 — 글자가 잘리는 지점 완화(AG GNB 페이드 관용구와 동일 계열). */
.pc_header .hdr_notice_vp::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to left, var(--app-bg-panel) 0%, rgba(0, 0, 0, 0) 100%);
}

/* NOTICE_AUTO=false — 흐르지 않고 한 줄 고정 + 말줄임. 스크롤바 0.
   ⚠️ 흐름용 절대배치·최소폭은 여기서 해제(고정 모드는 vp 폭에 맞춘 말줄임이 정본). */
.pc_header .hdr_notice.is_static .hdr_notice_track {
    animation: none;
    position: static;
    min-width: 0;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc_header .hdr_notice.is_static .hdr_notice_seg { padding-right: 0; }
.pc_header .hdr_notice.is_static .hdr_notice_vp::after { display: none; }

/* (지시로 폐기) reduced-motion 정지 분기 — "PC 만 안 흐른다"의 마지막 원인.
   원격데스크톱·Windows Server 는 OS "애니메이션 표시"가 기본 OFF 라 브라우저가
   prefers-reduced-motion: reduce 를 보고하고, 이 블록이 **PC 헤더 트랙만** animation:none 으로
   죽여 왔다(모바일 홈 티커에는 이 분기가 없어 흐름 — 증상 그대로).
   공지 흐름은 요구사항이므로 reduce 에서도 유지한다 — 접근성 대안이 필요해지면
   duration 상향(감속)으로 대응하고 정지는 쓰지 않는다. */

/* A · 공지가 비어 마퀴가 미렌더될 때도 액션군은 우측 고정(마퀴 존재 여부와 무관). */
.pc_header .hdr_actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* 배치2 C-3 · 퀵버튼 4종 — 주 액션(충전 녹/환전 적/고객센터 청 = 채운 배경)과 구분되게
   **투명 배경 + 테두리**. 아이콘 + 작은 라벨, 기본 보조 텍스트색 · hover 브랜드색. 하드코딩 색 0. */
.pc_header .hdr_quicks {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}

.pc_header .hdr_quick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--app-border-soft);
    border-radius: 4px;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.pc_header .hdr_quick svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; display: block; }

.pc_header .hdr_quick:hover {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

/* 추가지시 · 구 `.m_quicks`/`.m_quick`(모바일 아이콘 4개) 규칙 제거 — 마크업이 🎁 드롭다운으로 교체돼
   소비처가 0이 됐다. 🎁 스타일 정본은 partner.css(.gift_dd_* · .m_header_right .gift_dd_btn). */

/* 결정 B · 1279.98 이하에서 PC 퀵버튼 라벨 숨김(아이콘만).
   경계 1279.98 = 기존 값 재사용(신규 브레이크포인트 0). 라벨 4개 ≈178px 회수 → 마퀴 폭 확보.
   ≤1024 는 pc_header 자체가 숨겨지므로 이 규칙과 무관(3티어: ≥1280 라벨 4버튼 / 1025~1279.98 아이콘 4버튼 / ≤1024 🎁). */
@media (max-width: 1279.98px) {
    .pc_header .hdr_quick_lb { display: none; }
    .pc_header .hdr_quick { width: 26px; padding: 0; justify-content: center; }
}

/* 🔴 CJ-4 반영 · AT §5 「≤1399.98 공지 숨김」 **폐기**.
   [구 규칙 — 경위 보존]
     `@media (max-width:1399.98px) { .pc_header .hdr_notice { display:none } }`
     근거는 "AG 2단 헤더에 공지가 들어가면 **3행**이 되어 헤더가 과도하게 두꺼워진다" 였다.
   [폐기 사유]
     CJ-3 §J-2 로 헤더가 **2행 고정**이 되고 공지 티커는 Row0 의 고유 자리(로고 우측)를 갖는다.
     행이 늘어날 여지가 없어져 구 근거가 소멸했다. 규칙만 남아 **1400px 미만 화면에서 티커가 통째로
     사라지는** 증상이 됐다(CJ-4 "티커 부재" 지적의 실체 — 데이터는 정상이었다).
   ⚠️ 별도 하한은 두지 않는다: `.pc_header` 자체가 ≤1024 에서 display:none 이라 모바일 노출은 원천 차단된다. */

/* 버튼 공통 */
.pc_header .hdr_btn {
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--app-border-soft);
    border-radius: 4px;
    background: var(--app-bg-panel-3);
    color: var(--app-text-secondary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.pc_header .hdr_btn:hover { color: var(--app-text-primary); }
.pc_header .hdr_btn[disabled] { opacity: .6; cursor: default; }

.pc_header .hdr_btn_charge { background: var(--app-success); border-color: var(--app-success); color: #fff; }
.pc_header .hdr_btn_exchange { background: var(--app-error); border-color: var(--app-error); color: #fff; }
.pc_header .hdr_btn_support { background: var(--app-info); border-color: var(--app-info); color: #fff; }
.pc_header .hdr_btn_partner { background: var(--app-info); border-color: var(--app-info); color: #fff; width: 26px; padding: 0; }
/* AX · 파트너 경로에서 P 자리를 대체하는 홈 버튼.
   색 = --app-primary(브랜드 골드). 근거: 충전 --app-success(녹) / 환전 --app-error(적) /
   고객센터·P --app-info(청) 과 전부 갈리고, --app-primary 를 쓰는 로그인·회원가입 버튼은
   비로그인 상태에서만 렌더돼 이 버튼(로그인 상태 전용)과 헤더에서 절대 공존하지 않는다.
   ⚠️ width/height 는 .hdr_btn_partner 와 동일한 26px 고정 — P(텍스트)와 홈(SVG)이 같은 크기라
      상태가 바뀌어도 헤더 우측 배치가 흔들리지 않는다. */
.pc_header .hdr_btn_home {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #04180c;
    width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pc_header .hdr_btn_home svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.pc_header .hdr_btn_login { background: var(--app-primary); border-color: var(--app-primary); color: #04180c; }
.pc_header .hdr_btn_signup { background: transparent; border-color: var(--app-primary); color: var(--app-primary-light); }

/* 헤더 인라인 로그인(USE_LOGIN_DOOR=2) — 지시 · 입력 다크 톤.
   (기존에 이 클래스의 스타일 선언이 전무해 브라우저 기본 흰 입력으로 떠 있었다 — 정정.) */
.pc_header .app-header-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pc_header .app-header-login-input {
    width: 120px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    background: var(--app-bg);
    color: var(--app-text-primary);
    font-size: 12.5px;
}

.pc_header .app-header-login-input::placeholder { color: var(--app-text-dim); }

/* Row2 — 사용자 / 잔액
   B · 수직 정렬 수리. 원인 = 구 `align-items: baseline`.
     각 그룹(.hdr_user·.hdr_bal)은 inline-flex 박스이고 내부에 12px 라벨과 13px/800 값이 섞여 있어
     baseline 정렬이 **그룹마다 다른 높이의 박스**를 만든다. 바깥 .hdr_row(align-items:center)는 그 박스를
     높이 기준으로 중앙 정렬하므로, 박스 높이가 다르면 안의 글자 baseline 이 그룹마다 어긋난다.
     → 내부도 center 로 통일 + 모든 그룹에 동일한 line-height/height 를 주어 박스 높이를 일치시킨다.
     메일(SVG 버튼)·⇄ 도 같은 26px 박스로 맞춘다. */
.pc_header .hdr_user,
.pc_header .hdr_bal {
    display: inline-flex;
    align-items: center;
    height: 26px;          /* 메일 버튼(26px)과 동일 — 행 안에서 모든 항목이 같은 높이 박스 */
    line-height: 1;
    gap: 4px;
    font-size: 12px;
    color: var(--app-text-muted);
    white-space: nowrap;
}

/* 자식 span 도 line-height 를 상속받아 위아래로 삐져나오지 않게(폰트 메트릭 차 흡수). */
.pc_header .hdr_user > *,
.pc_header .hdr_bal > * {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.pc_header .hdr_nick { color: var(--app-text-primary); font-weight: 700; }
.pc_header .hdr_uid { color: var(--app-text-dim); }
.pc_header .hdr_bal_val { color: var(--app-primary-light); font-weight: 800; font-size: 13px; }
.pc_header .hdr_point_val { cursor: pointer; }
.pc_header .hdr_bal_unit { color: var(--app-text-muted); }

/* 메일 — 미읽음 배지 앵커(배지 자체 스타일은 기존 .app-msg-badge 정본 재사용) */
.pc_header .hdr_mail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--app-text-secondary);
    cursor: pointer;
}

.pc_header .hdr_mail svg { width: 18px; height: 18px; fill: currentColor; }
.pc_header .hdr_mail:hover { color: var(--app-primary-light); }

/* B · ⇄ 도 26px 정사각 inline-flex 박스로 — 인접 텍스트와 중앙 맞춤(구 vertical-align 의존 제거). */
.pc_header .hdr_swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--app-text-secondary);
    cursor: pointer;
    padding: 0;
}

.pc_header .hdr_swap svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.pc_header .hdr_swap:hover { color: var(--app-primary-light); }

.pc_header .hdr_cur { height: 24px; align-self: center; }

/* ============================================================
   BV · 포인트 전환 위젯 s2 색 오버라이드(패널 파일은 s1=s2 동일 — 사이트 색 축만 여기서)
   ④ 위젯 글자 = s2 테마 텍스트 변수(어두운 배경 대비 흰 글씨 축 — 하드코딩 0)
   ② 보유머니·포인트 값 = s2 헤더 잔액 축(.pc_header .hdr_bal_val 과 같은 변수) —
      패널 공통 마크업의 .highlight_val(s1 축)을 s2 헤더 변수로 재지정(값 복제 0)
   ============================================================ */
.pt_widget { color: var(--app-text-primary); }
.pt_widget .highlight_val { color: var(--app-primary-light); }

/* ============================================================================
   CJ-2 — front.s3 스킨 (§H 홈헤더 / §I 좌측 메뉴)
   색·질감 = 트리벳 톤(검정 + 골드 라인 + 로고부 다크그린 radial). 구성만 BOSS 차용.
   ⚠️ 데이터·라우팅·게이트 무접촉 — 순수 스킨 계층이다.
   ⚠️ 기존 클래스를 최대한 재사용하고, 신설 이름도 기존 관용구(hdr_* / side_*)만 쓴다.
   ============================================================================ */

/* ── §H③ · 헤더 배경 = 검정 + 하단 골드 라인 ── */

/* ── §H① · Row0 = 로고 | 공지 티커 | 유틸 링크 줄 ──
   (CEO-DEDUP · height 56px 삭제 — CEO-1e 84px 에 덮여 사망. 높이 축 정본은 CEO-1e 로 이동) */
.pc_header .hdr_row0 {
    padding: 0 14px;
    background: transparent;   /* 헤더 자체 검정 위에 얹는다 */
    border-bottom: 0;
    gap: 14px;
}

/* (CEO-DEDUP · 구 로고 다크그린 radial + 38px 블록 삭제 — CEO-1b `background:none`·CEO-1e 80px 에 전량 덮여 사망) */

/* 공지 티커 — 경고 아이콘 라벨(구 "공지사항" 텍스트 + 삼각 의사요소를 대체) */
.pc_header .hdr_notice_tag {
    padding-right: 10px;
    font-size: 14px;
}

/* 구 삼각 의사요소 해제 — FA 경고 아이콘과 겹쳐 두 개가 보인다. */
.pc_header .hdr_notice_tag::before { content: none; }

/* 공지 바 = 접기 토글(30px)과 같은 높이의 필 — 토글 바로 옆 고정 폭.
   지시 · 잔여 폭 전부(flex:1) → **상시 400px 고정**: 우측 유틸 구성(로그인/로그아웃)이 달라져도
   공지 폭이 늘었다 줄었다 하지 않는다(좁은 폭에서만 shrink 허용 — 0 1 400px).
   흐름(hdrTicker)·클릭 이동은 무접촉 — 여기는 껍데기 치수·질감만. */
.pc_header .hdr_notice {
    flex: 0 1 400px;
    height: 30px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
}

/* 아이콘(태그)과 본문 세로 기준 통일 — 둘 다 30px 필 안에서 flex 중앙·line-height 1 로 고정. */
.pc_header .hdr_notice_tag { display: inline-flex; align-items: center; line-height: 1; }

/* 마퀴 정규화 — 문구가 짧으면 두 벌이 나란히 보여 "반복 나열"로 읽힌다(실지적).
   트랙 최소폭 = 뷰포트의 두 벌(200%) + 각 벌 flex:1 0 auto(균등 성장) → 한 벌이 항상
   뷰포트 이상을 점유해 **한 벌씩 지나가는** 고전 마퀴가 된다. 문구가 길면 기존 그대로(내용 폭 우선).
   JS(appNoticeTicker) 산식(scrollWidth/2 ÷ 60px/s)도 그대로 유효 — 속도가 뷰포트 비례로 읽기 좋게 늘어난다. */
.pc_header .hdr_notice_track { min-width: 200%; }

.pc_header .hdr_notice_seg {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1;
}

/* 유틸 줄 — 구 `.hdr_actions`(버튼 나열)를 대체. 배치 규칙(우측 고정)은 동형 승계. */
.pc_header .hdr_utils {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.pc_header .hdr_util {
    position: relative;              /* 쪽지 미읽음 배지(.app-msg-badge) 기준점 */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--app-text-secondary);
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.pc_header .hdr_util i { font-size: 13px; color: var(--app-primary); }

.pc_header .hdr_util:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--app-text-primary);
}

/* 「메뉴」 드롭다운 — 개폐 관용구는 기존 gift_dd 계열과 동형. */
.pc_header .hdr_util_menu { position: relative; display: inline-flex; }

.pc_header .hdr_util_backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
}

.pc_header .hdr_util_dd {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1002;
    min-width: 132px;
    padding: 4px 0;
    background: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    box-shadow: var(--app-shadow-card);
}

.pc_header .hdr_util_dd a {
    display: block;
    padding: 8px 14px;
    color: var(--app-text-secondary);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.pc_header .hdr_util_dd a:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--app-primary);
}

/* ── §H② · 메뉴 행(구 상단 GNB 복원) ──
   (CEO-DEDUP · height 44px 삭제 — 정본은 CEO-1c 의 44px(후순위 동값). background:transparent 삭제 — CEO-1b #0b0b0b 에 덮여 사망) */
.pc_header .hdr_gnb {
    padding: 0 14px;
    gap: 0;
    overflow-x: auto;              /* 좁은 폭에서 잘리지 않게 — 세로는 고정 높이라 클리핑 없음 */
    scrollbar-width: none;
}

.pc_header .hdr_gnb::-webkit-scrollbar { display: none; }

.pc_header .hdr_gnb_item {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.pc_header .hdr_gnb_item:hover { color: var(--app-text-primary); }

/* 활성 표시 — 판정 클래스는 기존 MenuCls 산출물(active) 그대로. */
.pc_header .hdr_gnb_item.active {
    color: var(--app-primary);
    border-bottom-color: var(--app-primary);
}

/* 유틸 라벨 축소 — 기존 3티어 경계 재사용(신규 브레이크포인트 0).
   1279.98 = 퀵버튼 라벨 숨김과 같은 경계. 유틸도 같이 아이콘만 남긴다(우측 폭 회수). */
@media (max-width: 1279.98px) {
    .pc_header .hdr_util > span { display: none; }
    .pc_header .hdr_util { padding: 0 7px; }
}

/* ============================================================================
   §I · 좌측 메뉴 (BOSS 구성 차용 — 위→아래: 유저정보 / 3버튼 / 3열 그리드 / 배너 / 검색 / 스포츠)
   ⚠️ `.league_sidebar` 는 flex-column 이라 직속 자식은 전부 flex:0 0 auto 로 고정해야
      리그 트리만 늘어나고 나머지가 찌그러지지 않는다(기존 블록들과 같은 규칙).
   ============================================================================ */

/* ── §I⑥ · 유저 정보 블록(표시 전용) ── */
.league_sidebar .side_user {
    flex: 0 0 auto;
    margin: 10px 10px 0;
    padding: 10px 12px;
    background: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.league_sidebar .side_user_top {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.league_sidebar .side_user_nick {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--app-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league_sidebar .side_user_id { font-size: 11.5px; color: var(--app-text-muted); }

/* 접기 버튼은 카드 우측 끝 — 구 위치(3카드 블록 첫 제목)가 §I 재구성으로 사라져 여기로 이사했다. */
.league_sidebar .side_user_top .side_fold_collapse { margin-left: auto; }

.league_sidebar .side_user_row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0;
    font-size: 12.5px;
}

.league_sidebar .side_user_lb { flex: 0 0 auto; color: var(--app-text-muted); }
.league_sidebar .side_user_val { margin-left: auto; color: var(--app-text-primary); font-weight: 700; }
.league_sidebar .side_user_unit { flex: 0 0 auto; color: var(--app-text-muted); font-size: 11px; }

/* 비로그인 = 접기 버튼만 담는 얇은 줄(카드 장식 없음). */
.league_sidebar .side_user_anon {
    display: flex;
    justify-content: flex-end;
    padding: 6px 12px;
    background: transparent;
    border: 0;
}

/* ── §I① · 충전·환전·문의 3버튼 ──
   장식 프레임 이미지 에셋이 없어 CSS 근사(보더 + 그라디언트)만 한다 — 과한 재현 금지(지시서). */
.league_sidebar .side_act_btns {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;                 /* 캡처 — 3버튼도 그리드 칸처럼 맞붙는다(베벨 보더가 경계) */
    margin: 10px 10px 0;    /* 아래 addMenu-wrap 은 margin-top:0 으로 이 블록에 맞붙는다 */
}

.league_sidebar .side_act_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
}

.league_sidebar .side_act_btn i { color: var(--app-primary); }


/* ── §I② · 메뉴 3열 그리드 ──
   CJ-1 에서는 모바일 전용이었으나 CJ-2 로 좌측 열 정본이 됐다(PC 노출).
   기본 규격은 여기, 모바일 전용 보정은 mobile.css. */
.league_sidebar .addMenu-wrap {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 10px 10px 0;
    padding: 0;
    /* gap 이 비쳐 구분선이 된다 */
    overflow: hidden;
}

.league_sidebar .addMenu-wrap > a {
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
}

.league_sidebar .addMenu-wrap.w600 > a { font-weight: 600; }


/* ── §I③ · 배너 (카지노·슬롯 1/2 + 홀덤형 와이드) ──
   이미지 에셋 부재 → CSS 플레이스홀더. 자산 도착 시 `.side_bn_ph` 를 img 로 교체(3곳). */
.league_sidebar .side_banners {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 10px 10px 0;
}

.league_sidebar .side_bn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    text-decoration: none;
    overflow: hidden;
}


.league_sidebar .side_bn_wide {
    grid-column: 1 / -1;
    height: 54px;
    background: linear-gradient(135deg, #2a2113 0%, #0d0a05 100%);
}

/* 링크가 없는 배너(홀덤 — 라우트 미확정)는 클릭 가능처럼 보이지 않게 한다. */
.league_sidebar .side_bn.is_static { cursor: default; }

.league_sidebar .side_bn_ph {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--app-primary);
    opacity: .85;
}

.league_sidebar .side_bn:hover .side_bn_ph { opacity: 1; }

/* CJ-2 · 사이드바 접힘(56px · html.sb_folded = 파트너 경로) 대응.
   구 접힘 규칙은 숨김 대상으로 `.side_menu_block_ttl / .side_menu_label / .side_tree ...` 를 열거했는데,
   §I 재구성으로 그 마크업이 사라지고 새 블록(유저카드·3버튼·3열 그리드·배너)이 들어왔다.
   빠뜨리면 56px 폭에 이 블록들이 그대로 눌려 들어가 좌측이 깨진다 → 접힘 시 전부 감춘다.
   ⚠️ 스코프는 기존 접힘 규칙과 같은 (min-width:1350px) — 그 아래에서는 사이드바가 드로어/일반이라
      여기서 감추면 파트너 모바일 드로어의 메뉴가 통째로 사라진다. */
@media (min-width: 1430px) {
    html.sb_folded .page_shell .league_sidebar .side_user,
    html.sb_folded .page_shell .league_sidebar .side_act_btns,
    html.sb_folded .page_shell .league_sidebar .addMenu-wrap,
    html.sb_folded .page_shell .league_sidebar .side_banners {
        display: none;
    }
}

/* ============================================================================
   CJ-2 진단 ③ · 게이트 대기 화면(.app-door-gate)
   구 마크업은 빈 div 라 판정 실패 시 단서 0의 검은 화면이 됐다(CJ-2 실사고).
   최소 안내를 넣되 **정상 로드에서는 보이지 않아야** 하므로 6초 지연 후에만 드러낸다.
   ⚠️ 지연은 CSS 애니메이션으로만 — C# 타이머/상태/재렌더를 추가하면 게이트 판정 축에 손대게 된다.
   ============================================================================ */
.app-door-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-bg-root);
}

.app-door-gate-msg {
    text-align: center;
    color: var(--app-text-secondary);
    opacity: 0;                     /* 기본 비노출 — 아래 애니메이션이 6초 뒤에만 드러낸다 */
    animation: appDoorGateHint 0s linear 6s forwards;
}

@keyframes appDoorGateHint { to { opacity: 1; } }

.app-door-gate-ttl { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--app-text-primary); }
.app-door-gate-sub { margin: 0 0 14px; font-size: 13px; }

.app-door-gate-btn {
    padding: 9px 22px;
    border: 1px solid var(--app-primary);
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.app-door-gate-btn:hover { background: var(--app-primary); color: #062421; }

/* ============================================================================
   CJ-3 — s3 헤더 2행 재구성(§J) · 좌측 K8 문법(§K) · 좌측바 접기(§L)
   벤치마크: 헤더=트리벳(티커·유틸)+판도라(HOT 배지) / 좌측=K8 구성·질감, 색은 s3 골드·다크 유지.
   ⚠️ 데이터·라우팅·게이트 무접촉 — 표시 계층만.
   ============================================================================ */

/* ── §J-1 · attgd 폰트 ──
   ⚠️ 배치 경로 정정: 지시서는 `/Lib/font/` 를 "관례"로 적었으나 s3 실물 관례는 `wwwroot/fonts/`
      (A2Z·Arita 전부 그 폴더). 새 폴더를 만들지 않고 기존 관례를 따랐다.
   ⚠️ eot·ttf 미제공 → woff 단독 선언. 파일 도착 시 src 에 이어 붙이면 된다. */
@font-face {
    font-family: attgd;
    src: url(/fonts/aTITGD1R.woff) format('woff');
    font-display: swap;   /* 로드 실패·지연 시 폴백으로 자연스럽게 넘어간다 */
}

/* 헤더 폰트 스택 — 폰트가 없으면 sc-medium → 맑은 고딕 → 돋움으로 자연 폴백. */
.pc_header {
    font-family: attgd, sc-medium, "Malgun Gothic", dotum, sans-serif;
    /* §J-2 · 로고 2행 세로 걸침 = 2열 그리드(1열 로고 / 2열 위 row0 · 아래 메뉴 행) */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
}

/* ── §J-2 · 로고 정렬(CEO-DEDUP 트림 — 2행 걸침·후광·62px 등은 CEO-1b/1c/1e 에 덮여 사망분 제거) ── */
.pc_header .hdr_logo {
    display: flex;
    align-items: center;
}

/* (CEO-DEDUP · 구 §J-2 행 높이(row0 52·gnb 48) 삭제 — CEO-1e 84·CEO-1c 44 에 덮여 사망) */

/* ── §L-1 · 좌측바 접기 토글(공지 티커 왼쪽) ── */
.pc_header .hdr_side_toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.pc_header .hdr_side_toggle:hover { color: var(--app-primary); border-color: var(--app-primary); }

/* ── §J-3 · 유틸 13항목 + HOT 배지 4 ── */
.pc_header .hdr_util { font-size: 12.5px; }

/* HOT 배지 — 판도라 캡처 문법(빨간 필). 정적 표시이며 운영 토글은 후속 회차. */
.pc_header .hdr_util.is_hot { padding-right: 30px; }

.pc_header .hdr_hot {
    position: absolute;
    top: 1px;
    right: 2px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #d0021b;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: .02em;
}

/* 로그아웃 = 아이콘만(라벨 없음) — 폭이 상태에 따라 흔들리지 않게 고정. */
.pc_header .hdr_util_logout { width: 32px; padding: 0; justify-content: center; }
.pc_header .hdr_util_logout i { font-size: 14px; }

/* ── §J-1/§J-2 · 메뉴 행 절대배치 기준점(우측 「회원정보 +」·userbox 를 흐름 밖에 두는 축) ──
   (CEO-DEDUP · justify-content:center 삭제 — CEO-1e 동값 재선언에 덮여 사망. 정렬 정본은 CEO-1e) */
.pc_header .hdr_gnb {
    position: relative;
}

.pc_header .hdr_gnb_items {
    display: inline-flex;
    align-items: center;
    height: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    /* 지시 — 메뉴 중앙 기준 = 행(로고 우측)이 아니라 **사이트 전폭**.
       행은 로고(300px 고정) 뒤에서 시작하므로 flex 중앙에서 로고 폭 절반만큼 좌로 당기면 전폭 중앙이 된다.
       ⚠️ 로고를 덮을 수 있는 구조(지시 승인) — 좁은 폭에서는 메뉴 좌단이 로고 쪽으로 파고든다. */
}

.pc_header .hdr_gnb_items::-webkit-scrollbar { display: none; }

/* §J-1 · 캡처 비율 기준 상향(구 13.5px → 16px). 이 행이 헤더 폰트 크기의 기준이다. */
.pc_header .hdr_gnb_item { letter-spacing: -.02em; }

.pc_header .hdr_myinfo {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-text-secondary);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.pc_header .hdr_myinfo b { color: var(--app-primary); }
.pc_header .hdr_myinfo:hover { color: var(--app-primary); }

/* 회원정보 클러스터(메뉴 행 우측) — s2 Row2 우측 문법 승계분(닉네임·P·쪽지·보유머니·포인트·⇄).
   각 항목 박스(inline-flex·26px·닉/값 강조·메일·⇄)는 위 AT-3 정본 재사용, 여기서는 **배치만**:
   중앙 메뉴 흐름 밖 우측 고정(hdr_myinfo 와 같은 절대배치 관용구 — flex 로 두면 메뉴 중앙이 밀린다). */
.pc_header .hdr_gnb .hdr_userbox {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* 파트너 경로에서는 이 행이 파트너 GNB 자리가 된다(구 Row2 에서 이사) — 좌측 정렬. */
.pc_header .hdr_gnb.hdr_row2_pnav { justify-content: flex-start; }

/* ============================================================================
   §K · 좌측 사이드바 — K8 문법 재스킨
   ============================================================================ */

/* ── §K-1 · 회원정보 = 메달(좌) + 정보(우) ── */
.league_sidebar .side_user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.league_sidebar .side_user_medal {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.league_sidebar .side_user_medal img { max-width: 100%; max-height: 100%; }

.league_sidebar .side_user_body { flex: 1 1 auto; min-width: 0; }

/* ── 지시 · 비로그인 side_user = 인라인 로그인 폼 ──
   구조: [아이디/비밀번호 세로 2줄] + [우측 2줄 높이 로그인 버튼]. 카드 껍데기(배경·패딩·마진)는
   .side_user 정본 그대로 재사용 — 여기는 내부 배치와 다크 입력 톤만. */
.league_sidebar .side_login { align-items: stretch; }

.league_sidebar .side_login_inputs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.league_sidebar .side_login_input {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    background: var(--app-bg);          /* 지시 — 검정 사이트 배경에 맞춘 어두운 입력 */
    color: var(--app-text-primary);
    font-size: 12.5px;
}

.league_sidebar .side_login_input::placeholder { color: var(--app-text-dim); }

.league_sidebar .side_login_btn {
    flex: 0 0 76px;
    align-self: stretch;               /* 입력 2줄 높이만큼 세로로 꽉 찬다(지시 "줄바꿈만큼") */
    border: 1px solid var(--app-primary);
    border-radius: 4px;
    background: var(--app-primary-grad);
    color: #04180c;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

.league_sidebar .side_login_btn[disabled] { opacity: .6; cursor: default; }

/* ── §K-2 · 충전·환전·문의 = K8 카드형(사각·아이콘 상단·활성 강조 보더) ──
   CJ-2 의 라운드 버튼을 각지게 바꾸고 베벨 명암을 얹는다(§K-3 과 같은 질감 축). */
.league_sidebar .side_act_btn {
    /* §K-3 의 `.inv` 변형 보더값을 이 카드에 쓴다(더 깊은 베벨 = 상단 버튼군 강조).
       원본의 #a30000 적색 베이스는 지시서대로 미사용 — s3 다크 베이스 + 방향별 명암만. */
    border-color: #ffffff14 #0000002e #0000008c #ffffff12;
    /* 배경 = 지시 지정 리터럴(다크그린 그라디언트 · !important 포함 지시 원문 그대로). */
    /* CEO-1d · 구 그린 그라디언트(!important) 삭제 — 3버튼 배경은 그릇(.side_act_btns) 골드 1벌 · 칸은 투명. */
}

.league_sidebar .side_act_btn:hover {
    border-color: var(--app-primary);
}

/* ── §K-3 · 메뉴 그리드 베벨 보더(PM 지정 CSS) ──
   ⚠️ 셀렉터 정정: 지시서 원본은 `.addMenu-wrap > i`(K8 은 goMainMenu JS 를 물린 <i> 였다).
      s3 는 **실 anchor**(AQ1 관례 — 새 탭·SPA 이동 보존)라 `> a` 로 바인딩한다.
      선언값(높이·색·보더 방향별 명암·자간·크기)은 지시서 지정값 그대로. */
.league_sidebar .addMenu-wrap {
    gap: 0;                 /* 베벨 보더가 칸 경계를 만든다 — gap 배경 구분선 폐기 */
    margin-top: 0;          /* 위 3버튼(side_act_btns)과 맞붙인다(캡처 — 버튼군·그리드가 한 덩어리) */
    background: transparent;
    border: 0;
    border-radius: 0;
}

.league_sidebar .addMenu-wrap > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-style: normal;
    color: #fff;
    cursor: pointer;
    border: solid 1px;
    border-color: #ffffff33 #00000033 #00000033 #ffffff33;
    letter-spacing: -.5px;
    /* 캡처 서체 정합 — 헤더와 같은 attgd 스택 + 크기 상향(13 → 15). */
    font-family: attgd, sc-medium, "Malgun Gothic", dotum, sans-serif;
    font-size: 15px;
    background: #16161b;
}


/* ── §K-5 · 스크롤바 숨김(좌·우 사이드바 공통) — 스크롤 기능은 유지, 바만 비표시 ── */
.league_sidebar,
.cart_sidebar {
    scrollbar-width: none;      /* Firefox — 구 `thin` 대체 */
    -ms-overflow-style: none;   /* 구 Edge/IE */
}

.league_sidebar::-webkit-scrollbar,
.cart_sidebar::-webkit-scrollbar,
.league_sidebar::-webkit-scrollbar-thumb,
.cart_sidebar::-webkit-scrollbar-thumb,
.league_sidebar::-webkit-scrollbar-track,
.cart_sidebar::-webkit-scrollbar-track {
    display: none;
    width: 0;
    height: 0;
}

/* ============================================================================
   §L · 좌측바 접기 — 열 자체를 접고 메인이 그만큼 넓어진다
   ⚠️ ≥1025 한정. ≤1024 에서 `.league_sidebar` 는 off-canvas 드로어(position:fixed)라
      여기서 폭을 0 으로 만들면 햄버거 드로어가 열리지 않는다(§L "모바일 무영향").
   ⚠️ 우측 열(.cart_sidebar)은 flex:none 260 이라 좌측이 접혀도 위치·폭 불변(§L-3).
   ============================================================================ */
@media (min-width: 1025px) {
    .page_shell.side_hidden > .league_sidebar {
        width: 0;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* 폭 전환은 기존 `.league_sidebar { transition: width .22s ease }` 축을 그대로 쓰고
       사라짐만 얹는다(신규 트랜지션 축 0). */
    .page_shell.side_hidden > .league_sidebar { transition: width .22s ease, opacity .18s ease; }

    /* 접힘 중에는 아이콘 레일도 나오지 않게 한다(4단 페이지 F2 레일과 겹침 방지). */
    .page_shell.side_hidden .side_rail,
    .page_shell.side_hidden .side_rail_backdrop { display: none; }
}

/* ── §L-2b · 접힘 알림 레일(.side_peek) — "메뉴가 숨어 있다" 표시 + 재펼침 진입점 ──
   마크업은 접힘 상태에서만 렌더(MainLayout @if(_sideHidden)) — 기본 숨김은 ≤1024 방어(드로어 축과 분리).
   셸의 첫 flex 아이템으로 얇은 세로 띠가 되고, sticky 로 뷰포트 세로 중앙에 ❯ 가 온다
   (.league_sidebar 와 같은 sticky 기준선 = --app-hdr-h). */
.side_peek { display: none; }

@media (min-width: 1025px) {
    .page_shell.side_hidden > .side_peek {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 18px;
        position: sticky;
        top: var(--app-hdr-h, 0px);
        height: calc(100vh - var(--app-hdr-h, 0px));
        padding: 0;
        border: 0;
        border-right: 1px solid var(--app-border);
        background: var(--app-bg-panel);
        color: var(--app-primary);
        font-size: 12px;
        cursor: pointer;
    }

    .page_shell.side_hidden > .side_peek:hover {
        background: var(--app-bg-panel-2);
        color: var(--app-primary-light);
    }

    /* 지시 · 파트너 변형 — 파트너 화면은 흰 바탕이라 레일도 화이트 톤. */
    .page_shell.side_hidden > .side_peek.side_peek_partner {
        background: #fff;
        border-right: 1px solid #e2e2e6;
        color: #1976d2;   /* 파트너 포인트(P 버튼 청색 축) */
    }

    .page_shell.side_hidden > .side_peek.side_peek_partner:hover {
        background: #f3f4f6;
        color: #125a9e;
    }
}

/* ============================================================================
   CJ-4b — s3 홈 구성 · 열 폭 300 · 푸터 · 다듬기
   ⚠️ 데이터·라우팅 무접촉. 열 폭 변경에 딸린 4단 경계 재산정은 sports.css 쪽에서 처리했다
      (산식 무변경 · 260 → 300 대입).
   ============================================================================ */

/* (CEO-DEDUP · 구 ⑤ 로고 열 300 동기 규칙 삭제 — CEO-1b 가 width/min-width 300 을 다시 선언해 중복.
   "-150px 중앙 산식" 전제도 CEO-1e 의 transform:none 으로 폐기됨) */

/* ── ⑦ · 충전·환전·문의 = 아이콘 + 라벨 **한 줄 인라인** ──
   CJ-3 의 세로 스택(flex-direction:column)을 정정한다. 아이콘과 라벨 사이 간격은 마크업의 &nbsp; 가 만든다. */
.league_sidebar .side_act_btn {
    flex-direction: row;
    gap: 0;
    height: 44px;
    /* 캡처 서체 정합 — 아래 addMenu 그리드와 같은 attgd 스택·크기(한 덩어리로 보이게). */
    font-family: attgd, sc-medium, "Malgun Gothic", dotum, sans-serif;
white-space: nowrap;
}

.league_sidebar .side_act_btn i { font-size: 12px; }
.league_sidebar nav a {
    font-size: 12px !important;
    font-weight:500 !important;
}
/* ============================================================================
   ①② · 홈 메뉴 이미지 타일 — PC 5열(378×574) / 모바일 2열×3행(380×200)
   두 벌을 렌더하고 여기서 하나만 노출한다(항목 구성이 달라 하나로 접을 수 없음).
   경계 900 = 홈 콘텐츠 그리드의 기존 컷 재사용(신규 브레이크포인트 0).
   ============================================================================ */
.home_cat_mo {
    display: none;
}

.home_cat_grid.home_cat_pc { grid-template-columns: repeat(5, 1fr); gap: 12px; }

/* 이미지 원본 비율 그대로(세로형) — 구 234/164 가로형 비율을 덮는다. */
.home_cat_pc .home_cat_card { aspect-ratio: 378 / 574; }

@media (max-width: 900px) {
    .home_cat_pc { display: none; }
    .home_cat_mo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .home_cat_mo .home_cat_card { aspect-ratio: 380 / 200; }
}

/* ============================================================================
   ③ · 공지·이벤트 패널 헤더 = 브랜드 그라디언트 바(50px)
   ⚠️ PM 지정 "리터럴 그대로"였으나 이번 지시에 그라디언트 원문이 첨부되지 않아,
      사이트 브랜드 스톱(#57e389 → #128a3e — app-front.css `--app-primary-grad` 와 같은 축·그린 교체분)으로 적었다.
      원문 도착 시 아래 background 한 줄만 교체하면 된다.
   ⚠️ !important 는 지시서 지정 — CJ-2 에서 넣은 `.info_head` 규칙과 같은 특이도라 순서 의존을 없앤다.
   ============================================================================ */
.info_head {
    background: linear-gradient(180deg, #57e389 0%, #128a3e 100%) !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 0 0 20px !important;
}

/* 높이를 line-height 로 잡으므로 내부는 세로 가운데가 이미 맞는다.
   우측 「+ MORE」는 바 오른쪽 끝에 여백을 둔다(padding-right 가 0 이므로 여기서 준다). */
.info_head .info_more { margin-right: 16px; }

/* ============================================================================
   ④ · 공지·이벤트 리스트 = 5행 고정 높이
   행 높이 실측 = a 패딩 9+9 + 본문 라인 17 = 35px, + 행 구분선 1px = 36px → 5행 = 180px.
   글이 5개 미만이어도 이 높이를 유지해 두 패널이 같은 높이로 선다(빈 행 영역은 그대로 둔다).
   ⚠️ 조회 로직·노출 행수(PanelRows=5)는 무접촉 — CSS 로만 높이를 확보한다.
   ============================================================================ */
.hp_list { min-height: 180px; }

/* ── 지시 · 우측 열 내부 여백 — 좌측 사이드바(마진 10px 관용구)와 같은 인셋 ──
   카트·배너가 열 가장자리에 붙지 않게 aside 자체에 좌우 패딩을 준다(개별 자식 마진 대신 1곳).
   ⚠️ ≥1025 한정 — ≤1024 의 .cart_sidebar 는 off-canvas 드로어(별도 규격)라 무접촉.
   ⚠️ 가로 인셋의 단일 소스 = 이 패딩. right_banner_list 의 좌우 패딩은 0 으로 정리(sports.css — 이중 인셋 방지). */
@media (min-width: 1025px) {
    .cart_sidebar { padding: 0 10px 10px; }
}

/* ============================================================================
   ⑥ · 푸터(footer_area) — 메인 영역 아래
   지시 CSS 반영: 스프라이트 1장(1100×320 · 10열×110px · 칸 40px)에서 영역별 지정 —
   기본 = 흑백 행(-160 ~ -280) / hover = 컬러 행(0 ~ -120). 파일 실재 확인(/img/partner/footer_logos.webp).
   구조 셀렉터는 기존 마크업(.footer_area > ul.ft_logos > li.ft_logos_NN + p.ft_copyright)에 맞춰 스코프만
   보정(지시 원문의 .footer_logos ul li / .copyright 대응) — 선언값은 지시 그대로.
   ⚠️ 지시 원문의 @keyframes golden_effect_subtitle 은 소비처 0(붙여넣기 잔재로 판단) — 미적용.
   ============================================================================ */
.footer_area {
    width: 100%;
    padding: 20px 0;
    background: #171717;
    text-align: center;
}

.footer_area .ft_logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer_area .ft_logos > li {
    width: 110px;
    height: 40px;
    margin: 10px;
    background: url('/img/partner/footer_logos.webp') no-repeat;
    display: inline-block;
    transition: 0.1s;
    cursor: pointer;
}

.footer_area .ft_copyright {
    margin: 0;
    text-align: center;
    padding: 10px 0 0;
    color: #999;
    font-size: 12px;
    letter-spacing: .01em;
}

/* ── 스프라이트 좌표(지시 지정 리터럴 그대로 — 기본 = 흑백 행) ── */
li.ft_logos_01 { background-position: 0px -160px !important; }
li.ft_logos_02 { background-position: -110px -160px !important; }
.ft_logos_03 { background-position: -220px -160px !important; }
.ft_logos_04 { background-position: -330px -160px !important; }
.ft_logos_05 { background-position: -440px -160px !important; }
.ft_logos_06 { background-position: -550px -160px !important; }
.ft_logos_07 { background-position: -660px -160px !important; }
.ft_logos_08 { background-position: -770px -160px !important; }
.ft_logos_09 { background-position: -880px -160px !important; }
.ft_logos_10 { background-position: -990px -160px !important; }
.ft_logos_11 { background-position: 0px -200px !important; }
.ft_logos_12 { background-position: -110px -200px !important; }
.ft_logos_13 { background-position: -220px -200px !important; }
.ft_logos_14 { background-position: -330px -200px !important; }
.ft_logos_15 { background-position: -440px -200px !important; }
.ft_logos_16 { background-position: -550px -200px !important; }
.ft_logos_17 { background-position: -660px -200px !important; }
.ft_logos_18 { background-position: -770px -200px !important; }
.ft_logos_19 { background-position: -880px -200px !important; }
.ft_logos_20 { background-position: -990px -200px !important; }
.ft_logos_21 { background-position: 0px -240px !important; }
.ft_logos_22 { background-position: -110px -240px !important; }
.ft_logos_23 { background-position: -220px -240px !important; }
.ft_logos_24 { background-position: -330px -240px !important; }
.ft_logos_25 { background-position: -440px -240px !important; }
.ft_logos_26 { background-position: -550px -240px !important; }
.ft_logos_27 { background-position: -660px -240px !important; }
.ft_logos_28 { background-position: -770px -240px !important; }
.ft_logos_29 { background-position: -880px -240px !important; }
.ft_logos_30 { background-position: -990px -240px !important; }
.ft_logos_31 { background-position: 0px -280px !important; }
.ft_logos_32 { background-position: -110px -280px !important; }
.ft_logos_33 { background-position: -220px -280px !important; }
.ft_logos_34 { background-position: -330px -280px !important; }

/* ── hover = 컬러 행 ── */
.ft_logos_01:hover { background-position: 0px 0px !important; }
.ft_logos_02:hover { background-position: -110px 0px !important; }
.ft_logos_03:hover { background-position: -220px 0px !important; }
.ft_logos_04:hover { background-position: -330px 0px !important; }
.ft_logos_05:hover { background-position: -440px 0px !important; }
.ft_logos_06:hover { background-position: -550px 0px !important; }
.ft_logos_07:hover { background-position: -660px 0px !important; }
.ft_logos_08:hover { background-position: -770px 0px !important; }
.ft_logos_09:hover { background-position: -880px 0px !important; }
.ft_logos_10:hover { background-position: -990px 0px !important; }
.ft_logos_11:hover { background-position: 0px -40px !important; }
.ft_logos_12:hover { background-position: -110px -40px !important; }
.ft_logos_13:hover { background-position: -220px -40px !important; }
.ft_logos_14:hover { background-position: -330px -40px !important; }
.ft_logos_15:hover { background-position: -440px -40px !important; }
.ft_logos_16:hover { background-position: -550px -40px !important; }
.ft_logos_17:hover { background-position: -660px -40px !important; }
.ft_logos_18:hover { background-position: -770px -40px !important; }
.ft_logos_19:hover { background-position: -880px -40px !important; }
.ft_logos_20:hover { background-position: -990px -40px !important; }
.ft_logos_21:hover { background-position: 0px -80px !important; }
.ft_logos_22:hover { background-position: -110px -80px !important; }
.ft_logos_23:hover { background-position: -220px -80px !important; }
.ft_logos_24:hover { background-position: -330px -80px !important; }
.ft_logos_25:hover { background-position: -440px -80px !important; }
.ft_logos_26:hover { background-position: -550px -80px !important; }
.ft_logos_27:hover { background-position: -660px -80px !important; }
.ft_logos_28:hover { background-position: -770px -80px !important; }
.ft_logos_29:hover { background-position: -880px -80px !important; }
.ft_logos_30:hover { background-position: -990px -80px !important; }
.ft_logos_31:hover { background-position: 0px -120px !important; }
.ft_logos_32:hover { background-position: -110px -120px !important; }
.ft_logos_33:hover { background-position: -220px -120px !important; }
.ft_logos_34:hover { background-position: -330px -120px !important; }

/* ── 모바일 보정 ──
   스프라이트 칸은 고정 px 좌표라 **칸 크기(110×40)를 줄일 수 없다**(줄이려면 background-size 와 좌표 68개
   전부 재산정). 대신 여백을 줄여 좁은 폭에서 2~3칸/행으로 자연 래핑시킨다(375px 기준 3칸). */
@media (max-width: 1024px) {
    .footer_area { padding: 14px 0 18px; }
    .footer_area .ft_logos { justify-content: center; }
    .footer_area .ft_logos > li { margin: 6px 4px; }
}

/* (CEO-DEDUP · 구 CJ-4 로고 좌측 정렬 삭제 — CEO-1b 의 justify-content:center 가 다시 덮어 사망) */

/* 「회원정보 +」 제거로 메뉴 행 우측이 비었다 — 메뉴는 계속 행 가운데(기존 규칙 유지). */

/* CEO-1 · 좌측 배너 2종 = 이미지 실물(플레이스홀더 텍스트 폐기 · 홀덤 제외) */
.league_sidebar .side_bn_half { height: auto; aspect-ratio: 2 / 1; background: none; }
.league_sidebar .side_bn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CEO-1 · 모바일 헤더 아래 한줄공지(전 페이지) — s3 헤더 티커 규칙(.pc_header .hdr_notice_*)은 pc_header 스코프라 여기 별도 정의. */
.m_hdr_notice { display: none; }
@media (max-width: 1024px) {
    .m_hdr_notice {
        display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
        background: rgba(255, 255, 255, .05); border-bottom: 1px solid var(--app-border); overflow: hidden; cursor: pointer;
    }
    .m_hdr_notice .hdr_notice_tag { flex: none; display: inline-flex; align-items: center; color: var(--app-primary); font-size: 13px; line-height: 1; padding-right: 8px; border-right: 1px solid var(--app-border); }
    .m_hdr_notice .hdr_notice_vp { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; height: 100%; }
    .m_hdr_notice .hdr_notice_track { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; height: 100%; white-space: nowrap; will-change: transform; animation: hdrTicker 30s linear infinite; min-width: 200%; }
    .m_hdr_notice .hdr_notice_seg { flex: 1 0 auto; display: inline-flex; align-items: center; height: 100%; line-height: 1; padding-right: 60px; color: var(--app-text-muted); font-size: 12px; }
    .m_hdr_notice .hdr_notice_seg .hl { color: var(--app-warning); font-weight: 700; }
}

/* CEO-1 · 타일 규격 오버라이드 — 위 CJ-4b 규칙(.home_cat_pc .home_cat_card 378/574 · .home_cat_mo 2열 380/200)보다 뒤·구체성 높게. */
.home_cat_grid.home_cat_pc.ceo_tiles_pc { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.home_cat_pc.ceo_tiles_pc .home_cat_card.ceo_tile { aspect-ratio: 332 / 330; }
@media (max-width: 900px) {
    .home_cat_mo.ceo_tiles_mo { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .home_cat_mo.ceo_tiles_mo .home_cat_card.ceo_tile { aspect-ratio: 230 / 250; }
}

/* ==========================================================================
   CEO-1b · 헤더(캡쳐 1) — 로고 = 좌측 열(300px) 중앙 · 그린 후광 제거 · 메뉴 행 상단 골드 라인(로고가 그 선 위에 걸침) · PC 헤더 확대
   ========================================================================== */
.pc_header .hdr_logo {
    width: 300px;
    min-width: 300px;
    padding: 0;
    justify-content: center;
    background: none;                 /* 다크그린 radial 제거 */
}
/* (CEO-DEDUP · 구 img 84px·row0 height 64px·gnb height 52px 삭제 — CEO-1e 84·CEO-1c 44 에 덮여 사망) */
.pc_header .hdr_gnb {
    border-top: 1px solid #5fbfb6;    /* 메뉴 행 상단 골드 라인 — 로고 열(grid 1열·2행 걸침)은 제외 = 로고가 선 위에 놓인다 */
    background: #0b0b0b;
}
.pc_header { border-bottom: 1px solid #5fbfb6; }

/* ── 좌측 3버튼(충전·환전·문의) = 묶음 전체에 골드 그라디언트 1벌(칸마다 반복 X) ──
   그릇(.side_act_btns)에 그라디언트를 깔고 칸은 투명 + 칸 사이 얇은 구분선. */
.league_sidebar .side_act_btns {
    background: linear-gradient(137deg, #f2fffd 0, #c9f3ee 5%, #6cc6bd 20%, #2f7d76 50%, #3f9e95 80%, #4fb3a9 95%, #8fdcd4 100%);
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
.league_sidebar .side_act_btn {
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, .35);
    border-radius: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    font-weight: 700;
}
.league_sidebar .side_act_btn:last-child { border-right: 0; }

/* ==========================================================================
   CEO-2 · 우측 내정보 카드(RightUserCard) — 캡쳐 1 우상단. 골드 라인 카드 · 메달 좌 · 닉네임/칩/머니/포인트 우.
   ========================================================================== */
.rt_user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #151515 0%, #0b0b0b 100%);
    border: 1px solid #5fbfb6;
    border-radius: 6px;
}
.rt_user_medal { flex: 0 0 auto; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.rt_user_medal img { max-width: 100%; max-height: 100%; }
.rt_user_body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rt_user_top { display: flex; align-items: center; }
.rt_user_nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: #fff; }
.rt_user_nim { color: var(--app-text-secondary); font-size: 12px; margin-right: 2px; }
.rt_user_chip {
    height: 22px; padding: 0 8px; border-radius: 3px; border: 1px solid #5fbfb6;
    background: #1a1a1a; color: #b2ebe6; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.rt_user_chip:hover { background: #5fbfb6; color: #111; }
.rt_user_logout { margin-left: auto; }
.rt_user_row { display: flex; align-items: center; font-size: 12.5px; color: var(--app-text-secondary); }
.rt_user_val { color: #b2ebe6; font-weight: 800; font-size: 14px; }
.rt_user_unit { color: var(--app-text-secondary); font-size: 12px; }
/* 비로그인 = 인라인 로그인 폼(좌측 카드에서 이설 — 톤 동일) */
.rt_login { display: flex; gap: 8px; align-items: stretch; width: 100%; }
.rt_login_inputs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rt_login_input { height: 32px; padding: 0 10px; border: 1px solid var(--app-border); border-radius: 4px; background: var(--app-bg); color: var(--app-text-primary); font-size: 12.5px; }
.rt_login_input::placeholder { color: var(--app-text-dim); }
.rt_login_btn { flex: 0 0 76px; border: 1px solid #5fbfb6; border-radius: 4px; background: var(--app-primary-grad); color: #062421; font-weight: 800; font-size: 13px; cursor: pointer; }
.rt_login_btn[disabled] { opacity: .6; cursor: default; }
.rt_user:has(.rt_login) { flex-wrap: wrap; }
.rt_signup_btn { width: 100%; height: 30px; margin-top: 2px; border: 1px solid #5fbfb6; border-radius: 4px; background: #1a1a1a; color: #b2ebe6; font-weight: 700; font-size: 12.5px; cursor: pointer; }
/* PC 우측 열: 카드는 접히지 않고 상단 고정(카트 위) */
.cart_sidebar > .rt_user { flex: 0 0 auto; }

/* CEO-2c · (삭제) 구 CEO-2 모바일 내정보 우측 슬라이드 재정의 — s2 원본(헤더 아래로 떨어지는 드로어)로 복귀. */

/* CEO-1c · 헤더 재배치(캡쳐) — 로고 = row0 행에만(2행 걸침 해제) · 메뉴 행(hdr_gnb)은 **좌측 끝까지 전폭**(grid 2열 걸침) · 44px · 폰트 축소. */
.pc_header .hdr_logo { grid-row: 1; grid-column: 1; }   /* CEO-DEDUP · height 64px 삭제 — CEO-1e 84px 에 덮여 사망 */
.pc_header .hdr_row0 { grid-row: 1; grid-column: 2; }
.pc_header .hdr_gnb  { grid-row: 2; grid-column: 1 / -1; height: 44px; }
/* (CEO-DEDUP · 구 img 56px 삭제 — CEO-1e 80px 에 덮여 사망) */
.pc_header .hdr_gnb_item { font-size: 15px; }

/* CEO-1d · 좌측 3버튼 호버 = 골드 그라디언트(지시값) · 메뉴 그리드 호버 초록 제거 · 우측 카드 시작점 정렬 · 헤더 배경 그라디언트 */
.league_sidebar .side_act_btn:hover {
    background: linear-gradient(137deg, #f2fffd 0, #c9f3ee 5%, #6cc6bd 20%, #b8f2ec 50%, #3f9e95 80%, #4fb3a9 95%, #8fdcd4) !important;
    color: #fff;
}
.league_sidebar .addMenu-wrap > a:hover { background: #1a1a1a; color: #b2ebe6; }   /* 구 초록 호버(#14201a/#191921 + primary) 폐기 */
.cart_sidebar > .rt_user { margin-top: 10px; }                                        /* 좌측 .side_act_btns margin-top 10px 과 시작점 정렬 */
.pc_header { background: linear-gradient(180deg, #232323 0, #121213); }

/* CEO-1e · 헤더 치수(로고 84 · row0 84) · GNB 전폭 중앙 정렬(구 -150px 보정 해제) · 흰 글자 · 셸 배경 통일 */
.pc_header .hdr_logo { height: 84px; }
.pc_header .hdr_logo img { max-height: 80px; }
.pc_header .hdr_row0 { height: 84px; }
.pc_header .hdr_gnb { justify-content: center; }
.pc_header .hdr_gnb_items { transform: none; margin: 0 auto; }
.pc_header .hdr_gnb_item { color: #fff; }
.pc_header .hdr_gnb_item:hover, .pc_header .hdr_gnb_item.active { color: #b2ebe6; }
/* 좌/우 컬럼 배경 = 홈과 같은 그라디언트 축(#000 이질감 제거) — 셸 전체를 한 톤으로, 카드는 골드 라인으로 구분. */
.page_shell, .page_shell > .league_sidebar, .league_sidebar, .cart_sidebar, .page_shell_body { background: linear-gradient(180deg, #232323 0, #121213) fixed; }

/* ==========================================================================
   CEO-2b · 우측 내정보 카드 재배치 · 모바일 드로어 = 헤더(56px) 아래 · 헤더는 어둡게 하지 않음 · 좌/우 드로어 동일 규격
   ========================================================================== */
.rt_user_body { gap: 6px; }
.rt_user_top { flex-wrap: nowrap; gap: 8px; }
.rt_user_nick { max-width: none; flex: 1 1 auto; font-size: 14px; }
.rt_user_gift { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; line-height: 1; cursor: pointer; }
.rt_user_row { gap: 4px; }
.rt_user_swap { margin-left: auto; }
.rt_user_acts { display: flex; gap: 10px; margin-top: 2px; }
.rt_user_acts button { padding: 0; border: 0; background: none; color: var(--app-text-secondary); font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rt_user_acts button:hover { color: #b2ebe6; }
.rt_user_acts .rt_user_logout { margin-left: auto; color: #e0a0a0; }

@media (max-width: 1024px) {
    :root { --ceo-mhdr: 56px; }
    /* 좌측 드로어 = 헤더 아래(한줄공지 유무 무관 · 헤더 상단 행 56px 기준) */
    .league_sidebar { top: var(--ceo-mhdr) !important; height: calc(100dvh - var(--ceo-mhdr)) !important; }
    .m_side_backdrop { top: var(--ceo-mhdr); top: var(--ceo-mhdr); }
    /* 우측 내정보 드로어 = s2 원본(위→아래 · 헤더 아래 시작 = partner.css top:56px) — 재정의 없음. */
    /* 모바일 카트 오버레이 = 같은 드로어 규격(우측 · 헤더 아래 · 300px) — 내정보 카드 + 카트 + 배너 */
    .mobile_cart_overlay { top: var(--ceo-mhdr) !important; height: calc(100dvh - var(--ceo-mhdr)) !important; width: 300px !important; max-width: 86vw; background: var(--app-bg-panel); border-left: 1px solid #5fbfb6; padding: 12px; }
    .cart_backdrop { top: var(--ceo-mhdr) !important; }
    /* CART-TOP(2026-09-28) · 본문 .main_index_container{z-index:1} 스태킹이 카트(1101)를 헤더(sticky 1000) 아래로 가둬
       한줄공지(.m_hdr_notice · 56~88px)가 카트 상단을 덮었다 → 카트 열림 동안만 스태킹 해제(카트가 공지 위). */
    .main_index_container:has(.mobile_cart_overlay.open) { z-index: auto; }
}

/* ==========================================================================
   CEO-4 · 전 페이지 배경 통일(다크 그레이 그라디언트) · GNB 간격 · CS 탭 3분할 톤 · 게시판/썸네일 톤
   ========================================================================== */
.pc_header .hdr_gnb_items { gap: 0; }
.pc_header .hdr_gnb_item { padding: 0 46px; }                /* 구 28px → 46px(원본 시안 간격) */
/* 본문 컨테이너·서브페이지 래퍼 = 셸 그라디언트 위에 투명(페이지마다 다른 배경 금지) */
.main_index_container, .main_content_wrap, .support_container, .game_view_area, .sports_content_wrap { background: transparent; }
/* CS 탭(공지/이벤트/게시판 3분할) — 네이비 → 다크 그레이 + 골드 인디케이터 */
.support_tabs_container { background: #1b1b1b; border: 1px solid #34302a; border-bottom-color: #5fbfb6; border-radius: 6px 6px 0 0; }
.tab_item { color: #bdbdbd; padding: 14px 0; }
.tab_item.active { color: #b2ebe6; }
.tab_item.active::after { background: #81d8d0; }
.tab_item:hover { color: #fff; background: rgba(255,255,255,.03); }
/* 게시판 목록 — 헤더 네이비 제거 · 날짜 열 폭 90(yy-MM-dd 잘림 방지) */
.message_board .table_head, .board_list3 .table_head { background: #232323; color: #cfcfcf; border-bottom: 1px solid #3a3a3a; }
.board_restyle .table_head, .board_restyle:not(.m) .message_row { grid-template-columns: 60px 1fr 150px 90px; }
.board_restyle .message_row { border-bottom: 1px solid #2a2a2a; }
.board_restyle .message_row:hover { background: rgba(129, 216, 208,.06); }
.board_list3 .col_date, .board_restyle .col_no { color: #9a9a9a; }
/* 이벤트 썸네일 카드 — 네이비 → 다크 그레이 + 골드 호버 */
.board_thumb_card { background: #1b1b1b; border-color: #34302a; }
.board_thumb_card:hover { border-color: #5fbfb6; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.thumb_body { background: #1b1b1b; color: #e6e6e6; }

/* ==========================================================================
   CEO-2c · 내정보 카드 보정(🎁 드롭다운 · 변환 아이콘 · 소액션 제거) · 모바일 로고 · 모바일 내정보 드로어 본문
   ========================================================================== */
.rt_user_gift { border: 0; background: none; font-size: 16px; }
.rt_gift_wrap { position: relative; display: inline-flex; }
.rt_gift_wrap .gift_dd_menu { left: auto; right: 0; top: calc(100% + 4px); min-width: 120px; }   /* 🎁 가 카드 우측 끝 — 우측으로 펼치면 열 밖으로 잘린다 → 좌측으로 펼침(right:0 기준) */
.rt_user_swap.drawer_swap { margin-left: auto; width: 24px; height: 24px; border: 1px solid #5fbfb6; border-radius: 4px; background: #1a1a1a; color: #b2ebe6; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rt_user_swap.drawer_swap svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.m_header_logo img { width: auto; }
.mobile_user_drawer .user_info_container { padding: 12px; }
.mobile_user_drawer .rt_user.in_drawer { margin: 0 0 12px; }

/* DEP-BTN2(2026-08-31) · 충전 — 입금계좌 문의 + 충전 신청 한 행 좌우 분할(모바일 포함) · 사이 여백 */
.submit_area_dual { display: flex; gap: 10px; justify-content: center; }
.submit_area_dual .btn_submit_charge { flex: 1 1 0; max-width: none; }
@media (max-width: 768px) {
    .submit_area_dual { gap: 8px; }
    .submit_area_dual .btn_submit_charge { font-size: 14px; padding: 13px 8px; }
}

/* DEP-GLOW(2026-08-31 · ceo 전용) · 충전금액 input 포커스 → 충전 신청 버튼 글로우(:has 미지원 브라우저 = 무효과 무해) */
@keyframes deposit_glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 80, 0); }
    50% { box-shadow: 0 0 16px 4px rgba(255, 200, 80, .55); }
}
form:has(.input_amount:focus) .submit_area_dual .btn_submit_charge:not(.btn_account_inquiry) {
    animation: deposit_glow 1.1s ease-in-out infinite;
}