/*--------------------------------------------------------- 아테나 — 손님 화면의 뼈대. ── 왜 이 파일이 생겼는가 ───────────────────────────── 운영자의 말: 「입금이나 출금 포인트전환 이런 페이지 전부 리뉴얼해야지 왜 서로 디자인이 다 다른거야 하나의 디자인으로 해야지」 맞는 지적이고, 원인은 취향이 아니라 **일하는 방식**이었습니다. 화면을 하나씩 다듬었고, 그래서 하나씩은 나아졌는데 서로 안 맞았습니다. 다듬은 순서대로 답이 갈렸습니다: 입금·출금 판 하나 안에 머리 · 구획 카드 · 바닥 띠 포인트전환 판 없음, 머리는 지면에, 구획은 ★ 글리프, 칩은 알약 테더 머리 없음, 판 없음, 라벨/값 줄, 알약 칩 마이페이지 머리 없음, 판 없음, 13px 대문자 한 줄로 시작 그래서 이번에 하는 일은 **더 다듬는 것이 아닙니다.** 여섯 화면이 같은 한 벌에서 나오게 하는 것입니다. 기준은 운영자가 골랐습니다 — **입금하기·출금하기**. ── 베끼는 것이 아니라 조립하는 것 ──────────────────── 입금 마크업을 아홉 화면에 붙여넣으면 보름 뒤에 사본 아홉이 다시 갈라집니다. 갈라지는 데 아무 사건도 필요 없습니다 — 한 화면에서 한 줄을 고치는 사람은 나머지 여덟이 있다는 것을 모릅니다. 그래서 껍데기를 **뽑아** 둡니다. 화면은 이것을 **부릅니다**: .ath-panel 지면의 판. 작업하는 자리를 통째로 담습니다. .ath-panel-head 그 안의 머리 — 눈썹 · 제목 · 한 줄. .ath-panel-chip 머리 오른쪽의 칩 — 보유머니/보유포인트. .ath-panel-body 판의 속. .ath-panel-row 속을 두 칸으로 (넓을 때만). .ath-panel-stack 그 한 칸에 구획이 여럿 설 때. .ath-section 구획 카드 — 동그란 표 · 눈썹 · 한글 제목. .ath-panel-foot 액션 도크 — 달리는 합계와 단추의 경계. .ath-panel-go 도크의 마무리 단추 (채운 것, 화면당 하나). .ath-panel-side 도크의 두 번째 조작 (선, 되돌리거나 옆으로). .ath-card 판 **아래**의 곁 구획 — 안내사항 · 신청 내역 · .ath-card-header 포인트 내역 · 최근 결과 · 최근 사용 · 최근 .ath-card-title 출석 결과. 여덟 화면이 같은 것을 부릅니다. .ath-card-body 마크업을 손으로 적는 자리는 `src/skins/athena/panel.tsx` **하나**입니다. 화면이 이 이름들을 직접 적으면 `athena-shell.spec.ts` 가 실패합니다 — 사본이 둘이 되는 순간이 정확히 거기이기 때문입니다. 이틀 전 밴더 타일을 한 벌로 모을 때 쓴 것과 같은 짝(부품 + 사본을 세는 시험)입니다. ── 부품은 **없어도 됩니다** ────────────────────────── 이것이 이 파일에서 제일 조심한 것입니다. 공지사항에는 보유머니도 제출 단추도 없고, 이벤트에는 둘 다 없습니다. 머리가 **없는 칩의 자리를 비워 두면** 그 화면 절반에 구멍이 남습니다 — 이번 회차를 시작하게 한 316px 빈자리가 바로 그것이었습니다. 머리는 flex라 없는 칩의 자리를 남기지 않습니다. 액션 도크는 합계와 조작의 비율이 필요해 grid를 쓰되, 실제로 온 부품을 `:has()`로 보고 열 자체를 바꿉니다. 합계 없는 제출 하나면 한 열, 곁 조작 하나면 외곽 도크도 없습니다. 값이 아니라 구조가 답이라 실수로 되돌리기 어렵습니다. ── 이 시트가 안 하는 것 ────────────────────────────── 수를 새로 고르지 않았습니다. 여기 있는 값은 전부 **입금하기가 이미 쓰던 것**이고(`deposit.css` 에서 옮겼습니다), 그래서 기준 화면은 이 변경으로 안 움직여야 합니다. 움직였다면 옮기다 틀린 것입니다. `home.css` 머리말의 「대문이 한 카드 문법의 반복이 되면 안 된다」는 이 파일에 안 걸립니다. 그것은 대문의 장들이 서로 주목을 다투는 이야기이고, 안쪽 화면에 대해서는 운영자가 이제 **한 문법으로** 하라고 했습니다. 울타리는 `[data-skin="athena"]` 입니다. 끊는 폭은 셋뿐입니다 — 767 · 1023 · 1279. ---------------------------------------------------------*/ /*--------------------------------------------------------- 지면의 머리 — 눈썹 · 제목 · 한 줄. ── 자리가 하나가 되었습니다 (2026-09-10, 둘째 회차) ── 두 자리였습니다. 판이 있으면 판 안(`.ath-panel-head`)이고, 아직 판을 안 쓰는 화면(공지사항 · 이벤트 · 고객센터)에서는 지면 위(`.ath-masthead`) 였습니다. 그 셋이 판으로 옮겨 왔으므로 판 밖의 머리는 **지워졌습니다** — 남겨 두면 「판 없이도 된다」는 두 번째 답이 되고, 그것이 이 회차가 고치고 있는 병입니다. 손님 화면의 머리는 이제 `AthenaPanelHead` 하나뿐입니다. ---------------------------------------------------------*/ /* 눈썹 — 10px 라틴 대문자, 자간 1.6px, 강조색. 이 사이트에서 「여기가 무엇의 시작인가」를 말하는 유일한 표시입니다. 지면의 머리와 구획의 머리가 같은 것을 쓰는 것이 요점이라 한 규칙에 묶습니다. 대문·로비의 장 제목(`home.css` 의 `.ath-editorial-head`)은 자리가 달라 규칙이 따로이고, 세 값이 같은지는 `athena-screen-family.spec.ts` 가 두 시트를 읽어 셉니다. 얼굴이 `--font-sans` 인 것은 이 자리가 **이름**이기 때문입니다 — AMOUNT · ACCOUNT · POINTS · DEPOSIT REQUEST. 숫자 얼굴(Rajdhani)이었던 것은 「STEP 01」이라는 번호였을 때의 자취이고, 그 번호는 조건부 구획에서 「02B」가 되어 없앴습니다 (`panel.tsx` 의 `AthenaSection`). */ [data-skin="athena"] .ath-panel-name > small, [data-skin="athena"] .ath-section-name > small { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand); } /*--------------------------------------------------------- 판. ---------------------------------------------------------*/ /* 판의 속이 시작하는 **세로줄**. 이 수는 판만의 것이 아닙니다. 판 아래에 서는 곁 구획도 같은 줄에서 시작해야 지면이 한 기둥으로 읽히고, 안 그러면 그 목록만 디자인에서 떨어져 나온 것으로 보입니다 — 운영자의 「최근 결과가 판 밖으로 나와 있다」가 정확히 그 27px 이었습니다 (1440 에서 잰 값: 판의 속 135, 곁 구획의 속 108). 그래서 여백을 **베끼지 않고 나눠 씁니다.** 아래 `.ath-panel-body` 와 `.ath-card` 가 같은 변수를 읽으므로, 판의 안쪽 여백을 고치면 곁 구획이 같이 따라옵니다. 두 자리에 26 과 27 을 손으로 적으면 그 둘은 다음에 한쪽만 움직입니다. */ [data-skin="athena"] .ath-screen { --ath-panel-pad: 26px; /* + 판의 테두리 1px. */ --ath-panel-inset: calc(var(--ath-panel-pad) + 1px); } [data-skin="athena"] .ath-panel { overflow: hidden; border: 1px solid var(--color-line); border-radius: 22px; background: var(--color-panel); } /* 판 안의 머리. ── flex 인 까닭 ────────────────────────────────────── 칩이 **없을 수 있습니다.** 격자로 `minmax(0,1fr) auto` 를 쓰면 둘째 칸이 0 폭이어도 칸 사이 간격 24px 는 그대로 남고, 칩 없는 화면마다 오른쪽에 24px 가 빕니다. flex 의 `gap` 은 항목 **사이**에만 들어가므로 자식이 하나면 아무 자국도 안 남습니다. 아래 선은 머리와 속을 가릅니다 — 경사가 아니라 선입니다. 그 경사는 2026-09-10 에 걷어냈고, 이 스킨은 경사를 한 줄도 안 씁니다. */ [data-skin="athena"] .ath-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-bottom: 1px solid var(--color-line); background: var(--color-base); } [data-skin="athena"] .ath-panel-name { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; } [data-skin="athena"] .ath-panel-head h2 { margin: 6px 0 0; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.04em; color: var(--color-ink); } [data-skin="athena"] .ath-panel-name > p { margin: 10px 0 0; font-size: 13px; color: var(--color-ink-muted); } /*--------------------------------------------------------- 칩 — 머리 오른쪽의 한 수. 보유머니 · 보유포인트. **있을 때만 그립니다.** ── 자리를 잡는 방식을 바꿨습니다 ───────────────────── 라벨이 `position: absolute` 에 `translateY(-17px)` 이었습니다. 값과 단위를 한 밑선에 세우면서 라벨만 위로 올리려던 것인데, 흐름에서 빠진 글자라 칩이 좁아지는 폭(390)에서 값 위로 겹칠 수 있었고 칩의 높이에도 안 셌습니다. 지금은 그냥 세로 두 줄이고, 값과 단위만 안쪽에서 밑선을 맞춥니다. 보이는 것은 같고 흐름에서 빠지는 것이 없습니다. ---------------------------------------------------------*/ [data-skin="athena"] .ath-panel-chip { display: flex; flex: none; align-items: center; gap: 13px; min-width: 230px; padding: 14px 17px; border: 1px solid var(--color-line); border-radius: 15px; background: color-mix(in srgb, var(--color-base) 78%, transparent); } [data-skin="athena"] .ath-panel-chip-icon { display: grid; flex: none; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-brand) 12%, var(--color-panel)); color: var(--color-brand); } [data-skin="athena"] .ath-panel-chip-read { display: flex; min-width: 0; flex-direction: column; gap: 2px; } [data-skin="athena"] .ath-panel-chip-read > small { font-size: 10px; line-height: 1.2; color: var(--color-ink-muted); } /* 값과 단위는 한 덩어리입니다 — 줄바꿈이 둘 사이로 들어가면 안 됩니다. */ [data-skin="athena"] .ath-panel-chip-read > span { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; } [data-skin="athena"] .ath-panel-chip-read strong { font-family: var(--font-numeric); font-size: 22px; line-height: 1.15; color: var(--color-gold); font-variant-numeric: tabular-nums; } [data-skin="athena"] .ath-panel-chip-read em { font-style: normal; font-size: 11px; color: var(--color-ink-muted); } /*--------------------------------------------------------- 판의 속. ---------------------------------------------------------*/ [data-skin="athena"] .ath-panel-body { padding: var(--ath-panel-pad); } /* 판이 머리만 들고 있을 때 아래로 26px 이 빈 채 남지 않게. */ [data-skin="athena"] .ath-panel-body:empty { display: none; } /* 구획 사이. 값은 입금하기가 쓰던 18px 그대로입니다. */ [data-skin="athena"] .ath-panel-body > * + * { margin-top: 18px; } /* 두 칸 작업공간 — 넓을 때만. 입금·출금이 금액과 계좌를 나란히 놓는 자리입니다. 오른쪽에 360px 바닥을 두는 것은 계좌번호 한 줄이 그보다 좁아지면 접히기 때문입니다. */ [data-skin="athena"] .ath-panel-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: 18px; } /* 두 칸 중 한 칸에 구획이 여럿 설 때 (`AthenaStack`). 출석체크가 이 모양입니다 — 왼쪽에 달력 하나, 오른쪽에 오늘의 조건 · 다음 보상 · 보상 사다리. 뷰에 `.ath-ev-side` 라는 이름이 있었는데 **시트에 그 이름이 한 번도 없어서** 그 기둥은 아무 간격도 없었습니다. 간격은 판의 속과 같은 18px 입니다. `align-content: start` 인 것은 기둥이 왼쪽 달력보다 짧을 때 구획들이 세로로 늘어나 벌어지지 않게 하려는 것입니다. */ [data-skin="athena"] .ath-panel-stack { display: grid; align-content: start; gap: 18px; min-width: 0; } /*--------------------------------------------------------- 구획 카드. ── 눈썹이 번호가 아니라 이름인 까닭 ────────────────── 「STEP 01」이었을 때 이 판은 01 · 02 · **02B** · 03 을 찍고 있었습니다: 게임머니 회수 구획이 조건부라 번호를 못 받고 02B 가 되었고, 보너스 구획도 도메인에 따라 없습니다. 순서가 아닌 것에 번호를 붙이면 그 번호는 회원에게 「셋 중 둘째」가 아니라 「무슨 뜻인지 모를 표」입니다. 이름은 조건부여도 안 흔들립니다. ---------------------------------------------------------*/ [data-skin="athena"] .ath-section { min-width: 0; padding: 24px; border: 1px solid var(--color-line-soft); border-radius: 17px; background: var(--color-base); } /* 먼저 보는 구획. 이 판에서 회원이 제일 먼저 하는 일(금액을 넣는 것)이라 한 단 다릅니다. 그 한 단이 145도 경사였고 지금은 평평한 한 색입니다 — 세기는 그대로이고 경사만 없습니다. */ [data-skin="athena"] .ath-section-lead { border-color: color-mix(in srgb, var(--color-brand) 26%, var(--color-line)); background: color-mix(in srgb, var(--color-brand) 5%, var(--color-base)); } /* 구획의 머리. 여기도 flex 입니다 — 동그란 표가 **없을 수 있고**, 없을 때 38px 칸과 12px 간격이 남으면 제목이 이유 없이 안으로 들어갑니다. */ [data-skin="athena"] .ath-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 25px; } [data-skin="athena"] .ath-section-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--color-brand) 11%, var(--color-panel)); color: var(--color-brand); } /* 제목은 **220px 아래로는 안 내려갑니다.** `flex: 1 1 auto` 였고, 그러면 옆의 곁말이 길 때 이 칸이 0 까지 눌립니다. 테더 입금의 390 에서 실제로 그렇게 됐습니다 — 시세 한 줄 (「적용시세 1 USDT = 1,356원 · 4분 전 기준」)이 폭을 다 가져가고 「원화금액」이 **한 글자씩 네 줄**로 섰습니다. 바닥값을 두면 곁말이 못 들어오고, 머리가 `wrap` 이므로 곁말은 아랫줄로 내려갑니다. 폭을 재서 고르는 대신 「제목이 먼저」를 구조로 적는 것이고, 그래서 곁말이 길어져도 다시 안 깨집니다. */ [data-skin="athena"] .ath-section-name { display: flex; min-width: 0; flex: 1 1 220px; flex-direction: column; } [data-skin="athena"] .ath-section-name > h3 { margin: 4px 0 0; font-size: 17px; letter-spacing: -0.025em; color: var(--color-ink); } [data-skin="athena"] .ath-section-name > p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--color-ink-muted); } /* 구획의 오른쪽 끝 — 그 구획에 딸린 한 가지 사실. 시세처럼. 없으면 아무 자국도 안 남습니다 (머리가 flex 인 것과 같은 이유). */ [data-skin="athena"] .ath-section-aside { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; color: var(--color-ink-muted); } /* 슬롯이 비면 그 구획이 사라집니다. `slots.bonusField` 와 `slots.vendorRecall` 은 **완성된 노드**라 언제나 truthy 입니다. 그래서 `{slots.bonusField && …}` 로는 안 걸러지고, 보너스를 안 내주는 도메인에서 「충전보너스」 머리글 아래로 빈 상자가 남습니다. 비었는지를 뷰가 물어보게 두면 그 판정이 규칙의 두 번째 사본이 됩니다 (슬롯을 두는 이유가 그것입니다). 그래서 여기서 접습니다: React 가 null 을 그리면 그 자리에 자식 노드가 하나도 없으므로 `:empty` 가 맞습니다. */ [data-skin="athena"] .ath-section:has(> .ath-section-slot:empty) { display: none; } /*--------------------------------------------------------- 판이 하는 말 — 막힘 · 기다림 · 답. 비면 사라집니다. 알림 셋이 다 없을 때 8px 간격만 남는 자리였습니다. ---------------------------------------------------------*/ [data-skin="athena"] .ath-panel-feedback { display: grid; gap: 8px; } [data-skin="athena"] .ath-panel-feedback:empty { display: none; } /* 알림 자리가 **맨 위**일 때. 돈 화면에서는 이 자리가 판의 마지막 자식이라 사라지면 그만이었습니다. 내용 화면(공지사항 · 고객센터)에서는 목록보다 위이고, 그때 `display:none` 은 흐름에서만 빠집니다 — 바로 아래 형제는 `> * + *` 의 18px 을 그대로 받아서 알림이 없는 날 목록이 18px 내려가 있었습니다. 자리를 안 남긴다는 말은 이 한 줄까지입니다. **띠는 뺍니다.** 띠는 `> * + *` 의 18px 을 받는 형제가 아니라 자기 관계(`--ath-gap`)를 가진 것이고, 여기 걸리면 그 관계가 지워집니다. 마이페이지가 정확히 그랬습니다 — 빈 알림 다음 형제가 띠라서 마지막 구획과 **0px** 으로 붙었습니다 (위 머리말). */ [data-skin="athena"] .ath-panel-body > .ath-panel-feedback:empty + *:not(.ath-panel-foot) { margin-top: 0; } /* 이 안에서 알림은 위 여백을 스스로 안 냅니다 — 간격은 격자가 냅니다. `.ath-alert` 를 이름으로 부르지 않는 것은 그 이름이 `screens.css` 의 것이기 때문입니다. 두 시트가 한 이름을 잡으면 나중에 실리는 쪽이 상대가 안 정한 속성을 이깁니다 — `skin-screen-seam.spec.ts` 가 그것을 셉니다. 여기 들어오는 것은 전부 알림이라 `> *` 로 충분합니다. */ [data-skin="athena"] .ath-panel-feedback > * { margin-top: 0; } /*--------------------------------------------------------- 바닥 띠 — 달리는 합계와 마무리 단추. ── 없을 수 있습니다 ────────────────────────────────── 공지사항과 이벤트에는 제출할 것이 없습니다. 그때 이 띠는 **아예 안 그려집니다** — 회색으로 꺼진 단추가 남는 것이 아니라 없습니다. 합계도 따로 없을 수 있습니다 (마이페이지의 「변경하기」는 금액이 아닙니다). 그래서 격자가 아니라 flex 입니다 — 격자의 `gap` 은 빈 칸 옆에도 남지만 flex 의 `gap` 은 항목 사이에만 들어가므로, 합계가 없는 화면에 그 자국이 안 남습니다. ── 그림자와 흐림을 안 씁니다 ───────────────────────── 반투명한 면에 `blur(16px)` 을 깔고 아래로 48px 그림자를 떨어뜨리고 있었습니다. 이 띠가 해야 하는 일은 「떠 보이는 것」이 아니라 **밑으로 지나가는 내용이 안 비치는 것**이고, 불투명한 면 하나면 끝납니다. 밝은 조합 둘에서는 검은 그림자가 모래빛 지면 위에 눌린 자국으로 남습니다. ── 상자였고, 빈 글칸으로 읽혔습니다 (2026-09-12) ───── 운영자가 고객센터 하단을 보고 「빈 글칸」이 있다고 했습니다. 글칸은 없습니다 — 본 것은 **이 띠**입니다. 띠는 네 변에 테두리를 두르고 모서리를 16px 깎은 가로 상자였고, 그 테두리가 `--color-line-head` 였습니다. 이 스킨에서 상자꼴 입력칸이 쓰는 바로 그 값입니다(`.ath-ev-code`). 그리고 합계가 없는 화면에서 그 상자는 거의 비어 있습니다 — 1440 에서 잰 값으로 고객센터가 1132 중 **792px(70%)**, 쿠폰이 **902px(80%)**. 테두리를 두른 가로 상자에 왼쪽 70% 가 비어 있고 오른쪽 끝에 단추가 둘이면, 그것은 「글칸과 단추」로 읽힙니다. 쿠폰 화면에서는 같은 테두리의 진짜 코드 입력칸이 80px 위에 서 있어서 둘이 형제로 보였습니다. 답은 「왼쪽을 무언가로 채우기」가 아닙니다 — 돈 화면 넷 말고는 거기 놓을 사실이 없고, 없는 것을 만들어 넣는 것이 이 뼈대가 막고 있는 바로 그 일입니다. 답은 **상자를 그만두는 것**입니다. 이 스킨에서 구획은 면이 아니라 선이 지므로, 띠도 선 하나로 닫습니다: 위에 머리 카락 선, 아래로는 불투명한 면. 비어 있어도 상자가 아니면 글칸으로 안 읽힙니다. `--color-base` 는 그대로입니다. 밑으로 지나가는 내용을 가리는 것은 면이 하던 일이지 테두리가 하던 일이 아닙니다. ── 안 붙는 `sticky` 를 걷었습니다 (2026-09-14) ─────── `position: sticky; bottom: 12px` 이 있었고 **아무 일도 안 했습니다.** 잰 값(1440×620, 260px 내려서): 띠의 윗변이 940 → 680 으로 내려간 만큼 그대로 따라 내려갔습니다. 까닭은 `.ath-panel` 의 `overflow: hidden` 입니다 — 그것이 가장 가까운 스크롤 상자가 되고, 그 상자는 스크롤되지 않으므로 띠가 붙을 자리가 없습니다. 안 하는 선언을 남겨 두는 값이 실제로 청구됐습니다. 돈 화면은 그것을 믿고 `money.css` 에서 `position: static` 으로 되돌리고 있었고, 되돌리는 김에 **간격도 거기서 다시 답했습니다.** 한 관계에 주인이 둘이 되었고, 그 순간 돈 넷과 나머지가 갈라졌습니다 (아래 머리말). 공지 상세의 주석도 「띠가 sticky 라 목록으로가 화면에 남는다」를 근거로 단추 하나를 지운 적이 있습니다 — 근거가 처음부터 없었습니다. `overflow: hidden` 은 판의 둥근 모서리가 기대고 있는 것이라 그대로 둡니다. 정말로 붙는 띠가 필요해지면 그때는 이 한 줄이 아니라 판의 스크롤을 바꾸는 결정이고, **지금 없는 것을 없다고 적어 두는 편이** 다음 사람이 그 말을 믿고 한 겹 더 쌓는 것보다 낫습니다. ── 단추가 선과 판 바닥에 붙어 있었습니다 (2026-09-14) ─ 운영자: 「밑에 너무 딱붙어있고 금액위치나 입금신청 버튼이나…」. 1440 에서 잰 값입니다. 판이 **위에서 여는 폭**은 머리의 선부터 첫 구획까지 26px 인데, 아래에서 닫는 폭은 그 짝이 아니었습니다: 띠의 선 → 단추 위 17px (띠의 안쪽 여백 16 + 테두리 1) 단추 → 판 아래 테두리 33px / 27px (화면에 따라 둘) 단추가 자기 띠 안에서 위로 17 · 아래로 6 을 갖고 있었으니, 선에도 붙고 판 바닥에도 붙었습니다. 지금은 위아래가 `--ath-close` 하나로 같고(잰 값 45 / 45), 그 수는 판이 위에서 여는 26px 보다 큽니다 — 닫는 자리는 여는 자리보다 넉넉한 것이 맞습니다. 여기가 회원이 돈을 보내기로 정하는 자리입니다. ── 같은 관계에 답이 셋이었습니다 ───────────────────── 마지막 구획과 띠 사이를 재면 **돈 넷 32px · 고객센터와 쿠폰 20px · 마이페이지 0px** 이었습니다. 0 인 까닭은 빈 알림 상자였습니다 — 아래 `.ath-panel-feedback:empty + *` 가 다음 형제의 위 여백을 지우는데, 마이페이지에서는 그 다음 형제가 **띠**였습니다. 돈 넷만 32 였던 것은 `money.css` 의 덮어쓰기가 우연히 그 규칙을 이겨서였고, 그러니까 그 화면들은 고쳐져 있던 것이 아니라 **다른 이유로 안 걸려** 있었습니다. 이제 이 띠의 자리는 전부 이 파일이 정합니다. `money.css` 에는 한 줄도 없습니다 — 돈 화면이 나머지와 달라야 할 까닭이 이 관계에는 없습니다. ── 양 끝이었고, 「구석」으로 읽혔습니다 (2026-09-14) ── 운영자의 말: 「금액이나 입금신청 이런거 보면 전부 위치가 구석져있어, 입금하기 뿐만 아니라 모든 페이지 다 그렇다」. 그렇게 만든 것은 이 띠의 **두 규칙**이었습니다 — 합계가 `flex: 1 1 auto` 로 늘어나 숫자가 왼쪽 끝으로 가고, 두 번째 조작이 `margin-inline-end` 를 `auto` 로 받아 반대쪽 끝까지 밀렸습니다. 1440 에서 잰 값입니다. 띠는 1170px 이고 그 안에 든 것은: 입금 · 출금 · 포인트 · 테더 0원(135) … 입금신청(1075) 사이 920px 고객센터 계좌문의(135) … 문의 작성 사이 850px 마이페이지 · 쿠폰 변경하기 하나(1075) 왼쪽 940px 920px 떨어진 두 물건은 「세기가 다른 한 쌍」이 아니라 서로 **남**입니다. 합계는 바로 그 단추가 보낼 수이고, 계좌문의와 문의 작성은 같은 자리에서 고르는 두 갈래입니다. 자리가 그 관계를 부정하고 있었습니다. 그래서 띠의 내용은 이제 **한 덩어리**입니다. 늘어나는 것도 밀어내는 것도 없고, 그 덩어리가 띠 가운데에 섭니다. ── 왜 오른쪽 끝이 아니라 가운데인가 ────────────────── 한 덩어리로 묶기만 하고 오른쪽 끝에 두는 답도 화면에 입혀 봤습니다. 입금하기와 고객센터는 낫고 **마이페이지와 쿠폰은 안 낫습니다** — 거기는 조작이 하나뿐이라 묶을 것이 없고, 그 하나가 여전히 오른쪽 구석에 940px 을 이고 섭니다. 운영자가 말한 것은 「모든 페이지」였고, 한 화면이라도 남으면 그 답은 이 말을 못 지킵니다. 가운데는 부품 수를 안 봅니다. 합계가 있든 없든, 조작이 하나든 둘이든 덩어리는 같은 자리에 섭니다. ── 세기는 아직 자리가 말합니다 ─────────────────────── 두 조작을 양 끝에 세운 까닭은 「채우기로만 그 차이를 말하면 색을 잘 안 보는 눈에는 아무 차이도 없다」였습니다. 그 걱정은 그대로 유효하고, 답은 끝이 아니라 **차례**로도 됩니다 — 되돌리거나 옆으로 나가는 것이 먼저 오고 마무리가 뒤에 옵니다. 거기에 채우기와 폭(아래 360px 바닥값)이 더해져 셋이 같은 말을 합니다. 850px 의 거리는 그 셋 중 제일 약한 신호였습니다: 그만큼 떨어지면 「반대쪽 끝」이 아니라 「무관한 둘」로 읽힙니다. ── 가운데 정렬도 답이 아니었습니다 (2026-09-14) ───── 양 끝을 걷은 뒤에는 1170px 짜리 검은 띠 한가운데에 450px 짜리 내용만 떠 있었습니다. 위아래 여백을 45px 로 키우자 빈 면은 더 커졌고, 마이페이지처럼 단추 하나뿐인 화면에서는 **큰 빈 띠와 작은 단추**만 남았습니다. 운영자가 다시 「디자인 아직도 이상해」라고 한 화면입니다. 원인은 정렬값이 아니었습니다. 내용에 맞는 경계가 없어서 판 전체가 액션 영역인 것처럼 보이는데 실제 조작은 그 일부뿐인 것이 문제였습니다. 이제 띠는 판의 바닥을 통째로 칠하지 않습니다. 최대 720px 의 **액션 도크**가 합계와 조작을 함께 감싸고, 내용이 하나뿐이면 그 내용에 맞춰 더 좁아집니다. 2026-09-12 의 「빈 글칸」과는 다른 구조입니다. 그때 상자는 1132px 중 70~80% 가 비어 있었고 진짜 입력칸과 같은 테두리를 썼습니다. 지금 도크는 720px 로 제한되고 안은 합계와 단추가 채우며, 합계가 없는 단일 제출은 548px 로 줄어듭니다. 곁 단추 하나뿐이면 도크 자체를 그리지 않습니다. ---------------------------------------------------------*/ [data-skin="athena"] .ath-panel-foot { display: grid; width: min(100%, 720px); grid-template-columns: minmax(180px, 0.72fr) minmax(300px, 1.28fr); align-items: center; gap: 14px; margin-inline: auto; padding: 14px; border: 1px solid var(--color-line-soft); border-radius: 16px; background: var(--color-panel); } /* 마지막 구획과의 틈. 이 스킨에서 「따로 있음」은 `--ath-gap` 하나입니다 — 20px 이라는 이 띠만의 수를 두면 곧 세 번째 답이 됩니다. */ [data-skin="athena"] .ath-panel-body > .ath-panel-foot { margin-top: var(--ath-gap); } /* 합계 없이 마무리 조작 하나뿐이면 빈 첫 칸을 없애고 도크도 줄입니다. */ [data-skin="athena"] .ath-panel-foot:has(> .ath-panel-go:only-child) { width: min(100%, 548px); grid-template-columns: minmax(0, 1fr); } /* 공지 상세의 「목록으로」처럼 곁 조작 하나뿐이면 제출 도크가 아닙니다. 작은 선 단추에 상자를 한 겹 더 씌우지 않습니다. */ [data-skin="athena"] .ath-panel-foot:has(> .ath-panel-side:only-child) { width: fit-content; grid-template-columns: auto; padding: 0; border: 0; background: none; } [data-skin="athena"] .ath-panel-foot:empty { display: none; } /* 합계는 도크의 왼쪽 칸에서 이름 한 줄, 값 한 줄로 읽힙니다. ── 값과 단위는 **한 밑선**입니다 (2026-09-14) ──────── flex 였을 때 이 자리는 `align-items: baseline` 이었습니다. 이름을 제 줄에 세우려고 격자로 바꾸면서 그 줄이 빠졌고, 단위에만 남은 `align-self: baseline` 은 혼자서는 아무 일도 못 합니다 — 밑선 맞춤은 **같은 줄의 항목 끼리 모여야** 성립하는데 값은 `normal`(늘이기)이라 그 모임에 없었습니다. 잰 값: 22px 값의 밑선과 11px 단위의 밑선이 **10px** 어긋났습니다(네 화면 · 1280 과 390 모두 같은 10). 그래서 「1,000,000 원」의 원이 숫자 위로 떴습니다. 고치는 자리가 단위가 아니라 **여기**인 것이 요점입니다. 밑선은 한 항목의 성질이 아니라 줄의 성질이라, 단위 쪽에 적으면 다음에 셋째 항목이 붙는 날 그것만 또 빠집니다. */ [data-skin="athena"] .ath-panel-sum { display: grid; grid-template-columns: auto auto; min-height: 64px; align-items: baseline; align-content: center; justify-content: start; gap: 2px 6px; min-width: 0; padding-inline: 14px; } /* 합계의 이름 — 「신청금액」 · 「전환 포인트」. ── 눈에 안 보였습니다 (2026-09-14 에 되돌림) ───────── 이 글자가 `.ath-sr-only` 로 낭독기에만 갔습니다. 까닭은 「바로 위 구획의 머리글과 같은 낱말이라 한 판에 두 번이 된다」였고, 그때는 숫자가 띠의 **왼쪽 끝**에 혼자 서 있어서 「자리가 이미 말한다」가 성립하기 어려웠는데 그 어려움이 안 보였습니다. 지금은 숫자가 단추 옆으로 왔고 운영자가 실물을 보고 이름을 붙이는 쪽을 골랐습니다. 두 번 나오는 것은 맞지만 하는 일이 다릅니다 — 위의 것은 **칸의 이름**(무엇을 적는 자리인가)이고 여기 것은 **보낼 값의 이름** (무엇이 나가는가)입니다. 그리고 그 둘은 판 하나만큼 떨어져 있습니다. */ [data-skin="athena"] .ath-panel-sum > small { grid-column: 1 / -1; font-size: 11px; color: var(--color-ink-muted); } [data-skin="athena"] .ath-panel-sum > strong { font-family: var(--font-numeric); font-size: 22px; color: var(--color-gold); font-variant-numeric: tabular-nums; } /* 밑선은 위 `.ath-panel-sum` 의 `align-items` 가 정합니다 — 여기 다시 적으면 그 한 줄이 지워져도 이 규칙이 맞는 것처럼 보입니다. */ [data-skin="athena"] .ath-panel-sum > em { font-style: normal; font-size: 11px; color: var(--color-ink-muted); } /* 마무리 단추. 도크의 오른쪽 칸을 채웁니다. 폭을 단추 자신에게 360px 로 박지 않는 이유는 도크가 줄어들 때 **칸과 단추가 따로 줄지 않게** 하려는 것입니다. */ [data-skin="athena"] .ath-panel-go { display: inline-flex; width: 100%; min-width: 0; max-width: none; min-height: 64px; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ui-btn-primary-bg); color: var(--ui-btn-primary-ink); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } [data-skin="athena"] .ath-panel-go:hover:not(:disabled) { background: var(--ui-btn-primary-bg-hover); } [data-skin="athena"] .ath-panel-go:disabled { background: var(--color-raise); color: var(--color-ink-muted); cursor: not-allowed; } /*--------------------------------------------------------- 띠의 두 번째 조작 — 채우지 않은 것. ── 왜 두 번째 모양이 생겼는가 ──────────────────────── 돈 화면 넷에서 이 띠는 늘 「합계 + 채운 단추 하나」였습니다. 내용 화면을 옮기면서 그 모양으로 정직하게 못 담는 자리가 넷 나왔습니다: 공지 상세 「목록으로」 하나뿐 — 제출할 것이 없습니다 문의 쓰기 「취소」와 「보내기」 쪽지 상세 「목록으로」와 「문의하기」 고객센터 「계좌문의」와 「문의 작성」 둘 다 채우면 「여기서 끝난다」를 말하던 그 하나가 아무것도 안 말합니다. `.ath-btn-secondary` 를 그냥 놓는 것은 높이가 다릅니다(`--ui-btn-h-md` 대 50px). 그래서 선 단추를 여기 한 번 적습니다 — 마무리 단추와 같은 높이, 같은 모서리, 채우지 않은 면. 도크 안에서는 왼쪽 칸을 채우고 마무리 단추와 높이를 맞춥니다. 혼자 서는 「목록으로」는 바로 아래 `:only-child` 규칙이 50px 로 되돌립니다. ---------------------------------------------------------*/ [data-skin="athena"] .ath-panel-side { display: inline-flex; width: 100%; min-width: 150px; min-height: 64px; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid var(--color-line-head); border-radius: 12px; background: none; color: var(--color-ink-nav); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } [data-skin="athena"] .ath-panel-side:hover:not(:disabled) { border-color: var(--color-brand); color: var(--color-ink); } [data-skin="athena"] .ath-panel-side:disabled { color: var(--color-ink-muted); cursor: not-allowed; } [data-skin="athena"] .ath-panel-foot > .ath-panel-side:only-child { width: auto; min-width: 180px; min-height: 50px; } /*--------------------------------------------------------- 판 **아래**의 곁 구획 — 안내사항 · 신청 내역 · 최근 결과. ── 규칙이 여기 없었습니다 (2026-09-12) ─────────────── 마크업은 `panel.tsx` 의 `AthenaAside` 였고, 「판 아래」라는 자리는 이 파일 머리말이 말하고 있었고, **그리는 규칙만 `screens.css` 에** 있었 습니다. 한 물건을 두 시트가 나눠 들면 아무도 안 드는 것이 생기는데, 여기서 안 들려 있던 것이 **판과 곁 구획 사이의 관계**였습니다. 1440 에서 잰 값: 쿠폰 · 룰렛 · 복권 · 출석 판 ↔ 첫 곁 구획 0px 입금 · 출금 · 테더 · 포인트 판 ↔ 첫 곁 구획 42px 같은 화면 곁 구획끼리 74px 한 관계에 답이 셋이고, 그중 하나가 0 입니다. 0 인 까닭은 간격이 `.ath-card` 자신의 **아래쪽** 여백(`margin-bottom`)이었기 때문입니다 — 아래쪽 여백은 첫 틈에 절대 안 쓰이므로, 판 바로 밑에 오는 곁 구획은 어느 화면에서든 붙어 있었습니다. 42 와 74 는 `.ath-money-page` 가 그 위에 자기 격자 간격을 한 번 더 얹은 값입니다. ── 상자로 풀지 않습니다 ────────────────────────────── 「붙어 있다」의 손쉬운 답은 「테두리를 둘러 떼어 놓는다」인데, 이 스킨은 카드가 없습니다(`screens.css` 머리말). 구획은 면이 아니라 **선**이 집니다 — 제목 아래 머리카락 선 하나가 곁 구획의 전부이고, 떨어뜨리는 것은 여백입니다. 그래서 여기 있는 것은 여백 하나와 세로줄 하나뿐이고 `border` 도 `background` 도 늘지 않았습니다. ---------------------------------------------------------*/ [data-skin="athena"] .ath-card { display: block; background: none; border: 0; border-radius: 0; margin: 0; /* 판의 속과 같은 세로줄. 위 `--ath-panel-inset` 문단 참고. */ padding: 0 var(--ath-panel-inset); } /* 「따로 있음」은 **사이**에 있습니다. 위엣것이 판이든 다른 곁 구획이든 같은 값입니다. 자기 아래쪽 여백이 아니라 앞 형제와의 관계로 적는 것이 요점입니다 — 아래쪽 여백은 첫 틈에 안 쓰이고, 마지막 것에는 남으므로, 그 한 속성이 「첫 틈은 0, 끝에는 32」이라는 정확히 반대의 결과를 냅니다. `--ath-gap` 은 이 스킨에서 「따로 있음」의 값입니다(`screens.css`). 상자가 없으므로 이 수가 곧 구획을 가르는 유일한 수단입니다. */ [data-skin="athena"] .ath-screen > * + .ath-card { margin-top: var(--ath-gap); } /* 구획 제목. 카드 머리가 아니라 **밑줄 그은 한 줄**입니다. 작고 넓게 벌어진 글자인 것은 얼굴을 안 바꾸기로 했기 때문입니다 — 헤라가 Poppins 를 제목에 쓰는데 같은 짝을 다시 쓰면 「밝게 칠한 헤라」가 됩니다. 조판으로 벌립니다. */ [data-skin="athena"] .ath-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 0 10px; border-bottom: var(--ath-rule-head); background: none; } [data-skin="athena"] .ath-card-title { display: flex; align-items: center; gap: 9px; min-width: 0; } [data-skin="athena"] .ath-card-header h3, [data-skin="athena"] .ath-card-title h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); } /* 한글 제목은 대문자 변형이 뜻이 없고 자간만 남습니다 — 그래서 크기를 조금 올려 둡니다. 라틴 문자와 섞여도 두 줄로 안 보이게. */ [data-skin="athena"] .ath-card-header h3:lang(ko) { font-size: 14px; letter-spacing: 0.09em; } [data-skin="athena"] .ath-card-body { padding: 18px 0 0; } /*--------------------------------------------------------- 낭독기에만 있는 글자. 바닥 띠의 합계가 이 이름을 쓰다가 2026-09-14 에 눈에 보이는 자리로 나왔습니다 (위 `.ath-panel-sum > small`). 이 규칙은 남습니다 — 금액 입력칸의 `