가로 단계 5개(번호와 선)

순서가 있는 일을 왼쪽에서 오른쪽으로 5단계로 보여줄 때. 착수 절차, 캠페인 진행 순서, 검수 흐름. 단계는 정확히 5개(다른 개수는 가로단계3~6 중 맞는 조각 사용). 제목 12자 이내, 설명 2~3줄, 산출물 1줄. 값 바꾸는 법: li 하나가 한 단계. .w=시기, .n=번호, h3=단계 이름, p=설명, .out=산출물. 강조할 단계 하나의 li 에 class="hot". 단계 수를 바꾸려면 다른 개수 조각을 쓴다(격자 칸 수가 5으로 고정).

PresentationGO Line Design Alternating Process(https://www.presentationgo.com/?p=21145): 얇은 선과 번호만으로 단계를 잇는 방식. slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-hstep5">
  <ol>
    <li><span class="w">1주차</span><span class="n num">01</span><span class="rail"></span><h3>시장 조사</h3><p>검색량, 경쟁 광고, 구매 후기에서 수요가 몰리는 표현 수집</p><p class="out"><b>산출물</b>조사 요약 1부</p></li>
    <li><span class="w">2주차</span><span class="n num">02</span><span class="rail"></span><h3>전략 수립</h3><p>타깃과 메시지를 정하고 매체별 역할을 구분</p><p class="out"><b>산출물</b>전략안, 매체 배분표</p></li>
    <li><span class="w">3주차</span><span class="n num">03</span><span class="rail"></span><h3>소재 제작</h3><p>메시지별 소재를 묶음으로 제작하고 심의 확인</p><p class="out"><b>산출물</b>소재 묶음 4종</p></li>
    <li class="hot"><span class="w">4~8주차</span><span class="n num">04</span><span class="rail"></span><h3>집행</h3><p>묶음별 성과를 비교하며 예산을 주 단위로 이동</p><p class="out"><b>산출물</b>주간 리포트</p></li>
    <li><span class="w">9주차 이후</span><span class="n num">05</span><span class="rail"></span><h3>개선</h3><p>효과 낮은 묶음을 정리하고 새 가설로 교체</p><p class="out"><b>산출물</b>개선안, 다음 분기 계획</p></li>
  </ol>
</div>

.dk-hstep5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.dk-hstep5 li{position:relative}
.dk-hstep5 .w{display:block;font-size:var(--f-cap);color:var(--mu);margin-bottom:6px}
.dk-hstep5 .n{display:block;font-size:var(--f-num);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--g2)}
.dk-hstep5 .rail{display:block;position:relative;height:1px;background:var(--line2);margin:22px 0 24px}
.dk-hstep5 .rail::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--g4)}
.dk-hstep5 li:last-child .rail::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-hstep5 h3{font-size:var(--f-md);font-weight:700;line-height:1.35;margin:0 0 8px;padding-right:16px}
.dk-hstep5 p{margin:0;font-size:var(--f-sm);color:var(--ink2);padding-right:16px}
.dk-hstep5 .out{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);margin-right:16px;padding-right:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-hstep5 .out b{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-hstep5 .hot .n{color:var(--ac)}
.dk-hstep5 .hot .rail::before{background:var(--ac);box-shadow:0 0 0 5px var(--acw)}