/* 전역 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    background: #f5f7fa;
    color: #333;
    line-height: 1.6;
    padding: 10px;
}

/* 컨테이너 */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 네비게이션 */
.navigation {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.nav-link {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background 0.3s;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 버튼 스타일 */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-generate {
    background: #4CAF50;
    color: white;
}

.btn-generate:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.btn-print {
    background: white;
    color: #667eea;
}

.btn-print:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* 설정 섹션 */
.settings-section {
    background: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-section h2 {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.settings-section h3 {
    color: #555;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.settings-grid {
    margin-bottom: 30px;
}

.setting-group {
    margin-bottom: 20px;
}

.setting-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
}

.date-select {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-select select {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    min-width: 100px;
}

.date-select select:focus {
    outline: none;
    border-color: #667eea;
}

/* 정보 섹션 */
.info-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-item label {
    font-weight: bold;
    color: #555;
    font-size: 0.9rem;
}

.info-item input {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
}

.info-item input:focus {
    outline: none;
    border-color: #667eea;
}

/* 거래명세서 문서 */
.report-document {
    background: white;
    padding: 30px;
    margin: 0 auto;
    max-width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.report-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 10px;
    margin-bottom: 10px;
    border-bottom: 3px double #333;
    padding-bottom: 15px;
}

.report-date {
    text-align: right;
    font-size: 0.95rem;
    margin-bottom: 20px;
    color: #555;
}

/* 매출명세서 타이틀 크기 조정 */
.sales-table ~ * .report-title,
body:has(.sales-table) .report-title {
    font-size: 1.5rem;
    letter-spacing: 8px;
    margin-bottom: 5px;
    padding-bottom: 10px;
}

body:has(.sales-table) .report-date {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* 정보 테이블 */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.info-table th,
.info-table td {
    border: 1px solid #333;
    padding: 8px;
}

.section-header {
    background: #f0f0f0;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    letter-spacing: 5px;
}

.label-cell {
    background: #f8f9fa;
    text-align: center;
    font-weight: bold;
    width: 20%;
    letter-spacing: 2px;
}

.data-cell {
    padding-left: 12px;
    width: 30%;
}

/* 거래내역 테이블 */
.transaction-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: fixed;
}

.transaction-table th,
.transaction-table td {
    border: 1px solid #333;
    padding: 8px;
    text-align: center;
}

/* 매출명세서 테이블 스타일 */
.sales-table {
    table-layout: fixed;
    width: 100%;
    font-size: 9pt;
}

.sales-table th {
    background: #f0f0f0;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 9pt;
    padding: 4px 2px;
}

.sales-table td {
    padding: 4px 2px;
    font-size: 9pt;
}

.sales-table thead tr:first-child th {
    background: #e0e0e0;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 9pt;
}

.sales-table tbody tr:hover {
    background: #f9f9f9;
}

/* 일자 열 좁게 */
.sales-table th:nth-child(1),
.sales-table td:nth-child(1) {
    width: 5% !important;
    padding: 2px 1px !important;
    font-size: 9pt;
}

/* 요일 열 좁게 */
.sales-table th:nth-child(2),
.sales-table td:nth-child(2) {
    width: 3% !important;
    padding: 2px 1px !important;
    font-size: 9pt;
}

/* 각 연료 섹션 동일 비율 (92%를 5등분 = 18.4%) */
/* 휘발유 (3~5열) */
.sales-table th:nth-child(3),
.sales-table td:nth-child(3) {
    width: 5% !important;
}

.sales-table th:nth-child(4),
.sales-table td:nth-child(4) {
    width: 6.7% !important;
}

.sales-table th:nth-child(5),
.sales-table td:nth-child(5) {
    width: 6.7% !important;
}

/* 등유 (6~8열) */
.sales-table th:nth-child(6),
.sales-table td:nth-child(6) {
    width: 5% !important;
}

.sales-table th:nth-child(7),
.sales-table td:nth-child(7) {
    width: 6.7% !important;
}

.sales-table th:nth-child(8),
.sales-table td:nth-child(8) {
    width: 6.7% !important;
}

/* 경유 (9~11열) */
.sales-table th:nth-child(9),
.sales-table td:nth-child(9) {
    width: 5% !important;
}

.sales-table th:nth-child(10),
.sales-table td:nth-child(10) {
    width: 6.7% !important;
}

.sales-table th:nth-child(11),
.sales-table td:nth-child(11) {
    width: 6.7% !important;
}

/* 기타 (12~14열) */
.sales-table th:nth-child(12),
.sales-table td:nth-child(12) {
    width: 5% !important;
}

.sales-table th:nth-child(13),
.sales-table td:nth-child(13) {
    width: 6.7% !important;
}

.sales-table th:nth-child(14),
.sales-table td:nth-child(14) {
    width: 6.7% !important;
}

/* 합계 (15~17열) */
.sales-table th:nth-child(15),
.sales-table td:nth-child(15) {
    width: 5% !important;
}

.sales-table th:nth-child(16),
.sales-table td:nth-child(16) {
    width: 6.7% !important;
}

.sales-table th:nth-child(17),
.sales-table td:nth-child(17) {
    width: 6.7% !important;
}

/* 거래내역 테이블 열 너비 조정 */
.transaction-table th:nth-child(1), /* 차량번호 */
.transaction-table td:nth-child(1) {
    width: 16%;
    min-width: 16%;
    max-width: 16%;
}

.transaction-table th:nth-child(2), /* No */
.transaction-table td:nth-child(2) {
    width: 5%;
    min-width: 5%;
    max-width: 5%;
}

.transaction-table th:nth-child(3), /* 일자 */
.transaction-table td:nth-child(3) {
    width: 15%;
    min-width: 15%;
    max-width: 15%;
    white-space: nowrap;
    font-size: 0.85rem;
}

.transaction-table th:nth-child(4), /* 제품명 */
.transaction-table td:nth-child(4) {
    width: 10%;
    min-width: 10%;
    max-width: 10%;
}

.transaction-table th:nth-child(5), /* 수량 */
.transaction-table td:nth-child(5) {
    width: 10%;
    min-width: 10%;
    max-width: 10%;
}

.transaction-table th:nth-child(6), /* 단가 */
.transaction-table td:nth-child(6) {
    width: 12%;
    min-width: 12%;
    max-width: 12%;
}

.transaction-table th:nth-child(7), /* 금액 */
.transaction-table td:nth-child(7) {
    width: 15%;
    min-width: 15%;
    max-width: 15%;
}

.transaction-table th:nth-child(8), /* 비고 */
.transaction-table td:nth-child(8) {
    width: 17%;
    min-width: 17%;
    max-width: 17%;
}

.transaction-table thead th {
    background: #f0f0f0;
    font-weight: bold;
    padding: 10px 5px;
    white-space: nowrap;
    font-size: 0.9rem;
}

.transaction-table tbody tr:hover {
    background: #f8f9fa;
}

/* 차량번호 셀 */
.vehicle-number-cell {
    vertical-align: middle !important;
    text-align: center !important;
    font-weight: bold;
    border: 1px solid #ddd;
    padding: 10px !important;
}

/* 차량별 합계 행 */
.vehicle-subtotal {
    background: #fff9e6 !important;
    font-weight: bold;
}

.vehicle-subtotal td {
    font-weight: bold;
}

/* 합계 행 */
.summary-row {
    font-weight: bold;
}

.diesel-summary {
    background: #e3f2fd !important;
}

.gasoline-summary {
    background: #fff9e6 !important;
}

.grand-total-row {
    background: #c8e6c9 !important;
    font-weight: bold;
}

.summary-label {
    text-align: center !important;
    letter-spacing: 3px;
}

.summary-value {
    font-weight: bold;
}

/* 빈 행 */
.empty-message {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .report-document {
        padding: 20px;
    }

    .report-title {
        font-size: 1.5rem;
        letter-spacing: 5px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-link {
        justify-content: center;
    }
}

/* 인쇄 스타일 */
@media print {
    body {
        background: white;
        padding: 0;
    }

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

    .report-document {
        box-shadow: none;
        max-width: 100%;
        padding: 5mm 5mm;
        page-break-after: auto;
    }
    
    /* 매출명세서 전용 인쇄 스타일 */
    body:has(.sales-table) .report-document {
        padding: 3mm 5mm;
    }
    
    /* 페이지 나누기 최적화 - 최대한 많은 행 표시 */
    table {
        orphans: 1;
        widows: 1;
    }
    
    tr {
        orphans: 1;
        widows: 1;
    }
    
    /* 테이블 레이아웃 고정 */
    .transaction-table {
        table-layout: fixed !important;
        width: 100% !important;
        border-collapse: collapse !important;
        border: 1px solid #333 !important;
    }

    .info-table,
    .transaction-table {
        border: 1px solid #333 !important;
    }

    /* 공급자/공급받는자 정보 테이블 - 원래 크기 유지 */
    .info-table th,
    .info-table td {
        border: 1px solid #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 9pt !important;
        padding: 5px 8px !important;
        line-height: 1.4 !important;
        page-break-inside: avoid !important;
    }
    
    /* 거래 테이블 - 최소 크기 */
    .transaction-table th,
    .transaction-table td {
        border: 1px solid #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 7pt !important;
        padding: 1px 2px !important;
        line-height: 1.1 !important;
        page-break-inside: auto !important;
    }
    
    /* 매출명세서 테이블 인쇄 시 - 모든 글씨 8pt로 통일 */
    .sales-table th,
    .sales-table td {
        font-size: 8pt !important;
        padding: 1px !important;
        line-height: 1.2 !important;
    }
    
    .sales-table thead th {
        background: #e0e0e0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 8pt !important;
        padding: 1px !important;
        line-height: 1.2 !important;
    }
    
    /* 일자 열 인쇄 시 */
    .sales-table th:nth-child(1),
    .sales-table td:nth-child(1) {
        width: 5% !important;
        font-size: 8pt !important;
        padding: 1px !important;
        line-height: 1.2 !important;
    }
    
    /* 요일 열 인쇄 시 */
    .sales-table th:nth-child(2),
    .sales-table td:nth-child(2) {
        width: 3% !important;
        font-size: 8pt !important;
        padding: 1px !important;
        line-height: 1.2 !important;
    }
    
    /* 합계 행도 8pt로 통일 */
    .sales-table tfoot th,
    .sales-table tfoot td {
        font-size: 8pt !important;
        padding: 1px !important;
        line-height: 1.2 !important;
    }
    
    /* 차량번호 셀 테두리 강화 */
    .vehicle-number-cell {
        border: 1px solid #333 !important;
        border-right: 1px solid #333 !important;
        border-left: 1px solid #333 !important;
        border-top: 1px solid #333 !important;
        border-bottom: 1px solid #333 !important;
    }
    
    /* 인쇄 시 열 너비 고정 */
    .transaction-table th:nth-child(1),
    .transaction-table td:nth-child(1) {
        width: 16% !important;
        min-width: 16% !important;
        max-width: 16% !important;
    }
    
    .transaction-table th:nth-child(2),
    .transaction-table td:nth-child(2) {
        width: 5% !important;
        min-width: 5% !important;
        max-width: 5% !important;
    }
    
    .transaction-table th:nth-child(3),
    .transaction-table td:nth-child(3) {
        width: 15% !important;
        min-width: 15% !important;
        max-width: 15% !important;
        white-space: nowrap !important;
        font-size: 9pt !important;
    }
    
    .transaction-table th:nth-child(4),
    .transaction-table td:nth-child(4) {
        width: 10% !important;
        min-width: 10% !important;
        max-width: 10% !important;
    }
    
    .transaction-table th:nth-child(5),
    .transaction-table td:nth-child(5) {
        width: 10% !important;
        min-width: 10% !important;
        max-width: 10% !important;
    }
    
    .transaction-table th:nth-child(6),
    .transaction-table td:nth-child(6) {
        width: 12% !important;
        min-width: 12% !important;
        max-width: 12% !important;
    }
    
    .transaction-table th:nth-child(7),
    .transaction-table td:nth-child(7) {
        width: 15% !important;
        min-width: 15% !important;
        max-width: 15% !important;
    }
    
    .transaction-table th:nth-child(8),
    .transaction-table td:nth-child(8) {
        width: 17% !important;
        min-width: 17% !important;
        max-width: 17% !important;
    }

    .section-header,
    .label-cell,
    .transaction-table thead th {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 7pt !important;
        padding: 1px 2px !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
    }

    .vehicle-subtotal {
        background: #fff9e6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .diesel-summary {
        background: #e3f2fd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .diesel-summary td {
        font-size: 9pt !important;
        font-weight: bold !important;
        padding: 3px 4px !important;
    }

    .gasoline-summary {
        background: #fff9e6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .gasoline-summary td {
        font-size: 9pt !important;
        font-weight: bold !important;
        padding: 3px 4px !important;
    }

    .grand-total-row {
        background: #c8e6c9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .grand-total-row td {
        font-size: 9pt !important;
        font-weight: bold !important;
        padding: 3px 4px !important;
    }

    /* 기본 페이지 설정 (거래명세서용) */
    @page {
        size: A4 portrait !important;
        margin: 18mm 8mm;
    }
    
    /* 페이지 나누기 설정 - 헤더 그룹만 한 페이지에 유지 */
    .report-header-group {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
        margin-bottom: 3px !important;
    }
    
    .report-header {
        page-break-inside: avoid;
        page-break-after: auto;
        margin-bottom: 3px !important;
    }
    
    .report-title {
        page-break-after: auto !important;
        font-size: 14pt !important;
        margin-bottom: 3px !important;
        padding-bottom: 3px !important;
        letter-spacing: 2px !important;
    }
    
    .report-date {
        page-break-after: auto !important;
        font-size: 8pt !important;
        margin-bottom: 3px !important;
    }
    
    .info-table {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
        margin-bottom: 10px;
    }

    .transaction-table {
        page-break-inside: auto !important;
    }
    
    .transaction-table thead {
        display: table-header-group;
    }

    .transaction-table tbody {
        page-break-inside: auto !important;
    }

    .transaction-table tr {
        page-break-inside: auto !important;
        page-break-after: auto !important;
        page-break-before: auto !important;
    }
    
    /* 차량번호 셀 페이지 나누기 설정 */
    .vehicle-number-cell {
        page-break-after: auto !important;
        page-break-before: auto !important;
        page-break-inside: auto !important;
    }
    
    /* 개별 합계 행 페이지 나누기 설정 */
    .vehicle-subtotal {
        page-break-after: auto !important;
        page-break-before: auto !important;
        page-break-inside: auto !important;
    }
    
    /* 모든 테이블 행의 페이지 나누기 설정 */
    .transaction-table tbody tr {
        page-break-inside: auto !important;
        page-break-after: auto !important;
        page-break-before: auto !important;
    }
    
    /* 차량번호 셀 인쇄 스타일 */
    .vehicle-number-cell {
        display: table-cell !important;
        vertical-align: middle !important;
        text-align: center !important;
        font-weight: bold !important;
        border: 1px solid #333 !important;
        padding: 2px 2px !important;
        font-size: 7pt !important;
        width: 16% !important;
        min-width: 16% !important;
        max-width: 16% !important;
    }
    
    /* 페이지 경계에서 분리된 차량번호 스타일 - 첫 페이지 끝 */
    .vehicle-number-cell.split-top {
        display: table-cell !important;
        border: 1px solid #333 !important;
        border-top: 1px solid #333 !important;
        border-left: 1px solid #333 !important;
        border-right: 1px solid #333 !important;
        border-bottom: 1px solid #333 !important;
        vertical-align: middle !important;
        text-align: center !important;
        font-weight: bold !important;
        background: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 2px 2px !important;
        font-size: 7pt !important;
        width: 16% !important;
        min-width: 16% !important;
        max-width: 16% !important;
    }
    
    /* 페이지 경계에서 분리된 차량번호 스타일 - 다음 페이지 시작 */
    .vehicle-number-cell.split-bottom {
        display: table-cell !important;
        border: 1px solid #333 !important;
        border-top: 1px solid #333 !important;
        border-left: 1px solid #333 !important;
        border-right: 1px solid #333 !important;
        border-bottom: 1px solid #333 !important;
        vertical-align: middle !important;
        text-align: center !important;
        font-weight: bold !important;
        background: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 2px 2px !important;
        font-size: 7pt !important;
        width: 16% !important;
        min-width: 16% !important;
        max-width: 16% !important;
    }
    
    /* 분리된 행들은 페이지 나누기 방지하지 않음 */
    tr:has(.split-top),
    tr:has(.split-bottom) {
        page-break-inside: auto !important;
        page-break-after: auto !important;
        page-break-before: auto !important;
    }
    
    /* 개별 합계 행의 비고란에만 차량번호 표시 */
    .vehicle-subtotal .subtotal-remarks-cell::after {
        content: "[" attr(data-vehicle-number) "]";
        font-size: 7pt !important;
        color: #333 !important;
        font-weight: bold !important;
        display: inline-block;
        text-align: center;
    }
    
    /* 합계 행들 - 페이지 나누기 완전히 허용 */
    .transaction-table tfoot {
        display: table-row-group;
        page-break-before: auto !important;
        page-break-inside: auto !important;
    }
}

/* 흑백 인쇄 모드 */
@media print {
    .print-bw * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* 모든 배경색을 흰색으로 */
    .print-bw .info-table th {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .transaction-table thead th {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .vehicle-subtotal {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .diesel-summary {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .gasoline-summary {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .grand-total-row {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .summary-label,
    .print-bw .summary-value {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .vehicle-number-cell {
        background: white !important;
        color: black !important;
    }
    
    .print-bw .report-title {
        color: black !important;
    }
    
    .print-bw .report-date {
        color: black !important;
    }
    
    /* 총 합계 */
    .grand-total-row {
        page-break-before: auto !important;
    }
}