반폭 · 세로 흐름 4단(화살표)

위에서 아래로 차례대로 진행되는 절차(착수에서 보고까지)를 절반 칸에. 단계 3~4개. 단계 이름 4자 이내, 설명 14자 이내, 오른쪽에 시점 6자 이내. 강조색은 가장 긴 단계 또는 핵심 단계 하나. 값 바꾸는 법: 단계 하나 = li.st. i = 번호, b = 단계 이름, span = 설명, em = 시점. 단계 사이의 li.ar(화살표)는 그대로 둔다. 3단으로 줄이면 li.st 하나와 그 앞 li.ar 하나를 지운다. 강조 단계 하나에 class="st hot". 칸 높이에 맞춰 상자 높이가 늘어난다.

컨설팅 보고서의 세로 절차 도식(번호, 단계 이름, 한 줄 설명, 시점을 한 줄에 놓고 사이에 화살표)과 Slidesgo(https://slidesgo.com)의 process 도식 구성을 참고. 직접 제작.

<div class="dk dkh dkh-g-vflow"><div class="dk-card"><p class="dk-lb">집행 절차와 시점</p>
<ol>
<li class="st"><i class="num">01</i><b>진단</b><span>계정·랜딩 현황 점검</span><em>1주차</em></li>
<li class="ar"><svg width="14" height="10" viewBox="0 0 14 10"><path d="M2 2 L7 8 L12 2"/></svg></li>
<li class="st"><i class="num">02</i><b>설계</b><span>매체 구성과 목표 지표 확정</span><em>2주차</em></li>
<li class="ar"><svg width="14" height="10" viewBox="0 0 14 10"><path d="M2 2 L7 8 L12 2"/></svg></li>
<li class="st hot"><i class="num">03</i><b>집행</b><span>소재 교체 주기 2주 운영</span><em>3~10주차</em></li>
<li class="ar"><svg width="14" height="10" viewBox="0 0 14 10"><path d="M2 2 L7 8 L12 2"/></svg></li>
<li class="st"><i class="num">04</i><b>보고</b><span>전후 비교와 다음 분기 제안</span><em>11주차</em></li>
</ol>
<p class="nt">예시 문구 · 실제 내용으로 교체</p></div></div>

.dkh-g-vflow .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-vflow .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-vflow .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-vflow ol{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dkh-g-vflow .st{flex:1;min-height:38px;display:grid;grid-template-columns:24px 44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 14px;background:var(--soft);border-radius:var(--r-sm);font-size:var(--f-cap);color:var(--ink2);line-height:1.35}
.dkh-g-vflow .st i{font-style:normal;font-weight:700;color:var(--g3)}
.dkh-g-vflow .st b{font-size:var(--f-sm);font-weight:700}
.dkh-g-vflow .st em{font-style:normal;color:var(--mu);white-space:nowrap}
.dkh-g-vflow .st.hot{background:var(--acw)}
.dkh-g-vflow .st.hot i,.dkh-g-vflow .st.hot b{color:var(--ac)}
.dkh-g-vflow .st.hot span{color:var(--ink)}
.dkh-g-vflow .ar{flex:none;height:16px;display:flex;align-items:center;justify-content:center}
.dkh-g-vflow .ar svg{display:block}
.dkh-g-vflow .ar path{fill:none;stroke:var(--g3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}