/* =====================================================================
 * PESO77 스킨 보정                                          [2026-08-30]
 * ---------------------------------------------------------------------
 * 셸은 main.css(PESO77-template), 내부 화면은 styles.css(라이트 변환본).
 * 두 시스템이 만나는 곳의 보정은 전부 이 파일에 모은다.
 * ★ main.css / styles.css 를 직접 고치지 말 것.
 * =================================================================== */

/* ---- 고정 탑바(71px) 아래로 본문을 내린다 ---- */
.main-container { margin-top: 71px; }

/* ---- 내부(longtian 계열) 화면이 셸 컨테이너 안에서 그대로 살도록 ---- */
.main-container > .container,
.main-container main.container { width: 100%; max-width: none; }

/* 내부 화면 텍스트 기본 대비 (라이트 배경) */
.main-container { color: #222; }

/* ---- 게임 목록 헤더 (slot/livedealer — styles.css 계열) ---- */
.games-title h2 { color: #1f332d; }
.games-nav__link { color: #33504a; }
/* styles.css 의 .live-page .games-nav__link 가 다크 시절 흰 글자를
   더 높은 특이도로 되살린다 — 같은 특이도로 눌러 준다  [2026-08-30] */
.live-page .games-nav__link { color: #33504a; }
.games-nav__link:hover, .games-nav__link.active { color: #00a868; }
.games-search select { color: #223530; background: #fff; }
.slot-hero__banner { background: #e7f0ed; }

/* ---- 버튼 기본 (내부 화면) ---- */
.btn-primary, .cta, [class*="btn--primary"] {
  background: linear-gradient(90deg, #1c6051, #3ab99e);
  color: #fff;
}

/* ---- 잔존 롱티엔 드로어(#mainNav)는 마커 보존용 — 항상 숨김 ---- */
#mainNav.nav { display: none !important; }

/* ---- 탑바 위 계약 마커(출석 배지)가 템플릿 톤과 어울리게 ---- */
.top-nav .dci-badge { margin-right: 6px; }

/* ---- 사이드바 체크인 타일: 템플릿은 video 에 margin-top 80 을 줬다.
       우리 사이드바는 첫 요소가 타일이므로 그대로 쓰되, 배지가 겹치면 여기서 보정 ---- */

/* ---- 씰 슬롯이 푸터 우측 블록에서 줄을 깨지 않게 ---- */
.footer-u2is .lic-seal-slot, .footer-u2is [id^="anj-"] { max-width: 90px; }

/* =====================================================================
 * main.css(템플릿) ↔ styles.css(내부 화면) 클래스 충돌 중화
 * ---------------------------------------------------------------------
 * 교집합 10개 중 셸에 실제 영향이 있는 것만 템플릿 쪽 값으로 되돌린다.
 * (styles.css 가 뒤에 로드되어 템플릿 셸을 덮어쓰는 문제)
 * =================================================================== */
.footer-bg .footer-top { background: transparent; border-top: 0; }
.footer-bg .footer-payments { background: transparent; border: 0; }
.footer-bg .footer-bottom { background: transparent; }
.top-nav .search-icon { position: static; right: auto; top: auto; transform: none; }
.game-thumb-img .game-badge { left: 10px; top: 10px; }

/* SIGN UP 사이드 배너가 고정 사이드바(220px)와 겹치지 않게 */
@media (min-width: 769px) {
  .side-banner { left: 240px !important; }
}

/* =====================================================================
 * auth 드로어(로그인/가입/비번찾기) 라이트 대비 보정        [2026-08-30]
 * ---------------------------------------------------------------------
 * styles.css 의 드로어는 다크 배경 시절 글자색(#d4d4d4, #f8f8f8, #f0f0f0)
 * 을 그대로 갖고 있는데 패널은 라이트(#f0f2f1)라 글씨가 안 보였다 (CK 신고).
 * styles.css 를 직접 고치지 않고 여기서 전부 덮는다.
 * =================================================================== */

/* 제목 (Member Login / Create New Account / Forgot Password) */
.auth-drawer .auth-switcher__subtitle { color: #1f332d; }

/* 뒤로가기 화살표 (라이트 위 라이트였음) */
.auth-drawer .auth-drawer__back-icon { background-color: #1f332d; }

/* 탭: 비활성은 진한 글자, 활성(초록 썸 위)만 흰 글자.
   활성 판정은 썸을 움직이는 것과 같은 data-auth-state 로 한다
   (JS 가 붙이는 is-active 클래스가 새면 흰-바탕-흰-글씨가 재발하므로
    클래스에 의존하지 않는다). */
.auth-drawer .auth-switcher__tab { color: #223530; }
.auth-drawer[data-auth-state="login"]  .auth-switcher__tab[data-auth-tab="login"],
.auth-drawer[data-auth-state="signup"] .auth-switcher__tab[data-auth-tab="signup"] { color: #fff; }

/* 입력값·placeholder */
.auth-drawer .auth-input,
.auth-drawer .auth-select { color: #223530; }
.auth-drawer .auth-input::placeholder { color: #6b7a75; opacity: 1; }

/* Remember me */
.auth-drawer .auth-check__label { color: #223530; }

/* 하단 링크줄 (Forgot Password / Don't have an account?) */
.auth-drawer .auth-link,
.auth-drawer .auth-link--muted { color: #506059; }
.auth-drawer .auth-links__line { color: #506059; }
.auth-drawer .auth-inline-switch { color: #0b7a5c; } /* 구 #9fe8c9 은 라이트 위 판독 불가 */
.auth-drawer .auth-password-toggle { color: #506059; }

/* =====================================================================
 * 전 페이지 대비 보정                                       [2026-08-30]
 * ---------------------------------------------------------------------
 * CK 신고: "페이지 전반적으로 배경색과 폰트색이 안 맞는다".
 *
 * 원인은 두 갈래다.
 *   (1) styles.css 가 다크 시절 글자색(#fff·#f0f0f0)을 그대로 갖고 있는데
 *       라이트 배경으로 바뀌어 흰 바탕에 흰 글자가 됐다.
 *   (2) 라이트 변환 때 반대로 **너무 진하게** 바꿔서, 어두운 배경(푸터
 *       딥그린·검은 썸네일 배지) 위에서 안 보이게 된 것들.
 *
 * 아래 값들은 눈짐작이 아니라 tools/contrast.py(WCAG 대비 실측 하네스)로
 * 잡은 15종이다. 기준은 일반 4.5:1 / 큰 글씨 3:1.
 * ★ styles.css·main.css 를 직접 고치지 않는다 — 보정은 여기 한 곳.
 * =================================================================== */

/* ---- 마이페이지 상단 원형 퀵내비 (ACCOUNT/DEPOSIT/WITHDRAW/HISTORY) ----
       #f0f0f0 글자가 #f0f2f1 배경에 얹혀 대비 1.01 이었다 (완전 비가시). */
.deposit-quick-nav__label { color: #1f332d; }

/* ---- 입금 수단 카드 이름 (All-in-One Checkout·GCash·USDT …) ----
       흰 글자 on #e7f0ed = 1.16. 카드가 라이트이므로 글자를 진하게. */
.deposit-method__name { color: #1f332d; }
/* 호버 배경도 다크 네이비(#192033) 잔재였다 — 라이트 그린으로 */
.deposit-method:hover { background: #d7e8e2; }
.deposit-method:hover .deposit-method__name { color: #12332c; }

/* ---- 썸네일 배지 (EXCLUSIVE·Cascading·ANIME Sexy …) ----
       styles.css 가 main.css(템플릿)를 덮으면서 검은 반투명 배경 위에
       진한 글자를 얹었다. 템플릿 값(흰 글자)으로 되돌린다. */
.game-badge { color: #fff; border-color: rgba(255,255,255,.18); }

/* ---- 사이드바 Live Chat 태그 (딥그린 #337560 위) ---- */
.menu-list .tag,
.side-menu .tag { color: #f7ecd6; }

/* ---- 탑바 출석 배지 READY (초록 위 초록이라 2.46) ---- */
.dci-badge__ready { color: #e9fdf4; }  /* header.php 인라인과 같은 값 */

/* ---- 비밀번호 변경 버튼 (연회색 배경 위 흰 글씨 2.59) ---- */
.account-password-submit { background: #1c6051; }

/* ---- 푸터 라이선스 블록 (딥그린 #16443E 위) ----
       법적 의무 표기라 읽히지 않으면 표기하지 않은 것과 같다. */
.footer-licence { color: rgba(255,255,255,.78); }
.footer-licence__no  { color: #a8c9bf; }
.footer-licence__reg { color: #aecdc4; }
.footer-licence__reg a { color: #9fe3c7; }
.footer-licence__age { color: #5fdda4; }
.footer-u2is { color: #c3d4cf; }

/* ---- 마이페이지 탭의 활성 링크 ----
       .nav-link 는 배경-클립 텍스트라 활성 시 #08df8d 로 칠해지는데,
       딥그린 탭 배경 위에서는 초록-위-초록이 된다. */
.nav-link.active { -webkit-text-fill-color: #eafff6; color: #eafff6; }
/* 모바일에서는 styles.css 가 `.nav .nav-link.active` 로 더 높은 특이도를
   갖는다 (딥그린 알약 위에 진한 글자 = 대비 1.90). 같은 특이도로 덮는다. */
@media (max-width: 900px) {
  .nav .nav-link.active { color: #eafff6; -webkit-text-fill-color: #eafff6; }
}

/* =====================================================================
 * 탑바 회원 컨트롤 — 시인성                     [2026-08-30 CK 지시]
 * ---------------------------------------------------------------------
 * "눈에 잘 보이지 않아, 생동감 있게" (CK).
 *
 * 원인은 세 요소가 전부 **딥그린 위의 반투명 검정/투명**이라는 것이다.
 * 배경과 명도가 가까우면 테두리도 글자도 묻힌다. 셋 다 각자 다른 방식으로
 * 배경에서 떼어 놓는다 — 잔액은 밝은 그린 알약, 출석 배지는 골드 윤곽,
 * 프로필 칩은 옅은 유리면.
 * =================================================================== */

/* ---- 잔액 알약: 반투명 검정 → PESO77 그린 그라디언트 ----
   ★ 모양(padding·둥근모서리·글자크기)까지 여기서 되돌린다.
     styles.css 의 `.user-pill, .balance-pill` 이 padding:0 · radius:0 ·
     font-size:11px 로 main.css 를 덮고 있어서, 배경만 칠하면 글자가 면에
     딱 붙은 각진 조각이 된다 — CK 가 "깨져 있다" 고 한 상태다.
     (실측: 98×28, padding 0, radius 0)  [2026-08-31] */
.top-nav .balance-pill {
  background: linear-gradient(135deg, #16a86b, #0d8a57);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
  border-radius: 999px;
  padding: 5px 5px 5px 15px;
  font-size: 15px;
  font-weight: 700;
  gap: 9px;
  line-height: 1.2;
}
.top-nav .balance-pill .balance-amount { font-size: 15px; font-weight: 700; }
.top-nav .balance-pill .balance-add { width: 26px; height: 26px; flex: none; }
.top-nav .balance-pill:hover {
  background: linear-gradient(135deg, #19bd79, #0f9c62);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.top-nav .balance-pill .balance-amount { letter-spacing: .2px; }

/* ---- 출석/리워드 배지 ----
   윤곽선만으로는 약했다 (CK: "눈에 띄지 않고"). 두 상태를 다르게 준다.

     is-ready : 받을 것이 있다 → 골드로 **채운다**. 탑바에서 가장 밝은 면이
                되므로 눈이 먼저 간다.
     is-done  : 이미 받았다   → 은은한 윤곽. 정보는 남기되 시선을 끌지 않는다.

   두 상태가 같은 모양이면 "지금 눌러야 하는지" 를 알 수 없다. [2026-08-31] */
.top-nav .dci-badge {
  border: 1px solid rgba(232, 200, 119, .45);
  background: rgba(232, 200, 119, .10);
  border-radius: 999px;
  padding: 5px 13px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.top-nav .dci-badge:hover { transform: translateY(-1px); }

/* 받을 것이 있을 때 — 골드 채움 */
.top-nav .dci-badge.is-ready {
  background: linear-gradient(135deg, #f0d492, #e0b95e);
  border-color: #f3dfae;
  box-shadow: 0 2px 10px rgba(224, 185, 94, .35);
}
.top-nav .dci-badge.is-ready .dci-badge__ico   { color: #12332c; }
.top-nav .dci-badge.is-ready .dci-badge__ready { color: #12332c; font-weight: 800; }
.top-nav .dci-badge.is-ready:hover {
  background: linear-gradient(135deg, #f6e0aa, #e8c877);
}

/* 이미 받았을 때 — 윤곽만 */
.top-nav .dci-badge.is-done { background: rgba(232, 200, 119, .10); }
.top-nav .dci-badge.is-done:hover { background: rgba(232, 200, 119, .20); }
.top-nav .dci-badge__ico { color: #f0d9a0; }
.top-nav .dci-badge__t1 { color: #f7ecd6; font-weight: 700; }
.top-nav .dci-badge__t2 { color: #cfe0da; }

/* ---- 프로필 칩: 옅은 유리면 + 테두리 ---- */
.top-nav .profile-chip {
  /* 흰 글자를 얹으므로 면을 밝히면 오히려 대비가 떨어진다 (.10 에서 4.43).
     테두리로 떼어 놓고 면은 살짝 어둡게 간다. [2026-08-30] */
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .30);
}
.top-nav .profile-chip:hover,
.acct-wrap.is-open .profile-chip {
  background: rgba(0, 0, 0, .26);
  border-color: rgba(255, 255, 255, .48);
}
.acct-wrap.is-open .acct-caret { transform: rotate(180deg); }
.acct-caret { display: inline-block; transition: transform .18s ease; }

/* =====================================================================
 * 계정 메뉴 (호버 레이어)                       [2026-08-30 CK 지시]
 * =================================================================== */
.acct-wrap { position: relative; }

.acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(20, 40, 35, .10);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
  z-index: 1300;
  /* 닫힘 상태 — display:none 대신 페이드로 (열릴 때 덜컥거리지 않게) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.acct-wrap.is-open .acct-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 칩과 메뉴 사이의 빈 틈에서 hover 가 끊기지 않게 다리를 놓는다 */
.acct-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px; height: 10px;
}

.acct-menu__id {
  padding: 6px 10px 8px;
  color: #6b7a75;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-all;
  border-bottom: 1px solid rgba(20, 40, 35, .08);
}

.acct-menu__bal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eaf6f1, #dff0e8);
  text-decoration: none;
}
.acct-menu__bal:hover { background: linear-gradient(135deg, #ddefe7, #cfe7dc); }
.acct-menu__bal-k { color: #33504a; font-size: 13px; font-weight: 600; }
.acct-menu__bal-v { color: #0b7a5c; font-size: 15px; font-weight: 800; }

.acct-menu a:not(.acct-menu__bal) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #22302c;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.acct-menu a:not(.acct-menu__bal):hover { background: #eef4f1; }
.acct-menu img { width: 18px; height: 18px; object-fit: contain; }
.acct-menu__out { color: #b3453f !important; }
.acct-menu__out:hover { background: #fbeceb !important; }

/* ---- 모바일: 잔액 오른쪽의 작은 화살표 버튼 ---- */
.acct-wrap--mobile { display: none; }
.acct-toggle {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 6px 4px 6px 2px;
  font-size: 13px;
  line-height: 1;
}
@media (max-width: 1024px) {
  /* main.css 는 모바일 탑바에서 로고와 잔액 알약을 뺀 **모든 직계 자식**을
     display:none !important 로 숨긴다. 알약을 래퍼로 감쌌으므로 그 래퍼가
     같은 규칙에 걸린다 — 같은 세기로 되돌린다.  [2026-08-30] */
  body.is-logged-in .top-nav > .acct-wrap--mobile {
    display: inline-flex !important;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
  }
  .acct-wrap--mobile .acct-menu { min-width: 210px; }

  /* ---- 모바일 토글을 데스크톱 프로필 칩과 같은 모양으로  [2026-08-31 CK]
     화살표만 있던 자리에 아이콘 + 이메일을 넣었다.

     [2026-09-01 CK 지시] 옆에 있던 잔액 알약을 뺐다(잔액은 하단 바에 있다).
     그만큼 자리가 남으므로 이메일을 더 길게 보여 준다 — 예전에는 알약과
     나눠 쓰느라 "harness@…" 에서 잘렸다. */
  .acct-wrap--mobile .acct-toggle--mobile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    /* 로고(26+130) + 래퍼 여백(10) 을 뺀 나머지. 화면 폭이 달라져도
       탑바가 밖으로 삐져나가지 않는다. */
    max-width: calc(100vw - 178px);
    margin-left: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 999px;
    /* 흰 덧칠(rgba(255,255,255,.10))로 만들었더니 바탕이 rgb(71,131,112) 이
       되어 흰 글씨 대비가 4.43 — 기준 4.5 에 못 미쳤다. 밝히지 말고 어둡게
       깐다. 칩은 그대로 도드라지면서 대비는 5 를 넘는다.  [2026-08-31] */
    background: rgba(0, 0, 0, .16);
  }
  .acct-wrap--mobile .acct-toggle__ico {
    width: 16px; height: 16px; flex: none;
    object-fit: contain;
  }
  .acct-wrap--mobile .acct-toggle__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
  }
  .acct-wrap--mobile .acct-caret { flex: none; font-size: 10px; opacity: .85; }
}

/* 아주 좁은 화면에서는 이메일 대신 아이콘 + 화살표만 남긴다 —
   로고까지 밀리면 탑바가 두 줄이 된다.

   [2026-09-01] 기준을 360px -> 330px 로 내렸다. 잔액 알약을 뺀 뒤로
   360px 에서도 이메일이 들어갈 자리가 생겼기 때문이다
   (실측 360px: 로고 156 + 여백 10 을 빼고 194px 가 남는다). */
@media (max-width: 330px) {
  .acct-wrap--mobile .acct-toggle__name { display: none; }
  .acct-wrap--mobile .acct-toggle--mobile { max-width: none; padding: 5px 7px; }
}

/* =====================================================================
 * 모바일 하단 바 — 회원 표시 칸                            [2026-08-30]
 * ---------------------------------------------------------------------
 * peso77.win 실서비스처럼 두 줄(표시명 / 잔액)을 한 칸에 담는다.
 * main.css 의 .mobile-user-name 은 한 줄 88px 전제라 여기서 덮는다.
 * =================================================================== */
@media (max-width: 900px) {
  .mobile-bottom-nav .mobile-user-btn {
    flex: 1.6 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    padding: 0 14px !important;
    line-height: 1.15;
    text-align: right;
    text-decoration: none;
  }
  .mobile-bottom-nav .mobile-user-btn .mobile-user-name {
    max-width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: #fff;                /* 초록 칸 위 */
  }
  .mobile-bottom-nav .mobile-user-btn .mobile-user-balance {
    font-size: 12px;
    font-weight: 600;
    color: #dff3ea;
    white-space: nowrap;
  }
  /* Log-out 은 연회색 칸 — 글자가 길어도 줄바꿈되지 않게 */
  .mobile-bottom-nav .btn-login-mobile { white-space: nowrap; padding: 0 16px !important; }

  /* ---- Rewards (Play to add)  [2026-08-31 CK 지시 — Log-out 자리]
     배지와 같은 골드로 칠한다. 하단 바에서 유일하게 "새로 생기는 것" 이
     있는 버튼이라, 회원 칸(초록)과 색이 겹치면 눈이 안 간다. */
  .mobile-bottom-nav .mobile-reward-btn {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px !important;
    background: linear-gradient(135deg, #f0d492, #e0b95e) !important;
    color: #12332c !important;
    white-space: nowrap;
    text-decoration: none;
  }
  .mobile-bottom-nav .mobile-reward-btn:active { filter: brightness(.96); }
  .mobile-bottom-nav .mobile-reward-ico {
    display: inline-flex;
    flex: none;
    color: #12332c;
  }
  .mobile-bottom-nav .mobile-reward-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
  }
  .mobile-bottom-nav .mobile-reward-t1 {
    font-size: 13px; font-weight: 800; color: #12332c;
  }
  .mobile-bottom-nav .mobile-reward-t2 {
    font-size: 10px; font-weight: 600; color: #2c5347;
  }
}

/* =====================================================================
 * 푸터 하단 정렬                                [2026-08-31 CK 지시]
 * ---------------------------------------------------------------------
 * 두 가지가 어긋나 있었다.
 *
 *  (1) 로고·씰·U2IS 가 align-items:flex-end 로 "밑변 맞춤" 이었다.
 *      높이가 제각각(로고 40px · 씰 ~64px · U2IS 25px)이라 밑변을 맞추면
 *      가운데가 들쭉날쭉해 보인다. 세로 중앙 정렬로 바꾼다.
 *
 *  (2) styles.css 의 .footer-licence 가 flex-column 이라, 한 줄로 쓴
 *      라이선스 문구의 조각들이 **각각 한 줄씩** 세로로 쌓였다.
 *      그래서 화면에 "· Operated by U2IS Limited ·" 처럼 구분점이 줄
 *      끝에 남고, 점만 있는 빈 줄까지 생겼다 (CK 스크린샷).
 *      이제 뷰가 줄 단위 <p> 로 넘겨 주고, 구분자는 여기서 넣는다.
 * =================================================================== */

.footer-bottom {
  align-items: center;
  flex-wrap: wrap;
}

/* 브랜드 문구를 뺐으므로 로고 칸이 넓을 이유가 없다 */
.footer-branding {
  min-width: 0;
  max-width: none;
  align-items: center;
}
/* 브랜드 문구가 빠져 로고만 남았다. 우측(씰+U2IS) 과 무게를 맞춘다 */
.footer-brand-logo { height: 34px; display: block; }

.footer-u2is { align-items: center; }
.footer-u2is a { align-items: center !important; }

/* ---- 라이선스 표기 ----
   .footer-cont 안으로 옮겼으므로 폭·축은 컨테이너를 따른다.
   (밖에 두면 페이지 전체 기준 중앙이 되는데, 콘텐츠는 고정 사이드바
    220px 만큼 오른쪽으로 밀려 있어 축이 110px 어긋났다 — 실측) */
.footer-licence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 16px 0 0;
  padding: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* 카피라이트 띠는 화면 전체 폭이라 글자가 페이지 중앙에 선다.
   위의 콘텐츠(사이드바만큼 밀린 축)와 어긋나므로 같은 축으로 맞춘다. */
@media (min-width: 901px) {
  .footer-copyright { padding-left: 220px; box-sizing: border-box; }
}

.footer-licence__row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 10px;
}

/* 구분자는 조각 사이에만 — 줄이 바뀌어도 점이 떠돌지 않는다 */
.footer-licence__row > span + span::before {
  content: "·";
  margin-right: 10px;
  opacity: .55;
}

.footer-licence__row--addr { opacity: .92; }
.footer-licence a { color: rgba(255, 255, 255, .82); text-decoration: underline; }
.footer-licence a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-bottom { justify-content: center; row-gap: 14px; }
  .footer-branding { justify-content: center; width: 100%; }
  .footer-u2is { margin-left: 0 !important; justify-content: center; width: 100%; }
  /*
   * 좁은 화면에서는 구분점을 없앤다.
   * ::before 가 뒤따르는 span 에 붙어 있어서 줄 끝에 점이 남지는 않지만,
   * 대신 **다음 줄 맨 앞**에 점이 떠 보인다 (390px 실측).
   * 모바일에서는 줄바꿈 자체가 구분 역할을 하므로 점이 필요 없다.
   */
  .footer-licence__row { gap: 2px 10px; }
  .footer-licence__row > span + span::before { content: none; }
}

/* =====================================================================
 * 거래·플레이 이력 목록                        [2026-08-31 CK 지시]
 * ---------------------------------------------------------------------
 * styles.css 가 날짜·유형·내용 글자를 #f5f5f5 로 두고 있었다.
 * 다크 시절 값인데 행 카드가 흰색이라 대비 1.09 — 화면에 글자가
 * 있는지조차 알기 어려웠다 (CK 신고, 390px·1440px 모두).
 *
 * 금액 색은 뷰가 인라인으로 넣으므로 여기서 건드리지 않는다
 * (playhistory.php · transactions.php 에서 함께 고쳤다).
 * =================================================================== */
.history-type,
.history-method,
.history-date,
.history-game-text,
.history-balance-label,
.history-balance-value,
.history-view-link { color: #22302c; }

/* 부가 정보는 한 단계 연하게 — 위계는 두되 읽히는 선에서 */
.history-method { color: #4c6862; }
.history-type   { color: #33504a; }

/* 잔액 칸 */
.history-bonus-placeholder { color: #22302c; }

/* 상세 돋보기 링크 */
.history-cell--method a { color: #246e5f; text-decoration: none; }
.history-cell--method a:hover { color: #0b7a5c; }

/* =====================================================================
 * 게임 레이어가 bootstrap 의 [hidden] 에 지지 않게      [2026-08-31]
 * ---------------------------------------------------------------------
 * bootstrap.min.css 에 [hidden]{display:none!important} 가 있다.
 * 오버레이는 첫 페인트 깜빡임을 막으려고 hidden 을 달고 나가는데,
 * 그 !important 가 .is-open 의 display:flex 를 이겨서 **게임을 눌러도
 * 아무것도 안 떴다** (헤드리스 실측: is-open 인데 computed display:none).
 *
 * 진짜 수리는 여는 JS 가 hidden 속성을 벗기는 것이고(header.php),
 * 이 규칙은 그 위의 안전망이다 — 어느 한쪽이 빠져도 창은 열린다.
 * =================================================================== */
.game-layer-overlay.is-open { display: flex !important; }

/* =====================================================================
 * 게임 목록 [Load more]                                 [2026-08-31]
 * =================================================================== */
.game-more {
  display: flex;
  justify-content: center;
  margin: 22px 0 6px;
}

.game-more-btn {
  min-width: 220px;
  padding: 13px 30px;
  border: 1px solid #1c6051;
  border-radius: 999px;
  background: transparent;
  color: #1c6051;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.game-more-btn:hover { background: #1c6051; color: #ffffff; }

.game-more-btn[disabled] { opacity: .55; cursor: default; }
.game-more-btn[disabled]:hover { background: transparent; color: #1c6051; }

@media (max-width: 767px) {
  .game-more-btn { width: 100%; min-width: 0; }
}

/* 슬롯 목록 맨 앞의 두 장 — PrediX · Sports.
   목록 카드(썸네일)와 달리 그림이 없으므로 스스로 배경을 갖는다. */
.game-card--product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 150px;
  border: 1px solid rgba(28, 96, 81, .28);
  border-radius: 12px;
  background: linear-gradient(150deg, #1c6051, #2f8f76);
  color: #ffffff;
  cursor: pointer;
}
.game-card--product img { width: 42px; height: 42px; object-fit: contain; }
.game-card--product .game-card__name { font-size: 15px; font-weight: 800; }
.game-card--product .game-card__sub  { font-size: 11px; font-weight: 600; color: #d5efe6; }
.game-card--product:hover { filter: brightness(1.06); }

/* =====================================================================
 * 모바일 메뉴 시트 — 넓은 창에서의 여백           [2026-09-01 CK 지시]
 * ---------------------------------------------------------------------
 * 증상(CK 스크린샷) : PC 브라우저 창을 좁혀 반응형으로 들어가면 메뉴가
 * 열리는데, 아이콘은 왼쪽에 몰려 있고 오른쪽이 텅 빈다.
 *
 * 실측(849px) : 시트 폭 834px, 그런데 "Games" 줄의 아이콘 7개는 x=478
 * 에서 끝난다 — 오른쪽 356px 이 그냥 빈다. main.css 가 시트를
 * left:0;right:0 으로 화면 폭에 맞추는데, 안의 .mobile-menu-box 는
 * 64px 고정이라 아무리 넓어져도 늘어나지 않기 때문이다.
 *
 * 늘리는 대신 **시트를 폰 폭으로 잡고 가운데 정렬**한다. 아이콘을
 * 849px 에 억지로 펼치면 서로 멀어져서 오히려 읽기 나쁘다.
 * (7개 × 64px + 6 × 3px 간격 + 좌우 여백 24px = 490px → 500px 이면
 *  한 줄이 정확히 들어간다)
 *
 * 폰(≤520px)에서는 아무것도 바뀌지 않는다 — max-width 가 화면보다 크다.
 * =================================================================== */
@media (min-width: 560px) and (max-width: 1024px) {

  .mobile-menu-overlay .mobile-menu-slider {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    /* 화면 폭을 다 쓰지 않으므로 위쪽 두 모서리만 둥근 모양이 어색하다 */
    border-radius: 28px 28px 0 0;
  }

  /* 세로도 같은 이유로 비어 있었다 — 내용 높이에 맞춘다.
     (min-height:85vh 는 폰에서 내용이 화면을 채울 때의 값이다) */
  .mobile-menu-overlay .mobile-menu-slider {
    min-height: 0;
    padding-bottom: 26px;
  }
}

/* =====================================================================
 * 라이브 카드 — 제공사 로고 제거 · 즐겨찾기 추가   [2026-09-01 CK 지시]
 * ---------------------------------------------------------------------
 * 카드가 <button> 에서 <div> 로 바뀌었다(버튼 안에 버튼을 넣을 수 없다).
 * 실행은 썸네일을 덮는 <a class="live-card__go"> 가 맡는다.
 * =================================================================== */
.live-page .live-card__go {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;          /* 인라인 이미지 밑 여백 제거 */
  text-decoration: none;
}

/* 하단 바 : 제목(좌) + 즐겨찾기(우). __bottom 은 이미 space-between 이다 */
.live-page .live-card .game-fav-btn {
  flex: 0 0 auto;
  margin-left: 8px;
  opacity: .85;
}
.live-page .live-card .game-fav-btn:hover { opacity: 1; }
.live-page .live-card .game-fav-btn img { width: 20px; height: 20px; }

/* 제목이 로고 자리까지 쓸 수 있게 (예전에는 38% 를 로고가 가져갔다) */
.live-page .live-card__title {
  font-size: 12px;
  line-height: 1.2;
}

/* =====================================================================
 * 슬롯 화면 — 서브 메뉴 칩 · 분류 선택        [2026-09-01 CK 지시]
 * ---------------------------------------------------------------------
 * "좀 더 이쁘게 보이도록" (CK 스크린샷).
 *
 * 손본 것은 세 가지다.
 *   (1) 칩 셋이 전부 같은 모양이라 **지금 무엇을 보고 있는지 표시가 없었다.**
 *       뷰가 is-current 를 달아 주고, 여기서 초록으로 채운다.
 *   (2) 칩이 배경 없는 글자라 버튼처럼 안 보였다 — 흰 면 + 얇은 테두리로.
 *   (3) 분류 select 이 OS 기본 화살표를 쓰는 흰 막대였다 — 화살표를
 *       직접 그리고 높이·글자·포커스 링을 칩과 맞춘다.
 *
 * ★ 펼쳐진 목록(option 들)의 모양은 OS 가 그린다. 여기서 색을 줘도
 *   Windows/Linux 크롬 정도만 반영하고 macOS 는 무시한다 — 닫힌 컨트롤을
 *   확실히 다듬는 쪽에 집중했다.
 * =================================================================== */

/* ---- 칩이 놓이는 레일 ---- */
.games-head--slot .games-nav {
  gap: 6px;
  padding: 5px;
  background: #e8efec;
  border: 1px solid rgba(20, 40, 35, .08);
}

/* ---- 칩 ---- */
.games-head--slot .games-nav__link {
  padding: 10px 18px;
  border: 1px solid rgba(20, 40, 35, .10);
  border-radius: 999px;
  background: #ffffff;
  color: #23443c;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 40, 34, .06);
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.games-head--slot .games-nav__link:hover {
  background: #dcece6;
  color: #12332c;
  border-color: rgba(28, 96, 81, .30);
  transform: translateY(-1px);
}

/* 지금 보고 있는 목록 */
.games-head--slot .games-nav__link.is-current {
  background: linear-gradient(135deg, #1c6051, #2f8f76);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(28, 96, 81, .28);
}
.games-head--slot .games-nav__link.is-current:hover {
  background: linear-gradient(135deg, #17564a, #2a806a);
  color: #ffffff;
}

.games-head--slot .games-nav__link:focus-visible {
  outline: 2px solid #1c6051;
  outline-offset: 2px;
}

/* ---- 분류 선택 ---- */
.games-head--slot .search-box select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 44px;
  padding: 0 44px 0 18px;
  font-size: 14px;
  font-weight: 700;
  color: #1f332d;
  background-color: #ffffff;
  /* 직접 그린 화살표 (appearance:none 이 기본 화살표를 지운다) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c6051' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px 15px;
  border: 1px solid rgba(20, 40, 35, .14);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(16, 40, 34, .10);
  cursor: pointer;
  text-overflow: ellipsis;
}

.games-head--slot .search-box select:hover {
  border-color: rgba(28, 96, 81, .38);
}

.games-head--slot .search-box select:focus-visible {
  border-color: #1c6051;
  box-shadow: 0 0 0 3px rgba(28, 96, 81, .18);
}

/* 펼친 목록 — 반영하는 브라우저에서만 적용된다 (위 주석 참고) */
.games-head--slot .search-box select option {
  background: #ffffff;
  color: #1f332d;
}

/* ---- 좁은 화면 ---- */
@media (max-width: 768px) {
  .games-head--slot .games-nav { gap: 4px; padding: 4px; }
  .games-head--slot .games-nav__link {
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .games-head--slot .search-box select {
    height: 42px;
    font-size: 13px;
    padding: 0 40px 0 14px;
  }
}

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

/* =====================================================================
 * 커스텀 셀렉트 (Brand & Category)             [2026-09-01 CK 지시]
 * ---------------------------------------------------------------------
 * <select> 의 펼쳐진 목록은 OS 가 그린다 — CSS 로는 macOS 에서 손을 댈 수
 * 없다. 그래서 목록을 우리가 그리는 컴포넌트로 대체했다.
 * 동작·마크업은 resources/js/p77/select.js 참고.
 *
 * ★ .p77-select__native 는 **JS 가 대체 UI 를 다 만든 뒤에만** 붙는다.
 *   스크립트가 안 실리면 네이티브 select 이 그대로 보이고 그대로 동작한다.
 * =================================================================== */

.p77-select { position: relative; width: 100%; }

.p77-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 닫힌 컨트롤 : 기존 select 과 같은 모양 ---- */
.p77-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 16px 0 18px;
  border: 1px solid rgba(20, 40, 35, .14);
  border-radius: 999px;
  background: #ffffff;
  color: #1f332d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16, 40, 34, .10);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.p77-select__btn:hover { border-color: rgba(28, 96, 81, .38); }

.p77-select__btn:focus-visible {
  outline: none;
  border-color: #1c6051;
  box-shadow: 0 0 0 3px rgba(28, 96, 81, .18);
}

.p77-select__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 화살표 — 열리면 뒤집는다 */
.p77-select__caret {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c6051' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
  transition: transform .18s ease;
}

.p77-select.is-open .p77-select__btn {
  border-color: #1c6051;
  box-shadow: 0 0 0 3px rgba(28, 96, 81, .16);
}
.p77-select.is-open .p77-select__caret { transform: rotate(180deg); }

/* ---- 펼친 목록 : 여기가 이 컴포넌트를 만든 이유다 ---- */
.p77-select__list {
  position: absolute;
  z-index: 60;          /* 카드 위, 게임 레이어(99999) 아래 */
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  /* ★ 목록을 잘라 먹지 않는다.                       [2026-09-02 CK 제보]
   *
   *   320px 이던 시절, 항목 10개(내용 높이 407px) 중 **마지막 셋
   *   (Fun Ta · Hacksaw Gaming · Playtech)이 접힌 자리 아래**로 내려갔다.
   *   스크롤은 됐지만 잘린 티가 안 나서 CK 가 "Playtech 가 없다" 고
   *   보고했다 — 실제로는 있었다. 안 보이는 것과 없는 것은 같은 일이다.
   *
   *   지금 항목 수가 다 들어가는 높이로 올리고, 창이 짧으면 70vh 로
   *   눕는다. 항목이 더 늘어 스크롤이 생기면 아래쪽 그림자가 저절로
   *   나타나 "더 있다"를 알린다 (background 의 스크롤 섀도).
   */
  max-height: 460px;
  max-height: min(70vh, 460px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  /* 스크롤 섀도 — 넘칠 때만 위/아래에 그림자가 생긴다.
     흰 덮개는 내용과 함께 흐르고(local) 그림자는 제자리에 있어(scroll),
     맨 위·맨 아래에 닿으면 그림자가 덮개에 가려 사라진다. JS 없이 된다. */
  background:
    linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) top    / 100% 22px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,
        rgba(12, 34, 28, .16), rgba(12, 34, 28, 0))      top    / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,
        rgba(12, 34, 28, .16), rgba(12, 34, 28, 0))      bottom / 100% 10px no-repeat scroll,
    #ffffff;
  border: 1px solid rgba(20, 40, 35, .12);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(12, 34, 28, .18);
}

/* 버튼 아래 자리가 모자라면 위로 편다 (select.js 의 place() 가 붙인다) */
.p77-select--up .p77-select__list {
  top: auto;
  bottom: calc(100% + 8px);
}

.p77-select__opt {
  /* 세로 여백 11 -> 9. 1440x900(가장 흔한 노트북)에서 버튼 아래 남는
     375px 에 항목 10개가 **다 들어가는** 높이다. 2px 를 아껴서 마지막
     항목(Playtech)이 접히지 않는다. 모바일은 아래에서 다시 넓힌다. */
  padding: 9px 14px;
  border-radius: 10px;
  color: #1f332d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 키보드 이동·마우스 오버가 같은 표시를 쓴다 */
.p77-select__opt.is-active { background: #eaf4f0; color: #12332c; }

.p77-select__opt[aria-selected="true"] {
  background: linear-gradient(135deg, #1c6051, #2f8f76);
  color: #ffffff;
}
.p77-select__opt[aria-selected="true"].is-active {
  background: linear-gradient(135deg, #17564a, #2a806a);
  color: #ffffff;
}

/* 안내 문구(placeholder) 줄 — 고를 수 있는 분류가 아니다.
   ★ 여기에 '선택됨' 초록을 칠하지 않는다. 아무것도 안 고른 상태가 마치
     한 분류를 고른 것처럼 보이면 지금 무엇을 보고 있는지 되레 헷갈린다. */
.p77-select__opt.is-disabled,
.p77-select__opt.is-disabled[aria-selected="true"],
.p77-select__opt.is-disabled.is-active {
  background: transparent;
  color: #5f7268;      /* 흰 바탕 대비 4.9 — 회색이되 읽힌다 */
  font-weight: 600;
  cursor: default;
}

/* 스크롤바도 사이트 톤으로 (WebKit) */
.p77-select__list::-webkit-scrollbar { width: 8px; }
.p77-select__list::-webkit-scrollbar-thumb {
  background: rgba(28, 96, 81, .28);
  border-radius: 999px;
}
.p77-select__list::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 768px) {
  .p77-select__btn { height: 42px; font-size: 13px; padding: 0 14px 0 16px; }
  .p77-select__opt { padding: 12px 14px; font-size: 13px; }
  /* 손가락으로 넘길 목록이라 조금 더 길게 */
  .p77-select__list { max-height: 60vh; }
}

/* =====================================================================
 *  입금 화면 — 결제수단 로고가 없을 때의 배지     [2026-09-02 CK 지시]
 * ---------------------------------------------------------------------
 *  로고 파일이 서버에 없으면 pay_icon_url() 이 빈 문자열을 주고 뷰가
 *  이 배지를 대신 그린다. 깨진 이미지 아이콘보다 낫고, "로고가 아직
 *  없다"는 것이 화면에서 바로 보인다.
 * =================================================================== */
.deposit-method__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1c6051, #2f8f76);
  color: #ffffff;                /* 그린 위 흰 글자 — 대비 5.6 */
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* =====================================================================
 *  지갑 퀵내비 — 활성 원이 아이콘을 삼키던 문제   [2026-09-02 CK 제보]
 * ---------------------------------------------------------------------
 *  CK: "history2.svg 는 색상이 완전히 보이지도 않고."
 *
 *  원인 : 아이콘 SVG 4개는 **fill 이 #ffffff 로 고정**돼 있는데,
 *         styles.css 가 활성·호버 원을 #f2f7f5(거의 흰색)으로 칠했다.
 *         흰 아이콘 on 흰 원 = 대비 1.05. 그림이 사라진다.
 *         (게다가 HISTORY 는 어느 화면에서나 활성이었다 — mypage_tab.php)
 *
 *  수리 : 활성·호버를 **딥그린으로 채운다.** 흰 아이콘이 그 위에서 살고
 *         "지금 여기" 도 확실히 보인다. 아이콘 파일은 건드리지 않는다
 *         (같은 파일을 다른 화면도 쓴다).
 * =================================================================== */
.deposit-quick-nav__item:hover .deposit-quick-nav__icon-wrap,
.deposit-quick-nav__item.is-active .deposit-quick-nav__icon-wrap {
  background: linear-gradient(135deg, #1c6051, #2f8f76);
}

/* 활성은 한 겹 더 — 호버와 구분되게 */
.deposit-quick-nav__item.is-active .deposit-quick-nav__icon-wrap {
  box-shadow: 0 0 0 3px rgba(28, 96, 81, .22);
}

.deposit-quick-nav__item.is-active .deposit-quick-nav__label { color: #12332c; }

/* =====================================================================
 *  모바일 하단 바가 마지막 줄을 덮던 문제          [2026-09-02 CK 제보]
 * ---------------------------------------------------------------------
 *  하단 바는 position:fixed · height:62px 인데 본문에는 그만큼의 여백이
 *  없었다. 그래서 출금 화면의 마지막 안내문("The amount is held …")이
 *  바에 가려 반만 보였다 (실측).
 *
 *  ★ 값을 62px 로 딱 맞추지 않는다. 아이폰 홈 인디케이터(safe-area)와
 *    바의 그림자까지 감안해 여유를 둔다.
 * =================================================================== */
@media (max-width: 768px) {
  /* ★ 뷰가 자기 <body> 를 또 내보내는 화면이 있어서(롱티엔 잔재) 자식
     셀렉터로는 안 걸린다. 래퍼에 직접 준다 — 어느 화면이든 하단 바
     높이만큼은 비게 된다. */
  /* ★ !important 를 쓴다. main.css 가 같은 미디어쿼리에서
     `padding: 10px 5px 24px 5px !important` 로 못을 박아 놔서,
     이것 없이는 아래 여백이 24px 로 남는다(실측). 즐겨 쓰는 수단은
     아니지만 상대가 !important 면 같은 무기여야 이긴다. */
  .main-container { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- 신청 화면의 통화 표기 (입금·출금 금액 칸 옆 "PHP") ----
   #09b285 on #efefef = 2.37 로 안 읽혔다. 이 트리가 밝은 배경에서
   쓰는 초록(#0b7a5c)으로 맞춘다.        [2026-09-02 대비 실측] */
.account-info-card__value--verified { color: #0b7a5c; }

/* =====================================================================
 *  랜딩 Popular Slot Games — 가로 스크롤 대신 줄바꿈  [2026-09-02 CK 지시]
 * ---------------------------------------------------------------------
 *  CK: "전체화면일 때 썸네일이 1줄만 보여지고 좌우로 움직이니까 사이트
 *       전체가 너무 휑~ 하니 비어 보인다."
 *
 *  .game-thumb-list 는 `display:flex; flex-wrap:nowrap; overflow-x:auto` 다.
 *  이 목록에만 modifier 를 붙여 줄바꿈으로 바꾼다 — 카드 폭·모양은
 *  main.css 값을 그대로 쓰므로 다른 목록(Popular Live Games)은 안 바뀐다.
 *
 *  ★ .game-thumb-card 의 margin-top:-25px 는 목록의 padding-top:25px 와
 *    짝이다(호버로 떠오르는 여백). 줄이 여러 개가 되면 그 음수 여백이
 *    윗줄을 파고들어 카드가 겹친다 — 그래서 여기서 둘 다 0 으로 돌린다.
 *
 *  ★ !important 를 쓴다. main.css 가 모바일에서 이 목록의 gap·padding·
 *    margin 을 !important 로 못 박아 놨다. 상대가 !important 면 같은
 *    무기여야 이긴다 (이 트리에서 두 번째로 만나는 자리다).
 * =================================================================== */
/*  ★ flex-wrap 만으로는 부족했다 — 실측하고 나서 알았다.
 *
 *    카드 폭이 고정(PC 225px / 폰 123px)이라, 줄바꿈만 켜면 한 줄에
 *    딱 떨어지지 않고 **오른쪽에 카드 한 장만 한 빈 자리**가 남는다.
 *      PC 1180px 폭 : 225+14 로 4장 = 956, 남는 자리 224px
 *      폰 380px 폭  : 123+8  로 2장 = 254, 남는 자리 126px
 *    가로 스크롤일 때는 잘려 나가 보이지 않던 자리다. 줄바꿈으로 바꾸는
 *    순간 그 여백이 그대로 드러나서, "휑하다"는 원래 불만이 모양만
 *    바꿔 남는다.
 *
 *    5px 만 좁히면 한 장이 더 들어가긴 한다. 그러나 스크롤바 폭이
 *    브라우저마다 달라 1~2px 로 승부가 갈리는 배치는 언젠가 무너진다.
 *    그래서 폭을 깎는 대신 **줄을 그리드로 나눈다** — 칸이 남는 폭을
 *    나눠 가지므로 빈 자리가 생기지 않는다.
 *
 *    카드는 그때 폭이 유동이 되어야 한다. 정사각 썸네일은
 *    main.css 의 `.game-thumb-img { aspect-ratio: 1/1 }` 이 지켜 주는데,
 *    모바일 규칙만 width/height 를 px 로 덮어쓰므로 거기만 되돌린다.
 */
.game-thumb-list--wrap {
  display: grid !important;
  /*
   * 190px 이 들어갈 자리마다 칸을 하나 만들고, 남는 폭은 칸들이 고르게
   * 나눠 가진다(1fr). 그래서 오른쪽에 빈 자리가 남지 않는다.
   *
   * ★ 위 한계를 250px 처럼 **고정값으로 막지 마라.** auto-fill 은 칸 수를
   *   셀 때 위 한계를 쓰기 때문에, 250 으로 막으면 칸이 오히려 줄어든다
   *   (실측: 1440 에서 5칸 -> 4칸). 반드시 1fr 이어야 한다.
   *
   * ★ 190 인 이유도 실측이다. 200 으로 두면 목록 폭이 840px 인 구간
   *   (창 1100px)에서 4칸에 2px 모자라 3칸으로 떨어지고 카드가 271px 로
   *   부푼다. 190 이면 그 구간이 4칸으로 붙는다.
   *   결과 : 1920=6칸 · 1440=5칸(225px, 원래 디자인 폭) · 1100=4칸
   */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  flex-wrap: wrap !important;      /* grid 를 못 쓰는 옛 브라우저용 보루 */
  overflow-x: visible !important;
  gap: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.game-thumb-list--wrap .game-thumb-card {
  /* 칸이 폭을 정한다 — 고정 폭 셋을 모두 푼다 */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  /* 폰은 3칸 고정. auto-fill 로 두면 폭에 따라 2칸/3칸이 오가서
     같은 기기에서도 화면마다 달라 보인다. */
  .game-thumb-list--wrap {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* main.css 모바일 규칙이 px 로 박아 둔 썸네일 크기를 되돌린다.
     height 를 auto 로 두면 위의 aspect-ratio 가 정사각을 지킨다. */
  .game-thumb-list--wrap .game-thumb-img {
    width: 100% !important;
    height: auto !important;
  }
}

/* =====================================================================
 *  게임 카드 — [PLAY REAL] / [PLAY DEMO] 오버레이
 *  [CK 지시 2026-09-06] · [복구 2026-09-07]
 * ---------------------------------------------------------------------
 *  ★★ 이 블록은 한 번 **사라진 적이 있다.** 같은 일이 다시 없도록 남긴다.
 *
 *    2026-09-07, 내가 오래된 사본을 바탕으로 이 파일을 통째로 덮어써서
 *    이 블록이 통째로 날아갔다. 그 결과 라이브에서 **모든 슬롯 게임이
 *    실행되지 않았다** — [▶ PLAY REAL] 이 잠깐 보였다 사라졌다.
 *
 *    왜 그렇게 보였나 : 실행은 오직 이 오버레이 안의 버튼이 한다.
 *    오버레이를 열어 두는 규칙(.game-card:hover / .is-open 의 opacity·
 *    pointer-events)이 이 블록에 있어서, 블록이 없으면 버튼이 기본값
 *    (opacity 0 · pointer-events:none)으로 돌아가 **눌리지 않는다.**
 *    카드 무대(.game-card__stage)는 열기만 하므로 아무 일도 안 일어난다.
 *
 *    ★ 규율 : 이 트리의 파일을 덮어쓰기 전에 **맥의 현재 파일과 먼저
 *      대조한다.** 다른 세션이 같은 트리를 고치고 있다.
 *
 *  ★ 마크업의 원본은 application/views/include/game_cards.php,
 *    터치/키보드 열기는 _layout/header.php 의 카드 오버레이 스크립트다.
 *    셋이 한 벌이다 — 하나만 옮기지 마라.
 *
 *  ★ 아래는 형제 사이트 www.longtian.bet 의 resources/css/styles.css
 *    (같은 기능, 같은 블록)에서 **그대로** 가져왔다. 지어내지 않았다.
 *    사라지기 전 이 파일의 마지막 블록이 longtian 의 그것과 꼬리까지
 *    같았던 것을 캐시에 남아 있던 옛 파일로 확인했다.
 * =================================================================== */
/* =========================================================================
   게임 카드 — [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; }
}

/* ===== MOXIPAY 입금 완료 레이어팝업 (views/include/moxipay_watch.php)  [2026-09-07] =====
   bootstrap [hidden]{display:none!important} 가 .is-open 을 이기므로 여는 JS 가
   removeAttribute('hidden') 까지 한다. 여기서는 열린 상태에 !important 안전망만 둔다.
   결제 레이어(.mx-pay, z 9000대)보다 위에 떠야 하므로 z-index 를 더 높게. */
.p77-mxdone{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  background:rgba(22,38,44,.62); padding:20px; }
.p77-mxdone.is-open{ display:flex !important; }
.p77-mxdone__card{ width:100%; max-width:380px; background:#fff; border-radius:16px; padding:30px 24px 24px;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35); animation:p77MxDoneIn .22s ease-out; }
.p77-mxdone__icon{ width:64px; height:64px; margin:0 auto 14px; color:#16b98c; }
.p77-mxdone__icon svg{ width:100%; height:100%; }
.p77-mxdone__title{ margin:0 0 8px; font:700 20px/1.3 Ubuntu,Poppins,Arial,sans-serif; color:#16262c; }
.p77-mxdone__body{ margin:0 0 20px; font:500 15px/1.5 Ubuntu,Poppins,Arial,sans-serif; color:#3c4a50; }
.p77-mxdone__ok{ display:inline-block; min-width:140px; height:46px; padding:0 22px; border:0; border-radius:10px;
  background:#16b98c; color:#fff; font:600 15px/46px Ubuntu,Poppins,Arial,sans-serif; cursor:pointer; }
.p77-mxdone__ok:hover{ filter:brightness(.95); }
@keyframes p77MxDoneIn{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }
/* 결제 진행 중 인라인 상태줄 (depositMoxipay 버튼 아래) */
.p77-mxwatch-msg{ display:none; margin:10px 0 0; font:500 13px/1.5 Ubuntu,Poppins,Arial,sans-serif; color:#5b6b72; }


/* =========================================================================
   슬롯 카드 — 썸네일 아래 빈 띠 제거                     [CK 지시 2026-09-07]
   -------------------------------------------------------------------------
   CK 제보 : "home/slot 을 모바일에서 보면 썸네일이 짤려서 나온다."

   ★ 원인 (430px / iPhone 14 Pro Max 헤드리스 실측)
       .game-card   min-height: 132px   (styles.css)
       .game-thumb  aspect-ratio: 1/1   -> 3열이면 115.3 x 115.3px
     카드가 썸네일보다 16.7px 더 길어서, 그 만큼이 카드 배경색 띠로 남았다.
     썸네일이 잘려 보이는 것도 이 띠 때문이다 — 카드 안에서 그림이 위로
     붙고 아래가 비니까 아래가 잘린 것처럼 읽힌다.

   ★ min-height 는 원래 "그림이 없어도 카드가 찌부러지지 않게" 두는 값인데,
     .game-thumb 에 aspect-ratio 가 있어서 그림이 안 떠도 높이는 잡힌다.
     즉 지금은 **쓸모 없이 해만 끼치는 값**이다. 그래서 0 으로 만든다.
     넓은 화면에서는 열 너비가 132px 를 훨씬 넘으므로 원래 작동한 적이 없다
     — 데스크톱 모양은 바뀌지 않는다 (실측으로 확인).

   ★ styles.css 는 건드리지 않는다. 이 트리의 모든 보정은 이 파일 한 곳이다.

   되돌리려면 이 블록을 지우면 된다.
   ========================================================================= */
.game-card{
  min-height: 0;
}

/* =========================================================================
   MOXIPAY 1회 한도 안내                              [2026-09-17 CK 지시]
   -------------------------------------------------------------------------
   CK: "1회 최대 입금한도가 50,000 PHP야. ... 입금신청페이지에서 이를
        안내해주고, 금액입력도 50,000 PHP만 가능하게 해줘."

   입력칸 밑의 작은 힌트(Min · Max)는 회색 한 줄이라 잘 안 읽힌다.
   한도는 **넘기고 나서** 알면 늦는 정보라 한 칸 띄워 눈에 걸리게 한다.

   ★ .wd-card__note 는 이 트리에 스타일이 아예 없다(브라우저 기본 <p>).
     그래서 여기서 .mx-limit 만 손댄다 — 다른 안내문의 모양은 그대로다.

   ★ 규칙 1-1 : 보정은 이 파일 한 곳. styles.css / main.css 는 안 건드린다.
   ========================================================================= */
/* ★ 두 클래스로 잡는다. .wd-card__note 의 색이 뷰 안의 <style>(form_cards)에
     있어서, 이 파일이 먼저 실려도 **명시도**로 이겨야 한다. */
.wd-card__note.mx-limit,
.mx-limit{
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid #e8c877;          /* 실패 안내·차단 화면과 같은 골드 */
  border-radius: 4px;
  background: rgba(232, 200, 119, .14);
  /* ★ 이 카드는 **밝은 바탕**이다 (입출금 폼은 흰 카드).
       처음에 사이트 어두운 화면 기준의 밝은 글자색을 썼다가 흰 바탕에서
       거의 안 보였다 — 실측으로 잡았다. 폼 본문과 같은 잉크색을 쓴다. */
  color: #23342C;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 600px){
  .mx-limit{ font-size: 12.5px; padding: 8px 10px; }
}

/* =============================================================================
 | 랜딩 히어로 슬라이더                                   [CK 보고 2026-09-17]
 | -----------------------------------------------------------------------------
 | application/views/include/hero_slider.php 의 마크업에 대한 스킨.
 | 이 절이 없으면 라이브에서 히어로가 **그냥 깨진다** — 실제로 그랬다:
 |   · .p77-hero__copy 가 position:static 이라 사진 아래로 흘러내리고
 |   · .main-slider 의 overflow:hidden + height:170px!important 에 잘려
 |   · CTA 는 배경도 여백도 없는 맨 링크 글자로 보였다.
 |
 | ★ 함정 1 — .banner-wrapper 는 main.css 에서 `margin: 0 auto 24px auto` 다.
 |   부모(.main-container)가 flex column 이라 **가로 auto 마진이 stretch 를
 |   막는다**. 폭이 내용 기준으로 줄어 최악의 경우 0 이 된다.
 |   → width:100% + align-self:stretch 로 못박는다. (tests/hero_slider_test.php)
 |
 | ★ 함정 2 — ≤1024px 에서 main.css 가
 |     .main-slider            { height:170px !important; min-height:170px !important }
 |     .main-slider .slide,
 |     .main-slider .slide img { height:170px !important; ... }
 |   를 건다. 명시도를 올리고 !important 로 되받지 않으면 모바일에서만
 |   조용히 170px 로 눌린다. → .p77-hero 를 앞에 붙여 이긴다.
 |
 | ★ 함정 3 — 사진 위의 글자다. 스크림(그라디언트) 없이는 밝은 사진에서
 |   제목이 읽히지 않는다. PC 는 좌→우, 모바일은 아래→위 스크림을 쓰고,
 |   모바일 1번 슬라이드는 배경이 특히 밝아 한 단계 더 진하게 덮는다.
 |
 | ★ 함정 4 — aspect-ratio 는 iOS 15 미만에서 없다. 그 브라우저에서는
 |   슬라이드 높이가 0 이 되어 히어로가 사라진다 → padding-top 폴백.
 |
 | 색: 사이트 잉크 #14271D / 크림 #F4EFE2 / 브랜드 그린 계열.
 * ========================================================================== */

.p77-hero{
  width: 100%;
  align-self: stretch;
  max-width: 100%;
  margin: 0 0 24px;
}

.p77-hero .main-slider{
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0d1a14;
}

.p77-hero .slides{
  position: relative;
  width: 100%;
}

/* ★ 비율은 여기 한 곳에서만 정한다 (PC 는 넓게 잘라 쓴다)
     [2026-09-26 CK 지시] "hero 영역 높이가 너무 커. 20% 줄여줘."
       1000/360 → 1000/288 (같은 폭에서 높이 × 0.8). 사진은 object-fit:cover
       라 위아래가 조금 더 잘릴 뿐 찌그러지지 않는다. */
.p77-hero .slide{
  aspect-ratio: 1000 / 288;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #0d1a14;
}

/* 사진 — 링크가 슬라이드 전체를 덮고, 그 위에 글자가 온다 */
.p77-hero .slide .p77-hero__hit{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: inherit;
}
.p77-hero .slide picture{
  display: block;
  width: 100%;
  height: 100%;
}
.p77-hero .slide img.p77-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* 스크림 — PC 는 좌측이 어둡다 (글자가 왼쪽에 있다) */
.p77-hero .slide::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg,
              rgba(8,20,14,.88) 0%,
              rgba(8,20,14,.74) 32%,
              rgba(8,20,14,.24) 60%,
              rgba(8,20,14,0)   82%);
}

.p77-hero .p77-hero__copy{
  position: absolute;
  z-index: 3;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(58%, 640px);
  padding: 0 clamp(20px, 3.4vw, 52px);
  text-align: left;
  color: #F4EFE2;
  pointer-events: none;
}
.p77-hero .p77-hero__copy > *{ pointer-events: auto; }

.p77-hero .p77-hero__eyebrow{
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A9E9C8;
  background: rgba(20,39,29,.55);
  border: 1px solid rgba(169,233,200,.42);
  border-radius: 2px;
}

.p77-hero .p77-hero__title{
  margin: 0 0 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #F4EFE2;
  text-shadow: 0 2px 14px rgba(0,0,0,.58);
}

.p77-hero .p77-hero__sub{
  margin: 0 0 18px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(244,239,226,.92);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

.p77-hero .p77-hero__actions{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.p77-hero .p77-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 26px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  color: #14271D;
  background: #F4EFE2;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: background .16s ease, transform .16s ease;
}
.p77-hero .p77-hero__cta:hover,
.p77-hero .p77-hero__cta:focus{
  color: #14271D;
  background: #ffffff;
  transform: translateY(-1px);
  text-decoration: none;
}

.p77-hero .p77-hero__note{
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #A9E9C8;
}

/* 점 — main.css 의 검정 점은 어두운 스크림 위에서 보이지 않는다 */
.p77-hero .slider-dots .dot{
  background: #F4EFE2;
  opacity: .45;
}
.p77-hero .slider-dots .dot.active{
  background: #08df8d;
  opacity: 1;
}

/* ★★ ≤1024 — main.css 의 170px !important 를 되받는다.
     이 블록의 첫 규칙 순서/선택자는 tests/hero_slider_test.php 가 본다. */
@media (max-width: 1024px){
  .p77-hero .main-slider,
  .p77-hero .main-slider .slide{
    height: auto !important;
    min-height: 160px !important;   /* [2026-09-26] 200 → 160 (20% ↓) */
    max-height: none !important;
  }

  .p77-hero .main-slider .slide{
    aspect-ratio: 55 / 16;          /* [2026-09-26] 11/4 의 높이 × 0.8 */
    border-radius: 10px;
  }
  .p77-hero .main-slider .slide img.p77-hero__img{
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .p77-hero{ margin-bottom: 14px; }
  .p77-hero .main-slider{ border-radius: 10px; }

  /* 모바일은 글자가 아래에 깔린다 → 스크림도 아래→위 */
  .p77-hero .slide::after{
    background: linear-gradient(180deg,
                rgba(8,20,14,0)   20%,
                rgba(8,20,14,.55) 54%,
                rgba(8,20,14,.90) 100%);
  }

  /* 1번 슬라이드 배경이 가장 밝다 — 한 단계 더 덮어야 제목이 읽힌다 */
  .p77-hero .p77-hero__slide--1::after{
    background: linear-gradient(180deg,
                rgba(8,20,14,.10) 0%,
                rgba(8,20,14,.62) 46%,
                rgba(8,20,14,.94) 100%);
  }

  .p77-hero .p77-hero__copy{
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    padding: 0 16px 14px;
  }
  .p77-hero .p77-hero__eyebrow{
    margin-bottom: 6px;
    padding: 4px 8px;
    font-size: 10.5px;
  }
  .p77-hero .p77-hero__title{
    margin-bottom: 6px;
    font-size: clamp(17px, 4.6vw, 26px);
  }
  .p77-hero .p77-hero__sub{
    margin-bottom: 10px;
    font-size: clamp(11.5px, 3vw, 14px);
  }
  .p77-hero .p77-hero__actions{ gap: 10px; }
  .p77-hero .p77-hero__cta{
    min-height: 38px;
    padding: 9px 16px;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  .p77-hero .p77-hero__note{ font-size: 11.5px; }
}

@media (max-width: 480px){
  .p77-hero .p77-hero__sub{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ★ aspect-ratio 가 없는 브라우저(iOS 15 미만)에서는 슬라이드 높이가 0 이
     되어 히어로가 통째로 사라진다. padding-top 으로 같은 비율을 만든다.
     (.slide 안의 자식은 전부 absolute 라 내용 높이는 0 이다) */
@supports not (aspect-ratio: 1 / 1){
  .p77-hero .slide{
    padding-top: 28.8%;             /* [2026-09-26] 36% × 0.8 — 위 aspect-ratio 와 같이 움직인다 */
  }
  @media (max-width: 1024px){
    .p77-hero .main-slider .slide{
      padding-top: 29.09%;          /* 36.36% × 0.8 */
      min-height: 160px !important;
    }
  }
}

/* =============================================================================
 | myBalance — 현금 [내역 보기] · 리워드 안내 두 장    [2026-09-17 CK 지시]
 | -----------------------------------------------------------------------------
 | ★ 이 화면은 **밝은 배경**이다 (styles.css:5083 — .account-section__body 가
 |   #d9d9d9, 카드가 #efefef, 글자가 #3c3c3c). 사이트의 어두운 화면 기준 색을
 |   여기에 쓰면 대비가 1.1~1.5 로 떨어져 사실상 안 보인다 — MOXIPAY 한도
 |   안내에서 이미 한 번 겪었다. 여기 색은 전부 흰 카드 기준으로 골랐다.
 * ========================================================================== */

/* 현금 금액 오른쪽 버튼. COMP 카드의 아이콘 버튼과 같은 자리를 쓴다. */
.p77-ledger-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid #205343;
  border-radius: 999px;
  background: #ffffff;
  color: #205343;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.p77-ledger-btn:hover,
.p77-ledger-btn:focus{
  background: #205343;
  color: #ffffff;
  text-decoration: none;
}

.p77-rw2__lead{
  margin: 2px 0 12px;
  color: #23342C;
  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;
}

/* ② 는 "추가로 주는 것" 이다 — 눈으로 구분되게 */
.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: #205343;
  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: #23342C;
}

.p77-rw2__tag{
  padding: 3px 7px;
  border: 1px solid #8c8c8c;
  border-radius: 4px;
  background: #ffffff;
  color: #4a5b55;
  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: #14271D; 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; }
  .p77-ledger-btn{ padding: 4px 9px; font-size: 11.5px; }
}

/* =========================================================
   가입 / 비밀번호찾기 — Country 와 Mobile Number 겹침   [2026-09-17 CK 제보]
   ---------------------------------------------------------
   원인 : 국가 select 에 **인라인** style="min-width:105px" 이 박혀 있었다.
          .auth-grid--mobile 의 트랙은 100px(≤767px 에서는 92px) 인데
          인라인 선언은 그리드 트랙을 이기므로 select 가 제 칸을 넘었다.

     실측 (수정 전)
       1440 / 768  : select 105px → 8px 간격 중 5px 을 먹고 3px 만 남음 (붙어 보임)
       ≤767        : 트랙 92px → **5px 실제 겹침**

   ★ 인라인 선언은 !important 말고는 CSS 로 못 이긴다. 그래서 여기서 덮지 않고
     header.php 의 인라인 속성 자체를 **지웠다**. 되살리지 마라 —
     voice_otp_test 가 아니라 아래 [I] 검사(dock_footer_login_test)가 잡는다.

   ★ styles.css 는 건드리지 않는다 (CK 규칙). 트랙만 여기서 넓힌다 —
     인라인이 주던 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;
  }
}


/* =========================================================================
   게임 이름 검색 모달                                   [2026-09-18 CK 지시]
   -------------------------------------------------------------------------
   CK: "상단에 검색기능이 있어서, 여기에 키워드를 입력하면 실시간으로
        gamelist.gtitle 또는 jp, th 에서 like 검색을 해서 해당 게임의
        썸네일과 함께 플레이 버튼을 보여주고 싶어."
        "모바일에는 아예 검색을 할수 있는 섹션이 없는데, 추가해줘."

   ★ 껍데기(.search-modal / -content / -header / -body / .search-input-line /
     .search-results / .no-results)는 **킷의 main.css 에 이미 있다.**
     여기서 다시 만들지 않는다 — 두 벌이 되면 한쪽만 고쳐진다.

   ★ 여기서 더하는 것은 딱 둘이다.
       1) 결과 그리드 안의 **게임 카드** — 목록과 같은 .game-card 를 쓰는데,
          킷의 .search-results-grid 는 .game-thumb-card(템플릿 카드) 기준이라
          우리 카드에는 칸이 크다.
       2) 모바일 하단바의 돋보기 버튼 폭.

   ★ 규칙 1-1 : 보정은 이 파일 한 곳. styles.css / main.css 는 안 건드린다.
   ========================================================================= */

/* ---- 결과 그리드 -------------------------------------------------------
   킷 기본은 minmax(180px,1fr)/gap 15px 이다. 우리 카드는 1:1 썸네일이라
   180px 이면 한 줄에 3장뿐이고 모달이 금방 스크롤된다. 150px 로 좁힌다. */
.search-modal .p77-search-grid{
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* 목록에서는 카드가 어두운 화면 위에 있어 그림자가 은은하다. 모달 바탕은
   흰색(.search-modal-content)이라 같은 그림자가 검게 뜬다 — 한 단계 줄인다. */
.search-modal .p77-search-grid .game-card{
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}
.search-modal .p77-search-grid .game-card:hover{
  box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
}

/* 결과가 많아도 모달이 화면을 넘지 않게. 킷의 400px 고정 대신 화면에 맞춘다
   (모바일에서는 400px 가 화면보다 길어 모달이 잘렸다). */
.search-modal .search-results{
  max-height: min(58vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 안내 문구 — 흰 바탕 위라 색을 직접 정한다
   ("배경을 직접 까는 요소는 글자색도 직접 정한다")
   #4a5a55 on #ffffff = 대비 7.4 */
.search-modal .no-results p{
  margin: 0;
  color: #4a5a55;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 480px){
  .search-modal .p77-search-grid{
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
}

/* ---- 모바일 하단바 돋보기 ----------------------------------------------
   ★ .mobile-nav-btn 은 flex:1 1 0 이라 버튼 수만큼 폭을 똑같이 나눈다.
     그대로 두면 [메뉴][검색][계정+잔액][리워드] 넷이 1/4씩 가져가서
     잔액 숫자가 줄바꿈된다(390px 실측). 검색은 아이콘 하나이므로
     **고정 폭**으로 빼 두고, 나머지 폭은 예전처럼 나눠 갖게 한다. */
.mobile-bottom-nav .mobile-search-btn{
  flex: 0 0 44px;
  min-width: 44px;      /* 손가락으로 누를 최소 크기 */
  padding: 0;
}

/* ---- 모달이 폰에서 화면 밖으로 나가던 것 ------------------------------
   킷(main.css ≤768px)이 .search-modal-content 에
       width: 100%;  margin: 0 3vw;
   을 준다. width 100% 는 부모(=화면) 폭이고 margin 은 **그 바깥**에 붙으므로
   합이 100% + 6vw 가 되어 오른쪽이 잘린다 (390px 실측: 내용이 화면을 넘음).
   ★ main.css 는 킷 원본이라 건드리지 않는다(규칙 1-1). 여기서 폭만 다시 잡는다. */
@media (max-width: 768px){
  .search-modal .search-modal-content{
    /* ★ min-width:0 이 없으면 안 줄어든다.
         이 상자는 flex 아이템이고 flex 아이템의 기본 min-width 는 auto(=내용
         최소폭)라 max-width 보다 **세다**. 실측에서 width 가 390px 그대로
         남아 margin 3vw 와 합쳐 화면을 넘었다. 가입폼 Country/Mobile 겹침
         (2026-09-17)과 같은 함정이다. */
    min-width: 0;
    width: calc(100% - 6vw);
    max-width: calc(100% - 6vw);
    margin: 0 3vw;
  }
}


/* =============================================================================
 | 밝은 패널의 글자색 팔레트                          [2026-09-23 RG 이식]
 | -----------------------------------------------------------------------------
 | styles.css:5083 의 .account-section__body 는 배경만 밝게(#d9d9d9) 깔고
 | **글자색을 정하지 않는다.** 그런데 이 사이트의 기본 글자색은 어두운 테마용
 | (거의 흰색)이다. 그래서 그 패널 안에 넣는 요소가 색을 직접 정하지 않으면
 | 흰 글자가 밝은 회색 위에 얹혀 안 읽힌다 (대비 1.2:1).
 |
 | 이 트리에서 이미 두 번 겪었다 :
 |   2026-09-10  MOXIPAY 한도 안내 문구
 |   2026-09-19  크립토 입금 팝업 (흰 배경 + 어두운 테마 색)
 |
 | ★ 규칙 : **배경을 직접 까는 요소는 글자색도 직접 정한다.**
 |
 | 값은 longtian.bet styles.css 의 것과 같다 — 거기서 WCAG AA(본문 4.5:1)를
 | 넘는 것만 골라 계산해 둔 값이고, 패널(#d9d9d9)이 카드(#efefef)보다 어두워서
 | 패널 기준으로 고르면 카드에서도 안전하다. tests/rg_test.php [J] 가 감시한다.
 |
 | ★ styles.css 를 고치지 않는다 (이 트리의 규칙). 보정은 여기 한 곳.
 * ========================================================================== */
.account-section__body{
  --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);
}

/* RG 화면 본문의 라이브챗 링크. longtian 뷰가 이 클래스를 쓴다 —
   정의가 없으면 본문색 그대로라 링크인지 알 수 없다. */
.lt-chat-link{
  color: #0a6a4f;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* =============================================================================
 | 랜딩 카드 — 썸네일 좌측 상단 제공사 이름            [2026-09-26 CK 지시]
 | -----------------------------------------------------------------------------
 |   CK: "첫 홈 페이지에서 라이브딜러, 슬롯 모두 썸네일 좌측 상단에
 |        게임제공사 이름이 전체가 다 나오게 수정해줘."
 |
 | ★ 이름 **전체**가 보여야 한다 → 말줄임(ellipsis)을 쓰지 않는다.
 |   카드가 좁은 모바일에서 "Hacksaw Gaming" 이 넘치면 줄바꿈해서라도 다
 |   보이게 하고, 카드 밖으로 나가지 않게 max-width 만 건다.
 | ★ EXCLUSIVE 같은 기존 배지는 우측 상단(.p77-badge--right)으로 옮겼다.
 * ========================================================================== */
.game-thumb-img .game-badge.p77-prov-badge{
  left: 10px;
  top: 10px;
  max-width: calc(100% - 20px);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: none;
}
.game-thumb-img .game-badge.p77-badge--right{
  left: auto;
  right: 10px;
  top: 10px;
}

/* 좁은 카드(모바일 3열 ≈ 120px) : 배지 두 개가 한 줄에 못 앉는다.
   EXCLUSIVE 를 제공사 배지 **아래**로 내리고, 제공사 배지는 여백을 줄여
   "Hacksaw Gaming" 같은 긴 이름도 가능한 한 한 줄에 들어가게 한다. */
@media (max-width: 768px){
  .game-thumb-img .game-badge.p77-prov-badge{
    left: 6px;
    top: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 7px;
  }
  .game-thumb-img .game-badge.p77-badge--right{
    left: 6px;
    right: auto;
    top: 34px;
    padding: 3px 7px;
  }
}