/* =============================================================
   pay_proof.css - 정산 관리의 탭 2개 · 사람 표 · 사람 상세 · 증빙 현황 · 지출결의서 창(`AZone/web/js/pay.js` ·
   `pay_people.js` · `pay_head.js` · `pay_proof.js` · `pay_proof_tools.js` · `pay_voucher_form.js` · `pay_voucher_rows.js` ·
   `reference/docs/정산 관리 화면.md` 0번 · 1-1번 · 1-2번 · 2-8번 · 4-7번 · 2026-10-02 단위 75).
   `pay.css` 가 200줄을 넘어 단위 75 의 서식을 이 파일에 둠 - 규칙은 그 파일과 같음(색은 `tokens.css` 의 변수로만 · 표 · 뱃지 ·
   세그먼트 · 기간 선택 · 요약 타일 · 작은 창의 서식은 공용 파일의 것 그대로).
   ============================================================= */

/* 탭 줄 아래의 본문 상자 - 잔액 현황 · 증빙 현황 · 상세가 이 상자 안에 그려짐(탭 줄은 상세에서 숨김). */
.pay-body { min-width: 0; }

/* ---- 잔액 현황의 사람 표 (화면 1-2번) - 최근 기록과 같은 좌우 여백 ---- */
.pay-people { padding: 0 18px 4px; }
.pay-people td[data-field="p_name"] { cursor: pointer; }

/* ---- 사람 상세의 머리 (화면 2-8번) - 구분 뱃지는 이름 앞 · 줄 높이를 맞춤 ---- */
.pay-kindb { flex: none; }
/* 표 ① 제목 줄의 [결의서 작성 (N건)] - 제목 바로 오른쪽. */
.pay-vbox { display: inline-flex; margin-left: 8px; }

/* ---- 증빙 현황 (화면 1-1번) ----
   바탕 여백은 거래처 상세와 같음(`.pay-p`). 방향 세그먼트 · 기간 선택은 1줄 · 좁으면 기간 선택이 다음 줄. */
.pay-proof { padding: var(--stage-t) var(--stage-x) var(--stage-b); }
.pay-ptop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pay-pdir, .pay-pspan { flex: none; }
/* 타일을 누르면 종류 필터가 그 종류 - 누를 수 있음을 손 모양 커서로 표시. */
.pay-ptile { cursor: pointer; }
.pay-proof .an-tiles { margin-bottom: 14px; }
/* 표 도구 행 - 종류 필터 · 체크에 따라 다시 만드는 버튼 묶음(그 묶음은 줄 배치에 끼지 않음 - 버튼이 도구 행의 칸). */
.pay-pkl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex: none; }
.pay-pkind { min-width: 130px; }
.pay-pbtns { display: contents; }
.pay-recv, .pay-vch, .pay-tax { flex: none; }
/* 결의서 칸의 문서번호 - 누르면 결의서 창(수정 상태) · 전표번호 링크와 같은 모양. */
.pay-vno { color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ---- 지출결의서 창 (화면 4-7번) ----
   항목란 표를 담는 창이라 대금 등록 창보다 넓음 · 창 높이는 화면을 넘지 않고 항목란만 스크롤. */
.blk.pay-vf { width: 860px; max-width: calc(100vw - 32px); }
.pay-vf-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
.pay-vf-l { font-size: 12px; color: var(--muted); }
.pay-vf-no { font-size: 13px; min-width: 80px; }
.pay-vf-day { width: 150px; }
.pay-vf-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pay-vf-t th {
  font-size: 11px; color: var(--muted); font-weight: 600; text-align: left;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pay-vf-t td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.pay-vf-t .n { text-align: right; white-space: nowrap; }
.pay-vf-note { height: 28px; font-size: 12px; width: 100%; min-width: 120px; }
.pay-vf-out, .pay-vf-chk { flex: none; }
.pay-vf-sum { text-align: right; font-size: 13px; font-weight: 700; margin: 10px 2px 0; }
.pay-vf-foot { margin-top: 14px; gap: 8px; }
.pay-vf-del, .pay-vf-paper, .pay-vf-add, .pay-vf-ok { flex: none; }
/* [전표 추가]의 후보 목록 - 항목란 아래 · 목록만 스크롤. */
.pay-vf-pick { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); max-height: 260px; overflow: auto; }
.pay-vf-pl { font-size: 12px; color: var(--faint); padding: 4px 2px 8px; }
.pay-vf-pf { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }