/* ==========================================================================
   theme-skins-3 — 2026-09-30 저녁 · 새 29종 배너 10가지 + 13번(엠버) 보완 + 카드 3가지
   사용자가 좋아한 결을 기본으로: 사선 띠 · //// 빗살 · 고운 입자 · 속도선 · 큰 투명 글자 · 굵은 기울임 숫자
   구도는 배너마다 다르게 (왼쪽 글/오른쪽 숫자 한 가지로 몰리지 않게)
   배너  blades · chevron · band · bracket · racing · streak · whitepanel · duotone · mesh · halo
   카드  hatch · edge · duo  (+ 기존 sponsor · slash · fill 을 테마 색으로)
   ========================================================================== */
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]){
  --A: var(--hero-slab); --B: var(--accent-2); --K: var(--hero-kick); --N: var(--hero-num); --H: var(--hero-bg); --H2: var(--hero-bg-2);
  --grain3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.11'/%3E%3C/svg%3E");
}
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"])
  :is(.hero__slab, .hero__stripe, .hero__light, .hero__pitch){ display:none; }
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero::after{ display:none; }
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big b::before{ display:none; }
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big span{ transform:none; }
/* 공통 — 옅은 세로 격자선 · 큰 투명 글자 · 속도선(좋아한 그래파이트의 투명 선들) */
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero::before{
  width:100%; height:100%; background:repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 12.5%); -webkit-mask-image:none; mask-image:none;
}
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="bracket"], [data-hero="racing"], [data-hero="mesh"], [data-hero="halo"]) .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-style:var(--display-italic); font-weight:900; font-size:180px; line-height:1; letter-spacing:-.03em;
  color:rgb(255 255 255 / .035); -webkit-text-stroke:1px rgb(255 255 255 / .06);
}
/* 숫자 뒤 잔상(기존 배너용)은 새 배너에서 끈다 — streak 만 따로 켠다 */
:root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big::after{ display:none; }
:root[data-hero="streak"] .hero__big::after{ display:none; }
/* 기하학 글꼴 테마의 네모 칸 윗 문구는 새 배너에서 쓰지 않는다 */
:root[data-style="geo"]:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
         [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__kicker{
  padding:0; background:none; transform:none; font-size:14px; letter-spacing:.2em;
}


/* ==========================================================================
   1. blades — 칼날: 오른쪽에 굵기 · 색이 다른 사선 칼날 여러 개 · 그 위를 속도선이 스친다 · 흰 굵은 기울임 숫자
   ========================================================================== */
:root[data-hero="blades"] .hero{ background:var(--grain3), radial-gradient(70% 90% at 80% 30%, color-mix(in srgb, var(--A) 18%, transparent), transparent 70%), linear-gradient(115deg, var(--H), var(--H2)); }
:root[data-hero="blades"] .hero__slab{
  display:block; clip-path:none; top:-20%; bottom:-20%; right:8%; width:330px; transform:skewX(-24deg);
  background:linear-gradient(90deg,
    var(--A) 0 58px, transparent 58px 80px, #fff 80px 86px, transparent 86px 118px, var(--B) 118px 128px, transparent 128px 176px,
    var(--A) 176px 190px, transparent 190px 236px, rgb(255 255 255 / .35) 236px 239px, transparent 239px);
  animation:slashIn .9s cubic-bezier(.16,1,.3,1) both;
}
:root[data-hero="blades"] .hero__stripe--1{   /* 칼날 사이 빗살 */
  display:block; top:0; bottom:0; right:22%; width:34%; opacity:1; transform:skewX(-24deg);
  background:repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 10px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%, transparent); mask-image:linear-gradient(90deg, transparent, #000 40%, transparent);
}
:root[data-hero="blades"] .hero__light{
  display:block;
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / .45) 60%, transparent) 0 26% / 190px 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--A) 90%, transparent) 60%, transparent) 0 44% / 260px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .3) 60%, transparent) 0 70% / 140px 1px no-repeat;
  animation:slashSpeed 2.6s linear infinite;
}
:root[data-hero="blades"] .hero__big{ z-index:2; color:#fff; padding-right:14%; }
:root[data-hero="blades"] .hero__big b{ text-shadow:10px 10px 0 color-mix(in srgb, var(--A) 55%, transparent); }
:root[data-hero="blades"] .hero__big i{ color:var(--A); }
:root[data-hero="blades"] .hero__big span{ background:var(--A); color:var(--N); }
:root[data-hero="blades"] .hero__kicker{ color:var(--K); }


/* ==========================================================================
   2. chevron — 앞으로 가는 화살(>>): 빗살 채운 큰 화살 둘이 오른쪽으로 밀려 나간다 · 숫자는 가운데 · 글은 아래 한 줄
   ========================================================================== */
:root[data-hero="chevron"] .hero{ background:var(--grain3), linear-gradient(110deg, var(--H), var(--H2)); }
:root[data-hero="chevron"] .hero__slab, :root[data-hero="chevron"] .hero__stripe--1{
  display:block; top:0; bottom:0; width:260px; transform:none; opacity:1;
  clip-path:polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}
:root[data-hero="chevron"] .hero__slab{
  right:4%; background:repeating-linear-gradient(-60deg, rgb(0 0 0 / .12) 0 3px, transparent 3px 12px), var(--A);
  animation:chevPush 2.4s cubic-bezier(.5,0,.3,1) infinite;
}
:root[data-hero="chevron"] .hero__stripe--1{
  right:calc(4% + 150px); background:repeating-linear-gradient(-60deg, color-mix(in srgb, var(--B) 60%, transparent) 0 2px, transparent 2px 10px);
  animation:chevPush 2.4s cubic-bezier(.5,0,.3,1) .15s infinite;
}
@keyframes chevPush{ 0%, 100%{ translate:0 0; } 50%{ translate:14px 0; } }
/* 구도 — 위: 윗 문구 · 제목 / 가운데 오른쪽: 숫자 / 아래: 설명 + 버튼 한 줄 */
:root[data-hero="chevron"] .hero__slide{ grid-template-columns:1fr 38%; grid-template-rows:1fr auto; }
:root[data-hero="chevron"] .hero__copy{ display:contents; }
:root[data-hero="chevron"] .hero__kicker{ grid-column:1; grid-row:1; align-self:end; margin:0 0 76px 56px; color:var(--K); }
:root[data-hero="chevron"] .hero__title{ grid-column:1; grid-row:1; align-self:end; margin:0 0 6px 56px; font-size:64px; letter-spacing:-.04em; }
:root[data-hero="chevron"] .hero__sub{ grid-column:1; grid-row:2; align-self:start; margin:0 0 0 56px; }
:root[data-hero="chevron"] .hero__cta{ grid-column:1; grid-row:2; align-self:end; margin:30px 0 40px 56px; }
:root[data-hero="chevron"] .hero__dots{ left:auto; right:56px; }
:root[data-hero="chevron"] .hero__big{ grid-column:2; grid-row:1 / 3; z-index:1; color:#fff; justify-self:start; padding:0; }
:root[data-hero="chevron"] .hero__big b{ text-shadow:0 10px 30px rgb(0 0 0 / .5); }
:root[data-hero="chevron"] .hero__big i{ color:var(--B); }
:root[data-hero="chevron"] .hero__big span{ background:#fff; color:#0c0c0e; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="chevron"] :is(.hero__slab, .hero__stripe--1){ animation:none; } }


/* ==========================================================================
   3. band — 배너를 비스듬히 가로지르는 넓은 포인트 색 띠(빗살 · 입자 · 이 장의 영문을 싣고 흐른다)
             띠 위쪽: 글 / 띠 아래쪽: 버튼 왼쪽 · 숫자 오른쪽
   ========================================================================== */
:root[data-hero="band"] .hero{ background:var(--grain3), radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--A) 14%, transparent), transparent 70%), linear-gradient(170deg, var(--H), var(--H2)); }
:root[data-hero="band"] .hero__slab{
  display:block; clip-path:none; left:-10%; right:-10%; width:auto; top:37%; bottom:auto; height:78px; transform:rotate(-4deg);
  background:var(--grain3), repeating-linear-gradient(-60deg, rgb(0 0 0 / .1) 0 2px, transparent 2px 12px), var(--A);
  box-shadow:0 20px 40px -20px rgb(0 0 0 / .8);
}
:root[data-hero="band"] .hero__stripe--1{ display:block; left:-10%; right:-10%; width:auto; top:calc(37% + 90px); bottom:auto; height:4px; transform:rotate(-4deg); opacity:1; background:var(--B); }
:root[data-hero="band"] .hero__word{
  display:block; position:absolute; left:-10%; right:-10%; top:37%; height:78px; z-index:0; rotate:-4deg; overflow:hidden; white-space:nowrap; pointer-events:none;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:58px; line-height:78px; letter-spacing:.02em; color:color-mix(in srgb, var(--N) 22%, transparent);
  word-spacing:.4em;
}
:root[data-hero="band"] .hero__slide{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
:root[data-hero="band"] .hero__copy{ display:contents; }
:root[data-hero="band"] .hero__kicker{ grid-column:1; grid-row:1; align-self:start; margin:62px 0 0 56px; color:var(--K); }
:root[data-hero="band"] .hero__title{ grid-column:1 / 3; grid-row:1; align-self:start; margin:86px 0 0 56px; font-size:46px; }
:root[data-hero="band"] .hero__sub{ grid-column:2; grid-row:1; align-self:start; justify-self:end; margin:74px 56px 0 0; max-width:300px; text-align:right; }
:root[data-hero="band"] .hero__cta{ grid-column:1; grid-row:2; align-self:end; margin:0 0 34px 56px; }
:root[data-hero="band"] .hero__big{ grid-column:2; grid-row:2; align-self:end; justify-self:end; padding:0 56px 26px 0; color:#fff; z-index:1; display:flex; align-items:flex-end; gap:16px; }
:root[data-hero="band"] .hero__big b{ font-size:120px; text-shadow:0 8px 24px rgb(0 0 0 / .5); }
:root[data-hero="band"] .hero__big.is-long b{ font-size:84px; }
:root[data-hero="band"] .hero__big i{ color:var(--A); }
:root[data-hero="band"] .hero__big span{ margin:0 0 10px; background:var(--B); color:var(--H); }
:root[data-hero="band"] .hero__dots{ left:auto; right:56px; top:26px; bottom:auto; }


/* ==========================================================================
   4. bracket — 두꺼운 사선 꺾쇠 [ ] 가 숫자를 감싼다 · 안쪽은 옅은 빗살 · 네 귀 눈금
   ========================================================================== */
:root[data-hero="bracket"] .hero{ background:var(--grain3), radial-gradient(40% 70% at 72% 50%, color-mix(in srgb, var(--A) 16%, transparent), transparent 70%), linear-gradient(115deg, var(--H), var(--H2)); }
:root[data-hero="bracket"] .hero__stripe--1, :root[data-hero="bracket"] .hero__stripe--2{
  display:block; top:52px; bottom:52px; width:70px; opacity:1; transform:skewX(-10deg); background:none; border:12px solid var(--A);
}
:root[data-hero="bracket"] .hero__stripe--1{ right:calc(5% + 32% ); border-right:0; }
:root[data-hero="bracket"] .hero__stripe--2{ right:5%; border-left:0; }
:root[data-hero="bracket"] .hero__slab{
  display:block; clip-path:none; top:64px; bottom:64px; right:calc(5% + 14px); width:calc(32% + 42px); transform:skewX(-10deg);
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--A) 16%, transparent) 0 2px, transparent 2px 12px);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 50%, #000, transparent); mask-image:radial-gradient(70% 80% at 50% 50%, #000, transparent);
}
:root[data-hero="bracket"] .hero__stage::after{   /* 위아래 눈금 */
  content:""; position:absolute; right:calc(5% + 16%); top:24px; bottom:24px; width:2px;
  background:linear-gradient(var(--B) 0 18px, transparent 18px calc(100% - 18px), var(--B) calc(100% - 18px));
}
:root[data-hero="bracket"] .hero__big{ z-index:1; color:#fff; padding-right:9%; }
:root[data-hero="bracket"] .hero__big b{ text-shadow:0 0 30px color-mix(in srgb, var(--A) 45%, transparent); }
:root[data-hero="bracket"] .hero__big i{ color:var(--A); }
:root[data-hero="bracket"] .hero__big span{ background:var(--A); color:var(--N); }
:root[data-hero="bracket"] .hero__kicker{ color:var(--K); }


/* ==========================================================================
   5. racing — 레이싱 도색: 오른쪽 끝부터 굵은 세로 줄무늬(포인트 · 흰 · 보조) · 숫자는 줄무늬를 가로지르며 검정 테두리
             구도: 숫자 왼쪽 크게 · 글은 오른쪽 (도색이 오른쪽 끝)
   ========================================================================== */
:root[data-hero="racing"] .hero{ background:var(--grain3), linear-gradient(100deg, var(--H), var(--H2)); }
:root[data-hero="racing"] .hero__slab{
  display:block; clip-path:none; top:-10%; bottom:-10%; right:-2%; width:240px; transform:skewX(-12deg);
  background:linear-gradient(90deg, var(--A) 0 100px, #fff 100px 122px, transparent 122px 140px, var(--B) 140px 180px, transparent 180px 196px, var(--A) 196px);
}
:root[data-hero="racing"] .hero__stripe--1{ display:block; top:0; bottom:0; right:calc(-2% + 240px); width:120px; opacity:1; transform:skewX(-12deg);
  background:repeating-linear-gradient(90deg, rgb(255 255 255 / .12) 0 2px, transparent 2px 9px); }
:root[data-hero="racing"] .hero__light{
  display:block;
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / .4) 60%, transparent) 0 30% / 200px 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--A) 90%, transparent) 60%, transparent) 0 62% / 280px 2px no-repeat;
  animation:slashSpeed 2.2s linear infinite;
}
:root[data-hero="racing"] .hero__slide{ grid-template-columns:44% 1fr; }
:root[data-hero="racing"] .hero__big{ order:-1; justify-self:start; padding:0 0 0 48px; color:#fff; z-index:1; }
:root[data-hero="racing"] .hero__big b{ font-size:200px; -webkit-text-stroke:3px #000; paint-order:stroke fill; text-shadow:8px 8px 0 var(--A); }
:root[data-hero="racing"] .hero__big.is-long b{ font-size:130px; }
:root[data-hero="racing"] .hero__big i{ color:var(--A); }
:root[data-hero="racing"] .hero__big span{ background:#fff; color:#0c0c0e; }
:root[data-hero="racing"] .hero__copy{ padding:0 300px 18px 10px; }
:root[data-hero="racing"] .hero__kicker{ color:var(--K); }
:root[data-hero="racing"] .hero__meta, :root[data-hero="racing"] .hero__dots{ left:calc(44% + 10px); }


/* ==========================================================================
   6. streak — 긴 노출 사진처럼 빛 자국이 흐른다 · 숫자 뒤로 번진 잔상(움직임) · 구도: 글 위 · 숫자 아래 넓게
   ========================================================================== */
:root[data-hero="streak"] .hero{ background:var(--grain3), linear-gradient(180deg, var(--H2), var(--H)); }
:root[data-hero="streak"] .hero__light{
  display:block; inset:0;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--A) 80%, transparent), transparent) 0 58% / 60% 6px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--B) 80%, transparent), transparent) 0 66% / 45% 3px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent) 0 74% / 35% 2px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--A) 60%, transparent), transparent) 0 82% / 55% 10px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--B) 50%, transparent), transparent) 0 50% / 40% 2px no-repeat;
  filter:blur(1.5px); animation:streakRun 3s linear infinite;
}
@keyframes streakRun{
  from{ background-position:180% 58%, 220% 66%, 160% 74%, 200% 82%, 240% 50%; }
  to  { background-position:-80% 58%, -60% 66%, -50% 74%, -90% 82%, -40% 50%; }
}
:root[data-hero="streak"] .hero__slide{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
:root[data-hero="streak"] .hero__copy{ display:grid; grid-template-columns:1fr auto; column-gap:24px; align-items:end; padding:48px 56px 0; }
:root[data-hero="streak"] .hero__kicker{ grid-column:1; color:var(--K); }
:root[data-hero="streak"] .hero__title{ grid-column:1; margin:8px 0 6px; font-size:46px; }
:root[data-hero="streak"] .hero__sub{ grid-column:1; }
:root[data-hero="streak"] .hero__cta{ grid-column:2; grid-row:1 / 4; margin:0; }
:root[data-hero="streak"] .hero__big{ grid-row:2; justify-self:end; align-self:center; padding:0 56px 26px 0; color:#fff; display:flex; align-items:center; gap:22px; }
:root[data-hero="streak"] .hero__big b{ font-size:150px; position:relative; }
:root[data-hero="streak"] .hero__big.is-long b{ font-size:110px; }
/* 잔상 — 같은 숫자를 왼쪽으로 번지게 */
:root[data-hero="streak"] .hero__big::before{
  content:attr(data-echo); position:absolute; left:auto; right:calc(56px + 60px); top:50%; translate:0 -58%; z-index:-1; white-space:nowrap;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:150px; letter-spacing:-.02em;
  color:var(--A); filter:blur(10px); opacity:.55; transform:scaleX(1.25); transform-origin:right;
}
:root[data-hero="streak"] .hero__big i{ color:var(--A); }
:root[data-hero="streak"] .hero__big span{ margin:0; background:var(--A); color:var(--N); }
:root[data-hero="streak"] .hero__dots{ left:56px; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="streak"] .hero__light{ animation:none; } }


/* ==========================================================================
   7. whitepanel — 흰 배너(9 · 10번 결): 흰 매트 면 · //// 빗살 판 · 오른쪽 진한 사선 덩어리 위 포인트 숫자 · 빨간 마침표 대신 포인트 마침표
   ========================================================================== */
:root[data-hero="whitepanel"] .hero{
  --ink:#141518; color:var(--ink);
  background:var(--grain3), radial-gradient(70% 90% at 30% 20%, #ffffff, transparent 70%), linear-gradient(100deg, #ffffff 40%, #ebecee);
  box-shadow:0 18px 40px -26px rgb(0 0 0 / .45);
}
:root[data-hero="whitepanel"] .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="whitepanel"] .hero__stripe--1{   /* 빗살 판 */
  display:block; top:0; bottom:0; right:30%; width:34%; opacity:1; transform:skewX(-20deg);
  background:repeating-linear-gradient(90deg, rgb(20 21 24 / .12) 0 2px, transparent 2px 11px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%, #000 80%, transparent); mask-image:linear-gradient(90deg, transparent, #000 40%, #000 80%, transparent);
}
:root[data-hero="whitepanel"] .hero__slab{     /* 진한 사선 덩어리 */
  display:block; top:0; bottom:0; right:0; width:40%; clip-path:polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  background:var(--grain3), radial-gradient(70% 80% at 40% 10%, rgb(255 255 255 / .08), transparent 60%), linear-gradient(160deg, #26282d, #111214);
}
:root[data-hero="whitepanel"] .hero__stripe--2{ display:block; top:0; bottom:0; right:calc(40% - 16px); width:8px; opacity:1; transform:skewX(-14.6deg); background:var(--A); }
:root[data-hero="whitepanel"] .hero__big{ z-index:1; color:var(--A); padding-right:4%; }
:root[data-hero="whitepanel"] .hero__big b{ text-shadow:0 12px 26px rgb(0 0 0 / .45); }
:root[data-hero="whitepanel"] .hero__big i{ color:#fff; }
:root[data-hero="whitepanel"] .hero__big span{ background:var(--A); color:var(--N); }
:root[data-hero="whitepanel"] .hero__kicker{ color:var(--ink); }
:root[data-hero="whitepanel"] .hero__kicker::before{ background:var(--A); }
:root[data-hero="whitepanel"] .hero__title{ color:var(--ink); font-weight:900; letter-spacing:-.045em; }
:root[data-hero="whitepanel"] .hero__title::after{ content:"."; color:var(--A); }
:root[data-hero="whitepanel"] .hero__sub{ color:#4d4f55; }
:root[data-hero="whitepanel"] .hero .btn{ border-radius:3px; }
:root[data-hero="whitepanel"] .hero .btn--gold{ background:var(--A); border-color:var(--A); color:var(--N); }
:root[data-hero="whitepanel"] .hero__cta .btn:not(.btn--gold){ color:var(--ink); border-color:rgb(20 21 24 / .3); }
:root[data-hero="whitepanel"] .hero__meta{ color:rgb(20 21 24 / .45); }
:root[data-hero="whitepanel"] .hero__meta b{ color:var(--ink); }
:root[data-hero="whitepanel"] .hero__meta span::before{ background:var(--A); }
:root[data-hero="whitepanel"] .hero__dot{ color:rgb(20 21 24 / .4); }
:root[data-hero="whitepanel"] .hero__dot.is-on{ color:var(--ink); }
:root[data-hero="whitepanel"] .hero__dot.is-on::after{ background:var(--A); }


/* ==========================================================================
   8. duotone — 대각선으로 두 색: 왼쪽 위 어두운 면 · 오른쪽 아래 포인트 면 · 큰 흰 윤곽 숫자가 이음매를 걸친다
             구도: 글 왼쪽 위 · 숫자 가운데 아래(이음매 위)
   ========================================================================== */
:root[data-hero="duotone"] .hero{ background:var(--grain3), var(--H); }
:root[data-hero="duotone"] .hero__slab{
  display:block; inset:0; width:auto; clip-path:polygon(100% 30%, 100% 100%, 42% 100%);
  background:var(--grain3), repeating-linear-gradient(-58deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 12px), linear-gradient(150deg, color-mix(in srgb, var(--A) 85%, #fff), var(--A));
}
:root[data-hero="duotone"] .hero__stripe--1{ display:block; inset:0; width:auto; opacity:1; transform:none; clip-path:polygon(100% 25%, 100% 30%, 42% 100%, 36% 100%); background:var(--B); }
:root[data-hero="duotone"] .hero__slide{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
:root[data-hero="duotone"] .hero__copy{ grid-row:1; grid-column:1; align-self:start; padding:84px 0 0 56px; max-width:560px; }
:root[data-hero="duotone"] .hero__kicker{ color:var(--B); }
:root[data-hero="duotone"] .hero__big{ grid-row:1 / 3; grid-column:1; justify-self:end; align-self:end; padding:0 5% 34px 0; color:transparent; z-index:1; display:flex; align-items:flex-end; gap:18px; }
:root[data-hero="duotone"] .hero__big b{ font-size:170px; line-height:.9; -webkit-text-stroke:4px #fff; text-shadow:none; filter:drop-shadow(6px 6px 0 rgb(0 0 0 / .35)); }
:root[data-hero="duotone"] .hero__big.is-long b{ font-size:130px; }
:root[data-hero="duotone"] .hero__big i{ -webkit-text-stroke:0; color:#fff; }
:root[data-hero="duotone"] .hero__big span{ margin:0 0 16px; background:var(--H); color:#fff; }
:root[data-hero="duotone"] .hero__cta{ margin-top:22px; }
:root[data-hero="duotone"] .hero__word{ display:none; }


/* ==========================================================================
   9. mesh — 유니폼 원단: 옅은 육각 망사 결 · 곡선으로 나뉜 밝은 패널 · 두 줄 박음선 · 숫자는 등번호처럼 테두리
             구도: 글은 아래 왼쪽 · 숫자는 위 오른쪽
   ========================================================================== */
:root[data-hero="mesh"] .hero{
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .05) 0 2.4px, transparent 2.8px) 0 0 / 10px 9px,
    radial-gradient(circle at 50% 50%, rgb(0 0 0 / .25) 0 2.4px, transparent 2.8px) 5px 4.5px / 10px 9px,
    var(--grain3), linear-gradient(115deg, var(--H), var(--H2));
}
:root[data-hero="mesh"] .hero__slab{    /* 곡선 패널 */
  display:block; clip-path:none; top:-40%; bottom:-40%; right:-18%; width:62%; border-radius:50%;
  background:repeating-linear-gradient(-60deg, rgb(255 255 255 / .04) 0 2px, transparent 2px 12px), radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--A) 30%, transparent), color-mix(in srgb, var(--A) 10%, transparent) 70%);
  box-shadow:inset 5px 0 0 var(--A);
}
:root[data-hero="mesh"] .hero__stripe--1{   /* 박음선 두 줄 */
  display:block; top:-40%; bottom:-40%; right:-18%; width:calc(62% + 16px); opacity:1; transform:none; border-radius:50%; background:none;
  border-left:2px dashed color-mix(in srgb, var(--B) 55%, transparent);
}
:root[data-hero="mesh"] .hero__slide{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
:root[data-hero="mesh"] .hero__copy{ grid-column:1; grid-row:1 / 3; align-self:end; padding:0 0 74px 56px; }
:root[data-hero="mesh"] .hero__kicker{ color:var(--K); }
:root[data-hero="mesh"] .hero__big{ grid-column:2; grid-row:1 / 3; align-self:start; justify-self:end; padding:36px 9% 0 0; color:var(--A); z-index:1; }
:root[data-hero="mesh"] .hero__big b{ font-size:170px; -webkit-text-stroke:4px var(--H); paint-order:stroke fill; filter:drop-shadow(0 0 0 var(--B)) drop-shadow(4px 4px 0 var(--B)); }
:root[data-hero="mesh"] .hero__big i{ color:var(--B); }
:root[data-hero="mesh"] .hero__big span{ background:var(--B); color:var(--H); }
:root[data-hero="mesh"] .hero__meta{ top:26px; }


/* ==========================================================================
   10. halo — 숫자를 둘러싼 빛 고리: 끊긴 원호 두 겹이 반대로 천천히 돈다 · 점선 고리 · 가운데 빛
              구도: 고리와 숫자가 왼쪽 · 글은 오른쪽
   ========================================================================== */
:root[data-hero="halo"] .hero{ background:var(--grain3), radial-gradient(40% 70% at 26% 50%, color-mix(in srgb, var(--A) 16%, transparent), transparent 70%), linear-gradient(115deg, var(--H), var(--H2)); }
:root[data-hero="halo"] .hero__slab, :root[data-hero="halo"] .hero__stripe--1, :root[data-hero="halo"] .hero__stripe--2{
  display:block; clip-path:none; top:50%; bottom:auto; right:auto; transform:none; opacity:1; border-radius:50%; translate:-50% -50%;
}
:root[data-hero="halo"] .hero__slab{
  left:26%; width:330px; height:330px;
  background:conic-gradient(var(--A) 0 70deg, transparent 70deg 110deg, var(--A) 110deg 200deg, transparent 200deg 250deg, var(--A) 250deg 320deg, transparent 320deg);
  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 62.5% 66%, transparent 66.5%); mask:radial-gradient(circle, transparent 0 62%, #000 62.5% 66%, transparent 66.5%);
  filter:drop-shadow(0 0 10px var(--A)); animation:haloSpin 14s linear infinite;
}
:root[data-hero="halo"] .hero__stripe--1{
  left:26%; width:290px; height:290px;
  background:conic-gradient(var(--B) 0 40deg, transparent 40deg 180deg, var(--B) 180deg 230deg, transparent 230deg);
  -webkit-mask:radial-gradient(circle, transparent 0 64%, #000 64.5% 66.5%, transparent 67%); mask:radial-gradient(circle, transparent 0 64%, #000 64.5% 66.5%, transparent 67%);
  animation:haloSpin 9s linear infinite reverse;
}
:root[data-hero="halo"] .hero__stripe--2{
  left:26%; width:380px; height:380px; background:none; border:1.5px dashed color-mix(in srgb, var(--A) 35%, transparent);
}
@keyframes haloSpin{ to{ rotate:360deg; } }
:root[data-hero="halo"] .hero__slide{ grid-template-columns:52% 1fr; }
:root[data-hero="halo"] .hero__big{ order:-1; justify-self:center; padding:0; color:#fff; z-index:1; justify-items:center; }
:root[data-hero="halo"] .hero__big b{ font-size:120px; text-shadow:0 0 30px color-mix(in srgb, var(--A) 60%, transparent); }
:root[data-hero="halo"] .hero__big.is-long b{ font-size:80px; }
:root[data-hero="halo"] .hero__big i{ color:var(--A); }
:root[data-hero="halo"] .hero__big span{ background:none; border:1px solid var(--A); color:var(--A); border-radius:99px; padding:4px 14px; }
:root[data-hero="halo"] .hero__copy{ padding:0 56px 18px 0; }
:root[data-hero="halo"] .hero__kicker{ color:var(--K); }
:root[data-hero="halo"] .hero__meta, :root[data-hero="halo"] .hero__dots{ left:52%; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="halo"] :is(.hero__slab, .hero__stripe--1){ animation:none; } }


/* 12번 스타디움 · 엠버 레드 배너는 2026-10-01 부터 css/theme-skins-4.css (matchnight) 에서 그린다 */


/* ==========================================================================
   입구 카드 3가지 — hatch · edge · duo (뒤 윤곽 영문은 모두 남긴다)
   ========================================================================== */
:root:is([data-cats="hatch"], [data-cats="edge"], [data-cats="duo"]) .cat{ clip-path:none; }
:root:is([data-cats="hatch"], [data-cats="edge"], [data-cats="duo"]) .cat__go, :root:is([data-cats="hatch"], [data-cats="edge"], [data-cats="duo"]) .cat__go svg{ transform:none; }

/* hatch — 어두운 판 · 오른쪽 절반 포인트 색 빗살 · 왼쪽 위 삼각 · 아래 포인트 줄 */
:root[data-cats="hatch"] .cat{
  border-radius:4px; border:1px solid rgb(255 255 255 / .07);
  background:
    repeating-linear-gradient(-62deg, color-mix(in srgb, var(--accent) 24%, transparent) 0 2px, transparent 2px 10px) right top / 48% 100% no-repeat,
    linear-gradient(160deg, var(--surface-2), var(--surface));
}
:root[data-cats="hatch"] .cat::after{ background:var(--accent); height:3px; }
:root[data-cats="hatch"] .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-cats="hatch"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--accent); }
:root[data-cats="hatch"] .cat:hover{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-cats="hatch"] .cat:hover .cat__go{ background:var(--accent); color:var(--accent-ink); }

/* edge — 왼쪽에 굵은 사선 포인트 날 · 고운 입자 · 흰 윤곽 영문 */
:root[data-cats="edge"] .cat{
  border-radius:4px; border:0; padding-left:44px;
  background:
    linear-gradient(100deg, var(--accent) 0 16px, transparent 16px 22px, color-mix(in srgb, var(--accent-2) 70%, transparent) 22px 25px, transparent 25px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E"),
    var(--surface);
  box-shadow:inset 0 0 0 1px rgb(var(--fg-rgb) / .06);
}
:root[data-cats="edge"] .cat::before{ display:none; }
:root[data-cats="edge"] .cat::after{ background:var(--accent); height:2px; }
:root[data-cats="edge"] .cat__no{ left:44px; background:none; padding:0; color:var(--accent-fg); }
:root[data-cats="edge"] .cat__en{ -webkit-text-stroke-color:rgb(var(--fg-rgb) / .13); }
:root[data-cats="edge"] .cat:hover .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-cats="edge"] .cat:hover .cat__go{ background:var(--accent); color:var(--accent-ink); }

/* duo — 오른쪽 아래를 대각선으로 포인트 색 · 이음매에 보조색 줄 */
:root[data-cats="duo"] .cat{
  border-radius:4px; border:0;
  background:
    linear-gradient(-28deg, var(--accent) 0 28%, var(--accent-2) 28% 30%, transparent 30%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}
:root[data-cats="duo"] .cat::before{ display:none; }
:root[data-cats="duo"] .cat::after{ background:var(--accent-2); height:2px; }
:root[data-cats="duo"] .cat__no{ background:none; padding:0; color:var(--accent-fg); }
:root[data-cats="duo"] .cat__en{ -webkit-text-stroke-color:rgb(var(--fg-rgb) / .16); }
:root[data-cats="duo"] .cat:hover .cat__en{ -webkit-text-stroke-color:rgb(var(--fg-rgb) / .45); }
:root[data-cats="duo"] .cat__go{ background:var(--accent-ink); color:var(--accent); }

/* sponsor 카드를 다른 테마 색으로 (원래는 9번 화이트 스포츠 레드 전용 빨강) */
:root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat{
  background:
    linear-gradient(-66deg, var(--accent) 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;
}
:root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat::after{ background:var(--accent); }
:root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat__title::after{ color:var(--accent); }
:root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat:hover{ border-color:var(--accent); }
:root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat:hover .cat__en{ -webkit-text-stroke-color:var(--accent); }
:root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat:hover .cat__go{ background:var(--accent); color:var(--accent-ink); }
:root:not([data-theme="dark-mono"])[data-cats="slash"] .cat{ background:linear-gradient(-66deg, var(--accent) 0 34px, #070708 34px 60px, transparent 60px) right top / 100% 100% no-repeat, linear-gradient(160deg, var(--surface-2), var(--surface)); }
:root:not([data-theme="dark-mono"])[data-cats="slash"] .cat::after, :root:not([data-theme="dark-mono"])[data-cats="slash"] .cat:hover .cat__go{ background:var(--accent); color:var(--accent-ink); }
:root:not([data-theme="dark-mono"])[data-cats="slash"] .cat__title::after{ color:var(--accent); }


/* ---- 폰: 모든 구도를 <글 왼쪽 · 숫자 오른쪽> 한 가지로 되돌린다 (장식은 그대로) ---- */
@media (max-width:1023px){
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__slide{
    grid-template-columns:1fr 40% !important; grid-template-rows:none !important; align-items:center;
  }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__copy{
    display:block; order:0; grid-column:1; grid-row:1; align-self:center; margin:0; padding:0 0 10px 16px; max-width:none;
  }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) :is(.hero__kicker, .hero__title, .hero__sub, .hero__cta){
    grid-column:auto; grid-row:auto; margin:0; justify-self:start; align-self:auto; text-align:left; max-width:none;
  }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__title{ margin:4px 0; font-size:21px !important; }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__cta{ margin-top:10px; }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big{
    order:0; grid-column:2; grid-row:1; display:grid; justify-self:center; align-self:center; justify-items:center; padding:0; margin:0;
  }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big b{ font-size:56px !important; }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big.is-long b{ font-size:34px !important; }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__big span{ margin:4px 0 0; padding:2px 6px; font-size:9px; letter-spacing:.06em; white-space:nowrap; }
  :root:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__word{ display:none; }
  :root[data-style="geo"]:is([data-hero="blades"], [data-hero="chevron"], [data-hero="band"], [data-hero="bracket"], [data-hero="racing"],
           [data-hero="streak"], [data-hero="whitepanel"], [data-hero="duotone"], [data-hero="mesh"], [data-hero="halo"]) .hero__kicker{ font-size:10px; letter-spacing:.1em; }
  :root[data-hero="blades"] .hero__slab{ width:150px; right:2%; background:linear-gradient(90deg, var(--A) 0 26px, transparent 26px 36px, #fff 36px 39px, transparent 39px 54px, var(--B) 54px 58px, transparent 58px 80px, var(--A) 80px 86px, transparent 86px); }
  :root[data-hero="chevron"] .hero__slab, :root[data-hero="chevron"] .hero__stripe--1{ width:110px; }
  :root[data-hero="chevron"] .hero__stripe--1{ right:calc(4% + 64px); }
  :root[data-hero="band"] .hero__slab, :root[data-hero="band"] .hero__stripe--1{ display:none; }
  :root[data-hero="band"] .hero__big{ display:grid; gap:0; }
  :root[data-hero="bracket"] .hero__stripe--1, :root[data-hero="bracket"] .hero__stripe--2{ top:18px; bottom:18px; width:26px; border-width:5px; }
  :root[data-hero="bracket"] .hero__stripe--1{ right:calc(3% + 34%); } :root[data-hero="bracket"] .hero__stripe--2{ right:3%; }
  :root[data-hero="bracket"] .hero__slab, :root[data-hero="bracket"] .hero__stage::after{ display:none; }
  :root[data-hero="racing"] .hero__slab{ width:100px; background:linear-gradient(90deg, var(--A) 0 40px, #fff 40px 48px, transparent 48px 56px, var(--B) 56px 72px, transparent 72px 78px, var(--A) 78px); }
  :root[data-hero="racing"] .hero__stripe--1{ display:none; }
  :root[data-hero="racing"] .hero__big b{ -webkit-text-stroke-width:2px; text-shadow:4px 4px 0 var(--A); }
  :root[data-hero="streak"] .hero__big::before{ display:none; }
  :root[data-hero="streak"] .hero__big{ display:grid; gap:0; }
  :root[data-hero="duotone"] .hero__big{ display:grid; gap:0; }
  :root[data-hero="duotone"] .hero__big b{ -webkit-text-stroke-width:2px; }
  :root[data-hero="mesh"] .hero__big b{ -webkit-text-stroke-width:2px; }
  :root[data-hero="halo"] .hero__slab{ width:150px; height:150px; left:auto; right:-75px; translate:0 -50%; margin-right:20%; }
  :root[data-hero="halo"] .hero__stripe--1{ width:130px; height:130px; left:auto; right:-65px; translate:0 -50%; margin-right:20%; }
  :root[data-hero="halo"] .hero__stripe--2{ display:none; }
  :root[data-hero="whitepanel"] .hero__stripe--1{ display:none; }
  :root:is([data-cats="edge"]) .cat{ padding-left:20px; background:linear-gradient(100deg, var(--accent) 0 8px, transparent 8px), var(--surface); }
  :root:is([data-cats="hatch"]) .cat{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); }
  :root:not([data-theme="light-sports"])[data-cats="sponsor"] .cat{ background:linear-gradient(-66deg, var(--accent) 0 8px, #141518 8px 14px, transparent 14px) right top / 100% 100% no-repeat, #fff; }
}