온도계형 목표 대비 진행

목표 대비 달성 정도를 항목별로 보여줄 때. 값은 0~100 범위의 비율·지수. 항목 3~4개. 목표선(가로 눈금)과 현재 값(채움 높이)을 함께 표시. 목표를 넘은 항목 하나만 강조. 값 바꾸는 법: 채움 높이: .tube i 의 style="height:값%". 목표선: .tube u 의 style="bottom:목표%". 값이 0~100 이 아니면 최댓값 대비 비율로 환산해 넣고 숫자 표기는 원래 값으로. 아이콘, 항목명, 숫자·단위, 목표, 차이 문구 교체. 강조 항목 하나에만 class="t hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

PresentationGO Thermometer Scales(https://presentationgo.com/?p=21426), Thermometer Chart(https://www.presentationgo.com/?p=12698). 온도계 관의 채움 높이로 값을, 가로 눈금으로 목표를 나타내고 여러 개를 나란히 비교하는 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-thermo">
  <div class="dk-card w">
    <div class="t"><div class="th"><div class="tube"><i style="height:64%"></i><u style="bottom:70%"></u></div><span class="bulb"></span></div><div class="tx"><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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg><h3>브랜드 인지</h3><p class="v"><span class="num">64</span><i>%</i></p><p class="gl">목표 70%</p><p class="nt">목표까지 6%p</p></div></div>
    <div class="t hot"><div class="th"><div class="tube"><i style="height:82%"></i><u style="bottom:75%"></u></div><span class="bulb"></span></div><div class="tx"><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="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path d="M7.2 2.2 8 5.1"/><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"/></svg><h3>검색 클릭 점유</h3><p class="v"><span class="num">82</span><i>%</i></p><p class="gl">목표 75%</p><p class="nt">목표 7%p 초과</p></div></div>
    <div class="t"><div class="th"><div class="tube"><i style="height:48%"></i><u style="bottom:60%"></u></div><span class="bulb"></span></div><div class="tx"><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="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></svg><h3>상담 전환</h3><p class="v"><span class="num">48</span><i>%</i></p><p class="gl">목표 60%</p><p class="nt">목표까지 12%p</p></div></div>
    <div class="t"><div class="th"><div class="tube"><i style="height:35%"></i><u style="bottom:50%"></u></div><span class="bulb"></span></div><div class="tx"><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="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg><h3>재방문</h3><p class="v"><span class="num">35</span><i>%</i></p><p class="gl">목표 50%</p><p class="nt">목표까지 15%p</p></div></div>
  </div>
</div>

.dk-thermo .w{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:32px 12px 30px}
.dk-thermo .t{display:flex;gap:22px;align-items:flex-end;padding:0 24px;border-right:1px solid var(--line)}
.dk-thermo .t:last-child{border-right:0}
.dk-thermo .th{flex:none;display:flex;flex-direction:column;align-items:center}
.dk-thermo .tube{position:relative;width:26px;height:230px;background:var(--soft);border-radius:13px 13px 0 0}
.dk-thermo .tube i{position:absolute;left:7px;right:7px;bottom:0;background:var(--g3);border-radius:6px 6px 0 0}
.dk-thermo .tube u{position:absolute;left:-6px;width:38px;height:2px;background:var(--ink)}
.dk-thermo .bulb{width:46px;height:46px;border-radius:50%;background:var(--g3);margin-top:-8px;border:7px solid var(--soft)}
.dk-thermo .tx{padding-bottom:6px;min-width:0}
.dk-thermo .tx .ic{width:28px;height:28px;color:var(--g4)}
.dk-thermo h3{margin:8px 0 12px;font-size:var(--f-body);font-weight:600;color:var(--ink2)}
.dk-thermo .v{margin:0;line-height:1}
.dk-thermo .v .num{font-size:var(--f-num);font-weight:700;letter-spacing:-.03em}
.dk-thermo .v i{font-style:normal;font-size:var(--f-md);font-weight:600;margin-left:2px}
.dk-thermo .gl{margin:12px 0 2px;font-size:var(--f-sm);font-weight:600;color:var(--ink2)}
.dk-thermo .nt{margin:0;font-size:var(--f-cap);color:var(--mu)}
.dk-thermo .hot .tube i,.dk-thermo .hot .bulb{background:var(--ac)}
.dk-thermo .hot .v{color:var(--ac)}