/*
 * 아테나 대문 — 그리고 밴더 카드.
 *
 * 빠른메뉴는 도크, 인기경기는 스코어보드입니다 — 같은 사각 카드 문법을 네 번
 * 반복하지 않되, **한 종류의 자산에는 한 가지 다룸**이라 밴더는 어디서나 한
 * 장의 카드입니다 (아래 밴더 구획 머리말). 색은 전부 테마 토큰에서 옵니다.
 *
 * 이름이 `home.css` 인데 밴더 구획은 **세 화면이 함께 씁니다** — 대문과
 * 카지노 로비와 슬롯 로비. 그 구획이 여기 있는 것은 자리가 아니라 규율입니다:
 * 카드의 규칙이 한 시트에만 있어야 로비가 「같은 값으로 고쳐 둔 사본」을
 * 가질 수가 없습니다. 시트가 전역이라(`skins/assets.ts`) 세 길에서 다 실리고,
 * 부품 쪽의 같은 약속은 `screens/casino-lobby-view.tsx` 가 지킵니다.
 */

[data-skin="athena"] .ath-screen.ath-home {
    max-width: 1560px;
    margin-top: 28px;
    padding-inline: 24px;
}

/* 빠른메뉴: 카드 여섯 장이 아니라 하나의 명령 도크. */
[data-skin="athena"] .ath-command-dock {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 52px;
    padding: 1px;
    border: 1px solid var(--color-line-soft);
    border-radius: 18px;
    background: var(--color-line-soft);
    overflow: hidden;
}

[data-skin="athena"] .ath-command-dock a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--color-panel);
    color: var(--color-ink);
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

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

[data-skin="athena"] .ath-command-icon {
    display: grid;
    flex: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-brand) 24%, var(--color-line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-panel));
    color: var(--color-brand);
    box-shadow: inset 0 1px 0 rgb(var(--t-veil-rgb, 255 255 255) / 0.08);
    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

[data-skin="athena"] .ath-command-dock a:hover .ath-command-icon {
    background: var(--color-brand);
    color: var(--t-accent-ink, #fff);
    transform: translateY(-2px);
}

[data-skin="athena"] .ath-command-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
}

[data-skin="athena"] .ath-command-copy strong {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

[data-skin="athena"] .ath-command-copy small {
    margin-top: 4px;
    font-family: var(--font-numeric);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    color: var(--color-ink-muted);
}

/* 공통 제목은 카드가 아니라 편집 지면의 장 제목처럼 보입니다. */
[data-skin="athena"] .ath-editorial-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

[data-skin="athena"] .ath-editorial-head > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[data-skin="athena"] .ath-editorial-head small {
    font-family: var(--font-numeric);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-brand);
}

[data-skin="athena"] .ath-editorial-head h2 {
    margin: 0;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 760;
    letter-spacing: -0.04em;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-editorial-head > a {
    padding-bottom: 3px;
    font-size: 12px;
    font-weight: 650;
    color: var(--color-ink-muted);
    text-decoration: none;
}

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

/*
 * 인기경기 — 하나의 스코어보드, 그 안에 칸이 이어집니다.
 *
 * ── 줄이 넓어서 빈 것이었습니다 (2026-09-10 운영자 요청) ────
 *
 *     「메인페이지에 곧 시작하는 경기 이쪽 공백 빈칸이나 이런게 좀 많은데
 *      좀 더 개선 안될까? 보기좋게」
 *
 * 경기 하나가 줄 하나였고 그 줄이 `180px · minmax(320px, 1fr) ·
 * minmax(300px, 390px)` 이었습니다. 1920 에서 속폭 1512 가 180 · 942 · 390
 * 으로 갈리는데, 실측하면 가운데 942px 칸 안의 글자는 400px 남짓입니다 —
 * **줄마다 500px 넘게가 빈 채로** 넉 줄이 갔고, 배당은 그 빈 곳 건너 오른쪽
 * 끝에 떨어져 자기가 값을 매긴 팀에서 멀었습니다. `min-height: 92px` 이 두
 * 줄짜리 내용 위에 세로 여백을 또 얹었습니다.
 *
 * 그 폭을 **여백이 아니라 경기로** 씁니다. 넓은 화면이 한 줄에 넉 칸을
 * 세우고, 오늘 넉 줄이 쓰던 세로 자리에 여덟 경기가 듭니다. 칸 하나의 짜임은
 * 폰이 이미 쓰던 접힌 꼴 그대로이므로(`home-view.tsx` 의 `MatchBoard`
 * 머리말) 새로 증명할 것이 없습니다 — 데스크톱만 세 칸으로 벌리고 있었을
 * 뿐입니다.
 *
 * ── 카드 격자가 아니라 줄금입니다 ──────────────────────────
 *
 * 칸에 테두리와 판 색을 주면 대문이 **카드 격자 셋**이 됩니다(경기 · 카지노 ·
 * 슬롯). 이 시트 머리말이 「같은 사각 카드 문법을 네 번 반복하지 않되」라고
 * 적어 둔 그 자리라, 칸막이는 도크와 같은 문법 — 한 판 위의 여러 칸 — 으로
 * 긋습니다. 1px 줄금은 칸의 `border-top`/`border-right` 이고, **위쪽**에
 * 긋는 것이 뜻이 있습니다: 마지막 줄이 덜 차도(경기가 여덟보다 적은 아침)
 * 판의 아래 테두리는 `.ath-match-list` 것이라 온폭으로 닫힙니다.
 *
 * ── 폭마다 몇 칸, 그리고 몇 경기 ───────────────────────────
 *
 * 열 수는 4 · 3 · 2 · 1 이고 보이는 경기 수는 8 · 6 · 6 · 4 입니다. 넷 다
 * 열 수의 배수라 **줄이 늘 찹니다** — 도크와 같은 이유로, 덜 찬 줄은 격자에
 * 구멍으로 보입니다. 받아 오는 것은 언제나 여덟이고(`lib/home-matches-feed.ts`
 * 의 `HOW_MANY`) 좁은 폭에서 뒤쪽 둘을 접습니다: 폰에서 여덟 칸이면 판 하나가
 * 1,200px 이 되어 대문의 나머지가 스크롤 두 번 뒤로 갑니다.
 */
[data-skin="athena"] .ath-match-board {
    margin-bottom: 64px;
}

[data-skin="athena"] .ath-match-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid var(--color-line-head);
}

/*
 * 빈 상태는 칸 하나가 아니라 **판 하나**입니다. 격자의 첫 칸으로 두면 넉
 * 칸짜리 줄에 하나만 든 부서진 줄로 보입니다 — 경기가 마르는 새벽에 운영자가
 * 보는 것이 이 화면입니다.
 */
[data-skin="athena"] .ath-match-empty {
    grid-column: 1 / -1;
    display: grid;
    min-height: 112px;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    color: var(--color-ink);
    text-decoration: none;
}

[data-skin="athena"] .ath-match-empty span {
    font-family: var(--font-numeric);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-brand);
}

[data-skin="athena"] .ath-match-empty strong {
    font-size: 14px;
}

[data-skin="athena"] .ath-match-empty em {
    font-style: normal;
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-match-empty:hover {
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
}

/*
 * 칸 하나. 리그·시각 · 팀 둘 · 배당 한 줄이 위에서 아래로 섭니다.
 *
 * `space-between` 이 배당을 늘 바닥에 붙입니다. 한 줄 안의 칸들은 격자가
 * 같은 높이로 늘리는데, 배당이 셋인 칸과 「경기 보기」뿐인 칸이 섞이면 그
 * 늘어난 높이가 어디에 붙느냐가 갈립니다 — 아래에 붙여야 배당 줄의 밑선이
 * 한 줄 안에서 이어집니다.
 */
[data-skin="athena"] .ath-match-row {
    display: grid;
    align-content: space-between;
    gap: 11px;
    min-width: 0;
    padding: 15px 16px;
    color: var(--color-ink);
    text-decoration: none;
    border-top: 1px solid var(--color-line-soft);
    border-right: 1px solid var(--color-line-soft);
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease;
}

/* 첫 줄의 위와 마지막 열의 오른쪽은 판의 테두리가 맡습니다. */
[data-skin="athena"] .ath-match-row:nth-child(-n + 4) {
    border-top: 0;
}

[data-skin="athena"] .ath-match-row:nth-child(4n) {
    border-right: 0;
}

[data-skin="athena"] .ath-match-row:hover {
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
    box-shadow: inset 3px 0 0 var(--color-brand);
}

[data-skin="athena"] .ath-match-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

[data-skin="athena"] .ath-match-meta > span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

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

[data-skin="athena"] .ath-match-meta b {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-match-meta time {
    flex: none;
    font-family: var(--font-numeric);
    font-size: 11px;
    color: var(--color-ink-muted);
}

/*
 * 팀 둘이 세로로 서고 VS 가 왼쪽 홈통에서 두 줄을 걸칩니다. 마주 보게 두면
 * 이름 하나가 칸의 절반뿐이라, 좁아지는 순간 긴 이름이 …로 끊깁니다.
 */
[data-skin="athena"] .ath-match-teams {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
}

[data-skin="athena"] .ath-match-teams > span {
    display: flex;
    grid-column: 2;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

[data-skin="athena"] .ath-match-teams i {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-numeric);
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-ink-muted);
}

/*
 * 문장 칸은 그림이 없어도 섭니다. 한쪽만 그림이 빠지면 그 줄의 이름만 왼쪽
 * 끝으로 붙어 두 팀이 어긋나 보이는데, 배포된 판에서 실제로 리그마다
 * 절반씩만 그림이 있었습니다.
 */
[data-skin="athena"] .ath-match-crest {
    display: grid;
    flex: none;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-raise);
    overflow: hidden;
}

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

[data-skin="athena"] .ath-match-teams b {
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * 배당은 있는 만큼 폭을 나눠 가집니다. `repeat(3, …)` 로 못박아 두면 승·패
 * 둘뿐인 종목(야구가 그렇습니다)이 셋째 칸을 빈 채로 들고 있었습니다 —
 * 배포된 판의 넉 줄 중 셋이 그 꼴이었습니다.
 */
[data-skin="athena"] .ath-match-prices {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
}

[data-skin="athena"] .ath-match-prices > span {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--color-raise);
}

[data-skin="athena"] .ath-match-prices small {
    overflow: hidden;
    font-size: 10px;
    color: var(--color-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-match-prices b {
    font-family: var(--font-numeric);
    font-size: 12px;
    color: var(--color-brand);
}

/*
 * 배당이 하나도 없는 경기 — 그 자리에 같은 높이의 띠가 섭니다. 글자만 두면
 * 그 칸이 배당 있는 이웃보다 낮아지고, 한 줄 안에서 칸 하나만 밑선이
 * 올라와 있으면 그것이 다시 「빈칸」으로 보입니다.
 */
[data-skin="athena"] .ath-match-prices > em {
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--color-raise);
    font-style: normal;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    color: var(--color-ink-muted);
}

/*
 * 뼈대 — 판이 아직 답하기 전 (2026-10-14).
 *
 * 경기 칸과 **같은 칸**입니다. `.ath-match-row` 를 같이 달고 있어 격자 · 줄금 ·
 * 띠마다의 접힘(8 · 6 · 6 · 4)이 그대로 걸리고, 막대 셋의 높이가 진짜 칸의
 * 세 줄(리그·시각 19.2 · 팀 둘 56 · 배당 35.2 — 1280 과 390 에서 잰 값)과
 * 같아 경기가 들어와도 판의 높이가 안 뜁니다. 그 셋을 바꾸면 이 셋도 같이
 * 바꾸십시오.
 *
 * 눌리지 않습니다. 링크가 아니고, 칸에 걸린 오버(배경 · 왼쪽 막대)도
 * 걷어냅니다 — 눌리는 것처럼 보이는 빈 칸은 고장 난 칸입니다.
 */
[data-skin="athena"] .ath-match-skeleton {
    cursor: default;
}

[data-skin="athena"] .ath-match-skeleton:hover {
    background: none;
    box-shadow: none;
}

[data-skin="athena"] .ath-match-skeleton > b {
    display: block;
    border-radius: 6px;
    background: var(--color-raise);
    animation: ath-skeleton-pulse 1.1s ease-in-out infinite alternate;
}

[data-skin="athena"] .ath-match-skeleton > .ath-skeleton-meta {
    width: 62%;
    height: 19.2px;
}

[data-skin="athena"] .ath-match-skeleton > .ath-skeleton-teams {
    height: 56px;
}

[data-skin="athena"] .ath-match-skeleton > .ath-skeleton-prices {
    height: 35.2px;
    border-radius: 999px;
}

@keyframes ath-skeleton-pulse {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-skin="athena"] .ath-match-skeleton > b {
        animation: none;
    }
}

/*
 * 못 받았을 때 — 빈 상태와 같은 자리, 다른 문장.
 *
 * 「경기가 없습니다」와 나란히 놓고 구별돼야 합니다. 문장이 다르고, 강조색
 * 낱말(`UPCOMING`)을 흐린 색으로 내립니다 — 강조색은 이 판에서 「지금 걸린
 * 것」(배당)의 색이라, 모르는 상태가 그 색을 들면 안 됩니다.
 */
[data-skin="athena"] .ath-match-empty.is-failed span {
    color: var(--color-ink-muted);
}

/*
 * 밴더 — 한 장의 가로 타일, 세 화면.
 *
 * ── 로비도 이 카드를 씁니다 (2026-09-10 운영자 요청) ───────
 *
 *     「그리고 카지노,슬롯 메뉴에서도 메인페이지처럼 같은 크기 같은 디자인
 *      카드로 넣어주라」
 *
 * 아래 구획이 **대문 · 카지노 로비 · 슬롯 로비**를 다 그립니다. 그전에는
 * 로비가 `screens-lobby.css` 의 3 : 4 세로틀을 따로 들고 있었고, 같은 원장
 * 한 벌에 다룸이 둘이면 고침도 둘입니다 — 확대 오버가 팔을 깎는 것을 대문
 * 에서 걷어낸 날 로비에는 그대로 남아 있었고, 마크를 높이로 재우던 셈도 두
 * 곳에서 따로 고쳤습니다 (2026-09-09). 지금은 이 구획 하나뿐입니다.
 *
 * 「같은 크기」가 격자에서 나옵니다. 대문(`.ath-home`)과 로비
 * (`.ath-screen:has(.ath-lobby)`)의 폭 제한이 둘 다 1560 / 24 이므로, 아래
 * `.ath-vendor-grid` 하나가 세 화면에 같은 폭의 카드를 냅니다 — 1920 에서
 * 5열 291.2px, 1366 에서 4열 315.5px, 390 에서 2열 166px. 로비가 자기
 * 격자를 안 적는 것이 그 문장의 증명입니다.
 *
 * ── 세로 카드에서 가로 타일로 (2026-09-09) ─────────────────
 *
 * 앞의 카드는 **카드 전체**가 원장과 같은 684 : 1022 세로판이었습니다.
 * 잘리는 데는 없었지만 1920 에서 카드가 291 × 474 였고, 배포된 화면을 보고
 * 운영자가 말한 것이 그것입니다.
 *
 *     「카지노랑 슬롯 게임사 뭔지 잘 안보이고 너무 큰거같은데」
 *     「뭔가 모델만 너무큰기분이네」
 *
 * `/style-lab` 에 다섯 장을 나란히 세워 고른 것이 **B · 가로 타일**입니다
 * (`athena-card-lab.tsx`). 옛 특집 카드의 비(953 : 661)를 작고 똑같이 —
 * 한쪽이 사람, 다른 한쪽이 마크 · 이름 · 들어가기이고, 구획이 1054px 에서
 * 500px 로 떨어지면서 한 줄의 장수는 다섯 그대로입니다.
 *
 * ── 팔을 자르지 않습니다 ───────────────────────────────────
 *
 * 지면의 B 는 사람을 오른쪽 밖으로 밀어(`right: -9%`) 폭의 15% 를 잘라
 * 냈고, 그것을 보고 운영자가 한 말이 이 카드의 규칙입니다.
 *
 *     「B로 할건데 모델 좌우 팔 최대한 잘린느낌 안들게 해야해
 *      예시는 팔이 다잘려서보이네」
 *
 * 자를 이유가 애초에 없었습니다. 원장 서른다섯 장을 알파로 재 보면 서른두
 * 장이 **판 폭 684 를 0열부터 683열까지 꽉 채웁니다** — 그 폭이 곧 두
 * 팔입니다. 그리고
 *
 *     661/953 × 684/1022 = 0.4642
 *
 * 이므로 그림 칸을 카드 폭의 **46.42%** 로 두면 판 하나가 카드 높이에 정확히
 * 들어갑니다. 1920 에서 289px 카드의 134px 칸에 200px 짜리 사람이 통째로
 * 서는 셈입니다. **처음부터 다 들어갔고**, 지면은 얼굴을 키우려고 나머지를
 * 잘라 냈습니다.
 *
 * 그래서 이 카드가 지키는 것은 둘입니다.
 *
 *   좌우는 **절대** 안 자릅니다. 그림 칸이 카드 안에 있고(`right: 0`, 폭
 *   48%) 칸의 비가 판의 비와 같아 그림이 칸을 정확히 채우므로, 684 열이
 *   전부 카드 안입니다 — 폭에 따라 달라지는 계산이 아니라 **짜임으로**
 *   그렇습니다. `cover` 도, 음수 `left`/`right` 도 없습니다.
 *
 *   넘치는 것은 **아래**뿐입니다. 48% 가 46.42% 보다 3.4% 크므로 칸이 카드
 *   보다 그만큼 키가 크고, 판의 아래 33행(1022 중 3.3%)이 카드 밖으로
 *   나갑니다. 원장은 이미 허리께에서 끊긴 반신이라 — 서른다섯 장 다 알파가
 *   1021행까지 닿습니다 — 그 끊긴 선을 카드 밖으로 내보내는 것이고, 남는
 *   그림은 988행까지입니다. 실루엣이 제 폭의 90% 에 이르는 것이 늦어도
 *   835행(대개 700행 언저리)이므로 어깨와 가슴은 다 위에 있고, 잘리는 33행에
 *   **처음 나타나는 불투명 열은 서른네 장에서 0개**입니다. 「일부러 걸쳐
 *   놓은 것」으로 읽히면서 팔은 온전합니다.
 *
 * 판이 다른 것이 셋 있는데 셋 다 이 규칙에서 안전합니다. 슬롯의
 * `asia-gaming.png` 은 불투명 픽셀이 자기 판의 143열에서 시작하고
 * (나머지는 0열), `pgsoft.png` 은 오른쪽 53열이 비어 있고,
 * `bigtimegaming.png` 은 4열입니다. 그 셋은 이 카드에서 **글자 쪽이나
 * 오른쪽 끝에서 조금 떨어져 서는데, 잘리는 것이 아니라 떨어져 서는
 * 것**입니다 — 판을 통째로 두는 규칙만 밴더마다 안 어긋납니다.
 *
 * ── 마크를 폭으로 재웁니다 ─────────────────────────────────
 *
 * 마크 원장은 스물두 장 다 217 × 135 판인데 글자는 가운데 조금뿐입니다 —
 * 넓은 것(노보매틱)이 판 폭의 91%, 좁은 것(BF게임즈)은 41% 입니다. 상자를
 * 높이로 재우면 글자가 그 여백만큼 **또** 작아지므로(앞 카드가 그랬습니다)
 * 상자를 판과 같은 비로 두고 폭으로 재웁니다. 글자 쪽이 52% 이므로 1920 에서
 * 판이 123px 로 들어갑니다 — 지면의 B 와 같은 수입니다.
 *
 * 그리고 마크가 사람 그림 **위**가 아니라 단단한 면 위에 있습니다. 흰 마크가
 * 밝은 얼굴 위에 얹혀 있던 것이 「안 보인다」의 나머지 절반이라, 옅은
 * 그림자로 버티던 것이 여기서는 필요 없어집니다.
 *
 * ── 격자 ───────────────────────────────────────────────────
 *
 * 열 장을 옆으로 미는 선반 없이 세웁니다. 1280 위에서 5열이라 두 줄로 딱
 * 떨어지고, 아래로 4 · 3 열로 줄다가 폰에서는 `auto-fill` 로 넘깁니다 —
 * 767 과 390 사이에서 칸 수가 4 에서 2 로 저절로 바뀌고 카드 폭은 176px
 * 언저리로 남습니다. 48 : 52 는 **어느 띠에서도 안 바뀝니다**: 그 두 수가
 * 위의 「안 자른다」를 화면 폭과 무관하게 만듭니다.
 *
 * ── 한 장인 것이 이 구획의 뜻입니다 ────────────────────────
 *
 * 앞 카드가 고친 것은 「구획마다 다른 문법」입니다. 특집 카드는 폭의 53% 가
 * 빈 바탕, 디렉터리 줄은 16% 로 줄어든 실오라기, 슬롯 포스터는 `cover` 로
 * 몸통 126px 를 잘라 낸 얼굴 — 셋 다 한 장의 그림을 세 가지로 다뤄서 생긴
 * 것입니다 (`screens/casino-lobby-view.tsx` 머리말). 그 문장이 대문 안에서만
 * 참이었던 것을 2026-09-10 에 세 화면으로 넓혔고, 이제 다른 것은 구획 제목과
 * 들어가기 문구, 그리고 대문이 열 장만 세운다는 것뿐입니다.
 */
[data-skin="athena"] .ath-vendor-section {
    margin-bottom: 64px;
}

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

/* 옛 특집 카드의 비. 열 장이 다 같은 크기라 그 카드의 빈쪽이 글자의 자리가 됩니다. */
[data-skin="athena"] .ath-vendor-card {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: stretch;
    aspect-ratio: 953 / 661;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease;
}

/*
 * 카드는 제자리이고 안의 그림만 움직입니다. 카드가 떠오르면 격자가 들썩이고,
 * 그림자를 안 쓰는 스킨에서 「떠오름」은 그릴 방법도 없습니다.
 */
[data-skin="athena"] .ath-vendor-card:hover,
[data-skin="athena"] .ath-vendor-card:focus-visible {
    border-color: var(--color-brand);
}

/*
 * 그림 칸 — 오른쪽에 붙는 **판 하나짜리 세로 칸**입니다.
 *
 * 폭이 48% 이고 비가 원장과 같으므로 칸의 왼쪽 끝이 카드의 52% 지점,
 * 오른쪽 끝이 카드의 오른쪽 끝입니다. 684 열이 전부 이 안에 있고 `contain`
 * 은 남기는 것도 자르는 것도 없습니다. 넘치는 것은 아래 3.4% 뿐이고 그것은
 * 카드의 `overflow: hidden` 이 받습니다 (위 머리말의 셈).
 *
 * `background` 가 없는 것이 앞 카드와 다릅니다. 칸이 카드 면의 절반짜리
 * 덧판이라, 여기에 `--color-sunk` 를 깔면 오른쪽 48% 에 어두운 사각형이
 * 그려집니다.
 */
[data-skin="athena"] .ath-vendor-art {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    display: block;
    width: 48%;
    aspect-ratio: 684 / 1022;
}

/*
 * 사람 그림. 마크는 이제 글자 쪽에 있으므로 이 선택자에 안 걸리고, 클립도
 * `background-image` 라 안 걸립니다 — 형제 `img` 로 두었다가 마크가 카드만
 * 하게 늘어난 적이 있습니다 (`screens-lobby.css` 의 같은 자리).
 *
 * `center bottom` 은 비가 어긋난 그림이 들어왔을 때를 위한 것입니다. 남는
 * 여백은 머리 위로 가고 발치는 카드 밖으로 나갑니다.
 */
[data-skin="athena"] .ath-vendor-art > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transition:
        transform 380ms ease,
        opacity 160ms ease;
}

/*
 * 오버에서 사람이 조금 **올라옵니다**. 앞 카드는 `scale(1.035)` 였는데, 이
 * 짜임에서 확대는 폭도 함께 늘리므로 양쪽 팔끝이 2px 씩 잘립니다 — 이
 * 카드가 존재하는 이유가 그것을 안 하는 것입니다. 세로 이동은 위가 머리 위
 * 여백(96행)이고 아래가 이미 카드 밖이라 어느 쪽에서도 잃는 것이 없습니다.
 */
[data-skin="athena"] .ath-vendor-card:not([data-motion="ready"]):hover
    .ath-vendor-art
    > img {
    transform: translateY(-2%);
}

/*
 * 움직이는 그림. 정지 사진과 **같은 상자**(그림 칸 전체)이고 둘 다 같은
 * 자리로 `contain` 이라, 픽셀 하나 안 밀리고 겹칩니다 — 클립 원장이
 * 477 × 713 (비 0.6690) 이고 정지판이 684 × 1022 (0.66927) 이므로 139px
 * 칸에서 어긋나는 것이 0.06px 입니다.
 */
[data-skin="athena"] .ath-vendor-motion {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 160ms ease;
    pointer-events: none;
}

[data-skin="athena"] .ath-vendor-card[data-motion="ready"]:is(
        :hover,
        :focus-visible
    )
    .ath-vendor-motion {
    opacity: 1;
}

/*
 * 모션이 보일 때 정지 사진은 즉시 끕니다. 두 겹을 겹쳐 두면 모델이 움직인
 * 거리만큼 얼굴과 어깨가 두 개로 보입니다 — 포세이돈에서 「잔상」으로 보고된
 * 그것. 마크는 그대로 둡니다.
 */
[data-skin="athena"] .ath-vendor-card[data-motion="ready"]:is(
        :hover,
        :focus-visible
    )
    .ath-vendor-art
    > img {
    opacity: 0;
}

/*
 * 글자 쪽 — 마크 · 이름 · 들어가기가 세로로 선 52% 짜리 칸입니다.
 *
 * 그림 칸이 오른쪽 48% 이므로 이 칸과 겹치는 데가 없고, 그래서 글자가 사람
 * 위에 안 얹힙니다. 앞 카드는 마크를 그림 안에 두고 옅은 그림자로 버텼는데,
 * 「게임사가 안 보인다」의 절반이 그것이었습니다.
 *
 * 캡션 줄이 아니라 칸인 것이 폭을 만듭니다. 카드 아래에 한 줄로 두면 이름과
 * 들어가기는 되지만 마크가 들어갈 높이가 안 나옵니다 (앞 카드 머리말의 셈).
 */
[data-skin="athena"] .ath-vendor-face {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    width: 52%;
    padding: 14px 12px 14px 15px;
}

/*
 * 밴더 마크. 상자가 **원장과 같은 비**이고 재우는 것은 폭입니다 — 판은 스물두
 * 장 다 217 × 135 인데 글자가 판 폭의 41~91% 뿐이라, 상자를 높이로 재우면
 * 글자가 그 여백만큼 또 작아집니다 (위 머리말).
 *
 * `<span>` 으로 한 겹 싼 것은 이 비를 지니는 상자가 필요하기 때문이고, 겸사
 * `.ath-vendor-art > img` 에 안 걸립니다 — 마크를 그 칸의 형제 `img` 로
 * 두었다가 카드만 하게 늘어난 적이 있습니다 (`screens-lobby.css` 의 같은 자리).
 */
[data-skin="athena"] .ath-vendor-mark {
    display: flex;
    width: 100%;
    align-items: center;
    aspect-ratio: 217 / 135;
    pointer-events: none;
}

/*
 * 판을 왼쪽에 붙입니다. 글자가 판 가운데 있지 않은 원장이 있어(글자 폭 41%
 * 인 BF게임즈) 가운데 정렬로 두면 그 카드만 이름줄과 어긋나 보입니다.
 *
 * ── 테두리가 조합을 따릅니다 ───────────────────────────────
 *
 * 마크 원장의 글자는 대개 **흰색**이고, 마크가 없는 밴더의 대체 글자마크도
 * 흰색입니다 (`vendor-art.ts` 의 `wordmark`). 앞 카드는 그것을 사람 그림
 * 위에 얹었으므로 어느 조합에서나 사진 위의 흰 글자였는데, 이 카드는 카드
 * **면** 위입니다 — 아테나는 조합 다섯을 다 따르고 그중 둘(화이트 · 모래)이
 * **흰 면**이라, 그 두 조합에서 흰 마크가 통째로 사라집니다. 지면은 데모
 * 호스트(어두운 조합)에서만 열리므로 거기서는 안 보이는 결함입니다.
 *
 * 그래서 검정이 아니라 **겹**으로 테두리를 답니다. `--t-veil-rgb` 는 어두운
 * 조합에서 흰색이고 밝은 조합에서 검정이므로, 흰 면에서는 글자에 검은 윤곽이
 * 생기고 어두운 면에서는 아무 일도 안 일어납니다. 같은 셈을 옛 특집 카드의
 * 마크가 씁니다 (`screens-lobby.css` 의 `.ath-home-card-say > img`).
 */
[data-skin="athena"] .ath-vendor-mark img {
    width: 100%;
    height: 100%;
    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-vendor-face strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-vendor-face em {
    flex: none;
    font-style: normal;
    font-size: 11px;
    font-weight: 650;
    color: var(--color-brand);
    white-space: nowrap;
}

/* 슬롯 로비에서 지금 열려 있는 밴더. 격자는 안 움직이고 테두리만 강조색입니다. */
[data-skin="athena"] .ath-vendor-card.is-on {
    border-color: var(--color-brand);
}

/*
 * ── 점검 중: 딱지를 걷어냈습니다 (2026-09-10 운영자 요청) ──
 *
 *     「게임 점검관련좀 우측상단에 빨간색이미지? 이거 업는게 나을듯
 *      괜히 애매해보여」
 *
 * 오른쪽 위 구석의 `casino_stop.png` 였습니다. 회색 프레임 **밖**에 두어
 * 색이 남게 했으므로 이 상태의 유일한 색이었는데, 바로 그것이 「애매하다」의
 * 원인입니다 — 카드마다 마크 그림이 붙어 있는 격자에서 구석의 작은 그림
 * 하나는 「닫혔다」가 아니라 「무슨 배지」로 읽힙니다.
 *
 * 걷어내고 남는 셋은 회색 사람 · 흐린 마크 · 흐린 이름인데, 그 셋만으로는
 * **그림이 안 불러와진 카드**로 읽힐 수 있습니다. 채도를 뺀 사진은 실패한
 * 사진과 구별되지 않습니다.
 *
 * 그래서 넷째를 **그림이 아니라 조판으로** 답니다. 들어가기 줄이 강조색
 * 글자에서 눌린 면 위의 흐린 글자 칩으로 바뀝니다 (아래 `.is-off` 의 `em`).
 * 이 스킨의 어휘 그대로입니다 — 면은 `--color-raise`(조합마다 「한 단 뜬」),
 * 글자는 `--color-ink-muted`, 모서리는 999px(「조작은 완전히 둥글게」).
 * **강조색은 안 씁니다**: 열린 카드에는 전부 강조색 한 줄이 있고 닫힌
 * 카드에는 하나도 없으므로, 격자를 훑는 눈이 색으로 먼저 가릅니다.
 *
 * 그림 하나가 줄어든 것이기도 합니다 — 점검 중인 밴더마다 받던 딱지 요청이
 * 없어집니다.
 */
[data-skin="athena"] .ath-vendor-card.is-off {
    cursor: not-allowed;
}

[data-skin="athena"] .ath-vendor-card.is-off:hover,
[data-skin="athena"] .ath-vendor-card.is-off:focus-visible {
    border-color: var(--color-line);
}

[data-skin="athena"] .ath-vendor-card.is-off .ath-vendor-art {
    filter: grayscale(1);
    opacity: 0.55;
}

/*
 * 마크도 함께 죽입니다. 앞 카드에서는 마크가 그림 칸 **안**이라 위의 회색이
 * 같이 먹었는데, 이제 글자 쪽에 있으므로 안 먹습니다 — 색이 그대로 남으면
 * 회색 사람 옆에서 그 카드만 열려 있는 것처럼 보입니다.
 */
[data-skin="athena"] .ath-vendor-card.is-off .ath-vendor-mark {
    opacity: 0.5;
}

[data-skin="athena"] .ath-vendor-card.is-off .ath-vendor-face strong {
    color: var(--color-ink-muted);
}

/*
 * 걷어낸 딱지 자리에 서는 것. 들어가기 줄이 **상태 칩**이 됩니다 (위 머리말).
 *
 * 강조색이 여기서 빠지는 것이 이 칩의 절반입니다. 열린 카드에는 전부 강조색
 * 한 줄이 있고 닫힌 카드에는 하나도 없으므로, 격자를 훑는 눈이 「열리는가」를
 * 색으로 먼저 가릅니다 — 딱지가 이 상태의 **유일한 색**이었던 것을 뒤집은
 * 것입니다.
 *
 * 높이가 이 칩의 값을 정합니다. 글자 칸은 카드 폭에서 높이를 얻고 그 안이
 * 폰에서 이미 꽉 차 있으므로(아래 767 띠의 셈), 칩이 늘리는 높이가 곧
 * 이름의 둘째 줄을 자를 수 있는 양입니다. 그래서 위아래 여백을 데스크톱 3 ·
 * 폰 1 로 나눠 두고, 두 띠의 부등식을 `athena-home.spec.ts` 가 **열린 카드와
 * 닫힌 카드 두 벌로** 셉니다.
 */
[data-skin="athena"] .ath-vendor-card.is-off .ath-vendor-face em {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-raise);
    color: var(--color-ink-muted);
    letter-spacing: 0.01em;
}

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

    /*
     * 셋으로 줄고 보이는 경기도 여섯으로 줄어 두 줄이 찹니다. 줄금 규칙은
     * 띠마다 **다시 적습니다** — `nth-child(-n + 4)` 를 그대로 두면 넉째
     * 칸이 여기서는 둘째 줄 첫 칸이라 그 줄의 위 줄금이 빠집니다.
     */
    [data-skin="athena"] .ath-match-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [data-skin="athena"] .ath-match-row {
        border-top: 1px solid var(--color-line-soft);
        border-right: 1px solid var(--color-line-soft);
    }

    [data-skin="athena"] .ath-match-row:nth-child(-n + 3) {
        border-top: 0;
    }

    [data-skin="athena"] .ath-match-row:nth-child(3n) {
        border-right: 0;
    }

    [data-skin="athena"] .ath-match-row:nth-child(n + 7) {
        display: none;
    }

    /*
     * 5열을 유지하면 1024 에서 카드가 184px 이 되고, 글자 쪽 52% 안에서
     * 마크 판이 68px 로 들어가 안 읽힙니다. 4열이면 그 자리에서 231px ·
     * 92px 입니다.
     */
    [data-skin="athena"] .ath-vendor-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    /* 둘 × 세 줄. 여섯은 여기서도 열 수의 배수입니다. */
    [data-skin="athena"] .ath-match-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-skin="athena"] .ath-match-row {
        border-top: 1px solid var(--color-line-soft);
        border-right: 1px solid var(--color-line-soft);
    }

    [data-skin="athena"] .ath-match-row:nth-child(-n + 2) {
        border-top: 0;
    }

    [data-skin="athena"] .ath-match-row:nth-child(2n) {
        border-right: 0;
    }

    [data-skin="athena"] .ath-match-row:nth-child(n + 7) {
        display: none;
    }

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

@media (max-width: 767px) {
    [data-skin="athena"] .ath-screen.ath-home {
        margin-top: 18px;
        padding-inline: 14px;
    }

    [data-skin="athena"] .ath-command-dock {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 38px;
        border-radius: 14px;
    }

    [data-skin="athena"] .ath-command-dock a {
        flex-direction: column;
        gap: 7px;
        padding: 12px 5px;
        text-align: center;
    }

    [data-skin="athena"] .ath-command-icon {
        width: 38px;
        height: 38px;
    }

    [data-skin="athena"] .ath-command-copy small {
        display: none;
    }

    [data-skin="athena"] .ath-editorial-head h2 {
        font-size: 22px;
    }

    /*
     * 한 칸씩 넉 줄. 받아 온 여덟을 다 세우면 이 판만 1,200px 이 되어 대문의
     * 나머지가 스크롤 두 번 뒤로 갑니다 — 폰에서 이 판은 훑는 자리이지
     * 고르는 자리가 아닙니다(고르는 자리는 「전체 경기 →」입니다).
     */
    [data-skin="athena"] .ath-match-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    [data-skin="athena"] .ath-match-row {
        padding: 14px;
        border-top: 1px solid var(--color-line-soft);
        border-right: 0;
    }

    [data-skin="athena"] .ath-match-row:nth-child(-n + 1) {
        border-top: 0;
    }

    [data-skin="athena"] .ath-match-row:nth-child(n + 5) {
        display: none;
    }

    [data-skin="athena"] .ath-match-empty {
        min-height: 124px;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 22px 14px;
    }

    /*
     * 폰만 칸 수를 안 못 박습니다. 390 부터 767 까지가 제일 넓은 띠라, 못
     * 박으면 한쪽 끝에서 카드가 114px 이 되거나 364px 이 됩니다. `auto-fill`
     * 이면 390 에서 두 칸, 767 에서 네 칸이고 카드 폭은 양쪽 다 176px 입니다.
     */
    [data-skin="athena"] .ath-vendor-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    /*
     * 좁아지는 것은 여백과 글자뿐입니다. **48 : 52 는 여기서도 안 바뀝니다** —
     * 그 두 수가 「팔을 안 자른다」를 화면 폭과 무관하게 만들고, 폰에서만
     * 글자 쪽을 넓히면 그림 칸이 46.42% 밑으로 내려가 사람이 카드 바닥에
     * 닿지 못하고 끊긴 허리선이 카드 안에 뜹니다.
     */
    /*
     * 사이와 여백에서 6.6px 를 찾습니다 — 이름의 둘째 줄 값입니다.
     *
     * 이 칸의 높이는 카드 폭이 정합니다(카드가 953 : 661, 칸이 카드 높이).
     * 그 안에서 마크는 폭을 따라 같이 자라지만 **글자 두 줄 · 들어가기 ·
     * 사이 · 여백은 고정**이라, 카드가 좁아질수록 고정분의 몫이 커집니다.
     * 아래로 얼마까지 견디는가가 그 셈의 답입니다:
     *
     *     칸 속높이 0.6936w − 2 − 2×여백
     *         ≥  마크 (0.52(w−2) − 18) × 135/217  +  두 줄 30
     *            +  들어가기 12  +  사이 2칸  +  칩 위아래
     *
     * 사이 6 · 여백 9 이면 **w ≥ 168px** 이라, 격자가 150px 바닥에 붙는
     * 폭에서 둘째 줄이 잘립니다 — 360px(갤럭시)에서 카드가 161px 이라
     * 거기가 바로 그 자리입니다. 폰 띠 448 폭 중 151 폭이 그랬습니다.
     *
     * ── 칩이 들어오면서 여백을 1px 더 내놓았습니다 (2026-09-10) ──
     *
     * 점검 딱지를 걷어내고 그 자리에 상태 칩을 놓았으므로(위 `.is-off` 의
     * `em`), 이 칸이 **닫힌 카드에서 더 높아집니다.** 사이 4 · 여백 7 은
     * 열린 카드에 1.36px 만 남기고 있었고 — 그 값을 고른 셈이 그것입니다 —
     * 칩 위아래 1px 둘이 그 자리를 넘깁니다.
     *
     * 그래서 여백을 7 에서 6 으로 내립니다. 150px 바닥에서
     *
     *     속높이 90.04  ≥  마크 36.68 + 두 줄 30 + 들어가기 12 + 사이 8
     *                       ( + 닫힌 카드의 칩 2 )
     *
     * 이라 열린 카드에 3.36px, 닫힌 카드에 1.36px 가 남습니다. 남는 자리는
     * `justify-content: center` 가 위아래로 나누므로, 390 에서 여백이 눈으로는
     * 6px 이 아니라 11px 로 보입니다.
     */
    [data-skin="athena"] .ath-vendor-face {
        gap: 4px;
        padding: 6px 8px 6px 10px;
    }

    /*
     * ── 폰에서 이름이 두 줄까지 갑니다 (2026-09-09) ────────────
     *
     * 390 에서 글자 칸의 속폭이 73.5px 이고 한글이 12px 이라 한 줄에 여섯
     * 자입니다. 「프라그마틱 카지노」가 「프라그마틱 …」로, 「마이크로게이밍」
     * 이 「마이크로게…」로 끊겼습니다 — 밴더를 알아보라고 만든 카드에서
     * 밴더 이름이 잘린 것입니다.
     *
     * **자리는 칸 안에서 찾습니다.** 글자 칸을 넓히면 48 : 52 가 깨지고,
     * 그러면 그림 칸이 밑선(46.42%) 밑으로 내려가 「팔을 안 자른다」의
     * 증명이 이 띠에서만 거짓이 됩니다. 시험이 그래서 띠마다 그 두 수를
     * 셉니다.
     *
     * 칸 안에는 자리가 있었습니다. 속높이 104.1px 에 마크 45.7 · 사이 12 ·
     * 이름 · 들어가기가 서는데, 이름을 두 줄로 늘리면서 줄높이를 1.25 로
     * 못 박으면 두 줄이 30px 이라 다 합쳐 100px 언저리입니다. `normal` 로
     * 두면 한글 글꼴의 넉넉한 줄높이가 두 줄에서 5px 를 더 먹어 칸이
     * 넘치고, 넘치면 카드가 제 비(953 : 661)보다 높아져 그림 칸 아래에
     * 빈 면이 뜹니다 — 그림 칸은 폭에서 높이를 얻으므로 카드를 안 따라
     * 늘어납니다.
     *
     * 세 줄짜리 이름은 `-webkit-line-clamp` 가 둘째 줄 끝에서 …로 끊습니다.
     * 지금 실린 스무 장 중에는 없고, 있어도 여섯 자가 아니라 열두 자를
     * 보여 준 뒤의 …입니다.
     *
     * 데스크톱은 안 건드립니다. 1920 에서 카드가 291px 이라 글자 칸이
     * 124px 이고, 여기서 잘리는 이름이 없습니다.
     */
    [data-skin="athena"] .ath-vendor-face strong {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
    }

    /*
     * 들어가기 줄의 줄사이도 못 박습니다 — 이름의 둘째 줄이 여기서 나옵니다.
     *
     * 카드가 `<button>` 이라 브라우저 기본 시트가 줄높이를 `normal` 로
     * 되돌려 놓습니다(시트의 1.6 이 여기까지 안 옵니다). `normal` 은 글꼴이
     * 정하는 수라, 한 줄짜리 문구 하나가 프리텐다드에서 14px, 노토에서
     * 15px, 대체 글꼴에서 또 다른 수가 됩니다 — 칸이 꽉 찬 폰 띠에서
     * **글꼴이 이름의 줄 수를 정하게 됩니다.**
     *
     * 1.2 로 못 박으면 12px 이고, 위의 1.25 와 합쳐 이 칸의 높이가 글꼴과
     * 무관해집니다: 마크는 비에서, 두 글자줄은 못 박은 줄높이에서 나옵니다.
     */
    [data-skin="athena"] .ath-vendor-face em {
        font-size: 10px;
        line-height: 1.2;
    }

    /*
     * 점검 칩의 위아래 여백 — 데스크톱의 3px 이 여기서 1px 입니다. 위 셈의
     * 마지막 항이고, 이 띠에서 남는 자리가 1.36px 이라 그 이상은 이름의
     * 둘째 줄을 자릅니다.
     *
     * 바로 위 규칙 **뒤**에 있어야 합니다. 앞에 두면 `.ath-vendor-face em`
     * 을 찾는 눈(시험도, 읽는 사람도)이 이 덧칠을 먼저 만나, 글자 크기를
     * 안 적은 규칙을 기본 규칙으로 읽습니다.
     */
    [data-skin="athena"] .ath-vendor-card.is-off .ath-vendor-face em {
        padding: 1px 7px;
    }
}

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

    [data-skin="athena"] .ath-vendor-art > img {
        transition: none;
        opacity: 1 !important;
    }

    [data-skin="athena"] .ath-vendor-motion {
        display: none;
    }
}