/* ==========================================================================
   theme-skins-5 — 카지노 · 슬롯 · 스포츠 느낌 배너 6종 (2026-10-01 저녁) · js/hero-kinds-2.js 가 그린다
   카지노: reels(전구 테두리 슬롯 머신 · 돌다 멈추는 릴) · roulette(반쯤 걸친 큰 휠 · 번개 배수 · 최근 결과)
           baccarat(초록 테이블 곡선 위 카드 · 출목표)
   스포츠: lineup(원근 전술판 포메이션) · bracket(8강→4강→결승 대진표 · 트로피) · h2h(거울 막대 상대 전적 · 최근 5경기)
   공통 변수는 theme-skins-4.css 의 .hk (--A --N --K --B --H --H2 --grain4)
   ========================================================================== */
.hk-art{ min-width:0; }
.hk-mini{ display:inline-block; width:18px; height:21px; flex:none; }
.hk-mini svg{ display:block; width:100%; height:100%; }


/* ==========================================================================
   reels — 슬롯 머신: 전구가 돌아가는 테두리 · 위 간판 · 세 릴(크림색 드럼) · 가운데 당첨 줄 · 아래 LED 당첨 판 · 옆 레버
   ========================================================================== */
.hk--reels{
  background:
    var(--grain4),
    radial-gradient(40% 70% at 70% 50%, color-mix(in srgb, var(--A) 26%, transparent), transparent 70%),
    radial-gradient(30% 50% at 70% 0%, color-mix(in srgb, var(--B) 18%, transparent), transparent 70%),
    linear-gradient(115deg, var(--H), var(--H2));
}
.hk--reels .hk-stage__a{   /* 머신 뒤 스포트라이트 두 줄기 */
  background:
    conic-gradient(from 168deg at 58% -10%, transparent 0deg, rgb(255 255 255 / .07) 5deg, transparent 16deg),
    conic-gradient(from 176deg at 84% -10%, transparent 0deg, rgb(255 255 255 / .06) 5deg, transparent 16deg);
}
.hk--reels .hk-stage__b{   /* 흩어진 반짝임 */
  background:
    radial-gradient(2px 2px at 52% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 94% 30%, #fff, transparent),
    radial-gradient(2px 2px at 60% 86%, var(--B), transparent), radial-gradient(1.5px 1.5px at 90% 80%, var(--A), transparent),
    radial-gradient(1.5px 1.5px at 47% 60%, var(--A), transparent);
  animation:pulse 2.4s ease-in-out infinite;
}
.hk--reels .hero__slide{ grid-template-columns:minmax(380px, 40%) 1fr; }
.hk-sl{ --cell:62px; display:flex; align-items:center; justify-content:center; gap:8px; }
.hk-sl__cab{
  position:relative; padding:14px 22px 16px; border-radius:18px;
  background:linear-gradient(180deg, #2a2b31, #111215 45%, #1a1b1f); box-shadow:0 30px 60px -20px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .12);
}
.hk-sl__cab::before{   /* 전구 테두리 — 번갈아 깜빡이며 돈다 */
  content:""; position:absolute; inset:-9px; border-radius:24px; padding:9px;
  background:radial-gradient(circle, #fff7d1 0 2px, var(--A) 2.8px, transparent 4.6px) 0 0 / 16px 16px, color-mix(in srgb, var(--A) 22%, #1a1b1f);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:bulbs .9s steps(2) infinite; box-shadow:0 0 30px color-mix(in srgb, var(--A) 45%, transparent);
}
@keyframes bulbs{ to{ background-position:8px 8px, 0 0; } }
.hk-sl__top{
  margin:0 0 12px; padding:6px 0; text-align:center; border-radius:6px;
  background:var(--grain4), linear-gradient(180deg, color-mix(in srgb, var(--A) 85%, #fff), var(--A)); color:var(--N);
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:20px; letter-spacing:.2em;
  box-shadow:inset 0 -3px 0 rgb(0 0 0 / .25);
}
.hk-sl__top span{ font-size:14px; }
.hk-sl__win{ position:relative; display:flex; gap:8px; padding:8px; border-radius:8px; background:#07080a; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--A) 50%, transparent); }
.hk-reel{
  position:relative; width:112px; height:calc(var(--cell) * 3); overflow:hidden; border-radius:5px;
  background:linear-gradient(180deg, #cfc6b0, #fbf7ec 22%, #fff 50%, #fbf7ec 78%, #cfc6b0);
}
.hk-reel::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgb(0 0 0 / .35), transparent 26%, transparent 74%, rgb(0 0 0 / .35)); }
.hk-reel__strip{ display:grid; transform:translateY(calc(var(--cell) * -9)); }
.hk-reel__strip i{ display:grid; place-items:center; height:var(--cell); }
.hk-reel__strip svg{ width:50px; height:50px; overflow:visible; }
.hero__slide.is-on .hk-reel__strip{ animation:reelSpin calc(1.1s + var(--k) * .4s) cubic-bezier(.2,.75,.3,1.06) both; }
@keyframes reelSpin{ from{ transform:translateY(0); filter:blur(2.5px); } 75%{ filter:blur(.5px); } to{ transform:translateY(calc(var(--cell) * -9)); filter:none; } }
.hero__slide.is-on .hk-reel__strip i:nth-child(11) svg{ animation:symWin .6s ease-in-out 2.1s 3 alternate; }
@keyframes symWin{ to{ transform:scale(1.18); filter:drop-shadow(0 0 8px var(--A)); } }
.hk-sl__line{   /* 당첨 줄 — 양 끝 화살표 */
  position:absolute; left:-4px; right:-4px; top:50%; height:3px; translate:0 -50%; background:var(--A); box-shadow:0 0 12px var(--A); opacity:.85;
}
.hk-sl__line::before, .hk-sl__line::after{ content:""; position:absolute; top:50%; translate:0 -50%; border:8px solid transparent; }
.hk-sl__line::before{ left:-6px; border-left-color:var(--A); } .hk-sl__line::after{ right:-6px; border-right-color:var(--A); }
/* 기호 색 — 7 은 포인트, 바 · 종 · 체리는 카지노 고전 색 */
.sy--7{ font-family:var(--font-display); font-style:italic; font-weight:900; font-size:56px; fill:var(--A); stroke:#1a1b1f; stroke-width:2.5px; paint-order:stroke; }
.sy--bar{ fill:#17181c; } .sy--bart{ font-family:var(--font-display); font-weight:900; font-size:17px; fill:#fff; letter-spacing:.06em; }
.sy--dia{ fill:var(--B); stroke:#1a1b1f; stroke-width:1.5px; } .sy--dia2{ fill:none; stroke:rgb(255 255 255 / .7); stroke-width:1.2px; }
.sy--bell{ fill:#f0b429; stroke:#7a5200; stroke-width:1.5px; }
.sy--cher{ fill:#e0213a; stroke:#7a0010; stroke-width:1.5px; } .sy--stem{ fill:none; stroke:#2e8b3e; stroke-width:3.5px; stroke-linecap:round; }
.hk-sl__pay{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:12px 0 0; padding:8px 16px; border-radius:6px;
  background:radial-gradient(circle, rgb(255 255 255 / .06) 1px, transparent 1.4px) 0 0 / 4px 4px, #050607; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);
}
.hk-sl__pay small{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:800; font-size:14px; letter-spacing:.18em; color:var(--B); }
.hk-sl__pay b{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:32px; line-height:1; color:var(--K); text-shadow:0 0 14px color-mix(in srgb, var(--A) 70%, transparent); font-variant-numeric:tabular-nums; }
.hk-sl__lever{ position:relative; align-self:center; width:10px; height:130px; margin-top:40px; border-radius:5px; background:linear-gradient(90deg, #6b6d75, #d7d9de, #6b6d75); }
.hk-sl__lever::before{ content:""; position:absolute; left:50%; top:-22px; translate:-50% 0; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff 0 3px, var(--A) 10px, color-mix(in srgb, var(--A) 60%, #000)); box-shadow:0 6px 14px rgb(0 0 0 / .5); }
.hk-sl__lever::after{ content:""; position:absolute; left:-8px; bottom:-10px; width:26px; height:20px; border-radius:4px; background:#2a2b31; }
@media (prefers-reduced-motion:reduce){ .hk-sl__cab::before, .hk--reels .hk-stage__b{ animation:none; } .hero__slide.is-on .hk-reel__strip{ animation:none; } }


/* ==========================================================================
   roulette — 오른쪽 끝에 반쯤 걸친 큰 휠(나무 · 금 테두리)이 천천히 돌고 공이 반대로 돈다
              휠 앞에 번개 배수 칩, 아래에 최근 결과 동그라미 줄
   ========================================================================== */
.hk--roulette{ background:var(--grain4), radial-gradient(50% 90% at 100% 50%, color-mix(in srgb, var(--A) 28%, transparent), transparent 70%), linear-gradient(115deg, var(--H), var(--H2)); }
.hk--roulette .hk-stage__a{   /* 휠 쪽으로 모이는 가는 선 */
  background:repeating-conic-gradient(from 0deg at 100% 50%, rgb(255 255 255 / .035) 0 1deg, transparent 1deg 6deg);
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000); mask-image:linear-gradient(90deg, transparent 30%, #000);
}
.hk--roulette .hero__slide{ grid-template-columns:minmax(380px, 40%) 1fr; }
.hk-rl__spin{ position:absolute; right:-230px; top:50%; width:560px; height:560px; translate:0 -50%; filter:drop-shadow(0 0 40px color-mix(in srgb, var(--A) 40%, transparent)) drop-shadow(0 20px 40px rgb(0 0 0 / .7)); }
.hk-rl__wheel{ display:block; width:100%; height:100%; animation:haloSpin 40s linear infinite; }
.rw-rim{ fill:#3a2412; stroke:#c9a44c; stroke-width:3; }
.rw{ stroke:#c9a44c; stroke-width:.8; } .rw--r{ fill:#c4122f; } .rw--b{ fill:#121316; } .rw--g{ fill:#0e8a4a; }
.rw-n{ fill:#fff; font:700 14px var(--font-display); }
.rw-in{ fill:#2b1a0c; stroke:#c9a44c; stroke-width:2; } .rw-cone{ fill:#5a3a1c; stroke:#8a6a3a; stroke-width:1; }
.rw-spoke{ fill:#d9b86a; } .rw-hub{ fill:#e2c27a; stroke:#8a6a3a; stroke-width:2; }
.hk-rl__ball{ position:absolute; inset:0; animation:haloSpin 6s linear infinite reverse; }
.hk-rl__ball::before{ content:""; position:absolute; left:50%; top:9.5%; width:16px; height:16px; translate:-50% 0; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #cfd2d8 60%, #8a8d94); box-shadow:0 2px 6px rgb(0 0 0 / .6); }
.hk-rl__hits{ position:absolute; left:4%; top:50%; translate:0 -58%; display:grid; gap:10px; margin:0; padding:0; list-style:none; z-index:2; }
.hk-rl__hits li{
  display:flex; align-items:center; gap:14px; padding:6px 18px 6px 8px; min-width:180px;
  background:linear-gradient(90deg, rgb(8 8 10 / .92), rgb(8 8 10 / .6)); border-left:3px solid var(--B);
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  animation:hitIn .5s cubic-bezier(.16,1,.3,1) both;
}
.hk-rl__hits li:nth-child(2){ animation-delay:.1s; } .hk-rl__hits li:nth-child(3){ animation-delay:.2s; }
@keyframes hitIn{ from{ opacity:0; translate:-20px 0; } }
.hk-rl__hits b{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font:900 18px var(--font-display); color:#fff; box-shadow:0 0 0 2px #c9a44c; }
.hk-rl__hits em{ font-style:italic; font-family:var(--font-display); font-weight:900; font-size:34px; line-height:1; color:var(--B); text-shadow:0 0 16px color-mix(in srgb, var(--B) 70%, transparent); }
.hk-rl__hits em::before{ content:"⚡"; margin-right:4px; font-size:.6em; vertical-align:.3em; }
.hk-rl__hits .c-r b, .hk-rl__hist .c-r{ background:#c4122f; } .hk-rl__hits .c-b b, .hk-rl__hist .c-b{ background:#17181c; } .hk-rl__hits .c-g b, .hk-rl__hist .c-g{ background:#0e8a4a; }
.hk-rl__hist{ position:absolute; left:4%; bottom:30px; z-index:2; display:flex; align-items:center; gap:6px; margin:0; }
.hk-rl__hist small{ margin-right:6px; font-size:12px; font-weight:800; letter-spacing:.1em; color:rgb(255 255 255 / .55); }
.hk-rl__hist i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:800 12px var(--font-display); font-style:normal; color:#fff; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2); }
.hk-rl__hist i.is-last{ width:34px; height:34px; font-size:15px; box-shadow:0 0 0 2px var(--B), 0 0 14px var(--B); }
@media (prefers-reduced-motion:reduce){ .hk-rl__wheel, .hk-rl__ball{ animation:none; } }


/* ==========================================================================
   baccarat — 진짜 카지노 테이블 (2026-10-01 밤 · 마지막 손질)
   벨벳 벽 · 샹들리에 빛 · 테이블 뒤 딜러 · 가죽 레일(금 스티치) · 펠트 위 금박 인쇄(카드 칸 · PLAYER / TIE / BANKER 베팅 칸 · 배당)
   베팅 칸 위 칩 더미 · 금 테두리 전광판의 빅 로드 출목표 · 오른쪽 아래 결과 명판
   펠트 색은 테마마다: 기본 초록 · 와인 = 레드 펠트 · 아이보리 = 블루 펠트
   ========================================================================== */
.hk--baccarat{
  --felt:#0c5a38; --gold:#d9b86a; --gold-hi:#f3dc9e;
  background:
    var(--grain4),
    radial-gradient(45% 80% at 66% -18%, rgb(255 214 140 / .22), transparent 70%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .022) 0 5px, transparent 6px) 0 0 / 26px 26px,
    radial-gradient(120% 100% at 60% 40%, transparent 50%, rgb(0 0 0 / .55)),
    linear-gradient(115deg, var(--H), var(--H2));
}
:root[data-theme="dark-baccarat-wine"] .hk--baccarat{ --felt:#6d1222; }
:root[data-theme="light-baccarat-ivory"] .hk--baccarat{ --felt:#0f3e68; }
.hk--baccarat .hk-stage__a{   /* 샹들리에 빛 원뿔 */
  background:conic-gradient(from 160deg at 66% -12%, transparent 0deg, rgb(255 226 170 / .09) 14deg, rgb(255 226 170 / .03) 30deg, transparent 40deg);
}
.hk--baccarat .hk-stage__b{   /* 뒤쪽 흐린 불빛 (보케) */
  background:
    radial-gradient(10px 10px at 42% 14%, rgb(255 210 130 / .35), transparent), radial-gradient(14px 14px at 88% 10%, rgb(255 210 130 / .28), transparent),
    radial-gradient(8px 8px at 54% 30%, rgb(255 255 255 / .2), transparent), radial-gradient(12px 12px at 96% 34%, rgb(255 180 120 / .25), transparent),
    radial-gradient(9px 9px at 76% 6%, rgb(255 255 255 / .25), transparent);
  filter:blur(2px);
}
.hk--baccarat .hero__slide{ grid-template-columns:minmax(360px, 34%) 1fr; }
.hk--baccarat .hero__copy{ align-self:start; padding-top:70px; z-index:3; }
.hk--baccarat .hero__kicker{ color:var(--gold-hi); }
.hk--baccarat .hero__dots{ z-index:4; }
.hk--baccarat .hero__meta{ display:none; }

/* 딜러 — 테이블 뒤, 가장자리는 어둠으로 녹는다 */
.hk-bc__dealer{
  position:absolute; right:14%; top:-6px; width:270px; height:230px; overflow:hidden;
  -webkit-mask-image:radial-gradient(62% 80% at 50% 36%, #000 50%, transparent 78%); mask-image:radial-gradient(62% 80% at 50% 36%, #000 50%, transparent 78%);
}
.hk-bc__dealer img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; filter:saturate(.95) contrast(1.05) brightness(.95); }

/* 전광판 — 금 테두리 · 흰 빅 로드 */
.hk-bc__board{
  position:absolute; left:0; top:22px; z-index:2; padding:8px 9px 9px; border-radius:4px;
  background:linear-gradient(180deg, #16161a, #0a0a0c); border:2px solid var(--gold);
  box-shadow:0 0 0 1px #5a4520, 0 0 24px rgb(217 184 106 / .25), 0 20px 40px -14px rgb(0 0 0 / .8);
}
.hk-bc__bhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 7px; }
.hk-bc__bhead b{ font-family:"Cinzel", var(--font-display); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--gold-hi); white-space:nowrap; }
.hk-bc__bhead span{ display:flex; gap:8px; font:800 11px var(--font-display); }
.hk-bc__bhead em{ font-style:normal; }
.hk-bc__bhead .rd-P{ color:#6ea2ff; } .hk-bc__bhead .rd-B{ color:#ff6b7c; } .hk-bc__bhead .rd-T{ color:#4ade80; }
.hk-bc__road{
  display:grid; grid-template-rows:repeat(6, 15px); grid-auto-flow:column; grid-auto-columns:15px;
  background:#fff; border:1px solid #d6d7dc;
  background-image:linear-gradient(90deg, #e3e4e8 1px, transparent 1px), linear-gradient(#e3e4e8 1px, transparent 1px); background-size:15px 15px;
}
.hk-bc__road i{ position:relative; display:block; }
.hk-bc__road i[class]::before{ content:""; position:absolute; inset:2px; border-radius:50%; border:2.5px solid; }
.hk-bc__road i.rd-P::before{ border-color:#2f6bff; } .hk-bc__road i.rd-B::before{ border-color:#e0364b; }
.hk-bc__road i.is-tie::after{ content:""; position:absolute; left:1px; right:1px; top:50%; height:2px; background:#16a34a; rotate:-45deg; }

/* 테이블 — 가죽 레일(금 스티치) + 펠트 */
.hk-bc__table{
  position:absolute; left:-16%; right:-2px; bottom:-92px; height:334px; z-index:1;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:linear-gradient(180deg, #5a3820, #2c1a0d 30%, #150c06);
  box-shadow:0 -14px 50px rgb(0 0 0 / .65), inset 0 2px 0 rgb(255 220 170 / .25);
}
.hk-bc__table::before{   /* 가죽 스티치 */
  content:""; position:absolute; inset:6px 6px 0; border-radius:inherit; border:1px dashed rgb(233 207 140 / .45); border-bottom:0; pointer-events:none;
}
.hk-bc__felt{
  position:absolute; inset:17px 0 0; border-radius:50% 50% 0 0 / 100% 100% 0 0; overflow:hidden;
  background:
    var(--grain4),
    radial-gradient(70% 70% at 50% 18%, color-mix(in srgb, var(--felt) 78%, #fff 14%), var(--felt) 55%, color-mix(in srgb, var(--felt) 62%, #000));
  box-shadow:inset 0 14px 30px rgb(0 0 0 / .5);
}
.hk-bc__felt::before{   /* 금박 인쇄 곡선 두 줄 */
  content:""; position:absolute; left:9%; right:9%; top:14px; height:300px; border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border:1.5px solid rgb(233 207 140 / .5); border-bottom:0; box-shadow:0 -6px 0 -4.5px rgb(233 207 140 / .25);
}
/* 카드 칸 */
.hk-bc__box{
  position:absolute; top:24px; width:176px; height:98px; display:grid; place-items:center; border-radius:6px;
  border:1.5px dashed rgb(233 207 140 / .55); background:rgb(0 0 0 / .1);
}
.hk-bc__box.is-p{ left:calc(50% - 200px); } .hk-bc__box.is-b{ left:calc(50% + 24px); }
.hk-bc__box.is-win{ border:2px solid var(--gold-hi); box-shadow:0 0 22px rgb(243 220 158 / .45), inset 0 0 22px rgb(243 220 158 / .12); }
.hk-bc__box > small{
  position:absolute; top:-9px; left:12px; padding:0 8px; font-family:"Cinzel", var(--font-display); font-size:11px; font-weight:700; letter-spacing:.2em;
  background:var(--felt);
}
.hk-bc__box.is-p > small{ color:#a8c6ff; } .hk-bc__box.is-b > small{ color:#ffb0b9; }
.hk-bc__box > span{ display:flex; align-items:center; }
.hk-bc__box > b{
  position:absolute; top:50%; translate:0 -50%; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  font:900 20px var(--font-display); color:#fff; background:#0b0b0d; box-shadow:0 0 0 2.5px var(--gold), 0 4px 10px rgb(0 0 0 / .5);
}
.hk-bc__box.is-p > b{ left:-20px; } .hk-bc__box.is-b > b{ right:-20px; }
.hk-bc__box.is-win > b{ background:linear-gradient(180deg, var(--gold-hi), var(--gold)); color:#1a1206; box-shadow:0 0 0 2.5px #fff, 0 0 16px var(--gold); }
.hk-bc__nat{
  position:absolute; bottom:-10px; left:50%; translate:-50% 0; padding:1px 8px; white-space:nowrap; font-style:normal;
  font-family:"Cinzel", var(--font-display); font-size:10px; font-weight:700; letter-spacing:.14em; color:#1a1206; background:linear-gradient(180deg, var(--gold-hi), var(--gold));
}
.hk-bc .hk-card{ width:54px; height:78px; box-shadow:0 1px 0 #e9e6de, 0 8px 14px -4px rgb(0 0 0 / .6); }
.hk-bc .hk-card::before{ content:""; position:absolute; inset:3px; border-radius:4px; border:1px solid rgb(0 0 0 / .08); }
.hk-bc .hk-card.is-third{ rotate:10deg; margin-left:-14px; translate:0 4px; }   /* 세 번째 카드도 칸 안에 — 살짝 비껴 겹친다 */
/* 카드 — 흰 바탕 · 모서리 숫자와 무늬 · 가운데 큰 무늬. 세 번째 카드는 가로로 */
.hk-card{
  position:relative; width:62px; height:88px; margin-left:-14px; border-radius:6px; background:#fff; color:#15161a;
  box-shadow:0 8px 16px -6px rgb(0 0 0 / .6); rotate:calc((var(--k) - .5) * 6deg);
}
.hk-card:first-child{ margin-left:0; }
.hk-card.is-third{ rotate:90deg; }
.hk-card b{ position:absolute; left:6px; top:4px; display:grid; justify-items:center; font:900 19px/1 var(--font-display); }
.hk-card b i{ font-style:normal; font-size:14px; }
.hk-card em{ position:absolute; right:8px; bottom:4px; font-style:normal; font-size:32px; line-height:1; }
.hk-card.is-red{ color:#d0142f; }
@keyframes cardDeal{ from{ opacity:0; translate:80px -70px; rotate:30deg; } }
/* 베팅 칸 — PLAYER · TIE · BANKER 와 배당 */
.hk-bc__zones{ position:absolute; top:138px; left:50%; translate:-50% 0; display:flex; gap:10px; }
.hk-bc__zones span{
  display:grid; justify-items:center; align-content:center; width:146px; height:48px;
  border:1.5px solid rgb(233 207 140 / .6); border-radius:70px 70px 6px 6px / 36px 36px 6px 6px;
  font-family:"Cinzel", var(--font-display); font-size:15px; font-weight:700; letter-spacing:.22em; line-height:1.1;
}
.hk-bc__zones small{ font-family:var(--font-display); font-size:11px; letter-spacing:.1em; color:var(--gold); }
.hk-bc__zones .z-p{ color:#a8c6ff; } .hk-bc__zones .z-t{ color:var(--gold-hi); } .hk-bc__zones .z-b{ color:#ffb0b9; }
/* 칩 더미 — 옆면이 보이는 납작한 칩을 쌓는다 */
.hk-chips{ position:absolute; top:100px; width:40px; height:44px; }
.hk-chips.z-p{ left:calc(50% - 118px); } .hk-chips.z-t{ left:calc(50% + 28px); } .hk-chips.z-b{ left:calc(50% + 196px); }
.hk-chip{
  --c:#c8102e; --c2:#7a0918;
  position:absolute; left:0; bottom:calc(var(--i) * 5px); width:40px; height:22px; border-radius:50%;
  background:
    radial-gradient(closest-side, var(--c) 0 50%, rgb(255 255 255 / .9) 52% 57%, transparent 59%),
    repeating-conic-gradient(var(--c) 0 24deg, #fff 24deg 36deg);
  box-shadow:0 3px 0 var(--c2), 0 5px 5px rgb(0 0 0 / .45);
}
.ch-black{ --c:#1b1b1f; --c2:#000; } .ch-green{ --c:#0e8a4a; --c2:#06552d; } .ch-purple{ --c:#6b2fb3; --c2:#3d1a68; } .ch-gold{ --c:#d4a63a; --c2:#7d5e17; }
.hero__slide.is-on .hk-chip{ animation:chipDrop .4s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(.5s + var(--k) * .15s + var(--i) * .07s); }
@keyframes chipDrop{ from{ opacity:0; translate:0 -30px; } }
/* 결과 명판 */
.hk-bc__res{
  position:absolute; left:42%; top:138px; translate:-50% 0; z-index:3; margin:0; padding:3px; background:linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, #8a6a1e);
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.hk-bc__res span{
  display:block; padding:6px 26px; font-family:"Cinzel", var(--font-display); font-size:16px; font-weight:700; letter-spacing:.2em; color:#fff; white-space:nowrap;
  clip-path:inherit;
}
.hk-bc__res.rd-P span{ background:linear-gradient(180deg, #3a78ff, #1d4fc4); } .hk-bc__res.rd-B span{ background:linear-gradient(180deg, #e8475b, #a8182c); } .hk-bc__res.rd-T span{ background:linear-gradient(180deg, #22b35c, #0f7a3a); }
.hk-bc .hk-card{ animation:cardDeal .45s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--k) * .2s); }
@media (prefers-reduced-motion:reduce){ .hk-card, .hk-chip{ animation:none !important; } }


/* ==========================================================================
   lineup — 원근으로 누운 잔디 전술판(깎은 줄무늬 · 흰 선) 위에 두 팀 포메이션 번호 · 위아래 팀 이름표
   ========================================================================== */
.hk--lineup .hk-stage__a{   /* 글 뒤 빗살 */
  width:38%; transform:skewX(-16deg); left:-6%;
  background:repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 11px);
}
.hk--lineup .hero__slide{ grid-template-columns:minmax(380px, 38%) 1fr; }
.hk-lu{ display:grid; place-items:center; padding:24px 40px 20px 0; }
.hk-lu__pitch{ display:block; width:100%; max-width:640px; height:auto; overflow:visible; filter:drop-shadow(0 24px 30px rgb(0 0 0 / .6)); }
.lu-band{ fill:color-mix(in srgb, #1f7a43 60%, var(--H)); } .lu-band.is-alt{ fill:color-mix(in srgb, #2a9152 60%, var(--H)); }
.lu-line{ fill:none; stroke:rgb(255 255 255 / .6); stroke-width:1.6; }
.lu-p circle{ stroke-width:2; }
.lu-p.is-h circle{ fill:var(--A); stroke:#fff; } .lu-p.is-h text{ fill:var(--N); }
.lu-p.is-a circle{ fill:#f4f4f6; stroke:rgb(0 0 0 / .45); } .lu-p.is-a text{ fill:#15161a; }
.lu-p text{ font-family:var(--font-display); font-weight:900; }
.lu-p{ transform-box:fill-box; transform-origin:center; }
.hero__slide.is-on .lu-p{ animation:luPop .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay:var(--d); }
@keyframes luPop{ from{ opacity:0; transform:scale(.2); } }
.hk-lu__tag{
  position:absolute; right:48px; display:flex; align-items:center; gap:8px; margin:0; padding:6px 12px 6px 8px;
  background:rgb(8 8 10 / .85); border-left:3px solid #fff; font-size:14px;
}
.hk-lu__tag.is-a{ top:22px; } .hk-lu__tag.is-h{ bottom:22px; border-left-color:var(--A); }
.hk-lu__tag b{ font-weight:900; }
.hk-lu__tag em{ font-style:var(--display-italic); font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--K); letter-spacing:.04em; }
.hk-lu__tag.is-a em{ color:#fff; opacity:.8; }
@media (prefers-reduced-motion:reduce){ .hero__slide.is-on .lu-p{ animation:none; } }


/* ==========================================================================
   bracket — 8강 네 경기 → 4강 두 경기 → 결승(트로피). 가는 선으로 잇고, 이긴 쪽 점수만 포인트 판
   ========================================================================== */
.hk--bracket{ background:var(--grain4), radial-gradient(40% 70% at 92% 50%, color-mix(in srgb, var(--A) 20%, transparent), transparent 70%), linear-gradient(115deg, var(--H), var(--H2)); }
.hk--bracket::before{ background:repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 40px); }
.hk--bracket .hero__slide{ grid-template-columns:minmax(340px, 34%) 1fr; }
.hk-br{ display:grid; grid-template-columns:1fr 1fr 170px; column-gap:34px; padding:26px 48px 26px 0; }
.hk-br__col{ display:flex; flex-direction:column; justify-content:space-around; }
.hk-br__pair{ position:relative; display:grid; gap:10px; }
.hk-br__col.is-sf .hk-br__pair{ height:100%; display:flex; flex-direction:column; justify-content:space-around; }
.hk-br__pair::after{   /* 두 경기를 잇는 ] 모양 선 */
  content:""; position:absolute; right:-18px; top:25%; bottom:25%; width:18px; border:2px solid rgb(255 255 255 / .22); border-left:0;
}
.hk-br__col.is-sf .hk-br__m::before, .hk-br__final::before{   /* 앞 칸에서 들어오는 선 */
  content:""; position:absolute; left:-16px; top:50%; width:16px; height:2px; background:rgb(255 255 255 / .22);
}
.hk-br__m{
  position:relative; display:grid; background:rgb(255 255 255 / .06); border-left:3px solid rgb(255 255 255 / .18);
  clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.hk-br__col.is-sf .hk-br__m{ clip-path:none; background:rgb(255 255 255 / .09); border-left-color:var(--A); }
.hk-br__t{ display:grid; grid-template-columns:18px 1fr 30px; align-items:center; gap:8px; height:28px; margin:0; padding:0 0 0 8px; font-size:13px; }
.hk-br__t b{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hk-br__t em{ display:grid; place-items:center; height:100%; font:900 15px var(--font-display); font-style:var(--display-italic); background:rgb(0 0 0 / .25); }
.hk-br__t.is-win b{ font-weight:900; color:#fff; }
.hk-br__t.is-win em{ background:var(--A); color:var(--N); }
.hk-br__t.is-out{ opacity:.42; }
.hk-br__t + .hk-br__t{ border-top:1px solid rgb(255 255 255 / .06); }
.hk-br__final{ position:relative; display:grid; justify-items:center; gap:4px; padding:18px 10px 16px; background:rgb(0 0 0 / .35); border-top:3px solid var(--A); }
.hk-br__cup{ width:64px; height:80px; color:var(--K); filter:drop-shadow(0 0 18px color-mix(in srgb, var(--A) 70%, transparent)); }
.hk-br__final b{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:30px; line-height:1; letter-spacing:.06em; }
.hk-br__final small{ font-size:12px; font-weight:800; letter-spacing:.1em; color:rgb(255 255 255 / .6); }
.hero__slide.is-on .hk-br__col{ animation:brIn .5s cubic-bezier(.16,1,.3,1) both; }
.hero__slide.is-on .hk-br__col.is-sf{ animation-delay:.12s; } .hero__slide.is-on .hk-br__col.is-f{ animation-delay:.24s; }
@keyframes brIn{ from{ opacity:0; translate:-16px 0; } }


/* ==========================================================================
   h2h — 양 끝 팀(엠블럼 · 최근 5경기), 가운데 거울 막대 네 줄. 왼쪽은 포인트, 오른쪽은 흰색
   ========================================================================== */
.hk--h2h{
  background:
    var(--grain4),
    linear-gradient(100deg, transparent 58%, rgb(255 255 255 / .035) 58%),
    radial-gradient(40% 80% at 45% 50%, color-mix(in srgb, var(--A) 18%, transparent), transparent 70%),
    linear-gradient(115deg, var(--H), var(--H2));
}
.hk--h2h .hero__slide{ grid-template-columns:minmax(360px, 34%) 1fr; }
.hk-h2h{ display:grid; grid-template-columns:150px 1fr 150px; align-items:center; gap:24px; padding:0 48px 0 0; }
.hk-h2h__side{ display:grid; justify-items:center; gap:10px; text-align:center; }
.hk-h2h__side .hk-crest{ width:84px; height:97px; }
.hk-h2h__side b{ font-size:17px; font-weight:900; letter-spacing:-.02em; line-height:1.2; word-break:keep-all; }
.hk-h2h__form{ display:flex; gap:3px; }
.hk-h2h__form i{ display:grid; place-items:center; width:20px; height:20px; font:900 11px var(--font-display); font-style:normal; }
.hk-h2h__form .f-W{ background:var(--A); color:var(--N); } .hk-h2h__form .f-D{ background:#5a5c63; color:#fff; } .hk-h2h__form .f-L{ box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35); color:rgb(255 255 255 / .6); }
.hk-h2h__rows{ display:grid; gap:14px; margin:0; padding:18px 0; list-style:none; border-top:1px solid rgb(255 255 255 / .1); border-bottom:1px solid rgb(255 255 255 / .1); }
.hk-h2h__rows li{ display:grid; grid-template-columns:54px 1fr 110px 1fr 54px; align-items:center; gap:10px; }
.hk-h2h__rows li > span{ font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:24px; line-height:1; text-align:center; color:rgb(255 255 255 / .55); font-variant-numeric:tabular-nums; }
.hk-h2h__rows li.is-a > span:first-child{ color:var(--K); } .hk-h2h__rows li.is-b > span:last-child{ color:#fff; }
.hk-h2h__rows em{ font-style:normal; font-size:12px; font-weight:800; text-align:center; letter-spacing:.02em; color:rgb(255 255 255 / .65); }
.hk-h2h__bar{ display:flex; height:8px; background:rgb(255 255 255 / .07); }
.hk-h2h__bar.is-l{ justify-content:flex-end; }
.hk-h2h__bar > i{ display:block; height:100%; transform-origin:right; }
.hk-h2h__bar.is-l > i{ background:var(--A); clip-path:polygon(4px 0, 100% 0, 100% 100%, 0 100%); }
.hk-h2h__bar.is-r > i{ background:#fff; transform-origin:left; clip-path:polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.hero__slide.is-on .hk-h2h__bar > i{ animation:barGrow .7s cubic-bezier(.16,1,.3,1) .1s both; }
@keyframes barGrow{ from{ transform:scaleX(0); } }


/* ==========================================================================
   폰 (배너 190) — 오른쪽 46% 칸에 한 조각만
   ========================================================================== */
@media (max-width:1023px){
  .hk-sl{ position:relative; }
  .hk-sl__cab{ position:absolute; left:50%; top:50%; translate:-50% -50%; scale:.33; }
  .hk-sl__lever{ display:none; }

  .hk-rl__spin{ width:300px; height:300px; right:-150px; }
  .hk-rl__hits, .hk-rl__hist{ display:none; }

  .hk--baccarat .hero__copy{ padding-top:0 !important; }
  .hk-bc__board, .hk-bc__zones, .hk-chips, .hk-bc__res, .hk-bc__nat{ display:none; }
  .hk-bc__dealer{ right:10%; width:120px; height:120px; top:-4px; }
  .hk-bc__table{ left:-8%; bottom:-96px; height:200px; }
  .hk-bc__table::before{ inset:3px 3px 0; }
  .hk-bc__felt{ inset:9px 0 0; }
  .hk-bc__felt::before{ top:8px; }
  .hk-bc__box{ top:10px; width:62px; height:46px; }
  .hk-bc__box.is-p{ left:calc(50% - 72px); } .hk-bc__box.is-b{ left:calc(50% + 8px); }
  .hk-bc__box > small{ font-size:7px; top:-7px; left:4px; padding:0 3px; letter-spacing:.08em; }
  .hk-bc__box > b{ width:18px; height:18px; font-size:11px; box-shadow:0 0 0 1.5px var(--gold); }
  .hk-bc__box.is-p > b{ left:-10px; } .hk-bc__box.is-b > b{ right:-10px; }
  .hk-bc .hk-card{ width:22px; height:32px; margin-left:-6px; border-radius:3px; }
  .hk-bc .hk-card::before{ display:none; }
  .hk-card b{ left:2px; top:2px; font-size:9px; } .hk-card b i{ font-size:7px; } .hk-card em{ font-size:12px; right:2px; bottom:1px; }
  .hk-bc .hk-card.is-third{ margin-left:2px; translate:0 3px; }

  .hk-lu{ padding:6px 8px 6px 0 !important; }
  .hk-lu__tag{ display:none; }

  .hk-br{ grid-template-columns:1fr; padding:10px 12px 10px 0 !important; }
  .hk-br__col.is-f{ display:none; }
  .hk-br__pair::after{ display:none; }
  .hk-br__col.is-qf{ display:none; }
  .hk-br__col.is-sf .hk-br__m::before{ display:none; }
  .hk-br__t{ grid-template-columns:12px 1fr 0; height:18px; gap:4px; padding-left:4px; font-size:10px; }
  .hk-br__t em{ display:none; }
  .hk-mini{ width:12px; height:14px; }
  .hk-br__final{ padding:8px 4px; }
  .hk-br__final::before{ left:-14px; width:14px; }
  .hk-br__cup{ width:28px; height:34px; }
  .hk-br__final b{ font-size:14px; } .hk-br__final small{ display:none; }
  .hk-br__pair::after{ right:-14px; width:14px; }

  .hk-h2h{ grid-template-columns:1fr 1fr; gap:6px; padding:0 10px 0 0 !important; }
  .hk-h2h__rows{ display:none; }
  .hk-h2h__side .hk-crest{ width:44px; height:51px; }
  .hk-h2h__side b{ font-size:11px; }
  .hk-h2h__form i{ width:11px; height:11px; font-size:7px; }
  .hk-h2h__form{ gap:2px; }
}

/* 아이보리 바카라 — 포인트(딥 그린)가 어두운 배너 위에서 묻혀, 배너 강조 글자만 금색으로 */
:root[data-theme="light-baccarat-ivory"] .hk{ --K:#e0bd72; }

/* 화이트 라인업 · 오렌지 — 배너도 흰 판으로: 흰 매트 바탕 · 검정 글 · 잔디 전술판은 그대로 */
:root[data-theme="light-lineup-orange"] .hk--lineup{
  --H:#f6f6f4; --H2:#ffffff; --K:#e85200; color:#111215;
  background:var(--grain4), radial-gradient(60% 90% at 80% 40%, rgb(255 90 0 / .10), transparent 70%), linear-gradient(115deg, #ffffff 30%, #ecedef);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06);
}
:root[data-theme="light-lineup-orange"] .hk--lineup::before{ background:repeating-linear-gradient(90deg, rgb(0 0 0 / .045) 0 1px, transparent 1px 12.5%); }
:root[data-theme="light-lineup-orange"] .hk--lineup .hk-stage__a{ background:repeating-linear-gradient(90deg, rgb(255 90 0 / .22) 0 2px, transparent 2px 11px); }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__title{ color:#111215; }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__title::after{ content:"."; color:#ff5a00; }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__sub{ color:#55585f; }
:root[data-theme="light-lineup-orange"] .hk--lineup .btn--gold{ background:#ff5a00; border-color:#ff5a00; color:#fff; }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__cta .btn:not(.btn--gold){ color:#111215; border-color:rgb(17 18 21 / .3); }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__meta{ color:rgb(17 18 21 / .45); }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__meta b{ color:#111215; }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__dot{ color:rgb(17 18 21 / .38); }
:root[data-theme="light-lineup-orange"] .hk--lineup .hero__dot.is-on{ color:#111215; }
:root[data-theme="light-lineup-orange"] .hk--lineup .hk-lu__pitch{ filter:drop-shadow(0 20px 26px rgb(0 0 0 / .28)); }
:root[data-theme="light-lineup-orange"] .hk--lineup .lu-band{ fill:#1f7a43; } :root[data-theme="light-lineup-orange"] .hk--lineup .lu-band.is-alt{ fill:#2a9152; }
:root[data-theme="light-lineup-orange"] .hk--lineup .hk-lu__tag{ background:#111215; color:#fff; }