/* 기본 초기화 및 A4 비율 설정 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Arial', sans-serif; background: #e0e0e0; padding: 40px 20px; color: #333; }

/* 편집 가능한 텍스트 상호작용 디자인 */
[contenteditable="true"] {
    transition: background-color 0.2s;
    border-bottom: 1px dashed transparent;
}
[contenteditable="true"]:hover, [contenteditable="true"]:focus {
    background-color: #fff9c4; /* 연한 노란색 */
    outline: none;
    border-bottom: 1px dashed #fbc02d;
}

/* 인보이스 컨테이너 (A4 용지 느낌) */
.invoice-box {
    background: #fff;
    max-width: 210mm; /* A4 폭 */
    min-height: 297mm; /* A4 높이 */
    margin: 0 auto;
    padding: 20mm 20mm; /* 문서 여백 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 상단 헤더 테이블 */
.header-table { width: 100%; margin-bottom: 40px; border: none; }
.header-table td { vertical-align: top; }
.title { font-size: 28px; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; }
.company-info { font-size: 13px; line-height: 1.6; color: #555; width: 60%; }
.invoice-details { text-align: right; width: 40%; font-size: 14px; }
.detail-row { margin-bottom: 8px; }
.detail-label { font-weight: bold; margin-right: 10px; color: #000; }

/* 청구 항목 테이블 */
.item-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
.item-table th { background: #f8f9fa; padding: 12px; text-align: center; border-top: 2px solid #333; border-bottom: 1px solid #ccc; font-weight: bold; }
.item-table td { padding: 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.col-desc { text-align: left; width: 45%; }
.col-qty, .col-tax { text-align: center; width: 10%; }
.col-price, .col-amount { text-align: right; width: 17.5%; }

/* 합계 영역 */
.total-section { text-align: right; margin-bottom: 50px; padding-right: 12px; }
.total-row { padding: 8px 0; font-size: 14px; }
.total-label { display: inline-block; width: 220px; color: #333; text-align: right; padding-right: 20px; }
.total-value { display: inline-block; width: 160px; text-align: right; color: #333; }

/* 최종 합계 (구분선 및 굵은 글씨) */
.grand-total { font-size: 16px; font-weight: bold; border-top: 1px solid #000; padding-top: 12px; margin-top: 8px; color: #000; }
.grand-total .total-label { color: #000; font-weight: bold; }
.grand-total .total-value { font-weight: bold; }

/* 하단 지불 정보 */
.footer { border-top: 1px solid #ddd; padding-top: 20px; font-size: 13px; line-height: 1.6; }
.payment-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.due-date { margin-bottom: 15px; font-size: 14px; }
.bank-table { border-collapse: collapse; }
.bank-table td { padding: 4px 15px 4px 0; }
.bank-label { color: #666; width: 130px; }

/* 컨트롤 패널 (화면 상단 버튼) */
.controls { max-width: 210mm; margin: 0 auto 20px auto; text-align: center; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.controls button { background: #0056b3; color: white; border: none; padding: 10px 20px; margin: 0 5px; font-size: 15px; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.controls button:hover { background: #004494; }
.controls .btn-secondary { background: #6c757d; }
.controls .btn-secondary:hover { background: #5a6268; }
.guide-text { font-size: 13px; color: #888; margin-top: 10px; }

/* 인쇄 및 PDF 저장 시 숨김 처리 */
@media print {
    body { background: #fff; padding: 0; }
    .invoice-box { box-shadow: none; border: none; padding: 0; width: 100%; max-width: 100%; }
    .no-print { display: none !important; }
}