/* 전체 배경 설정 */
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;
}

.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) + 260(sidebar) + 20(wrap padding) + 10(wrap gap) + 260(cart) = 560
      → 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 유지) */
}

/* 본문 래퍼 = 유일한 신축 축.
   ⚠️ 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; }
.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 {
    flex: 8;
    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 {
    flex: 2;
    text-align: center;
    color: #5a6675;
    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 {
    width: 150px;
    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;
    padding: 16px 0;
    color: #8a96a3; /* 비활성 글자색 */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    outline: none;
}

    /* 활성화된 탭 (Active) */
    .tab_item.active {
        color: #ffd700; /* 이미지에 나온 노란색 글자색 */
    }

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

    /* 호버 시 글자 밝아짐 */
    .tab_item:hover {
        color: #ffffff;
    }


    /* 충전 */
/* 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 {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

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

    .history_table th {
        padding: 12px 15px;
        color: #8a96a3;
        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 {
        padding: 15px;
        color: #e1e5eb;
        text-align: center;
        vertical-align: middle;
    }

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

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

/* 내역 구분 뱃지 (충전/환전) */
.badge_type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    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: #c9a227;
        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}
    .w-1248px { width: 100% !important; padding: 20px; box-sizing: border-box; }
    .top_content_row { flex-direction: column; }
    .casino_slider_section { width: 100%; }
    .slider_viewport, .slider_item img { width: 100%; height: auto; aspect-ratio: 610 / 200; }
    .game_grid.col_5 { grid-template-columns: repeat(2, 1fr); }
    .game_grid.col_4 { grid-template-columns: repeat(2, 1fr); }
    .game_grid.col_6 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   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 .table_head,
.board_restyle:not(.m) .message_row { grid-template-columns: 60px 1fr 150px 70px; }
.board_restyle .message_row { padding: 9px 8px; border-bottom: 1px solid #232833; }
.board_restyle .table_head { font-size: 13px; }
.board_restyle .col_no { text-align: center; color: #7a8590; font-size: 13px; }
/* 2026-10-30 · 날짜 칸이 표 밖으로 넘치던 것 — 공용 .col_date { width:150px }(위 레거시 규칙)이 70px 칸 안에서도 150px 로 그려졌다 → 칸 폭에 맞춤 */
.board_restyle .col_date { width: auto; min-width: 0; white-space: nowrap; }
.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; background: #1a2332; transition: box-shadow .15s, border-color .15s; }
.board_thumb_card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.5); border-color: #3a4863; }
/* ⚠️ 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: #ffca28; 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: #e8e4d8; font-size: 14px; }
.rc_pct { margin-left: auto; color: #ffca28; 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: #e8e4d8; }
.rc_type { padding: 2px 10px; border-radius: 10px; background: #2a2517; border: 1px solid #c9a227; color: #f5d76e; 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: #e8e4d8; 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: #e8e4d8; }
.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~1349.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~1349.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: 1350px) {
    /* 펴진 상태 = ◀(접기)만 / 접힌 상태 = ▶(펴기)만. */
    .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(224, 160, 32, .08);
}

.league_sidebar .side_menu_item.on {
    color: var(--app-primary-light);
    background: rgba(224, 160, 32, .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: #241a05;
}

/* 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(224, 160, 32, .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(224, 160, 32, .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 소관 — 무접촉.
   ============================================================ */
.pc_header .hdr_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: #2e2f3b;
}

.pc_header .hdr_row1 {
    height: 40px;
    border-bottom: 1px solid var(--app-border);
}

.pc_header .hdr_row2 {
    height: 38px;
    justify-content: flex-end;
    background: var(--app-bg-panel-2);
}

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

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

.pc_header .hdr_notice_tag::before {
    content: "\25B2";      /* ▲ */
    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 {
    display: inline-flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    will-change: transform;
    animation: hdrTicker linear infinite;   /* duration 은 JS 가 인라인으로 주입 */
}

/* 읽는 도중 지나가버리지 않게 — 마우스 오버 시 정지. */
.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. */
.pc_header .hdr_notice.is_static .hdr_notice_track {
    animation: none;
    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 — 정지 + 고정 표시. ⚠️ 스크롤바를 대안으로 넣지 않는다. */
@media (prefers-reduced-motion: reduce) {
    .pc_header .hdr_notice_track {
        animation: none;
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pc_header .hdr_notice_seg { padding-right: 0; }
    .pc_header .hdr_notice_seg + .hdr_notice_seg { display: none; }   /* 두 벌 중 둘째 숨김 */
    .pc_header .hdr_notice_vp::after { display: none; }
}

/* 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; }
}

/* AT §5 · 태블릿·모바일 공지 숨김 — AG 태블릿 티어 상한(1399.98) 그대로 사용(신규 상수 0).
   ⚠️ 렌더 자체를 막지 않고 CSS 로만 감춘다 → 데스크톱 복귀 시 재초기화 비용 0.
   근거: AG 2단 헤더에 공지가 들어가면 3행이 되어 헤더가 과도하게 두꺼워진다. */
@media (max-width: 1399.98px) {
    .pc_header .hdr_notice { 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: #241a05;
    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: #241a05; }
.pc_header .hdr_btn_signup { background: transparent; border-color: var(--app-primary); color: var(--app-primary-light); }

/* 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); }

/* 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-SEL(2026-08-31 · dk/c2 전용) · 충전유형 선택 강조 — 퍼플 배경 + 매칭 보더, 선택 시 롤링 줄 밝게 */
.charge_type_item.selected { background: #84438f; border-color: #a05dad; }
.charge_type_item.selected .type_line2 { color: #e1e1e1; }