산식 상자(비용 항 합 ÷ 분모 = 결과)

여러 비용 항을 더해 하나의 분모로 나누는 분수 꼴 산식. 분자 항 3~4개, 분모 1개, 결과 1개. 실질 획득 비용, 전환당 총비용, 통합 수익률(총매출 ÷ 총마케팅비)에 사용. 항마다 이름 + 설명 1줄(약 14자). 결과만 강조. 값 바꾸는 법: 분자 항(div.nu 안의 div.t)을 3~4개로 늘리거나 줄이고 사이의 i(+)도 함께 조정. 분모와 결과 문구 교체. 결과 상자 아래 문장은 이 산식을 쓰는 이유 한 줄. 값을 보이려면 각 항 b 아래 span 에 지수·비율을 적음(금액 금지).

산식의 항마다 뜻을 붙여 읽히게 하는 방식은 Science Borealis "Coloured Equations" https://scienceborealis.ca/blog/coloured-equations (항별 구분과 라벨)와 증권사 리포트의 듀폰 분해 도식 참고. 결과 항 하나만 강조색으로 두는 구성과 코드는 직접 제작.

<div class="dk dk-fxdiv">
<div class="fr">
<div class="nu">
<div class="t"><b>매체비</b><span>매체 리포트 청구액</span></div><i>+</i>
<div class="t"><b>이용자 보상</b><span>조건 충족 후 지급분</span></div><i>+</i>
<div class="t"><b>후속 메시지·쿠폰 비용</b><span>웰컴 메시지, 신규 전용 혜택</span></div><i>+</i>
<div class="t"><b>운영 인건비</b><span>세팅, 검수, 응대 시간</span></div>
</div>
<div class="ln"></div>
<div class="de"><div class="t"><b>유효 전환 수</b><span>첫 로그인 등 유효 전환 조건을 채운 가입자만 집계</span></div></div>
</div>
<i class="eqs">=</i>
<div class="res"><span class="lb">결과</span><b>실질 획득 비용</b><p>보상만 받은 참여자를 분모에 넣으면 비용이 낮아 보이는 착시 발생</p></div>
</div>

.dk-fxdiv{display:grid;grid-template-columns:minmax(0,1fr) 56px 270px;align-items:center}
.dk-fxdiv .fr{display:flex;flex-direction:column;gap:18px}
.dk-fxdiv .nu{display:flex;align-items:stretch}
.dk-fxdiv .nu .t{flex:1;min-width:0}
.dk-fxdiv .t{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 18px 22px}
.dk-fxdiv .t b{display:block;font-size:var(--f-md);font-weight:700;line-height:1.35}
.dk-fxdiv .t span{display:block;margin-top:6px;font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-fxdiv i{flex:none;width:34px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--f-xl);color:var(--g3)}
.dk-fxdiv .ln{height:2px;background:var(--ink)}
.dk-fxdiv .de{display:flex;justify-content:center}
.dk-fxdiv .de .t{width:460px;text-align:center}
.dk-fxdiv .eqs{width:56px;font-size:var(--f-h)}
.dk-fxdiv .res{background:var(--ac);border-radius:var(--r);padding:26px 24px 28px}
.dk-fxdiv .res .lb{font-size:var(--f-cap);font-weight:600;color:var(--acw)}
.dk-fxdiv .res b{display:block;margin-top:4px;font-size:var(--f-xl);font-weight:700;line-height:1.3;color:var(--card)}
.dk-fxdiv .res p{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--acm);font-size:var(--f-sm);color:var(--acw);line-height:1.5}