패키지 3종 구성표(금액 빈칸)

운영 패키지 3종의 구성을 항목별로 비교하고 가운데 안을 권장. 금액 칸은 빈칸으로 두고 견적서에서 채움. 구성 행 4~6개, 패키지 3개 고정. 값 바꾸는 법: 패키지 이름(b), 한 줄 설명(span), 구성 행 문구 교체. 금액은 제안서에 적지 않고 span.blank 그대로 둠. 권장 열을 바꾸려면 class="hot"과 권장 칩을 옮김.

Moda Pricing Slides https://moda.app/templates/slides/pricing (3단 구성에서 가운데 추천안만 테두리와 배지로 강조) / PresentationGO 비교표 템플릿 https://www.presentationgo.com/?p=1988 (열 머리를 크게, 행은 기능 단위). 요금표의 3단 구성과 가운데 권장안 강조 방식을 참고하되 금액 대신 빈칸 처리. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-pkg"><div class="dk-card"><table>
<colgroup><col style="width:160px"><col><col><col></colgroup>
<thead><tr><th>구성</th>
<th><b>기본형</b><span>검색 유지 관리</span></th>
<th class="hot"><b>표준형</b><span>검색과 콘텐츠 병행</span><i class="chip hot">권장</i></th>
<th><b>확장형</b><span>영상 포함 전 영역</span></th></tr></thead>
<tbody>
<tr><td class="k">운영 매체</td><td>검색 광고 1종</td><td class="hot">검색 2종, 블로그</td><td>검색 2종, 블로그, 숏폼</td></tr>
<tr><td class="k">월 콘텐츠</td><td>0건</td><td class="hot">8건</td><td>16건</td></tr>
<tr><td class="k">소재 교체</td><td>월 1회</td><td class="hot">2주 1회</td><td>매주</td></tr>
<tr><td class="k">성과 보고</td><td>월간</td><td class="hot">주간과 월간</td><td>주간, 월간, 실시간 화면</td></tr>
<tr><td class="k">전담 인력</td><td>1명</td><td class="hot">2명</td><td>3명</td></tr>
</tbody>
<tfoot><tr><td class="k">월 운영비</td><td><span class="blank">견적서 기재</span></td><td class="hot"><span class="blank">견적서 기재</span></td><td><span class="blank">견적서 기재</span></td></tr></tfoot>
</table></div></div>

.dk-pkg table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-pkg 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-pkg 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-pkg tbody tr:last-child td{border-bottom:0}
.dk-pkg .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-pkg .c{text-align:center}
.dk-pkg td.k{font-weight:600;color:var(--ink)}
.dk-pkg .dk-card{padding:20px 24px 12px}
.dk-pkg .chip{display:inline-block;font-size:var(--f-cap);font-weight:600;line-height:1.5;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.dk-pkg .chip.hot{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-pkg .dk-card{padding:14px 24px 14px}
.dk-pkg thead th{padding:12px 16px 10px;vertical-align:top;white-space:normal}
.dk-pkg thead th:first-child{vertical-align:bottom}
.dk-pkg thead th b{display:block;font-size:var(--f-xl);font-weight:700;color:var(--ink);line-height:1.2}
.dk-pkg thead th span{font-size:var(--f-sm);font-weight:500;color:var(--mu)}
.dk-pkg td{padding-left:16px;padding-right:16px}
.dk-pkg th.hot{background:var(--acw);border-top:3px solid var(--ac);border-radius:var(--r-sm) var(--r-sm) 0 0;position:relative}
.dk-pkg th.hot b{color:var(--ac)}
.dk-pkg th.hot .chip{position:absolute;right:14px;top:12px;font-style:normal}
.dk-pkg td.hot{background:var(--acw);color:var(--ink);font-weight:600}
.dk-pkg tbody tr:last-child td{border-bottom:1px solid var(--line2)}
.dk-pkg tfoot td{border-bottom:0;padding-top:12px;padding-bottom:12px}
.dk-pkg .blank{display:block;height:34px;line-height:32px;border:1px dashed var(--line2);border-radius:var(--r-sm);background:var(--card);font-size:var(--f-cap);font-weight:500;color:var(--mu);text-align:center}