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

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

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

<div class="dk dk-hstep4">
  <ol>
    <li><span class="w">D-20</span><span class="n num">01</span><span class="rail"></span><h3>브리프 접수</h3><p>목표, 예산 범위, 금지 표현을 한 장으로 정리</p><p class="out"><b>산출물</b>브리프 확인서</p></li>
    <li><span class="w">D-14</span><span class="n num">02</span><span class="rail"></span><h3>기획안 확정</h3><p>메시지와 매체 조합을 2개 안으로 제시 후 1개 선택</p><p class="out"><b>산출물</b>기획안, 일정표</p></li>
    <li class="hot"><span class="w">D-7</span><span class="n num">03</span><span class="rail"></span><h3>제작과 검수</h3><p>소재 제작 후 표현 심의와 광고주 검수를 한 번에 진행</p><p class="out"><b>산출물</b>소재 시안, 검수 기록</p></li>
    <li><span class="w">D-day</span><span class="n num">04</span><span class="rail"></span><h3>집행과 보고</h3><p>집행 첫 주는 매일, 이후 주 단위로 수치 공유</p><p class="out"><b>산출물</b>일간 요약, 주간 리포트</p></li>
  </ol>
</div>

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