반폭 · 번호 목록 5개(한 줄씩)

점검 항목, 할 일, 범위를 4~5개 한 줄씩 놓을 때. 제목 7자 이내, 설명 16자 이내(한 줄). 값 바꾸는 법: .r 하나가 한 항목. .n=번호, .t=제목, .d=설명. 4~5개. 제목이 7자를 넘으면 CSS 의 92px 를 늘린다.

직접 제작. 실행 계획 장의 번호 목록 방식 참고. 번호만 강조색, 제목과 설명을 열로 맞춰 한 줄에 읽히게 함.

<div class="dk dkh dkh-t-num5"><div class="dk-card"><p class="dk-lb">착수 첫 달 점검 항목</p><div class="ls">
<div class="r"><span class="n">01</span><span class="t">계정 구조</span><span class="d">캠페인과 광고 그룹 재편</span></div>
<div class="r"><span class="n">02</span><span class="t">검색어</span><span class="d">전환 없는 검색어 제외</span></div>
<div class="r"><span class="n">03</span><span class="t">전환 측정</span><span class="d">태그 설치와 중복 집계 점검</span></div>
<div class="r"><span class="n">04</span><span class="t">소재</span><span class="d">문구 3종, 이미지 3종 교체</span></div>
<div class="r"><span class="n">05</span><span class="t">랜딩 페이지</span><span class="d">첫 화면 문구와 버튼 위치 수정</span></div>
</div></div></div>

.dkh-t-num5 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-num5 .dk-lb{margin:0 0 10px}
.dkh-t-num5 .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-num5 .r{flex:1;display:grid;grid-template-columns:22px 92px 1fr;column-gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5}
.dkh-t-num5 .r:first-child{border-top-color:var(--line2)}
.dkh-t-num5 .n{font-size:var(--f-cap);font-weight:600;color:var(--ac);font-variant-numeric:tabular-nums}
.dkh-t-num5 .t{font-weight:600;white-space:nowrap}
.dkh-t-num5 .d{color:var(--ink2)}