/* ==========================================================================
   sports — 스포츠북 (sports.html · sports-all.html · sports-live.html · sports-match.html)
   근거: ../04-페이지/스포츠.md · whaley.bet 스포츠 화면(_분석/whaley/sports.css) 실측
   ★ 크기·간격·둥글기·배치 숫자는 whaley 그대로 옮겼다. 색만 스카이시티 토큰으로 바꿨다.
     whaley 의 강조(파랑 --primary · 플래티넘 --cta)는 스카이시티 포인트인 골드로 옮기고,
     배당 칸·카드 바탕의 남색 결은 그대로 둔다.
   ⚠ .sec__head · .sec__title · .btn · .scroll-x 는 공통(components.css · base.css)을 쓴다.
   ========================================================================== */

/* ---- 스포츠 전용 값 ------------------------------------------------------
   공통 tokens.css 에 없는 whaley 치수·색. 이 파일 안에서만 쓴다(--sb- 접두어).
   종목 색(--sp-*)은 목록에서 종목을 가르는 색이라 브랜드 색에 맞추지 않는다. */
:root{
  --sb-t2: color-mix(in srgb, var(--text-sub) 30%, #fff);              /* 글자 2단 (whaley --text-2) */
  --sb-t3: color-mix(in srgb, var(--text-sub) 65%, #fff);              /* 글자 3단 — 본문 보조 */
  --sb-t4: var(--text-sub);      /* 글자 4단 */
  --sb-t5: color-mix(in srgb, var(--text-sub) 35%, var(--line-strong));              /* 글자 5단 — 라벨 */
  --sb-t6: var(--text-mute);     /* 글자 6단 */
  --sb-blue: #3b6fe0;            /* 기준점 칩 · 카드 번짐 — 테마와 관계없이 파랑 */
  --sb-live: #b01340;            /* LIVE 뱃지 · 탭 숫자 (whaley --tag-casino) */
  --sb-up: #4ec3f7;              /* 배당 오름 */
  --sb-down: #ff3f6c;            /* 배당 내림 · 오버언더 기준점 */
  --sb-win: #3fd98a;             /* 예상 당첨금 */

  --sp-soccer: #3fd98a;  --sp-basketball: #ff8a3c;  --sp-baseball: #e7b93c;
  --sp-volleyball: #3fc8f5;  --sp-ice-hockey: #8fb6ff;  --sp-tennis: #c6f24e;
  --sp-handball: #ff6fa3;  --sp-american-football: #b07a4a;  --sp-e-games: #a78bfa;
  --sp-mma-boxing: #f2594b;

  --sb-fs-badge: 9px;  --sb-fs-sm: 12px;  --sb-fs-xs: 13px;  --sb-fs-base: 14px;
  --sb-fs-md: 16px;    --sb-fs-lg: 18px;  --sb-fs-xl: 24px;  --sb-fs-2xl: 28px;
  --sb-r-xs: 4px;  --sb-r-sm: 6px;  --sb-r-chip: 8px;  --sb-r: 12px;  --sb-r-lg: 16px;
  --sb-gap-card: 16px; --sb-gap-sec: 24px;
  --sb-t-bg: .15s cubic-bezier(.7,-.4,.4,1.4);
  --sb-t-color: .2s ease-in-out;
  --sb-slip-w: 370px;   /* PC 베팅 슬립 폭 — 총 배당 곱셈 식(3~4폴더)이 한 줄에 들어간다 */
  --sb-slip-right: calc(12px + var(--quick-w) + 12px);   /* 퀵메뉴(right 12 · 폭 72) 왼쪽 */
  --sb-slip-bottom: 24px;
}
/* 화이트 테마 — 스포츠 글자 단계를 검정 쪽으로 */
:root[data-theme^="light-"]{ --sb-t2:#1c2230; --sb-t3:#3a4252; --sb-t5:#7a8292; }
/* 경기장 사진 위 카드 — 테마와 관계없이 어두운 값으로 (사진이 어두워 흰 글자가 맞다) */
.sb-hl{
  --text:#ffffff; --text-sub:#b9bcc6; --text-mute:#80848f; --fg-rgb:255 255 255;
  --surface:#141417; --surface-2:#1d1d21; --surface-3:#28282e; --line:#2a2a30;
  --sb-t2:#dce3f0; --sb-t3:#c3c8d4; --sb-t4:#b9bcc6; --sb-t5:#8a8f9c; --sb-t6:#80848f;
  color:var(--text);
}

/* ---- 화면 틀 : whaley .container 와 같은 세로 24 간격 ------------------- */
.sb-page{ display:flex; flex-direction:column; gap:14px; }   /* 배너 · 탭 · 종목 · 주요 경기 · 필터 사이 — 제목 줄을 뺀 만큼 촘촘하게 */
/* whaley 는 줄 높이가 24px 고정이다 — 카드·줄 높이가 같게 나오도록 스포츠 안에서만 맞춘다 */
.sb-page, .slip{ line-height:24px; }
.sb-page > .sec__head{ min-height:40px; }
.sb-page .sec{ display:flex; flex-direction:column; gap:var(--sb-gap-card); }
.sb-page .sec + .sec{ margin-top:0; }
.sb-page .sec__head{ gap:8px; }
.sb-page .sec__title{ margin-right:auto; font-size:var(--sb-fs-2xl); line-height:1.28; } /* whaley 28px */
/* 좌우 화살표 — 두 개가 붙어 알약 하나처럼 (whaley .sec__navs) */
.sb-page .sec__navs{ display:flex; gap:2px; flex:none; }
.sb-page .sec__nav{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--text); transition:background-color var(--sb-t-bg);
}
.sb-page .sec__nav svg{ width:18px; height:18px; }
.sb-page .sec__nav:first-child{ border-radius:var(--sb-r) 0 0 var(--sb-r); }
.sb-page .sec__nav:last-child{ border-radius:0 var(--sb-r) var(--sb-r) 0; }
.sb-page .sec__nav:hover{ background:var(--surface-3); }
.sb-page .sec__nav[disabled]{ background:var(--surface); color:var(--sb-t6); cursor:default; }

/* 골드 입체 버튼 — whaley .btn--cta (플래티넘) 를 골드로 */
:is(.sb-banner, .slip) .btn--cta{
  background:var(--accent); border-color:var(--accent-line); color:var(--accent-ink); font-weight:900;
  box-shadow:inset 0 -3px 0 0 var(--accent-fg), inset 0 2px 0 0 rgba(255,255,255,.45);
}
:is(.sb-banner, .slip) .btn--cta:hover{ background:var(--accent-hi); color:var(--accent-ink); border-color:var(--accent-hi); }

/* ---- 인기 리그 배너 (최대 3열) ------------------------------------------ */
.sb-banners{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }
.sb-banner{
  position:relative; overflow:hidden;
  min-height:150px; padding:20px 140px 20px 20px; border-radius:var(--sb-r);
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  --bgimg:url("../assets/sports/bg/banner1.jpg");
  background:var(--bgimg) center / cover no-repeat, var(--surface);
}
.sb-banners .sb-banner:nth-child(2){ --bgimg:url("../assets/sports/bg/banner2.jpg"); }
.sb-banners .sb-banner:nth-child(3){ --bgimg:url("../assets/sports/bg/banner3.jpg"); }
.sb-banner__title{
  position:relative; z-index:2; pointer-events:none;
  font-size:var(--sb-fs-md); font-weight:900; line-height:1.3;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
}
.sb-banner .btn{
  position:relative; z-index:2; margin-top:2px; width:max-content;
  height:44px; padding:0 18px; border-radius:var(--sb-r-lg); font-size:var(--sb-fs-sm);
}
/* 카드 전체를 덮는 투명 링크 — 「지금 베팅」만 그 위에 선다 */
.sb-banner__all{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.sb-banner__all:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-3px; }
.sb-banner:has(.sb-banner__all:hover){ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sp, var(--accent)) 60%, transparent); }
/* 리그 엠블럼 대신 — 종목 아이콘을 종목 색으로 (whaley sb-banner__glyph) */
.sb-banner__glyph{
  position:absolute; right:16px; top:50%; translate:0 -50%;
  width:112px; height:112px; pointer-events:none;
  background:var(--sp, var(--sb-t3));
  -webkit-mask:var(--sp-glyph) no-repeat center / contain;
          mask:var(--sp-glyph) no-repeat center / contain;
  opacity:.92;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--sp, #fff) 55%, transparent));
}

/* ---- 종목 색 · 아이콘 : data-sport 하나로 여러 부품이 함께 쓴다 ---------- */
[data-sport="soccer"]            { --sp:var(--sp-soccer);            --sp-glyph:url("../assets/sports/icon/soccer.png");            --hl-art:url("../assets/sports/bg/soccer.jpg"); }
[data-sport="baseball"]          { --sp:var(--sp-baseball);          --sp-glyph:url("../assets/sports/icon/baseball.png");          --hl-art:url("../assets/sports/bg/baseball.jpg"); }
[data-sport="basketball"]        { --sp:var(--sp-basketball);        --sp-glyph:url("../assets/sports/icon/basketball.png");        --hl-art:url("../assets/sports/bg/basketball.jpg"); }
[data-sport="volleyball"]        { --sp:var(--sp-volleyball);        --sp-glyph:url("../assets/sports/icon/volleyball.png");        --hl-art:url("../assets/sports/bg/volleyball.jpg"); }
[data-sport="ice-hockey"]        { --sp:var(--sp-ice-hockey);        --sp-glyph:url("../assets/sports/icon/ice-hockey.png");        --hl-art:url("../assets/sports/bg/ice-hockey.jpg"); }
[data-sport="tennis"]            { --sp:var(--sp-tennis);            --sp-glyph:url("../assets/sports/icon/tennis.png");            --hl-art:url("../assets/sports/bg/tennis.jpg"); }
[data-sport="handball"]          { --sp:var(--sp-handball);          --sp-glyph:url("../assets/sports/icon/handball.png");          --hl-art:url("../assets/sports/bg/handball.jpg"); }
[data-sport="american-football"] { --sp:var(--sp-american-football); --sp-glyph:url("../assets/sports/icon/american-football.png"); --hl-art:url("../assets/sports/bg/american-football.jpg"); }
[data-sport="e-games"]           { --sp:var(--sp-e-games);           --sp-glyph:url("../assets/sports/icon/e-games.png");           --hl-art:url("../assets/sports/bg/e-games.jpg"); }
[data-sport="mma-boxing"]        { --sp:var(--sp-mma-boxing);        --sp-glyph:url("../assets/sports/icon/mma-boxing.png");        --hl-art:url("../assets/sports/bg/mma-boxing.jpg"); }

/* ---- 탭 줄 · 검색 ------------------------------------------------------- */
.sb-top{ display:flex; align-items:center; gap:var(--sb-gap-card); flex-wrap:wrap; }
.sb-tabs{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.sb-tabs::-webkit-scrollbar{ display:none; }
.sb-tab{
  flex:none; height:44px; padding:0 16px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--sb-fs-md); font-weight:800; color:var(--sb-t5);
  border-bottom:2px solid transparent;
  transition:color var(--sb-t-color), border-color var(--sb-t-bg);
}
.sb-tab:hover{ color:var(--sb-t2); }
.sb-tab.is-on{ color:var(--text); border-bottom-color:var(--accent-line); }
.sb-tab i{
  font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full);
  display:inline-grid; place-items:center; background:var(--sb-live); color:#fff;
  font-size:var(--sb-fs-badge); font-weight:900; line-height:1; font-variant-numeric:tabular-nums;
}
.sb-search{
  flex:1; min-width:200px; margin-left:auto; height:44px; padding:0 14px; border-radius:var(--sb-r);
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color var(--sb-t-color), box-shadow var(--sb-t-color), background-color var(--sb-t-color);
}
.sb-search svg{ width:20px; height:20px; color:var(--sb-t5); flex:none; }
.sb-search input{
  flex:1; min-width:0; border:0; background:transparent;
  font-size:var(--sb-fs-base); color:var(--text);
}
.sb-search input::placeholder{ color:var(--sb-t5); }
.sb-search input:focus{ outline:none; }
.sb-search:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface-2); }
.sb-search:focus-within svg{ color:var(--accent-fg); }
.sb-search.is-off{ opacity:.5; }

/* ---- 종목 줄 — 동그란 판 위 아이콘 + 이름 + 경기 수 ---------------------- */
.sb-sports{ display:flex; gap:8px; }
.sb-sport{
  flex:none; width:96px; padding:12px 4px 10px; border-radius:var(--sb-r);
  display:grid; justify-items:center; gap:8px;
  font-size:var(--sb-fs-sm); font-weight:800; color:var(--sb-t4);
  transition:color var(--sb-t-color);
}
.sb-sport__ico{
  position:relative; width:58px; height:58px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--surface-3) 70%, transparent), var(--surface-2) 70%);
  border:1px solid var(--line);
  transition:background-color var(--sb-t-bg), border-color var(--sb-t-bg), box-shadow var(--sb-t-bg), transform var(--sb-t-bg);
}
.sb-sport__ico img{ width:50px; height:50px; object-fit:contain; }
.sb-sport__ico img[src$="/all.png"]{ transform:scale(.78); }   /* 네모 넷 — 공보다 멀리 뻗어 한 겹 줄인다 */
.sb-sport__cnt{
  position:absolute; top:-2px; right:-4px;
  min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--danger); color:#fff;
  font-size:11px; font-weight:800; font-style:normal; line-height:1;
  border:2px solid var(--bg); font-variant-numeric:tabular-nums;
}
.sb-sport:hover{ color:var(--sb-t2); }
.sb-sport:hover .sb-sport__ico{ background:var(--surface-3); transform:translateY(-2px); }
.sb-sport.is-on{ color:var(--text); }
.sb-sport.is-on .sb-sport__ico{
  background:color-mix(in oklab, var(--accent) 22%, var(--surface-2));
  border-color:var(--accent-line);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 14px color-mix(in oklab, var(--accent) 40%, transparent);
}
@media (prefers-reduced-motion:reduce){ .sb-sport:hover .sb-sport__ico{ transform:none; } }

/* ---- 주요 경기 카드 줄 --------------------------------------------------- */
.sb-hls{ display:flex; gap:10px; }
.sb-hl{
  flex:none; width:calc((100% - 10px * 2) / 3); min-width:300px;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:10px 14px 8px; border-radius:var(--sb-r);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 10%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 30%, transparent) 55%, color-mix(in srgb, var(--bg-deep) 45%, transparent) 100%),
    var(--hl-art, none) center bottom / cover no-repeat,
    radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, var(--sb-blue) 26%, transparent), transparent 62%),
    var(--surface);
}
.sb-hl__top{ display:flex; align-items:center; gap:8px; font-size:var(--sb-fs-sm); color:var(--sb-t5); }
.sb-hl__top b{ font-weight:900; color:var(--sb-t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-hl__top .sb-live{ margin-left:auto; }
.sb-hl__teams{ margin:8px 0; display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:start; }
.sb-hl__teams.is-static{ cursor:default; }
.sb-hl__side{ display:grid; justify-items:center; gap:6px; text-align:center; min-width:0; }
.sb-hl__side > i{ position:relative; width:34px; height:34px; display:grid; place-items:center; font-style:normal; }
.sb-hl__side > span{
  position:relative; z-index:1;
  font-size:var(--sb-fs-base); font-weight:800; line-height:1.25; max-width:100%;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5);
}
.sb-hl__score{ display:flex; gap:4px; }
.sb-hl__score b{
  min-width:34px; height:34px; padding:0 6px; border-radius:var(--sb-r-chip);
  display:grid; place-items:center; background:var(--surface-3);
  font-size:var(--sb-fs-md); font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sb-hl__score small{ font-size:var(--sb-fs-sm); font-weight:800; }
.sb-hl__mkt{
  text-align:center; font-size:var(--sb-fs-sm); color:var(--sb-t3); margin-top:auto;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5);
}
.sb-hl .sb-mkt__picks{ margin-top:4px; }
.sb-hl .sb-pick{ height:32px; }
.sb-hl .sb-pick > span{ color:rgba(255,255,255,.92); font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.75); }
.sb-hl .sb-pick > b{ text-shadow:0 1px 3px rgba(0,0,0,.75); }
/* 진행 예정 카드는 한 겹 가라앉힌다 — 채도·밝기만 */
.sb-hl[data-live="0"]{ filter:saturate(.55) brightness(.82); }
.sb-hl[data-live="0"] :is(.sb-hl__top, .sb-hl__side > span, .sb-hl__score){ filter:saturate(1.8) brightness(1.22); }

/* 인플레이 3열 격자 — 가로 스크롤이 아니다 */
.sb-hls.ex-lv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--sb-gap-card); }
.sb-hls.ex-lv-grid > .sb-hl{ flex:initial; width:auto; min-width:0; transition:border-color var(--sb-t-color), box-shadow var(--sb-t-bg); }
.sb-hls.ex-lv-grid > .sb-hl:hover{
  border-color:color-mix(in srgb, var(--accent-line) 60%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.ex-lv-count-tag{ margin-left:auto; font-size:var(--sb-fs-sm); color:var(--sb-t5); font-variant-numeric:tabular-nums; }
.ex-lv-noodds{ padding:9px 0; text-align:center; font-size:var(--sb-fs-sm); color:var(--sb-t5); }

/* LIVE 뱃지 — 빨간 점 + 회차/분 */
.sb-live{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  padding:2px 8px; border-radius:var(--r-full);
  background:var(--sb-live); color:#fff; font-size:var(--sb-fs-sm); font-weight:900;
}
.sb-live em{ font-style:normal; }
.sb-live i{ width:6px; height:6px; border-radius:var(--r-full); background:#fff; animation:sb-blink 1.4s infinite; }
@keyframes sb-blink{ 50%{ opacity:.25; } }

/* ---- 정렬 · 거르개 칩 --------------------------------------------------- */
.sb-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sb-filter__label{ font-size:var(--sb-fs-sm); color:var(--sb-t4); }
.sb-filter__chip{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 12px; border-radius:var(--r-full);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent-line) 55%, transparent);
  color:var(--text); font-size:var(--sb-fs-sm); font-weight:800;
  transition:background-color var(--sb-t-bg), border-color var(--sb-t-color), color var(--sb-t-color);
}
.sb-filter__chip:hover{ background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent-line); }
.sb-filter__chip svg{ width:12px; height:12px; color:var(--sb-t3); }
.sb-filter__chip--toggle{ background:transparent; border-color:color-mix(in srgb, var(--sb-t3) 40%, transparent); color:var(--sb-t3); font-weight:700; }
.sb-filter__chip--toggle:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); border-color:color-mix(in srgb, var(--accent-line) 45%, transparent); color:var(--text); }
.sb-filter__chip--toggle.is-on{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent-line) 55%, transparent); color:var(--text); font-weight:800; }

/* ---- 필터 줄 : 왼쪽 [정렬 시간순|인기순] · 오른쪽 [코리안뷰|유러피안뷰] ---- */
.sb-filter{ justify-content:space-between; padding:6px 6px 6px 14px; border-radius:var(--sb-r); background:var(--surface); }
.sb-filter__group{ display:flex; align-items:center; gap:10px; min-width:0; }
.sb-filter__label{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.sb-filter__label svg{ width:14px; height:14px; color:var(--accent-fg); }
.sb-filter .sb-filter__chip{ height:30px; }
/* 붙은 버튼 묶음 — 고른 칸만 떠오른다 */
.sb-seg{ display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--bg); }
.sb-seg__btn{
  height:28px; padding:0 14px; border-radius:7px;
  font-size:var(--sb-fs-sm); font-weight:700; color:var(--sb-t4);
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.sb-seg__btn:hover{ color:var(--text); }
.sb-seg__btn.is-on{ background:var(--surface-3); color:var(--text); font-weight:800; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(0,0,0,.35); }
.sb-seg--view .sb-seg__btn.is-on{ background:var(--accent); color:var(--accent-ink); }
/* 코리안뷰 버튼 — 늘 금빛이 은은하게 켜졌다 꺼졌다 (골라 볼 수 있다는 걸 알린다) */
.sb-seg--view [data-view="kr"]{ position:relative; color:var(--accent-fg); animation:kr-view-glow 2.2s ease-in-out infinite; }
.sb-seg--view [data-view="kr"].is-on{ color:var(--accent-ink); }
@keyframes kr-view-glow{
  0%,100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); text-shadow:none; }
  50%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent); text-shadow:0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
}
@media (prefers-reduced-motion:reduce){ .sb-seg--view [data-view="kr"]{ animation:none; box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); } }
.sb-seg__btn:focus-visible{ outline:2px solid var(--accent-line); outline-offset:1px; }

/* ---- 주요 경기 줄 : 제목 없이, 좌우 화살표는 카드 양 끝에 겹쳐 띄운다 ---- */
.sb-hot{ position:relative; }
.sb-page .sb-hot__navs{ position:absolute; inset:0 -14px; display:flex; justify-content:space-between; align-items:center; gap:0; pointer-events:none; }
.sb-page .sb-hot__navs .sec__nav{
  pointer-events:auto; width:34px; height:34px; border-radius:50%;
  background:var(--surface-3); box-shadow:0 4px 14px rgba(0,0,0,.55); transition:opacity var(--sb-t-color), background-color var(--sb-t-bg);
}
.sb-page .sb-hot__navs .sec__nav[disabled]{ opacity:0; pointer-events:none; }

/* ---- 리그 묶음 — 머리를 눌러 접는다 -------------------------------------- */
.sb-leagues{ display:flex; flex-direction:column; }
.sb-league + .sb-league{ margin-top:var(--sb-gap-sec); }
.sb-league__head{ display:flex; align-items:center; gap:10px; width:100%; padding:0 4px 12px; text-align:left; }
.sb-league__head > img{ flex:none; width:20px; height:20px; object-fit:contain; }
.sb-league__name{ font-size:var(--sb-fs-lg); font-weight:900; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-league__where{ font-size:var(--sb-fs-sm); color:var(--sb-t5); flex:none; white-space:nowrap; }
.sb-league__caret{ margin-left:auto; width:20px; height:20px; color:var(--sb-t4); transition:transform var(--sb-t-bg); }
.sb-league.is-folded .sb-league__caret{ transform:rotate(180deg); }
.sb-league.is-folded .sb-league__list{ display:none; }
.sb-league__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }

/* ---- 경기 한 줄 : [시각·팀 | 마켓 세 줄 | +N] --------------------------- */
.sb-row{
  position:relative;
  display:grid; grid-template-columns:minmax(150px,1fr) minmax(600px,660px) 60px;
  gap:16px; align-items:center;
  padding:8px 14px; border-radius:var(--sb-r);
  border:1px solid var(--line);
  background:
    radial-gradient(90% 190% at 0% 50%, color-mix(in srgb, var(--sp, var(--sb-t5)) 22%, transparent) 0%, transparent 42%),
    var(--surface);
  transition:border-color var(--sb-t-color);
}
.sb-row:hover{ border-color:color-mix(in srgb, var(--accent-line) 70%, transparent); }
/* 종목 띠 · 글리프 — 색만 쓴다(사진 없음) */
.sb-row::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; border-left:5px solid var(--sp, var(--sb-t5));
}
.sb-row::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:120px; top:50%; translate:0 -50%; height:92px; aspect-ratio:1;
  background:var(--sp, var(--sb-t5)); opacity:.15;
  -webkit-mask:var(--sp-glyph) no-repeat center / contain;
          mask:var(--sp-glyph) no-repeat center / contain;
}
.sb-row > .sb-row__go, .sb-row > .sb-mkts{ position:relative; z-index:1; }
.sb-row.is-open{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-color:color-mix(in srgb, var(--accent-line) 70%, transparent); }

.sb-row__go{ display:block; min-width:0; text-align:left; }
.sb-row__when{ font-size:var(--sb-fs-sm); color:var(--sb-t5); text-align:left; padding-left:7px; display:flex; align-items:center; flex-wrap:wrap; gap:0 4px; }
.sb-row__when::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px;
  background:var(--sp, var(--sb-t5)); box-shadow:0 0 8px color-mix(in srgb, var(--sp, var(--sb-t5)) 70%, transparent);
}
.sb-row__when b{ font-weight:800; color:var(--sb-t3); }
.sb-row__when .sb-live{ margin-right:4px; }
.sb-row__tour{ margin-left:2px; font-size:var(--sb-fs-sm); color:var(--sb-t5); font-weight:700; }
.sb-row__tag{
  margin-left:2px; padding:1px 6px; border-radius:var(--r-full);
  font-size:var(--sb-fs-sm); font-weight:800; background:var(--accent-soft); color:var(--accent-fg);
}
.sb-row__teams{ margin-top:5px; display:grid; gap:3px; }
.sb-team{ display:flex; align-items:center; gap:10px; font-size:var(--sb-fs-md); font-weight:800; }
.sb-team__mark{ position:relative; flex:none; width:26px; height:26px; display:grid; place-items:center; font-style:normal; }
.sb-team__name{ position:relative; z-index:1; min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-team__score{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--accent-fg); }
.sb-team__ha{
  position:relative; top:1px; flex:none; margin-left:-4px;
  min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center;
  border-radius:var(--sb-r-sm); border:1px solid var(--line);
  background:var(--surface-2); color:var(--sb-t4);
  font-size:11px; line-height:1; font-weight:900; letter-spacing:.02em;
}
.sb-team__ha.is-home{ background:var(--accent); border-color:var(--accent-line); color:var(--bg); }

/* 팀 표시 — 그림이 없는 팀의 기본 유니폼 + 머리글자 (whaley em-crest) */
.em-crest{ width:100%; height:100%; display:block; overflow:visible; }
.em-crest text{ font-family:var(--font); font-weight:900; fill:#fff; paint-order:stroke; stroke:rgba(0,0,0,.35); stroke-width:.6px; }

/* ---- 마켓 세 줄 : 이름(250, 오른쪽 맞춤) | 배당 칸 ---------------------- */
.sb-mkts{ display:grid; grid-template-columns:250px minmax(0,1fr); align-items:center; gap:6px 10px; }
.sb-mkt{ display:contents; }
.sb-mkt__head{
  display:flex; align-items:baseline; justify-content:flex-end; gap:5px;
  font-size:var(--sb-fs-sm); font-weight:800; color:var(--sb-t5); white-space:nowrap;
}
.sb-mkt__head b{
  margin-left:1px; padding:1px 6px; border-radius:var(--sb-r-xs); font-weight:900;
  background:color-mix(in srgb, var(--sb-blue) 42%, transparent); color:#fff; font-variant-numeric:tabular-nums;
}
.sb-mkt__head b.is-total{ background:color-mix(in srgb, var(--sb-down) 38%, transparent); color:#ffe4e4; }
.sb-mkt__picks{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; margin-top:4px; }
.sb-mkt__picks[data-n="3"] > *{ grid-column:span 2; }
.sb-mkt__picks[data-n="2"] > *{ grid-column:span 3; }
.sb-pick{
  height:32px; border-radius:var(--sb-r-chip); min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 10px;
  background:var(--surface-2); color:var(--text);
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.sb-pick span{ font-size:var(--sb-fs-sm); font-weight:700; color:var(--sb-t5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-pick b{ flex:none; font-size:var(--sb-fs-base); font-weight:900; font-variant-numeric:tabular-nums; }
.sb-pick:hover{ background:var(--surface-3); }
.sb-pick.is-on{ background:var(--accent); color:var(--accent-ink); }
.sb-pick.is-on span{ color:rgba(0,0,0,.6); text-shadow:none; }

/* 배당 변동 ▲▼ — 자리를 미리 비워 두고 글자만 채운다 */
.sb-pick b::after, .mt-pick b::after{ content:''; display:inline-block; width:.62em; margin-left:.1em; font-size:.82em; line-height:1; text-align:center; }
:is(.sb-pick, .mt-pick).tr-up b{ color:var(--sb-up); }
:is(.sb-pick, .mt-pick).tr-down b{ color:var(--sb-down); }
:is(.sb-pick, .mt-pick).tr-up b::after{ content:'▲'; }
:is(.sb-pick, .mt-pick).tr-down b::after{ content:'▼'; }
:is(.sb-pick, .mt-pick).is-on b{ color:var(--accent-ink); }
@keyframes sbOddsFlash{ 0%,25%{ background-color:var(--surface-3); } 100%{ background-color:var(--surface-2); } }
:is(.sb-pick, .mt-pick).is-flash:not(.is-on){ animation:sbOddsFlash 1.8s ease-out; }
@media (prefers-reduced-motion:reduce){ :is(.sb-pick, .mt-pick).is-flash{ animation:none; } .slip, .slip.is-bump, .slip.is-bump .slip__head i{ animation:none !important; } }

/* 배당 칸 안 기준점 칩 (핸디캡 하늘 · 오버 빨강 · 언더 파랑) */
.mt-pick em, .sb-pick em{
  font-style:normal; margin-left:5px; padding:1px 6px; border-radius:var(--sb-r-xs);
  background:color-mix(in srgb, var(--sb-blue) 42%, transparent); color:#fff;
  font-size:var(--sb-fs-sm); font-weight:800; font-variant-numeric:tabular-nums;
}
:is(.mt-pick, .sb-pick) em.is-total{ background:color-mix(in srgb, var(--sb-down) 38%, transparent); color:#ffe4e4; }
:is(.mt-pick, .sb-pick) em.is-under{ background:color-mix(in srgb, #2f7dff 55%, transparent); color:#e4efff; }   /* 언더 — 파랑 (오버는 빨강) */
:is(.mt-pick, .sb-pick).is-on em{ background:rgba(0,0,0,.18); color:var(--accent-ink); }

.sb-more{
  flex:none; height:42px; min-width:60px; padding:0 12px; border-radius:var(--sb-r-chip);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--sb-t3);
  font-size:var(--sb-fs-base); font-weight:900;
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.sb-more:hover{ background:var(--surface-3); color:var(--text); }
.sb-more.is-open{ background:var(--accent); color:var(--accent-ink); }
.sb-more[hidden]{ display:none; }

/* ---- 접이식 배당판 — 경기 줄 바로 아래 ----------------------------------- */
.sb-oddsbox{
  margin:-9px 0 0; padding:12px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accent-line) 70%, transparent); border-top:0;
  border-radius:0 0 var(--sb-r) var(--sb-r);
}
.sb-oddsbox .mt-mkts{ display:flex; flex-direction:column; gap:6px; }
.sb-oddsbox .mt-mkt__head{ padding:8px 12px; }
.sb-oddsbox__go{
  margin-top:10px; height:40px; padding:0 14px;
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--sb-r); background:var(--surface-2);
  font-size:var(--sb-fs-sm); font-weight:800; color:var(--sb-t3);
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.sb-oddsbox__go svg{ width:14px; height:14px; }
.sb-oddsbox__go:hover{ background:var(--surface-3); color:var(--text); }

/* ==========================================================================
   경기 상세
   ========================================================================== */
.mt-strip{ display:flex; gap:8px; }
.mt-strip__item{
  flex:none; width:236px; padding:12px 14px; border-radius:var(--sb-r);
  display:grid; gap:8px; border:1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 30%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 50%, transparent) 55%, color-mix(in srgb, var(--bg-deep) 68%, transparent) 100%),
    var(--hl-art, none) center bottom / cover no-repeat,
    var(--surface);
  transition:border-color var(--sb-t-color);
}
.mt-strip__item:hover{ border-color:color-mix(in srgb, var(--accent-line) 70%, transparent); }
.mt-strip__item.is-on{ border-color:var(--accent-line); box-shadow:inset 0 0 0 1px var(--accent); }
.mt-strip__top{ display:flex; align-items:center; gap:6px; font-size:var(--sb-fs-sm); color:var(--sb-t5); min-width:0; }
.mt-strip__top img{ flex:none; width:14px; height:14px; object-fit:contain; }
.mt-strip__top b{ flex:1; min-width:0; font-weight:800; color:var(--sb-t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-strip__when{ flex:none; font-size:var(--sb-fs-sm); font-weight:800; color:var(--sb-t4); }
.mt-strip__row{ display:flex; align-items:center; gap:8px; min-width:0; font-size:var(--sb-fs-base); font-weight:800; }
.mt-strip__row i{
  flex:none; width:20px; height:20px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--surface-3);
  font-style:normal; font-size:var(--sb-fs-sm); font-weight:900; color:var(--sb-t2);
}
.mt-strip__row span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-strip__row b{ flex:none; font-variant-numeric:tabular-nums; color:var(--accent-fg); }
.mt-strip__item :is(.mt-strip__top b, .mt-strip__row span){ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); }

.mt-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 480px;
  grid-template-areas:"head track" "tabs track" "mkts track";
  grid-template-rows:auto auto 1fr;
  gap:var(--sb-gap-card); align-items:start; align-content:start;
}
.mt-layout.is-prematch{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "tabs" "mkts"; }
.mt-layout > *{ min-width:0; }
.mt-layout > .mt-head { grid-area:head; }
.mt-layout > .mt-tabs { grid-area:tabs; }
.mt-layout > .mt-mkts { grid-area:mkts; }
.mt-layout > .mt-track{ grid-area:track; }
.mt-mkts{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }

.mt-head{
  padding:20px; border-radius:var(--sb-r); border:1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 50%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 68%, transparent) 55%, color-mix(in srgb, var(--bg-deep) 82%, transparent) 100%),
    var(--hl-art, none) center bottom / cover no-repeat,
    var(--surface);
}
.mt-head :is(.mt-head__where, .mt-side__name, .mt-when){ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); }
.mt-head__where{ display:flex; align-items:center; gap:8px; font-size:var(--sb-fs-base); color:var(--sb-t4); }
.mt-head__where img{ width:18px; height:18px; object-fit:contain; }
.mt-head__main{ margin-top:14px; display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
.mt-side{ display:grid; justify-items:center; gap:8px; text-align:center; }
.mt-side__mark{ position:relative; width:64px; height:64px; display:grid; place-items:center; font-style:normal; }
.mt-side__name{ position:relative; z-index:1; font-size:var(--sb-fs-md); font-weight:900; word-break:keep-all; }
.mt-when{ text-align:center; display:grid; justify-items:center; gap:2px; }
.mt-when b{ display:block; font-size:var(--sb-fs-2xl); font-weight:900; font-variant-numeric:tabular-nums; }
.mt-when > span{ font-size:var(--sb-fs-base); color:var(--sb-t4); }

.mt-tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.mt-tabs::-webkit-scrollbar{ display:none; }
.mt-tab{
  flex:none; height:40px; padding:0 14px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--surface-2); color:var(--sb-t3);
  font-size:var(--sb-fs-base); font-weight:800;
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.mt-tab:hover{ color:var(--text); }
.mt-tab.is-on{ background:var(--surface-3); color:var(--text); }
.mt-tab i{ font-style:normal; font-size:var(--sb-fs-sm); font-weight:900; color:var(--sb-t5); }
.mt-tab.is-on i{ color:var(--accent-fg); }

.mt-mkt{ border-radius:var(--sb-r); background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.mt-mkt__head{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 14px; text-align:left; }
.mt-mkt__name{ font-size:var(--sb-fs-base); font-weight:900; }
.mt-mkt__caret{ margin-left:auto; width:20px; height:20px; color:var(--sb-t4); transition:transform var(--sb-t-bg); }
.mt-mkt.is-folded .mt-mkt__caret{ transform:rotate(180deg); }
.mt-mkt.is-folded :is(.mt-mkt__body, .mt-mkt__more){ display:none; }
.mt-mkt__body{ display:grid; gap:5px; padding:0 14px 9px; }
.mt-mkt__body[data-cols="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.mt-mkt__body[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.mt-mkt__more{
  display:block; width:calc(100% - 28px); margin:0 14px 9px;
  min-height:40px; padding:0 14px; border:1px dashed var(--line);
  border-radius:var(--sb-r-chip); color:var(--sb-t3);
  font-size:13.5px; font-weight:700;
  transition:background-color var(--sb-t-bg), color var(--sb-t-bg);
}
.mt-mkt__more:hover{ background:var(--surface-2); color:var(--text); }
.mt-pick{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:38px; height:38px; padding:0 12px; border-radius:var(--sb-r-chip);
  background:var(--surface-2); color:var(--text);
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.mt-pick > span{ font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-pick > b{ flex:none; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.mt-pick:hover{ background:var(--surface-3); }
.mt-pick.is-on{ background:var(--accent); color:var(--accent-ink); }
.mt-empty{ padding:48px; text-align:center; font-size:var(--sb-fs-md); color:var(--sb-t5); border-radius:var(--sb-r); background:var(--surface); }

/* 오른쪽 라이브 스코어 (라이브 경기만) */
.mt-track{ padding:16px; border-radius:var(--sb-r); background:var(--surface); border:1px solid var(--line); }
.mt-track__title{ display:flex; align-items:center; justify-content:center; gap:8px; padding-bottom:12px; font-size:var(--sb-fs-base); font-weight:900; color:var(--sb-t3); }
.mt-track__board{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
  padding:16px; border-radius:var(--sb-r); background:var(--bg); text-align:center;
}
.mt-track__board b{ font-size:var(--sb-fs-2xl); font-weight:900; font-variant-numeric:tabular-nums; }
.mt-track__board span{ display:block; font-size:var(--sb-fs-sm); color:var(--sb-t4); }
.mt-track__rows{ margin-top:10px; display:grid; gap:6px; }
.mt-track__row{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
  padding:10px 12px; border-radius:var(--sb-r-chip); background:var(--bg);
  font-size:var(--sb-fs-base); font-weight:800; text-align:center;
}
.mt-track__row em{ font-style:normal; font-size:var(--sb-fs-sm); font-weight:700; color:var(--sb-t5); }
.mt-track__none{ margin-top:10px; padding:14px 12px; border-radius:var(--sb-r-chip); background:var(--bg); font-size:var(--sb-fs-sm); color:var(--sb-t4); text-align:center; }

/* ==========================================================================
   베팅 슬립 — 오른쪽 아래 고정. 스카이시티 퀵메뉴(right 12 · 폭 72) 왼쪽에 선다.
   하나 고르면 싱글, 둘 이상이면 다폴더.
   ========================================================================== */
.slip{
  position:fixed; right:var(--sb-slip-right); bottom:var(--sb-slip-bottom); z-index:calc(var(--z-quick) + 1);
  width:var(--sb-slip-w); max-width:calc(100 * var(--vw) - var(--sb-slip-right) - 12px);
  border-radius:var(--sb-r); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.slip[hidden]{ display:none; }
/* 담기는 동작 — 날아가는 금색 알약 · 받는 쪽이 한 번 튄다 */
.slip-fly{
  position:fixed; z-index:calc(var(--z-quick) + 3); pointer-events:none;
  min-width:38px; height:26px; padding:0 8px; border-radius:99px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:900; font-variant-numeric:tabular-nums;
  box-shadow:0 6px 16px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.25) inset;
  transform:translate(-50%,-50%);
}
.slip.is-bump .slip__head i{ animation:slip-badge .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes slip-badge{ 0%{ scale:1; } 40%{ scale:1.45; } 100%{ scale:1; } }
.slip__head{
  display:flex; align-items:center; gap:8px; width:100%;
  height:44px; padding:0 14px;
  background:var(--accent); color:var(--accent-ink);
  font-size:var(--sb-fs-base); font-weight:900;
}
.slip__head > svg{ width:18px; height:18px; flex:none; }
.slip__head i{
  font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--bg); color:var(--accent-fg);
  font-size:var(--sb-fs-sm); font-weight:900; line-height:1; font-variant-numeric:tabular-nums;
}
.slip__head > svg:last-child{ margin-left:8px; transition:transform var(--sb-t-bg); }
.slip.is-open .slip__head > svg:last-child{ transform:rotate(180deg); }
/* 머리 오른쪽 — [3폴더] 37.74 : 접어 둬도 총 배당이 보인다 */
.slip__head-kind{ margin-left:auto; font-size:11px; font-weight:800; opacity:.7; }
.slip__head-kind:empty{ display:none; }
.slip__head-odds{ font-size:var(--sb-fs-md); font-weight:900; font-variant-numeric:tabular-nums; }
.slip__head-kind:empty + .slip__head-odds{ margin-left:auto; }
.slip__body{ display:none; padding:8px 10px 10px; max-height:calc(100 * var(--vh) - 140px); overflow-y:auto; }
.slip.is-open .slip__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }

/* 자동 수락 스위치 · 비우기 — 한 줄 */
.slip__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:24px; }
.slip__auto{ position:relative; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--sb-t4); cursor:pointer; user-select:none; }
.slip__auto input{ position:absolute; opacity:0; width:1px; height:1px; }
.slip__switch{ position:relative; width:26px; height:15px; border-radius:99px; background:var(--surface-3); transition:background-color var(--sb-t-bg); }
.slip__switch::after{ content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:var(--sb-t3); transition:transform var(--sb-t-bg), background-color var(--sb-t-bg); }
.slip__auto:has(input:checked){ color:var(--text); }
.slip__auto:has(input:checked) .slip__switch{ background:var(--accent); }
.slip__auto:has(input:checked) .slip__switch::after{ transform:translateX(11px); background:var(--accent-ink); }
.slip__auto:has(input:focus-visible) .slip__switch{ outline:2px solid var(--accent-line); outline-offset:2px; }
.slip__clear{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--sb-t5); transition:color var(--sb-t-color); }
.slip__clear svg{ width:13px; height:13px; }
.slip__clear:hover{ color:var(--danger); }

/* 담은 경기 — 한 장 두 줄 [고른 것 · 배당 · ✕] / [팀 vs 팀 · 마켓]. 다섯 장이 넘으면 이 안에서만 내린다 */
.slip__picks{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; max-height:252px; overflow-y:auto; scrollbar-width:thin; }
.slip__pick{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto 20px; gap:1px 10px; align-items:center;
  padding:7px 8px 7px 10px; border-radius:var(--sb-r-chip); background:var(--bg);
  box-shadow:inset 3px 0 0 var(--accent);
}
.slip__sel{ grid-column:1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--sb-fs-base); font-weight:900; line-height:20px; color:var(--text); }
.slip__pick small{ grid-column:1; grid-row:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; line-height:16px; color:var(--sb-t5); }
.slip__pick small i{ margin:0 5px; font-style:normal; color:var(--sb-t6); }
.slip__pick.is-live small::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--sb-live); vertical-align:1px; }
.slip__pick .ex-slip-line{
  font-style:normal; margin-left:5px; padding:0 5px; border-radius:var(--sb-r-xs);
  background:color-mix(in srgb, var(--sb-blue) 42%, transparent); color:#fff;
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; vertical-align:1px;
}
.slip__odds{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:var(--sb-fs-md); font-weight:900; line-height:20px; color:var(--accent-fg); font-variant-numeric:tabular-nums; }
.slip__odds s{ margin-right:5px; font-size:11px; font-weight:700; color:var(--sb-t5); }
.slip__pick.is-changed{ box-shadow:inset 3px 0 0 var(--warn); }
.slip__pick.is-changed .slip__odds{ color:var(--warn); }
.slip__del{
  grid-column:3; grid-row:1 / span 2; align-self:center; width:20px; height:20px; border-radius:var(--r-full);
  display:grid; place-items:center; color:var(--sb-t5);
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.slip__del:hover{ background:var(--sb-live); color:#fff; }
.slip__del svg{ width:12px; height:12px; }

/* 폴더 툴팁 — 슬립이 잘라 내므로 fixed 로 왼쪽에 편다 (세로 위치는 JS) */
.ex-slip-tip{
  position:fixed; right:calc(var(--sb-slip-right) + var(--sb-slip-w) + 10px); z-index:calc(var(--z-quick) + 2);
  display:grid; gap:3px; width:max-content; max-width:280px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  font-size:12px; line-height:1.45; text-align:left; white-space:normal;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .12s, visibility .12s;
}
.ex-slip-tip.is-on{ visibility:visible; opacity:1; }
@media (hover:none){ .ex-slip-tip{ display:none; } }
.ex-slip-tip__league{ color:var(--sb-t2); font-weight:800; }
.ex-slip-tip__match{ color:var(--text); font-weight:700; }
.ex-slip-tip__when{ color:var(--sb-t4); font-size:11px; }
.ex-slip-tip__sep{ height:1px; margin:5px 0; background:var(--line); }
.ex-slip-tip__row{ display:grid; grid-template-columns:46px minmax(0,1fr); gap:8px; align-items:baseline; }
.ex-slip-tip__row em{ font-style:normal; color:var(--sb-t4); }
.ex-slip-tip__row span{ color:var(--text); }

/* 금액 — [보유 ···· 입력 원] 한 칸 + 빠른 금액 한 줄 */
.slip__amt{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.slip__amount{
  display:flex; align-items:center; gap:8px; height:42px; padding:0 12px;
  border-radius:var(--sb-r-chip); background:var(--bg); border:1px solid var(--line);
  transition:border-color var(--sb-t-color);
}
.slip__amount:focus-within{ border-color:var(--accent-line); }
.slip__amount em{ flex:none; font-style:normal; font-size:var(--sb-fs-sm); line-height:1; color:var(--sb-t5); font-variant-numeric:tabular-nums; }
.slip__amount input{
  flex:1; min-width:0; border:0; background:transparent; text-align:right;
  font-size:var(--sb-fs-lg); font-weight:900; color:var(--text); font-variant-numeric:tabular-nums;
}
.slip__amount input:placeholder-shown{ font-size:var(--sb-fs-sm); }   /* 비어 있을 때 — 안내 글자와 보유금액 · 원이 같은 높이에 선다 */
.slip__amount input::placeholder{ font-weight:700; color:var(--sb-t5); }
.slip__amount input:focus{ outline:none; }
.slip__amount b{ font-size:var(--sb-fs-sm); line-height:1; font-weight:800; color:var(--sb-t4); }
.slip__amount input{ line-height:1; height:100%; }
.slip__quick{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:3px; }
.slip__quick button{
  height:28px; border-radius:6px; background:var(--surface-2); color:var(--sb-t2);
  font-size:11.5px; font-weight:800; white-space:nowrap;
  transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.slip__quick button:hover{ background:var(--surface-3); color:var(--text); }
.slip__quick [data-max]{ color:var(--accent-fg); }
.slip__quick [data-max]:hover{ background:var(--accent); color:var(--accent-ink); }

/* 합계 — [총 배당 | 예상 당첨금] 두 칸, 숫자를 크게 */
.slip__calc{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:4px; }   /* 총 배당 쪽을 넓게 — 곱셈 식이 들어갈 자리 */
.slip__calc > div{ display:grid; gap:1px; padding:6px 10px; border-radius:var(--sb-r-chip); background:var(--bg); }
.slip__calc span{ font-size:11px; font-weight:700; line-height:16px; color:var(--sb-t5); }
.slip__calc b{ font-size:var(--sb-fs-lg); font-weight:900; line-height:22px; font-variant-numeric:tabular-nums; }
.slip__calc b.is-win{ color:var(--sb-win); font-size:var(--sb-fs-md); white-space:nowrap; }   /* ₩50,000,000 까지 한 줄 */
.slip__total{ display:flex; align-items:baseline; gap:5px; min-width:0; }
.slip__mul{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; letter-spacing:-.2px; font-weight:700; color:var(--sb-t3); font-variant-numeric:tabular-nums; }
.slip__total i{ flex:none; font-style:normal; font-size:var(--sb-fs-sm); font-weight:700; color:var(--sb-t5); }
.slip__total em{ flex:none; font-style:normal; }
.slip__calc > div:last-of-type{ text-align:right; }
.slip__calc .slip__note{ grid-column:1 / -1; margin:0; font-size:11.5px; line-height:1.45; color:var(--warn); }
.slip .btn--cta.slip__bet{ height:44px; padding:0 14px; border-radius:var(--sb-r); font-size:var(--sb-fs-base); border:0; font-variant-numeric:tabular-nums; }
.slip .btn--cta:disabled{ background:var(--surface-3); color:var(--sb-t4); box-shadow:none; opacity:1; }

/* ==========================================================================
   휴대폰 (1023px 이하) — 경기 줄은 [시각 · 팀] 위, [마켓 · 배당] 아래로 쌓는다.
   베팅 슬립은 아래 탭 바로 위에 폭 가득.
   ========================================================================== */
@media (max-width:1023px){
  :root{ --sb-fs-2xl: 18px; --sb-gap-card: 10px; --sb-gap-sec: 16px; }
  /* 인기 리그 배너 — 옆으로 민다 */
  .sb-banners{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
  .sb-banners::-webkit-scrollbar{ display:none; }
  /* 인기 리그 배너 줄 — 모바일에서는 뺀다(제목 포함) */
  .sb-banners{ display:none; }
  /* 필터 줄 — 한 줄에 정렬 · 보기 방식. 화살표는 손으로 미니까 뺀다 */
  .sb-filter{ flex-wrap:nowrap; gap:8px; padding:4px; }
  .sb-filter__label{ display:none; }
  .sb-seg__btn{ height:28px; padding:0 10px; font-size:12px; }
  .sb-page .sb-hot__navs{ display:none; }
  .sb-banner{ min-height:84px; padding:12px 84px 12px 14px; gap:6px; scroll-snap-align:start; }
  .sb-banner__glyph{ right:12px; width:60px; height:60px; }
  .sb-banner .btn{ height:30px; padding:0 12px; font-size:12px; }
  .sb-banner__title{ font-size:15px; }
  .sb-tab{ height:38px; padding:0 12px; font-size:14px; }
  .sb-search{ height:38px; }
  /* 탭 · 검색 */
  .sb-top{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
  .sb-search{ width:100%; min-width:0; margin-left:0; }
  /* 종목 줄 · 주요 경기 — 한 장 + 옆 조금 */
  .sb-sports, .sb-hls{ margin-inline:-16px; padding-inline:16px; }
  .sb-hl{ width:84%; min-width:0; }
  .sb-sport{ width:64px; padding:6px 2px; gap:4px; font-size:11px; }
  .sb-sport__ico{ width:44px; height:44px; }
  .sb-sport__ico img{ width:36px; height:36px; }
  .sb-page .sec__head{ min-height:32px; }
  .sb-hls.ex-lv-grid{ grid-template-columns:minmax(0,1fr); margin-inline:0; padding-inline:0; }
  .sb-hls.ex-lv-grid > .sb-hl{ width:auto; }
  /* 경기 한 줄 — 왼쪽 [시각 / 팀1 / 팀2], 오른쪽 [마켓 이름 / 승리 · 무승부 · 패배].
     +N 마켓은 카드 오른쪽 위 작은 글자. 목록에는 첫 마켓(승무패)만, 나머지는 +N 으로 펼친다.
     장식(왼쪽 색 띠 · 번짐 · 색 점)은 없앤다 — 평평한 카드 */
  .sb-row{ position:relative; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"go mkts"; align-items:end; gap:10px;
    padding:10px 12px 10px 12px; background:var(--surface); }
  .sb-row::before, .sb-row::after{ display:none; }
  .sb-row > .sb-row__go{ grid-area:go; }
  .sb-row > .sb-mkts{ grid-area:mkts; }
  .sb-row > .sb-more{ position:absolute; top:6px; right:10px; z-index:2; height:auto; min-width:0; padding:2px 2px 2px 6px; border-radius:4px;
    background:none; color:var(--sb-t5); font-size:11px; font-weight:700; }
  .sb-row > .sb-more::after{ content:" ›"; }
  .sb-row > .sb-more.is-open{ background:none; color:var(--accent-fg); }
  .sb-row__when{ padding-left:0; font-size:11px; line-height:16px; }
  .sb-row__when::before{ display:none; }
  .sb-row__tour, .sb-row__tag{ display:none; }
  .sb-row__when{ flex-wrap:nowrap; white-space:nowrap; overflow:hidden; }
  .sb-row__when .sb-live + b{ display:none; }   /* 「진행 중」 — LIVE 표시가 이미 알린다 */
  .sb-row__when .sb-live{ height:16px; padding:0 6px; font-size:10px; }
  .sb-row__teams{ margin-top:6px; gap:4px; }
  .sb-team{ gap:7px; font-size:13.5px; font-weight:700; line-height:20px; }
  .sb-team__mark{ width:18px; height:18px; }
  .sb-team__ha{ display:none; }
  /* 라이브 점수 — 팀 줄 끝의 작은 흰 칸 */
  .sb-team__score{ flex:none; min-width:20px; height:20px; margin-left:auto; padding:0 5px; border-radius:4px;
    display:grid; place-items:center; background:var(--bg); color:#fff; font-size:12px; font-weight:800; line-height:1; }
  /* 오른쪽 : 마켓 이름 + 칸 */
  .sb-mkts{ display:block; }
  .sb-mkt{ display:none; }
  .sb-mkt:first-child{ display:grid; gap:5px; }
  .sb-mkt:first-child .sb-mkt__head{ display:block; justify-content:flex-start; margin:0; padding-right:44px; font-size:10.5px; font-weight:700; color:var(--sb-t5); line-height:14px; white-space:nowrap; }
  .sb-mkt:first-child .sb-mkt__head b{ display:none; }
  .sb-mkt__head{ display:none; }
  .sb-mkt:first-child .sb-mkt__picks{ display:flex; gap:4px; margin:0; }
  .sb-mkt:first-child .sb-pick{ flex:none; width:54px; height:44px; padding:0; flex-direction:column; justify-content:center; gap:2px; border-radius:8px; }
  .sb-mkt:first-child .sb-pick > span{ display:none; }
  .sb-mkt:first-child .sb-pick > b{ font-size:13.5px; }
  .sb-mkt:first-child .sb-pick::before{ font-size:10px; font-weight:600; line-height:1; color:var(--sb-t5); }
  .sb-mkt:first-child .sb-pick.side-home::before{ content:"승리"; }
  .sb-mkt:first-child .sb-pick.side-draw::before{ content:"무승부"; }
  .sb-mkt:first-child .sb-pick.side-away::before{ content:"패배"; }
  .sb-mkt:first-child .sb-pick.side-over::before{ content:"오버"; }
  .sb-mkt:first-child .sb-pick.side-under::before{ content:"언더"; }
  .sb-mkt:first-child .sb-pick.is-on::before{ color:inherit; }
  /* 주요 경기 카드도 같은 표기 — 잘린 팀 이름 대신 승리 · 무승부 · 패배 */
  .sb-hl .sb-pick{ flex-direction:column; justify-content:center; gap:1px; height:40px; padding:0; }
  .sb-hl .sb-pick > span{ display:none; }
  .sb-hl .sb-pick::before{ font-size:10px; font-weight:600; line-height:1; color:rgba(255,255,255,.75); text-shadow:0 1px 3px rgba(0,0,0,.75); }
  .sb-hl .sb-pick.side-home::before{ content:"승리"; }
  .sb-hl .sb-pick.side-draw::before{ content:"무승부"; }
  .sb-hl .sb-pick.side-away::before{ content:"패배"; }
  .sb-hl .sb-pick.side-over::before{ content:"오버"; }
  .sb-hl .sb-pick.side-under::before{ content:"언더"; }
  .sb-league + .sb-league{ margin-top:14px; }
  .sb-league__head{ padding:0 2px 8px; }
  .sb-league__list{ gap:6px; }
  /* 경기 화면 — 한 줄로 쌓는다 (중계판은 제목 밑) */
  .mt-layout, .mt-layout.is-prematch{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "track" "tabs" "mkts"; }
  .mt-head__main{ gap:8px; }
  .mt-side__mark{ width:48px; height:48px; }
  .mt-side__name{ font-size:var(--sb-fs-base); }
  .mt-mkt__body[data-cols="3"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mt-strip{ overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; }
  .mt-strip__item{ flex:none; width:74%; }
  /* 베팅 슬립 — 접으면 가운데 아래 노란 동그라미 카트(빨간 숫자 = 담은 경기 수), 펼치면 아래 탭 위에 폭 가득 */
  .slip:not(.is-open){
    left:50%; right:auto; bottom:calc(var(--mtab-h) + env(safe-area-inset-bottom) + 30px);
    width:58px; height:58px; translate:-50% 0; border:0; border-radius:50%; overflow:visible;
    background:var(--accent); box-shadow:0 0 0 4px var(--bg-deep), 0 10px 26px rgba(0,0,0,.55);
    animation:slip-in .42s cubic-bezier(.3,1.5,.5,1);
  }
  .slip:not(.is-open) .slip__head{ position:relative; width:58px; height:58px; padding:0; justify-content:center; border-radius:50%; background:none; }
  .slip:not(.is-open) .slip__head > :is(span, b, svg:last-child){ display:none; }
  .slip:not(.is-open) .slip__head > svg:first-child{ width:26px; height:26px; }
  .slip:not(.is-open) .slip__head i{
    position:absolute; top:-5px; right:-5px; min-width:24px; height:24px; padding:0 6px;
    background:#ff3b4f; color:#fff; font-size:13px; box-shadow:0 0 0 3px var(--bg-deep);
  }
  .slip:not(.is-open).is-bump{ animation:slip-bump .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes slip-in{ 0%{ scale:.2; opacity:0; } 100%{ scale:1; opacity:1; } }
  @keyframes slip-bump{ 0%{ scale:1; } 35%{ scale:1.18; } 65%{ scale:.94; } 100%{ scale:1; } }
  .slip{ left:8px; right:8px; bottom:calc(var(--mtab-h) + env(safe-area-inset-bottom) + 8px); width:auto; max-width:none; }
  .slip__body{ max-height:calc(55 * var(--vh)); }
  /* 슬립 막대가 떠 있으면 그 높이만큼 아래를 더 비운다 — 맨 아래 저작권 줄이 막대에 가리지 않게 */
  body:has(.slip:not([hidden])){ padding-bottom:calc(var(--mtab-h) + env(safe-area-inset-bottom) + 96px); }
}

/* 태블릿 세로 (600~1023px) — 배너 · 주요 경기 두 장씩 */
@media (min-width:600px) and (max-width:1023px){
  .sb-banners{ grid-auto-columns:calc(50% - 5px); }
  .sb-hl{ width:calc(50% - 5px); }
  .sb-hls.ex-lv-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mt-strip__item{ width:44%; }
}
@media (max-width:1023px){
  .mt-pick{ min-height:34px; height:34px; padding:0 10px; }
  .mt-mkt__head{ padding:7px 12px; }
  .mt-mkt__body{ padding:0 10px 8px; gap:4px; }
  .mt-head{ padding:12px 14px; }
  .mt-head__main{ margin-top:8px; }
  .mt-when b{ font-size:20px; }
}

/* ==========================================================================
   csk-igaming 5단계 — 실데이터를 붙이며 생긴 상태 (색은 토큰만)
   ========================================================================== */
/* 닫힌 배당 — 누를 수 없다(서버가 잠갔다 · 경기가 시작됐다) */
:is(.sb-pick, .mt-pick, .kr-pick):disabled{ cursor:not-allowed; opacity:.42; }
:is(.sb-pick, .mt-pick, .kr-pick):disabled:hover{ background:var(--surface-2); }
/* 서버 엠블럼 — 기본 유니폼(svg)과 같은 자리 · 같은 크기 */
img.em-crest{ object-fit:contain; }
/* 목록 끝 — 다음 40경기 · 다음 쪽을 부르는 자리 */
.sb-more-sentinel{ height:1px; }
/* 슬립 — 잠긴 폴더(계산에서 빠진다) · 원화 아닌 통화의 빠른 금액 세 칸 · 다폴더 보너스 줄 */
.slip__pick.is-locked{ opacity:.5; box-shadow:inset 3px 0 0 var(--line-strong); }
.slip__pick.is-locked .slip__odds{ color:var(--text-mute); }
.slip__quick[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.slip__calc .slip__note.is-bonus{ color:var(--gold); }
.slip__calc .slip__note.is-bonus i{ margin:0 4px; font-style:normal; color:var(--text-sub); }
.slip__calc .slip__note.is-off{ color:var(--text-sub); }