산식 계단 4단계(앞 결과가 다음 입력)

앞 단계의 계산 결과가 다음 단계의 입력이 되는 3~4단계 산정 과정. 단계마다 이름, 산식 1줄, 예시 값. 마지막 단계만 강조. 손익분기 수익률 산정, 한계 클릭당 비용 3단계, 목표 역산에 사용. 단계 3~4개, 산식 1줄(약 22자), 설명 2줄. 값 바꾸는 법: 단계 이름, 산식(p.f), 예시 값(strong), 설명(p.d) 교체. 예시 값은 25% → 1 ÷ 0.25 = 400% → 400 ÷ 0.95 = 421% → 이익분을 더한 500%. 3단계로 쓰려면 li 하나를 지우고 grid-template-columns 를 repeat(3,…)로, nth-child 높이는 앞 3개만 사용. 마지막 단계에만 class="hot".

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

<div class="dk dk-fxstep">
<ol>
<li><span class="n num">01</span><h3>공헌이익률 산출</h3><p class="f">판매가 - 원가 - 판매 수수료 - 물류 요금</p><strong class="num">25%</strong><p class="d">배송 형태별 물류 요금을 반영한 값</p></li>
<li><span class="n num">02</span><h3>손익분기 광고수익률</h3><p class="f">1 ÷ 공헌이익률</p><strong class="num">400%</strong><p class="d">이 선 아래는 팔수록 손실</p></li>
<li><span class="n num">03</span><h3>반품 반영</h3><p class="f">손익분기 ÷ (1 - 반품률 5%)</p><strong class="num">421%</strong><p class="d">반품 매출은 취소, 소진 광고비는 미회수</p></li>
<li class="hot"><span class="n num">04</span><h3>목표 광고수익률</h3><p class="f">손익분기 + 남길 이익분</p><strong class="num">500%</strong><p class="d">매출 최적화 광고에 입력할 목표값</p></li>
</ol>
</div>

.dk-fxstep ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end}
.dk-fxstep li{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px 22px;display:flex;flex-direction:column}
.dk-fxstep li:nth-child(1){min-height:250px}
.dk-fxstep li:nth-child(2){min-height:284px}
.dk-fxstep li:nth-child(3){min-height:318px}
.dk-fxstep li:nth-child(4){min-height:352px}
.dk-fxstep li+li::before{content:"→";position:absolute;left:-18px;top:28px;width:16px;text-align:center;font-size:var(--f-sm);color:var(--g3)}
.dk-fxstep .n{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-fxstep h3{margin:2px 0 0;font-size:var(--f-lg);font-weight:700;line-height:1.35}
.dk-fxstep .f{margin:10px 0 0;padding:8px 12px;background:var(--soft);border-radius:var(--r-sm);font-size:var(--f-sm);font-weight:500;color:var(--ink);line-height:1.4}
.dk-fxstep strong{margin-top:auto;padding-top:16px;font-size:var(--f-num);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.dk-fxstep .d{margin:8px 0 0;font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-fxstep .hot{background:var(--acw);box-shadow:none}
.dk-fxstep .hot .n,.dk-fxstep .hot strong{color:var(--ac)}
.dk-fxstep .hot .f{background:var(--card)}