/*---------------------------------------------------------
    아테나 — 배팅내역.

    ── 왜 자기 시트인가 ──────────────────────────────────

    `screens-sports.css` 안에 판·카트와 함께 있었습니다. 셋은 같은 메뉴
    아래 있을 뿐 같은 화면이 아닙니다 — 판은 값이 흐르는 목록이고, 카트는
    따라다니는 기둥이며, 내역은 **끝난 일에 대한 문서**입니다. 한 시트에
    두면 어느 규칙이 어느 화면 것인지 이름으로만 갈리고, 그 갈림은 다음
    사람이 안 지킵니다. 돈 화면 넷이 `money.css` 를 갖는 것과 같은 모양입니다.

    울타리는 `[data-skin="athena"] .ath-bethistory` 아래이거나, 이 화면만
    쓰는 이름(`.ath-slip*` · `.ath-detail*` · `.ath-bet-*`)입니다. 다른 판에
    닿을 수 없습니다.

    ── 이 화면이 말해야 하는 것 ──────────────────────────

    적중 · 미적중 · **적특**. 셋이 회원의 돈에 일어난 서로 다른 일이고,
    적특은 **진 것이 아닙니다** — 경기가 무효가 되어 배당 1.0 으로 곱에서
    빠지고, 폴 수도 줄어 보너스 자격이 달라집니다. 전부 적특이면 환급입니다.

    그래서 딱지 셋이 **다른 색이 아니라 다른 종류**입니다:

        적중    채운 것.   이 화면에서 면을 가진 유일한 딱지입니다.
        미적중  선.        면이 없습니다 — 흔한 결말이 화면을 덮지 않게.
        적특    빗금.      이 스킨에서 빗금은 이미 「지금 놀고 있는 자리」이고
                           (판의 막힌 배당 칸), 적특이 바로 그 뜻입니다.
        대기    강조색 선. 아직 도는 것 — 이 판에서 유일하게 살아 있는 줄.
        취소    빗금, 더 흐리게.

    그리고 적특 다리는 **배당에 취소선**이 그어집니다. 딱지는 「무효」까지만
    말하고, 곱에서 빠졌다는 것은 숫자 자신이 말합니다.

    색만으로 말하지 않는 것도 규칙입니다 — 채움·선·빗금은 색을 못 보는
    사람에게도 세 가지입니다.

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

/*---------------------------------------------------------
    슬립 목록.
---------------------------------------------------------*/

[data-skin="athena"] .ath-slip-list {
    display: grid;
    gap: 14px;
}

/*
    슬립 하나가 문서입니다 — 머리 · 본문 · 발.

    전에는 셋이 한 회색 띠 안에 다 들어 있었고, 그래서 슬립의 **결말**이
    배팅 시각과 같은 크기로 줄 맨 끝에 서 있었습니다. 훑을 때 제일 먼저
    보여야 하는 것이 제일 안 보이는 자리에 있었던 것입니다.

    면은 구획 카드와 같습니다 — 판 속에서 한 단 뜬 자리.
*/
[data-skin="athena"] .ath-slip {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 17px;
    background: var(--color-base);
}

[data-skin="athena"] .ath-slip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--color-line-head);
}

[data-skin="athena"] .ath-slip-fold {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-slip-state {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

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

/*
    머리의 딱지는 한 단 큽니다 — 이것이 슬립의 답입니다.

    `.ath-slip-state .ath-bet-tag` 로 적으면 안 됩니다. 알약의 모양은
    `screens.css` 가 정하고, 그 이름을 여기서 다시 잡으면 두 시트가 한 이름을
    나눠 갖습니다. 따로 이름을 하나 두는 쪽이 맞습니다 — 이미 있는
    `.ath-bet-tag-sm` 의 짝입니다.
*/
[data-skin="athena"] .ath-bet-tag-lg {
    min-height: 26px;
    padding: 0 14px;
    font-size: 12px;
}

[data-skin="athena"] .ath-slip-body {
    padding: 4px 18px 0;
}

/*---------------------------------------------------------
    다리 표.

    ── 칸 열을 안 줄입니다 ───────────────────────────────

    어느 칸이 있는지는 모델이 정합니다(`legColumns`). 좁다고 상태를 빼면
    그 슬립은 결말이 없는 슬립이 되고, 좁다고 마켓을 빼면 무엇에 걸었는지가
    없어집니다. 좁은 화면에서 할 수 있는 일은 **자리를 바꾸는 것**뿐입니다.

    바닥값(`minmax` 의 왼쪽)은 그 칸의 글자가 접히지 않는 폭입니다. 몫만
    주면 좁은 판에서 「26. 08. 24. 18:00」 이 한 자씩 넉 줄로 섭니다 —
    신청 내역이 같은 자리에서 겪은 일이고, 거기서 쓴 처방이 이것입니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-bethistory .ath-legs-head,
[data-skin="athena"] .ath-bethistory .ath-leg-row {
    display: grid;
    grid-template-columns: var(--ath-legcols);
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

[data-skin="athena"] .ath-bethistory {
    --ath-legcols:
        minmax(88px, 0.95fr)
        minmax(96px, 1.25fr)
        minmax(84px, 1.15fr)
        minmax(52px, 0.55fr)
        minmax(84px, 1.15fr)
        minmax(96px, 1.3fr)
        minmax(84px, 1.1fr)
        minmax(60px, 0.7fr)
        minmax(54px, 0.62fr)
        minmax(58px, 0.68fr);
}

/*
    칸 이름줄. 슬립마다 다시 서지만 **조용합니다.**

    전에는 줄 내용과 같은 크기·같은 굵기였고, 슬립이 넷이면 화면에 같은
    머리줄이 넷 있었습니다. 자가 되어야지 제목이 되면 안 됩니다.
*/
[data-skin="athena"] .ath-legs-head {
    border-bottom: 1px solid var(--color-line-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

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

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

/*
    칸 하나. **`[data-label]` 로 잡습니다 — `.ath-col` 이 아니라.**

    `.ath-col` 은 이 사이트가 「목록 한 줄의 한 칸」에 쓰는 이름이고
    `screens.css` 가 그 뜻을 정합니다. 여기서 다시 잡으면 나중에 실리는 쪽이
    상대가 안 정한 속성을 이기고, 그때부터 신청 내역과 배팅내역은 같은 이름을
    쓰면서 다르게 그려집니다 (`skin-screen-seam.spec.ts` 가 셉니다).

    속성 선택자는 그 덫을 피하면서 같은 노드를 잡습니다. 이 시트가 처음
    쓰는 것도 아닙니다 — `screens.css` 가 767 에서 줄을 딱지로 바꿀 때
    이미 `> [data-label]` 로 잡고 있습니다.
*/
[data-skin="athena"] .ath-leg-row > [data-label] {
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-ink-soft);
    overflow-wrap: anywhere;
}

/* 고른 쪽에 불이 들어옵니다 — 세 칸 중 어디에 걸었는가. */
[data-skin="athena"] .ath-picked {
    color: var(--color-brand);
    font-weight: 700;
}

[data-skin="athena"] .ath-leg-pick {
    font-weight: 600;
    color: var(--color-ink);
}

/*
    배당은 **금색이 아닙니다.**

    배수이지 돈이 아니고, 이 사이트에서 따뜻한 금색은 금액과 워드마크뿐입니다.
    이 자리가 금색이던 동안 한 슬립에 금색 숫자가 여섯 개였고, 그중 돈은
    둘이었습니다 — 그러면 금색은 아무 말도 안 합니다.
*/
[data-skin="athena"] .ath-bet-rate {
    font-family: var(--font-numeric);
    font-weight: 700;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

/*
    곱에서 빠진 배당.

    적특 다리와 정산이 떨어뜨린 폴더 보너스가 이 표를 씁니다. 딱지는 「이
    다리가 무효다」까지만 말하고, **아래 총배당이 카트에서 본 것보다 작은
    까닭**은 이 취소선이 말합니다.
*/
[data-skin="athena"] .ath-bet-rate-void {
    color: var(--color-ink-muted);
    text-decoration: line-through;
}

[data-skin="athena"] .ath-leg-bonus {
    background: color-mix(in srgb, var(--color-brand) 4%, transparent);
}

[data-skin="athena"] .ath-leg-bonus-name {
    font-weight: 700;
    color: var(--color-ink);
}

[data-skin="athena"] .ath-fold-chip-off {
    border-style: dashed;
    color: var(--color-ink-muted);
    text-decoration: line-through;
}

/*---------------------------------------------------------
    결말 딱지 — 이 화면의 전부.

    알약의 모양은 `screens.css` 의 `.ath-bet-tag` 것입니다. 여기서는 그
    알약이 **어느 종류인가**만 말합니다.
---------------------------------------------------------*/

/*
    적중 — 이 화면에서 **면을 가진 유일한 딱지**입니다.

    이 팔레트에서 초록은 뜻이 정해진 색입니다 (「어느 조합에서나 초록은
    당첨입니다」, `palette.css`). 다섯 결말 중 하나만 채우는 것은 판의
    「고른 배당만 채운다」와 같은 규칙입니다 — 채우기가 드물어야 채워진
    것이 말을 합니다.
*/
[data-skin="athena"] .ath-bet-won {
    border-color: var(--ui-alert-ok-line);
    background: var(--ui-alert-ok-bg);
    color: var(--ui-alert-ok-ink);
    font-weight: 700;
}

/*
    미적중 — 선뿐입니다.

    채우면 어떻게 될까를 재 봤습니다: 이 계정의 첫 쪽에 미적중이 열여섯
    개고, 채운 붉은 알약 열여섯이 깔리면 화면이 **경고문**처럼 읽힙니다.
    진 배팅은 흔한 일이지 사고가 아닙니다. 선으로 충분히 붉습니다.
*/
[data-skin="athena"] .ath-bet-lost {
    border-color: var(--ui-alert-bad-line);
    background: none;
    color: var(--ui-alert-bad-ink);
}

/*
    적특 — **빗금.**

    이 화면에서 제일 조심한 한 줄입니다. 적특을 붉게 그리면 회원은 그것을
    「좀 덜 나쁜 미적중」으로 읽고, 그러면 자기 총배당이 왜 줄었는지에 대해
    틀린 답을 갖게 됩니다. 진 것이 아니라 **빠진 것**입니다.

    빗금은 이 스킨이 이미 쓰는 말입니다 — 판의 막힌 배당 칸이 빗금이고,
    그 뜻이 「지금 이 자리는 놀고 있다」입니다. 같은 뜻이라 같은 표를
    씁니다. 붉지도 푸르지도 않은 것이 요점입니다.
*/
[data-skin="athena"] .ath-bet-void {
    border-style: dashed;
    border-color: var(--color-line-head);
    background: none;
    color: var(--color-ink-muted);
}

/* 대기 — 이 판에서 유일하게 아직 도는 줄. */
[data-skin="athena"] .ath-bet-pending {
    border-color: var(--color-brand);
    background: none;
    color: var(--color-brand);
}

/* 취소 — 적특과 같은 빗금이되 한 단 더 물러서 있습니다. */
[data-skin="athena"] .ath-bet-cancelled {
    border-style: dashed;
    border-color: var(--color-line);
    background: none;
    color: var(--color-ink-muted);
    opacity: 0.8;
}

/* 적특·취소가 된 다리는 줄 전체가 한 단 물러섭니다 — 딱지 하나보다 읽기 쉽습니다. */
[data-skin="athena"] .ath-leg-void > [data-label],
[data-skin="athena"] .ath-leg-cancelled > [data-label] {
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-leg-void .ath-picked,
[data-skin="athena"] .ath-leg-cancelled .ath-picked {
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
    딱지가 못 하는 말.

    「적특」 세 글자는 무슨 일이 있었는지는 말하지만 **그것이 돈에 무슨 짓을
    했는지**는 말하지 않습니다. 그 문장이 모델에 있고, 전에는 12px 회색으로
    표 아래에 흘려져 있었습니다. 이 화면에서 회원이 제일 헷갈리는 자리라
    알림 어휘로 올립니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-slip-notes {
    display: grid;
    gap: 6px;
    padding: 4px 0 12px;
}

/* 알림의 모양은 `screens.css` 것입니다 — 그 이름을 다시 잡지 않고 자리만 봅니다. */
[data-skin="athena"] .ath-slip-notes > p {
    margin: 0;
}

/*---------------------------------------------------------
    슬립의 발 — 시간 · 금액 · 배당 · 예상 당첨금, 그리고 조작.
---------------------------------------------------------*/

[data-skin="athena"] .ath-slip-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-line-soft);
    background: var(--color-raise);
}

[data-skin="athena"] .ath-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

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

[data-skin="athena"] .ath-summary-item > b {
    font-family: var(--font-numeric);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

/* 돈만 금색입니다 — 배팅금액과 예상 당첨금 둘. */
[data-skin="athena"] .ath-summary-item > b.ath-money {
    color: var(--color-gold);
}

[data-skin="athena"] .ath-slip-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-left: auto;
}

/*---------------------------------------------------------
    목록의 발 — 전체삭제와 쪽 넘김.
---------------------------------------------------------*/

[data-skin="athena"] .ath-slip-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

[data-skin="athena"] .ath-slip-footer-acts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
}

/*---------------------------------------------------------
    좁은 폭.
---------------------------------------------------------*/

@media (max-width: 1023px) {
    /*
        칸 바닥값을 내리고 글자를 접습니다.

        열 칸의 바닥값 합이 846px 이라, 판이 카트 없이도 768 에서 그만큼을
        못 냅니다. 여기서는 바닥을 「접히지 않는 폭」이 아니라 「두 줄까지는
        괜찮은 폭」으로 잡습니다 — 칸을 빼는 것보다 두 줄이 낫습니다.
    */
    [data-skin="athena"] .ath-bethistory {
        --ath-legcols:
            minmax(56px, 0.95fr)
            minmax(64px, 1.2fr)
            minmax(60px, 1.15fr)
            minmax(38px, 0.5fr)
            minmax(60px, 1.15fr)
            minmax(64px, 1.25fr)
            minmax(60px, 1.05fr)
            minmax(44px, 0.6fr)
            minmax(40px, 0.55fr)
            minmax(48px, 0.62fr);
    }

    [data-skin="athena"] .ath-bethistory .ath-legs-head,
    [data-skin="athena"] .ath-bethistory .ath-leg-row {
        gap: 8px;
    }

    [data-skin="athena"] .ath-leg-row > [data-label] {
        font-size: 11px;
    }
}

/*
    767 — 줄이 딱지가 됩니다.

    열 칸짜리 격자가 390 에서 **473px 넘쳤습니다**(영어는 552px). 다섯 칸을
    아예 못 보고 가로로 밀어야 했는데, 그중에 상태와 배당이 있었습니다.

    머리줄을 감추고 칸마다 `data-label` 에서 제 이름을 찍습니다 — 사이트가
    767 에서 그렇게 하기로 했고(`lib/table-cards.ts`), 신청 내역과 포인트
    원장이 이미 그렇게 합니다. 화면 하나만 다른 폭에서 바뀌면 나란한 두
    화면이 어긋납니다.
*/
@media (max-width: 767px) {
    /*
        울타리를 위 규칙과 **같은 깊이로** 적습니다.

        `[data-skin="athena"] .ath-legs-head` 로 적었더니 머리줄이 폰에서
        그대로 남았습니다. 매체 질의는 특정도를 안 올리는데, 이 이름에
        `display: grid` 를 주는 규칙은 `.ath-bethistory` 를 하나 더 달고
        있어서 (0,3,0) 대 (0,2,0) 으로 그쪽이 이깁니다.

        390 에서 화면을 직접 보고서야 찾았습니다. 글자만 읽는 못은
        「`display: none` 이 시트에 있는가」로 물으면 통과합니다 — 그래서
        `athena-bethistory.spec.ts` 는 이제 두 선택자의 **특정도를 견줍니다.**
    */
    [data-skin="athena"] .ath-bethistory .ath-legs-head {
        display: none;
    }

    [data-skin="athena"] .ath-bethistory .ath-leg-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 13px 0;
    }

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

    [data-skin="athena"] .ath-leg-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);
        text-align: left;
    }

    /*
        보너스 줄의 빈 칸들.

        경기 칸 다섯이 비어 있는 줄이라, 딱지가 되면 「경기시간」·「리그명」
        ··· 다섯 개가 값 없이 이름만 남습니다. 빈 칸에 이름표를 붙이는 것은
        표를 딱지로 바꾸는 일의 부작용이지 내용이 아닙니다.
    */
    [data-skin="athena"] .ath-leg-bonus > [data-label]:empty {
        display: none;
    }

    [data-skin="athena"] .ath-slip-head,
    [data-skin="athena"] .ath-slip-foot {
        padding-inline: 14px;
    }

    [data-skin="athena"] .ath-slip-body {
        padding-inline: 14px;
    }

    [data-skin="athena"] .ath-slip-foot {
        gap: 8px 16px;
    }

    [data-skin="athena"] .ath-slip-actions {
        width: 100%;
        margin-left: 0;
    }

    [data-skin="athena"] .ath-slip-footer {
        justify-content: center;
    }
}