/* 용인 배송 — 담당자 화면 · 읽히는 것이 먼저(큰 글씨·분명한 대비) · 색은 변수 한 곳 */
:root {
  --bg: #f6f7f9; --panel: #ffffff; --ink: #1d2433; --muted: #5c6577; --line: #d9dee7;
  --brand: #0b6e8a; --brand-ink: #ffffff; --ok: #1f7a3a; --warn: #9a6200; --err: #b3261e; --sel: #fff3c4;
  --radius: 8px; --gap: 12px; font-size: 15px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #12161c; --panel: #1b2129; --ink: #e8ecf2; --muted: #9aa4b5; --line: #2e3742; --sel: #3a3420; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Pretendard", "Malgun Gothic", system-ui, sans-serif; line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 6px 12px; min-height: 36px; }
button.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; }
button.ghost { background: transparent; }
button.danger { color: var(--err); border-color: var(--err); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; background: var(--panel); min-height: 36px; }
label { display: inline-flex; gap: 6px; align-items: center; }
.top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.brand { font-size: 17px; white-space: nowrap; } .brand .logo { color: var(--brand); } .brand .sub { color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tabs button { border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 12px; white-space: nowrap; flex-shrink: 0; }   /* 좁은 폭에서 「수/급/자」로 꺾이지 않고 옆으로 밀린다 */
.tabs button[aria-selected="true"] { border-bottom-color: var(--brand); font-weight: 700; color: var(--brand); }
@media (max-width: 900px) { .tabs { order: 9; flex-basis: 100%; } }   /* 좁은 폭 — 메뉴를 둘째 줄 전체로(161px 칸에 둘만 보이던 것) */
.me { color: var(--muted); white-space: nowrap; }
main { padding: 16px; max-width: 1600px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.login { max-width: 420px; margin: 60px auto; display: grid; gap: 12px; }
.muted { color: var(--muted); } .warn { color: var(--warn); } .err { color: var(--err); } .ok { color: var(--ok); }
.row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.grid2 > * { min-width: 0; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.months { display: grid; gap: 6px; max-height: 70vh; overflow: auto; }
.month { text-align: left; display: grid; gap: 2px; padding: 8px 10px; }
.month[aria-current="true"] { outline: 2px solid var(--brand); background: var(--sel); }
.month .n { color: var(--muted); font-size: 13px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.subtabs button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
table { border-collapse: collapse; width: 100%; background: var(--panel); }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; font-size: 14px; }
th { position: sticky; top: 0; background: var(--panel); z-index: 1; white-space: nowrap; }
tbody tr { cursor: pointer; } tbody tr:hover { background: var(--sel); }
tr.chk td:first-child { box-shadow: inset 4px 0 0 var(--err); }
.tablewrap { max-height: 68vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.pill { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: 12px; border: 1px solid var(--line); }
.pill.err { border-color: var(--err); } .pill.warn { border-color: var(--warn); }
.detail { display: grid; gap: 8px; }
.detail .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px; align-items: center; }
.mapbox { position: relative; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.mapbox canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.maplegend { position: absolute; left: 8px; top: 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; font-size: 13px; max-height: 60%; overflow: auto; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
.panel { display: grid; gap: 10px; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 10px 16px; border-radius: var(--radius); display: none; max-width: 90vw; z-index: 50; }
#toast.show { display: block; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); max-width: 640px; width: 92vw; }
dialog::backdrop { background: rgba(0,0,0,.35); }
.report { white-space: pre-wrap; font-size: 13px; background: var(--bg); border-radius: var(--radius); padding: 8px; max-height: 40vh; overflow: auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* 관리 › 기사 공지(설계서 §26) */
.notice-form { display: grid; gap: 8px; } .notice-form textarea { min-height: 120px; }
.card.notice { display: grid; gap: 6px; margin-top: 8px; } .card.notice .ntcb { white-space: pre-wrap; }
.filebtn { cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; background: var(--panel); }
/* 기사 순서 바꾸기 요청(담당자 지도·배정 칸) */
.sqr { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }