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

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

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

<div class="dk dk-hstep6">
  <ol>
    <li><span class="w">1주차</span><span class="n num">01</span><span class="rail"></span><h3>후보 선정</h3><p>카테고리와 반응률 기준으로 후보 40명 추림</p><p class="out"><b>산출물</b>후보 목록</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">2주차</span><span class="n num">03</span><span class="rail"></span><h3>가이드 전달</h3><p>필수 표기와 금지 표현을 한 장으로 안내</p><p class="out"><b>산출물</b>제작 가이드</p></li>
    <li class="hot"><span class="w">3주차</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">4주차</span><span class="n num">05</span><span class="rail"></span><h3>게시</h3><p>일정에 맞춰 순차 게시, 누락 건 당일 확인</p><p class="out"><b>산출물</b>게시 링크 목록</p></li>
    <li><span class="w">5주차</span><span class="n num">06</span><span class="rail"></span><h3>성과 정리</h3><p>조회, 저장, 유입 수치를 건별로 집계</p><p class="out"><b>산출물</b>결과 리포트</p></li>
  </ol>
</div>

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