원인 → 결과 사슬(4고리)

하나의 원인이 어떤 순서로 최종 결과까지 이어지는지 근거 수치와 함께 보여줄 때. 고리 3~4개, 고리마다 제목·설명 2줄·수치 1개. 마지막 결과만 강조. 값 바꾸는 법: .c 하나가 한 고리. .k=이름표(원인, 결과), h3=제목, p=설명, .e 의 .v=근거 수치, span=수치 이름. 마지막 고리에 class="hot end". 고리를 3개로 줄이면 grid-template-columns 의 4 를 3 으로.

Deckary 이슈 트리 해설(https://deckary.com/blog/issue-tree-template): 왼쪽에서 오른쪽으로 2단계 분해. PresentationGO Line Design Alternating Process(https://www.presentationgo.com/?p=21145): 얇은 선과 번호만으로 단계를 잇는 방식. 인과 사슬 아래에 고리별 근거 수치를 두는 컨설팅 장표 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-chain">
  <div class="c"><div class="top"><span class="k">원인</span><span class="ln"></span></div><h3>상세페이지 로딩 지연</h3><p>이미지 용량이 커서 첫 화면이 뜨기까지 시간이 걸림</p><div class="e"><b class="v num">4.8초</b><span>첫 화면 표시 시간</span></div></div>
  <div class="c"><div class="top"><span class="k">1차 결과</span><span class="ln"></span></div><h3>첫 화면 이탈 증가</h3><p>광고로 들어온 방문자의 절반이 내용을 보기 전에 이탈</p><div class="e"><b class="v num">52%</b><span>첫 화면 이탈률</span></div></div>
  <div class="c"><div class="top"><span class="k">2차 결과</span><span class="ln"></span></div><h3>광고 품질 점수 하락</h3><p>랜딩 평가가 낮아져 같은 순위를 얻는 데 드는 단가 상승</p><div class="e"><b class="v num">127</b><span>클릭 단가 지수</span></div></div>
  <div class="c hot end"><div class="top"><span class="k">최종 결과</span><span class="ln"></span></div><h3>전환 단가 상승</h3><p>비싸게 데려온 방문자가 덜 사면서 같은 예산의 전환 건수 감소</p><div class="e"><b class="v num">141</b><span>전환 단가 지수</span></div></div>
</div>

.dk-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dk-chain .c{display:flex;flex-direction:column}
.dk-chain .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dk-chain .k{font-size:var(--f-cap);font-weight:600;color:var(--mu);white-space:nowrap}
.dk-chain .ln{flex:1;height:1px;background:var(--g3);position:relative;margin-right:14px}
.dk-chain .ln::after{content:"";position:absolute;right:1px;top:50%;width:7px;height:7px;border-top:1px solid var(--g3);border-right:1px solid var(--g3);transform:translateY(-50%) rotate(45deg)}
.dk-chain .end .ln{visibility:hidden}
.dk-chain h3{font-size:var(--f-xl);font-weight:700;margin:0 0 8px;line-height:1.35;padding-right:32px}
.dk-chain p{margin:0;font-size:var(--f-body);color:var(--ink2);padding-right:36px;min-height:76px}
.dk-chain .e{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);margin-right:36px}
.dk-chain .e span{display:block;font-size:var(--f-sm);color:var(--mu)}
.dk-chain .v{display:block;font-size:var(--f-big);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--g3)}
.dk-chain .hot .k,.dk-chain .hot h3,.dk-chain .hot .v{color:var(--ac)}