/* ==========================================
   GSOLUTION CASINO - MAIN STYLESHEET
   원본: https://a.g-sol.org
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root {
  --gold: #c9a84c;
  --gold-light: #ffd989;
  --gold-dark: #8a6a1f;
  --yellow: #ffdd3e;
  --orange: #ff8b2d;
  --white-yellow: #ffd989;
  --red: #fe744f;
  --bg-dark: #0c0603;
  --bg-brown: #1a0e05;
  --bg-card: #1c1008;
  --width-max: 1580px;
  --font-ff-body: 'Noto Sans KR', sans-serif;
  --font-ff-heading: 'Noto Sans KR', sans-serif;
  --font-ff-stylish: 'Noto Sans KR', sans-serif;
  --font-fw-heading: 700;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll !important;
  scrollbar-width: thin;
  scrollbar-color: #c9a84c #000;
}
html::-webkit-scrollbar { width: 10px; background: #000; border-left: solid 1px rgba(255,255,255,0.1); }
html::-webkit-scrollbar-thumb { background: linear-gradient(#ffda91,#ffba49); border: solid 2px #000; border-radius: 5px; }

body {
  height: 100%;
  padding-right: 0 !important;
  text-align: center;
  background-color: #0c0603;
  background-attachment: fixed;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-ff-body);
  line-height: 1.5;
  transition: 0.23s;
}
body.modal-open { overflow: hidden; }

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
button, a, input, select, textarea, span { outline: none !important; transition: 0.3s; }
button { padding: 0; word-break: keep-all; font-family: var(--font-ff-stylish); font-weight: bold; cursor: pointer; }
img { display: block; max-width: 100%; }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.col-md-6 { width: 50%; padding: 0 8px; }
.mt-4 { margin-top: 24px; }
.text-danger { color: #fe744f; }

/* ==========================================
   LAYOUT UTILS
   ========================================== */
.wrapper { width: 100%; min-height: 100%; position: relative; overflow: hidden; }

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1200px) {
  .container { max-width: var(--width-max); }
  .main-nav-jc { flex-wrap: unset; }
}

.dflex-ac-jc {
  display: flex !important;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.dflex-ac-js {
  display: flex !important;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ml-auto { margin-left: auto; }
.h-100 { height: 100%; }
.gap-5 { gap: 5px; }
.mr-2 { margin-right: 0.5rem; }
.w-full { width: 100%; }
.h-auto { height: auto; }

/* w-ba base — 원본 동일 */
.w-ba { position: relative; z-index: 1; }
.w-ba:before, .w-ba:after {
  content: "";
  pointer-events: none;
  z-index: -1;
  position: absolute;
}

/* ==========================================
   BANNER SECTION — 원본 완전 일치
   ========================================== */
.banner-section {
  height: 476px;
  background-image: url("https://a.g-sol.org/assets/images/content/bg/banner-bg.jpg");
  background-size: cover;
  background-position: top center;
  position: relative;
  z-index: 1;
  padding: 50px 0 0;
  /* overflow: visible — 원본과 동일: 내용이 아래 header 영역과 겹침 */
  overflow: visible;
}
.banner-section:before {
  content: "";
  position: absolute;
  width: 100%; height: 100%; left: 0; top: 0;
  background-image: url("https://a.g-sol.org/assets/images/content/bg/stars-bg.png");
  background-position: bottom center;
  animation: starsAnim 0.7s ease infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes starsAnim {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* container — 원본: height:100%, dflex-ac-jc (flex center) */
.banner-section .container {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* center — 원본 .center.w-100: 텍스트 중앙 정렬 */
.banner-section .center {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 51;
  overflow: visible;
}

/* logo-wrapper — 원본: 450x450, 음수마진으로 공간 절약 */
.logo-wrapper {
  position: relative;
  display: inline-block;
  width: 450px;
  height: 450px;
  transform: translateY(10px);
  margin-top: -80px;
  margin-bottom: -120px;
  z-index: 2;
}
.top_logo, .site-logo {
  width: 100%;
  height: 73%;
  object-fit: contain;
  filter: drop-shadow(0px 6px 8px #000000cc);
}

/* banner-carousel — 원본 구조 */
.banner-section .banner-carousel {
  position: relative;
  z-index: 51;
  margin: 20px auto 0;
  width: 100%;
  max-width: 730px;
}
.banner-section .carousel-inner { position: relative; width: 100%; }
.banner-section .carousel-item { display: none; width: 100%; }
.banner-section .carousel-item.active { display: block; width: 100%; }

/* text-panel — 원본 스타일 */
.banner-section .text-panel {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 730px;
  margin: 0 auto 25px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  background-color: rgba(0,0,0,0.57);
  padding: 24px 16px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, black 25%, black 75%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, black 25%, black 75%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
  position: relative;
}
.banner-section .text-panel h1 {
  color: #f4efd4;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
  animation: bannerText01 6s ease 1 forwards;
  opacity: 0;
}
.banner-section .text-panel h2 {
  font-size: 16px;
  color: #e8a31e;
  line-height: 1.2;
  margin-bottom: 0;
  opacity: 0;
}
.banner-section .text-panel h2:nth-child(2) {
  animation: bannerText02 6s ease 1 forwards;
}
.banner-section .text-panel h2:nth-child(3) {
  animation: bannerText03 6s ease 1 forwards;
}
@keyframes bannerText01 {
  0%   { opacity: 0; transform: scale(0); }
  10%  { opacity: 1; transform: scale(1.1); }
  20%  { opacity: 1; transform: scale(1); }
  95%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes bannerText02 {
  0%   { opacity: 0; transform: scale(0); }
  3%   { opacity: 0; transform: scale(0); }
  13%  { opacity: 1; transform: scale(1.1); }
  23%  { opacity: 1; transform: scale(1); }
  95%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes bannerText03 {
  0%   { opacity: 0; transform: scale(0); }
  6%   { opacity: 0; transform: scale(0); }
  16%  { opacity: 1; transform: scale(1.1); }
  26%  { opacity: 1; transform: scale(1); }
  95%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}

/* carousel-indicators */
.carousel-indicators {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}
.carousel-indicators li {
  width: 30px; height: 4px;
  border-radius: 3px;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: 0.3s;
}
.carousel-indicators li:hover { background-color: rgba(255,255,255,1); }
.carousel-indicators li.active { width: 40px; height: 6px; background-color: #de4628; }

/* ==========================================
   BANNER BACKGROUND — 원본 완전 일치
   ========================================== */
.banner-background {
  height: 100%;
  width: 100vw;
  max-width: var(--width-max);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
  z-index: 9;
}
.banner-background img {
  position: absolute;
  left: 0;
  bottom: 0;
}
.banner-background div {
  position: absolute;
  bottom: 0;
}
.banner-background div img {
  width: 100%;
  position: relative;
}
.banner-background .light {
  width: 32.76%;
  left: -20%;
  bottom: -15%;
  animation: bannerLightAnim 15s ease infinite;
}
@keyframes bannerLightAnim {
  0%   { opacity: 0; }
  8%   { opacity: 0; }
  13%  { opacity: 1; }
  97%  { opacity: 1; }
  100% { opacity: 0; }
}
.banner-background .light img { animation: bannerLightImg 1s ease infinite; }
@keyframes bannerLightImg {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}
.banner-background .glow-right {
  width: 38.53%;
  right: 5%;
  left: auto;
  animation: bannerLightAnim 15s ease infinite;
}
.banner-background .glow-right img { animation: bannerLightImg 1s ease infinite; }
.banner-background .candy-slot {
  width: 18%;
  right: 19%;
  bottom: -5%;
  left: auto;
  z-index: 99;
  animation: candySlotAnim 15s ease infinite;
}
@keyframes candySlotAnim {
  0%   { opacity: 0; transform: translateX(15%); }
  8%   { opacity: 1; transform: translateX(0); }
  95%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
.banner-background .money-slot {
  width: 27%;
  right: 0;
  left: auto;
  animation: moneySlotAnim 15s ease infinite;
}
@keyframes moneySlotAnim {
  0%   { opacity: 0; transform: translateX(-15%); }
  8%   { opacity: 1; transform: translateX(0); }
  95%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
.banner-background .glow-left {
  width: 38.34%;
  left: 4%;
  animation: bannerLightAnim 15s ease infinite;
}
.banner-background .glow-left img { animation: bannerLightImg 1s ease infinite; }
.banner-background .casino-items {
  width: 38.53%;
  left: -4.5%;
  transform-origin: bottom center;
  animation: casinoItemAnim 15s ease infinite;
}
@keyframes casinoItemAnim {
  0%   { opacity: 0; transform: scale(0.5); }
  4%   { opacity: 0; transform: scale(0.5); }
  10%  { opacity: 1; transform: scale(1); }
  95%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.banner-background .girl-left {
  width: 20%;
  left: -3%;
  animation: girlLeftAnim 15s ease infinite;
}
@keyframes girlLeftAnim {
  0%   { opacity: 0; transform: translateX(15%); }
  2%   { opacity: 0; transform: translateX(15%); }
  10%  { opacity: 1; transform: translateX(0); }
  95%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
.banner-background .girl-center {
  width: 18.5%;
  left: 10%;
  animation: girlCenterAnim 15s ease infinite;
}
@keyframes girlCenterAnim {
  0%   { opacity: 0; transform: translateY(15%); }
  6%   { opacity: 1; transform: translateY(0); }
  95%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.banner-background .girl-right {
  width: 22.5%;
  left: 17%;
  animation: girlRightAnim 15s ease infinite;
}
@keyframes girlRightAnim {
  0%   { opacity: 0; transform: translateX(-15%); }
  2%   { opacity: 0; transform: translateX(-15%); }
  10%  { opacity: 1; transform: translateX(0); }
  95%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

/* ==========================================
   HEADER SECTION
   ========================================== */
.header-section {
  width: 100%;
  background-image: linear-gradient(#261e12, #17110b);
  border-top: solid 1px #614822;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
  position: sticky;
  top: 0;
  z-index: 99;
  /* 원본: padding-top:4px, padding-bottom:5px */
  padding: 4px 0 5px;
}
/* header container — 원본: padding:0 0 12px, gap:8px, flex-wrap:wrap */
.header-section .container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  justify-content: center;
  padding: 0 0 12px;
  gap: 8px;
}
/* header top/bottom 골드 바 */
.header-section:before,
.header-section:after {
  width: 100%; height: 7px; left: 0; content: "";
  pointer-events: none; position: absolute;
}
.header-section:before { top: 0; border-bottom: solid 1px #3d301f; }
.header-section:after  { height: 5px; bottom: 0; background-image: linear-gradient(#9f6c40,#4f3319); z-index: 2; }

/* ==========================================
   MAIN MENU (NAV)
   ========================================== */
.bs-ul {
  list-style: none; margin-bottom: 0;
  display: flex; padding: 0; flex-direction: row;
}
.bs-ul li { list-style: none; height: 100%; }
/* 데스크탑 기본: 전체 폭 한 행, 7개 균등 분배 */
.main-menu {
  flex: 0 0 100%;
  width: 100%;
  height: 81px;
  display: flex; flex-direction: row;
  align-items: stretch; margin: 4px 0 6px 0; gap: 4px;
  flex-wrap: nowrap;
}
.main-menu li { height: 100%; display: grid; flex: 1; }
.main-menu li a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,1), 0 0 8px rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  word-break: keep-all; gap: 10px; height: 100%;
  padding: 20px 0px 16px;
  border-radius: 6px;
  position: relative; z-index: 1; font-weight: 400;
  transition: 0.3s; min-width: 80px;
}
/* nav 아이템 배경 */
.main-menu li a:before {
  content: "";
  width: 100%; height: calc(100% - 7px);
  left: 0; bottom: 0;
  background-image: linear-gradient(#afa462, #6a5128, #372b17);
  transition: 0.3s; opacity: 0.8;
  position: absolute; z-index: -1;
}
.main-menu li a:hover:before {
  opacity: 1; filter: brightness(1.45);
  box-shadow: inset 0px 8px 16px -4px #ffeeb5;
}
.main-menu li a:hover { color: #ffffff; }
.main-menu li a i {
  color: var(--white-yellow); opacity: 1; font-size: 1.2rem; line-height: 0;
}
.main-menu li a span {
  font-family: var(--font-ff-heading); font-size: 16px; font-weight: 400; line-height: 100%;
  display: block;
}

/* ==========================================
   BAL-CONTAINER
   ========================================== */
/* 데스크탑: 전체폭 두 번째 행, display:block (원본과 동일) */
.bal-container {
  flex: 0 0 100%;
  width: 100%;
  min-width: unset;
  margin: 0;
  display: block;
}

/* ==========================================
   BEFORE LOGIN
   ========================================== */
.before-login { display: none; }
.before-login.active { display: block; }
.before-login .desktop button {
  width: fit-content; min-width: 100px;
  height: 40px; padding: 0 8px; border-radius: 5px;
}

/* ==========================================
   AFTER LOGIN — sidebar
   ========================================== */
.after-login { display: none; }
.after-login.active { display: block; }

.sidebar { width: 500px; }
.sidebar p { margin: 0; }
.sidebar .al-inner {
  width: 100%; display: flex; flex-wrap: nowrap;
  align-items: center; justify-content: flex-start;
  position: relative;
}
.sidebar .al-cont {
  width: calc(25% - 4px); height: 30px;
  float: left; display: flex;
  align-items: center; justify-content: flex-start;
  position: relative; margin: 2px 2px;
  color: #fff; text-decoration: none; cursor: pointer;
}
.sidebar .al-cont .labels {
  width: 30px; height: 30px;
  position: absolute; left: 0; top: 0;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background-image: linear-gradient(#afa462, #6a5128, #372b17);
  transition: 0.3s; z-index: 1;
}
.sidebar .al-cont .labels:before {
  content: "";
  width: calc(100% - 4px); height: calc(100% - 4px);
  background-color: #341e08;
  position: absolute; border-radius: 50%; z-index: -1;
}
.sidebar .al-cont .labels i { font-size: 13px; color: var(--white-yellow); line-height: 0; }
.sidebar .al-cont .info {
  width: 100%; height: 100%;
  float: left; position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 0 0 38px;
  color: #fff; font-size: 14px; white-space: nowrap; transition: 0.3s;
}
.sidebar .al-cont .info .balance { font-weight: 800; font-size: 15px; }
.sidebar .al-cont:hover .info { color: var(--yellow); }
.message-count { color: #ff9a21; font-size: 11px; margin-left: 6px; line-height: 1; }

.sidebar .btn-group {
  border: none; background-color: transparent;
  background-image: none; padding: 0; box-shadow: none;
}
.sidebar .btn-group button {
  width: calc(100% - 1px); margin: 0 1px;
}

/* ==========================================
   BUTTONS — 원본 완전 일치
   ========================================== */
/* btn-yellow */
.btn-yellow {
  color: rgba(0,0,0,0.75);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  background-color: #ffc657;
  background-image: linear-gradient(#ffce6b, #ffbd3f);
  border: solid 1px #ffd273;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(29,22,14,0.51);
  font-weight: bold;
  position: relative; z-index: 1;
  padding: 0 16px; height: 40px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.btn-yellow:before,
.btn-red:before,
.btn-gold:before {
  content: ""; width: 100%; height: 100%;
  position: absolute; left: 0; top: 0;
  transition: 0.3s; z-index: -1; border-radius: 4px;
  border: solid 1px rgba(29,22,14,0.51);
  opacity: 0;
}
.btn-yellow:before { background-image: linear-gradient(#ffac66, #d77421); }
.btn-yellow:hover { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.5); background-color: #ffac66; border-color: #ffa04f; box-shadow: inset 0 0 0 1px rgba(29,22,14,0.51), 0 0 8px rgba(255,255,255,0.4); }
.btn-yellow:hover:before { opacity: 1; }

/* btn-red */
.btn-red {
  color: #ffffff;
  background-color: #be462a;
  background-image: linear-gradient(#e3603b, #a3321e);
  border: solid 1px #d85c38;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(29,22,14,0.51);
  text-shadow: 0 1px 0 rgba(0,0,0,1);
  position: relative; z-index: 1;
  padding: 0 16px; height: 40px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.btn-red:before { background-image: linear-gradient(#7188ff, #3243a3); }
.btn-red:hover { background-color: #7188ff; border-color: #7188ff; text-shadow: 0 1px 0 rgba(0,0,0,0.5); box-shadow: inset 0 0 0 1px rgba(29,22,14,0.51), 0 0 8px rgba(255,255,255,0.4); }
.btn-red:hover:before { opacity: 1; }
.btn-yellow:hover:before,
.btn-red:hover:before,
.btn-gold:hover:before { opacity: 1; }

/* btn-gold */
.btn-gold {
  color: rgba(0,0,0,0.75);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  background-color: #dece8f;
  background-image: linear-gradient(#dece8f, #998643);
  border: solid 1px #dece8f;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(29,22,14,0.51);
  font-weight: bold;
  position: relative; z-index: 1;
  padding: 0 16px; height: 40px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.btn-gold:before { background-image: linear-gradient(#f6eedf, #98948f); }
.btn-gold:hover { background-color: #f6eedf; border-color: #f6eedf; box-shadow: inset 0 0 0 1px rgba(29,22,14,0.51), 0 0 10px rgba(255,255,255,0.3); }

.bt_op_1 { position: relative; top: 3px; }
.ico_op_1 { font-size: 13px; line-height: 0px; }

/* ==========================================
   PAGE CONTENT — 원본: background-image url
   ========================================== */
.page-content {
  background-image: url("https://a.g-sol.org/assets/images/content/bg/main-bg.jpg");
  background-color: #442a14;
  background-position: top center;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding: 0 0 30px;
}
/* 원본: toggle-glow.png 오버레이 */
.page-content:before {
  width: 100%; height: 100%; top: 0; left: 0;
  background-image: url("https://a.g-sol.org/assets/images/content/bg/toggle-glow.png");
  background-position: top center;
  background-repeat: no-repeat;
  animation: toggleGLow 2s ease infinite;
}
@keyframes toggleGLow {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ==========================================
   TOGGLE SECTION — 원본 구조 (btn-panel, item-inner)
   ========================================== */
.toggle-section { padding: 30px 0 15px; }
.toggle-section .container {
  width: 100%;
  padding: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 1rem;
}
.toggle-btn {
  width: calc(100% / 3 - 6px);
  height: 80px;
  background-color: transparent;
  border: none;
  color: var(--white-yellow);
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  position: relative;
}
.toggle-btn:hover { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,1), 0 0 15px rgba(255,255,255,0.25); }
.toggle-btn.active { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,1), 0 0 15px rgba(255,255,255,0.4); }

/* btn-panel — 원본 배경 */
.toggle-btn .btn-panel {
  width: 100%; height: 100%;
  border: solid 1px #614822;
  border-radius: 8px;
  background-image: linear-gradient(#261e12, #17110b);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
  flex-wrap: nowrap;
  font-family: var(--font-ff-stylish);
  font-weight: 600;
}
/* category 텍스트 */
.toggle-btn .btn-panel .category {
  position: absolute;
  right: 10%;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
/* btn-effect */
.toggle-btn .btn-panel .btn-effect {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
/* icon-panel */
.toggle-btn .icon-panel {
  width: clamp(80px, 13vw, 140px);
  height: clamp(80px, 13vw, 140px);
  position: relative; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toggle-btn .icon-panel:before {
  content: "";
  width: 110%; height: 110%;
  border-radius: 50%;
  background-image: radial-gradient(rgba(255,200,100,0.3), rgba(255,200,100,0), rgba(255,200,100,0));
  position: absolute;
}
.toggle-btn .icon-panel img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.4));
  transition: 0.3s;
}
.toggle-btn:hover .icon-panel img { transform: scale(0.85); }
.toggle-btn.active .icon-panel img { animation: toggleIconAnim 2s ease infinite; }
@keyframes toggleIconAnim {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* item-box, item-inner */
.btn-effect .item-box,
.btn-effect a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  position: relative;
}
.btn-effect .item-box:before,
.btn-effect a:before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 8px;
  background-image: linear-gradient(#ede29d, #715425, #2c200c);
  opacity: 0; transition: 0.3s;
}
.btn-effect .item-box:hover:before,
.btn-effect a:hover:before { opacity: 1; }

.btn-effect .item-box .item-inner,
.btn-effect a .item-inner {
  content: "";
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  word-break: keep-all;
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.5), inset 0 0 12px #201a11;
  background: #1d170f;
  border-radius: 8px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.035rem;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
  transition: 0.3s;
}
.btn-effect .item-box .item-inner:not(:hover) {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.75), inset 0 0 16px #291704;
}
.toggle-btn.active .btn-panel .btn-effect .item-box .item-inner {
  box-shadow: inset 0 0 8px rgba(255,255,255,0.65);
  background-image: linear-gradient(#ede29d, #715425, #2c200c);
}
.btn-effect .item-box .item-inner:hover {
  box-shadow: inset 0 0 8px rgba(255,255,255,0.65);
  background-color: #5e4827;
  transition: all 0.2s;
}

/* glass */
.btn-effect .glass,
.glass {
  opacity: 0.2;
  width: 100%; height: 100%;
  position: absolute; bottom: 0; left: 0;
  background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.1));
  transform-origin: top left;
  transform: rotate(0deg);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.toggle-btn:hover .btn-effect .glass,
.toggle-btn.active .btn-effect .glass { transform: rotate(-10deg); opacity: 1; }

/* ==========================================
   GAME SECTION & CARDS — sc-btn 원본 재현
   ========================================== */
.game-section { padding: 30px 0 50px; position: relative; z-index: 1; }
.game-grid {
  max-width: var(--width-max); margin: 0 auto;
  padding: 0 16px;
  display: flex; flex-wrap: wrap; justify-content: center;
}

/* sc-btn */
.sc-btn {
  width: 222px;
  background-color: #5e4322;
  background-image: linear-gradient(to bottom left, #f5cc7f, #96653b, #b79453);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,1);
  display: inline-block;
  margin: 0 7.5px 20px;
  padding: 5px 5px;
  position: relative;
  animation: scBtnAnim 0.8s ease 1 backwards;
  transform-origin: bottom center;
  cursor: pointer;
  transition: 0.3s;
  z-index: 1;
}
@keyframes scBtnAnim {
  0%   { opacity: 0; transform: translateY(50px) scale(0.5); }
  50%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sc-btn:hover {
  z-index: 2; margin-top: -20px; margin-bottom: -20px;
  box-shadow: 0 0 10px rgba(234,209,163,0.5);
}
/* sc-btn::before — 기본 내부 배경 */
.sc-btn:before {
  width: calc(100% - 2px); height: calc(100% - 2px);
  left: 0; right: 0; top: 0; bottom: 0; margin: auto;
  border-radius: 10px;
  background-image: linear-gradient(#97663c, #58341c);
  transition: 0.3s;
}
/* sc-btn::after — hover 밝은 골드 */
.sc-btn:after {
  width: calc(100% - 2px); height: calc(100% - 2px);
  left: 0; right: 0; top: 0; bottom: 0; margin: auto;
  border-radius: 10px;
  background-image: linear-gradient(#f3dbac, #ba975e);
  opacity: 0; transition: 0.3s;
}
.sc-btn:hover:after { opacity: 1; }

/* g-panel */
.g-panel {
  width: 100%; background-color: #301605;
  border-radius: 8px; padding: 8px 9px;
  overflow: hidden; transition: 0.3s; position: relative;
}
.sc-btn:hover .g-panel { background-color: #503624; }

/* g-panel::before — 라디얼 글로우 */
.g-panel:before {
  width: 120%; height: 50%; left: -10%; right: 0; bottom: -20%; margin: 0 auto;
  background-image: radial-gradient(rgba(108,74,40,0.8), rgba(149,112,76,0.15), rgba(108,74,40,0), rgba(108,74,40,0));
  position: absolute; content: ""; pointer-events: none;
}
/* g-panel::after — 인셋 그림자 */
.g-panel:after {
  width: 100%; height: 100%; left: 0; bottom: 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.75);
  border-radius: 8px; z-index: 4;
  position: absolute; content: ""; pointer-events: none;
}

/* g-cont */
.g-cont {
  background-color: #000; border-radius: 8px;
  overflow: hidden; position: relative;
  box-shadow: 0 1px 1px #6c4829; height: 180px;
  z-index: 1;
}
.sc-btn:hover .g-cont { box-shadow: 0 1px 1px #ae845f, 0 2px 5px rgba(0,0,0,0.5); }

/* g-img */
.g-cont .g-img { width: 100%; height: 100%; }
.g-img img {
  width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block;
}
.sc-btn:hover .g-img img { transform: scale(1.1); opacity: 0.5; }

/* play-btn — 원형 중앙 배치 */
.play-btn {
  width: 80px; height: 80px; border-radius: 80px;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 4;
  font-family: var(--font-ff-stylish); font-weight: 600; font-size: 13px;
  color: #1a0e00;
  background-color: #ffc657; background-image: linear-gradient(#ffce6b, #ffbd3f);
  border: solid 1px #ffd273;
  box-shadow: 0 0 16px rgba(235,210,160,0.725), 0 2px 4px rgba(0,0,0,0.75), inset 0 0 1px 1px rgba(30,20,15,0.45);
  opacity: 0; transform: scale(0); transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.play-btn:hover { box-shadow: 0 0 15px rgba(234,209,163,1), 0 1px 2px rgba(0,0,0,1), inset 0 0 0 1px rgba(29,22,14,0.51); }
.sc-btn:hover .play-btn { opacity: 1; transform: scale(1); }

/* g-info */
.g-info { position: relative; z-index: 3; margin: 5px 0 0; text-align: center; }
.g-title { width: 100%; }
.g-name {
  width: 100%; display: inline-block;
  color: #ffffff; font-size: 15px;
  font-family: var(--font-ff-stylish); font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* g-footer 구분선 */
.g-footer { position: relative; z-index: 3; }
.g-footer:before {
  content: ''; display: block; width: 0; height: 7px; margin: 0 auto;
  border-top: solid 1px rgba(255,255,255,0.15); border-bottom: solid 1px rgba(255,255,255,0.15);
  transition: 0.5s;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, black 25%, black 75%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 5%, black 25%, black 75%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
}
.sc-btn:hover .g-footer:before { width: 100%; }

/* sc-btn 내부 glass */
.g-panel .glass {
  width: 200%; height: 100%;
  position: absolute; bottom: 0; left: 0;
  background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.1));
  transform-origin: bottom left; transform: rotate(-48deg);
  z-index: 1; transition: 0.3s; pointer-events: none;
}
.sc-btn:hover .g-panel .glass { transform: rotate(0deg); opacity: 0; }

/* ==========================================
   FOOTER
   ========================================== */
.footer-section {
  background: linear-gradient(180deg, #0f0800 0%, #080400 100%);
  border-top: 1px solid rgba(201,168,76,0.2); padding: 40px 20px 30px;
}
.partner-logos {
  max-width: var(--width-max); margin: 0 auto 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 30px;
}
.partner-logos img { height: 26px; object-fit: contain; filter: brightness(0.75) grayscale(0.3); transition: all 0.3s; opacity: 0.7; }
.partner-logos img:hover { filter: brightness(1.1) grayscale(0); opacity: 1; }
.footer-copy { text-align: center; color: rgba(255,255,255,0.3); font-size: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07); }

/* ==========================================
   SCROLL TOP — 원본 scroll-top w-ba
   ========================================== */
.scroll-top {
  position: fixed; right: 20px; bottom: 30px; width: 44px; height: 44px; border-radius: 50%;
  background-image: linear-gradient(#96653b, #59351d);
  color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5); transition: all 0.3s; z-index: 200;
  opacity: 0; pointer-events: none; border: 1px solid rgba(201,168,76,0.6);
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { transform: translateY(-3px); }

/* ==========================================
   MODAL OVERLAY
   ========================================== */
#modalOverlay {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.82);
  z-index: 400; backdrop-filter: blur(4px);
}
#modalOverlay.show { display: block; }

/* ==========================================
   MODAL BASE — Bootstrap 4 스타일 재현
   ========================================== */
.modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 500; overflow-x: hidden; overflow-y: auto;
}
.modal.show { display: flex; align-items: center; justify-content: center; }

.modal-dialog {
  position: relative; width: auto;
  margin: 1.75rem auto; pointer-events: none;
}
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }

.modal-content {
  background-color: transparent;
  border: none; z-index: 1; border-radius: 0;
  position: relative; display: flex; flex-direction: column;
  pointer-events: all;
  width: 100%;
}

/* ===== MODAL HEADER — 원본: linear-gradient 골드 */
.modal-header {
  border: none;
  border-radius: 15px;
  background-image: linear-gradient(#ae9c48, #251b0d, #251b0d);
  padding: 1px;
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

/* ===== MODAL CLOSE BTN — 원본 X 버튼 */
.modal-close-btn {
  width: 32px; height: 32px;
  position: absolute; top: 4px; right: 4px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 4px 12px 4px 4px;
  border: none; cursor: pointer; z-index: 10;
}
.modal-close-btn:before,
.modal-close-btn:after {
  content: "";
  width: 2px; height: calc(100% - 20px);
  background-color: var(--white-yellow);
  left: 0; right: 0; top: 0; bottom: 0; margin: auto;
  transform: rotate(45deg); transition: 0.5s;
  position: absolute;
}
.modal-close-btn:after { transform: rotate(-45deg); }
.modal-close-btn:hover { background-color: rgba(255,220,140,0.5); }
.modal-close-btn:hover:before { transform: rotate(135deg); background-color: #dc431f; }
.modal-close-btn:hover:after { transform: rotate(-135deg); background-color: #dc431f; }

/* ===== MODAL HEAD PANEL ===== */
.modal-head-panel {
  width: 100%; min-height: fit-content;
  position: relative; margin: 20px auto 16px;
  padding: 0 24px;
}

/* ===== MODAL TITLE ===== */
.modal-title { margin: 0; }
.modal-title .title-panel {
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 10px;
}
.modal-title .title {
  display: inline-block;
  vertical-align: top; width: 100%;
  font-size: 24px;
  font-family: var(--font-ff-heading);
  font-weight: var(--font-fw-heading);
  color: #ffffff;
  text-align: center;
}
.modal-title .sub {
  width: 100%;
  display: inline-block;
  color: var(--white-yellow);
  font-size: 10px;
  letter-spacing: 5px;
  vertical-align: top;
  text-align: center;
}

/* ===== MODAL BODY ===== */
.modal-body {
  width: 100%;
  box-sizing: border-box;
  background-color: #251b0d;
  border-radius: 10px;
  margin: 5px 0 0;
  padding: 16px 16px 24px;
  min-height: 380px;
}
.modal-body.pt-md-5 { padding-top: 32px; }
.modal-body.pt-md-4 { padding-top: 28px; }
.modal-body.pt-3 { padding-top: 20px; }

/* ===== MODAL MENU ===== */
.modal-menu { width: 100%; margin-bottom: 16px; }

/* ===== MODAL 사이즈 ===== */
.loginModal .modal-dialog { max-width: 600px; width: 100%; }
.joinModal .modal-dialog { max-width: 780px; width: 100%; }
.depositModal .modal-dialog,
.withdrawModal .modal-dialog,
.noticeModal .modal-dialog,
.compModal .modal-dialog,
.customerModal .modal-dialog,
.boardModal .modal-dialog,
.depositHistModal .modal-dialog,
.withdrawHistModal .modal-dialog,
.myPageModal .modal-dialog { max-width: 620px; width: 100%; }

/* ==========================================
   FORM — 원본 form-container 재현
   ========================================== */
.form-container {
  width: 100%; max-width: 700px;
  display: inline-block;
}
.form-container .form-group {
  width: 100%; float: left; margin: 0 0 20px;
}
.form-container .form-group:last-child { margin: 0; }

/* labels */
.form-container .labels {
  width: 100%; text-align: left; float: left;
  margin: 0 0 6px;
  color: #ebdec3; font-size: 12px;
  position: relative; padding: 0 0 0 5px;
  z-index: 1;
}
.form-container .labels:before {
  content: ""; width: 2px; height: calc(100% - 4px);
  background-image: linear-gradient(#afa462, #6a5128, #372b17);
  left: 0; top: 2px; position: absolute;
}

/* infos */
.form-container .infos {
  width: 100%; float: right;
  display: flex; align-items: center;
}
.form-container .form-group .input-container {
  width: 100%; float: left; position: relative;
  display: flex; align-items: center; justify-content: flex-start;
}

/* input — 원본: background #473720 */
.form-container .form-group input,
.form-container .form-group textarea {
  width: 100%; height: 44px; float: left;
  color: #ffe4bf;
  background-color: #473720;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  border: none; border-radius: 8px;
  transition: 0.3s; padding: 0 15px;
  font-family: var(--font-ff-body); font-size: 14px;
}
.form-container .form-group textarea {
  height: auto; padding: 12px 15px; resize: vertical;
}
.form-container .form-group input:read-only { color: #ffe4bf; }
.form-container .form-group input::-webkit-input-placeholder,
.form-container .form-group textarea::placeholder { color: rgba(255,228,191,0.4); }
.form-container .form-group input:focus,
.form-container .form-group textarea:focus {
  background-color: #5c4a2a;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.4);
}
.text-violet { color: #ffe4bf !important; background-color: #473720 !important; }

/* btn-grp */
.form-container .form-group .infos .btn-grp {
  width: 100%; float: left;
}
.form-container .form-group .infos .btn-grp button {
  width: 16.66%; width: calc(16.66% - 4px);
  height: 38px; float: left; margin: 0 2px;
  background-color: #625747;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.5);
  border: none; border-radius: 5px; color: #ffffff;
  font-size: 12px; transition: 0.3s; padding: 0;
  position: relative; z-index: 1; overflow: hidden;
}
.form-container .form-group .infos .btn-grp button:hover { background-color: #917853; }
.form-container .form-group .infos .btn-grp button:first-child { margin-left: 0; width: calc(16.66% - 2px); }
.form-container .form-group .infos .btn-grp button:last-child { margin-right: 0; width: calc(16.66% - 2px); background-color: #a34141; }
.form-container .form-group .infos .btn-grp button:last-child:hover { background-color: #ff4d4d; }

/* form-footer */
.form-footer {
  flex-wrap: nowrap; width: 100%;
  margin: 0 auto;
  margin-top: clamp(16px, 3vw, 32px);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.form-footer button {
  width: 180px; height: 50px; margin: 0 5px;
}
.form-footer button:first-child { margin-left: 0; }
.form-footer button:last-child { margin-right: 0; }

/* ==========================================
   BS-TABLE (공지, 내역 테이블)
   ========================================== */
.notice-board-section { overflow: auto; width: 100%; }
.bs-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
}
.bs-table thead th {
  height: 50px; color: #fff; font-size: 12px;
  text-align: center;
  background-color: rgba(0,0,0,0.25);
}
.bs-table thead th:first-child { border-radius: 8px 0 0 0; padding-left: 6px; }
.bs-table thead th:last-child { border-radius: 0 8px 0 0; }
.bs-table tr { cursor: pointer; }
.bs-table tr td {
  height: 50px;
  color: #fff; font-size: 12px;
  text-align: center; padding: 1px;
  transition: 0.3s;
  background-color: rgba(255,255,255,0.08);
  border-bottom: solid 1px rgba(0,0,0,0.25);
  border-top: solid 1px rgba(255,255,255,0.05);
}
.bs-table tr:last-child td:first-child { border-radius: 0 0 0 8px; }
.bs-table tr:last-child td:last-child { border-radius: 0 0 8px 0; }
.bs-table tr:hover td { background-color: rgba(255,255,255,0.05); }
.bs-table tr.active td { background-color: rgba(255,255,255,0.05); }

/* 내역 없을 때 */
.none-article {
  text-align: center !important;
  color: rgba(255,255,255,0.3) !important;
  padding: 40px 0 !important;
  font-size: 14px;
}

/* pagination */
.pagination-area { padding: 16px 0 0; text-align: center; }

/* ==========================================
   HEARTBEAT ANIMATION
   ========================================== */
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite both; }
@keyframes heartbeat {
  from { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; }
  10%  { transform: scale(0.91); animation-timing-function: ease-in; }
  17%  { transform: scale(0.98); animation-timing-function: ease-out; }
  33%  { transform: scale(0.87); animation-timing-function: ease-in; }
  45%  { transform: scale(1); animation-timing-function: ease-out; }
}

/* ==========================================
   ALERT
   ========================================== */
#gsAlert {
  position: fixed; top: 90px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9999; opacity: 0; transition: all 0.3s ease;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* 1300px 이하 — 원본 mobile.css와 동일:
   배너 높이 280px로 줄이고 container를 absolute로 오버레이 */
@media (max-width: 1300px) {
  .banner-section { padding: 0; height: 280px !important; }
  .banner-background { height: 280px; }
  .banner-section .container {
    position: absolute;
    top: 0; left: 0; right: 0;
    margin: auto;
    padding: 0;
    overflow: visible;
  }
  .banner-carousel { margin-top: 1.5vw; }
  .banner-section .text-panel { padding: 1.5% 15px; margin-bottom: 1.25%; }
  /* 원본 mobile.css: container max-width:95% → 1280*0.95=1216px */
  .container { max-width: 95%; }
  /* 원본: header container padding:0 0 12px, gap:8px */
  .header-section .container { padding: 0 0 12px; gap: 8px; flex-wrap: wrap; }
}
@media (max-width: 1200px) {
  .sc-btn { width: 210px; }
  .header-section { padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 900px) {
  /* 원본 mobile.css 900px: container max-width는 unset 아닌, 1300px 규칙(95%)를 유지 */
  .banner-background .girl-left { width: 22%; }
  .banner-background .girl-right { width: 24%; }
  .banner-background .girl-center { width: 20%; }
  .banner-background .casino-items { width: 35%; }
  /* text-panel 텍스트 크기 모바일 */
  .banner-carousel .text-panel { margin-bottom: 1.75%; }
  .banner-carousel .text-panel h1 { font-size: clamp(14px, 3.4vw, 22px); }
  .banner-carousel .text-panel h2 { font-size: clamp(11px, 3vw, 18px); }
  /* 900px: header 2줄 배치 */
  .header-section { min-height: fit-content; }
  .header-section .container { flex-wrap: wrap; max-width: unset !important; padding-left: 0; padding-right: 0; }
  /* main-menu: 2줄 wrap, height auto */
  .main-menu { flex-wrap: wrap; height: auto; margin: 0 auto; padding: 8px; gap: 6px; width: 100%; max-width: unset; }
  .main-menu li { height: auto; flex: none; }
  .bal-container { width: 100%; padding: 10px 8px; }
  /* toggle section — 원본 900px */
  .toggle-section .container { flex-wrap: nowrap !important; gap: 0.4rem !important; padding: 0 0.4rem; }
  .toggle-btn { min-height: 64px; height: fit-content; font-size: 18px; }
  .toggle-btn .btn-panel {
    flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 0.725rem 0;
  }
  .toggle-btn .icon-panel { margin-top: -2rem; }
  .toggle-btn .btn-panel .category { position: initial; right: unset; text-align: center; white-space: normal; }
  /* sc-btn */
  .sc-btn { width: calc(25% - 15px); }
  .sc-btn:hover { margin-top: -8px; margin-bottom: -8px; }
  .g-cont { height: 120px; }
  .col-md-6 { width: 100%; }
  .before-login .desktop { width: 100%; }
  .before-login .desktop > div { justify-content: center; width: 100%; }
  .before-login .desktop button { flex: 1; max-width: 185px; }
}
/* 767px — 원본 mobile.css */
@media (max-width: 767px) {
  .logo-wrapper { width: 250px; height: 250px; margin-top: -80px; margin-bottom: -60px; }
  .top_logo { width: 100%; }
  /* banner-background: 767px에는 width/left 규칙 없음 (500px에서 104% 적용) */
  .banner-carousel .text-panel { padding: 3vw 0; margin-bottom: 5vw; }
  .sc-btn { width: calc(33.33% - 15px); }
  .sc-btn .g-cont { height: 140px; }
  /* 767px: main-menu li 크기 (1행 4개) */
  .main-menu li { width: calc(100% / 4 - 5px); height: auto; padding-bottom: 4px; }
  .main-menu li a { padding: 12px 0 8px; min-height: 64px; }
  .main-menu li a span { font-size: 13px; line-height: 100%; }
}
/* 600px — 원본에 없음, 필요 규칙만 유지 */
@media (max-width: 600px) {
  .banner-background .casino-items { display: none; }
  .sc-btn:hover { margin-top: 0; margin-bottom: 0; }
  .toggle-btn .btn-panel .category { font-size: 14px; }
}
/* 500px — 원본 mobile.css (600px 이후에 선언 → override 가능) */
@media (max-width: 500px) {
  .banner-background { width: 104%; }
  .toggle-section { padding: 24px 0 0 0; }
  .toggle-btn .icon-panel { width: 64px; height: auto; }
  .toggle-btn { font-size: 12px; }
  .toggle-btn .btn-panel .category { font-size: 12px; }
  .sc-btn { width: calc(50% - 12px); margin: 7px 6px; padding: 2px; }
  .sc-btn .g-panel { padding: 6px 6px 8px; }
  .sc-btn .g-cont { height: 120px; }
  .sc-btn .play-btn { width: 80px; height: 30px; font-size: 12px; }
  .main-menu { flex-wrap: wrap; justify-content: center; }
  .main-menu li { width: calc(100% / 4 - 5px); height: auto; }
}