/*
  style.css (light-only)
*/

/* ✅ 헤더 그라데이션: 샘플처럼 밝은 톤으로 */
.bg-\[linear-gradient\(180deg\,rgba\(20\,26\,32\,\.92\)_0\%\,rgba\(10\,14\,18\,\.92\)_100\%\)\] {
  background-image: linear-gradient(#f7fbff 0%, #eaf2ff 100%) !important;
}

/* ✅ live/slots 카드 내부 svg(화살표/장식) 숨김 유지 */
#live article > div > svg,
#slots article > div > svg {
  opacity: 0;
}

/* ✅ hover ring 색: 밝은 포인트 블루로 */
.hover\:ring-emerald-400\/70:hover {
  --tw-ring-color: rgba(56, 189, 248, 0.9) !important; /* sky-400 계열 */
}

/* ✅ hover shadow: 밝은 블루 글로우로 */
.hover\:shadow-\[0_0_24px_rgba\(16\,185\,129\,\.55\)\,inset_0_0_2px_rgba\(16\,185\,129\,\.7\)\]:hover {
  --tw-shadow: 0 0 24px rgba(56, 189, 248, 0.55), inset 0 0 2px rgba(56, 189, 248, 0.7) !important;
  --tw-shadow-colored: 0 0 24px var(--tw-shadow-color), inset 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.animate-megaIn {
  animation: megaIn 180ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes megaDrop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes glide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(200%);
  }
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 220ms ease-out;
}
.animate-fade-up {
  animation: fadeUp 260ms ease-out;
}


/* live casino animation */

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-slide-in-left {
  animation: slideInLeft 0.42s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.animate-slide-in-right {
  animation: slideInRight 0.42s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

/* scrollbar */
.scrollbar-light::-webkit-scrollbar {
  width: 10px;
}

.scrollbar-light::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.18); /* slate-400 느낌 */
  border-radius: 999px;
}

.scrollbar-light::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.45); /* sky/blue 톤 */
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.65); /* 트랙과 분리 */
}

.scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.65);
}

/* 파이어폭스 */
.scrollbar-light {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.55) rgba(148, 163, 184, 0.18);
}

/* mobile menu animation */

@keyframes slideIn {
  from {
    transform: translateX(16%);
    opacity: 0.5;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.menu-container{
  margin: 0 auto;
  max-width:1400px; 
}