반폭 · 100% 누적 띠(2~3줄)

집단별 구성 차이(연령대별 유입 경로, 매체별 소재 유형, 전후 구성)를 절반 칸에. 띠 2~3줄, 구성 항목 3~4개. 강조색은 말하려는 구성 항목 하나에만(모든 줄의 같은 자리). 12% 미만 칸은 숫자를 비움. 값 바꾸는 법: 띠 한 줄 = li. 각 칸 i 의 style="flex:비율" 숫자와 칸 안 글자를 같은 값으로 교체(한 줄 합계 100). 12 미만 칸은 글자를 비운다. 칸 색은 왼쪽부터 c-a, c-g4, c-g2, c-g1(3개면 c-g2 를 뺀다). 줄 이름은 b, 표본 수는 span. 아래 범례 이름을 칸 순서대로 교체.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Part-to-whole 분류(100% 누적 막대)와 Datawrapper Academy(https://academy.datawrapper.de)의 누적 막대 안내(기준이 되는 항목을 맨 왼쪽에 고정)를 참고. 직접 제작.

<div class="dk dkh dkh-g-stack"><div class="dk-card"><p class="dk-lb">연령대별 전환 유입 경로 구성 · 단위 %</p>
<ul>
<li><p><b>20대</b><span class="num">412건</span></p><div class="bar"><i class="c-a" style="flex:28">28</i><i class="c-g4" style="flex:41">41</i><i class="c-g2" style="flex:22">22</i><i class="c-g1" style="flex:9"></i></div></li>
<li><p><b>30대</b><span class="num">536건</span></p><div class="bar"><i class="c-a" style="flex:38">38</i><i class="c-g4" style="flex:27">27</i><i class="c-g2" style="flex:26">26</i><i class="c-g1" style="flex:9"></i></div></li>
<li><p><b>40대 이상</b><span class="num">292건</span></p><div class="bar"><i class="c-a" style="flex:52">52</i><i class="c-g4" style="flex:16">16</i><i class="c-g2" style="flex:21">21</i><i class="c-g1" style="flex:11"></i></div></li>
</ul>
<p class="lg"><span><i class="c-a"></i>검색</span><span><i class="c-g4"></i>SNS</span><span><i class="c-g2"></i>후기</span><span><i class="c-g1"></i>기타</span></p>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-stack .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-stack .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-stack .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-stack .lg{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--f-cap);color:var(--ink2);margin:8px 0 0}
.dkh-g-stack .lg span{display:flex;align-items:center;gap:6px}
.dkh-g-stack .lg i{display:block;width:10px;height:10px;border-radius:2px}
.dkh-g-stack .lg .c-a{background:var(--ac)}
.dkh-g-stack .lg .c-s{background:var(--soft)}
.dkh-g-stack .lg .c-g1{background:var(--g1)}
.dkh-g-stack .lg .c-g2{background:var(--g2)}
.dkh-g-stack .lg .c-g3{background:var(--g3)}
.dkh-g-stack .lg .c-g4{background:var(--g4)}
.dkh-g-stack ul{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}
.dkh-g-stack li p{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:var(--f-sm)}
.dkh-g-stack li p span{font-size:var(--f-cap);color:var(--mu)}
.dkh-g-stack .bar{display:flex;gap:2px;height:30px}
.dkh-g-stack .bar i{min-width:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--f-cap);font-weight:600;font-variant-numeric:tabular-nums;color:var(--card)}
.dkh-g-stack .bar i:first-child{border-radius:4px 0 0 4px}
.dkh-g-stack .bar i:last-child{border-radius:0 4px 4px 0}
.dkh-g-stack .bar .c-a{background:var(--ac)}
.dkh-g-stack .bar .c-g4{background:var(--g4)}
.dkh-g-stack .bar .c-g2{background:var(--g2);color:var(--ink)}
.dkh-g-stack .bar .c-g1{background:var(--g1);color:var(--ink2)}