/* ==========================================================================
   WAO - QR 물품 재고관리
   모바일 우선. 데스크톱 규칙은 @media (min-width:769px) 안에만 둔다.
   두 구간이 서로 침범하면 레이아웃이 조용히 깨지므로 격리를 지킨다.
   ========================================================================== */

:root {
  --bg:        #f4f6fa;
  --card:      #ffffff;
  --line:      #e4e9f0;
  --line-soft: #eef1f6;
  --text:      #111827;
  --text-2:    #4b5563;
  --muted:     #8a94a6;
  --brand:     #1a56db;
  --brand-dk:  #1543ac;
  --brand-sf:  #eef4ff;
  --ok:        #047857;
  --ok-sf:     #ecfdf5;
  --err:       #dc2626;
  --err-sf:    #fef2f2;
  --warn:      #b45309;
  --warn-sf:   #fffbeb;
  --r:         12px;
  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --tabh:      62px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
               "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

/* ---------- 상단바 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: 54px; padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--brand); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -0.04em; flex: none; }
/* 약어 풀이. 좁은 화면에서 줄바꿈되지 않게 흘려 자른다 */
.brand-full {
  font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 운영자 화면 표시. 회원 화면과 즉시 구분되게 색을 달리한다 */
.admin-tag {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: #111827; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
}
/* 직원 계정 표시. 지금 누구의 사업장을 보고 있는지 늘 보이게 한다 */
.staff-tag {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-sf); color: var(--brand);
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.topnav { display: none; }

/* ---------- 미로그인 상단 메뉴 ----------
   모바일에서는 폭이 없어 앵커 링크(기능·요금·FAQ)를 숨기고 로그인·가입만 남긴다 */
.guestnav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.guestnav a { font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.guestnav a:hover { text-decoration: none; }
.guestnav a[href^="/#"] { display: none; }
.guestnav .g-login { padding: 8px 10px; }
.guestnav .btn-pri { color: #fff; }

/* ---------- 본문 컨테이너 ---------- */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  /* 아래 여백은 24px 만. 탭바(고정)에 가리는 것은 본문이 아니라 그 아래 푸터라서
     탭바 높이만큼의 자리는 푸터가 감당한다. 여기서까지 빼면 본문과 푸터 사이가 통째로 빈다 */
  padding: 16px 16px 24px;
}
body.wide .wrap { max-width: 1180px; }
body.is-guest .wrap { padding-bottom: 40px; }

/* 운영자 화면은 가로를 전부 쓴다(표 컬럼이 많다). 회원·로그인 화면 폭은 건드리지 않는다.
   로그인 전에는 is-admin 이 붙지 않으므로 운영자 로그인 화면은 그대로 좁게 유지된다 */
body.is-admin .wrap { max-width: none; width: 100%; }

/* ---------- 카드 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.card-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;                 /* 좁은 화면에서 버튼이 잘려나가지 않게 줄을 바꾼다 */
  margin-bottom: 14px;
}
.card-hd h1, .card-hd h2 { margin: 0; min-width: 0; }

/* ---------- 플래시 ---------- */
.flash {
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 14px; border: 1px solid; word-break: break-word;
}
/* flex 자식은 기본 min-width:auto 라서 내용보다 작아지지 못하고 화면을 밀어낸다 */
.flash > * { min-width: 0; }
.flash-ok   { background: var(--ok-sf);   border-color: #a7f3d0; color: var(--ok); }
.flash-err  { background: var(--err-sf);  border-color: #fecaca; color: var(--err); }
.flash-info { background: var(--brand-sf); border-color: #c7dbff; color: var(--brand-dk); }

/* ---------- 폼 ---------- */
.field { margin-bottom: 14px; }
.field > label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-2); margin-bottom: 6px;
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.req::after { content: " *"; color: var(--err); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;              /* 16px 미만이면 iOS 가 폼 포커스 때 화면을 확대한다 */
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 36px;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26,86,219,.13);
}
input[readonly] { background: #f7f9fc; color: var(--text-2); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--brand); vertical-align: -2px; }

/* ---------- 단위 콤보박스 (검색 + 직접입력) ---------- */
.unitpick { position: relative; }
.unitpick-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,24,40,.12);
  max-height: 240px; overflow-y: auto; padding: 6px;
}
.unitpick-panel .up-group {
  font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em;
  padding: 8px 6px 4px;
}
.unitpick-panel .up-item {
  display: inline-block; margin: 2px; padding: 6px 11px;
  font: inherit; font-size: 14px; color: var(--text);
  background: #f5f7fa; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.unitpick-panel .up-item:hover,
.unitpick-panel .up-item.on { background: var(--brand-sf); border-color: #c7dbff; color: var(--brand-dk); }
.unitpick-panel .up-empty { padding: 12px 8px; font-size: 13px; color: var(--muted); line-height: 1.6; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--text); background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; background: #f8fafc; }
.btn:disabled, .btn.is-off { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-pri { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-pri:hover { background: var(--brand-dk); border-color: var(--brand-dk); }
.btn-danger { color: var(--err); border-color: #fecaca; background: var(--err-sf); }
.btn-danger:hover { background: #fee2e2; }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row.end { justify-content: flex-end; }

/* ---------- 배지 ---------- */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.7;
  background: #f1f3f7; color: var(--text-2); white-space: nowrap;
}
.badge-ok   { background: var(--ok-sf);    color: var(--ok); }
.badge-err  { background: var(--err-sf);   color: var(--err); }
.badge-warn { background: var(--warn-sf);  color: var(--warn); }
.badge-info { background: var(--brand-sf); color: var(--brand-dk); }

/* ---------- 통계 타일 ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; box-shadow: var(--shadow);
}
.tile .t-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tile .t-value { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.tile .t-unit  { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.tile.alert .t-value { color: var(--err); }

/* ---------- 목록 (모바일 카드) ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  display: block;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; box-shadow: var(--shadow); color: inherit; text-decoration: none;
}
.list-item:hover { text-decoration: none; border-color: #cfd8e6; }
.li-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.li-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.li-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 2px;
}
.li-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.li-stock { text-align: right; flex: none; }
.li-stock b { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.li-stock small { font-size: 12px; color: var(--muted); margin-left: 2px; }
.li-stock.low b { color: var(--err); }

/* ---------- 표 (기본은 감춤. 데스크톱에서만 쓴다) ---------- */
.tbl-wrap { display: none; }

/* ---------- 검색 바 ---------- */
.filters { display: grid; gap: 8px; margin-bottom: 14px; }
.filters .f-row { display: flex; gap: 8px; }
.filters .f-row > * { flex: 1; }
.filters .f-row > .btn { flex: none; }

/* ---------- 조회 폼 (이력 등 조건이 여러 개인 화면) ----------
   모바일: 한 줄에 하나씩 쌓는다. 좁은 화면에서 날짜 두 개를 나란히 두면 달력이 잘린다.
   데스크톱 규칙은 min-width:769px 블록에 따로 있다. */
.srch { padding: 14px; margin-bottom: 12px; }
.srch-grid { display: grid; gap: 10px; }
.srch-f { min-width: 0; }
.srch-f > label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--muted); margin-bottom: 5px;
}
.srch-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.srch-quick .btn { flex: none; }

/* ---------- 비어있음 ---------- */
.empty { text-align: center; padding: 44px 16px; color: var(--muted); }
.empty svg { width: 44px; height: 44px; opacity: .35; margin-bottom: 10px; }
.empty p { margin: 0 0 16px; font-size: 14px; }

/* ---------- 페이저 ---------- */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 18px 0 4px; }
.pager a, .pager strong, .pager .gap {
  min-width: 36px; height: 36px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 14px; text-decoration: none;
}
.pager a { background: #fff; border: 1px solid var(--line); color: var(--text-2); }
.pager a:hover { background: #f8fafc; text-decoration: none; }
.pager strong { background: var(--brand); color: #fff; font-weight: 700; }
.pager .gap { color: var(--muted); }

/* ---------- 정의 목록 (상세 화면) ---------- */
.dl { display: grid; grid-template-columns: 92px 1fr; gap: 9px 12px; font-size: 14px; }
.dl dt { color: var(--muted); font-size: 13px; }
.dl dd { margin: 0; color: var(--text); word-break: break-all; }

/* ---------- 상단 우측 로그아웃 (데스크톱 상단바 안) ---------- */
.topnav .nav-logout {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 8px 13px;
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--err); background: var(--err-sf); font-weight: 700;
}
.topnav .nav-logout:hover { background: #fee2e2; text-decoration: none; }
.topnav .nav-logout svg { width: 17px; height: 17px; }

/* ---------- 모바일 햄버거 버튼 ---------- */
.navbtn {
  margin-left: auto; flex: none;
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); cursor: pointer;
}
.navbtn svg { width: 22px; height: 22px; }
.navbtn:active { background: #eef2f7; }

/* ---------- 서랍(모바일 메뉴) ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,32,.5); }
.drawer[hidden] { display: none; }        /* 클래스가 [hidden] 을 이기므로 명시적으로 숨긴다 */
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(84%, 320px);
  background: var(--card);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  box-shadow: -8px 0 30px rgba(15,23,32,.18);
  overflow-y: auto;
}
.drawer-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.drawer-name { font-weight: 800; font-size: 15px; }
.drawer-mail { font-size: 12px; color: var(--muted); word-break: break-all; margin-top: 2px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav a {
  padding: 13px 12px; border-radius: 10px;
  color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.drawer-nav a:hover { background: #f5f7fa; text-decoration: none; }
.drawer-nav a.on { background: var(--brand-sf); color: var(--brand-dk); }
.drawer-out { margin-top: auto; }

/* ---------- 푸터 ----------
   본문 컨테이너 밖에 있는 별도 띠. 화면 가로를 전부 쓰고 내용은 가운데 정렬한다.
   모바일에서는 하단 탭바에 가리지 않도록 아래 여백을 크게 준다. */
.sitefoot {
  width: 100%;
  margin-top: 16px;
  /* 아래 여백 = 탭바 높이 + 안전영역 + 최소 여유. 여유를 크게 주면 화면 끝이 텅 빈다 */
  padding: 18px 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 10px);
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px;
  text-align: center;
}
body.is-guest .sitefoot { padding-bottom: 28px; }   /* 로그인 전에는 탭바가 없다 */
.foot-inner { max-width: 1100px; margin: 0 auto; }

.bizinfo { margin-bottom: 12px; }
.bizinfo > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--text-2);
  font-size: 12.5px; font-weight: 700; cursor: pointer; list-style: none;
}
.bizinfo > summary::-webkit-details-marker { display: none; }
.bizinfo > summary svg { width: 15px; height: 15px; transition: transform .15s; }
.bizinfo[open] > summary svg { transform: rotate(180deg); }

/* 사업자 정보는 한 줄로 이어 붙인다. 좁아지면 자연스럽게 다음 줄로 넘어간다 */
.bizinfo-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 14px;
  margin: 12px 0 0; padding: 12px 14px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
  font-size: 12px; line-height: 1.7; color: var(--text-2);
}
.bizinfo-line span { white-space: nowrap; }
.bizinfo-line span:has(a) { white-space: normal; word-break: break-all; }
.bizinfo-line b { font-weight: 700; color: var(--muted); margin-right: 3px; }

.footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 10px; }
.footlinks a { color: var(--text-2); font-weight: 600; }
.copyright { margin: 0; font-size: 12px; color: var(--muted); }

/* 약관·방침 같은 긴 문서 */
.doc { line-height: 1.75; }
.doc h1 { margin-bottom: 4px; }
.doc h2 { margin: 26px 0 8px; font-size: 15.5px; }
.doc p, .doc li { font-size: 14px; color: var(--text-2); }
.doc ul { margin: 8px 0; padding-left: 20px; }
.doc li { margin-bottom: 5px; }
.doc-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.doc-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.doc-tbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.doc-tbl th, .doc-tbl td {
  border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top;
}
.doc-tbl th { background: #f8fafc; color: var(--text-2); font-weight: 700; white-space: nowrap; }

/* ---------- 공통 모달 (문의 등 전 페이지에서 쓰는 레이어) ---------- */
.wmodal {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 32, .5);
}
.wmodal[hidden] { display: none; }     /* 클래스가 [hidden] 을 이기므로 명시적으로 숨긴다 */
.wmodal-box {
  width: 100%; max-width: 520px;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 -8px 30px rgba(15,23,32,.18);
  text-align: left;
}
.wmodal-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.wmodal-hd h2 { margin: 0; }
@media (min-width: 769px) {
  .wmodal { align-items: center; }
  .wmodal-box { border-radius: 16px; }
}

/* 링크처럼 보이는 버튼 (푸터 문의하기) */
.linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: var(--text-2);
  cursor: pointer; text-decoration: none;
}
.linkbtn:hover { text-decoration: underline; }

/* ---------- 하단 탭바 (모바일 전용) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  /* 탭이 5개다(QR·물품·재고·통계·내정보). 칸을 고정으로 나눠 글자가 눌리지 않게 한다 */
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--tabh); color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a span { font-size: 10.5px; white-space: nowrap; }
.tabbar a.on { color: var(--brand); }
.tabbar a:hover { text-decoration: none; }

/* ---------- 로그인·가입 화면 ---------- */
.auth-wrap { max-width: 400px; margin: 0 auto; padding: 32px 16px 48px; }
.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-logo svg { width: 46px; height: 46px; color: var(--brand); }
.auth-logo .n { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--brand); margin-top: 6px; }
.auth-logo .f { font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; margin-top: 1px; }
.auth-logo .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.auth-links { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.auth-links a { font-weight: 600; }

/* ---------- 스캐너 ---------- */
.scanbox {
  position: relative; width: 100%; aspect-ratio: 1/1; max-height: 62vh;
  background: #0d1420; border-radius: var(--r); overflow: hidden;
}
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanbox .reticle {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  width: 62%; aspect-ratio: 1/1; border: 2px solid rgba(255,255,255,.9); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}
/* 인식 성공 - 칸 자체가 초록이 된다. 소리·진동을 못 느끼는 환경에서도 읽혔는지 바로 보인다 */
.scanbox .reticle.hit {
  border-color: #22c55e;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35), 0 0 0 3px rgba(34,197,94,.55), 0 0 18px 4px rgba(34,197,94,.6);
  background: rgba(34,197,94,.16);
  transition: border-color .08s linear, background-color .08s linear;
}
.scanbox.hit { outline: 3px solid #22c55e; outline-offset: -3px; }
.scanbox .hint-t {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.scan-off { display: flex; align-items: center; justify-content: center; height: 100%; color: #9fb0c6; font-size: 14px; }

/* 수량 스테퍼 */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 46px; height: 46px; flex: none; font-size: 22px; font-weight: 600;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text);
}
.stepper button:active { background: #eef2f7; }
.stepper input { text-align: center; font-size: 19px; font-weight: 700; height: 46px; }

/* 입고/출고 토글 */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #eef1f6; border-radius: 11px; padding: 4px; }
.seg button {
  padding: 11px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.seg button.on { background: #fff; box-shadow: var(--shadow); color: var(--brand); }
.seg button.on[data-type=out] { color: var(--err); }

/* ==========================================================================
   데스크톱 (769px 이상) - 이 블록 밖으로 새어나가지 않게 유지
   ========================================================================== */
@media (min-width: 769px) {
  body { font-size: 14.5px; }

  .topbar { height: 60px; padding: 0 24px; gap: 28px; }
  /* 메뉴와 로그아웃을 오른쪽으로 몰아 항상 같은 자리에서 찾게 한다 */
  .topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .navbtn, .drawer { display: none !important; }   /* 데스크톱은 상단바로 충분하다 */
  .topnav a {
    padding: 8px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
    color: var(--text-2); text-decoration: none;
  }
  .topnav a:hover { background: #f2f5f9; text-decoration: none; }
  .topnav a.on { background: var(--brand-sf); color: var(--brand-dk); }

  /* 데스크톱은 자리가 있으니 대문 앵커도 같이 보여준다 */
  .guestnav { gap: 4px; }
  .guestnav a[href^="/#"] { display: inline-flex; padding: 8px 14px; border-radius: 9px; font-size: 14.5px; }
  .guestnav a[href^="/#"]:hover { background: #f2f5f9; }
  .guestnav .g-login { padding: 8px 14px; border-radius: 9px; font-size: 14.5px; }
  .guestnav .g-login:hover { background: #f2f5f9; }

  .tabbar { display: none; }
  /* 탭바가 없으니 그만큼의 아래 여백도 필요 없다 */
  .sitefoot { padding-bottom: 24px; }

  /* 데스크톱에서는 가로를 넉넉히 쓴다(약 90%).
     - 목록·표 화면($wide)  : 1600px 까지
     - 폼 중심 화면          : 1100px 까지. 입력칸이 화면 끝까지 늘어나면 오히려 읽기 나쁘다
     모바일 규칙은 이 블록 밖에 있으므로 영향받지 않는다 */
  .wrap { width: 90%; max-width: 1100px; padding: 24px 0 56px; }
  body.wide .wrap { width: 90%; max-width: 1600px; }
  /* 운영자는 요청대로 가로 전체 */
  body.is-admin .wrap { width: 100%; max-width: none; padding: 24px 24px 56px; }

  /* 스캐너는 넓힌다고 좋아지지 않는다. 가운데 적당한 크기로 고정 */
  .scanbox { max-width: 560px; margin: 0 auto; }

  /* 로그인·가입은 계속 좁게 가운데 */
  .auth-wrap { width: 100%; }

  .card { padding: 22px; }
  h1 { font-size: 22px; }

  .tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; }

  /* 목록은 카드 대신 표로 */
  .list { display: none; }
  .tbl-wrap {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto;
  }
  table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; white-space: nowrap; }
  table.tbl th {
    background: #fafbfd; border-bottom: 1px solid var(--line);
    font-size: 12.5px; font-weight: 700; color: var(--muted);
  }
  table.tbl td { border-bottom: 1px solid var(--line-soft); }
  table.tbl tbody tr:last-child td { border-bottom: 0; }
  table.tbl tbody tr:hover { background: #fafcff; }
  table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.tbl td.wide { white-space: normal; min-width: 200px; }
  table.tbl .code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; color: var(--muted); letter-spacing: .04em;
  }
  table.tbl .low { color: var(--err); font-weight: 700; }

  .filters { grid-template-columns: 1fr; }
  .filters .f-row > .btn { min-width: 92px; }

  /* 조회 폼: 한 줄에 나란히. 검색어를 넓게 주고 날짜는 내용에 맞춘다 */
  .srch { padding: 16px 18px; }
  .srch-grid {
    grid-template-columns: minmax(220px, 2fr) minmax(110px, .8fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
    align-items: end;
    gap: 12px;
  }
  .srch-go .btn { min-width: 110px; }

  .dl { grid-template-columns: 120px 1fr; }
  .auth-wrap { padding-top: 56px; }
  .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ---------- 인쇄 (라벨 시트) ---------- */
@media print {
  .topbar, .tabbar, .no-print, .flash { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; margin: 0; }
}

/* ---------- PWA 설치 안내 배너 ----------
   하단 탭바 위에 뜬다. 한 번 닫으면 30일 동안 다시 뜨지 않는다(app.js). */
.pwa-bar {
  position: fixed; left: 12px; right: 12px; z-index: 60;
  bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 10px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px;
  background: #0f1720; color: #fff;
  box-shadow: 0 10px 30px rgba(15,23,32,.28);
}
.pwa-bar .pwa-txt { flex: 1; min-width: 150px; font-size: 13.5px; line-height: 1.5; }
.pwa-bar .pwa-txt b { display: block; font-size: 14.5px; }
.pwa-bar .pwa-txt span { color: #c9d2de; font-size: 12.5px; }
.pwa-bar .btn { flex: none; }
.pwa-bar .btn-ghost { background: transparent; border-color: #3a4756; color: #c9d2de; }
.pwa-bar .btn-ghost:hover { background: #1c2733; }

@media (min-width: 769px) {
  /* 데스크톱은 탭바가 없다. 오른쪽 아래에 작게 */
  .pwa-bar { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
}

/* ---------- 화면 아래 사용 안내 박스 (app/views/help_box.php) ----------
   카드가 아니라 본문 맨 아래 붙는 보조 정보다. 작업을 방해하지 않도록
   테두리는 점선, 배경은 없고, 글자는 본문보다 작게 둔다. */
.helpbox {
  margin: 22px 0 6px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
}
.helpbox-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  margin-bottom: 6px;
}
.helpbox-hd svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.helpbox ul { margin: 0; padding-left: 16px; }
.helpbox li { font-size: 12.5px; line-height: 1.65; margin: 2px 0; }
.helpbox li b { color: var(--text-2); font-weight: 700; }

@media (max-width: 768px) {
  .helpbox { margin: 16px 0 4px; padding: 10px 12px; }
  .helpbox-hd { font-size: 11.5px; }
  .helpbox li { font-size: 12px; line-height: 1.6; }
}

/* 인쇄물에는 안내가 필요 없다 */
@media print { .helpbox { display: none; } }

/* 스캔 모달의 처리 단위 토글(박스/낱개). 09차 묶음 단위 처리 */
.unit-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-toggle label {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; cursor: pointer; background: #fff;
}
.unit-toggle label:has(input:checked) { border-color: var(--brand); background: var(--brand-sf); color: var(--brand-dk); }
.unit-toggle .hint { font-size: 12px; }

/* ---------------------------------------------------------------
   금액 표기 - 정가(선긋기) · 할인율 · 판매가
   문구 조립은 `app/subs.php` 의 price_html() 한 곳에서 한다.
   화면마다 따로 만들면 같은 금액이 다르게 보인다
   --------------------------------------------------------------- */
.pr-was {
  margin-right: 6px;
  color: var(--muted); font-weight: 600; text-decoration: line-through;
}
.pr-off {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  border-radius: 999px; background: var(--err-sf); color: var(--err);
  font-size: 11.5px; font-weight: 800; font-style: normal; white-space: nowrap;
}
.pr-now { font-weight: 800; color: var(--brand-dk); }
.pr-vat { margin-left: 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; }

/* ---------------------------------------------------------------
   자동 번역 언어 선택 (app/i18n.php)
   PC = 상단 로그아웃 오른쪽 / 모바일 = 햄버거 안 / 미로그인 좁은 화면 = 푸터
   --------------------------------------------------------------- */
.lang-pick { display: inline-flex; align-items: center; gap: 6px; }
.lang-lb {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.lang-lb svg { width: 15px; height: 15px; }
.lang-sel {
  max-width: 172px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.lang-sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 상단 바에서는 라벨 글자를 빼고 아이콘만 둔다(메뉴가 길어지면 두 줄로 깨진다) */
.topnav .lang-pick, .guestnav .lang-pick { margin-left: 10px; }
.topnav .lang-txt, .guestnav .lang-txt { display: none; }

/* 햄버거 안 - 메뉴와 로그아웃 사이에 한 줄로 */
.lang-drawer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.lang-drawer .lang-sel { flex: 1; max-width: none; padding: 9px 10px; font-size: 14px; }

/* 푸터 - 미로그인 좁은 화면용 */
.lang-foot { justify-content: center; margin: 14px 0 4px; }

/* 구글 위젯 본체는 숨긴다. 우리 선택 상자가 대신 조종한다 */
.gt-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 구글이 문서 위에 끼워 넣는 띠(배너). 그대로 두면 헤더가 아래로 밀린다 */
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
/* 번역된 글에 구글이 씌우는 배경·밑줄을 지운다(우리 배색과 충돌한다) */
font[style], .goog-text-highlight { background: none !important; box-shadow: none !important; }

@media (max-width: 768px) {
  /* 모바일 상단에는 두지 않는다 - 햄버거 안에만 남긴다(사용자 지시 2026-08-01) */
  .topnav .lang-pick, .guestnav .lang-pick { display: none; }
}
@media (min-width: 769px) {
  /* PC 는 상단에서 고르므로 푸터 것은 감춘다 */
  .lang-foot { display: none; }
}