/* ===================================================
   📁 파일 위치: /영일전기철물2/sections/assets/a4_doc.css
   ✅ 덮어쓰기
   A4 document base styles v2.0
   - 화면: A4 paper 효과 제거 → 관리자 시스템 본문으로 채움
   - 인쇄: 기존 A4 포맷 유지
=================================================== */

:root {
  --a4-ink: #111;
  --a4-line: #222;
  --a4-soft: #666;
  --a4-bg: #fff;
  --a4-head: #f3f4f6;

  --a4-font: 11px;
  --a4-line-height: 1.15;
  --a4-cell-pad-y: 2px;
  --a4-cell-pad-x: 4px;
  --a4-row-height: 22px;
}

/* ===================================================
   🖥️ 화면 전용 — 관리자 시스템 본문 느낌
=================================================== */
@media screen {
  /* .a4-scope: 회색 배경 없애고 투명으로 */
  .a4-scope {
    margin: 0 !important;
    background: transparent !important;
    color: var(--a4-ink) !important;
    -webkit-font-smoothing: antialiased;
  }

  /* .a4-doc: A4 paper 박스 해제 → 전체 폭 채움 */
  .a4-doc {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 24px 28px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif !important;
  }

  /* 헤더 영역: 하단 선 유지, 여백 정리 */
  .a4-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .a4-title {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    letter-spacing: -0.3px !important;
  }

  .a4-sub {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
  }

  .a4-actions {
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* 버튼: 관리자 시스템 스타일로 */
  .a4-btn {
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    color: #374151 !important;
    padding: 4px 10px !important;
    height: 28px !important;
    line-height: 18px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  .a4-btn:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
  }

  .a4-btn-primary {
    background: #1d4ed8 !important;
    color: #fff !important;
    border-color: #1d4ed8 !important;
  }

  .a4-btn-primary:hover {
    background: #1e40af !important;
    border-color: #1e40af !important;
  }

  .a4-btn-danger {
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
    background: #fff !important;
  }

  .a4-btn-danger:hover {
    background: #fef2f2 !important;
  }

  /* 패널 */
  .a4-panel {
    border: 1px solid #e5e7eb !important;
    padding: 12px !important;
    margin: 10px 0 !important;
    background: #fff !important;
    border-radius: 8px !important;
  }

  .a4-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 12px !important;
  }

  /* 인풋 */
  .a4-input {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    background: #fff !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-height: 26px !important;
  }

  .a4-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.12) !important;
  }

  .a4-select {
    height: 26px !important;
    line-height: 24px !important;
    border-radius: 4px !important;
  }

  .a4-input-date {
    height: 26px !important;
    line-height: 24px !important;
  }

  /* 필터 */
  .a4-filter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
  }

  /* 테이블 */
  .a4-table-wrap {
    border: 1px solid #e5e7eb !important;
    overflow-x: auto !important;
    background: #fff !important;
    border-radius: 6px !important;
  }
}

/* ===================================================
   공통 (화면 + 인쇄 공유)
=================================================== */
.a4-muted {
  font-size: 10px !important;
  color: var(--a4-soft) !important;
}

.a4-total {
  font-weight: 900 !important;
  font-size: 11px !important;
}

.a4-form-grid {
  display: grid !important;
  gap: 6px !important;
  align-items: stretch !important;
}

.a4-empty {
  text-align: center !important;
  color: var(--a4-soft) !important;
  padding: 24px 0 !important;
}

.a4-right {
  text-align: right !important;
}

.a4-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  font-size: var(--a4-font) !important;
  line-height: var(--a4-line-height) !important;
}

.a4-table th,
.a4-table td {
  border: 1px solid var(--a4-line) !important;
  padding: var(--a4-cell-pad-y) var(--a4-cell-pad-x) !important;
  vertical-align: top !important;
  height: var(--a4-row-height) !important;
}

.a4-table thead th {
  background: var(--a4-head) !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* ===================================================
   🖨️ 인쇄 전용 — A4 포맷 복원
=================================================== */
@page {
  size: A4;
  margin: 8mm;
}

@media print {
  .a4-scope {
    background: #fff !important;
    margin: 0 !important;
    color: var(--a4-ink) !important;
  }

  .a4-doc {
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 2mm auto !important;
    padding: 4mm 5mm 6mm !important;
    background: var(--a4-bg) !important;
    border: 1px solid var(--a4-line) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: "Nanum Myeongjo", "Noto Serif KR", "Batang", serif !important;
  }

  .a4-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-bottom: 2mm !important;
    margin-bottom: 2mm !important;
    border-bottom: 1px solid var(--a4-line) !important;
  }

  .a4-title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -0.2px !important;
  }

  .a4-btn {
    border: 1px solid var(--a4-line) !important;
    background: #fff !important;
    color: var(--a4-ink) !important;
    padding: 2px 6px !important;
    height: 22px !important;
    line-height: 20px !important;
    border-radius: 0 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  .a4-panel {
    border: 1px solid var(--a4-line) !important;
    padding: 2mm !important;
    margin: 2mm 0 !important;
    background: #fff !important;
    border-radius: 0 !important;
  }

  .a4-panel-head {
    padding-bottom: 2mm !important;
    margin-bottom: 2mm !important;
    border-bottom: 1px dashed #999 !important;
    font-size: 10.5px !important;
  }

  .a4-filter {
    margin: 2mm 0 !important;
    padding: 2mm !important;
    border: 1px solid var(--a4-line) !important;
    background: #fff !important;
    border-radius: 0 !important;
  }

  .a4-table-wrap {
    border: 1px solid var(--a4-line) !important;
    border-radius: 0 !important;
  }

  .a4-input {
    border: 1px solid var(--a4-line) !important;
    border-radius: 0 !important;
    padding: 3px 6px !important;
    font-size: 10.5px !important;
    min-height: 22px !important;
  }

  .a4-select {
    height: 22px !important;
    line-height: 20px !important;
    border-radius: 0 !important;
  }

  .a4-input-date {
    height: 22px !important;
    line-height: 20px !important;
  }

  .no-print {
    display: none !important;
  }

  .a4-table th,
  .a4-table td {
    border-color: #000 !important;
  }
}