큰 번호 목록 3개(세로)

순서나 우선순위가 있는 3가지를 글로만 전할 때. 글머리표 3줄을 대신함. 항목 3개 고정, 제목 14자 이내, 설명 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-tn3">
  <ol>
    <li class="hot"><span class="n num">01</span><h3>검색 지면 먼저 정리</h3><p>브랜드 검색 결과 첫 화면에서 자사 콘텐츠가 차지하는 칸을 늘리는 작업을 첫 달에 집중</p></li>
    <li><span class="n num">02</span><h3>후기 자산 확보</h3><p>구매 후기와 체험 콘텐츠를 한곳에 모아 광고 소재와 상세 화면에 함께 사용</p></li>
    <li><span class="n num">03</span><h3>전환 구간 점검</h3><p>광고 클릭 이후 장바구니까지의 이탈 지점을 주 단위로 확인하고 수정</p></li>
  </ol>
</div>

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