@charset "utf-8";
/* =====================================================================
 * UserWeb1 반응형 기반 (Phase 1 - 전역 골격)
 * ---------------------------------------------------------------------
 * 정책:
 *   - 데스크톱(>1024px)은 기존 레이아웃을 그대로 유지 (이 파일은 오버라이드만)
 *   - 표준 3단계 브레이크포인트
 *       · 태블릿  : max-width 1024px
 *       · 모바일  : max-width 768px
 *       · 소형    : max-width 480px
 *   - layout.css 이후에 로드되어 동일 특이도 규칙은 순서로 승리
 *   - 전역 box-sizing:border-box (common.css) 전제 → width:100% + padding 안전
 * ===================================================================== */

/* 햄버거 버튼: 데스크톱에서는 숨김 */
.mobile-nav-toggle { display: none; }

/* =========================== 태블릿 이하 (<=1024px) =========================== */
@media (max-width: 1024px) {

    /* 고정 최소폭 해제 (가로 스크롤 방지의 핵심) */
    html, body, #wrap { min-width: 0 !important; }
    body { overflow-x: hidden; }

    /* 1400px 고정 컨테이너 유동화 */
    .top_box,
    .gnb_box,
    .contents_box,
    .main_jackpot_box,
    .main_game_box,
    .main_board_wrap,
    .slot_box {
        width: 100% !important;
        max-width: 1400px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .gnb_wrap { background-size: cover; position: relative; padding: 16px 0; }

    /* 헤더 좌우 데코 이미지 숨김 */
    .main_left, .main_right { display: none !important; }

    /* 이미지 넘침 방지 (테마 img{max-width 없음} 보정) */
    img { max-width: 100%; height: auto; }
    .logo img { width: 220px !important; }

    /* ---------- 상단바(공지/유저정보) 줄바꿈 ---------- */
    .top_wrap .top_box { flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 6px; }
    /* 모바일에서만 상단 "공지사항을 확인해주세요" 바 숨김 (데스크톱은 노출 유지)
       인라인 .top_wrap .top_box .notice{display:flex}(특이도 0,3,0)를 이기도록 동일 특이도 + !important */
    .top_wrap .top_box .notice { display: none !important; }
    .my { float: none; width: 100%; margin: 4px 0 0 0; }
    .my ul { flex-wrap: wrap; justify-content: flex-start; }
    .my li { line-height: 1.8; }

    /* ---------- GNB → 햄버거 드롭다운 ---------- */
    .mobile-nav-toggle {
        display: block;
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 200;
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        color: #fff;
        font-size: 22px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        padding: 0;
    }
    .gnb_box { display: none; }
    .gnb_box.is-open { display: block; }
    .gnb_box ul { display: block !important; width: 100% !important; margin: 12px 0 0 0; }
    .gnb_box li { float: none; display: flex; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .gnb_box li a { display: inline-block; padding: 14px 6px; font-size: 15px; }

    /* ---------- 메인 잭팟 ---------- */
    .main_jackpot_box { height: auto; padding: 20px 12px; justify-content: center; }
    .jackpot_money { font-size: 34px; margin: 0; }

    /* ---------- 메인 게임 배너 (2개 스택) ---------- */
    .main_game_box ul { display: block; width: 100%; }
    .main_game_box li { float: none; width: 100%; margin: 0 0 12px 0; }
    .main_game_box li img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

    /* ---------- 하단 보드(4열 → 2열) ---------- */
    .board { width: calc(50% - 10px) !important; margin: 0 20px 20px 0 !important; }
    .board:nth-child(2n) { margin-right: 0 !important; }

    /* ---------- 슬롯/게임 썸네일 열 수 축소 ---------- */
    .slot_list li { width: calc(100% / 5) !important; }
    .slot_list2 li { width: calc(100% / 4) !important; }

    /* ---------- 좌우 2단 → 1단 ---------- */
    .contents_box_left { float: none; width: 100%; }
    .contents_box_right { float: none; width: 100%; margin-top: 20px; }

    /* ---------- 타이틀 배너 ---------- */
    .title { font-size: 24pt; line-height: 100px; }

    /* ---------- 레이어/메인 팝업 폭 유동화 ---------- */
    .casino_box,
    .main_pop_box,
    .notice_popup_wrap,
    .notice_popup_box { width: 100% !important; max-width: 500px; height: auto; }
    .notice_popup1, .notice_popup2 { position: static; top: auto; left: auto; right: auto; }

    /* ---------- 표: 컨테이너 밖으로 나갈 경우 가로 스크롤 ---------- */
    .contents_box table { max-width: 100%; }
}

/* =========================== 모바일 이하 (<=768px) =========================== */
@media (max-width: 768px) {

    .logo img { width: 180px !important; }

    /* 보드 2열 → 1열 */
    .board { width: 100% !important; margin: 0 0 16px 0 !important; }

    /* 썸네일 추가 축소 */
    .slot_list li { width: calc(100% / 3) !important; }
    .slot_list2 li { width: calc(100% / 3) !important; }

    /* 게임/벤더 그리드: float+nth-child → flex+gap 2열 (nth-child 규칙 제거로
       자체 그리드를 가진 페이지(VendorGames)와 특이도 충돌 방지) */
    .game_list ul { display: flex; flex-wrap: wrap; gap: 16px; }
    .game_list li { float: none; width: calc((100% - 16px) / 2); margin: 0; }
    .game_list li a img { width: 100%; }

    .jackpot_money { font-size: 26px; }
    .title { font-size: 20pt; line-height: 80px; }

    .my li { font-size: 12px; }
    .my_btn1, .my_btn2 { min-width: auto; }

    .footer_wrap { padding: 40px 0; font-size: 14px; }
}

/* =========================== 소형 (<=480px) =========================== */
@media (max-width: 480px) {

    .logo img { width: 150px !important; }

    .slot_list li { width: calc(100% / 2) !important; }
    .slot_list2 li { width: calc(100% / 2) !important; }
    .game_list ul { gap: 12px; }
    .game_list li { width: calc((100% - 12px) / 2); }

    .jackpot_money { font-size: 20px; }
    .title { font-size: 16pt; line-height: 64px; }
    .contents_wrap { margin: 20px 0; }
    .mobile-nav-toggle { top: 12px; right: 12px; width: 40px; height: 40px; line-height: 36px; font-size: 20px; }
}

/* =====================================================================
 * 공유 폼/내역 컴포넌트 (충전신청 / 환전신청 / 포인트전환 공통)
 *   - write_title/write_basic 폼 테이블: 모바일에서 세로 스택
 *   - input1(인라인 width:300px): 유동화 (!important 로 인라인 오버라이드)
 *   - 금액 퀵버튼: 줄바꿈 여백
 *   - 내역 DataTables(폼 밖): 가로 스크롤
 * ===================================================================== */
@media (max-width: 768px) {

    /* 폼 테이블 세로 스택 (form 내부만 대상 → 내역 테이블은 영향 없음) */
    .contents_box form table,
    .contents_box form tbody,
    .contents_box form tr { display: block; width: 100%; }
    .contents_box form td { display: block; width: 100% !important; }

    .contents_box form .write_title {
        width: 100% !important;
        padding: 10px 14px 4px 14px;
        border-bottom: none;
    }
    .contents_box form .write_basic { padding: 4px 14px 12px 14px; }

    /* 인라인 width:300px 오버라이드 */
    .write_basic .input1 { width: 100% !important; max-width: 100%; margin-bottom: 6px; }

    /* 금액 퀵버튼 줄바꿈 여백 */
    .write_basic .btn1_1,
    .write_basic .btn1_2 { margin: 4px 4px 0 0; }

    /* 정보/주의사항 박스 여백 축소 */
    .info1 { font-size: 17px; padding: 0 14px; }
    .info3 { padding: 5px 14px 0 14px; }

    /* 신청 버튼 탭 영역 확대 */
    .btn_wrap_center .btn3_1 { min-width: 200px; padding: 0 30px; }

    /* 내역 DataTables 가로 스크롤 */
    .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.dataTable { min-width: 600px; }
}

/* =====================================================================
 * 베팅내역 (카지노/슬롯 공통) — .casino-betting 스코프
 *   - 구조(가로 스크롤 테이블·유동 컨테이너·flex-wrap 필터)는 이미 반응형
 *   - 소형 화면 사이즈 폴리싱 위주
 *   - 상세 모달(.cb-*)은 .casino-betting 바깥 형제 → 프리픽스 없이 타겟
 * ===================================================================== */
@media (max-width: 768px) {
    .casino-betting { padding: 12px 0 40px; }
    .casino-betting .cb-container { padding: 0 12px; }
    .casino-betting .betting-header h2 { font-size: 22px; }
    .casino-betting .betting-header p { font-size: 13px; }
    .casino-betting .betting-tab { padding: 8px 18px; font-size: 14px; }
    .casino-betting .betting-card { padding: 16px; margin-bottom: 16px; }
    .casino-betting .section-title { font-size: 16px; }
    .casino-betting .date-btn { padding: 8px 12px; font-size: 13px; margin-right: 6px; }
    .casino-betting .cb-input { flex: 1 1 140px; width: auto; min-width: 120px; }
    .casino-betting .btn-search { flex: 1 1 100%; }

    /* 상세 모달 (페이지 <style>의 .cb-* 를 후순위로 오버라이드) */
    .cb-modal-body { padding: 16px; }
    /* 카지노 결과 카드(Player VS Banker) 가로 넘침 방지 */
    #detail-result-section div[style*="display:flex"] { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .casino-betting .betting-tabs { gap: 8px; }
    .casino-betting .betting-tab { padding: 7px 14px; font-size: 13px; }
    .casino-betting .betting-header h2 { font-size: 19px; }
    .casino-betting .date-btn { padding: 7px 10px; font-size: 12px; margin-bottom: 6px; }
}

/* =====================================================================
 * 쪽지/공지/문의 (Note/*)
 *   - 상세(라벨|값) 테이블 중 <form> 밖(Detail/GongJi/Reply)은 .detail_table
 *     마커로 세로 스택 (form 안 Question 은 기존 form 규칙으로 처리됨)
 *   - 목록 DataTables(SendMessage/Inquiry)는 전역 가로 스크롤 규칙으로 처리됨
 *   - 목록/내역 셀 밀도 소폭 축소
 * ===================================================================== */
@media (max-width: 768px) {
    /* <form> 밖 상세 테이블 세로 스택 */
    .detail_table,
    .detail_table tbody,
    .detail_table tr { display: block; width: 100%; }
    .detail_table td { display: block; width: 100% !important; }
    .detail_table .write_title {
        padding: 10px 14px 4px 14px;
        border-bottom: none;
    }
    .detail_table .write_basic { padding: 4px 14px 14px 14px; }

    /* 목록/내역 셀 밀도 (Index 공지목록 + 각종 list 테이블) */
    .list_title1 { line-height: 38px; font-size: 13px; }
    .list1 { padding: 9px 4px; font-size: 12px; }
}

/* =====================================================================
 * 홈 (Home/Index) — 메인 슬라이드쇼
 *   - 기본은 1920px 고정폭 캔버스(중앙정렬)라 모바일에서 배너 중앙만 노출
 *   - 모바일: 캔버스를 뷰포트 폭으로 바꾸고 background-size:cover 로 전체 노출
 * ===================================================================== */
/* slideshow5/style.css 가 본문(RenderBody)에서 이 파일보다 나중에 로드되므로
   해당 선택자들은 !important 로 오버라이드해야 함 */
@media (max-width: 768px) {
    .slideshow5_wrap { height: 200px !important; }
    .slideshow5_wrap_center { width: 100% !important; left: 0 !important; margin-left: 0 !important; }
    .event_slide {
        height: 200px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .arrow_wrap { display: none !important; }   /* 좁은 화면에서 좌우 화살표 숨김 */
    .slide_pager { top: auto !important; bottom: 8px !important; }
}

@media (max-width: 480px) {
    .slideshow5_wrap { height: 140px !important; }
    .event_slide { height: 140px !important; }
}