/* 별유통 ERP · 공통 스타일
   ink #1D2A3A  바탕 #F6F7F3  선 #E2E4DF  형광 #FFE98A  파랑 #2F55D4  초록 #1F7A5A  빨강 #A1261B */
:root{
  --ink:#1D2A3A; --ink-2:#5B6470; --bg:#F6F7F3; --panel:#FFFFFF; --line:#E2E4DF; --line-2:#EEF0EB;
  --mark:#FFE98A; --blue:#2F55D4; --green:#1F7A5A; --red:#A1261B; --orange:#B4541B;
  --r-sm:8px; --r:12px; --r-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
small{color:var(--ink-2)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--ink);background:#fff;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{text-decoration:none;background:var(--line-2)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#2B3C50}
.btn-ghost{border-color:transparent;background:transparent}
.btn-danger{color:var(--red);border-color:#E2C2BE}
.btn-sm{min-height:34px;padding:0 10px;font-size:13px;border-radius:var(--r-sm);border-width:1px}
.btn-lg{min-height:54px;font-size:17px;border-radius:14px;width:100%}
.link-btn{border:none;background:none;padding:0;color:var(--blue);cursor:pointer;font-size:inherit}

/* 입력 */
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:500;font-size:14px;min-height:44px}
label.check input{width:20px;height:20px}
input,select,textarea{min-height:48px;padding:0 14px;border:1px solid #C9CCC4;border-radius:var(--r);background:#fff;font-size:16px;font-weight:400}
textarea{padding:12px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(47,85,212,.18)}

/* 알림 */
.flash{padding:12px 14px;border-radius:var(--r);background:#E8F3EE;color:#14553F;font-size:14px;margin-bottom:12px}
.flash-error{background:#FBE9E7;color:var(--red)}

/* 로그인 */
.login-page{background:var(--bg)}
.login{min-height:100%;max-width:400px;margin:0 auto;padding:48px 24px 32px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.login-brand p{margin:0;color:var(--ink-2)}
.login-mark{width:64px;height:64px;border-radius:18px;background:var(--ink);color:var(--mark);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700}
.login-brand h1{font-size:24px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-foot{margin:0;text-align:center;color:var(--ink-2);font-size:13px}

/* 관리자 PC */
.admin-shell{display:flex;min-height:100vh}
.side{width:232px;flex-shrink:0;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;height:100vh}
.side-brand{font-size:18px;font-weight:700;padding:4px 12px 20px}
.side nav{display:flex;flex-direction:column;gap:2px;overflow:auto}
.side-link{display:flex;justify-content:space-between;align-items:center;min-height:42px;padding:0 12px;border-radius:var(--r-sm);color:#E6E9ED;font-size:14px}
.side-link small{color:#8C98A6;font-size:11px}
.side-link:hover{background:#2B3C50;text-decoration:none}
.side-link.on{background:#34475D;color:#fff;font-weight:700;box-shadow:inset 4px 0 0 var(--mark)}
.side-foot{margin-top:auto;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:#C9D0D8}
.side-foot a,.side-foot .link-btn{color:#C9D0D8;text-align:left}
.admin-main{flex:1;min-width:0;padding:28px 36px 48px;display:flex;flex-direction:column;gap:18px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end}
.page-head h1{font-size:26px}
.page-sub{margin:0;color:var(--ink-2);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.kpi span{font-size:13px;color:var(--ink-2)}
.kpi b{font-size:24px}
.kpi-warn{border-color:var(--red)} .kpi-warn b{color:var(--red)}
a.kpi{color:inherit;transition:border-color .15s} a.kpi:hover{border-color:var(--blue)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.panel-head{padding:16px 20px 8px}
.panel-head h2{font-size:17px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-left:8px;opacity:.55;vertical-align:middle;transition:opacity .3s,transform .3s}
.live-dot.pulse{opacity:1;transform:scale(1.5)}
.log-detail summary{cursor:pointer;color:var(--blue);font-size:13px;list-style:none}
.log-detail summary::-webkit-details-marker{display:none}
.log-detail pre{white-space:pre-wrap;word-break:break-all;font-size:12px;color:var(--ink-2);background:#F6F7F3;border-radius:6px;padding:6px 8px;margin:4px 0 0}
.chart-wrap{padding:16px 20px 20px}
.chart-bars{display:flex;align-items:flex-end;gap:2px;height:160px;border-bottom:1px solid var(--line)}
.bar-col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:2px}
.bar-col .bar{width:100%;background:var(--blue);border-radius:2px 2px 0 0;min-height:2px}
.bar-col:hover .bar{background:var(--ink)}
.chart-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--ink-2)}
.c-pay-toggle{padding:0}
.c-pay-toggle summary{list-style:none;cursor:pointer;padding:16px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.c-pay-toggle summary::-webkit-details-marker{display:none}
.c-pay-toggle summary::after{content:'▾';color:var(--ink-2);font-weight:400}
.c-pay-toggle[open] summary::after{content:'▴'}
.c-pay-toggle summary small{font-weight:400;color:var(--ink-2);font-size:12px;margin-left:8px}
.c-pay-toggle[open] summary{border-bottom:1px solid var(--line-2)}
.c-pay-toggle .form-grid{padding-top:16px}
.c-pay-toggle .m-hint{padding:0 16px 16px}
.c-payer{white-space:nowrap}
.c-pay-net{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.c-pay-net .c-pay-method{font-size:10px;font-weight:600;color:var(--ink-2)}
.c-pay-net b{font-size:14px;font-weight:700;color:var(--ink)}
.toggle-panel summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.toggle-panel summary::-webkit-details-marker{display:none}
.toggle-panel summary h2{font-size:17px}
.toggle-panel summary::after{content:'열어서 등록 ▾';color:var(--blue);font-size:13px;font-weight:600;white-space:nowrap}
.toggle-panel[open] summary::after{content:'접기 ▴'}
.toggle-panel[open] summary{border-bottom:1px solid var(--line-2)}
.panel-text{margin:0;padding:4px 20px 18px;color:var(--ink-2)}
.panel-text.small{font-size:13px;padding-top:0}
.panel-text.warn{color:var(--orange)}
.empty{padding:8px 20px 20px;margin:0;color:var(--ink-2)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-2);background:#F1F2EE;padding:10px 20px}
.tbl td{padding:12px 20px;border-top:1px solid var(--line-2);vertical-align:middle}
.tbl .actions form{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.row-off td{color:#9AA0A8}
.role{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#EEF0EB}
.role-admin{background:var(--ink);color:#fff}
.role-customer{background:#FFF4C4}
.role-picker{background:#E8EEFB;color:#1E3FA8}
.role-verifier{background:#E8F3EE;color:#14553F}
.form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:4px 20px 12px}
.form-row label{min-width:160px}
.temp-pw{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r);background:var(--mark);border:1px solid #E6CF5C}
.temp-pw code{font-size:20px;font-weight:700;letter-spacing:1px;background:#fff;padding:4px 10px;border-radius:6px;user-select:all}
.thumb-sm{display:inline-block;width:40px;height:40px;border-radius:6px;object-fit:cover;background:#F1F2EE;vertical-align:middle}
.thumb-empty{border:1px dashed var(--line-2)}
@media (max-width:900px){.admin-shell{flex-direction:column}.side{width:auto;height:auto;position:static}.side nav{flex-direction:row;flex-wrap:wrap}.admin-main{padding:20px 16px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.tbl{display:block;overflow-x:auto}}

/* 모바일 (중상 · 출고자 · 검수자) */
.mobile{background:var(--bg)}
.m-shell{min-height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;background:var(--bg)}
.m-head{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;background:#fff;border-bottom:1px solid var(--line)}
.m-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.m-sub{font-size:13px;color:var(--ink-2)}
.m-title{font-size:21px}
.m-head-right{display:flex;align-items:center;gap:8px}
.m-head .counts{gap:6px}
.m-head .count{min-height:52px;border-radius:10px}
.m-head .count span{font-size:12px}
.m-head .count b{font-size:20px}
.m-menu{position:relative}
.m-menu summary{list-style:none;cursor:pointer;min-height:40px;display:flex;align-items:center;padding:0 12px;border-radius:20px;border:1px solid var(--line);font-size:13px;font-weight:600}
.m-menu summary::-webkit-details-marker{display:none}
/* z-index를 명시적으로 높게: 출고장입력 등 화면 안쪽 콘텐츠(.o-head 등, position:sticky에
   z-index:10)가 z-index 없는(auto) 이 팝업보다 더 위에 그려져서 "로그아웃" 글자가 그 밑에
   가려 보이는 버그가 있었다 — 계정 메뉴는 화면의 어떤 콘텐츠보다도 항상 위에 떠야 한다. */
.m-menu-pop{position:absolute;right:0;top:46px;z-index:25;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:4px;min-width:150px;box-shadow:0 8px 24px rgba(29,42,58,.12)}
.m-menu-pop a,.m-menu-pop .link-btn{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:8px;color:var(--ink);text-align:left;width:100%}
.m-main{flex:1;padding:14px 14px 90px;display:flex;flex-direction:column;gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.card.soft{background:transparent;border-style:dashed;color:var(--ink-2)}
.card p{margin:0}
.card-row{display:flex;justify-content:space-between;align-items:baseline}
.card-row b{font-size:20px}
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.count{background:#fff;border:1px solid var(--line);border-radius:var(--r);min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.count span{font-size:13px;color:var(--ink-2)}
.count b{font-size:26px}
.count.on{border:2px solid var(--ink)}
.m-tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;margin:0 auto;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.m-tabs a{min-height:56px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:14px}
.m-tabs a.on{color:var(--ink);font-weight:700}
.m-tabs a[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 2단계 · 상품관리 */
.head-actions{display:flex;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px}
.chip b{font-size:13px;color:var(--ink-2)}
.chip:hover{text-decoration:none;border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on b{color:var(--mark)}
.chip-gap{width:12px}
.hint{margin:-4px 0 0;color:var(--ink-2);font-size:13px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters input[type=search]{flex:1;min-width:220px}
.filters select{min-width:140px}
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFBF8;font-size:14px}
.bulk-bar span{margin-right:auto}
.bulk-bar select{min-height:34px;font-size:14px}
.tbl-wrap{overflow-x:auto}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .mono{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13px;white-space:nowrap}
.tbl-products{font-size:13px}
.tbl-products td{padding:5px 10px}
.tbl-products th{padding:6px 10px;font-size:11px}
.w-check{width:36px}
.w-check input{width:18px;height:18px;min-height:0}
.name-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:160px}
.name-in{flex:1;min-width:110px;min-height:28px;padding:0 6px;border:1px solid transparent;background:transparent;font-size:13px;font-weight:700;border-radius:6px}
.name-in:hover{border-color:#C9CCC4}
.name-in.saving{border-color:var(--blue);background:#fff}
.name-in.saved{border-color:var(--green);background:#EEF7F0}
.name-in.err{border-color:var(--red);background:#FBE9E7}
.spec-in{width:90px;min-height:28px;padding:0 6px;border:1px solid transparent;background:transparent;font-size:12px;color:var(--ink-2);border-radius:6px}
.spec-in:hover{border-color:#C9CCC4}
.spec-in.saving{border-color:var(--blue);background:#fff}
.spec-in.saved{border-color:var(--green);background:#EEF7F0}
.spec-in.err{border-color:var(--red);background:#FBE9E7}
.loc-cell{min-width:150px}
.zone-in{flex:0 0 auto;width:76px;min-height:26px;padding:0 4px;font-size:12px;border-radius:6px}
.zone-in.zone-dropship{color:#1E3FA8}
.zone-in.zone-unset{color:var(--ink-2);border-color:var(--line);background:var(--line-2)}
.zone-in.saving{border-color:var(--blue)}
.zone-in.saved{border-color:var(--green);background:#EEF7F0}
.zone-in.err{border-color:var(--red);background:#FBE9E7}
.loc-cell.no-zone .loc-in{display:none}
.loc-in{flex:1 1 auto;width:70px;min-width:60px;min-height:26px;padding:0 6px;font-size:12px;border:1px solid transparent;background:transparent;border-radius:6px}
.loc-in:hover{border-color:#C9CCC4}
.loc-in.saving{border-color:var(--blue);background:#fff}
.loc-in.saved{border-color:var(--green);background:#EEF7F0}
.loc-in.err{border-color:var(--red);background:#FBE9E7}
.spec{color:var(--ink-2);font-size:13px}
.spec-lg{color:var(--ink-2);font-size:18px;font-weight:500}
.tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-size:11px;font-weight:700;background:#EEF0EB;color:var(--ink-2)}
.tag-warn{background:#FFE1C4;color:#7A3410}
.vis{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap}
.vis-list{background:var(--mark);color:var(--ink)}
.vis-search{background:#E8EEFB;color:#1E3FA8}
.vis-hidden{background:#EEF0EB;color:var(--ink-2)}
.vis-lg{font-size:14px;padding:6px 12px}
.vis-cell{min-width:118px}
.cell-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:4px}
.vis-in{flex:0 0 auto;width:68px;min-height:26px;padding:0 4px;font-size:12px;border-radius:6px}
.vis-in.saving{border-color:var(--blue)}
.vis-in.saved{border-color:var(--green);background:#EEF7F0}
.vis-in.err{border-color:var(--red);background:#FBE9E7}
.vis-in option[value="trash"]{color:var(--red)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.col-side{display:flex;flex-direction:column;gap:18px}
.form-panel{padding-bottom:4px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:4px 20px 16px}
.form-grid .span-2{grid-column:span 2}
.form-actions{display:flex;gap:8px;align-items:center;padding:8px 20px 20px}
.dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:0;padding:4px 20px 12px;font-size:14px}
.dl dt{color:var(--ink-2)}
.dl dd{margin:0}
.kpis-in{padding:4px 20px 12px}
.problems{margin:0;padding:0 20px 12px 40px;font-size:13px;color:var(--ink-2)}
@media (max-width:1100px){.two-col{grid-template-columns:1fr}}

/* 3차: 단가·중상·재고 */
.tag-blue{background:#E8EEFB;color:#1E3FA8}
.stock-in{width:72px;min-height:30px;padding:0 8px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;border-radius:8px}
.stock-in.saving{border-color:var(--blue)}
.stock-in.saved{border-color:var(--green);background:#EEF7F0}
.stock-in.err{border-color:var(--red);background:#FBE9E7}
.inner-in{width:52px;min-height:28px;padding:0 6px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;border:1px solid transparent;background:transparent;border-radius:6px;color:var(--ink-2)}
.inner-in:hover{border-color:#C9CCC4}
.inner-in.saving{border-color:var(--blue);background:#fff}
.inner-in.saved{border-color:var(--green);background:#EEF7F0}
.inner-in.err{border-color:var(--red);background:#FBE9E7}
.stock-low{color:var(--red);font-weight:700}
.stock-big{margin-left:8px;font-size:22px}
.form-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid .span-4{grid-column:1/-1}
.col-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.stack-form{display:flex;flex-direction:column;gap:10px;padding:4px 20px 16px}
.tier{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#EEF0EB}
.tier-jungsang{background:var(--mark)}
.tier-tier2{background:#E8EEFB;color:#1E3FA8}
.tier-tier3{background:#E8F3EE;color:#14553F}
@media (max-width:1100px){.form-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 중상: 상품·가격 */
.m-tabs-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m-search{display:flex;gap:8px}
.m-search input{flex:1;min-width:0}
.m-hint{margin:0;color:var(--ink-2);font-size:13px}
.m-list{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.m-item{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border-top:1px solid var(--line-2);color:var(--ink)}
.m-item:first-child{border-top:none}
.m-item:hover{text-decoration:none;background:#FAFBF8}
.m-item-main{display:flex;flex-direction:column;min-width:0}
.m-item-main small{font-size:13px}
.m-item-price{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;white-space:nowrap}
.m-special{color:#1E3FA8;font-weight:700}
.m-spec{margin:0 0 8px;color:var(--ink-2)}
.m-price-big{font-size:26px}
.m-sub-line{margin:6px 0 0;color:var(--ink-2);font-size:13px}
.m-h2{font-size:16px;margin-bottom:8px}
.m-hist{list-style:none;margin:0;padding:0}
.m-hist li{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line-2);font-size:15px}
.m-hist li:first-child{border-top:none}
.m-hist li.now b{background:var(--mark);padding:0 6px;border-radius:4px}
.m-hist li.m-hist-note{padding:0 0 10px;border-top:none;font-size:12px;color:#7A3410}
.m-head a{color:var(--ink-2)}
.tbl-hist td{padding:8px 12px;vertical-align:top}
.row-now td{background:#FFFBEA}

/* ───────── 중상 출고장 (3단계) */
.order-page{background:#F6F7F3}
.o-app{display:flex;flex-direction:column;min-height:calc(100vh - 56px);padding-bottom:64px}
.o-loading,.o-empty{padding:40px 20px;text-align:center;color:var(--ink-2)}
.o-account{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:20}
.o-account summary{background:#fff}
.o-head{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;display:flex;flex-direction:column;gap:10px}
.o-head-top{display:flex;justify-content:space-between;align-items:flex-start;padding-right:88px}
.o-head h1{font-size:20px}
.o-head-top span{font-size:13px;color:var(--ink-2)}
.o-bal{display:none}
.o-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:#EEF0EB}
.o-seg button{min-height:38px;border:none;border-radius:9px;background:transparent;font-size:14px;color:var(--ink);cursor:pointer}
.o-seg button.on{background:#fff;font-weight:700;box-shadow:0 1px 3px rgba(29,42,58,.15)}
.o-editing{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:10px;background:#FFF1E4;color:#7A3410;font-size:13px;font-weight:600}
.o-editing button{border:none;background:none;color:#7A3410;text-decoration:underline;font-size:13px;cursor:pointer}
/* 테이블(탭) 이름이 많아지면 옆으로 스크롤해서 찾아야 했는데, 대신 옆으로 꽉 차면 아래 줄로 넘어가게
   한다(2~3줄이 되어도 전체가 한 번에 보이는 쪽이 스크롤보다 찾기 편하다는 요청). */
.o-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px}
.o-tabs button{flex-shrink:0;min-height:38px;padding:0 14px;display:flex;align-items:center;gap:6px;border-radius:19px;border:1px solid #D9DCD5;background:#fff;font-size:14px;color:var(--ink);cursor:pointer}
.o-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.o-tabs i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.o-tabs button.on i{background:var(--mark);color:var(--ink)}
.o-scroll{flex:1;padding:0 12px 12px}
.o-scroll .o-grid{margin-bottom:14px}
/* "전체" 보기: 테이블을 눌러서 하나씩 넘어가지 않고, 모든 테이블을 확대/축소 가능한 큰 격자 캔버스에
   같이 올려서 한 화면(상자 안에서 좌우·상하로 끌어서 보는 식)에 담는다. */
.o-tab-all{font-weight:700}
.o-canvas-toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px 0;flex-wrap:wrap}
.o-canvas-zbtn{min-width:40px;min-height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:17px;font-weight:700;color:var(--ink);cursor:pointer}
.o-canvas-zbtn.small{min-width:auto;font-size:13px;font-weight:600}
.o-canvas-zbtn:disabled{opacity:.4}
.o-canvas-zlabel{font-size:13px;font-weight:700;color:var(--ink);min-width:38px;text-align:center}
.o-canvas-hint{font-size:11px;color:var(--ink-2)}
.o-canvas-wrap{margin:8px 12px 0;height:min(68vh,580px);min-height:280px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#EFF1EA;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;cursor:grab}
.o-canvas-wrap.dragging{cursor:grabbing}
.o-canvas{display:grid;grid-template-columns:repeat(2,360px);gap:14px;padding:14px;width:max-content;transform-origin:0 0}
.zm-70{zoom:.7}.zm-85{zoom:.85}.zm-100{zoom:1}.zm-120{zoom:1.2}.zm-140{zoom:1.4}.zm-160{zoom:1.6}
/* 구역(테이블) 경계를 한눈에 알 수 있게 검정/빨강 테두리를 번갈아 두른다 */
.o-canvas-block{border:4px solid var(--ink);border-radius:12px;padding:10px;background:#fff;min-width:0}
.o-canvas-block.cb-red{border-color:var(--red)}
.o-canvas-title{margin:0 0 8px;font-size:15px;font-weight:800;color:var(--ink)}
.o-canvas-block .o-grid{margin-bottom:10px}
.o-canvas-block .o-grid:last-child{margin-bottom:0}
.o-canvas-tail{padding-top:10px}
@media (max-width:420px){.o-canvas{grid-template-columns:repeat(2,300px)}}
.o-grid{border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden;--lw:64px;--cols:3}
.o-grid[data-cols="1"]{--cols:1;--lw:150px}.o-grid[data-cols="2"]{--cols:2}.o-grid[data-cols="3"]{--cols:3}.o-grid[data-cols="4"]{--cols:4}
.o-grid[data-cols="5"]{--cols:5}.o-grid[data-cols="6"]{--cols:6;--lw:52px}.o-grid[data-cols="7"]{--cols:7;--lw:48px}.o-grid[data-cols="8"]{--cols:8;--lw:44px}
.o-row{display:grid;grid-template-columns:var(--lw) repeat(var(--cols),minmax(0,1fr));border-top:1px solid #EEF0EB}
.o-hrow{background:#F1F2EE;border-top:none}
/* 표 왼쪽 맨 위 모서리 칸(.o-hrow .o-rl)은 그 세부 테이블(트레이 등) 이름이라 크고 진하게,
   그 아래 각 줄 이름("8호" 등)은 위쪽 열 이름(.o-ch)과 같은 크기로 작게 + 가운데 정렬한다. */
.o-rl{min-height:27px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-size:10.5px;font-weight:700;text-align:center;white-space:nowrap}
.o-hrow .o-rl{min-height:30px;padding:0 8px;justify-content:flex-start;text-align:left;font-size:15px;font-weight:800;color:var(--ink)}
.o-ch{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;line-height:1.2;padding:2px;border-left:1px solid var(--line)}
.o-ch small{font-size:10px;font-weight:500}
.o-cell{min-height:27px;min-width:0;border:none;border-left:1px solid #EEF0EB;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;cursor:pointer;color:var(--ink);position:relative;overflow:hidden}
.o-cell b{font-size:16px;line-height:1.1}
.o-cell small{font-size:10px;white-space:nowrap}
/* 칸에 연결된 실제 상품 이름 — 관리자가 그 칸에서 "이름 표시"를 체크했을 때만 나온다(기본은 꺼짐).
   행·열 이름만으로는 어떤 상품인지 짐작이 틀릴 수 있는 칸(그 자리에 맞는 상품이 없어 다른 상품을
   대신 넣어둔 경우 등)에만 관리자가 켜서 쓰는 용도. 한 줄로 줄이고 넘치면 "..."로 줄인다(칸이 좁아도
   줄 수가 늘어나 칸 높이가 들쭐날쭐해지지 않도록). 전체 이름은 title 속성(길게 눌러보기/PC 마우스오버)
   으로 볼 수 있다. 이름이 없는 보통 칸은 이 span 자체가 없으므로 기존처럼 수량만 보인다. */
.o-cell-name{font-size:11px;font-weight:700;line-height:1.2;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 1px}
.o-cell.has{background:#FFF4C4}
.o-cell.mine{background:var(--mark)}
.o-cell.act{background:#DCE4FA;outline:3px solid var(--blue);outline-offset:-3px}
/* 꾹 누르면 하위 상품 목록이 있다는 표시는 모서리의 작은 숫자 배지(묶인 상품 종 수)로 — 칸에는 수량만
   (입력한 수량대로 3+4+5 식으로) 보통 칸과 똑같이 보이게 한다. 배지는 점 하나였을 때와 비슷한 크기로
   작게 유지한다(번잡해 보이지 않도록). */
.o-cell-group{position:relative}
.o-cell-groupn{position:absolute;top:3px;right:3px;min-width:12px;height:12px;padding:0 2px;border-radius:7px;background:#7B4FD9;color:#fff;font-size:8px;font-weight:700;font-style:normal;line-height:12px;text-align:center}
.o-none{background:repeating-linear-gradient(135deg,#F6F7F3 0 6px,#EEF0EB 6px 7px);cursor:default}
.o-extra{margin-top:12px;border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden}
.o-extra h3{font-size:13px;color:var(--ink-2);padding:10px 14px 4px;font-weight:600}
.o-extra-row{width:100%;display:flex;justify-content:space-between;min-height:48px;padding:0 14px;border:none;border-top:1px solid #EEF0EB;background:#fff;font-size:15px;cursor:pointer;color:var(--ink);align-items:center}
.o-extra-row.act{background:#DCE4FA}
.o-fav-row{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-top:1px solid var(--line-2);background:#FAFBF8}
.o-fav-btn{min-height:44px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:#fff;font-size:14px;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 1px 2px rgba(29,42,58,.06);transition:box-shadow .12s,transform .08s}
.o-fav-btn:active{transform:scale(.97)}
.o-fav-btn b{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--line-2);color:var(--ink-2);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.o-fav-btn b:empty{display:none}
.o-fav-btn.mine{background:var(--mark);border-color:transparent}
.o-fav-btn.mine b{background:rgba(29,42,58,.14);color:var(--ink)}
.o-fav-btn.act{background:#DCE4FA;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.o-fav-btn.ro{cursor:default}
.o-fav-btn.red{background:#FBE9E7;border-color:transparent}
.o-fav-btn.red b{color:var(--red);background:rgba(161,38,27,.12)}
/* 목록형 세부 테이블(예: 봉투/비닐류): 이름을 따로 입력하지 않고, 칸 하나가 "상품 이름 + 수량"을 함께 보여준다.
   기존 트레이 같은 표와 똑같이 .o-grid 테두리·배경을 그대로 쓰므로, 목록형도 세부 테이블처럼 보인다.
   한 줄에 몇 칸이 나란히 나올지는 관리자가 "+ 행 추가"로 정한 칸 수(최대 3)를 그대로 따른다 — 화면 너비로
   자동으로 바뀌지 않는다.
   ⚠ 진짜 원인이었던 부분: 칸 수를 style="..." 인라인 스타일 속성으로 넣었었는데, 이 앱은 보안을 위해
   Content-Security-Policy의 style-src에 'unsafe-inline'을 허용하지 않는다 — 그래서 브라우저가 그 인라인
   style 속성을 통째로 무시하고(=grid-template-columns이 적용 안 됨) 기본값인 1열로 쌓였던 것이다.
   (관리자 쪽 기존 트레이 표(.o-grid[data-cols])는 처음부터 style= 속성이 아니라 data-cols 속성 + 이
   스타일시트의 선택자 규칙으로 칸 수를 정해서 CSP에 걸리지 않았다 — 그래서 관리자 화면만 항상 정상이었다.)
   그래서 목록형도 같은 방식(data-n 속성 + 아래 선택자 규칙)으로 바꿨다.
   칸 버튼 디자인(.o-namecell 등): 전엔 칸끼리 1px 선으로만 붙어 있는 밋밋한 네모였는데, 카드처럼 모서리를
   둥글게 하고 칸 사이 간격을 띄우고 그림자를 살짝 넣어서 각 상품이 독립된 버튼처럼 보이게 했다. 수량은
   글자 그대로 두지 않고 동그란 배지(.o-qty)로 감싸서 눈에 더 잘 띄게 하고, 수량이 없을 땐 배지 자체를
   숨긴다(:empty). 하위 상품이 있는 칸(꾹 눌러야 목록이 뜨는 칸)은 두꺼운 밑줄 대신 이름 옆에 작은
   보라색 점 + 라벨 태그로 표시한다. */
.o-list-line{display:grid;gap:8px;background:transparent;padding:8px;border-top:1px solid var(--line-2)}
.o-list-line[data-n="1"]{grid-template-columns:repeat(1,1fr)}
.o-list-line[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.o-list-line[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.o-list-line:first-child{border-top:none}
.o-namecell-empty{min-height:58px;border-radius:var(--r);border:1px dashed #D3D6CC;background:repeating-linear-gradient(135deg,#F6F7F3 0 6px,#EEF0EB 6px 7px)}
.o-namecell{display:flex;align-items:center;gap:8px;min-width:0;min-height:58px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:0 12px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;box-shadow:0 1px 2px rgba(29,42,58,.06);transition:box-shadow .12s,transform .08s,border-color .12s}
.o-namecell:active{transform:scale(.97)}
.o-namecell span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all}
.o-namecell b{flex:0 0 auto;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--line-2);color:var(--ink-2);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.o-namecell b:empty{display:none}
.o-namecell small{flex:0 1 auto;min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:600;white-space:nowrap;color:var(--ink-2)}
.o-namecell.mine{border-color:transparent;background:var(--mark)}
.o-namecell.mine b{background:rgba(29,42,58,.14);color:var(--ink)}
.o-namecell.act{background:#DCE4FA;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.o-namecell-group{position:relative}
.o-namecell-groupn{display:inline-flex;align-items:center;justify-content:center;min-width:12px;height:12px;padding:0 2px;border-radius:7px;background:#7B4FD9;color:#fff;font-size:8px;font-weight:700;font-style:normal;margin-right:5px;vertical-align:middle}
.o-search-btn{width:100%;min-height:44px;margin-top:10px;border-radius:12px;border:1px dashed #B9BDB4;background:transparent;font-size:14px;color:var(--ink-2);cursor:pointer}
.o-pad{position:sticky;bottom:120px;z-index:9;margin:0 0 0;display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -6px 20px rgba(29,42,58,.12)}
.o-pad-head{display:flex;align-items:center;gap:10px}
.o-pad-head>div:first-child{flex:1;display:flex;flex-direction:column;min-width:0}
.o-pad-head b{font-size:16px}
.o-pad-head span{font-size:12px;color:var(--ink-2)}
.o-pad-val{min-width:84px;height:46px;padding:0 12px;border-radius:12px;background:#F6F7F3;border:2px solid var(--blue);display:flex;align-items:center;justify-content:flex-end;font-size:24px;font-weight:700}
.o-pad-val.neg{border-color:var(--red);color:var(--red)}
.o-pad-x{width:40px;height:46px;border:none;background:none;font-size:18px;color:var(--ink-2);cursor:pointer}
.o-pad-msg{display:flex;justify-content:space-between;min-height:18px;font-size:12px;color:var(--red);font-weight:600}
.o-pad-msg button{border:none;background:none;color:var(--red);text-decoration:underline;font-size:12px;cursor:pointer}
/* 키패드 위쪽 "다른 상품이 더 있습니다" — 칸에 붙어있던 꾹 누르기 안내 문구 대신, 수량 입력창을 연 다음에
   여기서 펼쳐서 다른(하위) 상품으로 바로 갈아탈 수 있게 한다. 눌렀던 메인 상품이든 꾹 눌러 고른 하위
   상품이든 상관없이(groupMainOf) 같은 그룹이면 뜬다. */
.o-pad-grouphint{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:34px;padding:0 12px;border:none;border-radius:10px;background:#F1EBFC;color:#5B3A9E;font-size:13px;font-weight:700;cursor:pointer}
.o-pad-grouphint i{font-style:normal;font-size:10px}
.o-pad-grouplist{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto;padding:2px 0}
.o-pad-groupitem{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 8px;border-radius:12px;border:1px solid var(--line);background:#fff;text-align:left;font-size:14px;cursor:pointer;color:var(--ink)}
.o-pad-groupitem.mine{background:var(--mark);border-color:transparent}
.o-pad-groupimg{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#F1F2EE;flex:none}
.o-pad-groupnoimg{display:flex}
.o-pad-groupname{flex:1;min-width:0;display:flex;flex-direction:column}
.o-pad-groupname small{font-size:11px;color:var(--ink-2)}
.o-pad-groupitem b{font-size:16px;flex:none}
.o-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.o-key{height:50px;border-radius:12px;border:1.5px solid #F1F2EE;background:#F1F2EE;font-size:22px;font-weight:700;color:var(--ink);cursor:pointer;touch-action:manipulation}
.o-key[data-span="2"]{grid-column:span 2}
.o-key.small{font-size:15px}
.o-key.box{background:var(--mark);border-color:var(--mark);font-size:15px}
.o-key.neg{background:#FBE3E1;border-color:var(--red);color:var(--red);font-size:15px}
.o-key.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-size:17px}
.o-key.primary.neg{background:var(--red);border-color:var(--red);color:#fff}
.o-key:disabled{color:#8A8C85;cursor:default}
.o-search input{flex:1;min-width:0}
.o-results{max-height:40vh;overflow:auto;display:flex;flex-direction:column}
.o-res{display:flex;justify-content:space-between;gap:10px;min-height:48px;padding:0 6px;border:none;border-top:1px solid #EEF0EB;background:#fff;text-align:left;font-size:15px;align-items:center;cursor:pointer;color:var(--ink)}
.o-group-list{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.o-group-item{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 8px;border-radius:12px;border:1px solid var(--line);background:#fff;text-align:left;font-size:15px;cursor:pointer;color:var(--ink)}
.o-group-item.mine{background:var(--mark);border-color:transparent}
.o-group-img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#F1F2EE;flex:none}
.o-group-noimg{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink-2);text-align:center;line-height:1.2}
.o-group-name{flex:1;min-width:0;display:flex;flex-direction:column}
.o-group-name small{font-size:12px;color:var(--ink-2)}
.o-group-item b{font-size:17px}
.o-muted{color:var(--ink-2);font-size:13px;margin:0}
.o-bar{position:sticky;bottom:56px;z-index:10;display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;border-top:1px solid var(--line)}
.o-bar>div{flex:1;display:flex;flex-direction:column}
.o-bar>div span{font-size:12px;color:var(--ink-2)}
.o-bar>div b{font-size:16px}
.o-go{min-height:48px;padding:0 20px;border-radius:14px;border:none;background:var(--ink);color:#fff;font-size:15px;font-weight:700;cursor:pointer;flex:2}
.o-bar>div + .o-go{flex:0 0 auto}
.o-go:disabled{opacity:.6}
.o-ghost{flex:1;min-height:48px;border-radius:14px;border:1.5px solid var(--ink);background:#fff;font-size:15px;font-weight:600;cursor:pointer;color:var(--ink)}
.m-back-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;width:100%;margin-top:4px;border-radius:14px;border:1.5px solid var(--ink);background:#fff;font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;box-sizing:border-box}
.o-app .m-back-btn{width:calc(100% - 24px);margin:4px 12px 16px}
.pk-counts{margin-top:4px}
.o-confirm{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.o-confirm h2{font-size:18px}
.o-memo input{border:2px solid var(--ink)}
.o-chips{display:flex;gap:6px}
.o-chips button{min-width:44px;height:38px;border-radius:19px;border:1px solid #D9DCD5;background:#fff;font-weight:600;cursor:pointer}
.o-table{border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden}
.o-tr{display:grid;grid-template-columns:1fr 96px 60px;gap:6px;padding:11px 14px;border-top:1px solid #EEF0EB;font-size:15px}
.o-tr>*:nth-child(n+2){text-align:right}
.o-th{background:#F1F2EE;border-top:none;font-size:12px;color:var(--ink-2)}
.neg{color:var(--red)}
.o-note{margin:0;padding:0 4px;font-size:12px;color:var(--ink-2);line-height:1.5}
.o-error{margin:0;padding:10px 12px;border-radius:10px;background:#FBE9E7;color:var(--red);font-size:14px}
.o-list{padding:12px;display:flex;flex-direction:column;gap:12px}
.o-toast{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:13px}
.o-toast button{margin-left:auto;border:none;background:none;color:#fff;font-size:15px;cursor:pointer}
.o-order-h{font-size:16px;padding:4px 4px 0}
.o-order-h small{font-size:12px;color:var(--ink-2);font-weight:500}
.o-batch{border-radius:14px;background:#fff;border:1.5px solid var(--line);overflow:hidden}
.o-batch.off{opacity:.6}
.o-batch.off .o-line span,.o-batch.off .o-line b{text-decoration:line-through}
.o-batch-h{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.o-batch-h>div{flex:1;display:flex;flex-direction:column}
.o-batch-h b{font-size:17px}
.o-batch-h span{font-size:12px;color:var(--ink-2)}
.o-batch-h em{font-style:normal;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;background:#DDF1E2;color:#1F5C39}
.o-batch-h em.off{background:#FBE3E1;color:var(--red)}
.o-line{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;padding:10px 14px;border:none;border-top:1px solid #EEF0EB;background:transparent;text-align:left;font-size:15px;cursor:pointer;color:inherit}
.o-line small{width:100%;display:block;font-size:13px;color:var(--ink-2)}
.o-batch-f{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #EEF0EB;background:#FAFBF8}
.o-batch-f label{flex:1;flex-direction:row;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:500;min-width:0}
.o-batch-f input{min-height:34px;flex:1;min-width:0;font-size:14px;padding:0 8px}
.o-batch-f button{min-height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--ink);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.o-batch-f button.danger{border-color:#E2C2BE;color:var(--red)}
.o-total{border-radius:14px;background:var(--ink);color:#fff;overflow:hidden}
.o-total-h{display:flex;justify-content:space-between;align-items:baseline;padding:14px 14px 8px}
.o-total-h span{font-size:13px;color:#C9D0D8}
.o-total .o-line{border-top-color:#2E3D50}
.o-total .o-line small{color:#C9D0D8}
.o-total-f{display:flex;justify-content:space-between;padding:12px 14px;border-top:1px solid #2E3D50}
.o-total-f b{color:var(--mark)}

/* 직원 알림 */
.notify-box{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.notify-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(29,42,58,.3)}
.notify-card.new{border-left:6px solid var(--mark)}
.notify-card div{flex:1;display:flex;flex-direction:column}
.notify-card span{font-size:13px;color:#C9D0D8}
.notify-card button{min-height:40px;padding:0 14px;border-radius:10px;border:none;background:var(--mark);color:var(--ink);font-weight:700;cursor:pointer}
.side-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--mark);color:var(--ink);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.side-badge-warn{background:var(--red);color:#fff}
.side-badges{display:flex;gap:6px}
.mobile .notify-box{left:12px;right:12px;bottom:12px;max-width:none}

/* 발주관리 · 출고장 배치 · 피킹 목록 */
.st{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#EEF0EB;white-space:nowrap}
.st-pick_wait{background:#E4E6E1}.st-picking{background:#FFE1C4;color:#7A3410}.st-verify_wait,.st-verifying{background:#DCE4FA;color:#1E3FA8}
.st-shipped{background:#DDF1E2;color:#1F5C39}.st-canceled{background:#FBE3E1;color:var(--red)}
.st-lg{font-size:14px;padding:6px 12px}
.batch-block{padding:10px 20px;border-top:1px solid var(--line-2)}
.batch-h{display:flex;gap:10px;align-items:baseline}
.batch-h small{margin-left:auto}
.batch-lines{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 16px;font-size:14px}
.batch-lines li{display:flex;justify-content:space-between}
.inline-form{display:inline-flex;gap:6px;align-items:center}
.inline-form input{min-height:36px;font-size:14px;width:140px}
.sheet-tabchips{margin-bottom:14px}
.sheet-tabchip small{font-weight:400;opacity:.8}
.sheet-hidden-note{margin-bottom:14px}
.sheet-tabchip-wrap{display:inline-flex}
.sheet-tabchip-in{display:none;min-height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--blue);font-size:14px;width:140px}
.sheet-tabchip-wrap.editing .sheet-tabchip{display:none}
.sheet-tabchip-wrap.editing .sheet-tabchip-in{display:inline-flex}
.sheet-tables{display:flex;flex-direction:column;gap:18px;min-width:0}
.sheet-table{padding-bottom:4px}
.sheet-add-section{padding:4px 0 18px}
.sheet-fav-inline,.sheet-grow-row{border-top:1px solid var(--line-2);padding:12px 20px}
.sheet-fav-inline h3{font-size:13px;color:var(--ink-2);font-weight:600;margin-bottom:4px}
.sheet-fav-inline h3 small{font-weight:400;margin-left:6px}
.fav-rows{display:flex;flex-direction:column}
/* 즐겨찾기가 많아지면 목록이 길어지는데, "순서" 글자가 입력칸 위에 따로 한 줄 차지해서(기본 label
   스타일이 세로 쌓임) 줄마다 키가 컸다 — 한 줄에 이름·순서·버튼이 나란히 오도록 압축한다. */
.fav-row{padding:5px 0;border-top:1px solid var(--line-2);flex-wrap:wrap;align-items:center;gap:8px}
.fav-row:first-child{border-top:none}
.fav-row label{flex-direction:row;align-items:center;gap:4px;min-width:auto;font-size:12px;font-weight:500;color:var(--ink-2)}
.fav-name{min-width:200px;flex:1;font-size:14px}
.fav-name small{color:var(--ink-2);margin-left:6px}
.fav-add-form{padding-top:8px}
.sheet-grow-row{display:flex;flex-wrap:wrap;gap:24px}
.sheet-grow-form{flex:1;min-width:220px;padding:0}
.sheet-add-table-inline{margin-left:auto}
.sheet-add-table-inline input{width:120px}
.sheet-search{position:sticky;top:16px}
.sheet-tbl th,.sheet-tbl td{padding:6px 6px;vertical-align:top}
.sheet-tbl-list{table-layout:fixed;width:100%}
.sheet-tabfav .sheet-fav-inline-top{border-top:none}
.in-sm{min-height:34px;font-size:13px;padding:0 8px;width:100%}
.in-b{font-weight:700}
.in-xs{min-height:34px;width:56px;font-size:13px;padding:0 6px}
.sheet-cell{min-width:120px}
.sheet-cell small{display:block;font-size:11px;line-height:1.3;margin-top:2px}
.sheet-cell small.warn{color:var(--red)}
.sheet-cell-row{display:flex;align-items:center;gap:5px}
.sheet-cell-row .cell-in{flex:1 1 auto;min-width:0}
/* 글자 없이 체크박스만 — 코드 입력칸 바로 옆에 붙여서, 체크하면 그 칸만 중상 화면에 상품 이름이 보인다.
   무슨 뜻인지는 title(마우스 오버)/aria-label로만 알리고 화면에 글자를 더 안 띄운다(번잡해 보인다는 요청). */
.sheet-cell-namechk{flex:none;width:17px;height:17px;cursor:pointer}
.sheet-del-btn{min-height:22px;min-width:22px;height:22px;width:22px;padding:0;margin-left:4px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sheet-del-btn:hover{background:#FBE9E7;border-color:var(--red);color:var(--red)}
.sheet-rowdel-cell{min-width:32px;width:32px;text-align:center;vertical-align:middle!important}
.cell-in.picked{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,85,212,.2)}
.cell-in.changed{background:#FFF4C4}
.sheet-results{max-height:60vh;overflow:auto;display:flex;flex-direction:column}
.sheet-res{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 20px;border:none;border-top:1px solid var(--line-2);background:#fff;text-align:left;cursor:pointer;font-size:14px}
.sheet-res:hover{background:#FAFBF8}
.sheet-float{position:fixed;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);max-height:280px;overflow:auto;display:flex;flex-direction:column}
.sheet-float .sheet-res{padding:8px 12px;font-size:13px;width:100%}
.sheet-float .sheet-res:first-child{border-top:none}
.sheet-float .empty{padding:10px 12px;font-size:13px;margin:0}
.pick-card{display:flex;flex-direction:column;gap:8px}
.pick-card.is-new{border:2px solid var(--orange)}
.pick-top,.pick-bottom{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.pick-name{font-size:19px}
.pick-name small{font-size:13px;color:var(--ink-2)}
@media (max-width:1100px){.sheet-page{grid-template-columns:1fr}.sheet-search{position:static}}

/* ───────── 중상 화면 v2: 위쪽 메뉴 · 홈 · 발주내역 · 출고장 개선 */
.cust .m-main{padding-bottom:24px}
.c-top{background:#fff;border-bottom:1px solid var(--line)}
.c-top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 8px}
.c-top-row .m-sub a{color:var(--ink-2)}
.c-nav{display:flex;gap:2px;padding:0 8px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.c-nav a{flex:1;min-width:64px;min-height:46px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink-2);border-bottom:3px solid transparent;white-space:nowrap}
.c-nav a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.c-nav a.off{opacity:.4;pointer-events:none}
.c-nav a:hover{text-decoration:none}
.c-bal{display:flex;justify-content:space-between;align-items:baseline}
.c-bal b{font-size:22px}
.c-menu{display:flex;flex-direction:column;gap:10px}
.c-menu a{display:flex;flex-direction:column;gap:2px;padding:18px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.c-menu a:hover{text-decoration:none;border-color:var(--ink)}
.c-menu a b{font-size:18px}
.c-menu a span{font-size:13px;color:var(--ink-2)}
.c-menu a.c-menu-main{background:var(--ink);border-color:var(--ink);color:#fff;padding:22px 18px}
.c-menu a.c-menu-main span{color:var(--mark)}
.c-menu a.off{opacity:.45;pointer-events:none}
.c-seg2{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:#EEF0EB}
.c-seg2 a{min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--ink);font-size:14px}
.c-seg2 a.on{background:#fff;font-weight:700;box-shadow:0 1px 3px rgba(29,42,58,.15)}
.c-seg2 a:hover{text-decoration:none}
.c-chips{display:flex;gap:6px;flex-wrap:wrap}
.c-chips a{min-height:34px;padding:0 14px;display:flex;align-items:center;border-radius:17px;border:1px solid #D9DCD5;background:#fff;color:var(--ink);font-size:13px}
.c-chips a.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.c-chips a:hover{text-decoration:none}
.c-order{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-top:1px solid var(--line-2);color:var(--ink)}
.c-order:first-child{border-top:none}
.c-order:hover{text-decoration:none;background:#FAFBF8}
.c-order-top,.c-order-mid{display:flex;justify-content:space-between;align-items:center}
.c-order-top{font-size:13px;color:var(--ink-2)}
.c-order-memo{font-size:12px;color:var(--ink-2)}
.c-bars{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.c-bar{display:flex;align-items:center;gap:8px;font-size:13px}
.c-bar span{width:34px;color:var(--ink-2)}
.c-bar i{flex:1;height:14px;background:#F1F2EE;border-radius:4px;overflow:hidden}
.c-bar em{display:block;height:100%;background:var(--blue)}
.c-bar b{width:40px;text-align:right}
.c-bar em.w0{width:0%}.c-bar em.w1{width:5%}.c-bar em.w2{width:10%}.c-bar em.w3{width:15%}.c-bar em.w4{width:20%}.c-bar em.w5{width:25%}.c-bar em.w6{width:30%}.c-bar em.w7{width:35%}.c-bar em.w8{width:40%}.c-bar em.w9{width:45%}.c-bar em.w10{width:50%}.c-bar em.w11{width:55%}.c-bar em.w12{width:60%}.c-bar em.w13{width:65%}.c-bar em.w14{width:70%}.c-bar em.w15{width:75%}.c-bar em.w16{width:80%}.c-bar em.w17{width:85%}.c-bar em.w18{width:90%}.c-bar em.w19{width:95%}.c-bar em.w20{width:100%}
.o-deliv{padding:8px 14px;border-top:1px solid #EEF0EB;background:#FFF8E6;font-size:13px}

/* 출고장 v2 */
.o-app{padding-bottom:0;min-height:calc(100vh - 47px)}
.o-head{position:static;padding:10px 16px;gap:8px}
.o-head-top{display:flex;align-items:baseline;gap:8px;padding-right:0;flex-wrap:wrap}
.o-head-top b{font-size:17px}
.o-sticky{position:sticky;top:0;z-index:8;background:#F6F7F3;box-shadow:0 1px 0 var(--line)}
.o-memo-row{display:flex;align-items:center;gap:6px;padding:8px 16px 0}
.o-memo-row label{font-size:13px;font-weight:700;flex-shrink:0}
.o-memo-row input{min-height:36px;flex:1;min-width:0;font-size:15px;padding:0 10px;border:1.5px solid var(--ink)}
.o-memo-row button{min-width:36px;height:36px;border-radius:18px;border:1px solid #D9DCD5;background:#fff;font-weight:700;cursor:pointer;color:var(--ink)}
.o-memo-row button.on,.o-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.o-tabs{padding:8px 16px}
.o-tabs button{min-height:34px}
.o-pad{bottom:62px;gap:6px;padding:8px 10px 8px;border-radius:14px 14px 0 0}
.o-pad-head b{font-size:15px}
.o-pad-head span{font-size:12px}
.o-pad-val{min-width:70px;height:38px;font-size:20px;padding:0 10px;border-radius:10px}
.o-pad-x{width:34px;height:38px}
.o-pad-msg{min-height:0}
.o-link{border:none;background:none;padding:0;color:var(--red);text-decoration:underline;font-size:12px;cursor:pointer}
.o-keys{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.o-key{height:42px;font-size:20px;border-radius:10px}
.o-key.small,.o-key.box,.o-key.neg{font-size:13px}
.o-key.primary{font-size:16px}
.o-bar{bottom:0}
.o-filter{display:flex;gap:6px;flex-wrap:wrap}
.o-filter button{min-height:36px;padding:0 14px;border-radius:18px;border:1.5px solid #D9DCD5;background:#fff;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.o-filter button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.o-batch{border-left-width:6px}
.mc0{border-left-color:#2F55D4}.mc1{border-left-color:#1F7A5A}.mc2{border-left-color:#B4541B}.mc3{border-left-color:#7A3FB0}
.mc4{border-left-color:#A1261B}.mc5{border-left-color:#0E7C86}.mc6{border-left-color:#8A6D00}.mcn{border-left-color:#B9BDB4}
.o-filter button.mc0,.o-filter button.mc1,.o-filter button.mc2,.o-filter button.mc3,.o-filter button.mc4,.o-filter button.mc5,.o-filter button.mc6,.o-filter button.mcn{border-left-width:6px}
.o-qty{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.o-line .o-qty small{width:auto;display:inline;font-size:12px;color:var(--ink-2)}
.o-line-wrap{border-top:1px solid #EEF0EB}
.o-line-wrap .o-line{border-top:none}
.o-total .o-line-wrap{border-top-color:#2E3D50}
.o-line-more{display:flex;align-items:center;gap:8px;padding:0 14px 10px;font-size:13px;color:var(--ink-2)}
.o-line-more span{flex:1}
.o-line-more button{min-height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ink);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.o-line-more button.danger{border-color:#E2C2BE;color:var(--red)}
.o-total .o-line-more{color:#C9D0D8}
.o-tag{font-style:normal;font-size:11px;padding:1px 6px;border-radius:5px;background:#FFE1C4;color:#7A3410}
.o-tag-ship{background:#D6E8FF;color:#1C4E8A}
.o-deliv-box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line);margin-top:10px}
.o-deliv-box h3{font-size:14px;font-weight:700}
.o-check{flex-direction:row;align-items:center;gap:8px;font-size:15px;font-weight:700;min-height:36px}
.o-check input{width:20px;height:20px;min-height:0}
.o-serv{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}
.o-serv button{min-height:52px;border-radius:10px;border:1.5px solid #D9DCD5;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;cursor:pointer;color:var(--ink)}
.o-serv button small{font-weight:500}
.o-serv button.on{border-color:var(--blue);background:#EEF2FC}
.o-deliv-box textarea{min-height:64px;font-size:15px}
.deliv-note{margin:6px 0 0;padding:6px 10px;border-radius:8px;background:#FFF8E6;font-size:13px}
.c-range{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.c-range label{flex:1;min-width:130px;font-size:12px;color:var(--ink-2);font-weight:600}
.c-range input[type=date]{min-height:44px;font-size:15px;padding:0 10px;width:100%}
.c-range-q{flex:1 0 100%}
.c-range .btn{min-height:44px}
.o-tr2{grid-template-columns:1fr auto}
.o-cell.red{background:#FBE9E7}
.o-cell.red b{color:var(--red)}
.o-cell.ro{cursor:default}
.o-order-btn{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 4px 0;border:none;background:none;text-align:left;font-size:16px;font-weight:700;cursor:pointer;color:var(--ink)}
.o-order-btn small{font-size:12px;color:var(--ink-2);font-weight:500}
.o-order-btn em{font-style:normal;font-size:12px;color:var(--blue);font-weight:600;white-space:nowrap}
.o-viewbar{display:flex;align-items:center;gap:8px;padding:8px 16px 0}
.o-viewbar button,.o-viewbar a.o-back{min-height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--ink);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center}
.o-viewbar span{font-size:13px;color:var(--ink-2)}
/* 검수자 화면: 지금 검수 중인 사람 이름을 오른쪽에 라벨+이름 묶음으로 보여준다(검수 목록 화면
   우상단의 이름 칩과 같은 느낌) */
.vf-who{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.vf-who small{font-size:11px;color:var(--ink-2)}
.vf-who b{font-size:13px;font-weight:700;color:var(--ink)}
.vf-incomplete{width:100%;text-align:center}
.o-filter-top{padding:8px 16px 0}
.o-extra-row.red{background:#FBE9E7}
.o-extra-row.red b{color:var(--red)}

/* 새 발주 흐름: 3개 탭 · 수량 칩 · 넘기기 */
.o-seg3{grid-template-columns:repeat(3,1fr)}
.o-seg3 button{font-size:13px;padding:0 2px;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-seg3 i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.o-cell{scroll-margin-top:140px;scroll-margin-bottom:300px}
.o-echips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-2)}
.o-echip{display:inline-flex;align-items:center;gap:0;padding:0 2px 0 10px;height:32px;border-radius:16px;background:#F1F2EE;color:var(--ink);font-size:15px;font-weight:700}
.o-echip.neg{background:#FBE3E1;color:var(--red)}
.o-echip button{width:30px;height:30px;border:none;background:none;color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer;border-radius:15px}
.o-pad{gap:4px}
.o-pad-head>div:first-child b{font-size:15px}
.o-go.send{background:var(--green)}
.o-note-top{padding:6px 4px 0}
.o-empty{line-height:1.7}
.c-alert{display:block;padding:14px 16px;border-radius:14px;background:#FFF1E4;border:1px solid #F0C9A4;color:#7A3410;font-weight:600;font-size:14px}
.c-alert:hover{text-decoration:none;border-color:#B4541B}
.announce{background:#EAF2FF;border:1px solid #C7DBFA;border-radius:14px;padding:12px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.announce p{margin:0;font-size:14px;color:#1E3FA8;line-height:1.5}
.announce p b{font-size:12px;background:#1E3FA8;color:#fff;border-radius:6px;padding:1px 6px;margin-right:6px;font-weight:600;vertical-align:1px}
/* 발주내역·입금내역의 "백업(CSV로 저장)" 링크 — 누르면 서버가 Content-Disposition: attachment로
   내려주는 CSV가 휴대폰에 바로 저장(다운로드)된다. 제목/안내 글과 한 줄에 나란히 보이도록 묶는다. */
.c-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.c-toolbar-row .m-hint{margin:0}
.c-backup-link{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 12px;border-radius:9px;background:#EAF2FF;border:1px solid #C7DBFA;color:#1E3FA8;font-size:12px;font-weight:700;white-space:nowrap}
.c-backup-link:hover{text-decoration:none;border-color:#1E3FA8}
/* 중상 홈 화면 공지 바로 밑 "사용법" 링크(출고장 사용법 페이지로 이동) */
.c-help-link{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;background:#EAF2FF;border:1px solid #C7DBFA;color:#1E3FA8;font-weight:700;font-size:14px}
.c-help-link span{font-weight:400;font-size:12px;color:#3056B0}
.c-help-link:hover{text-decoration:none;border-color:#1E3FA8}
/* 출고장 사용법 페이지: 번호 매긴 단계 설명 */
.c-help-intro p{margin:0;line-height:1.6;color:var(--ink-2);font-size:14px}
.c-help-group h2{margin:0 0 10px;font-size:16px}
.c-help-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.c-help-steps li{line-height:1.6;font-size:14px;color:var(--ink)}
.c-help-notes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.c-help-notes li{line-height:1.6;font-size:13px;color:var(--ink-2)}

/* 발주서(거래처 합쳐 보기) · 오늘 발주 목록 */
.o-seg3 i.dot{min-width:0;width:8px;height:8px;padding:0;border-radius:4px}
.o-doc-head{display:flex;align-items:baseline;gap:8px;padding:2px 4px 0}
.o-doc-head b{font-size:18px}
.o-doc-head em{font-style:normal;font-size:12px;color:var(--orange);font-weight:700}
.o-doc{border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden}
.o-doc .o-line-wrap:first-child{border-top:none}
.o-pad-s{padding:14px}
.o-line-name{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.o-parts{display:flex;flex-wrap:wrap;gap:4px}
.o-part{font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;background:#F1F2EE;border-left:3px solid #B9BDB4;color:var(--ink)}
.o-part.mc0{border-left-color:#2F55D4}.o-part.mc1{border-left-color:#1F7A5A}.o-part.mc2{border-left-color:#B4541B}.o-part.mc3{border-left-color:#7A3FB0}.o-part.mc4{border-left-color:#A1261B}.o-part.mc5{border-left-color:#0E7C86}.o-part.mc6{border-left-color:#8A6D00}
.o-mode{display:inline-flex;margin:8px 16px 0;padding:2px;border-radius:10px;background:#EEF0EB}
.o-mode button{min-height:32px;padding:0 14px;border:none;border-radius:8px;background:transparent;font-size:13px;color:var(--ink);cursor:pointer}
.o-mode button.on{background:#fff;font-weight:700;box-shadow:0 1px 3px rgba(29,42,58,.15)}
.o-list .o-sticky{margin:0 -12px;padding-bottom:8px}
.o-order-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;color:var(--ink)}
.o-order-row:hover{border-color:var(--ink)}
.o-or-l{display:flex;flex-direction:column}
.o-or-l b{font-size:17px}
.o-or-l small{font-size:12px;color:var(--ink-2)}
.o-or-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px}
.o-or-r b{font-size:16px}
.o-cust-f{border:1px solid var(--line);border-radius:12px}
.o-deleted{border-radius:14px;background:#fff;border:1px dashed #B9BDB4;padding:12px 14px}
.o-deleted h3{font-size:13px;color:var(--ink-2);margin-bottom:6px}
.o-del-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:6px 0;text-decoration:line-through;color:var(--ink-2)}
.o-del-row button{min-height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ink);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);text-decoration:none}

/* 4단계: 구역별 피킹 · 검수 · 출고완료 */
.pick-card{color:var(--ink)}
.pick-card:hover{text-decoration:none;border-color:var(--ink)}

.zone-list{gap:0}
.zone-item{border-left:4px solid #D9DCD5}
.zone-item.zone-working{border-left-color:var(--blue)}
.zone-item.zone-done{border-left-color:var(--green)}
.zone-item .m-item-main small{margin-top:2px}
.zone-badge{white-space:nowrap}
.zone-badge-wait{background:#EEF0EB;color:var(--ink-2)}
.zone-badge-working{background:#DCE4FA;color:#1E3FA8}
.zone-badge-done{background:#DDF1E2;color:#1F5C39}

.pk-list{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.pk-row{border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden}
.pk-row.done{background:#F3FAF5;border-color:#BFE3CB}
.pk-row.exception{background:#FFF6E9;border-color:#F0C9A4}
.pk-row-top{display:flex;align-items:stretch}
.pk-row-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border:none;background:none;text-align:left;cursor:pointer;color:inherit}
.pk-row-main:disabled{cursor:default;opacity:.7}
.pk-check{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:2px solid #D9DCD5;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:#fff}
.pk-row.done .pk-check{background:var(--green);border-color:var(--green)}
.pk-row.exception .pk-check{background:var(--orange);border-color:var(--orange)}
.pk-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-name b{font-size:16px;word-break:keep-all}
.pk-sub{font-size:12px;color:var(--ink-2)}
.pk-loc{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;background:#EEF0EB;color:var(--ink-2);align-self:flex-start}
.pk-qty{flex-shrink:0;font-size:18px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.pk-qty small{font-size:11px;font-weight:500;color:var(--ink-2)}
.pk-more{flex-shrink:0;width:44px;align-self:stretch;border:none;border-left:1px solid var(--line-2);background:none;font-size:20px;color:var(--ink-2);cursor:pointer}
.pk-more:hover{background:#FAFBF8}
.pk-exc{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px;border-top:1px solid #EEF0EB;margin-top:2px;padding-top:12px}
.pk-exc-reasons{display:flex;flex-wrap:wrap;gap:6px}
.pk-exc-reasons button{min-height:36px;padding:0 14px;border-radius:18px;border:1.5px solid #D9DCD5;background:#fff;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.pk-exc-reasons button.on{background:var(--orange);border-color:var(--orange);color:#fff}
.pk-exc-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);font-weight:600}
.pk-exc-field input{min-height:40px;font-size:15px;padding:0 10px}
.pk-exc-actions{display:flex;gap:8px}

/* 검수 화면 */
.vf-list{display:flex;flex-direction:column;gap:8px;padding:12px}
.vf-row{border-radius:14px;background:#fff;border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.vf-main{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vf-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.vf-name b{font-size:15px}
.vf-nums{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.vf-nums b{display:flex;flex-direction:column;align-items:flex-end;font-size:15px;color:var(--ink);line-height:1.25}
.vf-nums b small{font-size:11px;font-weight:500;color:var(--ink-2)}
.vf-nums b.vf-mismatch{color:var(--red);font-weight:800}
.vf-badge{align-self:flex-start;margin-top:2px}
.vf-ok{background:#DDF1E2;color:#1F5C39}
.vf-edited{background:#DCE4FA;color:#1E3FA8}
.vf-issue{background:#FBE3E1;color:var(--red)}
.vf-actions{display:flex;gap:6px}
.vf-btn{flex:1;min-height:40px;border-radius:10px;border:1.5px solid #D9DCD5;background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.vf-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vf-btn.warn.on{background:var(--red);border-color:var(--red)}
.vf-btn:disabled{opacity:.6}

/* 미수/입금관리 · 은행거래 */
.st-pending,.st-unmatched{background:#E4E6E1}
.st-confirmed{background:#DDF1E2;color:#1F5C39}
.st-rejected{background:#FBE3E1;color:var(--red)}
.st-auto,.st-check{background:#FFF3C4;color:#8A6D1E}
.st-done{background:#E8EEFB;color:#1E3FA8}
.st-withdraw{background:#FBE3E1;color:var(--red)}
.st-vendor{background:#FFE1C4;color:#7A3410}
.st-noted{background:#E4E6E1;color:var(--ink-2)}
.balance-row td{font-weight:700}
.tbl .row-off td{color:var(--ink-2)}

/* 은행 입출금내역 — 행 색 (은행거래 상태에 따라) */
.tbl.tbl-thin td{padding:7px 14px}
.tbl.tbl-thin th{padding:8px 14px}
.tbl tr.bk-row{cursor:pointer}
.tbl tr.bk-noted{background:#F1F2EE}
.tbl tr.bk-in-pending{background:#FFF9E2}
.tbl tr.bk-in-done{background:#EAF0FC}
.tbl tr.bk-vendor-pending{background:#FFF1E2}
.tbl tr.bk-vendor-done{background:#E6F6EA}
.tbl tr.bk-out-unmatched{background:#FCEAE8}
.tbl tr.bk-out-pending{background:#FFF9E2}
.tbl tr.bk-out-done{background:#EEF7D4}
.tbl tr.bk-detail{display:none}
.tbl tr.bk-detail.open{display:table-row}
.tbl tr.bk-detail td{background:#FAFAF7;border-top:none;padding:10px 14px}
.bk-detail-inner{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;width:100%;text-align:right}
.bk-detail-inner .m-hint{text-align:right;flex-basis:100%;order:99}
.bk-detail-inner > span{margin-right:auto}
.bk-filters{align-items:flex-end}
.bk-filters input[type=search]{width:220px}
.bk-filters input[type=date]{width:150px}
.bk-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;flex-wrap:wrap}
.recv-total{display:flex;gap:24px;align-items:baseline;padding:2px 20px 16px;flex-wrap:wrap}
.recv-total b{font-size:22px}
.recv-total span{color:var(--ink-2);font-size:13px;margin-right:6px}
.mapping-tbl{overflow-x:auto}
.mapping-tbl table{border-collapse:collapse;width:100%;font-size:13px}
.mapping-tbl th,.mapping-tbl td{border:1px solid var(--line);padding:6px 8px;white-space:nowrap}
.mapping-tbl select{min-height:36px;font-size:12px}
.mapping-tbl th{background:var(--line-2)}

/* ───────── 출고장 원본 양식 (관리자, 종이 그대로의 틀) */
.lg-meta{display:flex;gap:12px;align-items:flex-end;margin:16px 0 8px;flex-wrap:wrap}
.lg-meta-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}
.lg-meta-f input{min-height:38px;border:1.5px solid var(--ink);border-radius:var(--r-sm);padding:0 10px;background:var(--mark);font-weight:600;width:160px}
.lg-meta-title{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);min-width:220px}
.lg-meta-title-label{text-align:center}
.lg-meta-title input{min-height:44px;border:1.5px solid var(--ink);border-radius:var(--r-sm);padding:0 12px;font-size:20px;font-weight:800;text-align:center}
.lg-note{display:block;width:100%;border:1px dashed var(--line);border-radius:var(--r-sm);padding:6px 10px;font-size:12px;color:var(--ink-2);background:transparent;margin:6px 0}
.lg-cols{display:grid;grid-template-columns:2.1fr 1fr;gap:16px;align-items:start;margin-top:10px}
@media (max-width:900px){.lg-cols{grid-template-columns:1fr}}
.lg-col{display:flex;flex-direction:column;gap:14px}
.lg-block{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:10px;overflow:hidden}
.lg-in{border:none;background:transparent;font:inherit;color:inherit;padding:4px 6px;width:100%;border-radius:6px}
.lg-in:hover{background:var(--line-2)}
.lg-in:focus{background:#fff;outline:2px solid var(--blue);outline-offset:-1px}
.lg-title{font-weight:800;font-size:15px;margin-bottom:6px;background:var(--line-2);border-radius:var(--r-sm)!important}
.lg-tablewrap{overflow-x:auto}
.lg-table{border-collapse:collapse;width:100%;table-layout:fixed}
.lg-table td{border:1px solid var(--line);padding:0;min-width:64px}
.lg-table tr.lg-th-top td,.lg-table tr.lg-th td{background:var(--line-2)}
.lg-table tr.lg-th-top input,.lg-table tr.lg-th input{font-weight:700;font-size:12px;text-align:center}
.lg-rowlbl{font-weight:600;font-size:13px}
.lg-cell{background:var(--mark);font-weight:600;text-align:center}
.lg-table-pairs td.lg-pair-lbl,.lg-table-list td.lg-pair-lbl{width:46%}
.lg-inline-row{display:flex;gap:10px;flex-wrap:wrap;padding:6px 2px}
.lg-inline-cell{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.lg-inline-cell .lg-rowlbl{width:64px;font-weight:600;font-size:13px}
.lg-inline-cell .lg-cell{width:70px}
.lg-freeform{width:100%;border:none;background:var(--mark);border-radius:var(--r-sm);padding:10px;font:inherit;resize:vertical}
.lg-freeform:focus{outline:2px solid var(--blue);outline-offset:-1px}
.lg-saved{animation:lg-flash .9s ease}
@keyframes lg-flash{0%{box-shadow:0 0 0 2px var(--green) inset}100%{box-shadow:0 0 0 0 transparent inset}}
.lg-save-err{box-shadow:0 0 0 2px var(--red) inset}