반폭 · 큰 숫자 1개와 정의, 출처

장의 핵심 수치 하나를 크게 보이고 그 정의, 범위, 출처를 밝힐 때. 숫자 5자 이내와 단위, 설명 한 줄 18자 이내, 아래 2~3행(행마다 30자 이내). 값 바꾸는 법: .v=숫자(단위는 small), .c=숫자 설명 한 줄. .kv 하나가 정의, 범위, 출처 한 행(.k 이름표, 다음 span 내용). .kv 2~3행.

직접 제작. 연차 보고서와 IR 자료의 큰 숫자(big number) 연출 방식 참고. 숫자 아래에 정의와 출처를 표로 붙여 근거를 같이 보임.

<div class="dk dkh dkh-t-big1"><div class="dk-card"><p class="dk-lb">광고 수익률</p><div class="top"><div class="v">3.4<small>배</small></div><div class="c">최근 3개월 평균, 직전 3개월 2.6배</div></div>
<div class="kv"><span class="k">정의</span><span>광고 경유 매출 ÷ 광고비</span></div>
<div class="kv"><span class="k">범위</span><span>검색 광고와 쇼핑 광고 합산, 취소 건 제외</span></div>
<div class="kv"><span class="k">출처</span><span>광고 관리자 집계, 7~9월</span></div></div></div>

.dkh-t-big1 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-big1 .dk-lb{margin:0 0 10px}
.dkh-t-big1 .top{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 0 12px}
.dkh-t-big1 .v{font-size:var(--f-big);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--ac);font-variant-numeric:tabular-nums}
.dkh-t-big1 .v small{font-size:var(--f-xl);font-weight:600;margin-left:4px;letter-spacing:0}
.dkh-t-big1 .c{margin-top:6px;font-size:var(--f-body);font-weight:600;color:var(--ink)}
.dkh-t-big1 .kv{flex:none;display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dkh-t-big1 .kv .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-t-big1 .kv{padding:7px 0}