diff --git a/index.html b/index.html
index c0f279b..07a38ac 100644
--- a/index.html
+++ b/index.html
@@ -18,11 +18,30 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
 #map { flex: 1; }
 
 .sb-header {
-  padding: 14px 16px 12px; border-bottom: 1px solid #d0d4dc;
+  padding: 12px 14px 10px; border-bottom: 1px solid #d0d4dc;
   background: #fff;
 }
-.sb-header h1 { font-size: 19px; }
-.sb-header h1 small { font-size: 12px; color: #666; font-weight: normal; }
+.sb-header h1 { font-size: 18px; display: flex; align-items: center; gap: 6px; }
+.sb-header h1 small { font-size: 11px; color: #666; font-weight: normal; }
+.api-row {
+  display: flex; gap: 4px; margin-top: 6px; align-items: center;
+}
+.api-row input {
+  flex: 1; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px;
+  font-size: 11px; font-family: monospace;
+}
+.api-row button {
+  padding: 4px 8px; border: 1px solid #aaa; border-radius: 4px;
+  background: #fff; cursor: pointer; font-size: 11px; white-space: nowrap;
+}
+.api-row button:hover { background: #e9ecef; }
+.api-row .api-status {
+  font-size: 10px; padding: 2px 6px; border-radius: 3px;
+  cursor: default;
+}
+.api-status.ok { background: #c6f6d5; color: #22543d; }
+.api-status.warn { background: #fefcbf; color: #744210; }
+.api-status.off { background: #fed7d7; color: #822727; }
 
 .sb-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
 .sb-footer {
@@ -55,7 +74,6 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
 }
 .filter-btns button.active { background: #2b6cb0; color: #fff; border-color: #2b6cb0; }
 
-/* ─── Boundary Section ─── */
 .boundary-section {
   background: #fff; border-radius: 8px; border: 1px solid #d0d4dc;
   margin-bottom: 8px; overflow: hidden;
@@ -86,10 +104,9 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
 }
 .boundary-status.loading { color: #2b6cb0; }
 .boundary-status.error { color: #e53e3e; }
+.boundary-status.warn { color: #d69e2e; }
 
-/* ─── Flag list ─── */
 #flag-list { list-style: none; }
-
 .flag-item {
   background: #fff; border-radius: 8px; border: 2px solid transparent;
   margin-bottom: 5px; overflow: hidden;
@@ -174,7 +191,12 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
 
 <div id="sidebar">
   <div class="sb-header">
-    <h1>🚩 Flag Placer <small>click a flag → click map</small></h1>
+    <h1>🚩 Flag Placer <small>VWORLD + fallback</small></h1>
+    <div class="api-row">
+      <input type="text" id="api-key-input" placeholder="VWORLD API Key" />
+      <button id="api-key-btn">Apply</button>
+      <span class="api-status" id="api-status" title="Current service status">---</span>
+    </div>
   </div>
 
   <div class="sb-body">
@@ -191,7 +213,6 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
       </div>
     </div>
 
-    <!-- Administrative Boundaries -->
     <div class="boundary-section">
       <div class="boundary-header" id="boundary-toggle">
         <span>🗺️ 서울 행정구역 경계</span>
@@ -199,9 +220,7 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
       </div>
       <div class="boundary-body" id="boundary-body">
         <div class="boundary-row">
-          <select id="gu-select">
-            <option value="">— 구를 선택하세요 —</option>
-          </select>
+          <select id="gu-select"><option value="">— 구를 선택하세요 —</option></select>
           <button id="clear-boundary">Clear</button>
         </div>
         <div class="boundary-status" id="boundary-status"></div>
@@ -223,18 +242,202 @@ body { font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; color:
 <div id="map"></div>
 
 <script>
-// ─── State ────────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── VWORLD API Key ──────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+const VWORLD_KEY = 'vworld_api_key';
+const DEFAULT_KEY = 'E1FD0345-8021-3C9C-A397-CE0D88736D78';
+
+function getKey() { return localStorage.getItem(VWORLD_KEY) || ''; }
+function saveKey(k) { localStorage.setItem(VWORLD_KEY, k); }
+if (!localStorage.getItem(VWORLD_KEY)) saveKey(DEFAULT_KEY);
+
+// ═══════════════════════════════════════════════════════════
+// ─── Fetch with timeout ──────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+async function fetchWithTimeout(url, timeout = 10000, options = {}) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), timeout);
+  try {
+    const resp = await fetch(url, { ...options, signal: ctrl.signal });
+    return resp;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+function jsonpFetch(url, callbackParam = 'callback', timeout = 15000) {
+  return new Promise((resolve, reject) => {
+    const cbName = '_vw' + Date.now() + Math.random().toString(36).slice(2, 6);
+    const sep = url.includes('?') ? '&' : '?';
+    const script = document.createElement('script');
+    script.src = url + sep + callbackParam + '=' + cbName;
+
+    const timer = setTimeout(() => { cleanup(); reject(new Error('JSONP timeout')); }, timeout);
+
+    window[cbName] = (data) => { cleanup(); resolve(data); };
+
+    function cleanup() {
+      clearTimeout(timer);
+      delete window[cbName];
+      if (script.parentNode) script.parentNode.removeChild(script);
+    }
+
+    script.onerror = () => { cleanup(); reject(new Error('JSONP load error')); };
+    document.head.appendChild(script);
+  });
+}
+
+// ═══════════════════════════════════════════════════════════
+// ─── Map (VWORLD → OSM fallback) ─────────────────────────
+// ═══════════════════════════════════════════════════════════
+const map = L.map('map').setView([37.5665, 126.978], 7);
+let tileLayer = null;
+let tileService = 'none';
+
+function updateApiStatus(className, text) {
+  const el = document.getElementById('api-status');
+  el.className = 'api-status ' + className;
+  el.textContent = text;
+}
+
+let tileFallbackDone = false;
+
+function setupTileLayer(key) {
+  if (tileLayer) map.removeLayer(tileLayer);
+  tileFallbackDone = false;
+
+  if (key) {
+    tileLayer = L.tileLayer(
+      `https://api.vworld.kr/req/wmts/1.0.0/${key}/Base/{z}/{y}/{x}.png`,
+      { maxZoom: 20, attribution: 'VWORLD' }
+    );
+    tileService = 'vworld';
+
+    let errorCount = 0;
+    tileLayer.on('tileerror', () => {
+      if (tileFallbackDone) return;
+      errorCount++;
+      if (errorCount >= 3) {
+        tileFallbackDone = true;
+        console.warn('VWORLD tiles failed, falling back to OSM');
+        map.removeLayer(tileLayer);
+        tileLayer = L.tileLayer(
+          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+          { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }
+        ).addTo(map);
+        tileService = 'osm';
+        updateApiStatus('warn', 'OSM (VWORLD 타일 실패)');
+      }
+    });
+  } else {
+    tileLayer = L.tileLayer(
+      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      { maxZoom: 19, attribution: '&copy; OpenStreetMap contributors' }
+    );
+    tileService = 'osm';
+  }
+
+  tileLayer.addTo(map);
+  updateApiStatus(
+    key && tileService === 'vworld' ? 'ok' : 'off',
+    tileService === 'vworld' ? 'VWORLD' : 'OSM'
+  );
+}
+
+// ═══════════════════════════════════════════════════════════
+// ─── Reverse Geocode (VWORLD → Nominatim fallback) ──────
+// ═══════════════════════════════════════════════════════════
+let geocodeService = 'vworld';
+const geocodeQueue = [];
+let geocodeBusy = false;
+let lastGeocodeTs = 0;
+
+async function processGeocodeQueue() {
+  if (geocodeBusy || geocodeQueue.length === 0) return;
+  geocodeBusy = true;
+
+  while (geocodeQueue.length > 0) {
+    const flag = geocodeQueue.shift();
+    const minGap = geocodeService === 'vworld' ? 200 : 1100;
+    const elapsed = Date.now() - lastGeocodeTs;
+    if (elapsed < minGap) await new Promise(r => setTimeout(r, minGap - elapsed));
+
+    try {
+      const key = getKey();
+      if (geocodeService === 'vworld' && key) {
+        const url = 'https://api.vworld.kr/req/address?' +
+          'service=address&request=getaddress&version=2.0' +
+          '&crs=epsg:4326&point=' + flag.lng + ',' + flag.lat +
+          '&format=json&type=both&key=' + key;
+        const data = await jsonpFetch(url, 'callback', 8000);
+        if (data.response?.status === 'OK' && data.response.result?.length > 0) {
+          flag.address = data.response.result[0].text || 'Unknown';
+        } else {
+          throw new Error('VWORLD geocode error');
+        }
+      } else {
+        throw new Error('use fallback');
+      }
+    } catch {
+      if (geocodeService === 'vworld') {
+        console.warn('VWORLD geocode failed → Nominatim');
+        geocodeService = 'nominatim';
+        updateApiStatus('warn', 'VWORLD, 지오코딩:Nominatim');
+      }
+      // Nominatim fallback (1.1s gap already enforced)
+      try {
+        const resp = await fetchWithTimeout(
+          `https://nominatim.openstreetmap.org/reverse?lat=${flag.lat}&lon=${flag.lng}&format=json`, 8000);
+        if (resp.ok) {
+          const data = await resp.json();
+          flag.address = data.display_name || 'Unknown';
+        }
+      } catch {
+        flag.address = 'Unknown';
+      }
+    }
+
+    lastGeocodeTs = Date.now();
+    renderList();
+  }
+
+  geocodeBusy = false;
+}
+
+function scheduleGeocode(flag) {
+  geocodeQueue.push(flag);
+  processGeocodeQueue();
+}
+
+// ═══════════════════════════════════════════════════════════
+// ─── State ──────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 let flags = [];
 let nextId = 1;
 let selectedFlagId = null;
 let filterMode = 'all';
 
-const map = L.map('map').setView([37.5665, 126.978], 7);
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-  maxZoom: 19, attribution: '&copy; OpenStreetMap contributors'
-}).addTo(map);
+// ═══════════════════════════════════════════════════════════
+// ─── API Key UI ──────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+const apiKeyInput = document.getElementById('api-key-input');
+apiKeyInput.value = getKey();
+setupTileLayer(getKey());
 
-// ─── Helpers ──────────────────────────────────────────────
+document.getElementById('api-key-btn').addEventListener('click', () => {
+  const key = apiKeyInput.value.trim();
+  saveKey(key);
+  geocodeService = 'vworld';
+  boundaryService = 'vworld';
+  setupTileLayer(key);
+  if (currentGu) showBoundaries(currentGu);
+  else clearBoundaries();
+});
+
+// ═══════════════════════════════════════════════════════════
+// ─── Helpers ────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 function makeNumIcon(num) {
   return L.divIcon({
     html: `<div class="num-marker">${num}</div>`,
@@ -243,8 +446,7 @@ function makeNumIcon(num) {
 }
 
 function getFilteredFlags() {
-  if (filterMode === 'unplaced') return flags.filter(f => !f.placed);
-  return flags;
+  return filterMode === 'unplaced' ? flags.filter(f => !f.placed) : flags;
 }
 
 function esc(s) {
@@ -252,30 +454,9 @@ function esc(s) {
     ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[c]);
 }
 
-// ─── Reverse Geocode ─────────────────────────────────────
-let geocodeQueue = Promise.resolve();
-
-async function reverseGeocode(lat, lng) {
-  const resp = await fetch(
-    `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`
-  );
-  if (!resp.ok) return 'Unknown';
-  const data = await resp.json();
-  return data.display_name || 'Unknown';
-}
-
-function scheduleGeocode(flag) {
-  geocodeQueue = geocodeQueue.then(async () => {
-    await new Promise(r => setTimeout(r, 1200));
-    try {
-      flag.address = await reverseGeocode(flag.lat, flag.lng);
-    } catch { flag.address = 'Unknown'; }
-    renderList();
-    return Promise.resolve();
-  });
-}
-
-// ─── Photo handling ──────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Photo ─────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 function handlePhotoUpload(flagId, file) {
   const flag = flags.find(f => f.id === flagId);
   if (!flag || !file) return;
@@ -291,12 +472,13 @@ function removePhoto(flagId) {
   renderList();
 }
 
-// ─── Render ──────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Render ────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 function renderList() {
   const el = document.getElementById('flag-list');
   const filtered = getFilteredFlags();
   const placed = flags.filter(f => f.placed).length;
-
   document.getElementById('stats').textContent = `${placed} / ${flags.length} placed`;
 
   if (filtered.length === 0) {
@@ -310,18 +492,18 @@ function renderList() {
   filtered.forEach((flag) => {
     const globalIdx = flags.indexOf(flag) + 1;
     const isSelected = selectedFlagId === flag.id;
-
     const li = document.createElement('li');
     li.className = 'flag-item' + (isSelected ? ' selected' : '');
     li.dataset.id = flag.id;
 
     const header = document.createElement('div');
     header.className = 'flag-header';
-
     let detailText = '';
     if (flag.placed) {
       detailText = `📍 ${flag.lat.toFixed(4)}, ${flag.lng.toFixed(4)}`;
-      if (flag.address) detailText += ` · 🏷 ${flag.address.substring(0, 40)}${flag.address.length > 40 ? '…' : ''}`;
+      if (flag.address) {
+        detailText += ' · 🏷 ' + esc(flag.address.substring(0, 40)) + (flag.address.length > 40 ? '…' : '');
+      }
     }
 
     header.innerHTML = `
@@ -336,131 +518,97 @@ function renderList() {
         ${!flag.placed
           ? `<button class="place-btn">Place</button>`
           : `<button class="remove-btn">✕</button>`}
-      </div>
-    `;
+      </div>`;
 
     header.addEventListener('click', (e) => {
       if (e.target.closest('.actions')) return;
       flag.expanded = !flag.expanded;
       renderList();
     });
-
     li.appendChild(header);
 
     const body = document.createElement('div');
     body.className = 'flag-body' + (flag.expanded ? ' open' : '');
-
-    let bodyHTML = '';
+    let bHTML = '';
     if (flag.placed) {
-      bodyHTML += `<div class="detail-row">
-        <span class="label">Coordinates:</span>
-        <span>${flag.lat.toFixed(6)}, ${flag.lng.toFixed(6)}</span>
-      </div>`;
-      bodyHTML += `<div class="detail-row">
-        <span class="label">Address:</span>
-        <span>${flag.address ? esc(flag.address) : '<span class="address-loading">Loading…</span>'}</span>
-      </div>`;
+      bHTML += `<div class="detail-row"><span class="label">Coordinates:</span>
+        <span>${flag.lat.toFixed(6)}, ${flag.lng.toFixed(6)}</span></div>`;
+      bHTML += `<div class="detail-row"><span class="label">Address:</span>
+        <span>${flag.address ? esc(flag.address) : '<span class="address-loading">Loading…</span>'}</span></div>`;
     }
-
-    bodyHTML += `<div class="photo-section">
-      <div class="photo-label">📷 Photo</div>`;
-    if (flag.photoData) {
-      bodyHTML += `<div class="photo-preview"><img src="${flag.photoData}" alt="Photo" /></div>`;
-    }
-    bodyHTML += `<div class="photo-actions">
+    bHTML += `<div class="photo-section"><div class="photo-label">📷 Photo</div>`;
+    if (flag.photoData) bHTML += `<div class="photo-preview"><img src="${flag.photoData}" alt="Photo" /></div>`;
+    bHTML += `<div class="photo-actions">
         <label class="photo-btn">${flag.photoData ? 'Change Photo' : 'Upload Photo'}
           <input type="file" accept="image/*" class="photo-input" />
         </label>`;
-    if (flag.photoData) {
-      bodyHTML += `<button class="photo-btn danger" data-action="remove-photo">Remove</button>`;
-    }
-    bodyHTML += `</div></div>`;
-
-    body.innerHTML = bodyHTML;
-
-    fileInput = body.querySelector('.photo-input');
-    if (fileInput) {
-      fileInput.addEventListener('change', (e) => { handlePhotoUpload(flag.id, e.target.files[0]); });
-    }
-    removeBtn = body.querySelector('[data-action="remove-photo"]');
-    if (removeBtn) {
-      removeBtn.addEventListener('click', () => removePhoto(flag.id));
-    }
+    if (flag.photoData) bHTML += `<button class="photo-btn danger" data-action="remove-photo">Remove</button>`;
+    bHTML += `</div></div>`;
+    body.innerHTML = bHTML;
 
+    body.querySelector('.photo-input')?.addEventListener('change',
+      (e) => handlePhotoUpload(flag.id, e.target.files[0]));
+    body.querySelector('[data-action="remove-photo"]')?.addEventListener('click',
+      () => removePhoto(flag.id));
     li.appendChild(body);
 
     header.querySelector('.place-btn')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      selectedFlagId = flag.id;
-      renderList();
+      e.stopPropagation(); selectedFlagId = flag.id; renderList();
     });
-
     header.querySelector('.remove-btn')?.addEventListener('click', (e) => {
-      e.stopPropagation();
-      removeFlag(flag.id);
+      e.stopPropagation(); removeFlag(flag.id);
     });
-
     el.appendChild(li);
   });
 }
 
-let fileInput, removeBtn;
-
-// ─── Flag Operations ─────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Flag Ops ───────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 function removeFlag(id) {
   const flag = flags.find(f => f.id === id);
   if (!flag || !flag.placed) return;
   if (flag.marker) map.removeLayer(flag.marker);
-  flag.placed = false;
-  flag.lat = null;
-  flag.lng = null;
-  flag.address = null;
-  flag.marker = null;
+  flag.placed = false; flag.lat = null; flag.lng = null;
+  flag.address = null; flag.marker = null;
   if (selectedFlagId === id) selectedFlagId = null;
   renderList();
 }
 
 function addFlag(name, number) {
-  const flag = {
-    id: nextId++, name, number,
+  const flag = { id: nextId++, name, number,
     placed: false, lat: null, lng: null, address: null,
-    marker: null, expanded: false, photoData: null
-  };
+    marker: null, expanded: false, photoData: null };
   flags.push(flag);
   return flag;
 }
 
-// ─── Map Click ────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Map Click ──────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 map.on('click', (e) => {
   if (!selectedFlagId) { alert('Select a flag from the list first.'); return; }
   const flag = flags.find(f => f.id === selectedFlagId);
   if (!flag || flag.placed) return;
 
   const { lat, lng } = e.latlng;
-  const globalIdx = flags.indexOf(flag) + 1;
-  const marker = L.marker([lat, lng], { icon: makeNumIcon(globalIdx), draggable: true }).addTo(map);
+  const idx = flags.indexOf(flag) + 1;
+  const marker = L.marker([lat, lng], { icon: makeNumIcon(idx), draggable: true }).addTo(map);
   marker.bindTooltip(`${flag.name}${flag.number ? ' (' + flag.number + ')' : ''}`, { direction: 'top' });
-
   marker.on('dragend', () => {
-    const pos = marker.getLatLng();
-    flag.lat = pos.lat;
-    flag.lng = pos.lng;
-    scheduleGeocode(flag);
-    renderList();
+    const p = marker.getLatLng(); flag.lat = p.lat; flag.lng = p.lng;
+    scheduleGeocode(flag); renderList();
   });
   marker.on('contextmenu', () => { removeFlag(flag.id); });
-
-  flag.placed = true;
-  flag.lat = lat;
-  flag.lng = lng;
-  flag.marker = marker;
+  flag.placed = true; flag.lat = lat; flag.lng = lng; flag.marker = marker;
   selectedFlagId = null;
-
   renderList();
   scheduleGeocode(flag);
 });
 
-// ─── Filter ───────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Filters ────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 document.getElementById('filter-all').addEventListener('click', () => {
   filterMode = 'all';
   document.querySelectorAll('.filter-btns button').forEach(b => b.classList.remove('active'));
@@ -474,53 +622,39 @@ document.getElementById('filter-unplaced').addEventListener('click', () => {
   renderList();
 });
 
-// ─── Excel Import ─────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Excel Import ───────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 document.getElementById('file-input').addEventListener('change', async (e) => {
   const file = e.target.files[0];
   if (!file) return;
-
   for (const f of flags) { if (f.marker) map.removeLayer(f.marker); }
-  flags = [];
-  nextId = 1;
-  selectedFlagId = null;
+  flags = []; nextId = 1; selectedFlagId = null;
 
   const data = await file.arrayBuffer();
   const wb = XLSX.read(data, { type: 'array' });
-  const ws = wb.Sheets[wb.SheetNames[0]];
-  const rows = XLSX.utils.sheet_to_json(ws, { defval: '' });
+  const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { defval: '' });
 
   for (const row of rows) {
     const name = row.Name || row.name || row.이름 || row['Flag Name'] || Object.values(row)[0] || '';
     const number = row.Number || row.number || row.숫자 || row['Flag Number'] || Object.values(row)[1] || '';
-    const nameStr = String(name).trim();
-    if (!nameStr) continue;
-
-    const flag = addFlag(nameStr, String(number).trim());
+    if (!String(name).trim()) continue;
+    const flag = addFlag(String(name).trim(), String(number).trim());
 
     let lat = parseFloat(row.Latitude || row.latitude || row.위도);
     let lng = parseFloat(row.Longitude || row.longitude || row.경도);
     if (!isNaN(lat) && !isNaN(lng)) {
-      const globalIdx = flags.indexOf(flag) + 1;
-      const marker = L.marker([lat, lng], { icon: makeNumIcon(globalIdx), draggable: true }).addTo(map);
+      const idx = flags.indexOf(flag) + 1;
+      const marker = L.marker([lat, lng], { icon: makeNumIcon(idx), draggable: true }).addTo(map);
       marker.bindTooltip(`${flag.name}${flag.number ? ' (' + flag.number + ')' : ''}`, { direction: 'top' });
       marker.on('dragend', () => {
-        const pos = marker.getLatLng();
-        flag.lat = pos.lat;
-        flag.lng = pos.lng;
-        scheduleGeocode(flag);
-        renderList();
+        const p = marker.getLatLng(); flag.lat = p.lat; flag.lng = p.lng;
+        scheduleGeocode(flag); renderList();
       });
       marker.on('contextmenu', () => { removeFlag(flag.id); });
-      flag.placed = true;
-      flag.lat = lat;
-      flag.lng = lng;
-      flag.marker = marker;
-
-      if (row.Address || row.address || row.주소) {
-        flag.address = String(row.Address || row.address || row.주소);
-      } else {
-        scheduleGeocode(flag);
-      }
+      flag.placed = true; flag.lat = lat; flag.lng = lng; flag.marker = marker;
+      if (row.Address || row.address || row.주소) flag.address = String(row.Address || row.address || row.주소);
+      else scheduleGeocode(flag);
     }
   }
 
@@ -528,38 +662,29 @@ document.getElementById('file-input').addEventListener('change', async (e) => {
     document.getElementById('export-btn').disabled = false;
     map.invalidateSize();
   }
-
   renderList();
-
-  const placedFlags = flags.filter(f => f.placed);
-  if (placedFlags.length > 0) {
-    const group = L.featureGroup(placedFlags.map(f => f.marker));
-    map.fitBounds(group.getBounds().pad(0.1));
-  }
+  const pf = flags.filter(f => f.placed);
+  if (pf.length > 0) map.fitBounds(L.featureGroup(pf.map(f => f.marker)).getBounds().pad(0.1));
 });
 
-// ─── Download Template ────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Template & Export ─────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 document.getElementById('template-btn').addEventListener('click', () => {
   const wb = XLSX.utils.book_new();
-  const data = [
+  XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet([
     { Name: 'Flag 1', Number: 'A001' },
     { Name: 'Flag 2', Number: 'A002' },
     { Name: 'Flag 3', Number: 'A003' },
-  ];
-  const ws = XLSX.utils.json_to_sheet(data);
-  XLSX.utils.book_append_sheet(wb, ws, 'Flags');
+  ]), 'Flags');
   XLSX.writeFile(wb, 'flag_template.xlsx');
 });
 
-// ─── Export ───────────────────────────────────────────────
 document.getElementById('export-btn').addEventListener('click', () => {
   const rows = flags.map(f => ({
-    Name: f.name,
-    Number: f.number,
+    Name: f.name, Number: f.number,
     Status: f.placed ? 'Placed' : 'Unplaced',
-    Latitude: f.lat ?? '',
-    Longitude: f.lng ?? '',
-    Address: f.address ?? '',
+    Latitude: f.lat ?? '', Longitude: f.lng ?? '', Address: f.address ?? '',
   }));
   const wb = XLSX.utils.book_new();
   const ws = XLSX.utils.json_to_sheet(rows);
@@ -568,15 +693,16 @@ document.getElementById('export-btn').addEventListener('click', () => {
   XLSX.writeFile(wb, 'flag_export.xlsx');
 });
 
-// ─── Keyboard ─────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
+// ─── Keyboard ───────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') { selectedFlagId = null; renderList(); }
 });
 
 // ═══════════════════════════════════════════════════════════
-// ─── Administrative Boundaries (서울 구/동 경계) ─────────
+// ─── Admin Boundaries (VWORLD → Overpass fallback) ─────
 // ═══════════════════════════════════════════════════════════
-
 const SEOUL_GUS = [
   '종로구','중구','용산구','성동구','광진구','동대문구','중랑구',
   '성북구','강북구','도봉구','노원구','은평구','서대문구','마포구',
@@ -584,13 +710,6 @@ const SEOUL_GUS = [
   '서초구','강남구','송파구','강동구'
 ];
 
-const OVERPASS_URL = 'https://overpass-api.de/api/interpreter';
-
-let boundaryLayer = null; // single L.geoJSON layer for all boundary geo
-let currentGu = null;
-let boundaryLoading = false;
-
-// Populate the select
 const guSelect = document.getElementById('gu-select');
 SEOUL_GUS.forEach(g => {
   const opt = document.createElement('option');
@@ -598,116 +717,171 @@ SEOUL_GUS.forEach(g => {
   guSelect.appendChild(opt);
 });
 
+let boundaryLayer = null;
+let currentGu = null;
+let boundaryLoading = false;
+let boundaryService = 'vworld';
+
 function setBoundaryStatus(msg, type) {
-  const el = document.getElementById('boundary-status');
-  el.textContent = msg;
-  el.className = 'boundary-status' + (type ? ' ' + type : '');
+  document.getElementById('boundary-status').textContent = msg;
+  document.getElementById('boundary-status').className = 'boundary-status' + (type ? ' ' + type : '');
 }
 
 function clearBoundaries() {
   if (boundaryLayer) { map.removeLayer(boundaryLayer); boundaryLayer = null; }
-  currentGu = null;
-  guSelect.value = '';
+  currentGu = null; guSelect.value = '';
   setBoundaryStatus('');
 }
 
-function overpassQuery(query) {
-  return fetch(OVERPASS_URL, {
+// ── Overpass fallback ──
+async function overpassQuery(query) {
+  const resp = await fetchWithTimeout('https://overpass-api.de/api/interpreter', 30000, {
     method: 'POST',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     body: 'data=' + encodeURIComponent(query)
-  }).then(r => r.json());
+  });
+  if (!resp.ok) throw new Error('Overpass API error: ' + resp.status);
+  const text = await resp.text();
+  try { return JSON.parse(text); } catch { throw new Error('Overpass: invalid JSON response'); }
 }
 
-// Convert Overpass relation (with out geom) → GeoJSON polygon(s)
-function relationToGeoJSON(el) {
-  if (el.type !== 'relation' || !el.members) return null;
-
-  const outerRings = [];
-  const innerRings = [];
-
-  for (const m of el.members) {
-    if (m.role === 'outer' && m.geometry) {
-      const coords = m.geometry.map(g => [g.lon, g.lat]);
-      if (coords.length >= 3 && isClosed(coords)) {
-        outerRings.push(coords);
-      }
-    }
-    if (m.role === 'inner' && m.geometry) {
-      const coords = m.geometry.map(g => [g.lon, g.lat]);
-      if (coords.length >= 3 && isClosed(coords)) {
-        innerRings.push(coords);
-      }
-    }
-  }
-
-  if (outerRings.length === 0) return null;
-
-  // Build polygons: each outer + its following inner rings as holes
-  const polygons = [];
-  for (const outer of outerRings) {
-    const poly = [outer];
-    // Simple heuristic: assign inners that likely belong to this outer
-    // In practice each relation usually has 1 outer and N inners
-    if (innerRings.length > 0 && outerRings.length === 1) {
-      poly.push(...innerRings);
-    }
-    polygons.push(poly);
-  }
-
-  if (polygons.length === 1) {
-    return { type: 'Polygon', coordinates: polygons[0] };
-  }
-  return { type: 'MultiPolygon', coordinates: polygons };
+function ptDist(a, b) {
+  return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
 }
 
-function isClosed(coords) {
-  const first = coords[0];
-  const last = coords[coords.length - 1];
-  return first[0] === last[0] && first[1] === last[1];
-}
-
-// Collect all members' geometry into rings even from different elements
-function collectRings(elements, role) {
+function assembleRings(segments) {
+  if (segments.length === 0) return [];
+  const EPS = 0.001;
+  const copy = segments.map(s => [...s]);
   const rings = [];
-  for (const el of elements) {
-    if (el.type === 'relation') {
-      for (const m of el.members) {
-        if (m.role === role && m.geometry) {
-          const coords = m.geometry.map(g => [g.lon, g.lat]);
-          if (coords.length >= 3 && isClosed(coords)) rings.push(coords);
+  while (copy.length > 0) {
+    let ring = copy.shift();
+    let changed;
+    do {
+      changed = false;
+      for (let i = copy.length - 1; i >= 0; i--) {
+        const seg = copy[i];
+        const rs = ring[0], re = ring[ring.length - 1];
+        const ss = seg[0], se = seg[seg.length - 1];
+        if (ptDist(re, ss) < EPS) {
+          ring.push(...seg.slice(1)); copy.splice(i, 1); changed = true;
+        } else if (ptDist(re, se) < EPS) {
+          seg.reverse(); ring.push(...seg.slice(1)); copy.splice(i, 1); changed = true;
+        } else if (ptDist(rs, se) < EPS) {
+          ring.unshift(...seg.slice(0, -1)); copy.splice(i, 1); changed = true;
+        } else if (ptDist(rs, ss) < EPS) {
+          seg.reverse(); ring.unshift(...seg.slice(0, -1)); copy.splice(i, 1); changed = true;
         }
       }
+    } while (changed);
+    if (ring.length >= 3) rings.push(ring);
+  }
+  const areas = rings.map(r => {
+    let a = 0;
+    for (let i = 0; i < r.length; i++) {
+      const j = (i + 1) % r.length;
+      a += r[i][0] * r[j][1] - r[j][0] * r[i][1];
     }
-    // Some responses return ways directly
-    if (el.type === 'way' && el.geometry) {
-      const coords = el.geometry.map(g => [g.lon, g.lat]);
-      if (coords.length >= 3 && isClosed(coords)) rings.push(coords);
+    return Math.abs(a) / 2;
+  });
+  const maxArea = Math.max(...areas);
+  return rings.filter((_, i) => areas[i] > maxArea * 0.01);
+}
+
+function relationToGeoJSON(el) {
+  if (!el?.members) return null;
+  const outers = [], inners = [];
+  for (const m of el.members) {
+    if ((m.role === 'outer' || m.role === 'inner') && m.geometry) {
+      const coords = m.geometry.map(g => [g.lon, g.lat]);
+      if (coords.length >= 3) (m.role === 'outer' ? outers : inners).push(coords);
     }
   }
-  return rings;
+  if (outers.length === 0) return null;
+  const outerRings = assembleRings(outers);
+  if (outerRings.length === 0) return null;
+  const innerRings = assembleRings(inners);
+  const polygons = outerRings.map(r => [r]);
+  if (innerRings.length > 0 && outerRings.length === 1) polygons[0].push(...innerRings);
+  return polygons.length === 1
+    ? { type: 'Polygon', coordinates: polygons[0] }
+    : { type: 'MultiPolygon', coordinates: polygons };
 }
 
-async function fetchGuBoundary(guName) {
-  const q = `[out:json][timeout:30];
-area["name"="서울특별시"]["boundary"="administrative"]->.seoul;
-rel(area.seoul)["boundary"="administrative"]["name"="${guName}"];
-out geom;`;
-  const data = await overpassQuery(q);
-  if (!data.elements || data.elements.length === 0) return null;
-  return data.elements[0];
+async function showBoundariesOverpass(guName) {
+  const [guData, dongData] = await Promise.all([
+    overpassQuery(`[out:json][timeout:30];
+      area["name"="서울특별시"]["boundary"="administrative"]->.seoul;
+      rel(area.seoul)["boundary"="administrative"]["name"="${guName}"]; out geom;`),
+    overpassQuery(`[out:json][timeout:30];
+      area["name"="서울특별시"]["boundary"="administrative"]->.seoul;
+      area["boundary"="administrative"]["name"="${guName}"]->.gu;
+      rel(area.seoul)(area.gu)["boundary"="administrative"]["admin_level"="9"]; out geom;`)
+  ]);
+
+  const features = [];
+  if (guData?.elements?.[0]) {
+    const g = relationToGeoJSON(guData.elements[0]);
+    if (g) features.push({ type: 'Feature', properties: { type: 'gu', name: guName }, geometry: g });
+  }
+  for (const el of dongData?.elements || []) {
+    const g = relationToGeoJSON(el);
+    if (g) features.push({ type: 'Feature', properties: { type: 'dong', name: el.tags?.name || '' }, geometry: g });
+  }
+  return features;
 }
 
-async function fetchDongBoundaries(guName) {
-  const q = `[out:json][timeout:30];
-area["name"="서울특별시"]["boundary"="administrative"]->.seoul;
-area["boundary"="administrative"]["name"="${guName}"]->.gu;
-rel(area.seoul)(area.gu)["boundary"="administrative"]["admin_level"="9"];
-out geom;`;
-  const data = await overpassQuery(q);
-  return data.elements || [];
+// ── VWORLD ──
+async function vworldDataQuery(params) {
+  const key = getKey();
+  if (!key) throw new Error('no key');
+  const q = new URLSearchParams({
+    key, service: 'data', request: 'GetFeature', version: '2.0',
+    format: 'json', crs: 'epsg:4326', geometry: 'true', size: '1000',
+    ...params
+  });
+  return jsonpFetch('https://api.vworld.kr/req/data?' + q.toString(), 'callback', 15000);
 }
 
+function extractFeatures(data) {
+  try {
+    if (data?.response?.result?.featureCollection?.features) return data.response.result.featureCollection.features;
+    if (data?.result?.featureCollection?.features) return data.result.featureCollection.features;
+    if (data?.response?.result?.features) return data.response.result.features;
+    if (data?.result?.features) return data.result.features;
+    if (data?.features) return data.features;
+  } catch {}
+  return [];
+}
+
+async function showBoundariesVworld(guName) {
+  const filter = 'full_nm:like:서울특별시 ' + guName;
+  const [guData, dongData] = await Promise.all([
+    vworldDataQuery({ data: 'LT_C_ADSIGG_INFO', attrFilter: filter }),
+    vworldDataQuery({ data: 'LT_C_ADEMD_INFO', attrFilter: filter })
+  ]);
+
+  const guFeatures = extractFeatures(guData);
+  const dongFeatures = extractFeatures(dongData);
+  const features = [];
+
+  if (guFeatures[0]) {
+    features.push({
+      type: 'Feature', properties: { type: 'gu', name: guName, ...(guFeatures[0].properties || {}) },
+      geometry: guFeatures[0].geometry
+    });
+  }
+  for (const f of dongFeatures) {
+    features.push({
+      type: 'Feature',
+      properties: { type: 'dong', name: f.properties?.emd_kor_nm || f.properties?.full_nm || '' },
+      geometry: f.geometry
+    });
+  }
+  return features;
+}
+
+// ── Unified boundary loader with fallback ──
 async function showBoundaries(guName) {
   if (boundaryLoading) return;
   boundaryLoading = true;
@@ -715,37 +889,21 @@ async function showBoundaries(guName) {
 
   try {
     clearBoundaries();
+    let features = [];
 
-    const [guElem, dongElems] = await Promise.all([
-      fetchGuBoundary(guName),
-      fetchDongBoundaries(guName)
-    ]);
-
-    const features = [];
-
-    // 구 boundary
-    if (guElem) {
-      const guGeo = relationToGeoJSON(guElem);
-      if (guGeo) {
-        features.push({
-          type: 'Feature',
-          properties: { type: 'gu', name: guName },
-          geometry: guGeo
-        });
+    if (getKey() && boundaryService === 'vworld') {
+      try {
+        features = await showBoundariesVworld(guName);
+        if (features.length === 0) throw new Error('no features');
+      } catch (e) {
+        console.warn('VWORLD boundaries failed → Overpass:', e);
+        boundaryService = 'overpass';
+        updateApiStatus('warn', 'VWORLD, 경계:Overpass');
       }
     }
 
-    // 동 boundaries
-    for (const el of dongElems) {
-      const dongGeo = relationToGeoJSON(el);
-      if (dongGeo) {
-        const dongName = el.tags?.name || el.tags?.admin_name || '';
-        features.push({
-          type: 'Feature',
-          properties: { type: 'dong', name: dongName },
-          geometry: dongGeo
-        });
-      }
+    if (features.length === 0) {
+      features = await showBoundariesOverpass(guName);
     }
 
     if (features.length === 0) {
@@ -755,52 +913,39 @@ async function showBoundaries(guName) {
     }
 
     boundaryLayer = L.geoJSON({ type: 'FeatureCollection', features }, {
-      style: (feature) => {
-        if (feature.properties.type === 'gu') {
-          return { color: '#2b6cb0', weight: 3, fill: false, opacity: 0.9 };
-        }
-        return {
-          color: '#4299e1', weight: 1.5, fill: true,
-          fillColor: '#4299e1', fillOpacity: 0.06, opacity: 0.7
-        };
-      },
-      onEachFeature: (feature, layer) => {
-        if (feature.properties.name) {
-          const label = feature.properties.type === 'gu'
-            ? `🗺️ ${feature.properties.name}`
-            : `📍 ${feature.properties.name}`;
-          layer.bindTooltip(label, { direction: 'center', sticky: true });
-        }
+      style: (f) => f.properties.type === 'gu'
+        ? { color: '#2b6cb0', weight: 3, fill: false, opacity: 0.9 }
+        : { color: '#4299e1', weight: 1.5, fill: true, fillColor: '#4299e1', fillOpacity: 0.06, opacity: 0.7 },
+      onEachFeature: (f, layer) => {
+        const nm = f.properties?.emd_kor_nm || f.properties?.name || '';
+        if (nm) layer.bindTooltip(
+          (f.properties.type === 'gu' ? '🗺️ ' : '📍 ') + nm,
+          { direction: 'center', sticky: true });
       }
     }).addTo(map);
 
     currentGu = guName;
-    setBoundaryStatus(`${dongElems.length} 동 경계 로딩됨 (${guName})`);
+    const src = boundaryService === 'vworld' ? 'VWORLD' : 'Overpass';
+    setBoundaryStatus(`동 ${features.length - 1}개 경계 로딩됨 (${src})`);
     map.fitBounds(boundaryLayer.getBounds().pad(0.05));
 
   } catch (err) {
     console.error(err);
-    setBoundaryStatus('Failed to load boundaries.', 'error');
+    setBoundaryStatus('Failed: ' + (err.message || 'Unknown'), 'error');
   }
 
   boundaryLoading = false;
 }
 
-// ─── Boundary UI Events ───────────────────────────────────
+// ── Boundary UI ──
 guSelect.addEventListener('change', () => {
-  const val = guSelect.value;
-  if (!val) { clearBoundaries(); return; }
-  showBoundaries(val);
+  if (!guSelect.value) { clearBoundaries(); return; }
+  showBoundaries(guSelect.value);
 });
-
 document.getElementById('clear-boundary').addEventListener('click', clearBoundaries);
-
-// Collapsible section
 document.getElementById('boundary-toggle').addEventListener('click', () => {
-  const body = document.getElementById('boundary-body');
-  const chevron = document.getElementById('boundary-chevron');
-  const isOpen = body.classList.toggle('open');
-  chevron.classList.toggle('open', isOpen);
+  document.getElementById('boundary-body').classList.toggle('open');
+  document.getElementById('boundary-chevron').classList.toggle('open');
 });
 </script>
 </body>
diff --git a/server.py b/server.py
index 1c1965e..a6372cb 100644
--- a/server.py
+++ b/server.py
@@ -5,5 +5,5 @@ PORT = 8000
 Handler = http.server.SimpleHTTPRequestHandler
 
 with socketserver.TCPServer(("", PORT), Handler) as httpd:
-    print(f"Serving at http://localhost:{PORT}")
+    print(f"Serving at http://0.0.0.0:{PORT}")
     httpd.serve_forever()