/* 창고 모바일(WMS) 전용 스타일.
   app.css 를 먼저 불러온 뒤 이 파일을 얹는다 — 토큰(--brand 등)을 그대로 쓴다.

   ★ 여기 규칙의 전제: **한 손, 장갑, 밝은 창고, 흔들리는 손**.
     그래서 데스크톱 화면보다 글자·버튼·터치 면이 크다. 작게 줄이지 말 것.
   ⚠ 운영센터 화면에 이 파일을 쓰지 않는다. 표를 다루는 화면에서는 과하게 크다.
   ══════════════════════════════════════════════════════════════ */

.wms {
  margin: 0;
  background: var(--bg);
  /* ⚠ 노치·홈바를 피한다. 없으면 [나가기]가 상태바에 가리거나 버튼이 홈바에 눌린다 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── 상단 ── */
.wms-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #16191d; color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.wms-top__title { font-size: 17px; font-weight: 800; }
.wms-top__who { margin-left: auto; font-size: 12.5px; opacity: .7; }
.wms-top__out { margin: 0; }

/* ── 본문 ── */
.wms-main { padding: 16px 14px 28px; display: grid; gap: 14px; }
.wms-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }

/* ★ 입력칸을 크게. 장갑 낀 손가락이 닿는 최소치가 44px 인데, 여기는 더 준다.
   ⚠ font-size 를 16px 밑으로 내리지 말 것 — iOS 가 입력할 때 화면을 확대해 버린다. */
.wms-input {
  width: 100%; font-size: 22px; padding: 16px 14px; letter-spacing: .5px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wms-input:focus { outline: 3px solid var(--info); outline-offset: -1px; }

.wms .btn-row { gap: 10px; margin: 0; }
.wms-go { flex: 2; padding: 16px; font-size: 17px; font-weight: 800; }
.wms-clear { flex: 1; padding: 16px; font-size: 15px; }

/* ── 최근 스캔 ──
   ★ 직전 결과가 남아야 한다. 연속으로 찍을 때 "방금 게 됐나"를 매번 확인한다. */
.wms-log { margin-top: 4px; }
.wms-log__empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 24px 0; }
.wms-log__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wms-log__item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 12px 14px; border-radius: 10px; background: var(--surface);
  border-left: 5px solid var(--line);
}
.wms-log__item b { font-size: 17px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wms-log__item time { font-size: 12px; color: var(--ink-faint); }
.wms-log__item span { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }

/* ★ 성공·실패를 **색만으로** 구분하지 않는다 — 창고 조명에서 색은 잘 안 보이고,
   색각 이상도 있다. 왼쪽 굵은 띠 + 문구로 함께 알린다. */
.wms-log__item.is-ok  { border-left-color: var(--ok); }
.wms-log__item.is-bad { border-left-color: var(--danger); background: var(--danger-bg); }

/* ── 하단 탭 ──
   ★ 한 손으로 들고 엄지로 누른다. 상단 메뉴는 큰 화면에서 엄지가 닿지 않는다.
   ⚠ 다섯 개가 상한이다. 넘으면 글자가 줄어 창고 조명에서 못 읽는다. */
.wms-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.wms-tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 0 10px; text-decoration: none;
  font-size: 11px; color: var(--ink-soft);
}
.wms-tabs i { font-style: normal; font-size: 20px; line-height: 1; }
/* ★ 색만으로 알리지 않는다 — 굵기도 함께. 창고 조명에서 색은 잘 안 보인다 */
.wms-tabs .is-on { color: var(--brand); font-weight: 800; }

/* 하단 탭에 가리지 않게 본문 아래를 비운다 */
.wms-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ── 검색 줄 ── */
.wms-search { display: flex; gap: 8px; }
.wms-search .wms-input { flex: 1; }
.wms-search .btn { padding: 16px 20px; font-size: 16px; font-weight: 700; }

/* ── 결과 카드 ──
   ★ 한 줄에 다 넣지 않는다. 창고에서는 훑어보는 게 아니라 하나를 확인한다. */
.wms-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; display: grid; gap: 6px;
}
.wms-card__no { font-size: 18px; font-weight: 800;
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wms-card__row { display: flex; gap: 8px; font-size: 13.5px; }
.wms-card__row dt { color: var(--ink-faint); min-width: 4.5rem; margin: 0; }
.wms-card__row dd { margin: 0; color: var(--ink); font-weight: 600; }
.wms-card .btn-row { margin-top: 6px; }

/* 목록 */
.wms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wms-empty { color: var(--ink-faint); font-size: 13.5px; text-align: center; padding: 30px 0; }

/* 큰 숫자 배지(건수) */
.wms-count { font-size: 13px; color: var(--ink-soft); }
.wms-count b { color: var(--brand); font-size: 16px; }