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

노출에서 구매까지 단계마다 얼마나 줄어드는지, 어느 구간이 문제인지 보여줄 때. 띠는 5개 고정. 띠 안에는 단계 이름과 수치, 오른쪽에는 전 단계 대비 비율과 해석 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-funnel5">
  <div class="fn"><div class="b" style="clip-path:polygon(0.0% 0,100.0% 0,93.2% 100%,6.8% 100%)"><span>노출</span><b class="num">지수 100</b></div><div class="b" style="clip-path:polygon(6.8% 0,93.2% 0,86.4% 100%,13.6% 100%)"><span>클릭</span><b class="num">지수 21</b></div><div class="b" style="clip-path:polygon(13.6% 0,86.4% 0,79.6% 100%,20.4% 100%)"><span>상세 조회</span><b class="num">지수 12</b></div><div class="b hot" style="clip-path:polygon(20.4% 0,79.6% 0,72.8% 100%,27.2% 100%)"><span>상담 신청</span><b class="num">지수 1.4</b></div><div class="b" style="clip-path:polygon(27.2% 0,72.8% 0,66.0% 100%,34.0% 100%)"><span>계약</span><b class="num">지수 0.4</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">21%</b><div><h3>소재 반응</h3><p>메시지 묶음 3종 중 1종이 절반 차지</p></div></div><div class="r"><b class="num">57%</b><div><h3>랜딩 이탈</h3><p>첫 화면 로딩 지연으로 43% 이탈</p></div></div><div class="r hot"><b class="num">12%</b><div><h3>신청 전환</h3><p>입력 항목 9개, 줄이면 개선 가능</p></div></div><div class="r"><b class="num">29%</b><div><h3>상담 후 계약</h3><p>응대 속도에 따라 편차 큼</p></div></div></div>
</div>

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