큰 번호 목록 4개(세로)

순서나 우선순위가 있는 4가지를 글로만 전할 때. 글머리표 4줄을 대신함. 항목 4개 고정, 제목 14자 이내, 설명 1~2줄 이내. 값 바꾸는 법: li 하나가 항목(번호, h3 제목, p 설명). 가장 먼저 볼 항목 하나에 class="hot"(번호만 강조색). 항목 수가 다르면 번호목록3·4·5 중 맞는 것을 고름.

글머리표 대안 정리 글(Visme 'bullet points presentation' https://visme.co/blog/bullet-points-presentation/ , SlideGenius '3 Bullet Point Alternatives' https://www.slidegenius.com/blog/3-bullet-point-alternatives-that-will-improve-your-deck , Maurizio La Cava FAQ https://www.mauriziolacava.com/en/faq/creative-alternatives-to-using-bullet-points-on-a-slide/)의 '목록을 구조로 바꾼다'는 방식 참고. 큰 번호, 굵은 제목, 설명을 세 칸으로 나눠 가로선만으로 구분. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tn4">
  <ol>
    <li><span class="n num">01</span><h3>계정 구조 재정리</h3><p>캠페인을 목적별 4개 묶음으로 나누고 이름 규칙 통일</p></li>
    <li><span class="n num">02</span><h3>소재 묶음 운영</h3><p>묶음마다 소재 3종을 동시에 걸고 4주 주기로 교체</p></li>
    <li><span class="n num">03</span><h3>전환 측정 정비</h3><p>구매, 장바구니, 상담 신청 3개 전환을 같은 기준으로 기록</p></li>
    <li><span class="n num">04</span><h3>주간 조정 회의</h3><p>매주 같은 요일에 지표 확인 후 다음 주 조정안 확정</p></li>
  </ol>
</div>

.dk-tn4 ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.dk-tn4 li{display:grid;grid-template-columns:104px 330px minmax(0,1fr);align-items:center;min-height:98px;border-bottom:1px solid var(--line)}
.dk-tn4 li:last-child{border-bottom-color:var(--line2)}
.dk-tn4 .n{font-size:var(--f-num);font-weight:700;color:var(--g2);line-height:1;letter-spacing:-.02em}
.dk-tn4 li.hot .n{color:var(--ac)}
.dk-tn4 h3{font-size:var(--f-lg);font-weight:700;margin:0;padding-right:32px;line-height:1.35;letter-spacing:-.015em}
.dk-tn4 p{margin:0;font-size:var(--f-body);color:var(--ink2)}