/*
  heart_light.css — Content-only light palette for HeartCasino lobby
  - Keeps the same class names and DOM as heart_style.css (header/hero/categories/rows/footer)
  - Purely visual swap to a white/light UI
*/

/* ===== Root colour tokens (light) ===== */

/* ===== Resets & page fade ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.fade-effect{opacity:0;transition:opacity .6s ease}
.fade-effect.loaded{opacity:1}

/* ===== Header (sticky, light) ===== */
header{
  position:sticky; top:0; left:0; width:100%;
  background:var(--nav-bg);
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .9rem; z-index:20;
  border-bottom:1px solid var(--line-color);
}
header .brand{display:flex;align-items:center;gap:.5rem}
header .brand .logo{
  width:28px;height:28px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;color:#fff;box-shadow:var(--shadow-sm);
}
header .brand span{font-weight:800;color:var(--accent)}
.category-nav{
  display:flex;align-items:center;gap:1rem;flex-grow:1;justify-content:center;
  font-size:.9rem; white-space:nowrap;
}
.category-nav a{
  color: var(--text-color); text-decoration:none;
  padding:.35rem .55rem; border-radius:.45rem;
  transition: color .2s, background .2s, box-shadow .2s;
}
.category-nav a:hover{
  color:#fff; background: var(--accent);
  box-shadow: var(--shadow-sm);
}
.category-nav a.active{color:#fff;background:var(--accent);box-shadow:var(--shadow-sm)}
.balance-area{display:flex;align-items:center;gap:.6rem}
.balance-area .balance{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--text-color)}
.balance-area .coin{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:var(--shadow-sm)}
.balance-area .coin.gold{background: linear-gradient(180deg,#ffd36b,#d8b451)}
.balance-area .coin.red{background: linear-gradient(180deg,var(--accent),var(--accent-light))}
.profile-icon{width:26px;height:26px;border-radius:50%;background:#eef2f7;border:1px solid var(--line-color)}

/* ===== Hero (slides + overlay) ===== */
.hero{
  position:relative;width:100%;overflow:hidden;
  margin-top:0; /* header sticky라 여백 불필요 */
  background: linear-gradient(180deg,#ffffff,#f3f6fb);
  border-bottom:1px solid var(--line-color);
}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover;background-position:center;
  opacity:0; animation:heroFade 24s infinite;
  filter: saturate(.95) contrast(.98);
}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:8s}
.hero-slide:nth-child(3){animation-delay:16s}
@keyframes heroFade{
  0%,6%{opacity:1}
  12%,32%{opacity:1}
  38%,100%{opacity:1}
}
.hero::after{ /* soft veil for readability on light bg */
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35) 40%, rgba(255,255,255,0));
  pointer-events:none;
}
.hero-overlay{
  position:absolute; left:6%; top:50%; transform:translateY(-50%);
  z-index:2; color:var(--text-color);
  max-width:560px; padding:1.2rem 1.4rem; border-radius:.8rem;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(140%) blur(6px);
  box-shadow: var(--shadow-md); border:1px solid var(--line-color);
}
.hero-overlay h2{
  font-size:2.6rem; line-height:1.2; font-weight:800; margin-bottom:.6rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-overlay p{font-size:1.05rem;color:#36465e;margin-bottom:1.1rem}
.hero-overlay .cta-btn{
  display:inline-block; text-decoration:none;
  background: var(--accent); color:#fff; font-weight:700;
  padding:.65rem 1.2rem; border-radius:.55rem; box-shadow:var(--shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.hero-overlay .cta-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);background:var(--accent-light)}
.hide-banner-btn{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  background:#fff; color:var(--text-color);
  padding:.4rem .7rem; border-radius:.5rem; border:1px solid var(--line-color);
  font-size:.8rem; cursor:pointer; box-shadow:var(--shadow-sm);
}
.jackpot{
  position:absolute; right:1rem; bottom:1rem; z-index:2;
  background:#fff; border:1px solid var(--line-color); border-radius:.6rem;
  padding:.45rem .75rem; display:flex; align-items:center; gap:.45rem;
  box-shadow:var(--shadow-sm); color:var(--text-color); font-weight:700;
}
.jackpot .amount{font-size:1.2rem;color:var(--gold-color)}

/* ===== Categories (3-up) ===== */
.categories{
  display:flex; flex-wrap:wrap; justify-content:space-around; gap:1rem;
  padding:2rem 1rem; margin-top:-36px; position:relative; z-index:1;
}
.category-card{
  position:relative; width:calc(33.333% - 1rem); min-height:220px;
  background:var(--card-bg); border:1px solid var(--line-color); border-radius:.8rem;
  overflow:hidden; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
}
.category-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md) }
.category-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;
}
.category-card h3{
  position:absolute; left:1rem; bottom:1.9rem; font-size:1.45rem; font-weight:800; color:#111827;
}
.category-card span{
  position:absolute; left:1rem; bottom:.9rem; font-size:.92rem; color:var(--muted-color);
}

/* ===== Horizontal rows (carousel-like) ===== */
.row{ padding:2rem 1rem }
.row-title{
  font-size:1.6rem; font-weight:800; margin-bottom:1rem; color:#111827;
  display:flex; align-items:center; gap:.5rem;
}
.row-title span{
  color:#fff; background: linear-gradient(135deg,var(--accent),var(--accent-light));
  padding:.1rem .55rem; border-radius:.4rem; box-shadow:var(--shadow-sm);
}
.scroll-container{ position:relative }
.scroll-wrapper{
  display:flex; overflow-x:auto; scroll-behavior:smooth; gap:.7rem; padding-bottom:.6rem;
}
.scroll-wrapper::-webkit-scrollbar{ height:8px }
.scroll-wrapper::-webkit-scrollbar-thumb{ background:#d6dde6; border-radius:8px }
.game-card{
  flex:0 0 168px; background:var(--card-bg); border:1px solid var(--line-color);
  border-radius:.7rem; overflow:hidden; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: var(--shadow-sm);
}
.game-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#d0d8e2 }
.game-card img{ width:100%; height:122px; object-fit:cover }
.game-card p{
  padding:.5rem; font-size:.9rem; color:#1f2937; text-align:center; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.arrow-btn{
  position:absolute; top:38%; width:34px; height:34px; border-radius:50%;
  background:#ffffff; color:#111827; border:1px solid var(--line-color);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: var(--shadow-sm); font-size:1.2rem;
}
.arrow-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); background:#f9fbfe }
.arrow-btn.left{ left:-16px } .arrow-btn.right{ right:-16px }
.more-btn{
  display:inline-block; margin-top:.9rem; padding:.45rem 1rem; border-radius:.6rem;
  background:#fff; color:#111827; border:1px solid var(--line-color); cursor:pointer;
  transition: box-shadow .2s ease, background .2s ease, color .2s ease;
}
.more-btn:hover{ background:var(--accent); color:#fff; border-color:transparent; box-shadow:var(--shadow-sm) }

/* ===== Footer (light) ===== */
footer{
  background:#ffffff; border-top:1px solid var(--line-color);
  padding:2rem 1rem; text-align:center; font-size:.9rem; color:var(--muted-color);
}
footer .brand{font-size:1.5rem; font-weight:800; color:var(--accent); margin-bottom:.45rem}
footer .social{display:flex; justify-content:center; gap:1rem; margin-top:1rem}
footer .social .icon{
  display:flex; align-items:center; gap:.45rem; background:#fff;
  border:1px solid var(--line-color); padding:.55rem .85rem; border-radius:.6rem;
  color:#111827; font-size:.88rem; cursor:pointer; transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
footer .social .icon:hover{ background:#f9fbfe; border-color:#d0d8e2; box-shadow:var(--shadow-sm) }
footer .social .icon svg{ width:16px; height:16px; fill: var(--accent) }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero-overlay{ left:5%; max-width:520px }
}
@media (max-width: 820px){
  .category-nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:.4rem .2rem; gap:.6rem }
  .category-nav a{ font-size:.8rem; padding:.45rem .6rem; flex-shrink:0 }
  .hero-overlay{ left:50%; transform:translate(-50%,-50%); text-align:center; max-width:86% }
  .arrow-btn.left{ left:-6px } .arrow-btn.right{ right:-6px }
}
@media (max-width: 768px){
  .category-card{ width:calc(50% - 1rem) }
}
@media (max-width: 520px){
  .category-card{ width:100% }
  .hero-overlay h2{ font-size:2.1rem }
  .hero-overlay p{ font-size:1rem }
}

/* ===== Optional: Sports section (light) ===== */
.sports-hero{
  position:relative; min-height:40vh; display:flex; align-items:center; justify-content:center;
  color:#0f172a; background-size:cover; background-position:center; overflow:hidden;
}
.sports-hero::before{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45))
}
.sports-hero .hero-content{ position:relative; z-index:1; text-align:center; padding:2rem 1rem }
.sports-hero h1{ font-size:2.2rem; font-weight:800; color:var(--accent); margin-bottom:.8rem }
.sports-hero p{ font-size:1.05rem; color:#334155 }

/* Section title */
.section-title{ font-size:1.7rem; font-weight:800; margin:2.2rem 0 1.3rem; text-align:center; color:var(--accent) }
.section-title span{ color:#111827 }

/* Category chips (sports) */
.category-grid{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; padding:0 1rem }
.category-chip{
  padding:.5rem 1rem; border:1px solid var(--line-color); border-radius:.5rem; background:#fff;
  color:#111827; cursor:pointer; font-size:.92rem; transition: background .2s, border-color .2s, box-shadow .2s;
}
.category-chip:hover, .category-chip.active{ background:#f9fbfe; border-color:#d0d8e2; box-shadow:var(--shadow-sm) }

/* Sports events */
.sports-event-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; padding:1rem }
.event-card{
  background:#fff; border:1px solid var(--line-color); border-radius:.8rem; padding:0.15rem;
  display:flex; flex-direction:column; gap:0; transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: var(--shadow-sm);
}
.event-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#d0d8e2 }
.event-card .teams{ display:flex; justify-content:space-between; font-weight:700; color:#111827 }
.event-card .meta{ font-size:.9rem; color:var(--muted-color) }
.event-card .odds-row{ display:flex; justify-content:space-between; gap:0;}
.event-card .odd{ flex:1; text-align:center; background:#f9fbfe; border:1px solid #e6edf5; border-radius:.5rem; padding: 0; }
.event-card .odd .label{ display:block; font-size:.75rem; color:var(--muted-color) }
.event-card .odd .value{ font-size:.98rem; font-weight:800; color:var(--accent) }
@media (max-width:600px){
  .sports-event-list{ grid-template-columns:1fr }
  .sports-hero h1{ font-size:1.7rem } .sports-hero p{ font-size:.95rem }
}
  .carousel{ position:relative; padding:8px 0; }
  .carousel--bleed-right{ margin-right: clamp(-24px, -6vw, -120px); padding-right: clamp(24px, 3vw, 160px); }
  .carousel__track{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    padding:4px; scrollbar-gutter: stable both-edges;
  }
  .carousel__track::-webkit-scrollbar{height:8px}
  .carousel__track::-webkit-scrollbar-thumb{background:#cfd7e3; border-radius:999px}

  /* 카드 */
  .card{
    flex:0 0 220px; scroll-snap-align:start;
    background:var(--panel); border:1px solid rgba(200,225,240,.6);
    border-radius:14px; text-decoration:none; color:inherit;
    box-shadow:0 4px 16px rgba(74,161,205,.08);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-width:0;
  }
  .card:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(74,161,205,.15); border-color:rgba(74,161,205,.3) }
  .card__thumb{ aspect-ratio:1/1; background:#f7f9fc; background-size:cover; background-position:center; }
  .card__meta{ padding:10px 8px; font-size:12px; color:var(--muted); text-align:center }
  .card__name{ font-size:13px; font-weight:700; color:#374151; margin-top:6px }

  /* 반응형 */
  @media (max-width: 1100px){ .ttl{ font-size:40px; } }
  @media (max-width: 860px){ .sectionRow__top{ grid-template-columns:1fr auto auto; row-gap:12px; } .ttl{ font-size:34px } }
  @media (max-width:600px){ .card{ flex:0 0 180px } .ttl{ animation: shineText 7s linear infinite, floatTitle 4.2s ease-in-out infinite; } }

  /* ===== 모달 ===== */
  .modalOverlay{ position:fixed; inset:0; background:rgba(15,23,42,.4); display:grid; place-items:center; z-index:1000; backdrop-filter: blur(2px); }
  .modalOverlay[hidden]{ display:none !important; }
  .modalSheet{
    width:min(1100px, 92vw); max-height:86vh; overflow:hidden;
    background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(2,6,23,.25);
    display:flex; flex-direction:column; border:1px solid rgba(200,225,240,.7);
  }
  .modalHead{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e6edf5; background:linear-gradient(90deg,#eaf6ff,#f7fbff); }
  .modalTitle{
    font-weight:900; letter-spacing:.3px;
    background:linear-gradient(90deg,var(--accent-mid),var(--accent-soft));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    text-shadow:0 0 6px rgba(173,216,230,.35);
  }
  .modalClose{
    width:36px; height:36px; border-radius:999px; border:1px solid #e3edf6;
    background:#fff; cursor:pointer; font-size:20px; line-height:1; color:#4aa1cd; box-shadow:0 4px 12px rgba(74,161,205,.08);
  }
  .modalBody{ padding:16px; overflow:auto; }
  .grid{ display:grid; gap:14px; grid-template-columns: repeat(6, minmax(0,1fr)); }
  @media (max-width:1200px){ .grid{ grid-template-columns: repeat(5,1fr); } }
  @media (max-width:1000px){ .grid{ grid-template-columns: repeat(4,1fr); } }
  @media (max-width:760px){  .grid{ grid-template-columns: repeat(3,1fr); } }
  @media (max-width:520px){  .grid{ grid-template-columns: repeat(2,1fr); } }
  .grid .card{ flex:1 1 auto; }
  .grid .card .card__thumb{ aspect-ratio:1/1; }
  .grid .card .card__meta{ font-size:12px; }
    .sectionRow{ padding:22px 0 28px; border-top:1px solid var(--line); }
  .sectionRow:first-of-type{border-top:0}
  .sectionRow__top{
    display:grid; grid-template-columns: 1fr auto auto;
    align-items:center; gap:14px; margin-bottom:10px;
  }
  .sectionRow__title{ display:flex; align-items:center; }
  .ttl{
    font-size:48px; line-height:1; font-weight:900; letter-spacing:2px; text-transform:uppercase;
    background: linear-gradient(90deg,#a80d27,#a80d27,#a80d27);
    background-size: 200% auto;
    color: transparent; -webkit-background-clip: text;
    animation: shineText 6s linear infinite, floatTitle 3.8s ease-in-out infinite;
    will-change: transform, background-position;
  }
  @keyframes shineText { 0%{background-position:0% center;} 100%{background-position:200% center;} }
  @keyframes floatTitle { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

  .topNav{ display:flex; gap:8px; z-index: 8000; }
  .navRound{
    width:36px; height:36px; border-radius:999px; border:1px solid rgba(200,225,240,.6);
    background:rgba(255,255,255,.9); color:#4aa1cd;
    display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 12px rgba(74,161,205,.08); font-weight:900;
  }
  .navRound[disabled]{opacity:.5; cursor:not-allowed}
  .sectionRow__more{ display:flex; justify-content:flex-end; align-items:center; }
  .moreBtn{
    border:0; background:linear-gradient(90deg,var(--accent-mid),var(--accent-soft)); color:#4aa1cd;
    padding:.55rem 1.1rem; border-radius:999px; font-weight:800; letter-spacing:.3px; cursor:pointer;
    box-shadow:0 6px 16px rgba(74,161,205,.25);
  }
  .moreBtn:hover{opacity:.9}
  .ui-rail{max-width:1440px; margin:0 auto; padding:18px 12px; overflow:visible;}
  @media (max-width: 820px){
  .carousel--bleed-right{
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .ui-rail{ padding: 12px 10px; }
}

/* ---- 섹션 상단바: 좁은 화면에서는 2줄로 배치 ---- */
@media (max-width: 720px){
  .sectionRow__top{
    grid-template-columns: 1fr;         /* 한 열 */
    row-gap: 8px;
  }
  .sectionRow__title{ justify-content:center; }
  .topNav, .sectionRow__more{
    justify-content:center;             /* 가운데 정렬 */
  }
  .moreBtn{ width: min(220px, 60vw); }  /* 버튼이 줄바꿈되어도 보기 좋게 */
}

/* ---- 더 작은 화면에서 타이틀/버튼 크기 축소 ---- */
@media (max-width: 520px){
  .ttl{ font-size: 28px; }
  .navRound{ width:32px; height:32px; font-size: .95rem; }
  .moreBtn{ padding:.5rem 1rem; font-size:.92rem; }
}

/* ---- 캐러셀 트랙에 최소 좌우 패딩 보장 (컨텐츠가 가장자리 붙지 않게) ---- */
.carousel__track{ padding-left: 4px; padding-right: 4px; }
 .ui-rail{max-width:1440px; margin:0 auto; padding:18px 12px; overflow:visible;}
  .sectionRow{ padding:22px 0 28px; border-top:1px solid var(--line); }
  .sectionRow:first-of-type{border-top:0}
  .sectionRow__top{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:14px; margin-bottom:10px; }
  .ttl{ font-size:48px; line-height:1; font-weight:900; letter-spacing:2px; text-transform:uppercase;
    background: linear-gradient(90deg,#a80d27,#a80d27,#a80d27); background-size: 200% auto;
    color: transparent; -webkit-background-clip: text; animation: shineText 6s linear infinite, floatTitle 3.8s ease-in-out infinite; }
  @keyframes shineText{0%{background-position:0% center}100%{background-position:200% center}}
  @keyframes floatTitle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .topNav{ display:flex; gap:8px; }
  .navRound{ width:36px; height:36px; border-radius:999px; border:1px solid rgba(200,225,240,.6); background:rgba(255,255,255,.9); color:#a80d27; display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 12px rgba(74,161,205,.08); font-weight:900;}
  .sectionRow__more{ display:flex; justify-content:flex-end; align-items:center; }
  .moreBtn{ border:0; background:linear-gradient(90deg,var(--accent-mid),var(--accent-soft)); color:#a80d27; padding:.55rem 1.1rem; border-radius:999px; font-weight:800; letter-spacing:.3px; cursor:pointer; box-shadow:0 6px 16px rgba(74,161,205,.25); }

  .carousel{ position:relative; padding:8px 0; }
  .carousel--bleed-right{ margin-right: clamp(-24px, -6vw, -120px); padding-right: clamp(24px, 8vw, 160px); }
  .carousel__track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px; }
  .card{ flex:0 0 220px; background:var(--panel); border:1px solid rgba(200,225,240,.6); border-radius:14px;  text-decoration:none; color:inherit; box-shadow:0 4px 16px rgba(74,161,205,.08); transition:transform .18s, box-shadow .18s, border-color .18s; min-width:0; }
  .card__thumb{ aspect-ratio:1/1; background:#f7f9fc; background-size:cover; background-position:center; }
  .card__meta{ padding:10px 8px; font-size:12px; color:var(--muted); text-align:center }

  /* ===== 슬롯 카드 디자인 ===== */
  .slot-mount{ margin-top:12px; }
  .slotZone{}
  .game-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; list-style:none; padding:0; margin:0; }
  .game-list .item.play_slot{ position:relative; border:1px solid rgba(200,225,240,.6); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 4px 16px rgba(74,161,205,.08); transition:transform .18s, box-shadow .18s, border-color .18s; }
  .game-list .item.play_slot:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(74,161,205,.15); border-color:rgba(74,161,205,.3); }
  .game-list .item .pic{ position:relative; }
  .game-list .item .thumbPath{ width:100%; height:140px; object-fit:cover; display:block; }
  .game-list .item .ppPro{ position:absolute; inset:auto 8px 8px auto; width:36px; height:18px; border-radius:4px; background:rgba(0,0,0,.2); display:none; }
  .logoFrame.pc{ position:absolute; left:8px; top:8px; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; border:1px solid rgba(200,225,240,.6); }
  .logoFrame .ico{ width:22px; height:22px; background: var(--bg-url) center/contain no-repeat; }
  .mask.pc{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)); transition:opacity .18s; }
  .item:hover .mask.pc{ opacity:1; }
  .mask .imgFrame{ position:absolute; left:8px; bottom:8px; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; border:1px solid rgba(200,225,240,.6); }
  .mask .imgFrame .ico{ width:20px; height:20px; background: var(--bg-url) center/contain no-repeat; }
  .mask .gogo{ padding:.4rem .7rem; border-radius:999px; background:#fff; color:#0f172a; font-weight:800; border:1px solid rgba(200,225,240,.7); box-shadow:0 4px 12px rgba(0,0,0,.12); }
  .item .name{ padding:8px 10px 10px; font-size:.95rem; font-weight:700; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
  .item .name .favour{ width:10px; height:10px; border-radius:50%; background:linear-gradient(180deg,#ffd36b,#d8b451); display:inline-block; }
  .tb_empty{ grid-column:1/-1; text-align:center; border:1px dashed rgba(200,225,240,.7); padding:24px; border-radius:12px; background:#fff; }
  .tb_empty .pic img{ width:80px; opacity:.8 }
    /* 가로 트랙 기본 */
  .carousel__track, .game-list.carousel__track {
    display:flex; gap:12px; padding:4px;
    overflow:hidden;         /* 기본은 숨김 */
    scroll-behavior:smooth;
  }
  /* 카드 6+ 일 때만 스크롤 가능 */
  .carousel__track.is-scroll {
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type:x mandatory;
  }
  .carousel__track .item {
    flex:0 0 auto; width:180px; scroll-snap-align:start;
  }
  @media (max-width: 768px){
    .carousel__track .item { width:150px; }
  }

  /* 화살표 비활성 */
  .navRound[disabled] { opacity:.35; cursor:not-allowed; }

  /* 모달 내부 그리드 */
  #gamesModal .game-grid {
    display:grid; gap:12px;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  }
  #gamesModal .gcard {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px; padding:8px;
  }
  #gamesModal .gcard .pic {
    position:relative; overflow:hidden; border-radius:10px;
    aspect-ratio: 1/1; /* 정사각형 썸네일 */
  }
  #gamesModal .gcard .pic img { width:100%; height:100%; object-fit:cover; display:block; }
  .play_slot{
    cursor: pointer;
  }
  #gamesModal .gcard .name { margin-top:8px; font-size:13px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #gamesModal .gcard, #gamesModal .gcard * { pointer-events: auto !important; cursor: pointer; }

.hero .hero-slide{
  background-size: cover;
  background-position: center;
}
.hide-banner-btn{
  position:absolute; right:12px; top:12px;
  padding:.4rem .6rem; font-size:.85rem; line-height:1;
  border-radius:10px; backdrop-filter: blur(6px);
}
.jackpot{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  padding:.35rem .6rem; border-radius:12px;
  background: rgba(0,0,0,.45); color:#fff; font-weight:700;
  font-size: clamp(14px, 3.2vw, 18px);
}
.jackpot .amount{ letter-spacing:.5px; }

/* ========= 공지 마퀴(모바일 상단 간격/겹침 방지) ========= */
.marquee.container{
  margin-top: 8px;
}
.marquee.container.ma2 marquee{
  display:block; padding: 4px 0;
  font-size: clamp(12px, 3.2vw, 14px);
}


/* ========= 섹션 타이틀/네비 ========= */
.sectionRow{
  padding: 16px var(--mobile-pad) 8px;
}
.sectionRow__top{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center;
  gap:10px; margin-bottom:10px;
}
.sectionRow__title .ttl{
  /* 제목이 길어도 한 줄로 안전 */
  font-weight: 800;
  font-size: clamp(14px, 4.2vw, 22px);
  letter-spacing:.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topNav .navRound{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; padding:0;
}
.sectionRow__more .moreBtn{
  padding:.35rem .6rem; border-radius:10px;
  font-size: clamp(12px, 3.4vw, 13px);
  z-index: 8000;
}

/* ========= 캐러셀 트랙/카드 ========= */
.carousel{ padding-right: var(--mobile-pad); }
.carousel__track,
.game-list.carousel__track{
  gap:10px; padding: 2px 0 6px;
}
.carousel__track .item{
  flex:0 0 auto;
  width: clamp(136px, 42vw, 180px); /* 모바일에서 2~3장 보이게 */
}
.item .pic{ border-radius:12px; overflow:hidden; }
.item .pic img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1/1; }
.item .name{
  margin-top:6px; font-weight:600;
  font-size: clamp(12px, 3.2vw, 14px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* PC 전용 오버레이는 모바일에서 과감히 숨김 */
@media (max-width: 576px){
  .item .mask.pc, .item .logoFrame.pc{ display:none !important; }
}

/* ========= 모달(ALL GAMES) ========= */
#gamesModal .modal-dialog{ margin: 8px; width:auto; max-width:none; }
#gamesModal .modal-content{ border-radius:16px; }
#gamesModal .modal-header .modal-title{
  font-size: clamp(15px, 4.4vw, 20px); font-weight:800;
}
#gamesModal .game-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(4, minmax(0,1fr)); /* 기본 2열 */
}
#gamesModal .gcard{
  border-radius:14px; padding:8px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
#gamesModal .gcard .pic{ border-radius:10px; overflow:hidden; }
#gamesModal .gcard .pic img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1/1; }
#gamesModal .gcard .name{
  margin-top:6px; font-size: clamp(12px, 3.2vw, 14px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 더 작은 화면일 때(아이폰 SE~) 2열 유지, 400px↑ 3열 */
@media (min-width: 400px){
  #gamesModal .game-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 560px){
  #gamesModal .game-grid{ grid-template-columns: repeat(20, minmax(0,1fr)); }
}

/* ========= 기타 안전 장치 ========= */
/* 포인터 차단으로 클릭 막히는 케이스 방지 */
#gamesModal .gcard, #gamesModal .gcard *{ pointer-events:auto; }
/* 터치 스크롤 감도 개선 */
.carousel__track.is-scroll{ -webkit-overflow-scrolling: touch; scroll-snap-type:x mandatory; }
.carousel__track.is-scroll .item{ scroll-snap-align: start; }
.category-card{
  z-index: 8001;
}
  .grid2{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
  @media (max-width:1200px){ .grid2{ grid-template-columns: repeat(3,1fr); } }
  @media (max-width:1000px){ .grid2{ grid-template-columns: repeat(3,1fr); } }
  @media (max-width:760px){  .grid2{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:520px){  .grid2{ grid-template-columns: repeat(1,1fr); } }
  .gri2 .card{ flex:1 1 auto; }
  .grid2 .card .card__thumb{ aspect-ratio:1/1; }
  .grid2 .card .card__meta{ font-size:12px; }
  #site-footer .ft-scroll{
  border-top:1px solid var(--line);
  background:#fff;
  overflow:hidden;
  /* 좌/우 버튼, TOP 버튼과 겹치지 않게 여백 조절하고 싶으면 padding 추가 */
}
#site-footer .ft-scroll-track{
  display:flex;
  width:calc(4032px * 2);           /* 원본 배너(4032px)를 2장 이어붙임 */
  will-change: transform;
  animation: ftScroll var(--ft-dur, 40s) linear infinite;
  animation-direction: var(--ft-dir, normal); /* left: normal | right: reverse */
}
#site-footer .ft-scroll img{
  height:var(--ft-h, 128px);
  width:auto;
  flex:0 0 auto;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none; /* 배너 위 클릭 방지 */
}
#site-footer .ft-scroll:hover .ft-scroll-track{
  animation-play-state: paused;     /* 호버 시 일시정지 */
}

@keyframes ftScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-4032px); } /* 한 장 너비만큼 이동 */
}

/* 반응형: 모바일에서 배너 높이 조금 낮게 */
@media (max-width: 768px){
  #site-footer .ft-scroll{ border-top:1px solid var(--line); }
  #site-footer .ft-scroll img{ height: min(160px, var(--ft-h, 208px)); }
}#site-footer .ft-scroll-bg{
  border-top:1px solid var(--line);
  height:var(--ft-h, 208px);
  background-image: var(--ft-img);
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: auto 100%;
  animation: ftBgScroll var(--ft-dur, 40s) linear infinite;
  animation-direction: var(--ft-dir, normal); /* left: normal / right: reverse */
  /* 클릭 방지 원하면 아래 주석 해제
  pointer-events:none;
  */
}
#site-footer .ft-scroll-bg:hover{
  animation-play-state: paused; /* 호버 시 일시정지(선택) */
}
@keyframes ftBgScroll{
  from { background-position-x: 0; }
  to   { background-position-x: calc(var(--ft-w, 4032px) * -1); } /* 한 타일 폭만큼 이동 */
}

/* 모바일에서 높이 조금 낮추고 싶을 때 */
@media (max-width: 768px){
  #site-footer .ft-scroll-bg{
    height: min(160px, var(--ft-h, 208px));
  }
}