/*
 * 아테나 스포츠 — 판과 배팅카트.
 *
 * ════════════════════════════════════════════════════════════════════
 *  이 시트는 2026-09-13 에 **통째로 바뀌었습니다.**
 * ════════════════════════════════════════════════════════════════════
 *
 * 여기 있던 것은 아테나가 스스로 세운 판이었습니다 — 면이 아니라 선,
 * 카드가 없는 목록, `ath-` 이름. 그 판을 하루에 세 번 다듬었고 잰 수도
 * 다 남아 있습니다. **그런데 운영자가 그 방향을 접었습니다:**
 *
 *     「스포츠 디자인 그냥 우리 제우스나 다른 포세이돈 이런 거랑
 *      같은 레이아웃 쓰는 게 나을 듯? 모든배팅 이거 버튼도 색 좀 넣고.」
 *
 * 「짜임만인지 색까지인지」를 되물었고 **「통째로 — 색까지」** 였습니다.
 * 그래서 이 파일은 이제 포세이돈의 스포츠 시트 두 장(`sport.css` 와
 * `cart.css`)의 **사본**입니다. 울타리만 `[data-skin="athena"]` 로
 * 바꿨습니다.
 *
 * (그 두 장이 어느 뿌리에 있는지는 여기 안 적습니다. 시트가 남의 뿌리
 * 이름을 대면 이음매 검사가 물고, 그 검사가 무는 것이 맞습니다 — 주석에
 * 적힌 경로는 언젠가 `url()` 이 됩니다. 찾는 길은 `assets.ts` 입니다.)
 *
 * 예전에 아테나에 걸려 있던 「기존 넷과 겹치지 않을 것」이 이 결정에
 * 부딪칩니다. 그 문단은 `palette.css` 머리말에 있고, 거기에 뒤집힌
 * 경위를 적었습니다 — **지우지 않았습니다.** 같이 읽으십시오.
 *
 * ── 가리키지 않고 베낀 이유 ──────────────────────────────────
 *
 * 아테나가 포세이돈의 시트를 **싣지** 않습니다. 이 나무에 선례가 있습니다
 * — 아테나의 밴더 그림이 「파일은 자기 뿌리에 복사합니다. 포세이돈 쪽을
 * 가리키면 그쪽 배정이 바뀌는 날 아테나가 같이 바뀌고, 아무도 그것을
 * 아테나의 변경으로 읽지 못합니다」. 시트도 같습니다. 포세이돈의 판을
 * 고치는 사람이 아테나까지 고치게 되면 안 됩니다.
 *
 * 사본이므로 위쪽 `--p-*` 한 덩어리도 같이 왔습니다(본의 `ui.css`).
 * 그 값들은 전부 `var(--t-*)` 를 읽으므로, 색은 여전히 운영자가 고른
 * 조합에서 나옵니다 — 박힌 것이 아닙니다.
 *
 * ── **베끼지 않은 것** — 맨 아래 문단들 ──────────────────────
 *
 * 본을 그대로 옮기면 오늘 고친 것이 되돌아가는 자리가 있습니다. 재서
 * 찾았습니다. 포세이돈은 `1150` 에서 **기준선 있는 값 칸 16개가 16개 다**
 * 잘립니다(`「FC 스파르타 트르나바[-1.5]」`) — 이름과 기준선이 한 마디에
 * 있고 그 마디에 `text-overflow: ellipsis` 가 걸려 있기 때문입니다.
 * 아테나가 오늘 아침 고친 바로 그 버그이고, 잘리는 꼬리가 기준선이라
 * **거는 대상이 바뀝니다.**
 *
 * 그래서 값 칸의 속은 안 베꼈습니다. 그 외 아테나가 지켜야 할 것들도
 * 파일 끝 「본을 고쳐 쓰는 자리」에 모아 두었습니다 — 본과 다른 곳은
 * 거기뿐이고, 각 문단이 왜 다른지 말합니다.
 */

[data-skin="athena"] {
  /*
   * ── 색은 여기서 안 정합니다 ──────────────────────────────
   *
   * `--t-*` 는 **조합의 씨앗**이고 레이아웃이 부어 줍니다
   * (`lib/site-themes.ts`). 운영자가 개발자페이지에서 조합을 고르면 그
   * 여덟 개가 바뀌고, 이 아래 전부가 따라옵니다 — 시트는 배포 그대로.
   *
   * 뒤의 값은 씨앗이 안 왔을 때의 답입니다(조합을 안 고른 사이트, 정적
   * 미리보기). 오션의 값이라 기본이 곧 이 export 의 색입니다.
   */
  --p-accent: var(--t-accent, #1fb6ff);
  --p-accent-rgb: var(--t-accent-rgb, 31 182 255);
  --p-accent-deep: var(--t-accent-deep, #0a8fd6);
  /* 강조색 채움 위의 글자. 밝은 강조색에는 어두운 잉크가 옵니다. */
  --p-accent-ink: var(--t-accent-ink, #ffffff);
  --p-accent-soft: var(--t-accent-soft, #bfe7ff);
  /*
   * 돈의 색. 이 export 의 얼굴이 **파랑 + 옐로우골드**라, 금액·상금·배당은
   * 조작과 다른 색으로 찍습니다 — 한 색으로 다 하면 무엇이 내 돈인지
   * 안 보입니다 (2026-09-04 사용자 지적).
   */
  --p-money: var(--t-money, #e8bd55);
  --p-money-rgb: var(--t-money-rgb, 232 189 85);
  --p-money-soft: var(--t-money-soft, #ffe0a3);

  --p-bg: var(--t-panel, #141828);
  --p-bg-deep: var(--t-sunk, #0d1220);
  /*
   * 게임사 카드의 **위쪽** 바탕 — 판보다 강조색 쪽으로 한 뼘.
   *
   * 시안에서는 `#1a4066` 이었는데 그건 파랑이 박힌 값입니다. 금색 조합에서
   * 카드 위만 파래지면 안 되므로 조합의 강조색에서 끌어냅니다.
   */
  --p-vc-top: var(
    --t-vc-top,
    color-mix(in srgb, var(--t-panel, #141828) 78%, var(--t-accent, #1fb6ff))
  );
  --p-line: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
  --p-line-strong: rgb(var(--t-veil-rgb, 255 255 255) / 0.14);
  --p-text: var(--t-ink, #eaeaea);
  --p-muted: var(--t-ink-muted, #8a91a8);
  /*
   * 이 셋은 **뜻**이라 조합에 안 딸립니다 — 초록은 당첨·성공, 주황은 대기,
   * 빨강은 막힘·거절. 조합을 골라도 거절이 초록이 되면 안 됩니다.
   */
  --p-ok: #3ddc97;
  --p-warn: #ffb347;
  --p-no: #ff5a5a;
  /*
   * 같은 뜻을 **글자로** 쓸 때의 값.
   *
   * 위 셋은 면에 칠하는 색이라 어느 조합에서나 그대로입니다. 글자는 다릅니다
   * — 어두운 판에서 읽으라고 고른 `#a6f2d3` 는 상아빛 위에서 안 보입니다.
   *
   * 그래서 뜻은 색에 두고 **밝기만** 조합의 글자색 쪽으로 당깁니다. 섞는
   * 비율은 어두운 조합에서 예전 값과 거의 같아 보이도록 맞췄습니다 —
   * `#e0a53a` 를 `#eaeaea` 와 55:45 로 섞으면 예전 `#ffd89a` 자리입니다.
   */
  --p-ink-ok: color-mix(in srgb, #2fbf87 46%, var(--t-ink, #eaeaea));
  --p-ink-warn: color-mix(in srgb, #e0a53a 55%, var(--t-ink, #eaeaea));
  --p-ink-bad: color-mix(in srgb, #e05a5a 50%, var(--t-ink, #eaeaea));
  --p-radius: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/*
 * 스포츠 판 — 포세이돈 (2026-09-04, 「이제 스포츠페이지 개선 시작해줘」).
 *
 * 이름은 `.sb-*`(sports board). export 의 판 이름(`.market-row` ·
 * `.odds-button` · `.league-card`)을 그만 쓰는 이유는 그 시트가 데스크톱
 * 격자 하나를 고정폭으로 못 박아 두어서, 팀 이름이 길거나 배당이 네 자리면
 * 칸이 넘치기 때문입니다. 우리 격자로 다시 씁니다.
 *
 * 이 판에서만 쓰는 것만 여기 있습니다.
 */

/*
 * ── 왼쪽 판을 걷었습니다 (2026-09-13) ──────────────────────
 *
 * 본의 조판은 세 단이고 여기가 `padding: 0 310px` 였습니다 — 왼쪽 310 이
 * `#panel_nav`, 오른쪽 310 이 카트. 운영자가 그 왼쪽을 보고 말했습니다:
 *
 *     「왜 포세이돈 걸 가져왔어. **좌측에 사이드바 생기면 안 돼.**
 *      그냥 경기 깔끔하게 나와야지, **제우스처럼.**」
 *
 * 걷었습니다. 취향만의 문제가 아니었습니다 — 그 판이 세우던 종목 목록과
 * 지갑 띠를 **가로 띠와 머리띠가 이미 같이 그리고 있었습니다**. 셋 중
 * 짝이 없던 인기 리그만 가로로 내려왔습니다(`.sb-pop`).
 *
 * 왼쪽 310px 가운데 16px 은 **지면의 숨**으로 남기고 나머지가 경기 줄로
 * 갑니다. 전부 값 칸에 주니 판과 종목 띠가 브라우저 왼쪽에 0px 로 붙었고,
 * 운영자가 「너무 딱 붙어 있다」고 한 것이 그 상태였습니다 (2026-09-13).
 * 16px 은 새 기둥이 아니라 이 화면의 바깥 여백입니다 — 1024~1279 에서는
 * 12px, 폰에서는 0 으로 줄어듭니다.
 *
 * 되돌리려면 위 두 문단을 지우십시오. 남겨 두고 되돌리면 다음 사람이
 * 「운영자가 걷으라고 한 것」을 읽으면서 그 판을 보게 됩니다.
 */
[data-skin="athena"] .sb-page {
  position: relative;
  padding: 0 310px 28px 16px;
  min-height: 600px;
}

/*
 * ── 카트는 화면에 고정입니다 ──────────────────────────────
 *
 * (왼쪽 판도 여기서 같이 고정했었습니다. 걷었습니다 — 위 참조.)
 *
 * export 는 스포츠에서만 두 판을 `position: absolute` 로 두고 감싸개에
 * 붙입니다. 그러면 판 높이가 **감싸개 높이**가 되는데, 이 감싸개는
 * `min-height: 600px` 에서 안 자랍니다(경기 목록이 흐름에서 빠져 있음).
 * 재 보니 598px 이었고, 그래서 배팅카트의 「배팅하기」가 판 아래로
 * 잘려 나갔습니다 (2026-09-04 측정: 카트 644px, 판 598px).
 *
 * 다른 화면의 판은 이미 `fixed` 입니다(`visual.css`). 여기서도 같게 두면
 * 두 가지가 한꺼번에 맞습니다: 판이 화면만큼 길어지고, 경기 목록을 굴리는
 * 동안 카트가 제자리에 남습니다 — 배팅하는 사람이 원하는 그것입니다.
 *
 * 폰에서는 `visual.css` 가 둘 다 `static !important` 로 되돌립니다.
 *
 * ── 768 이 아니라 767 에서 갈리는 이유 (2026-09-05) ────────
 *
 * 카트를 폰 모양으로 그릴지는 **자바스크립트가 정합니다** —
 * `sports-console.tsx` 의 `matchMedia("(max-width: 767px)")`. 그 값이 곧
 * 카트가 열기 단추와 시트로 갈리는가입니다.
 *
 * 이 시트는 769 부터를 데스크톱으로, `visual.css` 는 768 까지를 폰으로 보고
 * 있었습니다. 그래서 **정확히 768px 인 창**(아이패드 세로가 그것입니다)에서
 * 셋이 서로 다른 말을 했습니다: 자바스크립트는 데스크톱이라 판옆 카트를
 * 그리는데, `visual.css` 는 판을 흐름으로 내리고, 이 시트는 다시 고정해 줄
 * 차례가 안 옵니다. 결과는 경기 목록 수천 px **아래**에 놓인 카트였습니다.
 * 경계는 자바스크립트가 쥔 그 값 하나입니다.
 */
@media (min-width: 768px) {
  [data-skin="athena"] .sb-page #panel_betting {
    position: fixed;
    top: 100px;
    bottom: 0;
    right: 0;
    width: 300px;
    overflow-y: auto;
    z-index: 5;
  }
}

/* ── 종목 띠 ───────────────────────────────────────────────── */

/*
 * 제우스처럼 **한 줄 필터**입니다 (2026-09-13 운영자 요청).
 *
 * 앞서는 아이콘 · 이름 · 수를 위아래로 쌓은 78px 카드 여덟이었습니다.
 * 스포츠 판에서 종목은 콘텐츠가 아니라 거르개인데, 경기보다 큰 카드가 먼저
 * 섰고 그 위에 「종목」 이름표까지 한 줄 더 있었습니다. 운영자가 실제 화면을
 * 보고 「종목 글자는 또 뭐고, 디자인이 이상하다」고 한 것이 그 모양입니다.
 *
 * 높이 40px 의 가로 필터로 줄입니다. 있는 만큼만 폭을 쓰고, 자리가 모자라면
 * 두 줄로 접지 않고 **한 줄로 굴립니다.** 그러면 1024·폰에서도 종목 차례가
 * 안 바뀌고, 끝까지 밀면 여덟이 모두 손에 닿습니다.
 */
[data-skin="athena"] .sb-tabs {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin: 8px 0 12px;
  padding: 0 0 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--p-line-strong) transparent;
}
[data-skin="athena"] .sb-tabs::-webkit-scrollbar {
  height: 4px;
}
[data-skin="athena"] .sb-tabs::-webkit-scrollbar-track {
  background: transparent;
}
[data-skin="athena"] .sb-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--p-line-strong);
}
[data-skin="athena"] .sb-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 5px;
  border: 1px solid var(--p-line);
  background: var(--p-bg);
  color: var(--p-muted);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease),
    color 150ms var(--ease), transform 120ms var(--ease);
}
[data-skin="athena"] .sb-tab:hover {
  border-color: rgb(var(--p-accent-rgb) / 0.5);
  color: var(--p-text);
}
[data-skin="athena"] .sb-tab.active {
  border-color: transparent;
  background: var(--p-accent-deep);
  color: var(--p-accent-ink);
}
[data-skin="athena"] .sb-tab img {
  /*
   * export 의 종목 그림은 흰 실루엣이고 크기가 제각각입니다. 상자를 고정하고
   * `contain` 으로 맞추지 않으면 축구공만 크게 뜹니다 (2026-09-04 캡처).
   */
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 150ms var(--ease);
}
[data-skin="athena"] .sb-tab:hover img,
[data-skin="athena"] .sb-tab.active img {
  opacity: 1;
}
[data-skin="athena"] .sb-tab__name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
[data-skin="athena"] .sb-tab__count {
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--p-accent);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-skin="athena"] .sb-tab.active .sb-tab__count {
  background: transparent;
  color: var(--p-accent-ink);
}

/* ── 「리그 하나만 보는 중」 띠 ────────────────────────────── */

[data-skin="athena"] .sb-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 16px;
  border-radius: 7px;
  background: rgb(var(--p-accent-rgb) / 0.09);
  border: 1px solid rgb(var(--p-accent-rgb) / 0.3);
  font-size: 13.5px;
  color: var(--p-accent-soft);
}
[data-skin="athena"] .sb-filter i {
  color: var(--p-accent);
}
[data-skin="athena"] .sb-filter strong {
  color: var(--color-ink-strong);
  font-weight: 800;
}
[data-skin="athena"] .sb-filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--p-line-strong);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  color: var(--p-text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="athena"] .sb-filter button:hover {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.16);
}

/*
 * 막힌 배당을 눌렀을 때의 대답 — 화면 바닥.
 *
 * 판 머리에 두면 목록을 조금만 내려도 화면 밖입니다. 이 판은 경기 목록만
 * 수천 px 이고, 누른 칸은 언제나 화면 한가운데입니다 — 대답이 그 위 어딘가에
 * 그려지면 아무 일도 안 일어난 것과 같습니다.
 *
 * 카트 **아래**, 그리고 `pointer-events: none`. 화면 바닥을 가로지르는 띠가
 * 카트 단추를 삼키면 고치려던 것보다 나쁜 결함입니다.
 */
[data-skin="athena"] .sb-refusal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-bet-slip-panel, 1240) - 1);
  display: flex;
  justify-content: center;
  padding: 0 10px 10px;
  pointer-events: none;
}
[data-skin="athena"] .sb-refusal p {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0;
  padding: 11px 16px;
  border-radius: 7px;
  background: rgba(40, 12, 16, 0.96);
  border: 1px solid rgba(255, 90, 90, 0.45);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
  color: #ffc1c1;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── 리그 카드 ─────────────────────────────────────────────── */

[data-skin="athena"] .sb-list {
  display: flex;
  flex-direction: column;
  /*
   * 리그 사이 18px · 경기 사이 8px · 마켓 줄 사이는 0.
   *
   * 전에는 각각 12px · 0 · 0 이라, 마켓·경기·리그가 거의 같은 간격으로
   * 붙어 판 전체가 한 덩어리로 읽혔습니다. 전부 벌리면 화면당 배당만
   * 줄고 위계는 그대로입니다. 그래서 **큰 경계만 더 크게** 합니다.
   */
  gap: 18px;
  padding-bottom: 20px;
}
[data-skin="athena"] .sb-league {
  border-radius: 7px;
  border: 1px solid var(--p-line-strong);
  background: var(--p-bg);
  overflow: hidden;
}
[data-skin="athena"] .sb-league__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  /* 왼쪽에서 오른쪽으로 파랗게 번지던 것 대신 한 톤 + 왼쪽 강조선. */
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.025);
  box-shadow: inset 2px 0 0 var(--p-accent);
  border-bottom: 1px solid var(--p-line);
  font-size: 13.5px;
  font-weight: 700;
}
[data-skin="athena"] .sb-league__flag {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 4px;
  object-fit: cover;
  color: var(--p-accent);
  font-size: 14px;
  display: grid;
  place-items: center;
}
[data-skin="athena"] .sb-league__name {
  color: var(--p-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="athena"] .sb-league__country {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.06);
  color: var(--p-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
[data-skin="athena"] .sb-league__time {
  margin-left: auto;
  color: var(--p-muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 경기 ──────────────────────────────────────────────────── */

[data-skin="athena"] .sb-match {
  border-top: 1px solid rgb(var(--t-veil-rgb, 255 255 255) / 0.04);
  padding: 8px 0 12px;
  /*
   * 배당 칸이 시작하는 자리 — 마켓 이름 칸(176px)과 그 뒤의 사이(8px).
   * 카드 가운데와 **배당 판의 가운데**가 이만큼 어긋나 있어서, 판 전체 폭을
   * 쓰는 조각은 이 값을 빼고 자리를 잡아야 위아래가 한 줄에 섭니다.
   * 폰에서는 이름 칸이 제 줄을 쓰므로 0 입니다 — 아래 767px.
   */
  --sb-odds-start: 184px;
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}
[data-skin="athena"] .sb-match + .sb-match {
  /*
   * 마켓 줄은 붙여 한 경기로 읽고, **경기와 경기만** 가릅니다. 8px 뒤에
   * 진한 머리카락 선이 와서, 여백을 크게 쓰지 않고도 다음 경기의 시작을
   * 찾을 수 있습니다.
   */
  margin-top: 8px;
  border-top-color: var(--p-line-strong);
}
[data-skin="athena"] .sb-match:first-of-type {
  border-top: 0;
  margin-top: 0;
}

/*
 * 지나가는 경기 줄에도 표를 냅니다 (2026-09-07) — 「경기가 잘 안보이네」.
 * 편 카드(`.sb-match--open`, 아래)와 **같은 말**을 쓰되 절반 세기입니다:
 * 기둥은 반투명이고 바탕은 4% 대신 3%. 편 것이 여전히 더 진해야 「지금 펴
 * 있는 것」과 「그냥 지나가는 것」이 안 헷갈립니다.
 */
@media (hover: hover) {
  [data-skin="athena"] .sb-match:not(.sb-match--open):hover {
    background: rgb(var(--p-accent-rgb) / 0.03);
    box-shadow: inset 3px 0 0 rgb(var(--p-accent-rgb) / 0.5);
  }
}

/*
 * 홈 · 시간 · 원정. 아래 배당 줄과 **같은 격자**라 눈이 세로로 이어집니다 —
 * 홈 팀 이름 밑에 홈 배당이 서고, 시간 밑에 무승부가 섭니다.
 *
 * ── 왜 빈 칸이 앞에 있는가 (2026-09-05) ────────────────────
 *
 * 여기는 세 칸이었고 `.sb-row` 는 네 칸이었습니다 — 배당 줄 왼쪽에 마켓
 * 이름 칸(「승무패 (연장미포함)」) 108px 이 붙으면서 아래만 그만큼 밀렸고,
 * 머리줄은 카드 전체 폭의 가운데에 남았습니다. 그래서 경기 시간이 무승부
 * 배당보다 **54px 왼쪽**에 떴습니다 (사용자 지적: "가운데정렬이 안맞아").
 *
 * 빈 칸 하나로 맞춥니다. `gap` 도 `.sb-row` 와 같아야 합니다 — 칸 수가 같아도
 * 사이가 다르면 `1fr` 이 갈라지는 폭이 달라져 다시 어긋납니다.
 */
[data-skin="athena"] .sb-match__head {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 150px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  cursor: pointer;
}
[data-skin="athena"] .sb-match__team {
  font-size: 14px;
  font-weight: 700;
  color: var(--p-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
 * 머리줄에는 자식이 셋인데 격자는 넷입니다 — 앞의 빈 칸은 마크업이 아니라
 * 여기서 건너뜁니다. 빈 `div` 를 넣으면 읽는 기계가 빈 칸을 하나 더 셉니다.
 */
[data-skin="athena"] .sb-match__team--home {
  grid-column: 2;
  text-align: right;
}
[data-skin="athena"] .sb-match__team--away {
  text-align: left;
}
[data-skin="athena"] .sb-match__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
[data-skin="athena"] .sb-match__time {
  font-size: 11.5px;
  color: var(--p-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-skin="athena"] .sb-match__vs {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--p-accent);
  opacity: 0.75;
}

/* ── 마켓 줄 ───────────────────────────────────────────────── */

[data-skin="athena"] .sb-row {
  display: grid;
  /*
   * 이름 | 홈 | 가운데 | 원정.
   *
   * 108px 이던 이름 칸이 1598px 짜리 경기판의 6.8% 뿐이라, 옆 배당 칸
   * 645px 둘과 비율이 깨졌습니다. 176px 은 여섯 말의 마켓 이름과 연장
   * 단서를 넓은 화면에서 한 줄에 세우면서, 1280 에서 값 칸을 283px 남기는
   * 가장 작은 8px 단위입니다.
   */
  grid-template-columns: 176px minmax(0, 1fr) 150px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 3px 16px;
}
[data-skin="athena"] .sb-row__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/*
 * 마켓 이름은 **두 줄까지** 씁니다. 한 줄로 잘랐더니 「오버언더(추가기준…」
 * 처럼 어느 기준선인지가 잘렸습니다 — 그건 어느 마켓인지를 정하는 말입니다.
 * 줄 높이가 44px 이라 12px 두 줄이 들어갑니다.
 */
[data-skin="athena"] .sb-row__market {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--p-muted);
  overflow: hidden;
  word-break: keep-all;
}
[data-skin="athena"] .sb-row__note {
  font-size: 10.5px;
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.32);
  white-space: nowrap;
}

/*
 * 넓은 화면에서는 이름과 연장 단서가 **한 줄**입니다.
 *
 * 둘을 세로로 못 박아 둬서 칸을 넓혀도 왼쪽만 두 줄이었고, 이것이 운영자가
 * 「좌측 크기가 이상하다」고 본 모양입니다. 좁은 띠에서는 다시 세로로 두어
 * 긴 말이 값 칸을 밀지 않습니다.
 */
@media (min-width: 1280px) {
  [data-skin="athena"] .sb-row__label {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
  }
  [data-skin="athena"] .sb-row__market {
    display: block;
    -webkit-line-clamp: unset;
    white-space: nowrap;
  }
}
[data-skin="athena"] .sb-row__side {
  min-width: 0;
  display: flex;
}
[data-skin="athena"] .sb-row__mid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
[data-skin="athena"] .sb-row__line {
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--p-muted);
  font-variant-numeric: tabular-nums;
}

/* ── 배당 단추 ─────────────────────────────────────────────── */

[data-skin="athena"] .sb-odds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--p-line-strong);
  background: var(--p-bg-deep);
  color: var(--p-text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 130ms var(--ease), background 130ms var(--ease),
    transform 100ms var(--ease);
}
/*
 * 오버를 더 진하게 (2026-09-07) — 「마우스 올려도 뭘 선택한지 모르겠고」.
 * 10% 바탕은 어두운 판에서 거의 안 보였습니다. 22% 로 올리고 테두리를
 * 꽉 채웁니다. 담긴 칸은 빼 둡니다 — 이미 가장 진한 상태입니다.
 */
[data-skin="athena"] .sb-odds:hover:not(.active, [data-active="yes"]) {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.22);
}
[data-skin="athena"] .sb-odds:active {
  transform: translateY(1px);
}
/*
 * 고르는 이름은 **밝게**. `--p-muted`(#8a91a8) 였고, 옆에 금색 배당이 서니
 * 팀 이름 쪽이 꺼진 것처럼 보였습니다 (사용자 지적: "색상좀 너무 회색이라
 * 잘 안보인다"). 이름과 값은 색이 아니라 **굵기와 색조**로 갈립니다 —
 * 이름은 흰 계열 보통, 값은 금색 굵게.
 */
[data-skin="athena"] .sb-odds__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--p-text);
  font-weight: 600;
}
[data-skin="athena"] .sb-odds__value {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--p-money);
  font-variant-numeric: tabular-nums;
}

/* 담긴 배당 */
[data-skin="athena"] .sb-odds.active,
[data-skin="athena"] .sb-odds[data-active="yes"] {
  border-color: transparent;
  background: var(--p-accent-deep);
}
[data-skin="athena"] .sb-odds[data-active="yes"] .sb-odds__name,
[data-skin="athena"] .sb-odds[data-active="yes"] .sb-odds__value {
  color: var(--p-accent-ink);
}

/*
 * 막힌 배당 — **없는 배당이 아닙니다.** 흐리게 두고 자물쇠를 답니다. 커서를
 * `not-allowed` 로 두지 않는 이유는, 눌리면 판이 왜인지 말하기 때문입니다.
 */
[data-skin="athena"] .sb-odds[data-kind="closed"] {
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.02);
  border-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
  border-style: dashed;
}
/*
 * 이름은 **읽을 수 있게** 둡니다. 값과 같이 0.28 로 떨어뜨렸더니 어느 팀
 * 줄인지 안 보였습니다 — 막힌 것은 배당이지 경기가 아닙니다. 흐린 것은
 * 숫자 쪽이고, 그게 「이 값으로는 못 건다」는 말입니다.
 */
[data-skin="athena"] .sb-odds[data-kind="closed"] .sb-odds__name {
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.5);
}
[data-skin="athena"] .sb-odds[data-kind="closed"] .sb-odds__value {
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.3);
}
[data-skin="athena"] .sb-odds[data-kind="closed"]:hover {
  border-color: rgba(255, 90, 90, 0.4);
  background: rgba(255, 90, 90, 0.06);
}
[data-skin="athena"] .sb-odds__lock {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.3);
}

/* 움직인 배당 — 2초. 색이 아니라 테두리로 말합니다: 담긴 단추 위에서도 보이게. */
[data-skin="athena"] .sb-odds[data-move="up"] {
  animation: sb-up 2s var(--ease);
}
[data-skin="athena"] .sb-odds[data-move="down"] {
  animation: sb-down 2s var(--ease);
}
@keyframes sb-up {
  0%,
  60% {
    box-shadow: inset 0 0 0 2px #3ddc97;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes sb-down {
  0%,
  60% {
    box-shadow: inset 0 0 0 2px #ff5a5a;
  }
  100% {
    box-shadow: none;
  }
}

/* ── 오버·언더 화살표 ──────────────────────────────────────── */

/*
 * 이름 **앞**에 섭니다. 원본은 25px PNG 두 장을 같은 자리에 놓았습니다.
 * 색은 그림 안에 박아 두었으므로(빨강 오버·파랑 언더) 담긴 파란 칸 위에서도
 * 방향이 안 사라집니다.
 */
[data-skin="athena"] .sb-arrow {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 5px;
  vertical-align: -2px;
}
/* 막힌 줄에서는 같이 흐려집니다 — 안 그러면 죽은 칸에서 화살표만 또렷합니다. */
[data-skin="athena"] .sb-odds[data-kind="closed"] .sb-arrow {
  opacity: 0.45;
}

/* ── 「모든 배팅 보기 (+N)」 ───────────────────────────────── */

/*
 * 해외형·라이브만 답니다. 원본이 판마다 다르게 짜여 있어서입니다 — 국내형은
 * 마켓을 전부 늘어놓고, 나머지 둘은 대표 하나만 놓고 이 단추로 폅니다.
 * 한 경기에 마켓이 열 몇 개 붙는 판에서 다 펴면 한 쪽에 경기 둘이 겨우
 * 들어갑니다.
 */
[data-skin="athena"] .sb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /*
   * 배당 칸 위로만 눕습니다. 카드 폭을 다 쓰면 이 단추의 가운데가 카드의
   * 가운데가 되고, 그 자리는 위 줄의 무승부·VS 칸보다 57px 왼쪽입니다 —
   * 세로로 이어지던 눈이 여기서 한 번 꺾입니다.
   */
  width: calc(100% - 32px - var(--sb-odds-start));
  margin: 6px 16px 4px calc(16px + var(--sb-odds-start));
  height: 34px;
  border-radius: 8px;
  border: 1px dashed var(--p-line-strong);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.03);
  color: var(--p-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease),
    color 150ms var(--ease);
}
[data-skin="athena"] .sb-more:hover {
  border-color: rgb(var(--p-accent-rgb) / 0.55);
  background: rgb(var(--p-accent-rgb) / 0.08);
  color: var(--p-text);
}
[data-skin="athena"] .sb-more i {
  font-size: 11px;
  color: var(--p-accent);
}
/* 펴진 경기는 카드 안에서 살짝 떠 보이게 — 어느 것을 폈는지 눈에 남습니다. */
[data-skin="athena"] .sb-match--open {
  background: rgb(var(--p-accent-rgb) / 0.04);
  box-shadow: inset 3px 0 0 var(--p-accent);
}
[data-skin="athena"] .sb-match--open .sb-more {
  border-style: solid;
  border-color: rgb(var(--p-accent-rgb) / 0.35);
  color: var(--p-accent);
}

/* ── 빈 판 · 쪽 넘김 ───────────────────────────────────────── */

[data-skin="athena"] .sb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  border-radius: 7px;
  border: 1px solid var(--p-line);
  background: var(--p-bg);
  color: var(--p-muted);
  font-size: 14px;
  text-align: center;
}
[data-skin="athena"] .sb-empty i {
  font-size: 32px;
  opacity: 0.4;
}
[data-skin="athena"] .sb-empty strong {
  font-weight: 600;
}

[data-skin="athena"] .sb-paging {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 30px;
}
[data-skin="athena"] .sb-pageno {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--p-line-strong);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.04);
  color: var(--p-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms var(--ease), color 150ms var(--ease),
    background 150ms var(--ease);
}
[data-skin="athena"] .sb-pageno:hover {
  border-color: var(--p-accent);
  color: var(--p-text);
}
[data-skin="athena"] .sb-pageno.active {
  border-color: transparent;
  background: var(--p-accent-deep);
  color: var(--p-accent-ink);
}

/* ── 좁은 화면 ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* 폰에서는 카트 단추가 오른쪽 아래에 있습니다 — 그 위로 비켜섭니다. */
  [data-skin="athena"] .sb-refusal {
    bottom: 74px;
  }

  /*
   * 이번 간격 조정은 운영자가 사진으로 짚은 **넓은 판**의 것입니다.
   * 폰은 한 화면에 보이는 배당이 적어 같은 8px 을 더 내면 바로 한 경기를
   * 잃습니다. 종전의 촘촘한 값으로 되돌립니다.
   */
  [data-skin="athena"] .sb-list {
    gap: 12px;
  }
  [data-skin="athena"] .sb-league {
    border-color: var(--p-line);
  }
  [data-skin="athena"] .sb-league__head {
    padding: 11px 16px;
  }
  [data-skin="athena"] .sb-match {
    padding: 4px 0 8px;
  }
  [data-skin="athena"] .sb-match + .sb-match {
    margin-top: 0;
    border-top-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.04);
  }

  /*
   * 왼쪽 판은 어느 폭에도 없습니다. 걷기 전 폰에서도 감춰졌을 것이라
   * 여겼지만, 아래쪽 같은 값어치의 `display:flex` 가 이겨 실제로는
   * 390×129 로 서 있었습니다. 그 판에서 꼭 필요했던 지갑만 `.sb-wallet`
   * 한 줄로 살렸습니다 — 이 파일 아래 「폰의 지갑 띠」 참조.
   */

  [data-skin="athena"] .sb-tabs {
    gap: 5px;
    margin: 8px 0 12px;
  }
  [data-skin="athena"] .sb-tab {
    min-height: 40px;
    padding: 0 11px;
  }
  [data-skin="athena"] .sb-tab img {
    width: 18px;
    height: 18px;
  }
  [data-skin="athena"] .sb-tab__name {
    font-size: 11px;
  }

  /*
   * 폰에서는 마켓 이름이 **줄 위로** 올라갑니다. 108px 을 이름에 내주면
   * 배당 셋이 40px 씩 남아 숫자가 접힙니다. 이름 칸이 사라졌으므로 배당
   * 판은 카드 폭 그대로이고, 「모든 배팅 보기」도 되돌아옵니다.
   */
  [data-skin="athena"] .sb-match {
    --sb-odds-start: 0px;
  }
  /* 줄 좌우 여백이 10px 이므로 단추도 같이 좁힙니다. */
  [data-skin="athena"] .sb-more {
    width: calc(100% - 20px);
    margin: 6px 10px 4px;
  }
  [data-skin="athena"] .sb-row {
    /*
     * 가운데 칸이 64px 이었습니다. 위 줄의 경기 시간
     * (「2026-08-23 20:00:00」)이 107px 이라 그 칸을 43px 넘어 팀 이름
     * 위로 겹쳐 찍혔습니다 (2026-09-04 폰 측정). 92px 로 넓히고 시간은
     * 두 줄로 접습니다 — 아래 `.sb-match__time` 참조.
     */
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    padding: 3px 10px;
  }
  [data-skin="athena"] .sb-row__label {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding-top: 6px;
  }
  [data-skin="athena"] .sb-match__head {
    /*
     * 폰에서는 마켓 이름이 제 줄을 통째로 쓰므로(`.sb-row__label` 이
     * `grid-column: 1 / -1`) 배당 줄에 앞 칸이 없습니다. 머리줄도 셋으로
     * 돌리고, 데스크톱에서 홈을 둘째 칸으로 보내던 것도 같이 풉니다.
     */
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    gap: 6px;
    padding: 10px 10px 8px;
  }
  [data-skin="athena"] .sb-match__team--home {
    grid-column: 1;
  }
  /* 시간은 두 줄로 — 「2026-08-23」 / 「20:00:00」. 한 줄로 두면 92px 도 모자랍니다. */
  [data-skin="athena"] .sb-match__time {
    white-space: normal;
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
  }
  [data-skin="athena"] .sb-match__team {
    font-size: 13px;
  }
  /*
   * 이름을 위로, 배당을 아래로 쌓습니다.
   *
   * `height` 를 못 박았더니 이름 칸이 7px 로 **눌려서** 글자가 단추 위로
   * 삐져나왔습니다 (2026-09-04 폰 측정: 이름 상자 7px, 줄 높이 15.75px).
   * 이름에 `overflow: hidden` 이 있으면 flex 항목의 자동 최소 높이가 0 이
   * 되어 얼마든지 눌립니다. 그래서 두 가지를 같이 바꿉니다: 높이는
   * **최소**로만 두고, 이름은 안 눌리게 못 박습니다.
   */
  [data-skin="athena"] .sb-odds {
    height: auto;
    min-height: 42px;
    padding: 4px 8px;
    font-size: 12px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  [data-skin="athena"] .sb-odds__name {
    flex: 0 0 auto;
    max-width: 100%;
    font-size: 10.5px;
    line-height: 1.35;
  }
  [data-skin="athena"] .sb-odds__value {
    line-height: 1.25;
  }
  [data-skin="athena"] .sb-league__country,
  [data-skin="athena"] .sb-league__time {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="athena"] .sb-odds {
    animation: none !important;
  }
}


/*
 * 배팅카트 — 포세이돈 (2026-09-04).
 *
 * ── 왜 스포츠 시트에서 나왔나 ──────────────────────────────
 *
 * 처음엔 sport.css 안에 있었고, 그 시트는 **스포츠 주소에서만** 실립니다.
 * 그런데 카트는 모든 화면에 섭니다 — 홈·카지노·입금의 오른쪽 판이 그것이고,
 * 거기서는 담긴 것이 없는 빈 카트를 그립니다.
 *
 * 그래서 스포츠 밖에서는 이 시트가 없었고, 같은 자리가 페이지마다 다르게
 * 생겼습니다 (2026-09-04 사용자 지적 「메인페이지에 배팅카트랑 스포츠 내에
 * 배팅카트랑 디자인이 다르면 어떡해」). 전역으로 옮깁니다.
 */

/* ══ 배팅카트 (`.sc-*`) ═══════════════════════════════════════
 *
 * 오른쪽 300px. `#panel_betting` 이 자리를 잡고 여기는 그 안쪽만 그립니다.
 */

[data-skin="athena"] .sc-cart {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 9px;
  color: var(--p-text);
}

[data-skin="athena"] .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--p-line);
}
[data-skin="athena"] .sc-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
[data-skin="athena"] .sc-head h2 i {
  color: var(--p-accent);
}
[data-skin="athena"] .sc-head__mode {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
  color: var(--p-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 답해야 하는 띠 ────────────────────────────────────────── */

[data-skin="athena"] .sc-alert {
  padding: 11px 13px;
  border-radius: 6px;
  border: 1px solid rgb(var(--p-accent-rgb) / 0.28);
  background: rgb(var(--p-accent-rgb) / 0.08);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--p-accent-soft);
}
[data-skin="athena"] .sc-alert p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  word-break: keep-all;
}
[data-skin="athena"] .sc-alert i {
  margin-top: 2px;
  flex: 0 0 auto;
}
[data-skin="athena"] .sc-alert__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
[data-skin="athena"] .sc-alert--warn {
  border-color: rgba(255, 179, 71, 0.34);
  background: rgba(255, 179, 71, 0.1);
  color: var(--p-ink-warn);
}
[data-skin="athena"] .sc-alert--hold {
  border-color: rgba(255, 179, 71, 0.45);
  background: rgba(255, 179, 71, 0.14);
  color: var(--p-ink-warn);
}
[data-skin="athena"] .sc-alert--ok {
  border-color: rgba(61, 220, 151, 0.34);
  background: rgba(61, 220, 151, 0.1);
  color: var(--p-ink-ok);
}

[data-skin="athena"] .sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid var(--p-line-strong);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.06);
  color: var(--p-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="athena"] .sc-btn--ghost:hover {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.16);
}
[data-skin="athena"] .sc-btn--danger {
  border-color: rgba(255, 90, 90, 0.4);
  background: rgba(255, 90, 90, 0.12);
  color: var(--p-ink-bad);
}

/* ── 담은 다리 ─────────────────────────────────────────────── */

[data-skin="athena"] .sc-legs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-skin="athena"] .sc-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--p-line);
  background: var(--p-bg-deep);
  border-left: 3px solid var(--p-accent);
}
[data-skin="athena"] .sc-leg--bonus {
  border-left-color: var(--p-warn);
}
[data-skin="athena"] .sc-leg__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
[data-skin="athena"] .sc-leg__match {
  font-size: 11.5px;
  color: var(--p-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="athena"] .sc-leg__pick {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="athena"] .sc-leg__odds {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--p-money);
  font-variant-numeric: tabular-nums;
}
/* 값이 사라진 다리 — 지우지 않고 줄을 긋습니다. */
[data-skin="athena"] .sc-leg__odds--dead {
  color: var(--p-muted);
  text-decoration: line-through;
}
[data-skin="athena"] .sc-leg__x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.06);
  color: var(--p-muted);
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
[data-skin="athena"] .sc-leg__x:hover {
  background: rgba(255, 90, 90, 0.2);
  color: var(--p-ink-bad);
}

/*
 * 빈 카트. 130px 이었는데, 아무것도 안 담긴 카트가 화면의 3분의 1을 쓰면서
 * 그 아래 폴더보너스·금액·배팅하기를 화면 밖으로 밀었습니다. 할 말이 한
 * 줄인 자리는 한 줄만큼만 씁니다.
 */
[data-skin="athena"] .sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 14px;
  border-radius: 6px;
  border: 1px dashed var(--p-line-strong);
  color: var(--p-muted);
  font-size: 12.5px;
  text-align: center;
}
[data-skin="athena"] .sc-empty i {
  font-size: 24px;
  opacity: 0.4;
}

/* ── 폴더보너스 ───────────────────────────────────────────── */

/*
 * 보너스 칸은 **한 색을 여러 알파로** 씁니다 — 테두리 22%, 면 5%, 오버 60%,
 * 켜짐 16%. 그 색만 조합에서 받으면 나머지는 따라옵니다 (`--t-bonus-rgb`:
 * 어두운 둘은 앰버, 흰 조합은 코발트).
 */
[data-skin="athena"] .sc-bonus {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(var(--t-bonus-rgb, 255 179 71) / 0.22);
  background: rgb(var(--t-bonus-rgb, 255 179 71) / 0.05);
}
[data-skin="athena"] .sc-bonus__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgb(var(--t-bonus-rgb, 255 179 71));
}
[data-skin="athena"] .sc-bonus__count {
  color: var(--p-muted);
  font-weight: 500;
  font-size: 11.5px;
}
/*
 * 세 칸 격자입니다. 처음엔 한 줄에 하나씩 쌓았는데, 옵션 셋에 각각 「3경기
 * 선택 시 활성화」 한 줄이 붙어 170px 을 먹었고 그 아래 금액·합계·배팅하기가
 * 화면 밖으로 밀렸습니다 (2026-09-04 캡처). 옆으로 세우면 70px 입니다.
 *
 * 이유 줄을 없애지 않은 이유: 그게 없으면 잠긴 단추가 이유 없이 섭니다.
 * 자리를 줄일 곳은 배치이지 말이 아닙니다.
 */
[data-skin="athena"] .sc-bonus__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
}
[data-skin="athena"] .sc-bonus__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 42px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--p-line-strong);
  background: var(--p-bg-deep);
  color: var(--p-text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="athena"] .sc-bonus__btn > span {
  font-size: 11.5px;
  color: var(--p-muted);
}
/* 배당은 **돈**입니다 — 흰 조합에서는 칸의 색이 아니라 금액색으로 찍힙니다. */
[data-skin="athena"] .sc-bonus__btn strong {
  font-size: 12.5px;
  color: var(--t-bonus-odds, var(--p-warn));
  font-variant-numeric: tabular-nums;
}
[data-skin="athena"] .sc-bonus__btn.active > span {
  color: var(--p-text);
}
[data-skin="athena"] .sc-bonus__btn:hover[data-eligible="yes"] {
  border-color: rgb(var(--t-bonus-rgb, 255 179 71) / 0.6);
}
[data-skin="athena"] .sc-bonus__btn.active {
  border-color: rgb(var(--t-bonus-rgb, 255 179 71));
  background: rgb(var(--t-bonus-rgb, 255 179 71) / 0.16);
}
/*
 * 못 고르는 것 — 흐리게, 그리고 **왜인지는 아래 줄이** 말합니다.
 *
 * 흐림의 세기는 조합을 탑니다. 0.45 는 검은 판에서 고른 값인데, 흰 판에서는
 * 같은 값이 「흐림」이 아니라 「없음」이 되어 세 칸이 통째로 사라졌습니다.
 */
[data-skin="athena"] .sc-bonus__btn[data-eligible="no"] {
  opacity: var(--t-bonus-off, 0.45);
  cursor: not-allowed;
}
[data-skin="athena"] .sc-bonus__why {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  color: var(--p-muted);
  word-break: keep-all;
}

[data-skin="athena"] .sc-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--p-muted);
  word-break: keep-all;
}

/* ── 금액 ──────────────────────────────────────────────────── */

[data-skin="athena"] .sc-stake > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-muted);
}
[data-skin="athena"] .sc-stake__box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 13px;
  border-radius: 6px;
  background: var(--p-bg-deep);
  border: 1px solid var(--p-line-strong);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
[data-skin="athena"] .sc-stake__box:focus-within {
  border-color: var(--p-accent);
}
[data-skin="athena"] .sc-stake__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--p-text);
  font-size: 18px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-skin="athena"] .sc-stake__input:disabled {
  color: var(--p-muted);
}
[data-skin="athena"] .sc-stake__unit {
  font-size: 12.5px;
  color: var(--p-muted);
}

[data-skin="athena"] .sc-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
/*
 * 금액 칩. 처음엔 export 를 따라 빨갛게 두었는데, 이 판에서 빨강은
 * 「막힘」입니다 — 금액을 **더하는** 단추가 그 색을 쓰면 안 됩니다.
 */
[data-skin="athena"] .sc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--p-line-strong);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  color: var(--p-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="athena"] .sc-chip:hover:not(:disabled) {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.14);
}
/*
 * 꺼진 칩. 스포츠 밖의 빈 카트가 이 상태입니다 — 같은 모양이어야 하지만
 * 「눌러도 된다」로 보이면 안 됩니다.
 */
[data-skin="athena"] .sc-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
[data-skin="athena"] .sc-stake__input:disabled {
  cursor: not-allowed;
}
[data-skin="athena"] .sc-chip--max {
  border-color: rgba(61, 220, 151, 0.4);
  background: rgba(61, 220, 151, 0.12);
  color: var(--p-ok);
}
/*
 * 칩 여덟이 정확히 두 줄입니다 — 빠른금액 여섯 + 최대 + 초기화. 초기화를
 * 두 칸짜리로 두었더니 혼자 셋째 줄을 차지했고, 그 38px 이 배팅하기를
 * 화면 밖으로 밀었습니다.
 */
[data-skin="athena"] .sc-chip--reset {
  color: var(--p-muted);
  padding: 0 4px;
  gap: 4px;
}
[data-skin="athena"] .sc-chip--reset i {
  font-size: 10px;
}

/* ── 합계 ──────────────────────────────────────────────────── */

[data-skin="athena"] .sc-total {
  padding: 12px 13px;
  border-radius: 6px;
  background: var(--p-bg-deep);
  border: 1px solid var(--p-line);
}
[data-skin="athena"] .sc-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--p-muted);
}
[data-skin="athena"] .sc-total__row + .sc-total__row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--p-line);
}
[data-skin="athena"] .sc-total__odds {
  font-size: 15px;
  font-weight: 800;
  color: var(--p-text);
  font-variant-numeric: tabular-nums;
}
[data-skin="athena"] .sc-total__row--pay strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--p-money);
  font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .sc-recall {
  padding: 11px 12px;
  border-radius: 6px;
  border: 1px solid var(--p-line);
  background: var(--p-bg-deep);
}

/* ── 배팅하기 ──────────────────────────────────────────────── */

/*
 * 바닥에 **안 붙입니다.** `position: sticky` 로 두었더니 카트가 화면보다
 * 길어지는 순간 배팅하기가 금액 칩 위로 겹쳐 찍혔습니다 (2026-09-04 캡처).
 * 감싸개(`#panel_betting.scroll`)가 이미 구르므로 단추는 그냥 맨 아래에
 * 있으면 됩니다.
 */
[data-skin="athena"] .sc-foot {
  padding-top: 2px;
  padding-bottom: 4px;
}
/*
 * `<button>` 이기도 하고 `<a>` 이기도 합니다 — 스포츠에서는 보내는 단추,
 * 그 밖에서는 판으로 가는 링크. `display` 를 안 적었더니 링크 쪽이 인라인
 * 글자로 떨어져 단추처럼 안 보였습니다 (2026-09-04 캡처).
 */
[data-skin="athena"] .sc-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  height: 50px;
  border-radius: 7px;
  border: 0;
  background: var(--p-accent-deep);
  color: var(--p-accent-ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 150ms var(--ease), transform 120ms var(--ease);
}
[data-skin="athena"] .sc-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}
[data-skin="athena"] .sc-submit:active:not(:disabled) {
  transform: translateY(1px);
}
[data-skin="athena"] .sc-submit:disabled {
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.06);
  color: var(--p-muted);
  box-shadow: none;
  cursor: not-allowed;
}
/* 붙잡힘·보내는 중은 「지금 무엇을 기다리는가」라 색이 달라야 합니다. */
[data-skin="athena"] .sc-submit[data-state="holding"],
[data-skin="athena"] .sc-submit[data-state="placing"] {
  background: #c8801f;
  color: #1b1204;
}

/* ══ 폰의 카트 — 열기 단추 · 시트 · 막 ═══════════════════════
 *
 * 폰에서 이 카트는 판 맨 아래 흐름에 놓여 있었습니다. 경기 목록이 수천 px 인
 * 판에서 그것은 **없는 것과 같습니다** (2026-09-05 운영자 지적 「포세이돈
 * 배팅카트가 안보인다」). 헤라의 짜임을 그대로 씁니다.
 *
 * 켜켜는 세 층입니다: 막(시트보다 한 단 아래) · 시트 · 열기 단추. 숫자를 새로
 * 박지 않고 `globals.css` 의 토큰에서 셈합니다 — 값이 움직여도 순서가 안
 * 뒤집힙니다. 헤라가 그것을 검사로 지키고 있고(`hera-sports-cart-layers`)
 * 같은 이유가 여기에도 그대로 있습니다.
 */

[data-skin="athena"] .sc-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-cart-bar, 1260);
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--p-accent-deep);
  color: var(--p-accent-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}
[data-skin="athena"] .sc-fab i {
  font-size: 15px;
}
[data-skin="athena"] .sc-fab__count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/*
 * 시트가 올라오면 단추는 비킵니다. `--z-cart-bar`(1260)가
 * `--z-bet-slip-panel`(1240) 위라 안 감추면 시트의 「배팅하기」 위에 뜹니다 —
 * 헤라가 390 에서 겪은 그대로입니다. 토큰을 뒤집으면 제우스의 카트 바가
 * 다치므로, 여는 쪽이 비킵니다. 닫는 문은 시트의 ✕ 와 막, 그리고 Escape.
 */
[data-skin="athena"] .sc-fab[aria-expanded="true"] {
  display: none;
}

[data-skin="athena"] .sc-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bet-slip-panel, 1240);
  /*
   * 화면 높이에 묶고 제 안에서 구릅니다. 안 묶으면 담은 다리가 늘어날수록
   * 시트가 화면 위로 자라 「배팅하기」가 다시 화면 밖으로 나갑니다 — 이
   * 카트를 폰에서 못 쓰게 만든 것이 정확히 그 모양입니다.
   */
  max-height: 82dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--p-line-strong);
  border-radius: 14px 14px 0 0;
  background: var(--p-bg-deep);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform 220ms var(--ease);
}
[data-skin="athena"] .sc-sheet.open {
  transform: translateY(0);
}
[data-skin="athena"] .sc-sheet__x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.06);
  color: var(--p-text);
  font-size: 16px;
  cursor: pointer;
}
/* 제목이 ✕ 밑으로 흘러 들어가지 않게. */
[data-skin="athena"] .sc-sheet .sc-head {
  padding-right: 44px;
}

[data-skin="athena"] .sc-scrim {
  position: fixed;
  inset: 0;
  /* 시트가 쓰는 바로 그 토큰에서 한 단 — 막이 시트를 덮으면 카트가 어두워집니다. */
  z-index: calc(var(--z-bet-slip-panel, 1240) - 1);
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}
[data-skin="athena"] .sc-scrim.active {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="athena"] .sc-sheet,
  [data-skin="athena"] .sc-scrim {
    transition: none;
  }
}



/*
 * ════════════════════════════════════════════════════════════════════
 *  본을 고쳐 쓰는 자리
 * ════════════════════════════════════════════════════════════════════
 *
 * 위는 전부 본의 `sport.css` · `cart.css` 사본입니다. 아래만
 * 아테나의 것이고, 문단마다 **왜 본과 달라야 하는지**가 붙어 있습니다.
 *
 * 하나같이 2026-09-12~13 에 재서 고친 것들입니다. 본을 옮기면서 이것들이
 * 되돌아가면 그건 옮긴 것이 아니라 망가뜨린 것입니다.
 */

/*
 * ── ① 기준선은 값 칸에서 안 잘립니다 ──────────────────────
 *
 * 본은 이름과 기준선을 한 마디에 담고 그 마디에 `text-overflow: ellipsis`
 * 를 겁니다. 이름이 길면 **잘리는 꼬리가 `[-1.5]`** 입니다 — 회원이 보는
 * 것과 거는 것이 달라집니다.
 *
 * 지어낸 걱정이 아닙니다. 배포된 포세이돈을 쟀습니다
 * (`scripts/athena-model-check.mjs`, 2026-09-13, 해외형 펼친 상태):
 *
 *     1920   기준선 있는 칸 16   잘린 것 0
 *     1280   기준선 있는 칸  0   (그 폭에서는 그 마켓이 안 섭니다)
 *     1150   기준선 있는 칸 16   **잘린 것 16** ← 「FC 스파르타 트르나바[-1.5]」
 *     1024   기준선 있는 칸  0
 *
 * 넓은 창만 보면 안 보이는 버그입니다. 아테나가 2026-09-13 아침에 고친
 * 바로 그것이고(`33a77bba`), 본을 그대로 베끼면 되돌아옵니다.
 *
 * 고침은 자리를 나누는 것입니다: 이름 마디가 **flex 상자**가 되고,
 * 줄어드는 것은 팀 이름(`__who`)뿐이며 기준선(`__mark`)은 `flex: none`
 * 이라 어느 폭에서도 안 줄어듭니다. 값 칸이 좁아지면 팀 이름에 「…」이
 * 붙고 기준선은 끝까지 남습니다 — 잘려도 되는 쪽이 잘립니다.
 */
/*
 * 값 칸은 **접힙니다** — 겹치지 않습니다.
 *
 * 본의 칸은 한 줄이고 `justify-content: space-between` 입니다. 그 짜임은
 * 담을 것이 칸보다 넓어지면 **첫 것과 마지막 것이 서로 겹칩니다** — 줄이
 * 넘쳐도 마지막 것은 오른쪽 끝에 붙기 때문입니다.
 *
 * 본에서는 안 터집니다. 본은 국내형도 접어서 승무패 한 줄만 세우고, 거기
 * 이름은 잘려 사라져도 되는 팀 이름뿐입니다 — 1024 의 포세이돈을 찍어
 * 보면 칸에 숫자만 남아 있습니다.
 *
 * 아테나는 국내형을 안 폅니다(위 ②). 그래서 1024 에서 오버언더 줄이
 * 서고, 그 칸에는 줄일 수 없는 기준선 `[3.0]` 이 같이 있습니다. 재 보니
 * 그 폭에서 칸 하나가 **48px** 입니다 (1024 − 좌우 판 600 − 마켓이름 108
 * − 가운데 150 − 여백). 겹쳐 찍혔습니다.
 *
 * 폭을 숫자로 끊지 않습니다. `flex-wrap: wrap` 이면 **안 들어갈 때만**
 * 값이 아랫줄로 내려가고, 들어가는 폭에서는 본과 똑같이 한 줄입니다.
 * 끊는 폭을 박으면 말이 길어지는 다섯 말에서 그 값이 다시 틀립니다.
 */
[data-skin="athena"] .sb-odds {
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  row-gap: 0;
  height: auto;
  min-height: 38px;
}
/* 한 줄에 들어가는 동안은 이름이 자리를 다 먹어 값이 오른쪽 끝에 섭니다 —
   본의 `space-between` 과 같은 그림이고, 넘칠 때만 다르게 굽니다. */
[data-skin="athena"] .sb-odds__name {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  /* 본이 이 마디에 걸던 셋은 아래 `__who` 로 내려갑니다. */
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
[data-skin="athena"] .sb-odds__who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
[data-skin="athena"] .sb-odds__mark {
  flex: none;
}
[data-skin="athena"] .sb-odds__name > svg {
  flex: none;
  align-self: center;
}

/*
 * ── ② 「모든 배팅 보기」에 색 ─────────────────────────────
 *
 * 운영자가 직접 시켰습니다: 「모든배팅 이거 버튼도 **색 좀 넣고.**」
 *
 * 이 자리를 앞서 두 번 고쳤고 두 번 다 「아직 안 보인다」였습니다. 그때
 * 넷을 찍어 보고 **펼치기를 가진 두 스킨(포세이돈·아폴로)이 둘 다 색을
 * 안 쓴다**는 것을 찾았고, 그래서 색 없이 폭과 자리로 풀었습니다. 그
 * 관찰은 지금도 맞습니다 — 그런데 운영자가 색을 달라고 했습니다.
 *
 * 걱정한 것은 이것입니다: **해외형 한 쪽에 이 단추가 70 개 섭니다.**
 * 70 개가 다 튀면 그건 강조가 아니라 배경입니다. 그래서 세기를 골라야
 * 했고, 짐작으로 안 골랐습니다 — 넣고 여러 줄을 찍어 봤습니다
 * (`scripts/athena-more-rows.mjs`).
 *
 * 고른 세기: **글자와 테두리에 강조색, 면은 8%.** 채운 단추가 아닙니다.
 * 본의 점선을 실선으로 바꾸고 색을 줍니다 — 점선은 「아직 안 된 것」처럼
 * 읽히고, 이 단추는 눌리는 것입니다. 손이 닿으면 면이 16% 로 짙어집니다.
 *
 * 세기 셋을 같은 자리에서 찍어 나란히 놓았습니다 — 색 없음(본의 점선),
 * 면 8%, 면 20%. 1440 한 화면에 이 단추가 일곱 섭니다.
 *
 *   색 없음   눈이 안 멈춥니다. 운영자가 두 번 말한 그 상태입니다.
 *   면 8%     보이되, 한 화면에서 제일 밝은 것은 여전히 배당 숫자입니다.
 *   면 20%    일곱 줄이 배당보다 먼저 읽힙니다. 걸 것을 고르는 눈이
 *             먼저 닿는 자리가 값이 아니라 「더 보기」가 됩니다.
 *
 * 그래서 8% 입니다. **색은 남기고 세기만 내린 것**이 이 숫자이고,
 * 사진 여섯 장은 `scripts/athena-more-rows.mjs` 가 다시 냅니다.
 */
[data-skin="athena"] .sb-more {
  border-style: solid;
  border-color: rgb(var(--p-accent-rgb, 31 182 255) / 0.45);
  background: rgb(var(--p-accent-rgb, 31 182 255) / 0.08);
  color: var(--p-accent);
}
[data-skin="athena"] .sb-more:hover {
  border-color: rgb(var(--p-accent-rgb, 31 182 255) / 0.75);
  background: rgb(var(--p-accent-rgb, 31 182 255) / 0.16);
  color: var(--p-accent);
}

/*
 * ── ③ 리그 거르개만 제 이름을 답니다 ─────────────────────
 *
 * 2026-09-12 에 「종목」·「리그」 둘을 달았지만, 다음날 운영자가 실제
 * 화면을 보고 「종목 글자는 또 뭐고」라고 결정을 뒤집었습니다. 종목은
 * 바로 아래 아이콘·이름 여덟이 이미 스스로를 설명해 이름표가 정보를
 * 더하지 않고 높이만 썼습니다. 그 줄은 뺐습니다.
 *
 * 인기 리그 딱지는 종목과 다릅니다. 리그 이름 여러 개만으로는 그것이
 * 무엇을 거르는 줄인지 알 수 없으므로 「리그」는 남깁니다. 글자는
 * `labels.chrome.boardLeagueLegend` 로 받고, 배팅내역의 같은 낱말과는
 * 열쇠를 나누지 않습니다 — 그쪽 칸 이름을 고치는 사람이 이 이름표까지
 * 같이 고치게 되면 안 됩니다.
 */

/*
 * ── 폰의 지갑 띠 — 걷어낸 판에서 살려 온 것 ─────────────
 *
 * 넓은 폭에서는 **안 그립니다.** 머리띠가 보유머니와 포인트를 이미 같이
 * 말하고 있어서, 여기 또 세우면 같은 수를 두 번 읽힙니다 — 운영자가
 * 걷으라고 한 판이 하던 일이 그것이었습니다.
 *
 * 폰에서만 세웁니다. 폰의 머리띠는 아이콘 셋으로 접혀 잔액을 안 말하고,
 * 그러면 배당을 고르는 동안 제 돈이 화면 어디에도 없습니다.
 *
 * 세로 판이 아니라 **가로 한 줄**입니다. 걷은 판은 390 에서 129px 를
 * 먹었고 이 띠는 40px 입니다 — 첫 경기가 y 465 → 376 으로 올라옵니다.
 */
[data-skin="athena"] .sb-wallet {
  display: none;
}
@media (max-width: 767px) {
  [data-skin="athena"] .sb-wallet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--p-line);
    border-radius: var(--p-radius, 8px);
    background: var(--p-bg);
    font-size: 12px;
    color: var(--p-muted);
  }
  [data-skin="athena"] .sb-wallet__who {
    font-weight: 700;
    color: var(--p-text);
  }
  [data-skin="athena"] .sb-wallet__pair {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }
  [data-skin="athena"] .sb-wallet__pair .fa-wallet,
  [data-skin="athena"] .sb-wallet__pair .fa-award {
    color: var(--p-accent);
  }
  /* 돈은 돈 색으로. 이 판에서 잔액과 배당이 같은 색을 씁니다. */
  [data-skin="athena"] .sb-wallet__pair strong {
    color: var(--p-money);
    font-variant-numeric: tabular-nums;
  }
  [data-skin="athena"] .sb-wallet__pair a {
    color: var(--p-accent);
  }
}

/*
 * ── 인기 리그 딱지 — 왼쪽 판에서 내려온 줄 ──────────────
 *
 * 세로로 여덟을 세우던 것이 가로 한 줄이 됩니다. 지면이 310px 넓어졌고
 * 그 자리는 경기 줄에 줍니다 — 이 줄은 **접히는 딱지**라 남는 폭을
 * 안 먹고, 좁으면 다음 줄로 내려갑니다.
 */
[data-skin="athena"] .sb-pop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
}
[data-skin="athena"] .sb-pop__legend {
  flex: none;
  padding-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--p-muted);
  white-space: nowrap;
}
[data-skin="athena"] .sb-pop__legend .fas {
  margin-right: 4px;
  color: var(--p-accent);
}
/* 「리그」 쪽만 도드라집니다 — 거르는 축의 이름이라 제목과 갈려야 합니다. */
[data-skin="athena"] .sb-pop__legend b {
  margin-right: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
  font-weight: 700;
}
[data-skin="athena"] .sb-pop__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
[data-skin="athena"] .sb-pop__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  background: var(--p-bg);
  color: var(--p-text);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
[data-skin="athena"] .sb-pop__chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
}
[data-skin="athena"] .sb-pop__chip > .fa-trophy {
  font-size: 12px;
  color: var(--p-muted);
}
/* 이름이 길어도 딱지가 줄을 밀어내지 않습니다. */
[data-skin="athena"] .sb-pop__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
/*
 * 수를 **괄호로** 답니다. 위 종목 띠가 `(133)` 이라 여기만 위첨자면 같은
 * 수를 두 꼴로 말하게 됩니다 — 운영자가 「`MLB¹⁵` 가 경기 수인지 리그
 * 수인지 모르겠다」고 한 자리입니다 (2026-09-12).
 */
[data-skin="athena"] .sb-pop__count {
  flex: none;
  color: var(--p-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-skin="athena"] .sb-pop__chip:hover {
  border-color: rgb(var(--p-accent-rgb, 31 182 255) / 0.5);
}
[data-skin="athena"] .sb-pop__chip.active {
  border-color: rgb(var(--p-accent-rgb, 31 182 255) / 0.75);
  background: rgb(var(--p-accent-rgb, 31 182 255) / 0.14);
  color: var(--p-accent);
}
[data-skin="athena"] .sb-pop__chip.active .sb-pop__count {
  color: inherit;
}

/*
 * 폰에서는 안 그립니다 — **걷기 전과 같게** 두려고 그렇습니다.
 *
 * 이 딱지들은 왼쪽 판 안에 있었고 그 판은 767 아래에서 `display: none`
 * 이었습니다. 그래서 폰에는 리그로 거르는 줄이 **원래 없었습니다.**
 * 가로로 내리면서 아무 말 없이 두면 폰에만 새 줄이 생깁니다.
 *
 * 재 보니 390 에서 딱지 여덟이 **네 줄에 110px** 이고, 그만큼 첫 경기가
 * 아래로 밀립니다. 폰의 첫 화면은 이미 종목 띠 두 줄을 쓰고 있어서
 * 경기가 y≈420 에서 시작합니다. 없던 거르개를 더하면서 있던 경기를
 * 미는 것은 이 폭에서 남는 장사가 아닙니다.
 *
 * 폰에도 이 거르개를 주기로 정하면, 감추는 대신 **한 줄로 옆으로 굴리는**
 * 꼴이 낫습니다(30px). 지금 그렇게 안 한 것은 이번 지시가 「폰은 안
 * 바뀌는지 확인하라」였기 때문이고, 그것은 고르는 문제라 여기서 혼자
 * 정할 일이 아닙니다.
 */
@media (max-width: 767px) {
  [data-skin="athena"] .sb-pop {
    display: none;
  }
}

/*
 * 경기가 없는 종목은 **누르기 전에** 그렇게 보입니다.
 *
 * 막지는 않습니다 — `pointer-events` 도 `disabled` 도 안 겁니다. 종목이
 * 사라졌다 나타나면 띠의 차례가 흔들리고, 물러난 것과 막힌 것은 다른
 * 말입니다.
 */
[data-skin="athena"] .sb-tab--none:not(.active) {
  color: color-mix(in srgb, var(--p-muted) 55%, transparent);
}
[data-skin="athena"] .sb-tab--none:not(.active) img {
  opacity: 0.45;
}

/*
 * ── ④ 실시간 판의 점수와 시계 ────────────────────────────
 *
 * 본은 시작 시각만 그리고 점수를 안 그립니다. 실시간에서 그것은 빠진
 * 정보입니다 — 2:1 로 지고 있는 경기와 0:0 인 경기가 같아 보이면 라이브에
 * 걸 수가 없습니다. 자리는 본의 `VS` 자리 그대로이고 글자만 다릅니다.
 */
[data-skin="athena"] .sb-match__score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--p-money);
  font-variant-numeric: tabular-nums;
}
[data-skin="athena"] .sb-match__score > i {
  font-style: normal;
  color: var(--p-muted);
}

/*
 * ── ⑤ 본이 **다른 시트에** 두고 온 것 ────────────────────
 *
 * 포세이돈은 `visual.css` 와 `mobile.css` 도 같이 싣습니다. 아테나는 그
 * 둘을 안 싣습니다 — 그건 판이 아니라 껍데기 시트이고, 이번 일의 범위는
 * **스포츠**입니다. 머리띠는 아테나 그대로 둡니다.
 *
 * 그래서 저 둘에 흩어져 있던 것 중 **판이 돌아가는 데 필요한 것만**
 * 여기로 옮깁니다. 저쪽을 싣는 것과 다릅니다: 저쪽을 실으면 머리띠까지
 * 포세이돈이 됩니다.
 */

/* 폰에서는 좌우 판의 자리를 안 비웁니다 — 390 에서 310+310 이면 남는 것이
   음수입니다. 본은 이 규칙을 `visual.css` 에 두고 있었습니다. */
@media (max-width: 767px) {
  [data-skin="athena"] .sports-page-container {
    padding: 0;
  }
  [data-skin="athena"] .sb-page #panel_betting {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    margin-top: 12px;
  }
}

/*
 * ── ⑥ 왼쪽 단은 **걷었습니다** (2026-09-13) ──────────────
 *
 * 여기에 그 단의 스타일 230 줄이 있었습니다 — 지갑 띠 · 종목 목록 ·
 * 인기 리그. 본이 물려받은 export 시트 여섯 장을 아테나에 실을 수
 * 없어서, 배포된 본에서 계산된 값을 재어 다시 적은 것이었습니다.
 *
 * 운영자가 그 단을 보고 걷으라고 했습니다 (맨 위 `.sb-page` 참조).
 * 스타일도 같이 지웁니다 — 마크업이 없는 규칙을 남겨 두면 다음
 * 사람이 「어딘가 쓰이는 줄」로 읽고 고치려 듭니다.
 *
 * 셋 중 인기 리그만 갈 곳이 필요했고 `.sb-pop` 으로 내려왔습니다.
 * 지운 것이 필요하면 `87df49cd` 에 그대로 있습니다.
 */

/*
 * ── ⑦ 1024~1279 는 그 폭의 비율을 씁니다 ─────────────────
 *
 * 왼쪽 판을 걷기 전에는 가운데에 404px 뿐이라 `72 | 1fr | 64 | 1fr` 로
 * 줄여 기준선을 살렸습니다. 판을 걷고 714px 이 됐는데도 그 값을 그대로
 * 두니, 운영자 사진에서 **마켓 이름 칸만 72px** 로 접히고 옆 값 칸은
 * 269px 로 벌어졌습니다 — 「좌측 크기가 이상하다」는 그 비율입니다.
 *
 * 다시 재서 `128 | 1fr | 84 | 1fr` 로 맞춥니다. 1024 에서 값 칸은
 * 220px 이고 기준선 잘림·마켓 이름 잘림·가로 넘침이 모두 0 입니다.
 * 넓은 화면의 176px 을 그대로 쓰지 않는 것은 그 폭에서는 값 칸을
 * 196px 까지 줄여 긴 팀 이름의 말줄임을 불필요하게 늘리기 때문입니다.
 *
 * 머리줄도 같이 바꿉니다. 안 맞추면 경기 시간이 무승부 배당에서
 * 어긋납니다 — 본이 그 까닭을 위에 적어 두었습니다.
 */
@media (min-width: 768px) and (max-width: 1279px) {
  [data-skin="athena"] .sb-page {
    padding-left: 12px;
    padding-bottom: 24px;
  }
  [data-skin="athena"] .sb-match {
    --sb-odds-start: 136px;
  }
  [data-skin="athena"] .sb-row,
  [data-skin="athena"] .sb-match__head {
    grid-template-columns: 128px minmax(0, 1fr) 84px minmax(0, 1fr);
  }
  [data-skin="athena"] .sb-row,
  [data-skin="athena"] .sb-match__head {
    padding-left: 10px;
    padding-right: 10px;
  }
  [data-skin="athena"] .sb-odds {
    padding: 0 8px;
  }
  [data-skin="athena"] .sb-row__line {
    padding: 0 2px;
  }
  /*
   * 예전 72px 기둥에서 **일본어가 샜습니다** — 1024 에서 열 자리
   * (「ハンディキャップ」). 128px 로 넓혔지만 이 줄을 남깁니다.
   *
   * 까닭은 폭만이 아니라 끊는 규칙입니다. 본은 `word-break: keep-all` 인데,
   * 그것이 가나 한 덩어리를 한 줄로 묶어 두 줄 자리에 한 줄만 들어갑니다.
   * 한국어는 낱말이 짧아 좁은 값에도 들어가므로 넓은 폭에서는 안 드러났습니다.
   *
   * 좁은 폭에서만 아무 데서나 끊게 하고 줄 수를 셋으로 엽니다. 넓은
   * 폭에서는 본 그대로입니다 — 거기서는 샌 적이 없습니다.
   */
  [data-skin="athena"] .sb-row__market {
    -webkit-line-clamp: 3;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}