/* ==========================================================================
   theme-skins — 테마 전용 배너 · 입구 카드 (팀 회의 2026-09-30 에서 고른 9개를 따로 디자인)
   html[data-hero] = 배너 모양 · html[data-cats] = 입구 카드 모양 (js/theme.js 가 테마마다 붙인다)
   공통 배너 뼈대(.hero · .hero__stage · .hero__big …)는 home.css. 여기서는 모양만 덮어쓴다.

   배너   pitch(피치) · hud(중계 화면) · tape(경고 테이프) · jersey(유니폼) · shards(파편) · editorial(화보) · casino(카지노) · emerald(에메랄드 클럽)
   카드   turf · hud · quiet · shard · editorial · deco · plate · emerald
   ========================================================================== */

/* 새 배너 모양에서는 기본 사선 면 · 줄 · 조명을 끄고 필요한 것만 다시 켠다 */
:root:is([data-hero="pitch"], [data-hero="hud"], [data-hero="tape"], [data-hero="jersey"], [data-hero="shards"], [data-hero="editorial"], [data-hero="casino"], [data-hero="emerald"], [data-hero="slash"], [data-hero="sponsor"], [data-hero="matte"], [data-hero="volt"], [data-hero="app"], [data-hero="minimal"])
  :is(.hero__slab, .hero__stripe, .hero__light, .hero__pitch){ display:none; }
:root:is([data-hero="pitch"], [data-hero="hud"], [data-hero="tape"], [data-hero="jersey"], [data-hero="shards"], [data-hero="editorial"], [data-hero="casino"], [data-hero="emerald"], [data-hero="slash"], [data-hero="sponsor"], [data-hero="matte"], [data-hero="volt"], [data-hero="app"], [data-hero="minimal"])
  .hero__big b::before{ display:none; }


/* ==========================================================================
   pitch — 잔디 결(깎은 줄무늬) · 흰 경기장 선 · 조명. 노랑은 숫자 · 버튼에만
   ========================================================================== */
:root[data-hero="pitch"] .hero{
  background:
    radial-gradient(50% 80% at 12% -10%, rgb(255 255 255 / .10), transparent 70%),
    radial-gradient(50% 80% at 88% -10%, rgb(255 255 255 / .10), transparent 70%),
    linear-gradient(90deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .15) 55%, transparent),
    repeating-linear-gradient(90deg, var(--pitch-a, #0e3526) 0 72px, var(--pitch-b, #0b2c20) 72px 144px);
}
:root[data-hero="pitch"] .hero::before{ display:none; }
:root[data-hero="pitch"] .hero__pitch{ display:block; width:78%; opacity:.22; color:#fff; }
:root[data-hero="pitch"] .hero__big{ color:var(--accent); }
:root[data-hero="pitch"] .hero__big b{ text-shadow:0 8px 0 rgb(0 0 0 / .28); }
:root[data-hero="pitch"] .hero__big span{ background:none; padding:6px 0 0; border-top:3px solid var(--accent); color:#fff; }
:root[data-hero="pitch"] .hero::after{ display:none; }
/* 테두리 — 노란 터치라인 + 네 모서리 코너킥 호 (초록 바탕과 배너를 가른다) */
:root[data-hero="pitch"] .hero{ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 75%, transparent), 0 14px 30px -18px rgb(0 0 0 / .7); }
:root[data-hero="pitch"] .hero__stage::before{
  content:""; position:absolute; inset:0; z-index:1;
  --a:color-mix(in srgb, var(--accent) 85%, transparent);
  background:
    radial-gradient(circle at 0 0, transparent 26px, var(--a) 26px 28.5px, transparent 29px) left top / 40px 40px no-repeat,
    radial-gradient(circle at 100% 0, transparent 26px, var(--a) 26px 28.5px, transparent 29px) right top / 40px 40px no-repeat,
    radial-gradient(circle at 0 100%, transparent 26px, var(--a) 26px 28.5px, transparent 29px) left bottom / 40px 40px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 26px, var(--a) 26px 28.5px, transparent 29px) right bottom / 40px 40px no-repeat;
}

/* 블랙 · 옐로(10) — 같은 경기장 배너를 밤 경기장(검정 잔디)으로 */
:root[data-theme="dark-yellow"]{ --pitch-a:#1a1a1a; --pitch-b:#121212; }

/* turf — 짙은 잔디 카드 · 흰 선 */
:root[data-cats="turf"] .cat{
  background:
    linear-gradient(90deg, rgb(0 0 0 / .35), transparent 70%),
    repeating-linear-gradient(90deg, var(--pitch-a, #0f3a29) 0 38px, var(--pitch-b, #0c3022) 38px 76px);
  border-color:rgb(255 255 255 / .12);
}
:root[data-cats="turf"] .cat__en{ -webkit-text-stroke-color:rgb(255 255 255 / .22); }
:root[data-cats="turf"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--accent); }
:root[data-cats="turf"] .cat__no{ background:rgb(0 0 0 / .35); color:#fff; }
/* 카드 테두리 — 노란 터치라인 · 왼쪽 위 코너킥 호 · 호버 때 선이 진해진다 */
:root[data-cats="turf"] .cat{ clip-path:none; border:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:0 10px 24px -16px rgb(0 0 0 / .8); }
:root[data-cats="turf"] .cat::before{
  width:30px; height:30px; left:0; top:0; clip-path:none;
  background:radial-gradient(circle at 0 0, transparent 18px, var(--accent) 18px 20.5px, transparent 21px);
}
:root[data-cats="turf"] .cat:hover::before{ width:30px; height:30px; }
:root[data-cats="turf"] .cat:hover{ border-color:var(--accent); }
:root[data-cats="turf"] .cat__go{ background:rgb(0 0 0 / .3); }


/* ==========================================================================
   hud — 중계 화면 그래픽: 주사선 · 네 모서리 꺾쇠 · 레이더 원 · 아래 정보 띠
   ========================================================================== */
:root[data-hero="hud"] .hero{
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px),
    radial-gradient(60% 90% at 76% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(115deg, #03070d, #07141f);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* 네 모서리 꺾쇠 */
:root[data-hero="hud"] .hero__stage::before{
  content:""; position:absolute; inset:14px;
  --c:var(--accent);
  background:
    linear-gradient(var(--c),var(--c)) left top / 26px 2px no-repeat,  linear-gradient(var(--c),var(--c)) left top / 2px 26px no-repeat,
    linear-gradient(var(--c),var(--c)) right top / 26px 2px no-repeat, linear-gradient(var(--c),var(--c)) right top / 2px 26px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / 26px 2px no-repeat, linear-gradient(var(--c),var(--c)) left bottom / 2px 26px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / 26px 2px no-repeat, linear-gradient(var(--c),var(--c)) right bottom / 2px 26px no-repeat;
}
:root[data-hero="hud"] .hero::before{ display:none; }
:root[data-hero="hud"] .hero::after{ display:none; }
/* 레이더 원 — 큰 숫자 뒤 */
:root[data-hero="hud"] .hero__big::before{
  content:""; position:absolute; left:50%; top:46%; width:330px; height:330px; translate:-58% -50%; z-index:-1; border-radius:50%;
  background:
    repeating-radial-gradient(circle, transparent 0 46px, color-mix(in srgb, var(--accent) 22%, transparent) 46px 47px),
    conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 25%);
  -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 72%); mask-image:radial-gradient(circle, #000 55%, transparent 72%);
  animation:hudSpin 8s linear infinite;
}
@keyframes hudSpin{ to{ rotate:360deg; } }
:root[data-hero="hud"] .hero__big{ color:#fff; }
:root[data-hero="hud"] .hero__big i{ color:var(--accent); }
:root[data-hero="hud"] .hero__big span{ background:none; border:1px solid var(--accent); color:var(--accent); }
:root[data-hero="hud"] .hero__big span::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; vertical-align:middle; border-radius:50%; background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
/* 정보 띠 — 위쪽 줄을 아래 오른쪽 중계 자막처럼 */
:root[data-hero="hud"] .hero__meta{
  left:auto; right:44px; top:auto; bottom:30px; padding:6px 14px; border-left:3px solid var(--accent);
  background:rgb(0 0 0 / .45); color:rgb(255 255 255 / .6);
}
:root[data-hero="hud"] .hero__meta span::before{ background:var(--accent); }
:root[data-hero="hud"] .hero .btn--gold{ box-shadow:0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-reduced-motion:reduce){ :root[data-hero="hud"] .hero__big::before{ animation:none; } }

/* hud 카드 — 유리 면 · 모서리 꺾쇠 */
:root[data-cats="hud"] .cat{
  --c:color-mix(in srgb, var(--accent) 70%, transparent);
  background:
    linear-gradient(var(--c),var(--c)) right 8px bottom 8px / 16px 2px no-repeat, linear-gradient(var(--c),var(--c)) right 8px bottom 8px / 2px 16px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), #07111b;
  border-color:color-mix(in srgb, var(--accent) 22%, transparent);
}
:root[data-cats="hud"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-cats="hud"] .cat__no{ background:none; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent); }


/* ==========================================================================
   tape — 검정 무대에 경고 테이프 한 줄. 노랑은 테이프 · % · 버튼만
   ========================================================================== */
:root[data-hero="tape"] .hero{
  background:
    radial-gradient(70% 90% at 80% 20%, rgb(255 255 255 / .06), transparent 70%),
    linear-gradient(115deg, #080808, #151515);
}
:root[data-hero="tape"] .hero__slab{
  display:block; clip-path:none; top:auto; bottom:48px; right:-8%; width:64%; height:30px; rotate:-7deg; transform-origin:right;
  background:repeating-linear-gradient(-45deg, var(--accent) 0 18px, #111 18px 36px);
  box-shadow:0 10px 24px rgb(0 0 0 / .5);
}
:root[data-hero="tape"] .hero__stripe--1{ display:block; right:auto; left:0; width:6px; transform:none; opacity:1; background:var(--accent); }
:root[data-hero="tape"] .hero__big{ color:#fff; }
:root[data-hero="tape"] .hero__big i{ color:var(--accent); }
:root[data-hero="tape"] .hero__big span{ background:none; padding:0; color:var(--accent); }
:root[data-hero="tape"] .hero::before{ background:radial-gradient(circle, rgb(255 255 255 / .06) 1px, transparent 1.4px) 0 0 / 7px 7px; }
:root[data-hero="tape"] .hero::after{ border-color:rgb(255 255 255 / .4); }

/* quiet — 어두운 카드 · 포인트는 모서리 삼각형 하나만 */
:root[data-cats="quiet"] .cat__en{ -webkit-text-stroke-color:rgb(255 255 255 / .14); }
:root[data-cats="quiet"] .cat:hover .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent) 70%, transparent); }
:root[data-cats="quiet"] .cat::after{ height:2px; }


/* ==========================================================================
   jersey — 유니폼: 세로 핀 줄무늬 · 어깨띠(사선 띠) · 등번호처럼 흰 숫자
   ========================================================================== */
:root[data-hero="jersey"] .hero{
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 26px),
    radial-gradient(60% 100% at 80% 0%, rgb(255 255 255 / .08), transparent 70%),
    linear-gradient(115deg, #000d27, #0a2257);
}
:root[data-hero="jersey"] .hero::before{ display:none; }
/* 어깨띠 — 넓은 밝은 남색 띠 + 양쪽 노란 가는 선 */
:root[data-hero="jersey"] .hero__slab{
  display:block; right:18%; width:22%; clip-path:none; transform:skewX(-24deg);
  background:linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .04));
  box-shadow:inset 3px 0 0 var(--accent), inset -3px 0 0 var(--accent);
}
:root[data-hero="jersey"] .hero__big{ color:#fff; }
:root[data-hero="jersey"] .hero__big b{ -webkit-text-stroke:3px var(--accent); paint-order:stroke fill; text-shadow:6px 6px 0 rgb(0 0 0 / .35); }
:root[data-hero="jersey"] .hero__big i{ -webkit-text-stroke-width:2px; }
:root[data-hero="jersey"] .hero__big span{ background:var(--accent); color:#00143c; }
:root[data-hero="jersey"] .hero::after{ border-color:var(--accent); }


/* ==========================================================================
   shards — 보라 파편(각진 면 여러 겹) · 라임 빛선. 숫자는 라임으로 빛난다
   ========================================================================== */
:root[data-hero="shards"] .hero{ background:linear-gradient(120deg, #0b0618, #1c0f3d 60%, #2a1560); }
:root[data-hero="shards"] .hero::before{ display:none; }
:root[data-hero="shards"] .hero__slab{
  display:block; top:0; bottom:0; right:0; width:62%;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .07), transparent 55%),
    color-mix(in srgb, var(--accent-2) 28%, transparent);
  clip-path:polygon(38% 0, 100% 0, 100% 100%, 12% 100%, 30% 58%);
}
:root[data-hero="shards"] .hero__stage::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:44%;
  background:linear-gradient(200deg, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 70%);
  clip-path:polygon(60% 0, 100% 0, 100% 70%, 20% 100%, 0 100%);
}
:root[data-hero="shards"] .hero__stripe--1, :root[data-hero="shards"] .hero__stripe--2{
  display:block; width:3px; background:var(--accent); opacity:1; transform:skewX(-28deg);
  box-shadow:0 0 14px var(--accent), 0 0 32px color-mix(in srgb, var(--accent) 50%, transparent);
}
:root[data-hero="shards"] .hero__stripe--1{ right:57%; }
:root[data-hero="shards"] .hero__stripe--2{ right:8%; top:40%; }
:root[data-hero="shards"] .hero__big{ color:var(--accent); }
:root[data-hero="shards"] .hero__big b{ filter:drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 45%, transparent)); }
:root[data-hero="shards"] .hero__big span{ background:#0b0618; color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
:root[data-hero="shards"] .hero::after{ border-color:var(--accent); }

/* shard 카드 — 오른쪽 아래를 비스듬히 잘라 라임 빛선 */
:root[data-cats="shard"] .cat{
  background:
    linear-gradient(135deg, transparent 72%, color-mix(in srgb, var(--accent-2) 35%, transparent) 72%),
    linear-gradient(120deg, #150b2e, #1f1244);
  border-color:rgb(255 255 255 / .08);
}
:root[data-cats="shard"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent-2) 70%, transparent); }
:root[data-cats="shard"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--accent); }


/* ==========================================================================
   editorial — 그래파이트 화보: 필름 결 · 세로 격자선 · 은빛 숫자 · 빨간 점 하나
   ========================================================================== */
:root[data-hero="editorial"] .hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(70% 110% at 78% 30%, #34363b, transparent 70%),
    linear-gradient(115deg, #0e0f11, #1c1d20);
}
/* 세로 격자선 — 잡지 단 나눔 */
:root[data-hero="editorial"] .hero::before{
  width:100%; height:100%;
  background:repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 25%);
  -webkit-mask-image:none; mask-image:none;
}
:root[data-hero="editorial"] .hero::after{ border-color:var(--accent-2); opacity:1; }
/* 배경을 가로지르는 큰 글자 — 속이 찬 아주 옅은 흰색 */
:root[data-hero="editorial"] .hero__word{
  display:block; position:absolute; left:-1%; right:-1%; bottom:-.2em; z-index:0; pointer-events:none; white-space:nowrap; overflow:hidden;
  font-family:var(--font-display); font-size:210px; line-height:1; letter-spacing:.01em; color:rgb(255 255 255 / .045);
}
:root[data-hero="editorial"] .hero__big b{
  background:linear-gradient(180deg, #ffffff 20%, #9a9ca3 90%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 16px 24px rgb(0 0 0 / .55));
}
:root[data-hero="editorial"] .hero__big span{ background:none; padding:0 0 0 18px; color:#fff; position:relative; }
:root[data-hero="editorial"] .hero__big span::before{ content:""; position:absolute; left:0; top:50%; width:9px; height:9px; translate:0 -50%; background:var(--accent-2); }
:root[data-hero="editorial"] .hero__kicker{ color:#fff; }
:root[data-hero="editorial"] .hero__kicker::before{ width:9px; height:9px; transform:none; background:var(--accent-2); }
:root[data-hero="editorial"] .hero__meta span::before{ background:var(--accent-2); }
:root[data-hero="editorial"] .hero__dot.is-on::after{ background:var(--accent-2); }

/* editorial 카드 — 큰 번호 · 흰 윤곽 영문 · 빨간 점 */
:root[data-cats="editorial"] .cat{ clip-path:none; background:linear-gradient(160deg, #1e1f22, #141517); border-color:rgb(255 255 255 / .08); }
:root[data-cats="editorial"] .cat::before{ width:8px; height:8px; left:auto; right:16px; top:auto; bottom:16px; clip-path:none; background:var(--accent-2); }
:root[data-cats="editorial"] .cat:hover::before{ width:8px; height:8px; }
:root[data-cats="editorial"] .cat::after{ background:#fff; height:2px; }
:root[data-cats="editorial"] .cat__no{
  left:24px; top:10px; padding:0; background:none; transform:none;
  font-size:30px; color:transparent; -webkit-text-stroke:1px rgb(255 255 255 / .45);
}
:root[data-cats="editorial"] .cat__en{ -webkit-text-stroke-color:rgb(255 255 255 / .16); }
:root[data-cats="editorial"] .cat:hover .cat__en{ -webkit-text-stroke-color:rgb(255 255 255 / .6); }
:root[data-cats="editorial"] .cat:hover{ border-color:rgb(255 255 255 / .35); }
:root[data-cats="editorial"] .cat:hover .cat__go{ background:#fff; color:#000; }


/* ==========================================================================
   casino — 럭셔리 카지노: 금빛 햇살 · 이중 금테 · 카드 문양 · 금속 금 숫자
   ========================================================================== */
:root[data-hero="casino"]{
  --gold-metal: linear-gradient(180deg, #fff6cf 0%, #f0cf72 28%, #c99a34 55%, #f3d98a 72%, #9b7423 100%);
}
:root[data-hero="casino"] .hero{
  background:
    repeating-conic-gradient(from 0deg at 76% 50%, rgb(217 176 69 / .07) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(45% 80% at 76% 50%, rgb(217 176 69 / .22), transparent 70%),
    radial-gradient(90% 120% at 0% 100%, #1b1206, transparent 70%),
    #080705;
  box-shadow:inset 0 0 0 1px rgb(217 176 69 / .55), inset 0 0 0 6px #080705, inset 0 0 0 7px rgb(217 176 69 / .3);
}
/* 카드 문양 — 왼쪽 위에 아주 옅게 */
:root[data-hero="casino"] .hero::before{
  width:52%; height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' font-family='serif' font-size='22' fill='%23d9b045' fill-opacity='.08'%3E%3Ctext x='8' y='30'%3E%E2%99%A0%3C/text%3E%3Ctext x='56' y='30'%3E%E2%99%A5%3C/text%3E%3Ctext x='8' y='78'%3E%E2%99%A6%3C/text%3E%3Ctext x='56' y='78'%3E%E2%99%A3%3C/text%3E%3C/svg%3E") 0 0 / 96px 96px;
}
:root[data-hero="casino"] .hero::after{ border-color:#d9b045; }
/* 룰렛 휠 — 오른쪽에 반쯤 걸쳐 천천히 돈다 (빨강 · 검정 칸 · 금 테 · 가운데 축) */
:root[data-hero="casino"] .hero__light{
  display:block; inset:auto; right:-110px; top:50%; width:540px; height:540px; translate:0 -50%; border-radius:50%;
  background:
    radial-gradient(circle, #2a1d08 0 11%, #d9b045 11% 12.5%, #1a1306 12.5% 17%, transparent 17%),
    radial-gradient(circle, transparent 0 55%, #d9b045 55% 56.5%, transparent 56.5% 70%, #d9b045 70% 71%, transparent 71%),
    radial-gradient(circle, transparent 0 56%, rgb(0 0 0 / .35) 56% 70%, transparent 70%),
    repeating-conic-gradient(#7e1212 0 9.73deg, #121212 9.73deg 19.46deg);
  box-shadow:0 0 0 12px #241807, 0 0 0 14px #d9b045, 0 0 0 30px #120d05, 0 0 0 31px rgb(217 176 69 / .5), 0 0 80px 20px rgb(0 0 0 / .7);
  opacity:.7; animation:casinoWheel 40s linear infinite;
}
@keyframes casinoWheel{ to{ rotate:360deg; } }
/* 전구 테두리 — 카지노 간판처럼 가장자리를 도는 불빛 */
:root[data-hero="casino"] .hero__stage::before{
  content:""; position:absolute; inset:9px; z-index:3; pointer-events:none;
  --b:radial-gradient(circle, #fff1bf 0 2px, rgb(255 214 102 / .5) 2.6px, transparent 3.4px);
  background:
    var(--b) left top / 22px 8px repeat-x, var(--b) left bottom / 22px 8px repeat-x,
    var(--b) left top / 8px 22px repeat-y, var(--b) right top / 8px 22px repeat-y;
  animation:casinoBulbs 1.2s steps(2) infinite;
}
@keyframes casinoBulbs{ 50%{ opacity:.45; } }
/* 칩 — 왼쪽 아래 · 휠 옆에 몇 개 */
:root[data-hero="casino"] .hero__word{
  display:block; position:absolute; inset:0; z-index:0; pointer-events:none; font-size:0;
  --chip-r:radial-gradient(circle closest-side, #b31b1b 0 34%, #f3e3b3 34% 38%, #b31b1b 38% 58%, #f3e3b3 58% 62%, #8c1414 62% 95%, transparent 97%);
  --chip-k:radial-gradient(circle closest-side, #151515 0 34%, #d9b045 34% 38%, #151515 38% 58%, #d9b045 58% 62%, #0b0b0b 62% 95%, transparent 97%);
  background:
    var(--chip-k) right 150px bottom 26px / 64px 64px no-repeat,
    var(--chip-r) right 104px bottom 12px / 76px 76px no-repeat,
    var(--chip-r) right 196px bottom 8px / 56px 56px no-repeat;
  filter:drop-shadow(0 6px 8px rgb(0 0 0 / .6));
}
/* 반짝이 — 숫자 주변 금가루 */
:root[data-hero="casino"] .hero__stage::after{
  content:""; position:absolute; right:6%; top:10%; width:44%; height:80%;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff3c0, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff3c0, transparent),
    radial-gradient(2px 2px at 85% 65%, #fff3c0, transparent), radial-gradient(1.5px 1.5px at 35% 80%, #fff3c0, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent), radial-gradient(2.5px 2.5px at 10% 60%, #ffe38a, transparent);
  animation:casinoTwinkle 2.6s ease-in-out infinite alternate;
}
@keyframes casinoTwinkle{ from{ opacity:.35; } to{ opacity:1; } }
:root[data-hero="casino"] .hero__big b{
  background:var(--gold-metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 #5c4210) drop-shadow(0 18px 26px rgb(0 0 0 / .6));
}
:root[data-hero="casino"] .hero__big span{
  background:#0b0a08; color:#f0cf72; padding:5px 16px; letter-spacing:.2em;
  box-shadow:inset 0 0 0 1px #d9b045, 0 0 0 3px #0b0a08, 0 0 0 4px rgb(217 176 69 / .45);
}
:root[data-hero="casino"] .hero__big span::before, :root[data-hero="casino"] .hero__big span::after{ content:"◆"; margin:0 10px; font-size:.6em; vertical-align:middle; }
:root[data-hero="casino"] .hero__kicker{ color:#f0cf72; letter-spacing:.18em; }
:root[data-hero="casino"] .hero__kicker::before{ content:"◆"; width:auto; height:auto; background:none; transform:none; font-size:.7em; }
:root[data-hero="casino"] .hero__title{ background:linear-gradient(180deg, #fff 40%, #e9d6a0); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-hero="casino"] .hero .btn--gold{ background:var(--gold-metal); border-color:#d9b045; color:#1a1305; box-shadow:0 6px 20px rgb(217 176 69 / .35); }
:root[data-hero="casino"] .hero__dot.is-on::after{ background:#d9b045; }
:root[data-hero="casino"] .hero__meta b{ color:#f0cf72; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="casino"] .hero__stage::after, :root[data-hero="casino"] .hero__stage::before, :root[data-hero="casino"] .hero__light{ animation:none; } }
:root[data-hero="casino"] .hero::after{ display:none; }

/* deco 카드 — 검정 면 · 금 이중 테 · 모서리 다이아 · 금 윤곽 영문 */
:root[data-cats="deco"] .cat{
  clip-path:none; border:1px solid rgb(217 176 69 / .55);
  background:radial-gradient(80% 140% at 100% 50%, rgb(217 176 69 / .12), transparent 60%), #0d0b08;
  box-shadow:inset 0 0 0 4px #0d0b08, inset 0 0 0 5px rgb(217 176 69 / .25);
}
:root[data-cats="deco"] .cat::before{ content:"◆"; width:auto; height:auto; left:12px; top:10px; background:none; clip-path:none; color:#d9b045; font-size:10px; }
:root[data-cats="deco"] .cat:hover::before{ width:auto; height:auto; }
:root[data-cats="deco"] .cat::after{ background:linear-gradient(90deg, #9b7423, #f0cf72, #9b7423); }
:root[data-cats="deco"] .cat__no{ background:none; color:#d9b045; }
:root[data-cats="deco"] .cat__en{ -webkit-text-stroke-color:rgb(217 176 69 / .45); }
:root[data-cats="deco"] .cat:hover .cat__en{ -webkit-text-stroke-color:#f0cf72; }
:root[data-cats="deco"] .cat:hover{ border-color:#f0cf72; }
:root[data-cats="deco"] .cat--casino{ --suit:"♠"; } :root[data-cats="deco"] .cat--slot{ --suit:"7"; } :root[data-cats="deco"] .cat--sports{ --suit:"♣"; }
:root[data-cats="deco"] .cat__title::after{
  content:var(--suit); position:absolute; left:-2px; top:-38px; font-family:"Cinzel", serif; font-size:13px; color:rgb(217 176 69 / .8);
}
:root[data-cats="deco"] .cat__go{ background:rgb(217 176 69 / .14); color:#f0cf72; }
:root[data-cats="deco"] .cat:hover .cat__go{ background:#d9b045; color:#1a1305; }


/* ==========================================================================
   plate — (화이트 · 네이비 · 골드) 남색 명판 카드 · 안쪽 금 가는 테 · 금 윤곽 영문
   ========================================================================== */
:root[data-cats="plate"] .cat{
  clip-path:none; border:0;
  background:
    radial-gradient(70% 140% at 100% 0%, rgb(245 183 0 / .16), transparent 60%),
    linear-gradient(135deg, #0b1f4b, #122c66);
  box-shadow:inset 0 0 0 6px #0b1f4b, inset 0 0 0 7px rgb(245 183 0 / .55), 0 10px 24px -12px rgb(11 31 75 / .6);
  --text:#fff; --text-sub:rgb(255 255 255 / .62); --text-mute:rgb(255 255 255 / .45); color:#fff;
}
:root[data-cats="plate"] .cat::before{ left:7px; top:7px; width:22px; height:22px; background:#f5b700; }
:root[data-cats="plate"] .cat:hover::before{ width:30px; height:30px; }
:root[data-cats="plate"] .cat::after{ left:7px; right:7px; bottom:7px; background:#f5b700; }
:root[data-cats="plate"] .cat__no{ background:rgb(245 183 0 / .16); color:#f5b700; }
:root[data-cats="plate"] .cat__en{ -webkit-text-stroke-color:rgb(245 183 0 / .4); }
:root[data-cats="plate"] .cat:hover .cat__en{ -webkit-text-stroke-color:#f5b700; }
:root[data-cats="plate"] .cat__go{ background:rgb(255 255 255 / .1); color:#fff; }
:root[data-cats="plate"] .cat:hover .cat__go{ background:#f5b700; color:#0b1f4b; }


/* ==========================================================================
   emerald — 에메랄드 클럽: 짙은 초록 바탕 · 샴페인 골드 격자 · 금테 두른 사선 명판 위 금속 금 숫자
   ========================================================================== */
:root[data-hero="emerald"]{
  --em-gold: #e8c56a;
  --em-gold-metal: linear-gradient(180deg, #fff8df 0%, #f1d993 30%, #d4ad55 58%, #f4e2a8 76%, #a9843a 100%);
  --em-deep: #03120d;
}
:root[data-hero="emerald"] .hero{
  background:
    repeating-linear-gradient(45deg, rgb(232 197 106 / .045) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgb(232 197 106 / .045) 0 1px, transparent 1px 30px),
    radial-gradient(55% 90% at 80% 45%, rgb(16 185 129 / .30), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgb(0 0 0 / .5), transparent 70%),
    linear-gradient(120deg, #03100c, #062a1f 58%, #0a3a2b);
  box-shadow:inset 0 0 0 1px rgb(232 197 106 / .35), inset 0 0 0 5px var(--em-deep), inset 0 0 0 6px rgb(232 197 106 / .14);
}
:root[data-hero="emerald"] .hero::before{ display:none; }
:root[data-hero="emerald"] .hero::after{ border-color:var(--em-gold); opacity:.8; }
/* 명판 — 금테(뒤 판) 위에 초록 판을 1.5px 안쪽으로 겹친다 */
:root[data-hero="emerald"] .hero__stripe--1{
  display:block; z-index:1; top:34px; bottom:34px; right:calc(5% - 2px); width:calc(33% + 4px); transform:none; opacity:1;
  background:linear-gradient(160deg, #f6e3a4, #b88d3a 50%, #f1d993);
  clip-path:polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}
:root[data-hero="emerald"] .hero__slab{
  display:block; z-index:2; top:36px; bottom:36px; right:5%; width:33%;
  background:
    radial-gradient(70% 60% at 50% 30%, rgb(255 255 255 / .10), transparent 70%),
    repeating-linear-gradient(-72deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 12px),
    linear-gradient(165deg, #0f6247, #073727 60%, #052a1e);
  clip-path:polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}
/* 명판 뒤 금빛 번짐 */
:root[data-hero="emerald"] .hero__stripe--2{
  display:block; z-index:0; top:10%; bottom:10%; right:8%; width:30%; transform:none; opacity:1;
  background:radial-gradient(closest-side, rgb(232 197 106 / .35), transparent); filter:blur(18px);
}
:root[data-hero="emerald"] .hero__big{ padding-right:4%; }
:root[data-hero="emerald"] .hero__big b{
  font-size:150px; letter-spacing:-.04em;
  background:var(--em-gold-metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #6e5418) drop-shadow(0 14px 22px rgb(0 0 0 / .55));
}
:root[data-hero="emerald"] .hero__big.is-long b{ font-size:100px; }
:root[data-hero="emerald"] .hero__big span{
  margin-top:14px; padding:5px 16px; background:var(--em-deep); color:var(--em-gold); transform:none; letter-spacing:.22em;
  box-shadow:inset 0 0 0 1px rgb(232 197 106 / .7);
}
/* 윗 문구 — 양옆 금 가는 선 사이에 */
:root[data-hero="emerald"] .hero__kicker{
  padding:0; background:none; transform:none; color:var(--em-gold); font-size:14px; letter-spacing:.24em;
}
:root[data-hero="emerald"] .hero__kicker::before, :root[data-hero="emerald"] .hero__kicker::after{
  content:""; display:block; width:26px; height:1px; background:linear-gradient(90deg, transparent, var(--em-gold)); transform:none;
}
:root[data-hero="emerald"] .hero__kicker::after{ background:linear-gradient(90deg, var(--em-gold), transparent); }
:root[data-hero="emerald"] .hero__title{ text-shadow:0 2px 18px rgb(0 0 0 / .35); }
:root[data-hero="emerald"] .hero .btn--gold{ background:var(--em-gold-metal); border-color:var(--em-gold); color:#1d1606; box-shadow:0 8px 22px -6px rgb(232 197 106 / .55); }
:root[data-hero="emerald"] .hero__cta .btn:not(.btn--gold){ border-color:rgb(232 197 106 / .45); }
:root[data-hero="emerald"] .hero__cta .btn:not(.btn--gold):hover{ border-color:var(--em-gold); color:var(--em-gold); }
:root[data-hero="emerald"] .hero__meta b{ color:var(--em-gold); }
:root[data-hero="emerald"] .hero__meta span::before{ background:#10b981; }
:root[data-hero="emerald"] .hero__dot.is-on::after{ background:var(--em-gold); }

/* emerald 카드 — 초록 판 · 금 가는 테 · 왼쪽 금 막대 · 알약 숫자 · 금테 원 화살표 */
:root[data-cats="emerald"] .cat{
  clip-path:none; border:1px solid rgb(232 197 106 / .32);
  background:
    radial-gradient(80% 160% at 100% 0%, rgb(16 185 129 / .22), transparent 60%),
    repeating-linear-gradient(45deg, rgb(232 197 106 / .035) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #0b3a2b, #062219);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .06), 0 12px 26px -18px rgb(0 0 0 / .9);
  transition:border-color var(--t-fast), box-shadow var(--t);
}
:root[data-cats="emerald"] .cat::before{
  width:3px; height:auto; left:0; top:16px; bottom:16px; clip-path:none;
  background:linear-gradient(180deg, transparent, #e8c56a 25%, #e8c56a 75%, transparent);
}
:root[data-cats="emerald"] .cat:hover::before{ width:3px; height:auto; }
:root[data-cats="emerald"] .cat::after{ height:1px; background:linear-gradient(90deg, transparent, #e8c56a, transparent); }
:root[data-cats="emerald"] .cat:hover{ border-color:rgb(232 197 106 / .8); box-shadow:inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(232 197 106 / .25), 0 16px 34px -14px rgb(232 197 106 / .28); }
:root[data-cats="emerald"] .cat__no{ transform:none; padding:1px 9px; border-radius:99px; background:none; box-shadow:inset 0 0 0 1px rgb(232 197 106 / .5); color:#e8c56a; font-size:11px; }
:root[data-cats="emerald"] .cat__stat{ padding:2px 10px; border-radius:99px; background:rgb(0 0 0 / .28); box-shadow:inset 0 0 0 1px rgb(232 197 106 / .3); color:rgb(232 197 106 / .75); }
:root[data-cats="emerald"] .cat__stat b{ color:#fff; }
:root[data-cats="emerald"] .cat__live{ background:#10b981; box-shadow:0 0 0 3px rgb(16 185 129 / .3); }
:root[data-cats="emerald"] .cat__en{ -webkit-text-stroke-color:rgb(232 197 106 / .38); }
:root[data-cats="emerald"] .cat:hover .cat__en{ -webkit-text-stroke-color:#f1d993; }
:root[data-cats="emerald"] .cat__go{ transform:none; border-radius:50%; background:none; box-shadow:inset 0 0 0 1px rgb(232 197 106 / .55); color:#e8c56a; }
:root[data-cats="emerald"] .cat__go svg{ transform:none; }
:root[data-cats="emerald"] .cat:hover .cat__go{ background:#e8c56a; color:#062219; }
@media (max-width:1023px){
  :root[data-hero="emerald"] .hero__slab, :root[data-hero="emerald"] .hero__stripe--1{ top:16px; bottom:16px; width:40%; }
  :root[data-hero="emerald"] .hero__stripe--1{ width:calc(40% + 4px); }
  :root[data-hero="emerald"] .hero__big b{ font-size:58px; }
  :root[data-hero="emerald"] .hero__big.is-long b{ font-size:36px; }
  :root[data-hero="emerald"] .hero__big span{ margin-top:4px; padding:2px 6px; letter-spacing:.08em; }
  :root[data-hero="emerald"] .hero__kicker{ font-size:10px; letter-spacing:.14em; gap:6px; }
  :root[data-hero="emerald"] .hero__kicker::before, :root[data-hero="emerald"] .hero__kicker::after{ width:14px; }
  :root[data-hero="pitch"] .hero__stage::before{ background-size:26px 26px; }
}

/* ==========================================================================
   slash — 그래파이트 · 레드 (스포츠 스폰서 포스터): 굵은 제목 끝 빨간 마침표 ·
           오른쪽에 빨강 · 검정 · 흰 사선 띠가 겹쳐 달린다 · 각진 빨간 버튼
   ========================================================================== */
:root[data-hero="slash"] .hero{
  border-radius:4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),
    radial-gradient(60% 100% at 30% 0%, rgb(255 255 255 / .06), transparent 70%),
    linear-gradient(115deg, #1d1e21, #111214 70%);
}
:root[data-hero="slash"] .hero::after{ display:none; }
/* 투명 세로 격자선 — 잡지 단 나눔 (이전 그라파이트에서 가져옴) */
:root[data-hero="slash"] .hero::before{
  width:100%; height:100%; z-index:0;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .055) 0 1px, transparent 1px 12.5%),
    linear-gradient(rgb(255 255 255 / .04), rgb(255 255 255 / .04)) 0 72% / 100% 1px no-repeat;
  -webkit-mask-image:none; mask-image:none;
}
/* 배경을 가로지르는 큰 투명 글자 */
:root[data-hero="slash"] .hero__word{
  display:block; position:absolute; left:-1%; right:-1%; bottom:-.18em; z-index:0; pointer-events:none; white-space:nowrap; overflow:hidden;
  font-family:var(--font-display); font-size:190px; font-weight:900; line-height:1; letter-spacing:-.04em;
  color:rgb(255 255 255 / .04); -webkit-text-stroke:1px rgb(255 255 255 / .07);
  transform:translateX(40px); opacity:0; transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
:root[data-hero="slash"] .hero__slide.is-on .hero__word{ transform:none; opacity:1; }
/* 속도선 — 오른쪽에서 왼쪽으로 스치는 가는 빛줄기 (조명 자리를 빌린다) */
:root[data-hero="slash"] .hero__light{
  display:block; inset:0; z-index:0;
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / .35) 60%, transparent) 0 22% / 180px 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(212 25 44 / .9) 60%, transparent) 0 38% / 260px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .25) 60%, transparent) 0 61% / 140px 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(212 25 44 / .7) 60%, transparent) 0 83% / 220px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .3) 60%, transparent) 0 12% / 120px 1px no-repeat;
  animation:slashSpeed 2.8s linear infinite;
}
@keyframes slashSpeed{
  from{ background-position:110% 22%, 130% 38%, 105% 61%, 140% 83%, 120% 12%; }
  to  { background-position:-30% 22%, -60% 38%, -20% 61%, -50% 83%, -25% 12%; }
}
/* 사선 띠 묶음 — 모두 같은 기울기(-24도)로, 굵기 · 색을 달리해 겹친다 */
:root[data-hero="slash"] .hero__stage{ --tilt:-24deg; }
:root[data-hero="slash"] .hero__slab{      /* 빨강 넓은 띠 — 위로 빛이 훑고 지나간다 */
  display:block; clip-path:none; top:-20%; bottom:-20%; right:14%; width:150px; transform:skewX(var(--tilt));
  background:
    linear-gradient(180deg, transparent 0%, rgb(255 255 255 / .28) 8%, transparent 16%) 0 -40% / 100% 300% no-repeat,
    linear-gradient(180deg, #e4202f, #a80f1c);
  box-shadow:0 0 50px rgb(212 25 44 / .35);
  animation:slashIn .9s cubic-bezier(.16,1,.3,1) both, slashShine 3.6s ease-in-out 1s infinite;
}
@keyframes slashIn{ from{ translate:120px 0; opacity:0; } }
@keyframes slashShine{ from{ background-position:0 -40%, 0 0; } to{ background-position:0 140%, 0 0; } }
:root[data-hero="slash"] :is(.hero__stripe--1, .hero__stripe--2){ animation:slashIn 1s cubic-bezier(.16,1,.3,1) both; }
:root[data-hero="slash"] .hero__stripe--2{ animation-delay:.12s; }
:root[data-hero="slash"] .hero__stripe--1{ /* 검정 굵은 띠 — 빨강 옆 */
  display:block; top:-20%; bottom:-20%; right:calc(14% + 150px); width:92px; opacity:1; transform:skewX(var(--tilt));
  background:linear-gradient(180deg, #0a0a0b, #000);
}
:root[data-hero="slash"] .hero__stripe--2{ /* 빨강 가는 띠 — 바깥쪽 */
  display:block; top:-20%; bottom:-20%; right:calc(14% + 262px); width:14px; opacity:1; transform:skewX(var(--tilt)); background:#d4192c;
}
:root[data-hero="slash"] .hero__stage::before{ /* 오른쪽 끝 검정 띠 + 흰 가는 선 */
  content:""; position:absolute; top:-20%; bottom:-20%; right:-40px; width:120px; transform:skewX(var(--tilt));
  background:linear-gradient(90deg, #fff 0 3px, transparent 3px 18px, #070708 18px);
}
:root[data-hero="slash"] .hero__stage::after{ /* 띠 사이로 튀는 빨간 조각 · 흩날리는 먼지 */
  content:""; position:absolute; right:4%; top:0; bottom:0; width:48%;
  background:
    linear-gradient(#d4192c, #d4192c) 18% 20% / 28px 5px no-repeat,
    linear-gradient(#fff, #fff) 72% 80% / 18px 4px no-repeat,
    linear-gradient(#d4192c, #d4192c) 90% 38% / 36px 6px no-repeat,
    linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / .5)) 40% 70% / 10px 3px no-repeat,
    radial-gradient(2px 2px at 30% 88%, #fff, transparent), radial-gradient(1.5px 1.5px at 36% 84%, #d4192c, transparent),
    radial-gradient(2.5px 2.5px at 26% 92%, rgb(255 255 255 / .7), transparent), radial-gradient(1.5px 1.5px at 44% 90%, #fff, transparent),
    radial-gradient(3px 3px at 22% 80%, #d4192c, transparent), radial-gradient(1px 1px at 48% 82%, #fff, transparent),
    radial-gradient(2px 2px at 60% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 60%, #d4192c, transparent);
  transform:skewX(var(--tilt)); opacity:.95;
  animation:slashDust 3s ease-in-out infinite alternate;
}
@keyframes slashDust{ to{ translate:-14px 6px; opacity:.6; } }
/* 큰 숫자 — 검정 · 빨강 띠 위에 흰 굵은 글자 */
:root[data-hero="slash"] .hero__big{ color:#fff; padding-right:10%; }
:root[data-hero="slash"] .hero__big b{
  font-weight:900; letter-spacing:-.05em;
  background:linear-gradient(180deg, #ffffff 25%, #a9abb1 90%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 14px 22px rgb(0 0 0 / .6));
}
/* 숫자 뒤 투명 잔상 — 같은 숫자를 옅게, 비스듬히 밀어 (배너 큰 글자와 같은 결) */
:root[data-hero="slash"] .hero__big::after{
  content:attr(data-echo); position:absolute; right:calc(10% - 22px); top:-10px; z-index:-1; white-space:nowrap; pointer-events:none;
  font-family:var(--font-display); font-weight:900; font-size:150px; line-height:.82; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.5px rgb(255 255 255 / .18);
}
:root[data-hero="slash"] .hero__big.is-long::after{ font-size:104px; }
:root[data-hero="slash"] .hero__big i{ background:linear-gradient(180deg, #ff3a48, #c01020); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-hero="slash"] .hero__big span{ transform:none; margin-top:14px; padding:7px 16px; background:#d4192c; color:#fff; letter-spacing:.12em; }
/* 제목 — 아주 굵게, 끝에 빨간 마침표 */
:root[data-hero="slash"] .hero__title{ font-size:52px; font-weight:900; letter-spacing:-.04em; }
:root[data-hero="slash"] .hero__title::after{ content:"."; color:#d4192c; }
:root[data-hero="slash"] .hero__kicker{ padding:0; background:none; transform:none; color:#fff; font-size:14px; letter-spacing:.16em; }
:root[data-hero="slash"] .hero__kicker::before{ display:block; width:10px; height:10px; transform:none; background:#d4192c; }
:root[data-hero="slash"] .hero__sub{ color:rgb(255 255 255 / .72); }
:root[data-hero="slash"] .hero .btn{ border-radius:2px; }
:root[data-hero="slash"] .hero .btn--gold{ background:#d4192c; border-color:#d4192c; color:#fff; box-shadow:0 10px 24px -10px rgb(212 25 44 / .8); }
:root[data-hero="slash"] .hero__cta .btn:not(.btn--gold){ border-color:rgb(255 255 255 / .5); }
:root[data-hero="slash"] .hero__meta b{ font-style:normal; }
:root[data-hero="slash"] .hero__meta span::before{ background:#d4192c; }
:root[data-hero="slash"] .hero__dot.is-on::after{ background:#d4192c; }

/* slash 카드 — 그래파이트 면 · 오른쪽 끝 빨강 · 검정 사선 띠 · 제목 끝 빨간 마침표 */
:root[data-cats="slash"] .cat{
  clip-path:none; border-radius:4px; border:1px solid rgb(255 255 255 / .07);
  background:
    linear-gradient(-66deg, #d4192c 0 34px, #070708 34px 60px, transparent 60px) right top / 100% 100% no-repeat,
    linear-gradient(160deg, #202124, #151618);
}
:root[data-cats="slash"] .cat::before{ display:none; }
:root[data-cats="slash"] .cat::after{ background:#d4192c; height:3px; }
:root[data-cats="slash"] .cat__title{ font-weight:900; letter-spacing:-.03em; }
:root[data-cats="slash"] .cat__title::after{ content:"."; color:#d4192c; }
:root[data-cats="slash"] .cat__no{ left:24px; transform:none; background:none; padding:0; color:rgb(255 255 255 / .45); }
:root[data-cats="slash"] .cat__stat{ right:78px; }
:root[data-cats="slash"] .cat__en{ right:60px; -webkit-text-stroke-color:rgb(255 255 255 / .13); }
:root[data-cats="slash"] .cat:hover .cat__en{ -webkit-text-stroke-color:rgb(255 255 255 / .5); }
:root[data-cats="slash"] .cat__go{ margin-right:52px; transform:none; border-radius:2px; background:rgb(255 255 255 / .08); }
:root[data-cats="slash"] .cat__go svg{ transform:none; }
:root[data-cats="slash"] .cat:hover{ border-color:rgb(255 255 255 / .2); }
:root[data-cats="slash"] .cat:hover .cat__go{ background:#d4192c; color:#fff; }
@media (prefers-reduced-motion:reduce){
  :root[data-hero="slash"] :is(.hero__light, .hero__slab, .hero__stripe--1, .hero__stripe--2){ animation:none; }
  :root[data-hero="slash"] .hero__stage::after{ animation:none; }
}
@media (max-width:1023px){
  :root[data-hero="slash"] .hero__slab{ width:70px; right:10%; }
  :root[data-hero="slash"] .hero__stripe--1{ width:44px; right:calc(10% + 70px); }
  :root[data-hero="slash"] .hero__stripe--2{ width:8px; right:calc(10% + 124px); }
  :root[data-hero="slash"] .hero__title{ font-size:22px; }
  :root[data-hero="slash"] .hero__word{ font-size:80px; }
  :root[data-hero="slash"] .hero__big::after{ display:none; }
  :root[data-hero="slash"] .hero__big span{ margin-top:4px; padding:2px 6px; }
  :root[data-hero="slash"] .hero__kicker{ font-size:10px; gap:6px; letter-spacing:.1em; }
  :root[data-hero="slash"] .hero__kicker::before{ width:6px; height:6px; }
  :root[data-cats="slash"] .cat{ background:linear-gradient(-66deg, #d4192c 0 10px, #070708 10px 18px, transparent 18px) right top / 100% 100% no-repeat, #1b1c1f; }
  :root[data-cats="slash"] .cat__go{ margin-right:10px; }
}

/* ==========================================================================
   sponsor — 흰 배너(스포츠 스폰서 광고): 흰 바탕 · //// 빗살무늬 · 오른쪽 빨강 · 검정 사선 띠 ·
             검정 굵은 제목 끝 빨간 마침표 · 각진 진한 빨강 버튼
   페이지 바탕이 흰색(light-sports)이든 차콜(dark-charcoal)이든 배너 · 카드는 흰색이다
   ========================================================================== */
:root[data-hero="sponsor"] .hero{
  --ink:#141518; --red:#c41e2a; --red-deep:#8e1520;
  color:var(--ink); border-radius:4px;
  background:
    radial-gradient(70% 90% at 70% 40%, #ffffff, transparent 70%),
    linear-gradient(100deg, #ffffff 40%, #eceef1);
  box-shadow:0 18px 40px -26px rgb(0 0 0 / .45);
}
:root[data-theme^="light-"][data-hero="sponsor"] .hero{ box-shadow:0 0 0 1px #e3e4e8, 0 18px 40px -26px rgb(0 0 0 / .3); }
:root[data-hero="sponsor"] .hero::after{ display:none; }
/* 옅은 격자선 */
:root[data-hero="sponsor"] .hero::before{
  width:100%; height:100%;
  background:repeating-linear-gradient(90deg, rgb(20 21 24 / .045) 0 1px, transparent 1px 12.5%);
  -webkit-mask-image:none; mask-image:none;
}
/* //// 빗살무늬 판 — 가운데에서 오른쪽으로 비스듬히 */
:root[data-hero="sponsor"] .hero__stage::before{
  content:""; position:absolute; top:0; bottom:0; right:16%; width:46%; transform:skewX(-24deg);
  background:repeating-linear-gradient(90deg, rgb(20 21 24 / .13) 0 2px, transparent 2px 11px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); mask-image:linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent);
}
/* 사선 띠 — 오른쪽 끝: 진한 빨강 넓은 띠 · 검정 띠 · 빨강 가는 띠 · 흰 틈 */
:root[data-hero="sponsor"] .hero__slab{
  display:block; clip-path:none; top:-20%; bottom:-20%; right:-30px; width:190px; transform:skewX(-24deg);
  background:
    linear-gradient(180deg, transparent 0%, rgb(255 255 255 / .22) 8%, transparent 16%) 0 -40% / 100% 300% no-repeat,
    linear-gradient(180deg, #d42431, var(--red-deep));
  animation:slashIn .9s cubic-bezier(.16,1,.3,1) both, slashShine 3.6s ease-in-out 1s infinite;
}
:root[data-hero="sponsor"] .hero__stripe--1{
  display:block; top:-20%; bottom:-20%; right:170px; width:70px; opacity:1; transform:skewX(-24deg);
  background:linear-gradient(180deg, #1c1d21, #0b0b0c); animation:slashIn 1s cubic-bezier(.16,1,.3,1) both;
}
:root[data-hero="sponsor"] .hero__stripe--2{
  display:block; top:-20%; bottom:-20%; right:258px; width:12px; opacity:1; transform:skewX(-24deg);
  background:var(--red); animation:slashIn 1s cubic-bezier(.16,1,.3,1) .12s both;
}
/* 속도선 — 흰 바탕 위라 진한 회색 · 빨강 */
:root[data-hero="sponsor"] .hero__light{
  display:block; inset:0;
  background:
    linear-gradient(90deg, transparent, rgb(20 21 24 / .35) 60%, transparent) 0 24% / 170px 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(196 30 42 / .8) 60%, transparent) 0 40% / 240px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(20 21 24 / .25) 60%, transparent) 0 63% / 130px 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(196 30 42 / .6) 60%, transparent) 0 84% / 200px 2px no-repeat;
  animation:slashSpeed 2.8s linear infinite;
}
/* 흩날리는 조각 — 빨강 · 검정 */
:root[data-hero="sponsor"] .hero__stage::after{
  content:""; position:absolute; right:14%; top:0; bottom:0; width:40%;
  background:
    linear-gradient(#c41e2a, #c41e2a) 16% 18% / 26px 5px no-repeat,
    linear-gradient(#141518, #141518) 64% 82% / 16px 4px no-repeat,
    linear-gradient(#c41e2a, #c41e2a) 84% 36% / 30px 5px no-repeat,
    radial-gradient(2px 2px at 30% 88%, #141518, transparent), radial-gradient(1.5px 1.5px at 36% 84%, #c41e2a, transparent),
    radial-gradient(2.5px 2.5px at 26% 92%, rgb(20 21 24 / .6), transparent), radial-gradient(1.5px 1.5px at 44% 90%, #c41e2a, transparent);
  transform:skewX(-24deg); animation:slashDust 3s ease-in-out infinite alternate;
}
/* 큰 투명 글자 */
:root[data-hero="sponsor"] .hero__word{
  display:block; position:absolute; left:-1%; right:-1%; bottom:-.18em; z-index:0; pointer-events:none; white-space:nowrap; overflow:hidden;
  font-family:var(--font-display); font-size:170px; font-weight:900; line-height:1; letter-spacing:-.04em;
  color:rgb(20 21 24 / .035);
}
/* 글자 — 검정 · 빨간 마침표 */
:root[data-hero="sponsor"] .hero__meta{ color:rgb(20 21 24 / .45); }
:root[data-hero="sponsor"] .hero__meta b{ color:var(--ink); font-style:normal; }
:root[data-hero="sponsor"] .hero__meta span::before{ background:var(--red); }
:root[data-hero="sponsor"] .hero__kicker{ padding:0; background:none; transform:none; color:var(--ink); font-size:14px; letter-spacing:.16em; }
:root[data-hero="sponsor"] .hero__kicker::before{ display:block; width:10px; height:10px; transform:none; background:var(--red); }
:root[data-hero="sponsor"] .hero__title{ font-size:54px; font-weight:900; letter-spacing:-.045em; color:var(--ink); }
:root[data-hero="sponsor"] .hero__title::after{ content:"."; color:var(--red); }
:root[data-hero="sponsor"] .hero__sub{ color:#4a4c52; }
:root[data-hero="sponsor"] .hero .btn{ border-radius:3px; }
:root[data-hero="sponsor"] .hero .btn--gold{ background:var(--red-deep); border-color:var(--red-deep); color:#fff; box-shadow:0 10px 22px -12px rgb(142 21 32 / .9); }
:root[data-hero="sponsor"] .hero .btn--gold:hover{ background:var(--red); border-color:var(--red); }
:root[data-hero="sponsor"] .hero__cta .btn:not(.btn--gold){ color:var(--ink); border-color:rgb(20 21 24 / .3); }
:root[data-hero="sponsor"] .hero__cta .btn:not(.btn--gold):hover{ border-color:var(--ink); color:var(--ink); }
:root[data-hero="sponsor"] .hero__dot{ color:rgb(20 21 24 / .4); }
:root[data-hero="sponsor"] .hero__dot.is-on{ color:var(--ink); }
:root[data-hero="sponsor"] .hero__dot.is-on::after{ background:var(--red); }
/* 큰 숫자 — 빗살무늬 위 검정 굵은 글자 · 빨간 % · 빨간 라벨 */
:root[data-hero="sponsor"] .hero__big{ color:var(--ink); padding-right:22%; }
:root[data-hero="sponsor"] .hero__big b{ font-weight:900; letter-spacing:-.05em; text-shadow:6px 6px 0 rgb(20 21 24 / .06); }
:root[data-hero="sponsor"] .hero__big i{ color:var(--red); }
:root[data-hero="sponsor"] .hero__big span{ transform:none; margin-top:14px; padding:7px 16px; background:var(--red-deep); color:#fff; letter-spacing:.12em; }

/* sponsor 카드 — 흰 카드 · 오른쪽 //// 빗살 띠 · 빨강 · 검정 사선 모서리 · 제목 끝 빨간 마침표 */
:root[data-cats="sponsor"] .cat{
  --text:#141518; --text-sub:#5a5c63; --text-mute:#8a8c93; --surface-2:#f0f1f3; --fg-rgb:20 21 24;
  clip-path:none; border-radius:4px; border:1px solid #e3e4e8; color:#141518;
  background:
    linear-gradient(-66deg, #c41e2a 0 26px, #141518 26px 44px, transparent 44px) right top / 100% 100% no-repeat,
    repeating-linear-gradient(-66deg, rgb(20 21 24 / .1) 0 2px, transparent 2px 10px) right top / 46% 100% no-repeat,
    #ffffff;
  box-shadow:0 12px 26px -20px rgb(0 0 0 / .5);
}
:root[data-cats="sponsor"] .cat::before{ display:none; }
:root[data-cats="sponsor"] .cat::after{ background:#c41e2a; height:3px; }
:root[data-cats="sponsor"] .cat__title{ font-weight:900; letter-spacing:-.03em; }
:root[data-cats="sponsor"] .cat__title::after{ content:"."; color:#c41e2a; }
:root[data-cats="sponsor"] .cat__no{ left:24px; transform:none; background:none; padding:0; color:#9a9ca2; }
:root[data-cats="sponsor"] .cat__stat{ right:64px; }
:root[data-cats="sponsor"] .cat__en{ right:44px; -webkit-text-stroke-color:rgb(20 21 24 / .12); }
:root[data-cats="sponsor"] .cat:hover .cat__en{ -webkit-text-stroke-color:rgb(196 30 42 / .6); }
:root[data-cats="sponsor"] .cat__go{ margin-right:38px; transform:none; border-radius:3px; background:#f0f1f3; color:#141518; }
:root[data-cats="sponsor"] .cat__go svg{ transform:none; }
:root[data-cats="sponsor"] .cat:hover{ border-color:#c41e2a; }
:root[data-cats="sponsor"] .cat:hover .cat__go{ background:#c41e2a; color:#fff; }
@media (prefers-reduced-motion:reduce){
  :root[data-hero="sponsor"] :is(.hero__light, .hero__slab, .hero__stripe--1, .hero__stripe--2){ animation:none; }
  :root[data-hero="sponsor"] .hero__stage::after{ animation:none; }
}
@media (max-width:1023px){
  :root[data-hero="sponsor"] .hero__slab{ width:46px; right:-22px; }
  :root[data-hero="sponsor"] .hero__stripe--1{ width:18px; right:28px; }
  :root[data-hero="sponsor"] .hero__stripe--2{ width:5px; right:52px; }
  :root[data-hero="sponsor"] .hero__title{ font-size:22px; }
  :root[data-hero="sponsor"] .hero__word{ font-size:80px; }
  :root[data-hero="sponsor"] .hero__kicker{ font-size:10px; gap:6px; letter-spacing:.1em; }
  :root[data-hero="sponsor"] .hero__kicker::before{ width:6px; height:6px; }
  :root[data-hero="sponsor"] .hero__big{ justify-self:end; padding-right:62px; }
  :root[data-hero="sponsor"] .hero__big span{ margin-top:4px; padding:2px 6px; }
  :root[data-cats="sponsor"] .cat{ background:linear-gradient(-66deg, #c41e2a 0 8px, #141518 8px 14px, transparent 14px) right top / 100% 100% no-repeat, #fff; }
  :root[data-cats="sponsor"] .cat__go{ margin-right:8px; }
}

/* ==========================================================================
   matte — 매트 차콜 · 화이트: 무늬 없이 <질감>으로 — 고운 입자 · 부드러운 조명 · 음각 / 양각 · 두꺼운 글자.
           광택 · 빛 효과 · 움직임은 쓰지 않는다. 빨강은 마침표 · 버튼에만 조금
   ========================================================================== */
:root[data-theme="dark-charcoal"]{
  --bone:#e8e6e1; --bone-2:#d9d7d1; --char:#2a2b2e; --char-2:#1f2023; --red-matte:#b3202a;
  /* 입자 — 흑백 잡음을 아주 옅게 (매트한 표면) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  --page-tex: var(--grain), radial-gradient(80% 60% at 50% 0%, rgb(255 255 255 / .05), transparent 70%);
}
/* 차콜 · 화이트 · 매트(18) — 예전 그래파이트 모노 구도(흰 사선 면 · // 줄 · 흰 카드)에 매트 입자만 더한다 */
:root[data-theme="dark-charcoal"][data-hero="slab"] .hero{ background:var(--grain), linear-gradient(115deg, var(--hero-bg) 30%, var(--hero-bg-2)); }
:root[data-theme="dark-charcoal"] .hero__slab{
  background:
    var(--grain),
    repeating-linear-gradient(-76deg, rgb(0 0 0 / .07) 0 2px, transparent 2px 14px),
    radial-gradient(90% 90% at 30% 0%, #ffffff, #e6e5e2 70%);
}
:root[data-theme="dark-charcoal"][data-cats="fill"] .cat{
  background:
    var(--grain),
    repeating-linear-gradient(-60deg, rgb(0 0 0 / .05) 0 2px, transparent 2px 14px),
    radial-gradient(90% 140% at 0% 0%, #ffffff, #e6e5e2 70%);
}

/* 배너 — 흰 매트 면(뼈 흰색) · 오른쪽 차콜 매트 덩어리. 조명은 왼쪽 위에서 부드럽게 */
:root[data-hero="matte"] .hero{
  border-radius:6px; color:var(--char);
  background:
    var(--grain),
    radial-gradient(90% 120% at 10% 0%, #f4f3ef, transparent 60%),
    radial-gradient(80% 100% at 90% 110%, rgb(0 0 0 / .10), transparent 60%),
    var(--bone);
  box-shadow:0 30px 60px -34px #000, inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -2px 0 rgb(0 0 0 / .06);
}
:root[data-hero="matte"] .hero::before, :root[data-hero="matte"] .hero::after{ display:none; }
/* 차콜 덩어리 — 굵은 사선으로 잘라 세운다. 모서리에 얇은 빛(모따기) · 안쪽 그늘 */
:root[data-hero="matte"] .hero__slab{
  display:block; top:0; bottom:0; right:0; width:46%; transform:none;
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  background:
    var(--grain),
    radial-gradient(70% 80% at 30% 10%, rgb(255 255 255 / .07), transparent 60%),
    linear-gradient(160deg, #34353a, var(--char-2) 70%);
}
/* 모따기 빛 — 사선 모서리를 따라 가는 밝은 선 한 줄 */
:root[data-hero="matte"] .hero__stripe--1{
  display:block; top:0; bottom:0; right:calc(46% - 1px); width:0; opacity:1; transform:none; background:none;
}
:root[data-hero="matte"] .hero__stage::before{
  content:""; position:absolute; top:0; bottom:0; right:0; width:46%;
  clip-path:polygon(22% 0, calc(22% + 3px) 0, 3px 100%, 0 100%);
  background:linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / .08));
}
/* 흰 면 위 큰 글자 — 양각(도드라짐) */
:root[data-hero="matte"] .hero__word{
  display:block; position:absolute; left:-1%; right:40%; bottom:-.2em; z-index:0; pointer-events:none; white-space:nowrap; overflow:hidden;
  font-family:var(--font-display); font-size:170px; font-weight:900; line-height:1; letter-spacing:-.04em;
  color:var(--bone); text-shadow:-1px -1px 1px rgb(255 255 255 / .85), 1px 1px 2px rgb(0 0 0 / .09);
  -webkit-mask-image:linear-gradient(90deg, #000 55%, transparent 95%); mask-image:linear-gradient(90deg, #000 55%, transparent 95%);
}
/* 큰 숫자 — 차콜 위 흰 매트 글자, 살짝 눌린 그늘 */
:root[data-hero="matte"] .hero__big{ color:var(--bone); padding-right:6%; }
:root[data-hero="matte"] .hero__big b{ font-weight:900; letter-spacing:-.05em; text-shadow:0 2px 0 rgb(0 0 0 / .5), 0 -1px 0 rgb(255 255 255 / .12); }
:root[data-hero="matte"] .hero__big i{ color:var(--bone-2); }
:root[data-hero="matte"] .hero__big span{
  transform:none; margin-top:14px; padding:7px 16px; border-radius:3px; background:var(--bone); color:var(--char); letter-spacing:.14em;
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgb(0 0 0 / .35);
}
/* 글자 — 두꺼운 차콜 · 빨간 마침표 */
:root[data-hero="matte"] .hero__meta{ color:rgb(42 43 46 / .45); }
:root[data-hero="matte"] .hero__meta b{ color:var(--char); font-style:normal; }
:root[data-hero="matte"] .hero__meta span::before{ background:var(--char); }
:root[data-hero="matte"] .hero__kicker{ padding:0; background:none; transform:none; color:var(--char); font-size:14px; letter-spacing:.2em; }
:root[data-hero="matte"] .hero__kicker::before{ display:block; width:24px; height:3px; transform:none; background:var(--char); }
:root[data-hero="matte"] .hero__title{ font-size:56px; font-weight:900; letter-spacing:-.045em; color:var(--char); text-shadow:0 1px 0 rgb(255 255 255 / .7); }
:root[data-hero="matte"] .hero__title::after{ content:"."; color:var(--red-matte); }
:root[data-hero="matte"] .hero__sub{ color:#5e5f63; }
:root[data-hero="matte"] .hero .btn{ border-radius:4px; }
:root[data-hero="matte"] .hero .btn--gold{ background:var(--char); border-color:var(--char); color:var(--bone); box-shadow:0 3px 0 #000, inset 0 1px 0 rgb(255 255 255 / .12); }
:root[data-hero="matte"] .hero .btn--gold:hover{ background:var(--red-matte); border-color:var(--red-matte); color:#fff; filter:none; }
:root[data-hero="matte"] .hero__cta .btn:not(.btn--gold){ color:var(--char); border:2px solid var(--char); }
:root[data-hero="matte"] .hero__cta .btn:not(.btn--gold):hover{ color:var(--char); border-color:var(--char); background:rgb(42 43 46 / .06); }
:root[data-hero="matte"] .hero__dot{ color:rgb(42 43 46 / .4); }
:root[data-hero="matte"] .hero__dot.is-on{ color:var(--char); }
:root[data-hero="matte"] .hero__dot.is-on::after{ background:var(--red-matte); }

/* matte 카드 — 흰 매트 판 · 음각 영문 · 두꺼운 차콜 제목 · 차콜 화살표 받침 */
:root[data-cats="matte"] .cat{
  --text:#2a2b2e; --text-sub:#66676b; --text-mute:#8d8e92; --surface-2:#d9d7d1; --fg-rgb:42 43 46;
  clip-path:none; border:0; border-radius:6px; color:#2a2b2e;
  background:
    var(--grain),
    radial-gradient(90% 140% at 0% 0%, #f3f2ee, transparent 60%),
    var(--bone);
  box-shadow:0 18px 30px -22px #000, inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 0 0 / .07);
  transition:transform var(--t), box-shadow var(--t);
}
:root[data-cats="matte"] .cat::before{ width:auto; height:auto; left:0; top:0; bottom:0; right:auto; clip-path:none; width:8px; background:var(--char); border-radius:6px 0 0 6px; }
:root[data-cats="matte"] .cat:hover::before{ width:8px; height:auto; }
:root[data-cats="matte"] .cat::after{ display:none; }
:root[data-cats="matte"] .cat:hover{ transform:translateY(-3px); box-shadow:0 24px 34px -22px #000, inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 0 0 / .07); }
:root[data-cats="matte"] .cat__title{ font-weight:900; letter-spacing:-.03em; }
:root[data-cats="matte"] .cat__title::after{ content:"."; color:#b3202a; }
:root[data-cats="matte"] .cat__no{ transform:none; background:none; padding:0; color:#9a9b9f; }
/* 뒤 영문 — 윤곽 대신 음각(파인 글자) */
:root[data-cats="matte"] .cat__en{
  color:var(--bone); -webkit-text-stroke:0;
  text-shadow:1px 1px 1px rgb(255 255 255 / .9), -1px -1px 1px rgb(0 0 0 / .16);
}
:root[data-cats="matte"] .cat:hover .cat__en{ -webkit-text-stroke:0; text-shadow:1px 1px 1px rgb(255 255 255 / .9), -1px -1px 1px rgb(0 0 0 / .26); }
:root[data-cats="matte"] .cat__live{ background:#b3202a; box-shadow:none; }
:root[data-cats="matte"] .cat__go{ transform:none; border-radius:4px; background:#2a2b2e; color:#e8e6e1; box-shadow:0 2px 0 #000; }
:root[data-cats="matte"] .cat__go svg{ transform:none; }
:root[data-cats="matte"] .cat:hover .cat__go{ background:#b3202a; color:#fff; }
@media (max-width:1023px){
  :root[data-hero="matte"] .hero__slab, :root[data-hero="matte"] .hero__stage::before{ width:42%; }
  :root[data-hero="matte"] .hero__title{ font-size:22px; }
  :root[data-hero="matte"] .hero__word{ font-size:80px; }
  :root[data-hero="matte"] .hero__kicker{ font-size:10px; gap:6px; letter-spacing:.12em; }
  :root[data-hero="matte"] .hero__kicker::before{ width:14px; height:2px; }
  :root[data-hero="matte"] .hero__big span{ margin-top:4px; padding:2px 6px; letter-spacing:.08em; }
  :root[data-cats="matte"] .cat::before{ width:5px; }
}

/* lux 글꼴(Cinzel)은 폭이 넓어 카드 뒤 영문을 줄인다 */
:root[data-style="lux"] .cat__en{ font-size:40px; letter-spacing:.04em; }
:root[data-style="lux"] .hero__big b{ letter-spacing:-.02em; }

/* ---- 폰 --------------------------------------------------------------------- */
@media (max-width:1023px){
  :root[data-hero="hud"] .hero__big::before{ width:160px; height:160px; }
  :root[data-hero="hud"] .hero__meta{ display:none; }
  :root[data-hero="tape"] .hero__slab{ height:16px; bottom:18px; }
  :root[data-hero="editorial"] .hero__word{ font-size:84px; }
  :root[data-hero="jersey"] .hero__big b{ -webkit-text-stroke-width:2px; }
  :root[data-hero="casino"] .hero__big span::before, :root[data-hero="casino"] .hero__big span::after{ display:none; }
  :root[data-cats="plate"] .cat{ box-shadow:inset 0 0 0 3px #0b1f4b, inset 0 0 0 4px rgb(245 183 0 / .55); }
  :root[data-cats="deco"] .cat::before{ display:none; }
  :root[data-hero="casino"] .hero__light{ width:260px; height:260px; right:-90px; }
  :root[data-hero="casino"] .hero__word{ display:none; }
  :root[data-hero="casino"] .hero__stage::before{ inset:5px; }
  :root[data-cats="deco"] .cat__title::after{ display:none; }
}

/* ==========================================================================
   volt — 화이트 · 형광 · 오렌지(5) · 네오 브루탈 벤토
   굵은 검정 테두리 + 밀린 검정 그림자 · 왼쪽 흰 칸(글) · 오른쪽 형광 칸(큰 숫자 · 주황 스티커) · 아래 검정 전광판 띠
   카드도 같은 결: 흰 칸 · 검정 테두리 · 밀린 그림자, 올리면 형광으로 바뀐다
   ========================================================================== */
:root[data-hero="volt"]{ --volt:#c8f31d; --orange:#ff5a00; --ink:#0f1012; }
:root[data-hero="volt"] .hero{
  color:var(--ink); border-radius:10px; border:2px solid var(--ink);
  background:
    radial-gradient(circle, rgb(15 16 18 / .07) 1px, transparent 1.4px) 0 0 / 14px 14px,
    #ffffff;
  box-shadow:8px 8px 0 var(--ink);
  margin-right:8px;
}
:root[data-hero="volt"] .hero::before, :root[data-hero="volt"] .hero::after{ display:none; }
/* 오른쪽 형광 칸 — 큰 숫자 */
:root[data-hero="volt"] .hero__slide{ grid-template-columns:1fr 44%; align-items:stretch; }
:root[data-hero="volt"] .hero__copy{ align-self:center; padding:0 0 38px 56px; }
:root[data-hero="volt"] .hero__big{
  position:relative; align-self:stretch; justify-self:stretch; display:grid; align-content:end; justify-items:start;
  padding:0 0 64px 34px; margin:0; overflow:hidden; color:var(--ink);
  background:
    linear-gradient(rgb(15 16 18 / .09) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgb(15 16 18 / .09) 1px, transparent 1px) 0 0 / 44px 100%,
    var(--volt);
  border-left:2px solid var(--ink);
  transform:none; opacity:1;
}
:root[data-hero="volt"] .hero__big b{ font-family:"Anton", sans-serif; font-style:normal; font-size:210px; line-height:.8; letter-spacing:-.01em; }
:root[data-hero="volt"] .hero__big.is-long b{ font-size:128px; }
:root[data-hero="volt"] .hero__big i{ font-size:.4em; margin-left:6px; }
/* 캡션 — 오른쪽 가장자리에 세로로 */
:root[data-hero="volt"] .hero__big span{
  position:absolute; right:18px; top:24px; margin:0; padding:0; background:none; transform:none; color:var(--ink);
  writing-mode:vertical-rl; font-family:"Oswald", sans-serif; font-style:normal; font-size:15px; font-weight:600; letter-spacing:.3em;
}
/* 주황 스티커 — 형광 칸 왼쪽 위, 살짝 돌려 붙인다 */
:root[data-hero="volt"] .hero__big::after{
  content:"HOT"; position:absolute; left:30px; top:26px; display:grid; place-items:center; width:78px; height:78px; border-radius:50%;
  background:var(--orange); color:#fff; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); rotate:-12deg;
  font-family:"Anton", sans-serif; font-size:24px; letter-spacing:.04em;
}
:root[data-hero="volt"] .hero__big.is-long::after{ content:"LIVE"; }
/* 왼쪽 흰 칸 — 글 */
:root[data-hero="volt"] .hero__kicker{
  padding:0; background:none; transform:none; gap:10px; color:var(--orange); text-shadow:none;
  font-family:"Oswald", sans-serif; font-style:normal; font-size:15px; font-weight:600; letter-spacing:.2em;
}
:root[data-hero="volt"] .hero__kicker::before{ display:block; width:10px; height:10px; transform:none; background:var(--orange); border:0; }
:root[data-hero="volt"] .hero__title{ margin:14px 0 12px; font-size:54px; font-weight:900; letter-spacing:-.045em; line-height:1.05; color:var(--ink); }
:root[data-hero="volt"] .hero__sub{ color:#55575c; }
:root[data-hero="volt"] .hero .btn{ border-radius:99px; height:52px; }
:root[data-hero="volt"] .hero .btn--gold{
  min-width:170px; background:var(--ink); border:2px solid var(--ink); color:var(--volt); font-size:16px; font-weight:800;
  box-shadow:4px 4px 0 var(--orange);
}
:root[data-hero="volt"] .hero .btn--gold:hover{ filter:none; background:var(--ink); color:#fff; box-shadow:2px 2px 0 var(--orange); translate:2px 2px; border-color:var(--ink); }
:root[data-hero="volt"] .hero__cta .btn:not(.btn--gold){ color:var(--ink); border:2px solid var(--ink); background:#fff; }
:root[data-hero="volt"] .hero__cta .btn:not(.btn--gold):hover{ background:var(--volt); color:var(--ink); border-color:var(--ink); }
/* 아래 검정 전광판 띠 — 배너 윗줄을 옮겨 띠로 */
:root[data-hero="volt"] .hero__meta{
  inset:auto 0 0 0; height:40px; z-index:4; justify-content:space-around; gap:0; margin:0; padding:0 20px;
  background:var(--ink); color:rgb(255 255 255 / .75); border-top:2px solid var(--ink);
  font-family:"Oswald", sans-serif; font-style:normal; font-size:13px; font-weight:500; letter-spacing:.24em;
}
:root[data-hero="volt"] .hero__meta b{ color:var(--volt); font-style:normal; }
:root[data-hero="volt"] .hero__meta span::before{ width:7px; height:7px; border-radius:50%; transform:none; background:var(--orange); }
:root[data-hero="volt"] .hero__dots{ left:56px; bottom:56px; }
:root[data-hero="volt"] .hero__dot{ color:rgb(15 16 18 / .35); font-family:"Oswald", sans-serif; font-style:normal; }
:root[data-hero="volt"] .hero__dot.is-on{ color:var(--ink); }
:root[data-hero="volt"] .hero__dot.is-on::after{ background:var(--orange); }

/* volt 카드 — 흰 칸 · 검정 테두리 · 밀린 그림자 · 큰 번호 · 주황 윤곽 영문. 올리면 형광 칸으로 */
:root[data-cats="volt"] .cats{ gap:22px; margin-top:26px; }
:root[data-cats="volt"] .cat{
  clip-path:none; border-radius:10px; border:2px solid #0f1012; background:#fff; color:#0f1012;
  box-shadow:5px 5px 0 #0f1012; transition:background-color var(--t-fast), translate var(--t-fast), box-shadow var(--t-fast);
}
:root[data-cats="volt"] .cat::before, :root[data-cats="volt"] .cat::after{ display:none; }
:root[data-cats="volt"] .cat:hover{ background:#c8f31d; border-color:#0f1012; translate:-2px -2px; box-shadow:7px 7px 0 #0f1012; }
:root[data-cats="volt"] .cat__no{ left:26px; top:12px; padding:0; transform:none; background:none; color:#0f1012; font-family:"Anton", sans-serif; font-style:normal; font-size:22px; }
:root[data-cats="volt"] .cat__title{ font-weight:900; letter-spacing:-.03em; }
:root[data-cats="volt"] .cat__desc{ color:#5a5c61; }
:root[data-cats="volt"] .cat__stat{ font-family:"Oswald", sans-serif; font-style:normal; color:#5a5c61; }
:root[data-cats="volt"] .cat__stat b{ font-family:"Oswald", sans-serif; font-style:normal; color:#0f1012; }
:root[data-cats="volt"] .cat__live{ background:#ff5a00; box-shadow:0 0 0 3px rgb(255 90 0 / .25); }
:root[data-cats="volt"] .cat__en{ font-family:"Anton", sans-serif; font-style:normal; font-size:54px; -webkit-text-stroke:1.5px rgb(255 90 0 / .85); }
:root[data-cats="volt"] .cat:hover .cat__en{ -webkit-text-stroke-color:#0f1012; }
:root[data-cats="volt"] .cat__go{ transform:none; border-radius:8px; background:#0f1012; color:#c8f31d; }
:root[data-cats="volt"] .cat__go svg{ transform:none; }
:root[data-cats="volt"] .cat:hover .cat__go{ background:#ff5a00; color:#fff; }

@media (max-width:1023px){
  :root[data-hero="volt"] .hero{ box-shadow:4px 4px 0 var(--ink); margin-right:4px; border-radius:8px; }
  :root[data-hero="volt"] .hero__slide{ grid-template-columns:1fr 40%; }
  :root[data-hero="volt"] .hero__copy{ padding:0 0 26px 16px; }
  :root[data-hero="volt"] .hero__kicker{ font-size:10px; gap:6px; letter-spacing:.12em; }
  :root[data-hero="volt"] .hero__kicker::before{ width:6px; height:6px; }
  :root[data-hero="volt"] .hero__title{ margin:6px 0 4px; font-size:21px; }
  :root[data-hero="volt"] .hero .btn{ height:30px; }
  :root[data-hero="volt"] .hero .btn--gold{ min-width:0; font-size:12px; box-shadow:2px 2px 0 var(--orange); }
  :root[data-hero="volt"] .hero__big{ padding:0 0 34px 12px; }
  :root[data-hero="volt"] .hero__big b{ font-size:74px; } :root[data-hero="volt"] .hero__big.is-long b{ font-size:44px; }
  :root[data-hero="volt"] .hero__big span{ right:6px; top:10px; font-size:9px; letter-spacing:.18em; }
  :root[data-hero="volt"] .hero__big::after{ width:40px; height:40px; left:10px; top:10px; font-size:12px; box-shadow:2px 2px 0 var(--ink); }
  :root[data-hero="volt"] .hero__meta{ display:flex; height:24px; font-size:9px; letter-spacing:.12em; padding:0 8px; }
  :root[data-cats="volt"] .cats{ gap:8px; margin-top:14px; }
  :root[data-cats="volt"] .cat{ box-shadow:3px 3px 0 #0f1012; border-radius:8px; }
  :root[data-cats="volt"] .cat__go{ width:24px; height:22px; background:none; color:#0f1012; }
}

/* ==========================================================================
   화이트 · 형광 · 클래식(19) — 처음 버전(검정 배너 · 형광 사선 면 · 기울임 큰 숫자)을 다듬었다
   ========================================================================== */
:root[data-theme="light-volt-classic"] .hero__slab{
  background:
    repeating-linear-gradient(-76deg, rgb(10 14 24 / .07) 0 2px, transparent 2px 14px),
    radial-gradient(90% 70% at 40% 0%, #e2ff6a, transparent 70%),
    linear-gradient(180deg, #d4ff2e, #c8f31d);
}
:root[data-theme="light-volt-classic"] .hero__big span{ background:#0c0d10; color:#c8f31d; }
:root[data-theme="light-volt-classic"] .hero__kicker{ color:#c8f31d; }
:root[data-theme="light-volt-classic"][data-cats="fill"] .cat__en{ -webkit-text-stroke-color:rgb(240 90 0 / .8); }
:root[data-theme="light-volt-classic"][data-cats="fill"] .cat:hover .cat__en{ -webkit-text-stroke-color:#f05a00; }
:root[data-theme="light-volt-classic"][data-cats="fill"] .cat::before, :root[data-theme="light-volt-classic"][data-cats="fill"] .cat::after{ background:#0c0d10; }

/* ==========================================================================
   app — 네이비 · 형광 · 앱(20) · Epicbet 결: 둥근 모서리 · 짙은 남색 · 비스듬한 유니폼 줄무늬 · 형광 큰 버튼 · 알약 칩
   ========================================================================== */
:root[data-hero="app"]{ --lime:#c8f31d; --navy:#0f1626; --navy-2:#18233a; }
:root[data-hero="app"] .hero{
  border-radius:18px;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .025) 0 26px, transparent 26px 52px),
    radial-gradient(50% 80% at 10% 0%, rgb(200 243 29 / .10), transparent 70%),
    linear-gradient(120deg, var(--navy), #16213a);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06);
}
:root[data-hero="app"] .hero::before, :root[data-hero="app"] .hero::after{ display:none; }
/* 윗줄 → 알약 칩 */
:root[data-hero="app"] .hero__meta{ top:22px; left:56px; gap:8px; color:#b7c0d1; font-family:var(--font); font-style:normal; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none; }
:root[data-hero="app"] .hero__meta > *{ padding:5px 12px; border-radius:99px; background:rgb(255 255 255 / .07); }
:root[data-hero="app"] .hero__meta b{ color:var(--navy); background:var(--lime); font-style:normal; }
:root[data-hero="app"] .hero__meta span::before{ display:none; }
:root[data-hero="app"] .hero__kicker{ padding:0; background:none; transform:none; color:var(--lime); font-size:20px; font-weight:800; letter-spacing:.02em; }
:root[data-hero="app"] .hero__kicker::before{ display:none; }
:root[data-hero="app"] .hero__title{ margin:8px 0 10px; font-size:48px; font-weight:800; letter-spacing:-.035em; color:#fff; }
:root[data-hero="app"] .hero__sub{ color:#9aa6bb; }
:root[data-hero="app"] .hero .btn{ border-radius:10px; height:52px; }
:root[data-hero="app"] .hero .btn--gold{ min-width:240px; background:var(--lime); border-color:var(--lime); color:var(--navy); font-size:15px; font-weight:800; letter-spacing:.04em; box-shadow:0 10px 26px -12px rgb(200 243 29 / .7); }
:root[data-hero="app"] .hero .btn--gold:hover{ filter:brightness(1.06); background:var(--lime); color:var(--navy); }
:root[data-hero="app"] .hero__cta .btn:not(.btn--gold){ background:var(--navy-2); border-color:transparent; color:#e6ebf4; }
:root[data-hero="app"] .hero__cta .btn:not(.btn--gold):hover{ border-color:rgb(255 255 255 / .2); color:#fff; }
/* 오른쪽 카드 — 형광 판에 남색 유니폼 줄무늬 · 큰 남색 숫자 */
:root[data-hero="app"] .hero__big{
  align-self:stretch; justify-self:stretch; display:grid; place-content:center; justify-items:center; margin:26px 26px 26px 0; padding:0;
  border-radius:16px; overflow:hidden; color:var(--navy); transform:none;
  background:
    repeating-linear-gradient(115deg, rgb(15 22 38 / .14) 0 12px, transparent 12px 34px),
    radial-gradient(80% 80% at 30% 20%, #e4ff72, transparent 70%),
    linear-gradient(160deg, #d4ff34, #a9d80f);
  box-shadow:0 20px 40px -20px rgb(200 243 29 / .5);
}
:root[data-hero="app"] .hero__big b{ font-size:150px; font-weight:900; letter-spacing:-.05em; }
:root[data-hero="app"] .hero__big.is-long b{ font-size:96px; }
:root[data-hero="app"] .hero__big span{ margin-top:12px; padding:6px 16px; border-radius:99px; transform:none; background:var(--navy); color:var(--lime); letter-spacing:.14em; }
:root[data-hero="app"] .hero__dots{ bottom:22px; }
:root[data-hero="app"] .hero__dot{ font-style:normal; }
:root[data-hero="app"] .hero__dot.is-on::after{ background:var(--lime); }
:root[data-hero="app"] .hero__dot::after{ border-radius:2px; }
/* app 카드 — 둥근 남색 카드 · 줄무늬 · 형광 원 번호 · 형광 화살표 버튼 */
:root[data-cats="app"] .cat{
  clip-path:none; border-radius:16px; border:1px solid rgb(255 255 255 / .07);
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .025) 0 18px, transparent 18px 36px),
    linear-gradient(135deg, #18233a, #121a2b);
}
:root[data-cats="app"] .cat::before{ display:none; }
:root[data-cats="app"] .cat::after{ left:16px; right:16px; height:3px; border-radius:3px; background:#c8f31d; }
:root[data-cats="app"] .cat:hover{ border-color:rgb(200 243 29 / .6); }
:root[data-cats="app"] .cat__no{ left:22px; top:14px; display:grid; place-items:center; width:26px; height:26px; padding:0; border-radius:50%; transform:none; background:#c8f31d; color:#0f1626; font-style:normal; font-size:12px; }
:root[data-cats="app"] .cat__en{ -webkit-text-stroke-color:rgb(200 243 29 / .28); }
:root[data-cats="app"] .cat:hover .cat__en{ -webkit-text-stroke-color:rgb(200 243 29 / .7); }
:root[data-cats="app"] .cat__stat b{ color:#fff; }
:root[data-cats="app"] .cat__live{ background:#ff6a13; box-shadow:0 0 0 3px rgb(255 106 19 / .25); }
:root[data-cats="app"] .cat__go{ transform:none; border-radius:10px; width:40px; background:#c8f31d; color:#0f1626; }
:root[data-cats="app"] .cat__go svg{ transform:none; }
:root[data-cats="app"] .cat:hover .cat__go{ filter:brightness(1.08); }

/* ==========================================================================
   minimal — 화이트 · 형광 · 미니멀(21) · 캠페인 페이지 결: 흰 여백 · 얇은 선 · 절제된 큰 글자 · 형광은 형광펜 한 줄
   ========================================================================== */
:root[data-hero="minimal"]{ --lime:#c8f31d; --ink:#111111; --orange:#ff5a00; }
:root[data-hero="minimal"] .hero{ border-radius:0; color:var(--ink); background:#ffffff; box-shadow:0 0 0 1px #e7e7e7; }
:root[data-hero="minimal"] .hero::before, :root[data-hero="minimal"] .hero::after{ display:none; }
/* 가운데 세로 가는 선 · 위아래 가는 선 */
:root[data-hero="minimal"] .hero__stage::before{
  content:""; position:absolute; inset:28px 56px;
  background:
    linear-gradient(#e7e7e7, #e7e7e7) 56% 0 / 1px 100% no-repeat,
    linear-gradient(#111, #111) 0 0 / 100% 1px no-repeat,
    linear-gradient(#e7e7e7, #e7e7e7) 0 100% / 100% 1px no-repeat;
}
:root[data-hero="minimal"] .hero__meta{ top:auto; bottom:40px; left:56px; color:#9a9a9a; font-family:var(--font); font-style:normal; font-size:11px; letter-spacing:.24em; }
:root[data-hero="minimal"] .hero__meta b{ color:var(--ink); font-style:normal; }
:root[data-hero="minimal"] .hero__meta span::before{ width:4px; height:4px; border-radius:50%; transform:none; background:var(--orange); }
:root[data-hero="minimal"] .hero__kicker{ padding:0; background:none; transform:none; gap:14px; color:var(--ink); font-family:var(--font); font-style:normal; font-size:12px; font-weight:700; letter-spacing:.32em; }
:root[data-hero="minimal"] .hero__kicker::before{ display:block; width:8px; height:8px; border-radius:50%; transform:none; background:var(--orange); }
:root[data-hero="minimal"] .hero__title{ margin:18px 0 14px; font-size:58px; font-weight:900; letter-spacing:-.055em; line-height:1.02; color:var(--ink); }
:root[data-hero="minimal"] .hero__sub{ color:#6d6d6d; }
:root[data-hero="minimal"] .hero__cta{ margin-top:30px; gap:28px; align-items:center; }
:root[data-hero="minimal"] .hero .btn{ border-radius:0; height:50px; }
:root[data-hero="minimal"] .hero .btn--gold{ min-width:190px; background:var(--ink); border-color:var(--ink); color:#fff; letter-spacing:.06em; box-shadow:none; }
:root[data-hero="minimal"] .hero .btn--gold::after{ content:"→"; margin-left:10px; color:var(--lime); }
:root[data-hero="minimal"] .hero .btn--gold:hover{ filter:none; background:var(--lime); border-color:var(--lime); color:var(--ink); }
:root[data-hero="minimal"] .hero .btn--gold:hover::after{ color:var(--ink); }
:root[data-hero="minimal"] .hero__cta .btn:not(.btn--gold){ min-width:0; padding:0 0 4px; height:auto; border:0; border-bottom:1px solid var(--ink); color:var(--ink); }
:root[data-hero="minimal"] .hero__cta .btn:not(.btn--gold):hover{ color:var(--ink); border-color:var(--orange); }
/* 큰 숫자 — 검정 · 아랫부분에 형광펜 한 줄 */
:root[data-hero="minimal"] .hero__big{ color:var(--ink); padding-right:10%; justify-items:start; }
:root[data-hero="minimal"] .hero__big b{
  font-size:200px; line-height:.86; letter-spacing:-.01em; padding:0 10px;
  background:linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 88%, transparent 88%);
}
:root[data-hero="minimal"] .hero__big.is-long b{ font-size:130px; }
:root[data-hero="minimal"] .hero__big i{ font-size:.34em; }
:root[data-hero="minimal"] .hero__big span{ margin-top:16px; padding:0 0 0 34px; background:none; transform:none; color:var(--ink); font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.3em; position:relative; }
:root[data-hero="minimal"] .hero__big span::before{ content:""; position:absolute; left:0; top:50%; width:24px; height:1px; background:var(--ink); }
:root[data-hero="minimal"] .hero__dots{ left:auto; right:56px; bottom:40px; }
:root[data-hero="minimal"] .hero__dot{ color:#b5b5b5; font-family:var(--font); font-style:normal; font-size:12px; }
:root[data-hero="minimal"] .hero__dot.is-on{ color:var(--ink); }
:root[data-hero="minimal"] .hero__dot::after{ height:1px; }
:root[data-hero="minimal"] .hero__dot.is-on::after{ background:var(--ink); height:2px; }
/* minimal 카드 — 흰 판 · 위 검정 가는 선 · 옅은 회색 영문 · 올리면 제목에 형광펜 */
:root[data-cats="minimal"] .cats{ gap:28px; }
:root[data-cats="minimal"] .cat{ clip-path:none; border-radius:0; border:0; border-top:2px solid #111; background:#fff; padding-left:22px; }
:root[data-cats="minimal"] .cat::before{ display:none; }
:root[data-cats="minimal"] .cat::after{ height:1px; background:#111; }
:root[data-cats="minimal"] .cat__no{ left:22px; top:14px; padding:0; transform:none; background:none; color:#9a9a9a; font-family:var(--font); font-style:normal; font-size:11px; letter-spacing:.2em; }
:root[data-cats="minimal"] .cat__title{ font-weight:900; letter-spacing:-.04em; justify-self:start; padding:0 4px; margin-left:-4px; background:linear-gradient(transparent 60%, transparent 60%); transition:background var(--t); }
:root[data-cats="minimal"] .cat:hover .cat__title{ background:linear-gradient(transparent 55%, #c8f31d 55%, #c8f31d 92%, transparent 92%); }
:root[data-cats="minimal"] .cat__desc{ color:#7a7a7a; }
:root[data-cats="minimal"] .cat__stat{ font-family:var(--font); font-style:normal; color:#9a9a9a; }
:root[data-cats="minimal"] .cat__stat b{ font-family:var(--font); font-style:normal; color:#111; }
:root[data-cats="minimal"] .cat__live{ background:#ff5a00; box-shadow:none; }
:root[data-cats="minimal"] .cat__en{ -webkit-text-stroke-color:#e9e9e9; }
:root[data-cats="minimal"] .cat:hover .cat__en{ -webkit-text-stroke-color:#d0d0d0; }
:root[data-cats="minimal"] .cat__go{ transform:none; background:none; width:auto; color:#111; }
:root[data-cats="minimal"] .cat__go svg{ transform:none; width:22px; height:22px; }
:root[data-cats="minimal"] .cat:hover .cat__go{ background:none; color:#ff5a00; }

@media (max-width:1023px){
  :root[data-hero="app"] .hero{ border-radius:14px; }
  :root[data-hero="app"] .hero__meta{ display:none; }
  :root[data-hero="app"] .hero__kicker{ font-size:12px; }
  :root[data-hero="app"] .hero__title{ font-size:21px; margin:4px 0 4px; }
  :root[data-hero="app"] .hero .btn{ height:32px; }
  :root[data-hero="app"] .hero .btn--gold{ min-width:0; font-size:12px; }
  :root[data-hero="app"] .hero__big{ margin:12px 12px 12px 0; border-radius:12px; }
  :root[data-hero="app"] .hero__big b{ font-size:58px; } :root[data-hero="app"] .hero__big.is-long b{ font-size:34px; }
  :root[data-hero="app"] .hero__big span{ margin-top:4px; padding:2px 8px; letter-spacing:.06em; }
  :root[data-cats="app"] .cat{ border-radius:12px; }
  :root[data-cats="app"] .cat__no{ display:none; }
  :root[data-cats="app"] .cat__go{ width:24px; height:22px; background:none; color:#c8f31d; }
  :root[data-hero="minimal"] .hero__stage::before{ inset:12px 16px; }
  :root[data-hero="minimal"] .hero__meta{ display:none; }
  :root[data-hero="minimal"] .hero__kicker{ font-size:9px; letter-spacing:.2em; gap:8px; }
  :root[data-hero="minimal"] .hero__title{ font-size:22px; margin:8px 0 6px; }
  :root[data-hero="minimal"] .hero__cta{ margin-top:12px; }
  :root[data-hero="minimal"] .hero .btn{ height:30px; }
  :root[data-hero="minimal"] .hero .btn--gold{ min-width:0; font-size:12px; }
  :root[data-hero="minimal"] .hero__big b{ font-size:72px; padding:0 4px; } :root[data-hero="minimal"] .hero__big.is-long b{ font-size:44px; }
  :root[data-hero="minimal"] .hero__big span{ margin-top:6px; padding-left:18px; font-size:9px; letter-spacing:.14em; }
  :root[data-hero="minimal"] .hero__big span::before{ width:12px; }
  :root[data-cats="minimal"] .cats{ gap:8px; }
  :root[data-cats="minimal"] .cat{ padding-left:10px; }
  :root[data-cats="minimal"] .cat__go{ width:22px; }
}