셰브런 4단계와 단계별 상세 3행

단계 이름을 화살표 띠로 놓고, 그 아래에 단계마다 하는 일·산출물·기간을 행으로 맞춰 적을 때. 운영 절차 전체를 한 장에 요약. 단계 4개 고정, 상세 행 2~3개, 칸마다 1~2줄. 값 바꾸는 법: 띠 문구는 .band, 아래 칸은 .c(행 순서대로 4칸씩). 행 이름은 .lb. 강조할 단계 하나의 .band 와 그 열의 .c 에 class="hot". 행을 줄이려면 .lb 1개와 .c 4개를 함께 삭제.

PresentationGO Chevron Arrow Process(https://presentationgo.com/?p=153533). SlideModel 5 Step Arrow Concept(https://slidemodel.com/templates/5-step-arrow-concept-powerpoint-template/). 컨설팅 장표의 '띠 아래 행 정렬' 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-chev4">
  <div class="lb"></div><div class="band first"><span class="num">01</span>진단</div><div class="band"><span class="num">02</span>설계</div><div class="band hot"><span class="num">03</span>집행</div><div class="band"><span class="num">04</span>확장</div>
  <div class="lb">하는 일</div><div class="c">계정 구조, 전환 추적, 경쟁 광고 점검</div><div class="c">타깃과 메시지 확정, 매체별 역할 구분</div><div class="c hot">소재 묶음 운영, 주 단위 예산 이동</div><div class="c">성과 확인된 묶음을 새 매체로 확대</div>
  <div class="lb">산출물</div><div class="c">진단 보고서</div><div class="c">전략안, 매체 배분표</div><div class="c hot">주간 리포트</div><div class="c">분기 계획</div>
  <div class="lb">기간</div><div class="c">2주</div><div class="c">2주</div><div class="c hot">8주</div><div class="c">상시</div>
</div>

.dk-chev4{display:grid;grid-template-columns:96px repeat(4,minmax(0,1fr));align-items:stretch}
.dk-chev4 .band{height:56px;display:flex;align-items:center;gap:10px;padding-left:36px;margin-left:-10px;margin-bottom:12px;font-size:var(--f-md);font-weight:700;color:var(--ink);background:var(--soft);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%,20px 50%)}
.dk-chev4 .band.first{margin-left:0;padding-left:26px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%)}
.dk-chev4 .band .num{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-chev4 .band.hot{background:var(--ac);color:var(--card)}
.dk-chev4 .band.hot .num{color:var(--card)}
.dk-chev4 .lb{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding:20px 0;border-bottom:1px solid var(--line)}
.dk-chev4 .lb:first-child{border:0;padding:0}
.dk-chev4 .c{font-size:var(--f-body);color:var(--ink2);padding:20px 24px 20px 26px;border-bottom:1px solid var(--line)}
.dk-chev4 .c.hot{color:var(--ink);font-weight:600}
.dk-chev4 .lb:nth-last-child(5),.dk-chev4 .c:nth-last-child(-n+4){border-bottom:0}