/* Withus phone C skin (40c confirmed design, 2026-10-12, room 10x).
   Source: 설계/_시안자료/ABC/4차_진짜화면/ws-phone.css. Only looks: colours, type, spacing, cards, tab bar.
   Loaded after app.css on phone.html when <body class="pc">. Text is dark grey or black, never blue. */
@font-face{font-family:"Inter Tight";font-weight:400;font-display:swap;src:url(/static/fonts/inter-tight-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:500;font-display:swap;src:url(/static/fonts/inter-tight-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:600;font-display:swap;src:url(/static/fonts/inter-tight-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:700;font-display:swap;src:url(/static/fonts/inter-tight-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url(/static/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(/static/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}

body.pc{
  --pc-font:"Inter Tight",Inter,"Segoe UI",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR",sans-serif;
  --pc-cream:#fefdf9; --pc-card:#fff; --pc-ink:#141816; --pc-ink-2:#565b58; --pc-ink-3:#6a6f6c; --pc-line:#e7e9e6;
  --pc-g:#03593e; --pc-g-soft:#e6f6ea; --pc-g-line:#8fcfa8;
  --pc-gray:#eff1f2; --pc-field:#f4f6f7; --pc-photo:#eceef0;
  --pc-red:#c4261b; --pc-red-soft:#feeeee; --pc-warn:#a34d00; --pc-warn-soft:#fff3e2; --pc-warn-line:#f0a24a;
  --pc-shadow:0 1px 2px rgba(20,32,26,.03),0 4px 14px rgba(20,32,26,.045);
  /* old names used by inline styles in the screens: point them at the C colours */
  --brand:#03593e; --ws-brand:#03593e; --ws-head:#03593e; --ws-brand-soft:#e6f6ea; --accent:#e6f6ea;
  --ws-bg:#fefdf9; --bg:#fefdf9; --ws-panel:#fff; --panel:#fff; --ws-ink:#141816; --ink:#141816;
  --ws-ink-2:#565b58; --muted:#565b58; --ws-line:#e7e9e6; --line:#e7e9e6;
  --ws-urgent:#c4261b; --ws-urgent-bg:#feeeee; --ws-urgent-badge:#feeeee; --danger:#c4261b;
  --ws-warn:#a34d00; --ws-warn-bg:#fff3e2; --warn:#a34d00; --warn-bg:#fff3e2;
  --ws-done:#03593e; --ws-done-bg:#e6f6ea;
  --ws-radius:16px; --ws-radius-sm:10px;
  margin:0; background:var(--pc-cream); color:var(--pc-ink); font-family:var(--pc-font); -webkit-font-smoothing:antialiased;
}
body.pc .phone{background:var(--pc-cream); font-family:var(--pc-font); font-size:16px; line-height:1.4; color:var(--pc-ink)}
body.pc .phone button, body.pc .phone input, body.pc .phone select, body.pc .phone textarea{font-family:var(--pc-font)}

/* head: cream, big green title, line art top right */
body.pc .phone .top{background:var(--pc-cream); color:var(--pc-ink); padding:14px 18px 12px 22px; min-height:104px; position:relative}
body.pc .phone .top:has(.pc-art){min-height:132px}
body.pc .phone .top > b{display:block; margin:0; font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.12; color:var(--pc-g);
  padding-right:96px; overflow-wrap:anywhere}
body.pc .phone .top > span{display:block; margin-top:5px; font-size:17px; font-weight:500; color:var(--pc-ink-2); padding-right:96px; line-height:1.35}
body.pc .phone .top .rolebar{display:inline-flex; align-items:center; gap:4px; min-height:44px; margin:-6px 0 0; padding:0 2px; border-radius:10px;
  background:none; color:var(--pc-g); font-size:15px; font-weight:600; text-decoration:none}
body.pc .phone .top .rolebar span{color:var(--pc-ink-2); font-weight:500; font-size:14px}
body.pc .phone .top .pc-art{position:absolute; right:16px; top:50px; width:76px; height:72px; pointer-events:none}
body.pc .phone .top .pc-art img{width:100%; height:100%; object-fit:contain; display:block}
body.pc .phone .top .langsw button{min-height:44px; min-width:40px}

/* body */
body.pc .phone .body{padding:4px 17px 18px; gap:14px}
body.pc .phone .body h1, body.pc .phone .body h2, body.pc .phone .body h3{color:var(--pc-ink); letter-spacing:-.01em}
body.pc .phone .muted{color:var(--pc-ink-2)}
body.pc .phone .small{font-size:14.5px}
body.pc .phone .item{background:var(--pc-card); color:var(--pc-ink); border:1px solid #f1f2ef; border-radius:16px; box-shadow:var(--pc-shadow);
  padding:14px 16px; font-size:16px}
body.pc .phone .item b{font-weight:600}
body.pc .phone .item .r{padding:3px 0}
body.pc .phone a.item{color:inherit}

/* buttons */
body.pc .phone button, body.pc .phone .btn{border-radius:10px; font-weight:500}
body.pc .phone .big{font-size:18px; font-weight:500; letter-spacing:-.01em; min-height:56px; border-radius:10px; border:0;
  background:var(--pc-g); color:#fff; box-shadow:0 2px 6px rgba(3,89,62,.18)}
body.pc .phone .big.ghost, body.pc .phone button.ghost{background:#fff; color:var(--pc-g); border:2px solid var(--pc-g-line); box-shadow:none}
body.pc .phone .big.danger, body.pc .phone button.danger{background:var(--pc-red-soft); color:var(--pc-red); border:0; box-shadow:none}
body.pc .phone button[disabled]{background:var(--pc-gray); color:var(--pc-ink-3); border-color:transparent; box-shadow:none}

/* boxes */
body.pc .phone .alert{background:var(--pc-warn-soft); border:1px solid #f8dcb4; border-radius:16px; box-shadow:inset 4px 0 0 var(--pc-warn-line); padding:14px 16px 14px 18px; color:var(--pc-ink)}
body.pc .phone .alert.warn b{color:var(--pc-warn)}
body.pc .phone .alert.info{background:var(--pc-gray); border-color:transparent; box-shadow:none}
body.pc .phone .okbox{background:var(--pc-g-soft); border:1px solid #d7eedd; border-radius:16px; box-shadow:none; padding:14px 16px; color:var(--pc-ink)}
body.pc .phone .err{background:var(--pc-red-soft); color:var(--pc-red); border-radius:14px}
body.pc .phone .msg{background:var(--pc-g-soft); color:var(--pc-g); border-radius:14px}

/* chips */
body.pc .phone .badge{display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:9px; font-size:15px; font-weight:500;
  background:var(--pc-g-soft); color:var(--pc-g); white-space:nowrap}
body.pc .phone .badge.ok{background:var(--pc-g-soft); color:var(--pc-g)}
body.pc .phone .badge.gray{background:var(--pc-gray); color:var(--pc-ink-2)}
body.pc .phone .badge.warn{background:var(--pc-warn-soft); color:var(--pc-warn)}
body.pc .phone .badge.danger{background:var(--pc-red-soft); color:var(--pc-red)}

/* fields */
body.pc .phone input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), body.pc .phone select, body.pc .phone textarea{
  border:1.5px solid var(--pc-line); border-radius:12px; background:#fff; min-height:48px; font-size:16px; color:var(--pc-ink)}
body.pc .phone input:focus, body.pc .phone select:focus, body.pc .phone textarea:focus{outline:2px solid var(--pc-g-line); outline-offset:0; border-color:var(--pc-g)}
body.pc .phone input[type=checkbox], body.pc .phone input[type=radio]{accent-color:var(--pc-g); width:22px; height:22px}

/* role cards (Today) */
body.pc .rolecard{background:#fff; border:1px solid #f1f2ef; border-radius:16px; box-shadow:var(--pc-shadow); padding:14px 16px; min-height:78px; color:var(--pc-ink)}
body.pc .rolecard.was{border:2px solid var(--pc-g-line); background:var(--pc-g-soft)}
body.pc .rolecard .ic{background:var(--pc-g-soft); color:var(--pc-g); border-radius:14px}
body.pc .rolecard .nm{font-size:19px; font-weight:600; letter-spacing:-.01em}
body.pc .rolecard .ds{font-size:14.5px; color:var(--pc-ink-2)}

/* tab bar: white, icon over word, the open tab sits in a light green circle */
body.pc .phone .nav{background:#fff; border-top:1px solid var(--pc-line); padding:6px 6px calc(8px + env(safe-area-inset-bottom)); gap:2px; min-height:76px; z-index:5}
body.pc .phone .nav a{flex-direction:column; gap:3px; min-height:62px; font-size:13px; color:var(--pc-ink-2); border-radius:12px; background:none; font-weight:500}
body.pc .phone .nav a .ic{display:grid; place-items:center; width:46px; height:46px; border-radius:50%}
body.pc .phone .nav a svg{width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
body.pc .phone .nav a.active{background:none; color:var(--pc-g); font-weight:600}
body.pc .phone .nav a.active .ic{background:var(--pc-g-soft)}

/* small links (Back, Sign out ...): 44px tall to tap, still look small */
body.pc .phone a.small.muted, body.pc .phone a.pc-back{display:inline-flex !important; align-items:center; justify-content:center; min-height:44px; text-decoration:none !important;
  color:var(--pc-g) !important; font-weight:600; font-size:15px}
body.pc .phone .popup{background:#fff; border:1px solid #f1f2ef; border-radius:16px; box-shadow:var(--pc-shadow); padding:16px 18px; margin:0}
body.pc .phone .pc-sec{margin:4px 2px -4px; font-size:16px; font-weight:600; color:var(--pc-ink)}

/* one product line: photo | name + qty | buttons in one fixed column (g10c: buttons stay in the same column on every line) */
body.pc .pc-line{display:grid; grid-template-columns:74px minmax(0,1fr) 104px; gap:12px; align-items:center}
body.pc .pc-line.nobtn{grid-template-columns:74px minmax(0,1fr) auto}
body.pc .pc-ph{width:74px; height:74px; border-radius:10px; background:var(--pc-photo); object-fit:contain; display:block}
body.pc .pc-nm{font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.25; overflow-wrap:anywhere}
body.pc .pc-ko{font-size:15px; color:var(--pc-ink-2); margin-top:2px}
body.pc .pc-q{display:inline-flex; align-items:stretch; margin-top:8px; height:40px; border:1.5px solid var(--pc-line); border-radius:9px; overflow:hidden; background:#fff}
body.pc .pc-q b{display:grid; place-items:center; min-width:46px; padding:0 8px; font-size:18px; font-weight:600}
body.pc .pc-q span{display:grid; place-items:center; padding:0 12px; border-left:1.5px solid var(--pc-line); font-size:15px; color:var(--pc-ink-2)}
body.pc .pc-btncol{display:grid; gap:8px}
body.pc .pc-btncol form{margin:0}
body.pc .pc-btncol .b{display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:0 6px; border-radius:9px; border:0;
  font:500 16px var(--pc-font); text-align:center; text-decoration:none; box-shadow:none; overflow-wrap:anywhere; line-height:1.15}
body.pc .pc-btncol .ok{background:var(--pc-g-soft); color:var(--pc-g)}
body.pc .pc-btncol .ok.on{background:var(--pc-g); color:#fff}
body.pc .pc-btncol .no{background:var(--pc-red-soft); color:var(--pc-red)}
body.pc .pc-btncol .no.on{background:var(--pc-red); color:#fff}
body.pc .phone .item.pc-done{background:#f6fbf7; border-color:#d7eedd}
body.pc .phone .item.pc-bad{background:var(--pc-red-soft); border-color:#f9d3d0}

/* choice list (What is wrong?) */
body.pc .pc-choice{display:flex !important; align-items:center; gap:14px; width:100%; min-height:64px; padding:12px 16px !important; margin:0 !important;
  background:#fff !important; border:1px solid #eceeeb !important; border-radius:14px !important; box-shadow:var(--pc-shadow) !important;
  color:var(--pc-ink) !important; text-align:left !important; text-decoration:none; font-weight:400}
body.pc .pc-choice::before{content:""; flex:none; width:26px; height:26px; border-radius:50%; border:2px solid #9aa09d; background:#fff}
body.pc .pc-choice b{display:block; font-size:17px; font-weight:600}
body.pc .pc-choice .small{display:block; margin-top:2px}
body.pc .pc-big2{font-size:18px; font-weight:600}

/* pack screens (g07c, g08c, g09c) */
body.pc .phone a.big{text-decoration:none}
body.pc .phone .big.pc-a, body.pc .phone a.big.pc-gray, body.pc .phone a.big.pc-line-btn, body.pc .phone .big.pc-off{display:flex; align-items:center; justify-content:center; text-align:center}
body.pc .phone .big.pc-gray{background:var(--pc-gray); color:var(--pc-ink); border:0; box-shadow:none; font-weight:600}
body.pc .phone .big.pc-off{background:var(--pc-gray); color:var(--pc-ink-3); box-shadow:none}
body.pc .phone .big.pc-line-btn{background:#fff; color:var(--pc-ink); border:1.5px solid var(--pc-line); box-shadow:none}
body.pc .phone .big.danger.pc-a{background:var(--pc-red-soft); color:var(--pc-red)}
body.pc .pc-stack{display:flex; flex-direction:column; gap:12px}
body.pc .pc-stack form{margin:0}
body.pc .pc-photo{display:flex; justify-content:center; align-items:center; background:var(--pc-photo); border-radius:14px; min-height:200px; padding:12px}
body.pc .pc-photo .pc-ph, body.pc .pc-photo img{background:transparent !important; border:0 !important}
body.pc .pc-q.pc-qbig{height:60px; width:100%; margin:0}
body.pc .pc-q.pc-qbig b{flex:1; font-size:26px; font-weight:500}
body.pc .pc-q.pc-qbig span{width:40%; background:var(--pc-field); font-size:20px; color:var(--pc-ink)}
body.pc .pc-tick{display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 14px; margin:10px 0; background:#fff; border:1px solid #eceeeb; border-radius:14px; font-size:17px}
body.pc .pc-tick::before{content:""; flex:none; width:34px; height:34px; border-radius:9px; background:var(--pc-g-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303593e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/20px no-repeat}
body.pc .phone .item.pc-warn{background:var(--pc-warn-soft); border-color:#f8dcb4}
body.pc .pc-done-box{display:flex; align-items:center; gap:14px; font-size:19px; font-weight:600; color:var(--pc-g)}
body.pc .pc-okdot{flex:none; width:40px; height:40px; border-radius:50%; background:var(--pc-g); display:grid; place-items:center}
body.pc .pc-okdot svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round}
body.pc .phone input.pc-bignum{font-size:34px !important; text-align:center; min-height:76px !important; background:var(--pc-field) !important; border-color:var(--pc-line) !important}

/* stop / route rows with ring numbers (g07c) */
body.pc .phone .item.pc-stop{display:flex; align-items:center; gap:14px; min-height:84px}
body.pc .pc-stop .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
body.pc .pc-stop .tx b{font-size:17px; font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere}
body.pc .pc-stop .tx b.pc-rt{font-size:23px}
body.pc .pc-stop .rt{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
body.pc .phone .item.pc-cur{background:var(--pc-g-soft); border-color:#d7eedd}
body.pc .pc-ring{flex:none; position:relative; width:50px; height:50px; display:grid; place-items:center; font-size:22px; font-weight:600; color:var(--pc-ink)}
body.pc .pc-ring > svg{position:absolute; inset:0; width:100%; height:100%}
body.pc .pc-ring > span{position:relative}
body.pc .pc-ring.done{color:var(--pc-g)}
body.pc .pc-ring.next{background:#fff; border-radius:50%}
body.pc .pc-ring.locked{background:#eef0ef; border:1px solid #e2e5e3; border-radius:50%}
body.pc .pc-ring.locked > svg{position:static; width:24px; height:24px; fill:none; stroke:var(--pc-ink-2); stroke-width:2}
body.pc .pc-lock{width:24px; height:24px; fill:none; stroke:var(--pc-ink-2); stroke-width:2; flex:none}
body.pc .pc-link{display:inline-flex; align-items:center; min-height:44px; color:var(--pc-g); font-weight:600; font-size:15px; text-decoration:none}
body.pc .pc-note{background:var(--pc-gray); border-radius:14px; padding:14px 18px; font-size:16px; color:var(--pc-ink-2); line-height:1.45}
body.pc .phone a.small.muted[style*="display:block"]{display:flex !important}
body.pc .phone input[type=file]::file-selector-button{font:500 15px var(--pc-font); border:0; border-radius:8px; background:var(--pc-g-soft); color:var(--pc-g); padding:10px 14px; margin-right:10px}

/* old shared parts (design.css ws-*) in the C look: receiving (g12d), market (g12c) */
body.pc .phone .ws-btn{border-radius:10px; font-weight:500; font-family:var(--pc-font); background:var(--pc-g); border:0; color:#fff; box-shadow:0 2px 6px rgba(3,89,62,.18); text-decoration:none}
body.pc .phone .ws-btn.big{min-height:56px; font-size:18px}
body.pc .phone .ws-btn.ghost{background:#fff; color:var(--pc-ink); border:1.5px solid var(--pc-line); box-shadow:none}
body.pc .phone .ws-btn.danger{background:var(--pc-red-soft); color:var(--pc-red); border:0; box-shadow:none}
body.pc .phone .ws-btn.rcv-draft{background:#fff; color:var(--pc-ink); border:1.5px solid var(--pc-line); box-shadow:none}
body.pc .phone .ws-tabs > *{min-height:48px; border-radius:10px; font-size:16px; background:#fff; border:1.5px solid var(--pc-line); color:var(--pc-ink); text-decoration:none; padding:0 14px}
body.pc .phone .ws-tabs > .on{background:var(--pc-g); border-color:var(--pc-g); color:#fff; font-weight:600}
body.pc .phone .rcv-tabs > .done{background:var(--pc-g-soft); border-color:transparent; color:var(--pc-g)}
body.pc .phone .rcv-tabs > .add{color:var(--pc-ink)}
body.pc .phone .rcv-warnrow{background:var(--pc-red-soft); border-color:#f9d3d0; box-shadow:none}
body.pc .phone .rcv-warnrow .w{color:var(--pc-red)}
body.pc .phone .rcv-donerow{background:#f6fbf7; border-color:#d7eedd}
body.pc .phone .rcv-photo .ws-btn{background:var(--pc-field); color:var(--pc-ink-2); border:1.5px dashed #cfd4d1; box-shadow:none; min-height:56px; flex:1}
body.pc .phone .rcv-finish{border-top:1px solid var(--pc-line); margin-top:4px; padding-top:14px}
body.pc .phone .ws-badge{border-radius:8px; font-weight:500}
body.pc .phone .tabs{gap:8px}
body.pc .phone .tab, body.pc .phone .tabs > a{min-height:44px; border-radius:10px; font-size:15.5px; border:1.5px solid var(--pc-line); background:#fff; color:var(--pc-ink)}
body.pc .phone .tab.active{background:var(--pc-g); border-color:var(--pc-g); color:#fff}

/* receiving (g12d, 40d fixed version: nothing hidden under the tab bar, tighter rows) */
body.pc .phone .rcv-tabs > *{flex:0 1 auto; min-width:96px; padding:0 16px}
body.pc .pc-note.pc-i{display:flex; gap:12px; align-items:center; padding:10px 14px}
body.pc .pc-note.pc-i i{flex:none; width:26px; height:26px; border-radius:50%; background:#3d4340; color:#fff; font:700 15px/26px var(--pc-font); text-align:center; font-style:normal}
body.pc .phone .rcv-line{padding:12px 14px}
body.pc .phone .rcv-line .pc-nm{display:inline-block; margin-bottom:2px}
body.pc .phone .rcv-line label.small b{font-weight:500; color:var(--pc-ink-2)}
body.pc .phone .rcv-line input{min-height:44px !important}
body.pc .phone .rcv-allin{display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:8px; border-radius:10px; background:var(--pc-g-soft); color:var(--pc-g); font-weight:500}
body.pc .phone .rcv-savegrp{display:grid; grid-template-columns:1.4fr 1fr; gap:10px}
body.pc .phone .rcv-savegrp > .small{grid-column:1 / -1}
body.pc .phone .rcv-savegrp .ws-btn{min-height:52px}
body.pc .phone .rcv-finish .ws-btn.ghost{background:var(--pc-gray); border:0; color:var(--pc-ink)}

/* stock count (g12c 3): one joined stepper - | count | + */
body.pc .phone .pc-step{gap:0 !important; border:1.5px solid var(--pc-line); border-radius:10px; overflow:hidden; background:#fff; max-width:260px; padding:0}
body.pc .phone .pc-step .ws-btn{flex:none; width:56px; min-height:52px; border:0; border-radius:0; background:var(--pc-field); color:var(--pc-g); font-size:24px; box-shadow:none}
body.pc .phone .pc-step input{border:0 !important; border-left:1.5px solid var(--pc-line) !important; border-right:1.5px solid var(--pc-line) !important; border-radius:0 !important; min-height:52px !important; font-size:20px !important; font-weight:600}

/* 40d 대조 (17:46) fixes */
body.pc .pc-numwrap{display:flex; align-items:stretch; width:100%; height:64px; border:1.5px solid var(--pc-line); border-radius:12px; overflow:hidden; background:#fff}
body.pc .pc-numwrap button{flex:none; width:72px; min-height:0; border:0; border-radius:0; background:var(--pc-field); color:var(--pc-ink); font:400 30px var(--pc-font); box-shadow:none; padding:0}
body.pc .pc-numwrap input{flex:1; min-width:0; border:0 !important; border-left:1.5px solid var(--pc-line) !important; border-right:1.5px solid var(--pc-line) !important; border-radius:0 !important;
  margin:0 !important; height:100%; min-height:0 !important; background:#fff !important; text-align:center; font-size:28px !important; -moz-appearance:textfield}
body.pc .pc-numwrap input::-webkit-outer-spin-button, body.pc .pc-numwrap input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
body.pc .pc-filebox{position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px; width:100%; margin-top:6px; padding:10px;
  border:1.5px dashed #c9cecb; border-radius:12px; background:var(--pc-field); color:var(--pc-ink-2); font-size:16px; cursor:pointer; overflow:hidden}
body.pc .pc-filebox svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none}
body.pc .pc-filebox input[type=file]{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer}
body.pc .pc-filebox.on{border-style:solid; border-color:var(--pc-g-line); background:var(--pc-g-soft); color:var(--pc-g)}
body.pc .pc-file{display:flex; flex-direction:column; gap:4px; text-align:center}
body.pc .pc-search{display:flex; align-items:center; gap:10px; min-height:56px; padding:0 16px; background:#fff; border:1.5px solid var(--pc-line); border-radius:12px}
body.pc .pc-search svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--pc-ink-2); stroke-width:1.8}
body.pc .phone .pc-search input{flex:1; border:0 !important; min-height:52px !important; padding:0 !important; background:transparent !important; outline:none}
body.pc .pc-sr{position:absolute !important; width:1px; height:1px; padding:0 !important; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0 !important; min-height:0 !important}
body.pc .phone .item.pc-shop{display:flex; gap:14px; align-items:flex-start}
body.pc .pc-shop .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
body.pc .pc-shop .tx b{font-size:17px; font-weight:600}
body.pc .pc-shop .bt{display:flex; justify-content:flex-end; margin-top:6px}
body.pc .pc-go{display:inline-flex; align-items:center; min-height:48px; padding:0 18px; border-radius:10px; background:var(--pc-g-soft); color:var(--pc-g); font-size:18px; font-weight:500}
body.pc .phone .item.pc-sub{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
body.pc .pc-sub .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
body.pc .pc-sub .tx b{font-size:17px; font-weight:600}
body.pc .pc-sub .stk{flex:none; display:flex; flex-direction:column; align-items:flex-end}
body.pc .pc-sub .stk{font-size:17px; font-weight:600; color:var(--pc-ink); white-space:nowrap}
body.pc .pc-sub .pick{position:relative; display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:8px; border-radius:10px; background:var(--pc-g-soft); color:var(--pc-g); font-size:18px; font-weight:500}
body.pc .pc-sub .pick input{position:absolute; inset:0; opacity:0; width:100% !important; height:100% !important; margin:0; cursor:pointer}
body.pc .pc-sub:has(input:checked){border:2px solid var(--pc-g-line)}
body.pc .pc-sub:has(input:checked) .pick{background:var(--pc-g); color:#fff}
body.pc .pc-calc{min-height:0; margin:8px 0; font-size:19px; font-weight:500; color:var(--pc-red)}
body.pc .pc-calc:not(:empty){padding:14px 16px; border-radius:12px; background:var(--pc-red-soft)}
body.pc .pc-redbox{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; background:var(--pc-red-soft); color:var(--pc-red); font-size:18px}
body.pc .pc-redbox i{flex:none; width:34px; height:34px; border-radius:50%; background:#e0261d; color:#fff; font:700 20px/34px var(--pc-font); text-align:center; font-style:normal}
body.pc .pc-redbox b{font-weight:500}

/* phone Office (g02c, g14m) */
body.pc .phone .ochips a{border-radius:999px; border:0; background:var(--pc-gray); color:var(--pc-ink); font-size:15.5px; font-weight:500; min-height:44px}
body.pc .phone .ochips a.on{background:var(--pc-g); color:#fff}
body.pc .phone .ochips a i{background:#e0261d; color:#fff; border-radius:999px; min-width:22px; text-align:center}
body.pc .phone .ochips a.on i{background:rgba(255,255,255,.22)}
body.pc .phone .oml .fr{font-weight:600; font-size:17px}
body.pc .phone .oml .sj{font-size:16px}
body.pc .phone .oml .cg{display:inline-flex; align-items:center; min-height:26px; padding:0 10px; margin-top:6px; border-radius:7px; background:var(--pc-g-soft); color:var(--pc-g); font-size:13.5px}
body.pc .phone .onav a{font-size:12.5px}

/* stock count progress (40d check 2, g12c 2) */
body.pc .pc-ph.sm{width:58px; height:58px; flex:none}
body.pc .pc-prog{display:flex; flex-direction:column; gap:8px; font-size:16px; font-weight:600; color:var(--pc-ink)}
body.pc .pc-prog i{display:block; height:10px; border-radius:99px; background:#e6e9e7; overflow:hidden}
body.pc .pc-prog b{display:block; height:100%; width:0; background:var(--pc-g); border-radius:99px}
body.pc .pc-steprow{display:flex; align-items:center; gap:12px; margin-top:8px}
body.pc .pc-steprow .pc-step{flex:1}
/* driver (g06c, g11c 3): warning cards as soft orange with a left bar, like the design */
body.pc .phone .item.pc-warncard{border:1px solid #f8dcb4 !important; box-shadow:inset 4px 0 0 var(--pc-warn-line), var(--pc-shadow)}
body.pc .phone .item.pc-warncard b{color:var(--pc-warn)}
/* signature pad (g06c 2): grey box like the design */
body.pc .phone canvas#sig{background:var(--pc-field) !important; border:1.5px dashed #c9cecb !important; border-radius:12px !important}
/* packer substitute (g08c 3): no product photo or qty here, title "Substitute / for ...", hint line, grey note, big confirm */
body.pc .pc-subv{display:flex; flex-direction:column; gap:12px}
body.pc .pc-subv .pc-subhint{font-size:17px; font-weight:600; color:var(--pc-ink); letter-spacing:-.02em; padding:2px 2px 0}
body.pc .pc-subv .item.pc-sub{margin:0}
body.pc .pc-subv .pc-note{margin:10px 0 0 !important}
body.pc .pc-subv button.big{min-height:57px !important; margin-top:14px; font-size:19px}
body.pc .pc-subv form{display:flex; flex-direction:column; gap:12px; margin:0}
/* office mail (g14m): tag colour by kind, the rest stay green */
body.pc .phone .oml .cg.k-supinv{background:#f1ecfb; color:#5b3fa6}
body.pc .phone .oml .cg.k-orders{background:#fde5df; color:#b4401c}
body.pc .phone .oml .cg.k-pay{background:#e1f2e6; color:#17603c}
body.pc .phone .oml .cg.k-customs{background:#e2edfb; color:#2c4f8a}
/* packer lines in a shop (x04): count tiles, line cards with qty and unit pills, Finish fixed above the tabs */
body.pc .pc-pk{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
body.pc .pc-pk.four{grid-template-columns:repeat(4,1fr)}
body.pc .pc-pk span{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:14px; min-height:88px; font-size:15px; color:#3e4441; text-align:center}
body.pc .pc-pk b{font-size:34px; font-weight:700; line-height:1; letter-spacing:-.03em}
body.pc .pc-pk .g{background:#e9f7ee} body.pc .pc-pk .g b{color:#0b5a3c}
body.pc .pc-pk .r{background:#fdeaea} body.pc .pc-pk .r b{color:#c4161c}
body.pc .pc-pk .w{background:var(--pc-warn-soft)} body.pc .pc-pk .w b{color:var(--pc-warn)}
body.pc .pc-pk .y{background:#fdf3dc} body.pc .pc-pk .y b{color:#b9790a}
body.pc .phone a.item.pc-pl{display:flex; align-items:center; gap:15px; padding:8px 12px; min-height:80px; text-decoration:none; color:inherit}
body.pc .pc-pl .ph{flex:none; width:62px; height:62px; border-radius:8px; background:#eef0f1; display:grid; place-items:center; object-fit:contain}
body.pc .pc-pl img.ph{background:#fff; border:1px solid #e5e7eb}
body.pc .pc-pl .ph svg{width:24px; height:24px; fill:none; stroke:#4c514e; stroke-width:1.6}
body.pc .pc-pl .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.22; padding:3px 0}
body.pc .pc-pl .tx b{font-size:16.5px; font-weight:600; overflow-wrap:anywhere}
body.pc .pc-pl .tx small{font-size:13.5px; color:var(--pc-ink-2)}
body.pc .pc-pl .q{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:4px}
body.pc .pc-pl .q i{font-style:normal; height:26px; min-width:36px; padding:0 8px; box-sizing:border-box; border-radius:6px; background:#eef0f1; display:grid; place-items:center; font-size:15px; font-weight:600}
body.pc .pc-pl .q i.u{min-width:52px; color:#5f6461; font-size:13.5px; font-weight:500; background:#f3f4f4; text-transform:uppercase}
body.pc .pc-pl .q .badge{height:26px; display:inline-flex; align-items:center}
body.pc .pc-pl .chev{flex:none; width:20px; height:20px; fill:none; stroke:var(--pc-ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
body.pc .pc-foot{position:sticky; bottom:calc(var(--pc-navh, 76px) + env(safe-area-inset-bottom)); z-index:4; margin:4px -17px 0; padding:8px 17px 10px; background:var(--pc-cream)}
/* driver at the stop (x05): choice rows (circle + chevron) in a card, big Delivered button */
body.pc .phone .item.pc-rads{padding:0 16px}
body.pc .pc-rads .rd{display:flex; align-items:center; gap:18px; min-height:54px; font-size:17px; color:var(--pc-ink); text-decoration:none; border-bottom:1px solid #eef0ee}
body.pc .pc-rads .rd:last-child{border-bottom:0}
body.pc .pc-rads .rd i{flex:none; width:22px; height:22px; border-radius:50%; border:1.6px solid #5c615e; box-sizing:border-box}
body.pc .pc-rads .chev{margin-left:auto; width:20px; height:20px; flex:none; fill:none; stroke:var(--pc-ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
body.pc .phone a.big.pc-fin{display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; min-height:57px; font-size:19px; border-radius:12px; margin-top:8px}
/* warehouse Check delivery (g12d, 40d block): pallet line, expected pallets stepper, photo row, line card grid, dim Finish */
body.pc .phone .rcv-pt{display:flex; align-items:baseline; justify-content:space-between; margin:4px 4px 0}
body.pc .phone .rcv-pt b{font-size:17px; font-weight:700; color:var(--pc-g)}
body.pc .phone .rcv-pt > span{font-size:14px; color:var(--pc-ink-2)}
body.pc .phone .rcv-exp{display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--pc-ink)}
body.pc .phone .rcv-exp .pc-numwrap{width:170px; height:48px; border-radius:10px}
body.pc .phone .rcv-exp .pc-numwrap button{width:52px; font-size:24px}
body.pc .phone .rcv-exp .pc-numwrap input{font-size:20px !important; min-height:0 !important}
body.pc .phone .rcv-phrow{display:grid; grid-template-columns:1fr 1.4fr; align-items:center; gap:10px; padding:0 4px}
body.pc .phone .rcv-phrow > b{font-weight:500; font-size:15px}
body.pc .phone .rcv-phrow > .small{grid-column:1 / -1; order:3}
body.pc .phone .rcv-phrow .rcv-photo .ws-btn{min-height:48px}
body.pc .phone .rcv-phrow .pc-filebox{min-height:52px}
body.pc .phone .rcv-top{display:flex; gap:12px; align-items:flex-start}
body.pc .phone .rcv-top .ph{flex:none; width:64px; height:64px; border-radius:8px; background:var(--pc-photo)}
body.pc .phone .rcv-line input::placeholder{color:#a4a9a6; font-weight:500}
body.pc .phone .rcv-line input{color:var(--pc-ink); font-weight:600}
body.pc .phone .rcv-finish .rcv-off{display:flex; align-items:center; justify-content:center; background:#e9ecea; color:#6a6f6c; box-shadow:none; cursor:default}
body.pc .phone .rcv-grid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; margin-top:8px; align-items:start}
body.pc .phone .rcv-qd{display:flex; flex-direction:column; gap:6px}
body.pc .phone .rcv-qd label{display:grid; grid-template-columns:92px 84px; align-items:center; gap:6px}
body.pc .phone .rcv-qd input{width:84px; text-align:center; padding:0 4px}
body.pc .phone .rcv-ex label{display:flex; flex-direction:column; gap:4px}
body.pc .phone .rcv-ex input{width:100%; min-width:0; box-sizing:border-box; font-size:14px !important; padding:0 6px}
body.pc .phone .rcv-ex label b{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* staff phone sign in (n01): real logo row with EN / KO chips, big green title, job tiles with round icons, name rows, PIN pad */
body.pc .phone .top.pc-pinhead{min-height:0; padding:16px 18px 4px 22px; display:flex; align-items:center}
body.pc .phone .top.pc-pinhead > b{padding:0; margin:0}
body.pc .phone .top.pc-pinhead > span:empty{display:none}
body.pc .phone .pc-pinlogo{display:block; height:34px; width:auto}
body.pc .phone .top.pc-pinhead > div[style*="absolute"]{top:50% !important; transform:translateY(-50%); right:16px !important}
body.pc .phone .langsw .pc-lchip{min-width:44px !important; min-height:44px !important; padding:0 !important; border-radius:99px !important; border:1.5px solid var(--pc-line) !important;
  background:#fff !important; color:var(--pc-ink-2) !important; font:600 14px var(--pc-font) !important; opacity:1 !important; margin-left:4px}
body.pc .phone .langsw .pc-lchip.on{background:var(--pc-g-soft) !important; border-color:transparent !important; color:var(--pc-g) !important}
body.pc .phone .pin-h{font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.12; color:var(--pc-g); margin-top:4px}
body.pc .phone .pin-s{font-size:16px; color:var(--pc-ink-2); margin-top:-8px; line-height:1.4}
body.pc .phone .pin-roles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px}
body.pc .phone .pin-roles a.item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:112px; margin:0;
  text-decoration:none; color:var(--pc-ink); font-size:18px; font-weight:500; text-align:center}
body.pc .phone .pin-ic{display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--pc-g-soft)}
body.pc .phone .pin-ic .ic svg{width:24px; height:24px; fill:none; stroke:var(--pc-g); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
body.pc .phone .item.pin-who{display:flex; align-items:center; gap:14px; min-height:68px; text-decoration:none; color:var(--pc-ink); padding:10px 16px}
body.pc .phone .pin-av{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--pc-g-soft); color:var(--pc-g); font-weight:700; font-size:17px}
body.pc .phone .pin-who .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
body.pc .phone .pin-who .tx b{font-size:17px; font-weight:600}
body.pc .phone .pin-who .go{font-size:22px; color:var(--pc-ink-2)}
body.pc .phone #findform input#q{border:2px solid var(--pc-g) !important; border-radius:12px !important; min-height:56px !important}
body.pc .phone #dots .dot{width:16px; height:16px; border-radius:99px; border:2px solid var(--pc-g); box-sizing:border-box}
body.pc .phone #pad .key{min-height:56px; font-size:22px; font-weight:500; background:#fff; color:var(--pc-ink); border:1px solid var(--pc-line); border-radius:10px; box-shadow:none}
body.pc .phone .top.pc-pinhead .pc-art{display:none}
/* unit colour (decision 25: BOX green, EACH yellow, anything else black) on packer and double check lines */
body.pc .pc-q.uk-box b, body.pc .pc-q.uk-box span, body.pc .pc-pl .q.uk-box i{color:#0b5a3c}
body.pc .pc-q.uk-box, body.pc .pc-pl .q.uk-box i{background:#e7f6ec}
body.pc .pc-q.uk-each b, body.pc .pc-q.uk-each span, body.pc .pc-pl .q.uk-each i{color:#8a5a00}
body.pc .pc-q.uk-each, body.pc .pc-pl .q.uk-each i{background:#fdf1d6}
body.pc .pc-q.uk-box span, body.pc .pc-q.uk-each span{background:transparent}
/* drive stop choice rows: phone, map and cross icons instead of empty circles */
body.pc .pc-rads .rd i.ic{border:0; border-radius:0; display:grid; place-items:center}
body.pc .pc-rads .rd i.ic svg{width:22px; height:22px; fill:none; stroke:var(--pc-g); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* [디자인] 13: flag buttons in the phone head are pills like the rest of the C look */
body.pc .phone .top .langsw .lgb{border-radius:99px; min-width:44px; padding:0 9px}