두 줄로 꺾이는 8단계

단계가 8개라 한 줄에 놓으면 글이 좁아질 때. 윗줄 4개, 아랫줄 4개로 나누고 번호와 선으로 순서를 잇는다. 단계 8개 고정, 제목 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-tworow8">
  <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=""><div class="top"><span class="n num">05</span><span class="ln"></span></div><h3>제작</h3><p>소재 묶음 제작과 심의 확인</p></li>
    <li class="hot"><div class="top"><span class="n num">06</span><span class="ln"></span></div><h3>검수</h3><p>광고주 확인 후 수정 1회 반영</p></li>
    <li class=""><div class="top"><span class="n num">07</span><span class="ln"></span></div><h3>집행</h3><p>첫 주 매일 점검, 이후 주 단위 조정</p></li>
    <li class="end"><div class="top"><span class="n num">08</span><span class="ln"></span></div><h3>리포트</h3><p>월간 결과와 다음 달 조정안 제출</p></li>
  </ol>
</div>

.dk-tworow8 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:44px}
.dk-tworow8 .top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dk-tworow8 .n{font-size:var(--f-h);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--g2)}
.dk-tworow8 .ln{flex:1;height:1px;background:var(--line2);position:relative;margin-right:14px}
.dk-tworow8 .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-tworow8 .end .ln{visibility:hidden}
.dk-tworow8 h3{font-size:var(--f-lg);font-weight:700;margin:0 0 6px;line-height:1.35}
.dk-tworow8 p{margin:0;font-size:var(--f-sm);color:var(--ink2);padding-right:32px}
.dk-tworow8 .hot .n{color:var(--ac)}
.dk-tworow8 .hot h3{color:var(--ac)}