반폭 · KPI 타일 4개(2×2, 목표 대비 막대)

핵심 지표 4개의 현재 값과 목표, 달성 정도를 2×2 타일로. 타일 4개 고정. 지표 이름 7자 이내, 값 6자 이내, 목표 문구 10자 이내. 가장 먼저 볼 지표 1개만 강조. 값 바꾸는 법: .t 하나가 한 지표. .k=이름, .v=값(단위는 small), 막대 i 의 width = 현재 ÷ 목표 × 100(%, 최대 100), .d=목표 문구와 달성률. 먼저 볼 지표에 class="hot". 4개 고정.

직접 제작. 대시보드의 지표 타일(이름, 큰 값, 목표 대비 막대) 구성 참고. 강조 타일 하나만 옅은 강조 바탕.

<div class="dk dkh dkh-a-kpi4"><div class="dk-card"><p class="dk-lb">핵심 지표 4개 · 목표 대비 현재</p>
<div class="g">
<div class="t hot"><div class="k">전환율</div><div class="v">2.6<small>%</small></div><div class="b"><i style="width:87%"></i></div><div class="d"><span>목표 3.0%</span><span>달성 87%</span></div></div>
<div class="t"><div class="k">월 전환 건수</div><div class="v">1,240<small>건</small></div><div class="b"><i style="width:83%"></i></div><div class="d"><span>목표 1,500건</span><span>달성 83%</span></div></div>
<div class="t"><div class="k">클릭률</div><div class="v">3.1<small>%</small></div><div class="b"><i style="width:100%"></i></div><div class="d"><span>목표 3.0%</span><span>달성 100%</span></div></div>
<div class="t"><div class="k">재방문 비율</div><div class="v">24<small>%</small></div><div class="b"><i style="width:80%"></i></div><div class="d"><span>목표 30%</span><span>달성 80%</span></div></div>
</div>
<p class="nt">최근 30일 기준 · 예시 값</p></div></div>

.dkh-a-kpi4 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-kpi4 .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-kpi4 .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-kpi4 .g{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.dkh-a-kpi4 .t{display:flex;flex-direction:column;justify-content:space-between;background:var(--soft);border-radius:8px;padding:8px 14px 8px;min-width:0}
.dkh-a-kpi4 .k{font-size:var(--f-cap);font-weight:600;color:var(--ink2);line-height:1.4}
.dkh-a-kpi4 .v{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.dkh-a-kpi4 .v small{font-size:var(--f-body);font-weight:600;margin-left:2px;letter-spacing:0}
.dkh-a-kpi4 .b{height:4px;background:var(--g1);border-radius:2px;margin:4px 0 3px}
.dkh-a-kpi4 .b i{display:block;height:100%;background:var(--g4);border-radius:2px}
.dkh-a-kpi4 .d{display:flex;justify-content:space-between;gap:6px;font-size:var(--f-cap);color:var(--mu);line-height:1.4;white-space:nowrap}
.dkh-a-kpi4 .t.hot{background:var(--acw)}
.dkh-a-kpi4 .t.hot .v{color:var(--ac)}
.dkh-a-kpi4 .t.hot .b{background:var(--acm)}
.dkh-a-kpi4 .t.hot .b i{background:var(--ac)}