로직 트리(원인 2단계 분해와 대응)

문제 하나를 1차 원인 3개, 2차 원인 6개로 나누고 원인마다 대응을 붙일 때. 성과 하락 진단, 과제 도출. 1차 원인 3개 고정, 각 2차 원인 2개 고정, 칸마다 1줄. 값 바꾸는 법: .root=문제, .b1=1차 원인(이름과 수치), .b2=2차 원인, .fx=그 원인의 대응. 순서는 위에서 아래. 핵심 원인 하나의 .b2 와 같은 줄 .fx 에 class="hot". 가지 수는 3×2 고정(선 좌표 고정).

Deckary 이슈 트리 해설(https://deckary.com/blog/issue-tree-template): 왼쪽에서 오른쪽으로 2단계 분해. slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tree2">
  <div class="hd"><span>문제</span><span></span><span>1차 원인</span><span></span><span>2차 원인</span><span></span><span>대응</span></div>
  <div class="g">
  <svg width="1152" height="336" viewBox="0 0 1152 336" aria-hidden="true"><path d="M200,168 H230 M230,56 V280 M230,56 H260 M230,168 H260 M230,280 H260 M510,56 H540 M540,28 V84 M540,28 H570 M540,84 H570 M510,168 H540 M540,140 V196 M540,140 H570 M540,196 H570 M510,280 H540 M540,252 V308 M540,252 H570 M540,308 H570"/></svg>
  <div class="root"><b>온라인 매출 하락</b><span>전년 대비 지수 71</span></div>
  <div class="b1" style="grid-row:1/3"><b>유입 감소</b><span>방문 수 지수 82</span></div>
  <div class="b2" style="grid-row:1">브랜드 검색량 하락</div><div class="fx" style="grid-row:1">영상 매체로 인지 보강</div>
  <div class="b2" style="grid-row:2">일반 검색어 순위 하락</div><div class="fx" style="grid-row:2">입찰 구조 재편</div>
  <div class="b1" style="grid-row:3/5"><b>전환율 하락</b><span>구매 전환 지수 74</span></div>
  <div class="b2 hot" style="grid-row:3">상세페이지 첫 화면 이탈</div><div class="fx hot" style="grid-row:3">혜택 안내를 상단으로 이동</div>
  <div class="b2" style="grid-row:4">결제 단계 오류 증가</div><div class="fx" style="grid-row:4">결제 수단별 점검</div>
  <div class="b1" style="grid-row:5/7"><b>객단가 정체</b><span>주문당 금액 지수 98</span></div>
  <div class="b2" style="grid-row:5">묶음 구성 부재</div><div class="fx" style="grid-row:5">세트 상품 3종 구성</div>
  <div class="b2" style="grid-row:6">추가 구매 안내 없음</div><div class="fx" style="grid-row:6">장바구니 추천 영역 도입</div>
  </div>
</div>

.dk-tree2 .hd,.dk-tree2 .g{display:grid;grid-template-columns:200px 60px 250px 60px 300px 24px minmax(0,1fr)}
.dk-tree2 .hd{margin-bottom:10px}
.dk-tree2 .hd span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-tree2 .g{position:relative;grid-template-rows:repeat(6,56px)}
.dk-tree2 svg{position:absolute;left:0;top:0}
.dk-tree2 path{fill:none;stroke:var(--line2);stroke-width:1}
.dk-tree2 .root,.dk-tree2 .b1{align-self:center;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px 16px;display:flex;flex-direction:column}
.dk-tree2 .root{grid-column:1;grid-row:1/7;padding:18px 16px}
.dk-tree2 .root b{font-size:var(--f-lg);font-weight:700;line-height:1.35}
.dk-tree2 .b1{grid-column:3}
.dk-tree2 .b1 b{font-size:var(--f-md);font-weight:700;line-height:1.35}
.dk-tree2 .root span,.dk-tree2 .b1 span{font-size:var(--f-sm);color:var(--mu)}
.dk-tree2 .b2{grid-column:5;align-self:center;font-size:var(--f-body);color:var(--ink);padding-left:12px}
.dk-tree2 .fx{grid-column:7;align-self:center;font-size:var(--f-sm);color:var(--mu);padding-left:20px;position:relative}
.dk-tree2 .fx::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--line2)}
.dk-tree2 .b2.hot{color:var(--ac);font-weight:700}
.dk-tree2 .fx.hot{color:var(--ink);font-weight:600}
.dk-tree2 .fx.hot::before{background:var(--ac)}