경쟁사 비교표(채움 원 5단계)

경쟁사 4~5곳을 평가 항목 4~5개로 정성 비교. 채움 원으로 수준 표시, 당사 행만 강조. 행 4~5개, 평가 열 4~5개. 값 바꾸는 법: 채움 원은 5종 SVG(없음, 4분의 1, 절반, 4분의 3, 전부) 중 골라 넣음. 종합 점수는 채움 단계 합(칸당 0~4). 강조 행은 tr class="hot".

Deckary "Harvey Balls in PowerPoint" https://deckary.com/blog/harvey-balls-powerpoint (정성 평가를 채움 정도로 바꿔 열 단위로 훑게 하는 방식) / SlideModel Harvey Balls https://slidemodel.com/tools/harvey-balls/ (5단계 채움 범례). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-hbt"><div class="dk-card"><table>
<thead><tr><th>구분</th><th>유형</th><th class="c">검색 운영</th><th class="c">콘텐츠 제작</th><th class="c">전환 측정</th><th class="c">보고 주기</th><th class="c">전담 인력</th><th class="n">종합</th></tr></thead>
<tbody>
<tr class="hot"><td class="k">당사 제안</td><td class="t">검색과 콘텐츠 통합</td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="n s">19<small>/20</small></td></tr>
<tr><td class="k">A사</td><td class="t">종합 대행</td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 0 1 0 18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 0 1 0 18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 0 1 0 18z"/></svg></td><td class="n s">13<small>/20</small></td></tr>
<tr><td class="k">B사</td><td class="t">검색 전문</td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="n s">12<small>/20</small></td></tr>
<tr><td class="k">C사</td><td class="t">콘텐츠 제작</td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 0 1 0 18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg></td><td class="n s">11<small>/20</small></td></tr>
<tr><td class="k">D사</td><td class="t">매체 판매</td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 0 1 0 18z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="c"><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg></td><td class="n s">8<small>/20</small></td></tr>
</tbody></table></div>
<p class="lg"><span><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/></svg>없음</span><span><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 0 1 9 9z"/></svg>일부</span><span><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 0 1 0 18z"/></svg>보통</span><span><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 11V2a9 9 0 1 1-9 9z"/></svg>우수</span><span><svg class="hb" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9"/><path d="M11 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z"/></svg>매우 우수</span><em>공개 자료와 제안 요청 답변 기준 평가</em></p></div>

.dk-hbt table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-hbt 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-hbt td{font-size:var(--f-body);color:var(--ink2);padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-hbt tbody tr:last-child td{border-bottom:0}
.dk-hbt .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-hbt .c{text-align:center}
.dk-hbt td.k{font-weight:600;color:var(--ink)}
.dk-hbt .dk-card{padding:20px 24px 12px}
.dk-hbt svg{vertical-align:middle}
.dk-hbt svg.hb circle{fill:var(--card);stroke:var(--g3);stroke-width:1.5}
.dk-hbt svg.hb path{fill:var(--g4)}
.dk-hbt td.t{font-size:var(--f-sm);color:var(--mu)}
.dk-hbt td.s{font-size:var(--f-lg);font-weight:700;color:var(--ink)}
.dk-hbt td.s small{font-size:var(--f-cap);font-weight:500;color:var(--mu)}
.dk-hbt tr.hot td{background:var(--acw)}
.dk-hbt tr.hot td.k,.dk-hbt tr.hot td.s{color:var(--ac)}
.dk-hbt tr.hot svg.hb circle{stroke:var(--ac)}
.dk-hbt tr.hot svg.hb path{fill:var(--ac)}
.dk-hbt .lg{display:flex;align-items:center;gap:20px;margin:14px 0 0;padding:0 24px;font-size:var(--f-cap);color:var(--mu)}
.dk-hbt .lg span{display:inline-flex;align-items:center;gap:6px}
.dk-hbt .lg svg{width:16px;height:16px}
.dk-hbt .lg em{font-style:normal;margin-left:auto}