타깃 범위 3층(행정동 면 · 반경 원 · 직접 지정 구역)

매장 한 곳을 중심으로 지역 타깃을 잡는 세 가지 방식(행정동 면, 반경 원, 지도에 직접 그린 구역)을 약도 위에 겹쳐 보이고 오른쪽에 층별 설정 방식과 맞는 경우를 적는 도식. 당근 지역 타깃 3층, 지역 광고 범위 설명에 사용. 매장 점 1개, 범위 층 2~3개, 층마다 설명 2줄. 강조 층 1개. 값 바꾸는 법: 오른쪽 층 이름과 설정·맞는 경우 문구 교체. 약도의 도형은 path.z1(행정동 면), circle.z2(반경, r 값으로 크기), path.z3(직접 지정 구역)이며 좌표만 바꿔 모양 조정. 강조 층은 번호 g.no 와 오른쪽 li 에 class="hot". 층이 2개면 도형·번호·li 를 한 벌 삭제.

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

<div class="dk dk-map3">
<svg width="520" height="340" viewBox="0 0 520 340" role="img" aria-label="매장 중심 타깃 범위 약도">
<rect class="bg" width="520" height="340" rx="10"/>
<path class="rd" d="M0 96H520M0 236H520M132 0V340M372 0V340"/><path class="rd2" d="M0 170H520M252 0V340M0 300H520M60 0V340M450 0V340"/>
<path class="z1" d="M52 40 L300 24 L470 70 L492 250 L330 316 L96 300 L30 180Z"/>
<circle class="z2" cx="262" cy="176" r="96"/>
<path class="z3" d="M262 176 L330 120 L432 138 L440 214 L352 232Z"/>
<circle class="st" cx="262" cy="176" r="7"/>
<text x="262" y="204" text-anchor="middle" class="lb">매장</text>
<g class="no"><circle cx="86" cy="70" r="13"/><text x="86" y="75" text-anchor="middle">1</text></g>
<g class="no hot"><circle cx="196" cy="108" r="13"/><text x="196" y="113" text-anchor="middle">2</text></g>
<g class="no"><circle cx="420" cy="160" r="13"/><text x="420" y="165" text-anchor="middle">3</text></g>
</svg>
<ol>
<li><span class="n num">1</span><div><h3>동·읍·면</h3><p><b>설정</b>행정 단위 선택</p><p><b>맞는 경우</b>상권이 넓은 업종, 배달·방문 서비스</p></div></li>
<li class="hot"><span class="n num">2</span><div><h3>반경</h3><p><b>설정</b>매장 중심 거리 지정. 300m~1.5km, 100m 단위</p><p><b>맞는 경우</b>걸어서 오는 고객 중심 매장</p></div></li>
<li><span class="n num">3</span><div><h3>직접 지정</h3><p><b>설정</b>지도에 범위를 그려 구역 지정. 최대 10개 구역</p><p><b>맞는 경우</b>행정동 경계와 실제 상권이 어긋나는 매장</p></div></li>
</ol>
</div>

.dk-map3{display:grid;grid-template-columns:520px minmax(0,1fr);gap:44px;align-items:center}
.dk-map3 svg{display:block}
.dk-map3 .bg{fill:var(--soft)}
.dk-map3 .rd{fill:none;stroke:var(--card);stroke-width:9}
.dk-map3 .rd2{fill:none;stroke:var(--card);stroke-width:4}
.dk-map3 .z1{fill:var(--g2);fill-opacity:.28;stroke:var(--g3);stroke-width:1.5;stroke-dasharray:6 4}
.dk-map3 .z2{fill:var(--ac);fill-opacity:.14;stroke:var(--ac);stroke-width:2}
.dk-map3 .z3{fill:var(--ink);fill-opacity:.1;stroke:var(--ink);stroke-width:1.5}
.dk-map3 .st{fill:var(--ink);stroke:var(--card);stroke-width:3}
.dk-map3 .lb{font-size:13px;font-weight:700;fill:var(--ink)}
.dk-map3 .no circle{fill:var(--card);stroke:var(--g4);stroke-width:1.5}
.dk-map3 .no text{font-size:13px;font-weight:700;fill:var(--ink)}
.dk-map3 .no.hot circle{fill:var(--ac);stroke:var(--ac)}
.dk-map3 .no.hot text{fill:var(--card)}
.dk-map3 ol{list-style:none;margin:0;padding:0}
.dk-map3 li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.dk-map3 li:first-child{border-top:1px solid var(--line2)}
.dk-map3 .n{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--g4);font-size:var(--f-sm);font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.dk-map3 .hot .n{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-map3 h3{margin:0 0 6px;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-map3 .hot h3{color:var(--ac)}
.dk-map3 li p{margin:2px 0 0;font-size:var(--f-body);color:var(--ink2);line-height:1.45;display:grid;grid-template-columns:76px minmax(0,1fr)}
.dk-map3 li p b{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-top:3px}