/* ==========================================================================
   sports — 스포츠북
   경기 한 줄에 마켓 세 가지를 같이 놓는다 (루벳은 1x2 하나만 놓는다).
     1x2 · 핸디캡(기준점) · 언더오버(기준점)  + 나머지는 `+32` 로 접어 둔다
   베팅 슬립은 싱글/조합/시스템 탭이 없다. 하나 고르면 싱글, 둘 이상이면 조합이다.
   ========================================================================== */

/* ---- 배너 (최대 3열) ---------------------------------------------------- */
/*
  ⚠ 칸 수를 3 으로 <못 박지 않는다>. 배너에는 엠블럼이 있는 <서로 다른 리그>만 오르므로
    (SportsPage.pickDistinctLeagues) 고를 리그가 적은 새벽에는 두 장·한 장이 된다.
    3 으로 박아 두면 그때 오른쪽에 빈 칸이 남는다 — auto-fit 은 있는 만큼만 채운다.
*/
.sb-banners{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--gap-card); }
.sb-banner{
  position:relative; overflow:hidden;
  min-height:150px; padding:20px 140px 20px 20px; border-radius:var(--r);
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  background:
    radial-gradient(120% 130% at 15% 0%, color-mix(in oklab, var(--c) 60%, transparent), transparent 62%),
    linear-gradient(140deg, color-mix(in oklab, var(--c) 30%, var(--surface-2)), var(--surface-1));
  border:1px solid var(--line);
}
/*
  ★★ 리그가 <제목>이다 (레드 2026-09-15 「앞에 리그명」).
     이 줄의 이름이 「인기리그」라 고른 기준이 리그인데, 예전에는
     「A vs B」가 크고 리그가 그 위에 작았다 — 이름과 내용이 어긋났다.
  ★ 경기는 <그 리그에서 지금 열리는 것 하나>를 보기로 남긴다.
     리그 이름만 있으면 지금 뭘 할 수 있는지가 안 보인다.
*/
/* ★ 리그 이름 <하나>다 (레드 2026-09-15 「리그명만 크게」).
     경기명을 뺐으니 그 무게를 이 줄이 가져간다.
   ⚠ .sb-banner__league 규칙은 남긴다 — 이 컴포넌트를 쓰는 다른 화면이 아직 쓴다. */
.sb-banner__title{ font-size:var(--fs-md); font-weight:900; line-height:1.3; }
.sb-banner__league{ font-size:var(--fs-sm); font-weight:700; color:var(--text-3); }
.sb-banner .btn{ margin-top:2px; width:max-content; }

/* ---- 탭 줄 · 검색 ------------------------------------------------------- */
.sb-top{ display:flex; align-items:center; gap:var(--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(--fs-md); font-weight:800; color:var(--text-5);
  border-bottom:2px solid transparent;
  transition:color var(--t-color), border-color var(--t-bg);
}
.sb-tab:hover{ color:var(--text-2); }
/* ⚠ 고른 탭 밑줄은 <강조색>이다. --cta 는 흰색 계열이라 밑줄이 안 보였다 (레드 2026-09-26) */
.sb-tab.is-on{ color:var(--text); border-bottom-color:var(--primary); }
.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(--tag-casino); color:#fff;
  font-size:var(--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(--r);
  display:flex; align-items:center; gap:10px;
  background:var(--surface-1); border:1px solid var(--line);
}
.sb-search svg{ width:20px; height:20px; color:var(--text-5); flex:none; }
.sb-search input{
  flex:1; min-width:0; border:0; background:transparent;
  font-family:var(--font); font-size:var(--fs-base); color:var(--text);
}

/* ==========================================================================
   ★ 찾는 칸에 <손이 놓였을 때> (레드 2026-09-19 「인풋 포커스 예쁘게」).

     포커스 규칙이 아예 없어서 <브라우저 기본 테두리>가 그려졌다. 크롬은 그것을
     제 파란색으로 그리는데 우리 화면의 파랑과 달라 남의 것이 얹힌 듯 보이고,
     상자(.sb-search)와 안쪽 input 에 두 겹으로 쳐져 <이중 테두리>가 됐다.

   ★ 테두리는 <바깥 상자>가 쥔다. 눈에 보이는 상자는 바깥이고 안쪽은 글자만
     놓는 자리다. 그래서 안쪽 윤곽을 지우고 표시를 바깥으로 옮긴다.

   ⚠ outline 을 지우기만 하면 <키보드로 다니는 사람>이 지금 어디 있는지 잃는다.
     반드시 :focus-within 으로 대신 보여 줄 것.
   ========================================================================== */
.sb-search input:focus{ outline:none; }
.sb-search:focus-within{
  border-color:var(--primary);
  /* 테두리를 굵히지 않고 <번짐>으로 띄운다 — 굵히면 칸이 1px 흔들린다 */
  box-shadow:0 0 0 3px rgba(var(--primary-rgb, 30, 79, 168), .22);
  background:var(--surface-2);
}
.sb-search:focus-within svg{ color:var(--primary); }

/* ---- 종목 줄 — 아이콘 위, 이름 아래 -------------------------------------- */
/* ── 종목 고르개 (레드 2026-09-13 「아이콘 크게 · 종목이 확 읽히게」) ──────
   ★ 아이콘을 <동그란 판> 위에 올린다. 24px 그림을 맨바닥에 놓으니 배경과
     붙어서 작아 보였다 — 판이 있으면 같은 크기라도 훨씬 크게 읽힌다.
   ★ 고른 것은 <판에 색>이 들어온다. 전에는 글자색만 바뀌어 한눈에 안 보였다.
   ⚠ 칸 너비를 글자에 맡기지 않는다. 「아이스 하키」와 「축구」의 너비가 달라지면
     줄이 들쭉날쭉해진다.
   ------------------------------------------------------------------ */
.sb-sports{ display:flex; gap:8px; }
.sb-sport{
  flex:none; width:96px; padding:12px 4px 10px; border-radius:var(--r);
  display:grid; justify-items:center; gap:8px;
  font-size:var(--fs-sm); font-weight:800; color:var(--text-4);
  transition:background var(--t-bg), color var(--t-color);
}

/* 아이콘 판 */
/* ★ 판 안을 <그림이 꽉 채운다>. (레드 2026-09-13, 그림으로 지시)
     52px 판에 30px 그림은 둘레 여백이 11px 씩이라, 판은 커도
     그림 자체는 여전히 작게 읽혔다. 둘레를 4px 만 남긴다. */
.sb-sport__ico{
  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 var(--t-bg), border-color var(--t-bg),
             box-shadow var(--t-bg), transform var(--t-bg);
}
.sb-sport__ico img,
.sb-sport__ico svg{ width:50px; height:50px; object-fit:contain; }

/* ---- 진행 중 경기 수 배지 (레드 2026-09-19 「아이콘위에 … 경기수 표기」) ----
   ★ 아이콘 <오른쪽 위>에 얹는다. 종목 탭의 라이브 배지와 같은 자리·같은 색이라
     회원이 한 번 익힌 뜻을 여기서 다시 익히지 않아도 된다.
   ⚠ 판(--r-full) 밖으로 조금 나가야 잘 보인다. 안쪽에 두면 아이콘과 겹쳐 둘 다 안 읽힌다.
   ⚠ 0 이면 아예 안 그린다(SportsTop 에서 거른다) — 여기서 숨기지 않는다.
 */
.sb-sport__ico{ position:relative; }
.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;
}

/* ---- 「전체」 아이콘만 한 겹 줄인다 (레드 2026-09-15) --------------------
   ★★ 그림 여백 문제가 <아니다>. 네 장을 재 봤더니 칠해진 넓이가 모두 같다 —
      캔버스 256 에 내용 216, 84.4% 로 똑같다.

      다른 것은 <모양>이다. 공은 원이라 둥근 판 안에서 테두리와 나란히 돈다.
      「전체」는 네모 넷이라 <모서리가> 판 끝까지 닿는다 —
      같은 사각형에 그려도 원보다 √2 배 멀리 뻗는다.

   ★ 그래서 그림을 고치지 않고 <그릴 때만> 줄인다. transform 이라 자리는
     그대로고 가운데도 안 흔들린다. 0.78 은 모서리가 공 테두리와 같은
     자리에 서는 값이다(1/√2 = 0.707 에 둥근 모서리 몫을 더한 것).

   ⚠ 주소로 고른다. slug 로 고르면 <모르는 종목>이 놓친다 —
     SportIcon 이 모르는 종목에도 all 그림을 주기 때문이다(default -> "all").
     그래서 이 한 줄이 종목 줄·리그 대체 자리·인플레이까지 한꺼번에 닿는다.
   ------------------------------------------------------------------------ */
img[src*="/sports-icon/all-"]{ transform:scale(.78); }

.sb-sport:hover{ color:var(--text-2); }
.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(--primary) 30%, var(--surface-2));
  border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--primary) 55%, transparent),
             0 0 14px color-mix(in oklab, var(--primary) 40%, transparent);
}
.sb-sport.is-on svg{ color:var(--cta); }

/* ⚠ 움직임을 싫어하는 설정이면 뜨지 않는다 */
@media (prefers-reduced-motion:reduce){
  .sb-sport:hover .sb-sport__ico{ transform:none; }
}

/* ---- 주요 경기 카드 줄 — 지금 눈에 띄는 경기를 가로로 --------------------- */
.sb-hls{ display:flex; gap:var(--gap-card); }
.sb-hl{
  flex:none; width:calc((100% - var(--gap-card) * 2) / 3); min-width:300px;
  position:relative; overflow:hidden;
  /* 세로로 쌓고 마켓 이름부터 아래로 붙인다 — 팀 이름이 두 줄인 카드와 한 줄인 카드가 한 줄에 서도
     배당 칸 높이가 맞는다(아래 .sb-hl__mkt margin-top:auto) */
  display:flex; flex-direction:column;
  padding:14px 16px; border-radius:var(--r);
  background:
    radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 62%),
    var(--surface-1);
  border:1px solid var(--line);
}
.sb-hl__top{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-5); }
.sb-hl__top b{ font-weight:900; color:var(--text-3); }
.sb-hl__top .sb-live{ margin-left:auto; }
/* ★ 라이브 배지는 <줄어들지도 줄바꿈되지도 않는다> (레드 2026-10-01 「인플레이 화면 깨진다」).
     리그 이름이 길면(「Argentina LHD Oro Clausura Women」) 한 줄 flex 안에서 배지가 눌려
     「후반전」이 「후 / 반 / 전」 세로로 갈라지고 알약이 원처럼 부풀었다.
     배지는 제 폭을 지키고(flex:none · nowrap), 대신 리그 이름(b)이 줄어 두 줄로 내려간다(min-width:0). */
.sb-hl__top .sb-live{ flex:none; white-space:nowrap; }
.sb-hl__top b{ min-width:0; }
/* ★ 위를 맞춘다(start) — 팀 이름이 두 줄이 되면 가운데 맞춤은 그쪽 동그라미만 위로 뜬다.
     동그라미·시각 칸이 같은 높이(34)라 위를 맞추면 한 줄에 선다. */
.sb-hl__teams{
  margin:14px 0; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start;
}
.sb-hl__side{ display:grid; justify-items:center; gap:6px; text-align:center; min-width:0; }
.sb-hl__side i{
  width:34px; height:34px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--surface-3);
  font-style:normal; font-size:var(--fs-base); font-weight:900;
}
/* 팀 이름 — <두 줄까지> 보인다 (레드 2026-09-11 「Washingto… 잘림 · 둘 다 고쳐줘」).
   한 줄 말줄임이라 「Washington Nationals」가 폰에서 「Washingto…」, PC 에서도 「Washington Nati…」였다.
   낱말 단위로 넘기고(keep-all), 한 낱말이 칸보다 길 때만 글자에서 끊는다. 세 줄째부터 말줄임. */
.sb-hl__side span{
  font-size:var(--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;
}
.sb-hl__score{ display:flex; gap:4px; }
.sb-hl__score b{
  min-width:34px; height:34px; padding:0 6px; border-radius:var(--r-chip);
  display:grid; place-items:center; background:var(--surface-3);
  font-size:var(--fs-md); font-weight:900;
}
.sb-hl__mkt{ text-align:center; font-size:var(--fs-sm); color:var(--text-5); margin-top:auto; }
.sb-hl .sb-mkt__picks{ margin-top:6px; }
.sb-hl__teams + .sb-mkt__picks{ margin-top:auto; }   /* 마켓 이름이 없는 경기 — 배당 칸을 바로 아래로 */

/* 종목별 경기장 바탕 (레드 2026-09-11 「스포츠 카드 배경 · 종목별로 경기장배경으로」)
   ★ 그림은 920×218 — 위는 검고 아래에 불 켜진 경기장. 아래를 맞춰(center bottom) 골대·림·네트·홈이
     카드 가운데 오게 한다. slug 는 HighlightRail 이 종목 탭 짝으로 찾아 data-sport 로 준다.
   ★ 배당 칸·팀 동그라미는 원래 불투명 바탕이라 밝은 경기장 위에서도 읽힌다. 경기장 위에 얹히는
     글자(팀 이름·마켓 이름)만 그림자를 주고, 얇은 막으로 그림을 조금 누른다(아이스링크가 하얗다).
   ★ 파일 이름에 날짜 — CSS 속 그림 주소에는 ?v= 가 안 붙는다. */
.sb-hl[data-sport]{
  background:
    linear-gradient(180deg, rgba(5,8,15,.10) 0%, rgba(5,8,15,.30) 55%, rgba(5,8,15,.45) 100%),
    var(--hl-art, none) center bottom / cover no-repeat,
    var(--surface-1);
}
.sb-hl[data-sport="soccer"]    { --hl-art:url("/assets/design/img/sports-bg/soccer-20260913.jpg"); }
.sb-hl[data-sport="baseball"]  { --hl-art:url("/assets/design/img/sports-bg/baseball-20260913.jpg"); }
.sb-hl[data-sport="basketball"]{ --hl-art:url("/assets/design/img/sports-bg/basketball-20260913.jpg"); }
.sb-hl[data-sport="volleyball"]{ --hl-art:url("/assets/design/img/sports-bg/volleyball-20260913.jpg"); }
.sb-hl[data-sport="ice-hockey"]{ --hl-art:url("/assets/design/img/sports-bg/ice-hockey-20260913.jpg"); }
/*
   ★ 인플레이·하이라이트 카드 배경 다섯을 더한다 (레드 2026-09-19).
     전에는 이 다섯 종목에 배경이 <아예 없어서> 카드가 밋밋했다 —
     data-sport 는 붙는데 --hl-art 가 없으니 위 규칙이 빈 그림을 깔았다.
   ⚠ 파일 이름의 날짜가 캐시를 끊는다. 그림을 고치면 날짜를 올리고 여기도 함께 바꾼다.
 */
.sb-hl[data-sport="tennis"]           { --hl-art:url("/assets/design/img/sports-bg/tennis-20260919f.jpg"); }
.sb-hl[data-sport="handball"]         { --hl-art:url("/assets/design/img/sports-bg/handball-20260919f.jpg"); }
.sb-hl[data-sport="mma-boxing"]       { --hl-art:url("/assets/design/img/sports-bg/mma-boxing-20260919f.jpg"); }
.sb-hl[data-sport="e-games"]          { --hl-art:url("/assets/design/img/sports-bg/e-games-20260919f.jpg"); }
.sb-hl[data-sport="american-football"]{ --hl-art:url("/assets/design/img/sports-bg/american-football-20260919f.jpg"); }
.sb-hl[data-sport] .sb-hl__side span,
.sb-hl[data-sport] .sb-hl__mkt{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); }
.sb-hl[data-sport] .sb-hl__mkt{ color:var(--text-3); }

/* ---- 진행 예정은 <한 겹 가라앉힌다> (레드 2026-09-18) --------------------
   「인플레이 진행전 → 조금 다르게 주자 진행중이랑 구분가게」

   ⚠ 2026-09-15 에는 <같은 생김새로 둔다>고 정했었다. 한 목록이 두 종류로 보이는
     것을 막으려는 뜻이었는데, 화면은 이미 「진행 중」·「진행 예정」 두 구역으로
     나뉘어 있어서 같게 두면 오히려 어느 구역을 보고 있는지가 흐려졌다.

   ★ 바꾸는 것은 <채도와 밝기>뿐이다. 크기·여백·배치는 손대지 않는다 —
     모양을 바꾸면 한 화면에 격자가 두 벌이 되어 훑어보기가 나빠진다.
   ★ 경기장 그림만 가라앉히고 <글자는 되돌린다>. 팀 이름까지 흐리면 읽으려고
     눈을 멈추게 된다. 진행 예정도 읽으라고 띄운 카드다.
   ⚠ 어둠막을 진하게 하는 대신 filter 를 쓴다. 막만 진하게 하면 그림은 어두워지고
     카드 바탕(--surface-1)은 그대로라 <위아래 색이 갈라져> 보인다. */
.sb-hl[data-sport][data-live="0"]{
  filter: saturate(.55) brightness(.82);
}
.sb-hl[data-sport][data-live="0"] .sb-hl__top,
.sb-hl[data-sport][data-live="0"] .sb-hl__side span,
.sb-hl[data-sport][data-live="0"] .sb-hl__score{
  filter: saturate(1.8) brightness(1.22);   /* 글자·엠블럼은 원래 밝기로 */
}

/* ---- 리그 섹션 — 머리를 눌러 접는다 -------------------------------------- */
.sb-league{ margin-top:var(--gap-sec); }
.sb-league__head{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:0 4px 12px; text-align:left;
}
.sb-league__head svg:first-child{ width:22px; height:22px; color:var(--text-4); }
/* ⚠⚠ 좁은 화면에서 「멕시코」가 <세로로 쪼개졌다>(33×48). 리그 이름이 길면
     flex 가 나라 칸부터 줄여서 글자 사이에서 줄을 바꿨다.
   ★ 나라는 <안 쪼갠다>. 줄일 것은 리그 이름 쪽이고, 거기에 말줄임을 건다. */
.sb-league__name{
  font-size:var(--fs-lg); font-weight:900;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sb-league__where{
  font-size:var(--fs-sm); color:var(--text-5);
  flex:none; white-space:nowrap;
}
.sb-league__caret{ margin-left:auto; width:20px; height:20px; color:var(--text-4); transition:transform var(--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{
  display:grid; grid-template-columns:minmax(180px,1fr) minmax(360px,520px) auto;
  gap:16px; align-items:center;
  padding:14px 16px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
  transition:border-color var(--t-color);
}
.sb-row:hover{ border-color:var(--primary); }

/* ---- 경기 줄의 종목 표시 (레드 2026-09-13 「종목별로 뭔가 넣으면 좋겠다」) ----

   ★ 그림을 쓰지 않는다. 한 화면에 줄이 스무 개씩 깔리는데 「주요 경기」 카드처럼
     경기장 사진을 넣으면 (1) 가장 잘 읽혀야 할 배당 숫자를 그림이 덮고,
     (2) 스무 장이 동시에 뜨고, (3) sports-bg 그림은 center bottom 으로 잘리도록
     그린 것이라 낮고 넓은 줄에서는 골대가 아예 안 보인다. 색만 쓴다 — 용량 0.

   ★ 셋을 <각각 약하게> 겹친다. 하나만 쓰면 약하거나(워시) 시끄럽다(글리프).
       띠 5px  ·  왼쪽 세로 워시 22%  ·  글리프 15%  ·  시각 앞 종목 점 8px

   ⚠ overflow:hidden 을 쓰지 않는다. 대신 띠는 border-radius:inherit 한 테두리로
     그려 모서리를 저절로 따라가게 하고(.is-open 이 밑 모서리를 펴도 따라간다),
     글리프는 높이를 <비율>로 잡는다. 줄 높이가 마켓 수에 따라 달라서
     고정 px 로 두면 짧은 줄에서 삐져나온다.

   ⚠ 자식에 z-index 를 줄 때 `> *` 로 뭉뚱그리지 않는다. 640px 아래에서
     .sb-more 가 <절대배치>라(아래 640px 블록) position 을 덮어쓰면 자리가 깨진다.

   ⚠ 여기 없는 종목은 --sp 기본값(회색)으로 떨어진다. 색은 tokens.css 에 있다.
   ------------------------------------------------------------------------ */
.sb-row[data-sport]{
  position:relative;
  --sp:var(--text-5);
  /* 왼쪽에서 <세로 전체>로 번진다. 처음에는 왼쪽 <위 모서리>였는데,
     1900px 짜리 줄에서 그 구석은 아무도 안 보는 자리였다. */
  background:
    radial-gradient(90% 190% at 0% 50%, color-mix(in srgb, var(--sp) 22%, transparent) 0%, transparent 42%),
    var(--surface-1);
}
.sb-row[data-sport="soccer"]     { --sp:var(--sp-soccer); }
.sb-row[data-sport="basketball"] { --sp:var(--sp-basketball); }
.sb-row[data-sport="baseball"]   { --sp:var(--sp-baseball); }
.sb-row[data-sport="volleyball"] { --sp:var(--sp-volleyball); }
.sb-row[data-sport="ice-hockey"] { --sp:var(--sp-ice-hockey); }

/* 띠 — 테두리로 그려서 둥근 모서리를 그대로 따라간다 */
.sb-row[data-sport]::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; border-left:5px solid var(--sp);
}
/* 글리프 — 팀 이름 뒤.

   ★★ 크기를 <고정>한다 (레드 2026-09-14 「각 스포츠 볼 아이콘사이즈가
     안맞을떄가있거등 이거 일괄적으로 사이즈 처리해줄래」).

     전에는 height:78% 였다. 줄 높이가 마켓 수에 따라 달라져(120~168px)
     같은 종목의 같은 공이 <줄마다 92~129px 로> 흔들렸다. 세로로 훑으면
     공이 커졌다 작아졌다 한다 — 비율은 「안 넘치게」 하려던 것이었지
     「같아 보이게」 하려던 것이 아니었다.

   ⚠ 값은 <가장 짧은 줄>에 맞춘다. 실측으로 줄은 120~168px 이고,
     92px 이면 짧은 줄에서도 76% 라 여유가 있다. min() 으로 천장을 두면
     짧은 줄만 작아져 <다시 두 가지 크기>가 된다 — 그래서 한 값이다.

   ⚠ .sb-row 는 overflow:visible 이다. 넘치면 진짜로 삐져나오므로
     여기서 넘지 않을 값을 골라야 한다. 줄이 더 짧아질 일이 생기면
     이 값을 함께 내린다.

   ⚠ .sb-hl(주요 경기 카드)는 이 규칙을 안 탄다. 거기는 사진이 배경이다. */
.sb-row[data-sport]::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); opacity:.15;
  -webkit-mask:var(--sp-glyph) no-repeat center / contain;
          mask:var(--sp-glyph) no-repeat center / contain;
}
/* 축구공 — 테두리 + 가운데 오각형 + 이음선 다섯 */
.sb-row[data-sport="soccer"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.3l3.3 2.4-1.25 3.9h-4.1L8.7 9.7z'/%3E%3Cpath d='M12 7.3V2.9M15.3 9.7l4.3-3M8.7 9.7l-4.3-3M14.05 13.6l5.2 4.1M9.95 13.6l-5.2 4.1'/%3E%3C/svg%3E"); }
/* ⚠⚠ 농구는 <선으로> 그린다. (레드 2026-09-13 「농구 마크가안나와」)

     전에는 폰트어썸 꼴의 채우기 경로였다 — 바깥 원을 그리고 안쪽 조각들을
     같은 방향으로 그리는 모양이라, 기본 채우기 규칙(nonzero)에서는
     <구멍이 안 뚫려 민 원>이 된다. 실측 56% 채워짐 = 지름 그대로의 원이다.

     fill-rule:evenodd 를 주면 뚫리기는 하는데 <지구본>이 된다 —
     이 경로의 조각 배치가 농구공 솔기가 아니라 경선·위선을 닮았다.

   ★ mask 는 <그려진 픽셀>을 쓴다. 선(stroke)도 그려진다 —
     그래서 채우기 경로를 고치는 대신 선으로 그린다.
     원 + 세로선 + 가로선 + 좌우 곡선 둘. 그것이 농구공이다.

   ⚠ stroke 색은 아무거나 좋다(mask 는 모양만 본다). 다만 <fill:none> 이
     없으면 원이 통째로 메워져 다시 민 원이 된다. */
.sb-row[data-sport="basketball"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9.2'%2F%3E%3Cpath%20d%3D'M12%202.8v18.4M2.8%2012h18.4'%2F%3E%3Cpath%20d%3D'M5.4%205.4a13%2013%200%200%200%2013.2%2013.2M18.6%205.4A13%2013%200%200%200%205.4%2018.6'%2F%3E%3C%2Fsvg%3E"); }
/* 야구공 — 공 테두리 + 실밥 두 줄 + 땀 여섯 (레드 2026-09-14 「진짜 야구공모양처럼」).
   ⚠ 전에는 실밥을 <채운 덩어리>로 그려서 비치볼처럼 보였다. 실밥은 <가는 선>이어야
     야구공으로 읽힌다. 농구와 같은 외곽선 방식으로 맞춘다. */
.sb-row[data-sport="baseball"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M6.1 5C9.6 7.6 9.6 16.4 6.1 19M17.9 5C14.4 7.6 14.4 16.4 17.9 19'/%3E%3Cpath stroke-width='1.2' d='M7.4 8.3l2-.9M7.8 12h2.2M7.4 15.7l2 .9M16.6 8.3l-2-.9M16.2 12h-2.2M16.6 15.7l-2 .9'/%3E%3C/svg%3E"); }
/* 배구공 — 테두리 + 이음선 셋 */
.sb-row[data-sport="volleyball"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M11.3 2.9C8.5 7 7.8 12.2 9.4 17M20.9 10.7C16.4 10 11.9 11.7 8.7 15.1M4.3 16.7C6.7 12.2 11 9.2 16 8.7'/%3E%3C/svg%3E"); }
/* 아이스하키 — 스틱과 빙판선. <같은 모양>을 선으로만 다시 그린 것이다 */
.sb-row[data-sport="ice-hockey"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4.6 15.4l9.2-9.2a2.6 2.6 0 013.7 0l1 1a1 1 0 010 1.4l-9.4 9.4H7.7z'/%3E%3Cpath d='M13.2 7.4l4.2 4.2'/%3E%3Cpath d='M3.2 20.4h17.6'/%3E%3C/svg%3E"); }

/* 종목 점 — 「오늘 17:00」 앞의 8px 동그라미.
   ★ 실은 <이것이 가장 잘 보인다.> 띠는 줄 맨 왼쪽 끝인데 1900px 짜리 줄에서
     그 가장자리는 눈이 가지 않는다. 시각은 회원이 어차피 읽는 자리다.
   ★ 폰에서도 남긴다 — 글리프와 달리 자리를 안 먹고, 칸이 좁을수록 더 쓸모 있다. */
.sb-row[data-sport] .sb-row__when::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--sp); margin-right:7px; vertical-align:1px;
  box-shadow:0 0 8px color-mix(in srgb, var(--sp) 70%, transparent);
}

/* 글자를 글리프 위로 올린다. .sb-more 는 <건드리지 않는다> — 640px 아래에서 절대배치다 */
.sb-row[data-sport] > .sb-row__go,
.sb-row[data-sport] > .sb-mkts{ position:relative; z-index:1; }

/* 폰에서는 글리프를 뺀다 — 칸이 좁아 팀 이름과 겹친다. 띠·워시·점은 그대로 둔다 */
@media (max-width:640px){
  .sb-row[data-sport]::after{ display:none; }
}

.sb-row__go{ display:block; min-width:0; }
/*
  ★★ 시각을 <왼쪽에> 못 박는다 (레드 2026-09-15 「시간 밀림」).

    이 칸은 display:block 이라 폭이 414px 인데, 물려받은 text-align:center 가
    짧은 글자를 <가운데로> 보냈다. 팀 이름은 왼쪽에서 시작하니 둘의 머리가
    안 맞아 시각만 떠 보였다 — 팀 이름이 짧은 리그에서 특히 그랬다.
    (실측: 팀 이름 49px, 시각은 칸 가운데)
*/
.sb-row__when{
  font-size:var(--fs-sm); color:var(--text-5);
  text-align:left; padding-left:7px;
}
.sb-row__when b{ font-weight:800; color:var(--text-3); }
.sb-live{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:var(--r-full);
  background:var(--tag-casino); color:#fff; font-size:var(--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; } }
/* ★ 여백을 걷었다 (레드 「카드내 여백 최대한 촘촘하게」) — 8→5, 4→3 */
.sb-row__teams{ margin-top:5px; display:grid; gap:3px; }
.sb-team{ display:flex; align-items:center; gap:10px; font-size:var(--fs-md); font-weight:800; }
.sb-team__mark{
  /* ★ 22 → 26px (레드 2026-09-16 「리그 팀 이미지 지금보다 크게」) */
  flex:none; width:26px; height:26px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--surface-3);
  font-size:var(--fs-sm); font-weight:900; color:var(--text-2);
}
/*
  팀 이름 — <두 줄로 안 넘긴다> (레드 2026-09-14 「팀명이길면 2줄로하지않고 … 처리」).

  ⚠ 예전에는 이름이 <맨 글자>였다. text-overflow 는 요소에만 걸리므로
    감싸는 span 을 만들었다(SportsPage · InPlayPage).
  ⚠ min-width:0 이 없으면 flex 칸이 <글자 길이만큼> 버텨 말줄임이 안 걸린다.
*/
.sb-team__name{
  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(--cta); }

/* 팀 이름 오른쪽 H(홈) · A(원정) — 레드 2026-09-13
   ★ 배당 칸이 팀 이름 대신 HOME·AWAY 를 적게 되면서, <어느 팀이 홈인가>를
     읽을 자리가 이 줄밖에 없다. 없으면 HOME 을 누르면서 어느 팀인지 모른다.
   ★ 홈만 칠하고 원정은 테두리로 둔다. 둘 다 칠하면 어느 쪽이 기준인지 흐려지고,
     한 줄에 강한 색이 둘이 되어 배당 숫자에서 눈을 뺏는다.
   ⚠ .sb-team 이 gap:10px 이라 이름과 너무 벌어진다 — 4px 을 당겨 6px 로 붙인다.
   ⚠ .sb-team__score 는 margin-left:auto 라 오른쪽 끝으로 가므로 자리를 다투지 않는다. */
.sb-team__ha{
  flex:none; margin-left:-4px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-4);
  font-size:11px; line-height:1; font-weight:900; letter-spacing:.02em;
}
/*
  ⚠ 살짝 위로 떠 보인다 (레드 2026-09-14). flex 가 <글자 상자>의 가운데에 맞추는데,
    한글은 상자 안에서 아래쪽에 앉아 눈에는 배지가 올라가 보인다.
    1px 내려 <눈에> 맞춘다 — 자리 계산이 틀린 것이 아니라 착시다.
*/
.sb-team__ha{ position:relative; top:1px; }

.sb-team__ha.is-home{ background:var(--cta); border-color:var(--cta); color:var(--bg); }
.sb-team__ha.is-away{ background:var(--surface-2); color:var(--text-4); }

/* 팀·리그 엠블럼 (2026-09-12, 바닐라 피드 — components/Emblem)
   ★ 엠블럼은 대개 <투명 바탕에 검은 선>이다(화이트삭스는 통째로 검다). 어두운 동그라미 위에 그대로 두면
     사라진다 → 그림이 있을 때만(.is-img) 동그라미를 밝게 칠하고, 안에 여백을 두고 contain 으로 앉힌다.
     크기·둥글기는 원래 동그라미 규칙(목록 22 · 레일 34 · 상세 56)을 그대로 쓴다.
   ★ 그림이 없거나 못 받으면 .is-img 가 안 붙어 머리글자 동그라미 그대로다. */
/*
  ★★ <뒤판을 걷어냈다> (레드 2026-09-16 「뒤에 동그라미는 다 제거」).

    예전에는 엠블럼 뒤에 밝은 동그라미(#f3f5f9)를 깔았다. 엠블럼이 대개
    <투명 바탕에 검은 선>이라 어두운 판 위에 그냥 두면 사라졌기 때문이다
    (시카고 화이트삭스처럼 통째로 검은 것도 있다).

    이제 판 대신 <얇은 흰 외곽 빛>으로 살린다. 판은 네모·동그라미가 눈에 먼저
    들어와 정작 엠블럼을 가렸는데, 외곽 빛은 검은 선의 <가장자리만> 밝혀 준다.
  ⚠ drop-shadow 는 투명 png 의 <그림 모양>을 따라간다. box-shadow 처럼
    상자 테두리를 그리는 것이 아니다 — 그래서 판 없이도 글자 획이 살아난다.
  ⚠ 2026-09-16 부터 상류(exit-odds)가 흰 배경을 지우고 전부 png 로 낸다.
    배경이 남아 있던 시절에는 이 방법이 <흰 네모에 흰 빛>이라 뜻이 없었다.
*/
/* ⚠ overflow 를 걸지 않는다 — 외곽 빛(drop-shadow)이 잘린다. 위 규칙 설명 참고 */
.is-img{ }
/*
  ★ 칸 안에 <다> 들어간다 (레드 2026-09-16 「영역에 100% 맞춰서」).

  ⚠⚠ width/height 를 100% 로 주면 안 된다. 이 그림은 grid 칸 안에서
    place-items:center 로 놓여 <늘어나지 않으므로>, height:100% 가 기댈 높이가 없어
    그림이 제 비율대로 커진다. 실측으로 34×34 칸에서 <34×46> 이 나왔다 —
    세로로 긴 로고(화이트삭스·클리블랜드)가 12px 넘쳐 팀 이름을 덮었다.
    세로가 짧은 로고(세인트루이스·샌프란시스코)는 우연히 맞아서 더 헷갈렸다.

    max- 로 잡으면 <천장만> 정해 주는 것이라 어떤 비율이든 칸 안에 들어간다.
*/
/*
  ⚠⚠ 그림을 <자리에서 떼어> 칸에 물린다(absolute + inset:0).

    %(100% 든 max-height 든)로는 안 된다. 이 그림은 grid 칸 안에서
    place-items:center 로 놓여 있어 높이가 <내용 기준>으로 정해지고,
    그러면 브라우저가 % 를 풀 기준을 못 찾아 그림이 제 비율대로 커진다.
    실측: 34px 칸에서 max-height:100% 를 줘도 h 가 46.3px 로 잡혔다.

    떼어 놓으면 inset:0 이 부모 상자를 그대로 가리키므로 기준이 분명해진다.
    부모는 위 :is(...) 규칙에서 이미 position:relative 다.
*/
.is-img > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; display:block;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 2px rgba(255,255,255,.45));
}
/*
  ★ 그래도 <글자가 위>다 (레드 2026-09-16 「이미지 글자 뒤로 가자」).
    크기를 잡았으니 겹칠 일이 없지만, 상류가 별난 비율의 그림을 주는 날에도
    팀 이름이 가려지지는 않아야 한다. 이름은 읽혀야 하고 그림은 곁들이는 것이다.
*/
:is(.sb-hl__side, .sb-team, .mt-side) :is(span, .sb-team__name, .mt-side__name){
  position:relative; z-index:1;
}
:is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark){ z-index:0; }
/* 리그 — 종목 아이콘 자리. ★ 20 → 24px (레드 2026-09-16), 뒤판 없음 */
.lg-emblem{
  flex:none; width:24px; height:24px; box-sizing:border-box;
  object-fit:contain; vertical-align:middle;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 2px rgba(255,255,255,.45));
}
/*
  그림이 없는 팀의 기본 엠블럼(유니폼 + 머리글자) — components/Emblem.tsx 의 TeamCrest.
  ⚠ 동그라미를 <꽉> 채운다. 머리글자 하나만 있던 자리라 여백을 두면 예전과 같아 보인다.
*/
.em-crest{ width:100%; height:100%; display:block; }

/*
  ── 종목 탭 아이콘을 기본 엠블럼으로 (레드 2026-09-20) ──
    「여기 아이콘 색변경하고 줄좀넣어서 쓰자 … e스포츠는 괜찮고 미식축구랑 MMA만」

  ★ PNG 를 <마스크>로 쓴다. 그림은 흰 실루엣이라 그대로 얹으면 팀마다 같은 흰색이다.
    알파만 따고 색은 여기서 칠하므로 팀 색·줄무늬를 줄 수 있다.
  ★ 색(--crest-c)과 무늬 갈래는 <팀 이름>에서 나온다 — 같은 팀은 언제나 같은 모습이다.
  ⚠ 그림이 404 면 마스크가 <통째로 비어> 아무것도 안 보인다. 조용히 사라지므로
    파일 이름을 갈 때는 Emblem.tsx 의 SPORT_ART 와 함께 본다.
*/
.em-crest--art{
  background-color: var(--crest-c);
  -webkit-mask: var(--crest-src) center / 94% 94% no-repeat;
          mask: var(--crest-src) center / 94% 94% no-repeat;
}
/*
  무늬 — 유니폼의 줄·띠·사선과 같은 결로 넷을 돌려 쓴다.

  ⚠ <가늘고 옅게> 둔다. 목록의 팀 표시가 22px 라, 굵은 줄을 넣었더니
    줄 두세 개가 헬멧을 반으로 갈라 <형태가 안 읽혔다>(2026-09-20 화면 확인).
    큰 자리(상세 56px)에서 보기 좋은 굵기가 작은 자리에서는 무늬가 주인이 된다.
*/
.em-crest--p1{
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.24) 0 1.2px, transparent 1.2px 5.5px);
}
.em-crest--p2{
  background-image: linear-gradient(0deg,
    transparent 44%, rgba(255,255,255,.26) 44% 53%, transparent 53%);
}
.em-crest--p3{
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.22) 0 1.2px, transparent 1.2px 6px);
}
/* 받는 중 — 그림은 1px 로 숨기고 예전 모양(머리글자·종목 아이콘)을 보인다. 받고 나면 바뀐다.
   ⚠ display:none 으로 숨기면 loading=lazy 그림은 영영 안 받는다 — 그래서 1px·투명.
   팀 동그라미 안에서는 가운데 겹쳐 두어 머리글자를 밀지 않는다. */
.em-wait{
  width:1px !important; height:1px !important; padding:0 !important;
  background:none !important; opacity:0; pointer-events:none;
}
.lg-emblem.em-wait{ margin-left:-1px; }
/*
  ★★ 엠블럼 자리는 <칸 그 자체>다 (레드 2026-09-16 「뒤에 동그라미 배경 없애고,
    엠블럼 이미지만 표기. 영역 벗어나는 게 있는데 100% 맞춰서 노출」).

    세 자리(목록·레일·상세)가 저마다 배경 동그라미(var(--surface-3))를 깔고 있었다.
    머리글자를 담던 시절의 것이다 — 이제 그 자리에는 엠블럼이나 기본 유니폼이 들어가고,
    둘 다 <제 모양과 색>을 들고 있어 뒤판이 오히려 그림을 가렸다.

  ⚠ 둥근 모서리도 함께 없앤다. 배경이 사라지면 그 동그라미는 <보이지 않으면서
    그림만 잘라내는> 틀이 된다 — 사각인 엠블럼과 유니폼의 네 귀퉁이가 깎였다.
    모양은 이제 그림 자체가 정한다.
  ⚠ overflow 는 걸지 않는다. 모서리를 없애면 칸을 넘칠 것이 없고, 잠그면
    엠블럼 둘레의 흰 외곽 빛(drop-shadow)까지 잘려 검은 로고가 다시 묻힌다.
*/
:is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark){
  position:relative;
  background:none;
  border-radius:0;
}
:is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark) > .em-wait{ position:absolute; left:50%; top:50%; }

/*
  ---- 선수 국적 국기 (레드 2026-09-19 「개인경기 팀엠블럼 국가표기」) ----

  개인 종목(테니스·MMA/복싱)은 팀이 없어 로고 자리가 늘 비어 있었다. 그 자리에
  선수 국적 국기를 넣는다. 값은 서버가 두 글자 코드로 주고 주소는 화면이 만든다.

  ★★ <칸을 가로로 넓힌다.> 이것이 핵심이다 (레드 2026-09-19 「사이즈처리 잘해야함」).

    엠블럼 자리는 정사각(26·34·64px)이다. 국기를 그 안에 우겨넣으면 둘 중 하나가 된다.
      cover  → 위아래가 잘린다. 가로줄 삼색기(네덜란드·러시아·독일)는 <다른 나라가 된다>
      contain→ 안 잘리지만 나라마다 크기가 제각각이 된다(세로 비율이 3배까지 차이)
    둘 다 틀렸다. 자리를 국기 모양에 맞추는 것이 맞다.

    그래서 국기일 때만 aspect-ratio 로 칸을 눕힌다. 높이는 자리가 준 그대로 쓰고
    가로만 늘어난다 — 세 자리(목록·레일·상세)가 저절로 따라온다.

  ★★ <폭을 맞춘다. 높이가 아니다.> (레드 2026-09-19 「캐나다 심각하게 넓다」)

    처음엔 높이를 맞췄다. 국기를 글줄 옆에 두는 물건으로 보면 그것이 맞는 축이다.
    그런데 우리 자리는 <세로로 쌓이는 목록>이고 국기 오른쪽에 이름이 온다.
    높이를 맞추면 폭이 비율대로 벌어진다.
        캐나다 2:1  → 폭 1.56       ← 「심각하게 넓다」
        프랑스 3:2  → 폭 1.17
    33% 차이다. 두 줄이 위아래로 붙어 있으니 그 차이가 그대로 보인다.

    폭을 맞추면 이름 줄이 가지런해지고, 높이 차이는 가운데 정렬이 삼킨다.
        캐나다 → 폭 100% · 높이 50%
        프랑스 → 폭 100% · 높이 67%
    ★ 목록에서는 <세로줄이 맞는 것>이 <국기 크기가 같은 것>보다 중요하다.

  ⚠ 네팔은 직사각형이 아니다(삼각 두 개). 세로가 더 길어 폭을 맞추면 칸을 넘치므로
    max-height 로 되잡는다 — 그때만 폭이 좁아진다. 어색해 보여도 그 나라 국기의 모양이다.

  ⚠ 바탕 동그라미를 지운다. 국기는 제 바탕이 꽉 찬 그림이라 뒤판이 비어져 나온다.
  ⚠ 흰 띠가 있는 국기(일본·폴란드)가 어두운 판에 녹지 않게 옅은 외곽 빛을 둔다.
*/
:is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark).is-flag{
  width:auto;
  aspect-ratio:1.5;
  background:none;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
}
.is-flag{ display:flex; align-items:center; justify-content:center; }
.em-flag{
  /*
    ★★ 국기는 <모두 같은 네모>로 채운다 (레드 2026-09-25 「국기 크기좀 맞출수있나 일괄적으로」).

      전에는 contain 이라 폭만 맞고 높이가 국기 비율대로 흘렀다. 실측(39x26 칸):
          베트남·중국 120x80 → 39x26      바레인 133x80 → 39x23
          우즈벡·쿠웨이트 160x80 → 39x20   카타르 204x80 → 39x15
      한 줄에 15 와 26 이 나란히 서니 <국기마다 크기가 다른> 것으로 보였다.

    ⚠ 이것은 2026-09-19 의 결정(「세로줄이 맞는 것이 크기가 같은 것보다 중요하다」)을
      <뒤집은> 것이다. 레드가 화면을 보고 다시 정했다. cover 라 가로로 넓은 국기는
      좌우가 조금 잘린다 — 카타르·쿠웨이트처럼 무늬가 한쪽에 몰린 국기도
      가운데를 기준으로 잘라서 그 무늬가 남는다.

    ⚠ 세로가 더 긴 국기(네팔)는 위아래가 잘린다. 칸을 넘치지는 않는다.
  */
  width:100%; height:100%;
  object-fit:cover;
  border-radius:2px;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.45));
}

/* ---- 마켓 세 줄 --------------------------------------------------------
   가로로 늘어놓지 않는다. 한 줄에 하나씩 세로로 쌓는다.
     1x2      [홈][무][원정]
     핸디캡 -1.5  [홈][원정]
     언더오버 2.5 [오버][언더]
   선택지가 둘이든 셋이든 **칸 끝이 세로로 맞도록** 여섯 칸을 나눠 쓴다.
   ------------------------------------------------------------------------ */
.sb-mkts{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.sb-mkt{ display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:10px; }
.sb-mkt__head{
  display:flex; align-items:baseline; gap:5px;
  font-size:var(--fs-sm); font-weight:800; color:var(--text-5); white-space:nowrap;
}
.sb-mkt__head b{ font-weight:900; color:var(--text-3); }
.sb-mkt__picks{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; }
.sb-mkt__picks[data-n="3"] > *{ grid-column:span 2; }
.sb-mkt__picks[data-n="2"] > *{ grid-column:span 3; }
.sb-pick{
  height:42px; border-radius:var(--r-chip);
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 10px;
  background:var(--surface-2); color:var(--text);
  transition:background var(--t-bg), color var(--t-color);
}
/*
    선택지 이름 — 1·2 자리에 <팀 이름>이 온다 (레드 2026-09-23
    「프리매치 리스트랑 배당 리스트는 안 바뀐 듯」).

    ★ 긴 이름은 <자르지 않고 끝을 흐린다>. 「…」으로 자르면 「인천 유나이…」와
      「인천 유나이티드FC」가 같은 글자로 보여 어느 쪽인지 못 가린다.
      인플레이 배당판(.ex-lv-pick-name)과 같은 처리다.

    ⚠⚠ flex:1 · min-width:0 · 마스크는 <한 벌>이다.
      · min-width:0 이 없으면 flex 칸이 「내용만큼」이라 긴 이름이 배당 숫자를 밀어낸다.
      · flex:1 이 없으면 칸이 글자 폭에 딱 맞아, 짧은 이름도 끝 글자가 지워진다.

    ⚠⚠ text-align:left 도 <한 벌>이다. 이 칸의 부모는 <button> 이고,
      브라우저 기본이 text-align:center 다. 전에는 칸이 글자 폭이라 가운데가 곧
      왼쪽이어서 안 드러났는데, flex:1 로 늘리는 순간 이름이 <칸 가운데>로 갔다.
      (레드 2026-09-23 「정렬이 깨졌다 / betname 은 왼쪽 정렬인데」)
*/
.sb-pick span{
  font-size:var(--fs-sm); font-weight:700; color:var(--text-5);
  overflow:hidden; white-space:nowrap;
  flex:1 1 auto; min-width:0; text-align:left;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%);
}
.sb-pick b{ flex:none; font-size:var(--fs-base); font-weight:900; font-variant-numeric:tabular-nums; }
.sb-pick:hover{ background:var(--surface-3); }
/* 고른 것은 노랗게 — 슬립에 담겼다는 뜻이다 */
.sb-pick.is-on{ background:var(--cta); color:var(--text-on-cta); }
.sb-pick.is-on span{ color:rgba(0,0,0,.6); }
/* ★ 선택된(밝은) 단추의 이름 글자 — 하이라이트(.sb-hl) · 목록(.sb-mkt__picks) 규칙이 이 줄보다 <뒤에> 있어 흰 글자가 이겼다.
     밝은 바탕에 흰 글자라 「홈」 · 「원정」이 안 보였다 (레드 2026-10-02 「하일라이팅 글자가 흰색이라 안 보이고」). 한 단계 더 좁혀 이기게 한다 */
.sb-hl .sb-pick.is-on > span, .sb-mkt__picks .sb-pick.is-on span{ color:rgba(0,0,0,.6); }

/*
  ★★ 배당 변동 화살표 — 프리매치 (레드 2026-09-19
     「오르면 화살표파랑색 위로 / 내리면 화살표 빨간색 아래로」).

    프리매치는 1분마다 배당을 다시 받는다(bet/prematchOdds.ts). 바뀐 칸에만
    tr-up · tr-down 이 붙는다 — 인플레이와 <같은 이름>이라 규칙도 같이 읽힌다.

  ⚠⚠ 자리를 <미리 비워 둔다.> 화살표가 뜰 때 자리를 만들면 배당 숫자가 옆으로 밀려
    회원이 누르려던 자리에 다른 것이 온다. 빈 칸을 늘 두고 글자만 채운다.
  ⚠ 색만으로 가르지 않는다 — 모양(▲▼)과 색을 함께 쓴다.
*/
.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;
}
.sb-pick.tr-up   b, .mt-pick.tr-up   b{ color:var(--ex-odds-up, #4EC3F7); }
.sb-pick.tr-down b, .mt-pick.tr-down b{ color:var(--ex-odds-down, #ff3f6c); }
.sb-pick.tr-up   b::after, .mt-pick.tr-up   b::after{ content:'▲'; }
.sb-pick.tr-down b::after, .mt-pick.tr-down b::after{ content:'▼'; }

/*
  ⚠ 담은 칸(is-on)은 바탕이 노랗다. 그 위에 파랑·빨강 글자를 얹으면 안 읽힌다 —
    담은 것이 무엇인지가 변동보다 먼저다. 화살표는 남기고 색만 되돌린다.
*/
.sb-pick.is-on b, .mt-pick.is-on b{ color:var(--text-on-cta); }

/* 배당이 바뀐 순간을 한 번 알린다. 프리매치는 1분에 한 번이라 짧게 스친다 */
@keyframes sbOddsFlash{
  0%,25%{ background:var(--surface-3); }
  100%  { background:var(--surface-2); }
}
.sb-pick.tr-up:not(.is-on), .sb-pick.tr-down:not(.is-on),
.mt-pick.tr-up:not(.is-on), .mt-pick.tr-down:not(.is-on){
  animation:sbOddsFlash 1.8s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .sb-pick.tr-up, .sb-pick.tr-down, .mt-pick.tr-up, .mt-pick.tr-down{ animation:none; }
}

.sb-more{
  flex:none; height:42px; padding:0 12px; border-radius:var(--r-chip);
  display:inline-flex; align-items:center;
  background:var(--surface-2); color:var(--text-3);
  font-size:var(--fs-base); font-weight:900;
  transition:background var(--t-bg), color var(--t-color);
}
.sb-more:hover{ background:var(--surface-3); color:var(--text); }
/* 좁은 화면에서는 마켓 두 줄이 접히므로 `+N` 의 N 도 그만큼 커진다 */
.sb-more__narrow{ display:none; }

/*
   ★ 그 폭에서 <남은 게 0 이면> 단추째 숨긴다 (레드 2026-09-20 「+0 표기안해도돼」).

     넓을 때와 좁을 때 남은 수가 다르다. 세 마켓이 다 열린 경기는 넓은 화면에서
     더 볼 것이 없고(+0) 좁은 화면에서는 둘이 접혀 있다(+2). 단추를 아예 안 그리면
     폰에서 접힌 마켓을 열 길이 사라지므로, <그리되 그 폭에서만 감춘다.>

   ⚠ 여기는 넓은 화면 규칙이다. 좁은 화면 몫은 아래 미디어쿼리(≤1024)에 있다.
*/
.sb-more--no-wide{ display:none; }


/* ==========================================================================
   접이식 배당판 — +N 을 누르면 경기 줄 <바로 아래>에 펼쳐진다
   (레드 2026-09-11 「그걸 옆에 숫자 누르면 리스트 하단에 나오게, 배당판만」)

   ★ .sb-more 는 이제 <단추>다. 전에는 상세로 가는 링크였다 —
     단추와 링크는 기본 여백·글꼴·테두리가 달라 아래 셋을 되돌려 놔야
     전달본과 같은 모양이 된다.
   ========================================================================== */
.sb-more{ border:0; cursor:pointer; font-family:inherit; }

/* 펼쳐진 동안은 눌린 것으로 보인다 — 어느 줄을 열었는지 눈으로 찾는다 */
.sb-more.is-open{ background:var(--primary); color:#fff; }

/* 열린 줄은 아래 상자와 <이어져 보이게> 밑 모서리를 편다 */
.sb-row.is-open{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

.sb-oddsbox{
  margin:-1px 0 8px;                     /* 경기 줄과 <붙인다> */
  padding:12px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 var(--r-card) var(--r-card);
}

/* 상세 화면의 마켓 묶음을 그대로 쓴다. 여기서는 좀 더 촘촘하게 */
.sb-oddsbox .mt-mkts{ display:flex; flex-direction:column; gap:8px; }
.sb-oddsbox .mt-mkt__head{ padding:8px 10px; }

.sb-oddsbox__msg{
  padding:20px; text-align:center;
  font-size:var(--fs-sm); color:var(--text-5);
}

@media (max-width:768px){
  .sb-oddsbox{ padding:8px; }
}
.sb-empty{ padding:48px; text-align:center; font-size:var(--fs-md); color:var(--text-5); }

/* ==========================================================================
   베팅 슬립 — 싱글/조합/시스템 탭이 없다.
   하나 고르면 싱글, 둘 이상이면 조합. 화면이 알아서 말해 준다.
   ========================================================================== */
.slip{
  position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:50;
  width:300px; max-width:calc(100vw - var(--gutter) * 2);
  border-radius:var(--r); overflow:hidden;
  background:var(--surface-1); border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.slip[hidden]{ display:none; }

/* 접힌 머리 — 노란 바 하나. 두툼할 이유가 없다. */
.slip__head{
  display:flex; align-items:center; gap:8px; width:100%;
  height:44px; padding:0 14px;
  background:var(--cta); color:var(--text-on-cta);
  font-size:var(--fs-base); font-weight:900;
}
.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(--cta);
  font-size:var(--fs-sm); font-weight:900;
  /* 숫자를 원 안 정중앙에 — .badge-count 의 같은 주석 참고 */
  line-height:1; font-variant-numeric:tabular-nums;
}
.slip__head svg{ margin-left:auto; width:18px; height:18px; transition:transform var(--t-bg); }
/* 담긴 것이 없을 때의 「닫기」 — 화살표가 있던 자리다 */
.slip__close{
  margin-left:auto;
  font-size:var(--fs-sm); font-weight:700; color:var(--text-4);
}
.slip.is-open .slip__head svg{ transform:rotate(180deg); }
.slip__body{ display:none; padding:10px; max-height:60vh; overflow-y:auto; }
.slip.is-open .slip__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }

/* 담은 픽 — 경기 이름 · 배당 · 빼기가 한 줄, 마켓 이름이 그 아래 */
.slip__picks{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
.slip__pick{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 8px; align-items:center;
  padding:8px 10px; border-radius:var(--r-chip); background:var(--bg);
}
.slip__pick b{
  grid-column:1; grid-row:1;
  font-size:var(--fs-xs); font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.slip__pick small{
  grid-column:1; grid-row:2; font-size:var(--fs-sm); color:var(--text-5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.slip__odds{
  grid-column:2; grid-row:1 / span 2; font-size:var(--fs-base); font-weight:900;
  color:var(--cta); font-variant-numeric:tabular-nums;
}
.slip__del{
  grid-column:3; grid-row:1 / span 2; width:22px; height:22px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--surface-2); color:var(--text-4);
}
.slip__del:hover{ background:var(--tag-casino); color:#fff; }
.slip__del svg{ width:12px; height:12px; }

/* 금액 — 라벨 · 보유액 · 입력칸 · 빠른 금액 단추 */
.slip__amt{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.slip__amt__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.slip__amt__top span{ font-size:var(--fs-sm); font-weight:800; color:var(--text-4); }
.slip__amt__top em{ font-style:normal; font-size:var(--fs-sm); color:var(--text-5); }
.slip__amount{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  border-radius:var(--r-chip); background:var(--bg); border:1px solid var(--line);
  transition:border-color var(--t-color);
}
.slip__amount:focus-within{ border-color:var(--cta); }
.slip__amount b{ font-size:var(--fs-base); font-weight:900; color:var(--text-4); }
.slip__amount input{
  flex:1; min-width:0; border:0; background:transparent; text-align:right;
  font-family:var(--font); font-size:var(--fs-md); font-weight:900; color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* ⚠ 칸 수를 <박지 않는다>. 2026-09-18 에 빠른금액이 셋→다섯(+최대 = 여섯)이 되면서
     4칸 격자에 여섯이 들어가 줄이 어긋났다. auto-fit 이면 개수가 바뀌어도 따라간다.

   ★★ 그런데 지금은 여섯이라 <석 칸씩 두 줄>로 못 박는다 (레드 2026-09-20
     「2줄이긴한데 좀 허하다 2번쨰줄이」). auto-fit 은 폭이 되는 만큼 채우느라
     첫 줄에 다섯을 몰고 「최대」만 혼자 둘째 줄에 남겼다.
   ⚠ 「+」를 떼면서 글자가 짧아져 auto-fit 이 더 많이 밀어 넣게 된 것이다.
     단추 개수가 또 바뀌면 이 값도 함께 본다 — 여섯일 때 3×2 가 고르다. */
.slip__quick{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; }
.slip__quick button{
  height:30px; border-radius:var(--r-chip); background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-sm); font-weight:900; white-space:nowrap;
  transition:background var(--t-bg), color var(--t-color);
}
.slip__quick button:hover{ background:var(--surface-3); color:var(--text); }
.slip__quick [data-max]{ background:var(--surface-3); }
.slip__quick [data-max]:hover{ background:var(--cta); color:var(--text-on-cta); }

/* 계산기 — 베팅금 · 총 배당 · 예상 당첨금 */
.slip__calc{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:center;
  padding:10px 12px; border-radius:var(--r-chip); background:var(--bg);
}
.slip__calc span{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text-4); }
.slip__calc b{ font-size:var(--fs-base); font-weight:900; text-align:right; font-variant-numeric:tabular-nums; }
.slip__calc b.is-win{ font-size:var(--fs-md); color:var(--success); }

/* 다폴더 자동 보너스 줄 — 위 총 배당에 이미 먹인 값이라, <얼마가 얹혔는지>만 알린다.
   회사가 얹어 준 것이라 당첨금과 같은 성공 색을 쓰되 한 단계 여리게 둔다. */
.slip__calc span.slip__bonus{ color:var(--success); }
.slip__calc b.slip__bonus{ color:var(--success); }

/*
   ★ 문턱에 걸려 <못 받는> 보너스 줄 (레드 2026-09-20 시트 44행).

     ⚠ 초록을 그대로 두면 안 된다. 색이 글자보다 빨리 읽혀서, 「폴더마다 1.35
       이상이어야 받습니다」 옆에 초록이 붙으면 훑는 사람은 <받는 줄>로 읽는다.
       받지 못한다는 말이니 흐린 색으로 둔다.
*/
.slip__calc span.slip__bonus.is-off,
.slip__calc b.slip__bonus.is-off{ color:var(--text-3); font-weight:600; }

/*
   ★ 설명 줄 — <한 줄을 통째로> 쓴다. (레드 2026-09-20 「배팅카드 화면깨지는 부분」)

   ⚠⚠ 여기 들어갈 글을 오른쪽 값 칸(b)에 넣으면 <화면이 깨진다.>
     .slip__calc 은 2열 격자이고 오른쪽이 auto — <내용 크기로 열 너비가 정해진다.>
     긴 문장 하나가 그 열을 넓히면 왼쪽 라벨 칸이 minmax(0,1fr) 이라 0 까지 눌리고,
     「베팅금」이 「베팅 / 금」으로, 「조합 3폴더」가 한 글자씩 세로로 쪼개졌다.
     <값 칸에는 숫자만> 넣는다.
*/
.slip__calc .slip__note{
  grid-column:1 / -1;
  margin:0;
  font-size:var(--fs-sm);
  line-height:1.45;
}
.slip__kind{
  padding:2px 8px; border-radius:var(--r-full);
  background:var(--surface-2); font-style:normal;
  font-size:var(--fs-sm); font-weight:900; color:var(--text-2);
}
.slip__empty{ padding:18px; text-align:center; font-size:var(--fs-sm); color:var(--text-5); }

/* ==========================================================================
   좁은 화면
   PC 는 `팀 | 마켓 | +N` 세 칸이지만, 폭이 좁아지면 그대로 둘 수 없다.
   팀과 `+N` 을 윗줄에 두고 마켓을 아랫줄 전체 폭으로 내린다.
   ========================================================================== */
@media (max-width:1024px){
  /* ⚠ 시안은 모바일에서 인기 리그 배너를 <제목까지> 뺀다 (레드 2026-09-26).
       좁은 화면에서 첫 화면을 다 먹어 정작 경기 목록이 안 보인다.
     ⚠ 전에는 옆으로 밀어 보게 두었는데, 그 규칙을 <여기서> 끈다 —
       뒤에 숨김 규칙을 더 붙이는 방식은 순서를 다투다 또 샌다. */
  .sb-banners{
    display:none; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .sb-banners::-webkit-scrollbar{ display:none; }
  .sb-banner{ flex:none; width:88%; scroll-snap-align:start; min-height:132px; }

  /* ★ 카드 키를 줄인다 (레드 2026-09-15 「여백좀줄여서 카트높이좀줄여달래」).
       폰에서는 카드 하나가 화면의 절반을 먹어 <한 경기 보고 또 밀어야> 했다.
       글자·동그라미 크기는 그대로 두고 <빈 자리만> 걷는다 —
       위아래 여백 14→10, 팀 줄 여백 14→8, 마켓 이름 줄 간격 6→4. */
  .sb-hl{ width:86%; min-width:0; padding:10px 12px; }
  .sb-hl__teams{ margin:8px 0; }
  .sb-hl .sb-mkt__picks{ margin-top:4px; }
  .sb-hl__mkt{ font-size:var(--fs-xs); }

  /* ★★ 한 칸으로 쌓는다 (레드 2026-09-15 「위아래 여백 최소화 · 팀이름 … 처리」).

       두 칸(go | more)으로 두니 팀 이름 칸이 <제 글자 길이만큼> 버티고,
       그 옆에 배당판이 겹쳐 「도호쿠 라쿠텐 골든이글스」가 숫자 밑으로
       파고들었다. 한 칸이면 겹칠 자리가 아예 없다.

     ⚠ minmax(0,1fr) 이 아니라 <1fr 하나>다. 칸이 하나뿐이라 min 을 0 으로
       눌러 둘 필요가 없고, 안쪽 .sb-team__name 의 말줄임이 그때 비로소 걸린다. */
  .sb-row{
    grid-template-columns:1fr;
    grid-template-areas:"go" "mkts";
    gap:8px; align-items:start;
    padding:10px 12px;
  }
  .sb-row__go{ grid-area:go; min-width:0; }
  .sb-mkts{ grid-area:mkts; }
  /* +N 은 <시각 줄 오른쪽 끝>에 붙는다 — 제 줄을 따로 먹지 않는다 */
  .sb-more{
    position:absolute; top:10px; right:12px;
    height:26px; padding:0 8px; font-size:var(--fs-xs);
    /*
      ⚠⚠ z-index 를 <반드시> 준다 (2026-09-17).

        여기서 +N 은 절대배치라 .sb-row__go <위에 겹친다>. 그런데 위쪽에
        `.sb-row[data-sport] > .sb-row__go{ position:relative; z-index:1 }` 이 있어
        겹치는 자리에서 <경기 줄이 단추보다 위에> 깔린다 — 손가락이 +N 을 눌러도
        닿는 것은 경기 줄이고, 단추의 눌림 표시(.is-open)도 그래서 안 먹는다.

        지금은 둘 다 toggle 을 불러 결과가 같아 보이지만 그것은 <우연>이다.
        한쪽 동작이 달라지는 날 조용히 어긋난다 — 누르는 자리가 단추여야 한다.
    */
    z-index:2;
  }
  .sb-row{ position:relative; }
  .sb-mkt{ grid-template-columns:70px minmax(0,1fr); gap:8px; }

  /* 팀 줄 — 배지와 점수가 자리를 먼저 가져가고 이름이 남는 만큼 쓴다 */
  .sb-team{ gap:8px; font-size:var(--fs-sm); }
  .sb-team__mark{ flex:none; }

  .slip{
    left:0; right:0; bottom:var(--tabbar-h); width:auto; max-width:none;
    border-radius:var(--r) var(--r) 0 0; border-left:0; border-right:0; border-bottom:0;
  }
  .slip__head{ height:48px; }
  .slip__body{ max-height:52vh; }
  .slip .btn--cta{ height:46px; }
}

@media (max-width:640px){
  /* 종목 줄 — 손가락으로 밀어 보는 줄이라 칸을 조금 좁힌다.
     ★★ <촘촘하게> (레드 2026-09-15). 칸마다 위아래 18px 씩 비어 있어
        종목 줄 하나가 화면의 큰 덩이를 먹었다 — 그 위아래 여백까지 합치면
        배너와 경기 목록 사이가 통째로 벌어져 보인다.
        판과 그림 크기는 그대로 두고 <빈 자리만> 걷는다. */
  .sb-sports{ gap:2px; }
  /* ⚠ 이름은 <한 줄>이다. 「아이스 하키」가 두 줄이 되면 그 줄만 키가 커져
       종목 줄 전체가 덩달아 높아진다. 넘치면 …으로 자른다. */
  .sb-sport{ width:64px; padding:4px 2px 2px; gap:4px; font-size:var(--fs-xs); }
  .sb-sport > span:last-child{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sb-sport__ico{ width:46px; height:46px; }
  .sb-sport__ico img,
  .sb-sport__ico svg{ width:39px; height:39px; }

  /* ★ 시안대로 — 탭 줄 <아래 전체 폭> 검색창 (레드 2026-09-26 「시안대로하자」).
     ⚠ 전에는 동그란 단추로 접어 두고 누르면 펼쳐지게 했다 (레드 2026-09-15
       「검색버튼 정가운데오기」). 시안은 접지 않는다 — 기준을 시안으로 옮겼다. */
  .sb-top{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:10px; }
  .sb-tabs{ flex:none; min-width:0; }
  .sb-search{ width:100%; min-width:0; margin-left:0; }

  /* 탭 줄은 위에 붙여 둔다 — 리그를 한참 내려도 종목을 바로 바꿀 수 있다 (루벳) */
  .sb-top{
    position:sticky; top:var(--header-h); z-index:20;
    margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter);
    background:var(--bg);
    /* ⚠ 아래 가로 선을 뺐다 — 시안에는 없다 (레드 2026-09-26) */
  }

  /* 경기 한 줄 — 루벳 모바일 그대로.
       왼쪽 : 시각 위, 두 팀 아래
       오른쪽: 마켓 이름 위, 배당 단추 아래
     쌓지 않고 좌우로 나눠야 한 화면에 경기가 여럿 들어온다. */
  /* ⚠⚠ 이 블록이 위(≤1024)의 <한 칸 쌓기>를 덮고 있었다 (2026-09-15).
       좌우로 나누면 팀 이름 칸이 1fr 이라 <제 글자 길이만큼> 버티고,
       배당판이 그 위로 겹쳐 「도호쿠 라쿠텐 골든이글스」가 숫자 밑으로 파고든다.
       ★ 폰에서는 <한 칸으로> 쌓는다. 겹칠 자리가 아예 없어지고
         그때 비로소 .sb-team__name 의 말줄임이 걸린다. */
  .sb-row{
    position:relative;
    grid-template-columns:1fr;
    grid-template-areas:"go" "mkts";
    gap:8px; align-items:start;
    padding:10px 12px;
  }
  /* `+N` 은 칸을 차지하지 않고 오른쪽 위 모서리에 얹는다. */
  .sb-more{
    position:absolute; top:10px; right:12px;
    height:24px; padding:0 8px; font-size:var(--fs-xs);
  }

  /* 마켓은 1x2 하나만 남긴다. 핸디캡·언더오버는 `+N` 안으로 들어간다.
     좁은 화면에 세 줄을 다 펴면 경기 하나가 화면 3분의 1을 먹는다. (루벳도 하나만 둔다) */
  .sb-mkt:not(:first-child){ display:none; }
  .sb-more__wide{ display:none; }
  .sb-more__narrow{ display:inline; }

  /*
     ★ 여기서는 판단이 <뒤집힌다> (레드 2026-09-20 「+0 표기안해도돼」).
       넓은 화면에서 0 이라고 숨겼던 단추도 좁은 화면에서는 보여야 한다 —
       접힌 마켓을 여는 유일한 길이기 때문이다. 반대로 좁은 화면 몫이 0 이면 숨긴다.
   */
  .sb-more--no-wide{ display:inline-flex; }
  .sb-more--no-narrow{ display:none; }

  /* 마켓 이름을 배당 위 가운데로 올린다. `+N` 과 같은 높이로 맞춘다. */
  .sb-mkt{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .sb-mkt__head{ justify-content:center; min-height:22px; align-items:center; }

  /* 팀 이름도 어절 단위로 끊는다 */
  /*
    모바일 경기 줄 — 글자를 12px 로 내리고 <한 줄>로 둔다
    (레드 2026-09-14 「폰트너무커서 11~12로 · 2줄로하지않고 … 처리」).

    ⚠ 예전에는 어절 단위로 <끊어 내렸다>(align-items:flex-start + keep-all).
      두 줄이 되면 줄 높이가 들쭉날쭉해 배당 칸과 어긋났다.
      이제 말줄임이라 가운데 맞춤으로 돌린다 — H·A 도 그래야 제자리에 선다.
  */
  .sb-team{ align-items:center; font-size:12px; gap:8px; }
  .sb-team__mark{ margin-top:0; width:22px; height:22px; font-size:11px; }
  .sb-row__teams{ word-break:normal; }
  .sb-team__ha{ min-width:15px; height:15px; font-size:10px; }
  /* 좁은 화면에서는 `진행 중` 을 떼고 분만 남긴다 — 뱃지가 시각 자리를 다 먹는다 */
  .sb-live{ padding:2px 7px; }
  .sb-live em{ display:none; }

  /* 칸이 좁으므로 이름과 배당을 위아래로 쌓는다 */
  .sb-pick{
    flex-direction:column; justify-content:center; gap:2px;
    height:56px; padding:0 4px;
  }
  .sb-pick b{ font-size:var(--fs-base); }

  .sb-hl__side i{ width:30px; height:30px; }
  .sb-hl__score b{ min-width:30px; height:30px; }
}

/* ==========================================================================
   경기 상세 — 경기를 누르면 오는 화면
   루벳의 `전문가 팁` 은 두지 않는다.
   ========================================================================== */

/* ---- 위쪽 경기 줄 — 같은 종목의 다른 경기로 바로 건너뛴다 ----------------
   글자만 늘어놓으면 무엇인지 읽히지 않는다. 주요 경기 카드와 같은 방식으로
   리그 · 시각 · 팀 마크 · 점수를 담은 작은 카드로 만든다.
   ------------------------------------------------------------------------ */
.mt-strip{ display:flex; gap:8px; }
.mt-strip__item{
  flex:none; width:236px; padding:12px 14px; border-radius:var(--r);
  display:grid; gap:8px;
  background:var(--surface-1); border:1px solid var(--line);
  transition:border-color var(--t-color), background var(--t-bg);
}
.mt-strip__item:hover{ border-color:var(--primary); }
.mt-strip__item.is-on{
  background:color-mix(in oklab, var(--primary) 22%, var(--surface-1));
  border-color:var(--primary);
}
.mt-strip__top{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); color:var(--text-5); min-width:0;
}
.mt-strip__top svg{ flex:none; width:14px; height:14px; }
.mt-strip__top b{
  flex:1; min-width:0; font-weight:800; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mt-strip__when{ flex:none; font-size:var(--fs-sm); font-weight:800; color:var(--text-4); }
.mt-strip__item.is-on .mt-strip__when{ color:var(--text-2); }
.mt-strip__row{
  display:flex; align-items:center; gap:8px; min-width:0;
  font-size:var(--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(--fs-sm); font-weight:900; color:var(--text-2);
}
.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(--cta); }

/* ★★ 띠 카드에 <종목 배경 사진> (레드 2026-09-13 「배너랑 … 배경카드넣자」)

   주요 경기 카드(.sb-hl[data-sport])와 <같은 열쇠 · 같은 그림 · 같은 어둠막>이다.
   한 사이트 안에서 같은 뜻(이 경기는 야구다)을 두 가지 그림으로 말하지 않는다.

   ⚠ 어둠막을 <사진 위에> 깐다. 사진만 깔면 흰 유니폼이나 조명 위에서
     팀 이름이 사라진다 — 아래에서 글자 그림자까지 함께 준다.
   ⚠ [data-sport] 가 붙은 카드에만 건다. 열쇠가 없으면 원래의 판을 그대로 쓴다. */
.mt-strip__item[data-sport]{
  background:
    linear-gradient(180deg, rgba(5,8,15,.30) 0%, rgba(5,8,15,.50) 55%, rgba(5,8,15,.68) 100%),
    var(--hl-art, none) center bottom / cover no-repeat,
    var(--surface-1);
}
.mt-strip__item[data-sport="soccer"]    { --hl-art:url("/assets/design/img/sports-bg/soccer-20260913.jpg"); }
.mt-strip__item[data-sport="baseball"]  { --hl-art:url("/assets/design/img/sports-bg/baseball-20260913.jpg"); }
.mt-strip__item[data-sport="basketball"]{ --hl-art:url("/assets/design/img/sports-bg/basketball-20260913.jpg"); }
.mt-strip__item[data-sport="volleyball"]{ --hl-art:url("/assets/design/img/sports-bg/volleyball-20260913.jpg"); }
.mt-strip__item[data-sport="ice-hockey"]{ --hl-art:url("/assets/design/img/sports-bg/ice-hockey-20260913.jpg"); }
.mt-strip__item[data-sport="tennis"]            { --hl-art:url("/assets/design/img/sports-bg/tennis-20260919f.jpg"); }
.mt-strip__item[data-sport="handball"]          { --hl-art:url("/assets/design/img/sports-bg/handball-20260919f.jpg"); }
.mt-strip__item[data-sport="mma-boxing"]        { --hl-art:url("/assets/design/img/sports-bg/mma-boxing-20260919f.jpg"); }
.mt-strip__item[data-sport="e-games"]           { --hl-art:url("/assets/design/img/sports-bg/e-games-20260919f.jpg"); }
.mt-strip__item[data-sport="american-football"] { --hl-art:url("/assets/design/img/sports-bg/american-football-20260919f.jpg"); }
.mt-strip__item[data-sport] .mt-strip__top b,
.mt-strip__item[data-sport] .mt-strip__row span{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); }

/* ---- 경기 상세 판 짜기 --------------------------------------------------
   PC   : 왼쪽에 머리 · 탭 · 마켓, 오른쪽 한 줄로 트래커.
   좁은 화면: 트래커를 **경기 머리 바로 아래**로 올린다.
             점수와 순위는 베팅하기 전에 보는 것이라 마켓 아래에 있으면 아무도 안 본다.
   ------------------------------------------------------------------------ */
.mt-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 304px;
  grid-template-areas:"head track" "tabs track" "mkts track";
  /*
    ★★ 행 높이를 <왼쪽 내용>이 정하게 못박는다 (레드 2026-09-19 「배팅가능누르면 화면이 이렇게된다」).

      트래커(mt-track)가 세 행에 걸쳐 있다. 행 높이를 안 정해 두면 <그 높이가 세 행에
      나뉘어> 왼쪽 것들이 아래로 밀린다. 실측:
          행 높이   534 / 398 / 464   ← 트래커 1,429px 이 나뉜 값
          실제 내용 176 /  40 / 106
          → 마켓 줄이 1,645px 지점까지 내려가 <화면이 텅 빈 것처럼> 보였다

      마켓이 많을 때는 왼쪽이 길어 안 보이다가, 「베팅 가능한 마켓만」으로 두 개만
      남자 드러났다. 회원 눈에는 화면이 고장난 것으로 읽힌다.

    ⚠ 마지막을 1fr 로 두는 것이 핵심이다. auto 로 두면 남는 높이가 다시 세 행에 나뉜다.
      1fr 이 <남은 것을 통째로> 가져가므로 앞 두 행이 제 높이를 지킨다.
    ⚠ align-items:start 가 함께 있어야 한다. 그것이 없으면 늘어난 mkts 행을
      내용이 따라 늘어난다.
  */
  grid-template-rows:auto auto 1fr;
  gap:var(--gap-card); align-items:start; align-content:start;
}
.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:8px; }

/* ---- 경기 머리 ---------------------------------------------------------- */
.mt-head{ padding:20px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); }

/* ★★ 경기 머리(홈 vs 원정)에 <종목 배경 사진> (레드 2026-09-13)

   이 칸이 그 경기의 얼굴이다. 그런데 판이 통째로 어두워, 어느 종목을 보고 있는지
   글자를 읽어야만 알 수 있었다. 사진을 깔면 화면을 열자마자 알아본다.

   ⚠ 띠보다 어둠막을 <조금 더 진하게> 준다. 여기에는 점수 · 팀 이름 · 시각이
     한꺼번에 올라앉아 읽을 글자가 가장 많다.
   ⚠ 사진은 아래(center bottom)를 기준으로 자른다 — 구장 사진은 위가 하늘이라
     가운데를 잡으면 잔디가 안 나오고 하늘만 깔린다. */
.mt-head[data-sport]{
  background:
    linear-gradient(180deg, rgba(5,8,15,.50) 0%, rgba(5,8,15,.68) 55%, rgba(5,8,15,.82) 100%),
    var(--hl-art, none) center bottom / cover no-repeat,
    var(--surface-1);
}
.mt-head[data-sport="soccer"]    { --hl-art:url("/assets/design/img/sports-bg/soccer-20260913.jpg"); }
.mt-head[data-sport="baseball"]  { --hl-art:url("/assets/design/img/sports-bg/baseball-20260913.jpg"); }
.mt-head[data-sport="basketball"]{ --hl-art:url("/assets/design/img/sports-bg/basketball-20260913.jpg"); }
.mt-head[data-sport="volleyball"]{ --hl-art:url("/assets/design/img/sports-bg/volleyball-20260913.jpg"); }
.mt-head[data-sport="ice-hockey"]{ --hl-art:url("/assets/design/img/sports-bg/ice-hockey-20260913.jpg"); }
.mt-head[data-sport="tennis"]            { --hl-art:url("/assets/design/img/sports-bg/tennis-20260919f.jpg"); }
.mt-head[data-sport="handball"]          { --hl-art:url("/assets/design/img/sports-bg/handball-20260919f.jpg"); }
.mt-head[data-sport="mma-boxing"]        { --hl-art:url("/assets/design/img/sports-bg/mma-boxing-20260919f.jpg"); }
.mt-head[data-sport="e-games"]           { --hl-art:url("/assets/design/img/sports-bg/e-games-20260919f.jpg"); }
.mt-head[data-sport="american-football"] { --hl-art:url("/assets/design/img/sports-bg/american-football-20260919f.jpg"); }
.mt-head[data-sport] .mt-head__where,
.mt-head[data-sport] .mt-side__name,
.mt-head[data-sport] .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(--fs-base); color:var(--text-5);
}
.mt-head__where svg{ width:18px; height:18px; }
.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{
  /* ★ 56 → 64px (레드 2026-09-16) */
  width:64px; height:64px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--surface-3);
  font-size:var(--fs-xl); font-weight:900;
}
/* 한글은 기본값이면 낱글자 단위로 끊긴다. `크리스탈 팰리 / 스` 를 막는다. */
.mt-side__name{ font-size:var(--fs-md); font-weight:900; word-break:keep-all; }
.mt-when{ text-align:center; }
.mt-when b{ display:block; font-size:var(--fs-2xl); font-weight:900; font-variant-numeric:tabular-nums; }
.mt-when span{ font-size:var(--fs-base); color:var(--text-5); }

/*
  ★ 테니스 현재 게임 점수 — 0 · 15 · 30 · 40 · AD (2026-09-19).

    위 큰 숫자가 <세트> 점수고 이것은 <지금 이 게임>의 점수다. 두 값이 세로로 서므로
    크기와 색으로 갈라야 한다 — 같은 모양이면 어느 쪽이 세트인지 읽어야 안다.

  ⚠ tabular-nums 를 건다. 0 → 15 → 40 으로 바뀔 때마다 폭이 달라지면
    점수판이 좌우로 흔들린다.
*/
.mt-when__pts{
  display:block; margin-top:2px;
  font-size:var(--fs-base); font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#4EC3F7;
}

/* ---- 마켓 탭 ------------------------------------------------------------ */
.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(--text-3);
  font-size:var(--fs-base); font-weight:800;
  transition:background var(--t-bg), color var(--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(--fs-sm); font-weight:900; color:var(--text-5); }
.mt-tab.is-on i{ color:var(--cta); }

/* ---- 마켓 묶음 (접힘) --------------------------------------------------- */
.mt-mkt{ border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); overflow:hidden; }
.mt-mkt__head{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:14px 16px; text-align:left;
}
.mt-mkt__name{ font-size:var(--fs-md); font-weight:900; }
.mt-mkt__badge{
  padding:3px 8px; border-radius:var(--r-chip);
  background:var(--cta); color:var(--text-on-cta);
  font-size:var(--fs-sm); font-weight:900;
}
.mt-mkt__caret{ margin-left:auto; width:20px; height:20px; color:var(--text-4); transition:transform var(--t-bg); }
.mt-mkt.is-folded .mt-mkt__caret{ transform:rotate(180deg); }
.mt-mkt.is-folded .mt-mkt__body{ display:none; }
.mt-mkt__body{ display:grid; gap:6px; padding:0 16px 16px; }

/* 「+N」 — 배당이 많은 마켓에서 남은 수를 알리고 더 편다 (2026-09-20).
   ⚠ 마켓이 접혀 있으면 이것도 감춘다. 안 그러면 닫힌 마켓 밑에 버튼만 떠 있다. */
.mt-mkt.is-folded .mt-mkt__more{ display:none; }
.mt-mkt__more{
  display:block; width:calc(100% - 32px); margin:0 16px 16px;
  min-height:40px; padding:0 14px; border:1px dashed var(--line);
  border-radius:var(--r-chip); background:transparent; color:var(--text-3);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  transition:background var(--t-bg), color var(--t-bg);
}
.mt-mkt__more:hover{ background:var(--surface-2); color:var(--text); }
.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-pick{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:48px; padding:0 14px; border-radius:var(--r-chip);
  background:var(--surface-2); color:var(--text);
  transition:background var(--t-bg), color var(--t-color);
}
/* 경기 상세의 배당판 — 위 .sb-pick span 과 같은 규칙이다(왼쪽 정렬까지) */
.mt-pick span{
  font-size:var(--fs-base); font-weight:700;
  overflow:hidden; white-space:nowrap;
  flex:1 1 auto; min-width:0; text-align:left;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%);
}
.mt-pick b{ flex:none; font-size:var(--fs-md); font-weight:900; font-variant-numeric:tabular-nums; }
.mt-pick:hover{ background:var(--surface-3); }
.mt-pick.is-on{ background:var(--cta); color:var(--text-on-cta); }

/* ---- 오른쪽 트래커 ------------------------------------------------------ */
.mt-track{ padding:16px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); }
.mt-track__title{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding-bottom:12px; font-size:var(--fs-base); font-weight:900; color:var(--text-3);
}
.mt-track__board{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
  padding:16px; border-radius:var(--r); background:var(--bg); text-align:center;
}
.mt-track__board b{ font-size:var(--fs-2xl); font-weight:900; font-variant-numeric:tabular-nums; }
.mt-track__board span{ display:block; font-size:var(--fs-sm); color:var(--text-4); }
/*
  트래커가 없는 경기의 안내 한 줄 (레드 2026-09-19 「나올때가있고 안나올때가있다」).

  ★ 종목에 따라 갈린다 — 야구·농구는 오고 테니스는 안 온다(LSports 번호가 없다).
    통계도 구간 점수도 없으면 「트래커」 제목 아래가 통째로 비어 고장으로 읽힌다.
  ⚠ 눈에 띄게 만들지 않는다. 이건 <오류가 아니라 없는 것>이라 조용히 알리면 된다.
*/
.mt-track__none{
  margin-top:10px; padding:14px 12px;
  border-radius:var(--r-chip); background:var(--bg);
  font-size:var(--fs-sm); color:var(--text-4); text-align:center;
}
.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(--r-chip); background:var(--bg);
  font-size:var(--fs-base); font-weight:800; text-align:center;
}
.mt-track__row em{ font-style:normal; font-size:var(--fs-sm); font-weight:700; color:var(--text-5); }

@media (max-width:1024px){
  .mt-layout{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "track" "tabs" "mkts"; }
}
@media (max-width:640px){
  /* ★★ 배당판을 <PC 와 같은 줄짜임>으로 되돌린다 (레드 2026-09-15
       「홈/드로우/어웨이 한줄 · 핸디캡·언오바 동일 기준점 한줄」).

       폰에서 한 칸씩 세로로 쌓고 있었다. 그러면
         · 승무패가 <석 줄>이 되어 홈·무·원정을 한눈에 못 견준다
         · 핸디캡·오버언더는 <같은 기준점의 짝>이 위아래로 갈려
           「오버 150.5 / 언더 150.5」가 서로 다른 줄의 값처럼 보인다
       배당판은 <견주는 판>이다. 짝을 갈라 놓으면 판이 아니게 된다.

     ⚠ 칸이 좁아지므로 안쪽을 줄인다 — 글자·높이·여백만 줄이고
       칸 수는 그대로 둔다(3은 3, 2는 2). */
  .mt-mkt__body{ gap:4px; padding:0 10px 12px; }
  .mt-pick{ min-height:42px; padding:0 8px; gap:4px; }
  .mt-pick span{ font-size:var(--fs-xs); }
  .mt-pick b{ font-size:var(--fs-sm); }
  .mt-head{ padding:16px; }
  .mt-head__main{ margin-top:10px; gap:8px; }
  .mt-side__mark{ width:52px; height:52px; font-size:var(--fs-lg); }
  .mt-side__name{ font-size:var(--fs-base); }
  .mt-when b{ font-size:var(--fs-xl); }
  .mt-strip__item{ width:210px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   배팅 티켓 창 (레드 2026-09-12 「모달 지금보다 좀 더 멋지게 · 지금너무 밋밋하네」
   「처음에 숫자만나오는데 · 하단에 배팅한거 · 처음부터 나오게」) — bet/BetSlip.tsx WaitDialog
     ① 상태  링(남은 초 · 사파이어) → 접수 초록 체크 / 실패 빨간 「!」
     ② 티켓  폴더 목록 · 절취선(양옆 반원 홈) · 합계 — 당첨금이 가장 크다
     ③ 단추  결과가 난 뒤에만
   옛 창(.ex-slipwait)은 exit.css(원본 토큰)라 whaley 색을 못 받았다. 이름을 새로 두고 토큰만 쓴다.
   ═══════════════════════════════════════════════════════════════════════ */
.bt-modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center; padding:16px;
  background:rgba(4,7,14,.74);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:bt-fade .18s ease-out;
}
.bt-card{
  position:relative; width:min(400px, 100%); max-height:calc(100dvh - 32px); overflow:auto;
  padding:28px 20px 20px; border-radius:20px;
  border:1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  background:
    radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--primary) 55%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, #101a2e 0%, var(--surface-1) 58%);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  animation:bt-rise .32s cubic-bezier(.2,.9,.3,1.15);
}
.bt-modal.is-ok .bt-card{
  border-color:color-mix(in srgb, var(--success) 50%, var(--line));
  background:
    radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--success) 26%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, #0f1c24 0%, var(--surface-1) 58%);
  animation:bt-flash .7s ease-out;
}
.bt-modal.is-fail .bt-card{
  border-color:color-mix(in srgb, var(--updown-down) 50%, var(--line));
  background:
    radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--updown-down) 22%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, #1a121c 0%, var(--surface-1) 58%);
}

/* ① 상태 */
.bt-status{ text-align:center; }
.bt-ring{ position:relative; width:84px; height:84px; margin:0 auto 14px; }
.bt-ring__svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.bt-ring__track{ fill:rgba(255,255,255,.03); stroke:var(--surface-3); stroke-width:4; }
.bt-ring__bar{
  fill:none; stroke:#6FA0FF; stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(78,147,255,.65));
  transition:stroke-dashoffset 1s linear, stroke .3s;
}
.is-ok .bt-ring__bar{ stroke:var(--success); filter:drop-shadow(0 0 8px rgba(63,217,138,.6)); transition:stroke-dashoffset .35s ease-out, stroke .3s; }
.is-fail .bt-ring__bar{ stroke:var(--updown-down); filter:drop-shadow(0 0 8px rgba(255,75,75,.5)); transition:stroke-dashoffset .35s ease-out, stroke .3s; }
.bt-ring__num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:32px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums;
  animation:bt-tick .35s ease-out;
}
.is-fail .bt-ring__num{ color:var(--updown-down); animation:bt-pop .35s ease-out; }
.bt-ring__icon{
  position:absolute; inset:0; margin:auto; width:40px; height:40px;
  fill:none; stroke:var(--success); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; animation:bt-draw .45s .12s ease-out forwards;
}
.bt-title{ margin:0; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:900; color:#fff; word-break:keep-all; text-wrap:balance; }
.bt-sub{ margin:4px 0 0; font-size:var(--fs-xs); line-height:18px; color:var(--text-4); word-break:keep-all; text-wrap:balance; }
.is-fail .bt-sub{ color:#FF9C9C; }

/* ② 티켓 */
.bt-ticket{
  position:relative; margin-top:20px; overflow:hidden;
  border-radius:14px; border:1px solid var(--line); background:var(--surface-2);
}
.bt-ticket__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0; padding:12px 16px 2px;
  font-size:var(--fs-sm); font-weight:800; letter-spacing:.06em; color:var(--text-4);
}
.bt-ticket__head em{
  font-style:normal; letter-spacing:0; padding:2px 9px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--primary) 40%, transparent); color:#D3E2FF;
}
.bt-picks{ list-style:none; margin:0; padding:6px 16px 14px; display:grid; max-height:38vh; overflow:auto; }
.bt-pick{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:end;
  padding:10px 0; border-top:1px solid rgba(255,255,255,.06);
}
.bt-pick:first-child{ border-top:0; padding-top:4px; }
.bt-pick__match{ grid-column:1 / -1; font-size:var(--fs-sm); color:var(--text-5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-pick__sel{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.bt-pick__sel em{ font-style:normal; font-size:var(--fs-sm); color:var(--text-4); }
.bt-pick__sel b{ font-size:var(--fs-base); font-weight:800; color:var(--text-2); word-break:keep-all; }
.bt-pick__sel b i{
  font-style:normal; margin-left:6px; padding:0 6px; border-radius:6px;
  background:var(--surface-3); font-size:var(--fs-sm); color:var(--text-3);
}
/* 배당 — 플래티넘 금속 칩(버튼 CTA 와 같은 결) */
.bt-pick__odds{
  min-width:58px; padding:6px 10px; border-radius:10px; text-align:center;
  background:linear-gradient(180deg, var(--cta-hi) 0%, var(--cta) 55%, var(--cta-lo) 100%);
  color:#0C1220; font-weight:900; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px -2px rgba(0,0,0,.5);
}
/* 절취선 — 점선과 양옆 반원 홈. 홈은 창 바탕색으로 칠해 티켓을 파낸 것처럼 보이게 */
.bt-cut{ position:relative; height:0; margin:0 16px; border-top:2px dashed #33466A; }
.bt-cut::before, .bt-cut::after{
  content:""; position:absolute; top:-10px; width:18px; height:18px; border-radius:50%;
  background:#0d1526; box-shadow:inset 0 0 0 1px var(--line);
}
.bt-cut::before{ left:-26px; }
.bt-cut::after{ right:-26px; }
.bt-sum{ margin:0; padding:14px 16px 16px; display:grid; gap:8px; }
.bt-sum > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.bt-sum dt{ margin:0; font-size:var(--fs-sm); color:var(--text-4); }
.bt-sum dd{ margin:0; font-size:var(--fs-base); font-weight:800; color:var(--text-2); font-variant-numeric:tabular-nums; }
.bt-sum__win{ margin-top:4px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); }
.bt-sum__win dt{ font-weight:800; color:var(--text-3); }
.bt-sum__win dd{ font-size:var(--fs-xl); line-height:var(--lh-xl); font-weight:900; color:var(--success); text-shadow:0 0 18px rgba(63,217,138,.35); }

/* ③ 단추 */
.bt-actions{ display:flex; gap:10px; margin-top:18px; animation:bt-fade .25s ease-out; }
.bt-actions > *{ flex:1; justify-content:center; }
.bt-ghost{ background:transparent; border:1px solid var(--line); color:var(--text-2); }
.bt-ghost:hover{ border-color:color-mix(in srgb, var(--primary) 70%, var(--line)); color:#fff; }

@keyframes bt-fade{ from{ opacity:0; } }
@keyframes bt-rise{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
@keyframes bt-tick{ from{ transform:scale(1.25); opacity:.4; } }
@keyframes bt-pop{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.15); } }
@keyframes bt-draw{ to{ stroke-dashoffset:0; } }
@keyframes bt-flash{
  0%{ box-shadow:0 0 0 0 rgba(63,217,138,.45), 0 30px 80px -24px rgba(0,0,0,.75); }
  100%{ box-shadow:0 0 0 18px rgba(63,217,138,0), 0 30px 80px -24px rgba(0,0,0,.75); }
}
@media (prefers-reduced-motion: reduce){
  .bt-modal, .bt-card, .bt-ring__num, .bt-actions{ animation:none; }
  .bt-ring__bar{ transition:none; }
  .bt-ring__icon{ animation:none; stroke-dashoffset:0; }
}
@media (max-width:480px){
  .bt-card{ padding:24px 16px 16px; }
  .bt-ticket__head, .bt-sum, .bt-picks{ padding-left:14px; padding-right:14px; }
  .bt-cut{ margin:0 14px; }
  .bt-cut::before{ left:-24px; }
  .bt-cut::after{ right:-24px; }
}

/* ⚠⚠ 여기 있던 .sb-sport__ico 24px 규칙을 걷었다 (2026-09-13).

   같은 이름의 규칙이 <파일 안에 두 벌>이었다. 위(69행)에서 52px 판으로
   키워 놨는데 이 줄이 뒤에 있어서 그것을 24px 로 되돌렸다.
   레드가 「아이콘이 너무 작게 보이는데」 라고 한 것이 이것이다 —
   키우는 코드를 넣고도 화면은 그대로였다.

   ★ 종목 탭 아이콘 규칙은 이 파일에서 <한 군데>(69행)에만 둔다. */

/* ==========================================================================
   배너 배경 — 브러시 그림 한 장을 <종목 색으로> 물들인다
   (레드 2026-09-14 「각페이지 배경처리해주고 … 종목별로 배경 이미지 색을 다르게」)

   ★★ 그림은 <한 장>이다(파랑). 종목마다 만들지 않는다 —
     background-blend-mode:color 가 위 색층의 <색>과 아래 그림의 <밝기>를 섞어
     같은 무늬를 어떤 색으로든 물들인다. 그림이 늘면 관리할 것만 늘어난다.

   ⚠ 어둠막을 <맨 위에> 한 겹 더 깐다. 브러시가 밝은 자리에서 흰 글자가 사라진다.
     blend 는 그 아래 두 겹에만 걸리므로(콤마 순서) 막은 그대로 남는다.

   ⚠ 여기 없는 종목은 <예전 그라디언트>로 떨어진다. 그림이 안 깔릴 뿐 화면은 멀쩡하다.
   ========================================================================== */
/*
  ★★ 배경 그림을 <셋>으로 늘렸다 (레드 2026-09-15).

    전에는 한 장을 세 칸에 똑같이 깔았다. 나란히 놓이니 <같은 무늬가 세 번>
    보여 세 칸이 한 장을 잘라 놓은 것처럼 읽혔다. 칸마다 다른 결을 준다.

  ★★ 종목 색층(blend-mode:color)을 <걷었다>.

    전에는 그림 <한 장>을 종목 색으로 물들여 썼다. 그런데 새로 받은 그림은
    그 자체로 결이 있는 파란 배경이라, 색을 입히면 야구 칸이 <금색>으로
    변해 그림이 통째로 다른 것이 됐다 — 받은 그림을 보여 주는 뜻이 사라진다.

  ★ 종목 구분은 <오른쪽 엠블럼>이 이미 한다. 바탕까지 종목 색일 까닭이 없다.

  ⚠ 그림 이름은 --bgimg 로 <바깥에서> 고른다. background 선언 안에 박으면
    칸마다 이 긴 선언을 통째로 다시 써야 하고, 어둠막을 고칠 때 세 군데를
    함께 고쳐야 한다.
*/
.sb-banner[data-sport]{
  --bgimg:url("/assets/design/img/sports-bg/banner1-20260915.jpg");
  background:
    linear-gradient(100deg, rgba(5,8,15,.62) 0%, rgba(5,8,15,.30) 55%, rgba(5,8,15,.55) 100%),
    var(--bgimg) center / cover no-repeat,
    var(--surface-1);
}
/* ⚠ :nth-child 는 <형제 순서>다. 배너 줄에는 배너만 들어 있어야 맞는다 */
.sb-banners .sb-banner[data-sport]:nth-child(2){
  --bgimg:url("/assets/design/img/sports-bg/banner2-20260915.jpg");
}
.sb-banners .sb-banner[data-sport]:nth-child(3){
  --bgimg:url("/assets/design/img/sports-bg/banner3-20260915.jpg");
}
.sb-banner[data-sport="soccer"]     { --sp:var(--sp-soccer); }
.sb-banner[data-sport="basketball"] { --sp:var(--sp-basketball); }
.sb-banner[data-sport="baseball"]   { --sp:var(--sp-baseball); }
.sb-banner[data-sport="volleyball"] { --sp:var(--sp-volleyball); }
.sb-banner[data-sport="ice-hockey"] { --sp:var(--sp-ice-hockey); }

/* 글자는 그림 위에 선다. 그림자를 줘야 밝은 붓자국에서도 읽힌다 */
.sb-banner[data-sport] .sb-banner__league,
.sb-banner[data-sport] .sb-banner__title{
  position:relative; z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
}
/* ⚠⚠ 글자는 <누름을 받지 않는다>. 받으면 카드 가운데를 눌렀을 때
   덮개 링크 대신 이 글자가 잡혀 <아무 데도 안 간다> — 실제로 그랬다.
   덮개보다 위에 두는 것은 <보이기> 위해서지 <누르기> 위해서가 아니다. */
.sb-banner__league,
.sb-banner__title{ pointer-events:none; }
.sb-banner[data-sport] .sb-banner__league{ color:var(--text-2); }

/* ---- 오른쪽 리그 엠블럼 -------------------------------------------------- */
/* ⚠ 글자 아래에 둔다(z-index 없음). 위로 올리면 긴 팀 이름을 덮는다 */
/*
  ★ 84 → 112 (레드 2026-09-15 「오른쪽에 리그이미지 좀 크게」).
  ⚠ 키운 만큼 <글자 자리를 비운다>. 안 비우면 긴 리그 이름이 엠블럼 아래로
    파고들어 둘 다 안 읽힌다 — 아래 padding-right 가 그 몫이다.
*/
.sb-banner__emblem{
  position:absolute; right:16px; top:50%; translate:0 -50%;
  width:112px; height:112px;
  object-fit:contain;
  opacity:.9;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
  pointer-events:none;
}
@media (max-width:640px){
  .sb-banner__emblem{ width:64px; height:64px; right:12px; }
}

/* ---- 카드 전체가 리그 목록으로 간다 (레드 2026-09-14) -------------------

   ★ 카드를 덮는 <투명한 링크>다. article 을 Link 로 바꾸지 않는 까닭은
     안에 「지금 베팅」이 또 링크라서다 — 링크 안에 링크는 잘못된 마크업이고
     브라우저가 제멋대로 푼다.

   ⚠ 「지금 베팅」이 이 덮개보다 <위에> 있어야 한다. 안 그러면 경기로 가려고
     누른 단추가 리그 목록으로 간다 — 아래 z-index 참고.
   ⚠ 글자·엠블럼은 덮개보다 아래다. 위로 올리면 그 자리만 안 눌린다. */
.sb-banner__all{
  position:absolute; inset:0; z-index:1;
  border-radius:inherit;
}
.sb-banner__all:focus-visible{ outline:2px solid var(--primary); outline-offset:-3px; }

/* ⚠ 카드에 손을 얹으면 <누를 수 있다>는 것이 보여야 한다 */
.sb-banner:has(.sb-banner__all:hover){ border-color:color-mix(in srgb, var(--sp, var(--c)) 60%, var(--line)); }

/* 단추는 덮개 위로. 이 한 줄이 없으면 「지금 베팅」이 리그 목록으로 간다 */
.sb-banner .btn{ position:relative; z-index:2; }

/* ---- 다른 경기 줄 — 좌우 화살표 (레드 2026-09-14) -------------------------
   ★ 스크롤은 원래 됐다(휠·터치). 스크롤바를 숨겨 놓아 <미는 길이 안 보였을> 뿐이다.
     다른 레일(.sec__navs)과 같은 모양의 단추를 줄 바깥에 둔다.
   ⚠ 단추는 줄 <바깥>이다. 안에 두면 그것도 같이 밀려 사라진다. */

/* ---- 리그 거르개 칩 (레드 2026-09-15) -----------------------------------
   ★ 인기 리그 배너에서 「지금 베팅」을 누르면 목록이 걸러진다. 걸러진 것을
     말해 주지 않으면 회원은 <왜 경기가 몇 개뿐인지> 모른다 —
     처음에는 아예 「반응이 없다」로 읽혔다(바뀐 자리가 화면 밖이었다).
   ⚠ 지우는 길을 함께 둔다. 걸어 놓고 풀 수 없으면 뒤로가기로 빠져나온다.
   -------------------------------------------------------------------------- */
/* ⚠ 아래 「스포츠 — 시안 값으로」 구역에서 다시 잡는다 (2026-09-26) */
.sb-filter__label{ font-size:var(--fs-sm); color:var(--text-4); }
.sb-filter__chip{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 12px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--primary) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  color:var(--text); font-size:var(--fs-sm); font-weight:800; cursor:pointer;
  transition:background var(--t-bg), border-color var(--t-color);
}
.sb-filter__chip:hover{
  background:color-mix(in srgb, var(--primary) 30%, transparent);
  border-color:var(--primary);
}
.sb-filter__chip i{ font-size:12px; color:var(--text-3); }
.sb-filter__chip:hover i{ color:var(--text); }

/* ---- 진행 예정 카드 — 눌리지 않는다 (레드 2026-09-15) --------------------
   ★ 생김새는 진행 중과 <같다>. 다른 것은 손이 닿는지 하나뿐이다.
   ⚠ 링크가 아니므로 커서·호버가 애초에 안 생긴다. 이 규칙은 <혹시 생길
     경우>를 막는 안전줄이다. */
.sb-hl__teams.is-static{ cursor:default; }
.sb-hl__teams.is-static:hover{ background:none; }

/* ---- 열린 배당판 아래 「경기 정보」 길 (레드 2026-09-15) ------------------
   카드 몸통이 열고닫기가 되면서 상세로 가는 길이 사라졌다. 경기 정보·트래커는
   상세에만 있어, 배당을 다 보고 「더 볼 것」을 찾는 자리에 남긴다. */
.sb-oddsbox__go{
  margin-top:10px; height:40px; padding:0 14px;
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--r); background:var(--surface-2);
  font-size:var(--fs-sm); font-weight:800; color:var(--text-3);
  transition:background var(--t-bg), color var(--t-color);
}
.sb-oddsbox__go:hover{ background:var(--surface-3); color:var(--text); }

/* ---- 라이브 트래커 접기 (레드 2026-09-15) --------------------------------
   ★ 제목 줄이 <여닫는 단추>가 된다. 스코어는 접혀도 남는다 — 지금 몇 대 몇인지는
     배당을 고르는 동안에도 계속 필요하다.
   ⚠ 폰에서는 처음에 접혀 있다. 트래커가 한 판을 먹어 배당이 화면 밖으로 밀렸다. */
.mt-track__toggle{
  width:100%; display:flex; align-items:center; gap:8px;
  background:none; border:0; cursor:pointer; text-align:left;
}
/* 「펼치기 / 접기」 글자 — 화살표와 함께 오른쪽 끝에 선다.
   ⚠ 이 글자가 생기면서 margin-left:auto 는 <글자>가 가져간다.
     화살표에 남겨 두면 글자만 왼쪽으로 밀린다. */
.mt-track__more{ margin-left:auto; color:var(--up, #2FE3AC); font-size:var(--fs-sm); font-weight:800; }
.mt-track__toggle > svg:last-child{
  color:var(--text-4);
  transition:transform var(--t-bg);
}
.mt-track.is-open .mt-track__toggle > svg:last-child{ transform:rotate(180deg); }


/* ==========================================================================
   카드를 낮추고 칸 사이를 좁힌다 (레드 2026-09-15)

   ★★ <빈 자리만> 걷는다. 글자 크기·동그라미·배당칸은 그대로다 —
     그것들을 줄이면 읽기가 나빠지는데, 여백은 줄여도 읽는 데 지장이 없다.

   ⚠ --gap-card 토큰 자체는 <안 건드린다>. 그 값은 카지노·프로모션까지
     온 화면이 쓰고 있어서, 여기가 좁아지길 바란 대가로 남의 화면이 조용히
     좁아진다. 스포츠의 두 줄에만 준다.
   ========================================================================== */

/* ---- 줄 카드 (경기 리스트) ---------------------------------------------- */
.sb-row{ padding:10px 14px; }
/* 마켓 줄 사이 — 세 줄이라 한 줄만 줄여도 카드가 눈에 띄게 낮아진다 */
.sb-mkts{ gap:4px 10px; }

/* ---- 주요 경기 카드 ------------------------------------------------------ */
.sb-hl{ padding:10px 14px; }
/*
  ⚠ 위아래 마진이 <따로> 붙어 있다. 14 + 17.5 + 6 = 37.5px 이 빈 자리였다.
    세 곳을 함께 줄여야 뜻이 있다 — 한 곳만 줄이면 옆이 그만큼 벌어져 보인다.
*/
.sb-hl__teams{ margin:8px 0; }
.sb-hl__mkt{ margin-top:8px; }
.sb-mkt__picks{ margin-top:4px; }

/* ---- 칸과 칸 사이 (레드가 빨간 동그라미로 짚은 자리) --------------------- */
.sb-banners{ gap:10px; }
.sb-hls{ gap:10px; }

/* 폰에서는 더 좁힌다 — 카드 하나가 화면의 절반을 먹으면 한 경기 보고 또 민다 */
@media (max-width:640px){
  .sb-row{ padding:8px 12px; }
  .sb-hl{ padding:8px 12px; }
  .sb-hl__teams{ margin:6px 0; }
  .sb-hl__mkt{ margin-top:6px; }
  .sb-banners, .sb-hls{ gap:8px; }
}


/* ==========================================================================
   배당칸을 낮추고, 배너 테두리를 걷는다 (레드 2026-09-15)
   ========================================================================== */

/*
  ★★ 배당칸이 카드 높이를 <혼자 정하고> 있었다.

    한 칸 42px × 세 줄 + 줄 사이 = 카드 높이의 대부분이다. 바깥 여백을
    아무리 걷어도 카드가 안 낮아지던 까닭이 이것이다 — 실측 카드 172px 중
    배당칸 몫이 134px 였다.

  ⚠ 글자 크기는 <그대로> 둔다. 배당은 이 화면에서 제일 많이 읽히는 숫자다.
    줄이는 것은 숫자 위아래의 <빈 자리>뿐이다. 36px 이면 손가락으로 누르는
    최소 크기(약 34px)도 지킨다.
*/
.sb-pick{ height:36px; }

/*
  ★ 배너 테두리를 걷었다 (레드 「여기카드 테두리 없애줘」).
    그림이 판을 꽉 채우는데 테두리를 두르면 <액자>가 되어, 그림이 한 겹
    뒤로 물러나 보인다. 모서리 둥글기가 이미 칸의 경계를 말한다.
*/
.sb-banner{ border:0; }


/* ==========================================================================
   주요 경기 카드 — 배당을 바닥에 붙이고 남은 여백을 걷는다 (레드 2026-09-15)
   ========================================================================== */

/*
  ★★ 배당 묶음을 <바닥에 붙인다>.

    카드 셋의 높이는 이미 같았다(실측 211). 그런데 팀 이름이 한 줄인 카드만
    배당칸 아래가 29px 비고, 두 줄인 카드는 11px 였다 — 배당칸이 <내용을
    따라 떠> 있어서 칸마다 다른 자리에 앉았다. 나란히 놓으니 그 어긋남이
    먼저 보인다.

  ★ margin-top:auto 가 남는 자리를 <위로> 몰아 준다. 팀 이름이 한 줄이든
    두 줄이든 배당은 늘 같은 자리, 카드 바닥에 선다.

  ⚠ 카드가 display:flex; flex-direction:column 이라서 되는 일이다.
    grid 였다면 이 한 줄로는 안 된다.
*/
.sb-hl__mkt{ margin-top:auto; }

/* 배당칸을 한 번 더 낮춘다 (레드 「배당부분도 여백 줄이면 카드 크기 더 줄어든다」).
   ⚠ 32 가 바닥이다. 더 줄이면 손가락으로 누르는 최소 크기(약 34px)를 밑돈다 —
     여기는 회원이 실제로 누르는 자리다. */
.sb-hl .sb-pick{ height:32px; }

/* 팀 줄 사이·카드 아래 여백 — 남은 빈 자리를 마저 걷는다 */
.sb-hl__teams{ gap:6px; }
.sb-hl{ padding-bottom:8px; }

@media (max-width:640px){
  .sb-hl{ padding-bottom:7px; }
  .sb-hl__teams{ gap:5px; }
}


/*
  ★★ 배당칸을 한 번 더 낮춘다 (레드 2026-09-15 「배당 부분 위아래 여백 최대한」).

    경기 줄 카드도 같은 32 로 맞춘다. 앞서 주요 경기 카드에만 줬던 값이라
    두 화면의 배당칸 키가 달랐다 — 같은 것이 같아 보여야 한다.

  ⚠ 32 가 <바닥>이다. 여기는 회원이 실제로 누르는 자리라, 더 줄이면
    손가락으로 누르는 최소 크기(약 34px)를 밑돌아 옆 칸을 잘못 누른다.
    숫자 글자 크기는 그대로 둔다 — 이 화면에서 제일 많이 읽히는 숫자다.
*/
.sb-pick{ height:32px; }
/* 줄 사이도 한 칸 더 — 세 줄이라 3px 만 줄여도 카드가 6px 낮아진다 */
.sb-mkts{ gap:3px 10px; }
.sb-row{ padding:8px 14px; }

@media (max-width:640px){
  .sb-row{ padding:7px 12px; }
}


/* ==========================================================================
   경기 상세 — 마켓 리스트를 촘촘하게 (레드 2026-09-15)

   「여백이 많아서 페이지가 길어지고 있어」 · 「폰트도 조금 줄이자 — -2px」 · 「PC부터」

   ★★ 한 상자가 118px 인데 그런 상자가 <열넷>이다. 한 칸에서 30px 을 걷으면
     페이지가 420px 짧아진다 — 여기서는 여백 한 뼘이 열네 배로 돌아온다.

   ⚠ PC 만 바꾼다(min-width:641px). 폰은 이미 640 블록이 따로 잡고 있어
     여기를 건드리면 그쪽 균형이 함께 흔들린다. 폰은 레드가 볼 때 잡는다.
   ========================================================================== */
@media (min-width:641px){
  /* 상자 사이 — 열넷이라 2px 만 줄여도 28px 이다 */
  .mt-mkts{ gap:6px; }

  /* 머리 — 이름 한 줄이 52px 을 쓰고 있었다 */
  .mt-mkt__head{ padding:9px 14px; }
  .mt-mkt__name{ font-size:14px; }

  /* 본문 — 아래 여백이 배당칸만큼 컸다(16px) */
  .mt-mkt__body{ padding:0 14px 9px; gap:5px; }

  /*
    배당칸 48 → 38.
    ⚠ 38 에서 멈춘다. 여기는 회원이 실제로 누르는 자리라, 더 줄이면 손가락으로
      누르는 최소 크기(약 34px)에 붙어 옆 칸을 잘못 누른다.
    ★ 글자는 레드가 말한 대로 <둘 다 -2px> — 이름 14→12, 배당 16→14.
      배당 숫자를 이름보다 크게 두는 <차이>는 그대로 지킨다. 그 차이가
      「무엇을 읽어야 하는지」를 말한다.
  */
  /*
    ⚠⚠ 원본이 <min-height:48px> 이다. height 만 주면 min-height 가 이겨
      48 그대로 남는다 — 실측으로 잡았다(48 → 48, 안 먹음).
      최소키를 함께 낮춰야 값이 산다.
  */
  .mt-pick{ min-height:38px; height:38px; padding:0 12px; }
  .mt-pick > span{ font-size:12px; }
  .mt-pick > b{ font-size:14px; }

  /*
    ⚠⚠ 목록의 접이식 배당판(.sb-oddsbox)은 <자기 규칙>을 들고 있다.
      더 구체적인 선택자라 위의 .mt-mkts · .mt-mkt__head 를 이긴다 —
      상세와 목록에서 같은 부품이 다른 키로 보이던 까닭이다.
      같은 것이 같아 보여야 하므로 여기도 같은 값으로 맞춘다.
  */
  .sb-oddsbox .mt-mkts{ gap:6px; }
  .sb-oddsbox .mt-mkt__head{ padding:8px 12px; }
}


/*
  ★★ 스포츠 배너의 어둠막도 <걷었다> (레드 2026-09-15 「그라데이션 제거하고 이미지 원색상」).

    예측마켓 배너에서 걷은 것과 <같은 까닭>이다. 그림 셋이 이미 어두운
    파란 배경이라 막이 없어도 흰 글자가 선다. 막을 걷으니 그림의 빛줄기가
    왼쪽 끝까지 살아난다.

  ⚠ 배경 선언을 <통째로> 다시 쓴다. 여러 겹 중 한 겹만 빼는 문법이 없어서,
    앞 규칙을 덮어쓰는 편이 정확하다.
  ⚠ 글자 그림자는 이미 .sb-banner[data-sport] .sb-banner__title 에 있다
    (0 1px 3px / 0 0 10px). 막이 하던 일을 그것이 대신한다.
*/
.sb-banner[data-sport]{
  background:
    var(--bgimg) center / cover no-repeat,
    var(--surface-1);
}


/* ==========================================================================
   모바일 경기 리스트 — 루벳 결로 (레드 2026-09-15 「우리도 이렇게 가즈아」)

   ★★ 바뀐 것은 셋이다.

     ① 리그 하나가 <한 덩이 카드>다. 전에는 경기마다 카드가 따로 떠 있어
       카드 사이 그림자와 여백이 경기 수만큼 쌓였다 — 리그 셋이면 화면이
       카드 열두 장이다. 한 덩이로 묶고 <가는 선>으로만 가른다.

     ② 팀과 배당이 <가로로 나란히> 선다. 전에는 팀 아래에 배당이 쌓여
       한 경기가 두 층을 먹었다. 나란히 두면 한 층이면 되고, 눈이
       「이 팀 → 이 배당」을 한 줄에서 잇는다.

     ③ 배당칸이 <라벨 위 · 숫자 아래> 두 단이다. 가로로 「HOME 2.28」을
       늘어놓으면 좁은 폭에서 숫자가 끝으로 밀려 라벨과 멀어진다.

   ⚠ 640 이하에서만이다. PC 는 가로가 넓어 한 줄에 세 마켓이 들어가고,
     그 편이 더 많이 보인다.
   ========================================================================== */
@media (max-width:640px){

  /* ① 리그 = 한 덩이 카드 -------------------------------------------- */
  .sb-league__list{
    background:var(--surface-1);
    border:1px solid var(--line);
    border-radius:var(--r);
    /* ⚠ overflow:hidden 이라야 첫·끝 줄이 모서리를 넘지 않는다 */
    overflow:hidden;
  }
  .sb-row{
    background:none; border:0; border-radius:0; box-shadow:none;
  }
  /* 줄 사이 가는 선 — 첫 줄 위에는 안 긋는다 */
  .sb-row + .sb-row{ border-top:1px solid var(--line); }

  /* ② 팀 왼쪽 · 배당 오른쪽 --------------------------------------- */
  .sb-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-areas:"go mkts";
    gap:10px; align-items:center;
    padding:10px 12px;
  }

  /* ③ 배당칸 — 라벨 위, 숫자 아래 ---------------------------------- */
  .sb-mkt{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .sb-mkt__name{
    text-align:center; font-size:var(--fs-xs); color:var(--text-5);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sb-pick{
    flex-direction:column; justify-content:center; gap:1px;
    height:auto; min-height:44px; padding:5px 4px;
  }
  .sb-pick span{ font-size:var(--fs-xs); }
  .sb-pick b{ font-size:var(--fs-sm); }

  /*
    ⚠ 마켓은 <첫 줄 하나만> 보인다. 루벳도 1x2 하나만 띄운다 —
      좁은 폭에 세 줄을 다 밀어 넣으면 한 경기가 다시 세 층이 된다.
      나머지는 카드를 눌러 펼친다(+N 이 그 수를 말한다).
  */
  .sb-mkts > .sb-mkt:not(:first-child){ display:none; }
  /*
    ⚠⚠ 펼쳐도 <위는 한 줄 그대로> 둔다.

      처음엔 열면 세 줄을 다 보이게 했는데, 두 가지가 한꺼번에 무너졌다 —
      ① 배당이 세 층으로 늘어나자 팀 이름이 그 옆 <가운데에 끼여> 떠 버렸고
        (align-items:center 라 세 줄의 한가운데에 앉는다),
      ② 바로 아래 펼쳐지는 배당판에 <같은 마켓이 또> 나와 화면에 두 벌이 됐다.

      펼침이 하는 일은 <아래 배당판을 여는 것>이다. 위 줄은 늘 「이 경기가
      무엇인가」만 말하면 된다. 그래서 여기에는 규칙을 <더하지 않는다>.
  */

  /* +N — 시각 줄 오른쪽 끝. 카드 배경이 사라졌으니 자리를 다시 잡는다 */
  .sb-more{ top:8px; right:10px; }

  /* 시각 줄 — +N 과 겹치지 않게 오른쪽을 비운다 */
  .sb-row__when{ padding-right:34px; }
}


/*
  ★★ 폰에서 펼친 배당판도 촘촘하게 (레드 2026-09-15
    「모바일 배당쪽도 위아래 간격 최대한 줄이자」).

    PC 는 앞서 잡았는데(min-width:641px) 폰은 640 블록이 따로 있어 그대로
    남아 있었다 — 같은 화면인데 폰만 헐거웠다.

  ⚠ 폰의 .mt-pick 은 <min-height:42px> 다. 여기도 PC 와 같은 함정이라
    최소키를 함께 낮춰야 값이 산다.
  ⚠ 36 에서 멈춘다. 폰은 손가락으로 누르는 자리라 PC(32)보다 여유를 둔다.
*/
@media (max-width:640px){
  .mt-mkts{ gap:6px; }
  .mt-mkt__head{ padding:8px 10px; }
  .mt-mkt__name{ font-size:var(--fs-sm); }
  .mt-mkt__body{ padding:0 10px 8px; gap:4px; }
  .mt-pick{ min-height:36px; height:36px; padding:0 10px; gap:4px; }
}


/* ==========================================================================
   팀 이름이 길면 <사라지게> 한다 (레드 2026-09-15 「루벳처럼 음영처리」)
   ========================================================================== */
@media (max-width:640px){
  /*
    ★★ 말줄임(…) 대신 <오른쪽으로 옅어지는> 마스크다.

      「홋카이도 닛폰햄 파이터스」가 「홋카이도 닛폰햄 파…」로 끊기면 점 세 개가
      자리를 먹고, 그 점이 <글자처럼> 읽혀 이름의 일부로 보인다. 옅어지며
      사라지면 「뒤가 더 있다」가 모양으로 전해지고 자리도 안 먹는다.

    ⚠⚠ 이름 칸을 <남는 폭 전체>로 편다(flex:1 1 0). 전에는 flex:0 1 auto 라
      칸 폭이 <글자 폭과 같았고>, 그 상태로 마스크를 걸면 <짧은 이름도>
      끝이 흐려진다 — 마스크는 글자가 아니라 칸을 기준으로 걸리기 때문이다.
      칸을 펴 두면 짧은 이름은 흐려지는 자리에 닿지도 않는다.

    ⚠ -webkit- 을 같이 적는다. 빠지면 모양이 사라지는 게 아니라
      <칸이 통째로 안 보인다> — 오류가 안 나서 「이름이 왜 없지」만 남는다.
  */
  .sb-team__name{
    flex:1 1 0; min-width:0;
    overflow:hidden; white-space:nowrap;
    text-overflow:clip;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  /* ★ H·A 는 이름을 편 만큼 <줄 끝>에 선다. 두 줄의 배지가 세로로 맞아
       「위가 홈」이 한눈에 읽힌다 — 이름 길이에 따라 들쭉날쭉하지 않는다 */
  .sb-team__ha{ margin-left:2px; }

  /* ★ 홈·원정 두 줄을 조금 띄운다 (레드 「사이간격 조금더 주고」) — 3 → 6 */
  .sb-row__teams{ gap:6px; }

  /* ★ 리그와 리그 사이를 좁힌다 (레드 「리스트 하단에 여백은 줄이자」) — 16 → 10.
       ⚠ 리그 머리의 아래 여백(12)도 함께 걷는다. 둘을 따로 두면 한쪽을 줄여도
         다른 쪽이 그만큼 벌어져 보여 줄어든 티가 안 난다. */
  .sb-league{ margin-bottom:10px; }
  .sb-league__head{ padding:0 4px 7px; }
}


@media (max-width:640px){
  /*
    ⚠⚠ 이름을 <왼쪽에> 못 박는다.

      칸을 flex:1 1 0 으로 펴자 물려받은 text-align:center 가 드러나
      「Aviator Smolensk」가 칸 <가운데로> 밀렸다. 칸 폭이 글자 폭과 같던
      때는 가운데나 왼쪽이나 같은 자리라 숨어 있던 것이다 —
      시각 줄에서 겪은 것과 <똑같은> 함정이다(.sb-row__when).

    ★ 칸을 펴는 손질에는 정렬을 함께 적는다. 폭을 주면 정렬이 드러난다.
  */
  .sb-team__name{ text-align:left; }

  /*
    ★★ 폰에서는 H·A 배지를 <뺀다> (레드 2026-09-15
      「모바일 경기리스트에는 H A표기 없애자」).

      이름 칸을 폭 전체로 편 뒤로 배지가 긴 이름 <위에 겹쳐> 앉았다.
      겹치지 않게 자리를 만들면 이번엔 이름이 그만큼 더 일찍 잘린다.

    ★ 게다가 폰에서는 배지가 없어도 안다 — 위가 홈, 아래가 원정이고,
      옆의 배당칸이 1 · X · 2 로 같은 순서를 말한다. 좁은 칸에서는
      <같은 말을 두 번 하는 것>이 더 비싸다.
    ⚠ PC 는 그대로 둔다. 가로가 넓어 배지가 이름을 밀어내지 않는다.
  */
  .sb-team__ha{ display:none; }
}


@media (max-width:640px){
  /*
    ★★ 경기와 경기를 <붙인다> (레드 2026-09-15 「경기사이 이간격도 없애자」).

      리그를 한 덩이 카드로 묶었는데 줄 사이에 8px 틈이 남아 있었다.
      카드 바탕이 그 틈으로 비쳐 <줄마다 끊긴 것>처럼 보였다 —
      묶어 놓고 다시 가른 셈이다.

    ★ 가르는 일은 이미 <가는 선>(.sb-row + .sb-row 의 border-top)이 한다.
      선 하나면 충분하고, 틈까지 있으면 두 번 가르는 것이다.
  */
  .sb-league__list{ gap:0; }
}


@media (max-width:640px){
  /*
    ★ 옅어지기 시작하는 자리를 <앞당긴다> (레드 2026-09-15
      「팀이름 조금만 더 앞에서 음영처리하자」) — 22 → 46px.

      22 로는 글자가 거의 <배당칸에 닿아서> 끊겼다. 잘리는 티가 나기 전에
      먼저 옅어져야 「뒤가 더 있다」로 읽히지, 끝에서 급히 사라지면
      그냥 가려진 것으로 보인다.

    ⚠ 시작점을 당겨도 <짧은 이름은 그대로>다. 마스크는 칸 오른쪽 끝을
      기준으로 걸리고, 짧은 이름은 그 자리에 닿지도 않는다.
  */
  .sb-team__name{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 46px), transparent calc(100% - 6px));
            mask-image:linear-gradient(to right, #000 calc(100% - 46px), transparent calc(100% - 6px));
  }
}


/*
  ★★ 주요 경기 카드의 1 · X · 2 를 <또렷하게> (레드 2026-09-15
    「카드에 1 2 가 사라졌다!」).

    사라진 게 아니라 <묻힌> 것이다. 이 카드는 바탕이 경기장 사진이라 밝고,
    라벨 색이 회색(--text-5)이다. 「HOME」·「AWAY」 네 글자일 때는 덩어리가
    커서 그 대비로도 읽혔는데, 한 글자가 되자 회색 점이 되어 그림에 녹았다.

  ★ 글자를 <줄이면 무게를 올려야> 한다. 크기가 준 만큼 색과 굵기로 메운다.
  ⚠ 그림자도 준다 — 사진은 자리마다 밝기가 달라서, 색만으로는 밝은 자리에서
    다시 묻힌다. 카드 제목이 이미 같은 방식으로 버티고 있다.
*/
.sb-hl .sb-pick > span{
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:var(--fs-sm);
  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);
}

/* 대회 이름·복식 (2026-09-17) — 리그를 투어로 묶는 종목에서만 나온다.
   ⚠ 시각 줄 옆에 붙는다. 리그 이름 자리가 아니다 — 대회는 경기마다 다르다. */
.sb-row__tour, .sb-hl__tour{
  /*
   * ★ 시각보다 <한 단 흐리고 얇게> (레드 2026-09-25).
   *   전에는 시각과 같은 색(--text-5)에 굵기만 700 이라 「22:00 Genoa」가
   *   한 덩어리로 읽히고, 굵은 쪽이 제목처럼 보였다 — 대회명을 리그로 오해했다.
   *   리그 이름은 묶음 머리(.sb-league__head)에 이미 있으므로 줄에서는 되풀이하지 않고,
   *   대회를 <곁들이는 글>로 낮춘다.
   */
  margin-left:6px; font-size:var(--fs-xs, 12px); color:var(--text-6); font-weight:400;
}
.sb-row__tag{
  margin-left:6px; padding:1px 6px; border-radius:999px;
  font-size:var(--fs-xs, 12px); font-weight:800;
  background:color-mix(in oklab, var(--accent) 18%, transparent); color:var(--accent);
}

/* ── 2026-09-17 추가 다섯 종목 ─────────────────────────────────────────────
   레드: 「각 종목 여기 검색에 사용한 종목 아이콘으로 해주고, 색상도 종목별로 다르게」

   ★ 앞의 다섯은 무늬를 <인라인 SVG>로 들고 있다. 새 다섯은 검색이 쓰는 PNG 를
     그대로 마스크로 쓴다 — 같은 그림이 두 벌이 되지 않게 하려는 것이다.
     마스크라 <모양만> 따고 색은 --sp 가 칠한다. PNG 가 무슨 색이든 상관없다.

   ⚠ 파일 이름에 날짜가 붙어 있다(…-20260915.png). 그림을 갈아 끼우면 이름이 바뀌므로
     <여기 주소도 함께> 고쳐야 한다. 안 고치면 조용히 404 가 되고, 마스크가 비어
     무늬가 통째로 사라진다 — 배경만 남아 눈에 잘 안 띈다.
   ⚠ 슬러그는 sports_categories.name_en 에서 나온다(e-games · mma-boxing).
     그 이름을 바꾸면 여기도 따라 바꿔야 한다.
   ───────────────────────────────────────────────────────────────────────── */
.sb-row[data-sport="tennis"]            { --sp:var(--sp-tennis); }
.sb-row[data-sport="handball"]          { --sp:var(--sp-handball); }
.sb-row[data-sport="american-football"] { --sp:var(--sp-american-football); }
.sb-row[data-sport="e-games"]           { --sp:var(--sp-e-games); }
.sb-row[data-sport="mma-boxing"]        { --sp:var(--sp-mma-boxing); }

.sb-row[data-sport="tennis"]            { --sp-glyph:url("/assets/design/img/sports-icon/tennis-20260915.webp"); }
.sb-row[data-sport="handball"]          { --sp-glyph:url("/assets/design/img/sports-icon/handball-20260915.webp"); }
.sb-row[data-sport="american-football"] { --sp-glyph:url("/assets/design/img/sports-icon/american-football-20260915.webp"); }
.sb-row[data-sport="e-games"]           { --sp-glyph:url("/assets/design/img/sports-icon/e-games-20260915.webp"); }

.sb-row[data-sport="mma-boxing"]        { --sp-glyph:url("/assets/design/img/sports-icon/mma-boxing-20260915.webp"); }

/* ─────────────────────────────────────────────────────────────────────────
   ★★ 기존 다섯 종목도 <같은 검색용 아이콘>으로 (레드 2026-09-18
        「기존꺼는 아이콘으로 변경안되었네!」)

     새 5종목(테니스·핸드볼·미식축구·E게임·격투기)만 PNG 로 바꾸고 기존 다섯은
     <손으로 그린 SVG> 그대로였다. 그래서 한 목록 안에서 축구는 선으로 그린 공,
     테니스는 검색 아이콘 — <두 가지 결>이 섞여 보였다.

   ★ 위쪽 원본 줄(308·324·328·330·332행)은 <건드리지 않는다>. 전달본 CSS 는
     한 글자도 고치지 않는 것이 규칙이고, CSS 는 <나중에 온 쪽이 이긴다> —
     여기서 덮으면 다음 전달본과 대조할 때 원본이 그대로 남아 있다.

   ⚠ 파일 이름의 날짜(20260915)를 바꾸면 여기도 바꿔야 한다. 정적 그림은
     캐시되므로 <그림을 갈면 이름도 간다>는 규칙이 있다.
   ───────────────────────────────────────────────────────────────────────── */
.sb-row[data-sport="soccer"]      { --sp-glyph:url("/assets/design/img/sports-icon/soccer-20260915.webp"); }
.sb-row[data-sport="basketball"]  { --sp-glyph:url("/assets/design/img/sports-icon/basketball-20260915.webp"); }
.sb-row[data-sport="baseball"]    { --sp-glyph:url("/assets/design/img/sports-icon/baseball-20260915.webp"); }
.sb-row[data-sport="volleyball"]  { --sp-glyph:url("/assets/design/img/sports-icon/volleyball-20260915.webp"); }
.sb-row[data-sport="ice-hockey"]  { --sp-glyph:url("/assets/design/img/sports-icon/ice-hockey-20260915.webp"); }


/* ═══════════════════════════════════════════════════════════════════════
   정렬 토글 — 시간순 / 인기순  (레드 2026-09-18 「배팅순으로가자」)

   ⚠ 기본 .sb-filter__chip 을 그대로 쓰면 안 된다. 그것은 <걸린 거르개>를 보이는
     모양이라 채워져 있어서, 토글에 쓰면 <안 고른 쪽도 고른 것처럼> 보인다.
     둘 중 어느 쪽으로 보고 있는지 알 수 없으면 「정렬이 먹었나」를 회원이 못 판단한다.

   ★ 그래서 안 고른 것은 <비우고>, 고른 것만 채운다.
   ═══════════════════════════════════════════════════════════════════════ */
.sb-filter__chip--toggle{
  background:transparent;
  border-color:color-mix(in srgb, var(--text-3) 40%, transparent);
  color:var(--text-3);
  font-weight:700;
}
.sb-filter__chip--toggle:hover{
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  border-color:color-mix(in srgb, var(--primary) 45%, transparent);
  color:var(--text);
}
.sb-filter__chip--toggle.is-on{
  background:color-mix(in srgb, var(--primary) 18%, transparent);
  border-color:color-mix(in srgb, var(--primary) 55%, transparent);
  color:var(--text);
  font-weight:800;
}

/* ═══════════════════════════════════════════════════════════════════════
   배너 — 리그 그림이 없으면 <종목 아이콘을 종목 색으로> (레드 2026-09-21
   「배너에 리그이미지가 없으면 종목아이콘 띄우자 / 종목별 색넣어서」)

   ★ 목록 카드(.sb-row::after)와 <같은 수법>이다. 아이콘 PNG 를 마스크로 쓰고
     종목 색(--sp)으로 채운다 — 종목마다 그림을 따로 만들지 않는다.
   ★ 자리·크기는 리그 엠블럼(.sb-banner__emblem)과 같다. 둘 중 하나만 뜨므로
     배너마다 오른쪽 무게가 같아진다.
   ⚠ 목록 카드는 무늬(opacity .15)지만 여기는 <주인공>이라 또렷하게 둔다.
   ⚠ 새 종목 다섯(테니스·핸드볼·미식축구·E게임·격투기)은 배너 색이 없었다 —
     아래에서 함께 채운다. 없으면 --sp 가 비어 아이콘이 통째로 안 보인다.
   ═══════════════════════════════════════════════════════════════════════ */
.sb-banner__glyph{
  position:absolute; right:16px; top:50%; translate:0 -50%;
  width:112px; height:112px;
  background:var(--sp, var(--text-3));
  -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));
  pointer-events:none;
}
@media (max-width:640px){
  .sb-banner__glyph{ width:64px; height:64px; right:12px; }
}

.sb-banner[data-sport="tennis"]            { --sp:var(--sp-tennis); }
.sb-banner[data-sport="handball"]          { --sp:var(--sp-handball); }
.sb-banner[data-sport="american-football"] { --sp:var(--sp-american-football); }
.sb-banner[data-sport="e-games"]           { --sp:var(--sp-e-games); }
.sb-banner[data-sport="mma-boxing"]        { --sp:var(--sp-mma-boxing); }

/* ⚠ 파일 이름의 날짜(20260915)를 바꾸면 여기도 바꾼다 — 목록 카드(.sb-row)와 같은 그림이다 */
.sb-banner[data-sport="soccer"]            { --sp-glyph:url("/assets/design/img/sports-icon/soccer-20260915.webp"); }
.sb-banner[data-sport="basketball"]        { --sp-glyph:url("/assets/design/img/sports-icon/basketball-20260915.webp"); }
.sb-banner[data-sport="baseball"]          { --sp-glyph:url("/assets/design/img/sports-icon/baseball-20260915.webp"); }
.sb-banner[data-sport="volleyball"]        { --sp-glyph:url("/assets/design/img/sports-icon/volleyball-20260915.webp"); }
.sb-banner[data-sport="ice-hockey"]        { --sp-glyph:url("/assets/design/img/sports-icon/ice-hockey-20260915.webp"); }
.sb-banner[data-sport="tennis"]            { --sp-glyph:url("/assets/design/img/sports-icon/tennis-20260915.webp"); }
.sb-banner[data-sport="handball"]          { --sp-glyph:url("/assets/design/img/sports-icon/handball-20260915.webp"); }
.sb-banner[data-sport="american-football"] { --sp-glyph:url("/assets/design/img/sports-icon/american-football-20260915.webp"); }
.sb-banner[data-sport="e-games"]           { --sp-glyph:url("/assets/design/img/sports-icon/e-games-20260915.webp"); }
.sb-banner[data-sport="mma-boxing"]        { --sp-glyph:url("/assets/design/img/sports-icon/mma-boxing-20260915.webp"); }

/* ═══════════════════════════════════════════════════════════════════════
   폰에서 트래커를 펴 두되 배당을 밀어내지 않게
   (레드 2026-09-25 「모바일 인플레이경기 statscore 위젯 안나와」)

   ★ 폰은 기본이 접힘이었다. 트래커가 화면 한 판을 먹어 배당이 아래로
     밀리기 때문이었다. 그런데 회원(과 레드)에게는 <없는 것>으로 보인다 —
     같은 말을 두 번 들었다(9/18 「STATSCORE 부분이 사라졌어」, 9/25 「안나와」).

   ★ 그래서 펼치되 <높이를 자른다>. 위젯은 첫 화면에 보이고, 배당도
     같은 화면에 남는다. 더 보고 싶으면 트래커 안에서 굴리면 된다.

   ⚠ 넓은 화면은 건드리지 않는다. 거기서는 트래커가 오른쪽 곁줄이라
     배당을 애초에 안 밀어낸다.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
    .mt-track.is-open .ex-lv-tracker{
        max-height: 42vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 상세 통계 여닫이 — 트래커 제목과 같은 결로, 한 단 아래 */
.mt-track__statToggle{
    width:100%; margin-top:10px; padding:8px 10px;
    display:flex; align-items:center; justify-content:space-between;
    background:transparent; border:1px solid var(--line); border-radius:var(--r);
    color:var(--text-3); font-size:var(--fs-sm); font-weight:700; cursor:pointer;
}
.mt-track__statToggle:hover{ color:var(--text); border-color:var(--text-5); }
/* 펼쳐지면 화살표가 돈다 — 접힘/펼침이 눈에 보이게 */
.mt-track__statToggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mt-track__statToggle svg{ transition:transform .15s ease; }

/* ==========================================================================
   스포츠 — 시안(스카이시티) 값으로 (2026-09-26)

   ★ 시안은 우리 화면을 보고 만든 것이라 클래스가 거의 같다. 달랐던 것만 적는다.
   ⚠ 시안 전용 토큰(--sb-*)은 우리에게 없다. 값을 박거나 우리 토큰으로 옮긴다:
       --sb-fs-sm 12 · --sb-fs-base 14 · --sb-fs-md 16 · --sb-r-chip 8
       --sb-t2 → --text-2 · --sb-t3 → --text-3 · --sb-t4 → --text-4 · --sb-t5 → --text-5
       --sb-up → --sb-up(우리 것) · --sb-down → --sb-down(우리 것)
   ========================================================================== */

/* ---- 거르개 줄 — 상자 안에 [정렬 세그] ··· [보기 세그] --------------------
   ★ 시안은 칩이 아니라 <세그먼트>다. 상자 하나에 좌우로 갈라 놓는다. */
.sb-filter{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:space-between; padding:6px 6px 6px 14px;
  border-radius:12px; background:var(--surface-1); border:1px solid var(--line);
}
.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-size:var(--fs-sm); color:var(--text-4); }
.sb-filter__label svg{ width:14px; height:14px; }

.sb-seg{ display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--bg); }
.sb-seg__btn{
  height:28px; padding:0 14px; border-radius:7px;
  font-size:12px; font-weight:800; color:var(--text-4);
  transition:background var(--t-bg), color var(--t-color);
}
.sb-seg__btn:hover{ color:var(--text); }
.sb-seg__btn.is-on{ background:var(--primary); color:#fff; }
/* 보기 방식 세그 — 거르개 줄 오른쪽 끝. 좁은 폭에서는 아래로 내려간다 */
.sb-seg--view{ margin-left:auto; }
@media (max-width:640px){ .sb-seg--view{ margin-left:0; } }

/* ---- 시안과 달랐던 값 셋 ---- */
.sb-league__head{ font-size:14px; }
.sb-pick{ font-size:14px; }
.sb-pick b{ font-size:14px; }

/* ==========================================================================
   코리안뷰 — 한 경기 = 마켓 줄 여러 개 + 오른쪽 세로 +N
   줄: [시각 96] [줄들 1fr] [+N 64]
   ========================================================================== */
.kr-match{ display:grid; grid-template-columns:96px minmax(0,1fr) 64px; gap:6px; padding:8px 0; }
.kr-match + .kr-match{ border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.kr-lines{ display:grid; gap:4px; min-width:0; }
.kr-head{ display:none; }   /* 휴대폰 전용 — 시각 · 홈팀 vs 원정팀 */
.kr-line{ display:grid; grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr); gap:4px; align-items:stretch; }

/* 시각 — 세 줄 왼쪽에 세로 가운데 [날짜 / 시간]. 진행 중이면 [● 경기 시간 / 점수] */
.kr-side{ display:grid; align-content:center; }
.kr-when{ display:grid; justify-items:start; gap:2px; padding-left:4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kr-when em{ display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:12px; color:var(--text-5); }
.kr-when b{ font-size:16px; font-weight:900; color:var(--text); line-height:1.2; }
.kr-when.is-live em{ color:#ff5a76; font-weight:800; }
.kr-when.is-live i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:kr-pulse 1.4s ease-in-out infinite; }
@keyframes kr-pulse{ 50%{ opacity:.3; } }

/* 배당 칸 — 홈: [이름 ··· 표시 배당] · 원정: [배당 표시 ··· 이름] */
.kr-pick{
  height:36px; min-width:0; display:flex; align-items:center; gap:8px; padding:0 12px;
  border-radius:8px; background:var(--surface-2); color:var(--text);
  transition:background-color var(--t-bg), color var(--t-color);
}
.kr-pick:hover{ background:var(--surface-3); }
.kr-pick--home .kr-team{ margin-right:auto; }
.kr-pick--away .kr-team{ margin-left:auto; text-align:right; }
.kr-team{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; color:var(--text-2); }
.kr-pick b{ position:relative; flex:none; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.kr-pick--mid{ justify-content:center; padding:0; }

/* 작은 표시 — 1x2 · H(주황) · 오버 ▲(빨강) · 언더 ▼(파랑)
   ⚠ 표시 칸 폭을 맞춘다. 줄마다 같은 자리에 서야 눈이 따라간다 */
.kr-mark{ flex:none; font-style:normal; font-weight:900; line-height:1; min-width:18px; text-align:center; }
.kr-mark--x{ font-size:9px; letter-spacing:-.02em; color:color-mix(in srgb, var(--primary) 70%, transparent); }
.kr-mark--h{ font-size:12px; color:#f5a623; }
.kr-mark--up, .kr-mark--down{ font-size:14px; font-weight:900; }
.kr-mark--up{ color:#ff4d5e; }
.kr-mark--down{ color:#3d8bff; }

/* 가운데 — 기준점(청록) · VS */
.kr-mid{
  display:grid; place-items:center; border-radius:8px;
  background:color-mix(in srgb, var(--surface-2) 55%, transparent);
  font-size:12px; font-weight:800; color:var(--text-5); font-variant-numeric:tabular-nums;
}
.kr-mid--line{ color:#2ed3c6; font-size:14px; }

/* 담긴 칸 · 배당 오름내림 — 유럽식 칸과 같은 약속 */
.kr-pick.is-on{ background:var(--primary); color:#fff; }
.kr-pick.is-on .kr-team, .kr-pick.is-on .kr-mark{ color:rgba(255,255,255,.72); }
/* ★ ▲▼ 는 숫자 오른쪽 위에 <띄워> 둔다. 자리를 차지하면 칸 사이가 벌어진다 */
.kr-pick b::after{ content:''; position:absolute; top:-3px; right:-9px; font-size:8px; line-height:1; }
.kr-pick--away b::after{ right:auto; left:-9px; }   /* 원정 칸은 표시가 오른쪽에 붙으니 왼쪽 위로 */
.kr-pick.tr-up b{ color:var(--sb-up, #4ec3f7); }
.kr-pick.tr-down b{ color:var(--sb-down, #ff3f6c); }
.kr-pick.tr-up b::after{ content:'▲'; }
.kr-pick.tr-down b::after{ content:'▼'; }
.kr-pick.is-on b{ color:#fff; }

/* +N 상세 — 세로선을 위 경기 줄과 맞춘다(왼쪽 102 · 오른쪽 70) */
.kr-odds{ margin:0 70px 0 102px; }
.kr-odds .kr-lines{ padding:0 0 4px; }
.kr-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; }
.kr-team.is-label{ color:var(--text-3); }

/* +N — 경기 줄 전체 높이의 세로 단추 */
.kr-more{ height:auto; min-width:0; width:100%; border-radius:8px; background:var(--surface-2); color:var(--primary-2); font-weight:900; }
.kr-more:hover, .kr-more.is-open{ background:var(--primary); color:#fff; }

/* ==========================================================================
   휴대폰 — 시각은 경기 위 한 줄로 올리고, 줄은 [홈 | 가운데 | 원정] 세 칸
   ========================================================================== */
@media (max-width:1023px){
  .kr-odds{ margin:0; }
  .kr-match{ grid-template-columns:minmax(0,1fr) 40px; grid-template-areas:"head head" "lines more"; gap:6px 4px; padding:10px 0; }
  .kr-side{ display:none; }
  .kr-head{ grid-area:head; display:flex; align-items:center; gap:6px; min-width:0; margin:0; font-size:13px; line-height:18px; }
  .kr-head .kr-when{ display:inline-flex; align-items:center; gap:4px; padding:0; margin-right:4px; }
  .kr-head .kr-when em{ font-size:11px; }
  .kr-head .kr-when b{ font-size:11px; font-weight:700; color:var(--text-4); }
  .kr-head .kr-when.is-live b{ padding:0 5px; border-radius:4px; background:var(--bg); color:#fff; }
  .kr-head b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; color:var(--text); }
  .kr-head span{ flex:none; font-size:11px; color:var(--text-5); }
  .kr-lines{ grid-area:lines; }
  .kr-more{ grid-area:more; font-size:12px; }
  /* ★ 팀 이름은 위 한 줄에 있으니 칸에서는 뺀다 — 홀 · 짝 · 예 · 아니오 같은 이름은 둔다 */
  .kr-line{ grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); }
  .kr-pick .kr-team.is-team{ display:none; }
  .kr-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kr-grid .kr-pick{ justify-content:space-between; }
  .kr-pick{ height:36px; gap:6px; padding:0 12px; }
  .kr-pick--home, .kr-pick--away{ justify-content:space-between; }
  .kr-pick b{ font-size:13px; }
  .kr-mid--line{ font-size:13px; }
}

/* ==========================================================================
   베팅카트 — 시안 값으로 (2026-09-26)
   ★ 클래스는 거의 같고 <치수>가 달랐다. 달랐던 것만 적는다.
   ========================================================================== */
.slip{ width:370px; right:96px; }

/* 머리 — [아이콘][이름][개수][싱글/조합][총배당][화살표] */
.slip__head{ height:44px; padding:0 14px; gap:8px; font-size:14px; }
.slip__head i{ width:20px; height:20px; border-radius:999px; font-size:12px; }
/* ★ 접어 둔 채로도 <무엇을 얼마로 담았는지> 보인다 — 펴 보지 않아도 된다 */
.slip__head-kind{ margin-left:auto; font-size:11px; opacity:.72; }
.slip__head-odds{ font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; }

.slip__body{ padding:8px 10px 10px; }

/* 바 — [자동수락 스위치] ··· [전체 비우기] */
.slip__bar{ display:flex; align-items:center; justify-content:space-between; height:24px; }
.slip__auto{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-4); cursor:pointer; }
.slip__auto input{ position:absolute; opacity:0; width:0; height:0; }
.slip__switch{
  position:relative; width:26px; height:15px; border-radius:99px; background:var(--surface-3);
  transition:background var(--t-bg);
}
.slip__switch::after{
  content:''; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%;
  background:var(--text-3); transition:transform var(--t-bg), background var(--t-bg);
}
.slip__auto input:checked + .slip__switch{ background:var(--primary); }
.slip__auto input:checked + .slip__switch::after{ transform:translateX(11px); background:#fff; }
.slip__auto input:focus-visible + .slip__switch{ outline:2px solid var(--primary); outline-offset:2px; }
.slip__clear{
  display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:var(--text-4);
  transition:color var(--t-color), background var(--t-bg);
}
.slip__clear:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 14%, transparent); }
.slip__clear svg{ width:14px; height:14px; }

/* 담긴 줄 */
.slip__picks{ gap:4px; max-height:252px; }
.slip__pick{ gap:1px 10px; padding:7px 8px 7px 10px; }
.slip__sel{ font-size:14px; font-weight:900; }
.slip__odds{ font-size:16px; font-weight:900; }
.slip__del{ width:20px; height:20px; }

/* 금액 — [보유금액 …][입력][단위] 한 줄 */
.slip__amount{ height:42px; padding:0 12px; gap:8px; }
.slip__amount em{ font-style:normal; font-size:12px; color:var(--text-5); white-space:nowrap; }
.slip__amount input{ font-size:12px; font-weight:900; text-align:right; }
.slip__quick{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:3px; }
.slip__quick button{ height:28px; border-radius:6px; font-size:11px; font-weight:800; padding:0 2px; }

/* 셈 — [총 배당] [예상 당첨금] 두 줄 */
.slip__calc{ display:grid; gap:4px; padding:0; border:0; background:none; font-size:14px; }
.slip__calc > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.slip__total{ font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; }

.slip__bet{ height:44px; border-radius:12px; font-size:14px; font-weight:900; }

/* ==========================================================================
   휴대폰 — 접으면 <떠 있는 동그란 단추>, 누르면 열린다 (시안 그대로)
   ========================================================================== */
@media (max-width:1023px){
  /* ★ 접힌 모습 — 58 원형에 담긴 개수 배지. 화면을 가리지 않으면서 늘 손 닿는 자리다 */
  .slip:not(.is-open){
    left:50%; right:auto; bottom:calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom) + 30px);
    width:58px; height:58px; translate:-50% 0; border:0; border-radius:50%; overflow:visible;
    background:var(--primary); box-shadow:0 0 0 4px var(--bg), 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; color:#fff;
  }
  /* ⚠ 글자와 화살표는 감춘다 — 원 안에 들어갈 자리가 없다. 아이콘과 배지만 남는다 */
  .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);
  }
  @keyframes slip-in{ 0%{ scale:.2; opacity:0; } 100%{ scale:1; opacity:1; } }

  /* 펼친 모습 — 좌우에 붙고 탭바 위로 */
  .slip{
    left:8px; right:8px; width:auto; max-width:none;
    bottom:calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom) + 8px);
  }
  .slip__body{ max-height:55vh; }
  /* ⚠ 모바일 3칸 규칙을 걷었다 — 값이 「+5천」으로 짧아져 한 줄 여섯 칸에 들어간다.
       원이 아닌 통화의 세 칸은 .slip__quick[data-cols="3"] 가 맡는다 */
  /* 카트가 떠 있으면 그 높이만큼 아래를 비운다 — 맨 아래 줄이 가리지 않게 */
  body:has(.slip:not([hidden])){ padding-bottom:calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom) + 96px); }
}

/* ==========================================================================
   스포츠 — 여백 · 글자를 시안이 <화면에 그리는 크기>로 (레드 2026-09-26
   「가로사이즈를 줄이는게아니고 컴포넌트 여백 폰트이런거 줄이는거야」)

   ⚠⚠ 시안은 html{zoom:.9} 로 전체를 90% 로 그린다. 그래서 CSS 값은 우리와 같은데
      <화면에 찍히는 크기>가 우리 쪽이 11% 컸다.
      zoom 을 우리도 걸면 가로 폭까지 함께 줄어든다 — 그건 레드가 원한 것이 아니다.
   ★ 그래서 시안에서 <보이는 크기>를 재어(rect · 값×0.9) 그것을 우리 CSS 값으로 쓴다.
      가로 폭은 그대로 두고 여백과 글자만 줄어든다.
   ========================================================================== */

/* 배너 */
.sb-banner{ height:135px; padding:18px 126px 18px 18px; border-radius:11px; }

/* 탭 · 검색 */
.sb-tab{ height:40px; padding:0 14px; font-size:14px; }
.sb-search{ height:40px; padding:0 13px; border-radius:11px; font-size:13px; }

/* 종목 줄 */
.sb-sport{ height:101px; padding:11px 4px 9px; border-radius:11px; font-size:11px; gap:7px; }
.sb-sport__ico{ width:52px; height:52px; }

/* 거르개 · 세그 */
.sb-filter{ padding:5px 5px 5px 13px; border-radius:11px; }
.sb-filter__label{ font-size:13px; }
.sb-seg{ padding:3px; border-radius:9px; }
.sb-seg__btn{ height:25px; padding:0 13px; border-radius:6px; font-size:11px; }

/* 리그 머리 */
.sb-league__head{ height:32px; padding:0 4px 11px; font-size:13px; }

/* 경기 줄 */
.sb-row{ padding:7px 13px; border-radius:11px; }
.sb-team__name{ font-size:14px; }
.sb-team__mark{ width:23px; height:23px; }
.sb-mkt__head{ font-size:11px; }
.sb-pick{ height:29px; padding:0 9px; border-radius:7px; font-size:13px; }
.sb-pick span{ font-size:11px; }
.sb-pick b{ font-size:13px; }

/* 주요 경기 카드 */
.sb-hl{ padding:9px 13px 7px; border-radius:11px; }

/* 코리안뷰 — 같은 비율로 */
.kr-match{ grid-template-columns:86px minmax(0,1fr) 58px; gap:5px; padding:7px 0; }
.kr-line{ grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr); gap:4px; }
.kr-pick{ height:32px; padding:0 11px; border-radius:7px; }
.kr-pick b{ font-size:13px; }
.kr-team{ font-size:11px; }
.kr-when b{ font-size:14px; }
.kr-when em{ font-size:11px; }
.kr-mid{ font-size:11px; border-radius:7px; }
.kr-mid--line{ font-size:13px; }
.kr-odds{ margin:0 63px 0 91px; }

/* 베팅카트 */
.slip{ width:333px; right:86px; bottom:22px; border-radius:11px; }
.slip__head{ height:40px; padding:0 13px; gap:7px; font-size:13px; }
.slip__head i{ width:18px; height:18px; font-size:11px; }
.slip__head-kind{ font-size:10px; }
.slip__head-odds{ font-size:14px; }
.slip__body{ padding:7px 9px 9px; }
.slip__picks{ max-height:227px; }
.slip__pick{ padding:6px 7px 6px 9px; border-radius:7px; }
.slip__sel{ font-size:13px; }
.slip__odds{ font-size:14px; }
.slip__amount{ height:38px; padding:0 11px; border-radius:7px; }
.slip__amount input, .slip__amount em{ font-size:11px; }
.slip__quick button{ height:25px; border-radius:5px; font-size:10px; }
.slip__calc{ font-size:13px; }
.slip__total{ font-size:16px; }
.slip__bet{ height:40px; border-radius:11px; font-size:13px; }

/* ==========================================================================
   휴대폰 — 위 크기 값을 다시 잡는다
   ⚠⚠ 이 <크기 블록이 뒤에 있어> 앞쪽 모바일 미디어쿼리를 이겨 버렸다.
      실측 390px 에서 .kr-match 가 PC 칸(86 · 1fr · 58)을 그대로 쓰고
      .kr-line 이 <1px 76px 1px> 로 찌그러졌다.
   ★ 시안 모바일 값(×0.9)으로 다시 적는다.
   ========================================================================== */
@media (max-width:1023px){
  .kr-match{ grid-template-columns:minmax(0,1fr) 36px; gap:5px 4px; padding:9px 0; }
  .kr-line{ grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); }
  .kr-pick{ height:32px; gap:5px; padding:0 11px; }
  .kr-pick b{ font-size:12px; }
  .kr-mid--line{ font-size:12px; }
  .kr-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kr-odds{ margin:0; }

  /* 카트 — 접히면 원형, 펴면 좌우에 붙는다 */
  .slip:not(.is-open){ width:52px; height:52px; }
  .slip:not(.is-open) .slip__head{ width:52px; height:52px; }
  /* ⚠ 바로 위 PC 크기 줄(bottom:22px)이 모바일의 <탭바 위> 자리를 덮어 펼친 카트가 탭바 밑으로 파고들었다 (레드 2026-09-27) */
  /* ★ +30 = 탭바 위로 튀어나온 <입금 동그라미>(22 + 테두리 4) 위까지. +8 이면 동그라미가 [베팅하기] 가운데를 덮었다 (레드 2026-09-27 「배팅버튼 안보임」) */
  .slip{ width:auto; right:8px; bottom:calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom) + 30px); }
}

/* ==========================================================================
   담기는 동작 — 누른 배당이 작은 알약이 되어 카트로 <날아간다> (시안 그대로)
   ★ 받는 쪽(배지)도 한 번 튄다. 어디로 들어갔는지 눈이 따라가야
     회원이 「담긴 건가?」 하고 카트를 확인하지 않는다.
   ⚠ 움직임을 줄여 달라고 한 회원에게는 날리지 않고 <튀기만> 한다.
   ========================================================================== */
.slip-fly{
  position:fixed; z-index:9999; pointer-events:none;
  min-width:34px; height:23px; padding:0 7px; border-radius:99px;
  display:grid; place-items:center;
  background:var(--primary); color:#fff; font-size:11px; 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; } }
@media (max-width:1023px){
  .slip:not(.is-open).is-bump{ animation:slip-bump .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes slip-bump{ 0%{ scale:1; } 35%{ scale:1.18; } 65%{ scale:.94; } 100%{ scale:1; } }
}
@media (prefers-reduced-motion:reduce){
  .slip, .slip.is-bump, .slip.is-bump .slip__head i{ animation:none !important; }
}


/* ★ 퀵 금액은 이제 시안 고정값이라 칸을 안 넘친다 — 글자를 줄일 이유가 없다.
     넘칠 때를 대비한 자르기만 남긴다(다른 통화 · 긴 낱말). */
.slip__quick button{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ==========================================================================
   코리안뷰 +N 배당판 — 시안 sports-kr.css 그대로 (레드 2026-09-26)

   ⚠⚠ 크롬이 멎던 자리다. 두 가지가 겹쳤다.
     ① 접은 마켓의 코리안 줄이 <안 숨겨졌다> — 우리 규칙은 .mt-mkt__body 만 본다.
        코리안은 .kr-lines 로 그리므로 접어 둔 마켓의 배당 수백 개가 그대로 살아 있었다.
     ② :has 를 <후손>으로 썼다. 배당이 깜빡일 때마다 상자 안 전체를 다시 훑는다.
        시안처럼 <직계 자식>(> .kr-odds)만 본다 — 한 칸만 보면 끝난다.
   ========================================================================== */
.mt-mkt.is-folded .kr-lines{ display:none; }

/* 배당판 상자 — 목록이 그대로 이어지게 테두리 · 바탕을 걷는다 */
.sb-oddsbox.is-kr{ margin:0; padding:4px 0 12px; border:0; border-radius:0; background:none; }
.kr-odds .mt-mkt{ border:0; border-radius:0; background:none; overflow:visible; }
.sb-oddsbox .kr-odds .mt-mkt__head{ padding:8px 0 6px 2px; }

/* ★ 「경기 정보」는 <남긴다> — 없애는 게 아니라 글자를 바꾸는 것이었다.
     세로선을 경기 줄과 맞춘다(시안 102 → 우리 91). */
.sb-oddsbox.is-kr .sb-oddsbox__go{ margin-left:91px; }

/* +N — 시안은 sb-more 와 겹쳐 쓴다. 글자 크기는 거기서 온다 */
.kr-more{ justify-content:center; font-size:13px; }

@media (max-width:1023px){
  .sb-oddsbox.is-kr{ padding:10px; }
  .kr-odds, .sb-oddsbox.is-kr .sb-oddsbox__go{ margin:0; }
  .kr-more{ font-size:11px; }
}

/* ==========================================================================
   베팅카트 — 시안을 눌러 재고 맞춘다 (레드 2026-09-26 「카드도 다르자나」)

   ⚠ 앞 블록(「베팅카트 — 시안 값으로」)은 <치수>만 맞췄다. 색과 구조가 남아 있었다.
     머리는 회색 바탕이었고(시안은 채운 색), 담긴 줄에 <왼쪽 띠>가 없었고,
     셈은 세 줄 나열이었다(시안은 두 칸 상자).
   ★ 색은 WHALEY 것으로 바꾼다 — 시안 --gold 자리에 var(--primary).
   ========================================================================== */

/* 머리 — 채운 색. 접어 두어도 눈에 먼저 들어온다 */
.slip__head{ background:var(--primary); color:#fff; }
.slip__head i{ background:var(--bg); color:var(--primary); }
.slip__head-kind{ opacity:.72; }
.slip__head-kind:empty{ display:none; }
.slip__head-kind:empty + .slip__head-odds{ margin-left:auto; }

/* 담긴 줄 — 왼쪽 세로 띠. 무엇이 한 폴더인지 <선>으로 갈린다 */
.slip__pick{ box-shadow:inset 3px 0 0 var(--primary); }
.slip__pick.changed, .slip__pick.is-changed{ box-shadow:inset 3px 0 0 var(--warn, #ffa500); }
.slip__pick.changed .slip__odds, .slip__pick.is-changed .slip__odds{ color:var(--warn, #ffa500); }
.slip__odds{ color:var(--primary); }
/* 아래 줄 — [팀 vs 팀 · 마켓]. 가운뎃점은 흐리게 둬 두 토막이 갈려 읽힌다 */
.slip__pick small i{ margin:0 5px; font-style:normal; color:var(--text-6, var(--text-5)); }

/* 비우기 — 아이콘 옆에 글자 */
.slip__clear{
  display:inline-flex; align-items:center; gap:4px; width:auto; height:auto;
  padding:0; border-radius:0; background:none;
  font-size:10px; font-weight:700; color:var(--text-5);
}
.slip__clear:hover{ color:var(--danger); background:none; }
.slip__clear svg{ width:12px; height:12px; }

/* 셈 — [총 배당 | 예상 당첨금] 두 칸 상자. 총 배당 쪽이 넓다(곱셈 식 자리) */
.slip__calc{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:4px; padding:0; border:0; background:none; }
.slip__calc > div{ display:grid; gap:1px; padding:5px 9px; border-radius:7px; background:var(--bg); }
.slip__calc > div:last-of-type{ text-align:right; }
.slip__calc span{ font-size:10px; font-weight:700; line-height:14px; color:var(--text-5); }
.slip__calc b{ font-size:16px; font-weight:900; line-height:20px; font-variant-numeric:tabular-nums; }
.slip__calc b.is-win{ font-size:14px; white-space:nowrap; color:var(--success); }
.slip__total{ display:flex; align-items:baseline; gap:5px; min-width:0; font-size:16px; }
/* ⚠ 곱셈 식은 <끝만> 줄인다. 「=」 뒤 결과는 언제나 보여야 한다 */
.slip__mul{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10px; letter-spacing:-.2px; font-weight:700; color:var(--text-3); font-variant-numeric:tabular-nums; }
.slip__total i{ flex:none; font-style:normal; font-size:11px; font-weight:700; color:var(--text-5); }
.slip__total em{ flex:none; font-style:normal; }
/* 보너스 — 값 칸이 아니라 <한 줄을 통째로>. 값 칸에 넣으면 열 너비가 눌린다 */
.slip__calc .slip__note{ grid-column:1 / -1; margin:0; font-size:10px; line-height:1.45; }
.slip__calc .slip__note .slip__kind{ margin:0 4px; font-style:normal; }

/* ⚠ .slip__pick b 가 뒤에 있어 칸수 동점으로 이겼다 — 한 단 더 붙여 누른다.
     시안 값 ×0.9 : 고른 것 12.6 · 아래 줄 10.35 */
.slip__pick .slip__sel{ font-size:13px; line-height:18px; }
.slip__pick small{ font-size:10px; line-height:14.4px; }

/* 베팅하기 — 금액을 안 넣었으면 <눌리지 않는 면>이다. 시안은 그림자도 뗀다 */
.slip .btn--cta.slip__bet:disabled{ background:var(--surface-3); color:var(--text-4); box-shadow:none; opacity:1; }

/* 퀵 금액 — KRW 는 시안대로 여섯 칸, 다른 통화는 [최대 · 하프 · 리셋] 세 칸
   (레드 2026-09-26 「KRW외 다른통화는 퀵버튼 없애고 최대 하프 리셋 넣자」) */
.slip__quick[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.slip__quick [data-max]{ color:var(--primary); }
.slip__quick [data-max]:hover{ background:var(--primary); color:#fff; }

/* ==========================================================================
   모바일 — 코리안 +N 은 <제 칸>을 쓴다 (레드 2026-09-26)

   ⚠⚠ sb-more 를 함께 준 뒤로 .sb-more{ position:absolute; top:10px; right:12px }
      에 걸려 경기 줄 오른쪽 위로 떠올랐다. 폭이 376px 로 퍼져 화면 밖에 있었다.
      유러피안 줄에서 +N 을 <모서리에 얹는> 것은 맞다 — 코리안만 되돌린다.
   ========================================================================== */
@media (max-width:1023px){
  .kr-more.sb-more{
    position:static; top:auto; right:auto;
    height:auto; padding:0; font-size:11px;
  }
}

/* ==========================================================================
   다폴더 보너스 줄 — 카트 결에 맞춘다 (레드 2026-09-26 「어울리게」)

   ★ 시안에 없는 <우리 기능>이라 기댈 그림이 없다. 셈 칸 두 개와 같은 모서리 ·
     같은 여백을 쓰고, 색만 강조색을 옅게 깔아 「얹힌 것」으로 읽히게 한다.
   ⚠ 값 칸에 넣지 않는다 — 긴 문장이 열 너비를 잡아 위아래 라벨이 눌린다.
   ========================================================================== */
.slip__calc .slip__note.slip__bonus{
  display:flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:7px;
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  font-size:10px; font-weight:700; color:var(--text-2);
}
/* 폴더 수 — 작은 알약. 라벨과 배수 사이에서 <몇 폴더에 붙었는지>를 쥔다 */
.slip__calc .slip__note.slip__bonus .slip__kind{
  flex:none; margin:0; padding:1px 7px; border-radius:99px;
  background:color-mix(in srgb, var(--primary) 30%, transparent);
  color:#fff; font-size:10px; font-weight:800; font-style:normal; line-height:15px;
}
/* 배수 — 오른쪽 끝에 세워 <얼마가 얹혔는지>를 숫자로 먼저 읽게 한다 */
.slip__calc .slip__note.slip__bonus b{
  margin-left:auto; font-size:13px; font-weight:900;
  color:var(--primary-2, var(--primary)); font-variant-numeric:tabular-nums;
}
/* 못 받을 때 — 같은 자리, 경고색. 사라지면 회원은 까닭을 모른다 */
.slip__calc .slip__note.slip__bonus.is-off{
  background:color-mix(in srgb, var(--warn, #ffa500) 12%, transparent);
  color:var(--warn, #ffa500);
}

/* ⚠ 금액 칸 — 시안은 <넣은 금액은 크게(18→16.2), 안내 글자는 작게(12→10.8)> 한다.
     우리는 늘 작아서 금액을 넣어도 「직접 입력」과 같은 크기였다.
     안내 글자가 작아야 보유금액 · 단위와 같은 높이에 선다. */
.slip__amount input{ font-size:16px; }
.slip__amount input:placeholder-shown{ font-size:11px; }
.slip__amount input::placeholder{ font-weight:700; color:var(--text-5); }

/* ⚠ 목록 줄 라벨은 이제 <홈 · 무 · 원정>이라 짧다 — 흐리게 둘 이유가 없다 (레드 2026-09-26).
     긴 팀 이름을 부드럽게 잘라 내려고 씌웠던 마스크도 뗀다. 자를 것이 없다.
   ★ 주요 경기 카드(.sb-hl)는 팀 이름 그대로라 손대지 않는다. */
.sb-mkt__picks .sb-pick span{
  color:var(--text-2);
  -webkit-mask-image:none;
          mask-image:none;
}

/* ⚠ 보너스 배수가 <너무 어두웠다> — 재 보니 대비 2.28 이다(본문 기준 4.5).
     --primary-2 라는 토큰은 없어서 var() 가 --primary 로 떨어졌고,
     그 색이 12% 로 깐 같은 색 바탕 위에 앉아 거의 안 보였다.
   ★ 강조색을 흰쪽으로 섞어 밝힌다 — 바탕은 그대로 두고 글자만 뜬다. */
.slip__calc .slip__note.slip__bonus b{
  color:color-mix(in srgb, var(--primary) 42%, #fff);
}

/* ==========================================================================
   코리안뷰 — 표시와 머리 줄을 시안이 <화면에 그리는 크기>로 (레드 2026-09-26)

   ⚠⚠ PC 값만 ×0.9 로 맞추고 <모바일 전용 값이 ×0.9 안 된 채> 남아 있었다.
      시안과 나란히 재서 어긋난 것만 적는다.
   ========================================================================== */

/* 표시(1x2 · H · ↑↓) — PC · 모바일 공통. 시안도 미디어쿼리 밖이다 */
.kr-mark--x{ font-size:8px; min-width:16.2px; }
.kr-mark--h{ font-size:11px; }
.kr-mark--up, .kr-mark--down{ font-size:13px; }

@media (max-width:1023px){
  /* 경기 위 한 줄 — [시각][홈팀] vs [원정팀] */
  .kr-head{ font-size:12px; line-height:16.2px; gap:5.4px; }
  .kr-head .kr-when{ gap:3.6px; margin-right:3.6px; }
  .kr-head .kr-when em, .kr-head .kr-when b{ font-size:10px; }
  .kr-head span{ font-size:10px; }

  /* ⚠ 가운데 칸은 <모바일에서 더 크다>(시안 13). PC 값 10.8 이 그대로 내려와 작았다 */
  .kr-mid, .kr-mid--line{ font-size:12px; }

  .kr-match{ gap:5.4px 3.6px; }
  .kr-line{ gap:3.6px; }
}

/* ==========================================================================
   모바일 경기 줄 — 장식을 뺀다 (레드 2026-09-26)

   시안을 모바일 폭에서 재 보니 셋 다 꺼져 있다. 좁은 화면에서는 장식이
   글자와 겹쳐 읽기를 방해한다.
   ⚠ 우리는 왼쪽 번짐을 ::before 가 아니라 <.sb-row 자신의 background-image>
     로 넣어서, 시안의 숨김 규칙만으로는 안 사라졌다.
   ★ PC 는 그대로 둔다 — 시안도 PC 에서는 켜 둔다.
   ========================================================================== */
@media (max-width:1023px){
  .sb-row{ background-image:none; }
  .sb-row::before, .sb-row::after{ display:none; }
  .sb-row__when::before{ display:none; }
}

/* ⚠ 금액 칸은 <바깥 한 칸>이 테두리를 쥔다. 안의 input 에 브라우저 기본 outline 이
     살아 있어, 누르면 칸 안에 상자가 하나 더 생겼다 (레드 2026-09-26). */
.slip__amount input:focus{ outline:none; }
.slip__amount input{ border:0; background:transparent; }

/* ==========================================================================
   카트 머리 · 금액 단위 (레드 2026-09-26)

   ⚠⚠ .slip__head svg{ margin-left:auto } 를 <모든 svg> 에 걸어 두었다.
      머리에는 svg 가 둘(카트 아이콘 · 화살표)이고 .slip__head-kind 에도 auto 가
      있어서, 남은 공간이 <셋으로 나뉘어> 첫 아이콘부터 33px 씩 밀렸다 —
      그래서 「베팅 슬립」이 왼쪽에 안 붙고 가운데로 떠 보였다.
   ★ 시안은 <.slip__head-kind 하나만> auto 다. 화살표는 고정 여백(8 → 7.2)이다.
   ========================================================================== */
.slip__head > svg{ flex:none; width:16.2px; height:16.2px; margin-left:0; }
.slip__head > svg:last-child{ margin-left:7.2px; }

/* ⚠ 단위 「원」이 14px 이었다. 시안은 12 — 보이는 크기 10.8 */
.slip__amount b{ font-size:11px; }

/* ==========================================================================
   코리안뷰 리그 묶음 · 모바일 금액 칸 (레드 2026-09-26)
   ========================================================================== */

/* ⚠ 코리안뷰는 상자가 없다 — 경기 줄이 구분선으로만 이어진다.
     유러피안은 카드가 맞으므로 <코리안일 때만> 뗀다. */
.sb-league__list.is-kr{ border:0; border-radius:0; background:none; }

@media (max-width:1024px){
  /* ⚠⚠ base.css 가 <iOS 확대 방지>로 input 에 16px !important 를 건다.
        의도된 규칙이라 지우면 안 된다 — 누르는 순간 화면이 통째로 확대된다.
     ★ 그래서 <누르기 전에만> 작게 둔다. 포커스가 오면 16px 로 돌아가 확대가 안 난다. */
  .slip__amount input:placeholder-shown:not(:focus){ font-size:11px !important; }
}

/* ⚠ 모바일 거르개 — 시안은 「정렬」 라벨을 숨긴다. 좁은 화면에서 라벨이 자리를 먹어
     두 세그가 가운데로 몰렸다. 라벨을 빼면 좌우 끝으로 벌어진다. */
@media (max-width:1023px){
  .sb-filter{ flex-wrap:nowrap; gap:7.2px; padding:3.6px; }
  .sb-filter__label{ display:none; }
  .sb-seg__btn{ height:25.2px; padding:0 9px; font-size:11px; }
}

/* ==========================================================================
   모바일 유러피안 경기 줄 — 시안 구조 (레드 2026-09-26)

   ⚠⚠ 시안은 모바일에서 <마켓 첫 줄(승무패) 하나만> 보여 준다. 핸디 · 오버언더는
      +N 으로 들어가 본다. 우리는 세 줄을 다 그려서 배당 칸이 오른쪽으로 넘쳐 잘렸다.
   ★ 칸은 <세로 두 단>이다 — 라벨 위, 배당 아래. 시안 54×44 → 보이는 48.6×39.6.
   ⚠ 라벨 글자는 우리 것(홈 · 무 · 원정)을 그대로 쓴다. 시안은 ::before 로
     「승리 · 무승부 · 패배」를 넣지만 레드가 정한 낱말이 다르다.
   ========================================================================== */
@media (max-width:1023px){
  .sb-mkt{ display:none; }
  .sb-mkt:first-child{ display:grid; gap:4.5px; }
  .sb-mkt__head{ display:none; }
  .sb-mkt:first-child .sb-mkt__head{
    display:block; justify-content:flex-start; margin:0; padding-right:39.6px;
    font-size:9px; font-weight:700; color:var(--text-5); line-height:12.6px; white-space:nowrap;
  }
  /* ⚠ 머리의 기준점(b)은 안 적는다 — 첫 줄은 승무패라 기준점이 없다 */
  .sb-mkt:first-child .sb-mkt__head b{ display:none; }
  .sb-mkt:first-child .sb-mkt__picks{ display:flex; gap:3.6px; margin:0; }
  /* ⚠ height 만 주면 <내용이 밀어내> 44 가 된다. line-height 를 눌러 39.6 을 지킨다 */
  .sb-mkt:first-child .sb-pick{
    flex:none; width:48.6px; height:39.6px; padding:0;
    flex-direction:column; justify-content:center; gap:1.8px; border-radius:7.2px;
    line-height:1;
  }
  .sb-mkt:first-child .sb-pick > span,
  .sb-mkt:first-child .sb-pick > b{ line-height:1.15; }
  .sb-mkt:first-child .sb-pick > span{
    flex:none; text-align:center; font-size:9px; font-weight:600; line-height:1; color:var(--text-2);
  }
  .sb-mkt:first-child .sb-pick > b{ font-size:12px; }
  .sb-mkt:first-child .sb-pick.is-on > span{ color:inherit; }

  /* +N — 배경 없이 오른쪽 위 모서리. 「›」로 <들어간다>는 것을 보인다 */
  .sb-row > .sb-more{
    position:absolute; top:5.4px; right:9px; z-index:2; height:auto; min-width:0;
    padding:1.8px 1.8px 1.8px 5.4px; border-radius:3.6px;
    background:none; color:var(--text-5); font-size:10px; font-weight:700;
  }
  .sb-row > .sb-more::after{ content:" ›"; }
  .sb-row > .sb-more.is-open{ background:none; color:var(--primary); }

  .sb-row__when{ padding-left:0; font-size:10px; line-height:14.4px; }
  .sb-team{ gap:6.3px; font-size:12px; font-weight:700; line-height:18px; }
  .sb-team__mark{ width:16.2px; height:16.2px; }
  .sb-team__ha{ display:none; }
  .sb-league + .sb-league{ margin-top:12.6px; }
  .sb-league__head{ padding:0 1.8px 7.2px; }
  .sb-league__list{ gap:5.4px; }
}

/* ==========================================================================
   칸수(specificity)로 지고 있던 셋 (레드 2026-09-26)

   ⚠⚠ 칸수는 미디어쿼리와 무관하다. 「모바일 규칙이니 이기겠지」가 안 통한다.
   ========================================================================== */
@media (max-width:1023px){
  /* 시각 앞 점 · 왼쪽 번짐 — .sb-row[data-sport] 쪽이 (0,2,2) 라 이기고 있었다 */
  .sb-row[data-sport]{ background-image:none; }
  .sb-row[data-sport] .sb-row__when::before{ display:none; }
}

@media (max-width:1024px){
  /* ⚠ base.css 의 input:not(…):not(…):not(…):not(…) 는 (0,4,1) 이다.
       둘 다 !important 이므로 <칸수가 갈랐다> — 이쪽을 (0,5,1) 로 올린다.
     ★ 누르면 16px 로 돌아가 iOS 확대가 안 난다(base.css 의 뜻을 지킨다). */
  .slip .slip__body .slip__amount input:placeholder-shown:not(:focus){ font-size:11px !important; }
}

/* ==========================================================================
   모바일 — 펼친 배당판 좌우를 경기 줄과 맞춘다 · 인기 리그 배너 (레드 2026-09-26)
   ========================================================================== */
@media (max-width:1023px){
  /* ⚠ 경기 줄은 [배당 줄 | +N 36] 두 칸이다. 배당판이 화면 폭을 다 쓰면
       왼쪽은 상자 여백만큼 더 들어가고 오른쪽은 +N 칸까지 넘어간다.
     ★ 왼쪽은 0, 오른쪽은 +N 칸(36) + 사이(3.6) 만큼 들인다. */
  .sb-oddsbox.is-kr{ padding:4px 0 12px; }
  .kr-odds{ margin:0 39.6px 0 0; }
  .sb-oddsbox.is-kr .sb-oddsbox__go{ margin:0; }

  /* 제목도 함께 뺀다 — 본체는 위 .sb-banners 규칙에서 끈다 */
  .sec__head:has(+ .sb-banners){ display:none; }
}

/* ==========================================================================
   모바일 경기 줄 격자 — 시안대로 (레드 2026-09-26)

   ⚠ 시안은 오른쪽 열이 <auto> 다 — 배당 묶음이 <제 내용 크기>만 차지하고
     오른쪽에 붙는다. 우리는 1fr 이라 남은 자리를 다 먹어 칸이 가운데로 퍼졌다.
   ========================================================================== */
@media (max-width:1023px){
  .sb-row[data-sport]{
    position:relative;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"go mkts";
    align-items:end;
    gap:9px;
    padding:9px 10.8px;
  }
  .sb-row > .sb-row__go{ grid-area:go; }
  .sb-row > .sb-mkts{ grid-area:mkts; }
}

/* ⚠ 인기 리그 배너 — 같은 값을 주는 규칙이 여러 블록에 흩어져 있어 못박는다.
     (나머지 항목은 이미 먹고 있었다. 안 먹는 줄 알았던 것은 <내가 잰 대상이
      주요 경기 카드였기 때문>이다 — 경기 목록 줄은 진작 맞아 있었다.) */
@media (max-width:1023px){
  .container > .sb-banners,
  .sb-page .sb-banners{ display:none !important; }
}

/* ⚠ 모바일 탭 줄 · 검색창이 <PC 값 그대로> 내려와 있었다 (레드 2026-09-26).
     시안 모바일: 탭 38 · 0 12 · 14  /  검색창 38  →  보이는 34.2 · 0 10.8 · 12.6 · 34.2
     검색창은 28px 이었다. 시안 모바일은 38 — 보이는 34.2. */
@media (max-width:1023px){
  .sb-tab{ height:34.2px; padding:0 10.8px; font-size:13px; }
  .sb-search{ height:34.2px; }
}

/* ==========================================================================
   ⚠ 빈 칸이 자리를 먹던 것 · 머리 수평정렬 (레드 2026-09-26)
   ========================================================================== */

/* ⚠⚠ 코리안 칸의 자식이 넷이다 — [빈 span][배당][표시][팀 이름(숨김)].
     맨 앞 <빈 span> 은 라벨을 감췄어도 <요소로 남아> space-between 의 한 칸을 먹는다.
     그래서 배당이 왼쪽에 안 붙고 가운데로 갔다. */
.kr-pick > span:empty{ display:none; }

@media (max-width:1023px){
  /* ⚠ +N 높이가 28 이었다 — 시안은 <글자 높이만큼>(auto)이라 마켓 이름과 수평이 맞는다 */
  .sb-row > .sb-more{ height:auto; line-height:1.3; }
}

/* ==========================================================================
   검색바 — 시안 값으로 못박는다 (레드 2026-09-26)
     시안 38 · 0 14 · r12 · 글자 14 · 아이콘 20  →  보이는 34.2 · 0 12.6 · 10.8 · 12.6 · 18
   ⚠ 모서리가 알약처럼 둥글었다 — 접기 단추 시절의 --r-full 이 남아 있었다.
   ========================================================================== */
@media (max-width:1023px){
  .sb-top .sb-search{
    height:34.2px; padding:0 12.6px; border-radius:10.8px;
    gap:9px; font-size:13px;
  }
  .sb-top .sb-search svg{ width:18px; height:18px; }
  /* ⚠ 누르기 전에만 작게 — 포커스가 오면 16px 로 돌아가 iOS 확대가 안 난다 */
  .sb-top .sb-search input:placeholder-shown:not(:focus){ font-size:13px !important; }
}

/* ⚠ 시안 .sb-team__name 에는 크기가 <없다> — .sb-team 에서 상속받는다.
     우리는 PC 값 14.4 를 박아 두어 모바일에서도 그대로 내려왔다 (레드 2026-09-26). */
@media (max-width:1023px){
  .sb-row .sb-team__name{ font-size:inherit; }
}

/* ⚠ .kr-grid 칸(조합 · 정확한스코어 · 홀짝)의 이름은 <.kr-team 클래스가 없어>
     크기를 못 받았다 — OddButton 이 기본 span 으로 그린다. 여기서 직접 준다.
     값은 .kr-team 과 같다(시안 12 → 보이는 10.8). */
.kr-pick > span{ font-size:11px; font-weight:700; color:var(--text-2); }
.kr-pick > span:empty{ display:none; }

/* ★★ 스포츠 페이지 여백을 <최소>로 (레드 2026-09-27 「스포츠 페이지 여백 최소한으로」).
     배너 · 탭 · 종목 줄 · 주요 경기 레일 · 정렬 · 리그 사이가 모두 24px(container gap)였고,
     리그 덩이는 margin-top 24px 을 한 번 더 받아 48px 씩 벌어져 있었다.
   ⚠ 이 화면(.sb-top 을 직계로 둔 container)만 줄인다. 다른 페이지의 섹션 간격은 그대로다. */
.container:has(> .sb-top){ gap:12px; }
.container:has(> .sb-top) > .sb-league,
.container:has(> .sb-top) > .sb-league + .sb-league{ margin-top:0; }
/* 목록 머리로 데려가는 빈 표식 — 저도 gap 을 한 번 먹으므로 그만큼 되돌린다 */
.container:has(> .sb-top) > .sb-anchor{ margin-top:-12px; }

/* 제목 없는 레일(.sec.is-bare) — 화살표를 레일 양 끝 가운데에 얹는다. 모바일은 원래대로 숨는다(.sec__navs) */
.sec.is-bare{ position:relative; }
.sec__navs.is-over{
  position:absolute; top:50%; left:-8px; right:-8px; z-index:3;
  transform:translateY(-50%); justify-content:space-between; pointer-events:none;
}
.sec__navs.is-over .sec__nav{
  pointer-events:auto; border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}

/* ★★ 경기 카드 안 여백을 <최소>로 (레드 2026-09-27 「경기 카드안에 여백 최소한으로」).
     빈 틈의 정체 — 레일 안 카드 하나라도 팀 이름이 두 줄이면(여섯 중 하나, 75px) 카드가 모두 그 높이로 늘고,
     한 줄짜리 카드는 남는 17.5px 을 「최종 승패」 위(margin-top:auto)에 몰아 받았다.
   ⚠ 두 줄 이름은 그대로 둔다(레드 2026-09-11 「Washingto… 잘림」) — 대신 카드가 <제 높이>를 갖는다.
     이름이 두 줄인 카드만 그만큼 길어진다. 고정 여백도 한 칸씩 줄인다. */
.sb-hls{ align-items:flex-start; }
.sb-hl__teams{ margin:6px 0 4px; }
.sb-hl__mkt{ margin-top:0; }
.sb-hl .sb-mkt__picks{ margin-top:4px; }
@media (max-width:1024px){
  .sb-hl__teams{ margin:4px 0 2px; }
}

/* ★ 카드 <아래 끝>은 맞춘다 (레드 2026-09-27 두 번째 「이부분도 체크」 — 이름 두 줄 카드만 길어 배당 줄이 어긋났다).
     카드는 다시 같은 높이(stretch)로 서고, 「최종 승패」는 팀 이름 바로 아래(4px),
     남는 틈은 <배당 칸 위>로 보내 배당 줄이 모든 카드에서 한 선에 선다.
     이름이 두 줄인 카드가 레일에 없으면 남는 틈도 없다. */
.sb-hls{ align-items:stretch; }
.sb-hl__mkt{ margin:0 0 4px; }
.sb-hl .sb-mkt__picks{ margin-top:auto; }

/* ★ 「+0」 — 더 볼 배당이 없는 줄 (레드 2026-09-27 「더보기 없는건 +0 처리」).
     자리는 지키되 눌러지지 않는 것으로 보이게 — 글자를 흐리게, 손가락 모양을 안 준다. */
.kr-more.is-empty{ color:var(--text-6, var(--text-5)); cursor:default; opacity:1; }
.kr-more.is-empty:hover{ background:var(--surface-2); }

/* ★★ 유러피안뷰 「+0」 (레드 2026-09-27 「유러피안뷰도 +0 맞춰줘」) — 코리안뷰(.kr-more.is-empty)와 같게.
     예전(9/20)에는 그 폭에서 0 이면 단추째 숨겼다. 이제는 <흐린 +0 으로 두고 눌러지지 않게> 한다.
   ⚠ 넓을 때와 좁을 때 수가 달라 폭마다 따로 정한다. 둘 다 0 인 줄은 두 폭 모두 +0 이다.
   ⚠ 이 덩이는 파일 <맨 끝>이어야 한다 — 위쪽 ≤1024 규칙(.sb-more--no-wide{display:inline-flex})보다 뒤에 서야 이긴다. */
.sb-more--no-wide{ display:inline-flex; color:var(--text-6, var(--text-5)); pointer-events:none; cursor:default; }
@media (max-width:1024px){
  .sb-more--no-wide{ color:var(--text-3); pointer-events:auto; cursor:pointer; }
  .sb-more--no-narrow{ display:inline-flex; color:var(--text-6, var(--text-5)); pointer-events:none; cursor:default; }
}

/* ★★ 모바일 스포츠 상단 배너 <복구> (레드 2026-09-27 「스포츠 상단배너 복구」).
     9/26 에 시안대로 모바일에서 뺐던 것을 되살린다 — 옆으로 밀어 보는 한 줄(한 장 88%).
     ⚠ 스포츠 화면(.sb-top 을 품은 container)만. 예측마켓 배너(.mk-banners)는 그대로 둔다.
     ⚠ 위의 숨김 규칙이 !important 라 같은 무게로 뒤에서 이긴다.
   ★ 배너는 <고정되지 않는다> — 스크롤하면 위로 사라지고, 붙는 것은 탭 · 검색 줄(.sb-top)뿐이다
     (레드 「하단으로 스크롤시 고정메뉴는 메뉴만」). */
@media (max-width:1023px){
  .container:has(> .sb-top) > .sb-banners{
    display:flex !important; gap:8px; position:static;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .container:has(> .sb-top) > .sb-banners::-webkit-scrollbar{ display:none; }
  .container:has(> .sb-top) > .sb-banners > .sb-banner{ flex:none; width:88%; min-height:120px; scroll-snap-align:start; }
}

/* ★★ 모바일 배당 칸 — <기준점 → 이름> 차례 (레드 2026-09-27 「프리매치 기준점 팀명 앞으로 (모바일만)」 · 「base_line bet_name」).
     폰 칸은 좁아 「워싱턴 내셔널스 -1.0」 의 기준점이 이름 끝에 밀려 흐림 처리(mask)에 가려졌다.
     기준점을 앞으로 빼면 잘리는 쪽은 늘 <이름 끝>이다 — 기준점은 어떤 이름이든 남는다.
   ⚠ 마크업은 그대로(이름 → em). 순서만 CSS order 로 바꾼다 — PC 는 지금 차례 유지. */
@media (max-width:1023px){
  .mt-pick > span{ display:flex; align-items:center; }
  .mt-pick > span > em{ order:-1; flex:none; margin:0 5px 0 0; }
}

/* ★ 주요 경기 카드의 배당 칸 이름 — 홈 · 무 · 원정 / HOME · DRAW · AWAY (레드 2026-09-27).
     영어는 대문자로 세운다(한글에는 아무 영향이 없다). 목록 줄의 짧은 이름(shortSide)과 같은 낱말이다. */
.sb-hl .sb-mkt__picks button > span{ text-transform:uppercase; }

/* ★★ 코리안뷰 배당 등락 ▲▼ — <숫자 바로 오른쪽, 한 줄 안>에 (레드 2026-09-27 「코리안뷰 배당 등락 표기 어긋남」).
     전에는 position:absolute 인데 <b> 에 기준 자리(relative)가 없어 <단추 모서리>에 붙었다 —
     홈 칸은 오른쪽 위 모서리, 원정 칸은 왼쪽 위 모서리, 가운데는 가운데 위로 칸마다 제각각이었다.
   ★ 유럽식 칸과 같은 약속 — 자리를 <늘 비워 두고> 글자만 채운다. 뜰 때 숫자가 옆으로 밀리지 않는다. */
.kr-pick b::after,
.kr-pick--away b::after{
  content:''; position:static; display:inline-block; width:.7em; margin-left:.15em;
  font-size:.62em; line-height:1; vertical-align:.18em; text-align:center;
}
.kr-pick.tr-up b::after{ content:'▲'; }
.kr-pick.tr-down b::after{ content:'▼'; }

/* ★ 베팅 슬립 머리의 담긴 개수 — 글자는 흰색 (레드 2026-09-27) */
.slip__head i{ color:#fff; }

/* ==========================================================================
   ★★ 코리안뷰 경기 줄에 <유러피안 카드와 같은 강조> (레드 2026-09-27 「코리안뷰 너무 휑한데 · 유러피언뷰처럼 하이라이팅」).
     유러피안 .sb-row[data-sport] 와 같은 약속이다 —
       ① 왼쪽 종목색 띠(5px)  ② 왼쪽에서 번지는 종목색 바탕  ③ 시각 칸 뒤 종목 공 그림(15%)
       ④ 시각 앞 종목 점  ⑤ 둥근 테두리 카드 · 올리면 테두리 강조
   ⚠ 같은 값을 쓴다(22% · 5px · .15). 한쪽만 바꾸면 두 보기가 다른 화면처럼 보인다 — 고칠 때 둘을 같이 본다.
   ⚠ 그림 · 띠는 z-index:-1 + isolation 으로 <내용 뒤>에 깐다. 칸마다 z-index 를 줄 필요가 없다.
   ========================================================================== */
.kr-match[data-sport]{
  position:relative; isolation:isolate; --sp:var(--text-5);
  padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:var(--r, 12px);
  background:
    radial-gradient(90% 190% at 0% 50%, color-mix(in srgb, var(--sp) 22%, transparent) 0%, transparent 42%),
    var(--surface-1);
  transition:border-color var(--t-color);
}
.kr-match[data-sport] + .kr-match[data-sport]{ margin-top:8px; border-top:1px solid var(--line); }
.kr-match[data-sport]:hover{ border-color:var(--primary); }
.kr-match[data-sport]::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; border-left:5px solid var(--sp);
}
.kr-match[data-sport]::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:36px; top:50%; translate:0 -50%; height:78px; aspect-ratio:1;
  background:var(--sp); opacity:.15;
  -webkit-mask:var(--sp-glyph) no-repeat center / contain;
          mask:var(--sp-glyph) no-repeat center / contain;
}
/* ⚠ 시각은 <b><b>오늘</b> 22:30</b> 로 b 가 겹쳐 있다 — 바깥 b 하나에만 점을 찍는다(> b) */
.kr-match[data-sport] .kr-when:not(.is-live) > b::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--sp); margin-right:7px; vertical-align:2px;
  box-shadow:0 0 8px color-mix(in srgb, var(--sp) 70%, transparent);
}

.kr-match[data-sport="soccer"]            { --sp:var(--sp-soccer);            --sp-glyph:url("/assets/design/img/sports-icon/soccer-20260915.webp"); }
.kr-match[data-sport="basketball"]        { --sp:var(--sp-basketball);        --sp-glyph:url("/assets/design/img/sports-icon/basketball-20260915.webp"); }
.kr-match[data-sport="baseball"]          { --sp:var(--sp-baseball);          --sp-glyph:url("/assets/design/img/sports-icon/baseball-20260915.webp"); }
.kr-match[data-sport="volleyball"]        { --sp:var(--sp-volleyball);        --sp-glyph:url("/assets/design/img/sports-icon/volleyball-20260915.webp"); }
.kr-match[data-sport="ice-hockey"]        { --sp:var(--sp-ice-hockey);        --sp-glyph:url("/assets/design/img/sports-icon/ice-hockey-20260915.webp"); }
.kr-match[data-sport="tennis"]            { --sp:var(--sp-tennis);            --sp-glyph:url("/assets/design/img/sports-icon/tennis-20260915.webp"); }
.kr-match[data-sport="handball"]          { --sp:var(--sp-handball);          --sp-glyph:url("/assets/design/img/sports-icon/handball-20260915.webp"); }
.kr-match[data-sport="american-football"] { --sp:var(--sp-american-football); --sp-glyph:url("/assets/design/img/sports-icon/american-football-20260915.webp"); }
.kr-match[data-sport="e-games"]           { --sp:var(--sp-e-games);           --sp-glyph:url("/assets/design/img/sports-icon/e-games-20260915.webp"); }
.kr-match[data-sport="mma-boxing"]        { --sp:var(--sp-mma-boxing);        --sp-glyph:url("/assets/design/img/sports-icon/mma-boxing-20260915.webp"); }

/* 폰 — 유러피안과 같이 공 그림은 뺀다(칸이 좁아 팀 이름과 겹친다). 띠 · 바탕 · 점은 남긴다 */
@media (max-width:1023px){
  .kr-match[data-sport]{ padding:9px 8px 9px 12px; }
}
@media (max-width:640px){
  .kr-match[data-sport]::after{ display:none; }
}

/* ★★ 코리안뷰 공 그림이 <카드 밖으로 튀어나갔다> (레드 2026-09-27 「튀어나간다」).
     78px 고정이라, 배당 줄이 하나뿐인 경기(테니스 승패 한 줄 · 카드 높이 ~70px)에서 위아래로 삐져나왔다.
   ★ 크기를 <카드 높이에서 위아래 6px 씩 뺀 값>으로 — 줄이 셋인 카드는 그대로 78, 한 줄 카드는 그만큼 작아진다.
   ★ 그래도 넘치는 일이 없게 카드가 잘라 낸다(overflow:hidden). 카드 안에 밖으로 나갈 것은 없다. */
.kr-match[data-sport]{ overflow:hidden; }
.kr-match[data-sport]::after{ height:min(78px, calc(100% - 12px)); }

/* ★★ 코리안뷰는 <색만> — 공 그림은 뺀다 (레드 2026-09-27 「공크기를 맞추면 큰애들이랑 언밸런스 · 코리안뷰는 색만넣자 아이콘은빼고」).
     줄 수에 따라 카드 높이가 54 ~ 150px 로 달라, 공을 카드에 맞추면 크기가 제각각이 되고 고정하면 튀어나간다.
     띠 · 번지는 바탕 · 시각 앞 점(종목색)은 그대로 둔다. */
.kr-match[data-sport]::after{ display:none; }

/* ==========================================================================
   ★★ 코리안뷰 +N 펼친 판 — 예쁘게 (레드 2026-09-27 「이안에도 예쁘게 처리좀해줘」).
     ① 판은 위 경기 카드에 <붙은 서랍>이다 — 카드 아래 모서리를 펴고, 같은 종목색 띠 · 바탕을 잇는다.
     ② 마켓마다 <작은 카드>로 나눈다. 제목 앞에 종목색 막대.
     ③ 「+24」 더보기는 점선 상자 대신 <부드럽게 채운 단추>.
   ⚠ 판은 경기 카드의 <바로 뒤 형제>다(.kr-match + .sb-oddsbox). 종목 정보는 카드에만 있어
     형제 선택자로 색을 넘긴다 — 종목을 새로 달지 않는다.
   ========================================================================== */
.kr-match[data-sport]:has(+ .sb-oddsbox.is-kr){
  border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent;
}
.kr-match[data-sport] + .sb-oddsbox.is-kr{
  --sp:var(--text-5);
  position:relative; isolation:isolate;
  padding:12px 14px 14px 18px;
  border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r, 12px) var(--r, 12px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sp) 8%, transparent), transparent 120px),
    color-mix(in srgb, var(--surface-1) 70%, var(--bg));
}
.kr-match[data-sport] + .sb-oddsbox.is-kr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; border-left:5px solid color-mix(in srgb, var(--sp) 55%, transparent);
}
.sb-oddsbox.is-kr + .kr-match[data-sport]{ margin-top:8px; }

.kr-match[data-sport="soccer"]            + .sb-oddsbox.is-kr{ --sp:var(--sp-soccer); }
.kr-match[data-sport="basketball"]        + .sb-oddsbox.is-kr{ --sp:var(--sp-basketball); }
.kr-match[data-sport="baseball"]          + .sb-oddsbox.is-kr{ --sp:var(--sp-baseball); }
.kr-match[data-sport="volleyball"]        + .sb-oddsbox.is-kr{ --sp:var(--sp-volleyball); }
.kr-match[data-sport="ice-hockey"]        + .sb-oddsbox.is-kr{ --sp:var(--sp-ice-hockey); }
.kr-match[data-sport="tennis"]            + .sb-oddsbox.is-kr{ --sp:var(--sp-tennis); }
.kr-match[data-sport="handball"]          + .sb-oddsbox.is-kr{ --sp:var(--sp-handball); }
.kr-match[data-sport="american-football"] + .sb-oddsbox.is-kr{ --sp:var(--sp-american-football); }
.kr-match[data-sport="e-games"]           + .sb-oddsbox.is-kr{ --sp:var(--sp-e-games); }
.kr-match[data-sport="mma-boxing"]        + .sb-oddsbox.is-kr{ --sp:var(--sp-mma-boxing); }

/* 마켓 한 덩어리 — 카드 없이 제목 + 줄, 마켓 사이는 가는 선.
   ★ 레드 2026-09-28 「위 대표배당이랑 아래 상세배당 디자인이 안 맞는다」.
     전에는 마켓마다 작은 카드(옆 여백 12 + 테두리 1)를 씌워, 줄은 위와 맞는데 <카드 테두리가 양옆으로 13px 튀어나왔다>.
     대표배당은 카드 없이 줄만 있으니 상세도 줄만 둔다 — 세로선이 위아래로 한 줄이 된다. */
.sb-oddsbox.is-kr .kr-odds{ display:grid; gap:0; }
.sb-oddsbox.is-kr .mt-mkt{ padding:12px 0 6px; border:0; border-radius:0; background:none; }
.sb-oddsbox.is-kr .mt-mkt + .mt-mkt{ border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sb-oddsbox.is-kr .mt-mkt__head{ padding:0 2px 8px; }
.sb-oddsbox.is-kr .mt-mkt__name{ display:inline-flex; align-items:center; gap:8px; }
.sb-oddsbox.is-kr .mt-mkt__name::before{
  content:""; flex:none; width:4px; height:14px; border-radius:2px; background:var(--sp, var(--primary));
  box-shadow:0 0 8px color-mix(in srgb, var(--sp, var(--primary)) 60%, transparent);
}

/* 「+24」 — 점선 상자 대신 부드럽게 채운 단추 */
.sb-oddsbox.is-kr .mt-mkt__more{
  width:100%; height:36px; margin:8px 0 0; border:0; border-radius:10px;
  background:color-mix(in srgb, var(--surface-2) 80%, transparent); color:var(--text-3);
  font-size:13px; font-weight:800; letter-spacing:.02em;
  transition:background var(--t-bg), color var(--t-color);
}
.sb-oddsbox.is-kr .mt-mkt__more:hover{ background:color-mix(in srgb, var(--primary) 22%, var(--surface-2)); color:var(--text); }

@media (max-width:1023px){
  .kr-match[data-sport] + .sb-oddsbox.is-kr{ padding:10px 8px 10px 12px; }
  .sb-oddsbox.is-kr .mt-mkt{ padding:10px 0 4px; }
}
/* ⚠ 목록(.sb-league__list.is-kr)이 격자라 칸 사이 간격(실측 5.4px)이 서랍과 카드 사이에도 벌어졌다.
     간격은 0 으로 두고, 카드 사이는 위 margin-top:8px(카드+카드 · 서랍+카드)이 맡는다 */
.sb-league__list.is-kr:has(> .kr-match[data-sport]){ row-gap:0; }

/* ★ 코리안뷰 시각이 배당 칸에 <붙었다> (레드 2026-09-27 「시간이 너무붙었다!」).
     시각 칸 96px 안에 종목 점(8 + 7px)이 더해져 「내일 02:05」 끝이 배당 칸에 닿았다.
   ★ PC 에서만 시각 칸을 118px 로, 칸 사이를 10px 로 넓힌다. 폰은 시각이 위 한 줄(kr-head)이라 상관없다.
   ⚠ 펼친 판(서랍)의 배당 줄도 위 경기 줄과 세로선이 맞게 같이 민다
     (카드 안 줄 시작 = 16 + 118 + 10 = 144 · 서랍 16+2 → 126 / 오른쪽 12+58+10 − 14 = 66).
     ⚠ 2026-09-28 마켓 카드(12+1)를 걷으면서 113 · 53 → 126 · 66. 카드를 다시 씌우면 이 값도 같이 바꾼다. */
@media (min-width:1024px){
  .kr-match[data-sport]{ grid-template-columns:118px minmax(0,1fr) 58px; column-gap:10px; }
  .kr-match[data-sport] + .sb-oddsbox.is-kr .kr-odds{ margin:0 66px 0 126px; }
}

/* ==========================================================================
   ★★ 코리안뷰 휴대폰 시안 (레드 2026-10-03 「이 시안대로 · 배치만 스샷 배치 · 색감은 우리 색감」)

   머리 줄  [리그 엠블럼(없으면 종목 아이콘) · 리그 이름 …… 시각 | +N]   ← 팀 이름은 뺀다(칸마다 적힌다)
   배당 줄  [홈팀 · 기호 · 배당] [무승부 배당 · 기준점] [배당 · 기호 · 원정팀]   ← 모든 줄, 토탈 줄도 팀 이름
   ★ 기호는 H(핸디) · ↑(오버) · ↓(언더)만 — 승무패 줄은 기호 없음(스샷). 색은 지금 우리 색 그대로.
   ★ 팀 이름이 넘칠 때만 끝을 흐린다(.is-long 은 SportsPage 가 재서 붙인다 — 「길어지면 흐리기」).
   ⚠ PC 는 그대로다. .kr-match .kr-… 로 칸수를 올린다 — 위쪽 휴대폰 규칙들이 (0,3,0) 까지 있다.
   ========================================================================== */
.kr-league-img, .kr-sport{ display:none; }
@media (max-width:1023px){
  /* 머리 줄 = [엠블럼 · 리그 …… 시각 | +N], 아래 줄 = 배당 전체 폭 */
  .kr-match{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head more" "lines lines"; }
  .kr-match .kr-head{ gap:6px; }
  .kr-match .kr-league-img{ display:block; flex:none; width:18px; height:18px; object-fit:contain; }
  .kr-match .kr-sport{
    display:block; flex:none; width:16px; height:16px; background:var(--sp, var(--text-4));
    -webkit-mask:var(--sp-glyph) no-repeat center / contain; mask:var(--sp-glyph) no-repeat center / contain;
  }
  .kr-match .kr-head .kr-league{ flex:1 1 auto; min-width:0; font-size:12px; font-weight:800; color:var(--text); }
  .kr-match .kr-head .kr-when{ flex:none; margin:0 0 0 auto; }

  .kr-match .kr-more.sb-more{
    grid-area:more; align-self:center; width:auto; min-width:0; height:auto;
    padding:0 2px 0 8px; border-radius:0; background:none;
    color:var(--primary-2); font-size:12px; font-weight:800; line-height:16px;
  }
  .kr-match .kr-more.sb-more:hover{ background:none; color:var(--primary); }
  .kr-match .kr-more.sb-more.is-open{ background:none; color:var(--primary); }
  .kr-match .kr-more.sb-more.is-empty{ color:var(--text-6, var(--text-5)); }

  /* 배당 칸 — [팀 이름(남는 폭) · 기호 · 배당] / 원정은 거울 */
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick{ height:38px; gap:5px; padding:0 9px; }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick .kr-team.is-team{
    display:block; flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:clip;
    font-size:11px; font-weight:700; color:var(--text-3);
  }
  /* ⚠ 단추는 글자를 가운데 정렬로 물려준다 — 홈은 왼쪽, 원정은 오른쪽으로 못박는다 */
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick--home .kr-team{ text-align:left; }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick--away .kr-team{ text-align:right; }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick .kr-team.is-long{
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 16px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 16px), transparent);
  }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick.is-on .kr-team{ color:rgba(255,255,255,.78); }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-mark{ min-width:0; }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-mark--x{ display:none; }   /* 승무패 줄은 기호 없음 */
}
@media (max-width:1023px){
  /* ① 의 짝 — 펼친 배당판이 +N 칸 폭(39.6)만큼 비워 두던 것을 없앤다. 경기 줄이 이제 전체 폭이다 */
  .kr-odds{ margin:0; }
}

/* ★ 코리안뷰 오버언더 기준점 = 레드 계열 (레드 2026-10-03 「오버언더 기준점 레드계열로」). PC · 모바일 공통.
     핸디캡 기준점은 청록(.kr-mid--line) 그대로 — 둘이 한눈에 갈린다. 색은 오버 표시(↑ #ff4d5e)와 같은 값 */
.kr-mid.kr-mid--ou{ color:#ff4d5e; }

/* ★ 코리안뷰 휴대폰 — 리그 제목 줄(종목 아이콘 · 리그 · 나라 · 접기)을 없앤다 (레드 2026-10-03 「이거 없애자」).
     경기 카드 머리 줄이 리그 엠블럼 · 리그 이름을 적어 같은 말이 두 번이었다. 리그 사이는 카드 사이와 같은 8px.
   ⚠ 접기 단추도 같이 사라진다 — 숨긴 채 접히는 일은 없다(접힘은 그 단추로만 바뀐다). PC · 유러피안은 그대로 */
@media (max-width:1023px){
  .sb-league.is-kr > .sb-league__head{ display:none; }
  /* ⚠ 리그 사이 = 부모(.container) gap 12 + 리그 아래 10 + 위 8 = 30 이었다. 아래 0 · 위 -4 로 카드 사이와 같은 8 */
  .sb-league.is-kr{ margin-bottom:0; }
  .sb-league.is-kr + .sb-league.is-kr{ margin-top:-4px; }
}
@media (max-width:1023px){
  /* ★ 가운데 칸(무승부 배당) 가운데 정렬 (레드 2026-10-03 「가운데 정렬」).
     ⚠ 위의 :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick{padding:0 9px; gap:5px} 가 가운데 칸에도 걸리고, 비어 있는 이름 칸(span)이 gap 만큼 밀었다 */
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick--mid{ justify-content:center; padding:0; gap:0; }
  :is(.kr-match, .sb-oddsbox.is-kr) .kr-pick--mid > span:empty{ display:none; }
}


/* ── 리그 · 경기 정보 새 창 위젯 (레드 2026-10-05) ──────────────────────────
   위젯이 있는 리그 이름 · 팀 이름에만 붙는다(SportsWidget.widgetLink). 누르면 새 창.
   점선 밑줄로 「눌린다」를 알린다 — 휴대폰은 마우스를 올릴 수 없어 늘 보이게 둔다. */
.has-widget{ cursor:pointer; text-decoration:underline dotted; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); text-underline-offset:3px; }
.has-widget:hover{ text-decoration-style:solid; text-decoration-color:currentColor; }
/* 배너 제목(리그 이름)은 원래 클릭이 꺼져 있다(카드 전체가 리그 목록 링크). 위젯이 있으면 글자만큼 켜서 투명 링크 위로 올린다 (레드 2026-10-05) */
.sb-banner__title.has-widget{ pointer-events:auto; position:relative; z-index:2; width:max-content; max-width:100%; }