:root { --blue:#1557d8; --blue-dark:#0b3f9d; --blue-soft:#e8f0ff; --ink:#1f2937; --muted:#6b7280; --line:#d7dee8; --bg:#f3f6fa; --surface:#ffffff; --chip:#eef2f7; --green:#16824a; --green-soft:#dff4e8; --orange:#c77700; --orange-soft:#fff4dc; --red:#d64545; --water:#b7d7f4; --road:#ffffff; font-family:"Pretendard","Segoe UI","Noto Sans KR",Arial,sans-serif; }
* { box-sizing:border-box; }
html { height:100%; }
body { min-height:100%; margin:0; color:var(--ink); background:var(--bg); overflow:hidden; }
button,input { font:inherit; }
button { border:0; cursor:pointer; }
.site-header { position:relative; z-index:40; height:68px; display:flex; align-items:center; gap:20px; padding:0 16px; color:#fff; background:var(--blue); box-shadow:0 1px 0 rgba(0,0,0,.12); }
.brand { min-width:220px; flex:1; display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.brand-mark { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:7px; color:var(--blue); background:#fff; font-weight:900; }
.brand-text { display:flex; flex-direction:column; gap:2px; }
.brand-text strong { font-size:18px; line-height:1.1; letter-spacing:0; }
.brand-text small { color:#dbe8ff; font-size:12px; letter-spacing:0; }
.top-nav { flex:1; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.nav-item,.install-button { height:36px; padding:0 13px; border-radius:7px; color:#eaf1ff; background:transparent; font-weight:700; white-space:nowrap; }
.nav-item.active,.nav-item:hover,.install-button { color:#fff; background:rgba(255,255,255,.16); }
.header-actions { position:relative; display:flex; align-items:center; gap:8px; margin-left:auto; }
.menu-button,.user-button { width:38px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:7px; color:#fff; background:rgba(255,255,255,.16); font-size:21px; font-weight:900; line-height:1; }
.menu-button:hover,.menu-button[aria-expanded="true"],.user-button:hover,.user-button[aria-expanded="true"] { background:rgba(255,255,255,.24); }
.app-menu,.user-panel { position:absolute; right:0; top:44px; z-index:60; width:268px; padding:10px; border:1px solid #cfd8e6; border-radius:8px; color:var(--ink); background:#fff; box-shadow:0 20px 50px rgba(15,23,42,.24); }
.user-panel { width:320px; max-height:min(620px,calc(100vh - 88px)); overflow:auto; }
.menu-tabs { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; padding:3px; border-radius:7px; background:#eef2f7; }
.menu-tab { height:32px; border-radius:6px; color:#475467; background:transparent; font-size:13px; font-weight:900; }
.menu-tab.active { color:#fff; background:var(--blue); }
.menu-section { display:flex; flex-direction:column; gap:10px; }
.setting-row { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--line); border-radius:7px; color:#1f2937; font-size:13px; font-weight:800; }
.setting-row input { width:20px; height:20px; accent-color:var(--blue); }
.menu-info { margin:0; display:flex; flex-direction:column; gap:9px; }
.menu-info div { min-width:0; display:flex; align-items:baseline; gap:8px; }
.menu-info dt { flex:0 0 82px; }
.menu-info dd { min-width:0; flex:1; }
.auth-box { display:flex; flex-direction:column; gap:10px; }
.auth-form { display:flex; flex-direction:column; gap:7px; padding:10px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.auth-form strong,.auth-box strong { color:#111827; font-size:14px; }
.auth-form input { width:100%; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; font-size:13px; }
.auth-form button,.auth-box>button { height:34px; border-radius:6px; color:#fff; background:var(--blue); font-size:13px; font-weight:900; }
.auth-box span { color:#667085; font-size:13px; }
.auth-message { min-height:18px; margin:0; color:#b54708; font-size:12px; line-height:1.45; }
.my-page-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.my-page-head button { height:32px; padding:0 10px; border-radius:6px; color:#fff; background:#111827; font-size:12px; font-weight:900; }
.my-section { display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid #edf1f6; }
.my-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.my-section-head strong { color:#111827; font-size:13px; }
.my-section-head span { min-width:24px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#1557d8; background:#e8f0ff; font-size:12px; font-weight:900; }
.my-list { margin:0; padding:0; display:flex; flex-direction:column; gap:7px; list-style:none; color:#475467; font-size:12px; line-height:1.45; }
.my-list li { padding:8px 9px; border:1px solid #e4e7ec; border-radius:7px; background:#fff; }
.my-list button { width:100%; display:flex; flex-direction:column; gap:2px; color:inherit; background:transparent; text-align:left; }
.my-list strong { color:#111827; font-size:13px; overflow-wrap:anywhere; }
.my-list small { color:#98a2b3; font-size:11px; font-weight:800; overflow-wrap:anywhere; }
.hidden { display:none; }
.search-strip { position:absolute; left:50%; top:14px; z-index:30; min-width:0; width:min(680px,calc(100% - 28px)); display:flex; flex-direction:column; overflow:visible; background:transparent; transform:translateX(-50%); }
.search-strip:has(.search-icon-form) { left:16px; right:auto; top:auto; bottom:160px; width:44px; transform:none; }
.search-icon-form button { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid #e0e5ec; border-radius:50%; background:#fff; color:#344054; font-size:22px; box-shadow:0 3px 12px rgba(0,0,0,.12); }
#centerCheckFab { position:relative; width:80px; min-width:80px; height:44px; border-radius:50px; }
.bottom-toggle-row { flex-direction:row; }
#commentToggleBtn { position:absolute; left:16px; bottom:112px; width:44px; min-width:44px; height:44px; padding:0; border-radius:50%; }
@media (max-width:640px) { #commentToggleBtn,.search-strip:has(.search-icon-form) { left:10px; } }
.recent-search-section { padding:10px 16px; border-bottom:1px solid #eee; flex:0 0 auto; }
.recent-search-section[hidden] { display:none; }
.recent-search-section h3 { margin:0 0 8px; font-size:12px; color:#667085; }
#recentSearchList { display:flex; gap:6px; overflow-x:auto; max-width:100%; padding-bottom:4px; }
#recentSearchList button { flex:0 0 auto; max-width:240px; padding:7px 10px; border-radius:6px; background:#f4f4f5; color:#344054; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#resultToggleBtn[hidden] { display:none !important; }
.result-panel.collapsed,.comment-panel.collapsed { display:none; }
.map-page .map-area { overflow:clip; }
#favoriteFab,#locateBtn { width:44px; height:44px; border-radius:50%; font-size:23px; border-color:#e0e5ec; box-shadow:0 3px 12px rgba(0,0,0,.12); }
#favoriteFab { bottom:64px; }
#locateBtn { bottom:16px; }
#addressDialog { width:min(520px,calc(100% - 24px)); height:min(680px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #e5e5e5; border-radius:8px; background:#fff; overflow:hidden; color:#171717; }
#addressDialog[open] { display:flex; flex-direction:column; }
#addressDialog::backdrop { background:rgba(0,0,0,.35); }
.address-dialog-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid #eee; }
.address-dialog-head h2 { margin:0; font-size:17px; }
.address-dialog-head button { width:40px; height:40px; border-radius:6px; background:transparent; color:#667085; font-size:22px; }
#addressDialog .postcode-layer { position:relative; inset:auto; flex:1; min-height:0; width:100%; height:auto; border:0; border-radius:0; box-shadow:none; overflow:clip; }
#addressDialog .postcode-layer-frame { overflow:clip; }
.search-bar { position:relative; min-width:0; width:100%; max-width:100%; display:block; }
.search-bar input { min-width:0; width:100%; height:42px; padding:0 74px 0 14px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; outline:none; box-shadow:0 10px 28px rgba(15,23,42,.18); }
.search-bar input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,87,216,.13); }
.search-bar button { position:absolute; top:5px; right:5px; width:58px; height:32px; border-radius:7px; color:#fff; background:var(--blue); font-weight:800; }
.search-suggestions { position:absolute; left:0; right:0; top:50px; z-index:34; display:none; max-height:min(640px,calc(100dvh - 130px)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:10px; border:1px solid #cfd8e6; border-radius:8px; background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.18); }
.search-suggestions.active { display:flex; flex-direction:column; gap:10px; }
.postcode-layer { position:absolute; left:0; right:0; top:50px; z-index:35; display:none; height:var(--postcode-height,min(640px,calc(100dvh - 130px))); overflow:hidden; border:1px solid #cfd8e6; border-radius:8px; background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.2); }
.postcode-layer.active { display:block; }
.postcode-layer-frame { width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
.postcode-layer iframe { width:100% !important; height:100% !important; min-height:100%; }
.postcode-fallback { height:100%; display:flex; align-items:center; justify-content:center; padding:18px; color:#667085; font-size:13px; text-align:center; }
.suggestion-section { display:flex; flex-direction:column; gap:6px; padding:2px 0 8px; }
.suggestion-section + .suggestion-section { padding-top:8px; border-top:1px solid #edf1f6; }
.suggestion-section-title { height:24px; margin:0; padding:0 4px; display:flex; align-items:center; color:#667085; font-size:12px; font-weight:900; }
.suggestion-action { width:100%; min-height:50px; display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid transparent; border-radius:7px; color:var(--ink); background:#fff; text-align:left; }
.suggestion-action:hover,.suggestion-action:focus-visible { border-color:#c7d7fe; background:#eef4ff; }
.suggestion-action i { flex:0 0 32px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:7px; color:#1557d8; background:#e8f0ff; font-size:18px; line-height:1; }
.suggestion-action .suggestion-action-icon { flex:0 0 32px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; min-width:32px; border-radius:7px; color:#1557d8; background:#e8f0ff; }
.suggestion-action-icon .aim-button-icon { flex:0 0 auto; width:20px; height:20px; }
.suggestion-action-icon .aim-button-icon::before { height:20px; }
.suggestion-action-icon .aim-button-icon::after { width:20px; }
.suggestion-action span { min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }
.suggestion-action .search-rank-number { flex:0 0 32px; width:32px; height:32px; min-width:32px; display:flex; align-items:center; justify-content:center; border-radius:7px; color:#fff; background:#1557d8; font-size:13px; font-weight:900; line-height:1; }
.suggestion-action strong { min-width:0; color:#111827; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-action small { min-width:0; color:#667085; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-item { position:relative; width:100%; min-height:66px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:9px 74px 9px 10px; border-radius:7px; color:var(--ink); background:#fff; text-align:left; }
.suggestion-item:hover,.suggestion-item.active { background:#eef4ff; }
.suggestion-item strong { min-width:0; color:#111827; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-item small { min-width:0; color:#667085; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-item em { min-width:0; color:#98a2b3; font-size:11px; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-item span { position:absolute; right:10px; top:50%; max-width:58px; padding:4px 7px; border-radius:999px; color:#1557d8; background:#e8f0ff; font-size:11px; font-weight:800; white-space:nowrap; transform:translateY(-50%); }
.suggestion-empty { min-height:42px; display:flex; align-items:center; padding:0 10px; color:#667085; font-size:13px; }
.map-page { height:calc(100vh - 68px); min-height:560px; }
.map-area { position:relative; height:100%; overflow:hidden; cursor:grab; background:#e9eef5; }
.map-area.dragging { cursor:grabbing; }
.map-fallback { z-index:0; opacity:1; }
.map-fallback.hidden { opacity:0; pointer-events:none; }
.vworld-map { position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; touch-action:none; background:#e9eef5; transition:opacity .18s ease; }
.vworld-map.active { opacity:1; pointer-events:auto; }
.vworld-map.native-tile-map { overflow:hidden; background:#dbe7f0; }
.native-tile-layer { position:absolute; inset:0; overflow:hidden; z-index:1; }
.native-map-tile { position:absolute; display:block; width:256px; height:256px; user-select:none; pointer-events:none; }
.native-map-pin { z-index:4; opacity:0; }
.native-map-pin.active { opacity:1; }
.native-tile-attribution { position:absolute; right:8px; bottom:8px; z-index:3; padding:3px 6px; border-radius:4px; color:#344054; background:rgba(255,255,255,.86); border:1px solid rgba(208,213,221,.85); font-size:11px; font-weight:700; }
.comment-marker-layer { position:absolute; inset:0; z-index:5; pointer-events:none; }
.map-count-marker { position:absolute; display:flex; align-items:center; gap:3px; padding:3px; border:0; border-radius:999px; color:#fff; background:var(--blue); font-size:12px; font-weight:400; line-height:1; transform:translate(-50%,-50%); box-shadow:0 8px 18px rgba(15,23,42,.28); pointer-events:auto; }
.map-count-marker:hover { background:var(--blue); }
.map-count-marker.clustered { background:#1557d8; }
.map-count-marker.clustered:hover { background:#0b3f9d; }
.map-count-size { min-width:28px; height:22px; display:inline-flex; align-items:center; justify-content:center; padding:0 7px; border-radius:999px; color:#1557d8; background:#fff; font-size:11px; font-weight:400; }
.map-count-unit { min-width:24px; height:22px; display:inline-flex; align-items:center; justify-content:center; gap:2px; padding:0 6px; border-radius:999px; color:#fff; background:rgba(255,255,255,.16); }
.map-count-unit i { font-size:13px; line-height:1; }
.map-count-unit.favorite { background:#d64545; }
.parcel-boundary-layer { position:absolute; inset:0; z-index:4; width:100%; height:100%; overflow:visible; pointer-events:none; }
.parcel-boundary-layer path { fill:rgba(21,87,216,.16); fill-rule:evenodd; stroke:#1557d8; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:8 5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 2px 4px rgba(15,23,42,.2)); }
.map-caption { display:none; position:absolute; top:10px; left:16px; z-index:5; align-items:center; gap:10px; color:#667085; font-size:13px; }
.map-caption strong { color:#465467; font-size:14px; }
.map-caption .status-badge { display:none; }
.status-badge { min-width:74px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0 9px; border-radius:7px; color:#475467; background:#fff; border:1px solid var(--line); font-size:12px; font-weight:800; }
.status-badge.ok { color:#067647; background:#ecfdf3; border-color:#abefc6; }
.status-badge.warn { color:#b54708; background:#fffaeb; border-color:#fedf89; }
.zoom-control { position:absolute; top:70px; left:12px; z-index:8; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; box-shadow:0 4px 14px rgba(31,41,55,.08); }
.zoom-control button { width:40px; height:40px; color:#6b7280; background:#fff; font-size:22px; line-height:1; }
.zoom-control button:last-child { font-size:12px; font-weight:900; }
.zoom-control button + button { border-top:1px solid var(--line); }
.map-canvas { position:absolute; inset:-12%; z-index:0; touch-action:none; background:linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),#eef3f8; background-size:var(--fallback-size,96px 96px); transform:translate(var(--fallback-pan-x,0px),var(--fallback-pan-y,0px)) scale(var(--fallback-scale,1)); transform-origin:50% 50%; transition:transform .22s ease,background-size .22s ease; }
.map-canvas * { touch-action:none; }
.map-canvas[data-zoom="0"] { --fallback-size:184px 184px; --fallback-scale:.56; }
.map-canvas[data-zoom="1"] { --fallback-size:156px 156px; --fallback-scale:.68; }
.map-canvas[data-zoom="2"] { --fallback-size:132px 132px; --fallback-scale:.8; }
.map-canvas[data-zoom="3"] { --fallback-size:112px 112px; --fallback-scale:.92; }
.map-canvas[data-zoom="4"] { --fallback-size:96px 96px; --fallback-scale:1; }
.map-canvas[data-zoom="5"] { --fallback-size:82px 82px; --fallback-scale:1.15; }
.map-canvas[data-zoom="6"] { --fallback-size:70px 70px; --fallback-scale:1.32; }
.map-canvas[data-zoom="7"] { --fallback-size:60px 60px; --fallback-scale:1.52; }
.map-canvas[data-zoom="8"] { --fallback-size:52px 52px; --fallback-scale:1.75; }
.map-canvas[data-zoom="9"] { --fallback-size:46px 46px; --fallback-scale:2.02; }
.map-canvas::before { content:""; position:absolute; inset:-20%; background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.92) 38.2% 41.5%,transparent 41.8%),linear-gradient(25deg,transparent 0 50%,rgba(255,255,255,.88) 50.2% 52.7%,transparent 53%),linear-gradient(155deg,transparent 0 61%,rgba(255,255,255,.76) 61.2% 63.4%,transparent 63.8%); }
.road { position:absolute; z-index:1; display:block; background:var(--road); box-shadow:0 0 0 1px rgba(148,163,184,.28); }
.road-main { left:-8%; top:50%; width:118%; height:48px; transform:rotate(-7deg); }
.road-sub { width:36px; height:112%; }
.road-sub-a { left:34%; top:-7%; transform:rotate(18deg); }
.road-sub-b { right:22%; top:-6%; transform:rotate(-24deg); }
.water { position:absolute; right:-9%; bottom:-12%; z-index:1; width:46%; height:42%; border-radius:48% 52% 0 0; background:linear-gradient(135deg,rgba(94,162,217,.64),rgba(183,215,244,.45)); border:1px solid rgba(54,119,178,.18); }
.parcel { position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; min-width:110px; min-height:72px; padding:8px; border:2px solid rgba(255,255,255,.82); border-radius:6px; color:#fff; font-size:13px; font-weight:900; box-shadow:0 8px 24px rgba(15,23,42,.12); }
.parcel b { padding:3px 7px; border-radius:6px; background:rgba(15,23,42,.28); }
.parcel-national { left:17%; top:29%; width:15%; height:17%; background:rgba(21,87,216,.75); transform:skew(-8deg) rotate(-5deg); }
.parcel-public { left:47%; top:34%; width:16%; height:16%; background:rgba(22,130,74,.7); transform:skew(7deg) rotate(4deg); }
.parcel-park { right:14%; top:18%; width:18%; height:18%; background:rgba(31,156,91,.55); transform:rotate(-9deg); }
.parcel-river { right:24%; bottom:20%; width:18%; height:14%; background:rgba(47,120,191,.55); transform:rotate(7deg); }
.map-pin { position:absolute; left:50%; top:47%; z-index:4; width:20px; height:20px; border:4px solid #fff; border-radius:50% 50% 50% 0; background:var(--red); box-shadow:0 5px 16px rgba(15,23,42,.28); transform:translate(-50%,-50%) rotate(-45deg); }
.map-pin.active { animation:pinPulse 1.4s ease-in-out infinite; }
.map-canvas .map-pin { opacity:0; }
.map-canvas .map-pin.active { opacity:1; }
.map-pin.current-location { background:var(--blue); box-shadow:0 5px 16px rgba(15,23,42,.28),0 0 0 8px rgba(21,87,216,.18); }
.live-pin { display:none; top:50%; }
.live-pin.active { display:block; }
.map-center-marker { position:absolute; inset:0; z-index:4; pointer-events:none; background:radial-gradient(circle at center,rgba(15,23,42,.34) 0 2px,transparent 2px 10px,rgba(15,23,42,.22) 10px 11px,transparent 11px 25px); }
.map-center-marker::before,.map-center-marker::after { content:""; position:absolute; left:50%; top:50%; background:rgba(15,23,42,.22); transform:translate(-50%,-50%); }
.map-center-marker::before { width:1px; height:100%; }
.map-center-marker::after { width:100%; height:1px; }
.district-label { position:absolute; z-index:3; padding:4px 7px; border-radius:6px; color:#667085; background:rgba(255,255,255,.76); border:1px solid rgba(215,222,232,.72); font-size:12px; font-weight:700; }
.label-a { left:40%; top:22%; }
.label-b { left:24%; bottom:36%; }
.label-c { right:28%; top:38%; }
.coordinate-readout { position:absolute; right:14px; top:70px; z-index:7; display:flex; flex-direction:column; align-items:flex-end; gap:2px; color:#111827; font-size:12px; font-weight:800; text-align:right; text-shadow:0 1px 2px #fff,0 0 6px rgba(255,255,255,.86); pointer-events:none; }
.coordinate-readout span { white-space:nowrap; }
.coordinate-readout b { font-size:13px; }
.map-action-button { position:absolute; left:16px; z-index:7; width:38px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid #cfd8e6; border-radius:7px; color:#1f2937; background:#fff; font-size:22px; font-weight:900; line-height:1; box-shadow:0 10px 24px rgba(15,23,42,.18); }
.map-area.panel-open .map-action-button { opacity:1; pointer-events:auto; }
.map-action-button i { display:block; line-height:1; }
.favorite-button { bottom:58px; }
.favorite-button.active { color:#fff; border-color:#d64545; background:#d64545; }
.bottom-check-button { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cfd8e6; border-radius:8px; color:#344054; background:#fff; font-size:22px; font-weight:900; line-height:1; box-shadow:0 10px 24px rgba(15,23,42,.14); }
.aim-button-icon { position:relative; width:26px; height:26px; display:block; border-radius:999px; color:currentColor; background:radial-gradient(circle at center,currentColor 0 2px,transparent 2px 8px,currentColor 8px 9px,transparent 9px); opacity:.72; }
.aim-button-icon::before,.aim-button-icon::after { content:""; position:absolute; left:50%; top:50%; background:currentColor; transform:translate(-50%,-50%); }
.aim-button-icon::before { width:1px; height:26px; }
.aim-button-icon::after { width:26px; height:1px; }
.center-check-button.locked { color:#fff; border-color:var(--blue); background:var(--blue); }
.center-check-button.locked .aim-button-icon { opacity:1; }
.gps-button { bottom:16px; }
.gps-button.single { color:#111827; border-color:#98a2b3; background:#e4e7ec; }
.gps-button.tracking { color:#fff; border-color:var(--blue); background:var(--blue); }
.gps-button.needs-permission { color:#b54708; border-color:#fedf89; background:#fffaeb; }
.map-action-button:disabled,.bottom-check-button:disabled { color:#98a2b3; border-color:#d0d5dd; background:#f2f4f7; cursor:wait; }
.bottom-toggle-row { position:absolute; left:50%; bottom:16px; z-index:9; display:flex; align-items:center; justify-content:center; gap:8px; transform:translateX(-50%); }
.result-toggle-button { min-width:112px; height:44px; padding:0 18px; border:1px solid #1557d8; border-radius:8px; color:#fff; background:#1557d8; font-size:15px; font-weight:900; box-shadow:0 10px 24px rgba(21,87,216,.24); }
.result-toggle-button.unchecked { color:#344054; border-color:#cfd8e6; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.14); }
.result-toggle-button.public { color:#fff; border-color:var(--green); background:var(--green); }
.result-toggle-button.not_found { color:#1557d8; border-color:#bed0ff; background:#e8f0ff; }
.result-toggle-button.boundary_warning,.result-toggle-button.needs_data,.result-toggle-button.unknown { color:#92400e; border-color:#fedf89; background:#fffaeb; }
.result-toggle-button.error { color:#b42318; border-color:#fecaca; background:#fff5f5; }
.result-toggle-button[aria-expanded="true"]:not(.unchecked) { filter:brightness(.92); }
.comment-toggle-button { position:relative; min-width:52px; height:44px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 12px; border:1px solid #cfd8e6; border-radius:8px; color:#344054; background:#fff; font-size:15px; font-weight:900; box-shadow:0 10px 24px rgba(15,23,42,.14); }
.comment-toggle-button i { font-size:22px; line-height:1; }
.comment-toggle-button[aria-expanded="true"] { color:#fff; border-color:#111827; background:#111827; }
.comment-map-button { position:absolute; left:16px; bottom:100px; z-index:9; width:38px; min-width:38px; height:34px; padding:0; border-radius:7px; font-size:22px; }
.comment-toggle-badge { position:absolute; right:-6px; top:-7px; min-width:19px; height:19px; display:flex; align-items:center; justify-content:center; padding:0 5px; border:0; border-radius:999px; color:#fff; background:var(--blue); font-size:11px; font-weight:400; line-height:1; }
.parcel-facts { margin:0; display:flex; flex-direction:column; gap:10px; }
.parcel-facts div { min-width:0; }
dt { color:#667085; font-size:12px; font-weight:700; }
dd { margin:3px 0 0; color:#1f2937; font-size:14px; font-weight:800; overflow-wrap:anywhere; }
.result-panel { position:absolute; left:50%; right:auto; bottom:76px; z-index:8; width:min(600px,calc(100% - 28px)); max-height:min(42vh,330px); display:flex; flex-direction:column; gap:12px; overflow:auto; padding:14px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.96); box-shadow:0 14px 34px rgba(15,23,42,.16); transform:translateX(-50%); transition:opacity .18s ease,transform .18s ease; }
.result-panel.collapsed { opacity:0; pointer-events:none; transform:translate(-50%,calc(100% + 86px)); }
.result-panel.public { border-color:#9bdfb5; background:rgba(244,253,247,.97); }
.result-panel.not_found { border-color:#c7d7fe; background:rgba(245,248,255,.97); }
.result-panel.boundary_warning,.result-panel.needs_data,.result-panel.unknown { border-color:#fedf89; background:rgba(255,250,235,.97); }
.result-panel.error { border-color:#fecaca; background:rgba(255,247,247,.97); }
.result-tabs { display:flex; gap:4px; padding:3px; border-radius:7px; background:#eef2f7; }
.result-tab { flex:1; height:32px; border-radius:6px; color:#475467; background:transparent; font-size:13px; font-weight:900; }
.result-tab.active { color:#fff; background:#111827; }
.result-tab-panel { min-width:0; display:flex; gap:12px; }
.result-tab-panel.hidden { display:none; }
.summary-panel,.detail-panel { align-items:flex-start; }
.summary-panel .result-main { flex:1 1 240px; }
.summary-panel .summary-facts { flex:.85 1 180px; }
.detail-panel .detail-facts { flex:.8 1 220px; }
.detail-panel .decision-log { flex:1.2 1 240px; }
.result-main { min-width:0; max-width:100%; }
.label { margin:0 0 5px; color:#667085; font-size:12px; font-weight:800; }
.result-main strong { display:block; margin-bottom:8px; color:#111827; font-size:22px; letter-spacing:0; }
.result-main p { margin:0; max-width:100%; color:#475467; line-height:1.55; overflow-wrap:anywhere; }
.summary-facts { padding:10px 11px; border:1px solid #e4e7ec; border-radius:7px; background:rgba(255,255,255,.72); }
.chip:disabled,.search-bar button:disabled { cursor:wait; opacity:.66; }
.decision-log { margin:0; padding-left:18px; color:#475467; line-height:1.55; font-size:13px; }
.comment-panel { position:absolute; left:50%; right:auto; bottom:76px; z-index:8; width:min(600px,calc(100% - 28px)); max-height:min(48vh,380px); display:flex; flex-direction:column; overflow:auto; padding:16px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.97); box-shadow:0 14px 34px rgba(15,23,42,.16); transform:translateX(-50%); transition:opacity .18s ease,transform .18s ease; }
.comment-panel.collapsed { opacity:0; pointer-events:none; transform:translate(-50%,calc(100% + 86px)); }
.location-comments { display:flex; flex-direction:column; gap:10px; }
.comments-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.comments-head > div:first-child { min-width:0; flex:1; }
.comments-head-actions { display:flex; align-items:center; align-self:flex-start; gap:8px; flex-shrink:0; }
.comment-close-button { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:6px; color:#667085; background:transparent; font-size:21px; }
.comment-close-button:hover { color:#1f2937; background:#eef2f7; }
.comment-close-button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.comments-head strong { display:block; color:#111827; font-size:16px; overflow-wrap:anywhere; }
#commentCountBadge { min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:#111827; font-size:13px; font-weight:900; }
.comment-notice,.comment-message { min-height:18px; color:#667085; font-size:13px; line-height:1.45; }
.comment-message.error { color:#b42318; }
.comment-message.ok { color:#067647; }
.comment-form { display:flex; flex-direction:column; gap:8px; }
.comment-form textarea { width:100%; min-height:68px; max-height:120px; resize:vertical; padding:10px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; font-size:14px; line-height:1.45; }
.comment-form-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.comment-form-row span { color:#667085; font-size:12px; font-weight:800; }
.comment-form-row button { min-width:76px; height:34px; border-radius:7px; color:#fff; background:var(--blue); font-size:13px; font-weight:900; }
.comment-form-row button:disabled { color:#98a2b3; background:#f2f4f7; cursor:wait; }
.comment-list { margin:0; padding:0; display:flex; flex-direction:column; gap:8px; list-style:none; color:#475467; font-size:13px; line-height:1.5; }
.comment-list li { padding:9px 10px; border:1px solid #e4e7ec; border-radius:7px; background:#fff; }
.comment-list strong { display:block; margin-bottom:3px; color:#111827; font-size:13px; }
.comment-list p { margin:0 0 4px; overflow-wrap:anywhere; }
.comment-list time { color:#98a2b3; font-size:11px; font-weight:800; }
@keyframes pinPulse { 0%,100% { box-shadow:0 5px 16px rgba(15,23,42,.28),0 0 0 0 rgba(214,69,69,.32); } 50% { box-shadow:0 5px 16px rgba(15,23,42,.28),0 0 0 13px rgba(214,69,69,0); } }
@media (max-width:980px) { .site-header { height:auto; min-height:66px; padding:10px 12px; gap:10px; } .brand { min-width:180px; } .top-nav { order:3; width:100%; justify-content:flex-start; overflow-x:auto; } .map-page { height:calc(100vh - 66px); min-height:620px; } .summary-panel,.detail-panel { flex-direction:column; } .detail-facts { flex-direction:row; flex-wrap:wrap; } .detail-facts div { flex:1 1 140px; } }
@media (max-width:640px) { .site-header { min-height:64px; align-items:center; } .brand { min-width:0; flex:1; } .brand-mark { width:34px; height:34px; } .brand-text strong { font-size:17px; } .brand-text small { display:none; } .top-nav { display:none; } .header-actions { flex:0 0 auto; } .install-button { flex:0 0 auto; height:34px; padding:0 12px; } .menu-button,.user-button { width:36px; height:34px; } .app-menu,.user-panel { right:-2px; top:42px; width:min(312px,calc(100vw - 24px)); max-height:72vh; overflow:auto; } .search-strip { top:10px; width:calc(100% - 20px); } .search-bar input { height:40px; padding-right:62px; } .search-bar button { width:50px; height:30px; font-size:13px; } .search-suggestions { top:46px; max-height:calc(100dvh - 122px); } .postcode-layer { top:46px; height:min(560px,calc(100dvh - 122px)); } .suggestion-item { min-height:62px; padding-right:10px; } .suggestion-item span { position:static; align-self:flex-start; transform:none; } .map-page { height:calc(100vh - 64px); min-height:0; } .map-area { height:100%; min-height:0; } .coordinate-readout { top:60px; right:10px; font-size:11px; } .coordinate-readout b { font-size:11px; } .zoom-control { top:60px; left:10px; } .map-action-button { left:10px; width:38px; height:34px; font-size:22px; } .favorite-button { bottom:56px; } .gps-button { bottom:14px; } .bottom-toggle-row { left:50%; right:auto; bottom:14px; gap:7px; transform:translateX(-50%); } .bottom-check-button { width:42px; height:42px; } .aim-button-icon { width:24px; height:24px; } .aim-button-icon::before { height:24px; } .aim-button-icon::after { width:24px; } .result-toggle-button { min-width:104px; height:42px; padding:0 14px; } .comment-toggle-button { min-width:52px; height:42px; padding:0 10px; } .comment-map-button { left:10px; bottom:98px; width:38px; min-width:38px; height:34px; padding:0; } .comment-toggle-button i { font-size:21px; } .result-panel,.comment-panel { width:calc(100% - 20px); bottom:66px; max-height:min(50vh,360px); padding:13px; } .result-main strong { font-size:19px; } .detail-facts { flex-direction:column; } .detail-facts div { flex:1 1 auto; } .comments-head strong { font-size:15px; } .comment-form textarea { min-height:62px; } .parcel { min-width:84px; min-height:56px; font-size:12px; } .parcel-national { left:8%; top:35%; width:26%; } .parcel-public { left:44%; top:37%; width:25%; } .parcel-park { right:6%; top:25%; width:25%; } .parcel-river { right:12%; bottom:27%; width:26%; } }
@supports (height:100dvh) { @media (max-width:640px) { .map-page { height:calc(100dvh - 64px); } } }

.site-header .brand { flex:0 1 auto; min-width:0; width:max-content; }
.brand-mark { flex-shrink:0; }
.map-area .zoom-control { top:50%; left:16px; transform:translateY(-50%); border-radius:20px; }
@media (max-width:640px) { .map-area .zoom-control { left:10px; } }
@media (max-height:520px) { .map-area .zoom-control { left:auto; right:10px; } }
.result-status-row { position:absolute; bottom:54px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 140px); display:flex; align-items:center; gap:8px; }
.result-status-row:has(#resultToggleBtn[hidden]) { display:none; }
.result-status-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#26343e; font-size:13px; font-weight:600; text-shadow:0 1px 2px #fff,0 0 5px #fff; }
.result-status-text.public { color:#18754b; }
.result-status-row #resultToggleBtn { flex-shrink:0; min-width:0; height:30px; padding:0 9px; border:1px solid #d7dee8; border-radius:6px; color:#344054; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); font-size:12px; font-weight:500; }
#resultBlock.result-panel { position:fixed; inset:0; margin:auto; width:min(400px,calc(100vw - 32px)); max-width:400px; height:fit-content; max-height:calc(100dvh - 40px); padding:0; transform:none; transition:none; overflow:auto; }
#resultBlock:not([open]) { display:none; }
#resultBlock::backdrop { background:rgba(15,23,42,.35); }
.result-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px 0; flex-shrink:0; }
.result-dialog-header strong { font-size:14px; color:#344054; font-weight:600; }
.map-area .coordinate-readout { top:14px; }
@media (max-width:640px) { .map-area .coordinate-readout { top:10px; } }

/* Keep a separate control lane beside open sheets on narrow screens. */
@media (max-width:760px) { .map-area.panel-open .result-panel,.map-area.panel-open .comment-panel { left:68px; right:10px; width:calc(100% - 78px); max-width:600px; transform:none; } }

/* Result sheet: one reading column, independent of map status colors. */
.result-panel { --result-accent:#526275; z-index:10; gap:0; padding:0; border:1px solid #dce2e7; border-radius:8px; background:#fff; box-shadow:0 8px 32px rgba(24,39,51,.14); }
.result-panel.public { --result-accent:#18754b; border-color:#dce2e7; background:#fff; }
.result-panel.not_found { --result-accent:#526275; border-color:#dce2e7; background:#fff; }
.result-panel.boundary_warning,.result-panel.needs_data,.result-panel.unknown { --result-accent:#976715; border-color:#dce2e7; background:#fff; }
.result-panel.error { --result-accent:#ba3841; border-color:#dce2e7; background:#fff; }
.result-panel .result-tabs { flex:0 0 auto; gap:24px; margin:0 20px; padding:0; border-bottom:1px solid #e9edef; border-radius:0; background:transparent; }
.result-panel .result-tab { flex:0 0 auto; min-width:48px; height:44px; padding:0 2px; border-bottom:2px solid transparent; border-radius:0; color:#78838c; font-size:13px; font-weight:600; }
.result-panel .result-tab.active { border-bottom-color:#223f36; color:#223f36; background:transparent; }
.result-panel .result-tab:focus-visible { outline:2px solid #18754b; outline-offset:-4px; }
.result-panel .summary-panel,.result-panel .detail-panel { flex-direction:column; align-items:stretch; gap:16px; padding:18px 20px; }
.result-panel .summary-panel .result-main,.result-panel .summary-panel .summary-facts,.result-panel .detail-panel .detail-facts,.result-panel .detail-panel .decision-log { flex:0 0 auto; width:100%; min-width:0; }
.result-panel .result-main .label { display:flex; align-items:center; gap:5px; margin:0 0 8px; color:var(--result-accent); font-size:12px; font-weight:600; }
.result-panel .result-main strong { margin:0 0 8px; color:#202b32; font-size:21px; font-weight:700; line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; }
.result-panel #resultSummary { color:#637078; font-size:13px; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; }
.result-panel .summary-facts { margin:0; padding:13px 0 0; border:0; border-top:1px solid #e9edef; border-radius:0; background:transparent; }
.result-panel .summary-facts > div { display:flex; align-items:baseline; gap:16px; min-width:0; }
.result-panel .summary-facts dt { flex:0 0 auto; color:#7c878e; font-size:12px; font-weight:500; }
.result-panel .summary-facts dd { margin:0; color:#303e46; font-size:13px; font-weight:600; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.result-panel .detail-facts { gap:12px; margin:0; }
.result-panel .detail-facts > div { min-width:0; }
.result-panel .detail-facts dd { overflow-wrap:anywhere; }
.result-panel .decision-log { border-top:1px solid #e9edef; padding-top:14px; color:#637078; }
@media (max-width:640px) { .result-panel { padding:0; max-height:min(55dvh,420px); } .result-panel .result-tabs { margin:0 16px; } .result-panel .summary-panel,.result-panel .detail-panel { padding:16px; gap:14px; } .result-panel .result-main strong { font-size:19px; } .brand-text strong { font-size:16px; white-space:normal; word-break:keep-all; } }