반폭 · 목표 역산 3단(목표, 필요 전환, 필요 유입)

최종 목표에서 거꾸로 필요한 전환 수와 유입 수를 계산해 보일 때. 3단 고정, 단 사이에 나누는 비율 1개씩. 단 이름 11자 이내, 값 6자 이내. 강조색은 맨 아래(확보해야 할 유입) 한 칸. 값 바꾸는 법: .b 3개가 위에서부터 목표, 필요 전환, 필요 유입. em=단 구분, 뒤 글자=지표 이름, .v=값(단위는 small). .op=단 사이 계산식(아래 값 = 위 값 ÷ 비율). 맨 아래 상자에 class="hot".

직접 제작. 목표 역산(reverse funnel) 계산표를 아래로 넓어지는 상자 3개로 옮긴 방식.

<div class="dk dkh dkh-a-back"><div class="dk-card"><p class="dk-lb">목표에서 거꾸로 계산한 필요 물량</p>
<div class="st">
<div class="b b1"><span class="k"><em>목표</em>월 계약</span><span class="v">60<small>건</small></span></div>
<div class="op"><i></i><span>계약 ÷ 상담 후 계약률 <strong>20%</strong></span></div>
<div class="b b2"><span class="k"><em>필요 전환</em>상담 신청</span><span class="v">300<small>건</small></span></div>
<div class="op"><i></i><span>신청 ÷ 방문 후 신청률 <strong>2.5%</strong></span></div>
<div class="b b3 hot"><span class="k"><em>필요 유입</em>광고 방문</span><span class="v">12,000<small>회</small></span></div>
</div>
<p class="nt">비율은 최근 3개월 실적 적용 · 예시 값</p></div></div>

.dkh-a-back .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-back .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-back .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-back .st{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-back .b{flex:1;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:var(--soft);border-radius:8px}
.dkh-a-back .b1{width:66%}
.dkh-a-back .b2{width:83%}
.dkh-a-back .k{font-size:var(--f-sm);font-weight:600;line-height:1.35;white-space:nowrap}
.dkh-a-back .k em{display:block;font-style:normal;font-size:var(--f-cap);font-weight:400;color:var(--mu)}
.dkh-a-back .v{font-size:var(--f-xl);font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.dkh-a-back .v small{font-size:var(--f-sm);font-weight:600;margin-left:2px;letter-spacing:0}
.dkh-a-back .b.hot{background:var(--acw)}
.dkh-a-back .b.hot .v{color:var(--ac)}
.dkh-a-back .b.hot .k em{color:var(--ac2)}
.dkh-a-back .op{flex:none;display:flex;align-items:center;gap:10px;height:30px;padding-left:20px;font-size:var(--f-cap);color:var(--mu);line-height:1.3}
.dkh-a-back .op i{display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--g2)}
.dkh-a-back .op strong{color:var(--ink2)}