반폭 · 분기 흐름(조건 → 예·아니오)

조건 하나에 따라 대응이 둘로 갈리는 운영 규칙(목표 달성 여부, 예산 소진 여부, 이상 징후 여부)을 절반 칸에. 시작 1, 조건 1, 갈래 2, 갈래별 다음 조치 1. 상자 글자 9자 이내, 조건 글자 11자 이내. 강조색은 조치가 필요한 갈래 하나. 값 바꾸는 법: 위에서부터 시작 상자, 마름모(조건), 왼쪽 갈래(예), 오른쪽 갈래(아니오), 갈래별 다음 조치 순서로 좌표 고정. 각 text 의 글자만 교체. 강조할 갈래 상자의 rect class 를 "f-w", 글자 class 를 "va t14" 로 하고 갈래 이름(예·아니오) 글자도 class="va" 로 맞춘다. 반대 갈래는 "f-s"·"v t14".

순서도 표준 기호(마름모 = 조건, 네모 = 처리)와 운영 안내서의 대응 규칙 도식을 참고. 직접 제작.

<div class="dk dkh dkh-g-branch"><div class="dk-card"><p class="dk-lb">주간 점검 후 대응 규칙</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid meet" role="img">
<rect x="110" y="0" width="180" height="40" rx="8" class="f-s"/><text x="200" y="25" text-anchor="middle" class="v t14">주간 전환율 점검</text><line x1="200" y1="40" x2="200" y2="50" class="ln"/><polygon points="195,48 205,48 200,56" class="f-g3"/>
<polygon points="200,56 296,91 200,126 104,91" class="dm"/><text x="200" y="96" text-anchor="middle" class="k">목표 대비 90% 이상</text>
<path d="M104 91 H85 V140" class="ln"/><path d="M296 91 H315 V140" class="ln"/><polygon points="80,140 90,140 85,148" class="f-g3"/><polygon points="310,140 320,140 315,148" class="f-g3"/><text x="73" y="122" text-anchor="end" class="v">예</text><text x="327" y="122" class="va">아니오</text>
<rect x="1" y="148" width="168" height="40" rx="8" class="f-s"/><text x="85" y="173" text-anchor="middle" class="v t14">현행 운영 유지</text><rect x="231" y="148" width="168" height="40" rx="8" class="f-w"/><text x="315" y="173" text-anchor="middle" class="va t14">소재·입찰 조정</text><line x1="85" y1="188" x2="85" y2="200" class="ln"/><line x1="315" y1="188" x2="315" y2="200" class="ln"/><polygon points="80,200 90,200 85,208" class="f-g3"/><polygon points="310,200 320,200 315,208" class="f-g3"/>
<rect x="1" y="208" width="168" height="40" rx="8" class="f-c bd"/><text x="85" y="233" text-anchor="middle" class="k t14">월간 보고에 반영</text><rect x="231" y="208" width="168" height="40" rx="8" class="f-c bd"/><text x="315" y="233" text-anchor="middle" class="k t14">2주 뒤 재점검</text>
</svg></div>
<p class="nt">예시 문구 · 실제 내용으로 교체</p></div></div>

.dkh-g-branch .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-branch .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-branch .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-branch .cv{flex:1;min-height:0;position:relative}
.dkh-g-branch .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-branch svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-branch svg .k{fill:var(--ink2)}
.dkh-g-branch svg .v{fill:var(--ink);font-weight:600}
.dkh-g-branch svg .va{fill:var(--ac);font-weight:700}
.dkh-g-branch svg .on{fill:var(--card);font-weight:600}
.dkh-g-branch svg .t14{font-size:14px}
.dkh-g-branch svg .f-a{fill:var(--ac)}
.dkh-g-branch svg .f-w{fill:var(--acw)}
.dkh-g-branch svg .f-s{fill:var(--soft)}
.dkh-g-branch svg .f-c{fill:var(--card)}
.dkh-g-branch svg .f-g1{fill:var(--g1)}
.dkh-g-branch svg .f-g2{fill:var(--g2)}
.dkh-g-branch svg .f-g3{fill:var(--g3)}
.dkh-g-branch svg .f-g4{fill:var(--g4)}
.dkh-g-branch svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-branch svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-branch svg .ln{stroke:var(--g3);stroke-width:1.5;fill:none}
.dkh-g-branch svg .dm{fill:var(--card);stroke:var(--g3);stroke-width:1.5}
.dkh-g-branch svg .bd{stroke:var(--line2);stroke-width:1}