셰브런 5단계와 한 줄 설명

5단계 흐름을 화살표 띠로 놓고 단계마다 설명과 수단을 짧게 붙일 때. 구매 단계, 캠페인 국면, 업무 절차. 단계 5개 고정, 단계명 4자 안팎, 설명 1~2줄. 값 바꾸는 법: .band=단계 이름, 아래 .c 의 .d=설명, .m=수단과 지표(이름표 + 값). 순서대로 5개씩. 강조할 단계 하나의 .band 와 같은 순서의 .c 에 class="hot".

PresentationGO Chevron Arrow Process(https://presentationgo.com/?p=153533). SlideModel 5 Step Arrow Concept(https://slidemodel.com/templates/5-step-arrow-concept-powerpoint-template/). infoDiagram Block Process Indicator(https://www.infodiagram.com/slides/block-process-indicator-diagrams): 현재 단계만 색, 나머지는 회색. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-chev5">
  <div class="bands"><div class="band first"><span class="num">01</span>인지</div><div class="band"><span class="num">02</span>관심</div><div class="band"><span class="num">03</span>비교</div><div class="band hot"><span class="num">04</span>구매</div><div class="band"><span class="num">05</span>재구매</div></div>
  <div class="cols"><div class="c"><p class="d">브랜드를 처음 보는 접점</p><p class="m"><b>주요 수단</b>영상, 디스플레이</p><p class="m"><b>보는 지표</b>도달 수, 조회율</p></div><div class="c"><p class="d">정보를 찾아보는 구간</p><p class="m"><b>주요 수단</b>검색, 콘텐츠</p><p class="m"><b>보는 지표</b>클릭률, 검색량</p></div><div class="c"><p class="d">경쟁 제품과 견주는 구간</p><p class="m"><b>주요 수단</b>쇼핑검색, 후기</p><p class="m"><b>보는 지표</b>상세 조회 수</p></div><div class="c hot"><p class="d">결제 직전 이탈이 큰 구간</p><p class="m"><b>주요 수단</b>리타기팅, 혜택 안내</p><p class="m"><b>보는 지표</b>전환 건수, 전환 단가</p></div><div class="c"><p class="d">두 번째 주문을 만드는 구간</p><p class="m"><b>주요 수단</b>메시지, 멤버십</p><p class="m"><b>보는 지표</b>재구매율</p></div></div>
</div>

.dk-chev5 .bands,.dk-chev5 .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.dk-chev5 .band{height:64px;display:flex;align-items:center;gap:10px;padding-left:38px;margin-left:-10px;font-size:var(--f-lg);font-weight:700;background:var(--soft);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
.dk-chev5 .band.first{margin-left:0;padding-left:24px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.dk-chev5 .band .num{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-chev5 .band.hot{background:var(--ac);color:var(--card)}
.dk-chev5 .band.hot .num{color:var(--card)}
.dk-chev5 .cols{margin-top:28px}
.dk-chev5 .c{padding:0 24px;border-left:1px solid var(--line)}
.dk-chev5 .c:first-child{border-left:0}
.dk-chev5 .d{margin:0;font-size:var(--f-body);color:var(--ink);min-height:50px;font-weight:600}
.dk-chev5 .m{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--f-body);color:var(--ink)}
.dk-chev5 .m b{display:block;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-bottom:2px}
.dk-chev5 .c.hot .m b{color:var(--ac)}