/* ★ 2026-08-11 u10-inline-restore
 * 아래 .bottom-menu 규칙은 원본 CSS 파일에 없어서 내가 추측으로 쓴 것이었다.
 * 실제로는 원본 HTML 의 인라인 <style> 블록 안에 있었고, 그것을 index.html 에
 * 복구했으므로 추측본은 꺼 둔다. (원본이 진짜 값이다)
 */
/* ★ 2026-08-11 u10-supplement
 * PANDORA 원본 CSS 에 없던 규칙만 보충한다.
 *
 * 왜 필요한가:
 *   원본 사이트에서 CSS 를 받아왔지만 .bottom-menu 규칙이 어느 파일에도 없었다(실측 0건).
 *   그래서 하단 모바일 메뉴가 '스타일 없는 그냥 블록'으로 화면 맨 위에 세로로 쌓였다.
 *   나머지 레이아웃(.wrapper/.banner-section/.header-section/.page-content/.toggle-section/
 *   .game-provider/.board-section/.sc-btn/.g-panel)은 원본 CSS 에 전부 있어 정상 동작한다.
 *
 * 이 파일은 맨 마지막에 실어 원본을 덮어쓰지 않고 '없는 것만' 채운다.
 */

/* (하단 메뉴 규칙 제거 — 원본 인라인 style 이 담당) */

/* ── 기타 원본에 없던 자잘한 것 ───────────────────────── */
.other-icon { opacity: .92; }

/* ★ 2026-08-11 u10-four-fix
 * PANDORA 원본의 부트스트랩 모달 중 우리가 안 쓰는 것을 확실히 숨긴다.
 * 우리 화면은 우리 모달(#modal-login/#modal-register 등)을 쓰므로
 * 아래 것들은 절대 열리지 않는 죽은 마크업이다.
 * 부트스트랩 CSS 가 어떤 이유로든 안 실리면 .modal 의 display:none 이 사라져
 * 로그인/회원가입 폼이 페이지 맨 아래에 그대로 노출된다(사용자 제보 증상 4).
 * 부트스트랩에 의존하지 않고 우리가 직접 막는다.
 */
.loginModal,
.joinModal { display: none !important; }

/* ★ 2026-08-11 정정: #loginFormMobile 은 모바일 모달이 아니라 **헤더의 로그인 폼**이다
 * (아이디/비밀번호 입력칸 2개 + 로그인 버튼). 내가 이름만 보고 모달로 오해해 숨겼고
 * 그 결과 로그인/회원가입 UI 가 화면에서 사라졌다(사용자 제보). 숨김 대상에서 제외한다. */

/* ★ 2026-08-11 u10-rt-fix ─ 실시간보드 ─────────────────────────────
 *
 * (1) 여기 있던 `.realtime-board .tr` 규칙 4개를 **삭제했다.**
 *     내가 추측으로 쓴 것이었는데, 원본 css/style.css 에 이미 진짜 규칙이 있었다:
 *        .rolling-realtime ul li           height:48px 등            특이도 (0,1,2)
 *        .rolling-realtime ul li div.user   width:35%
 *        .rolling-realtime ul li div.amount color:var(--orange) font-size:18px width:35%
 *        .rolling-realtime ul li div.date   color:#ffdd95 width:30%
 *     내 선택자 `.realtime-board .tr` 는 특이도 (0,2,0) 으로 **원본보다 높아서 이겼다.**
 *     그래서 행 높이·금액 색·글자크기·폭 배분이 모두 내 값으로 덮여 있었다.
 *     교훈: 원본 CSS 에 규칙이 있는지 확인하기 전에 보충 규칙을 쓰지 않는다.
 *           쓸 때는 원본보다 특이도가 낮은 선택자를 쓴다.
 *
 * (2) 사용자 요청으로 실시간출금/실시간입금 탭 버튼을 숨긴다.
 *     원본에도 이 버튼은 있고 스타일도 있다(.realtime-board .realtime-nav button,
 *     width:calc(50% - 4px) height:42px border:solid 1px #614822 등).
 *     마크업은 그대로 두고 CSS 로만 숨겼으므로, 아래 한 규칙만 지우면 원래대로 돌아온다.
 *     탭이 없어도 .rolling-realtime 은 .active 인 것만 보이므로 실시간출금 목록만 남는다.
 */
/* .dflex-ac-jc 가 display:flex !important 라서(css/style.css:112)
 * 일반 display:none 은 이기지 못한다. !important 로 맞선다. */
.realtime-board .realtime-nav { display: none !important; }

/* ★ 2026-08-11 audit-fix ─ 모바일 하단메뉴가 모달을 덮는 문제
 * 원본 인라인 <style> 이 .bottom-menu 에 z-index:9999 를 준다.
 * 우리 모달은 .modal-overlay 2000 / .modal 1050 / .modal-backdrop 1040 이라
 * 모바일에서 하단바가 모달 아래쪽(제출 버튼 등)을 덮었다.
 * 인라인 style 쪽에는 !important 가 없으므로 여기서 !important 로 낮춘다. */
.bottom-menu { z-index: 1000 !important; }

/* ★ 2026-08-11 pandora-card ─ 카드 이미지 비율 고정
 * 원본 PANDORA 카드 이미지는 214x172 (약 5:4 가로형) 이다.
 * 그런데 우리 딜러 이미지는 512x512(정사각), 슬롯 게임 썸네일도 정사각 계열이다.
 * 원본 규칙 `.sc-btn .g-cont .g-img { width:100% }` 는 **높이를 정하지 않으므로**
 * 이미지 비율이 그대로 카드 높이가 된다 → 카드마다 높이가 달라 줄이 들쭉날쭉해진다.
 * 그래서 우리가 그린 카드(.live-card)에만 원본 비율을 강제하고 잘라 넣는다.
 * 원본 PANDORA 고정 카드는 이 규칙에 걸리지 않는다(.live-card 가 없다).
 * object-position 을 위쪽으로 두어 딜러 얼굴이 잘리지 않게 한다.
 * 특이도: .sc-btn.live-card .g-cont .live-thumb .g-img (0,5,0) > 원본 (0,3,0) 이라 이긴다. */
.sc-btn.live-card .g-cont .live-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 214 / 172;
  overflow: hidden;
}
.sc-btn.live-card .g-cont .live-thumb .g-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* aspect-ratio 를 모르는 구형 브라우저 대비 (172/214 = 80.37%) */
@supports not (aspect-ratio: 1 / 1) {
  .sc-btn.live-card .g-cont .live-thumb { height: 0; padding-top: 80.37%; position: relative; }
  .sc-btn.live-card .g-cont .live-thumb .g-img { position: absolute; left: 0; top: 0; }
}

/* ★ 2026-08-11 pandora-gamecard ─ 게임목록 카드 보정
 * 게임 카드는 원본과 같은 .sc-btn 을 쓴다(u10-gcard 로 우리 것만 구분).
 * 원본 규칙 `.sc-btn .g-cont .g-img { width:100% }` 는 높이를 정하지 않으므로
 * 썸네일 비율이 게임사(HL/오닉스/메가/에어라인)마다 달라 카드 높이가 들쭉날쭉해진다.
 * 원본은 한 공급사 이미지(325px 정사각 계열)라 균일하지만 우리는 섞여 있다.
 * → 정사각으로 고정하고 잘라 넣는다. 특이도 (0,5,0) > 원본 (0,3,0). */
.sc-btn.u10-gcard .g-cont { aspect-ratio: 1 / 1; }
.sc-btn.u10-gcard .g-cont .g-img { width: 100%; height: 100%; object-fit: cover; }
/* 게임목록은 카드가 많아 가로로 흐르게 둔다(원본 본문과 동일) */
#slot-game-grid, #air-game-grid, #talus-game-grid { text-align: center; }
@supports not (aspect-ratio: 1 / 1) {
  .sc-btn.u10-gcard .g-cont { height: 0; padding-top: 100%; position: relative; }
  .sc-btn.u10-gcard .g-cont .g-img { position: absolute; left: 0; top: 0; }
}

/* ★ 2026-08-11 inline-gamelist ─ 게임목록을 팝업이 아니라 페이지 안에 (원본과 동일)
 * 원본 실측 (/casino_cc/betslot.asp?vendorkey=X):
 *   body > div.wrapper > main.page-content.w-ba
 *     ├ section.toggle-section   라이브카지노 버튼 onclick="location.href='/main.asp'" ← 돌아가기
 *     ├ div.slot_search_box style="margin-top:40px"  > input.sch_slot placeholder="게임검색"
 *     └ a.sc-btn.w-ba × 710      ← page-content 직속, 감싸는 container 없음
 *   section.game-provider 는 그 페이지에 0개 (게임사 목록 자리가 게임목록으로 대체된다)
 *   .sch_slot { background:#181717; border:1px solid #eeeeee; padding:10px 20px;
 *               border-radius:5px; color:#ffffff }
 * 우리는 기존 팝업 오버레이를 그대로 재사용하고 겉모습만 눌러 '페이지 안 블록'으로 만든다.
 * 오버레이 마크업이 인라인 style 이라 !important 로만 덮을 수 있다. */
.u10-inline-gl {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  backdrop-filter: none !important;
}
.u10-inline-gl > div,
.u10-inline-gl > div > div {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* 첫 줄 = 게임사명 + 닫기(✕).
   원본엔 이 줄이 없지만(페이지 이동이라 브라우저 뒤로가기로 돌아간다)
   우리는 화면을 바꿔 끼우므로 돌아갈 수단이 필요해 남기고 톤만 맞춘다. */
.u10-inline-gl > div > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 26px 4px 12px !important;
  border-bottom: 1px solid rgba(200, 168, 75, 0.22) !important;
}
/* 검색칸 줄 — 원본은 가운데 정렬(margin-top:40px) */
.u10-inline-gl > div > div:nth-child(2) {
  padding: 40px 0 0 !important;
  text-align: center !important;
}
/* 검색칸 자체를 원본 .sch_slot 과 같은 모양으로 */
.u10-inline-gl input[type="text"] {
  width: auto !important;
  min-width: 280px !important;
  background: #181717 !important;
  border: 1px solid #eeeeee !important;
  padding: 10px 20px !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  text-align: center !important;
}
/* 카드 줄 — 페이지 안이므로 높이 제한을 풀고 원본처럼 가운데 정렬 */
/* ★ 2026-08-11 align-fix
 * 그리드에서 .gamelist-container/.dflex-ac-js 클래스를 떼어냈다(원본은 그 클래스를 안 쓴다).
 * .dflex-ac-js 의 display:flex !important + justify-content:flex-start 가 카드를 왼쪽으로 몰았다.
 * 원본은 body{text-align:center}(css/style.css:33)를 물려받아 inline-block 카드가 가운데 정렬된다.
 * 우리 style.css 가 먼저 실려 혹시 덮일 경우를 대비해 id 로 한 번 더 명시한다. */
.u10-inline-gl #slot-game-grid,
.u10-inline-gl #air-game-grid,
.u10-inline-gl #talus-game-grid {
  padding: 26px 0 0 !important;
  text-align: center !important;
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width: 600px) {
  .u10-inline-gl input[type="text"] { min-width: 0 !important; width: 92% !important; }
  .u10-inline-gl > div > div:nth-child(2) { padding: 24px 0 0 !important; }
}

/* ★ 2026-08-11 no-flash ─ 새로고침 직후 잘못된 상태가 보이는 것 방지
 * 원인: index.html 에 class="before-login active" 가 박혀 있어 로그인 폼이 즉시 그려지고,
 *       .after-login 을 주입하는 u10-auth.js 는 user10.js(242KB) 뒤인 11번째 스크립트라 늦다.
 * 조치: <head> 의 작은 스크립트가 첫 페인트 전에 html.u10-logged 를 붙이고,
 *       .after-login 마크업을 HTML 에 미리 넣어 두고, 여기서 상태에 맞게 고정한다.
 * u10-auth.js 의 syncAuth() 가 로그인/로그아웃 시 이 클래스를 갱신한다. */
html.u10-logged .before-login { display: none !important; }
html.u10-logged .after-login  { display: block !important; }
html:not(.u10-logged) .after-login { display: none !important; }

/* 게임사 카드: 정적 고정 카드(PANDORA 원본 4+6개)를 숨긴다.
 * 우리 렌더가 채우는 카드에는 .live-card 가 붙는다(user10.js makeCard).
 * 이렇게 하면 "고정 카드 4개가 먼저 보이다 바뀌는" 깜빡임이 사라진다.
 * 렌더가 실패하면 u10-cards.js 가 4초 뒤 안내문을 띄운다(이미 구현됨). */
#live-grid-row1 > .sc-btn:not(.live-card),
#slot-grid-row1 > .sc-btn:not(.live-card) { display: none !important; }