반폭 · 삼자 관계(광고주·대행사·실행사)

세 주체가 무엇을 주고받는지(계약, 발주, 보고) 역할 구조를 절반 칸에. 주체 3개 고정, 관계 이름 3개. 주체 이름 4자 이내, 역할 8자 이내, 관계 이름 8자 이내. 직접 계약이 없는 관계는 점선. 강조색은 우리 자리 하나. 값 바꾸는 법: 주체 상자 3개(위 가운데, 왼쪽 아래, 오른쪽 아래)는 좌표 고정. 상자마다 굵은 text(주체 이름)와 아래 text(역할) 교체. 선 위 이름표 3개의 글자 교체. 우리 자리 상자만 rect class="f-a", 글자 class "on t14"·"sub". 직접 계약이 없는 선은 class="ln ds"(점선).

광고 대행 계약 구조 설명 장표(광고주, 대행사, 실행사 삼각 배치)와 컨설팅 보고서의 이해관계자 도식(선 위에 관계 이름표)을 참고. 직접 제작.

<div class="dk dkh dkh-g-tri"><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">
<line x1="178" y1="50" x2="78" y2="200" class="ln"/><line x1="130" y1="225" x2="270" y2="225" class="ln"/><line x1="222" y1="50" x2="322" y2="200" class="ln ds"/>
<rect x="135" y="0" width="130" height="50" rx="8" class="f-s"/><text x="200" y="21" text-anchor="middle" class="v t14">광고주</text><text x="200" y="39" text-anchor="middle" class="k">목표·예산 결정</text><rect x="0" y="200" width="130" height="50" rx="8" class="f-a"/><text x="65" y="221" text-anchor="middle" class="on t14">대행사</text><text x="65" y="239" text-anchor="middle" class="sub">기획·운영·보고</text><rect x="270" y="200" width="130" height="50" rx="8" class="f-s"/><text x="335" y="221" text-anchor="middle" class="v t14">실행사</text><text x="335" y="239" text-anchor="middle" class="k">제작·섭외·집행</text>
<rect x="66" y="111" width="104" height="28" rx="14" class="tg"/><text x="118" y="130" text-anchor="middle" class="k">계약·주간 보고</text><rect x="148" y="211" width="104" height="28" rx="14" class="tg"/><text x="200" y="230" text-anchor="middle" class="k">발주·검수</text><rect x="230" y="111" width="104" height="28" rx="14" class="tg"/><text x="282" y="130" text-anchor="middle" class="k">결과물 열람</text>
</svg></div>
<p class="nt">실선 직접 계약 · 점선 열람과 확인 관계</p></div></div>

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