큰 숫자 1개와 근거 3줄

장의 주인공이 숫자 하나일 때. 그래프를 그리지 않고 숫자를 가장 크게. 왼쪽 숫자 1개(단위 포함 5자 이내), 오른쪽에 그 숫자의 근거 2~3줄. 값 바꾸는 법: 큰 숫자(.big)와 단위(span), 위 라벨, 아래 기준 설명 교체. 숫자는 단위 포함 5자 이내(넘으면 글자 크기를 --f-big 으로). 오른쪽 근거는 li 2~3줄, 큰 숫자의 분자에 해당하는 줄에 class="hot".

Storytelling with Data(https://www.storytellingwithdata.com)의 simple text 원칙(숫자가 한두 개면 그래프 대신 숫자를 크게 쓰고 설명을 붙임), IR 자료의 big number 장표 관행 참고. 직접 제작.

<div class="dk dk-big1">
<div class="dk-card">
<div class="l"><p class="lb">브랜드 검색량 변화</p><p class="big num">3.2<span>배</span></p><p class="cap">집행 전 4주 평균 대비, 후기 노출 후 4주 평균</p></div>
<div class="r"><p class="h">광고비를 늘리지 않고 얻은 증가분</p><ul><li class=""><span>집행 전 4주 평균</span><b class="num">지수 100</b></li><li class="hot"><span>후기 노출 후 4주 평균</span><b class="num">지수 320</b></li><li class=""><span>같은 기간 업종 평균</span><b class="num">지수 108</b></li></ul><p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p></div>
</div>
</div>

.dk-big1 .dk-card{display:grid;grid-template-columns:440px minmax(0,1fr);gap:56px;align-items:center;padding:44px 48px}
.dk-big1 .lb{font-size:var(--f-sm);font-weight:600;color:var(--mu);margin:0}
.dk-big1 .big{font-size:var(--f-huge);font-weight:800;line-height:1.1;letter-spacing:-4px;color:var(--ac);margin:var(--s2) 0}
.dk-big1 .big span{font-size:var(--f-num);font-weight:700;letter-spacing:-1px;margin-left:6px}
.dk-big1 .cap{font-size:var(--f-body);color:var(--ink2);margin:0}
.dk-big1 .r{border-left:1px solid var(--line);padding-left:56px}
.dk-big1 .h{font-size:var(--f-xl);font-weight:700;letter-spacing:-.5px;margin:0 0 var(--s4)}
.dk-big1 ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.dk-big1 li{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink2)}
.dk-big1 li b{font-size:var(--f-lg);font-weight:700}
.dk-big1 li.hot span{color:var(--ink);font-weight:600}
.dk-big1 .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s4) 0 0}