/* ==========================================================================
   theme-skins-4 — 내용이 다른 메인 배너 (2026-10-01) · js/hero-kinds.js 가 그린다
   "20% 20% 20%" 큰 숫자만 도는 배너 대신 — 경기 · 실시간 스코어 · 배당 부스트 · 라이브 딜러 · 잭팟 · 슬롯 · 순위 · VIP · 카운트다운
   구도도 서로 다르게: 사진 위 카드 / 위 점수판 · 아래 글 / 왼쪽 배당 · 오른쪽 글 / 세로 사진 조각 / 가운데 숫자판 /
                      계단 카드 / 흰 표 / 바닥 계단 막대 / 오른쪽 색 판 시계 / 양 끝 엠블럼
   색은 모두 테마 변수: --A 채움(포인트) · --N 채움 위 글자 · --K 어두운 바탕 위 강조 글자 · --B 보조
   ========================================================================== */
.hk{
  --A: var(--hero-slab); --N: var(--hero-num); --K: var(--hero-kick); --B: var(--accent-2); --H: var(--hero-bg); --H2: var(--hero-bg-2);
  --grain4: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");
  background:var(--grain4), radial-gradient(70% 90% at 85% 20%, color-mix(in srgb, var(--A) 16%, transparent), transparent 70%), linear-gradient(115deg, var(--H), var(--H2));
  color:#fff;
}
/* 옅은 세로 격자선 */
.hk::before{ width:100%; height:100%; background:repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 12.5%); -webkit-mask-image:none; mask-image:none; }
.hk::after{ display:none; }
.hk .hero__kicker{ color:var(--K); }
:root[data-style="geo"] .hk .hero__kicker{ padding:0; background:none; transform:none; font-size:15px; letter-spacing:.2em; color:var(--K); }
.hk .hero__slide{ grid-template-columns:minmax(380px, 40%) 1fr; }
.hk .hero__title{ font-size:44px; letter-spacing:-.03em; }
.hk-art{ position:relative; z-index:1; align-self:stretch; opacity:0; transform:translateX(26px); transition:opacity .3s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.hero__slide.is-on .hk-art{ opacity:1; transform:none; }
.hk-stage__a, .hk-stage__b{ position:absolute; inset:0; }

/* 공통 조각 */
.hk-pill{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 11px 0 9px; border-radius:99px; background:var(--live, #e0364b); color:#fff;
  font-size:12px; font-weight:900; letter-spacing:.06em; box-shadow:0 2px 10px rgb(215 55 75 / .4);
}
.hk-pill i{ width:7px; height:7px; border-radius:50%; background:#ffc2cb; animation:pulse 1.4s ease-in-out infinite; }
.hk-crest{ display:block; width:64px; height:64px; filter:drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.hk-crest svg{ display:block; width:100%; height:100%; }
.hk-team{ display:grid; justify-items:center; gap:8px; text-align:center; }
.hk-team b{ font-size:16px; font-weight:900; letter-spacing:-.02em; line-height:1.2; word-break:keep-all; }
.hk-odd{
  display:grid; place-items:center; gap:2px; min-width:0; height:54px; border-radius:4px;
  background:#15161a; color:#fff; transition:background .15s, color .15s;
}
.hk-odd small{ font-size:11px; font-weight:700; color:#9a9ca5; }
.hk-odd b{ font-family:var(--font-display); font-style:var(--display-italic); font-size:22px; font-weight:800; color:var(--K); }
.hk-word{
  position:absolute; left:-2%; bottom:-.18em; z-index:0; white-space:nowrap; pointer-events:none;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:170px; line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.5px rgb(255 255 255 / .09);
}


/* ==========================================================================
   match — 경기장 사진 위, 오른쪽에 기울어진 흰 매치 카드 (두 팀 · 시각 · 1X2 배당)
   ========================================================================== */
.hk--match .hero__slide{ overflow:hidden; }
.hk--match .hero__slide::before{   /* 이 장의 경기장 사진 — 슬라이드 전체, 왼쪽은 배너 색으로 덮고 포인트 색을 살짝 */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, var(--H) 28%, color-mix(in srgb, var(--H) 60%, transparent) 50%, color-mix(in srgb, var(--A) 12%, transparent) 100%),
    var(--bgimg) center 60% / cover no-repeat;
}
.hk--match .hk-match{ display:grid; align-items:center; justify-items:end; padding-right:48px; }
.hk--match .hk-match::after{
  content:"MATCHDAY"; position:absolute; right:-10px; bottom:-26px; z-index:-1; white-space:nowrap;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:150px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgb(255 255 255 / .14);
}
.hk-match__card{
  position:relative; width:min(540px, 100%); padding:22px 30px 26px 54px; color:#141518;
  background:var(--grain4), #fff; clip-path:polygon(34px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow:0 30px 60px -20px rgb(0 0 0 / .7);
}
.hk-match__card::before{   /* 왼쪽 빗살 띠 */
  content:""; position:absolute; left:0; top:0; bottom:0; width:58px; clip-path:polygon(34px 0, 58px 0, 24px 100%, 0 100%);
  background:repeating-linear-gradient(-60deg, var(--A) 0 3px, transparent 3px 8px);
}
.hk-match__top{ display:flex; justify-content:space-between; align-items:center; margin:0; }
.hk-match__top span{ padding:3px 10px; background:var(--A); color:var(--N); font-size:12px; font-weight:900; letter-spacing:.04em; transform:skewX(-12deg); }
.hk-match__top b{ font-family:var(--font-display); font-style:var(--display-italic); font-size:20px; font-weight:800; }
.hk-match__teams{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:18px 0 18px; }
.hk-match__teams em{
  font-family:var(--font-display); font-style:italic; font-weight:900; font-size:54px; line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2px #141518;
}
.hk-match__teams .hk-crest{ width:72px; height:72px; }
.hk-match__odds{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }


/* ==========================================================================
   live — 위: 큰 점수판(두 팀 · 기울임 점수 · 진행 막대 · 기록) / 아래: 글 한 줄 + 버튼
   ========================================================================== */
.hk--live{ background:var(--grain4), radial-gradient(circle, rgb(255 255 255 / .05) 1px, transparent 1.4px) 0 0 / 6px 6px, linear-gradient(180deg, var(--H2), var(--H)); }
.hk--live .hk-stage__a{   /* 점수 뒤 기울어진 포인트 판 */
  left:50%; right:auto; width:420px; top:36px; bottom:120px; translate:-50% 0; transform:skewX(-14deg);
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--A) 22%, transparent) 0 2px, transparent 2px 10px);
  border-left:6px solid var(--A); border-right:6px solid var(--A);
}
.hk--live .hero__slide{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
.hk--live .hk-art{ grid-row:1; transform:translateY(-14px); display:grid; grid-template-rows:auto auto auto auto; align-content:center; justify-items:center; gap:10px; padding-top:30px; }
.hk--live .hero__slide.is-on .hk-art{ transform:none; }
.hk--live .hero__copy{
  grid-row:2; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-items:end; column-gap:28px;
  padding:16px 56px 24px; border-top:1px solid rgb(255 255 255 / .1); background:rgb(0 0 0 / .28);
}
.hk--live .hero__kicker{ grid-column:1; grid-row:1; }
.hk--live .hero__title{ grid-column:1 / 3; grid-row:2; margin:4px 0 0; font-size:26px; }
.hk--live .hero__sub{ grid-column:2; grid-row:1; font-size:13px; }
.hk--live .hero__cta{ grid-column:3; grid-row:1 / 3; margin:0; align-self:center; }
.hk--live .hero__meta{ display:none; }
.hk--live .hero__dots{ left:auto; right:56px; top:22px; bottom:auto; }
.hk-live__clock{ display:flex; align-items:center; gap:12px; margin:0; }
.hk-live__clock b{ font-family:var(--font-display); font-style:var(--display-italic); font-size:20px; font-weight:800; letter-spacing:.06em; }
.hk-live__board{ display:grid; grid-template-columns:260px auto 260px; align-items:center; gap:34px; }
.hk-live__side .hk-team{ grid-template-columns:auto 1fr; justify-items:start; text-align:left; gap:14px; align-items:center; }
.hk-live__side .hk-team.is-away{ grid-template-columns:1fr auto; justify-items:end; text-align:right; }
.hk-live__side .hk-team.is-away .hk-crest{ order:2; }
.hk-live__side .hk-team b{ font-size:22px; }
.hk-live__score{ display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; line-height:.8; }
.hk-live__score b{ font-size:130px; text-shadow:0 10px 30px rgb(0 0 0 / .45); font-variant-numeric:tabular-nums; }
.hk-live__score i{ font-size:70px; color:var(--K); animation:pulse 1.4s ease-in-out infinite; }
.hk-live__bar{ width:560px; height:4px; background:rgb(255 255 255 / .12); }
.hk-live__bar i{ display:block; width:var(--p); height:100%; background:linear-gradient(90deg, var(--A), var(--B)); box-shadow:0 0 12px var(--A); }
.hk-live__stats{ display:flex; gap:36px; margin:4px 0 0; padding:0; list-style:none; }
.hk-live__stats li{ position:relative; display:grid; grid-template-columns:24px auto 24px; gap:10px; align-items:center; padding-bottom:8px; font-size:13px; }
.hk-live__stats li span{ font-family:var(--font-display); font-style:var(--display-italic); font-size:18px; font-weight:800; text-align:center; }
.hk-live__stats li em{ font-style:normal; color:rgb(255 255 255 / .6); }
.hk-live__stats li i{ position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--A) var(--a), var(--B) var(--a)); }
.hk-live__odds{ display:none; }


/* ==========================================================================
   boost — 왼쪽: 원래 배당(줄 그음) → 사선 화살 세 개 → 올린 배당(포인트 판) · 조합 띠 / 오른쪽: 글
   ========================================================================== */
.hk--boost .hero__slide{ grid-template-columns:1fr minmax(360px, 38%); }
.hk--boost .hk-art{ order:-1; transform:translateX(-26px); display:grid; align-content:center; padding-left:56px; }
.hk--boost .hero__slide.is-on .hk-art{ transform:none; }
.hk--boost .hero__copy{ padding:0 56px 22px 10px; }
.hk--boost .hero__meta, .hk--boost .hero__dots{ left:auto; right:56px; }
.hk--boost .hero__meta{ right:56px; }
.hk--boost .hk-stage__a{   /* 속도선 */
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / .35) 60%, transparent) 0 30% / 220px 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--A) 90%, transparent) 60%, transparent) 0 56% / 300px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .25) 60%, transparent) 0 78% / 160px 1px no-repeat;
  animation:slashSpeed 2.4s linear infinite;
}
.hk-boost__row{ display:flex; align-items:center; gap:22px; }
.hk-boost__was, .hk-boost__now{ display:grid; gap:6px; }
.hk-boost__row small{ font-size:12px; font-weight:800; letter-spacing:.14em; color:rgb(255 255 255 / .5); }
.hk-boost__was s{
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:74px; line-height:.9;
  color:rgb(255 255 255 / .38); text-decoration:none; position:relative;
}
.hk-boost__was s::after{ content:""; position:absolute; left:-6px; right:-6px; top:52%; height:5px; background:var(--B); transform:rotate(-10deg); }
.hk-boost__arrow{ display:flex; gap:6px; }
.hk-boost__arrow i{ width:22px; height:60px; background:var(--A); clip-path:polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); animation:boostArrow 1.2s ease-in-out infinite; }
.hk-boost__arrow i:nth-child(2){ animation-delay:.15s; } .hk-boost__arrow i:nth-child(3){ animation-delay:.3s; }
@keyframes boostArrow{ 0%, 100%{ opacity:.25; } 40%{ opacity:1; } }
.hk-boost__now b{
  position:relative; display:block; padding:6px 26px 4px 18px; background:var(--grain4), repeating-linear-gradient(-60deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 10px), var(--A); color:var(--N);
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:132px; line-height:.9; letter-spacing:-.02em;
  clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow:0 20px 40px -20px var(--A);
}
.hk-boost__pick{ display:flex; align-items:center; gap:14px; margin:20px 0 0; padding:10px 18px; width:max-content; max-width:100%; background:#fff; color:#141518; clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.hk-boost__pick b{ font-size:17px; font-weight:900; }
.hk-boost__pick span{ font-size:13px; color:#62646b; }
.hk-boost__up{
  position:absolute; left:56px; top:60px; padding:4px 12px; background:var(--B); color:var(--H);
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:18px; letter-spacing:.06em; transform:skewX(-10deg);
}
@media (prefers-reduced-motion:reduce){ .hk-boost__arrow i, .hk--boost .hk-stage__a{ animation:none; } }


/* ==========================================================================
   dealer — 오른쪽 절반을 비스듬히 자른 세로 사진 세 장 (가운데가 앞으로) · 테이블 이름표 · 큰 윤곽 게임 이름
   ========================================================================== */
.hk--dealer .hero__slide{ grid-template-columns:minmax(380px, 42%) 1fr; }
.hk--dealer .hk-art{ overflow:visible; }
.hk-dealer__ph{
  position:absolute; top:0; bottom:0; width:38%; overflow:hidden; clip-path:polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  background:#000;
}
.hk-dealer__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; filter:saturate(.9) contrast(1.05); }
.hk-dealer__ph--0{ left:0; opacity:.55; }
.hk-dealer__ph--1{ left:26%; z-index:2; width:42%; }
.hk-dealer__ph--2{ left:58%; opacity:.55; }
.hk-dealer__ph--0 img, .hk-dealer__ph--2 img{ filter:grayscale(.6) brightness(.7); }
.hk-dealer__ph--1::after{   /* 가운데 사진 테두리 — 포인트 색 사선 */
  content:""; position:absolute; inset:0; clip-path:polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  background:linear-gradient(90deg, var(--A) 0 4px, transparent 4px), linear-gradient(transparent 60%, rgb(0 0 0 / .7));
}
.hk-dealer__ph--1{ box-shadow:0 0 0 1px var(--A); }
.hk--dealer .hk-word{ z-index:3; left:auto; right:-2%; bottom:-.2em; font-size:120px; -webkit-text-stroke-color:rgb(255 255 255 / .25); }
.hk-dealer__tag{
  position:absolute; left:4%; bottom:40px; z-index:4; display:grid; gap:6px; padding:14px 18px; min-width:220px;
  background:rgb(10 10 12 / .82); backdrop-filter:blur(6px); border-left:4px solid var(--A);
}
.hk-dealer__tag b{ font-size:20px; font-weight:900; letter-spacing:-.02em; }
.hk-dealer__tag small{ font-size:13px; color:rgb(255 255 255 / .65); }
.hk-dealer__tag em{ font-style:normal; font-weight:800; color:var(--K); }
.hk-dealer__tag .hk-pill{ justify-self:start; }


/* ==========================================================================
   jackpot — 가운데: 한 칸씩 도는 숫자판 · 위 라벨 · 아래 등급 칩(또는 당첨자). 뒤에 빛살이 돈다
   ========================================================================== */
.hk--jackpot .hk-stage__a{
  inset:-60%; background:repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--A) 7%, transparent) 0 5deg, transparent 5deg 18deg);
  -webkit-mask-image:radial-gradient(circle, #000 10%, transparent 55%); mask-image:radial-gradient(circle, #000 10%, transparent 55%);
  animation:haloSpin 60s linear infinite;
}
.hk--jackpot .hk-stage__b{ background:radial-gradient(40% 50% at 50% 55%, color-mix(in srgb, var(--A) 22%, transparent), transparent 70%); }
.hk--jackpot .hero__slide{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; justify-items:center; text-align:center; }
.hk--jackpot .hero__copy{ display:contents; }
.hk--jackpot .hero__copy > *{ grid-column:1; }
.hk--jackpot .hero__kicker{ grid-row:1; margin-top:54px; }
.hk--jackpot .hero__kicker::before{ display:none; }
.hk--jackpot .hero__title{ grid-row:1; margin:88px 0 0; font-size:28px; }
.hk--jackpot .hero__sub{ display:none; }
.hk--jackpot .hero__cta{ grid-row:3; margin:0 0 30px; }
.hk--jackpot .hk-art{ grid-row:2; display:grid; justify-items:center; align-content:center; gap:14px; transform:scale(.96); }
.hk--jackpot .hero__slide.is-on .hk-art{ transform:none; }
.hk--jackpot .hero__meta{ left:56px; }
.hk--jackpot .hero__dots{ left:auto; right:56px; }
.hk-jp__label{ display:none; }
.hk-jp__num{ display:flex; align-items:center; gap:5px; }
.hk-jp__cur{ margin-right:8px; font-family:var(--font-display); font-style:normal; font-weight:900; font-size:52px; color:var(--K); }
.hk-jp__d{
  position:relative; display:grid; place-items:center; width:58px; height:84px; border-radius:4px;
  background:linear-gradient(180deg, #2a2b31, #111214 50%, #1b1c20 50%, #0c0d0f); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08), 0 10px 20px -8px rgb(0 0 0 / .8);
  font-family:var(--font-display); font-weight:900; font-size:62px; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--K); text-shadow:0 0 18px color-mix(in srgb, var(--A) 60%, transparent);
}
.hk-jp__d::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgb(0 0 0 / .7); }
.hk-jp__sep{ font-style:normal; font-size:40px; font-weight:900; color:rgb(255 255 255 / .4); align-self:end; }
.hk-jp__tiers, .hk-jp__win{ display:flex; gap:10px; margin:6px 0 0; padding:0; list-style:none; }
.hk-jp__tiers li, .hk-jp__win li{
  display:flex; align-items:center; gap:10px; padding:7px 16px; border:1px solid rgb(255 255 255 / .14); background:rgb(0 0 0 / .35);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.hk-jp__tiers span{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:13px; letter-spacing:.12em; color:var(--K); }
.hk-jp__tiers b{ font-size:15px; font-weight:900; }
.hk-jp__win li{ font-size:13px; }
.hk-jp__win b{ font-weight:900; } .hk-jp__win span{ color:rgb(255 255 255 / .6); } .hk-jp__win em{ font-style:normal; font-weight:900; color:var(--K); }
@media (prefers-reduced-motion:reduce){ .hk--jackpot .hk-stage__a{ animation:none; } }


/* ==========================================================================
   slots — 위 왼쪽: 글 / 오른쪽 아래에서 위로: 게임 표지 다섯 장이 계단처럼 (살짝 기울어) 올라간다
   ========================================================================== */
.hk--slots .hk-stage__a{   /* 계단 뒤 사선 빛 */
  left:40%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--A) 20%, transparent), transparent),
             repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 12px);
}
.hk--slots .hero__slide{ grid-template-columns:minmax(360px, 36%) 1fr; }
.hk--slots .hero__copy{ align-self:start; padding-top:74px; }
.hk-slots{ perspective:900px; }
.hk-slots__card{
  position:absolute; bottom:calc(22px + var(--k) * 26px); left:calc(var(--k) * 19%); width:150px; aspect-ratio:3 / 4.1;
  display:grid; grid-template-rows:1fr auto; overflow:hidden; border-radius:6px; background:#000; color:#fff;
  transform:rotateY(-14deg) rotateZ(-2deg); transform-origin:left bottom; box-shadow:0 20px 34px -12px rgb(0 0 0 / .8);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.hk-slots__card img{ width:100%; height:100%; min-height:0; object-fit:cover; }
.hk-slots__card span{ display:grid; padding:7px 9px 8px; background:linear-gradient(transparent, rgb(0 0 0 / .9)); margin-top:-40px; position:relative; }
.hk-slots__card b{ font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hk-slots__card small{ font-size:11px; color:rgb(255 255 255 / .6); }
.hk-slots__card--0{ --k:0; } .hk-slots__card--1{ --k:1; } .hk-slots__card--2{ --k:2; } .hk-slots__card--3{ --k:3; } .hk-slots__card--4{ --k:4; }
.hk-slots__card--2{ width:176px; z-index:2; box-shadow:0 0 0 3px var(--A), 0 24px 40px -12px rgb(0 0 0 / .9); }
.hk-slots__card:hover{ transform:rotateY(0) rotateZ(0) translateY(-8px); z-index:3; }
.hk--slots .hero__slide.is-on .hk-slots__card{ animation:slotRise .7s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--k) * 70ms); }
@keyframes slotRise{ from{ opacity:0; translate:0 40px; } }


/* ==========================================================================
   rank — 왼쪽: 글 + 총 상금 · 남은 시간 / 오른쪽: 비스듬한 흰 순위표 다섯 줄 (1~3위 포인트)
   ========================================================================== */
.hk--rank .hero__slide{ grid-template-columns:minmax(380px, 44%) 1fr; }
.hk--rank .hero__copy{ padding-bottom:0; }
.hk--rank .hero__sub{ display:none; }
.hk--rank .hk-art{ display:grid; align-content:center; }
.hk--rank .hero__dots{ left:auto; right:56px; }
.hk-rank__pool{ display:flex; align-items:baseline; gap:12px; justify-self:end; margin:0 48px 10px 0; }
.hk-rank__pool small{ font-size:12px; font-weight:800; letter-spacing:.16em; color:rgb(255 255 255 / .55); }
.hk-rank__pool b{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:32px; line-height:1; color:var(--K); }
.hk-rank__end{ font-size:13px; color:rgb(255 255 255 / .7); }
.hk-rank__end em{ font-style:normal; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.hk-rank__list{
  margin:0 48px 0 0; padding:14px 22px 14px 44px; list-style:none; color:#141518;
  background:var(--grain4), #fff; clip-path:polygon(28px 0, 100% 0, 100% 100%, 0 100%); box-shadow:0 30px 60px -20px rgb(0 0 0 / .7);
}
.hk-rank__list li{ display:grid; grid-template-columns:36px 1fr auto 130px; align-items:center; gap:12px; height:46px; border-bottom:1px solid #ececef; font-size:15px; }
.hk-rank__list li:last-child{ border-bottom:0; }
.hk-rank__list i{ font-family:var(--font-display); font-style:italic; font-weight:900; font-size:30px; line-height:1; color:#b9bbc2; }
.hk-rank__list li.is-top i{ color:var(--A); -webkit-text-stroke:1px #141518; }
.hk-rank__list li:first-child{ background:linear-gradient(90deg, color-mix(in srgb, var(--A) 16%, transparent), transparent 70%); margin:0 -22px 0 -44px; padding:0 22px 0 44px; }
.hk-rank__list b{ font-weight:900; }
.hk-rank__list span{ color:#62646b; font-variant-numeric:tabular-nums; }
.hk-rank__list em{ font-style:normal; font-weight:900; text-align:right; font-variant-numeric:tabular-nums; }


/* ==========================================================================
   vip — 바닥에서 오른쪽으로 올라가는 여섯 계단(등급) · 지금 등급만 포인트 색 + 혜택 / 글은 왼쪽 위
   ========================================================================== */
.hk--vip .hero__slide{ grid-template-columns:1fr; }
.hk--vip .hero__copy{ align-self:start; padding-top:64px; max-width:520px; z-index:2; }
.hk--vip .hk-art{ position:absolute; inset:0; transform:translateY(20px); }
.hk--vip .hero__slide.is-on .hk-art{ transform:none; }
.hk-vip__steps{ position:absolute; left:32%; right:40px; bottom:0; top:40px; display:flex; align-items:flex-end; gap:8px; margin:0; padding:0; list-style:none; }
.hk-vip__steps li{
  position:relative; flex:1; height:var(--h); display:grid; align-content:start; gap:6px; padding:16px 14px;
  background:linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02)), repeating-linear-gradient(-60deg, rgb(255 255 255 / .04) 0 2px, transparent 2px 10px);
  border-top:3px solid rgb(255 255 255 / .25); clip-path:polygon(0 12px, 100% 0, 100% 100%, 0 100%);
}
.hk-vip__steps b{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:26px; line-height:1; color:rgb(255 255 255 / .7); }
.hk-vip__steps span{ font-size:12px; line-height:1.35; color:rgb(255 255 255 / .45); word-break:keep-all; }
.hk-vip__steps li.is-on{ background:var(--grain4), repeating-linear-gradient(-60deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 10px), var(--A); border-top-color:#fff; box-shadow:0 0 40px -6px var(--A); }
.hk-vip__steps li.is-on b{ color:var(--N); font-size:38px; }
.hk-vip__steps li.is-on span{ color:var(--N); font-size:14px; font-weight:800; opacity:.85; }
.hk--vip .hero__slide.is-on .hk-vip__steps li{ animation:vipUp .6s cubic-bezier(.16,1,.3,1) both; }
.hk-vip__steps li:nth-child(2){ animation-delay:.05s !important; } .hk-vip__steps li:nth-child(3){ animation-delay:.1s !important; }
.hk-vip__steps li:nth-child(4){ animation-delay:.15s !important; } .hk-vip__steps li:nth-child(5){ animation-delay:.2s !important; } .hk-vip__steps li:nth-child(6){ animation-delay:.25s !important; }
@keyframes vipUp{ from{ transform:translateY(40%); opacity:0; } }
.hk--vip .hero__dots{ bottom:auto; top:24px; left:auto; right:56px; }


/* ==========================================================================
   count — 오른쪽 절반이 포인트 색 판(빗살 · 입자) · 그 위에 진한 큰 시계 DD:HH:MM:SS · 장소 / 글은 왼쪽
   ========================================================================== */
.hk--count .hk-stage__a{
  left:auto; width:56%; clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  background:var(--grain4), repeating-linear-gradient(-60deg, rgb(0 0 0 / .08) 0 2px, transparent 2px 12px), linear-gradient(160deg, color-mix(in srgb, var(--A) 88%, #fff), var(--A));
}
.hk--count .hk-stage__b{ left:auto; width:calc(56% + 22px); clip-path:polygon(calc(14% - 2px) 0, calc(14% + 6px) 0, 7px 100%, 0 100%); background:var(--B); }
.hk--count .hero__slide{ grid-template-columns:minmax(380px, 44%) 1fr; }
.hk--count .hk-art{ display:grid; align-content:center; justify-items:center; gap:14px; color:var(--N); padding-left:40px; }
.hk-count__clock{ display:flex; align-items:flex-start; gap:10px; }
.hk-count__clock > i{ font-family:var(--font-display); font-style:normal; font-weight:900; font-size:80px; line-height:1; opacity:.4; }
.hk-count__cell{ display:grid; justify-items:center; gap:4px; }
.hk-count__cell b{
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:108px; line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  text-shadow:4px 4px 0 color-mix(in srgb, var(--N) 18%, transparent);
}
.hk-count__cell small{ font-size:12px; font-weight:900; letter-spacing:.24em; opacity:.7; }
.hk-count__place{ margin:0; padding:6px 14px; background:var(--N); color:var(--A); font-size:13px; font-weight:900; letter-spacing:.16em; transform:skewX(-10deg); }


/* ==========================================================================
   matchnight (12번 엠버) — 조명 켜진 밤 경기장: 양 끝 큰 엠블럼 · 가운데 불꽃 VS · 떠오르는 불씨 · 관중 실루엣
   ========================================================================== */
.hk--matchnight{
  background:
    radial-gradient(60% 55% at 50% 118%, color-mix(in srgb, var(--A) 50%, transparent), transparent 70%),
    radial-gradient(28% 40% at 8% 0%, color-mix(in srgb, var(--B) 16%, transparent), transparent 70%),
    radial-gradient(28% 40% at 92% 0%, color-mix(in srgb, var(--B) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--H) 70%, #000), var(--H) 70%, color-mix(in srgb, var(--H) 70%, var(--A)));
}
/* 조명탑 빛줄기 */
.hk--matchnight .hk-stage__a{
  background:
    radial-gradient(circle at 6% -4%, #fff 0 5px, rgb(255 255 255 / .5) 7px, transparent 26px),
    radial-gradient(circle at 94% -4%, #fff 0 5px, rgb(255 255 255 / .5) 7px, transparent 26px),
    conic-gradient(from 138deg at 6% -4%, transparent 0deg, rgb(255 255 255 / .1) 6deg, rgb(255 255 255 / .02) 24deg, transparent 30deg),
    conic-gradient(from 192deg at 94% -4%, transparent 0deg, rgb(255 255 255 / .02) 6deg, rgb(255 255 255 / .1) 24deg, transparent 30deg);
}
/* 관중 실루엣 + 떠오르는 불씨 */
.hk--matchnight .hk-stage__b{
  top:auto; height:30%;
  background:
    radial-gradient(circle at 50% 100%, #050203 0 13px, transparent 13.5px) 0 100% / 26px 30px repeat-x,
    radial-gradient(circle at 50% 100%, #0a0405 0 11px, transparent 11.5px) 13px calc(100% - 12px) / 26px 30px repeat-x,
    linear-gradient(transparent 58%, #050203 58%);
}
.hk--matchnight .hk-stage__b::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:260px;
  background:
    radial-gradient(3px 3px at 12% 80%, var(--B), transparent), radial-gradient(2px 2px at 22% 70%, var(--A), transparent),
    radial-gradient(2.5px 2.5px at 34% 86%, #fff1c4, transparent), radial-gradient(2px 2px at 46% 76%, var(--A), transparent),
    radial-gradient(3px 3px at 58% 88%, var(--B), transparent), radial-gradient(2px 2px at 68% 72%, var(--A), transparent),
    radial-gradient(2.5px 2.5px at 80% 84%, #fff1c4, transparent), radial-gradient(2px 2px at 90% 74%, var(--A), transparent);
  animation:emberRise 4.5s linear infinite;
}
.hk--matchnight .hk-stage__b::after{   /* 불빛 지평선 */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--A) 25%, var(--B) 50%, var(--A) 75%, transparent); box-shadow:0 0 24px var(--A), 0 0 60px color-mix(in srgb, var(--A) 50%, transparent);
}
@keyframes emberRise{ from{ translate:0 40px; opacity:0; } 15%{ opacity:1; } to{ translate:10px -140px; opacity:0; } }
.hk--matchnight .hero__slide{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; justify-items:center; text-align:center; }
.hk--matchnight .hero__copy{ display:contents; }
.hk--matchnight .hero__copy > *{ grid-column:1; }
.hk--matchnight .hero__kicker{ grid-row:1; margin-top:30px; font-size:22px; letter-spacing:.3em; }
.hk--matchnight .hero__kicker::before{ display:none; }
.hk--matchnight .hero__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }   /* 대진은 엠블럼이 보여 준다 — 제목은 읽기 도구용으로만 */
.hk--matchnight .hero__sub{ display:none; }
.hk--matchnight .hero__cta{ grid-row:3; margin:0 0 30px; position:relative; z-index:2; }
.hk--matchnight .hk-art{ grid-row:1 / 4; position:absolute; inset:0; transform:scale(.97); }
.hk--matchnight .hero__slide.is-on .hk-art{ transform:none; }
.hk--matchnight .hero__meta{ left:50%; translate:-50% 0; top:14px; display:none; }
.hk--matchnight .hero__dots{ left:auto; right:40px; }
.hk-night__side{ position:absolute; top:50%; translate:0 -54%; display:grid; justify-items:center; gap:10px; width:230px; }
.hk-night__side--h{ left:6%; } .hk-night__side--a{ right:6%; }
.hk-night__side .hk-crest{ width:150px; height:150px; filter:drop-shadow(0 0 24px color-mix(in srgb, var(--A) 55%, transparent)) drop-shadow(0 12px 20px rgb(0 0 0 / .6)); }
.hk-night__side b{ font-size:22px; font-weight:900; letter-spacing:-.02em; text-shadow:0 2px 12px rgb(0 0 0 / .6); word-break:keep-all; }
.hk-night__vs{
  position:absolute; left:50%; top:50%; translate:-50% -62%;
  font-family:var(--font-display); font-style:italic; font-weight:900; font-size:150px; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(180deg, #fff6d8 10%, var(--B) 40%, var(--A) 75%, color-mix(in srgb, var(--A) 70%, #000)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--A) 60%, transparent));
}
.hk-night__when{ position:absolute; left:50%; top:calc(50% + 30px); translate:-50% 0; margin:0; white-space:nowrap; font-size:13px; font-weight:800; letter-spacing:.2em; color:rgb(255 255 255 / .7); }
.hk-night__when b{ color:var(--B); font-size:16px; }
.hk-night__odds{ position:absolute; left:50%; top:calc(50% + 56px); translate:-50% 0; display:flex; gap:6px; }
.hk-night__odds .hk-odd{ width:92px; height:46px; background:rgb(0 0 0 / .55); border:1px solid rgb(255 255 255 / .12); }
@media (prefers-reduced-motion:reduce){ .hk--matchnight .hk-stage__b::before{ animation:none; } }


/* ==========================================================================
   폰 (배너 높이 190) — 종류마다 가장 알아보기 쉬운 한 조각만 남긴다
   ========================================================================== */
@media (max-width:1023px){
  .hk .hero__slide{ grid-template-columns:1fr 46% !important; grid-template-rows:none !important; justify-items:stretch; text-align:left; }
  .hk .hero__copy{ display:block !important; grid-column:1; grid-row:1 !important; align-self:center; padding:0 0 0 16px !important; margin:0; max-width:none; background:none; border:0; }
  .hk .hero__kicker, .hk .hero__title, .hk .hero__sub, .hk .hero__cta{ grid-column:auto; grid-row:auto; margin-left:0; margin-right:0; }
  .hk .hero__kicker{ margin-top:0; }
  .hk .hero__kicker::before{ display:inline-block; }
  .hk .hero__title{ margin:4px 0 !important; font-size:20px !important; }
  .hk .hero__sub{ display:-webkit-box !important; }
  .hk .hero__cta{ margin:10px 0 0 !important; }
  .hk .hk-art{ grid-column:2; grid-row:1 !important; position:relative !important; inset:auto; order:0 !important; padding:0 !important; }
  .hk-word{ display:none; }
  .hk-crest{ width:40px; height:40px; }

  .hk--match .hk-match{ justify-items:center; }
  .hk--match .hk-match::after{ display:none; }
  .hk-match__card{ padding:10px 10px 10px 22px; clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
  .hk-match__card::before{ width:24px; clip-path:polygon(14px 0, 24px 0, 10px 100%, 0 100%); }
  .hk-match__top, .hk-match__odds{ display:none; }
  .hk-match__teams{ margin:0; gap:4px; }
  .hk-match__teams em{ font-size:22px; -webkit-text-stroke-width:1px; }
  .hk-match__teams .hk-crest{ width:38px; height:38px; }
  .hk-match__teams b{ font-size:10px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }

  .hk--live .hk-stage__a{ left:auto; right:6%; width:38%; top:30px; bottom:30px; translate:0 0; }
  .hk--live .hk-art{ align-content:center; gap:4px; }
  .hk-live__clock b{ font-size:12px; }
  .hk-live__clock .hk-pill{ height:18px; font-size:9.5px; padding:0 7px 0 6px; }
  .hk-live__board{ grid-template-columns:auto auto auto; gap:6px; }
  .hk-live__side .hk-team{ grid-template-columns:1fr !important; justify-items:center !important; }
  .hk-live__side .hk-team b{ display:none; }
  .hk-live__score b{ font-size:44px; } .hk-live__score i{ font-size:26px; }
  .hk-live__score{ gap:4px; }
  .hk-live__bar{ width:120px; }
  .hk-live__stats{ display:none; }

  .hk--boost .hk-art{ justify-items:center; align-content:center; }
  .hk-boost__row{ gap:6px; }
  .hk-boost__row small, .hk-boost__arrow, .hk-boost__up, .hk-boost__pick{ display:none; }
  .hk-boost__was s{ font-size:26px; }
  .hk-boost__now b{ font-size:52px; padding:4px 14px 2px 10px; }
  .hk--boost .hero__meta, .hk--boost .hero__dots{ display:none; }

  .hk-dealer__tag, .hk-dealer__ph--0{ display:none; }
  .hk-dealer__ph--1{ left:0; width:60%; } .hk-dealer__ph--2{ left:44%; width:56%; }

  .hk--jackpot .hero__slide{ grid-template-columns:1fr !important; grid-template-rows:auto auto !important; align-content:center; }
  .hk--jackpot .hero__copy{ grid-row:1 !important; }
  .hk--jackpot .hero__sub{ display:none !important; }
  .hk--jackpot .hk-art{ grid-column:1; grid-row:2 !important; justify-items:start; gap:6px; margin:8px 0 0 16px; }
  .hk-jp__cur{ font-size:18px; margin-right:2px; }
  .hk-jp__num{ gap:2px; }
  .hk-jp__d{ width:21px; height:30px; font-size:22px; border-radius:2px; }
  .hk-jp__sep{ font-size:16px; }
  .hk-jp__tiers, .hk-jp__win{ display:none; }
  .hk--jackpot .hero__cta{ display:none; }

  .hk-slots__card{ width:62px; bottom:calc(20px + var(--k) * 10px); left:calc(var(--k) * 26%); }
  .hk-slots__card--2{ width:72px; }
  .hk-slots__card--3, .hk-slots__card--4{ display:none; }
  .hk-slots__card span{ display:none; }
  .hk--slots .hk-stage__a{ left:55%; }

  .hk-rank__pool{ display:none; }
  .hk-rank__list{ margin:0 10px 0 0; padding:6px 10px 6px 22px; clip-path:polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
  .hk-rank__list li{ grid-template-columns:18px 1fr; height:30px; gap:6px; font-size:11px; }
  .hk-rank__list li:nth-child(n+4), .hk-rank__list span, .hk-rank__list em{ display:none; }
  .hk-rank__list i{ font-size:16px; }
  .hk-rank__list li:first-child{ margin:0 -10px 0 -22px; padding:0 10px 0 22px; }

  .hk--vip .hk-art{ grid-column:1 / 3 !important; position:absolute !important; inset:0 !important; }
  .hk-vip__steps{ left:48%; right:10px; top:24px; gap:3px; }
  .hk-vip__steps li{ padding:6px 3px; }
  .hk-vip__steps b{ font-size:11px; } .hk-vip__steps li.is-on b{ font-size:14px; }
  .hk-vip__steps span{ display:none; }

  .hk--count .hk-stage__a{ width:50%; } .hk--count .hk-stage__b{ width:calc(50% + 10px); }
  .hk-count__clock{ gap:2px; } .hk-count__clock > i{ font-size:20px; }
  .hk-count__cell b{ font-size:28px; } .hk-count__cell small{ font-size:7px; letter-spacing:.1em; }
  .hk-count__place{ display:none; }
  .hk--count .hk-art{ padding-left:14px !important; }

  .hk--matchnight .hk-art{ grid-column:1 / 3 !important; position:absolute !important; inset:0 !important; }
  .hk--matchnight .hero__copy{ display:none !important; }
  .hk-night__side{ width:110px; top:46%; } .hk-night__side--h{ left:2%; } .hk-night__side--a{ right:2%; }
  .hk-night__side .hk-crest{ width:62px; height:62px; }
  .hk-night__side b{ font-size:12px; }
  .hk-night__vs{ font-size:64px; top:40%; }
  .hk-night__when{ top:calc(40% + 30px); font-size:10px; letter-spacing:.1em; }
  .hk-night__when b{ font-size:12px; }
  .hk-night__odds{ top:calc(40% + 50px); }
  .hk-night__odds .hk-odd{ width:52px; height:30px; }
  .hk-night__odds .hk-odd small{ display:none; }
  .hk-night__odds .hk-odd b{ font-size:14px; }
}