타깃 지역 칸(동 단위 색칠)

반경 설정이 안 되고 동 단위로만 고르는 매체에서 타깃 동, 제외 동, 미선택 동을 칸 색으로 구분해 보이는 도식. 플레이스 광고 타깃 동 목록, 지점별 담당 구역 나누기에 사용. 칸 9~12개(3~4열), 상태 3종(매장 소재 동 1개 강조, 타깃 동, 제외 동), 오른쪽 기준 3줄. 값 바꾸는 법: 칸마다 동 이름(b)과 상태 class 를 교체: "t st" 매장 소재 동(1개만), "t on" 타깃 동, "t ex" 제외 동, "t" 미선택. 칸의 배치는 실제 인접 관계에 가깝게 순서만 조정. 칸 9개면 grid-template-columns 를 repeat(3,…)로. 예시 동 이름은 가상.

행정구역을 같은 크기 칸으로 놓는 표기는 Financial Times Visual Vocabulary 의 equalised cartogram 항목 https://ft-interactive.github.io/visual-vocabulary/ 참고. 실제 지도 대신 칸 배치로 인접 관계만 보이는 직접 제작.

<div class="dk dk-tiles">
<div class="map">
<div class="t ex"><b>공단동</b><span>제외</span></div>
<div class="t on"><b>대학동</b><span>타깃</span></div>
<div class="t on"><b>호수동</b><span>타깃</span></div>
<div class="t"><b>강변동</b><span>미선택</span></div>
<div class="t on"><b>터미널동</b><span>타깃</span></div>
<div class="t st"><b>중앙동</b><span>매장 소재 동</span></div>
<div class="t on"><b>시청동</b><span>타깃</span></div>
<div class="t on"><b>신시가동</b><span>타깃</span></div>
<div class="t"><b>구시가동</b><span>미선택</span></div>
<div class="t on"><b>시장동</b><span>타깃</span></div>
<div class="t ex"><b>역전동</b><span>제외</span></div>
<div class="t"><b>산단동</b><span>미선택</span></div>
</div>
<div class="r">
<p class="dk-lb">지역 타깃 기준</p>
<ul>
<li><b>선택 단위</b>동 단위 선택. 반경 설정 미지원</li>
<li><b>시작 범위</b>매장 소재 동과 인접 동 7곳으로 넓게 시작</li>
<li><b>조정</b>지역별 데이터 확인 후 전환 낮은 동부터 제외</li>
<li><b>다지점</b>인접 지점 간 타깃 동 중복 금지</li>
</ul>
<p class="lg"><span class="ls">매장 소재 동</span><span class="lt">타깃 동</span><span class="lx">제외 동</span><span>미선택</span></p>
</div>
</div>

.dk-tiles{display:grid;grid-template-columns:600px minmax(0,1fr);gap:48px;align-items:center}
.dk-tiles .map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dk-tiles .t{height:104px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--card);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
.dk-tiles .t b{font-size:var(--f-body);font-weight:700;color:var(--mu)}
.dk-tiles .t span{font-size:var(--f-cap);color:var(--mu)}
.dk-tiles .t.on{background:var(--g1);border-color:var(--g1)}
.dk-tiles .t.on b{color:var(--ink)}
.dk-tiles .t.on span{color:var(--ink2)}
.dk-tiles .t.st{background:var(--ac);border-color:var(--ac)}
.dk-tiles .t.st b,.dk-tiles .t.st span{color:var(--card)}
.dk-tiles .t.ex{border-style:dashed;border-color:var(--g3);background:none}
.dk-tiles .t.ex b{text-decoration:line-through}
.dk-tiles .r ul{list-style:none;margin:12px 0 0;padding:0}
.dk-tiles .r li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-tiles .r li:first-child{border-top:1px solid var(--line2)}
.dk-tiles .r li b{font-weight:700}
.dk-tiles .lg{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.dk-tiles .lg span{font-size:var(--f-cap);padding:3px 12px;border-radius:var(--r-sm);border:1px solid var(--line2);color:var(--mu)}
.dk-tiles .lg .ls{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-tiles .lg .lt{background:var(--g1);border-color:var(--g1);color:var(--ink)}
.dk-tiles .lg .lx{border-style:dashed;border-color:var(--g3)}