/* ---- 전표 창의 행 표 - 컬럼명 행 · 전표 행 · 컬럼마다의 폭과 정렬 ----
   전표 창의 나머지 서식은 `AZone/web/styles/slip.css` 에 있다. 2026-09-11 에 그 파일이
   396줄이 되어 행 표만 이 파일로 나눴다(`AGENTS.md` 「5. 파일 크기」).
   나누는 기준은 담당하는 영역이다 - 이 파일은 행 표(`.slp-t` · `.slp-th` · `.slp-r` 과
   컬럼 `.sc-*`)만 담당하고, 창 바탕 · 머리 줄 · 왼쪽 품목 찾기 · 일괄 지정 · 합계 영역 ·
   버튼 영역 · 지난 전표는 `slip.css` 가 담당한다.
   행 표를 만드는 화면 코드는 `AZone/web/js/slip_rows.js` 이고 컬럼을 정하는 곳은 전표
   종류 정의다(`buy_lines.js` · `sale_lines.js` 의 `cols` · `line`).
   창 전용 표가 남은 종류는 매출 · 수주서 · 매입 · 발주서 4종이고 나머지 4종(반품 2종 ·
   재고 2종)의 수정 상태 행 표는 공용 그리드다(2026-09-15 단위 27 · 2026-09-16 단위 29 ·
   아래 「수정 상태의 행 표가 공용 그리드인 종류」) - 그 4종의 컬럼 폭과 색은
   `AZone/web/styles/grid.css` 가 정한다. 종류마다 서식을 나누기 금지. */

/* 전표 행 목록은 오른쪽 영역의 남는 높이를 모두 사용한다 - 넘치면 그 안에서
   스크롤한다. `min-height` 의 118px 은 전표 행이 없을 때 컬럼명 행과 안내 문구가
   들어가는 높이다.
   컬럼이 많은 전표는 좁은 화면에서 가로로도 스크롤한다(2026-08-02) - 컬럼을 더 좁히면
   금액이 잘리고, 잘린 금액은 확인할 수 없다. 1366px 까지는 가로 스크롤바가 없다.
   규칙 2개로 나누어 적기 금지(2026-09-11) - 나누어 두면 뒤의 규칙이 앞의 규칙을 덮어
   어느 값이 적용되는지 확인하기 어렵다. */
.slp-t {
  min-height: 118px; flex: 1 1 auto;
  overflow-y: auto; overflow-x: 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);
}
/* 선택한 전표 행은 체크상자(`sc-chk`)로 표시한다 - 행 바탕색으로 표시하지 않는다. */
.slp-r { align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); }
.sc-chk { width: 24px; display: flex; justify-content: center; }
.sc-chk input { cursor: pointer; }
.slp-c { flex: none; min-width: 0; }
/* 품목 컬럼은 남는 폭을 모두 차지하고 좁을 때만 최소 폭까지 감소한다 - 컬럼이 8개가
   되는 전표(확정된 매입)에서 이름이 폭을 다 가져가면 오른쪽 금액이 잘린다
   (2026-08-01 · 2026-08-02). 이름이 잘려도 아래 행의 품목코드가 남지만 금액은 잘리면
   확인할 값이 남지 않으므로 이름 컬럼이 먼저 감소한다. */
.sc-item { flex: 1; min-width: 104px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.sc-item b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 품목 아래의 작은 글씨는 낱말 단위로 줄을 바꾼다(`keep-all`) - 담는 순간 채우는 대리발송
   금액의 「× 배송1」(2026-09-22 단위 48 · 그때 글자는 「× 1상자」)이 글자 사이에서 끊겨 「1상 / 자」로 읽혔다. */
.slp-code { font-style: normal; font-size: 10.5px; color: var(--faint); word-break: keep-all; }
/* 재고량 컬럼 - 매입 전표의 현재고와 매출 전표의 해당 창고 재고량이다
   (`AZone/web/js/buy_lines.js` · `sale_lines.js`). 재고가 음수여도 붉게 표시하지 않는다 -
   음수 재고는 허용된 값이다(`reference/docs/재고 관리 논리 명세.md`
   「5. 자주 발생하는 오류」의 1번). */
.sc-cur { width: 80px; text-align: right; font-size: 12px; color: var(--muted); }
/* 평균 단가 컬럼 - 매입 · 발주서의 읽기 전용 참고 값(2026-10-05 단위 79 · `AZone/web/js/buy_avg.js` · `reference/docs/매입 화면.md` 2번
   「평균 단가 컬럼 - 읽기 전용」) - 사람이 적는 값이 아니라 위 재고량 컬럼과 같은 흐린 글자임. 폭은 바로 오른쪽 단가 컬럼(104px ·
   `.sc-price`)과 같음 - 평균과 이번 단가를 같은 폭으로 나란히 비교함. */
.sc-avg { width: 104px; text-align: right; font-size: 12px; color: var(--muted); }
/* ---- 숫자 컬럼 - 값의 정렬은 이 1곳이 정한다 ----
   표시는 `n` 1개다(목록 그리드의 `.dtable .n` 과 같은 단어 ·
   `reference/docs/화면 규칙.md` 「5. 재사용 목록」의 「숫자 컬럼 정렬」). 값을 만들 때
   `'slp-c n sc-xxx'` 라고 적으면 오른쪽으로 정렬된다.

   컬럼 이름 목록을 따로 만들어 정렬 지정 금지 (2026-08-06 사용자 판정) -
   목록이 2개가 되면 반드시 분리되어 새 컬럼이 한쪽에만 들어간다.
   컬럼명 셀에는 값 셀의 컬럼 클래스가 그대로 붙음(`AZone/web/js/slip_rows.js`) -
   폭을 정하는 것이 그 클래스라 컬럼명과 값이 같은 위치에 놓임. 아래 `.slp-th`
   규칙은 그렇게 붙은 클래스에 적용된다. */
.slp-c.n { text-align: right; justify-content: flex-end; }
/* 컬럼명 행만 2행으로 표시하는 규칙이다. `keep-all` 이 없으면 한글이 낱자로 나뉜다.
   `.sc-qty` 는 전표 행에서 가로 배치라 컬럼명 행에서만 세로 배치로 다시 지정한다 -
   그러지 않으면 단어 2개가 옆으로 붙어 1행처럼 읽힌다. */
.slp-th .slp-c.n {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0; word-break: keep-all;
}
/* 컬럼명이 단어 1개 ＋ 물음표면 가로로 배치하는 규칙이다 (2026-08-06) - `?` 가
   아래 행으로 내려가면 옆 컬럼과 밑줄 위치가 어긋난다. `?` 는 단어의 일부이고
   2번째 행이 아니다. 문서가 정한 컬럼명은 「단가 ?」와 「평균매입단가 ?」다
   (`reference/docs/매출 화면.md` 2-1번 「행 표의 컬럼 제목」).
   `one` 을 붙이는 화면 코드는 현재 없다 - 전표 종류가 돌려주는 컬럼명
   (`slip_lines.js` · `buy_lines.js` · `sale_lines.js` 의 `cols`)에 물음표가 없다. */
.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; }

/* ---- 전표 행의 금액 컬럼 2개 (2026-09-11 결정 매10) ----
   사람이 입력하는 컬럼은 단가와 합계금액 2개다. 수량까지 3개 중 2개를 입력하면 나머지
   1개가 채워진다(2026-08-28 판정 ⑥ · `reference/docs/매입 화면.md` 2번 「금액 컬럼 2개」).
   행의 공급가액 · 부가세 컬럼은 삭제했다 - 그 2값은 아래 합계 행에만 있고, 행에서 읽는
   금액은 합계금액 1가지다. 표시가 없으면 합계금액이라는 규칙 1줄이 전체를 설명한다.
   합계금액만 굵게 표시한다 - 그 행에서 사람이 검산하는 값이다. */
.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; }
/* 확정된 입출고 전표의 처리 수량과 미처리 수량을 표시하는 컬럼 2개다(2026-08-01
   사용자 판정) - 매입과 매출반품은 입고 · 미입고, 매출과 매입반품은 출고 · 미출고다.
   값이 0인 컬럼은 흐리게 표시한다 - 확인해야 하는 값은 아직 처리되지 않은 수량이다. */
.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; }
/* ---- 매출 전표의 원가 컬럼 · 이익 컬럼 (`reference/docs/매출 화면.md` 2-1번 ·
   2026-09-11 결정 매10) ----
   행 끝의 2개다 - 합계금액 다음이 원가이고 이익이 맨 끝이다. 값은 서버가 답한 그 행의
   원가와 이익이고 적자면 이익이 붉다 - 판매 여부를 정하는 값이라 바로 보여야 한다.
   폭 108px 는 「12,345 (추정)」이 들어가는 폭이다(2026-09-11 지휘 판정 지5) - 88px
   에서는 그 글자가 옆 컬럼으로 넘친다. 원가에도 같은 폭을 적용한다 - 「(추정)」이 붙는
   컬럼이 이익에서 원가로 옮겨졌다(추정한 것은 원가다).
   원가는 합계금액으로 표시하고(`AZ.fromSupply`) 제목에 기준 표시가 없다 - 표시가 없으면
   합계금액이다. 이익은 언제나 공급가액 기준이라 제목 옆에 「공급가액 기준」이 붙고, 그
   글자의 서식은 공용 1곳이다(`AZone/web/styles/atoms.css` 의 `.az-bmk`).
   값이 없는 행은 `-` 이고 흐리다(합계금액 칸과 같다).
   적자의 색은 `--danger` 다 - 합계 영역의 적자와 같은 색이다(`sale.css` 의
   `.slp-tot2 .bad b` 1개가 그 규칙이고 클래스를 거는 파일은
   `AZone/web/js/sale_total_eq.js` 다). 행과 합계가 같은 적자를 다른 색으로 표시하면
   어느 쪽이 경고인지 읽히지 않는다.
   흑자를 초록으로 표시하는 규칙은 없다 - 문서가 정한 것은 적자의 붉은색 1가지다
   (`reference/docs/매출 화면.md` 2-1번).
   기다리는 동안 흐리게 두는 규칙은 합계 영역과 함께 걸리므로 `slip.css` 에 있다. */
.sc-cost { width: 108px; text-align: right; font-size: 12px; color: var(--muted); }
.sc-cost.none { color: var(--faint); }
.sc-profit { width: 108px; text-align: right; font-size: 12px; font-weight: 600; }
.sc-profit.none { color: var(--faint); font-weight: 400; }
.sc-profit.bad { color: var(--danger); }
/* 합계금액 컬럼 176px - 입력란 104px 옆에 반올림 표시가 들어가는 폭이다. 표시를
   아래 행에 두기 금지 - 반올림이 있는 행만 높아져 행 높이가 서로 달라진다. */
.sc-amt { width: 176px; display: flex; align-items: center; gap: 4px; }
.sc-amt .slp-in { width: 104px; text-align: right; }
.sc-amt .slp-val { flex: 1; text-align: right; }
.sc-amt.none .slp-val { color: var(--faint); font-weight: 400; }
/* 행 끝의 ✕ 칸 - 폭 31px 은 그 칸에 놓이는 아이콘 버튼의 폭이다
   (`AZone/web/styles/atoms.css` 의 `.btn.icon`). 컬럼명 행에는 버튼 대신 같은 폭의
   빈 칸이 1개 놓임(`AZone/web/js/slip_rows.js`) - 없으면 폭이 유동인 품목 컬럼이
   그만큼 넓어져 뒤 컬럼명이 값과 어긋남. */
.sc-x { width: 31px; display: flex; justify-content: center; }


/* ---- 상자 안에 공용 그리드가 들어가는 행 표 ----
   읽기 상태(2026-09-13 결정 매15-1 B · 단위 22)와 수정 상태의 행 표가 공용 그리드인
   종류 4개(반품 2종 · 재고 2종 · 2026-09-15 단위 27 · 2026-09-16 단위 29)가 이 규칙을
   함께 사용한다(`AZone/web/js/slip_rows.js`).
   상자의 높이 규칙은 수정 상태와 같고(위 `.slp-t`) 그 높이 안에서 표의 본체가 세로 ·
   가로로 이동한다 - 도구 행과 쪽 번호 줄은 제 높이 그대로다. 남는 높이를 본체
   (`.scroll`)까지 이어 주지 않으면 낮은 화면이나 쪽당 행 수를 늘린 상태에서 아래쪽
   행이 잘린 채 닿을 방법이 없다.
   상자 자체는 이동하지 않는다 - 상자가 이동하면 표의 도구 행과 쪽 번호 줄이 함께
   밀려 올라가 검색 입력란이 화면 밖으로 나간다.
   상자의 폭은 그 안의 표가 정하지 않는다(`contain: inline-size`) - 표의 최소 폭은 컬럼
   폭의 합이라, 그 값이 오른쪽 영역의 기준 폭이 되면 표가 창의 폭을 가져가 창이 가로로
   넘친다. 이 규칙이 있어야 표가 넘칠 때 창이 아니라 표 안에서 가로로 이동한다.
   창 전용 표에는 이 규칙이 없다 - 그 표는 품목 컬럼이 남는 폭을 차지하도록 되어 있고,
   좁은 화면에서 검색 영역이 먼저 줄어드는 규칙(`slip.css` 의 `.slp-find`)이 그대로다. */
.slp-t.slp-tg { overflow: hidden; display: flex; flex-direction: column; contain: inline-size; }
.slp-tg .grid-c { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.slp-tg .grid-c .grid-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.slp-tg .grid-c .scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }