@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #172019;
  --muted: #68716a;
  --paper: #f3f2ec;
  --card: #fffef9;
  --line: #d8ddd4;
  --green: #176448;
  --green-dark: #112c21;
  --lime: #c9f36c;
  --parcel: #2f80ed;
  --draw: #165dcc;
  --selected: #19b8ff;
  --cadastral-orange: #ff7f00;
  --shadow: 0 12px 32px rgba(20, 38, 28, .13);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: var(--paper); font-family: "Noto Sans KR", sans-serif; word-break: keep-all; overflow-wrap: normal; }
button, input, select { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.topbar { height: 62px; padding: 0 20px; display: grid; grid-template-columns: 290px 1fr 290px; align-items: center; background: var(--card); border-bottom: 1px solid var(--line); position: relative; z-index: 1001; }
.site-title { width: max-content; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.05em; text-decoration: none; white-space: nowrap; }
.piljisun-mark { width: 34px; height: 34px; flex: 0 0 34px; display: block; border-radius: 10px; box-shadow: 0 3px 10px rgba(17,44,33,.22); transition: transform .16s ease, box-shadow .16s ease; }
.site-title:hover .piljisun-mark { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(17,44,33,.27); }
.header-note { margin: 0; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #435048; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.header-note-title { display: flex; align-items: center; gap: 9px; }
.header-note .latest-keyword { padding: 0; color: #176448; background: transparent; border: 0; border-radius: 0; font-size: 12px; font-weight: 800; }
.header-note .latest-keyword::after { content: "·"; margin-left: 9px; color: #8a958d; }
.header-note > small { color: #7a847d; font-size: 9px; font-weight: 600; letter-spacing: -.01em; }
.topbar-actions { justify-self: end; display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; white-space: nowrap; }
.header-link { color: #315f4b; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.header-link:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.feedback-link { padding: 7px 10px; color: #241f00; background: #fee500; border: 1px solid #ebd500; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.feedback-link:hover { background: #f5dc00; }
.server-state { min-width: max-content; flex: 0 0 auto; justify-self: end; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.server-state b { font: inherit; white-space: nowrap; }
.server-state span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #c69236; box-shadow: 0 0 0 4px rgba(198,146,54,.13); }
.server-state.online span { background: #3d9b69; box-shadow: 0 0 0 4px rgba(61,155,105,.13); }
.server-state.maintenance span { background: #b45309; box-shadow: 0 0 0 4px rgba(180,83,9,.16); }

.maintenance-banner {
  min-height: 48px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1000;
  color: #6f2f08;
  background: #fff1da;
  border-bottom: 1px solid #e5b56e;
  text-align: center;
  white-space: nowrap;
}
.maintenance-banner strong { font-size: 14px; }
.maintenance-banner span { font-size: 11px; font-weight: 700; }
.maintenance-banner small { color: #89512b; font-size: 9px; }

.map-workspace { height: calc(100vh - 62px); display: grid; grid-template-columns: 374px minmax(0, 1fr); }
body.maintenance-mode-active .map-workspace { height: calc(100vh - 110px); }
html.embedded-map .topbar { display: none; }
html.embedded-map .map-workspace { height: 100vh; }
html.embedded-map body.maintenance-mode-active .map-workspace { height: calc(100vh - 48px); }
html.embedded-map .analytics-consent { display: none !important; }
.control-panel { position: relative; z-index: 800; overflow-y: auto; padding-bottom: 82px; background: var(--card); border-right: 1px solid var(--line); box-shadow: 8px 0 30px rgba(26, 45, 33, .08); scrollbar-width: thin; }
.panel-section { padding: 20px 22px; border-bottom: 1px solid #e5e8e1; }
.panel-section.compact { padding-top: 18px; padding-bottom: 18px; }
.section-heading { margin-bottom: 14px; display: flex; align-items: flex-start; gap: 11px; }
.section-heading .step { margin-top: 2px; color: var(--green); font: 500 10px/1 "IBM Plex Mono", monospace; }
.section-heading div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.section-heading strong { font-size: 14px; }
.section-heading small { color: var(--muted); font-size: 11px; }

.search-line { display: grid; grid-template-columns: minmax(0,1fr) 60px; }
input, select { width: 100%; height: 44px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid #cbd2c8; border-radius: 4px; outline: none; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,100,72,.09); }
input::placeholder { color: #a3aaa3; }
.search-line input { min-width: 0; border-radius: 4px 0 0 4px; font-size: 12px; }
.search-line button { border: 0; border-radius: 0 4px 4px 0; color: #fff; background: var(--green-dark); font-size: 12px; font-weight: 700; cursor: pointer; }
.search-line button:disabled { opacity: .55; cursor: wait; }
.address-results { margin-top: 7px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); }
.address-results:empty { display: none; }
.address-result { width: 100%; padding: 10px 11px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 0; border-bottom: 1px solid #e6e9e3; background: #fff; text-align: left; cursor: pointer; }
.address-result:last-child { border-bottom: 0; }
.address-result:hover { background: #f2f7ef; }
.address-result strong { font-size: 11px; }
.address-result small { color: var(--muted); font-size: 9px; }

.draw-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.output-shape-tools { grid-template-columns: repeat(3, 1fr); }
.tool { min-width: 0; padding: 10px 3px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.tool-icon { font: 500 21px/1 Arial, sans-serif; }
.tool:hover { border-color: #96aa9b; background: #f5f8f2; }
.tool.active { color: var(--green-dark); border-color: var(--green); background: #edf5e8; box-shadow: inset 0 0 0 1px var(--green); }
.tool.danger { color: #9b443a; }
.tool-utility-row { margin-bottom: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool.tool-horizontal { min-height: 37px; padding: 6px 9px; flex-direction: row; justify-content: center; gap: 7px; }
.tool.tool-horizontal .tool-icon { font-size: 17px; }
.tool-category { margin-top: 8px; padding: 9px; border: 1px solid #dbe2dc; border-left-width: 3px; border-radius: 6px; background: #f8faf8; }
.tool-category-heading { margin-bottom: 7px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tool-category-heading strong { color: #2c3d32; font-size: 12px; }
.tool-category-heading small { color: #7b867e; font-size: 10px; text-align: right; }
.output-tool-group { border-left-color: var(--green); }
.measurement-tool-group { border-left-color: var(--parcel); background: #f6f9fd; }
.measurement-tool-group .tool.active { color: #174e9c; border-color: var(--parcel); background: #edf5ff; box-shadow: inset 0 0 0 1px var(--parcel); }
.draw-hint { min-height: 31px; margin-top: 11px; padding: 8px 10px; color: var(--muted); background: #f2f3ed; border-radius: 4px; font-size: 11px; line-height: 1.5; }
.measurement-results { margin-top: 8px; }
.measurement-results-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 4px; color: #55708f; }
.measurement-results-heading span { font-size: 9px; font-weight: 800; }
.measurement-results-heading small { font-size: 8px; }
.measurement-list { max-height: 188px; overflow-y: auto; }
.measurement-result { margin-top: 5px; padding: 10px 11px; border: 1px solid #b8d3f5; border-radius: 5px; background: #edf5ff; }
.measurement-result.draft { border-style: dashed; }
.measurement-result span, .measurement-result strong, .measurement-result small { display: block; }
.measurement-result-heading { display: flex; align-items: center; justify-content: space-between; }
.measurement-result-heading button { width: 23px; height: 23px; padding: 0; border: 0; border-radius: 4px; color: #5d7590; background: #dcecff; cursor: pointer; font-size: 17px; line-height: 1; }
.measurement-result-heading button:hover { color: #fff; background: #165dcc; }
.measurement-result span { color: #55708f; font-size: 8px; font-weight: 700; }
.measurement-result strong { margin-top: 3px; color: #174e9c; font-size: 14px; }
.measurement-result small { margin-top: 3px; color: #5f7186; font-size: 9px; }
.measurement-number-icon { display: grid !important; place-items: center; color: #fff; background: #165dcc; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(11,54,116,.42); font: 800 10px/18px "Noto Sans KR", sans-serif; }
.measurement-number-icon span { display: block; width: 18px; height: 18px; text-align: center; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: #ebeee8; border-radius: 5px; }
.map-style-button { padding: 8px 4px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.map-style-button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 5px rgba(25,42,30,.12); }
.layer-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.layer-toggle[aria-pressed="true"] { border-color: var(--parcel); background: #edf5ff; color: #174e9c; box-shadow: inset 0 0 0 1px var(--parcel); }
.layer-swatch { width: 14px; height: 10px; border: 2px solid var(--parcel); background: rgba(255,123,61,.1); }
#cadastralToggle[aria-pressed="true"] { border-color: var(--cadastral-orange); color: #a94f00; background: #fff4e8; box-shadow: inset 0 0 0 1px var(--cadastral-orange); }
#cadastralToggle .layer-swatch { border-color: var(--cadastral-orange); background: rgba(242,140,0,.14); }
#lxMapToggle { margin-top: 0; }
#lxMapToggle[aria-pressed="true"] { border-color: #1769c2; color: #124f91; background: #edf6ff; box-shadow: inset 0 0 0 1px #1769c2; }
#lxMapToggle .lx-map-swatch { border-color: #1769c2; background: rgba(23,105,194,.14); }
.development-swatch { border-color: #5a67d8; background: rgba(90,103,216,.16); }
.land-use-swatch { border-color: #2280bf; background: rgba(34,128,191,.16); }
.district-swatch { border-color: #4458bc; background: rgba(68,88,188,.16); }
.road-swatch { border-color: #1269a4; background: rgba(18,105,164,.16); }
.facility-road { border-color: #d35400; background: rgba(211,84,0,.16); }
.facility-transport { border-color: #8e44ad; background: rgba(142,68,173,.16); }
.facility-space { border-color: #1e8449; background: rgba(30,132,73,.16); }
.facility-distribution { border-color: #2874a6; background: rgba(40,116,166,.16); }
.facility-public { border-color: #b9770e; background: rgba(185,119,14,.16); }
.facility-disaster { border-color: #c0392b; background: rgba(192,57,43,.16); }
.facility-health { border-color: #17a589; background: rgba(23,165,137,.16); }
.facility-environment { border-color: #5b8c31; background: rgba(91,140,49,.16); }
.facility-infrastructure { border-color: #566573; background: rgba(86,101,115,.16); }
.zoning-swatch { border-color: #2b6cb0; background: linear-gradient(90deg, #9ed3f7 0 25%, #b9d7a8 25% 50%, #d9c98f 50% 75%, #8fb99b 75%); }
.label-swatch { border-color: #34495e; background: linear-gradient(90deg, transparent 0 35%, #34495e 35% 65%, transparent 65%); }
.satellite-label-toggle { width: 100%; min-height: 34px; margin-top: 8px; }
.thematic-layer-grid { margin-top: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.thematic-layer-grid .layer-toggle { min-height: 37px; padding: 6px 5px; font-size: 12px; }
.thematic-subtitle { display: block; margin-top: 11px; color: #34453a; font-size: 10px; }
.urban-facility-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.urban-facility-map-grid .layer-toggle { min-width: 0; padding: 6px 3px; font-size: 10px; word-break: keep-all; }
.layer-status { margin-top: 8px; color: var(--muted); font-size: 9px; }

.output-form { padding: 20px 22px 28px; }
.output-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.output-form label:not(:first-child) { margin-top: 11px; }
.dxf-source-options { margin: 0 0 7px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border: 0; }
.dxf-source-options legend { grid-column: 1 / -1; margin: 0 0 7px; padding: 0; font-size: 12px; font-weight: 700; }
.output-form .source-choice { min-height: 38px; margin: 0; padding: 0 10px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; border: 1px solid #c8d2ca; border-radius: 5px; color: #34453a; background: #fff; cursor: pointer; }
.output-form .source-choice:has(#dxfContinuousSource:checked) { color: #a94f00; border-color: var(--cadastral-orange); background: #fff4e8; box-shadow: inset 0 0 0 1px rgba(255,127,0,.16); }
.output-form .source-choice:has(#dxfLxSource:checked) { color: #164e91; border-color: #78a8dd; background: #edf5ff; box-shadow: inset 0 0 0 1px rgba(22,93,204,.12); }
.source-choice input { width: 16px; height: 16px; margin: 0; }
#dxfContinuousSource { accent-color: var(--cadastral-orange); }
#dxfLxSource { accent-color: #165dcc; }
.source-choice span { line-height: 1; }
.dxf-auxiliary-options { margin: 12px 0 4px; border: 1px solid #d6ddd7; border-radius: 6px; background: #fafbf8; }
.dxf-auxiliary-options summary { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #34453a; cursor: pointer; font-size: 12px; font-weight: 800; list-style-position: inside; }
.dxf-auxiliary-options summary small { margin-left: auto; color: #66736b; font-size: 10px; font-weight: 600; white-space: nowrap; }
.feature-beta-badge { padding: 2px 6px 2px 5px; display: inline-flex; align-items: center; gap: 3px; color: #72511b; background: #fff6d9; border: 1px solid #e7c66f; border-radius: 999px; box-shadow: 0 2px 5px rgba(114, 81, 27, .1); font-family: "IBM Plex Mono", monospace; font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .03em; transform: rotate(-2deg); }
.feature-beta-badge::before { content: "•"; color: #d18a18; font-family: "Noto Sans KR", sans-serif; font-size: 9px; line-height: .7; }
.dxf-auxiliary-options > p { margin: 0; padding: 0 12px 9px; color: #657068; font-size: 10px; line-height: 1.5; word-break: keep-all; }
.dxf-auxiliary-options > small { display: block; padding: 0 12px 11px; color: #6a746e; font-size: 10px; line-height: 1.5; word-break: keep-all; }
.urban-facility-choices { margin: 0; padding: 0 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border: 0; }
.output-form .urban-facility-choices label { min-width: 0; min-height: 36px; margin: 0; padding: 6px 7px; display: flex; align-items: center; gap: 6px; box-sizing: border-box; border: 1px solid #d6ddd7; border-radius: 5px; background: #fff; cursor: pointer; font-size: 10px; line-height: 1.25; word-break: keep-all; }
.urban-facility-choices label:has(input:checked) { color: #174e9c; border-color: #78a8dd; background: #edf5ff; box-shadow: inset 0 0 0 1px rgba(22,93,204,.1); }
.urban-facility-choices input { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; accent-color: #1769c2; }
.cad-layer-swatch { width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid currentColor; border-radius: 3px; background: transparent; }
.swatch-urban-road { color: #e5231e; }
.swatch-urban-transport { color: #b337d6; }
.swatch-urban-space { color: #18a83e; }
.swatch-urban-distribution { color: #17a5d1; }
.swatch-urban-public { color: #e0bc10; }
.swatch-urban-disaster { color: #c86b14; }
.swatch-urban-health { color: #f05aa6; }
.swatch-urban-environment { color: #8a6bcc; }
.swatch-urban-infrastructure { color: #777; }
.control-point-dxf-choices { margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; border: 0; }
.output-form .control-point-dxf-choices label { min-width: 0; min-height: 47px; margin: 0; padding: 7px 9px; display: grid; grid-template-columns: 16px 30px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #d6ddd7; border-radius: 5px; background: #fff; cursor: pointer; }
.control-point-dxf-choices label:has(input:checked) { border-color: #719fcf; background: #edf5ff; box-shadow: inset 0 0 0 1px rgba(22,93,204,.1); }
.control-point-dxf-choices input { width: 15px; height: 15px; margin: 0; accent-color: #165dcc; }
.control-point-dxf-choices span, .control-point-dxf-choices b, .control-point-dxf-choices small { min-width: 0; display: block; }
.control-point-dxf-choices b { font-size: 11px; line-height: 1.25; }
.control-point-dxf-choices small { margin-top: 2px; color: #77827a; font-size: 9px; line-height: 1.2; }
.topography-category-choices { margin: 0; padding: 0 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border: 0; }
.output-form .topography-category-choices label { min-width: 0; min-height: 46px; margin: 0; padding: 6px 7px; display: grid; grid-template-columns: 15px 9px minmax(0,1fr); align-items: center; gap: 6px; box-sizing: border-box; border: 1px solid #d6ddd7; border-radius: 5px; color: #32443a; background: #fff; cursor: pointer; }
.topography-category-choices label:has(input:checked) { color: #174e72; border-color: #73a3c1; background: #edf6fa; box-shadow: inset 0 0 0 1px rgba(23,96,130,.1); }
.topography-category-choices input { width: 14px; height: 14px; margin: 0; accent-color: #176982; }
.topography-category-choices span, .topography-category-choices b, .topography-category-choices small { min-width: 0; display: block; word-break: keep-all; }
.topography-category-choices b { font-size: 10px; line-height: 1.25; }
.topography-category-choices small { margin-top: 2px; color: #738078; font-size: 8px; line-height: 1.2; }
.topography-coordinate-note { margin-top: 1px; border-top: 1px solid #e0e6e1; padding-top: 9px !important; }
.topography-coordinate-note strong { color: #12556f; }
.topography-classification-note { margin: 0 10px 8px !important; padding: 8px 9px !important; border-left: 3px solid #6e8795; background: #f6f8f6; color: #485950 !important; line-height: 1.5 !important; word-break: keep-all; }
.topography-classification-note strong { color: #244b38; }
.topography-availability-note { margin: 0 10px 8px !important; padding: 7px 9px !important; border-left: 3px solid #6e8795; background: #f2f6f8; color: #435c69 !important; line-height: 1.45 !important; word-break: keep-all; }
.dxf-topography-options.unavailable .topography-category-choices { opacity: .58; }
.dxf-topography-options.unavailable .topography-category-choices label { cursor: not-allowed; }
.dxf-topography-options:not(.unavailable) .topography-availability-note { border-left-color: #32814d; background: #f2f8f3; color: #285f39 !important; }
.swatch-topography-a { color: #777; }
.swatch-topography-b { color: #e23d35; }
.swatch-topography-c { color: #12a3b7; }
.swatch-topography-d { color: #2d9858; }
.swatch-topography-e { color: #1d78cc; }
.swatch-topography-f { color: #9b6d3f; }
.swatch-topography-g { color: #236bc4; }
.swatch-topography-h { color: #8b4ea8; }
.cad-control-symbol { width: 26px; height: 26px; position: relative; display: block; color: currentColor; }
.cad-control-symbol::before, .cad-control-symbol::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%,-50%); }
.cad-control-symbol::before { width: 20px; height: 2px; }
.cad-control-symbol::after { width: 2px; height: 20px; }
.symbol-square-cross { color: #165dcc; border: 2px solid currentColor; }
.symbol-circle-cross { color: #c5a000; border: 2px solid currentColor; border-radius: 50%; }
.symbol-triangle { color: #16943d; clip-path: polygon(50% 0,100% 100%,0 100%); border: 0; background: currentColor; }
.symbol-triangle::before { width: 12px; height: 2px; color: #fff; }
.symbol-triangle::after { width: 2px; height: 14px; color: #fff; }
.output-form select { font-size: 13px; }
.form-note { display: block; margin-top: 6px; color: #647068; font-size: 11px; line-height: 1.55; }
.epsg-recommendation-note { padding-left: 8px; border-left: 2px solid #c8d2ca; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.epsg-recommendation-note.automatic { color: #285d19; border-left-color: #5e8c2d; background: #f4f8ee; }
.epsg-recommendation-note.manual { color: #334b5d; border-left-color: #6f8798; }
#epsgLabel.coordinate-attention {
  color: #285d19;
  animation: coordinate-label-attention 2s ease-in-out infinite;
  transition: color .25s ease;
}
#epsg.coordinate-attention {
  animation: coordinate-attention 2s ease-in-out infinite;
  border-color: #5e8c2d;
  outline: 2px solid rgba(75, 122, 38, .16);
  outline-offset: 1px;
}
.output-action-dock { width: 374px; padding: 10px 22px 12px; position: fixed; z-index: 910; left: 0; bottom: 0; background: rgba(255,254,249,.97); border-top: 1px solid #d8ddd4; box-shadow: 0 -9px 24px rgba(20,38,28,.1); backdrop-filter: blur(7px); }
.output-action-dock .primary { margin-top: 0; }
.primary { width: 100%; height: 50px; margin-top: 12px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 5px; color: #fff; background: var(--green); cursor: pointer; font-size: 12px; font-weight: 800; word-break: keep-all; }
.primary:hover:not(:disabled) { background: #0f5139; }
.primary:disabled { color: #929992; background: #e2e5df; cursor: not-allowed; }
.form-error { min-height: 16px; margin: 8px 0 0; color: #a33c32; font-size: 10px; word-break: keep-all; }
.output-action-dock .form-error:empty { display: none; }

.map-stage { min-width: 0; position: relative; overflow: hidden; background: #dce3d8; }
#parcelMap { width: 100%; height: 100%; background: #dce3d8; }
.leaflet-cadastral-pane .leaflet-tile { filter: brightness(0) saturate(100%) invert(33.3%) sepia(54.3%) saturate(4217%) hue-rotate(21.9deg) brightness(140.6%) contrast(128.1%); }
.leaflet-lxMap-pane .leaflet-tile { filter: none; }
.cadastral-parcel-label, .lx-map-parcel-label { display: flex !important; align-items: center; justify-content: center; border: 0 !important; background: transparent !important; font-family: "Malgun Gothic", "Noto Sans KR", Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; text-shadow: 0 1px 1px #fff, 1px 0 1px #fff, -1px 0 1px #fff, 0 -1px 1px #fff, 0 0 3px #fff; pointer-events: none !important; }
.cadastral-parcel-label { color: var(--cadastral-orange); }
.lx-map-parcel-label { color: #165dcc; }
.cadastral-parcel-label span, .lx-map-parcel-label span { display: block; transform: translateY(-1px); }
.map-stage.drawing #parcelMap { cursor: crosshair; }
.leaflet-tooltip.range-preview-tooltip {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.leaflet-tooltip.range-preview-tooltip::before { display: none; }
.range-live-card {
  min-width: 190px;
  padding: 10px 12px;
  border: 1px solid rgba(22,93,204,.34);
  border-radius: 8px;
  background: rgba(15,37,31,.94);
  color: #fff;
  box-shadow: 0 8px 24px rgba(16,30,26,.22);
  display: grid;
  gap: 3px;
  font-family: Pretendard, "Malgun Gothic", sans-serif;
}
.range-live-card strong { font-size: 13px; line-height: 1.25; }
.range-live-card span { color: #d9f86f; font-size: 11px; font-weight: 800; }
.range-live-card small { color: rgba(255,255,255,.7); font-size: 10px; white-space: nowrap; }
.range-live-card.warning { border-color: #f3bb3b; }
.range-live-card.warning span,
.range-live-card.warning small { color: #ffd66d; }
.range-live-card.exceeded { border-color: #ff6b57; background: rgba(67,25,20,.96); }
.range-live-card.exceeded span,
.range-live-card.exceeded small { color: #ffb0a4; }
.map-message { position: absolute; z-index: 700; top: 18px; left: 50%; transform: translateX(-50%); min-width: 340px; padding: 10px 15px; background: rgba(18,41,31,.92); color: #fff; border-radius: 5px; box-shadow: var(--shadow); pointer-events: none; text-align: center; transition: opacity .2s; }
.map-message strong, .map-message span { display: block; }
.map-message strong { font-size: 11px; }
.map-message span { margin-top: 3px; color: rgba(255,255,255,.68); font-size: 9px; }
.map-message.quiet { opacity: 0; }
.map-layer-control { position: absolute; z-index: 760; top: 18px; right: 18px; width: 340px; }
.layer-tool-button { width: 100%; height: 40px; padding: 0 11px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; border: 1px solid rgba(34,65,110,.3); border-radius: 6px; color: #203027; background: rgba(255,255,255,.98); box-shadow: 0 7px 22px rgba(20,38,28,.16); cursor: pointer; }
.layer-tool-button[aria-expanded="true"] { color: #174e9c; border-color: var(--parcel); background: #edf5ff; }
.layer-tool-button strong { text-align: left; font-size: 11px; }
.layer-tool-button small { color: #6d7871; font: 500 8px/1 "IBM Plex Mono", monospace; }
.layer-tool-icon { font-size: 16px; line-height: 1; }
.layer-tool-state { display: flex; align-items: center; gap: 5px; }
.layer-tool-state i { color: #47574d; font-size: 17px; font-style: normal; line-height: 1; transform: translateY(-1px); transition: transform .18s ease; }
.layer-tool-button[aria-expanded="true"] .layer-tool-state i { transform: translateY(1px) rotate(180deg); }
.map-layer-toolbox { position: absolute; top: 46px; right: 0; width: 100%; max-height: calc(100vh - 140px); overflow-y: auto; box-sizing: border-box; padding: 12px; border: 1px solid #b8c7d8; border-radius: 7px; color: #1f3027; background: rgba(255,255,255,.99); box-shadow: 0 14px 36px rgba(20,38,28,.22); scrollbar-width: thin; }
.map-layer-toolbox .layer-toggle { font-size: 13px; }
.map-layer-toolbox .segmented { grid-template-columns: 1fr 1fr; gap: 3px; background: #e7ece8; }
.map-layer-toolbox .map-style-button { min-height: 35px; color: #56635a; font-size: 13px; }
.map-layer-toolbox .map-style-button.active { color: #123f7d; background: #fff; box-shadow: 0 1px 5px rgba(25,42,30,.16); }
.map-layer-toolbox .urban-facility-map-grid .layer-toggle { font-size: 10px; line-height: 1.25; }
.toolbox-heading { padding: 1px 1px 9px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #d9e0da; }
.toolbox-heading strong, .toolbox-heading small { display: block; }
.toolbox-heading strong { font-size: 14px; color: #1e3327; }
.toolbox-heading small { margin-top: 3px; color: #68766d; font-size: 10px; }
.toolbox-heading button { width: 25px; height: 25px; border: 1px solid #d7ded8; border-radius: 4px; color: #526158; background: #f1f4f1; cursor: pointer; font-size: 18px; line-height: 1; }
.toolbox-section { padding: 9px 0; border-bottom: 1px solid #e3e8e4; }
.toolbox-section:last-child { padding-bottom: 2px; border-bottom: 0; }
.toolbox-label { display: block; margin-bottom: 6px; color: #526258; font-size: 12px; font-weight: 800; }
.toolbox-wide { width: 100%; min-height: 36px; font-size: 12px; }
.parcel-layer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.layer-feature-grid { padding: 9px 0 2px; }
.layer-feature-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.layer-feature-tabs .toolbox-group-toggle {
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "state state";
  gap: 3px 6px;
}
.layer-feature-tabs .toolbox-group-toggle span { grid-area: label; font-size: 12px; }
.layer-feature-tabs .toolbox-group-toggle small { grid-area: state; justify-self: start; }
.layer-feature-tabs .toolbox-group-toggle i { grid-area: arrow; }
.layer-feature-grid > .control-point-group,
.layer-feature-grid > .planning-group { margin-top: 7px; padding-top: 8px; border-top: 1px solid #e3e8e4; }
.zoning-toggle { margin-bottom: 8px; }
.toolbox-group-toggle { width: 100%; min-height: 35px; padding: 0 8px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; border: 1px solid #cfd8d1; border-radius: 5px; color: var(--ink); background: #f5f7f4; cursor: pointer; text-align: left; }
.toolbox-group-toggle span { font-size: 13px; font-weight: 800; }
.toolbox-group-toggle small { color: #6d7871; font: 500 10px/1 "IBM Plex Mono", monospace; }
.toolbox-group-toggle i { font-style: normal; transition: transform .18s ease; }
.toolbox-group-toggle[aria-expanded="true"] { color: #174e9c; border-color: #b8d3f5; background: #edf5ff; }
.toolbox-group-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.planning-group { padding-top: 7px; }
.control-point-group { padding-top: 7px; }
.control-point-guide { margin: 0 1px 7px; color: #65736a; font-size: 11px; line-height: 1.45; word-break: keep-all; }
.control-point-filters { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; border: 0; }
.control-point-filter { position: relative; min-width: 0; min-height: 48px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #d6ddd7; border-radius: 5px; color: #647069; background: #fff; cursor: pointer; text-align: center; }
.control-point-filter input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.control-point-filter span, .control-point-result-symbol { width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; color: #fff; box-shadow: 0 1px 5px rgba(20,38,28,.24); font-size: 9px; font-weight: 800; line-height: 1; }
.control-point-filter b { overflow: hidden; max-width: 100%; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.control-point-filter-benchmark span, .control-point-symbol-benchmark, .control-point-marker-benchmark { background: #0060ff; }
.control-point-filter-unified span, .control-point-symbol-unified, .control-point-marker-unified { color: #273019; background: #fdb900; }
.control-point-filter-triangulation span, .control-point-symbol-triangulation, .control-point-marker-triangulation { padding-top: 5px; box-sizing: border-box; border: 0; border-radius: 0; background: #41c600; clip-path: polygon(50% 0,100% 100%,0 100%); filter: drop-shadow(0 1px 2px rgba(20,38,28,.35)); }
.control-point-filter:has(input:checked) { color: #123f7d; border-color: #8cb9ec; background: #edf5ff; box-shadow: inset 0 0 0 1px rgba(47,128,237,.16); }
.control-point-filter:focus-within { outline: 2px solid rgba(47,128,237,.34); outline-offset: 1px; }
.control-point-search-label { margin: 8px 1px -1px; color: #3e5147; font-size: 10px; font-weight: 800; line-height: 1.4; word-break: keep-all; }
.control-point-search { margin-top: 6px; display: grid; grid-template-columns: minmax(0,1fr) 47px; gap: 4px; }
.control-point-search input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #c8d2ca; border-radius: 5px; color: #1d2d23; background: #fff; font-size: 10px; outline: none; }
.control-point-search input:focus { border-color: #2f80ed; box-shadow: 0 0 0 2px rgba(47,128,237,.13); }
.control-point-search button { border: 1px solid #176448; border-radius: 5px; color: #fff; background: #176448; cursor: pointer; font-size: 10px; font-weight: 800; }
.control-point-search button:disabled { cursor: wait; opacity: .64; }
.control-point-search-actions { margin-top: 5px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.control-point-search-actions button, .control-point-search-actions a { min-width: 0; padding: 3px 0; border: 0; color: #52645a; background: transparent; font-size: 9px; font-weight: 700; line-height: 1.35; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.control-point-search-actions button:disabled { color: #abb4ae; cursor: default; text-decoration: none; }
.control-point-search-actions a { color: #155c9f; text-align: right; }
.control-point-status { min-height: 13px; margin: 5px 1px 0; line-height: 1.4; word-break: keep-all; }
.control-point-results { max-height: 170px; margin-top: 5px; overflow-y: auto; display: grid; gap: 3px; scrollbar-width: thin; }
.control-point-result { width: 100%; min-width: 0; padding: 5px 6px; display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 6px; border: 1px solid #dbe2dc; border-radius: 5px; color: #26362c; background: #fff; cursor: pointer; text-align: left; }
.control-point-result:hover, .control-point-result:focus-visible { border-color: #8cb9ec; background: #edf5ff; outline: none; }
.control-point-result-symbol { width: 20px; height: 20px; font-size: 8px; }
.control-point-result-copy { min-width: 0; }
.control-point-result-copy strong, .control-point-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-point-result-copy strong { color: #1c3225; font-size: 10px; }
.control-point-result-copy small { margin-top: 2px; color: #718078; font-size: 8px; }
.zoom-indicator { width: 100%; box-sizing: border-box; margin-bottom: 7px; padding: 8px 9px; color: #3e4d43; background: #f9fbf9; border: 1px solid #cbd6cc; border-radius: 5px; box-shadow: none; }
.zoom-title { display: block; margin-bottom: 7px; color: #68756c; font-size: 11px; font-weight: 700; }
.zoom-control-row { margin-bottom: 0; display: grid; grid-template-columns: 26px 1fr 26px; align-items: start; gap: 6px; }
.zoom-control-row button { width: 26px; height: 26px; padding: 0; border: 1px solid #bfcbbf; border-radius: 4px; color: #174e9c; background: #fff; cursor: pointer; font: 700 17px/1 Arial, sans-serif; }
.zoom-control-row button:disabled { color: #adb5af; background: #eef1ed; cursor: default; }
.zoom-gauge-column { min-width: 0; padding-top: 10px; }
.zoom-track { height: 6px; position: relative; overflow: visible; background: #dfe5e0; border-radius: 999px; }
.zoom-track span { display: block; width: 0; height: 100%; background: var(--parcel); border-radius: inherit; transition: width .22s ease; }
.zoom-track i { position: absolute; left: var(--cadastral-start, 66.667%); top: -3px; width: 2px; height: 12px; background: #174e9c; transform: translateX(-1px); transition: left .22s ease; }
.zoom-track i::after { content: "필지경계 표시 단계"; position: absolute; top: 13px; left: 50%; width: max-content; color: #174e9c; font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; writing-mode: horizontal-tb; transform: translateX(-50%); }
.zoom-indicator small { display: block; color: #78827a; font-size: 10px; }
.zoom-gauge-column small { margin-top: 16px; line-height: 1.25; text-align: center; white-space: nowrap; }
.zoom-indicator.ready { border-color: var(--parcel); background: #edf5ff; }
.zoom-indicator.ready .zoom-track span { background: #19b8ff; }
.zoom-indicator.ready small { color: #174e9c; font-weight: 700; }
.map-progress { position: absolute; z-index: 720; top: 151px; right: 18px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; color: var(--green-dark); background: rgba(255,254,249,.94); border-radius: 4px; box-shadow: var(--shadow); font-size: 10px; transition: right .18s ease; }
.map-stage.layer-tool-open .map-progress { right: 376px; }
.map-progress span { width: 10px; height: 10px; border: 2px solid #c8d3c9; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.map-progress b { font-weight: 700; }
.measurement-notice { position: absolute; z-index: 760; left: 50%; bottom: 48px; transform: translateX(-50%); max-width: calc(100% - 40px); padding: 10px 14px; color: #fff; background: rgba(20,78,156,.94); border: 1px solid rgba(255,255,255,.28); border-radius: 5px; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; font-size: 10px; font-weight: 700; }
.parcel-info-popup { overflow: visible !important; }
.parcel-info-popup .leaflet-popup-content-wrapper { position: relative; overflow: visible; border: 2px solid #123b5d; border-radius: 9px; background: #fff; box-shadow: 0 18px 48px rgba(4,20,34,.42); }
.parcel-info-popup .leaflet-popup-content-wrapper::before { content: ""; position: absolute; z-index: 3; left: -18px; top: 12px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 18px solid #123b5d; filter: drop-shadow(-2px 2px 1px rgba(4,20,34,.2)); }
.parcel-info-popup .leaflet-popup-content { width: auto !important; margin: 0; }
.parcel-info-popup .leaflet-popup-tip-container { display: none; }
.leaflet-container .parcel-info-popup a.leaflet-popup-close-button { position: absolute; z-index: 1000; top: -18px !important; right: -18px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; color: #fff !important; background: #064fbe; box-shadow: 0 6px 18px rgba(4,20,34,.48); font-size: 27px !important; font-weight: 500; line-height: 1 !important; opacity: 1; pointer-events: auto; }
.leaflet-container .parcel-info-popup a.leaflet-popup-close-button:hover { color: #fff !important; background: #032f72; }
.parcel-info-card { width: 560px; padding: 0 0 14px; overflow: hidden; border-radius: 7px; background: #fff; color: #142635; font-family: "Noto Sans KR", sans-serif; }
.parcel-info-kicker { display: block; padding: 16px 18px 0; background: #123b5d; color: #8fd4ff; font: 700 9px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.parcel-info-card h3 { max-width: none; margin: 0; padding: 8px 48px 16px 18px; background: #123b5d; color: #fff; font-size: 15px; line-height: 1.45; word-break: keep-all; }
.parcel-info-groups { padding: 12px 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 4px solid #2d8bd2; }
.parcel-info-group { overflow: hidden; border: 1px solid #d7e2ea; border-radius: 6px; background: #fff; }
.parcel-info-group-wide { grid-column: 1 / -1; }
.parcel-info-group h4 { margin: 0; padding: 7px 10px; color: #244b67; background: #edf4f8; border-bottom: 1px solid #d7e2ea; font-size: 9px; line-height: 1.2; }
.parcel-info-group-list { margin: 0; padding: 0 10px; }
.parcel-info-group-paired .parcel-info-group-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.parcel-info-row { min-height: 32px; display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: start; border-bottom: 1px solid #e3eaef; }
.parcel-info-row dt, .parcel-info-row dd { margin: 0; padding: 8px 0; font-size: 10px; line-height: 1.45; }
.parcel-info-row dt { color: #556b7b; font-weight: 700; }
.parcel-info-row dd { color: #102536; font-weight: 700; word-break: keep-all; }
.parcel-info-row:last-child { border-bottom: 0; }
.parcel-info-group-identity .parcel-info-row { grid-template-columns: 92px minmax(0,1fr); }
.parcel-info-group-identity .parcel-info-row dd { font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 500; }
.parcel-info-note { margin: 11px 18px 0; color: #657783; font-size: 8px; line-height: 1.55; }
.parcel-info-loading { width: 420px; min-height: 62px; box-sizing: border-box; padding: 14px 52px 14px 18px; display: flex; align-items: center; gap: 12px; border-radius: 7px; background: #123b5d; color: #fff; white-space: nowrap; }
.parcel-info-loading-spinner { width: 28px; height: 28px; flex: 0 0 28px; border: 2px solid rgba(255,255,255,.25); border-top-color: #7ed0ff; border-radius: 50%; animation: spin .8s linear infinite; }
.parcel-info-loading strong, .parcel-info-loading small { display: inline-block; white-space: nowrap; }
.parcel-info-loading strong { font-size: 12px; }
.parcel-info-loading small { min-width: 0; overflow: hidden; padding-left: 2px; color: #c7e2f4; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; }
.parcel-info-error { min-height: 105px; padding: 24px 20px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.parcel-info-error strong { color: #983c34; font-size: 12px; }
.parcel-info-error span { color: #6f7a72; font-size: 9px; }
.parcel-selection-loading { filter: drop-shadow(0 0 5px rgba(6,79,190,.75)); animation: parcel-selection-pulse 1s ease-in-out infinite alternate; }
.parcel-raster-preview { position: absolute; inset: 0; z-index: 450; pointer-events: none; }
.control-point-leaflet-icon { border: 0 !important; background: transparent !important; pointer-events: auto !important; }
.control-point-marker { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; border-radius: 50%; color: #fff; box-shadow: 0 4px 12px rgba(11,35,57,.4); font: 800 10px/1 "Noto Sans KR", sans-serif; }
.control-point-marker.control-point-marker-unified { color: #273019; }
.control-point-marker::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 8px; height: 8px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; background: inherit; transform: translateX(-50%) rotate(45deg); }
.control-point-marker-triangulation { height: 31px; padding-top: 9px; }
.control-point-marker-triangulation::after { display: none; }
.control-point-leaflet-icon:hover .control-point-marker, .control-point-leaflet-icon:focus .control-point-marker { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(11,35,57,.48); }
.control-point-popup { overflow: visible !important; }
.control-point-popup .leaflet-popup-content-wrapper { position: relative; overflow: visible; border: 2px solid #174c73; border-radius: 9px; background: #fff; box-shadow: 0 18px 48px rgba(4,20,34,.42); }
.control-point-popup .leaflet-popup-content { width: auto !important; margin: 0; }
.control-point-popup .leaflet-popup-tip { background: #174c73; box-shadow: none; }
.leaflet-container .control-point-popup a.leaflet-popup-close-button { position: absolute; z-index: 1000; top: -18px !important; right: -18px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; color: #fff !important; background: #1769aa; box-shadow: 0 6px 18px rgba(4,20,34,.42); font-size: 27px !important; font-weight: 500; line-height: 1 !important; opacity: 1; }
.leaflet-container .control-point-popup a.leaflet-popup-close-button:hover { background: #0e4776; }
.control-point-card { width: 650px; overflow: hidden; border-radius: 7px; color: #142635; background: #fff; font-family: "Noto Sans KR", sans-serif; }
.control-point-card-header { min-height: 72px; padding: 13px 52px 13px 16px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 10px; row-gap: 3px; color: #fff; background: linear-gradient(110deg,#123b5d,#176448); }
.control-point-card-header .control-point-type { grid-row: 1 / 3; min-width: 58px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #fff; font-size: 9px; font-weight: 800; text-align: center; white-space: nowrap; }
.control-point-card-header h3 { min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.control-point-card-header small { overflow: hidden; color: #cde4d9; font: 500 9px/1.3 "IBM Plex Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.control-point-type-benchmark { background: #0060ff; }
.control-point-type-unified { color: #273019 !important; background: #fdb900; }
.control-point-type-triangulation { background: #41c600; }
.control-point-card-groups { padding: 12px 12px 0; display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: stretch; gap: 8px; border-top: 4px solid #59a7d8; }
.control-point-card-groups .parcel-info-group { margin: 0; }
.control-point-card-groups .parcel-info-group h4 { padding: 7px 9px; font-size: 9px; }
.control-point-card-groups .parcel-info-group-list { padding: 0 9px; }
.control-point-card-groups .parcel-info-row { min-height: 29px; grid-template-columns: 62px minmax(0,1fr); }
.control-point-card-groups .parcel-info-row dt, .control-point-card-groups .parcel-info-row dd { padding: 7px 0; font-size: 9px; line-height: 1.35; }
.control-point-card-groups .parcel-info-row dd { word-break: keep-all; }
.control-point-directions { margin: 9px 12px 0; padding: 8px 10px; border: 1px solid #dbe5dc; border-radius: 5px; color: #435c4b; background: #f7faf7; font-size: 9px; font-weight: 650; line-height: 1.55; word-break: keep-all; }
.control-point-detail-status { min-height: 34px; margin: 9px 12px 0; padding: 7px 10px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; border: 1px solid #c9dbe8; border-radius: 5px; color: #24546f; background: #f1f8fc; font-size: 9px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.control-point-detail-spinner { width: 13px; height: 13px; flex: 0 0 13px; box-sizing: border-box; border: 2px solid #c4d8e5; border-top-color: #1769aa; border-radius: 50%; animation: control-point-detail-spin .75s linear infinite; }
.control-point-detail-symbol { width: 17px; height: 17px; flex: 0 0 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #258459; font-size: 10px; font-weight: 900; line-height: 1; }
.control-point-detail-ready { color: #235d42; border-color: #c5dfcf; background: #f1f9f4; }
.control-point-detail-error { color: #8a382f; border-color: #efc4bd; background: #fff4f1; }
.control-point-detail-error .control-point-detail-symbol { background: #b84b3f; }
.control-point-card-actions { padding: 10px 14px 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.control-point-card-actions a, .control-point-card-actions button { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #176448; border-radius: 5px; color: #fff; background: #176448; font: 800 9px/1.2 "Noto Sans KR", sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; }
.control-point-card-actions a:hover, .control-point-card-actions button:hover { background: #104b36; }
.control-point-card-actions .control-point-fullscreen-link { color: #17351f; border-color: #a9cf4f; background: #d8f77d; }
.control-point-card-actions .control-point-fullscreen-link:hover { background: #c9ed65; }
.control-point-card-actions .control-point-summary-link { color: #174c73; border-color: #a8c7df; background: #eef7fd; }
.control-point-card-actions .control-point-summary-link:hover { background: #ddecf7; }
.control-point-card-actions .control-point-copy-button { color: #174c73; border-color: #a8c7df; background: #fff; }
.control-point-card-actions .control-point-copy-button:hover { background: #eef7fd; }
.control-point-card-actions .control-point-pdf-link { color: #124d80; border-color: #a8c7df; background: #eef7fd; }
.control-point-card-actions .control-point-pdf-link:hover { background: #ddecf7; }
.control-point-card-note { margin: 8px 15px 12px; color: #687b70; font-size: 8px; line-height: 1.55; word-break: keep-all; }
@keyframes control-point-detail-spin { to { transform: rotate(360deg); } }
.map-footer-status { position: absolute; z-index: 700; left: 15px; right: 15px; bottom: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.map-footer-status span { padding: 5px 8px; color: #4f5d52; background: rgba(255,255,255,.88); border-radius: 3px; box-shadow: 0 1px 6px rgba(23,39,27,.1); font-size: 8px; }

.coupang-affiliate-ad {
  position: absolute;
  z-index: 650;
  right: 18px;
  bottom: 72px;
  width: 340px;
  box-sizing: border-box;
  padding: 9px;
  color: #26332b;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(37,55,44,.18);
  border-radius: 7px;
  box-shadow: 0 14px 38px rgba(18,37,25,.2);
}
.affiliate-ad-toggle { display: none; }
.affiliate-ad-panel { display: block; }
.affiliate-ad-heading { min-height: 23px; display: flex; align-items: center; gap: 8px; }
.affiliate-ad-heading strong { padding: 3px 6px; color: #fff; background: #4e5c53; border-radius: 3px; font-size: 10px; letter-spacing: .04em; }
.affiliate-ad-heading span { color: #536159; font-size: 10px; font-weight: 700; }
.affiliate-widget-viewport { width: 320px; height: 400px; max-width: 100%; margin: 5px auto 0; overflow: hidden; background: #fff; }
.coupang-affiliate-ad iframe { display: block; width: 320px; max-width: 100%; height: 400px; border: 0; background: #fff; }
.coupang-affiliate-ad p { margin: 8px 2px 1px; color: #3f4a43; font-size: 11px; font-weight: 700; line-height: 1.55; word-break: keep-all; }
html.embedded-map .coupang-affiliate-ad { display: none; }

.job-card { position: absolute; z-index: 900; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(590px, calc(100% - 40px)); min-height: 156px; box-sizing: border-box; padding: 26px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 18px; align-items: center; color: #fff; background: var(--green-dark); border: 1px solid rgba(255,255,255,.13); border-radius: 8px; box-shadow: 0 22px 70px rgba(11,28,20,.36); }
.job-card > div:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
.job-card span { color: var(--lime); font: 500 8px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; }
.job-card strong { font-size: 16px; }
.job-card small { color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.45; word-break: keep-all; }
.job-spinner { width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.16); border-top-color: var(--lime); border-radius: 50%; animation: spin 1s linear infinite; }
.job-card.complete .job-spinner { display: grid; place-items: center; border: 0; background: var(--lime); color: var(--green-dark); animation: none; }
.job-card.complete .job-spinner::after { content: "✓"; font-size: 22px; font-weight: 800; }
.job-card.failed { background: #38221d; border-color: rgba(255,190,164,.3); }
.job-card.failed .job-spinner { display: grid; place-items: center; border: 1px solid rgba(255,190,164,.5); color: #ffbea4; animation: none; }
.job-card.failed .job-spinner::after { content: "!"; font-size: 23px; font-weight: 900; }
.job-progress-ui { width: 100%; margin-top: 8px; display: grid; gap: 6px; }
.job-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.job-progress-meta b { color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; }
.job-progress-meta b:last-child { color: var(--lime); font-variant-numeric: tabular-nums; }
.job-progress-track { width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.14); }
.job-progress-track i { display: block; width: 1%; height: 100%; border-radius: inherit; background: var(--lime); transition: width .35s ease; }
.job-progress-ui > small { color: rgba(255,255,255,.58); font-size: 9px; }
.job-progress-details-toggle { width: fit-content; margin-top: 1px; padding: 2px 0; display: inline-flex; align-items: center; gap: 5px; border: 0; color: rgba(255,255,255,.82); background: transparent; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.job-progress-details-toggle span { color: var(--lime); font-size: 12px; line-height: 1; transform-origin: center; transition: transform .18s ease; }
.job-progress-details-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.job-progress-stages { margin: 2px 0 0; padding: 9px 0 0; display: grid; gap: 7px; border-top: 1px solid rgba(255,255,255,.12); list-style: none; }
.job-progress-stages li { min-height: 16px; display: grid; grid-template-columns: 13px minmax(0,1fr) auto; align-items: center; gap: 7px; color: rgba(255,255,255,.43); font-size: 9px; }
.job-progress-stages li::before { content: ""; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; }
.job-progress-stages li.active { color: #fff; font-weight: 700; }
.job-progress-stages li.active::before { border: 2px solid rgba(255,255,255,.28); border-top-color: var(--lime); animation: spin .8s linear infinite; }
.job-progress-stages li.complete { color: rgba(255,255,255,.78); }
.job-progress-stages li.complete::before { content: "✓"; width: 11px; height: 11px; display: grid; place-items: center; border: 0; color: var(--green-dark); background: var(--lime); font-size: 7px; font-weight: 900; }
.job-progress-stages time { color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-card.complete .job-progress-ui,
.job-card.failed .job-progress-ui { display: none; }
.download { grid-column: 1 / -1; height: 44px; padding: 0 13px; display: flex; align-items: center; justify-content: center; color: var(--green-dark); background: var(--lime); border-radius: 4px; text-decoration: none; font-size: 11px; font-weight: 800; }
.job-retry { grid-column: 1 / -1; height: 42px; border: 1px solid rgba(255,255,255,.42); border-radius: 4px; color: #fff; background: rgba(255,255,255,.1); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.job-retry:hover { background: rgba(255,255,255,.18); }
.job-failure-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.job-failure-actions button { min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.38); border-radius: 5px; color: #fff; background: rgba(255,255,255,.1); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.job-failure-actions button:first-child { color: #38221d; background: #ffcf75; border-color: #ffcf75; }
.job-failure-actions button:hover { filter: brightness(1.08); }
.job-failure-actions button:disabled { opacity: .68; cursor: default; }
.download-feedback { position: absolute; z-index: 910; right: 22px; bottom: 58px; width: min(600px, calc(100% - 44px)); max-height: calc(100% - 94px); box-sizing: border-box; overflow-y: auto; padding: 28px; color: #183328; background: #fffefa; border: 1px solid rgba(26,63,48,.2); border-top: 6px solid #f1b91f; border-radius: 14px; box-shadow: 0 24px 68px rgba(11,28,20,.32); }
.download-feedback.is-attention { animation: feedback-attention 2.2s ease both; }
.feedback-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #466156; background: #edf1ed; font-size: 23px; cursor: pointer; }
.feedback-kicker { display: inline-block; padding: 7px 11px; border-radius: 999px; color: #294d3e; background: #fff1b8; font-size: 12px; font-weight: 900; letter-spacing: .02em; }
.download-feedback h2 { margin: 13px 44px 7px 0; font-size: 25px; line-height: 1.25; word-break: keep-all; }
.download-feedback > p { margin: 0; color: #5a6f65; font-size: 14px; line-height: 1.65; word-break: keep-all; }
.download-feedback > p strong { color: #214d3b; }
.feedback-step-heading { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #294b3d; }
.feedback-step-heading > span { display: inline-grid; width: 28px; height: 28px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #285c47; font-size: 13px; font-weight: 900; }
.feedback-step-heading > strong { font-size: 15px; word-break: keep-all; }
.feedback-step-heading > small { margin-left: auto; color: #7c8e85; font-size: 12px; }
.feedback-stars { display: inline-flex; align-items: center; gap: 2px; margin-top: 13px; }
.feedback-stars button { display: grid; width: 48px; height: 50px; padding: 0; place-items: center; border: 0; border-radius: 0; color: #c8ceca; background: transparent; font-size: 38px; line-height: 1; cursor: pointer; transition: color .15s, transform .15s, text-shadow .15s; }
.feedback-stars button:hover { transform: translateY(-2px) scale(1.06); color: #e5b016; background: transparent; }
.feedback-stars button.is-filled { color: #f1b91f; background: transparent; }
.feedback-stars[data-selected-rating="1"] button:nth-child(-n+1),
.feedback-stars[data-selected-rating="2"] button:nth-child(-n+2),
.feedback-stars[data-selected-rating="3"] button:nth-child(-n+3),
.feedback-stars[data-selected-rating="4"] button:nth-child(-n+4),
.feedback-stars[data-selected-rating="5"] button:nth-child(-n+5) { color: #f1b91f; background: transparent; }
.feedback-stars button.selected { transform: scale(1.08); outline: 0; text-shadow: 0 2px 10px rgba(207,150,0,.28); }
.feedback-rating-label { min-height: 24px; margin-top: 9px !important; color: #285c47 !important; font-size: 14px !important; font-weight: 900; }
.feedback-details { margin-top: 18px; padding-top: 17px; border-top: 1px solid #dfe6e2; }
.feedback-details > .feedback-step-heading { margin-top: 0; }
.feedback-feature-group > strong,
.feedback-reason-group > strong { display: flex; justify-content: space-between; color: #294b3d; font-size: 14px; }
.feedback-feature-group > strong small,
.feedback-reason-group > strong small { color: #87958f; font-size: 11px; font-weight: 500; }
.feedback-feature-group { margin-top: 18px; }
.feedback-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.feedback-features button { padding: 9px 12px; border: 1px solid #d9e0dc; border-radius: 999px; color: #42584e; background: #fff; font-size: 12px; word-break: keep-all; cursor: pointer; }
.feedback-features button.active { border-color: #285c47; color: #fff; background: #285c47; }
.feedback-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.feedback-reasons button { padding: 9px 12px; border: 1px solid #d9e0dc; border-radius: 999px; color: #42584e; background: #fff; font-size: 12px; word-break: keep-all; cursor: pointer; }
.feedback-reasons button.active { border-color: #285c47; color: #fff; background: #285c47; }
.feedback-comment { display: block; margin-top: 18px; }
.feedback-comment > span { display: flex; justify-content: space-between; margin-bottom: 8px; color: #294b3d; font-size: 14px; font-weight: 700; }
.feedback-comment > span small { color: #87958f; font-size: 11px; font-weight: 500; }
.feedback-comment textarea { box-sizing: border-box; width: 100%; min-height: 84px; padding: 12px; resize: vertical; border: 1px solid #d8dfdb; border-radius: 7px; color: #203a2f; background: #fff; font: inherit; font-size: 13px; line-height: 1.55; }
.feedback-comment textarea:focus { outline: 2px solid rgba(40,92,71,.16); border-color: #285c47; }
.feedback-actions { display: flex; gap: 9px; margin-top: 15px; }
.feedback-actions button { height: 48px; padding: 0 18px; border: 0; border-radius: 7px; font-size: 14px; font-weight: 900; cursor: pointer; }
.feedback-submit { flex: 1; color: #fff; background: #285c47; }
.feedback-submit:disabled { color: #87958f; background: #e8ece9; cursor: default; }
.feedback-later { color: #566a61; background: #edf1ee; }
.feedback-status { min-height: 20px; margin-top: 9px !important; color: #285c47 !important; font-size: 12px !important; font-weight: 700; }
.job-close { position: absolute; top: 9px; right: 10px; border: 0; color: rgba(255,255,255,.62); background: transparent; cursor: pointer; font-size: 20px; }
.privacy-summary { margin: 8px 0 0; color: #778078; font-size: 8px; line-height: 1.55; }
.privacy-summary a { color: var(--green); font-weight: 700; }
.privacy-summary button { padding: 0; border: 0; color: var(--green); background: transparent; cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; }
.legal-notice { margin-top: 8px; color: #66756c; font-size: 8px; line-height: 1.6; }
.legal-notice summary { color: #52665b; cursor: pointer; font-weight: 800; }
.legal-notice p { margin: 6px 0 0; }
.search-guide {
  margin: 0;
  border-bottom: 1px solid #e5e8e1;
  color: #52665b;
  background: #f8faf6;
}
.search-guide summary {
  padding: 15px 22px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  list-style-position: inside;
}
.search-guide[open] summary { border-bottom: 1px solid #e1e6de; }
.search-guide div { padding: 16px 22px 20px; }
.search-guide h2 {
  margin: 0 0 9px;
  color: #263b2f;
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}
.search-guide p {
  margin: 7px 0;
  color: #69776e;
  font-size: 9px;
  line-height: 1.75;
}
.search-guide a {
  display: inline-block;
  margin-top: 7px;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}
.search-guide a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-resource-summary { border-top: 1px solid #e5e8e1; }
.home-resource-summary div { padding-top: 18px; }
.home-resource-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font: 700 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-resource-links {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.home-resource-links a {
  min-width: 0;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid #d8e1d9;
  border-radius: 4px;
  background: #fff;
  line-height: 1.35;
  text-align: center;
}
.home-resource-links a:last-child {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

.analytics-consent {
  position: fixed;
  z-index: 2100;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100% - 36px));
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #cbd7ce;
  border-radius: 8px;
  color: #183026;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 55px rgba(20,48,36,.2);
}
.analytics-consent strong { display: block; margin-bottom: 6px; font-size: 13px; }
.analytics-consent p { margin: 0; color: #65756c; font-size: 10px; line-height: 1.65; }
.analytics-consent a { color: #176448; font-weight: 800; }
.consent-actions { display: grid; gap: 6px; min-width: 118px; }
.consent-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #176448;
  border-radius: 5px;
  color: #fff;
  background: #176448;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.consent-actions button:last-child { color: #31483b; border-color: #c5d0c8; background: #fff; }

@media (min-width: 1181px) {
  .analytics-consent { right: auto; left: 392px; }
}

@media (max-width: 700px) {
  .analytics-consent { grid-template-columns: 1fr; gap: 12px; }
  .consent-actions { grid-template-columns: 1fr 1fr; }
}
.hidden { display: none !important; }

.parcel-map-label { padding: 0 !important; color: #0d4598 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font: 700 9px/1 "Noto Sans KR", sans-serif !important; text-shadow: 0 1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff; pointer-events: none; }
.parcel-map-label::before { display: none; }

/* Leaflet의 외부 CSS가 늦게 로드되어도 지도 타일이 흐트러지지 않도록 핵심 배치를 포함합니다. */
.leaflet-container { position: relative; overflow: hidden; outline-offset: 1px; font-family: "Noto Sans KR", sans-serif; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas { position: absolute; left: 0; top: 0; }
.leaflet-map-pane, .leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-tile { visibility: hidden; user-select: none; -webkit-user-drag: none; }
.leaflet-tile-loaded { visibility: inherit; }
.leaflet-zoom-animated { transform-origin: 0 0; }
.leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.leaflet-top { top: 0; }.leaflet-right { right: 0; }.leaflet-bottom { bottom: 0; }.leaflet-left { left: 0; }
.leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
.leaflet-top .leaflet-control { margin-top: 14px; }.leaflet-left .leaflet-control { margin-left: 14px; }
.leaflet-right .leaflet-control { margin-right: 14px; }.leaflet-bottom .leaflet-control { margin-bottom: 36px; }
.leaflet-bar { border: 1px solid rgba(20,40,29,.18); border-radius: 4px; box-shadow: 0 2px 10px rgba(20,40,29,.15); overflow: hidden; }
.leaflet-bar a { width: 32px; height: 32px; display: block; color: var(--ink); background: #fff; border-bottom: 1px solid #d8ddd7; text-align: center; text-decoration: none; font: 700 20px/32px Arial,sans-serif; }
.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-control-attribution { padding: 2px 6px; color: #657068; background: rgba(255,255,255,.85); font-size: 8px; }
.leaflet-control-attribution a { color: var(--green); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes feedback-attention {
  0% { transform: translateY(14px); opacity: 0; }
  18% { transform: translateY(0); opacity: 1; }
  46%, 72% { box-shadow: 0 20px 58px rgba(11,28,20,.29), 0 0 0 0 rgba(241,185,31,.32); }
  59% { box-shadow: 0 20px 58px rgba(11,28,20,.29), 0 0 0 8px rgba(241,185,31,.16); }
  100% { transform: translateY(0); opacity: 1; box-shadow: 0 20px 58px rgba(11,28,20,.29); }
}
@keyframes coordinate-attention {
  0%, 100% {
    border-color: #5e8c2d;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(75, 122, 38, .14);
  }
  50% {
    border-color: #285d19;
    background: #edf7dc;
    box-shadow: 0 0 0 6px rgba(75, 122, 38, .27);
  }
}
@keyframes coordinate-label-attention {
  0%, 100% { color: #285d19; }
  50% { color: #6f910f; }
}
@keyframes parcel-selection-pulse {
  from { stroke-width: 4; fill-opacity: .2; }
  to { stroke-width: 6; fill-opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .download-feedback.is-attention { animation: none; }
  #epsg.coordinate-attention {
    animation: none;
    border-color: #285d19;
    background: #edf7dc;
    box-shadow: 0 0 0 4px rgba(75, 122, 38, .22);
  }
  #epsgLabel.coordinate-attention { animation: none; color: #285d19; }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .header-note { display: none; }
  .map-workspace { grid-template-columns: 320px minmax(0,1fr); }
  .output-action-dock { width: 320px; }
  .map-layer-control { width: 252px; }
  .thematic-layer-grid { grid-template-columns: 1fr; }
  .urban-facility-map-grid { grid-template-columns: 1fr 1fr; }
  .map-stage.layer-tool-open .map-progress { right: 288px; }
}

@media (min-width: 1500px) and (min-height: 900px) and (max-height: 1199px) {
  .map-stage.layer-tool-open .coupang-affiliate-ad { right: 376px; }
}

@media (max-width: 1499px), (max-height: 899px) {
  .map-layer-control { width: 300px; }
  .map-stage.layer-tool-open .map-progress { right: 336px; }
  .coupang-affiliate-ad {
    z-index: 770;
    right: 12px;
    bottom: 72px;
    width: auto;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 96px);
    padding: 0;
    overflow-y: auto;
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
  }
  .map-stage.layer-tool-open .coupang-affiliate-ad { right: 12px; }
  .affiliate-ad-toggle {
    min-height: 38px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(37,55,44,.25);
    border-radius: 6px;
    color: #26332b;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 24px rgba(18,37,25,.18);
    cursor: pointer;
    font: inherit;
  }
  .affiliate-ad-toggle strong { padding: 3px 6px; color: #fff; background: #4e5c53; border-radius: 3px; font-size: 9px; }
  .affiliate-ad-toggle span { font-size: 11px; font-weight: 800; }
  .affiliate-ad-toggle i { color: #59675e; font-size: 11px; font-style: normal; transition: transform .18s ease; }
  .affiliate-ad-panel { display: none; }
  .coupang-affiliate-ad.is-expanded {
    width: min(340px, calc(100% - 24px));
    padding: 9px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(37,55,44,.18);
    box-shadow: 0 14px 38px rgba(18,37,25,.22);
  }
  .coupang-affiliate-ad.is-expanded .affiliate-ad-toggle { width: 100%; min-height: 30px; justify-content: flex-end; padding: 2px 3px 7px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .coupang-affiliate-ad.is-expanded .affiliate-ad-toggle strong { display: none; }
  .coupang-affiliate-ad.is-expanded .affiliate-ad-toggle span { font-size: 10px; }
  .coupang-affiliate-ad.is-expanded .affiliate-ad-toggle i { transform: rotate(180deg); }
  .coupang-affiliate-ad.is-expanded .affiliate-ad-panel { display: block; }
}

@media (min-width: 1500px) and (max-height: 899px) {
  .map-stage.layer-tool-open .coupang-affiliate-ad { right: 376px; }
}

@media (min-width: 1181px) and (max-width: 1499px) {
  .map-stage.layer-tool-open .coupang-affiliate-ad { right: 336px; }
}

@media (max-width: 900px) {
  .map-layer-control { width: 252px; }
  .map-stage.layer-tool-open .map-progress { right: 288px; }
}

@media (max-width: 680px) {
  html, body { overflow: auto; }
  .topbar { position: sticky; top: 0; height: 56px; padding: 0 13px; }
  .server-state { font-size: 9px; }
  .topbar-actions { gap: 9px; }
  .header-link { display: none; }
  .feedback-link { padding: 6px 8px; font-size: 9px; }
  .server-state { font-size: 9px; }
  .maintenance-banner { min-height: 52px; padding: 8px 12px; flex-wrap: wrap; gap: 3px 8px; white-space: normal; }
  .maintenance-banner strong { width: 100%; font-size: 12px; }
  .maintenance-banner span { font-size: 9px; }
  .maintenance-banner small { display: none; }
  body.maintenance-mode-active .map-workspace { height: auto; }
  .map-workspace { height: auto; display: flex; flex-direction: column; }
  .map-stage { order: 1; height: 58vh; min-height: 390px; }
  .control-panel { order: 2; overflow: visible; padding-bottom: 0; border-right: 0; }
  .output-action-dock { width: auto; margin-top: 12px; padding: 10px 0 0; position: static; background: transparent; border-top: 1px solid #d8ddd4; box-shadow: none; backdrop-filter: none; }
  .map-message { top: 10px; min-width: 0; width: calc(100% - 90px); }
  .map-message span { display: none; }
  .map-layer-control { top: 10px; right: 10px; width: min(252px, calc(100vw - 20px)); }
  .map-layer-toolbox { width: min(252px, calc(100vw - 20px)); max-height: calc(58vh - 70px); }
  .parcel-layer-grid { grid-template-columns: 1fr; }
  .map-stage.layer-tool-open .map-progress { opacity: 0; }
  .map-footer-status span:last-child { display: none; }
  .parcel-info-card { width: min(560px, calc(100vw - 72px)); }
  .parcel-info-groups { grid-template-columns: 1fr; }
  .parcel-info-group-wide { grid-column: auto; }
  .parcel-info-group-paired .parcel-info-group-list { grid-template-columns: 1fr; }
  .parcel-info-row:last-child { grid-column: auto; }
  .parcel-info-loading { width: min(420px, calc(100vw - 72px)); }
  .control-point-card { width: min(650px, calc(100vw - 58px)); max-height: 62vh; overflow-y: auto; }
  .control-point-card-header { position: sticky; z-index: 2; top: 0; }
  .control-point-card-groups { grid-template-columns: 1fr; }
  .control-point-card-actions { justify-content: stretch; }
  .control-point-card-actions a, .control-point-card-actions button { flex: 1 1 auto; }
  .download-feedback { right: 10px; bottom: 44px; width: calc(100% - 20px); max-height: calc(100% - 58px); padding: 21px; }
  .download-feedback h2 { font-size: 21px; }
  .download-feedback > p { font-size: 13px; }
  .feedback-stars { justify-content: space-between; gap: 5px; }
  .feedback-stars button { width: calc((100% - 20px) / 5); height: 47px; font-size: 29px; }
  .job-failure-actions { grid-template-columns: 1fr; }
  html.embedded-map,
  html.embedded-map body { overflow: hidden; }
  html.embedded-map .map-workspace,
  html.embedded-map body.maintenance-mode-active .map-workspace { height: 100vh; display: block; }
  html.embedded-map .control-panel { display: none; }
  html.embedded-map .map-layer-control { display: none; }
  html.embedded-map .map-stage { height: 100vh; min-height: 0; }
  html.embedded-map .maintenance-banner { display: none; }
}