반폭 · 수평 막대 순위(4~6행)

항목별 크기 비교(채널별 기여, 키워드별 유입, 소재별 반응)를 절반 칸에. 행 4~6개, 큰 순서로 정렬, 맨 위 또는 말하려는 한 행만 강조색. 항목 이름 7자 이내. 값 바꾸는 법: 행마다 두 번째 rect(class="b")의 width = 값 ÷ 최댓값 × 100(막대 칸 전체가 100). 값은 오른쪽 b 에도 적는다. 강조 행 하나에 li class="hot". 행은 4~6개, 칸 높이에 맞춰 행 간격이 늘어난다.

Datawrapper Academy(https://academy.datawrapper.de)의 막대 그래프 안내(큰 순서 정렬, 축 대신 값 직접 표기)와 Storytelling with Data(https://www.storytellingwithdata.com)의 한 막대만 강조하는 방식을 참고. 직접 제작.

<div class="dk dkh dkh-g-hbar"><div class="dk-card"><p class="dk-lb">채널별 구매 기여 지수 · 최고 채널 100 기준</p>
<ul>
<li class="hot"><span class="k">후기 블로그</span><svg width="100%" height="14" viewBox="0 0 100 14" preserveAspectRatio="none"><rect width="100" height="14" class="bg"/><rect width="86" height="14" class="b"/></svg><b class="num">86</b></li>
<li><span class="k">검색 광고</span><svg width="100%" height="14" viewBox="0 0 100 14" preserveAspectRatio="none"><rect width="100" height="14" class="bg"/><rect width="71" height="14" class="b"/></svg><b class="num">71</b></li>
<li><span class="k">인스타그램</span><svg width="100%" height="14" viewBox="0 0 100 14" preserveAspectRatio="none"><rect width="100" height="14" class="bg"/><rect width="58" height="14" class="b"/></svg><b class="num">58</b></li>
<li><span class="k">유튜브 쇼츠</span><svg width="100%" height="14" viewBox="0 0 100 14" preserveAspectRatio="none"><rect width="100" height="14" class="bg"/><rect width="44" height="14" class="b"/></svg><b class="num">44</b></li>
<li><span class="k">카페 게시글</span><svg width="100%" height="14" viewBox="0 0 100 14" preserveAspectRatio="none"><rect width="100" height="14" class="bg"/><rect width="29" height="14" class="b"/></svg><b class="num">29</b></li>
</ul>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-hbar .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-hbar .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-hbar .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-hbar ul{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}
.dkh-g-hbar li{display:grid;grid-template-columns:92px minmax(0,1fr) 34px;align-items:center;gap:12px;font-size:var(--f-sm);color:var(--ink2)}
.dkh-g-hbar li svg{display:block}
.dkh-g-hbar li .bg{fill:var(--soft)}
.dkh-g-hbar li .b{fill:var(--g3)}
.dkh-g-hbar li b{text-align:right;font-size:var(--f-body);font-weight:700}
.dkh-g-hbar li.hot .k{color:var(--ink);font-weight:600}
.dkh-g-hbar li.hot .b{fill:var(--ac)}
.dkh-g-hbar li.hot b{color:var(--ac)}