반폭 · 계단형 단계 4단

단계가 올라갈수록 수준이 높아지는 로드맵(정비, 확보, 개선, 확장)을 절반 칸에. 단계 4개(3개도 가능). 단계 이름 5자 이내, 설명 14자 이내, 아래에 시기 7자 이내. 강조색은 도달점인 마지막 단계 하나. 값 바꾸는 법: 기둥 하나 = li. i = 번호, b = 단계 이름, span = 설명, em = 시기. 기둥 높이는 class s1~s4 의 grid-row-start 로 정한다(12칸 중 시작 칸. s1 = 6, s2 = 4, s3 = 2, s4 = 1). 3단으로 줄이면 li 하나를 지우고 CSS 의 repeat(4, …) 를 repeat(3, …) 로 바꾼 뒤 시작 칸을 6, 3, 1 로. 강조 기둥 하나에 class="hot".

로드맵 장표의 계단형 단계 도식(오른쪽으로 갈수록 높아지는 기둥, 기둥 위쪽에 단계 이름)과 SlideModel(https://slidemodel.com)의 staircase 도식 구성을 참고. 직접 제작.

<div class="dk dkh dkh-g-steps"><div class="dk-card"><p class="dk-lb">6개월 운영 단계</p>
<ol>
<li class="s1"><i class="num">01</i><b>기반 정비</b><span>추적 설치와 계정 구조 정리</span><em>1개월 차</em></li>
<li class="s2"><i class="num">02</i><b>유입 확보</b><span>검색·SNS 광고 집행 시작</span><em>2개월 차</em></li>
<li class="s3"><i class="num">03</i><b>전환 개선</b><span>랜딩 실험과 후기 축적</span><em>3~4개월 차</em></li>
<li class="s4 hot"><i class="num">04</i><b>확장</b><span>성과 좋은 매체에 비중 이동</span><em>5개월 차 이후</em></li>
</ol>
<p class="nt">예시 문구 · 실제 내용으로 교체</p></div></div>

.dkh-g-steps .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-steps .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-steps .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-steps ol{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));column-gap:6px}
.dkh-g-steps li{grid-row-end:13;min-height:0;display:flex;flex-direction:column;padding:10px 9px 9px;background:var(--soft);border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:var(--f-cap);line-height:1.4;color:var(--ink2)}
.dkh-g-steps .s1{grid-row-start:6}
.dkh-g-steps .s2{grid-row-start:4}
.dkh-g-steps .s3{grid-row-start:2}
.dkh-g-steps .s4{grid-row-start:1}
.dkh-g-steps li i{font-style:normal;font-weight:700;color:var(--g3)}
.dkh-g-steps li b{font-size:var(--f-sm);font-weight:700;margin:1px 0 4px}
.dkh-g-steps li em{font-style:normal;color:var(--mu);margin-top:auto;padding-top:4px}
.dkh-g-steps li.hot{background:var(--acw)}
.dkh-g-steps li.hot i,.dkh-g-steps li.hot b{color:var(--ac)}