:root {
  --primary-color: #097a4a;
  --primary-dark: #064c31;
  --primary-light: #66dfac;
  --primary-lighter: #aaffdb;
  --primary-pale: #c4f8e0;
  --accent-dark: #01140d;
  --accent-light: #7af5c8;
  --text-primary: #ffffff;
  --bg-dark: #040a07;
  --border-color: #3a3d3f;
  --primary-shadow-color: rgba(53, 222, 147, 0.5);
  --secondary-color: #1fb876;
  --header-bg: #01140d;
  --notification-red: #e5361c;
  --jackpot-bg: #0b995d;
  --jackpot-inner: #01140d;
  --jackpot-accent: rgba(53, 222, 147, 0.15);
  --rt-board-bg: #01140d;
  --rt-board-border: #0b995d;
  --rt-board-glow: #66dfac;
  --winning-border: #0b995d;
  --winner-btn-bg: #04442b;
  --winner-btn-border: #0e6946;
  --winner-btn-hover: #01140d;
  --sc-footer-glow: rgba(53, 222, 147, 0.4);
  --board-wrap-bg: #172533;
  --customer-banner-bg: #0d9e5f;
  --customer-banner-light: #0b995d;
  --modal-backdrop: rgba(2, 7, 12, 0.75);
  --modal-bg: #132233;
  --modal-dark: #0c1623;
  --modal-accent: rgba(113, 155, 202, 0.1);
  --form-icon-color: #0b995d;
  --table-hover: rgba(53, 222, 147, 0.05);
  --count-tag-bg: #0d9e5f;
  --count-tag-border: rgba(53, 222, 147, 0.5);

  --message-bg: rgba(53, 222, 147, 0.05);
  --message-border: rgba(53, 222, 147, 0.25);
  --pagination-bg: #40566d;
  --pagination-hover: #6487ab;
  --pagination-active: var(--accent-dark);
  --pagination-active-border: var(--primary-color);
  --calendar-td-bg: rgba(53, 222, 147, 0.1);
  --calendar-td-border: rgba(53, 222, 147, 0);
  --calendar-td-hover-border: rgba(53, 222, 147, 0.5);
  --modal-nav-bg: rgba(0, 0, 0, 0.3);
  --modal-nav-text: #8ba4bf;
  --modal-nav-active-border: var(--accent-dark);
  --modal-nav-icon-active: var(--form-icon-color);
  --game-btn-bg: #223345;
  --game-btn-play-bg: var(--winner-btn-bg);
  --game-btn-play-border: var(--winner-btn-border);
  --game-btn-play-hover: var(--primary-color);
  --game-btn-play-gradient-start: var(--customer-banner-light);
  --game-btn-play-gradient-end: var(--accent-dark);
  --game-btn-play-practice-bg: #cccccc;
  --game-btn-play-practice-hover: #666666;
  --popup-header-bg: #043f28;
  --popup-header-icon: #75beff;
  --popup-close-hover: var(--customer-banner-light);
  --event-btn-border: #213953;
  --event-btn-border-hover: var(--customer-banner-light);
  --event-btn-footer-bg: #132233;
  --event-btn-footer-hover: #213b59;
    to right,
    rgba(53, 222, 147, 0.3),
    rgba(53, 222, 147, 0.1)
  );
  --mobile-menu-bg: #020910;
  --mobile-menu-gradient: linear-gradient(#052114, #020910);
  --mobile-menu-icon-gradient: linear-gradient(
    var(--primary-lighter),
    var(--primary-light),
    var(--primary-dark),
    var(--accent-dark)
  );

  --sc-footer-glow: rgba(53, 222, 147, 0.4);
  --board-wrap-bg: #01140d;
  --customer-banner-bg: #0b995d;
  --customer-banner-light: var(--primary-color);
  --modal-backdrop: rgba(2, 7, 12, 0.75);
  --modal-bg: #01140d;
  --modal-dark: #01140d;
  --modal-accent: rgba(113, 155, 202, 0.1);
  --form-icon-color: var(--primary-color);
  --table-hover: rgba(53, 222, 147, 0.05);
  --count-tag-bg: #0d9e5f;
  --count-tag-border: rgba(53, 222, 147, 0.5);
}

@font-face {
  font-family: "Pretendard-Light";
  src: url("https://unpkg.com/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://unpkg.com/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-Bold";
  src: url("https://unpkg.com/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard-Black";
  src: url("https://unpkg.com/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll !important;
}

html::-webkit-scrollbar {
  width: 0;
}

html::-webkit-scrollbar-thumb {
  width: 0;
}

div::-webkit-scrollbar {
  width: 10px;
  border-radius: 5px;
  background-color: #203248;
}

div::-webkit-scrollbar-thumb {
  width: 10px;
  border-radius: 5px;
  border: solid 2px #203248;
  background-color: var(--primary-color);
}

body {
  height: 100%;
  padding-right: 0 !important;
  text-align: center;
  background-color: #04070a;
  color: #ffffff;
  font-size: 16px;
  font-family: "Pretendard-Light", sans-serif;
  font-weight: 300;
}

body.active {
  overflow: hidden;
}

button,
a,
input,
select,
textarea {
  outline: none !important;
  transition: 0.3s;
  white-space: nowrap;
}

button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  text-decoration: none;
}

img {
  pointer-events: none;
}

tr {
  cursor: pointer;
}

.w-b,
.w-a,
.w-ba {
  position: relative;
  z-index: 1;
}

.w-b:before,
.w-a:after,
.w-ba:before,
.w-ba:after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  transition: 0.3s;
}

.w-border {
  padding: 90px 0;
}

.w-border.top {
  border-top: solid 1px #3a3d3f;
}

.d-border {
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(58, 62, 64, 0.5);
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #303336;
}

.bg-darker {
  background-color: rgba(13, 14, 15, 0.5);
}

.bg-darkest {
  background-color: rgba(13, 14, 15, 0.75);
}

.bg-lighter {
  background-color: #28292b;
}

.font-light {
  font-family: Pretendard-Light !important;
}

.font-regular {
  font-family: Pretendard-Regular !important;
}

.font-bold {
  font-family: Pretendard-Bold !important;
}

.font-black {
  font-family: Pretendard-Black !important;
}

.text-blue {
  color: var(--primary-color) !important;
}

.text-blue-l {
  color: var(--primary-light) !important;
}

.text-blue-2 {
  color: var(--accent-light) !important;
}

.text-red {
  color: #ff0000 !important;
}

.text-red-d {
  color: var(--accent-dark) !important;
}

.text-yellow {
  color: #ffbc00 !important;
}

.text-orange {
  color: var(--primary-light) !important;
}

.text-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(
    var(--accent-dark),
    var(--primary-color),
    var(--primary-color),
    var(--primary-light),
    var(--accent-dark)
  );
  background-size: 100% 100%;
  position: relative;
}

.text-gradient-y {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#ffd025, #ffd025);
  background-size: 100% 100%;
  position: relative;
}

.text-gradient-b {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    var(--primary-lighter),
    var(--primary-lighter),
    var(--primary-color),
    var(--primary-color)
  );
  background-size: 100% 100%;
  position: relative;
}

.text-gradient-r {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#ffbdbd, #ff6f6f, #ff0000, #ff0000);
  background-size: 100% 100%;
  position: relative;
}

.text-gradient:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  text-shadow: 0 1px 0 #ffffff;
  pointer-events: none;
  z-index: -1;
}

@keyframes lightningAnim {
  0% {
    opacity: 0;
    transform: translate(-100%, -100%);
    filter: blur(5px);
  }
  10% {
    opacity: 1;
    transform: translate(25%, 25%);
    filter: blur(5px);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}

.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;
}

.dflex-ac-je {
  display: flex !important;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dflex-ae-jc {
  display: flex !important;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}

.dflex-as-jc {
  display: flex !important;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

.dflex-acs-jc {
  display: flex !important;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.min-h-auto {
  min-height: auto !important;
}

.table-layout-fixed {
  table-layout: fixed;
}

.bs-ul,
.bs-ul-df {
  list-style: none;
  margin-bottom: 0;
  width: auto;
  display: table;
  padding: 0;
}

.bs-ul-df {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.bs-ul li,
.bs-ul-df li {
  list-style: none;
  width: auto;
  height: auto;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.bs-ul-df li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.easy-ticker ul {
  list-style: none;
  margin-bottom: 0;
  width: auto;
  padding: 0;
  position: relative !important;
}

.easy-ticker ul li {
  list-style: none;
  width: auto;
  height: auto;
  position: relative;
  display: block;
  white-space: nowrap;
  cursor: pointer;
}

.container {
  position: relative;
}

@media (min-width: 1560px) {
  .container {
    max-width: 1530px;
  }
}

/* Button Styles */

.btn-silver,
.btn-blue,
.btn-red,
.btn-yellow {
  color: var(--text-primary);
  font-size: 16px;
  border-radius: 25px;
  border: solid 1px var(--primary-color);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn-blue {
  background-color: var(--primary-color);
  box-shadow: 0 0 15px var(--primary-shadow-color);
}

.btn-red {
  background-color: var(--primary-dark);
  border-color: var(--primary-light);
  box-shadow: 0 0 15px var(--primary-shadow-color);
}

.btn-yellow {
  background-color: var(--primary-lighter);
  border-color: var(--accent-light);
  color: var(--bg-dark);
  box-shadow: 0 0 15px rgba(138, 239, 196, 0.5);
}

.btn-silver {
  border: none !important;
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  box-shadow: 0 4px 15px rgba(247, 151, 30, 0.4);
  border-color: #feca04;
  color: var(--bg-dark);
  font-family: Pretendard-Bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-silver i,
.btn-blue i {
  font-size: 24px;
  margin-right: 5px;
}

.btn-blue i {
  color: var(--bg-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-silver:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -1;
  transition: 0.3s;
  background-image: linear-gradient(to right, #feca04, #feca04);
}

@media (min-width: 1200px) {
  .btn-silver:hover:before {
    opacity: 1;
  }

  .btn-silver:hover {
    color: var(--text-primary);
    font-family: Pretendard-Light;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    border-color: var(--accent-light);
  }

  .btn-blue:hover {
    background-color: var(--secondary-color);
  }

  .btn-red:hover {
    background-color: var(--accent-dark);
  }

  .btn-yellow:hover {
    background-color: var(--primary-light);
    color: var(--text-primary);
  }
}

/* Wrapper */

.wrapper {
  width: 100%;
  min-height: 100%;
  min-width: 360px;
  position: relative;
  overflow: hidden;
  padding: 150px 0 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.wrapper:before,
.wrapper:after {
  content: "";
  width: 100%;
  max-width: 1920px;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 190px;
  margin: 0 auto;
  position: absolute;
  background-image: url(/user6/images/bg/pattern-bg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 1;
}

.wrapper.py-0:before,
.wrapper.py-0:after {
  bottom: 0;
}

.wrapper:before {
  opacity: 0.5;
  background-position: bottom 2px center;
}

.wrapper:after {
  background-image: url(/user6/images/bg/glow-bg.png);
  opacity: 0.15;
}

/* Header Section */

.header-section {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1010;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.header-main {
  width: 100%;
  height: 90px;
  background-color: var(--bg-dark);
  z-index: 2;
}

.header-main:before {
  width: 300px;
  height: 149px;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  background-image: linear-gradient(
    to right,
    rgba(4, 7, 10, 0),
    rgba(4, 7, 10, 0.4),
    rgba(4, 7, 10, 0.4),
    rgba(4, 7, 10, 0)
  );
  pointer-events: none;
}

logo {
  width: 218px;
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  margin: 0 auto;
}

.logo-sub {
  width: 320px;
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  margin: 0 auto;
}

.logo img,
.logo div {
  position: absolute;
}

.logo .logo-img,
.logo div .d-img {
  position: relative;
}
#rotatingleaf {
  width: 58%;
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  animation: spin 8s linear infinite;
  transform-origin: center center;
}

#small-g {
  width: 58%;
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  opacity: 1;
}

/* rotation animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 120px; /* adjust as needed */
  height: 120px;
}

.rotating-logo .logo-img {
  height: auto;
}

#rotatingleaf {
  width: 52%;
  position: relative;
  animation: spin 8s linear infinite;
  transform-origin: center center;
  z-index: 2;
}

#small-g {
  width: 65%;
  position: relative;
  z-index: 3;
  opacity: 1;
}

#rotatingleaf-sub {
  width: 52%;
  position: relative;
  animation: spin 8s linear infinite;
  transform-origin: center center;
  z-index: 2;
}

#small-g-sub {
  width: 65%;
  position: relative;
  margin-left: -60%; /* overlaps leaf smoothly */
  z-index: 3;
  opacity: 1;
}

/* rotation animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes lgQlAnim {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  3% {
    opacity: 1;
    transform: scale(0.9);
  }
  9% {
    opacity: 1;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.logo .qr {
  width: 26.61%;
  left: 9%;
  bottom: 25%;
  z-index: 5;
  animation: lgQrAnim 10s ease infinite;
}

@keyframes lgQrAnim {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  2% {
    opacity: 0;
    transform: scale(1.3);
  }
  5% {
    opacity: 1;
    transform: scale(0.9);
  }
  11% {
    opacity: 1;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.logo .icon {
  width: 34.86%;
  left: 0;
  top: 0;
  animation: lgIconAnim 10s ease infinite;
}

@keyframes lgIconAnim {
  0% {
    opacity: 0;
    transform: translate(-100%, -100%) scale(0.9);
    filter: blur(5px);
  }
  12% {
    opacity: 0;
    transform: translate(-100%, -100%) scale(0.9);
    filter: blur(5px);
  }
  14% {
    opacity: 1;
    transform: translate(25%, 25%) scale(0.9);
    filter: blur(5px);
  }
  15% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
  95% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
}

.logo .uick {
  width: 61.47%;
  right: 0;
  top: 18%;
  z-index: 10;
}

.logo .uick .d-img {
  animation: lgUickAnim 10s ease infinite;
}

@keyframes lgUickAnim {
  0% {
    opacity: 0;
    transform: translateX(-50%) skew(45deg);
    filter: blur(10px);
  }
  7% {
    opacity: 0;
    transform: translateX(-50%) skew(45deg);
    filter: blur(10px);
  }
  10% {
    opacity: 1;
    transform: translateX(0) skew(0deg);
    filter: blur(0);
  }
  95% {
    opacity: 1;
    transform: translateX(0) skew(0deg);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(0) skew(0deg);
    filter: blur(0);
  }
}

.logo .casino {
  width: 58.26%;
  right: 0.5%;
  bottom: 0;
  animation: lgCasinoAnim 10s ease infinite;
}

@keyframes lgCasinoAnim {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    filter: blur(5px);
  }
  9% {
    opacity: 0;
    transform: translateY(-100%);
    filter: blur(5px);
  }
  14% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
    filter: blur(0);
  }
}

.logo .lightning-01 {
  width: 32.11%;
  left: 25.5%;
  bottom: 13%;
  animation: lgLightningAnim 10s ease infinite;
}

@keyframes lgLightningAnim {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.logo .lightning-01 .d-img {
  animation: lgLightning01ImgAnim 1.5s ease infinite;
}

@keyframes lgLightning01ImgAnim {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.5;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0.5;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.logo .lightning-02 {
  width: 38.99%;
  right: 2%;
  bottom: 8%;
  animation: lgLightningAnim 10s ease infinite;
}

.logo .lightning-02 .d-img {
  animation: lgLightning02ImgAnim 1.5s ease infinite;
}

@keyframes lgLightning02ImgAnim {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.5;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* Header Menu */

.sc-menu li {
  padding-right: 10px;
}

.sc-menu a {
  width: 190px;
  height: 40px;
  background-image: linear-gradient(
    to right,
    rgba(53, 222, 147, 0.3),
    rgba(53, 222, 147, 0.1)
  );
  border-radius: 20px;
  overflow: hidden;
}

.sc-menu a.casino-link {
  background-image: linear-gradient(to right, #ff52004d, #ff520024);
}

.sc-menu a:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  background-image: linear-gradient(
    to right,
    rgba(53, 222, 147, 0.75),
    rgba(53, 222, 147, 0.1)
  );
}

.sc-menu a.casino-link:before {
  background-image: linear-gradient(to right, #ff7a3b, #ff7a3b45);
}

.sc-menu a:hover:before {
  opacity: 1;
}

.sc-menu a .icon-panel {
  margin-right: 10px;
}

.sc-menu a .icon-panel img {
  max-height: 24px;
}

.sc-menu a.slot-link .icon-panel img {
  max-height: 26px;
}

.modal .sc-menu a.slot-link .icon-panel img,
.mobile .sc-menu a.slot-link .icon-panel img {
  max-height: 26px;
}

.sc-menu a:hover .icon-panel img {
  animation: lightningAnim 1.5s ease 1 forwards;
}

.sc-menu a .count {
  margin-left: 10px;
  font-size: 18px;
  font-family: Pretendard-Bold;
}

/* Before After Login */

.bal-container {
  margin-left: auto;
}

.before-login,
.after-login {
  display: none;
}

.before-login.active,
.after-login.active {
  display: block;
}

.before-login button {
  width: 140px;
  height: 44px;
  margin-left: 8px;
}

/* After Login */

.account-info li {
  padding-left: 30px;
  flex-direction: column;
  justify-content: flex-start;
}

.account-info li .acc-row {
  width: 100%;
  height: 35px;
}

.account-info li .acc-row .icon-panel {
  font-size: 16px;
  padding-right: 10px;
  margin-right: 10px;
}

.account-info li .acc-row .icon-panel i {
  font-size: 18px;
}

.account-info li .acc-row .icon-panel:before {
  width: 1px;
  height: 22px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #233951;
}

.account-info li .acc-row .info a:hover {
  color: var(--primary-color);
}

.account-info li .acc-row .info a .symbol {
  transition: 0.3s;
}

.account-info li .acc-row .info a:hover .symbol {
  color: var(--primary-color) !important;
}

.account-info li.btn-grp {
  padding-left: 20px;
}

.account-info li.btn-grp button {
  width: 68px;
  height: 28px;
  font-size: 12px;
  border-radius: 6px;
  margin: 0 0 0 5px;
}

.account-info li.btn-grp button:first-child {
  margin: 0;
}

/* Level */
.account-info .level-panel {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background-color: var(--header-bg);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 2px 3px rgba(0, 0, 0, 0.75);
  margin-right: -10px;
}

.level-icon {
  min-width: 80px;
  max-width: 80px;
  min-height: 80px;
  max-height: 80px;
  position: relative;
}

.level-icon.diamond,
.level-icon.vip,
.level-icon.freelevel {
  min-width: 70px;
  max-width: 70px;
  min-height: 70px;
  max-height: 70px;
}

.level-icon span {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
}

.level-icon span:nth-child(1) {
  background-image: url(/user6/images/icon/level_bronze_01.png);
}
.level-icon span:nth-child(2) {
  background-image: url(/user6/images/icon/level_bronze_02.png);
}
.level-icon span:nth-child(3) {
  background-image: url(/user6/images/icon/level_bronze_03.png);
}
.level-icon span:nth-child(4) {
  background-image: url(/user6/images/icon/level_bronze_04.png);
}
.level-icon span:nth-child(5) {
  background-image: url(/user6/images/icon/level_bronze_05.png);
}

.level-icon.silver span:nth-child(1) {
  background-image: url(/user6/images/icon/level_silver_01.png);
}
.level-icon.silver span:nth-child(2) {
  background-image: url(/user6/images/icon/level_silver_02.png);
}
.level-icon.silver span:nth-child(3) {
  background-image: url(/user6/images/icon/level_silver_03.png);
}
.level-icon.silver span:nth-child(4) {
  background-image: url(/user6/images/icon/level_silver_04.png);
}
.level-icon.silver span:nth-child(5) {
  background-image: url(/user6/images/icon/level_silver_05.png);
}

.level-icon.gold span:nth-child(1) {
  background-image: url(/user6/images/icon/level_gold_01.png);
}
.level-icon.gold span:nth-child(2) {
  background-image: url(/user6/images/icon/level_gold_02.png);
}
.level-icon.gold span:nth-child(3) {
  background-image: url(/user6/images/icon/level_gold_03.png);
}
.level-icon.gold span:nth-child(4) {
  background-image: url(/user6/images/icon/level_gold_04.png);
}
.level-icon.gold span:nth-child(5) {
  background-image: url(/user6/images/icon/level_gold_05.png);
}

.level-icon.diamond span:nth-child(1) {
  background-image: url(/user6/images/icon/level_diamond_01.png);
}
.level-icon.diamond span:nth-child(2) {
  background-image: url(/user6/images/icon/level_diamond_02.png);
}
.level-icon.diamond span:nth-child(3) {
  background-image: url(/user6/images/icon/level_diamond_03.png);
}
.level-icon.diamond span:nth-child(4) {
  background-image: url(/user6/images/icon/level_diamond_04.png);
}
.level-icon.diamond span:nth-child(5) {
  background-image: url(/user6/images/icon/level_diamond_05.png);
}

.level-icon.vip span:nth-child(1) {
  background-image: url(/user6/images/icon/level_vip_01.png);
}
.level-icon.vip span:nth-child(2) {
  background-image: url(/user6/images/icon/level_vip_02.png);
}
.level-icon.vip span:nth-child(3) {
  background-image: url(/user6/images/icon/level_vip_03.png);
}
.level-icon.vip span:nth-child(4) {
  background-image: url(/user6/images/icon/level_vip_04.png);
}
.level-icon.vip span:nth-child(5) {
  background-image: url(/user6/images/icon/level_vip_05.png);
}

.level-icon.freelevel span:nth-child(1) {
  background-image: url(/user6/images/icon/level_freelevel_01.png);
}
.level-icon.freelevel span:nth-child(2) {
  background-image: url(/user6/images/icon/level_freelevel_02.png);
}
.level-icon.freelevel span:nth-child(3) {
  background-image: url(/user6/images/icon/level_freelevel_03.png);
}
.level-icon.freelevel span:nth-child(4) {
  background-image: url(/user6/images/icon/level_freelevel_04.png);
}
.level-icon.freelevel span:nth-child(5) {
  background-image: url(/user6/images/icon/level_freelevel_05.png);
}

.level-icon span:nth-child(1) {
  animation: levelImg01 0.7s ease infinite;
}

@keyframes levelImg01 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.level-icon span:nth-child(2) {
  animation: levelImg02 0.7s ease infinite;
}

@keyframes levelImg02 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.level-icon span:nth-child(3) {
  animation: levelImg03 0.7s ease infinite;
}

@keyframes levelImg03 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.level-icon span:nth-child(4) {
  animation: levelImg04 0.7s ease infinite;
}

@keyframes levelImg04 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.level-icon span:nth-child(5) {
  animation: levelImg05 0.7s ease infinite;
}

@keyframes levelImg05 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Nav Button */

.after-login .nav-btn {
  width: initial;
  background-color: transparent;
  border: none;
  color: #8ba4bf;
  font-size: 28px;
  position: relative;
  margin-left: 15px;
}

.after-login .nav-btn.message-link {
  font-size: 28px;
}

.after-login .nav-btn .count {
  width: 16px;
  height: 16px;
  font-size: 12px;
  background-color: var(--notification-red);
  border-radius: 50%;
  color: var(--text-primary);
  position: absolute;
  right: -5px;
  top: 4px;
}

/* Header Menu */

.header-menu {
  height: 60px;
  background-color: var(--header-bg);
}

.header-menu:before {
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(
    to right,
    rgba(42, 64, 87, 0),
    rgba(42, 64, 87, 1),
    rgba(42, 64, 87, 0)
  );
}

.main-menu {
  width: 100%;
}

.main-menu ul {
  width: calc(50% - 140px);
  flex-wrap: nowrap;
}

.main-menu ul:nth-child(2) {
  margin-right: auto;
}

.main-menu ul li {
  width: 100%;
}

.main-menu ul li a {
  color: #d4dbe5;
}

.main-menu ul li button {
  height: 48px;
  border-radius: 10px;
  padding: 0 10px;
}

.main-menu ul li button i {
  font-size: 20px;
}

.main-menu ul li a:hover {
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 10px var(--primary-shadow-color);
}

.main-menu ul li a .icon-panel {
  margin-right: 5px;
  font-size: 20px;
  color: var(--primary-color);
}

.main-menu ul li a:hover .icon-panel {
  color: var(--accent-light);
  text-shadow: 0 0 5px var(--primary-color);
}

.main-menu ul li a .text {
  display: inline-block;
  position: relative;
}

.main-menu ul li a .text:before,
.main-menu ul li a .text:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  color: var(--text-primary);
  pointer-events: none;
}

.main-menu ul li a:hover .text:before,
.main-menu ul li a:hover .text:after {
  animation: mainMenuLink 0.5s ease 1 forwards;
}

@keyframes mainMenuLink {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
  }
  50% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    filter: blur(0);
    transform: translateX(0);
  }
}

.main-menu ul li a:hover .text:after {
  animation-delay: 0.2s;
}

/* Visual Section */

.visual-section {
  width: 100%;
  height: 530px;
  position: relative;
  overflow: hidden;
}

.visual-carousel {
  width: 100%;
}

.visual-carousel .carousel-inner {
  overflow: visible;
}

.visual-carousel .carousel-wrap {
  width: 100%;
  max-width: 1530px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 2% 35px;
}

.visual-section .carousel-item {
  height: 100%;
}

.visual-section .carousel-item:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(/user6/images/visual/visual-bg-01.jpg);
  background-size: cover;
  animation: visualBgAnim 2s ease 1 forwards;
}

@keyframes visualBgAnim {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.visual-section .carousel-item:nth-child(2):before {
  background-image: url(/user6/images/visual/visual-bg-02.jpg);
}

.visual-carousel .text-panel {
  position: relative;
  z-index: 50;
  animation: visualTextAnim 6s ease 1 forwards;
}

@keyframes visualTextAnim {
  0% {
    opacity: 0;
    transform: translateX(-30%);
    filter: blur(10px);
  }
  7% {
    opacity: 1;
    transform: translateX(10%);
    filter: blur(10px);
  }
  20% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  85% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  90% {
    opacity: 1;
    transform: translateX(-10%);
    filter: blur(10px);
  }
  100% {
    opacity: 0;
    transform: translateX(30%);
    filter: blur(10px);
  }
}

.visual-carousel h1 {
  font-size: 72px;
}

.visual-carousel h2, .visual-carousel h3 {
  font-size: 40px;
}

.visual-carousel button {
  width: 220px;
  height: 60px;
  font-size: 20px;
  border-radius: 30px;
  margin: 2% 0 0;
  box-shadow: none;
}

/* Carousel Nav */

.carousel-nav {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  padding: 0 2%;
  z-index: 5;
}

.carousel-nav a {
  color: rgba(255, 255, 255, 0.25);
  font-size: 48px;
}

.carousel-nav a.prev-btn {
  margin-right: auto;
}

.carousel-nav a:hover {
  color: var(--primary-color);
  font-size: 48px;
}

/* Carousel Indicator */

.carousel-indicators {
  width: 100%;
  margin: 0;
  bottom: 60px;
}

.carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: var(--bg-dark);
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 0.3s;
  opacity: 1;
}

.carousel-indicators li:hover {
  border-color: var(--accent-light);
}

.carousel-indicators li.active {
  background-color: var(--primary-color);
  border-color: var(--primary-light);
}

/* Visual Background */

.visual-background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.visual-background img,
.visual-background div {
  position: absolute;
}

.visual-background div .d-img {
  width: 100%;
  position: relative;
}

.visual-background .img-panel {
  width: 26.15%;
  right: 6%;
  bottom: 0;
}

.visual-background .wizard {
  z-index: 10;
  animation: wizardAnim 15s ease infinite;
}

@keyframes wizardAnim {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  8% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.visual-background .slotmachine {
  width: 74.98%;
  left: -37%;
  bottom: 0;
  animation: slotMachineAnim 15s ease infinite;
}

@keyframes slotMachineAnim {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  2% {
    opacity: 0;
    transform: translateX(20%);
  }
  12% {
    opacity: 1;
    transform: translateX(0);
  }
  95% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

.visual-background .frog {
  width: 29%;
  left: -70%;
  bottom: 20%;
  animation: frogAnim 15s ease infinite;
}

@keyframes frogAnim {
  0% {
    opacity: 0;
    transform: translate(200%, 20%);
  }
  5% {
    opacity: 0;
    transform: translate(200%, 20%);
  }
  15% {
    opacity: 1;
    transform: translate(0, 0);
  }
  95% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

.visual-background .frog .d-img {
  animation: frogImgAnim 18s ease infinite;
}

@keyframes frogImgAnim {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(100deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.visual-background .btlblue {
  width: 19%;
  left: -18%;
  top: 14%;
  z-index: 10;
  animation: btlBlueAnim 15s ease infinite;
}

@keyframes btlBlueAnim {
  0% {
    opacity: 0;
    transform: translate(100%, 200%);
  }
  5% {
    opacity: 0;
    transform: translate(100%, 200%);
  }
  15% {
    opacity: 1;
    transform: translate(0, 0);
  }
  95% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

.visual-background .btlblue .d-img {
  animation: btlBlueImgAnim 8s ease infinite;
}

@keyframes btlBlueImgAnim {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.visual-background .spider {
  width: 20%;
  right: -8%;
  top: 0;
  animation: spiderAnim 15s ease infinite;
}

@keyframes spiderAnim {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.visual-background .spider .d-img {
  animation: spiderImgAnim 6s ease infinite;
}

@keyframes spiderImgAnim {
  0% {
    transform: translateY(-70%);
  }
  20% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-70%);
  }
}

.visual-background .btlgreen {
  width: 31.75%;
  right: -32%;
  bottom: 8%;
  z-index: 10;
  animation: btlGreenAnim 15s ease infinite;
}

@keyframes btlGreenAnim {
  0% {
    opacity: 0;
    transform: translate(-200%, 20%);
  }
  5% {
    opacity: 0;
    transform: translate(-200%, 20%);
  }
  15% {
    opacity: 1;
    transform: translate(0, 0);
  }
  95% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

.visual-background .btlgreen .d-img {
  animation: btlGreenImgAnim 12s ease infinite;
}

@keyframes btlGreenImgAnim {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.visual-background .ball {
  width: 22.5%;
  right: 8%;
  left: 0;
  bottom: 14%;
  margin: 0 auto;
  z-index: 15;
  filter: drop-shadow(0 0 20px var(--primary-shadow-color));
  animation: ballAnim 15s ease infinite;
}

@keyframes ballAnim {
  0% {
    opacity: 0;
    transform: translateY(-150%);
  }
  5% {
    opacity: 0;
    transform: translateY(-150%);
  }
  13% {
    opacity: 1;
    transform: translateY(15%);
  }
  18% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.visual-background .ball .d-img {
  animation: ballImgAnim 8s linear infinite;
}

@keyframes ballImgAnim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.visual-background .glow {
  width: 299.93%;
  left: 18%;
  bottom: 0;
  transform: translateX(-50%);
}

.visual-background .lightning-01 {
  width: 149.22%;
  right: 28%;
  bottom: 0;
  animation: visualLightning 15s ease infinite;
}

@keyframes visualLightning {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0;
  }
  13% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.visual-background .lightning-01 .d-img {
  animation: visualLightning01 1.5s ease infinite;
}

@keyframes visualLightning01 {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0.5;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.visual-background .lightning-02 {
  width: 95.73%;
  left: 51%;
  bottom: 0;
  animation: visualLightning 15s ease infinite;
}

.visual-background .lightning-02 .d-img {
  animation: visualLightning02 1.5s ease infinite;
}

@keyframes visualLightning02 {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  55% {
    opacity: 0.5;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* Visual 02 */

.visual-background .img-panel.v-02 {
  width: 26.15%;
}

.visual-background .img-panel.v-02 .dealer {
  z-index: 10;
  animation: wizardAnim 15s ease infinite;
}

.visual-background .roulette {
  width: 100%;
  left: -50%;
  bottom: 0;
  animation: slotMachineAnim 15s ease infinite;
}

.visual-background .chip-01 {
  width: 12.5%;
  left: -68%;
  bottom: 24%;
  animation: frogAnim 15s ease infinite;
}

.visual-background .chip-01 .d-img {
  animation: frogImgAnim 15s ease infinite;
}

.visual-background .chip-02 {
  width: 20%;
  left: -30%;
  top: 28%;
  z-index: 10;
  animation: btlBlueAnim 15s ease infinite;
}

.visual-background .chip-02 .d-img {
  animation: btlBlueImgAnim 15s ease infinite;
}

.visual-background .chip-03 {
  width: 27.49%;
  right: -22%;
  bottom: 8%;
  z-index: 10;
  animation: btlGreenAnim 15s ease infinite;
}

.visual-background .chip-03 .d-img {
  animation: btlGreenImgAnim 15s ease infinite;
}

/* Page Content */

.page-content {
  width: 100%;
  padding: 0 0 70px;
  z-index: 10;
}

/* Jackpot Section */

.jackpot-wrapper {
  width: calc(100% + 30px);
  height: 140px;
  border-radius: 80px;
  background-color: var(--bg-dark);
  margin: -35px -15px 0;
  padding: 15px;
  position: relative;
  z-index: 10;
}

.jackpot-wrapper .jackpot-panel {
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background-color: #ffbc00;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.jackpot-wrapper .jackpot-panel:before {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 60px;
  background-color: var(--jackpot-inner);
}

.jackpot-wrapper .jackpot-panel .side-bg,
.jackpot-wrapper .jackpot-panel .glow-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.jackpot-wrapper .jackpot-panel .side-bg:before,
.jackpot-wrapper .jackpot-panel .side-bg:after {
  width: 56px;
  height: 100.91%;
  top: -0.5%;
  background-size: 100% 100%;
  background-image: url(/user6/images/bg/jackpot-side.png);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 10px var(--primary-shadow-color));
  animation: jpSideAnim 0.5s ease infinite;
}

@keyframes jpSideAnim {
  0% {
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(53, 222, 147, 0));
  }
  50% {
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px var(--primary-shadow-color));
  }
  100% {
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(53, 222, 147, 0));
  }
}

.jackpot-wrapper .jackpot-panel .side-bg:before {
  left: 0;
}

.jackpot-wrapper .jackpot-panel .side-bg:after {
  right: 0;
  transform: rotateY(180deg);
}

.jackpot-wrapper .jackpot-panel .glow-bg:before,
.jackpot-wrapper .jackpot-panel .glow-bg:after {
  width: 200px;
  height: calc(100% - 34px);
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-image: linear-gradient(to right, #ffbc00, transparent);
  animation: jpGlowAnim 1.25s ease infinite;
}

@keyframes jpGlowAnim {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 15%;
    opacity: 1;
  }
  80% {
    width: 15%;
    opacity: 1;
  }
  100% {
    width: 15%;
    opacity: 1;
  }
}

.jackpot-wrapper .jackpot-panel .glow-bg:before {
  left: 10px;
  border-radius: 60px 0 0 60px;
}

.jackpot-wrapper .jackpot-panel .glow-bg:after {
  right: 10px;
  border-radius: 0 60px 60px 0;
  background-image: linear-gradient(to left, #ffbc00, transparent);
}

.jackpot-wrapper .label-panel {
  height: 100%;
  font-size: 54px;
  margin-right: 3%;
  position: relative;
  z-index: 5;
}

.jackpot-wrapper .label-panel .icon-panel {
  min-width: 160px;
  height: 100%;
  margin-right: 4%;
  position: relative;
}

.jackpot-wrapper .label-panel .lightning {
  width: 16.25%;
  right: 5%;
  top: 0;
  position: absolute;
  animation: lightningJLAnim 2s ease infinite;
}

@keyframes lightningJLAnim {
  0% {
    opacity: 0;
    transform: translate(-100%, -100%);
    filter: blur(5px) drop-shadow(0 0 8px var(--primary-shadow-color));
  }
  10% {
    opacity: 1;
    transform: translate(25%, 25%);
    filter: blur(5px) drop-shadow(0 0 8px var(--primary-shadow-color));
  }
  20% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0) drop-shadow(0 0 8px var(--primary-shadow-color));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0) drop-shadow(0 0 8px var(--primary-shadow-color));
  }
}

.jackpot-wrapper .amount-panel {
  position: relative;
  z-index: 5;
}

.jackpot-wrapper .amount-panel .amount {
  font-size: 72px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 20px var(--primary-color),
    0 0 10px var(--primary-color), 0 0 5px var(--primary-color);
  animation: jpAmountAnim 0.5s ease infinite;
}

@keyframes jpAmountAnim {
  0% {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 5px var(--primary-color),
      0 0 10px var(--primary-color), 0 0 0 var(--primary-color);
  }
  50% {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 20px var(--primary-color),
      0 0 10px var(--primary-color), 0 0 0 var(--primary-color);
  }
  100% {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 5px var(--primary-color),
      0 0 10px var(--primary-color), 0 0 0 var(--primary-color);
  }
}

.jackpot-wrapper .amount-panel .symbol {
  font-size: 54px;
  margin-left: 2%;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 20px rgb(222 53 53 / 50%),
    0 0 10px rgb(222 53 53 / 50%);
}

/* Toggle Section */

.toggle-section {
  margin: 20px 0 0;
  position: relative;
  z-index: 15;
}

.toggle-btn {
  width: calc(50% - 54px);
  position: relative;
  border-radius: 30px 0 0 30px;
  background-image: linear-gradient(
    to right,
    var(--accent-dark),
    var(--primary-dark)
  );
  flex-wrap: nowrap;
}

.toggle-btn:first-child {
  margin-right: auto;
}

/*.toggle-btn:last-child {
  border-radius: 0 30px 30px 0;
  background-image: linear-gradient(
    to left,
    var(--accent-dark),
    var(--primary-dark)
  );
}

.toggle-btn:before {
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background-image: linear-gradient(
    to left,
    var(--primary-dark),
    var(--primary-dark),
    transparent
  );
  transform: skew(20deg);
  transform-origin: top right;
}

.toggle-btn:last-child:before {
  right: auto;
  left: 0;
  transform-origin: bottom left;
  background-image: linear-gradient(
    to right,
    var(--primary-dark),
    var(--primary-dark),
    transparent
  );
}*/

.toggle-btn:last-child {
  border-radius: 0 30px 30px 0;
  background-image: radial-gradient(
    83.11% 43.5% at 34.07% 0%,
    var(--primary-dark) 0%,
    var(--accent-dark) 100%
  );
}

.toggle-btn {
  width: calc(50% - 54px);
  position: relative;
  border-radius: 30px 0 0 30px;
  background-image: radial-gradient(
    83.11% 43.5% at 60.07% 0%,
    var(--primary-dark) 0%,
    var(--accent-dark) 100%
  );
  flex-wrap: nowrap;
}

.toggle-btn:before {
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background-image: radial-gradient(
    83.11% 43.5% at 6.07% 0%,
    var(--primary-dark) 0%,
    var(--accent-dark) 100%
  );
  transform: skew(20deg);
  transform-origin: top right;
}

.toggle-btn:last-child:before {
  right: auto;
  left: 0;
  transform-origin: bottom left;
  background-image: radial-gradient(
    83.11% 43.5% at 97.07% 0%,
    var(--primary-dark) 0%,
    var(--accent-dark) 100%
  );
}

.toggle-btn .g-size {
  width: 100%;
}

.toggle-btn .g-img {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.5s;
  transform-origin: bottom left;
}

.toggle-btn:last-child .g-img {
  left: auto;
  right: 0;
  transform-origin: bottom right;
}

.toggle-btn .icon-panel {
  width: 80px;
  height: 80px;
  background-color: rgba(53, 222, 147, 0.2);
  position: absolute;
  left: 15px;
  top: 15px;
  border-radius: 20px;
  backdrop-filter: blur(5px);
}

.toggle-btn:last-child .icon-panel {
  left: auto;
  right: 15px;
}

.toggle-btn.active .icon-panel {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.providers-modal .toggle-btn .icon-panel img,
.page-content .toggle-btn .icon-panel img {
  max-width: 60px;
  max-height: 54px;
}

.toggle-btn .text-panel {
  position: absolute;
  left: 54%;
  font-size: 36px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.toggle-btn:last-child .text-panel {
  left: auto;
  right: 54%;
}

.toggle-btn .text-panel .kr-text,
.toggle-btn .text-panel .en-text {
  width: 100%;
  display: inline-block;
}

.toggle-btn .text-panel .en-text {
  color: var(--primary-light);
  font-size: 20px;
  margin: -2% 0 0;
  letter-spacing: 5px;
}

/* Toggle Divider */

.toggle-divider {
  width: 110px;
  height: 110px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--bg-dark);
  z-index: 10;
  pointer-events: none;
}

.toggle-divider img {
  width: 82%;
  transform: rotate(0deg);
  transition: 0.5s;
}

.left-active .toggle-divider img {
  transform: rotate(124deg);
}

.right-active .toggle-divider img {
  transform: rotate(-56deg);
}

/* Toggle Hover */

.toggle-btn .g-hover {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  border-radius: 30px 0 0 30px;
  background-image: linear-gradient(
    to right,
    var(--accent-dark),
    var(--primary-color)
  );
  z-index: -1;
  transition: 0.3s;
  opacity: 0;
}

.toggle-btn:last-child .g-hover {
  border-radius: 0 30px 30px 0;
  background-image: linear-gradient(
    to left,
    var(--accent-dark),
    var(--primary-color)
  );
}

.toggle-btn.active .g-hover {
  opacity: 1;
}

.toggle-btn .g-hover:before {
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background-image: linear-gradient(
    to left,
    var(--primary-color),
    var(--primary-color),
    transparent
  );
  transform: skew(20deg);
  transform-origin: top right;
}

.toggle-btn:last-child .g-hover:before {
  right: auto;
  left: 0;
  transform-origin: bottom left;
  background-image: linear-gradient(
    to right,
    var(--primary-color),
    var(--primary-color),
    transparent
  );
}

@media (min-width: 1025px) {
  .toggle-btn:hover .g-hover {
    opacity: 1;
  }

  .toggle-btn:hover .icon-panel {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  .toggle-btn:hover .icon-panel .icon {
    animation: lightningAnim 1.5s ease 1 forwards;
  }

  .toggle-btn:hover .g-img {
    transition: 2s;
    transform: scale(1.1);
  }
}

/* Realtime Section */

.realtime-section {
  margin: 30px 0 40px;
}

.realtime-wrap {
  width: calc(100% + 20px);
  margin: 0 -10px;
}

.rt-board {
  width: calc(33.33% - 20px);
  margin: 0 10px;
  padding: 15px 25px;
  border-radius: 30px;
  overflow: hidden;
}

.rt-board:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: -100%;
  border-radius: 50%;
  box-shadow: 0 0 200px var(--rt-board-glow);
}

.rt-board:after {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: solid 1px var(--rt-board-border);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.rt-board .header {
  font-size: 30px;
  margin: 0 0 10px;
  position: relative;
}

/* Winning Board */

.winning-board {
  /*overflow: visible;*/
  /*background-color: var(--rt-board-bg);*/
}

/*.winning-board:before {
  display: none;
}

.winning-board:after {
  border-color: var(--winning-border);
}*/

.winning-board .header {
  padding-left: 60px;
}

.winning-board .header .icon-img {
  position: absolute;
  left: 0;
  bottom: 0;
}

.winning-ticker ul li {
  height: 74px;
}

/*.winner-btn {
  width: 100%;
  height: calc(100% - 4px);
  padding: 8px;
  cursor: pointer;
  transition: 0.3s;
  background-color: var(--winner-btn-bg);
  border: solid 1px var(--winner-btn-border);
  border-radius: 15px;
}*/

.winner-btn {
  width: 100%;
  height: calc(100% - 4px);
  padding: 8px;
  cursor: pointer;
  transition: 0.3s;
  border: solid 1px var(--winner-btn-border);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(
      circle at top center,
      rgba(102, 223, 172, 0.35),
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(#001c12, #000000);
}

.winner-btn:hover {
  background: var(--winner-btn-hover);
  border-color: var(--winner-btn-border);
}

.winner-btn .game-panel {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.winner-btn .info-panel {
  width: calc(100% - 50px);
  padding: 0 0 0 15px;
  color: var(--text-primary);
}

.winner-btn .info-panel .title {
  color: #990000;
}

.winner-btn .info-panel .date {
  color: #a8c9a1;
}

.winner-btn .info-panel .user {
  font-size: 16px;
}

.winner-btn .info-panel .amount {
  font-size: 18px;
}

/* Table Ticker */

.table-ticker {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.table-ticker ul li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 45px;
  cursor: pointer;
  transition: 0.3s;
}

.table-ticker ul li .td {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.table-ticker ul li .td:first-child {
  border-radius: 10px 0 0 10px;
}

.table-ticker ul li .td:last-child {
  border-radius: 0 10px 10px 0;
}

.table-ticker ul li:hover .td {
  background-color: var(--jackpot-accent);
}

.table-ticker ul li .icon-panel {
  min-width: 46px;
  height: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999999;
  font-size: 20px;
  margin: 0 10px 0 0;
}

.table-ticker ul li .icon-panel:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(/user6/images/icon/user-icon.gif);
  background-size: 100% 100%;
}

.table-ticker ul li div.user {
  width: 35%;
  justify-content: flex-start;
  padding-left: 5px;
}

.table-ticker ul li div.amount {
  width: 36%;
  font-size: 18px;
  font-weight: 700;
  justify-content: flex-end;
}

.table-ticker ul li div.date {
  width: 29%;
  color: #9da7b2;
  justify-content: flex-end;
  padding-right: 10px;
}

/* Providers Section */

.providers-section {
  margin: 0 0 30px;
}

.providers-section .header {
  margin: 0 0 15px;
}

.providers-section .header .title-panel {
  font-size: 26px;
}

.providers-section .header .title-panel .icon-img {
  margin-right: 10px;
  max-width: 60px;
  max-height: 54px;
}

.providers-section .header .more-link {
  color: #b8c4d0;
  font-family: Pretendard-Light;
}

.providers-section .header .more-link i {
  color: var(--primary-color);
  font-size: 18px;
  margin-left: 5px;
  transition: 0.3s;
  position: relative;
  right: 0;
}

.providers-section .header .more-link:hover {
  color: var(--text-primary);
}

.providers-section .header .more-link:hover i {
  color: var(--accent-light);
  right: -5px;
}

.providers-wrap {
  width: 100%;
}

.providers-wrap .providers-panel {
  width: calc(100% + 20px);
  margin: 0 -10px;
}

.sc-btn {
  width: calc(16.66% - 20px);
  max-width: 233px;
  display: inline-block;
  margin: 0 10px 20px;
  position: relative;
  opacity: 0;
  animation: scBtnAnim 1.5s ease 1 forwards;
}

@keyframes scBtnAnim {
  0% {
    opacity: 0;
    transform: translate(-25%, -25%);
    filter: blur(5px);
  }
  10% {
    opacity: 1;
    transform: translate(25%, 25%);
    filter: blur(5px);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}

.sc-btn:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 30px;
  z-index: 5;
  border: solid 1px var(--primary-color);
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  opacity: 0;
  pointer-events: none;
}

.sc-btn .g-panel {
  width: 100%;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background-color: #000000;
}

.sc-btn .g-panel:before,
.sc-btn .g-panel:after {
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(
    to right,
    transparent,
    var(--primary-shadow-color)
  );
  transform: skew(15deg) translateX(-120%);
  z-index: 1;
  transition: 0s;
}

.sc-btn .g-bg {
  width: 100%;
  transition: 0.3s;
}

.sc-btn .g-img {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.5s;
}

.sc-btn .g-panel .g-img {
  z-index: 2;
}

.sc-btn .icon-panel {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 3;
}

.sc-btn .play-btn {
  width: 130px;
  height: 42px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
  z-index: 10;
  opacity: 0;
}

@keyframes scPlayBtn {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  30% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.sc-btn .g-footer {
  width: 100%;
  height: 90px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.3s;
  z-index: 10;
}

.sc-btn .g-footer:before {
  width: 100%;
  height: 150%;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(#01140d00, #01140d70, #01140de1, #01140d);
}

.sc-btn .g-footer:after {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  left: 0;
  right: 0;
  bottom: -50%;
  margin: 0 auto;
  box-shadow: 0 0 20px var(--sc-footer-glow);
}

.sc-btn .g-footer .kr-text,
.sc-btn .g-footer .en-text {
  width: 100%;
  display: inline-block;
  z-index: 10;
  position: relative;
}

.sc-btn .g-footer .en-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 2px;
}

@media (min-width: 1200px) {
  .sc-btn:hover .play-btn {
    animation: scPlayBtn 0.75s ease 1 forwards;
  }

  .sc-btn:hover:before {
    opacity: 1;
  }

  .sc-btn:hover .g-panel:before,
  .sc-btn:hover .g-panel:after {
    transition: 1s;
    transform: skew(15deg) translateX(120%);
  }

  .sc-btn:hover .g-panel:after {
    transition-delay: 0.3s;
  }

  .sc-btn:hover .g-bg {
    transform: scale(1.1);
    opacity: 0.4;
    transition: 0.8s;
  }

  .sc-btn:hover .g-img {
    bottom: 8%;
    transition: 0.5s;
  }

  .sc-btn:hover .g-footer {
    height: 80px;
  }
}

/* Board Section */

.board-wrap {
  width: 100%;
  min-height: 320px;
  background-color: var(--board-wrap-bg);
  border-radius: 30px;
  margin: 60px 0 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.75);
  align-items: stretch;
  align-content: stretch;
}

.board-wrap:before {
  width: 142px;
  height: 141px;
  bottom: -80px;
  left: -90px;
  background-image: url(/user6/images/icon/lightning-b-icon.png);
  background-size: 100% 100%;
  z-index: 10;
}

.board-wrap:after {
  width: 92px;
  height: 91px;
  top: -56px;
  right: -36px;
  background-image: url(/user6/images/icon/crown-icon.png);
  background-size: 100% 100%;
  z-index: 10;
}

.eveter-wrap {
  width: 66.66%;
  padding: 0 20px;
}

.nt-board {
  width: calc(50% - 40px);
  margin: 0 20px;
}

.nt-board .header {
  width: 100%;
  height: 60px;
  border-radius: 15px;
  background-color: var(--bg-dark);
  padding: 0 20px;
  margin: 0 0 10px;
}

.nt-board .header .title-panel {
  font-size: 18px;
}

.nt-board .header .title-panel i {
  font-size: 34px;
  margin-right: 8px;
}

.nt-board .header .more-link {
  color: #9da7b2;
  margin-left: auto;
}

.nt-board .header .more-link:hover {
  color: var(--text-primary);
}

.nt-board .header .more-link i {
  color: var(--primary-color);
  font-size: 20px;
}

.nt-board .header .more-link:hover i {
  color: var(--accent-light);
}

.nt-board .content {
  padding: 0 10px;
}

.nt-board table td {
  height: 40px;
}

.nt-board table .date-td {
  color: #9da7b2;
  font-size: 14px;
}

.nt-board table td a {
  display: inline-block;
  position: relative;
}

.nt-board table td a:hover {
  color: var(--primary-light);
}

.nt-board table td a:before {
  content: "";
  width: 0;
  height: 1px;
  left: 0;
  bottom: 0;
  position: absolute;
  background-color: var(--primary-color);
  transition: 0.3s;
}

.nt-board table td a:hover:before {
  width: 100%;
}

.new-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-block;
  margin-left: 5px;
  background-color: #ff553f;
  background-image: linear-gradient(#ff553f, #e31b00);
  color: var(--text-primary);
  font-size: 14px;
  font-family: Pretendard-Bold;
  text-align: center;
  position: relative;
}

/* Customer Board */

.customer-wrap {
  width: 33.33%;
  padding: 0 30px;
}

.customer-wrap:before {
  width: 100%;
  height: 100%;
  border-radius: 0 30px 0 0;
  left: 0;
  top: 0;
  box-shadow: inset 5px 5px 40px rgba(0, 0, 0, 0.8);
  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
  mask-image: linear-gradient(
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
}

.customer-board {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
}

.customer-board .header {
  width: 100%;
  font-size: 30px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 20px var(--primary-color),
    0 0 10px var(--primary-color), 0 0 5px var(--primary-color);
  margin: 0 0 10px;
}

.c-banner {
  width: 100%;
  max-width: 390px;
  height: 80px;
  border-radius: 15px;
  display: inline-block;
  padding: 2px;
  background-color: var(--customer-banner-bg);
  margin: 5px 5px;
  color: var(--text-primary);
  font-size: 24px;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.modal .c-banner {
  margin: 10px 10px;
}

.c-banner.domain-link:before,
.c-banner.domain-link:after {
  background-image: linear-gradient(
    to right,
    rgb(170 255 219 / 0%),
    rgb(170 255 219)
  );
}

.c-banner:before,
.c-banner:after {
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(
    to right,
    transparent,
    var(--primary-shadow-color)
  );
  transform: skew(15deg) translateX(-120%);
  z-index: 1;
  animation: cusBannerBorder 2s ease infinite;
}

.c-banner:after {
  animation: cusBannerBorder 2s ease 0.5s infinite;
}

@keyframes cusBannerBorder {
  0% {
    transform: skew(15deg) translateX(-120%);
  }
  100% {
    transform: skew(15deg) translateX(120%);
  }
}

.c-banner .b-panel {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  padding: 0 15px;
  z-index: 2;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(
    to right,
    var(--primary-dark),
    var(--accent-dark)
  );
}

.c-banner.domain-link .b-panel {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  box-shadow: 0 4px 15px rgba(247, 151, 30, 0.4);
}

.c-banner .b-panel:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(
    to right,
    var(--primary-color),
    var(--primary-light)
  );
  opacity: 0;
}

.c-banner.domain-link .b-panel:before {
  background-image: linear-gradient(to right, #feca04, #feca04);
}

.c-banner.yellow-border {
  background-color: #feca04;
}

.c-banner:hover .b-panel:before {
  opacity: 1;
}

.c-banner .icon-panel {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  margin-right: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.c-banner:hover .icon-panel .icon-img {
  animation: lightningAnim 1.5s ease 1 forwards;
}

.c-banner .text-panel {
  width: calc(100% - 80px);
}

.c-banner .text-panel .text {
  width: 100%;
  display: inline-block;
  text-align: left;
}

.c-banner .text-panel .sub {
  font-size: 18px;
  margin: 0 0 -2%;
}

.c-banner .go-btn {
  width: 40px;
  height: 36px;
  position: absolute;
  right: 0;
  bottom: 0;
  border: none;
  background-color: transparent;
  color: var(--text-primary);
  font-size: 18px;
  padding: 4px 0 0 8px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.c-banner.domain-link .go-btn {
  color: #1a1a1a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.c-banner .go-btn:before,
.c-banner .go-btn:after {
  width: 150%;
  height: 160%;
  border-radius: 50%;
  left: 0;
  top: 0;
  background-image: linear-gradient(
    var(--primary-color),
    var(--primary-dark),
    var(--primary-dark)
  );
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.25),
    -1px -1px 3px rgba(0, 0, 0, 0.25);
}

.c-banner.domain-link .go-btn:before {
  background-image: linear-gradient(#cccccc, #999999, #999999);
}

.c-banner .go-btn:after {
  background-image: linear-gradient(
    var(--accent-light),
    var(--primary-light),
    var(--primary-light)
  );
  opacity: 0;
}

.c-banner.domain-link .go-btn:after {
  background-image: linear-gradient(#ffffff, #cccccc, #cccccc);
}

.c-banner .go-btn:hover:after {
  opacity: 1;
}

/* Footer Section */

.footer-section {
  height: 190px;
  padding: 35px 0;
  background-color: #000000;
  margin: -190px 0 0;
  z-index: 10;
}

.footer-section:before {
  width: 100%;
  height: 1px;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  background-image: linear-gradient(
    to right,
    transparent,
    var(--primary-shadow-color),
    transparent
  );
}

.footer-section .logo {
  width: 150px;
  position: relative;
  top: 0;
}

.footer-section .copyright-text {
  width: 100%;
  display: inline-block;
  color: #455160;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 20px 0 0;
}

/*=========================================================== M O D A L ===============================================================*/

.modal-backdrop {
  background-color: var(--modal-backdrop);
  backdrop-filter: blur(5px);
  opacity: initial !important;
}

.modal {
  padding: 30px 50px !important;
  overflow: hidden;
  color: var(--text-primary);
}

.modal::-webkit-scrollbar {
  width: 0;
}

.modal-dialog {
  max-width: 840px;
  height: 100%;
  padding: 0 !important;
  margin: 0 auto !important;
}

.modal-close {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background-color: rgba(32, 68, 97, 0.25);
  backdrop-filter: blur(5px);
  border: none;
  position: absolute;
  right: -45px;
  top: 0;
  z-index: 10;
}

.modal-close:before,
.modal-close:after {
  width: 1px;
  height: 60%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ccc9db;
  transition: 0.3s;
}

.modal-close:before {
  transform: rotate(-45deg);
}

.modal-close:after {
  transform: rotate(45deg);
}

.modal-close:hover:before {
  transform: rotate(-135deg);
  background-color: var(--primary-color);
}

.modal-close:hover:after {
  transform: rotate(-45deg);
  background-color: var(--primary-color);
}

/* Modal Content */

.modal-content {
  width: 100%;
  max-height: 92%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-wrapper {
  width: 100%;
  align-items: stretch;
  background-color: var(--modal-bg);
  border-radius: 20px;
  overflow: hidden;
  flex-wrap: nowrap;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

/* Modal Panel */

.modal-panel {
  width: calc(100% - 400px);
  padding: 30px 30px 60px;
  overflow-y: auto;
  position: relative;
}

.modal-center {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.modal .logo {
  width: 200px;
  top: 0;
  position: relative;
  margin: 0 auto 40px;
}

/* Login Join */

.loginModal .modal-dialog {
  max-width: 640px;
}

.joinModal .modal-dialog {
  max-width: 1100px;
}

.loginModal .form-footer button {
  border-radius: 10px;
}

.joinModal .form-footer button {
  max-width: 240px;
}

.joinModal .form-container .input-container input,
.joinModal .form-container .input-container .select-input {
  border: solid 1px #344961;
}

.joinModal .form-container .w-icon .input-container .select-input {
  border: none;
}

.form-container
  .input-container
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Subpages Modal */

.dashboard-modal .modal-dialog {
  max-width: 1330px;
}

.dashboard-modal .modal-content {
  height: 92%;
}

.dashboard-modal .modal-wrapper {
  padding: 5px;
  min-height: 100%;
  background-color: var(--modal-dark);
}

.dashboard-modal .modal-sidebar {
  width: 270px;
  background-image: none;
  background-color: var(--modal-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

.dashboard-modal .modal-menu {
  width: 100%;
  height: initial;
  position: relative;
  left: 0;
  top: 0;
  margin-top: 10px;
  overflow-y: visible;
  padding-right: 15px;
  padding-bottom: 30px;
}

.dashboard-modal .modal-panel {
  width: calc(100% - 270px);
  padding-top: 75px;
  overflow: visible;
}

/* Modal Sidebar */

.modal-sidebar {
  width: 100%;
  position: relative;
  align-content: flex-start;
  padding: 15px;
  position: relative;
}

.modal-sidebar .header {
  width: 100%;
  margin: 0 0 15px;
  padding: 0 0 8px;
  font-size: 18px;
  border-bottom: solid 1px rgba(53, 222, 147, 0.15);
}

.modal-sidebar .header .icon-panel {
  font-size: 24px;
}

.modal-sidebar .sc-menu,
.mobile .sc-menu {
  flex-wrap: nowrap;
  width: 100%;
}

.modal-sidebar .sc-menu li,
.modal-sidebar .sc-menu li a,
.mobile .sc-menu li,
.mobile .sc-menu li a {
  width: 100%;
}

.modal-sidebar .sc-menu li:last-child,
.mobile .sc-menu li:last-child {
  padding: 0;
}

.modal-sidebar .sc-menu li a,
.mobile .sc-menu li a {
  width: 100%;
  min-height: 60px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-primary);
  justify-content: center;
  padding: 0 0 5px;
}

.modal-sidebar .sc-menu a .icon-panel,
.mobile .sc-menu a .icon-panel {
  width: 100%;
  margin: 5px 0 4px;
}

.modal-menu {
  width: calc(100% - 20px);
  height: calc(100% - 166px);
  position: absolute;
  left: 15px;
  top: 166px;
  overflow-y: auto;
  padding-right: 15px;
  padding-bottom: 30px;
  align-content: flex-start;
}

.modal-menu::-webkit-scrollbar {
  width: 10px;
  border-radius: 5px;
  background-color: #0e161d;
}

.modal-menu::-webkit-scrollbar-thumb {
  width: 10px;
  border-radius: 5px;
  border: solid 2px #0e161d;
  background-color: var(--primary-color);
}

.modal-menu li {
  width: 100%;
}

.modal-menu li.seperate {
  padding-top: 10px;
}

.modal-menu a {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background-color: transparent;
  border: none;
  color: #8ba4bf;
  margin: 2px 0;
  padding: 0 0 0 15px;
  position: relative;
  z-index: 1;
}

.modal-menu a:hover,
.modal-menu a.active {
  color: var(--text-primary);
}

.modal-menu a:before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 25px;
  background-image: linear-gradient(
    to right,
    var(--primary-shadow-color),
    transparent
  );
  position: absolute;
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
}

.modal-menu a.active:before {
  opacity: 1;
}

.modal-menu a i {
  font-size: 20px;
  margin-right: 10px;
}

.modal-menu a:hover i,
.modal-menu a.active i {
  color: var(--primary-color);
}

.modal-menu .btn-silver {
  border: solid 1px #e1e1e1;
  color: #002e68;
}

.modal-menu .btn-silver:before {
  border-radius: 10px;
  background-image: linear-gradient(to right, #4a4a4a, #4a4a4a);
}

/* Modal Header */

.modal-header {
  width: calc(100% - 280px);
  height: 60px;
  position: absolute;
  right: 0;
  top: 5px;
  margin: 0 auto;
  padding: 0 25px;
  border: none;
  background-color: var(--modal-dark);
  z-index: 10;
}

.modal-header .title-panel {
  font-size: 20px;
}

.modal-header .title-panel i {
  font-size: 40px;
  margin-right: 5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(
    var(--primary-color),
    var(--primary-light),
    var(--accent-dark),
    var(--accent-dark)
  );
  background-size: 100% 100%;
  position: relative;
}

/* Modal Badge */

.modal-badge {
  width: 100%;
  min-height: 110px;
  border-radius: 16px;
  background-image: linear-gradient(
    to right,
    var(--primary-dark),
    var(--accent-dark)
  );
  margin: 0 0 30px;
  padding: 15px;
  flex-wrap: nowrap;
}

.modal-badge .icon-panel {
  min-width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 15px 0 0;
  background-color: var(--modal-dark);
}

.modal-badge .icon-panel img {
  max-width: 100%;
}

.modal-badge .text-panel .link {
  font-size: 20px;
  white-space: wrap;
}

.modal-badge .text-panel .link:hover {
  color: var(--primary-color);
}

/* Form Container */

.form-container {
  width: 100%;
  max-width: 1024px;
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.form-container .form-group {
  width: 100%;
  display: inline-block;
  margin: 0 0 15px;
}

.form-container .form-group:last-child {
  margin: 0 0;
}

.form-container .labels {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0 0 5px;
  margin: 0 0 5px;
  color: #95adc9;
  white-space: nowrap;
}

.form-container .labels .notif {
  margin-left: 5px;
}

.form-container .infos {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.form-container .w-btn .infos {
  padding-right: 140px;
}

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

.form-container .w-icon .input-container {
  background-color: var(--modal-accent);
  border: solid 1px #344961;
  border-radius: 10px;
}

.form-container .form-group input {
  width: 100%;
  height: 52px;
  float: left;
  color: var(--text-primary);
  background-color: var(--modal-accent);
  border: none;
  transition: 0.3s;
  padding: 0 15px;
  border-radius: 10px;
}

.form-container .form-group.w-icon input {
  width: calc(100% - 50px);
  background-color: transparent;
  border: solid 1px transparent;
  margin-left: auto;
  padding: 0;
}

.form-container .form-group input::-webkit-input-placeholder {
  color: #6c7e94;
}

.form-container .form-group input::placeholder {
  color: #6c7e94;
}

.form-container .form-group .input-container .icon-panel {
  width: 50px;
  height: 40px;
  border-radius: 50%;
  color: var(--form-icon-color);
  position: initial;
  left: 0;
  top: 0;
  bottom: 0;
  font-size: 18px;
}

.password-toggle {
  right: 10px;
  position: absolute;
  font-size: 18px;
  color: var(--accent-light);
}

.select-input {
  width: 100%;
  height: 52px;
  background-color: var(--modal-accent);
  border: none;
  border-radius: 10px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 5px;
  padding: 0 15px;
}

.select-input:last-child {
  margin-right: 0;
}

.select-input select {
  width: 100%;
  height: 100%;
  border: none;
  color: #6c7e94;
  background-color: transparent;
  -webkit-appearance: none;
  cursor: pointer;
}

.form-container .w-icon .select-input {
  background-color: transparent;
  border: solid 1px transparent;
  padding: 0;
}

.select-input select option {
  background-color: #1f0a0a;
  color: #fff;
}

.select-input i {
  color: #6082a1;
  font-size: 28px;
  position: absolute;
  right: 10px;
  pointer-events: none;
}

.form-container .form-group textarea {
  width: 100%;
  height: 200px;
  float: left;
  background-color: rgba(113, 155, 202, 0.05);
  border: solid 1px rgba(113, 155, 202, 0.25);
  border-radius: 10px;
  transition: 0.3s;
  padding: 20px 18px;
  resize: none;
  color: var(--text-primary);
}

.form-container .form-group textarea::-webkit-input-placeholder {
  color: #9b98a9;
}

.form-container .form-group textarea::placeholder {
  color: #9b98a9;
}

.form-container .form-group .form-btn {
  min-width: 130px;
  height: 54px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 10px;
}

/* Form Btn Group */

.form-container .form-group .infos .btn-grp {
  width: calc(100% + 4px);
  float: left;
  margin: 0 -2px;
}

.form-container .form-group .infos .btn-grp button {
  width: 16.66%;
  width: calc(16.66% - 4px);
  height: 44px;
  float: left;
  margin: 0 2px;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.3s;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--text-primary);
  background-color: #4d647b;
  border: none;
}

.form-container .form-group .infos .btn-grp button:hover {
  background-color: var(--primary-dark);
}

.form-container .form-group .infos .btn-grp button:last-child {
  background-color: var(--notification-red);
}

.form-container .form-group .infos .btn-grp button:last-child:hover {
  background-color: #ad1600;
}

/* Modal Footer */

.modal-footer {
  width: 100%;
  border: none;
  margin: 40px auto 0;
  padding: 0;
}

.form-footer {
  width: calc(100% + 10px);
  margin: 0 -5px;
  flex-wrap: nowrap;
}

.form-footer button {
  width: 100%;
  max-width: 200px;
  height: 54px;
  margin: 0 5px;
  font-weight: 500;
}

.form-footer button.size-lg {
  max-width: 300px;
}

/* Money Table */

.money-table {
  width: 100%;
  justify-content: flex-start;
}

.money-table li {
  width: calc(25% - 4px);
  height: 48px;
  margin: 2px;
  padding: 0 15px;
  justify-content: space-between;
  background-color: var(--table-hover);
  border: solid 1px var(--count-tag-border);
  border-radius: 5px;
  font-size: 14px;
}

/* BS Table */

.table-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.bs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.bs-table thead th {
  height: 50px;
  background-color: #2d3f59;
  font-size: 14px;
  text-align: center;
  font-weight: initial;
}

.bs-table thead th:first-child {
  border-radius: 10px 0 0 10px;
}

.bs-table.one-th thead th:first-child {
  border-radius: 10px;
}

.bs-table thead th:last-child {
  border-radius: 0 10px 10px 0;
}

.bs-table tr td {
  height: 50px;
  text-align: center;
  padding: 1px;
  transition: 0.3s;
  border-bottom: dashed 1px #2f3f57;
}

.bs-table tr td:first-child {
  border-radius: 10px 0 0 10px;
}

.bs-table tr td:last-child {
  border-radius: 0 10px 10px 0;
}

.bs-table tr:hover td {
  background-color: var(--table-hover);
}

.bs-table tr td a {
  color: var(--text-primary);
  transition: 0.3s;
  display: inline-block;
  vertical-align: middle;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.bs-table tr td a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.bs-table tr .count-td {
  width: 50px;
}

.bs-table tr .count-tag {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  background-color: var(--count-tag-bg);
  border: solid 1px var(--count-tag-border);
  border-radius: 5px;
}

.new-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 5px;
  background-color: #ff2f00;
  color: var(--text-primary);
  font-size: 12px;
  text-align: center;
  padding: 1px 0 0;
}

.bs-table tr .title-td {
  text-align: left;
  padding-left: 15px;
  max-width: 590px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-table tr .date-td {
  width: 20%;
  font-size: 14px;
  color: #8699ad;
}

.bs-table tr .nav-td {
  width: 40px;
}

.bs-table tr td .delete-btn {
  background-color: transparent;
  border: none;
  color: #adbbcc;
  font-size: 18px;
  transition: 0.3s;
  margin: 0 auto;
}

.bs-table tr td .delete-btn:hover {
  color: var(--primary-color);
}

.bs-table tr td .nav-btn i {
  position: relative;
  color: #fff;
  font-size: 10px;
  transition: 0.3s;
  transform: rotate(0deg);
}

.bs-table tr td .nav-btn:hover i {
  color: var(--primary-color);
}

.bs-table tr.active td .nav-btn i {
  transform: rotate(180deg);
  top: 5px;
}

.bs-table tr td .plus-btn {
  width: 16px;
  height: 16px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 12px;
  padding: 0 0 0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.bs-table tr td .plus-btn:hover {
  background-color: var(--primary-light);
}

.bs-table tr td .plus-btn:before,
.bs-table tr td .plus-btn:after {
  content: "";
  width: 2px;
  height: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background-color: var(--text-primary);
  transition: 0.3s;
}

.bs-table tr td .plus-btn:after {
  transform: rotate(90deg);
}

.bs-table tr.active td .plus-btn:before {
  height: 0;
}

.bs-table tr td .plus-btn:hover:before,
.bs-table tr td .plus-btn:hover:after {
  background-color: var(--bg-dark);
}

.wd-tag {
  width: 30px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 12px;
  background-color: var(--count-tag-bg);
  border: solid 1px var(--count-tag-border);
  box-shadow: 0 0 10px var(--primary-shadow-color);
  margin-right: 10px;
  padding: 0 0 1px;
}

.wd-tag.deposit {
  background-color: #b70404;
  border-color: #ff3c3c;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.coupon-btn {
  width: 100%;
  max-width: 80px;
  height: 26px;
  border-radius: 5px;
  background-color: var(--primary-dark);
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  margin: 0 auto;
}

.coupon-btn.used {
  background-color: #cccccc;
  color: #000000;
}

.coupon-btn.expired {
  background-color: #df3b00;
}

/* With Depth */

.with-depth .message-content {
  display: none;
  height: 200px;
  margin: 2px 0 5px;
}

.with-depth tr.depth-click {
  cursor: pointer;
}

.with-depth tr.dropdown {
  background-color: transparent;
}

.with-depth tr.dropdown td {
  padding: 0;
  border: none;
  height: auto;
  box-shadow: none;
}

.with-depth tr.dropdown td {
  background-color: transparent;
  border: none;
}

.with-depth tr.dropdown:hover td {
  background-color: transparent;
  border: none;
}

/* Message Content */

.message-content {
  width: 100%;
  background-color: var(--message-bg);
  border: solid 1px var(--message-border);
  margin: 5px 0 0;
  border-radius: 15px;
  padding: 10px;
}

.message-content .inner-container {
  width: 100%;
  height: 100%;
  font-weight: 300;
  white-space: pre-wrap;
  text-align: left;
  padding: 5px 10px;
}

/* Pagination */

.pagination {
  margin: -10px 0 0;
}

.pagination li {
  float: left;
}

.pagination > li > a {
  width: 30px;
  height: 30px;
  background-color: var(--pagination-bg);
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 0;
  margin: 0 2px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}

.pagination li a:hover {
  color: var(--text-primary);
  background-color: var(--pagination-hover);
}

.pagination li a.active {
  color: var(--text-primary);
  background-color: var(--pagination-active);
  border: solid 1px var(--pagination-active-border);
}

.pagination .turn-pg a {
  font-size: 16px;
  padding: 0;
  color: #ccc9db;
  background-color: transparent;
  border: 1px solid #2f2b45;
}

.pagination .turn-pg:nth-child(2) a {
  margin-right: 10px;
}

.pagination .turn-pg:nth-last-child(2) a {
  margin-left: 10px;
}

.pagination .turn-pg a:hover {
  color: var(--primary-light);
  background-color: transparent;
}

/* Modal Tab */

.modal-tab {
  width: 100%;
  display: none;
  margin: 0 auto;
  animation: modalTabAnim 0.5s ease 1 forwards;
}

@keyframes modalTabAnim {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-tab.active {
  display: block;
}

.head-btn-grp {
  width: 100%;
  margin: 0 0 10px;
}

.head-btn-grp button {
  height: 30px;
  padding: 0 20px;
}

/* Modal Nav */

.modal-nav {
  width: 100%;
  border-radius: 14px;
  padding: 6px;
  flex-wrap: nowrap;
  background-color: var(--modal-nav-bg);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  margin: 0 0 20px;
}

.modal-nav a {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background-color: transparent;
  border: none;
  color: var(--modal-nav-text);
}

.modal-nav a:hover {
  color: var(--text-primary);
}

.modal-nav a.active {
  color: var(--text-primary);
  border: solid 1px var(--modal-nav-active-border);
  background-image: linear-gradient(
    to right,
    var(--accent-dark),
    var(--primary-color)
  );
  box-shadow: 0 0 5px var(--primary-shadow-color);
}

.modal-nav a i {
  font-size: 18px;
  margin-right: 8px;
}

.modal-nav a:hover i,
.modal-nav a.active i {
  color: var(--modal-nav-icon-active);
}

/* Calendar Table */

.calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
}

.calendar-table thead th {
  height: 46px;
  background-color: #2d3f59;
  font-size: 14px;
  text-align: center;
  font-weight: initial;
}

.calendar-table td {
  height: 100px;
  background-color: var(--calendar-td-bg);
  border: solid 1px var(--calendar-td-border);
  transition: 0.3s;
  position: relative;
}

.calendar-table td:hover {
  background-color: rgba(53, 222, 147, 0.2);
  border-color: var(--calendar-td-hover-border);
}

.calendar-table td .date {
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 14px;
}

.calendar-table td .stamp {
  width: 80%;
  max-width: 70px;
}

.calendar-info {
  width: 100%;
  position: absolute;
  flex-wrap: nowrap;
  left: 0;
  bottom: 10%;
}

.calendar-info .icon-panel {
  width: 30px;
  margin-right: 5px;
}

.calendar-info .text-panel .text {
  display: block;
  text-align: left;
  white-space: nowrap;
}

.calendar-info .text-panel .labels {
  font-size: 14px;
  margin: 0 0 -4%;
}

/* Attendance Information */

/* Providers Modal */

.providers-modal {
  padding: 0 !important;
  overflow: initial;
}

.providers-modal .modal-dialog {
  max-width: 100%;
  align-items: flex-start;
}

.providers-modal .modal-content {
  min-height: 100%;
  max-height: initial;
  background-color: #080e16;
  align-items: stretch;
  align-content: stretch;
  flex-direction: initial;
  flex-wrap: wrap;
}

.providers-modal .modal-wrapper {
  min-height: 100%;
  align-content: flex-start;
  background-color: transparent;
  border-radius: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  padding: 0 15px;
  flex-wrap: wrap;
  position: relative;
}

.providers-modal .modal-close {
  width: 50px;
  height: 50px;
  right: 15px;
  top: 15px;
}

.providers-modal .modal-panel {
  width: 100%;
  padding: 0;
  overflow: initial;
}

.providers-modal .logo {
  width: 218px;
  margin: 15px auto 40px;
}

/* Modal Toggle Section */

.providers-modal .toggle-section {
  margin: 0 0 30px;
}

.providers-modal .toggle-btn {
  width: calc(50% - 30px);
  padding: 10px;
  border-radius: 20px 0 0 20px;
}

.providers-modal .toggle-btn:last-child {
  border-radius: 0 20px 20px 0;
}

.providers-modal .toggle-btn .icon-panel {
  width: 60px;
  height: 60px;
  position: relative;
  left: 0;
  top: 0;
  border-radius: 16px;
}

.providers-modal .toggle-btn .text-panel {
  position: relative;
  left: 0;
  font-size: 24px;
  margin-left: 15px;
  flex-wrap: nowrap;
}

.providers-modal .toggle-btn:last-child .text-panel {
  right: 0;
  margin-right: 15px;
}

.providers-modal .toggle-btn .text-panel .en-text {
  font-size: 12px;
  margin: 0 0 -10px 10px;
  letter-spacing: 4px;
}

.providers-modal .toggle-btn:last-child .text-panel .en-text {
  margin: 0 10px -10px 0;
}

.providers-modal .toggle-btn .text-panel .kr-text,
.providers-modal .toggle-btn .text-panel .en-text {
  width: initial;
}

.providers-modal .toggle-divider {
  width: 70px;
  height: 70px;
}

.providers-modal .toggle-btn .g-hover {
  border-radius: 20px 0 0 20px;
}

.providers-modal .toggle-btn:last-child .g-hover {
  border-radius: 0 20px 20px 0;
}

/* Modal Providers Wrap */

.providers-modal .providers-wrap {
  display: none;
}

.providers-modal .providers-wrap.active {
  display: block;
}

/* Modal Bottom */

.modal-bottom {
  width: 100%;
  height: 100px;
  background-color: var(--modal-dark);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  color: #607085;
  font-size: 12px;
  letter-spacing: 2px;
}

/* Gamelist Modal */

.gamelist-header {
  margin: 0 0 20px;
}

.gamelist-header .title-panel {
  font-size: 24px;
  margin-right: auto;
  position: relative;
  top: 5px;
}

.gamelist-header .title-panel .icon-img {
  margin: 0 10px 0 0;
}

.gamelist-header .slot-link {
  height: 42px;
  padding: 0 25px;
  margin-left: 10px;
}

.search-form {
  width: 100%;
  max-width: 300px;
  height: 44px;
  border-radius: 25px;
  color: var(--text-primary);
  background-color: var(--message-bg);
  border: solid 1px var(--message-border);
  padding: 2px;
}

.search-form input {
  width: calc(100% - 42px);
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0 50px 0 15px;
  color: var(--text-primary);
  font-size: 16px;
}

.search-form input::-webkit-input-placeholder {
  color: #6c7e94;
}

.search-form input::placeholder {
  color: #6c7e94;
}

.search-form .search-btn {
  width: 38px;
  height: 100%;
  font-size: 20px;
  border-radius: 50%;
}

.search-form .search-btn i {
  color: var(--text-primary);
  text-shadow: none;
  font-size: 18px;
}

.gamelist-nav {
  box-shadow: none;
  background-color: var(--calendar-td-bg);
}

.gamelist-nav button {
  max-width: 300px;
}

.gamelist-wrap {
  width: calc(100% + 16px);
  margin: 0 -8px;
}

.game-btn {
  width: calc(12.5% - 16px);
  margin: 0 8px 16px;
  color: var(--text-primary);
  background-color: var(--game-btn-bg);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  opacity: 1;
}

.game-btn .g-panel {
  width: 100%;
  position: relative;
  transition: 0.3s;
}

.game-btn .g-title {
  max-width: 96%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-btn .g-img {
  border-radius: 15px 15px 0 0;
  transition: 0.3s;
}

.game-btn .btn-grp {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 10;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: 0.3s;
}

.game-btn:hover .btn-grp {
  opacity: 1;
}

.game-btn .btn-grp div {
  width: 100%;
}

.game-btn .play-btn {
  width: 80%;
  max-width: 120px;
  height: 36px;
  margin: 6px auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  z-index: 1;
  color: var(--text-primary);
  font-size: 14px;
  background-color: transparent;
  opacity: 0;
}

.game-btn:hover .play-btn {
  animation: glPlayAnim 1s ease 1 forwards;
}

@keyframes glPlayAnim {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-btn:hover .play-btn:nth-child(2) {
  animation: glPlay02Anim 1s ease 1 forwards;
}

@keyframes glPlay02Anim {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  20% {
    opacity: 0;
    transform: translateX(-50%);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-btn .play-btn.practice {
  color: #000000;
}

.game-btn .play-btn.practice:hover {
  color: var(--text-primary);
}

.game-btn .play-btn:before {
  content: "";
  width: calc(100% - 38px);
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  border-radius: 0 20px 20px 0;
  right: 0;
  transition: 0.3s;
  background-color: var(--game-btn-play-bg);
  box-shadow: 0 1px 0 var(--game-btn-play-border), 0 2px 3px rgba(0, 0, 0, 0.75);
  z-index: -1;
}

.game-btn .play-btn.practice:before {
  background-color: var(--game-btn-play-practice-bg);
  box-shadow: 0 1px 0 var(--text-primary), 0 2px 3px rgba(0, 0, 0, 0.75);
}

.game-btn .play-btn:hover:before {
  background-color: var(--game-btn-play-hover);
}

.game-btn .play-btn.practice:hover:before {
  background-color: var(--game-btn-play-practice-hover);
  box-shadow: 0 1px 0 #999999, 0 2px 3px rgba(0, 0, 0, 0.75);
}

.game-btn .play-btn .icon-panel {
  width: 36px;
  height: 100%;
  background-image: linear-gradient(
    var(--game-btn-play-gradient-start),
    var(--game-btn-play-gradient-end)
  );
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 var(--customer-banner-light),
    0 2px 3px rgba(0, 0, 0, 0.75);
  border-radius: 20px 0 0 20px;
  font-size: 18px;
  margin-right: 8px;
  padding: 0 0 0 6px;
  overflow: hidden;
  z-index: 1;
  position: relative;
}

.game-btn .play-btn .icon-panel:before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transition: 0.3s;
  background-image: linear-gradient(var(--primary-light), var(--primary-dark));
  z-index: -1;
  opacity: 0;
}

.game-btn .play-btn:hover .icon-panel:before {
  opacity: 1;
}

.game-btn .play-btn.practice .icon-panel {
  background-image: linear-gradient(var(--text-primary), #8b8b8b);
  color: #0a0a0a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 0 #cccccc, 0 2px 3px rgba(0, 0, 0, 0.75);
}

.game-btn .play-btn.practice .icon-panel:before {
  background-image: linear-gradient(var(--text-primary), #cccccc);
}

.game-btn .g-info {
  width: 100%;
  padding: 0 5px 10px;
}

.game-btn .g-info:before {
  width: 100%;
  height: 100%;
  max-height: 30px;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  background-image: linear-gradient(
    rgba(34, 51, 69, 0),
    rgba(34, 51, 69, 0.75),
    rgba(34, 51, 69, 1)
  );
}

.game-btn .g-info .text {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.game-btn .g-info .provider {
  color: #8b9eb3;
  font-size: 12px;
  margin: -0.5% 0 0;
  letter-spacing: 2px;
}

@media (min-width: 1200px) {
  .game-btn:hover .play-btn {
    opacity: 1;
    transform: rotate(0deg);
  }

  .game-btn:hover .g-img {
    transform: scale(0.96);
    opacity: 0.5;
    filter: blur(2px);
  }
}

/* Mobile Menu */

.mobile-menu {
  width: 100%;
  height: 60px;
  background-color: var(--mobile-menu-bg);
  background-image: var(--mobile-menu-gradient);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1010;
  display: none;
}

.mobile-menu a {
  width: 20%;
  height: 100%;
}

.mobile-menu a .icon-panel i {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--mobile-menu-icon-gradient);
  background-size: 100% 100%;
  font-size: 24px;
}

.mobile-menu a .title {
  width: 100%;
  color: #a1aab7;
  font-size: 11px;
  margin: -3px 0 5px;
}

.mobile-menu .sbg-btn .icon-panel {
  width: 54px;
  height: 54px;
  margin: -17px 0 0;
  position: relative;
}

.mobile-menu .sbg-btn .icon-panel:before {
  content: "";
  width: 200%;
  height: 200%;
  border-radius: 50%;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  position: absolute;
  background-color: #1d336a;
  background-image: var(--mobile-menu-gradient);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5);
  z-index: -1;
  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
  mask-image: linear-gradient(
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
}

/* Popup Wrapper */

.popup-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  z-index: 1090;
  pointer-events: none;
  padding: 10px 50px;
  overflow-y: scroll;
}

.popup-btn {
  cursor: pointer;
  padding: 5px 30px;
  background: var(--accent-dark);
}

.popup-container {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  align-items: flex-start;
  align-content: flex-start;
}

.popup-container::-webkit-scrollbar {
  width: 0;
}

.popup-content {
  background-color: #171717;
}

.popup-panel {
  width: calc(25% - 16px);
  max-width: 400px;
  pointer-events: auto;
  margin: 8px;
  display: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.popup-panel.active {
  display: block;
  animation: popupOpenAnim 1s ease 1 forwards;
}

@keyframes popupOpenAnim {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.popup-panel .popup-header {
  width: 100%;
  height: 40px;
  background-color: var(--primary-light);
  padding: 0 5px 0 10px;
  color: var(--text-primary);
  font-size: 12px;
}

.popup-panel .popup-header .title-panel {
  font-size: 16px;
}

.popup-panel .popup-header .title-panel i {
  color: var(--popup-header-icon);
  font-size: 20px;
  margin-right: 5px;
}

.popup-panel .popup-footer {
  width: 100%;
  min-height: 40px;
  background-color: var(--popup-header-bg);
  padding: 10px 15px;
  color: var(--text-primary);
  font-size: 12px;
}

.popup-panel .close-button {
  height: 28px;
  color: var(--text-primary);
  font-size: 14px;
  background-color: var(--primary-color);
  border: solid 1px var(--primary-color);
  border-radius: 5px;
  padding: 0 15px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  outline: none;
}

.with-depth tr.dropdown {
  background-color: transparent;
}

.with-depth tr.dropdown td {
  padding: 0;
  border: none;
  height: auto;
  box-shadow: none;
}

.with-depth tr.dropdown td {
  background-color: transparent;
  border: none;
}

.with-depth tr.dropdown:hover td {
  background-color: transparent;
  border: none;
}

/* Message Content */

.message-content {
  width: 100%;
  background-color: var(--message-bg);
  border: solid 1px var(--message-border);
  margin: 5px 0 0;
  border-radius: 15px;
  padding: 10px;
}

.message-content .inner-container {
  width: 100%;
  height: 100%;
  font-weight: 300;
  white-space: pre-wrap;
  text-align: left;
  padding: 5px 10px;
}

/* Pagination */

.pagination {
  margin: -10px 0 0;
}

.pagination li {
  float: left;
}

.pagination > li > a {
  width: 30px;
  height: 30px;
  background-color: var(--pagination-bg);
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 0;
  margin: 0 2px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}

.pagination li a:hover {
  color: var(--text-primary);
  background-color: var(--pagination-hover);
}

.pagination li a.active {
  color: var(--text-primary);
  background-color: var(--pagination-active);
  border: solid 1px var(--pagination-active-border);
}

.pagination .turn-pg a {
  font-size: 16px;
  padding: 0;
  color: #ccc9db;
  background-color: transparent;
  border: 1px solid #2f2b45;
}

.pagination .turn-pg:nth-child(2) a {
  margin-right: 10px;
}

.pagination .turn-pg:nth-last-child(2) a {
  margin-left: 10px;
}

.pagination .turn-pg a:hover {
  color: var(--primary-light);
  background-color: transparent;
}

/* Modal Tab */

.modal-tab {
  width: 100%;
  display: none;
  margin: 0 auto;
  animation: modalTabAnim 0.5s ease 1 forwards;
}

@keyframes modalTabAnim {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-tab.active {
  display: block;
}

.head-btn-grp {
  width: 100%;
  margin: 0 0 10px;
}

.head-btn-grp button {
  height: 30px;
  padding: 0 20px;
}

/* Modal Nav */

.modal-nav {
  width: 100%;
  border-radius: 14px;
  padding: 6px;
  flex-wrap: nowrap;
  background-color: var(--modal-nav-bg);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  margin: 0 0 20px;
}

.modal-nav a {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background-color: transparent;
  border: none;
  color: var(--modal-nav-text);
}

.modal-nav a:hover {
  color: var(--text-primary);
}

.modal-nav a.active {
  color: var(--text-primary);
  border: solid 1px var(--modal-nav-active-border);
  background-image: linear-gradient(
    to right,
    var(--accent-dark),
    var(--primary-color)
  );
  box-shadow: 0 0 5px var(--primary-shadow-color);
}

.modal-nav a i {
  font-size: 18px;
  margin-right: 8px;
}

.modal-nav a:hover i,
.modal-nav a.active i {
  color: var(--modal-nav-icon-active);
}

/* Calendar Table */

.calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
}

.calendar-table thead th {
  height: 46px;
  background-color: #2d3f59;
  font-size: 14px;
  text-align: center;
  font-weight: initial;
}

.calendar-table td {
  height: 100px;
  background-color: var(--calendar-td-bg);
  border: solid 1px var(--calendar-td-border);
  transition: 0.3s;
  position: relative;
}

.calendar-table td:hover {
  background-color: rgba(53, 222, 147, 0.2);
  border-color: var(--calendar-td-hover-border);
}

.calendar-table td .date {
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 14px;
}

.calendar-table td .stamp {
  width: 80%;
  max-width: 70px;
}

.calendar-info {
  width: 100%;
  position: absolute;
  flex-wrap: nowrap;
  left: 0;
  bottom: 10%;
}

.calendar-info .icon-panel {
  width: 30px;
  margin-right: 5px;
}

.calendar-info .text-panel .text {
  display: block;
  text-align: left;
  white-space: nowrap;
}

.calendar-info .text-panel .labels {
  font-size: 14px;
  margin: 0 0 -4%;
}

/* Attendance Information */

/* Providers Modal */

.providers-modal {
  padding: 0 !important;
  overflow: initial;
}

.providers-modal .modal-dialog {
  max-width: 100%;
  align-items: flex-start;
}

.providers-modal .modal-content {
  min-height: 100%;
  max-height: initial;
  background-color: #080e16;
  align-items: stretch;
  align-content: stretch;
  flex-direction: initial;
  flex-wrap: wrap;
}

.providers-modal .modal-wrapper {
  min-height: 100%;
  align-content: flex-start;
  background-color: transparent;
  border-radius: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  padding: 0 15px;
  flex-wrap: wrap;
  position: relative;
}

.providers-modal .modal-close {
  width: 50px;
  height: 50px;
  right: 15px;
  top: 15px;
}

.providers-modal .modal-panel {
  width: 100%;
  padding: 0;
  overflow: initial;
}

.providers-modal .logo {
  width: 218px;
  margin: 15px auto 40px;
}

/* Modal Toggle Section */

.providers-modal .toggle-section {
  margin: 0 0 30px;
}

.providers-modal .toggle-btn {
  width: calc(50% - 30px);
  padding: 10px;
  border-radius: 20px 0 0 20px;
}

.providers-modal .toggle-btn:last-child {
  border-radius: 0 20px 20px 0;
}

.providers-modal .toggle-btn .icon-panel {
  width: 60px;
  height: 60px;
  position: relative;
  left: 0;
  top: 0;
  border-radius: 16px;
}

.providers-modal .toggle-btn .text-panel {
  position: relative;
  left: 0;
  font-size: 24px;
  margin-left: 15px;
  flex-wrap: nowrap;
}

.providers-modal .toggle-btn:last-child .text-panel {
  right: 0;
  margin-right: 15px;
}

.providers-modal .toggle-btn .text-panel .en-text {
  font-size: 12px;
  margin: 0 0 -10px 10px;
  letter-spacing: 4px;
}

.providers-modal .toggle-btn:last-child .text-panel .en-text {
  margin: 0 10px -10px 0;
}

.providers-modal .toggle-btn .text-panel .kr-text,
.providers-modal .toggle-btn .text-panel .en-text {
  width: initial;
}

.providers-modal .toggle-divider {
  width: 70px;
  height: 70px;
}

.providers-modal .toggle-btn .g-hover {
  border-radius: 20px 0 0 20px;
}

.providers-modal .toggle-btn:last-child .g-hover {
  border-radius: 0 20px 20px 0;
}

/* Modal Providers Wrap */

.providers-modal .providers-wrap {
  display: none;
}

.providers-modal .providers-wrap.active {
  display: block;
}

/* Modal Bottom */

.modal-bottom {
  width: 100%;
  height: 100px;
  background-color: var(--modal-dark);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  color: #607085;
  font-size: 12px;
  letter-spacing: 2px;
}

/* Gamelist Modal */

.gamelist-header {
  margin: 0 0 20px;
}

.gamelist-header .title-panel {
  font-size: 24px;
  margin-right: auto;
  position: relative;
  top: 5px;
}

.gamelist-header .title-panel .icon-img {
  margin: 0 10px 0 0;
}

.gamelist-header .slot-link {
  height: 42px;
  padding: 0 25px;
  margin-left: 10px;
}

.search-form {
  width: 100%;
  max-width: 300px;
  height: 44px;
  border-radius: 25px;
  color: var(--text-primary);
  background-color: var(--message-bg);
  border: solid 1px var(--message-border);
  padding: 2px;
}

.search-form input {
  width: calc(100% - 42px);
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0 50px 0 15px;
  color: var(--text-primary);
  font-size: 16px;
}

.search-form input::-webkit-input-placeholder {
  color: #6c7e94;
}

.search-form input::placeholder {
  color: #6c7e94;
}

.search-form .search-btn {
  width: 38px;
  height: 100%;
  font-size: 20px;
  border-radius: 50%;
}

.search-form .search-btn i {
  color: var(--text-primary);
  text-shadow: none;
  font-size: 18px;
}

.gamelist-nav {
  box-shadow: none;
  background-color: var(--calendar-td-bg);
}

.gamelist-nav button {
  max-width: 300px;
}

.gamelist-wrap {
  width: calc(100% + 16px);
  margin: 0 -8px;
}

.game-btn {
  width: calc(12.5% - 16px);
  margin: 0 8px 16px;
  color: var(--text-primary);
  background-color: var(--game-btn-bg);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  opacity: 1;
}

.game-btn .g-panel {
  width: 100%;
  position: relative;
  transition: 0.3s;
}

.game-btn .g-title {
  max-width: 96%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-btn .g-img {
  border-radius: 15px 15px 0 0;
  transition: 0.3s;
}

.game-btn .btn-grp {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 10;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: 0.3s;
}

.game-btn:hover .btn-grp {
  opacity: 1;
}

.game-btn .btn-grp div {
  width: 100%;
}

.game-btn .play-btn {
  width: 80%;
  max-width: 120px;
  height: 36px;
  margin: 6px auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  z-index: 1;
  color: var(--text-primary);
  font-size: 14px;
  background-color: transparent;
  opacity: 0;
}

.game-btn:hover .play-btn {
  animation: glPlayAnim 1s ease 1 forwards;
}

@keyframes glPlayAnim {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-btn:hover .play-btn:nth-child(2) {
  animation: glPlay02Anim 1s ease 1 forwards;
}

@keyframes glPlay02Anim {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  20% {
    opacity: 0;
    transform: translateX(-50%);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-btn .play-btn.practice {
  color: #000000;
}

.game-btn .play-btn.practice:hover {
  color: var(--text-primary);
}

.game-btn .play-btn:before {
  content: "";
  width: calc(100% - 38px);
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  border-radius: 0 20px 20px 0;
  right: 0;
  transition: 0.3s;
  background-color: var(--game-btn-play-bg);
  box-shadow: 0 1px 0 var(--game-btn-play-border), 0 2px 3px rgba(0, 0, 0, 0.75);
  z-index: -1;
}

.game-btn .play-btn.practice:before {
  background-color: var(--game-btn-play-practice-bg);
  box-shadow: 0 1px 0 var(--text-primary), 0 2px 3px rgba(0, 0, 0, 0.75);
}

.game-btn .play-btn:hover:before {
  background-color: var(--game-btn-play-hover);
}

.game-btn .play-btn.practice:hover:before {
  background-color: var(--game-btn-play-practice-hover);
  box-shadow: 0 1px 0 #999999, 0 2px 3px rgba(0, 0, 0, 0.75);
}

.game-btn .play-btn .icon-panel {
  width: 36px;
  height: 100%;
  background-image: linear-gradient(
    var(--game-btn-play-gradient-start),
    var(--game-btn-play-gradient-end)
  );
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 var(--customer-banner-light),
    0 2px 3px rgba(0, 0, 0, 0.75);
  border-radius: 20px 0 0 20px;
  font-size: 18px;
  margin-right: 8px;
  padding: 0 0 0 6px;
  overflow: hidden;
  z-index: 1;
  position: relative;
}

.game-btn .play-btn .icon-panel:before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transition: 0.3s;
  background-image: linear-gradient(var(--primary-light), var(--primary-dark));
  z-index: -1;
  opacity: 0;
}

.game-btn .play-btn:hover .icon-panel:before {
  opacity: 1;
}

.game-btn .play-btn.practice .icon-panel {
  background-image: linear-gradient(var(--text-primary), #8b8b8b);
  color: #0a0a0a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 0 #cccccc, 0 2px 3px rgba(0, 0, 0, 0.75);
}

.game-btn .play-btn.practice .icon-panel:before {
  background-image: linear-gradient(var(--text-primary), #cccccc);
}

.game-btn .g-info {
  width: 100%;
  padding: 0 5px 10px;
}

.game-btn .g-info:before {
  width: 100%;
  height: 100%;
  max-height: 30px;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  background-image: linear-gradient(
    rgba(34, 51, 69, 0),
    rgba(34, 51, 69, 0.75),
    rgba(34, 51, 69, 1)
  );
}

.game-btn .g-info .text {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.game-btn .g-info .provider {
  color: #8b9eb3;
  font-size: 12px;
  margin: -0.5% 0 0;
  letter-spacing: 2px;
}

@media (min-width: 1200px) {
  .game-btn:hover .play-btn {
    opacity: 1;
    transform: rotate(0deg);
  }

  .game-btn:hover .g-img {
    transform: scale(0.96);
    opacity: 0.5;
    filter: blur(2px);
  }
}

/* Mobile Menu */

.mobile-menu {
  width: 100%;
  height: 60px;
  background-color: var(--mobile-menu-bg);
  background-image: var(--mobile-menu-gradient);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1010;
  display: none;
}

.mobile-menu a {
  width: 20%;
  height: 100%;
}

.mobile-menu a .icon-panel i {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--mobile-menu-icon-gradient);
  background-size: 100% 100%;
  font-size: 24px;
}

.mobile-menu a .title {
  width: 100%;
  color: #a1aab7;
  font-size: 11px;
  margin: -3px 0 5px;
}

.mobile-menu .sbg-btn .icon-panel {
  width: 54px;
  height: 54px;
  margin: -17px 0 0;
  position: relative;
}

.mobile-menu .sbg-btn .icon-panel:before {
  content: "";
  width: 200%;
  height: 200%;
  border-radius: 50%;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  position: absolute;
  background-color: #1d336a;
  background-image: var(--mobile-menu-gradient);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5);
  z-index: -1;
  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
  mask-image: linear-gradient(
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
}

/* Popup Wrapper */

.popup-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  z-index: 1090;
  pointer-events: none;
  padding: 10px 50px;
  overflow-y: scroll;
}

.popup-container {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  align-items: flex-start;
  align-content: flex-start;
}

.popup-container::-webkit-scrollbar {
  width: 0;
}

.popup-content {
  background-color: #171717;
}

.popup-panel {
  width: calc(25% - 16px);
  max-width: 400px;
  pointer-events: auto;
  margin: 8px;
  display: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.popup-panel.active {
  display: block;
  animation: popupOpenAnim 1s ease 1 forwards;
}

@keyframes popupOpenAnim {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.popup-panel .popup-header {
  width: 100%;
  height: 40px;
  background-color: var(--popup-header-bg);
  padding: 0 5px 0 10px;
  color: var(--text-primary);
  font-size: 12px;
}

.popup-panel .popup-header .title-panel {
  font-size: 16px;
}

.popup-panel .popup-header .title-panel i {
  color: var(--popup-header-icon);
  font-size: 20px;
  margin-right: 5px;
}

.popup-panel .popup-footer {
  width: 100%;
  min-height: 40px;
  background-color: var(--popup-header-bg);
  padding: 10px 15px;
  color: var(--text-primary);
  font-size: 12px;
}

.popup-panel .close-button {
  height: 28px;
  color: var(--text-primary);
  font-size: 14px;
  background-color: var(--primary-color);
  border: solid 1px var(--primary-color);
  border-radius: 5px;
  padding: 0 15px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  outline: none;
}

.popup-panel .popup-header .close-button {
  height: initial;
  padding: 0;
  background-color: transparent;
  border: none;
}

.popup-panel .close-button:hover {
  background-color: var(--popup-close-hover);
  border-color: var(--primary-light);
}

.popup-panel .popup-header .close-button:hover {
  background-color: transparent;
  border: none;
}

.popup-panel .close-button i {
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  transition: 0.3s;
  text-shadow: none;
}

.popup-panel .popup-header .close-button i {
  color: var(--text-primary);
  font-size: 24px;
}

.popup-panel .close-button:hover i {
  color: var(--notification-red);
}

@media (max-width: 1199px) {
  .popup-wrapper {
    padding: 15px;
  }

  .popup-panel {
    width: calc(100% - 30px);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .popup-panel:first-child {
    width: 100%;
    position: relative;
  }
}

.r-0 {
  right: 0 !important;
}

.convert-btn {
  height: 18px;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 3px;
  margin: 0 0 0 5px;
}

/* Event Wrapper */

.event-wrapper {
  width: calc(100% + 20px);
  margin: 0 -10px;
}

.event-btn {
  width: calc(33.33% - 20px);
  margin: 0 10px 20px;
  display: inline-block;
  position: relative;
  border: solid 1px var(--event-btn-border);
  overflow: hidden;
  border-radius: 15px;
}

.event-btn:hover {
  border-color: var(--event-btn-border-hover);
  transform: scale(1.1);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
}

.event-btn .a-footer {
  width: 100%;
  height: 44px;
  padding: 0 10px 0 15px;
  transition: 0.3s;
  background-color: var(--event-btn-footer-bg);
}

.event-btn:hover .a-footer {
  background-color: var(--event-btn-footer-hover);
}

.event-btn .a-footer .title-panel {
  width: calc(100% - 85px);
}

.event-btn .a-footer .title {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  text-align: left;
}

.event-btn .a-footer button {
  width: 80px;
  height: 26px;
  font-size: 14px;
}

.event-btn .new-tag {
  height: 28px;
  padding: 0 10px;
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  font-size: 14px;
}

/* Subpages */

.subpage-wrapper .jackpot-wrapper {
  margin: 0 -15px;
}

/* Attend Nav */

.submit-overlay {
  position: fixed;
  top: 0;
  background-color: #000000a1;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  display: none;
}

.submit-overlay i {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 40px;
  color: var(--text-primary);
  animation: rotate_icon 1s linear infinite;
  transform-origin: 50% 50%;
}

.footer-logo {
  height: 50px;
  width: 50px;
}

@keyframes rotate_icon {
  100% {
    transform: rotate(360deg);
  }
}

.logo {
  width: 218px;
  display: inline-block;
  position: absolute;
  left: 0;
  right: -42px;
  top: 10px;
  margin: 0 auto;
}

.logo img,
.logo div {
  position: absolute;
}

.logo .logo-img,
.logo div .d-img {
  width: 58%;
  position: relative;
}

#rotatingleaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  animation: spin 8s linear infinite;
  transform-origin: center center;
}

#small-g {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  opacity: 1;
}

/* rotation animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.header-logo {
  top: 25%;
  position: absolute;
}

.header-logo-image {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-inline {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 5px;
}
.logo-inline img {
  width: 90px;
  /* adjust size as needed */
  height: auto;
  transition: transform 0.2s ease;
}

.logo-inline img:hover {
  transform: scale(1.05);
}

.garden-gif {
  width: 110px;
}

.logo-inline .casino-logo {
  width: 70px;
}

.logo-inline .garden-logo {
  width: 100px;
}

@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.garden-logo {
  animation: fadeSlideDown 1.5s ease-in-out alternate;
}

.casino-logo {
  animation: fadeSlideUp 1.5s ease-in-out alternate;
}
/* Responsive  Styles */

.mobile {
  display: none !important;
}

.left-menu-btn {
  width: 35px;
  background-color: transparent;
  border: none;
  padding: 0;
  position: relative;
  z-index: 100;
}

.left-menu-btn span {
  width: 100%;
  display: block;
  height: 2px;
  background-color: #8bbf8f;
  margin: 0 0 9px;
  border-radius: 2px;
}

.left-menu-btn span:first-child {
  position: relative;
  margin-top: 0;
  top: 0;
  transition: top 0.3s 0.3s, transform 0.3s 0s;
}

.left-menu-btn span:nth-child(2) {
  width: calc(100% - 8px);
  opacity: 1;
  transition: opacity 0.3s;
  margin-right: auto;
}

.left-menu-btn span:last-child {
  margin-bottom: 0;
  position: relative;
  top: 0;
  transition: top 0.3s 0.3s, transform 0.3s 0s;
}

.left-menu-btn.opened span:first-child {
  width: 100%;
  top: 11px;
  transform: rotate(-45deg);
  transition: top 0.3s 0s, transform 0.3s 0.3s, color 0.3s 0.3s;
  box-shadow: none;
}

.left-menu-btn.opened span:nth-child(2) {
  opacity: 0;
}

.left-menu-btn.opened span:last-child {
  width: 100%;
  top: -11px;
  transform: rotate(45deg);
  transition: top 0.3s 0s, transform 0.3s 0.3s;
  box-shadow: none;
}

.right-menu-btn {
  width: 40px;
  height: 38px;
  margin-left: 10px;
}

.right-menu-btn i {
  margin: 0;
}

.right-menu-btn .normal-icon {
  transition: 0.3s;
}

.right-menu-btn.opened .normal-icon {
  transform: rotate(90deg);
  opacity: 0;
}

.right-menu-btn .hover-icon {
  position: absolute;
  opacity: 0;
  transition: 0.3s;
  transform: rotate(-90deg);
  font-size: 36px;
}

.right-menu-btn.opened .hover-icon {
  opacity: 1;
  transform: rotate(0deg);
}

.sn-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 90;
  background-color: rgba(2, 7, 12, 0.75);
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
  webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.sn-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* - - - - - Header Queries - - - - - */

@media (max-width: 1559px) {
  .header-section .container {
    max-width: 100%;
  }
}

@media (max-width: 1400px) {
  .header-section .logo {
    width: 180px;
    top: 22px;
  }

  .account-info li {
    padding-left: 15px;
  }

  .account-info .level-panel {
    margin: 0;
  }

  .account-info li.btn-grp {
    padding-left: 10px;
  }

  .account-info li.btn-grp button {
    width: 60px;
  }

  .main-menu ul {
    width: calc(50% - 100px);
  }
}

@media (max-width: 1199px) {
  .mobile {
    display: block !important;
  }

  .desktop {
    display: none !important;
  }

  .wrapper {
    padding-top: 60px;
    padding-bottom: 204px;
  }

  .container {
    max-width: 100%;
  }

  .mobile-menu {
    display: block;
  }

  .footer-section {
    height: initial;
    padding: 25px 0 35px;
    margin-top: -214px;
  }

  .footer-section .logo {
    width: 120px;
  }

  .footer-section .copyright-text {
    margin-top: 10px;
  }

  .header-main {
    height: 60px;
    background-color: var(--accent-dark);
  }

  .header-main:before {
    height: calc(100% - 1px);
  }

  .header-menu {
    height: 0;
  }

  .header-section .logo {
    width: 110px;
    top: -5px;
  }

  .before-login button {
    width: 80px;
    height: 36px;
    box-shadow: none;
    border-radius: 8px;
    font-size: 14px;
    margin-left: 5px;
  }

  /* Sidebar Left  */

  .sidebar-left {
    width: 100%;
    max-width: 280px;
    height: 100%;
    top: 60px;
    left: 0;
    transform: translateX(-100%);
    background-color: #0c1623;
    border: none;
    border-radius: 0;
    margin: 0 !important;
    padding: 15px 20px 90px;
    display: block;
    overflow-y: auto;
    transition: 0.5s;
    align-content: flex-start;
    z-index: 98;
    position: fixed;
  }

  .sidebar-left.active {
    transform: translateX(0);
  }

  .sidebar-left::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  .sidebar-left::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .main-menu ul {
    width: 100%;
    height: initial;
    flex-wrap: wrap;
  }

  .main-menu ul li a {
    width: 100%;
    height: 48px;
    color: #8ba4bf;
    justify-content: flex-start;
  }

  .main-menu ul li a i {
    color: var(--primary-light);
  }

  .main-menu ul li 

  .main-menu ul li 

  /* Sidebar Right  */

  .sidebar-right {
    width: 100%;
    max-width: 280px;
    height: 100%;
    top: 60px;
    right: 0;
    transform: translateX(100%);
    background-color: #0c1623;
    border: none;
    border-radius: 0;
    margin: 0 !important;
    padding: 15px 20px 90px;
    display: block;
    overflow-y: auto;
    transition: 0.5s;
    align-content: flex-start;
    z-index: 98;
    position: fixed;
  }

  .sidebar-right.active {
    transform: translateX(0);
  }

  .sidebar-right::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  .sidebar-right::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .account-info li,
  .account-info li.btn-grp {
    padding-left: 0;
  }

  .account-info li .acc-row {
    height: 48px;
    margin: 1px 0;
    background-color: rgba(113, 155, 202, 0.1);
    border-radius: 8px;
  }

  .account-info .btn-grp {
    margin: 10px 0 0;
  }

  .account-info .btn-grp .acc-row {
    height: initial;
    margin: 0;
    background-color: rgba(113, 155, 202, 0);
    border-radius: 0;
    flex-wrap: nowrap;
  }

  .account-info li .acc-row .icon-panel {
    min-width: 46px;
    padding: 0 10px;
    font-size: 14px;
  }

  .account-info li.btn-grp button,
  .account-info li.btn-grp button:first-child {
    width: calc(100% - 4px);
    height: 36px;
    margin: 2px;
    box-shadow: none;
    font-size: 14px;
  }

  .account-info .level-panel {
    width: 100%;
    height: 70px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: none;
    margin: 0 0 10px;
    justify-content: flex-start;
    padding: 0 0 0 5px;
  }
}

@media (max-width: 500px) {
  .header-section .container {
    padding-right: 10px;
  }

  .header-section .logo {
    width: 100px;
    top: -2px;
  }

  .header-main:before {
    width: 180px;
  }

  .before-login button {
    width: 60px;
  }
}

@media (max-width: 414px) {
  .before-login button {
    width: 56px;
    height: 32px;
    font-size: 12px;
  }
}

/* - - - - - Visual Queries - - - - - */

@media (max-width: 1559px) {
  .visual-section {
    height: 400px;
  }

  .visual-carousel .carousel-wrap {
    max-width: 1140px;
    padding: 0 2% 35px;
  }

  .visual-carousel h1 {
    font-size: 66px;
  }

  .visual-carousel h2 {
    font-size: 40px;
  }

  .visual-carousel h3 {
    font-size: 30px;
  }

  .visual-carousel button {
    margin-top: 4%;
  }
}

@media (max-width: 1199px) {
  .visual-section {
    height: 33vw;
  }

  .visual-carousel .carousel-wrap {
    padding: 0 4% 0;
  }

  .carousel-indicators {
    bottom: 15px;
  }

  .visual-carousel h1 {
    font-size: 5.5vw;
  }

  .visual-carousel h2 {
    font-size: 2.8vw;
  }

  .visual-carousel h3 {
    font-size: 2.52vw;
  }

  .visual-carousel button {
    width: initial;
    height: initial;
    font-size: 1.68vw;
    margin: 4% 0 0;
    padding: 1.7% 5.25%;
  }

  .garden-gif {
    width: 50px;
    margin-top: -10px;
  }

  .logo-inline {
    margin-top: -10px;
  }

  .logo-inline .casino-logo {
    width: 50px;
  }

  .logo-inline .garden-logo {
    width: 80px;
  }
}

@media (max-width: 500px) {
  .visual-section {
    height: 35vw;
  }

  .visual-carousel .carousel-wrap {
    padding: 0 8%;
  }

  .carousel-indicators {
    bottom: 8px;
  }

  .visual-carousel h2 {
    font-size: 2.9vw;
  }

  .visual-carousel h3 {
    font-size: 2.6vw;
  }

  .visual-carousel button {
    font-size: 2.5vw;
  }

  .carousel-indicators li {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }
}

/* - - - - - Jackpot Queries - - - - - */

@media (max-width: 1559px) {
  .jackpot-wrapper .label-panel {
    font-size: 44px;
  }

  .jackpot-wrapper .amount-panel .amount {
    font-size: 60px;
  }

  .jackpot-wrapper .amount-panel .symbol {
    font-size: 44px;
  }
}

@media (max-width: 1199px) {
  .jackpot-wrapper {
    width: 100%;
    height: 8.34vw;
    margin: 5px 0 0;
    padding: 0;
  }

  .jackpot-wrapper .jackpot-panel .side-bg:before,
  .jackpot-wrapper .jackpot-panel .side-bg:after {
    width: 4.1%;
  }

  .jackpot-wrapper .label-panel {
    font-size: 3.7vw;
    margin-left: 12%;
  }

  .jackpot-wrapper .amount-panel .amount {
    font-size: 5.01vw;
  }

  .jackpot-wrapper .amount-panel .symbol {
    font-size: 3.7vw;
  }

  .jackpot-wrapper .label-panel .icon-panel {
    min-width: initial;
    width: 54%;
    height: initial;
    margin-right: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-106%);
  }
}

@media (max-width: 991px) {
  .jackpot-wrapper {
    height: 9vw;
  }

  .jackpot-wrapper .jackpot-panel:before {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }

  .jackpot-wrapper .jackpot-panel .glow-bg:before,
  .jackpot-wrapper .jackpot-panel .glow-bg:after {
    width: 30%;
    height: calc(100% - 20px);
  }
}

@media (max-width: 767px) {
  .jackpot-wrapper {
    height: 10vw;
  }

  .jackpot-wrapper .jackpot-panel .side-bg:before,
  .jackpot-wrapper .jackpot-panel .side-bg:after {
    width: 5.1%;
  }
}

@media (max-width: 500px) {
  .jackpot-wrapper {
    height: 14vw;
  }

  .jackpot-wrapper .jackpot-panel .side-bg:before,
  .jackpot-wrapper .jackpot-panel .side-bg:after {
    width: 7%;
  }

  .jackpot-wrapper .label-panel .icon-panel {
    display: none !important;
  }

  .jackpot-wrapper .label-panel {
    font-size: 4.8vw;
    margin-left: 0;
  }

  .jackpot-wrapper .amount-panel .amount {
    font-size: 5.8vw;
  }

  .jackpot-wrapper .amount-panel .symbol {
    font-size: 4.8vw;
  }
}

/* - - - - - Toggle Queries - - - - - */

@media (max-width: 1199px) {
  .main-toggle .toggle-btn {
    width: calc(50% - 46px);
  }

  .main-toggle .toggle-btn .g-size {
    width: 120%;
  }

  .main-toggle .toggle-btn .g-img {
    width: 110%;
  }

  .toggle-divider {
    width: 80px;
    height: 80px;
  }

  .main-toggle .toggle-btn .text-panel {
    font-size: 30px;
  }

  .main-toggle .toggle-btn .text-panel .en-text {
    font-size: 16px;
  }

  .main-toggle .toggle-btn .icon-panel {
    width: 70px;
    height: 70px;
    border-radius: 15px;
  }

  .main-toggle .toggle-btn .icon-panel img {
    transform: translateX(0);
    animation: none;
  }

  .main-toggle .toggle-btn:hover .icon-panel img {
    animation: none;
  }
}

@media (max-width: 991px) {
  .main-toggle .toggle-btn .g-size {
    width: 130%;
  }

  .main-toggle .toggle-btn .g-img {
    width: 116%;
  }

  .main-toggle .toggle-btn .text-panel {
    left: 60%;
  }

  .main-toggle .toggle-btn:last-child .text-panel {
    right: 54%;
    left: auto;
  }

  .main-toggle .toggle-btn .icon-panel {
    left: 10px;
    top: 10px;
    border-radius: 15px;
  }

  .main-toggle .toggle-btn:last-child .icon-panel {
    left: auto;
    right: 10px;
  }

  .main-toggle .toggle-btn .text-panel {
    font-size: 24px;
  }

  .main-toggle .toggle-btn .text-panel .en-text {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .page-content .toggle-divider {
    display: none !important;
  }

  .main-toggle .toggle-btn {
    /*width: 100%;
    margin: 0 0 10px;
    border-radius: 20px;
    background-image: linear-gradient(
      to right,
      var(--accent-dark),
      var(--primary-color)
    );*/

	width: 100%;
    margin: 0 0 10px;
    border-radius: 20px;
    background:
    radial-gradient(circle at top center,
      rgba(102, 223, 172, 0.35),   
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(#001c12, #000000);
  }

  .main-toggle .toggle-btn:before {
    display: none;
  }

  .main-toggle .toggle-btn .g-size {
    width: 100%;
  }

  .main-toggle .toggle-btn .g-img {
    width: 94%;
  }

  .toggle-btn:last-child .g-img {
    left: 0;
    right: auto;
    transform-origin: center;
    transform: rotateY(180deg);
  }

  .main-toggle .toggle-btn .text-panel {
    font-size: 4.5vw;
  }

  .main-toggle .toggle-btn .text-panel .en-text {
    font-size: 2.5vw;
  }

  .main-toggle .toggle-btn .text-panel {
    left: 54%;
  }

  .main-toggle .toggle-btn:last-child .text-panel {
    left: 54%;
    right: auto;
    text-align: left !important;
  }

  .main-toggle .toggle-btn:last-child .icon-panel {
    left: 10px;
    right: auto;
  }
}

@media (max-width: 500px) {
  .page-content .toggle-section {
    margin: 15px 0 0;
  }

  .main-toggle .toggle-btn .text-panel {
    font-size: 4.8vw;
  }

  .main-toggle .toggle-btn .text-panel .en-text {
    font-size: 2.8vw;
  }

  .main-toggle .toggle-btn .g-size {
    width: 92%;
  }

  .main-toggle .toggle-btn .g-img {
    width: 84%;
    left: 8%;
  }
}

/* - - - - - Board Queries - - - - - */

@media (max-width: 1559px) {
  .rt-board {
    padding: 15px 15px;
  }

  .table-ticker {
    width: calc(100% + 20px);
    margin: 0 -10px;
  }

  .table-ticker ul li .icon-panel {
    margin: 0 5px 0 0;
  }

  .table-ticker ul li div.amount {
    font-size: 16px;
  }

  .table-ticker ul li .td {
    font-size: 14px;
  }

  .board-wrap .c-banner {
    font-size: 20px;
  }

  .board-wrap .c-banner .icon-panel {
    margin-right: 10px;
  }

  .eveter-wrap {
    padding: 0;
  }

  .nt-board table td a {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
}

@media (max-width: 1199px) {
  .rt-board {
    width: calc(50% - 20px);
    margin: 0 10px 20px;
    border-radius: 20px;
  }

  .rt-board:after {
    border-radius: 20px;
  }

  .rt-board.winning-board {
    width: 100%;
  }

  .eveter-wrap {
    width: calc(100% + 20px);
    padding: 0 0;
    margin: 0 -10px;
  }

  .board-wrap {
    background-color: transparent;
    border-radius: 0;
    margin: 40px 0 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  .board-wrap:before,
  .board-wrap:after {
    display: none;
  }

  .nt-board {
    width: calc(50% - 20px);
    margin: 0 10px 20px;
    background-color: var(--accent-dark);
    border-radius: 20px;
    padding: 10px;
  }

  .page-content {
    padding-bottom: 30px;
  }

  .customer-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .customer-board {
    max-width: 100%;
  }

  .customer-wrap:before {
    display: none;
  }

  .board-wrap .c-banner {
    margin: 0 10px 10px;
  }
}

@media (max-width: 767px) {
  .realtime-wrap {
    width: 100%;
    margin: 0;
  }

  .rt-board {
    width: 100%;
    margin: 0 0 15px;
    padding-bottom: 0;
  }

  .nt-board {
    width: 100%;
    margin: 0 0 20px;
  }

  .rt-board .header {
    font-size: 24px;
  }

  .winning-board .header {
    padding-left: 45px;
  }

  .winning-board .header .icon-img {
    width: 36px;
  }

  .rt-board .content {
    overflow: hidden;
    max-height: 160px;
  }

  .winning-board .content {
    overflow: initial;
    max-height: initial;
  }

  .board-wrap {
    margin: 0 0 0;
  }
}

@media (max-width: 500px) {
  .nt-board {
    padding: 5px;
  }

  .nt-board .header {
    height: 50px;
  }

  .table-ticker ul li {
    height: 40px;
  }

  .nt-board table td {
    height: 32px;
  }

  .realtime-section {
    margin: 10px 0 20px;
  }
}

/* - - - - - Providers Queries - - - - - */

@media (max-width: 1559px) {
  .sc-btn .g-panel {
    border-radius: 15px;
  }

  .sc-btn .icon-panel {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    left: 5px;
    top: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
  }

  .sc-btn .icon-panel img {
    max-width: 36px;
    max-height: 36px;
  }
}

@media (max-width: 1024px) {
  .sc-btn {
    width: calc(20% - 20px);
    margin: 0 10px 20px;
  }

  .page-content .main.sc-btn:nth-child(6) {
    display: none;
  }
}

@media (max-width: 900px) {
  .sc-btn {
    width: calc(25% - 20px);
    margin: 0 10px 20px;
  }

  .page-content .main.sc-btn:nth-child(5) {
    display: none;
  }
}

@media (max-width: 600px) {
  .providers-section {
    margin: 0;
  }

  .providers-section .header {
    margin: 0 0 10px;
  }

  .sc-btn {
    width: calc(33.33% - 20px);
  }

  .page-content .main.sc-btn:nth-child(4) {
    display: none;
  }

  .sc-btn .g-footer {
    width: 100%;
    height: 36%;
  }

  .sc-btn .g-footer .kr-text {
    font-size: 14px;
  }

  .sc-btn .g-footer .en-text {
    font-size: 10px;
  }
}

@media (max-width: 500px) {
  .providers-wrap .providers-panel {
    width: calc(100% + 14px);
    margin: 0 -7px;
  }

  .sc-btn {
    width: calc(33.33% - 14px);
    margin: 0 7px 15px;
  }

  .sc-btn .icon-panel {
    width: 40px;
    height: 40px;
  }

  .sc-btn .icon-panel img {
    max-width: 30px;
    max-height: 30px;
  }

  .providers-section .header .title-panel {
    font-size: 20px;
  }
}

/* - - - - - Footer Queries - - - - - */

@media (max-width: 500px) {
  .footer-section .copyright-text {
    letter-spacing: 0;
  }
}

/* - - - - - Providers Modal Queries - - - - - */

@media (max-width: 1199px) {
  .providers-modal .logo {
    width: 140px;
    margin: 15px auto 20px;
  }

  .providers-modal .toggle-section {
    max-width: 700px;
    margin: 0 auto 20px;
  }

  .providers-modal .toggle-btn {
    padding: 5px;
    width: calc(50% - 20px);
  }

  .providers-modal .toggle-divider {
    width: 50px;
    height: 50px;
  }

  .providers-modal .toggle-btn .text-panel {
    font-size: 20px;
  }

  .providers-modal .toggle-btn .text-panel .en-text {
    display: none;
  }
}

@media (max-width: 540px) {
  .providers-modal .container {
    padding: 0;
  }

  .providers-modal .toggle-btn,
  .providers-modal .toggle-btn .g-hover {
    border-radius: 15px 0 0 15px;
  }

  .providers-modal .toggle-btn:last-child,
  .providers-modal .toggle-btn:last-child .g-hover {
    border-radius: 0 15px 15px 0;
  }

  .providers-modal .toggle-btn .icon-panel {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  .providers-modal .toggle-btn .icon-panel img {
    max-width: 30px;
    max-height: 30px;
  }

  .providers-modal .toggle-btn .text-panel {
    font-size: 16px;
  }

  .providers-modal .toggle-btn .text-panel {
    margin-left: 8px;
  }

  .providers-modal .toggle-btn:last-child .text-panel {
    margin-right: 8px;
  }
}

/* - - - - - Gamelist Queries - - - - - */

@media (max-width: 1559px) {
  .game-btn {
    width: calc(16.66% - 16px);
  }
}

@media (max-width: 991px) {
  .game-btn {
    width: calc(20% - 16px);
  }
}

@media (max-width: 840px) {
  .gamelist-header .title-panel {
    width: 100%;
    margin-bottom: 20px;
  }

  .search-form {
    max-width: 100%;
  }

  .gamelist-header .slot-link {
    position: absolute;
    right: 15px;
    top: 0;
    height: 40px;
    padding: 0 20px;
  }

  .game-btn .g-info .text {
    font-size: 14px;
  }

  .game-btn .g-info .provider {
    font-size: 11px;
  }
}

@media (max-width: 767px) {
  .game-btn {
    width: calc(25% - 16px);
  }
}

@media (max-width: 680px) {
  .game-btn .play-btn {
    font-size: 12px;
    height: 30px;
  }

  .game-btn .play-btn:before {
    width: calc(100% - 30px);
  }

  .game-btn .play-btn .icon-panel {
    width: 28px;
    padding: 3px 0 0 6px;
  }
}

@media (max-width: 500px) {
  .gamelist-header .title-panel {
    font-size: 20px;
  }

  .gamelist-header .slot-link {
    right: 0;
    font-size: 14px;
    padding: 0 10px;
  }

  .modal-nav a {
    font-size: 14px;
  }

  .game-btn {
    width: calc(33.33% - 16px);
  }

  .game-btn .g-info {
    padding: 0 5px 5px;
  }

  .game-btn .g-info:before {
    max-height: 20px;
  }

  .game-btn .g-info .provider {
    display: none;
  }

  .game-btn .g-info .text {
    font-size: 12px;
  }
}

@media (max-width: 414px) {
  .game-btn .play-btn {
    font-size: 10px;
    height: 28px;
  }

  .game-btn .play-btn:before {
    width: calc(100% - 28px);
  }

  .game-btn .play-btn .icon-panel {
    width: 26px;
    padding: 3px 0 0 4px;
    margin-right: 6px;
  }
}

/* - - - - - Modal Queries - - - - - */

@media (max-width: 1199px) {
  .header-section {
    z-index: 1060;
  }

  .providers-modal .logo {
    display: none;
  }

  .providers-modal .modal-close {
    display: none;
  }

  .dashboard-modal {
    padding: 0 !important;
  }

  .dashboard-modal .modal-content {
    height: 100%;
    max-height: 100%;
  }

  .dashboard-modal .modal-wrapper {
    min-height: 100%;
    padding: 0;
  }

  .dashboard-modal .modal-close {
    top: 13px;
    right: 15px;
    z-index: 90;
  }

  .dashboard-modal .modal-sidebar {
    display: none !important;
  }

  .modal-panel,
  .dashboard-modal .modal-panel {
    width: 100%;
    overflow-y: initial;
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .modal {
    padding: 0 !important;
    overflow-y: auto;
  }

  .modal-dialog {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    align-items: flex-start;
    background-color: #0c1623;
  }

  .modal-close,
  .dashboard-modal .modal-close {
    top: 73px;
    right: 15px;
    z-index: 90;
  }

  .modal-content,
  .subpage-modal .modal-content {
    height: auto;
    max-height: initial;
    min-height: initial;
    position: relative;
  }

  .modal-wrapper,
  .subpage-modal .modal-wrapper {
    min-height: initial;
    border-radius: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: initial;
    box-shadow: none;
    background-color: transparent;
  }

  .modal-header {
    width: 100%;
    height: 60px;
    top: 60px;
    border-bottom: solid 1px rgba(113, 155, 202, 0.15);
  }

  .modal .logo {
    display: none;
  }

  .loginModal .modal-dialog {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .mypageModal .modal-nav {
    flex-wrap: wrap;
  }

  .mypageModal .modal-nav a {
    width: 33.33%;
    height: 38px;
  }

  .money-table li {
    width: calc(33.33% - 4px);
  }

  .calendar-info .flex-nowrap {
    flex-wrap: wrap !important;
  }

  .calendar-info .icon-panel {
    width: 20px;
    margin: 0 0 5px;
  }

  .calendar-info .text-panel {
    width: 100%;
  }

  .calendar-info .text-panel .text {
    text-align: center;
    font-size: 11px;
  }

  .calendar-info .text-panel .labels {
    font-size: 10px;
    margin: 0 0 -4%;
  }

  

  .event-btn {
    width: calc(50% - 20px);
  }
}

@media (max-width: 500px) {
  .modal-panel {
    padding-bottom: 30px;
  }

  .form-container .form-group .infos .btn-grp button {
    width: calc(33.33% - 4px);
    margin: 0 2px 4px;
  }

  /* Tables */

  .bs-table thead th,
  .bs-table tbody td {
    font-size: 14px;
  }

  .bs-table tr .count-td {
    width: auto;
    padding: 0;
  }

  .bs-table tr .count-tag {
    width: 20px;
    height: 20px;
  }

  .bs-table tr td a {
    max-width: 180px;
  }

  .bs-table tr .title-td {
    max-width: 180px;
    padding-left: 5px;
  }

  .bs-table tr .date-td {
    font-size: 12px;
  }

  .bs-table tr .nav-td {
    width: auto;
  }

  .new-icon {
    margin-left: 0;
  }

  .form-footer button {
    font-size: 16px;
  }

  .form-container .form-group input,
  .select-input {
    height: 48px;
  }

  .form-container .form-group .infos .btn-grp button {
    height: 42px;
  }

  .modal-badge {
    padding: 10px;
  }

  .modal-badge .icon-panel {
    min-width: 70px;
    height: 70px;
  }

  .modal-badge .text-panel {
    font-size: 12px;
  }

  .modal-badge .text-panel .link {
    font-size: 16px;
  }

  .c-banner {
    max-width: 100%;
  }

  .board-wrap .c-banner {
    margin: 0 0 10px;
  }

  .modal .c-banner {
    margin: 0 0 10px;
  }

  .modal-nav a i {
    margin-right: 5px;
  }

  .modal-header {
    padding: 0 15px;
  }

  .modal-header .title-panel i {
    font-size: 36px;
  }

  .money-table li {
    padding: 0 5px;
    font-size: 12px;
  }

  .modal-bottom {
    letter-spacing: 0;
  }

  .calendar-table td {
    padding: 10px 0 0;
  }

  .calendar-table td .date {
    font-size: 12px;
  }

  .form-container .labels .notif {
    display: inline-block;
    font-size: 12px;
    margin-left: auto;
  }

  .event-wrapper {
    width: calc(100% + 10px);
    margin: 0 -5px;
  }

  .event-btn {
    width: calc(50% - 10px);
    margin: 0 5px 10px;
  }

  .event-btn .a-footer {
    height: 38px;
    padding: 0 5px 0 10px;
  }

  .event-btn .a-footer .title {
    font-size: 12px;
  }

  .event-btn .a-footer button {
    width: 70px;
    height: 24px;
  }

  .eventModal .modal-nav {
    flex-wrap: wrap;
  }

  .eventModal .modal-nav a {
    width: 33.33%;
    height: 32px;
  }
}

/* - - - - - Subpages Queries - - - - - */

@media (max-width: 1199px) {
  .subpage-wrapper .jackpot-wrapper {
    margin: 20px -15px;
  }

  .dashboard-modal .modal-wrapper {
    border-radius: 15px;
    overflow: hidden;
  }

  .dashboard-modal .modal-panel {
    padding-top: 80px;
  }

  .dashboard-modal .modal-header {
    top: 0;
  }
}

@media (max-width: 500px) {
  .subpage-wrapper .jackpot-wrapper {
    margin: 10px 0;
  }

  .modal-badge .text-panel .link {
    white-space: break-spaces;
  }

  .c-banner .text-panel .text {
	font-size: 20px;
  }

  .header-logo-image {
	gap: 5px;
  }

  .garden-gif {
    width: 40px;
    margin-top: -5px;
  }

  .logo-inline {
    margin-top: -5px;
  }

  .logo-inline .garden-logo {
    width: 60px;
  }

  .logo-inline .casino-logo {
    width: 40px;
  }
}

@media (max-width: 414px) {
  

  

  
}

/* ═══════════════════════════════════════
   CUSTOM CSS for user5.js compatibility
   ═══════════════════════════════════════ */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-backdrop,rgba(2,7,12,0.75));z-index:99999;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.modal-overlay.active{display:flex}
.modal-box{background:var(--modal-bg,#01140d);border:1px solid var(--primary-color,#097a4a);border-radius:16px;width:420px;max-width:92vw;max-height:85vh;overflow-y:auto;padding:28px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:#64748b;font-size:1.2rem;cursor:pointer;z-index:2}
.modal-title{font-size:1.3rem;font-weight:900;color:var(--primary-light,#66dfac);text-align:center;letter-spacing:0.15em;margin-bottom:4px}
.modal-sub{text-align:center;font-size:0.78rem;color:#8ba4bf;margin-bottom:18px}
.m-input{width:100%;background:var(--modal-dark,#01140d);border:1px solid rgba(53,222,147,0.15);border-radius:8px;padding:11px 14px;color:#fff;font-size:0.85rem;margin-bottom:10px;box-sizing:border-box;outline:none}
.m-input:focus{border-color:var(--primary-color);box-shadow:0 0 8px rgba(53,222,147,0.2)}
.m-btn{width:100%;padding:12px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--primary-color,#097a4a),var(--secondary-color,#1fb876));color:#fff;font-size:0.9rem;font-weight:700;cursor:pointer}
.m-btn:hover{filter:brightness(1.1)}
.m-divider{height:1px;background:rgba(53,222,147,0.1);margin:16px 0}
.m-switch{text-align:center;font-size:0.78rem;color:#8ba4bf}
.m-switch a{color:var(--primary-light);cursor:pointer}
.shine-wrap{position:relative;overflow:hidden}
.reg-section-title{display:flex;align-items:center;gap:8px;font-size:0.9rem;font-weight:700;color:var(--primary-light);margin:16px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(53,222,147,0.1)}
.reg-field{margin-bottom:10px}
.reg-label{font-size:0.78rem;color:#8ba4bf;margin-bottom:4px;display:block}
.reg-req{color:#e5361c}
.reg-input-wrap{position:relative}
.reg-check{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:0.85rem}
.reg-msg{font-size:0.7rem;margin-top:2px;min-height:16px}
.bank-dropdown{position:relative;margin-bottom:10px}
.bank-selected{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.15);border-radius:8px;color:#fff;cursor:pointer;font-size:0.85rem}
.bank-arrow{transition:transform 0.2s;font-size:0.75rem;color:#64748b}
.bank-options{display:none;position:absolute;top:100%;left:0;right:0;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.2);border-radius:8px;z-index:10;max-height:240px;overflow-y:auto;margin-top:4px}
.bank-options.open{display:block}
.bank-search-wrap{padding:8px;position:sticky;top:0;background:var(--modal-dark)}
.bank-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#64748b}
.bank-search{width:100%;padding:8px 8px 8px 30px;background:rgba(53,222,147,0.05);border:1px solid rgba(53,222,147,0.1);border-radius:6px;color:#fff;font-size:0.8rem;box-sizing:border-box}
.bank-list{padding:4px}
.bank-option{padding:9px 12px;cursor:pointer;font-size:0.82rem;color:#ccc;border-radius:4px;display:flex;align-items:center;gap:8px}
.bank-option:hover{background:rgba(53,222,147,0.1);color:#fff}
.bank-opt-icon{color:var(--primary-color);font-size:0.85rem}
.modal-backdrop{display:none;position:fixed;inset:0;background:var(--modal-backdrop);z-index:99999;align-items:center;justify-content:center}
.tw-modal-container{background:var(--modal-bg);border:1px solid var(--primary-color);border-radius:16px;width:600px;max-width:95vw;max-height:90vh;overflow-y:auto;position:relative}
.tw-modal-x{position:absolute;top:12px;right:12px;background:none;border:none;color:#64748b;font-size:1.3rem;cursor:pointer;z-index:5;opacity:0.85;transition:opacity 0.2s}.tw-modal-x:hover{opacity:1}
.tw-banner{background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));padding:20px 24px;position:relative;overflow:hidden;border-radius:16px 16px 0 0}
.tw-banner-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(255,255,255,0.08),transparent)}
.tw-banner-title{font-size:1.2rem;font-weight:800;color:#fff;position:relative;z-index:2}
.tw-tabs{display:flex;border-bottom:1px solid rgba(53,222,147,0.15)}
.tw-tab{flex:1;padding:12px;text-align:center;font-size:0.85rem;font-weight:600;color:#8ba4bf;cursor:pointer;border:none;background:none;transition:all 0.2s}
.tw-tab.active{color:var(--primary-light);border-bottom:2px solid var(--primary-color)}
.tw-content{padding:20px}
.tw-left{width:100%}
.tw-section-label{font-size:0.8rem;font-weight:700;color:var(--primary-light);margin:14px 0 8px}
.tw-money-info{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:rgba(53,222,147,0.05);border:1px solid rgba(53,222,147,0.1);border-radius:8px;margin-bottom:12px}
.tw-money-item{display:flex;align-items:center;gap:6px;font-size:0.82rem;color:#ccc}
.tw-money-dot{width:6px;height:6px;border-radius:50%;background:var(--primary-color);flex-shrink:0}
.tw-notice{font-size:0.78rem;color:#8ba4bf;margin-bottom:12px;line-height:1.5}
.tw-notice .highlight{color:var(--primary-light);font-weight:600}
.tw-amount-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tw-amount-btns button{flex:1;min-width:70px;padding:8px;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.15);border-radius:6px;color:#ccc;font-size:0.8rem;cursor:pointer}
.tw-amount-btns button:hover{border-color:var(--primary-color);color:#fff}
.tw-amount-row{display:flex;gap:8px;margin-bottom:12px}
.tw-reset-btn{padding:8px 14px;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.15);border-radius:6px;color:#ccc;cursor:pointer}
.tw-amount-input{flex:1;padding:10px 14px;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.15);border-radius:6px;color:#fff;font-size:0.9rem;font-weight:700;text-align:right}
.tw-submit-row{display:flex;gap:8px;margin-top:14px}
.tw-btn-sub{flex:1;padding:12px;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.2);border-radius:8px;color:#ccc;font-weight:600;cursor:pointer}
.tw-btn-main{flex:1;padding:12px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border:none;border-radius:8px;color:#fff;font-weight:700;cursor:pointer}
.tw-btn-main.full{flex:unset;width:100%}
.tw-history-label{font-size:0.82rem;font-weight:700;color:var(--primary-light);margin:18px 0 8px}
.tw-history-table{width:100%;border-collapse:collapse;font-size:0.78rem}
.tw-history-table th{padding:10px 8px;background:var(--modal-dark);color:#8ba4bf;font-weight:600;text-align:center;border-bottom:1px solid rgba(53,222,147,0.1)}
.tw-history-table td{padding:10px 8px;text-align:center;color:#ccc;border-bottom:1px solid rgba(255,255,255,0.03)}
.tw-text-input{padding:8px 12px;background:var(--modal-dark);border:1px solid rgba(53,222,147,0.15);border-radius:6px;color:#fff;font-size:0.85rem}
.tw-after-amount{font-size:0.82rem;color:#8ba4bf;margin:8px 0}
.empty-row td{color:#475569!important}
#live-section,#slot-section,#hotel-section{max-width:100%;margin:0 auto;padding:20px 24px}
#live-section .live-grid,#slot-section .live-grid,#hotel-section .live-grid{grid-template-columns:repeat(6,1fr)!important}
.live-grid{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:16px!important;padding-bottom:10px}
.live-card{position:relative;border-radius:15px;overflow:hidden;cursor:pointer;background:#1a2332;transition:all 0.3s;aspect-ratio:auto}
.live-card img{width:100%;display:block;border-radius:15px 15px 0 0;transition:0.3s}
.live-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.4),0 0 15px rgba(9,122,74,0.2)}
.live-footer{
  padding:12px 8px;text-align:center;
  background:linear-gradient(180deg,#0d2a1a 0%,#071a10 100%);
  border-top:1px solid rgba(9,122,74,0.15);
}
.live-name{
  font-size:0.82rem;font-weight:600;color:#ccc;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:0.02em;
}
.live-card:hover .live-name{color:var(--primary-light,#66dfac)}
.live-thumb{position:relative;overflow:hidden;border-radius:15px 15px 0 0}
.enter-overlay .enter-label{
  padding:10px 24px;border-radius:25px;font-size:0.85rem;font-weight:700;
  background:linear-gradient(135deg,var(--primary-color,#097a4a),var(--secondary-color,#1fb876));
  color:#fff;display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 15px rgba(9,122,74,0.4);
}
.live-card:hover img{transform:scale(0.96);opacity:0.7;filter:blur(2px)}
.enter-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;opacity:0;transition:opacity 0.3s;border-radius:15px}
.live-card:hover .enter-overlay{opacity:1}
.shine{position:absolute;top:-50%;left:-75%;width:50%;height:200%;z-index:3;background:linear-gradient(to right,transparent 0%,rgba(150,240,255,0.18) 50%,transparent 100%);transform:skewX(-20deg);pointer-events:none}
.info-section{padding:24px 150px}
.realtime-section{padding:0 150px!important;margin:30px 0 40px!important}
.realtime-section .container{max-width:100%!important;padding:0!important}
.info-box{background:var(--rt-board-bg);border:1px solid var(--rt-board-border);border-radius:12px;overflow:hidden}
.info-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(53,222,147,0.1)}
.info-header-icon{color:var(--primary-light);font-size:1rem}
.info-header-title{font-size:0.88rem;font-weight:700;color:#fff}
.info-body{padding:0 12px;min-height:180px;max-height:220px;overflow:hidden}
.t-row{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 4px!important;border-bottom:1px solid rgba(53,222,147,0.06);flex-direction:row!important}
.t-user{display:flex!important;align-items:center!important;gap:6px!important;font-size:0.82rem!important;color:#ccc!important;min-width:80px}
.t-avatar{font-size:0.9rem}
.t-amount{font-size:0.82rem!important;font-weight:700!important;min-width:90px;text-align:right}
.t-amount.green{color:var(--primary-light,#66dfac)!important}
.t-amount.gold{color:#ffd700!important}
.t-time{font-size:0.75rem!important;color:#666!important;min-width:45px;text-align:right}
.partners{padding:30px 150px;background:var(--bg-dark);border-top:1px solid rgba(53,222,147,0.08)}
.partner-logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1280px;margin:0 auto}
.p-logo-img{width:80px;height:40px;opacity:0.5;transition:opacity 0.3s;display:flex;align-items:center;justify-content:center}
.p-logo-img:hover{opacity:1}
.p-logo-img img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(1.5)}
.p-logo-img:hover img{filter:none}
/* Force Garden button styles */
.bal-container .before-login.active{display:flex!important;align-items:center;gap:8px}
.bal-container .before-login button.btn-silver{
  width:140px!important;height:44px!important;border-radius:25px!important;font-size:16px!important;font-weight:700!important;
  border:none!important;background:linear-gradient(135deg,#c0392b 0%,#e74c3c 100%)!important;color:#fff!important;
  box-shadow:0 4px 15px rgba(192,57,43,0.4)!important;cursor:pointer;position:relative;overflow:hidden;
}
.bal-container .before-login button.btn-blue{
  width:140px!important;height:44px!important;border-radius:25px!important;font-size:16px!important;font-weight:700!important;
  border:none!important;background:linear-gradient(135deg,#f7971e 0%,#ffd200 100%)!important;color:#000!important;
  box-shadow:0 4px 15px rgba(247,151,30,0.4)!important;cursor:pointer;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Montserrat:wght@400;600;700;900&display=swap');
body{padding-top:150px;font-family:'Noto Sans KR','Montserrat',-apple-system,BlinkMacSystemFont,sans-serif!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-0.02em}
*{font-family:inherit!important}

/* ═══ 헤더 게임사 드롭다운 ═══ */
.sc-dropdown-wrap{position:relative}
.sc-dropdown{
  display:none;position:absolute;top:100%;left:0;
  width:960px;max-height:480px;overflow-y:auto;
  background:linear-gradient(170deg,#071f14 0%,#030d08 60%,#061a10 100%);
  border:1px solid rgba(53,222,147,0.12);
  border-top:1px solid rgba(53,222,147,0.25);
  border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,0.85),0 0 80px rgba(9,122,74,0.05),inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter:blur(40px) saturate(1.4);
  padding:18px;
  z-index:9999;
  scrollbar-width:thin;scrollbar-color:rgba(53,222,147,0.15) transparent;
  opacity:0;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  transform:translateY(15px) scale(0.95);transform-origin:top left;
  pointer-events:none;
}
.sc-dropdown-wrap:hover .sc-dropdown,
.sc-dropdown:hover{display:block;opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transform-origin:top left}
.sc-dropdown::-webkit-scrollbar{width:3px}
.sc-dropdown::-webkit-scrollbar-track{background:transparent}
.sc-dropdown::-webkit-scrollbar-thumb{background:rgba(9,122,74,0.25);border-radius:3px}
.sc-dropdown::before{
  content:'';position:absolute;top:-30px;left:0;right:0;height:30px;background:transparent;
}
.sc-dropdown::after{
  content:'';position:absolute;top:-5px;left:36px;width:10px;height:10px;background:#071f14;border-top:1px solid rgba(53,222,147,0.25);border-left:1px solid rgba(53,222,147,0.12);transform:rotate(45deg);
}
.sc-dropdown-inner{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
.sc-dd-item{
  display:flex;flex-direction:column;align-items:center;gap:0;
  background:linear-gradient(180deg,rgba(12,40,26,0.6),rgba(5,18,11,0.8));
  border:1px solid rgba(53,222,147,0.06);
  border-radius:14px;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  overflow:hidden;
  position:relative;
  backdrop-filter:blur(4px);
}
.sc-dd-item::before{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(135deg,rgba(53,222,147,0.08),transparent 60%);
  opacity:0;transition:opacity 0.4s;z-index:0;
}
.sc-dd-item:hover::before{opacity:1}
.sc-dd-item:hover{
  border-color:rgba(53,222,147,0.3);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.6),0 0 24px rgba(53,222,147,0.08);
  background:linear-gradient(180deg,rgba(15,55,35,0.9),rgba(8,30,18,0.95));
}
.sc-dd-thumb{
  width:100%;aspect-ratio:3/4;overflow:hidden;
  background:#050f0a;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.sc-dd-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s,filter 0.3s}
.sc-dd-item:hover .sc-dd-thumb img{transform:scale(1.08);filter:brightness(1.1) contrast(1.05)}
.sc-dd-name{
  padding:12px 10px;
  font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.45);
  text-align:center;line-height:1.3;letter-spacing:0.03em;
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  position:relative;z-index:1;
  transition:color 0.3s;
}
.sc-dd-item:hover .sc-dd-name{color:#fff}
.sc-dropdown-wrap:hover .sc-dd-item{animation:ddItemIn 0.4s cubic-bezier(0.16,1,0.3,1) both}
.sc-dd-item:nth-child(1){animation-delay:0.03s}
.sc-dd-item:nth-child(2){animation-delay:0.06s}
.sc-dd-item:nth-child(3){animation-delay:0.09s}
.sc-dd-item:nth-child(4){animation-delay:0.12s}
.sc-dd-item:nth-child(5){animation-delay:0.15s}
.sc-dd-item:nth-child(6){animation-delay:0.18s}
.sc-dd-item:nth-child(n+7){animation-delay:0.21s}
@keyframes ddItemIn{from{opacity:0;transform:translateY(12px) scale(0.92)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ═══ 토글 섹션 강제 수정 ═══ */
.toggle-section.main-toggle{padding:5px 150px 0;overflow:visible!important}
.toggle-section .container{max-width:100%;height:220px;position:relative;padding:0!important}
.toggle-btn{height:200px!important;overflow:visible!important}
.toggle-btn .g-img{width:100%!important;height:auto!important;position:absolute!important;left:0!important;bottom:0!important;top:auto!important;z-index:2!important;transform-origin:bottom left!important}
.toggle-btn.casino-link .g-img{left:auto!important;right:0!important;transform-origin:bottom right!important}
.toggle-btn .g-size{display:none!important}
.toggle-btn .icon-panel{width:60px!important;height:60px!important;border-radius:15px!important}
.toggle-btn .icon-panel .icon{max-width:40px!important;max-height:36px!important}
.toggle-btn .text-panel{font-size:28px!important}
.toggle-btn .text-panel .kr-text{font-size:1.6rem!important;font-weight:900!important}
.toggle-btn .text-panel .en-text{font-size:0.85rem!important;letter-spacing:0.12em!important}
.toggle-section,.toggle-section .container,.toggle-section .toggle-btn,.toggle-section .toggle-btn.w-b{overflow:visible!important;position:relative!important}
.toggle-divider{width:100px!important;height:100px!important;z-index:20!important;background:var(--bg-dark,#040a07)!important;border:2px solid rgba(9,122,74,0.4)!important;box-shadow:0 0 15px rgba(0,0,0,0.6)!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}
.toggle-divider img{width:80%!important;position:relative!important;z-index:2!important}
.toggle-btn{margin:0!important}
.toggle-btn.slot-link{margin-right:auto!important;width:calc(50% - 50px)!important;border-radius:30px 0 0 30px!important;background-image:radial-gradient(83.11% 43.5% at 60.07% 0%,var(--primary-dark) 0%,var(--accent-dark) 100%)!important}
.toggle-btn.casino-link{width:calc(50% - 50px)!important;border-radius:0 30px 30px 0!important;background-image:radial-gradient(83.11% 43.5% at 34.07% 0%,var(--primary-dark) 0%,var(--accent-dark) 100%)!important}

/* ═══ 잭팟 커스텀 디자인 ═══ */
.jackpot-custom{padding:0;margin:10px 0 0;background:transparent;position:relative;z-index:5}
.visual-section{height:auto!important;margin-bottom:0!important;padding-bottom:0!important}
.jackpot-bar{max-width:100%;margin:0 auto;padding:0 150px;width:100%}
.jackpot-inner{
  display:flex;align-items:center;justify-content:center;gap:28px;min-width:600px;
  padding:18px 60px;
  background:linear-gradient(180deg,rgba(2,8,5,0.95) 0%,rgba(6,22,14,0.98) 50%,rgba(3,12,7,0.95) 100%);
  border:1px solid rgba(53,222,147,0.15);
  border-top:1px solid rgba(53,222,147,0.25);
  border-radius:60px;
  box-shadow:0 4px 30px rgba(0,0,0,0.4),0 0 60px rgba(9,122,74,0.04),inset 0 1px 0 rgba(255,255,255,0.04),inset 0 -1px 0 rgba(0,0,0,0.3);
  position:relative;overflow:hidden;
}
.jackpot-inner::before{
  content:'';position:absolute;top:0;left:-60%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,0.06),rgba(255,215,0,0.02),transparent);
  animation:jackpotShine 5s ease-in-out infinite;
}
@keyframes jackpotShine{0%{left:-30%}100%{left:130%}}
.jackpot-left{display:flex;align-items:center;gap:10px}
.jackpot-left i{font-size:1.4rem;color:#ffd700;filter:drop-shadow(0 0 6px rgba(255,215,0,0.3))}
.jackpot-title{
  font-size:1.8rem;font-weight:800;letter-spacing:0.12em;
  background:linear-gradient(176deg,#fff5cc 0%,#ffd700 30%,#daa520 60%,#ffd700 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(255,215,0,0.15));
  text-transform:uppercase;
}
.jackpot-amount-wrap{display:flex;align-items:center;gap:8px;margin-top:-2px;white-space:nowrap;flex-wrap:nowrap;overflow:hidden;height:2.4rem}
.jackpot-number{
  font-size:2.2rem;font-weight:900;letter-spacing:0.06em;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 0 20px rgba(255,215,0,0.12),0 0 40px rgba(255,215,0,0.06);
  font-family:'Montserrat',sans-serif;
}
.jackpot-number *{color:#fff!important;-webkit-text-fill-color:#fff!important}
.jackpot-won{
  font-size:2.2rem;font-weight:900;
  background:linear-gradient(180deg,#ffd700,#daa520);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* 모바일 토글 */
.toggle-mobile{display:none}
@media(max-width:768px){
  .jackpot-bar{padding:0 12px}
  .jackpot-inner{flex-direction:row!important;gap:10px;padding:10px 20px;border-radius:16px;min-width:auto!important;width:100%!important;flex-wrap:nowrap!important}
  .jackpot-title{font-size:0.8rem!important;white-space:nowrap}
  .jackpot-left i{font-size:1rem!important}
  .jackpot-title{font-size:1rem}
  .jackpot-number{font-size:1.4rem;min-width:200px;text-align:center}
  .jackpot-won{font-size:1.4rem}
  #banner-slider{aspect-ratio:auto!important;height:auto!important;overflow:visible!important}
  #banner-track{height:auto!important;position:relative!important}
  #banner-track img{position:relative!important;width:100%!important;height:auto!important;object-fit:contain!important}
  #banner-track img+img{position:absolute!important;top:0!important;left:0!important}
  .toggle-pc{display:none!important}
  .toggle-mobile{display:flex!important;gap:0;padding:10px 12px}
  .toggle-mob-btn{flex:1;padding:12px 0;border:none;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;background:rgba(0,0,0,0.5);color:#8ba4bf;border:1px solid rgba(53,222,147,0.1)}
  .toggle-mob-btn:first-child{border-radius:8px 0 0 8px;border-right:none}
  .toggle-mob-btn:last-child{border-radius:0 8px 8px 0}
  .toggle-mob-btn.active{background:rgba(53,222,147,0.15);color:#66dfac;border-color:rgba(53,222,147,0.4)}
  .toggle-mob-btn i{margin-right:6px}
}
@media(max-width:480px){
  .jackpot-title{font-size:0.85rem}
  .jackpot-number{font-size:1.1rem}
  .jackpot-won{font-size:1.1rem}
}
/* ═══ 토글 박스 고급화 ═══ */
.toggle-btn .text-panel .kr-text{font-size:2rem!important;font-weight:900!important;letter-spacing:0.08em!important;text-shadow:0 2px 8px rgba(0,0,0,0.6),0 0 20px rgba(53,222,147,0.08)!important}
.toggle-btn .text-panel .en-text{font-size:0.75rem!important;letter-spacing:0.25em!important;color:rgba(102,223,172,0.4)!important;text-transform:uppercase!important;font-weight:300!important}
.toggle-btn .icon-panel{background:rgba(0,0,0,0.4)!important;border:1px solid rgba(53,222,147,0.15)!important;backdrop-filter:blur(8px)!important;box-shadow:0 4px 15px rgba(0,0,0,0.3),0 0 20px rgba(9,122,74,0.05)!important}
.toggle-btn:hover .icon-panel{background:rgba(0,0,0,0.5)!important;border-color:rgba(53,222,147,0.35)!important;box-shadow:0 4px 20px rgba(0,0,0,0.4),0 0 30px rgba(9,122,74,0.1)!important}

.toggle-btn{transition:all 0.4s cubic-bezier(0.16,1,0.3,1)!important}
.toggle-btn:hover{transform:scale(1.01)!important;filter:brightness(1.08)!important}
.toggle-divider{transition:all 0.3s!important}
.toggle-btn:hover ~ .toggle-divider{box-shadow:0 0 25px rgba(53,222,147,0.15)!important}

/* ═══ 게임 카드 고급화 ═══ */
.live-card{background:#000!important;border:1px solid rgba(9,122,74,0.2)!important;box-shadow:0 2px 8px rgba(0,0,0,0.3)!important}
.live-card:hover{border-color:rgba(9,122,74,0.3)!important;box-shadow:0 8px 30px rgba(0,0,0,0.5),0 0 20px rgba(9,122,74,0.1)!important}
.live-footer{
  padding:14px 10px!important;text-align:center!important;
  background:linear-gradient(180deg,#111a14,#0a120d)!important;
  border-top:1px solid rgba(9,122,74,0.08)!important;
}
.live-name{font-size:0.85rem!important;font-weight:600!important;color:#999!important;letter-spacing:0.03em!important}
.live-card:hover .live-name{color:var(--primary-light)!important}
#sidebar{display:none}
.navbar[style*="display:none"]{display:none!important}
.game-cat-tab{cursor:pointer}
@media(max-width:768px){
  .live-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  #live-section,#slot-section,#hotel-section{padding:12px!important}
  #live-section .live-grid,#slot-section .live-grid,#hotel-section .live-grid{grid-template-columns:repeat(2,1fr)!important}
  .realtime-section{padding:0 12px!important;margin:20px 0!important}
  .realtime-section .container>div{grid-template-columns:1fr!important;gap:12px!important}
  .partners{padding:20px 12px!important}
  .partner-logo-grid{gap:8px!important}
  .p-logo-img{width:60px!important;height:30px!important}
  .header-logo{display:none!important}
  .header-main .container{justify-content:space-between!important;flex-wrap:nowrap!important}
  .left-menu-btn{flex-shrink:0!important}
  #notice-section>div:first-child,#support-section>div:first-child,#message-section>div:first-child{padding:16px 12px 0!important}
  #notice-section h2,#support-section h2,#message-section h2{font-size:1.1rem!important}
  #notice-section table th:last-child{display:none!important}
  #notice-section table td:last-child{display:none!important}
  .modal-box{padding:20px!important}
  #modal-mypage .modal-box{width:100%!important}
}
@media(max-width:380px){.live-grid{grid-template-columns:repeat(2,1fr)!important}}
.header-main,.header-menu{max-width:100vw!important;overflow-x:clip!important}
.link-a,.link-a *{cursor:pointer!important}

/* 배너 PC/모바일 전환 */
.banner-mobile{display:none!important}
.banner-pc{display:block!important}
#banner-slider{aspect-ratio:1920/450;background:#000}
@media(max-width:1199px){
  .header-menu{height:0!important;overflow:visible!important;padding:0!important;border:none!important;min-height:0!important}
  body{padding-top:70px!important}
  .header-main{height:70px!important}
}
@media(max-width:768px){
  .banner-pc{display:none!important;position:relative!important;height:0!important;overflow:hidden!important}
  #banner-slider{aspect-ratio:auto!important;height:auto!important;overflow:visible!important}
  .visual-section{height:auto!important;min-height:0!important;padding:0!important;margin:0!important}
  #banner-track{height:auto!important;position:relative!important}
  .banner-mobile{display:block!important;position:relative!important;width:100%!important;height:auto!important}
}

/* ═══════════════════════════════════════════════════════════════
   2026-04-09 모바일 UX 개선 (Phase 1: 우선순위 1~4)
   - input 폰트 16px 강제 (iOS Safari 자동 zoom 차단)
   - #live-section padding 모바일 축소
   - 게임 그리드 단계별 반응형
   - 모달 풀스크린 (모바일)
   기존 룰을 덮어쓰는 오버라이드 — 파일 가장 마지막에 위치해야 함
   ═══════════════════════════════════════════════════════════════ */

/* ── 1순위: input 폰트 16px 최소 강제 (iOS Safari zoom 방지) ── */
@media (max-width: 768px) {
  .m-input,
  .bank-search,
  .bank-selected,
  .tw-text-input,
  .tw-amount-input,
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── 2순위: #live-section padding 모바일에서 축소 ── */
@media (max-width: 1199px) {
  #live-section,
  #slot-section,
  #hotel-section {
    padding: 16px 24px !important;
  }
}
@media (max-width: 768px) {
  #live-section,
  #slot-section,
  #hotel-section {
    padding: 12px 12px !important;
  }
}
@media (max-width: 480px) {
  #live-section,
  #slot-section,
  #hotel-section {
    padding: 10px 8px !important;
  }
}

/* ── 3순위: 게임 그리드 단계별 반응형 ── */
@media (max-width: 1199px) {
  #live-section .live-grid,
  #slot-section .live-grid,
  #hotel-section .live-grid,
  .live-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 1024px) {
  #live-section .live-grid,
  #slot-section .live-grid,
  #hotel-section .live-grid,
  .live-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 768px) {
  #live-section .live-grid,
  #slot-section .live-grid,
  #hotel-section .live-grid,
  .live-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 540px) {
  #live-section .live-grid,
  #slot-section .live-grid,
  #hotel-section .live-grid,
  .live-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}
/* 게임 카드 footer 패딩도 모바일에서 축소 */
@media (max-width: 540px) {
  .live-footer { padding: 8px 4px !important; }
  .live-name { font-size: 0.74rem !important; }
}

/* ── 4순위: 모달 풀스크린 (모바일) ── */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 20px 16px 80px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-close {
    top: 16px !important;
    right: 16px !important;
    font-size: 1.5rem !important;
    padding: 8px 12px !important;
    z-index: 10 !important;
  }
  /* 모달 내부 버튼 최소 터치 영역 44px */
  .modal-box .m-btn,
  .modal-box button[type="submit"] {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}

/* tw-modal-container (충/환전 통합 모달)도 풀스크린 */
@media (max-width: 768px) {
  .tw-modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto !important;
  }
  .tw-content { padding: 16px !important; }
  .tw-amount-btns button {
    min-height: 44px !important;
    font-size: 0.85rem !important;
  }
  .tw-history-table { font-size: 0.72rem !important; }
  .tw-history-table th,
  .tw-history-table td { padding: 8px 4px !important; }
}
/* ═══════════════════════════════════════════════════════════════
   end of 2026-04-09 모바일 UX 개선
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Quill 에디터 출력 클래스 (공지사항 정렬/사이즈/색상)
   어드민 위지윅 에디터로 작성한 공지가 유저 페이지에서도 정렬됨
   ═══════════════════════════════════════════════════════════════ */
.nc-popup-card .ql-align-center,
.nc-popup-card p.ql-align-center { text-align: center; }
.nc-popup-card .ql-align-right,
.nc-popup-card p.ql-align-right { text-align: right; }
.nc-popup-card .ql-align-justify,
.nc-popup-card p.ql-align-justify { text-align: justify; }
.nc-popup-card .ql-size-small { font-size: 0.75em; }
.nc-popup-card .ql-size-large { font-size: 1.5em; }
.nc-popup-card .ql-size-huge { font-size: 2em; }
.nc-popup-card p { margin: 0 0 0.4em 0; }
.nc-popup-card h1 { font-size: 1.6em; margin: 0.4em 0; }
.nc-popup-card h2 { font-size: 1.3em; margin: 0.4em 0; }
.nc-popup-card h3 { font-size: 1.1em; margin: 0.4em 0; }
.nc-popup-card ol { padding-left: 1.5em; list-style: decimal; }
.nc-popup-card ul { padding-left: 1.5em; list-style: disc; }

/* 공지/이벤트 본문 영역에서도 동일 적용 */
.nc-detail .ql-align-center,
.nc-detail p.ql-align-center { text-align: center; }
.nc-detail .ql-align-right,
.nc-detail p.ql-align-right { text-align: right; }
.nc-detail .ql-align-justify,
.nc-detail p.ql-align-justify { text-align: justify; }
.nc-detail .ql-size-small { font-size: 0.75em; }
.nc-detail .ql-size-large { font-size: 1.5em; }
.nc-detail .ql-size-huge { font-size: 2em; }


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT / CHAMPAGNE — full reskin override layer
   참조: s5.miv2.com (라이트 + #887c62 샴페인 골드 단일 액센트)
   user6.js 의 모든 DOM 컨트랙트(ID/클래스)는 그대로 두고 시각만 교체.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. design tokens ─── */
body.skin-light {
  --sk-bg:           #ffffff;
  --sk-bg-soft:      #f8fafc;
  --sk-bg-card:      #ffffff;
  --sk-line:         #e2e8f0;
  --sk-line-strong:  #cbd5e1;
  --sk-text:         #171717;
  --sk-text-soft:    #525252;
  --sk-text-mute:    #9ca3af;
  --sk-accent:       #887c62;            /* champagne gold */
  --sk-accent-soft:  #a7997a;
  --sk-accent-deep:  #6e6450;
  --sk-accent-fill:  #f5f1e8;            /* very light champagne wash */
  --sk-grad:         linear-gradient(90deg, #a7997a -23.54%, #887c62 76.46%);
  --sk-grad-deep:    linear-gradient(135deg, #a7997a, #887c62 60%, #6e6450);
  --sk-shadow-soft:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06);
  --sk-shadow-card:  0 5px 14px rgba(121,152,252,.18);
  --sk-shadow-3d:    0 3px 0 0 #d6dadf;
  --sk-shadow-cta:   0 6px 16px rgba(136,124,98,.30);
  --sk-radius-card:  12px;
  --sk-radius-btn:   8px;
  --sk-radius-pill:  999px;
  --sk-lnb-w:        250px;
  --sk-header-h:     68px;
  --sk-font:         "Pretendard Variable", Pretendard, "Pretendard-Regular", sans-serif;
}

/* ─── 2. globals ─── */
body.skin-light {
  background: var(--sk-bg-soft) !important;
  color: var(--sk-text) !important;
  font-family: var(--sk-font) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.4px;
  text-align: left;
}
body.skin-light a,
body.skin-light a:hover,
body.skin-light a:visited { color: inherit; }
body.skin-light *::selection { background: rgba(136,124,98,.25); }

/* scrollbar */
body.skin-light div::-webkit-scrollbar { background-color: #eef0f3; }
body.skin-light div::-webkit-scrollbar-thumb { background-color: var(--sk-accent); border-color: #eef0f3; }

/* font weight helpers retain semantics */
body.skin-light .font-light  { font-family: var(--sk-font) !important; font-weight: 300 !important; }
body.skin-light .font-regular{ font-family: var(--sk-font) !important; font-weight: 500 !important; }
body.skin-light .font-bold   { font-family: var(--sk-font) !important; font-weight: 700 !important; }
body.skin-light .font-black  { font-family: var(--sk-font) !important; font-weight: 800 !important; }

/* hide the dark "rotating leaf" original logo block — replaced by LNB logo */
body.skin-light .rotating-logo,
body.skin-light .header-logo .logo-img,
body.skin-light .header-logo .garden-logo,
body.skin-light .header-logo .casino-logo,
body.skin-light .logo .icon,
body.skin-light .logo .uick,
body.skin-light .logo .casino,
body.skin-light .logo .lightning-01,
body.skin-light .logo .lightning-02,
body.skin-light .logo .qr,
body.skin-light .logo .casino-text,
body.skin-light .visual-background,
body.skin-light .wrapper:before,
body.skin-light .wrapper:after { display: none !important; }

body.skin-light .wrapper { background: var(--sk-bg-soft) !important; padding: 0 !important; }

/* ─── 3. layout shell : push everything right by LNB width on desktop ─── */
@media (min-width: 1025px) {
  body.skin-light { padding-left: var(--sk-lnb-w); }
  body.skin-light .header-section,
  body.skin-light .header-main,
  body.skin-light .header-menu { left: var(--sk-lnb-w) !important; width: calc(100% - var(--sk-lnb-w)) !important; }
  body.skin-light #notice-line-bar { margin-left: var(--sk-lnb-w); }
}

/* ─── 4. LNB (left fixed sidebar) ─── */
.skin-lnb { display: none; }
@media (min-width: 1025px) {
  body.skin-light .skin-lnb {
    display: flex; flex-direction: column; gap: 14px;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sk-lnb-w);
    padding: 22px 18px;
    background: var(--sk-bg);
    border-right: 1px solid var(--sk-line);
    z-index: 50;
    overflow-y: auto;
  }
}
.skin-lnb-logo { padding: 4px 8px 12px; border-bottom: 1px solid var(--sk-line); }
.skin-lnb-logo a { display: flex; align-items: baseline; gap: 6px; text-decoration: none; }
.skin-lnb-logo-text {
  font-family: var(--sk-font); font-weight: 800; font-size: 22px;
  letter-spacing: 1px; color: var(--sk-text);
}
.skin-lnb-logo-accent {
  font-family: var(--sk-font); font-weight: 800; font-size: 14px;
  letter-spacing: 3px; color: var(--sk-accent);
}
.skin-lnb-group {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 8px;
  background: var(--sk-bg);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-3d);
}
.skin-lnb-item {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 10px;
  border-radius: var(--sk-radius-btn);
  color: var(--sk-text-mute);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
  border-bottom: 1px solid var(--sk-line);
}
.skin-lnb-group .skin-lnb-item:last-child { border-bottom: 0; }
.skin-lnb-item:hover { color: var(--sk-text); background: var(--sk-accent-fill); }
.skin-lnb-item:hover .skin-lnb-icon { color: var(--sk-accent); }
.skin-lnb-icon {
  width: 22px; text-align: center; font-size: 14px;
  color: var(--sk-accent-soft);
  transition: color .18s ease;
}

/* ─── 5. HEADER (top bar) ─── */
body.skin-light .header-section { background: var(--sk-bg) !important; box-shadow: var(--sk-shadow-soft); border-bottom: 1px solid var(--sk-line); position: sticky; top: 0; z-index: 30; }
body.skin-light .header-main {
  background: var(--sk-bg) !important;
  height: var(--sk-header-h);
  border: none !important;
}
body.skin-light .header-main .container { height: var(--sk-header-h); padding: 0 24px; }
body.skin-light .header-menu { background: var(--sk-bg) !important; border-top: 1px solid var(--sk-line); }
body.skin-light .header-menu .container { padding: 0 24px; }

/* hide on desktop — sidebar covers nav. kept on mobile via reset below */
@media (min-width: 1025px) {
  body.skin-light .sc-menu.desktop,
  body.skin-light .header-logo,
  body.skin-light .left-menu-btn { display: none !important; }
  body.skin-light .header-main .container { justify-content: flex-end; }
}

/* main-menu (입금신청/출금신청/공지/이벤트/쪽지/고객센터) */
body.skin-light .main-menu ul li a,
body.skin-light .main-menu ul li button {
  color: var(--sk-text-soft) !important;
  font-weight: 500 !important;
  background: transparent !important;
}
body.skin-light .main-menu ul li a:hover,
body.skin-light .main-menu ul li a:hover .text { color: var(--sk-accent) !important; }
body.skin-light .main-menu ul li a .icon-panel,
body.skin-light .main-menu ul li button .icon-panel { color: var(--sk-accent) !important; background: transparent !important; }
body.skin-light .main-menu ul li a .text:after,
body.skin-light .main-menu ul li a:hover .text:after { background: var(--sk-accent) !important; }

/* deposit / withdraw highlight */
body.skin-light .main-menu ul li a.deposit-link,
body.skin-light .main-menu ul li a.withdraw-link {
  color: var(--sk-accent) !important;
}

/* auth buttons */
body.skin-light .bal-container .btn-grp { gap: 8px; }
body.skin-light .login-link.btn-silver,
body.skin-light .join-link.btn-blue {
  height: 34px; min-width: 90px; padding: 0 18px;
  border-radius: var(--sk-radius-pill) !important;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--sk-accent) !important;
  background: var(--sk-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: filter .18s ease, transform .12s ease;
}
body.skin-light .login-link.btn-silver {
  background: var(--sk-bg) !important;
  color: var(--sk-accent) !important;
}
body.skin-light .login-link.btn-silver:hover,
body.skin-light .join-link.btn-blue:hover { filter: brightness(.96); transform: translateY(-1px); }
body.skin-light .login-link .text,
body.skin-light .join-link .text { color: inherit !important; background: none !important; }
body.skin-light .login-link.btn-silver:before,
body.skin-light .join-link.btn-blue:before { display: none !important; }

/* logged-in account info (rendered into #hdr-auth) */
body.skin-light .after-login .account-info { gap: 10px; }
body.skin-light .after-login .acc-row .info a,
body.skin-light .after-login .acc-row .info { color: var(--sk-text) !important; }
body.skin-light .after-login .acc-row .icon-panel { color: var(--sk-accent) !important; }
body.skin-light .after-login .nav-btn { color: var(--sk-text-soft) !important; }
body.skin-light .after-login .nav-btn:hover { color: var(--sk-accent) !important; }

/* notice line bar (marquee) */
body.skin-light #notice-line-bar {
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
body.skin-light #notice-line-text { color: var(--sk-accent) !important; font-weight: 500; }

/* ─── 6. BANNER ─── */
body.skin-light .visual-section { background: var(--sk-bg-soft) !important; padding: 24px 24px 0 !important; min-height: auto !important; }
body.skin-light #banner-slider {
  max-width: 1280px; margin: 0 auto;
  border: 3px solid var(--sk-accent);
  border-radius: var(--sk-radius-card);
  overflow: hidden;
  aspect-ratio: 1280 / 220;
  background: var(--sk-bg);
}
body.skin-light #banner-track .banner-pc { border-radius: 0; }
body.skin-light .banner-mobile { display: none; }
@media (max-width: 1024px) {
  body.skin-light #banner-slider { aspect-ratio: 1170 / 614; }
  body.skin-light #banner-track .banner-pc { display: none !important; }
  body.skin-light .banner-mobile { display: block !important; width: 100%; height: 100%; object-fit: cover; }
}
body.skin-light #banner-dots div { background: rgba(255,255,255,.5) !important; box-shadow: 0 0 4px rgba(0,0,0,.3); }

/* ─── 7. JACKPOT (실시간 잭팟금액) ─── */
body.skin-light .jackpot-custom { padding: 18px 24px 0 !important; background: transparent !important; }
body.skin-light .jackpot-bar {
  max-width: 1280px; margin: 0 auto !important; padding: 0 !important; width: 100%;
}
body.skin-light .jackpot-inner {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-card) !important;
  box-shadow: var(--sk-shadow-card);
  padding: 16px 24px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
body.skin-light .jackpot-left { color: var(--sk-text) !important; display: flex; align-items: center; gap: 10px; }
body.skin-light .jackpot-left i { color: var(--sk-accent) !important; font-size: 20px; }
body.skin-light .jackpot-title { color: var(--sk-text-soft) !important; font-weight: 700; font-size: 15px; letter-spacing: 1px; }
body.skin-light .jackpot-amount-wrap { display: flex; align-items: baseline; gap: 6px; }
body.skin-light .jackpot-number {
  font-family: var(--sk-font); font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  background: var(--sk-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}
body.skin-light .jackpot-won { color: var(--sk-text-soft) !important; font-weight: 700; font-size: 14px; }

/* ─── 8. TOGGLE (slot / casino picker) ─── */
body.skin-light .toggle-section,
body.skin-light .main-toggle { background: transparent !important; padding: 18px 24px 0 !important; }
body.skin-light .toggle-section .container { max-width: 1280px; gap: 12px; }
body.skin-light .toggle-btn {
  position: relative;
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-card) !important;
  box-shadow: var(--sk-shadow-card);
  height: 110px;
  overflow: hidden;
  padding: 0 24px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.skin-light .toggle-btn:hover {
  transform: translateY(-2px);
  border-color: var(--sk-accent) !important;
  box-shadow: 0 10px 22px rgba(136,124,98,.18);
}
body.skin-light .toggle-btn:before,
body.skin-light .toggle-btn:after,
body.skin-light .toggle-btn .g-hover,
body.skin-light .toggle-btn .g-size { display: none !important; }
body.skin-light .toggle-btn .g-img { opacity: .4; filter: saturate(.6) brightness(1.1); right: -10px !important; }
body.skin-light .toggle-btn .icon-panel {
  background: var(--sk-accent-fill) !important;
  border-radius: 50% !important;
  width: 56px !important; height: 56px !important;
  border: 1px solid var(--sk-line) !important;
}
body.skin-light .toggle-btn .icon-panel img { filter: none !important; }
body.skin-light .toggle-btn .text-panel { gap: 4px; }
body.skin-light .toggle-btn .kr-text { color: var(--sk-text) !important; font-weight: 800 !important; font-size: 22px; letter-spacing: -.5px; }
body.skin-light .toggle-btn .en-text { color: var(--sk-accent) !important; font-weight: 600 !important; font-size: 12px; letter-spacing: 4px; }
body.skin-light .toggle-divider img { display: none !important; }
body.skin-light .toggle-divider { width: 1px; background: var(--sk-line); height: 70px; }

/* mobile toggle */
body.skin-light .toggle-mobile { padding: 12px 16px; gap: 8px; background: transparent !important; }
body.skin-light .toggle-mob-btn {
  flex: 1; height: 40px;
  background: var(--sk-bg) !important; color: var(--sk-text-mute) !important;
  border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-btn) !important;
  font-weight: 600;
  box-shadow: var(--sk-shadow-3d);
}
body.skin-light .toggle-mob-btn.active {
  color: #fff !important;
  background: var(--sk-grad) !important;
  border-color: var(--sk-accent) !important;
}

/* ─── 9. GAME GRID / CARDS ─── */
body.skin-light #home-area,
body.skin-light #game-section-wrapper { background: var(--sk-bg-soft) !important; }












/* ─── 10. REALTIME INFO BOXES ─── */
body.skin-light .realtime-section { background: var(--sk-bg-soft) !important; padding: 24px !important; }
body.skin-light .realtime-section .container { max-width: 1280px; }
body.skin-light .info-box {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-card) !important;
  box-shadow: var(--sk-shadow-card);
  overflow: hidden;
}
body.skin-light .info-header { background: var(--sk-bg) !important; border-bottom: 1px solid var(--sk-line) !important; padding: 14px 16px !important; }
body.skin-light .info-header-icon { color: var(--sk-accent) !important; }
body.skin-light .info-header-title { color: var(--sk-text) !important; font-weight: 700 !important; }
body.skin-light .info-body { background: var(--sk-bg) !important; color: var(--sk-text-soft) !important; }
body.skin-light .info-body .winner-btn,
body.skin-light .info-body .table-ticker ul li,
body.skin-light .info-body > div,
body.skin-light .info-body > a {
  background: transparent !important;
  border-bottom: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
}
body.skin-light .table-ticker ul li .icon-panel { color: var(--sk-accent) !important; }
body.skin-light .table-ticker ul li .icon-panel:before { background: var(--sk-accent-fill) !important; }
body.skin-light .winner-btn .info-panel .title { color: var(--sk-text) !important; }
body.skin-light .winner-btn .info-panel .amount { color: var(--sk-accent) !important; font-weight: 700; }
body.skin-light .winner-btn .info-panel .user,
body.skin-light .winner-btn .info-panel .date { color: var(--sk-text-mute) !important; }

/* ─── 11. PARTNERS ─── */
body.skin-light .partners {
  background: var(--sk-bg) !important;
  border-top: 1px solid var(--sk-line) !important;
  padding: 36px 24px !important;
}
body.skin-light .partners > div { max-width: 1280px; margin: 0 auto; }
body.skin-light .partners > div > div:first-child span { color: var(--sk-text-mute) !important; letter-spacing: 4px; }
body.skin-light .partner-logo-grid { gap: 14px !important; }
body.skin-light .p-logo-img { opacity: .55; }
body.skin-light .p-logo-img img { filter: grayscale(1) !important; }
body.skin-light .p-logo-img:hover { opacity: 1; }
body.skin-light .p-logo-img:hover img { filter: none !important; }

/* ─── 12. SECTIONS (event/notice/sports/message/support) ─── */
body.skin-light #event-section,
body.skin-light #notice-section,
body.skin-light #message-section,
body.skin-light #support-section,
body.skin-light #sports-section { background: var(--sk-bg-soft) !important; }
body.skin-light #event-section h2,
body.skin-light #notice-section h2,
body.skin-light #message-section h2,
body.skin-light #support-section h2 { color: var(--sk-text) !important; }
body.skin-light #event-section table,
body.skin-light #notice-section table,
body.skin-light #message-section table,
body.skin-light #support-section table {
  background: var(--sk-bg) !important;
  border-radius: var(--sk-radius-card);
  overflow: hidden;
}
body.skin-light #event-section table thead tr,
body.skin-light #notice-section table thead tr,
body.skin-light #message-section table thead tr,
body.skin-light #support-section table thead tr { background: var(--sk-accent-fill) !important; border-bottom: 1px solid var(--sk-line) !important; }
body.skin-light #event-section th,
body.skin-light #notice-section th,
body.skin-light #message-section th,
body.skin-light #support-section th { color: var(--sk-text-soft) !important; }
body.skin-light #event-section td,
body.skin-light #notice-section td,
body.skin-light #message-section td,
body.skin-light #support-section td { color: var(--sk-text) !important; border-bottom: 1px solid var(--sk-line) !important; }
body.skin-light #event-section > div > div,
body.skin-light #notice-section > div > div,
body.skin-light #message-section > div > div,
body.skin-light #support-section > div > div { border-color: var(--sk-line) !important; }

/* pagination */
body.skin-light #msg-pagination button,
body.skin-light #notice-pagination button,
body.skin-light #cs-pagination button,
body.skin-light #event-pagination button {
  width: 32px; height: 32px;
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
  border-radius: 6px;
  cursor: pointer;
}
body.skin-light #msg-pagination button.active,
body.skin-light #notice-pagination button.active,
body.skin-light #cs-pagination button.active,
body.skin-light #event-pagination button.active {
  background: var(--sk-accent) !important;
  border-color: var(--sk-accent) !important;
  color: #fff !important;
}

/* ─── 13. MODALS (login / register / mypage / deposit / withdraw / detail) ─── */
body.skin-light .modal-overlay {
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(4px);
}
body.skin-light .modal-box {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(15,23,42,.20), var(--sk-shadow-soft);
  color: var(--sk-text) !important;
  padding: 32px !important;
}
body.skin-light .modal-close { color: var(--sk-text-mute) !important; background: transparent !important; }
body.skin-light .modal-close:hover { color: var(--sk-text) !important; }
body.skin-light .modal-title {
  color: var(--sk-text) !important;
  font-family: var(--sk-font); font-weight: 800; font-size: 26px;
  letter-spacing: 2px; margin-bottom: 4px !important;
  background: none !important; -webkit-text-fill-color: currentColor !important;
}
body.skin-light .modal-title:after {
  content: ""; display: block; width: 36px; height: 3px;
  background: var(--sk-grad); border-radius: 2px;
  margin: 10px auto 0;
}
body.skin-light .modal-sub { color: var(--sk-text-mute) !important; margin-bottom: 22px !important; font-size: 13px; }

/* form inputs */
body.skin-light .m-input,
body.skin-light textarea.m-input,
body.skin-light .modal-box input[type="text"],
body.skin-light .modal-box input[type="password"],
body.skin-light .modal-box input[type="number"],
body.skin-light .modal-box textarea {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}
body.skin-light .m-input::placeholder,
body.skin-light textarea::placeholder { color: var(--sk-text-mute) !important; }
body.skin-light .m-input:focus,
body.skin-light textarea:focus,
body.skin-light .modal-box input:focus {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 0 3px rgba(136,124,98,.18) !important;
  background: var(--sk-bg) !important;
}

/* primary button */
body.skin-light .m-btn {
  background: var(--sk-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sk-radius-btn) !important;
  padding: 13px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 1px;
  box-shadow: var(--sk-shadow-cta);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
body.skin-light .m-btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(136,124,98,.36); }

/* divider / switch */
body.skin-light .m-divider { background: var(--sk-line) !important; height: 1px !important; margin: 22px 0 !important; }
body.skin-light .m-switch { color: var(--sk-text-soft) !important; font-size: 13px; }
body.skin-light .m-switch a { color: var(--sk-accent) !important; font-weight: 700; cursor: pointer; }

/* register fields */
body.skin-light .reg-section-title {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
  font-size: 15px !important;
}
body.skin-light .reg-section-title i { color: var(--sk-accent) !important; }
body.skin-light .reg-label { color: var(--sk-text-soft) !important; font-size: 13px !important; font-weight: 500; }
body.skin-light .reg-req { color: #c43d4f !important; }
body.skin-light .reg-msg { color: var(--sk-text-mute) !important; font-size: 12px !important; }
body.skin-light .reg-msg.invalid { color: #c43d4f !important; }
body.skin-light .reg-msg.valid { color: #2f8a52 !important; }
body.skin-light .reg-check.valid { color: #2f8a52 !important; }
body.skin-light .reg-check.invalid { color: #c43d4f !important; }

/* bank dropdown */
body.skin-light .bank-dropdown { position: relative; }
body.skin-light .bank-selected {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  padding: 12px 14px !important;
}
body.skin-light .bank-dropdown.open .bank-selected,
body.skin-light .bank-dropdown.has-value .bank-selected { border-color: var(--sk-accent) !important; }
body.skin-light .bank-arrow { color: var(--sk-text-mute) !important; transition: transform .18s; }
body.skin-light .bank-dropdown.open .bank-arrow { transform: rotate(180deg); color: var(--sk-accent) !important; }
body.skin-light .bank-options {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-btn) !important;
  box-shadow: var(--sk-shadow-card);
  max-height: 260px;
}
body.skin-light .bank-search { background: var(--sk-bg-soft) !important; color: var(--sk-text) !important; border: 1px solid var(--sk-line) !important; }
body.skin-light .bank-search-icon { color: var(--sk-text-mute) !important; }
body.skin-light .bank-option { color: var(--sk-text) !important; }
body.skin-light .bank-option:hover { background: var(--sk-accent-fill) !important; color: var(--sk-accent) !important; }
body.skin-light .bank-option.selected { background: var(--sk-accent) !important; color: #fff !important; }
body.skin-light .bank-opt-icon { color: var(--sk-accent) !important; }

/* mypage modal — re-skin inline gradient avatar etc */
body.skin-light #modal-mypage #my-nickname { color: var(--sk-text) !important; }
body.skin-light #modal-mypage #my-username { color: var(--sk-text-mute) !important; }
body.skin-light #modal-mypage > .modal-box > div > div[style*="border-radius:50%"] {
  background: var(--sk-grad) !important;
  border: 2px solid var(--sk-bg);
  box-shadow: var(--sk-shadow-card);
}
body.skin-light #modal-mypage .modal-box > div > div[style*="display:flex;gap:10px"] > div {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
body.skin-light #modal-mypage #my-balance { color: var(--sk-accent) !important; }

/* deposit / withdraw modal */
body.skin-light #deposit-modal,
body.skin-light .modal-backdrop { background: rgba(15,23,42,.45) !important; backdrop-filter: blur(4px); }
body.skin-light .tw-modal-container {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(15,23,42,.20);
}
body.skin-light .tw-modal-x { color: var(--sk-text) !important; opacity: 1 !important; }
body.skin-light .tw-modal-x:hover { color: #000 !important; opacity: 1 !important; }
body.skin-light .tw-banner {
  background: var(--sk-grad) !important;
  color: #fff !important;
}
body.skin-light .tw-banner-overlay { display: none !important; }
body.skin-light .tw-banner-title { color: #fff !important; font-weight: 800 !important; letter-spacing: 2px; }
body.skin-light .tw-tabs { border-bottom: 1px solid var(--sk-line) !important; background: var(--sk-bg) !important; }
body.skin-light .tw-tab { color: var(--sk-text-mute) !important; background: transparent !important; }
body.skin-light .tw-tab.active { color: var(--sk-accent) !important; border-bottom: 2px solid var(--sk-accent) !important; background: transparent !important; }
body.skin-light .tw-content { background: var(--sk-bg) !important; }
body.skin-light .tw-section-label { color: var(--sk-text-soft) !important; font-weight: 700; }
body.skin-light .tw-money-info,
body.skin-light .tw-money-item { background: var(--sk-bg-soft) !important; border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-btn); color: var(--sk-text) !important; }
body.skin-light .tw-money-dot { background: var(--sk-accent) !important; }
body.skin-light .tw-notice { background: var(--sk-accent-fill) !important; border: 1px solid #ead9b8 !important; color: var(--sk-text-soft) !important; border-radius: var(--sk-radius-btn); }
body.skin-light .tw-notice .highlight { color: var(--sk-accent) !important; font-weight: 700; }
body.skin-light .tw-amount-btns button {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-weight: 600;
  box-shadow: var(--sk-shadow-3d);
  transition: all .15s ease;
}
body.skin-light .tw-amount-btns button:hover { border-color: var(--sk-accent) !important; color: var(--sk-accent) !important; }
body.skin-light .tw-amount-btns button.active,
body.skin-light .tw-bonus-btn.active { background: var(--sk-grad) !important; color: #fff !important; border-color: var(--sk-accent) !important; }
body.skin-light .tw-amount-input,
body.skin-light .tw-text-input {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
  border-radius: var(--sk-radius-btn) !important;
  padding: 12px 14px !important;
}
body.skin-light .tw-reset-btn { background: var(--sk-bg) !important; border: 1px solid var(--sk-line) !important; color: var(--sk-text-soft) !important; border-radius: var(--sk-radius-btn); }
body.skin-light .tw-after-amount { color: var(--sk-text-soft) !important; }
body.skin-light .tw-after-amount strong { color: var(--sk-accent) !important; }
body.skin-light .tw-btn-main {
  background: var(--sk-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sk-radius-btn) !important;
  font-weight: 700;
  box-shadow: var(--sk-shadow-cta);
}
body.skin-light .tw-btn-sub {
  background: var(--sk-bg) !important;
  color: var(--sk-accent) !important;
  border: 1px solid var(--sk-accent) !important;
  border-radius: var(--sk-radius-btn) !important;
  font-weight: 700;
}
body.skin-light .tw-history-label { color: var(--sk-text) !important; font-weight: 700; }
body.skin-light .tw-history-table { background: var(--sk-bg) !important; }
body.skin-light .tw-history-table th { background: var(--sk-accent-fill) !important; color: var(--sk-text-soft) !important; border-bottom: 1px solid var(--sk-line) !important; }
body.skin-light .tw-history-table td { color: var(--sk-text) !important; border-bottom: 1px solid var(--sk-line) !important; }
body.skin-light .tw-history-table .empty-row td { color: var(--sk-text-mute) !important; }

/* notice / message detail modal — inline-styled containers */
body.skin-light #msg-detail-modal,
body.skin-light #notice-detail-modal,
body.skin-light #inquiry-modal,
body.skin-light #point-convert-modal { background: rgba(15,23,42,.45) !important; }
body.skin-light #msg-detail-modal > div,
body.skin-light #notice-detail-modal > div,
body.skin-light #inquiry-modal > div,
body.skin-light #point-convert-modal > div {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: 0 25px 60px rgba(15,23,42,.20);
  color: var(--sk-text);
}
body.skin-light #msg-detail-modal #msg-detail-title,
body.skin-light #notice-detail-modal #notice-detail-title { color: var(--sk-text) !important; }
body.skin-light #msg-detail-modal #msg-detail-body,
body.skin-light #notice-detail-modal #notice-detail-body { color: var(--sk-text-soft) !important; }
body.skin-light #msg-detail-modal button,
body.skin-light #notice-detail-modal button,
body.skin-light #inquiry-modal button { color: var(--sk-text-mute) !important; }

/* notice popup (login-time popups) */
body.skin-light .nc-popup-card {
  background: var(--sk-bg) !important;
  color: var(--sk-text) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-card) !important;
}
body.skin-light .nc-card-x,
body.skin-light .nc-card-hide { color: var(--sk-text-mute) !important; }

/* ─── 14. SUB-PAGE / GENERIC INLINE STYLE OVERRIDES ─── */
body.skin-light [style*="color:#e2e8f0"],
body.skin-light [style*="color:#cbd5e1"] { color: var(--sk-text) !important; }
body.skin-light [style*="color:#8ba4bf"],
body.skin-light [style*="color:#94a3b8"] { color: var(--sk-text-soft) !important; }
body.skin-light [style*="color:#475569"],
body.skin-light [style*="color:#64748b"] { color: var(--sk-text-mute) !important; }
body.skin-light [style*="background:var(--bg-dark)"],
body.skin-light [style*="background:var(--modal-bg)"],
body.skin-light [style*="background:var(--modal-dark)"] { background: var(--sk-bg) !important; }
body.skin-light [style*="border:1px solid #2a2a2a"],
body.skin-light [style*="border:1px solid rgba(53,222,147,0.1)"],
body.skin-light [style*="border:1px solid rgba(53,222,147,0.15)"],
body.skin-light [style*="border:1px solid rgba(53,222,147,0.2)"],
body.skin-light [style*="border-bottom:1px solid #2a2a2a"],
body.skin-light [style*="border-bottom:1px solid rgba(53,222,147,0.1)"] { border-color: var(--sk-line) !important; }
body.skin-light [style*="background:#1a1a1a"] { background: var(--sk-accent-fill) !important; }
body.skin-light a[style*="color:var(--primary-light)"] { color: var(--sk-accent) !important; }
body.skin-light button[style*="background:#ef4444"] { background: #c43d4f !important; }

/* ─── 15. MOBILE BREAKPOINT (≤1024) ─── */
@media (max-width: 1024px) {
  body.skin-light { padding-left: 0; }
  body.skin-light .skin-lnb { display: none; }
  body.skin-light .header-section,
  body.skin-light .header-main,
  body.skin-light .header-menu { left: 0 !important; width: 100% !important; }
  body.skin-light .header-main .container { padding: 0 12px; }
  body.skin-light .left-menu-btn span { background: var(--sk-text) !important; }
  body.skin-light .header-logo { display: flex !important; }
  body.skin-light .header-logo img { filter: invert(.85) sepia(1) saturate(.6) hue-rotate(15deg) brightness(.7); }

  body.skin-light .visual-section { padding: 12px !important; }
  body.skin-light .toggle-section { padding: 12px !important; }
  body.skin-light .toggle-btn { height: 88px; }
  body.skin-light .toggle-btn .kr-text { font-size: 18px; }
  body.skin-light .toggle-btn .en-text { font-size: 10px; }

  body.skin-light .realtime-section { padding: 12px !important; }
  body.skin-light .realtime-section [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.skin-light .partners { padding: 24px 12px !important; }
}
@media (max-width: 540px) {
  body.skin-light .modal-box { padding: 22px !important; border-radius: 16px !important; }
  body.skin-light .modal-title { font-size: 22px; }
  body.skin-light .realtime-section [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v1
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v2 — REFERENCE-MATCH OVERRIDES
   1차에서 빠진 부분: 잭팟/토글/실시간 4분할 숨김, LNB 로고·아이콘 강화,
   섹션 타이틀, 카드 워터마크, 깔끔한 풋터 — 레퍼런스(s5.miv2.com) 매칭.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── A. 레퍼런스에 없는 섹션 완전 숨김 ─── */
body.skin-light .jackpot-custom,
body.skin-light .toggle-section,
body.skin-light .toggle-mobile,
body.skin-light .header-section .header-menu { display: none !important; }

/* 헤더 메인 행 정돈 */
body.skin-light .header-main { border: none !important; box-shadow: none !important; }
body.skin-light .header-section { border-bottom: 1px solid var(--sk-line) !important; }

/* ─── B. 헤더 마퀴 (notice-line-bar) 헤더 안으로 자연스럽게 ─── */
body.skin-light #notice-line-bar {
  position: fixed; top: 0; left: var(--sk-lnb-w); right: 0;
  height: var(--sk-header-h); padding: 0 24px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: var(--sk-bg) !important; border-bottom: 1px solid var(--sk-line) !important;
  z-index: 25; pointer-events: none; margin: 0 !important;
}
body.skin-light #notice-line-bar #notice-line-text {
  color: var(--sk-accent-deep) !important; font-weight: 500 !important; font-size: 13px !important;
  padding-left: 0 !important; max-width: 60vw;
  text-overflow: ellipsis; overflow: hidden;
}
@media (max-width: 1024px) {
  body.skin-light #notice-line-bar { left: 0 !important; }
}

/* 헤더는 마퀴 위에 떠있어야 — 알약 버튼은 헤더의 우측 영역 */
body.skin-light .header-section { background: transparent !important; border: none !important; box-shadow: none !important; position: fixed; top: 0; left: var(--sk-lnb-w); right: 0; z-index: 26; }
body.skin-light .header-main { background: transparent !important; height: var(--sk-header-h); }
body.skin-light .header-main .container { height: var(--sk-header-h); padding: 0 24px; }
@media (max-width: 1024px) {
  body.skin-light .header-section { left: 0 !important; }
}
/* push body content down by header height since header is now fixed */
body.skin-light #home-area,
body.skin-light #event-section,
body.skin-light #notice-section,
body.skin-light #message-section,
body.skin-light #support-section,
body.skin-light #sports-section { padding-top: var(--sk-header-h) !important; }

/* ─── C. LNB — 로고를 SAMPLE CASINO 풍 큰 2줄 워드마크로 ─── */
body.skin-light .skin-lnb { padding: 26px 18px 18px !important; gap: 16px !important; }
body.skin-light .skin-lnb-logo {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 0 !important;
  padding: 0 4px 18px !important;
  border-bottom: 0 !important;
  text-decoration: none !important; cursor: pointer;
}
body.skin-light .skin-lnb-logo-line1,
body.skin-light .skin-lnb-logo-line2 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--sk-accent);
  line-height: 1.05;
}
body.skin-light .skin-lnb-logo-line1 { font-size: 30px; }
body.skin-light .skin-lnb-logo-line2 { font-size: 30px; padding-left: 2px; }

/* LNB menu boxes */
body.skin-light .skin-lnb-group {
  padding: 12px 8px !important;
  border: 1px solid var(--sk-line) !important;
  background: var(--sk-bg) !important;
  border-radius: var(--sk-radius-card) !important;
  box-shadow: var(--sk-shadow-3d) !important;
  gap: 0 !important;
}
body.skin-light .skin-lnb-item {
  height: 44px !important; padding: 0 8px !important; gap: 10px !important;
  color: var(--sk-text) !important; font-size: 14px !important; font-weight: 500 !important;
  border-bottom: 1px solid var(--sk-line) !important; border-radius: 0 !important;
  background: transparent !important;
}
body.skin-light .skin-lnb-group .skin-lnb-item:last-child { border-bottom: 0 !important; }
body.skin-light .skin-lnb-item:hover {
  color: var(--sk-accent-deep) !important;
  background: transparent !important;
}
body.skin-light .skin-lnb-label { flex: 1; }

/* LNB icons — 컬러 그라데이션 라운드 사각형 (레퍼런스의 Gold-Gradient PNG 흉내) */
body.skin-light .skin-lnb-icon {
  width: 28px !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 8px;
  font-size: 13px;
  color: #fff !important;
  background: var(--sk-grad-deep);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(136,124,98,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
body.skin-light .skin-lnb-icon i { line-height: 1; font-size: 13px; }
/* per-item color tweaks for variety */
body.skin-light .skin-lnb-icon.ic-live    { background: linear-gradient(135deg,#e07a90,#c43d4f); }
body.skin-light .skin-lnb-icon.ic-slot    { background: linear-gradient(135deg,#7ac9e0,#3a86c6); }
body.skin-light .skin-lnb-icon.ic-deposit { background: linear-gradient(135deg,#a5d6a7,#4a9a52); }
body.skin-light .skin-lnb-icon.ic-withdraw{ background: linear-gradient(135deg,#f3d27a,#c8a557); }
body.skin-light .skin-lnb-icon.ic-notice  { background: linear-gradient(135deg,#f8b878,#d97f3f); }
body.skin-light .skin-lnb-icon.ic-event   { background: linear-gradient(135deg,#c4a5e5,#7c50b4); }
body.skin-light .skin-lnb-icon.ic-qa      { background: linear-gradient(135deg,#a5b8d8,#5e7aa5); }
body.skin-light .skin-lnb-icon.ic-msg     { background: linear-gradient(135deg,#f0a5a5,#c45e5e); }

/* ─── D. 헤더 알약 버튼 — 위치 고정, 마퀴 위에 떠있게 ─── */
body.skin-light .header-main .container { justify-content: flex-end; position: relative; z-index: 27; }
body.skin-light .bal-container { background: transparent !important; padding: 0 !important; }

/* ─── E. 섹션 타이틀 (.sk-section-title) ─── */
body.skin-light .sk-section-title {
  display: flex; align-items: center; gap: 12px;
  max-width: 1280px; margin: 0 auto 18px;
  padding: 0 24px;
}
body.skin-light .sk-tt-icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  border-radius: 8px;
  background: var(--sk-grad-deep);
  box-shadow: 0 2px 6px rgba(136,124,98,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
body.skin-light .sk-tt-casino .sk-tt-icon { background: linear-gradient(135deg,#e07a90,#c43d4f); }
body.skin-light .sk-tt-slot   .sk-tt-icon { background: linear-gradient(135deg,#7ac9e0,#3a86c6); }
body.skin-light .sk-tt-hotel  .sk-tt-icon { background: linear-gradient(135deg,#f3d27a,#c8a557); }
body.skin-light .sk-tt-text {
  margin: 0 !important;
  font-family: var(--sk-font);
  font-weight: 800;
  font-size: 24px;
  color: var(--sk-text) !important;
  letter-spacing: -.5px;
}
body.skin-light .sk-tt-text span { color: var(--sk-accent); font-weight: 800; }
@media (max-width: 768px) {
  body.skin-light .sk-section-title { padding: 0 12px; gap: 10px; }
  body.skin-light .sk-tt-icon { width: 26px; height: 26px; font-size: 13px; }
  body.skin-light .sk-tt-text { font-size: 17px; }
}












@media (max-width: 768px)  {



}

/* ─── G. 실시간 4분할 → 공지/이벤트 2분할 ─── */
body.skin-light .realtime-section { padding: 36px 24px !important; }
body.skin-light .realtime-section .container > div {
  grid-template-columns: 1fr 1fr !important;
  max-width: 1280px; margin: 0 auto;
}
/* hide #2(win-list) and #3(deposit-list) info-boxes */
body.skin-light .realtime-section .info-box:nth-child(2),
body.skin-light .realtime-section .info-box:nth-child(3) { display: none !important; }

/* notice/event 보드 — 레퍼런스 .board-container 풍 */
body.skin-light .realtime-section .info-box {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-card) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.skin-light .realtime-section .info-header { display: none !important; }
body.skin-light .realtime-section .info-body {
  padding: 16px !important; min-height: 200px !important;
}
body.skin-light .realtime-section .info-body > * {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--sk-line) !important;
  font-size: 13px;
}
body.skin-light .realtime-section .info-body > *:last-child { border-bottom: 0 !important; }

/* 보드 위에 "GARDEN 공지사항" / "GARDEN 이벤트" 타이틀을 붙인다 (CSS만으로) */
body.skin-light .realtime-section .info-box:nth-child(1)::before,
body.skin-light .realtime-section .info-box:nth-child(4)::before {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 12px; margin-bottom: 6px;
  font-family: var(--sk-font); font-weight: 800; font-size: 22px;
  color: var(--sk-text);
  letter-spacing: -.4px;
}
body.skin-light .realtime-section .info-box:nth-child(1)::before { content: "GARDEN \00a0 공지사항"; }
body.skin-light .realtime-section .info-box:nth-child(4)::before { content: "GARDEN \00a0 이벤트"; }
@media (max-width: 768px) {
  body.skin-light .realtime-section .container > div { grid-template-columns: 1fr !important; gap: 14px !important; }
  body.skin-light .realtime-section { padding: 24px 12px !important; }
}

/* ─── H. 파트너 로고 — 그레이 가로 스트립 ─── */
body.skin-light .partners {
  background: var(--sk-bg) !important;
  border-top: 1px solid var(--sk-line) !important;
  padding: 28px 24px !important;
}
body.skin-light .partners > div { max-width: 1280px; margin: 0 auto; }
body.skin-light .partners > div > div:first-child { display: none !important; }
body.skin-light .partner-logo-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px 28px !important;
}
body.skin-light .p-logo-img {
  width: 90px !important; height: 28px !important;
  opacity: .55 !important;
}
body.skin-light .p-logo-img img { filter: grayscale(1) brightness(.6) !important; max-height: 100% !important; }
body.skin-light .p-logo-img:hover { opacity: 1 !important; }
body.skin-light .p-logo-img:hover img { filter: grayscale(.3) !important; }

/* ─── I. 신규 풋터 ─── */
body.skin-light .sk-footer {
  background: var(--sk-bg);
  border-top: 1px solid var(--sk-line);
  padding: 40px 24px 60px;
  margin-top: 0;
}
body.skin-light .sk-footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 2fr;
  gap: 40px;
  align-items: center;
}
body.skin-light .sk-footer-brand { display: flex; flex-direction: column; gap: 14px; }
body.skin-light .sk-footer-logo { display: flex; flex-direction: column; gap: 0; }
body.skin-light .sk-footer-logo-l1,
body.skin-light .sk-footer-logo-l2 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 8px;
  color: var(--sk-accent);
  line-height: 1.05;
}
body.skin-light .sk-footer-logo-l2 { padding-left: 2px; }
body.skin-light .sk-footer-copy {
  margin: 0; padding-right: 30px;
  color: var(--sk-text-soft); font-size: 11px; font-weight: 400;
  letter-spacing: .3px; line-height: 1.6;
}
body.skin-light .sk-footer-links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
body.skin-light .sk-footer-info-box {
  aspect-ratio: 148 / 140;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: var(--sk-bg-soft);
  border: 1px solid var(--sk-line);
  border-radius: 6px;
  color: var(--sk-text-soft);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: border-color .15s, color .15s, transform .15s;
}
body.skin-light .sk-footer-info-box i { font-size: 32px; color: #9ca3af; }
body.skin-light .sk-footer-info-box:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
  transform: translateY(-2px);
}
body.skin-light .sk-footer-info-box:hover i { color: var(--sk-accent); }
@media (max-width: 768px) {
  body.skin-light .sk-footer { padding: 24px 12px 40px; }
  body.skin-light .sk-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  body.skin-light .sk-footer-logo-l1,
  body.skin-light .sk-footer-logo-l2 { font-size: 26px; letter-spacing: 5px; }
  body.skin-light .sk-footer-info-box i { font-size: 24px; }
  body.skin-light .sk-footer-info-box { font-size: 11px; }
}

/* ─── J. 헤더의 마퀴를 가운데로 정렬, 알약 버튼 헤더 우측 ─── */
body.skin-light .header-main { background: transparent !important; }
/* hide all menus inside header */
body.skin-light .header-main .sc-menu,
body.skin-light .header-main .header-logo,
body.skin-light .header-main .left-menu-btn { display: none !important; }
@media (max-width: 1024px) {
  body.skin-light .header-main .left-menu-btn { display: flex !important; }
  body.skin-light .header-main .header-logo { display: flex !important; position: absolute; left: 50%; transform: translateX(-50%); }
}

/* ─── K. 배너 (잭팟 숨겼으니 마진 정리) ─── */
body.skin-light .visual-section { padding: 24px 24px 8px !important; }
body.skin-light #banner-slider {
  aspect-ratio: 1280 / 200;
  border: 3px solid var(--sk-accent) !important;
  border-radius: var(--sk-radius-card);
}

/* ─── L. 메뉴(side nav original)이 화면에 나타나는 경우 안전망 ─── */
body.skin-light aside.sidebar { display: none !important; }
body.skin-light nav.navbar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v2
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v3 — bug fixes (header blob, body padding, FA icons, 2-tone titles)
   기존 CSS 후반부에 박힌 !important 룰을 강제로 잡아냄.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) 헤더 중앙의 그라데이션 블록 제거 (그 흐릿한 직사각형 정체) */
body.skin-light .header-main:before,
body.skin-light .header-main:after,
body.skin-light .header-section:before,
body.skin-light .header-section:after { display: none !important; content: none !important; }

/* 2) line 8331 의 body padding-top:150px / Noto Sans 강제 룰을 깸 */
body.skin-light { padding-top: 0 !important; font-family: var(--sk-font) !important; }
@media (min-width: 1025px) { body.skin-light { padding-left: var(--sk-lnb-w) !important; padding-top: 0 !important; } }

/* 3) line 8332 의 * { font-family:inherit!important } 가 FontAwesome 폰트 죽이는 것 복구 */
body.skin-light .fa,
body.skin-light .fas, body.skin-light .fa-solid,
body.skin-light .far, body.skin-light .fa-regular,
body.skin-light .fab, body.skin-light .fa-brands,
body.skin-light i.fas, body.skin-light i.far, body.skin-light i.fab,
body.skin-light .ri,
body.skin-light [class^="ri-"], body.skin-light [class*=" ri-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "remixicon" !important;
}
body.skin-light .fas, body.skin-light .fa-solid, body.skin-light i.fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
body.skin-light .far, body.skin-light .fa-regular, body.skin-light i.far { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
body.skin-light .fab, body.skin-light .fa-brands, body.skin-light i.fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
body.skin-light [class^="ri-"], body.skin-light [class*=" ri-"] { font-family: "remixicon" !important; }

/* 4) 보드 타이틀(공지/이벤트) 검정 + 골드 2색 — info-header 다시 사용 */
body.skin-light .realtime-section .info-box::before { content: none !important; display: none !important; }
body.skin-light .realtime-section .info-header {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 18px 18px 12px !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
body.skin-light .realtime-section .info-header-icon {
  width: 30px !important; height: 30px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important;
  border-radius: 8px;
  background: var(--sk-grad-deep);
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(136,124,98,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
body.skin-light .realtime-section .info-box:nth-child(1) .info-header-icon { background: linear-gradient(135deg,#f8b878,#d97f3f); }
body.skin-light .realtime-section .info-box:nth-child(4) .info-header-icon { background: linear-gradient(135deg,#c4a5e5,#7c50b4); }
body.skin-light .realtime-section .info-header-title {
  font-family: var(--sk-font) !important;
  font-weight: 800 !important; font-size: 22px !important;
  color: var(--sk-accent) !important;
  letter-spacing: -.4px;
}
/* "GARDEN " 검정 prefix 를 ::before 로 추가 */
body.skin-light .realtime-section .info-header-title::before {
  content: "GARDEN ";
  color: var(--sk-text);
  font-weight: 800;
  margin-right: 4px;
}

/* 5) 잭팟 자리 차지 방지 — 부모 위/아래 마진 0 */
body.skin-light .jackpot-custom { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* 6) 헤더와 마퀴 겹침 정리 — 마퀴는 헤더 안의 가운데 컨텐츠로 처리 */
body.skin-light #notice-line-bar {
  position: fixed !important;
  top: 0 !important;
  left: var(--sk-lnb-w) !important;
  right: 0 !important;
  height: var(--sk-header-h) !important;
  z-index: 24 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
@media (max-width: 1024px) { body.skin-light #notice-line-bar { left: 0 !important; } }
body.skin-light .header-section {
  position: fixed !important;
  top: 0 !important;
  left: var(--sk-lnb-w) !important;
  right: 0 !important;
  z-index: 26 !important;
  background: transparent !important;
}
@media (max-width: 1024px) { body.skin-light .header-section { left: 0 !important; } }
body.skin-light .header-main {
  height: var(--sk-header-h) !important;
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
body.skin-light #notice-line-bar { background: transparent !important; border: 0 !important; }
/* 마퀴를 헤더 영역 안에서만 보이도록: 헤더가 white bg 로 덮어버리고, 마퀴는 그 위에 떠야 함 */
body.skin-light #notice-line-bar { z-index: 27 !important; pointer-events: none; }
body.skin-light .header-main { background: var(--sk-bg) !important; }
body.skin-light .header-main .container { background: transparent; }
/* 그렇지만 마퀴를 헤더 위에 올리면 로그인 버튼이 가려짐. 해결: 마퀴 가로폭 축소 */
body.skin-light #notice-line-bar { padding: 0 280px !important; }
body.skin-light #notice-line-text {
  position: relative !important; padding-left: 0 !important;
  color: var(--sk-accent-deep) !important;
  font-weight: 500 !important; font-size: 13px !important;
  white-space: nowrap;
}

/* 7) #home-area / 다른 섹션 본문 — 헤더 높이만큼 공간 확보 */
body.skin-light #home-area,
body.skin-light #event-section,
body.skin-light #notice-section,
body.skin-light #message-section,
body.skin-light #support-section,
body.skin-light #sports-section { padding-top: calc(var(--sk-header-h) + 8px) !important; }

/* 8) sub-page-area 가 떠있을 때도 톤 맞추기 */
body.skin-light #sub-page-area { background: var(--sk-bg-soft) !important; color: var(--sk-text); }


/* 10) 풋터가 풍성한 partners 위에 자연스럽게 — partners 위 구분선 정리 */
body.skin-light .partners + .sk-footer { border-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v3
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v4 — header isolation (헤더 중앙 백색 잔재 제거)
   .header-main 안에서 #hdr-auth 만 보이게 강제. 나머지는 전부 무시.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 데스크톱 (≥1025) — #hdr-auth 만 살림 */
@media (min-width: 1025px) {
  html body.skin-light .header-main > .container > .left-menu-btn,
  html body.skin-light .header-main > .container > .sc-menu,
  html body.skin-light .header-main > .container > .header-logo,
  html body.skin-light .header-main > .container > .bs-ul-df {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important; height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  html body.skin-light .header-main > .container { justify-content: flex-end !important; gap: 0 !important; }
  html body.skin-light .header-main > .container > #hdr-auth { display: flex !important; align-items: center !important; }
}

/* 헤더 안 child 모두에 대해 모든 외부 이미지 숨김 (CDN 가든 로고 잔재 차단) */
body.skin-light .header-section img[src*="thecontentsnetworksystem.com"] { display: none !important; }

/* sub-page-area 가 등장할 때 발생할 수 있는 흰 박스 제거 */
body.skin-light #sub-page-area:empty { display: none !important; }

/* navbar 와 sidebar(원본) 강제 숨김 — 인라인 style display:none 가 다른 JS 에 덮일 수 있음 */
body.skin-light #sidebar.sidebar,
body.skin-light .navbar { display: none !important; }

/* before-login 컨테이너 자체에 잔여 스타일 클리어 */
body.skin-light #hdr-auth.bal-container,
body.skin-light #hdr-auth .before-login {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.skin-light #hdr-auth .before-login.active { padding: 0 !important; }

/* 헤더 자체의 부속 도장(.w-b 등의 wrapper 효과) 제거 */
body.skin-light .header-section.w-b,
body.skin-light .header-main.w-b,
body.skin-light .header-menu.w-b { background-image: none !important; }

/* 마퀴 텍스트가 비어있을 때 헤더 중앙 비우기 */
body.skin-light #notice-line-bar:has(#notice-line-text:empty) { display: none !important; }
/* 폴백: :has 미지원 환경 — 마퀴 자체를 헤더 안 컨텐츠로 다루지 말고 단순 배경만 */
body.skin-light #notice-line-bar { display: none !important; } /* 우선 마퀴 바 자체를 숨겨버림 — 레퍼런스 버전엔 마퀴 텍스트가 거의 안 보임 */

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v4
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v5 — local-dev fallbacks
   백엔드 없는 로컬 미리보기에서 깨진 alt 텍스트/빈 그리드를 시각적으로 정돈.
   운영(백엔드 있는 환경)에서는 자연스럽게 실제 자산으로 덮어씌워짐.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 파트너 로고 — 이미지 안 뜨면 그레이 placeholder 박스로 */
body.skin-light .p-logo-img {
  background: #eef0f3 !important;
  border-radius: 4px !important;
  position: relative;
  overflow: hidden;
}
body.skin-light .p-logo-img img {
  font-size: 0 !important;     /* alt 텍스트 숨김 (broken 상태) */
  color: transparent !important;
  text-indent: -9999px !important;
  width: 100% !important; height: 100% !important;
  object-fit: contain;
}



/* sk-footer 가 화면 안에 잘 보이도록 마진 보정 */
body.skin-light .sk-footer { margin-top: 0; }
body.skin-light .partners + .sk-footer { border-top: 1px solid var(--sk-line) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v5
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v6 — 헤더 white-bar 연속성 버그 수정
   원인: .header-section 의 width:100% (원본) + left:250px (override) 충돌로
   헤더 박스가 화면 오른쪽 너머까지 늘어남. 화면에 보이는 헤더 영역의
   왼쪽 절반에는 white BG 가 도달하지 않아 배너가 뚫고 올라옴.
   해결: 헤더를 화면 전체(left:0, right:0)에 깔고 LNB가 위에 덮이도록.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) 헤더 박스를 화면 전체 가로폭으로 — LNB 가 z-index 로 덮음 */
html body.skin-light .header-section {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--sk-header-h) !important;
  z-index: 30 !important;
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
  box-shadow: none !important;
}
html body.skin-light .header-main {
  width: 100% !important;
  height: var(--sk-header-h) !important;
  background: var(--sk-bg) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.skin-light .header-main > .container {
  width: 100% !important;
  max-width: none !important;
  height: var(--sk-header-h) !important;
  padding: 0 24px 0 calc(var(--sk-lnb-w) + 24px) !important; /* LNB 폭만큼 좌측 비움 */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: transparent !important;
}

/* 2) LNB 가 헤더 위에 덮이도록 z-index 보정 */
@media (min-width: 1025px) {
  html body.skin-light .skin-lnb { z-index: 50 !important; }
}

/* 3) 모바일 (≤1024) — 헤더 영역의 좌측 LNB 패딩 제거 */
@media (max-width: 1024px) {
  html body.skin-light .header-main > .container {
    padding: 0 12px !important;
    justify-content: space-between !important;
  }
}

/* 4) #home-area 의 padding-top 강제 (혹시 다른 룰에 밀렸을 경우 대비) */
html body.skin-light #home-area,
html body.skin-light #event-section,
html body.skin-light #notice-section,
html body.skin-light #message-section,
html body.skin-light #support-section,
html body.skin-light #sports-section { padding-top: var(--sk-header-h) !important; }

/* 5) 배너가 헤더 위로 올라가지 않도록 z-index 보정 */
html body.skin-light .visual-section,
html body.skin-light #banner-slider { position: relative !important; z-index: 1 !important; }

/* 6) 마퀴 바 완전히 죽임 (이미 v4 에서 했지만 확실히) */
html body.skin-light #notice-line-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v6
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v7 — 헤더 컨테이너 단순화 (버튼 화면 밖 밀림 픽스)
   v6 의 padding-left:calc(LNB폭+24) 가 누적된 다른 패딩과 합쳐져서
   버튼이 viewport 오른쪽 너머로 밀림. 양쪽 패딩만 24px 로 단순화하고
   LNB 가 헤더의 좌측 250px 를 z-index 로 덮도록.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 헤더는 화면 전체 가로폭 — left/right padding 양쪽 24px 만 */
html html body.skin-light .header-section,
html body.skin-light .header-section {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: var(--sk-header-h) !important;
  z-index: 30 !important;
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.skin-light .header-main {
  width: 100% !important;
  max-width: 100% !important;
  height: var(--sk-header-h) !important;
  background: var(--sk-bg) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
html body.skin-light .header-main > .container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--sk-header-h) !important;
  padding: 0 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* #hdr-auth (margin-left:auto 로 우측 정렬) — 이미 원본이 자연스럽게 처리 */
html body.skin-light #hdr-auth.bal-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

/* LNB 가 헤더 좌측 250px 를 자연스럽게 덮음 */
@media (min-width: 1025px) {
  html body.skin-light .skin-lnb { z-index: 60 !important; }
}

/* body / 가능한 부모 컨테이너에 min-width 가 박혀있으면 풀어줌 */
html body.skin-light { min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; }
html body.skin-light .wrapper,
html body.skin-light .root-container { min-width: 0 !important; max-width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v7
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v8 — 로그인/회원가입 버튼을 viewport 우측 상단에 직접 fix
   v6/v7 의 flex/padding 계산이 다른 누적 룰과 충돌해서 버튼이 화면 밖으로
   밀리는 문제. 버튼 컨테이너(#hdr-auth)를 헤더 안 flex 자식이 아니라
   별도 fixed 포지션으로 따로 박아서 컨테이너 수학을 우회.
   ═══════════════════════════════════════════════════════════════════════════ */

/* #hdr-auth 자체를 viewport 우측 상단에 직접 fix */
html body.skin-light #hdr-auth.bal-container {
  position: fixed !important;
  top: 0 !important;
  right: 24px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: var(--sk-header-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 35 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

/* 모바일에서도 우측 상단 */
@media (max-width: 1024px) {
  html body.skin-light #hdr-auth.bal-container {
    right: 12px !important;
  }
}

/* before-login 그룹도 명시적으로 flex 로 — 버튼 가로 정렬 보장 */
html body.skin-light #hdr-auth .before-login {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.skin-light #hdr-auth .before-login.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body.skin-light #hdr-auth .btn-grp {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
}

/* 버튼 자체 — 강제 알약 골드 스타일 (혹시 다른 룰에 밀려 사라진 경우 대비) */
html body.skin-light #hdr-auth .login-link.btn-silver,
html body.skin-light #hdr-auth .join-link.btn-blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100px !important;
  height: 36px !important;
  min-width: 100px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
html body.skin-light #hdr-auth .login-link.btn-silver {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-accent) !important;
  color: var(--sk-accent) !important;
}
html body.skin-light #hdr-auth .join-link.btn-blue {
  background: var(--sk-accent) !important;
  border: 1px solid var(--sk-accent) !important;
  color: #fff !important;
}
html body.skin-light #hdr-auth button .text {
  color: inherit !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* logged-in 상태에서 (#hdr-auth innerHTML 이 JS 로 교체되는 경우) 도 우측 상단 유지 */
html body.skin-light #hdr-auth .after-login.active {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v8
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v9 — 메인 배너 사이즈 1600 × 430 으로 변경
   ═══════════════════════════════════════════════════════════════════════════ */

html body.skin-light #banner-slider {
  aspect-ratio: 1600 / 430 !important;
  max-width: 1600px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
@media (max-width: 1024px) {
  html body.skin-light #banner-slider {
    /* 모바일은 모바일 배너 비율 유지 */
    aspect-ratio: 1170 / 614 !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v9
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v10 — DARK NAVY + SILVER / PLATINUM 리테마
   배너(0428.png) 의 미드나잇 네이비 + 실버 럭셔리 톤에 맞춰 전체 무드 전환.
   기존 light/champagne 토큰을 다크 네이비/실버로 덮어씌움.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. 디자인 토큰 재정의 ─── */
body.skin-light {
  --sk-bg:           #0a1428;
  --sk-bg-soft:      #0e1a32;
  --sk-bg-card:      #14213c;
  --sk-bg-deep:      #050a18;
  --sk-line:         #243355;
  --sk-line-strong:  #3a4a78;
  --sk-text:         #e8edf5;
  --sk-text-soft:    #9ba9c4;
  --sk-text-mute:    #6b7a99;
  --sk-accent:       #b8c5dd;
  --sk-accent-soft:  #d4dce8;
  --sk-accent-deep:  #8ba0c4;
  --sk-accent-fill:  rgba(184, 197, 221, 0.08);
  --sk-grad:         linear-gradient(90deg, #d4dce8, #8ba0c4 80%);
  --sk-grad-deep:    linear-gradient(135deg, #e0e5ee, #a8b3cc 50%, #6e7e9e);
  --sk-grad-glow:    linear-gradient(135deg, #c5d3ed, #7e94be);
  --sk-shadow-soft:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px -1px rgba(0,0,0,.2);
  --sk-shadow-card:  0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(184,197,221,.05);
  --sk-shadow-3d:    0 3px 0 0 rgba(0,0,0,.3);
  --sk-shadow-cta:   0 6px 16px rgba(139,160,196,.25);
}

/* ─── 2. 글로벌 톤 ─── */
html body.skin-light {
  background: var(--sk-bg) !important;
  color: var(--sk-text) !important;
}
html body.skin-light::-webkit-scrollbar { background: var(--sk-bg-deep); }
html body.skin-light *::-webkit-scrollbar { background: var(--sk-bg-deep); }
html body.skin-light *::-webkit-scrollbar-thumb { background: var(--sk-line-strong); border-color: var(--sk-bg-deep); }

html body.skin-light *::selection { background: rgba(184,197,221,.25); color: #fff; }

/* ─── 3. 헤더 ─── */
html body.skin-light .header-section {
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .header-main { background: var(--sk-bg) !important; }
html body.skin-light .header-main > .container { background: transparent !important; }

/* 알약 버튼 — 실버 */
html body.skin-light #hdr-auth .login-link.btn-silver {
  background: transparent !important;
  border: 1px solid var(--sk-accent) !important;
  color: var(--sk-accent-soft) !important;
}
html body.skin-light #hdr-auth .login-link.btn-silver:hover {
  background: rgba(184,197,221,.08) !important;
}
html body.skin-light #hdr-auth .join-link.btn-blue {
  background: var(--sk-grad) !important;
  border: 1px solid var(--sk-accent) !important;
  color: #0a1428 !important;
  font-weight: 700 !important;
}

/* ─── 4. LNB ─── */
html body.skin-light .skin-lnb {
  background: var(--sk-bg-deep) !important;
  border-right: 1px solid var(--sk-line) !important;
}
html body.skin-light .skin-lnb-logo-line1,
html body.skin-light .skin-lnb-logo-line2 {
  background: var(--sk-grad-deep);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html body.skin-light .skin-lnb-group {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
html body.skin-light .skin-lnb-item {
  color: var(--sk-text-soft) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .skin-lnb-item:hover {
  color: var(--sk-text) !important;
  background: rgba(184,197,221,.05) !important;
}
html body.skin-light .skin-lnb-item:hover .skin-lnb-icon { filter: brightness(1.1); }

/* LNB 아이콘 — 다크 톤에 맞게 채도/명도 조정, 다크 배경에서도 빛나게 */
html body.skin-light .skin-lnb-icon {
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
html body.skin-light .skin-lnb-icon.ic-live    { background: linear-gradient(135deg,#e07a90,#a02a3f); }
html body.skin-light .skin-lnb-icon.ic-slot    { background: linear-gradient(135deg,#7ac9e0,#3a86c6); }
html body.skin-light .skin-lnb-icon.ic-deposit { background: linear-gradient(135deg,#a5d6a7,#3a8a44); }
html body.skin-light .skin-lnb-icon.ic-withdraw{ background: linear-gradient(135deg,#f3d27a,#b89548); }
html body.skin-light .skin-lnb-icon.ic-notice  { background: linear-gradient(135deg,#f8b878,#c8702f); }
html body.skin-light .skin-lnb-icon.ic-event   { background: linear-gradient(135deg,#c4a5e5,#6840a0); }
html body.skin-light .skin-lnb-icon.ic-qa      { background: linear-gradient(135deg,#a5b8d8,#4a6080); }
html body.skin-light .skin-lnb-icon.ic-msg     { background: linear-gradient(135deg,#f0a5a5,#a04848); }

/* ─── 5. 본문 / 섹션 백그라운드 ─── */
html body.skin-light #home-area,
html body.skin-light #game-section-wrapper,
html body.skin-light #event-section,
html body.skin-light #notice-section,
html body.skin-light #message-section,
html body.skin-light #support-section,
html body.skin-light #sports-section,
html body.skin-light #sub-page-area { background: var(--sk-bg) !important; }

/* 배너 보더는 실버 */
html body.skin-light #banner-slider {
  border: 2px solid var(--sk-accent-deep) !important;
  background: var(--sk-bg-deep) !important;
  box-shadow: 0 0 0 1px rgba(184,197,221,.08), 0 12px 30px rgba(0,0,0,.4);
}

/* ─── 6. 섹션 타이틀 — 다크 배경에서 잘 보이게 ─── */
html body.skin-light .sk-tt-text { color: var(--sk-text) !important; }
html body.skin-light .sk-tt-text span {
  background: var(--sk-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
html body.skin-light .sk-tt-icon {
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
}








/* ─── 8. 보드 (공지/이벤트) ─── */
html body.skin-light .realtime-section .info-box {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .realtime-section .info-header { background: transparent !important; border-bottom: 0 !important; }
html body.skin-light .realtime-section .info-header-icon {
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
html body.skin-light .realtime-section .info-header-title { color: var(--sk-accent-soft) !important; }
html body.skin-light .realtime-section .info-header-title::before {
  color: var(--sk-text);
}
html body.skin-light .realtime-section .info-body,
html body.skin-light .realtime-section .info-body > *,
html body.skin-light .realtime-section .info-body a {
  color: var(--sk-text-soft) !important;
}
html body.skin-light .realtime-section .info-body > * {
  border-bottom: 1px solid var(--sk-line) !important;
}

/* ─── 9. 일반 섹션 (이벤트/공지/쪽지/고센) 테이블 ─── */
html body.skin-light #event-section h2,
html body.skin-light #notice-section h2,
html body.skin-light #message-section h2,
html body.skin-light #support-section h2 { color: var(--sk-text) !important; }
html body.skin-light #event-section table,
html body.skin-light #notice-section table,
html body.skin-light #message-section table,
html body.skin-light #support-section table {
  background: var(--sk-bg-card) !important;
}
html body.skin-light #event-section table thead tr,
html body.skin-light #notice-section table thead tr,
html body.skin-light #message-section table thead tr,
html body.skin-light #support-section table thead tr {
  background: var(--sk-bg-deep) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light #event-section th,
html body.skin-light #notice-section th,
html body.skin-light #message-section th,
html body.skin-light #support-section th { color: var(--sk-accent-soft) !important; }
html body.skin-light #event-section td,
html body.skin-light #notice-section td,
html body.skin-light #message-section td,
html body.skin-light #support-section td {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light #event-section > div > div,
html body.skin-light #notice-section > div > div,
html body.skin-light #message-section > div > div,
html body.skin-light #support-section > div > div { border-color: var(--sk-line) !important; }

/* ─── 10. 모달 ─── */
html body.skin-light .modal-overlay {
  background: rgba(0, 0, 0, .7) !important;
}
html body.skin-light .modal-box {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(184,197,221,.05) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .modal-title { color: var(--sk-accent-soft) !important; }
html body.skin-light .modal-title:after { background: var(--sk-grad); }
html body.skin-light .modal-sub { color: var(--sk-text-mute) !important; }
html body.skin-light .modal-close { color: var(--sk-text-mute) !important; }
html body.skin-light .modal-close:hover { color: var(--sk-accent-soft) !important; }

/* 폼 인풋 */
html body.skin-light .m-input,
html body.skin-light textarea.m-input,
html body.skin-light .modal-box input[type="text"],
html body.skin-light .modal-box input[type="password"],
html body.skin-light .modal-box input[type="number"],
html body.skin-light .modal-box textarea {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .m-input::placeholder,
html body.skin-light textarea::placeholder { color: var(--sk-text-mute) !important; }
html body.skin-light .m-input:focus {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 0 3px rgba(184,197,221,.18) !important;
  background: var(--sk-bg-card) !important;
}

/* CTA 버튼 — 실버 그라디언트, 다크 텍스트 */
html body.skin-light .m-btn {
  background: var(--sk-grad) !important;
  color: #0a1428 !important;
  font-weight: 700 !important;
  box-shadow: var(--sk-shadow-cta) !important;
}

html body.skin-light .m-divider { background: var(--sk-line) !important; }
html body.skin-light .m-switch { color: var(--sk-text-soft) !important; }
html body.skin-light .m-switch a { color: var(--sk-accent-soft) !important; }

/* 회원가입 모달 폼 */
html body.skin-light .reg-section-title {
  color: var(--sk-accent-soft) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .reg-label { color: var(--sk-text-soft) !important; }

/* 은행 드롭다운 */
html body.skin-light .bank-selected {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .bank-options {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .bank-search {
  background: var(--sk-bg-deep) !important;
  color: var(--sk-text) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .bank-option { color: var(--sk-text) !important; }
html body.skin-light .bank-option:hover { background: rgba(184,197,221,.08) !important; color: var(--sk-accent-soft) !important; }
html body.skin-light .bank-option.selected { background: var(--sk-accent) !important; color: #0a1428 !important; }

/* 입출금 모달 */
html body.skin-light .tw-modal-container {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .tw-banner {
  background: var(--sk-grad-glow) !important;
  color: #0a1428 !important;
}
html body.skin-light .tw-banner-title { color: #0a1428 !important; }
html body.skin-light .tw-tabs { background: var(--sk-bg-deep) !important; border-bottom: 1px solid var(--sk-line) !important; }
html body.skin-light .tw-tab { color: var(--sk-text-mute) !important; }
html body.skin-light .tw-tab.active {
  color: var(--sk-accent-soft) !important;
  border-bottom: 2px solid var(--sk-accent) !important;
}
html body.skin-light .tw-content { background: var(--sk-bg-card) !important; }
html body.skin-light .tw-section-label { color: var(--sk-accent-soft) !important; }
html body.skin-light .tw-money-info,
html body.skin-light .tw-money-item {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .tw-money-dot { background: var(--sk-accent) !important; }
html body.skin-light .tw-notice {
  background: rgba(184,197,221,.06) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
}
html body.skin-light .tw-notice .highlight { color: var(--sk-accent-soft) !important; }
html body.skin-light .tw-amount-btns button {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .tw-amount-btns button:hover {
  border-color: var(--sk-accent) !important;
  color: var(--sk-accent-soft) !important;
}
html body.skin-light .tw-amount-btns button.active,
html body.skin-light .tw-bonus-btn.active {
  background: var(--sk-grad) !important;
  color: #0a1428 !important;
  border-color: var(--sk-accent) !important;
}
html body.skin-light .tw-amount-input,
html body.skin-light .tw-text-input {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .tw-after-amount strong { color: var(--sk-accent-soft) !important; }
html body.skin-light .tw-btn-main {
  background: var(--sk-grad) !important;
  color: #0a1428 !important;
}
html body.skin-light .tw-btn-sub {
  background: transparent !important;
  color: var(--sk-accent-soft) !important;
  border: 1px solid var(--sk-accent) !important;
}
html body.skin-light .tw-history-label { color: var(--sk-text) !important; }
html body.skin-light .tw-history-table { background: var(--sk-bg-card) !important; }
html body.skin-light .tw-history-table th {
  background: var(--sk-bg-deep) !important;
  color: var(--sk-accent-soft) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .tw-history-table td {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}

/* 마이페이지 모달 — 인라인 스타일 잡기 */
html body.skin-light #modal-mypage > .modal-box > div > div[style*="border-radius:50%"] {
  background: var(--sk-grad) !important;
  border: 2px solid var(--sk-bg-card) !important;
  color: #0a1428;
}
html body.skin-light #modal-mypage .modal-box > div > div[style*="display:flex;gap:10px"] > div {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light #modal-mypage #my-balance { color: var(--sk-accent-soft) !important; }

/* 인라인 스타일 잡기 — 다크/모달에 박힌 것들 */
html body.skin-light [style*="color:#e2e8f0"],
html body.skin-light [style*="color:#cbd5e1"] { color: var(--sk-text) !important; }
html body.skin-light [style*="color:#8ba4bf"],
html body.skin-light [style*="color:#94a3b8"] { color: var(--sk-text-soft) !important; }
html body.skin-light [style*="color:#475569"],
html body.skin-light [style*="color:#64748b"] { color: var(--sk-text-mute) !important; }
html body.skin-light [style*="background:var(--bg-dark)"],
html body.skin-light [style*="background:var(--modal-bg)"],
html body.skin-light [style*="background:var(--modal-dark)"] { background: var(--sk-bg-card) !important; }
html body.skin-light [style*="background:#1a1a1a"] { background: var(--sk-bg-deep) !important; }
html body.skin-light a[style*="color:var(--primary-light)"] { color: var(--sk-accent-soft) !important; }

/* 페이지네이션 다크 */
html body.skin-light #msg-pagination button,
html body.skin-light #notice-pagination button,
html body.skin-light #cs-pagination button,
html body.skin-light #event-pagination button {
  background: var(--sk-bg-deep) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
}
html body.skin-light #msg-pagination button.active,
html body.skin-light #notice-pagination button.active,
html body.skin-light #cs-pagination button.active,
html body.skin-light #event-pagination button.active {
  background: var(--sk-accent) !important;
  border-color: var(--sk-accent) !important;
  color: #0a1428 !important;
}

/* ─── 11. 파트너 + 풋터 ─── */
html body.skin-light .partners {
  background: var(--sk-bg-deep) !important;
  border-top: 1px solid var(--sk-line) !important;
}
html body.skin-light .p-logo-img {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line);
}
html body.skin-light .p-logo-img img { filter: grayscale(1) brightness(.8) invert(.85) !important; }

html body.skin-light .sk-footer {
  background: var(--sk-bg-deep) !important;
  border-top: 1px solid var(--sk-line) !important;
}
html body.skin-light .sk-footer-logo-l1,
html body.skin-light .sk-footer-logo-l2 {
  background: var(--sk-grad-deep);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html body.skin-light .sk-footer-copy { color: var(--sk-text-mute) !important; }
html body.skin-light .sk-footer-info-box {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
}
html body.skin-light .sk-footer-info-box i { color: var(--sk-text-mute) !important; }
html body.skin-light .sk-footer-info-box:hover {
  border-color: var(--sk-accent) !important;
  color: var(--sk-accent-soft) !important;
}
html body.skin-light .sk-footer-info-box:hover i { color: var(--sk-accent-soft) !important; }

/* 잭팟 (숨겨져 있지만 혹시 노출시 톤 맞춤) */
html body.skin-light .jackpot-inner {
  background: var(--sk-bg-card) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .jackpot-number {
  background: var(--sk-grad) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v10 (DARK NAVY + SILVER)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v11 — LIGHT (WHITE) + COOL SILVER / PLATINUM
   배너의 밝은 실버/플래티넘 톤에 맞춰 라이트 베이스로 되돌리고,
   액센트만 쿨 실버-블루로 변경. v10 의 다크 토큰을 전부 덮어씌움.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. 디자인 토큰 라이트로 복원, 액센트는 쿨 실버 ─── */
body.skin-light {
  --sk-bg:           #ffffff;
  --sk-bg-soft:      #f4f7fb;
  --sk-bg-card:      #ffffff;
  --sk-bg-deep:      #eef2f8;
  --sk-line:         #e2e8f0;
  --sk-line-strong:  #cbd5e1;
  --sk-text:         #1e293b;
  --sk-text-soft:    #64748b;
  --sk-text-mute:    #94a3b8;
  --sk-accent:       #6b85b3;
  --sk-accent-soft:  #a8b8d4;
  --sk-accent-deep:  #4a6090;
  --sk-accent-fill:  rgba(107, 133, 179, 0.08);
  --sk-grad:         linear-gradient(90deg, #a8b8d4, #6b85b3 80%);
  --sk-grad-deep:    linear-gradient(135deg, #c5d0e8, #6b85b3 50%, #4a6090);
  --sk-grad-glow:    linear-gradient(135deg, #d8e0ee, #8aa0c5);
  --sk-shadow-soft:  0 1px 3px rgba(15,23,42,.08), 0 1px 2px -1px rgba(15,23,42,.06);
  --sk-shadow-card:  0 5px 16px rgba(74,96,144,.12), 0 0 0 1px rgba(74,96,144,.04);
  --sk-shadow-3d:    0 3px 0 0 #d6dadf;
  --sk-shadow-cta:   0 6px 16px rgba(107,133,179,.3);
}

/* ─── 2. 글로벌 라이트 ─── */
html body.skin-light {
  background: var(--sk-bg-soft) !important;
  color: var(--sk-text) !important;
}
html body.skin-light *::-webkit-scrollbar { background: #eef0f3 !important; }
html body.skin-light *::-webkit-scrollbar-thumb { background: var(--sk-accent) !important; border-color: #eef0f3 !important; }
html body.skin-light *::selection { background: rgba(107,133,179,.25); color: var(--sk-text); }

/* ─── 3. 헤더 라이트 ─── */
html body.skin-light .header-section {
  background: var(--sk-bg) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .header-main { background: var(--sk-bg) !important; }

/* 알약 버튼 — 실버 블루 */
html body.skin-light #hdr-auth .login-link.btn-silver {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-accent) !important;
  color: var(--sk-accent-deep) !important;
}
html body.skin-light #hdr-auth .login-link.btn-silver:hover {
  background: var(--sk-accent-fill) !important;
}
html body.skin-light #hdr-auth .join-link.btn-blue {
  background: var(--sk-grad) !important;
  border: 1px solid var(--sk-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ─── 4. LNB 라이트 ─── */
html body.skin-light .skin-lnb {
  background: var(--sk-bg) !important;
  border-right: 1px solid var(--sk-line) !important;
}
html body.skin-light .skin-lnb-logo-line1,
html body.skin-light .skin-lnb-logo-line2 {
  background: var(--sk-grad-deep) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html body.skin-light .skin-lnb-group {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: var(--sk-shadow-3d) !important;
}
html body.skin-light .skin-lnb-item {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .skin-lnb-item:hover {
  color: var(--sk-accent-deep) !important;
  background: var(--sk-accent-fill) !important;
}

/* LNB 아이콘 - 라이트 배경에 어울리는 채도로 (v10 그대로 유지하되 그림자만 보정) */
html body.skin-light .skin-lnb-icon {
  box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ─── 5. 본문 / 섹션 ─── */
html body.skin-light #home-area,
html body.skin-light #game-section-wrapper,
html body.skin-light #event-section,
html body.skin-light #notice-section,
html body.skin-light #message-section,
html body.skin-light #support-section,
html body.skin-light #sports-section,
html body.skin-light #sub-page-area { background: var(--sk-bg-soft) !important; }

/* 배너 보더는 실버 블루 */
html body.skin-light #banner-slider {
  border: 2px solid var(--sk-accent) !important;
  background: var(--sk-bg) !important;
  box-shadow: 0 0 0 1px rgba(107,133,179,.05), 0 10px 26px rgba(74,96,144,.15) !important;
}

/* ─── 6. 섹션 타이틀 ─── */
html body.skin-light .sk-tt-text { color: var(--sk-text) !important; }
html body.skin-light .sk-tt-text span {
  background: var(--sk-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
}
html body.skin-light .sk-tt-icon {
  box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25) !important;
}







/* ─── 8. 보드 라이트 ─── */
html body.skin-light .realtime-section .info-box {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: var(--sk-shadow-card) !important;
}
html body.skin-light .realtime-section .info-header { background: transparent !important; }
html body.skin-light .realtime-section .info-header-title { color: var(--sk-accent-deep) !important; }
html body.skin-light .realtime-section .info-header-title::before { color: var(--sk-text) !important; }
html body.skin-light .realtime-section .info-body,
html body.skin-light .realtime-section .info-body > *,
html body.skin-light .realtime-section .info-body a {
  color: var(--sk-text-soft) !important;
}
html body.skin-light .realtime-section .info-body > * {
  border-bottom: 1px solid var(--sk-line) !important;
}

/* ─── 9. 일반 섹션 테이블 라이트 ─── */
html body.skin-light #event-section h2,
html body.skin-light #notice-section h2,
html body.skin-light #message-section h2,
html body.skin-light #support-section h2 { color: var(--sk-text) !important; }
html body.skin-light #event-section table,
html body.skin-light #notice-section table,
html body.skin-light #message-section table,
html body.skin-light #support-section table { background: var(--sk-bg) !important; }
html body.skin-light #event-section table thead tr,
html body.skin-light #notice-section table thead tr,
html body.skin-light #message-section table thead tr,
html body.skin-light #support-section table thead tr {
  background: var(--sk-bg-deep) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light #event-section th,
html body.skin-light #notice-section th,
html body.skin-light #message-section th,
html body.skin-light #support-section th { color: var(--sk-accent-deep) !important; }
html body.skin-light #event-section td,
html body.skin-light #notice-section td,
html body.skin-light #message-section td,
html body.skin-light #support-section td {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}

/* ─── 10. 모달 라이트 ─── */
html body.skin-light .modal-overlay {
  background: rgba(15, 23, 42, .45) !important;
}
html body.skin-light .modal-box {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: 0 25px 60px rgba(15,23,42,.20), 0 0 0 1px rgba(107,133,179,.04) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .modal-title { color: var(--sk-text) !important; }
html body.skin-light .modal-title:after { background: var(--sk-grad) !important; }
html body.skin-light .modal-sub { color: var(--sk-text-mute) !important; }
html body.skin-light .modal-close { color: var(--sk-text-mute) !important; }
html body.skin-light .modal-close:hover { color: var(--sk-text) !important; }

/* 폼 인풋 */
html body.skin-light .m-input,
html body.skin-light textarea.m-input,
html body.skin-light .modal-box input[type="text"],
html body.skin-light .modal-box input[type="password"],
html body.skin-light .modal-box input[type="number"],
html body.skin-light .modal-box textarea {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .m-input::placeholder,
html body.skin-light textarea::placeholder { color: var(--sk-text-mute) !important; }
html body.skin-light .m-input:focus {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 0 3px rgba(107,133,179,.18) !important;
  background: var(--sk-bg) !important;
}

/* CTA 버튼 — 실버 블루 그라디언트 */
html body.skin-light .m-btn {
  background: var(--sk-grad) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--sk-shadow-cta) !important;
}

html body.skin-light .m-divider { background: var(--sk-line) !important; }
html body.skin-light .m-switch { color: var(--sk-text-soft) !important; }
html body.skin-light .m-switch a { color: var(--sk-accent-deep) !important; }

/* 회원가입 폼 */
html body.skin-light .reg-section-title {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .reg-section-title i { color: var(--sk-accent) !important; }
html body.skin-light .reg-label { color: var(--sk-text-soft) !important; }

/* 은행 드롭다운 */
html body.skin-light .bank-selected {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .bank-options {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: var(--sk-shadow-card) !important;
}
html body.skin-light .bank-search {
  background: var(--sk-bg-soft) !important;
  color: var(--sk-text) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .bank-option { color: var(--sk-text) !important; }
html body.skin-light .bank-option:hover { background: var(--sk-accent-fill) !important; color: var(--sk-accent-deep) !important; }
html body.skin-light .bank-option.selected { background: var(--sk-accent) !important; color: #fff !important; }
html body.skin-light .bank-opt-icon { color: var(--sk-accent) !important; }

/* 입출금 모달 라이트 */
html body.skin-light .tw-modal-container {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .tw-banner {
  background: var(--sk-grad-glow) !important;
  color: #fff !important;
}
html body.skin-light .tw-banner-title { color: #fff !important; }
html body.skin-light .tw-tabs { background: var(--sk-bg) !important; border-bottom: 1px solid var(--sk-line) !important; }
html body.skin-light .tw-tab { color: var(--sk-text-mute) !important; }
html body.skin-light .tw-tab.active {
  color: var(--sk-accent-deep) !important;
  border-bottom: 2px solid var(--sk-accent) !important;
}
html body.skin-light .tw-content { background: var(--sk-bg) !important; }
html body.skin-light .tw-section-label { color: var(--sk-text-soft) !important; }
html body.skin-light .tw-money-info,
html body.skin-light .tw-money-item {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .tw-money-dot { background: var(--sk-accent) !important; }
html body.skin-light .tw-notice {
  background: var(--sk-accent-fill) !important;
  border: 1px solid #d8e0ee !important;
  color: var(--sk-text-soft) !important;
}
html body.skin-light .tw-notice .highlight { color: var(--sk-accent-deep) !important; }
html body.skin-light .tw-amount-btns button {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
  box-shadow: var(--sk-shadow-3d) !important;
}
html body.skin-light .tw-amount-btns button:hover {
  border-color: var(--sk-accent) !important;
  color: var(--sk-accent-deep) !important;
}
html body.skin-light .tw-amount-btns button.active,
html body.skin-light .tw-bonus-btn.active {
  background: var(--sk-grad) !important;
  color: #fff !important;
  border-color: var(--sk-accent) !important;
}
html body.skin-light .tw-amount-input,
html body.skin-light .tw-text-input {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light .tw-after-amount strong { color: var(--sk-accent-deep) !important; }
html body.skin-light .tw-btn-main {
  background: var(--sk-grad) !important;
  color: #fff !important;
}
html body.skin-light .tw-btn-sub {
  background: var(--sk-bg) !important;
  color: var(--sk-accent-deep) !important;
  border: 1px solid var(--sk-accent) !important;
}
html body.skin-light .tw-history-label { color: var(--sk-text) !important; }
html body.skin-light .tw-history-table { background: var(--sk-bg) !important; }
html body.skin-light .tw-history-table th {
  background: var(--sk-bg-deep) !important;
  color: var(--sk-text-soft) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}
html body.skin-light .tw-history-table td {
  color: var(--sk-text) !important;
  border-bottom: 1px solid var(--sk-line) !important;
}

/* 마이페이지 */
html body.skin-light #modal-mypage > .modal-box > div > div[style*="border-radius:50%"] {
  background: var(--sk-grad) !important;
  border: 2px solid var(--sk-bg) !important;
  color: #fff;
}
html body.skin-light #modal-mypage .modal-box > div > div[style*="display:flex;gap:10px"] > div {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text) !important;
}
html body.skin-light #modal-mypage #my-balance { color: var(--sk-accent-deep) !important; }

/* 인라인 스타일 캐치 */
html body.skin-light [style*="color:#e2e8f0"],
html body.skin-light [style*="color:#cbd5e1"] { color: var(--sk-text) !important; }
html body.skin-light [style*="color:#8ba4bf"],
html body.skin-light [style*="color:#94a3b8"] { color: var(--sk-text-soft) !important; }
html body.skin-light [style*="color:#475569"],
html body.skin-light [style*="color:#64748b"] { color: var(--sk-text-mute) !important; }
html body.skin-light [style*="background:var(--bg-dark)"],
html body.skin-light [style*="background:var(--modal-bg)"],
html body.skin-light [style*="background:var(--modal-dark)"] { background: var(--sk-bg) !important; }
html body.skin-light [style*="background:#1a1a1a"] { background: var(--sk-bg-deep) !important; }
html body.skin-light a[style*="color:var(--primary-light)"] { color: var(--sk-accent-deep) !important; }

/* 페이지네이션 라이트 */
html body.skin-light #msg-pagination button,
html body.skin-light #notice-pagination button,
html body.skin-light #cs-pagination button,
html body.skin-light #event-pagination button {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
}
html body.skin-light #msg-pagination button.active,
html body.skin-light #notice-pagination button.active,
html body.skin-light #cs-pagination button.active,
html body.skin-light #event-pagination button.active {
  background: var(--sk-accent) !important;
  border-color: var(--sk-accent) !important;
  color: #fff !important;
}

/* ─── 11. 파트너 + 풋터 라이트 ─── */
html body.skin-light .partners {
  background: var(--sk-bg) !important;
  border-top: 1px solid var(--sk-line) !important;
}
html body.skin-light .p-logo-img {
  background: #eef0f3 !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .p-logo-img img { filter: grayscale(1) brightness(.7) !important; }

html body.skin-light .sk-footer {
  background: var(--sk-bg) !important;
  border-top: 1px solid var(--sk-line) !important;
}
html body.skin-light .sk-footer-logo-l1,
html body.skin-light .sk-footer-logo-l2 {
  background: var(--sk-grad-deep) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html body.skin-light .sk-footer-copy { color: var(--sk-text-soft) !important; }
html body.skin-light .sk-footer-info-box {
  background: var(--sk-bg-soft) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-text-soft) !important;
}
html body.skin-light .sk-footer-info-box i { color: var(--sk-text-mute) !important; }
html body.skin-light .sk-footer-info-box:hover {
  border-color: var(--sk-accent) !important;
  color: var(--sk-accent-deep) !important;
}
html body.skin-light .sk-footer-info-box:hover i { color: var(--sk-accent-deep) !important; }

/* 잭팟 톤 */
html body.skin-light .jackpot-inner {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
}
html body.skin-light .jackpot-number {
  background: var(--sk-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v11 (LIGHT + COOL SILVER / PLATINUM)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v12 — 컨텐츠 영역 가로폭을 배너(1600px)에 맞춰 정렬
   배너 1600 vs 슬롯 그리드 1280 미스매치로 좌우에 빈공간 발생.
   섹션 타이틀 / 그리드 / 빈 placeholder / 보드 / 파트너 / 풋터 모두 1600 으로 통일.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --sk-content-max: 1600px; }

/* 섹션 타이틀 */
html body.skin-light .sk-section-title { max-width: var(--sk-content-max) !important; }



/* 실시간 보드 (공지/이벤트) 컨테이너 */
html body.skin-light .realtime-section .container { max-width: var(--sk-content-max) !important; }
html body.skin-light .realtime-section .container > div { max-width: var(--sk-content-max) !important; }

/* 파트너 컨테이너 */
html body.skin-light .partners > div { max-width: var(--sk-content-max) !important; }

/* 풋터 inner */
html body.skin-light .sk-footer-inner { max-width: var(--sk-content-max) !important; }

/* 잭팟 (혹시 노출시) */
html body.skin-light .jackpot-bar { max-width: var(--sk-content-max) !important; }

/* 토글(숨김 상태지만 일관성) */
html body.skin-light .toggle-section .container { max-width: var(--sk-content-max) !important; }

html body.skin-light .visual-section { padding-top: 24px !important; padding-bottom: 8px !important; }


/* 자식들은 좌우 패딩 제거하고 max-width 로 폭 제한 + 가운데 정렬 */
html body.skin-light #banner-slider {
  max-width: var(--sk-content-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}


html body.skin-light .sk-section-title {
  max-width: var(--sk-content-max) !important;
  width: 100% !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
}
html body.skin-light .realtime-section .container,
html body.skin-light .realtime-section .container > div {
  max-width: var(--sk-content-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html body.skin-light .partners > div {
  max-width: var(--sk-content-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html body.skin-light .sk-footer-inner {
  max-width: var(--sk-content-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 모바일에서는 좌우 패딩 줄이고 동일 적용 */
@media (max-width: 1024px) {

}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v13
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v14 — 배너 반응형 (PC/모바일 동일 이미지로)
   기존엔 모바일에서 banner-mobile (옛날 그린 가든 배너) 가 표시되어
   PC/모바일이 다른 이미지로 갈렸음. 동일 이미지로 일관 적용 + 반응형.
   ═══════════════════════════════════════════════════════════════════════════ */

/* banner-mobile 은 항상 숨김 — banner-pc 만 모든 viewport 에서 사용 */
html body.skin-light .banner-mobile { display: none !important; }

/* banner-pc 는 모든 viewport 에서 보이게 */
html body.skin-light #banner-track .banner-pc {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

/* 배너 컨테이너 비율은 PC/모바일 동일 1600:430 — 화면 폭에 맞춰 비율 유지하며 자동 축소 */
html body.skin-light #banner-slider {
  aspect-ratio: 1600 / 430 !important;
  max-width: var(--sk-content-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
@media (max-width: 1024px) {
  html body.skin-light #banner-slider { aspect-ratio: 1600 / 430 !important; max-width: 100% !important; }
}
@media (max-width: 540px) {
  /* 매우 좁은 모바일에서는 너무 얇아지지 않도록 비율 살짝 조정 */
  html body.skin-light #banner-slider { aspect-ratio: 16 / 7 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v14
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v15 — 모바일 배너 빈 박스 픽스
   원인: style.css:8564 의 @media(max-width:768px) 룰이
        .banner-pc { display:none; height:0 } 로 PC 배너를 죽이고
        #banner-slider { aspect-ratio:auto; height:auto; overflow:visible } 로
        컨테이너 비율을 무너뜨림. 그래서 모바일에서 배너 영역이 빈 박스로 보임.
   해결: ≤768 미디어쿼리 안에서 더 높은 specificity 로 그 룰들을 정확히 뒤집음.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 컨테이너 — 비율/높이/오버플로우 복원 */
  html body.skin-light #banner-slider {
    aspect-ratio: 16 / 7 !important;   /* 모바일에선 살짝 두껍게 */
    height: auto !important;
    overflow: hidden !important;
    background: var(--sk-bg) !important;
  }
  html body.skin-light .visual-section {
    padding: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  html body.skin-light #banner-track {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: block !important;
  }
  /* PC 배너 이미지 — 모바일에서도 절대 다시 보이도록 */
  html body.skin-light #banner-track .banner-pc {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  html body.skin-light #banner-track .banner-mobile {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
}

/* 폴백: <img> 가 어떤 이유로든 안 뜰 경우, #banner-slider 자체에 background-image 로도 백업 */
html body.skin-light #banner-slider {
  background-image: url('/user6/images/0428%20(1).png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v15
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v16 — 모바일 배너 잘림 픽스 (이미지 비율과 컨테이너 비율 맞춤)
   원인: v15 에서 모바일 컨테이너 비율을 16/7 (2.29:1) 로 만들었는데
        실제 이미지는 1600/430 (3.72:1) 이라, object-fit:cover 가 양옆을
        크게 크롭해서 텍스트 부분이 잘림.
   해결: 모든 viewport 에서 컨테이너 비율을 이미지 비율과 동일하게.
   ═══════════════════════════════════════════════════════════════════════════ */

html body.skin-light #banner-slider {
  aspect-ratio: 1600 / 430 !important;
  background-size: 100% 100% !important;   /* 이미지 늘려서 컨테이너에 정확히 맞춤 (비율 동일하니 왜곡 없음) */
  background-position: center center !important;
}
@media (max-width: 1024px) {
  html body.skin-light #banner-slider {
    aspect-ratio: 1600 / 430 !important;
    max-width: 100% !important;
  }
}
@media (max-width: 768px) {
  html body.skin-light #banner-slider {
    aspect-ratio: 1600 / 430 !important;
  }
}
@media (max-width: 540px) {
  html body.skin-light #banner-slider {
    aspect-ratio: 1600 / 430 !important;  /* 좁은 화면에서도 이미지 비율 그대로 — 단, 좀 얇아 보일 수 있음 */
  }
}

/* <img>도 100% 늘려서 정확히 맞추기 (비율 동일하니 왜곡 없음) */
html body.skin-light #banner-track .banner-pc {
  object-fit: fill !important;   /* cover 대신 fill — 비율이 같으므로 왜곡 없이 정확히 맞춤 */
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v16
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v17 — 모바일 레이아웃 (레퍼런스 sample-casino 모바일 매칭)
   상단바: 햄버거 + 중앙 GARDEN CASINO 로고
   액션바: 로그인/회원가입 + 입금/출금/마일리지 아이콘
   하단바: 공지/이벤트/홈(중앙 raised)/고센/마이페이지 5탭
   햄버거 클릭 시 LNB 슬라이드인 + backdrop
   ═══════════════════════════════════════════════════════════════════════════ */

/* 데스크톱(≥1025) — 모바일 전용 요소 모두 숨김 */
@media (min-width: 1025px) {
  html body.skin-light .sk-mtop,
  html body.skin-light .sk-mactionbar,
  html body.skin-light .sk-mtabbar,
  html body.skin-light .sk-menu-backdrop { display: none !important; }
}

/* 모바일(≤1024) — 데스크톱 LNB·헤더 숨기고 모바일 마크업 노출 */
@media (max-width: 1024px) {
  /* 데스크톱 헤더 (#hdr-auth) 숨김 — 모바일은 별도 상단바 사용 */
  html body.skin-light .header-section,
  html body.skin-light #hdr-auth.bal-container { display: none !important; }
  html body.skin-light { padding-top: 0 !important; }

  /* ── 1) 모바일 상단바 ── */
  html body.skin-light .sk-mtop {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    align-items: center;
    padding: 0 12px;
    background: var(--sk-bg);
    border-bottom: 1px solid var(--sk-line);
    z-index: 80;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  html body.skin-light .sk-mtop-menu {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--sk-text);
    font-size: 22px;
    border-radius: 8px;
  }
  html body.skin-light .sk-mtop-menu:hover { background: var(--sk-accent-fill); }
  html body.skin-light .sk-mtop-logo {
    flex: 1;
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px;
    text-decoration: none;
    padding-left: 8px;
  }
  html body.skin-light .sk-mtop-l1,
  html body.skin-light .sk-mtop-l2 {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 4px;
    background: var(--sk-grad-deep);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1;
  }
  html body.skin-light .sk-mtop-l2 { font-size: 16px; padding-top: 2px; }
  html body.skin-light .sk-mtop-spacer { width: 40px; }

  /* 본문에 상단바 높이만큼 패딩 */
  html body.skin-light #home-area,
  html body.skin-light #event-section,
  html body.skin-light #notice-section,
  html body.skin-light #message-section,
  html body.skin-light #support-section,
  html body.skin-light #sports-section { padding-top: 64px !important; padding-bottom: 80px !important; }

  /* ── 2) LNB 슬라이드 메뉴 ── */
  html body.skin-light .skin-lnb {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 102;
    background: var(--sk-bg) !important;
    border-right: 1px solid var(--sk-line) !important;
    overflow-y: auto;
  }
  html body.skin-light.sk-menu-open .skin-lnb { transform: translateX(0); }
  html body.skin-light .sk-menu-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 101;
    backdrop-filter: blur(2px);
  }
  html body.skin-light.sk-menu-open .sk-menu-backdrop { display: block; }
  html body.skin-light.sk-menu-open { overflow: hidden; }

  /* 모바일에서는 body 좌측 패딩 제거 */
  html body.skin-light { padding-left: 0 !important; }

  /* ── 3) 모바일 액션바 (배너 아래) ── */
  html body.skin-light .sk-mactionbar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--sk-bg);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-radius-card);
    margin: 12px;
    box-shadow: 0 4px 12px rgba(74,96,144,.10);
  }
  html body.skin-light .sk-mab-left { display: flex; gap: 6px; flex-shrink: 0; }
  html body.skin-light .sk-mab-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--sk-accent);
    transition: all .15s;
  }
  html body.skin-light .sk-mab-login {
    background: var(--sk-accent);
    color: #fff;
  }
  html body.skin-light .sk-mab-join {
    background: transparent;
    color: var(--sk-accent-deep);
  }
  html body.skin-light .sk-mab-divider {
    width: 1px; height: 36px;
    background: var(--sk-line);
    margin: 0 4px;
    flex-shrink: 0;
  }
  html body.skin-light .sk-mab-right {
    display: flex;
    flex: 1;
    justify-content: space-around;
    gap: 4px;
  }
  html body.skin-light .sk-mab-icon {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
    text-decoration: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
  }
  html body.skin-light .sk-mab-icon:hover { background: var(--sk-accent-fill); }
  html body.skin-light .sk-mab-ico-wrap {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sk-grad);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(74,96,144,.20);
  }
  html body.skin-light .sk-mab-ico-label {
    font-size: 10px;
    color: var(--sk-text-mute);
    font-weight: 500;
  }

  /* ── 4) 하단 5탭 네비게이션 ── */
  html body.skin-light .sk-mtabbar {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--sk-bg);
    border-top: 1px solid var(--sk-line);
    box-shadow: 0 -4px 12px rgba(74,96,144,.10);
    z-index: 80;
    padding-top: 0;
  }
  html body.skin-light .sk-mtab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--sk-text-mute);
    font-size: 11px; font-weight: 500;
    cursor: pointer;
    background: var(--sk-bg);
    transition: color .15s;
  }
  html body.skin-light .sk-mtab i { font-size: 18px; }
  html body.skin-light .sk-mtab:hover,
  html body.skin-light .sk-mtab.active {
    color: var(--sk-accent-deep);
  }
  /* 중앙 홈 버튼 — 살짝 위로 떠있는 원형 */
  html body.skin-light .sk-mtab-home {
    position: relative;
  }
  html body.skin-light .sk-mtab-home-circle {
    position: absolute;
    top: -18px;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sk-bg);
    border: 1px solid var(--sk-line);
    box-shadow: 0 -4px 10px rgba(74,96,144,.15);
    color: var(--sk-accent-deep);
    font-size: 22px;
  }
  html body.skin-light .sk-mtab-home > span:not(.sk-mtab-home-circle) {
    margin-top: 28px;
    color: var(--sk-accent-deep);
  }

  /* 풋터/파트너는 모바일 본문에 그대로 노출, 단 하단탭 가리지 않게 padding-bottom 유지 */
  html body.skin-light .sk-footer,
  html body.skin-light .partners { padding-bottom: 80px !important; }



  /* 검색/타이틀 모바일 사이즈 미세조정 */
  html body.skin-light .sk-section-title { padding: 0 !important; gap: 8px; margin-bottom: 12px !important; }
  html body.skin-light .sk-tt-icon { width: 28px; height: 28px; font-size: 13px; }
  html body.skin-light .sk-tt-text { font-size: 16px; }
}

/* 매우 좁은 모바일 (≤480) — 액션바 더 컴팩트 */
@media (max-width: 480px) {
  html body.skin-light .sk-mactionbar { padding: 10px; gap: 6px; }
  html body.skin-light .sk-mab-btn { padding: 0 10px; font-size: 11px; height: 30px; }
  html body.skin-light .sk-mab-divider { display: none; }
  html body.skin-light .sk-mab-ico-wrap { width: 28px; height: 28px; font-size: 12px; }
  html body.skin-light .sk-mab-ico-label { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v17 (MOBILE LAYOUT)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v18 — LNB 슬라이드 메뉴 가로배치 버그 픽스
   v17 에서 .skin-lnb 에 flex-direction:column 명시 안 해서 기본 row 적용 →
   로고/메뉴그룹이 가로로 늘어서서 메뉴 텍스트 잘림.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  html body.skin-light .skin-lnb {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 22px 18px !important;
    width: 280px !important;
  }
  html body.skin-light .skin-lnb-logo {
    flex: 0 0 auto !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 4px 18px !important;
    border-bottom: 1px solid var(--sk-line) !important;
    margin-bottom: 4px !important;
  }
  html body.skin-light .skin-lnb-logo-line1,
  html body.skin-light .skin-lnb-logo-line2 {
    font-size: 26px !important;
    letter-spacing: 4px !important;
  }
  html body.skin-light .skin-lnb-group {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 8px !important;
  }
  html body.skin-light .skin-lnb-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 44px !important;
    gap: 10px !important;
    padding: 0 8px !important;
  }
  html body.skin-light .skin-lnb-label {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body.skin-light .skin-lnb-icon {
    flex: 0 0 auto !important;
    width: 28px !important; height: 28px !important;
  }

  /* 메뉴 열린 상태에서 하단 탭바 가림 (배경 전체가 어두워지므로 시각적 일관성) */
  html body.skin-light.sk-menu-open .sk-mtabbar { z-index: 70 !important; opacity: .3; pointer-events: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v18
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v19 — HELEN CASINO 로고 이미지 적용
   텍스트 워드마크(GARDEN/CASINO) 를 GJoovYmF.png (왕관+HELEN CASINO 세리프) 로 교체
   3곳: LNB / 모바일 상단바 / 풋터
   ═══════════════════════════════════════════════════════════════════════════ */

/* 공통 — 텍스트 워드마크 스타일 무력화 (이미지로 대체했으므로) */
html body.skin-light .skin-lnb-logo-line1,
html body.skin-light .skin-lnb-logo-line2,
html body.skin-light .sk-mtop-l1,
html body.skin-light .sk-mtop-l2,
html body.skin-light .sk-footer-logo-l1,
html body.skin-light .sk-footer-logo-l2 { display: none !important; }

/* ── 1) LNB 로고 (PC 좌측 사이드바) ── */
html body.skin-light .skin-lnb-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px 16px !important;
  border-bottom: 1px solid var(--sk-line) !important;
  width: 100% !important;
}
html body.skin-light .skin-lnb-logo-img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(74,96,144,.15));
  transition: transform .2s ease, filter .2s ease;
}
html body.skin-light .skin-lnb-logo:hover .skin-lnb-logo-img {
  transform: scale(1.03);
  filter: drop-shadow(0 2px 6px rgba(107,133,179,.30));
}

/* ── 2) 모바일 상단바 로고 ── */
html body.skin-light .sk-mtop-logo {
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
}
html body.skin-light .sk-mtop-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ── 3) 풋터 로고 ── */
html body.skin-light .sk-footer-logo { display: flex !important; align-items: center; }
html body.skin-light .sk-footer-logo-img {
  display: block;
  width: 220px;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 2px 6px rgba(74,96,144,.15));
}

/* 모바일에서 LNB 로고 살짝 작게 */
@media (max-width: 1024px) {
  html body.skin-light .skin-lnb-logo-img { width: 200px; }
  html body.skin-light .sk-mtop-logo-img { height: 44px; }
  html body.skin-light .sk-footer-logo-img { width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v19
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v21 — LNB 로고 주변 여백 축소 + 로고 살짝 더 키움
   ═══════════════════════════════════════════════════════════════════════════ */

/* PC LNB */
@media (min-width: 1025px) {
  html body.skin-light .skin-lnb {
    padding: 10px 12px 18px !important;
    gap: 10px !important;
  }
}

/* 모바일 슬라이드 LNB */
@media (max-width: 1024px) {
  html body.skin-light .skin-lnb {
    padding: 10px 12px 18px !important;
    gap: 10px !important;
  }
}

/* 로고 자체 — 패딩 최소화, 보더 제거 */
html body.skin-light .skin-lnb-logo {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body.skin-light .skin-lnb-logo-img {
  width: 100% !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
}

@media (max-width: 1024px) {
  html body.skin-light .skin-lnb-logo-img { max-width: 230px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v21
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v22 — 로고 PNG 내부 투명 여백 크롭
   원인: GJoovYmF.png 자체에 상하 ~22% 투명 여백 → CSS clip-path 로 잘라냄.
   기법: <img> 를 clip-path 로 시각적 자르기 + 음의 마진으로 레이아웃 보정.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 공통 — 로고 이미지 시각적 크롭 */
html body.skin-light .skin-lnb-logo-img,
html body.skin-light .sk-mtop-logo-img,
html body.skin-light .sk-footer-logo-img {
  clip-path: inset(20% 0 20% 0);
  /* 음의 마진으로 잘려나간 영역만큼 박스 크기 축소 */
}
html body.skin-light .skin-lnb-logo-img {
  margin-top: -10% !important;
  margin-bottom: -10% !important;
}
html body.skin-light .sk-footer-logo-img {
  margin-top: -10% !important;
  margin-bottom: -10% !important;
}
html body.skin-light .sk-mtop-logo-img {
  /* 모바일 상단바는 height 고정이라 별도 처리 */
  clip-path: inset(20% 0 20% 0);
  height: 70px !important;  /* 살짝 키워서 실 내용은 44px 정도 차지 */
  width: auto !important;
  margin: -8px 0 !important;
}

/* LNB 로고 컨테이너 — 음의 마진 흡수 */
html body.skin-light .skin-lnb-logo {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.skin-light .sk-footer-logo {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* LNB 패딩 추가 압축 */
@media (min-width: 1025px) {
  html body.skin-light .skin-lnb { padding: 6px 12px 18px !important; gap: 6px !important; }
}
@media (max-width: 1024px) {
  html body.skin-light .skin-lnb { padding: 6px 12px 18px !important; gap: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v22
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v23 — 고급 이펙트 / 마이크로 인터랙션 레이어
   - 페이지 로드 페이드인
   - 배경에 미묘한 메쉬 그라디언트 + 노이즈
   - 로고 펄스 글로우
   - 카드 호버 (lift + shadow + border shimmer)
   - 버튼 shine sweep
   - 섹션 타이틀 underline reveal
   - LNB 아이템 좌측 슬라이드 인디케이터
   - 보드 박스 hover lift
   - 알약 버튼 호버 글로우
   - 하단 탭 active indicator
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 0. 키프레임 ─── */
@keyframes sk-fade-in       { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sk-pulse-glow    { 0%,100% { filter: drop-shadow(0 1px 3px rgba(107,133,179,.15)); } 50% { filter: drop-shadow(0 2px 8px rgba(168,184,212,.55)); } }
@keyframes sk-shine-sweep   { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
@keyframes sk-shimmer       { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes sk-spin-slow     { to { transform: rotate(360deg); } }
@keyframes sk-bg-drift      { 0%,100% { background-position: 0% 0%, 100% 100%, 50% 50%; } 50% { background-position: 100% 100%, 0% 0%, 50% 50%; } }
@keyframes sk-underline-in  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sk-float         { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ─── 1. 페이지 진입 페이드인 ─── */
html body.skin-light #home-area,
html body.skin-light #event-section,
html body.skin-light #notice-section,
html body.skin-light #message-section,
html body.skin-light #support-section,
html body.skin-light #sports-section { animation: sk-fade-in .55s ease-out both; }

/* ─── 2. 페이지 배경 — 미묘한 메쉬 그라디언트 ─── */
html body.skin-light {
  background-color: var(--sk-bg-soft) !important;
  background-image:
    radial-gradient(1200px 500px at 10% -10%, rgba(168,184,212,.18), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(213,222,238,.22), transparent 65%),
    radial-gradient(1000px 600px at 50% 110%, rgba(168,184,212,.12), transparent 70%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  background-attachment: fixed !important;
  animation: sk-bg-drift 30s ease-in-out infinite;
}

/* ─── 3. 로고 — 미묘한 펄스 글로우 ─── */
html body.skin-light .skin-lnb-logo-img,
html body.skin-light .sk-footer-logo-img {
  animation: sk-pulse-glow 4s ease-in-out infinite;
}
html body.skin-light .skin-lnb-logo:hover .skin-lnb-logo-img {
  animation: none;
  filter: drop-shadow(0 4px 12px rgba(107,133,179,.4)) !important;
}





/* ─── 5. 알약 버튼 (로그인/회원가입) — 호버 글로우 + shine ─── */
html body.skin-light #hdr-auth .login-link.btn-silver,
html body.skin-light #hdr-auth .join-link.btn-blue,
html body.skin-light .sk-mab-btn {
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
html body.skin-light #hdr-auth .login-link.btn-silver::before,
html body.skin-light #hdr-auth .join-link.btn-blue::before,
html body.skin-light .sk-mab-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events: none;
}
html body.skin-light #hdr-auth .join-link.btn-blue:hover {
  box-shadow: 0 6px 18px rgba(107,133,179,.45);
  filter: brightness(1.05);
}
html body.skin-light #hdr-auth .login-link.btn-silver:hover {
  box-shadow: 0 4px 14px rgba(107,133,179,.25);
}
html body.skin-light #hdr-auth .login-link.btn-silver:hover::before,
html body.skin-light #hdr-auth .join-link.btn-blue:hover::before,
html body.skin-light .sk-mab-btn:hover::before {
  transform: translateX(100%);
}

/* ─── 6. m-btn (모달 CTA) — shine sweep on hover ─── */
html body.skin-light .m-btn,
html body.skin-light .tw-btn-main {
  position: relative; overflow: hidden;
}
html body.skin-light .m-btn::before,
html body.skin-light .tw-btn-main::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
html body.skin-light .m-btn:hover::before,
html body.skin-light .tw-btn-main:hover::before { transform: translateX(120%); }

/* ─── 7. 섹션 타이틀 — 좌측 컬러 라인 reveal ─── */
html body.skin-light .sk-section-title { position: relative; }
html body.skin-light .sk-section-title::before {
  content: "";
  position: absolute; left: 0; bottom: -8px;
  width: 60px; height: 2px;
  background: var(--sk-grad);
  border-radius: 2px;
  transform-origin: left center;
  animation: sk-underline-in .7s cubic-bezier(.2,.8,.3,1) .15s both;
}

/* ─── 8. LNB 아이템 — 좌측 슬라이드 인디케이터 ─── */
html body.skin-light .skin-lnb-item { position: relative; }
html body.skin-light .skin-lnb-item::before {
  content: "";
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--sk-grad);
  border-radius: 2px;
  transition: height .25s cubic-bezier(.2,.8,.3,1);
}
html body.skin-light .skin-lnb-item:hover::before { height: 22px; }
html body.skin-light .skin-lnb-item:hover .skin-lnb-icon {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(74,96,144,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html body.skin-light .skin-lnb-icon { transition: transform .18s ease, box-shadow .18s ease; }

/* ─── 9. 보드 박스 (공지/이벤트) hover lift ─── */
html body.skin-light .realtime-section .info-box {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
html body.skin-light .realtime-section .info-box:hover {
  transform: translateY(-2px);
  border-color: var(--sk-accent) !important;
  box-shadow: 0 10px 24px rgba(74,96,144,.15), 0 0 0 1px rgba(168,184,212,.25) !important;
}

/* ─── 10. 풋터 contact 박스 — float on hover ─── */
html body.skin-light .sk-footer-info-box { transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .25s ease, color .25s ease !important; }
html body.skin-light .sk-footer-info-box:hover {
  transform: translateY(-3px) scale(1.02);
}

/* ─── 11. 하단 탭바 (모바일) — active indicator + tap feedback ─── */
@media (max-width: 1024px) {
  html body.skin-light .sk-mtab { position: relative; transition: color .2s ease; }
  html body.skin-light .sk-mtab::before {
    content: "";
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 3px;
    background: var(--sk-grad);
    border-radius: 0 0 2px 2px;
    transition: width .25s ease;
  }
  html body.skin-light .sk-mtab:active::before,
  html body.skin-light .sk-mtab.active::before { width: 36px; }
  html body.skin-light .sk-mtab:active { transform: scale(.95); }
  html body.skin-light .sk-mtab i { transition: transform .15s ease; }
  html body.skin-light .sk-mtab:active i { transform: scale(1.15); }

  /* 홈 버튼 살짝 떠다니는 효과 */
  html body.skin-light .sk-mtab-home-circle {
    animation: sk-float 3.5s ease-in-out infinite;
    transition: box-shadow .3s ease;
  }
  html body.skin-light .sk-mtab-home:hover .sk-mtab-home-circle {
    box-shadow: 0 -4px 14px rgba(74,96,144,.30), 0 0 16px rgba(168,184,212,.4);
  }
}

/* ─── 12. 액션 바 아이콘 (모바일) — 호버 회전 + 글로우 ─── */
html body.skin-light .sk-mab-ico-wrap {
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
html body.skin-light .sk-mab-icon:hover .sk-mab-ico-wrap {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 4px 14px rgba(107,133,179,.40), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ─── 13. 배너 — 미묘한 글로우 외곽 ─── */
html body.skin-light #banner-slider {
  position: relative;
}
html body.skin-light #banner-slider::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(168,184,212,.4), transparent);
  background-size: 200% 100%;
  animation: sk-shimmer 6s linear infinite;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
}

/* ─── 14. 모달 진입 — 부드러운 스케일 ─── */
html body.skin-light .modal-overlay.active .modal-box {
  animation: sk-fade-in .3s cubic-bezier(.2,.8,.3,1) both;
}

/* ─── 15. 입력 필드 포커스 — 부드러운 강조 ─── */
html body.skin-light .m-input,
html body.skin-light .tw-amount-input,
html body.skin-light .tw-text-input {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease !important;
}

/* ─── 16. 스크롤바 더 우아하게 ─── */
html body.skin-light *::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
html body.skin-light *::-webkit-scrollbar-track { background: transparent !important; }
html body.skin-light *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sk-accent-soft), var(--sk-accent)) !important;
  border-radius: 4px !important;
  border: none !important;
}
html body.skin-light *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--sk-accent), var(--sk-accent-deep)) !important;
}

/* ─── 17. 파트너 로고 — hover scale ─── */
html body.skin-light .p-logo-img {
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease !important;
}
html body.skin-light .p-logo-img:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--sk-accent) !important;
}

/* ─── 18. 페이지네이션 hover scale ─── */
html body.skin-light #msg-pagination button,
html body.skin-light #notice-pagination button,
html body.skin-light #cs-pagination button { transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease !important; }
html body.skin-light #msg-pagination button:hover,
html body.skin-light #notice-pagination button:hover,
html body.skin-light #cs-pagination button:hover { transform: translateY(-1px); border-color: var(--sk-accent) !important; }

/* ─── 19. 모바일 햄버거 버튼 — 회전 효과 ─── */
html body.skin-light .sk-mtop-menu i { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
html body.skin-light.sk-menu-open .sk-mtop-menu i { transform: rotate(90deg); color: var(--sk-accent-deep); }

/* ─── 20. 모달 인풋 placeholder fade-in ─── */
html body.skin-light .m-input::placeholder { transition: opacity .2s ease, color .2s ease; }
html body.skin-light .m-input:focus::placeholder { opacity: .5; }


/* ─── 22. accessibility — 모션 줄이기 옵션 존중 ─── */
@media (prefers-reduced-motion: reduce) {
  html body.skin-light *,
  html body.skin-light *::before,
  html body.skin-light *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v23 (PREMIUM EFFECTS)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v24 — 즉시 보이는 강한 비주얼 디테일
   v23 이 너무 미묘 → 정적 상태에서도 바로 보이는 강한 디테일 추가
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sk-rotate-slow { to { transform: rotate(360deg); } }
@keyframes sk-shine-loop {
  0% { background-position: -200% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes sk-twinkle {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes sk-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── 1. 페이지 배경 — 더 강한 메쉬 + 미묘한 격자 패턴 ─── */
html body.skin-light {
  background-color: #f0f4fa !important;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(168, 184, 212, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 85% 18%, rgba(213, 222, 238, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(168, 184, 212, 0.25) 0%, transparent 50%),
    linear-gradient(135deg, #f4f7fb 0%, #eaf0f7 100%) !important;
  background-attachment: fixed !important;
}

/* ─── 2. 배너 — 두꺼운 그라데이션 보더 + 외곽 글로우 (정적으로 보임) ─── */
html body.skin-light #banner-slider {
  border: none !important;
  position: relative;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px rgba(168, 184, 212, 0.5),
    0 0 0 6px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(107, 133, 179, 0.25),
    0 18px 48px rgba(74, 96, 144, 0.20) !important;
}
html body.skin-light #banner-slider::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg,
    #d4dce8 0%,
    #a8b8d4 25%,
    #ffffff 50%,
    #a8b8d4 75%,
    #6b85b3 100%);
  background-size: 200% 100%;
  animation: sk-border-flow 4s ease-in-out infinite;
}



/* ─── 4. 로고 — 항상 켜진 글로우 (정적) ─── */
html body.skin-light .skin-lnb-logo-img,
html body.skin-light .sk-footer-logo-img {
  filter:
    drop-shadow(0 2px 6px rgba(107, 133, 179, 0.35))
    drop-shadow(0 0 14px rgba(168, 184, 212, 0.30)) !important;
  animation: none !important;
}

/* ─── 5. 알약 버튼 — 회원가입 그라디언트 강화 + 항상 보이는 shine ─── */
html body.skin-light #hdr-auth .join-link.btn-blue,
html body.skin-light .sk-mab-join {
  background: linear-gradient(135deg, #c5d3ed 0%, #6b85b3 50%, #4a6090 100%) !important;
  background-size: 200% 200% !important;
  box-shadow:
    0 4px 12px rgba(107, 133, 179, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
  animation: sk-border-flow 5s ease-in-out infinite !important;
  position: relative;
  overflow: hidden;
}

/* ─── 6. m-btn (CTA) — 항상 흐르는 shine 효과 ─── */
html body.skin-light .m-btn,
html body.skin-light .tw-btn-main {
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%),
    linear-gradient(135deg, #c5d3ed 0%, #6b85b3 50%, #4a6090 100%) !important;
  background-size: 200% 100%, 100% 100% !important;
  background-position: -100% 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat !important;
  animation: sk-shine-loop 3.5s ease-in-out infinite !important;
  box-shadow:
    0 6px 18px rgba(107,133,179,.40),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* ─── 7. 섹션 타이틀 — 좌측 큰 컬러 라인 (항상 보임) ─── */
html body.skin-light .sk-section-title {
  position: relative;
  padding-left: 16px !important;
}
html body.skin-light .sk-section-title::after {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  background: linear-gradient(180deg, #d4dce8, #6b85b3);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(107,133,179,.4);
}
html body.skin-light .sk-section-title::before {
  content: "" !important;
  display: none !important;
}
html body.skin-light .sk-tt-icon {
  box-shadow:
    0 4px 12px rgba(74,96,144,0.30),
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 16px rgba(168,184,212,0.35) !important;
}

/* ─── 8. LNB 그룹 — 두툼한 입체감 ─── */
html body.skin-light .skin-lnb-group {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 0 0 #d8dde6,
    0 8px 16px rgba(74,96,144,.10) !important;
}
html body.skin-light .skin-lnb-icon {
  box-shadow:
    0 3px 6px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1px rgba(255,255,255,.2) !important;
}

/* ─── 9. 보드 (공지/이벤트) — 두툼한 카드 + 컬러 좌측 라인 ─── */
html body.skin-light .realtime-section .info-box {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 0 0 #e0e6ee,
    0 12px 28px rgba(74,96,144,.08) !important;
  overflow: hidden;
}
html body.skin-light .realtime-section .info-box::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--sk-grad-deep);
}

/* ─── 10. 푼터 contact 박스 — 그라디언트 호버 ─── */
html body.skin-light .sk-footer-info-box {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 3px 0 0 #e0e6ee,
    0 6px 14px rgba(74,96,144,.08) !important;
}

/* ─── 11. 액션 바 (모바일) — 두툼한 카드 ─── */
html body.skin-light .sk-mactionbar {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 0 0 #e0e6ee,
    0 8px 18px rgba(74,96,144,.10) !important;
}
html body.skin-light .sk-mab-ico-wrap {
  box-shadow:
    0 4px 10px rgba(74,96,144,0.30),
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 12px rgba(168,184,212,0.30) !important;
}

/* ─── 12. 하단 탭바 (모바일) — 큰 그림자 + 라이트 효과 ─── */
@media (max-width: 1024px) {
  html body.skin-light .sk-mtabbar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow:
      0 -1px 0 rgba(255,255,255,1) inset,
      0 -8px 20px rgba(74,96,144,.10) !important;
  }
  html body.skin-light .sk-mtab-home-circle {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
    box-shadow:
      0 -2px 0 rgba(255,255,255,1) inset,
      0 -6px 14px rgba(74,96,144,.18),
      0 0 16px rgba(168,184,212,.4),
      0 0 0 1px rgba(168,184,212,.3) !important;
  }
}

/* ─── 13. 모바일 상단바 — 입체감 ─── */
@media (max-width: 1024px) {
  html body.skin-light .sk-mtop {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,1) inset,
      0 4px 14px rgba(74,96,144,.10) !important;
  }
}

/* ─── 14. LNB 사이드바 — 우측 그라디언트 보더 강조 ─── */
html body.skin-light .skin-lnb {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-right: none !important;
  box-shadow:
    inset -1px 0 0 #e2e8f0,
    4px 0 14px rgba(74,96,144,.06) !important;
}

/* ─── 15. 헤더 — 미묘한 하단 그라디언트 라인 ─── */
html body.skin-light .header-section {
  background: linear-gradient(180deg, #ffffff 0%, #fdfdff 100%) !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(168,184,212,.4),
    0 4px 12px rgba(74,96,144,.08) !important;
}

/* ─── 16. 입력 필드 — 그라디언트 인풋 ─── */
html body.skin-light .m-input,
html body.skin-light .tw-amount-input,
html body.skin-light .tw-text-input,
html body.skin-light .modal-box input[type="text"],
html body.skin-light .modal-box input[type="password"],
html body.skin-light .modal-box input[type="number"] {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.03),
    0 1px 0 rgba(255,255,255,1) !important;
}
html body.skin-light .m-input:focus,
html body.skin-light .tw-amount-input:focus,
html body.skin-light .tw-text-input:focus {
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.03),
    0 0 0 4px rgba(107,133,179,.18),
    0 4px 12px rgba(107,133,179,.20) !important;
}

/* ─── 17. 모달 박스 — 두꺼운 입체감 ─── */
html body.skin-light .modal-box,
html body.skin-light .tw-modal-container {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 30px 70px rgba(15,23,42,0.30),
    0 0 0 1px rgba(168,184,212,0.20),
    0 0 80px rgba(168,184,212,0.25) !important;
}

/* ─── 18. 페이지 진입 애니메이션 더 명확히 ─── */
@keyframes sk-fade-in-clear {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
html body.skin-light #home-area,
html body.skin-light #event-section,
html body.skin-light #notice-section,
html body.skin-light #message-section,
html body.skin-light #support-section,
html body.skin-light #sports-section { animation: sk-fade-in-clear .8s cubic-bezier(.2,.8,.3,1) both !important; }

/* 배너는 좀 더 빠르게 */
html body.skin-light #banner-slider { animation: sk-fade-in-clear .6s cubic-bezier(.2,.8,.3,1) .05s both !important; }

/* 카드는 stagger 처럼 살짝 늦게 */
html body.skin-light .sk-section-title { animation: sk-fade-in-clear .6s cubic-bezier(.2,.8,.3,1) .15s both !important; }

html body.skin-light .realtime-section { animation: sk-fade-in-clear .8s cubic-bezier(.2,.8,.3,1) .35s both !important; }

/* ─── 19. accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  html body.skin-light *,
  html body.skin-light *::before,
  html body.skin-light *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v24 (VISIBLE PREMIUM EFFECTS)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SKIN LIGHT v25 — 모바일 가로 정렬 통일 (배너/액션바/카드 같은 폭으로)
   원인: visual-section padding 12px + sk-mactionbar margin 12px 이중 적용 →
        배너와 액션바·하위 섹션의 좌우 위치가 어긋남.
        모든 모바일 섹션에 동일하게 좌우 10px padding, 자식은 패딩 0
        + sk-mactionbar 의 margin 도 0 으로 통일.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {


  /* 모바일 액션바 — margin 제거하고 visual-section 의 padding 안에서 정렬 */
  html body.skin-light .sk-mactionbar {
    margin: 12px 10px !important;
    width: auto !important;
  }


  /* sk-mactionbar 안의 콘텐츠는 카드 내 패딩 그대로 */
  html body.skin-light .sk-mactionbar { padding: 12px !important; }
}

/* 매우 좁은 화면(≤480) — 더 타이트하게 */
@media (max-width: 480px) {

  html body.skin-light .sk-mactionbar { margin: 10px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END skin light v25
   ═══════════════════════════════════════════════════════════════════════════ */

/* ★ 동적 모달 (openMyInquiryDetail 등) 라이트 테마 인라인 background override */
body.skin-light [style*="background:#111827"] { background: var(--sk-bg) !important; border-color: var(--sk-line) !important; }
body.skin-light [style*="background:#0f172a"] { background: var(--sk-bg-soft) !important; border-color: var(--sk-line) !important; }
body.skin-light [style*="background:rgba(59,130,246,0.08)"] { background: rgba(59,130,246,0.10) !important; border-color: rgba(59,130,246,0.3) !important; }
/* 답변 박스 내부 텍스트 가독성 — 옅은 파랑 배경에 잘 보이는 어두운 색 */
body.skin-light div[style*="background:rgba(59,130,246,0.08)"] [style*="color:#e2e8f0"] { color: var(--sk-text) !important; }
body.skin-light div[style*="background:rgba(59,130,246,0.08)"] [style*="color:#60a5fa"] { color: #2563eb !important; }
.nc-detail .ql-size-huge { font-size: 2em; }

/* ★ 2026-05-11 slot-game-grid-6col-scale: 컬럼 6개 고정 + 카드 비례 확대 + 모바일 2컬럼 */
#slot-game-grid {
  display: grid !important;
  gap: clamp(8px, 0.6vw, 16px) !important;
  grid-template-columns: repeat(6, 1fr) !important;
}
#slot-game-grid img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5/4 !important;
  object-fit: contain !important;
}
#slot-game-grid > div > div:last-child {
  font-size: clamp(0.75rem, 0.75vw, 1.2rem) !important;
  padding: clamp(4px, 0.4vw, 12px) clamp(5px, 0.5vw, 14px) !important;
}
@media (max-width: 600px) { #slot-game-grid { grid-template-columns: repeat(2, 1fr) !important; } }