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

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

  --panel: #ffffff;
  --panel-2: #f7faf9;
  --panel-3: #edf3f1;

  --green: #00c57a;
  --green-2: #00a868;
  --green-3: #246e5f;

  --gold: #246e5f;
  --gold-2:#16443e;

  --text: #222222;

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

  --ring: 0 0 0 3px rgba(0,197,122,.28);

  --drawer-w: 300px;
}

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

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

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

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

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

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

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

body.guest #guestNav{
  display: flex;
}

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

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

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

/* =========================================================
   TOP UTILITY BAR
========================================================= */
.utility-bar{
  background: #123832;
  border-bottom: 1px solid rgba(20,40,35,.12);
}

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

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

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

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

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

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

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

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

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

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

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

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

.user-name{
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(24,42,38,0.92);
}

.balance-label{
  color: rgba(24,42,38,0.92);
  font-weight: 700;
  letter-spacing: .2px;
}

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

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

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

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

.utility-link.danger{ color: rgba(24,42,38,0.92); }
.utility-link.danger:hover{ color: rgba(255,120,120,.95); }

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

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

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

.lang-toggle:hover{
  background: rgba(20,40,35,.05);
  border-color: rgba(24,42,38,0.65);
}

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

.lang-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(24,42,38,0.92);
}

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

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

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

.lang-item:hover{
  background: rgba(20,40,35,.05);
}

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

.lang-item.is-active{
  background: rgba(20,40,35,.05);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nav-lang-toggle:hover{
  background: rgba(20,40,35,.05);
  border-color: rgba(24,42,38,0.65);
}

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

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

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

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

.nav-lang-item:hover{
  background: rgba(20,40,35,.05);
}

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

.nav-lang-item.is-active{
  background: rgba(20,40,35,.05);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

  .promo-head{
    height: 24px;
  }

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

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

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

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

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

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

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

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


.search-box select{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  padding: 0 40px 0 16px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(24,42,38,0.92);
  background: #ffffff;
  border: 1px solid rgba(20,40,35,.12);
  outline: none;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-box input{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  padding: 0 40px 0 16px;
  font-size: 12px;
  color: rgba(24,42,38,0.92);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(20,40,35,.12);
  outline: none;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search-box input::placeholder{ font-size: 12px; color: rgba(232,242,238,.55); }
.search-box input:focus{ border: 1px solid #9fe8c9; box-shadow: none; }

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

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

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

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

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

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

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

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

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

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

.footer-top{
  background: #ffffff;
  border-top: 1px solid rgba(20,40,35,.12);
}

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

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

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

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

.footer-payments{
  background: #101010;
  border-top: 1px solid rgba(20,40,35,.12);
  border-bottom: 1px solid rgba(20,40,35,.12);
}

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

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

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

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

.footer-bottom{
  background: #000000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  .footer-payments__inner{
    gap: 34px;
  }

  .footer-bottom__inner{
    gap: 24px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .footer-brand__logo{
    height: 42px;
  }

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

  .footer-meta__item{
    gap: 14px;
  }

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

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

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

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

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

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

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

  .footer-brand{
    gap: 14px;
  }

  .footer-brand__logo{
    height: 36px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.footer-mobile-payments{
  background: #060606;
  border-top: 1px solid rgba(20,40,35,.12);
  border-bottom: 1px solid rgba(20,40,35,.12);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.support-text--ph{ font-weight: 800; color: #00a868; }

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

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

  color: rgba(24,42,38,0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;

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


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

.drawer-auth-btn:hover{
  background: rgba(20,40,35,.05);
  border-color: rgba(24,42,38,0.65);
  color: #ffffff;
}

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

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

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

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

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

.mobile-lang-current span{
  font-size: 13px;
  font-weight: 700;
  color: rgba(24,42,38,0.92);
}

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

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

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

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

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

.mobile-lang-item:hover{
  background: rgba(20,40,35,.05);
}

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

.mobile-lang-item.is-active{
  background: rgba(20,40,35,.05);
}

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

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

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

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

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

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

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

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

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

  .nav-inner{ grid-template-columns: 44px 1fr auto; gap: 10px; }
  .nav-left, .nav-right, .nav-guest-actions{ display:none; }
  .nav-balance{ display:block; justify-self: end; }

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

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

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

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

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

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

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

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

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

  .drawer-sep{
    border: 0;
    border-top: 1px solid rgba(20,40,35,.12);
    margin: 8px 0;
  }

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

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

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

  .nav .nav-link:hover{
    background: #f2f7f5;
    color: #f2f7f5;
    -webkit-text-fill-color: rgba(24,42,38,0.92);
  }

  .nav .nav-link.active{
    background: #2a5d54;
    color: rgba(24,42,38,0.92);
    -webkit-text-fill-color: rgba(24,42,38,0.92);
  }

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

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

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

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

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

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

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

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

  .pa-coin{
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.auth-switcher__content{
  display: none;
}

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

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

.auth-field{
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.auth-submit__text{
  opacity: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.auth-open{
  overflow: hidden;
}

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

  .auth-drawer__panel{
    width: 100%;
  }

  .auth-drawer__back{
    display: none;
  }

  .auth-drawer__close{
    display: block;
  }

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

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

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

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

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

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

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

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

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

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

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

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


html{
  scrollbar-gutter: stable;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.deposit-page{
  background: #f0f2f1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.games-nav__link:hover,
.games-nav__link.active{
  background: #bcd4cc;
  color: #1f332d;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.live-page .games-nav__link:hover,
.live-page .games-nav__link.active{
  background: #bcd4cc;
  color: #1f332d;
}

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

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

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

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

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

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

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

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

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

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

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

  min-height: 0;
  background: #16443e;
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.account-section + .account-section{
  margin-top: 14px;
}

.account-section__title{
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 36px;
  background: #cfe0da;
  color: #1f332d;
  font-size: 20px;
  font-weight: 700;
}

.account-section__body{
  background: #d9d9d9;
  padding: 16px 28px 18px;
}

.account-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}

.account-info-card{
  min-height: 66px;
  border: 1px solid #8c8c8c;
  border-radius: 12px;
  background: #efefef;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

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

.account-info-card__value{
  font-size: 17px;
  line-height: 1.1;
  font-weight: 700;
  color: #3c3c3c;
  text-align: right;
  word-break: break-word;
}

.account-info-card__value--verified{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #09B285;
}

.account-info-card__verified-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.account-password-form{
  padding-top: 2px;
}

.account-password-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-password-field{
  position: relative;
}

.account-password-input{
  width: 100%;
  height: 64px;
  border: 1px solid #8c8c8c;
  border-radius: 12px;
  background: #efefef;
  color: #444;
  font-size: 18px;
  padding: 0 54px 0 22px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.account-password-input::placeholder{
  color: #4a4a4a;
  opacity: 1;
}

.account-password-input:focus,
.account-password-input:not(:placeholder-shown){
  border: 2px solid #666;
  background: #f5f5f5;
}

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

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

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

.account-password-submit-wrap{
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.account-password-submit{
  min-width: 278px;
  height: 55px;
  padding: 0 28px;
  border: 0;
  border-radius: 16px;
  background: #8aa79e;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.account-password-submit:hover{
  background: #1d4f47;
  transform: translateY(-1px);
}

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

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

  .account-info-grid,
  .account-password-grid{
    grid-template-columns: 1fr;
  }
}

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

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

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

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

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

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

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

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

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

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

  .account-section + .account-section{
    margin-top: 12px;
  }

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

  .account-section__body{
    padding: 10px;
  }

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

  .account-info-card{
    min-height: 62px;
    padding: 10px 14px;
    gap: 10px;
    border-radius: 12px;
  }

  .account-info-card__label{
    font-size: 13px;
  }

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

  .account-info-card__verified-icon{
    width: 18px;
    height: 18px;
  }

  .account-password-input{
    height: 56px;
    font-size: 15px;
    border-radius: 12px;
    padding: 0 48px 0 16px;
  }

  .account-password-toggle{
    right: 14px;
    width: 20px;
    height: 20px;
  }

  .account-password-submit-wrap{
    margin-top: 14px;
    justify-content: stretch;
  }

  .account-password-submit{
    width: 100%;
    min-width: 0;
    height: 58px;
    border-radius: 14px;
    font-size: 17px;
  }
}

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

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

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

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

  .account-section__body{
    padding: 8px;
  }

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

  .account-info-card{
    min-height: 58px;
    padding: 8px 12px;
    gap: 8px;
  }

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

  .account-info-card__value{
    font-size: 12px;
  }

  .account-password-input{
    height: 52px;
    font-size: 14px;
  }

  .account-password-submit{
    height: 54px;
    font-size: 15px;
  }
}

/* =========================================================
   ABOUT PAGE
========================================================= */

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

body.about-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f1;
}

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

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

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

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

.about-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(24,42,38,0.92);
}

.about-tabs-section{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-tabs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: #cfe0da;
  overflow: hidden;
}

.about-tab{
  min-height: 62px;
  padding: 0 36px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}

.about-tab:hover,
.about-tab.is-active{
  background: #24544b;
}

.about-content-wrap{
  background: transparent;
}

.about-panel{
  display: none;
  color: #ffffff;
  line-height: 1.55;
}

.about-panel.is-active{
  display: block;
}

.about-panel h2{
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  color: #ffffff;
}

.about-panel h3{
  margin: 22px 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: #fffefe;
}

.about-panel p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffff;
}

.about-faq-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-faq-item h3{
  margin-top: 0;
}

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

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

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

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

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

  .about-tabs{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-tab{
    min-height: 48px;
    padding: 0 12px;
    font-size: 11px;
    text-align: center;
  }

  .about-panel h2{
    font-size: 18px;
    margin-bottom: 14px;
  }

  .about-panel h3{
    font-size: 14px;
    margin: 18px 0 8px;
  }

  .about-panel p{
    font-size: 14px;
    margin-bottom: 14px;
  }

  .about-faq-list{
    gap: 14px;
  }
}

@media (max-width: 480px){
  .about-tab{
    min-height: 44px;
    font-size: 10px;
    padding: 0 8px;
  }

  .about-panel h2{
    font-size: 16px;
  }

  .about-panel h3{
    font-size: 13px;
  }

  .about-panel p{
    font-size: 13px;
    line-height: 1.55;
  }
}

/* =========================================================
   HISTORY PAGE
========================================================= */

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

body.history-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f1;
}

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

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

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

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

.history-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(24,42,38,0.92);
}

.history-tabs-section{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.history-tab{
  min-height: 64px;
  border: 0;
  background: #ffffff;
  color: #1f332d;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding: 0 36px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.history-tab.is-active{
  background: #8aa79e;
}

.history-tab:hover{
  background: #7a7a7a;
}

.history-tab.is-active:hover{
  background: #8aa79e;
}

.history-panel{
  display: none;
}

.history-panel.is-active{
  display: block;
}

.history-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-row{
  background: #ffffff;
  min-height: 66px;
  display: grid;
  align-items: center;
  column-gap: 18px;
  padding: 0 26px;
}

.history-row--transaction{
  grid-template-columns: 145px 155px 320px minmax(260px, 1fr) 165px;
}

.history-row--play{
  grid-template-columns: 290px 120px minmax(180px, 1fr) 130px 165px;
}

.history-cell{
  min-width: 0;
}

.history-type,
.history-method,
.history-date,
.history-game-text,
.history-balance-label,
.history-balance-value,
.history-view-link{
  color: #f5f5f5;
}

.history-type{
  font-size: 14px;
  font-weight: 500;
}

.history-amount{
  font-size: 18px;
  font-weight: 700;
}

.history-amount--positive{
  color: #00A532;
}

.history-amount--negative{
  color: #c90f08;
}

.history-bonus-link{
  font-size: 15px;
  font-weight: 500;
  color: #d51a12;
  text-decoration: none;
  transition: opacity .18s ease;
}

.history-bonus-link:hover{
  opacity: .78;
}

.history-bonus-placeholder{
  display: block;
  width: 100%;
  min-height: 1px;
}

.history-method{
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.history-date{
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.history-cell--date{
  text-align: right;
}

.history-cell--balance{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.history-balance-label{
  font-size: 14px;
  font-weight: 500;
}

.history-balance-value{
  font-size: 18px;
  font-weight: 500;
}

.history-result{
  font-size: 24px;
  font-weight: 700;
}

.history-result--lose{
  color: #c90f08;
}

.history-result--win{
  color: #00A532;
}

.history-game-text{
  font-size: 14px;
  font-weight: 500;
}

.history-view-link{
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .18s ease;
}

.history-view-link:hover{
  opacity: .7;
}

@media (max-width: 1199px){
  .history-row--transaction{
    grid-template-columns: 120px 120px 240px minmax(220px, 1fr) 150px;
    column-gap: 14px;
    padding: 0 18px;
  }

  .history-row--play{
    grid-template-columns: 220px 100px minmax(180px, 1fr) 120px 150px;
    column-gap: 14px;
    padding: 0 18px;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-balance-label,
  .history-balance-value{
    font-size: 16px;
  }

  .history-result{
    font-size: 20px;
  }

  .history-method,
  .history-date,
  .history-game-text,
  .history-view-link{
    font-size: 15px;
  }
}

@media (max-width: 991px){
  .history-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
  }

  .history-row--transaction,
  .history-row--play{
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 16px;
  }

  .history-cell--date{
    text-align: left;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-method,
  .history-date,
  .history-balance-label,
  .history-balance-value,
  .history-game-text,
  .history-view-link{
    font-size: 15px;
  }

  .history-result{
    font-size: 22px;
  }
}

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

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

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

  .history-tabs-section{
    gap: 16px;
  }

  .history-tab{
    min-height: 52px;
    padding: 0 14px;
    font-size: 11px;
  }

  .history-list{
    gap: 8px;
  }

  .history-row{
    min-height: 0;
    padding: 14px;
    row-gap: 8px;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-method,
  .history-date,
  .history-balance-label,
  .history-balance-value,
  .history-game-text,
  .history-view-link{
    font-size: 14px;
  }

  .history-result{
    font-size: 20px;
  }

  .history-cell--balance{
    gap: 8px;
  }
}

@media (max-width: 480px){
  .history-tab{
    min-height: 48px;
    padding: 0 10px;
    font-size: 10px;
  }

  .history-row{
    padding: 12px;
  }

  .history-type,
  .history-amount,
  .history-bonus-link,
  .history-method,
  .history-date,
  .history-balance-label,
  .history-balance-value,
  .history-game-text,
  .history-view-link{
    font-size: 13px;
  }

  .history-result{
    font-size: 18px;
  }
}


/* =========================================================
   PROMOTION PAGE
========================================================= */

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

body.promotion-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f1;
}

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

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

.promotion-header{
  margin-bottom: 22px;
}

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

.promotion-heading p{
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(24,42,38,0.92);
}

.promotion-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promotion-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 102px;
  gap: 8px;
  align-items: stretch;
}

.promotion-card__media{
  position: relative;
  min-height: 142px;
  padding: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  display: block;
}

.promotion-card__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promotion-card__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
}

.promotion-card__text{
  position: absolute;
  left: 42px;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  z-index: 2;
}

.promotion-card__title{
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}

.promotion-card__desc{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}

.promotion-card__action{
  background: #ffffff;
  color: #1f332d;
  border-radius: 22px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .18s ease, transform .18s ease;
  text-decoration: none;
}

.promotion-card__media:hover,
.promotion-card__action:hover{
  transform: translateY(-1px);
}

.promotion-card__action:hover{
  background: #1a2033;
}

@media (max-width: 991px){
  .promotion-card{
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .promotion-card__media{
    min-height: 128px;
  }

  .promotion-card__text{
    left: 26px;
    right: 26px;
  }

  .promotion-card__title{
    font-size: 18px;
  }

  .promotion-card__desc{
    font-size: 14px;
  }

  .promotion-card__action{
    font-size: 13px;
    border-radius: 18px;
  }
}

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

  .promotion-header{
    margin-bottom: 18px;
  }

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

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

  .promotion-list{
    gap: 8px;
  }

  .promotion-card{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .promotion-card__media{
    min-height: 126px;
  }

  .promotion-card__text{
    left: 18px;
    right: 18px;
    gap: 6px;
  }

  .promotion-card__title{
    font-size: 16px;
  }

  .promotion-card__desc{
    font-size: 12px;
  }

  .promotion-card__action{
    min-height: 48px;
    border-radius: 14px;
    flex-direction: row;
    gap: 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px){
  .promotion-card__media{
    min-height: 112px;
  }

  .promotion-card__title{
    font-size: 14px;
  }

  .promotion-card__desc{
    font-size: 11px;
  }

  .promotion-card__action{
    min-height: 44px;
    font-size: 11px;
    border-radius: 12px;
  }
}

/* =========================================================
   PROMO DETAIL PAGE
========================================================= */

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

body.promo-detail-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f1;
}

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

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

.promo-detail-header{
  margin-bottom: 20px;
}

.promo-detail-heading h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  color: #fdfdfd;
}

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

.promo-detail-hero{
  margin-bottom: 18px;
  overflow: hidden;
  background: #d3d3d3;
}

.promo-detail-hero__image{
  width: 100%;
  display: block;
  object-fit: cover;
}

.promo-detail-content{
  background: #ffffff;
  padding: 22px 24px;
  color: #eeeeee;
}

.promo-detail-content h2{
  margin: 24px 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #ececec;
}

.promo-detail-content h2:first-child{
  margin-top: 0;
}

.promo-detail-content p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #ececec;
}

.promo-detail-back{
  margin-top: 18px;
}

.promo-detail-back__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 52px;
  padding: 0 20px;
  background: #2a5d54;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .18s ease, transform .18s ease;
}

.promo-detail-back__link:hover{
  background: #1d4f47;
  transform: translateY(-1px);
}

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

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

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

  .promo-detail-hero{
    margin-bottom: 14px;
  }

  .promo-detail-content{
    padding: 16px;
  }

  .promo-detail-content h2{
    font-size: 16px;
    margin: 20px 0 8px;
  }

  .promo-detail-content p{
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .promo-detail-back{
    margin-top: 14px;
  }

  .promo-detail-back__link{
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 12px;
  }
}

@media (max-width: 480px){
  .promo-detail-heading h1{
    font-size: 20px;
  }

  .promo-detail-content p{
    font-size: 13px;
  }
}
/* =========================================================
   SIGN UP - PHONE VERIFICATION   [2026-08-15]
   회원가입 폼의 인증번호 입력 행 / 인증 완료 표시 / 잠긴 버튼
========================================================= */

/*
 * hidden 속성이 실제로 먹도록 합니다.
 * .auth-grid 는 display:grid, .auth-status 는 display:block 이라
 * 클래스 쪽 display 가 [hidden] 의 기본 display:none 을 덮어씁니다.
 * (JS 가 .hidden = true 로 감춰도 화면에 그대로 남던 원인)
 */
.auth-grid[hidden],
.auth-status[hidden],
.auth-field[hidden],
.auth-captcha[hidden]{
  display: none !important;
}

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

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

.auth-send.is-done{
  background: #10b316;
  color: #fff;
}

.auth-send:disabled,
.auth-submit:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* =========================================================
   푸터 "LEGAL & INFO" 드롭다운        [2026-08-24]
   ---------------------------------------------------------
   정책·안내 페이지 5개(개인정보 / 버그바운티 / 수수료 /
   베팅규정 / 공정성)를 푸터에 넣어야 하는데, 한 줄에 링크를
   열 개 늘어놓으면 좁은 화면에서 두세 줄로 접힌다.
   그래서 하나로 묶었다.

   <details>/<summary> 를 쓴다. 자바스크립트가 없어도 열린다.
   스크립트가 늦거나 막혀도 링크는 항상 눌린다.
========================================================= */
.footer-more {
  position: relative;
  display: inline-block;
}

/* summary 기본 삼각형 제거 (브라우저마다 방식이 다르다) */
.footer-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.footer-more > summary::-webkit-details-marker { display: none; }
.footer-more > summary::marker { content: ""; }

.footer-more__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .18s ease;
}
.footer-more[open] .footer-more__caret { transform: rotate(180deg); }

.footer-more__panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);     /* 푸터라서 위로 연다 */
  z-index: 60;

  min-width: 232px;
  padding: 6px;
  border: 1px solid rgba(20,40,35,.12);
  border-radius: 10px;
  background: #f7faf9;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.footer-more__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: #d8dbe6;
  font-size: .82rem;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}
.footer-more__panel a:hover {
  background: rgba(20,40,35,.05);
  color: #fff;
}

/* 화면 가장자리에서 패널이 잘리지 않도록 */
@media (max-width: 520px) {
  .footer-more__panel {
    left: auto; right: 0;
    transform: none;
    min-width: 200px;
  }
  .footer-more__panel a { white-space: normal; }
}

/* =========================================================
   푸터 라이선스 표기        [2026-08-24]
   ---------------------------------------------------------
   Anjouan 의 Website Compliance 1.1 이 요구하는 항목이다.
   라이선스 번호 / 법인명 / 등록번호 / 등기주소 / 규제기관 링크가
   사이트 전체 푸터에 보여야 한다.

   작게 넣되 읽을 수는 있어야 한다. 규제 표기를 회색 4px 로 숨겨
   두는 사이트가 많은데, 그건 "prominently display" 를 지킨 것이
   아니다.
========================================================= */
.footer-licence {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-licence__no {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .02em;
  color: #46564f;
}

.footer-licence__reg {
  font-size: .70rem;
  line-height: 1.5;
  color: #6f8d84;
}

.footer-licence__reg a { color: #84b0a4; text-decoration: underline; }
.footer-licence__reg a:hover { color: #fff; }

.footer-licence__age {
  font-size: .72rem;
  font-weight: 600;
  color: #00a868;
}

/* 모바일 푸터 */
.footer-mobile-licence {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0 10px;
  margin-top: 8px;
  border-top: 1px solid rgba(20,40,35,.12);
  text-align: center;
}

.footer-mobile-licence span {
  font-size: .70rem;
  line-height: 1.55;
  color: #6f8d84;
  word-break: break-word;     /* 긴 등기주소가 화면을 옆으로 밀지 않게 */
}

.footer-mobile-licence .footer-licence__no {
  font-size: .76rem;
  color: #46564f;
}

.footer-mobile-licence a { color: #84b0a4; text-decoration: underline; }