/*---------------------------------------------------------
    아테나 — 카지노 · 슬롯 로비.

    ── 밴더 카드는 이 시트에 없습니다 (2026-09-10) ────────

        「그리고 카지노,슬롯 메뉴에서도 메인페이지처럼 같은 크기 같은
         디자인 카드로 넣어주라」

    여기에 3 : 4 세로틀의 밴더 타일이 있었습니다. 대문은 953 : 661 가로
    카드였으므로 **같은 원장 한 벌에 다룸이 둘**이었고, 그래서 고침도 둘씩
    필요했습니다 — 확대 오버가 두 팔을 깎는 것을 대문에서 걷어낸 날
    (「모델 좌우 팔 최대한 잘린느낌 안들게 해야해」) 이쪽은 그대로였고,
    마크를 높이로 재워 글자를 두 번 줄이던 셈도 두 곳에서 따로 고쳤습니다
    (2026-09-09). 사본이 갈라지는 데 하루도 안 걸립니다.

    그래서 타일을 없애고 **대문 카드를 부릅니다.** 카드의 규칙은 전부
    `home.css` 의 밴더 구획에 있고, 그 시트는 전역이라 이 길에서도 실립니다.
    부품 쪽도 하나입니다 — `screens/casino-lobby-view.tsx` 의
    `AthenaVendorGrid` 를 세 화면이 부르고, 격자가 그 부품 안에 있으므로
    **로비가 자기 칸 수를 적을 자리가 없습니다.** 그것이 요청의 「같은
    크기」입니다.

    남은 것은 로비의 나머지입니다: 머리그림, 입금·출금 띠, 열린 밴더의 게임
    격자와 검색칸, 그리고 아래쪽의 옛 대문 조각들.

    ── 게임 판은 밴더 카드가 아닙니다 ────────────────────

    아래 `.ath-lobby-card*` 는 이제 **슬롯 게임 딱지 하나**를 그립니다.
    1 : 1 틀에 확대 오버이고, 그 확대가 여기서는 안전합니다 — 사람이 아니라
    그림이라 자를 팔이 없고, 두 축으로 다 덮으므로 세로로 들면 아래에 바탕색
    띠가 생깁니다. 들림이 맞는 것은 판이 틀보다 세로로 넘치는 밴더 쪽이고,
    그쪽은 이제 `home.css` 가 그립니다.
---------------------------------------------------------*/

/*
    ── 로비만 넓습니다 (2026-09-08 운영자 요청) ────────────────

        「페이지 가로 크기좀 늘려줘 여백도 많아 80뱃 보면 안그러잖아」

    `.ath-screen` 은 1180px 입니다. 1440 화면에서 좌우로 130px 씩 남고, 카드가
    넉 장 서는 자리에서 그 여백이 화면의 18% 입니다. 참고 사이트는 같은 폭에서
    1400px 가까이 씁니다.

    그런데 그 1180 은 **화면 스물셋이 함께 쓰는 수**입니다. 입금 서식과 표까지
    1500px 로 벌리면 이름과 입력칸이 화면 양 끝으로 갈라져 읽기 어려워집니다 —
    서식이 좁은 것은 실수가 아니라 판단입니다.

    그래서 **로비를 담은 화면만** 넓힙니다. `:has()` 로 안을 보고 정하므로
    스킨 어느 화면도 제 폭을 따로 적을 필요가 없습니다.
*/
[data-skin="athena"] .ath-screen:has(.ath-lobby) {
    max-width: 1560px;
    padding: 0 24px;
}

/*
    ── 폰에서 카드가 10px 좁았습니다 (2026-09-10) ─────────

    「같은 크기」는 격자 하나로 끝나지 않습니다. 같은 격자가 같은 폭의 카드를
    내려면 **담는 자리도 같아야** 합니다: 넓은 화면에서는 둘 다 1560 / 24 라
    1920 에서 291.19px 로 똑같이 나왔는데, 폰에서 대문은 여백을 14px 로
    좁히고(`home.css` 의 767 띠) 이쪽은 24px 를 그대로 들고 있었습니다.
    390 에서 대문 176px · 로비 166px — 두 장을 나란히 놓고 보지 않으면 아무도
    모르는 차이이고, 그래서 배포된 화면을 재서야 나왔습니다.

    대문 쪽 값을 따릅니다. 14px 는 이 격자를 위해 고른 수이고(스킨 기본은
    16px), 이제 그 격자를 세 화면이 함께 쓰므로 그 수도 함께 씁니다.
    `athena-home.spec.ts` 가 두 시트의 폭 제한과 여백을 띠마다 견줍니다.
*/
@media (max-width: 767px) {
    [data-skin="athena"] .ath-screen:has(.ath-lobby) {
        padding: 0 14px;
    }
}

[data-skin="athena"] .ath-lobby {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/*
    머리그림은 폭 제한 **밖**입니다. 시트가 1180px 로 가운데 모여 있어도
    배너는 화면을 가로지릅니다 — 「그 아래 배너」라는 뼈대가 그것입니다.
*/
[data-skin="athena"] .ath-screen.ath-lobby-hero {
    max-width: none;
    margin: 0;
    padding: 0;
}

[data-skin="athena"] .ath-lobby-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 364;
    max-height: 420px;
    overflow: hidden;
    border-bottom: 1px solid var(--color-line-soft);
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-lobby-visual {
        aspect-ratio: 768 / 320;
        max-height: none;
    }
}

/*
    ── 띠 자체의 규칙이 있어야 합니다 (2026-09-07) ────────

    마크업(`components/visual-banner.tsx`)은 플랫폼 것이고 클래스도
    플랫폼 것입니다 — `.visual_list` · `.visual_item` · `.visual_flat`.
    헤라는 그것을 `hera_v1/css/visual-banner.css` 로 칠하는데 아테나는 그
    시트를 안 싣습니다. 규칙이 없으면 그림이 **원래 크기로** 놓이고, 배포된
    화면에서 1600px 그림 오른쪽에 검은 띠가 남았습니다.

    슬라이드는 서로 겹쳐 놓고 켜진 것만 보입니다. 그래야 넘어갈 때 높이가
    안 바뀝니다.
*/
[data-skin="athena"] .ath-lobby-visual > section {
    position: absolute;
    inset: 0;
}

[data-skin="athena"] .ath-lobby-visual .visual_list {
    position: absolute;
    inset: 0;
}

[data-skin="athena"] .ath-lobby-visual .visual_item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

[data-skin="athena"] .ath-lobby-visual .visual_item.active {
    opacity: 1;
    pointer-events: auto;
}

[data-skin="athena"] .ath-lobby-visual .visual_flat,
[data-skin="athena"] .ath-lobby-visual .visual_flat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 폰에서는 잘라내지 않습니다 — 세로 그림에 글자가 박혀 있습니다. */
@media (max-width: 767px) {
    [data-skin="athena"] .ath-lobby-visual .visual_flat img {
        object-fit: contain;
    }
}

[data-skin="athena"] .ath-lobby-visual .visual_link {
    position: absolute;
    inset: 0;
}

/*
 * 배너 페이지네이션.
 *
 * 기존 7px 주황 점은 밝은 배너 위에서 거의 보이지 않았습니다. 반투명 검정
 * 받침을 먼저 깔고, 현재 장은 점이 아니라 길쭉한 막대로 표시합니다.
 */
[data-skin="athena"] .ath-lobby-visual .visual_btns {
    position: absolute;
    right: 24px;
    bottom: 16px;
    left: auto;
    z-index: 2;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.46);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    transform: none;
}

[data-skin="athena"] .ath-lobby-visual .btn_circle {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    cursor: pointer;
    transition:
        width 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

[data-skin="athena"] .ath-lobby-visual .btn_circle.active {
    width: 28px;
    background: var(--t-money, #d4a44e);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-lobby-visual .visual_btns {
        right: 12px;
        bottom: 10px;
        gap: 6px;
        padding: 6px 9px;
    }

    [data-skin="athena"] .ath-lobby-visual .btn_circle.active {
        width: 22px;
    }
}

[data-skin="athena"] .ath-lobby-visual .d-none {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*---------------------------------------------------------
    로비 띠 — **보유머니와 그것을 다시 읽는 조작.**

    넓은 화면에서는 머리띠가 같은 것을 이고 있으므로 안 그립니다.

    ── 여기 입금하기·출금하기가 있었습니다 (2026-09-12) ───

        「메인페이지에 입금하기가 두 개 있다거나 이런 거 전면 개선 필요해.」

    사실이었습니다. 폰의 대문에서 이 띠 바로 아래 `ath-command-dock` 이 여섯
    칸을 세우고 그 첫 둘이 입금하기·출금하기라, 390 에서 같은 길 넷이 94px
    사이에 서 있었습니다(실측: 알약 y=245, 칸 y=339).

    **지운 것은 이 띠의 링크 둘**이고, 도크가 아닙니다. 도크는 손님에게도
    그려지고 손님이 눌러 로그인 상자가 뜨는 것이 일부러 그런 것이라, 도크에서
    빼면 로그인 안 한 사람의 대문에 입금하기가 아예 없어집니다. 반대로 이
    띠의 링크 둘은 어디서나 두 번째 사본입니다 — 대문에서는 도크가, 카지노·
    슬롯 로비에서는 계정 서랍의 빠른 단추가 한 번 누르는 거리에 있습니다.
    까닭 전부는 `skins/athena/screens/casino-tab-view.tsx` 머리말에.

    그 자리에 새로고침이 들어왔습니다. 1280 아래에서 보유머니가 화면에
    적히는 곳이 여기 하나인데 그 수를 다시 읽는 길이 없었습니다.

    조작이 수 **옆**에 붙습니다. `space-between` 으로 양 끝에 두면 768 에서
    둘 사이가 600px 벌어져, 무엇을 새로 고치는 단추인지가 자리로 안
    읽힙니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-lobby-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--color-line-head);
}

@media (min-width: 1280px) {
    [data-skin="athena"] .ath-lobby-bar {
        display: none;
    }
}

[data-skin="athena"] .ath-lobby-balance {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-lobby-balance-label {
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-lobby-balance-value {
    font-family: var(--font-numeric);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-lobby-balance-unit {
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
    격자.
---------------------------------------------------------*/

/*
    밴더 격자가 여기 있었습니다 — `.ath-lobby-grid-casino`(216px) 와
    `.ath-lobby-grid-slot`(184px). 두 로비가 대문 카드를 쓰게 되면서
    `home.css` 의 `.ath-vendor-grid` 하나로 갔습니다: 칸 수를 로비가 따로
    적으면 카드 폭이 대문과 갈리고, 그것이 요청이 없애라고 한 바로 그
    차이입니다. 남은 것은 게임 딱지 격자입니다.
*/
[data-skin="athena"] .ath-lobby-grid {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="athena"] .ath-lobby-grid-games {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-lobby-grid {
        gap: 10px;
    }

    [data-skin="athena"] .ath-lobby-grid-games {
        grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    }
}

/*---------------------------------------------------------
    딱지 — 열린 밴더의 게임 하나.

    밴더 타일도 이 이름을 쓰고 있었고, 지금은 게임뿐입니다 (머리말).
---------------------------------------------------------*/

[data-skin="athena"] .ath-lobby-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-line-tile);
    border-radius: var(--ath-corner, 2px);
    background: var(--color-panel);
    color: inherit;
    font-family: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

[data-skin="athena"] .ath-lobby-card:hover:not(:disabled) {
    border-color: var(--color-brand);
}

/*
    그림 자리. **틀은 고정이고 안의 그림만 움직입니다.**

    비를 여기서 안 적습니다. 이 틀을 쓰는 것이 게임 딱지 하나뿐이고 그쪽이
    `.ath-lobby-game-art` 로 1 : 1 을 적으므로, 여기 3 : 4 를 남겨 두면
    **한 번도 이겨 본 적 없는 값**이 시트에 남습니다 — 밴더 타일이 쓰던
    값이었습니다.
*/
[data-skin="athena"] .ath-lobby-card-art {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--color-sunk);
}

/*
    ── 딱지 그림만입니다 (2026-09-07) ────────────────────

    처음에 `.ath-lobby-card-art > img` 로 썼더니 **점검 딱지에도** 걸렸습니다.
    둘 다 같은 부모 아래의 `img` 이고, 이 선택자가 그쪽 규칙보다 명시도가
    높아서 `inset: 0` · `height: 100%` · `object-position: center top` 이
    이겼습니다 — 배포된 화면에서 밴더 마크가 카드 위쪽에 카드만 한 크기로
    늘어나 떠 있었습니다(그때는 마크도 이 틀 안이었습니다).

    표시가 없는 것이 게임 그림입니다(딱지에는 클래스가 있습니다). 그래서
    「표시가 없는 것」으로 고릅니다.
*/
[data-skin="athena"] .ath-lobby-card-art > img:not(.ath-lobby-card-stop) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
    transition: transform 0.35s ease;
}

/*
    게임 판은 확대로 남습니다. 사람이 아니라 그림이라 자를 팔이 없고, 1 : 1
    틀에 가로로 긴 섬네일이 `cover` 로 들어가는 쪽이라 세로로 들면 아래에
    바탕색 띠가 생깁니다.

    밴더 쪽은 반대였습니다. 판이 틀보다 세로로 넘치므로 들림이 안전하고
    확대는 두 팔 끝을 깎았습니다 — 이 자리에 `scale(1.045)` 가 있었고
    240px 타일에서 한쪽이 5.4px, 판의 15.4열이었습니다 (2026-09-09,
    「모델 좌우 팔 최대한 잘린느낌 안들게 해야해」). 그 카드는 이제
    `home.css` 가 그리고, 오버는 거기서도 세로 이동입니다.
*/
[data-skin="athena"] .ath-lobby-card:hover .ath-lobby-game-art
    > img:not(.ath-lobby-card-stop) {
    transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
    [data-skin="athena"] .ath-lobby-card-art > img {
        transition: none;
    }

    [data-skin="athena"] .ath-lobby-card:hover .ath-lobby-game-art
        > img:not(.ath-lobby-card-stop) {
        transform: none;
    }
}

[data-skin="athena"] .ath-lobby-card-art > img.ath-lobby-card-stop {
    position: absolute;
    inset: auto;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: 42%;
    object-fit: contain;
    transform: none;
}

[data-skin="athena"] .ath-lobby-off {
    cursor: not-allowed;
}

[data-skin="athena"] .ath-lobby-off .ath-lobby-card-art > img {
    filter: grayscale(1);
    opacity: 0.5;
}

/*---------------------------------------------------------
    슬롯 — 밴더를 고르면 열리는 게임 판.
---------------------------------------------------------*/

[data-skin="athena"] .ath-lobby-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 0 0;
    border-top: 1px solid var(--color-line-head);
}

[data-skin="athena"] .ath-lobby-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/*
    ── 열린 밴더의 마크도 판의 비로 섭니다 (2026-09-10) ───────

    `max-height: 28px` 이었고, 배포된 화면에서 폭 45px 로 서 있었습니다.
    카드가 고친 것과 **같은 셈**입니다: 마크 원장은 스물두 장 다 217 × 135
    이고 그 안에서 글자가 판 폭의 41~91% 뿐이라, 상자를 높이로 재우면 글자가
    그 여백만큼 또 작아집니다 — 28px 짜리 상자 안의 글자는 14px 안팎입니다.

    그래서 카드의 마크와 같이(`home.css` 의 `.ath-vendor-mark`) **폭으로**
    재우고 높이는 판의 비가 정합니다. 104 × 64.7 이고 글자는 그 안에서
    30px 안팎이 됩니다.

    `aspect-ratio` 가 그림의 타고난 비를 이기려면 한 축이 `auto` 여야 하므로
    `height: auto` 를 같이 적습니다. 윤곽도 카드와 같은 이유로 겹을 따릅니다 —
    마크 글자는 대개 흰색이고 이 머리글은 화이트 · 모래 조합에서 흰 바탕
    위입니다.
*/
[data-skin="athena"] .ath-lobby-detail-logo {
    width: 104px;
    height: auto;
    aspect-ratio: 217 / 135;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 1px rgb(var(--t-veil-rgb, 0 0 0) / 0.85));
}

[data-skin="athena"] .ath-lobby-detail-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-lobby-search {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 420px;
}

/*
    ── 돋보기가 300 × 150 으로 서 있었습니다 (2026-09-10) ─────

    카드를 합치고 재던 중에 나온 것이고, 카드와는 무관한 오래된 결함입니다.

    이 칸의 `svg` 에는 `width`/`height` 가 없고 `viewBox` 만 있습니다
    (`screens/slot-lobby-view.tsx`). 그런 `svg` 의 기본 크기는 **300 × 150**
    이고, Tailwind preflight 가 `display: block` 을 주므로(`chrome.css` 의 그
    자리) 칸 안에서 그 크기로 섭니다 — 배포된 화면에서 돋보기 하나가 150px
    높이로 떠 있고 입력칸이 그 아래로 밀려 있었습니다. 이 `svg` 를 재우는
    규칙이 이 시트에 **한 번도 없었습니다.**

    칸이 원래 한 줄이었어야 한다는 증거는 바로 아래에 있습니다: 지우기 단추가
    `flex: none` 입니다. 그 칸에 `display: flex` 가 없었을 뿐입니다.

    입력칸은 `screens.css` 에서 `width: 100%` 를 받습니다. 그것이 flex 기준
    폭이 되므로 `min-width: 0` 이 없으면 돋보기만큼 넘칩니다.
*/
[data-skin="athena"] .ath-screen .ath-lobby-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 2px;
}

[data-skin="athena"] .ath-screen .ath-lobby-search-field > svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-screen .ath-lobby-search-field > input {
    flex: 1 1 auto;
    min-width: 0;
}

[data-skin="athena"] .ath-lobby-search-clear {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;
}

[data-skin="athena"] .ath-lobby-search-count {
    flex: none;
    font-family: var(--font-numeric);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-brand);
}

[data-skin="athena"] .ath-lobby-back {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

[data-skin="athena"] .ath-lobby-back:hover {
    color: var(--color-ink);
}

/*
    게임 딱지는 정사각이고 이름이 그림 **아래** 옵니다.

    이 규칙은 처음부터 그렇게 적혀 있었는데(위쪽 `border-top` 이 그 증거입니다)
    마크업이 이름을 이 정사각 틀 **안**에 두고 있었습니다. 틀은 `overflow:
    hidden` 이고 섬네일이 `inset: 0` 로 틀을 덮으므로 이름은 그림 뒤에 깔려
    한 번도 보이지 않았습니다 — 2026-09-10 에 마크업 쪽을 고쳤습니다
    (`screens/slot-lobby-view.tsx`).
*/
[data-skin="athena"] .ath-lobby-game-art {
    aspect-ratio: 1 / 1;
}

[data-skin="athena"] .ath-lobby-game-title {
    display: block;
    padding: 8px 10px;
    border-top: 1px solid var(--color-line-soft);
    font-size: 12px;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-skin="athena"] .ath-lobby-note {
    padding: 56px 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-lobby-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0 0;
}

[data-skin="athena"] .ath-lobby-pager button {
    min-width: 78px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: none;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

[data-skin="athena"] .ath-lobby-pager button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

[data-skin="athena"] .ath-lobby-pager-state {
    font-family: var(--font-numeric);
    font-size: 13px;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
}

/*---------------------------------------------------------
  대문.

  ── 짜임 (2026-09-07 운영자 요청) ────────────────────────

      「헤더 / 배너 / 스포츠 카지노 슬롯 등 카드 / 인기경기 /
       카지노 게임들 / 슬롯 게임들
       나는 이런 레이아웃 구조를 말하는거야 색감은 어차피 우린
       다중색상 지원하는 웹이라 상관없잖아」

  색이 아니라 순서와 덩어리입니다. 그래서 팔레트는 한 줄도 안 건드립니다 —
  아래 값은 전부 `--color-*` 이고, 조합을 바꾸면 이 화면이 그대로 따라갑니다.
---------------------------------------------------------*/

/*---------------------------------------------------------
  ② 아이콘 줄 — 배너 바로 아래.

  회원이 매일 누르는 여섯 곳입니다. 갈래 카드보다 위에 두는 까닭은, 이미
  들어와 있는 사람에게는 「어디로 갈까」보다 「충전하고 확인하기」가 먼저이기
  때문입니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-home-icons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

[data-skin="athena"] .ath-home-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 18px 10px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--ath-corner, 2px);
    background: var(--color-panel);
    text-decoration: none;
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease;
}

[data-skin="athena"] .ath-home-icons a:hover {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-panel));
}

[data-skin="athena"] .ath-home-icons img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

[data-skin="athena"] .ath-home-icons strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-home-icons span {
    font-family: var(--font-numeric, inherit);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
  ③ 갈래 카드 다섯 — **그림이 있습니다.**

  앞서는 글자만으로 넉 칸을 그렸고, 운영자가 포세이돈을 가리키며 「이미지
  있고 얼마나 깔끔해」라고 했습니다. 맞습니다 — 대문에서 이 자리는 화면의
  얼굴인데 글자만 놓으면 설정 화면처럼 보입니다.

  세로 카드입니다. 그림이 세로로 길게 짜여 있어(원본의 `img_game_*`) 가로로
  누이면 가운데만 남습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-home-gates {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 30px;
}

[data-skin="athena"] .ath-home-gates a {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--color-line);
    border-radius: var(--ath-corner, 2px);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.16s ease;
}

[data-skin="athena"] .ath-home-gates a:hover {
    border-color: var(--color-brand);
}

[data-skin="athena"] .ath-home-gates img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease;
}

[data-skin="athena"] .ath-home-gates a:hover img {
    transform: scale(1.05);
}

/*
  글자는 그림 위에 얹힙니다. 밑에서 올라오는 검정 그러데이션을 깔아, 그림이
  밝든 어둡든 글자가 읽힙니다 — 조합이 바뀌어도 이 자리는 그림이 정하므로
  팔레트 색을 안 씁니다.
*/
[data-skin="athena"] .ath-home-gate-say {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 44px 16px 16px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.72) 62%,
        rgba(0, 0, 0, 0.88) 100%
    );
}

[data-skin="athena"] .ath-home-gate-say em {
    font-family: var(--font-numeric, inherit);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.66);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-home-gate-say strong {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 1023px) {
    [data-skin="athena"] .ath-home-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [data-skin="athena"] .ath-home-gates {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-home-icons img {
        width: 28px;
        height: 28px;
    }
}

/*---------------------------------------------------------
  구획과 제목줄.
---------------------------------------------------------*/

[data-skin="athena"] .ath-home-part {
    margin: 0 0 32px;
}

[data-skin="athena"] .ath-home-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 13px;
}

[data-skin="athena"] .ath-home-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-home-head a {
    flex: none;
    font-size: 12px;
    color: var(--color-ink-muted);
    text-decoration: none;
}

[data-skin="athena"] .ath-home-head a:hover {
    color: var(--color-brand);
}

/*---------------------------------------------------------
  ③ 인기경기.

  카탈로그만 있는 대문은 게임사 목록입니다. 경기가 한 줄 있으면 **지금 무슨
  일이 벌어지는지**가 보이고, 그것이 참고 사이트와 우리 대문이 갈리던 가장 큰
  자리였습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-home-matches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

[data-skin="athena"] .ath-home-match {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--ath-corner, 2px);
    background: var(--color-panel);
    text-decoration: none;
    transition: border-color 0.16s ease;
}

[data-skin="athena"] .ath-home-match:hover {
    border-color: var(--color-brand);
}

[data-skin="athena"] .ath-home-match-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-home-match-head img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

[data-skin="athena"] .ath-home-match-head em {
    flex: 1 1 auto;
    min-width: 0;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-home-match-head b {
    flex: none;
    font-family: var(--font-numeric, inherit);
    font-weight: 500;
}

[data-skin="athena"] .ath-home-match-teams {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14px;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-home-match-teams > span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-home-match-teams img {
    flex: none;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* 「vs」 는 두 팀 **사이**의 표시라 왼쪽 엠블럼 자리만큼 들여 씁니다. */
[data-skin="athena"] .ath-home-match-teams i {
    padding-left: 3px;
    font-style: normal;
    font-size: 10px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-home-match-odds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 2px;
}

[data-skin="athena"] .ath-home-match-odds > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--color-line-soft);
    border-radius: 999px;
    font-size: 12px;
}

[data-skin="athena"] .ath-home-match-odds em {
    font-style: normal;
    color: var(--color-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-home-match-odds b {
    font-family: var(--font-numeric, inherit);
    color: var(--color-ink);
}

/*---------------------------------------------------------
  ④⑤ 밴더 — **가로 카드**입니다.

  세로 타일이 스무 장 서면 그것은 목록입니다. 가로 카드는 한 장이 넓어 로고와
  사람이 나란히 놓이고, 줄마다 넉 장이면 눈이 한 번에 훑습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-home-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/*
  ── 로고도 얼굴도 안 보이던 까닭 (2026-09-08) ────────────────

      「카지노나 슬롯은 로고나 얼굴같은거 제대로 보이지도 않아」

  둘 다 **자리가 모자랐습니다.**

  그림 칸이 카드의 58% 폭 × 128px 였습니다. 가로로 긴 칸(비 1.23)에 세로로
  긴 사람(비 0.75)을 `cover` 로 넣으면 좌우가 크게 잘리고 남는 것은 가로
  띠 하나입니다 — 얼굴이 아니라 얼굴의 일부가 보였습니다.

  칸을 **좁고 높게** 바꿉니다: 46% × 176px 이면 비가 0.9 라 원본에 가깝고,
  잘리는 폭이 절반으로 줄어 사람이 사람으로 보입니다.

  로고는 28px 이었습니다. 카드가 넓어졌으니 40px 까지 줍니다 — 밴더 마크는
  대개 가로로 긴 글자라 높이보다 폭이 먼저 차고, 높이를 올려야 그 폭이
  실제로 쓰입니다.
*/
[data-skin="athena"] .ath-home-card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 176px;
    padding: 0;
    border: 1px solid var(--color-line-tile, var(--color-line));
    border-radius: var(--ath-corner, 2px);
    background: var(--color-panel);
    color: inherit;
    font-family: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.16s ease;
}

[data-skin="athena"] .ath-home-card:hover:not(:disabled) {
    border-color: var(--color-brand);
}

/*
  사람은 오른쪽 절반입니다. 왼쪽에서 바탕색이 스며들게 해서 로고가 사람 위에
  겹치지 않고도 한 장으로 보입니다.
*/
[data-skin="athena"] .ath-home-card-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    overflow: hidden;
}

[data-skin="athena"] .ath-home-card-art > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 위쪽 8% 에서 자릅니다 — 정수리를 조금 남기고 얼굴을 다 담는 자리. */
    object-position: center 8%;
    transform: scale(1);
    transition: transform 0.35s ease;
}

[data-skin="athena"] .ath-home-card:hover .ath-home-card-art > img {
    transform: scale(1.05);
}

[data-skin="athena"] .ath-home-card-art::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 왼쪽만 덮습니다. 칸이 좁아졌으므로 덮는 폭도 함께 줄입니다 —
       안 줄이면 사람의 절반이 바탕색에 잠깁니다. */
    background: linear-gradient(
        90deg,
        var(--color-panel) 0%,
        color-mix(in srgb, var(--color-panel) 45%, transparent) 34%,
        transparent 66%
    );
    pointer-events: none;
}

[data-skin="athena"] .ath-home-card-say {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 58%;
    padding: 0 0 0 20px;
}

[data-skin="athena"] .ath-home-card-say > img {
    max-width: 100%;
    max-height: 40px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    /* 밴더가 준 마크라 색은 안 건드립니다 — 가장자리만 남깁니다. */
    filter: drop-shadow(0 0 1px rgb(var(--t-veil-rgb, 0 0 0) / 0.28));
}

[data-skin="athena"] .ath-home-card-say em {
    font-style: normal;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-home-card-say b {
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--color-raise);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink-muted);
    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

[data-skin="athena"] .ath-home-card:hover .ath-home-card-say b {
    background: var(--color-brand);
    color: var(--t-accent-ink, #fff);
}

[data-skin="athena"] .ath-home-card.ath-lobby-off .ath-home-card-art > img {
    filter: grayscale(1) brightness(0.7);
}

/*---------------------------------------------------------
  더 보기.
---------------------------------------------------------*/

[data-skin="athena"] .ath-home-more {
    display: block;
    margin: 16px auto 0;
    min-height: 34px;
    padding: 0 22px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: none;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}

[data-skin="athena"] .ath-home-more:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/*---------------------------------------------------------
  접히는 폭 — 1023 · 767 (`table-cards.ts` 의 그 셋 중 둘).
---------------------------------------------------------*/

@media (max-width: 1023px) {
    [data-skin="athena"] .ath-home-grid,
    [data-skin="athena"] .ath-home-matches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-home-grid,
    [data-skin="athena"] .ath-home-matches,
        [data-skin="athena"] .ath-home-card {
        height: 132px;
    }
}