/* ============================================================
   gd01 인증 팝업 테마 override
   auth-st10.css(계약 스타일) 위에 gd01 오렌지 액센트로 리테마.
   변수 재정의(skin-gd01 스코프) → var(--earth-*) 쓰는 규칙 일괄 전환.
   ============================================================ */
body.skin-gd01 {
    --earth-primary: #ff8c1a;
    --earth-accent: #ffab4d;
    /* 조인 제출/보조 CTA 그라데이션 → gd01 오렌지 */
    --earth-gradient: linear-gradient(135deg, #ff9a2e 0%, #f0770a 60%, #ffb347 100%);
}

/* 중복확인(btn-check) 버튼이 폼 밖으로 넘치지 않도록 check-list flex 정렬
   (구조: li.check-list > .floating-input-wrap(input+label) + button.btn-check
    auth-st10 의 .check-list>input width계산은 input이 직접자식 아님→미적용, 여기서 wrap을 축소) */
body.skin-gd01 ul.join-list > li.check-list { display: flex; gap: 8px; align-items: center; width: 100%; box-sizing: border-box; }
body.skin-gd01 li.check-list > .floating-input-wrap { flex: 1 1 auto; min-width: 0; width: auto; }
body.skin-gd01 li.check-list > .floating-input-wrap > input { width: 100%; min-width: 0; box-sizing: border-box; }
body.skin-gd01 li.check-list > button.btn-check { flex: 0 0 auto; width: auto; min-width: 84px; white-space: nowrap; padding: 0 12px; }

/* 로그인 CTA 버튼 — gd01 오렌지 그라데이션 */
body.skin-gd01 .intro-btns button.intro-login,
body.skin-gd01 .intro-btns button.go-login {
    background: linear-gradient(180deg, #ff9a2e 0%, #f0770a 100%);
    border-color: #ff8c1a;
    color: #14100a;
    font-weight: 700;
}
body.skin-gd01 .intro-btns button.intro-login:hover,
body.skin-gd01 .intro-btns button.go-login:hover {
    filter: brightness(1.06);
}
/* 회원가입/보조 버튼 — 아웃라인 오렌지 */
body.skin-gd01 .intro-btns button.intro-join,
body.skin-gd01 .intro-btns button.go-join {
    background: transparent;
    border: 1px solid #ff8c1a;
    color: #ffb266;
}

/* 하드코딩 teal 글로우 → gd01 오렌지 */
body.skin-gd01 .intro-closeBtn:hover {
    background: rgba(255, 140, 26, 0.18);
    border-color: #ff8c1a;
}
body.skin-gd01 ul.intro-list > li > input:focus,
body.skin-gd01 ul.join-list > li > select:focus {
    border-color: #ff8c1a;
    box-shadow: 0 0 0 2px rgba(255, 140, 26, 0.22);
}
body.skin-gd01 .intro-tit { color: #ffffff; }
body.skin-gd01 .intro-tit::after { background: #ff8c1a; }

/* 회원가입 중복확인 등 보조 버튼 */
body.skin-gd01 .btn-check,
body.skin-gd01 .check-btn {
    background: #ff8c1a;
    color: #14100a;
    border: none;
}

/* 공지팝업 기본 숨김 — member-cheongung 의 notice-popup 규칙은 .skin-st88-cheongung 스코프라 gd01 미적용.
   비활성 시 하단 잔여요소(오늘 하루 보지 않기/체크박스) 노출 방지. active 시에만 모달 표시. */
body.skin-gd01 .notice-popup { display: none; position: fixed; inset: 0; z-index: var(--z-popup, 50000); background: rgba(0,0,0,.6); overflow-y: auto; }
body.skin-gd01 .notice-popup.active { display: flex; align-items: center; justify-content: center; }
/* ── 가로 일렬(separate) 모드 카드 CSS (gd01/royal 전용) ─────────────────────
   관리자 "가로 일렬 5개"(POPUP_SEPARATE='N') 선택 시 notice-popup.js 가
   #rowPopupContainer 에 카드를 렌더한다. gd01엔 컨테이너를 통째로 숨기고 카드
   규칙이 전무해 팝업이 안 떴음. 로얄 다크골드 테마(#171009/오렌지 #ff8c1a)로 이식. */
body.skin-gd01 .row-popup-container { display: none; position: fixed; inset: 0; z-index: var(--z-popup, 50000); padding: 60px 30px; pointer-events: none; }
body.skin-gd01 .row-popup-container.active { display: flex; justify-content: center; align-items: center; gap: 16px; }
body.skin-gd01 .row-popup-card {
    flex: 1 1 0; min-width: 0; max-width: 340px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
    background: #171009; border: 1px solid rgba(255, 140, 26, 0.32); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
body.skin-gd01 .row-popup-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: linear-gradient(#3a250e, #171009); border-bottom: 1px solid rgba(255, 140, 26, 0.18);
}
body.skin-gd01 .row-popup-card-title { margin: 0; font-size: 15px; font-weight: 700; color: #ffb266; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
body.skin-gd01 .row-popup-card-close {
    flex-shrink: 0; width: 28px; height: 28px; margin-left: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 140, 26, 0.4); border-radius: 50%; color: #ffb266; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s;
}
body.skin-gd01 .row-popup-card-close:hover { background: rgba(255, 140, 26, 0.2); color: #fff; }
body.skin-gd01 .row-popup-card-body { flex: 1; padding: 16px; overflow-y: auto; color: #e8ddca; }
body.skin-gd01 .row-popup-card-image { margin-bottom: 12px; text-align: center; }
body.skin-gd01 .row-popup-card-image img { max-width: 100%; height: auto; border-radius: 6px; }
body.skin-gd01 .row-popup-card-content { font-size: 13px; line-height: 1.6; color: #d9cdb4; word-break: break-word; white-space: pre-wrap; }
body.skin-gd01 .row-popup-card-footer { padding: 10px 16px; background: rgba(0, 0, 0, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.08); }
body.skin-gd01 .row-popup-card-dontshow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9b98a; cursor: pointer; }
body.skin-gd01 .row-popup-card-dontshow input[type="checkbox"] { width: 14px; height: 14px; accent-color: #ff8c1a; cursor: pointer; }
/* 1280px 미만은 notice-popup.js 가 캐러셀로 폴백 → 컨테이너 숨김(안전망) */
@media screen and (max-width: 1279px) {
    body.skin-gd01 .row-popup-container { display: none !important; }
}

/* ── 공지팝업 캐러셀 카드 내부 규칙 (gd01 전용) ──────────────────────────────
   gd01 은 .notice-popup 오버레이만 정의돼 있고 .notice-popup-inner 등 카드 내부
   폭/구조 규칙이 통째로 빠져 있었음(member-cheongung 규칙은 .skin-st88-cheongung
   스코프라 미적용). → .notice-popup-inner 에 폭이 없어 Swiper 가 슬라이드 폭을
   측정 못하고 33554432(2^25) 로 폭발 → 슬라이드가 왼쪽으로 밀려 사라졌음.
   아래에서 inner 폭(500px) + swiper 폭(100%) 을 확정해 근본 해결. gd01 오렌지 톤. */
body.skin-gd01 .notice-popup-inner {
    position: relative; width: 500px; max-width: calc(100vw - 30px); max-height: calc(100dvh - 60px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #171009; border: 1px solid rgba(255, 140, 26, 0.32); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
body.skin-gd01 .notice-popup-swiper { flex: 0 1 auto; min-height: 0; min-width: 0; width: 100%; overflow: hidden; }
body.skin-gd01 .notice-popup-slide { padding: 0; }
body.skin-gd01 .notice-popup-close {
    position: absolute; right: 12px; top: 12px; z-index: 5; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #ffb266; font-size: 15px; background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 140, 26, 0.4); border-radius: 50%;
}
body.skin-gd01 .notice-popup-close:hover { background: rgba(255, 140, 26, 0.2); color: #fff; }
body.skin-gd01 .notice-popup-title {
    margin: 0; padding: 16px 50px 14px 18px; font-size: 16px; font-weight: 700; color: #ffb266;
    background: linear-gradient(#3a250e, #171009); border-bottom: 1px solid rgba(255, 140, 26, 0.18);
}
/* max-height 필수 — 없으면 body 가 본문 전체 높이로 늘어나 overflow(스크롤)가 아예 안 생기고,
   긴 공지는 swiper(overflow:hidden)에 하단이 접근 불가로 잘린다.
   예산: inner 상한(100dvh-60) − 제목(~50) − 인디케이터(~24) − 푸터(~55) ≈ 100dvh-190, 여유 220px. */
body.skin-gd01 .notice-popup-body { padding: 18px; min-height: 200px; max-height: calc(100dvh - 220px); color: #e8ddca; line-height: 1.7; overflow-y: auto; }
body.skin-gd01 .notice-popup-image { margin-bottom: 14px; text-align: center; }
body.skin-gd01 .notice-popup-image img { max-width: 100%; height: auto; border-radius: 8px; }
body.skin-gd01 .notice-popup-content { font-size: 14px; line-height: 1.7; color: #d9cdb4; word-break: break-word; white-space: pre-wrap; }
body.skin-gd01 .notice-popup-pagination { display: flex; justify-content: center; gap: 6px; padding: 6px 0 10px; }
body.skin-gd01 .notice-popup-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255, 140, 26, 0.35); opacity: 1; border-radius: 50%; }
body.skin-gd01 .notice-popup-pagination .swiper-pagination-bullet-active { background: #ff8c1a; }
body.skin-gd01 .notice-popup-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.25);
}
body.skin-gd01 .notice-popup-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #c9b98a; cursor: pointer; }
body.skin-gd01 .notice-popup-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #ff8c1a; cursor: pointer; }
body.skin-gd01 .notice-popup-close-btn {
    padding: 8px 20px; font-size: 13px; font-weight: 700; color: #14100a; cursor: pointer;
    background: linear-gradient(180deg, #ff9a2e 0%, #f0770a 100%); border: 1px solid #ff8c1a; border-radius: 6px;
}
body.skin-gd01 .notice-popup-close-btn:hover { filter: brightness(1.06); }
@media screen and (max-width: 767px) {
    body.skin-gd01 .notice-popup-inner { width: 92vw; max-height: 85dvh; }
    /* 예산 150px = 제목+인디케이터+푸터(~130px) + 여유 (120px 은 하단 ~10px 잘림) */
    body.skin-gd01 .notice-popup-body { min-height: 140px; max-height: calc(85dvh - 150px); }
}

/* ── 슬롯 게임목록 팝업 그리드 (gd01 전용) ──────────────────────────────────
   #gamePopup 컨테이너/헤더/제목/닫기는 hangang/popup.css(언스코프)가 담당하나
   게임 그리드(.game-popup-list/li/img/name/hover)는 어느 gd01 로드 CSS에도 없어
   목록이 display:block 으로 쌓여 이미지가 전체폭(1158px)으로 깨져 보였음.
   st10-venus/popup.css 완전판을 gd01 오렌지 톤으로 이식. */
body.skin-gd01 .game-popup-list {
    display: flex; flex-wrap: wrap; gap: 15px; margin: 0; padding: 0; list-style: none;
}
body.skin-gd01 .game-popup-list > li {
    position: relative; width: calc(100% / 6 - 12.5px); aspect-ratio: 3/4;
    border-radius: 8px; overflow: hidden; cursor: pointer;
    background: rgba(30, 22, 12, 0.5); border: 1px solid rgba(255, 140, 26, 0.12); transition: 0.2s;
}
body.skin-gd01 .game-popup-list > li:hover {
    border-color: #ff8c1a; box-shadow: 0 6px 20px rgba(255, 140, 26, 0.25);
}
body.skin-gd01 .game-popup-list > li > img { width: 100%; height: 100%; }
body.skin-gd01 .game-popup-list > li > .game-name {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 8px;
    background: linear-gradient(transparent, rgba(10, 7, 3, 0.92));
    font-size: 12px; font-weight: 500; text-align: center; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.skin-gd01 .game-popup-list > li.no-games {
    width: 100%; text-align: center; padding: 40px; color: #b7a888;
    background: transparent; border: none; cursor: default;
}
body.skin-gd01 .game-popup-list > li .game-hover {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
    background: rgba(10, 7, 3, 0.7); opacity: 0; transition: 0.2s;
}
body.skin-gd01 .game-popup-list > li .game-hover .play-icon {
    width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
    background: linear-gradient(180deg, #ff9a2e 0%, #f0770a 100%); border-radius: 50%;
    font-size: 20px; color: #fff; transform: scale(0.8);
    box-shadow: 0 4px 15px rgba(255, 140, 26, 0.4); transition: 0.2s;
}
@media (hover: hover) and (pointer: fine) {
    body.skin-gd01 .game-popup-list > li:hover .game-hover { opacity: 1; }
    body.skin-gd01 .game-popup-list > li:hover .game-hover .play-icon { transform: scale(1); }
}
@media (max-width: 992px) {
    body.skin-gd01 .game-popup-list > li { width: calc(100% / 4 - 11.25px); }
    body.skin-gd01 .game-popup-list { gap: 12px; }
}
@media (max-width: 767px) {
    body.skin-gd01 .game-popup-list > li { width: calc(100% / 3 - 6.67px); }
    body.skin-gd01 .game-popup-list { gap: 10px; }
}
@media (max-width: 480px) {
    body.skin-gd01 .game-popup-list > li { width: calc(100% / 2 - 5px); }
}

/* ============================================================
   hangang popup.css(.tb-list th 회색 그라디언트 배경) 오염 제거.
   gd01 tb-list 헤더는 원본대로 균일 다크(thead tr #0b0e18)여야 함.
   ============================================================ */
body.skin-gd01 .tb-list th { background: transparent; }

/* ============================================================
   모바일 가로 오버플로우 제거 (고객센터/쪽지 등 gd01 네이티브 목록)

   hangang popup.css @media(max-width:930px) 에 `.tb-list {width:931px}` 가 있다.
   한강 스킨은 그 테이블을 항상 `.tb-wrap{overflow-x:auto}` 안에 넣어 컨테이너
   내부에서만 가로스크롤되게 설계했지만, gd01 의 고객센터(.customer-list)/쪽지
   (.messageTb) 는 colgroup % 로 화면폭에 맞추는 구조라 래퍼가 없다.
   → 모바일에서 문서 폭이 931px 로 늘어나 우측 컬럼(제목/날짜/상태)이 잘리고,
     페이지 자체가 좌우로 밀려 상하 스크롤이 가로 팬으로 먹히는 문제가 발생.

   래퍼가 있는 표(충전/환전내역·쿠폰 = 한강 원본 디자인)는 931px 스크롤을 유지하고,
   래퍼 없는 gd01 네이티브 표만 100% 로 되돌린다.
   ※ auth-gd01.css 는 popup.css 보다 뒤에 로드되므로 소스순서상 이 규칙이 승리.
   ============================================================ */
@media (max-width: 930px) {
    body.skin-gd01 .tb-list { width: 100%; }
    body.skin-gd01 .tb-wrap .tb-list { width: 931px; }

    /* 고객센터 목록은 colgroup(10/65/15/10 = 100%, 숨김 컬럼 없음)을 그대로 지키게 해
       공백 없는 긴 제목이 표를 밀어내지 못하도록 고정 레이아웃 + 말줄임.
       ※ .messageTb 는 Board.css 가 ≤800px 에서 4번째 컬럼을 display:none 처리하므로
         fixed 를 걸면 빈 컬럼 폭이 남는다 → width:100% 만 적용하고 제목은 줄바꿈. */
    body.skin-gd01 .customer-list { table-layout: fixed; }
    body.skin-gd01 .customer-list td.left-txt {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body.skin-gd01 .messageTb td.left-txt2 { overflow-wrap: anywhere; }
}

/* 문의 본문/관리자 답변: 공백 없는 긴 문자열(계좌번호·URL)이 넘치지 않게 */
body.skin-gd01 dl.tb-view > dd,
body.skin-gd01 dl.manager-answer > dd { overflow-wrap: anywhere; }

/* 상세 제목줄(dt)은 height:50px 고정 flex — 긴 제목이 날짜를 밀어내며 넘치던 것 방지 */
body.skin-gd01 dl.tb-view > dt,
body.skin-gd01 dl.manager-answer > dt { gap: 10px; }
body.skin-gd01 dl.tb-view > dt > span:first-child {
    min-width: 0; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.skin-gd01 dl.tb-view > dt > span:last-child,
body.skin-gd01 dl.manager-answer > dt > span:last-child { flex: 0 0 auto; white-space: nowrap; }