/* ==========================================================================
   theme-skins-2 — 새 테마 30종용 배너 12가지 · 입구 카드 8가지 (2026-09-30 오후)
   모든 색은 테마 값만 쓴다 — 그래서 한 디자인을 여러 테마가 다른 색으로 나눠 쓴다.
     --hero-bg / --hero-bg-2 : 배너 바탕   --hero-slab : 포인트(면)   --hero-num : 포인트 위 글자
     --hero-kick : 배너 위 강조 글자      --hero-stripe : 보조 포인트  --accent-2 : 보조색
   배너  stadium · split · ticket · scoreboard · kinetic · court · track · bento · pop · glass · neon · podium
   카드  glass · ticket · led · block · outline · pill · tab · bento
   ========================================================================== */

/* 새 배너 공통 — 기본 사선 면 · 줄 · 조명 · 경기장 선 · 잔상 · 점 무늬 · 모서리 표식을 끄고 필요한 것만 다시 켠다 */
:root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]){
  --A: var(--hero-slab); --B: var(--hero-stripe); --K: var(--hero-kick); --N: var(--hero-num); --H: var(--hero-bg); --H2: var(--hero-bg-2);
}
:root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"])
  :is(.hero__slab, .hero__stripe, .hero__light, .hero__pitch){ display:none; }
:root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero::before,
:root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero::after,
:root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__big b::before{ display:none; }
:root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"])
  .hero__big span{ transform:none; }
/* 기하학 글꼴(geo) 테마의 윗 문구 네모 칸은 새 배너에서 쓰지 않는다 — 글자색은 배너마다 정한다 */
:root[data-style="geo"]:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
         [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"])
  .hero__kicker{ padding:0; background:none; transform:none; font-size:14px; letter-spacing:.2em; }


/* ==========================================================================
   1. stadium — 밤 경기장: 양쪽 위 조명탑 빛줄기 · 아래 관중석 불빛 · 지평선 · 빛나는 큰 숫자
   ========================================================================== */
:root[data-hero="stadium"] .hero{
  background:
    radial-gradient(70% 60% at 50% 115%, color-mix(in srgb, var(--A) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--H) 80%, #000), var(--H2));
}
/* 조명탑 빛줄기 — 왼쪽 위 · 오른쪽 위에서 비스듬히 */
:root[data-hero="stadium"] .hero__light{
  display:block;
  background:
    radial-gradient(circle at 7% -4%, #fff 0 5px, rgb(255 255 255 / .5) 7px, transparent 26px),
    radial-gradient(circle at 93% -4%, #fff 0 5px, rgb(255 255 255 / .5) 7px, transparent 26px),
    conic-gradient(from 136deg at 7% -4%, transparent 0deg, rgb(255 255 255 / .09) 6deg, rgb(255 255 255 / .02) 26deg, transparent 32deg),
    conic-gradient(from 192deg at 93% -4%, transparent 0deg, rgb(255 255 255 / .02) 6deg, rgb(255 255 255 / .09) 26deg, transparent 32deg);
}
/* 관중석 불빛 — 아래 흐린 점들 */
:root[data-hero="stadium"] .hero__stage::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:
    radial-gradient(circle, rgb(255 255 255 / .55) 0 1.4px, transparent 2px) 0 0 / 23px 17px,
    radial-gradient(circle, color-mix(in srgb, var(--A) 70%, transparent) 0 1.4px, transparent 2px) 11px 8px / 31px 21px;
  filter:blur(.6px);
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 90%); mask-image:linear-gradient(to top, #000 10%, transparent 90%);
  opacity:.55;
}
/* 지평선 — 빛나는 가는 선 */
:root[data-hero="stadium"] .hero__stage::after{
  content:""; position:absolute; left:0; right:0; bottom:34%; height:2px;
  background:linear-gradient(90deg, transparent, var(--A) 30%, var(--A) 70%, transparent);
  box-shadow:0 0 18px var(--A); opacity:.7;
}
:root[data-hero="stadium"] .hero__pitch{ display:block; opacity:.1; color:#fff; }
:root[data-hero="stadium"] .hero__big{ color:#fff; }
:root[data-hero="stadium"] .hero__big b{ text-shadow:0 0 40px color-mix(in srgb, var(--A) 70%, transparent), 0 6px 0 rgb(0 0 0 / .35); }
:root[data-hero="stadium"] .hero__big i{ color:var(--A); }
:root[data-hero="stadium"] .hero__big span{ background:var(--A); color:var(--N); }
:root[data-hero="stadium"] .hero__kicker{ color:var(--K); }


/* ==========================================================================
   2. split — 대각선으로 반 가른 포스터: 왼쪽 포인트 색 판(진한 글자) · 오른쪽 어두운 판(윤곽 숫자) · 이음매에 보조색 선
   ========================================================================== */
:root[data-hero="split"] .hero{ background:linear-gradient(120deg, var(--H), var(--H2)); }
:root[data-hero="split"] .hero__slab{
  display:block; left:0; right:auto; top:0; bottom:0; width:58%; clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%);
  background:
    repeating-linear-gradient(-70deg, rgb(0 0 0 / .05) 0 2px, transparent 2px 16px),
    radial-gradient(80% 90% at 20% 10%, color-mix(in srgb, var(--A) 80%, #fff), var(--A) 70%);
}
:root[data-hero="split"] .hero__stripe--1, :root[data-hero="split"] .hero__stripe--2{
  display:block; left:calc(52.8% - 4px); right:auto; top:-5%; bottom:-5%; width:8px; opacity:1; transform:skewX(-18deg); background:var(--accent-2);
}
:root[data-hero="split"] .hero__stripe--2{ left:calc(52.8% + 14px); width:3px; opacity:.6; }
:root[data-hero="split"] .hero__slide{ grid-template-columns:52% 1fr; }
:root[data-hero="split"] .hero__copy{ color:var(--N); }
:root[data-hero="split"] .hero__kicker{ color:var(--N); }
:root[data-hero="split"] .hero__kicker::before{ background:var(--N); }
:root[data-hero="split"] .hero__title{ color:var(--N); }
:root[data-hero="split"] .hero__sub{ color:color-mix(in srgb, var(--N) 72%, transparent); }
:root[data-hero="split"] .hero .btn--gold{ background:var(--H); border-color:var(--H); color:#fff; }
:root[data-hero="split"] .hero__cta .btn:not(.btn--gold){ color:var(--N); border-color:color-mix(in srgb, var(--N) 45%, transparent); }
:root[data-hero="split"] .hero__dot, :root[data-hero="split"] .hero__meta{ color:color-mix(in srgb, var(--N) 55%, transparent); }
:root[data-hero="split"] .hero__dot.is-on, :root[data-hero="split"] .hero__meta b{ color:var(--N); }
:root[data-hero="split"] .hero__dot.is-on::after{ background:var(--N); }
:root[data-hero="split"] .hero__meta span::before{ background:var(--N); }
/* 오른쪽 — 흰 윤곽 큰 숫자 + 포인트 색 겹침 */
:root[data-hero="split"] .hero__big{ color:transparent; padding-right:8%; }
:root[data-hero="split"] .hero__big b{ -webkit-text-stroke:2px #fff; text-shadow:10px 10px 0 color-mix(in srgb, var(--A) 55%, transparent); }
:root[data-hero="split"] .hero__big i{ -webkit-text-stroke:0; color:var(--accent-2); }
:root[data-hero="split"] .hero__big span{ background:var(--A); color:var(--N); }
:root[data-hero="split"] .hero__word{
  display:block; position:absolute; right:-1%; left:50%; bottom:-.18em; z-index:0; white-space:nowrap; overflow:hidden; pointer-events:none;
  font-family:var(--font-display); font-size:150px; font-weight:800; font-style:var(--display-italic); line-height:1; color:rgb(255 255 255 / .05);
}


/* ==========================================================================
   3. ticket — 베팅 티켓: 크림색 종이 · 오른쪽 절취선(구멍 · 반원 홈) · 도장 찍힌 라벨 · 바코드
   ========================================================================== */
:root[data-hero="ticket"]{ --paper:#f6f2e8; --ink:#16171b; }
:root[data-hero="ticket"] .hero{ background:linear-gradient(120deg, var(--H), var(--H2)); }
:root[data-hero="ticket"] .hero__slab{
  display:block; inset:24px 28px; width:auto; clip-path:none; border-radius:10px;
  background:
    radial-gradient(circle at 70% 0, var(--H) 0 16px, transparent 16.5px),
    radial-gradient(circle at 70% 100%, var(--H) 0 16px, transparent 16.5px),
    radial-gradient(circle, var(--H) 0 4px, transparent 4.5px) calc(70% - 8px) 10px / 16px 18px repeat-y,
    radial-gradient(90% 120% at 0% 0%, #fffdf6, transparent 60%),
    var(--paper);
  box-shadow:0 20px 40px -24px #000;
}
/* 바코드 — 떼는 쪽 아래 */
:root[data-hero="ticket"] .hero__stage::after{
  content:""; position:absolute; right:calc(28px + 5%); bottom:44px; width:150px; height:34px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px);
  opacity:.85;
}
:root[data-hero="ticket"] .hero__slide{ inset:24px 28px; grid-template-columns:70% 1fr; }
:root[data-hero="ticket"] .hero__copy{ color:var(--ink); padding-left:40px; }
:root[data-hero="ticket"] .hero__kicker{ color:var(--ink); font-style:normal; letter-spacing:.2em; }
:root[data-hero="ticket"] .hero__kicker::before{ width:10px; height:10px; transform:none; background:var(--A); }
:root[data-hero="ticket"] .hero__title{ color:var(--ink); }
:root[data-hero="ticket"] .hero__sub{ color:#5b5a57; }
:root[data-hero="ticket"] .hero .btn--gold{ background:var(--ink); border-color:var(--ink); color:var(--paper); box-shadow:none; }
:root[data-hero="ticket"] .hero__cta .btn:not(.btn--gold){ color:var(--ink); border:1.5px dashed var(--ink); }
:root[data-hero="ticket"] .hero__big{ color:var(--ink); padding:0 0 40px; justify-self:center; }
:root[data-hero="ticket"] .hero__big b{ font-size:96px; }
:root[data-hero="ticket"] .hero__big.is-long b{ font-size:62px; }
:root[data-hero="ticket"] .hero__big i{ color:var(--A); -webkit-text-stroke:1.5px var(--ink); }
/* 도장 — 비스듬히 찍힌 테두리 글자 */
:root[data-hero="ticket"] .hero__big span{
  margin-top:10px; padding:4px 12px; background:none; color:var(--accent-2); border:2.5px solid currentColor; border-radius:4px;
  rotate:-8deg; letter-spacing:.14em; opacity:.9;
}
:root[data-hero="ticket"] .hero__meta{ top:44px; left:68px; color:#8a877f; }
:root[data-hero="ticket"] .hero__meta b{ color:var(--ink); }
:root[data-hero="ticket"] .hero__meta span::before{ background:var(--A); }
:root[data-hero="ticket"] .hero__dots{ left:68px; bottom:44px; }
:root[data-hero="ticket"] .hero__dot{ color:#a19d93; }
:root[data-hero="ticket"] .hero__dot.is-on{ color:var(--ink); }
:root[data-hero="ticket"] .hero__dot.is-on::after{ background:var(--ink); }


/* ==========================================================================
   4. scoreboard — 경기장 전광판: 검정 판 · 점으로 찍힌 LED 숫자 · LIVE 시계 · 테두리 볼트
   ========================================================================== */
:root[data-hero="scoreboard"] .hero{
  background:
    radial-gradient(circle, rgb(255 255 255 / .035) 0 1px, transparent 1.4px) 0 0 / 6px 6px,
    linear-gradient(180deg, #0a0c10, #040506);
  box-shadow:inset 0 0 0 6px #14171d, inset 0 0 0 7px rgb(255 255 255 / .06);
}
/* 전광판 판 — 숫자 뒤 */
:root[data-hero="scoreboard"] .hero__slab{
  display:block; top:40px; bottom:40px; right:5%; width:38%; clip-path:none; border-radius:10px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--A) 12%, transparent) 0 1.2px, transparent 1.6px) 0 0 / 7px 7px,
    #07080a;
  box-shadow:inset 0 0 0 2px #1c2028, inset 0 0 30px #000, 0 0 0 1px #000;
}
/* LIVE 시계 — 판 위쪽 */
:root[data-hero="scoreboard"] .hero__stage::after{
  content:"LIVE  90:00"; position:absolute; z-index:1; top:54px; right:calc(5% + 19%); translate:50% 0; white-space:pre;
  font-family:"Courier New", monospace; font-size:20px; font-weight:700; letter-spacing:.2em; color:var(--accent-2);
  text-shadow:0 0 8px var(--accent-2);
  -webkit-mask:radial-gradient(circle, #000 55%, transparent 62%) 0 0 / 4px 4px; mask:radial-gradient(circle, #000 55%, transparent 62%) 0 0 / 4px 4px;
}
:root[data-hero="scoreboard"] .hero__big{ z-index:1; color:var(--A); padding-top:30px; }
:root[data-hero="scoreboard"] .hero__big b, :root[data-hero="scoreboard"] .hero__big i{
  font-family:"Anton", sans-serif; font-style:normal;
  -webkit-mask:radial-gradient(circle, #000 52%, transparent 60%) 0 0 / 7px 7px; mask:radial-gradient(circle, #000 52%, transparent 60%) 0 0 / 7px 7px;
  filter:drop-shadow(0 0 10px var(--A));
}
:root[data-hero="scoreboard"] .hero__big span{ background:none; border:1px solid var(--A); color:var(--A); font-family:"Courier New", monospace; letter-spacing:.24em; text-shadow:0 0 6px var(--A); }
:root[data-hero="scoreboard"] .hero__kicker{ color:var(--A); font-family:"Courier New", monospace; font-style:normal; letter-spacing:.24em; text-shadow:0 0 8px color-mix(in srgb, var(--A) 60%, transparent); }
:root[data-hero="scoreboard"] .hero__kicker::before{ width:8px; height:8px; border-radius:50%; transform:none; background:var(--accent-2); box-shadow:0 0 8px var(--accent-2); }
:root[data-hero="scoreboard"] .hero__meta{ font-family:"Courier New", monospace; font-style:normal; color:color-mix(in srgb, var(--A) 60%, transparent); }
:root[data-hero="scoreboard"] .hero__meta b{ color:var(--A); }
:root[data-hero="scoreboard"] .hero .btn{ border-radius:3px; }
:root[data-hero="scoreboard"] .hero .btn--gold{ box-shadow:0 0 20px color-mix(in srgb, var(--A) 45%, transparent); }


/* ==========================================================================
   5. kinetic — 움직이는 글자: 뒤로 큰 윤곽 숫자가 두 줄로 반대 방향으로 흐르고 · 포인트 색 띠가 비스듬히 가로지른다
   ========================================================================== */
:root[data-hero="kinetic"] .hero{ background:linear-gradient(135deg, var(--H), var(--H2)); }
:root[data-hero="kinetic"] .hero__big{ position:static; color:#fff; padding-right:8%; }
:root[data-hero="kinetic"] .hero__big::before, :root[data-hero="kinetic"] .hero__big::after{
  content:attr(data-echo) "   " attr(data-echo) "   " attr(data-echo) "   " attr(data-echo) "   " attr(data-echo) "   " attr(data-echo) "   " attr(data-echo) "   " attr(data-echo);
  position:absolute; left:0; z-index:-1; white-space:pre; pointer-events:none;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:120px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb, var(--B) 30%, transparent);
  animation:kineticRun 26s linear infinite;
}
:root[data-hero="kinetic"] .hero__big::before{ top:-18px; }
:root[data-hero="kinetic"] .hero__big::after{ bottom:-26px; animation-direction:reverse; -webkit-text-stroke-color:color-mix(in srgb, var(--A) 35%, transparent); }
@keyframes kineticRun{ from{ translate:0 0; } to{ translate:-50% 0; } }
:root[data-hero="kinetic"] .hero__slide{ overflow:hidden; }
:root[data-hero="kinetic"] .hero__big b{ text-shadow:8px 8px 0 var(--A); }
:root[data-hero="kinetic"] .hero__big i{ color:var(--A); }
:root[data-hero="kinetic"] .hero__big span{ background:#fff; color:#0c0c0e; }
/* 포인트 색 띠 — 이 장의 영문을 싣고 비스듬히 가로지른다 */
:root[data-hero="kinetic"] .hero__word{
  display:block; position:absolute; left:-4%; right:-4%; bottom:70px; z-index:0; padding:6px 0 6px 60px; rotate:-2deg; white-space:nowrap; overflow:hidden;
  background:var(--A); color:var(--N); font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:22px; letter-spacing:.3em;
  opacity:.9;
}
:root[data-hero="kinetic"] .hero__kicker{ color:var(--K); }
:root[data-hero="kinetic"] .hero__dots{ left:auto; right:30px; bottom:20px; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="kinetic"] .hero__big::before, :root[data-hero="kinetic"] .hero__big::after{ animation:none; } }


/* ==========================================================================
   6. court — 농구 코트: 나무 결 바닥 · 보조색 코트 선(3점 호 · 자유투 칸 · 원) · 포인트 색 숫자
   ========================================================================== */
:root[data-hero="court"] .hero{
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 21px, transparent 21px 42px),
    radial-gradient(70% 90% at 75% 50%, color-mix(in srgb, var(--A) 22%, transparent), transparent 70%),
    linear-gradient(110deg, var(--H), var(--H2));
}
/* 3점 호 */
:root[data-hero="court"] .hero__slab{
  display:block; clip-path:none; top:50%; bottom:auto; right:-150px; width:560px; height:560px; translate:0 -50%; border-radius:50%;
  background:none; border:3px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
}
/* 자유투 칸 */
:root[data-hero="court"] .hero__stripe--1{
  display:block; top:50%; bottom:auto; right:0; width:230px; height:180px; translate:0 -50%; transform:none; opacity:1;
  background:color-mix(in srgb, var(--A) 14%, transparent); border:3px solid color-mix(in srgb, var(--accent-2) 55%, transparent); border-right:0;
}
/* 자유투 원 */
:root[data-hero="court"] .hero__stripe--2{
  display:block; top:50%; bottom:auto; right:170px; width:120px; height:120px; translate:0 -50%; transform:none; opacity:1; border-radius:50%;
  background:none; border:3px dashed color-mix(in srgb, var(--accent-2) 45%, transparent);
}
:root[data-hero="court"] .hero__big{ z-index:1; color:var(--A); padding-right:14%; }
:root[data-hero="court"] .hero__big b{ text-shadow:0 8px 0 rgb(0 0 0 / .35); }
:root[data-hero="court"] .hero__big i{ color:var(--accent-2); }
:root[data-hero="court"] .hero__big span{ background:var(--accent-2); color:var(--H); }
:root[data-hero="court"] .hero__kicker{ color:var(--A); }


/* ==========================================================================
   7. track — 육상 트랙: 포인트 색 트랙 면에 둥근 레인 선 · 결승선 체크 무늬 · 흰 숫자
   ========================================================================== */
:root[data-hero="track"] .hero{ background:linear-gradient(120deg, var(--H), var(--H2)); }
:root[data-hero="track"] .hero__slab{
  display:block; top:0; bottom:0; right:0; width:60%; clip-path:polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  background:
    repeating-radial-gradient(circle at 120% 150%, transparent 0 70px, rgb(255 255 255 / .6) 70px 72px, transparent 72px 78px),
    radial-gradient(90% 80% at 60% 20%, color-mix(in srgb, var(--A) 75%, #fff 10%), var(--A) 70%);
}
/* 결승선 — 체크 무늬 세로 띠 */
:root[data-hero="track"] .hero__stripe--1{
  display:block; top:0; bottom:0; right:9%; width:30px; transform:skewX(-14deg); opacity:.95;
  background:conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 15px 15px;
}
:root[data-hero="track"] .hero__big{ z-index:1; color:#fff; padding-right:18%; }
:root[data-hero="track"] .hero__big b{ text-shadow:0 10px 0 rgb(0 0 0 / .28); }
:root[data-hero="track"] .hero__big i{ color:#fff; }
:root[data-hero="track"] .hero__big span{ background:var(--H); color:var(--K); }
/* 레인 번호 */
:root[data-hero="track"] .hero__stage::after{
  content:"1  2  3  4  5  6"; position:absolute; left:46%; bottom:22px; white-space:pre; rotate:-22deg; transform-origin:left;
  font-family:"Anton", sans-serif; font-size:26px; letter-spacing:.4em; color:rgb(255 255 255 / .55);
}
:root[data-hero="track"] .hero__kicker{ color:var(--K); }


/* ==========================================================================
   8. bento — 칸 나눈 판: 글 칸 · 포인트 색 숫자 칸 · 오른쪽 아래 작은 칩들. 칸마다 둥근 모서리와 옅은 테
   ========================================================================== */
:root[data-hero="bento"] .hero{ background:color-mix(in srgb, var(--H) 92%, #000); }
:root[data-hero="bento"] .hero__slide{ inset:12px; gap:12px; grid-template-columns:1.25fr 1fr; align-items:stretch; }
:root[data-hero="bento"] .hero__copy{
  align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:0 0 30px 44px; border-radius:14px;
  background:
    radial-gradient(80% 100% at 0% 0%, color-mix(in srgb, var(--A) 16%, transparent), transparent 60%),
    var(--H2);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07);
}
:root[data-hero="bento"] .hero__cta{ margin-top:22px; }
:root[data-hero="bento"] .hero__big{
  align-self:stretch; justify-self:stretch; display:grid; align-content:center; justify-items:start; padding:0 0 30px 38px; border-radius:14px; color:var(--N);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--N) 12%, transparent) 1px, transparent 1.4px) 0 0 / 12px 12px,
    linear-gradient(150deg, color-mix(in srgb, var(--A) 85%, #fff), var(--A));
  transform:none;
}
:root[data-hero="bento"] .hero__big span{ background:var(--N); color:var(--A); border-radius:99px; padding:5px 14px; }
:root[data-hero="bento"] .hero__meta{ top:auto; bottom:26px; left:auto; right:26px; gap:6px; }
:root[data-hero="bento"] .hero__meta > *{ padding:4px 10px; border-radius:99px; background:color-mix(in srgb, var(--N) 12%, transparent); color:var(--N); font-style:normal; }
:root[data-hero="bento"] .hero__meta span::before{ display:none; }
:root[data-hero="bento"] .hero__dots{ left:56px; bottom:32px; }
:root[data-hero="bento"] .hero__kicker{ color:var(--K); }


/* ==========================================================================
   9. pop — 팝아트: 망점 · 뾰족한 폭발 스티커 위 굵은 숫자 · 두꺼운 검정 외곽 · 말풍선 라벨
   ========================================================================== */
:root[data-hero="pop"] .hero{
  background:
    radial-gradient(circle, color-mix(in srgb, var(--A) 55%, transparent) 30%, transparent 33%) 0 0 / 18px 18px,
    linear-gradient(120deg, var(--H), var(--H2));
  box-shadow:inset 0 0 0 4px #0b0b0d;
}
:root[data-hero="pop"] .hero::before{
  display:block; width:100%; height:100%;
  background:linear-gradient(115deg, var(--H) 38%, transparent 70%);
  -webkit-mask-image:none; mask-image:none;
}
/* 폭발 스티커 */
:root[data-hero="pop"] .hero__slab{
  display:block; top:50%; bottom:auto; right:calc(5% + 2%); width:360px; height:360px; translate:0 -50%; z-index:0;
  clip-path:polygon(50% 0%, 58% 16%, 73% 5%, 74% 23%, 92% 18%, 85% 35%, 100% 43%, 86% 53%, 97% 68%, 79% 70%, 82% 89%, 66% 80%, 57% 98%, 47% 83%, 33% 96%, 30% 77%, 12% 84%, 18% 66%, 0% 58%, 15% 47%, 4% 31%, 22% 29%, 21% 10%, 37% 18%);
  background:var(--accent-2); filter:drop-shadow(6px 6px 0 #0b0b0d);
  animation:popSpin 14s linear infinite;
}
@keyframes popSpin{ to{ rotate:360deg; } }
:root[data-hero="pop"] .hero__big{ z-index:1; color:var(--A); }
:root[data-hero="pop"] .hero__big b{ -webkit-text-stroke:3px #0b0b0d; paint-order:stroke fill; text-shadow:6px 6px 0 #0b0b0d; }
:root[data-hero="pop"] .hero__big i{ color:#fff; }
:root[data-hero="pop"] .hero__big span{ background:#fff; color:#0b0b0d; border:3px solid #0b0b0d; border-radius:14px; rotate:-5deg; box-shadow:4px 4px 0 #0b0b0d; }
:root[data-hero="pop"] .hero__title{ text-shadow:3px 3px 0 var(--A); }
:root[data-hero="pop"] .hero__kicker{ color:var(--accent-2); }
:root[data-hero="pop"] .hero .btn{ border:3px solid #0b0b0d; box-shadow:4px 4px 0 #0b0b0d; border-radius:12px; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="pop"] .hero__slab{ animation:none; } }


/* ==========================================================================
   10. glass — 유리: 두 가지 색 빛 방울이 천천히 떠다니고 · 그 위에 뿌연 유리 카드 · 흰 숫자
   ========================================================================== */
:root[data-hero="glass"] .hero{ background:linear-gradient(135deg, var(--H), var(--H2)); }
:root[data-hero="glass"] .hero__light{
  display:block; inset:-20%;
  background:
    radial-gradient(30% 36% at 68% 40%, var(--A), transparent 70%),
    radial-gradient(26% 30% at 88% 70%, var(--accent-2), transparent 70%),
    radial-gradient(22% 26% at 30% 90%, color-mix(in srgb, var(--A) 60%, var(--accent-2)), transparent 70%);
  filter:blur(30px); opacity:.75; animation:glassFloat 16s ease-in-out infinite alternate;
}
@keyframes glassFloat{ to{ translate:-4% 3%; } }
:root[data-hero="glass"] .hero__slab{
  display:block; top:40px; bottom:40px; right:5%; width:37%; clip-path:none; border-radius:22px;
  background:linear-gradient(145deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .14), 0 30px 60px -30px #000;
}
:root[data-hero="glass"] .hero__big{ z-index:1; color:#fff; padding-right:7%; }
:root[data-hero="glass"] .hero__big i{ background:linear-gradient(180deg, var(--A), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-hero="glass"] .hero__big span{ background:rgb(255 255 255 / .14); color:#fff; border-radius:99px; padding:6px 16px; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2); }
:root[data-hero="glass"] .hero__kicker{ background:linear-gradient(90deg, var(--A), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-hero="glass"] .hero__kicker::before{ background:var(--A); }
:root[data-hero="glass"] .hero .btn{ border-radius:99px; }
:root[data-hero="glass"] .hero .btn--gold{ background:linear-gradient(90deg, var(--A), var(--accent-2)); border:0; color:#0b0d17; }
:root[data-hero="glass"] .hero__cta .btn:not(.btn--gold){ background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media (prefers-reduced-motion:reduce){ :root[data-hero="glass"] .hero__light{ animation:none; } }


/* ==========================================================================
   11. neon — 네온 간판: 벽돌 벽 · 숫자는 빛나는 네온관 · 네온 테 · %는 가끔 깜빡인다
   ========================================================================== */
:root[data-hero="neon"] .hero{
  background:
    radial-gradient(40% 60% at 72% 50%, color-mix(in srgb, var(--A) 20%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 1px, transparent 1px 60px),
    linear-gradient(180deg, var(--H), color-mix(in srgb, var(--H) 80%, #000));
}
:root[data-hero="neon"] .hero__slab{
  display:block; top:44px; bottom:44px; right:5%; width:37%; clip-path:none; border-radius:26px; background:none;
  border:3px solid var(--accent-2); box-shadow:0 0 12px var(--accent-2), inset 0 0 12px var(--accent-2), 0 0 40px color-mix(in srgb, var(--accent-2) 40%, transparent);
}
:root[data-hero="neon"] .hero__big{ z-index:1; color:transparent; padding-right:7%; }
:root[data-hero="neon"] .hero__big b, :root[data-hero="neon"] .hero__big i{
  -webkit-text-stroke:2.5px color-mix(in srgb, var(--A) 60%, #fff);
  text-shadow:0 0 6px var(--A), 0 0 16px var(--A), 0 0 34px var(--A), 0 0 60px color-mix(in srgb, var(--A) 50%, transparent);
}
:root[data-hero="neon"] .hero__big i{ animation:neonFlick 5s steps(1) infinite; }
@keyframes neonFlick{ 0%, 88%, 92%, 100%{ opacity:1; } 90%{ opacity:.25; } 95%{ opacity:.6; } }
:root[data-hero="neon"] .hero__big span{ background:none; color:var(--accent-2); text-shadow:0 0 8px var(--accent-2); letter-spacing:.24em; }
:root[data-hero="neon"] .hero__kicker{ color:var(--accent-2); text-shadow:0 0 10px var(--accent-2); }
:root[data-hero="neon"] .hero__title{ text-shadow:0 0 18px color-mix(in srgb, var(--A) 35%, transparent); }
:root[data-hero="neon"] .hero .btn--gold{ box-shadow:0 0 18px color-mix(in srgb, var(--A) 60%, transparent); }
@media (prefers-reduced-motion:reduce){ :root[data-hero="neon"] .hero__big i{ animation:none; } }


/* ==========================================================================
   12. podium — 시상대: 위에서 비추는 조명 · 1 · 2 · 3 단상 · 1위 단상 위에 숫자 · 흩날리는 꽃가루
   ========================================================================== */
:root[data-hero="podium"] .hero{
  background:
    conic-gradient(from 160deg at 72% -10%, transparent 0deg, rgb(255 255 255 / .10) 12deg, rgb(255 255 255 / .03) 28deg, transparent 40deg),
    radial-gradient(40% 60% at 72% 100%, color-mix(in srgb, var(--A) 25%, transparent), transparent 70%),
    linear-gradient(180deg, var(--H2), var(--H));
}
/* 단상 — 가운데 1위(높게) · 왼쪽 2위 · 오른쪽 3위 */
:root[data-hero="podium"] .hero__slab, :root[data-hero="podium"] .hero__stripe--1, :root[data-hero="podium"] .hero__stripe--2{
  display:grid; justify-items:center; align-content:start; padding-top:10px; top:auto; bottom:0; clip-path:none; transform:none; opacity:1; width:120px;
  font-family:"Anton", sans-serif; font-size:30px; color:color-mix(in srgb, var(--N) 70%, transparent);
  box-shadow:inset 0 3px 0 rgb(255 255 255 / .35), 0 -12px 30px -18px var(--A);
}
:root[data-hero="podium"] .hero__slab{ right:calc(5% + 124px); height:112px; background:linear-gradient(180deg, color-mix(in srgb, var(--A) 90%, #fff), var(--A)); z-index:1; }
:root[data-hero="podium"] .hero__stripe--1{ right:calc(5% + 248px); height:76px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 90%, #fff), var(--accent-2)); }
:root[data-hero="podium"] .hero__stripe--2{ right:5%; height:54px; background:linear-gradient(180deg, color-mix(in srgb, var(--A) 55%, #6b4a2a), color-mix(in srgb, var(--A) 40%, #3b2a18)); }
:root[data-hero="podium"] .hero__slab::before{ content:"1"; }
:root[data-hero="podium"] .hero__stripe--1::before{ content:"2"; }
:root[data-hero="podium"] .hero__stripe--2::before{ content:"3"; }
/* 꽃가루 */
:root[data-hero="podium"] .hero__stage::before{
  content:""; position:absolute; right:3%; top:0; width:44%; height:70%;
  background:
    linear-gradient(var(--A), var(--A)) 12% 18% / 8px 3px no-repeat, linear-gradient(#fff, #fff) 30% 8% / 3px 8px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 62% 22% / 8px 3px no-repeat, linear-gradient(var(--A), var(--A)) 84% 12% / 3px 9px no-repeat,
    linear-gradient(#fff, #fff) 72% 40% / 7px 3px no-repeat, linear-gradient(var(--accent-2), var(--accent-2)) 20% 44% / 3px 7px no-repeat,
    linear-gradient(var(--A), var(--A)) 46% 6% / 6px 3px no-repeat, linear-gradient(#fff, #fff) 94% 34% / 3px 6px no-repeat;
  animation:podiumFall 6s ease-in-out infinite alternate;
}
@keyframes podiumFall{ to{ translate:6px 14px; } }
:root[data-hero="podium"] .hero__big{ z-index:2; color:#fff; align-self:start; padding:34px 7% 0 0; }
:root[data-hero="podium"] .hero__big b{ font-size:130px; text-shadow:0 0 30px color-mix(in srgb, var(--A) 55%, transparent); }
:root[data-hero="podium"] .hero__big.is-long b{ font-size:88px; }
:root[data-hero="podium"] .hero__big i{ color:var(--A); }
:root[data-hero="podium"] .hero__big span{ background:var(--A); color:var(--N); }
:root[data-hero="podium"] .hero__kicker{ color:var(--A); }
@media (prefers-reduced-motion:reduce){ :root[data-hero="podium"] .hero__stage::before{ animation:none; } }


/* ==========================================================================
   입구 카드 8가지 — 모든 카드에 뒤 윤곽 영문(LIVE CASINO 등)은 남긴다
   ========================================================================== */
:root:is([data-cats="glass"], [data-cats="ticket"], [data-cats="led"], [data-cats="block"], [data-cats="outline"], [data-cats="pill"], [data-cats="tab"], [data-cats="bento"]) .cat{
  clip-path:none; --ca:var(--accent); --cb:var(--accent-2);
}
:root:is([data-cats="glass"], [data-cats="ticket"], [data-cats="led"], [data-cats="block"], [data-cats="outline"], [data-cats="pill"], [data-cats="tab"], [data-cats="bento"]) .cat__go,
:root:is([data-cats="glass"], [data-cats="ticket"], [data-cats="led"], [data-cats="block"], [data-cats="outline"], [data-cats="pill"], [data-cats="tab"], [data-cats="bento"]) .cat__go svg{ transform:none; }

/* glass — 뿌연 유리 · 빛 번짐 · 원 화살표 */
:root[data-cats="glass"] .cat{
  border-radius:18px; border:1px solid rgb(255 255 255 / .12);
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--ca) 30%, transparent), transparent 70%),
    radial-gradient(50% 100% at 0% 100%, color-mix(in srgb, var(--cb) 22%, transparent), transparent 70%),
    rgb(255 255 255 / .04);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18);
}
:root[data-cats="glass"] .cat::before{ display:none; }
:root[data-cats="glass"] .cat::after{ left:18px; right:18px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--ca), var(--cb)); }
:root[data-cats="glass"] .cat__no{ background:rgb(255 255 255 / .1); border-radius:99px; }
:root[data-cats="glass"] .cat__en{ -webkit-text-stroke-color:rgb(255 255 255 / .2); }
:root[data-cats="glass"] .cat:hover .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 75%, transparent); }
:root[data-cats="glass"] .cat__go{ border-radius:50%; background:rgb(255 255 255 / .1); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2); }
:root[data-cats="glass"] .cat:hover .cat__go{ background:var(--ca); color:var(--accent-ink); }

/* ticket — 크림 종이 · 왼쪽 반원 홈 · 점선 절취 · 도장 번호 */
:root[data-cats="ticket"] .cat{
  --text:#16171b; --text-sub:#5b5a57; --text-mute:#8a877f; --surface-2:#e9e4d7; color:#16171b;
  border:0; border-radius:8px;
  background:
    radial-gradient(circle at 0 50%, var(--bg) 0 12px, transparent 12.5px),
    radial-gradient(circle at 100% 50%, var(--bg) 0 12px, transparent 12.5px),
    linear-gradient(90deg, transparent calc(100% - 78px), rgb(22 23 27 / .25) calc(100% - 78px) calc(100% - 77px), transparent calc(100% - 77px)),
    #f6f2e8;
}
:root[data-cats="ticket"] .cat::before{ display:none; }
:root[data-cats="ticket"] .cat::after{ background:var(--ca); height:3px; }
:root[data-cats="ticket"] .cat__no{ background:none; color:var(--cb); border:2px solid currentColor; border-radius:4px; rotate:-6deg; padding:0 6px; }
:root[data-cats="ticket"] .cat__en{ right:84px; -webkit-text-stroke-color:rgb(22 23 27 / .14); }
:root[data-cats="ticket"] .cat:hover .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 80%, #000 10%); }
:root[data-cats="ticket"] .cat__go{ margin-right:6px; background:#16171b; color:#f6f2e8; border-radius:4px; }
:root[data-cats="ticket"] .cat:hover .cat__go{ background:var(--ca); color:var(--accent-ink); }

/* led — 검정 판 · 점 무늬 · 포인트 색 LED 영문 · 네모 불빛 */
:root[data-cats="led"] .cat{
  border-radius:6px; border:1px solid #1c2028;
  background:radial-gradient(circle, rgb(255 255 255 / .04) 0 1px, transparent 1.4px) 0 0 / 6px 6px, #07080a;
  box-shadow:inset 0 0 20px #000;
}
:root[data-cats="led"] .cat::before{ display:none; }
:root[data-cats="led"] .cat::after{ background:var(--ca); box-shadow:0 0 10px var(--ca); height:2px; }
:root[data-cats="led"] .cat__no{ background:none; color:var(--ca); font-family:"Courier New", monospace; text-shadow:0 0 6px var(--ca); }
:root[data-cats="led"] .cat__en{
  color:var(--ca); -webkit-text-stroke:0; opacity:.35;
  -webkit-mask:radial-gradient(circle, #000 52%, transparent 60%) 0 0 / 5px 5px; mask:radial-gradient(circle, #000 52%, transparent 60%) 0 0 / 5px 5px;
}
:root[data-cats="led"] .cat:hover .cat__en{ opacity:.8; filter:drop-shadow(0 0 6px var(--ca)); }
:root[data-cats="led"] .cat__go{ border-radius:3px; background:#111318; color:var(--ca); box-shadow:inset 0 0 0 1px #262b35; }
:root[data-cats="led"] .cat:hover .cat__go{ background:var(--ca); color:var(--accent-ink); }

/* block — 포인트 색으로 꽉 찬 판 · 진한 글자 · 비스듬한 결 */
:root[data-cats="block"] .cat{
  --text:var(--accent-ink); --text-sub:color-mix(in srgb, var(--accent-ink) 72%, transparent); --text-mute:color-mix(in srgb, var(--accent-ink) 55%, transparent);
  --surface-2:color-mix(in srgb, var(--accent-ink) 12%, transparent); color:var(--accent-ink);
  border:0; border-radius:6px;
  background:repeating-linear-gradient(-60deg, color-mix(in srgb, var(--accent-ink) 7%, transparent) 0 2px, transparent 2px 14px), var(--ca);
  box-shadow:0 14px 26px -18px var(--ca);
}
:root[data-cats="block"] .cat::before{ background:var(--accent-ink); width:22px; height:22px; }
:root[data-cats="block"] .cat::after{ background:var(--accent-ink); }
:root[data-cats="block"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent-ink) 30%, transparent); }
:root[data-cats="block"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--accent-ink); }
:root[data-cats="block"] .cat__go{ background:var(--accent-ink); color:var(--ca); border-radius:4px; }

/* outline — 속이 빈 판 · 포인트 색 얇은 테 · 네 모서리 꺾쇠 */
:root[data-cats="outline"] .cat{
  --c:var(--ca); border-radius:4px; border:1px solid color-mix(in srgb, var(--ca) 35%, transparent);
  background:
    linear-gradient(var(--c),var(--c)) left top / 14px 2px no-repeat, linear-gradient(var(--c),var(--c)) left top / 2px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / 14px 2px no-repeat, linear-gradient(var(--c),var(--c)) right bottom / 2px 14px no-repeat,
    transparent;
}
:root[data-cats="outline"] .cat::before{ display:none; }
:root[data-cats="outline"] .cat::after{ background:var(--ca); height:2px; }
:root[data-cats="outline"] .cat:hover{ border-color:var(--ca); background-color:color-mix(in srgb, var(--ca) 6%, transparent); }
:root[data-cats="outline"] .cat__no{ background:none; color:var(--ca); padding:0; }
:root[data-cats="outline"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 45%, transparent); }
:root[data-cats="outline"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--ca); }
:root[data-cats="outline"] .cat__go{ background:none; color:var(--ca); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ca) 50%, transparent); border-radius:2px; }
:root[data-cats="outline"] .cat:hover .cat__go{ background:var(--ca); color:var(--accent-ink); }

/* pill — 캡슐 모양 · 부드러운 그라데이션 · 원 화살표 */
:root[data-cats="pill"] .cat{
  border-radius:99px; border:1px solid color-mix(in srgb, var(--ca) 25%, transparent); padding-left:38px;
  background:
    radial-gradient(60% 140% at 100% 50%, color-mix(in srgb, var(--ca) 20%, transparent), transparent 70%),
    var(--surface);
}
:root[data-cats="pill"] .cat::before{ display:none; }
:root[data-cats="pill"] .cat::after{ display:none; }
:root[data-cats="pill"] .cat:hover{ border-color:var(--ca); }
:root[data-cats="pill"] .cat__no{ left:38px; background:none; color:var(--ca); padding:0; }
:root[data-cats="pill"] .cat__stat{ right:30px; }
:root[data-cats="pill"] .cat__en{ right:24px; -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 30%, transparent); }
:root[data-cats="pill"] .cat:hover .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 80%, transparent); }
:root[data-cats="pill"] .cat__go{ margin-right:6px; border-radius:50%; width:40px; height:40px; background:var(--ca); color:var(--accent-ink); }

/* tab — 폴더 탭: 위 왼쪽에 포인트 색 탭(번호) · 판 위쪽 테 */
:root[data-cats="tab"] .cats{ margin-top:calc(var(--gap-md) + 14px); }
:root[data-cats="tab"] .cat{ overflow:visible; border-radius:0 8px 8px 8px; border:0; border-top:3px solid var(--ca); background:var(--surface); }
:root[data-cats="tab"] .cat::before{ display:none; }
:root[data-cats="tab"] .cat::after{ background:var(--ca); }
:root[data-cats="tab"] .cat__no{ left:0; top:-26px; padding:3px 14px; border-radius:8px 8px 0 0; background:var(--ca); color:var(--accent-ink); }
:root[data-cats="tab"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 30%, transparent); }
:root[data-cats="tab"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--ca); }
:root[data-cats="tab"] .cat__en{ overflow:hidden; max-width:100%; }
:root[data-cats="tab"] .cat__go{ border-radius:6px; }
:root[data-cats="tab"] .cat:hover .cat__go{ background:var(--ca); color:var(--accent-ink); }

/* bento — 둥근 판 안에 포인트 색 작은 칸(번호) · 보조색 점 */
:root[data-cats="bento"] .cat{ border-radius:16px; border:1px solid var(--line); background:var(--surface); padding-left:92px; }
:root[data-cats="bento"] .cat::before{ display:none; }
:root[data-cats="bento"] .cat::after{ left:16px; right:16px; border-radius:2px; background:var(--cb); height:3px; }
:root[data-cats="bento"] .cat__no{
  left:14px; top:14px; bottom:14px; display:grid; place-items:center; width:64px; padding:0; border-radius:12px;
  background:var(--ca); color:var(--accent-ink); font-size:22px;
}
:root[data-cats="bento"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--ca) 30%, transparent); }
:root[data-cats="bento"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--ca); }
:root[data-cats="bento"] .cat:hover{ border-color:var(--ca); }
:root[data-cats="bento"] .cat__go{ border-radius:10px; }
:root[data-cats="bento"] .cat:hover .cat__go{ background:var(--ca); color:var(--accent-ink); }


/* ---- 폰 --------------------------------------------------------------------- */
@media (max-width:1023px){
  :root[data-hero="split"] .hero__slab{ width:62%; }
  :root[data-hero="split"] .hero__stripe--1{ left:calc(56% - 4px); } :root[data-hero="split"] .hero__stripe--2{ display:none; }
  :root[data-hero="split"] .hero__slide{ grid-template-columns:56% 1fr; }
  :root[data-hero="split"] .hero__word{ font-size:60px; }
  :root[data-hero="ticket"] .hero__slab, :root[data-hero="ticket"] .hero__slide{ inset:10px 10px; }
  :root[data-hero="ticket"] .hero__copy{ padding-left:14px; }
  :root[data-hero="ticket"] .hero__big b{ font-size:40px; } :root[data-hero="ticket"] .hero__big.is-long b{ font-size:28px; }
  :root[data-hero="ticket"] .hero__big{ padding-bottom:14px; }
  :root[data-hero="ticket"] .hero__stage::after{ width:60px; height:16px; bottom:16px; right:22px; }
  :root[data-hero="ticket"] .hero__meta{ display:none; }
  :root[data-hero="scoreboard"] .hero__slab{ top:14px; bottom:14px; }
  :root[data-hero="scoreboard"] .hero__stage::after{ top:20px; font-size:9px; }
  :root[data-hero="kinetic"] .hero__big::before, :root[data-hero="kinetic"] .hero__big::after{ font-size:50px; }
  :root[data-hero="kinetic"] .hero__word{ font-size:10px; bottom:30px; padding:3px 0 3px 20px; }
  :root[data-hero="court"] .hero__slab{ width:260px; height:260px; right:-90px; }
  :root[data-hero="court"] .hero__stripe--1{ width:100px; height:90px; }
  :root[data-hero="court"] .hero__stripe--2{ width:60px; height:60px; right:72px; }
  :root[data-hero="track"] .hero__stage::after{ font-size:12px; bottom:8px; }
  :root[data-hero="track"] .hero__stripe--1{ width:14px; }
  :root[data-hero="bento"] .hero__slide{ inset:6px; gap:6px; }
  :root[data-hero="bento"] .hero__copy{ padding:0 0 14px 12px; border-radius:10px; }
  :root[data-hero="bento"] .hero__big{ padding:0 0 14px 12px; border-radius:10px; }
  :root[data-hero="bento"] .hero__meta{ display:none; }
  :root[data-hero="pop"] .hero__slab{ width:160px; height:160px; }
  :root[data-hero="glass"] .hero__slab, :root[data-hero="neon"] .hero__slab{ top:14px; bottom:14px; border-radius:14px; }
  :root[data-hero="podium"] .hero__slab, :root[data-hero="podium"] .hero__stripe--1, :root[data-hero="podium"] .hero__stripe--2{ width:44px; font-size:14px; padding-top:4px; }
  :root[data-hero="podium"] .hero__slab{ right:calc(3% + 46px); height:46px; } :root[data-hero="podium"] .hero__stripe--1{ right:calc(3% + 92px); height:32px; } :root[data-hero="podium"] .hero__stripe--2{ right:3%; height:24px; }
  :root[data-hero="podium"] .hero__big{ padding-top:14px; }
  :root[data-hero="podium"] .hero__big b{ font-size:48px; } :root[data-hero="podium"] .hero__big.is-long b{ font-size:32px; }
  :root[data-cats="pill"] .cat{ padding-left:14px; }
  :root[data-cats="pill"] .cat__go{ width:24px; height:24px; }
  :root[data-cats="bento"] .cat{ padding-left:10px; }
  :root[data-cats="bento"] .cat__no{ display:none; }
  :root[data-hero="kinetic"] .hero__word{ display:none; }
  :root[data-hero="ticket"] .hero__big span{ margin-top:4px; padding:1px 5px; font-size:9px; white-space:nowrap; letter-spacing:.06em; border-width:1.5px; }
  :root[data-style="geo"]:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"], [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__kicker{ font-size:10px; letter-spacing:.1em; }
  :root[data-cats="tab"] .cats{ margin-top:10px; }
  :root[data-cats="ticket"] .cat{ background:radial-gradient(circle at 0 50%, var(--bg) 0 7px, transparent 7.5px), radial-gradient(circle at 100% 50%, var(--bg) 0 7px, transparent 7.5px), #f6f2e8; }
}

/* ==========================================================================
   배치 — 12가지 배너가 <같은 뼈대(왼쪽 글 · 오른쪽 숫자)>로 보이지 않도록 구도를 모두 다르게 한다
   stadium 가운데 정렬 · split 좌우 뒤집기 · ticket 떼는 쪽이 왼쪽 · scoreboard 위 전광판 / 아래 글 한 줄
   kinetic 숫자가 배너 전체를 채우고 글은 떠 있는 상자 · court 가운데 원에 숫자, 양옆으로 글
   track 대각선(글 왼쪽 위 · 숫자 오른쪽 아래) · bento 3칸 · pop 말풍선 상자 · glass 가운데 유리 카드
   neon 간판이 왼쪽 · podium 가운데 시상대
   ========================================================================== */

/* ---- 1. stadium — 가운데 정렬: 숫자 위 · 글 아래 ---- */
:root[data-hero="stadium"] .hero__slide{ grid-template-columns:1fr; align-content:center; justify-items:center; text-align:center; row-gap:6px; }
:root[data-hero="stadium"] .hero__big{ order:-1; justify-self:center; padding:0; justify-items:center; }
:root[data-hero="stadium"] .hero__big b{ font-size:150px; }
:root[data-hero="stadium"] .hero__big.is-long b{ font-size:110px; }
:root[data-hero="stadium"] .hero__copy{ padding:0; display:grid; justify-items:center; }
:root[data-hero="stadium"] .hero__title{ margin:4px 0 6px; font-size:40px; }
:root[data-hero="stadium"] .hero__kicker{ display:none; }
:root[data-hero="stadium"] .hero__cta{ margin-top:16px; justify-content:center; }
:root[data-hero="stadium"] .hero__meta{ left:50%; translate:-50% 0; }
:root[data-hero="stadium"] .hero__dots{ left:auto; right:40px; }

/* ---- 2. split — 뒤집기: 포인트 색 판이 오른쪽(글) · 숫자는 왼쪽 어두운 판 ---- */
:root[data-hero="split"] .hero__slab{ left:auto; right:0; clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
:root[data-hero="split"] .hero__stripe--1{ left:calc(47.2% - 4px); }
:root[data-hero="split"] .hero__stripe--2{ left:calc(47.2% - 22px); }
:root[data-hero="split"] .hero__slide{ grid-template-columns:44% 1fr; }
:root[data-hero="split"] .hero__big{ order:-1; justify-self:center; padding:0 0 0 20px; }
:root[data-hero="split"] .hero__copy{ padding:0 40px 18px 13%; }
:root[data-hero="split"] .hero__word{ left:-1%; right:52%; }
:root[data-hero="split"] .hero__meta{ left:auto; right:40px; }
:root[data-hero="split"] .hero__dots{ left:auto; right:40px; }

/* ---- 3. ticket — 떼는 쪽(숫자 · 바코드)이 왼쪽, 글은 오른쪽 ---- */
:root[data-hero="ticket"] .hero__slab{
  background:
    radial-gradient(circle at 30% 0, var(--H) 0 16px, transparent 16.5px),
    radial-gradient(circle at 30% 100%, var(--H) 0 16px, transparent 16.5px),
    radial-gradient(circle, var(--H) 0 4px, transparent 4.5px) calc(30% - 8px) 10px / 16px 18px repeat-y,
    radial-gradient(90% 120% at 100% 0%, #fffdf6, transparent 60%),
    var(--paper);
}
:root[data-hero="ticket"] .hero__slide{ grid-template-columns:30% 1fr; }
:root[data-hero="ticket"] .hero__big{ order:-1; justify-self:center; }
:root[data-hero="ticket"] .hero__copy{ padding-left:48px; }
:root[data-hero="ticket"] .hero__stage::after{ right:auto; left:calc(28px + 5%); width:130px; }
:root[data-hero="ticket"] .hero__meta{ left:calc(28px + 30% + 48px); }
:root[data-hero="ticket"] .hero__dots{ left:calc(28px + 30% + 48px); }

/* ---- 4. scoreboard — 위: 가로로 긴 전광판(숫자) · 아래: 글과 버튼 한 줄 ---- */
:root[data-hero="scoreboard"] .hero__slab{ top:30px; bottom:auto; left:56px; right:56px; width:auto; height:176px; }
:root[data-hero="scoreboard"] .hero__stage::after{ top:40px; right:auto; left:84px; translate:none; }
:root[data-hero="scoreboard"] .hero__slide{ grid-template-columns:1fr; grid-template-rows:206px 1fr; }
:root[data-hero="scoreboard"] .hero__big{ order:-1; align-self:center; justify-self:center; padding:24px 0 0; display:flex; align-items:center; gap:28px; }
:root[data-hero="scoreboard"] .hero__big span{ margin:0; }
:root[data-hero="scoreboard"] .hero__copy{
  align-self:center; display:grid; grid-template-columns:1fr auto; column-gap:24px; align-items:center; padding:0 56px 26px;
}
:root[data-hero="scoreboard"] .hero__kicker{ display:none; }
:root[data-hero="scoreboard"] .hero__title{ grid-column:1; margin:0; font-size:34px; }
:root[data-hero="scoreboard"] .hero__sub{ grid-column:1; max-width:none; }
:root[data-hero="scoreboard"] .hero__cta{ grid-column:2; grid-row:1 / 3; margin:0; }
:root[data-hero="scoreboard"] .hero__meta{ top:auto; bottom:8px; left:56px; font-size:10px; }
:root[data-hero="scoreboard"] .hero__dots{ left:auto; right:56px; top:44px; bottom:auto; }

/* ---- 5. kinetic — 숫자가 배너 전체를 채우고, 글은 왼쪽 아래 떠 있는 어두운 상자 ---- */
:root[data-hero="kinetic"] .hero__slide{ grid-template-columns:1fr; }
:root[data-hero="kinetic"] .hero__big{ position:absolute; inset:0; display:grid; place-content:center; justify-items:end; padding:0 5% 0 0; z-index:0; }
:root[data-hero="kinetic"] .hero__big b{ font-size:330px; line-height:.8; }
:root[data-hero="kinetic"] .hero__big.is-long b{ font-size:220px; }
:root[data-hero="kinetic"] .hero__big span{ position:absolute; right:5%; top:34px; }
:root[data-hero="kinetic"] .hero__copy{
  position:relative; z-index:2; align-self:end; justify-self:start; max-width:500px; margin:0 0 28px 40px; padding:24px 28px;
  background:rgb(10 10 12 / .72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-left:4px solid var(--A);
}
:root[data-hero="kinetic"] .hero__title{ font-size:40px; margin:8px 0 6px; }
:root[data-hero="kinetic"] .hero__cta{ margin-top:16px; }
:root[data-hero="kinetic"] .hero__word{ bottom:auto; top:28px; rotate:2deg; }
:root[data-hero="kinetic"] .hero__meta{ display:none; }

/* ---- 6. court — 가운데 원 안에 숫자, 왼쪽에 제목 · 오른쪽에 설명과 버튼. 코트 선도 가운데로 ---- */
:root[data-hero="court"] .hero__slab{ right:auto; left:50%; width:300px; height:300px; translate:-50% -50%; }
:root[data-hero="court"] .hero__stripe--1{ right:auto; left:50%; width:3px; height:auto; top:0; bottom:0; translate:-50% 0; background:color-mix(in srgb, var(--accent-2) 55%, transparent); border:0; }
:root[data-hero="court"] .hero__stripe--2{ right:auto; left:-3px; width:150px; height:190px; border-radius:0; border:3px solid color-mix(in srgb, var(--accent-2) 45%, transparent); border-left:0; }
:root[data-hero="court"] .hero__slide{ grid-template-columns:1fr 300px 1fr; align-items:center; }
:root[data-hero="court"] .hero__copy{ display:contents; }
:root[data-hero="court"] .hero__kicker{ grid-column:1; grid-row:1; align-self:end; justify-self:end; margin-right:30px; }
:root[data-hero="court"] .hero__title{ grid-column:1; grid-row:2; align-self:start; justify-self:end; margin:6px 30px 0 0; text-align:right; font-size:40px; }
:root[data-hero="court"] .hero__sub{ grid-column:3; grid-row:1; align-self:end; margin-left:30px; max-width:300px; }
:root[data-hero="court"] .hero__cta{ grid-column:3; grid-row:2; align-self:start; margin:14px 0 0 30px; }
:root[data-hero="court"] .hero__big{ grid-column:2; grid-row:1 / 3; justify-self:center; padding:0; justify-items:center; }
:root[data-hero="court"] .hero__big b{ font-size:120px; }
:root[data-hero="court"] .hero__big.is-long b{ font-size:78px; }
:root[data-hero="court"] .hero__meta{ left:50%; translate:-50% 0; }
:root[data-hero="court"] .hero__dots{ left:auto; right:40px; }

/* ---- 7. track — 대각선: 글은 왼쪽 위, 숫자는 오른쪽 아래 크게 ---- */
:root[data-hero="track"] .hero__slide{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
:root[data-hero="track"] .hero__copy{ grid-column:1; grid-row:1 / 3; align-self:start; padding:66px 0 0 56px; }
:root[data-hero="track"] .hero__big{ grid-column:2; grid-row:1 / 3; align-self:end; justify-self:end; padding:0 20% 26px 0; }
:root[data-hero="track"] .hero__big b{ font-size:170px; }
:root[data-hero="track"] .hero__slab{ width:66%; }

/* ---- 8. bento — 3칸: 숫자 칸(왼쪽 · 높게) · 글 칸(가운데) · 작은 정보 칸 4개(오른쪽 세로) ---- */
:root[data-hero="bento"] .hero__slide{ grid-template-columns:30% 1fr 20%; }
:root[data-hero="bento"] .hero__big{ order:-1; justify-items:center; padding:0; align-content:center; }
:root[data-hero="bento"] .hero__big b{ font-size:120px; }
:root[data-hero="bento"] .hero__big.is-long b{ font-size:74px; }
:root[data-hero="bento"] .hero__copy{ padding:0 0 30px 34px; }
:root[data-hero="bento"] .hero__meta{
  top:12px; bottom:12px; right:12px; left:auto; width:calc(20% - 12px * 2 / 3); display:grid; grid-template-rows:repeat(4, 1fr); align-items:stretch; gap:12px;
}
:root[data-hero="bento"] .hero__meta > *{
  display:grid; place-items:center; border-radius:14px; padding:0; font-size:13px; letter-spacing:.18em;
  background:var(--H2); color:rgb(255 255 255 / .75); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07);
}
:root[data-hero="bento"] .hero__meta b{ background:var(--accent-2); color:var(--H); }
:root[data-hero="bento"] .hero__dots{ left:calc(12px + 30% + 12px + 34px); }

/* ---- 9. pop — 숫자는 왼쪽(폭발 스티커), 글은 오른쪽 흰 말풍선 상자 ---- */
:root[data-hero="pop"] .hero__slab{ right:auto; left:6%; }
:root[data-hero="pop"] .hero::before{ background:linear-gradient(245deg, var(--H) 38%, transparent 70%); }
:root[data-hero="pop"] .hero__slide{ grid-template-columns:44% 1fr; }
:root[data-hero="pop"] .hero__big{ order:-1; justify-self:center; padding:0; }
:root[data-hero="pop"] .hero__copy{
  justify-self:start; margin-right:40px; padding:26px 30px; border-radius:18px; background:#fff; color:#0b0b0d;
  border:3px solid #0b0b0d; box-shadow:7px 7px 0 #0b0b0d; position:relative;
}
:root[data-hero="pop"] .hero__copy::before{
  content:""; position:absolute; left:-22px; top:48px; width:26px; height:26px; background:#fff;
  border-left:3px solid #0b0b0d; border-bottom:3px solid #0b0b0d; clip-path:polygon(0 50%, 100% 0, 100% 100%); transform:skewY(0);
}
:root[data-hero="pop"] .hero__title{ color:#0b0b0d; font-size:40px; margin:8px 0 6px; }
:root[data-hero="pop"] .hero__sub{ color:#444; }
:root[data-hero="pop"] .hero__kicker{ color:#0b0b0d; }
:root[data-hero="pop"] .hero__kicker::before{ background:var(--A); }
:root[data-hero="pop"] .hero__cta{ margin-top:16px; }
:root[data-hero="pop"] .hero__cta .btn:not(.btn--gold){ color:#0b0b0d; }
:root[data-hero="pop"] .hero__meta, :root[data-hero="pop"] .hero__dots{ left:auto; right:40px; }

/* ---- 10. glass — 가운데 큰 유리 카드 하나에 숫자 · 제목 · 버튼을 모두 ---- */
:root[data-hero="glass"] .hero__slab{ left:50%; right:auto; width:60%; top:26px; bottom:26px; translate:-50% 0; }
:root[data-hero="glass"] .hero__slide{ grid-template-columns:1fr; align-content:center; justify-items:center; text-align:center; row-gap:0; }
:root[data-hero="glass"] .hero__big{ order:-1; justify-self:center; padding:0; display:flex; align-items:center; gap:18px; }
:root[data-hero="glass"] .hero__big b{ font-size:110px; }
:root[data-hero="glass"] .hero__big.is-long b{ font-size:80px; }
:root[data-hero="glass"] .hero__big span{ margin:0; }
:root[data-hero="glass"] .hero__copy{ padding:0; display:grid; justify-items:center; }
:root[data-hero="glass"] .hero__kicker{ display:none; }
:root[data-hero="glass"] .hero__title{ font-size:36px; margin:10px 0 6px; }
:root[data-hero="glass"] .hero__cta{ margin-top:16px; justify-content:center; }
:root[data-hero="glass"] .hero__meta, :root[data-hero="glass"] .hero__dots{ left:50%; translate:-50% 0; }

/* ---- 11. neon — 간판이 왼쪽 · 글은 오른쪽 ---- */
:root[data-hero="neon"] .hero__slab{ right:auto; left:5%; }
:root[data-hero="neon"] .hero__slide{ grid-template-columns:47% 1fr; }
:root[data-hero="neon"] .hero__big{ order:-1; justify-self:center; padding:0; }
:root[data-hero="neon"] .hero__copy{ padding:0 40px 18px 30px; }
:root[data-hero="neon"] .hero__meta, :root[data-hero="neon"] .hero__dots{ left:calc(47% + 30px); }

/* ---- 12. podium — 가운데 시상대 · 그 위 숫자 · 글은 위쪽 가운데 짧게 ---- */
:root[data-hero="podium"] .hero__slab{ right:auto; left:calc(50% - 60px); }
:root[data-hero="podium"] .hero__stripe--1{ right:auto; left:calc(50% - 184px); }
:root[data-hero="podium"] .hero__stripe--2{ right:auto; left:calc(50% + 64px); }
:root[data-hero="podium"] .hero{ background:
    conic-gradient(from 160deg at 50% -10%, transparent 0deg, rgb(255 255 255 / .10) 12deg, rgb(255 255 255 / .03) 28deg, transparent 40deg),
    radial-gradient(40% 60% at 50% 100%, color-mix(in srgb, var(--A) 25%, transparent), transparent 70%),
    linear-gradient(180deg, var(--H2), var(--H)); }
:root[data-hero="podium"] .hero__stage::before{ right:28%; }
:root[data-hero="podium"] .hero__slide{ grid-template-columns:1fr 1fr 1fr; }
:root[data-hero="podium"] .hero__copy{ grid-column:1; align-self:center; padding:0 0 60px 56px; }
:root[data-hero="podium"] .hero__title{ font-size:38px; }
:root[data-hero="podium"] .hero__big{ grid-column:2; justify-self:center; align-self:end; padding:0 0 124px; justify-items:center; }
:root[data-hero="podium"] .hero__big b{ font-size:96px; }
:root[data-hero="podium"] .hero__big.is-long b{ font-size:64px; }
:root[data-hero="podium"] .hero__word{
  display:block; grid-column:3; align-self:center; justify-self:end; margin-right:56px; writing-mode:vertical-rl;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:44px; letter-spacing:.1em; color:color-mix(in srgb, var(--A) 45%, transparent);
}

/* ---- 폰: 좁은 화면에서는 모든 배치를 <글 왼쪽 · 숫자 오른쪽> 한 가지로 되돌린다 (장식은 그대로) ---- */
@media (max-width:1023px){
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__slide{
    grid-template-columns:1fr 40% !important; grid-template-rows:none !important; justify-items:stretch; text-align:left; align-content:normal; align-items:center;
  }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__copy{
    display:block; order:0; grid-column:1; grid-row:1; align-self:center; justify-self:stretch; position:relative;
    margin:0; padding:0 0 10px 16px; max-width:none; background:none; border:0; box-shadow:none; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; color:inherit;
  }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__big{
    order:0; grid-column:2; grid-row:1; position:relative; inset:auto; display:grid; justify-self:center; align-self:center; justify-items:center; padding:0; margin:0;
  }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__big b{ font-size:54px !important; }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__big.is-long b{ font-size:34px !important; }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__big span{
    position:static; margin-top:4px; padding:2px 6px; font-size:9px; letter-spacing:.06em; white-space:nowrap;
  }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) :is(.hero__title){
    grid-column:auto; grid-row:auto; justify-self:start; margin:4px 0 4px; text-align:left; font-size:21px !important;
  }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) :is(.hero__kicker, .hero__sub, .hero__cta){
    grid-column:auto; grid-row:auto; justify-self:start; margin-left:0; margin-right:0; justify-content:flex-start;
  }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__cta{ margin-top:10px; }
  :root:is([data-hero="stadium"], [data-hero="split"], [data-hero="ticket"], [data-hero="scoreboard"], [data-hero="kinetic"], [data-hero="court"],
           [data-hero="track"], [data-hero="bento"], [data-hero="pop"], [data-hero="glass"], [data-hero="neon"], [data-hero="podium"]) .hero__copy::before{ display:none; }
  :root[data-hero="kinetic"] .hero__big::before, :root[data-hero="kinetic"] .hero__big::after{ display:none; }
  :root[data-hero="podium"] .hero__word, :root[data-hero="bento"] .hero__meta{ display:none; }
  :root[data-hero="pop"] .hero__copy{ color:#fff; } :root[data-hero="pop"] .hero__title{ color:#fff; } :root[data-hero="pop"] .hero__sub{ color:rgb(255 255 255 / .7); } :root[data-hero="pop"] .hero__kicker{ color:var(--accent-2); }
  :root[data-hero="split"] .hero__slab{ left:0; right:auto; clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%); }
  :root[data-hero="split"] .hero__stripe--1{ left:calc(56% - 4px); }
  :root[data-hero="ticket"] .hero__slab{ background:radial-gradient(90% 120% at 0% 0%, #fffdf6, transparent 60%), var(--paper); }
  :root[data-hero="ticket"] .hero__stage::after{ display:none; }
  :root[data-hero="scoreboard"] .hero__slab{ top:12px; bottom:12px; height:auto; left:auto; right:12px; width:38%; }
  :root[data-hero="scoreboard"] .hero__stage::after{ display:none; }
  :root[data-hero="scoreboard"] .hero__big{ display:grid; gap:0; }
  :root[data-hero="court"] .hero__slab{ width:170px; height:170px; left:auto; right:6%; translate:0 -50%; }
  :root[data-hero="court"] .hero__stripe--1, :root[data-hero="court"] .hero__stripe--2{ display:none; }
  :root[data-hero="glass"] .hero__slab{ left:auto; right:10px; width:38%; translate:none; }
  :root[data-hero="glass"] .hero__big{ display:grid; gap:0; }
  :root[data-hero="neon"] .hero__slab{ left:auto; right:10px; }
  :root[data-hero="pop"] .hero__slab{ left:auto; right:4%; }
  :root[data-hero="podium"] .hero__slab{ left:auto; right:calc(3% + 46px); }
  :root[data-hero="podium"] .hero__stripe--1{ left:auto; right:calc(3% + 92px); }
  :root[data-hero="podium"] .hero__stripe--2{ left:auto; right:3%; }
  :root[data-hero="podium"] .hero__big{ align-self:start; padding-top:10px; }
  :root:is([data-hero="stadium"], [data-hero="court"], [data-hero="glass"], [data-hero="split"], [data-hero="pop"], [data-hero="neon"]) :is(.hero__meta, .hero__dots){ translate:none; }
}