수치 일람 표(숫자 열 + 끝 열 평가)

집단·안·채널별 수치를 나란히 놓는 일반 데이터 표. 숫자 열은 오른쪽 정렬, 끝 열에 평가 칩 3단. 코호트 비교, 시나리오별 가정값, 채널 대조표에 사용. 행 3~8개, 숫자 열 3~5개 + 평가 열 1개. 가장 나쁜(또는 주목할) 평가 1종만 강조색. 값 바꾸는 법: 행(3~8개)과 숫자 교체. 8행이면 td padding 13px 를 8px 로. 평가 칩은 span 의 class: hi / mid / lo(강조색, 그 행 tr 에 class="hot"도 함께). 금액은 지수·비율로 표기. 아래 주석 줄에 지수 기준과 가정 여부를 적음.

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 숫자 오른쪽 정렬과 자릿수 맞춤(tabular figures)은 IR 자료의 재무 요약표 관행.

<div class="dk dk-nlist"><div class="dk-card"><table>
<colgroup><col style="width:210px"><col><col><col><col><col style="width:150px"></colgroup>
<thead><tr><th>코호트</th><th class="n">가입 고객 수(지수)</th><th class="n">3개월차 재구매율</th><th class="n">평균 구매 단가(지수)</th><th class="n">마진 기준 고객 가치(지수)</th><th class="c">평가</th></tr></thead>
<tbody>
<tr><td class="k">1월 가입</td><td class="n num">100</td><td class="n num">24%</td><td class="n num">100</td><td class="n num">100</td><td class="c"><span class="mid">평균</span></td></tr>
<tr><td class="k">2월 가입</td><td class="n num">118</td><td class="n num">31%</td><td class="n num">104</td><td class="n num">128</td><td class="c"><span class="hi">우수</span></td></tr>
<tr class="hot"><td class="k">3월 가입</td><td class="n num">142</td><td class="n num">17%</td><td class="n num">92</td><td class="n num">71</td><td class="c"><span class="lo">부진</span></td></tr>
<tr><td class="k">4월 가입</td><td class="n num">109</td><td class="n num">25%</td><td class="n num">101</td><td class="n num">103</td><td class="c"><span class="mid">평균</span></td></tr>
<tr><td class="k">5월 가입</td><td class="n num">96</td><td class="n num">26%</td><td class="n num">99</td><td class="n num">105</td><td class="c"><span class="mid">평균</span></td></tr>
</tbody></table></div>
<p class="nt">1월 가입 집단을 100으로 둔 지수. 재구매율은 전 코호트 같은 개월차 기준. 예시는 가정값</p></div>

.dk-nlist{display:flex;flex-direction:column;gap:12px}
.dk-nlist table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-nlist th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-nlist td{font-size:var(--f-body);color:var(--ink2);padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-nlist tbody tr:last-child td{border-bottom:0}
.dk-nlist td.k{font-weight:700;color:var(--ink)}
.dk-nlist td.v{font-weight:500;color:var(--ink)}
.dk-nlist td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-nlist tr.hot td{background:var(--acw)}
.dk-nlist tr.hot td.k{color:var(--ac)}
.dk-nlist .dk-card{padding:20px 24px 12px}
.dk-nlist th{white-space:normal}
.dk-nlist .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-nlist .c{text-align:center}
.dk-nlist td.n{font-size:var(--f-md);font-weight:500;color:var(--ink)}
.dk-nlist td span{display:inline-block;min-width:72px;font-size:var(--f-sm);font-weight:600;line-height:28px;border-radius:var(--r-sm)}
.dk-nlist .hi{background:var(--g1);color:var(--ink)}
.dk-nlist .mid{background:var(--soft);color:var(--mu)}
.dk-nlist .lo{background:var(--ac);color:var(--card)}
.dk-nlist .nt{margin:0;font-size:var(--f-cap);color:var(--mu)}