반폭 · 피라미드 3층

아래가 받쳐야 위가 성립하는 층 구조(인지, 고려, 전환 / 기반, 운영, 성과)를 절반 칸에. 층 3개 고정. 층 이름 4자 이내, 설명 12자 이내, 오른쪽 끝에 대표 수치 1개. 강조색은 말하려는 층 하나(예시는 꼭대기). 값 바꾸는 법: 층은 위에서 아래로 polygon 3개(좌표 고정). 층마다 굵은 text(층 이름), 그 아래 text(설명), 오른쪽 끝 text(대표 수치)를 교체. 강조할 층의 polygon class 를 "f-a", 이름 글자 class 를 "va t15" 로 바꾸고 나머지 층은 위부터 "f-g3", "f-g1". 도형 안 글자 두 개(중간 단계, 넓은 바탕)는 층의 성격을 적거나 지운다.

브랜드 자산 피라미드(Keller CBBE)와 컨설팅 보고서의 층 구조 도식(층 옆에 이름과 설명을 가로선으로 연결)을 참고. 직접 제작.

<div class="dk dkh dkh-g-pyra"><div class="dk-card"><p class="dk-lb">성과 지표 3층 구조</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 236" preserveAspectRatio="xMidYMid meet" role="img">
<polygon points="96,6 96,6 125.6,78 66.4,78" class="f-a"/><line x1="120.1" y1="50" x2="206" y2="50" class="gr"/><text x="214" y="47" class="va t15">전환</text><text x="214" y="66" class="k">상담 신청·구매 건수</text><text x="400" y="47" text-anchor="end" class="va t15">97건</text>
<polygon points="64,84 128,84 156.8,154 35.2,154" class="f-g3"/><line x1="148.4" y1="119" x2="206" y2="119" class="gr"/><text x="214" y="116" class="v t15">고려</text><text x="214" y="135" class="k">검색량·후기 열람 수</text><text x="400" y="116" text-anchor="end" class="v t15">3,840회</text>
<polygon points="32.8,160 159.3,160 188,230 4,230" class="f-g1"/><line x1="179.6" y1="195" x2="206" y2="195" class="gr"/><text x="214" y="192" class="v t15">인지</text><text x="214" y="211" class="k">노출·도달·영상 조회</text><text x="400" y="192" text-anchor="end" class="v t15">12만 회</text>
<text x="96" y="204" text-anchor="middle" class="k">넓은 바탕</text><text x="96" y="128" text-anchor="middle" class="on">중간 단계</text>
</svg></div>
<p class="nt">예시 문구 · 실제 내용으로 교체</p></div></div>

.dkh-g-pyra .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-pyra .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-pyra .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-pyra .cv{flex:1;min-height:0;position:relative}
.dkh-g-pyra .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-pyra svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-pyra svg .k{fill:var(--ink2)}
.dkh-g-pyra svg .v{fill:var(--ink);font-weight:600}
.dkh-g-pyra svg .va{fill:var(--ac);font-weight:700}
.dkh-g-pyra svg .on{fill:var(--card);font-weight:600}
.dkh-g-pyra svg .t14{font-size:14px}
.dkh-g-pyra svg .f-a{fill:var(--ac)}
.dkh-g-pyra svg .f-w{fill:var(--acw)}
.dkh-g-pyra svg .f-s{fill:var(--soft)}
.dkh-g-pyra svg .f-c{fill:var(--card)}
.dkh-g-pyra svg .f-g1{fill:var(--g1)}
.dkh-g-pyra svg .f-g2{fill:var(--g2)}
.dkh-g-pyra svg .f-g3{fill:var(--g3)}
.dkh-g-pyra svg .f-g4{fill:var(--g4)}
.dkh-g-pyra svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-pyra svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-pyra svg .t15{font-size:15px}