/*---------------------------------------------------------
    아테나 — 머리띠 · 서랍 · 바닥글.

    ── 뼈대는 그대로입니다 ───────────────────────────────

    요청이 「가장 큰 레이아웃 틀 있지 헤더바에 메뉴구조나 그밑에 배너 그리고
    그밑에 컨텐츠 이런 큰 틀은 가져가되 이제 커스텀 하자」였습니다. 그래서
    세 구역(로고 · 메뉴 · 회원)도, 좁은 화면의 서랍 둘도 그대로입니다.

    ── 바꾼 것은 셋 ──────────────────────────────────────

    **1. 머리띠가 쪽과 같은 색입니다.** 헤라는 `#1A1D2A` 바 아래 `#11141d`
    쪽이라 띠가 뚜렷한 덩어리로 뜹니다. 아테나는 둘이 같은 색이고 그 사이에
    머리카락 선 하나뿐입니다 — 화면 전체가 한 면이라는 규칙이 껍데기에서도
    같아야 하기 때문입니다.

    **2. 메뉴가 채워지지 않고 밑줄이 그어집니다.** 헤라는 호버하면 항목
    뒤가 어두운 알약으로 채워집니다. 이 스킨에서 알약은 **조작**의 표시라
    (`--ui-btn-radius: 999px`), 메뉴까지 알약이면 둘이 안 갈립니다.

    **3. 보유머니가 알약을 벗었습니다.** 헤라는 어두운 알약 안에 금액 둘을
    넣습니다. 아테나는 맨 숫자를 **세로 머리카락 선**으로 나눕니다.

    그림자는 한 줄도 없습니다. 드롭다운도 서랍도 선으로만 섭니다.

    ── 접히는 폭 ─────────────────────────────────────────

    1279 하나입니다. 헤라는 1280~1721 에서 넓은 바를 두 줄로 접는 구간이
    따로 있는데, 그 구간이 필요했던 까닭은 항목마다 안쪽 여백이 커서 한 줄에
    1722px 이 들었기 때문입니다. 밑줄 방식은 여백이 없어 그만큼 안 듭니다 —
    사이 간격을 `clamp()` 로 흘려 두면 1280 에서도 한 줄에 섭니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-chrome {
    --ath-head-h: 72px;
    /* 300 이었습니다. 왜 320 인지는 아래 「가림막과 서랍」에. */
    --ath-drawer-w: 320px;
    /* 손을 뗀 뒤 내려온 판이 열려 있는 시간. 아래 「판이 내려오는 자리」. */
    --ath-menu-linger: 240ms;
    font-family: var(--font-sans);
}

/* 감싸개가 머리띠와 키가 같으면 sticky 가 움직일 자리가 없습니다. 상자를
   풀어 머리띠가 `#app` 전체 높이를 기준으로 붙게 합니다 — 변수와 글꼴은
   그대로 물려받습니다. */
[data-skin="athena"] #header_wrap.ath-chrome {
    display: contents;
}

/*---------------------------------------------------------
    넓은 화면의 머리띠.
---------------------------------------------------------*/

[data-skin="athena"] #header-desktop {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 44px);
    height: var(--ath-head-h);
    padding: 0 clamp(16px, 2.4vw, 40px);
    background: var(--color-base);
    border-bottom: 1px solid var(--color-line-head);
}

[data-skin="athena"] #header-desktop .logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    /*
        메뉴와 숨 한 칸 (2026-10-19 사용자 요청 — 「로고부분 정렬이나 간격이좀 있어야할듯 … 너무 딱 붙어있는
        느낌」). 머리띠의 `gap` 은 좁은 화면에서 16px 까지 줄고, 가로 로고는 여백을 걷어 걸므로(`trimToMark`)
        이름 끝이 첫 메뉴에 바로 닿아 보였습니다.
    */
    margin-right: clamp(8px, 1.4vw, 24px);
}

[data-skin="athena"] #header-desktop .logo img {
    height: 30px;
    width: auto;
}

/*---------------------------------------------------------
    메뉴.
---------------------------------------------------------*/

[data-skin="athena"] .main-nav {
    flex: 1 1 auto;
    min-width: 0;
}

[data-skin="athena"] .main-nav > ul {
    display: flex;
    align-items: center;
    gap: clamp(9px, 1.5vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="athena"] .main-nav .nav-item {
    position: relative;
}

[data-skin="athena"] .main-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-ink-nav);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

[data-skin="athena"] .main-nav .nav-link:hover {
    color: var(--color-ink);
    border-bottom-color: var(--color-line-head);
}

[data-skin="athena"] .main-nav .nav-link.active {
    color: var(--color-ink);
    border-bottom-color: var(--color-brand);
}

/* 종목 아이콘은 안 그립니다 — 헤라가 항목마다 15px 글리프를 붙이는데,
   밑줄만 남긴 줄에 아이콘이 붙으면 다시 항목이 덩어리가 됩니다. */
[data-skin="athena"] .main-nav .nav-link > svg:not(.dropdown-arrow) {
    display: none;
}

[data-skin="athena"] .main-nav .dropdown-arrow {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

[data-skin="athena"] .main-nav .nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* 이 판이 어디서 내려오고 얼마나 넓은가만 여기 있습니다 — 내려오는 방식은
   아래 「판이 내려오는 자리」가 계정 판과 함께 한 번에 말합니다. */
[data-skin="athena"] .main-nav .dropdown-menu {
    --ath-menu-gap: 11px;
    left: -14px;
    min-width: 168px;
    padding: 6px 0;
}

/*---------------------------------------------------------
    판이 내려오는 자리 — **메뉴 쪽과 계정 쪽이 같은 규칙입니다.**

    ── 손잡이와 판이 안 맞닿아 있었습니다 ───────────────────

    운영자: 「아이디에 마우스올리면 오버효과 있는데 밑에 메뉴 누를라고
    마우스 내리면 메뉴가 닫혀버려」. 손잡이 아래 끝과 판 위 끝 사이가
    계정 쪽 9px · 메뉴 쪽 11px 비어 있었고, 그 띠를 지나는 동안 :hover 가
    어디에도 안 걸립니다. 실측(1920): 손잡이가 y=53 에서 끝나고 판이 y=62
    에서 시작하는데, 마우스가 **y=54 에서 이미 닫혔습니다.**

    다리가 아주 없지는 않았습니다. `.main-nav .nav-item::after` 가 12px
    짜리로 있었는데 **손잡이 폭**이었습니다 — 스포츠 손잡이는 56px 이고
    그 판은 168px 이라, 곧게 내려가는 길 하나만 이어져 있고 판의 왼쪽
    끝이나 오른쪽 절반으로 비스듬히 가는 길은 그대로 끊겼습니다(실측: 판
    폭의 다섯 자리 중 넷에서 10px 씩 죽은 띠). 그리고 계정 쪽에는 그
    `::after` 가 아예 없었습니다 — 규칙이 두 벌이면 한쪽만 고쳐집니다.

    그래서 다리를 **판에** 답니다. 판의 폭 그대로 위로 뻗으므로, 손잡이의
    어느 점에서 판의 어느 점으로 곧게 가더라도 지나는 x 가 판의 폭 안이고
    (손잡이가 판보다 좁습니다), 그 길은 끊기지 않습니다. 틈과 다리가 한
    값(`--ath-menu-gap`)에서 나오는 것도 그래서입니다 — 틈만 넓히고 다리를
    안 넓히는 편집이 안 되게.

    ── 다리만으로는 모자랍니다 ──────────────────────────────

    다리는 **곧은** 길을 보장합니다. 사람 손은 곧지 않아서, 판의 아래쪽
    줄로 비스듬히 가다 왼쪽으로 한 번 넘치면 그 순간 닫힙니다. 그래서 손을
    뗀 뒤 `--ath-menu-linger` 동안 판이 남습니다 — 그 사이에 돌아오면 아무
    일도 없던 것이 됩니다.

    `display` 는 원래 전이가 안 되는 값이라 `allow-discrete` 로 겁니다.
    이것을 모르는 브라우저는 이 한 줄을 통째로 버리고 예전처럼 즉시
    닫습니다 — 그쪽에서도 **다리는 그대로**라, 운영자가 걸린 그 길은
    어디서든 이어져 있습니다.

    `.ath-chrome` 으로 잡는 이유는 아래 줄 규칙과 같습니다: 그 클래스가 두
    머리띠 껍데기에 다 있고, `.dropdown-menu` 는 그 안에서 이 두 판뿐입니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-chrome .dropdown-menu {
    position: absolute;
    top: calc(100% + var(--ath-menu-gap));
    z-index: 1000;
    display: none;
    margin: 0;
    list-style: none;
    background: var(--color-base);
    border: 1px solid var(--color-line);
    border-radius: 2px;
    transition: display 0s var(--ath-menu-linger) allow-discrete;
}

/* 다리. `bottom: 100%` 는 테두리 **안쪽**(패딩 상자)에서 재므로 1px 이
   모자라고, 소수점 배치에서 실 한 올만큼 더 벌어질 수 있습니다. 2px 더
   길게 잡아 손잡이 끝과 판 테두리에 한 픽셀씩 걸칩니다.

   치르는 값이 하나 있습니다. 계정 판은 손잡이보다 141px 넓어서, 그 폭의
   다리가 지갑 띠 위로 넘어갑니다 — **판이 열려 있는 동안** 새로고침 단추의
   아랫자락 3px(38px 중 7%)이 다리에 가립니다(실측 1920 · 1366). 판을 닫아
   두면 다리도 없습니다(`display: none` 인 판의 가짜 요소는 안 그려집니다).
   틈만큼만 길므로 이 값은 틈을 넓히지 않는 한 안 자랍니다. */
[data-skin="athena"] .ath-chrome .dropdown-menu::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: calc(var(--ath-menu-gap) + 2px);
}

[data-skin="athena"] .main-nav .nav-item:hover > .dropdown-menu,
[data-skin="athena"] .user-menu:hover .dropdown-menu {
    display: block;
    /* 열릴 때는 안 기다립니다 — 기다리는 것은 닫힐 때뿐입니다. */
    transition-delay: 0s;
}

/* 옆 항목으로 옮긴 것은 「망설임」이 아니라 「저것을 보겠다」입니다. 그때는
   안 기다립니다.

   기다리게 두면 새 흠이 생깁니다: 입금하기와 출금하기의 판은 가로로 73px
   겹치므로(실측 1920 · 1366 에서 79px), 쓸고 지나가는 동안 판 두 장이
   포개어 보였습니다. 머리띠 **밖으로** 나갈 때만 기다리면 됩니다 — 비스듬한
   길에서 넘치는 자리가 거기라서 애초에 기다리는 것입니다. */
[data-skin="athena"] .main-nav > ul:hover > .nav-item:not(:hover) > .dropdown-menu {
    transition-delay: 0s;
}

/*---------------------------------------------------------
    내려온 판의 한 줄 — **메뉴 쪽과 계정 쪽이 같은 규칙입니다.**

    ── 아이콘이 제 줄을 차지하고 있었습니다 ─────────────────

    운영자가 보낸 그림에서 계정 메뉴가 줄마다 두 줄이었습니다: 아이콘 한 줄,
    글자 그 아래. 다섯 줄짜리 메뉴가 233px 로 서 있었습니다(실측).

    마크업은 `<a><Icon/><span>이름</span></a>` 로 멀쩡했습니다. 원인은
    **Tailwind preflight 의 `svg { display: block }`** 입니다 —
    `globals.css` 가 `@import "tailwindcss"` 이므로 이 앱의 모든 `<svg>` 는
    블록입니다. 줄이 `display: block` 이면 그 안의 블록 아이콘이 제 줄을
    가져갑니다.

    ── 그리고 규칙이 두 벌이었습니다 ────────────────────────

    이 블록과 아래 계정 쪽 블록이 거의 똑같은 내용으로 따로 있었습니다.
    메뉴 쪽 자식에는 아이콘이 없어서(`chrome.tsx` 의 그 줄은 `<span>` 뿐)
    같은 결함이 그쪽에서는 안 보였을 뿐입니다. 한 벌로 합칩니다 — 두 벌이면
    다음에도 한쪽만 고쳐집니다.

    `.ath-chrome` 으로 잡는 이유: 그 클래스가 넓은 머리띠와 좁은 머리띠
    양쪽 껍데기에 있고, `.dropdown-menu` 는 그 안에서 이 두 판에만 있습니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-chrome .dropdown-menu a,
[data-skin="athena"] .ath-chrome .dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: none;
    color: var(--color-ink-nav);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

/* 크기가 여기 없었습니다. `chrome.tsx` 의 `ICON_STYLES` 라는 문자열이
   `.ath-chrome .dropdown-menu svg { 16px }` 로 말하고 있었고, 그 문자열은
   원본(`hera_v1/css/header.css`)이 `i.fas` 로 재던 것을 되받아 적은 것이라
   **이 시트가 아니라 export 를 겨냥한 말**이었습니다. 아테나는 그 시트를
   안 실으므로 그 줄이 실제로 이기고 있던 상대는 이 파일이었습니다.
   숫자는 그때 그 값 그대로입니다 — 옮긴 것이지 고른 것이 아닙니다. */
[data-skin="athena"] .ath-chrome .dropdown-menu a > svg,
[data-skin="athena"] .ath-chrome .dropdown-menu button > svg {
    flex: none;
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* 이름이 자리를 다 먹습니다. 뒤따르는 표시가 붙는 줄이 생겨도 이름들이 같은
   자리에서 시작하도록 늘어나는 쪽이 `<span>` 입니다.

   **바깥으로 나가는 화살표(`.ath-away`)는 이제 이 판에 없습니다** —
   파트너가 띠 위로 나갔고, 그 줄만 그 표시를 달고 있었습니다. 규칙은 새
   자리로 함께 갔습니다(아래 「띠 위의 파트너 문」). 없어진 자리에 남은
   규칙은 아무것도 안 하면서 「여기에 그런 줄이 있다」고 말합니다. */
[data-skin="athena"] .ath-chrome .dropdown-menu a > span {
    flex: 1 1 auto;
}

[data-skin="athena"] .ath-chrome .dropdown-menu a:hover,
[data-skin="athena"] .ath-chrome .dropdown-menu button:hover {
    color: var(--color-ink);
    background: var(--color-raise);
}

[data-skin="athena"] .ath-chrome .dropdown-menu a:hover > svg,
[data-skin="athena"] .ath-chrome .dropdown-menu button:hover > svg {
    opacity: 1;
}

/* 굵기와 색이 여기 하나뿐입니다 — **지금 서 있는 자리**. 그것 말고 굵은
   줄이 생기면 뜻 없는 강조가 됩니다(아래 계정 판 머리말 참고). */
[data-skin="athena"] .ath-chrome .dropdown-menu a.active {
    color: var(--color-brand);
    font-weight: 600;
}

/*---------------------------------------------------------
    회원 쪽.
---------------------------------------------------------*/

[data-skin="athena"] .member-info,
[data-skin="athena"] .member_info {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* 알약이 아니라 **세로 선으로 나눈 맨 숫자**입니다. */
[data-skin="athena"] .balance-wrap {
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

[data-skin="athena"] .balance-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 16px;
    color: var(--color-ink-muted);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

[data-skin="athena"] .balance-item + .balance-item {
    border-left: 1px solid var(--color-line);
}

[data-skin="athena"] .balance-item .ath-money,
[data-skin="athena"] .balance-item .ath-point {
    font-family: var(--font-numeric);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

/*---------------------------------------------------------
    머니 새로고침 — **한 조작, 한 몸, 세 상태** (2026-09-12 운영자 요청).

        「머니새로고침 UI 없는 거 … 전면 개선 필요해.」

    ── 무엇이었는가 ──────────────────────────────────────

    같은 조작이 두 몸이었습니다. 넓은 띠는 38×38 에 모서리 8px, 폰의 서랍은
    26×26 짜리 **맨 글리프**였습니다 — 마크업에 `style={{ backgroundColor:
    "transparent", border: 0 }}` 이 박혀 있었습니다. 그리고 대문의 지갑 띠
    에는 아예 없었습니다.

    두 몸을 만든 값은 둘 다 이 시트의 것이 아니었습니다. `chrome.tsx` 의
    `ICON_STYLES` 문자열이 `.btn-icon.refresh` 를 38×38·8px·`#ccc` 로 덮고
    있었고, 그 세 값은 원본(`header.css:62` 의 5px 짜리 과녁)을 고치려던
    말이라 **아테나의 팔레트도 모서리 규칙도 안 따랐습니다.** `#ccc` 는
    조합 다섯 중 밝은 둘에서 흰 면에 거의 잠깁니다.

    ── 도는 상태가 한 번도 안 돌았습니다 ────────────────

    같은 문자열이 `animation: fa-spin` 으로 아래 `ath-spin` 을 이기고
    있었는데, `fa-spin` 은 **Font Awesome 의 keyframe 이고 아테나는 그것을
    안 싣습니다**(export 의 CDN 의존을 걷어낸 것이 이 스킨의 결정입니다).
    없는 keyframe 을 가리키는 `animation` 은 아무 일도 안 합니다. 즉 셋 중
    하나가 화면에 나온 적이 없습니다.

    ── 셋이 서로 달라야 합니다 ──────────────────────────

    `data-state` 가 마크업에 있고(`skins/athena/refresh.tsx`) 시트가 셋에
    다른 값을 줍니다. 선으로 말하는 스킨이라 **선 색**이 상태입니다:

        ready   `--color-line`       · 글리프 `--color-ink-nav`
        busy    `--color-brand`      · 글리프 `--color-brand`  · 돎
        wait    `--color-line-soft`  · 글리프 `--color-ink-muted`

    크기는 `--ui-btn-h-sm`(36px)입니다 — 새 수가 아니라 이 스킨이 「작은
    조작」에 이미 쓰는 높이이고, 26px 맨 글리프였던 자리에 과녁이 생깁니다.
    모서리가 999px 인 것은 이 스킨에서 알약이 **조작**의 표시이기 때문이고,
    이것은 문이 아니라 조작입니다(아래 파트너 문과 갈리는 자리).

    ── 보이는 몸 36, 손가락 과녁 44 ─────────────────────

    36px 는 **눈의 수**입니다. 지갑 띠에서 옆에 선 것이 맨 숫자라 몸이 그보다
    커지면 띠가 조작판처럼 보입니다. 그런데 손가락의 수는 44px 이고, 폰에서
    이 단추는 숫자 바로 옆에 섭니다 — 빗나가면 아무 일도 안 일어납니다.

    그래서 몸은 안 키우고 **과녁만** `::after` 로 넓힙니다. 여백으로 키우지
    않는 것은 여백이 띠의 줄 높이를 밀기 때문이고, 이웃과의 틈이 12px 이라
    5px 이 번져도 남의 과녁을 안 먹습니다.

    수가 -5px 인 까닭: `inset` 은 **패딩 상자** 기준입니다. 몸 36 에서 테두리
    1px 둘을 뺀 34 가 기준이므로 34 + 5×2 = 44 입니다. -4px 으로 적으면
    42 가 나오고, 브라우저의 점 시험이 먼 쪽 모서리를 안 세므로 아래·오른쪽
    3px 이 실제로 안 잡혔습니다(`.hit-check` 로 재서 고친 자리입니다).

    자리 셋이 이 한 규칙을 씁니다 — 넓은 띠의 지갑, 폰 서랍의 지갑, 그리고
    대문·로비의 지갑 띠(`screens/casino-tab-view.tsx`).
---------------------------------------------------------*/

[data-skin="athena"] .ath-refresh {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--ui-btn-h-sm);
    height: var(--ui-btn-h-sm);
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: none;
    color: var(--color-ink-nav);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* 36px 몸에 44px 과녁. 그리지 않고 받기만 합니다.
   -5px 은 패딩 상자(34) 기준입니다 — 34 + 5×2 = 44. */
[data-skin="athena"] .ath-refresh::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
}

[data-skin="athena"] .ath-refresh svg {
    width: 17px;
    height: 17px;
    flex: none;
}

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

[data-skin="athena"] .ath-refresh[data-state="busy"] {
    border-color: var(--color-brand);
    color: var(--color-brand);
    cursor: progress;
}

[data-skin="athena"] .ath-refresh[data-state="busy"] svg {
    animation: ath-spin 0.9s linear infinite;
}

[data-skin="athena"] .ath-refresh[data-state="wait"] {
    border-color: var(--color-line-soft);
    color: var(--color-ink-muted);
    cursor: not-allowed;
}

/* 돌지 않기를 고른 사람에게는 안 돌립니다. 선과 글자색은 그대로라 세 상태는
   여전히 갈립니다 — 움직임이 상태를 말하는 유일한 수단이 아닙니다. */
@media (prefers-reduced-motion: reduce) {
    [data-skin="athena"] .ath-refresh[data-state="busy"] svg,
    [data-skin="athena"] .ath-drawer-btn[aria-busy="true"] svg {
        animation: none;
    }
}

@keyframes ath-spin {
    to {
        transform: rotate(360deg);
    }
}

/*---------------------------------------------------------
    띠 위의 파트너 문 (2026-09-12 운영자 요청).

    「제우스 헤라 포세이돈 아폴로 아테나 전부 파트너 버튼은 잘보여야해.
    아이디 눌러야 파트너가 보이고 이런 구조로 하면 안 되고, PC 는 무조건
    메뉴바에 파트너가 잘 보이게.」

    ── 왜 알약이 아닌가 ─────────────────────────────────

    2026-09-10 에 이 줄에서 금색 알약을 벗겼습니다. 까닭은 「파트너가
    마이페이지보다 중요한 곳이 아니다」였고, 그 판단이 선 자리는 **계정 판
    안의 다섯 줄 사이**였습니다 — 같은 줄 다섯 중 하나만 굵으면 그 굵기는
    뜻이 없습니다.

    여기는 그 자리가 아닙니다. 옆에 선 것은 맨 숫자(보유머니·포인트)와 맨
    글자(닉네임)이고, 그 사이에서 눈에 걸리는 것은 굵기가 아니라 **다른
    몸**입니다 — 선으로 그린 칩 하나. 이 스킨이 조작에 쓰는 몸이고, 새로
    들여온 것이 아닙니다(`.ath-refresh` 도 `.ath-lang-btn` 도 선으로 된
    상자입니다).

    모서리가 2px 인 것도 그래서입니다. 이 스킨에서 999px 알약은 **단추**의
    표시이고(`--ui-btn-radius`), 이것은 단추가 아니라 다른 앱으로 나가는
    문입니다. 끝의 화살표가 그것을 말합니다 — 계정 판에 있을 때 달고 있던
    그 표시이고, 자리를 옮기면서 같이 왔습니다.

    색은 `--color-brand` 입니다. 조합이 다섯이라 고정색을 쓰면 두 조합에서
    사라집니다(간판이 그랬습니다 — `athena-chrome.spec.ts` 머리말).

    ── 그리고 폰도 같은 몸입니다 (2026-09-12 운영자 요청) ──────

        「파트너 강조도 좀 제대로 하고.」

    **이것은 2026-09-10 결정의 뒤집음입니다.** 그날 폰의 파트너 문은 오른쪽
    서랍의 「빠른 단추 일곱」 중 하나가 되었고, 까닭은 「파트너는 갈 수 있는
    곳이지 마이페이지보다 중요한 곳이 아니다」였습니다. `athena-chrome.spec.ts`
    가 그 문장을 못으로 박아 두었고, 그 못은 지금 **반대 방향으로** 다시
    박혀 있습니다(같은 파일의 「파트너는 여느 단추가 아닙니다」). 이 문단이
    그 이력이고, 안 적으면 다음 사람이 위 문단을 읽고 되돌립니다.

    뒤집혔어도 **금색 알약으로는 안 돌아갑니다.** 바로 위에서 고른 답이 폰
    에서 오히려 더 잘 맞습니다 — 서랍에서 이 문 옆에 선 것이 알약 여섯
    (`.ath-shortcut`)이라, 알약이 아닌 것 하나가 격자 **밖**에 서면 그것만
    다른 물건입니다. 강조는 굵기가 아니라 몸입니다.

    그래서 아래 기본 규칙이 두 자리의 것이고, 자리마다 다른 것만 그 뒤에
    따로 적습니다. 두 벌이면 언젠가 한쪽만 고쳐집니다.
---------------------------------------------------------*/

[data-skin="athena"] .ath-chrome .ath-door {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--color-brand);
    border-radius: 2px;
    color: var(--color-brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

/* 호버는 이 껍데기가 이미 쓰는 것 — 면을 한 칸 들어 올리고 글자를 진하게.
   채워서 뒤집는 방식은 다섯 조합 중 밝은 둘에서 글자가 사라집니다. */
[data-skin="athena"] .ath-chrome .ath-door:hover {
    color: var(--color-ink);
    background: var(--color-raise);
}

[data-skin="athena"] .ath-chrome .ath-door > svg {
    flex: none;
    width: 15px;
    height: 15px;
}

[data-skin="athena"] .ath-chrome .ath-door > svg.ath-away {
    width: 11px;
    height: 11px;
    opacity: 0.6;
}

/* 넓은 띠 위 — 지갑과 계정 사이. 높이는 옆의 조작들과 맞춥니다. */
[data-skin="athena"] .ath-chrome .member-info > .ath-door {
    height: 32px;
}

/*
    서랍 안 — **격자 밖의 한 줄.**

    폭을 다 쓰는 것이 이 자리의 강조입니다. 아래 `.ath-shortcuts` 는 두 칸
    격자이므로, 한 칸도 두 칸도 아닌 한 줄은 그 격자에 속하지 않는다는 뜻이
    됩니다. 이름이 길어지는 말(타이·베트남어)에서도 접힐 자리가 있습니다 —
    `white-space` 를 여기서만 풉니다.
*/
[data-skin="athena"] .ath-chrome .ath-door-row {
    display: flex;
    min-height: var(--ui-btn-h-md);
    margin: 16px 18px 0;
    padding: 0 14px;
    white-space: normal;
    line-height: 1.3;
}

[data-skin="athena"] .ath-chrome .ath-door-row > span {
    flex: 1 1 auto;
}

/*---------------------------------------------------------
    1280 ~ 1580 — 파트너의 바는 접힙니다.

    ── 무엇이 깨졌는가 ───────────────────────────────────

    이 바는 파트너가 아닌 한국어 회원 기준으로 1400 에서 **1px** 남기고
    섭니다(실측: 나브 내용이 824 에서 끝나고 회원 띠가 825 에서 시작).
    그러니 띠에 무엇을 더하든 그 아래가 깨집니다. 문을 세우고 재면:

        1400 겹침 0 · 1366 겹침 26 · 1300 겹침 80 · 1280 겹침 96

    겹친 것은 문이 아니라 **말 고르는 깃발이 「고객센터」 위**였습니다.
    `.main-nav { min-width: 0 }` 이라 상자는 줄고 글자는 `nowrap` 이라
    안 줄어서, 쪽 넘침은 0 인 채로 두 글자가 포개어졌습니다. 넘침만 재는
    자에게는 안 보이는 고장이고, 그래서 재는 자가 이제 겹침을 셉니다
    (`scripts/partner-door-probe.mjs`).

    ── 여백을 깎아 봤고, 말 여섯에서 모자랐습니다 ────────

    처음 고침은 1280~1399 에서 여백 셋(`clamp()`)을 **각자의 최솟값**으로
    내리는 것이었습니다. 한국어와 중국어는 그것으로 섰습니다. 나머지 넷은
    아니었습니다 — 영어·베트남어·타이어·일본어가 1280~1500 에서 그대로
    겹쳤습니다. 이름표가 넓은 것은 문만이 아니라 **나브 열 항목 전부**라,
    깎아서 되찾는 폭보다 모자라는 폭이 큽니다.

        문의 이름표   한국어 104 · 중국어 119 · 영어 116 · 베트남어 111
                      타이어 129 · 일본어 132
        바의 제 폭    한국어 약 1392 · 일본어 1581 (1600 에서 여유 19 실측)

    ── 그래서 접습니다 ───────────────────────────────────

    헤라가 같은 일에 쓰는 답이고(`hera_v1/css/header-fit.css`), 두 스킨이
    같은 원본에서 갈라져 나왔으므로 접는 모양도 같습니다: 첫 줄은 간판과
    회원 띠, 둘째 줄이 메뉴. 깎는 것이 하나도 없습니다 — 글자 크기도 여백도
    항목 수도 한 줄일 때와 같은 값입니다.

    **1580 은 여섯 말 중 제일 넓은 것에서 나온 숫자입니다.** 한국어만 보고
    1392 로 끊으면 일본어 파트너는 1400~1580 에서 겹친 채로 남습니다. 회원의
    말은 회원이 고르고, 한 숫자로 다 덮으려면 제일 넓은 쪽이어야 합니다.
    치르는 값은 한국어 파트너가 1392~1580 에서 굳이 두 줄을 본다는 것이고,
    그 두 줄은 헤라가 1721 아래에서 이미 보여 주는 것과 같은 두 줄입니다.

    ── 왜 `:has()` 인가 ──────────────────────────────────

    파트너가 아닌 회원의 바는 한 픽셀도 안 움직여야 합니다. 그 띠는 안
    무거워졌으니까요. 이 저장소가 같은 일에 이미 쓰는 방법입니다
    (`hera_v1/css/header-fit.css` 의 `#header-desktop:has(.member_info)` —
    손님 바는 안 접습니다).
---------------------------------------------------------*/
@media (min-width: 1280px) and (max-width: 1580px) {
    [data-skin="athena"] #header-desktop:has(.ath-door) {
        flex-wrap: wrap;
        height: auto;
        /* 위 `gap` 은 줄 사이에도 걸립니다. 두 줄 사이는 아래 나브의
           여백이 정하게 두고 여기서는 0 입니다. */
        row-gap: 0;
    }

    /* 첫 줄은 한 줄짜리 바와 같은 72px — 간판과 회원 띠. 안 박으면 줄
       높이를 내용이 정해, 폭 하나 넘었다고 머리띠가 몇 픽셀 움직입니다. */
    [data-skin="athena"] #header-desktop:has(.ath-door) > .logo,
    [data-skin="athena"] #header-desktop:has(.ath-door) > .member-info {
        height: var(--ath-head-h);
    }

    /* `flex-basis: 100%` 하나가 메뉴를 제 줄로 보냅니다. `order` 는 그
       줄을 회원 띠 **아래**로 보냅니다. */
    [data-skin="athena"] #header-desktop:has(.ath-door) > .main-nav {
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
        padding-bottom: 14px;
    }

    /* 머리띠는 굴려도 붙어 있으므로 두 줄(113px)일 때는 스포츠 카트(평소 top 100px)가 그 아래로
       내려옵니다 — 한 줄(72px)일 때와 같은 28px 틈. */
    [data-skin="athena"]:has(#header-desktop .ath-door) #panel_betting {
        top: calc(141px + var(--demo-bar-offset, 0px));
    }
}

[data-skin="athena"] .user-menu {
    position: relative;
}

[data-skin="athena"] .user-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

[data-skin="athena"] .user-profile svg {
    width: 19px;
    height: 19px;
    color: var(--color-ink-muted);
}

/*---------------------------------------------------------
    계정 판.

    ── 굵은 줄이 하나 있었습니다 ────────────────────────────

    「파트너」만 다르게 생겼습니다. `.ath-partner` 가 금색 테두리 알약을
    말하는데, 그 규칙은 (0,2,0) 이고 바로 위 `…user-menu .dropdown-menu a`
    가 (0,3,1) 이라 **색과 테두리는 졌고 굵기·자간·바깥여백만 이겼습니다.**
    남은 것이 「테두리 없는 알약 반지름 + 700 굵기 + 안쪽으로 들어간 한 줄」
    이라, 회원에게는 뜻 없이 강조된 한 줄로 보였습니다(실측: 파트너 700 ·
    자간 0.52px · 여백 4px 12px, 나머지 줄 400 · normal · 0).

    파트너는 갈 수 있는 곳이지 마이페이지보다 중요한 곳이 아닙니다. 그래서
    그 줄이 다른 줄과 같아지고, 알약 규칙은 지웠습니다. 그 줄이 **정말로**
    다른 점 하나 — 이 앱 밖으로 나갑니다 — 는 굵기가 아니라 오른쪽 끝의
    작은 화살표(`.ath-away`)가 말합니다. 뜻이 있는 표시는 남기고 뜻이 없는
    강조는 뺍니다.
---------------------------------------------------------*/

/* 메뉴 쪽 판과 다른 것만 여기 있습니다 — 오른쪽 끝에 맞춰 서고, 조금 넓고,
   머리 줄이 판 꼭대기에 붙어야 해서 위쪽 여백이 0 입니다.

   틈이 9px 인 것은 손잡이(`.user-profile`)에 위아래 6px 여백이 있어 메뉴
   쪽 손잡이보다 아래로 더 내려오기 때문입니다. 그 값을 바꾸면 다리도 같이
   따라옵니다. */
[data-skin="athena"] .user-menu .dropdown-menu {
    --ath-menu-gap: 9px;
    right: 0;
    min-width: 208px;
    padding: 0 0 6px;
}

/*
    누구의 판인가.

    판이 아이디에서 내려오는데 그 안에 누구인지가 없었습니다. 머리띠가 이미
    닉네임과 두 금액을 들고 있으므로 **금액은 안 되풀이합니다** — 4cm 위에
    있는 숫자를 다시 적는 것은 맥락이 아니라 소음입니다. 되풀이가 아닌 것은
    아이디(`username`)입니다: 머리띠는 닉네임만 보여 주고, 고객센터에 대는
    것은 아이디입니다.
*/
[data-skin="athena"] .user-menu .ath-menu-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px 12px;
    border-bottom: 1px solid var(--color-line-soft);
    margin-bottom: 6px;
}

[data-skin="athena"] .user-menu .ath-menu-head .ath-menu-name {
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

[data-skin="athena"] .user-menu .ath-menu-head .ath-menu-id {
    color: var(--color-ink-muted);
    font-size: 11px;
    font-family: var(--font-numeric);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* 하나뿐인 묶음 표시. 위아래로 같은 만큼 띄워야 「가르는 줄」로 읽힙니다 —
   한쪽만 붙어 있으면 판의 이음매처럼 보입니다. */
[data-skin="athena"] .user-menu .dropdown-menu .divider {
    height: 1px;
    margin: 6px 0;
    background: var(--color-line-soft);
}

/*---------------------------------------------------------
    손님.
---------------------------------------------------------*/

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

/* 손님에게 눌러야 할 것은 하나입니다 — 그 하나만 채웁니다. */
[data-skin="athena"] .btn_login {
    border-color: transparent;
    background: var(--ui-btn-primary-bg);
    color: var(--ui-btn-primary-ink);
}

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

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

/* 헤라의 「또는」 구분자. 이 배치에서는 단추 둘이 나란하면 그만이라 안 그립니다. */
[data-skin="athena"] .txt_or {
    display: none;
}

/*---------------------------------------------------------
    좁은 화면 — 머리띠 하나, 서랍 둘.

    ── 여기 있던 이름들은 아테나의 것이 아니었습니다 ─────

    2026-09-12 운영자: 「아테나 모바일페이지 이제 사이드바나 이런 거 전면
    리뉴얼해줘, 현재 디자인에 맞게.」

    `#header-mobile` · `.side-menu` · `.menu-header` · `.menu-nav` ·
    `.menu-category` · `.menu-footer` · `.balance-info` · `.quick-actions` ·
    `.btn-icon` — 아홉 다 `hera_v1/css/header.css` 의 이름입니다. 아테나는
    헤라의 **마크업**에서 갈라져 나왔고 시트는 한 줄도 안 물려받았으므로
    (`skins/assets.ts`), 그 이름들이 가리키던 규칙은 이미 이 파일이 새로
    쓴 것이었습니다. 남아 있던 것은 **뜻 없는 이름**이고, 뜻 없는 이름이
    「원본이 이러니까」로 시작하는 규칙들을 계속 불러들였습니다 —
    `chrome.tsx` 안에 문자열로 박혀 있던 `ICON_STYLES` 가 그것이고, 그 안의
    두 줄(`.quick-actions .btn { border: 0 }` ·
    `.menu-footer .btn { border: 0; border-radius: 8px }`)이 **이 시트가 준
    알약 테두리를 지우고 있었습니다.** 서랍의 단추들이 맨 글자로 보이던
    것이 취향이 아니라 그 두 줄입니다.

    그래서 이 구역의 이름이 전부 `ath-` 입니다. 화면 열셋이 이미 그 어휘로
    지어져 있고(`shell.css` · `screens.css`), 이제 껍데기도 같은 말을 씁니다.

    ── 이 스킨의 어휘로 옮긴다는 것이 무엇인가 ────────────

        면이 아니라 선       서랍 안의 구획은 카드가 아니라 머리카락 선과
                             여백으로 나뉩니다. 바닥 띠만 제일 진한 선
                             (`--color-line-head`)을 이고, 그것이 「목록이
                             여기서 끝난 것이 아니라 띠가 덮고 있다」를
                             말합니다.
        조작은 알약          `--ui-btn-radius: 999px`. 서랍의 단추도 빠른
                             단추도 알약이고, **알약이 아닌 것은 조작이
                             아닙니다** — 파트너 문(2px)이 그래서 눈에
                             걸립니다.
        채운 단추는 없음     이 두 서랍에는 제출할 것이 없습니다. 전부
                             선입니다.
        과녁                 머리띠와 서랍의 아이콘 조작이 34×34 였습니다.
                             44 입니다 — 폰에서 제일 많이 눌리는 셋(메뉴 ·
                             계정 · 닫기)이고 이름표가 없는 조작입니다.

    ── 끊는 폭 ──────────────────────────────────────────

    1279 하나. 그 위는 넓은 띠이고 아래가 전부 이 구역입니다. 390 과 768 이
    같은 규칙을 쓰는 것이 뜻입니다 — 좁은 태블릿에서 폰과 다른 서랍이 나오면
    그 구간을 아무도 안 봅니다.
---------------------------------------------------------*/

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

@media (max-width: 1279px) {
    [data-skin="athena"] #header-desktop {
        display: none;
    }

    [data-skin="athena"] .ath-chrome-compact {
        display: contents;
    }
}

/*---------------------------------------------------------
    머리띠 — 메뉴 · 간판 · 계정.
---------------------------------------------------------*/

[data-skin="athena"] .ath-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 8px;
    background: var(--color-base);
    border-bottom: 1px solid var(--color-line-head);
}

/*
    이름표 없는 아이콘 조작 — 머리띠의 둘과 서랍의 닫기.

    44px 인 것은 이 셋이 **폰에서 제일 많이 눌리고 글자가 없는** 조작이기
    때문입니다. 앞의 34px 은 넓은 화면의 `.btn-icon` 값을 그대로 쓴 것이고,
    같은 파일이 조작 높이를 36/46/56 으로 선언해 둔 스킨에서 34 는 어디에도
    속하지 않는 수였습니다.

    면도 테두리도 없습니다 — 머리띠는 쪽과 같은 색 한 면이고(이 파일 머리말의
    「바꾼 것 셋」 중 첫째), 거기에 상자 둘을 그리면 그 규칙이 깨집니다. 눌린
    것과 열린 것만 한 단 뜬 면으로 답합니다.
*/
[data-skin="athena"] .ath-bar-act {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--color-ink-nav);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

[data-skin="athena"] .ath-bar-act svg {
    width: 22px;
    height: 22px;
    flex: none;
}

[data-skin="athena"] .ath-bar-act:hover,
[data-skin="athena"] .ath-bar-act[aria-expanded="true"] {
    background: var(--color-raise);
    color: var(--color-ink);
}

[data-skin="athena"] .ath-bar-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    line-height: 0;
}

[data-skin="athena"] .ath-bar .ath-bar-logo img {
    height: 24px;
    width: auto;
}

/*---------------------------------------------------------
    가림막과 서랍.
---------------------------------------------------------*/

[data-skin="athena"] .ath-veil {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgb(var(--t-veil-rgb, 0 0 0) / 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

[data-skin="athena"] .ath-veil.is-on {
    opacity: 1;
    visibility: visible;
}

/*
    폭이 300 에서 320 으로 갔습니다.

    아래 빠른 단추가 두 칸 격자라 한 칸의 속폭이 곧 이름표의 자리입니다.
    300 에서 그 값이 118px 이었고 「포인트전환」(영어 Point Conversion,
    베트남어 Chuyển đổi điểm)이 거기서 접혀 그 줄만 39px 로 튀었습니다.
    320 이면 138px 이고, 그래도 접히는 말이 있으므로 격자가 줄 높이를 맞춥니다
    (아래 `grid-auto-rows`) — 폭만 늘리는 것은 여섯 말 중 넷에서만 참입니다.

    390 에서 70px 이 남습니다. 그 남는 쪽이 「바깥을 누르면 닫힌다」를
    말하므로 여기서 더 넓히지는 않습니다.
*/
[data-skin="athena"] .ath-drawer {
    position: fixed;
    top: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    width: var(--ath-drawer-w);
    max-width: 88vw;
    height: 100%;
    background: var(--color-base);
    transition: transform 0.24s ease;
}

[data-skin="athena"] .ath-drawer-nav {
    left: 0;
    border-right: 1px solid var(--color-line-head);
    transform: translateX(-100%);
}

[data-skin="athena"] .ath-drawer-me {
    right: 0;
    border-left: 1px solid var(--color-line-head);
    transform: translateX(100%);
}

[data-skin="athena"] .ath-drawer.is-open {
    transform: translateX(0);
}

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

/*
    서랍의 머리 — 머리띠와 같은 60px 입니다. 서랍이 열려도 화면 위쪽의
    가로줄이 제자리에 있어야 「덮였다」로 읽히고, 다르면 화면이 어긋나
    보입니다.
*/
[data-skin="athena"] .ath-drawer-head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--color-line-head);
}

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

[data-skin="athena"] .ath-drawer-head .ath-bar-logo img {
    height: 22px;
    width: auto;
}

/*
    서랍의 속 — 스스로 구릅니다.

    `overscroll-behavior: contain` 이 없으면 목록 끝에서 손가락이 뒤쪽 쪽을
    끌고 갑니다. 열려 있는 동안 `body` 를 잠그고 있지만(`chrome.tsx`), 잠금은
    쪽의 것이고 이 줄은 이 상자의 것입니다.
*/
[data-skin="athena"] .ath-drawer-list,
[data-skin="athena"] .ath-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

[data-skin="athena"] .ath-drawer-list {
    padding-bottom: 10px;
}

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

/* 손님의 서랍은 로그인 상자 하나입니다 — 그쪽은 자기 여백이 필요합니다. */
[data-skin="athena"] .ath-drawer-body.app-ui {
    padding: 16px;
}

/*
    갈래의 머리.

    선으로 나눕니다 — 첫 갈래만 선이 없고, 나머지는 위에 머리카락 한 줄을
    이고 섭니다. 면을 깔거나 상자를 두르면 이 서랍만 카드가 있는 화면이
    됩니다.

    `text-transform` 을 안 씁니다. 이 이름들은 한글이라(스포츠 배팅 · 게임 ·
    입출금 · 이벤트 · 고객센터) 대문자로 만들 것이 없고, 앞 규칙은
    `uppercase` 와 0.12em 자간을 함께 걸어 **한글만 자간이 벌어져** 있었습니다.
    이 스킨의 라틴 대문자 눈썹은 지면 쪽의 장치이고(`shell.css`), 여기 있는
    것은 눈썹이 아니라 갈래 이름입니다.
*/
[data-skin="athena"] .ath-drawer-group {
    margin: 8px 0 0;
    padding: 15px 18px 6px;
    border-top: 1px solid var(--color-line-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-drawer-group:first-child {
    margin-top: 0;
    padding-top: 12px;
    border-top: 0;
}

[data-skin="athena"] .ath-drawer-row {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border: 0;
    background: none;
    color: var(--color-ink-nav);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

[data-skin="athena"] .ath-drawer-row svg {
    width: 17px;
    height: 17px;
    flex: none;
    opacity: 0.7;
}

/* 켜진 항목 — 헤라는 왼쪽에 3px 시안 막대를 붙입니다. 여기서는 글자가
   또렷해지고 오른쪽 끝에 짧은 선이 섭니다. 같은 자리를 안 씁니다. */
[data-skin="athena"] .ath-drawer-row.is-on {
    color: var(--color-ink);
    font-weight: 700;
    box-shadow: inset -3px 0 0 var(--color-brand);
}

[data-skin="athena"] .ath-drawer-row.is-on svg {
    opacity: 1;
    color: var(--color-brand);
}

/*
    서랍의 바닥 띠.

    제일 진한 선을 입니다. 목록이 접혀 있을 때 이 줄이 「여기가 끝」이 아니라
    「띠가 덮고 있다」를 말하는 것이 이 선의 일입니다 — 앞에서는 `-soft` 라
    목록이 고객센터에서 끝난 것처럼 보였고, 그 아래 다섯 줄(일반입금 ·
    테더입금 · 일반출금 · 테더출금 · 포인트 전환)이 안 보였습니다. 그 다섯은
    이제 자기 갈래로 위에 섭니다(`chrome.tsx` 의 `athenaDrawer`).
*/
[data-skin="athena"] .ath-drawer-foot {
    display: grid;
    flex: none;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-line-head);
}

[data-skin="athena"] .ath-drawer-btn {
    display: flex;
    width: 100%;
    min-height: var(--ui-btn-h-md);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: none;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

[data-skin="athena"] .ath-drawer-btn svg {
    width: 15px;
    height: 15px;
    flex: none;
}

[data-skin="athena"] .ath-drawer-btn:disabled {
    color: var(--color-ink-muted);
    cursor: not-allowed;
}

[data-skin="athena"] .ath-drawer-btn[aria-busy="true"] {
    border-color: var(--color-brand);
    color: var(--color-brand);
    cursor: progress;
}

[data-skin="athena"] .ath-drawer-btn[aria-busy="true"] svg {
    animation: ath-spin 0.9s linear infinite;
}

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

/*---------------------------------------------------------
    오른쪽 서랍 — 누구인가 · 지갑 · 문 · 빠른 단추.
---------------------------------------------------------*/

/*
    누구인가.

    넓은 화면의 계정 판이 닉네임과 **아이디**를 함께 답니다. 같은 까닭으로
    여기도 둘입니다 — 보여 주는 이름은 닉네임이고 고객센터에 대는 것은
    아이디입니다. 앞에는 닉네임뿐이었고, 56px 짜리 사람 그림이 제 줄을 통째로
    차지했습니다(그 값도 `ICON_STYLES` 의 것이었습니다).
*/
[data-skin="athena"] .ath-who {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border-bottom: 1px solid var(--color-line-soft);
}

[data-skin="athena"] .ath-who > svg {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--color-ink-muted);
}

[data-skin="athena"] .ath-who-read {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

[data-skin="athena"] .ath-who-read strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-skin="athena"] .ath-who-read small {
    font-family: var(--font-numeric);
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--color-ink-muted);
}

/*
    지갑 — 라벨 왼쪽, 수 오른쪽, 사이는 선.

    새로고침이 이 줄 안에 섭니다. 앞에서는 라벨과 수 **사이**에 끼어
    있었는데, 맨 글리프였으므로 읽는 눈이 「보유머니 ⟳ 4,125,000」으로
    한 번 걸렸습니다. 조작은 수 뒤에 서는 것이 맞습니다 — 수를 읽고 나서
    다시 읽고 싶어지는 순서입니다.
*/
[data-skin="athena"] .ath-wallet {
    display: grid;
    padding: 4px 18px 0;
}

[data-skin="athena"] .ath-wallet-row {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--color-line-soft);
}

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

[data-skin="athena"] .ath-wallet-read {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

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

/*
    빠른 단추 — 알약 여섯, 두 칸.

    `grid-auto-rows` 가 이 격자의 요점입니다. 앞에서는 이름이 접히는 칸만
    39px 이고 나머지가 36px 이라 줄이 어긋났습니다(실측: 「Point Conversion」
    ·「포인트전환」). 줄 높이를 격자가 정하면 한 칸이 두 줄이 될 때 **그 줄
    전체가** 같이 자랍니다.

    접히는 것을 막지 않는 것도 정한 것입니다. 말이 여섯이고 타이·베트남어가
    깁니다 — 한 줄로 묶어 두면 그 두 말에서 이름이 잘립니다.
*/
[data-skin="athena"] .ath-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, auto);
    gap: 8px;
    padding: 14px 18px 0;
}

[data-skin="athena"] .ath-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: none;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

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

/*---------------------------------------------------------
    바닥글.

    ── 있던 것 ──────────────────────────────────────────────

    선 하나와 45% 로 흐려진 간판 하나. 1920 · 1366 · 390 어디서나 115px 이고
    링크가 0개였습니다(실측) — 「여기서 끝난다」 말고는 아무 말도 안 하는
    빈 띠입니다.

    ── 면은 여전히 안 깝니다 ────────────────────────────────

    헤라는 200px 그러데이션에 로고를 얹습니다. 그것을 안 쓴 이유가 「면으로
    말하지 않는다」였고, 내용이 생긴 뒤에도 그 규칙은 그대로입니다: 선 둘과
    글자뿐이고 배경은 쪽 색 그대로입니다.

    ── 폭 ───────────────────────────────────────────────────

    `max-width: 1560px` 와 `padding-inline: 24px` 는 첫 화면의 것과 같은
    값입니다(`home.css:15`). 바닥글만 다른 자리에서 끝나면 1920 에서
    본문과 어긋난 기둥이 하나 더 생깁니다.
---------------------------------------------------------*/

[data-skin="athena"] #footer {
    display: block;
    padding: 0;
    margin-top: auto;
    border-top: 1px solid var(--color-line-soft);
    background: none;
}

[data-skin="athena"] .ath-foot {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    max-width: 1560px;
    margin: 0 auto;
    padding: 40px 24px 34px;
}

[data-skin="athena"] .ath-foot-brand {
    display: flex;
    align-items: flex-start;
}

[data-skin="athena"] .ath-foot-brand a {
    display: inline-flex;
    line-height: 0;
}

/* 머리띠의 30px 보다 한 단 작습니다. 바닥글의 간판은 「여기가 어디인가」를
   다시 말할 뿐이라 머리띠와 같은 크기로 설 이유가 없습니다. 흐리지는
   않습니다 — 45% 짜리 간판은 꺼진 것처럼 보입니다. */
[data-skin="athena"] .ath-foot-brand img {
    height: 26px;
    width: auto;
}

[data-skin="athena"] .ath-foot-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 24px clamp(20px, 2.4vw, 40px);
}

[data-skin="athena"] .ath-foot-col {
    min-width: 0;
}

/* 눈썹. `auth.css:168` · `deposit.css:56` 과 같은 값입니다. */
[data-skin="athena"] .ath-foot-col small {
    display: block;
    margin: 0 0 6px;
    color: var(--color-brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

[data-skin="athena"] .ath-foot-col h3 {
    margin: 0 0 12px;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

[data-skin="athena"] .ath-foot-col ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-skin="athena"] .ath-foot-col a {
    color: var(--color-ink-nav);
    font-size: 12.5px;
    text-decoration: none;
    transition: color 0.15s ease;
}

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

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

[data-skin="athena"] .ath-foot-base small {
    display: block;
    max-width: 1560px;
    margin: 0 auto;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    color: var(--color-ink-muted);
    font-family: var(--font-numeric);
    font-size: 11px;
    letter-spacing: 0.02em;
}

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

/* 좁은 화면. 간판이 칸 하나를 차지하는 두 단은 좁아지면 간판 옆이 반쯤
   비므로, 간판이 위로 올라가고 길 칸들이 폭을 다 씁니다.

   1023 은 이 스킨이 이미 쓰는 폭입니다(`SKIN_BREAKPOINTS`). 처음에 899 로
   적었다가 `skin-screen-seam.spec.ts` 에 걸렸습니다 — 스킨이 선언하지 않은
   폭에서 시트가 꺾이면 그 폭에서 무슨 일이 나는지 아무도 안 봅니다. */
@media (max-width: 1023px) {
    [data-skin="athena"] .ath-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 30px 20px 26px;
    }
}

@media (max-width: 767px) {
    [data-skin="athena"] .ath-foot {
        padding: 26px 14px 22px;
    }

    /* 넷을 한 줄로 세우면 390 에서 바닥글이 화면 하나만큼 길어집니다.
       두 칸씩 두 줄이면 스무 줄이 열 줄이 됩니다. */
    [data-skin="athena"] .ath-foot-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }

    [data-skin="athena"] .ath-foot-base small {
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    }

    [data-skin="athena"] .ath-foot-brand img {
        height: 22px;
    }
}