:root{
  --bg:#0f1115; --card:#171a21; --line:#252a34; --fg:#e8eaf0; --muted:#98a0b0;
  --accent:#3ddc97; --danger:#ff5d5d; --warn:#ffb454;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.6 "Pretendard","Malgun Gothic",system-ui,sans-serif}
header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--card)}
h1{font-size:18px;margin:0}
h2{font-size:15px;margin:0 0 12px}
.v{font-size:11px;color:var(--accent);border:1px solid var(--accent);
  border-radius:4px;padding:1px 6px;vertical-align:middle;margin-left:6px}
/* ★윗줄 — 조금 크게·조금 진하게(형 지시 2026-09-24 「너무 과하면 촌스러우니 조심해서」) */
.who{font-size:13.5px;color:#b3bac7;font-weight:500}
/* 들어온 사람 이름 — 글자색·굵기만 한 단계 올린다(테두리·배경 없이) */
.who .whoname{color:var(--fg);font-weight:650;letter-spacing:.01em}
main{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px;margin-bottom:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.muted{color:var(--muted);font-weight:400;font-size:13px}
.hidden{display:none!important}

/* ★빠진 동 배너 — 눈에 안 띄면 뜻이 없다 */
.banner{border:1px solid var(--danger);background:rgba(255,93,93,.1);
  color:#ffd7d7;border-radius:10px;padding:14px 16px;margin-bottom:16px}
.banner b{color:#fff}
.banner .dongs{margin-top:8px;font-size:13px;color:#ffb9b9;word-break:keep-all}

select,input,button{font:inherit;color:var(--fg);background:#101318;
  border:1px solid var(--line);border-radius:7px;padding:7px 10px}
input[type=radio],input[type=checkbox]{width:auto;accent-color:var(--accent)}
button{cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--accent);color:#08130d;border-color:var(--accent);font-weight:700}
button.small{padding:3px 9px;font-size:12px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dong{border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px}
.dong.has{border-color:#2f6b52;background:rgba(61,220,151,.07)}
.dong.gap{border-color:var(--danger);background:rgba(255,93,93,.09)}
.dong .org{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.dong.gap .org{color:#ff9b9b}
.grid.pick label{display:flex;gap:7px;align-items:center;border:1px solid var(--line);
  border-radius:7px;padding:7px 9px;font-size:13px;cursor:pointer}
.grid.pick label:has(input:checked){border-color:var(--accent);background:rgba(61,220,151,.08)}

.legend{margin:12px 0 0;font-size:12px;color:var(--muted)}
.chip{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 4px 0 14px;
  vertical-align:middle}
.chip:first-child{margin-left:0}
.chip.has{background:#2f6b52} .chip.gap{background:var(--danger)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}

dialog{background:var(--card);color:var(--fg);border:1px solid var(--line);
  border-radius:12px;padding:20px;max-width:680px;width:92vw}
dialog::backdrop{background:rgba(0,0,0,.6)}
fieldset{border:1px solid var(--line);border-radius:9px;padding:12px;margin:0 0 14px}
legend{color:var(--muted);font-size:12px;padding:0 6px}
.opt{display:flex;gap:9px;align-items:flex-start;padding:7px 0;cursor:pointer}
.opt small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:16px 0 0}
.err{color:var(--danger);font-size:13px}
label{font-size:13px;color:var(--muted)}
label input{margin-left:6px}


/* ══ 행정동 이름표 (C-1-b) ═══════════════════════════════════════════
   ⛔색을 박지 않는다 — :root 토큰만 쓴다. 화면이 어두운데 흰 카드를 박으면
     글씨가 배경에 묻혀 **아무것도 안 보인다**(2026-09-14 브라우저 확인에서 실제로 겪었다). */
.tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.tab{padding:8px 18px;border:1px solid transparent;border-bottom:none;background:none;
  color:var(--muted);border-radius:8px 8px 0 0;font-size:14px}
.tab.on{background:var(--card);border-color:var(--line);color:var(--fg);font-weight:700;margin-bottom:-1px}
.tab:hover:not(.on){color:var(--fg)}

/* ══ 명단 단계 버튼 (형 지적 2026-09-24 「구성을 쉽게」) ═══════════════
   12개 칸이 한 줄로 늘어서 있던 것을 일하는 순서 여섯으로 묶었다. 폰에서는 두 줄로 접힌다. */
.steps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.step{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--muted);font-size:14px;cursor:pointer}
.step.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.step:hover:not(.on){color:var(--fg)}
.step:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.grid.dongs{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.dnode{display:flex;flex-direction:column;gap:3px}
/* 내려둔 동은 **회색으로 남는다** — 사라지지 않는다(AD-5) */
.dnode.off{opacity:.55;border-style:dashed}
.dname{display:flex;align-items:center;gap:6px;font-weight:600;flex-wrap:wrap}
.tag{font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.tag.down{border-color:var(--warn);color:var(--warn)}
.dnode .act{margin-top:4px}
.addrow{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);margin-bottom:0}
.note{margin:0 0 12px;color:var(--muted);font-size:13px}

/* ── 대조 결과 ─────────────────────────────────────────────────────── */
#dlgCmp{max-width:780px}
/* ★AD-4 — 이 상자가 이 화면에서 제일 중요하다. 눈에 안 띄면 뜻이 없다 */
.warnbox{border:1px solid var(--warn);background:rgba(255,180,84,.1);color:#ffe3bd;
  border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:14px}
.warnbox b{color:#fff}
.cmpgrp{margin:0 0 18px}
.cmpgrp h3{margin:0 0 6px;font-size:14px;color:var(--fg)}
.cmpgrp .hint{margin:0 0 8px;font-size:12px;color:#ffd9ab;
  border-left:3px solid var(--warn);background:rgba(255,180,84,.08);padding:7px 10px;
  word-break:keep-all}
.cmprows{display:flex;flex-direction:column;gap:5px}
.cmprow{display:flex;align-items:center;gap:10px;padding:7px 10px;
  border:1px solid var(--line);border-radius:8px;font-size:13px}
.cmprow .nm{font-weight:600;min-width:110px}
.cmprow button,.cmprow .blocked{margin-left:auto}
.cmprow .blocked{color:#ff9b9b;font-size:12px}
/* 내리기 확인 — ⛔되돌릴 수 없어 보이는 버튼은 그렇게 보여야 한다 */
button.danger{background:var(--danger);color:#2a0000;border-color:var(--danger);font-weight:700}
.downreason{display:block;margin:14px 0 0;color:var(--fg);font-size:13px}
.downreason small{color:var(--muted)}
.downreason input{display:block;width:100%;margin-top:6px}
/* 명단이 수상할 때 [내리기] 를 여는 확인 — AD-4 마지막 게이트 */
.downgate{display:flex;gap:8px;align-items:center;margin:4px 0 0;padding:9px 11px;
  border:1px solid var(--warn);border-radius:8px;background:rgba(255,180,84,.08);
  font-size:13px;color:#ffe3bd;cursor:pointer}
#cityPreview{color:var(--accent)}


/* ═══ 명단 화면 (6단계) ═══════════════════════════════════════════════
   ⛔색을 박지 않는다 — 이 화면은 **다크 전용**이다(`:root` 토큰).
     밝은 색을 박았다가 고른 달이 거의 안 읽혔다(브라우저 확인에서 잡혔다 · 두 번째다).
   ★숫자를 크게 — 담당자가 제일 먼저 봐야 하는 것은 명·포와 소계 대조다(M-7). */
.bignums{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0}
.stat{display:flex;flex-direction:column;gap:2px;min-width:72px}
.stat .k{font-size:11px;letter-spacing:.06em;color:var(--muted)}
.stat b{font-size:24px;font-variant-numeric:tabular-nums;color:var(--fg)}
.stat b.bad{color:var(--danger)}
td.tab,.tab{font-variant-numeric:tabular-nums}
td.warn,.warn{color:var(--warn);font-weight:600}
tr.on{background:rgba(61,220,151,.12)}
tr.on td{color:var(--fg)}
.dong.off{opacity:.55}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none;
        border:1px solid var(--line);margin-right:6px;vertical-align:-2px}
code.link{font-size:11px;word-break:break-all;background:#101318;color:var(--muted);
          border:1px solid var(--line);padding:2px 6px;border-radius:5px;flex:1;min-width:0}
button.danger{background:var(--danger);color:#1a0808;border-color:var(--danger);font-weight:700}
#paneList .card h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#paneList .dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── 명단 표 (UI-1 · CR-1) ─────────────────────────────────────────────
   ⛔색을 직접 박지 않는다 — 토큰으로만. 예전에 밝은 색을 박아 어두운 바탕에서
     글씨가 안 보인 적이 있다(형이 화면에서 잡았다). */
.tablewrap{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:8px}
table.rows{width:max-content;min-width:100%;border-collapse:collapse;font-size:12.5px}
table.rows th{position:sticky;top:0;z-index:1;background:var(--card);
  border-bottom:1px solid var(--line);white-space:nowrap}
table.rows td{padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:340px;cursor:cell}
table.rows td.right{text-align:right;font-variant-numeric:tabular-nums}
table.rows tr.check td{background:rgba(255,180,84,.07)}
/* 읽기 전용 — 고칠 수 없는 칸임을 **보여 준다**(주소는 재정제로 고친다) */
table.rows td.ro{color:var(--muted);cursor:default}
/* ★CR-1 — 담당자가 고친 칸. 왼쪽 띠 하나로 조용히, 그러나 분명히 */
table.rows td.locked{box-shadow:inset 3px 0 0 var(--accent)}
table.rows td.saving{opacity:.55}
table.rows td.bad{box-shadow:inset 0 0 0 2px var(--danger)}
input.cellinp{width:100%;padding:2px 4px;border-radius:4px;border-color:var(--accent)}
button.colpen{padding:0 4px;margin-left:5px;border:none;background:none;
  font-size:12px;line-height:1;opacity:.5}
button.colpen:hover{opacity:1}
button.colpen.on{opacity:1;filter:drop-shadow(0 0 4px var(--accent))}

/* ── 배송일정 표 (V1 ScheduleTab 이전) ─────────────────────────────── */
input.mini, select.mini{width:100%;padding:3px 6px;font-size:12px;border-radius:5px}
/* ★추천 기사 — 흐리게. 확정과 눈으로 구별돼야 한다(정한 줄 알았는데 안 정해진 동이 생긴다) */
select.mini.suggest{color:var(--muted);border-style:dashed}
table.rows tr.done td{background:rgba(61,220,151,.06)}
table.rows tr.done td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.rows tr.saving{opacity:.55}
table.rows tr.bad td{box-shadow:inset 0 -2px 0 var(--danger)}

/* ── 동별 보기 ─────────────────────────────────────────────────────── */
/* ★기사 색 — 지도의 색 구역을 대신하는 표시다(V2 엔 지도 SDK 가 없다) */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:-1px;border:1px solid rgba(255,255,255,.18)}
.chiplabel{display:inline-flex;align-items:center;font-size:12px;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px}
table.rows td a.small{color:var(--accent);text-decoration:none;font-size:11.5px}
table.rows td a.small:hover{text-decoration:underline}

/* ── 지도 ──────────────────────────────────────────────────────────── */
.mapcanvas{width:100%;height:56vh;min-height:360px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden}
/* ★핀 = 색 점 하나. ⛔이름·주소를 핀에 넣지 않는다(지도는 캡처가 쉽다) */
.pin{display:block;width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.45);box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ── 중복 확인 (§11 · M-2) ─────────────────────────────────────────── */
.dupgroup{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin:10px 0}
/* ★「남길 것」은 추천이다 — 눈에 띄되 「이미 정해졌다」로 보이지 않게 */
table.rows tr.keep td{background:rgba(61,220,151,.07)}
table.rows tr.keep td:first-child{color:var(--accent);font-weight:700}
table.rows tr.hiddenrow td{opacity:.45;text-decoration:line-through}

/* ★CR-4 잠금 풀기 — 잠긴 칸에만 뜬다. 값을 가리지 않게 작게, 오른쪽에 */
button.unlock{float:right;padding:0 3px;margin-left:4px;border:none;background:none;
  font-size:11px;line-height:1.4;opacity:.45;cursor:pointer}
button.unlock:hover{opacity:1}

/* ── 원장(기본명단) — 고칠 수 있는 칸만 커서로 알린다 ─────────────── */
table.rows td.editable{cursor:cell}
table.rows td.editable:hover{background:rgba(61,220,151,.05)}

/* ── 로그인 화면 (LG-1) ────────────────────────────────────────────────
   ★가운데에 카드 하나. 들어오기 전 화면에는 고를 것이 없어야 한다. */
.card.login { max-width: 30em; margin: 3.5em auto; text-align: center; }
.card.login .row { justify-content: center; margin: 1.2em 0 .6em; }
.card.login .primary { font-size: 1.05em; padding: .7em 1.4em; }
.card.login .note { margin-top: 1.2em; }
button.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; font: inherit; opacity: .8;
}
button.linklike:hover { opacity: 1; }

/* ── 로그인 덮개 (LG-1) ────────────────────────────────────────────────
   ⛔`<main>` 을 비우지 않고 **덮는다** — 그 안에 앱이 통째로 들어 있다.
      비우면 로그인에 성공해도 그릴 자리가 없어 화면이 안 바뀐다(2026-09-22 실측). */
#nx-gate { display: flex; align-items: flex-start; justify-content: center; padding: 3.5em 1em; }
#nx-gate .card { max-width: 30em; width: 100%; text-align: center; }
#nx-gate .row { justify-content: center; margin: 1.2em 0 .6em; }

/* 구글 로그인 버튼 — 마크 + 글자 */
button.gsignin {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: 1.05em; padding: .7em 1.4em;
}
button.gsignin svg { flex: 0 0 auto; }

/* ── 기사 계정 (LG-1 · LG-8) ──────────────────────────────────────────
   ★임시 비밀번호는 **한 번만** 뜬다 — 크고 또렷하게, 옮겨 적기 쉽게. */
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 1em; z-index: 50;
}
.card.modal { max-width: 32em; width: 100%; }
.passbox {
  display: grid; grid-template-columns: auto 1fr; gap: .5em 1em;
  align-items: center; margin: 1em 0; padding: 1em;
  border: 1px solid var(--line, #2a3a36); border-radius: 10px;
}
.passlabel { opacity: .7; font-size: .9em; white-space: nowrap; }
.passvalue { font-size: 1.35em; font-weight: 700; letter-spacing: .06em; user-select: all; }
.colordot {
  display: inline-block; width: .7em; height: .7em; border-radius: 50%;
  margin-right: .45em; vertical-align: baseline;
}

/* ── 표와 상태 배지 (담당자 LG-10 · 기사 LG-1 이 함께 쓴다) ───────────
   ⛔없던 클래스다 — 화면은 떴지만 **상태가 글자 하나로만** 보였다(2026-09-23 실측). */
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th {
  text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .04em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.grid-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid-table tr:last-child td { border-bottom: 0; }
.grid-table td.row { display: table-cell; white-space: nowrap; }
.grid-table td.row button { margin-right: .35em; }
.grid-table tr.dim td { opacity: .5; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* 상태 — ⛔색만으로 말하지 않는다(글자가 먼저다) */
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; border: 1px solid var(--line); white-space: nowrap;
}
.pill.ok   { color: var(--accent); border-color: var(--accent); background: rgba(61,220,151,.12); }
.pill.wait { color: var(--warn);   border-color: var(--warn);   background: rgba(255,180,84,.12); }
.pill.off  { color: var(--muted); }

/* ── 무료 정제 안내 (형 지시 2026-09-23) ──────────────────────────────
   ★이 주소는 오래 무료 정제 자리였다. 로그인 화면만 띄우면 그 사람들이 길을 잃는다. */
.freebox {
  margin: 1.6em 0 .4em; padding: 1.1em 1em;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02);
}
.freeq { margin: 0 0 .7em; font-weight: 700; }
a.freego {
  display: inline-block; padding: .6em 1.2em; border-radius: 8px;
  background: var(--accent); color: #06231a; font-weight: 800; text-decoration: none;
}
a.freego:hover { filter: brightness(1.08); }
.freebox .note { margin: .8em 0 0; }

/* ══ 내 지역 카드 (형 지시 2026-09-24 「내 정보에 따라서 확인이 쉽게」) ══════════
   ⛔색을 박지 않는다 — :root 토큰만. 고른 카드는 강조색 테두리 하나로 가른다. */
.citycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.citycard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--fg);font:inherit;cursor:pointer;font-variant-numeric:tabular-nums}
.citycard b{font-size:15px}
.citycard span{font-size:13px}
.citycard .warn{color:var(--warn)}
.citycard:hover{border-color:var(--muted)}
.citycard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.citycard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 기업 지역 권한 칩 (OR-6) — 범례 네모(.chip)와 다른 이름 */
.rchip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;margin:2px 0;border:1px solid var(--line);border-radius:999px;font-size:12px;white-space:nowrap}
.rchip button{padding:0 6px;line-height:1.4}
td.regions{max-width:420px}
/* ★명단 정제 — 첫 화면 맨 위의 주 업무(형 지적 2026-09-24) */
.hero{border-color:var(--accent)}
.hero h2{font-size:18px}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:18px;border:2px dashed var(--accent);border-radius:12px;cursor:pointer;text-align:center}
.dropzone b{font-size:17px;color:var(--accent)}
.dropzone:hover,.dropzone.over,.dropzone:focus-within{background:rgba(61,220,151,.08)}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.emptycities{margin-top:10px}
.emptycities summary{cursor:pointer;color:var(--muted);font-size:13px}
.emptycities .row{flex-wrap:wrap;gap:6px;margin-top:8px}
/* ═══ 화면 뼈대 — 왼쪽 단계 메뉴 + 오른쪽 작업 (설계안 2026-09-24 · 형 승인) ═══ */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 56px)}
.shell main{max-width:1280px;width:100%;margin:0;padding:20px 28px}
#sideNav{border-right:1px solid var(--line);background:var(--card);padding:14px 10px;display:flex;flex-direction:column;gap:14px;
  position:sticky;top:0;align-self:start;height:calc(100vh - 56px);overflow-y:auto}
.sidegroup{display:flex;flex-direction:column;gap:2px}
.sidehead{font-size:11.5px;color:var(--muted);letter-spacing:.06em;margin:0 8px 4px}
.side,#sideNav .tab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid transparent;
  border-radius:8px;padding:9px 10px;color:var(--fg);font-size:14.5px;cursor:pointer;margin:0}
.side i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);font-size:12px;color:var(--muted);flex:none}
.side:hover,#sideNav .tab:hover{background:rgba(255,255,255,.04)}
.side.on{background:rgba(61,220,151,.13);color:var(--accent);font-weight:700}
.side.on i{border-color:var(--accent);color:var(--accent)}
.side.dim{color:var(--muted)}
.side:focus-visible,#sideNav .tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#sideNav .side-tabs{display:flex;flex-direction:column;gap:2px;border:none;margin:0}
#sideNav .tab.on{background:rgba(61,220,151,.13);color:var(--accent);font-weight:700;border-color:transparent}
/* 지금 보는 지역 띠 */
.ctxbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);position:sticky;top:0;z-index:5}
.ctxbar select{font-size:15px;font-weight:700;min-width:14em}
.cpill{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13px;white-space:nowrap}
.cpill.warn{border-color:var(--warn);color:var(--warn)}
/* 휴대폰 — 메뉴는 위로(가로로 넘겨 본다) */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  #sideNav{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:8px}
  .sidegroup{flex-direction:row;gap:4px}
  .sidehead{display:none}
  .side,#sideNav .tab{white-space:nowrap;width:auto;padding:7px 10px}
  #sideNav .side-tabs{flex-direction:row}
  .shell main{padding:14px 16px}
}
/* ═══ 2단계 칸 맞추기(고급 정제) ═══ */
.okbox{border:1px solid var(--accent);background:rgba(61,220,151,.08);color:var(--fg);border-radius:8px;padding:8px 12px}
.setupbox{display:grid;gap:12px;margin:12px 0}
.sheetset{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:8px}
.sheetset.off{opacity:.55}
.sheethead{margin:0}
.sheethead label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.scrollx{overflow-x:auto}
table.colmap{min-width:520px}
table.colmap td{vertical-align:middle}
table.colmap select{min-width:14em}
table.colmap tr.unmapped td:first-child{color:var(--warn);font-weight:700}
table.colmap tr.unmapped select{border-color:var(--warn);color:var(--warn)}
/* ═══ 3단계 정제 결과 확인 — 모아 보기 단추 ═══ */
.rowtools{display:grid;gap:6px;margin-bottom:10px}
.chips{margin:0}
.chip2{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;font-size:13.5px}
.chip2.small{padding:3px 10px;font-size:12.5px}
.chip2.warn{color:var(--warn);border-color:rgba(255,180,84,.5)}
.chip2.on{background:rgba(61,220,151,.14);border-color:var(--accent);color:var(--accent);font-weight:700}
.chip2:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#rowsFind{min-width:14em}
/* ═══ 4단계 지도·기사 배정 — 왼쪽 기사 목록 + 지도 (설계안 · Onfleet 처럼) ═══ */
.routebar{gap:8px 14px;margin-bottom:6px}
.rstep{display:inline-flex;align-items:center;gap:6px}
.dispatch{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px;align-items:start;margin-top:10px}
.dpanel{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;
  max-height:calc(100vh - 220px);overflow-y:auto;position:sticky;top:70px}
.dhead{justify-content:space-between;margin:0}
.dline{display:flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;padding:4px}
.dline.focus{border-color:var(--accent);background:rgba(61,220,151,.07)}
.dline.brush{border-color:var(--warn)}
.dname{flex:1;display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--fg);text-align:left;cursor:pointer;padding:4px;font-size:14px;min-width:0}
.dname .muted{white-space:nowrap}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
.dispatch .mapcanvas{height:calc(100vh - 260px);min-height:420px}
@media (max-width:900px){.dispatch{grid-template-columns:1fr}.dpanel{position:static;max-height:none}}
/* ═══ 5단계 내려받기 카드 ═══ */
.dlcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.dlcard{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dlcard b{font-size:15px}
/* ═══ 4단계 대형단지 (R-I) ═══ */
.cplx{border:1px solid var(--line);border-radius:10px;padding:8px;margin-top:8px}
.cplx summary{cursor:pointer;font-weight:600}
.cplxbody{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cplxitem{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:6px}
.cplxhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.cplxdong{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding-left:10px;font-size:13px}
.rchip.warn{border-color:var(--warn);color:var(--warn)}
/* ═══ 5단계 엑셀 칸 고르기 ═══ */
.colpick{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:10px}
.colpick summary{cursor:pointer;font-weight:600}
.colpicklist{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-width:360px}
.colpickrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px}
/* ═══ 관리 › 학습 승인 ═══ */
.dicttable input{width:100%;min-width:180px}
.dicttable .keycell{max-width:320px;word-break:break-all}
.dicttable tr.blocked td{background:rgba(255,90,90,.06)}
.tablewrap{overflow-x:auto}
/* ═══ 도움말 · 새 기능 ═══ */
#btnHelp{margin-left:8px;font-size:13.5px}
.helpdlg{max-width:560px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);padding:16px}
.helpdlg::backdrop{background:rgba(0,0,0,.45)}
.helpdlg h3{margin:4px 0 6px}
.helpdlg ol,.helpdlg ul{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.newtoast{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:50;display:flex;align-items:center;gap:8px;
  border:1px solid var(--accent);border-radius:10px;padding:8px 10px;background:var(--bg);box-shadow:0 4px 16px rgba(0,0,0,.25);max-width:calc(100% - 32px)}

/* 지난 계약(해지·종료) — 열었을 때만 보이고 흐리게 (2026-09-24) */
#ctTable tr.past td { opacity: .5; }

/* 동별 보기 — 전체 동 목록(누르면 그 동으로) · 합계 줄 (2026-09-24) */
table.rows tr.clickable { cursor: pointer; }
table.rows tr.clickable:hover td { background: var(--hover, rgba(255,255,255,.04)); }
table.rows tr.total td { font-weight: 650; border-top: 1px solid var(--line, #333); }
/* 새 계약 — 공동 기업 고르기 */
details.partners { margin: 10px 0; }
details.partners summary { cursor: pointer; }

/* ── 브랜드 배지 배너 — 웰쉐어 사회적협동조합 세 잎 로고 (2026-09-24 형 「고급스럽게」) ──
   배지: 짙은 남색 원 + 로고 세 색(보라·하늘·분홍)을 가늘게 두른 테 · 과하지 않게 빛은 아주 옅게 */
h1.brand{display:flex;align-items:center;gap:12px;font-size:inherit;margin:0}
.brand-badge{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#232838 0%,#12151c 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 4px 14px rgba(0,0,0,.45),0 0 18px rgba(236,62,129,.10)}
.brand-badge::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;padding:1.5px;
  background:conic-gradient(from 210deg,#93278F,#29B6E6,#EC3E81,#93278F);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.brand-badge img{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-org{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:#a9b1c4;text-transform:uppercase}
.brand-title{font-size:18px;font-weight:750;letter-spacing:.01em;color:var(--fg)}
.brand-title .v{margin-left:7px}
@media (max-width:520px){ .brand-org{display:none} .brand-badge{width:34px;height:34px} .brand-badge img{width:22px;height:22px} }

/* ── 머리글 오른쪽 배지 셋 — 이름 · 나가기 · 도움말 (2026-09-24 형 「멋진 배지로 · 디자인 이쁘게」) ── */
#who{display:flex;align-items:center;gap:8px}
.userchip{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;border-radius:999px;
  background:linear-gradient(180deg,#1d212b,#161920);border:1px solid #2c3240;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 8px rgba(0,0,0,.35)}
.userchip-av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:12.5px;font-weight:750;color:#fff;
  background:conic-gradient(from 210deg,#93278F,#29B6E6,#EC3E81,#93278F);
  box-shadow:0 0 0 2px #161920 inset}
.userchip .whoname{font-size:13.5px}
button.logoutchip{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#aab2c2;
  background:transparent;border:1px solid #2c3240;transition:color .15s,border-color .15s,background .15s}
button.logoutchip:hover:not(:disabled){color:#ff8a8a;border-color:rgba(255,93,93,.55);background:rgba(255,93,93,.08)}
button.helpchip{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 6px;border-radius:999px;
  font-size:13px;font-weight:650;color:var(--accent);background:rgba(61,220,151,.07);
  border:1px solid rgba(61,220,151,.45);transition:background .15s,box-shadow .15s}
button.helpchip:hover:not(:disabled){background:rgba(61,220,151,.14);box-shadow:0 0 12px rgba(61,220,151,.18)}
.helpchip-ic{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#08130d;font-size:12px;font-weight:800}
#btnHelp.helpchip{margin-left:10px}
@media (prefers-reduced-motion:reduce){ button.logoutchip,button.helpchip{transition:none} }