반원 게이지 3개

달성률·점유율·완료율처럼 100%가 상한인 값 3개를 나란히. 게이지 3개 고정(2개면 열 수만 조정). 하나만 강조. 값 바꾸는 법: 채움: path.fg 의 stroke-dasharray 첫 값 = 값(%) ÷ 100 × 251.3 (둘째 값 300 은 그대로). 100%를 넘으면 251.3 으로 고정하고 숫자만 실제 값. 가운데 숫자, 아이콘, 항목명, 설명 한 줄 교체. 강조 카드 하나에만 class="hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

SlideModel 게이지·온도 분류 템플릿(https://slidemodel.com/templates/tag/temperature/), PresentationGO Dual Thermometer Gauge(https://www.presentationgo.com/?p=185782). 반원 호의 채움으로 비율을, 호 안쪽에 큰 숫자를 두는 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-gauge2">
  <div class="dk-card gg"><div class="gw"><svg viewBox="0 0 200 108" width="300" height="162" aria-hidden="true"><path class="bg" d="M20 100A80 80 0 0 1 180 100"/><path class="fg" d="M20 100A80 80 0 0 1 180 100" stroke-dasharray="231.2 300"/></svg><p class="v"><span class="num">92</span><i>%</i></p></div><p class="lb2"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v3"/><path d="M16 2v3"/><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="m9 15 2 2 4-4"/></svg><b>일정 준수율</b></p><p class="nt">착수 후 12주 누적, 지연 1건</p></div>
  <div class="dk-card gg hot"><div class="gw"><svg viewBox="0 0 200 108" width="300" height="162" aria-hidden="true"><path class="bg" d="M20 100A80 80 0 0 1 180 100"/><path class="fg" d="M20 100A80 80 0 0 1 180 100" stroke-dasharray="251.33 300"/></svg><p class="v"><span class="num">118</span><i>%</i></p></div><p class="lb2"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg><b>목표 달성률</b></p><p class="nt">분기 문의 목표 대비, 상한 초과분은 숫자로만 표기</p></div>
  <div class="dk-card gg"><div class="gw"><svg viewBox="0 0 200 108" width="300" height="162" aria-hidden="true"><path class="bg" d="M20 100A80 80 0 0 1 180 100"/><path class="fg" d="M20 100A80 80 0 0 1 180 100" stroke-dasharray="186.0 300"/></svg><p class="v"><span class="num">74</span><i>%</i></p></div><p class="lb2"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg><b>예산 소진율</b></p><p class="nt">분기 예산 대비, 잔여분은 다음 달 이월</p></div>
</div>

.dk-gauge2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dk-gauge2 .gg{padding:30px 28px 26px;display:flex;flex-direction:column;align-items:center;text-align:center}
.dk-gauge2 .gw{position:relative;width:300px;height:162px}
.dk-gauge2 svg{display:block}
.dk-gauge2 .bg{fill:none;stroke:var(--g1);stroke-width:16;stroke-linecap:round}
.dk-gauge2 .fg{fill:none;stroke:var(--g4);stroke-width:16;stroke-linecap:round}
.dk-gauge2 .v{position:absolute;left:0;right:0;bottom:6px;margin:0;line-height:1}
.dk-gauge2 .v .num{font-size:var(--f-big);font-weight:700;letter-spacing:-.03em}
.dk-gauge2 .v i{font-style:normal;font-size:var(--f-lg);font-weight:600;margin-left:2px}
.dk-gauge2 .lb2{margin:22px 0 6px;display:flex;align-items:center;gap:8px;font-size:var(--f-lg)}
.dk-gauge2 .lb2 b{font-weight:700}
.dk-gauge2 .lb2 .ic{width:24px;height:24px;color:var(--g4)}
.dk-gauge2 .nt{margin:0;font-size:var(--f-sm);color:var(--mu)}
.dk-gauge2 .hot .fg{stroke:var(--ac)}
.dk-gauge2 .hot .v{color:var(--ac)}