반폭 · 원인과 결과 사슬 3단

문제의 원인이 어떤 과정을 거쳐 결과로 이어지는지 절반 칸에. 단계 3개 고정(원인, 과정, 결과). 단계마다 제목 5자 이내, 설명 18자 이내, 아래에 근거 수치 1개. 강조색은 결과 한 칸. 값 바꾸는 법: 칸 하나 = li.bx. i = 단계 구분(원인·과정·결과), b = 제목, span = 설명, strong = 근거 수치, em = 수치 이름. 칸 사이 li.ar(화살표)는 그대로 둔다. 강조 칸 하나에 class="bx hot"(보통 결과 칸). 칸 높이에 맞춰 상자가 늘어나고 수치는 아래에 붙는다.

컨설팅 보고서의 원인·결과 사슬(issue chain) 도식과 Bain 공개 보고서의 단계별 근거 수치 배치(칸 아래에 숫자 하나)를 참고. 직접 제작.

<div class="dk dkh dkh-g-chain"><div class="dk-card"><p class="dk-lb">전환 정체의 원인 사슬</p>
<ol>
<li class="bx"><i>원인</i><b>후기 부족</b><span>검색 결과 첫 화면에 최근 후기 없음</span><p><strong class="num">3건</strong><em>최근 90일 후기</em></p></li>
<li class="ar"><svg width="12" height="16" viewBox="0 0 12 16"><path d="M3 2 L9 8 L3 14"/></svg></li>
<li class="bx"><i>과정</i><b>비교 이탈</b><span>상세 화면에서 경쟁 상품으로 이동</span><p><strong class="num">62%</strong><em>상세 화면 이탈률</em></p></li>
<li class="ar"><svg width="12" height="16" viewBox="0 0 12 16"><path d="M3 2 L9 8 L3 14"/></svg></li>
<li class="bx hot"><i>결과</i><b>전환 정체</b><span>유입은 늘어도 구매 건수 제자리</span><p><strong class="num">1.1%</strong><em>구매 전환율</em></p></li>
</ol>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-chain .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-chain .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-chain .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-chain ol{flex:1;min-height:0;list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:4px}
.dkh-g-chain .bx{flex:1;min-width:0;display:flex;flex-direction:column;padding:12px 12px 12px;background:var(--soft);border-radius:var(--r-sm)}
.dkh-g-chain .bx i{font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dkh-g-chain .bx b{font-size:var(--f-body);font-weight:700;margin:2px 0 6px}
.dkh-g-chain .bx span{font-size:var(--f-cap);line-height:1.45;color:var(--ink2)}
.dkh-g-chain .bx p{margin:auto 0 0;padding-top:8px;border-top:1px solid var(--line2)}
.dkh-g-chain .bx strong{display:block;font-size:var(--f-xl);font-weight:700;line-height:1.2;letter-spacing:-.5px}
.dkh-g-chain .bx em{display:block;font-style:normal;font-size:var(--f-cap);color:var(--mu);line-height:1.35}
.dkh-g-chain .bx.hot{background:var(--acw)}
.dkh-g-chain .bx.hot i,.dkh-g-chain .bx.hot strong{color:var(--ac)}
.dkh-g-chain .ar{flex:none;display:flex;align-items:center}
.dkh-g-chain .ar svg{display:block}
.dkh-g-chain .ar path{fill:none;stroke:var(--g3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}