/* =============================================================
   pay.css - 정산 관리 화면(`AZone/web/js/pay*.js` · `reference/docs/정산 관리 화면.md` 0번 ~ 3번 ·
   2026-09-23 단위 52). 잔액 현황 · 거래처 상세 · 대금 등록 창.
   색 · 글자 크기 · 높이 · 모서리는 `reference/docs/화면 규칙.md` 「1. 색」 ~ 「4. 모서리」의 값만
   사용함 - 색은 `AZone/web/styles/tokens.css` 의 변수로만 지정함. 표 · 뱃지 · 세그먼트 · 기간 선택 ·
   요약 타일 · 작은 창의 서식은 공용 파일의 것 그대로임(`grid.css` · `atoms.css` · `an.css` ·
   `slip_aux.css`) - 여기에 다시 적기 금지.
   ============================================================= */

/* ---- 잔액 현황 (화면 1번) ----
   도구 행 - [검색] 바로 뒤에 [미결만][전체] · [전체][매출][매입] · 오른쪽 끝에 [＋ 등록 ▾] [⭳ 엑셀].
   오른쪽 끝은 공용 그리드 1곳이 정함(2026-09-24 결정 52-16 · `AZone/web/styles/grid.css` 의
   `.g-acts:has(> .spring)`) - 여기서 버튼 영역의 폭 지정 금지. 여기서 지정했던 폭이 그리드의 빈 요소와 남은
   폭을 반씩 나눠 가져 버튼이 가운데에 섰음(결정 52-16 의 원인). */
.pay-only, .pay-side, .pay-add, .pay-file, .pay-hx { flex: none; }
/* 매출 · 매입 구분(2026-09-24 결정 52-4 · 52-14) - [전체]에서 미발행액과 매입액 사이에 세로 구분선 2px 뿐.
   매입 컬럼의 옅은 배경색은 결정 52-14 로 없앰(사용자 「그래도 조잡한 느낌」). 이름은 공용 표의 컬럼
   옵션(`colCls` · `AZone/web/js/pay_balance.js` 의 `sideCols`). 구분선은 매출의 마지막 컬럼 오른쪽 선을 2px 로
   둠 - 매입액 왼쪽에 따로 그으면 원래의 1px 선과 겹쳐 3px 이 됨. */
.pay-home .grid-c th.pay-cut, .pay-home .grid-c td.pay-cut { border-right: 2px solid var(--border); }

/* 잔액 현황 아래의 최근 기록(2026-09-24 결정 52-5 · `AZone/web/js/pay_recent.js`) - 상자의 왼쪽 · 오른쪽
   끝은 잔액 현황 표와 같음(표 자체의 여백 18px · `.grid-c`). 누를 수 있는 칸은 손 모양 커서 - 거래처 칸(거래처
   상세)과 행(`pay-open` · 원장 행은 그 행의 수정 창 · 결정 52-12 · 세금계산서 행은 세금계산서 상세 창 · 단위 53)의 칸. */
.pay-rec { padding: 0 18px 18px; }
.pay-recent-seg { flex: none; }
.pay-rec td[data-field="p_name"], .pay-rec tr.pay-open td { cursor: pointer; }

/* ---- 거래처 상세 (화면 2번) ----
   바탕 여백은 화면 바탕과 같은 값 1개(`AZone/web/styles/shell.css` 의 `--stage-*`) · 표는 상자
   안에 두므로 표 자체의 여백 18px 을 그대로 사용함(`.grid-c`). */
.pay-p { padding: var(--stage-t) var(--stage-x) var(--stage-b); }
.pay-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pay-back, .pay-dir { flex: none; }
.pay-name { font-size: 16px; font-weight: 700; }
.pay-who { font-size: 12px; color: var(--muted); }
.pay-cap { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
/* 누계 카드와 그 오른쪽 버튼 - 좁으면 버튼 묶음이 카드 아래로 넘어감.
   버튼은 세로로 위에서 아래(2026-09-24 결정 52-6) - [수금 등록] · [잔액 조정] · 선수금이 있으면
   [환급 등록](매입은 지급 · 환수). 폭은 가장 넓은 버튼에 맞춤(세로 묶음의 기본 늘림). */
.pay-sum { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pay-sum .an-tiles { flex: 1; min-width: 0; }
.pay-acts { display: flex; flex-direction: column; gap: 6px; }
/* 조회 기간 - [미발행만] 동안은 흐리게 하고 누를 수 없음(화면 2-2번 · 마우스를 올리면 까닭 1줄은
   이 상자의 `title`). 흐린 모양은 공용 흐림(`.btn:disabled`)과 같은 값. */
.pay-span { margin-top: 4px; }
.pay-span.off > .pd { opacity: .5; pointer-events: none; }

/* 표 1개의 상자 - 제목 줄 · 표. 표 자체의 위 여백은 제목 줄이 대신함. */
.pay-t {
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  margin-bottom: 14px;
}
.pay-bh { display: flex; align-items: center; gap: 8px; padding: 12px 18px 0; }
.pay-tt { font-size: 14px; font-weight: 700; }
.pay-g .grid-c { padding-top: 10px; }
/* 표 도구 행의 보기 세그먼트 - [전체][미발행만] · [품목별 합산][전체 내역]. */
.pay-view, .pay-spec-view { flex: none; }
/* 빈 표의 문구 1줄 - 표의 스크롤 상자 안(`AZone/web/js/pay_parts.js` 의 `noneNote`). 색은 빈 표의
   안내와 같은 `--faint`(`AZone/web/styles/stock.css` 의 `.stk-empty`). */
.pay-none { padding: 24px 12px; text-align: center; color: var(--faint); font-size: 12.5px; }

/* 표 ① 의 기초 잔액 글자 - 클릭하면 그 행의 수정 창이라 손 모양 커서임(화면 2-3번). 전표번호 링크의 밑줄 · 커서 ·
   마우스를 올린 색은 재고 원장과 함께 사용하는 공용 서식(`AZone/web/styles/atoms.css` 의 `.pay-no.link` · 2026-09-30
   단위 70). */
.pay-no[data-base] { cursor: pointer; }
/* 수금 칸의 채움 막대 - 채운 금액 ÷ 합계금액(화면 2-3번). 글자 앞에 놓임. */
.pay-bar {
  display: inline-block; width: 44px; height: 6px; margin-right: 7px; vertical-align: middle;
  border-radius: 3px; background: var(--sunk); overflow: hidden;
}
.pay-bar > i { display: block; height: 100%; background: var(--accent); }

/* 잔액 변동 내역(화면 2-6-1번) · 보낸 원장 링크 목록(화면 5번 · 2026-09-27 단위 54)의 여닫는 제목 1줄 - 여닫이 표시는
   테두리로 그린 삼각형(글꼴에 따라 모양이 달라지지 않음 · `AZone/web/styles/atoms.css` 의 `.num-b` 규칙과 같은 방식). */
.pay-fold {
  display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 10px; padding: 4px 0;
  border: 0; background: transparent; color: var(--text); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
}
.pay-fold::before {
  content: ''; border: 5px solid transparent; border-left-color: var(--muted); border-right-width: 0;
}
.pay-fold.open::before {
  border: 5px solid transparent; border-top-color: var(--muted); border-bottom-width: 0;
}
.pay-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 대금 등록 창 (화면 3번) - 공용 작은 창(`.blk`)에 이름 1개를 더함 ---- */
.blk.pay-f { width: 480px; max-width: calc(100vw - 32px); }
.pay-fb { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.pay-ff { display: flex; align-items: center; gap: 10px; }
.pay-fl {
  flex: none; width: 92px; font-size: 12px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.pay-ff > .dd, .pay-ff > .pay-in, .pay-ff > .pay-amt, .pay-ff > .dd-sel, .pay-ff > .pay-cl { flex: 1; min-width: 0; }
.pay-ff > .dd-sel > select { width: 100%; }
.pay-in { width: 100%; }
/* 날짜 칸(`AZone/web/js/date_field.js` 의 `dateField` · 2026-10-09 단위 88) - 칸과 달력을 담은 상자(`.pd-cw`)가 입력란 줄의 남는 폭을
   차지하고 안의 글자 입력란(`.pay-in`)이 그 폭을 채움(위 입력란 줄의 입력란과 같은 폭). */
.pay-ff > .pd-cw { flex: 1; min-width: 0; }
.pay-fv { flex: 1; font-size: 12.5px; font-weight: 600; }
.pay-amt { display: flex; align-items: center; gap: 8px; }
.pay-amt .slp-in { flex: 1; min-width: 0; text-align: right; }
/* 금액 입력란 오른쪽의 단위는 「원」 1글자(화면 3-1번 · 2026-09-11 결정 단18-4) - 표시가 없으면
   합계금액이라 기준을 적는 글을 붙이지 않음. */
.pay-unit { flex: none; font-size: 11.5px; color: var(--faint); }
/* 카드 수금의 전표 목록 - 줄이 많으면 목록만 스크롤함. */
.pay-cl { display: flex; flex-direction: column; gap: 5px; max-height: 176px; overflow-y: auto; }
.pay-cs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.pay-cs-none { font-size: 12px; color: var(--faint); }
/* 반영 예정 문장 1개 - 입력란 아래의 흐린 글자. */
.pay-plan {
  padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.7;
}
/* 카드 수금의 안내 3문장(2026-09-24 결정 52-7) - 전표 목록 바로 아래 · 왼쪽 끝은 전표 목록과 같음
   (입력란 이름 폭 92px + 간격 10px · 위 `.pay-fl` · `.pay-ff`). */
.pay-cardn { padding-left: 102px; font-size: 12px; color: var(--faint); line-height: 1.6; }
/* 결제수단 줄의 자금 출처(2026-10-04 단위 78 · 화면 3-1번의 그림 · `AZone/web/js/pay_fund.js` 의 `fundParts`) - 매입 지급이면 결제수단
   선택 오른쪽에 작은 글자 「자금 출처」 · 세그먼트 [회사│사람] · 「사람」이면 결제자 선택. 폭이 모자라면 결제자 선택부터 다음 행으로
   접힘. 수정 창(읽기 전용)은 글자 2개가 글자 폭만큼. */
.pay-ff > .pay-payrow, .pay-ff > .pay-proofbox { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pay-payrow > .dd { flex: 1 1 120px; min-width: 120px; }
.pay-payrow > .pay-fv, .pay-fundv { flex: none; }
.pay-fcap { flex: none; font-size: 12px; color: var(--muted); }
.pay-fund { flex: none; }
.pay-payrow > .dd-sel { flex: 1 1 140px; min-width: 140px; }
.pay-payer { width: 100%; }
/* 증빙 줄 - 글자 1개(서버와 같은 `proofFor`) · 현금 · 계좌이체면 체크상자 「증빙 없음」 · 카드면 영수증 정보 입력란 2개(선택 입력 ·
   승인일 입력란 없음 - 2026-10-09 단위 86 · 결정 86-1). */
.pay-proof { font-size: 12.5px; font-weight: 600; }
.pay-noproof { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.pay-cardin { width: 80px; flex: 1 1 80px; min-width: 0; }
/* 끝 4자리는 숫자 4개라 좁게 - 2개가 창 폭 1줄에 섬. */
.pay-cardin[data-in="card_last4"] { flex: 0 1 72px; }
/* 수정 창의 최초 기록 · 최종 수정 1줄(2026-09-24 결정 52-13) - 바닥 버튼 바로 위의 흐린 글자. */
.pay-stamp { font-size: 11.5px; color: var(--faint); }
/* 바닥 - 왼쪽 끝 [삭제] · 오른쪽 [취소] [등록] 사이의 간격. */
.pay-foot { gap: 6px; }
.pay-del { flex: none; }
.pay-ok { flex: none; }

/* ---- 세금계산서 창 3개 · 뱃지 옆 버튼 · 발행 등록 버튼 (화면 4-1번 · 4-3번 · 4-4번 · 2026-09-25 단위 53 ·
   `AZone/web/js/pay_invoice.js`) ----
   창은 대금 등록 창과 같은 입력란 줄(`.pay-ff`)이고 폭만 창마다 다름 - 발행 등록 창은 발행 내용 표가 있어 넓음. */
.blk.pay-iv { width: 560px; max-width: calc(100vw - 32px); }
.blk.pay-ex, .blk.pay-fx { width: 480px; max-width: calc(100vw - 32px); }
/* 발행 내용 1구역 - 입력란 줄과 구분하는 위 선 · 제목 1줄 · 표. 홈택스 세금계산서 맞추기 창의 후보 구역 2개도 같은 서식
   (2026-09-25 단위 53 보완 1 · 정3 · `AZone/web/js/pay_hometax_fit.js`). */
.pay-iv-w { padding-top: 8px; border-top: 1px solid var(--line); }
.pay-iv-h { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.pay-iv-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pay-iv-t th {
  text-align: left; font-weight: 600; color: var(--muted); padding: 5px 6px; border-bottom: 1px solid var(--border);
}
.pay-iv-t td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.pay-iv-t .n { text-align: right; }
.pay-iv-t tfoot td { font-weight: 700; border-bottom: 0; }
/* 수정세금계산서 창의 문장 1개 - 입력란 아래의 흐린 글자(카드 수금 안내 `.pay-cardn` 과 같은 글자 값). 홈택스 세금계산서
   맞추기 창의 안내 문장(후보 없음 · 거래처 없음 · 수정 건)도 같은 서식. */
.pay-fxn { font-size: 12px; color: var(--faint); line-height: 1.6; }
/* 뱃지 옆 버튼 - 공용 작은 버튼(`btn small`)을 표의 행 높이 안에 두는 높이 · 뱃지와의 간격. */
.btn.small.pay-xb { height: 22px; margin-left: 4px; }
/* 표 ② 도구 행의 발행 등록 버튼 - 오른쪽 끝 그룹([⭳ 엑셀] 바로 왼쪽 · 결정 53-10)에서 줄지 않음. */
.pay-issue { flex: none; }

/* ---- 세금계산서 상세 창 (화면 4-2번 · 2026-09-25 단위 53 · `AZone/web/js/pay_invoice_sheet.js`) ----
   표 ④ 의 행은 클릭하면 그 창이라 손 모양 커서. 종이 아래의 입력 줄(`.psh-under` · 틀은 `AZone/web/styles/print.css` ·
   2026-10-02 단위 73 정9) 안의 입력란 3개 · [저장]과 바닥의 [삭제].
   입력란 3개는 작은 창의 입력란 줄(위 `.pay-ff`)을 1줄에 나란히 둔 모양 - 이름 폭은 글자만큼(작은 창의 92px 고정이면 1줄에
   3개가 들어가지 않음) · 작성일자는 날짜 칸 폭 고정(칸의 상자는 늘지 않고 안의 글자 입력란이 150px) · 승인번호(26자)가 비고보다
   넓음. 줄이 좁으면 다음 줄로 넘어감(틀의 `flex-wrap`). */
.pay-t[data-t="invs"] tr.drow td { cursor: pointer; }
.psh-under .pay-ff { flex: 1 1 160px; min-width: 0; gap: 6px; }
.psh-under .pay-ff[data-f="date"] { flex: none; }
.psh-under .pay-ff[data-f="date"] > .pd-cw { flex: none; }
.psh-under .pay-ff[data-f="date"] .pay-in { width: 150px; }
.psh-under .pay-ff[data-f="approval"] { flex-basis: 260px; }
.psh-under .pay-fl { width: auto; }
.pay-inv-save, .pay-inv-del, .pay-inv-file { flex: none; }
/* [저장]은 입력란을 변경하기 전에는 없음 - 공용 버튼의 `display` 가 `hidden` 속성을 덮으므로 여기서 숨김(`an.css` 의
   `.pd-bad[hidden]` 과 같은 방식). */
.pay-inv-save[hidden] { display: none; }

/* ---- 홈택스 목록 비교 창 (화면 4-6번 · 2026-09-25 단위 53 · `AZone/web/js/pay_hometax.js`) ----
   큰 작업 창 - 위 1줄에 방향 세그먼트와 파일 드롭존(드롭존의 서식은 매출 엑셀 업로드와 같은 `sale_excel.css` 의 1줄 모양
   `.xls-drop.slim` · 결정 53-14) · 아래 결과 표. 창의 크기 · 높이 고정 · 결과 표가 남는 높이를 차지하는 규칙은
   「반품할 전표를 선택하세요」 창과 같은 규칙 1벌(`slip_aux.css` 의 `.blk.pay-ht` · 2026-10-02 단위 73 정5 - 그 전의 폭 1,080px ·
   내용 높이는 삭제). */
.pay-ht-b { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.pay-ht-b > .xls-drop { flex: 1; min-width: 0; }
.pay-ht-dir { flex: none; }
.pay-ht-ok { flex: none; }
/* 누를 수 있는 행(서버가 보낸 `fit` - 「홈택스에만 있음」 · 작성일자 · 승인번호가 다른 「확인 필요」)은 손 모양 커서
   (2026-09-25 단위 53 보완 1 · 정3). */
.pay-ht-g tr.pay-ht-fit td { cursor: pointer; }
/* 결과 표의 구분 칸 - 뱃지 옆 「단수 차이 N원」(2026-09-26 보완 1 후속 2). */
.pay-ht-gap { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* 홈택스 세금계산서 맞추기 창(보완 1 · 정3 · `AZone/web/js/pay_hometax_fit.js`) - 위는 입력란 줄(`.pay-ff`) · 아래는 후보
   구역 2개(발행 내용 구역과 같은 서식) · (나) 표 아래의 선택 합계 1줄. */
.blk.pay-hf { width: 640px; max-width: calc(100vw - 32px); }
.pay-hf-sum { margin-top: 6px; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.pay-hf-skip { flex: none; }
/* 비교 제외(보완 1 · 정10 · `AZone/web/js/pay_hometax_skip.js`) - 결과 표 위 1줄(흐린 글자 + [제외 목록] · 0곳이면 숨김 -
   공용 버튼 서식이 `hidden` 속성을 덮지 않도록 여기서 숨김) · 목록 창의 폭(표는 발행 내용 표와 같은 서식). */
.pay-ht-skip { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.pay-ht-skip[hidden] { display: none; }
.pay-ht-skipn { flex: none; }
.btn.small.pay-ht-skips { height: 22px; }
.blk.pay-hs { width: 520px; max-width: calc(100vw - 32px); }

/* ---- 원장 보내기 (화면 5번 · 2026-09-27 단위 54 · `AZone/web/js/pay_ledger.js`) ----
   거래처 상세 머리의 [원장 보내기]는 방향 세그먼트 바로 왼쪽에서 줄지 않음. 창의 입력란 줄은 대금 등록 창과 같은 `.pay-ff` 이고
   폭만 이 창의 것 - 기간은 칸 1개(날짜 칸의 기간 · 2026-10-09 단위 88 - 폭은 위 `.pay-ff > .pd-cw`) · 유효 시간은 입력란 · 「시간」 ·
   빠른 입력 버튼 3개. 링크 줄(생성 뒤)은
   주소 입력란이 남는 폭을 차지하고 [링크 복사] · 남은 시간 · [거래처 화면 보기]가 뒤에 붙음(좁으면 다음 줄). 링크 줄의 숨김
   규칙은 이 파일에 있음 - `display: flex` 규칙이 `hidden` 속성의 숨김보다 우선 적용됨(`.pay-inv-save[hidden]` 규칙과 같은 방식). */
.pay-send { flex: none; }
.blk.pay-lg { width: 640px; max-width: calc(100vw - 32px); }
.pay-ff > .pay-lg-hrs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.pay-lg-hrs > .pay-in { flex: none; width: 90px; text-align: right; }
.btn.small.pay-lg-q { flex: none; }
/* 안내 문장 1개 - 왼쪽 끝은 입력란과 같음(입력란 이름 폭 92px + 간격 10px · 카드 수금 안내 `.pay-cardn` 규칙과 같은 값). */
.pay-lg-note { padding-left: 102px; }
.pay-lg-link {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.pay-lg-link[hidden] { display: none; }
.pay-lg-url { flex: 1; min-width: 240px; }
.pay-lg-left { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pay-lg-copy, .pay-lg-open { flex: none; }
.pay-lg-open { text-decoration: none; }