병렬 관문 2줄(둘 다 통과해야 다음 단계)

하나의 산출물이 서로 다른 관문 2개를 각각 통과해야 다음 단계로 가는 구조. 관문마다 누가, 무엇을, 유의점. 매체 심사와 법정 사전심의, 내부 검수와 광고주 확인처럼 따로 도는 두 절차에 사용. 관문 2개 고정, 관문마다 3행(각 약 40자). 도착점만 강조. 값 바꾸는 법: 출발, 관문 2개(이름 b, 3행 dt·dd), 도착 문구 교체. dt 는 2~3자. 높이 344px 와 연결선이 2줄 기준 고정값이라 관문 수는 바꾸지 않음(3개 경로는 D-도식-분기합류).

갈래로 나뉘는 흐름 구성은 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/ 참고. 코드는 직접 제작. 두 절차를 나란히 통과시키는 표기는 업무 흐름도의 parallel gateway 표기 참고.

<div class="dk dk-gate2">
<div class="st"><span class="dk-lb mu">출발</span><b>소재 시안</b><p>치료 과정·진료 환경의 사실 전달형</p></div>
<svg width="52" height="344" viewBox="0 0 52 344" aria-hidden="true"><path d="M0 172H20M20 80V264M20 80H48M41 73l7 7-7 7M20 264H48M41 257l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="lanes">
<div class="g"><div class="h"><span class="tag">관문 1</span><b>매체 자체 심사</b></div><dl><div><dt>누가</dt><dd>네이버, 구글, 메타 등 매체사</dd></div><div><dt>기준</dt><dd>매체별 광고 정책. 구글은 기본 헬스케어 정책 준수로 게재</dd></div><div><dt>유의</dt><dd>통과해도 의료광고 사전심의는 별도로 필요</dd></div></dl></div>
<div class="g"><div class="h"><span class="tag">관문 2</span><b>의료광고 사전심의</b></div><dl><div><dt>누가</dt><dd>의료광고심의위원회</dd></div><div><dt>대상</dt><dd>블로그·인스타그램·유튜브 등 게시물 건별 심의필 번호</dd></div><div><dt>유의</dt><dd>조건부승인 수정안 재심의 일정을 론칭 일정에 반영</dd></div></dl></div>
</div>
<svg width="52" height="344" viewBox="0 0 52 344" aria-hidden="true"><path d="M0 80H28M0 264H28M28 80V264M28 172H48M41 165l7 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-gate2{display:grid;grid-template-columns:176px 52px minmax(0,1fr) 52px 200px;align-items:center;height:344px}
.dk-gate2 svg{display:block;color:var(--g3)}
.dk-gate2 .st{background:var(--soft);border-radius:var(--r);padding:22px 20px 24px}
.dk-gate2 .dst{background:var(--ac);border-radius:var(--r);padding:24px 22px 26px}
.dk-gate2 .dst .dk-lb{color:var(--acw)}
.dk-gate2 .st b,.dk-gate2 .dst b{display:block;margin-top:4px;font-size:var(--f-xl);font-weight:700;line-height:1.3}
.dk-gate2 .dst b{color:var(--card)}
.dk-gate2 .st p,.dk-gate2 .dst p{margin:8px 0 0;font-size:var(--f-sm);color:var(--ink2);line-height:1.45}
.dk-gate2 .dst p{color:var(--acw)}
.dk-gate2 .lanes{height:344px;display:flex;flex-direction:column;gap:24px}
.dk-gate2 .g{flex:1;min-height:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0 24px;display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:22px;align-items:center}
.dk-gate2 .tag{display:inline-block;font-size:var(--f-cap);font-weight:700;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:0 10px;line-height:26px}
.dk-gate2 .h b{display:block;margin-top:8px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-gate2 dl{margin:0;padding:0}
.dk-gate2 dl div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dk-gate2 dl div:last-child{border-bottom:0}
.dk-gate2 dt{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-gate2 dd{margin:0;font-size:var(--f-sm);color:var(--ink);line-height:1.45}