/* =========================================================
   MAIN CSS
========================================================= */

:root{
  --bg: #ffffff;
  --bg-2: #ffffff;

  --panel: #0e2a26;
  --panel-2: #0c2421;
  --panel-3: #0a1f1c;

  --green: #117a5e;
  --green-2: #0f6f56;
  --green-3: #0d5f49;

  --gold: #c7a24a;
  --gold-2:#a8842f;

  --text: #e8f2ee;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --ring: 0 0 0 3px rgba(199,162,74,.28);

  --drawer-w: 300px;

  /* ---------------------------------------------------------------
   | 모바일 하단 고정 바               [2026-08-31]
   |
   | ★ 이 두 값이 우측 하단 3층 배치의 **유일한 기준**이다.
   |   .lt-mbar 자신, LiveChat 버블(#chat-widget), 플로팅 독(.lt-dock),
   |   본문 하단 여백이 전부 여기서 읽는다.
   |   숫자를 다른 데 다시 박으면 바 높이를 바꿀 때 나머지가 옛 자리에
   |   남아 겹친다 — 이 저장소의 1번 사고 유형이다.
   |
   | ★ safe-area 는 아이폰 홈 인디케이터 자리다. 지원 안 하면 0px.
   --------------------------------------------------------------- */
  --lt-mbar-h: 60px;
  --lt-mbar-safe: 0px;
}

/*
 * ★ env() 를 :root 안에 바로 넣지 않는다.
 *
 *   env() 를 모르는 브라우저에서는 그 커스텀 속성이 "계산 시점에 무효" 가
 *   되고, 그 값을 쓰는 calc() 전체가 함께 무효가 된다. 그러면 하단 바의
 *   height 와 padding 이 통째로 날아간다 — 배경만 남고 버튼이 삐져나온다.
 *   @supports 로 감싸면 아는 브라우저에서만 덮어쓴다.
 */
@supports (padding: env(safe-area-inset-bottom)){
  :root{ --lt-mbar-safe: env(safe-area-inset-bottom, 0px); }
}

*{ box-sizing: border-box; }
html, body { touch-action: manipulation; }

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #191e2c;
  color: var(--text);
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
button, input{ font: inherit; }
img{ max-width: 100%; display: block; }

.container{
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
}

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
   TOP HEADER BACKGROUND
========================================================= */
.top-header{
  background: linear-gradient(135deg, #0f6f56 0%, #0d5f49 55%, #0a3b2e 100%);
  padding-top: 0;
}

/* =========================================================
   TOP NAV STATE BY BODY CLASS
========================================================= */

body.guest #guestNav{
  display: flex;
}

body.guest #memberNav{
  display: none !important;
}

body.logged-in #guestNav{
  display: none !important;
}

body.logged-in #memberNav{
  display: flex !important;
}

/* =========================================================
   TOP UTILITY BAR
========================================================= */
.utility-bar{
  background: #0b0f10;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.utility-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.utility-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

@media (max-width: 767px){
  .utility-left{
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }
}

.mini-mark{ display:none !important; }

.wp-icon{
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.utility-text{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

.utility-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .25px;
}

.utility-right--guest{
  gap: 14px;
}

.utility-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.utility-ico{
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: .95;
  flex: 0 0 auto;
}

.user-pill{
  text-decoration: none;
  cursor: pointer;
}

.user-pill, .balance-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  font-size: 11px;
  white-space: nowrap;
}

/* 잔액 칩이 링크(→ /mypage/myBalance)가 됐다 — <a> 기본 스타일을 지운다 [2026-09-08] */
a.balance-pill{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.balance-pill:hover .balance-value{
  text-decoration: underline;
}


.user-name{
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.balance-label{
  color: rgba(255,255,255,.75);
  font-weight: 700;
  letter-spacing: .2px;
}

.balance-value{
  font-weight: 800;
  color: var(--gold);
}

.utility-link{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .25px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: rgba(255,255,255,.88);
  transition: color .15s ease, opacity .15s ease;
}

.utility-link:hover{ color: rgba(199,162,74,.95); }

.utility-link:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
  padding: 2px 6px;
}

.utility-link.danger{ color: rgba(255,255,255,.88); }
.utility-link.danger:hover{ color: rgba(255,120,120,.95); }

.utility-link--signup{
  font-weight: 800;
  color: #ffffff;
}

/* =========================================================
   UTILITY LANGUAGE DROPDOWN
========================================================= */
.lang-dropdown{
  position: relative;
}

.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.lang-toggle:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.lang-flag{
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}

.lang-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.92);
}

.lang-menu{
  position: absolute;
  top: calc(100% + 0px);
  right: 0;
  width: 220px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: none;
  z-index: 120;
}

.lang-dropdown:hover .lang-menu,
.lang-dropdown:focus-within .lang-menu{
  display: block;
}

.lang-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: background .18s ease, opacity .18s ease;
}

.lang-item:hover{
  background: rgba(255,255,255,.08);
}

.lang-item__flag{
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}

.lang-item.is-active{
  background: rgba(255,255,255,.06);
}

/* =========================================================
   UTILITY USER DROPDOWN                        [2026-08-31]
   ---------------------------------------------------------
   상단 계정 칩(user-pill)에 마우스를 올리면 My Page /
   Play History / Logout 이 열린다. 예전에는 이 셋 중 둘이
   유틸리티 바에 링크로 나와 있었다(History · Logout).

   ★ 바로 위 .lang-dropdown 과 **같은 방식**이다.
     hover + focus-within 만 쓰고 JS 를 하나도 쓰지 않는다.
     같은 바 안에서 두 드롭다운이 다른 방식으로 열리면
     한쪽을 고칠 때 다른 쪽이 조용히 어긋난다.

   ★ 메뉴와 칩 사이에 틈을 두지 않는다(top: 100%).
     틈이 있으면 마우스가 내려가는 도중 hover 가 끊겨
     메뉴가 닫힌다. .lang-menu 가 같은 이유로 그렇게 돼 있다.

   ★ 이 바는 767px 이하에서 통째로 숨는다(.utility-right).
     모바일은 좌측 서랍 메뉴가 같은 항목을 갖고 있다.
========================================================= */
.user-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/*
 * ★ [2026-09-01] 칩이 <a> 에서 <button> 이 됐다.
 *   누르면 accountDetail 로 이동해 버려서 레이어를 고를 수 없었기 때문이다.
 *   버튼의 기본 테두리·배경·글꼴을 지워 예전 <a> 와 같은 모양을 유지한다.
 *   (안 지우면 브라우저 기본 회색 버튼이 헤더에 박힌다)
 */
button.user-pill{
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button.user-pill:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 999px;
}

.user-menu{
  position: absolute;
  top: 100%;
  left: 0;
  width: 190px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  margin-top: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: none;
  z-index: 120;
}

/* 칩과 메뉴 사이의 margin-top 을 마우스가 건너갈 수 있게 덮어 준다 */
.user-menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

/*
 * 여는 방법은 **두 가지**다.
 *   :hover     PC 마우스
 *   .is-open   클릭·탭·키보드(Enter/Space) — header.php 의 위임 스크립트
 *
 * ★ :focus-within 을 **뺐다.** 넣었다가 실제로 깨졌다.
 *
 *   버튼을 누르면 포커스가 버튼에 남는다. 그 상태에서 focus-within 이
 *   메뉴를 계속 열어 두기 때문에, 한 번 더 눌러서 닫거나 Esc 로 닫아도
 *   화면은 그대로 열려 있었다 (헤드리스 실측: 클래스는 빠지는데
 *   display 는 block). 클래스만 보고는 안 보이는 종류의 버그다.
 *
 *   키보드 사용자는 <button> 이라 Enter/Space 가 click 이벤트를 내므로
 *   같은 경로로 열린다. 즉 focus-within 없이도 접근성은 유지된다.
 */
.user-dropdown:hover .user-menu,
.user-dropdown.is-open .user-menu{
  display: block;
}

.user-menu__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.user-menu__item:hover{
  background: rgba(255,255,255,.08);
}

.user-menu__item--danger{
  color: rgba(255,255,255,.88);
}

.user-menu__item--danger:hover{
  background: rgba(255,120,120,.12);
  color: rgba(255,120,120,.95);
}

.user-menu__ico{
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: .9;
  flex: 0 0 auto;
}

/* ---- 드롭다운 머리(이메일 + 잔액) -----------------------
   PESO77 처럼 모바일 드롭다운에는 이메일과 잔액이 한 번 더
   나온다. PC 유틸바에는 둘 다 이미 보이므로 숨긴다.
   (마크업은 views/include/user_menu.php 한 곳뿐이고,
    두 곳의 차이는 여기 CSS 로만 만든다) */
.user-menu__head{ display: none; }

.user-menu__mail{
  padding: 4px 8px 8px;
  font-size: 11px;
  color: rgba(255,255,255,.62);
  word-break: break-all;
}

.user-menu__bal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  padding: 10px 8px;
  border-radius: 10px;
  /*
   * [2026-09-01] 초록 틴트를 뺐다.
   *   상단 잔액 pill 을 앰버로 바꾸고 나니 이 줄만 초록으로 남아
   *   같은 "잔액" 인데 색이 둘이 됐다. 여기는 **표시 전용**이라
   *   중립색으로 두고, 아래 COMP 행만 앰버로 눌러야 할 곳임을 알린다.
   */
  background: rgba(255,255,255,.06);
  color: inherit;
  text-decoration: none;
}

.user-menu__bal-k{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
}

.user-menu__bal-v{
  font-size: 13px;
  font-weight: 900;
  color: var(--gold, #facf5b);
  white-space: nowrap;
}

/*
 * COMP 행 — 누를 수 있다 (mypage/myBalance 로 간다).
 * 잔액 행은 표시만 하므로 hover 반응이 없다. 두 행이 같은 모양인데
 * 하나만 눌린다면 사용자가 알 수 없으므로, 색과 hover 로 구분한다.
 */
.user-menu__bal--comp{
  background: rgba(224,162,26,.14);
  border: 1px solid rgba(224,162,26,.28);
  transition: background .18s ease, border-color .18s ease;
}

.user-menu__bal--comp:hover{
  background: rgba(224,162,26,.24);
  border-color: rgba(224,162,26,.5);
  color: inherit;
}

.user-menu__coin{
  display: inline-flex;
  color: #e0a21a;
}


/* =========================================================
   MOBILE TOP BAR CLUSTER + BOTTOM BAR        [2026-08-31]
   ---------------------------------------------------------
   PESO77 배치를 그대로 가져왔다.

     상단  [로고]            [잔액 +] [계정칩 ▾]
     하단  [☰] [아이디·잔액]          [🎁 Rewards]

   둘 다 **767px 이하 전용**이다. PC 는 유틸리티 바가 그대로다.

   ★ 햄버거는 하단 바가 원본이다. 상단에서 옮겨 왔고 복제가 아니다
     (script.js 가 .nav-toggle 첫 매치 하나만 잡는다).

   ★ 하단 바 높이는 :root 의 --lt-mbar-h 한 곳에서 온다.
     버블·독·본문여백이 전부 그 값을 읽는다.
========================================================= */

/* ---- 상단바 오른쪽 묶음 -------------------------------- */
.nav-mobile-user{
  display: none;                 /* PC 에서는 안 쓴다 */
  align-items: center;
  gap: 8px;
  justify-self: end;
  min-width: 0;
}

/*
 * 상단 잔액 pill — 오렌지/노랑 (CK 지시, 2026-09-01)
 *
 * ★ 새 색을 만들지 않고 이 사이트에 **이미 있는** 앰버를 쓴다.
 *   독의 Affiliates 버튼(.lt-dock__btn--aff)과 같은 값이다.
 *   같은 뜻의 색이 화면마다 조금씩 다르면 나중에 어느 것이 맞는지
 *   알 수 없게 된다.
 *
 * ★ 글자색이 어두운 것(#22160a)은 대비 때문이다. 앰버 위에 흰 글자는
 *   대비가 3:1 도 안 나온다. 잔액은 반드시 읽혀야 하는 숫자다.
 */
.nav-bal{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0a21a, #b87d0c);
  color: #22160a;
  text-decoration: none;
  white-space: nowrap;
}

.nav-bal:hover{ color: #22160a; }

.nav-bal__v{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

.nav-bal__plus{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* 밝은 앰버 위이므로 흰 반투명이 아니라 **어두운** 반투명이어야 보인다 */
  background: rgba(0,0,0,.20);
  color: #22160a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* 화면에는 안 보이지만 스크린리더는 읽는 글자 */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 하단 고정 바 -------------------------------------- */
.lt-mbar{
  display: none;                 /* PC 에서는 안 쓴다 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9400;                 /* 독(9500) 아래, 본문 위 */
  align-items: center;
  gap: 8px;
  height: calc(var(--lt-mbar-h) + var(--lt-mbar-safe));
  padding: 0 10px var(--lt-mbar-safe);
  background: #252e48;
  border-top: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 -6px 18px rgba(0,0,0,.28);
}

.lt-mbar__user{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;                  /* ★ 없으면 긴 이메일이 flex 를 밀어낸다 */
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  /*
   * 네이비 (CK 지시, 2026-09-01).
   * ★ 바 배경이 #252e48 이라 같은 네이비를 쓰면 버튼이 사라진다.
   *   한 단계 밝은 네이비 + 옅은 테두리로 경계를 만든다.
   */
  background: linear-gradient(135deg, #3c4b7a, #2c3760);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
}

.lt-mbar__id{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-mbar__bal{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;

  /*
   * ★ 잔액도 잘릴 수 있다.
   *   320px 화면 + 긴 이메일 + 1,234,567.89 조합에서 마지막 자리가
   *   글자 중간에서 잘렸다(헤드리스 실측). 잘린 숫자는 **틀린 숫자로
   *   읽힌다** — 생략 부호로 끝나면 최소한 "더 있다" 를 알 수 있다.
   */
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-mbar__rw{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  /*
   * 네이비 (CK 지시). 옆의 사용자 버튼보다 한 단계 밝게 해서
   * 눌러야 할 쪽이 어디인지 남긴다 — 둘이 같은 색이면 버튼이 아니라
   * 한 덩어리로 보인다.
   */
  background: linear-gradient(135deg, #4c5fa6, #35437f);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  text-decoration: none;
}
.lt-mbar__rw:hover{ color: #fff; }

/* 선물 아이콘만 금색으로 남긴다 — 네이비 안에서 "보상" 이 읽히게 */
.lt-mbar__rw-ico{ display: inline-flex; flex: 0 0 auto; color: #facf5b; }

.lt-mbar__rw-txt{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.lt-mbar__rw-t1{ font-size: 12px; font-weight: 900; }
.lt-mbar__rw-t2{ font-size: 10px; font-weight: 600; opacity: .8; }

/*
 * 아직 출석을 안 받은 상태 — 서랍·유틸바 배지의 is-ready 와 같은 뜻이다.
 * 여기서는 색만 초록으로 바꿔 "받을 게 있다" 를 알린다.
 */
/*
 * 아직 출석을 안 받은 상태 — 서랍·유틸바 배지의 is-ready 와 같은 뜻이다.
 * 하단 바는 네이비로 통일했으므로 색을 바꾸는 대신 **금색 테두리**로
 * "받을 것이 있다" 를 알린다.
 */
.lt-mbar__rw.is-ready{
  background: linear-gradient(135deg, #4c5fa6, #35437f);
  border-color: rgba(250,207,91,.75);
  box-shadow: 0 0 0 1px rgba(250,207,91,.28);
  color: #fff;
}

.lt-mbar__guest{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.lt-mbar__auth{
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.lt-mbar__auth--signup{
  border-color: transparent;
  background: linear-gradient(135deg, #e0a21a, #b87d0c);
  color: #22160a;
}

/* =========================================================
   MAIN NAV
========================================================= */
.nav-wrap{
  background: #252e48;
  border-bottom: 1px solid rgba(0,0,0,.3);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-accent{
  height: 3px;
  background: #facf5b;
}

.nav-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 0;
  gap: 16px;
}

.nav-toggle{
  display: none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: rgba(0,0,0,.12);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle:focus-visible{ outline: none; box-shadow: var(--ring); }

.burger{ width: 18px; height: 12px; position: relative; }
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}
.burger::before{ top:0; box-shadow: 0 5px 0 rgba(255,255,255,.92); }
.burger::after{ bottom:0; }

.nav-left,
.nav-right{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-left{ justify-content: flex-start; }
.nav-right{ justify-content: flex-end; }

.nav-link{
  position: relative;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .7px;
  padding: 10px 6px;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
  background: linear-gradient(90deg, #ffd84d 0%, #ffd84d 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.92);
  background-clip: text;
  transition: background-size .35s ease;
}

.nav-link:hover{
  background-size: 100% 100%;
  -webkit-text-fill-color: transparent;
}

.nav-link.active{
  background-size: 100% 100%;
  -webkit-text-fill-color: transparent;
}

.nav-logo{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav-logo .logo-mark,
.nav-logo .logo-text{ display:none !important; }

.nav-logo-img{
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.nav-balance{
  display: none;
  justify-self: end;
  text-align: right;
  line-height: 1.05;
  white-space: nowrap;
}

.nav-balance .nav-balance-label{
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
  color: rgba(255,255,255,.75);
}

.nav-balance .nav-balance-value{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.nav-guest-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  justify-self: end;
  white-space: nowrap;
}

.nav-auth-link{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(255,255,255,.92);
  transition: color .18s ease;
}

.nav-auth-link:hover{
  color: #ffd84d;
}

.nav-auth-link--signup{
  font-weight: 900;
}

.nav-lang-dropdown{
  position: relative;
}

.nav-lang-toggle{
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.nav-lang-toggle:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}

.nav-lang-flag{
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 999px;
}

.nav-lang-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: #6c1181;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: none;
  z-index: 120;
}

.nav-lang-dropdown:hover .nav-lang-menu,
.nav-lang-dropdown:focus-within .nav-lang-menu{
  display: block;
}

.nav-lang-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: background .18s ease;
}

.nav-lang-item:hover{
  background: rgba(255,255,255,.08);
}

.nav-lang-item__flag{
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}

.nav-lang-item.is-active{
  background: rgba(255,255,255,.06);
}

/* drawer container (mobile only) */
.nav{ display: none; }

/* =========================================================
   HERO
========================================================= */
.hero{ padding: 16px 0 10px; }
.hero-shell{ position: relative; }

.hero-stage{
  height: 270px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(30, 6, 6, 0.92), rgba(45, 8, 8, 0.92));
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media .hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .35s ease;
}
.hero-media .hero-slide.is-active{ opacity: 1; }
.hero-media video.hero-slide{ display:block; }

.hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(80% 120% at 20% 30%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.52) 100%);
}

.hero-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.32);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  color: rgba(255,255,255,.95);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  z-index: 3;
}
.hero-arrow:hover{
  transform: translateY(-50%) scale(1.04);
  background: rgba(0,0,0,.4);
  border-color: rgba(199,162,74,.28);
}
.hero-arrow:focus-visible{ outline: none; box-shadow: var(--ring); }
.hero-arrow.left{ left: 12px; }
.hero-arrow.right{ right: 12px; }
.hero-arrow span{ font-size: 24px; font-weight: 800; }

.hero-dots{
  position:absolute;
  left: 16px;
  bottom: 12px;
  display:flex;
  gap: 8px;
  align-items:center;
  z-index: 3;
}
.hero-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.hero-dot.active{
  width: 22px;
  background: rgba(199,162,74,.75);
  border-color: rgba(199,162,74,.35);
}

/* =========================================================
   PROMO SHOWCASE
========================================================= */
.promo-showcase{
  padding: 2px 0 12px;
}

.promo-showcase__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 12px;
  align-items: stretch;
}

.promo-left,
.promo-cats{
  min-width: 0;
}

.promo-head{
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.promo-head h2,
.promo-cats h2{
  margin: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #ffe45f;
}

.promo-see-more{
  font-size: 12px;
  font-weight: 500;
  color: rgba(210,220,255,.72);
  white-space: nowrap;
  transition: color .18s ease;
}

.promo-see-more:hover{
  color: #ffffff;
}

/* =========================================================
   프로모션 마퀴 (좌로 흐르는 배너) — 아이폰 수정   [2026-08-23]
   ---------------------------------------------------------
   증상 : 아이폰에서 아예 안 흐르거나 아주 천천히 기어간다.
          안드로이드는 정상.

   원인 세 가지가 겹쳐 있었다.

   1) width: max-content
      구형 iOS 사파리는 flex 컨테이너에 붙은 max-content 를
      제대로 계산하지 못한다. 무시되면 트랙 폭이 부모 폭
      (예: 350px)이 되어 버린다.

   2) transform: translateX(calc(-50% - 5px))
      그 -50% 는 **트랙 폭의 절반**이다. 1) 때문에 트랙 폭이
      350px 로 잡히면 이동 거리가 175px 밖에 안 된다.
      32초에 175px — 이게 "너무 천천히 간다"의 정체다.
      안드로이드에서는 max-content 가 맞게 잡혀 트랙이
      1350px 이라 제대로 흘렀다.
      → 이제 % 를 안 쓰고 px 로 직접 계산한다. 트랙 폭을
        어떻게 잡든 이동 거리는 항상 정확하다.

   3) gap: 10px  (flex gap 은 iOS 14.1 이상)
      + .promo-banner 마다 transform: translateZ(0)
      배너 10개가 각각 별도 합성 레이어가 되어 아이폰의
      레이어 예산을 넘기면 사파리가 애니메이션을 그냥 버린다.
      → gap 대신 margin-right, translateZ 는 제거.
        합성 레이어는 트랙 하나만 쓴다.

   폭을 바꿀 때는 --promo-item 도 같이 바꿀 것.
   (아래 반응형 블록들 참고)
========================================================= */
.promo-marquee{
  position: relative;
  overflow: hidden;
  border-radius: 8px;

  --promo-item: 260px;   /* .promo-banner 한 장의 폭 */
  --promo-gap:  10px;    /* 배너 사이 간격 */
  --promo-dur:  32s;     /* 한 바퀴 도는 시간 */
}

.promo-marquee__track{
  display: flex;
  flex-wrap: nowrap;

  /* max-content 가 안 먹어도 아래 이동 거리는 px 라 문제없다 */
  width: -webkit-max-content;
  width: max-content;

  animation: promoMarquee var(--promo-dur) linear infinite;

  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.promo-marquee:hover .promo-marquee__track{
  animation-play-state: paused;
}

.promo-banner{
  position: relative;
  flex: 0 0 var(--promo-item);
  width: var(--promo-item);
  height: 170px;
  margin-right: var(--promo-gap);   /* gap 대신 — 구형 iOS 대응 */
  overflow: hidden;
  border-radius: 8px;
  background: #252e48;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  /* transform: translateZ(0) 제거 — 위 3) 참고 */
}

.promo-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform .35s ease;
}

.promo-banner:hover img{
  transform: scale(1);
}

.promo-banner:focus-visible,
.promo-cat:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

.promo-cats{
  display: flex;
  flex-direction: column;
}

.promo-cats h2{
  height: 26px;
  display: flex;
  align-items: center;
}

.promo-cats__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
}

.promo-cat{
  min-height: 82px;
  border-radius: 6px;
  background: #252e48;
  border: 1px solid rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.promo-cat:hover{
  transform: translateY(-2px);
  background: #2b3655;
  border-color: rgba(255,228,95,.20);
}

.promo-cat__icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
}

.promo-cat__icon img{
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.promo-cat__label{
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: #ffffff;
}

/*
 * 배너 5장이 두 벌(총 10장) 깔려 있다.
 * 한 벌만큼 왼쪽으로 밀면 다음 벌이 정확히 같은 자리에 와서
 * 이어 붙은 것처럼 보인다.
 *
 * 이동 거리 = 5 x (배너 폭 + 오른쪽 여백)
 *
 * ★ % 를 쓰지 않는다. 예전 -50% 는 트랙 폭을 기준으로 하는데
 *   구형 iOS 에서 트랙 폭이 잘못 잡혀 거의 안 움직였다.
 */
@keyframes promoMarquee{
  from{ transform: translate3d(0, 0, 0); }
  to{
    transform: translate3d(
      calc(-5 * (var(--promo-item) + var(--promo-gap))), 0, 0
    );
  }
}

/* iOS 접근성에서 "동작 줄이기"를 켠 사용자는 흐르지 않게 */
@media (prefers-reduced-motion: reduce){
  .promo-marquee__track{ animation: none; }
}


@media (max-width: 1199px){
  .promo-showcase__inner{
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .promo-marquee{ --promo-item: 238px; }   /* 키프레임 이동거리도 같이 따라간다 */

  .promo-banner{
    height: 150px;
  }
}

@media (max-width: 991px){
  .promo-showcase__inner{
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .promo-cat{
    min-height: 70px;
  }

  .promo-marquee{ --promo-item: 220px; }

  .promo-banner{
    height: 132px;
  }
}

@media (max-width: 480px){
  .promo-showcase{
    padding-top: 0;
  }

  .promo-head{
    height: 24px;
  }

  .promo-head h2{
    font-size: 13px;
  }

  .promo-marquee{ --promo-item: 210px; }

  .promo-banner{
    height: 118px;
  }
}

/* =========================================================
   GAMES SEARCH
========================================================= */
.games{ padding: 6px 0 26px; }

.games-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.games-title{
  display:flex;
  align-items:center;
  gap: 10px;
}
.games-title h2{
  margin: 0;
  font-size: 11px;
  letter-spacing: .8px;
  font-weight: 500;
  color: #ffffff;
}
.flame{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }

.games-search{
  min-width: 280px;
  width: min(420px, 100%);
}

.search-box{ position: relative; width: 100%; }


.lt-sel__native{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  padding: 0 40px 0 16px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255,255,255,.92);
  background: #252e48;
  border: 1px solid rgba(255,255,255,.10);
  outline: none;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-box input{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  padding: 0 40px 0 16px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  outline: none;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search-box input::placeholder{ font-size: 12px; color: rgba(232,242,238,.55); }
.search-box input:focus{ border: 1px solid #ffe588; box-shadow: none; }

.search-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: .75;
  pointer-events: none;
}

/* =========================================================
   GAME GRID
========================================================= */
.grid-wrap{ position: relative; }

.game-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.game-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border: 0;
  outline: none;
  padding: 0;
  min-height: 132px;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease;
}
.game-card:hover{ transform: translateY(-3px); box-shadow: 0 24px 52px rgba(0,0,0,.32); }
.game-card:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(199,162,74,.24), 0 24px 52px rgba(0,0,0,.32); }

.game-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: rgba(0,0,0,.25);
}

.game-badge{
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.9);
  z-index: 7;
}

.game-fade{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 42%,
    rgba(0,0,0,.52) 74%,
    rgba(0,0,0,.90) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.game-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 5;
}
.game-play::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.game-play img{
  width: 104px;
  height: 104px;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
.game-card:hover .game-play,
.game-card:active .game-play,
.game-card.is-pressed .game-play{
  opacity: 1;
  transform: scale(1);
}

.game-meta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  z-index: 8;
}
.game-name{
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .3px;
  color: #ffffff;
  text-shadow: 0 10px 18px rgba(0,0,0,.78);
  padding: 0 8px;
}
.game-provider{ display: none !important; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  margin-top: 28px;
  background: #000000;
  color: rgba(255,255,255,.88);
}

.footer-top{
  background: #252e48;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-top__inner{
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  padding: 0 0;
}

.footer-top__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .35px;
  color: #ffffff;
  text-decoration: none;
  transition: color .18s ease, font-weight .18s ease, opacity .18s ease;
}

.footer-top__link:hover{
  color: #FFC400;
  font-weight: 700;
}

.footer-top__link:focus-visible{
  outline: none;
  color: #FFC400;
  font-weight: 700;
}

.footer-payments{
  background: #101010;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.footer-payments__inner{
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
  padding: 18px 0;
}

.footer-pay-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-pay-ico{
  height: 20px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  opacity: .5;
  filter: grayscale(100%);
  transition: opacity .2s ease, transform .2s ease;
}

.footer-pay-item:hover .footer-pay-ico{
  opacity: .82;
  transform: translateY(-1px);
}

.footer-bottom{
  background: #000000;
}

.footer-bottom__inner{
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 0 30px;
}

.footer-brand{
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.footer-brand__logo{
  width: auto;
  height: 48px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.footer-brand__text,
.footer-meta__text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand__text span,
.footer-meta__text span{
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.55);
  letter-spacing: .2px;
}

.footer-meta{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  min-width: 0;
}

.footer-meta__item{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.footer-meta__logo{
  width: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.footer-meta__logo--license{
  height: 64px;
}

.footer-meta__logo--u2is{
  height: 36px;
}

.footer-meta__text a{
  color: #35B98E;
  font-weight: 700;
  text-decoration: none;
}

.footer-meta__text a:hover{
  opacity: .82;
}

@media (max-width: 1199px){
  .footer-top__inner{
    gap: 34px;
  }

  .footer-payments__inner{
    gap: 34px;
  }

  .footer-bottom__inner{
    gap: 24px;
  }

  .footer-meta{
    gap: 30px;
  }
}

@media (max-width: 991px){
  .footer-top__inner{
    gap: 22px 30px;
    padding: 8px 0;
  }

  .footer-top__link{
    min-height: 40px;
  }

  .footer-payments__inner{
    gap: 26px 30px;
    padding: 16px 0;
  }

  .footer-pay-ico{
    height: 28px;
    max-width: 140px;
  }

  .footer-bottom__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }

  .footer-meta{
    width: 100%;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (max-width: 767px){
  .footer-top__inner{
    justify-content: center;
    gap: 10px 18px;
    padding: 10px 0;
  }

  .footer-top__link{
    min-height: auto;
    font-size: 11px;
    text-align: center;
  }

  .footer-payments__inner{
    gap: 18px 22px;
    padding: 16px 0;
  }

  .footer-pay-ico{
    height: 24px;
    max-width: 120px;
  }

  .footer-brand{
    align-items: flex-start;
  }

  .footer-brand__logo{
    height: 42px;
  }

  .footer-meta{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
  }

  .footer-meta__item{
    gap: 14px;
  }

  .footer-meta__logo--license{
    height: 56px;
  }

  .footer-meta__logo--u2is{
    height: 32px;
  }
}

@media (max-width: 480px){
  .footer-top__inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    justify-items: center;
  }

  .footer-top__link{
    font-size: 10.5px;
    line-height: 1.25;
  }

  .footer-payments__inner{
    gap: 16px 18px;
  }

  .footer-pay-ico{
    height: 22px;
    max-width: 104px;
  }

  .footer-bottom__inner{
    padding: 24px 0 24px;
  }

  .footer-brand{
    gap: 14px;
  }

  .footer-brand__logo{
    height: 36px;
  }

  .footer-brand__text span,
  .footer-meta__text span{
    font-size: 11px;
  }

  .footer-meta__logo--license{
    height: 48px;
  }

  .footer-meta__logo--u2is{
    height: 28px;
  }
}

/* =========================================================
   MOBILE FOOTER RW1
========================================================= */

.site-footer-mobile{
  display: none;
  background: #000;
  color: #fff;
}

.footer-mobile-top{
  background: #252e48;
  padding: 10px 0 12px;
}

.footer-mobile-accordion{
  width: 100%;
}

.footer-mobile-summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 15px;
  border-radius: 14px;
  background: #181d2e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  cursor: pointer;
  user-select: none;
}

.footer-mobile-summary::-webkit-details-marker{
  display: none;
}

.footer-mobile-caret{
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #fff;
  transition: transform .2s ease;
}

.footer-mobile-accordion[open] .footer-mobile-caret{
  transform: rotate(180deg);
}

.footer-mobile-links{
  display: grid;
  gap: 10px;
  padding: 14px 10px 0;
}

.footer-mobile-link{
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  color: #fff;
  font-size: 13px;
  letter-spacing: .2px;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}

.footer-mobile-link:hover{
  color: #FFC400;
  background: rgba(0,0,0,.24);
}

.footer-mobile-payments{
  background: #060606;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.footer-mobile-payments__inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 26px;
  padding: 28px 8px 30px;
}

.footer-mobile-pay-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-mobile-pay-ico{
  height: 28px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: .28;
  filter: grayscale(100%);
}

.footer-mobile-main{
  background: #000;
  padding: 34px 0 22px;
}

.footer-mobile-meta-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-mobile-meta-item{
  display: flex;
  align-items: center;
  min-width: 0;
}

.footer-mobile-meta-item--license{
  flex: 1 1 50%;
  justify-content: flex-start;
  gap: 10px;
}

.footer-mobile-meta-item--u2is{
  flex: 1 1 50%;
  justify-content: flex-end;
  gap: 10px;
}

.footer-mobile-license-link{
  flex: 0 0 auto;
  display: inline-flex;
}

.footer-mobile-meta-logo{
  display: block;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.footer-mobile-meta-logo--license{
  height: 80px;
}

.footer-mobile-meta-logo--u2is{
  height: 45px;
  max-width: 200px;
}

.footer-mobile-meta-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.footer-mobile-meta-text span{
  display: block;
  font-size: 11px;
  line-height: 1.15;
  color: rgba(255,255,255,.96);
  letter-spacing: 0;
}

.footer-mobile-meta-text--right{
  text-align: left;
}

.footer-mobile-brand{
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

.footer-mobile-brand-logo{
  width: auto;
  height: 88px;
  object-fit: contain;
  opacity: .72;
}

.footer-mobile-copy{
  margin-top: 34px;
  text-align: center;
}

.footer-mobile-copy span{
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}

@media (max-width: 767px){
  .site-footer{
    display: none !important;
  }

  .site-footer-mobile{
    display: block;
  }
}

@media (max-width: 480px){
  .footer-mobile-top{
    padding: 18px 0 18px;
  }

  .footer-mobile-summary{
    min-height: 60px;
    font-size: 16px;
    border-radius: 28px;
  }

  .footer-mobile-payments__inner{
    gap: 18px 22px;
    padding: 26px 6px 28px;
  }

  .footer-mobile-pay-ico{
    height: 24px;
    max-width: 128px;
  }

  .footer-mobile-main{
    padding: 32px 0 20px;
  }

  .footer-mobile-meta-row{
    gap: 12px;
  }

  .footer-mobile-meta-item--license{
    gap: 8px;
  }

  .footer-mobile-meta-item--u2is{
    gap: 8px;
  }

  .footer-mobile-meta-logo--license{
    height: 54px;
  }

  .footer-mobile-meta-logo--u2is{
    height: 42px;
    max-width: 100px;
  }

  .footer-mobile-meta-text span{
    font-size: 10px;
    line-height: 1.08;
  }

  .footer-mobile-brand{
    margin-top: 44px;
  }

  .footer-mobile-brand-logo{
    height: 78px;
  }

  .footer-mobile-copy{
    margin-top: 28px;
  }

  .footer-mobile-copy span{
    font-size: 10px;
  }
}

@media (max-width: 380px){
  .footer-mobile-summary{
    font-size: 18px;
  }

  .footer-mobile-pay-ico{
    height: 22px;
    max-width: 110px;
  }

  .footer-mobile-meta-logo--license{
    height: 66px;
  }

  .footer-mobile-meta-logo--u2is{
    height: 36px;
    max-width: 126px;
  }

  .footer-mobile-meta-text span{
    font-size: 9px;
  }

  .footer-mobile-brand-logo{
    height: 48px;
  }
}

/* =========================================================
   SUPPORT MODAL
========================================================= */
.support-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.support-modal.is-open{ display: block; }

.support-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.support-panel{
  position: relative;
  width: min(520px, calc(100% - 28px));
  margin: 70px auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  color: #0b0f10;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.35);
}

.support-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  color: #0b0f10;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 5;
}
.support-close:hover{ background: rgba(255,255,255,.96); }

.support-banner{ width: 100%; height: 140px; background: #0f6f56; }
.support-banner-img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.support-body{ padding: 18px 18px 20px; text-align: center; }

.support-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.support-ico{
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.support-title{ font-size: 22px; font-weight: 900; letter-spacing: .2px; }
.support-handle{ color: #0f6f56; font-weight: 900; }

.support-text{
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(0,0,0,.78);
}

.support-link{ text-decoration: none; transition: opacity .2s ease, transform .15s ease; }
.support-link:hover{ opacity: .8; transform: translateY(-1px); }

.support-text--ph{ font-weight: 800; color: #0f6f56; }

/* =========================================================
   MOBILE DRAWER GUEST + LANGUAGE
========================================================= */
.drawer-header--guest{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}

.drawer-auth-btn{
  display: inline-block;
  min-height: unset;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;

  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;

  cursor: pointer;
  transition: color .2s ease, opacity .2s ease;
}


/* hover */
.drawer-auth-btn:hover{
  opacity: .7;
}

.drawer-auth-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: #ffffff;
}

.drawer-auth-btn--signup:hover{
  background: #252e48;
}

.mobile-lang-dropdown{
  position: relative;
  margin-bottom: 8px;   /* [2026-08-23] 서랍 세로 공간 확보 */
}

.mobile-lang-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;   /* [2026-08-23] 서랍 세로 공간 확보 */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
}

.mobile-lang-current{
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-lang-flag{
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}

.mobile-lang-current span{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

.mobile-lang-caret{
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(255,255,255,.92);
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.mobile-lang-menu{
  display: none;
  margin-top: 8px;
  background: #000000;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.mobile-lang-dropdown.is-open .mobile-lang-menu{
  display: block;
}

.mobile-lang-dropdown.is-open .mobile-lang-caret{
  transform: rotate(180deg);
}

.mobile-lang-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background .18s ease;
}

.mobile-lang-item:hover{
  background: rgba(255,255,255,.08);
}

.mobile-lang-item__flag{
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}

.mobile-lang-item.is-active{
  background: rgba(255,255,255,.10);
}

.utility-guest,
.utility-member{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.is-hidden{
  display: none !important;
}

/* 모바일 서랍의 회원 카드. [2026-08-23] 세로 공간 확보를 위해 여백을 줄였다 */
.drawer-member{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
  margin-bottom: 10px;
}

/* =========================================================
   BREAKPOINTS
========================================================= */
@media (max-width: 1199px){
  .hero-stage{ height: 245px; }
  .game-grid{ grid-template-columns: repeat(4, 1fr); }
  .nav-left, .nav-right{ gap: 12px; }
  .nav-link{ padding: 9px 10px; font-size: 12px; }
  .nav-logo-img{ max-width: 130px; }
}

@media (max-width: 991px){
  .hero-stage{ height: 220px; }
  .game-grid{ grid-template-columns: repeat(3, 1fr); }

  .nav-guest-actions{
    gap: 8px;
  }

  .nav-auth-link{
    font-size: 11px;
  }
}

@media (max-width: 767px){
  .container{ width: min(1160px, calc(100% - 22px)); }
  .hero-stage{ height: 190px; }

  .nav-toggle{ display:flex; }
  .utility-right{ display:none; }
  .utility-inner{ justify-content: flex-end; }

  /* ---------------------------------------------------------------
   | [2026-08-31] 상단바 = [로고][잔액 +][계정칩]
   |
   |   햄버거가 하단 바로 내려가면서 첫 칸(44px)이 없어졌다.
   |   .nav-balance 규칙은 지웠다 — 마크업이 어디에도 없는 죽은 CSS 였고,
   |   그것 때문에 모바일에서 잔액을 보려면 서랍을 열어야 했다.
   --------------------------------------------------------------- */
  .nav-inner{ grid-template-columns: auto 1fr; gap: 10px; }
  .nav-left, .nav-right, .nav-guest-actions{ display:none; }
  .nav-mobile-user{ display: flex; }

  /* 로고가 잔액·칩을 밀어내지 않게 */
  .nav-logo{ justify-self: start; }
  .nav-logo-img{ max-height: 26px; }

  /* ---- 계정 칩 (모바일) ----------------------------------------
   | PC 는 유틸바에서 이메일을 통째로 보여주지만, 모바일 상단은
   | 자리가 없다. 아이콘만 남기고 이메일은 드롭다운 머리에서 본다
   | (PESO77 과 같은 모양).
   ------------------------------------------------------------- */
  .nav-mobile-user .user-pill{
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
  }
  .nav-mobile-user .user-name{ display: none; }
  .nav-mobile-user .utility-ico{ width: 16px; height: 16px; }

  .nav-mobile-user .user-menu{
    left: auto;
    right: 0;                       /* 화면 밖으로 나가지 않게 오른쪽 정렬 */
    width: 232px;
  }
  .nav-mobile-user .user-menu__head{ display: block; }

  /* ---- 하단 고정 바 -------------------------------------------- */
  .lt-mbar{ display: flex; }

  /*
   * ★ 햄버거가 줄어들지 않게 못 박는다.
   *   .nav-toggle 은 width:44px 이지만 flex 자식이라 기본 flex-shrink:1 이
   *   먹는다. 320px 화면 + 긴 이메일에서 44px -> 30px 로 찌그러졌다
   *   (헤드리스 실측). 터치 목표가 44px 아래로 내려가면 누르기 어렵다.
   */
  .lt-mbar .nav-toggle{ flex: 0 0 44px; }
}

/*
 * 아주 좁은 화면 (아이폰 SE 320px 등)
 * 리워드 버튼의 둘째 줄을 접어 잔액에 자리를 내준다.
 */
@media (max-width: 359px){
  .lt-mbar{ gap: 6px; padding: 0 8px var(--lt-mbar-safe); }
  .lt-mbar__user{ padding: 0 10px; }
  .lt-mbar__rw{ padding: 0 12px; }
  .lt-mbar__rw-t2{ display: none; }
  .lt-mbar__rw-t1{ font-size: 13px; }
}

@media (max-width: 767px){
  /* (위 블록의 이어짐 — 아래 규칙들은 원래 자리 그대로다) */

  /*
   * ★ 본문이 바 뒤에 가리지 않게 여유를 준다.
   *   바는 position:fixed 라 자리를 차지하지 않는다. 이 여백이 없으면
   *   페이지 맨 아래 내용이 영영 안 보인다.
   */
  body{ padding-bottom: calc(var(--lt-mbar-h) + var(--lt-mbar-safe)); }

  /*
   * 서랍은 fixed 라 body padding 의 영향을 받지 않지만, 열렸을 때
   * 하단 바가 서랍 위로 뜨면 안 된다. 서랍(#mainNav)의 z-index 보다
   * 낮게 두려면 여기서 확인이 필요하다 — 아래 규칙이 그 보증이다.
   */
  body.drawer-open .lt-mbar{ display: none; }

  /*
   * 모바일 서랍 메뉴        [2026-08-23 수정]
   * -----------------------------------------------------------------
   * 아이폰에서 메뉴 아래쪽(입금/출금)이 잘려서 끝까지 볼 수 없었다.
   *
   * 원인은 100vh 다. iOS 사파리에서 100vh 는 **주소창과 툴바가 숨겨졌을 때의
   * 높이**(large viewport)라서, 실제로 보이는 영역보다 100px 이상 크다.
   * 서랍은 position:fixed 이므로 그 넘치는 부분이 툴바 뒤로 들어가고,
   * 안에서 아무리 스크롤해도 마지막 항목은 화면 밖에 남는다.
   *
   * 고친 방법
   *   height: 100dvh   지금 실제로 보이는 높이. 주소창이 접히고 펴져도 따라간다.
   *                    (100vh 는 dvh 를 모르는 구형 브라우저용 폴백)
   *   padding-bottom   홈 인디케이터(env safe-area) + 여유. 마지막 항목이
   *                    화면 맨 끝에 딱 붙어서 누르기 어려운 것도 같이 해결된다.
   *   overscroll-behavior: contain
   *                    서랍 끝까지 스크롤했을 때 뒤 페이지가 따라 움직이지 않는다.
   *                    (뒤가 움직이면 사파리 툴바가 접혔다 펴지며 화면이 튄다)
   */
  .nav{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--drawer-w);
    max-width: calc(100% - 56px);

    height: 100vh;              /* 폴백 */
    height: 100dvh;
    max-height: 100vh;          /* 폴백 */
    max-height: 100dvh;

    /*
     * [2026-08-23] 위쪽 84px 은 고정 헤더를 피하려고 비워 둔 자리였다.
     * 그런데 서랍은 z-index 80 으로 헤더(50) 위에 덮이기 때문에 그 자리는
     * 헤더가 아니라 **서랍의 빈 배경**이 보일 뿐이었다. 화면 세로가 짧은
     * 아이폰에서는 그만큼 입금/출금이 아래로 밀려 스크롤해야 보였다.
     */
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px));

    background: linear-gradient(180deg, rgba(10, 12, 20, 0.98), rgba(12, 6, 6, 0.98));
    border-right: 1px solid rgba(255,255,255,.08);
    transform: translateX(-110%);
    transition: transform .2s ease;
    z-index: 80;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* 구형 iOS 관성 스크롤 */
    overscroll-behavior: contain;
  }
  .nav.open{ transform: translateX(0); }

  /*
   * 서랍이 열려 있는 동안 뒤 페이지를 묶어 둔다.
   * script.js 가 <body> 에 이 클래스를 붙인다.
   *
   * touch-action: none 은 쓰지 않는다. touch-action 은 터치 지점의 조상들을
   * 거슬러 올라가며 합쳐지기 때문에, body 에 none 을 주면 그 안에 있는
   * 서랍(.nav)의 스크롤까지 같이 막힌다. 원래 증상보다 더 나빠진다.
   * 스크롤 연쇄는 .nav 의 overscroll-behavior: contain 이 이미 막는다.
   */
  body.drawer-open{
    overflow: hidden;
  }

  .drawer-header{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px 12px;
    box-shadow: 0 12px 22px rgba(0,0,0,.22);
    margin-bottom: 12px;
  }
  .drawer-row{
    display:flex;
    align-items:center;
    gap: 10px;
  }

  /* [2026-08-23] 아이디 줄을 눌러 계정 상세로 (PC 유틸바와 동일) */
  .drawer-row--link{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    margin: -4px -6px;
    padding: 4px 6px;
    border-radius: 10px;
    transition: background .15s ease;
  }
  .drawer-row--link:active{ background: rgba(255,255,255,.06); }
  .drawer-row--link .drawer-v{ text-decoration: underline; text-underline-offset: 2px; }

  /*
   * COMP 줄                                          [2026-09-01]
   *
   * ★ 밑줄은 빼고 라벨 옆 화살표로 "누를 수 있다" 를 알린다.
   *   윗줄(User)은 이메일에 밑줄이 있어야 링크로 읽히지만, COMP 는
   *   **숫자**에 밑줄이 그어져서 값이 훼손된 것처럼 보였다(실측 스크린샷).
   *
   * ★ 아이콘이 <img> 가 아니라 인라인 <svg> 라서 .drawer-ico 의 상자만
   *   받고 가운데 정렬이 안 된다. 여기서 flex 로 맞춘다.
   */
  .drawer-row--comp .drawer-v{ text-decoration: none; }

  .drawer-ico--comp{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold, #facf5b);
  }

  .drawer-row--comp .drawer-k::after{
    content: " ›";
    opacity: .55;
  }

  .drawer-row + .drawer-row{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .drawer-ico{
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: .95;
    flex: 0 0 auto;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
  }
  .drawer-k{
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
    color: rgba(255,255,255,.75);
    line-height: 1.1;
  }
  .drawer-v{
    margin-top: 2px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(255,255,255,.92);
    line-height: 1.15;
    word-break: break-word;
  }
  .drawer-v--gold{ color: var(--gold); }

  .drawer-sep{
    border: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    margin: 8px 0;
  }

  /* [2026-08-23] 세로 공간을 벌기 위해 항목 높이와 간격을 조금 줄였다.
     항목 9개(회원카드 3 + 메뉴 6)라 2px 씩만 줄여도 30px 넘게 벌린다.
     터치 영역은 아이콘 포함 40px 이상으로 유지된다. */
  .nav .nav-link{
    width: 100%;
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 6px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    -webkit-text-fill-color: rgba(255,255,255,.92);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    background-size: auto;
  }

  .nav .nav-link--with-ico{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
  }

  .nav-ico{
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
    opacity: .95;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
  }

  .nav .nav-link:hover{
    background: #2a3457;
    color: #2a3457;
    -webkit-text-fill-color: rgba(255,255,255,.95);
  }

  .nav .nav-link.active{
    background: #3b497a;
    color: rgba(255,255,255,.95);
    -webkit-text-fill-color: rgba(255,255,255,.95);
  }

  .game-play img{ width: 86px; height: 86px; }
  .promo-showcase__inner{ grid-template-columns: 1fr; }
  .promo-cats{ display: none; }
  .promo-marquee{ --promo-item: 238px; }
  .promo-banner{ height: 140px; }
}

@media (max-width: 480px){
  .support-panel{ margin-top: 54px; }
  .support-banner{ height: 120px; }
  .support-title{ font-size: 20px; }

  .point-agent-page .pa-panel{ margin-top: 9vh; }
  .point-agent-page .pa-s-price{ font-size: 30px; }
  .point-agent-page .pa-qr-img{ width: 190px; height: 190px; }
}

@media (max-width: 360px){
  .nav-logo-img{ height: 30px; }
  .game-play img{ width: 78px; height: 78px; }
}

@media (max-width: 920px){
  .login-card{ grid-template-columns: 1fr; }
  .logoContainer{ padding: 26px 20px; }
  .logo{ width: 190px; height: 190px; }
  .brandText{ font-size: 20px; }
  .acceptContainer{
    padding: 26px 20px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .login-title{ margin-bottom: 20px; }
  .formDiv{ margin-bottom: 20px; }
}

@media (min-width: 768px){
  .nav-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }
  .nav-left, .nav-right{ flex: 0 0 auto; gap: 14px; }
  .nav-logo{ flex: 0 0 auto; margin: 0 8px; }
  .nav-guest-actions{ flex: 0 0 auto; margin-left: auto; }
}

/* RESPONSIVE CARD LAYOUT */
@media (max-width: 900px){
  .pa-shell{ width: min(780px, 100%); }
  .pa-card{
    grid-template-columns: 96px 1fr 200px;
  }
  .pa-price{ font-size: 28px; }
}

@media (max-width: 720px){
  .pa-card{
    grid-template-columns: 90px 1fr;
  }

  .pa-coin{
    display: none;
  }

  .pa-main{
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
  }
}

@media (max-width: 420px){
  .pa-logo{ height: 30px; }
  .pa-title{ font-size: 15px; }

  .pa-buy{
    padding: 12px 8px;
  }

  .pa-cart{
    width: 30px;
    height: 30px;
  }

  .pa-meta-item{
    font-size: 12.5px;
  }

  .pa-price{
    font-size: 24px;
  }
}

/* =========================================================
   SIDE BANNER
========================================================= */

.side-banner{
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 195px;
  height: 295px;
  border-radius: 22px;
  overflow: hidden;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30);
}

.side-banner--guest{
  background-image: url('../assets/banners/aside-a.png');
}

.side-banner--member{
  background-image: url('../assets/banners/aside-b.png');
}

.side-banner__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, transform .25s ease;
}

.side-banner__close:hover{
  background: rgba(180, 0, 0, 0.92);
  transform: scale(1.06);
}

.side-banner__content{
  width: 100%;
  padding: 0 14px 18px;
}

.side-banner__cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  width: 100%;
  border-radius: 16px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #2e3c58 0%, #182030 100%);
  box-shadow: 0 10px 24px rgba(140, 0, 0, 0.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.side-banner__cta:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, #405379 0%, #161d2b 100%);
  box-shadow: 0 14px 28px rgba(0, 56, 140, 0.45);
}

.side-banner__cta-main{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .8px;
  line-height: 1.1;
}

.side-banner__cta-sub{
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .45px;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: .96;
}

/* =========================================================
   GUEST STATE
========================================================= */

body.guest .side-banner--member{
  display: none;
}

/* =========================================================
   LOGGED IN STATE
========================================================= */

body.logged-in .side-banner--guest{
  display: none;
}

/* =========================================================
   HIDE ON MOBILE / TABLET / IPAD
========================================================= */

@media (max-width: 1199px){
  .side-banner{
    display: none !important;
  }
}

/* =========================================================
   RW1 AUTH DRAWER 
========================================================= */

.auth-drawer[hidden]{
  display: none !important;
}

.auth-drawer{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}

.auth-drawer.is-open{
  pointer-events: auto;
}

.auth-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100%;
  height: 100dvh;
  background: #191e2c;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .35s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.auth-drawer.is-open .auth-drawer__panel{
  transform: translateX(0);
}

.auth-drawer__inner{
  width: 100%;
  min-height: 100dvh;
  padding: 20px 28px 34px;
  box-sizing: border-box;
}

.auth-drawer__back,
.auth-drawer__close{
  position: absolute;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;
}

.auth-drawer__back{
  top: 18px;
  left: 20px;
  width: 34px;
  height: 34px;
}

.auth-drawer__back-icon{
  display: block;
  width: 34px;
  height: 34px;
  background-color: #f0f0f0;
  mask: url('../assets/icons/arrow.svg') center/contain no-repeat;
  -webkit-mask: url('../assets/icons/arrow.svg') center/contain no-repeat;
  transition: transform .3s ease, opacity .3s ease;
}

.auth-drawer__back:hover .auth-drawer__back-icon{
  transform: translateX(18px);
  opacity: 0;
}

.auth-drawer__close{
  display: none;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
}

.auth-drawer__close img{
  width: 22px;
  height: 22px;
  display: block;
}

.auth-switcher__brand{
  text-align: center;
  padding-top: 54px;
}

.auth-switcher__logo{
  width: min(270px, 100%);
  margin: 0 auto;
}

.auth-switcher__subtitle{
  margin: 22px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: #d4d4d4;
}

.auth-switcher__subtitle--signup{
  display: none;
}

.auth-drawer[data-auth-state="signup"] .auth-switcher__subtitle--login{
  display: none;
}

.auth-drawer[data-auth-state="signup"] .auth-switcher__subtitle--signup{
  display: block;
}

.auth-switcher__tabs{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  background: #252e48;
  border-radius: 11px;
  overflow: hidden;
}

.auth-switcher__tabs-thumb{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #4776cc;
  border-radius: 11px;
  transition: transform .32s ease;
}

.auth-drawer[data-auth-state="signup"] .auth-switcher__tabs-thumb{
  transform: translateX(100%);
}

.auth-switcher__tab{
  position: relative;
  z-index: 1;
  height: 42px;
  border: 0;
  background: transparent;
  color: #f8f8f8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.auth-switcher__panels{
  margin-top: 20px;
}

.auth-switcher__content{
  display: none;
}

.auth-switcher__content.is-active{
  display: block;
}

.auth-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field{
  position: relative;
}

.auth-input,
.auth-select{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #43517a;
  background: transparent;
  padding: 0 18px;
  color: #2a2d33;
  font-size: 13px;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.auth-input:focus,
.auth-select:focus,
.auth-input:not(:placeholder-shown){
  border: 2px solid rgba(0,0,0,.38);
  background: #f7f7f7;
}

.auth-field--password .auth-input{
  padding-right: 54px;
}

.auth-password-toggle{
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #C4C4C4;
}

.auth-password-toggle__icon{
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: url('../assets/icons/spass.svg') center/contain no-repeat;
  -webkit-mask: url('../assets/icons/spass.svg') center/contain no-repeat;
}

.auth-password-toggle.is-active{
  color: #DF3434;
}

.auth-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  cursor: pointer;
}

.auth-check input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-check__box{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}

.auth-check__box::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  background: #4776cc;
}

.auth-check input:not(:checked) + .auth-check__box::after{
  opacity: 0;
}

.auth-check__label{
  font-size: 14px;
  color: #f0f0f0;
}

.auth-submit{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  background: #4776cc;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  cursor: pointer;
}

.auth-submit__text,
.auth-submit__icon{
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  transform: translate(-50%, -50%);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}

.auth-submit__text{
  opacity: 1;
}

.auth-submit__icon{
  opacity: 0;
  transform: translate(calc(-50% + 34px), -50%);
}

.auth-submit__icon::before{
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background: #fff;
  mask: url('../assets/icons/arrow.svg') center/contain no-repeat;
  -webkit-mask: url('../assets/icons/arrow.svg') center/contain no-repeat;
}

.auth-submit:hover .auth-submit__text{
  opacity: 0;
  transform: translate(calc(-50% - 34px), -50%);
}

.auth-submit:hover .auth-submit__icon{
  opacity: 1;
  transform: translate(-50%, -50%);
}

.auth-links{
  margin-top: 6px;
  text-align: center;
}

.auth-link,
.auth-inline-switch{
  color: #8a8a8a;
  font-size: 14px;
  text-decoration: none;
}

.auth-inline-switch{
  border: 0;
  background: transparent;
  padding: 0;
  color: #ffe588;
  font-weight: 600;
  cursor: pointer;
}

.auth-links__line{
  margin: 10px 0 0;
  color: #c0c0c0;
  font-size: 14px;
}

.auth-grid{
  display: grid;
  gap: 8px;
}

.auth-grid--double{
  grid-template-columns: 1fr 1.45fr;
}

.auth-grid--mobile{
  grid-template-columns: 100px minmax(0,1fr) 84px;
  align-items: stretch;
}

.auth-select{
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #2b2b2b 50%),
    linear-gradient(135deg, #2b2b2b 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.auth-send{
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #ffe588;
  color: #202020;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 10px;
}

.auth-field--affiliate .auth-input{
  padding-right: 46px;
}

.auth-affiliate-check{
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #10b316;
  opacity: 0;
  transition: opacity .2s ease;
}

.auth-affiliate-check__icon{
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: url('../assets/icons/check.svg') center/contain no-repeat;
  -webkit-mask: url('../assets/icons/check.svg') center/contain no-repeat;
}

.auth-field--affiliate.is-valid .auth-affiliate-check{
  opacity: 1;
}

.auth-status{
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.auth-status--verification{
  background: rgba(236,220,154,.95);
  color: #4d4630;
}

.auth-status--error{
  background: rgba(223,52,52,.18);
  color: #b11e1e;
}

.auth-captcha__inner{
  min-height: 52px;
  border: 1px solid rgba(0,0,0,.18);
  background: #1d1d1d;
  color: rgba(255,255,255,.78);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.auth-warning{
  margin-top: 150px;
}

.auth-warning strong{
  display: block;
  margin-bottom: 14px;
  color: #DF3434;
  font-size: 18px;
  font-weight: 700;
}

.auth-warning p{
  margin: 0;
  color: #929292;
  font-size: 14px;
  line-height: 1.6;
}

.auth-field.is-error .auth-input,
.auth-field.is-error .auth-select{
  border: 2px solid rgba(223,52,52,.48);
  background: rgba(223,52,52,.08);
}

.auth-field--currency{
  position: relative;
}

.auth-select-icon{
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
}

.auth-select-icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.auth-field--currency .auth-select{
  padding-left: 40px;
}

.auth-field--affiliate .auth-input{
  padding-right: 42px;
  font-size: 12px;
}

.auth-field--code-select .auth-select{
  font-size: 11px;
  padding-left: 12px;
  padding-right: 28px;
}

.auth-field--mobile-number .auth-input{
  font-size: 12px;
}

body.auth-open{
  overflow: hidden;
}

@media (max-width: 767px){
  .auth-drawer{
    background: rgba(0,0,0,.28);
  }

  .auth-drawer__panel{
    width: 100%;
  }

  .auth-drawer__back{
    display: none;
  }

  .auth-drawer__close{
    display: block;
  }

  .auth-drawer__inner{
    padding: 18px 16px 28px;
  }

  .auth-switcher__brand{
    padding-top: 40px;
  }

  .auth-switcher__logo{
    width: min(240px,100%);
  }

 .auth-grid--double{
    grid-template-columns: 1fr 1.45fr;
  }

  .auth-grid--mobile{
    grid-template-columns: 92px minmax(0,1fr) 76px;
  }

  .auth-field--affiliate .auth-input{
    font-size: 11px;
    padding-right: 40px;
  }

  .auth-field--code-select .auth-select{
    font-size: 10px;
    padding-left: 10px;
    padding-right: 24px;
  }

  .auth-field--mobile-number .auth-input{
    font-size: 11px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .auth-send{
    font-size: 11px;
    padding: 0 8px;
  }
}

  .auth-warning{
    margin-top: 120px;
  }

  .auth-submit__text{
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }

  .auth-submit__icon{
    opacity: 0 !important;
    transform: translate(calc(-50% + 34px), -50%) !important;
  }


html{
  scrollbar-gutter: stable;
}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

.auth-switcher__subtitle--forgot{
  display:none;
}

.auth-drawer[data-auth-state="forgot-step-1"] .auth-switcher__subtitle--login,
.auth-drawer[data-auth-state="forgot-step-1"] .auth-switcher__subtitle--signup,
.auth-drawer[data-auth-state="forgot-step-2"] .auth-switcher__subtitle--login,
.auth-drawer[data-auth-state="forgot-step-2"] .auth-switcher__subtitle--signup{
  display:none;
}

.auth-drawer[data-auth-state="forgot-step-1"] .auth-switcher__subtitle--forgot,
.auth-drawer[data-auth-state="forgot-step-2"] .auth-switcher__subtitle--forgot{
  display:block;
}

.auth-drawer.is-forgot .auth-switcher__tabs{
  display:none;
}

.auth-link-button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.auth-grid--forgot-code{
  grid-template-columns:minmax(0,1fr) 96px;
  align-items:stretch;
}

.auth-forgot-check{
  opacity:0;
}

@media (max-width:767px){
  .auth-grid--forgot-code{
    grid-template-columns:minmax(0,1fr) 88px;
  }
}

/* =========================================================
   GAME FAVORITE
========================================================= */

.game-fav{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
}

.game-fav img{
  width: 18px;
  height: 18px;
  opacity: 0.35;
  filter: grayscale(100%);
  transition: all .15s ease;
}

.game-fav.is-active img{
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(6000%) hue-rotate(350deg) brightness(95%) contrast(110%);
}

.game-fav:hover img{
  opacity: 0.7;
}

/* =========================================================
   DEPOSIT PAGE
========================================================= */

html:has(body.deposit-page){
  scrollbar-gutter: auto;
}

body.deposit-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.deposit-page{
  background: #191e2c;
}

.deposit-page .page{
  flex: 1 0 auto;
  min-height: 0;
}

.deposit-page .site-footer{
  margin-top: auto;
}

.deposit-main{
  padding: 24px 0 22px;
}

.deposit-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.deposit-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
  color: #ffffff;
}

.deposit-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}

.deposit-quick-nav{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.deposit-quick-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #f7f5f5;
  text-decoration: none;
}

.deposit-quick-nav__icon-wrap{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #546597;
  display: grid;
  place-items: center;
  box-shadow: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.deposit-quick-nav__item:hover .deposit-quick-nav__icon-wrap,
.deposit-quick-nav__item.is-active .deposit-quick-nav__icon-wrap{
  background: #2a3457;
  transform: translateY(-1px);
  box-shadow: none;
}

.deposit-quick-nav__icon{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.deposit-quick-nav__label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #f0f0f0;
}

.deposit-method-group + .deposit-method-group{
  margin-top: 16px;
}

.deposit-group-title{
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 12px;
  background: #43517c;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

.deposit-method-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.deposit-method{
  min-height: 58px;
  border-radius: 12px;
  background: #2d3756;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.deposit-method:hover{
  background: #192033;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.deposit-method__logo{
  width: 84px;
  height: 38px;
  min-width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  overflow: hidden; 
}

.deposit-method__logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.deposit-method__name{
  font-size: 14px;
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
}

.deposit-method--sticpay{
  padding-right: 12px;
  justify-content: space-between;
}

.deposit-method__main{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.deposit-method__action{
  min-width: 120px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  background: #2d3756;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}

.deposit-method__action:hover{
  background: #43517c;
  transform: translateY(-1px);
}

@media (max-width: 991px){
  .deposit-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .deposit-quick-nav{
    justify-content: flex-start;
  }

  .deposit-method-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .deposit-main{
    padding: 18px 0 20px;
  }

  .deposit-heading h1{
    font-size: 22px;
  }

  .deposit-heading p{
    font-size: 11px;
  }

  .deposit-quick-nav{
    width: 100%;
    gap: 10px;
    display: grid;
    /* 탭 5개 (ACCOUNT · DEPOSIT · WITHDRAW · WALLET · HISTORY) — include/mypage_tab.php 와 같이 간다 [2026-09-08] */
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .deposit-quick-nav__item{
    gap: 5px;
  }

  .deposit-quick-nav__icon-wrap{
    width: 54px;
    height: 54px;
  }

  .deposit-quick-nav__icon{
    width: 24px;
    height: 24px;
  }

  .deposit-quick-nav__label{
    font-size: 9px;
    text-align: center;
  }

  .deposit-group-title{
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    margin-bottom: 6px;
  }

  .deposit-method-grid{
    gap: 5px;
  }

  .deposit-method,
  .deposit-method--sticpay{
    min-height: 52px;
    padding: 7px 10px;
    gap: 10px;
  }

  .deposit-method__logo{
    width: 76px;
    min-width: 76px;
    height: 34px;
    font-size: 9px;
  }

  .deposit-method__name{
    font-size: 14px;
  }

  .deposit-method--sticpay{
    flex-direction: column;
    align-items: stretch;
  }

  .deposit-method__main{
    width: 100%;
    gap: 10px;
  }

  .deposit-method__action{
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border-radius: 10px;
    font-size: 9px;
  }
}

@media (max-width: 480px){
  .deposit-quick-nav{
    gap: 8px 6px;
  }

  .deposit-quick-nav__icon-wrap{
    width: 50px;
    height: 50px;
  }

  .deposit-quick-nav__icon{
    width: 22px;
    height: 22px;
  }

  .deposit-quick-nav__label{
    font-size: 8px;
    letter-spacing: .1px;
  }

  .deposit-method-grid{
    gap: 4px;
  }

  .deposit-method,
  .deposit-method--sticpay{
    min-height: 48px;
    padding: 6px 8px;
    gap: 8px;
  }

  .deposit-method__logo{
    width: 70px;
    min-width: 70px;
    height: 30px;
    font-size: 8px;
  }

  .deposit-method__name{
    font-size: 12px;
  }

  .deposit-method__action{
    min-height: 28px;
    font-size: 10px;
  }
}

/* =========================================================
   SLOT PAGE
========================================================= */

.slot-page .page{
  padding-bottom: 0;
}

.slot-hero{
  padding: 14px 0 10px;
}

.slot-hero__banner{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.slot-hero__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================================================
   홈 배너 (동영상) — 깜빡임 수정        [2026-08-23]
   ---------------------------------------------------------
   증상 : 배너가 주기적으로 순간 깜빡였다. 페이지가 새로고침
          되는 것처럼 보였다.

   원인 : 배너 영역의 높이를 <video> 가 직접 만들고 있었다
          (height:auto → 영상의 원본 비율).
          배너를 바꿀 때 그 <video> 에 .load() 를 부르는데,
          load() 는 영상을 readyState 0 으로 되돌린다. 그 순간
          영상의 원본 크기가 사라져 배너 높이가 무너졌다가,
          새 영상 정보가 도착하면 다시 늘어난다.
          → 아래 내용이 통째로 위로 튀었다 내려온다.
            영상 3개를 재생기 2개로 돌리는 구조라 세 번에 한 번씩
            첫 번째 <video> 가 다시 load() 되었고, 그래서
            "주기적으로" 깜빡이는 것처럼 보였다.

   수정 : 높이를 CSS 가 고정한다. 영상 3개가 모두 1156x268 이라
          padding-top 으로 그 비율만큼 자리를 미리 잡아 두고
          <video> 는 그 위에 겹쳐 놓는다.
          이제 load() 를 몇 번 부르든 레이아웃은 1px 도 안 움직인다.

          aspect-ratio 를 쓰지 않은 이유 : 구형 iOS 사파리(15 미만)
          가 지원하지 않는다. padding-top 방식은 어디서나 된다.
========================================================= */
.slot-hero__banner--video{
  position: relative;
  width: 100%;
  padding-top: 23.1834%;      /* 268 / 1156 */
  overflow: hidden;
  background: #0d1424;        /* 영상이 뜨기 전 보일 바탕 */
}

.slot-hero__banner--video > a{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  overflow: hidden;
}

/* 두 재생기를 완전히 같은 자리에 겹친다.
   예전에는 한쪽만 relative + height:auto 라 서로 크기가 달랐다. */
.slot-hero__banner--video video{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.games--slot{
  padding-top: 10px;
}

.games-head--slot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.games-head--slot .games-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.games-head--slot .games-title h2{
  margin: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.games-nav{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: #191e2c;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.games-nav::-webkit-scrollbar{
  display: none;
}

.games-nav__link{
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.games-nav__link:hover,
.games-nav__link.active{
  background: #3a476e;
  color: #fff;
}

.games-nav__link:active{
  transform: scale(.98);
}

/* =========================================================
   SLOT PAGE MOBILE
========================================================= */

@media (max-width: 991px){
  .games-head--slot{
    align-items: flex-start;
  }

  .games-head--slot .games-search{
    width: 100%;
  }

  .games-head--slot .search-box{
    width: 100%;
  }
}

@media (max-width: 768px){
  .slot-hero{
    padding: 10px 0 8px;
  }

  .slot-hero__banner{
    border-radius: 12px;
  }

  .games-head--slot{
    gap: 12px;
  }

  .games-head--slot .games-title{
    width: 100%;
  }

  .games-head--slot .games-title h2{
    font-size: 16px;
  }

  .games-nav{
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
  }

  .games-nav__link{
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px;
    font-size: 10px;
    letter-spacing: 0;
    text-align: center;

    /*
     * [2026-09-01] 칩 폭은 390px 화면에서 96px 밖에 안 된다.
     * white-space:nowrap 만 있고 넘침 처리가 없어서 라벨이 **글자
     * 중간에서** 잘려 나갔다(실측). 잘릴 거면 말줄임으로 잘린다.
     */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px){
  .games-nav__link{
    font-size: 9px;
    padding: 9px 4px;
  }
}

/* =========================================================
   LIVE PAGE
========================================================= */

.live-page .games-head--slot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.live-page .games-head--slot .games-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-page .games-head--slot .games-title h2{
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .5px;
}

/* =========================================================
   LIVE NAV
========================================================= */

.live-page .games-nav{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: #191e2c;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.live-page .games-nav::-webkit-scrollbar{
  display: none;
}

.live-page .games-nav__link{
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.live-page .games-nav__link:hover,
.live-page .games-nav__link.active{
  background: #3a476e;
  color: #fff;
}

.live-page .games-nav__link:active{
  transform: scale(.98);
}

/* =========================================================
   SEARCH
========================================================= */

.live-page .games-search{
  display: flex;
  align-items: center;
}

.live-page .games-head--slot .search-box{
  width: 100%;
}

/* =========================================================
   GRID
========================================================= */

.live-page .game-grid--live{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* =========================================================
   LIVE CARD
========================================================= */

.live-page .live-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #141414;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;

  /*
   * [2026-08-22] aspect-ratio: 1 / 1 제거.
   *
   * 카드 전체를 정사각으로 고정해 두면, 아래 live-card__bottom 이 58px 을
   * 먼저 가져가고 남는 만큼만 썸네일이 된다. 카드가 좁아질수록 썸네일이
   * 납작해진다는 뜻이다.
   *
   *   PC   카드 221px -> 썸네일 221x163 (가로세로 1.36)
   *   모바일 카드 113px -> 썸네일 113x55  (가로세로 2.05)
   *
   * 원본 썸네일은 296x288(거의 정사각)이라 object-fit: cover 로 2.05 상자에
   * 맞추면 위아래가 절반씩 잘려 **딜러 머리가 날아간다.**
   * 그래서 비율을 카드가 아니라 썸네일에 건다. 아래 live-card__media 참고.
   */
}

.live-page .live-card__media{
  display: block;
  width: 100%;

  /*
   * [2026-08-22] 썸네일 비율을 고정한다. PC 에서 실측한 1.36 과 거의 같은
   * 4:3 을 쓰면 화면 크기와 무관하게 잘리는 정도가 같아진다.
   * 카드 높이는 이 썸네일 + 하단바(58px) 로 자연스럽게 정해진다.
   */
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;

  min-height: 0;
  background: #141414;
  overflow: hidden;
}

.live-page .live-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* THIS PART RESTORES THE BOTTOM */
.live-page .live-card__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 58px;
  min-height: 58px;
  padding: 8px 12px;
  background: #303b5a;
}

.live-page .live-card__logo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 38%;
  max-width: 38%;
  min-width: 0;
}

.live-page .live-card__logo img{
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
  object-fit: contain;
}

.live-page .live-card__title{
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 11px;
  line-height: .95;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
}

.live-page .live-card:hover{
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px){
  .live-page .game-grid--live{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px){
  .live-page .games-head--slot{
    align-items: flex-start;
  }

  .live-page .games-head--slot .games-search{
    width: 100%;
  }

  .live-page .games-head--slot .search-box{
    width: 100%;
  }

  .live-page .game-grid--live{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .live-page .games-head--slot{
    gap: 12px;
  }

  .live-page .games-title{
    width: 100%;
  }

  .live-page .games-nav{
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
  }

  .live-page .games-nav__link{
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px;
    font-size: 10px;
    letter-spacing: 0;
    text-align: center;
  }

  .live-page .game-grid--live{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .live-page .live-card{
    border-radius: 24px;
  }

  .live-page .live-card__bottom{
    gap: 8px;
    flex-basis: 58px;
    min-height: 58px;
    padding: 8px 10px;
  }

  .live-page .live-card__logo{
    flex: 0 0 38%;
    max-width: 38%;
  }

  .live-page .live-card__logo img{
    max-width: 90px;
  }

  .live-page .live-card__title{
    font-size: 14px;
  }
}

@media (max-width: 480px){
  .live-page .games-nav__link{
    font-size: 10px;
    padding: 9px 4px;
  }

  /*
   * [2026-08-22] 폰에서는 카드가 113px 정도라 58px 하단바가 카드의 절반을
   * 차지한다. 바를 줄이고 로고 폭을 좁혀 제목이 단어 중간에서 끊기지 않게 한다.
   */
  .live-page .live-card__bottom{
    flex-basis: 46px;
    min-height: 46px;
    padding: 6px 8px;
    gap: 6px;
  }

  .live-page .live-card__logo{
    flex: 0 0 30%;
    max-width: 30%;
  }

  .live-page .live-card__logo img{
    max-width: 62px;
  }

  .live-page .live-card__title{
    font-size: 10px;
  }
}

/* =========================================================
   DEPOSIT PAGE 2
========================================================= */

html:has(body.deposit2-page){
  scrollbar-gutter: auto;
}

body.deposit2-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.deposit2-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.deposit2-page .site-footer{
  margin-top: auto;
}

.deposit2-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.deposit2-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  color: #ffffff;
}

.deposit2-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

.deposit2-balance{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.deposit2-quick-nav{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.deposit2-quick-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #181818;
}

.deposit2-quick-nav__icon-wrap{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #2a3457;
  display: grid;
  place-items: center;
  transition: background .18s ease, transform .18s ease;
}

.deposit2-quick-nav__item:hover .deposit2-quick-nav__icon-wrap,
.deposit2-quick-nav__item.is-active .deposit2-quick-nav__icon-wrap{
  background: #43517c;
  transform: translateY(-1px);
}

.deposit2-quick-nav__icon{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.deposit2-quick-nav__label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffffff;
}

.deposit2-section + .deposit2-section{
  margin-top: 26px;
}

.deposit2-section__title{
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 22px;
  background: #43517c;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.deposit2-section__title--brand{
  gap: 16px;
}

.deposit2-brand-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 42px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  flex: 0 0 auto;
}

.deposit2-brand-box__logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.deposit2-brand-box__text{
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.deposit2-info-wrap{
  background: #d9d9d9;
  padding: 20px 16px;
}

.deposit2-info-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* FIXED → WHITE CARD */
.deposit2-info-card{
  min-height: 90px;
  border: 1px solid #8c8c8c;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.deposit2-info-card__label{
  font-size: 16px;
  line-height: 1.05;
  font-weight: 500;
  color: #3c3c3c;
}

.deposit2-info-card__value{
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: #3c3c3c;
  white-space: nowrap;
}

.deposit2-form{
  padding-top: 20px;
}

.deposit2-form-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr);
  gap: 14px;
  align-items: start;
}

.deposit2-select-wrap{
  position: relative;
}

.deposit2-select,
.deposit2-field{
  width: 100%;
  height: 50px;
  border: 1px solid #8c8c8c;
  border-radius: 10px;
  background: #efefef;
  color: #444;
  font-size: 14px;
  padding: 0 20px;
  outline: none;
}

.deposit2-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 58px;
  cursor: pointer;
}

.deposit2-select-wrap::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #5f5f5f;
  transform: translateY(-35%);
  pointer-events: none;
}

.deposit2-shortcuts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.deposit2-shortcut{
  min-width: 116px;
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: #43517c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.deposit2-shortcut:hover{
  background: #43517c;
  transform: translateY(-1px);
}

.deposit2-form-spacer{
  height: 16px;
}

.deposit2-submit-wrap{
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}

.deposit2-submit{
  width: 280px;
  height: 68px;
  border: 0;
  border-radius: 18px;
  background: #43517c;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.deposit2-submit:hover{
  background: #43517c;
  transform: translateY(-1px);
}

@media (max-width: 991px){
  .deposit2-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .deposit2-quick-nav{
    justify-content: flex-start;
  }

  .deposit2-info-grid,
  .deposit2-form-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .deposit2-main{
    padding: 18px 0 24px;
  }

  .deposit2-header{
    gap: 16px;
    margin-bottom: 18px;
  }

  .deposit2-heading h1{
    font-size: 22px;
  }

  .deposit2-heading p{
    font-size: 11px;
  }

  .deposit2-balance{
    margin-top: 14px;
    font-size: 16px;
  }

  .deposit2-quick-nav{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .deposit2-quick-nav__item{
    gap: 5px;
  }

  .deposit2-quick-nav__icon-wrap{
    width: 54px;
    height: 54px;
  }

  .deposit2-quick-nav__icon{
    width: 24px;
    height: 24px;
  }

  .deposit2-quick-nav__label{
    font-size: 9px;
    text-align: center;
  }

  .deposit2-section + .deposit2-section{
    margin-top: 18px;
  }

  .deposit2-section__title{
    min-height: 54px;
    padding: 0 14px;
    font-size: 16px;
  }

  .deposit2-section__title--brand{
    gap: 12px;
  }

  .deposit2-brand-box{
    width: 104px;
    height: 34px;
    border-radius: 12px;
  }

  .deposit2-brand-box__text{
    font-size: 16px;
  }

  .deposit2-info-wrap{
    padding: 10px;
    background: #d9d9d9;
  }

  .deposit2-info-grid{
    gap: 10px;
  }

  /* FIXED → WHITE CARD (MOBILE) */
  .deposit2-info-card{
    min-height: 68px;
    padding: 10px 14px;
    gap: 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #9a9a9a;
  }

  .deposit2-info-card__label{
    font-size: 12px;
    line-height: 1.05;
  }

  .deposit2-info-card__value{
    font-size: 14px;
    line-height: 1;
  }

  .deposit2-form{
    padding-top: 14px;
  }

  .deposit2-select,
  .deposit2-field{
    height: 56px;
    font-size: 15px;
    border-radius: 16px;
    padding: 0 16px;
  }

  .deposit2-select{
    padding-right: 50px;
  }

  .deposit2-select-wrap::after{
    right: 16px;
    border-left-width: 8px;
    border-right-width: 8px;
    border-top-width: 12px;
  }

  .deposit2-shortcuts{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .deposit2-shortcut{
    min-width: 0;
    height: 52px;
    border-radius: 16px;
    font-size: 15px;
  }

  .deposit2-form-spacer{
    height: 12px;
  }

  .deposit2-submit-wrap{
    margin-top: 18px;
  }

  .deposit2-submit{
    width: 100%;
    height: 58px;
    border-radius: 16px;
    font-size: 17px;
  }
}

@media (max-width: 480px){
  .deposit2-quick-nav{
    gap: 8px 6px;
  }

  .deposit2-quick-nav__icon-wrap{
    width: 50px;
    height: 50px;
  }

  .deposit2-quick-nav__icon{
    width: 22px;
    height: 22px;
  }

  .deposit2-quick-nav__label{
    font-size: 8px;
  }

  .deposit2-info-wrap{
    padding: 8px;
  }

  .deposit2-info-grid{
    gap: 8px;
  }

  .deposit2-info-card{
    min-height: 62px;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 12px;
    background: #ffffff;
  }

  .deposit2-info-card__label{
    font-size: 11px;
  }

  .deposit2-info-card__value{
    font-size: 13px;
  }
}

/* =========================================================
   WITHDRAW PAGE 2
========================================================= */

html:has(body.withdraw2-page){
  scrollbar-gutter: auto;
}

body.withdraw2-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.withdraw2-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.withdraw2-page .site-footer{
  margin-top: auto;
}

.withdraw2-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.withdraw2-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  color: #ffffff;
}

.withdraw2-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

.withdraw2-balance{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffe588;
}

.withdraw2-quick-nav{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.withdraw2-quick-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #181818;
}

.withdraw2-quick-nav__icon-wrap{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #43517c;
  display: grid;
  place-items: center;
  transition: background .18s ease, transform .18s ease;
}

.withdraw2-quick-nav__item:hover .withdraw2-quick-nav__icon-wrap,
.withdraw2-quick-nav__item.is-active .withdraw2-quick-nav__icon-wrap{
  background: #2a3457;
  transform: translateY(-1px);
}

.withdraw2-quick-nav__icon{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.withdraw2-quick-nav__label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffffff;
}

.withdraw2-section + .withdraw2-section{
  margin-top: 26px;
}

.withdraw2-section__title{
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 22px;
  background: #43517c;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.withdraw2-section__title--brand{
  gap: 16px;
}

.withdraw2-brand-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 42px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  flex: 0 0 auto;
}

.withdraw2-brand-box__logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.withdraw2-brand-box__text{
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.withdraw2-info-wrap{
  background: #d9d9d9;
  padding: 20px 16px;
}

.withdraw2-info-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.withdraw2-info-card{
  min-height: 90px;
  border: 1px solid #8c8c8c;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.withdraw2-info-card__label{
  font-size: 16px;
  line-height: 1.05;
  font-weight: 500;
  color: #3c3c3c;
}

.withdraw2-info-card__value{
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: #3c3c3c;
  white-space: nowrap;
}

.withdraw2-form{
  padding-top: 20px;
}

.withdraw2-form-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.withdraw2-field{
  width: 100%;
  height: 50px;
  border: 1px solid #8c8c8c;
  border-radius: 10px;
  background: #efefef;
  color: #444;
  font-size: 16px;
  padding: 0 20px;
  outline: none;
}

.withdraw2-shortcuts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.withdraw2-shortcut{
  min-width: 132px;
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: #43517c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.withdraw2-shortcut:hover{
  background: #2a3457;
  transform: translateY(-1px);
}

.withdraw2-submit-wrap{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.withdraw2-submit{
  width: 280px;
  height: 68px;
  border: 0;
  border-radius: 18px;
  background: #43517c;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.withdraw2-submit:hover{
  background: #2a3457;
  transform: translateY(-1px);
}

.withdraw2-value-top{
  font-size: 12px;   /* smaller */
  font-weight: 500;
}

.withdraw2-value-bottom{
  font-size: 20px;   /* keep big */
  font-weight: 800;
}

@media (max-width: 991px){
  .withdraw2-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .withdraw2-quick-nav{
    justify-content: flex-start;
  }

  .withdraw2-info-grid,
  .withdraw2-form-grid{
    grid-template-columns: 1fr;
  }

  .withdraw2-submit-wrap{
    justify-content: flex-start;
  }
}

@media (max-width: 767px){
  .withdraw2-main{
    padding: 18px 0 24px;
  }

  .withdraw2-header{
    gap: 16px;
    margin-bottom: 18px;
  }

  .withdraw2-heading h1{
    font-size: 22px;
  }

  .withdraw2-heading p{
    font-size: 11px;
  }

  .withdraw2-balance{
    margin-top: 14px;
    font-size: 16px;
  }

  .withdraw2-quick-nav{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .withdraw2-quick-nav__item{
    gap: 5px;
  }

  .withdraw2-quick-nav__icon-wrap{
    width: 54px;
    height: 54px;
  }

  .withdraw2-quick-nav__icon{
    width: 24px;
    height: 24px;
  }

  .withdraw2-quick-nav__label{
    font-size: 9px;
    text-align: center;
  }

  .withdraw2-section + .withdraw2-section{
    margin-top: 18px;
  }

  .withdraw2-section__title{
    min-height: 54px;
    padding: 0 14px;
    font-size: 16px;
  }

  .withdraw2-section__title--brand{
    gap: 12px;
  }

  .withdraw2-brand-box{
    width: 104px;
    height: 34px;
    border-radius: 12px;
  }

  .withdraw2-brand-box__text{
    font-size: 16px;
  }

  .withdraw2-info-wrap{
    padding: 10px;
    background: #d9d9d9;
  }

  .withdraw2-info-grid{
    gap: 10px;
  }

  .withdraw2-info-card{
    min-height: 68px;
    padding: 10px 14px;
    gap: 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #9a9a9a;
  }

  .withdraw2-info-card__label{
    font-size: 12px;
    line-height: 1.05;
  }

  .withdraw2-info-card__value{
    font-size: 14px;
    line-height: 1;
  }

  .withdraw2-form{
    padding-top: 14px;
  }

  .withdraw2-field{
    height: 56px;
    font-size: 15px;
    border-radius: 16px;
    padding: 0 16px;
  }

  .withdraw2-shortcuts{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .withdraw2-shortcut{
    min-width: 0;
    height: 52px;
    border-radius: 16px;
    font-size: 15px;
  }

  .withdraw2-submit-wrap{
    justify-content: stretch;
    margin-top: 12px;
  }

  .withdraw2-submit{
    width: 100%;
    height: 58px;
    border-radius: 16px;
    font-size: 17px;
  }
}

@media (max-width: 480px){
  .withdraw2-quick-nav{
    gap: 8px 6px;
  }

  .withdraw2-quick-nav__icon-wrap{
    width: 50px;
    height: 50px;
  }

  .withdraw2-quick-nav__icon{
    width: 22px;
    height: 22px;
  }

  .withdraw2-quick-nav__label{
    font-size: 8px;
  }

  .withdraw2-info-wrap{
    padding: 8px;
  }

  .withdraw2-info-grid{
    gap: 8px;
  }

  .withdraw2-info-card{
    min-height: 62px;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .withdraw2-info-card__label{
    font-size: 11px;
  }

  .withdraw2-info-card__value{
    font-size: 13px;
  }
}

/* =========================================================
   ACCOUNT PAGE
========================================================= */

html:has(body.account-page){
  scrollbar-gutter: auto;
}

body.account-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.account-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.account-page .site-footer{
  margin-top: auto;
}

.account-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.account-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  color: #ffffff;
}

.account-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

.account-balance{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffe588;
}

.account-quick-nav{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.account-quick-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #181818;
}

.account-quick-nav__icon-wrap{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #546597;
  display: grid;
  place-items: center;
  transition: background .18s ease, transform .18s ease;
}

.account-quick-nav__item:hover .account-quick-nav__icon-wrap,
.account-quick-nav__item.is-active .account-quick-nav__icon-wrap{
  background: #2a3457;
  transform: translateY(-1px);
}

.account-quick-nav__icon{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.account-quick-nav__label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffffff;
}

.account-section + .account-section{
  margin-top: 14px;
}

.account-section__title{
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 36px;
  background: #43517c;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.account-section__body{
  background: #d9d9d9;
  padding: 16px 28px 18px;

  /* ★★ 밝은 패널의 **글자색 팔레트** — 이 한 곳에서 나온다   [2026-09-06]
     -------------------------------------------------------------------
     이 패널은 배경만 밝게 깔고 글자색을 정하지 않았다. 그런데 이 사이트의
     기본 글자색은 어두운 테마용 var(--text) = #e8f2ee (거의 흰색)이다.
     그래서 여기에 넣는 요소가 **색을 직접 정하지 않으면 흰 글자가 밝은 회색
     위에 얹혀 안 읽힌다** (대비 1.2:1).

     실제로 두 번 났다 :
       2026-08-25  출금/입금 화면 인라인 색 #8d97b0 · #9fb0c9
       2026-09-06  책임도박(/rg) 화면 — 설명문·카드 라벨이 통째로 안 보임 (CK 제보)

     그래서 배경을 까는 이 자리에서 글자색도 같이 정한다. 이제 새 화면이
     이 패널 안에 무엇을 넣든 **아무것도 안 해도 읽힌다.**

     ★ 규칙 : **배경을 직접 까는 요소는 글자색도 직접 정한다.**
       (.rg-warn 처럼 패널 밖에서도 쓰이는 것은 var() 가 아니라 실제 값을
        써야 한다 — 변수는 이 패널 안에서만 정의돼 있다)
     tests/rg_test.php [J] 가 이 규칙을 감시한다.

     ★ 아래 대비율은 추측이 아니라 계산값이다. 두 배경 모두에서 WCAG AA
       (본문 4.5:1) 를 넘는 값만 골랐다 — 패널(#d9d9d9)이 카드(#efefef)보다
       어두우므로 패널 기준으로 고르면 카드에서도 안전하다.
       색을 바꾸면 tests/rg_test.php [J] 가 두 배경 모두에서 다시 계산한다. */
  --panel-ink:       #23293a;   /* 본문 · 카드 안 글자   패널 10.26 · 카드 12.60 */
  --panel-ink-soft:  #4a5262;   /* 보조 설명 · 단위       패널  5.56 · 카드  6.83 */
  --panel-ink-label: #3c3c3c;   /* 라벨                  패널  7.81 · 카드  9.59 */
  --panel-warn:      #8a4a00;   /* 경고 (주황)            패널  4.86 · 카드  5.97 */
  --panel-ok:        #0a6a4f;   /* 확정 · 링크 (초록)      패널  4.67 · 카드  5.73 */
  --panel-line:      #9aa3b0;   /* 구분선 · 입력 테두리 */

  color: var(--panel-ink);
}

.account-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}

.account-info-card{
  min-height: 66px;
  border: 1px solid #8c8c8c;
  border-radius: 12px;
  background: #efefef;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.account-info-card__label{
  font-size: 16px;
  line-height: 1.1;
  font-weight: 500;
  color: #3c3c3c;
}

.account-info-card__value{
  font-size: 17px;
  line-height: 1.1;
  font-weight: 700;
  color: #3c3c3c;
  text-align: right;
  word-break: break-word;
}

/* 카드 값 자리의 작은 버튼 — Total Rewards Earned → 어필리에이트 포털 [2026-09-08] */
.account-info-card__btn{
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: #0a6a4f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease;
}

.account-info-card__btn:hover{
  background: #117a5e;
  color: #ffffff;
}

.account-info-card__value--verified{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #09B285;
}

.account-info-card__verified-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.account-password-form{
  padding-top: 2px;
}

.account-password-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-password-field{
  position: relative;
}

.account-password-input{
  width: 100%;
  height: 64px;
  border: 1px solid #8c8c8c;
  border-radius: 12px;
  background: #efefef;
  color: #444;
  font-size: 18px;
  padding: 0 54px 0 22px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.account-password-input::placeholder{
  color: #4a4a4a;
  opacity: 1;
}

.account-password-input:focus,
.account-password-input:not(:placeholder-shown){
  border: 2px solid #666;
  background: #f5f5f5;
}

.account-password-toggle{
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #C4C4C4;
}

.account-password-toggle__icon{
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: url('../assets/icons/spass.svg') center/contain no-repeat;
  -webkit-mask: url('../assets/icons/spass.svg') center/contain no-repeat;
}

.account-password-toggle.is-active{
  color: #DF3434;
}

.account-password-submit-wrap{
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.account-password-submit{
  min-width: 278px;
  height: 55px;
  padding: 0 28px;
  border: 0;
  border-radius: 16px;
  background: #546597;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.account-password-submit:hover{
  background: #2b344e;
  transform: translateY(-1px);
}

@media (max-width: 991px){
  .account-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .account-quick-nav{
    justify-content: flex-start;
  }

  .account-info-grid,
  .account-password-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .account-main{
    padding: 18px 0 24px;
  }

  .account-header{
    gap: 16px;
    margin-bottom: 18px;
  }

  .account-heading h1{
    font-size: 22px;
  }

  .account-heading p{
    font-size: 11px;
  }

  .account-balance{
    margin-top: 14px;
    font-size: 16px;
  }

  .account-quick-nav{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .account-quick-nav__item{
    gap: 5px;
  }

  .account-quick-nav__icon-wrap{
    width: 54px;
    height: 54px;
  }

  .account-quick-nav__icon{
    width: 24px;
    height: 24px;
  }

  .account-quick-nav__label{
    font-size: 9px;
    text-align: center;
  }

  .account-section + .account-section{
    margin-top: 12px;
  }

  .account-section__title{
    min-height: 54px;
    padding: 0 14px;
    font-size: 16px;
  }

  .account-section__body{
    padding: 10px;
  }

  .account-info-grid{
    gap: 10px;
  }

  .account-info-card{
    min-height: 62px;
    padding: 10px 14px;
    gap: 10px;
    border-radius: 12px;
  }

  .account-info-card__label{
    font-size: 13px;
  }

  .account-info-card__value{
    font-size: 13px;
  }

  .account-info-card__verified-icon{
    width: 18px;
    height: 18px;
  }

  .account-password-input{
    height: 56px;
    font-size: 15px;
    border-radius: 12px;
    padding: 0 48px 0 16px;
  }

  .account-password-toggle{
    right: 14px;
    width: 20px;
    height: 20px;
  }

  .account-password-submit-wrap{
    margin-top: 14px;
    justify-content: stretch;
  }

  .account-password-submit{
    width: 100%;
    min-width: 0;
    height: 58px;
    border-radius: 14px;
    font-size: 17px;
  }
}

@media (max-width: 480px){
  .account-quick-nav{
    gap: 8px 6px;
  }

  .account-quick-nav__icon-wrap{
    width: 50px;
    height: 50px;
  }

  .account-quick-nav__icon{
    width: 22px;
    height: 22px;
  }

  .account-quick-nav__label{
    font-size: 8px;
  }

  .account-section__body{
    padding: 8px;
  }

  .account-info-grid{
    gap: 8px;
  }

  .account-info-card{
    min-height: 58px;
    padding: 8px 12px;
    gap: 8px;
  }

  .account-info-card__label{
    font-size: 11px;
  }

  .account-info-card__value{
    font-size: 12px;
  }

  .account-password-input{
    height: 52px;
    font-size: 14px;
  }

  .account-password-submit{
    height: 54px;
    font-size: 15px;
  }
}

/* =========================================================
   ABOUT PAGE
========================================================= */

html:has(body.about-page){
  scrollbar-gutter: auto;
}

body.about-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.about-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.about-page .site-footer{
  margin-top: auto;
}

.about-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.about-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  color: #ffffff;
}

.about-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

.about-tabs-section{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-tabs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: #43517c;
  overflow: hidden;
}

.about-tab{
  min-height: 62px;
  padding: 0 36px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}

.about-tab:hover,
.about-tab.is-active{
  background: #2f3957;
}

.about-content-wrap{
  background: transparent;
}

.about-panel{
  display: none;
  color: #ffffff;
  line-height: 1.55;
}

.about-panel.is-active{
  display: block;
}

.about-panel h2{
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  color: #ffffff;
}

.about-panel h3{
  margin: 22px 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: #fffefe;
}

.about-panel p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffff;
}

.about-faq-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-faq-item h3{
  margin-top: 0;
}

@media (max-width: 991px){
  .about-header{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px){
  .about-main{
    padding: 18px 0 24px;
  }

  .about-header{
    gap: 16px;
    margin-bottom: 18px;
  }

  .about-heading h1{
    font-size: 22px;
  }

  .about-heading p{
    font-size: 11px;
  }

  .about-tabs{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-tab{
    min-height: 48px;
    padding: 0 12px;
    font-size: 11px;
    text-align: center;
  }

  .about-panel h2{
    font-size: 18px;
    margin-bottom: 14px;
  }

  .about-panel h3{
    font-size: 14px;
    margin: 18px 0 8px;
  }

  .about-panel p{
    font-size: 14px;
    margin-bottom: 14px;
  }

  .about-faq-list{
    gap: 14px;
  }
}

@media (max-width: 480px){
  .about-tab{
    min-height: 44px;
    font-size: 10px;
    padding: 0 8px;
  }

  .about-panel h2{
    font-size: 16px;
  }

  .about-panel h3{
    font-size: 13px;
  }

  .about-panel p{
    font-size: 13px;
    line-height: 1.55;
  }
}

/* =========================================================
   HISTORY PAGE
========================================================= */

html:has(body.history-page){
  scrollbar-gutter: auto;
}

body.history-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.history-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.history-page .site-footer{
  margin-top: auto;
}

.history-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.history-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  color: #ebebeb;
}

.history-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

.history-tabs-section{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.history-tab{
  min-height: 64px;
  border: 0;
  background: #252e48;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding: 0 36px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.history-tab.is-active{
  background: #546597;
}

.history-tab:hover{
  background: #7a7a7a;
}

.history-tab.is-active:hover{
  background: #546597;
}

.history-panel{
  display: none;
}

.history-panel.is-active{
  display: block;
}

.history-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-row{
  background: #252e48;
  min-height: 66px;
  display: grid;
  align-items: center;
  column-gap: 18px;
  padding: 0 26px;
}

.history-row--transaction{
  grid-template-columns: 145px 155px 320px minmax(260px, 1fr) 165px;
}

.history-row--play{
  grid-template-columns: 290px 120px minmax(180px, 1fr) 130px 165px;
}

.history-cell{
  min-width: 0;
}

.history-type,
.history-method,
.history-date,
.history-game-text,
.history-balance-label,
.history-balance-value,
.history-view-link{
  color: #f5f5f5;
}

.history-type{
  font-size: 14px;
  font-weight: 500;
}

.history-amount{
  font-size: 18px;
  font-weight: 700;
}

.history-amount--positive{
  color: #00A532;
}

.history-amount--negative{
  color: #c90f08;
}

.history-bonus-link{
  font-size: 15px;
  font-weight: 500;
  color: #d51a12;
  text-decoration: none;
  transition: opacity .18s ease;
}

.history-bonus-link:hover{
  opacity: .78;
}

.history-bonus-placeholder{
  display: block;
  width: 100%;
  min-height: 1px;
}

.history-method{
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.history-date{
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.history-cell--date{
  text-align: right;
}

.history-cell--balance{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.history-balance-label{
  font-size: 14px;
  font-weight: 500;
}

.history-balance-value{
  font-size: 18px;
  font-weight: 500;
}

.history-result{
  font-size: 24px;
  font-weight: 700;
}

.history-result--lose{
  color: #c90f08;
}

.history-result--win{
  color: #00A532;
}

.history-game-text{
  font-size: 14px;
  font-weight: 500;
}

.history-view-link{
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .18s ease;
}

.history-view-link:hover{
  opacity: .7;
}

@media (max-width: 1199px){
  .history-row--transaction{
    grid-template-columns: 120px 120px 240px minmax(220px, 1fr) 150px;
    column-gap: 14px;
    padding: 0 18px;
  }

  .history-row--play{
    grid-template-columns: 220px 100px minmax(180px, 1fr) 120px 150px;
    column-gap: 14px;
    padding: 0 18px;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-balance-label,
  .history-balance-value{
    font-size: 16px;
  }

  .history-result{
    font-size: 20px;
  }

  .history-method,
  .history-date,
  .history-game-text,
  .history-view-link{
    font-size: 15px;
  }
}

@media (max-width: 991px){
  .history-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
  }

  .history-row--transaction,
  .history-row--play{
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 16px;
  }

  .history-cell--date{
    text-align: left;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-method,
  .history-date,
  .history-balance-label,
  .history-balance-value,
  .history-game-text,
  .history-view-link{
    font-size: 15px;
  }

  .history-result{
    font-size: 22px;
  }
}

@media (max-width: 767px){
  .history-main{
    padding: 18px 0 24px;
  }

  .history-heading h1{
    font-size: 22px;
  }

  .history-heading p{
    font-size: 11px;
  }

  .history-tabs-section{
    gap: 16px;
  }

  .history-tab{
    min-height: 52px;
    padding: 0 14px;
    font-size: 11px;
  }

  .history-list{
    gap: 8px;
  }

  .history-row{
    min-height: 0;
    padding: 14px;
    row-gap: 8px;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-method,
  .history-date,
  .history-balance-label,
  .history-balance-value,
  .history-game-text,
  .history-view-link{
    font-size: 14px;
  }

  .history-result{
    font-size: 20px;
  }

  .history-cell--balance{
    gap: 8px;
  }
}

@media (max-width: 480px){
  .history-tab{
    min-height: 48px;
    padding: 0 10px;
    font-size: 10px;
  }

  .history-row{
    padding: 12px;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-method,
  .history-date,
  .history-balance-label,
  .history-balance-value,
  .history-game-text,
  .history-view-link{
    font-size: 13px;
  }

  .history-result{
    font-size: 18px;
  }
}

/* ---------------------------------------------------------
   HISTORY PAGE — 페이지 이동 · 🔍 · 원장(transactions) 카드   [2026-09-08]
   -----------------------------------------------------------
   CK 지시 : playhistory 의 페이지 이동 버튼과 돋보기를 2026.gbjp.fun
   playhistory 스타일로, transactions 는 playhistory 기준으로.
   ★ 두 화면이 **같은 규칙**을 쓴다 — 여기 한 곳에만 둔다.
   Pagenation 라이브러리는 <button class="btn btn-white btn_page"> /
   현재 페이지는 class="btn btn-white active" 를 뱉는다 (Pagenation.php).
--------------------------------------------------------- */
.history-pager{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.history-pager .btn{
  min-width: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: #252e48;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: default;
}

.history-pager .btn_page{
  cursor: pointer;
  color: #f5f5f5;
  transition: border-color .16s ease, background .16s ease;
}

.history-pager .btn_page:hover{
  border-color: #16b98c;
  background: #2c3756;
}

/* 현재 페이지 — btn_page 가 없다는 것만으로 판별하면 맨 끝 페이지에서
   비활성인 '<' '>' 까지 현재 페이지처럼 칠해진다. active 를 본다. */
.history-pager .btn.active{
  border-color: #16b98c;
  background: #16b98c;
  color: #ffffff;
}

/* 더 갈 곳이 없어 비활성인 버튼 (1st / < / > / Last) */
.history-pager .btn:not(.btn_page):not(.active){
  opacity: .38;
}

.history-pager .btn-link{
  font-size: 12px;
  font-weight: 700;
}

/* 내용 + 🔍 를 한 줄에 — 내용이 길면 내용만 줄바꿈되고 🔍 는 오른쪽에 남는다 */
.history-cell--method{
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-cell--method .history-method{
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-all;
}

/* 🔍 — 사이트 색 원형 버튼 (예전에는 맨 링크 글자였다) */
.history-detail-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.history-detail-btn:hover{
  border-color: #16b98c;
  background: rgba(255, 255, 255, .1);
  transform: scale(1.08);
}

.history-empty{
  background: #252e48;
  border-radius: 8px;
  padding: 28px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
}

/* 원장(transactions) — Date · Type · Detail · Amount · Ref · Status */
.history-row--ledger{
  grid-template-columns: 170px 130px minmax(200px, 1fr) 130px 140px 190px;
  padding: 0 22px;
}

/* 원장 카드의 날짜는 19자("2026-09-08 10:00:00")라 16px 이면 칸을 넘친다 */
.history-row--ledger .history-date{ font-size: 14px; }

.history-row--head{
  min-height: 40px;
  background: #2c3756;
}

.history-row--head span{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.history-row--head .history-cell--amount,
.history-row--ledger .history-cell--amount{ text-align: right; }

.history-ref{
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  word-break: break-all;
}

.history-cell--status{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.history-status{
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.history-status--paid    { color: #5fe0b4; border-color: rgba(95, 224, 180, .45); background: rgba(22, 185, 140, .12); }
.history-status--pending { color: #ffd166; border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .12); }
.history-status--canceled{ color: #ff8a80; border-color: rgba(255, 138, 128, .45); background: rgba(255, 138, 128, .12); }

form.history-cancel{ display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
.history-cell--status .history-status{ vertical-align: middle; }

.history-cancel__btn{
  padding: 5px 12px;
  border: 1px solid #c90f08;
  border-radius: 999px;
  background: transparent;
  color: #ff8a80;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.history-cancel__btn:hover{
  background: #c90f08;
  color: #ffffff;
}

.history-cell__label{ display: none; }

@media (max-width: 1199px){
  .history-row--ledger{
    grid-template-columns: 150px 110px minmax(160px, 1fr) 120px 120px 170px;
    column-gap: 14px;
    padding: 0 18px;
  }
  .history-row--ledger .history-date{ font-size: 13px; }
}

@media (max-width: 991px){
  .history-row--head{ display: none; }

  .history-row--ledger{
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 14px 16px;
  }

  /* 칸 앞에 라벨 — 제목 줄이 사라진 자리를 메운다 */
  .history-row--ledger .history-cell{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .history-row--ledger .history-cell__label{
    display: inline-block;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
  }

  .history-row--ledger .history-cell--amount,
  .history-row--ledger .history-cell--status{ justify-content: space-between; }

  .history-cell--method{ gap: 8px; }
}

@media (max-width: 480px){
  .history-pager{ gap: 4px; }
  .history-pager .btn{ min-width: 32px; padding: 7px 8px; font-size: 12px; }
}


/* =========================================================
   PROMOTION PAGE
========================================================= */

html:has(body.promotion-page){
  scrollbar-gutter: auto;
}

body.promotion-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.promotion-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.promotion-page .site-footer{
  margin-top: auto;
}

.promotion-header{
  margin-bottom: 22px;
}

.promotion-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  color: #f0f0f0;
}

.promotion-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

.promotion-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promotion-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 102px;
  gap: 8px;
  align-items: stretch;
}

.promotion-card__media{
  position: relative;
  min-height: 142px;
  padding: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  display: block;
}

.promotion-card__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promotion-card__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
}

.promotion-card__text{
  position: absolute;
  left: 42px;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  z-index: 2;
}

.promotion-card__title{
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}

.promotion-card__desc{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}

.promotion-card__action{
  background: #252e48;
  color: #fff;
  border-radius: 22px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .18s ease, transform .18s ease;
  text-decoration: none;
}

.promotion-card__media:hover,
.promotion-card__action:hover{
  transform: translateY(-1px);
}

.promotion-card__action:hover{
  background: #1a2033;
}

@media (max-width: 991px){
  .promotion-card{
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .promotion-card__media{
    min-height: 128px;
  }

  .promotion-card__text{
    left: 26px;
    right: 26px;
  }

  .promotion-card__title{
    font-size: 18px;
  }

  .promotion-card__desc{
    font-size: 14px;
  }

  .promotion-card__action{
    font-size: 13px;
    border-radius: 18px;
  }
}

@media (max-width: 767px){
  .promotion-main{
    padding: 18px 0 24px;
  }

  .promotion-header{
    margin-bottom: 18px;
  }

  .promotion-heading h1{
    font-size: 22px;
  }

  .promotion-heading p{
    font-size: 11px;
  }

  .promotion-list{
    gap: 8px;
  }

  .promotion-card{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .promotion-card__media{
    min-height: 126px;
  }

  .promotion-card__text{
    left: 18px;
    right: 18px;
    gap: 6px;
  }

  .promotion-card__title{
    font-size: 16px;
  }

  .promotion-card__desc{
    font-size: 12px;
  }

  .promotion-card__action{
    min-height: 48px;
    border-radius: 14px;
    flex-direction: row;
    gap: 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px){
  .promotion-card__media{
    min-height: 112px;
  }

  .promotion-card__title{
    font-size: 14px;
  }

  .promotion-card__desc{
    font-size: 11px;
  }

  .promotion-card__action{
    min-height: 44px;
    font-size: 11px;
    border-radius: 12px;
  }
}

/* =========================================================
   PROMO DETAIL PAGE
========================================================= */

html:has(body.promo-detail-page){
  scrollbar-gutter: auto;
}

body.promo-detail-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #191e2c;
}

.promo-detail-main{
  flex: 1 0 auto;
  padding: 24px 0 30px;
}

.promo-detail-page .site-footer{
  margin-top: auto;
}

.promo-detail-header{
  margin-bottom: 20px;
}

.promo-detail-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  color: #fdfdfd;
}

.promo-detail-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(221, 221, 221, 0.82);
}

.promo-detail-hero{
  margin-bottom: 18px;
  overflow: hidden;
  background: #d3d3d3;
}

.promo-detail-hero__image{
  width: 100%;
  display: block;
  object-fit: cover;
}

.promo-detail-content{
  background: #252e48;
  padding: 22px 24px;
  color: #eeeeee;
}

.promo-detail-content h2{
  margin: 24px 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #ececec;
}

.promo-detail-content h2:first-child{
  margin-top: 0;
}

.promo-detail-content p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #ececec;
}

.promo-detail-back{
  margin-top: 18px;
}

.promo-detail-back__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 52px;
  padding: 0 20px;
  background: #3a4668;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .18s ease, transform .18s ease;
}

.promo-detail-back__link:hover{
  background: #26304b;
  transform: translateY(-1px);
}

@media (max-width: 767px){
  .promo-detail-main{
    padding: 18px 0 24px;
  }

  .promo-detail-heading h1{
    font-size: 22px;
  }

  .promo-detail-heading p{
    font-size: 11px;
  }

  .promo-detail-hero{
    margin-bottom: 14px;
  }

  .promo-detail-content{
    padding: 16px;
  }

  .promo-detail-content h2{
    font-size: 16px;
    margin: 20px 0 8px;
  }

  .promo-detail-content p{
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .promo-detail-back{
    margin-top: 14px;
  }

  .promo-detail-back__link{
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 12px;
  }
}

@media (max-width: 480px){
  .promo-detail-heading h1{
    font-size: 20px;
  }

  .promo-detail-content p{
    font-size: 13px;
  }
}
/* =========================================================
   SIGN UP - PHONE VERIFICATION   [2026-08-15]
   회원가입 폼의 인증번호 입력 행 / 인증 완료 표시 / 잠긴 버튼
========================================================= */

/*
 * hidden 속성이 실제로 먹도록 합니다.
 * .auth-grid 는 display:grid, .auth-status 는 display:block 이라
 * 클래스 쪽 display 가 [hidden] 의 기본 display:none 을 덮어씁니다.
 * (JS 가 .hidden = true 로 감춰도 화면에 그대로 남던 원인)
 */
.auth-grid[hidden],
.auth-status[hidden],
.auth-field[hidden],
.auth-captcha[hidden]{
  display: none !important;
}

.auth-field--verification .auth-input{
  padding-right: 46px;
}

.auth-verify-check{
  opacity: 0;
}

.auth-send.is-done{
  background: #10b316;
  color: #fff;
}

.auth-send:disabled,
.auth-submit:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* =========================================================
   푸터 "LEGAL & INFO" 드롭다운        [2026-08-24]
   ---------------------------------------------------------
   정책·안내 페이지 5개(개인정보 / 버그바운티 / 수수료 /
   베팅규정 / 공정성)를 푸터에 넣어야 하는데, 한 줄에 링크를
   열 개 늘어놓으면 좁은 화면에서 두세 줄로 접힌다.
   그래서 하나로 묶었다.

   <details>/<summary> 를 쓴다. 자바스크립트가 없어도 열린다.
   스크립트가 늦거나 막혀도 링크는 항상 눌린다.
========================================================= */
.footer-more {
  position: relative;
  display: inline-block;
}

/* summary 기본 삼각형 제거 (브라우저마다 방식이 다르다) */
.footer-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.footer-more > summary::-webkit-details-marker { display: none; }
.footer-more > summary::marker { content: ""; }

.footer-more__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .18s ease;
}
.footer-more[open] .footer-more__caret { transform: rotate(180deg); }

.footer-more__panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);     /* 푸터라서 위로 연다 */
  z-index: 60;

  min-width: 232px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #1a1f38;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.footer-more__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: #d8dbe6;
  font-size: .82rem;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}
.footer-more__panel a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}

/* 화면 가장자리에서 패널이 잘리지 않도록 */
@media (max-width: 520px) {
  .footer-more__panel {
    left: auto; right: 0;
    transform: none;
    min-width: 200px;
  }
  .footer-more__panel a { white-space: normal; }
}

/* =========================================================
   푸터 라이선스 표기        [2026-08-24]
   ---------------------------------------------------------
   Anjouan 의 Website Compliance 1.1 이 요구하는 항목이다.
   라이선스 번호 / 법인명 / 등록번호 / 등기주소 / 규제기관 링크가
   사이트 전체 푸터에 보여야 한다.

   작게 넣되 읽을 수는 있어야 한다. 규제 표기를 회색 4px 로 숨겨
   두는 사이트가 많은데, 그건 "prominently display" 를 지킨 것이
   아니다.
========================================================= */
.footer-licence {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-licence__no {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .02em;
  color: #cfd5e6;
}

.footer-licence__reg {
  font-size: .70rem;
  line-height: 1.5;
  color: #8d97b0;
}

.footer-licence__reg a { color: #9db4e0; text-decoration: underline; }
.footer-licence__reg a:hover { color: #fff; }

.footer-licence__age {
  font-size: .72rem;
  font-weight: 600;
  color: #e0a21a;
}

/* 모바일 푸터 */
.footer-mobile-licence {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0 10px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.footer-mobile-licence span {
  font-size: .70rem;
  line-height: 1.55;
  color: #8d97b0;
  word-break: break-word;     /* 긴 등기주소가 화면을 옆으로 밀지 않게 */
}

.footer-mobile-licence .footer-licence__no {
  font-size: .76rem;
  color: #cfd5e6;
}

.footer-mobile-licence a { color: #9db4e0; text-decoration: underline; }

/* =========================================================
   SLOT FILTER — CUSTOM DROPDOWN (.lt-sel)      [2026-09-01]
   ---------------------------------------------------------
   views/include/slot_filter.php 한 곳에서만 쓰인다.

   ★ 네이티브 <select>(.lt-sel__native) 는 지우지 않는다.
     스크립트가 조립을 **다 마친 뒤에야** .lt-sel--js 가 붙고,
     그때 clip 으로 숨는다. 조립이 실패하면 이 클래스가 안 붙어서
     네이티브가 그대로 보인다 — 그 화면에서도 필터는 고를 수 있다.
     display:none 이 아니라 clip 인 이유: 폼 값이 살아 있어야
     resources/js/script.js 의 getElementById("searchInput") 가
     계속 동작한다.

   ★ 목록은 hidden 속성으로 닫는다. 인라인 style 을 쓰지 않는다
     (첫 페인트에서 인라인이 CSS 를 이겨서, 나중에 class 로 열려고
      하면 안 열린다).
========================================================= */

.lt-sel{
  position: relative;
  width: 100%;
}

/* 조립이 끝나기 전 — 커스텀은 hidden, 네이티브가 보인다 */
.lt-sel__ui{ position: relative; }

/* 조립이 끝난 뒤 — 네이티브를 시각적으로만 걷어낸다 */
.lt-sel--js .lt-sel__native{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  box-shadow: none;
}

/* ---------- 여는 버튼 ---------- */

.lt-sel__btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 14px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: #252e48;
  color: rgba(255,255,255,.92);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  transition: border-color .18s ease, background .18s ease;
}

.lt-sel__btn:hover{ background: #2b3555; }
.lt-sel__btn:focus-visible{ outline: 2px solid #e0a21a; outline-offset: 2px; }

.lt-sel.is-open .lt-sel__btn{
  border-color: #e0a21a;
  background: #2b3555;
}

.lt-sel__cur{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;                 /* 긴 라벨이 캐럿을 밖으로 밀지 않게 */
}

.lt-sel__cur .lt-sel__lbl,
.lt-sel__ph{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-sel__ph{ color: rgba(255,255,255,.72); font-weight: 600; }

.lt-sel__caret{
  display: inline-flex;
  flex: 0 0 auto;
  color: rgba(255,255,255,.70);
  transition: transform .18s ease;
}

.lt-sel.is-open .lt-sel__caret{
  transform: rotate(180deg);
  color: #e0a21a;
}

/* ---------- 펼쳐지는 목록 ---------- */

.lt-sel__panel[hidden]{ display: none; }

.lt-sel__panel{
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* 목록 끝에서 뒤 페이지가 안 밀리게 */
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: #1b2236;
  box-shadow: 0 24px 48px rgba(0,0,0,.45);
  animation: ltSelIn .16s ease-out;
}

@keyframes ltSelIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .lt-sel__panel{ animation: none; }
  .lt-sel__caret{ transition: none; }
}

.lt-sel__panel::-webkit-scrollbar{ width: 8px; }
.lt-sel__panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}

.lt-sel__grp{
  padding: 10px 12px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #9aa6c4;
}

.lt-sel__sep{
  height: 1px;
  margin: 8px 12px;
  background: rgba(255,255,255,.10);
}

.lt-sel__opt{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;              /* 손가락으로 눌리는 크기 */
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #e8ecf7;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.lt-sel__opt:hover{ background: #3a476e; color: #ffffff; }
.lt-sel__opt:focus-visible{ outline: 2px solid #e0a21a; outline-offset: -2px; }

.lt-sel__opt.is-on{
  background: rgba(224,162,26,.16);
  color: #ffd97a;
  font-weight: 700;
}

.lt-sel__opt.is-on:hover{ background: rgba(224,162,26,.24); color: #ffe4a0; }

.lt-sel__opt .lt-sel__lbl{ flex: 1 1 auto; min-width: 0; }

.lt-sel__emo{
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}

.lt-sel__tick{
  display: inline-flex;
  flex: 0 0 auto;
  opacity: 0;                    /* 자리는 늘 잡아 둔다 — 글자가 안 흔들리게 */
  color: #ffd97a;
}

.lt-sel__opt.is-on .lt-sel__tick{ opacity: 1; }

@media (max-width: 767px){
  .lt-sel__panel{
    max-height: min(56vh, 380px);
    border-radius: 16px;
  }

  .lt-sel__opt{ font-size: 13px; }
}

/* =========================================================================
   게임 카드 — [PLAY REAL] / [PLAY DEMO] 오버레이            [CK 지시 2026-09-06]
   -------------------------------------------------------------------------
   ONCASI(oc-gc) 와 같은 동작을 이 사이트의 .game-card 위에 입힌다.
     · 카드는 <div class="game-card"> 가 되고, 안의 <button class="game-card__stage">
       가 썸네일·이름을 담는다. 무대를 누르면 **실행이 아니라** 오버레이가 열린다.
     · 실행은 오버레이 안 [▶ PLAY REAL] / [PLAY DEMO] 버튼(data-game-url)만 한다.
     · PC 는 hover 로 열린다. 휴대폰은 탭 → .is-open (헤더 스크립트).
   ★ 터치 기기에서는 :hover 가 탭 한 번에 켜져서 그 탭의 click 이 바로 버튼에
     떨어진다(ONCASI 실측: 탭 한 번에 게임이 실행됐다). 그래서 hover 는 진짜
     포인터가 있을 때만(@media hover) 클릭을 받고, 터치는 .is-open 만 받는다.
   ★ [PLAY REAL] 높이는 [PLAY DEMO] 의 2배 이상, 둘 사이 ≥30px — 실수로
     데모/실전을 바꿔 누르지 않게 (CK 지시).
   ========================================================================= */
.game-card__stage{
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  outline: none;
}
.game-card__stage:focus-visible{ box-shadow: inset 0 0 0 3px rgba(199,162,74,.45); }

/* 오버레이 : 기존 .game-play(grid, pointer-events:none) 위에 덮어쓴다 */
.game-card .game-play{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 9;                 /* .game-meta(8) 보다 위 — 버튼이 이름에 가리지 않게 */
}
@media (hover: hover){
  .game-card:hover .game-play{ opacity: 1; transform: scale(1); pointer-events: auto; }
}
.game-card.is-open .game-play{ opacity: 1; transform: scale(1); pointer-events: auto; }
/* 터치 기기에서 :hover 가 붙어도 클릭은 받지 않는다 (위 주석) */
@media (hover: none){
  .game-card:hover:not(.is-open) .game-play{ pointer-events: none; }
}

.game-play__real,
.game-play__demo{
  position: relative;         /* ::before(블러 배경) 위로 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.game-play__real{
  min-width: 62%;
  height: 52px;
  padding: 0 26px;
  background: linear-gradient(180deg, #E4C56B 0%, #B8902F 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  color: #1A1408 !important;
  font-size: 15px;
  font-weight: 800;
  transform: scale(.96);
  transition: transform .18s ease, filter .18s ease;
}
.game-card:hover .game-play__real,
.game-card.is-open .game-play__real{ transform: scale(1); }
.game-play__real:hover{ filter: brightness(1.06); }

.game-play__demo{
  height: 24px;
  padding: 0 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  color: #FFFFFF !important;
  font-size: 11px;
  font-weight: 700;
}
.game-play__demo:hover{ background: rgba(255,255,255,.2); }

@media (max-width: 767px){
  .game-card .game-play{ gap: 30px; }
  .game-play__real{ height: 46px; font-size: 13px; padding: 0 18px; }
  .game-play__demo{ height: 22px; font-size: 10px; }
}


/* =========================================================
   가입 / 비밀번호찾기 — Country 와 Mobile Number auth-grid--mobile 겹침
                                              [2026-09-17 CK 제보]
   ---------------------------------------------------------
   원인 : 국가 select 에 **인라인** style="min-width:105px" 이 박혀 있었다.
          .auth-grid--mobile 의 트랙은 100px(≤767px 에서는 92px) 인데
          인라인 선언은 그리드 트랙을 이기므로 select 가 제 칸을 넘었다.

     실측 (peso77 동일 코드에서, 수정 전)
       1440 / 768  : select 105px → 8px 간격 중 5px 을 먹고 3px 만 남음
       ≤767        : 트랙 92px → **5px 실제 겹침**

   ★ 인라인은 !important 말고는 CSS 로 못 이긴다. 그래서 덮지 않고
     header.php 의 인라인 속성 자체를 지웠다. 되살리지 마라.

   ★ 위쪽 원본 규칙(.auth-grid--mobile)은 건드리지 않았다 —
     여기서 #authSwitcher 로 명시도를 올려 덮는다. 되돌리려면 이 블록만 지우면 된다.
     인라인이 주던 105px 보다 넓게 잡아서 국가 표기가 전보다 덜 잘린다.
========================================================= */

#authSwitcher .auth-select--code{
  /* 트랙을 넘지 못하게. select 의 기본 min-width 는 auto 라 내용만큼 버틴다 */
  min-width: 0;
  width: 100%;
}

#authSwitcher .auth-grid--mobile{
  grid-template-columns: 112px minmax(0, 1fr) 84px;
}

@media (max-width: 767px){
  #authSwitcher .auth-grid--mobile{
    grid-template-columns: 100px minmax(0, 1fr) 76px;
  }
}

/* =========================================================
   myBalance — "How your rewards work" 안내 두 장   [2026-09-17 CK 지시]
   ---------------------------------------------------------
   peso77 의 같은 블록을 옮겨 왔다. 클래스 이름의 p77- 접두어는 그쪽에서 온
   흔적이다 — 세 사이트가 같은 이름을 써야 다음에 옮길 때 대조가 된다.

   ★ 이 블록은 .account-section__body(#d9d9d9) **안에** 들어간다.
     그 규칙대로 "배경을 직접 까는 요소는 글자색도 직접 정한다".
     아래 값은 그 자리에서 대비 계산이 끝난 밝은 패널 팔레트와 같다 :
       #23293a --panel-ink        (패널 10.26 · 카드 12.60)
       #4a5262 --panel-ink-soft   (패널  5.56 · 카드  6.83)
       #3c3c3c --panel-ink-label  (패널  7.81 · 카드  9.59)
     var() 를 쓰지 않고 실제 값을 적은 이유 : 변수는 그 패널 안에서만
     정의돼 있어서, 이 블록이 나중에 다른 자리로 옮겨가면 색을 잃는다.
========================================================= */

.p77-rw2__lead{
  margin: 2px 0 12px;
  color: #23293a;
  font-size: 14px;
  line-height: 1.6;
}
.p77-rw2__lead b{ font-weight: 800; }

.p77-rw2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}

.p77-rw2__card{
  padding: 14px 16px 13px;
  border: 1px solid #8c8c8c;
  border-radius: 12px;
  background: #efefef;
}

/* ② 는 "추가로 주는 것" 이다 — 눈으로 구분되게.
   금색 계열은 .comp-tier--top / .account-section 의 강조와 같은 가족이다. */
.p77-rw2__card--extra{
  border-color: #c08a12;
  background: #fbf2dc;
}

.p77-rw2__head{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.p77-rw2__num{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #43517c;   /* .account-section__title 과 같은 남색 */
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.p77-rw2__num--extra{ background: #a9760a; }

.p77-rw2__name{
  font-size: 16px;
  font-weight: 800;
  color: #23293a;
}

.p77-rw2__tag{
  padding: 3px 7px;
  border: 1px solid #8c8c8c;
  border-radius: 4px;
  background: #ffffff;
  color: #4a5262;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.p77-rw2__tag--extra{
  border-color: #c08a12;
  background: #ffffff;
  color: #8a5f06;
}

.p77-rw2__text{
  margin: 0;
  color: #3c3c3c;
  font-size: 13.5px;
  line-height: 1.65;
}
.p77-rw2__text b{ color: #23293a; font-weight: 800; }

@media (max-width: 767px){
  .p77-rw2{ grid-template-columns: 1fr; }
  .p77-rw2__lead{ font-size: 13.5px; }
  .p77-rw2__text{ font-size: 13px; }
}

/* =========================================================
   GAME SEARCH MODAL — 게임 이름 검색            [2026-09-26 CK 지시]
   ---------------------------------------------------------
   마크업·스크립트 : application/views/include/search_modal.php (한 곳)
   여는 버튼 세 곳 : PC 유틸바 .lt-search-btn--util
                    모바일 하단바 .lt-mbar__search
                    슬롯 탭 줄 .games-nav__search
                    (셋 다 [data-lt-search-open] — header.php · slot_filter.php)

   ★ 모달 컨테이너에는 hidden 속성이 붙어 있다(첫 페인트 번쩍임 방지,
     frontend-layout D-2). .is-open 의 display:flex 가 UA 의 hidden 을 이긴다.
     [hidden]{display:none!important} 같은 규칙을 여기 만들지 마라 — 영영 안 열린다.

   ★ z-index 9800 : 하단바(9400)·독(9500) 위, 게임 레이어·로그인 드로어 아래.
     카드의 [PLAY]/[Login] 을 누르면 모달이 먼저 닫히므로 둘이 겹칠 일이 없다.
     LiveChat 버블은 최대값 z-index 라 이길 수 없다 → 열려 있는 동안 숨긴다.
========================================================= */

/* ---- 여는 버튼 (공통) ---- */
.lt-search-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: #f5d27a;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lt-search-btn svg{ flex: 0 0 auto; display: block; }
.lt-search-btn:focus-visible{ outline: none; box-shadow: var(--ring); }

/* PC 유틸바 — 계정 칩/Sign Up 왼쪽 */
.lt-search-btn--util{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  transition: background .2s ease, border-color .2s ease;
}
.lt-search-btn--util:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(245,210,122,.6);
}

/* 모바일 하단바 — 햄버거 바로 오른쪽. 햄버거와 같은 크기(44x40) */
.lt-mbar__search{
  flex: 0 0 44px;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

/* 슬롯 탭 줄 — 칩 세 개 뒤. 아이콘만, 폭 고정 */
.games-nav__search{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #2a3350;
  transition: background .25s ease;
}
.games-nav__search:hover{ background: #3a476e; }

@media (max-width: 768px){
  /* 칩이 flex:1 1 0 으로 나눠 갖는 줄 — 돋보기는 줄어들지 않게 못 박는다 */
  .games-nav__search{ flex: 0 0 34px; width: 34px; height: 34px; }
}

/*
 * ★ 좁은 화면에서 🔍 가 들어간 자리 값을 치른다 (헤드리스 실측, 잔액 12,345.67 · 긴 이메일).
 *
 *   하단바 : 🔍(44px) 가 들어오면서 [이메일·잔액] 칸이 50px 줄었다.
 *            360px 에서 잔액이 109px 칸에 안 들어가 "12,34…" 로 잘렸다.
 *            잘린 잔액은 틀린 숫자로 읽힌다 → 389px 이하에서는 Rewards 의
 *            글자를 **화면에서만** 숨기고(스크린리더는 읽는다) 선물 아이콘만 남긴다.
 *   칩 줄  : 320px 에서 "Recently Played" 가 81px 칸에서 잘렸다.
 *            359px 이하에서는 칩 줄 🔍 를 빼고 하단바 🔍 에 맡긴다.
 */
@media (max-width: 389px){
  .lt-mbar__rw{ padding: 0 12px; }
  .lt-mbar__rw-txt{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 359px){
  .games-nav__search{ display: none; }
}

/* ---- 모달 ---- */
.lt-search{
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 16px 16px;
  background: rgba(5,8,16,.74);
}
.lt-search.is-open{ display: flex; }

.lt-search__panel{
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  max-height: 86vh;
  overflow: hidden;
  background: #1b2133;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.lt-search__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}

.lt-search__title{
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.lt-search__close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}
.lt-search__close:hover{ background: rgba(255,255,255,.16); }
.lt-search__close:focus-visible{ outline: none; box-shadow: var(--ring); }

.lt-search__field{
  position: relative;
  margin: 0 20px 14px;
}

.lt-search__field-ico{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #f5d27a;
  pointer-events: none;
}

.lt-search__input{
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 16px 0 46px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: #11151f;
  color: #fff;
  font-size: 16px;            /* ★ 16px 미만이면 iOS 가 입력할 때 화면을 확대한다 */
  line-height: normal;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lt-search__input::placeholder{ color: rgba(255,255,255,.45); }
.lt-search__input:focus{
  border-color: rgba(245,210,122,.7);
  box-shadow: 0 0 0 3px rgba(199,162,74,.22);
}
.lt-search__input::-webkit-search-cancel-button{ filter: invert(1); opacity: .6; }

.lt-search__body{
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 20px;
}

.lt-search__note{
  margin: 30px 0;
  text-align: center;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.5;
}

/* 결과 그리드 — 카드는 목록과 같은 .game-card (game_cards.php) */
.lt-search .lt-search__grid{ grid-template-columns: repeat(5, 1fr); gap: 14px; }

@media (max-width: 1199px){
  .lt-search .lt-search__grid{ grid-template-columns: repeat(4, 1fr); }
}

/* 열려 있는 동안 : 뒤 화면 스크롤 · 우측 하단 독 · LiveChat 버블을 멈춘다 */
body.lt-search-open{ overflow: hidden; }
body.lt-search-open .lt-dock,
body.lt-search-open #chat-widget,
body.lt-search-open #chat-widget-container{ visibility: hidden !important; }

@media (max-width: 767px){
  /* 모바일은 전체 화면 — 결과 카드를 넓게 보여준다 */
  .lt-search{ padding: 0; align-items: stretch; }
  .lt-search__panel{
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .lt-search__head{ padding: 14px 14px 10px; }
  .lt-search__title{ font-size: 16px; }
  .lt-search__field{ margin: 0 14px 12px; }
  .lt-search__body{ padding: 4px 14px calc(20px + var(--lt-mbar-safe)); }
  .lt-search .lt-search__grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
}