항목별 산식 표(금액 빈칸)

견적 항목마다 수량이 어떻게 나왔는지 산식과 근거를 밝히는 표. 단가와 소계는 빈칸. 항목 4~6개와 합계 행. 값 바꾸는 법: 산식은 span.f 안에 "기준 × 기간" 꼴로, 수량과 단위(small) 교체. 단가·소계·합계의 span.blank는 비워 둠(금액은 견적서). 합계 행 위 진한 선은 자동.

견적서와 증권사 리포트 추정 표의 구성(산식, 수량, 합계 위 진한 선). Chapman University Data Literacy "Good Tables" https://libguides.chapman.edu/data_literacy/good_tables (세로선 제거, 머리줄 아래 선 하나, 숫자 오른쪽 정렬). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-calc2"><div class="dk-card"><table>
<colgroup><col style="width:180px"><col><col style="width:110px"><col style="width:230px"><col style="width:120px"><col style="width:130px"></colgroup>
<thead><tr><th>항목</th><th>수량 산식</th><th class="n">수량</th><th>근거</th><th class="n">단가</th><th class="n">소계</th></tr></thead>
<tbody>
<tr><td class="k">검색 광고 운영</td><td><span class="f num">매체 2종 × 3개월</span></td><td class="n q">6<small>개월</small></td><td class="m">계정 2개 상시 운영</td><td class="n"><span class="blank"></span></td><td class="n"><span class="blank"></span></td></tr>
<tr><td class="k">블로그 콘텐츠</td><td><span class="f num">월 8건 × 3개월</span></td><td class="n q">24<small>건</small></td><td class="m">핵심 키워드 30개 중 24개 대응</td><td class="n"><span class="blank"></span></td><td class="n"><span class="blank"></span></td></tr>
<tr><td class="k">숏폼 영상</td><td><span class="f num">월 4편 × 2개월</span></td><td class="n q">8<small>편</small></td><td class="m">2개월 차부터 발행</td><td class="n"><span class="blank"></span></td><td class="n"><span class="blank"></span></td></tr>
<tr><td class="k">검색 소재</td><td><span class="f num">키워드 묶음 10개 × 4종</span></td><td class="n q">40<small>종</small></td><td class="m">묶음당 문구 4종 시험</td><td class="n"><span class="blank"></span></td><td class="n"><span class="blank"></span></td></tr>
<tr><td class="k">성과 보고</td><td><span class="f num">주간 12회 + 월간 3회</span></td><td class="n q">15<small>회</small></td><td class="m">종료 보고는 월간에 포함</td><td class="n"><span class="blank"></span></td><td class="n"><span class="blank"></span></td></tr>
</tbody>
<tfoot><tr><td class="k" colspan="4">합계<small>부가세 별도, 금액은 견적서에 기재</small></td><td></td><td class="n"><span class="blank tot"></span></td></tr></tfoot>
</table></div></div>

.dk-calc2 table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-calc2 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-calc2 td{font-size:var(--f-body);color:var(--ink2);padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-calc2 tbody tr:last-child td{border-bottom:0}
.dk-calc2 .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-calc2 .c{text-align:center}
.dk-calc2 td.k{font-weight:600;color:var(--ink)}
.dk-calc2 .dk-card{padding:20px 24px 12px}
.dk-calc2 td .f{display:inline-block;background:var(--soft);border-radius:var(--r-sm);padding:4px 10px;font-size:var(--f-sm);color:var(--ink);font-weight:500}
.dk-calc2 td.q{font-size:var(--f-md);font-weight:700;color:var(--ink);white-space:nowrap}
.dk-calc2 td.q small{font-size:var(--f-cap);font-weight:500;color:var(--mu);margin-left:3px}
.dk-calc2 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-calc2 .blank{display:inline-block;width:92px;height:28px;border-bottom:1px solid var(--line2);vertical-align:middle}
.dk-calc2 tbody tr:last-child td{border-bottom:1px solid var(--ink)}
.dk-calc2 tfoot td{border-bottom:0;padding-top:12px;padding-bottom:10px}
.dk-calc2 tfoot td.k small{font-size:var(--f-cap);font-weight:500;color:var(--mu);margin-left:10px}
.dk-calc2 .blank.tot{border-bottom:2px solid var(--ac)}