두 줄로 꺾이는 6단계

단계가 6개라 한 줄에 놓으면 글이 좁아질 때. 윗줄 3개, 아랫줄 3개로 나누고 번호와 선으로 순서를 잇는다. 단계 6개 고정, 제목 10자 이내, 설명 2줄. 값 바꾸는 법: li 하나가 한 단계, 왼쪽 위에서 오른쪽으로 읽고 다음 줄로 이어진다. .n=번호, h3=제목, p=설명. 강조할 단계 하나에 class="hot", 마지막 단계에는 class="end"(선 없음).

PresentationGO Line Design Alternating Process(https://www.presentationgo.com/?p=21145): 얇은 선과 번호만으로 단계를 잇는 방식. SlideModel 다단계 process 템플릿의 2줄 배치(https://slidemodel.com/templates/roadmap-timeline-powerpoint-template/). 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tworow6">
  <ol>
    <li class=""><div class="top"><span class="n num">01</span><span class="ln"></span></div><h3>목표 합의</h3><p>매출, 전환, 인지 중 무엇을 볼지 한 가지 기준으로 정리</p></li>
    <li class=""><div class="top"><span class="n num">02</span><span class="ln"></span></div><h3>현황 진단</h3><p>계정과 추적 설정을 점검해 수치의 신뢰 범위 확인</p></li>
    <li class=""><div class="top"><span class="n num">03</span><span class="ln"></span></div><h3>전략 설계</h3><p>타깃, 메시지, 매체 역할을 한 장의 구조로 확정</p></li>
    <li class=""><div class="top"><span class="n num">04</span><span class="ln"></span></div><h3>소재 제작</h3><p>메시지별 묶음을 만들어 같은 조건에서 비교 준비</p></li>
    <li class="hot"><div class="top"><span class="n num">05</span><span class="ln"></span></div><h3>집행과 조정</h3><p>주 단위로 묶음 성과를 비교해 예산 이동</p></li>
    <li class="end"><div class="top"><span class="n num">06</span><span class="ln"></span></div><h3>결과 보고</h3><p>목표 대비 결과와 다음 달 조정안을 함께 제출</p></li>
  </ol>
</div>

.dk-tworow6 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px}
.dk-tworow6 .top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dk-tworow6 .n{font-size:var(--f-h);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--g2)}
.dk-tworow6 .ln{flex:1;height:1px;background:var(--line2);position:relative;margin-right:14px}
.dk-tworow6 .ln::after{content:"";position:absolute;right:1px;top:50%;width:7px;height:7px;border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:translateY(-50%) rotate(45deg)}
.dk-tworow6 .end .ln{visibility:hidden}
.dk-tworow6 h3{font-size:var(--f-lg);font-weight:700;margin:0 0 6px;line-height:1.35}
.dk-tworow6 p{margin:0;font-size:var(--f-body);color:var(--ink2);padding-right:32px}
.dk-tworow6 .hot .n{color:var(--ac)}
.dk-tworow6 .hot h3{color:var(--ac)}