:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --line: #d9dee7;
  --text: #18202f;
  --muted: #697386;
  --primary: #1264a3;
  --primary-weak: #e7f2fb;
  --green: #287d3c;
  --red: #b42318;
  --yellow: #9a6700;
  --shadow: 0 10px 26px rgba(24, 32, 47, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  cursor: pointer;
}

button:hover {
  border-color: #a8b3c4;
}

button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

button.danger {
  border-color: #f3b7b2;
  color: var(--red);
}

button.ghost {
  background: transparent;
}

/* Square icon-only button used for per-row delete actions (×). */
button.icon-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
  flex: 0 0 auto;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  min-height: 38px;
  padding: 8px 10px;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
}

textarea {
  min-height: 76px;
  resize: vertical;
}

a {
  color: var(--primary);
}

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

/* 좌측 세로 사이드바: 상단 블랙바의 대분류 메뉴와, 선택된 대분류에 속한
   하위 메뉴를 한 줄씩 아래로 세워 한 자리에서 이동할 수 있게 한다. */
.sidebar {
  background: #111827;
  color: #fff;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  width: 210px;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: auto;
}

.brandmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.brandmark strong {
  font-size: 18px;
}

.brandmark span {
  color: #c5cedb;
  font-size: 12px;
  line-height: 1.35;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}

.nav button {
  width: 100%;
  border: 0;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  color: #d8dee9;
  padding: 0 12px;
  border-radius: 8px;
}

.nav button.active,
.nav button:hover {
  background: #22304a;
  color: #fff;
}

/* 대분류 아래 딸려 나오는 하위 메뉴 — 선택된 대분류일 때만 펼친다. */
.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 20px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.nav-sub button {
  width: 100%;
  min-height: 32px;
  border: 0;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  color: #9fb0c9;
  font-size: 13px;
  padding: 0 10px;
  border-radius: 6px;
}

.nav-sub button.active,
.nav-sub button:hover {
  background: #22304a;
  color: #fff;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: #c5cedb;
  font-size: 12px;
  padding: 16px 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

/* Logout button sits on the dark top bar — force a visible light label. */
.sidebar-footer .ghost {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
}
.sidebar-footer .ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.main {
  flex: 1;
  min-width: 0;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.topbar h1 {
  margin: 0 0 6px;
  font-size: 24px;
}

/* 대분류 뒤에 붙는 현재 화면 이름 — 제목보다 한 톤 연하게. */
.page-crumb {
  color: var(--muted);
  font-weight: 500;
}

.topbar p {
  margin: 0;
  color: var(--muted);
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.stat strong {
  font-size: 26px;
}

/* 목록 + 입력폼 2단 레이아웃. 입력 폼 칸은 품목 표처럼 폭이 필요한 폼까지
   감당해야 해서 넉넉히 잡되, 720px로 고정하면 좁은 화면에서 목록 쪽이
   잘린다 -- 화면 폭에 비례해 늘었다 줄고 720px에서 멈추게 한다. 모든
   목록+폼 화면이 같은 값을 쓰므로 화면마다 폼 폭이 달라 보이지 않는다. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 38%, 720px);
  gap: 14px;
  align-items: start;
}

.layout.single {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.panel-head h2,
.panel-head h3 {
  margin: 0;
  font-size: 16px;
}

.panel-body {
  padding: 16px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 180px 160px;
  gap: 8px;
  margin-bottom: 12px;
}

.filters.request-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filters.request-filters > [data-filter-q] {
  flex: 1 1 220px;
  min-width: 220px;
}
.filters.request-filters .date-range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}
.filters.request-filters .date-range input[type="date"] {
  width: 150px;
}

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 240px);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  background: #f3f5f8;
  z-index: 1;
  color: #3d4a5f;
  font-size: 12px;
}

td.wrap {
  white-space: normal;
  min-width: 180px;
}

.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.attachment-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.attachment-row .attachment-input {
  flex: 1;
}

.amount-emphasis {
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
}

.order-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.order-link:hover {
  color: #0a4d7a;
}

.multi-filter {
  position: relative;
}

.multi-filter summary {
  list-style: none;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #253247;
}

.multi-filter summary::-webkit-details-marker {
  display: none;
}

.multi-filter[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.multi-filter-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow);
}

.multi-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.multi-filter-option input {
  width: auto;
  min-height: 0;
}

.file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #253247;
  font-weight: 600;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.price-import-guide {
  margin: 8px 0 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.badge.pending {
  background: #fff7df;
  border-color: #f5d48a;
  color: var(--yellow);
}

.badge.paid {
  background: #e9f7ee;
  border-color: #b7e2c1;
  color: var(--green);
}

.badge.await_deposit {
  background: #eef2ff;
  border-color: #c3cef7;
  color: #3f51b5;
}

.badge.hold,
.badge.error,
.badge.consignment_unpaid {
  background: #fff0ef;
  border-color: #f3b7b2;
  color: var(--red);
}

/* Inline status editor styled as the pill badge */
/* Slim pill status editor. appearance:none + a small custom chevron; sized by
   padding + line-height (no fixed height) so the text never clips at any zoom.
   Status classes set background-COLOR only, so the chevron image is preserved. */
select.status-select {
  display: inline-block;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 22px 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: #fff;
  color: #374151;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath fill='%23999' d='M0 0l4.5 6L9 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
}
select.status-select.status-pending {
  background-color: #fff7df;
  border-color: #f5d48a;
  color: #8a6d1a;
}
select.status-select.status-await_deposit {
  background-color: #eef2ff;
  border-color: #c3cef7;
  color: #3949ab;
}
select.status-select.status-paid {
  background-color: #e9f7ee;
  border-color: #b7e2c1;
  color: #1f7a3d;
}
select.status-select.status-hold,
select.status-select.status-error,
select.status-select.status-consignment_unpaid {
  background-color: #fff0ef;
  border-color: #f3b7b2;
  color: #c0392b;
}
select.status-select option {
  color: #111827;
  background: #fff;
  font-weight: 500;
}
select.status-select:hover {
  filter: brightness(0.97);
}
select.bulk-status,
[data-bulk-status] {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 0 8px;
  background: #fff;
  cursor: pointer;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
/* Grid/flex children must be allowed to shrink below content width, otherwise
   a wide table forces the whole form to overflow instead of scrolling. */
.form-grid > *,
.field,
.field > div {
  min-width: 0;
}
.table-wrap {
  max-width: 100%;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: #3d4a5f;
  font-size: 12px;
  font-weight: 700;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.checkbox-line input {
  width: auto;
  min-height: 0;
}

.fixed-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.fixed-summary-title {
  font-size: 12px;
  font-weight: 700;
  color: #3d4a5f;
}

.fixed-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fixed-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* Collapsible 외상/환불 sections — closed by default unless they carry values. */
details.collapsible-summary > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
details.collapsible-summary > summary::-webkit-details-marker {
  display: none;
}
details.collapsible-summary > summary::before {
  content: "▸";
  color: var(--muted, #6b7280);
  font-size: 12px;
  transition: transform 0.15s ease;
}
details.collapsible-summary[open] > summary::before {
  transform: rotate(90deg);
}
details.collapsible-summary[open] > summary {
  margin-bottom: 4px;
}

.fixed-card span,
.fixed-summary-notes span {
  font-size: 12px;
  color: var(--muted);
}

.fixed-card strong,
.fixed-summary-notes strong {
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
}

.fixed-summary-notes {
  display: grid;
  gap: 8px;
}

.fixed-summary-notes > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* Pin 작업 / 주문번호 / 코드 / 품목명 to the left so the item name stays readable
   while the low-priority price/date columns scroll horizontally. */
.line-items-table th:nth-child(1),
.line-items-table td:nth-child(1),
.line-items-table th:nth-child(2),
.line-items-table td:nth-child(2),
.line-items-table th:nth-child(3),
.line-items-table td:nth-child(3),
.line-items-table th:nth-child(4),
.line-items-table td:nth-child(4) {
  position: sticky;
  z-index: 2;
}
.line-items-table td:nth-child(1),
.line-items-table td:nth-child(2),
.line-items-table td:nth-child(3),
.line-items-table td:nth-child(4) {
  background: #fff;
}
.line-items-table th:nth-child(1),
.line-items-table th:nth-child(2),
.line-items-table th:nth-child(3),
.line-items-table th:nth-child(4) {
  background: #f3f5f8;
  z-index: 3;
}
/* 고정(sticky) 컬럼은 left 오프셋이 실제 렌더 폭과 정확히 일치해야 서로 겹치지
   않는다. auto 레이아웃이 줄이지 못하도록 width와 min-width를 함께 고정한다. */
.line-items-table th:nth-child(1),
.line-items-table td:nth-child(1) {
  left: 0;
  width: 40px;
  min-width: 40px;
}
/* 주문번호는 20자 고정 포맷(20260917-0000068-01) — 잘리지 않게 폭을 맞춘다. */
.line-items-table th:nth-child(2),
.line-items-table td:nth-child(2) {
  left: 40px;
  width: 150px;
  min-width: 150px;
}
.line-items-table td:nth-child(2) span {
  font-size: 12px;
}
.line-items-table th:nth-child(3),
.line-items-table td:nth-child(3) {
  left: 190px;
  width: 92px;
  min-width: 92px;
}
.line-items-table th:nth-child(4),
.line-items-table td:nth-child(4) {
  left: 282px;
  width: 210px;
  min-width: 210px;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.08);
}
.requests-table th:nth-child(1),
.requests-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}
.requests-table th:nth-child(2),
.requests-table td:nth-child(2) {
  position: sticky;
  left: 40px;
  z-index: 2;
  background: #fff;
}
.requests-table thead th:nth-child(1),
.requests-table thead th:nth-child(2) {
  z-index: 3;
}

/* Compact inputs for the wide per-line price table (코드~적용종료). */
.line-items-table th,
.line-items-table td {
  padding: 4px 6px;
  white-space: nowrap;
}
.line-items-table input[type="date"] {
  width: 130px;
}
/* 코드: 최대 8자 내외의 고정 포맷. 품목명: wide & always visible. */
.line-items-table td:nth-child(3) input {
  width: 80px;
  min-width: 80px;
}
.line-items-table td:nth-child(4) input {
  width: 198px;
  min-width: 198px;
}
/* 수량은 0~999 범위 — 아주 좁게. */
.line-items-table .qty-input {
  width: 46px;
  min-width: 46px;
  text-align: center;
}
.line-items-table th:nth-child(5),
.line-items-table td:nth-child(5) {
  width: 58px;
  min-width: 58px;
}
.line-items-table input[type="number"]:not(.qty-input) {
  width: 78px;
}
/* 금액 컬럼(공급가~현재판매가): 최대 "10,000,000" 기준. */
.line-items-table th:nth-child(n + 6):nth-child(-n + 9),
.line-items-table td:nth-child(n + 6):nth-child(-n + 9) {
  width: 100px;
  min-width: 100px;
}
.line-items-table td:nth-child(n + 6):nth-child(-n + 9) input {
  width: 88px;
  min-width: 88px;
  text-align: right;
}
/* 적용시작/적용종료는 input[type=date] 130px에 맞춘다. */
.line-items-table th:nth-child(10),
.line-items-table td:nth-child(10),
.line-items-table th:nth-child(11),
.line-items-table td:nth-child(11) {
  width: 142px;
  min-width: 142px;
}
.line-items-table th:nth-child(12),
.line-items-table td:nth-child(12) {
  width: 105px;
  min-width: 105px;
}
.line-items-table th:nth-child(13),
.line-items-table td:nth-child(13) {
  width: 150px;
  min-width: 150px;
}

.autocomplete-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.autocomplete-menu[hidden] {
  display: none;
}
.autocomplete-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: #eef2ff;
}

.line-items-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 13px;
  color: #3d4a5f;
}
.line-items-summary b {
  font-weight: 700;
  color: var(--muted, #6b7280);
  margin-right: 4px;
}

.bulk-paste {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.bulk-paste textarea {
  min-height: 96px;
}

.unmatched-list {
  display: grid;
  gap: 10px;
}

.unmatched-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  background: #fffaf0;
}

.unmatched-summary {
  display: grid;
  gap: 2px;
}

.field.two {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.field.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* 수집 화면에서 자동 등록된 건 -- 평소엔 건수만, 눌러서 펼치면 주문번호. */
.auto-created {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-alt, #f7f9fb);
}

.auto-created > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

/* 묶음 안에서 칸 하나를 가리키는 작은 라벨 (예: 공급가 / 세액 / 합계).
   바깥 .field > label 과 달리 한 줄짜리 보조 설명이라 더 작고 연하다. */
.sub-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.empty {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, #eef3f8, #f9fafb);
}

.login-panel {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.login-panel h1 {
  margin: 0 0 8px;
}

.login-panel p {
  margin: 0 0 18px;
  color: var(--muted);
}

.notice {
  border: 1px solid #b7d7ee;
  background: var(--primary-weak);
  border-radius: 8px;
  padding: 12px;
  color: #17415f;
}

.error-text {
  color: var(--red);
  min-height: 18px;
}

.audit-item {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.audit-item:last-child {
  border-bottom: 0;
}

.audit-item strong {
  font-size: 13px;
}

.share-view {
  min-height: 100vh;
  padding: 24px;
}

.popup-shell {
  min-height: 100vh;
  padding: 20px;
}

.popup-shell .panel {
  max-width: 1240px;
  margin: 0 auto;
}

.share-view .panel {
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .brandmark span {
    display: none;
  }

  /* 좁은 화면에서는 세로 사이드바가 본문을 너무 잡아먹는다 -- 상단 가로
     바로 눕히고, 하위 메뉴는 대분류 옆에 이어 붙여 가로로 흐르게 한다. */
  .shell {
    flex-direction: column;
  }

  .sidebar {
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    overflow-x: auto;
    overflow-y: visible;
  }

  .brandmark {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0 14px 0 0;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    gap: 4px;
  }

  .nav button {
    width: auto;
  }

  .nav-sub {
    flex-direction: row;
    margin: 0;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .nav-sub button {
    width: auto;
  }

  .sidebar-footer {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
    border-top: 0;
    white-space: nowrap;
  }

  .layout,
  .stats,
  .filters,
  .fixed-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .main,
  .share-view {
    padding: 14px;
  }

  .topbar {
    flex-direction: column;
  }

  .panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .field.two {
    grid-template-columns: 1fr;
  }

  .field.three {
    grid-template-columns: 1fr;
  }

  .field.four {
    grid-template-columns: 1fr;
  }
}

/* npb정산 */
.npb-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.npb-subtab {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 14px;
}

.npb-subtab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.npb-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.npb-upload-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.npb-upload-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

td.num,
input.num {
  text-align: right;
}

@media (max-width: 1080px) {
  .npb-upload-grid {
    grid-template-columns: 1fr;
  }
}

/* npb정산 워크시트 — one block per channel, live-recomputed totals. */
.npb-rollup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.npb-ws {
  display: grid;
  gap: 18px;
}

.npb-ws-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.npb-ws-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.npb-ws-title strong {
  font-size: 14px;
}

/* 재고조회 파일 업로드 줄. */
.npb-stock-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.npb-stock-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 실비 세부내역 — 유형 아래 딸린 항목 줄. */
.npb-ship-detail td {
  background: #fafafa;
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 행사 할인율 — 채널 제목 오른쪽 끝에 붙인다. */
.npb-promo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.npb-promo input {
  width: 56px;
}

.npb-ws-table {
  width: 100%;
}

.npb-ws-table input.num {
  width: 100%;
  min-width: 72px;
}

.npb-ws-table tfoot th,
.npb-ws-table tfoot td {
  font-weight: 700;
  background: #f8fafc;
}

.npb-pct {
  max-width: 84px;
}

@media (max-width: 1080px) {
  .npb-rollup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 입금대사 (클로브ai) */
.badge.clobe-high {
  border-color: #137333;
  background: #e6f4ea;
  color: #137333;
}

.badge.clobe-medium {
  border-color: #b26b00;
  background: #fef7e0;
  color: #b26b00;
}

.badge.clobe-low {
  border-color: var(--red);
  background: #fce8e6;
  color: var(--red);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px 16px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.check-row input {
  width: auto;
  margin: 0;
}

/* 클로브 계좌 선택 목록 */
.acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.acct-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}

.acct {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.acct:hover {
  border-color: #94a3b8;
}

.acct.on {
  border-color: #137333;
  background: #f2fbf5;
}

.acct input {
  width: auto;
  margin: 0;
  flex: none;
}

.acct-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.acct-title {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.acct-bal {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 링크를 버튼처럼 — 자동화 화면의 클로브 최신화 이동 */
a.button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text, #0f172a);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

a.button:hover {
  border-color: #94a3b8;
}

/* 관리자 메뉴 권한 표 */
.perm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.perm-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.perm-box input {
  width: auto;
  margin: 0;
  flex: none;
}

/* npb 업로드 — 한 곳에 올리고 파일명으로 채널 인식 */
.npb-dropzone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fbfdff;
}

.npb-ch-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.npb-ch-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.npb-ch-chip.on {
  border-color: #137333;
  background: #f2fbf5;
}

/* 올린 파일 일괄 처리 줄. */
.npb-bulk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-alt, #f7f9fb);
  font-size: 13px;
}

.npb-bulk .toolbar { margin: 0; }
.npb-bulk label { display: flex; align-items: center; gap: 6px; }

.npb-chip-pick { display: flex; align-items: center; gap: 6px; }

/* 사용안함으로 둔 채널 -- 제목만 남기고 접는다. */
.npb-ch-chip.off {
  border-style: dashed;
  background: #fafafa;
  color: var(--muted);
}

.npb-ch-chip.off strong { font-weight: 500; }

/* 판매가 없던 달로 확인해 둔 채널. 처리는 끝났지만 매출이 없으므로
   업로드된 채널(초록)과는 구분되게 회색으로 가라앉힌다. */
.npb-ch-chip.none {
  border-color: var(--line);
  background: #f6f7f8;
  color: var(--muted);
}

.npb-pending-wrap {
  margin-top: 12px;
}

.npb-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.npb-pending select {
  width: auto;
  min-width: 160px;
}

/* 거래관리 거래명세서 선택 가져오기 */
.npb-tdoc {
  border: 1px solid var(--border, #d9dde3);
  border-radius: 8px;
  padding: 10px 12px;
}

.npb-tdoc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #eef0f3;
  cursor: pointer;
  flex-wrap: wrap;
}

.npb-tdoc-row.imported {
  opacity: 0.65;
}

.npb-tdoc-main {
  min-width: 260px;
}

.npb-tdoc-amt {
  margin-left: auto;
  white-space: nowrap;
}

.npb-tdoc select {
  width: auto;
  min-width: 140px;
}

/* npb 실비 유형별 입력 */
.npb-ship-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.npb-ship-row input {
  max-width: 130px;
}

/* 합계만 적는 채널의 워크시트 블록 */
.npb-sum-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.npb-sum-cell { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.npb-sum-cell input { width: 100%; }
.npb-ch-chip select { margin-top: 4px; font-size: 12px; width: 100%; }
.npb-row-dropped { opacity: .45; text-decoration: line-through; }

/* 상품명 + 재고 배수 매칭 */
.npb-match-target { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.npb-match-target select:first-child { flex: 1 1 auto; min-width: 220px; }
.npb-match-target select + select { flex: 0 0 140px; }

.npb-ws-title { display: flex; align-items: center; gap: 8px; }
.npb-ws-title button { padding: 0 6px; min-width: 24px; }

.npb-chip-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.npb-chip-actions button { padding: 2px 8px; font-size: 12px; }

.npb-rollup-grid.five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .npb-rollup-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   Per-table column sizing.
   Guideline: 수량 ~50px, 사람/브랜드 이름 ~100-110px, 금액(<=10,000,000원) ~105px,
   날짜 ~100px, 날짜+시간 ~145px, 주문번호(20자) ~155px.
   Free text (품목명/메모/비고) gets a generous min-width and wraps instead of
   being clipped by the global `white-space: nowrap` on th/td.
   --------------------------------------------------------------------------- */

/* Shared: free-text columns opt out of nowrap. */
.brand-promotions-table td:nth-child(1),
.promotion-rules-table td:nth-child(2),
.price-catalog-table td:nth-child(3),
.price-catalog-table td:nth-child(4),
.price-revisions-table td:nth-child(3),
.price-aliases-table td:nth-child(2),
.price-aliases-table td:nth-child(3),
.brand-rule-history-table td:nth-child(5),
.promotion-targets-table td:nth-child(1),
.sheets-sync-table td:nth-child(3),
.sheet-preview-table td:nth-child(6),
.sheet-preview-table td:nth-child(7),
.collect-diff-table td:nth-child(3),
.collect-assets-table td:nth-child(4),
.pipeline-drafts-table td:nth-child(4),
.pipeline-drafts-table td:nth-child(7),
.deposit-match-table td:nth-child(4),
.deposit-match-table td:nth-child(5),
.npb-skumatch-table td:nth-child(1),
.npb-ship-table td:nth-child(2),
.npb-lines-table td:nth-child(2),
.npb-split-table td:nth-child(5),
.npb-split-result-table td:nth-child(4),
.npb-inventory-table td:nth-child(1),
.npb-channels-table td:nth-child(8),
.npb-products-table td:nth-child(1),
.npb-ws-table td:nth-child(1),
.line-items-table td:nth-child(4) {
  white-space: normal;
}

/* 브랜드 상세 — 프로모션 규칙 */
.brand-promotions-table th:nth-child(1), .brand-promotions-table td:nth-child(1) { min-width: 150px; }
.brand-promotions-table th:nth-child(2), .brand-promotions-table td:nth-child(2) { width: 100px; min-width: 100px; }
.brand-promotions-table th:nth-child(3), .brand-promotions-table td:nth-child(3) { width: 80px; min-width: 80px; }
.brand-promotions-table th:nth-child(4), .brand-promotions-table td:nth-child(4) { width: 95px; min-width: 95px; }
.brand-promotions-table th:nth-child(5), .brand-promotions-table td:nth-child(5) { width: 190px; min-width: 190px; }
.brand-promotions-table th:nth-child(6), .brand-promotions-table td:nth-child(6) { width: 70px; min-width: 70px; }
.brand-promotions-table th:nth-child(7), .brand-promotions-table td:nth-child(7) { width: 110px; min-width: 110px; }

/* 입금요청 목록 — 고정폭 컬럼은 min-width로 잠그고, 남는 가로 여백은 마지막
   메모 컬럼이 흡수하게 해서 나머지 컬럼이 불필요하게 넓어지지 않게 한다. */
.requests-table th:nth-child(1), .requests-table td:nth-child(1) { width: 40px; min-width: 40px; }
.requests-table th:nth-child(2), .requests-table td:nth-child(2) { width: 158px; min-width: 158px; }
.requests-table th:nth-child(3), .requests-table td:nth-child(3) { width: 108px; min-width: 108px; }
.requests-table th:nth-child(4), .requests-table td:nth-child(4) { width: 96px; min-width: 96px; }
.requests-table th:nth-child(5), .requests-table td:nth-child(5) { width: 110px; min-width: 110px; }
.requests-table th:nth-child(6), .requests-table td:nth-child(6) { width: 172px; min-width: 172px; }
.requests-table th:nth-child(7), .requests-table td:nth-child(7) { width: 100px; min-width: 100px; }
.requests-table th:nth-child(8), .requests-table td:nth-child(8) { width: 105px; min-width: 105px; }
.requests-table th:nth-child(9), .requests-table td:nth-child(9) { width: 95px; min-width: 95px; }
.requests-table th:nth-child(10), .requests-table td:nth-child(10) { width: 130px; min-width: 130px; }
.requests-table th:nth-child(11), .requests-table td:nth-child(11) { width: 160px; min-width: 160px; }
.requests-table th:nth-child(12), .requests-table td:nth-child(12) { width: 100px; min-width: 100px; }
.requests-table th:nth-child(13), .requests-table td:nth-child(13) { width: 146px; min-width: 146px; }
.requests-table th:nth-child(14), .requests-table td:nth-child(14) { width: 150px; min-width: 150px; }
.requests-table th:nth-child(15), .requests-table td:nth-child(15) { width: 100%; min-width: 200px; }
/* 상태 select must not stretch the column. */
.requests-table td:nth-child(3) select { width: 100%; }

/* 브랜드 목록 */
.brands-table th:nth-child(1), .brands-table td:nth-child(1) { width: 130px; min-width: 130px; }
.brands-table th:nth-child(2), .brands-table td:nth-child(2) { width: 90px; min-width: 90px; }
.brands-table th:nth-child(3), .brands-table td:nth-child(3) { width: 70px; min-width: 70px; }
.brands-table th:nth-child(4), .brands-table td:nth-child(4) { width: 130px; min-width: 130px; }
.brands-table th:nth-child(5), .brands-table td:nth-child(5) { width: 110px; min-width: 110px; }
.brands-table th:nth-child(6), .brands-table td:nth-child(6) { width: 130px; min-width: 130px; }
.brands-table th:nth-child(7), .brands-table td:nth-child(7) { width: 120px; min-width: 120px; }
.brands-table th:nth-child(8), .brands-table td:nth-child(8) { width: 90px; min-width: 90px; }
.brands-table th:nth-child(9), .brands-table td:nth-child(9) { width: 176px; min-width: 176px; }

/* 프로모션 규칙 목록 */
.promotion-rules-table th:nth-child(1), .promotion-rules-table td:nth-child(1) { width: 120px; min-width: 120px; }
.promotion-rules-table th:nth-child(2), .promotion-rules-table td:nth-child(2) { min-width: 150px; }
.promotion-rules-table th:nth-child(3), .promotion-rules-table td:nth-child(3) { width: 100px; min-width: 100px; }
.promotion-rules-table th:nth-child(4), .promotion-rules-table td:nth-child(4) { width: 80px; min-width: 80px; }
.promotion-rules-table th:nth-child(5), .promotion-rules-table td:nth-child(5) { width: 95px; min-width: 95px; }
.promotion-rules-table th:nth-child(6), .promotion-rules-table td:nth-child(6) { width: 190px; min-width: 190px; }
.promotion-rules-table th:nth-child(7), .promotion-rules-table td:nth-child(7) { width: 70px; min-width: 70px; }
.promotion-rules-table th:nth-child(8), .promotion-rules-table td:nth-child(8) { width: 110px; min-width: 110px; }

/* 단가표 */
.price-catalog-table th:nth-child(1), .price-catalog-table td:nth-child(1) { width: 110px; min-width: 110px; }
.price-catalog-table th:nth-child(2), .price-catalog-table td:nth-child(2) { width: 92px; min-width: 92px; }
.price-catalog-table th:nth-child(3), .price-catalog-table td:nth-child(3) { min-width: 200px; }
.price-catalog-table th:nth-child(4), .price-catalog-table td:nth-child(4) { min-width: 140px; }
.price-catalog-table th:nth-child(n+5):nth-child(-n+8),
.price-catalog-table td:nth-child(n+5):nth-child(-n+8) { width: 100px; min-width: 100px; }
.price-catalog-table th:nth-child(9), .price-catalog-table td:nth-child(9),
.price-catalog-table th:nth-child(10), .price-catalog-table td:nth-child(10) { width: 100px; min-width: 100px; }
.price-catalog-table th:nth-child(11), .price-catalog-table td:nth-child(11) { width: 192px; min-width: 192px; }

/* 단가표 개정 이력 */
.price-revisions-table th:nth-child(1), .price-revisions-table td:nth-child(1) { width: 110px; min-width: 110px; }
.price-revisions-table th:nth-child(2), .price-revisions-table td:nth-child(2) { width: 92px; min-width: 92px; }
.price-revisions-table th:nth-child(3), .price-revisions-table td:nth-child(3) { min-width: 200px; }
.price-revisions-table th:nth-child(n+4):nth-child(-n+9),
.price-revisions-table td:nth-child(n+4):nth-child(-n+9) { width: 100px; min-width: 100px; }
.price-revisions-table th:nth-child(10), .price-revisions-table td:nth-child(10) { width: 110px; min-width: 110px; }

/* 단가표 별칭 */
.price-aliases-table th:nth-child(1), .price-aliases-table td:nth-child(1) { width: 110px; min-width: 110px; }
.price-aliases-table th:nth-child(2), .price-aliases-table td:nth-child(2) { min-width: 170px; }
.price-aliases-table th:nth-child(3), .price-aliases-table td:nth-child(3) { min-width: 200px; }
.price-aliases-table th:nth-child(4), .price-aliases-table td:nth-child(4) { width: 190px; min-width: 190px; }
.price-aliases-table th:nth-child(5), .price-aliases-table td:nth-child(5) { width: 70px; min-width: 70px; }
.price-aliases-table th:nth-child(6), .price-aliases-table td:nth-child(6) { width: 110px; min-width: 110px; }

/* 브랜드 계약 이력 */
.brand-rule-history-table th:nth-child(1), .brand-rule-history-table td:nth-child(1) { width: 70px; min-width: 70px; }
.brand-rule-history-table th:nth-child(2), .brand-rule-history-table td:nth-child(2) { width: 110px; min-width: 110px; }
.brand-rule-history-table th:nth-child(3), .brand-rule-history-table td:nth-child(3) { width: 90px; min-width: 90px; }
.brand-rule-history-table th:nth-child(4), .brand-rule-history-table td:nth-child(4) { width: 100px; min-width: 100px; }
.brand-rule-history-table th:nth-child(5), .brand-rule-history-table td:nth-child(5) { min-width: 180px; }
.brand-rule-history-table th:nth-child(6), .brand-rule-history-table td:nth-child(6) { width: 48px; min-width: 48px; }

/* 프로모션 대상 품목 */
.promotion-targets-table th:nth-child(1), .promotion-targets-table td:nth-child(1) { min-width: 240px; }
.promotion-targets-table th:nth-child(2), .promotion-targets-table td:nth-child(2) { width: 60px; min-width: 60px; }

/* 관리자 계정 */
.admins-table th:nth-child(1), .admins-table td:nth-child(1) { width: 110px; min-width: 110px; }
.admins-table th:nth-child(2), .admins-table td:nth-child(2) { width: 210px; min-width: 210px; }
.admins-table th:nth-child(3), .admins-table td:nth-child(3) { width: 90px; min-width: 90px; }
.admins-table th:nth-child(4), .admins-table td:nth-child(4) { width: 70px; min-width: 70px; }
.admins-table th:nth-child(5), .admins-table td:nth-child(5) { width: 110px; min-width: 110px; }
.admins-table th:nth-child(6), .admins-table td:nth-child(6) { width: 110px; min-width: 110px; }

/* 권한 매트릭스 */
.admin-perms-table td:nth-child(2) { white-space: normal; }

/* 시트 동기화 */
.sheets-sync-table th:nth-child(1), .sheets-sync-table td:nth-child(1) { width: 130px; min-width: 130px; }
.sheets-sync-table th:nth-child(2), .sheets-sync-table td:nth-child(2) { width: 70px; min-width: 70px; }
.sheets-sync-table th:nth-child(3), .sheets-sync-table td:nth-child(3) { min-width: 240px; }
.sheets-sync-table th:nth-child(4), .sheets-sync-table td:nth-child(4) { width: 110px; min-width: 110px; }
.sheets-sync-table th:nth-child(5), .sheets-sync-table td:nth-child(5) { width: 130px; min-width: 130px; }

/* 시트 미리보기 */
.sheet-preview-table th:nth-child(1), .sheet-preview-table td:nth-child(1) { width: 70px; min-width: 70px; }
.sheet-preview-table th:nth-child(2), .sheet-preview-table td:nth-child(2) { width: 172px; min-width: 172px; }
.sheet-preview-table th:nth-child(3), .sheet-preview-table td:nth-child(3) { width: 100px; min-width: 100px; }
.sheet-preview-table th:nth-child(4), .sheet-preview-table td:nth-child(4) { width: 105px; min-width: 105px; }
.sheet-preview-table th:nth-child(5), .sheet-preview-table td:nth-child(5) { width: 100px; min-width: 100px; }
.sheet-preview-table th:nth-child(6), .sheet-preview-table td:nth-child(6) { min-width: 180px; }
.sheet-preview-table th:nth-child(7), .sheet-preview-table td:nth-child(7) { min-width: 160px; }

/* 수집 요약 */
.collect-summary-table th:nth-child(1), .collect-summary-table td:nth-child(1) { width: 130px; min-width: 130px; }
.collect-summary-table th:nth-child(2), .collect-summary-table td:nth-child(2) { width: 90px; min-width: 90px; }
.collect-summary-table th:nth-child(n+3):nth-child(-n+5),
.collect-summary-table td:nth-child(n+3):nth-child(-n+5) { width: 70px; min-width: 70px; }
.collect-summary-table th:nth-child(6), .collect-summary-table td:nth-child(6) { width: 110px; min-width: 110px; }
.collect-summary-table th:nth-child(7), .collect-summary-table td:nth-child(7) { width: 90px; min-width: 90px; }

/* 수집 비교 */
.collect-diff-table th:nth-child(1), .collect-diff-table td:nth-child(1) { width: 130px; min-width: 130px; }
.collect-diff-table th:nth-child(2), .collect-diff-table td:nth-child(2) { width: 80px; min-width: 80px; }
.collect-diff-table th:nth-child(3), .collect-diff-table td:nth-child(3) { min-width: 240px; }

/* 수집 자산 상태 */
.collect-assets-table th:nth-child(1), .collect-assets-table td:nth-child(1) { width: 70px; min-width: 70px; }
.collect-assets-table th:nth-child(2), .collect-assets-table td:nth-child(2) { width: 150px; min-width: 150px; }
.collect-assets-table th:nth-child(3), .collect-assets-table td:nth-child(3) { width: 146px; min-width: 146px; }
.collect-assets-table th:nth-child(4), .collect-assets-table td:nth-child(4) { min-width: 180px; }

/* 파이프라인 — 초안 */
.pipeline-drafts-table th:nth-child(1), .pipeline-drafts-table td:nth-child(1) { width: 40px; min-width: 40px; }
.pipeline-drafts-table th:nth-child(2), .pipeline-drafts-table td:nth-child(2) { width: 172px; min-width: 172px; }
.pipeline-drafts-table th:nth-child(3), .pipeline-drafts-table td:nth-child(3) { width: 110px; min-width: 110px; }
.pipeline-drafts-table th:nth-child(4), .pipeline-drafts-table td:nth-child(4) { min-width: 200px; }
.pipeline-drafts-table th:nth-child(5), .pipeline-drafts-table td:nth-child(5) { width: 120px; min-width: 120px; }
.pipeline-drafts-table th:nth-child(6), .pipeline-drafts-table td:nth-child(6) { width: 110px; min-width: 110px; }
.pipeline-drafts-table th:nth-child(7), .pipeline-drafts-table td:nth-child(7) { min-width: 160px; }
.pipeline-drafts-table th:nth-child(8), .pipeline-drafts-table td:nth-child(8) { width: 110px; min-width: 110px; }

/* 파이프라인 — 출고 */
.pipeline-ship-table th:nth-child(1), .pipeline-ship-table td:nth-child(1) { width: 40px; min-width: 40px; }
.pipeline-ship-table th:nth-child(2), .pipeline-ship-table td:nth-child(2) { width: 172px; min-width: 172px; }
.pipeline-ship-table th:nth-child(3), .pipeline-ship-table td:nth-child(3) { width: 110px; min-width: 110px; }
.pipeline-ship-table th:nth-child(4), .pipeline-ship-table td:nth-child(4) { width: 105px; min-width: 105px; }
.pipeline-ship-table th:nth-child(5), .pipeline-ship-table td:nth-child(5) { width: 150px; min-width: 150px; }

/* 입금 매칭 */
.deposit-match-table th:nth-child(1), .deposit-match-table td:nth-child(1) { width: 80px; min-width: 80px; }
.deposit-match-table th:nth-child(2), .deposit-match-table td:nth-child(2) { width: 146px; min-width: 146px; }
.deposit-match-table th:nth-child(3), .deposit-match-table td:nth-child(3) { width: 105px; min-width: 105px; }
.deposit-match-table th:nth-child(4), .deposit-match-table td:nth-child(4) { min-width: 180px; }
.deposit-match-table th:nth-child(5), .deposit-match-table td:nth-child(5) { min-width: 180px; }
.deposit-match-table th:nth-child(6), .deposit-match-table td:nth-child(6) { width: 90px; min-width: 90px; }

/* 미매칭 입금 */
.deposit-unmatched-table th:nth-child(1), .deposit-unmatched-table td:nth-child(1) { width: 146px; min-width: 146px; }
.deposit-unmatched-table th:nth-child(2), .deposit-unmatched-table td:nth-child(2) { width: 110px; min-width: 110px; }
.deposit-unmatched-table th:nth-child(3), .deposit-unmatched-table td:nth-child(3) { width: 105px; min-width: 105px; }
.deposit-unmatched-table th:nth-child(4), .deposit-unmatched-table td:nth-child(4) { width: 110px; min-width: 110px; }

/* npb — 정산월 목록 */
.npb-months-table th:nth-child(1), .npb-months-table td:nth-child(1) { width: 80px; min-width: 80px; }
.npb-months-table th:nth-child(2), .npb-months-table td:nth-child(2) { width: 100px; min-width: 100px; }
.npb-months-table th:nth-child(3), .npb-months-table td:nth-child(3) { width: 80px; min-width: 80px; }
.npb-months-table th:nth-child(4), .npb-months-table td:nth-child(4) { width: 110px; min-width: 110px; }
.npb-months-table th:nth-child(5), .npb-months-table td:nth-child(5) { width: 110px; min-width: 110px; }
.npb-months-table th:nth-child(6), .npb-months-table td:nth-child(6) { width: 150px; min-width: 150px; }

/* npb — 판매처 상품명 매칭 */
.npb-skumatch-table th:nth-child(1), .npb-skumatch-table td:nth-child(1) { min-width: 240px; }
.npb-skumatch-table th:nth-child(2), .npb-skumatch-table td:nth-child(2) { width: 60px; min-width: 60px; }
.npb-skumatch-table th:nth-child(3), .npb-skumatch-table td:nth-child(3) { min-width: 380px; }

/* npb — 출고 실비 */
.npb-ship-table th:nth-child(1), .npb-ship-table td:nth-child(1) { width: 110px; min-width: 110px; }
.npb-ship-table th:nth-child(2), .npb-ship-table td:nth-child(2) { min-width: 200px; }
.npb-ship-table th:nth-child(3), .npb-ship-table td:nth-child(3) { width: 70px; min-width: 70px; }
.npb-ship-table th:nth-child(4), .npb-ship-table td:nth-child(4) { width: 90px; min-width: 90px; }
.npb-ship-table th:nth-child(5), .npb-ship-table td:nth-child(5) { width: 110px; min-width: 110px; }
.npb-ship-table th:nth-child(6), .npb-ship-table td:nth-child(6) { width: 130px; min-width: 130px; }

/* npb — 광고 실비 */
.npb-ads-table th:nth-child(1), .npb-ads-table td:nth-child(1) { width: 130px; min-width: 130px; }
.npb-ads-table th:nth-child(2), .npb-ads-table td:nth-child(2) { width: 190px; min-width: 190px; }
.npb-ads-table th:nth-child(3), .npb-ads-table td:nth-child(3) { width: 110px; min-width: 110px; }

/* npb — 청구 */
.npb-invoice-table th:nth-child(1), .npb-invoice-table td:nth-child(1) { width: 140px; min-width: 140px; }
.npb-invoice-table th:nth-child(2), .npb-invoice-table td:nth-child(2) { width: 110px; min-width: 110px; }
.npb-invoice-table th:nth-child(3), .npb-invoice-table td:nth-child(3) { width: 110px; min-width: 110px; }
.npb-invoice-table th:nth-child(4), .npb-invoice-table td:nth-child(4) { width: 110px; min-width: 110px; }
.npb-invoice-table th:nth-child(5), .npb-invoice-table td:nth-child(5) { width: 100px; min-width: 100px; }

/* npb — 품목 라인.
   금액 칸은 대부분 숫자 입력칸이라, 글자 폭만 재면 좁다 -- 브라우저가 붙이는
   증감 화살표가 자리를 먹어 여섯 자리 금액이 잘린다. 특히 수량은 56px에
   화살표까지 들어가 값이 안 보였다. 넉넉하게 잡고, 표가 넘치면 가로로
   스크롤시킨다(품목명은 늘어나는 칸이라 줄지 않는다). */
.npb-lines-table th:nth-child(1), .npb-lines-table td:nth-child(1) { width: 56px; min-width: 56px; }
.npb-lines-table th:nth-child(2), .npb-lines-table td:nth-child(2) { min-width: 240px; }
.npb-lines-table th:nth-child(3), .npb-lines-table td:nth-child(3) { width: 112px; min-width: 112px; }
.npb-lines-table th:nth-child(4), .npb-lines-table td:nth-child(4) { width: 124px; min-width: 124px; }
.npb-lines-table th:nth-child(5), .npb-lines-table td:nth-child(5) { width: 96px; min-width: 96px; }
.npb-lines-table th:nth-child(6), .npb-lines-table td:nth-child(6) { width: 164px; min-width: 164px; }
.npb-lines-table th:nth-child(7), .npb-lines-table td:nth-child(7) { width: 116px; min-width: 116px; }
.npb-lines-table th:nth-child(8), .npb-lines-table td:nth-child(8) { width: 124px; min-width: 124px; }
.npb-lines-table th:nth-child(9), .npb-lines-table td:nth-child(9) { width: 104px; min-width: 104px; }
.npb-lines-table th:nth-child(10), .npb-lines-table td:nth-child(10) { width: 112px; min-width: 112px; }
.npb-lines-table th:nth-child(11), .npb-lines-table td:nth-child(11) { width: 120px; min-width: 120px; }
.npb-lines-table th:nth-child(12), .npb-lines-table td:nth-child(12) { width: 84px; min-width: 84px; }

/* 워크시트의 할인 — 빼는 금액이라 눈에 띄게 둔다 (0 이면 "-" 로 비워 둔다). */
.npb-ws-discount { color: var(--red); }

/* 할인 칸: 금액과 그 금액을 읽는 기준(원/%/줄)을 한 줄에 둔다. */
.npb-discount-cell {
  display: flex;
  gap: 4px;
  align-items: center;
}

.npb-discount-cell input { flex: 1 1 auto; min-width: 0; }
.npb-discount-cell select {
  flex: 0 0 auto;
  width: 62px;
  padding: 4px 2px;
  font-size: 11px;
}

/* 숫자 입력칸이 칸 폭을 넘지 않게. 화살표는 눌러 쓸 일이 없어 숨긴다 --
   그만큼 숫자가 보일 자리가 늘어난다. */
.npb-lines-table input[type="number"] {
  width: 100%;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  -moz-appearance: textfield;
}

.npb-lines-table input[type="number"]::-webkit-outer-spin-button,
.npb-lines-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* npb — 워크시트 */
.npb-ws-table th:nth-child(1), .npb-ws-table td:nth-child(1) { min-width: 200px; }
.npb-ws-table th:nth-child(2), .npb-ws-table td:nth-child(2) { width: 105px; min-width: 105px; }
.npb-ws-table th:nth-child(3), .npb-ws-table td:nth-child(3) { width: 105px; min-width: 105px; }
.npb-ws-table th:nth-child(4), .npb-ws-table td:nth-child(4) { width: 95px; min-width: 95px; }
.npb-ws-table th:nth-child(5), .npb-ws-table td:nth-child(5) { width: 85px; min-width: 85px; }
.npb-ws-table th:nth-child(n+6), .npb-ws-table td:nth-child(n+6) { width: 110px; min-width: 110px; }

/* npb — 주체별 정산 */
.npb-party-table th:nth-child(1), .npb-party-table td:nth-child(1) { width: 130px; min-width: 130px; }
.npb-party-table th:nth-child(n+2), .npb-party-table td:nth-child(n+2) { width: 110px; min-width: 110px; }

/* npb — 분배 */
.npb-split-table th:nth-child(1), .npb-split-table td:nth-child(1) { width: 130px; min-width: 130px; }
.npb-split-table th:nth-child(2), .npb-split-table td:nth-child(2) { width: 80px; min-width: 80px; }
.npb-split-table th:nth-child(3), .npb-split-table td:nth-child(3) { width: 70px; min-width: 70px; }
.npb-split-table th:nth-child(4), .npb-split-table td:nth-child(4) { width: 110px; min-width: 110px; }
.npb-split-table th:nth-child(5), .npb-split-table td:nth-child(5) { min-width: 180px; }

.npb-split-result-table th:nth-child(1), .npb-split-result-table td:nth-child(1) { width: 130px; min-width: 130px; }
.npb-split-result-table th:nth-child(2), .npb-split-result-table td:nth-child(2) { width: 80px; min-width: 80px; }
.npb-split-result-table th:nth-child(3), .npb-split-result-table td:nth-child(3) { width: 110px; min-width: 110px; }
.npb-split-result-table th:nth-child(4), .npb-split-result-table td:nth-child(4) { min-width: 180px; }

/* npb — 재고 */
.npb-inventory-table th:nth-child(1), .npb-inventory-table td:nth-child(1) { min-width: 220px; }
.npb-inventory-table th:nth-child(n+2), .npb-inventory-table td:nth-child(n+2) { width: 90px; min-width: 90px; }

/* npb — 채널 단가표 */
.npb-channels-table th:nth-child(1), .npb-channels-table td:nth-child(1) { width: 130px; min-width: 130px; }
.npb-channels-table th:nth-child(2), .npb-channels-table td:nth-child(2) { width: 150px; min-width: 150px; }
.npb-channels-table th:nth-child(3), .npb-channels-table td:nth-child(3) { width: 140px; min-width: 140px; }
.npb-channels-table th:nth-child(4), .npb-channels-table td:nth-child(4) { width: 105px; min-width: 105px; }
.npb-channels-table th:nth-child(5), .npb-channels-table td:nth-child(5) { width: 90px; min-width: 90px; }
.npb-channels-table th:nth-child(6), .npb-channels-table td:nth-child(6) { width: 105px; min-width: 105px; }
.npb-channels-table th:nth-child(7), .npb-channels-table td:nth-child(7) { width: 140px; min-width: 140px; }
.npb-channels-table th:nth-child(8), .npb-channels-table td:nth-child(8) { min-width: 160px; }
.npb-channels-table th:nth-child(9), .npb-channels-table td:nth-child(9) { width: 120px; min-width: 120px; }
.npb-channels-table th:nth-child(10), .npb-channels-table td:nth-child(10) { width: 120px; min-width: 120px; }
.npb-channels-table th:nth-child(11), .npb-channels-table td:nth-child(11) { width: 48px; min-width: 48px; }

/* npb — 상품 마스터 */
.npb-products-table th:nth-child(1), .npb-products-table td:nth-child(1) { min-width: 220px; }
.npb-products-table th:nth-child(2), .npb-products-table td:nth-child(2) { width: 140px; min-width: 140px; }
.npb-products-table th:nth-child(n+3):nth-child(-n+6),
.npb-products-table td:nth-child(n+3):nth-child(-n+6) { width: 105px; min-width: 105px; }
.npb-products-table th:nth-child(7), .npb-products-table td:nth-child(7) { width: 90px; min-width: 90px; }
.npb-products-table th:nth-child(8), .npb-products-table td:nth-child(8) { width: 100px; min-width: 100px; }

/* npb — 3PL 단가표 (헤더가 동적이라 마지막 삭제 열만 좁힌다) */
.npb-3pl-table th:last-child, .npb-3pl-table td:last-child { width: 48px; min-width: 48px; }

/* 남는 가로 여백은 테이블마다 지정한 한 컬럼이 흡수한다. 그러지 않으면 여유 폭이
   모든 컬럼에 고르게 퍼져서 좁아야 할 컬럼까지 불필요하게 넓어진다. */
.brand-promotions-table th:nth-child(1), .brand-promotions-table td:nth-child(1) { width: 100%; }
.brands-table th:nth-child(6), .brands-table td:nth-child(6) { width: 100%; }
.promotion-rules-table th:nth-child(2), .promotion-rules-table td:nth-child(2) { width: 100%; }
.price-catalog-table th:nth-child(3), .price-catalog-table td:nth-child(3) { width: 100%; }
.price-revisions-table th:nth-child(3), .price-revisions-table td:nth-child(3) { width: 100%; }
.price-aliases-table th:nth-child(3), .price-aliases-table td:nth-child(3) { width: 100%; }
.brand-rule-history-table th:nth-child(5), .brand-rule-history-table td:nth-child(5) { width: 100%; }
.promotion-targets-table th:nth-child(1), .promotion-targets-table td:nth-child(1) { width: 100%; }
.admins-table th:nth-child(2), .admins-table td:nth-child(2) { width: 100%; }
.admin-perms-table th:nth-child(2), .admin-perms-table td:nth-child(2) { width: 100%; }
.sheets-sync-table th:nth-child(3), .sheets-sync-table td:nth-child(3) { width: 100%; }
.sheet-preview-table th:nth-child(6), .sheet-preview-table td:nth-child(6) { width: 100%; }
.collect-summary-table th:nth-child(1), .collect-summary-table td:nth-child(1) { width: 100%; }
.collect-diff-table th:nth-child(3), .collect-diff-table td:nth-child(3) { width: 100%; }
.collect-assets-table th:nth-child(4), .collect-assets-table td:nth-child(4) { width: 100%; }
.pipeline-drafts-table th:nth-child(4), .pipeline-drafts-table td:nth-child(4) { width: 100%; }
.pipeline-ship-table th:nth-child(5), .pipeline-ship-table td:nth-child(5) { width: 100%; }
.deposit-match-table th:nth-child(5), .deposit-match-table td:nth-child(5) { width: 100%; }
.deposit-unmatched-table th:nth-child(4), .deposit-unmatched-table td:nth-child(4) { width: 100%; }
.npb-months-table th:nth-child(6), .npb-months-table td:nth-child(6) { width: 100%; }
.npb-skumatch-table th:nth-child(3), .npb-skumatch-table td:nth-child(3) { width: 100%; }
.npb-ship-table th:nth-child(2), .npb-ship-table td:nth-child(2) { width: 100%; }
.npb-ads-table th:nth-child(1), .npb-ads-table td:nth-child(1) { width: 100%; }
.npb-invoice-table th:nth-child(1), .npb-invoice-table td:nth-child(1) { width: 100%; }
.npb-lines-table th:nth-child(2), .npb-lines-table td:nth-child(2) { width: 100%; }
.npb-party-table th:nth-child(1), .npb-party-table td:nth-child(1) { width: 100%; }
.npb-split-table th:nth-child(5), .npb-split-table td:nth-child(5) { width: 100%; }
.npb-split-result-table th:nth-child(4), .npb-split-result-table td:nth-child(4) { width: 100%; }
.npb-inventory-table th:nth-child(1), .npb-inventory-table td:nth-child(1) { width: 100%; }
.npb-channels-table th:nth-child(8), .npb-channels-table td:nth-child(8) { width: 100%; }
.npb-products-table th:nth-child(1), .npb-products-table td:nth-child(1) { width: 100%; }
.npb-ws-table th:nth-child(1), .npb-ws-table td:nth-child(1) { width: 100%; }

/* 거래처 목록 */
/* 입력 폼이 옆자리를 차지하므로 목록이 쓸 수 있는 폭이 넉넉하지 않다 --
   작업 버튼까지 잘리지 않게 각 열을 필요한 만큼만 잡는다. */
.partners-table th:nth-child(1), .partners-table td:nth-child(1) { min-width: 140px; }
.partners-table th:nth-child(2), .partners-table td:nth-child(2) { width: 120px; min-width: 120px; }
.partners-table th:nth-child(3), .partners-table td:nth-child(3) { width: 110px; min-width: 110px; }
.partners-table th:nth-child(4), .partners-table td:nth-child(4) { width: 90px; min-width: 90px; }
.partners-table th:nth-child(5), .partners-table td:nth-child(5) { width: 140px; min-width: 140px; }
/* 수정 / 새 창 / 삭제 세 버튼이 한 줄에 들어갈 만큼 */
.partners-table th:nth-child(6), .partners-table td:nth-child(6) { width: 172px; min-width: 172px; }

/* 납품지 목록은 4열이라 거래처 표의 열 규칙을 그대로 쓸 수 없다. */
.delivery-places-table th:nth-child(1), .delivery-places-table td:nth-child(1) { min-width: 150px; }
.delivery-places-table th:nth-child(2), .delivery-places-table td:nth-child(2) { min-width: 200px; }
.delivery-places-table th:nth-child(3), .delivery-places-table td:nth-child(3) { width: 150px; min-width: 150px; }
.delivery-places-table th:nth-child(4), .delivery-places-table td:nth-child(4) { width: 172px; min-width: 172px; }

/* 원부자재 목록 */
.materials-table th:nth-child(1), .materials-table td:nth-child(1) { min-width: 180px; }
.materials-table th:nth-child(2), .materials-table td:nth-child(2) { width: 100px; min-width: 100px; }
.materials-table th:nth-child(3), .materials-table td:nth-child(3) { width: 140px; min-width: 140px; }
.materials-table th:nth-child(4), .materials-table td:nth-child(4) { width: 90px; min-width: 90px; }
.materials-table th:nth-child(5), .materials-table td:nth-child(5) { width: 100px; min-width: 100px; }
.materials-table th:nth-child(6), .materials-table td:nth-child(6) { width: 90px; min-width: 90px; }
.materials-table th:nth-child(7), .materials-table td:nth-child(7) { width: 172px; min-width: 172px; }

/* 발주서 목록 */
.purchase-orders-table th:nth-child(1), .purchase-orders-table td:nth-child(1) { width: 140px; min-width: 140px; }
.purchase-orders-table th:nth-child(2), .purchase-orders-table td:nth-child(2) { width: 84px; min-width: 84px; }
.purchase-orders-table th:nth-child(3), .purchase-orders-table td:nth-child(3) { min-width: 130px; }
.purchase-orders-table th:nth-child(4), .purchase-orders-table td:nth-child(4) { width: 100px; min-width: 100px; }
.purchase-orders-table th:nth-child(5), .purchase-orders-table td:nth-child(5) { width: 80px; min-width: 80px; }
.purchase-orders-table th:nth-child(6), .purchase-orders-table td:nth-child(6) { width: 105px; min-width: 105px; }
/* 수정·미리보기·엑셀·PDF·삭제 다섯 개가 한 줄에 들어가야 한다. */
.purchase-orders-table th:nth-child(7), .purchase-orders-table td:nth-child(7) { width: 312px; min-width: 312px; }

/* 발주서 미리보기 -- 실제 엑셀 파일이 아니라 같은 내용을 발주서 양식과
   비슷한 모양의 HTML로 보여주는 오버레이. 색상은 trade_doc_common.py의
   디자인 시스템(차콜 헤더, 연한 하늘색 금액 강조)과 맞춘다. */
.po-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  z-index: 1000;
}

/* 창이 문서보다 작아도 모달 전체가 화면 안에 들어오게 하고, 넘치는 문서
   내용만 모달 안에서 스크롤시킨다 -- 모달째로 잘려 합계와 마감 문구가
   안 보이면 미리보기 구실을 못 한다. 툴바(닫기/다운로드)도 늘 보인다. */
.po-preview-modal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 880px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.po-preview-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  border-radius: 10px 10px 0 0;
}

.po-preview-toolbar > div {
  display: flex;
  gap: 8px;
}

.po-doc {
  flex: 1 1 auto;
  overflow: auto;
  padding: 32px 36px 28px;
  color: #1a1a1a;
  font-size: 13px;
}

.po-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.po-doc-issuer {
  font-size: 20px;
  font-weight: 700;
}

.po-doc-docno {
  font-size: 11px;
  color: #808080;
  text-align: right;
  margin-bottom: 4px;
}

.po-doc-title {
  font-size: 30px;
  font-weight: 800;
  text-align: right;
  letter-spacing: 2px;
}

.po-doc-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 22px;
}

.po-doc-info-label {
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.po-doc-info-row {
  display: flex;
  gap: 10px;
  padding: 3px 0;
}

.po-doc-info-row > span:first-child {
  flex: 0 0 72px;
  color: #808080;
}

/* 납품장소 블록 -- 정보 블록과 품목 테이블 사이, 블록 전체를 굵은 선으로
   두른다(실물 발주서의 형광 하이라이트 자리를 테두리가 대신한다). */
.po-doc-delivery {
  border: 2px solid #1a1a1a;
  padding: 4px 12px;
  margin: -8px 0 20px;
}

.po-doc-table {
  width: 100%;
  /* 아주 좁은 창에서 7열이 뭉개지지 않게 -- 대신 가로로 스크롤한다. */
  min-width: 560px;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 4px;
}

.po-doc-table th {
  background: #4d4d4d;
  color: #fff;
  padding: 7px 8px;
  text-align: center;
}

.po-doc-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #bfbfbf;
}

.po-doc-table td.po-doc-num,
.po-doc-table td.num {
  text-align: right;
}

.po-doc-table td.po-doc-center {
  text-align: center;
}

.po-doc-amount {
  background: #dce6f1;
}

.po-doc-footer {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-top: 14px;
}

.po-doc-notes {
  border: 1px solid #bfbfbf;
  min-height: 64px;
}

.po-doc-notes-label {
  background: #4d4d4d;
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
}

.po-doc-notes-body {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.po-doc-totals {
  border: 1px solid #bfbfbf;
  font-size: 12px;
}

.po-doc-total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid #bfbfbf;
}

.po-doc-total-row:last-child {
  border-bottom: none;
}

.po-doc-total-row .num {
  font-variant-numeric: tabular-nums;
}

.po-doc-total-row-grand {
  background: #dce6f1;
  font-weight: 700;
  font-size: 13px;
}

.po-doc-closing {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}

/* --- 상품동기화 ------------------------------------------------------------ */
.ps-runbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ps-runbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ps-job { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.ps-job-failed { color: var(--red); }
.ps-job-done { color: var(--green); }
.ps-progress { width: 120px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ps-progress > div { height: 100%; background: var(--primary); transition: width 300ms ease; }
.ps-spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: ps-spin 0.8s linear infinite; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
.ps-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.ps-chip span { color: var(--muted); margin-left: 2px; }
.ps-chip.active { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); }
.ps-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ps-red { background: #fde8e6; color: var(--red); }
.ps-green { background: #e5f4e8; color: var(--green); }
.ps-blue { background: var(--primary-weak); color: var(--primary); }
.ps-yellow { background: #fdf3d7; color: var(--yellow); }
.ps-gray { background: #eef0f4; color: var(--muted); }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th, .ps-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; }
.ps-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; color: var(--muted); font-weight: 600; }
.ps-table td.num, .ps-table th.num { text-align: right; }
.ps-table tr.ps-cont td { border-top: none; }
.ps-thumb-sm { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.ps-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.ps-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.ps-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f7f7f7; }
.ps-card-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ps-card-body input { width: 100%; }
.ps-card-body .toolbar { margin-top: 8px; flex-wrap: wrap; }
.ps-note { font-size: 12px; color: var(--yellow); background: #fdf8e8; border-radius: 6px; padding: 4px 8px; margin-top: 4px; }
.ps-result { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #fafbfc; }
.ps-result ul { margin: 6px 0; padding-left: 18px; }
.ps-warn { border-left: 4px solid var(--yellow); }
.ps-warn ul { margin: 8px 0 0; padding-left: 18px; }
.ps-steps { margin: 6px 0; padding-left: 18px; }
.ps-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ps-search input { flex: 1 1 260px; }
.ps-search .ps-plain { flex-basis: 100%; }
.ps-plain { list-style: none; padding: 0; margin: 8px 0; }
.ps-plain li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.ps-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.ps-datefilter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ps-datefilter input { width: auto; }
.ps-runbar + .ps-runbar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ps-table td.ps-opt { font-weight: 600; white-space: nowrap; }
.ps-table td.ps-change { white-space: nowrap; }
.nav-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
.ps-conn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 13px; }

/* 상품동기화 브랜드 탭 */
.ps-brands { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.ps-brands button { border-radius: 999px; padding: 6px 14px; background: var(--panel, #fff); }
.ps-brands button.active { background: var(--ink, #111); color: #fff; border-color: var(--ink, #111); }
.ps-brands button.active .muted { color: rgba(255,255,255,.7); }
.ps-brand-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--red, #d33); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }