반폭 · 일정 세로 타임라인(4~5점)

계약부터 보고까지 주요 시점을 날짜와 함께 4~5개 놓을 때. 날짜 6자 이내, 제목 10자 이내, 설명 18자 이내. 강조 시점 1개. 값 바꾸는 법: .r 하나가 한 시점. .dt=날짜, .t=제목, .d=설명. 강조 시점 하나에 class="hot". 4~5개. 날짜가 6자를 넘으면 CSS 의 60px 와 선 위치(left:76px = 날짜 폭 + 16)를 같이 늘린다.

직접 제작. 세로 마일스톤 타임라인 방식 참고. 날짜를 왼쪽 열에 고정하고 점과 가는 선으로만 시간 흐름 표시.

<div class="dk dkh dkh-t-tl"><div class="dk-card"><p class="dk-lb">집행 일정 주요 시점</p><div class="ls">
<div class="r"><span class="dt">10월 2주</span><span class="o"></span><div><span class="t">계약과 계정 인수</span><span class="d">접근 권한, 과거 자료 수령</span></div></div>
<div class="r"><span class="dt">10월 4주</span><span class="o"></span><div><span class="t">측정 환경 정비</span><span class="d">태그 점검, 전환 정의 합의</span></div></div>
<div class="r"><span class="dt">11월 1주</span><span class="o"></span><div><span class="t">집행 시작</span><span class="d">검색과 디스플레이 동시 개시</span></div></div>
<div class="r hot"><span class="dt">11월 4주</span><span class="o"></span><div><span class="t">첫 월간 보고</span><span class="d">목표 대비 달성률 점검</span></div></div>
<div class="r"><span class="dt">12월 3주</span><span class="o"></span><div><span class="t">성수기 증액 판단</span><span class="d">예산 조정안 협의</span></div></div>
</div></div></div>

.dkh-t-tl .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-tl .dk-lb{margin:0 0 10px}
.dkh-t-tl .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-tl .r{flex:1;position:relative;display:grid;grid-template-columns:60px 9px 1fr;column-gap:12px;align-items:center}
.dkh-t-tl .r::before{content:"";position:absolute;left:76px;top:50%;width:1px;height:100%;background:var(--line2)}
.dkh-t-tl .r:last-child::before{display:none}
.dkh-t-tl .dt{font-size:var(--f-cap);color:var(--mu);white-space:nowrap;font-variant-numeric:tabular-nums}
.dkh-t-tl .o{position:relative;width:9px;height:9px;border-radius:5px;background:var(--g2)}
.dkh-t-tl .r.hot .o{background:var(--ac)}
.dkh-t-tl .r.hot .dt{color:var(--ink);font-weight:600}
.dkh-t-tl .t{display:block;font-size:var(--f-sm);font-weight:600;line-height:1.45}
.dkh-t-tl .d{display:block;font-size:var(--f-cap);color:var(--mu);line-height:1.45}