피라미드 3층과 층별 설명

위로 갈수록 좁아지는 위계를 보여줄 때. 목표 체계(최종 목표 → 중간 지표 → 활동), 고객 등급, 메시지 위계. 층 3개 고정, 층마다 이름·설명 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-pyra3">
  <div class="py"><div class="b hot"></div><div class="b"></div><div class="b"></div></div>
  <div class="rt"><div class="r hot"><span class="k">최종 목표</span><div><h3>매출 기여</h3><p>광고를 거친 주문의 매출 비중, 분기마다 확인</p></div><span class="m">광고 기여 매출 비중</span></div><div class="r"><span class="k">중간 지표</span><div><h3>전환 효율</h3><p>전환 건수와 전환 단가, 주 단위로 조정 기준에 사용</p></div><span class="m">전환 건수, 전환 단가</span></div><div class="r"><span class="k">활동 지표</span><div><h3>유입 품질</h3><p>클릭률, 체류 시간, 이탈률을 매일 점검</p></div><span class="m">클릭률, 이탈률</span></div></div>
</div>

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