/* ═══ tpl.css — 계약서 A4 쪽 (v54). tpl_engine.js 가 그리는 문서 모양.
   테마와 상관없이 늘 흰 종이·검은 글자 (style.css · theme-glass.css 뒤에 읽혀 표·글자 규칙을 이긴다).
   쪽 여백·글꼴·크기는 판마다 content.page 에서 오고, tplApplyPage 가 감싸는 상자(.tpl-doc)에 --pm-* 변수로 넣는다.
   ERP 의 td{…} · tr:last-child td{border-bottom:none}(0,1,2) · 700px 이하 td/table 규칙을 이기도록 표 규칙은 .tpg-body .tb-table td(0,2,1) 로 쓴다.
   기본 칸 규칙에 tr:last-child 를 붙이지 않는다 — 붙이면 (0,3,2) 가 되어 마지막 줄의 정렬·굵게·세로 맞춤(td.al-c 등, 0,3,1)을 덮는다. */
.tpl-doc{ --pm-t:20mm; --pm-r:15mm; --pm-b:20mm; --pm-l:15mm; --tpl-font:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif;
  --tpl-size:10.5pt; --tpl-lh:1.5; --tpl-gap:1.2mm; --tpl-seal:17mm; --tpl-ws:0em; position:relative; }
.tpl-flow,.tpg-body{ font-family:var(--tpl-font); font-size:var(--tpl-size); line-height:var(--tpl-lh); color:#000; text-align:left;
  word-break:keep-all; overflow-wrap:anywhere; letter-spacing:0; font-weight:400; word-spacing:var(--tpl-ws,0); }   /* ws = 쪽 설정 낱말 사이 띄우기(em) */
/* 쪽 나누기 전에 높이를 재는 보이지 않는 흐름 (쪽 본문과 같은 폭) */
.tpl-flow{ position:absolute; left:-10000px; top:0; width:calc(210mm - var(--pm-l) - var(--pm-r)); }
.tpg{ width:210mm; height:297mm; box-sizing:border-box; padding:var(--pm-t) var(--pm-r) 0 var(--pm-l); position:relative; overflow:hidden;
  background:#fff; color:#000; break-after:page; page-break-after:always; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.tpg:last-child{ break-after:auto; page-break-after:auto; }
.tpg-body{ height:calc(297mm - var(--pm-t) - var(--pm-b)); overflow:hidden; }
.tpg-foot{ position:absolute; left:0; right:0; bottom:calc(var(--pm-b) / 2 - 2mm); text-align:center; font:7.5pt/1 var(--tpl-font); color:#444; letter-spacing:.02em; }
/* 블록 */
.tpl-doc .tb{ margin:0 0 var(--tpl-gap); white-space:pre-wrap; }
.tpl-doc .tb-item,.tpl-doc .tb-para{ text-align:justify; }
.tpl-doc .tb-title{ text-align:center; font-weight:700; margin:1mm 0 4mm; line-height:1.3; }
.tpl-doc .tb-title.al-l{ text-align:left; }
.tpl-doc .tb-head{ font-weight:700; margin-top:calc(var(--tpl-gap) * 2); break-after:avoid; }
.tpl-doc .tb-lab{ display:inline-block; text-indent:0; white-space:nowrap; }
.tpl-doc .tb-gap{ height:calc(var(--tpl-lh) * 1em); margin:0; }
.tpl-doc .al-c{ text-align:center; } .tpl-doc .al-r{ text-align:right; } .tpl-doc .al-l{ text-align:left; }
.tpl-doc .tb b{ font-weight:700; } .tpl-doc .tb u{ text-decoration:underline; text-underline-offset:.15em; }
/* 표 */
.tpl-doc .tb-tablewrap{ margin:1.2mm 0 1.8mm; white-space:normal; }
.tpl-doc .tb-table{ width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; font-size:inherit; background:none; }
.tpl-flow .tb-table td,.tpg-body .tb-table td{ border:.6pt solid #000; padding:.6mm 1.6mm; vertical-align:middle;
  white-space:pre-wrap; line-height:1.35; font-size:inherit; background:none; color:#000; text-align:left; cursor:default; }
.tpl-flow .tb-table tr,.tpg-body .tb-table tr,.tpg-body .tb-table tr:hover{ background:none; cursor:default; }
.tpl-flow .tb-table.nb td,.tpg-body .tb-table.nb td,.tpl-flow .tb-table td.nb,.tpg-body .tb-table td.nb{ border:none; }
/* 칸의 한쪽 선만 빼기 (nbs:'t'·'r'·'b'·'l' 조합). 맞닿은 두 칸이 같은 선을 모두 빼야 없어진다 (border-collapse) */
.tpl-flow .tb-table td.nb-t,.tpg-body .tb-table td.nb-t{ border-top:none; } .tpl-flow .tb-table td.nb-r,.tpg-body .tb-table td.nb-r{ border-right:none; }
.tpl-flow .tb-table td.nb-b,.tpg-body .tb-table td.nb-b{ border-bottom:none; } .tpl-flow .tb-table td.nb-l,.tpg-body .tb-table td.nb-l{ border-left:none; }
.tpl-flow .tb-table td.b,.tpg-body .tb-table td.b{ font-weight:700; }
.tpl-flow .tb-table td.bg,.tpg-body .tb-table td.bg{ background:#ececec; }
.tpl-flow .tb-table td.al-c,.tpg-body .tb-table td.al-c,.tpl-flow .tb-table td.v,.tpg-body .tb-table td.v{ text-align:center; }
.tpl-flow .tb-table td.al-r,.tpg-body .tb-table td.al-r{ text-align:right; }
.tpl-flow .tb-table td.va-t,.tpg-body .tb-table td.va-t{ vertical-align:top; }
.tpl-flow .tb-table td.va-b,.tpg-body .tb-table td.va-b{ vertical-align:bottom; }
.tpl-flow .tb-table td.v,.tpg-body .tb-table td.v{ line-height:1.25; padding:.6mm .8mm; }
/* 그림 · 빈칸(손글씨 줄) · 직인 */
.tpl-doc .tb-image{ text-align:center; line-height:0; white-space:normal; }
.tpl-doc .tb-image.al-l{ text-align:left; } .tpl-doc .tb-image.al-r{ text-align:right; }
.tpl-doc .tb-image img{ max-width:100%; display:inline-block; }
.tpl-doc .tb-noimg{ display:inline-block; border:1px dashed #999; padding:6mm 2mm; color:#777; line-height:1.4; font-size:9pt; box-sizing:border-box; max-width:100%; }
.tpl-doc .tb-blank{ display:inline-block; border-bottom:.6pt solid #000; min-width:2em; height:1em; vertical-align:-.15em; }
.tpl-doc .tb-cand{ color:#c00; text-decoration:underline wavy #c00; }
.tpl-doc .tb-seal{ position:relative; display:inline-block; white-space:nowrap; }
/* v75 (사용자 2026-10-11 "(인감) 옆에 붙여줘"): 직인 그림 = '(인감)'·'(인)' 바로 오른쪽, 왼쪽 끝이 표시 끝에 살짝 걸치게(도장 찍듯 — --tpl-seal-x), 세로는 표시 가운데.
   (v74 까지는 표시 한가운데에 겹쳐 '(인감)' 이 가렸다.) absolute 라 줄·쪽 나눔은 직인이 없을 때와 같다 · 인쇄에도 그대로 */
.tpl-doc .tb-seal img{ position:absolute; left:100%; top:50%; width:var(--tpl-seal); height:auto; transform:translate(var(--tpl-seal-x,-4%),-50%); opacity:.92; pointer-events:none; }
/* 오른쪽에 자리가 없으면(쪽·칸 오른쪽 끝 — 오른쪽 맞춤 줄 · 좁은 끝 칸) 쪽을 나눈 뒤 tplSealFit 이 재서 왼쪽('(인감)' 앞, 이름 쪽)으로 옮긴다 — 이때도 '(인감)' 은 보인다.
   (v75 첫 판의 '.al-r 이면 표시 위에 찍기' 는 '(인감)' 을 다 가려 뺐다.) 표시에 걸치는 폭은 오른쪽과 같게(--tpl-seal-x 를 뒤집어) */
.tpl-doc .tb-seal.tb-seal-l img{ left:auto; right:100%; transform:translate(calc(var(--tpl-seal-x,-4%) * -1),-50%); }
/* 화면 미리보기 (.tpl-doc.hl): 채운 값 노랑 · 빈 칸 분홍 · 선택 블록 테두리. 인쇄에는 안 나온다 */
@media screen{
  .tpl-pages .tpg{ margin:0 auto 6mm; box-shadow:0 1px 6px rgba(0,0,0,.35); }
  .tpl-doc.hl .tfv:not(.tfv0):not(.tfvs){ background:#fff2a8; }
  .tpl-doc.hl .tfv0 .tb-blank{ background:#ffe0e0; }
  .tpl-doc .tb-sel{ outline:1.5px dashed #2f6fed; outline-offset:1mm; }
  .tpl-doc [data-bid]{ cursor:pointer; }
}
/* 인쇄: 문서 상자(#docPrint, body 바로 아래)만 남긴다. 발급(기록) 전에는 안내 한 쪽뿐.
   양식 탭 미리보기(발급 기록 없음)를 Ctrl+P 로 찍으면 계약서 쪽은 빠지고 안내 글만 (기록 없는 계약서가 나가지 않게) */
@media print{
  body:not(.doc-printing) .tpl-pages{ display:none !important; }
  body:not(.doc-printing) .tpl-doc::before{ content:'계약서 미리보기는 인쇄되지 않습니다 — 발급(기록) 버튼으로 인쇄하세요.'; display:block; padding:6mm 0; color:#000; font:11pt/1.4 sans-serif; }
  @page{ size:A4; margin:0; }
  body.doc-printing{ background:#fff !important; margin:0; padding:0; }
  html:has(body.doc-printing){ background:#fff !important; }
  body.doc-printing > :not(#docPrint){ display:none !important; }
  body.doc-printing #docPrint{ display:block !important; }
  #docPrint .tpl-doc ~ .tpl-doc{ break-before:page; page-break-before:always; }   /* v55: 묶음(오이천사 + 부속 약정)은 문서마다 새 쪽에서 */
  body:not(.issued) #docPrint .tpg{ display:none !important; }
  body:not(.issued) #docPrint .print-guard{ display:block !important; }
  .tpg{ margin:0 !important; box-shadow:none !important; }
  .tfv,.tfv0 .tb-blank{ background:none !important; }
  .tb-sel{ outline:none !important; }
}
#docPrint{ display:none; }
#docPrint .print-guard{ display:none; }
/* ═══ v82 오이패스 발주서 미리보기 (poform.js pofHtml) — 한 쪽 고정 좌표 (mm · POF_LAYOUT). 테마와 상관없이 흰 종이·검은 글자.
   글자 상자 위·높이·글자 크기는 pofHtml 이 줄마다 넣는다 (기준선 = 상자 위 + 1.160em — PDF 와 같은 자리). 인쇄 규칙 없음 (인쇄는 PDF 를 열어서) */
.pofpage{ position:relative; width:210mm; height:297mm; background:#fff; color:#000; overflow:hidden; box-sizing:border-box; flex:none;
  font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif; font-weight:400; letter-spacing:0; word-spacing:0; text-align:left;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.pofpage .pof-t{ position:absolute; white-space:pre; margin:0; padding:0; font-family:inherit; }
.pofpage .pof-l{ position:absolute; background:#000; }
.pofpage .pof-r{ position:absolute; }
@media screen{
  .pofzoom{ width:max-content; margin:0 auto; }
  .pofzoom .pofpage{ box-shadow:0 1px 6px rgba(0,0,0,.35); }
  .pofpage .pofv{ background:#fff2a8; }                                  /* 채운 값 (ERP · 사람) */
  .pofpage .pofv0{ background:#ffe0e0; color:#b34; border:1px dashed #d88; box-sizing:border-box; min-width:18mm; }   /* 빈 필수 칸 자리표 */
  .pofpage .pofover{ background:#ffd0d0; color:#b00; }                    /* 특이사항 3줄을 넘친 줄 */
}