반폭 · 현재와 목표 대조 표(3행)

지표 2~3개의 현재 값과 목표 값을 나란히 보일 때. 항목 7자 이내, 값은 숫자 하나, 보조 문구 12자 이내. 목표 열만 강조 바탕. 값 바꾸는 법: .r 하나가 한 지표. .k=지표 이름, 가운데 칸=현재(.v 값, .c 보조), .to 칸=목표(.v 값, .c 보조). 2~3행.

직접 제작. 컨설팅 보고서의 As-Is / To-Be 대조 표 방식 참고. 목표 열 하나만 옅은 강조 바탕으로 묶어 시선을 모음.

<div class="dk dkh dkh-t-asis"><div class="dk-card"><p class="dk-lb">핵심 지표 현재와 목표</p><div class="tb"><div class="hr"><div>지표</div><div>현재</div><div class="to">목표</div></div>
<div class="r"><div class="k">전환율</div><div><span class="v">1.2%</span><span class="c">최근 3개월 평균</span></div><div class="to"><span class="v">1.8%</span><span class="c">6개월 내 도달</span></div></div>
<div class="r"><div class="k">재방문 비율</div><div><span class="v">18%</span><span class="c">최근 3개월 평균</span></div><div class="to"><span class="v">25%</span><span class="c">리타게팅 확대</span></div></div>
<div class="r"><div class="k">장바구니 이탈</div><div><span class="v">71%</span><span class="c">결제 단계 기준</span></div><div class="to"><span class="v">60%</span><span class="c">결제 화면 개편</span></div></div>
</div></div></div>

.dkh-t-asis .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-asis .dk-lb{margin:0 0 10px}
.dkh-t-asis .tb{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-asis .hr,.dkh-t-asis .r{display:grid;grid-template-columns:96px 1fr 1fr;align-items:stretch}
.dkh-t-asis .hr{flex:none;font-size:var(--f-cap);color:var(--mu)}
.dkh-t-asis .hr > div{padding:6px 14px}
.dkh-t-asis .hr > div:first-child,.dkh-t-asis .r > .k{padding-left:0}
.dkh-t-asis .hr > .to{background:var(--acw);color:var(--ac2);font-weight:600;border-radius:var(--r-sm) var(--r-sm) 0 0}
.dkh-t-asis .r{flex:1;border-top:1px solid var(--line)}
.dkh-t-asis .hr + .r{border-top-color:var(--line2)}
.dkh-t-asis .r > div{display:flex;flex-direction:column;justify-content:center;padding:6px 14px;min-width:0}
.dkh-t-asis .r > .k{font-size:var(--f-sm);font-weight:600}
.dkh-t-asis .r > .to{background:var(--acw)}
.dkh-t-asis .r:last-child > .to{border-radius:0 0 var(--r-sm) var(--r-sm)}
.dkh-t-asis .v{font-size:var(--f-xl);font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--ink2)}
.dkh-t-asis .to .v{color:var(--ink)}
.dkh-t-asis .c{font-size:var(--f-cap);color:var(--mu);line-height:1.4}