반폭 · 큰 숫자 3개 세로 스택

서로 다른 수치 3개를 위아래로 놓을 때. 숫자 5자 이내와 단위, 제목 12자 이내, 설명 17자 이내. 강조 숫자 1개. 값 바꾸는 법: .r 하나가 한 수치. .v=숫자(단위는 small), .t=제목, .d=기준 설명. 강조 수치 하나에 class="hot". 3개(2개도 가능).

직접 제작. IR 자료의 KPI 세로 나열 방식 참고. 숫자 열 폭을 고정해 자릿수가 달라도 설명이 한 줄에 맞게 함.

<div class="dk dkh dkh-t-big3"><div class="dk-card"><p class="dk-lb">현황 요약 수치</p><div class="ls">
<div class="r hot"><div class="v">62<small>%</small></div><div><div class="t">검색 광고 전환 비중</div><div class="d">최근 6개월 전체 전환 기준</div></div></div>
<div class="r"><div class="v">1,240<small>건</small></div><div><div class="t">월평균 전환 건수</div><div class="d">구매 완료 기준, 취소 제외</div></div></div>
<div class="r"><div class="v">3.4<small>배</small></div><div><div class="t">광고 수익률</div><div class="d">검색 광고와 쇼핑 광고 합산</div></div></div>
</div></div></div>

.dkh-t-big3 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-big3 .dk-lb{margin:0 0 10px}
.dkh-t-big3 .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-big3 .r{flex:1;display:grid;grid-template-columns:152px 1fr;column-gap:18px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.dkh-t-big3 .r:first-child{border-top-color:var(--line2)}
.dkh-t-big3 .v{font-size:var(--f-num);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.dkh-t-big3 .v small{font-size:var(--f-lg);font-weight:600;margin-left:2px;letter-spacing:0}
.dkh-t-big3 .r.hot .v{color:var(--ac)}
.dkh-t-big3 .t{font-size:var(--f-sm);font-weight:600;line-height:1.45}
.dkh-t-big3 .d{font-size:var(--f-cap);color:var(--mu);line-height:1.45}