/* [1. 디자인 시스템] */
        :root {
            --primary: #2c3e50;
            --primary-bg: #f8fafc;
            --accent: #e74c3c;
            --border: #e2e8f0;
            --text-main: #1e293b;
            --text-sub: #64748b;
            --notice-bg: #fff1f2;
            --notice-text: #be123c;
            --radius: 8px;
            --consultant-bg-th: #e3f2fd; 
            --consultant-bg-td: #f1f8ff;
            --btn-tms: #2563eb;
			--btn-mail: #077c07;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Pretendard', -apple-system, sans-serif;
            background-color: #f1f5f9;
            color: var(--text-main);
            font-size: 13px;
            line-height: 1.4;
            padding: 20px 20px 100px 20px;
        }

        .container {
            max-width: 210mm;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: var(--radius);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

		/* =========================================
		   [헤더 - PC & 모바일 겹침 완벽 방지]
		   ========================================= */
		.contract-header {
			display: flex;
			justify-content: space-between;
			align-items: center; /* 양쪽 세로 중앙 정렬 */
			padding-bottom: 12px;
			border-bottom: 2px solid var(--primary);
			margin-bottom: 20px;
			flex-wrap: wrap; /* 모바일에서 자동 줄바꿈 */
			gap: 15px;
			width: 100%;
		}

		.contract-header h1 {
			font-size: 26px;
			font-weight: 800;
			color: var(--primary);
			letter-spacing: -1px;
			margin: 0;
			white-space: nowrap; /* 제목 세로 찢어짐 방지 */
		}

		/* 오른쪽 구역 (경고문구 + 문서번호 + 날짜) */
		.header-right-group {
			display: flex;
			align-items: center;
			gap: 15px;
			flex-wrap: wrap;
			justify-content: flex-end;
			flex-grow: 1;
		}

		/* 경고문구와 문서번호를 위아래로 묶는 박스 */
		.header-text-info {
			display: flex;
			flex-direction: column;
			align-items: flex-end; /* 우측 정렬 */
			gap: 6px; /* 위아래 간격 넉넉하게 */
		}

		/* 빨간색 경고 문구 (공중부양 완전 해제) */
		.required-notice {
			position: static; /* absolute 해제 */
			transform: none;  /* 위치 이동 해제 */
			font-size: 12px;
			color: var(--accent);
			font-weight: 700;
			background-color: transparent;
			padding: 0;
			margin: 0;
			white-space: nowrap;
			line-height: 1.2;
			letter-spacing: -0.5px;
		}
		.required-notice i {
			font-size: 10px;
		}

		/* 문서 번호 */
		.doc-serial-wrap {
			color: var(--text-sub);
			font-size: 12px;
			white-space: nowrap;
			line-height: 1.2;
			margin: 0;
		}
		.doc-serial-wrap span {
			font-weight: bold;
			color: #333;
		}

		/* 날짜 뱃지 */
		.contract-header .date-badge {
			display: inline-flex;
			align-items: center;
			background: var(--primary-bg);
			padding: 8px 18px;
			border-radius: 25px;
			font-weight: bold;
			color: var(--text-main);
			font-size: 15px;
			border: 1px solid var(--border);
			white-space: nowrap;
			margin: 0;
		}

        /* [섹션] */
        .section { margin-bottom: 12px; }
        
        .sec-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
            display: flex; 
            justify-content: space-between;
            align-items: center;
        }
        .sec-title-text {
            display: flex; align-items: center;
        }
        .sec-title-text::before {
            content: ''; display: inline-block;
            width: 4px; height: 14px;
            background-color: var(--accent);
            margin-right: 8px; border-radius: 2px;
        }

        /* [테이블] */
        .modern-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid var(--border);
            border-radius: 6px;
            table-layout: fixed;
			overflow: hidden;
        }
        .modern-table th, .modern-table td {
            padding: 4px 8px;
            border-bottom: 1px solid var(--border);
            vertical-align: middle;
            word-break: keep-all;
            position: relative;
			text-align:center;
        }
        .modern-table th:not(:last-child), .modern-table td:not(:last-child) {
            border-right: 1px solid var(--border);
        }
        .modern-table tr:last-child th, .modern-table tr:last-child td { border-bottom: none; }
        
        .modern-table th {
            background-color: var(--primary-bg);
            color: var(--text-sub);
            font-weight: 600;
            text-align: left;
            font-size: 12.5px;
        }
        .quote-table th { text-align: center; color: var(--primary); background-color: var(--primary-bg);font-size:11px; padding:0px;}

        /* [유의사항] */
        .notice-row th, .notice-row td { background-color: var(--notice-bg) !important; }
        .notice-content {
            font-size: 11.5px; color: var(--notice-text); font-weight: 600; line-height: 1.5;
        }

/*약관 동의 박스*/
  .terms-box {
      width: 99.7%; height: 110px; 
      border: 1px solid #e2e8f0;background-color:#f8fafc;
      padding: 5px; font-size: 10px; color: var(--sub-color);
      overflow-y: scroll; margin-bottom: 5px; border-radius: 5px;
      white-space: pre-wrap; line-height: 1.2;
	 -ms-overflow-style: none; /* 인터넷 익스플로러, 엣지용 */
  	  scrollbar-width: none; /* 파이어폭스용 */
 }

	.terms-box::-webkit-scrollbar {
		display: none;
	}

        /* [입력 필드] */
        input[type="text"], input[type="tel"], input[type="email"], select {
            width: 100%; padding: 3px 6px;
            border: 1px solid var(--border); border-radius: 4px;
            font-size: 12.5px; background-color: white;
            font-family: inherit; height: 26px;
        }
        .input-underline {
            border: none !important; border-bottom: 1px solid #94a3b8 !important;
            border-radius: 0 !important; padding: 0 !important;
            height: 18px !important; background: transparent !important;
        }
        
        /* [추가된 셀렉트 스타일] */
        .select-mini {
            width: auto !important;
            height: 20px !important;
            padding: 0 2px !important;
            font-size: 11px !important;
            border: 1px solid #cbd5e1 !important;
            color: var(--text-sub);
            margin-bottom: 2px;
        }

        .money-input {
            border: none !important; background: transparent !important;
            text-align: right; font-weight: 700; color: var(--text-main);
            font-size: 13px; padding: 0; height: auto !important;
            width: 100%;
        }
/*
        .money-input.editable {
            background-color: #fff !important;
            border: 1px solid var(--accent) !important;
            border-radius: 4px;
            padding: 2px 5px;
            color: var(--accent);
        }
*/
        .long-text { 
            font-size: 11.5px; 
            color: #475569; 
            line-height: 1.35; 
            text-align: justify; 
            outline: none;
            border-radius: 4px;
        }
        
        .long-text.editable-area {
            background-color: #fff;
            border: 1px solid var(--accent);
            padding: 5px;
            cursor: text;
        }

        .red-highlight { color: var(--accent); font-weight: bold; }
        .delivery-warning {
            color: #c2410c; font-weight: bold; font-size: 12px;
            display: flex; align-items: center; gap: 4px;
        }
        
        .total-area th, .total-area td { background-color: var(--primary-bg); }
        .total-price { color: var(--accent); font-size: 16px; font-weight: 800; }
        .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 12px; }
        .checkbox-label input { margin-right: 4px; accent-color: var(--primary); }
        .info-text {
            background-color: var(--primary-bg); padding: 8px; border-radius: 6px;
            font-size: 11.5px; color: var(--text-sub); line-height: 1.4;
            border: 1px solid var(--border);
        }

        .consultant-th { background-color: var(--consultant-bg-th) !important; color: #1e40af !important; }
        .consultant-bank { font-size:16px;background-color: var(--consultant-bg-th) !important; color: #1e40af !important; }
        .consultant-td { background-color: var(--consultant-bg-td) !important; }
        .req { color: var(--accent); font-weight: bold; margin-left: 2px; }

        .print-guide {
            margin-top: 30px;
            padding: 15px 20px;
            background-color: #f1f3f5;
            border-radius: 8px;
            color: #495057;
            font-size: 12px;
            line-height: 1.6;
            border: 1px solid #dee2e6;
        }
        .print-guide h4 { margin: 0 0 8px 0; font-size: 13px; color: #212529; }
        .print-guide ul { margin: 0; padding-left: 20px; }
        .print-guide li { margin-bottom: 4px; }

        /* [수리 규정 스타일] */
        .regulation-box {
            background-color: #fff;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px 15px;
            margin-top: 20px;
            margin-bottom: 10px; 
        }
        .regulation-title {
            font-size: 14px;
            font-weight: 800; 
            color: var(--primary); 
            margin-bottom: 8px; 
            border-bottom: 2px solid var(--border); 
            padding-bottom: 5px;
        }
        .regulation-contact { font-size: 11.5px; color: var(--text-sub); font-weight: normal; margin-left: 8px; }
        .reg-list { list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--text-main); line-height: 1.5; }
        .reg-list > li { margin-bottom: 6px; display: flex; align-items: flex-start; }
        .reg-num { font-weight: 700; width: 22px; flex-shrink: 0; color: var(--primary); }
        .reg-desc { flex: 1; text-align: justify; }
        .sub-desc { 
            display: block; margin-top: 2px; font-size: 11.5px; color: #555; 
            background-color: #f8fafc; padding: 2px 6px; border-radius: 4px;
        }
        .final-note {
            margin-top: 8px; font-size: 11.5px; color: var(--accent); font-weight: 700;
            background-color: var(--notice-bg); padding: 8px; border-radius: 6px;
        }

        /* [공통 팝업 스타일] */
        .pop-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: pointer; 
            z-index: 10;
        }
        .info-icon {
            font-size: 11px;
            color: var(--btn-tms);
            margin-left: 3px;
        }
        .custom-popup {
            display: none;
            position: absolute;
            top: 25px; 
            left: 0;
            z-index: 9999;
            width: 320px;
            background: white;
            border: 2px solid var(--primary);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            padding: 12px;
            pointer-events: auto; 
        }

        .popup-close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background-color: #f1f5f9;
            border: 1px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-sub);
            z-index: 10001;
        }
        .popup-close-btn:hover {
            background-color: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .custom-popup img {
            width: 100%;
            border-radius: 6px;
            display: block;
        }
        .custom-popup .caption {
            margin-top: 10px;
            font-size: 12px;
            color: #1e293b;
            line-height: 1.5;
            word-break: keep-all;
            font-weight: 600;
        }
        
        .pop-wrapper.active .custom-popup {
            display: block !important;
        }

        /* [주소 가로 배열 스타일] */
        .addr-container {
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
        }
        .addr-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0 8px;
            height: 22px;
            font-size: 11px;
            border-radius: 3px;
            cursor: pointer;
            white-space: nowrap;
        }


        /* [★★ 중요: 인쇄 설정 최적화 ★★] */
        @media print {
            @page { 
                size: A4; 
                margin: 12mm 15mm; 
            }
            
            body {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                background-color: white !important;
                padding: 0; margin: 0;
                font-size: 12.5px !important; 
                line-height: 1.25 !important; 
            }

            .container {
                width: 100%; max-width: none;
                padding: 0; margin: 0;
                box-shadow: none; border: none;
            }

            .action-bar, .print-guide, .print-hidden, .custom-popup, .info-icon, .select-mini { display: none !important; }
            
            /* 주소 검색 버튼 숨김 */
            .addr-btn { display: none !important; }

            header { 
                margin-bottom: 5px !important; 
                padding-bottom: 5px !important; 
            }
            header h1 { 
                font-size: 20px !important; 
                margin: 0 !important;
            }

            .section { 
                page-break-inside: auto !important;
                margin-bottom: 6px !important; 
            }
            .sec-title { 
                margin-bottom: 2px !important; 
                font-size: 12.5px !important; 
                page-break-after: avoid;
            }

            tr { page-break-inside: avoid; }

            .modern-table {
                border: 1px solid var(--border) !important;
                border-radius: 6px !important;
                border-collapse: separate !important;
                table-layout: fixed !important; 
                width: 99.5% !important;
                margin: 0 auto; !important;
            }
            .modern-table th, .modern-table td {
                border-color: var(--border) !important;
                color: var(--text-main) !important;
                padding: 3px 5px !important; 
                font-size: 12px !important;
                height: auto !important;
            }
            .modern-table th {
                background-color: var(--primary-bg) !important;
                color: var(--text-sub) !important;
            }
            
            .long-text {
                font-size: 11px !important; 
                line-height: 1.25 !important;
            }

            input, select {
                border: 1px solid var(--border) !important;
                background-color: white !important;
                color: #000 !important;
                height: 22px !important; 
                font-size: 12px !important;
            }

            .consultant-th { background-color: var(--consultant-bg-th) !important; color: #1e40af !important; }
            .consultant-td { background-color: var(--consultant-bg-td) !important; }
            .notice-row th, .notice-row td { background-color: var(--notice-bg) !important; }
            .notice-content { color: var(--notice-text) !important; font-size: 11px !important; line-height: 1.3 !important; }

            select {
                appearance: none !important;
                -webkit-appearance: none !important;
                border: none !important;
                background: transparent !important;
                padding: 0 !important;
                font-weight: bold;
                color: var(--text-main) !important;
            }
            select::-ms-expand { display: none; }

            input[type="checkbox"] { appearance: auto; border: 1px solid var(--border); width: 11px; height: 11px; }
            .date-badge { border: 1px solid var(--border) !important; background-color: var(--primary-bg) !important; padding: 2px 8px !important; }
            
            .info-text { 
                background-color: var(--primary-bg) !important; 
                border: 1px solid var(--border) !important; 
                padding: 6px !important; 
                margin-top: 6px !important;
                font-size: 11px !important;
                line-height: 1.3 !important;
				margin:0 auto;
				width:99.5%;
            }

            .delivery-cell-content {
                display: flex !important;
                flex-direction: row !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 0 !important;
            }
            .delivery-warning {
                white-space: nowrap !important;
                margin-left: auto !important;
                font-size: 11px !important;
            }

            .money-input.editable {
                border: none !important;
                background-color: transparent !important;
                color: var(--text-main) !important;
            }

            .long-text.editable-area {
                border: none !important;
                background-color: transparent !important;
                padding: 0 !important;
            }
            
            br { display: none; }
            .long-text br { display: block; }
            .notice-content br { display: block; }
            .info-text br { display: block; }

            .page-break { 
                display: block; 
                page-break-before: always; 
                break-before: page; 
                height: 0; margin: 0;
            }
            
            .regulation-box {
                margin-top: 10px !important; 
                margin-bottom: 5px !important;
                border: 1px solid var(--border) !important;
                padding: 10px !important;
            }
            .regulation-title {
                font-size: 14px !important;
                margin-bottom: 5px !important;
                margin-top: 0 !important;
                border-bottom: 1px solid var(--border) !important;
            }

            #additional-print-content .modern-table th,
            #additional-print-content .modern-table td {
                font-size: 10px !important; 
                padding: 2px 3px !important; 
            }
            #additional-print-content .long-text {
                font-size: 9px !important; 
                line-height: 1.2 !important;
            }
            #additional-print-content .sec-title {
                font-size: 11px !important;
            }


			
        }
        
        #additional-print-content .modern-table th,
        #additional-print-content .modern-table td {
            font-size: 10.5px;
        }
        #additional-print-content .long-text {
            font-size: 9.5px;
            line-height: 1.3;
        }

        #additional-print-content .modern-table th {
            width: 30px !important; 
            word-break: break-all !important; 
            text-align: center !important;
            vertical-align: middle !important;
            line-height: 1.2 !important;
            padding: 5px 2px !important;
            font-size: 11px !important; 
        }

        #additional-print-content .modern-table th br {
            display: block !important; 
        }
        
        .action-bar {
            position: fixed; bottom: 30px; left: 0; right: 0;
            text-align: center; pointer-events: none; z-index: 100;
            display: flex; justify-content: center; gap: 15px; 
        }
		/* 1. 공통 버튼 디자인 (캡슐형, 그림자, 클릭 허용) */
        .btn-print, .btn-tms, .btn-mail {
            color: white; 
            border: none; 
            padding: 12px 30px;
            font-size: 15px; 
            font-weight: 700; 
            border-radius: 30px; /* 둥근 캡슐 모양 */
            box-shadow: 0 6px 16px rgba(0,0,0,0.15); /* 입체감 그림자 */
            cursor: pointer; 
            
            /* ★ 클릭 먹통 해결의 핵심 키! 부모의 클릭 무시를 뚫고 클릭되게 만듦 */
            pointer-events: auto; 
            
            /* 부드러운 애니메이션 전환 */
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px; /* 아이콘과 텍스트 사이 간격 */
        }

		/* 2. 각 버튼별 그라데이션 색상 설정 */
        
        /* 인쇄 버튼 (회색 계열) */
        .btn-print {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
        }
        
        /* 견적서 연결 버튼 (블루 계열) */
        .btn-tms {
            background: linear-gradient(135deg, #3b82f6 0%, #184fc9 100%);
        }
        
        /* 메일 발송 버튼 (그린 계열) */
        .btn-mail {
            background: linear-gradient(135deg, #35911c 0%, #11461a 100%);
        }

        /* 3. 마우스 호버(올렸을 때) & 클릭 효과 */
        .btn-print:hover, .btn-tms:hover, .btn-mail:hover {
            transform: translateY(-4px); /* 위로 살짝 떠오름 */
            box-shadow: 0 12px 24px rgba(0,0,0,0.3); /* 그림자 짙어짐 */
            filter: brightness(1.1); /* 색상 살짝 밝아짐 */
        }
        
        .btn-print:active, .btn-tms:active, .btn-mail:active {
            transform: translateY(0) scale(0.96); /* 클릭 시 살짝 눌리는 느낌 */
        }


/* [수정] 견적 수정 모드 시 강조 스타일 */

/* 1. 금액 입력창 강조 */
.money-input.editable {
    border: 2px dashed var(--accent) !important; /* 빨간 점선 테두리 */
    background-color: #fffaf0 !important;        /* 연한 아이보리 배경 */
    color: var(--accent) !important;             /* 글자색 빨간색 강조 */
    padding: 2px 5px !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* 2. 설명 텍스트 영역 강조 */
.long-text.editable-area {
    border: 2px dashed #3498db !important;       /* 파란 점선 테두리 */
    background-color: #f0f9ff !important;        /* 연한 하늘색 배경 */
    padding: 10px !important;
    border-radius: 6px;
    cursor: text;                                /* 커서 모양 변경 */
    transition: all 0.2s ease;
}

/* 마우스 올렸을 때 반응 */
.money-input.editable:hover, .long-text.editable-area:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/*2026.02.06 추가*/

/* 팝오버 기본 스타일 */
.image-popover {
display: none;
    position: absolute;
    z-index: 1000;
    width: 90vw; /* 모바일에서 기본적으로 화면 너비의 90% */
    max-width: 400px; /* 최대 400px */
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-radius: 12px;
    overflow: hidden;
}

/* 팝오버 내부 콘텐츠 */
.popover-content {
	width: 100%;
    height: auto;
    display: block;
}

/* 이미지 스타일 */
.popover-content img {
    width: 100%;
    height: auto; /* 비율에 맞춰 세로 자동 조절 */
    display: block;
}

/* 닫기 버튼 */
.popover-close {
	position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 11;
}

/* 캡션 스타일 */
.popover-caption {
    padding: 10px;
    font-size: 14px;
    background: #f9f9f9;
    text-align: center;
    border-top: 1px solid #eee;
}

/* 모바일 대응: 화면이 너무 작으면 너비 조정 */
@media (max-width: 480px) {
    .image-popover {
        max-width: 90%; /* 모바일에서는 화면 너비에 맞춤 */
    }
}
/* 1. 물음표 아이콘 스타일 */
.icon-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background-color: #888;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* 2. 이미지 아이콘 스타일 (이미지 아이콘을 원할 경우) */
.icon-img::before {
    content: '📷'; /* 이모지를 사용하거나 아이콘 폰트 사용 가능 */
    font-size: 14px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.6;
}

/* 마우스를 올렸을 때 강조 효과 */
.modal-trigger:hover .icon-q {
    background-color: var(--primary, #00FFFF); /* 강조 색상으로 변경 */
}

.modal-trigger:hover .icon-img::before {
    opacity: 1;
}

/* 텍스트에도 마우스 커서 표시 */
.modal-trigger {
    cursor: pointer;
}






/*2026.02.06 모바일 환경 개선 코드*/

/* 모바일 최적화 스타일 (화면 너비 768px 이하) */
@media screen and (max-width: 768px) {
    /* 1. 전체 배경 및 메인 컨테이너 스타일 */
    body {
        background-color: #f4f7fa; /* 전체 배경색 (연한 회색) */
        padding: 20px 10px; /* 상하 좌우 여백 */
    }
    .container {
        background-color: #fff; /* 메인 컨테이너 흰색 배경 */
        border-radius: 15px; /* 컨테이너 둥근 모서리 */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 컨테이너 그림자 */
        padding: 25px 20px 100px 20px; /* 내부 여백, 하단은 버튼 공간 확보 */
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }
    header { margin-bottom: 30px; }
    header h1 { font-size: 22px; color: #333; }

    /* 2. 섹션 타이틀 디자인 (붉은색 수직 바) */
    .sec-title {
        border-bottom: none;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    .sec-title::before {
        content: '';
        display: none;
        margin-right: 10px;
        border-radius: 3px;
    }
    .sec-title-text {
        font-size: 18px;
        font-weight: 800;
        color: #333;
		display: inline-block;
    }

    /* =========================================
       3. 일반 테이블 스타일 (1,2,4,5번 항목)
       -> 세로 카드 형태로 변환
    ========================================= */
    /* 테이블 구성 요소를 블록으로 변경하여 세로 적재 */
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table th, .responsive-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    /* 각 행(tr)을 하나의 카드처럼 디자인 */
    .responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden; /* 내부 요소가 둥근 모서리를 넘지 않도록 */
    }
    /* 항목 레이블 (회색 배경 헤더) */
    .responsive-table th {
        background-color: #e9ecef; /* 스크린샷과 동일한 회색 */
        color: #495057;
        font-weight: 700;
        padding: 10px 15px;
        font-size: 13px;
        border-bottom: 1px solid #dee2e6;
    }
    /* 항목 내용 (흰색 배경 콘텐츠) */
    .responsive-table td {
        background-color: #fff;
        padding: 15px;
        font-size: 14px;
        color: #212529;
    }
    /* 상담자, 필수 표시 등 특정 요소 미세 조정 */
    .consultant-th .req { color: #dc3545; margin-left: 4px; }
    .input-underline, select {
        width: 100%;
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 10px;
        font-size: 14px;
        background-color: #fff;
        height: auto;
    }

    /* =========================================
       4. 견적 내용 테이블 스타일 (3번 항목)
       -> 가로 스크롤 형태로 유지
    ========================================= */
    /* 테이블을 감싸는 부모 요소에 스크롤 부여 */
    .section:has(.quote-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* 부드러운 스크롤 */
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 0; /* 내부 패딩 제거 */
    }
    .quote-table {
        width: 100%;
        min-width: 600px; /* 테이블이 너무 좁아지지 않도록 최소 너비 설정 */
        border-collapse: collapse;
        white-space: nowrap; /* 줄바꿈 방지하여 가로로 나열 */
    }
    .quote-table th, .quote-table td {
        padding: 12px 15px;
        border: 1px solid #dee2e6;
        text-align: center;
        vertical-align: middle;
		white-space: normal !important;
    }
    .quote-table thead th {
        background-color: #f8f9fa;
        font-weight: bold;
        color: #495057;
    }
    /* 상세 내용 컬럼(두 번째)은 내용이 길므로 줄바꿈 허용 및 너비 확보 */
    .quote-table td:nth-child(2) {
        white-space: normal;
        min-width: 300px;
        text-align: left;
    }
     .quote-table td:nth-child(2) div {
        max-height: 200px; /* 너무 길어지면 스크롤 */
        overflow-y: auto;
     }
    /* 금액 입력창 스타일 */
    .money-input {
        text-align: right;
        border: none;
        background: transparent;
        width: 100%;
        font-weight: bold;
    }

    /* 5. 하단 고정 액션 바 (버튼 영역) */
    .action-bar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        padding: 15px 20px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex;
        gap: 10px;
        z-index: 100;
    }
    .action-bar button {
        flex: 1;
        padding: 12px 0;
        border-radius: 30px; /* 둥근 버튼 */
        font-size: 15px;
        font-weight: bold;
        border: none;
        color: white;
        cursor: pointer;
    }
    .btn-print { background-color: #343a40; /* 진한 회색 */ }
    .btn-tms { background-color: #2264e3; /* 파란색 */ }
	
	/* =========================================
       [추가] 모바일 화면에서 헤더 중앙 정렬
    ========================================= */
    .contract-header {
        flex-direction: column; /* 요소들을 세로로 쌓기 */
        align-items: center; /* 가로 중앙 정렬 */
        text-align: center; /* 텍스트 중앙 정렬 */
    }
    
    .contract-header h1 {
        font-size: 23px !important; /* 모바일에서는 제목 크기 살짝 축소 */
        white-space: normal; /* 너무 좁은 폰에서는 자연스럽게 줄바꿈 허용 */
        word-break: keep-all; /* 단어 단위로 예쁘게 줄바꿈 */
        margin-bottom: 10px !important; /* 제목 아래 여백 추가 */
    }
    
    .header-right-group {
        flex-direction: column; /* 텍스트와 날짜 뱃지도 위아래로 배치 */
        align-items: center; /* 가로 중앙 정렬 */
        justify-content: center;
        width: 100%;
        gap: 10px;
    }
    
    .header-text-info {
        align-items: center; /* 경고문구, 문서번호 중앙 정렬 */
        text-align: center;
    }	
	
}

/* 관리자 모드가 아닐 때는 숨김 */
.admin-only {
    display: none;
}



#model_content {
    transition: background-color 0.3s, transform 0.2s;
    border-radius: 0px;
    padding: 0px; /* 여백이 있으면 클릭하기 더 편해요 */
}

#model_content:hover {
    background-color: #f8fafc; /* 마우스 올리면 아주 연한 회색 배경 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 살짝 떠오르는 느낌 */
}

/* 날짜 선택기에서 텍스트 숨기고 아이콘만 남기기 */
#adminDateInput {
    width: 15px;          /* 아이콘 크기에 맞게 너비 조절 */
    height: 15px;
    padding: 0;
    margin-left: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: transparent;   /* 1. 입력창 내부 글자를 투명하게 */
    position: relative;
    overflow: hidden;
}

/* 크롬, 엣지, 사파리에서 날짜 텍스트 영역을 강제로 숨김 */
#adminDateInput::-webkit-datetime-edit,
#adminDateInput::-webkit-inner-spin-button,
#adminDateInput::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* 달력 아이콘만 정중앙에 배치 */
#adminDateInput::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 1; /* 아이콘은 선명하게 유지 */
}


@media screen {
    /* 캡처할 때만 적용되는 규칙 */
    .print-view {
        position: relative;
        top: 0;
        left: 0;
        overflow: visible;
    }
    
    .print-page {
        width: 100%;
        margin: 0 auto;
        /* 페이지가 겹치는 것을 방지 */
        display: block; 
        background: #fff;
        /* 내부 내용이 삐져나와서 페이지가 밀리는 현상 방지 */
        box-sizing: border-box; 
    }
}

/* PDF 라이브러리가 인식하는 분할 지점 */
.print-page {
    page-break-after: always !important;
    page-break-inside: avoid !important;
}
.print-page:last-child {
    page-break-after: auto !important;
}


/* ==========================================================================
   [신규] 고급 레이어 팝업 (모달) 스타일
   ========================================================================== */
.custom-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.5); /* 어두운 반투명 배경 */
    backdrop-filter: blur(4px); /* 뒤 배경을 모바일 앱처럼 고급스럽게 흐림 처리 */
    display: flex; justify-content: center; align-items: center;
    z-index: 10000;
    opacity: 0; transition: opacity 0.25s ease-in-out;
}
.custom-modal-box {
    background: #ffffff; 
    border-radius: 20px; /* 둥근 모서리 */
    padding: 30px 20px 20px;
    width: 85%; max-width: 320px; /* 모바일과 PC 모두 예쁘게 나오는 사이즈 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    text-align: center;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 통통 튀는 스프링 애니메이션 */
    box-sizing: border-box;
}
.custom-modal-icon {
    width: 54px; height: 54px; margin: 0 auto 15px;
    background: #eff6ff; color: #3b82f6; 
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
}
.custom-modal-text {
    font-size: 16px; color: #1e293b; line-height: 1.5; font-weight: 700;
    margin-bottom: 25px; word-break: keep-all;
}
.custom-modal-btns {
    display: flex; gap: 10px;
}
.custom-modal-btns button {
    flex: 1; padding: 13px 0; border-radius: 12px; border: none;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.btn-modal-no {
    background: #f1f5f9; color: #64748b;
}
.btn-modal-no:hover { background: #e2e8f0; }
.btn-modal-yes {
    background: #3b82f6; color: #ffffff;
}
.btn-modal-yes:hover { background: #2563eb; }