.legacy-source-option { color: #72808d; }
.source-group-heading { padding: 9px 4px 5px; font-size: 12px; color: #174b79; font-weight: 800; border-bottom: 1px solid #d8e2eb; }
.reference-source-group { padding: 9px 4px; border-top: 1px solid #d8e2eb; }
.reference-source-group > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #526b81; }
.source-picker-details { border: 1px solid #d8e2eb; border-radius: 10px; padding: 11px 12px; background: #f8fbfe; }
.source-picker-details > summary, .source-create > summary { cursor: pointer; color: #174b79; font-weight: 700; }
.source-selection-count { font-weight: 400; font-size: 12px; }
.source-search { margin: 10px 0; width: 100%; }
.source-picker-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
#source-picker .source-picker-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 9px 5px; border-bottom: 1px solid #e4ebf1; cursor: pointer; }
.source-picker-row input[type="checkbox"], .source-confirm input[type="checkbox"] { flex: 0 0 17px; width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; }
.source-picker-row span { min-width: 0; overflow-wrap: anywhere; }
.source-picker-row strong { font-size: 12px; line-height: 1.5; }
.source-picker-row small { display: block; color: #637587; font-size: 11px; margin-top: 3px; }
.source-picker-row.superseded { color: #72808d; background: #f0f2f5; }
.source-old-badge { display: inline-block; font-size: 10px; margin-left: 5px; padding: 2px 5px; background: #e2e6eb; color: #657080; border-radius: 4px; }
.source-create { margin-top: 12px; }
.source-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.source-create-grid .full { grid-column: 1 / -1; }
.source-create-grid label { min-width: 0; }
#source-picker .source-confirm { display: flex; flex-direction: row; gap: 8px; line-height: 1.5; }
.source-create-grid small, .source-picker-status { color: #526b81; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.source-picker-status:empty { display: none; }
@media(max-width: 540px) { .source-create-grid { grid-template-columns: 1fr; } }
:root {
  --ink: #16211d;
  --muted: #6d7974;
  --line: #dfe6e2;
  --soft: #f3f6f4;
  --paper: #ffffff;
  --green: #003675;
  --green-2: #1d5fa5;
  --green-soft: #e8f0f9;
  --navy: #003675;
  --orange: #e87538;
  --purple: #7255a6;
  --blue: #2b7d8d;
  --yellow: #cb9c38;
  --danger: #b33b3b;
  --shadow: 0 18px 50px rgba(18, 36, 30, 0.14);
  font-family: Pretendard, "Noto Sans KR", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--soft);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button, input, select, textarea, label { min-width: 0; }
button { overflow-wrap: anywhere; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 7px; color: #779085; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.eyebrow.accent { color: var(--green-2); }

.brand-mark { position: relative; display: grid; grid-template-columns: repeat(3, 7px); align-items: end; gap: 3px; width: 27px; height: 27px; padding: 3px; border-radius: 7px; background: var(--green); }
.brand-mark span { display: block; border-radius: 3px 3px 1px 1px; background: white; }
.brand-mark span:nth-child(1) { height: 10px; opacity: .7; }
.brand-mark span:nth-child(2) { height: 18px; }
.brand-mark span:nth-child(3) { height: 14px; opacity: .85; }
.brand-mark.large { grid-template-columns: repeat(3, 12px); gap: 5px; width: 56px; height: 56px; padding: 7px; border-radius: 14px; background: rgba(255,255,255,.18); }
.brand-mark.large span:nth-child(1) { height: 17px; }
.brand-mark.large span:nth-child(2) { height: 34px; }
.brand-mark.large span:nth-child(3) { height: 25px; }

.login-view { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); width: 100%; height: 100%; overflow-y: auto; background: #f4f7f5; }
.login-brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(45px, 7vw, 100px); color: white; background: linear-gradient(145deg, rgba(0,42,94,.98), rgba(0,54,117,.92)), url("https://tile.openstreetmap.org/13/6984/3175.png") center/cover; }
.login-brand-panel::before, .login-brand-panel::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.login-brand-panel::before { width: 520px; height: 520px; right: -250px; top: -160px; }
.login-brand-panel::after { width: 310px; height: 310px; right: -110px; top: -55px; }
.login-brand-panel > * { position: relative; z-index: 1; }
.login-brand-panel .eyebrow { margin-top: 28px; color: rgba(255,255,255,.6); }
.login-brand-panel h1 { margin: 0; font-size: clamp(42px, 3.7vw, 64px); line-height: 1.12; letter-spacing: -.045em; }
.login-copy { max-width: 540px; margin: 28px 0 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.8; }
.login-feature-row { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); font-size: 13px; }
.login-feature-row span::before { content: "✓"; margin-right: 8px; color: #8fc5ff; font-weight: 800; }
.login-form-panel { display: grid; place-items: center; min-width: 0; padding: 40px; }
.auth-card { width: min(430px, 100%); }
.login-card { width: 100%; }
.mobile-brand { display: none; }
.auth-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 26px; padding: 4px; border: 1px solid #dce5e1; border-radius: 11px; background: #edf1ef; }
.auth-mode-tabs button { height: 36px; border: 0; border-radius: 8px; color: #68766f; background: transparent; font-size: 12px; font-weight: 750; }
.auth-mode-tabs button.active { color: var(--navy); background: white; box-shadow: 0 2px 8px rgba(0,54,117,.1); }
.login-card h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.login-card > .muted { margin: 12px 0 34px; font-size: 14px; }
.login-card label, .form-grid label, .import-options label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 19px; color: #3c4944; font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #d8e1dd; border-radius: 9px; outline: none; color: var(--ink); background: white; transition: .18s ease; }
input, select { height: 45px; padding: 0 13px; }
textarea { resize: vertical; padding: 12px 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(29,95,165,.12); }
.primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 9px; font-weight: 750; }
.primary-button { color: white; background: var(--green); box-shadow: 0 6px 14px rgba(0,54,117,.18); }
.primary-button:hover { background: #002a5c; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.secondary-button { border: 1px solid var(--line); background: white; }
.danger-button { color: var(--danger); border: 1px solid #eccaca; background: #fff8f8; }
.login-button { justify-content: space-between; width: 100%; height: 52px; margin-top: 4px; padding: 0 19px; }
.auth-link-button { display: block; margin: -7px 0 15px auto; padding: 0; border: 0; color: var(--green-2); background: transparent; font-size: 11px; font-weight: 750; }
.auth-link-button:hover { text-decoration: underline; }
.auth-back-button { width: 100%; margin-top: 14px; padding: 9px; border: 0; color: #667770; background: transparent; font-size: 11px; font-weight: 700; }
.demo-hint { display: flex; gap: 11px; margin-top: 22px; padding: 13px 14px; border: 1px solid #cfe6dc; border-radius: 10px; background: #edf8f3; }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border: 2px solid #b6e3d2; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 3px #d8f0e7; }
.status-dot.error { border-color: #edb9b9; background: #b94343; box-shadow: 0 0 0 3px #f8dede; }
.demo-hint div { display: flex; flex-direction: column; gap: 3px; }
.demo-hint strong { color: var(--green); font-size: 12px; }
.demo-hint small { color: #6f8079; font-size: 11px; line-height: 1.5; }
.auth-help { margin: 16px 2px 0; color: #6f7c76; font-size: 11px; line-height: 1.6; }
.approval-panel { padding: 10px 0; }
.approval-panel h2 { margin-top: 6px; }
.approval-panel > p:not(.eyebrow) { margin: 13px 0 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.approval-panel > strong { display: block; margin-bottom: 18px; overflow-wrap: anywhere; color: var(--navy); font-size: 13px; }
.approval-panel ol { margin: 0 0 22px; padding: 16px 16px 16px 36px; border: 1px solid #cbdced; border-radius: 10px; color: #40576b; background: #f1f6fb; font-size: 12px; line-height: 1.9; }
.approval-panel .secondary-button { width: 100%; }
.approval-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 13px; color: white; background: var(--navy); box-shadow: 0 8px 20px rgba(0,54,117,.2); font-size: 20px; font-weight: 900; }
.approval-icon.mail-icon { font-size: 18px; }

.app-view { height: 100%; }
.topbar { position: relative; z-index: 20; display: grid; grid-template-columns: 280px minmax(280px, 620px) 1fr; align-items: center; height: 66px; padding: 0 18px 0 21px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mobile-menu-button { display: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 17px; }
.brand > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.brand strong { overflow: hidden; font-size: 15px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.brand small { margin-top: 2px; overflow: hidden; color: #8a9791; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.topbar-center { display: flex; justify-content: center; }
.global-search { display: flex; align-items: center; gap: 9px; width: min(500px, 100%); height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #f6f8f7; }
.global-search > span { color: #77857f; font-size: 23px; transform: rotate(-15deg); }
.global-search input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 12px; }
kbd { padding: 3px 6px; border: 1px solid #d7dedb; border-radius: 5px; color: #8b9691; background: white; font: 9px inherit; white-space: nowrap; }
.topbar-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.mode-badge { padding: 5px 7px; border-radius: 5px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.icon-button, .text-icon-button, .close-button { display: grid; place-items: center; border: 0; background: transparent; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; color: #62706a; font-weight: 800; }
.data-quality-button { color: #145a7d; border-color: #bfd8e5; background: #f0f8fc; }
.review-needed-button { position: relative; color: #9a5a00; border-color: #efd39a; background: #fff9ea; }
.review-needed-button > span { font-size: 15px; font-weight: 900; }
.review-needed-button b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid white; border-radius: 10px; color: white; background: #dc2626; font-size: 9px; }
.review-needed-button.zero b { display: none; }
.user-button { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 7px 0 2px; border: 0; background: transparent; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: white; background: var(--navy); font-size: 11px; font-weight: 800; }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; }
.user-meta strong { max-width: 112px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { color: #8b9792; font-size: 9px; white-space: nowrap; }
.user-menu { position: absolute; top: 46px; right: 0; width: 150px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: var(--shadow); }
.user-menu button { width: 100%; padding: 9px; border: 0; border-radius: 6px; text-align: left; background: transparent; font-size: 12px; }
.user-menu button:hover { background: var(--soft); }

.modal.admin-modal { width: min(900px, 100%); }
.admin-body { padding: 20px 24px 4px; }
.admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.admin-summary > div { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fb; }
.admin-summary span { color: var(--muted); font-size: 11px; font-weight: 700; }
.admin-summary strong { color: var(--navy); font-size: 23px; }
.admin-security-note { display: flex; gap: 12px; margin: 14px 0; padding: 12px 14px; border: 1px solid #cbdced; border-radius: 9px; color: #24435f; background: #edf5fc; font-size: 11px; line-height: 1.5; }
.admin-security-note strong { flex: 0 0 auto; color: var(--navy); }
.admin-list-header { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 9px; }
.admin-list-header strong { font-size: 13px; }
.admin-list-header button { min-height: 32px; padding: 0 12px; font-size: 10px; }
.admin-user-list { max-height: 410px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.admin-loading, .admin-empty { padding: 32px; color: var(--muted); text-align: center; font-size: 12px; }
.admin-user-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(160px, 1fr) 105px 82px; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid #e8ecef; }
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-identity, .admin-user-access { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-user-identity strong, .admin-user-identity small, .admin-user-access span, .admin-user-access small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-identity strong { font-size: 12px; }
.admin-user-identity small, .admin-user-access small { color: var(--muted); font-size: 9px; }
.admin-user-access span { font-size: 10px; }
.admin-status { justify-self: start; padding: 4px 7px; border-radius: 999px; color: #176344; background: #e5f4ec; font-size: 9px; font-weight: 800; }
.admin-status.banned { color: #9c3030; background: #fbe7e7; }
.admin-status.pending { color: #8b5a16; background: #fff1d7; }
.admin-ban-button { min-height: 32px; padding: 0 10px; border: 1px solid #e6bcbc; border-radius: 7px; color: var(--danger); background: #fff7f7; font-size: 10px; font-weight: 750; }
.admin-ban-button.unban { color: #176344; border-color: #b9dccc; background: #f1faf5; }
.admin-ban-button:disabled { cursor: not-allowed; opacity: .45; }
.admin-approve-button { min-height: 32px; padding: 0 10px; border: 1px solid #b9d0e6; border-radius: 7px; color: var(--navy); background: #f1f6fb; font-size: 10px; font-weight: 750; }

.workspace { display: grid; grid-template-columns: 314px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100% - 66px); min-height: 0; overflow: hidden; }
.workspace.detail-open { grid-template-columns: 314px minmax(0, 1fr) 340px; }
.sidebar { position: relative; z-index: 10; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); background: #fbfcfb; }
.sidebar-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; scrollbar-gutter: stable; }
.sidebar-section { padding: 18px 19px; border-bottom: 1px solid #e8ecea; }
.overview-section { padding-top: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-bottom: 13px; }
.section-heading > * { min-width: 0; }
.section-heading h2, .section-heading h3 { margin: 0; letter-spacing: -.025em; }
.section-heading h2 { font-size: 19px; }
.section-heading h3 { font-size: 13px; }
.text-icon-button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: #718079; }
.link-button { padding: 0; border: 0; color: var(--green); background: transparent; font-size: 10px; font-weight: 700; }
.layer-section-heading { align-items: flex-start; }
.layer-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.layer-heading-actions .link-button { min-height: 14px; white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-card { display: flex; flex-direction: column; min-height: 91px; padding: 12px; border: 1px solid #e3e9e6; border-radius: 10px; text-align: left; background: white; transition: border-color .15s, box-shadow .15s, transform .15s; }
.stat-card:hover { border-color: #9ebbd7; transform: translateY(-1px); }
.stat-card.selected { border-color: #1d5fa5; box-shadow: 0 0 0 2px rgba(29,95,165,.15); }
.stat-card.total { color: white; border-color: var(--green); background: linear-gradient(135deg, #002c61, #0c4d93); }
.stat-card.total.selected { box-shadow: 0 0 0 3px rgba(29,95,165,.28); }
.stat-card span { font-size: 11px; font-weight: 700; opacity: .72; }
.stat-card strong { margin: 5px 0 1px; font: 700 24px/1.1 Georgia, serif; }
.stat-card small { margin-top: auto; color: #95a09b; font-size: 9px; line-height: 1.35; }
.stat-card.total small { color: rgba(255,255,255,.58); }
.layer-list { display: flex; flex-direction: column; gap: 6px; }
.layer-row { display: grid; grid-template-columns: 18px 28px 1fr auto 21px; align-items: center; gap: 7px; min-height: 35px; padding: 4px 7px; border-radius: 7px; transition: .15s; }
.layer-row:hover { background: #f0f4f2; }
.layer-row input { width: 15px; height: 15px; accent-color: var(--green); }
.layer-symbol { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; font-size: 18px; font-weight: 900; }
.layer-symbol.도로 { color: var(--orange); background: var(--orange); }
.layer-symbol.철도 { color: #111; background: #003675; }
.layer-symbol img { display: block; width: 18px; height: 18px; }
.layer-symbol.개발 { color: white; background: var(--blue); }
.layer-symbol.기타 { color: white; background: var(--yellow); }
.layer-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.layer-count { color: #7f8d87; font-size: 10px; white-space: nowrap; }
.layer-expand-button { display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 0; border-radius: 5px; color: #718079; background: transparent; transition: transform .18s ease; }
.layer-expand-button.open { transform: rotate(180deg); }
.road-sublayers { display: flex; flex-direction: column; gap: 2px; margin: 2px 7px 7px 43px; padding: 6px 0 3px 12px; border-left: 1px solid #dce4e9; }
.road-sublayer { display: grid; grid-template-columns: 15px 17px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 30px; padding: 2px 4px; border-radius: 5px; color: #596761; font-size: 10px; }
.road-sublayer > span:not(.road-swatch):not(.rail-swatch) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.road-sublayer:hover { background: #f0f4f8; }
.road-sublayer input { width: 13px; height: 13px; accent-color: var(--green); }
.road-sublayer small { color: #84918b; font-size: 9px; white-space: nowrap; }
.road-swatch { width: 15px; height: 3px; border-radius: 2px; background: var(--road-color); }
.rail-swatch { width: 15px; height: 5px; border-radius: 1px; background: repeating-linear-gradient(90deg, #111 0 4px, #fff 4px 8px); box-shadow: 0 0 0 1px #111; }
.rail-sublayers { border-left-color: #bfcbd5; }
.municipality-filter { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; margin: -2px 0 12px; color: #62726b; font-size: 10px; font-weight: 700; }
.municipality-filter > span { flex: 0 0 auto; }
.municipality-filter select { flex: 1; width: auto; max-width: 176px; height: 32px; padding: 0 27px 0 9px; font-size: 10px; }
.source-filter-group { margin-bottom: 12px; padding: 9px 9px 1px; border: 1px solid #dce5eb; border-radius: 9px; background: #f8fafc; }
.source-filter-group .municipality-filter { margin-bottom: 8px; }
.source-filter-group .municipality-filter select { max-width: 168px; }
.source-filter-note { margin: 2px 0 8px; color: #70808a; font-size: 8px; line-height: 1.5; word-break: keep-all; }
.timeline-filter { margin: 0 0 14px; padding: 11px 12px; border: 1px solid #dce5eb; border-radius: 10px; background: #f5f8fb; }
.timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #64757f; font-size: 10px; font-weight: 700; }
.timeline-heading strong { color: #003675; font-size: 12px; }
.timeline-filter input[type="range"] { width: 100%; height: 18px; padding: 0; border: 0; border-radius: 0; accent-color: #003675; background: transparent; box-shadow: none; }
.timeline-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px; color: #7b8992; font-size: 9px; }
.timeline-scale small { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.timeline-filter button { width: 100%; height: 28px; margin-top: 8px; border: 1px solid #cedbe5; border-radius: 6px; color: #315b82; background: white; font-size: 10px; font-weight: 700; }
.timeline-filter button:disabled { cursor: default; opacity: .48; }
.completion-filter { margin: -5px 0 14px; padding: 11px 12px; border: 1px solid #dce5eb; border-radius: 10px; background: #fff; }
.completion-toggle { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin: 0; color: #40556b; font-size: 10px; font-weight: 800; }
.completion-toggle input, .completion-unknown input { width: 14px; height: 14px; margin: 0; accent-color: #003675; }
.completion-toggle strong { display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; color: #526a82; background: #edf2f7; font-size: 9px; }
.completion-default-note { display: block; margin: 7px 0 0 21px; color: #5d748a; font-size: 8px; line-height: 1.45; }
.completion-range-controls { margin-top: 11px; padding-top: 10px; border-top: 1px solid #e6ebef; transition: opacity .16s ease; }
.completion-range-controls.disabled { opacity: .45; }
.dual-range { position: relative; height: 24px; margin: 0 1px; }
.dual-range input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; pointer-events: none; accent-color: #003675; }
.dual-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; }
.completion-unknown { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: #64757f; font-size: 9px; }
.completion-filter button { width: 100%; height: 28px; margin-top: 8px; border: 1px solid #cedbe5; border-radius: 6px; color: #315b82; background: white; font-size: 10px; font-weight: 700; }
.completion-filter button:disabled { cursor: default; opacity: .48; }
.projects-section { padding-bottom: 8px; border-bottom: 0; }
.count-pill { display: inline-grid; place-items: center; min-width: 20px; height: 19px; margin-left: 3px; border-radius: 10px; color: #66756e; background: #e9eeeb; font-size: 10px; }
.section-heading select { width: auto; height: 29px; padding: 0 26px 0 8px; font-size: 9px; }
.project-list { display: flex; flex-direction: column; gap: 5px; }
.project-list-controls { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6px; margin: -2px 0 8px; }
.project-list-controls select { width: 100%; height: 31px; padding: 0 25px 0 7px; font-size: 10px; }
.project-item { position: relative; display: grid; grid-template-columns: 33px 1fr; gap: 9px; width: 100%; padding: 9px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; text-align: left; background: transparent; }
.project-item:hover { border-color: #dfe6e2; background: white; }
.project-item.active { border-color: #b9d9cc; background: #edf7f3; }
.project-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 8px; color: white; font-size: 13px; font-weight: 900; }
.project-icon.도로 { background: var(--orange); }
.project-icon.철도 { background: #003675; }
.project-icon img { display: block; width: 22px; height: 22px; }
.project-icon.개발 { background: var(--blue); }
.project-icon.기타 { background: var(--yellow); }
.project-info { min-width: 0; }
.project-info strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-info span { display: block; margin-top: 3px; overflow: hidden; color: #73817b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-tag { display: inline-block !important; width: auto; margin-top: 5px !important; padding: 2px 6px; border-radius: 4px; color: #426154 !important; background: #e3eee9; font-size: 9px !important; font-weight: 800; }
.status-tag.진행 { color: #936227 !important; background: #f8ebd5; }
.status-tag.완료 { color: #5d6272 !important; background: #e9ebf0; }
.status-tag.중단·취소 { color: #983b45 !important; background: #fae7e9; }
.empty-list { display: flex; flex-direction: column; align-items: center; padding: 30px 8px; color: #87938e; text-align: center; }
.empty-list > span { font-size: 24px; }
.empty-list strong { margin: 8px 0 3px; font-size: 10px; }
.empty-list small { font-size: 10px; line-height: 1.5; }
.sidebar-footer { padding: 12px 18px; border-top: 1px solid var(--line); background: white; }
.sidebar-footer button { width: 100%; }
.plus { font-size: 18px; font-weight: 400; }

.map-shell { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: #dfe8e2; }
.map { position: absolute; inset: 0; }
.maplibregl-map { font-family: inherit; }
.maplibregl-ctrl-group { border: 1px solid #d7dfdb; box-shadow: 0 6px 20px rgba(19,38,31,.12) !important; }
.map-export-control button { position: relative; display: grid !important; place-items: center; color: #40566a; }
.map-export-control button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.map-export-control button.active { color: white; background: #003675; }
.map-export-control button.active:hover { background: #002a5c; }
.map-export-count { position: absolute; top: -6px; right: -6px; display: none; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid white; border-radius: 10px; color: white; background: #e05252; font-size: 8px; font-weight: 900; line-height: 1; }
.map-export-control button.has-selection .map-export-count { display: grid; }
.map-toolbar { position: absolute; z-index: 4; top: 16px; left: 50%; display: flex; align-items: center; padding: 5px; border: 1px solid #dbe2df; border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 8px 25px rgba(20,43,34,.13); transform: translateX(-50%); }
.map-toolbar button { display: grid; place-items: center; width: 34px; height: 32px; border: 0; border-radius: 6px; color: #4c5d55; background: transparent; font-size: 15px; font-weight: 800; }
.map-toolbar button:hover, .map-toolbar button.active { color: white; background: var(--green); }
.toolbar-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.draw-hint { position: absolute; z-index: 4; top: 67px; left: 50%; padding: 8px 12px; border-radius: 7px; color: white; background: rgba(18,33,28,.86); font-size: 10px; transform: translateX(-50%); }
.feature-context-menu { position: absolute; z-index: 20; display: flex; width: 112px; flex-direction: column; gap: 3px; padding: 5px; border: 1px solid #d6dfe6; border-radius: 9px; background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(8,38,71,.2); }
.feature-context-menu button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; text-align: left; background: transparent; font-size: 11px; font-weight: 750; }
.feature-context-menu button:hover { background: #edf3f8; }
.feature-context-menu button.danger { color: #b33b3b; }
.map-legend { position: absolute; z-index: 3; left: 14px; bottom: 39px; display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: calc(100% - 28px); padding: 8px 11px; border: 1px solid rgba(213,223,218,.9); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 4px 15px rgba(20,40,33,.08); font-size: 10px; }
.map-legend div { display: flex; align-items: center; gap: 5px; }
.legend-line { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legend-line.road { background: var(--orange); }
.legend-rail { display: inline-block; width: 18px; height: 5px; border-radius: 1px; background: repeating-linear-gradient(90deg, #111 0 4px, #fff 4px 8px); box-shadow: 0 0 0 1px #111; }
.legend-area { width: 12px; height: 9px; border: 1px solid var(--blue); background: rgba(43,125,141,.25); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.map-status { position: absolute; z-index: 3; right: 10px; bottom: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; max-width: calc(100% - 20px); padding: 5px 8px; border-radius: 5px; color: #52625b; background: rgba(255,255,255,.88); font: 10px Consolas, monospace; }
.map-display-control { position: absolute; z-index: 18; left: 14px; top: 62px; bottom: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: calc(100% - 28px); padding: 7px; border: 1px solid #c7d7e6; border-radius: 9px; background: rgba(255,255,255,.97); box-shadow: 0 8px 22px rgba(12,40,65,.16); }
.workspace.geometry-editing .map-display-control { top: 112px; }
.map-display-control label { margin: 0; color: #566873; font-size: 9px; font-weight: 700; }
.map-display-control label > span { display: block; margin-bottom: 2px; }
.map-display-control select { width: 148px; height: 30px; margin: 0; padding: 0 22px 0 7px; font-size: 10px; }
.map-display-control .map-label-toggle { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 0 3px; font-size: 10px; white-space: nowrap; }
.map-label-toggle input { width: 13px; height: 13px; accent-color: #003675; }
.map-display-control button { height: 30px; padding: 0 9px; border: 0; border-radius: 6px; color: white; background: #003675; font-size: 10px; font-weight: 700; white-space: nowrap; }
.vworld-wms-overlay { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .12s ease; }
.vworld-wms-overlay.boundary { opacity: .82; }
.vworld-wms-overlay.nationalPlan { opacity: .7; }
.vworld-wms-overlay.zone { opacity: .72; }
.vworld-wms-overlay.cityRoad { opacity: .72; }
.vworld-wms-overlay.landuse { opacity: .62; }
.project-foreground-overlay { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .12s ease; }
.map-shell.vworld-overlay-moving .vworld-wms-overlay, .map-shell.vworld-overlay-moving .project-foreground-overlay { opacity: 0; }
.radius-panel { position: absolute; z-index: 8; top: 116px; left: 14px; width: min(330px, calc(100% - 28px)); max-height: min(420px, calc(100% - 180px)); overflow: hidden; border: 1px solid #c7d7e6; border-radius: 11px; background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(12,40,65,.18); }
.radius-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid #e1e8ed; }
.radius-panel-header > div { display: flex; flex-direction: column; gap: 2px; }
.radius-panel-header strong { font-size: 12px; }
.radius-panel-header small { color: var(--muted); font-size: 9px; }
.radius-panel-header button { padding: 5px 8px; border: 1px solid #e7bcbc; border-radius: 6px; color: #a33b43; background: #fff4f4; font-size: 9px; font-weight: 700; }
.radius-list { max-height: 330px; overflow-y: auto; padding: 9px; }
.radius-item { display: grid; grid-template-columns: 1fr 76px 48px 27px; align-items: center; gap: 6px; margin-bottom: 7px; padding: 8px; border: 1px solid #dfe6eb; border-radius: 8px; background: #f8fafc; }
.radius-item:last-child { margin-bottom: 0; }
.radius-item input[type="range"] { min-width: 0; height: 20px; padding: 0; border: 0; background: transparent; accent-color: #003675; }
.radius-item input[type="number"], .radius-item select { height: 30px; padding: 0 6px; border-radius: 6px; font-size: 10px; }
.radius-item button { width: 27px; height: 27px; padding: 0; border: 1px solid #e7bcbc; border-radius: 6px; color: #a33b43; background: white; }
.project-map-label { max-width: 220px; overflow: hidden; padding: 4px 7px; border: 1px solid rgba(0,54,117,.3); border-radius: 5px; color: #003675; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,38,78,.12); font-size: 10px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.project-map-label.approximate { border-style: dashed; color: #6b5b2d; background: rgba(255,250,226,.94); }
.maplibregl-popup { z-index: 30 !important; }
.maplibregl-marker { z-index: 24 !important; }
.maplibregl-popup.project-hover-popup { max-width: min(280px, calc(100vw - 32px)) !important; }
.maplibregl-popup.project-hover-popup .maplibregl-popup-content { min-width: min(180px, calc(100vw - 48px)); max-width: 100%; padding: 10px 11px; overflow-wrap: anywhere; border: 1px solid #d6e0e6; border-radius: 8px; box-shadow: 0 8px 22px rgba(10,38,66,.16); }
.project-hover-popup strong { display: block; margin-bottom: 6px; color: #173b5f; font-size: 12px; line-height: 1.4; }
.project-hover-popup span { display: block; color: #60717c; font-size: 10px; line-height: 1.55; }
.popup-metrics { display: flex; flex-direction: column; gap: 2px; }
.project-hover-popup .popup-metrics span { display: flex; justify-content: space-between; gap: 18px; padding-top: 3px; border-top: 1px solid #edf1f4; }
.project-hover-popup .popup-metrics b { color: #768590; font-weight: 600; }
.project-hover-popup .popup-metrics em { color: #243d52; font-style: normal; font-weight: 800; text-align: right; }
.project-save-status { margin: 0 18px 12px; padding: 10px 12px; border: 1px solid #b9d6ee; border-radius: 8px; color: #17466f; background: #eef7ff; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.project-save-status.error { border-color: #e6b5b9; color: #8d2630; background: #fff1f2; }
.beta-banner { position: absolute; z-index: 3; right: 14px; bottom: 42px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 28px); padding: 7px 8px; border: 1px solid #d8e1dc; border-radius: 7px; background: rgba(255,255,255,.94); box-shadow: 0 4px 16px rgba(19,40,32,.08); font-size: 10px; }
.beta-banner strong { flex: 0 0 auto; padding: 2px 4px; border-radius: 3px; color: white; background: var(--green); font-size: 9px; }
.beta-banner > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-banner button { padding: 0 2px; border: 0; color: #89958f; background: transparent; font-size: 13px; }
.vertex-edit-toolbar { position: absolute; z-index: 7; top: 66px; left: 50%; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 24px); padding: 6px; overflow-x: auto; overflow-y: hidden; border: 1px solid #cdd9e5; border-radius: 11px; background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(8,38,71,.16); transform: translateX(-50%); scrollbar-width: thin; }
.vertex-edit-title { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 6px 0 3px; white-space: nowrap; }
.vertex-edit-title > div { display: flex; flex-direction: column; }
.vertex-edit-title strong { font-size: 10px; }
.vertex-edit-title small { max-width: 210px; overflow: hidden; color: #657681; font-size: 10px; text-overflow: ellipsis; }
.vertex-edit-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: white; background: var(--green); font-size: 10px; }
.vertex-edit-toolbar button { flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 9px; border: 0; border-radius: 6px; color: #3f5060; background: #f3f6f9; font-size: 10px; font-weight: 700; white-space: nowrap; writing-mode: horizontal-tb; }
.vertex-edit-toolbar button:hover:not(:disabled) { color: var(--green); background: #e5eef8; }
.vertex-edit-toolbar button.active { color: white; background: #386fa9; }
.vertex-edit-toolbar button:disabled { cursor: not-allowed; opacity: .35; }
.vertex-edit-toolbar .vertex-delete-button { color: #9f3e45; background: #fff1f2; }
.vertex-edit-toolbar .vertex-cancel-button { border: 1px solid #d9e0e7; background: white; }
.vertex-edit-toolbar .vertex-save-button { color: white; background: var(--green); }
.vertex-edit-toolbar .vertex-save-button:hover:not(:disabled) { color: white; background: #002a5c; }
.mobile-label { display: none; }
.workspace.detail-open .vertex-edit-toolbar .desktop-label { display: none; }
.workspace.detail-open .vertex-edit-toolbar .mobile-label { display: inline; }
.workspace.detail-open .vertex-edit-title small { max-width: 170px; }
.vertex-edit-toolbar.invalid { border-color: #e4a3a6; box-shadow: 0 10px 28px rgba(145,42,48,.18); }
.vertex-edit-toolbar.invalid .vertex-edit-icon { background: #b5454b; }
.vertex-coordinate-editor { position: absolute; z-index: 7; top: 114px; left: 50%; display: flex; align-items: end; gap: 7px; max-width: calc(100% - 20px); padding: 7px 8px; border: 1px solid #cdd9e5; border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 8px 24px rgba(8,38,71,.14); transform: translateX(-50%); }
.vertex-coordinate-editor strong { align-self: center; padding: 0 5px; color: #003675; font-size: 9px; white-space: nowrap; }
.vertex-coordinate-editor label { margin: 0; color: #60717d; font-size: 10px; white-space: nowrap; }
.vertex-coordinate-editor input { width: 120px; height: 31px; margin: 3px 0 0; padding: 0 7px; border-radius: 6px; font: 10px Consolas, monospace; }
.vertex-coordinate-editor button { height: 31px; padding: 0 10px; border: 0; border-radius: 6px; color: white; background: #003675; font-size: 10px; font-weight: 700; }
.vertex-marker { display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid white; border-radius: 3px; background: var(--green); box-shadow: 0 1px 6px rgba(0,0,0,.5); cursor: move; transition: width .12s, height .12s, background .12s; }
.vertex-marker::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: white; opacity: .75; }
.vertex-marker.selected { width: 19px; height: 19px; border: 3px solid #fff; background: #e05252; box-shadow: 0 0 0 2px #e05252, 0 3px 8px rgba(0,0,0,.45); }
.midpoint-marker { display: grid; place-items: center; width: 11px; height: 11px; border: 2px solid var(--green); border-radius: 50%; background: white; box-shadow: 0 1px 5px rgba(0,0,0,.3); cursor: copy; transition: transform .12s, background .12s; }
.midpoint-marker::after { content: "+"; margin-top: -1px; color: var(--green); font: 700 8px/1 Arial, sans-serif; }
.midpoint-marker:hover { background: #e8f0f9; transform: scale(1.25); }

.detail-panel { position: relative; z-index: 9; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); background: white; }
.panel-header, .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.panel-header > div, .modal-header > div { min-width: 0; }
.panel-header h2, .modal-header h2 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.panel-header h2, .modal-header h2 { overflow-wrap: anywhere; }
.close-button { width: 29px; height: 29px; border-radius: 7px; color: #718079; font-size: 20px; }
.close-button:hover { background: var(--soft); }
.panel-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: 20px; scrollbar-gutter: stable; }
.detail-map-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 20px; padding: 13px; border-radius: 10px; color: white; background: linear-gradient(135deg, #002d63, #145899); }
.detail-map-card > div { min-width: 0; }
.detail-map-card .project-icon { background: rgba(255,255,255,.2); }
.detail-map-card .project-icon { flex: 0 0 auto; }
.detail-map-card small { display: block; margin-bottom: 4px; color: rgba(255,255,255,.68); font-size: 10px; }
.detail-map-card strong { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }
.detail-section { margin-bottom: 22px; }
.detail-section h3 { margin: 0 0 11px; padding-bottom: 8px; border-bottom: 1px solid #edf0ee; font-size: 12px; letter-spacing: .03em; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.detail-field { min-width: 0; }
.detail-field span { display: block; margin-bottom: 4px; color: #7d8b85; font-size: 10px; }
.detail-field strong, .detail-field a, .detail-field p { margin: 0; color: #37443f; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; word-break: keep-all; }
.detail-field a { color: var(--green); }
.detail-field.full { grid-column: 1 / -1; }
.ktdb-manual-status { display: inline-flex; width: fit-content; padding: 3px 8px; border-radius: 999px; }
.ktdb-manual-status.reflected { color: #0f654b; background: #dff3ea; }
.ktdb-manual-status.pending { color: #6d7780; background: #edf1f3; }
.municipality-details summary { color: var(--navy); font-size: 12px; font-weight: 800; cursor: pointer; }
.municipality-details ul { margin: 8px 0 0; padding: 8px 10px 8px 24px; border-radius: 7px; background: #f4f7f9; color: #4c5c66; font-size: 10px; line-height: 1.7; }
.audit-line { display: flex; gap: 9px; margin-bottom: 9px; }
.audit-line .avatar { width: 27px; height: 27px; border-radius: 7px; font-size: 9px; }
.audit-line.history-link { width: 100%; border: 0; text-align: left; background: transparent; cursor: pointer; }
.audit-line.history-link:hover { background: #f3f7fa; }
.audit-line div { display: flex; flex-direction: column; }
.audit-line strong { font-size: 11px; }
.audit-line small { color: #778680; font-size: 10px; }
.comment-form { display: flex; gap: 7px; margin-bottom: 12px; }
.comment-form textarea { flex: 1; width: auto; min-width: 0; min-height: 64px; margin: 0; resize: vertical; }
.comment-form button { flex: 0 0 auto; align-self: end; min-width: 58px; height: 36px; padding: 0 9px; border: 0; border-radius: 7px; color: white; background: #003675; font-size: 11px; font-weight: 700; }
.comment-list { display: flex; flex-direction: column; gap: 8px; }
.comment-item { padding: 10px; border: 1px solid #e1e7eb; border-radius: 8px; background: #fafcfd; }
.comment-item.resolved { opacity: .62; background: #f2f5f3; }
.comment-item header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.comment-item strong { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.comment-item time { flex: 0 0 auto; color: #778680; font-size: 9px; }
.comment-item p { margin: 0; overflow-wrap: anywhere; color: #46545e; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.comment-item button { margin-top: 7px; padding: 4px 7px; border: 1px solid #d7e0e6; border-radius: 5px; color: #5d6b75; background: white; font-size: 9px; }
.panel-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 12px; border-top: 1px solid var(--line); }
.panel-footer button { padding: 0 11px; font-size: 10px; }
.panel-footer:has(#join-route:not(.hidden)) #edit-project { grid-column: 1 / -1; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 30px; background: rgba(13,27,22,.55); backdrop-filter: blur(3px); }
.modal { width: min(600px, 100%); max-height: min(800px, 94vh); overflow: auto; border-radius: 14px; background: white; box-shadow: var(--shadow); }
.spatial-export-modal { width: min(620px, 100%); }
.spatial-export-body { padding: 18px 20px 6px; }
.spatial-export-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 10px; color: white; background: linear-gradient(135deg, #003675, #145899); }
.spatial-export-summary span { font-size: 11px; font-weight: 700; }
.spatial-export-summary strong { font-size: 13px; white-space: nowrap; }
.spatial-export-summary b { font-size: 24px; }
.spatial-export-note { margin: 12px 0; padding: 10px 12px; border: 1px solid #cdddec; border-radius: 8px; color: #405d72; background: #eef5fa; font-size: 10px; line-height: 1.6; }
.spatial-export-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; margin-bottom: 14px; padding: 9px; overflow-y: auto; border: 1px solid #e1e7eb; border-radius: 8px; background: #fafcfd; }
.spatial-export-list span { padding: 4px 7px; border-radius: 5px; color: #37536b; background: #eaf1f7; font-size: 9px; font-weight: 700; }
.spatial-export-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spatial-export-formats button { position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 10px; width: 100%; min-height: 72px; padding: 11px; border: 1px solid #d7e1e8; border-radius: 9px; text-align: left; background: white; }
.spatial-export-formats button:hover { border-color: #6f9cc1; background: #f5f9fc; }
.spatial-export-formats button.recommended { border-color: #8fb5d3; background: #f0f6fb; }
.export-format-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: white; background: #003675; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.spatial-export-formats strong { align-self: end; color: #1f3f5a; font-size: 11px; }
.spatial-export-formats small { align-self: start; color: #71818c; font-size: 9px; }
.spatial-export-layer-guide { margin: 12px 0; padding: 9px 11px; border: 1px solid #e0e6ea; border-radius: 8px; color: #526572; background: #fbfcfd; font-size: 9px; }
.spatial-export-layer-guide summary { cursor: pointer; font-weight: 800; }
.spatial-export-layer-guide p { margin: 8px 0 0; line-height: 1.7; }
.spatial-export-layer-guide code { padding: 2px 4px; border-radius: 4px; color: #16466f; background: #eaf1f7; font-family: Consolas, monospace; }
#project-modal { display: flex; flex-direction: column; overflow: hidden; }
#project-modal { width: min(860px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); }
#project-modal #project-form { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 0; }
#project-modal .form-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; padding: 16px 20px; scrollbar-gutter: stable; }
#project-modal .modal-header, #project-modal .modal-footer { flex: 0 0 auto; }
#project-modal .modal-header { padding: 15px 20px 12px; }
#project-modal .form-grid > label { gap: 5px; margin-bottom: 10px; white-space: nowrap; }
#project-modal .form-grid > label input, #project-modal .form-grid > label select { height: 40px; }
#project-modal .form-grid > label textarea { min-height: 58px; padding: 9px 12px; }
.modal form, .import-body { padding: 20px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.form-grid label .field-title { display: inline-flex; align-items: baseline; gap: 3px; color: inherit; }
.form-grid label .field-title abbr { color: var(--danger); font-weight: 800; text-decoration: none; }
.form-grid label b { font-weight: inherit; }
.form-grid .binary-check-field { display: flex; min-height: 44px; flex-direction: row; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #d9e2e8; border-radius: 8px; background: #f7fafb; white-space: normal; }
.form-grid .binary-check-field input { width: 17px; height: 17px; margin: 0; accent-color: var(--navy); }
.form-grid .binary-check-field span { display: flex; flex-direction: column; gap: 2px; }
.form-grid .binary-check-field strong { color: #293e4b; font-size: 11px; }
.form-grid .binary-check-field small { color: #77858d; font-size: 9px; font-weight: 600; }
.field-help { display: block; margin-top: -7px; color: #778680 !important; font-size: 9px; font-weight: 500; line-height: 1.5; }
.form-section-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #cdddec; border-radius: 10px; background: #f2f7fc; }
.form-section-intro strong { flex: 0 0 auto; color: var(--navy); font-size: 11px; }
.form-section-intro span { color: #5d7080; font-size: 10px; line-height: 1.55; text-align: right; word-break: keep-all; }
.form-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 1px 0 10px; padding-top: 10px; border-top: 1px solid #e3e9ed; }
.form-section-heading strong { flex: 0 0 auto; color: #173f62; font-size: 11px; }
.form-section-heading span { color: #7a878f; font-size: 9px; line-height: 1.5; text-align: right; word-break: keep-all; }
.advanced-fields { margin: 0 0 2px; border: 1px solid #dbe4ea; border-radius: 10px; background: #fafcfd; }
.advanced-fields > summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 7px 12px; color: #36556d; cursor: pointer; list-style-position: inside; }
.advanced-fields > summary span { display: inline-flex; align-items: baseline; gap: 8px; }
.advanced-fields > summary strong { font-size: 11px; }
.advanced-fields > summary small { color: #87939a; font-size: 9px; font-weight: 600; }
.advanced-fields[open] > summary { border-bottom: 1px solid #e1e8ed; background: #f4f8fa; }
.advanced-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; padding: 16px 13px 0; }
.source-list { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; }
.source-card { padding: 10px; border: 1px solid #dde6ed; border-radius: 8px; background: #f8fafc; }
.source-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.source-card strong { overflow-wrap: anywhere; color: #173b5d; font-size: 11px; }
.source-card b { flex: 0 0 auto; padding: 2px 6px; border-radius: 8px; color: white; background: #003675; font-size: 8px; }
.source-card p { margin: 0; color: #667680; font-size: 9px; line-height: 1.55; }
.source-card a { display: inline-block; margin-top: 5px; color: #1d5fa5; font-size: 9px; font-weight: 700; text-decoration: none; }
.source-dropdown { margin-bottom: 7px; border: 1px solid #dde6ed; border-radius: 9px; background: #fbfcfd; }
.source-dropdown > summary { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; color: #244763; font-size: 10px; font-weight: 800; cursor: pointer; list-style-position: inside; }
.source-dropdown > summary b { padding: 2px 6px; border-radius: 8px; color: #667680; background: #edf2f6; font-size: 8px; }
.source-dropdown .source-list { margin: 0; padding: 0 8px 8px; }
.source-card.legacy { opacity: .55; }
.source-card .legacy-badge { color: #687782; background: #dce3e8; }
.duplicate-review-card { margin: 12px; padding: 12px !important; border: 1px solid #efd39a !important; border-radius: 9px; background: #fff9ea; }
.duplicate-review-card > p { margin: 0 0 8px; color: #744a0b; font-size: 10px; }
.duplicate-candidates { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.duplicate-candidates > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border-radius: 6px; background: white; font-size: 9px; }
.duplicate-candidates span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duplicate-candidates button { flex: 0 0 auto; padding: 4px 6px; border: 1px solid #d4b36e; border-radius: 5px; color: #7a4b05; background: #fffaf0; font-size: 8px; }
.vworld-review-card { padding: 12px; border: 1px solid #b9ddd8; border-radius: 10px; background: #f2fbfa; }
.vworld-review-card > p { margin: 0 0 10px; color: #476963; font-size: 10px; line-height: 1.65; word-break: keep-all; }
.vworld-review-card > button { width: 100%; min-height: 34px; }
.vworld-candidate-empty { margin: 10px 0 0 !important; padding: 9px 10px; border-radius: 7px; color: #657873 !important; background: rgba(255,255,255,.8); }
.vworld-candidate-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.vworld-candidate-card { padding: 10px; border: 1px solid #d4e7e3; border-radius: 8px; background: white; }
.vworld-candidate-card > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.vworld-candidate-card strong { overflow-wrap: anywhere; color: #194f49; font-size: 11px; }
.vworld-candidate-card span { color: #246e65; font-size: 9px; font-weight: 750; }
.vworld-candidate-card small { overflow-wrap: anywhere; color: #758681; font-size: 8px; }
.vworld-candidate-card > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.vworld-candidate-card button { min-height: 29px; padding: 5px 7px; border: 1px solid #b8d4d0; border-radius: 6px; color: #245f58; background: #f7fcfb; font-size: 9px; font-weight: 750; }
.vworld-candidate-card button.primary { color: white; border-color: #0f766e; background: #0f766e; }
.merge-project-modal { width: min(680px, 100%); }
.merge-project-body { padding: 20px; }
.merge-primary-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 10px; color: white; background: linear-gradient(135deg, #002d63, #145899); }
.merge-primary-card small { color: rgba(255,255,255,.7); font-size: 9px; }
.merge-primary-card strong { font-size: 14px; overflow-wrap: anywhere; }
.merge-primary-card span { color: rgba(255,255,255,.82); font-size: 10px; }
.merge-policy-note { margin: 12px 0; padding: 11px 12px; border: 1px solid #cfe0ef; border-radius: 9px; background: #f2f7fc; }
.merge-policy-note strong { color: #063b70; font-size: 10px; }
.merge-policy-note p { margin: 4px 0 0; color: #516575; font-size: 10px; line-height: 1.6; word-break: keep-all; }
.merge-search-label { display: block; margin-bottom: 8px; color: #52656f; font-size: 10px; font-weight: 700; }
.merge-search-label input { margin: 5px 0 0; }
.merge-project-list { display: flex; max-height: 310px; overflow-y: auto; flex-direction: column; gap: 7px; padding-right: 3px; }
.merge-candidate-card { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 11px; border: 1px solid #dce5eb; border-radius: 9px; background: #fff; cursor: pointer; }
.merge-candidate-card:hover { border-color: #8cb3d6; background: #f7fbff; }
.merge-candidate-card:has(input:checked) { border-color: #2d6da8; box-shadow: 0 0 0 1px #2d6da8; background: #f2f8fd; }
.merge-candidate-card input { flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; accent-color: #003675; }
.merge-candidate-card span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.merge-candidate-card strong { color: #1d3448; font-size: 11px; overflow-wrap: anywhere; }
.merge-candidate-card small { color: #6d7d88; font-size: 9px; }
.merge-candidate-card em { overflow: hidden; color: #426b91; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.merge-candidate-card .route-gap { color: #7a4b05; font-weight: 800; }
.merge-candidate-card .route-gap.far { color: #a33b31; }
.route-join-note { border-color: #d7ddf3; background: #f5f6fc; }
.route-join-note strong { color: #233e78; }
.route-join-note p { color: #536078; }
.status-tag-field { min-width: 0; margin: 8px 0 14px; padding: 12px; border: 1px solid #dfe6e2; border-radius: 9px; }
.status-tag-field legend { padding: 0 6px; color: #5f7069; font-size: 10px; font-weight: 750; }
.status-tag-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.status-tag-options label { display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 6px 8px; border: 1px solid #e2e7e5; border-radius: 7px; background: #fafbfb; font-size: 10px; }
.status-tag-options input { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; accent-color: #003675; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); background: #fafbfa; }
.modal-footer button { min-width: 92px; }
.import-modal { width: min(650px, 100%); }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 185px; padding: 25px; border: 1.5px dashed #b8cbc2; border-radius: 12px; background: #f5faf7; text-align: center; cursor: pointer; }
.drop-zone.dragging { border-color: var(--green); background: #eaf7f1; }
.upload-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; color: white; background: var(--green); font-size: 23px; }
.drop-zone strong { font-size: 13px; }
.drop-zone span { margin-top: 6px; color: #8b9992; font-size: 9px; }
.import-options { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-top: 17px; }
.import-options label { margin: 0; }
.import-options .checkbox-row { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.checkbox-row input { width: 15px; height: 15px; accent-color: var(--green); }
.import-guidance { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px solid #d7e3ef; border-radius: 8px; color: #365b7d; background: #f4f8fc; font-size: 10px; line-height: 1.6; }
.import-result { margin-top: 14px; padding: 12px; border: 1px solid #c9d9ea; border-radius: 9px; color: #294d72; background: #f0f5fb; font-size: 10px; line-height: 1.7; }
.import-result.error { color: #8d3b3b; border-color: #edcccc; background: #fff5f5; }
.help-modal { width: min(720px, 100%); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px; }
.help-grid > div { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.help-grid span { color: var(--green-2); font: 700 19px Georgia, serif; }
.help-grid strong { display: block; margin: 8px 0 6px; font-size: 12px; }
.help-grid p { margin: 0; color: #65756e; font-size: 11px; line-height: 1.7; }
.update-modal { width: min(560px, 100%); }
.update-body { padding: 22px; }
.update-version { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.update-version strong { padding: 5px 8px; border-radius: 6px; color: white; background: #003675; font-size: 11px; }
.update-version span { color: #75847d; font-size: 11px; }
.update-plan-notices { display: grid; gap: 10px; margin: 0 0 16px; }
.plan-update-card { --plan-accent: #1d5fa5; --plan-tint: #edf5ff; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--plan-accent) 28%, white); border-left: 5px solid var(--plan-accent); border-radius: 10px; background: var(--plan-tint); box-shadow: 0 5px 14px rgba(21, 45, 69, .07); }
.plan-update-card.road { --plan-accent: #dc6428; --plan-tint: #fff4ec; }
.plan-update-card.rail { --plan-accent: #087d77; --plan-tint: #eaf8f6; }
.plan-update-card.land { --plan-accent: #7052b9; --plan-tint: #f3efff; }
.plan-update-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.plan-update-card header span { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; color: white; background: var(--plan-accent); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.plan-update-card header strong { color: #183244; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.plan-update-card p { margin: 0; color: #425764; font-size: 11px; line-height: 1.65; }
.plan-update-card p b { color: var(--plan-accent); }
.plan-update-card small { display: block; margin-top: 6px; color: #71818a; font-size: 10px; }
.update-body > p { margin: 0 0 15px; color: #4a5b53; font-size: 13px; line-height: 1.65; }
.update-body ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.update-body li { position: relative; padding: 10px 11px 10px 31px; overflow-wrap: anywhere; border: 1px solid #e0e7eb; border-radius: 8px; color: #43545e; background: #f8fafb; font-size: 11px; line-height: 1.55; }
.review-needed-body { padding: 18px 22px 4px; }
.review-needed-note { margin: 0 0 12px; padding: 11px 12px; border: 1px solid #efd39a; border-radius: 8px; color: #744a0b; background: #fff9ea; font-size: 10px; line-height: 1.6; }
.review-needed-list { display: flex; max-height: 430px; overflow-y: auto; flex-direction: column; gap: 7px; }
.review-needed-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid #dfe6eb; border-radius: 8px; text-align: left; background: white; }
.review-needed-item:hover { border-color: #9ebbd7; background: #f7faff; }
.review-needed-item > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.review-needed-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.review-needed-item small { color: var(--muted); font-size: 9px; }
.review-needed-item b { flex: 0 0 auto; color: #b45309; font-size: 10px; }
.data-quality-modal { width: min(780px, 100%); }
.data-quality-body { padding: 18px 22px 4px; }
.data-quality-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.data-quality-summary > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #dce5eb; border-radius: 9px; background: #f7f9fb; }
.data-quality-summary span { color: #6b7b85; font-size: 9px; font-weight: 750; }
.data-quality-summary strong { color: #173b5d; font-size: 21px; }
.data-quality-summary .healthy { border-color: #bcdccc; background: #f1faf5; }
.data-quality-summary .healthy strong { color: #176344; }
.data-quality-summary .warning { border-color: #efd39a; background: #fff9ea; }
.data-quality-summary .warning strong { color: #9a5a00; }
.data-quality-summary .error { border-color: #edc7c7; background: #fff6f6; }
.data-quality-summary .error strong { color: #a33b3b; }
.data-quality-note { margin: 12px 0; padding: 10px 12px; border-radius: 8px; color: #405d72; background: #eef5fa; font-size: 10px; line-height: 1.55; }
.data-quality-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.data-quality-controls label { display: flex; min-width: 210px; flex-direction: column; gap: 5px; color: #60717b; font-size: 9px; font-weight: 750; }
.data-quality-controls select { height: 34px; }
.data-quality-controls button { min-height: 34px; padding: 0 13px; }
.data-quality-list { display: flex; max-height: 390px; overflow-y: auto; flex-direction: column; gap: 7px; }
.data-quality-item { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(240px, 1.2fr); align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid #dfe6eb; border-radius: 8px; text-align: left; background: white; }
.data-quality-item:hover { border-color: #9ebbd7; background: #f7faff; }
.data-quality-item > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.data-quality-item strong, .data-quality-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-quality-item strong { font-size: 11px; }
.data-quality-item small { color: var(--muted); font-size: 9px; }
.data-quality-issues { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.data-quality-issues b { padding: 3px 6px; border-radius: 999px; color: #486071; background: #edf2f6; font-size: 8px; }
.data-quality-issues b.warning { color: #8b5a16; background: #fff1d7; }
.data-quality-issues b.error { color: #9c3030; background: #fbe7e7; }
.data-quality-empty { padding: 28px 10px; text-align: center; }
.global-history-list { display: flex; max-height: 480px; overflow-y: auto; flex-direction: column; gap: 6px; }
.global-history-list .audit-line { border: 1px solid #e0e7eb; border-radius: 8px; padding: 10px; }
.update-body li::before { content: "✓"; position: absolute; left: 11px; top: 10px; color: #1d5fa5; font-weight: 900; }
.update-footer { justify-content: space-between; }

.toast-region { position: fixed; z-index: 300; top: 78px; right: 18px; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 36px)); pointer-events: none; }
.toast { width: 100%; padding: 12px 14px; overflow-wrap: anywhere; border: 1px solid #cbdcec; border-radius: 9px; color: #254a71; background: rgba(247,250,254,.97); box-shadow: 0 10px 30px rgba(14,42,73,.13); font-size: 11px; line-height: 1.5; animation: toast-in .25s ease; }
.toast.error { color: #873d3d; border-color: #edcccc; background: #fff8f8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.reset-page { display: grid; width: 100%; min-height: 100%; place-items: center; padding: 24px; overflow-y: auto; background: linear-gradient(145deg, #edf3f9, #f8fafc 55%, #e9f0f7); }
.reset-card { width: min(440px, 100%); padding: 32px; border: 1px solid #d7e1eb; border-radius: 16px; background: white; box-shadow: 0 20px 60px rgba(0,54,117,.14); }
.reset-brand { display: flex; margin-bottom: 28px; }
.reset-card h1 { margin: 0 0 10px; color: #16324e; font-size: 25px; letter-spacing: -.04em; }
.reset-card > .muted { margin: 0 0 22px; font-size: 12px; line-height: 1.7; }
.reset-card form { display: flex; flex-direction: column; gap: 3px; }
.reset-card form button { width: 100%; margin-top: 10px; }
.reset-loading, .reset-result { margin: 18px 0; padding: 13px 14px; border: 1px solid #d7e2ec; border-radius: 9px; color: #3f5870; background: #f4f8fb; font-size: 11px; line-height: 1.65; }
.reset-result.error { color: #8b3e3e; border-color: #edcccc; background: #fff7f7; }
.reset-result.success { color: #205f49; border-color: #c8dfd5; background: #f2faf6; }
.reset-login-link { display: inline-block; margin-top: 16px; color: #1d5fa5; font-size: 11px; font-weight: 750; text-decoration: none; }

@media (max-width: 1320px) {
  .topbar { grid-template-columns: 260px minmax(200px, 1fr) auto; padding-right: 12px; }
  .topbar-center { min-width: 0; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button { width: 32px; height: 32px; }
  .user-meta { display: none; }
  .user-button { gap: 4px; padding-right: 0; }
}
@media (max-width: 1000px) {
  .topbar { grid-template-columns: 245px 1fr auto; }
  .workspace, .workspace.detail-open { grid-template-columns: 286px minmax(0, 1fr); }
  .detail-panel { position: absolute; z-index: 30; top: 66px; right: 0; bottom: 0; width: 340px; box-shadow: -15px 0 40px rgba(20,40,33,.13); }
}
@media (max-width: 880px) {
  .login-view { grid-template-columns: 1fr; overflow-y: auto; }
  .login-brand-panel { display: none; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
}
@media (max-width: 760px) {
  .login-view { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; }
  .login-form-panel { min-height: 100%; padding: 28px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; height: 60px; padding: 0 10px; }
  .mobile-menu-button { display: grid; place-items: center; }
  .brand > .brand-mark { display: none; }
  .topbar-center { display: none; }
  .brand small, .mode-badge { display: none; }
  .workspace, .workspace.detail-open { grid-template-columns: 1fr; height: calc(100% - 60px); }
  .sidebar { position: fixed; z-index: 40; left: 0; top: 60px; bottom: 0; width: min(314px, 87vw); box-shadow: 14px 0 35px rgba(20,40,33,.16); transform: translateX(-102%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .map-toolbar { top: 10px; }
  .vertex-edit-toolbar { top: 55px; gap: 3px; }
  .vertex-edit-title { display: none; }
  .vertex-edit-toolbar button { padding: 0 7px; font-size: 9px; }
  .vertex-edit-toolbar #vertex-snap, .vertex-edit-toolbar #vertex-delete, .vertex-edit-toolbar #vertex-delete-part, .vertex-edit-toolbar #vertex-cancel, .vertex-edit-toolbar #vertex-save { min-width: 39px; }
  .vertex-edit-toolbar .desktop-label { display: none; }
  .vertex-edit-toolbar .mobile-label { display: inline; }
  .vertex-coordinate-editor { top: 99px; width: calc(100% - 20px); align-items: end; }
  .vertex-coordinate-editor strong { display: none; }
  .vertex-coordinate-editor label { flex: 1; }
  .vertex-coordinate-editor input { width: 100%; }
  .vertex-coordinate-editor button { white-space: nowrap; }
  .map-legend { display: none; }
  .map-display-control { left: 8px; top: 55px; bottom: auto; max-width: calc(100% - 16px); padding: 5px; }
  .map-display-control label > span { display: none; }
  .map-display-control select { width: 132px; }
  .map-display-control button { padding: 0 6px; }
  .beta-banner { right: 8px; bottom: 84px; max-width: calc(100% - 16px); }
  .detail-panel { top: 60px; width: min(340px, 92vw); }
  .workspace.geometry-editing .detail-panel { display: none; }
  .workspace.geometry-editing .map-display-control { top: 145px; }
  .form-grid, #project-modal .form-grid, .advanced-form-grid, .help-grid, .import-options { grid-template-columns: 1fr; }
  .spatial-export-formats { grid-template-columns: 1fr; }
  .form-grid .full, .form-grid .span-2, .form-grid .span-3, .import-options .checkbox-row { grid-column: auto; }
  .form-section-intro, .form-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .form-section-intro span, .form-section-heading span { text-align: left; }
  .modal-backdrop { padding: 12px; }
  .toast-region { top: 70px; right: 10px; width: calc(100vw - 20px); }
  .panel-content { padding: 16px; }
  .panel-footer { grid-template-columns: 1fr 1fr; }
  .modal { max-height: calc(100dvh - 24px); }
  .admin-body { padding: 16px 14px 2px; }
  .admin-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .admin-summary > div { padding: 10px; }
  .admin-summary strong { font-size: 19px; }
  .data-quality-summary { grid-template-columns: 1fr 1fr; }
  .data-quality-item { grid-template-columns: 1fr; }
  .data-quality-issues { justify-content: flex-start; }
  .admin-security-note { align-items: flex-start; flex-direction: column; gap: 3px; }
  .admin-user-row { grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; }
  .admin-user-access { grid-column: 1 / -1; grid-row: 2; }
  .admin-status { grid-column: 2; grid-row: 2; justify-self: end; }
  .admin-ban-button { grid-column: 2; grid-row: 1; }
  .admin-approve-button { grid-column: 2; grid-row: 1; }
}
@media (max-width: 420px) {
  .login-form-panel { padding: 22px 18px; }
  .login-card h2 { font-size: 28px; }
  .mobile-brand { margin-bottom: 34px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button { width: 32px; height: 32px; }
  #export-button, #history-button { display: none; }
  .user-button { padding-right: 0; }
  .map-display-control .map-label-toggle { display: none; }
  .map-status span:first-child { display: none; }
  .vertex-coordinate-editor { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .vertex-coordinate-editor button { grid-column: 1 / -1; width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-field.full { grid-column: auto; }
  .status-tag-options { grid-template-columns: 1fr 1fr; }
  #project-modal .form-grid { padding: 16px; }
  .comment-form { align-items: stretch; flex-direction: column; }
  .comment-form button { align-self: stretch; }
  .modal-header, .panel-header { padding: 17px 16px 14px; }
  .modal form, .import-body { padding: 16px; }
  .update-body { padding: 18px 16px; }
  .modal-footer { padding: 12px 16px; }
  .update-footer { align-items: stretch; flex-direction: column-reverse; }
  .update-footer button { width: 100%; }
}