/* ══════════════════════════════════════════════════════════════
   user13 — 기존 스킨 본문을 숨겨 두는 규칙 (2026-09-16 v3)
   참고 화면(.ref-shell)만 보이고, 기존 스킨 본문(#u13-legacy)은 평소 감춘다.
   버튼을 누르면 u13-show 가 붙어 그때만 나타난다.

   ★ 지금까지의 사고 기록 (같은 실수를 되풀이하지 않기 위해)
     v1 : 닫힌 모달까지 position:fixed; inset:0; pointer-events:auto; z-index:3000 으로 강제 →
          modal-login / modal-register / modal-mypage 세 개가 화면 전체를 투명하게 덮어
          "아무것도 안 눌리는" 상태가 됐다. (elementFromPoint 로 확인)
     v2 : 모달이 열릴 때 :has() 로 숨김 상자 전체를 opacity:1 / overflow:visible 로 되살렸더니
          기존 스킨 화면(BLACK CASINO)이 배경에 통째로 드러났다. (사진으로 확인)
     v3 : 숨김을 opacity 대신 visibility 로 한다. visibility 는 자식에서 되살릴 수 있으므로
          상자는 계속 숨긴 채 "열린 모달만" 보이게 할 수 있다.
          모달은 position:fixed 라 부모의 left:-99999px 나 height:0 의 영향을 받지 않는다.
   ══════════════════════════════════════════════════════════════ */

/* 평소에는 화면에서 치워 둔다.
   display:none 을 안 쓰는 이유: 기존 코드가 요소 크기를 재는 곳이 있어 0 이 되면 오작동할 수 있다. */
#u13-legacy {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 1400px;
  height: 0;
  overflow: hidden;
  visibility: hidden;     /* ★ opacity 가 아니라 visibility — 자식에서 되살릴 수 있다 */
  pointer-events: none;
}

/* 버튼을 눌렀을 때만 제자리로 끌어와 보여 준다 (게임·쪽지함·공지 등) */
#u13-legacy.u13-show {
  position: relative;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  z-index: 5;
}

/* 기존 본문이 열려 있는 동안에는 참고 화면을 감춘다 (둘이 겹치지 않게) */
html.u13-legacy-open .ref-shell,
html.u13-legacy-open .ref-mobile-nav { display: none !important; }

/* ── 모달만 되살리기 ──
   상자는 계속 숨어 있고, 기존 코드가 연 모달만 화면 기준으로 띄운다.
   .active 는 로그인·회원가입·마이페이지, style="display:flex" 는 입출금·상세 모달이다. */
#u13-legacy .modal-overlay.active,
#u13-legacy #deposit-modal[style*="flex"],
#u13-legacy #withdraw-modal[style*="flex"],
#u13-legacy #msg-detail-modal[style*="flex"],
#u13-legacy #notice-detail-modal[style*="flex"],
#u13-legacy #inquiry-modal[style*="flex"],
#u13-legacy #point-convert-modal[style*="flex"],
#u13-legacy #game-error-modal[style*="flex"],
#u13-legacy #custom-confirm-overlay[style*="flex"] {
  visibility: visible;
  pointer-events: auto;
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  z-index: 3000;
}
/* 모달 안의 내용물도 함께 보이게 */
#u13-legacy .modal-overlay.active *,
#u13-legacy #deposit-modal[style*="flex"] *,
#u13-legacy #withdraw-modal[style*="flex"] *,
#u13-legacy #msg-detail-modal[style*="flex"] *,
#u13-legacy #notice-detail-modal[style*="flex"] *,
#u13-legacy #inquiry-modal[style*="flex"] *,
#u13-legacy #point-convert-modal[style*="flex"] *,
#u13-legacy #game-error-modal[style*="flex"] *,
#u13-legacy #custom-confirm-overlay[style*="flex"] * {
  visibility: visible;
}

/* ── id 충돌 되돌리기 ──
   참고 화면의 로그인 폼과 기존 스킨의 로그인 폼이 둘 다 id="login-form" 이다.
   그래서 참고 CSS 의 #login-form input{position:absolute;left:20%;top:25%…} 가
   기존 모달의 입력칸까지 밀어버려 아이디 칸이 사라지고 글자가 겹쳤다(사진으로 확인).
   기존 모달 안에서는 원래 모양으로 되돌린다. */
#u13-legacy #login-form input,
#u13-legacy #login-form .m-input {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(200,168,75,0.2) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
  letter-spacing: normal !important;
  margin-bottom: 10px !important;
}
/* 참고 화면 쪽 로그인 버튼 규칙이 기존 버튼에 새는 것도 막는다 */
#u13-legacy .m-btn,
#u13-legacy button[type="submit"] {
  position: static !important;
  font-size: 0.85rem !important;
  color: #000 !important;
}

/* 기존 본문을 열었을 때 참고 화면으로 돌아가는 버튼 */
.u13-back {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 4000;
  padding: 11px 26px;
  border: 1px solid #d9b668;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff5cb 0%, #f5d889 16%, #bf8d38 49%, #e6be6b 52%, #f9df9b 88%, #ad7a2c 100%);
  color: #181205;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 20px #000a;
}
html.u13-legacy-open .u13-back { display: block; }

/* ── "자동 로그인" 라벨이 세로로 쪼개지던 것 (2026-09-16) ──
   참고 CSS 의 #login-form 폭 규칙이 기존 모달 라벨에도 새어들어
   "자동 / 로그 / 인" 으로 3줄이 됐다(사진으로 확인). 줄바꿈을 막는다. */
#u13-legacy #login-form label,
#u13-legacy #login-form label span,
#u13-legacy .m-switch,
#u13-legacy .modal-sub,
#u13-legacy .modal-title {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  white-space: nowrap !important;
}
#u13-legacy #login-form label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#u13-legacy #login-form input[type="checkbox"] {
  position: static !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
/* ══════════════════════════════════════════════════════════════
   user13 — 기존 화면을 "팝업 창"으로 띄우기 (2026-09-16 v4)
   사장님 선택: ② 마닐라 화면은 배경에 그대로 두고 게임 목록만 큰 창으로.

   이전 방식의 문제
     카지노·슬롯을 누르면 기존 스킨 화면 전체(BLACK CASINO 헤더·배너·푸터까지)가
     통째로 드러나 "다른 사이트로 넘어간" 느낌이 났다.

   이번 방식
     기존 화면을 화면 덮는 창으로 띄우되, 창 안에서는 필요한 덩어리만 남긴다.
     switchTab() 이 이미 "해당 섹션만 켜기"를 해주므로 자바스크립트는 건드리지 않는다.
     #u13-legacy 직계 자식 21개 중 숨길 것 6개만 지정하면 된다(실측으로 확인).
   ══════════════════════════════════════════════════════════════ */

/* ── 팝업 창 본체 ── */
#u13-legacy.u13-show {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  visibility: visible;
  pointer-events: auto;
  z-index: 2500;
  background: rgba(3, 4, 3, 0.96);
  padding: 58px 12px 28px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* ── 창 안에서 숨길 덩어리 (기존 스킨의 자기 화면 틀) ──
   실측한 직계 자식 기준 : 헤더 · 히어로 · 메뉴바 · 한줄공지 · 하단정보 · 게임사로고 */
#u13-legacy.u13-show > header,
#u13-legacy.u13-show > .hero,
#u13-legacy.u13-show > .navbar,
#u13-legacy.u13-show > #notice-line-bar,
#u13-legacy.u13-show > #info-section,
#u13-legacy.u13-show > .partners {
  display: none !important;
}

/* 남길 것(게임목록·이벤트·스포츠·쪽지함·공지·고객센터)은 건드리지 않는다.
   보이고 안 보이고는 기존 switchTab() 이 정한다. */

/* 창 안 내용은 가운데로 모으고 너무 퍼지지 않게 */
#u13-legacy.u13-show > #game-section-wrapper,
#u13-legacy.u13-show > #event-section,
#u13-legacy.u13-show > #sports-section,
#u13-legacy.u13-show > #message-section,
#u13-legacy.u13-show > #notice-section,
#u13-legacy.u13-show > #support-section {
  max-width: 1400px;
  margin: 0 auto;
  border: 1px solid rgba(200, 168, 75, 0.35);
  border-radius: 10px;
  overflow: hidden;
}

/* ── 참고 화면은 배경에 그대로 둔다 ──
   (이전에는 여기서 .ref-shell 을 숨겨서 "넘어간" 느낌이 났다) */
html.u13-legacy-open .ref-shell { display: block !important; }
html.u13-legacy-open .ref-mobile-nav { display: none !important; }  /* 모바일 하단바만 가림 */
html.u13-legacy-open { overflow: hidden; }                          /* 뒤 배경 스크롤 잠금 */

/* ── 닫기 버튼 : 창 우측 위 X ── */
.u13-back {
  display: none;
  position: fixed;
  right: 16px;
  top: 12px;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 2600;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d9b668;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2418, #0d0f0a);
  color: #f4d998;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px #000a;
}
.u13-back:hover { background: #3a3120; border-color: #ffe9ad; }
html.u13-legacy-open .u13-back { display: block; }

/* 모바일에서는 창 여백을 줄인다 */
@media (max-width: 1023px) {
  #u13-legacy.u13-show { padding: 54px 6px 20px; }
  #u13-legacy.u13-show > #game-section-wrapper,
  #u13-legacy.u13-show > #event-section,
  #u13-legacy.u13-show > #sports-section,
  #u13-legacy.u13-show > #message-section,
  #u13-legacy.u13-show > #notice-section,
  #u13-legacy.u13-show > #support-section {
    border-radius: 6px;
  }
  .u13-back { right: 8px; top: 8px; width: 36px; height: 36px; font-size: 21px; }
}

/* ── 2026-09-16 팝업 다듬기 ──
   사진으로 확인한 것 : 닫기 버튼 글자가 세로로 쏟아지고, 데모에 없는
   HOTEL CASINO 칸이 제목만 덩그러니 남고, 창 배경이 너무 어두웠다. */

/* 닫기 버튼은 X 한 글자만 (글자가 길면 세로로 눌린다) */
.u13-back {
  font-size: 22px !important;
  line-height: 38px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  writing-mode: horizontal-tb !important;
}

/* 데모에는 호텔카지노 게임사가 없어 제목만 남는다 - 창에서 감춘다 */
#u13-legacy.u13-show #hotel-section { display: none !important; }

/* 창 배경을 조금 밝혀 뒤 마닐라 화면이 비치게 */
#u13-legacy.u13-show { background: rgba(3, 4, 3, 0.86); }

/* 게임 목록이 위쪽에 몰려 보이지 않게 여백 정리 */
#u13-legacy.u13-show > #game-section-wrapper { padding-bottom: 10px; }

/* ── 모달 닫기(X) 버튼 (2026-09-16) ──
   기존 스킨은 <i class="fas fa-times"> 로 X 를 그린다. 아이콘 글꼴이 없으면
   글자가 비어 버튼이 0x0 이 되고, 보이지도 눌리지도 않는다(실측으로 확인).
   글꼴과 무관하게 항상 보이도록 CSS 로 X 를 직접 그린다.
   글꼴이 정상이어도 겹치지 않게 버튼 안의 <i> 는 감춘다. */
#u13-legacy .modal-close,
#u13-legacy .tw-modal-x {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(200, 168, 75, 0.4) !important;
  border-radius: 6px !important;
  background: rgba(16, 14, 8, 0.92) !important;
  color: #f4d998 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 20 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#u13-legacy .modal-close i,
#u13-legacy .tw-modal-x i { display: none !important; }
#u13-legacy .modal-close::after,
#u13-legacy .tw-modal-x::after {
  content: "\2715";
  font-family: Arial, "Malgun Gothic", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: #f4d998;
}
#u13-legacy .modal-close:hover,
#u13-legacy .tw-modal-x:hover {
  background: #2f2718 !important;
  border-color: #ffe9ad !important;
}

/* ── 참고 모달 머리말 보호 (2026-09-16) ──
   .auth-header 는 <header> 태그다. 기존 스킨 legacy.css 의
   header{position:fixed;height:64px;display:flex} 가 여기에 걸려
   로고·소제목·제목·안내문이 가로로 늘어서고 제목이 두 줄로 쪼개졌다.
   참고 모달 안에서는 그 규칙을 전부 무효화한다. */
#app-dialog header,
#app-dialog .auth-header {
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: initial !important;
  justify-content: initial !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: auto !important;
  padding: 20px 58px 21px !important;
}
/* 기존 스킨의 다른 규칙이 모달 안으로 새어들지 않게 한다 */
#app-dialog .logo,
#app-dialog nav,
#app-dialog .navbar { all: unset; }
#app-dialog { z-index: 4000; }

/* 참고 모달 제목의 네모는 테두리가 아니라 브라우저 포커스 표시다(실측 outline:auto 1px).
   모달을 열 때 제목에 포커스를 주기 때문에 생긴다. 보기에만 거슬리므로 감춘다.
   다만 키보드로 훑을 때는 보여야 하므로 :focus-visible 은 남긴다. */
#app-dialog .dialog-title:focus,
#app-dialog #dialog-title:focus { outline: none !important; box-shadow: none !important; }
#app-dialog .dialog-title:focus-visible,
#app-dialog #dialog-title:focus-visible { outline: 2px solid #ffe9ad !important; outline-offset: 2px; }

/* ── 팝업 닫기 X 를 내용 상자 우상단에 붙인다 (2026-09-16) ──
   실측 : 내용 상자는 y58 부터인데 X 는 화면 기준 고정이라 y12 에 떠 있어
          "모달 밖에 X 가 있다" 로 보였다(46px 위).
   고침 : 팝업 안쪽 위에 자리를 만들고, X 를 그 자리 우측에 절대배치한다. */
#u13-legacy.u13-show { padding-top: 16px !important; }
html.u13-legacy-open .u13-back {
  position: absolute !important;
  top: 24px !important;
  right: 22px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2600 !important;
}
@media (max-width: 1023px) {
  html.u13-legacy-open .u13-back { top: 18px !important; right: 12px !important; }
}

/* 팝업을 진짜 모달처럼 보이게 + 닫기 버튼을 그 상자 안에 (2026-09-16 저녁)
   실측 : 상자는 배경이 투명이고 테두리가 1px·불투명도 0.35 라 어두운 덮개와 구분이 안 됐고,
          닫기 버튼은 문서(BODY) 의 자식이라 상자와 따로 놀았다. */
#u13-legacy.u13-show .u13-panel {
  position: relative !important;
  background-color: #0f0e0a !important;
  border: 1px solid rgba(200,168,75,0.55) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65) !important;
}
#u13-legacy.u13-show .u13-panel > .u13-back {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2600 !important;
}
@media (max-width: 1023px) {
  #u13-legacy.u13-show .u13-panel > .u13-back { top: 8px !important; right: 8px !important; }
}

/* 팝업 상자 위 여백 (2026-09-16 저녁) : 상자가 화면 윗변에 붙어 잘린 것처럼 보였다. */
#u13-legacy.u13-show { padding-top: 44px !important; }
@media (max-width: 1023px) {
  #u13-legacy.u13-show { padding-top: 20px !important; }
}

/* 안내문(토스트) 가 작아 놓치기 쉬웠다 (2026-09-16 실측 11.5px) */
#site-toast {
  font-size: 15px !important;
  padding: 14px 22px !important;
  background: #15120a !important;
  border: 1px solid rgba(200,168,75,0.75) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6) !important;
  max-width: min(420px, 90vw) !important;
  line-height: 1.45 !important;
}