판정 분기 흐름(조건 1개, 3갈래)

판정 기준 하나에서 3갈래로 나뉘어 서로 다른 처방에 닿는 흐름. 광고주 유형 3종별 상품, 손실 유형 3종별 처방, 업종별 전환 기능에 사용. 끝점 3개 고정, 끝점마다 갈래 조건 + 처방 이름 + 설명 2줄(약 45자). 강조 끝점 1개. 값 바꾸는 법: 판정 기준 1줄과 끝점 3개(갈래 조건 span.tag, 처방 이름 b, 설명 p, 먼저 할 일 p.rx) 문구 교체. 해당 광고주가 속한 끝점 하나에 class="e hot". p.rx 는 지워도 됨. 연결선 SVG 는 3열 중심(184, 576, 968px)에 맞춘 값이라 끝점 수를 바꾸지 않음.

조건에서 갈래로 나뉘는 결정 트리 구성은 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-br3">
<div class="q"><span class="dk-lb mu">판정 기준</span><b>광고주 유형은 무엇인가</b></div>
<svg width="1152" height="52" viewBox="0 0 1152 52" aria-hidden="true"><path d="M576 0V24M184 24H968M184 24V48M177 41l7 7 7-7M576 24V48M569 41l7 7 7-7M968 24V48M961 41l7 7 7-7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="ends">
<div class="e hot"><span class="tag">판매몰</span><b>쇼핑몰 상품형</b><p>스마트스토어·자사몰 상품을 직접 노출</p><p class="rx"><i>먼저 할 일</i>리뷰가 쌓인 대표 상품 한 페이지로 초기 트래픽 집중</p></div>
<div class="e"><span class="tag">제조사</span><b>제품 카탈로그형</b><p>가격비교 카탈로그에 묶인 제품 보유</p><p class="rx"><i>먼저 할 일</i>카탈로그 매칭 상태 점검</p></div>
<div class="e"><span class="tag">브랜드사</span><b>쇼핑 브랜드형</b><p>브랜드 단위 콘텐츠와 라인업 노출 필요</p><p class="rx"><i>먼저 할 일</i>브랜드 키워드와 카테고리 키워드 분리</p></div>
</div>
</div>

.dk-br3{display:flex;flex-direction:column;align-items:center}
.dk-br3 svg{display:block;color:var(--g3)}
.dk-br3 .q{width:420px;text-align:center;padding:16px 24px 18px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card)}
.dk-br3 .q b{display:block;font-size:var(--f-lg);font-weight:700;line-height:1.35}
.dk-br3 .ends{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dk-br3 .e{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 26px 22px;display:flex;flex-direction:column;align-items:flex-start}
.dk-br3 .tag{font-size:var(--f-sm);font-weight:700;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:0 14px;line-height:30px}
.dk-br3 .e b{margin-top:14px;font-size:var(--f-xl);font-weight:700;line-height:1.3}
.dk-br3 .e p{margin:6px 0 0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-br3 .e .rx{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);width:100%;font-size:var(--f-sm)}
.dk-br3 .e .rx i{display:block;font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-br3 .e.hot{background:var(--acw);box-shadow:none}
.dk-br3 .e.hot .tag{background:var(--ac);color:var(--card)}
.dk-br3 .e.hot b{color:var(--ac)}
.dk-br3 .e.hot .rx{border-top-color:var(--acm)}