띠 · 숫자 3개 한 줄(값과 뜻)

본문 조각 아래에 그 장을 받치는 수치 3개를 한 줄로 둘 때. 값은 숫자와 단위 6자 이내, 뜻 14자 이내, 보조 설명 18자 이내. 강조 값 1개. 값 바꾸는 법: .c 하나가 수치 1개. b=값, b 안의 i=단위, strong=뜻, span=보조 설명. 강조할 칸 하나에 class="c hot". 3개 고정.

직접 제작. 컨설팅 보고서 장표 하단의 핵심 수치 줄(key figures strip) 방식을 참고.

<div class="dk dks dks-num3"><div class="c hot"><b class="num">3.2<i>%</i></b><p><strong>검색 광고 평균 클릭률</strong><span>업종 평균 대비 1.3배 수준</span></p></div><div class="c"><b class="num">612<i>건</i></b><p><strong>월 전환 수</strong><span>구매와 상담 신청 합산 기준</span></p></div><div class="c"><b class="num">64<i>%</i></b><p><strong>재방문 고객 비중</strong><span>첫 방문 후 30일 이내 재유입</span></p></div></div>

.dks-num3{border-top:1px solid var(--line2);padding-top:14px;display:grid;grid-template-columns:repeat(3,1fr)}
.dks-num3 .c{display:flex;align-items:center;gap:16px;padding:0 28px;border-left:1px solid var(--line)}
.dks-num3 .c:first-child{padding-left:0;border-left:0}
.dks-num3 .c b{flex:none;font-size:var(--f-h);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.dks-num3 .c b i{font-style:normal;font-size:var(--f-body);font-weight:600;margin-left:2px}
.dks-num3 .c.hot b{color:var(--ac)}
.dks-num3 .c p{margin:0;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.dks-num3 .c strong{font-size:var(--f-sm)}
.dks-num3 .c span{font-size:var(--f-cap);color:var(--mu)}