/* Apollo account and service pages.
 *
 * ── The scale ────────────────────────────────────────────────────────────
 *
 * This sheet has been wrong in both directions. The first build set eyebrows
 * at 8px over hints at 10px over body at 12px and was unreadable; the
 * correction overshot into 30px headings, 54px figures and 60px buttons, and
 * the operator's next word was that the type was now too big and the pages
 * were not pretty. Both notes are the same note: the sizes were never chosen
 * against each other.
 *
 * So the ladder below is a real one — 12 · 13 · 14 · 15 · 16 · 22 · 30 — with
 * one step between neighbours and a floor of `--fs-caption`. 14px body is what
 * Korean reads comfortably at this measure; 30px is enough for a balance to be
 * the loudest thing on a page without shouting.
 *
 * ── Surface ──────────────────────────────────────────────────────────────
 *
 * White cards on hairlines, and cream used **only** as an accent — a headline
 * wash, a ledger header. The version before this made every panel head a beige
 * slab, so eight identical bars stacked down the page with no hierarchy left
 * to read. Restraint here is the whole difference between the two.
 *
 * ── Scoping ──────────────────────────────────────────────────────────────
 *
 * Every selector sits under `[data-skin="apollo"] .apollo-…`, so nothing here
 * reaches the home, sports or bet-history screens, and no bare tag is styled.
 */

[data-skin="apollo"] .apollo-account {
    /* Type. */
    --fs-caption: 12px;
    --fs-label: 13px;
    --fs-body: 14px;
    --fs-value: 15px;
    /*
     * The gap between these two is the page's hierarchy. At 22 and 16, both at
     * weight 700, 입금신청 and 입금은행계좌 read as peers and five cards stacked
     * into one flat list. A section heading is a label, not a title.
     */
    --fs-section: 15px;
    --fs-title: 26px;
    --fs-figure: clamp(26px, 2.6vw, 30px);
    --fs-input: clamp(22px, 2.2vw, 26px);

    /*
     * Gold for text, separate from gold for surfaces. `--apollo-gold-deep`
     * reads 3.4:1 on a cream panel, which is fine behind a large figure and
     * not fine on a 13px label.
     *
     * Mixed toward the theme's own ink rather than fixed, because the operator
     * can put this skin on a dark palette: a single deepened gold that reads
     * 5.4:1 on white is invisible on 자정's `#241a26`. Half and half lands
     * around 5:1 on the light themes and 10:1 on the dark one.
     */
    --gold-text: color-mix(in srgb, var(--apollo-gold) 50%, var(--color-ink));

    /* Surface — the theme's, not this sheet's. */
    --pad-card: 22px;
    --radius-card: 12px;
    --paper: var(--color-panel);
    --wash: color-mix(in srgb, var(--color-panel) 94%, var(--color-ink));
    --wash-2: color-mix(in srgb, var(--color-panel) 97%, var(--color-ink));
    --line: var(--color-line);
    --line-soft: var(--color-line-soft);
    --ink: var(--color-ink);
    --muted: var(--color-ink-muted);

    /*
     * A reading column. 1080px keeps a Korean sentence near the 45–75
     * character band at 14px; the full shell put long notices on one
     * uninterrupted line and made them tiring to scan.
     */
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 0 56px;
    color: var(--ink);
    font-size: var(--fs-body);
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* ── Page header ───────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-account__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 22px;
    padding: 4px 2px 18px;
    border-bottom: 1px solid var(--line);
}

/* An inline gold mark, not a 60px tile — the tile was the heaviest thing on
   the page and it carried no information. */
[data-skin="apollo"] .apollo-account__mark {
    flex: none;
    margin-top: 3px;
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .apollo-account__head > div {
    min-width: 0;
}

/*
 * The title block is the header's flexible column, and the whole of that is
 * `flex-basis: 0` rather than `auto`.
 *
 * This header wraps, and a flex line is broken against an item's **max-content
 * width, before anything is allowed to shrink**. At `auto` the block's
 * hypothetical size is its subtitle on one unbroken line — 고객센터's is 354.1px
 * — and 19px of mark plus the 9px gap does not fit beside that inside 362px, so
 * the whole block took a line of its own and **left the gold mark stranded on
 * the line above the heading** at 390px. Korean reached it on 고객센터; Thai
 * reaches it on 입금신청 too, which is this rule and not a second defect.
 *
 * At `0` the block always shares the first line with its mark and grows into
 * what is left, so the subtitle wraps inside the column instead of taking the
 * column with it. Nothing moves above 768px: the aside is already pushed to the
 * far edge by `margin-left: auto`, and this only spends the slack it was
 * leaving behind.
 */
[data-skin="apollo"] .apollo-account__title {
    flex: 1 1 0;
}

[data-skin="apollo"] .apollo-account__head h1 {
    margin: 0;
    color: var(--color-ink-strong);
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.3;
}

/*
 * `keep-all` is for Korean, and on its own it is also what stops Japanese.
 *
 * It forbids a break inside a 어절, which is what keeps 「고객센터 계좌문의」 from
 * splitting mid-word — and it forbids one between CJK characters too, which is
 * the only place a Japanese sentence has to break, because it has no spaces.
 * 입금신청's subtitle ran 36px past the screen at 390px on that alone, before
 * anything here changed. `anywhere` only applies when the line would otherwise
 * overflow, so Korean still breaks at its spaces and Japanese now breaks at
 * all. Athena pairs the two for the same reason (`athena/screens.css:1286`).
 */
[data-skin="apollo"] .apollo-account__head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--fs-label);
    overflow-wrap: anywhere;
    word-break: keep-all;
}

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

/* The tabs, on the title line rather than in a band of their own. */
[data-skin="apollo"] .apollo-account__aside {
    margin-left: auto;
    padding-left: 20px;
}

/* ── 전표 ──────────────────────────────────────────────────────────────── */

/*
 * A statement: one sheet, and every line is a label on the left with its
 * content on the right, divided by hairlines.
 *
 * Cards were tried twice and rejected twice — each one carried a header, a
 * border and its own padding, so 보유머니 · 계좌 · 보너스 · 금액 cost four boxes
 * to say four things, and the page still did not read at a glance. Here they
 * cost four lines.
 */
[data-skin="apollo"] .apollo-sheet {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--paper);
}

[data-skin="apollo"] .apollo-sheet__row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 24px;
    padding: 17px 24px;
    border-bottom: 1px solid var(--line-soft);
}

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

/* The opening line carries the balance, so it gets the tint and the weight.
   Marked, not `:first-child` — on 룰렛 the first row is the wheel. */
[data-skin="apollo"] .apollo-sheet__row[data-lead="yes"] {
    align-items: center;
    padding: 18px 24px;
    background: var(--wash);
}

/*
 * A title, for the second and third sheet on a page. The first usually needs
 * none — the page heading above it already said what it is.
 */
[data-skin="apollo"] .apollo-sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-height: 48px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--wash-2);
}

[data-skin="apollo"] .apollo-sheet__head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--color-ink-strong);
    font-size: var(--fs-section);
    font-weight: 600;
    letter-spacing: -0.02em;
}

[data-skin="apollo"] .apollo-sheet__head h2 .apollo-icon {
    color: var(--apollo-gold-deep);
    opacity: 0.9;
}

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

/* A line with no label — a calendar, a wheel, a thread. */
[data-skin="apollo"] .apollo-sheet__wide {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-soft);
}

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

[data-skin="apollo"] .apollo-sheet__value {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
    overflow-wrap: anywhere;
}

[data-skin="apollo"] .apollo-sheet__value[data-numeric="yes"] {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-sheet__label {
    color: var(--muted);
    font-size: var(--fs-label);
}

[data-skin="apollo"] .apollo-sheet__body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

/* A statement reads down its right edge, so figures line up there. */
[data-skin="apollo"] .apollo-sheet__row[data-align="figure"] .apollo-sheet__body {
    align-items: flex-end;
    text-align: right;
}

[data-skin="apollo"] .apollo-sheet__figure {
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

[data-skin="apollo"] .apollo-sheet__figure small {
    margin-left: 4px;
    color: var(--gold-text);
    font-size: var(--fs-label);
    font-weight: 600;
}

/* The second figure on a sheet is a fact, not the headline. */
[data-skin="apollo"] .apollo-sheet__figure--small {
    font-size: var(--fs-value);
    letter-spacing: -0.02em;
}

[data-skin="apollo"] .apollo-sheet__figure--gold {
    color: var(--gold-text);
}

/* A rate the server would not trade on: readable, plainly not a quote. */
[data-skin="apollo"] .apollo-sheet__figure[data-dim="yes"] {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-value);
    font-weight: 500;
    letter-spacing: 0;
}

[data-skin="apollo"] .apollo-sheet__account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    width: 100%;
}

[data-skin="apollo"] .apollo-sheet__account strong {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-sheet__account span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-family: var(--font-numeric);
    font-size: var(--fs-label);
    overflow-wrap: anywhere;
}

/* The amount is typed on the sheet's own right edge, under the balance. */
[data-skin="apollo"] .apollo-sheet__amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    max-width: 300px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--apollo-gold);
}

[data-skin="apollo"] .apollo-sheet__amount input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.04em;
    text-align: right;
}

[data-skin="apollo"] .apollo-sheet__amount input::placeholder {
    color: color-mix(in srgb, var(--muted) 62%, var(--paper));
}

[data-skin="apollo"] .apollo-sheet__amount b {
    color: var(--gold-text);
    font-size: var(--fs-label);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

[data-skin="apollo"] .apollo-sheet__chips button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    color: var(--muted);
    font-family: inherit;
    font-size: var(--fs-label);
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color 140ms ease,
        color 140ms ease,
        background 140ms ease;
}

[data-skin="apollo"] .apollo-sheet__chips button:hover,
[data-skin="apollo"] .apollo-sheet__chips button.is-accent {
    border-color: var(--apollo-gold);
    background: rgb(var(--apollo-gold-rgb) / 0.07);
    color: var(--gold-text);
}

[data-skin="apollo"] .apollo-sheet__row[data-align="figure"] .apollo-hint {
    text-align: right;
}

/* The last line of the sheet, so the action sits on the same axis as the
   figures above it rather than floating below the paper. */
[data-skin="apollo"] .apollo-sheet__act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--line-soft);
    background: var(--wash-2);
}

/* A foot holding only a pager is empty on a single page — `ApolloPager`
   returning null still leaves the element, and it drew a blank tinted band
   under the empty state on 고객센터. */
[data-skin="apollo"] .apollo-sheet__act:empty {
    display: none;
}

/*
 * One treatment per kind of field. Left at full width the password boxes ran
 * 840px edge to edge while the coupon code sat at 340px and the amounts were
 * right-aligned underlines — three answers to the same question on one skin.
 */
[data-skin="apollo"] .apollo-sheet__row .apollo-input,
[data-skin="apollo"] .apollo-sheet__row .apollo-textarea {
    max-width: 340px;
}

[data-skin="apollo"] .apollo-sheet__row .apollo-textarea {
    max-width: none;
}

[data-skin="apollo"] .apollo-sheet__act .apollo-callout {
    flex: 1;
    min-width: 220px;
}

[data-skin="apollo"] .apollo-sheet__act .apollo-submit {
    width: auto;
    min-width: 240px;
}

/*
 * 충전보너스 was the one place the card aesthetic survived inside a sheet whose
 * whole premise is that there are no cards — four bordered boxes in a row of
 * hairlines. They keep their shape and lose their edge.
 */
[data-skin="apollo"] .apollo-sheet .apollo-bonus__options > button {
    min-height: 0;
    padding: 12px 32px 12px 13px;
    border-color: transparent;
    background: var(--wash-2);
}

[data-skin="apollo"] .apollo-sheet .apollo-bonus__options > button:hover,
[data-skin="apollo"] .apollo-sheet .apollo-bonus__options > button.is-active {
    border-color: var(--apollo-gold);
    background: rgb(var(--apollo-gold-rgb) / 0.08);
}

[data-skin="apollo"] .apollo-sheet .apollo-bonus__check {
    top: 13px;
    right: 12px;
}

@media (max-width: 768px) {
    [data-skin="apollo"] .apollo-account__aside {
        width: 100%;
        margin: 12px 0 0;
        padding-left: 0;
    }

    /*
     * Except when the slot holds one badge.
     *
     * The full width above is for what usually stands here — the 원화 · 테더
     * strip, 국내형 · 해외형 · 라이브, the four controls on 고객센터 — all of which
     * are targets and want the whole line on a phone. 복권's 보유 복권 8장 is
     * 85.9px of text nobody taps, and taking a row for it put an empty band
     * between the subtitle and the sheet. It stays on the heading's line and
     * keeps the right edge it has above 768px.
     */
    [data-skin="apollo"] .apollo-account__aside--badge {
        width: auto;
        margin: 0 0 0 auto;
        padding-left: 12px;
    }

    [data-skin="apollo"] .apollo-sheet__row,
    [data-skin="apollo"] .apollo-sheet__row:first-child {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 15px var(--pad-card);
    }

    [data-skin="apollo"] .apollo-sheet__row[data-align="figure"]
        .apollo-sheet__body {
        align-items: stretch;
        text-align: left;
    }

    [data-skin="apollo"] .apollo-sheet__amount {
        max-width: none;
    }

    [data-skin="apollo"] .apollo-sheet__chips {
        justify-content: flex-start;
    }

    [data-skin="apollo"] .apollo-sheet__row[data-align="figure"] .apollo-hint {
        text-align: left;
    }

    [data-skin="apollo"] .apollo-sheet__act {
        padding: 14px var(--pad-card);
    }

    [data-skin="apollo"] .apollo-sheet__act .apollo-submit {
        width: 100%;
        min-width: 0;
    }
}

[data-skin="apollo"] .apollo-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

[data-skin="apollo"] .apollo-field__label {
    color: var(--ink);
    font-size: var(--fs-label);
    font-weight: 600;
}

/* Sentences, so `--fs-body`. `--fs-label` is for the word beside a value; a
   two-line notice set at label size is the reason 14px appeared nowhere on the
   first pass of this scale. */
[data-skin="apollo"] .apollo-field__hint,
[data-skin="apollo"] .apollo-hint {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.6;
    word-break: keep-all;
}

[data-skin="apollo"] .apollo-hint a,
[data-skin="apollo"] .apollo-callout a {
    color: var(--gold-text);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-count {
    align-self: flex-end;
    color: var(--muted);
    font-family: var(--font-numeric);
    font-size: var(--fs-caption);
    font-variant-numeric: tabular-nums;
}

/* White with a visible edge. The filled grey slab had no affordance. */
[data-skin="apollo"] .apollo-input,
[data-skin="apollo"] .apollo-textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--fs-body);
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease;
}

[data-skin="apollo"] .apollo-input {
    height: 46px;
    padding: 0 14px;
}

[data-skin="apollo"] .apollo-textarea {
    min-height: 160px;
    padding: 13px 14px;
    line-height: 1.7;
    resize: vertical;
}

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

[data-skin="apollo"] :is(.apollo-input, .apollo-textarea)::placeholder {
    color: color-mix(in srgb, var(--muted) 62%, var(--paper));
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--fs-label);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

[data-skin="apollo"] .apollo-action--primary {
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
}

[data-skin="apollo"] .apollo-action--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--apollo-gold) 88%, var(--ink));
}

[data-skin="apollo"] .apollo-action--quiet {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink);
}

[data-skin="apollo"] .apollo-action--quiet:hover:not(:disabled) {
    border-color: var(--apollo-gold);
    color: var(--gold-text);
}

/*
 * ── 계좌문의 (2026-09-07) ───────────────────────────────────
 *
 *     「입금이나 고객센터 메뉴에 계좌문의 이 버튼은 중요버튼이라
 *      잘보이게 해줘야해」
 *
 * 맞는 말입니다. 입금 화면에서 이 단추를 안 누르면 **넣을 계좌를 못 받아**
 * 입금 자체를 못 합니다. 그런데 지금까지 `--quiet` 였습니다 — 「모두 읽음」
 * 「전체 삭제」와 같은 세기입니다.
 *
 * 그렇다고 `--primary` 로 올리면 안 됩니다. 이 단추는 늘 「입금 신청」이나
 * 「문의 작성」 옆에 서는데, 금색 채우기가 둘이 되면 어느 쪽이 마무리
 * 단추인지 흐려집니다 (`123` 줄 — 금색 채우기는 으뜸 하나만).
 *
 * 그래서 가운데 자리를 만듭니다: 금색 **테두리와 글씨에 옅은 금색 바탕**.
 * 조용한 단추들 사이에서 혼자 색을 띠므로 눈이 먼저 갑니다.
 */
/*
 * ── 두 번째 요청 (2026-09-07) ───────────────────────────────
 *
 *     「계좌문의 더 잘보이게 강조해줘 더 잘보여야해 눈에 들어오게」
 *
 * 앞서 테두리와 옅은 바탕으로 올렸는데 부족했습니다. 채웁니다.
 *
 * 그리고 **바깥에 고리**를 두릅니다. 이 화면에서 고리를 두른 것은 이것
 * 하나뿐이라, 색이 옆 단추와 같아도 눈이 여기부터 옵니다. 자리를 안
 * 차지하는 그림자라 줄이 밀리지도 않습니다.
 *
 * 글자색은 `--apollo-gold-ink` 입니다 — 금색 위에서 8.9:1 이고, 흰색은
 * 2.1:1 이라 못 씁니다 (`palette.css` 의 그 머리말).
 */
[data-skin="apollo"] .apollo-action--accent {
    border-color: var(--apollo-gold-deep);
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-weight: 700;
    box-shadow: 0 0 0 3px rgb(var(--apollo-gold-rgb) / 0.28);
}

/*
 * 오버에서 **밝히고** 어둡히지 않습니다.
 *
 * `--apollo-gold-deep` 로 채우면 그 위의 글자를 흰색으로 바꿔야 하는데, 이
 * 시트는 색을 직접 적으면 안 됩니다 — 어두운 조합이 못 닿습니다
 * (`apollo-account-pages.spec.ts` 가 그것을 붙들고 있습니다). 밝히면
 * `--apollo-gold-ink` 가 그대로 읽히므로 글자를 안 건드려도 됩니다.
 */
[data-skin="apollo"] .apollo-action--accent:hover:not(:disabled) {
    background: var(--apollo-gold-pale);
    box-shadow: 0 0 0 4px rgb(var(--apollo-gold-rgb) / 0.36);
}

[data-skin="apollo"] .apollo-action:disabled,
[data-skin="apollo"] .apollo-icon-button:disabled {
    opacity: 0.42;
    cursor: default;
}

[data-skin="apollo"] .apollo-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-family: inherit;
    font-size: var(--fs-value);
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background 140ms ease;
}

[data-skin="apollo"] .apollo-submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--apollo-gold) 88%, var(--ink));
}

/*
 * A grey control, not a faded gold one. `opacity` on the gold left a pale tan
 * bar the width of the card that read as an unloaded banner rather than a
 * button waiting on a figure.
 */
[data-skin="apollo"] .apollo-submit:disabled,
[data-skin="apollo"] .apollo-action--primary:disabled {
    border: 1px solid var(--line);
    background: var(--wash);
    color: color-mix(in srgb, var(--muted) 62%, var(--paper));
    opacity: 1;
    cursor: default;
}

[data-skin="apollo"] .apollo-icon-button {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: color-mix(in srgb, var(--muted) 62%, var(--paper));
    cursor: pointer;
    transition:
        border-color 140ms ease,
        color 140ms ease;
}

[data-skin="apollo"] .apollo-icon-button:hover:not(:disabled) {
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

/*
 * The refusal used to be printed under each control, which put the same
 * sentence on 고객센터 five times — one pending inquiry greys 문의 작성 and
 * 계좌문의 and the delete on every row it owns. The page says it once now, so a
 * button here is just a button.
 */
[data-skin="apollo"] .apollo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* A shared component placed whole — bonus field, vendor recall. */
[data-skin="apollo"] .apollo-embed {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--wash-2);
}

/*
 * 카지노 보유머니 회수 — 출금·테더출금·스포츠 장바구니가 함께 쓰는 컨트롤이고,
 * 어두운 테마 색을 인라인 스타일로 들고 다닙니다. 그대로 두면 아폴로에서는
 * 11px·12px 글자가 크림색 위에 #a9b6c8 로 1.9:1 로 찍힙니다.
 *
 * 뷰는 건드리지 않고 여기서 모양만 답합니다. 인라인 스타일을 상대하므로
 * `!important` 가 필요합니다.
 */
[data-skin="apollo"] [data-vendor-recall-control] {
    gap: 9px !important;
}

[data-skin="apollo"] [data-vendor-recall-control] > div {
    color: var(--muted) !important;
    font-size: var(--fs-label) !important;
}

[data-skin="apollo"] [data-vendor-recall-control] > div strong {
    color: var(--color-ink-strong) !important;
    font-size: var(--fs-value) !important;
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] [data-vendor-recall-control] button {
    min-height: 42px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-size: var(--fs-label) !important;
}

[data-skin="apollo"] [data-vendor-recall-control] button:disabled {
    border-color: var(--line) !important;
    background: var(--wash) !important;
    color: var(--muted) !important;
}

/* The four tones, restated for a light background. */
[data-skin="apollo"] [data-vendor-recall-control] p {
    color: var(--muted) !important;
    font-size: var(--fs-label) !important;
}

[data-skin="apollo"] [data-vendor-recall-control] p[data-tone="ok"] {
    color: var(--ui-alert-ok-ink) !important;
}

[data-skin="apollo"] [data-vendor-recall-control] p[data-tone="bad"] {
    color: var(--ui-alert-bad-ink) !important;
}

[data-skin="apollo"] [data-vendor-recall-control] p[data-tone="warning"] {
    color: var(--ui-alert-warn-ink) !important;
}

/* ── Callout ───────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--ui-alert-info-bg);
    color: var(--ui-alert-info-ink);
    font-size: var(--fs-body);
    line-height: 1.6;
    word-break: keep-all;
}

[data-skin="apollo"] .apollo-callout > .apollo-icon {
    flex: none;
    opacity: 0.85;
}

[data-skin="apollo"] .apollo-callout > span {
    flex: 1;
    min-width: 180px;
}

[data-skin="apollo"] .apollo-callout__action {
    margin-left: auto;
}

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

[data-skin="apollo"] .apollo-callout--error {
    background: var(--ui-alert-bad-bg);
    color: var(--ui-alert-bad-ink);
}

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

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

[data-skin="apollo"] .apollo-notice-list li {
    position: relative;
    padding-left: 14px;
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.7;
    white-space: pre-line;
    word-break: keep-all;
}

[data-skin="apollo"] .apollo-notice-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--apollo-gold);
}

/* ── Badges ────────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-pill,
[data-skin="apollo"] .apollo-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--wash);
    color: var(--muted);
    font-size: var(--fs-caption);
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-pill[data-kind="inquiry"] {
    background: rgb(var(--apollo-gold-rgb) / 0.16);
    color: var(--gold-text);
}

[data-skin="apollo"] .apollo-pill[data-kind="note"] {
    background: var(--ui-alert-info-bg);
    color: var(--ui-alert-info-ink);
}

[data-skin="apollo"] .apollo-status[data-status="open"],
[data-skin="apollo"] .apollo-status[data-status="wait"] {
    background: var(--ui-alert-warn-bg);
    color: var(--ui-alert-warn-ink);
}

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

[data-skin="apollo"] .apollo-status[data-status="closed"],
[data-skin="apollo"] .apollo-status[data-status="no"] {
    background: var(--wash);
    color: var(--muted);
}

[data-skin="apollo"] .apollo-unread {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-size: var(--fs-caption);
    font-style: normal;
    font-weight: 700;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--wash-2);
}

/*
 * `a` and `button` both. 원화·테더 tabs are links because they are routes;
 * 국내형·해외형·라이브 on 배팅내역 change a mode in place and are buttons. Styling
 * only the anchor left that strip completely bare — three words in a row with
 * the selected one indistinguishable from the other two.
 */
[data-skin="apollo"] .apollo-tabs a,
[data-skin="apollo"] .apollo-tabs button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--fs-label);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 140ms ease,
        color 140ms ease;
}

[data-skin="apollo"] .apollo-tabs a:hover,
[data-skin="apollo"] .apollo-tabs button:hover {
    color: var(--ink);
}

[data-skin="apollo"] .apollo-tabs a.is-active,
[data-skin="apollo"] .apollo-tabs button.is-active {
    background: var(--paper);
    box-shadow: 0 1px 2px rgb(46 42 37 / 0.06);
    color: var(--color-ink-strong);
}

[data-skin="apollo"] .apollo-tabs a.is-active .apollo-icon {
    color: var(--apollo-gold-deep);
}

/* ── Address ───────────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--wash-2);
}

[data-skin="apollo"] .apollo-address code {
    flex: 1;
    min-width: 220px;
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: var(--fs-value);
    line-height: 1.55;
    overflow-wrap: anywhere;
    user-select: all;
}

[data-skin="apollo"] .apollo-address[data-ready="no"] code {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-label);
}

[data-skin="apollo"] .apollo-address[data-tone="bad"] {
    border-color: var(--ui-alert-bad-line);
    background: var(--ui-alert-bad-bg);
}

[data-skin="apollo"] .apollo-address[data-tone="notice"] {
    border-color: var(--ui-alert-warn-line);
    background: var(--ui-alert-warn-bg);
}

/* The ledger fills its sheet edge to edge — it is a table, not a row. */
[data-skin="apollo"] .apollo-ledger .apollo-empty {
    padding: 20px;
}

[data-skin="apollo"] .apollo-ledger__head,
[data-skin="apollo"] .apollo-ledger__rows > li {
    display: flex;
    align-items: center;
}

[data-skin="apollo"] .apollo-ledger__head {
    min-height: 40px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--wash-2);
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.01em;
}

[data-skin="apollo"] .apollo-ledger__head span,
[data-skin="apollo"] .apollo-ledger__rows > li > span {
    flex: none;
    min-width: 0;
    padding: 0 14px;
}

[data-skin="apollo"] .apollo-ledger__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .apollo-ledger__rows > li {
    min-height: 52px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: var(--fs-label);
    font-variant-numeric: tabular-nums;
}

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

[data-skin="apollo"] .apollo-ledger__rows span[data-tone="up"] {
    color: var(--color-up-text);
    font-family: var(--font-numeric);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-ledger__rows span[data-tone="down"] {
    color: var(--color-danger-text);
    font-family: var(--font-numeric);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-ledger__rows span[data-column="amount"] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-numeric);
}

[data-skin="apollo"] .apollo-ledger__rows span[data-column="amount"] em {
    color: var(--gold-text);
    font-size: var(--fs-caption);
    font-style: normal;
}

[data-skin="apollo"] .apollo-ledger__rows span[data-column="amount"] strong {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-ledger__rows span[data-column="amount"] small {
    color: var(--muted);
    font-size: var(--fs-caption);
}

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

[data-skin="apollo"] .apollo-inbox__rows > li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 16px 4px var(--pad-card);
    border-bottom: 1px solid var(--line-soft);
    transition: background 140ms ease;
}

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

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

[data-skin="apollo"] .apollo-inbox__open {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-inbox__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

[data-skin="apollo"] .apollo-inbox__top strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-inbox__preview {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-label);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

[data-skin="apollo"] .apollo-inbox__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: var(--fs-caption);
}

[data-skin="apollo"] .apollo-inbox__end {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    max-width: 170px;
}

[data-skin="apollo"] .apollo-inbox__end small {
    color: var(--ui-alert-warn-ink);
    font-size: var(--fs-caption);
    line-height: 1.4;
    text-align: right;
    word-break: keep-all;
}

/* ── Thread ────────────────────────────────────────────────────────────── */

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

[data-skin="apollo"] .apollo-thread > li {
    align-self: flex-start;
    max-width: min(78%, 660px);
}

[data-skin="apollo"] .apollo-thread > li[data-mine="yes"] {
    align-self: flex-end;
}

[data-skin="apollo"] .apollo-thread__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: var(--fs-caption);
}

[data-skin="apollo"] .apollo-thread > li[data-mine="yes"] .apollo-thread__meta {
    justify-content: flex-end;
}

[data-skin="apollo"] .apollo-thread__meta strong {
    color: var(--ink);
    font-size: var(--fs-caption);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-thread__bubble {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 4px 10px 10px;
    background: var(--wash-2);
    color: var(--ink);
    font-size: var(--fs-label);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

[data-skin="apollo"]
    .apollo-thread
    > li[data-mine="yes"]
    .apollo-thread__bubble {
    border-color: rgb(var(--apollo-gold-rgb) / 0.28);
    border-radius: 10px 4px 10px 10px;
    background: rgb(var(--apollo-gold-rgb) / 0.1);
}

/*
 * Operator HTML, drawn as it was written. No truncating and no re-parsing —
 * whatever the operator's editor produced is what the member reads, and the
 * layout is what has to cope: a wide table, a large image and an unbroken
 * 500-character run all have to survive 390px.
 */
[data-skin="apollo"] .apollo-prose {
    max-width: 100%;
    color: var(--ink);
    font-size: var(--fs-body);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

[data-skin="apollo"] .apollo-prose :is(img, table, video) {
    max-width: 100%;
}

[data-skin="apollo"] .apollo-prose table {
    display: block;
    overflow-x: auto;
}

/* ── Bonus selector ────────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-bonus {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/*
 * `align-items: start`, because 보너스 미신청 carries four lines of terms and
 * the other three carry one. Stretching them to the tallest gave three cards
 * 60px of blank white each, which looked like content that had not loaded.
 */
/*
 * 160px, not 190px. Four options in a 736px column wrapped 3 + 1, which both
 * read as ragged and added a whole row to the height of the deposit screen.
 */
[data-skin="apollo"] .apollo-bonus__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: start;
    gap: 8px;
}

[data-skin="apollo"] .apollo-bonus__options > button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 74px;
    padding: 14px 36px 14px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 140ms ease,
        background 140ms ease;
}

[data-skin="apollo"] .apollo-bonus__options > button:hover,
[data-skin="apollo"] .apollo-bonus__options > button.is-active {
    border-color: var(--apollo-gold);
    background: rgb(var(--apollo-gold-rgb) / 0.07);
}

[data-skin="apollo"] .apollo-bonus__check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
}

[data-skin="apollo"] button.is-active .apollo-bonus__check {
    border: 5px solid var(--apollo-gold);
}

[data-skin="apollo"] .apollo-bonus__options strong {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-bonus__options small,
[data-skin="apollo"]
    .apollo-bonus__options
    > button
    > span:not(.apollo-bonus__check) {
    display: block;
    color: var(--muted);
    font-size: var(--fs-label);
    font-style: normal;
    line-height: 1.5;
    word-break: keep-all;
}

[data-skin="apollo"] .apollo-bonus__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

[data-skin="apollo"] .apollo-bonus__none {
    color: var(--color-danger-text) !important;
    font-weight: 600;
}

[data-skin="apollo"] .apollo-bonus__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 0;
}

[data-skin="apollo"] .apollo-bonus__summary > div {
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--wash);
}

[data-skin="apollo"] .apollo-bonus__summary dt {
    color: var(--muted);
    font-size: var(--fs-caption);
}

[data-skin="apollo"] .apollo-bonus__summary dd {
    margin: 5px 0 0;
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: var(--fs-value);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-bonus__summary dd small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 400;
}

[data-skin="apollo"] .apollo-bonus__summary > div.is-total {
    background: rgb(var(--apollo-gold-rgb) / 0.14);
}

[data-skin="apollo"] .apollo-bonus__summary > div.is-total dd {
    color: var(--gold-text);
}

/* ── 이벤트 목록 ───────────────────────────────────────────────────────── */

/*
 * Tiles, not rows. 이벤트 is a launcher — there is nothing to read down a
 * right-hand edge, only places to go — so it is the one screen in this set that
 * is not a statement.
 */
[data-skin="apollo"] .apollo-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 20px 24px;
    list-style: none;
}

[data-skin="apollo"] .apollo-doors a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    padding: 18px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 140ms ease,
        background 140ms ease;
}

[data-skin="apollo"] .apollo-doors a:hover {
    border-color: var(--apollo-gold);
    background: rgb(var(--apollo-gold-rgb) / 0.07);
}

[data-skin="apollo"] .apollo-doors a > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 5px;
    border-radius: 12px;
    background: var(--wash);
    color: var(--gold-text);
}

[data-skin="apollo"] .apollo-doors a:hover > span {
    background: rgb(var(--apollo-gold-rgb) / 0.16);
}

[data-skin="apollo"] .apollo-doors strong {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
}

/* What the event *is*. Never what it pays. */
[data-skin="apollo"] .apollo-doors small {
    color: var(--muted);
    font-size: var(--fs-label);
    line-height: 1.5;
    word-break: keep-all;
}

/* Capped, because the squares are `aspect-ratio: 1` — across a full row a cell
   is 100px and the month stands 600px tall. 출석 보상 takes the width that
   frees, which is what stops the row ending in dead space. */
[data-skin="apollo"] .apollo-cal-row {
    display: grid;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    align-items: start;
    gap: 14px 28px;
    width: 100%;
}

[data-skin="apollo"] .apollo-cal-row__side h4 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: var(--fs-label);
    font-weight: 700;
}

@media (max-width: 768px) {
    [data-skin="apollo"] .apollo-cal-row {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-skin="apollo"] .apollo-doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px var(--pad-card);
    }
}

[data-skin="apollo"] .apollo-cal {
    max-width: 430px;
}

[data-skin="apollo"] .apollo-cal__month {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 11px;
}

[data-skin="apollo"] .apollo-cal__month strong {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-cal__month span {
    color: var(--muted);
    font-size: var(--fs-label);
}

[data-skin="apollo"] .apollo-cal__week,
[data-skin="apollo"] .apollo-cal__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .apollo-cal__week {
    margin-bottom: 7px;
}

[data-skin="apollo"] .apollo-cal__week span {
    color: var(--muted);
    font-size: var(--fs-caption);
    text-align: center;
}

[data-skin="apollo"] .apollo-cal__days > li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--wash-2);
    color: var(--muted);
    font-family: var(--font-numeric);
    font-size: var(--fs-label);
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-cal__days > li[aria-hidden] {
    border: 0;
    background: transparent;
}

[data-skin="apollo"] .apollo-cal__days > li[data-state="stamped"] {
    border-color: rgb(var(--apollo-gold-rgb) / 0.4);
    background: rgb(var(--apollo-gold-rgb) / 0.12);
    color: var(--gold-text);
    font-weight: 700;
}

/* The stamp mark sits over the date rather than beside it — a square is 40px
   and two glyphs side by side wrap inside it. */
[data-skin="apollo"] .apollo-cal__days b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0.32;
    font-size: 20px;
}

/* The reward marker, at the floor like everything else. It was 10px on the
   first pass — a square is small, but "the square is small" is exactly the
   argument that produced the unreadable version of these pages. */
[data-skin="apollo"] .apollo-cal__days em {
    position: absolute;
    right: 3px;
    bottom: 1px;
    color: var(--gold-text);
    font-size: var(--fs-caption);
    font-style: normal;
    line-height: 1;
}

/* Today is the only control on the screen, so it fills its square. */
[data-skin="apollo"] .apollo-cal__days > li[data-state="today"] {
    padding: 0;
    border: 0;
    background: transparent;
}

[data-skin="apollo"] .apollo-cal__days button {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--apollo-gold);
    border-radius: 8px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-family: var(--font-numeric);
    font-size: var(--fs-value);
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease;
}

[data-skin="apollo"] .apollo-cal__days button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--apollo-gold) 88%, var(--ink));
}

[data-skin="apollo"] .apollo-cal__days button:disabled {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink);
    cursor: default;
}

/* 오늘의 참여조건. */
[data-skin="apollo"] .apollo-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .apollo-bars > li > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: var(--fs-label);
}

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

[data-skin="apollo"] .apollo-bars progress {
    display: block;
    width: 100%;
    height: 6px;
    margin: 7px 0 5px;
    border: 0;
    border-radius: 99px;
    appearance: none;
    background: var(--wash);
}

[data-skin="apollo"] .apollo-bars progress::-webkit-progress-bar {
    border-radius: 99px;
    background: var(--wash);
}

[data-skin="apollo"] .apollo-bars progress::-webkit-progress-value {
    border-radius: 99px;
    background: var(--apollo-gold);
}

[data-skin="apollo"] .apollo-bars progress::-moz-progress-bar {
    border-radius: 99px;
    background: var(--apollo-gold);
}

[data-skin="apollo"] .apollo-bars > li[data-met="yes"] progress::-webkit-progress-value {
    background: var(--color-up-text);
}

[data-skin="apollo"] .apollo-bars > li[data-met="yes"] progress::-moz-progress-bar {
    background: var(--color-up-text);
}

/* 「9,000원 더 배팅하시면」 — the line a member acts on. */
[data-skin="apollo"] .apollo-bars small {
    color: var(--gold-text);
    font-size: var(--fs-caption);
}

[data-skin="apollo"] .apollo-bars > li[data-met="yes"] small {
    color: var(--color-up-text);
}

[data-skin="apollo"] .apollo-next {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}

[data-skin="apollo"] .apollo-next strong {
    color: var(--color-ink-strong);
    font-size: var(--fs-value);
    font-weight: 600;
}

[data-skin="apollo"] .apollo-next span {
    color: var(--muted);
    font-size: var(--fs-label);
}

[data-skin="apollo"] .apollo-next em,
[data-skin="apollo"] .apollo-steps em,
[data-skin="apollo"] .apollo-receipt em {
    color: var(--gold-text);
    font-size: var(--fs-label);
    font-style: normal;
    font-weight: 600;
}

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

[data-skin="apollo"] .apollo-steps > li,
[data-skin="apollo"] .apollo-receipt > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--fs-label);
}

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

[data-skin="apollo"] .apollo-steps > li:first-child,
[data-skin="apollo"] .apollo-receipt > li:first-child {
    padding-top: 0;
}

[data-skin="apollo"] .apollo-steps > li > span {
    flex: 1;
    min-width: 0;
    color: var(--ink);
}

[data-skin="apollo"] .apollo-steps > li[data-done="yes"] > span::before {
    content: "✓ ";
    color: var(--color-up-text);
    font-weight: 700;
}

[data-skin="apollo"] .apollo-steps > li[data-done="no"] {
    opacity: 0.62;
}

[data-skin="apollo"] .apollo-receipt time {
    flex: none;
    color: var(--muted);
    font-family: var(--font-numeric);
    font-size: var(--fs-caption);
}

[data-skin="apollo"] .apollo-receipt > li > span {
    flex: 1;
    min-width: 0;
    color: var(--ink);
}

/* 꽝 is a word, not a colour — but the colour may follow the word. */
[data-skin="apollo"] .apollo-receipt > li[data-blank="yes"] em,
[data-skin="apollo"] .apollo-receipt > li[data-blank="yes"] > span {
    color: var(--muted);
    font-weight: 400;
}

/* The wheel and the scratch card bring their own size; this only centres it. */
[data-skin="apollo"] .apollo-board {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 8px 0;
}

[data-skin="apollo"] input.apollo-code {
    width: 100%;
    max-width: 340px;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    background: var(--paper);
    color: var(--color-ink-strong);
    font-family: var(--font-numeric);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* Looks upper-case; the value posted is exactly what was typed. */
    text-transform: uppercase;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease;
}

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

[data-skin="apollo"] input.apollo-code::placeholder {
    color: color-mix(in srgb, var(--muted) 62%, var(--paper));
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Empty and pager ───────────────────────────────────────────────────── */

[data-skin="apollo"] .apollo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 150px;
    color: var(--muted);
    font-size: var(--fs-label);
    text-align: center;
}

[data-skin="apollo"] .apollo-empty .apollo-icon {
    opacity: 0.4;
}

[data-skin="apollo"] .apollo-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

[data-skin="apollo"] .apollo-pager button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-size: var(--fs-body);
    cursor: pointer;
    transition: border-color 140ms ease;
}

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

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

[data-skin="apollo"] .apollo-pager span {
    color: var(--muted);
    font-family: var(--font-numeric);
    font-size: var(--fs-label);
}

[data-skin="apollo"] .apollo-pager em {
    margin: 0 3px;
    opacity: 0.45;
    font-style: normal;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    [data-skin="apollo"] .apollo-account {
        --pad-card: 16px;
        --radius-card: 10px;
        padding: 4px 0 36px;
    }

    [data-skin="apollo"] .apollo-account__head {
        gap: 9px;
        margin-bottom: 16px;
        padding-bottom: 14px;
    }

    [data-skin="apollo"] .apollo-account__head h1 {
        font-size: 21px;
    }

    [data-skin="apollo"] .apollo-actions {
        width: 100%;
    }

    [data-skin="apollo"] .apollo-actions .apollo-action {
        width: 100%;
    }

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

    [data-skin="apollo"] .apollo-callout__action .apollo-action {
        width: 100%;
    }

    /*
     * The ledger keeps its own columns and becomes labelled rows rather than a
     * second, hand-written mobile table. One reading of the data, two shapes.
     */
    [data-skin="apollo"] .apollo-ledger__head {
        display: none;
    }

    [data-skin="apollo"] .apollo-ledger__rows {
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 13px;
        background: var(--wash-2);
    }

    [data-skin="apollo"] .apollo-ledger__rows > li,
    [data-skin="apollo"] .apollo-ledger__rows > li:last-child {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px 14px;
        min-height: 0;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--paper);
    }

    [data-skin="apollo"] .apollo-ledger__rows > li > span {
        display: flex;
        flex-direction: column;
        width: auto !important;
        padding: 0;
        overflow-wrap: anywhere;
    }

    [data-skin="apollo"] .apollo-ledger__rows > li > span::before {
        content: attr(data-label);
        margin-bottom: 3px;
        color: var(--muted);
        font-size: var(--fs-caption);
    }

    /*
     * The row stays a row. Stacking was for the refusal paragraph that used to
     * sit beside the trash; with that gone the button dropped to its own line
     * under the timestamp and read as a stray mark rather than a row action.
     */
    [data-skin="apollo"] .apollo-inbox__rows > li {
        gap: 8px;
        padding: 0 var(--pad-card);
    }

    [data-skin="apollo"] .apollo-inbox__end {
        max-width: none;
    }

    /* 44px is the tap target this control never met at 40. */
    [data-skin="apollo"] .apollo-icon-button {
        width: 44px;
        height: 44px;
    }

    [data-skin="apollo"] .apollo-thread > li {
        max-width: 92%;
    }

    [data-skin="apollo"] .apollo-tabs a,
    [data-skin="apollo"] .apollo-tabs button {
        min-height: 38px;
        padding: 0 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   APOLLO STYLE LAB
   Same content and DOM, four unrelated visual systems.
   ══════════════════════════════════════════════════════════════════════════ */

[data-skin="apollo"] .apollo-style-lab {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 14px 0 64px;
}

[data-skin="apollo"] .apollo-style-lab__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding: 6px 2px 24px;
    border-bottom: 1px solid var(--color-line);
}

[data-skin="apollo"] .apollo-style-lab__head small {
    color: var(--apollo-gold-deep);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

[data-skin="apollo"] .apollo-style-lab__head h1 {
    margin: 7px 0 0;
    color: var(--color-ink-strong);
    font-size: 27px;
    letter-spacing: -0.035em;
}

[data-skin="apollo"] .apollo-style-lab__head p {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--color-ink-muted);
    font-size: 12px;
    line-height: 1.65;
}

[data-skin="apollo"] .apollo-style-lab__head > span {
    flex: none;
    padding: 8px 11px;
    border: 1px solid var(--color-line);
    border-radius: 99px;
    background: var(--color-panel);
    color: var(--color-ink-muted);
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-lab__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

[data-skin="apollo"] .apollo-style-lab__candidate {
    min-width: 0;
}

[data-skin="apollo"] .apollo-style-lab__candidate > header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
}

[data-skin="apollo"] .apollo-style-lab__candidate > header > b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-panel);
    color: var(--apollo-gold-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

[data-skin="apollo"] .apollo-style-lab__candidate > header h2 {
    margin: 0;
    color: var(--color-ink-strong);
    font-size: 14px;
}

[data-skin="apollo"] .apollo-style-lab__candidate > header p {
    margin: 3px 0 0;
    color: var(--color-ink-muted);
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-sample {
    position: relative;
    display: grid;
    grid-template-areas:
        "title balance"
        "account account"
        "bonus amount"
        "notice amount"
        "footer footer";
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    grid-template-rows: auto auto 1fr auto auto;
    min-height: 540px;
    overflow: hidden;
}

[data-skin="apollo"] .apollo-style-sample button,
[data-skin="apollo"] .apollo-style-sample input {
    font-family: inherit;
}

[data-skin="apollo"] .apollo-style-sample__title {
    grid-area: title;
}

[data-skin="apollo"] .apollo-style-sample__title > span {
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

[data-skin="apollo"] .apollo-style-sample__title h3 {
    margin: 7px 0 0;
    font-size: 22px;
}

[data-skin="apollo"] .apollo-style-sample__title p {
    margin: 5px 0 0;
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-sample__balance {
    grid-area: balance;
}

[data-skin="apollo"] .apollo-style-sample__balance > span,
[data-skin="apollo"] .apollo-style-sample__bonus > span,
[data-skin="apollo"] .apollo-style-sample__amount label > span {
    display: block;
    font-size: 9px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-style-sample__balance strong {
    display: block;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-style-sample__balance small {
    margin-left: 5px;
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-sample__account {
    grid-area: account;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

[data-skin="apollo"] .apollo-style-sample__account > div {
    min-width: 0;
}

[data-skin="apollo"] .apollo-style-sample__account dt {
    font-size: 9px;
}

[data-skin="apollo"] .apollo-style-sample__account dd {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-style-sample__bonus {
    grid-area: bonus;
}

[data-skin="apollo"] .apollo-style-sample__bonus > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 11px;
}

[data-skin="apollo"] .apollo-style-sample__bonus button,
[data-skin="apollo"] .apollo-style-sample__quick button {
    min-height: 34px;
    cursor: default;
}

[data-skin="apollo"] .apollo-style-sample__amount {
    grid-area: amount;
}

[data-skin="apollo"] .apollo-style-sample__amount label > div {
    display: flex;
    align-items: center;
    margin-top: 7px;
}

[data-skin="apollo"] .apollo-style-sample__amount input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

[data-skin="apollo"] .apollo-style-sample__amount label b {
    flex: none;
    font-size: 9px;
}

[data-skin="apollo"] .apollo-style-sample__quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

[data-skin="apollo"] .apollo-style-sample__notice {
    grid-area: notice;
    align-self: end;
    margin: 0;
    font-size: 9.5px;
}

[data-skin="apollo"] .apollo-style-sample > footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[data-skin="apollo"] .apollo-style-sample > footer > span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

[data-skin="apollo"] .apollo-style-sample > footer button {
    min-height: 42px;
    padding: 0 22px;
    cursor: default;
}

/* A — printed private-club editorial */

[data-skin="apollo"] .apollo-style-sample--editorial {
    border: 1px solid #d8cbb9;
    border-radius: 2px 30px 2px 2px;
    background:
        linear-gradient(rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.38)),
        repeating-linear-gradient(
            0deg,
            #eee5d8 0,
            #eee5d8 1px,
            transparent 1px,
            transparent 5px
        ),
        #f5efe5;
    color: #2f2922;
    box-shadow: 0 24px 46px -38px rgb(62 44 25 / 0.5);
}

[data-skin="apollo"] .apollo-style-sample--editorial::after {
    content: "A";
    position: absolute;
    right: 22px;
    top: 8px;
    color: rgb(124 84 43 / 0.08);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 150px;
    pointer-events: none;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__title {
    padding: 30px 26px;
    border-right: 1px solid #d8cbb9;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__title > span,
[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__balance > span,
[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__bonus > span,
[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__amount label > span {
    color: #986633;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__title h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 400;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__title p,
[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__notice,
[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__account dt {
    color: #766b5f;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__balance {
    z-index: 1;
    padding: 30px 26px;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__balance strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 400;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__account {
    border-top: 1px solid #d8cbb9;
    border-bottom: 1px solid #d8cbb9;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__account > div {
    padding: 16px 25px;
    border-right: 1px solid #d8cbb9;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__bonus,
[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__notice {
    padding: 24px 25px;
    border-right: 1px solid #d8cbb9;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__bonus button {
    border: 1px solid #cfc0ad;
    border-radius: 0;
    background: transparent;
    color: #52483e;
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__bonus button[aria-pressed="true"] {
    border-color: #986633;
    background: #986633;
    color: #ffffff;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__amount {
    padding: 24px 26px;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__amount label > div {
    border-bottom: 1px solid #52483e;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__amount input {
    height: 68px;
    color: #2f2922;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__amount label b {
    color: #986633;
}

[data-skin="apollo"] .apollo-style-sample--editorial
    .apollo-style-sample__quick button {
    border: 0;
    border-bottom: 1px solid #cfc0ad;
    background: transparent;
    color: #6a5c4e;
}

[data-skin="apollo"] .apollo-style-sample--editorial > footer {
    padding: 17px 25px;
    border-top: 1px solid #d8cbb9;
}

[data-skin="apollo"] .apollo-style-sample--editorial > footer > span {
    color: #986633;
}

[data-skin="apollo"] .apollo-style-sample--editorial > footer button {
    border: 0;
    border-radius: 0;
    background: #2f2922;
    color: #ffffff;
}

/* B — dense night trading terminal */

[data-skin="apollo"] .apollo-style-sample--terminal {
    border: 1px solid #33424e;
    border-radius: 0;
    background:
        linear-gradient(rgb(40 211 167 / 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(40 211 167 / 0.035) 1px, transparent 1px),
        #10181f;
    background-size: 22px 22px;
    color: #e9f2f4;
    font-family: Consolas, "SFMono-Regular", monospace;
    box-shadow: 0 22px 45px -30px rgb(3 10 15 / 0.9);
}

[data-skin="apollo"] .apollo-style-sample--terminal::before {
    content: "ONLINE";
    position: absolute;
    top: 14px;
    right: 16px;
    padding-left: 13px;
    color: #28d3a7;
    font-size: 8px;
    letter-spacing: 0.13em;
}

[data-skin="apollo"] .apollo-style-sample--terminal::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 60px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28d3a7;
    box-shadow: 0 0 9px #28d3a7;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__title,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__balance {
    padding: 28px 23px;
    border-bottom: 1px solid #33424e;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__title {
    border-right: 1px solid #33424e;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__title > span,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__balance > span,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__bonus > span,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__amount label > span,
[data-skin="apollo"] .apollo-style-sample--terminal > footer > span {
    color: #28d3a7;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__title h3 {
    font-size: 19px;
    letter-spacing: 0.03em;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__title p,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__notice,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__account dt {
    color: #718491;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__balance strong {
    color: #f4fbfc;
    font-size: 29px;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__account {
    border-bottom: 1px solid #33424e;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__account > div {
    padding: 15px 22px;
    border-right: 1px solid #33424e;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__account dd {
    color: #bfccd1;
    font-weight: 400;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__bonus,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__notice {
    padding: 22px;
    border-right: 1px solid #33424e;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__bonus button,
[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__quick button {
    border: 1px solid #33424e;
    border-radius: 2px;
    background: #16222b;
    color: #9fb0ba;
    font-family: inherit;
    font-size: 9px;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__bonus button[aria-pressed="true"] {
    border-color: #28d3a7;
    color: #28d3a7;
    box-shadow: inset 3px 0 0 #28d3a7;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__amount {
    padding: 22px;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__amount label > div {
    height: 68px;
    border: 1px solid #33424e;
    background: #0b1217;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__amount input {
    height: 100%;
    padding: 0 14px;
    color: #f4fbfc;
    font-family: inherit;
    font-size: 32px;
}

[data-skin="apollo"] .apollo-style-sample--terminal
    .apollo-style-sample__amount label b {
    padding-right: 13px;
    color: #28d3a7;
}

[data-skin="apollo"] .apollo-style-sample--terminal > footer {
    padding: 16px 22px;
    border-top: 1px solid #33424e;
    background: #0b1217;
}

[data-skin="apollo"] .apollo-style-sample--terminal > footer button {
    border: 1px solid #28d3a7;
    border-radius: 2px;
    background: #28d3a7;
    color: #07120f;
    font-family: inherit;
}

/* C — bright consumer banking app */

[data-skin="apollo"] .apollo-style-sample--banking {
    border: 0;
    border-radius: 24px;
    background: #ffffff;
    color: var(--color-ink-strong);
    box-shadow:
        0 1px 2px rgb(43 35 27 / 0.08),
        0 18px 48px -32px rgb(var(--apollo-gold-rgb) / 0.38);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__title,
[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__balance {
    padding: 29px 25px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__title > span,
[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__balance > span,
[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__bonus > span,
[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__amount label > span {
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__title h3 {
    color: var(--color-ink-strong);
    font-size: 23px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__title p,
[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__notice,
[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__account dt {
    color: var(--color-ink-muted);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__balance {
    text-align: right;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__balance strong {
    color: var(--apollo-gold-deep);
    font-size: 31px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__account {
    gap: 8px;
    padding: 0 24px 18px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__account > div {
    padding: 14px;
    border-radius: 12px;
    background: #f8f3ec;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__bonus {
    padding: 18px 12px 24px 24px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__bonus button {
    border: 0;
    border-radius: 99px;
    background: #f8f3ec;
    color: var(--apollo-gold-deep);
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__bonus button[aria-pressed="true"] {
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__amount {
    margin: 18px 24px 24px 12px;
    padding: 18px;
    border: 1px solid #e7ded2;
    border-radius: 16px;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__amount label > div {
    border-bottom: 2px solid var(--apollo-gold);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__amount input {
    height: 64px;
    color: var(--color-ink-strong);
    font-size: 38px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__amount label b {
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__quick button {
    border: 1px solid #e7ded2;
    border-radius: 8px;
    background: #ffffff;
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .apollo-style-sample--banking
    .apollo-style-sample__notice {
    padding: 0 24px 24px;
}

[data-skin="apollo"] .apollo-style-sample--banking > footer {
    margin: 0 24px 24px;
    padding-top: 16px;
    border-top: 1px solid #ece5dc;
}

[data-skin="apollo"] .apollo-style-sample--banking > footer > span {
    color: var(--color-ink-muted);
}

[data-skin="apollo"] .apollo-style-sample--banking > footer button {
    border: 0;
    border-radius: 12px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
}

/* D — decorative casino lounge */

[data-skin="apollo"] .apollo-style-sample--royale {
    border: 1px solid #b6945d;
    border-radius: 26px;
    background:
        radial-gradient(circle at 82% 18%, rgb(255 220 150 / 0.22), transparent 24%),
        repeating-conic-gradient(
            from -15deg at 82% 18%,
            rgb(255 255 255 / 0.025) 0deg 8deg,
            transparent 8deg 18deg
        ),
        linear-gradient(145deg, #4a0f20, #180b12 68%);
    color: #fff8eb;
    box-shadow:
        0 24px 54px -34px rgb(63 3 21 / 0.9),
        inset 0 0 0 5px rgb(255 255 255 / 0.025);
}

[data-skin="apollo"] .apollo-style-sample--royale::before {
    content: "✦";
    position: absolute;
    top: 21px;
    right: 27px;
    color: #e6c68e;
    font-size: 34px;
    text-shadow: 0 0 24px rgb(230 198 142 / 0.7);
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__title,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__balance {
    z-index: 1;
    padding: 31px 25px;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__title {
    border-right: 1px solid rgb(230 198 142 / 0.2);
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__title > span,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__balance > span,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__bonus > span,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__amount label > span,
[data-skin="apollo"] .apollo-style-sample--royale > footer > span {
    color: #e6c68e;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__title h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__title p,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__notice,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__account dt {
    color: rgb(255 241 215 / 0.55);
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__balance strong {
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 35px;
    font-weight: 400;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__account {
    border-top: 1px solid rgb(230 198 142 / 0.2);
    border-bottom: 1px solid rgb(230 198 142 / 0.2);
    background: rgb(0 0 0 / 0.12);
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__account > div {
    padding: 16px 24px;
    border-right: 1px solid rgb(230 198 142 / 0.18);
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__account dd {
    color: #fff8eb;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__bonus,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__notice {
    padding: 24px;
    border-right: 1px solid rgb(230 198 142 / 0.18);
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__bonus button,
[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__quick button {
    border: 1px solid rgb(230 198 142 / 0.3);
    border-radius: 9px;
    background: rgb(255 255 255 / 0.055);
    color: rgb(255 248 235 / 0.68);
    font-size: 10px;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__bonus button[aria-pressed="true"] {
    border-color: #e6c68e;
    background: linear-gradient(135deg, #b58a4a, #e6c68e);
    color: #2a1309;
    box-shadow: 0 7px 18px -10px #e6c68e;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__amount {
    padding: 24px;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__amount label > div {
    border-bottom: 1px solid #e6c68e;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__amount input {
    height: 70px;
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
}

[data-skin="apollo"] .apollo-style-sample--royale
    .apollo-style-sample__amount label b {
    color: #e6c68e;
}

[data-skin="apollo"] .apollo-style-sample--royale > footer {
    padding: 17px 24px;
    border-top: 1px solid rgb(230 198 142 / 0.2);
    background: rgb(0 0 0 / 0.2);
}

[data-skin="apollo"] .apollo-style-sample--royale > footer button {
    border: 1px solid #e6c68e;
    border-radius: 99px;
    background: linear-gradient(135deg, #b58a4a, #e6c68e);
    color: #2a1309;
    box-shadow: 0 8px 20px -12px #e6c68e;
}

@media (max-width: 1170px) {
    [data-skin="apollo"] .apollo-style-lab__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    [data-skin="apollo"] .apollo-style-lab {
        padding-top: 4px;
    }

    [data-skin="apollo"] .apollo-style-lab__head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 22px;
    }

    [data-skin="apollo"] .apollo-style-lab__head h1 {
        font-size: 22px;
    }

    [data-skin="apollo"] .apollo-style-lab__candidate > header {
        padding: 0 2px;
    }

    [data-skin="apollo"] .apollo-style-sample {
        grid-template-areas:
            "title"
            "balance"
            "account"
            "bonus"
            "amount"
            "notice"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
    }

    [data-skin="apollo"] .apollo-style-sample__account {
        grid-template-columns: 1fr;
    }

    [data-skin="apollo"] .apollo-style-sample--editorial
        .apollo-style-sample__title,
    [data-skin="apollo"] .apollo-style-sample--editorial
        .apollo-style-sample__bonus,
    [data-skin="apollo"] .apollo-style-sample--editorial
        .apollo-style-sample__notice,
    [data-skin="apollo"] .apollo-style-sample--terminal
        .apollo-style-sample__title,
    [data-skin="apollo"] .apollo-style-sample--terminal
        .apollo-style-sample__bonus,
    [data-skin="apollo"] .apollo-style-sample--terminal
        .apollo-style-sample__notice,
    [data-skin="apollo"] .apollo-style-sample--royale
        .apollo-style-sample__title,
    [data-skin="apollo"] .apollo-style-sample--royale
        .apollo-style-sample__bonus,
    [data-skin="apollo"] .apollo-style-sample--royale
        .apollo-style-sample__notice {
        border-right: 0;
    }

    [data-skin="apollo"] .apollo-style-sample--banking
        .apollo-style-sample__balance {
        text-align: left;
    }

    [data-skin="apollo"] .apollo-style-sample--banking
        .apollo-style-sample__bonus {
        padding-right: 24px;
    }

    [data-skin="apollo"] .apollo-style-sample--banking
        .apollo-style-sample__amount {
        margin-left: 24px;
    }
}