/* 토큰은 DESIGN.md와 동기화 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --bg: #f4f5f7; --surface: #fff; --surface-2: #f8f9fb; --text: #16181d; --muted: #656d7b; --border: #e3e6eb;
  --accent: #3050e0; --accent-soft: #e8edff; --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --font: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', system-ui, sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1115; --surface: #171a20; --surface-2: #1c2027; --text: #e8eaee; --muted: #9aa1ad; --border: #2a2f38;
    --accent: #8ea2ff; --accent-soft: #232a4d; --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); word-break: keep-all; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.dim { color: var(--muted); }

/* ── 상단 ── */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.brand small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; flex: 1 1 520px; min-width: 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-g { font-size: 11px; color: var(--muted); margin: 0 4px 0 12px; white-space: nowrap; }
.nav-g:first-child { margin-left: 0; }
.tab { border: 0; background: none; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab[aria-current='page'] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sync { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.btn { border: 1px solid var(--border); background: var(--surface); padding: 6px 12px; border-radius: 8px; font-weight: 500; }
.btn:hover { background: var(--surface-2); }
a.btn { color: inherit; text-decoration: none; font-size: 12px; line-height: 18px; display: inline-flex; align-items: center; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mock { background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }

/* ── 본문 ── */
.view { max-width: 1320px; margin: 0 auto; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.page-h { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.page-h h2 { font-size: 18px; letter-spacing: -.01em; }
.page-h p { color: var(--muted); font-size: 13px; }

/* 머리말 오른쪽 끝 검색창 + 결과 목록 */
.gsearch { margin-left: auto; position: relative; width: min(380px, 100%); }
.gsearch input { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0 12px; font: inherit; }
.gsearch input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.gs-pop { position: absolute; right: 0; top: calc(100% + 6px); width: min(640px, 92vw); max-height: 72vh; overflow-y: auto; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.gs-pop[hidden] { display: none; }
.gs-pop .item.active, .gs-all.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.gs-all { width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--accent); font-weight: 600; padding: 10px 16px; text-align: left; position: sticky; bottom: 0; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); align-items: start; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi-l { font-size: 12px; color: var(--muted); }
.kpi-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi-v small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.kpi-s { font-size: 12px; color: var(--muted); min-height: 18px; }
.kpi.alert .kpi-v { color: #e03131; }
.kpi.blue .kpi-v { color: #1c7ed6; }

/* ── 구역·목록 ── */
.sec { padding: 6px 0 4px; }
.sec-h { display: flex; align-items: center; gap: 8px; padding: 8px 16px 4px; }
.sec-h h3 { font-size: 14px; font-weight: 650; }
.sec-sum { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }   /* 목록 제목줄 오른쪽 합계 */
.sec-sum b { color: var(--text); font-size: 14px; }
.count { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; padding: 0 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hint { padding: 0 16px 4px; font-size: 12px; color: var(--muted); }
.sec.tone-issue { border-color: color-mix(in srgb, #1c7ed6 45%, var(--border)); }
.sec.tone-issue .sec-h h3 { color: #1c7ed6; }
.sec.tone-warn { border-color: color-mix(in srgb, #e03131 45%, var(--border)); }
.sec.tone-warn .sec-h h3 { color: #e03131; }
.empty { padding: 14px 16px 16px; color: var(--muted); font-size: 13px; }
.more-n { padding: 6px 16px 10px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.more-btn { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 12.5px; padding: 0; }
.more-btn:hover { text-decoration: underline; }
.preset { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r); font-size: 13px; }
.preset .btn { background: var(--surface); }
.items { display: flex; flex-direction: column; }
.item { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; text-align: left; width: 100%; border: 0; border-top: 1px solid var(--border); background: none; padding: 10px 16px; }
.item:first-child { border-top: 0; }
.item:hover { background: var(--surface-2); }
/* 방금 상세를 본 건 — 목록으로 돌아왔을 때 그 줄만 음영 */
#view [data-job].last-viewed { box-shadow: inset 4px 0 0 var(--accent); }
#view .item.last-viewed, #view .item.last-viewed:hover, #view .tbl tbody tr.last-viewed, #view .tbl tbody tr.last-viewed:hover { background: var(--accent-soft); }
#view .kcard.last-viewed { border-color: var(--accent); background: var(--accent-soft); }
.item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--muted); }
.item-meta .m:not(:last-child)::after { content: '·'; margin-left: 6px; }
.item-note { font-size: 12px; color: var(--muted); line-height: 1.45; }
.item-note b { color: var(--text); font-weight: 600; margin-right: 4px; }
.item-side { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-side b { color: var(--text); }
.late { color: #e03131; font-weight: 600; }

/* ── 배지·칩 ── */
.badge, .chip { --c: #6b7482; display: inline-flex; align-items: center; padding: 0 7px; height: 20px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--text)); }
.st-inq { --c: #6b7482; } .st-quo { --c: #4263eb; } .st-con { --c: #e0a800; } .st-del { --c: #74b816; } .st-ret { --c: #2f9e44; }
.st-inv { --c: #0ca678; } .st-pre { --c: #12b886; } .st-lost { --c: #868e96; } .st-exp { --c: #adb5bd; }
.st-done { --c: #1f8a4c; background: color-mix(in srgb, var(--c) 28%, var(--surface)); }
.chip.disp { --c: #0891a8; }
.sub-h { margin: 16px 16px 4px; font-size: 13px; font-weight: 600; }
.chip.self { --c: #7048e8; background: #7048e8; color: #fff; border-color: #7048e8; }   /* 섭외(직접 실행) = 꽉 찬 보라 칩 + 줄 왼쪽 띠 */
.item.self { box-shadow: inset 3px 0 0 #7048e8; background: color-mix(in srgb, #7048e8 6%, transparent); }
.item.hot, .item.hot:hover { background: color-mix(in srgb, #ffd43b 45%, var(--surface)); }   /* 오늘 진행되는 배송·반납 */
.item.hot:not(.self) { box-shadow: inset 4px 0 0 #f2b600; }
.item.hot .item-title { font-weight: 700; font-size: 1.5em; }   /* 오늘 건은 글자도 1.5배 */
.item.hot .item-meta, .item.hot .item-note, .item.hot .item-side { font-size: 18px; }
.item.hot .badge, .item.hot .chip { font-size: 17px; height: 30px; padding: 0 10px; }
.chip.issue { --c: #1c7ed6; } .chip.caution { --c: #b7791f; } .chip.warn { --c: #e03131; } .chip.dim { --c: #868e96; }
.chip.ret { --c: #4263eb; }   /* 배송완료 다음 = 반납 예정 */
.chip.todo { --c: #e8590c; }   /* 내가 배차해야 하는 것 */
.chip.tent { --c: #e0a800; border: 1px dashed color-mix(in srgb, #e0a800 70%, transparent); }

/* ── 파이프라인 ── */
.flow { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; margin: 0 0 12px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.pipe-head { position: sticky; top: var(--top-h, 0px); z-index: 15; background: var(--bg); padding-top: 16px; }   /* 상단 메뉴 바로 아래에 제목+단계 바로가기를 같이 고정 */
.view:has(.pipe-head) { padding-top: 0; }   /* 위 여백을 고정 영역 안으로 넣어서 스크롤해도 움직이지 않게 */
.pipe-head .page-h { margin-top: 0; }
.flow-s { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 76px; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.flow-s span { font-size: 12px; color: var(--muted); }
.flow-s b { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.flow-s:hover { border-color: var(--accent); background: var(--accent-soft); }
.flow-s.zero b { color: var(--muted); font-weight: 500; }
.flow-a { align-self: center; color: var(--muted); font-style: normal; }
.flow-sep { width: 1px; background: var(--border); margin: 2px 6px; }
.fold-s { flex: 0 0 auto; background: none; border-color: var(--border); }
.col.flash { animation: colflash 1.2s ease-out; }
@keyframes colflash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.fold, .col { scroll-margin-top: calc(var(--top-h, 0px) + 150px); }   /* 위에 고정된 메뉴·단계 바 아래에 멈추도록 */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.col { flex: 0 0 280px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; max-height: calc(100vh - var(--top-h, 56px) - 170px); }
.col-h { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
.col-h b { font-size: 13px; }
.col-h .count { margin-left: 6px; }
.col-h small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.col-b { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.kcard { text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.kcard:hover { border-color: var(--accent); }
.kcard.tent { border-style: dashed; }
.kcard .t { font-weight: 600; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard .m { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.kcard .c { display: flex; flex-wrap: wrap; gap: 4px; }
.kcard .dplus { color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; }   /* 접수 후 경과일 */
.kcard .dday { color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; }   /* 배송·반납 기준일까지 남은 날 */
.kcard .dday.now { background: var(--accent); color: #fff; }
.kcard .dday.late { color: #c92a2a; background: color-mix(in srgb, #e03131 14%, var(--surface)); }
.sec-h .kd-print { margin-left: auto; }
.qdlg.biz-info { width: min(1500px, calc(100vw - 24px)); height: min(92vh, 1000px); padding: 14px 16px; }
.qdlg.biz-info[open] { display: flex; flex-direction: column; }
.bi-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }
.bi-right { min-height: 0; overflow-y: auto; padding-right: 4px; }
@media (max-width: 900px) { .bi-split { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .bi-left { height: 45vh; } .bi-right { overflow: visible; } }
.bi-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.bi-pick select { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.bi-file { margin: 4px 0; font-size: 13px; word-break: break-all; }
.bi-st { margin: 6px 0; font-size: 13px; }
.bi-r { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 6px; align-items: start; margin: 6px 0; }
.bi-l { font-size: 13px; color: var(--muted); padding-top: 7px; }
.bi-r input, .bi-r textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.bi-w { margin: 8px 0 0; font-size: 13px; }
.bi-save { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.bi-d { margin-top: 10px; font-size: 13px; }
.bi-d summary { cursor: pointer; color: var(--muted); }
.bi-orig img { display: block; max-width: 100%; margin: 8px 0; border: 1px solid var(--border); border-radius: 6px; }
.bi-raw { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; background: var(--surface-2); color: var(--text); }
.qdlg.biz-view { width: min(980px, calc(100vw - 24px)); height: min(92vh, 1000px); padding: 12px 14px; }
.qdlg.biz-view[open] { display: flex; flex-direction: column; }
.bv-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bv-t { flex: 1; min-width: 0; font-size: 14px; word-break: break-all; }
.bv-a { display: flex; gap: 6px; flex: none; }
.bv-b { flex: 1; min-height: 0; border: 1px solid var(--border); border-radius: 8px; overflow: auto; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.bv-hint { font-size: 12px; flex: none; }
.bv-b.bv-zoom { position: relative; overflow: hidden; display: block; cursor: grab; touch-action: none; user-select: none; }
.bv-b.bv-zoom.grabbing { cursor: grabbing; }
.bv-stage { position: absolute; left: 0; top: 0; width: max-content; transform-origin: 0 0; }
.bv-stage canvas, .bv-b .bv-stage img { display: block; max-width: none; max-height: none; background: #fff; }
.bv-stage canvas + canvas { margin-top: 8px; }
.bv-b iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.bv-b img { max-width: 100%; max-height: 100%; object-fit: contain; }
.biz-s { display: flex; gap: 6px; margin: 8px 0; }
.biz-s input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.biz-msg { margin: 4px 0 6px; font-size: 13px; }
.biz-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.biz-f { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 7px 10px; }
.biz-f:hover { border-color: var(--accent); background: var(--accent-soft); }
.biz-n { font-size: 13.5px; font-weight: 600; word-break: break-all; }
.biz-m { font-size: 12px; }
.grp-tools { display: flex; justify-content: flex-end; padding: 8px 14px 12px; }   /* 묶음 목록 오른쪽 아래 */
.acc small { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; }
.acc div.editing { grid-column: span 2; }
.fold { margin-top: 12px; }
.fold summary { cursor: pointer; padding: 10px 16px; font-weight: 600; color: var(--muted); }
.fold .items { border-top: 1px solid var(--border); max-height: 420px; overflow-y: auto; }

/* ── 캘린더 ── */
.cal-head { position: sticky; top: var(--top-h, 0px); z-index: 15; background: var(--bg); padding-top: 16px; }   /* 상단 메뉴 바로 아래에 월 이동줄+요일줄 고정 */
.view:has(.cal-head) { padding-top: 0; }   /* 위 여백을 고정줄 안으로 넣어서, 스크롤해도 줄이 움직이지 않게 */
.cal-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; flex-wrap: wrap; }
.cal-bar h2 { font-size: 18px; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.cal-bar label { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.cal-wk, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); background: var(--surface); }
.cal-wk { border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.cal { border-top: 0; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.cal-w { padding: 6px; text-align: center; font-size: 12px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-w:last-child, .day:nth-child(7n + 7) { color: #e03131; }   /* 일요일(마지막 열) */
.day { min-height: 112px; text-align: left; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); padding: 4px 5px 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.day:nth-child(7n + 7) { border-right: 0; }
.day:hover { background: var(--surface-2); }
.day.out { opacity: .38; }
.day.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.dh { display: flex; align-items: center; gap: 5px; min-width: 0; }   /* 날짜 · 날씨 · 일몰 · 나가 있는 수량을 한 줄로 */
.dh .load { margin-left: auto; flex: none; }
.wx { display: flex; gap: 5px; font-size: 10px; line-height: 1.25; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; min-width: 0; }
.wx-s { color: color-mix(in srgb, #f08c00 70%, var(--muted)); }
.day .dn { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.day.adj .dn { color: var(--muted); font-weight: 500; }   /* 이전·다음 달 날짜는 숫자만 옅게 (일정은 그대로) */
.day .dn.mo { width: auto; padding: 0 6px; border-radius: 11px; justify-self: start; }
.day.today .dn { background: var(--accent); color: #fff; }
.evs { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ev { font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-event { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ev-event.cont { font-weight: 400; opacity: .6; }   /* 여러 날 행사의 둘째 날부터는 흐리게 */
.ev-delivery { background: color-mix(in srgb, #e0a800 20%, var(--surface)); color: color-mix(in srgb, #e0a800 60%, var(--text)); }
.ev-return { background: color-mix(in srgb, #2f9e44 18%, var(--surface)); color: color-mix(in srgb, #2f9e44 70%, var(--text)); }
.ev.self { background: #7048e8; color: #fff; font-weight: 600; }   /* 대표님이 직접 움직이는 일정 (섭외·내가세팅) */
.ev-delivery.disp, .ev-return.disp { background: color-mix(in srgb, #00b8d9 22%, var(--surface)); color: color-mix(in srgb, #0891a8 80%, var(--text)); font-weight: 600; }   /* 배차 완료 = 시트의 파랑(청록 계열로 실행 칩과 구분) */
.ev-delivery.done, .ev-return.done { opacity: .7; text-decoration: line-through; }   /* 완료 = 가운데 줄 */
.more { font-size: 11px; color: var(--muted); padding-left: 4px; }
.load { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); border-radius: 4px; padding: 0 4px; align-self: flex-end; }
.load.warn { background: color-mix(in srgb, #f08c00 24%, var(--surface)); color: color-mix(in srgb, #f08c00 60%, var(--text)); font-weight: 600; }
.load.over { background: #e03131; color: #fff; font-weight: 600; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin: 8px 2px 12px; flex-wrap: wrap; }
.day-panel { margin-top: 12px; }
.grp { display: grid; grid-template-columns: 84px minmax(0, 1fr); border-top: 1px solid var(--border); }
.sum-line + .grp { border-top: 0; }
.grp-h { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 14px 0 0 16px; font-size: 14px; font-weight: 700; }   /* 묶음 이름 = 건들 맨 위 왼쪽 */
.grp .items .item:first-child { border-top: 0; }
.grp-delivery { color: color-mix(in srgb, #e0a800 65%, var(--text)); }
.grp-return { color: color-mix(in srgb, #2f9e44 70%, var(--text)); }
.grp-event { color: var(--accent); }
.grp-solicit { color: #7048e8; }   /* 섭외: 칸 안의 보라색 칩과 같은 색 */
.sum-line { padding: 8px 16px 0; font-size: 13px; color: var(--muted); }
.sum-line b { color: var(--text); }

/* ── 정산·차트 ── */
.bars { display: flex; gap: 6px; align-items: flex-end; height: 190px; padding: 22px 16px 0; }
.bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.bar i { display: block; width: 100%; max-width: 38px; background: color-mix(in srgb, var(--accent) 75%, var(--surface)); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar.now i { background: var(--accent); }
.bar-v { font-variant-numeric: tabular-nums; color: var(--text); font-size: 10.5px; white-space: nowrap; }
.bar-l { padding-bottom: 8px; white-space: nowrap; }
.aging { display: grid; gap: 10px; padding: 10px 16px 14px; }
.ag { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ag .track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.ag .track i { display: block; height: 100%; background: var(--accent); }
.ag.old .track i { background: #e03131; } .ag.mid .track i { background: #f08c00; }
.ag b { font-variant-numeric: tabular-nums; }
.grid .wide { grid-column: 1 / -1; }
.tbl .track { display: block; min-width: 90px; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.tbl .track i { display: block; height: 100%; background: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 5px 12px; font-size: 13px; color: var(--muted); }
.seg button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg.big button { padding: 8px 20px; font-size: 14px; }   /* 정산 ↔ 매출 리포트 전환 버튼 (화면 맨 위) */
.fin-tabs { margin: 4px 0 8px; }

/* ── 표 ── */
.filters { padding: 12px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters input[type='search'], .filters select { height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; }
.filters input[type='search'] { flex: 1 1 220px; min-width: 0; }
.filters label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { position: sticky; top: 0; text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); background: var(--surface-2); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.active, .tbl tbody tr.active:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }   /* 검색 뒤 키보드로 고른 줄 */
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .ttl { min-width: 220px; font-weight: 600; }
.tbl .ttl .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; font-weight: 400; }
.tbl tfoot td { font-weight: 700; background: var(--surface-2); }
.tbl tbody tr.cust-open, .tbl tbody tr.cust-open:hover { cursor: default; background: var(--surface-2); }   /* 고객 이력: 펼친 건 목록 */
.tbl tr.cust-open > td { padding: 0 0 6px; }
.tbl tr[hidden] { display: none; }
.table-foot { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }
.note-box { padding: 10px 16px 14px; font-size: 12.5px; color: var(--muted); }

/* ── 상세 서랍 ── */
.scrim { position: fixed; inset: 0; background: rgba(10, 12, 16, .42); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 50; transform: translateX(102%); transition: transform .2s ease; display: flex; flex-direction: column; box-shadow: -8px 0 28px rgba(0, 0, 0, .12); }
.drawer.on { transform: none; }
.dr-h { padding: 16px 18px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; }
.dr-h h2 { font-size: 17px; line-height: 1.4; flex: 1; letter-spacing: -.01em; }
.dr-re { border: 0; background: var(--surface-2); color: var(--muted); width: 26px; height: 26px; border-radius: 7px; margin-left: 8px; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-re:hover { color: var(--accent); }
.dr-re:disabled { cursor: progress; }
.dr-re.spin svg { animation: drspin .8s linear infinite; }
.dr-re.err { color: #c0392b; }
.dr-label { margin-left: 8px; vertical-align: middle; font-weight: 500; letter-spacing: 0; }
.q-pick { display: block; width: 100%; text-align: left; margin: 6px 0; line-height: 1.5; }
.ed-in { cursor: text; border-radius: 6px; }
.ed-in:hover { background: var(--accent-soft); }
.ed-in.busy { opacity: .6; }
.ed-in.editing { cursor: auto; background: none; }
.ed-in .add { color: var(--muted); opacity: .55; font-size: 12.5px; }
.ed-in:hover .add { opacity: 1; color: var(--accent); }
.acc div.ed-in:hover { border-color: var(--accent); }
.dr-ie input, .dr-ie textarea { width: 100%; border: 1.5px solid var(--accent); border-radius: 8px; padding: 5px 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.dr-ie textarea { resize: vertical; line-height: 1.5; }
.dr-ie input:focus, .dr-ie textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dr-ie-b { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.dr-ie-b small { flex: 1 1 140px; }
.dr-ie.num .dr-ie-b { gap: 4px; }
.dr-ie.num .btn.sm { padding: 2px 8px; font-size: 12px; }
.dr-t { cursor: text; border-radius: 6px; }
.dr-t:hover { background: var(--accent-soft); }
.dr-te { margin: 2px 0 6px; }
.dr-te textarea { width: 100%; border: 1.5px solid var(--accent); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; font-weight: 650; line-height: 1.45; resize: vertical; }
.dr-te textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dr-te-b { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dr-te-b small { flex: 1 1 200px; }
@keyframes drspin { to { transform: rotate(360deg); } }
.dr-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dr-x { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 8px; font-size: 18px; line-height: 1; flex: none; }
.dr-b { overflow-y: auto; padding: 0 18px 24px; flex: 1; }
.dr-col { padding-bottom: 4px; }
/* 넓은 화면: 서랍을 넓혀 2열로 — 왼쪽(일정·수량·금액·배송) / 오른쪽(고객·진행 기록·문의). 열마다 따로 스크롤 */
@media (min-width: 900px) {
  .drawer { width: min(1060px, 94vw); }
  .dr-b { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .dr-top { flex: none; max-height: 150px; overflow-y: auto; padding: 0 22px; }
  .dr-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 6px; }
  .dr-col { overflow-y: auto; padding: 0 22px 24px; min-height: 0; }
  .dr-col + .dr-col { border-left: 1px solid var(--border); }
}
.dr-s { padding: 11px 0 3px; border-bottom: 1px solid var(--border); }
.dr-s:last-child { border-bottom: 0; }
.dr-s h4 { margin: 0 0 8px; font-size: 18px; color: var(--muted); font-weight: 800; letter-spacing: .02em; }
.box { border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.box.issue { background: color-mix(in srgb, #1c7ed6 12%, var(--surface)); border: 1px solid color-mix(in srgb, #1c7ed6 35%, var(--border)); }
.box.warn { background: color-mix(in srgb, #e03131 10%, var(--surface)); border: 1px solid color-mix(in srgb, #e03131 30%, var(--border)); }
.box b { margin-right: 6px; }
.box p + p { margin-top: 4px; }
dl.kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; margin: 0 0 10px; font-size: 13px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pl { white-space: pre-line; }
dl.kv.compact { font-size: 12.5px; gap: 3px 10px; grid-template-columns: 76px 1fr; margin-bottom: 4px; line-height: 1.45; }
.acc-row { margin-bottom: 10px; }
.acc-l { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.acc { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.acc div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.acc b { display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.tl { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.tl li { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 4px 0; white-space: pre-line; }
.tl time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
.dr-badges .dr-sheet { margin-left: auto; }   /* 머리말 오른쪽 끝 */
.dun { margin-top: 3px; }
.dun .dim { display: inline-block; min-width: 56px; font-variant-numeric: tabular-nums; }
.addr { margin-bottom: 8px; }
.addr:last-child { margin-bottom: 0; }
.addr-a { line-height: 1.5; }
.addr-c { color: var(--muted); line-height: 1.5; }
.dr-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-weight: 600; font-size: 13px; }

.err { margin: 40px auto; max-width: 520px; padding: 20px; text-align: center; }
.err p { margin: 8px 0; }
.tok { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; background: var(--surface); color: var(--text); font: inherit; }
.loading { padding: 60px; text-align: center; color: var(--muted); }

@media (max-width: 1100px) { .wx-w { display: none; } }   /* 칸이 좁으면 날씨는 빼고 일몰·수량이 잘리지 않게 */

@media (max-width: 720px) {
  .grp { grid-template-columns: 58px minmax(0, 1fr); }   /* 좁은 화면도 묶음 이름은 왼쪽에 (칸만 좁게) */
  .grp-h { padding: 12px 0 0 10px; font-size: 13px; }
  .wx-w { display: inline; }
  .avail-bar { grid-template-columns: 1fr; }   /* 좁은 화면은 위아래 두 줄로 */
  .avail-half { gap: 4px 12px; padding: 6px 10px; justify-content: space-between; }
  .avail-half.out { border-right: 0; border-bottom: 1px solid var(--border); }
  .avail-i { font-size: 12px; }
  .avail-i b { font-size: 20px; }
  .view { padding: 12px; }
  .cal-head { padding-top: 12px; }
  .top-in { gap: 8px; padding: 8px 12px; }
  .sync .txt { display: none; }
  .day { min-height: 74px; }
  .ev { display: none; }
  .wx { font-size: 9px; }
  .wx-s { display: none; }   /* 좁은 화면은 날씨 아이콘·최고기온만 */  .evs { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
  .evs::before { content: attr(data-dots); font-size: 11px; color: var(--accent); font-weight: 700; }
  .load { font-size: 10px; }
  .col { flex-basis: 250px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-v { font-size: 22px; }
}

/* 핸드폰 상세 화면: 전화번호 = 누르면 전화, 꾹 누르면 복사 */
a.tel { display: inline-block; padding: 4px 0; color: var(--accent); font-weight: 600; text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
a.tel small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

/* 캘린더 주간 보기 (핸드폰 기본): 하루가 한 줄, 일정 글자를 줄바꿈해서 전부 보여 줌 */
.seg.phone-only { display: none; }
@media (max-width: 720px) { .seg.phone-only { display: inline-flex; } .cal-bar h2 { min-width: 0; } }
.cal.week { display: flex; flex-direction: column; border-top: 1px solid var(--border); border-radius: var(--r); }
.wrow { display: grid; gap: 6px; text-align: left; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); padding: 10px 12px; color: inherit; }
.wrow:last-child { border-bottom: 0; }
.wrow.today { background: var(--accent-soft); }
.wrow.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.wh { display: flex; align-items: center; gap: 8px; }
.wd { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wd small { font-weight: 500; color: var(--muted); margin-left: 3px; font-size: 12px; }
.wrow.sun .wd, .wrow.sun .wd small { color: #e03131; }
.wtag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; }
.wh .wx { margin-left: auto; font-size: 12px; }
.wh .wx-s { display: inline; }
.wh .load { font-size: 12px; }
.wevs { display: flex; flex-wrap: wrap; gap: 4px; }
.wrow .ev { display: inline-block; font-size: 12.5px; padding: 2px 8px; white-space: normal; overflow: visible; }   /* 좁은 화면 규칙(.ev 숨김)보다 우선 */

/* 창고 메모 입력 (정비 준비완료 옮기기) */
.tbl td.sub { padding-left: 28px; color: var(--muted); }
.tbl td.neg { color: #e03131; font-weight: 600; }
.inv-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 16px; }
.inv-f input { width: 110px; height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--text); font: inherit; }
.inv-log { margin: 0; padding: 0 16px 6px 32px; font-size: 12.5px; color: var(--muted); }
.inv .note-box summary { cursor: pointer; }
.inv-f label { display: flex; gap: 6px; align-items: center; font-size: 13px; }

/* 지금 바로 나갈 수 있는 수량 — 맨 위에 한 줄 띠로 (갑자기 "보내주세요"가 왔을 때 판단용) */
.avail-bar { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; border: 1px solid #2f9e44; border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, #2f9e44 10%, var(--surface)); }
.avail-half { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 4px 18px; padding: 8px 16px; }
.avail-half.out { border-right: 1px solid #2f9e44; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.avail-half.out .avail-t { color: var(--accent); }
.avail-half.out .avail-i b { color: var(--accent); }
.card .avail-bar { margin: 12px 16px; }
.avail-t { font-size: 13px; color: color-mix(in srgb, #2f9e44 70%, var(--text)); }
.avail-i { font-size: 14px; color: var(--muted); }
.avail-i b { font-size: 26px; letter-spacing: -.02em; color: #2f9e44; font-variant-numeric: tabular-nums; }
.avail-i.zero b { color: #e03131; }
.tbl tr.avail-row td { background: color-mix(in srgb, #2f9e44 12%, var(--surface)); font-weight: 700; font-size: 15px; color: color-mix(in srgb, #2f9e44 75%, var(--text)); }
.tbl tr.avail-row td.sub { font-size: 13px; }

/* 시트 편집 (상세 서랍 안) */
.dr-edit { margin-left: auto; }
.ed-f { margin: 0 0 10px; }
.ed-qrow { margin-bottom: 4px; }
.ed-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0 8px; }
.ed-qgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-qgrid .ed-f { min-width: 0; }
.ed-qgrid .ed-l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-f label { display: flex; flex-direction: column; gap: 3px; }
.ed-l { font-size: 12px; color: var(--muted); }
.ed-l em { font-style: normal; font-size: 11px; color: #b7791f; background: color-mix(in srgb, #b7791f 14%, transparent); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.ed-f input, .ed-f textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.ed-f textarea { resize: vertical; line-height: 1.5; }
.ed-f input:focus, .ed-f textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ed-f.chg input, .ed-f.chg textarea { border-color: #f08c00; background: color-mix(in srgb, #ffd43b 14%, var(--surface)); }
.ed-opts { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.ed-o { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 2px 11px; font-size: 13px; }
.ed-o:hover { border-color: var(--accent); }
.ed-o.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; }
.ed-o.clr { color: var(--muted); border-style: dashed; }
.qdlg { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); padding: 18px 20px; width: min(460px, calc(100vw - 32px)); }
.qdlg::backdrop { background: rgb(0 0 0 / 0.45); }
.qdlg.nudge { animation: nudge .3s; }   /* 쓰던 내용이 있어 바깥을 눌러도 안 닫힐 때 살짝 흔들림 */
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.qdlg h3 { font-size: 16px; margin-bottom: 2px; }
.qdlg p { margin: 8px 0; line-height: 1.55; }
.qdlg.q-mailwin { width: min(690px, calc(100vw - 32px)); max-height: 92vh; overflow-y: auto; }   /* 메일 작성창: 가로 1.5배 (460 → 690px) */
.q-who { margin-top: 0; }
.q-list { display: grid; gap: 8px; margin: 10px 0 4px; }
.q-s { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 10px 14px; font-size: 15px; font-weight: 650; display: flex; flex-direction: column; gap: 1px; }
.q-s small { font-weight: 400; color: var(--muted); font-size: 12px; }
.q-s:hover { border-color: var(--accent); }
.q-vals { display: grid; grid-template-columns: 64px 1fr; gap: 3px 10px; font-size: 13.5px; margin: 8px 0; }
.q-vals dt { color: var(--muted); }
.q-mail { grid-template-columns: 84px 1fr; }
.dow { margin-top: 3px; font-size: 13px; color: var(--accent); }
.dow b { font-weight: 700; }
.q-pre { white-space: pre-wrap; word-break: break-all; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.55; margin: 8px 0; }
.q-note { display: block; margin: 8px 0; }
.q-note textarea { width: 100%; margin-top: 4px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.q-chk { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 13.5px; }
.q-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ed-colors { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ed-colors small { color: var(--muted); font-size: 11.5px; margin-right: 2px; }
.ed-c { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 1px 9px 1px 6px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.ed-c::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(0, 0, 0, .25); }
.ed-c.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.ed-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.ed-quick small { color: var(--muted); }
.ed-msg { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #e03131 12%, var(--surface)); color: #c92a2a; font-size: 13px; }
.ed-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); margin: 12px -16px -16px; }
.ed-foot .dim { margin-right: auto; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #212529; color: #fff; border-radius: 10px; font-size: 13.5px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); max-width: calc(100vw - 32px); }
.toast .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); padding: 3px 10px; }
.dr-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dr-quick small { color: var(--muted); margin-right: 2px; }
.btn.sm { padding: 3px 11px; font-size: 13px; }
.btn.sm.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.dr-quick .dr-edit { margin-left: auto; }
.dr-status { font-size: 13px; font-weight: 650; color: var(--accent); margin-left: 4px; white-space: nowrap; transition: opacity .6s; }
.dr-status.busy { animation: drBlink 1s ease-in-out infinite; }
.dr-status.out { opacity: 0; }
@keyframes drBlink { 50% { opacity: .25; } }