/* =====================================================================
   UserWeb5 모바일 반응형 스타일
   ---------------------------------------------------------------------
   - 이 파일의 모든 규칙은 화면폭 767px 이하(모바일)에서만 적용된다.
   - PC(768px 이상) 레이아웃에는 전혀 영향을 주지 않는다.
   - app.css(PC용) 원본은 수정하지 않고, 여기서 override 한다.
   - 태블릿(768~1024)은 기존 PC 레이아웃을 유지한다. 필요 시 별도 확장.
   ===================================================================== */

/* 모바일 햄버거 요소는 기본(PC 포함) 숨김. 767px 이하에서만 노출(섹션 3). */
.mobile-hamburger-btn,
.mobile-topbar-auth,
.mobile-topbar-actions,
.mobile-menu-overlay,
.mobile-menu-panel {
    display: none;
}

/* =========================================================
   1. 전역 기반 (가로스크롤 방지 / 고정폭 컨테이너 해제)
   ========================================================= */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;          /* 고정폭 잔재로 인한 가로 스크롤 차단 */
        max-width: 100%;
        -webkit-text-size-adjust: 100%;
    }

    /* app.css의 body{overflow-y:scroll}(PC용 항상표시)는 모바일에서
       실제 스크롤 없이도 스크롤바 거터(약 10px)를 예약해 우측에 빈 띠를 만든다.
       페이지 스크롤은 html이 담당하므로 body는 auto로 풀어 거터 제거. */
    body {
        overflow-y: auto !important;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    img, video, iframe, object, embed {
        max-width: 100%;
    }

    img, video {
        height: auto;
    }

    /* 메인 래퍼 / 공통 컨테이너 고정폭(1260px) 해제 → 화면폭에 맞춤 */
    .wrapper {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    .main-container,
    .nav-container,
    .default-container,
    .left-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .guest-page .header-top,
    .header-bottom {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* =========================================================
   2. 헤더 (guest-page: 로그인/쪽지 · 로그인 시 잔액/쪽지함/로그아웃)
      - 모바일에서는 상단 바를 통째로 숨긴다.
      - 동일 항목(로그인/로그아웃/쪽지함/잔액)은 모두 햄버거 메뉴로 제공.
      - PC(768px 이상)에는 영향 없음.
   ========================================================= */
@media (max-width: 767px) {
    .guest-page {
        display: none !important;
    }
}

/* =========================================================
   3. 네비게이션 (GNB) → 햄버거 메뉴
      - 헤더에는 로고만 중앙 노출 + 좌측 햄버거 버튼.
      - 기존 가로 메뉴(nav-link)는 숨기고, 좌측 슬라이드 패널로 제공.
      - 768px 이상(PC)에는 영향 없음(전부 @media 안 또는 기본 숨김).
   ========================================================= */
@media (max-width: 767px) {
    .nav-container {
        position: relative; /* 햄버거 버튼(absolute)의 기준 = 헤더 */
        background-size: cover !important;
        background-position: center !important;
        padding: 2px 0;
        height: auto !important;
    }

    .nav {
        display: flex !important;
        position: relative;
        height: auto !important;
        justify-content: center !important;
        align-items: center;
        min-height: 52px;
        gap: 0;
    }

    /* 기존 가로 메뉴 링크는 숨김(로고 제외) */
    .nav .nav-link:not(.logo) {
        display: none !important;
    }

    /* 로고만 헤더 중앙에 노출 + 로고 바 세로 중앙 정렬 */
    .nav-link.logo {
        flex: 0 1 auto !important;
        max-width: 70% !important;
        order: 0;
        padding: 6px 0 !important;
        /* flex 중앙 정렬: inline-block baseline로 인한 아래 처짐 제거 → 바 정중앙 배치 */
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .nav-link.logo img {
        /* PC(app.css)에서 position:absolute로 떠 있어 모바일에서 로고가 아래로 처진다.
           정상 흐름으로 되돌려 flex 중앙 정렬된 로고 칸 안에 배치. */
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        max-height: 38px;
        width: auto;
        display: block;
        vertical-align: middle;
    }

    /* ----- 햄버거 버튼 ----- */
    .mobile-hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        padding: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 30;
    }

    .mobile-hamburger-btn span {
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: #fff;
    }

    /* ----- 상단바 우측 버튼 묶음 (알회수/로그아웃 또는 로그인) ----- */
    .mobile-topbar-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
    }

    /* ----- 상단바 우측 로그인/로그아웃/알회수 버튼 ----- */
    .mobile-topbar-auth {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: static;
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        color: #fff;
        text-decoration: none;
        border-radius: 16px;
        white-space: nowrap;
    }

    .mobile-topbar-login {
        background: linear-gradient(135deg, #f5b942, #e89c1c);
    }

    .mobile-topbar-logout {
        background: rgba(255, 255, 255, .15);
        border: 1px solid rgba(255, 255, 255, .55);
        /* 알회수 버튼과 동일하게 컴팩트하게 축소 */
        height: 26px;
        padding: 0 6px;
        font-size: 10px;
        border-radius: 13px;
    }

    .mobile-topbar-recover-al {
        background: linear-gradient(135deg, #2a8555, #33a066);
        /* 로고와 겹치지 않도록 알회수 버튼만 컴팩트하게 축소 */
        height: 26px;
        padding: 0 6px;
        font-size: 10px;
        border-radius: 13px;
    }

    /* ----- 오버레이 ----- */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
        z-index: 9998;
    }

    .mobile-menu-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    /* ----- 슬라이드 패널 ----- */
    .mobile-menu-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 78%;
        max-width: 320px;
        height: 100%;
        background: #1b1b22;
        color: #fff;
        transform: translateX(-100%);
        transition: transform .28s ease;
        z-index: 9999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
    }

    .mobile-menu-panel.open {
        transform: translateX(0);
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .mobile-menu-header .mobile-menu-logo img {
        max-height: 34px;
        width: auto;
        display: block;
    }

    .mobile-menu-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        padding: 0 4px;
    }

    /* 로그인 사용자 정보(닉네임 / 잔액) */
    .mobile-menu-user {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .04);
    }

    .mm-user-name {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 8px;
        word-break: break-all;
    }

    .mm-balance {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mm-balance li {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        padding: 3px 0;
        color: #cfcfd6;
    }

    .mm-balance li strong {
        color: #ffd24d;
    }

    /* 메뉴 항목 리스트 */
    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
        flex: 1 1 auto;
    }

    .mobile-menu-list li a {
        display: block;
        padding: 13px 18px;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .mobile-menu-list li a:active {
        background: rgba(255, 255, 255, .08);
    }

    /* 하단 로그인/로그아웃 */
    .mobile-menu-footer {
        padding: 16px;
    }

    .mobile-menu-footer .mm-btn {
        display: block;
        text-align: center;
        padding: 12px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .mm-btn-login {
        background: #2f6df6;
        color: #fff;
    }

    .mm-btn-logout {
        background: #444;
        color: #fff;
    }

    /* 패널 열렸을 때 본문 스크롤 잠금 */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* =========================================================
   4. 메인 배너 — 모바일은 LayerSlider 대신 단일 이미지 사용
      - LayerSlider는 내부가 PC 절대크기(1360px)라 좁은 폭에서 잘림(crop) 발생.
      - 그래서 모바일에서는 LayerSlider/배경비디오를 숨기고,
        합성 완료된 단일 배너(.mobile-banner)를 폭에 맞춰 전체 노출한다.
      - PC(768px 이상)에는 영향 없음.
   ========================================================= */
@media (max-width: 767px) {
    .banner-login-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* LayerSlider 및 배경 비디오는 모바일에서 숨김(잘림 방지)
       주: <img> 를 넣어도 Angular/LayerSlider 초기화가 제거하므로,
       제거되지 않는 main-banner-component 자체에 배경이미지로 단일 배너를 표시한다. */
    #layerslider,
    .ls-wp-container,
    .bg-video {
        display: none !important;
    }

    main-banner-component {
        display: block !important;
        width: 100% !important;
        max-width: 480px;
        margin: 8px auto 16px !important;
        background-image: url('/images/main-info/promo-banner-01.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 398 / 287;
        border-radius: 8px;
    }

    /* 잭팟 카운터(재물신+$ 오도미터)는 PC 고정폭 절대배치라 모바일에서 잘림 → 숨김 */
    jackpot-page,
    .jackpot-page {
        display: none !important;
    }

    /* 섹션 제목(카지노/슬롯 게임)의 장식 선(::before/::after, 480px)은
       모바일 좁은 폭에서 화면을 가로지르는 가는 선처럼 보임 → 숨김(글씨만 표시) */
    .slot-game-header::before,
    .slot-game-header::after {
        display: none !important;
    }
}

/* =========================================================
   5. 우측 스티키 메뉴 — 모바일에서는 숨김
   ========================================================= */
@media (max-width: 767px) {
    .right-container,
    .sticky-page {
        display: none !important;
    }

    /* 좌측 콘텐츠가 단독으로 전체폭 차지 */
    .left-container {
        margin-right: 0 !important;
    }
}

/* =========================================================
   6. 게임/지갑 팝업 (ngDialog) — 고정폭(1256/1024/1000px) 해제
   ========================================================= */
@media (max-width: 767px) {
    .ngdialog .ngdialog-content {
        width: 96% !important;
        min-width: 0 !important;
        max-width: 96% !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }

    .ngdialog-games-page .game-button-container,
    .custom-games-container {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   7. 공통 내역 테이블 (DataTables 포함)
      - 열이 많은 표(입출금/베팅/쪽지 내역)는 좁은 폭에서 한글 헤더가
        글자 단위로 세로 줄바꿈되어 깨진다.
      - 헤더/셀을 nowrap 처리하고, 표가 넘치면 가로 스크롤로 받는다.
   ========================================================= */
@media (max-width: 767px) {
    table {
        max-width: 100% !important;
    }

    /* 표를 감싸는 컨테이너에 가로 스크롤 부여 */
    .table-responsive,
    .table-wrapper,
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 내역 표: 폰트/패딩 축소 + 헤더·셀 세로 깨짐 방지 */
    table.table,
    table.dataTable {
        font-size: 12px;
    }

    table.table > thead > tr > th,
    table.table > tbody > tr > td,
    table.dataTable > thead > tr > th,
    table.dataTable > tbody > tr > td {
        white-space: nowrap;
        padding-left: 6px !important;
        padding-right: 6px !important;
        word-break: keep-all;
    }

    /* DataTables 상단 컨트롤(페이지길이/검색) 줄바꿈 정렬 */
    .dataTables_length,
    .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 6px;
    }

    .dataTables_filter input {
        max-width: 60%;
    }

    /* 페이지네이션이 넘칠 때 줄바꿈 */
    .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        white-space: normal;
    }
}

/* =========================================================
   8. 메인 게임 벤더 이미지 리스트 — 모바일 2열 꽉채움
      - PC는 한 줄 6개(200px). 모바일은 폭이 좁아 1열로 쌓이고
        오른쪽 여백이 크게 남는다 → 화면폭 기준 2열로 꽉 채운다.
      - app.css의 고정폭/마진/nth-child 리셋을 여기서 override.
      - 카지노 이미지는 absolute(cover)라 aspect-ratio로 높이 부여.
        슬롯 이미지는 흐름배치라 max-width:100%(상단 전역규칙)로 축소된다.
   ========================================================= */
@media (max-width: 767px) {
    .gamebuttons-container {
        margin-top: 16px !important;
        margin-bottom: 12px !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 8px;
    }
    /* clearfix 가상요소가 flex 아이템으로 잡혀 첫 줄을 차지하는 것 방지 */
    .gamebuttons-container::before,
    .gamebuttons-container::after {
        display: none !important;
    }

    /* 공통: 한 줄 2개(2열), 고정 마진 제거 */
    .casino-page .gamebutton,
    .slot-page .gamebutton {
        width: calc(50% - 4px) !important;
        margin: 0 !important;
        float: none !important;
    }

    /* 카지노: 원본 비율(200:230) 유지하며 폭에 맞춰 높이 자동 */
    .casino-page .gamebutton {
        height: auto !important;
        aspect-ratio: 200 / 230;
    }

    /* 슬롯: 정사각 게임썸네일(아너링크 CDN). 폭에 맞춰 정사각 타일로 표시.
       img 가 position:absolute(slots.php) 라 box 높이를 못 만들므로,
       카지노와 동일하게 aspect-ratio 로 폭 기준 높이를 잡아준다.
       (slots-page로 좁혀 카지노 이미지엔 영향 없게 함) */
    slots-page .gamebutton {
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    /* 슬롯 게임명: 작아진 버튼에 맞춰 텍스트 보정 */
    slots-page .gamebutton p {
        margin-top: -24px;
        font-size: 12px;
    }
}