` 가 flex 아이템이라 **내용 폭으로
줄어들어**, 그 안에서 텍스트를 가운데 정렬해도 눈에 보이는 변화가 없다.
**`justify-content` 가 그 div 자체를 가운데로 보내는** 쪽이 실제 효과를 낸다.
★ 범위는 이 블록 안쪽뿐이다 — 아래 이더스캔 링크(우측)·표(좌측)는 그대로다. */
.section__head.section__head--center {
justify-content: center;
text-align: center;
}
.section__head {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.section__title { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); }
.section__sub {
margin-top: var(--space-2);
font-size: var(--font-size-small);
color: var(--color-text-muted);
}
/* --- 3-7. 세그먼트 토글 (기간 구분 5종, 디자인 시스템 §5-13) ------------ */
.segmented {
display: flex;
border: 1px solid var(--color-border-control); /* 3.41:1 — 컨트롤 경계 */
border-radius: var(--radius);
overflow: hidden;
background: var(--color-bg);
}
.segmented__btn {
height: 44px;
padding-inline: var(--space-4);
border: 0;
border-left: 1px solid var(--color-border);
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.segmented__btn:first-child { border-left: 0; }
.segmented__btn:hover { background: var(--color-bg-alt); color: var(--color-text); }
/* 상태를 색만으로 전달하지 않는다 — aria-pressed + 굵기 변화(500→600)를 함께 쓴다
★ v2.23 — `aria-selected` 를 **같은 규칙에 합쳤다**(ranking 의 랭킹 구분 탭).
같은 컴포넌트인데 역할이 둘이다: index 기간 구분은 *눌린 버튼*(toggle · aria-pressed),
ranking 랭킹 구분은 *고른 탭*(role="tab" · aria-selected). 역할이 다르면 상태 속성도
다르지만 **보이는 상태는 하나**여야 하므로 값은 한 벌만 둔다 — 두 벌로 나누면
언젠가 한쪽만 손대서 같은 컴포넌트가 두 가지 활성 색을 갖게 된다. */
.segmented__btn[aria-pressed="true"],
.segmented__btn[aria-selected="true"] {
background: var(--color-primary);
color: var(--color-on-primary);
font-weight: var(--font-weight-semibold);
}
/* 컨테이너가 overflow:hidden 이므로 포커스 링을 안쪽에 그린다 */
.segmented__btn:focus-visible { outline-offset: -3px; border-radius: 0; }
/* --- 3-8. 표 (건별 6열 · Top 20 **3열** 공용 기반, 디자인 시스템 §5-7) ---
※ Top 20 은 v2.15 에서 4열 → 3열이 됐다(2026-08-04 사용자 지시로 `판매 실적` 제거).
이 공용 기반 규칙은 열 수에 의존하지 않아 **한 줄도 바뀌지 않았다.** */
/* 표 상단 고지 노트 — 열·블록 단위로 1회만 두는 미확정 메타 고지.
표 바깥에 두는 이유: 카드 전환 시 thead 가 sr-only 로 바뀌므로
th 안에 넣으면 시각 사용자에게 고지가 소실된다. 전 뷰포트 공통 노출. */
.table-note {
margin-bottom: var(--space-3);
font-size: var(--font-size-caption);
color: var(--color-text-muted);
line-height: var(--line-height-snug);
}
/* 고지가 2줄일 때(index ④ — 범위 → 단위) 두 줄은 한 덩어리로 붙고,
표와의 간격만 --space-3 로 남는다. 별개 블록으로 흩어져 보이지 않게 한다. */
.table-note:not(:last-of-type) { margin-bottom: var(--space-1); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
height: 44px;
padding-inline: var(--space-2);
background: var(--color-bg);
/* ★ v2.8 — 시안 주석 ④ *"표 제목 컬러 눈에 띄게 변경"* (구 --color-text-muted).
"표 제목"이 열 헤더임은 시안이 확정했다 — 함께 온 슬라이스 6종이 index ④ 건별 표의
열 헤더 6개와 1:1 이고 잉크 높이도 --font-size-small 규격과 일치한다(디자인 시스템 §5-7).
★ 시안색 #0085FF 는 **쓰지 않는다** — 14px 텍스트에 흰 3.62 / bg-alt 3.37 로 AA 미달이다.
의도만 채택하고 값은 --color-primary(흰 5.24 · bg-alt 4.88 — §1-3 35·36행)로 치환했다.
★ 선언 1줄이 세 표(index 건별 6열 · ranking 매출 3열 · ranking 정산 3열)를 함께 옮긴다.
⚠ 모바일 카드 모드의 `td::before` 라벨은 **--color-text-muted 유지**다(아래 반응형 블록).
그 라벨은 행마다 반복되므로 파랑으로 올리면 값보다 라벨이 먼저 읽힌다. */
color: var(--color-primary);
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
text-align: left;
border-bottom: 1px solid var(--color-border-strong); /* 구조 장식선 — 1.4.11 비대상 */
/* sticky 제거 (2026-07-28 사용자 확정) — 스크롤 중 헤더가 행 사이에 끼어 보이는 문제.
헤더는 표와 함께 스크롤한다. */
}
.data-table tbody td {
height: 56px;
padding-inline: var(--space-2);
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
/* zebra 줄무늬 금지 — 1~3위 강조 행과 경쟁한다 */
@media (hover: hover) and (pointer: fine) {
.data-table tbody tr:hover { background: var(--color-bg-alt); transition: background var(--transition-fast); }
}
.data-table .is-num { text-align: right; }
/* 카드 전환 시 td::before 라벨과 값이 좌우로 갈리도록 값만 한 겹 감싼다 */
.cell-value { display: inline-flex; align-items: baseline; }
.table-foot { margin-top: var(--space-6); text-align: center; }
/* --- ~~바이백 지갑 주소~~ (index ④-a · v2.19 사용자 지시 2026-08-10) ------------
★★ v2.33 — **적용 대상 0개 (의도적 보존)**: ④-a 블록 마크업이 사용자 직접 지시
(*"지갑 주소 블록 없애주고 바이백 내역 링크 누르는것만 있어도 됨"*)로 DOM 삭제됐다.
아래 `.wallet-note*` 규칙과 §6 반응형의 `.wallet-note__row` 행은 `.mock-banner` 전례
(§3-2)대로 **지우지 않고 보존**한다 — A-33(건별 tx 해시) 회신 시 주소 UI 가
재구성될 수 있고, 그때 이 규칙이 그대로 다시 산다. 신규 마크업이 이 클래스를
다른 뜻으로 재사용하는 것만 금한다.
── 이하 v2.19 설계 근거 (이력) ──
표 위 고지 줄(①범위 ②단위) 다음의 **③주체** 자리다. 고지가 산문 한 줄인 것과 달리
이쪽은 **값 + 액션**이라, 카드로 띄우지 않고 얇은 배경 블록으로만 구분한다 —
표 바로 위에 카드를 두면 표보다 무거워져 시선이 지갑에 먼저 붙는다(주인공은 표다).
★ 값이 없으면 `hidden` 이라 이 규칙 전체가 무효가 된다 — 죽은 자리를 만들지 않는다.
★ 신규 토큰 0. 색·간격·서체 전부 기존 토큰을 경유한다. */
.wallet-note {
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.wallet-note__label {
margin-bottom: var(--space-2);
color: var(--color-text-muted);
font-size: var(--font-size-caption);
line-height: var(--line-height-snug);
}
/* 모바일 기본은 세로 — 42자 주소와 44px 버튼을 360px 한 줄에 넣으면 반드시 넘친다.
≥768 에서 가로로 편다(아래 6-3 블록). */
.wallet-note__row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
/* 주소는 **끊어 읽는 값이 아니라 한 덩어리 식별자**라 말줄임(...)을 쓰지 않는다 —
가려진 주소는 눈으로 대조할 수 없어 표기의 목적 자체가 사라진다. 대신 줄을 접는다.
`anywhere` 를 쓰는 이유: 주소에는 공백·하이픈이 없어 `break-word` 로는 접히지 않는다. */
.wallet-note__addr {
min-width: 0;
font-family: var(--font-family-mono);
font-size: var(--font-size-small);
line-height: var(--line-height-body);
color: var(--color-text);
overflow-wrap: anywhere;
word-break: break-all;
}
.wallet-note__copy { flex: none; }
/* ★ v2.27 — 이더스캔 링크 (사용자 지시 4). **새 컴포넌트를 만들지 않았다** —
내용물이 `.slim-link--external`(이 사이트의 외부 링크 컴포넌트)이고 이 규칙은
그것을 행 안에서 줄바꿈되지 않게 잡아 두는 **자리 규칙 한 줄**뿐이다. */
/* ~~.wallet-note__link~~ **v2.28-2 폐기** — 이더스캔 링크가 지갑 블록 밖으로 나갔다.
규칙을 남겨 두지 않는다: 적용 대상이 0이고, 되살릴 때는 자리 자체를 다시 정해야 한다. */
/* ★ v2.28-2 — 이더스캔 링크 자리(표 위 · 상시 노출). 새 컴포넌트를 만들지 않았다 —
내용물은 `.slim-link--external` 이고 이 규칙은 **바깥 여백 한 줄**뿐이다. */
/* ★ v2.29 — **오른쪽 끝 정렬** (사용자 지시 1). 이 줄은 표 바로 위에 홀로 서는
보조 링크라, 좌측에 두면 표의 첫 열(`실행 일자`)과 같은 축에 붙어 **표의 일부처럼**
읽힌다. 우측 끝으로 보내면 표와 분리되고, 표의 마지막 열이 우측 정렬 금액이라
시각 축도 맞는다.
★ 360px 에서도 그대로 우측 정렬이다 — 링크 한 줄이라 좁은 폭에서도 넘치지 않는다
(실측 확인). 별도 반응형 분기를 두지 않았다. */
.buyback-explorer {
margin-bottom: var(--space-4);
text-align: right;
}
/* ══════════════════════════════════════════════════════════════════════════
? 도움말 점 — 노션 설명 문서 슬롯 (v2.27 · 사용자 지시 3 + 추가 정정)
★ **두 상태가 한 규칙을 공유한다.** 비활성은 `
`, 활성은 ``
이고 **모양이 같다** — 눌리는지 여부는 커서와 색으로만 갈린다. 같은 자리에서
아이콘이 커지거나 움직이면 URL 주입이 레이아웃을 흔든 것처럼 보인다.
★ 크기 20px 는 4px 스케일 안이고(--space-5), 제목(30px) 옆에서 위첨자처럼 읽히도록
`vertical-align` 로 살짝 올린다. 터치 타깃 44px 규칙의 예외인 이유: 이것은 **보조
설명으로 가는 부가 링크**이지 주 동작이 아니고, 같은 문서로 가는 경로가 아직
이 자리 하나뿐이라 크기를 키우면 제목 줄을 밀어낸다. → designer 상신(§7 D-14).
★ 대비: 비활성 `--color-text-muted`(5.56:1) / 활성 `--color-primary`(5.24:1) — 둘 다
본문 대비 기준 통과. 면(`--color-bg-alt`)은 비텍스트라 3:1 대상이 아니다. */
.help-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-5);
height: var(--space-5);
margin-inline-start: var(--space-2);
vertical-align: 0.15em;
border-radius: var(--radius-full);
background: var(--color-bg-alt);
color: var(--color-text-muted);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-bold);
line-height: 1;
/* 비활성 기본 — 링크가 아니므로 손가락 커서를 주지 않는다(누를 수 있다는 거짓 신호) */
cursor: default;
text-decoration: none;
user-select: none;
}
/* 활성(주입됨) — 링크일 때만 브랜드색과 손가락 커서를 준다 */
.help-dot--link {
background: var(--color-info-bg);
color: var(--color-primary);
cursor: pointer;
}
.help-dot--link:hover { background: var(--color-primary-tint-2); }
.help-dot--link:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* ★ v2.40 — 표 아래 「링크 복사」 액션 행 규칙을 삭제했다(사용자 직접 지시 2026-08-14
오후 — 버튼 폐기 · 유일 사용처가 ranking 표 아래 그 한 곳이었다). 마크업 원문·경위는
ranking.html 그 자리 취소선 주석 1벌 · notes §4-ax D272. 클래스명은 여기 적지 않는다 —
폐기 클래스 스캔의 오탐이 된다(§3-6 v2.3 삭제 주석과 같은 관례 · 원문 보존 의무는
ranking.html 쪽 규약이 진다). */
/* 스켈레톤 (로딩) — 스피너·"로딩 중" 텍스트 없음 */
.skeleton-bar {
display: block;
height: 1em;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
}
/* --- 3-9. 상태 블록 / 콜아웃 ------------------------------------------ */
.notice {
background: var(--color-info-bg);
border-left: 4px solid var(--color-primary);
border-radius: 0 var(--radius) var(--radius) 0;
padding: var(--space-5) var(--space-6);
line-height: var(--line-height-body);
}
.notice--warn {
background: var(--color-pending-bg);
border-left-color: var(--color-pending);
}
.state-block { margin-top: var(--space-6); }
.state-block__actions { margin-top: var(--space-4); }
/* --- 3-10. 슬림 링크 (탭 전환 · 노션 상세 안내 공용 컴포넌트) ------------ */
/* 페이지 끝의 탭 전환 밴드 — 두 페이지 공통으로 bg-alt 를 쓴다.
설명 섹션이 빠져 배경 교차가 사라진 뒤, 이것이 "여기가 페이지 끝"이라는
유일한 배경 신호다(레이아웃 §0-3). */
.slim-link-band {
padding-block: var(--space-12);
text-align: center;
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
}
/* index ⑤ 노션 링크 밴드 — 바로 아래 ⑥ 탭 전환 밴드와 배경·경계선으로 구분해
두 링크가 링크 목록처럼 한 덩어리로 뭉치지 않게 한다(레이아웃 §3 ⑤·⑥). */
.slim-link-band--notion {
padding-block: var(--space-10) var(--space-6);
background: var(--color-bg);
border-top: 0;
}
.slim-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
color: var(--color-primary);
font-size: var(--font-size-body-lg);
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-underline-offset: 2px;
}
.slim-link:hover { color: var(--color-primary-dark); }
/* 외부(노션) 상세 안내 링크 — 같은 컴포넌트의 외부 변형.
화살표가 아니라 **외부 이동 도형** 아이콘을 붙여 "사이트를 떠난다"를 전달한다(레이아웃 §3 ⑤).
★ [hidden] 을 여기서 명시적으로 끈다: .slim-link 가 display:inline-flex 라
UA 기본 `[hidden]{display:none}` 을 덮어써, 이 한 줄이 없으면 "URL 미확정 시
요소 자체를 렌더하지 않는다"는 규칙(레이아웃 §5 예외 행)이 조용히 깨진다. */
.slim-link--external[hidden] { display: none; }
/* 각주 블록 안 축소형(ranking ④ⓓ) — 크기만 낮추고 터치 타깃 44px 는 유지한다 */
.slim-link--sm { font-size: var(--font-size-small); }
/* ★ v2.28-2 — 비활성(주소 미주입). 노션 `?` 비활성과 **같은 판단**: 링크가 아니므로
브랜드색도 손가락 커서도 주지 않는다(누를 수 있다는 거짓 신호).
⚠ **반드시 `.slim-link` 정의보다 뒤에 있어야 한다** — 특정도가 같아(클래스 1개)
순서로 승부가 갈린다. 앞에 두었더니 `.slim-link` 의 `--color-primary` 가 이겨
비활성인데 **파랗게** 떴다(실렌더로 잡았다).
★ 밑줄은 **남긴다** — 주소가 들어오면 같은 자리에 같은 모양의 링크가 서야 하고,
밑줄까지 빼면 활성 전환이 "없던 것이 생긴" 것처럼 보여 자리가 흔들린다.
대신 **점선**으로 바꿔 "지금은 눌리지 않는다"를 형태로도 말한다.
★ 대비 `--color-text-muted` 5.56:1 ✓ (활성 `--color-primary` 5.24:1). */
.slim-link--disabled {
color: var(--color-text-muted);
cursor: default;
text-decoration-style: dashed;
}
/* --- 3-11. 푸터 — ★★ 이 블록의 규칙은 **전부 무효다 (v2.21)** ★★ ----------
사용자 직접 지시(2026-08-11): *"하단에 색이 다른 전체 부분을 다 제거."*
→ `