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

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

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

<div class="dk dk-hstep3">
  <ol>
    <li><span class="w">1~2주차</span><span class="n num">01</span><span class="rail"></span><h3>계정 진단</h3><p>전환 추적 누락과 예산이 새는 캠페인을 항목별로 점검</p><p class="out"><b>산출물</b>진단 보고서, 낭비 구간 목록</p></li>
    <li class="hot"><span class="w">3~4주차</span><span class="n num">02</span><span class="rail"></span><h3>구조 재설계</h3><p>캠페인을 목적별로 다시 묶고 소재를 묶음 단위로 교체</p><p class="out"><b>산출물</b>캠페인 구조안, 소재 12종</p></li>
    <li><span class="w">5주차 이후</span><span class="n num">03</span><span class="rail"></span><h3>성과 구간 확대</h3><p>전환이 확인된 묶음에 예산을 옮기고 주 단위로 조정</p><p class="out"><b>산출물</b>주간 조정 기록, 월간 리포트</p></li>
  </ol>
</div>

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