분기 로드맵(4분기 × 3영역)

1년 계획을 분기별로, 영역(매체·콘텐츠·측정 등)별로 나눠 보여줄 때. 연간 운영 제안. 분기 4개 고정, 영역 2~3개, 칸마다 1~2줄, 맨 아래 목표 행 1개. 값 바꾸는 법: .q=분기 머리(이름과 한 줄 주제), 아래 .c 는 행 순서대로 4칸씩. 행 이름은 .lb. 마지막 행(.k)은 분기별 목표. 강조할 분기 하나의 .q 와 그 열의 목표 칸에 class="hot".

Slidesgo Roadmap Infographics(https://slidesgo.com/theme/roadmap-infographics). SlideModel Roadmap Timeline(https://slidemodel.com/templates/roadmap-timeline-powerpoint-template/). 컨설팅 보고서의 분기별 과제 표를 선과 점으로 풀어낸 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-qroad">
  <div class="lb"></div><div class="q"><span class="rail"></span><b>1분기</b><span class="s">기반 정비</span></div><div class="q hot"><span class="rail"></span><b>2분기</b><span class="s">성과 구간 확대</span></div><div class="q"><span class="rail"></span><b>3분기</b><span class="s">채널 추가</span></div><div class="q"><span class="rail"></span><b>4분기</b><span class="s">연간 최적화</span></div>
  <div class="lb">매체</div><div class="c">검색 광고 재편, 추적 정비</div><div class="c">쇼핑검색과 리타기팅 확대</div><div class="c">영상, 디스플레이 시험 집행</div><div class="c">성과 낮은 매체 정리</div>
  <div class="lb">콘텐츠</div><div class="c">핵심 메시지 3종 확정</div><div class="c">후기 소재 월 8건</div><div class="c">인플루언서 협업 2회</div><div class="c">연말 기획전 소재 묶음</div>
  <div class="lb">측정</div><div class="c">전환 이벤트 재설정</div><div class="c">묶음별 전환 단가 비교</div><div class="c">신규와 재구매 구분 집계</div><div class="c">연간 기여도 분석</div>
  <div class="lb k">목표</div><div class="c k">기준선 확보</div><div class="c k hot">전환 건수 지수 120</div><div class="c k">신규 고객 비중 40%</div><div class="c k">재구매율 25%</div>
</div>

.dk-qroad{display:grid;grid-template-columns:88px repeat(4,minmax(0,1fr))}
.dk-qroad .q{position:relative;padding:0 0 16px 0}
.dk-qroad .rail{display:block;position:relative;height:1px;background:var(--line2);margin:6px 0 18px}
.dk-qroad .rail::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--g3)}
.dk-qroad .q b{font-size:var(--f-xl);font-weight:700;line-height:1.3;display:block}
.dk-qroad .q .s{font-size:var(--f-sm);color:var(--mu)}
.dk-qroad .q.hot b{color:var(--ac)}
.dk-qroad .q.hot .rail::before{background:var(--ac);box-shadow:0 0 0 5px var(--acw)}
.dk-qroad .lb{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding:16px 0;border-top:1px solid var(--line)}
.dk-qroad .lb:first-child{border:0}
.dk-qroad .c{font-size:var(--f-body);color:var(--ink2);padding:15px 24px 15px 0;border-top:1px solid var(--line)}
.dk-qroad .lb.k,.dk-qroad .c.k{border-top:1px solid var(--line2)}
.dk-qroad .c.k{font-weight:700;color:var(--ink);font-size:var(--f-md)}
.dk-qroad .c.k.hot{color:var(--ac)}