숫자와 스파크라인 타일 4개

현재 값과 함께 최근 흐름의 모양(오르는 중인지 평평한지)을 보여줄 때. 타일 3~4개. 스파크라인은 축과 눈금 없이 선과 끝점만, 시점 6~12개. 강조 타일 1개. 값 바꾸는 법: 스파크라인 한 개 = polyline(폭 228, 높이 52). 점 x = 6 + (216 ÷ (시점 수 − 1)) × 순번, y = 44 − (값 − 최솟값) ÷ (최댓값 − 최솟값) × 36. 끝점 circle 의 cx, cy = 마지막 점. 타일마다 자기 최솟값·최댓값으로 맞추므로 타일끼리 높이를 비교하지 않음(모양만 봄). 강조 타일에 class="hot".

Edward Tufte 의 sparkline 개념(https://www.edwardtufte.com/notebook/sparkline-theory-and-practice-edward-tufte/)과 대시보드 KPI 카드의 "값 + 작은 추이선" 구성 참고. 직접 제작.

<div class="dk dk-spark">
<div class="dk-card hot"><p class="lb">브랜드 검색량 지수</p><p class="v num">163<span></span></p><p class="dl"><b class="num">+63</b>8주 전 대비</p><svg width="228" height="52" viewBox="0 0 228 52" role="img">
<polyline points="6,44 36.9,42 67.7,39.4 98.6,37.4 129.4,34.9 160.3,15.6 191.1,13.6 222,8"/><circle cx="222" cy="8" r="4.5"/>
</svg><p class="ax"><span>1주</span><span>8주</span></p></div>
<div class="dk-card"><p class="lb">상담 신청</p><p class="v num">315<span>건</span></p><p class="dl"><b class="num">+73%</b>8주 전 대비</p><svg width="228" height="52" viewBox="0 0 228 52" role="img">
<polyline points="6,44 36.9,41.8 67.7,38 98.6,39.9 129.4,33.4 160.3,29.4 191.1,20.7 222,8"/><circle cx="222" cy="8" r="4.5"/>
</svg><p class="ax"><span>1주</span><span>8주</span></p></div>
<div class="dk-card"><p class="lb">콘텐츠 저장</p><p class="v num">3,140<span>회</span></p><p class="dl"><b class="num">+41%</b>8주 전 대비</p><svg width="228" height="52" viewBox="0 0 228 52" role="img">
<polyline points="6,42.7 36.9,44 67.7,37.8 98.6,31.6 129.4,32.9 160.3,25.6 191.1,14.5 222,8"/><circle cx="222" cy="8" r="4.5"/>
</svg><p class="ax"><span>1주</span><span>8주</span></p></div>
<div class="dk-card"><p class="lb">광고 클릭률</p><p class="v num">2.8<span>%</span></p><p class="dl"><b class="num">−0.2%p</b>8주 전 대비</p><svg width="228" height="52" viewBox="0 0 228 52" role="img">
<polyline points="6,17 36.9,8 67.7,26 98.6,17 129.4,35 160.3,26 191.1,44 222,35"/><circle cx="222" cy="35" r="4.5"/>
</svg><p class="ax"><span>1주</span><span>8주</span></p></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>

.dk-spark{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.dk-spark .dk-card{padding:28px 28px}
.dk-spark .lb{font-size:var(--f-sm);font-weight:600;color:var(--mu);margin:0}
.dk-spark .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-spark .v span{font-size:var(--f-lg);font-weight:600;letter-spacing:0;margin-left:4px;color:var(--ink2)}
.dk-spark .hot .v{color:var(--ac)}
.dk-spark .hot .v span{color:var(--ac)}
.dk-spark .dl{font-size:var(--f-sm);color:var(--ink2);margin:0}
.dk-spark .dl b{margin-right:8px}
.dk-spark .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-spark .note{grid-column:1 / -1;font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-spark .dk-card{padding:24px 24px 18px}
.dk-spark svg{display:block;margin-top:var(--s4)}
.dk-spark svg polyline{fill:none;stroke:var(--g3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dk-spark svg circle{fill:var(--g4)}
.dk-spark .hot svg polyline{stroke:var(--ac)}
.dk-spark .hot svg circle{fill:var(--ac)}
.dk-spark .ax{display:flex;justify-content:space-between;font-size:var(--f-cap);color:var(--mu);margin:4px 0 0}