숫자 타일 3개(값·단위·라벨·증감)

성과 요약이나 목표 제시에서 핵심 숫자 3개를 같은 무게로. 타일마다 라벨, 값과 단위, 증감 한 줄, 설명 한 줄. 강조색은 가장 말하고 싶은 타일 하나의 숫자에만. 타일 3개 고정(4개는 D-수치-타일4). 값 바꾸는 법: 타일 한 장 = 라벨(.lb) / 값(.v)과 단위(span) / 증감(.dl 의 b)과 비교 기준 / 설명(.ds). 강조할 타일 하나의 div 에 class="hot". 값은 4자 이내 권장(넘으면 단위를 줄이거나 천 단위로). 감소는 "−12%" 로 표기하고 색은 바꾸지 않음(좋고 나쁨은 설명 줄에서 말함).

Storytelling with Data(https://www.storytellingwithdata.com)의 simple text 와 대시보드 KPI 카드 관행(라벨은 작게, 값은 크게, 증감은 값 바로 아래), IR 자료의 key figures 장표 참고. 직접 제작.

<div class="dk dk-tile3">
<div class="dk-card"><p class="lb">상담 신청 건수</p><p class="v num">819<span>건</span></p><p class="dl"><b class="num">+38%</b>전 분기 대비</p><p class="ds">목표 750건 대비 109% 달성</p></div>
<div class="dk-card hot"><p class="lb">방문 대비 전환율</p><p class="v num">4.6<span>%</span></p><p class="dl"><b class="num">+1.4%p</b>전 분기 대비</p><p class="ds">상세 페이지 개편 이후 6주 연속 상승</p></div>
<div class="dk-card"><p class="lb">브랜드 검색량 지수</p><p class="v num">163<span></span></p><p class="dl"><b class="num">+63</b>지난해 평균 100 기준</p><p class="ds">신규 소재 투입 뒤 한 단계 상승</p></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>

.dk-tile3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.dk-tile3 .dk-card{padding:32px 36px}
.dk-tile3 .lb{font-size:var(--f-sm);font-weight:600;color:var(--mu);margin:0}
.dk-tile3 .v{font-size:var(--f-big);font-weight:800;line-height:1.15;letter-spacing:-2px;color:var(--ink);margin:var(--s3) 0 var(--s2)}
.dk-tile3 .v span{font-size:var(--f-xl);font-weight:600;letter-spacing:0;margin-left:4px;color:var(--ink2)}
.dk-tile3 .hot .v{color:var(--ac)}
.dk-tile3 .hot .v span{color:var(--ac)}
.dk-tile3 .dl{font-size:var(--f-sm);color:var(--ink2);margin:0}
.dk-tile3 .dl b{margin-right:8px}
.dk-tile3 .ds{font-size:var(--f-sm);color:var(--mu);margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.dk-tile3 .note{grid-column:1 / -1;font-size:var(--f-cap);color:var(--mu);margin:0}