월 단위 로드맵 표

3~6개월 운영 계획을 영역별 가로 띠로 표시. 띠 안에 할 일을 적고 핵심 띠 하나만 강조. 영역 3~5개, 월 4~6개, 띠는 영역당 1~3개. 값 바꾸는 법: 띠 위치는 style="grid-column:시작월/끝월+1". 띠 문구는 1개월짜리는 6자 안팎으로 짧게. 머리줄의 단계 묶음(i)도 같은 방식. 월 수를 바꾸려면 CSS repeat(6)을 수정. 강조 띠 하나에 class="hot".

SlideModel 로드맵 템플릿과 infoDiagram 일정 표의 영역별 가로 띠 구성 https://slidemodel.com / infoDiagram Project Plan Gantt Chart Table https://www.infodiagram.com/pl/slides/project-plan-gantt-chart-table (표 왼쪽에 업무, 오른쪽에 주 단위 막대, 상태 신호). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-road"><div class="dk-card">
<div class="row hd"><span class="lbl">영역</span><div class="trk"><i style="grid-column:1/2">준비</i><i style="grid-column:2/5">확장</i><i style="grid-column:5/7">안정</i><span>1월</span><span>2월</span><span>3월</span><span>4월</span><span>5월</span><span>6월</span></div></div>
<div class="row"><span class="lbl">검색</span><div class="trk"><b class="" style="grid-column:1/2">계정 정비</b><b class="hot" style="grid-column:2/5">키워드 확장과 입찰 조정</b><b class="" style="grid-column:5/7">효율 구간 유지</b></div></div>
<div class="row"><span class="lbl">콘텐츠</span><div class="trk"><b class="" style="grid-column:1/2">주제 설계</b><b class="" style="grid-column:2/7">블로그 월 8건 발행</b></div></div>
<div class="row"><span class="lbl">영상</span><div class="trk"><b class="" style="grid-column:2/4">기획과 촬영</b><b class="" style="grid-column:4/7">숏폼 월 4편 발행</b></div></div>
<div class="row"><span class="lbl">측정</span><div class="trk"><b class="" style="grid-column:1/2">추적 설정</b><b class="" style="grid-column:2/7">주간 요약 보고</b></div></div>
</div></div>

.dk-road .dk-card{padding:18px 24px 10px}
.dk-road .row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;column-gap:16px;border-bottom:1px solid var(--line)}
.dk-road .row:last-child{border-bottom:0}
.dk-road .row.hd{border-bottom:1px solid var(--line2);align-items:end}
.dk-road .row.hd .lbl{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-bottom:10px}
.dk-road .lbl{font-size:var(--f-md);font-weight:700;color:var(--ink)}
.dk-road .trk{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px;padding:14px 0}
.dk-road .row.hd .trk{padding:0}
.dk-road .row.hd i{font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--ink);text-align:center;background:var(--soft);border-radius:var(--r-sm);padding:2px 0;margin-bottom:6px}
.dk-road .row.hd .trk span{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:center;padding-bottom:10px;font-variant-numeric:tabular-nums}
.dk-road .trk b{display:block;font-size:var(--f-sm);font-weight:600;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:10px 12px;line-height:1.35}
.dk-road .trk b.hot{background:var(--ac);color:var(--card)}