:root {
  color-scheme: light;
  --bg: #f4f5f7; --card: #fff; --field: #fff; --text: #17191c; --sub: #5f6670; --line: #e3e6ea;
  --brand: #ff6a00; --brand-d: #e05a00; --brand-bg: #fff2e8; --on-brand: #fff;
  --blue: #1f6feb; --blue-bg: #e8f0fe; --green: #18a058; --green-bg: #e6f6ee; --red: #d93025; --red-bg: #fde8e7;
  --gray: #8a919b; --gray-bg: #eef0f2; --gray-fg: #4b525b; --yellow: #f5a623; --yellow-bg: #fff4d6; --yellow-fg: #a86b00;
  --memo-bg: #fff8e6; --memo-line: #f5d98a; --ink: #222; --ink-fg: #fff; --ink-link: #ffc89e;
  --overlay: rgba(0,0,0,.45); --switch-off: #cfd4da; --th-bg: #fafbfc;
  --top-bg: var(--card); --top-fg: var(--text); --logo: var(--brand);
  --radius: 14px; --radius-sm: 10px; --border-w: 1px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04);
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: var(--font); --font-num: var(--font); --display-weight: 800;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; line-height: 1.3; }
.hidden { display: none !important; }
.muted { color: var(--sub); font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }

/* 상단바 */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--top-bg); color: var(--top-fg); border-bottom: var(--border-w) solid var(--line); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.topbar .logo { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; color: var(--logo); }
.topbar .who { font-size: 13px; color: var(--top-fg); opacity: .7; }
.demo-banner { background: var(--ink); color: var(--ink-fg); text-align: center; font-size: 12px; padding: 5px 10px; }
.demo-banner a { color: var(--ink-link); }

.wrap { max-width: 640px; margin: 0 auto; padding: 14px 16px 90px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; }
.card h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; margin-bottom: 10px; }
.section-title { font-size: 14px; font-weight: 700; color: var(--sub); margin: 18px 4px 8px; display: flex; align-items: center; gap: 6px; }
.count { background: var(--brand); color: var(--on-brand); font-family: var(--font-num); border-radius: 99px; font-size: 12px; padding: 0 8px; }

/* 폼 */
label.f { display: block; font-size: 13px; font-weight: 600; color: var(--sub); margin: 12px 0 5px; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); background: var(--field); color: var(--text); }
/* Choice controls must not inherit a full-width text field's box. */
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; padding: 0; flex: 0 0 auto; vertical-align: middle; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
textarea { min-height: 76px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: var(--border-w) solid var(--line); background: var(--field); color: var(--text); border-radius: 99px; padding: 7px 13px; font-size: 14px; cursor: pointer; user-select: none; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.addr-box { border: var(--border-w) solid var(--line); border-radius: 12px; padding: 10px; }
.addr-box .tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px; margin-bottom: 6px; }
.tag.from { background: var(--blue-bg); color: var(--blue); }
.tag.to { background: var(--brand-bg); color: var(--brand-d); }
.addr-box input + input { margin-top: 6px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; font-size: 15px; border: var(--border-w) solid var(--line); background: var(--field); color: var(--text); border-radius: var(--radius-sm); padding: 11px 16px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:active { background: var(--brand-d); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: var(--ink-fg); }
.btn.green { background: var(--green); border-color: var(--green); color: var(--ink-fg); }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--ink-fg); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn.lg { padding: 15px; font-size: 17px; width: 100%; border-radius: var(--radius-sm); }
.btn.block { width: 100%; }

/* 요금 바 */
.fee-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: var(--border-w) solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 15; }
.fee-bar .inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.fee-bar .fee { font-family: var(--font-num); font-size: 20px; font-weight: 800; }
.fee-bar .btn { flex: 0 0 auto; width: auto; min-width: 150px; }
.fee-bar .grow { white-space: nowrap; }

/* 상태 배지 */
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.st-req { background: var(--yellow-bg); color: var(--yellow-fg); }
.st-asg { background: var(--blue-bg); color: var(--blue); }
.st-pick { background: var(--green-bg); color: var(--green); }
.st-done { background: var(--gray-bg); color: var(--gray-fg); }
.st-cancel { background: var(--red-bg); color: var(--red); }

/* 주문 카드 */
.order { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; border-left: 4px solid transparent; }
.order.new { border-left-color: var(--brand); animation: pulse 1.2s ease-in-out 3; }
@keyframes pulse { 50% { background: var(--brand-bg); } }
.order .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.order .no { font-family: var(--font-num); font-weight: 800; }
.order .cat { font-size: 12px; color: var(--sub); border: var(--border-w) solid var(--line); border-radius: 6px; padding: 1px 6px; }
.order .fee { margin-left: auto; font-family: var(--font-num); font-weight: 800; font-size: 16px; }
.route { position: relative; padding-left: 18px; margin: 6px 0; }
.route::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; border-left: 2px dashed var(--line); }
.route .pt { position: relative; margin: 3px 0; }
.route .pt::before { content: ""; position: absolute; left: -18px; top: 6px; width: 12px; height: 12px; border-radius: 50%; }
.route .pt.a::before { background: var(--blue); }
.route .pt.b::before { background: var(--brand); }
.route .addr { font-weight: 600; }
.route .det { font-size: 13px; color: var(--sub); }
.desc { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 8px 0; white-space: pre-wrap; word-break: break-word; }
.meta { font-size: 13px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.actions .btn { flex: 1; }
.tel { font-weight: 700; text-decoration: none; }
.empty { text-align: center; color: var(--gray); padding: 30px 10px; font-size: 14px; }

/* 진행 단계 */
.steps { display: flex; margin: 10px 0 4px; }
.steps .s { flex: 1; text-align: center; font-size: 12px; color: var(--gray); position: relative; padding-top: 18px; }
.steps .s::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--line); z-index: 1; }
.steps .s::after { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.steps .s:first-child::after { display: none; }
.steps .s.on { color: var(--brand-d); font-weight: 700; }
.steps .s.on::before, .steps .s.on::after { background: var(--brand); }

/* 탭 */
.tabs { display: flex; background: var(--card); border-bottom: var(--border-w) solid var(--line); position: sticky; top: 53px; z-index: 19; overflow-x: auto; }
.tabs button { flex: 1; font: inherit; font-weight: 700; color: var(--sub); background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 10px; cursor: pointer; white-space: nowrap; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }

/* 토글 */
.duty { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--card); border-bottom: var(--border-w) solid var(--line); }
.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--switch-off); border-radius: 99px; transition: .2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: var(--field); border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(22px); }

/* 모달 */
.modal-wrap { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: var(--card); color: var(--text); border-radius: 16px; width: 100%; max-width: 420px; padding: 18px; max-height: 90vh; overflow: auto; }
.modal h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; margin-bottom: 10px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.modal.postcode { padding: 0; height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.pc-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pc-body { flex: 1; }

#toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--ink-fg); padding: 11px 18px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .25s; z-index: 200; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.err { background: var(--red); }
#toast.ok { background: var(--green); }

/* 로그인 */
.auth { max-width: 400px; margin: 40px auto; padding: 0 16px; }
.auth .logo-big { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--brand); text-align: center; margin-bottom: 4px; }
.demo-hint { background: var(--memo-bg); border: 1px solid var(--memo-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 12px; }

/* 관리자 */
body.admin .wrap { max-width: 1280px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; }
.stat .k { font-size: 12px; color: var(--sub); }
.stat .v { font-family: var(--font-num); font-size: 22px; font-weight: 800; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.col h3 { font-size: 14px; margin: 0 4px 8px; display: flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
table.list th, table.list td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list th { font-size: 12px; color: var(--sub); background: var(--th-bg); white-space: nowrap; }
table.list td.num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; border-radius: 12px; box-shadow: var(--shadow); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gray); margin-right: 5px; }
.dot.on { background: var(--green); }
#map { width: 100%; height: 420px; border-radius: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

.memo { background: var(--memo-bg) !important; }
.closed { background: var(--red-bg) !important; }
.stat { border: var(--border-w) solid transparent; }
body.driver { --logo: var(--blue); }
body.admin { --logo: var(--top-fg); }
.auth .logo-big { color: var(--logo); }

/* 디자인 전환 버튼 */
.theme-tg { gap: 4px; }
.theme-tg svg { flex: 0 0 auto; }
.topbar .theme-tg { margin-left: 0; }
.auth { position: relative; }
.auth-tg { position: absolute; right: 16px; top: -28px; }

/* 정보 칸: 거리 / 희망 / 결제 / 물건값 */
.info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.info > div { background: var(--field); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; min-width: 0; }
.info span { display: block; font-size: 11px; color: var(--sub); line-height: 1.3; }
.info b { display: block; font-size: 14px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.info .cash b { color: var(--green); }
.info .bank b { color: var(--blue); }
.info .cost b { color: var(--red); }
.info .none b { color: var(--gray); font-weight: 600; }
.info small { display: block; font-size: 11px; font-weight: 600; color: var(--sub); }
@media (max-width: 480px) { .info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 경로 지도 */
.rmap { position: relative; z-index: 0; isolation: isolate; height: 210px; border-radius: var(--radius-sm); overflow: hidden; border: var(--border-w) solid var(--line); background: var(--field); margin: 8px 0; }
.rmap svg { display: block; width: 100%; height: 100%; }
.rmap .note { position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: var(--sub); background: var(--card); border-radius: 6px; padding: 1px 6px; opacity: .92; }
.rmap .nomap { display: grid; place-items: center; height: 100%; color: var(--sub); font-size: 13px; text-align: center; padding: 10px; }
.kpin { padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.topbar .logo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar > * { flex-shrink: 0; }
.topbar > .logo { flex-shrink: 1; }
@media (max-width: 400px) { .topbar .theme-tg span { display: none; } .topbar .theme-tg { padding: 6px 8px; } .topbar .who { display: none; } }

/* 경유지 */
.route .pt.w::before { background: #7a5af8; width: 10px; height: 10px; left: -17px; top: 7px; }
.wtag { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: #7a5af8; border-radius: 5px; padding: 0 5px; margin-right: 5px; vertical-align: 1px; }
.addr-box .tag.via { background: #efeaff; color: #5b3fd6; }
.stop-head { display: flex; align-items: center; justify-content: space-between; }
.stop-head .btn { padding: 2px 8px; }
#addStop { margin-top: 8px; border-style: dashed; }

/* 길안내 */
.nav-box { display: grid; gap: 6px; margin-top: 10px; }
.nav-main { background: var(--brand-bg); border-color: var(--brand); color: var(--text); width: 100%; }
.nav-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-parts .btn { flex: 1 1 auto; }
.nav-pref { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); margin: 0 4px 10px; }
.nav-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav-app { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); background: var(--field); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.nav-app i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 900; }
.nav-app:focus-visible, .nav-app:hover { outline: 2px solid var(--brand); outline-offset: -1px; }

/* 개인정보 가림 안내 */
.privacy { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--sub); background: var(--gray-bg); border-radius: 8px; padding: 6px 9px; }
.privacy.soft { background: transparent; padding: 2px 0 0; font-weight: 600; }

/* 새 주문 팝업 */
.duty.sub { padding-top: 8px; padding-bottom: 10px; }
.duty.sub .switch { transform: scale(.85); }
.order-pop { align-items: flex-end; }
.order-pop .modal { max-width: 480px; border-radius: 20px 20px 16px 16px; animation: popin .25s ease-out; }
@keyframes popin { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .order-pop .modal { animation: none; } .pop-timer i { animation: none !important; } }
.pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pop-head b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 18px; color: var(--brand-d); }
.pop-timer { flex: 1; height: 6px; background: var(--gray-bg); border-radius: 99px; overflow: hidden; }
.pop-timer i { display: block; height: 100%; background: var(--brand); transform-origin: left; animation: popbar linear forwards; }
@keyframes popbar { to { transform: scaleX(0); } }
.pop-left { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.pop-fee { font-family: var(--font-num); font-size: 28px; font-weight: 800; margin: 2px 0 6px; }
.order-pop .modal-actions .btn { padding: 15px; font-size: 17px; }
.order-pop .pop-accept { flex: 2; }

/* ≡ 메뉴 (기사 앱) */
.menu-btn { padding: 6px 8px; margin-left: -6px; color: var(--top-fg); }
.drawer-back { position: fixed; inset: 0; background: var(--overlay); z-index: 60; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(420px, 100%); background: var(--bg); color: var(--text); z-index: 61;
  overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease-out; box-shadow: 0 0 30px rgba(0,0,0,.2);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
.dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--top-bg); color: var(--top-fg); border-bottom: var(--border-w) solid var(--line); }
.dhead b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 18px; }
.dhead .btn { font-size: 20px; line-height: 1; padding: 4px 10px; color: var(--top-fg); }
.dbody { padding: 14px 16px 30px; }
.profile-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 800; font-size: 19px; flex: 0 0 auto; }
.today-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.today-box > div { background: var(--card); border-radius: var(--radius-sm); padding: 10px; box-shadow: var(--shadow); min-width: 0; }
.today-box span { display: block; font-size: 12px; color: var(--sub); }
.today-box b { font-family: var(--font-num); font-size: 17px; }
.dmenu { display: grid; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.dmenu button { display: flex; align-items: center; justify-content: space-between; font: inherit; font-size: 16px; font-weight: 700; color: var(--text);
  background: none; border: 0; border-bottom: var(--border-w) solid var(--line); padding: 16px; cursor: pointer; text-align: left; }
.dmenu button:last-child { border-bottom: 0; }
.dmenu button i { font-style: normal; color: var(--sub); font-size: 22px; }
.dmenu button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.set-group { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: var(--border-w) solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.set-row .muted { margin-top: 2px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; font: inherit; font-weight: 700; font-size: 14px; padding: 9px 10px; border-radius: var(--radius-sm); border: var(--border-w) solid var(--line); background: var(--field); color: var(--text); cursor: pointer; }
.seg button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.stat .v.bad { color: var(--red); font-size: 17px; }
.drawer .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.daily { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 12px; }
.drow { display: grid; grid-template-columns: 44px 1fr 40px auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.drow:last-child { border-bottom: 0; }
.drow .dd { color: var(--sub); }
.drow .bar { height: 8px; background: var(--gray-bg); border-radius: 99px; overflow: hidden; }
.drow .bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.drow .dn { color: var(--sub); text-align: right; }

/* 전화 · 메시지 */
.btn.call, .btn.chat { gap: 5px; position: relative; }
.btn.call { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.btn.chat { color: var(--blue); border-color: var(--blue); background: var(--blue-bg); }
.unread { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; line-height: 19px; text-align: center; }
.contact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.contact-row .btn { flex: 1 1 auto; }
.menu-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.menu-btn { position: relative; }
.dmenu button .unread { position: static; margin-left: auto; margin-right: 8px; }

/* 메시지 창 */
.chat-wrap { position: fixed; inset: 0; z-index: 120; background: var(--overlay); display: flex; justify-content: center; }
.chatbox { background: var(--bg); color: var(--text); width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--top-bg); color: var(--top-fg); border-bottom: var(--border-w) solid var(--line); }
.chat-head .btn.ghost { font-size: 22px; line-height: 1; padding: 4px 10px; color: var(--top-fg); }
.chat-head b { font-size: 16px; }
.chat-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-day { align-self: center; font-size: 12px; color: var(--sub); background: var(--gray-bg); border-radius: 99px; padding: 2px 10px; margin: 6px 0; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 12px; color: var(--sub); margin: 0 4px 2px; }
.bubble { background: var(--card); border: var(--border-w) solid var(--line); border-radius: 16px 16px 16px 4px; padding: 8px 12px; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.msg.me .bubble { background: var(--brand); color: var(--on-brand); border-color: var(--brand); border-radius: 16px 16px 4px 16px; }
.msg .at { font-size: 11px; color: var(--sub); margin: 2px 4px 0; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: var(--border-w) solid var(--line); }
.chat-input textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; }
.chat-closed { padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--sub); font-size: 14px; background: var(--card); border-top: var(--border-w) solid var(--line); }
.msg-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .msg-layout { grid-template-columns: 1fr; } }
.thread { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 11px 4px; cursor: pointer; }
.thread:hover, .thread:focus-visible { background: var(--field); outline: none; }
.thread .grow { display: grid; min-width: 0; }
.thread .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread .tt { font-size: 11px; font-weight: 800; color: var(--blue); background: var(--blue-bg); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.thread .tm { display: grid; justify-items: end; gap: 3px; font-size: 12px; color: var(--sub); white-space: nowrap; }
.thread .tm .unread, .thread .tm em { position: static; font-style: normal; }
.thread .tm em { font-size: 11px; color: var(--gray); }
.drv-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.drv-row:last-child { border-bottom: 0; }

/* 성인 확인 품목 · 서명 */
.badge.st-age { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }
.age-box { margin-top: 10px; border: var(--border-w) dashed var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--sub); }
.age-box p { margin: 6px 0 0; line-height: 1.5; }
.age-box.on { border: 1.5px solid var(--red); background: var(--red-bg); color: var(--text); }
.age-box .id-check { margin-top: 10px; font-size: 15px; background: var(--card); border-radius: 8px; padding: 10px; }
.age-box .id-check input { width: 22px !important; height: 22px; }
.modal.complete { max-width: 480px; }
.sig-head { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.sig-head .btn { margin-left: auto; }
.sig-pad { position: relative; height: 190px; margin-top: 6px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: #fff; touch-action: none; overflow: hidden; }
.sig-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.sig-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa1a9; font-size: 14px; pointer-events: none; }
.proof-img { width: 100%; max-width: 600px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 8px; }
.badge.st-door { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue); }
.chip.disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* 계약 · 면허 · 정산 */
.auth.wide { max-width: 640px; }
.steps-mini { display: flex; gap: 6px; margin-bottom: 10px; }
.steps-mini b { flex: 1; text-align: center; font-size: 12px; padding: 6px 4px; border-radius: 99px; background: var(--gray-bg); color: var(--sub); }
.steps-mini b.on { background: var(--brand); color: var(--on-brand); }
.contract-box { white-space: pre-wrap; word-break: keep-all; font-size: 13.5px; line-height: 1.7; max-height: 46vh; overflow-y: auto; background: var(--field); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.contract-box.view { max-height: 40vh; }
.agree-list { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; }
.agree-list .agree-all { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.agree-list input { width: 20px !important; height: 20px; flex: 0 0 auto; }
.ctable { margin-top: 10px; font-size: 13px; }
.ctable th { width: 110px; }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.docs-box { margin-top: 12px; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--field); }
.docs-box .declare { margin-top: 12px; font-size: 13px; align-items: flex-start; background: var(--red-bg); border-radius: 8px; padding: 10px; }
.docs-box .declare input, .age-box input[name=declare] { width: 20px !important; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.docs-alert { padding: 10px 16px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.docs-alert.bad { background: var(--red-bg); color: var(--red); }
.docs-alert.warn { background: var(--yellow-bg); color: var(--yellow-fg); }
.settle-sum { grid-column: 1 / -1; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; font-size: 15px; border-left: 4px solid var(--brand); }
.settle-sum.done { border-left-color: var(--gray); }
.settle-sum .muted { font-size: 12px; margin-top: 4px; }
.settle-line { margin-top: 8px; font-size: 13px; background: var(--field); border-radius: 8px; padding: 8px 10px; line-height: 1.6; }

/* 주소 후보 목록 · 위치 확정 */
.ac-list { margin-top: 6px; border: var(--border-w) solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; max-height: 320px; overflow-y: auto; }
.ac-head { font-size: 12px; font-weight: 700; color: var(--sub); padding: 8px 12px 4px; }
.ac-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 12px; color: var(--text); font: inherit; cursor: pointer; }
.ac-head + .ac-item { border-top: 0; }
.ac-item:hover, .ac-item:focus-visible { background: var(--brand-bg); outline: none; }
.ac-item b { font-size: 15px; }
.ac-item span { display: block; font-size: 13px; color: var(--sub); margin-top: 2px; }
.ac-cat { margin-left: 6px; font-size: 11px; color: var(--sub); }
.ac-empty { padding: 12px; font-size: 13px; color: var(--sub); }
.addr-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: var(--green-bg); font-size: 13px; }
.addr-ok .ok-mark { color: var(--green); font-weight: 800; }
.addr-ok .ok-addr { flex: 1 1 160px; min-width: 0; color: var(--text); }
.addr-ok .btn { margin-left: auto; }
input.need-pick { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-bg); }
.pickmap { max-width: 520px; }
.pm-map { position: relative; height: 320px; border-radius: 12px; overflow: hidden; border: var(--border-w) solid var(--line); }
.pm-el { position: absolute; inset: 0; }
.pm-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -26px 0 0 -13px; pointer-events: none; z-index: 2;
  background: var(--red); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pm-addr { margin-top: 8px; font-size: 14px; }
.rmap-lg { height: 340px; }
.ac-head span { font-weight: 400; }
.ac-dist { float: right; font-style: normal; font-size: 12px; font-weight: 700; color: var(--brand-d); margin-left: 8px; }

/* 적립금 */
.wal-chip { margin-left: auto; margin-right: 6px; font-family: var(--font-num); font-size: 14px; color: var(--brand-d); }
.wal-chip.neg, #walBal.neg, .wal-tx .neg { color: var(--red); }
.wal-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; }
.wal-card > span { display: block; font-size: 13px; color: var(--sub); }
.wal-card > b { display: block; font-family: var(--font-num); font-size: 30px; margin: 2px 0; }
.wal-help { background: var(--card); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.wal-help summary { cursor: pointer; font-weight: 700; }
.wal-help p { margin: 6px 0 0; }
.wal-req, .wal-tx { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.wal-req .wst { font-size: 12px; font-weight: 700; color: var(--yellow-fg); }
.wal-req.approved .wst { color: var(--green); } .wal-req.rejected .wst, .wal-req.canceled .wst { color: var(--sub); }
.wal-tx .amt { text-align: right; white-space: nowrap; }
.wal-tx .pos { color: var(--green); }
.small { font-size: 12px; }
.badge.st-cost { background: var(--yellow-bg); color: var(--yellow-fg); }
#foodNote.strong { color: var(--yellow-fg); font-weight: 700; }
.drv-job { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.drv-job .head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.drv-job .head .fee { margin-left: auto; font-weight: 800; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; }
.lock-box { background: var(--blue-bg); border: 1px solid var(--blue); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.lock-box b { color: var(--blue); }
.lock-box p { margin: 6px 0 0; line-height: 1.55; }

/* 심부름 방향 */
.dir-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dir-btns .dir { text-align: left; border: 2px solid var(--line); background: var(--field); color: var(--text); border-radius: 12px; padding: 7px 10px; font: inherit; cursor: pointer; min-width: 0; }
.dir-btns .dir b { display: block; font-size: 14px; }
.dir-btns .dir span { display: block; font-size: 11px; line-height: 1.3; color: var(--sub); }
.dir-btns .dir.on { border-color: var(--brand); background: var(--brand-bg); }
/* 운송 유의사항 */
.cargo-q { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.cargo-q.yes { border-color: var(--green); }
.cargo-q.no { border-color: var(--red); background: var(--red-bg); }
.cargo-q .q { font-size: 14px; font-weight: 700; line-height: 1.5; }
.cargo-q .yn { display: flex; gap: 6px; margin-top: 8px; }
.cargo-q .yn .chip { flex: 1; text-align: center; }
.cargo-q .yn .chip.on.no { background: var(--red); border-color: var(--red); color: #fff; }
.cargo-no { margin-top: 8px; color: var(--red); font-size: 13px; font-weight: 700; }
.cust-foot { text-align: center; font-size: 12px; color: var(--sub); padding: 16px 8px 8px; line-height: 1.8; }
.cust-foot a { color: var(--sub); }
.terms-doc .pre { white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.terms-doc ol, .terms-doc ul { padding-left: 20px; line-height: 1.7; }
.proof-photo { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; background: #000; margin-top: 8px; }
.photo-btn { margin-top: 8px; cursor: pointer; }

/* 기사앱: 상단 운행 on/off */
.topbar .duty-tg { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.topbar .duty-tg b { font-weight: 800; }
.topbar .duty-tg { order: 99; margin-left: 8px; }
.topbar > .logo { margin-right: auto; }
.switch.sm { width: 44px; height: 26px; }
.switch.sm span::before { width: 20px; height: 20px; }
.switch.sm input:checked + span::before { transform: translateX(18px); }
.duty-hint { padding: 8px 16px; font-size: 13px; background: var(--card); border-bottom: var(--border-w) solid var(--line); color: var(--sub); }
.duty-hint.on { display: none; }
.topbar .duty-tg.on b { color: var(--green); }

/* 관리자: 별도 설정 화면 (오른쪽에서 열림) */
.set-drawer { left: auto; right: 0; width: min(760px, 100%); transform: translateX(100%); }
.set-drawer.open { transform: none; }
.set-drawer #tab-settings { padding-top: 6px; }
.set-drawer #tab-settings .card { display: none; }
.set-drawer #tab-settings .card.on { display: block; }
.set-drawer .set-save { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.set-drawer .set-save .btn { width: 100%; }

/* 관리자: 우측 맨 위 회사 적립금 */
.co-chip { order: 99; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  padding: 6px 12px; border-radius: 99px; border: var(--border-w) solid var(--line); background: var(--card); color: var(--text); cursor: pointer; white-space: nowrap; }
.co-chip b { font-weight: 800; }
.co-chip.hidden { display: none; }
.tabs .tab-act { position: sticky; right: 6px; box-shadow: -10px 0 10px var(--card); flex: 0 0 auto; color: var(--on-brand); background: var(--brand); border-radius: var(--radius-sm); margin: 6px 8px; padding: 6px 14px; border-bottom: 0; }
/* 관리자 관제: 요약 숫자 한 줄 */
.stats.mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.stats.mini .stat { padding: 6px 8px; border-radius: 10px; text-align: center; min-width: 0; }
.stats.mini .stat .k { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats.mini .stat .v { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .stats.mini { gap: 4px; } .stats.mini .stat { padding: 5px 3px; } .stats.mini .stat .k { font-size: 10px; } .stats.mini .stat .v { font-size: 13px; } }

/* 적립금 정산 항목별 */
.wal-tx.split { align-items: flex-start; }
.tx-parts { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; max-width: 260px; }
.tx-parts > div { display: flex; justify-content: space-between; gap: 12px; }
.tx-parts span { color: var(--sub); }
.tx-parts .neg { color: var(--red); } .tx-parts .pos { color: var(--green); }

/* 관리자 관제: 지도 + 기사 목록 */
.ctl { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.ctl #map { height: calc(100vh - 190px); min-height: 360px; }
.ctl #mapWrap { margin: 0; }
@media (max-width: 900px) { .ctl { grid-template-columns: 1fr; } .ctl #map { height: 55vh; } }
.ctl-drv { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 4px; cursor: pointer; color: var(--text); }
.ctl-drv:last-child { border-bottom: 0; }
.ctl-drv .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.ctl-drv.on .dot { background: var(--green); }
.ctl-drv .muted { margin-left: auto; }
.ctl-drv i { font-style: normal; color: var(--sub); }
.board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .board { grid-template-columns: 1fr; } }
.ctl:has(#mapWrap.hidden) { grid-template-columns: 1fr; }

/* 주문 칸 열고 닫기 */
.board .col-h { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.board .col-h::after { content: "▾"; margin-left: auto; color: var(--sub); font-size: 14px; transition: transform .15s; }
.board .col.shut .col-h::after { transform: rotate(-90deg); }
.board .col.shut > :not(.col-h) { display: none; }

/* 기사 적립금: 최소 적립금 ? 버튼 · 내역 접기/스크롤 */
.q-help { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: var(--border-w) solid var(--line); background: var(--field); color: var(--sub);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; padding: 0; margin-left: 2px; vertical-align: middle; }
.wal-txbox > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.wal-txbox > summary::-webkit-details-marker { display: none; }
.wal-txbox > summary::after { content: "▾"; margin-left: auto; color: var(--sub); transition: transform .15s; }
.wal-txbox:not([open]) > summary::after { transform: rotate(-90deg); }
.wal-txlist { max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }

.cust-foot #bizInfo div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-range { margin-bottom: 8px; }
.mine-custom { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.mine-custom input { width: auto; flex: 1 1 130px; }
.chat-wrap ~ .modal-wrap { z-index: 130; }   /* 대화방 위에 뜨는 확인창 */

/* 기사: 대기 주문 작은 카드 */
.oc-note { margin: 0 0 8px; }
.order.oc { padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.oc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.oc-top .no { font-family: var(--font-num); font-weight: 800; font-size: 14px; }
.oc-top .cat { font-size: 12px; color: var(--sub); border: var(--border-w) solid var(--line); border-radius: 6px; padding: 0 6px; }
.oc-top .badge { font-size: 11px; padding: 1px 6px; }
.oc-top .fee { margin-left: auto; font-family: var(--font-num); font-weight: 800; font-size: 17px; }
.oc-rt { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; line-height: 1.45; min-width: 0; }
.oc-rt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.oc-rt i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.oc-rt i.a { background: var(--blue); } .oc-rt i.b { background: var(--brand); }
.oc-desc { font-size: 12.5px; color: var(--sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-bot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.oc-meta { flex: 1; min-width: 0; font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.oc-meta .pay-cash { color: var(--green); } .oc-meta .pay-bank { color: var(--blue); }
.oc-bot .btn { flex: 0 0 auto; min-width: 72px; padding: 8px 14px; }
.order.oc.open .info { margin-top: 6px; }

/* 관리자 주문 카드: 작게 + 칸 머리 눌러서 열고 닫기 잘 보이게 */
.order.oc.adm { cursor: pointer; }
.order.oc.adm .oc-meta { margin-top: 3px; }
.order.oc.adm .oc-meta b { color: var(--text); font-weight: 700; }
.oc-act { display: flex; gap: 6px; margin-top: 7px; }
.oc-act select { flex: 1; min-width: 0; padding: 5px 6px; font-size: 13px; }
.oc-act .btn { flex: 0 0 auto; }
.order.adm-full { cursor: pointer; }
.board .col-h { background: var(--card); border: var(--border-w) solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 0 0 8px; }
.board .col-h::after { content: "닫기 ▾"; font-size: 12px; font-weight: 600; }
.board .col.shut .col-h::after { content: "열기 ▸"; transform: none; }
@media (max-width: 700px) { .board { grid-template-columns: minmax(0, 1fr); } }
.board .col { min-width: 0; }

/* 기사 진행중: 2건 이상이면 요약 카드 */
.order.oc.mc { cursor: pointer; }
.order.oc.mc .oc-bot .btn { min-width: 0; }
.mc-fold { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--sub); cursor: pointer; margin: -4px 0 4px; }

/* 관리자: 메시지 도착 팝업 */
.msg-pop { position: fixed; right: 16px; bottom: 16px; z-index: 140; width: min(360px, calc(100vw - 32px)); background: var(--card); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); border: var(--border-w) solid var(--line); padding: 12px 14px; animation: mpIn .2s ease-out; }
@keyframes mpIn { from { transform: translateY(20px); opacity: 0; } }
.msg-pop .mp-h { display: flex; align-items: center; font-weight: 800; color: var(--brand); }
.msg-pop .mp-h .mp-x { margin-left: auto; border: 0; background: none; color: var(--sub); font-size: 16px; cursor: pointer; }
.msg-pop .mp-from { font-weight: 700; margin-top: 6px; }
.msg-pop .mp-body { color: var(--sub); font-size: 14px; margin-top: 2px; max-height: 4.2em; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.msg-pop .mp-act { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }

/* 구매대행 영수증 */
.rcpt-box { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--red-bg); border: var(--border-w) solid var(--line); }
.rcpt-box.ok { background: var(--green-bg); }
.rcpt-box > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rcpt-box small { color: var(--sub); font-size: 12px; }
.rcpt-box .btn { flex: 0 0 auto; }

/* 구매 위임 동의서 */
.proxy-box { margin-top: 10px; }
.proxy-list { margin: 8px 0 6px; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.proxy-list li { margin: 3px 0; }
.proxy-list b { color: var(--text); }

/* 기사 운행 수칙 */
.rules-modal h3 { margin-bottom: 4px; }
.rules-list li { margin: 5px 0; }
.rules-duty { margin: 8px 0 4px; padding: 9px 11px; border-radius: 10px; background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.rules-ok { margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--field); border: var(--border-w) solid var(--line); }

#catHint.need { color: var(--brand); font-weight: 700; }

/* 손님 주소 즐겨찾기 */
.fav-row { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 2px; margin: 2px 0 4px; scrollbar-width: none; align-items: center; flex-wrap: nowrap; }
.fav-row::-webkit-scrollbar { display: none; }
.fav-chip { flex: 0 0 auto; border: var(--border-w) solid var(--line); background: var(--field); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fav-chip.add { color: var(--brand); border-style: dashed; }
.fav-chip.ghost { color: var(--sub); font-weight: 600; }
.fav-row .muted.small { white-space: normal; }
.fav-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: var(--border-w) solid var(--line); }
.fav-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-item span { color: var(--sub); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 요청 확인 창: 운송 유의사항 */
.cargo-box { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--bg); border: var(--border-w) solid var(--line); }
.cargo-box h4 { margin: 0 0 4px; font-size: 15px; }
.cargo-box .cargo-q { margin-top: 8px; }
.cargo-outro { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--brand); }

/* V293: summaries with the complete, unchanged consent text on demand. */
.modal.rules-brief293 {max-width:480px;padding:20px;color:var(--text)}
.rules-brief293 .consent-kicker293 {display:block;color:var(--brand-d);font-size:12px;font-weight:800;margin-bottom:8px}
.modal.rules-brief293 h3 {font-size:24px;line-height:1.35;margin:0 0 16px;letter-spacing:-.7px}
.rules-brief293 .rules-highlights293 {border:1px solid var(--line);border-radius:16px;background:var(--field);padding:0 14px}
.rules-highlights293>div {display:flex;align-items:flex-start;gap:10px;padding:12px 0;min-width:0}
.rules-highlights293>div+div {border-top:1px solid var(--line)}
.rules-highlights293>div>span {display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:9px;background:var(--brand-bg);color:var(--brand-d);font-size:11px;font-weight:800}
.rules-highlights293>div>div {min-width:0}
.rules-highlights293 b {display:block;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.modal.rules-brief293 .rules-highlights293 p {font-size:12px;line-height:1.6;color:var(--sub);margin:4px 0 0;word-break:keep-all;overflow-wrap:anywhere}
.rules-brief293 .rules-full293 {margin-top:10px;border-bottom:1px solid var(--line)}
.rules-brief293 .rules-full293>summary {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text);list-style:none}
.rules-full293>summary::-webkit-details-marker,.cargo-group293>summary::-webkit-details-marker {display:none}
.rules-brief293 .rules-full293[open]>summary>span,.cargo-group293[open] .consent-chevron293 {transform:rotate(180deg)}
.rules-brief293 .rules-list {font-size:13px;line-height:1.65;padding-left:22px}
.rules-brief293 .rules-list li {margin:12px 0}
.rules-brief293 .rules-duty {font-size:12px;line-height:1.7;font-weight:500}
.rules-brief293 .rules-ok {display:flex;align-items:flex-start;gap:10px;padding:12px;margin:14px 0 0;background:var(--brand-bg);border-color:var(--line)}
.rules-brief293 .rules-ok input {width:22px!important;height:22px;flex:0 0 22px;accent-color:var(--brand-d);margin:0}
.rules-brief293 .rules-ok b {font-size:14px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.modal.rules-brief293 .rules-once293 {text-align:center;margin:8px 0 0;color:var(--sub);font-size:11px;line-height:1.55}
.rules-brief293 .rules-contact293 {margin:4px 0 0;justify-content:center}
.rules-brief293 .rules-contact293 .btn {border:0;background:none;flex:none;padding:8px 12px;min-height:36px;font-size:12px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.rules-brief293 .modal-actions {margin-top:10px;display:grid;grid-template-columns:1fr 2fr;gap:8px}
.rules-brief293 .modal-actions .btn {padding:12px 8px;min-width:0;font-size:14px;white-space:normal}
.modal .cargo-box.cargo-brief293 {padding:16px;margin-top:18px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text)}
.cargo-brief293 .cargo-heading293 {display:flex;align-items:center;justify-content:space-between;gap:8px}
.cargo-brief293 .cargo-heading293 h4 {font-size:18px;margin:0;font-weight:800}
.cargo-brief293 [data-cargo-status] {font-size:12px;white-space:nowrap;color:var(--brand-d);font-weight:700;background:var(--brand-bg);padding:4px 8px;border-radius:20px}
.modal .cargo-brief293 .cargo-intro293 {font-size:12px;line-height:1.6;color:var(--sub);margin:8px 0 14px}
.cargo-brief293 .cargo-group293 {border:1px solid var(--line);border-radius:12px;background:var(--field);margin:8px 0;overflow:hidden}
.cargo-brief293 .cargo-group293>summary {display:flex;align-items:center;gap:9px;padding:12px 10px;min-height:64px;cursor:pointer;list-style:none}
.cargo-group293 .cargo-group-number293 {display:flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border-radius:7px;background:var(--gray-bg);color:var(--sub);font-size:11px;font-weight:800}
.cargo-group293 .cargo-group-copy293 {flex:1;min-width:0}
.cargo-group293 .cargo-group-copy293 b {display:block;font-size:14px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.cargo-group293 .cargo-group-copy293 small {display:block;font-size:11px;color:var(--sub);line-height:1.5;margin-top:3px;word-break:keep-all;overflow-wrap:anywhere}
.cargo-group293 .cargo-group-count293 {font-size:11px;color:var(--sub);white-space:nowrap}
.cargo-group293 .consent-chevron293 {font-size:16px;color:var(--sub)}
.cargo-group293.all-yes .cargo-group-number293 {background:var(--brand-bg);color:var(--brand)}
.cargo-group293.all-yes .cargo-group-count293 {color:var(--brand-d);font-weight:800}
.cargo-brief293 .cargo-group293.has-no {border-color:var(--red)}
.cargo-group293 .cargo-group-body293 {padding:0 10px 10px;border-top:1px solid var(--line)}
.cargo-brief293 .cargo-q {padding:10px;margin:10px 0 0;background:var(--card)}
.cargo-brief293 .cargo-q .q {font-size:13px;font-weight:500;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.cargo-brief293 .cargo-q .yn .chip {min-height:42px;font-size:13px}
.cargo-brief293 .cargo-fragile293 {font-size:12px;color:var(--sub);line-height:1.65;margin:10px 0}
.cargo-brief293 .cargo-fragile293 ul {padding-left:18px}
.cargo-brief293 .cargo-fragile293 li {margin:6px 0}
.cargo-brief293 .cargo-all293 {display:flex;width:100%;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:12px;min-height:66px;padding:12px;margin-top:14px;font:inherit;cursor:pointer;white-space:normal}
.cargo-brief293 .cargo-all293.is-agreed {background:var(--brand-bg);border-color:var(--brand)}
.cargo-brief293 .cargo-check293 {display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border:2px solid var(--sub);border-radius:50%;font-size:15px;font-weight:800}
.cargo-brief293 .is-agreed .cargo-check293 {background:var(--brand);border-color:var(--brand-d);color:var(--on-brand)}
.cargo-brief293 .cargo-all293 b {display:block;font-size:15px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.cargo-brief293 .cargo-all293 small {display:block;color:var(--sub);font-size:11px;line-height:1.5;margin-top:3px}
.modal .cargo-brief293 .cargo-outro {font-size:11px;color:var(--sub);font-weight:400;line-height:1.6;margin:8px 0 0}
.modal .cargo-brief293 .cargo-warning293 {color:var(--red);font-size:12px;background:var(--red-bg);border-radius:8px;padding:10px;margin:10px 0;line-height:1.6}
.cargo-brief293 summary:focus-visible,.cargo-brief293 button:focus-visible,.rules-brief293 summary:focus-visible {outline:2px solid var(--brand);outline-offset:-3px}
.cargo-group-count293 .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cargo-brief293 .cargo-dispatch294 {margin:12px 0 14px;padding:12px;border:1px solid var(--brand-d);border-radius:12px;background:var(--brand-bg);color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.cargo-dispatch294>b {display:block;font-size:14px;line-height:1.5;color:var(--brand-d)}
.cargo-dispatch294 dl {margin:8px 0}
.cargo-dispatch294 dl>div {display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5}
.cargo-dispatch294 dt {flex:1;min-width:0}
.cargo-dispatch294 dd {margin:0;font-weight:800;white-space:nowrap}
.modal .cargo-dispatch294 p {font-size:11px;line-height:1.6;margin:6px 0;color:var(--text)}
.cargo-dispatch294 small {display:block;font-size:11px;line-height:1.6;color:var(--sub)}
@media(max-width:360px){.modal.rules-brief293{padding:16px}.modal .cargo-box.cargo-brief293{padding:12px}.cargo-brief293 .cargo-group293>summary{gap:6px;padding:10px 8px}.cargo-group293 .cargo-group-number293{flex-basis:20px;height:20px}}

/* 손님: 마트 장보기 안내 · 채팅 문의 버튼 */
.cat-note { margin: 8px 0 0; font-size: 12.5px; color: var(--sub); }
.cat-note a { color: var(--brand); font-weight: 700; }
#supportBtn { position: relative; }
#supportBtn .unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; padding: 0 5px; }
@media (max-width: 420px) { .topbar .btn.sm { padding: 6px 8px; font-size: 12.5px; } }

/* 이용약관 · 개인정보 처리방침 */
.foot-links { margin-top: 6px; }
.foot-links a { color: var(--sub); text-decoration: underline; }
.doc-text { white-space: pre-wrap; word-break: keep-all; font-size: 13.5px; line-height: 1.7; max-height: 60vh; overflow-y: auto; padding: 10px 12px; background: var(--bg); border-radius: 10px; border: var(--border-w) solid var(--line); }
label a[data-doc] { color: var(--brand); font-weight: 700; text-decoration: underline; }

/* v48: readable cards on narrow rider screens */
/* v84: order cards use the shared theme border, including completed/canceled. */
.oc-top,.order .head{flex-wrap:wrap;gap:6px;align-items:center}
.oc-top .cat,.order .head .cat{flex:0 0 auto;white-space:nowrap;word-break:keep-all;max-width:100%}
.oc-top .fee,.order .head .fee{white-space:nowrap;margin-left:auto;font-size:18px}
.oc-bot{justify-content:flex-start;gap:10px;flex-wrap:wrap}.oc-bot .oc-meta{flex:1;min-width:160px}
.rider-actions{justify-content:flex-start}.rider-actions>.btn{flex:0 1 auto}.order-pop .modal-actions .pop-accept{order:-1}
.approval-box,.fee-policy{padding:12px;border:1px solid var(--memo-line);background:var(--memo-bg);color:var(--text);border-radius:10px;margin:10px 0;line-height:1.6}
.approval-box button{margin:6px 8px 0 0}.cancel-reason{padding:10px;color:var(--red);background:var(--red-bg)}
.fee-bar .fee{font-size:18px;line-height:1.4}.topbar .logo{min-width:0;white-space:normal;word-break:keep-all;font-size:17px}
.new-call-flash:after{content:'';position:fixed;inset:3px;z-index:100010;pointer-events:none;border:5px solid #f27600;border-radius:14px;animation:call-border 1s ease-in-out 5}
@keyframes call-border{0%,100%{opacity:.15}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.new-call-flash:after{animation:none;opacity:1}}

body:not(.driver):not(.admin) .topbar{flex-wrap:wrap;gap:8px}
body:not(.driver):not(.admin) .topbar .logo{flex:1 0 100%;overflow:visible;text-overflow:clip;white-space:normal}
.topbar .logo{overflow:visible;text-overflow:clip}


/* Compact route markers: the tip is the actual map coordinate. */
.route-marker{position:relative;box-sizing:border-box;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;background:var(--marker-color);color:#fff;border:2px solid #fff;border-radius:4px;box-shadow:0 1px 4px #0006;font-family:"Malgun Gothic",sans-serif;line-height:1;white-space:nowrap}
.route-marker:after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--marker-color)}
.route-square{min-width:24px;width:max-content;height:24px;padding:0 4px;font-size:13px;font-weight:800}
.route-square:after{bottom:-6px;border-left-width:4px;border-right-width:4px;border-top-width:5px}
.route-motorcycle{width:44px;height:34px;padding:0;color:#182c48;background:#fff;border-color:#182c48;border-radius:9px;--marker-color:#182c48!important}
.rmap .route-motorcycle svg{width:40px;height:30px;display:block;overflow:visible}

/* v49: keep multiline quotes clear of the request button. */
.fee-bar .inner{align-items:center;gap:12px}.fee-bar .grow{min-width:0;flex:1;white-space:normal}.fee-bar .fee{white-space:normal;overflow-wrap:anywhere;line-height:1.4}.fee-bar .btn{min-width:104px;flex-shrink:0}
.deposit-action{flex-basis:100%;width:100%}.deposit-action small{display:block;margin-top:6px}.deposit-report{padding:8px;border:2px solid var(--orange,#ff9800);border-radius:8px}
.nearby-place{border-bottom:1px solid var(--line,#888);padding:12px 0}.nearby-place p{margin:5px 0}.nearby-place .row{flex-wrap:wrap;gap:10px}
#wantedDateTime{width:100%;min-width:0;max-width:100%}
.fee-bar .fee{word-break:keep-all;overflow-wrap:normal}
@media(max-width:480px){.fee-bar .inner{flex-wrap:wrap}.fee-bar .grow{flex-basis:100%}.fee-bar .btn{width:100%}}

/* 관리자 전화 접수: 메뉴 아래 전체 너비 */
.admin .phone-order { display:flex; width:100%; border-radius:999px; min-height:46px; margin:0 0 16px; font-size:16px; }
.admin .phone-order span { font-size:21px; line-height:1; }

/* Same readable progress and HH:mm stamps across all three apps. */
.order-progress {clear:both; width:100%; margin:14px 0;}
.order-progress .s {min-width:0;white-space:nowrap;}
.step-time {display:block;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sub);margin-top:3px;line-height:1.5;}
.order-progress .s.on .step-time {color:var(--text);}
.progress-cancel {color:var(--red);font-size:12px;text-align:right;margin:-6px 0 10px;}

.food-status{border:1px solid var(--memo-line);background:var(--memo-bg);border-radius:12px;padding:10px 12px;margin:10px 0;font-size:12px;line-height:1.6}.food-status p{margin:6px 0 0}.food-status details{margin-top:8px}.food-status summary{cursor:pointer;font-weight:700}

#payChips .payment-disabled { opacity:.45; cursor:not-allowed; filter:grayscale(1); }

.done-card>summary{cursor:pointer;padding:6px;line-height:1.8}.done-card>summary .muted{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.done-card[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}

/* Rider list background remains swipeable even when there are no orders. */
.rider-swipe-area{min-height:calc(100dvh - 220px)}


.riding-controls{position:absolute;z-index:150;top:6px;left:6px;right:6px;pointer-events:none;font-size:11px}.riding-controls>div{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:4px}.riding-controls .btn{pointer-events:auto;padding:5px 8px;min-height:30px;background:#fff;color:#142b49;border:1px solid #899bb1}.riding-controls .riding-status{display:block;width:fit-content;max-width:100%;padding:4px 7px;border-radius:5px;background:#ffffffed;color:#142b49}.riding-position{position:relative}.riding-heading{position:absolute;left:50%;top:-19px;margin-left:-7px;width:14px;text-align:center;font-size:18px;color:#1f6feb;text-shadow:0 0 3px #fff;transform-origin:7px 36px}

/* Compact current-location marker; only the inner arrow rotates. */
.rmap .route-location{box-sizing:border-box;width:28px;height:28px;padding:1px;border:2px solid #fff;border-radius:50%;background:#e8f2ff;box-shadow:0 0 0 1.5px #1675ee,0 2px 5px #1236;display:flex;align-items:center;justify-content:center}
.rmap .route-location:after,.rmap .route-location:before{display:none}
.rmap .route-location svg{display:block;width:22px;height:22px;transform-origin:50% 50%;overflow:visible}
.riding-position:not(.has-heading) .route-location svg{visibility:hidden}
.riding-position:not(.has-heading) .route-location{background:#1675ee}
.riding-vector{word-break:normal;overflow-wrap:normal}
.riding-vector .route-location{margin:0}
/* Rider's expanded active order: one information row and larger map. */
body.driver #tab-mine .info{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
body.driver #tab-mine .info>div{padding:6px 4px}
body.driver #tab-mine .info b{font-size:12px;line-height:1.4}
body.driver #tab-mine .info small{font-size:11px}
body.driver #tab-mine .rmap{height:clamp(280px,44dvh,360px)}
body.driver #tab-mine .nav-compact{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:6px}
body.driver #tab-mine .nav-compact .btn{min-width:0;min-height:44px;padding:9px 6px;font-size:13px;white-space:normal}
body.driver #tab-mine .nav-main small{display:block;font-size:11px;font-weight:400}
/* Match rider's four-column order information on customer and admin screens. */
body.customer .info,body.admin .info{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
body.customer .info>div,body.admin .info>div{padding:6px 4px}
body.customer .info b,body.admin .info b{font-size:12px;line-height:1.4}
body.customer .info small,body.admin .info small{font-size:11px}

/* Rider order contacts stay in one row, including an optional receiver. */
body.driver #tab-mine .rider-order-contacts { flex-wrap: nowrap; gap: 4px; }
body.driver #tab-mine .rider-order-contacts .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 7px 2px; font-size: 11px; gap: 2px; white-space: nowrap; }
body.driver #tab-mine .rider-order-contacts .btn svg { width: 12px; height: 12px; flex-shrink: 0; }
@media(max-width: 359px) { body.driver #tab-mine .rider-order-contacts .btn svg { display: none; } }

.activity-filters{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.activity-filters label{flex:1;min-width:85px}.activity-filters input,.activity-filters select{width:100%}#activityReport details{margin-top:12px}#activityReport summary{padding:12px;cursor:pointer;font-weight:700}#activityReport td{white-space:nowrap}

/* v124 임시 할증 안내 */
.temp-extra-card{background:#fff6dd;border:1px solid #f0c24b;color:#7a4b00;font-weight:700;font-size:14px;line-height:1.5}
html[data-skin="night"] .temp-extra-card{background:#3d3214;border-color:#8a6a1c;color:#ffd77a}
.customer-order summary .repeat-quick{margin-top:8px;padding:6px 12px;font-size:13px}
.temp-extra-state{margin:6px 0 10px;padding:10px 12px;border-radius:10px;background:var(--bg2,#f2f4f7);font-weight:800}
.temp-extra-state.on{background:#fff6dd;color:#7a4b00;border:1px solid #f0c24b}
html[data-skin="night"] .temp-extra-state.on{background:#3d3214;color:#ffd77a;border-color:#8a6a1c}
/* v125 휴대폰 화면(손님·기사): 메시지 알림창은 위쪽 가운데 (아래 요금바·메뉴와 겹치지 않게) */
body.customer .msg-pop,body.driver .msg-pop{top:calc(env(safe-area-inset-top,0px) + 12px);bottom:auto;right:auto;left:50%;transform:translateX(-50%);z-index:9000;box-shadow:0 12px 32px rgba(0,0,0,.28)}
/* 화면을 한 번 눌러야 소리·음성이 나오는 상태 안내 */
.tap-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:9001;border:0;border-radius:999px;padding:10px 16px;background:#1f2937;color:#fff;font-size:14px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:calc(100vw - 32px)}
/* 손님 내 주문: 펼치면 위쪽 요약(번호·상태·주소)은 숨기고 접기 표시만 남김 (상세에 같은 내용이 있어 중복 방지) */
.customer-order[open]>summary>:not(.fold-hint){display:none!important}
.customer .customer-order[open]>summary{padding:10px 20px 0;text-align:right}
/* v126 손님 휴대폰 알림 안내 */
.notify-card{border:1.5px solid #f59e0b;background:#fff8eb;margin-bottom:12px}
.notify-card>b{display:block;font-size:15px;margin-bottom:4px}
.notify-card p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#5b4a2a}
html[data-skin="night"] .notify-card{background:#3d3214;border-color:#8a6a1c}
html[data-skin="night"] .notify-card p{color:#f1dfb5}
.customer .customer-order[open]>.order-detail{cursor:pointer}
.customer .customer-order[open]>.order-detail :is(a,button,input,select,textarea,label,.btn){cursor:auto}
/* v130 아이폰 홈 화면 안내 */
.ios-home-card{border:1.5px solid #3b82f6;background:#eef5ff;margin-bottom:12px}
.ios-home-card>b{display:block;font-size:15px;margin-bottom:4px}
.ios-home-card p{margin:0 0 10px;font-size:13.5px;line-height:1.5}
.ios-home-card .row{display:flex;gap:8px}
html[data-skin="night"] .ios-home-card{background:#14243d;border-color:#2f5ea8}
.ios-steps{padding-left:20px;line-height:1.7}
.ios-steps li{margin-bottom:6px}
.ios-share{display:inline-block;border:1px solid currentColor;border-radius:4px;padding:0 4px;font-size:12px}
/* v131 손님 메모·단골 */
.cust-tag{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:800;vertical-align:1px;white-space:nowrap}
.cust-tag.reg{background:#e7f6ec;color:#11793a}
.cust-tag.vip{background:#fff3cc;color:#8a5a00}
.cust-tag.warn{background:#ffe3e3;color:#b42318}
.cust-tag.new{background:#e8f0ff;color:#2457c5}
.cust-memo{margin-top:6px;padding:7px 10px;border-radius:10px;background:#fff8e6;border:1px dashed #e7b84a;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-all}
.cust-memo.mini{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-skin="night"] .cust-memo{background:#33290f;border-color:#8a6a1c}
html[data-skin="night"] .cust-tag.reg{background:#123d24;color:#7be3a3}
html[data-skin="night"] .cust-tag.vip{background:#3d3214;color:#ffd77a}
html[data-skin="night"] .cust-tag.warn{background:#4a1a1a;color:#ff9b9b}
html[data-skin="night"] .cust-tag.new{background:#16284a;color:#9cc0ff}
/* v131 음식 나옴/안 나옴 */
.food-ready-choice{display:grid;gap:8px;margin:4px 0 8px}
.food-ready-choice label{display:flex;gap:10px;align-items:center;padding:12px;border:1.5px solid var(--line,#ddd);border-radius:12px;cursor:pointer}
.food-ready-choice label:has(input:checked){border-color:var(--brand,#e8590c);background:rgba(232,89,12,.08)}
.food-ready-choice input{width:auto;margin:0}
.food-ready-choice span{display:flex;flex-direction:column}
.food-ready-choice small{color:var(--muted,#888);font-size:12.5px}
.rider-food-done{display:inline-flex;align-items:center;padding:8px 12px;border-radius:10px;background:#e7f6ec;color:#11793a;font-weight:800}
html[data-skin="night"] .rider-food-done{background:#123d24;color:#7be3a3}
/* v132 첫 주문 할인 */
.disc-tag{display:block;font-size:11.5px;font-weight:700;color:#11793a;white-space:normal;line-height:1.3}
html[data-skin="night"] .disc-tag{color:#7be3a3}
/* v132 첫 주문 할인 */
.disc-tag{display:block;font-size:11.5px;font-weight:700;color:#11793a;white-space:normal;line-height:1.3}
html[data-skin="night"] .disc-tag{color:#7be3a3}
/* v133 거래처 */
.biz-card{border:1px solid var(--line,#e3e3e3);border-radius:14px;padding:12px;margin-top:12px}
.biz-card.off{opacity:.6}
.biz-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:16px}
.biz-bill{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:#e8f0ff;color:#2457c5}
.biz-bill.postpaid{background:#f3e8ff;color:#6b21a8}.biz-bill.off{background:#eee;color:#666}
.biz-nums{display:flex;gap:16px;margin:8px 0}.biz-nums div{display:flex;flex-direction:column}.biz-nums b{font-size:18px}
.biz-members{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.biz-mem{display:inline-flex;gap:4px;align-items:center;padding:4px 8px;border-radius:10px;background:var(--soft,#f4f5f7);font-size:13px}
.biz-actions{gap:6px;flex-wrap:wrap}
.biz-led{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line,#eee);font-size:13px}.biz-led small{grid-column:1/-1;color:var(--muted,#888)}
.biz-tag{display:block;font-size:11.5px;font-weight:700;color:#6b21a8}
.biz-pay-text{margin-top:6px;padding:8px 10px;border-radius:10px;background:#eef5ff;font-size:13.5px;line-height:1.5}
.biz-short{color:#b42318}
.biz-me{margin:10px 0;padding:10px;border-radius:10px;background:#eef5ff;font-size:13.5px}
html[data-skin="night"] .biz-pay-text,html[data-skin="night"] .biz-me{background:#14243d}
html[data-skin="night"] .biz-mem{background:#1f2937}
/* v134 출발·도착 바꾸기 · 거래처 주소 칩 · 거래처 요금표 */
.swap-row{display:flex;justify-content:center;margin:6px 0 2px}
.swap-btn{border:var(--border-w,1px) solid var(--line);background:var(--card);color:var(--brand);border-radius:999px;padding:6px 16px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.swap-btn:active{transform:scale(.97)}
.fav-chip.biz{color:#6b21a8;border-color:#c4b5fd;background:#f5f3ff}
html[data-skin="night"] .fav-chip.biz{background:#2e1065;color:#ddd6fe;border-color:#5b21b6}
.biz-extra{margin:6px 0;font-size:12.5px;line-height:1.55}
.biz-fare-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.biz-fare-grid input::placeholder{color:#9aa3af}
/* v135 거래처 월별 명세 · 청구서 */
.biz-unpaid b{color:#b42318}
.biz-stmt{max-width:640px}
.biz-month{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 10px;font-size:17px}
.biz-inv{margin:10px 0;padding:10px 12px;border-radius:12px;background:#eef5ff;font-size:14px;line-height:1.6}
.biz-inv.paid{background:#ecfdf3}
html[data-skin="night"] .biz-inv{background:#14243d}html[data-skin="night"] .biz-inv.paid{background:#0f2e1f}
.biz-olist{max-height:42vh;overflow:auto;border-top:1px solid var(--line,#eee)}
.biz-orow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line,#eee);font-size:13px}
.biz-orow small{grid-column:1/-1;color:var(--muted,#888)}
.biz-invs{margin:6px 0}
.print-sheet{display:none}
@media print{body>*:not(.print-sheet){display:none!important}.print-sheet{display:block!important;color:#000;background:#fff;font:12px/1.5 sans-serif;padding:0}
.print-sheet h1{text-align:center;font-size:24px;letter-spacing:8px;margin:0 0 14px}
.print-sheet table{width:100%;border-collapse:collapse}.print-sheet td,.print-sheet th{border:1px solid #999;padding:4px 6px;text-align:left;vertical-align:top}
.print-sheet th{background:#f2f2f2}.ps-head{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ps-list td.num{text-align:right;white-space:nowrap}.ps-list tfoot td{font-size:14px;text-align:right}
.ps-bank,.ps-paid{font-size:14px;margin-top:10px}.ps-foot{text-align:right;margin-top:18px}
@page{size:A4;margin:14mm}}
/* v136 거래명세서 */
.doc-modal{max-width:680px}
.doc-why{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#fff7e6;font-size:13px;line-height:1.55}
.doc-why ul{margin:6px 0 0;padding-left:18px}.doc-why li{margin:2px 0}
html[data-skin="night"] .doc-why{background:#2a2110}
.doc-paper{margin-top:10px;padding:14px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#111;font:12px/1.5 sans-serif;max-height:46vh;overflow:auto}
.doc-paper h1,.print-sheet h1{text-align:center;font-size:22px;letter-spacing:8px;margin:0 0 10px}
.doc-paper table{width:100%;border-collapse:collapse;margin-bottom:8px}.doc-paper td,.doc-paper th{border:1px solid #999;padding:4px 6px;text-align:left;vertical-align:top}
.doc-paper th{background:#f2f2f2}.doc-paper .ps-head{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.doc-paper td.num{text-align:right;white-space:nowrap}.doc-paper tfoot td{text-align:right;font-size:13px}
.ps-meta{display:flex;justify-content:space-between;font-size:11px;color:#555;margin-bottom:6px}
.ps-note{font-size:10.5px;line-height:1.5;color:#333;border-top:1px solid #ccc;padding-top:6px;margin-top:8px}.ps-note ol{margin:4px 0 0;padding-left:16px}
.doc-paper .ps-foot{text-align:right;margin-top:12px}
@media (max-width:520px){.doc-paper .ps-head{grid-template-columns:1fr}}
@media print{.print-sheet .ps-note{font-size:10.5px}}
/* v138 관리자 거래명세서 고치기 */
.doc-edit{margin:10px 0;padding:8px 10px;border:1px solid var(--line,#e4e7ec);border-radius:12px}
.doc-edit summary{cursor:pointer;font-weight:800}
.doc-line{display:grid;grid-template-columns:1fr 110px auto;gap:6px;margin-bottom:6px}
.doc-checks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13.5px}.doc-checks input{width:auto;margin-right:4px}
.ps-memo{font-size:12px;border:1px dashed #bbb;padding:6px 8px;border-radius:4px}
/* v139 명세서 발급 기록 */
.doc-logs{margin-top:10px;font-size:13px}.doc-logs summary{cursor:pointer;font-weight:700}
.doc-log{padding:6px 0;border-bottom:1px solid var(--line,#eee);font-size:13px;line-height:1.5}
/* v141 추천배차 */
.rec-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--card);border-bottom:var(--border-w,1px) solid var(--line);font-size:13.5px}
.rec-bar .rec-name{font-weight:800}.rec-bar .rec-name b{font-weight:800;color:var(--sub);margin-left:4px}
.rec-bar.on .rec-name b{color:#16a34a}
.rec-bar small{flex:1;color:var(--sub);text-align:right}
.dispatch-rider article.rec{border-color:#f59e0b;background:#fffbeb}
html[data-skin="night"] .dispatch-rider article.rec{background:#2a2110}
.rec-last{margin:4px 0;font-weight:800;color:#b45309}
.dispatch-rec small{display:block;margin:4px 0;color:#b45309;font-weight:700}
/* v145 기사 날짜별 수입 */
.daily-sum{font-size:13px;color:var(--sub);margin:0 2px 8px;line-height:1.5}.daily-sum b{color:var(--text)}
button.drow{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer;grid-template-columns:62px 1fr 40px auto;row-gap:2px}
button.drow:last-child{border-bottom:0}button.drow:active{background:var(--gray-bg)}
.drow .dd small{font-size:11px}.drow .dd.sun{color:#dc2626}.drow .dd.sat{color:#2563eb}
.drow .dsub{grid-column:2/-1;color:var(--sub);font-size:11.5px;text-align:right}
/* v146 급송 */
.badge.st-express{background:var(--yellow-bg);color:var(--yellow-fg);border:1px solid var(--yellow);font-weight:800}
.express-opt{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border:var(--border-w,1px) solid var(--line);border-radius:var(--radius);background:var(--card);cursor:pointer}
.express-opt input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--yellow)}
.express-opt span{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}.express-opt b{font-size:15px}.express-opt em{font-style:normal;font-weight:800;color:var(--yellow-fg)}
.express-opt small{flex-basis:100%;color:var(--sub);font-size:12.5px}
.express-opt.on{border-color:var(--yellow);background:var(--yellow-bg)}
.express-note{margin:6px 0;padding:6px 10px;border-radius:10px;background:var(--yellow-bg);color:var(--yellow-fg);font-size:12.5px;font-weight:600}
.order.oc.express{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow)}
/* v147 현장결제 결제 방법 · 물품 사진 · 자주 보내는 문구 */
.pay-choice{margin:8px 0;padding:10px 12px;border:var(--border-w,1px) solid var(--line);border-radius:var(--radius-sm);background:var(--card)}
.pay-choice .pc-lines{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:14px;font-variant-numeric:tabular-nums}
.pay-choice .pc-lines span{color:var(--sub)}.pay-choice .pc-lines b{text-align:right}
.pay-choice .pc-total{border-top:1px dashed var(--line);padding-top:5px;margin-top:2px;color:var(--text)!important;font-weight:800}
.pay-choice b.pc-total{font-size:16px;color:var(--brand)!important}
.pay-choice .pc-q{margin:10px 0 6px;font-weight:800}
.pay-choice .pc-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:6px}
.pay-choice .pc-btns .btn{min-width:0;width:100%;white-space:normal;word-break:keep-all;padding:10px 6px;font-size:14px;line-height:1.3}
.pay-choice .pc-chosen{margin:8px 0 6px;font-weight:700;font-size:13.5px}
.pay-choice .linkbtn{margin-left:6px;font-size:12.5px}
.item-photos{margin-top:10px}.ip-list{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.ip-item{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.ip-item img{width:100%;height:100%;object-fit:cover}
.ip-del{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:12px;cursor:pointer}
.chat-quick{display:flex;gap:6px;overflow-x:auto;padding:6px 10px 0;scrollbar-width:none}.chat-quick .chip{flex:0 0 auto;white-space:nowrap;font-size:12.5px}
/* v148 물건값 받음 */
.collect-btn{margin-top:8px}
.collect-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--green-bg);color:var(--green);font-weight:700;font-size:13.5px}
/* v150 휴대폰 본인인증 */
.idv-box{margin:8px 0 4px;padding:12px 14px;border-radius:12px;background:var(--green-bg);border:1px solid rgba(0,0,0,.06)}
.idv-box p{margin:6px 0 0;font-size:13.5px}
.idv-ok{display:flex;flex-direction:column;gap:2px;margin:8px 0 4px;padding:10px 12px;border-radius:12px;background:var(--green-bg);color:var(--green);font-weight:700;font-size:13.5px}
.idv-ok b{font-size:16px}.idv-ok .muted{font-weight:400}
.idv-note{margin:8px 0 4px;color:var(--green);font-size:13px;font-weight:700}
.idv-badge{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:8px;background:var(--green-bg);color:var(--green);font-size:11.5px;font-weight:700;vertical-align:middle}
#profileEditName[readonly],#profileEditPhone[readonly],#signupForm input.idv-locked,.idv-locked{opacity:.75}

/* v151: rider map preferences, collapsed until explicitly opened. */
.riding-controls .riding-map-settings[hidden]{display:none!important}
.riding-controls.map-view-controls{bottom:6px}
.riding-controls .riding-map-settings{position:absolute;z-index:1;top:0;left:0;pointer-events:auto;box-sizing:border-box;width:min(100%,320px);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid #9aaac0;border-radius:12px;background:#fff;color:#142b49;box-shadow:0 5px 20px #0003;font-size:13px}
.riding-map-settings .map-view-heading,.riding-map-settings .map-view-range-label,.riding-map-settings .map-view-anchor{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.riding-map-settings .map-view-modes,.riding-map-settings .map-view-presets{display:flex;gap:5px;margin-bottom:10px}
.riding-map-settings .map-view-modes .btn,.riding-map-settings .map-view-presets .btn{flex:1;min-width:0;white-space:nowrap}
.rmap .riding-controls .riding-map-settings .btn[aria-pressed=true]{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important}
.riding-map-settings .map-view-range{display:block;margin-top:8px}
.riding-map-settings output{float:right;font-weight:700}
.riding-map-settings input[type=range]{width:100%;padding:0;min-height:32px;accent-color:#2563eb;touch-action:pan-x}
.riding-map-settings .map-view-range-label,.riding-map-settings small{font-size:11px;line-height:1.5}
.riding-map-settings .map-view-presets .btn{padding:6px 3px}
.riding-map-settings .map-view-anchor .btn{flex:1}
[data-skin=night] .riding-controls .riding-map-settings{background:#192638;color:#edf3fc;border-color:#506079}

/* V282: two orders stay visually separate inside one offer. */
.bundle282-total{display:grid;grid-template-columns:1fr auto;gap:6px;padding:14px;background:var(--primary,#245cf2);color:#fff;border-radius:12px;margin:12px 0}.bundle282-total strong{font-size:1.4em}.bundle282-total small{grid-column:1/-1;color:#fff}.bundle282-order{border:2px solid var(--border,#cbd5e1);border-radius:12px;padding:12px;margin:12px 0;min-width:0}.bundle282-order>header{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}.bundle282-order>header>b{color:var(--primary,#245cf2)}.bundle282-order p{overflow-wrap:anywhere}.bundle282-order summary{padding:8px 0;cursor:pointer}.smart280 .hold233-head h2{font-size:clamp(18px,5vw,24px);overflow-wrap:anywhere}.smart280 .hold233-actions button{min-width:0;white-space:normal}