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

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

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

[data-skin="poseidon"] .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="poseidon"] .sc-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
[data-skin="poseidon"] .sc-head h2 i {
  color: var(--p-accent);
}
[data-skin="poseidon"] .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="poseidon"] .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="poseidon"] .sc-alert p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  word-break: keep-all;
}
[data-skin="poseidon"] .sc-alert i {
  margin-top: 2px;
  flex: 0 0 auto;
}
[data-skin="poseidon"] .sc-alert__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
[data-skin="poseidon"] .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="poseidon"] .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="poseidon"] .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="poseidon"] .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="poseidon"] .sc-btn--ghost:hover {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.16);
}
[data-skin="poseidon"] .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="poseidon"] .sc-legs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-skin="poseidon"] .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="poseidon"] .sc-leg--bonus {
  border-left-color: var(--p-warn);
}
[data-skin="poseidon"] .sc-leg__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
[data-skin="poseidon"] .sc-leg__match {
  font-size: 11.5px;
  color: var(--p-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="poseidon"] .sc-leg__pick {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="poseidon"] .sc-leg__odds {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--p-money);
  font-variant-numeric: tabular-nums;
}
/* 값이 사라진 다리 — 지우지 않고 줄을 긋습니다. */
[data-skin="poseidon"] .sc-leg__odds--dead {
  color: var(--p-muted);
  text-decoration: line-through;
}
[data-skin="poseidon"] .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="poseidon"] .sc-leg__x:hover {
  background: rgba(255, 90, 90, 0.2);
  color: var(--p-ink-bad);
}

/*
 * 빈 카트. 130px 이었는데, 아무것도 안 담긴 카트가 화면의 3분의 1을 쓰면서
 * 그 아래 폴더보너스·금액·배팅하기를 화면 밖으로 밀었습니다. 할 말이 한
 * 줄인 자리는 한 줄만큼만 씁니다.
 */
[data-skin="poseidon"] .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="poseidon"] .sc-empty i {
  font-size: 24px;
  opacity: 0.4;
}

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

/*
 * 보너스 칸은 **한 색을 여러 알파로** 씁니다 — 테두리 22%, 면 5%, 오버 60%,
 * 켜짐 16%. 그 색만 조합에서 받으면 나머지는 따라옵니다 (`--t-bonus-rgb`:
 * 어두운 둘은 앰버, 흰 조합은 코발트).
 */
[data-skin="poseidon"] .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="poseidon"] .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="poseidon"] .sc-bonus__count {
  color: var(--p-muted);
  font-weight: 500;
  font-size: 11.5px;
}
/*
 * 세 칸 격자입니다. 처음엔 한 줄에 하나씩 쌓았는데, 옵션 셋에 각각 「3경기
 * 선택 시 활성화」 한 줄이 붙어 170px 을 먹었고 그 아래 금액·합계·배팅하기가
 * 화면 밖으로 밀렸습니다 (2026-09-04 캡처). 옆으로 세우면 70px 입니다.
 *
 * 이유 줄을 없애지 않은 이유: 그게 없으면 잠긴 단추가 이유 없이 섭니다.
 * 자리를 줄일 곳은 배치이지 말이 아닙니다.
 */
[data-skin="poseidon"] .sc-bonus__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
}
[data-skin="poseidon"] .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="poseidon"] .sc-bonus__btn > span {
  font-size: 11.5px;
  color: var(--p-muted);
}
/* 배당은 **돈**입니다 — 흰 조합에서는 칸의 색이 아니라 금액색으로 찍힙니다. */
[data-skin="poseidon"] .sc-bonus__btn strong {
  font-size: 12.5px;
  color: var(--t-bonus-odds, var(--p-warn));
  font-variant-numeric: tabular-nums;
}
[data-skin="poseidon"] .sc-bonus__btn.active > span {
  color: var(--p-text);
}
[data-skin="poseidon"] .sc-bonus__btn:hover[data-eligible="yes"] {
  border-color: rgb(var(--t-bonus-rgb, 255 179 71) / 0.6);
}
[data-skin="poseidon"] .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="poseidon"] .sc-bonus__btn[data-eligible="no"] {
  opacity: var(--t-bonus-off, 0.45);
  cursor: not-allowed;
}
[data-skin="poseidon"] .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="poseidon"] .sc-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--p-muted);
  word-break: keep-all;
}

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

[data-skin="poseidon"] .sc-stake > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-muted);
}
[data-skin="poseidon"] .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="poseidon"] .sc-stake__box:focus-within {
  border-color: var(--p-accent);
}
[data-skin="poseidon"] .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="poseidon"] .sc-stake__input:disabled {
  color: var(--p-muted);
}
[data-skin="poseidon"] .sc-stake__unit {
  font-size: 12.5px;
  color: var(--p-muted);
}

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

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

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

[data-skin="poseidon"] .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="poseidon"] .sc-foot {
  padding-top: 2px;
  padding-bottom: 4px;
}
/*
 * `<button>` 이기도 하고 `<a>` 이기도 합니다 — 스포츠에서는 보내는 단추,
 * 그 밖에서는 판으로 가는 링크. `display` 를 안 적었더니 링크 쪽이 인라인
 * 글자로 떨어져 단추처럼 안 보였습니다 (2026-09-04 캡처).
 */
[data-skin="poseidon"] .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="poseidon"] .sc-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}
[data-skin="poseidon"] .sc-submit:active:not(:disabled) {
  transform: translateY(1px);
}
[data-skin="poseidon"] .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="poseidon"] .sc-submit[data-state="holding"],
[data-skin="poseidon"] .sc-submit[data-state="placing"] {
  background: #c8801f;
  color: #1b1204;
}

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

[data-skin="poseidon"] .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="poseidon"] .sc-fab i {
  font-size: 15px;
}
[data-skin="poseidon"] .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="poseidon"] .sc-fab[aria-expanded="true"] {
  display: none;
}

[data-skin="poseidon"] .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="poseidon"] .sc-sheet.open {
  transform: translateY(0);
}
[data-skin="poseidon"] .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="poseidon"] .sc-sheet .sc-head {
  padding-right: 44px;
}

[data-skin="poseidon"] .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="poseidon"] .sc-scrim.active {
  opacity: 1;
  pointer-events: auto;
}

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