레일 타임라인 5지점(현재 단계 강조)

진행 상황을 점과 선으로 보여주고 지금 어디에 있는지 한 점만 강조할 때. 착수 후 중간 보고, 일정 공유. 지점 4~6개, 지점마다 세부 항목 2~3개. 값 바꾸는 법: 지점 하나가 ol>li. 지난 지점은 class="done", 현재 지점 하나는 class="now", 앞으로의 지점은 class 없음. .w=날짜, .st=상태 문구, h3=이름, ul=세부 2~3개. 지점 수를 바꾸면 grid-template-columns 의 5 를 그 수로.

infoDiagram Block Process Indicator(https://www.infodiagram.com/slides/block-process-indicator-diagrams): 현재 단계만 색, 나머지는 회색. SlideModel Roadmap Timeline(https://slidemodel.com/templates/roadmap-timeline-powerpoint-template/). 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-rail5">
  <ol>
    <li class="done"><span class="w num">9월 2주</span><span class="rail"></span><span class="st">완료</span><h3>계약</h3><ul><li>범위 확정</li><li>계정 권한 인수</li><li>담당자 지정</li></ul></li>
    <li class="done"><span class="w num">9월 4주</span><span class="rail"></span><span class="st">완료</span><h3>진단 보고</h3><ul><li>추적 누락 4건 확인</li><li>낭비 구간 정리</li><li>개선 과제 9개 도출</li></ul></li>
    <li class="now"><span class="w num">10월 2주</span><span class="rail"></span><span class="st">진행 중</span><h3>구조 재편</h3><ul><li>캠페인 9개로 재분류</li><li>소재 묶음 교체 진행</li><li>전환 이벤트 재설정</li></ul></li>
    <li><span class="w num">11월 1주</span><span class="rail"></span><span class="st">예정</span><h3>1차 성과 점검</h3><ul><li>전환 단가 비교</li><li>예산 재배분안</li><li>소재 2차 교체 여부</li></ul></li>
    <li><span class="w num">12월 2주</span><span class="rail"></span><span class="st">예정</span><h3>분기 리뷰</h3><ul><li>목표 대비 결과</li><li>다음 분기 계획</li><li>매체 구성 재검토</li></ul></li>
  </ol>
</div>

.dk-rail5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.dk-rail5 ol>li{position:relative}
.dk-rail5 .w{display:block;font-size:var(--f-sm);color:var(--mu);margin-bottom:18px}
.dk-rail5 .rail{display:block;position:relative;height:2px;background:var(--line2);margin-bottom:26px}
.dk-rail5 .rail::before{content:"";position:absolute;left:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--g2);box-sizing:border-box}
.dk-rail5 .done .rail{background:var(--g4)}
.dk-rail5 .done .rail::before{background:var(--g4);border-color:var(--g4)}
.dk-rail5 .now .rail::before{width:20px;height:20px;top:-9px;left:-3px;background:var(--ac);border-color:var(--ac);box-shadow:0 0 0 6px var(--acw)}
.dk-rail5 .st{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-bottom:4px}
.dk-rail5 .now .st{color:var(--ac)}
.dk-rail5 h3{font-size:var(--f-xl);font-weight:700;margin:0 0 14px;line-height:1.35}
.dk-rail5 ul{list-style:none;margin:0 24px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.dk-rail5 ul li{font-size:var(--f-body);color:var(--ink2);padding:4px 0}
.dk-rail5 ol>li:not(.done):not(.now) h3{color:var(--ink2)}