분기 뒤 합류 흐름(경로 3개, 도착점 1개)

출발점 하나에서 상황에 따라 경로가 2~3개로 갈리지만 끝은 같은 곳에 닿는 흐름. 설치 여부별 딥링크 경로, 유입 채널별 접수 경로가 한 상담 창구로 모이는 구조에 사용. 경로 3개(2개면 가운데 줄 삭제 불가, D-도식-분기흐름-예아니오 사용), 경로마다 조건 + 방식 + 거치는 단계 2~4개. 도착점만 강조. 값 바꾸는 법: 출발, 경로 3줄(조건 span.tag, 방식 b, 거치는 단계 li 2~4개), 도착 문구 교체. 조건 문구는 8자 이내(넘으면 .ln 의 첫 열 130px 를 늘림). 높이 336px 와 연결선이 3줄 기준 고정값이라 줄 수를 바꾸지 않음.

조건에서 갈래로 나뉘는 결정 트리 구성은 infoDiagram "Decision Tree PowerPoint Template" https://www.infodiagram.com/diagrams/decision-tree-powerpoint-template-flowchart.html 과 SlideModel 의 decision tree 템플릿 묶음 https://slidemodel.com/templates/tag/decision-tree/ 의 가로형·세로형 트리 참고. 끝점마다 처방 문장을 붙이는 구성과 코드는 직접 제작. 갈라졌다 다시 모이는 형태는 서비스 흐름도의 swimlane 표기 참고.

<div class="dk dk-merge">
<div class="st"><span class="dk-lb mu">출발</span><b>광고 클릭</b><p>링크 하나로 환경 판별</p></div>
<svg width="56" height="336" viewBox="0 0 56 336" aria-hidden="true"><path d="M0 168H22M22 50V286M22 50H52M45 43l7 7-7 7M22 168H52M45 161l7 7-7 7M22 286H52M45 279l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="lanes">
<div class="ln"><span class="tag">앱 설치됨</span><b>딥링크</b><ol><li>앱 실행</li><li>화면 이동</li></ol></div>
<div class="ln"><span class="tag">앱 미설치</span><b>디퍼드 딥링크</b><ol><li>스토어</li><li>설치</li><li>첫 실행</li><li>화면 이동</li></ol></div>
<div class="ln"><span class="tag">앱 안 브라우저</span><b>측정 솔루션의 통합 링크</b><ol><li>환경 판별</li><li>외부 브라우저 유도</li><li>화면 이동</li></ol></div>
</div>
<svg width="56" height="336" viewBox="0 0 56 336" aria-hidden="true"><path d="M0 50H30M0 286H30M30 50V286M0 168H52M45 161l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="dst"><span class="dk-lb">도착</span><b>상품 상세 화면</b><p>앱 첫 화면이 아니라 원래 보려던 화면</p></div>
</div>

.dk-merge{display:grid;grid-template-columns:180px 56px minmax(0,1fr) 56px 220px;align-items:center;height:336px}
.dk-merge svg{display:block;color:var(--g3)}
.dk-merge .st{background:var(--soft);border-radius:var(--r);padding:22px 20px 24px}
.dk-merge .dst{background:var(--ac);border-radius:var(--r);padding:24px 22px 26px}
.dk-merge .dst .dk-lb{color:var(--acw)}
.dk-merge .st b,.dk-merge .dst b{display:block;margin-top:4px;font-size:var(--f-lg);font-weight:700;line-height:1.35}
.dk-merge .dst b{color:var(--card);font-size:var(--f-xl)}
.dk-merge .st p,.dk-merge .dst p{margin:8px 0 0;font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-merge .dst p{color:var(--acw)}
.dk-merge .lanes{height:336px;display:flex;flex-direction:column;gap:18px}
.dk-merge .ln{flex:1;min-height:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0 22px;display:grid;grid-template-columns:124px 196px minmax(0,1fr);align-items:center;column-gap:14px}
.dk-merge .tag{justify-self:start;font-size:var(--f-sm);font-weight:700;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:0 12px;line-height:30px;white-space:nowrap}
.dk-merge .ln b{font-size:var(--f-md);font-weight:700;line-height:1.35}
.dk-merge ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.dk-merge ol li{font-size:var(--f-sm);color:var(--ink2);white-space:nowrap}
.dk-merge ol li+li::before{content:"›";margin:0 8px;color:var(--g3)}