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

월간 리포트 요약, 운영 현황처럼 숫자 4개를 한 줄에. 타일마다 라벨, 값과 단위, 증감, 설명 한 줄. 강조 타일 1개. 5개 이상이면 표를 사용. 값 바꾸는 법: 타일 한 장 = 라벨 / 값과 단위 / 증감과 비교 기준 / 설명. 강조 타일 하나에 class="hot". 값은 5자 이내(쉼표 포함). 단위가 길면 "만 회"처럼 단위 쪽으로 넘김.

대시보드 KPI 카드 줄 구성과 Storytelling with Data(https://www.storytellingwithdata.com)의 "강조는 한 곳" 원칙, 증권사 리포트 첫 장의 key metrics 줄 참고. 직접 제작.

<div class="dk dk-tile4">
<div class="dk-card"><p class="lb">게시물 도달</p><p class="v num">48.2<span>만 회</span></p><p class="dl"><b class="num">+12%</b>전월 대비</p><p class="ds">릴스 9편, 피드 14건 합계</p></div>
<div class="dk-card hot"><p class="lb">콘텐츠 저장</p><p class="v num">3,140<span>회</span></p><p class="dl"><b class="num">+41%</b>전월 대비</p><p class="ds">구매 고려 단계의 선행 지표</p></div>
<div class="dk-card"><p class="lb">프로필 방문</p><p class="v num">9,870<span>회</span></p><p class="dl"><b class="num">+8%</b>전월 대비</p><p class="ds">링크 클릭률 6.2%</p></div>
<div class="dk-card"><p class="lb">후기 콘텐츠</p><p class="v num">34<span>건</span></p><p class="dl"><b class="num">+6건</b>전월 대비</p><p class="ds">목표 40건의 85% 발행</p></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>

.dk-tile4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.dk-tile4 .dk-card{padding:28px 28px}
.dk-tile4 .lb{font-size:var(--f-sm);font-weight:600;color:var(--mu);margin:0}
.dk-tile4 .v{font-size:var(--f-num);font-weight:800;line-height:1.15;letter-spacing:-2px;color:var(--ink);margin:var(--s3) 0 var(--s2)}
.dk-tile4 .v span{font-size:var(--f-lg);font-weight:600;letter-spacing:0;margin-left:4px;color:var(--ink2)}
.dk-tile4 .hot .v{color:var(--ac)}
.dk-tile4 .hot .v span{color:var(--ac)}
.dk-tile4 .dl{font-size:var(--f-sm);color:var(--ink2);margin:0}
.dk-tile4 .dl b{margin-right:8px}
.dk-tile4 .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-tile4 .note{grid-column:1 / -1;font-size:var(--f-cap);color:var(--mu);margin:0}