/* Base color palette derived from user provided gradients */
    :root {
      --gradient-start: #a80d27;
      --gradient-mid:   #a80d27;
      --gradient-end:   #a80d27;
      --gradient: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
      --color-bg: #ffffff;
      --color-fg: #24324a; /* deep blue-gray for contrast */
      --color-card-bg: #ffffff;
      --color-card-hover: #f7fafc;
      --color-border: #e5e9f2;
      --color-muted: #f9f9fb;
      --color-secondary: #f97316;
      --text-color : black;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
body {
      font-family: 'Noto Sans KR', sans-serif;
      background-color: var(--color-bg);
      color: var(--color-fg);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
  overscroll-behavior-x: none;    /* 수평 방향으로 부모에 스크롤 전파 방지 */
  touch-action: pan-y;  
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }
    /* Layout helpers */
    .container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    /* Buttons */
    .btn {
      display: inline-block;
      padding: 0.6rem 1rem;
      border-radius: 0.375rem;
      font-weight: 500;
      border: 1px solid var(--color-border);
      background-color: var(--color-muted);
      color: var(--color-fg);
      transition: background 0.3s ease, color 0.3s ease;
    }
    .btn:hover {
      background-color: var(--color-card-hover);
    }
    .btn.primary {
      background-image: var(--gradient);
      color: #ffffff;
      border: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .btn.primary:hover {
      filter: brightness(1.1);
    }

    /* Header */
    header.topbar {
      background-color: var(--color-card-bg);
      border-bottom: 1px solid var(--color-border);
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
    }
    .topbar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 0;
    }
    .topbar .logo {
      font-size: 1.5rem;
      font-weight: 700;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .nav-top {
      display: flex;
      gap: 1.5rem;
    }
    .nav-top a {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-weight: 500;
      transition: color 0.3s ease;
    }
    .nav-top a:hover {
      color: var(--gradient-mid);
    }
    .auth {
      display: flex;
      gap: 0.5rem;
    }
    .hamburger {
      display: none;
      font-size: 1.8rem;
      color: var(--color-fg);
      cursor: pointer;
    }

    /* Hero section */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.75);
    }

    /* Hero slideshow styles */
    .hero .slides {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .hero .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Use contain to ensure the full image is visible within the hero without cropping. */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0;
      animation: slideShow 15s infinite;
      animation-timing-function: ease-in-out;
    }
    .hero .slide:nth-child(1) { background-image: url('hero-banner1.png'); animation-delay: 0s; }
    .hero .slide:nth-child(2) { background-image: url('hero-banner2.png'); animation-delay: 5s; }
    .hero .slide:nth-child(3) { background-image: url('hero-banner3.png'); animation-delay: 10s; }
    @keyframes slideShow {
      0% { opacity: 0; }
      /* Fade in smoothly during the first 8% of the cycle */
      8% { opacity: 1; }
      /* Hold visibility until roughly one third of the cycle */
      33% { opacity: 1; }
      /* Fade out between 33% and 41% for a smooth transition */
      41% { opacity: 0; }
      100% { opacity: 0; }
    }
    .hero-content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 2rem 1rem;
    }
    .hero h1 {
      font-size: 2.6rem;
      font-weight: 700;
      margin-bottom: 1rem;
      background-image: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero p {
      font-size: 1.25rem;
      margin-bottom: 1.8rem;
      color: var(--color-fg);
    }
    .hero .cta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    /* Section headings */
    h2.section-title {
      font-size: 2rem;
      font-weight: 700;
      margin: 3rem 0 1.5rem;
      text-align: center;
      background-image: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Game and sports grid */
    .game-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1rem;
    }
    .game-card {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .game-card img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }
    .game-card .info {
      padding: 0.75rem;
      flex: 1;
    }
    .game-card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.25rem;
      font-weight: 600;
    }
    .game-card p {
      font-size: 0.9rem;
      color: var(--color-fg);
    }
    .game-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
      border-color: var(--gradient-mid);
    }

    .sports-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1rem;
    }
    .sports-item {
      display: flex;
      align-items: center;
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      padding: 0.75rem 1rem;
      gap: 0.75rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .sports-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      border-color: var(--gradient-mid);
    }
    .sports-item .flag {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
    }
    .sports-item .match-info {
      flex: 1;
    }
    .sports-item .match-info h4 {
      font-size: 1rem;
      margin-bottom: 0.2rem;
      font-weight: 600;
    }
    .sports-item .match-info span {
      font-size: 0.85rem;
      color: var(--color-fg);
    }
    .sports-item .odds {
      font-weight: 700;
      background-image: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 1.05rem;
    }

    /* VIP card */
    .vip-card {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .vip-card h3 {
      font-size: 1.3rem;
      font-weight: 700;
      background-image: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .progress-container {
      width: 100%;
      background-color: var(--color-muted);
      border-radius: 0.375rem;
      height: 12px;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background-image: var(--gradient);
      transition: width 1.2s ease;
    }
    .vip-meta {
      font-size: 0.9rem;
    }

    /* Promotions */
    .promo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
    }
    .promo-card {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      padding: 1.25rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .promo-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      border-color: var(--gradient-mid);
    }
    .promo-card h4 {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--gradient-mid);
    }
    .promo-card p {
      font-size: 0.9rem;
    }

    /* Footer */
    footer {
      margin-top: 4rem;
      padding: 1rem 0;
      border-top: 1px solid var(--color-border);
      background-color: var(--color-card-bg);
      text-align: center;
      font-size: 0.85rem;
    }


    /* Quick menu for desktop (right side floating icons) */
    .quick-menu {
      position: fixed;
      top: 50%;
      right: 1rem;
      transform: translateY(-50%);
      display: none;
      /* space between icons, orientation defined in media query */
      gap: 0.6rem;
      z-index: 80;
    }
    .quick-menu .quick-button {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-image: var(--gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.4rem;
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      cursor: pointer;
      position: relative;
    }
    .quick-button span{
      margin-left: 10px;
    }
    .quick-menu .quick-button:hover {
      filter: brightness(1.1);
    }
    .quick-menu .quick-button span {
      position: absolute;
      right: 110%;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--color-card-bg);
      padding: 0.3rem 0.5rem;
      border-radius: 0.375rem;
      border: 1px solid var(--color-border);
      white-space: nowrap;
      font-size: 0.8rem;
      color: var(--color-fg);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .quick-menu .quick-button:hover span {
      opacity: 1;
    }

    /* FAB (Floating Action Button) for mobile */
    .fab-container {
      position: fixed;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: none;
      flex-direction: column;
      align-items: center;
    }
    .fab-main {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background-image: var(--gradient);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.2rem;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }
    .fab-items {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 0.6rem;
      margin-bottom: 0.6rem;
      opacity: 0;
      transform: scale(0);
      pointer-events: none;
      transition: transform 0.35s ease, opacity 0.35s ease;
    }
    .fab-item {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background-image: var(--gradient);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 1.6rem;
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: filter 0.2s ease;
    }
    .fab-item:hover {
      filter: brightness(1.1);
    }

    /* Text label below icons in the floating action buttons */
    .fab-label {
      display: block;
      font-size: 0.6rem;
      margin-top: 0.45rem;
      color: #fff;
      line-height: 1;
    }

    /* Ensure links inside fab items fill the circle */
    .fab-item a {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: inherit;
      text-decoration: none;
      font-size: inherit;
    }

    /* When active, reveal grid of items */
    .fab-container.active .fab-items {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    /* Responsive behaviors */
    @media (min-width: 769px) {
      /* Show desktop quick menu and hide mobile FAB */
      .quick-menu {
        /* Display quick menu as a single vertical column on desktop */
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .fab-container { display: none; }
    }
    @media (max-width: 768px) {
      /* Hide top nav items and show mobile actions */
      .nav-top { display: none; }
      .auth { display: none; }
      .hamburger { display: block; }
      .fab-container { display: flex; }
      /* hide existing mobile nav, not used */
            .qmenu2{
        display: none;
      }
      .mobile-nav { display: none !important; }
    }

    /* Mobile slide-out menu */
    .mobile-menu-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4);
      z-index: 90;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      width: 80%;
      max-width: 260px;
      height: 100%;
      background-color: var(--color-card-bg);
      box-shadow: -4px 0 8px rgba(0,0,0,0.1);
      padding: 2rem 1rem;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 100;
    }
    .mobile-menu.open {
      display: block;
      transform: translateX(0);
    }
    .mobile-menu a {
      display: block;
      padding: 0.8rem 0;
      font-size: 1rem;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-fg);
    }
    .mobile-menu a:last-child {
      border-bottom: none;
    }
    .mobile-menu .close-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--color-fg);
    }

    /* Sports betting cards */
    .sports-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }
    .sports-card {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 0.5rem;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .sports-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      border-color: var(--gradient-mid);
    }
    .sports-card .teams {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sports-card .team {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .sports-card .team-name {
      font-weight: 600;
    }
    .sports-card .vs {
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--color-fg);
    }
    .sports-card .match-meta {
      font-size: 0.85rem;
      color: var(--color-fg);
    }
    .sports-card .odds-row {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
    }
    .sports-card .odd {
      flex: 1;
      text-align: center;
    }
    .sports-card .odd .label {
      display: block;
      font-size: 0.75rem;
      color: var(--color-fg);
    }
    .sports-card .odd .value {
      font-size: 1rem;
      font-weight: 700;
      background-image: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn.small {
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
    }

    /* Decorative playing cards on left and right to subtly frame the page */
    .decor-card {
      position: fixed;
      top: 30%;
      width: 120px;
      height: 180px;
      border-radius: 0.5rem;
      background-image: var(--gradient);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 700;
      transform-origin: center;
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
      pointer-events: none;
      z-index: 5;
    }
    .decor-card.left {
      left: -60px;
      transform: rotate(-12deg);
    }
    .decor-card.right {
      right: -60px;
      transform: rotate(12deg);
    }
    @media (max-width: 768px) {
      .decor-card { display: none; }
    }

    /* Reveal animation classes */
    .reveal {
      transform: translateY(20px);
    }
    .reveal.show {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    /* Responsive tweaks */
    @media (max-width: 768px) {
      .nav-top { display: none; }
      .auth { display: none; }
      .hamburger { display: block; }
      .mobile-nav { display: flex; }
      .hero h1 { font-size: 2rem; }
    }

    /* Watermark displaying the 789CASINO branding subtly in the background */
    .casino-watermark {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-20deg);
      font-size: 10rem;
      font-weight: 800;
      color: var(--gradient-mid);
      opacity: 0.03;
      pointer-events: none;
      white-space: nowrap;
      z-index: -2;
    }

    /*
     * Dice overlay
     * On pages with largely white backgrounds, a few translucent dice help
     * reinforce the gaming theme. The dice use the middle hue of the site
     * gradient and are slightly transparent so they don't distract from
     * content. They sit in a fixed container which does not intercept
     * clicks or scrolls.
     */
    .dice-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
    .dice-overlay .dice {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 0.4rem;
      /* Use a semi-transparent base color derived from the middle of the gradient.
         RGBA value corresponds to #41cdce with 40% opacity. */
      background-color: rgba(65, 205, 206, 0.4);
      /* Do not apply global opacity so pips stay fully defined. */
      /* Use radial gradients to draw five white pips, evoking the face of a die. */
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 0.3rem, transparent 0.31rem),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.9) 0.3rem, transparent 0.31rem),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.9) 0.3rem, transparent 0.31rem),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.9) 0.3rem, transparent 0.31rem),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0.3rem, transparent 0.31rem);
    }
    @media (max-width: 768px) {
      .dice-overlay .dice {
        width: 50px;
        height: 50px;
      }
    }

    /* Canvas for WebGL-style falling dice animation */
#dice-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:-1;
}

    /* Fade effect for page transitions */
    .fade-effect {
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
    }
    .fade-effect.loaded {
      opacity: 1;
    }
    #home .banner.hero-slick{
  position: relative;
  width: 100%;
  min-height: 60vh;          /* 프로토타입 hero와 비슷한 높이 */
  overflow: hidden;
}

/* 프로토타입의 흰 베일(밝기) 효과 */
#home .banner.hero-slick::before{
  content:'';
  position:absolute; inset:0;
  background: rgba(255,255,255,0.75);
  pointer-events:none;
  z-index: 2;
}

/* Slick 내부 <img>를 'contain' 처럼 보여주기 */
#home .banner.hero-slick .slick-slide,
#home .banner.hero-slick a{
  height: 60vh;
}
@media(min-width:960px){
  #home .banner.hero-slick .slick-slide,
  #home .banner.hero-slick a{ height: 520px; }
}
#home .banner.hero-slick img{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%;
  object-fit: contain;        /* <— 프로토타입처럼 이미지 전체 보이기 */
  display:block;
  z-index:1;
}

/* Slick dots/arrows는 베일 위로 */
#home .banner.hero-slick .slick-dots,
#home .banner.hero-slick .slick-arrow{
  z-index: 3;
}
#home .hero{position:relative;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
#home .hero::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.75)}
#home .hero .slides{position:absolute;inset:0}
#home .hero .slide{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;animation:slideShow 15s infinite ease-in-out}
#home .hero .slide:nth-child(1){animation-delay:0s}
#home .hero .slide:nth-child(2){animation-delay:5s}
#home .hero .slide:nth-child(3){animation-delay:10s}
@keyframes slideShow{0%{opacity:0}8%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}}
#home .hero .hero-content{position:relative;z-index:1;text-align:center;padding:2rem 1rem}
#home .hero h1{font-size:2.6rem;font-weight:700;margin-bottom:1rem;background-image:linear-gradient(135deg,#a80d27,#a80d27,#a80d27);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#home .hero p{font-size:1.25rem;margin-bottom:1.8rem;color:#24324a}
/* ====== HC Modal (no dependency) ====== */
:root{ --hcRadius:16px; --hcShadow:0 20px 60px rgba(0,0,0,.18); --hcLine:#e7ecf2; }
.hc-overlay{
  position:fixed; inset:0; background:rgba(10,16,32,.45);
  display:none; opacity:0; transition:opacity .2s ease; z-index:9998;
}
.hc-overlay.is-open{ display:block; }
.hc-overlay.is-visible{ opacity:1; }

.hc-modal{
  position:fixed; inset:0; display:grid; place-items:center;
  pointer-events:none; z-index:9999;
}
.hc-modal__panel{
  width:min(720px, 92vw); max-height:86vh; background:#fff; color:#0a1220;
  border-radius:var(--hcRadius); box-shadow:var(--hcShadow);
  transform:translateY(12px) scale(.98); opacity:0;
  transition:transform .22s ease, opacity .22s ease;
  pointer-events:auto; display:flex; flex-direction:column; overflow:hidden;
}
.hc-modal.is-open .hc-modal__panel{ transform:none; opacity:1; }

.hc-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--hcLine);
  background:#fff;
}
.hc-modal__title{ font-size:18px; font-weight:800; margin:0; }
.hc-modal__close{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--hcLine);
  background:#fff; cursor:pointer; display:grid; place-items:center;
}
.hc-modal__body{ padding:16px; overflow:auto; }
.hc-modal__footer{ padding:14px 16px; border-top:1px solid var(--hcLine); background:#fff; }

.hc-hide{ display:none!important; }
.btn{cursor: pointer;}
/* 버튼/입력 약식 */
.hc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--hcLine); background:#fff; cursor:pointer; }
.hc-btn.primary{ background:linear-gradient(135deg,#a80d27,#a80d27,#a80d27); border:none; color:#fff; }
.hc-input{ width:100%; padding:10px 12px; border:1px solid var(--hcLine); border-radius:10px; }

@media (max-width:480px){
  .hc-modal__panel{ width:94vw; max-height:90vh; border-radius:14px; }
  .logo img{
    width: 150px;
  }
}

/* 배경 캔버스가 있다면 항상 뒤로 */
#dice-canvas{ z-index:-1!important; }
#toast-stack{
  position: fixed; right: 16px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10000; pointer-events: none;
}
.toast{
  min-width: 220px; max-width: 420px;
  background: #0b1020; color: #e6edf7;
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 14px 38px rgba(10,16,32,.24);
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, filter .2s ease;
  pointer-events: auto;
}
.toast.show{ opacity: 1; transform: none; }
.toast .t-icon{ font-size: 16px; line-height: 1; }
.toast .t-msg{ font-size: 14px; }
.toast .t-close{ background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 16px; opacity: .75; }
.toast:hover{ filter: brightness(1.03); }

/* 색 테마 */
.toast.success{ background:#0c2f1f; color:#d7ffee; }
.toast.info   { background:#0b2238; color:#daeeff; }
.toast.warn   { background:#3a2a07; color:#fff1cf; }
.toast.error  { background:#3b0b0b; color:#ffdfe1; }

/* ===== Join Tabs (indicator) ===== */
.join-tabs{
  position: relative; display: inline-flex; gap: 6px; border-bottom: 1px solid #e7ecf2;
}
.join-tabs [role="tab"]{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 10px 14px; border-radius: 12px; font-weight: 600; color:#5a6c86;
}
.join-tabs [role="tab"][aria-selected="true"]{ color:#0a1220; background:#f5f9fc; }
.join-tabs .tab-indicator{
  position: absolute; bottom: -1px; height: 2px; background: linear-gradient(90deg,#a80d27,#a80d27,#a80d27);
  border-radius: 2px; transition: left .25s ease, width .25s ease;
}

/* 탭 패널 기본 */
[role="tabpanel"]{ display: none; }
[role="tabpanel"][data-active="true"]{ display:block; }

/* 접근성 보조: 현재 탭 배지(선택사항) */
.tab-badge{
  display:inline-block; margin-left: 8px; font-size:11px; font-weight:700;
  color:#fff; background:#41CDCE; border-radius: 999px; padding: 2px 8px;
}
/* ===== HCModal hardening (override) ===== */
:root{
  --HC-Z-OVERLAY: 2147483646; /* 최대치급 */
  --HC-Z-MODAL:   2147483647;
}

.hc-overlay{
  position:fixed; inset:0;
  background:rgba(10,16,32,.50); /* 조금 더 진하게 */
  display:none; opacity:0; transition:opacity .2s ease;
  z-index:var(--HC-Z-OVERLAY);
  pointer-events:auto; /* 오버레이가 반드시 클릭을 먹게 */
}

.hc-overlay.is-open{ display:block; }
.hc-overlay.is-visible{ opacity:1; }

.hc-modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  z-index:var(--HC-Z-MODAL);
  /* 모달이 안 보이는데 포커스만 먹는 경우 방지 */
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.hc-modal.is-open{
  visibility:visible; opacity:1; pointer-events:auto;
}

.hc-modal__panel{
  width:min(720px, 92vw); max-height:86vh;
  background:#fff; color:#0a1220;
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.18);
  transform:translateY(12px) scale(.98); opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.hc-modal.is-open .hc-modal__panel{ transform:none; opacity:1; }

/* 뒤 화면 인터랙션 완전 차단용 */
.hc-root[inert]{ pointer-events:none !important; user-select:none !important; }
body.hc-modal-open{ overflow:hidden !important; }

/* 혹시 다른 글로벌 z-index가 더 높다면 이것도 덮어써짐을 보장 */
.quick-menu, .topbar, [class*="sticky"], [class*="fixed"] {
  /* 필요하면 여기에 z-index를 낮춰도 되지만, 지금은 모달이 더 높으니 스킵 */
}

/* 디버깅: 모달이 화면 밖에 있지 않도록 최소 크기 보장 */
.hc-modal__panel{ min-width:280px; }
header.topbar {
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  padding: 0.6rem 1rem;
}
.topbar .logo {
  font-weight: 800;
  font-size: 1.0rem;
  color: var(--accent-light);
  letter-spacing: .5px;
  transition: color .25s ease;
}
.topbar .logo:hover { color: var(--accent); }
.nav-top a {
  color: var(--text-color);
  font-weight: 500;
  padding: .4rem .6rem;
  border-radius: .3rem;
  transition: background .25s ease,color .25s ease;
}
.nav-top a:hover,
.nav-top a[aria-current="page"] {
  background: rgba(0, 110, 255, 0.15);
  color: var( --color-fg);
}
.auth .btn {
  border-radius: 50px;
  font-weight: 600;
}
/* heart_home_light.css : HeartCasino 레이아웃을 화이트 톤으로 구현 */
:root {
  --bg: #ffffff;
  --text: #1a1a1d;
  --muted: #8e8e93;
  --border: rgba(0,0,0,.08);
  --card: #ffffff;
  --accent: #e85560;
  --accent-light: #f88088;
}

/* 섹션 공통 */
.home-sec { background: #fff; }
.home-sec .sec-ovl { pointer-events:none; }

/* ===== Hero (섹션 모드) ===== */
.hero-sec.white {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff, #f7f8fa);
}
.hero-sec.white .slides { position:absolute; inset:0; z-index:0; }
.hero-sec.white .slide {
  position:absolute; inset:0; 
  background:center/contain no-repeat;
  opacity:0; animation:homeSlideShow 15s infinite ease-in-out;
}
.hero-sec.white .veil { position:absolute; inset:0; background:rgba(255,255,255,.85); z-index:1; }
.hero-sec.white .content { position:relative; z-index:2; text-align:center; padding:2rem 1rem; }
.hero-sec.white .content h1{
  font-size:2.6rem; font-weight:700; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sec.white .content p{ font-size:1.15rem; color: var(--text); opacity:.8; margin-bottom:1.2rem; }
.hero-sec.white .content .btn-primary{
  background: var(--accent); border:none; color:#fff; 
  box-shadow: 0 6px 16px rgba(232,85,96,.25);
}
.hero-sec.white .content .btn-outline-secondary{
  border:1px solid var(--accent); color:var(--accent);
}

/* ===== Hero (폴백 모드: #home-hero) ===== */
#home-hero.white { position:relative; overflow:hidden; background: linear-gradient(180deg, #fff, #f7f8fa); }
#home-hero.white .slides{ position:absolute; inset:0; z-index:0; }
#home-hero.white .slide{ position:absolute; inset:0; background:center/contain no-repeat; opacity:0; animation:homeSlideShow 15s infinite ease-in-out; }
#home-hero.white::before{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.85); z-index:1; }
#home-hero.white .hero-content{ position:relative; z-index:2; text-align:center; padding:2rem 1rem; }
#home-hero.white .hero-content h1{
  font-size:2.6rem; font-weight:700; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#home-hero.white .hero-content p{ font-size:1.15rem; color:var(--text); opacity:.8; margin-bottom:1.2rem; }
#home-hero.white .cta .btn.primary{ background: var(--accent); color:#fff; border:none; box-shadow:0 6px 16px rgba(232,85,96,.25); }
#home-hero.white .cta .btn{ border-radius:30px; padding:.7rem 1.6rem; }

/* ===== 카테고리/갤러리(화이트 카드) ===== */
.gameGallery, .categories {  }
.section-title { color:var(--text); font-weight:800; letter-spacing:.2px; }
.game-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.game-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.game-card .meta h4{ color:#333; font-weight:600; }

/* ===== 가로 스크롤형 행(Top30 등) ===== */
.row-title{ font-weight:800; color:var(--text); }
.row-title span{ color:var(--accent); }
.scroll-wrapper{ display:flex; gap:12px; overflow-x:auto; scroll-behavior:smooth; }
.scroll-wrapper::-webkit-scrollbar{ display:none; }
.game-card img{ width:100%; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.arrow-btn{
  position:absolute; top:40%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.05); color:var(--accent);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.arrow-btn.left{ left:10px; } .arrow-btn.right{ right:10px; }
.more-btn{
  display:inline-block; margin-top:16px; border:1px solid var(--accent);
  color:var(--accent); padding:6px 20px; border-radius:30px; cursor:pointer;
}

/* 키프레임 */
@keyframes homeSlideShow{ 0%{opacity:0} 8%{opacity:1} 33%{opacity:1} 41%{opacity:0} 100%{opacity:0} }

/* 반응형 */
@media(max-width:959px){
  .hero-sec.white .content h1, #home-hero.white .hero-content h1{ font-size:2rem; }
  .game-card{ border-radius:10px; }
}
  .home-admin .row-item{
    background: var(--card-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
  }
  .home-admin .thumb{
    width: 120px; height: 68px; object-fit: cover;
    border: 1px solid var(--input-border);
    border-radius: 6px;
  }
  .home-admin .form-control,
  .home-admin .form-select{
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
  }
  .home-admin .btn-outline-light{ border-color: var(--input-border); color: var(--text-color); }
  .home-admin .btn-outline-light:hover{ background: var(--accent); border-color: var(--accent); }
  .card{ background: var(--nav-bg) !important; border-color: var(--input-border) !important; }
  .card-header{ border-bottom: 1px solid var(--input-border) !important; }
  .card-title{ color: var(--accent-light); }
  .text-secondary{ color: var(--muted-color) !important; }
  /* ===== Banner toggle (fixed & high-contrast) ===== */
.banner-toggle{
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  background: #111827; color:#fff;
  border: 1px solid #0f172a; border-radius: 10px;
  padding: .55rem .9rem; font-size:.9rem; font-weight:700;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.banner-toggle:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.22); background:#1f2937 }

/* 히어로 안쪽에 있던 예전 버튼은 숨겨 일관성 유지 */
.hide-banner-btn{ display:none !important; }

/* ===== Jackpot (stronger contrast on light) ===== */
.jackpot{
  background: rgba(255,255,255,.92);
  border: 1px solid #d0d8e2;
  color: #111827;
  box-shadow: 0 6px 20px rgba(15,23,42,.10);
  backdrop-filter: saturate(140%) blur(2px);
}
.jackpot .amount{
  color:#caa130; font-weight:800;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* 화살표 버튼도 윤곽 강화 */
.arrow-btn{
  border-color:#d0d8e2; color:#111827; background:#ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.arrow-btn:hover{ background:#f3f6fb; }

/* ===== Category hover/focus zoom ===== */
.categories .category-card{
  position: relative;
  transform: translateZ(0);           /* GPU hint */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

.categories .category-card img{
  transform: scale(1);
  transition: transform .35s ease, opacity .25s ease;
  will-change: transform, opacity;
}

/* 마우스 오버: 카드 살짝 확대 + 그림자 강화 + 이미지 소폭 줌 */
.categories .category-card:hover{
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
  border-color: #d0d8e2; /* 라이트 테마일 때 윤곽 강화 */
}

.categories .category-card:hover img{
  transform: scale(1.06);
  opacity: .30; /* 텍스트 가독성 유지 */
}

/* 키보드 포커스 접근성 */
.categories .category-card:focus-visible{
  outline: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 3px rgba(232, 85, 96, .25), 0 10px 22px rgba(15, 23, 42, .12);
  border-color: #e85560;
}

/* 제목/부제도 약간의 트랜지션으로 선명도 향상 */
.categories .category-card h3,
.categories .category-card span{
  transition: text-shadow .25s ease, color .25s ease;
}

.categories .category-card:hover h3{
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.categories .category-card:hover span{
  color: #3a4a66; /* 살짝 진하게 */
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .categories .category-card,
  .categories .category-card img,
  .categories .category-card h3,
  .categories .category-card span{
    transition: none !important;
  }
}

/* === Horizontal row: grab to scroll + centered arrows === */

/* 그랩(드래그 스크롤) */
.scroll-wrapper{
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.scroll-wrapper.dragging{
  cursor: grabbing;
}

/* 기존 좌우 화살표 숨김(새 컨트롤 사용) */
.scroll-container > .arrow-btn { display: none !important; }

/* 행 상단 가운데 액션 바 */
section.row { position: relative; }
.row-actions{
  position: absolute;
  top: -28px;                       /* 행 위쪽에 띄우기 (스크린샷 위치) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

/* 원형 좌우 버튼 */
.row-actions .circle-btn{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2f7;
  color: #334155;
  border: 1px solid #d6dce5;
  box-shadow: 0 6px 16px rgba(15,23,42,.12);
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.row-actions .circle-btn:hover{
  background: #0f172a; color:#fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
  transform: translateY(-1px);
}

/* 빨간 MORE 버튼 (pill) */
.row-actions .more-btn{
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: #e21d23;             /* 붉은 계열 고정 */
  color: #fff; font-weight: 800; letter-spacing:.3px;
  border: none;
  box-shadow: 0 8px 18px rgba(226,29,35,.35);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.row-actions .more-btn:hover{
  background:#c9151a; transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(226,29,35,.45);
}

/* 가로 스크롤 그랩 */
.scroll-wrapper{
  cursor: grab; user-select: none;
  -webkit-user-drag:none; -webkit-tap-highlight-color:transparent;
}
.scroll-wrapper.dragging{ cursor: grabbing; }

/* 반응형 미세 조정 */
@media (max-width: 900px){
  .row-actions{ top: -22px; gap: 8px; }
  .row-actions .circle-btn{ width: 38px; height: 38px; }
}
@media (max-width: 540px){
  .row-actions{ top: -18px; }
  .row-actions .more-btn{ padding:.5rem .9rem; font-weight:700 }
}
/* ===== 공지 마퀴 (라이트 톤, 풀블리드 라운드 바) ===== */
.notice-marquee{ padding:.5rem 0; }
.notice-marquee.is-full{
  width:100vw;                   /* 화면 전체폭 */
  margin-left:50%; transform:translateX(-50%); /* 풀블리드 */
}

.notice-shell{
  position:relative; overflow:hidden;
  background:#e9edf2;            /* 연회색 바 */
  border-radius:18px;
  padding:.55rem 1rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}

/* 좌/우 페이드 마스크(글씨가 부드럽게 나타났다 사라지도록) */
.notice-shell::before,
.notice-shell::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:1; pointer-events:none;
}
.notice-shell::before{
  left:0;  background:linear-gradient(90deg, #e9edf2 0%, rgba(233,237,242,0) 100%);
}
.notice-shell::after{
  right:0; background:linear-gradient(270deg,#e9edf2 0%, rgba(233,237,242,0) 100%);
}

/* 트랙: 2회 연결된 라인을 좌->우(또는 우->좌)로 무한 이동 */
.notice-track{
  position:relative; z-index:0;
  display:inline-flex; align-items:center;
  gap:2.2rem; white-space:nowrap;
  animation: marquee-left 28s linear infinite;   /* 기본: 왼쪽으로 흐름 */
}
.notice-track:hover{ animation-play-state: paused; } /* 마우스 올리면 일시정지 */

/* 메시지/구분자 스타일 */
.notice-track .item{
  color:#111827; font-weight:700; letter-spacing:.1px;
}
.notice-track .sep{
  color:#111827; opacity:.35; margin:0 1rem;
}

/* 우->좌가 아니라 좌->우로 흐르게 하고 싶으면 아래 키프레임만 바꾸세요 */
@keyframes marquee-left{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 콘텐츠 길이의 절반만큼 이동(2회 결합 기준) */
}

/* 모션 배려 */
@media (prefers-reduced-motion: reduce){
  .notice-track{ animation:none; }
}
.ma2{
  height: 40px;
  width: 80vw;
  z-index: 3;             /* 히어로 위에 오도록 */
  margin-top: -22px;  
  background-color: #e5e7eb;
  position: relative;
  border-radius: 40px;
  overflow: hidden;

}
.hero { position: relative; z-index: 1; }
/* ===== FAB base ===== */

/* 항목 래퍼: 기본은 보이지 않고, 클릭도 막힘 */
.fab-items{
  display: none;
}
.active .fab-items{
  display: grid;
}
#alarm-container{
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px)); /* 노치 대응 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none; /* 컨테이너는 이벤트 막고, 개별 알람에만 허용 */
}
.alarm {
  min-width: 240px;
  max-width: 280px;
  background: #0b1320;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-20px);
  animation: alarmFadeIn .25s ease forwards;
  pointer-events: auto;
}
.alarm.hide {
  animation: alarmFadeOut .25s ease forwards;
}

@keyframes alarmFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes alarmFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}
#bg-vanta{
  position: fixed;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  z-index: -10;             /* 콘텐츠 아래 */
  pointer-events: none;   /* 배경이 클릭 막지 않도록 */
  background: radial-gradient(#f6f8fb, #eef3f7); /* 로딩 전 폴백 */
}
.ft-links{
      margin-left: 50px;
      display: flex;
          justify-content: space-evenly;

}
  .ft-link2{
    margin-left: 50px;
  }
@media (max-width: 768px) {
  .ft-grid {
    grid-template-columns: 1fr; /* 1열 레이아웃 */
    gap: 20px;
  }

  .ft-brand {
    order: 1; /* 첫 번째 */
  }

  /* 두 번째 줄: 바로가기 + 고객지원 */
  .ft-links {
    order: 2;
  }

  /* 두 개의 .ft-links를 가로로 나란히 */
  .ft-links {
    display: inline-block;
    width: 49%;
    vertical-align: top;
  }

  /* 세 번째 줄: 앱/소셜 */
  .ft-app {
    order: 3;
    clear: both;
    display: block;
  }
  .ft-link2{
    width: 50%;
    
     margin-left:0px;
  }
  .ft-links{
     margin-left:0px;
        width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    
  }
}
.mfab{ position: fixed; right: 16px; bottom: 16px; z-index: 1050; display: none; }
@media (max-width: 991px){ .mfab{ display:block; } }

/* 두 개의 메인 버튼을 가로로 */
.mfab-main{
  appearance:none; border:0; cursor:pointer;
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg,#a80d27,#a80d27 55%,#a80d27);
  color:#fff; font-size:26px; line-height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(2,6,23,.18), 0 2px 6px rgba(2,6,23,.08);
  margin-left:10px;
}
.mfab-main:active{ transform: translateY(1px); }

/* 패널(각 버튼 위로 뜨는 시트) */
.mfab-panel{
  position:absolute; right: 0; bottom: 70px;
  width: min(86vw, 320px); max-height: 52vh; overflow:auto;
  background:#fff; border:1px solid #e6edf5; border-radius:14px;
  box-shadow: 0 14px 30px rgba(2,6,23,.22), 0 4px 12px rgba(2,6,23,.10);
  padding:10px;
  transform-origin: bottom right;
  transform: translateY(8px) scale(.96);
  opacity:0; pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
}
.mfab-panel[aria-hidden="false"]{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

/* 패널 목록 */
.mfab-list{ display:flex; flex-direction:column; gap:6px; }
.mfab-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  background:#fff; color:#0f172a; border:1px solid transparent;
}
.mfab-link i{ font-size:18px; width:20px; text-align:center; }
.mfab-link span{ font-size:14px; }
.mfab-link:hover{ background:#f8fafc; border-color:#e6edf5; }
/* ========== Dual FAB (grid pop, no slide) ========== */
@media (min-width: 991px){

}

/* 공통 래퍼: 화면 하단 가운데, 버튼 2개 나란히 */
.fabx-dual{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1050; display: none; gap: 12px; align-items: flex-end;
  pointer-events: none; /* 래퍼는 클릭 안 먹고 */
}
@media (max-width: 991px){ .fabx-dual{ display:flex; } }

/* 각 FAB 블록(A:+ / B:게임) */
.fabx{
  position: relative; display: grid; gap: 10px; justify-items: center;
  pointer-events: auto; /* 내부 요소는 클릭 가능 */
}

/* 메인 버튼(원형) — 기존과 동일한 톤 */
.fabx-main{
  width: 72px; height: 72px; border-radius: 50%;
  background-image: linear-gradient(135deg,#a80d27,#a80d27 55%,#a80d27);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size: 2.1rem; line-height: 1;
  box-shadow: 0 10px 20px rgba(2,6,23,.18), 0 2px 6px rgba(2,6,23,.08);
  border: none; cursor: pointer;
  transition: transform .12s ease, filter .2s ease;
}
.fabx-main:active{ transform: translateY(1px); }
.fabx-main i{ font-size: 1.6rem; }

/* 펼쳐지는 아이콘 그리드(버튼 위) — 기존 스타일과 동일 */
.fabx-items{
  position: absolute; bottom: 86px; /* 버튼 위 간격 */
  left: 50%; transform: translateX(-50%) scale(.96);
  display: grid; grid-template-columns: repeat(3, 72px); gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.fabx.active .fabx-items{ opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }

/* 원형 아이템 버튼 */
.fabx-item{
  width: 72px; height: 72px; border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-size: 1.5rem; text-align:center; text-decoration:none;
  transition: filter .2s ease;
}
.fabx-item:hover{ filter: brightness(1.1); }

/* 라벨 (아이콘 아래 텍스트) */
.fabx-label{ display:block; font-size:.62rem; margin-top:.42rem; line-height:1; color:#fff; }

/* 좁은 화면에서 그리드 자동 줄바꿈 */
@media (max-width: 420px){
  .fabx-items{ grid-template-columns: repeat(3, 72px); }
}

/* 모바일 메뉴는 조금 작게 */
.mobile-menu .quick-button.image-swap .img-wrap {
  width: 120px; height: 120px;
}

@media (prefers-reduced-motion: reduce) {
  .quick-button.image-swap .img-wrap img { transition: none; }
}
.qmenu2 {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;            /* 필요 시 media query로 토글 */
  flex-direction: column;
  gap: 0.6rem;
  z-index: 80;
}

/* 버튼: 기존 모든 것 무력화 후 재정의 */
.qmenu2__btn {
  all: unset;               /* 상속/브라우저 기본/기존 테마 초기화 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-image: var(#fff);
  color: #a80d27;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* hover 시 버튼 배경만 살짝 밝게 */
.qmenu2__btn:hover { filter: brightness(1.08); }

/* 이미지 래퍼: 원형 내부에 비율 맞춰 배치 */
.qmenu2__imgwrap {
  position: relative;
  width: 100%;               /* 56px의 60% → 필요하면 70~80%로 조정 */
  height: 100%;
}

/* 두 장을 겹쳐서 스왑 */
.qmenu2__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity .22s ease;
}
.qmenu2__img--off { opacity: 1; z-index: 1; }
.qmenu2__img--on  { opacity: 0; z-index: 2; }

.qmenu2__btn:hover .qmenu2__img--off { opacity: 0; }
.qmenu2__btn:hover .qmenu2__img--on  { opacity: 1; }

/* 툴팁(라벨): 기존 위치/스타일 유지 */

.qmenu2__btn:hover .qmenu2__label { opacity: 1; }

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) {
  .qmenu2__img { transition: none; }
}
@media screen and (max-width: 768px) {
  .qmenu2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
/* 공통 아이콘 박스 - 기존 유지 */
.icon{
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  vertical-align:-3px; /* 텍스트 정렬 보정 */
}

/* ✅ 원하는 크기로 축소 (필요시 16px 등으로 더 줄이세요) */
:root{
  --icon-size-mobile: 70px;
  --icon-size-fab:    70px;
}

/* 모바일 슬라이드 메뉴 아이콘 크기 */
.mobile-menu a .icon{
  width:var(--icon-size-mobile);
  height:var(--icon-size-mobile);
  margin-right:10px;
}

/* FAB 목록 아이콘 크기 */
.fabx-item .icon{
  width:var(--icon-size-fab);
  height:var(--icon-size-fab);
}

/* (데스크톱 퀵버튼에서 .icon을 쓰는 경우만) */
.quick-menu .quick-button .icon{
  width:64px; height:18px;
}
.listZone {
  background-color: white;
}
.card-preview {
     white-space: nowrap;
}
/* 드래그-스크롤 컨테이너: .table-responsive 등 실제 스크롤 요소에 붙이세요 */
[data-drag-x]{
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  cursor: grab;
}
[data-drag-x].dragging{
  cursor: grabbing;
  user-select: none; -webkit-user-select: none;
}
/* 터치가 대개 td/th에 걸리므로 자식에도 동일 정책을 내려줌 */
[data-drag-x] *, [data-drag-x] *::before, [data-drag-x] *::after{
  touch-action: pan-y;
}
.table-responsive{
  overflow: auto;
}
.table-responsive > .table{
  width: max-content;  /* 컨텐츠만큼 넓어짐 (넘치면 스크롤 발생) */
  min-width: 100%;     /* 최소한 컨테이너 폭은 보장 */
}
.table-responsive{ overflow:auto; -webkit-overflow-scrolling:touch; }
.table-responsive > .table{ width:max-content; min-width:100%; }
.table th, .table td{ white-space:nowrap; }
/* 구형 사파리용 폴백 */
@supports not (width: max-content){
  .table-responsive > .table{ width: auto; display: inline-table; }
}
.table-scroller{
  overflow:auto;                    /* 또는 overflow-x:auto; overflow-y:auto; */
  -webkit-overflow-scrolling: touch;
  touch-action: auto;               /* ← 중요: pan-x도 허용. 이전의 pan-y는 제거 */
  overscroll-behavior: contain;
}

/* ② 표 폭을 콘텐츠 기준으로 키우기 (부트스트랩의 width:100% 무력화) */
.table-scroller > .table{
  width: max-content;               /* 콘텐츠만큼 넓어짐 → 가로 오버플로우 생성 */
  min-width: 100%;                  /* 너무 좁아지는 것 방지 */
  table-layout: auto;
}

.table-scroller{
  overflow:auto;                    /* 또는 overflow-x:auto; overflow-y:auto; */
  -webkit-overflow-scrolling: touch;
  touch-action: auto;               /* ← 중요: pan-x도 허용. 이전의 pan-y는 제거 */
  overscroll-behavior: contain;
}

/* ② 표 폭을 콘텐츠 기준으로 키우기 (부트스트랩의 width:100% 무력화) */
.table-scroller > .table{
  width: max-content;               /* 콘텐츠만큼 넓어짐 → 가로 오버플로우 생성 */
  min-width: 100%;                  /* 너무 좁아지는 것 방지 */
  table-layout: auto;
}

/* ③ 줄바꿈 금지로 컬럼 폭 유지(가로 오버플로우 유도) — 오타 주의 */
.table-scroller th, .table-scroller td{ white-space: nowrap; }
  @media (max-width: 769px) {
  .table-scroller th, .table-scroller td{ font-size: 12px; }
.row{padding:1rem 0.5rem !important;}  
}
 .cash-btn-wrap {
    display: none; /* 기본은 숨김, PC에서만 노출 */
  }

  @media (min-width: 992px) {
    .cash-btn-wrap {
      display: flex;
      align-items: center;
    }
  }

  .cash-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    width: 60px;   /* 기본: 아이콘 정도만 보이게 */
    height: 44px;
    padding: 0 12px 0 16px;

    border: none;
    background: transparent;
    cursor: pointer;

    border-radius: 999px; /* 펼쳐졌을 때 pill 모양 */
    overflow: hidden;

    text-decoration: none;

    transition:
      width 0.35s cubic-bezier(.4,0,.2,1),
      background 0.25s cubic-bezier(.4,0,.2,1),
      box-shadow 0.25s cubic-bezier(.4,0,.2,1);
  }

  /* hover 시: 자리 그대로 가로로 펼쳐지고, 그라디언트 배경 생김 */
  .cash-btn:hover {
    width: 200px; /* 펼쳐졌을 때 폭 */
    background: linear-gradient(135deg, #a80d27, #a80d27);
    box-shadow: 0 8px 18px rgba(65, 205, 206, 0.45);
  }

  .cash-label {
    opacity: 0;
    color: #0c3e3c;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    font-size: 0.9rem;
    transition: opacity 0.22s linear 0.12s;
  }

  .cash-btn:hover .cash-label {
    opacity: 1;
  }

  .cash-icon-wrap {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 이미지 자체는 border-radius 영향을 안 받게 */
  .cash-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    border-radius: 0;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .cash-btn,
    .cash-label {
      transition: none !important;
    }
  }
.qmenu2{
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);

  width: 160px;            /* 버튼이 펼쳐졌을 때 기준폭 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* 버튼들을 오른쪽으로 정렬 */
  gap: 10px;
  z-index: 900;
}

@media (max-width: 991px){
  .qmenu2 { display:none; }
}

/* ===================================================
   버튼 기본 상태
   =================================================== */
.qmenu2 .qmenu2__btn{
  position: relative;
  display: flex;
  align-items: center;

  width: 60px;       /* 아이콘만 보이게 */
  height: 56px;
  padding: 0 16px 0 14px;

  border-radius: 999px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(15,23,42,0.4);
 color: #a80d27;
  text-decoration: none;

  transition:
      width .4s cubic-bezier(.34,1.2,.4,1),
      background .25s ease,
      box-shadow .25s ease;
}

/* ===================================================
   hover 시: 왼쪽으로 확장 + 색상 변경
   =================================================== */
.qmenu2 .qmenu2__btn:hover{
  width: 220px;  /* 컨테이너 폭만큼 확장 */
  background: #fff;
  box-shadow: 0 10px 24px rgba(65,205,206,0.55);
}

/* ===================================================
   아이콘
   =================================================== */
.qmenu2 .qmenu2__imgwrap{
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qmenu2 .qmenu2__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  transition: opacity .2s ease, transform .25s ease;
}

.qmenu2 .qmenu2__img--off{ opacity:1; transform:scale(1); }
.qmenu2 .qmenu2__img--on { opacity:0; transform:scale(.9); }

.qmenu2 .qmenu2__btn:hover .qmenu2__img--off{
  opacity: 0;
  transform: scale(1.1);
}
.qmenu2 .qmenu2__btn:hover .qmenu2__img--on{
  opacity: 1;
  transform: scale(1.08);
}

/* ===================================================
   텍스트 라벨 – 기본 숨김
   =================================================== */
.qmenu2 .qmenu2__label{
  opacity: 0;
  transform: translateX(15px);
  transition:
      opacity .22s linear .1s,
      transform .22s ease .1s;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  font-weight: 600;
  color: #0f172a;
  font-size: .9rem;
  padding-left: 10px;
}

/* ===================================================
   hover 시 텍스트 확실하게 나타나게
   =================================================== */
.qmenu2 .qmenu2__btn:hover .qmenu2__label{
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* 모바일에서는 숨김 */
@media (max-width: 991px){
  .qmenu2{
    display: none;
  }
}
/* ====================================
   qmenu2 버튼 – 호버 펼쳐지는 애니메이션
   ==================================== */
.qmenu2 .qmenu2__btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /* 🔥 기본 상태: 아이콘만 보이는 폭 */
  width: 60px;
  height: 56px;
  padding: 0 16px 0 14px;

  border-radius: 999px;
  backdrop-filter: blur(10px);

  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15,23,42,0.4);

  transition:
    width .38s cubic-bezier(.34,1.2,.4,1),
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

/* hover 시: 오른쪽은 고정, 왼쪽으로만 쭉 펼쳐짐 */
.qmenu2 .qmenu2__btn:hover{
  width: 160px;  /* 컨테이너 width와 동일 */
  box-shadow: 0 10px 24px rgba(65,205,206,0.55);
  transform: translateX(-2px);  /* 살짝 튀어나오는 느낌 (원하면 0으로 줄여도 됨) */
}
.qmenu2 .qmenu2__imgwrap{
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
}

.qmenu2 .qmenu2__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
  transition:
    opacity .18s ease,
    transform .25s cubic-bezier(.34,1.2,.4,1),
    filter .2s ease;
}
.qmenu2 .qmenu2__img--off{ opacity:1; transform:scale(1); }
.qmenu2 .qmenu2__img--on { opacity:0; transform:scale(.9); }

.qmenu2 .qmenu2__btn:hover .qmenu2__img--off{
  opacity: 0;
  transform: scale(1.05);
}
.qmenu2 .qmenu2__btn:hover .qmenu2__img--on{
  opacity: 1;
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.7));
}

.qmenu2 .qmenu2__label{
  flex: 1 1 auto;
  opacity: 0;
  transform: translateX(10px);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #a80d27;
  transition:
    opacity .22s linear .12s,
    transform .22s ease .12s;
}
.qmenu2 .qmenu2__btn:hover .qmenu2__label{
  opacity: 1;
  transform: translateX(0);
}
#bgCanvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;          /* 뒤에 깔림 */
  pointer-events: none;/* 클릭/스크롤 막지 않게 */
}
.alert-info{
  background-color: #a80d27;
  color: black;
  opacity: 0.75;
}
.btn:hover{
 border-color: #a80d27;
 color: black;
}