반폭 · 목표 대비 진행률 목록(3~4개)

기간 목표에 대한 지표별 진행 정도를 3~4개 보일 때. 이름 7자 이내, 현재와 목표 값 표기 16자 이내. 강조 1개. 값 바꾸는 법: .r 하나가 한 지표. .h 의 b=이름, span=현재 / 목표, em=진행률. 막대 i 의 width = 진행률(%). 강조 지표 하나에 class="hot". 3~4개.

직접 제작. 대시보드의 목표 대비 진행 막대(progress to target) 방식 참고. 막대 위에 현재와 목표 값을 글자로 같이 적음.

<div class="dk dkh dkh-t-prog"><div class="dk-card"><p class="dk-lb">분기 목표 대비 진행률</p><div class="ls">
<div class="r hot"><div class="h"><b>전환 건수</b><span>2,340 / 3,000건</span><em>78%</em></div><div class="b"><i style="width:78%"></i></div></div>
<div class="r"><div class="h"><b>신규 방문</b><span>6.4만 / 10만 명</span><em>64%</em></div><div class="b"><i style="width:64%"></i></div></div>
<div class="r"><div class="h"><b>재구매 비율</b><span>20% / 22%</span><em>91%</em></div><div class="b"><i style="width:91%"></i></div></div>
<div class="r"><div class="h"><b>후기 등록</b><span>270 / 600건</span><em>45%</em></div><div class="b"><i style="width:45%"></i></div></div>
</div></div></div>

.dkh-t-prog .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-prog .dk-lb{margin:0 0 10px}
.dkh-t-prog .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-prog .r{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:6px 0;border-top:1px solid var(--line)}
.dkh-t-prog .r:first-child{border-top-color:var(--line2)}
.dkh-t-prog .h{display:flex;align-items:baseline;gap:10px;font-size:var(--f-sm);line-height:1.4}
.dkh-t-prog .h b{font-weight:600;white-space:nowrap}
.dkh-t-prog .h span{font-size:var(--f-cap);color:var(--mu);white-space:nowrap;font-variant-numeric:tabular-nums}
.dkh-t-prog .h em{margin-left:auto;font-style:normal;font-size:var(--f-body);font-weight:700;font-variant-numeric:tabular-nums}
.dkh-t-prog .b{height:8px;background:var(--soft);border-radius:4px}
.dkh-t-prog .b i{display:block;height:100%;border-radius:4px;background:var(--g3)}
.dkh-t-prog .r.hot .b i{background:var(--ac)}