/*---------------------------------------------------------
    아폴로 — 이 스킨의 생김새 **전부**.

    ══ 왜 한 파일인가 ═══════════════════════════════════════

    앞서는 넷이었습니다: `layout.css`(틀) · `ui.css`(옛 화면들) ·
    `cards.css`(딱지), 그리고 그 아래에 siam export 의 시트 여섯(1.2MB).

    운영자의 말: 「색상 말곤 바뀐게 없는데 css 충돌한거같은데 그냥 처음부터
    클린업하고 다시짜는게 나을듯.」 맞았습니다.

    export 의 시트를 실은 것이 화근이었습니다. b10 은 배치를 여럿 지원하는
    템플릿이고 siam 은 **상단 메뉴 판**입니다. 우리가 맞추려는 하이리밋은
    **사이드바 판**이고요. 그 715KB 가 우리 규칙과 계속 싸웠고, 이기려고
    명시도를 올리다 보니 파일이 넷으로 늘었습니다. 색만 바뀌고 배치가 안
    바뀐 것이 그래서입니다.

    그래서 export 시트를 다 뗍니다. 남는 것은 셋입니다:

        palette.css   테마 층을 읽는 토큰 (포세이돈과 같은 구조)
        iconfont.css  아이콘 글꼴 289자 — 이건 만들 수 없는 것입니다
        skin.css      이 파일. 나머지 전부.

    ══ 치수는 하이리밋에서 잰 것입니다 ══════════════════════

    CSS 를 해석하지 않고 **화면과 그 사이트의 `:root` 변수**에서 잽니다.
    해석하려 들면 다른 화면의 규칙을 이 화면 것으로 착각합니다 — 실제로
    두 번 그랬습니다.
---------------------------------------------------------*/

/*═════════════════════════════════════════════════════════
    ① 큰 틀

    기둥이 **맨 위 y=0 부터** 섭니다. 위 띠는 그 오른쪽에서만 시작합니다.

    처음에는 위 띠를 가로로 다 깔고 기둥을 그 아래에 두었습니다. 운영자의
    지적: 「우리껀 헤더가 이어져있고, 하이리밋은 좌측이 헤더영역 끝까지 다
    사이드바야.」 사진을 보면 로고가 화면 맨 왼쪽 위에 있고 그 오른쪽으로만
    띠가 지나갑니다.
═════════════════════════════════════════════════════════*/

[data-skin="apollo"] {
    --apollo-side-closed: 80px;
    --apollo-side-open: 250px;
    --apollo-side-gap-open: 290px;
    --apollo-side-width: var(--apollo-side-closed);
    --apollo-chrome-offset: var(--apollo-side-closed);
    --apollo-content-offset: var(--apollo-side-closed);
    position: relative;
    background: var(--color-base);
    color: var(--color-ink);
    font-family: var(--font-sans);
}

[data-skin="apollo"][data-apollo-sidebar="open"] {
    --apollo-side-width: var(--apollo-side-open);
    --apollo-chrome-offset: var(--apollo-side-open);
    --apollo-content-offset: var(--apollo-side-gap-open);
}

/*
 * 원본 그대로입니다 — `casino789/css/main.css` 의 `.LeftContent` 묶음.
 * 250px 흰 기둥, 위 여백 10px, 가로 가운데 정렬, 테두리 없음. 앞판은 오른쪽에
 * 선과 그림자를 얹었는데 원본에는 둘 다 없고, 그래서 기둥이 본문에서 떠
 * 보였습니다.
 */
[data-skin="apollo"] .LeftContent {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--apollo-side-width);
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: var(--color-panel);
    z-index: 45;
    overflow: hidden;
    transition: width 250ms ease-out;
}

[data-skin="apollo"] .apollo-top,
[data-skin="apollo"] .apollo-notice {
    margin-left: var(--apollo-chrome-offset);
    transition: margin-left 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-skin="apollo"] .site-main {
    margin-left: var(--apollo-content-offset);
    width: auto;
    max-width: none;
    padding: 24px 30px 64px;
    min-width: 0;
    box-sizing: border-box;
}

/*─────────────────────────────────────────────────────────
    위 띠 — 기둥의 오른쪽에서만
─────────────────────────────────────────────────────────*/

[data-skin="apollo"] .apollo-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 70px;
    padding: 0 28px 0 20px;
    /*
     * The panel colour, not white. A fixed `rgb(255 255 255 / 0.91)` survived
     * the move to themed surfaces and left a near-white bar across the top of
     * every page on a dark palette — the nickname beside it, inherited from the
     * theme's ink, came out at 1.04:1. Invisible, not merely dim.
     */
    background: color-mix(in srgb, var(--color-panel) 91%, transparent);
    border-bottom: 1px solid var(--color-line-soft);
    box-shadow: 0 5px 20px rgb(var(--t-veil-rgb, 18 22 29) / 0.06);
    backdrop-filter: blur(14px) saturate(0.9);
}

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

[data-skin="apollo"] .apollo-sidebar-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 11px;
    background: var(--color-panel);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition:
        border-color 150ms ease,
        color 150ms ease,
        background 150ms ease;
}

[data-skin="apollo"] .apollo-sidebar-toggle:hover,
[data-skin="apollo"] .apollo-sidebar-toggle[aria-pressed="true"] {
    border-color: var(--apollo-gold);
    background: color-mix(
        in srgb,
        var(--color-panel) 94%,
        var(--apollo-gold-pale)
    );
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .apollo-sidebar-toggle svg {
    width: 20px;
    height: 20px;
}

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

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

[data-skin="apollo"] .apollo-top__page strong {
    color: var(--color-ink-strong);
    font-size: 15px;
    font-weight: 700;
}

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

[data-skin="apollo"] .apollo-who {
    margin-right: 3px;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

[data-skin="apollo"] .apollo-who:hover {
    color: var(--apollo-gold-deep);
}

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

[data-skin="apollo"] .apollo-sum {
    margin-right: 4px;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gold);
}

/* 참고 사이트의 위 단추는 **알약 모양**입니다 — 모서리를 반만큼 굴립니다. */
[data-skin="apollo"] .apollo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 17px;
    border: 1px solid var(--color-line);
    border-radius: 11px;
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

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

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

[data-skin="apollo"] .apollo-btn-on {
    border-color: var(--apollo-gold);
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    box-shadow: 0 7px 18px -12px rgb(var(--apollo-gold-rgb) / 0.9);
}

/*
 * ── 파트너 (2026-09-07) ─────────────────────────────────────
 *
 * 「파트너페이지 버튼은 … 잘보여야해 중요한 버튼이라 생각하면돼」.
 *
 * 제우스와 헤라는 옆 글자들과 같은 크기로 두고 **네온 발광**으로만 띄웁니다.
 * 그 판이 어두워서 되는 방식입니다. 아폴로는 크림색 판이라 발광이 안 보입니다 —
 * 흰 바탕에 흰 빛을 얹는 셈입니다.
 *
 * 그래서 여기서는 **채워서** 띄웁니다. 옆의 `.apollo-btn` 들은 판 색 바탕에
 * 외곽선이고, 이것만 금색으로 찬 단추라 한눈에 갈립니다. 맥박은 남겨 둡니다 —
 * 세 스킨을 나란히 놓았을 때 같은 것이 같은 몸짓을 해야 합니다.
 */
[data-skin="apollo"] .apollo-partner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--apollo-gold);
    border-radius: 11px;
    background: var(--apollo-gold);
    color: var(--apollo-gold-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    animation: apollo-partner-beat 1.6s ease-in-out infinite;
}

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

[data-skin="apollo"] .apollo-partner .apollo-icon {
    width: 17px;
    height: 17px;
}

/*
 * 크기가 아니라 **그림자**로 맥박을 칩니다. 폭이 변하면 옆의 금액과
 * 새로고침 단추가 매 초 밀립니다 — 읽는 중에 자리가 움직입니다.
 */
@keyframes apollo-partner-beat {
    0%,
    100% {
        box-shadow: 0 7px 18px -12px rgb(var(--apollo-gold-rgb) / 0.9);
    }
    50% {
        box-shadow:
            0 7px 18px -12px rgb(var(--apollo-gold-rgb) / 0.9),
            0 0 0 4px rgb(var(--apollo-gold-rgb) / 0.28);
    }
}

/* 움직임을 싫어하는 사람에게는 채운 것만으로 충분합니다. */
@media (prefers-reduced-motion: reduce) {
    [data-skin="apollo"] .apollo-partner {
        animation: none;
    }
}

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

/*═════════════════════════════════════════════════════════
    ② 기둥 안

    로고 하나와 메뉴 상자 둘. 상자는 82% 폭에 안쪽 여백 17px, 모서리 10px,
    사이 19px — 참고 사이트의 값입니다.
═════════════════════════════════════════════════════════*/

[data-skin="apollo"] .LeftContent .logo {
    flex: none;
    width: 100%;
    height: 92px;
    margin: 0 0 12px;
    display: grid;
    place-items: center;
}

[data-skin="apollo"] .LeftContent .logo a {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .apollo-side-logo {
    display: block;
    width: 164px;
    height: auto;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition:
        opacity 160ms ease,
        transform 200ms ease;
}

[data-skin="apollo"] .apollo-side-mark {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: 1;
    transition: opacity 120ms ease;
}

[data-skin="apollo"] .LeftContent.is-open .apollo-side-logo {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

[data-skin="apollo"] .LeftContent.is-open .apollo-side-mark {
    opacity: 0;
}

/* 운영사가 올린 표식(파비콘). 정사각형이 아닐 수 있어 줄이기만 합니다. */
[data-skin="apollo"] img.apollo-side-mark {
    object-fit: contain;
}

/*
 * `width: 100%` — 원본 `.scrollFrame` 이 그렇습니다. 기둥이 세로 flex 에
 * `align-items: center` 라, 폭을 안 적으면 이 칸이 내용만큼 오그라들고 그
 * 안의 82% 카드가 250px 기둥 안에서 121px 로 서서 글자가 카드 밖으로
 * 삐져나갑니다.
 */
[data-skin="apollo"] .apollo-side-scroll {
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

[data-skin="apollo"] .apollo-side-scroll::-webkit-scrollbar {
    width: 0;
}

/*
 * 펼친 기둥의 메뉴 묶음 — 82% 폭의 흰 카드, 반지름 10px, 안쪽 여백 17px.
 * 앞판은 여기에 테두리와 옅은 배경, 안쪽 하이라이트까지 얹어 기둥 안에 또
 * 하나의 상자가 떠 있는 모양이었습니다. 원본은 흰 바탕에 그림자 한 겹뿐입니다.
 */
[data-skin="apollo"] .leftMenu {
    width: 82%;
    margin: 0 auto 19px;
    padding: 17px;
    border: 0;
    border-radius: 10px;
    background: var(--color-panel);
    box-shadow: var(--color-line-soft) 0.1em 0 0;
}

[data-skin="apollo"] .leftMenu ul {
    width: 89%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

[data-skin="apollo"] .leftMenu li {
    position: relative;
    padding: 10px 3px;
    border-bottom: 1px solid var(--color-line);
}

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

/*
 * 원본에는 알약 배경이 없습니다. 고른 자리는 **아이콘이 커지고 색이 바뀌는
 * 것**으로 말합니다 — 앞판이 깔던 금색 바탕이 원본과 가장 다르게 보이던
 * 부분입니다.
 */
[data-skin="apollo"] .leftMenu li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-ink-nav);
    text-decoration: none;
    cursor: pointer;
}

[data-skin="apollo"] .leftMenu li a .apollo-icon {
    flex: none;
    width: 24px;
    height: 24px;
    margin-right: 25px;
    color: #64707d;
    line-height: 1;
    transition:
        color 0.2s ease-out,
        transform 0.2s ease-out;
}

[data-skin="apollo"] .leftMenu li a:hover .apollo-icon,
[data-skin="apollo"] .leftMenu li a[aria-current="page"] .apollo-icon {
    color: var(--apollo-gold-deep);
    transform: scale(1.3);
}

[data-skin="apollo"] .apollo-btn .apollo-icon {
    width: 17px;
    height: 17px;
}

[data-skin="apollo"] .apollo-icon.is-spinning {
    animation: apollo-spin 700ms linear infinite;
}

@keyframes apollo-spin {
    to {
        transform: rotate(360deg);
    }
}

[data-skin="apollo"] .leftMenu li a .txt {
    display: flex;
    align-items: center;
    font-size: 13px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.3s ease-out;
}

[data-skin="apollo"] .leftMenu li a:hover .txt,
[data-skin="apollo"] .leftMenu li a[aria-current="page"] .txt {
    color: var(--apollo-gold-deep);
}

/*
 * 접었을 때 — 원본의 `@media (max-width: 1900px)` 묶음 그대로.
 *
 * 카드가 풀리고(그림자·반지름·아래 여백 없음) 줄의 밑줄도 사라집니다. 글자만
 * 숨기고 **아이콘은 있던 자리에 그대로 둡니다** — 앞판은 가운데로 몰았는데,
 * 그러면 펼칠 때 아이콘이 옆으로 미끄러지고 두 묶음의 세로선도 어긋납니다.
 * 두 묶음을 가르는 것은 38px 짜리 짧은 선 하나입니다.
 */
[data-skin="apollo"] .LeftContent.is-closed .leftMenu {
    width: 100%;
    margin: 0;
    padding: 17px 23px 3px 16px;
    border-radius: 0;
    box-shadow: none;
}

[data-skin="apollo"] .LeftContent.is-closed .leftMenu ul {
    width: 100%;
}

[data-skin="apollo"] .LeftContent.is-closed .leftMenu li {
    border-bottom: 0;
}

[data-skin="apollo"] .LeftContent.is-closed .leftMenu li a .txt {
    display: none;
}

[data-skin="apollo"] .LeftContent.is-closed .leftMenu01 {
    position: relative;
    margin-top: 10px;
}

/* 16px 은 묶음의 왼쪽 안여백 — 원본은 `left` 를 안 적어 정적 위치, 곧 이 자리에
   섭니다. 0 으로 두면 선이 기둥 맨 왼쪽에서 시작해 아이콘 열과 안 맞습니다. */
[data-skin="apollo"] .LeftContent.is-closed .leftMenu01::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    width: 38px;
    height: 1px;
    background: var(--color-line);
}

/*═════════════════════════════════════════════════════════
    ③ 로비 — 배너, 구획 제목, 딱지 격자
═════════════════════════════════════════════════════════*/

/* 띠의 모양은 **올리는 그림의 규격**입니다 (`skin-placements.ts` 의 아폴로 MAIN,
   1600×364). 높이를 따로 정하면 둘이 어긋나 `cover` 가 양옆을 자릅니다 — 운영사가
   올린 배너의 인물·룰렛이 잘려 나갔습니다 (2026-10-14). 폰은 아래에서 768/320. */
[data-skin="apollo"] #main .main_visual {
    aspect-ratio: 1600 / 364;
    margin-bottom: 38px;
    border: 1px solid var(--color-line-soft);
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-field);
    box-shadow: 0 16px 40px -24px rgb(18 22 29 / 0.28);
}

[data-skin="apollo"] #main .main_visual > section,
[data-skin="apollo"] #main .main_visual .visual_list {
    position: relative;
    height: 100%;
}

[data-skin="apollo"] #main .visual_item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

[data-skin="apollo"] #main .visual_item.active {
    opacity: 1;
    pointer-events: auto;
}

[data-skin="apollo"] #main .visual_flat,
[data-skin="apollo"] #main .visual_flat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-skin="apollo"] #main .visual_link {
    position: absolute;
    inset: 0;
}

[data-skin="apollo"] #main .visual_btns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 7px;
}

[data-skin="apollo"] #main .visual_btns > .btn_circle {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition:
        width 0.2s ease,
        background 0.2s ease;
}

[data-skin="apollo"] #main .visual_btns > .btn_circle.active {
    width: 20px;
    border-radius: 4px;
    background: var(--color-brand);
}

/*─────────────────────────────────────────────────────────
    구획 제목 — 「CASINO GAME LIST」

    앞 낱말만 금빛, 뒤는 진한 글자, 그리고 오른쪽으로 흐려지는 금선.
─────────────────────────────────────────────────────────*/

[data-skin="apollo"] #main .m_title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 13px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[data-skin="apollo"] #main .m_title em {
    font-style: normal;
    color: var(--color-brand);
}

[data-skin="apollo"] #main .m_title span {
    color: var(--color-ink-strong);
}

[data-skin="apollo"] #main .m_title::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 9px;
    background: linear-gradient(
        90deg,
        var(--color-brand),
        rgb(var(--t-accent-rgb, 198 173 134) / 0)
    );
}

/*─────────────────────────────────────────────────────────
    딱지 — 25% 넷, 553×333 비율, 흰 판
─────────────────────────────────────────────────────────*/

/*
 * ── 왜 조상이 둘인가 (2026-09-07) ───────────────────────────
 *
 *     「https://demo-apollo.chung.games/game?type=slot
 *      디자인 아까 수정한거 아니였어?」
 *
 * 슬롯 로비만 깨져 있었습니다 — 머리가 잘리고 게임사 이름이 한 글자씩 세로로
 * 흘러내렸습니다. 카지노는 멀쩡했습니다.
 *
 * 아래 스물일곱 줄이 전부 `#main` 을 요구하고 있었는데, 재 보니 두 로비의
 * 조상 사슬이 다릅니다:
 *
 *   카지노  .m_casino < li < ul < .m_casino_area < #main < .site-main
 *   슬롯    .m_slot   < li < .apollo-grid < .apollo-box < .apollo-screen
 *
 * 슬롯이 새 껍데기로 옮겨 가면서 `#main` 밖으로 나갔고, 그러자 이 규칙들이
 * **하나도 안 붙었습니다.** 카드는 꾸미기 전의 맨 모습으로 남았습니다 —
 * `object-fit` 이 `fill`, 그림 상자가 123px, 이름 칸은 글자 하나 폭.
 *
 * `:is(#main, .apollo-screen)` 은 특이도가 `#main` 과 **같습니다**(:is 는 제
 * 안에서 가장 센 것을 따릅니다). 그래서 `#main` 을 그냥 지우는 것과 달리 이
 * 규칙들이 다른 규칙과 겨루던 자리가 하나도 안 흔들립니다.
 */
[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino_area, .m_slot_area) ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * ── 열 수가 화면을 따라갑니다 (2026-09-07 운영자 요청) ──────
 *
 *     「무조건 가로 4개 고정이던데 크기 줄어들면 뭐 가로한줄에 3개배치해서
 *      크기를 키워주던 그런식으로 반응형으로 수정해주라」
 *
 * `25%` 하나로 폰 바로 위까지 버티고 있었습니다. 재 보니 900px 화면에서
 * 카드가 **180×108** 이었습니다 — 로고도 사람도 알아볼 수 없는 크기입니다.
 *
 * 끊는 폭은 이 저장소가 쓰는 셋 중 둘입니다 (1279 · 1023). 그 자리에서 열을
 * 하나씩 줄이면 카드가 어느 폭에서도 340~440px 사이에 남습니다:
 *
 *   1280 위   넷   355~400px
 *   1024~1279 셋   343~370px
 *    768~1023 둘   374~400px
 *    767 아래  둘   아래 2053줄이 가로 카드로 바꿔 그립니다
 *
 * 열을 줄이면 카드가 커지는 것이 요점입니다. 넷을 지키면 화면이 좁아질수록
 * 카드만 작아지고, 그러면 목록이 아니라 무늬가 됩니다.
 */
[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino_area, .m_slot_area) li {
    width: 50%;
    padding: 0 10px 10px 0;
}

/*
 * 넓어지는 쪽으로 셉니다 (`min-width`).
 *
 * `max-width` 로 적었다가 `apollo-home.spec.ts` 가 터졌습니다. 그 시험은 이
 * 파일에서 **처음 나오는** `@media (max-width: …)` 를 모바일 껍데기 구간으로
 * 읽어 오른쪽 장바구니 구간과 겹치는지 봅니다. 여기 새 블록을 앞에 두면 그
 * 「처음」이 바뀌어, 실제로는 아무것도 안 겹치는데 겹친다고 답합니다.
 *
 * 좁은 쪽을 기본으로 두면 그 순서에 기대지 않습니다.
 */
@media (min-width: 1024px) {
    [data-skin="apollo"] :is(#main, .apollo-screen)
        :is(.m_casino_area, .m_slot_area)
        li {
        width: 33.3333%;
    }
}

@media (min-width: 1280px) {
    [data-skin="apollo"] :is(#main, .apollo-screen)
        :is(.m_casino_area, .m_slot_area)
        li {
        width: 25%;
    }
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 553 / 333;
    /*
     * ── `height: auto` 를 소리 내어 적는 까닭 (2026-09-07) ──
     *
     * 이 카드는 `<button>` 입니다. 그리고 슬롯 로비는 `.apollo-screen` 껍데기
     * 안에 있는데, 거기에는 **그 안의 단추를 전부 폼 단추로 만드는** 줄이
     * 있습니다 (`1403` 줄):
     *
     *     [data-skin="apollo"] .apollo-screen button { height: var(--ui-btn-h-md) }
     *
     * 그래서 슬롯 카드만 46px 로 눌렸습니다. 카지노는 그 껍데기 밖이라 멀쩡했고,
     * 같은 클래스인데 한쪽만 깨지는 모양이 됐습니다.
     *
     * 위의 `aspect-ratio` 는 **높이가 `auto` 일 때만** 씁니다. 남이 높이를
     * 정해 버리면 비율은 조용히 무시됩니다 — 계산값에는 비율이 그대로 찍혀
     * 있어서, 화면만 보고는 무엇이 이겼는지 알 수가 없습니다.
     *
     * 저 껍데기 규칙에서 카드를 빼는 길도 있었지만, 그러면 특이도가 올라가
     * 그 안의 다른 단추들이 저마다 겨루던 자리가 흔들립니다. 여기서 한 줄로
     * 되돌리는 편이 닿는 곳이 좁습니다.
     */
    height: auto;
    padding: 0;
    /*
     * 색은 전부 `--apollo-card-*` 입니다 — 조합을 따릅니다(2026-10-14).
     * 여기 hex 를 다시 적으면 그 자리만 조합을 안 따라가고, 화면은 안
     * 깨지므로 아무도 모릅니다. `apollo-card-theme.spec.ts` 가 셉니다.
     */
    border: 1px solid var(--apollo-card-line);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 79% 16%,
            var(--apollo-card-shine),
            transparent 31%
        ),
        linear-gradient(
            128deg,
            var(--apollo-card-face-0) 0%,
            var(--apollo-card-face-1) 56%,
            var(--apollo-card-face-2) 100%
        );
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 var(--apollo-card-edge),
        0 8px 22px -20px rgb(var(--apollo-card-shade-rgb) / 0.28);
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot)::before {
    content: "";
    position: absolute;
    left: -12%;
    top: -18%;
    bottom: -18%;
    z-index: 0;
    width: 57%;
    border: 0;
    border-right: 1px solid rgb(var(--apollo-card-tone-rgb) / 0.72);
    border-radius: 0 46% 46% 0;
    background:
        radial-gradient(
            circle at 74% 22%,
            rgb(var(--apollo-card-tone-rgb) / 0.22),
            transparent 24%
        ),
        linear-gradient(
            142deg,
            var(--apollo-card-plate-0) 0%,
            var(--apollo-card-plate-1) 62%,
            var(--apollo-card-plate-2) 100%
        );
    box-shadow:
        inset -12px 0 32px -26px rgb(var(--apollo-card-tone-rgb) / 0.9),
        20px 0 42px -30px rgb(var(--apollo-card-shade-rgb) / 0.42);
    transform: skewX(-7deg);
    pointer-events: none;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot)::after {
    content: "";
    position: absolute;
    right: 32%;
    top: -44%;
    z-index: 0;
    width: 50%;
    aspect-ratio: 1;
    border: 1px solid rgb(var(--apollo-card-tone-rgb) / 0.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 18px rgb(var(--apollo-card-tone-rgb) / 0.055),
        0 0 0 38px rgb(var(--apollo-card-tone-rgb) / 0.035);
    pointer-events: none;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot):hover {
    border-color: var(--apollo-card-tone);
    box-shadow: 0 16px 30px -20px rgb(var(--apollo-card-tone-rgb) / 0.48);
    transform: translateY(-3px);
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .img,
[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .logo,
[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .c_mask {
    position: absolute;
    margin: 0;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .img {
    top: 3%;
    right: -3%;
    bottom: 0;
    left: 36%;
    z-index: 1;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: saturate(0.96) contrast(1.01);
    transform-origin: right bottom;
    transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-skin="apollo"] :is(#main, .apollo-screen)
    :is(.m_casino, .m_slot):not([data-motion="ready"]):hover
    .img
    img {
    transform: translateX(-2px) scale(1.035);
}

/*
 * ── 오버에서 도는 2초 루프 (2026-09-07) ─────────────────────
 *
 * 사람 그림과 **같은 칸, 같은 정렬**입니다. 위 `.img img` 가
 * `contain` · `right bottom` 이므로 여기도 그래야 두 겹이 딱 겹칩니다 —
 * 한 화소라도 어긋나면 바뀌는 순간 사람이 튑니다.
 *
 * 주소를 `:hover` 규칙 안에만 둡니다. 밖으로 내면 브라우저가 로비에 들어서는
 * 순간 서른다섯 장을 한꺼번에 받습니다. 언제 받을지는 `motion-warm.ts` 가
 * 정하고, 다 받은 카드에만 `data-motion="ready"` 가 붙습니다.
 */
[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .apollo-motion {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: no-repeat right bottom / contain;
    opacity: 0;
    pointer-events: none;
}

/*
 * 모션 배경은 hover 전에 미리 붙입니다. 기존에는 hover 순간에
 * `background-image`를 처음 설정해서, 정지 사진은 즉시 꺼졌지만 모션의 첫
 * 페인트는 한 프레임 늦었습니다. 사용자가 본 짧은 깜빡임이 그 빈 프레임입니다.
 */
[data-skin="apollo"] :is(#main, .apollo-screen)
    :is(.m_casino, .m_slot)[data-motion="ready"]
    .apollo-motion {
    background-image: var(--apollo-motion);
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot)[data-motion="ready"]:hover
    .apollo-motion {
    opacity: 1;
}

/*
 * 루프가 뜨면 사진은 끕니다. 안 끄면 움직이는 사람 뒤에 멈춘 사람이 비쳐
 * 머리카락이 흔들리는 자리마다 윤곽이 둘로 갈립니다.
 *
 * 페이드를 안 넣습니다 — 루프의 첫 프레임이 그 사진이라 즉시 바꾸면 아무
 * 일도 안 일어난 것처럼 보이는데, 겹쳐서 넘기면 그동안 잔상이 돌아옵니다.
 */
[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot)[data-motion="ready"]:hover
    .img img {
    opacity: 0;
}

/* 움직이는 그림 파일은 전역 차단이 못 막습니다 — 여기서 막습니다. */
@media (prefers-reduced-motion: reduce) {
    [data-skin="apollo"] :is(#main, .apollo-screen)
        :is(.m_casino, .m_slot)[data-motion="ready"]
        .apollo-motion {
        background-image: none;
        opacity: 0;
    }
    [data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot):hover .img img {
        opacity: 1;
    }
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .logo {
    left: 5%;
    top: 50%;
    z-index: 3;
    width: 40%;
    height: 46%;
    transform: translateY(-50%) scale(1.06);
    transform-origin: left center;
    transition: transform 220ms ease;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter:
        drop-shadow(0 1px 1px rgb(0 0 0 / 0.38))
        drop-shadow(0 0 10px rgb(255 255 255 / 0.12));
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot):hover .logo {
    transform: translateY(-50%) scale(1.1);
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .c_mask {
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        90deg,
        rgb(5 9 15 / 0.06) 0%,
        transparent 48%,
        rgb(255 255 255 / 0.07) 100%
    );
    pointer-events: none;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) strong {
    position: absolute;
    left: 6%;
    bottom: 14%;
    z-index: 4;
    width: 40%;
    padding: 0;
    opacity: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    transition: opacity 0.2s ease;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot).no-logo strong {
    top: 50%;
    bottom: auto;
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.42);
    transform: translateY(-50%);
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot).has-logo:hover strong {
    opacity: 0;
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot).is-off .img img {
    filter: grayscale(1) brightness(0.75);
}

[data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino, .m_slot) .m_stop {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
}

/* ── Home catalogue sections -------------------------------------------- */

/*
 * ── 세 화면이 **같은 폭**입니다 (2026-09-07 운영자 요청) ─────
 *
 *     「아폴로 웹 좌우여백 카지노/슬롯 메뉴 들어갔을때랑 메인페이지랑
 *      크기가 달라」
 *
 * 이 자리가 `#main.apollo-home` 이었습니다 — 대문만 1600 에서 멈추고 로비
 * 둘은 껍데기를 끝까지 썼습니다. 1920 화면에서 대문 1600, 로비 1780 이라
 * 메뉴를 옮길 때마다 본문이 좌우로 흔들렸습니다.
 *
 * `#main` 은 아폴로에서 세 화면만 씁니다(대문·카지노·슬롯). 그래서 여기에
 * 걸면 셋이 함께 맞고, 다른 화면은 안 건드립니다.
 */
[data-skin="apollo"] #main {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

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

[data-skin="apollo"] .apollo-catalogue__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--color-line);
}

[data-skin="apollo"] .apollo-catalogue__head > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

[data-skin="apollo"] .apollo-catalogue__head h2 {
    margin: 0;
    color: var(--color-ink-strong);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.035em;
}

[data-skin="apollo"] .apollo-catalogue__head a {
    color: var(--color-ink-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 150ms ease;
}

[data-skin="apollo"] .apollo-catalogue__head a:hover {
    color: var(--apollo-gold-deep);
}

[data-skin="apollo"] .m_slot_area li[data-active="yes"] .m_slot {
    border-color: var(--apollo-card-tone);
    box-shadow: 0 0 0 3px rgb(var(--apollo-card-tone-rgb) / 0.18);
}

[data-skin="apollo"] .apollo-catalogue__more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--apollo-gold-deep);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-catalogue__more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--color-line-soft);
}

[data-skin="apollo"] .apollo-catalogue__more span {
    position: relative;
    padding: 0 14px;
    background: var(--color-base);
}

/* ── Slot detail on the front door --------------------------------------- */

[data-skin="apollo"] .apollo-slot-detail {
    margin: -9px 0 42px;
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-panel);
    box-shadow: 0 14px 34px -26px rgb(18 22 29 / 0.32);
}

[data-skin="apollo"] .apollo-slot-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

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

[data-skin="apollo"] .apollo-slot-detail__head h2 {
    margin: 4px 0 0;
    color: var(--color-ink-strong);
    font-size: 20px;
}

[data-skin="apollo"] .apollo-slot-detail__head button,
[data-skin="apollo"] .apollo-slot-detail__pager button {
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

[data-skin="apollo"] .apollo-slot-detail__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

[data-skin="apollo"] .apollo-slot-detail__search input {
    flex: 1;
    height: 46px;
    padding: 0 46px 0 14px;
    border: 1px solid var(--color-line);
    border-radius: 11px;
    background: var(--color-field);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

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

[data-skin="apollo"] .apollo-slot-detail__search button {
    position: absolute;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
}

[data-skin="apollo"] .apollo-slot-detail__search span {
    flex: none;
    color: var(--color-ink-muted);
    font-size: 12px;
}

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

[data-skin="apollo"] .apollo-slot-games button {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-panel);
    color: var(--color-ink);
    cursor: pointer;
    transition:
        border-color 150ms ease,
        transform 150ms ease;
}

[data-skin="apollo"] .apollo-slot-games button:hover {
    border-color: var(--apollo-card-tone);
    transform: translateY(-2px);
}

[data-skin="apollo"] .apollo-slot-games button > img:not(.apollo-slot-games__stop) {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-field);
}

[data-skin="apollo"] .apollo-slot-games button > span {
    padding: 10px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-slot-games__stop {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
    width: 24px;
    height: 24px;
}

[data-skin="apollo"] .apollo-slot-detail__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

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

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

/* ── Four service cards -------------------------------------------------- */

[data-skin="apollo"] .apollo-quick {
    display: grid;
    /* Four when all services are live; three expand evenly when Events is
       disabled by the operator instead of leaving a conspicuous empty slot. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 6px 0 46px;
}

[data-skin="apollo"] .apollo-quick__card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-panel);
    color: var(--color-ink);
    text-decoration: none;
    box-shadow: 0 12px 30px -26px rgb(18 22 29 / 0.32);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

[data-skin="apollo"] .apollo-quick__card:hover {
    border-color: var(--apollo-gold);
    box-shadow: 0 18px 38px -24px rgb(var(--apollo-gold-rgb) / 0.42);
    transform: translateY(-3px);
}

[data-skin="apollo"] .apollo-quick__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgb(var(--apollo-gold-rgb) / 0.12);
    color: var(--apollo-gold-deep);
    font-size: 22px;
}

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

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

[data-skin="apollo"] .apollo-quick__text strong {
    color: var(--color-ink-strong);
    font-size: 15px;
}

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

[data-skin="apollo"] .apollo-quick__arrow {
    color: var(--color-ink-muted);
    font-size: 18px;
    transition:
        color 150ms ease,
        transform 150ms ease;
}

[data-skin="apollo"] .apollo-quick__card:hover .apollo-quick__arrow {
    color: var(--apollo-gold-deep);
    transform: translateX(3px);
}

/*═════════════════════════════════════════════════════════
    ④ 아직 안 옮긴 화면들

    스물한 개가 `_starter` 의 마크업으로 서 있습니다. 여기는 그것들이
    읽히게만 해 둡니다 — 화면을 하나씩 옮길 때마다 이 구획이 줄어듭니다.
═════════════════════════════════════════════════════════*/

[data-skin="apollo"] .apollo-screen {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 0 40px;
}

[data-skin="apollo"] .apollo-screen > h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-ink-strong);
}

[data-skin="apollo"] .apollo-screen > p {
    margin-top: -10px;
    font-size: 13px;
    color: var(--color-ink-muted);
}

[data-skin="apollo"] .apollo-box {
    padding: 17px 19px 19px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    background: var(--color-panel);
}

[data-skin="apollo"] .apollo-box > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--color-line-soft);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink-strong);
}

[data-skin="apollo"] .apollo-box > h2::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 1px;
    background: var(--color-brand);
}

[data-skin="apollo"] .apollo-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 13px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-line-soft);
}

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

[data-skin="apollo"] .apollo-row > span {
    font-size: 13px;
    color: var(--color-ink-label);
}

[data-skin="apollo"] .apollo-note,
[data-skin="apollo"] .apollo-notice {
    padding: 10px 13px;
    border: 1px solid var(--ui-alert-info-line);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--ui-alert-info-bg);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ui-alert-info-ink);
}

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

[data-skin="apollo"] .apollo-toolbar,
[data-skin="apollo"] .apollo-money-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 룰렛의 판과 출석 달력은 여기 있었습니다. 두 화면이 계정 화면들과 같은
   체계(`account.css` 의 `.apollo-board`·`.apollo-cal`)로 옮겨 가면서 이 규칙을
   부르는 곳이 없어졌습니다. */

/*─────────────────────────────────────────────────────────
    입력과 단추, 표 — 화면들이 맨 태그로 그립니다.
─────────────────────────────────────────────────────────*/

[data-skin="apollo"] .apollo-screen input,
[data-skin="apollo"] .apollo-screen select,
[data-skin="apollo"] .apollo-screen textarea {
    width: 100%;
    height: var(--ui-btn-h-md);
    padding: 0 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--ui-btn-radius);
    background: var(--color-base);
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
}

[data-skin="apollo"] .apollo-screen textarea {
    height: auto;
    min-height: 110px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

[data-skin="apollo"] .apollo-screen input:focus,
[data-skin="apollo"] .apollo-screen select:focus,
[data-skin="apollo"] .apollo-screen textarea:focus {
    outline: none;
    border-color: var(--color-brand);
}

[data-skin="apollo"] .apollo-screen button,
[data-skin="apollo"] .apollo-money-strip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ui-btn-h-md);
    padding: 0 18px;
    border: 1px solid var(--ui-btn-outline-line);
    border-radius: var(--ui-btn-radius);
    background: transparent;
    color: var(--ui-btn-outline-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.14s ease,
        color 0.14s ease;
}

[data-skin="apollo"] .apollo-screen button:hover:not(:disabled),
[data-skin="apollo"] .apollo-money-strip a:hover {
    background: var(--ui-btn-outline-bg-hover);
    color: var(--ui-btn-outline-ink-hover);
}

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

[data-skin="apollo"] .apollo-screen button[type="submit"] {
    background: var(--ui-btn-primary-bg);
    border-color: transparent;
    color: var(--ui-btn-primary-ink);
}

[data-skin="apollo"] .apollo-screen table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

[data-skin="apollo"] .apollo-screen th {
    padding: 10px 11px;
    background: var(--color-sunk);
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink-label);
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-screen td {
    padding: 11px;
    border-bottom: 1px solid var(--color-line-soft);
    color: var(--color-ink-soft);
}

[data-skin="apollo"] .apollo-screen td:last-child {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--color-ink);
}

/*═════════════════════════════════════════════════════════
    ⑥ 바닥글
═════════════════════════════════════════════════════════*/

[data-skin="apollo"] .apollo-footer {
    margin-left: var(--apollo-chrome-offset);
    padding: 0;
    border-top: 1px solid var(--color-line);
    background: var(--color-deep);
    color: var(--color-ink-muted);
    transition: margin-left 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-skin="apollo"] .apollo-footer__inner {
    display: grid;
    /*
     * 세 칸의 **최소 너비 합이 화면보다 넓을 수** 있었습니다.
     * `230 + 150 + 230` 에 56px 틈 둘과 좌우 여백을 더하면 790px 인데, 768px
     * 화면에서는 왼쪽 레일 80px 을 뺀 688px 만 남습니다 — 고객지원 칸이 밖으로
     * 밀려 나가 **가로 스크롤**이 생겼습니다 (2026-09-07 확인).
     *
     * 칸 수를 박지 않고 `auto-fit` 에 맡깁니다. 자리가 좁으면 스스로 두 줄,
     * 한 줄로 접히므로 넘칠 최소 너비라는 것이 없어집니다.
     */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(24px, 4vw, 56px);
    max-width: 1440px;
    margin: 0 auto;
    padding: 42px 34px 34px;
}

[data-skin="apollo"] .apollo-footer__brand img {
    display: block;
    width: 142px;
    max-height: 74px;
    object-fit: contain;
}

[data-skin="apollo"] .apollo-footer__brand p,
[data-skin="apollo"] .apollo-footer__service p {
    max-width: 390px;
    margin: 13px 0 0;
    font-size: 12px;
    line-height: 1.75;
}

[data-skin="apollo"] .apollo-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

[data-skin="apollo"] .apollo-footer__links strong,
[data-skin="apollo"] .apollo-footer__service > strong {
    margin-bottom: 3px;
    color: var(--color-ink-strong);
    font-size: 12px;
    font-weight: 700;
}

[data-skin="apollo"] .apollo-footer__links a,
[data-skin="apollo"] .apollo-footer__service a {
    color: var(--color-ink-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color 150ms ease;
}

[data-skin="apollo"] .apollo-footer__links a:hover,
[data-skin="apollo"] .apollo-footer__service a:hover {
    color: var(--apollo-gold-deep);
}

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

[data-skin="apollo"] .apollo-footer__service > strong > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-up);
    box-shadow: 0 0 0 4px rgb(47 139 85 / 0.1);
}

[data-skin="apollo"] .apollo-footer__service a {
    display: inline-flex;
    margin-top: 14px;
    color: var(--apollo-gold-deep);
    font-weight: 700;
}

/*
 * 「메인 비주얼」 · 「FOOTER」 — the export's screen-reader landmarks.
 *
 * Every other skin loads the export's own `.d-none { display: none }`; Apollo
 * deliberately does not load those sheets, so the headings rendered as visible
 * Korean text above the banner. Clipped rather than removed: the element is a
 * landmark, and `display: none` would take it from a screen reader as well.
 */
[data-skin="apollo"] .d-none {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[data-skin="apollo"] .apollo-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 34px;
    border-top: 1px solid var(--color-line-soft);
    background: color-mix(
        in srgb,
        var(--color-deep) 96%,
        rgb(var(--t-veil-rgb, 0 0 0))
    );
}

[data-skin="apollo"] .apollo-footer__bottom small {
    display: block;
    flex: none;
    color: var(--color-ink-muted);
    font-size: 10px;
    letter-spacing: 0.02em;
}

/*═════════════════════════════════════════════════════════
    ⑦ 좁은 화면 — 기둥을 접고 모바일 머리띠를 세웁니다.
═════════════════════════════════════════════════════════*/

[data-skin="apollo"] .apollo-head-m,
[data-skin="apollo"] .apollo-drawer {
    display: none;
}

@media (min-width: 769px) and (max-width: 1170px) {
    [data-skin="apollo"] .apollo-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-skin="apollo"] .apollo-slot-games {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/*
 * ── 767 이지 768 이 아닙니다 ──────────────────────────────────────────────
 *
 * 스포츠 판의 오른쪽 장바구니는 `min-width: 768px` 에서 본문에 322px 을
 * 비워 둡니다. 여기가 `max-width: 768px` 이면 **정확히 768px 에서 둘 다**
 * 걸려서, 모바일 머리띠가 뜬 채로 오른쪽 322px 이 비어 있게 됩니다 — 화면
 * 너비의 42%입니다.
 *
 * 고치는 쪽은 여기입니다. `sports.css` 는 767 과 768 말고는 못 쓰게 검사가
 * 걸려 있고(`apollo-sports.spec.ts`), 그 두 값은 판이 스스로를 모바일로
 * 아는 기준(`matchMedia("(max-width: 767px)")`)과 맞춰 둔 것입니다. 껍데기도
 * 같은 기준을 씁니다.
 */
@media (max-width: 767px) {
    [data-skin="apollo"] .LeftContent,
    [data-skin="apollo"] .apollo-top {
        display: none;
    }

    [data-skin="apollo"] .site-main,
    [data-skin="apollo"] .apollo-notice,
    [data-skin="apollo"] .apollo-footer {
        margin-left: 0;
        max-width: 100%;
    }

    [data-skin="apollo"] .site-main {
        padding: 12px 12px 44px;
    }

    /* ── 모바일 머리띠 ─────────────────────────────────────────────────── */

    [data-skin="apollo"] .apollo-head-m {
        /*
         * 머리띠는 기본이 `display: none` 입니다(위 `.apollo-head-m,
         * .apollo-drawer` 묶음). **여기서 되살려야** 뜹니다.
         *
         * 앞서 이 규칙은 `display: flex` 로 되살리기와 줄 배치를 한꺼번에
         * 하고 있었는데, 배치를 안쪽 `__bar` 로 옮기면서 되살리기까지 같이
         * 사라졌습니다. 그 결과 휴대폰에서 **머리띠가 통째로 안 떴습니다** —
         * 메뉴도 로그인도 지갑 띠도 닿을 수 없었습니다.
         */
        display: block;
        position: sticky;
        top: 0;
        z-index: 40;
        background: var(--color-panel);
        border-bottom: 1px solid var(--color-line);
    }

    [data-skin="apollo"] .apollo-head-m__bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        height: 54px;
        padding: 0 8px;
    }

    /*
     * 로고는 **화면 가운데**입니다. 양옆 단추에 기대어 가운데를 잡으면 손님
     * 화면에서 왼쪽 40px 아이콘과 오른쪽 68px 로그인 알약의 너비가 달라
     * 14px 밀립니다 — 로그인하면 양쪽이 다 40px 이라 그때만 맞았습니다.
     */
    [data-skin="apollo"] .apollo-head-m .apollo-brand {
        position: absolute;
        left: 50%;
        translate: -50% 0;
        max-width: calc(100% - 140px);
    }

    /*
     * 아이콘 단추. 앞서는 「메뉴」와 잔액이 **글자 단추 둘**로 양끝에 있어서
     * 무게가 같았고, 어느 쪽이 길을 여는 것인지 눈이 못 갈랐습니다.
     */
    [data-skin="apollo"] .apollo-head-m__icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--color-ink-soft);
        cursor: pointer;
        transition:
            background 140ms ease,
            color 140ms ease;
    }

    [data-skin="apollo"] .apollo-head-m__icon:active {
        background: rgb(var(--apollo-gold-rgb) / 0.14);
        color: var(--color-gold);
    }

    [data-skin="apollo"] .apollo-head-m__enter {
        height: 34px;
        padding: 0 16px;
        border: 0;
        border-radius: 17px;
        background: var(--apollo-gold);
        color: var(--apollo-gold-ink);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    [data-skin="apollo"] .apollo-head-m .apollo-brand img {
        max-height: 30px;
        width: auto;
    }

    /* ── 지갑 띠 ───────────────────────────────────────────────────────────
     *
     * 「무조건 보유머니랑 포인트가 잘보여야해」 (2026-09-07).
     *
     * 머리띠 **아래 한 줄**로 늘 떠 있습니다. 단추 이름표에 숫자를 넣으면
     * 낱말을 붙일 자리가 없고, 게임 중인지도 말할 수 없습니다.
     */
    [data-skin="apollo"] .apollo-purse {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 6px;
        padding: 0 8px 8px;
    }

    [data-skin="apollo"] .apollo-purse > span {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
        padding: 7px 10px;
        border: 1px solid var(--color-line);
        border-radius: 10px;
        background: var(--color-base);
    }

    [data-skin="apollo"] .apollo-purse i {
        flex: none;
        color: var(--color-ink-muted);
        font-size: 11px;
        font-style: normal;
    }

    /* 돈은 금색 — 화면 어디서나 같습니다. */
    [data-skin="apollo"] .apollo-purse b {
        overflow: hidden;
        color: var(--color-gold);
        font-family: var(--font-numeric);
        font-size: 13.5px;
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        text-overflow: ellipsis;
    }

    [data-skin="apollo"] .apollo-purse__sync {
        display: grid;
        place-items: center;
        width: 36px;
        border: 1px solid var(--color-line);
        border-radius: 10px;
        background: var(--color-base);
        color: var(--color-ink-muted);
        cursor: pointer;
    }

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

    /* ── 서랍 ──────────────────────────────────────────────────────────────
     *
     * 덮개는 **방향만** 정합니다. 판이 부른 단추 쪽에서 나와야 합니다 —
     * 오른쪽 단추로 연 회원 패널이 맨 왼쪽에서 나오면서 오른쪽에 가림막만
     * 남던 것이 「우측 빈공간」이었습니다.
     */
    [data-skin="apollo"] .apollo-drawer {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        background: rgb(0 0 0 / 0.5);
        backdrop-filter: blur(2px);
    }

    [data-skin="apollo"] .apollo-drawer > * {
        display: flex;
        flex-direction: column;
        width: min(84vw, 320px);
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-panel);
    }

    [data-skin="apollo"] .apollo-drawer--member > * {
        margin-left: auto;
        border-left: 1px solid var(--color-line);
    }

    [data-skin="apollo"] .apollo-drawer--menu > * {
        border-right: 1px solid var(--color-line);
    }

    /* 판의 머리 — 로고 또는 이름, 그리고 닫기. 앞서는 나가는 길이 가림막을
       누르는 것뿐이라 판 안에는 아무 표시도 없었습니다. */
    [data-skin="apollo"] .apollo-sheetnav__top,
    [data-skin="apollo"] .apollo-member-card__top {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 54px;
        padding: 10px 12px 10px 16px;
        border-bottom: 1px solid var(--color-line);
        background: var(--color-panel);
    }

    [data-skin="apollo"] .apollo-sheetnav__top img {
        max-height: 26px;
        width: auto;
    }

    [data-skin="apollo"] .apollo-sheetnav__top button,
    [data-skin="apollo"] .apollo-member-card__top button {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--color-ink-muted);
        cursor: pointer;
    }

    [data-skin="apollo"] .apollo-sheetnav__list {
        padding: 6px 8px 20px;
    }

    [data-skin="apollo"] .apollo-drawer a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-ink-nav);
        text-decoration: none;
    }

    [data-skin="apollo"] .apollo-drawer a[aria-current="page"] {
        background: rgb(var(--apollo-gold-rgb) / 0.14);
        color: var(--color-gold);
    }

    /* ── 회원 패널 ─────────────────────────────────────────────────────── */

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

    /*
     * 돈과 포인트가 나란히. 앞서는 돈 하나뿐이었고 포인트는 「포인트전환」
     * 이라는 **링크**여서, 얼마인지는 그쪽으로 들어가 봐야 알았습니다.
     */
    [data-skin="apollo"] .apollo-member-card__purse {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 14px 16px;
    }

    /*
     * 한 판에 두 줄. 앞서 줄마다 테두리를 둘렀더니 **입력칸처럼** 보여서,
     * 읽는 값이 아니라 고칠 값 같았습니다. 테두리는 바깥에 한 번만 두르고
     * 안은 줄 사이 실선으로 가릅니다.
     */
    [data-skin="apollo"] .apollo-member-card__purse {
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: 12px;
        background: var(--color-base);
    }

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

    [data-skin="apollo"] .apollo-member-card__purse > div + div {
        border-top: 1px solid var(--color-line-soft);
    }

    [data-skin="apollo"] .apollo-member-card__purse dt {
        color: var(--color-ink-muted);
        font-size: 11.5px;
    }

    [data-skin="apollo"] .apollo-member-card__purse dd {
        margin: 0;
        overflow: hidden;
        color: var(--color-gold);
        font-family: var(--font-numeric);
        font-size: 17px;
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        text-overflow: ellipsis;
    }

    [data-skin="apollo"] .apollo-member-card nav {
        padding: 0 8px;
        border-top: 1px solid var(--color-line-soft);
        padding-top: 8px;
    }

    /*
     * 서랍 안에서는 위아래로 선 목록이라, 데스크톱의 알약 단추 모양을 그대로
     * 쓰면 혼자 떠 있는 상자가 됩니다. 옆의 마이페이지·포인트전환과 같은
     * 줄 모양을 유지하되 금색으로 칠해 눈에 먼저 들어오게 합니다.
     */
    [data-skin="apollo"] .apollo-member-card nav .apollo-partner {
        height: auto;
        justify-content: flex-start;
        border: 0;
        border-radius: 9px;
        background: rgb(var(--apollo-gold-rgb) / 0.14);
        color: var(--apollo-gold-deep);
        font-weight: 800;
    }

    [data-skin="apollo"] .apollo-member-card nav .apollo-partner .apollo-icon {
        color: var(--apollo-gold-deep);
    }

    [data-skin="apollo"] .apollo-member-card__guest {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    [data-skin="apollo"] .apollo-member-card__guest > p {
        margin: 0;
        padding: 18px 16px 4px;
        color: var(--color-ink-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    [data-skin="apollo"] .apollo-member-card__logout,
    [data-skin="apollo"] .apollo-member-card__guest > button {
        min-height: 46px;
        margin: 10px 16px 0;
        border: 1px solid var(--color-line);
        border-radius: 12px;
        background: var(--color-base);
        color: var(--color-ink);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    /*
     * 로그아웃을 바닥으로 밀지 않습니다. 링크가 셋뿐이라 `margin-top: auto`
     * 로 붙이면 그 사이에 230px 남짓이 텅 비고, 단추만 아래에 홀로 떠
     * 있습니다 — 내용이 위에 모여 있는 편이 낫습니다.
     */
    /*
     * 나가는 단추는 흐리면 안 됩니다. 옅은 테두리에 속이 빈 채로 두었더니
     * **꺼진 단추처럼** 보였습니다 — 누를 수 있는 것과 없는 것이 같아 보이는
     * 것이 이 화면에서 가장 나쁩니다.
     */
    [data-skin="apollo"] .apollo-member-card__logout {
        margin: 16px 16px 24px;
        border-color: rgb(var(--apollo-gold-rgb) / 0.45);
        background: rgb(var(--apollo-gold-rgb) / 0.1);
        color: var(--color-gold);
    }

    [data-skin="apollo"] .apollo-member-card__enter {
        border-color: transparent;
        background: var(--apollo-gold);
        color: var(--apollo-gold-ink);
    }

    /* 넷은 좁습니다 — 둘로 줄이면 딱지가 읽을 만한 크기로 남습니다. */
    [data-skin="apollo"] :is(#main, .apollo-screen) :is(.m_casino_area, .m_slot_area) li {
        width: 50%;
        padding: 0 6px 6px 0;
    }

    [data-skin="apollo"] #main .main_visual {
        height: auto;
        min-height: 0;
        aspect-ratio: 768 / 320;
        margin-bottom: 26px;
        border-radius: 13px;
    }

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

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

    [data-skin="apollo"] .apollo-catalogue__head h2 {
        font-size: 15px;
    }

    [data-skin="apollo"] .apollo-quick {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 32px;
    }

    [data-skin="apollo"] .apollo-quick__card {
        min-height: 94px;
        padding: 15px;
    }

    [data-skin="apollo"] .apollo-slot-detail {
        padding: 17px;
        border-radius: 13px;
    }

    [data-skin="apollo"] .apollo-slot-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    [data-skin="apollo"] .apollo-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 20px 26px;
    }

    [data-skin="apollo"] .apollo-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px 22px;
    }

    [data-skin="apollo"] .apollo-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* ---------------------------------------------------------------------------
   `.apollo-toast` 가 여기 있었습니다 (2026-09-17 에 없앴습니다).

   2026-09-07 에 운영자가 「특정 스킨은 맨밑으로 메세지가 가서 안보이고
   그러거든」이라고 했고, 그때 답이 **이 스킨에만** 토스트를 만들어 다는
   것이었습니다. 위에 적혀 있던 「나머지 넷은 이미 띄우고 있었습니다」가 그
   답의 전제였는데, 그 넷도 전부 `bottom` 이었습니다 — 아테나 28px · 헤라
   40px · 포세이돈 40px · 제우스 40px. 다섯이 나란히 같은 자리에 틀려 있었고,
   같은 지적이 2026-09-17 에 다시 왔습니다 (「모든 유저페이지 다 수정해줘
   우우상단 토스트 자리로」).

   그래서 스킨마다 한 벌이던 것을 한 벌로 합쳤습니다 —
   `components/screen-toast.tsx` 가 오른쪽 위에 그립니다. 모양이 인라인이라
   이 시트에 남길 것이 없습니다.
--------------------------------------------------------------------------- */