반폭 · 경쟁사 운영 여부 비교(3사 × 4항목)

자사와 경쟁 2곳이 매체나 활동을 운영하는지 여부를 표시로 견줄 때. 3사 고정, 항목 3~4행. 항목 이름 9자 이내, 보조 한 줄 12자 이내. 경쟁사는 「경쟁 A」처럼 익명 표기. 값 바꾸는 법: .r 하나가 한 활동. .k=활동 이름, em=보조 한 줄. 뒤 span 3개가 자사, 경쟁 A, 경쟁 B 순서. 표시 i 의 class: on=운영, half=일부 운영, off=미운영. 3~4행.

직접 제작. 컨설팅 보고서의 기능 비교표(운영 여부를 채운 원, 반 원, 줄로 표시)를 참고. 자사 열만 옅은 강조 바탕.

<div class="dk dkh dkh-a-cmp3"><div class="dk-card"><p class="dk-lb">주요 활동 운영 여부 · 자사와 경쟁 2사</p>
<div class="ls"><div class="th"><span>활동</span><span class="me">자사</span><span>경쟁 A</span><span>경쟁 B</span></div>
<div class="r"><span class="k">브랜드 검색 광고<em>검색 결과 최상단</em></span><span class="me"><i class="m on"></i></span><span><i class="m on"></i></span><span><i class="m on"></i></span></div>
<div class="r"><span class="k">쇼핑 검색 광고<em>상품 비교 구간</em></span><span class="me"><i class="m half"></i></span><span><i class="m on"></i></span><span><i class="m on"></i></span></div>
<div class="r"><span class="k">숏폼 영상 소재<em>월 4편 이상 게시</em></span><span class="me"><i class="m off"></i></span><span><i class="m on"></i></span><span><i class="m half"></i></span></div>
<div class="r"><span class="k">후기 콘텐츠<em>최근 3개월 발행</em></span><span class="me"><i class="m off"></i></span><span><i class="m half"></i></span><span><i class="m on"></i></span></div>
</div>
<div class="lg"><span><i class="m on"></i>운영</span><span><i class="m half"></i>일부 운영</span><span><i class="m off"></i>미운영</span></div>
</div></div>

.dkh-a-cmp3 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-cmp3 .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-cmp3 .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-cmp3 .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-cmp3 .th,.dkh-a-cmp3 .r{display:grid;grid-template-columns:1fr 62px 62px 62px;align-items:stretch}
.dkh-a-cmp3 .th{flex:none;font-size:var(--f-cap);color:var(--mu);border-bottom:1px solid var(--line2);line-height:1.4}
.dkh-a-cmp3 .th span{padding:5px 0 6px}
.dkh-a-cmp3 .th span + span{text-align:center}
.dkh-a-cmp3 .th .me{color:var(--ac2);font-weight:600;border-radius:6px 6px 0 0}
.dkh-a-cmp3 .r{flex:1;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.3}
.dkh-a-cmp3 .th + .r{border-top:0}
.dkh-a-cmp3 .r > span{display:flex;align-items:center;justify-content:center;padding:3px 0}
.dkh-a-cmp3 .r > .k{display:block;align-self:center;font-weight:600;color:var(--ink);padding-right:10px}
.dkh-a-cmp3 .k em{display:block;font-style:normal;font-weight:400;font-size:var(--f-cap);color:var(--mu)}
.dkh-a-cmp3 .me{background:var(--acw)}
.dkh-a-cmp3 .r:last-child .me{border-radius:0 0 6px 6px}
.dkh-a-cmp3 .m{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--g4);background:var(--g4)}
.dkh-a-cmp3 .m.half{background:linear-gradient(90deg,var(--g4) 50%,transparent 50%)}
.dkh-a-cmp3 .m.off{width:12px;height:2px;border:0;border-radius:1px;background:var(--g2)}
.dkh-a-cmp3 .lg{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;font-size:var(--f-cap);color:var(--ink2);line-height:1.4}
.dkh-a-cmp3 .lg span{display:flex;align-items:center;gap:6px}