판정 분기 흐름 2단(분기점 2개, 끝점 3개)

첫 조건에서 한쪽은 바로 끝나고 다른 쪽은 둘째 조건을 거쳐 다시 갈리는 2단 판정 흐름. 검색어 1건이 어느 캠페인에 노출되는지, 검색어를 제외할지 둘지, 예산 손실인지 순위 손실인지 순서대로 가리는 진단에 사용. 분기점 2개, 끝점 3개 고정, 끝점마다 결과 이름 + 설명 1~2줄(약 45자). 강조 끝점 1개. 값 바꾸는 법: 시작, 조건 1, 조건 2, 끝점 3개의 문구 교체. 강조할 끝점 하나에 class="hot" 추가. 조건 문구는 2줄(약 24자)까지, 끝점 설명은 2줄까지. 높이와 연결선이 고정값(전체 380px, 위 끝점 112px, 아래 묶음 244px)이라 분기점·끝점 수는 바꾸지 않음. 끝점이 4개 필요하면 위 끝점 자리에 아래 묶음(div.lo)을 한 번 더 쓰지 말고 장을 나눔.

조건에서 갈래로 나뉘는 결정 트리 구성은 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/ 의 가로형·세로형 트리 참고. 끝점마다 처방 문장을 붙이는 구성과 코드는 직접 제작.

<div class="dk dk-br2s">
<div class="st"><span class="dk-lb mu">시작</span><b>검색어 1건 유입</b></div>
<svg width="36" height="380" viewBox="0 0 36 380" aria-hidden="true"><path d="M0 190H32M25 183l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="q"><span class="dk-lb mu">조건 1</span><b>자사 브랜드 검색어인가</b></div>
<svg width="60" height="380" viewBox="0 0 60 380" aria-hidden="true"><path d="M0 190H24M24 56V258M24 56H56M49 49l7 7-7 7M24 258H56M49 251l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="rt">
<div class="e hot a"><span class="tag">예</span><div><b>검색 캠페인(브랜드)만 노출</b><p>브랜드 제외로 PMax 검색 텍스트 광고 차단. 같은 브랜드의 쇼핑 광고는 계속 노출</p></div></div>
<div class="lo">
<div class="q q2"><span class="tag">아니오</span><span class="dk-lb mu">조건 2</span><b>검색 캠페인에 일치검색으로 등록한 키워드인가</b></div>
<svg width="52" height="244" viewBox="0 0 52 244" aria-hidden="true"><path d="M0 122H20M20 55V189M20 55H48M41 48l7 7-7 7M20 189H48M41 182l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="e2">
<div class="e"><span class="tag">예</span><div><b>검색 캠페인 우선 노출</b><p>일치검색 키워드가 PMax보다 우선</p></div></div>
<div class="e"><span class="tag">아니오</span><div><b>PMax와 같은 순위에서 경쟁</b><p>구문·확장검색은 PMax 검색 주제와 같은 순위</p></div></div>
</div>
</div>
</div>
</div>

.dk-br2s{display:grid;grid-template-columns:170px 36px 210px 60px minmax(0,1fr);align-items:center;height:380px}
.dk-br2s svg{display:block;flex:none;color:var(--g3)}
.dk-br2s .st{background:var(--soft);border-radius:var(--r);padding:20px 20px 22px}
.dk-br2s .q{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:20px 20px 22px}
.dk-br2s .st b,.dk-br2s .q b{display:block;margin-top:4px;font-size:var(--f-md);font-weight:700;line-height:1.4}
.dk-br2s .rt{height:380px;display:flex;flex-direction:column;gap:24px}
.dk-br2s .e{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0 22px}
.dk-br2s .e.a{height:112px;flex:none}
.dk-br2s .lo{height:244px;display:flex;align-items:center}
.dk-br2s .q2{width:224px;flex:none;position:relative}
.dk-br2s .q2 .tag{position:absolute;left:20px;top:-15px}
.dk-br2s .q2 .dk-lb{display:block;margin-top:8px}
.dk-br2s .e2{flex:1;min-width:0;height:244px;display:flex;flex-direction:column;gap:24px}
.dk-br2s .e2 .e{flex:1}
.dk-br2s .tag{flex:none;min-width:60px;text-align:center;font-size:var(--f-sm);font-weight:700;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);line-height:30px;padding:0 10px}
.dk-br2s .e b{font-size:var(--f-md);font-weight:700;line-height:1.35}
.dk-br2s .e p{margin:3px 0 0;font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-br2s .e.hot{background:var(--acw);box-shadow:none}
.dk-br2s .e.hot .tag{background:var(--ac);color:var(--card)}
.dk-br2s .e.hot b{color:var(--ac)}