/*---------------------------------------------------------
    아테나 — 돈을 다루는 네 화면.

    입금하기 · 출금하기 · 테더 입출금 · 포인트 전환.

    ── 이 파일이 `deposit.css` 였습니다 ──────────────────

    입금·출금만 이 값들을 쓰던 동안에는 그 이름이 맞았습니다. 그동안
    포인트전환과 테더는 각자 답을 냈고, 그래서 금액을 넣는 칸이 이 사이트에
    **세 가지**였습니다:

        입금·출금    82px 높이의 상자, 48px 숫자, 4열 격자의 각진 칩
        포인트전환   2px 밑줄, 32px 숫자, 999px 알약 칩 여섯 + 딴 줄에 둘
        테더         상자 이름만 붙고 규칙이 안 걸린 자리 (아래 참고)

    운영자가 고른 기준이 입금하기이므로 나머지 둘이 이쪽으로 옵니다. 넷이
    한 어휘를 쓰게 되었으니 파일 이름도 그 사실을 말합니다.

    ── 뼈대는 여기 없습니다 ──────────────────────────────

    판 · 머리 · 칩 · 구획 카드 · 바닥 띠는 `shell.css` 로 나갔고, 아홉 화면이
    그것을 함께 씁니다. 여기 남은 것은 **돈 화면만 다시 정하는 것**입니다 —
    금액 칸의 크기, 칩 격자의 열 수, 계좌 두 줄, 보너스 카드, 회수 조작.

    울타리가 `.ath-money-panel` 인 것이 그 경계입니다. 이 이름이 안 붙은
    판(공지사항 · 이벤트 · 마이페이지)은 이 파일의 어느 줄에도 안 걸립니다.
---------------------------------------------------------*/

/*
    네 화면이 같은 폭입니다.

    입금만 1280 이었고 출금은 `.ath-screen` 기본값 1180 이었습니다. 같은
    마크업에 같은 두 칸 작업공간인데 한쪽만 100px 넓어서, 머리띠에서
    「입금하기 → 출금하기」로 옮기면 판의 양 끝이 눈에 띄게 움직였습니다.
    포인트전환도 1180 이었습니다.

    넓은 쪽이 맞습니다 — 두 칸이 들어가는 폭은 넷 다 같습니다. 그리고 폭이
    같아야 나란히 놓고 「같은 집인가」를 볼 수 있습니다.
*/
/*
    ── 간격은 여기 없습니다 (2026-09-12) ─────────────────

    이 규칙에 `gap: 42px` 이 있었습니다. 판과 곁 구획 사이를 정하는 값인데,
    같은 관계를 `.ath-card` 의 아래쪽 여백(32px)도 정하고 있었습니다. 둘이
    겹쳐서 돈 화면의 곁 구획끼리는 **74px**, 판과 첫 곁 구획은 42px, 그리고
    이 격자를 안 쓰는 이벤트 화면 넷은 **0px** 이었습니다.

    한 관계에 주인이 둘이면 그중 하나만 고치는 날이 옵니다. 지금 주인은
    `shell.css` 의 `.ath-screen > * + .ath-card` 하나이고 값은 `--ath-gap`
    입니다. 격자는 남깁니다 — 여백이 서로 겹치지 않게 하는 것은 여전히
    이쪽 일입니다.
*/
[data-skin="athena"] .ath-money-page {
    display: grid;
    max-width: 1280px;
}

/*
    안내사항의 읽는 폭.

    이 문단은 1280 짜리 지면에서 한 줄로 흘렀습니다 — 출금의 안내는 예금주
    일치와 점검 시간과 취소 환급을 한 문장에 담고 있어서, 1200px 한 줄이
    되면 다음 줄 첫 글자를 눈이 못 찾습니다. 판이 아니라 폭만 정합니다.
*/
[data-skin="athena"] .ath-money-page .ath-notice-wrap {
    max-width: 900px;
}

/*---------------------------------------------------------
    바닥 띠는 여기 없습니다 (2026-09-14).

    이 자리에 돈 화면만의 띠 규칙이 있었습니다 — `position: static` 으로
    공용 띠의 `sticky` 를 풀고, 그 김에 본문↔띠와 띠 안쪽 여백까지 다시
    답했습니다. 고칠 때는 「돈 울타리 안에서만 움직인다」가 조심스러운
    선택으로 보였는데, 실제로 생긴 것은 **한 관계에 주인이 둘**이었습니다.

    그 값을 치른 결과가 재 보니 이렇습니다. 마지막 구획과 띠 사이:

        돈 넷                32px   ← 이 규칙
        고객센터 · 쿠폰      20px   ← 공용 규칙
        마이페이지            0px   ← 공용 규칙이 빈 알림에 지워짐

    그리고 돈 넷이 맞았던 것도 이 규칙이 옳아서가 아니라 **구체성이 높아
    우연히 이겼기** 때문입니다. 지금은 띠의 자리를 `shell.css` 하나가
    정하고, 풀어야 할 `sticky` 자체가 거기서 없어졌습니다.

    여기 남는 것은 돈 화면이 **정말로** 다시 정하는 것들뿐입니다 — 금액
    칸의 크기, 칩 격자의 열 수, 계좌 두 줄, 보너스 카드, 회수 조작.
---------------------------------------------------------*/

/*---------------------------------------------------------
    금액 칸.

    ── 테더에서 이 이름이 **상자에 붙어 있었습니다** ─────

    `.ath-amount-input` 은 시트에서 **입력칸 자신**의 규칙입니다 (48px,
    `flex: 1 1 auto`). 테더 뷰가 그 이름을 입력칸을 **담는 div** 에 붙여
    놨고, 그래서 그 div 는 flex 가 아니었고 안의 `input` 과 단위 `span` 이
    그냥 인라인으로 흘렀습니다. 결과가 배포본에 그대로 있었습니다:

        · 「최소 10 USDT · 소수점 둘째 자리까지」 가 「…둘째 지」 에서 잘림
        · 390 에서 지면이 가로로 48px 넘침

    포인트전환이 2026-09-10 에 정확히 같은 실수로 고쳐졌는데 (거기서는
    390 에서 「P」가 혼자 다음 줄로 떨어졌습니다) 테더 두 장은 안 고쳐졌습니다.
    한 화면씩 다듬으면 이렇게 됩니다 — 같은 결함이 옆 화면에 남아 있는 것을
    아무도 못 봅니다. 이제 넷이 같은 상자(`.ath-amount-group`)를 씁니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-money-panel .ath-amount {
    margin: 0;
}

[data-skin="athena"] .ath-money-panel .ath-amount-group {
    min-height: 82px;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--color-line);
    border-radius: 15px;
    background: var(--color-panel);
}

[data-skin="athena"] .ath-money-panel .ath-amount-group:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 4px
        color-mix(in srgb, var(--color-brand) 11%, transparent);
}

[data-skin="athena"] .ath-screen .ath-money-panel .ath-amount-input {
    padding: 0;
    font-size: clamp(34px, 4vw, 48px);
}

/*
    테더의 두 칸 — 원화와 USDT.

    둘이 한 결정입니다 (어느 쪽을 치든 다른 쪽이 따라옵니다). 그래서 나란히
    두고, 라벨은 상자 **위**에 붙입니다 — 상자 안에 넣으면 48px 숫자 옆에서
    12px 라벨이 밑선을 못 맞춥니다.
*/
[data-skin="athena"] .ath-money-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

[data-skin="athena"] .ath-money-pair {
    display: grid;
    gap: 6px;
    min-width: 0;
}

[data-skin="athena"] .ath-money-pair > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink-muted);
}

/*
    USDT 는 원화보다 자릿수가 짧고 소수점이 붙습니다. 48px 로 두면 한 상자에
    「12,345,600」이 있고 옆 상자에 「9.08」이 있어 크기만 크고 비어 보입니다.
*/
[data-skin="athena"] .ath-screen .ath-money-pair .ath-amount-input {
    font-size: clamp(26px, 2.6vw, 34px);
}

/*---------------------------------------------------------
    금액 칩.

    ── 알약이 아니라 사각형입니다 ────────────────────────

    포인트전환에서 이것이 `999px` 알약이었습니다. 이 스킨에서 알약은
    **조작**의 표시이고 (`palette.css`: 「면은 각지고 조작은 완전히
    둥급니다」), 금액 칩은 조작이라기보다 **고르는 값**입니다. 입금·출금이
    각진 사각형을 4열로 세우는 쪽이 기준이므로 넷이 그렇게 섭니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-money-panel .ath-amount-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

[data-skin="athena"] .ath-money-panel .ath-btn-amount {
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    border-radius: var(--ath-corner);
}

/*
    빠른 금액은 채운 주요 단추가 아닙니다. 면을 한 단만 올리고 흐린 글자색을
    78% 쓴 선을 둘러 **보조 조작**으로 보이게 합니다. 배포본의 선 대비는
    슬레이트 1.63:1, 밝은 조합 1.44:1이었고 높이는 39px였습니다.
*/
[data-skin="athena"] .ath-money-panel
    .ath-btn-amount:not(.ath-money-max, .ath-money-reset) {
    border-color: color-mix(in srgb, var(--color-ink-muted) 78%, transparent);
    background: var(--color-raise);
}

[data-skin="athena"] .ath-money-panel
    .ath-btn-amount:not(.ath-money-max, .ath-money-reset):hover:not(:disabled) {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-raise));
    color: var(--color-ink);
}

/* 전액은 값을 통째로 채우는 조작 — 단단한 선과 옅은 강조 면. 공용 규칙보다
   돈 울타리 규칙의 구체성이 높아 면이 사라지던 것도 이 자리에서 바로잡습니다. */
[data-skin="athena"] .ath-money-panel .ath-money-max {
    border-color: color-mix(in srgb, var(--color-brand) 58%, var(--color-line));
    background: color-mix(in srgb, var(--color-brand) 10%, transparent);
    color: var(--color-brand);
    font-weight: 700;
}

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

/* 정정은 고르는 값이 아니라 지우는 조작입니다. 색을 못 보더라도 점선으로
   빠른 금액·전액과 갈립니다. */
[data-skin="athena"] .ath-money-panel .ath-money-reset {
    border-color: color-mix(in srgb, var(--color-ink-muted) 78%, transparent);
    border-style: dashed;
    background: none;
    color: var(--color-ink-nav);
}

[data-skin="athena"] .ath-money-panel .ath-money-reset:hover:not(:disabled) {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
    color: var(--color-ink);
}

[data-skin="athena"] .ath-money-panel .ath-btn-amount:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

[data-skin="athena"] .ath-money-panel .ath-btn-amount:disabled {
    border-color: var(--color-line-soft);
    background: none;
    color: var(--color-ink-muted);
}

/*
    정정은 금액 칩이 아니라 상자를 비우는 조작이므로 남는 칸을 메웁니다.

    칩이 몇인지가 화면마다 다릅니다:

        입금 · 테더입금 · 테더출금    여섯 + 정정        = 일곱
        출금 · 포인트전환             여섯 + 전액 + 정정 = 여덟

    여덟은 4열 두 줄을 정확히 채우므로 손댈 것이 없습니다. 일곱은 둘째 줄
    마지막 칸이 비므로 정정이 그 칸까지 씁니다.

    칩이 여섯이라는 것에 기대고 있습니다. `money-fields.spec.ts` 가
    `QUICK_AMOUNTS` 의 여섯 값과 이름을 그대로 못박고 있으니, 목록을 늘리는
    사람은 그 시험을 먼저 지나야 하고 여기도 같이 보게 됩니다.
*/
[data-skin="athena"] .ath-money-panel-deposit .ath-amount-buttons .ath-btn-reset,
[data-skin="athena"] .ath-money-panel-tether .ath-amount-buttons .ath-btn-reset {
    grid-column: span 2;
}

/*---------------------------------------------------------
    계좌 두 줄 — 예금주와 계좌번호.
---------------------------------------------------------*/

[data-skin="athena"] .ath-money-facts {
    display: grid;
    gap: 9px;
}

[data-skin="athena"] .ath-money-fact {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--color-panel);
}

[data-skin="athena"] .ath-money-fact > small {
    flex: none;
    font-size: 11px;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-money-fact > strong {
    overflow: hidden;
    font-size: 13px;
    text-align: right;
    color: var(--color-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    「등록된 계좌가 아직 없습니다」.

    이 자리에 값 없는 라벨 둘이 서 있었습니다 — `예금주 -` 와 `계좌번호 -`.
    계좌를 등록하지 않은 회원에게는 구획 하나가 통째로 「-」 두 개였고,
    고장난 것처럼 보이면서 무엇을 해야 하는지는 어디에도 없었습니다. 지금은
    한 줄로 사실을 말하고, 바로 아래 계좌문의가 할 일을 말합니다.

    판정은 `model.accountKnown` 의 것입니다 — 뷰는 「-」가 없음을 뜻한다는
    것을 알지 못합니다.
*/
[data-skin="athena"] .ath-money-fact-none {
    display: flex;
    min-height: 58px;
    align-items: center;
    margin: 0;
    padding: 0 14px;
    border: 1px dashed var(--color-line);
    border-radius: 12px;
    background: none;
    color: var(--color-ink-nav);
    font-size: 13px;
}

/*---------------------------------------------------------
    계좌문의 — 조작이 든 자리.

    ── 금색을 걷어냈습니다 (2026-09-08) ──────────────────

    이 상자와 그 단추가 `--color-gold`(=`--t-money`)를 입고 있었습니다. 이
    사이트에서 따뜻한 금색은 **금액**과 ATHENA 워드마크입니다 — 조작 하나가
    금색을 입으면 그것이 두 번째 강조색이 되고, 1920 스크린샷에서 이 상자가
    화면에서 제일 눈에 띄는 것으로 나왔습니다.

    상자를 쓰는 것이 「카드가 없다」와 어긋나 보이지만, 이것은 구획이 아니라
    **조작이 든 자리**입니다. 고객센터의 「계좌문의」도 금색이었고 같은 답을
    썼는데(`screens.css` 의 `.ath-ask`), 그 화면이 판으로 옮겨 오면서 그
    상자는 없어졌습니다 — 거기서는 계좌문의가 판의 바닥 띠에 서고
    (`shell.css` 의 `.ath-panel-side`), 자리가 이미 세기를 말합니다.
    여기는 구획 **안**의 조작이라 띠에 못 올리고, 그래서 상자가 남습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-money-ask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 13px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 42%, var(--color-line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-panel));
}

[data-skin="athena"] .ath-money-ask > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--color-brand);
}

[data-skin="athena"] .ath-money-ask > span > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

[data-skin="athena"] .ath-money-ask strong {
    font-size: 12px;
    color: var(--color-ink);
}

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


[data-skin="athena"] .ath-money-ask-go {
    display: inline-flex;
    flex: none;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--color-brand);
    color: var(--t-accent-ink, #fff);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    /* 번짐 고리도 함께 없앴습니다 — 이 스킨은 그림자·번짐·경사가 없습니다. */
}

[data-skin="athena"] .ath-money-ask-go:disabled {
    background: var(--color-raise);
    color: var(--color-ink-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/*---------------------------------------------------------
    테더 주소.
---------------------------------------------------------*/

[data-skin="athena"] .ath-money-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: 13px;
    background: var(--color-panel);
}

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

/*---------------------------------------------------------
    신청 내역 상태.

    실제 `core.money_request_status`는 PENDING · APPROVED · REJECTED 셋입니다.
    CANCELLED는 0102에서 REJECTED로 옮긴 뒤 enum에서 빠졌습니다. 배포본에서는
    셋 모두 21px 회색 실선 알약이라 글자를 읽기 전에는 구별되지 않았습니다.

    색은 뜻을 돕되, 색을 걷어도 모양이 남습니다:
      대기   점선 + 빈 원
      완료   옅은 채움 + 체크
      거절   빈 면 + X
---------------------------------------------------------*/

[data-skin="athena"] .ath-money-status {
    gap: 5px;
    min-height: 26px;
    padding-inline: 9px;
    font-size: 12px;
    font-weight: 700;
}

[data-skin="athena"] .ath-money-status::before {
    display: inline-grid;
    flex: none;
    place-items: center;
    line-height: 1;
}

[data-skin="athena"] .ath-money-status-pending {
    border-style: dashed;
    border-color: var(--ui-alert-warn-line);
    background: none;
    color: var(--ui-alert-warn-ink);
}

[data-skin="athena"] .ath-money-status-pending::before {
    content: "";
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

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

[data-skin="athena"] .ath-money-status-approved::before {
    content: "✓";
    font-size: 11px;
    font-weight: 900;
}

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

[data-skin="athena"] .ath-money-status-rejected::before {
    content: "×";
    font-size: 14px;
    font-weight: 900;
}

/*---------------------------------------------------------
    충전보너스 — 뼈대의 구획 안에서 격자만 다시 정합니다.
---------------------------------------------------------*/

/* 구획의 머리가 이미 「충전보너스」라고 말합니다. */
[data-skin="athena"] .ath-money-panel .ath-bonus-legend {
    display: none;
}


/*
    넷이 한 줄에 안 들어가는 폭에서 줄마다 높이가 다릅니다 — 값이 붙은 줄이
    크고, 지급이 없는 줄은 `min-height` 에 머뭅니다. **그대로 둡니다.**

    `grid-auto-rows: 1fr` 로 맞춰 봤고, 되돌렸습니다. 값 칸에 조판이 생긴 뒤
    첫 줄이 227px 인데 지급 없는 둘째 줄은 128px 이라, 맞추면 아래 두 카드가
    각각 99px 를 비워 둔 채 섭니다. 운영자가 지적한 것이 정확히 그
    빈자리(316px·240px)이므로, 할 말이 적은 카드를 늘려 빈자리를 만드는
    것보다 줄 높이가 다른 편이 낫습니다. 한 줄 안의 카드끼리는 어차피
    `stretch` 로 같고, 격자의 아랫변도 고릅니다.
*/
[data-skin="athena"] .ath-money-panel .ath-bonus-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

[data-skin="athena"] .ath-money-panel .ath-bonus-card {
    min-height: 142px;
    padding: 15px;
    border-radius: 13px;
    background: var(--color-panel);
    /* 좁은 칸에서 「환전 전 배팅 조건」이 낱말 가운데서 끊겼습니다. */
    word-break: keep-all;
}

[data-skin="athena"] .ath-money-panel .ath-bonus-card-on {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-panel));
    box-shadow: inset 3px 0 0 var(--color-brand);
}

/*---------------------------------------------------------
    게임머니 회수 — 공용 컨트롤을 이 스킨의 모양으로 (2026-09-10)
---------------------------------------------------------*/

/*
    `VendorRecallControl` 은 다섯 스킨과 배팅카트가 함께 쓰는 부품이고, 색과
    모서리를 **인라인 스타일로** 들고 있습니다 — 테두리
    `rgba(232, 118, 34, 0.72)`, 면 `#e87622`, 모서리 3px, 꺼진 면 `#283548`,
    글자 `#a9b6c8`. 전부 제우스의 값입니다.

    그래서 아테나의 출금 화면에서 게임사에 머니가 남아 있는 회원은 **주황
    단추**를 봅니다. 이 사이트에 주황은 없습니다. 데모 계정은 남은 머니가
    0 이라 꺼진 꼴만 찍혀서 스크린샷으로는 「어두운 띠」로 지나가고, 실제
    회원에게만 주황이 뜹니다. 밝은 조합(화이트·모래)에서는 꺼진 꼴조차
    모래빛 지면 위의 남색 덩어리입니다.

    부품을 고치지 않는 것은 그것이 다섯 스킨과 배팅카트의 것이기 때문입니다.
    아폴로와 포세이돈이 이미 같은 자리를 자기 시트에서 다시 답하고 있고
    (`apollo/account.css` · `poseidon/money.css`), 그 파일들이 적어 둔 대로
    **인라인 스타일 위라서 `!important` 가 필요합니다 — 이 한 곳만.**

    폭은 `!important` 없이 이깁니다. 부품이 자기 폭을 `width: 100%` 로 들고
    있어서 1280 짜리 판에서 단추 하나가 600px 짜리 알약이 되고 그 위의
    「카지노 보유머니 … 0원」은 라벨과 값이 600px 떨어져 섰는데, `max-width`
    는 인라인의 `width` 와 **다른 속성**이라 그냥 적용됩니다.
*/
[data-skin="athena"] .ath-money-panel [data-vendor-recall-control] {
    max-width: 420px;
    gap: 10px !important;
}

/* 「카지노 보유머니」 줄 — 라벨은 조용하게, 금액은 이 스킨의 돈 색으로. */
[data-skin="athena"] [data-vendor-recall-control] > div {
    font-size: 12px !important;
    color: var(--color-ink-muted) !important;
}

[data-skin="athena"] [data-vendor-recall-control] > div strong {
    font-family: var(--font-numeric);
    font-size: 15px !important;
    color: var(--color-gold) !important;
    font-variant-numeric: tabular-nums;
}

/* 조작은 알약입니다 — 이 스킨에서 3px 모서리는 다른 사이트의 것입니다. */
[data-skin="athena"] [data-vendor-recall-control] button {
    min-height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ui-btn-radius) !important;
    background: var(--ui-btn-primary-bg) !important;
    color: var(--ui-btn-primary-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

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

/*
    네 가지 뜻, 밝은 조합에서도 읽히게.

    부품이 찍는 색은 어두운 바탕을 전제로 고른 것이라(`STATUS_COLOUR`)
    모래빛 지면에서는 넷 다 흐려집니다. 뜻은 `data-tone` 이 들고 있으므로
    여기서 조합을 타는 값으로 다시 답합니다.
*/
[data-skin="athena"] [data-vendor-recall-control] p {
    font-size: 12px !important;
    color: var(--color-ink-muted) !important;
}

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

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

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

/*---------------------------------------------------------
    좁은 폭. 끊는 폭은 셋뿐입니다 — 767 · 1023 · 1279.
---------------------------------------------------------*/

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

@media (max-width: 767px) {
    /* 여기 `gap: 30px` 이 있었습니다 — 넓은 폭의 42 와 같은 갈래이고 같은
       까닭으로 없앴습니다. 위 `.ath-money-page` 문단 참고. */

    [data-skin="athena"] .ath-money-panel .ath-amount-group {
        min-height: 70px;
        padding-inline: 13px;
    }

    [data-skin="athena"] .ath-screen .ath-money-panel .ath-amount-input {
        font-size: 31px;
    }

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

    [data-skin="athena"] .ath-screen .ath-money-pair .ath-amount-input {
        font-size: 24px;
    }

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

    /* 3열에서는 칩 여섯이 두 줄을 정확히 채우므로 정정이 셋째 줄에 혼자
       남습니다. 줄을 통째로 씁니다. 여덟인 화면은 여섯 + 둘이라 이미
       셋째 줄이 반쯤 차 있고, 전액 옆에 정정이 서는 편이 맞습니다. */
    [data-skin="athena"] .ath-money-panel-deposit .ath-amount-buttons .ath-btn-reset,
    [data-skin="athena"] .ath-money-panel-tether .ath-amount-buttons .ath-btn-reset {
        grid-column: span 3;
    }

    [data-skin="athena"] .ath-money-ask {
        flex-direction: column;
        align-items: stretch;
    }

    [data-skin="athena"] .ath-money-ask-go {
        width: 100%;
    }

    [data-skin="athena"] .ath-money-panel .ath-bonus-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    [data-skin="athena"] .ath-money-panel .ath-bonus-card {
        min-height: 128px;
        padding: 12px;
    }
}