계단 단계 3단과 바닥 띠(공통 조건)

오른쪽으로 갈수록 높아지는 3~4단 계단에 단마다 제목과 할 일을 적고, 계단 전체를 받치는 바닥 띠에 모든 단에 공통인 조건을 적는 도식. 성숙도별 순서, 단계별 확대 로드맵, 등급별 결정 라인에 사용. 단 3~4개, 단마다 2행(각 약 32자), 바닥 띠 1줄. 현재 단 1개 강조. 값 바꾸는 법: 단 이름(span.lv)과 2행(dt·dd), 바닥 띠 문구 교체. 현재 단에 class="hot"과 em(현재 단계) 추가. 4단이면 li 를 하나 더 넣고 grid-template-columns 를 repeat(4,…)로, 이때 dd 는 약 22자까지.

단계를 계단으로 올리고 아래에 공통 기반을 띠로 까는 구성은 SlideModel 의 staircase·maturity model 템플릿 묶음 https://slidemodel.com/templates/tag/maturity-model/ 과 컨설팅 보고서의 성숙도 모델 장 참고. 직접 제작.

<div class="dk dk-stair">
<ol>
<li><span class="lv">성숙도 낮음</span><dl><div><dt>먼저 할 일</dt><dd>식별자 표준, 동의 고지문, 매체 업로드 승인 절차</dd></div><div><dt>미룰 일</dt><dd>고객 데이터 플랫폼, 클린룸</dd></div></dl></li>
<li class="hot"><span class="lv">성숙도 중간</span><em>현재 단계</em><dl><div><dt>먼저 할 일</dt><dd>서버사이드 수집, 고객 데이터 플랫폼 단계 도입</dd></div><div><dt>미룰 일</dt><dd>클린룸</dd></div></dl></li>
<li><span class="lv">성숙도 높음</span><dl><div><dt>먼저 할 일</dt><dd>클린룸 타당성 검토, MMM과 컨텍스추얼 조합</dd></div><div><dt>미룰 일</dt><dd>없음</dd></div></dl></li>
</ol>
<p class="base"><b>공통</b>개인정보보호법 준수(동의 목적별 분리, 구체적 고지). 성숙도와 무관하게 미룰 수 없음</p>
</div>

.dk-stair ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:end}
.dk-stair li{position:relative;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding:20px 26px 18px;display:flex;flex-direction:column}
.dk-stair li:nth-child(1){min-height:220px}
.dk-stair li:nth-child(2){min-height:270px}
.dk-stair li:nth-child(3){min-height:320px}
.dk-stair li:nth-child(4){min-height:350px}
.dk-stair .lv{font-size:var(--f-xl);font-weight:700;line-height:1.3;color:var(--ink)}
.dk-stair em{position:absolute;right:22px;top:24px;font-style:normal;font-size:var(--f-cap);font-weight:700;color:var(--card);background:var(--ac);border-radius:var(--r-sm);padding:2px 10px}
.dk-stair dl{margin:auto 0 0;padding:0}
.dk-stair dl div{padding:11px 0;border-top:1px solid var(--line)}
.dk-stair dt{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-stair dd{margin:2px 0 0;font-size:var(--f-body);color:var(--ink);line-height:1.45}
.dk-stair .hot{background:var(--acw);border-color:var(--acw)}
.dk-stair .hot .lv{color:var(--ac)}
.dk-stair .hot dl div{border-top-color:var(--acm)}
.dk-stair .base{margin:0;padding:14px 26px;background:var(--g4);color:var(--card);border-radius:0 0 var(--r) var(--r);font-size:var(--f-body);line-height:1.4}
.dk-stair .base b{color:var(--card);font-weight:700;margin-right:14px}