/* 우리 트레이더스 — 로그인 뒤 화면 공용 스타일
   v0.90.0 (2026-11-03 자코 「각 메뉴에 들어갔을 때 이질감 없이 · 갑자기 다른 사이트에 온 느낌」): 공개 홈페이지(site/index.html)와 같은 파랑 · 남색 · 흰 머리줄.
   예전 파랑 #0f3d8c → 홈페이지 단추 파랑 #1f4fd6 · 남색 #0e1b33 → 홈페이지 맨 위 띠 · 바닥 줄 남색 #081a2e */
:root{
  color-scheme:light;
  --ink:#0e1420; --ink2:#3b4658; --mute:#77829a; --line:#dee4ef;
  --bg:#f5f7fa; --card:#ffffff; --bg2:#f7f9fc; --bg3:#e9eef7;
  --brand:#1f4fd6; --brand-soft:#e8eefc; --accent:#e07b12; --accent-soft:#fdf0dd;
  --navy:#081a2e; --panel:#081a2e; --panel-ink:#dfe7f5; --panel-line:#23324f; --panel-mute:#8fa0bd;
  --ok:#1c7a4a; --ok-soft:#dff3e6; --bad:#b3261e; --bad-soft:#fdecea;
  --radius:4px;
}
/* 어두운 테마는 끈다 (2026-10-15 자코 「크롬 다크모드 해제」) — 브라우저 · 윈도우가 다크여도 항상 밝은 화면. 다시 켜려면 <html data-theme="dark"> 로만. */
:root[data-theme="dark"]{ --ink:#e9eef8; --ink2:#b3bdd0; --mute:#7f8ba3; --line:#253044; --bg:#0b0f18; --card:#121826; --bg2:#0f1521; --bg3:#18202f;
  --brand:#7ea3f5; --brand-soft:#16233c; --accent:#f0a24a; --accent-soft:#2a1f11; --panel:#101a2c; --panel-line:#26344d;
  --ok:#6ed79f; --ok-soft:#12301f; --bad:#ff8a80; --bad-soft:#3a1614; }
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;background:var(--bg);color:var(--ink);word-break:keep-all;overflow-wrap:break-word;font-size:15px;line-height:1.6}
.mono{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--brand)}
[hidden]{display:none!important}

/* 머리 — 공개 홈페이지를 내렸을 때의 흰 메뉴 줄과 같은 모양 (v0.90.0): 맨 위 얇은 남색 줄 = 홈페이지 맨 위 띠 색 · 같은 로고 · 밑줄 메뉴 · 파란 네모 단추 */
header.top{background:rgba(255,255,255,.97);color:var(--ink);position:sticky;top:0;z-index:30;border-top:3px solid var(--navy);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(10px)}
.bar{max-width:1120px;margin:0 auto;padding:10px 16px;min-height:64px;display:flex;align-items:center;gap:14px;position:relative}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.brand svg{width:34px;height:34px;flex:none}
.brand b{display:block;font-size:17px;letter-spacing:-.01em;white-space:nowrap;line-height:1.2}
.brand span{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.2em;color:var(--mute);line-height:1.2;margin-top:2px}
.topnav{display:flex;gap:2px;margin-left:14px;margin-right:auto}
.topnav a{position:relative;color:var(--ink2);text-decoration:none;font-size:15px;font-weight:500;padding:9px 12px;white-space:nowrap}
.topnav a:after{content:"";position:absolute;left:12px;right:calc(100% - 12px);bottom:3px;height:2px;background:currentColor;transition:right .25s}
.topnav a:hover{color:var(--ink)}
.topnav a:hover:after{right:12px}
.topnav a.on{color:var(--ink);font-weight:600}
.topnav a.on:after{right:12px;background:var(--brand)}
.me{text-align:right;font-size:13px;min-width:0;line-height:1.35}
.me b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.me span{color:var(--mute);font-size:12px}
.ghost{font:inherit;font-size:13px;padding:9px 12px;min-height:40px;border-radius:2px;border:1px solid var(--panel-line);background:transparent;color:var(--panel-ink);cursor:pointer;white-space:nowrap}
.menubtn{display:none}
/* 「+ 새 건」 (재설계 ① · v0.45.0 · 2026-10-16): 본사의 상품 문의 대신 등록 · 바로 발주 */
.newwrap{position:relative;margin-left:4px}
.newbtn{font:inherit;font-size:14px;font-weight:700;padding:9px 14px;min-height:40px;border-radius:2px;border:0;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap}
.newbtn:hover{filter:brightness(1.06)}
.newmenu{position:absolute;right:0;top:46px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:2px;box-shadow:0 12px 32px rgba(0,0,0,.18);min-width:260px;padding:6px;z-index:50;text-align:left}
.newmenu a{display:block;padding:9px 12px;border-radius:2px;text-decoration:none;color:var(--ink)}
.newmenu a:hover{background:var(--bg2)}
.newmenu b{display:block;font-size:14px}
.newmenu small{display:block;color:var(--mute);font-size:12px;line-height:1.4}

main{max-width:1120px;margin:0 auto;padding:22px 16px 80px}
h1{font-size:30px;font-weight:300;letter-spacing:-.025em;line-height:1.25;margin:6px 0 6px}   /* 홈페이지처럼 크고 얇은 제목 (v0.90.1) */
h2{font-size:18px;font-weight:600;margin:0 0 4px;letter-spacing:-.02em}
h3{font-size:15px;margin:0 0 10px}
p.sub{margin:0 0 18px;color:var(--mute);font-size:14px}
section.card,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.note{font-size:12.5px;color:var(--mute);line-height:1.6}
.ph{background:var(--accent-soft);color:var(--accent);border-bottom:1px dashed var(--accent);padding:0 4px;border-radius:2px}

/* 표 */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{font-size:12px;font-weight:600;color:var(--mute);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg2)}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--brand-soft)}
tr.sel td{background:var(--brand-soft)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.empty{padding:26px 12px;color:var(--mute);font-size:14px;text-align:center}
.thumbcell{width:52px}
.thumbcell img,.thumbcell .nothumb{width:40px;height:40px;border-radius:2px;object-fit:cover;display:block;border:1px solid var(--line);background:var(--bg3)}

/* 버튼 · 폼 */
.btn{font:inherit;font-size:14px;font-weight:600;padding:10px 16px;min-height:42px;border-radius:2px;border:0;background:var(--brand);color:#fff;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.warn{background:transparent;color:var(--bad);border:1px solid var(--line);font-weight:500}
.btn.red{background:var(--bad);color:#fff;border:1px solid var(--bad);font-weight:600}   /* 되돌리는 「취소」 단추 — 모든 단계 같은 색 · 누르면 경고 팝업 (자코 10-19) */
.btn.red:hover{filter:brightness(1.08)}
.btn.sm{padding:8px 12px;min-height:40px;font-size:13.5px}
:root[data-theme="dark"] .btn{color:#0b0f18} :root[data-theme="dark"] .btn.line{color:var(--ink)} :root[data-theme="dark"] .btn.warn{color:var(--bad)}
.btn:disabled{opacity:.55;cursor:default}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:10px 11px;min-height:42px;border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink)}
input[type=number]{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}   /* 홈페이지 입력칸과 같은 파란 테두리 (v0.90.1) */
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;padding:0;accent-color:var(--accent);flex:none}
.field{margin-bottom:14px}
.row{display:grid;gap:12px}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:repeat(3,1fr)}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:11px 13px;cursor:pointer;background:var(--bg);margin:0}
.chk .note{margin-left:auto}
.msg{display:none;margin-top:12px;padding:10px 12px;border-radius:2px;font-size:14px}
.msg.bad{display:block;background:var(--bad-soft);color:var(--bad)}
.msg.ok{display:block;background:var(--ok-soft);color:var(--ok)}
.tabs{display:inline-flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;background:var(--bg3);padding:4px;border-radius:2px}
.tabs button{border:0;background:transparent;color:var(--ink2);font:inherit;font-size:14px;font-weight:500;padding:9px 14px;min-height:40px;border-radius:2px;cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--card);color:var(--brand);font-weight:600}
.tabs button small{color:var(--mute);font-weight:500;margin-left:4px}
.tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--bg3);color:var(--ink2);white-space:nowrap}
.tag.amber{background:var(--accent-soft);color:var(--accent)}

/* 상태 딱지 */
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;background:var(--bg3);color:var(--ink2)}
.chip.need_match{background:var(--accent-soft);color:var(--accent)}
.chip.matched,.chip.ordered,.chip.shipped,.chip.customs{background:var(--brand-soft);color:var(--brand)}
.chip.arrived_cn,.chip.working{background:var(--accent-soft);color:var(--accent)}
.chip.received_kr,.chip.done,.chip.settled{background:var(--ok-soft);color:var(--ok)}
.chip.cancelled,.chip.hold{background:var(--bad-soft);color:var(--bad)}

/* 상품 카드 (문의 작성 · 상세 공용) */
.itemlist{display:grid;gap:12px}
.item{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2)}
.ipic label{display:block;cursor:pointer;margin:0}
.ipic .thumb,.ipic .upbtn,.ipic .nopic{width:116px;height:116px;border-radius:2px;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg3);object-fit:contain}
.ipic .upbtn{border-style:dashed;color:var(--mute);font-size:28px}
.ipic .nopic{color:var(--mute);font-size:12px;border-style:dashed}
.ipic .cap{display:block;text-align:center;font-size:11.5px;color:var(--mute);margin-top:6px;font-weight:400}
.ipic button.zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.ibody{display:grid;gap:8px;min-width:0}
.irow1{display:grid;grid-template-columns:minmax(0,1fr) 104px 96px 104px 40px;gap:8px;align-items:end}
.optbox label{font-size:11.5px;margin-bottom:4px}
.optrows{display:grid;gap:6px;margin-bottom:6px}
.optrow{display:grid;grid-template-columns:minmax(0,1fr) 110px 40px;gap:8px;align-items:center}
.optrow input{font-size:14px;padding:8px 9px}
.optrow .x{min-height:36px}
/* 문의 화면: 셀러 찾기(이름 · 회원코드 · 아이디) · 고른 셀러 · 즉석 등록 */
.wholist{border:1px solid var(--line);border-radius:2px;background:var(--card);max-height:264px;overflow:auto;margin-top:6px}
.wholist button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.wholist button:last-child{border-bottom:0}
.wholist button:hover{background:var(--bg2)}
.wholist small{display:block;color:var(--mute);font-size:12px}
.whopick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--accent);border-radius:2px;padding:8px 12px;background:var(--card);margin-top:6px;font-size:14px}
.whopick b{flex:1;min-width:0}
.whonew{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13px}
.whonew select{width:auto;min-width:200px}
.irow1 label{font-size:11.5px;margin-bottom:4px}
.x{border:0;background:none;color:var(--mute);font-size:20px;cursor:pointer;min-width:40px;min-height:42px;line-height:1}
.lkrow{display:flex;align-items:center;gap:6px;min-width:0}
.lkrow input{flex:1;min-width:0}
.lk{flex:0 0 46px;text-align:center;font-size:11px;font-weight:700;padding:4px 6px;border-radius:2px}
.lk.cn{background:var(--accent-soft);color:var(--accent)}
.lk.kr{background:var(--brand-soft);color:var(--brand)}
.lkrow a.url{flex:1;min-width:0;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 0}
.facts{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) 110px 110px;gap:8px}
.facts div{min-width:0}
.facts small{display:block;font-size:11.5px;color:var(--mute);margin-bottom:2px}
.facts b{display:block;font-weight:600;font-size:14.5px}
.ansrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px 52px}
.ansrow .memo{grid-column:1/-1}
.ansrow .sum{grid-column:1/-1;font-size:12.5px;color:var(--mute);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
.ansrow input{font-size:14px;padding:8px 9px}
.ansrow small{display:block;font-size:11px;color:var(--mute);margin-bottom:3px}
.pick{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--card);cursor:pointer;font-weight:400}
.opt:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.opt.dead{opacity:.55;cursor:not-allowed}
.opt .u2{min-width:0}
.opt .u2 b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-size:12.5px;font-weight:500;color:var(--brand)}
.opt .u2 small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.opt .pz{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-weight:600;white-space:nowrap;text-align:right}
.opt .pz small{display:block;font-size:11px;font-weight:500;color:var(--brand);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
/* 개당 단가 상자: 중국 개당 단가(위안) · 한국 개당 단가(한화) */
.unitbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.unitbox.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.unitbox>div{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:10px 12px;min-width:0}
.unitbox>div.hot{border-color:var(--brand);background:var(--brand-soft)}
.unitbox small{display:block;font-size:11.5px;color:var(--mute);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;margin:0 0 2px}
.unitbox b{display:block;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-size:22px;font-weight:600;line-height:1.3;white-space:nowrap}
.unitbox .hot b{color:var(--brand);font-size:26px}
.unitbox .sub{font-size:12px;color:var(--ink2);line-height:1.45;margin-top:3px;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-weight:400}
.ansrow .unitbox{grid-column:1/-1;margin-top:4px}

/* 금액 줄 */
.qline{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line)}
.qline span{color:var(--ink2)}
.qline b{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-weight:500;text-align:right}
.qline b.later{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--mute)}
.qtotal{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px}
.qtotal b{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-size:22px;font-weight:600}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
/* 금액 표 (v0.86.19 · 자코 10-27 「상세 페이지 크기를 좀 줄이고 간소화 · 가독성은 높여야지」) — 셀러 금액 · 본사 기준을 한 표에 나란히 · 숫자는 오른쪽 · 자리 맞춤 */
.mtbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.mtbl th,.mtbl td{padding:5px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.mtbl th{font-size:12px;font-weight:600;color:var(--ink2);text-align:right;white-space:nowrap;padding-top:0}
.mtbl thead th{background:none;vertical-align:top} .mtbl th.ml{text-align:left} .mtbl th.ml b{font-size:14px;color:var(--ink)} .mtbl th.ml small{display:inline;margin-left:8px}
.mtbl th small{display:block;font-size:11px;font-weight:400;color:var(--mute);margin-top:1px}
.mtbl td.ml{padding-left:0} .mtbl th.ml{padding-left:0} .mtbl td.ml span{color:var(--ink2)} .mtbl td.ml small{margin-left:8px;font-size:11.5px;color:var(--mute)}
.mtbl td.mv{text-align:right;white-space:nowrap;width:1%;min-width:96px;font-weight:600;color:var(--ink)}
.mtbl.two th.mv,.mtbl.two td.mv{min-width:118px} .mtbl.two th.mv:last-child,.mtbl.two td.mv:last-child{background:var(--bg2)}   /* 본사 기준 칸은 옅은 바탕 — 셀러에게 안 보이는 칸 */
.mtbl tr.later td.mv{font-size:12px;font-weight:600;color:var(--mute)}
.mtbl tr.tot td{border-top:1.5px solid var(--ink2);padding-top:7px;padding-bottom:7px} .mtbl tr.tot td.ml span{color:var(--ink);font-weight:700} .mtbl tr.tot td.mv{font-size:16px;font-weight:700}
.mtbl tr.unitk td.ml span{color:var(--ink);font-weight:700} .mtbl tr.unitk td.mv{font-size:17px;font-weight:800;color:var(--brand)}   /* 한국 개당 단가 — 크게 (예전 개당 단가 상자) */
.mtbl tr.unitc td.mv{font-size:14px;font-weight:700} .mtbl tbody tr:last-child td{border-bottom:0}
.mfoot{margin:6px 0 0!important;font-size:11.5px!important;line-height:1.5}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.grid2>*{min-width:0}
.sticky{position:sticky;top:84px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.flow{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:0}
.flow li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--mute);padding:6px 13px 6px 7px;border:1px solid var(--line);border-radius:99px;background:var(--card)}
.flow li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg3);color:var(--ink2);font-size:12px}
.flow li.on{color:var(--ink);border-color:var(--accent)}
.flow li.on b{background:var(--accent);color:#1a1205}
.flow li.done b{background:var(--brand);color:#fff}

/* 구매완료 뒤: 진행 7단계 · 단계 카드 (warehouse.js) */
.pipe{list-style:none;display:flex;margin:0 0 18px;padding:0 0 4px;overflow-x:auto}
.pipe li{flex:1 0 74px;position:relative;text-align:center;font-size:12px;color:var(--mute)}
.pipe li b{display:block;width:12px;height:12px;border-radius:50%;background:var(--line);margin:0 auto 7px;position:relative;z-index:1}
.pipe li::before{content:"";position:absolute;top:5px;right:50%;width:100%;height:2px;background:var(--line)}
.pipe li:first-child::before{display:none}
.pipe li.done b{background:var(--brand)}
.pipe li.done::before,.pipe li.now::before{background:var(--brand)}
.pipe li.done{color:var(--ink2)}
.pipe li.now b{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pipe li.now{color:var(--accent);font-weight:700}
.stepcard{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:14px;background:var(--bg2)}
.stephead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.stephead h3{margin:0}
.facts.f4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:10px}
.facts b.big{font-size:22px;color:var(--brand)}
.rlist{border:1px solid var(--line);border-radius:2px;background:var(--card);overflow:hidden}
.rrow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.rrow:last-child{border-bottom:0}
.rrow .x{min-height:32px;min-width:32px}
.rrow a{overflow-wrap:anywhere}
.grow{flex:1 1 140px;min-width:0}
.formrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.formrow.end{justify-content:flex-end;align-items:center}
.formrow.end .note{margin-right:auto}
.formrow.r3>div:not(.grow){flex:0 0 130px}
.formrow label{font-size:11.5px;margin-bottom:4px}
.shots{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.shotgroup small{display:block;font-size:11.5px;color:var(--mute);margin-bottom:5px}
.shotrow{display:flex;gap:6px;flex-wrap:wrap}
.shot{width:58px;height:58px;padding:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--bg3);cursor:zoom-in;display:block}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.add{display:grid;place-items:center;border-style:dashed;color:var(--mute);font-size:22px;font-weight:400;cursor:pointer;margin:0}
.shot.add:hover{border-color:var(--accent);color:var(--accent)}
.boxrow{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr 1fr 1fr 1.8fr 40px;gap:6px;margin-bottom:6px;align-items:center}   /* + 마킹 (028) */
.boxrow input{font-size:14px;padding:8px 9px}
.boxrow.headrow small{font-size:11px;color:var(--mute)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pgrid .w3{grid-column:span 3}
.pgrid label{font-size:11.5px;margin-bottom:4px}

#lightbox{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:rgba(6,10,20,.88);cursor:zoom-out;padding:16px}
#lightbox.on{display:grid}
#lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:2px;background:#fff}

/* 좁은 노트북 창: 옆에 견적 칸이 있어 상품 카드가 좁다 → 상품명·옵션을 윗줄에, 수량·단가를 아랫줄에 */
@media (max-width:1180px) and (min-width:981px){
  .grid2 .irow1{grid-template-columns:1fr 1fr 40px}
  .grid2 .irow1 .fname{grid-column:1/2}
  .grid2 .irow1 .fopt{grid-column:2/-1}
}
@media (max-width:980px){
  .grid2{grid-template-columns:1fr}
  .sticky{position:static}
  .split{grid-template-columns:1fr}
}
@media (max-width:860px){
  .menubtn{display:inline-grid;place-items:center;margin-left:auto;width:42px;height:42px;border-radius:2px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;cursor:pointer}
  .topnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:6px 16px 14px;background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(8,26,46,.16)}
  .topnav.open{display:flex}
  .topnav a{padding:14px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  .topnav a:after{display:none} .topnav a.on{color:var(--brand)}
  .me{display:none}
  .newbtn{padding:0 10px;font-size:13px;min-height:36px}
  .row.c2,.row.c3{grid-template-columns:1fr}
  .item{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px}
  .ipic .thumb,.ipic .upbtn,.ipic .nopic{width:76px;height:76px}
  .ibody{display:contents}
  .irow1{grid-template-columns:1fr 1fr 40px;grid-column:2}
  .irow1 .x{grid-column:3;grid-row:1}
  .irow1 > div:nth-child(4){grid-column:1/3}   /* 단가는 셋째 줄로 (× 자리인 40px 칸으로 흘러 들어가지 않게) */
  .optrow{grid-template-columns:minmax(0,1fr) 88px 40px}
  .unitbox,.unitbox.two{grid-template-columns:1fr}
  .irow1 .fname{grid-column:1/3}
  .facts{grid-template-columns:1fr 1fr;grid-column:2}
  .facts .wide{grid-column:1/-1}
  .lkrow,.pick,.ansrow,.optbox{grid-column:1/-1}
  .ansrow{margin-left:0;grid-template-columns:1fr 1fr}
  .ansrow .memo{grid-column:1/-1}
  .stepcard{padding:12px}
  .facts.f4{grid-template-columns:1fr 1fr;grid-column:auto}
  .stepcard .facts{grid-column:auto}
  .pgrid{grid-template-columns:1fr 1fr}
  .pgrid .w3{grid-column:1/-1}
  .boxrow{grid-template-columns:1fr 1fr 1fr}
  .boxrow.headrow{display:none}
  .boxrow .x{grid-column:3;justify-self:end}
  .formrow.r3>div:not(.grow){flex:1 1 120px}
  .formrow .btn{flex:1 1 auto}
}

/* 발주 목록의 작업 칸 — 기본(고정) · 바코드 · 합포장 · 재포장 체크 (2026-10-15 자코) */
.wsel{display:flex;flex-wrap:nowrap;gap:4px 6px;white-space:nowrap}   /* 작업 체크는 한 줄 (2026-10-16 자코) */
.wsel .chk{padding:3px 7px;font-size:12px;gap:5px;border-radius:2px;font-weight:500}
.wsel .chk input{margin:0}
.wsel .chk input:disabled+span{color:var(--mute)}
td.work{min-width:340px}
#list td.mono{white-space:nowrap}   /* 번호가 작업 칸에 밀려 줄바꿈되지 않게 */

/* 메뉴의 붉은 숫자 배지 — 내 차례인 건수 (2026-10-16 자코 「카톡처럼」) */
.topnav a .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:#e5484d;color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:1px}

/* 본사 직원 권한 — 세 단추 중 하나 (2026-10-16) */
.seg{display:inline-flex;gap:4px}
.seg .btn:disabled{opacity:1}

/* 구매 경고 표 (2026-10-16) */
.tag.red{background:var(--bad-soft);color:var(--bad)}

/* 관리 화면 공용 (v0.45.0 · index.html 에서 옮김 — 설정 화면 settings.html 과 거래처 홈이 같이 쓴다) */
form.add{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.filter{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--ink2)}
.filter select{width:auto;min-width:180px}
td select{width:auto;min-width:96px;font-size:14px;padding:6px 8px;min-height:38px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:15px;margin:0}
.kv dt{color:var(--mute);font-size:13px;padding-top:2px}
.kv dd{margin:0;font-weight:600}
#invitebox{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--panel);color:var(--panel-ink);padding:16px;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
#invitebox.on{display:block}
#invitebox .in{max-width:1120px;margin:0 auto}
#invitebox h3{margin:0 0 4px;font-size:15px}
#invitebox p{margin:0 0 10px;font-size:13px;color:var(--panel-mute)}
#invitebox .rowx{display:flex;gap:8px;flex-wrap:wrap}
#invitebox input{flex:1;min-width:200px;font-size:14px;border:1px solid var(--panel-line);background:#0a1426;color:var(--panel-ink)}
.setgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.setgrid small{display:block;font-size:11.5px;color:var(--mute);margin-top:4px;line-height:1.4}
@media (max-width:860px){ .setgrid{grid-template-columns:1fr 1fr} form.add{grid-template-columns:1fr 1fr} form.add .btn{grid-column:1 / -1} .kv{grid-template-columns:96px 1fr} }
/* v0.61.0 글꼴: Pretendard (자코 「글자가 깨지는 것 같고 뚜렷하지 않다」) — 숫자는 같은 폭으로 */
.mono,input[type=number]{font-variant-numeric:tabular-nums;letter-spacing:0}
/* v0.64.0 처리 단추 색 구분 (자코 10-19): 1688 구매 정보 = 주황 · 수정 = 연파랑 (완료 = 파랑 · 취소 = 빨강은 전부터) */
.btn.b1688{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);font-weight:600}
.btn.b1688:hover{background:#fbe3c2}
.btn.edit{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand);font-weight:600}
.btn.edit:hover{background:#d6e0f6}
/* v0.65.3 저장 단추 = 초록 (자코 「저장 단추도 색을 넣어 가독성」) — ✓ 저장됨 과 같은 색 */
.btn.save{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok);font-weight:600}
.btn.save:hover{background:#d3f0dc}

/* ── v0.73.0 대화 (036 · 자코 10-21 「실시간 채팅 · 파일 전송」 → 건별 대화 + 상대별 일반 방) ── 대화 메뉴(chat.html) · 상세 「대화」 카드 · 목록 줄 표시 */
.chatmain{max-width:none}
.cwrap{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh - 104px);min-height:480px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cside{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--bg2)}
.cside-h{padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px} .cside-h b{font-size:16px}
.crq{width:100%;min-height:34px;font-size:13px}
.crooms{flex:1;overflow-y:auto;padding:0 6px 10px}
.csec{font-size:11.5px;color:var(--mute);font-weight:600;padding:10px 8px 4px}
/* 방 한 줄 (v0.83.0 · 자코 10-23 「어수선해 정리가 필요」): [상대 동그라미] 제목 · 시각 / 상대 · 마지막 글 · 안 읽은 수 */
.citem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:2px;background:transparent;cursor:pointer;color:var(--ink);font:inherit}
.citem:hover{background:var(--bg3)} .citem.on{background:var(--brand-soft)}
.citem .cav{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;border:1px solid transparent}
.cav.h{background:#e6eefc;color:#1d4fb8;border-color:#c3d4f5} .cav.p{background:#f0e9fb;color:#5b37a3;border-color:#d9caf2} .cav.s{background:#e3f4ea;color:#17673f;border-color:#b9e2c9}   /* 역할 색 = 목록의 채팅 단추와 같다 */
.citem b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.citem small{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.citem .cwho{color:var(--ink2);font-weight:600} .citem .cpv.gone{font-style:italic}
.citem.unread b{font-weight:800} .citem.unread .cpv{color:var(--ink2)}
.citem .ct{font-size:11px;color:var(--mute);white-space:nowrap;justify-self:end}
/* 안 읽은 채팅 수 (v0.83.0 · 자코 10-23 「노란색 바탕에 빨간색 숫자 · 크기는 문의 숫자와 똑같이」) — 할 일 숫자(빨강 바탕 · 흰 숫자)와 구분 */
.cn{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ffd43b;color:#c92a2a;font-size:11px;font-weight:800;justify-self:end;line-height:1}
.cpane{display:flex;flex-direction:column;min-width:0;min-height:0}
.cpane-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)} .cpane-h h2{font-size:16px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cpane-h .note{margin:2px 0 0;font-size:12px}
.cpane-h .cback{display:none;flex:0 0 auto}
.cpane-empty{margin:auto;padding:24px;text-align:center;color:var(--mute);max-width:420px} .cpane-empty b{display:block;color:var(--ink2);font-size:15px;margin-bottom:6px}
.cthread{display:flex;flex-direction:column;min-height:0;flex:1;position:relative;background:var(--card)}
.cthread.drop{outline:2px dashed var(--brand);outline-offset:-4px}
.cmsgs{flex:1;overflow-y:auto;padding:12px 16px 14px;background:#f4f6fb;min-height:0}
.cthread.compact .cmsgs{flex:none;height:320px}
.clist{display:flex;flex-direction:column}
.cmore{display:block;margin:0 auto 8px}
.cempty{padding:36px 10px;text-align:center;color:var(--mute);font-size:13px}
.cday{display:flex;justify-content:center;margin:12px 0 4px} .cday span{font-size:11.5px;color:var(--mute);background:#e7ebf3;border-radius:999px;padding:3px 10px}
.crow{display:flex;flex-direction:column;max-width:76%;margin-top:9px} .crow.cont{margin-top:3px}
.crow.me{align-self:flex-end;align-items:flex-end} .crow.you{align-self:flex-start;align-items:flex-start}
.cname{font-size:11.5px;color:var(--ink2);margin:0 4px 3px;font-weight:600}
.cline{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.cbub{text-align:left;padding:8px 12px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;min-width:0}
.crow.you .cbub{background:#fff;border:1px solid var(--line);border-top-left-radius:4px}
.crow.me .cbub{background:#dfe8fb;border:1px solid #c8d6f3;border-top-right-radius:4px}
.crow.cont.you .cbub{border-top-left-radius:14px} .crow.cont.me .cbub{border-top-right-radius:14px}
.cbub a{color:var(--brand);text-decoration:underline}
.cbub.fileonly{padding:0;background:transparent!important;border:0!important}
.cmeta{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--mute);white-space:nowrap;padding-bottom:2px}
.crow.me .cmeta{align-items:flex-end} .crow.you .cmeta{align-items:flex-start}
.cun{color:var(--accent);font-weight:700;font-size:11px}
.cref{display:block;margin-top:6px;padding:5px 9px;border-radius:2px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--brand)!important;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfile.img img{display:block;max-width:240px;max-height:240px;border-radius:12px;border:1px solid var(--line);background:#fff;object-fit:contain}
.cfile .cdl{display:block;font-size:11px;color:var(--mute)!important;margin-top:3px;text-decoration:none!important}
.cfile.vid video{display:block;max-width:300px;max-height:240px;border-radius:12px;background:#000}
.cfile.doc{display:flex;align-items:center;gap:9px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink)!important;text-decoration:none!important;min-width:210px;max-width:320px}
.cbub:not(.fileonly) .cfile{margin-top:6px}
.cext{flex:0 0 auto;min-width:42px;height:42px;padding:0 4px;border-radius:2px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cfn{display:flex;flex-direction:column;min-width:0} .cfn b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfn small{font-size:11px;color:var(--mute)}
.cnote{font-size:12px;padding:6px 14px 0} .cnote:empty{display:none} .cnote.bad{color:var(--bad)} .cnote.ok{color:var(--mute)}
.cbar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.cbtns{display:flex;gap:6px;flex:0 0 auto} .cbtns .btn{min-height:38px;white-space:nowrap}
.cinput{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.cinput textarea{width:100%;resize:none;min-height:38px;max-height:132px;padding:8px 11px;font-size:13.5px;line-height:1.45;border-radius:2px;box-sizing:border-box;overflow-y:auto}
.csend{min-height:38px;padding:6px 18px;flex:0 0 auto}
.crefchip{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;max-width:100%;font-size:12px;background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:2px 4px 2px 10px}
.crefchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .crefchip .x{border:0;background:transparent;cursor:pointer;color:var(--brand);font-size:12px;padding:0 4px}
.cpicker{position:absolute;left:12px;bottom:64px;width:min(440px,calc(100% - 24px));max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 28px rgba(14,20,32,.16);padding:8px;z-index:6;display:flex;flex-direction:column;gap:6px}
.cpicker input{min-height:34px} .cplist{display:flex;flex-direction:column}
.cplist button{display:flex;gap:8px;align-items:baseline;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:2px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink)}
.cplist button:hover{background:var(--bg3)} .cplist button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .cplist small{color:var(--mute);white-space:nowrap}
.chatcard .cthread{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ctabs{display:flex;gap:6px;margin:0 0 8px;flex-wrap:wrap}
.ctabs button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink2)}
.ctabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.cdot{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:6px;border-radius:999px;background:#ffd43b;color:#c92a2a;font-size:11px;font-weight:800;vertical-align:middle;white-space:nowrap}
@media (max-width:760px){
  .cwrap{grid-template-columns:1fr;height:calc(100vh - 92px)}
  .cwrap .cpane{display:none} .cwrap.open .cside{display:none} .cwrap.open .cpane{display:flex}
  .cpane-h .cback{display:inline-flex}
  .crow{max-width:88%} .cfile.img img{max-width:200px} .cbtns .btn{padding:4px 8px}
  .cthread.compact .cmsgs{height:280px}
}

/* 확인 팝업 (v0.75.0 · WT.ask) — 발주 · 취소 전에 생기는 일을 보여 준다 */
.askwrap{position:fixed;inset:0;z-index:1000;background:rgba(14,20,32,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.askbox{background:var(--card);color:var(--ink);border-radius:4px;box-shadow:0 24px 60px rgba(14,20,32,.3);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px 16px;text-align:left}
.askbox h3{margin:0 0 10px;font-size:17px;line-height:1.35;color:var(--ink)}
.askbox.danger h3{color:var(--bad)}
.askbox .asksum{margin:0 0 12px;padding:8px 11px;border-radius:2px;background:var(--bg2);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink2)}
.askbox .asklist{margin:0 0 16px;padding:0 0 0 18px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.askbox .asklist li{margin:4px 0}
.askbox .askacts{display:flex;justify-content:flex-end;gap:8px}
a.newbtn{display:inline-flex;align-items:center;text-decoration:none}   /* 「+ 바로 발주」는 링크 (v0.75.0) */

/* v0.77.0 색 체계 (자코 10-21 「너무 빨강 파랑만 — 통일성은 갖추되 더 다양한 색」): 상태마다 한 색(칩 · 탭 앞 점 · 문의 카드 왼쪽 줄) · 발주 = 청록 · 취소 = 장미색 테두리 · 금액 = 주황 · 역할 = 본사 파랑 · 셀러 초록 · 거래처 보라 */
:root{--go:#0f766e;--go-hover:#115e59;--stop:#e11d48;--stop-line:#fecdd3;--stop-soft:#fff1f2;
  --st-checked:#ca8a04;--st-received:#f59e0b;--st-quoted:#8b5cf6;--st-need_match:#14b8a6;--st-matched:#3b82f6;--st-ordered:#6366f1;--st-arrived_cn:#f97316;--st-working:#eab308;--st-shipped:#06b6d4;--st-received_kr:#22c55e;--st-done:#10b981;--st-cancelled:#94a3b8;--st-hold:#f43f5e}
.btn.go{background:var(--go);border:1px solid var(--go);color:#fff} .btn.go:hover{background:var(--go-hover);border-color:var(--go-hover);filter:none}
.btn.red{background:var(--card);color:var(--stop);border:1px solid var(--stop-line);font-weight:700} .btn.red:hover{background:var(--stop-soft);border-color:var(--stop);filter:none}   /* 취소 단추는 모두 같은 모양 (10-19 「모든 단계 같은 색」) — 꽉 찬 빨강 → 장미색 테두리 */
.btn.danger{background:var(--stop);border:1px solid var(--stop);color:#fff;font-weight:700} .btn.danger:hover{filter:brightness(.95)}   /* 팝업의 마지막 「취소」 확인 */
.btn.back{background:#eef2ff;color:#4338ca;border:1px solid #a5b4fc;font-weight:700} .btn.back:hover{background:#e0e7ff;border-color:#6366f1;filter:none}   /* 「이전단계」 = 남색 (v0.86.2 자코 「색깔 좀 구분하기 좋게」) */
.btn.del{background:#f1f5f9;color:#334155;border:1px solid #94a3b8;font-weight:700} .btn.del:hover{background:#e2e8f0;border-color:#475569;filter:none}   /* 「삭제」 = 회색 — 취소(장미색)와 다른 색 */
/* 「처리」 묶음 격자 (v0.86.5 자코 「오와 열은 맞춰」) — 1688 구매 띠 · 창고 띠 모든 줄 같은 자리: 윗줄 [1688 구매 정보(2칸)] [입고 수량] [다음 단계] · 아랫줄 [취소] [이전단계] [삭제] [수정] · 없는 단추 칸은 비워 둔다 (.pgrid 는 입력 칸 격자라 이름을 따로) */
.actgrid{display:grid!important;grid-template-columns:repeat(3,68px);grid-template-rows:22px;grid-auto-rows:22px;gap:4px!important;align-items:stretch;justify-content:end;flex-wrap:nowrap}   /* 두 줄 3칸 (v0.86.9 자코 「버튼 크기를 줄여서라도 두 줄로 보기 좋게」 · v0.86.7 한 줄은 길었다) */
.actgrid > *{min-width:0;margin:0!important} .actgrid > .btn{width:100%;height:22px;min-height:22px!important;padding:0 3px!important;font-size:12px!important;line-height:1;white-space:nowrap;border-radius:2px}
/* 윗줄 [1688 정보 | 입고 수량] [수정] [다음 단계] · 아랫줄 [취소] [이전단계] [삭제] — 칸이 고정이라 줄마다 같은 x */
.actgrid .b1688,.actgrid .qn{grid-row:1;grid-column:1} .actgrid .gedit,.actgrid .edit{grid-row:1;grid-column:2} .actgrid .gnext{grid-row:1;grid-column:3}
.actgrid .gcx{grid-row:2;grid-column:1} .actgrid .gback,.actgrid .wkback{grid-row:2;grid-column:2} .actgrid .gdel{grid-row:2;grid-column:3}
/* 빈칸 없이: 수정이 없으면 다음 단계가 왼쪽으로 넓어지고(앞칸도 없으면 윗줄 전체) · 다음 단계가 없으면 수정 · 1688 정보가 넓어진다 · 아랫줄에 이전단계뿐이면 한 줄 전체 */
.actgrid:not(:has(.gedit,.edit)) .gnext{grid-column:2 / 4} .actgrid:not(:has(.gedit,.edit)):not(:has(.b1688,.qn)) .gnext{grid-column:1 / 4}
.actgrid:not(:has(.gnext)) .gedit,.actgrid:not(:has(.gnext)) .edit{grid-column:2 / 4} .actgrid:not(:has(.gnext)):not(:has(.gedit,.edit)) .b1688{grid-column:1 / 4}
.actgrid:not(:has(.gcx)):not(:has(.gdel)) .gback,.actgrid:not(:has(.gcx)):not(:has(.gdel)) .wkback{grid-column:1 / 4}
/* 아랫줄도 빈칸 없이 (v0.86.12): 취소만이면 한 줄 전체(출고 및 통관 「발주 취소」) · 이전단계가 없으면 취소가 2칸 · 삭제가 없으면 이전단계가 2칸 · 취소가 없으면 이전단계가 앞 2칸 */
.actgrid:not(:has(.gback,.wkback)) .gcx{grid-column:1 / 3} .actgrid:not(:has(.gback,.wkback)):not(:has(.gdel)) .gcx{grid-column:1 / 4}
.actgrid:not(:has(.gdel)) .gback,.actgrid:not(:has(.gdel)) .wkback{grid-column:2 / 4} .actgrid:not(:has(.gcx)) .gback,.actgrid:not(:has(.gcx)) .wkback{grid-column:1 / 3}
.actgrid:not(:has(.gcx)):not(:has(.gdel)) .gback,.actgrid:not(:has(.gcx)):not(:has(.gdel)) .wkback{grid-column:1 / 4}
.actgrid .qn{display:flex!important;flex-direction:row!important;align-items:center;gap:3px!important;height:22px}   /* orders.html 의 .buyacts .qn{flex-direction:column} 을 이긴다 */ .actgrid .qn small{display:inline!important;font-size:10.5px;color:var(--mute);white-space:nowrap;margin:0} .actgrid .qn input{flex:1 1 auto;width:auto!important;min-width:0;height:22px;min-height:22px!important;padding:0 4px!important;font-size:12px;box-sizing:border-box;text-align:center;-moz-appearance:textfield;appearance:textfield} .actgrid .qn input::-webkit-inner-spin-button,.actgrid .qn input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}   /* 위아래 화살표 자리 없이 — 46px 칸에 다섯 자리까지 */
.chip.received{background:#fef3c7;color:#92400e} .chip.checked{background:#fef9c3;color:#854d0e} .chip.quoted{background:#ede9fe;color:#5b21b6} .chip.need_match{background:#ccfbf1;color:#115e59}
.chip.matched{background:#dbeafe;color:#1e40af} .chip.ordered{background:#e0e7ff;color:#3730a3} .chip.arrived_cn{background:#ffedd5;color:#9a3412} .chip.working{background:#fef9c3;color:#854d0e}
.chip.shipped,.chip.customs{background:#cffafe;color:#155e75} .chip.received_kr{background:#dcfce7;color:#166534} .chip.done,.chip.settled{background:#d1fae5;color:#065f46}
.chip.cancelled{background:#f1f5f9;color:#475569} .chip.hold{background:#ffe4e6;color:#9f1239}
[data-st=checked]{--stc:var(--st-checked)} [data-st=received]{--stc:var(--st-received)} [data-st=quoted]{--stc:var(--st-quoted)} [data-st=need_match]{--stc:var(--st-need_match)} [data-st=matched]{--stc:var(--st-matched)} [data-st=ordered]{--stc:var(--st-ordered)} [data-st=arrived_cn]{--stc:var(--st-arrived_cn)}
[data-st=working]{--stc:var(--st-working)} [data-st=shipped],[data-st=customs]{--stc:var(--st-shipped)} [data-st=received_kr]{--stc:var(--st-received_kr)} [data-st=done],[data-st=settled]{--stc:var(--st-done)} [data-st=cancelled]{--stc:var(--st-cancelled)} [data-st=hold]{--stc:var(--st-hold)}
/* v0.77.2 탭 숫자 배지 색 — 상태 색의 진한 쪽(흰 굵은 숫자가 읽히게) */
[data-st=checked]{--stb:#a16207} [data-st=received]{--stb:#b45309} [data-st=quoted]{--stb:#6d28d9} [data-st=need_match]{--stb:#0f766e} [data-st=matched]{--stb:#1d4ed8} [data-st=ordered]{--stb:#4338ca} [data-st=arrived_cn]{--stb:#c2410c}
[data-st=working]{--stb:#a16207} [data-st=shipped],[data-st=customs]{--stb:#0e7490} [data-st=received_kr]{--stb:#15803d} [data-st=done],[data-st=settled]{--stb:#047857} [data-st=cancelled]{--stb:#475569} [data-st=hold]{--stb:#be123c}
/* v0.78.8 머리 오른쪽 — 「+ 바로 발주」 작게 · 이름 · 역할 · 로그아웃을 한 덩어리로 (자코 10-21 「쓸데없이 큰 거 같아 적당한 사이즈로 · 위 이미지 부분도 보기 좋게 개선」) */
/* v0.90.0 — 홈페이지 「상품 문의」 단추처럼 파란 네모 · 이름 상자는 홈페이지 로그인 표시처럼 흰 바탕 + 초록 점 */
.newbtn{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;padding:0 15px;min-height:36px;height:36px;border-radius:2px;background:var(--brand);text-decoration:none}
.newbtn:hover{background:#1a43b8;filter:none}
.mebox{display:flex;align-items:center;gap:9px;padding:3px 3px 3px 4px;border:1px solid var(--line);border-radius:999px;background:#fff;min-width:0}
.mebox .meav{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:13px}
.mebox .meav:after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#1c9a5a;border:2px solid #fff}
header.top .mebox .me{text-align:left;line-height:1.25} header.top .mebox .me b{font-size:13px;max-width:160px} header.top .mebox .me span{font-size:11.5px}
.mebox .mout{min-height:28px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;color:var(--ink2);border-color:transparent;background:var(--bg2)}
.mebox .mout:hover{color:var(--ink);background:var(--bg3)}
@media (max-width:560px){ .bar{gap:10px} .bar:has(.newwrap) .brand div{display:none} }   /* 폰: 「+ 바로 발주」가 있는 계정(본사 · 거래처)은 로고 글자를 빼야 단추 · 이름 상자 · ☰ 가 한 줄에 겹치지 않고 들어간다 */
/* 캡처 붙여넣기 (v0.81.0 · app.js pasteTo): 사진 칸에 잠깐 머물면 점선 테두리 + 「Ctrl+V 캡처 붙여넣기」 · 넣으면 잠깐 빛나고 아래에 알림 */
.pastable.pastehov{outline:2px dashed var(--accent);outline-offset:2px}
.pastetip{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;background:var(--panel);color:#fff;font-size:11.5px;font-weight:600;line-height:1.4;padding:3px 8px;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity .12s}
.pastetip.on{opacity:1}
.pasteflash{animation:pasteflash 1s ease-out}
@keyframes pasteflash{from{box-shadow:0 0 0 3px var(--accent)}to{box-shadow:0 0 0 3px transparent}}
.wttoast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1100;background:var(--panel);color:#fff;font-size:13.5px;line-height:1.45;padding:9px 16px;border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transition:opacity .15s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.wttoast.on{opacity:1} .wttoast.bad{background:var(--bad);font-weight:600}   /* 안 된 일 (v0.86.8 빈 그림 · 엑셀 셀 복사) */
/* 알림 소리 (v0.82.0 · 038): 소리가 막혔을 때 왼쪽 아래 단추 · 설정의 「알림」 줄 (admin.js notifySection) */
.ntblock{position:fixed;left:16px;bottom:16px;z-index:1100;font:inherit;font-size:13px;font-weight:700;padding:10px 14px;border-radius:2px;border:0;background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer;max-width:calc(100vw - 32px);text-align:left}
.ntrows{display:grid;gap:8px;margin:4px 0 2px}
.ntrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:2px;background:var(--bg2)}
.ntrow input[type=checkbox]{width:20px;height:20px;cursor:pointer}
.ntrow label{margin:0;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit}
.ntrow b{display:block;font-size:14.5px;color:var(--ink)}
.ntrow small{display:block;color:var(--mute);font-size:12.5px;line-height:1.45;font-weight:400}
.ntrow .snd{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:11.5px;font-weight:700;vertical-align:1px}
.ntrow .btn{white-space:nowrap}
.ntrow.off b{color:var(--mute)}
@media (max-width:560px){.ntrow{grid-template-columns:auto minmax(0,1fr)} .ntrow .btn{grid-column:2;justify-self:start}}
/* 채팅 숫자 — 위 메뉴 「채팅」 옆도 노란 바탕 빨간 숫자 (v0.83.0) · 크기는 「문의」 숫자와 같다 */
.topnav a .badge.cbadge{background:#ffd43b;color:#c92a2a;font-weight:800}
/* 채팅 글 고치기 · 지우기 (v0.83.0 · 039): 내 글에 마우스를 올리면 오른쪽 위에 [수정] [삭제] · 손가락 화면은 글을 누르면 */
.crow{position:relative}
.cacts{position:absolute;top:50%;right:100%;margin-right:8px;transform:translateY(-50%);display:none;gap:2px;padding:2px;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 4px 12px rgba(14,20,32,.12);z-index:2}
.crow.me:hover .cacts,.crow.me.acts .cacts{display:flex} .crow.editing .cacts{display:none!important}
.cacts button{border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink2);padding:2px 9px;border-radius:2px;cursor:pointer;line-height:1.6}
.cacts button:hover{background:var(--bg3)} .cacts button.del{color:var(--bad)}
.ced{font-size:10.5px;color:var(--mute)}
@media (max-width:760px){.cacts{top:-16px;right:2px;margin:0;transform:none}}   /* 좁은 화면은 글 위에 (왼쪽 자리가 좁다) */
.cbub.cdel{background:transparent!important;border:1px dashed #cfd6e4!important;color:var(--mute);font-style:italic}
.cedit{display:flex;flex-direction:column;gap:6px;width:min(440px,62vw);max-width:100%;background:#fff;border:1px solid var(--brand);border-radius:12px;padding:8px;box-shadow:0 0 0 3px var(--brand-soft)}
.cedit textarea{width:100%;resize:none;min-height:38px;max-height:200px;padding:7px 10px;font-size:13.5px;line-height:1.45;border-radius:8px;box-sizing:border-box;overflow-y:auto}
.cedit-b{display:flex;align-items:center;gap:6px;justify-content:flex-end} .cedit-b small{margin-right:auto;font-size:11px;color:var(--mute)}