반폭 · 목표 대비 불릿(3~5행)

여러 지표의 실적을 목표와 한 줄씩 견줄 때 절반 칸에. 행 3~5개. 가는 막대 = 실적, 세로 눈금 = 목표, 옅은 띠 = 지난 분기 수준. 목표를 넘은 행 또는 말하려는 한 행만 강조색. 지표 이름 6자 이내. 값 바꾸는 법: 막대 칸 전체가 100 단위 = 축 최댓값 120. 행마다 rect.bd(지난 분기 수준 띠) width = 수준 ÷ 120 × 100, rect.b(실적) width = 실적 ÷ 120 × 100, rect.tg(목표 눈금) x = 목표 ÷ 120 × 100 − 0.4. 오른쪽 글자 "실적 / 목표" 교체. 강조 행 하나에 li class="hot".

Stephen Few 의 bullet graph 규격(실적 막대, 목표 눈금, 구간 띠)과 Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Magnitude 분류(bullet)를 참고. 직접 제작.

<div class="dk dkh dkh-g-bullet"><div class="dk-card"><p class="dk-lb">주요 지표 목표 대비 실적 · 목표 100 지수</p>
<ul>
<li class="hot"><span class="k">전환 건수</span><svg width="100%" height="18" viewBox="0 0 100 18" preserveAspectRatio="none"><rect width="100" height="18" class="bg"/><rect width="66.7" height="18" class="bd"/><rect y="6" width="86.7" height="6" class="b"/><rect x="82.9" width="0.8" height="18" class="tg"/></svg><span class="n num"><b>104</b> / 100</span></li>
<li><span class="k">클릭률</span><svg width="100%" height="18" viewBox="0 0 100 18" preserveAspectRatio="none"><rect width="100" height="18" class="bg"/><rect width="58.3" height="18" class="bd"/><rect y="6" width="68.3" height="6" class="b"/><rect x="74.6" width="0.8" height="18" class="tg"/></svg><span class="n num"><b>82</b> / 90</span></li>
<li><span class="k">도달 범위</span><svg width="100%" height="18" viewBox="0 0 100 18" preserveAspectRatio="none"><rect width="100" height="18" class="bg"/><rect width="54.2" height="18" class="bd"/><rect y="6" width="63.3" height="6" class="b"/><rect x="70.4" width="0.8" height="18" class="tg"/></svg><span class="n num"><b>76</b> / 85</span></li>
<li><span class="k">재방문율</span><svg width="100%" height="18" viewBox="0 0 100 18" preserveAspectRatio="none"><rect width="100" height="18" class="bg"/><rect width="62.5" height="18" class="bd"/><rect y="6" width="75.8" height="6" class="b"/><rect x="78.8" width="0.8" height="18" class="tg"/></svg><span class="n num"><b>91</b> / 95</span></li>
</ul>
<p class="lg"><span><i class="c-g4 thin"></i>실적</span><span><i class="c-ink tick"></i>목표</span><span><i class="c-g1"></i>지난 분기 수준</span><span class="r">실적 / 목표</span></p>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-bullet .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-bullet .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-bullet .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-bullet .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-bullet .lg span{display:flex;align-items:center;gap:6px}
.dkh-g-bullet .lg i{display:block;width:10px;height:10px;border-radius:2px}
.dkh-g-bullet .lg .c-a{background:var(--ac)}
.dkh-g-bullet .lg .c-s{background:var(--soft)}
.dkh-g-bullet .lg .c-g1{background:var(--g1)}
.dkh-g-bullet .lg .c-g2{background:var(--g2)}
.dkh-g-bullet .lg .c-g3{background:var(--g3)}
.dkh-g-bullet .lg .c-g4{background:var(--g4)}
.dkh-g-bullet ul{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around}
.dkh-g-bullet li{display:grid;grid-template-columns:72px minmax(0,1fr) 78px;align-items:center;gap:12px;font-size:var(--f-sm);color:var(--ink2)}
.dkh-g-bullet li svg{display:block}
.dkh-g-bullet li .bg{fill:var(--soft)}
.dkh-g-bullet li .bd{fill:var(--g1)}
.dkh-g-bullet li .b{fill:var(--g4)}
.dkh-g-bullet li .tg{fill:var(--ink)}
.dkh-g-bullet li .n{text-align:right;color:var(--mu);white-space:nowrap}
.dkh-g-bullet li .n b{font-size:var(--f-body);font-weight:700}
.dkh-g-bullet li.hot .k{color:var(--ink);font-weight:600}
.dkh-g-bullet li.hot .b{fill:var(--ac)}
.dkh-g-bullet li.hot .n b{color:var(--ac)}
.dkh-g-bullet .lg .thin{height:4px;width:14px}
.dkh-g-bullet .lg .tick{width:2px;height:12px;border-radius:0}
.dkh-g-bullet .lg .c-ink{background:var(--ink)}
.dkh-g-bullet .lg .r{margin-left:auto;color:var(--mu)}