포함 원 2개(큰 합계 안의 실제 값)

큰 원 안에 작은 원을 넣어 "집계된 합계가 실제 값보다 크다"는 포함 관계를 보이고 오른쪽에 차이가 생기는 이유 3가지를 적는 도식. 매체 리포트 합계와 실제 매출, 전체 리드와 유효 리드, 도달과 실제 방문에 사용. 원 2개 고정, 이유 3개(각 2줄, 약 40자). 안쪽 원만 강조. 값 바꾸는 법: 안쪽 원 반지름 = 바깥 반지름 170 × √(실제 값 ÷ 합계). 예: √(100 ÷ 140) = 0.847 → 144. 안쪽 원 cy = 175 + (170 - 안쪽 반지름)으로 두면 아래가 맞닿음(예: 201). 원 안 글자(text.t1, t2, t3)와 오른쪽 이유 3개 교체. 예시 지수 140 과 100 은 구조 설명용 가정값이므로 실측으로 교체.

포함 관계를 겹친 원 2개로 보이는 방식은 Financial Times Visual Vocabulary 의 part-to-whole·venn 항목 https://ft-interactive.github.io/visual-vocabulary/ 참고. 원의 넓이를 값에 비례시키는 계산과 코드는 직접 제작.

<div class="dk dk-nest">
<svg width="400" height="350" viewBox="0 0 400 350" role="img" aria-label="매체 리포트 합계 지수 140 안에 실제 매출 지수 100">
<circle class="o" cx="200" cy="175" r="170"/>
<circle class="i" cx="200" cy="201" r="144"/>
<text x="200" y="26" text-anchor="middle" class="t1">매체 리포트 합계 140</text>
<text x="200" y="192" text-anchor="middle" class="t2">실제 매출</text>
<text x="200" y="246" text-anchor="middle" class="t3">100</text>
</svg>
<div class="r">
<p class="dk-lb mu">합계가 커지는 이유</p>
<ol>
<li><b>매체별 자기 기여 집계</b><span>매체는 각자 자기 기여로 집계. 같은 주문이 여러 매체에 잡힘</span></li>
<li><b>주문 번호 파라미터 누락</b><span>같은 주문이 여러 번 집계. 매출 과다 계상의 가장 흔한 원인</span></li>
<li><b>기여 기간 불일치</b><span>메타 7일 클릭·1일 조회에 맞춰 타 매체 추적 기간 정렬</span></li>
</ol>
<p class="dk-say">성과 판정은 매체 리포트가 아닌 주문 데이터 기준</p>
</div>
</div>

.dk-nest{display:grid;grid-template-columns:400px minmax(0,1fr);gap:56px;align-items:center}
.dk-nest svg{display:block}
.dk-nest .o{fill:var(--g1);stroke:var(--g2);stroke-width:1.5;stroke-dasharray:6 4}
.dk-nest .i{fill:var(--ac)}
.dk-nest .t1{font-size:14px;font-weight:700;fill:var(--ink2)}
.dk-nest .t2{font-size:18px;font-weight:700;fill:var(--card)}
.dk-nest .t3{font-size:48px;font-weight:700;fill:var(--card);letter-spacing:-1px}
.dk-nest ol{list-style:none;margin:12px 0 20px;padding:0}
.dk-nest li{padding:16px 0;border-bottom:1px solid var(--line)}
.dk-nest li:first-child{border-top:1px solid var(--line2)}
.dk-nest li b{display:block;font-size:var(--f-md);font-weight:700;line-height:1.35}
.dk-nest li span{display:block;margin-top:2px;font-size:var(--f-body);color:var(--ink2);line-height:1.45}