반폭 · 현재와 목표 게이지 2개

지표 2개의 목표 대비 달성률을 반원 게이지로 나란히 보일 때. 게이지 2개 고정. 지표 이름 7자 이내, 현재 값과 목표 값 각 7자 이내. 말하려는 게이지 1개만 강조. 지표가 하나면 D-반폭-반원게이지 사용. 값 바꾸는 법: .c 하나가 게이지 하나. 호(path.fg)의 stroke-dasharray 첫 값 = 257.6 × 달성률 ÷ 100(반지름 82 반원의 길이 257.6). SVG 안 text=달성률. .kv 3개=현재 값, 목표 값, 남은 차이. 말하려는 게이지에 class="hot".

직접 제작. 대시보드의 반원 게이지 구성 참고. 호와 달성률은 인라인 SVG(칸 높이에 맞춰 비율대로 축소), 값 표는 HTML.

<div class="dk dkh dkh-a-gauge2"><div class="dk-card"><p class="dk-lb">목표 대비 달성률 · 지표 2개</p>
<div class="two">
<div class="c hot"><div class="k">전환율</div><div class="gg"><svg viewBox="0 0 200 108" width="100%" preserveAspectRatio="xMidYMid meet" role="img"><path d="M18 100A82 82 0 0 1 182 100"/><path d="M18 100A82 82 0 0 1 182 100" class="fg" stroke-dasharray="224.1 999"/><text x="100" y="98" text-anchor="middle">87<tspan dx="2">%</tspan></text></svg></div><div class="kv"><span>현재</span><b>2.6%</b></div><div class="kv"><span>목표</span><b>3.0%</b></div><div class="kv"><span>남은 차이</span><b>0.4%p</b></div></div>
<div class="c"><div class="k">월 전환 건수</div><div class="gg"><svg viewBox="0 0 200 108" width="100%" preserveAspectRatio="xMidYMid meet" role="img"><path d="M18 100A82 82 0 0 1 182 100"/><path d="M18 100A82 82 0 0 1 182 100" class="fg" stroke-dasharray="164.9 999"/><text x="100" y="98" text-anchor="middle">64<tspan dx="2">%</tspan></text></svg></div><div class="kv"><span>현재</span><b>960건</b></div><div class="kv"><span>목표</span><b>1,500건</b></div><div class="kv"><span>남은 차이</span><b>540건</b></div></div>
</div>
<p class="nt">달성률 = 현재 ÷ 목표 · 예시 값</p></div></div>

.dkh-a-gauge2 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-gauge2 .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-gauge2 .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-gauge2 .two{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:stretch}
.dkh-a-gauge2 .c{display:flex;flex-direction:column;min-width:0;min-height:0}
.dkh-a-gauge2 .k{flex:none;font-size:var(--f-sm);font-weight:700;text-align:center;line-height:1.4}
.dkh-a-gauge2 .gg{flex:1;min-height:62px;position:relative;margin:4px 0 8px}
.dkh-a-gauge2 .gg svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-a-gauge2 .gg path{fill:none;stroke-width:18;stroke:var(--soft)}
.dkh-a-gauge2 .gg path.fg{stroke:var(--g4)}
.dkh-a-gauge2 .c.hot .gg path.fg{stroke:var(--ac)}
.dkh-a-gauge2 .gg text{font-family:inherit;font-size:36px;font-weight:700;letter-spacing:-1px;fill:var(--ink);font-variant-numeric:tabular-nums}
.dkh-a-gauge2 .gg tspan{font-size:19px;font-weight:600;letter-spacing:0}
.dkh-a-gauge2 .c.hot .gg text{fill:var(--ac)}
.dkh-a-gauge2 .kv{flex:none;display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px;border-top:1px solid var(--line);font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-gauge2 .kv b{font-size:var(--f-sm);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}