/* ---- 전표 창 — 모든 전표(재고조정·창고이동·매입·매입반품)가 이 한 판을 쓴다 ----
   재고 전표를 만들며 나왔지만 종류를 가리지 않으므로 stock.css 에서 떼어 왔다
   (2026-08-01, 매입이 올라타면서). 뒷막은 일괄변경의 blk-back 을 같이 쓴다.
   치수는 화면 규칙 그대로 — 입력칸 34 · 모서리 8 · 글자는 단계표의 값만.

   좌우 분할이다(2026-07-31 사장님 결정) — 왼쪽 찾아 담기(상주) · 오른쪽 쓰는 자리.
   흐르는 상자는 후보 목록(.slp-fl)과 줄 목록(.slp-t) 둘뿐이다.

   ⛔ 일괄 지정(.slp-bulk)의 조상에는 overflow 를 걸지 마라 — 펼침 목록(dd-pop)은
      absolute 라 스크롤 상자의 경계에서 잘린다(2026-07-30에 실제로 났던 사고). */
.slp-back {
  position: fixed; inset: 0; z-index: 950; background: var(--backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 0; overflow-y: auto;
}
/* 카드는 뷰포트 안에 선다 — 안의 두 목록이 각자 흐르므로 카드 스크롤은 없다.
   position: relative 는 일괄 지정 펼침 목록이 서는 기준이다.

   ⭐ **높이를 못 박는다** (2026-08-01 사장님 지시 — *"모달이 중앙에 있질 않고 화면의
   꼭대기에서 나타난다. 아랫쪽을 늘리는 방식으로 중앙정렬할 것"*).
   내용 높이에 맡기면 줄이 적을 때 카드가 짧아져 위에 붙는다. 높이를 정해 두면
   **줄 목록이 남는 높이를 다 먹고**(그것이 이 창의 본디 규칙이다) 카드는 언제나
   같은 자리에 선다 — 줄을 담을 때마다 창이 자라 눈이 따라다니지 않아도 된다. */
.slp {
  /* ⭐ 1240 → 1380 (2026-08-02, 매출이 붙으며). 매출 줄은 **원가·이익 두 칸이 더 있어서**
     매입 기준 폭으로는 오른쪽이 잘렸고, 억지로 욱여넣으니 **품목 이름이 잘렸다.**
     반품·읽기 모드는 왼쪽 찾는 칸이 없어 원래 넉넉하다 — 모자란 것은 **쓰는 중인 매출**
     하나였고, 그 하나를 위해 넓힌다. 좁은 화면은 `max-width` 가 받는다. */
  width: 1380px; max-width: calc(100vw - 40px);
  height: min(860px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--shadow-3); padding: 0 18px 14px;
}
.slp-h {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); padding: 16px 0 2px;
}
.slp-h > b { font-size: 14px; }
.slp-no { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slp-close { margin-left: 4px; }

/* ⭐ **칸이 늘면 다음 줄로 흐른다** (2026-08-02 사장님 지적 — *"인터페이스가 너무
   나쁜데"* · *"지금 선택지가 많아서 공간이 부족해"*). 직접 매출에서 칸이 하나 더 늘자
   한 줄에 못 들어가 **세그먼트가 안에서 두 줄로 접혔고**, 흰 배경 칩이 위로 삐져나와
   **펼침 목록이 열린 것처럼 보였다.** 접히는 것은 바이지 칸이 아니다. */
.slp-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; row-gap: 10px; margin-top: 12px;
}
/* ⛔ **머리 줄의 세그먼트는 접히지 않는다** — 접히면 두 갈래가 위아래로 서서
   고르는 단추가 아니라 열린 목록으로 읽힌다. 좁으면 세그먼트째 다음 줄로 간다. */
.slp-bar .seg { flex: none; flex-wrap: nowrap; }
/* 칸 높이(34)에 맞춘다 — 라벨과 밑줄이 어긋나면 한 줄로 안 읽힌다(화면 규칙 §3). */
.slp-bar .seg-p { height: 30px; }
/* 라벨 + 그 칸 한 묶음. **접히는 단위가 이것이다** — 창이 만든다(slip_ui 의 group). */
.slp-f { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slp-f.grow { flex: 1; }
.slp-lbl { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); }
/* 라벨 옆 물음표는 라벨에 붙는다 — 별표(*)와 같은 자리다. */
.slp-lbl .help { margin-left: 4px; }
.slp-val { font-size: 12.5px; font-weight: 600; }
.slp-in {
  height: 34px; padding: 0 10px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--btn-bd); border-radius: 8px;
  background: var(--bg); color: var(--text); outline: 0; min-width: 0;
}
.slp-in:focus { border-color: var(--accent); background: var(--surface); }
.slp-date { width: 142px; }
[data-theme="dark"] .slp-date { color-scheme: dark; }
.slp-memo { flex: 1; }
.slp-bar .dd { width: 150px; flex: none; }
/* 매입의 거래처는 이름이 길고 사업자번호가 밑에 붙어 더 넓다. */
.slp-bar .dd.slp-wide { width: 230px; }
/* ⭐ **결제방식·플랫폼은 그만큼 안 넓어도 된다** (2026-08-02) — 「현금」·「오픈마켓 가」처럼
   이름이 짧다. 거래처 폭을 그대로 물려받고 있었고, 직접 매출에서 칸이 하나 더 늘자
   그 60px 이 머리 줄을 다음 줄로 밀었다. **펼침 목록은 그대로 넓다**(아래 min-width). */
.slp-bar .dd.slp-pay { width: 170px; }
.slp-bar .dd.slp-pay .dd-pop { min-width: 240px; }
/* ⭐ **머리 줄의 펼침 목록은 오른쪽에 맞춰 왼쪽으로 편다** (2026-08-02 사장님 지시 —
   *"공간이 부족하니까 오른쪽에 스크롤바가 나타나버려 … 드롭다운을 좌측 쪽으로
   늘어나게 해"*). 칸보다 넓은 목록이 **오른쪽으로 자라면 카드를 넘겨** 가로 스크롤바가
   생긴다. 머리 줄의 칸들은 카드 오른쪽까지 늘어서므로 **자랄 자리는 왼쪽뿐이다.**
   ⛔ 칸 하나에만 적지 마라 — 다음에 칸이 하나 더 늘면 같은 일이 또 난다. */
.slp-bar .dd-pop { left: auto; right: 0; }


/* 좌우 분할 — 왼쪽은 찾아 담기(상주), 오른쪽은 쓰는 자리. 세로로 쌓고 펼친 목록
   자리를 카드 밑에 예약하던 구조는 낮은 화면(1366×768)에서 줄 목록을 두 줄로 눌렀다.
   상주 목록에는 예약이 없다 — 줄 목록이 오른쪽 칸의 남는 높이를 다 쓴다. */
.slp-main { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; }
/* ⭐ **좁은 화면에서는 찾는 칸이 먼저 양보한다** (2026-08-02, 매출이 붙으며).
   찾는 칸은 품목 이름만 읽으면 되지만 줄 목록에는 **금액이 걸려 있다** —
   줄어드는 쪽이 어디여야 하는지가 이 한 줄이다.

   ⛔ **`flex-shrink: 1` 로는 안 된다** (그렇게 뒀다가 고쳤다). 오른쪽 칸이
   `min-width: 0` 이라 **줄어들 수 있는 쪽이 오히려 오른쪽이었고**, 찾는 칸은 300 을
   그대로 쥔 채 **줄 목록만 잘렸다.** 양보하라고 적어 두는 것으로는 부족하고
   **얼마나 먼저 양보하는지**(100)를 적어야 순서가 선다. */
.slp-find {
  width: 300px; flex: 0 100 300px; min-width: 208px;
  display: flex; flex-direction: column; min-height: 0;
  padding: 12px 16px 0 0; border-right: 1px solid var(--line);
}
.slp-fq { width: 100%; }
/* 창고 골라 보기 — 찾는 칸 **위**에 상주한다(어디를 보는지가 먼저다).
   칸이 좁아(300 → 208px) 낱말을 한 치수 줄인다. 넘치면 세그먼트가 스스로 접힌다. */
.slp-wseg { margin-bottom: 8px; }
.slp-wseg .seg-p { height: 24px; padding: 0 7px; font-size: 11px; }
/* 후보 목록은 남는 높이를 다 쓰고 안에서 흐른다(dd-l 의 상한은 팝업용이라 푼다). */
.slp-fl { flex: 1 1 auto; min-height: 0; max-height: none; margin-top: 8px; padding: 4px 0; }
/* 줄 밑 글(코드·분류·브랜드, 세트는 구성품까지)은 **한 줄로 맞춘다.** 흘려 두면 세트 줄만
   세 줄이 되어 높이가 들쭉날쭉하고 그만큼 후보가 적게 보인다 — 전부 보려면 마우스를 올린다. */
.slp-fl .dd-m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slp-work { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* 일괄 지정의 목록은 창고 넷뿐이라 자기 칸 밑에서 그대로 펴진다. */
.slp-bulk .dd-l { max-height: 220px; }

/* 일괄 지정 — 고른 줄에만 앉는다. 줄 안에는 펼침 목록을 두지 않으므로 이 자리가 유일한 창구다. */
.slp-bulk {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--head);
}
.slp-blbl { flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.slp-bulk .dd { width: 190px; flex: none; }
/* 줄과 같은 모양으로 읽히게 — 보내는 창고 → 받는 창고 */
.slp-b-arr { flex: none; color: var(--faint); font-size: 12px; }
/* 일괄 지정의 숫자 칸(매입 단가). 드롭다운과 같은 폭으로 세워 바가 들쭉날쭉하지 않게 한다. */
.slp-bnum { flex: none; display: flex; align-items: center; gap: 6px; }
.slp-bnum .slp-in { width: 128px; text-align: right; }
.slp-bnum > span { font-size: 11px; color: var(--faint); }

/* 줄 목록은 오른쪽 칸의 남는 높이를 다 쓴다 — 넘치면 안에서 흐른다.
   세로 쌓기 시절의 상한(100vh−620px)은 1366×768 에서 두 줄만 남겼다 — 걷어냈다.
   아래 두 줄치는 빈 전표에서 칸이 무너지지 않는 자리다. */
.slp-t {
  min-height: 118px; flex: 1 1 auto;
  overflow-y: auto; font-variant-numeric: tabular-nums;
}
.slp-th, .slp-r { display: flex; gap: 8px; padding: 4px 2px; }
.slp-th {
  align-items: flex-end; min-height: 34px; padding-bottom: 5px;
  font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.35;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2; background: var(--surface);
}
.slp-r { align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); }
.slp-r.on { background: var(--sel-row); }
.sc-chk { width: 24px; display: flex; justify-content: center; }
.sc-chk input { cursor: pointer; }
.slp-none-v { font-size: 12px; color: var(--faint); }
.slp-c { flex: none; min-width: 0; }
.sc-item { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.sc-item .nm { display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.sc-item .nm .badge { align-self: center; }
.sc-item b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slp-code { font-style: normal; font-size: 10.5px; color: var(--faint); }
/* 세트가 실제로 무엇을 옮기는지 — 세트는 어디에도 수량이 없다(§4-3). */
.slp-parts { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⭐ 146 → 124 (2026-08-02). 줄 안에 펼침 목록을 두지 않게 되면서(§ 규칙 3) 이 칸은
   **글자만 든다** — 드롭다운을 담던 시절의 폭이 그대로 남아 있었다. */
.sc-wh { width: 124px; }
/* 재고가 음수여도 붉히지 않는다 — 음수 재고는 의도된 것이라 사건이 아니다(§5-1). */
.sc-cur { width: 80px; text-align: right; font-size: 12px; color: var(--muted); }
/* ══════════════ 숫자 칸 — 정렬은 **여기 한 곳**이 정한다 ══════════════
   ⭐ 2026-08-06 사장님 지적 — *"입금예정금액 부분이 여전히 좌측정렬이고 (공용
   컴포넌트를 안 쓰냐? 어떻게 이렇게 정렬 기준이 다를 수 있지)"*. 옳다.
   그전에는 **칸 이름 열셋을 손으로 늘어놓은 목록**이 머리 정렬을 정하고, 값 정렬은
   `.sc-*` 마다 `text-align: right` 를 따로 적고 있었다. **두 목록이 갈라져** 새 칸
   (`sc-due2`)이 한쪽에만 들어갔고 — 머리는 오른쪽, 값은 왼쪽이 됐다.

   이제 **표시는 `n` 하나**다(그리드의 `.dtable .n` 과 같은 낱말 · 데이터그리드 §4).
   칸을 만들 때 `'slp-c n sc-xxx'` 라고 적으면 머리도 값도 오른쪽으로 선다.
   ⛔ **이름 목록을 다시 만들지 마라** — 목록은 반드시 갈라진다. */
.slp-c.n { text-align: right; justify-content: flex-end; }
/* 머리줄만 두 줄이다. keep-all 이 없으면 한글이 낱자로 쪼개진다.
   sc-qty 는 줄에서 가로 배치(부호+칸)라, 머리줄에서만 세로로 다시 세운다 —
   안 그러면 두 마디가 옆으로 붙어 한 줄처럼 읽힌다. */
.slp-th .slp-c.n {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0; word-break: keep-all;
}
/* ⭐ **머리글이 한 낱말 ＋ 물음표면 가로로 선다** (2026-08-06) — 두 줄짜리 머리글을
   한 낱말로 줄인 자리(단가 · 평균매입가)에서 `?` 가 **아래로 떨어져** 옆 칸과 밑줄이
   어긋났다. `?` 는 낱말의 일부이지 둘째 줄이 아니다. */
.slp-th .slp-c.n.one { flex-direction: row; align-items: center; justify-content: flex-end; gap: 3px; }

.sc-qty { width: 96px; display: flex; align-items: center; gap: 6px; }
.sc-qty .slp-in { width: 100%; text-align: right; }
.sc-qty .slp-val { flex: 1; text-align: right; }
.slp-sign { width: 10px; text-align: center; font-size: 13px; color: var(--fg-confirm); }
.slp-sign.minus { color: var(--fg-cancel); }
/* 조정수량 — 사람이 부호를 적지 않는 대신 결과를 여기서 본다. */
.sc-diff { width: 92px; text-align: right; font-size: 12px; font-weight: 600; }
.sc-diff.plus { color: var(--fg-confirm); }
.sc-diff.minus { color: var(--fg-cancel); }
.sc-diff.same { color: var(--faint); font-weight: 400; }
.slp-th .sc-diff { display: flex; flex-direction: column; align-items: flex-end;
  font-weight: 600; color: var(--muted); word-break: keep-all; }
.sc-arr { width: 16px; text-align: center; color: var(--faint); align-self: center; }

/* ---- 매입 전표의 돈 칸 ----
   **사람이 적는 것은 단가 하나다**(합계금액·VAT 포함). 나머지 셋은 수량 × 단가에서 나온다.
   ⭐ 「금액」 한 칸이었다가 **공급가액 · 부가세 · 합계금액** 셋으로 갈랐다
   (2026-08-01 사장님 지시) — 세금계산서와 맞춰 볼 때 필요한 것이 앞의 둘이다.
   합계금액만 굵다. 그 줄에서 사람이 눈으로 검산하는 값이고, 셋이 다 굵으면 못 가린다. */
.sc-price { width: 104px; display: flex; align-items: center; }
.sc-price .slp-in { width: 100%; text-align: right; }
.sc-price .slp-val { flex: 1; text-align: right; }
.sc-sup, .sc-vat { width: 92px; text-align: right; font-size: 12px; color: var(--muted); }
/* 확정된 매입에서만 뜨는 두 칸 — 얼마나 왔고 얼마가 남았나(2026-08-01 사장님 지시).
   0 인 칸은 흐리다: 눈이 찾는 것은 **아직 안 온 것**이다. */
/* 반품 전표의 두 칸 — 원래 얼마를 샀고 그중 얼마를 이미 돌려보냈나(2026-08-01). */
.sc-ord, .sc-done { width: 76px; text-align: right; font-size: 12px; color: var(--faint); }
.sc-ord { color: var(--muted); }
.sc-done.on { color: var(--fg-cancel); font-weight: 600; }
.sc-got, .sc-due { width: 68px; text-align: right; font-size: 12px; color: var(--faint); }
.sc-got.on { color: var(--fg-confirm); font-weight: 600; }
.sc-due.on { color: var(--fg-temp); font-weight: 600; }
.sc-amt { width: 104px; text-align: right; font-size: 12.5px; font-weight: 600; }
.sc-sup.none, .sc-vat.none, .sc-amt.none { color: var(--faint); font-weight: 400; }

.sc-x { width: 26px; display: flex; justify-content: center; }
.slp-x {
  width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent;
  color: var(--faint); font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
}
.slp-x:hover { background: var(--hover); color: var(--fg-cancel); }
.slp-none { padding: 16px; text-align: center; font-size: 12px; color: var(--faint); }

/* 전표 합계 — 줄 목록 바로 밑에 붙어 마지막 줄과 한 몸으로 읽힌다.
   **적는 것은 합계금액 하나이고**(사람이 치는 칸은 단가뿐), 보여 주는 것은 셋이다 —
   줄에서 가른 것을 아래에서 다시 합치지 않으면 눈이 두 층을 못 잇는다. */
.slp-tot {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 9px 28px 2px 2px; border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.slp-tot > span { font-size: 11.5px; color: var(--muted); }
.slp-tot > b { font-size: 14px; }

/* 단추는 카드 바닥 전체 폭 — 어느 칸을 쓰다가도 같은 자리다. */
.slp-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.slp-hint { flex: 1; font-size: 11px; color: var(--faint); line-height: 1.6; }

.slp-list { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.slp-lh { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.slp-lr {
  display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: 12px;
  border-bottom: 1px solid var(--line); padding: 2px 0;
}
.slp-lr > b { font-variant-numeric: tabular-nums; }
.slp-sum { color: var(--muted); font-size: 11.5px; }
.slp-now { font-size: 11px; font-weight: 600; color: var(--accent); }
.slp-more { padding-top: 6px; font-size: 11px; color: var(--faint); }

/* ---- 종류 토글 (slip_ui.js) ⭐ ----
   발주서 ⇄ 매입. 둘은 사실상 같은 양식이라 창을 나누지 않고 여기서 갈아탄다.
   **창 제목을 겸한다** — 옆에 제목을 또 적으면 둘이 어긋난다. */
.slp-tog {
  display: flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.slp-tog-b {
  height: 28px; padding: 0 14px; border: 0; border-radius: 7px;
  background: none; color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.slp-tog-b:hover { color: var(--text); }
.slp-tog-b.on {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-1); cursor: default;
}

/* 「비워도 됩니다」 — 발주서의 거래처 칸. 필수 별표(*)가 앉는 자리에 대신 든다.
   별표만 떼면 "필수인데 표시를 안 한 칸"과 구별되지 않는다. */
.slp-opt { margin-left: 5px; font-size: 10.5px; font-style: normal; color: var(--faint); }

/* 합계 줄의 세 마디 — 공급가액·부가세는 흐리게, 합계금액만 크게.
   같은 크기로 늘어놓으면 어느 것이 「낼 돈」인지 안 보인다. */
.slp-tsub { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--muted); }
.slp-tsub b { font-weight: 600; color: var(--text); }
.slp-tbig { display: flex; align-items: baseline; gap: 7px; margin-left: 6px; }
.slp-tbig > span { font-size: 12px; color: var(--muted); }
.slp-tbig b { font-size: 16px; font-weight: 700; }

/* 칸이 여덟이 되는 전표(확정된 매입)에서 품목 칸이 남는 자리를 다 먹으면 오른쪽이
   잘린다 — 최소 폭을 낮춰 숫자 칸들이 먼저 자리를 잡게 한다(2026-08-01).
   ⭐ 128 → 104 (2026-08-02, 매출). **이 값은 자리가 모자랄 때만 쓰인다** — 품목 칸은
   `flex: 1` 이라 넉넉하면 남는 자리를 다 먹고, 좁을 때만 여기까지 물러난다.
   물러나는 쪽이 품목 이름인 것은, **이름은 잘려도 밑줄의 코드가 남지만 금액은 잘리면
   아무것도 안 남기 때문**이다. */
.sc-item { min-width: 104px; }

/* ---- 고른 값이 무엇을 뜻하는지 그 자리에서 말하는 꼬리말 (2026-08-02) ----
   매출의 결제방식이 첫 자리다 — 온라인 플랫폼을 고르면 **미수금에 안 잡힌다.**
   ⛔ 늘 보이는 규칙 설명이 아니다(화면 규칙 §6 이 금한 것) — **고른 뒤에만** 뜨는
   「그 선택의 결과」다. 비어 있을 때는 자리도 먹지 않는다. */
.slp-note { font-size: 11px; color: var(--faint); }
.slp-note.on { color: var(--fg-temp); font-weight: 600; }

/* ---- 원가와 이익 ⭐ (2026-08-02 사장님 지시) ----
   *"평균 매입단가에 의한 이익을 계산할 수 있어야 함"* — **수주서 단계에서 이미 보인다.**
   **적자면 붉다.** 팔지 말지를 정하는 자리라 그것이 첫눈에 보여야 한다 —
   흑자를 초록으로 칠하는 것은 덤이고, 붉은 것이 이 칸의 일이다. */
/* ⭐ 78 → 96 (2026-08-06). 머리글이 「원가」(두 줄)에서 **「평균매입가 ?」 한 낱말**로
   바뀌면서 이름이 칸보다 길어져 **왼쪽 「합계금액」에 달라붙었다.** 이름이 길어지면
   칸도 같이 넓혀야 한다 — 값은 짧아도 **머리글이 폭을 정한다.** */
.sc-cost { width: 96px; text-align: right; font-size: 12px; color: var(--muted); }
.sc-profit { width: 88px; text-align: right; font-size: 12.5px; font-weight: 600; }
/* ⭐ **배송 두 칸** (2026-08-06). 줄 값은 **나눈 몫**이라 흐리게 선다 —
   진한 「이익」과 눈으로 갈려야 검산하는 사람이 안 속는다(sale_slip 의 shipLines). */
.sc-ship { width: 88px; font-size: 12px; color: var(--muted); }
.sc-sprofit { width: 96px; font-size: 12px; color: var(--muted); }
.sc-profit.on  { color: var(--fg-confirm); }
.sc-profit.bad { color: var(--danger); }
.sc-cost.none, .sc-profit.none { color: var(--faint); font-weight: 400; }

/* 합계는 두 줄이다 — 위는 「얼마에 팔았나」, 아래는 「얼마 벌었나」.
   한 줄에 여섯을 늘어놓으면 눈이 어느 것이 결론인지 못 가린다. */
.slp-tot { flex-wrap: wrap; }
.slp-tot2 {
  flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end;
  gap: 9px; padding-top: 5px;
}
.slp-tot2 .slp-tsub.fee b { color: var(--fg-cancel); }
.slp-tbig.good b { color: var(--fg-confirm); }
.slp-tbig.bad  b { color: var(--danger); }

/* 입금예정금액 — **수수료가 있는 결제방식일 때만 선다**(2026-08-02 사장님 정정).
   ⭐ **적혀 온 값이 계산을 이긴다** — 플랫폼이 준 실제 정산액은 광고비·쿠폰 부담분
   때문에 등록해 둔 요율과 어긋난다. 칸을 비우면 계산값이 자리표시로 돌아온다. */
/* ⛔ 정렬을 여기 적지 마라 — 위의 `.slp-c.n` 하나가 맡는다. */
.sc-due2 { width: 100px; display: flex; align-items: center; font-size: 12px; }
.sc-due2 .slp-in { width: 100%; }

/* ⭐ **칸이 많은 전표는 좁은 화면에서 가로로 흐른다** (2026-08-02).
   칸을 억지로 좁히면 금액이 잘리고, 잘린 금액은 **없느니만 못하다.**
   1366 까지는 안 흐르고 그보다 좁을 때만 손잡이가 생긴다. */
.slp-t { overflow-x: auto; }

/* ⭐ **값 자리에 「왜 없는지」가 설 때** (2026-08-06) — 「배송 시 이익 · 전달방식 없음」.
   숫자 자리이므로 크기는 그대로 두되 **색과 굵기로 값이 아님**을 말한다. */
.slp-tbig b.slp-off { font-size: 12px; font-weight: 600; color: var(--faint); }