/*---------------------------------------------------------
    아테나 — 화면의 어휘.

    ── 한 문장으로 ───────────────────────────────────────

    **카드가 없습니다.** 화면 전체가 한 면이고, 영역은 머리카락 굵기 선과
    여백으로만 나눕니다.

    ── 왜 그렇게 정했는가 ────────────────────────────────

    요청이 「색상만 바꿀게 아니라 디자인 레이아웃 틀 자체를 바꿔야 해」였고,
    헤라에서 바꿀 것이 하나뿐이라면 그것은 카드입니다. 헤라는 스물두 화면이
    전부 「둥근 카드 + 한 단 어두운 카드 머리」 하나로 그려집니다 —
    입금도 공지도 마이페이지도 같은 상자입니다. 그 상자를 빼면 같은 배치를
    써도 같은 물건으로 안 읽힙니다.

    ── 상자가 하던 일을 무엇이 대신하는가 ────────────────

    상자는 세 가지를 했습니다. 하나씩 옮겼습니다.

        묶기      →  여백. 구획 사이 32px, 구획 안 16px.
        위계      →  선 굵기. 구획 제목 아래가 제일 진하고
                     (`--color-line-head`), 줄 사이가 옅습니다.
        떠 있음   →  없앴습니다. 그림자를 한 줄도 안 씁니다.

    셋 중 마지막이 제일 셉니다. 헤라의 서명이 시안색 글로우 그림자라,
    그림자가 남아 있으면 밝게 칠해도 헤라로 읽힙니다.

    ── 각진 면, 둥근 조작 ────────────────────────────────

    면은 0~2px, 조작은 `999px` 입니다. 네 스킨이 전부 그 반대(둥근 카드 +
    적당히 둥근 단추)라, 이 뒤집기 하나가 색보다 멀리서 먼저 보입니다.

    ── 클래스 이름이 헤라에서 왔습니다 ───────────────────

    마크업을 헤라에서 베꼈으므로 이름도 그 계보입니다 (`ath-card`,
    `ath-listhead` …). 이름은 남기고 **뜻만 바꿉니다** — `.ath-card` 는 이제
    상자가 아니라 「구획」입니다. 이름을 다 갈면 화면 스물둘을 동시에
    고쳐야 하고, 그 사이 어느 화면이 규칙 없이 떠 있는지 아무도 못 봅니다.

    울타리는 `[data-skin="athena"]` 입니다. 모든 선택자가 그것으로
    시작해야 하고 `skin-screen-seam.spec.ts` 가 확인합니다.

    끊는 폭은 셋뿐입니다 — 767 · 1023 · 1279 (`table-cards.ts`).
---------------------------------------------------------*/

[data-skin="athena"] .ath-screen {
    /* 구획 사이. 상자가 없으므로 이 수가 곧 「따로 있음」입니다. */
    --ath-gap: 32px;
    /* 구획 안에서 줄 사이. */
    --ath-row: 16px;
    --ath-rule: 1px solid var(--color-line);
    --ath-rule-soft: 1px solid var(--color-line-soft);
    --ath-rule-head: 1px solid var(--color-line-head);
    /* 면의 모서리. 0 이 아니라 2 인 것은 입력칸이 완전히 각지면 알약 단추
       옆에서 깨져 보이기 때문입니다 — 아주 살짝만 깎습니다. */
    --ath-corner: 2px;

    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 36px auto 72px;
    padding: 0 28px;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
}

[data-skin="athena"] .ath-screen *,
[data-skin="athena"] .ath-screen *::before,
[data-skin="athena"] .ath-screen *::after {
    box-sizing: border-box;
}

/*
    판을 쓰는 손님 화면의 폭.

    돈 화면 넷이 1280 이고(`money.css` 의 `.ath-money-page`) 나머지는
    `.ath-screen` 의 기본값 1180 이었습니다. 100px 차이는 한 화면만 볼 때는
    안 보이지만 머리띠에서 공지사항 → 입금하기로 옮겨 가면 판의 양 끝이
    눈에 띄게 움직입니다 — 운영자가 「서로 디자인이 다 다르다」고 할 때
    이런 것들이 쌓여서 그렇게 읽힙니다.

    1180 은 스포츠와 로비의 것으로 남습니다. 저것들은 판을 안 쓰고, 이번
    회차의 범위 밖입니다.
*/
[data-skin="athena"] .ath-page {
    max-width: 1280px;
}

/* 좁은 화면은 시트가 화면 폭 그대로입니다 — 상자가 없으니 가둘 것도 없습니다. */
@media (max-width: 767px) {
    [data-skin="athena"] .ath-screen {
        --ath-gap: 26px;
        margin: 18px auto 48px;
        padding: 0 16px;
    }
}

/*---------------------------------------------------------
    구획 — 옛 카드.

    ── 이 자리는 비었습니다 (2026-09-12) ─────────────────

    `.ath-card` 의 규칙 여섯이 여기 있었고, 그것을 그리는 부품
    (`panel.tsx` 의 `AthenaAside`)과 그 부품이 서는 자리(판 **아래**)는
    `shell.css` 가 말하고 있었습니다. **한 물건을 두 시트가 나눠 들고 있었고,
    아무도 둘 사이의 관계를 안 들고 있었습니다** — 판과 곁 구획이 얼마나
    떨어지는가, 곁 구획의 속이 판의 속과 같은 줄에서 시작하는가.

    그래서 안 떨어져 있었습니다. 1440 에서 잰 값으로 판과 첫 곁 구획 사이가
    쿠폰·룰렛·복권·출석에서 **0px**, 돈 화면 넷에서 42px, 곁 구획끼리는
    74px — 한 관계에 답이 셋이었습니다. 0 이 나온 까닭은 간격이 `.ath-card`
    자신의 **아래쪽** 여백이었기 때문이고, 아래쪽 여백은 첫 틈에 안 씁니다.
    42 와 74 는 `money.css` 가 그 위에 격자 간격을 한 번 더 얹은 것입니다.

    규칙은 전부 `shell.css` 로 갔습니다. 뼈대의 어휘 안에 들어갔으므로
    `athena-shell.spec.ts` 의 첫 시험이 이제 이 이름들도 셉니다 — 다른
    시트가 다시 잡으면 거기서 걸립니다.
---------------------------------------------------------*/

/* 아이콘은 남기되 작고 조용하게 — 24px 시안 실루엣이 헤라의 것입니다.
   곁 구획의 제목 옆에 서지만 이름이 `.ath-ico` 라 뼈대의 어휘가 아니고,
   구획 머리 말고도 쓰이므로 여기 남습니다. */
[data-skin="athena"] .ath-ico {
    flex: none;
    width: 15px;
    height: 15px;
    background-color: var(--color-ink-muted);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

[data-skin="athena"] .ath-ico-notice {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.2 1.2 0 110 2.4A1.2 1.2 0 0112 7zm1.2 11h-2.4v-7h2.4z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.2 1.2 0 110 2.4A1.2 1.2 0 0112 7zm1.2 11h-2.4v-7h2.4z'/></svg>");
}

[data-skin="athena"] .ath-ico-history {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/></svg>");
}

[data-skin="athena"] .ath-ico-deposit {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4L11 13.2zM4 19h16v2H4z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4L11 13.2zM4 19h16v2H4z'/></svg>");
}

[data-skin="athena"] .ath-ico-withdraw {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 21h-2V10.8l-3.6 3.6L6 13l6-6 6 6-1.4 1.4L13 10.8zM4 3h16v2H4z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 21h-2V10.8l-3.6 3.6L6 13l6-6 6 6-1.4 1.4L13 10.8zM4 3h16v2H4z'/></svg>");
}

[data-skin="athena"] .ath-ico-point {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.1 6.1 20.2l1.2-6.6L2.5 9l6.6-.9z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.1 6.1 20.2l1.2-6.6L2.5 9l6.6-.9z'/></svg>");
}

/*---------------------------------------------------------
    지면의 머리는 **`shell.css`** 에 있습니다.

    `.ath-masthead` 와 그 눈썹은 2026-09-10 에 이 파일에서 나갔습니다. 나간
    까닭은 그것이 이 시트의 어휘가 아니라 **뼈대의 부품**이기 때문입니다 —
    눈썹의 조판은 지면의 머리와 구획의 머리에서 같아야 하고, 같음은 규칙이
    **하나**일 때만 지켜집니다. 그 뒤 손님 화면이 전부 판으로 옮겨 오면서
    판 밖의 머리(`.ath-masthead`) 자체가 없어졌습니다 — 머리는 이제
    `AthenaPanelHead` 하나뿐입니다.
---------------------------------------------------------*/

/*---------------------------------------------------------
    글자.
---------------------------------------------------------*/

[data-skin="athena"] .ath-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-value {
    font-size: 14px;
    color: var(--color-ink);
}

/* 그 화면에서 제일 큰 수 — 보유머니, 환산액. 돈 색입니다. */
[data-skin="athena"] .ath-strong {
    font-family: var(--font-numeric);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-figure,
[data-skin="athena"] .ath-money,
[data-skin="athena"] .ath-point {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-money,
[data-skin="athena"] .ath-point {
    color: var(--color-gold);
    font-weight: 600;
}

[data-skin="athena"] .ath-unit,
[data-skin="athena"] .ath-unit-inline {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-count {
    color: var(--color-brand);
    font-weight: 700;
}

/*---------------------------------------------------------
    줄과 칸.

    라벨과 값을 「왼쪽·오른쪽」으로 두고 그 사이를 선으로 끊습니다. 헤라는
    라벨 위에 값을 얹은 상자(`.iptgrp`)를 격자로 깔았는데, 상자가 없으면
    그 배치가 그냥 떠 있는 글자 무더기가 됩니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-rows {
    display: block;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-row,
[data-skin="athena"] .ath-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 0;
    border-bottom: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-row > :first-child,
[data-skin="athena"] .ath-detail-row > :first-child {
    flex: none;
    font-size: 13px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-row > :last-child,
[data-skin="athena"] .ath-detail-row > :last-child {
    text-align: right;
    min-width: 0;
    word-break: break-all;
}

/*
    옛 `.ath-info-grid` — 라벨 위 값의 상자 격자.

    상자를 벗기고 **두 칸 표**로 만듭니다. 좁아지면 한 칸입니다.
*/
[data-skin="athena"] .ath-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-iptgrp {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 11px 0;
    border-bottom: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-iptgrp > label,
[data-skin="athena"] .ath-iptgrp > .ath-label {
    flex: none;
    font-size: 13px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-iptgrp .ath-value {
    text-align: right;
    min-width: 0;
    word-break: break-all;
}

/* 한 줄을 다 쓰는 칸 — 보너스 고르개, 게임머니 회수처럼 폭이 필요한 것. */
[data-skin="athena"] .ath-full,
[data-skin="athena"] .ath-iptgrp.ath-full {
    grid-column: 1 / -1;
    display: block;
}

[data-skin="athena"] .ath-cols,
[data-skin="athena"] .ath-main-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ath-gap) 44px;
    align-items: start;
}

@media (max-width: 1023px) {
    [data-skin="athena"] .ath-info-grid,
    [data-skin="athena"] .ath-cols,
    [data-skin="athena"] .ath-main-content {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ath-gap) 0;
    }
}

/*
    포인트 전환의 두 칸과 보유포인트 카드는 **없어졌습니다** (2026-09-10).

    폼과 원장을 나란히 두고 그 폼 안에 보유포인트를 카드로 넣는 배치였는데,
    입금하기 옆에 놓으면 같은 사이트로 안 읽혔습니다. 이제 이 화면도 판
    하나에 원장은 판 아래이고, 보유포인트는 머리 옆의 칩입니다 —
    `shell.css` 의 `.ath-panel-chip`, 입금의 보유머니와 같은 물건.

    두 칸을 반반으로 안 나눈 계산(원장 다섯 칸의 바닥값 합이 562px 라
    568px 짜리 칸에서 이미 넘친다)은 이제 안 필요합니다. 원장이 지면 폭을
    통째로 쓰므로 그 칸들은 바닥값에 안 걸립니다.
*/

/*---------------------------------------------------------
    입력.

    입력칸은 **밑줄 하나**입니다. 사방 테두리를 두면 알약 단추 옆에서
    작은 상자가 되고, 상자를 없앤 화면에 상자가 다시 생깁니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-field {
    display: block;
    margin: 0 0 18px;
}

[data-skin="athena"] .ath-field > label,
[data-skin="athena"] .ath-auth-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-screen input[type="text"],
[data-skin="athena"] .ath-screen input[type="password"],
[data-skin="athena"] .ath-screen input[type="number"],
[data-skin="athena"] .ath-screen input[type="tel"],
[data-skin="athena"] .ath-screen input[type="email"],
[data-skin="athena"] .ath-screen select,
[data-skin="athena"] .ath-screen textarea {
    width: 100%;
    padding: 10px 2px;
    border: 0;
    border-bottom: var(--ath-rule);
    border-radius: 0;
    background: none;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.15s ease;
}

[data-skin="athena"] .ath-screen textarea {
    min-height: 120px;
    padding: 10px 2px;
    resize: vertical;
}

[data-skin="athena"] .ath-screen input::placeholder,
[data-skin="athena"] .ath-screen textarea::placeholder {
    color: var(--color-ink-muted);
    opacity: 0.75;
}

/* 초점은 밑줄이 굵어지고 색이 붙는 것으로만 알립니다 — 글로우 없음. */
[data-skin="athena"] .ath-screen input:focus,
[data-skin="athena"] .ath-screen select:focus,
[data-skin="athena"] .ath-screen textarea:focus {
    outline: none;
    border-bottom-color: var(--color-brand);
    box-shadow: inset 0 -1px 0 var(--color-brand);
}

[data-skin="athena"] .ath-screen input:disabled,
[data-skin="athena"] .ath-screen select:disabled,
[data-skin="athena"] .ath-screen textarea:disabled {
    color: var(--color-ink-muted);
    border-bottom-style: dashed;
    cursor: not-allowed;
}

/*
    금액 자리.

    헤라는 어두운 우물 상자 안에 큰 수를 넣습니다. 아테나는 우물을 없애고
    **수를 크게 키워** 그 자체로 화면의 무게중심이 되게 합니다.
*/
[data-skin="athena"] .ath-amount {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

[data-skin="athena"] .ath-amount-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-bottom: 2px solid var(--color-line-head);
}

[data-skin="athena"] .ath-amount-group:focus-within {
    border-bottom-color: var(--color-brand);
}

[data-skin="athena"] .ath-screen .ath-amount-input,
[data-skin="athena"] .ath-screen .ath-krw-input,
[data-skin="athena"] .ath-screen .ath-usdt-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0 8px;
    border: 0;
    box-shadow: none;
    font-family: var(--font-numeric);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-screen .ath-amount-input:focus {
    box-shadow: none;
}

[data-skin="athena"] .ath-amount .ath-unit {
    flex: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-ink-muted);
}

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

[data-skin="athena"] .ath-amount-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 0;
}

/*
    `.ath-amount-extra` 는 없어졌습니다 (2026-09-10).

    포인트전환이 전액과 정정을 칩 격자 **밖의 딴 줄**에 두던 자리입니다.
    출금하기는 같은 여덟을 한 격자에 세우고 있었고, 기준이 그쪽이므로 이
    줄은 없어집니다 — 두 화면이 같은 여덟을 다르게 세우던 것이 운영자가
    지적한 그 어긋남의 한 조각입니다.
*/

/*---------------------------------------------------------
    조작 — 전부 알약.
---------------------------------------------------------*/

[data-skin="athena"] .ath-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--ui-btn-h-sm);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--ui-btn-radius);
    background: none;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

[data-skin="athena"] .ath-btn:disabled,
[data-skin="athena"] .ath-btn[aria-disabled="true"] {
    color: var(--color-ink-muted);
    border-color: var(--color-line-soft);
    background: none;
    cursor: not-allowed;
}

[data-skin="athena"] .ath-btn-primary {
    background: var(--ui-btn-primary-bg);
    color: var(--ui-btn-primary-ink);
    border-color: transparent;
}

[data-skin="athena"] .ath-btn-primary:hover:not(:disabled) {
    background: var(--ui-btn-primary-bg-hover);
}

/*
    ── `.ath-btn-accent` 는 나갔습니다 (2026-09-10, 둘째 회차) ──

    고객센터의 「계좌문의」 한 곳만 쓰던 이름입니다. 2026-09-07 에 「중요
    버튼이라 잘보이게 해줘야해」로 생기고, 09-08 에 돈 색 채우기와 26% 금색
    번짐 고리를 걷어내고, 09-10 에 옅은 강조 면으로 정리했습니다.

    그리고 그날 고객센터가 판으로 옮겨 가면서 이 단추는 판의 **바닥 띠**로
    갔고, 거기서 세기를 말하는 것은 색이 아니라 **자리**입니다 — 띠의 오른쪽
    끝이 그 화면의 답이고(문의하기), 그 왼쪽이 곁의 조작입니다(계좌문의,
    `shell.css` 의 `.ath-panel-side`). 세기가 자리로 서니 색으로 또 말할
    것이 없어졌고, 이름 하나가 화면 하나만 쓰는 상태도 같이 없어졌습니다.

    같은 문제의 남은 답은 아래 `.ath-btn-max` 입니다 — 「구획 **안**의
    조작이라 띠에 못 올리는」 경우이고, 그래서 거기서는 아직 옅은 강조 면이
    세기를 말합니다.
*/

/*
    제출. 화면당 하나뿐인 **채운** 단추이고, 그래서 폭을 다 씁니다.
    나머지가 전부 선이라 이것 하나가 어디서 끝나는지를 말해 줍니다.
*/
[data-skin="athena"] .ath-btn-submit {
    display: flex;
    width: 100%;
    min-height: var(--ui-btn-h-lg);
    margin: 22px 0 0;
    padding: 0 24px;
    border: 0;
    border-radius: var(--ui-btn-radius);
    background: var(--ui-btn-primary-bg);
    color: var(--ui-btn-primary-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

[data-skin="athena"] .ath-btn-submit:hover:not(:disabled) {
    background: var(--ui-btn-primary-bg-hover);
}

[data-skin="athena"] .ath-btn-submit:disabled {
    background: var(--color-raise);
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-btn-secondary,
[data-skin="athena"] .ath-btn-amount,
[data-skin="athena"] .ath-btn-max,
[data-skin="athena"] .ath-btn-reset,
[data-skin="athena"] .ath-auth-check {
    border-color: var(--ui-btn-outline-line);
    color: var(--ui-btn-outline-ink);
    background: none;
}

[data-skin="athena"] .ath-btn-secondary:hover:not(:disabled),
[data-skin="athena"] .ath-btn-amount:hover:not(:disabled),
[data-skin="athena"] .ath-btn-max:hover:not(:disabled),
[data-skin="athena"] .ath-btn-reset:hover:not(:disabled),
[data-skin="athena"] .ath-auth-check:hover:not(:disabled) {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

[data-skin="athena"] .ath-btn-amount {
    min-height: 34px;
    padding: 0 15px;
    font-family: var(--font-numeric);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/*
    전액 — 「더할 것」이 아니라 「그만큼으로 둘 것」.

    금액 칩들은 상자에 **더하고**(`addAmount`), 전액과 정정은 상자를 통째로
    **다시 씁니다**(`fillAll` · `resetAmount`). 그 차이가 보여야 하므로 칩과
    같은 얼굴로 두지 않습니다.

    ── 여기도 금색이었습니다 (2026-09-10) ────────────────────

    글자와 테두리가 `--color-gold`(=`--t-money`)였습니다. 출금하기와
    포인트전환 두 화면에서 이것이 한 줄에 선 여덟 칩 중 **혼자 금색**이라,
    그 줄에서 제일 먼저 보이는 것이 「전액」이었습니다. 금색이 금액을
    뜻한다는 약속은 그 줄 바로 위의 큰 수가 이미 쓰고 있고, 조작이 같은 색을
    입으면 그 약속이 둘로 갈립니다 — 고객센터의 계좌문의를 걷어낸 것과 같은
    이유입니다 (위 문단).

    구별은 같은 강조색 안에서 짓습니다: 옅게 깐 면과 강조색 테두리.
*/
[data-skin="athena"] .ath-btn-max {
    border-color: color-mix(in srgb, var(--color-brand) 52%, var(--color-line));
    background: color-mix(in srgb, var(--color-brand) 9%, transparent);
    color: var(--color-brand);
}

[data-skin="athena"] .ath-btn-max:hover:not(:disabled) {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 16%, transparent);
}

[data-skin="athena"] .ath-btn-row {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

[data-skin="athena"] .ath-btn-danger {
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

[data-skin="athena"] .ath-btn-danger:hover:not(:disabled) {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

/*
    배팅내역 한 장의 끝에 붙는 조작 줄.

    `.ath-form-actions` 와 `.ath-actions` 도 여기 있었습니다. 마이페이지의
    「변경하기」와 고객센터의 「취소 · 보내기」가 그 둘이었고, 둘 다 판의
    **바닥 띠**(`shell.css` 의 `.ath-panel-foot`)로 갔습니다 — 화면마다
    마무리 조작을 어디에 어떻게 두는지가 갈라져 있던 것이 이 회차가 고친
    것이고, 이름을 남겨 두면 「띠 말고 이 줄을 써도 된다」는 두 번째 답이
    됩니다.
*/
[data-skin="athena"] .ath-summary-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 18px 0 0;
}

/*---------------------------------------------------------
    알림 — 상자가 아니라 **왼쪽 굵은 선**.

    이 스킨에서 상자를 그리는 곳이 하나라도 있으면 「카드가 없다」가 거기서
    깨집니다. 뜻은 세로 선이 지고 면은 거의 안 칠합니다(8%).
---------------------------------------------------------*/

[data-skin="athena"] .ath-alert {
    display: block;
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 0;
    border-left: 3px solid var(--color-line-head);
    border-radius: 0;
    background: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-alert-ok {
    border-left-color: var(--ui-alert-ok-line);
    background: var(--ui-alert-ok-bg);
    color: var(--ui-alert-ok-ink);
}

[data-skin="athena"] .ath-alert-bad {
    border-left-color: var(--ui-alert-bad-line);
    background: var(--ui-alert-bad-bg);
    color: var(--ui-alert-bad-ink);
}

[data-skin="athena"] .ath-alert-info {
    border-left-color: var(--ui-alert-info-line);
    background: var(--ui-alert-info-bg);
    color: var(--ui-alert-info-ink);
}

[data-skin="athena"] .ath-alert-warn {
    border-left-color: var(--ui-alert-warn-line);
    background: var(--ui-alert-warn-bg);
    color: var(--ui-alert-warn-ink);
}

[data-skin="athena"] .ath-blocked,
[data-skin="athena"] .ath-awaiting,
[data-skin="athena"] .ath-pending {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--ui-alert-warn-line);
    background: var(--ui-alert-warn-bg);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ui-alert-warn-ink);
}

/*---------------------------------------------------------
    안내 문단.
---------------------------------------------------------*/

[data-skin="athena"] .ath-notice-wrap {
    display: grid;
    gap: 7px;
}

[data-skin="athena"] .ath-notice {
    position: relative;
    margin: 0;
    padding: 0 0 0 15px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-ink-soft);
}

/* 글머리는 점이 아니라 짧은 가로선입니다 — 시트 전체가 선으로 말합니다. */
[data-skin="athena"] .ath-notice::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 7px;
    height: 1px;
    background: var(--color-ink-muted);
}

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

[data-skin="athena"] .ath-notice--warn {
    color: var(--ui-alert-warn-ink);
}

[data-skin="athena"] .ath-notice-text {
    color: var(--color-ink-soft);
}

[data-skin="athena"] .ath-notice-retry {
    margin-left: 8px;
}

/*---------------------------------------------------------
    목록.

    상자가 없어도 표는 표입니다 — 다만 테두리 대신 **줄 사이 선**만
    남습니다. 머리줄은 진한 선 하나로 본문과 갈립니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-listhead,
[data-skin="athena"] .ath-listrow {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
}

[data-skin="athena"] .ath-listhead {
    border-bottom: var(--ath-rule-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
    text-transform: uppercase;
}

[data-skin="athena"] .ath-listrow {
    border-bottom: var(--ath-rule-soft);
    font-size: 13px;
}

[data-skin="athena"] .ath-listrow:hover {
    background: var(--color-raise);
}

[data-skin="athena"] .ath-listbody {
    display: block;
}

[data-skin="athena"] .ath-col {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-col-title {
    white-space: normal;
    text-align: left;
}

[data-skin="athena"] .ath-col-date {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-col-action {
    text-align: right;
}

/*
    좁아지면 줄이 딱지가 됩니다 — 머리줄을 숨기고 칸마다 자기 이름을
    `data-label` 에서 찍습니다. 사이트가 767 에서 그렇게 하기로 했고, 화면
    하나만 다른 폭에서 바뀌면 나란한 두 화면이 어긋납니다.
*/
@media (max-width: 767px) {
    [data-skin="athena"] .ath-listhead {
        display: none;
    }

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

    [data-skin="athena"] .ath-listrow > [data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        white-space: normal;
        text-align: right;
    }

    [data-skin="athena"] .ath-listrow > [data-label]::before {
        content: attr(data-label);
        flex: none;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--color-ink-muted);
    }
}

/*---------------------------------------------------------
    빈 것과 못 불러온 것.

    ── 조용한 아침에 운영자가 보는 화면 ──────────────────

    넷 다 여기가 제일 안 끝나 있었습니다: 가운데 정렬한 13px 회색 한 줄.
    공지가 없는 도메인, 이벤트를 다 끈 도메인, 문의가 처음인 회원, 전환할
    포인트가 없는 회원 — 전부 **아무것도 안 그려진 화면**과 구별이 안 됐고,
    운영자가 「안 뜨는데요」로 읽는 자리가 정확히 이곳입니다.

    「없음」과 「못 불러옴」과 「불러오는 중」은 **다른 세 가지**이고 모델이
    이미 셋을 갈라 놨습니다(`loading` · `error` · 빈 `rows`). 그런데 시트는
    셋을 같은 한 줄로 그렸습니다. 여기서 셋을 갈라 둡니다:

        .ath-empty     비어 있음. 점선 테두리 안에 표식과 한 문장, 그리고
                       할 일이 있으면 그 문 하나.
        .ath-loading   불러오는 중. 표식도 테두리도 없습니다 — 곧 바뀔
                       자리에 상자를 그리면 그 상자가 깜빡입니다.
        .ath-alert     못 불러옴. 이미 있던 어휘이고 안 바꿉니다.

    **낱말은 전부 모델의 것입니다.** 이 시트는 자리와 표식만 정합니다 —
    화면이 거절을 제 말로 적는 것은 `skin-screen-seam.spec.ts` 가 막습니다.

    면을 안 칠하는 것은 이 스킨의 규칙 그대로입니다. 점선 하나로 「여기가
    무언가 들어올 자리」임을 말하고, 그 이상 그리지 않습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-empty,
[data-skin="athena"] .ath-no-list {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin: 6px 0;
    padding: 40px 24px;
    border: 1px dashed var(--color-line);
    border-radius: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

/* 표식 — 강조색 윤곽의 빈 원. 채우지 않습니다. */
[data-skin="athena"] .ath-empty-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-brand) 34%, var(--color-line));
    border-radius: 50%;
    color: var(--color-brand);
}

[data-skin="athena"] .ath-empty strong,
[data-skin="athena"] .ath-no-list strong {
    font-size: 14px;
    font-weight: 650;
    color: var(--color-ink);
}

/* 빈 자리의 문 — 있을 때만. 낱말은 모델의 것입니다. */
[data-skin="athena"] .ath-empty-door {
    margin-top: 2px;
}

/*
    불러오는 중.

    상자를 안 그립니다. 여기는 1초 뒤에 목록이 될 자리이고, 점선 상자를
    그렸다가 걷으면 화면이 한 번 튑니다 — 비어 있음은 머무는 상태이지만
    이것은 지나가는 상태입니다.
*/
[data-skin="athena"] .ath-loading {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 48px 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-ink-muted);
}

/*
    한 줄, 한 색. 강조색 머리카락이 숨을 쉽니다.

    토막이 좌우로 지나가는 흔한 꼴을 안 쓰는 것은 그것이 경사 없이는
    안 그려지기 때문입니다 — 이 스킨은 경사를 한 줄도 안 씁니다. 투명도만
    오가면 칠은 어디서나 한 색이고, 움직임을 끈 기계에서는 그냥 선입니다.
*/
[data-skin="athena"] .ath-loading::before {
    content: "";
    width: 132px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-brand);
    animation: ath-loading-breathe 1.5s ease-in-out infinite;
}

@keyframes ath-loading-breathe {
    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-skin="athena"] .ath-loading::before {
        animation: none;
        opacity: 0.55;
    }
}

[data-skin="athena"] .ath-signed-out {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 52px 0;
    text-align: center;
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
    딱지.
---------------------------------------------------------*/

[data-skin="athena"] .ath-tag,
[data-skin="athena"] .ath-bet-tag,
[data-skin="athena"] .ath-bonus-chip,
[data-skin="athena"] .ath-unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 0 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

/*
    새 공지.

    초록이었습니다 — `--ui-alert-ok-*`. 이 팔레트에서 초록은 뜻이 정해진
    색이고(「어느 조합에서나 초록은 당첨입니다」, `palette.css`), 안 읽은
    공지는 당첨도 성공도 아닙니다. 공지 목록에서 그 딱지가 줄마다 붙으므로
    화면 전체가 초록 점선으로 읽혔습니다.

    안 읽음은 **주의를 끄는 것**이고 이 사이트에서 그것은 강조색입니다.
    바로 옆 고객센터의 쪽지 딱지·안읽음 수가 이미 강조색이라
    (`.ath-tag-note`), 두 목록이 같은 표를 같은 색으로 쓰게 됩니다.
*/
[data-skin="athena"] .ath-tag-new {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/* 읽은 것은 물러납니다 — 선도 글자도 한 단 옅게. */
[data-skin="athena"] .ath-tag-read {
    border-color: var(--color-line-soft);
    opacity: 0.7;
}

[data-skin="athena"] .ath-tag-note,
[data-skin="athena"] .ath-unread-count {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

[data-skin="athena"] .ath-bet-tag-sm {
    min-height: 19px;
    padding: 0 8px;
    font-size: 10px;
}



/*---------------------------------------------------------
    쪽 넘기기 — 숫자만, 테두리는 켜진 것에만.
---------------------------------------------------------*/

[data-skin="athena"] .ath-pager,
[data-skin="athena"] .ath-listpagenation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0 0;
}

[data-skin="athena"] .ath-page-btn,
[data-skin="athena"] .ath-pager button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--color-ink-muted);
    font-family: var(--font-numeric);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

[data-skin="athena"] .ath-page-btn:hover:not(:disabled),
[data-skin="athena"] .ath-pager button:hover:not(:disabled) {
    color: var(--color-ink);
}

[data-skin="athena"] .ath-page-btn.ath-active,
[data-skin="athena"] .ath-pager button.ath-active {
    border-color: var(--color-brand);
    color: var(--color-brand);
    font-weight: 700;
}

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

/*---------------------------------------------------------
    탭 — 밑줄로만.

    헤라는 켜진 탭을 시안색으로 **채웁니다**. 채우면 알약이 되고, 알약은 이
    스킨에서 조작의 표시라 탭과 단추가 안 갈립니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 var(--ath-gap);
    border-bottom: var(--ath-rule);
}

[data-skin="athena"] .ath-tab {
    position: relative;
    padding: 0 0 11px;
    border: 0;
    background: none;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}

[data-skin="athena"] .ath-tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
}

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

[data-skin="athena"] .ath-tab-on {
    color: var(--color-ink);
}

[data-skin="athena"] .ath-tab-on::after {
    background: var(--color-brand);
}

/*---------------------------------------------------------
    공지사항.

    ── 무엇이 안 끝나 있었는가 ───────────────────────────

    화면 전체가 `.ath-card` **한 장**이었습니다. 1920 에서 잰 값으로 그
    한 장이 지면의 100% 였고, 안에는 82px 짜리 「상태」 칸과 제목 칸으로
    나뉜 두 칸 표가 있었습니다. 표를 그릴 만한 자료가 아닙니다 — 이 목록의
    행은 **제목 하나**이고 나머지는 읽었는지 여부뿐이며, 등록일은 운영자
    결정으로 회원에게 안 보입니다(`announcements-model.ts`). 두 칸 중
    한 칸이 세 글자 딱지인 표는 표인 척하는 목록입니다.

    바로 옆 고객센터가 같은 자리에서 이미 표를 버리고 받은편지함이
    되었습니다(`.ath-inbox` 머리말). 두 화면은 회원이 같은 메뉴에서 오가는
    한 쌍이라 같은 문법이어야 합니다.

    ── 두 칸 배치를 버렸습니다 (2026-09-10, 둘째 회차) ───

    1280 위에서 왼쪽 280px 에 지면의 머리를 세우고 목록을 그 오른쪽에
    붙이는 격자(`.ath-notices-layout`)가 있었습니다. 목적은 **읽는 폭**을
    좁히는 것이었고 그 자체로는 잘 되던 것인데, 그 배치는 이 화면 하나만의
    답이었습니다 — 머리가 지면 위에 있어야 성립하는 배치이기 때문입니다.

    머리가 판 안으로 들어가면서 옆으로 갈 자리가 없어졌습니다. 목록은 이제
    판의 폭을 그대로 쓰고, 그 폭은 신청 내역·머니 내역·받은편지함과 같은
    폭입니다. 잃은 것은 좁은 읽는 폭이고 얻은 것은 여섯 화면이 같은 집으로
    읽히는 것입니다 — 운영자가 고른 거래가 그것입니다.
---------------------------------------------------------*/

/*
    한 줄 = 공지 하나. 줄 전체가 단추입니다.

    제목 글자만 눌리게 두면 폰에서 그 폭이 손가락보다 좁습니다 — 고객센터가
    같은 이유로 줄 전체를 단추로 만들었고, 여기도 같습니다.
*/
[data-skin="athena"] .ath-notices-list {
    display: block;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-notices-item {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    padding: 14px 6px 14px 0;
    border: 0;
    border-bottom: var(--ath-rule-soft);
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}

[data-skin="athena"] .ath-notices-item:hover {
    background: var(--color-raise);
}

/*
    안 읽음은 딱지가 아니라 **줄 앞의 짧은 선**입니다.

    딱지는 오른쪽 끝에 그대로 남습니다(낱말이 모델의 것이라 지울 수
    없습니다). 왼쪽 선은 그 사실을 훑어보는 눈에 먼저 주는 것이고, 읽은
    줄에서는 투명이라 자리만 잡습니다 — 자리가 있어야 읽은 줄과 안 읽은
    줄의 제목이 같은 세로선에서 시작합니다.
*/
[data-skin="athena"] .ath-notices-flag {
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: transparent;
}

[data-skin="athena"] .ath-notices-item-unread .ath-notices-flag {
    background: var(--color-brand);
}

[data-skin="athena"] .ath-notices-title {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-ink);
    /* 띄어쓰기 없는 긴 한글 제목이 칸을 밀어내던 자리입니다. */
    overflow-wrap: anywhere;
    word-break: keep-all;
}

[data-skin="athena"] .ath-notices-item-read .ath-notices-title {
    font-weight: 500;
    color: var(--color-ink-nav);
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-notices-item {
        grid-template-columns: 3px minmax(0, 1fr);
        gap: 12px;
        row-gap: 8px;
        align-items: start;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* 딱지가 둘째 칸 아래로 내려옵니다 — 제목 옆에서 폭을 뺏지 않게. */
    [data-skin="athena"] .ath-notices-item > .ath-tag {
        grid-column: 2;
        justify-self: start;
    }

    [data-skin="athena"] .ath-notices-flag {
        margin-top: 4px;
    }
}

/*---------------------------------------------------------
    운영자가 쓴 것 하나 — 문서의 머리.

    공지 하나, 쪽지 하나, 문의 한 갈래가 전부 이 꼴입니다: 제목이 있고,
    그 아래 작은 사실 한 줄이 있고, 그 아래 본문이 있습니다.

    ── 이름만 있고 규칙이 없었습니다 ─────────────────────

    셋 다 머리가 **구획 머리**(`.ath-card-header`)였습니다. 그 규칙은 13px
    대문자에 자간 0.14em 인데, 그것은 「신청 내역」처럼 우리가 정한 짧은
    말에 맞는 조판이지 운영자나 회원이 **쓴 문장**에 맞는 조판이 아닙니다.
    「안녕하세요원이입니다잘부탁드립니다」가 거기 들어가면 자간이 벌어진
    대문자 취급을 받고, 띄어쓰기가 없으니 폰에서 한 줄로 넘쳤습니다.

    두 뷰가 `.ath-announcements` 와 `.ath-inquiries` 를 뿌리에 달아 둔 것이
    바로 이 규칙을 두려던 자리이고, 주석에도 그렇게 적혀 있습니다 — 그런데
    **시트에 그 두 이름이 한 번도 안 나옵니다.** 이름만 붙어 있고 아무것도
    안 하고 있었습니다. 이제 그 자리를 이것이 채웁니다.

    화면마다 따로 두지 않는 것은 셋이 같은 물건이기 때문입니다. 하나를
    고치면 셋이 같이 고쳐져야 두 화면이 나란히 섰을 때 같은 사이트입니다.
---------------------------------------------------------*/

/*
    게시글의 폭은 둘입니다 — **구조의 폭**과 **글줄의 폭**.

    배포본을 1920 · 1280 에서 재니 목록은 판 본문의 1170px 을 다 쓰는데,
    제목을 누르는 순간 `.ath-doc` 전체가 760px 로 줄었습니다. 양쪽에서
    205px 씩 들어가 목록의 **65%** 가 되었고, 공지 상세 · 문의 갈래 ·
    문의 작성이 모두 같은 모양이었습니다. 폰은 판 본문 자체가 332px 라
    우연히 100% 였습니다. 운영자의 「게시물이 사이즈가 안 맞는데 게시글이」
    는 이 전환에서 보이는 폭 점프입니다.

    760px 자체는 버리지 않습니다. 본문이 1170px 을 그대로 쓰면 한 줄에
    한글이 여든 자 넘게 들어가고 다음 줄 첫 글자를 찾기 어렵습니다. 다만
    그 수를 **게시글 상자 전체**에 걸지 않고 실제로 읽고 쓰는 것에만 겁니다.

        구조  제목 밑선 · 사실 한 줄 · 대화 구획  = 판 본문 100%
        글줄  공지/쪽지 본문 · 말풍선 · 입력칸    = 최대 760px

    글줄은 판 본문의 왼쪽 세로선에서 시작합니다. 가운데 작은 상자를 만들지
    않으므로 목록 → 상세에서 왼쪽 시작점도 안 뛰고, 오른쪽에 남는 자리는
    읽기 여백이지 테두리 안의 두 번째 카드가 아닙니다.
*/
[data-skin="athena"] .ath-doc {
    --ath-copy-max: 760px;
    display: block;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/*
    글줄만 읽는 폭에 둡니다.

    `> .ath-field` 는 문의 작성의 제목·본문과 갈래 끝의 답장입니다. 알림과
    쪽지 안내도 같은 문장 기둥에 서야, 막힌 이유만 1170px 한 줄로 흘러
    다른 화면처럼 보이지 않습니다.
*/
[data-skin="athena"] .ath-doc > .ath-doc-body,
[data-skin="athena"] .ath-doc > .ath-field,
[data-skin="athena"] .ath-doc > .ath-alert,
[data-skin="athena"] .ath-doc > .ath-notice,
[data-skin="athena"] .ath-doc > .ath-blocked {
    width: 100%;
    max-width: var(--ath-copy-max);
}

[data-skin="athena"] .ath-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px;
    border-bottom: var(--ath-rule-head);
}

[data-skin="athena"] .ath-doc-head h2 {
    min-width: 0;
    margin: 0;
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--color-ink);
    overflow-wrap: anywhere;
    word-break: keep-all;
}

[data-skin="athena"] .ath-doc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 22px;
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-doc-meta::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-line-soft);
}

/*
    본문이 비어 있을 수 있습니다.

    운영자가 제목만 올린 공지가 실제로 있습니다(데모의 「ㅅ」). 그때 이
    자리는 높이 0 이 되고 제목 밑줄과 「목록으로」 사이가 붙어 문서가 잘린
    것처럼 보였습니다. 바닥값을 두어 **문서에 본문 자리가 있다**는 것을
    보이게 합니다 — 무엇이 없다고 말하는 것은 뷰가 할 수 없는 일이라
    (낱말은 모델의 것입니다) 자리만 잡습니다.
*/
[data-skin="athena"] .ath-doc-body {
    min-height: 96px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-ink-soft);
}

/*---------------------------------------------------------
    본문 — 운영자가 쓴 글.
---------------------------------------------------------*/



[data-skin="athena"] .ath-detail-date,
[data-skin="athena"] .ath-detail-author {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-detail-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/*
    본문 끝의 「목록으로」 상자(`.ath-detail-foot`)는 없어졌습니다 —
    되돌아가는 문은 이제 판의 바닥 띠 하나이고, 그 띠가 `sticky` 라 긴
    공지에서도 화면에 남아 있습니다. 하나뿐이라 「위의 것과 아래 것 중
    어느 쪽이 진짜인가」가 없습니다.
*/

/* 운영자 HTML 은 폭도 크기도 우리 것이 아닙니다 — 넘치는 것만 가둡니다. */
[data-skin="athena"] .rich {
    overflow-wrap: anywhere;
}

[data-skin="athena"] .rich img,
[data-skin="athena"] .rich video,
[data-skin="athena"] .rich iframe {
    max-width: 100%;
    height: auto;
}

[data-skin="athena"] .rich table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/*---------------------------------------------------------
    고객센터 — 대화.

    말풍선은 헤라의 것이라 안 씁니다. 왼쪽 정렬 평면 항목이고, 내 글은
    **왼쪽 선이 강조색**으로 바뀌는 것으로만 구별합니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-thread {
    display: grid;
    gap: 0;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-turn {
    padding: 14px 0 14px 15px;
    border-bottom: var(--ath-rule-soft);
    border-left: 2px solid var(--color-line);
}

[data-skin="athena"] .ath-turn-mine {
    border-left-color: var(--color-brand);
}

[data-skin="athena"] .ath-turn-author {
    display: block;
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-bubble,
[data-skin="athena"] .ath-bubble-row {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-ink);
}

/*
    회원이 친 글은 줄바꿈을 그대로 (2026-10-20 CS — 「고객문의쪽도 줄바꿈 문제」). 편집기로 쓴 답변(`.rich`)은
    HTML 이라 끕니다 — 켜면 태그 사이 공백이 빈 줄로 찍힙니다.
*/
[data-skin="athena"] .ath-bubble:not(.rich) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
    갈래를 가르는 선은 판 본문을 다 쓰고, 그 안의 글줄만 공지 본문과 같은
    760px 에 멈춥니다. 문의는 왕복 구조라 선까지 좁히면 작은 대화 카드가
    하나 더 생깁니다.
*/
[data-skin="athena"] .ath-turn-author,
[data-skin="athena"] .ath-bubble-row {
    width: 100%;
    max-width: var(--ath-copy-max);
}

[data-skin="athena"] .ath-bubble-time {
    display: block;
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
    고객센터 목록 — 받은편지함.

    표를 없앤 까닭은 `inquiries-view.tsx` 머리말에 있습니다. 여기서는 줄
    하나가 세 층으로 섭니다: 딱지와 제목 / 미리보기 / 상태와 날짜.

    ── 읽는 일과 묻는 일을 갈랐습니다 (2026-09-10) ───────

    이 화면에는 회원이 할 일이 둘 있습니다 — 온 것을 **읽는** 일과 새로
    **묻는** 일. 둘이 한 줄로 위아래에 쌓여 있었고, 그래서 「계좌문의」와
    「문의 작성」이 페이지 맨 아래, 목록이 끝난 자리에 앉아 있었습니다.
    문의가 셋뿐인 회원에게는 괜찮지만 열 건인 회원에게는 스크롤 밖입니다.

    ── 그 답을 뼈대가 물려받았습니다 (둘째 회차) ─────────

    당시의 답은 1280 위의 오른쪽 기둥(`.ath-support-layout`)과 옅은 강조색
    상자(`.ath-ask`)였습니다. 둘 다 **이 화면만의** 것이었고, 그래서 옆의
    공지사항과 나란히 놓으면 다른 화면이었습니다.

    이유는 옮기고 그 화면만의 상자는 버렸습니다. 묻는 두 조작은 판의 바닥
    띠(`shell.css` 의 `.ath-panel-foot`)에 서고, 그 띠는 `sticky` 라 문의가
    열 건인 회원에게도 화면에 남습니다 — 오른쪽 기둥이 풀려던 문제가
    그것이었으므로 풀린 채입니다. 눈에 들어오는 것은 여전히 색이 아니라
    **자리**이고, 이제 그 자리는 여섯 화면이 함께 쓰는 자리입니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-inbox {
    display: block;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-inbox-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-inbox-row:hover {
    background: var(--color-raise);
}

/* 줄 전체가 단추입니다 — 폰에서 제목 글자만 눌리면 손가락보다 좁습니다. */
[data-skin="athena"] .ath-inbox-open {
    flex: 1 1 auto;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 15px 2px;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

[data-skin="athena"] .ath-inbox-open:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

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

[data-skin="athena"] .ath-inbox-top .ath-subject {
    flex: 1 1 240px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: keep-all;
    white-space: normal;
}

[data-skin="athena"] .ath-inbox-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

[data-skin="athena"] .ath-inbox-when {
    min-width: 0;
    font-family: var(--font-numeric);
    font-size: 11px;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

[data-skin="athena"] .ath-inbox-remove {
    flex: none;
    margin-right: 2px;
}

/*
    목록의 마지막 줄 — 전체읽음 · 전체삭제.

    ── 목록 밖에 떠 있었습니다 (2026-09-12) ──────────────

    `.ath-listfoot` > `.ath-toolbar` 두 겹에 싸여 목록 **아래**에 따로
    서 있었습니다. `.ath-listfoot` 은 `space-between` 인데 자식이 하나라
    두 단추는 판의 왼쪽 끝에 붙었고, 20px 아래의 바닥 띠는 오른쪽 끝에
    붙었습니다 — 1440 에서 그 둘 사이가 945px 비어 있었습니다. 같은
    높이의 두 줄이 서로 반대쪽으로 당기고 있었고, 그 둘을 「한 덩어리로
    뭉쳐 있다」고 읽는 것이 맞습니다.

    이제 `.ath-inbox` 의 마지막 자식입니다. 줄들과 같은 머리카락 선
    아래에 서고, 오른쪽 끝은 줄마다 있는 「삭제」와 **같은 세로줄**에
    맞춥니다(그 단추의 `margin-right: 2px` 이 여기 `padding-right` 로
    옵니다). 손이 닿는 것이 한 기둥에 서고, 목록에 딸린 것이라는 사실을
    자리가 말합니다.

    테두리도 면도 없습니다 — 목록의 마지막 줄이 그은 선이 이 줄의
    위쪽 경계입니다.
*/
[data-skin="athena"] .ath-inbox-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 2px 0 0;
}

[data-skin="athena"] .ath-subject,
[data-skin="athena"] .ath-inquiry-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-preview {
    display: block;
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-ink-muted);
    overflow-wrap: anywhere;
    word-break: keep-all;
    white-space: normal;
}

@media (max-width: 767px) {
    /*
        공지의 상태 딱지는 제목 아래로 갑니다. 문의도 같은 차례로: 제목을
        먼저 한 줄 다 주고, 구분·안읽음은 그 아래에 둡니다. DOM 차례는
        보조기술의 「구분 → 안읽음 → 제목」을 그대로 두고 화면 차례만 바꿉니다.
    */
    [data-skin="athena"] .ath-inbox-top .ath-subject {
        order: -1;
        flex-basis: 100%;
    }
}

/*---------------------------------------------------------
    마이페이지.

    ── 두 덩어리가 구획 둘이 되었습니다 (2026-09-10) ─────

    폭 하나(`.ath-mypage`, 760px)와 `.ath-form-section` · `.ath-my-panel` ·
    `.ath-my-lede` 로 카드 한 장 안에서 나뉘어 있었습니다. 넷 다 없어졌고,
    나누는 일은 뼈대의 구획 카드가 합니다 — 읽기만 하는 일곱 줄이 왼쪽,
    고칠 수 있는 한 곳이 오른쪽. 무엇을 만질 수 있는지를 말하는 것이
    이제 테두리이고, 그 테두리는 입금 화면이 「금액」과 「계좌」를 가르는
    것과 같은 것입니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-my-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 0;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-my-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-my-fact-wide {
    grid-column: 1 / -1;
}

/*
    이름은 접히지 않습니다.

    「예금주」가 「예금 / 주」로 두 줄이었습니다. 그 줄의 값 칸에는 값
    (김철수) 말고 안내 한 줄(「예금주는 수정 불가하니…」)이 더 있고, flex 는
    둘 다 줄일 수 있으면 둘 다 줄입니다 — 그래서 세 글자 이름이 먼저
    무너졌습니다. 이름은 이 줄이 무엇에 대한 줄인지이므로 마지막까지 한 줄로
    남고, 접힐 것은 값 쪽입니다.
*/
[data-skin="athena"] .ath-my-fact > dt {
    flex: none;
}

[data-skin="athena"] .ath-my-fact > dd {
    min-width: 0;
    margin: 0;
}

[data-skin="athena"] .ath-my-well {
    text-align: right;
    word-break: break-all;
    color: var(--color-ink);
}

/*
    비밀번호 셋은 한 칸에 하나씩입니다.

    두 칸이었습니다 — 카드 한 장이 지면을 다 쓰던 때의 값입니다. 이제 이
    셋은 판의 오른쪽 구획 안이고, 그 구획은 좁을 때 360px 까지 내려갑니다
    (`shell.css` 의 `.ath-panel-row`). 거기서 두 칸이면 입력칸 하나가
    160px 이고, 「새 비밀번호」 아래 안내 한 줄이 두 줄로 접힙니다.
*/
[data-skin="athena"] .ath-password-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-my-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*---------------------------------------------------------
    충전보너스.
---------------------------------------------------------*/

[data-skin="athena"] .ath-bonus {
    display: block;
}

[data-skin="athena"] .ath-bonus-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
    margin: 10px 0 0;
}

[data-skin="athena"] .ath-bonus-card {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    border: 1px solid var(--color-line);
    border-radius: var(--ath-corner);
    background: none;
    color: var(--color-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

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

/* 고른 것 — 테두리 색과 왼쪽 굵은 선. 면을 칠하지 않습니다. */
[data-skin="athena"] .ath-bonus-card-on {
    border-color: var(--color-brand);
    box-shadow: inset 3px 0 0 var(--color-brand);
}

[data-skin="athena"] .ath-bonus-card-name {
    font-size: 13px;
    font-weight: 600;
}

[data-skin="athena"] .ath-bonus-card-rate {
    font-family: var(--font-numeric);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-gold);
}

[data-skin="athena"] .ath-bonus-card-figs,
[data-skin="athena"] .ath-bonus-card-foot {
    font-size: 11px;
    color: var(--color-ink-muted);
}

/*
    값 칸에 규칙이 하나도 없어서, 두 값이 한 줄로 이어져 흘렀습니다 —
    「받는 보너스2,500P환전 전 배팅 조건262,500원」. 라벨과 숫자 사이도,
    값과 값 사이도 벌어진 데가 없으니 카드를 나란히 둔 이유가 없어집니다
    (`deposit-bonus-view.tsx` 의 「the question is a comparison」).

    좁은 카드에서 한 줄에 라벨과 숫자를 같이 놓으면 어차피 접히므로,
    이 시트가 이미 쓰는 리듬대로 **작은 라벨 아래 값**으로 세웁니다.
*/
[data-skin="athena"] .ath-bonus-card-figs {
    display: grid;
    gap: 7px;
    margin-top: 2px;
}

[data-skin="athena"] .ath-bonus-card-fig {
    display: grid;
    gap: 1px;
}

/* 이 스킨에 기울인 글자는 없습니다 — `em` 은 자리 이름일 뿐입니다. */
[data-skin="athena"] .ath-bonus-card-fig em {
    font-style: normal;
}

/*
    숫자는 금액 얼굴로. 금색은 아닙니다 — 바로 위 요율이 이미 금색이라 한
    카드에 둘이 되고, 견주는 눈이 어디를 봐야 하는지 흐려집니다.
*/
[data-skin="athena"] .ath-bonus-card-fig b {
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-bonus-card-none,
[data-skin="athena"] .ath-bonus-card-bare {
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-bonus-lines {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
    border-top: var(--ath-rule-soft);
}

/* 보너스 구성 — 무엇이 얼마인지. 라벨 왼쪽, 금액 오른쪽. */
[data-skin="athena"] .ath-bonus-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: var(--ath-rule-soft);
    font-size: 13px;
}

[data-skin="athena"] .ath-bonus-label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--color-ink-muted);
}

/* 「자동」 — 회원이 고른 것이 아니라 규칙이 붙인 것이라는 표시. */
[data-skin="athena"] .ath-bonus-auto {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 8px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.04em;
}



[data-skin="athena"] .ath-bonus-note,
[data-skin="athena"] .ath-bonus-legend {
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-bonus-figure,
[data-skin="athena"] .ath-bonus-tag {
    font-family: var(--font-numeric);
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

/*---------------------------------------------------------
    이벤트 — 출석 · 룰렛 · 복권 · 쿠폰.

    달력과 사다리만 자기 모양이 필요하고, 나머지는 위 어휘로 그립니다.

    ── 이름은 있고 규칙이 없던 것들 (2026-09-10) ─────────

    이 네 화면을 판으로 옮기면서 세어 보니, 뷰가 적고 있는데 **시트에 한
    번도 안 나오는** 이름이 아홉이었습니다:

        .ath-ev-side        오른쪽 기둥 — 간격이 없어 카드 여백에 기댔습니다
        .ath-ev-count       카드 머리의 응모권 수 — 조판이 없었습니다
        .ath-ev-legend      달력 아래 범례 — 표식과 낱말이 붙어 있었습니다
        .ath-ev-next*       다음 보상 넷 — 네 줄이 그냥 문단이었습니다
        .ath-ev-ladder      보상 사다리 — 목록 기본값(점과 들여쓰기)
        .ath-ev-seal        도장 — 칸 안에서 숫자 아래로 밀려났습니다
        .ath-ev-day-num     날짜
        .ath-ev-recent-tag  당첨 · 꽝 딱지
        .ath-ev-recent-title 「최근 결과」 제목

    이벤트 화면이 「되기는 하지만 디자인된 적이 없다」는 것의 실제 내용이
    이것입니다 — `.ath-ev-door-text` 하나만 그런 것이 아니었습니다. 앞의
    둘과 마지막 하나는 뼈대의 부품이 자리를 가져갔고(곁말 · 구획 기둥 ·
    곁 구획의 제목), 나머지는 여기 규칙이 생깁니다.

    `.ath-ev-split` 도 없어졌습니다. 두 칸을 가르는 것은 이제 판의
    `.ath-panel-row` 이고, 그것이 입금 화면이 금액과 계좌를 가르는 것과
    같은 격자입니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-ev-month {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--font-numeric);
    font-size: 17px;
    font-weight: 700;
}

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

[data-skin="athena"] .ath-ev-weekdays {
    padding: 0 0 8px;
    border-bottom: var(--ath-rule-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    text-align: center;
}

[data-skin="athena"] .ath-ev-days {
    padding: 8px 0 0;
}

[data-skin="athena"] .ath-ev-day {
    display: grid;
    place-items: center;
    gap: 2px;
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: var(--ath-corner);
    font-family: var(--font-numeric);
    font-size: 13px;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-ev-day-num {
    line-height: 1;
}

/*
    도장. 칸 안에서 날짜 아래 한 줄이고, 낱말은 모델의 것(`stampMark`)
    입니다. 얼굴이 본문 얼굴인 것은 이것이 숫자가 아니기 때문입니다.
*/
[data-skin="athena"] .ath-ev-seal {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-brand);
}

/* 같은 알약이지만 90px 짜리 칸 안입니다 — 24px 은 칸의 3분의 1입니다. */
[data-skin="athena"] .ath-ev-day .ath-ev-badge {
    min-height: 15px;
    padding: 0 6px;
    border-color: var(--color-brand);
    font-size: 9px;
    color: var(--color-brand);
}

[data-skin="athena"] .ath-ev-day-blank {
    border-color: transparent;
}

[data-skin="athena"] .ath-ev-day-stamped {
    border-color: var(--color-brand);
    color: var(--color-brand);
    font-weight: 700;
}

[data-skin="athena"] .ath-ev-day-today {
    border-color: var(--color-line-head);
    color: var(--color-ink);
    font-weight: 700;
}

/*
    달력 아래 범례. 표식과 낱말 사이에 아무것도 없어서 「출석 완료」의
    네모와 글자가 붙어 있었습니다.
*/
[data-skin="athena"] .ath-ev-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-ev-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-skin="athena"] .ath-ev-legend i {
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-brand);
    border-radius: var(--ath-corner);
}

[data-skin="athena"] .ath-ev-legend .ath-ev-legend-today {
    border-color: var(--color-line-head);
}

/*---------------------------------------------------------
    이벤트 목록 — 문 넷.

    ── 무엇이 안 끝나 있었는가 ───────────────────────────

    이 화면은 「되기는 하지만 디자인된 적이 없는」 쪽의 제일 뚜렷한
    예였습니다. 뷰가 1.7 kB 였고, 줄마다 이름과 설명과 `>` 글자 하나였습니다.

    그리고 **고장나 있었습니다.** 뷰는 이름과 설명을 `.ath-ev-door-text` 라는
    상자에 넣는데 그 이름에 걸린 규칙이 **시트에 없었습니다.** 상자가 그냥
    인라인이라 안의 두 span 사이에 아무것도 없었고, 화면에는

        출석체크매일 출석 도장을 찍습니다
        롤렛롤렛권으로 원판을 돌립니다

    이렇게 이름과 문장이 붙어서 한 낱말로 나왔습니다. 1920 에서도 390 에서도
    같았습니다. `.ath-ev-door-go` 도 규칙이 없어 `>` 가 본문 글자 크기의
    맨 글리프였습니다.

    ── 목록이 아니라 문입니다 ────────────────────────────

    회원이 여기서 하는 일은 읽는 것이 아니라 **고르는 것**입니다. 그래서
    한 줄에 하나씩 세로로 쌓는 목록이 아니라, 대문의 빠른메뉴가 쓰는 문법
    그대로 — **한 판 위의 칸들**, 1px 줄금으로만 나뉜 — 격자로 세웁니다
    (`home.css` 의 `.ath-command-dock`). 카드 넷을 만들지 않는 것이 요점이고,
    그 이유는 그 시트 머리말에 적혀 있습니다.

    넓은 화면에서 둘씩 두 줄, 폰에서 한 줄씩입니다. 문이 넷보다 적은
    도메인에서도 칸이 늘어나기만 하지 빈 카드가 생기지 않습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-ev-doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    border: 1px solid var(--color-line-soft);
    border-radius: 18px;
    background: var(--color-line-soft);
    overflow: hidden;
}

[data-skin="athena"] .ath-ev-door {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 16px;
    min-height: 104px;
    padding: 20px 22px;
    background: var(--color-panel);
    color: var(--color-ink);
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

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

/* 대문 도크의 동그란 아이콘 자리와 같은 값입니다 — 같은 문법이라야 같은 집. */
[data-skin="athena"] .ath-ev-door-icon {
    display: grid;
    width: 46px;
    height: 46px;
    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);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

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

/*
    이름과 설명을 **세로로** 갈라 놓는 상자. 이것이 없어서 둘이 붙어
    있었습니다 — 이름만 있고 규칙이 없던 자리입니다.
*/
[data-skin="athena"] .ath-ev-door-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

[data-skin="athena"] .ath-ev-door-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

[data-skin="athena"] .ath-ev-door-what {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-ink-muted);
    /* 「받으신 쿠폰 번호를 입력합니다」가 낱말 가운데서 끊기던 자리입니다. */
    word-break: keep-all;
}

[data-skin="athena"] .ath-ev-door-go {
    display: grid;
    place-items: center;
    color: var(--color-ink-muted);
    transition:
        color 160ms ease,
        transform 160ms ease;
}

[data-skin="athena"] .ath-ev-door:hover .ath-ev-door-go {
    color: var(--color-brand);
    transform: translateX(2px);
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-ev-doors {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 14px;
    }

    [data-skin="athena"] .ath-ev-door {
        min-height: 84px;
        padding: 16px 16px;
        gap: 14px;
        grid-template-columns: 42px minmax(0, 1fr) 14px;
    }

    [data-skin="athena"] .ath-ev-door-icon {
        width: 42px;
        height: 42px;
    }
}

[data-skin="athena"] .ath-ev-meter-track {
    height: 3px;
    border-radius: 999px;
    background: var(--color-line-soft);
    overflow: hidden;
}

[data-skin="athena"] .ath-ev-meter-fill {
    height: 100%;
    background: var(--color-brand);
}

[data-skin="athena"] .ath-ev-meter-met .ath-ev-meter-fill {
    background: var(--color-up);
}

[data-skin="athena"] .ath-ev-meter + .ath-ev-meter {
    margin-top: 16px;
}

[data-skin="athena"] .ath-ev-meter-head,
[data-skin="athena"] .ath-ev-meter-note {
    font-size: 12px;
    color: var(--color-ink-muted);
}

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

[data-skin="athena"] .ath-ev-meter-head > b {
    font-family: var(--font-numeric);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-ev-meter-note {
    margin: 7px 0 0;
}

[data-skin="athena"] .ath-ev-stage {
    display: grid;
    place-items: center;
    gap: 18px;
    padding: 26px 0;
}

[data-skin="athena"] .ath-ev-recent {
    display: grid;
    gap: 0;
    border-top: var(--ath-rule-soft);
}

[data-skin="athena"] .ath-ev-recent-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: var(--ath-rule-soft);
    font-size: 13px;
}

[data-skin="athena"] .ath-ev-recent-when {
    font-family: var(--font-numeric);
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-ev-recent-prize {
    font-family: var(--font-numeric);
    color: var(--color-gold);
    font-weight: 600;
}

/*
    줄의 왼쪽 — 무엇이었는가와 언제였는가. 둘이 붙어 있었습니다
    (`display` 가 없어서 두 span 이 인라인으로 이어졌습니다).
*/
[data-skin="athena"] .ath-ev-recent-head {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

/* 당첨 · 꽝 · 쿠폰 번호 — 이 줄에서 무엇에 대한 영수증인지를 말합니다. */
[data-skin="athena"] .ath-ev-recent-tag {
    color: var(--color-ink);
}

[data-skin="athena"] .ath-ev-recent-empty,
[data-skin="athena"] .ath-ev-recent-blank {
    padding: 22px 0;
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-ev-chips,
[data-skin="athena"] .ath-ev-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[data-skin="athena"] .ath-ev-chip,
[data-skin="athena"] .ath-ev-stat,
[data-skin="athena"] .ath-ev-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 11px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 12px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-ev-chip-live,
[data-skin="athena"] .ath-ev-stat-live {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/* 세어진 것의 알약 — 라벨과 값 사이. 둘이 붙어 있었습니다. */
[data-skin="athena"] .ath-ev-stat {
    gap: 7px;
}

[data-skin="athena"] .ath-ev-stat > strong {
    font-family: var(--font-numeric);
    font-weight: 700;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* 사다리. 목록의 기본 간격은 0 이라 여덟 줄이 붙어 있었습니다. */
[data-skin="athena"] .ath-ev-ladder {
    display: grid;
    gap: 9px;
}

[data-skin="athena"] .ath-ev-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-ink-muted);
}

/* 「3일차」가 다 다른 폭이면 그 오른쪽의 딱지들이 줄마다 어긋납니다. */
[data-skin="athena"] .ath-ev-step > b {
    flex: none;
    min-width: 52px;
}

[data-skin="athena"] .ath-ev-step-now {
    color: var(--color-brand);
    font-weight: 600;
}

[data-skin="athena"] .ath-ev-step-done {
    color: var(--color-up-text);
}

/*---------------------------------------------------------
    다음 보상 — 남은 시간과, 그때 무엇이 오는가.

    네 이름(`.ath-ev-next` · `-head` · `-count` · `-day`)이 전부 시트에
    없었습니다. 두 상자가 그냥 블록으로 쌓이고 네 줄이 같은 크기 같은
    색이라, 「다음 보상까지 / 2일 / 5일차에 지급됩니다」가 한 문단으로
    읽혔습니다. 남은 수가 이 구획의 답이므로 그것만 큽니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-ev-next {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

[data-skin="athena"] .ath-ev-next-head {
    margin: 0;
    font-size: 11px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-ev-next-count {
    margin: 5px 0 0;
    font-family: var(--font-numeric);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-ev-next-day {
    margin: 0 0 7px;
    font-size: 11px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-ev-next .ath-ev-chips {
    justify-content: flex-end;
}

/*---------------------------------------------------------
    쿠폰 번호 칸.

    `.ath-ev-code` 는 위 알약 셋과 한 규칙이었습니다 — 24px 높이에
    999px 모서리, 12px 글자. 딱지에 맞는 값이고 열다섯 자를 치는 칸에
    맞는 값이 아닙니다. `type` 도 없어서 시트의 입력칸 규칙
    (`input[type="text"]`)에도 안 걸렸고, 그래서 이 화면의 유일한 조작이
    어느 규칙도 안 받고 있었습니다.

    번호는 숫자 얼굴에 자간을 줍니다 — 「A23456B」를 한 글자씩 견주며
    읽는 자리이고, 0·O 와 1·I 를 운영자가 애초에 안 쓰는 이유도 그것
    입니다(`copy.hint`).
---------------------------------------------------------*/

[data-skin="athena"] .ath-ev-ticket {
    min-width: 0;
    max-width: 420px;
}

/* `input.` 인 것은 무게 때문입니다 — 위의 `input[type="text"]` 규칙과
   같은 무게라야 나중에 실린 이쪽이 이깁니다. */
[data-skin="athena"] .ath-screen input.ath-ev-code {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid var(--color-line-head);
    border-radius: var(--ath-corner);
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: var(--font-numeric);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

[data-skin="athena"] .ath-screen input.ath-ev-code::placeholder {
    color: var(--color-ink-muted);
    font-weight: 500;
    letter-spacing: 0.08em;
}

/*---------------------------------------------------------
    포인트 · 테더의 남은 조각.
---------------------------------------------------------*/

/*---------------------------------------------------------
    원장 — 신청 내역 · 포인트.

    칸 폭을 모델이 정합니다 (`--ath-cols`). 아래 `--ath-min-*` 는 그 몫이
    아무리 좁아져도 **글자보다 좁아지지 않게** 하는 바닥입니다. 재서 고른
    값이고, 몫이 바닥보다 넓은 칸은 이 값에 안 걸립니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-listbox {
    --ath-min-date: 148px;
    --ath-min-processed: 148px;
    --ath-min-amount: 104px;
    --ath-min-usdt: 92px;
    --ath-min-type: 74px;
    --ath-min-status: 78px;
    /*
        포인트 원장의 두 칸 — 잔액과 메모. 이름이 낙타등인 것은 `track()` 이
        모델의 열쇠를 그대로 붙이기 때문입니다 (`balanceAfter`). 사용자 정의
        속성은 대소문자를 가리므로 여기서도 그대로 씁니다.
    */
    --ath-min-balanceAfter: 104px;
    --ath-min-memo: 132px;
    display: block;
}

/* 오른 값과 내린 값. 뜻이 있는 색이라 조합을 안 탑니다. */
[data-skin="athena"] .ath-up {
    color: var(--color-up-text);
}

[data-skin="athena"] .ath-down {
    color: var(--color-down-text);
}

/* 이 안에서 `.ath-row` 는 라벨/값 줄이 아니라 **격자 한 줄**입니다. */
[data-skin="athena"] .ath-listbox .ath-listhead,
[data-skin="athena"] .ath-listbox .ath-row {
    display: grid;
    grid-template-columns: var(--ath-cols);
    align-items: center;
    gap: 12px;
    justify-content: initial;
    padding: 12px 2px;
}

[data-skin="athena"] .ath-listbox .ath-row {
    border-bottom: var(--ath-rule-soft);
    font-size: 13px;
}

[data-skin="athena"] .ath-listbox .ath-row:hover {
    background: var(--color-raise);
}

/* 격자 줄 안에서는 라벨 색 규칙이 안 통합니다 — 첫 칸도 그냥 칸입니다. */
[data-skin="athena"] .ath-listbox .ath-row > :first-child,
[data-skin="athena"] .ath-listbox .ath-row > :last-child {
    flex: initial;
    font-size: inherit;
    color: inherit;
    text-align: initial;
    word-break: normal;
}

[data-skin="athena"] .ath-listbox .ath-col {
    text-align: center;
}

[data-skin="athena"] .ath-listbox .ath-col-date,
[data-skin="athena"] .ath-listbox .ath-col-processed {
    text-align: left;
}

/* 원화 원장만 금액 앞에 통화 기호를 답니다. */
[data-skin="athena"] .ath-listbox-won .ath-col-amount .ath-amount-value::before {
    content: "₩";
    margin-right: 3px;
    font-size: 0.78em;
    opacity: 0.7;
}

[data-skin="athena"] .ath-listbox .ath-amount-value {
    font-size: 14px;
}

[data-skin="athena"] .ath-listbox-won .ath-figure,
[data-skin="athena"] .ath-listbox-point .ath-figure {
    color: var(--color-gold);
    font-weight: 600;
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-listbox .ath-listhead {
        display: none;
    }

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

    [data-skin="athena"] .ath-listbox .ath-row > [data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
    }

    [data-skin="athena"] .ath-listbox .ath-row > [data-label]::before {
        content: attr(data-label);
        flex: none;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--color-ink-muted);
    }
}

[data-skin="athena"] .ath-point-amount,
[data-skin="athena"] .ath-final-value {
    font-family: var(--font-numeric);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

[data-skin="athena"] .ath-final-amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: var(--ath-rule-head);
}

[data-skin="athena"] .ath-final-label {
    font-size: 13px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-address {
    font-family: var(--font-numeric);
    font-size: 13px;
    word-break: break-all;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-rate,
[data-skin="athena"] .ath-header-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

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

[data-skin="athena"] .ath-header-rate-taken {
    font-family: var(--font-numeric);
    color: var(--color-gold);
    font-weight: 600;
}

[data-skin="athena"] .ath-change-log {
    font-size: 12px;
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
    입금 · 출금 폼의 **옛** 어휘는 없어졌습니다 (2026-09-10).

    `.ath-form-balance` · `.ath-form-facts` · `.ath-form-aside` ·
    `.ath-bank-inquiry*` 일곱 규칙이 여기 있었고, **아무 뷰도 안 부르고
    있었습니다.** 입금 화면이 단계형 작업공간으로 옮겨 가면서 남은 것인데,
    남아 있는 동안 그것들은 보유머니 칩과 계좌 줄과 계좌문의의 **두 번째
    구현**이었습니다 — 다음 사람이 「이미 있네」 하고 부르면 그 화면만 다른
    수로 그려집니다.

    지금 자리: 보유머니 칩은 `shell.css` 의 `.ath-panel-chip`, 계좌 두 줄과
    계좌문의는 `money.css` 의 `.ath-money-fact` · `.ath-money-ask`.
---------------------------------------------------------*/

/*---------------------------------------------------------
    `.ath-lobby-toast` 가 여기 있었습니다 (2026-09-17).

    「게임 실패 알림 — 화면 **아래** 떠 있는 한 줄」이라고 적혀 있었고, 그
    자리가 운영자가 「맨묍에뜨네」라고 말한 자리입니다. 다섯 스킨이 각자
    아래쪽에 자기 것을 띄우고 있었습니다.

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