판정 분기 흐름(조건 1개, 예·아니오 2갈래)

조건 하나를 충족하는지에 따라 조치가 둘로 갈리는 판정 흐름. 입력 1 → 조건 1 → 예·아니오 → 조치 2개. 학습 기준 충족 여부, 제외 키워드 판정, 입점 경로 2갈래에 사용. 끝점 2개 고정, 끝점마다 조치 이름 + 설명 2~3줄(약 60자). 강조 끝점 1개. 값 바꾸는 법: 확인할 것, 판정 조건, 예·아니오 조치 문구 교체. 권하는(또는 주의할) 끝점 하나에 class="o hot". 갈래 이름은 span.tag 문구(예·아니오 대신 "직접 입점"·"벤더 경유"처럼 4자 이내 가능, 길면 width 64px 를 늘림). 화살표 SVG 는 높이 320px 고정이라 손대지 않음.

조건에서 갈래로 나뉘는 결정 트리 구성은 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-yn">
<div class="st"><span class="dk-lb mu">확인할 것</span><b>광고 세트 학습 상태</b><p>최근 7일 최적화 이벤트 건수</p></div>
<svg class="a1" width="48" height="320" viewBox="0 0 48 320" aria-hidden="true"><path d="M0 160H44M37 153l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="q"><span class="dk-lb mu">판정 조건</span><b>세트당 7일 안에 50건 충족</b><p>학습 기준: 광고 세트당 최적화 이벤트 50건</p></div>
<svg class="a2" width="72" height="320" viewBox="0 0 72 320" aria-hidden="true"><path d="M0 160H30M30 74V246M30 74H68M61 67l7 7-7 7M30 246H68M61 239l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="out">
<div class="o"><span class="tag">예</span><div><b>단계 증액</b><p>1회 20% 이내, 간격 3~5일로 같은 세트 예산을 반복 증액. 포화되면 검증된 캠페인을 복제해 별도 예산으로 운영</p></div></div>
<div class="o hot"><span class="tag">아니오</span><div><b>구조 정리</b><p>광고 세트 병합으로 이벤트 집중, 또는 발생량이 많은 상위 이벤트로 최적화 목표 변경</p></div></div>
</div>
</div>

.dk-yn{display:grid;grid-template-columns:230px 48px 260px 72px minmax(0,1fr);align-items:center;height:320px}
.dk-yn svg{display:block;color:var(--g3)}
.dk-yn .st,.dk-yn .q{padding:22px 22px 24px;border-radius:var(--r)}
.dk-yn .st{background:var(--soft)}
.dk-yn .q{background:var(--card);border:1.5px solid var(--ink)}
.dk-yn .st b,.dk-yn .q b{display:block;margin-top:4px;font-size:var(--f-lg);font-weight:700;line-height:1.35}
.dk-yn .st p,.dk-yn .q p{margin:8px 0 0;font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-yn .out{display:flex;flex-direction:column;gap:24px;height:320px}
.dk-yn .o{flex:1;display:flex;align-items:center;gap:20px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0 26px}
.dk-yn .tag{flex:none;width:64px;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}
.dk-yn .o b{font-size:var(--f-lg);font-weight:700}
.dk-yn .o p{margin:4px 0 0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-yn .o.hot{background:var(--acw);box-shadow:none}
.dk-yn .o.hot .tag{background:var(--ac);color:var(--card)}
.dk-yn .o.hot b{color:var(--ac)}