:root{font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;color:#20312e;--accent:#16765f;--border:#dce3de}*{box-sizing:border-box}body{margin:0;background:#edf1ee}#map{position:absolute;inset:0}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #17a481;outline-offset:3px}header{position:absolute;top:20px;left:24px;right:24px;z-index:20;display:flex;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;background:#fff;padding:10px 15px;border-radius:14px;box-shadow:0 4px 22px #223b2e12}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--accent);color:white;border-radius:10px;font-weight:800;font-size:22px}.brand b{letter-spacing:2px;font-size:16px}.brand small{display:block;font-size:10px;color:#728078;margin-top:3px}#panel-toggle{height:48px;padding:0 18px;border:1px solid var(--border);border-radius:12px;background:#fff;color:#294039}#panel-toggle span{margin-left:12px;font-size:20px}#panel{position:absolute;right:24px;top:82px;width:310px;max-height:calc(100dvh - 145px);overflow:auto;z-index:20;background:#fffffff5;border:1px solid #fff;border-radius:16px;box-shadow:0 10px 35px #253e2a1a}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px}.panel-title b{font-size:16px}.panel-title span{font-size:9px;letter-spacing:1.5px;color:#7a8881}.layer-row{display:flex;align-items:center;padding:12px 18px;gap:12px}.layer-row div{flex:1}.layer-row b{display:block;font-size:13px;font-weight:600}.layer-row small{display:block;font-size:11px;color:#85918b;margin-top:4px;line-height:1.5}.layer-row input{appearance:none;width:34px;height:20px;border-radius:20px;background:#dfe6e1;position:relative;flex-shrink:0;cursor:pointer}.layer-row input:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002}.layer-row input:checked{background:var(--accent)}.layer-row input:checked:before{left:17px}.layer-row input:disabled{opacity:.45;cursor:not-allowed}.layer-row.muted b{color:#7a8680}.options{padding:18px;border-top:1px solid var(--border);margin-top:8px}.options label{display:block;font-size:11px;color:#65736b;margin-bottom:6px}select{width:100%;padding:10px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;color:#20312e;font-size:12px;min-height:38px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;align-items:end}.home{height:38px;border:0;background:#e8f3ed;color:#216f56;border-radius:8px;font-size:12px}.scope-note{display:block;font-size:10px;color:#7b8981;margin-top:14px}details{padding:0 18px 18px;font-size:11px;color:#67786e;line-height:1.7}summary{cursor:pointer}a{color:#16765f}footer{position:absolute;bottom:0;left:0;right:0;padding:10px 24px;z-index:20;background:#fffffff2;display:flex;justify-content:space-between;font-size:11px;border-top:1px solid var(--border)}.legend{position:absolute;bottom:56px;left:24px;padding:14px 16px;background:#fffffff5;border-radius:12px;z-index:15;box-shadow:0 4px 20px #223b2e12;width:225px}.legend h2{margin:0 0 8px;font-size:12px}.legend .row{display:flex;gap:7px;align-items:center;font-size:10px;margin:4px 0}.swatch{width:14px;height:8px;border-radius:2px;border:1px solid rgba(16,42,67,.85)}.legend small{display:block;margin-top:8px;font-size:9px;color:#7d8782}.setup{position:absolute;left:calc((100% - 310px)/2);top:48%;transform:translate(-50%,-50%);width:390px;max-width:calc(100% - 32px);padding:32px;background:#fff;box-shadow:0 12px 60px #1c392417;border-radius:20px;z-index:10}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent)}h1{font-size:25px;font-weight:650;margin:12px 0 14px}.setup p,.setup li{font-size:12px;line-height:1.8;color:#6b7870}.setup ol{padding-left:20px}.setup button{border:0;background:var(--accent);color:white;border-radius:8px;padding:10px 15px;margin-top:10px}.setup a{display:block;margin-top:16px;font-size:11px}.data-dot{border:1px solid rgba(16,42,67,.85);box-shadow:0 0 0 .5px rgba(255,255,255,.65);border-radius:50%;opacity:1;padding:0;display:block;min-width:3px;min-height:3px}.data-dot.square{border-radius:2px}.data-dot:hover,.data-dot:focus-visible{opacity:1;outline:2px solid #fff}.grid-popup{background:white;padding:18px;border-radius:12px;box-shadow:0 6px 30px #0003;width:285px;font-size:12px;white-space:normal}.grid-popup strong{font-size:16px}.grid-popup dl{display:grid;grid-template-columns:65px 1fr;gap:10px 8px;margin:18px 0 12px}.grid-popup dt{color:#77827d}.grid-popup dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.grid-popup small{color:#8b9690;font-size:10px}.popup-close{float:right;border:0;background:#edf3ef;border-radius:50%;font-size:20px;width:25px;height:25px;color:#506359}[hidden]{display:none!important}
@media(max-width:640px){header{top:12px;left:12px;right:12px}.brand{padding:8px 10px}.brand b{font-size:13px}.brand-mark{width:30px;height:30px}#panel{top:74px;right:12px;width:min(300px,calc(100% - 24px));max-height:calc(100dvh - 128px)}.setup{left:50%;top:48%;padding:24px}.legend{left:12px;bottom:66px;width:180px;padding:10px 12px}.legend .row{font-size:9px}footer{padding:9px 12px;gap:5px;flex-direction:column;font-size:10px}.panel-title{padding-top:15px}.layer-row{padding-top:10px;padding-bottom:10px}}
.mobile-actions{padding:0 18px 12px}.mobile-actions button{min-height:44px;border:1px solid #dce3de;background:white;border-radius:8px;padding:8px 12px;color:#16765f}.mobile-actions p{font-size:12px}#key-form label{display:block;font-size:13px;margin-top:14px}#map-key{width:100%;padding:12px;font-size:16px;border:1px solid #bdccc4;border-radius:8px}#site-origin{display:block;overflow-wrap:anywhere;font-size:12px}#setup{max-height:calc(100dvh - 120px);overflow:auto}#key-error{color:#b12121}.setup button{min-height:44px}body:has(#setup:not([hidden])) .legend{display:none}
@media(max-width:640px){select{font-size:16px;min-height:44px}.home{min-height:44px}.layer-row{min-height:56px}.layer-row input{width:42px;height:26px}.layer-row input:before{width:20px;height:20px}.layer-row input:checked:before{left:19px}.grid-popup{width:min(285px,calc(100vw - 32px));font-size:12px}.popup-close{width:40px;height:40px}.legend{max-height:28dvh;overflow:auto}body:has(#panel:not([hidden])) .legend{display:none}.setup{top:50%;max-height:calc(100dvh - 150px)!important}footer{padding-bottom:max(9px,env(safe-area-inset-bottom))}}
/* TIMS symbols only: no page-wide theme or Kakao basemap change. */
.tims-fixed,.tims-symbol{color-scheme:only light!important;forced-color-adjust:none!important;opacity:1!important;filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important}
.data-dot.tims-fixed,.swatch.tims-fixed{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible;appearance:none}
.tims-symbol{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.swatch.tims-fixed{width:24px;height:24px;flex:0 0 24px;border-radius:50%}

/* WORK-002 compact controls: keep symbols at their actual CSS-pixel stroke width. */
#panel{display:flex;flex-direction:column;overflow:hidden}
.panel-scroll{overflow:auto;min-height:0;overscroll-behavior:contain}
.panel-actions{flex:none;padding:10px 18px;border-top:1px solid #dbe3df;background:#fff}
#panel-done{width:100%;min-height:44px;border:0;border-radius:9px;background:#16765f;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.mobile-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 0}
.mobile-actions button{flex:1 1 110px;font-size:13px;padding:8px}
#install-status{flex-basis:100%;margin:0}
.dataset-help{display:inline-block;margin:0 0 4px 6px;padding:0;border:0}
.dataset-help summary{font-size:12px;cursor:pointer}
.dataset-help p{font-size:12px;line-height:1.5;margin:6px 0 10px}
.legend{width:166px;padding:10px!important;max-height:calc(100dvh - 170px);overflow:auto;box-sizing:border-box}
.legend h2{font-size:12px;margin:0 0 7px}
.legend .row{display:flex;align-items:center;gap:7px;margin:5px 0;font-size:10px;line-height:18px;white-space:nowrap}
.swatch.tims-fixed{width:18px;height:18px;flex:0 0 18px}
@media(max-width:640px){
 #panel{max-height:calc(100dvh - 146px)}
 .options{padding:12px 16px}.options label{font-size:11px}
 select{font-size:13px;min-height:42px;padding:8px}
 .home{font-size:12px;min-height:42px}
 .legend{width:166px;bottom:76px;max-height:calc(100dvh - 170px)}
 .legend .row{margin:5px 0}
 .scope-note{font-size:10px}
}

.city-badge{border:0;background:#fff;color:var(--city-color);font-size:17px;line-height:24px;width:26px;height:26px;border-radius:4px;box-shadow:0 1px 4px #0004;opacity:1;filter:none;color-scheme:only light;forced-color-adjust:none}
.city-popup{border-top:4px dashed #087F5B}.city-popup p{font-size:11px;line-height:1.5}.city-popup dl{grid-template-columns:62px 1fr}.city-popup dd{overflow-wrap:anywhere}
.city-legend{position:absolute;right:12px;bottom:76px;z-index:15;background:#fff;padding:9px;border-radius:10px;width:163px;font-size:10px;line-height:1.7;color-scheme:only light;forced-color-adjust:none;color:#20312e}
.city-legend b{display:block;font-size:11px}.city-legend small{font-size:9px;color:#52635b}
body:has(#panel:not([hidden])) .city-legend,body:has(#setup:not([hidden])) .city-legend{display:none}
@media(max-width:359px){.city-legend{bottom:250px}}

.legend .row{white-space:normal;line-height:14px;min-height:18px;overflow-wrap:anywhere}

/* Seoul 121-place layer (dev v7). Independent of TIMS symbols; no basemap/theme change. */
.city-badge{display:grid;place-items:center;padding:0;width:24px;height:24px;font-size:15px;line-height:1;border:2px solid var(--city-color);cursor:pointer}
.city-badge[data-level="미수신"]{color:#697C78;border-style:dashed;background:#f4f6f5;width:16px;height:16px;font-size:9px;border-width:1px;box-shadow:0 1px 2px #0003}
.city-badge[data-stale="true"]{border-style:dotted}
.city-badge[aria-current="true"]{outline:3px solid #16765f;outline-offset:1px;transform:scale(1.15)}
.city-legend{width:178px}
.city-filters{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0}
.city-filters button{border:1px solid var(--city-color);color:var(--city-color);background:#fff;border-radius:12px;padding:1px 6px;font-size:10px;line-height:16px;min-height:22px;color-scheme:only light;forced-color-adjust:none}
.city-filters button[aria-pressed="false"]{opacity:.45;text-decoration:line-through;border-style:dashed}
#city-search{display:flex;gap:3px;margin:4px 0 2px}
#city-q{flex:1;min-width:0;font:inherit;font-size:11px;padding:4px 6px;border:1px solid var(--border);border-radius:6px}
#city-search button{border:0;background:#e8f3ed;color:#216f56;border-radius:6px;font-size:10px;padding:0 6px}
.city-legend small{display:block}
#city-search-msg:empty{display:none}#city-search-msg{color:#b12121}
.city-detail{position:absolute;top:82px;left:24px;z-index:25;width:285px;max-height:calc(100dvh - 160px);overflow:auto;background:#fff;border-radius:12px;border-top:4px solid var(--city-color,#697C78);box-shadow:0 6px 30px #0003;padding:14px 16px;font-size:12px;color:#20312e;color-scheme:only light}
.city-detail strong{font-size:15px}.city-detail .city-state{margin:6px 0 0;font-size:11px;color:#52635b}
.city-detail dl{display:grid;grid-template-columns:62px 1fr;gap:6px 8px;margin:12px 0 8px}.city-detail dt{color:#77827d}.city-detail dd{margin:0;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.city-detail p{font-size:11px;line-height:1.5}.city-detail small{color:#8b9690;font-size:10px}
@media(max-width:640px){
 .city-legend{width:170px;bottom:76px}
 #city-q{font-size:16px;padding:6px}
 .city-filters button{min-height:28px;font-size:11px}
 .city-detail{top:74px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 300px)}
 body:has(#panel:not([hidden])) .city-detail{display:none}
}

/* v7 phase 3: live / 15분 초과 / 과거 수집본 / API 오류 / 미수신 are visually distinct */
.city-badge[data-status="stale"]{border-style:dotted;border-width:3px;background:#f1f1ef}
.city-badge[data-status="snapshot"]{border-style:dashed;background:#fff;opacity:.9}
.city-badge[data-status="error"],.city-badge[data-status="network"]{color:#B3261E;border:1.5px solid #B3261E;background:#fff4f3;width:18px;height:18px;font-size:10px;font-weight:700;box-shadow:0 1px 2px #0003}
.city-keys{font-size:9px!important;line-height:1.45;color:#52635b}.city-keys .k-stale{display:inline-block;border:2px dotted #52635b;line-height:10px;padding:0 1px}
.city-legend[data-source="snapshot"] #city-legend-title{color:#6b4d00}
.city-legend[data-source="snapshot"] #city-summary{color:#6b4d00;font-weight:600}
.city-detail .city-state[data-status="stale"]{color:#8a4b00;font-weight:600}
.city-detail .city-state[data-status="snapshot"]{color:#6b4d00;font-weight:600;background:#fff6dd;padding:2px 6px;border-radius:4px}
.city-detail .city-state[data-status="error"],.city-detail .city-state[data-status="network"]{color:#B3261E;font-weight:600}
.city-detail[data-source="snapshot"]{border-top-style:dashed}