/* 오더라인 ORDERLINE — 차가운 회색 바탕 + 딥 네이비 하나, 구역 색 4개 */
:root{
  --bg:#F1F3F5; --surface:#FFFFFF; --sunk:#E7EBEF; --ink:#18212B; --muted:#5A6776; --line:#D6DCE3;
  --accent:#1E2B55; --accent-ink:#FFFFFF; --accent-soft:#E2E6F1; --danger:#B42318; --danger-soft:#FBE4E2;
  --cold:#1C5B89; --cold-soft:#E0EBF4;
  --ok:#23724A; --ok-soft:#DFEFE6; --warn:#946006; --warn-soft:#F6ECD6;
  --z0:#2257A0; --z1:#B0560A; --z2:#28774A; --z3:#68499A; --z4:#8A6A12; --z5:#3B7C86;
  --shadow:0 1px 2px rgba(24,33,43,.06),0 4px 14px rgba(24,33,43,.06);
  --f-brand:'Outfit','IBM Plex Sans KR','Malgun Gothic',sans-serif;
  --f-body:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161C; --surface:#19212A; --sunk:#222C37; --ink:#E5EAF0; --muted:#97A4B2; --line:#2C3743;
  --accent:#A9B9EC; --accent-ink:#0E1430; --accent-soft:#232C4A; --danger:#F07A6E; --danger-soft:#3A1F21;
  --cold:#78AEDC; --cold-soft:#1C2E3F;
  --ok:#5CC48C; --ok-soft:#173226; --warn:#E3B04F; --warn-soft:#352A14;
  --z0:#6E9EE0; --z1:#E59447; --z2:#5DBA85; --z3:#AA8FDB; --z4:#D9B44A; --z5:#6CC0CB;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 앱바 */
.appbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.appbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:10px 6px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand b{font-family:var(--f-brand);font-weight:700;font-size:21px;letter-spacing:.14em;color:var(--accent);white-space:nowrap}
.brand span{color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workdate{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.workdate input{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--surface);font-family:var(--f-num)}
.tabs{display:flex;gap:4px;overflow-x:auto;width:100%;scrollbar-width:none}
.tabs button{border:0;background:none;padding:7px 12px;border-radius:8px;font-weight:500;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.tabs small{display:block;font-size:11px;font-weight:400;opacity:.8}

.note{display:block;font-size:13px;color:var(--cold);background:var(--cold-soft);border-radius:8px;padding:8px 12px;margin:14px 0 0}
.note.warn{color:var(--warn);background:var(--warn-soft)}
.note .btn{margin-left:6px}
main .wrap{padding-block:0 calc(48px + env(safe-area-inset-bottom,0px))}
.view{display:grid;gap:16px;margin-top:16px}
h2{font-size:20px;margin:0;text-wrap:balance}
h3{margin:0;font-size:16px}
.sub{color:var(--muted);font-size:13px;margin:2px 0 0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spacer{flex:1}
.hint{font-size:13px;color:var(--muted)}

/* 숫자 카드 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.stat label{display:block;font-size:12px;color:var(--muted)}
.stat .num{font-size:21px;font-weight:600;overflow-wrap:anywhere}
.stat .num small{font-size:13px;font-weight:500;color:var(--muted);margin-left:2px}

.seg{display:inline-flex;background:var(--sunk);border-radius:9px;padding:3px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 14px;border-radius:7px;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;font-weight:500}
.btn:hover:not(:disabled){border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.small{padding:4px 10px;font-size:13px}

/* 배차판 */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;align-items:start}
.col{background:var(--sunk);border-radius:12px;padding:10px;display:grid;gap:8px;min-width:0}
.col-head{padding:4px 4px 6px;display:grid;gap:4px}
.col-head .t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.col-head .t b{font-size:18px}
.col-head .t span{font-size:13px;color:var(--muted)}
.col-head .m{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);align-items:center}
.col-head .m .num{color:var(--ink)}
.empty{font-size:13px;color:var(--muted);padding:14px;text-align:center;border:1px dashed var(--line);border-radius:10px}
.card{background:var(--surface);border-radius:10px;padding:10px 12px;display:grid;gap:6px;box-shadow:var(--shadow);border-left:4px solid var(--z,var(--line))}
.card.done{opacity:.62}
.card-top{display:flex;align-items:center;gap:8px;min-width:0}
.card-top strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.items{margin:0;font-size:13px;color:var(--muted)}
.memo{margin:0;font-size:12px;color:var(--warn)}
.card-foot{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.card-act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:6px;font-size:13px;color:var(--muted)}
.card-act select{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:2px 4px}
.card-act .push{margin-left:auto}
.zone{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:var(--z,var(--muted));color:var(--surface);font-weight:700;font-size:13px;white-space:nowrap}
.pill{font-size:12px;padding:2px 8px;border-radius:99px;white-space:nowrap;font-weight:500}
.pill.wait{background:var(--sunk);color:var(--muted)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--danger-soft);color:var(--danger)}
.pill.cold{background:var(--cold-soft);color:var(--cold)}

/* 주문 받기 */
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:14px;min-width:0}
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>.lab{font-size:13px;font-weight:600}
.field select,.field input,.field textarea{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface);width:100%;min-width:0}
.paste-box{min-height:170px;resize:vertical;line-height:1.6}
.lines{display:grid;gap:8px}
.line{display:grid;grid-template-columns:minmax(0,1fr) 100px 100px 36px;gap:8px;align-items:center}
.line select,.line input{border:1px solid var(--line);border-radius:8px;padding:9px 8px;background:var(--surface);width:100%;min-width:0}
.line .amt{text-align:right;font-size:14px}
.line .x{border:1px solid var(--line);background:var(--surface);border-radius:8px;height:40px}
.kg{position:relative}
.kg input{padding-right:30px!important;text-align:right}
.kg::after{content:"kg";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);pointer-events:none}
.total-line{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;font-weight:600}
.err{color:var(--danger);font-size:13px;margin:0}
.drafts{display:grid;gap:10px}
.draft{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:8px;border-left:4px solid var(--z,var(--line))}
.draft.bad{border-color:var(--warn);border-left-color:var(--warn)}
.draft select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface);min-width:0;max-width:100%}
.parsed{display:grid;gap:6px;font-size:14px}
.parsed>div{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1.2fr);gap:6px;align-items:baseline}
.parsed .src{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.parsed .arrow{color:var(--muted);text-align:center}
.parsed .note2{grid-column:1/-1;font-size:12px;color:var(--warn);margin-top:-4px}
.unk{font-size:13px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}

/* 휴대폰 화면 (PC에서는 폰 틀, 실제 폰에서는 꽉 차게) */
.phone-layout{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px;align-items:start}
.phone{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;width:100%}
.phone-top{background:var(--accent);color:var(--accent-ink);padding:14px 16px;display:grid;gap:8px}
.phone-top b{font-size:18px}
.phone-top .seg{background:rgba(0,0,0,.18)}
.phone-top .seg button{color:var(--accent-ink)}
.phone-top .seg button[aria-pressed="true"]{color:var(--ink)}
.phone-top.owner{background:var(--ink);color:var(--bg)}
.phone-top.owner span{font-size:12px;opacity:.8}
.phone-body{padding:12px;display:grid;gap:10px}
.why{display:grid;gap:12px;font-size:14px}
.why ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted)}
.why ul b{color:var(--ink)}

.stop{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:8px}
.stop.now{border:2px solid var(--accent)}
.stop.done{background:var(--sunk);border-color:transparent}
.stop-head{display:flex;gap:10px;align-items:center}
.seq{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);font-weight:700;font-size:14px;flex:none}
.stop.now .seq{background:var(--accent);color:var(--accent-ink)}
.stop-head strong{flex:1;min-width:0}
.arrows{display:flex;gap:4px}
.arrows button{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:34px;height:34px}
.dl{display:grid;gap:12px}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 66px;gap:6px;align-items:center;font-size:15px}
.dl-row small{display:block;color:var(--muted);font-size:12px}
.dl-row .qty{font-size:14px;color:var(--ink);font-weight:600}
.dl-row input{border:1px solid var(--line);border-radius:8px;padding:9px 8px;text-align:right;width:100%;background:var(--surface);font-size:16px}
.diff{display:block;font-size:12px;color:var(--danger);font-weight:600}
.chk{border:1px solid var(--line);background:var(--surface);border-radius:8px;height:44px;font-weight:600;font-size:14px}
.chk[aria-pressed="true"]{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.big{width:100%;padding:15px;font-size:17px;font-weight:700;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink)}
.big:disabled{background:var(--sunk);color:var(--muted);opacity:1}

.o-sec{display:grid;gap:8px}
.o-sec h4{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.big-prog{display:flex;align-items:baseline;gap:8px}
.big-prog .num{font-size:30px;font-weight:600}
.bar{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.carrow{display:grid;gap:4px;font-size:14px;padding:10px;border:1px solid var(--line);border-radius:10px}
.carrow .r{display:flex;justify-content:space-between;gap:8px}
.carrow small{color:var(--muted);font-size:12px}
.alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;font-size:14px;padding:10px;border-radius:10px;background:var(--danger-soft)}
.alert.w{background:var(--warn-soft)}
.alert.g{background:var(--ok-soft)}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mini div{background:var(--sunk);border-radius:10px;padding:8px;min-width:0}
.mini label{display:block;font-size:11px;color:var(--muted)}
.mini .num{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.feed{display:grid;gap:6px;font-size:13px}
.feed div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px}
.feed time{color:var(--muted)}

/* 표 */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px}
table.ledger{min-width:820px}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--sunk)}
td.r,th.r{text-align:right}
table.ledger td:nth-child(n+3):nth-child(-n+6),table.ledger th:nth-child(n+3):nth-child(-n+6){text-align:right}
tfoot td{font-weight:700;border-bottom:0}
td .link{border:0;background:none;padding:0;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-align:left}
.payrow td{background:var(--sunk)}
.payrow input,.payrow select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface)}
.payrow input{width:140px;text-align:right}

/* 설정 */
.set-grid{display:grid;gap:16px}
.set-sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px;min-width:0}
.set-sec .table-wrap{border-radius:8px}
.set-sec table{min-width:560px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.usage{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}
.usage b{font-family:var(--f-num)}

/* 창 */
.overlay{position:fixed;inset:0;background:rgba(10,14,18,.55);z-index:20;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal{background:var(--surface);border-radius:12px;max-width:760px;width:100%;max-height:100%;overflow:auto;padding:20px;display:grid;gap:12px}
.modal h3.slip-title{text-align:center;font-size:22px;letter-spacing:.3em}
.modal .who{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px}
.modal .who div{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.modal .who b{display:block;font-size:12px;color:var(--muted);font-weight:600}
.modal table{min-width:600px;font-size:13px}
.modal .sign{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.role-pick{display:grid;gap:10px}
.role-pick button{display:grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px}
.role-pick button b{font-size:17px}
.role-pick button span{font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:14px;z-index:30;max-width:calc(100% - 32px)}

/* 기사님 전용 모드: 탭 없이 기사 화면만 */
body.mode-driver .tabs,body.mode-driver .why,body.mode-driver #localNote{display:none}
body.mode-driver .phone-layout{grid-template-columns:minmax(0,520px);justify-content:center}

@media (max-width:900px){
  .order-layout,.phone-layout{grid-template-columns:1fr}
  .phone-layout .why{display:none}
}
@media (max-width:600px){
  .phone{border:0;border-radius:14px;box-shadow:none}
  .line{grid-template-columns:minmax(0,1fr) 92px 40px}
  .line .amt{display:none}
  .modal .who{grid-template-columns:1fr}
  .parsed>div{grid-template-columns:1fr}
  .parsed .arrow{display:none}
  .brand b{font-size:19px}
}
@media print{
  body{background:#fff;color:#000}
  .noprint,.overlay .noprint{display:none!important}
  .overlay{position:static;background:none;padding:0;display:block}
  .modal{max-height:none;overflow:visible;padding:0;box-shadow:none}
  .modal table{min-width:0}
}

/* 로그인 */
.login{display:grid;gap:14px;max-width:380px;margin:0 auto;width:100%}
.login-brand{display:flex;align-items:center;gap:12px;padding-bottom:4px}
.login-brand img{border-radius:12px;flex:none}
.login-brand b{display:block;font-family:var(--f-brand);font-weight:700;font-size:22px;letter-spacing:.14em;color:var(--accent)}
.login-brand span{display:block;font-size:13px;color:var(--muted)}
.login-tabs{display:grid;grid-template-columns:1fr 1fr}
.login .field input{font-size:17px;padding:11px 12px}
.login-go{width:100%;padding:13px;font-size:16px;font-weight:700;border-radius:10px}
.switch-view{margin-left:4px}
.for-co{display:flex;align-items:center;gap:12px;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.for-co img{border-radius:11px;flex:none}
.for-co b{display:block;font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.for-co span{display:block;font-size:13px;color:var(--muted);font-family:var(--f-brand);letter-spacing:.04em}
table.stock td,table.stock th{white-space:nowrap}
tr.row-crit td{background:var(--danger-soft)}