/* =====================================================================
   작업 화면 (입고 · 출고 · 이동 · 실사) — 데스크톱 전용.

   화면 구조를 왼쪽(입력) / 오른쪽(결과)으로 가른 이유:
   스캔하는 사람의 눈은 왼쪽 위에 고정돼 있고, 표는 곁눈으로 흐른다.
   입력창이 표 위에 있으면 줄이 쌓일수록 눈이 위아래로 왔다갔다 해야 한다.
   ===================================================================== */

.work {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--h-header) - var(--sp-5) * 2);
  gap: var(--sp-3);
}

/* ---------- 상단 바 ---------- */

.work__bar {
  display: flex; align-items: flex-end; gap: var(--sp-3);
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  flex: 0 0 auto;
}
.work__badge {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--ux-blue); color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}
.work__ttl { font-size: 17px; font-weight: 850; letter-spacing: -.035em; padding-bottom: 2px; }
.work__f { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.work__f label { font-size: 10.5px; font-weight: 750; color: var(--ux-ink-500); }
.work__f .select, .work__f .input { height: 34px; }
.hint {
  font-family: var(--font); font-size: 10.5px; font-weight: 700;
  color: var(--ux-ink-500); background: var(--ux-canvas);
  border: 1px solid var(--ux-line); border-radius: 5px; padding: 3px 7px;
}

/* ---------- 본문 ---------- */

.work__main {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--sp-3);
}
.work__left { display: flex; flex-direction: column; min-height: 0; }
.work__right { min-height: 0; display: flex; }
.work__table { flex: 1; max-height: 100%; }

/* ---------- 스캔 입력 ----------
   화면에서 가장 큰 입력창이다. 하루 종일 여기만 쓴다. */

.scanbox {
  display: flex; align-items: center; gap: 11px;
  background: var(--ux-surface);
  border: 2px solid var(--ux-blue);
  border-radius: var(--r-md);
  padding: 0 14px;
  height: 60px;
  box-shadow: 0 0 0 4px var(--ux-blue-soft);
  color: var(--ux-blue);
}
.scanbox input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font-family: var(--font);
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ux-ink-900);
}
.scanbox input::placeholder { color: var(--ux-ink-400); font-weight: 700; }

/* 잘못 찍었을 때 화면이 흔들린다. 소리를 못 듣는 환경이 많다. */
.is-shake { animation: shake .3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0) }
  20% { transform: translateX(-7px) }
  40% { transform: translateX(6px) }
  60% { transform: translateX(-4px) }
  80% { transform: translateX(2px) }
}

/* ---------- 자동완성 ---------- */

.ac-wrap { position: relative; }
.ac {
  position: absolute; z-index: var(--z-drop);
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--ux-surface);
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 320px; overflow-y: auto;
}
.ac:empty { display: none; }
.ac--wide { position: relative; top: 0; margin-top: 8px; }
.ac__row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; cursor: pointer;
  border-bottom: 1px solid var(--ux-line);
}
.ac__row:last-child { border-bottom: none; }
.ac__row:hover { background: var(--ux-blue-soft); }
.ac__n { font-size: 12.5px; font-weight: 750; letter-spacing: -.01em;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac__m { font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); }
.ac__empty { padding: 14px; text-align: center; font-size: 12px; font-weight: 650; color: var(--ux-ink-400); }

/* ---------- 방금 담은 것 ----------
   물건을 보면서 곁눈으로 확인하는 카드.
   표 맨 윗줄은 줄이 쌓이면 시선에서 벗어난다. */

.lastcard {
  margin-top: 12px;
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-left: 4px solid var(--ux-blue);
  border-radius: var(--r-md);
  padding: 13px 14px;
}
.lastcard--bad { border-left-color: var(--ux-danger); background: var(--ux-danger-soft); }
.lastcard__k {
  font-size: 10px; font-weight: 850; letter-spacing: .06em;
  color: var(--ux-blue);
}
.lastcard--bad .lastcard__k { color: var(--ux-danger); }
.lastcard__row { display: flex; align-items: center; gap: 11px; margin-top: 8px; }
.lastcard__img {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--r-sm); border: 1px solid var(--ux-line);
  background: var(--ux-surface-soft) center/cover no-repeat;
  display: grid; place-items: center; color: var(--ux-ink-400);
}
.lastcard__n {
  font-size: 15px; font-weight: 850; letter-spacing: -.03em; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lastcard__m { font-size: 11px; font-weight: 650; color: var(--ux-ink-500); margin-top: 2px; }
.lastcard__qty {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--ux-line);
  font-size: 11px; font-weight: 750; color: var(--ux-ink-500);
}
.lastcard__qty b {
  margin-left: auto;
  font-size: 30px; font-weight: 900; letter-spacing: -.05em;
  color: var(--ux-ink-950); font-variant-numeric: tabular-nums;
}
.lastcard--bad .lastcard__qty b { color: var(--ux-danger); }
.lastcard__warn {
  margin-top: 8px; font-size: 11px; font-weight: 750; color: var(--ux-danger);
  display: flex; align-items: center; gap: 5px;
}

/* 새로 담길 때마다 한 번 번쩍인다. 소리 없이도 "들어갔다"가 보인다. */
.lastcard.is-flash { animation: flash .42s cubic-bezier(.2,.8,.2,1); }
@keyframes flash {
  0%   { transform: scale(.985); box-shadow: 0 0 0 0 var(--ux-blue-soft); }
  35%  { transform: scale(1.008); box-shadow: 0 0 0 8px var(--ux-blue-soft); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* ---------- 표 안 수량 입력 ---------- */

.qtyinput {
  width: 100%; height: 30px;
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-xs);
  background: var(--ux-surface);
  padding: 0 8px;
  font-family: var(--font);
  font-size: 14px; font-weight: 800;
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ux-ink-900);
}
.qtyinput:focus {
  outline: none; border-color: var(--ux-blue);
  box-shadow: 0 0 0 3px var(--ux-blue-soft);
}
.qtyinput.is-bad { border-color: var(--ux-danger); color: var(--ux-danger); }

/* 재고가 모자란 줄은 확정 전에 보인다 */
.tbl tbody tr.is-bad td { background: var(--ux-danger-soft); }
.tbl tbody tr.is-bad td:first-child { box-shadow: inset 3px 0 0 var(--ux-danger); }
.tbl tbody tr.is-last td { background: var(--ux-blue-soft); }
.tbl tbody tr.is-last.is-bad td { background: var(--ux-danger-soft); }

/* ---------- 하단 ---------- */

.work__foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.work__total { display: flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 700; color: var(--ux-ink-500); }
.work__total b { font-size: 17px; font-weight: 850; color: var(--ux-ink-900); font-variant-numeric: tabular-nums; margin-left: 4px; }


/* 실사에서 전산과 실제가 같은 줄은 물러나 있게 한다.
   전부 똑같이 진하면 어디를 고쳐야 하는지 안 보인다. */
.tbl tbody tr.is-same td { color: var(--ux-ink-400); }
.tbl tbody tr.is-same .cell-item__name { font-weight: 650; }
.tbl tbody tr.is-same .qtyinput { border-color: var(--ux-line); color: var(--ux-ink-500); }

/* 수량 입력칸이 눌리지 않게 최소 폭을 준다.
   재고가 네 자리인 품목이 흔한데 칸이 좁아지면 앞자리만 보이고,
   그러면 작업자가 731을 7로 읽는다. */
.qtyinput {
  min-width: 74px;
}
/* 숫자 입력의 스피너 화살표는 폭만 먹는다.
   여기서는 타이핑하거나 스캔하지, 화살표를 누르지 않는다. */
.qtyinput::-webkit-outer-spin-button,
.qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtyinput { -moz-appearance: textfield; appearance: textfield; }

/* 규격 열이 길어서 다른 열을 밀어내지 않게 한다. */
.work__table .tbl td:nth-child(3) {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}


/* 한 줄 상태. 카드도 띠도 아니다 — 스캔 칸에 붙는 각주다. */
.workhint {
  margin-top: 7px; padding: 0 2px;
  font-size: 11px; font-weight: 650; line-height: 1.5;
  color: var(--ux-ink-400);
}
.workhint b { color: var(--ux-ink-700); font-weight: 800; }

/* 못 하는 이유는 눌러서 바로 고치게 한다. 읽고 스스로 찾게 두지 않는다. */
.workhint--todo {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left; cursor: pointer;
  margin-top: 8px; padding: 8px 10px;
  background: var(--ux-warn-soft, #fff7ed);
  border: 1px solid var(--ux-warn, #f59e0b);
  border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 750; color: var(--ux-ink-800);
}
.workhint--todo:hover { filter: brightness(.98); }

/* ── 스캔 자리 ─────────────────────────────────────────────────
   60px 입력칸이라 옆의 거래처·위치 칸과 무게가 같았다.
   이 화면에서 사람이 하는 일은 '찍는 것' 하나뿐이므로 그 자리가 먼저 읽혀야 한다.
   ⚠ 파란 테두리 + 파란 그림자를 늘 두르고 있어서, 커지면 오히려 경고처럼 보인다.
      평소에는 차분하게 두고 **커서가 있을 때만** 파랗게 살린다. */
.scanbox {
  flex-direction: column; align-items: stretch; justify-content: center;
  gap: 10px;
  height: auto; min-height: 132px;
  padding: 22px 18px;
  border: 1.5px solid var(--ux-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  color: var(--ux-ink-400);
  transition: border-color .14s, box-shadow .14s, color .14s;
}
.scanbox__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto;
  border-radius: 50%;
  background: var(--ux-canvas);
  transition: background .14s, color .14s;
}
.scanbox input {
  text-align: center;
  font-size: 17px;
}
.scanbox:focus-within {
  border-color: var(--ux-blue);
  box-shadow: 0 0 0 4px var(--ux-blue-soft);
  color: var(--ux-blue);
}
.scanbox:focus-within .scanbox__ico {
  background: var(--ux-blue-soft); color: var(--ux-blue);
}

/* 아직 찍을 수 없는 상태 — 위치를 안 골랐다.
   '준비됐다' 고 파랗게 켜 두고 찍으면 막는 건 두 번 일을 시키는 것이다. */
.scanbox.is-waiting {
  background: var(--ux-surface-soft);
  border-style: dashed;
  border-color: var(--ux-line-strong);
  box-shadow: none;
  opacity: .7;
}
.scanbox.is-waiting .scanbox__ico { background: transparent; }
.scanbox.is-waiting input { pointer-events: none; }

/* ---------- 오늘 전표 ----------
   확정 직후 '방금 그 전표' 로 가는 유일한 지름길이다.
   스캔 상자와 경쟁하면 안 되므로 낮게, 작게, 흐리게 둔다. */
.wtoday { margin-top: 14px; border-top: 1px solid var(--ux-line); padding-top: 10px; }
.wtoday__h {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 750; color: var(--ux-ink-500);
  margin-bottom: 6px;
}
.wtoday__h a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); text-decoration: none;
}
.wtoday__h a:hover { color: var(--ux-ink-700); }
.wtoday__r {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; margin: 0 -9px; border-radius: var(--r-xs);
  text-decoration: none; color: inherit;
}
.wtoday__r:hover { background: var(--ux-surface-soft); }
.wtoday__no { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.wtoday__m { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ux-ink-400); white-space: nowrap; }

/* 머리글 밑의 작은 단서 — '비우면 원가 유지' */
.th__s { font-size: 9.5px; font-weight: 650; color: var(--ux-ink-400); letter-spacing: 0; margin-top: 1px; }
.priceinput::placeholder { font-weight: 600; }

/* ---------- 캡처에서 담기 (OCR 초안) ---------- */
.ocrdrop {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 34px 16px; margin-bottom: 12px;
  border: 2px dashed var(--ux-line-strong); border-radius: var(--r-md);
  color: var(--ux-ink-500); cursor: pointer; text-align: center;
}
.ocrdrop:hover, .ocrdrop:focus-visible { border-color: var(--ux-blue); color: var(--ux-ink-700); outline: none; }
.ocrdrop.is-busy { pointer-events: none; opacity: .7; }
.ocrdrop__s { font-size: 11px; font-weight: 650; color: var(--ux-ink-400); }

.ocrlist { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ocr__r {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--ux-line); border-radius: var(--r-sm);
  cursor: pointer;
}
.ocr__r.is-on { border-color: var(--ux-blue-line); background: var(--ux-blue-soft); }
.ocr__r.is-miss { cursor: default; background: var(--ux-surface-soft); }
.ocr__x { color: var(--ux-ink-400); display: inline-flex; }
.ocr__match { flex: 1; min-width: 0; font-size: 12.5px; }
.ocr__match .muted { font-size: 11px; margin-left: 6px; }
/* 기계가 읽은 원문 — 항상 보인다. 왜 이 품목으로 맞췄는지 사람이 검증할 근거다 */
.ocr__raw {
  font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ocr__alts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ocr__r .qtyinput { width: 74px; flex: 0 0 auto; }