@font-face {
    font-family: 'Gmarket Sans';
    font-weight: 300; /* Medium */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansRegular.woff') format('woff');
}

@font-face {
    font-family: 'Gmarket Sans';
    font-weight: 500; /* Medium */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
}
@font-face {
    font-family: 'Gmarket Sans';
    font-weight: 700; /* Bold */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
}


@font-face {
    font-family: 'Yd_Dimibang'; 
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2211@1.0/Yd_Dimibang.woff2') format('woff2');
}

/* 서브 비주얼 공통 스타일 */
.sub-visual {
	margin-top:90px;
    width: 100%;
    position: relative;
    /* 💥 정중앙 배치 핵심 속성 💥 */
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    /* -------------------------- */
    text-align: center;
    background-size: cover; 
    background-position: center;
    overflow: hidden;
}

/* 회사소개 페이지 전용 비주얼 설정 */
.about-visual {
    /* 실제 사용할 고해상도 배경 이미지 경로를 설정해주세요. */
    background-image: url('/assets/img/sub_visual_about.png'); 
}

.business-visual {
    /* 실제 사용할 고해상도 배경 이미지 경로를 설정해주세요. */
    background-image: url('/assets/img/sub_visual_business.png'); 
}

.construction-visual {
    /* 실제 사용할 고해상도 배경 이미지 경로를 설정해주세요. */
    background-image: url('/assets/img/sub_visual_construction.png'); 
}

.customer-visual {
    /* 실제 사용할 고해상도 배경 이미지 경로를 설정해주세요. */
    background-image: url('/assets/img/sub_visual_customer.png'); 
}

.consultation-visual {
    /* 실제 사용할 고해상도 배경 이미지 경로를 설정해주세요. */
    background-image: url('/assets/img/sub_visual_consultation.png'); 
}

/* PC 버전 스타일 (기본) */
.sub-visual {
    height: 300px; /* PC: 높이 300px */
}

.sub-visual-title {
    /* **Gmarket Sans 폰트 적용** */
    font-family: 'Gmarket Sans', sans-serif; 
    font-size: 44px; /* PC: 제목 크기 44px */
    color: #333333; /* 요청하신 제목 색상 */
    font-weight: 700; /* Bold 폰트 사용 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);

}

/* 서브 콘텐츠 섹션 스타일 (컨테이너 중앙 정렬 가정) */
.sub-content {
    /* style.css에 있는 section 기본 패딩을 유지하거나 재정의 */
    padding: 80px 0; 
}

.section-title {
    font-size: 32px;
    color: #111;
    text-align: center;
    margin-bottom: 40px;
}

/* 텍스트 영역 */
.intro-text-area {
    /* 서브 비주얼과의 간격 */
    margin-bottom: 50px; /* 텍스트와 이미지 사이의 간격 */
    /* .container의 최대 너비 1400px 안에 존재하며 왼쪽 정렬입니다. */
    padding: 0 20px; /* .container 패딩 유지 */
}

/* 1. About us 텍스트 스타일 */
.intro-sub-heading {
    color: #00A1E0; /* 요청하신 색상 */
    font-size: 20px; /* PC: 20px */
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 30px;
letter-spacing:3px
}

/* 2. 메인 제목 텍스트 스타일 */
.intro-main-heading {
    color: #333333; /* 요청하신 색상 */
    font-size: 54px; /* PC: 54px */
    font-weight: 700;
    line-height: 1.3;
	letter-spacing:-2px
}

/* 3. 회사 소개 이미지 스타일 */
.company-image-wrap {
    width: 100%;
    /* 이미지를 .container의 최대 너비 1400px 안에 중앙 정렬하기 위해 */
    max-width: 1400px; 
    margin: 0 auto; 
    overflow: hidden;
    /* PC에서는 좌우 여백이 필요 없으므로 패딩 없음 */
    padding: 0; 
}

.company-main-image {
    width: 100%;
    height: 500px; /* PC: 높이 500px */
    object-fit: cover; /* 이미지가 잘리지 않고 영역을 꽉 채우도록 */
    display: block;
}



/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    /* 모바일: 높이 180px */
    .sub-visual {
        height: 180px; 

    }

	.sub-visual-title {

		font-size: 26px; /* PC: 제목 크기 44px */


	}


    /* 모바일: 제목 크기 26px */
    .sub-title {
        font-size: 26px; 
        text-shadow: none; /* 모바일에서는 그림자 제거 */
    }

    .sub-content {
        padding: 40px 0; /* 모바일 섹션 상하 여백 축소 */
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 30px;
    }


	/* 텍스트 영역 (상하 간격 조정) */
    .intro-text-area {
        margin-top: 40px; /* 모바일: 상단 마진 축소 */
        margin-bottom: 30px;
    }
    
    /* 1. About us 텍스트 */
    .intro-sub-heading {
        font-size: 16px; /* 모바일: 16px */
    }

    /* 2. 메인 제목 텍스트 */
    .intro-main-heading {
        font-size: 26px; /* 모바일: 26px */
    }

    /* 3. 회사 소개 이미지 */
   .company-image-wrap {
        /* .container에 설정된 20px 좌우 여백을 직접 적용하여 */
        /* 이미지 영역 전체가 좌우로 20px씩 떨어지게 만듭니다. */
        padding: 0 20px; 
    }

    /* 3. 회사 소개 이미지 */
    .company-main-image {
        /* 이미지의 너비는 부모 요소(company-image-wrap)의 100%를 따릅니다. 
           따라서 좌우 여백(padding: 0 20px) 안에서 최대 크기가 됩니다. */
        width: 100%; 
        height: auto; /* 모바일: 높이 216px */
        
        /* * object-fit: cover; 는 이미지를 영역에 맞게 자르기 때문에 짤리는 현상이 발생합니다.
         * 만약 이미지가 무조건 영역을 채우고 싶다면 'cover'를 유지하고,
         * 이미지가 짤리지 않고 전체가 보이도록 하려면 'contain'으로 변경해야 합니다.
         * 여기서는 'height: 216px'을 고정 높이로 유지하므로, 'cover'를 유지합니다.
         */
    }
}


/* --- 회사 주요 특징 섹션 (2단 구성) --- */

.company-feature-section {
    /* 회사 이미지 아래 간격 */
    margin-top: 80px; 
    padding: 0 20px; /* .container 좌우 패딩 유지 */
    display: flex;
    justify-content: space-between; /* 양쪽 끝 정렬 */
    gap: 40px; /* 열(Column) 사이 간격 */
    max-width: 1400px; /* .container 최대 너비 유지 */
    margin-left: auto;
    margin-right: auto;
}

/* 왼쪽 열: 제목 스타일 */
.feature-title-col {
    width: 30%; /* 왼쪽 제목 영역의 너비 */
    flex-shrink: 0; /* 내용이 줄어들지 않도록 고정 */
}

.feature-main-title {
    color: #333333; 
    font-size: 44px; /* PC: 44px */
    font-weight: 700;
    line-height: 1.4;
    text-align: left; 
    
    /* �배경 이미지 추가 �*/
    background-image: url('/assets/img/text_bottom_bg.png'); /* 이미지 경로를 정확히 지정 */
    background-repeat: no-repeat;
    
    /* 배경 이미지 위치 조정 (텍스트 세로 중앙부터 시작) */
    background-position: left 120%; /* left: 왼쪽 정렬, 60%: 텍스트 세로 중앙보다 약간 아래부터 시작 */
    
    /* 이미지 크기 조정 */
    background-size: 78% 40%; /* 너비 100%, 높이는 40%로 조정 */
    padding-bottom: 5px; /* 배경과 아래 내용과의 간격 확보 */
    
    /* 배경이 텍스트 위로 오지 않도록 패딩 필요 */
    /* 텍스트의 높이에 따라 60%나 55% 등으로 미세 조정할 수 있습니다. */
}

/* 오른쪽 열: 상세 내용 스타일 */
.feature-content-col {
    width: 70%; /* 오른쪽 내용 영역의 너비 */
}

.feature-content-col p {
    color: #333333; /* 요청하신 색상 */
    font-size: 20px; /* PC: 20px */
    line-height: 1.8;
    margin-bottom: 20px; /* 문단 간격 */
    text-align: left; /* 왼쪽 정렬 */
}


/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    
    /* 2단 섹션을 1단으로 변경 */
    .company-feature-section {
        flex-direction: column;
        gap: 30px; /* 모바일 세로 간격 */
        margin-top: 40px; /* 모바일 상단 간격 축소 */
    }

    .feature-title-col,
    .feature-content-col {
        width: 100%; /* 너비를 100%로 설정하여 세로로 쌓이게 함 */
    }

    /* 왼쪽 제목 스타일 (모바일) */
   .feature-main-title {
        font-size: 26px; /* 모바일: 26px */
        line-height: 1.5;
        
        /* 모바일 배경 이미지 조정 */
        background-size: 41% 25%; /* 모바일 환경에 맞춰 높이 비율 축소 */
        background-position: left 90%; /* 텍스트 크기에 맞춰 위치 재조정 */
        padding-bottom: 3px;
    }

    /* 오른쪽 내용 스타일 (모바일) */
    .feature-content-col p {
        font-size: 16px; /* 모바일: 16px */
        line-height: 1.6;
        margin-bottom: 15px;
    }

}

/* --- 회사 서명 섹션 --- */
.company-signature-area {
    max-width: 1400px;
    margin: 40px auto 80px auto; /* 위쪽 마진 40px, 아래쪽 마진 80px */
    padding: 0 20px; /* .container 좌우 패딩 유지 */
    
    /* 텍스트를 오른쪽으로 정렬하기 위한 Flexbox 설정 */
    display: flex;
    justify-content: flex-end; /* 모든 내용을 오른쪽 끝으로 정렬 */
    align-items: baseline; /* 텍스트 베이스라인을 맞춤 */
}

/* 1. 타일쟁이 텍스트 스타일 */
.signature-name {
    color: #333333; /* 요청하신 색상 */
    font-size: 20px; /* PC: 20px */
    font-weight: 400; /* 일반 두께 */
    margin-right: 10px; /* 임직원 일동과의 간격 */
    line-height: 1;
}

/* 2. 임직원 일동 텍스트 스타일 */
.signature-title {
font-family: 'Yd_Dimibang', sans-serif; 
    color: #333333; /* 요청하신 색상 */
    font-size: 40px; /* PC: 40px */
    font-weight: 700; /* 강조 */
    line-height: 1;
}


/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    .company-signature-area {
        margin: 30px auto 40px auto; /* 모바일 마진 축소 */
    }

    /* 1. 타일쟁이 텍스트 스타일 (모바일) */
    .signature-name {
        font-size: 16px; /* 모바일: 16px (요청에 따라 20px를 모바일에 맞게 줄임) */
    }

    /* 2. 임직원 일동 텍스트 스타일 (모바일) */
    .signature-title {
        font-size: 26px; /* 모바일: 26px (요청에 따라 40px를 모바일에 맞게 줄임) */
    }
}


/* --- 서브 탭 메뉴 섹션 --- */

.sub-tab-menu-wrap {
margin-top:50px;
    width: 100%;
    padding: 40px 0; /* 탭 메뉴 위아래 여백 */
    background-color: #fff;
}

.sub-tab-menu {
    display: flex;
    justify-content: center; /* 탭 전체를 컨테이너 중앙에 배치 */
    align-items: center;
    
    /* 💥 버튼 간 간격 추가 💥 */
    gap: 20px; 
    
    margin: 0 auto;
    max-width: 1400px;
}

.tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 300px; /* PC: 300px */
    height: 60px; /* PC: 60px */
    
    font-size: 24px; /* PC: 24px */
    font-weight: 600;
    text-decoration: none; 
    transition: all 0.2s ease-in-out;
    
    /* 💥 개별 버튼 테두리 및 둥근 모서리 설정 (선택 사항: 버튼 느낌 강조) 💥 */
    border: 1px solid #ddd; 
    border-radius: 8px; /* 버튼 느낌을 위해 모서리 둥글게 */
}

/* 탭 상태별 색상 설정 (유지) */

/* 1. 활성화(선택됨) 상태 */
.tab-item.active {
    background-color: #333333; 
    color: #ffffff; 
    border-color: #333333; /* 활성화된 버튼의 테두리 색상 */
}

/* 2. 비활성화(선택되지 않음) 상태 */
.tab-item:not(.active) {
    background-color: #eeeeee; 
    color: #333333; 
    border-color: #ddd;
}

/* 💥 이전 탭 연결 관련 스타일 제거 💥 */
/* 첫 번째/마지막/중간 탭의 테두리 및 radius 조정 코드를 모두 제거했습니다. */


/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    .sub-tab-menu-wrap {
		margin-top:20px;
	
	}

   .sub-tab-menu-wrap {
        padding: 20px 0; 
    }
    
    .sub-tab-menu {
        /* 💥 중앙 정렬을 위한 핵심 설정 💥 */
        /* 탭 항목들을 감싸는 div의 너비를 내부 콘텐츠에 맞추고 */
        width: auto; 
        /* 부모 요소인 .sub-tab-menu-wrap 내에서 이 .sub-tab-menu를 중앙에 배치합니다. */
        /* 단, .sub-tab-menu-wrap이 display: flex; justify-content: center; 속성이 없으므로, */
        /* .sub-tab-menu 자체에 margin: 0 auto; 를 적용합니다. */
        
        margin: 0 auto; /* 중앙 정렬 */
        padding: 0 20px; /* 좌우 여백 */
        
        /* 탭 항목들을 가로로 배치 */
        display: flex;
        justify-content: center; /* 💥 탭 버튼 자체들을 중앙에 배치 💥 */
        
        gap: 10px; /* 모바일 버튼 간 간격 축소 */

        /* 탭이 많지 않다면, 스크롤 관련 속성은 제거합니다. */
        overflow-x: hidden; 
    }
    
    .tab-item {
        width: 154px; /* 모바일: 154px */
        height: 44px; /* 모바일: 44px */
        font-size: 21px; /* 모바일: 21px */
        flex-shrink: 0; 
        border-radius: 6px; 
    }
}


/* --- 비즈니스 메인 이미지 섹션 --- */

.business-main-image-wrap {
    width: 100%;
    max-width: 1400px; 
    margin: 0px auto; 
    padding: 0 20px; /* PC/모바일 모두 좌우 여백 20px 유지 */
    overflow: hidden;
}

.business-main-image {
    width: 100%; /* 부모 너비에 꽉 차도록 설정 */
    height: auto; /* 💥 원본 이미지 비율 유지를 위해 높이 자동 설정 💥 */
    display: block; /* 이미지 하단 공백 제거 */
    object-fit: contain; /* 이미지가 잘리지 않고 전체가 보이도록 설정 (선택 사항) */
    /* 만약 이미지가 컨테이너를 꽉 채우기를 원하면 object-fit: cover; 를 사용하고
       height: 500px; 와 같이 높이를 고정해야 하며, 이 경우 일부가 짤릴 수 있습니다.
       요청하신 '짤림 방지'를 위해 height: auto와 object-fit: contain을 유지합니다. */
}

/* 1. PC 이미지와 모바일 이미지 표시/숨김 설정 */

.business-main-image.pc-image {
    display: block; /* PC에서는 PC 이미지 표시 */
}

.business-main-image.mobile-image {
    display: none; /* PC에서는 모바일 이미지 숨김 */
}


/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    
    .business-main-image-wrap {
        margin: 20px auto; 
        padding: 0 0px; /* 모바일 좌우 여백 유지 */
    }
    
    /* 💥 모바일에서는 이미지 교체 💥 */
    .business-main-image.pc-image {
        display: none; /* 모바일에서는 PC 이미지 숨김 */
    }

    .business-main-image.mobile-image {
        display: block; /* 모바일에서는 모바일 이미지 표시 */
    }

    /* 만약 모바일 이미지의 높이를 고정하고 싶다면 (짤림 감수 시):
    .business-main-image.mobile-image {
        height: 216px; 
        object-fit: cover;
    } 
    */
}


/* --- 타일 정보 페이지 타이틀 및 라인 (BUSINESS 접두사 적용) --- */

.business-tile-header-area {
    margin: 0px auto 50px auto; /* PC 상단 마진 */
    text-align: center;
}

.business-tile-page-title {
    font-size: 44px; /* PC: 44px */
    color: #333333;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
}

/* 333333 긴 라인 스타일 */
.business-title-divider {
    width: 100%; /* 컨테이너 너비 전체 사용 */
    max-width: 1400px;
    height: 1px;
    background-color: #333333;
    margin: 0 auto; 
}

/* --- 타일 갤러리 리스트 (BUSINESS 접두사 적용) --- */

.business-tile-gallery-list {
    display: grid;
    /* PC 5열 고정 및 영역 벗어남 방지 */
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px; /* 타일 항목 간의 간격 */
    margin-top: 50px; 
    margin-bottom: 80px;
}

.business-tile-item {
    overflow: hidden;
    background-color: #ffffff; 
    transition: box-shadow 0.2s, transform 0.2s;
}

.business-tile-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 
}

.business-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 이미지 비율 설정 (262px * 180px) */
.business-tile-image-wrap {
    width: 100%;
    padding-top: 68.7%; /* 180 / 262 * 100% 비율 유지 */
    position: relative;
    overflow: hidden;
}

.business-tile-image-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    /* 영역 벗어남 방지: 유연한 100% 너비 */
    width: 100%; 
    height: 100%;
    object-fit: cover; 
}

.business-tile-info {
    padding: 15px 0 15px 0; 
    text-align: left;
    background-color: #fff;
}

/* 16px 왼쪽 정렬 타이틀 */
.business-tile-name {
    font-size: 16px; /* PC: 16px */
    font-weight: 600;
    color: #333;
    margin-bottom: 0;
    text-align: left; 
}

/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    
    .business-tile-header-area {
        margin: 0px auto 30px auto;
    }
    
    .business-tile-page-title {
        font-size: 24px; /* 모바일: 24px */
        margin-bottom: 15px;
    }

	.business-title-divider {
		width: 100%; /* 컨테이너 너비 전체 사용 */
		height: 1px;
		background-color: #333333;
		margin: 0 auto; 
	}

    .business-tile-gallery-list {
        /* 모바일: 2열 배치 고정 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
        margin-top: 30px;
        margin-bottom: 40px;
		margin-left:20px;
		margin-right:20px;
    }

    .business-tile-image-wrap {
        padding-top: 68.7%; 
    }
    
    .business-tile-name {
        font-size: 14px; 
    }
}

/* --- 리스트 하단 영역 (구분선 및 페이징) --- */

.business-list-footer {
    width: 100%;
    margin-top: 40px; /* 타일 리스트와 구분 */
    margin-bottom: 80px; /* 섹션 하단 여백 */
}

/* dddddd 라인 스타일 */
.business-list-divider {
    width: 100%;
    max-width: 1400px;
    height: 1px;
    /* dddddd 색상 적용 */
    background-color: #dddddd; 
    margin: 0 auto; 
}

/* 페이징 중앙 정렬 영역 */
.business-pagination-area {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center;
    gap: 10px;
    padding: 40px 0; /* 상하 여백 */
}

/* 페이징 링크 기본 스타일 */
.business-pagination-area .page-link {
    text-decoration: none;
    color: #666;
    font-size: 15px;
    padding: 8px 12px;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: all 0.2s;
}

/* 활성화된 페이지 스타일 */
.business-pagination-area .page-link.active {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
    font-weight: 700;
}

/* 호버 스타일 */
.business-pagination-area .page-link:not(.active):hover {
    color: #333333;
    background-color: #f7f7f7;
    border-color: #ccc;
}


/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    
    .business-list-footer {
        margin-top: 20px;
        margin-bottom: 40px; 
    }

    .business-pagination-area {
        gap: 8px;
        padding: 20px 0;
    }

    .business-pagination-area .page-link {
        font-size: 13px;
        padding: 6px 10px;
    }
}


/* --- 타일 상세 페이지 레이아웃 --- */

.business-detail-header {
    margin-bottom: 40px; 
}

/* 333333 상단 라인 */
.business-detail-top-divider {
    width: 100%;
    height: 1px;
    background-color: #333333;
    margin-bottom: 30px; 
}

.business-detail-bottom-divider {
    width: 100%;
    height: 1px;
    background-color: #dddddd;
    margin-bottom: 30px; 
}

/* 왼쪽 정렬 제목 (26px) */
.business-detail-post-title {
    font-size: 26px;
    color: #333333;
    font-weight: 700;
    text-align: left;
    margin-bottom: 20px;
}

/* 작성자 정보 영역 (보더, 배경 f9f9f9) */
.business-detail-meta-wrap {
    background-color: #f9f9f9;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding: 15px 20px;
    font-size: 16px;
    color: #333;
    /* 💥 수정: 아이템 간 간격을 20px로 조정하고 flex-wrap 추가 💥 */
    display: flex;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 가능하도록 설정 */
    gap: 20px; 
    margin-bottom: 50px;
}

.business-detail-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
}

.business-detail-rating .meta-label {
    /* 라벨 강조 스타일 유지 */
    font-weight: 700;
    color: #222222;
}

.business-detail-rating .rating-stars {
    /* 별점 아이콘 영역 */
    color: #ddd; /* 빈 별의 기본 색상 */
    font-size: 18px;
    letter-spacing: -2px;
    display: inline-block;
}

.business-detail-rating .rating-stars .star.filled {
    color: #00A1E0; /* 채워진 별 색상 */
}

/* 4.5점 등 반점일 경우를 위한 스타일 (필요하다면 CSS 마스크 등으로 처리 필요) */
.business-detail-rating .rating-stars .star.half {
    /* 실제 구현 시, 반쪽 별 이미지를 사용하거나 clip-path를 사용해야 합니다. 
       여기서는 시각적 구분을 위해 주황색을 사용합니다. */
    color: #dddddd; 
}

.business-detail-rating .rating-value {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.business-detail-meta-item {
    font-size: 16px;
    color: #333333;
}

/* 💥 추가: 작성자/작성일 라벨 강조 스타일 💥 */
.business-detail-meta-item .meta-label {
    font-weight: 700; /* 라벨을 굵게 강조 */
    color: #222222; /* 라벨 색상을 조금 더 진하게 설정하여 본문과 구분 */
    margin-right: 5px; /* 라벨과 값 사이에 약간의 간격 추가 */
}

.business-detail-meta-item {
    font-size: 16px;
    color: #333333;
}

/* --- 상세 내용 영역 --- */
.business-detail-content {
    min-height: 300px; /* 내용이 적을 때를 대비한 최소 높이 */
    line-height: 1.8;
    color: #444;
    font-size: 16px;
    margin-bottom: 50px;
	text-align:center;
}

/* --- 하단 푸터 (품명 및 목록 버튼) --- */

/* 하단 품명 정보 영역 (보더, 배경 f9f9f9) */
.business-detail-product-info {
    background-color: #f9f9f9;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding: 20px;
    margin-bottom: 50px;
    text-align: left;
    line-height: 1.8;
}

.business-detail-product-info .label {
    font-weight: 700;
    color: #333;
    display: inline-block;
    width: 80px;
}

.business-detail-product-info .value {
    color: #666;
}

/* 목록으로 버튼 영역 (중앙 정렬) */
.business-list-button-wrap {
    text-align: center; /* 버튼 중앙 정렬 */
    margin-bottom: 80px;
}

/* 목록으로 버튼 스타일 (배경 없이 라인만) */
.business-list-button {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #333333; /* 라인만 존재 */
    background-color: transparent; /* 배경색 없음 */
    color: #333333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 3px;
    transition: all 0.2s;
}

.business-list-button:hover {
    background-color: #333333;
    color: #fff;
}


/* --- 모바일 반응형 (@media) --- */

@media (max-width: 768px) {

	.business-detail-header {
		margin-left: 20px; 
		margin-right: 20px; 
	}

	.business-detail-content {
		margin-left: 20px; 
		margin-right: 20px; 
	}

    
    .business-detail-top-divider {
        margin-bottom: 20px; 
    }
    
    .business-detail-post-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .business-detail-meta-wrap {
        padding: 10px 15px;
        font-size: 14px;
        gap: 20px;
        margin-bottom: 30px;
    }

    .business-detail-meta-item {
        font-size: 14px;
    }
    
    .business-detail-content {
        margin-bottom: 30px;
        font-size: 15px;
    }

	.business-detail-content {
        /* 내부 콘텐츠의 오버플로우를 숨김 (스크롤 방지) */
        overflow-x: hidden;
        word-break: break-word; /* 긴 텍스트가 컨테이너를 벗어날 경우 줄바꿈 */
    }

    /* 1. 이미지 (<img>) 반응형 처리 */
    .business-detail-content img {
        max-width: 100% !important; /* 컨테이너 너비를 초과하지 않도록 제한 */
        height: auto !important;     /* 비율 유지를 위해 높이는 자동 */
        box-sizing: border-box; 
    }
    
    /* 2. 테이블 (<table>) 반응형 처리 */
    .business-detail-content table {
        display: block; /* 테이블을 블록 요소로 만들어 가로 스크롤 가능하게 함 */
        width: 100%;
        overflow-x: auto; /* 테이블이 넓을 경우 가로 스크롤 허용 */
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
    }
    
    /* 3. iframe (영상, 지도 등) 반응형 처리 */
    .business-detail-content iframe {
        max-width: 100%; 
        height: auto; 
    }
    
    /* 4. 고정 너비 요소 초기화 (필요한 경우) */
    .business-detail-content div,
    .business-detail-content p {
        width: auto !important; /* 고정 너비 속성을 무력화 */
    }
    
    .business-detail-product-info {
        padding: 15px;
        margin-bottom: 30px;
    }

    .business-detail-product-info .label {
        width: 80px;
    }
    
    .business-list-button-wrap {
        margin-bottom: 40px;
    }

    .business-list-button {
        padding: 8px 20px;
        font-size: 15px;
    }
}


/* --- 시공 사례 갤러리 리스트 (construction 접두사 적용) --- */

.construction-gallery-list {
    display: grid;
    /* 💥 PC 3열 고정 💥 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-top: 50px; 
    margin-bottom: 80px;
}

.construction-item {
    overflow: hidden;
    background-color: #ffffff; 
    transition: box-shadow 0.2s, transform 0.2s;
}

.construction-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 
}

.construction-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 💥 이미지 비율 설정 (442px * 260px 비율 유지) 💥 */
.construction-image-wrap {
    width: 100%;
    /* 260 / 442 * 100% ≈ 58.82% 비율 유지 */
    padding-top: 58.82%; 
    position: relative;
    overflow: hidden;
}

.construction-image-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover; 
}

.construction-info {
    padding: 15px; 
    text-align: center; /* 타이틀 및 정보 중앙 정렬 */
    background-color: #fff;
}

.construction-name {
    font-size: 18px; 
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

/* 메타 정보 스타일 */
.construction-meta-info {
    font-size: 14px;
    color: #666666; /* 666666 색상 */
    margin-bottom: 5px;
    text-align: center;
}

/* 메타 정보 구분자 스타일 */
.construction-meta-info .meta-divider {
    color: #dddddd; /* dddddd 색상 */
    margin: 0 8px;
    font-weight: 300;
}


/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    
    .construction-gallery-list {
        /* 💥 모바일: 2열 배치 고정 💥 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
        margin-top: 30px ;
        margin-bottom: 40px;
		margin-left: 20px ;
		margin-right: 20px ;
    }

    .construction-info {
        padding: 10px;
    }
    
    .construction-name {
        font-size: 14px; 
        margin-bottom: 5px;
    }
    
    .construction-meta-info {
        font-size: 12px;
    }

	.construction-meta-info .meta-divider {
		margin: 0 0px;
	}

}


/* --- 생생 후기 리스트 컨테이너 (PC 4열, 모바일 2열 Grid) --- */
.construction-review-list {
    display: grid;
    /* 💥 PC: 4열 배치 💥 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; /* 아이템 간 간격 */
    margin-bottom: 80px;
}

.construction-review-item {
    display: block; /* <a> 태그 전체 영역 클릭 가능 */
    text-decoration: none;
    color: inherit;
    background-color: #fff;
    border-radius: 0px;
    border: 1px solid #dddddd;
    overflow: hidden;
    /* 호버 효과 (construction-gallery-list와 유사하게 설정) */
    transition: box-shadow 0.2s, transform 0.2s;
}

.construction-review-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* 이미지 영역 - 높이 220px 고정 */
.construction-review-image-wrap {
    width: 100%;
    height: 220px; 
    overflow: hidden;
}

.construction-review-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.construction-review-info {
    padding: 20px;
}

.construction-review-info h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}

/* 리뷰 텍스트 - 3줄 높이로 고정 및 숨김 */
.construction-review-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    height: 63px; /* 1.5 * 3줄 + margin 대략적인 높이 */
    overflow: hidden;
    margin-bottom: 15px;
}

.construction-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.construction-stars {
    color: #00a1e0;
    font-size: 18px;
    letter-spacing: -2px;
}

.construction-stars .star.filled {
    color: #00A1E0; /* 채워진 별 색상 */
}
.construction-stars .star.empty {
    color: #ddd;
}

.construction-reviewer {
    font-size: 14px;
    color: #666;
}

/* --- 모바일 반응형 스타일 (@media) --- */

@media (max-width: 768px) {
    
    .construction-review-list {
        /* 💥 모바일: 2열 배치 💥 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
        margin-bottom: 40px;
		margin-left:20px;
		margin-right:20px;
    }

    .construction-review-image-wrap {
        height: 150px; 
    }

    .construction-review-info {
        padding: 15px;
    }
    
    .construction-review-info h3 {
        font-size: 16px;
    }

    .construction-review-text {
        font-size: 13px;
        height: 60px; /* 모바일 텍스트 높이 조정 */
        margin-bottom: 10px;
    }
    
    .construction-stars {
        font-size: 16px;
    }
    
    .construction-reviewer {
        font-size: 13px;
    }
}

/* --- 공지사항 리스트 스타일 (customer_bbs_ 접두사) --- */

.customer-bbs-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

/* 333333 상단 라인 */
.customer-bbs-top-divider {
    width: 100%;
    height: 1px;
    background-color: #333333;
    margin-bottom: 10px; /* 헤더와의 간격 */
}

/* --- 게시판 헤더 (PC: 16px, 굵은 글씨) --- */
.customer-bbs-header {
    display: grid;
    /* PC 레이아웃: 번호(100px) | 제목(나머지) | 작성일(120px) */
    grid-template-columns: 100px 1fr 120px; 
    align-items: center;
    padding: 15px 0;
    font-weight: 700; /* 굵은 글씨 */
    font-size: 16px; /* PC 16px */
    color: #333333;
	border-top: 1px solid #333333; /* 헤더 아래 라인 */
    border-bottom: 1px solid #dddddd; /* 헤더 아래 라인 */
}

.customer-bbs-header-item {
    text-align: center;
}

.customer-bbs-header .customer-bbs-subject {
    text-align: left;
    padding-left: 20px;
}


/* --- 게시글 로우 공통 스타일 --- */
.customer-bbs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.customer-bbs-row {
    border-bottom: 1px solid #dddddd; /* DDDDDD 라인 */
}

.customer-bbs-link {
    display: grid;
    /* 로우 레이아웃은 헤더와 동일하게 유지 */
    grid-template-columns: 100px 1fr 120px;
    align-items: center;
    padding: 15px 0;
    text-decoration: none;
    color: #444;
    font-size: 15px;
    transition: background-color 0.2s;
}

.customer-bbs-row:not(.notice-row):hover .customer-bbs-link {
    background-color: #fafafa;
}

.customer-bbs-row .customer-bbs-no,
.customer-bbs-row .customer-bbs-date {
    text-align: center;
    color: #666;
}

.customer-bbs-row .customer-bbs-subject {
    text-align: left;
    padding: 0 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임표 적용 */
}

/* --- 공지사항 로우 스타일 --- */
.customer-bbs-list .notice-row {
    background-color: #f5f9fd; /* F5F9FD 배경색 */
    font-weight: 600;
}

.customer-bbs-list .notice-row .customer-bbs-link {
    color: #333;
}

.customer-bbs-list .notice-row .customer-bbs-no {
    color: #0391fe; /* 번호 대신 '공지' 표시, 색상 변경 */
    font-weight: 700;
}

/* 공지 태그 (제목 앞에 #0391FE) */
.notice-tag {
    color: #0391fe; /* 0391FE 색상 */
    margin-right: 10px;
    font-weight: 700;
    display: inline-block;
    min-width: 40px;
}


/* --- 모바일 반응형 (@media) --- */

@media (max-width: 768px) {


    
    .customer-bbs-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    /* 모바일 헤더: 작성일 숨김, 번호와 제목만 표시 */
    .customer-bbs-header {
        grid-template-columns: 50px 1fr; /* 번호(작아짐) | 제목 */
        font-size: 14px; /* 모바일 14px */
        padding: 10px 0;
    }
    
    .customer-bbs-header .customer-bbs-date {
        display: none; /* 작성일 숨김 */
    }
    
    .customer-bbs-header .customer-bbs-subject {
        padding-left: 10px;
    }

    /* 모바일 로우 */
    .customer-bbs-link {
        grid-template-columns: 50px 1fr; /* 번호 | 제목 */
        padding: 12px 0;
        font-size: 14px;
        display: flex; /* 제목, 작성일 정렬을 위해 flex로 변경 */
        flex-direction: column;
        align-items: flex-start;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .customer-bbs-row .customer-bbs-no {
        /* 모바일에서는 번호를 제목 줄과 분리하여 좌측에 고정 */
        position: absolute;
        width: 50px;
        left: 0;
        text-align: center;
        margin-top: 3px;
    }

    .customer-bbs-row .customer-bbs-link {
        /* Link 자체는 상대 위치 */
        position: relative;
        padding-left: 60px; /* 번호 영역 확보 */
        grid-template-columns: 1fr; /* 1열로 변경 */
    }

    .customer-bbs-row .customer-bbs-subject {
        text-align: left;
        padding: 0;
        order: 1; /* 제목이 먼저 나오도록 설정 */
        width: 100%;
    }

    .customer-bbs-row .customer-bbs-date {
        /* 작성일을 제목 아래에 표시 */
        display: block; 
        order: 2;
        text-align: left;
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }

    .notice-tag {
        font-size: 13px;
        margin-right: 5px;
    }
}

/* --- Q&A 리스트 스타일 (construction-qna_ 접두사) --- */

.construction-qna-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

/* 333333 상단 라인 */
.construction-qna-top-divider {
    width: 100%;
    height: 1px;
    background-color: #333333;
    margin-bottom: 20px;
}

.construction-qna-list {
    list-style: none;
    padding: 0;
    margin-top: -80px;
    border-top: 1px solid #333333; /* 리스트 최하단 라인 */
	border-bottom: 1px solid #dddddd; /* 리스트 최하단 라인 */
}

.construction-qna-item {
    border-top: 1px solid #cccccc; /* 각 항목 상단 라인 */
    cursor: pointer;
    overflow: hidden;
}

.construction-qna-header {
    display: flex;
    align-items: center;
    padding: 20px 0;
    transition: background-color 0.2s;
}

/* 호버 시 배경색 변경 */
.construction-qna-item:hover .construction-qna-header {
    background-color: #fcfcfc;
}

/* Q 라벨 및 A 라벨 공통 스타일 */
.qna-label {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%; /* 동그란 배경 */
    color: #ffffff; /* 흰색 글씨 */
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    margin: 0 10px;
}

.q-label, .a-label {
    background-color: #00a1e0; /* 00A1E0 파란색 배경 */
}

.construction-qna-header .qna-title {
    flex-grow: 1;
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

/* 토글 화살표 */
.qna-toggle-icon {
    font-size: 16px;
    color: #666;
    margin: 0 20px;
    width: 20px;
    text-align: center;
    transition: transform 0.3s;
    flex-shrink: 0;
}

/* --- 답변 내용 영역 --- */
.construction-qna-content {
    background-color: #f9f9f9; /* F9F9F9 배경색 */
    max-height: 0; /* 초기에는 닫힌 상태 */
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* 부드러운 애니메이션 */
}

.construction-qna-answer-wrap {
    display: flex;
    padding: 20px 0 20px 0;
}

.qna-answer-text {
    flex-grow: 1;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    padding-right: 40px;
}

/* 토글 화살표 컨테이너 */
.qna-toggle-icon {
    /* 텍스트 아이콘 대신 이미지에 맞게 크기 조정 */
    width: 19px; /* 이미지 크기에 맞춤 */
    height: 10px;
    margin: 0 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: 0; /* 이미지 정렬을 위해 line-height 제거 */
}

/* 💥 추가: 화살표 이미지 스타일 💥 */
.qna-toggle-icon .toggle-arrow {
    width: 100%;
    height: 100%;
    display: block;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .construction-qna-title {
        font-size: 28px;
    }

	
	.construction-qna-list {
		margin-left: 20px;
		margin-right: 20px;
	}

    
    .construction-qna-header {
        padding: 15px 0;
    }
    
    .qna-label {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        margin: 0 8px;
    }
    
    .construction-qna-header .qna-title {
        font-size: 16px;
    }
    
    .qna-toggle-icon {
        margin: 0 15px;
    }
    
    .qna-answer-text {
        font-size: 14px;
        padding-right: 20px;
    }

	.qna-toggle-icon {
        width: 20px; /* 모바일 크기 조정 */
        height: 20px;
        margin: 0 15px;
    }
}
/* --- 견적 신청 페이지 스타일 (quotation- 접두사) --- */

.quotation-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.quotation-subtitle {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
}

/* 💥 최상위 박스 스타일: Dddddd 라인, 흰색 배경, radius 10, 그림자 💥 */
.quotation-box-wrap {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #dddddd; /* Dddddd 라인 유지 */
    background-color: #ffffff; /* 배경 흰색 유지 */
    padding: 20px;
    border-radius: 10px; /* radius 10 적용 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); \

}

.quotation-form {
    padding: 0;
}

/* --- 섹션 스타일 --- */
.form-section {
    padding: 30px 0;
    margin-bottom: 0; 
    border-top: none;
}

.form-section:not(:first-child) {
    border-top: 1px solid #dddddd; /* 섹션 간 DDDDDD 라인 */
}

.form-section.last-section {
    border-bottom: 1px solid #eeeeee; 
}

/* 💥 섹션 제목 왼쪽 정렬 💥 */
.section-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    text-align: left; /* 왼쪽 정렬 */
}

/* --- 폼 로우 공통 스타일 --- */
.form-row {
    display: flex;
    align-items: center;
    padding: 15px 0; 
    border-bottom: 0px solid #eeeeee; /* 로우 구분선 */
}

.form-section.phone-section .form-row {
     border-bottom: 1px solid #dddddd; /* 로우 구분선 */
}

.form-section.last-section .content-row {
    border-bottom: none; /* 상세 요청 내용 로우 하단 라인 제거 */
}

.form-row:last-child {
    /* 특정 섹션의 마지막 로우만 */
    /* border-bottom: none; */ 
}

.form-label {
    width: 150px;
    flex-shrink: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.form-label.required::after {
    content: '*';
    color: #e00000;
    margin-left: 5px;
}

.form-input-group {
    flex-grow: 1;
}

/* 일반 입력 필드 */
.form-input-group input[type="text"],
.form-input-group input[type="tel"],
.form-input-group select,
.form-input-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-size: 15px;
    color: #444;
}

.form-input-group select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-24.8%200L146.2%20185.7%2030.2%2069.4a17.6%2017.6%200%200%200-24.8%2024.8l130.4%20130.5c6.8%206.8%2017.7%206.8%2024.5%200l130.4-130.5c6.9-6.9%206.9-17.7%200-24.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

.form-input-group textarea {
    resize: vertical;
}

/* --- 지역 선택 섹션 --- */
.location-select-row {
    display: flex;
    gap: 10px;
    padding: 0;
    border-bottom: none;
}

.location-select-row .form-input-group {
    flex-basis: 50%;
}

/* --- 평형 선택 및 희망 금액 선택 그룹 (3개씩) --- */
.size-group,
.price-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC: 3개씩 */
    gap: 10px;
    width: 100%;
}

/* --- 희망일 선택 그룹 (2개씩) --- */
.date-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 2개씩 */
    gap: 10px;
    width: 100%;
}

/* --- 네모 박스 버튼 공통 스타일 (라디오 버튼) --- */
.size-item-box,
.date-item-box,
.price-item-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid #dddddd; 
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    color: #444;
    background-color: #ffffff;
    transition: all 0.2s;
}

/* 라디오 버튼 숨김 */
.size-item-box input[type="radio"],
.date-item-box input[type="radio"],
.price-item-box input[type="radio"] {
    display: none;
}

/* 체크(선택)될 경우 버튼 스타일 */
.size-item-box input[type="radio"]:checked + .size-label,
.date-item-box input[type="radio"]:checked + .date-label,
.price-item-box input[type="radio"]:checked + .price-label {
    background-color: #00a1e0; 
    color: #ffffff; 
    border-color: #00a1e0; 
}

/* 라벨 (실제 보이는 텍스트 박스) 스타일 */
.size-item-box .size-label,
.date-item-box .date-label,
.price-item-box .price-label {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid transparent; 
    display: block;
    width: 100%;
    text-align: center;
    transition: all 0.2s;
}

/* --- 핸드폰 번호 섹션 (로우 정렬 재설정) --- */
.phone-section .form-row {
    padding: 0;
}
.phone-section .form-input-group {
    padding: 15px 0; /* 입력 필드에 직접 패딩 적용 */
}

/* --- 개인 정보 동의 및 버튼 영역 --- */
.agreement-section {
    padding: 20px 0;
    margin-bottom: 40px;
}

.agreement-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.agreement-row {
    padding: 8px 0;
    border-bottom: 0px solid #eeeeee; 
	text-align:left;
}

.agreement-row.all-agree-row {
    border-top: 0px solid #333333; /* 전체 동의 상단에 굵은 선 */
    padding-top: 15px;
}

.agreement-row.last-agreement-row {
    border-bottom: 0px solid #333333; /* 마지막 동의 하단에 굵은 선 */
    padding-bottom: 15px;
}

.agreement-text {
    font-size: 14px;
    color: #333;
    margin-left: 5px;
}

.all-agree-text {
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

.view-detail-link {
    font-size: 13px;
    color: #00a1e0;
    text-decoration: underline;
    margin-left: 10px;
}

.form-submit-wrap {
    text-align: center;
    padding-bottom: 80px;
}

.submit-button {
    width: 100%;
    max-width: 300px;
    padding: 15px 20px;
    background-color: #00a1e0; 
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-button:hover {
    background-color: #0088c0;
}


/* --- 모바일 반응형 (@media) --- */

@media (max-width: 768px) {


	.quotation-title {
		font-size: 20px;

	}


    .quotation-box-wrap {
        padding: 10px;
		margin-left:20px;
		margin-right:20px;
    }
    
    .form-section {
        padding: 20px 0;
    }

    .form-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
    }
    
    .form-label {
        width: 100%;
        margin-bottom: 5px;
        font-size: 15px;
    }
    
    .form-input-group {
        width: 100%;
    }
    
    .location-select-row {
        flex-direction: column;
    }
    
    .location-select-row .form-input-group {
        flex-basis: 100%;
        width: 100%;
    }

    /* 평형 및 금액 그룹 모바일 배치 (2개씩) */
    .size-group,
    .price-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    /* 희망일 그룹 모바일 배치 (2개씩 유지) */
    .date-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .size-item-box, 
    .date-item-box,
    .price-item-box {
        padding: 8px;
        font-size: 14px;
    }
    
    .agreement-title {
        font-size: 16px;
    }
    
    .agreement-text, .view-detail-link {
        font-size: 13px;
    }
    
    .all-agree-text {
        font-size: 15px;
    }

    .form-section.phone-section .form-row {
        padding: 0;
    }
    .phone-section .form-input-group {
        padding: 10px 0;
    }
}


.submit-button.image-button {
    width: 100%;
    max-width: 100%; /* PC/Desktop에서 최대 너비 */
    
    /* 이미지 버튼이므로 배경/테두리/패딩 제거 */
    padding: 0; 
    background: none; 
    border: none; 
    
    cursor: pointer;
    transition: opacity 0.2s; /* 호버 효과를 위한 트랜지션 */
    
    /* IE/Edge에서 이미지 버튼 클릭 시 생기는 파란색 테두리 방지 */
    outline: none; 
}

/* 호버 시 약간의 투명도 효과 (클릭 가능한 느낌 부여) */
.submit-button.image-button:hover {
    opacity: 0.9; 
}

/* 이미지 자체 스타일 */
.submit-image {
    width: 100%; /* 버튼 컨테이너 (max-width: 300px)에 맞춰 이미지 크기 조정 */
    height: auto;
    display: block; /* 이미지 하단 미세한 공백 방지 */
}

@media (max-width: 768px) {
    /* 모바일에서 버튼 너비는 100%로 설정하되, 컨테이너 너비를 넘지 않음 */
    .submit-button.image-button {
        max-width: 100%; 
    }
}

/* --- 견적 신청 완료 페이지 스타일 --- */

.success-page {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 상단 정렬 (화면 높이 전체 기준) */
    min-height: 50vh; /* 최소 높이 설정 */
    padding: 100px 20px;
    text-align: center;
}

.success-box-wrap {
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 💥 완료 아이콘 스타일 (80x80) 💥 */
.success-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 30px; /* PC: 30px */
}

/* --- 메시지 스타일 --- */
.success-message-wrap {
    margin-bottom: 40px;
}

/* 💥 제목 스타일 (333333, 모바일 20px) 💥 */
.success-title {
    font-size: 30px; 
    font-weight: 700;
    color: #333333;
    margin-bottom: 15px;
}

/* 💥 본문 스타일 (666666, 18px, 모바일 14px) 💥 */
.success-text {
    font-size: 18px; 
    color: #666666;
    line-height: 1.6;
}

/* 💥 메인으로 이동 버튼 스타일 💥 */
.main-button {
    display: block;
    width: 100%;
    max-width: 250px; 
    padding: 15px 20px;
    text-decoration: none;
    
    /* 배경 333333, 글자 흰색 */
    background-color: #333333;
    color: #ffffff;
    
    font-size: 18px;
    font-weight: 700;
    
    border-radius: 10px; /* radius 10 적용 */
    transition: background-color 0.2s;
}

.main-button:hover {
    background-color: #555555;
}


/* --- 모바일 반응형 (@media) --- */

@media (max-width: 768px) {
    
    .success-page {
        padding: 60px 20px;
        min-height: 40vh;
    }
    
    /* 💥 모바일 아이콘 하단 마진 20px 💥 */
    .success-icon {
        margin-bottom: 20px; 
    }
    
    /* 💥 모바일 제목 20px 💥 */
    .success-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    /* 💥 모바일 본문 14px 💥 */
    .success-text {
        font-size: 14px;
    }
    
    .main-button {
        padding: 12px 15px;
        font-size: 16px;
    }
}


/* --- 개인정보 처리방침 페이지 스타일 --- */

/* 페이지 컨테이너 기본 설정 */
.privacy-policy-wrap {
    max-width: 900px; /* 적절한 가독성을 위한 최대 너비 설정 */
    margin: 90px auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* 💥 메인 타이틀 스타일 (44px, #333333, 중앙 정렬) 💥 */
.policy-title {
    font-size: 44px;
    font-weight: 700;
    color: #333333;
    text-align: center; /* 중앙 정렬 */
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eeeeee;
}

/* 최종 개정일 */
.last-updated {
    font-size: 14px;
    color: #999;
    text-align: right;
    margin-bottom: 30px;
}

/* --- 내용 영역 스타일 --- */
.policy-content {
    line-height: 1.8;
    color: #444;
}

.policy-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 40px 0 15px;
    border-left: 5px solid #00a1e0;
    padding-left: 10px;
}

.policy-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 30px 0 10px;
}

.policy-content p {
    font-size: 16px;
    margin-bottom: 15px;
}

.policy-content ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 10px;
    margin-bottom: 20px;
}

.policy-content ul li {
    font-size: 16px;
    margin-bottom: 5px;
}

/* 표 스타일 */
.policy-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.policy-content th,
.policy-content td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.policy-content th {
    background-color: #f7f7f7;
    font-weight: 600;
    color: #333;
}


/* --- 모바일 반응형 (@media) --- */

@media (max-width: 768px) {
    .privacy-policy-wrap {
        padding: 40px 15px;
    }
    
    /* 모바일 타이틀 크기 조정 */
    .policy-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .policy-content h2 {
        font-size: 20px;
        margin: 30px 0 10px;
    }

    .policy-content p,
    .policy-content ul li {
        font-size: 15px;
    }
    
    /* 모바일에서 표의 가로 스크롤 가능하도록 처리 */
    .policy-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}