깔때기 4단(단계별 전환율)

노출에서 구매까지 단계마다 얼마나 줄어드는지, 어느 구간이 문제인지 보여줄 때. 띠는 4개 고정. 띠 안에는 단계 이름과 수치, 오른쪽에는 전 단계 대비 비율과 해석 1줄. 값 바꾸는 법: .b=띠(이름과 수치), 오른쪽 .r=같은 순서의 비율·제목·해석. 띠의 기울기는 고정(값에 비례하지 않음)이므로 실제 수치는 글로 적는다. 강조할 구간 하나의 .b 와 .r 에 class="hot". 띠 수를 바꾸려면 다른 단 수 조각 사용.

SlideModel Timeline Funnel Concept(https://slidemodel.com/templates/timeline-funnel-concept-powerpoint-template/). SlideModel Innovation Process Funnel(https://slidemodel.com/templates/innovation-process-funnel-diagram-powerpoint-template/). 띠 옆에 해석을 같은 높이로 맞춰 적는 컨설팅 장표 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-funnel4">
  <div class="fn"><div class="b" style="clip-path:polygon(0.0% 0,100.0% 0,91.5% 100%,8.5% 100%)"><span>광고 노출</span><b class="num">지수 100</b></div><div class="b" style="clip-path:polygon(8.5% 0,91.5% 0,83.0% 100%,17.0% 100%)"><span>방문</span><b class="num">지수 18</b></div><div class="b" style="clip-path:polygon(17.0% 0,83.0% 0,74.5% 100%,25.5% 100%)"><span>장바구니</span><b class="num">지수 3.1</b></div><div class="b hot" style="clip-path:polygon(25.5% 0,74.5% 0,66.0% 100%,34.0% 100%)"><span>구매</span><b class="num">지수 0.6</b></div></div>
  <div class="rt"><div class="r"><b class="num">기준</b><div><h3>전체 노출</h3><p>검색, 디스플레이, 영상 합산</p></div></div><div class="r"><b class="num">18%</b><div><h3>클릭 후 방문</h3><p>업종 평균 수준, 소재 교체로 개선 여지</p></div></div><div class="r"><b class="num">17%</b><div><h3>상세페이지 설득</h3><p>혜택 안내가 화면 아래에 있어 이탈 발생</p></div></div><div class="r hot"><b class="num">19%</b><div><h3>결제 완료</h3><p>장바구니 이탈 81%, 가장 먼저 손볼 구간</p></div></div></div>
</div>

.dk-funnel4{display:grid;grid-template-columns:500px minmax(0,1fr);gap:56px;align-items:start}
.dk-funnel4 .fn,.dk-funnel4 .rt{display:flex;flex-direction:column;gap:6px}
.dk-funnel4 .b{height:78px;background:var(--g1);display:flex;align-items:center;justify-content:center;gap:10px;font-size:var(--f-body);color:var(--ink2)}
.dk-funnel4 .b b{font-size:var(--f-lg);font-weight:700}
.dk-funnel4 .b.hot{background:var(--ac);color:var(--card)}
.dk-funnel4 .b.hot b{color:var(--card)}
.dk-funnel4 .r{height:78px;display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line)}
.dk-funnel4 .r:last-child{border-bottom:0}
.dk-funnel4 .r>b{font-size:var(--f-xl);font-weight:700;color:var(--g3)}
.dk-funnel4 .r h3{font-size:var(--f-md);font-weight:700;margin:0;line-height:1.35}
.dk-funnel4 .r p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-funnel4 .r.hot>b,.dk-funnel4 .r.hot h3{color:var(--ac)}