띠 · 숫자 4개 한 줄(이름, 값, 증감)

성과 요약 장이나 그래프 아래에 지표 4개를 이름과 값, 증감으로 나란히 둘 때. 이름 4자 이내, 값 6자 이내, 증감 10자 이내. 강조 값 1개. 값 바꾸는 법: .c 하나가 지표 1개. span=이름, b=값, b 안의 i=단위, em=증감. 강조할 칸 하나에 class="c hot". 4개 고정.

직접 제작. 대시보드 상단 지표 줄(KPI strip)의 이름, 값, 증감 한 줄 구성을 참고.

<div class="dk dks dks-num4"><div class="c"><span>노출</span><b class="num">128만<i>회</i></b><em>전월 대비 +18%</em></div><div class="c"><span>클릭</span><b class="num">2.4만<i>회</i></b><em>전월 대비 +12%</em></div><div class="c hot"><span>전환</span><b class="num">612<i>건</i></b><em>전월 대비 +31%</em></div><div class="c"><span>전환율</span><b class="num">2.5<i>%</i></b><em>전월 대비 +0.4%p</em></div></div>

.dks-num4{background:var(--soft);border-radius:var(--r-sm);padding:14px 0;display:grid;grid-template-columns:repeat(4,1fr)}
.dks-num4 .c{display:flex;align-items:baseline;gap:10px;padding:0 24px;border-left:1px solid var(--line2);white-space:nowrap}
.dks-num4 .c:first-child{border-left:0}
.dks-num4 .c span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dks-num4 .c b{font-size:var(--f-xl);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.dks-num4 .c b i{font-style:normal;font-size:var(--f-sm);font-weight:600;margin-left:2px}
.dks-num4 .c.hot b{color:var(--ac)}
.dks-num4 .c em{font-style:normal;font-size:var(--f-cap);color:var(--ink2);margin-left:auto}