/* ============================================================
   축산물 점검표 — 스타일시트 v5
   ▶ 화면 ↔ 인쇄 완전 일치 (print CSS = screen CSS)
   ▶ 대분류 좌측 세로쓰기 복원
   ▶ 서명칸 압축, 자동 글자 축소
   ============================================================ */

/* ── 기본 리셋·변수 ── */
:root {
  --border  : #222;
  --head-bg : #d9d9d9;
  --cat-bg  : #f2f2f2;
  --ok-c    : #1a5c2a;
  --ng-c    : #8b0000;
  --primary : #1a3a5c;
  --toolbar-h: 50px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  background: #e8e8e8;
  font-size: 12px;
  color: #111;
}

/* ══════════════════════════
   툴바 (2행)
══════════════════════════ */
.toolbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--primary); color: #fff;
  display: flex; flex-direction: column;
  padding: 6px 14px 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  gap: 5px;
}

/* 1행: 타이틀 + 점검표 종류 + 작성자 */
.toolbar-row1 {
  display: flex; align-items: center;
  gap: 10px;
}
.toolbar-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: .3px; white-space: nowrap;
  flex-shrink: 0;
}
.toolbar-center {
  display: flex; align-items: center;
  gap: 6px; flex: 1; justify-content: center;
}
.tpl-label {
  font-size: 11px; color: rgba(255,255,255,.8); white-space: nowrap;
}
.tpl-select {
  height: 28px; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 6px; background: rgba(255,255,255,.15);
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 0 8px; cursor: pointer; outline: none;
  min-width: 140px;
}
.tpl-select option { background: #1a3a5c; color: #fff; }

.toolbar-author-wrap {
  display: flex; align-items: center;
  gap: 6px; flex-shrink: 0;
}

/* 2행: 버튼들 */
.toolbar-row2 {
  display: flex; align-items: center;
  gap: 5px; flex-wrap: wrap;
  padding-bottom: 1px;
}

/* 높이 변수는 더 이상 단일값이 아니므로 auto 처리 */
.toolbar-btns { display: flex; gap: 6px; flex-shrink: 0; }

.btn {
  padding: 4px 10px; border: none; border-radius: 5px;
  cursor: pointer; font-size: 11.5px; font-weight: 700;
  transition: opacity .15s, transform .1s; white-space: nowrap;
}
.btn:active { transform: scale(.95); opacity: .85; }
.btn-edit   { background: #2471a3; color: #fff; }
.btn-reset  { background: #e67e22; color: #fff; }
.btn-save   { background: #27ae60; color: #fff; }
.btn-load   { background: #8e44ad; color: #fff; }
.btn-photo  { background: #16a085; color: #fff; }
.btn-print  { background: #fff; color: var(--primary); }
.btn-cancel { background: #7f8c8d; color: #fff; }
.btn-ok     { background: var(--ok-c); color: #fff; padding: 7px 20px; font-size: 13px; }
.btn-del    { background: #c0392b; color: #fff; padding: 4px 10px; font-size: 11px; }
.btn-view   { background: #2471a3; color: #fff; padding: 4px 10px; font-size: 11px; }

/* ══════════════════════════
   페이지 래퍼 (A4 모사)
══════════════════════════ */
.page-wrap {
  width: 794px;
  margin: 18px auto;
  background: #fff;
  padding: 18px 20px 14px;
  box-shadow: 0 3px 16px rgba(0,0,0,.2);
}
.doc-title {
  text-align: center;
  font-size: 17.5px; font-weight: 900; letter-spacing: 4px;
  margin-bottom: 8px; color: #000;
}

/* ══════════════════════════
   사업장 현황
══════════════════════════ */
.biz-info-box {
  border: 1.5px solid var(--border);
  margin-bottom: 5px;
  padding: 2px 10px 3px;
}
.biz-header { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; }
.biz-row-wrap { display: flex; flex-direction: column; gap: 2px; }
.biz-item { display: flex; align-items: center; gap: 8px; }
.biz-label { white-space: nowrap; font-weight: 600; min-width: 118px; font-size: 11px; }
.biz-item .ink-field { flex: none; width: 166px; }
.biz-item .ink-field.ink-wide { width: 443px; }

/* ══════════════════════════
   잉크 필드
══════════════════════════ */
.ink-field {
  position: relative;
  border-bottom: none;
  background: #ffffff;
  cursor: pointer;
  height: 26px; min-width: 80px;
  display: flex; align-items: center;
  overflow: hidden;
}
.ink-field:hover { background: #ffffff; }
.ink-field.has-ink { background: #ffffff; }
.ink-wide { flex: none; width: 443px; }
.ink-sign { height: 32px !important; min-width: 40px !important; }

.ink-field .ink-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ink-ph {
  position: absolute; left: 4px;
  color: #bbb; font-size: 10px;
  pointer-events: none; user-select: none;
}
.ink-field.has-ink .ink-ph { display: none; }

/* ══════════════════════════
   메인 점검 테이블
══════════════════════════ */
.main-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5px;
  font-size: 11px;
  table-layout: fixed;
}
.main-table th,
.main-table td {
  border: 1px solid var(--border);
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

/* 헤더 */
.thead-top th, .thead-sub th {
  background: var(--head-bg);
  font-weight: 700; font-size: 11px;
  padding: 3px 2px;
}
.th-gubun { width: 5%; }
.th-item  { text-align: left; padding-left: 6px !important; }
.th-ok    { width: 35px; }
.th-ng    { width: 35px; }
.th-note  { width: 148px; }

/* 대분류 셀 */
.td-cat {
  background: var(--cat-bg);
  font-weight: 700;
  font-size: 10px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: 0;
  padding: 4px 4px;
  white-space: pre-wrap;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
}

/* 세부항목 */
.sub-item-row .td-item {
  text-align: left;
  padding: 3px 7px 3px 9px;
  font-size: 10.5px;
  color: #222;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
}
/* 대분류 경계도 동일하게 실선 유지 */
.section-last-row .td-item { border-bottom: 1px solid var(--border); }

/* 적/부 체크 */
.td-check { padding: 0; width: 32px; }
.chk-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 24px;
  cursor: pointer; border: none; background: transparent;
  font-size: 13px; font-weight: 900;
  transition: background .12s;
  user-select: none; -webkit-user-select: none;
}
.chk-btn:hover { background: rgba(0,0,0,.06); }
.chk-btn.sel-ok { color: var(--ok-c); background: transparent; }
.chk-btn.sel-ng { color: var(--ng-c); background: transparent; }
.chk-btn.chk-hide { opacity: 0; pointer-events: none; } /* 완전히 숨김, 선택 해제는 선택된 버튼 재클릭으로 */

/* 비고 */
.td-note { padding: 2px 3px; vertical-align: top; }
.note-ink { width: 100%; min-height: 22px; height: 100%; }
.sub-item-row .td-note { border-bottom: 1px solid var(--border); }
.section-last-row .td-note { border-bottom: 1px solid var(--border); }

/* 행 하이라이트 — 배경색 없음 (체크버튼 배경 제거와 통일) */
tr.row-all-ok .td-item { background: transparent !important; }
tr.row-has-ng .td-item { background: transparent !important; }

/* ══════════════════════════
   날짜 블록 (화면 전용)
══════════════════════════ */
.sign-date-block {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 8px; margin-top: 3px; margin-bottom: 2px;
}
.sign-date-label { font-size: 12px; font-weight: 700; white-space: nowrap; color: #222; }
.date-picker-input {
  height: 24px; border: 1px solid #bbb; border-radius: 5px;
  padding: 0 7px; font-size: 12px;
  font-family: '맑은 고딕', sans-serif; color: #111;
  cursor: pointer; background: #fff; outline: none; min-width: 128px;
}
.date-picker-input:focus { border-color: var(--primary); }

/* ══════════════════════════
   서명 테이블
   ▶ 너비 100%, 서명칸 축소
══════════════════════════ */
.sign-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; margin-top: 2px; table-layout: fixed;
}
.sign-table td {
  border: 1px solid var(--border);
  padding: 2px 2px; vertical-align: middle; overflow: hidden;
}

/* 컬럼 너비 (page-wrap 794px 기준 px → %)
   레이블52px(6%) | 키34px(4%)×4 | 소속300px(34.9%) | 직책103px(12%) | 성명180px(20.9%) | 서명auto */
.sign-col-label { width: 6%;     }
.sign-col-key   { width: 4%;     }
.sign-col-org   { width: 34.9%;  }
.sign-col-pos   { width: 12%;    }
.sign-col-name  { width: 17.4%;  }
.sign-col-sign  { width: auto;   }

.sign-group-label {
  background: var(--head-bg);
  font-weight: 700; text-align: center;
  font-size: 10.5px; padding: 2px 1px;
  white-space: nowrap; letter-spacing: -0.5px;
}
.sign-key {
  background: var(--cat-bg);
  font-weight: 600; text-align: center;
  font-size: 10.5px; padding: 2px 1px;
  white-space: nowrap;
}
.sign-val { padding: 2px 2px; }

/* 서명란 잉크 필드 — 1줄 고정 */
.sign-inline-field {
  height: 24px !important;
  width: 100% !important;
  min-width: unset !important;
  overflow: hidden;
}
/* 서명 이미지 칸 */
.sign-val .ink-sign {
  height: 32px !important;
  min-width: 30px !important;
  max-width: 100% !important;
}

/* ══════════════════════════
   토스트
══════════════════════════ */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #2c3e50; color: #fff;
  padding: 10px 24px; border-radius: 28px;
  font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity .3s, transform .3s;
  z-index: 99999; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { background: #c0392b; }
.toast.info { background: #2980b9; }

/* ══════════════════════════
   잉크 모달
══════════════════════════ */
.ink-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 9000;
  align-items: center; justify-content: center;
}
.ink-overlay.on { display: flex; }
.ink-modal {
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ink-modal-hd {
  background: var(--primary); color: #fff;
  padding: 8px 14px 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.modal-hd-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.modal-hd-top span { font-size: 14px; font-weight: 700; }
.mode-tabs { display: flex; gap: 4px; }
.mode-tab {
  padding: 4px 13px; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 20px; background: rgba(255,255,255,.15);
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.mode-tab.active { background: #fff; color: var(--primary); }
.mode-tab:hover:not(.active) { background: rgba(255,255,255,.3); }
.ink-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 2px;
}
.ink-tools label { font-size: 11.5px; display: flex; align-items: center; gap: 4px; }
.ink-tools input[type=range] { width: 70px; }
.tool-btn {
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4);
  color: #fff; padding: 3px 10px; border-radius: 4px;
  cursor: pointer; font-size: 11.5px;
}
.tool-btn:hover { background: rgba(255,255,255,.35); }
.ink-modal-bd {
  background: #ffffff; border-bottom: 1px solid #ddd;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#inkCanvas {
  display: block; cursor: crosshair;
  /* touch-action: pan-x 허용 → 스크롤 가능, 드로잉은 pointer 이벤트로 처리 */
  touch-action: pan-x;
  position: relative; z-index: 1;
}

/* 입력 가능 범위 가이드 — 캔버스 오른쪽에 음영 영역 표시 */
.ink-range-guide {
  display: none;           /* JS에서 필요 시 표시 */
  position: absolute;
  top: 0; bottom: 0;
  /* left/width 는 JS에서 동적으로 설정 */
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.04) 0px,
    rgba(0,0,0,0.04) 4px,
    transparent 4px,
    transparent 10px
  );
  border-left: 2px dashed rgba(180,40,40,0.55);
  pointer-events: none;
  z-index: 2;
}
.type-area {
  flex: 1; display: flex; flex-direction: column;
  background: #fff; border-bottom: 1px solid #ddd;
  padding: 10px 12px; gap: 8px;
}
#typeInput {
  flex: 1; border: 1.5px solid #ccc; border-radius: 6px;
  padding: 8px 10px; font-family: '맑은 고딕', sans-serif;
  font-size: 16px; line-height: 1.6; resize: none; outline: none;
  min-height: 80px; transition: border-color .2s;
}
#typeInput:focus { border-color: var(--primary); }
.type-font-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.type-font-row label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #444; }
.type-font-row select { border: 1px solid #bbb; border-radius: 4px; padding: 2px 5px; font-size: 12px; }
.ink-modal-ft {
  padding: 8px 14px; display: flex; justify-content: flex-end; gap: 10px; background: #f5f5f5;
}

/* ══════════════════════════
   저장/목록 다이얼로그
══════════════════════════ */
.dialog-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 8500;
  align-items: center; justify-content: center;
  padding: 20px;
}
.dialog-overlay.on { display: flex; }
.dialog-modal {
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; overflow: hidden;
}
.dialog-modal-wide { max-width: 740px; }
.dialog-hd {
  background: var(--primary); color: #fff;
  padding: 12px 16px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.dialog-bd {
  padding: 16px; overflow-y: auto; max-height: 60vh;
  display: flex; flex-direction: column; gap: 10px;
}
.dialog-ft {
  padding: 10px 16px; display: flex; justify-content: flex-end;
  gap: 10px; background: #f5f5f5; border-top: 1px solid #ddd;
}
.dialog-info {
  background: #eaf4fb; border: 1px solid #aed6f1;
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; line-height: 1.7; color: #1a3a5c;
}
.dialog-label { font-size: 12.5px; font-weight: 600; color: #333; }
.dialog-input {
  border: 1.5px solid #ccc; border-radius: 6px;
  padding: 7px 10px; font-size: 13px;
  font-family: '맑은 고딕', sans-serif; outline: none;
  transition: border-color .2s;
}
.dialog-input:focus { border-color: var(--primary); }
.record-search {
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 6px;
  background: rgba(255,255,255,.15); color: #fff;
  padding: 4px 10px; font-size: 12px; outline: none;
  flex: 1; min-width: 160px;
}
.record-search::placeholder { color: rgba(255,255,255,.6); }

/* 저장 목록 카드 */
.record-empty {
  text-align: center; color: #888; font-size: 13px; padding: 30px 0;
}
.record-card {
  border: 1px solid #ddd; border-radius: 8px;
  padding: 10px 14px; display: flex; align-items: center;
  gap: 10px; transition: background .15s;
}
.record-card:hover { background: #f7f9fc; }
.record-info { flex: 1; }
.record-title {
  font-size: 13.5px; font-weight: 700; color: #1a3a5c; margin-bottom: 3px;
}
.record-meta { font-size: 11.5px; color: #666; }
.record-btns { display: flex; gap: 6px; flex-shrink: 0; }

/* ══════════════════════════
   항목 편집 모달
══════════════════════════ */
.edit-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 8000;
  align-items: center; justify-content: center;
  padding: 16px 12px; box-sizing: border-box;
}
.edit-overlay.on { display: flex; }
.edit-modal {
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  width: 100%; max-width: 780px;
  height: calc(100vh - 32px); max-height: 900px;
  display: flex; flex-direction: column; overflow: hidden;
}
.edit-modal-hd {
  background: #2471a3; color: #fff;
  padding: 11px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-shrink: 0;
}
.edit-modal-hd > span { font-size: 15px; font-weight: 700; }
.edit-hd-btns { display: flex; gap: 8px; }
.edit-reset-btn { background: rgba(231,76,60,.7) !important; }
.edit-reset-btn:hover { background: rgba(231,76,60,1) !important; }
.edit-modal-bd {
  overflow-y: scroll; -webkit-overflow-scrolling: touch;
  padding: 12px 14px; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.edit-modal-ft {
  padding: 10px 16px; display: flex; justify-content: flex-end; gap: 10px;
  background: #f5f5f5; border-top: 1px solid #ddd; flex-shrink: 0;
}
.ed-section { border: 2px solid #2471a3; border-radius: 8px; overflow: visible; padding-bottom: 1px; }
.ed-section-hd {
  background: #d6eaf8; padding: 7px 10px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 6px 6px 0 0;
}
.ed-sub-list, .ed-sub-list-flat {
  padding: 6px 10px 8px 12px;
  display: flex; flex-direction: column; gap: 5px;
  border-radius: 0 0 6px 6px;
}
.ed-sub-row { display: flex; align-items: flex-start; gap: 8px; }
.ed-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 10px;
  background: #2471a3; color: #fff; white-space: nowrap;
  margin-top: 4px;
}
.ed-badge-sub { background: #7d6608; }
.ed-input {
  flex: 1; border: 1px solid #bbb; border-radius: 5px;
  padding: 5px 8px; font-size: 12.5px;
  font-family: '맑은 고딕', sans-serif; outline: none;
  transition: border-color .2s;
}
textarea.ed-input {
  resize: none;
  overflow: hidden;   /* autoResize 사용 시 스크롤바 숨김 */
  line-height: 1.55;
  min-height: 30px;
  box-sizing: border-box;
  white-space: pre-wrap; /* 줄바꿈 보존 */
}
.ed-input:focus { border-color: #2471a3; box-shadow: 0 0 0 2px rgba(36,113,163,.15); }
.ed-cat-input { font-weight: 700; }
.ed-row-btns { display: flex; gap: 3px; flex-shrink: 0; padding-top: 2px; }
.ed-btn {
  width: 26px; height: 26px; border: 1px solid #bbb; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.ed-btn:hover { background: #eee; }
.ed-del { color: #c0392b; border-color: #e8a090; }
.ed-del:hover { background: #fde8e6; }
.ed-add-btn {
  margin-top: 4px; border: 1.5px dashed #aaa; border-radius: 5px;
  background: #fafafa; color: #555; font-size: 12px;
  padding: 4px 10px; cursor: pointer;
  transition: background .15s, border-color .15s; text-align: left;
}
.ed-add-btn:hover { background: #f0f7ff; border-color: #2471a3; color: #2471a3; }

/* ══════════════════════════
   작성자 선택 드롭다운 (툴바)
══════════════════════════ */
.author-select {
  height: 28px; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 5px; background: rgba(255,255,255,.15);
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 0 8px; cursor: pointer; outline: none;
  min-width: 100px;
}
.author-select option { background: #1a3a5c; color: #fff; }

/* 작성자 관리 버튼 */
.btn-author { background: #1a6e8e; color: #fff; }
.btn-pw     { background: #555; color: #fff; }
.btn-sm     { padding: 3px 8px !important; font-size: 11px !important; }

/* ══════════════════════════
   잠금 화면
══════════════════════════ */
.lock-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2137 100%);
  align-items: center; justify-content: center;
}
.lock-overlay.on { display: flex; }

.lock-box {
  background: #fff; border-radius: 16px;
  padding: 40px 36px; width: 320px; max-width: 90vw;
  text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.lock-icon  { font-size: 48px; margin-bottom: 10px; }
.lock-title { font-size: 20px; font-weight: 800; color: #1a3a5c; margin-bottom: 4px; }
.lock-sub   { font-size: 13px; color: #777; margin-bottom: 20px; }
.lock-input {
  width: 100%; padding: 10px 14px; border: 2px solid #ddd;
  border-radius: 8px; font-size: 18px; text-align: center;
  letter-spacing: 4px; outline: none; margin-bottom: 8px;
  transition: border-color .2s;
}
.lock-input:focus { border-color: #1a3a5c; }
.lock-error { color: #c0392b; font-size: 13px; min-height: 20px; margin-bottom: 8px; }
.lock-btn   { width: 100%; padding: 12px; font-size: 15px; border-radius: 8px; }

/* ══════════════════════════
   작성자 관리 모달 내부
══════════════════════════ */
.user-list  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; min-height: 40px; }
.user-empty { color: #999; font-size: 13px; text-align: center; padding: 12px 0; }
.user-item  {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid #e0e0e0;
  border-radius: 6px; background: #fafafa;
}
.user-name  { font-size: 14px; font-weight: 600; color: #222; }
.user-item-btns { display: flex; gap: 6px; }
.user-edit-area { border-top: 1px solid #eee; padding-top: 12px; margin-top: 4px; }
.user-edit-title { font-size: 13px; font-weight: 700; color: #555; margin-bottom: 8px; }

/* ══════════════════════════
   저장 목록 필터 바
══════════════════════════ */
.record-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px 4px; border-bottom: 1px solid #eee;
}
.record-search { flex: 1; min-width: 160px; }
.filter-date {
  padding: 5px 8px; border: 1.5px solid #ccc; border-radius: 5px;
  font-size: 12px; outline: none; cursor: pointer;
}
.filter-author {
  padding: 5px 8px; border: 1.5px solid #ccc; border-radius: 5px;
  font-size: 12px; outline: none; cursor: pointer; min-width: 110px;
}

/* ══════════════════════════
   dialog-error
══════════════════════════ */
.dialog-error { color: #c0392b; font-size: 12px; min-height: 18px; margin-top: 6px; }

/* ══════════════════════════
   반응형 (화면 ≤820px)
══════════════════════════ */
@media (max-width: 820px) {
  .page-wrap { width: 100%; margin: 8px; padding: 10px 8px; box-shadow: none; }
  .doc-title { font-size: 13px; letter-spacing: 2px; }
  .main-table { font-size: 10px; }
  .toolbar-title { display: none; }
  .toolbar-row2 { gap: 4px; }
  .btn { padding: 4px 7px; font-size: 11px; }
  .tpl-select { min-width: 110px; }
  .author-select { min-width: 80px; }
}

/* ══════════════════════════════════
   PRINT — 화면을 그대로 이미지처럼 출력
   ▶ page-wrap(794px)을 100vw 기준 scale로 A4에 딱 맞춤
   ▶ 여백 설정에 따라 자동으로 꽉 채워짐
   ▶ 항상 가운데 정렬
══════════════════════════════════ */
@media print {

  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* 툴바·모달·날짜피커·토스트·날짜입력·사진오버레이 숨김 */
  .no-print,
  .ink-overlay,
  .edit-overlay,
  .dialog-overlay,
  .toolbar,
  .toast,
  .photo-overlay,
  .sign-date-block { display: none !important; }

  /* page-wrap:
     - width: 794px 고정
     - 100vw = 인쇄 가능 너비 (여백 제외 후 브라우저가 계산)
     - scale(100vw / 794px)로 자동 맞춤
     - 가운데 정렬: left 50% + translateX(-50%)
  */
  .page-wrap {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: 794px !important;
    margin: 0 !important;
    padding: 18px 20px 14px !important;
    box-shadow: none !important;
    transform: translateX(-50%) scale(calc(100vw / 794px)) !important;
    transform-origin: top center !important;
  }

  /* ink-field: 인쇄 시 border 완전 제거, 배경 흰색 유지 */
  .ink-field {
    border: none !important;
    background: #fff !important;
  }

  /* canvas가 field 전체를 덮도록 */
  .ink-field .ink-canvas {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
  }

  /* chk-btn: 숨겨진 버튼은 인쇄에서 완전히 안보이게 */
  .chk-btn.chk-hide { display: none !important; opacity: 0 !important; }

  /* 선택된 체크버튼: 배경색 없이 색상만 */
  .chk-btn.sel-ok { color: #1a5c2a !important; background: transparent !important; }
  .chk-btn.sel-ng { color: #8b0000 !important; background: transparent !important; }

  /* 테이블 실선 인쇄 보장 */
  .main-table, .main-table th, .main-table td,
  .sign-table, .sign-table td,
  .biz-info-box {
    border-color: #222 !important;
  }

  /* 행 하이라이트 없음 */
  tr.row-all-ok .td-item,
  tr.row-has-ng .td-item { background: transparent !important; }
}