3안 비교표(가운데 추천)

운영안 3개를 같은 기준으로 비교하고 가운데 안을 추천안으로 제시. 기준 행 4~5개, 안은 3개 고정. 값 바꾸는 법: 열 머리의 안 이름(b)과 한 줄 설명(span), 각 행 문구 교체. 추천 열을 바꾸려면 class="hot"과 추천 칩을 해당 열로 옮김.

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

<div class="dk dk-cmp3"><div class="dk-card"><table>
<colgroup><col style="width:170px"><col><col><col></colgroup>
<thead><tr><th>비교 기준</th>
<th><b>A안</b><span>검색 집중</span></th>
<th class="hot"><b>B안</b><span>검색과 콘텐츠 병행</span><i class="chip hot">추천</i></th>
<th><b>C안</b><span>전 매체 확장</span></th></tr></thead>
<tbody>
<tr><td class="k">매체 구성</td><td>검색 광고 2종</td><td class="hot">검색 2종, 블로그, 숏폼</td><td>검색, 콘텐츠, 디스플레이, 영상</td></tr>
<tr><td class="k">월 콘텐츠</td><td>0건</td><td class="hot">24건</td><td>48건</td></tr>
<tr><td class="k">예상 도달 지수</td><td>100</td><td class="hot">165</td><td>210</td></tr>
<tr><td class="k">전환 측정</td><td>클릭 기준</td><td class="hot">상담 신청 기준</td><td>상담 신청과 재방문 기준</td></tr>
<tr><td class="k">맞는 상황</td><td>단기 문의 확보</td><td class="hot">문의와 검색 자산 동시 확보</td><td>신규 브랜드 인지 확대</td></tr>
</tbody></table></div></div>

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