세로 단계 4개(왼쪽 번호, 오른쪽 설명)

단계마다 설명이 길어 가로로 놓기 어려울 때. 왼쪽 번호를 세로선으로 잇고 오른쪽에 제목·설명·시기를 둔다. 단계 4~5개(5개면 행 높이가 줄어 설명 1줄 권장), 설명 1~2줄. 값 바꾸는 법: li 하나가 한 단계. .n=번호, h3=제목, p=설명, .mt=시기와 담당. 강조할 단계 하나에 class="hot". 5단계로 늘리면 li 의 min-height 를 70px 로.

PresentationGO Line Design Alternating Process(https://www.presentationgo.com/?p=21145): 얇은 선과 번호만으로 단계를 잇는 방식. Slidesgo 세로형 process 인포그래픽의 번호 레일 방식(https://slidesgo.com/theme/roadmap-infographics). 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-vstep">
  <ol>
    <li><span class="n num">1</span><div class="tx"><h3>추적 정비</h3><p>전환 이벤트와 유입 구분값을 다시 설정해 수치 기준을 통일</p></div><div class="mt"><b>1주차</b>담당: 데이터</div></li>
    <li class="hot"><span class="n num">2</span><div class="tx"><h3>캠페인 재편</h3><p>목적이 섞인 캠페인을 분리하고 검색어를 의도별로 재분류</p></div><div class="mt"><b>2~3주차</b>담당: 운영</div></li>
    <li><span class="n num">3</span><div class="tx"><h3>소재 교체</h3><p>메시지 3종을 묶음으로 제작해 기존 소재와 같은 조건에서 비교</p></div><div class="mt"><b>3~4주차</b>담당: 제작</div></li>
    <li><span class="n num">4</span><div class="tx"><h3>예산 이동</h3><p>전환 단가가 낮은 묶음으로 예산을 옮기고 주 단위로 재배분</p></div><div class="mt"><b>5주차 이후</b>담당: 운영</div></li>
  </ol>
</div>

.dk-vstep ol{list-style:none;margin:0;padding:0;position:relative}
.dk-vstep ol::before{content:"";position:absolute;left:22px;top:30px;bottom:30px;width:1px;background:var(--line2)}
.dk-vstep li{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 200px;align-items:center;min-height:86px}
.dk-vstep .n{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--f-md);font-weight:700;color:var(--ink2);background:var(--bg);border:1px solid var(--line2);position:relative}
.dk-vstep .tx,.dk-vstep .mt{align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line)}
.dk-vstep li:last-child .tx,.dk-vstep li:last-child .mt{border-bottom:0}
.dk-vstep h3{font-size:var(--f-lg);font-weight:700;margin:0 0 2px;line-height:1.35}
.dk-vstep p{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-vstep .mt{font-size:var(--f-sm);color:var(--mu);padding-left:32px}
.dk-vstep .mt b{font-size:var(--f-body);font-weight:600;color:var(--ink)}
.dk-vstep .hot .n{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-vstep .hot h3{color:var(--ac)}