아이콘과 큰 숫자 행

채널·항목별 핵심 수치를 한 줄씩 읽게 할 때. 행 3~4개. 수치 하나만 강조. 행마다 단위가 달라도 됨. 값 바꾸는 법: 행(.rw)을 복사·삭제해 3~4개. 아이콘 svg, 항목명, 설명, 숫자(.num)와 단위(i), 오른쪽 지표명·보조 문구 교체. 강조할 행 하나에만 class="rw hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

infoDiagram Flat Infographics Template(https://www.infodiagram.com/diagrams/infographics-template-ppt-presentation-flat). 아이콘, 항목명, 큰 숫자를 한 줄에 놓는 KPI 행 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-icnum">
  <div class="dk-card">
    <div class="rw"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span><div class="tx"><b>검색 광고</b><span>브랜드 키워드와 일반 키워드 통합 운영</span></div><div class="nv"><span class="num">4.2</span><i>%</i></div><div class="ch"><b>전환율</b>전 분기 대비 0.8%p 상승</div></div>
    <div class="rw hot"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg></span><div class="tx"><b>쇼핑 검색</b><span>상품명 최적화와 리뷰 확보 병행</span></div><div class="nv"><span class="num">318</span><i>%</i></div><div class="ch"><b>광고 수익률</b>전체 채널 중 최고</div></div>
    <div class="rw"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"/><circle cx="12" cy="12" r="10"/></svg></span><div class="tx"><b>영상 광고</b><span>15초 소재 3종 교차 노출</span></div><div class="nv"><span class="num">62</span><i>만 회</i></div><div class="ch"><b>조회수</b>완주율 31%</div></div>
    <div class="rw"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/></svg></span><div class="tx"><b>메시지</b><span>기존 구매 고객 대상 재방문 유도</span></div><div class="nv"><span class="num">1,240</span><i>건</i></div><div class="ch"><b>재구매</b>발송 대비 6.1%</div></div>
  </div>
</div>

.dk-icnum .dk-card{padding:10px 36px}
.dk-icnum .rw{display:grid;grid-template-columns:56px minmax(0,1.3fr) 230px minmax(0,1fr);align-items:center;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.dk-icnum .rw:last-child{border-bottom:0}
.dk-icnum .ib{width:56px;height:56px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.dk-icnum .ic{width:28px;height:28px}
.dk-icnum .tx b{display:block;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-icnum .tx span{font-size:var(--f-sm);color:var(--mu)}
.dk-icnum .nv{text-align:right;white-space:nowrap;line-height:1}
.dk-icnum .nv .num{font-size:var(--f-num);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.dk-icnum .nv i{font-style:normal;font-size:var(--f-md);font-weight:600;color:var(--ink2);margin-left:4px}
.dk-icnum .ch{font-size:var(--f-sm);color:var(--mu);padding-left:20px;border-left:1px solid var(--line)}
.dk-icnum .ch b{display:block;font-size:var(--f-body);color:var(--ink2)}
.dk-icnum .hot .nv .num,.dk-icnum .hot .nv i{color:var(--ac)}
.dk-icnum .hot .ib{background:var(--acw);color:var(--ac)}