/* 스타일 충돌 방지를 위해 모든 CSS 규칙은 #boiler-quote-container ID 하위에 정의됩니다.
          또한, 상위 요소의 font-size가 변경(예: 0.75em)되어도 컴포넌트의 크기가 유지되도록
          모든 단위를 em 단위로 조정했습니다.
        */
        
        #boiler-quote-container * {
            box-sizing: border-box;
        }

        #boiler-quote-container {
            font-family: 'Noto Sans KR', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #ffffff;
            width: 100%;
            max-width: 1152px;
            margin-left: auto;
            margin-right: auto;
            /* 기본 폰트 크기를 16px로 재설정하여 내부 em 계산의 기준을 만듭니다. */
            font-size: 16px; 
            padding: 1.5em;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        #boiler-quote-container .bq-form-title {
            text-align: center;
            font-size: 1.25em;
            font-weight: 700;
            color: #1f2937;
            margin: 0 0 1.5em 0;
        }


        /* 반응형 패딩 */
        @media (min-width: 768px) {
            #boiler-quote-container {
                padding: 2em;

								margin-top:50px;
                margin-bottom:100px;                
            }
        }

        /* 헤더 */
        #boiler-quote-container .bq-header {
            margin-bottom: 1.5em;
        }
        @media (min-width: 768px) {
            #boiler-quote-container .bq-header {
                margin-bottom: 2em;
            }
        }
        #boiler-quote-container .bq-main-title {
            color: #1f2937;
            font-size: 1.5em;
            font-weight: 700;
            letter-spacing: -0.025em;
        }
        #boiler-quote-container .bq-sub-title {
            color: #6b7280;
            margin-top: 0.25em;
            font-size: 1em;
        }

        /* 메인 그리드 레이아웃 */
        #boiler-quote-container .bq-grid-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2em;
        }
        @media (min-width: 1024px) {
            #boiler-quote-container .bq-grid-container {
                grid-template-columns: 1fr 1fr;
                gap: 3em;
            }
        }
        
        /* 좌측 사진 영역 */
        #boiler-quote-container .bq-photo-section > div:not(:first-child) {
            margin-top: 1em;
        }
        #boiler-quote-container .bq-aspect-box {
            position: relative;
            padding-bottom: 75%; /* 4:3 Aspect Ratio */
            background-color-xx: #f3f4f6;
            border-radius-xx: 0.5em;
            border:1px solid #e1e1e1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        #boiler-quote-container .bq-aspect-box-content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        #boiler-quote-container .bq-aspect-box-icon {
             height: 3em;
             width: 3em;
             color: #9ca3af;
        }
        #boiler-quote-container .bq-aspect-box-text {
            margin-top: 0.5em;
            font-size: 0.875em;
            font-weight: 500;
            color: #4b5563;
        }

        /* 우측 견적 영역 */
        #boiler-quote-container .bq-quote-section {
            display: flex;
            flex-direction: column;
        }
        #boiler-quote-container .bq-quote-list {
            flex-grow: 1;
            margin-bottom: 1.5em;
        }
        #boiler-quote-container .bq-quote-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75em;
            padding-bottom: 0.75em;
            border-top: 1px solid #f3f4f6;
        }
        #boiler-quote-container .bq-quote-item:first-child {
            border-top: none;
        }
        #boiler-quote-container .bq-item-name { color: #374151; font-weight: 500; font-size: 1.1em; }
        #boiler-quote-container .bq-item-detail { color-xx: #6b7280; color: #e34c4c; font-size: 0.8em; margin-left: 0.5em; }
        #boiler-quote-container .bq-item-detail {
	        
	        font-weight: normal;
				  font-family: 'Dotum';
				  font-family: 'Noto sans';
	        
	        color: #FFF;
	        color:#ff3535;
	        
			    font-size: 1em;
			    font-size:12px;
			    margin-left: 0.6em;
			    background: #e34c4c;
			    background: #ffecec;
			    background: #fff;
			    
			    border-radius: 10px 5px 5px 10px;
			    padding: 4px 6px 4px 8px;
			    
			    border-radius: 5px;
			    padding: 4px 6px 4px 6px;
			    
			    border:1px solid #d37676;
        }
        
        #boiler-quote-container .bq-item-price { font-weight: 700; font-size: 1.125em; color: #111827; }
        #boiler-quote-container .bq-item-free { font-weight: 600; color: #2563eb; font-size: 1em; }

				#boiler-quote-container .bq-item-free { 
				    font-weight: normal;
				    font-family:'Dotum';
				    font-family:'Noto sans';
				    
				    color: #008900;
				    color: #fff;
				    
				    font-size: 1.1em;
				    background: #2563eb;
				    background: #deffde;
				    background: #008900;
				    
				    padding: 4px 10px 4px 10px;
				    padding: 2px 10px 3px 10px;
				    
				    border-radius: 6px;
				    width: 100px;
				    text-align: center;
				}

        /* 합계 */
        #boiler-quote-container .bq-total-section {
            border-top: 2px solid #d1d5db;
            padding-top: 1em;
            margin-bottom: 2em;
        }
        #boiler-quote-container .bq-total-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #boiler-quote-container .bq-total-label { font-size: 1.25em; font-weight: 700; color: #111827; }
        #boiler-quote-container .bq-total-price-wrapper { text-align: right; }
        #boiler-quote-container .bq-total-price { font-size: 1.875em; font-weight: 800; color: #2563eb; }
        #boiler-quote-container .bq-card-info { font-size: 0.95em; color: #6b7280; margin-top: 0.25em; }
        
        #boiler-quote-container .bq-aspect-box img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover; /* 이미지가 비율을 유지하며 꽉 차도록 */
            xmax-width:520px;
        }
        
        /* 상담 신청 폼 */
        #boiler-quote-container .bq-form-section {
            background-color: #f9fafb;
            border-radius: 0.5em;
            padding: 1em;
            margin-top: auto;
        }
        #boiler-quote-container .bq-form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1em;
            align-items: center;
        }
        @media (min-width: 768px) {
            #boiler-quote-container .bq-form-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        #boiler-quote-container .bq-form-input {
            width: 100%;
            padding: 0.75em;
            border: 1px solid #d1d5db;
            border-radius: 0.375em;
            transition: box-shadow 0.2s, border-color 0.2s;
            font-size: 1em;
        }
        #boiler-quote-container .bq-form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
        }
        #boiler-quote-container .bq-submit-button {
            width: 100%;
            background-color: #2563eb;
            color: #ffffff;
            font-weight: 700;
            padding: 0.75em;
            border-radius: 0.375em;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
            font-size: 1em;
        }
        #boiler-quote-container .bq-submit-button:hover {
            background-color: #1d4ed8;
            transform: scale(1.05);
        }

        /* 팝업 모달 */
        #bq-success-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(17, 24, 39, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            font-size: 16px; /* 모달은 body의 자식이므로 기준 폰트 재설정 */
        }
        #bq-success-modal.bq-hidden {
            display: none;
        }
        #bq-success-modal .bq-modal-content {
            background-color: #ffffff;
            border-radius: 0.5em;
            padding: 2em;
            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;
            width: 91.666667%;
            max-width: 384px;
        }
        #bq-success-modal .bq-modal-title {
            font-size: 1.5em;
            font-weight: 700;
            margin-bottom: 1em;
        }
        #bq-success-modal .bq-modal-text {
            color: #4b5563;
            margin-bottom: 1.5em;
            font-size: 1em;
            line-height: 1.5;
        }
        #bq-success-modal .bq-modal-button {
            background-color: #2563eb;
            color: #ffffff;
            font-weight: 700;
            padding: 0.5em 1.5em;
            border-radius: 0.375em;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
            font-size: 1em;
        }
        #bq-success-modal .bq-modal-button:hover {
            background-color: #1d4ed8;
        }
        
        /* 견적 상담 신청하기 래퍼 */
				#boiler-quote-container .bq-consultation-wrapper {
				    border: 1px solid #d1d5db;
				    border-radius: 0.75em;
				    padding: 1.5em;
				    margin-top: 2em;
				    background-color: #f9fafb;
				}