App Workspace
빌링 · 잔액
실제 빌링·잔액 화면의 .bil-* · .side-balance · .lim 컴포넌트를 그대로 재현했습니다 — 잔액 위젯 · 빌링 레이아웃 · 인보이스 표 · 결제 수단. 표시 데이터는 전부 샘플입니다.
잔액 위젯
사이드바 하단 .side-balance — coin 아이콘 · 잔액 · 진행바 · 충전 링크. surface-2 카드, 그린 코인.
.side-balance · .sbal-ic(green coin) · .sbal-amt(800·tabular-nums) · .sbal-bar > i
빌링 레이아웃 · 잔액
.bil-wrap 208px 서브내비 + 본문. 큰 잔액 .bil-amt(42px/800), .bil-2 2-up 카드 · 플랜 + 사용량 미터.
현재 플랜 — Pro
활성.bil-wrap(208px+1fr) · .bil-2 · .bil-amt(42px) · .lim/.limbar(사용량 미터)
인보이스 · 거래 표
.bil-rows — 날짜 · 항목 · 금액 · 상태 뱃지. 금액은 tabular-nums, 충전(+green) / 사용(−danger) 구분.
거래 내역
INV-2026| 날짜 | 항목 | 금액 | 상태 |
|---|---|---|---|
| 2026-06-15 | 잔액 충전 · INV-1042 | +$128.00 | 충전 |
| 2026-06-09 | 보도자료 배포 · Golden Hour | −$24.00 | 사용 |
| 2026-06-02 | Pro 플랜 · 월 구독 | −$29.00 | 구독 |
| 2026-05-28 | 프로모 코드 · WELCOME10 | +$10.00 | 프로모 |
| 2026-05-21 | 잔액 충전 · INV-1009 | +$250.00 | 충전 대기 |
.bil-rows th(uppercase muted) · td(금액 tabular-nums · +green/−danger) · 상태 뱃지
결제 수단
.bil-cards / .cc — 저장된 카드 칩. 브랜드 · 끝 4자리 · 만료. 번호는 마스킹.
저장된 결제 수단
보안 저장.bil-cards · .cc(브랜드 칩) · 카드 번호 마스킹(•••• + 끝 4자리)
사용 규칙
- · 금액은 monospace ·
tabular-nums로 자릿수 정렬 - · 상태 뱃지는 동일 색 규칙(충전/구독=green · 대기=muted)으로 일관
- · 강조 잔액은 화면당 하나 —
.bil-amt42px - · 결제 정보는 마스킹(
•••• 끝4자리) + lock 표기
- · 실거래·실금액·전체 카드번호 노출
- · 이모지 — 상태/금액은 색·뱃지·
icon()로만 - · 밝은 배경 위 빌링 컴포넌트 배치
- · 강조 잔액 여러 개 — 위계 무너짐
source: app/addon.php·account.php · .bil-*/.side-balance — 샘플 데이터