산식 상자(항 2~3개 + 결과)

A × B ÷ C = 결과 형태의 계산식 하나를 장의 주인공으로 세우는 도식. 항마다 이름, 넣을 값, 설명 1줄. 결과 항만 강조. 목표 입찰가 역산, 낙찰 3요소 곱, 실질 수익률 계산에 사용. 항 2~3개 + 결과 1개, 연산 기호 교체 가능. 설명 2줄(약 30자). 값 바꾸는 법: 항 이름(span.lb), 값(strong), 설명(p)과 연산 기호(i 안의 ×, ÷, +, -) 교체. 항이 2개면 div.t 하나와 그 앞 기호를 삭제. 값이 아직 없으면 strong 에 "입력" 같은 자리 표시 대신 광고주 실측 지수를 넣음. 예시 값은 100 × 2.4% ÷ 400% = 0.6. 금액은 지수·비율로 표기.

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

<div class="dk dk-fx">
<div class="eq">
<div class="t"><span class="lb">평균 객단가</span><strong class="num">100</strong><p>최근 90일 주문 1건 평균을 지수 100으로 둠</p></div>
<i>×</i>
<div class="t"><span class="lb">전환율</span><strong class="num">2.4%</strong><p>클릭 대비 구매. 키워드별 실측값 사용</p></div>
<i>÷</i>
<div class="t"><span class="lb">목표 광고수익률</span><strong class="num">400%</strong><p>손익분기 수익률에 남길 이익분을 더한 값</p></div>
<i>=</i>
<div class="t res"><span class="lb">목표 클릭당 비용</span><strong class="num">0.6</strong><p>객단가의 0.6%. 입찰의 출발값</p></div>
</div>
<p class="dk-say">전환율이 없는 신규 키워드는 관측 단계를 먼저 거친 뒤 적용. 품질 점수와 경쟁 강도가 추가로 작용</p>
</div>

.dk-fx{display:flex;flex-direction:column;gap:24px}
.dk-fx .eq{display:flex;align-items:stretch}
.dk-fx .t{flex:1;min-width:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 24px 26px;display:flex;flex-direction:column}
.dk-fx .lb{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.dk-fx strong{margin:14px 0 14px;font-size:var(--f-big);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.dk-fx .t p{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-fx .eq>i{flex:none;width:52px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--f-h);font-weight:400;color:var(--g3)}
.dk-fx .res{background:var(--ac);box-shadow:none}
.dk-fx .res .lb,.dk-fx .res strong{color:var(--card)}
.dk-fx .res p{color:var(--acw);border-top-color:var(--acm)}