타깃 범위 동심원(반경 3단)

중심점에서 거리별로 범위를 3단으로 넓히는 구조를 동심원으로 보이고 단마다 반경, 역할, 판단 기준을 적는 도식. 반경 타깃 단계 확대, 옥외 매체 노출 구역과 대조 구역, 1·2·3차 상권 구분에 사용. 원 3개 고정(2개면 바깥 원 삭제), 단마다 설명 2줄. 강조 단 1개. 값 바꾸는 법: 원 안 거리 표기(text.d)와 오른쪽 3행(거리 b.k, 단 이름 h3, 설명 p, 조건 span.m) 교체. 원 크기는 circle 의 r(56, 112, 170)로 고정이며 실제 거리 비율과 맞추지 않아도 됨. 강조 단 하나에 li class="hot". 옥외 매체에 쓸 때는 안쪽 원을 노출 구역, 바깥 원을 대조 구역으로 이름만 교체. 예시 거리는 반경 타깃 300m~1.5km 범위 안의 임의 3단.

반경 원과 구역 면을 지도 바탕에 겹치는 표기는 당근 비즈니스 광고 지역 설정 화면과 네이버 스마트플레이스 광고의 동 단위 지역 선택 화면 구성, SlideModel 의 target·concentric diagram 템플릿 https://slidemodel.com/templates/3-option-target-diagram-powerpoint-template/ 참고. 실제 지도 이미지를 쓰지 않고 SVG 로 새로 그린 직접 제작. 동심원은 SlideModel "12 Steps Concentric Segments PowerPoint Diagram" https://slidemodel.com/templates/12-steps-concentric-segments-powerpoint-diagram/ 의 2~3층 원 구성 참고.

<div class="dk dk-rings">
<svg width="400" height="352" viewBox="0 0 400 352" role="img" aria-label="매장 중심 반경 3단">
<circle class="r3" cx="200" cy="176" r="170"/>
<circle class="r2" cx="200" cy="176" r="112"/>
<circle class="r1" cx="200" cy="176" r="56"/>
<circle class="st" cx="200" cy="176" r="7"/>
<text x="200" y="202" text-anchor="middle" class="lb">매장</text>
<text x="200" y="136" text-anchor="middle" class="d hot">300m</text>
<text x="200" y="82" text-anchor="middle" class="d">800m</text>
<text x="200" y="26" text-anchor="middle" class="d">1.5km</text>
</svg>
<ol>
<li class="hot"><b class="k num">300m</b><div><h3>1단 시작 범위</h3><p>걸어서 오는 고객 중심. 모수와 경쟁 강도를 먼저 확인</p></div><span class="m">소진 추이 확인</span></li>
<li><b class="k num">800m</b><div><h3>2단 확대</h3><p>반경을 좁게 잡아 소진이 정체될 때 주변 행정동까지 확대</p></div><span class="m">소진 정체 시</span></li>
<li><b class="k num">1.5km</b><div><h3>3단 상한</h3><p>반경 설정의 최대 범위. 그 밖은 동·읍·면 선택으로 전환</p></div><span class="m">배달·방문 서비스</span></li>
</ol>
</div>

.dk-rings{display:grid;grid-template-columns:400px minmax(0,1fr);gap:56px;align-items:center}
.dk-rings svg{display:block}
.dk-rings .r3{fill:var(--soft);stroke:var(--line2);stroke-width:1.5;stroke-dasharray:6 4}
.dk-rings .r2{fill:var(--g1);stroke:var(--g2);stroke-width:1.5}
.dk-rings .r1{fill:var(--acw);stroke:var(--ac);stroke-width:2}
.dk-rings .st{fill:var(--ink);stroke:var(--card);stroke-width:3}
.dk-rings .lb{font-size:13px;font-weight:700;fill:var(--ink)}
.dk-rings .d{font-size:13px;font-weight:600;fill:var(--ink2)}
.dk-rings .d.hot{fill:var(--ac)}
.dk-rings ol{list-style:none;margin:0;padding:0}
.dk-rings li{display:grid;grid-template-columns:110px minmax(0,1fr) 150px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.dk-rings li:first-child{border-top:1px solid var(--line2)}
.dk-rings .k{font-size:var(--f-h);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--g3)}
.dk-rings .hot .k{color:var(--ac)}
.dk-rings h3{margin:0 0 4px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-rings li p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-rings .m{font-size:var(--f-sm);font-weight:600;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:6px 12px;text-align:center}