/* [Home 전용] Hero/Sports Center 실이미지 + Home 브레이크포인트 반응형 */
@media (min-width:1440px) and (hover:hover) and (pointer:fine){
  .hero-side-nav { display:flex; align-items:center; justify-content:center; }
}
@media (min-width:768px){
  .hero-slide-brand { background-size:auto 94%; background-position:right center; }
  .spc { --spc-asset:url('../assets/ESS83_Sports_Center.png'); background-position:center,center,66% center; }
  .spc-hero { padding-right:200px; }
}
@media (min-width:768px) and (max-width:1199px){
  .spc { --spc-asset:url('../assets/ESS83_Sports_Center_mobile.png'); background-size:cover,cover,auto 155%; background-position:center,center,calc(100% - 24px) 48%; padding-top:16px; }
  .spc-hero { min-height:92px; padding-left:20px; padding-right:43%; margin-bottom:8px; }
  .spc-grid { gap:8px; padding-left:20px; padding-right:20px; margin-bottom:10px; }
  .spc-item { min-height:68px; padding:8px 6px 7px; gap:4px; }
  .spc-ico { width:24px; height:24px; }
  .spc-ico svg { width:23px; height:23px; }
  .spc-lbl { font-size:10px; }
  .spc-desc { font-size:8px; margin-top:-2px; }
}
@media (min-width:1200px){
  .hero-slide-brand { background-size:auto 94%; background-position:right center; }
  .spc { --spc-asset:url('../assets/ESS83_Sports_Center.png'); background-size:cover,cover,cover; background-position:center,center,center center; }
  .spc-hero { padding-right:230px; }
}
@media (max-width:389px){
  .cat-ico svg { width:22px; height:22px; }
  .spc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;
    padding-left:10px; padding-right:10px; }
  .spc-item { min-height:74px; padding:9px 5px 8px; }
  .spc-lbl { white-space:normal; overflow:visible; text-overflow:clip; }
  .spc-desc { white-space:normal; }
}
@media (max-width:360px){
  .cat-bar { gap:6px; }
  .qv-wrap { grid-template-columns:1fr; gap:10px; padding-left:10px; padding-right:10px; }
  .qm-grid { grid-template-columns:repeat(3,1fr); }
  .vip-card { min-height:auto; }
  .spc-hero { padding-left:12px; padding-right:120px; min-height:104px; }
  .spc-player { width:126px; height:126px; right:-4px; }
  .spc-ttl { font-size:21px; }
  .spc-desc-txt { font-size:10px; }
  .hero, .hero-slide { height:166px; }
  .hero-body { width:61%; padding-left:14px; }
  .hero-ev-body { width:65%; padding-left:14px; }
  .hero-h1 { font-size:21px; }
  .hero-ev-ttl { font-size:17px; }
  .hero-sub, .hero-ev-sub { font-size:10px; }
  .hero-visual { width:118px; }
  .hero-art, .hero-ev-art { width:118px; height:132px; }
  .ggc { width:88px; }
  .ggc-img { width:88px; height:88px; }
  .gc-row { gap:8px; padding-left:10px; padding-right:10px; }
}
@media (min-width:768px){
  .hero, .cat-bar, .qv-wrap, .spc, .sec, .game-sec {
    padding-left:var(--page-pad-tablet); padding-right:var(--page-pad-tablet);
  }
  .cat-bar { margin-top:16px; }
  .qv-wrap { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:stretch; }
  .gc-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--card-gap); overflow:visible; }
  .gc-row .ggc { width:100%; min-width:0; }
  .ggc-img { width:100%; height:auto; aspect-ratio:1/1; }
}
@media (min-width:1024px){
  .gc-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (min-width:1200px){
  .app-main > .hero-nav-wrap > .hero { margin-top:0; border-radius:18px; overflow:hidden; }
  .app-main > .hero-nav-wrap > .hero, .app-main > .cat-bar, .app-main > .qv-wrap, .app-main > .spc, .app-main > .sec, .app-main > .game-sec {
    padding-left:0; padding-right:0;
  }
  .qv-wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:stretch; }
  .gc-row {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,176px));
    justify-content:space-between;
    gap:0;
    overflow:visible;
    /* [Card Grid Final] Row 폭 상한 + 중앙 정렬.
       Right Rail이 없는 1200~1439 구간은 Main이 최대 1107px까지 넓어져
       space-between 간격이 과도하게 벌어짐(카드 그룹 응집 붕괴).
       Row 폭을 calc(100% - 32px)/max-width 804px로 제한(좌우 16px 안전 여백)해
       margin-inline:auto로 카드 그룹을 Main 중앙에 정렬.
       [B안] Mobile 캐러셀용 padding:0 16px를 Desktop에서 해제 —
       .game-sec-hd(padding 0)와 실제 콘텐츠 기준선을 정확히 일치시키기 위함.
       Mobile/Tablet의 16px padding은 그대로 유지.
       카드 크기 176px·4열 구조·이미지 1:1 비율은 불변. */
    width:calc(100% - 32px);
    max-width:804px;
    margin-inline:auto;
    padding-left:0;
    padding-right:0;
  }
  .gc-row .ggc { width:100%; max-width:176px; min-width:0; }
  .ggc-img { width:100%; height:auto; aspect-ratio:1/1; }
  .game-sec-hd {
    width:calc(100% - 32px);
    max-width:804px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
  .spc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero, .hero-slide { height:220px; }
  .hero-body { width:52%; padding:16px 28px 0; }
  .hero-ev-body { width:56%; padding:20px 28px 0; }
  .hero-h1 { font-size:30px; line-height:1.1; }
  .hero-ev-ttl { font-size:24px; line-height:1.12; }
  .hero-sub, .hero-ev-sub { font-size:13px; }
  .hero-visual { width:189px; }
  .hero-art, .hero-ev-art { width:189px; height:100%; object-fit:contain; object-position:bottom right; }
  .spc-hero { min-height:56px; padding:4px 200px 4px 24px; }
  .spc-player { width:200px; height:196px; right:-6px; }
  .spc-ttl { font-size:21px; }
  .spc-sub { font-size:12px; }
  .spc-desc-txt { font-size:11px; }
  .spc-item { min-height:46px; padding:6px 8px 6px; gap:5px; }
  .spc-ico { width:26px; height:26px; }
  .spc-ico svg { width:24px; height:24px; }
  .spc-lbl { font-size:11px; line-height:1.25; font-weight:700; }
  .spc-desc { font-size:9px; line-height:1.25; margin-top:-2px; }
  .spc-badge { top:6px; left:6px; font-size:7px; padding:2px 5px; }
}
@media (min-width:1440px){
  .spc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero, .hero-slide { height:220px; }
  .hero-body { width:52%; padding:18px 28px 0; }
  .hero-ev-body { width:56%; padding:22px 28px 0; }
  .hero-h1 { font-size:32px; }
  .hero-ev-ttl { font-size:25px; }
  .hero-sub, .hero-ev-sub { font-size:13px; }
  .hero-visual { width:198px; }
  .hero-art, .hero-ev-art { width:198px; height:100%; object-fit:contain; object-position:bottom right; }
  .spc-hero { min-height:56px; }
  .spc-item { min-height:46px; padding:6px 8px 6px; }
  .spc-ico { width:26px; height:26px; }
  .spc-ico svg { width:24px; height:24px; }
  .spc-lbl { font-size:11px; }
  .spc-desc { font-size:9px; }
}
@media (hover:hover) and (pointer:fine) and (min-width:1200px){
  .cat-item { transition:background-color .15s ease, border-color .15s ease; }
  .cat-item:hover { background-color:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); }
  .cat-item.on:hover { background-color:rgba(212,175,90,.11); border-color:rgba(212,175,90,.28); }
  .qm-item { transition:background-color .15s ease, border-color .15s ease; }
  .qm-item:hover { background-color:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); }
  .qm-item:hover .qm-lbl { color:rgba(255,255,255,.72); }
  .vip-card {
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .vip-card:hover {
    border-color:rgba(212,175,90,.28);
    box-shadow:0 12px 34px rgba(0,0,0,.48), 0 0 0 1px rgba(212,175,90,.08);
  }
  .spc-item {
    transition:transform .16s ease, background .16s ease,
               border-color .16s ease, box-shadow .16s ease;
  }
  .spc-item:hover {
    transform:translateY(-4px);
    background:rgba(26,86,219,.14);
    border-color:rgba(59,124,244,.34);
    box-shadow:0 12px 28px rgba(0,0,0,.38);
  }
  .ggc { transition:transform .16s ease, opacity .16s ease; }
  .ggc-img { transition:border-color .16s ease, box-shadow .16s ease; }
  .ggc:hover { transform:translateY(-4px); }
  .ggc:hover .ggc-img {
    border-color:rgba(255,255,255,.15);
    box-shadow:0 14px 32px rgba(0,0,0,.44);
  }
  .vip-btn, .vip-guest-btn { transition:background .16s ease, border-color .16s ease; }
  .vip-btn:hover, .vip-guest-btn:hover {
    background:rgba(212,175,90,.08);
    border-color:rgba(212,175,90,.42);
  }
  .sec-more, .game-sec-more, .gc-toggle { transition:color .16s ease; }
  .sec-more:hover, .game-sec-more:hover, .gc-toggle:hover { color:rgba(255,255,255,.70); }
}
@media (max-width:360px){
  .hero-ev-body { width:calc(100% - 126px); }
  .hero-ev-ttl, .hero-ev-sub { overflow-wrap:break-word; word-break:keep-all; }
}
@media (max-width:340px){
  .hero-ev-body { width:calc(100% - 116px); }
  .hero-visual, .hero-ev-art { width:112px; }
  .hero-ev-art { height:126px; }
}
@media (max-width:320px){
  .hero, .hero-slide { height:160px; }
  .hero-body { width:calc(100% - 104px); padding-left:12px; }
  .hero-ev-body { width:calc(100% - 104px); padding-left:12px; }
  .hero-h1 { font-size:19px; }
  .hero-ev-ttl { font-size:16px; }
  .hero-sub, .hero-ev-sub { font-size:9.5px; }
  .hero-visual { width:100px; }
  .hero-art, .hero-ev-art { width:100px; height:118px; }
}
@media (max-width:339px){
  .cat-lbl { font-size:9px; }
  .cat-item { min-height:58px; }
  .cat-ico svg { width:20px; height:20px; }
  .qm-item { height:58px; }
  .qm-ico svg { width:19px; height:19px; }
  .spc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
}
@media (min-width:340px) and (max-width:360px){
  .hero, .hero-slide { height:176px; }
  .hero-body { width:58%; padding:7px 14px 0; }
  .hero-ev-body { width:calc(100% - 116px); padding:14px 12px 0; }
  .hero-h1 { font-size:22px; line-height:1.08; }
  .hero-ev-ttl { font-size:18px; line-height:1.08; }
  .hero-sub, .hero-ev-sub { font-size:10px; line-height:1.38; }
  .hero-visual { width:112px; }
  .hero-art, .hero-ev-art { width:112px; height:132px; }
  .hero-ev-sub { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cat-lbl { font-size:9px; }
  .qv-wrap { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:14px 10px 15px; align-items:stretch; }
  .qm-card { min-width:0; padding:12px 7px 12px; }
  .qm-eye { margin-bottom:10px; font-size:9px; }
  .qm-lbl { font-size:9px; }
  .vip-card { min-width:0; min-height:auto; padding:13px 10px 12px; }
  .vip-guest { min-height:100%; }
  .vip-guest-eye { font-size:8px; margin-bottom:7px; }
  .vip-guest-ttl { font-size:12px; line-height:1.35; }
  .vip-guest-sub { font-size:9px; line-height:1.45; margin-bottom:9px; }
  .vip-guest-btn, .vip-btn { height:30px; font-size:9px; padding-left:4px; padding-right:4px; }
  .spc-hero { min-height:108px; padding-left:12px; padding-right:132px; }
  .spc-player { width:138px; height:136px; right:-4px; }
  .spc-ttl { font-size:23px; }
  .spc-sub { font-size:11px; }
  .spc-desc-txt { font-size:10px; }
  .spc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding-left:10px; padding-right:10px; }
  .spc-item { min-width:0; min-height:78px; padding:9px 2px 8px; gap:5px; }
  .spc-ico { width:25px; height:25px; }
  .spc-ico svg { width:24px; height:24px; }
  .spc-lbl { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .spc-desc { font-size:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .spc-badge { top:4px; left:3px; padding:1px 3px; font-size:6px; }
  .ggc { width:92px; }
  .ggc-img { width:92px; height:92px; }
  .gc-row { gap:9px; padding-left:10px; padding-right:10px; }
}
@media (min-width:361px) and (max-width:389px){
  .cat-lbl { font-size:9px; }
  .spc-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));   /* 4열 1행 */
    gap:5px; padding-left:12px; padding-right:12px;
  }
  .spc-item { min-width:0; min-height:78px; padding:9px 3px 8px; }
  .spc-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9px; }
  .spc-desc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:7px; }
  .spc-badge { top:4px; left:3px; padding:1px 3px; font-size:6px; }
}
@media (prefers-reduced-motion:reduce){
  .ggc, .hero-track { transition:none !important; }
}
@media (max-width:767px){
  .cat-bar { margin-top:16px; }
  .cat-bar { margin-left:12px; margin-right:12px; width:auto; }
  .qv-wrap { padding-left:12px; padding-right:12px; }
  .spc { margin-left:12px; margin-right:12px; width:auto; border-radius:12px; }
  .game-sec-hd { padding-left:16px; padding-right:16px; }
  .game-sec:not(.pt-sec) .gc-row {
    margin-left:16px; margin-right:16px;
    padding-left:0; padding-right:0;
    width:auto;
  }
  .qv-wrap {
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:10px;
    align-items:stretch;
  }
  .qm-item { height:52px; gap:4px; padding:5px 3px; }
  .qm-ico { width:21px; height:21px; }
  .qm-ico svg { width:19px; height:19px; }
  .qm-lbl { font-size:9px; white-space:nowrap; }
  .game-sec:not(.pt-sec) .gc-row::-webkit-scrollbar {
    display:none;
  }
  .game-sec:not(.pt-sec) .gc-row .ggc {
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  .game-sec:not(.pt-sec) .gc-row:not(.is-expanded) .ggc {
    width:96px;
  }
  .game-sec:not(.pt-sec) .gc-row:not(.is-expanded) .ggc-img {
    width:96px;
    height:auto;
    aspect-ratio:1 / 1;
  }
  .game-sec:not(.pt-sec) .gc-row.is-expanded {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,96px));
    justify-content:space-between;
    gap:14px 8px;
    overflow:visible;
    scroll-snap-type:none;
  }
  .game-sec:not(.pt-sec) .gc-row.is-expanded .ggc {
    width:100%;
    max-width:96px;
    min-width:0;
  }
  .game-sec:not(.pt-sec) .gc-row.is-expanded .ggc-img {
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }
}
@media (max-width:320px){
  .game-sec:not(.pt-sec) .gc-row:not(.is-expanded) .ggc { width:88px; }
  .game-sec:not(.pt-sec) .gc-row:not(.is-expanded) .ggc-img { width:88px; }
  .game-sec:not(.pt-sec) .gc-row.is-expanded {
    grid-template-columns:repeat(3,minmax(0,92px));
  }
  .game-sec:not(.pt-sec) .gc-row.is-expanded .ggc { max-width:92px; }
}
@media (min-width:768px){
  .game-sec:not(.pt-sec):not(.is-expanded) > .gc-row .ggc:nth-child(n+5) {
    display:none;
  }
  .game-sec:not(.pt-sec).is-expanded > .gc-row .ggc {
    display:block;
  }
}
@media (min-width:1200px){
  .game-sec:not(.pt-sec).is-expanded > .gc-row {
    row-gap:24px;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .cat-lbl { font-size:11px; font-weight:500; }
  .cat-ico svg { width:24px; height:24px; }
  .cat-item { min-height:64px; }
  .qm-lbl { font-size:11px; font-weight:500; }
  .qm-ico svg { width:22px; height:22px; }
  .qm-item { min-height:62px; }
  .qm-eye { font-size:10px; }
  .vip-grade { font-size:14px; }
  .vip-next { font-size:11px; }
  .vip-wal-lbl { font-size:10px; }
  .vip-wal-val { font-size:14px; }
  .vip-btn { font-size:11px; height:34px; }
  .sec-ttl { font-size:17px; font-weight:700; }
  .game-sec-ttl { font-size:17px; font-weight:700; }
  .sec-more, .game-sec-more { font-size:13px; font-weight:500; }
  .ggc-name { font-size:13px; font-weight:600; }
  .ggc-prov { font-size:11px; font-weight:400; }
}