/* ---- 종이로 나가는 서식 (print_sheet.js) ----
   화면에서는 A4 모양의 미리보기로 보이고, 인쇄하면 이것만 남는다.
   **새 창을 열지 않는다** — 팝업 차단에 걸린다.

   ⭐ **서버도 이 파일을 그대로 읽는다**(`server/src/files/sheet.js`) — 서류를 PNG·PDF
      로 구울 때 화면과 **같은 칠**이라야 한다. 여기를 고치면 종이도 함께 움직인다. */
.psh-back {
  position: fixed; inset: 0; z-index: 960; background: var(--backdrop);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 0; overflow-y: auto;
}
/* ⭐ **A4 한 장** (210×297mm). 화면에서도 그 비율로 못 박는다 — 줄이 둘뿐인
   명세서가 내용 높이만큼 줄어들면 잘린 종이처럼 보인다(2026-08-01 사장님 지시).
   폭을 mm 로 잡으면 브라우저가 96dpi 로 환산해 794×1123px 가 되고, 화면이 좁으면
   통째로 줄인다(transform 이 아니라 max-width 로 — 글자가 흐려지지 않는다). */
.psh-wrap { width: 210mm; max-width: calc(100vw - 40px); }

/* 종이. 흰 바탕과 검은 글자로 못 박는다 — 어두운 테마로 인쇄하면 잉크만 먹는다.
   패딩은 인쇄 여백(15mm)과 같은 값이라 미리보기와 종이가 어긋나지 않는다. */
.psh {
  background: #ffffff; color: #1a1a1a;
  border-radius: 11px; padding: 15mm;
  box-shadow: var(--shadow-3);
  font-size: 11px; line-height: 1.5;
  /* 297mm − 위아래 여백. 내용이 적어도 이 높이를 지킨다. */
  min-height: 267mm;
  display: flex; flex-direction: column;
}
.psh-h {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid #1a1a1a; padding-bottom: 10px; margin-bottom: 16px;
}
.psh-h > b { font-size: 19px; letter-spacing: 5px; font-weight: 700; }
.psh-h > span { font-size: 12px; color: #555; font-variant-numeric: tabular-nums; }

/* 결재란 ⭐ (2026-08-07, 지출결의서가 붙으며) — **제목 밑 오른쪽**에 붙는다.
   ⛔ 칸을 채우지 마라: 도장을 찍는 자리라 비어 있어야 한다.
   ⛔ 준 서류에만 선다(`cfg.sign`) — 거래처에 나가는 종이에는 없다. */
.psh-sign { display: flex; justify-content: flex-end; gap: 0; margin: -6px 0 16px; }
.psh-sg { width: 22mm; border: 1px solid #1a1a1a; border-left: 0; }
.psh-sg:first-child { border-left: 1px solid #1a1a1a; }
.psh-sg > span {
  display: block; text-align: center; font-size: 10px; color: #333;
  padding: 3px 0; border-bottom: 1px solid #1a1a1a; background: #f4f4f4;
}
.psh-sg > i { display: block; height: 16mm; }

.psh-parties { display: flex; gap: 14px; margin-bottom: 16px; }
.psh-party { flex: 1; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12px; }
.psh-plabel { font-size: 10.5px; color: #666; margin-bottom: 3px; }
.psh-pname { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.psh-prow { display: flex; gap: 8px; font-size: 11px; }
.psh-prow > span { width: 52px; color: #777; flex: none; }
.psh-prow > b { font-weight: 500; }

/* 표는 남는 높이를 다 쓰지 않는다 — 빈 줄(psh-fill)이 채우고, 합계가 그 아래 앉는다.
   그 대신 아래의 psh-note 앞에 spring 이 들어가 서명 줄이 종이 바닥에 붙는다. */
.psh-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* 빈 줄 — 글자는 없고 칸 선만 있다. 종이의 나머지를 표가 이어받는 모양이다. */
.psh-fill td { color: transparent; }
.psh-t th {
  text-align: left; font-size: 11px; font-weight: 700; padding: 6px 8px;
  border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; background: #f4f4f4;
}
.psh-t td { padding: 6px 8px; border-bottom: 1px solid #ddd; font-size: 11.5px; }
.psh-t .n { text-align: right; }

.psh-tot { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.psh-trow { display: flex; gap: 14px; font-size: 11.5px; }
.psh-trow > span { color: #666; }
.psh-trow > b { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.psh-trow.big { font-size: 15px; margin-top: 4px; border-top: 1px solid #1a1a1a; padding-top: 6px; }

/* 아래 한 줄은 **종이 바닥**이다 — 줄 수와 무관하게 같은 자리에 앉는다. */
.psh-note { margin-top: auto; padding-top: 22px; text-align: center; font-size: 11.5px; color: #333; }
/* 여러 줄일 때 — 뜻이 셋이면 줄도 셋이다(덜 받은 거래명세서). 줄 사이를 조금 띄운다. */
.psh-note > div + div { margin-top: 3px; }

.psh-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* ---- 인쇄 ----
   서식만 남기고 나머지는 전부 감춘다. 뒷막·그림자·둥근 모서리도 종이에서는 잉크다. */
@media print {
  /* 용지와 여백을 종이 자체가 정한다 — 브라우저 기본 여백이 겹치면 15mm 가 두 번 든다. */
  @page { size: A4; margin: 15mm; }
  body > *:not(.psh-back) { display: none !important; }
  .psh-back {
    position: static; padding: 0; background: none; display: block; overflow: visible;
  }
  .psh-wrap { width: auto; max-width: none; }
  /* 여백은 @page 가 이미 줬으므로 종이에서는 패딩을 뺀다. 높이도 놓아 준다 —
     min-height 를 든 채로 인쇄하면 한 장이 두 장으로 넘어간다. */
  .psh {
    box-shadow: none; border-radius: 0; padding: 0;
    min-height: 0; display: block;
  }
  .psh-note { margin-top: 22px; }
  .psh-foot { display: none; }
  .psh-t { page-break-inside: auto; }
  .psh-t tr { page-break-inside: avoid; }
}