/* =============== A4 페이지 기본 =============== */
@page { size: A4 portrait; margin: 0; }

:root{
    /* 🔴 테마 색 한 번에 바꾸려면 여기만 수정 */
    --bill-red: #c81e1e;
}

* { box-sizing: border-box; }
html, body { height: auto; }
body{
    font-family:"Pretendard Variable","Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,"Malgun Gothic",sans-serif;
    color:#000; margin:0; background:#fff;

    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;

    font-variant-numeric: tabular-nums;
    font-feature-settings:"tnum" 1,"lnum" 1;
    line-height:1.5;
}

/* =============== 페이지 프레임 =============== */
.page{
    width:210mm; min-height:297mm; margin:0 auto; background:#fff;
    border:1px solid var(--bill-red);       /* 🔴 바깥 프레임도 빨강 */
    padding:5mm; position:relative; page-break-after:always;
}

/* =============== 헤더 =============== */
.title{
    font-size:20pt; font-weight:800; text-align:center;
    margin:4mm 0 3mm; letter-spacing:-.2px;
}
.title-underline{
    width:60mm; height:2px; background:var(--bill-red);  /* 🔴 빨강 밑줄 */
    margin:0 auto 3mm;
}
.meta{
    display:flex; justify-content:space-between;
    font-size:9pt;                 /* ↓ 전체 폰트 톤다운 */
    margin-bottom:2mm;
}

/* =============== 정보 박스 =============== */
.info-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:2mm; margin-bottom:2mm;
}
.box{ border:1px solid var(--bill-red); }             /* 🔴 외곽 */
.box table{ width:100%; border-collapse:collapse; font-size:9pt; } /* ↓ */
.box th, .box td{
    border-bottom:1px solid var(--bill-red);            /* 🔴 셀 라인 */
    border-right:1px solid var(--bill-red);
    padding:1.5mm 1.5mm;
}
.box th:last-child, .box td:last-child{ border-right:0; }
.box tr:last-child th, .box tr:last-child td{ border-bottom:0; }
.box th{
    width:20mm; text-align:center; font-weight:700;
    color:var(--bill-red);                               /* 🔴 라벨 글자 빨강 */
    background:#fff;
}
/* 값(입력 데이터) 쪽은 더 작게 */
.box td,
.box td.value{ font-size:8.6pt; line-height:1.35; }

/* 업태/종목만 작게(유지) */
.box td.biz-type, .box td.biz-item{
    font-size:8.5pt; line-height:1.3; word-break:keep-all; white-space:normal;
}

/* =============== 품목 테이블 =============== */
.items{
    border:1px solid var(--bill-red); border-top:none; margin-top:2mm;
}
.items table{ width:100%; border-collapse:collapse; font-size:9pt; } /* ↓ */
.items th, .items td{
    border:1px solid var(--bill-red); padding:1.4mm;     /* 🔴 테두리 빨강 */
    font-size:8.8pt;                                     /* ↓ */
}
/* 월/일/품명/규격 중앙정렬 */
.items thead th:nth-child(1),
.items thead th:nth-child(2),
.items thead th:nth-child(3),
.items thead th:nth-child(4),
.items tbody td:nth-child(1),
.items tbody td:nth-child(2),
.items tbody td:nth-child(3),
.items tbody td:nth-child(4){
    text-align:center !important; vertical-align:middle;
}
.items thead th{
    text-align:center; font-weight:700; color:var(--bill-red); background:#fff; /* 🔴 헤더 글자 */
}
.items td.num{ text-align:right; }
.items tbody td{ height:6mm; } /* ↓ 행 높이 미세 조정 */

/* =============== 하단 인수자 & 합계 =============== */
.footer-grid{ display:grid; grid-template-columns:20mm 1fr; gap:2mm; margin-top:2mm; }
.vert{
    writing-mode:vertical-rl; text-orientation:mixed;
    border:1px solid var(--bill-red);                   /* 🔴 */
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:11pt; color:var(--bill-red); background:#fff;
}
.totals{ border:1px solid var(--bill-red); }
.totals table{ width:100%; border-collapse:collapse; font-size:8.8pt; } /* ↓ */
.totals th, .totals td{
    border:1px solid var(--bill-red); padding:1.4mm;    /* 🔴 */
}
.totals th{ text-align:center; font-weight:700; color:var(--bill-red); background:#fff; }
.totals td.num{ text-align:right; }
.totals td{ font-size:8.6pt; } /* ↓ 값 톤다운 */

/* ===== 비고 박스(프린트 테이블) ===== */
.remarks3-print{ margin-top:3mm; }
.remarks3-print table{ width:100%; border-collapse:collapse; font-size:8.6pt; } /* ↓ */
.remarks3-print th, .remarks3-print td{
    border:1px solid var(--bill-red); padding:1.2mm;    /* 🔴 */
}
.remarks3-print th{ text-align:center; white-space:nowrap; color:var(--bill-red); background:#fff; }
.remarks3-print td{ vertical-align:top; }
.remarks3-print tr:first-child td, .remarks3-print tr:first-child th{ height:6mm; }
.remarks3-print tr:last-child td{ height:14mm; }
/* ✅ ‘계좌번호’ 값 더 작게 */
.remarks3-print tr:first-child td:first-of-type{
    font-size:8pt;
    line-height:1.3;
}

/* ===== 모달 타이틀 톤다운 ===== */
.modal-header h2{
    font-size:15px !important; font-weight:600 !important; color:#4b5563 !important;
    letter-spacing:-.2px !important; margin:0 !important;
}

/* =============== 인쇄 전용 =============== */
@media print{
    /* 바깥 테두리 잘림 방지 */
    @page{ size:A4 portrait; margin:6mm !important; }

    html{ zoom:1 !important; }
    .page{
        transform:none !important;
        width:210mm !important; min-height:297mm !important; padding:5mm !important;
        border:0.75pt solid var(--bill-red) !important;   /* 🔴 프레임 빨강 + pt */
        box-shadow:none !important;
    }

    /* 표/박스 외곽선 & 셀 라인 모두 빨강 + pt */
    .box, .items, .totals, .remarks3-print table{
        border-color:var(--bill-red) !important;
        border-width:0.7pt !important; border-style:solid !important;
    }
    .box table, .items table, .totals table, .remarks3-print table{ border-collapse:collapse !important; }
    .box th, .box td,
    .items th, .items td,
    .totals th, .totals td,
    .remarks3-print th, .remarks3-print td{
        border-color:var(--bill-red) !important;
        border-width:0.6pt !important; border-style:solid !important;
        padding:1.2mm !important;
    }

    .title{ font-size:18pt; margin:3mm 0 2mm; }
    .box table, .items table, .totals table{ font-size:9pt !important; }
    .box td, .box td.value{ font-size:8.6pt !important; line-height:1.35 !important; }
    .box td.biz-type, .box td.biz-item{ font-size:8pt !important; }

    /* 중앙정렬 유지 */
    .items thead th:nth-child(1),
    .items thead th:nth-child(2),
    .items thead th:nth-child(3),
    .items thead th:nth-child(4),
    .items tbody td:nth-child(1),
    .items tbody td:nth-child(2),
    .items tbody td:nth-child(3),
    .items tbody td:nth-child(4){
        text-align:center !important; vertical-align:middle;
    }

    .items table{ font-size:9pt !important; }
    .items th, .items td{ font-size:8.8pt !important; }
    .items tbody td{ height:6mm !important; }

    .totals table{ font-size:8.8pt !important; }
    .totals td{ font-size:8.6pt !important; }

    .remarks3-print table{ font-size:8.6pt !important; }
    .remarks3-print th, .remarks3-print td{ padding:1mm !important; }
    .remarks3-print tr:first-child td:first-of-type{
        font-size:8pt !important; line-height:1.3 !important;
    }
    .remarks3-print tr:last-child td{ height:13mm !important; }

    .info-grid, .footer-grid{ page-break-inside:avoid; }
    .items{ page-break-inside:auto; }
    .items tr{ page-break-inside:avoid; }

    .modal, .modal *{ visibility:visible !important; }
    .modal{ position:static !important; background:none !important; }
    .modal-content{ position:static !important; width:210mm !important; padding:0 !important; }
    .modal-header, .modal-footer{ display:none !important; }
}

/* === 상단 정보 좌·우 배치 전용 === */
.party-grid{
    display:grid;
    grid-template-columns: 1fr 1fr; /* 좌:공급자 | 우:공급받는자 */
    gap: 2mm;
    margin-bottom: 2mm;
}

/* 세로 라벨 셀 (공급자 / 공급받는자) */
.box .vhead{
    width: 8mm;
    text-align: center;
    vertical-align: middle;
    background:#fff;                  /* 흰 배경 */
    color: var(--bill-red);           /* 빨간 글자 (이미 정의됨) */
    border-right: 1px solid var(--bill-red);
    border-bottom: 1px solid var(--bill-red);
    font-weight: 700;
    padding: 0;
}
.box .vhead span{
    display:block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 1;
    letter-spacing: 0;
    padding: 2mm 0;
}