반폭 · 매체 배분 소형(비중 막대와 역할)

매체별 예산 비중과 맡는 역할을 한 줄씩 절반 칸에. 매체 4~5행, 매체 이름 5자 이내, 역할 10자 이내. 합계 100%. 비중이 가장 큰 매체만 강조. 지표, 운영 방식까지 적으려면 전폭 D-표-매체배분 사용. 값 바꾸는 법: .r 하나가 한 매체. .k=매체, 막대 i 의 width = 비중 ÷ 가장 큰 비중 × 100(%), .v=비중, 마지막 칸=역할. 가장 큰 매체에 class="hot". 4~5행.

직접 제작. 미디어 믹스 표의 비중 막대 표기 방식 참고. 금액 대신 비중만 표기.

<div class="dk dkh dkh-a-media"><div class="dk-card"><p class="dk-lb">매체별 예산 비중과 역할</p>
<div class="ls"><div class="th"><span>매체</span><span>비중</span><span></span><span>역할</span></div>
<div class="r hot"><span class="k">검색 광고</span><span class="b"><i style="width:100%"></i></span><span class="v">45%</span><span>구매 의도 수요 확보</span></div>
<div class="r"><span class="k">쇼핑 광고</span><span class="b"><i style="width:56%"></i></span><span class="v">25%</span><span>상품 비교 구간 노출</span></div>
<div class="r"><span class="k">영상 광고</span><span class="b"><i style="width:33%"></i></span><span class="v">15%</span><span>신규 인지 형성</span></div>
<div class="r"><span class="k">디스플레이</span><span class="b"><i style="width:22%"></i></span><span class="v">10%</span><span>방문자 재유입</span></div>
<div class="r"><span class="k">예비 예산</span><span class="b"><i style="width:11%"></i></span><span class="v">5%</span><span>성과 상위 매체 증액</span></div>
</div>
<p class="nt">비중은 월 예산 대비 · 예시 값</p></div></div>

.dkh-a-media .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-media .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-media .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-media .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-media .th,.dkh-a-media .r{display:grid;grid-template-columns:72px minmax(56px,1fr) 36px minmax(0,1.5fr);column-gap:10px;align-items:center}
.dkh-a-media .th{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 7px;border-bottom:1px solid var(--line2);line-height:1.4}
.dkh-a-media .r{flex:1;padding:5px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.45;color:var(--ink2)}
.dkh-a-media .th + .r{border-top:0}
.dkh-a-media .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-a-media .b{display:block;height:10px;background:var(--soft);border-radius:5px}
.dkh-a-media .b i{display:block;height:100%;background:var(--g2);border-radius:5px}
.dkh-a-media .v{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dkh-a-media .r.hot .b i{background:var(--ac)}
.dkh-a-media .r.hot .v{color:var(--ac)}