/* Apollo — 스포츠 판, 배팅카트, 배팅내역.
 *
 * These three are the screens the statement sheet could not absorb. A fixture
 * list is not a label and a value; a slip is a column that follows you down the
 * page; a settled bet is a small document of its own. They keep the skin's
 * scale, palette and hairlines and nothing else.
 *
 * ── Names ────────────────────────────────────────────────────────────────
 *
 * Everything here is `apollo-sb-*` (board), `apollo-sc-*` (cart) or
 * `apollo-bh-*` (history). No name declared in `account.css` or `skin.css` may
 * be declared again here — the seam fails a class that two scoped sheets both
 * style, because then neither file is the answer.
 *
 * ── Breakpoints ──────────────────────────────────────────────────────────
 *
 * 767 and 768, and nothing between them. `model.mobile` flips at
 * `matchMedia("(max-width: 767px)")`, and a sheet that disagreed by one pixel
 * left the 768px tablet drawing the desktop side-cart while the CSS had already
 * pushed the panel back into flow — the cart landed below the fixture list.
 */

/*
 * Surfaces come from the theme, because the operator can put this skin on a
 * dark palette and a board painted in fixed creams would stay white while the
 * chrome around it went dark. `--sb-gold` is mixed toward the theme's ink for
 * the same reason a deepened gold is unreadable on 자정's panel.
 */
[data-skin="apollo"] .apollo-sb {
    --sb-line: var(--color-line);
    --sb-line-soft: var(--color-line-soft);
    --sb-paper: var(--color-panel);
    --sb-wash: color-mix(in srgb, var(--color-panel) 94%, var(--color-ink));
    --sb-ink: var(--color-ink);
    --sb-muted: var(--color-ink-muted);
    --sb-gold: color-mix(in srgb, var(--apollo-gold) 50%, var(--color-ink));

    position: relative;
    width: 100%;
    padding: 8px 0 56px;
    color: var(--sb-ink);
    font-size: 14px;
    letter-spacing: -0.01em;
}

/* Board left, slip right. The slip is fixed rather than absolute: absolute made
   it inherit the wrapper's height and the submit was clipped off the bottom. */
@media (min-width: 768px) {
    [data-skin="apollo"] .apollo-sb {
        padding-right: 322px;
    }

    [data-skin="apollo"] .apollo-sb__cart {
        position: fixed;
        top: 96px;
        right: 16px;
        bottom: 12px;
        z-index: 5;
        width: 306px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ── 종목 탭 ───────────────────────────────────────────────────────────── */

/*
 * `grid-auto-flow: column`, not `repeat(8, 1fr)` — 라이브 carries five sports
 * plus 전체 and a fixed eight-column grid left a hole.
 */
/*
 * 종목 탭.
 *
 * ── 왜 최소 너비가 있는가 (2026-09-07 확인) ──────────────────────────────
 *
 * `minmax(0, 1fr)` 이라 여덟 칸이 남은 폭을 무조건 나눠 가졌습니다. 768px
 * 태블릿에서는 왼쪽 레일과 오른쪽 장바구니를 뺀 298px 을 여덟이 나눠 **한 칸이
 * 32px** 이 되었고, 「아이스하키」가 한 줄에 한 글자씩 다섯 줄로 쌓여
 * 세로쓰기처럼 보였습니다. 좁은 것이 아니라 고장 난 것으로 읽힙니다.
 *
 * 칸에 바닥을 주고, 안 들어가면 **옆으로 굴립니다**. 구간을 하나 더 두지 않는
 * 이유는 이 규칙이 폭과 무관하게 옳기 때문입니다 — 자리가 있으면 1fr 로 펴지고
 * 없으면 바닥에서 멈춥니다. (`sports.css` 는 767·768 말고 다른 구간을 못 쓰게
 * `apollo-sports.spec.ts` 가 막고 있기도 합니다.)
 */
[data-skin="apollo"] .apollo-sb-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, 1fr);
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

[data-skin="apollo"] .apollo-sb-tabs::-webkit-scrollbar {
    height: 0;
}

[data-skin="apollo"] .apollo-sb-tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 9px 6px;
    border: 1px solid var(--sb-line);
    border-radius: 10px;
    background: var(--sb-paper);
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    /* 이름은 한 줄입니다. 접히기 시작하면 글자가 세로로 쌓입니다. */
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease;
}

[data-skin="apollo"] .apollo-sb-tabs button:hover,
[data-skin="apollo"] .apollo-sb-tabs button[data-active="yes"] {
    border-color: var(--apollo-gold);
    background: rgb(var(--apollo-gold-rgb) / 0.08);
    color: var(--sb-gold);
}

[data-skin="apollo"] .apollo-sb-tabs img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

[data-skin="apollo"] .apollo-sb-tabs em {
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--sb-wash);
    font-size: 12px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

/* ── 리그 필터 ─────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-sb-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid rgb(var(--apollo-gold-rgb) / 0.34);
    border-radius: 9px;
    background: rgb(var(--apollo-gold-rgb) / 0.09);
    font-size: 13px;
}

[data-skin="apollo"] .apollo-sb-filter strong {
    color: var(--sb-gold);
}

[data-skin="apollo"] .apollo-sb-filter span {
    color: var(--sb-muted);
}

[data-skin="apollo"] .apollo-sb-filter button {
    min-height: 32px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid var(--sb-line);
    border-radius: 7px;
    background: var(--sb-paper);
    color: var(--sb-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sb-empty {
    margin: 0 0 12px;
    padding: 40px 20px;
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    background: var(--sb-paper);
    color: var(--sb-muted);
    font-size: 14px;
    text-align: center;
}

/* ── 리그 카드와 경기 ──────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-sb-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-skin="apollo"] .apollo-sb-league {
    overflow: hidden;
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    background: var(--sb-paper);
}

[data-skin="apollo"] .apollo-sb-league > header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sb-line-soft);
    background: var(--sb-wash);
    font-size: 13px;
}

[data-skin="apollo"] .apollo-sb-league > header img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}

[data-skin="apollo"] .apollo-sb-league > header strong {
    color: var(--color-ink-strong);
    font-weight: 600;
}

/* Its own name, not `.apollo-pill` — a class two scoped sheets both style has
   no single answer, and the seam refuses it. */
[data-skin="apollo"] .apollo-sb-country {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--sb-paper);
    color: var(--sb-muted);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-sb-league > header time {
    margin-left: auto;
    color: var(--sb-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/*
 * `--sb-odds-start` is the label column plus the gap. Anything full-width
 * inside the card has to subtract it or its centre lands a hundred pixels left
 * of the draw column.
 */
/*
 * 경기 줄에는 오버 효과가 아예 없었습니다. 목록이 길어지면 눈이 지금 어느
 * 줄에 있는지 놓칩니다 — 「경기가 잘 안보이네」.
 *
 * 왼쪽에 금색 기둥을 세웁니다. `inset` 그림자라 자리를 안 차지해서 줄이
 * 밀리지 않고, 세로로 긴 목록에서 한 줄만 또렷이 떠오릅니다.
 */
[data-skin="apollo"] .apollo-sb-match {
    padding: 4px 0 8px;
    border-top: 1px solid var(--sb-line-soft);
    --sb-odds-start: 114px;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

@media (hover: hover) {
    [data-skin="apollo"] .apollo-sb-match:hover {
        background: rgb(var(--apollo-gold-rgb) / 0.05);
        box-shadow: inset 3px 0 0 var(--apollo-gold);
    }
}

[data-skin="apollo"] .apollo-sb-match:first-of-type {
    border-top: 0;
}

/* Header and row share one grid, so the home price sits under the home team
   and the draw sits under the kick-off. The gaps must match or `1fr` divides
   differently and the two drift apart. */
[data-skin="apollo"] .apollo-sb-match__head {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 150px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 11px 16px 9px;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sb-match__home {
    grid-column: 2;
}

[data-skin="apollo"] .apollo-sb-match__home,
[data-skin="apollo"] .apollo-sb-match__away {
    overflow: hidden;
    color: var(--color-ink-strong);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-sb-match__away {
    text-align: right;
}

[data-skin="apollo"] .apollo-sb-match__time {
    color: var(--sb-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-sb-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 150px minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding: 3px 16px;
}

[data-skin="apollo"] .apollo-sb-row__label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    color: var(--sb-muted);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-sb-row__label span {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

[data-skin="apollo"] .apollo-sb-row__label small {
    color: var(--sb-gold);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-sb-row__side,
[data-skin="apollo"] .apollo-sb-row__mid {
    display: flex;
    min-width: 0;
}

[data-skin="apollo"] .apollo-sb-row__mid {
    justify-content: center;
}

[data-skin="apollo"] .apollo-sb-row__line {
    display: flex;
    align-items: center;
    color: var(--sb-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ── 배당 칸 ───────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-sb-odds {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    background: var(--sb-paper);
    color: var(--sb-ink);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition:
        border-color 130ms ease,
        background 130ms ease;
}

[data-skin="apollo"] .apollo-sb-odds > span {
    display: flex;
    /*
     * 가로 flex 의 교차축 기본값은 `stretch` 이고, 높이가 박힌 SVG 는 늘지
     * 못해 **줄 맨 위**에 붙습니다. 그래서 화살표가 글자보다 몇 px 올라가
     * 있었습니다 (2026-09-07 사용자 지적).
     */
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: var(--sb-muted);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-sb-odds i {
    color: var(--sb-gold);
    font-style: normal;
}

[data-skin="apollo"] .apollo-sb-arrow {
    flex: none;
    /*
     * 글자와 눈높이를 맞춥니다. `align-items: center` 는 상자를 가운데 두는
     * 것이고, 글자는 상자 안에서 베이스라인 위에 앉으므로 상자만 맞추면
     * 화살표가 미세하게 높아 보입니다.
     */
    align-self: center;
    display: block;
}

[data-skin="apollo"] .apollo-sb-odds b {
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/*
 * ── 오버가 안 보이던 까닭 (2026-09-07) ──────────────────────
 *
 *     「경기가 잘 안보이네 마우스 올려도 뭘 선택한지 모르겠고」
 *
 * 오버와 담긴 것이 **같은 금색 테두리**였습니다. 그래서 이미 담은 칸에
 * 마우스를 올리면 아무 일도 안 일어났고, 담기 전에는 1px 테두리 색만
 * 바뀌어 배당 숫자가 빽빽한 줄에서는 눈에 안 띄었습니다.
 *
 * 이제 오버는 **옅은 금색 바탕**을 깝니다. 채우기는 담긴 칸이 독차지하므로
 * (`123` 줄의 규칙 — 금색 채우기는 으뜸 단추 하나만), 오버는 12% 만 얹어
 * 둘이 안 헷갈리게 합니다.
 *
 * 담긴 칸은 오버에서 제외합니다 — 이미 가장 진한 상태라 더 얹을 것이
 * 없고, 얹으면 오히려 흐려집니다.
 */
@media (hover: hover) {
    [data-skin="apollo"] .apollo-sb-odds:hover:not([data-active="yes"]) {
        border-color: var(--apollo-gold);
        background: rgb(var(--apollo-gold-rgb) / 0.12);
    }
}

[data-skin="apollo"] .apollo-sb-odds[data-active="yes"] {
    border-color: var(--apollo-gold);
    background: var(--apollo-gold);
}

[data-skin="apollo"] .apollo-sb-odds[data-active="yes"] > span,
[data-skin="apollo"] .apollo-sb-odds[data-active="yes"] b,
[data-skin="apollo"] .apollo-sb-odds[data-active="yes"] i {
    color: var(--apollo-gold-ink);
}

/*
 * A closed price is dashed and faded but still pressable, and deliberately not
 * `cursor: not-allowed` — pressing it is what makes the board say why.
 */
[data-skin="apollo"] .apollo-sb-odds[data-kind="closed"] {
    border-style: dashed;
    background: var(--sb-wash);
}

[data-skin="apollo"] .apollo-sb-odds[data-kind="closed"] > span {
    opacity: 0.5;
}

[data-skin="apollo"] .apollo-sb-odds[data-kind="closed"] b {
    opacity: 0.32;
}

/* A ring rather than a fill, so the move is still visible on a taken price. */
@keyframes apollo-sb-up {
    from {
        box-shadow: inset 0 0 0 2px rgb(28 148 88 / 0.9);
    }
    to {
        box-shadow: inset 0 0 0 2px rgb(28 148 88 / 0);
    }
}

@keyframes apollo-sb-down {
    from {
        box-shadow: inset 0 0 0 2px rgb(196 62 62 / 0.9);
    }
    to {
        box-shadow: inset 0 0 0 2px rgb(196 62 62 / 0);
    }
}

[data-skin="apollo"] .apollo-sb-odds[data-move="up"] {
    animation: apollo-sb-up 2s ease-out;
}

[data-skin="apollo"] .apollo-sb-odds[data-move="down"] {
    animation: apollo-sb-down 2s ease-out;
}

[data-skin="apollo"] .apollo-sb-more {
    width: calc(100% - 32px - var(--sb-odds-start));
    min-height: 32px;
    margin: 6px 16px 2px calc(16px + var(--sb-odds-start));
    border: 1px dashed var(--sb-line);
    border-radius: 7px;
    background: transparent;
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sb-more:hover {
    border-color: var(--apollo-gold);
    color: var(--sb-gold);
}

[data-skin="apollo"] .apollo-sb-paging {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

[data-skin="apollo"] .apollo-sb-paging button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    background: var(--sb-paper);
    color: var(--sb-ink);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sb-paging button[data-active="yes"] {
    border-color: var(--apollo-gold);
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-weight: 700;
}

/*
 * Pinned to the bottom of the viewport: at the top of a two-thousand-pixel
 * fixture list the answer scrolls out of sight before it is read. It takes no
 * pointer events so it cannot swallow the cart button underneath it.
 */
[data-skin="apollo"] .apollo-sb-refusal {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--z-bet-slip-panel, 1240) - 1);
    display: flex;
    justify-content: center;
    padding: 0 12px 12px;
    pointer-events: none;
}

[data-skin="apollo"] .apollo-sb-refusal p {
    max-width: 680px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--ui-alert-bad-line);
    border-radius: 9px;
    background: var(--ui-alert-bad-bg);
    box-shadow: 0 8px 26px rgb(46 42 37 / 0.18);
    color: var(--ui-alert-bad-ink);
    font-size: 13px;
    line-height: 1.5;
}

/* ── 배팅카트 ──────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-sc {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    background: var(--sb-paper);
    color: var(--sb-ink);
    font-size: 14px;
}

[data-skin="apollo"] .apollo-sc__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--sb-line-soft);
    background: var(--sb-wash);
}

[data-skin="apollo"] .apollo-sc__head h2 {
    margin: 0;
    color: var(--color-ink-strong);
    font-size: 15px;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-sc__count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-sc__clear {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
}

[data-skin="apollo"] .apollo-sc__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ui-alert-info-bg);
    color: var(--ui-alert-info-ink);
    font-size: 13px;
    line-height: 1.5;
}

[data-skin="apollo"] .apollo-sc__note[data-tone="warn"] {
    background: var(--ui-alert-warn-bg);
    color: var(--ui-alert-warn-ink);
}

[data-skin="apollo"] .apollo-sc__note[data-tone="ok"] {
    background: var(--ui-alert-ok-bg);
    color: var(--ui-alert-ok-ink);
}

[data-skin="apollo"] .apollo-sc__note p {
    flex: 1;
    min-width: 160px;
    margin: 0;
}

[data-skin="apollo"] .apollo-sc__note button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid currentcolor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc__empty {
    margin: 0;
    padding: 34px 12px;
    color: var(--sb-muted);
    font-size: 13px;
    text-align: center;
}

[data-skin="apollo"] .apollo-sc__legs {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .apollo-sc__legs > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sb-line-soft);
}

[data-skin="apollo"] .apollo-sc__legs > li:last-child {
    border-bottom: 0;
}

[data-skin="apollo"] .apollo-sc__legs > li > div:first-child {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[data-skin="apollo"] .apollo-sc__legs strong {
    overflow: hidden;
    color: var(--color-ink-strong);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-sc__legs span {
    color: var(--sb-muted);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-sc__legs em {
    color: var(--sb-gold);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-sc__legs > li[data-gone="yes"] {
    opacity: 0.62;
}

[data-skin="apollo"] .apollo-sc__price {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

[data-skin="apollo"] .apollo-sc__price b {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* A price that moved under an open slip is shown, never swallowed. */
[data-skin="apollo"] .apollo-sc__price b s {
    color: var(--sb-muted);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-sc__price b[data-move="up"] {
    color: var(--color-up-text);
}

[data-skin="apollo"] .apollo-sc__price b[data-move="down"],
[data-skin="apollo"] .apollo-sc__price b[data-gone="yes"] {
    color: var(--color-danger-text);
}

[data-skin="apollo"] .apollo-sc__price button,
[data-skin="apollo"] .apollo-sc__bonusrow button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--sb-wash);
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc__bonusrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgb(var(--apollo-gold-rgb) / 0.1);
    font-size: 13px;
}

[data-skin="apollo"] .apollo-sc__bonusrow b {
    color: var(--sb-gold);
}

[data-skin="apollo"] .apollo-sc__bonusrow i {
    margin-left: auto;
    font-family: var(--font-numeric);
    font-style: normal;
}

[data-skin="apollo"] .apollo-sc__bonus h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--sb-ink);
    font-size: 13px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-sc__bonus h3 span {
    color: var(--sb-muted);
    font-size: 12px;
    font-weight: 400;
}

[data-skin="apollo"] .apollo-sc__bonus ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .apollo-sc__bonus li {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[data-skin="apollo"] .apollo-sc__bonus li button {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 44px;
    padding: 6px 4px;
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    background: var(--sb-paper);
    color: var(--sb-ink);
    font-family: inherit;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc__bonus li button[data-active="yes"] {
    border-color: var(--apollo-gold);
    background: rgb(var(--apollo-gold-rgb) / 0.1);
}

[data-skin="apollo"] .apollo-sc__bonus li button:disabled {
    opacity: 0.45;
    cursor: default;
}

[data-skin="apollo"] .apollo-sc__bonus li b {
    font-size: 12px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-sc__bonus li i {
    color: var(--sb-gold);
    font-family: var(--font-numeric);
    font-size: 12px;
    font-style: normal;
}

/* Why an option is locked, printed — a `title` never reaches a touch screen. */
[data-skin="apollo"] .apollo-sc__bonus li small {
    color: var(--sb-muted);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    word-break: keep-all;
}

[data-skin="apollo"] .apollo-sc__stake label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

[data-skin="apollo"] .apollo-sc__stake label span {
    color: var(--sb-muted);
    font-size: 13px;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-sc__stake input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    outline: 0;
    background: var(--sb-paper);
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

[data-skin="apollo"] .apollo-sc__stake input:focus {
    border-color: var(--apollo-gold);
    box-shadow: 0 0 0 3px rgb(var(--apollo-gold-rgb) / 0.14);
}

[data-skin="apollo"] .apollo-sc__chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
}

[data-skin="apollo"] .apollo-sc__chips button {
    min-height: 34px;
    padding: 0 4px;
    border: 1px solid var(--sb-line);
    border-radius: 7px;
    background: var(--sb-paper);
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc__chips button:hover:not(:disabled) {
    border-color: var(--apollo-gold);
    color: var(--sb-gold);
}

[data-skin="apollo"] .apollo-sc__chips button:disabled {
    opacity: 0.4;
    cursor: default;
}

[data-skin="apollo"] .apollo-sc__hint {
    margin: 8px 0 0;
    color: var(--sb-muted);
    font-size: 12px;
    line-height: 1.5;
    word-break: keep-all;
}

[data-skin="apollo"] .apollo-sc__totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: var(--sb-wash);
}

[data-skin="apollo"] .apollo-sc__totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

[data-skin="apollo"] .apollo-sc__totals dt {
    color: var(--sb-muted);
    font-size: 13px;
}

[data-skin="apollo"] .apollo-sc__totals dd {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-sc__totals > div[data-lead="yes"] dd {
    color: var(--sb-gold);
    font-size: 17px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-sc__foot {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--sb-line-soft);
    background: var(--sb-wash);
}

[data-skin="apollo"] .apollo-sc__go {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 9px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc__go:disabled {
    border: 1px solid var(--sb-line);
    background: var(--sb-paper);
    color: var(--sb-muted);
    cursor: default;
}

/* ── 배팅카트, 폰 ──────────────────────────────────────────────────────── */

/*
 * The FAB hides itself when the sheet is open. `--z-cart-bar` (1260) is above
 * `--z-bet-slip-panel` (1240) — correct for Zeus's bottom bar, wrong for a
 * round button, which otherwise floats over the sheet's own 배팅하기.
 */
[data-skin="apollo"] .apollo-sc-fab {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: var(--z-cart-bar, 1260);
    display: none;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--apollo-gold);
    box-shadow: 0 8px 22px rgb(46 42 37 / 0.28);
    color: var(--apollo-gold-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-sc-fab b {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 99px;
    background: rgb(255 255 255 / 0.85);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-sc-fab[aria-expanded="true"] {
    display: none;
}

/* `max-height` and `overflow-y` are load-bearing: unbounded, the sheet grows
   past the viewport as legs accumulate and 배팅하기 leaves the screen. */
[data-skin="apollo"] .apollo-sc-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-bet-slip-panel, 1240);
    display: none;
    max-height: 82dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px 14px 0 0;
    background: var(--color-panel);
    box-shadow: 0 -12px 32px rgb(46 42 37 / 0.24);
    transform: translateY(100%);
    transition: transform 220ms ease;
}

[data-skin="apollo"] .apollo-sc-sheet.open {
    transform: translateY(0);
}

[data-skin="apollo"] .apollo-sc-sheet__x {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

/* `calc(--z-bet-slip-panel - 1)`, never `--z-cart-bar`: with the cart token the
   black veil lands over the cart it is supposed to sit behind. */
[data-skin="apollo"] .apollo-sc-scrim {
    position: fixed;
    z-index: calc(var(--z-bet-slip-panel, 1240) - 1);
    display: none;
    inset: 0;
    opacity: 0;
    background: rgb(28 24 20 / 0.5);
    pointer-events: none;
    transition: opacity 220ms ease;
}

[data-skin="apollo"] .apollo-sc-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 767px) {
    [data-skin="apollo"] .apollo-sc-fab,
    [data-skin="apollo"] .apollo-sc-sheet,
    [data-skin="apollo"] .apollo-sc-scrim {
        display: flex;
    }

    [data-skin="apollo"] .apollo-sc-fab[aria-expanded="true"] {
        display: none;
    }

    [data-skin="apollo"] .apollo-sc-sheet {
        display: block;
    }

    [data-skin="apollo"] .apollo-sc {
        border: 0;
        border-radius: 0;
    }
}

/* ── 배팅내역 ──────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-bh {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 16px;
    background: var(--wash-2);
    list-style: none;
}

[data-skin="apollo"] .apollo-bh > li {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
}

/* The verdict as a bar down the left edge, readable before any word is. */
[data-skin="apollo"] .apollo-bh > li[data-status="won"] {
    box-shadow: inset 3px 0 0 var(--color-up-text);
}

[data-skin="apollo"] .apollo-bh > li[data-status="lost"] {
    box-shadow: inset 3px 0 0 var(--color-danger-text);
}

[data-skin="apollo"] .apollo-bh > li[data-status="wait"] {
    box-shadow: inset 3px 0 0 var(--apollo-gold);
}

[data-skin="apollo"] .apollo-bh__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--wash);
}

[data-skin="apollo"] .apollo-bh__head strong {
    color: var(--color-ink-strong);
    font-size: 14px;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-bh__head em[data-dropped="yes"] {
    opacity: 0.6;
    text-decoration: line-through;
}

[data-skin="apollo"] .apollo-bh__acts {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

[data-skin="apollo"] .apollo-bh-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

[data-skin="apollo"] .apollo-bh-ask b {
    color: var(--ui-alert-warn-ink);
    font-size: 13px;
}

[data-skin="apollo"] .apollo-bh__sums {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}

[data-skin="apollo"] .apollo-bh__sums dt {
    color: var(--muted);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-bh__sums dd {
    margin: 2px 0 0;
    color: var(--color-ink-strong);
    font-size: 14px;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-bh__sums > div[data-kind="money"] dd,
[data-skin="apollo"] .apollo-bh__sums > div[data-kind="odds"] dd {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-bh__legs {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .apollo-bh__legs > li {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
}

[data-skin="apollo"] .apollo-bh__legs > li:last-child {
    border-bottom: 0;
}

[data-skin="apollo"] .apollo-bh__legs > li[data-gone="yes"] {
    background: var(--wash-2);
}

/* Home · score · away, so the fixture reads the way it was played. */
[data-skin="apollo"] .apollo-bh__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

[data-skin="apollo"] .apollo-bh__teams > span {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-bh__teams > span:last-child {
    text-align: right;
}

/* The side that was taken. A settled leg that does not say which way it was
   bet cannot be read at all. */
[data-skin="apollo"] .apollo-bh__teams > span[data-picked="yes"] {
    color: var(--color-ink-strong);
    font-weight: 700;
}

[data-skin="apollo"] .apollo-bh__teams b {
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

[data-skin="apollo"] .apollo-bh__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

[data-skin="apollo"] .apollo-bh__meta em {
    color: var(--gold-text);
    font-style: normal;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-bh__meta i {
    margin-left: auto;
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-bh__bonus[data-dropped="yes"] .apollo-bh__meta {
    opacity: 0.55;
    text-decoration: line-through;
}

[data-skin="apollo"] .apollo-bh__notes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--line-soft);
    background: var(--wash);
}

[data-skin="apollo"] .apollo-bh__notes p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

[data-skin="apollo"] .apollo-bh__notes p[data-tone="warn"] {
    color: var(--ui-alert-warn-ink);
}

/* ── 판, 폰 ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Clear the cart button. */
    [data-skin="apollo"] .apollo-sb-refusal {
        bottom: 68px;
    }

    [data-skin="apollo"] .apollo-sb-tabs {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    [data-skin="apollo"] .apollo-sb-tabs button {
        min-height: 60px;
        padding: 7px 3px;
        font-size: 12px;
    }

    [data-skin="apollo"] .apollo-sb-tabs img {
        width: 18px;
        height: 18px;
    }

    /* The market name takes its own row, so the label column is gone and
       anything measuring from it starts at zero. */
    [data-skin="apollo"] .apollo-sb-match {
        --sb-odds-start: 0px;
    }

    [data-skin="apollo"] .apollo-sb-more {
        width: calc(100% - 20px);
        margin: 6px 10px 2px;
    }

    /* 92px, not 64: `2026-08-23 20:00` renders at 107px and overlapped the
       team names. It wraps to two lines instead. */
    [data-skin="apollo"] .apollo-sb-match__head,
    [data-skin="apollo"] .apollo-sb-row {
        grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
        gap: 5px;
        padding: 9px 10px 7px;
    }

    [data-skin="apollo"] .apollo-sb-row {
        padding: 3px 10px;
    }

    [data-skin="apollo"] .apollo-sb-match__home {
        grid-column: 1;
    }

    [data-skin="apollo"] .apollo-sb-match__time {
        font-size: 12px;
        line-height: 1.3;
        white-space: normal;
    }

    [data-skin="apollo"] .apollo-sb-row__label {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        padding-top: 6px;
    }

    /* `min-height`, not `height`: a fixed height with the name stacked above
       the value crushed the name box to a few pixels. */
    [data-skin="apollo"] .apollo-sb-odds {
        flex-direction: column;
        justify-content: center;
        gap: 0;
        height: auto;
        min-height: 44px;
        padding: 5px 8px;
    }

    [data-skin="apollo"] .apollo-sb-odds > span {
        flex: 0 0 auto;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.3;
    }

    [data-skin="apollo"] .apollo-sb-league > header time,
    [data-skin="apollo"] .apollo-sb-country {
        display: none;
    }

    [data-skin="apollo"] .apollo-bh__teams {
        grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    }

    [data-skin="apollo"] .apollo-bh__meta i {
        margin-left: 0;
    }

    [data-skin="apollo"] .apollo-bh__acts {
        width: 100%;
        margin-left: 0;
    }
}