/* =====================================================================
   ZABET1 스킨 — F · Rainbow Bento                          [2026-10-06]
   ---------------------------------------------------------------------
   원본 resources/css/styles.css (LONGTIAN) 를 고치지 않고 **맨 뒤에서 덮는다.**
   다음에 원본을 갱신해도 이 파일만 다시 맞추면 된다 (ci3-front-skin §5-7).

   색은 남아공 국기 6색 + 다크 바탕. 대비는 WCAG AA 로 실측했다
   (흰 글씨는 레드 #DE3831 위에 4.0:1 이라 작은 글씨에는 #A3231C 를 쓴다).

   목차
     0. 폰트 · 토큰
     1. 바탕 · 공통 요소
     2. 상단 바 (.top-header.zb-top)
     3. 왼쪽 레일 (.nav-wrap.zb-rail)
     4. 모바일 하단 탭바 (.lt-mbar.zb-tabbar) · 서랍
     5. 푸터
     6. 메인 (.zb-home)
     7. 하위 화면 공통 (카드 · 폼 · 표 · 탭)
     8. 반응형
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. 폰트 · 토큰
   --------------------------------------------------------------------- */
@font-face{ font-family:"Unbounded"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/resources/zabet/fonts/unbounded-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Unbounded"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/resources/zabet/fonts/unbounded-latin-800-normal.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/resources/zabet/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/resources/zabet/fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/resources/zabet/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/resources/zabet/fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/resources/zabet/fonts/figtree-latin-800-normal.woff2") format("woff2"); }

:root{
  /* 국기 6색 */
  --zb-green:  #007A4D;
  --zb-green-d:#006241;
  --zb-gold:   #FFB612;
  --zb-gold-d: #E09E00;
  --zb-red:    #DE3831;
  --zb-red-d:  #A3231C;
  --zb-blue:   #002395;
  --zb-blue-l: #3D63E0;   /* 다크 바탕 위 작은 표식용 (원색 블루는 검정 위 대비가 1.9:1) */
  --zb-white:  #FFFFFF;
  --zb-black:  #000000;

  /* 다크 바탕 */
  --zb-bg:     #0D0D0D;
  --zb-bg-2:   #111111;
  --zb-panel:  #151515;
  --zb-panel-2:#1C1C1C;
  --zb-line:   #262626;
  --zb-line-2: #333333;
  --zb-ink:    #FFFFFF;
  --zb-ink-2:  #D9D9D9;
  --zb-mute:   #A8A8A8;   /* #0D0D0D 위 8.6:1 · #151515 위 7.9:1 */

  --zb-rail-w: 96px;
  --zb-top-h:  64px;
  --zb-r-lg:   20px;
  --zb-r-md:   14px;
  --zb-r-sm:   10px;

  --zb-font:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zb-display: "Unbounded", "Figtree", system-ui, sans-serif;

  /* 원본 토큰을 ZABET1 값으로 */
  --bg: var(--zb-bg);
  --bg-2: var(--zb-bg-2);
  --panel: var(--zb-panel);
  --panel-2: var(--zb-panel-2);
  --panel-3: #101010;
  --green: var(--zb-green);
  --green-2: var(--zb-green-d);
  --green-3: #004F33;
  --gold: var(--zb-gold);
  --gold-2: var(--zb-gold-d);
  --text: var(--zb-ink);
  --muted: var(--zb-mute);
  --ring: 0 0 0 3px rgba(255,182,18,.45);
}

/* ---------------------------------------------------------------------
   1. 바탕 · 공통 요소
   --------------------------------------------------------------------- */
html{ background: var(--zb-bg); }
body{
  background: var(--zb-bg) !important;
  color: var(--zb-ink);
  font-family: var(--zb-font);
  -webkit-font-smoothing: antialiased;
}
body, .page{ font-family: var(--zb-font); }
h1, h2, h3, .zb-h2{ font-family: var(--zb-display); letter-spacing: -.02em; }
:focus-visible{ outline: 2px solid var(--zb-gold); outline-offset: 2px; }

.zb-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  font-family: var(--zb-font); font-weight: 800; font-size: 15px; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}
.zb-btn:hover{ filter: brightness(1.08); }
.zb-btn:active{ transform: translateY(1px); }
.zb-btn--sm{ min-height: 40px; padding: 0 16px; font-size: 14px; }
.zb-btn--green{ background: var(--zb-green); color: #fff !important; }
.zb-btn--gold{ background: var(--zb-gold); color: #0D0D0D !important; }
.zb-btn--ink{ background: #0D0D0D; color: #fff !important; }
.zb-btn--ghost{ background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }

.zb-kicker{ display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--zb-gold); }
.zb-kicker--gold{ color: var(--zb-gold); }
.zb-kicker--cream{ color: #FFE3A3; }
.zb-kicker--ink{ color: #0D0D0D; }

.zb-dot{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.zb-dot--soccer{ background: var(--zb-green); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.zb-dot--rugby{ background: var(--zb-gold); }
.zb-dot--cricket{ background: var(--zb-blue-l); }
.zb-dot--other{ background: var(--zb-red); }
.zb-dot--white{ background: #fff; }

.zb-h2{ margin: 0; font-weight: 800; font-size: 24px; line-height: 1.15; color: #fff; }
.zb-sec-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.zb-more{ font-size: 14px; font-weight: 700; color: var(--zb-ink-2) !important; text-decoration: none; }
.zb-more:hover{ color: var(--zb-gold) !important; }

/* 국기 띠 — 푸터·서랍 머리 */
.zb-flagbar{ display: flex; height: 4px; }
.zb-flagbar span{ flex: 1; }

/* ---------------------------------------------------------------------
   2. 상단 바
   --------------------------------------------------------------------- */
.top-header.zb-top{
  position: sticky; top: 0; z-index: 60;
  background: rgba(13,13,13,.94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--zb-line);
}
.zb-top .utility-bar{ background: transparent; border: 0; }
.zb-top .utility-inner{
  width: min(1340px, calc(100% - 56px)); min-height: var(--zb-top-h);
  padding: 9px 0; flex-wrap: nowrap; gap: 16px;
}
.zb-top .utility-left{ min-width: 0; flex: 1 1 auto; gap: 14px; }
.zb-top .utility-right{ gap: 10px; flex-wrap: nowrap; font-size: 14px; letter-spacing: 0; }
.zb-top .utility-guest{ gap: 10px; flex-wrap: nowrap; }

.zb-logo{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff !important; flex: 0 0 auto; }
.zb-logo__mark{ display: block; width: 30px; height: 30px; }
.zb-logo__word{ font-family: var(--zb-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1; color: #fff; }
.zb-logo__word b{ color: var(--zb-gold); font-weight: 800; }
.zb-logo--top{ display: none; }            /* 데스크톱은 레일에 로고가 있다 */

.zb-search.lt-search-btn{
  display: inline-flex; align-items: center; gap: 10px;
  width: min(440px, 100%); height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--zb-line-2); background: #1A1A1A;
  color: var(--zb-mute); font-size: 15px; font-weight: 500; cursor: pointer; text-align: left;
}
.zb-search.lt-search-btn:hover{ border-color: #4A4A4A; color: #fff; }
.zb-search svg{ flex: 0 0 auto; }
.zb-search__ph{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zb-top .drawer-auth-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  background: transparent; color: #fff; border: 1px solid #4A4A4A; box-shadow: none;
}
.zb-top .drawer-auth-btn:hover{ border-color: #fff; }
.zb-top .drawer-auth-btn--signup{ background: var(--zb-gold); color: #0D0D0D; border-color: var(--zb-gold); font-weight: 800; }
.zb-top .drawer-auth-btn--signup:hover{ filter: brightness(1.06); }

.zb-top .user-pill, .zb-top .balance-pill{
  height: 44px; padding: 0 16px; border-radius: 999px;
  background: #1A1A1A; border: 1px solid var(--zb-line-2); color: #fff; font-size: 14px; gap: 8px;
}
.zb-top .user-pill .utility-ico{ width: 18px; height: 18px; }
.zb-top .user-name{ max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.zb-top .balance-pill{ background: #1A1A1A; }
.zb-top .balance-label{ color: var(--zb-mute); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.zb-top .balance-value{ color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.zb-top .balance-value::before{ content: "R "; color: var(--zb-gold); }
.zb-top__deposit{ height: 44px; }

.zb-top .dci-badge{ height: 44px; border-radius: 999px; }
.zb-one-lang .lang-dropdown{ display: none !important; }

.zb-idle-notice{ background: #2a2011; color: var(--zb-gold); border-bottom: 1px solid #4a3a18; padding: 12px 16px; text-align: center; font-size: 14px; }

/* 계정 드롭다운 — 다크 */
.user-menu{ background: #151515 !important; border: 1px solid var(--zb-line-2) !important; box-shadow: 0 18px 40px rgba(0,0,0,.55) !important; }
.user-menu, .user-menu *{ color: #fff; }
.user-menu__item:hover, .user-menu__bal--comp:hover{ background: rgba(255,255,255,.06) !important; }
.user-menu__bal-v{ color: var(--zb-gold) !important; }

/* ---------------------------------------------------------------------
   3. 왼쪽 레일
   --------------------------------------------------------------------- */
@media (min-width: 768px){
  body{ padding-left: var(--zb-rail-w); }
  .nav-wrap.zb-rail{
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
    width: var(--zb-rail-w);
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 16px 8px 18px; overflow-y: auto; overscroll-behavior: contain;
    background: #000; border-right: 1px solid #1F1F1F; border-bottom: 0;
  }
}
.zb-rail .zb-logo--rail{ flex-direction: column; gap: 6px; margin: 2px 0 14px; text-align: center; }
.zb-rail .zb-logo--rail .zb-logo__mark{ width: 40px; height: 40px; }
.zb-rail .zb-logo--rail .zb-logo__word{ font-size: 13px; line-height: 1.12; }
.zb-rail .zb-rail__nav{ display: flex; flex-direction: column; gap: 4px; white-space: normal; }
.zb-rail .zb-rail__nav--sub{ margin-top: auto; padding-top: 12px; border-top: 1px solid #1F1F1F; }
.zb-rail .zb-rail__item.nav-link{
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 4px; border-radius: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-align: center; white-space: normal;
  color: #fff; -webkit-text-fill-color: #fff; background: none; cursor: pointer;
}
.zb-rail .zb-rail__item.nav-link:hover{ background: #1A1A1A; -webkit-text-fill-color: #fff; }
.zb-rail .zb-rail__item.is-active{ background: #1F1F1F; }
.zb-rail .zb-rail__item--sm.nav-link{ flex-direction: row; justify-content: center; padding: 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--zb-ink-2); -webkit-text-fill-color: var(--zb-ink-2); }
.zb-rail__bar{ display: block; width: 28px; height: 6px; border-radius: 3px; }
.zb-rail__bar--white{ background: #fff; }
.zb-rail__bar--green{ background: var(--zb-green); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.zb-rail__bar--blue{ background: var(--zb-blue-l); }
.zb-rail__bar--gold{ background: var(--zb-gold); }
.zb-rail__bar--red{ background: var(--zb-red); }
.zb-rail .nav-accent, .zb-rail .nav-inner{ display: none; }

/* ---------------------------------------------------------------------
   4. 모바일 하단 탭바 · 서랍
   --------------------------------------------------------------------- */
.lt-mbar.zb-tabbar{
  background: #000; border-top: 1px solid #1F1F1F; box-shadow: none;
  padding: 0 4px var(--lt-mbar-safe); gap: 0; justify-content: space-between;
}
.zb-tabbar .zb-tab{
  flex: 1 1 0; min-width: 0; height: var(--lt-mbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0 2px; margin: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--zb-ink-2); text-decoration: none; font-family: var(--zb-font); cursor: pointer;
}
.zb-tabbar .zb-tab:hover, .zb-tabbar .zb-tab:active{ color: #fff; background: #111; }
.zb-tab__t{ font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.zb-tab__bar{ display: block; width: 24px; height: 5px; border-radius: 3px; }
.zb-tab__bar--green{ background: var(--zb-green); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.zb-tab__bar--blue{ background: var(--zb-blue-l); }
.zb-tab__bar--white{ background: #fff; }
.lt-mbar.zb-tabbar .nav-toggle{ flex: 1 1 0; width: auto; }
.zb-tabbar .nav-toggle .burger{ width: 20px; height: 13px; }
.zb-tabbar .lt-mbar__user.zb-tab{ padding: 0 2px; background: transparent; border: 0; }
.zb-tabbar .lt-mbar__bal{ font-size: 12px; font-weight: 800; color: var(--zb-gold); line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.zb-tabbar .lt-mbar__bal::before{ content: "R "; }
.zb-tabbar .lt-mbar__rw.zb-tab{ background: transparent; border: 0; color: var(--zb-ink-2); box-shadow: none; padding: 0 2px; }
.zb-tabbar .lt-mbar__rw.is-ready .lt-mbar__rw-ico{ color: var(--zb-gold); }
.zb-tabbar .lt-mbar__rw-ico{ color: var(--zb-ink-2); }
.zb-tabbar .lt-mbar__rw-txt{ display: block; }
.zb-tabbar .lt-mbar__guest{ flex: 2 1 0; display: flex; gap: 6px; padding: 0 6px 0 4px; }
.zb-tabbar .lt-mbar__auth{
  flex: 1 1 0; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid #4A4A4A; background: transparent; color: #fff; font-size: 14px; font-weight: 700;
}
.zb-tabbar .lt-mbar__auth--signup{ background: var(--zb-gold); border-color: var(--zb-gold); color: #0D0D0D; font-weight: 800; }

/* 서랍 (#mainNav) — 다크 */
#mainNav.nav{ background: #0D0D0D; border-right: 1px solid var(--zb-line); }
#mainNav .nav-link{ color: #fff; -webkit-text-fill-color: #fff; }
#mainNav .drawer-member{ background: #151515; border-color: var(--zb-line); }
#mainNav .drawer-v--gold{ color: var(--zb-gold); }
#mainNav .drawer-auth-btn{ border-radius: 999px; }
#mainNav .drawer-auth-btn--signup{ background: var(--zb-gold); color: #0D0D0D; }

/* 로그인·가입 서랍 */
.auth-drawer__panel{ background: #111 !important; border-left: 1px solid var(--zb-line); }
.auth-drawer .auth-input{ background: #1A1A1A !important; border-color: var(--zb-line-2) !important; color: #fff !important; }
.auth-drawer .auth-input::placeholder{ color: #8C8C8C; }


/* 나이 확인 (가입 화면에서 뜬다) */
html #ageVerifyBox{ background: #151515; border: 1px solid #333; font-family: var(--zb-font); }
html #ageVerifyBox .age-title{ font-family: var(--zb-display); font-weight: 800; letter-spacing: -.01em; }
html #ageVerifyBox .age-sub{ color: var(--zb-mute); }
html #ageVerifyYes{ background: var(--zb-gold); color: #0D0D0D; }
html #ageVerifyNo{ background: transparent; color: #fff; border: 1px solid #4A4A4A !important; }


html .auth-switcher__tabs{ background: #1C1C1C; border-radius: 999px; }
html .auth-switcher__tabs-thumb{ background: var(--zb-green); border-radius: 999px; }
html .auth-switcher__tab{ font-size: 13.5px; }
html .auth-submit{ background: var(--zb-gold); color: #0D0D0D; border-radius: 999px; }
html .auth-submit:hover{ filter: brightness(1.06); }
body.auth-open .lt-dock, body.drawer-open .lt-dock{ display: none !important; }

/* ---------------------------------------------------------------------
   5. 푸터
   --------------------------------------------------------------------- */
.site-footer, .site-footer-mobile{ background: var(--zb-bg) !important; border-top: 1px solid var(--zb-line); position: relative; }
.site-footer::before, .site-footer-mobile::before{
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--zb-red) 0 20%, #fff 20% 40%, var(--zb-green) 40% 60%, var(--zb-gold) 60% 80%, var(--zb-blue) 80% 100%);
}
.site-footer .footer-top, .site-footer .footer-bottom, .site-footer-mobile .footer-mobile-top,
.site-footer-mobile .footer-mobile-main, .site-footer-mobile .footer-mobile-payments{ background: transparent !important; }
.site-footer .container, .site-footer-mobile .container{ width: min(1340px, calc(100% - 56px)); }
.footer-top__link, .footer-mobile-toplink, .footer-more__btn, .footer-mobile-summary{ color: var(--zb-ink-2) !important; font-weight: 700; }
.footer-top__link:hover, .footer-mobile-toplink:hover{ color: var(--zb-gold) !important; }
.footer-more__panel{ background: #151515 !important; border: 1px solid var(--zb-line-2) !important; }
.footer-more__panel a, .footer-mobile-link{ color: var(--zb-ink-2) !important; }
.footer-more__panel a:hover, .footer-mobile-link:hover{ color: #fff !important; }
.footer-brand__text, .footer-meta__text, .footer-licence, .footer-mobile-meta-row{ color: var(--zb-mute) !important; }
.footer-licence a, .footer-meta__text a{ color: var(--zb-ink-2) !important; text-decoration: underline; }
.footer-brand__logo{ width: 168px; height: auto; }

.zb-pay-wrap{ padding: 4px 0 18px; }
.zb-pay{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 16px 0; border-top: 1px solid var(--zb-line); border-bottom: 1px solid var(--zb-line); }
.zb-pay__k{ font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--zb-mute); margin-right: 4px; }
.zb-pay__item{ display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 76px; padding: 0 10px; border-radius: 10px; background: #fff; }
.zb-pay__item img{ width: auto; max-width: 70px; height: 24px; object-fit: contain; }
.zb-pay__item--txt{ font-weight: 800; font-size: 14px; color: #0D0D0D; letter-spacing: .02em; }
.zb-pay__rg{ margin-left: auto; font-size: 13px; font-weight: 600; color: var(--zb-ink-2); }


/* ---------------------------------------------------------------------
   5-2. 플로팅 독 (Live Chat · Helpdesk · Deposit · Affiliates) — 다크 · 작게
   ★ 마커(#ltDock · data-lt-dock · [data-livechat-open])는 그대로. 색과 크기만.
   --------------------------------------------------------------------- */
.lt-dock .lt-dock__btn{
  background: #151515 !important; color: #fff !important;
  border: 1px solid #2E2E2E; box-shadow: 0 8px 22px rgba(0,0,0,.45);
  min-height: 44px; font-size: 13.5px; font-weight: 700;
}
.lt-dock .lt-dock__btn:hover{ background: #1F1F1F !important; transform: none; }
.lt-dock .lt-dock__btn svg{ color: var(--zb-gold); }
.lt-dock .lt-dock__btn--chat svg{ color: #3FBF8A; }
.lt-dock .lt-dock__btn--help svg{ color: #8FA8FF; }
.lt-dock .lt-dock__btn--deposit svg{ color: var(--zb-gold); }
.lt-dock .lt-dock__btn--aff svg{ color: #FF8A84; }
.lt-dock .lt-dock__restore{ background: var(--zb-green) !important; }
@media (min-width: 768px){
  .lt-dock{ right: 18px; bottom: 22px; }
  .lt-dock .lt-dock__btn{ width: 44px; padding: 0; justify-content: center; overflow: hidden; }
  .lt-dock .lt-dock__label{ position: absolute; right: 54px; padding: 8px 12px; border-radius: 8px; background: #151515; border: 1px solid #2E2E2E;
    white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .15s ease, transform .15s ease; }
  .lt-dock .lt-dock__btn{ position: relative; overflow: visible; }
  .lt-dock .lt-dock__btn:hover .lt-dock__label, .lt-dock .lt-dock__btn:focus-visible .lt-dock__label{ opacity: 1; transform: none; }
}
@media (max-width: 767px){
  .lt-dock{ right: 10px; bottom: calc(var(--lt-mbar-h) + var(--lt-mbar-safe) + 74px); }
  .lt-dock .lt-dock__btn{ width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .lt-dock .lt-dock__label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lt-dock .lt-dock__bar{ background: #151515; }
}

/* LONGTIAN 의 비회원 가입 사이드 배너 — ZABET1 은 상단 [Join] 과 하단 탭바로 충분하다 */
.side-banner{ display: none !important; }

/* ---------------------------------------------------------------------
   6. 메인
   --------------------------------------------------------------------- */
.zb-home{
  width: min(1340px, calc(100% - 56px)); margin: 0 auto; padding: 24px 0 56px;
  display: flex; flex-direction: column; gap: 30px;
}
.zb-chips{ display: none; }

/* 히어로 */
.zb-hero{ display: flex; flex-direction: column; gap: 12px; }
.zb-hero__stage{ position: relative; border-radius: var(--zb-r-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 5; min-height: 380px; }
.zb-hero__slide{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; display: flex; align-items: flex-end; }
.zb-hero__slide.is-on{ opacity: 1; visibility: visible; }
.zb-hero__pic, .zb-hero__pic img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.zb-hero__pic img{ object-fit: cover; object-position: right center; max-width: none; }
.zb-hero__slide::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 58%); pointer-events: none; }
.zb-hero__copy{ position: relative; z-index: 1; padding: 40px 44px; max-width: 600px; display: flex; flex-direction: column; gap: 14px; }
.zb-hero__title{ margin: 0; font-weight: 800; font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.zb-hero__sub{ margin: 0; font-size: 17px; line-height: 1.5; color: var(--zb-ink-2); max-width: 470px; }
.zb-hero__cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.zb-hero__fine{ font-size: 12px; color: var(--zb-mute); }
.zb-hero__thumbs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.zb-hero__thumb{
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; text-decoration: none;
  padding: 12px 14px; border-radius: 14px; background: #151515; border: 1px solid #2A2A2A; color: #fff; font-family: var(--zb-font);
}
.zb-hero__thumb:hover{ border-color: #4A4A4A; }
.zb-hero__thumb.is-on{ border-color: #fff; }
.zb-hero__thumb-k{ font-size: 12px; font-weight: 700; color: #3FBF8A; }
.zb-hero__thumb:nth-child(2) .zb-hero__thumb-k{ color: var(--zb-gold); }
.zb-hero__thumb-k--blue{ color: #8FA8FF !important; }
.zb-hero__thumb-t{ font-size: 14px; font-weight: 700; color: #fff; }

/* 이번 주 */
.zb-week{ background: #151515; border-radius: var(--zb-r-lg); padding: 22px; }
.zb-legend{ display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--zb-ink-2); }
.zb-legend li{ display: inline-flex; align-items: center; gap: 6px; }
.zb-week__scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 4px; }
.zb-week__grid{ display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 8px; min-width: 1000px; margin: 0; padding: 0; list-style: none; }
.zb-day{ border-radius: 14px; background: #111; border: 1px solid #1F1F1F; padding: 12px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; }
.zb-day.is-today{ background: #1C1C1C; border-color: var(--zb-gold); }
.zb-day__head{ display: flex; justify-content: space-between; align-items: baseline; }
.zb-day__dow{ font-size: 13px; font-weight: 700; color: var(--zb-mute); text-transform: uppercase; letter-spacing: .04em; }
.zb-day.is-today .zb-day__dow{ color: var(--zb-gold); }
.zb-day__num{ font-family: var(--zb-display); font-weight: 800; font-size: 22px; color: #fff; }
.zb-day__empty{ margin-top: auto; font-size: 12.5px; line-height: 1.35; color: var(--zb-mute) !important; text-decoration: none; border-top: 1px dashed #2E2E2E; padding-top: 10px; }
.zb-day__empty:hover{ color: #fff !important; }
.zb-ev{ display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 9px; background: #0D0D0D; text-decoration: none; color: #fff !important; border-left: 3px solid var(--zb-green); }
.zb-ev--rugby{ border-left-color: var(--zb-gold); }
.zb-ev--cricket{ border-left-color: var(--zb-blue-l); }
.zb-ev--other{ border-left-color: var(--zb-red); }
.zb-ev:hover{ background: #1A1A1A; }
.zb-ev__t{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #BDBDBD; font-variant-numeric: tabular-nums; }
.zb-ev__t .zb-dot{ display: none; }
.zb-ev__m{ font-size: 13px; font-weight: 700; line-height: 1.3; }
.zb-ev__c{ font-size: 11.5px; color: var(--zb-mute); }
.zb-week__foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--zb-mute); }

/* 3칸 타일 */
.zb-bento{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zb-tile{ position: relative; border-radius: var(--zb-r-lg); overflow: hidden; min-height: 400px; display: flex; flex-direction: column; isolation: isolate; }
.zb-tile__body{ position: relative; z-index: 1; padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.zb-tile__title{ margin: 0; font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.zb-tile__lead{ margin: 0; font-size: 15px; line-height: 1.5; color: #DCE3FF; }
.zb-tile .zb-btn{ margin-top: auto; align-self: flex-start; }

.zb-tile--predix{ background: var(--zb-blue); }
.zb-tile--predix .zb-tile__img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.zb-tile--predix picture{ display: block; }
.zb-market{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; color: #0D0D0D; }
.zb-market__q{ font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.zb-market__yn{ display: flex; gap: 6px; flex: 0 0 auto; }
.zb-yes, .zb-no{ display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 800; }
.zb-yes{ background: #E3F2EC; color: #005A39; }
.zb-no{ background: #FCE5E3; color: #A3231C; }

.zb-tile--shows{ background: var(--zb-red-d); }
.zb-tile--shows picture, .zb-tile--shows .zb-tile__bg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.zb-tile--shows .zb-tile__bg{ object-fit: cover; object-position: right bottom; max-width: none; }
.zb-tile--shows::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(110,18,14,.82) 0%, rgba(110,18,14,.45) 45%, rgba(110,18,14,0) 70%); }
.zb-showlist{ list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 64%; }
.zb-showlist a{ display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 10px; background: rgba(13,13,13,.88); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.zb-showlist a:hover{ background: #0D0D0D; }
.zb-live{ color: var(--zb-gold); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

.zb-tile--slots{ background: var(--zb-gold); color: #0D0D0D; }
.zb-tile--slots .zb-tile__title{ color: #0D0D0D; }
.zb-hotgrid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zb-hot{ aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 0; padding: 0; background: #0D0D0D; cursor: pointer; }
.zb-hot img{ width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.zb-hot:hover img{ transform: scale(1.06); }

/* 가로 줄 (게임쇼 · 슬롯) */
.zb-row__track{ display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.zb-row__track::-webkit-scrollbar{ height: 6px; }
.zb-row__track::-webkit-scrollbar-thumb{ background: #2A2A2A; border-radius: 3px; }
.zb-show{ flex: 0 0 220px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: #151515; text-decoration: none; color: #fff !important; display: flex; flex-direction: column; }
.zb-show__art{ position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--zb-red-d); }
.zb-show--blue .zb-show__art{ background: var(--zb-blue); }
.zb-show--green .zb-show__art{ background: var(--zb-green-d); }
.zb-show--gold .zb-show__art{ background: #6E4D00; }
.zb-show__wheel{
  width: 84px; height: 84px; border-radius: 50%; border: 5px solid #fff;
  background: conic-gradient(#007A4D 0 30deg,#FFB612 30deg 60deg,#DE3831 60deg 90deg,#002395 90deg 120deg,#fff 120deg 150deg,#007A4D 150deg 180deg,#FFB612 180deg 210deg,#DE3831 210deg 240deg,#002395 240deg 270deg,#fff 270deg 300deg,#007A4D 300deg 330deg,#FFB612 330deg 360deg);
  transition: transform .8s ease;
}
.zb-show:hover .zb-show__wheel{ transform: rotate(150deg); }
.zb-badge-live{ position: absolute; left: 10px; top: 10px; background: #C42F29; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 5px; text-transform: uppercase; }
.zb-show__name{ padding: 12px 14px 2px; font-size: 15px; font-weight: 800; }
.zb-show__prov{ padding: 0 14px 14px; font-size: 12.5px; color: var(--zb-mute); }

.zb-game{ flex: 0 0 170px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: #fff; font-family: var(--zb-font); }
.zb-game__art{ display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #1C1C1C, #111); }
.zb-game__art img{ width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.zb-game:hover .zb-game__art img{ transform: scale(1.05); }
.zb-game__name{ font-size: 14px; font-weight: 700; line-height: 1.25; }
.zb-game__prov{ font-size: 12.5px; color: var(--zb-mute); margin-top: -4px; }


/* ---------------------------------------------------------------------
   7. 하위 화면 공통 — 마이페이지 패널 · 입출금 · 카드 · 폼
   원본은 "밝은 회색 패널(#d9d9d9) + 더 밝은 카드(#efefef) + 어두운 글자" 였다.
   ZABET1 은 전부 다크로 뒤집는다. 패널 안 글자는 원본도 --panel-ink 변수로
   통일돼 있어서(styles.css 'account-section__body') 변수만 바꾸면 따라온다.
   --------------------------------------------------------------------- */
html .account-section{ border-radius: var(--zb-r-lg); overflow: hidden; border: 1px solid var(--zb-line); }
html .account-section__title{ background: #1C1C1C; color: #fff; font-family: var(--zb-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; border-bottom: 1px solid var(--zb-line); }
html .account-section__body{
  background: #151515;
  --panel-ink:       #FFFFFF;
  --panel-ink-soft:  #BDBDBD;
  --panel-ink-label: #D9D9D9;
  --panel-warn:      #FFB612;
  --panel-ok:        #3FBF8A;
  --panel-line:      #3A3A3A;
  color: var(--panel-ink);
}
html .account-info-card{ background: #1C1C1C; border-color: #2E2E2E; }
html .account-info-card__label{ color: var(--zb-mute); }
html .account-info-card__value{ color: #fff; }
html .account-info-card__btn{ background: var(--zb-green); }
html .account-info-card__btn:hover{ background: var(--zb-green-d); }
html .account-password-input{ background: #1C1C1C; border-color: #2E2E2E; color: #fff; }
html .account-password-input::placeholder{ color: #8C8C8C; }
html .account-password-submit{ background: var(--zb-gold); color: #0D0D0D; font-weight: 800; border-radius: 999px; }

html .deposit-quick-nav__icon-wrap{ background: #1C1C1C; border: 1px solid #2E2E2E; }
html .deposit-quick-nav__item:hover .deposit-quick-nav__icon-wrap,
html .deposit-quick-nav__item.is-active .deposit-quick-nav__icon-wrap{ background: var(--zb-green); border-color: var(--zb-green); }
html .deposit-group-title{ background: transparent; color: var(--zb-gold); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; padding: 0 2px; min-height: 32px; }
html .deposit-method{ background: #151515; border: 1px solid #262626; }
html .deposit-method:hover{ background: #1C1C1C; border-color: #3A3A3A; }


/* 리워드 설명 카드 (myBalance) · 보너스 목록 */
html .p77-rw2__lead{ color: var(--zb-ink-2); }
html .p77-rw2__card{ background: #1C1C1C; border-color: #2E2E2E; }
html .p77-rw2__card--extra{ background: #241C08; border-color: #6E4D00; }
html .p77-rw2__num{ background: var(--zb-green); }
html .p77-rw2__num--extra{ background: var(--zb-gold); color: #0D0D0D; }
html .p77-rw2__name, html .p77-rw2__text b{ color: #fff; }
html .p77-rw2__text{ color: var(--zb-ink-2); }
html .p77-rw2__tag{ background: transparent; border-color: #4A4A4A; color: var(--zb-ink-2); }
html .p77-rw2__tag--extra{ background: transparent; border-color: var(--zb-gold); color: var(--zb-gold); }
html .bonus-empty{ color: var(--zb-mute); }
html .kyc-no{ color: #FF6B66; }


html .history-filter__chip.is-active{ background: var(--zb-green); border-color: var(--zb-green); color: #fff; }
html .lt-chat-link{ color: var(--zb-gold); }
html .lt-chat-link:hover{ color: #FFD36B; }
html main .inner-container p{ color: var(--zb-ink-2); }
html .zb-crypto-amt{ color: #8FA8FF; }
html .zb-crypto-cur{ color: #FF8A84; }
html .zb-crypto-addr{ color: #fff; word-break: break-all; }

/* 큰 제목 (마이페이지 · 정보 화면) */
html .history-heading, html .page-title, html .slot-title{ font-family: var(--zb-display); letter-spacing: -.02em; }

/* 부트스트랩 기본 파랑 버튼 → ZABET1 그린 */
html .btn-primary{ background: var(--zb-green); border-color: var(--zb-green); color: #fff; }
html .btn-primary:hover{ background: var(--zb-green-d); border-color: var(--zb-green-d); }


/* ---- 하위 화면 공통 머리 (.zb-sub) ---------------------------------- */
.zb-sub{ width: min(1340px, calc(100% - 56px)); margin: 0 auto; padding: 28px 0 56px; }
.zb-sub__head{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.zb-sub__title{ margin: 0; font-family: var(--zb-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.zb-sub__lead{ margin: 0; font-size: 16px; line-height: 1.55; color: var(--zb-ink-2); max-width: 640px; }
.zb-sub__fine{ margin-top: 22px; font-size: 12.5px; color: var(--zb-mute); }

/* ---- 프로모션 카드 ------------------------------------------------- */
.zb-promos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zb-promo{ position: relative; border-radius: var(--zb-r-lg); overflow: hidden; background: #111; aspect-ratio: 3 / 1.25; min-height: 240px; display: flex; isolation: isolate; border: 1px solid var(--zb-line); }
.zb-promo:first-child{ grid-column: 1 / -1; aspect-ratio: 3 / 1; }
.zb-promo picture, .zb-promo__img{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.zb-promo__img{ object-fit: cover; object-position: right center; max-width: none; }
.zb-promo::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(13,13,13,.95) 0%, rgba(13,13,13,.75) 40%, rgba(13,13,13,0) 72%); }
.zb-promo__body{ position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 30px; max-width: 58%; }
.zb-promo__title{ margin: 0; font-family: var(--zb-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.zb-promo__desc{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--zb-ink-2); }
.zb-promo .zb-btn{ align-self: flex-start; margin-top: 4px; }
.zb-promo--green .zb-kicker{ color: #3FBF8A; }
.zb-promo--blue .zb-kicker{ color: #8FA8FF; }
.zb-promo--red .zb-kicker{ color: #FF8A84; }
@media (max-width: 991px){ .zb-promos{ grid-template-columns: minmax(0, 1fr); } .zb-promo, .zb-promo:first-child{ aspect-ratio: auto; min-height: 260px; } }
@media (max-width: 767px){
  .zb-sub{ width: calc(100% - 24px); padding: 18px 0 32px; }
  .zb-promo{ flex-direction: column; justify-content: flex-end; min-height: 380px; }
  .zb-promo__img{ object-position: 78% center; }
  .zb-promo::before{ background: linear-gradient(180deg, rgba(13,13,13,0) 20%, rgba(13,13,13,.85) 55%, rgba(13,13,13,.97) 100%); }
  .zb-promo__body{ max-width: none; padding: 20px; }
}


/* ---- 하위 화면 배너 (슬롯 · 라이브) · 공통 폭 ------------------------ */
html .container{ width: min(1340px, calc(100% - 56px)); }
.zb-banner{ position: relative; width: min(1340px, calc(100% - 56px)); margin: 24px auto 8px; border-radius: var(--zb-r-lg); overflow: hidden; aspect-ratio: 4 / 1; min-height: 220px; background: #111; display: flex; align-items: flex-end; isolation: isolate; }
html .zb-banner > picture, html .zb-banner .zb-banner__img{ position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; z-index: -1; margin: 0; }
.zb-banner__img{ object-fit: cover; object-position: right center; max-width: none; }
.zb-banner::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.6) 36%, rgba(13,13,13,0) 64%); }
.zb-banner__copy{ position: relative; z-index: 1; padding: 28px 34px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.zb-banner__title{ margin: 0; font-family: var(--zb-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.03em; color: #fff; }
@media (max-width: 767px){
  html .container{ width: calc(100% - 24px); }
  .zb-banner{ width: calc(100% - 24px); margin-top: 14px; aspect-ratio: 16 / 9; min-height: 0; }
  .zb-banner::before{ background: linear-gradient(180deg, rgba(13,13,13,.05) 0%, rgba(13,13,13,.55) 38%, rgba(13,13,13,.94) 72%); }
  .zb-banner__copy{ padding: 18px; }
}

/* ---------------------------------------------------------------------
   8. 반응형
   --------------------------------------------------------------------- */
@media (max-width: 1199px){
  .zb-bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zb-tile--slots{ grid-column: 1 / -1; min-height: 0; }
  .zb-tile--slots .zb-hotgrid{ grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 1023px){
  .zb-top .user-name{ display: none; }
  .zb-top .balance-label{ display: none; }
  .zb-hero__thumbs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .zb-top .utility-inner{ width: calc(100% - 24px); min-height: 56px; padding: 6px 0; gap: 10px; }
  .zb-logo--top{ display: inline-flex; }
  .zb-logo--top .zb-logo__mark{ width: 28px; height: 28px; }
  .zb-logo--top .zb-logo__word{ font-size: 18px; }
  .zb-search.lt-search-btn{ width: 44px; height: 44px; padding: 0; justify-content: center; margin-left: auto; }
  .zb-search__ph{ display: none; }
  .zb-top .utility-left{ width: auto; flex: 1 1 auto; }
  .zb-top .utility-right{ display: flex !important; flex: 0 0 auto; }
  .zb-top #guestNav{ display: none !important; }      /* 비회원 버튼 · PC 계정줄은 하단 탭바와 서랍에 있다 */
  .zb-top .nav-mobile-user{ display: flex; }
  .zb-top .nav-bal{ height: 36px; background: var(--zb-gold); color: #0D0D0D; }
  .zb-top .nav-bal__v::before{ content: "R "; }
  .zb-top .nav-mobile-user .user-pill{ height: 36px; width: 36px; padding: 0; justify-content: center; background: #1A1A1A; border: 1px solid var(--zb-line-2); }
  .nav-wrap.zb-rail{ display: none; }

  .zb-home{ width: calc(100% - 24px); padding: 4px 0 28px; gap: 22px; }
  .zb-chips{ display: flex; gap: 8px; overflow-x: auto; margin: 0 -12px; padding: 8px 12px 2px; scrollbar-width: none; }
  .zb-chips::-webkit-scrollbar{ display: none; }
  .zb-chip{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: #151515; border: 1px solid #2A2A2A; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
  .zb-chip--on{ background: #fff; color: #0D0D0D !important; border-color: #fff; }

  .zb-hero__stage{ aspect-ratio: 4 / 5; min-height: 0; }
  .zb-hero__pic img{ object-position: center top; }
  .zb-hero__slide::after{ background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.92) 100%); }
  .zb-hero__copy{ padding: 20px; gap: 10px; max-width: none; width: 100%; }
  .zb-hero__title{ font-size: 31px; }
  .zb-hero__sub{ font-size: 14.5px; }
  .zb-hero__cta .zb-btn--green{ flex: 1 1 100%; }
  .zb-hero__cta .zb-btn--ghost{ display: none; }
  .zb-hero__thumbs{ display: none; }

  .zb-week{ padding: 16px; }
  .zb-week__grid{ grid-template-columns: repeat(7, 132px); min-width: 0; }
  .zb-day{ min-height: 160px; }

  .zb-bento{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .zb-tile{ min-height: 0; }
  .zb-tile--shows{ min-height: 360px; }
  .zb-tile--slots .zb-hotgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zb-tile__title{ font-size: 28px; }
  .zb-showlist{ max-width: 72%; }

  .zb-show{ flex-basis: 150px; }
  .zb-show__wheel{ width: 62px; height: 62px; border-width: 4px; }
  .zb-game{ flex-basis: 132px; }

  .site-footer-mobile .container{ width: calc(100% - 24px); }
  .zb-pay{ gap: 8px; }
  .zb-pay__item{ min-width: 64px; height: 32px; }
  .zb-pay__rg{ margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .zb-hero__slide{ transition: none; }
  .zb-show__wheel, .zb-hot img, .zb-game__art img{ transition: none; }
}

/* ---------------------------------------------------------------------
   9. 입출금 신청 화면 입력칸 — 원본은 흰 칸이라 다크 패널에서 튄다
   --------------------------------------------------------------------- */
html .account-info-card input[type="text"],
html .account-info-card input[type="number"],
html .wd-card__field input,
html .account-info-card select{
  background: #0D0D0D !important; color: #fff !important;
  border: 1px solid #333 !important; border-radius: 10px !important;
  padding: 0 12px; height: 42px; font: 600 15px/1 Figtree, system-ui, sans-serif;
}
html .account-info-card input::placeholder, html .wd-card__field input::placeholder{ color: #8A8A8A; }
html .account-info-card input:focus, html .wd-card__field input:focus, html .account-info-card select:focus{
  outline: none; border-color: var(--zb-gold) !important; box-shadow: 0 0 0 3px rgba(255,182,18,.22);
}

/* 라이브 화면 상단 게임쇼 줄 */
.zb-row--page{ margin-top: 28px; margin-bottom: 8px; }
@media (max-width: 767px){
  html .account-info-card .account-info-card__value{ min-width: 0; gap: 6px; }
  html .account-info-card input#dAmount, html .account-info-card input#wdAmount{ width: min(170px, 46vw) !important; }
}

/* ---------------------------------------------------------------------
   10. 로고 D안 (2026-10-06) — 워드마크 SVG 한 장 + 레일은 Z1 마크만
   --------------------------------------------------------------------- */
.zb-logo__wordmark{ display: block; height: 21px; width: auto; }
.zb-rail .zb-logo--rail{ margin: 4px 0 16px; }
.zb-rail .zb-logo--rail .zb-logo__mark{ width: 48px; height: 48px; border-radius: 12px; }
@media (max-width: 767px){
  .zb-logo--top .zb-logo__wordmark{ height: 20px; }
}
html .footer-brand__logo{ width: 160px !important; height: auto !important; }
html .auth-switcher__logo{ width: 192px !important; height: auto !important; }

/* ---------------------------------------------------------------------
   11. 게임쇼 — 실제 화면 6장 (2026-10-06 CK)
   --------------------------------------------------------------------- */
/* 카드 : Popular slots 와 같은 짜임 — 그림 + 이름 + 게임사. 그림만 가로(16:10) */
.zb-show--img{ flex: 0 0 280px; gap: 8px; background: transparent; border-radius: 0; overflow: visible; }
.zb-show--img .zb-show__art{ aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #1C1C1C, #111); display: block; }
.zb-show--img .zb-show__art picture, .zb-show--img .zb-show__img{ display: block; width: 100%; height: 100%; }
.zb-show--img .zb-show__img{ object-fit: cover; transition: transform .25s ease; }
.zb-show--img:hover .zb-show__img{ transform: scale(1.05); }
.zb-show--img .zb-show__name{ padding: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.zb-show--img .zb-show__prov{ padding: 0; margin-top: -4px; }
@media (max-width: 767px){ .zb-show--img{ flex-basis: 220px; } }

/* "Spin the Big Wheel" 타일 배경 — N 장 순환 크로스페이드 (장당 5초) */
.zb-tile__slides{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.zb-tile__slide{ position: absolute; inset: 0; opacity: 0; }
.zb-tile__slide:first-child{ opacity: 1; }
.zb-tile--shows .zb-tile__slide picture, .zb-tile--shows .zb-tile__slide .zb-tile__bg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.zb-tile--shows .zb-tile__slide .zb-tile__bg{ object-fit: cover; object-position: center; }
.zb-tile--shows::before{ background: linear-gradient(180deg, rgba(13,13,13,.86) 0%, rgba(13,13,13,.35) 42%, rgba(13,13,13,.15) 60%, rgba(13,13,13,.55) 100%) !important; }
@media (prefers-reduced-motion: no-preference){
  .zb-fade--6 .zb-tile__slide{ animation: zbFade6 30s infinite; animation-delay: calc(var(--i) * 5s - 1s); }
  .zb-fade--6 .zb-tile__slide:first-child{ opacity: 0; }
}
/* 한 장 5초 = 30초의 16.67%. 앞뒤 1초(3.3%)씩 겹쳐 지나간다 */
@keyframes zbFade6{ 0%{opacity:0} 3.3%{opacity:1} 16.7%{opacity:1} 20%{opacity:0} 100%{opacity:0} }

/* ---------------------------------------------------------------------
   12. 모바일 손질 (2026-10-06 CK 스크린샷)
   --------------------------------------------------------------------- */
/* 언어 선택 : 검색 옆. 탭으로도 열린다(script.js 가 .is-open 을 붙인다) */
.zb-top .lang-dropdown.is-open .lang-menu{ display: block; }
.zb-top .lang-dropdown{ flex: 0 0 auto; }
@media (max-width: 767px){
  .zb-top .lang-toggle{ width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; border-radius: 999px; background: #151515; border-color: var(--zb-line-2); }
  .zb-top .lang-label{ display: none; }
  .zb-top .lang-flag{ width: 22px; height: 22px; border-radius: 50%; }
  .zb-top .lang-menu{ right: 0; top: calc(100% + 6px); width: 210px; }
  /* 서랍의 언어 선택은 숨긴다 — 상단으로 옮겼다 (마크업은 script.js 계약 때문에 남긴다) */
  #mainNav .mobile-lang-dropdown{ display: none !important; }
}

/* 서랍 : 비회원 버튼 두 개를 같은 크기로 */
#mainNav .drawer-header--guest{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; margin-bottom: 12px; }
#mainNav .drawer-header--guest .drawer-auth-btn{ display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 12px; border-radius: 999px; border: 1px solid #3A3A3A; background: transparent; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .01em; opacity: 1; }
#mainNav .drawer-header--guest .drawer-auth-btn--signup{ background: var(--zb-gold); border-color: var(--zb-gold); color: #0D0D0D; }
/* 서랍 메뉴 점 아이콘 (Sports · PrediX · Slots · Game Shows) */
.zb-navdot{ flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; margin: 0 6px 0 4px; }
.zb-navdot--green{ background: var(--zb-green); } .zb-navdot--blue{ background: var(--zb-blue-l); }
.zb-navdot--gold{ background: var(--zb-gold); } .zb-navdot--red{ background: var(--zb-red); }

/* 하단 탭바 : Menu + (Login·Join | Wallet·Rewards) */
@media (max-width: 767px){
  .lt-mbar.zb-tabbar .nav-toggle{ flex: 0 0 76px; }
  .zb-tabbar .lt-mbar__guest{ flex: 1 1 auto; gap: 8px; padding: 0 10px 0 4px; }
}

/* 메인 카테고리 : 가로 스크롤 알약 → 5칸 타일 (잘리지 않게) */
@media (max-width: 767px){
  .zb-chips{ display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0; padding: 6px 0 0; }
  .zb-chip{ flex-direction: column; justify-content: center; gap: 7px; height: 62px; padding: 0 2px; border-radius: 14px; font-size: 11.5px; font-weight: 800; line-height: 1.1; text-align: center; white-space: nowrap; }
  .zb-chip .zb-dot{ width: 22px; height: 6px; border-radius: 3px; }
  .zb-chip--on{ background: #151515; color: #fff !important; border-color: var(--zb-green); }
}

/* 푸터 결제수단 : 칩 크기를 맞춘다 (모바일은 3칸 격자) */
.zb-pay__item--wide img{ max-width: 96px; height: 22px; }
@media (max-width: 767px){
  .zb-pay{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zb-pay__k{ grid-column: 1 / -1; margin: 0; }
  .zb-pay__item{ min-width: 0; width: 100%; height: 40px; padding: 0 8px; }
  .zb-pay__item img{ max-width: 100%; height: 22px; }
  .zb-pay__rg{ grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; }
}

/* 모바일 푸터 : 씰 + U2IS 가운데 정렬, 라이선스 글은 가운데 */
@media (max-width: 767px){
  .footer-mobile-meta-row{ justify-content: center; gap: 28px; }
  .footer-mobile-meta-item--license, .footer-mobile-meta-item--u2is{ flex: 0 0 auto; justify-content: center; }
}
/* 긴 번역(isiZulu·Kiswahili)에서도 카테고리 타일 글자가 넘치지 않게 — 두 줄까지 */
@media (max-width: 767px){
  .zb-chip{ height: 66px; font-size: 10.5px; white-space: normal; overflow: hidden; overflow-wrap: anywhere; padding: 0 3px; }
  .zb-chip > span + *{ display: block; }
}
/* 히어로 제목 : 어센더가 긴 단어(Wonke umdlalo 등)가 위 키커에 닿지 않게 */
.zb-hero__title{ line-height: 1.1; padding-top: 4px; }
html:lang(zu) .zb-hero__title, html:lang(sw) .zb-hero__title{ font-size: clamp(30px, 3.4vw, 50px); }
@media (max-width: 767px){ html:lang(zu) .zb-hero__title, html:lang(sw) .zb-hero__title{ font-size: 27px; } }
@media (max-width: 767px){
  /* 글이 길어져 키커가 밝은 그림 위로 올라가도 읽히게 */
  .zb-hero__copy .zb-kicker{ align-self: flex-start; background: rgba(13,13,13,.78); padding: 5px 8px; border-radius: 6px; }
}
/* 회원 모바일 상단 : 로고·검색·언어·잔액·계정 다섯 개가 360px 에 들어가게 */
@media (max-width: 420px){
  .zb-top .utility-inner{ gap: 6px; }
  .zb-top .utility-left{ gap: 6px; min-width: 0; }
  .zb-top .utility-right{ gap: 6px; }
  .zb-top .nav-mobile-user{ gap: 6px; }
  body.member .zb-logo--top .zb-logo__wordmark{ height: 16px; }
  .zb-search.lt-search-btn, .zb-top .lang-toggle{ width: 40px; height: 40px; }
  .zb-top .nav-bal{ padding: 0 8px; font-size: 13px; }
}
@media (max-width: 420px){
  .zb-top .nav-bal__plus{ display: none; }
}