반원 게이지와 기준 3줄

0~100 사이 지표 하나의 현재 위치와 목표. 종합 점수, 달성률, 건강도 지수. 게이지 1개 + 오른쪽 기준 값 2~3줄. 지표가 여러 개면 불릿 그래프나 진행 막대 목록을 사용. 값 바꾸는 법: 반원 호 길이 = 3.1416 × 170 = 534.1. 값 호의 stroke-dasharray 첫 값 = 지수 ÷ 100 × 534.1. 목표 표식 좌표: 각도 = 180° × (1 − 목표 ÷ 100), x = 220 + r × cos(각도), y = 214 − r × sin(각도) 에서 r = 146 와 194 두 점을 이은 선, 글자는 r = 206 지점. 목표가 50 미만이면 글자에 text-anchor="end" 추가. 가운데 숫자와 오른쪽 3줄 교체.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Magnitude 분류와 대시보드의 게이지 관행 참고. 게이지 하나에 값 하나만 싣고 목표 표식을 호 위에 직접 표기하는 방식으로 직접 제작.

<div class="dk dk-gauge">
<div class="dk-card">
<p class="ttl"><span>브랜드 인지 종합 지수 · 0~100</span></p>
<div class="row"><svg width="470" height="250" viewBox="0 0 470 250" role="img">
<path d="M50 214 A170 170 0 0 1 390 214" class="tr"/>
<path d="M50 214 A170 170 0 0 1 390 214" class="vl" stroke-dasharray="384.5 534.1"/>
<line x1="338.1" y1="128.2" x2="376.9" y2="100" class="tk"/>
<text x="386.7" y="92.9" class="v">목표 80</text>
<text x="220" y="184" text-anchor="middle" class="big">72</text>
<text x="220" y="212" text-anchor="middle">현재 달성 지수</text>
<text x="50" y="240" text-anchor="middle">0</text><text x="390" y="240" text-anchor="middle">100</text>
</svg><div class="r"><p class="h">목표까지 8포인트, 4분기 안에 도달 가능한 속도</p><ul><li class="hot"><span class="k">현재</span><span class="n num">72</span><span class="t">3분기 말 기준</span></li><li class=""><span class="k">목표</span><span class="n num">80</span><span class="t">연말까지 남은 격차 8포인트</span></li><li class=""><span class="k">지난 분기</span><span class="n num">58</span><span class="t">한 분기 사이 14포인트 상승</span></li></ul></div></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-gauge .dk-card{padding:22px 32px 20px}
.dk-gauge .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-gauge .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-gauge .lg span{display:flex;align-items:center;gap:6px}
.dk-gauge .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-gauge .lg i.c-a{background:var(--ac)}
.dk-gauge .lg i.c-s{background:var(--soft)}
.dk-gauge .lg i.c-g1{background:var(--g1)}
.dk-gauge .lg i.c-g2{background:var(--g2)}
.dk-gauge .lg i.c-g3{background:var(--g3)}
.dk-gauge .lg i.c-g4{background:var(--g4)}
.dk-gauge .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-gauge svg{display:block}
.dk-gauge svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-gauge svg .a{fill:var(--ac)}
.dk-gauge svg .sf{fill:var(--soft)}
.dk-gauge svg .g1{fill:var(--g1)}
.dk-gauge svg .g2{fill:var(--g2)}
.dk-gauge svg .g3{fill:var(--g3)}
.dk-gauge svg .g4{fill:var(--g4)}
.dk-gauge svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-gauge svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-gauge svg text.k{fill:var(--ink2)}
.dk-gauge svg text.v{fill:var(--ink);font-weight:600}
.dk-gauge svg text.va{fill:var(--ac);font-weight:700}
.dk-gauge svg text.on{fill:var(--card);font-weight:600}
.dk-gauge .row{display:grid;grid-template-columns:470px minmax(0,1fr);gap:48px;align-items:center}
.dk-gauge svg path{fill:none;stroke-width:34}
.dk-gauge svg .tr{stroke:var(--g1)}
.dk-gauge svg .vl{stroke:var(--ac)}
.dk-gauge svg .tk{stroke:var(--ink);stroke-width:3}
.dk-gauge svg text.big{font-size:80px;font-weight:700;fill:var(--ink);letter-spacing:-2px}
.dk-gauge .r .h{font-size:var(--f-xl);font-weight:700;line-height:1.35;margin:0 0 var(--s4);letter-spacing:-.5px}
.dk-gauge .r ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.dk-gauge .r li{display:grid;grid-template-columns:96px 72px minmax(0,1fr);align-items:baseline;gap:var(--s4);padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink2)}
.dk-gauge .r li:last-child{border-bottom:0}
.dk-gauge .r .k{font-weight:600;color:var(--ink)}
.dk-gauge .r .n{font-size:var(--f-xl);font-weight:700;color:var(--ink)}
.dk-gauge .r li.hot .n{color:var(--ac)}