반폭 · 단계 세로 목록 4단(번호, 제목, 한 줄)

진행 순서를 위에서 아래로 3~4단계 놓을 때. 제목 6자 이내, 설명 22자 이내(한 줄), 오른쪽 시점 4자 이내. 현재 단계 1개 강조. 값 바꾸는 법: .r 하나가 한 단계. .n=번호, .t=제목, .d=설명, .w=시점. 강조 단계 하나에 class="hot". 3~4단계(행 높이가 같아야 선이 이어지므로 설명은 모두 한 줄 또는 모두 두 줄).

직접 제작. 세로 스테퍼(vertical stepper) 방식 참고. 번호 원을 가는 선으로 잇고 현재 단계만 채움.

<div class="dk dkh dkh-t-step4"><div class="dk-card"><p class="dk-lb">착수 후 4주 진행 순서</p><div class="ls">
<div class="r hot"><span class="n">1</span><div><div class="t">진단</div><div class="d">계정 구조와 전환 측정 상태 점검</div></div><span class="w">1주차</span></div>
<div class="r"><span class="n">2</span><div><div class="t">설계</div><div class="d">캠페인 구조와 예산 배분안 확정</div></div><span class="w">2주차</span></div>
<div class="r"><span class="n">3</span><div><div class="t">집행</div><div class="d">신규 소재 투입, 일 단위 입찰 조정</div></div><span class="w">3주차</span></div>
<div class="r"><span class="n">4</span><div><div class="t">보고</div><div class="d">첫 달 성과 정리, 다음 달 계획 제시</div></div><span class="w">4주차</span></div>
</div></div></div>

.dkh-t-step4 .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-step4 .dk-lb{margin:0 0 10px}
.dkh-t-step4 .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-step4 .r{flex:1;position:relative;display:grid;grid-template-columns:28px 1fr auto;column-gap:14px;align-items:center;padding:4px 0}
.dkh-t-step4 .r::before{content:"";position:absolute;left:13px;top:50%;width:1px;height:100%;background:var(--line2)}
.dkh-t-step4 .r:last-child::before{display:none}
.dkh-t-step4 .n{position:relative;width:28px;height:28px;border-radius:14px;border:1px solid var(--line2);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:var(--f-cap);font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.dkh-t-step4 .r.hot .n{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dkh-t-step4 .t{font-size:var(--f-body);font-weight:600;line-height:1.4}
.dkh-t-step4 .d{font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dkh-t-step4 .w{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}