반폭 · 번호 목록 3개(제목과 설명)

원칙, 과제, 제안 요지를 3개로 놓을 때. 제목 12자 이내, 설명 40자 이내(2줄). 강조 번호 1개. 값 바꾸는 법: .r 하나가 한 항목. .n=번호, .t=제목, .d=설명. 강조 항목 하나에 class="hot". 3개 고정(2개도 가능).

직접 제작. 컨설팅 보고서의 번호 붙은 핵심 메시지 목록 방식 참고. 번호를 크게, 무채색으로 두고 하나만 강조.

<div class="dk dkh dkh-t-num3"><div class="dk-card"><p class="dk-lb">운영 원칙 3가지</p><div class="ls">
<div class="r hot"><span class="n">01</span><div><div class="t">주 단위 예산 재배분</div><div class="d">전환당 비용 기준으로 매체별 예산을 매주 조정</div></div></div>
<div class="r"><span class="n">02</span><div><div class="t">소재 격주 교체</div><div class="d">클릭률이 떨어진 소재는 2주 안에 새 소재로 교체</div></div></div>
<div class="r"><span class="n">03</span><div><div class="t">측정 기준 사전 합의</div><div class="d">전환 정의와 집계 방식을 착수 전에 문서로 확정</div></div></div>
</div></div></div>

.dkh-t-num3 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-num3 .dk-lb{margin:0 0 10px}
.dkh-t-num3 .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-num3 .r{flex:1;display:grid;grid-template-columns:54px 1fr;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.dkh-t-num3 .r:first-child{border-top-color:var(--line2)}
.dkh-t-num3 .n{font-size:var(--f-h);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--g2);font-variant-numeric:tabular-nums}
.dkh-t-num3 .r.hot .n{color:var(--ac)}
.dkh-t-num3 .t{font-size:var(--f-body);font-weight:600}
.dkh-t-num3 .d{font-size:var(--f-sm);color:var(--ink2);line-height:1.5}