피라미드 4층과 층별 설명

위로 갈수록 좁아지는 위계를 보여줄 때. 목표 체계(최종 목표 → 중간 지표 → 활동), 고객 등급, 메시지 위계. 층 4개 고정, 층마다 이름·설명 1~2줄·지표 1개. 값 바꾸는 법: .py 의 .b=층(위에서 아래), 오른쪽 .r=같은 순서의 설명(.k=층 이름표, h3=제목, p=설명, .m=지표). 강조할 층 하나의 .b 와 .r 에 class="hot". 층 수를 바꾸려면 다른 층 수 조각 사용.

Deckary MBB 장표 유형 정리(https://deckary.com/blog/consulting-slide-templates). Barbara Minto 피라미드 원칙을 장표 도형으로 옮긴 컨설팅 관행: 도형 안에 글을 넣지 않고 같은 높이의 행으로 옆에 설명. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-pyra4">
  <div class="py"><div class="b"></div><div class="b"></div><div class="b hot"></div><div class="b"></div></div>
  <div class="rt"><div class="r"><span class="k">1층</span><div><h3>핵심 고객</h3><p>연 4회 이상 구매, 추천과 후기의 원천</p></div><span class="m">전체의 5%</span></div><div class="r"><span class="k">2층</span><div><h3>재구매 고객</h3><p>2~3회 구매, 정기 혜택으로 유지</p></div><span class="m">전체의 15%</span></div><div class="r hot"><span class="k">3층</span><div><h3>첫 구매 고객</h3><p>1회 구매, 30일 안에 두 번째 주문 유도</p></div><span class="m">전체의 30%</span></div><div class="r"><span class="k">4층</span><div><h3>관심 고객</h3><p>방문과 장바구니 이력만 있음, 리타기팅 대상</p></div><span class="m">전체의 50%</span></div></div>
</div>

.dk-pyra4{display:grid;grid-template-columns:400px minmax(0,1fr);gap:44px;align-items:start}
.dk-pyra4 .py{height:344px;display:flex;flex-direction:column;clip-path:polygon(50% 0,100% 100%,0 100%)}
.dk-pyra4 .b{flex:1;background:var(--g1);border-top:4px solid var(--bg)}
.dk-pyra4 .b:first-child{border-top:0}
.dk-pyra4 .b.hot{background:var(--ac)}
.dk-pyra4 .r{height:86px;display:grid;grid-template-columns:72px minmax(0,1fr) 190px;align-items:center;border-top:1px solid var(--line)}
.dk-pyra4 .r:first-child{border-top:0}
.dk-pyra4 .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-pyra4 h3{font-size:var(--f-lg);font-weight:700;margin:0;line-height:1.35}
.dk-pyra4 p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-pyra4 .m{font-size:var(--f-sm);color:var(--mu);padding-left:24px}
.dk-pyra4 .r.hot h3,.dk-pyra4 .r.hot .k{color:var(--ac)}