띠 · 미니 단계 4점(가로)

본문 조각 아래에 전체 흐름의 단계 4개와 지금 위치를 작게 둘 때. 시점 5자 이내, 단계 이름 12자 이내. 지금 단계 1개 강조. 값 바꾸는 법: li 하나가 단계 1개. b=시점, span=단계 이름. 끝난 단계는 class="done", 지금 단계 하나에 class="now", 남은 단계는 class 없음. 4개 고정.

직접 제작. 프로젝트 일정 장표의 마일스톤 점선(timeline dots) 표기를 참고.

<div class="dk dks dks-steps"><ol><li class="done"><i></i><b>1주차</b><span>계정 진단과 추적 점검</span></li><li class="now"><i></i><b>2~3주차</b><span>캠페인 구조 개편</span></li><li><i></i><b>4~8주차</b><span>소재 시험과 입찰 조정</span></li><li><i></i><b>9~12주차</b><span>성과 확정과 확대 편성</span></li></ol></div>

.dks-steps{background:var(--soft);border-radius:var(--r-sm);padding:16px 24px 14px}
.dks-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.dks-steps li{position:relative;padding:18px 16px 0 0;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.dks-steps li::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line2)}
.dks-steps li:last-child::before{right:auto;width:11px}
.dks-steps li i{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--g2)}
.dks-steps li.done i{background:var(--g4);border-color:var(--g4)}
.dks-steps li.now i{background:var(--ac);border-color:var(--ac)}
.dks-steps li b{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dks-steps li.now b{color:var(--ac)}
.dks-steps li span{font-size:var(--f-sm);color:var(--ink2)}
.dks-steps li.now span{color:var(--ink);font-weight:600}