계산 표와 산식 한 줄

채널·항목별 계산 결과를 담은 표(3~4행 × 5~6열, 숫자 열 위주) 아래에 그 계산의 산식을 한 줄로 크게 놓는 구성. 월 물량 계산, 목표 역산, 예산 산정 근거에 사용. 행 3~4개, 열 5~6개, 산식 항 3~4개. 값 바꾸는 법: 표의 숫자와 산식 문구 교체. 권장안 열은 그 열의 td 마다 class="n hot". 산식 항은 span, 연산 기호는 i 로 감싸 늘리거나 줄임(항 3~4개). 예시 수치는 30일 새 자리 × 점유 목표 ÷ 진입률로 계산한 값.

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 표 아래 산식을 한 줄로 크게 두는 구성은 증권사 리포트의 밸류에이션 산식 표기 참고.

<div class="dk dk-calc">
<div class="dk-card"><table>
<colgroup><col style="width:150px"><col><col><col><col><col></colgroup>
<thead><tr><th>채널</th><th class="n">30일 새 자리</th><th class="n">진입률</th><th class="n">목표 낮음(점유 20%)</th><th class="n">목표 중간(30%)</th><th class="n">목표 높음(40%)</th></tr></thead>
<tbody>
<tr><td class="k">블로그</td><td class="n">40자리</td><td class="n">40%</td><td class="n">20건</td><td class="n hot">30건</td><td class="n">40건</td></tr>
<tr><td class="k">카페</td><td class="n">30자리</td><td class="n">50%</td><td class="n">12건</td><td class="n hot">18건</td><td class="n">24건</td></tr>
<tr><td class="k">지식iN</td><td class="n">새 질문 수</td><td class="n">질문마다 답변</td><td class="n">새 질문 전부</td><td class="n hot">새 질문 전부</td><td class="n">새 질문 전부</td></tr>
<tr><td class="k">숏폼</td><td class="n">12자리</td><td class="n">월 고정</td><td class="n">고정 편수</td><td class="n hot">고정 편수</td><td class="n">고정 편수</td></tr>
</tbody></table></div>
<div class="fx"><span class="lb">산식</span><b>월 집행 물량</b><i>=</i><span>30일 새 자리</span><i>×</i><span>점유 목표</span><i>÷</i><span>진입률</span></div>
</div>

.dk-calc{display:flex;flex-direction:column;gap:18px}
.dk-calc table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-calc 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-calc 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-calc tbody tr:last-child td{border-bottom:0}
.dk-calc td.k{font-weight:700;color:var(--ink)}
.dk-calc td.v{font-weight:500;color:var(--ink)}
.dk-calc td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-calc tr.hot td{background:var(--acw)}
.dk-calc tr.hot td.k{color:var(--ac)}
.dk-calc .dk-card{padding:20px 24px 12px}
.dk-calc .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-calc th{white-space:normal}
.dk-calc td.hot{background:var(--acw);color:var(--ac);font-weight:700}
.dk-calc .fx{display:flex;align-items:center;gap:16px;padding:18px 28px;border:1px solid var(--line2);border-radius:var(--r);font-size:var(--f-xl);font-weight:600;color:var(--ink);line-height:1.3}
.dk-calc .fx .lb{font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-right:8px}
.dk-calc .fx b{font-weight:700}
.dk-calc .fx i{font-style:normal;font-weight:400;color:var(--g3)}