반폭 · 벤 도식(두 집단과 교집합)

두 집단(검색 이용자와 후기 열람자, 기존 고객과 광고 도달자)의 겹치는 부분이 핵심 타깃임을 절반 칸에. 집단 2개 고정. 집단 이름 6자 이내, 집단별 비율과 교집합 비율, 아래 한 줄 해석 24자 이내. 강조색은 교집합 하나. 값 바꾸는 법: 원 두 개와 가운데 겹침 도형은 좌표 고정(원 크기는 비율과 무관). 왼쪽·오른쪽 집단의 이름 text 와 비율 text, 가운데 겹침 비율 text, 맨 아래 해석 한 줄을 교체. 가운데 이름("겹침")은 3자 이내로.

벤 도식의 일반 구성과 타깃 설정 장표의 교집합 강조 방식(겹치는 부분만 채색)을 참고. 원 크기는 실제 비율이 아닌 관계 표시용. 직접 제작.

<div class="dk dkh dkh-g-venn"><div class="dk-card"><p class="dk-lb">타깃 집단 겹침 · 구매자 조사 응답 기준</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 240" preserveAspectRatio="xMidYMid meet" role="img">
<circle cx="148" cy="118" r="94" class="cl"/><circle cx="252" cy="118" r="94" class="cl"/>
<path d="M200 39.7 A94 94 0 0 1 200 196.3 A94 94 0 0 1 200 39.7 Z" class="f-a"/>
<text x="102" y="104" text-anchor="middle" class="v t14">검색 이용자</text><text x="102" y="134" text-anchor="middle" class="bg">58%</text><text x="298" y="104" text-anchor="middle" class="v t14">후기 열람자</text><text x="298" y="134" text-anchor="middle" class="bg">41%</text><text x="200" y="104" text-anchor="middle" class="on">겹침</text><text x="200" y="134" text-anchor="middle" class="bg on">24%</text>
<text x="200" y="232" text-anchor="middle" class="k">겹치는 24%가 1차 타깃 · 전환율이 전체의 2.3배</text>
</svg></div>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

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