/* =============================================================
   공용 조각 — 버튼과 뱃지. 화면마다 다시 만들지 않는다.
   여기 있는 것은 "어느 화면에나 나오는 것"만이다. 한 화면에서만 쓰는 모양은
   그 화면 css 에 둔다 — 여기 모으면 이 파일이 끝없이 자란다.
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 31px; padding: 0 12px; font: inherit; font-size: 12.5px;
  border-radius: 8px; border: 1px solid var(--btn-bd);
  background: var(--btn); color: var(--text); cursor: pointer;
  transition: background .13s, border-color .13s; white-space: nowrap;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-bd-s); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.strong { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.strong:hover { filter: brightness(1.06); }
.btn.danger { color: var(--danger); }
.btn.icon { width: 31px; padding: 0; flex: none; }

/* 뱃지 — 상태를 한 낱말로 말한다. 색은 뜻이 있는 것에만 쓴다. */
.badge {
  display: inline-flex; align-items: center; padding: 1px 8px;
  border-radius: 100px; font-size: 10.5px; font-weight: 700; line-height: 1.6;
  white-space: nowrap;
}
.badge.ok,      .badge.confirm { background: var(--bd-confirm); color: var(--fg-confirm); }
.badge.wait,    .badge.temp    { background: var(--bd-temp);    color: var(--fg-temp); }
.badge.no,      .badge.cancel  { background: var(--bd-cancel);  color: var(--fg-cancel); }

/* 품목 구분 — 상태가 아니라 종류다. 상태 뱃지(초록·노랑·빨강)와 색을 겹치지 않게 둔다. */
.badge.k-stock { background: var(--bd-kind);  color: var(--fg-kind); }
.badge.k-non   { background: var(--sunk);     color: var(--muted); }
.badge.k-set   { background: var(--bd-set);   color: var(--fg-set); }

/* 남는 자리를 다 먹는 빈 조각 — 한 줄에서 뒤쪽 것을 오른쪽 끝으로 민다.
   ⭐ 화면마다 `.top .spring` 처럼 따로 적다가 공용으로 올렸다 (2026-08-01) —
   전표 창에 그 규칙이 없어 **닫기(✕)가 제목 옆에 붙어 있었다.** */
.spring { flex: 1; }

/* 세그먼트 — 한 갈래만 보는 단추 묶음(`AZ.seg`). 기간·창고가 같이 쓴다.
   ⭐ 좁은 칸(전표의 찾는 칸은 208px 까지 줄어든다)에서는 **접힌다** — 안 접으면
   창고 다섯이 상자를 밀어내 오른쪽 것이 잘린다. 접힌 줄도 한 상자 안이라 묶음으로 읽힌다. */
.seg { display: inline-flex; flex-wrap: wrap; background: var(--sunk); border-radius: 8px; padding: 2px; }
.seg-p {
  height: 27px; padding: 0 13px; font: inherit; font-size: 12px; font-weight: 600;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.seg-p.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .seg-p { transition: none; } }

/* 메뉴 안의 탭 줄 (`AZ.tabs`) — 재고 넷과 경영 관리 넷이 같이 쓴다.
   ⭐ 재고 화면(`stock.css` 의 `.stk-tabs`)에만 있던 것을 2026-08-07 에 올렸다.
   ⛔ 세그먼트와 같은 모양으로 만들지 마라 — 세그먼트는 **같은 표를 거르는** 자리이고
   탭은 **다른 화면으로 갈아타는** 자리다. */
.tabs {
  display: flex; gap: 2px; padding: 12px 18px 0;
  border-bottom: 1px solid var(--border); background: var(--bg);
  position: sticky; top: 0; z-index: 6;
}
.tab {
  height: 33px; padding: 0 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .12s, background .12s;
}
.tab:hover { color: var(--text); background: var(--hover); }
.tab.on {
  color: var(--text); background: var(--surface);
  border-color: var(--border); margin-bottom: -1px;
}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .tab { transition: none; } }