/* style.css 파일의 Sub Page Visual Styles 섹션 (수정됨) */

/* ================================================================= */
/* 12. Sub Page Visual Styles */
/* ================================================================= */

.sub-visual-area {
    /* 🌟 Full Width 및 Height 500px */
    width: 100%;
    height: 500px; 
    
    /* 공통 배경 스타일 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* GNB 헤더 영역만큼 Content를 아래로 내림 */
    padding-top: var(--header-height); 
    box-sizing: border-box; 
    
    /* Flexbox로 타이틀 중앙 정렬 */
    display: flex;
    justify-content: center; 
    align-items: center; 

}

/* 🌟 메뉴별 배경 이미지 정의 (회사소개 페이지) 🌟 */
.sub-visual-area.sub-about-us {
    background-image: url('/assets/img/sub-visual-about.png'); 
}

.sub-visual-area.sub-technology {
    background-image: url('/assets/img/sub-visual-technology.png'); 
}

.sub-visual-area.sub-visual-customer {
    background-image: url('/assets/img/sub-visual-customer.png'); 
}

.sub-visual-area.sub-visual-employment {
    background-image: url('/assets/img/sub-visual-employment.png'); 

}

.sub-visual-area.sub-visual-product {
    background-image: url('/assets/img/sub-visual-product.png');
	
}




/* 🌟 타이틀 스타일 (회사소개 타이틀 60px 볼드) */
.sub-visual-area .sub-title {
    font-size: 60px; 
    font-weight: 700; /* 볼드 */
    color: var(--white); 
    /* 기존 margin: 0; 대신 위로 20px 올리는 margin-top: -20px;을 추가합니다. */
    margin: 0; /* 기존 마진 유지 */
    /* ------------------------------------- */
    /* 👇 20px 위로 올리기 위한 수정 사항 👇 */
    /* ------------------------------------- */
    margin-top: -100px; /* 기존 중앙 정렬 기준에서 위로 20px 이동 */
    /* ------------------------------------- */
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 가시성 확보를 위한 그림자 추가 */
	border:0px solid yellow;
}

@media (max-width: 768px) {
    
    /* ---------------------------------------------------- */
    /* 1. 서브 비주얼 영역 (.sub-visual-area) 모바일 조정 */
    /* ---------------------------------------------------- */
    .sub-visual-area {
        height: 230px; /* 🌟 요청하신 높이 230px 적용 */
        
        /* 짤림 방지 최적화: cover를 유지하여 영역을 채우고, 중앙을 중심으로 표시 */
        background-size: cover; 
        background-position: center center; /* 이미지가 잘리더라도 중앙이 보이도록 보장 */
        
        /* height 230px에 맞게 상단 패딩 제거 (Flexbox로 타이틀이 중앙에 위치하도록) */
        padding-top: 0; 
		border:0px solid yellow;
    }

    /* 2. 서브 타이틀 (.sub-title) 모바일 조정 */
   .sub-visual-area .sub-title {
		margin-top:30px;
        font-size: 30px; /* 🌟 요청하신 타이틀 크기 30px 적용 */
        line-height: 1.3;
    }
}

/* style.css 파일의 Sub Navigation Bar Styles 섹션 (수정됨) */

/* ================================================================= */
/* 13. Sub Navigation Bar Styles */
/* ================================================================= */
/* 🌟 Full Width 컨테이너 (배경 및 상/하 보더 담당) 🌟 */

/* Full Width 컨테이너 (배경 및 상/하 보더 담당) */
.sub-nav-bar-full {
    /* Sub Visual 하단 50px 간격 및 Sub Content 50px 간격 유지 */
    margin-top: 50px; 
    margin-bottom: 50px; 
    
    /* 배경과 상/하 보더는 Full Width를 사용 */
    background-color: var(--white); 
    border-top: 1px solid #dddddd; 
    border-bottom: 1px solid #dddddd;
}

/* 🌟 1400px 중앙 정렬 Wrapper */
.sub-nav-links-wrapper {
    /* main-wrapper 클래스가 이미 max-width: 1400px; margin: 0 auto;를 담당함 */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center; 
    
    /* 🌟 메뉴바가 1400px 영역을 꽉 채우도록 설정 */
    width: 100%; 
    padding: 0; /* main-wrapper의 좌우 padding 제거 */
}

/* 🌟 메뉴 항목 컨테이너 (균등 분할을 위한 Flexbox 설정) 🌟 */
.sub-nav-links {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0; 
    
    /* 🌟 1400px 내에서 모든 공간을 채우도록 flex-grow: 1 적용 */
    width: 100%;
    flex-grow: 1;
}

/* 🌟 메뉴 항목 (갯수만큼 자동 분배) 🌟 */
.sub-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; 
    
    /* 🌟 핵심 수정: 각 메뉴 항목이 공간을 균등하게 나누어 가지도록 설정 */
    flex-grow: 1; /* 모든 항목이 남은 공간을 균등하게 차지 */
    flex-shrink: 0; 
    
    /* 텍스트 내용 길이와 상관없이 너비 균등 분배 */
    padding: 0; 
    
    /* 메뉴 항목 스타일 유지 */
    border-right: 1px solid #dddddd; 
    background-color: var(--white); 
    color: var(--text-dark); 
    font-size: 18px;
    font-weight: 500;
    transition: all 0.2s;
}

/* 첫 번째 항목은 왼쪽 보더도 가집니다. */
.sub-nav-links .sub-nav-item:first-child {
    border-left: 1px solid #dddddd; 
}

/* 🌟 선택된 상태: 배경 0391FE, 텍스트 FFFFFF */
.sub-nav-item.active {
    background-color: var(--color-blue); 
    color: var(--white); 
    font-weight: 700;
    /* Active 항목의 보더를 강조하거나 유지 */
    border-color: var(--color-blue); 
}



/* 첫 번째 항목은 왼쪽 보더도 가집니다. */
.sub-nav-links .sub-nav-item:first-child {
    border-left: 1px solid #dddddd; 
}

/* 첫 번째 항목은 왼쪽 보더도 가집니다. */
.sub-nav-links .sub-nav-item:first-child {
    border-left: 1px solid #dddddd; 
}

/* 🌟 선택된 상태: 배경 0391FE, 텍스트 FFFFFF */
.sub-nav-item.active {
    background-color: var(--color-blue); 
    color: var(--white); 
    font-weight: 700;
    /* Active 상태에서는 보더를 강조하거나 유지 */
    border-color: var(--color-blue); /* Active 항목의 보더를 강조 */
}

/* 🌟 Active 항목의 다음 항목 보더를 덮어쓰거나 조정할 필요가 있을 수 있지만, 
   현재는 Active 항목만 스타일을 바꾸고 보더는 DDDDDD를 유지하여 메뉴바처럼 보이게 합니다. 
   Active 항목의 보더를 #0391FE로 바꾸면, 옆 메뉴와의 구분이 더 명확해집니다. */


@media (max-width: 1023px) {
    
   
    .sub-nav-bar-full {
        margin-top: 30px; /* 모바일에서 상단 여백 축소 */
        margin-bottom: 30px; /* 모바일에서 하단 여백 축소 */
        border: none; /* 모바일에서는 Full-width 바의 상하 보더 제거 (각 항목에 보더를 넣을 예정) */
    }
    
    .sub-nav-links-wrapper {
        height: auto;
        /* 1400px 영역을 사용하지만, 내부 메뉴는 100% 폭을 사용하도록 정렬 */

    }

    /* 🌟 핵심 수정: 메뉴 항목을 세로로 정렬하고 Full Width 사용 */
    .sub-nav-links {
        height: auto;
        flex-direction: column; /* 🌟 세로로 떨어뜨림 (Stacking) */
        width: 100%; /* 부모(1400px) 영역 내에서 Full Width 사용 */
        
        /* 세로로 떨어뜨릴 때 중앙 정렬은 의미 없음 */
        align-items: flex-start; 
        gap: 0; /* 항목 간 간격 제거 (margin으로 조정) */
    }

    .sub-nav-item {
        /* 🌟 100% 너비 사용 */
        width: 98%; 
        height: 50px; /* 항목별 높이 지정 */
        
        /* 🌟 세로로 떨어지므로, 균등 분배(flex-grow: 1) 대신 100% 너비 사용 */
        flex-grow: 0; 
        
        /* 🌟 텍스트는 왼쪽 정렬 */
        justify-content: flex-start; 
        padding-left: 0px;
        
        /* 🌟 항목별 보더와 간격 설정 */
        border: 1px solid #dddddd; 
        border-bottom: none; /* 마지막 항목을 제외하고 하단 보더 제거 */
        margin-bottom: -1px; /* 항목 간 겹침 방지 */
        
        font-size: 16px; /* 폰트 크기 조정 */
    }
    
    /* 🌟 마지막 항목의 하단 보더만 표시 */
    .sub-nav-links .sub-nav-item:last-child {
        border-bottom: 1px solid #dddddd; 
        margin-bottom: 0;
    }
    
    /* 첫 번째 항목의 왼쪽 보더 제거 (100% 너비 박스이므로) */
    .sub-nav-links .sub-nav-item:first-child {
        border-left: 1px solid #dddddd; 
    }
    

	 .sub-nav-links a{padding-left:10px;}
    /* Active 상태 스타일 유지 */
    .sub-nav-item.active {
        background-color: var(--color-blue); 
        color: var(--white); 
        border-color: var(--color-blue);
    }
}


* ================================================================= */

.sub-content-wrapper {
    /* 기존 스타일 유지 */
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: 500px;
	overflow: visible; 
}

@media (max-width: 1023px) {

	.sub-content-wrapper {
		/* 기존 스타일 유지 */
		padding-top: 0px;
		padding-bottom: 30px;

	}



}

.content-page-header {
    display: flex;
    flex-direction: column;
    align-items: center; /* 🌟 모든 요소 중앙 정렬 */
    text-align: center;
    margin: 80px 0 10px; /* 다음 콘텐츠와의 간격 */
}

/* 🌟 sub_line.png 이미지 */
.page-header-line {
    width: auto; /* 이미지 원본 크기 사용 */
    height: auto;
    margin-bottom: 15px; /* 타이틀과의 간격 */
}

/* 🌟 about us 타이틀 스타일 */
.page-header-title {
    font-family: 'Poppins', sans-serif; /* 🌟 Poppins 폰트 적용 */
    font-size: 18px; /* 🌟 18px */
    font-weight: 500; /* Poppins 폰트의 중간 두께 */
    color: var(--color-blue); /* 🌟 #0391FE */
	letter-spacing:10px;

}

@media (max-width: 1023px) {

	.content-page-header {
		margin: 30px 0 10px; /* 다음 콘텐츠와의 간격 */

	}


	.page-header-line {
		height: 30px;
		margin-bottom: 10px; /* 타이틀과의 간격 */
	}


	.page-header-title {
		font-size: 16px;
	}


}

.mobile-only {
    display: none !important;
}

/* ================================================================= */
/* 15. Company Introduction Content Styles */
/* ================================================================= */

.company-intro-content {
    /* 중앙 정렬을 위해 텍스트 정렬 설정 */
    text-align: center;

    padding-bottom: 80px; /* 섹션 하단 여백 */
}

/* 🌟 타이틀 슬로건 (SUIT 40px bold 333333, 중앙 정렬) */
.intro-slogan {
    font-family: 'SUIT', sans-serif;
    font-size: 40px; /* 🌟 40px */
    font-weight: 700; /* 🌟 볼드 */
    color: var(--text-dark); /* 🌟 #333333 */
    line-height: 1.5;
    margin: 0 auto 50px auto; /* 하단에 50px 간격 */
    max-width: 1000px; /* 너무 넓게 퍼지지 않도록 최대 너비 설정 */
	letter-spacing:-2px;
}




/* 🌟 회사 소개 본문 (20px, 중앙 정렬) */
.intro-description {
    font-family: 'SUIT', sans-serif;
    font-size: 20px; /* 🌟 20px */
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.8;
    margin: 0 auto;
    max-width: 1200px; /* 본문이 너무 넓게 퍼지지 않도록 */
}

/* 🌟 하이라이트 텍스트 (#0391FE) */
.intro-description .highlight-blue {
    color: var(--color-blue); /* 🌟 #0391FE */
    font-weight: 700;
}

/* 모바일 조정 */
@media (max-width: 768px) {

	 /* PC용 요소를 숨김 */
    .pc-only {
        display: none !important;
    }

    /* 모바일 전용 요소를 표시 */
    .mobile-only {
        display: block !important; /* 또는 flex, grid 등 해당 요소에 맞는 display 값 */
    }

	.company-intro-content {

		padding-bottom: 40px; /* 섹션 하단 여백 */
	}


    .intro-slogan {
        font-size: 28px;
        line-height: 1.4;
        margin-bottom: 30px;
    }
    .intro-description {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* ================================================================= */
/* 16. Company Bottom Image Styles */
/* ================================================================= */

.company-bottom-image-area {
    /* 중앙 정렬 */
    text-align: center;
    
    /* 상단 콘텐츠와의 간격 (company-intro-content의 padding-bottom을 대체) */
    margin-top: -50px; /* intro-content의 padding-bottom을 줄여 간격 조정 */
    margin-bottom: 80px; /* 다음 섹션과의 간격 */
}

.company-bottom-image {
    /* 이미지를 중앙에 배치하기 위해 block 요소로 설정하고 margin auto 사용 */
    display: block; 
    margin: 0 auto;
    width: 100%; /* 너비를 1400px 내에서 100% 사용 (필요시 최대 너비 지정 가능) */
    height: auto;
    
    /* 이미지 자체가 1400px 컨테이너를 벗어나지 않도록 max-width 설정 */
    max-width: 1400px;
}


/* ================================================================= */
/* 16. Management Philosophy Styles */
/* ================================================================= */

.management-philosophy-section {
    padding: 0px 0px 400px;; /* 상하 여백 */
    width: 100%;
}

.philosophy-row-wrapper {
    /* 🌟 아이템 중앙 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.philosophy-item-row {
    /* 🌟 3개 아이템 가로 배치 및 간격 설정 */
    display: flex;
    gap: 30px; /* 아이템 사이 간격 조정 */
    max-width: 900px; /* 275px * 3 + 30px * 2 = 885px */
    width: 100%;
    justify-content: center;
}

.philosophy-item {
    /* 🌟 요청된 아이템 크기 */
    width: 275px;
    min-width: 275px; /* 축소 방지 */
    height: 456px;
    
    /* 🌟 내부 요소 중앙 정렬을 위한 Flexbox 설정 */
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    justify-content: center; /* 세로 중앙 정렬 (내부 콘텐츠가 꽉 차지 않을 경우) */
    text-align: center;
    
    /* 디자인 추가 (예: 흰색 배경) */
    background-color: #ffffff;
  
    padding: 20px; /* 내부 패딩 */
   
}

/* 🌟 내부 이미지 스타일 */
.philosophy-icon {
    /* 74px x 80px 이미지 */
    width: 74px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px; /* 아래 240px 이미지와 간격 */
	border:0px solid yellow;
}

.philosophy-image-main {
    /* 240px x 240px 이미지 */
    width: 240px;
    height: 240px;
    object-fit: cover;
    margin-bottom: 25px; /* 아래 텍스트와 간격 */
    border-radius: 50%; /* 이미지를 원형으로 만들 경우 */
}

/* 🌟 내부 텍스트 스타일 */
.philosophy-text {
    /* 요청된 텍스트 스타일 */
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    line-height: 1.5;
    word-break: keep-all; /* 줄바꿈 자연스럽게 */
}

/* 🌟 obje.png 배경 스타일 (Full Width로 변경) 🌟 */
.philosophy-row-wrapper::before {
    content: '';
    position: absolute;
    bottom: 200px; /* 150px 밑에 배경 시작 */
    
    /* 🌟 핵심 수정: Full Width 배치 */
    left: 0; /* 왼쪽 끝에 배치 */
    right: 0; /* 오른쪽 끝까지 확장 */
    width: 100%; /* 화면 전체 너비 사용 */
    transform: none; /* 중앙 정렬용 transform 제거 */
    
    height: 600px; /* 배경 높이 지정 */
    
    background-image: url('/assets/img/obje.png'); 
    background-size: cover; /* Full Width에 맞게 커버하도록 변경 */
    background-repeat: no-repeat;
    background-position: center top;
    z-index: -1; 
}

/* 모바일 대응 (옵션) */
@media (max-width: 960px) {

	.management-philosophy-section {
		padding: 40px 0px 200px;; /* 상하 여백 */

	}

	.philosophy-item {
    /* 🌟 요청된 아이템 크기 */
    width: 238px;
    min-width: 289px; /* 축소 방지 */
    height: 289px;
   
    padding: 20px; /* 내부 패딩 */
   
}


    .philosophy-item-row {
        flex-direction: column; /* 아이템 세로로 배치 */
        align-items: center;
    }
    .philosophy-item {
        margin-bottom: 30px;
    }
	.philosophy-row-wrapper::before {
		display:none;
	}

	.philosophy-icon {

		width: 56px;
		height: 60px;

	}

	.philosophy-image-main {
		/* 240px x 240px 이미지 */
		width: 130px;
		height: 130px;
		object-fit: cover;
		margin-bottom: 10px; /* 아래 텍스트와 간격 */

	}

	.philosophy-text {
    /* 요청된 텍스트 스타일 */
		font-size: 18px;
		line-height: 1.2;

	}

}





/* ================================================================= */
/* 17. Vision and Mission Styles */
/* ================================================================= */
.vision-mission-section {
    padding: 0 0 60px;;
    text-align: center;
}

/* Flex 컨테이너: 아이템을 가로로 배열 */
.vision-image-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* 아이템과 구분선 사이의 간격을 통합 관리 */
    max-width: 1200px;
    margin: 0 auto;
	border:0px solid yellow;
}

/* 🌟 비전 아이템 컨테이너 */
.vision-item {
    /* 🌟 전체 아이템 크기: 300px * 388px */
    width: 300px;
    height: 388px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* 크기 유지 */
    text-align: center;
}

/* 🌟 아이템 이미지 */
.vision-item-image {
    /* 🌟 이미지 크기: 300px * 300px */
    width: 300px;
    height: 300px;
    object-fit: contain; /* 이미지가 잘리지 않도록 */
    margin-bottom: 20px;
}

/* 🌟 메인 텍스트 (Poppins, 22px) */
.vision-item-title {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #333333; /* 예시: 파란색 */
    line-height: 1.2;
    margin: 0;
}

/* 🌟 서브 텍스트 (SUIT, 18px) */
.vision-item-text {
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.2;
    margin-top: 5px;
}

/* 🌟 구분선 공통 스타일 */
.vision-separator {
    width: auto;
    height: auto;
    object-fit: contain;
}

/* PC 구분선 (vision_line.png): 세로 라인 */
.vision-separator.pc-only {
    display: block;
    height: 1px; /* 구분선 이미지 높이에 맞춤 */
    width: auto;
}

/* 모바일 구분선은 PC에서 숨김 */
.vision-separator.mobile-only {
    display: none;
}


/* ================================================================= */
/* @media (max-width: 768px) - 모바일 대응 */
/* ================================================================= */
@media (max-width: 768px) {
    .vision-mission-section {
        padding: 40px 0;
    }

    /* 🌟 Flex 컨테이너: 아이템을 세로로 배치 (밑으로 떨어짐) */
    .vision-image-row {
        flex-direction: column;
        gap: 0; /* 개별 마진으로 간격 제어 */
        padding: 0 20px;
    }

    /* 🌟 PC용 가로 구분선 숨김 */
    .vision-separator.pc-only {
        display: none;
    }
    
    /* 🌟 모바일용 세로 구분선 표시 */
    .vision-separator.mobile-only {
        display: block;
        width: 1px; /* 모바일 세로 라인 이미지의 너비 */
        height: auto;
        margin: 25px auto; /* 위아래 간격 */
    }

    /* 🌟 비전 아이템 간격 */
    .vision-item {
        width: 100%; /* 너비 전체 사용 */
        height: auto; /* 높이 자동 조절 */
    }

    /* 🌟 아이템 이미지 크기 축소 */
    .vision-item-image {
        width: 200px;
        height: 200px;
        margin-bottom: 15px;
    }

    /* 텍스트 크기 모바일 조정 */
    .vision-item-title {
        font-size: 20px;
    }
    .vision-item-text {
        font-size: 16px;
    }

    /* 마지막 아이템 아래 구분선 숨김 (선택 사항) */
    .vision-item:last-of-type + .vision-separator.mobile-only {
        display: none;
    }
}

/* ================================================================= */
/* 18. Mission Section Styles */
/* ================================================================= */
.mission-section-full-width {
    padding: 10px 0 100px;
    background-color: #f7f7f7; /* 배경색 예시 */
    text-align: center;
}

/* 미션 항목 컨테이너: 가로 배열 */
.mission-image-row {
    display: flex;
    justify-content: space-between;
    
    /* 🌟 수정 사항: 최대 너비와 중앙 정렬 */
    max-width: 1200px;
    margin: 0 auto;
    
    gap: 30px; 
    padding-top: 40px;
}

/* 🌟 미션 아이템 */
.mission-item {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
}

/* 🌟 이미지 (300px * 300px) */
.mission-item-image {
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin-bottom: 30px;
}

/* 🌟 타이틀 (SUIT 30px) */
.mission-item-title {
    font-family: 'SUIT', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0;
}

/* 🌟 텍스트 (SUIT 18px) */
.mission-item-text {
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #666;
    line-height: 1.5;
    margin-top: 10px;
}


/* ================================================================= */
/* @media (max-width: 768px) - 모바일 대응 */
/* ================================================================= */
@media (max-width: 768px) {
    .mission-section-full-width {
        padding: 40px 0;
    }
    
    /* 🌟 미션 항목 컨테이너: 세로 배열 */
    .mission-image-row {
        flex-direction: column;
        gap: 40px; /* 세로 간격 조정 */
        padding: 20px 0;
    }
    
    /* 🌟 미션 아이템: 너비 100% 사용 */
    .mission-item {
        width: 100%;
    }
    
    /* 🌟 이미지 크기 축소 */
    .mission-item-image {
        width: 250px;
        height: 250px;
        margin: 0 auto 20px; /* 중앙 정렬 */
    }

    /* 텍스트 크기 모바일 조정 */
    .mission-item-title {
        font-size: 24px;
        line-height: 1.3;
    }
    .mission-item-text {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* ================================================================= */
/* 19. Value Section Styles */
/* ================================================================= */
.value-section {
    width: 100%;
    /* 섹션의 최소 높이를 확보하여 내용이 잘 보이도록 합니다. */
    min-height: 500px; 
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    padding: 0px 0 150px;
	margin-top:-70px;
}

/* 🌟 1. 맨 바깥: value_out_line.png */
.value-out-line {
    /* ⚠️ 이미지 실제 크기에 맞춰 수정 (예시: 600px) */
    width: 624px; 
    height: 624px;
    
    /* 내부 요소 정렬을 위해 position: relative 설정 */
    position: relative;
    
    /* 배경 이미지 설정 */
    background-image: url('/assets/img/value_out_line.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    
    /* 🌟 중앙 정렬 (flexbox를 사용하므로 center에 의해 이미 중앙에 위치) */
    flex-shrink: 0;
}

/* 🌟 2. 중간: value_inner_line.png */
.value-inner-line {
    /* ⚠️ 이미지 실제 크기에 맞춰 수정 (예시: 400px) */
    width: 288px; 
    height: 288px;
    
    /* 부모(.value-out-line) 기준으로 중앙에 배치 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 내부 로고 이미지 중앙 정렬을 위해 Flexbox 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 배경 이미지 설정 */
    background-image: url('/assets/img/value_inner_line.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

	/* 🌟 추가: 원형 그림자 효과를 위해 50% 지정 */
    border-radius: 50%; 
     z-index: 2; 
  
}

.value-inner-line::after {
    content: '';
    position: absolute;
    /* 부모와 동일한 위치 및 크기 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1; /* 내부 라인 이미지보다 아래에 배치 */
    
    /* 🌟 Wave 애니메이션 적용 🌟 */
    animation: wave-pulse 3s infinite ease-out; 
}

/* 🌟 3. 가장 안쪽: value_logo.png */
.value-logo {
    /* ⚠️ 이미지 실제 크기에 맞춰 수정 (예시: 200px) */
    width: 178px;
    height: 134px;
    object-fit: contain;
    display: block;
}

/* UL 컨테이너: 부모(.value-out-line) 영역 전체를 덮습니다. */
.value-items-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none; /* 리스트 점 제거 */
    padding: 0;
    margin: 0;
}


.value-items-list li:nth-child(2){
	margin-left:10px;
}


/* 🌟 LI 아이템 공통 스타일 */
.value-item {
    position: absolute;
    z-index: 10;
    width: 500px; /* 라인+아이콘+텍스트를 위한 충분한 너비 확보 */
    display: flex; /* Flexbox 활성화 */
    align-items: center; /* 수직 중앙 정렬 */
    padding: 0;
}

.value-line-img0 {
    order: 2;
    width: 94px;
    height: 16px;
    background-image: url('/assets/img/value_line0.png'); 
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
}

.value-line-img1 {
    order: 2;
    width: 96px;
    height: 16px;
    background-image: url('/assets/img/value_line1.png'); 
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;

}

.value-line-img2 {
    order: 2;
    width: 94px;
    height: 16px;
    background-image: url('/assets/img/value_line2.png'); 
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
}

.value-line-img3 {
    order: 2;
    width: 96px;
    height: 16px;
    background-image: url('/assets/img/value_line3.png'); 
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
}

  .value-line-img0,
    .value-line-img1,
    .value-line-img2,
    .value-line-img3 {

        background-repeat: no-repeat; /* repeat-y 대신 no-repeat으로 변경 (모바일 이미지에 맞게) */
        background-position: center;
        background-size: cover;
        flex-shrink: 0;
        margin: 25px -20px !important; /* 🌟 아이콘과 콘텐츠 사이 간격 */
  
    }

.value-item-icon {
    width: 130px; 
    height: 130px;
    flex-shrink: 0;
}

.value-item-content {
    /* 텍스트 컨테이너 */
	margin-top:120px;
	margin-left:20px;
	margin-right:20px;
    text-align: center;
	border:0px solid yellow;
}

.value-item-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-color); /* #333333 */
    display: block;
    margin-bottom: 5px;
}

.value-item-title-sub {
    font-size: 14px;
    color: #999999
    display: block;
    margin-bottom: 5px;
}

.value-item-text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    word-break: keep-all;
}

/* -------------------------------------- */
/* LEFT SIDE ITEMS: [텍스트] [라인] [아이콘] */
/* -------------------------------------- */
.value-item.top-left,
.value-item.bottom-left {
    flex-direction: row; 
    /* 정렬: 오른쪽으로 밀착 (중앙 구조 쪽) */
    justify-content: flex-end; 
}

/* 1. Text Box (HTML order 1) -> Display order 1 */
.value-item.top-left .value-item-content,
.value-item.bottom-left .value-item-content {
    order: 1;
    text-align: right; /* 라인/아이콘 쪽에 붙도록 오른쪽 정렬 */
    padding-right: 15px; /* 라인 이미지와 간격 */
}

/* 3. Icon (HTML order 3) -> Display order 3 */
.value-item.top-left .value-item-icon,
.value-item.bottom-left .value-item-icon {
    order: 3;
    margin-left: 15px; /* 라인 이미지와 간격 */
}

/* -------------------------------------- */
/* RIGHT SIDE ITEMS: [아이콘] [라인] [텍스트] */
/* -------------------------------------- */
.value-item.top-right,
.value-item.bottom-right {
    flex-direction: row; 
    /* 정렬: 왼쪽으로 밀착 (중앙 구조 쪽) */
    justify-content: flex-start;
}

/* 3. Icon (HTML order 3) -> Display order 1 */
.value-item.top-right .value-item-icon,
.value-item.bottom-right .value-item-icon {
    order: 1;
    margin-right: 15px; /* 라인 이미지와 간격 */
}

/* 1. Text Box (HTML order 1) -> Display order 3 */
.value-item.top-right .value-item-content,
.value-item.bottom-right .value-item-content {
    order: 3;
    text-align: left; /* 라인/아이콘 쪽에 붙도록 왼쪽 정렬 */
    padding-left: 15px; /* 라인 이미지와 간격 */
}


/* 1. 왼쪽 위 (Top-Left) */
.value-item.top-left {
    top: 150px; 
    left: -80px;
    /* 아이템 너비의 절반만큼 왼쪽/위로 밀어내 중앙 라인에서 시작하도록 조정 */
    transform: translate(-50%, -50%); 
}

/* 2. 오른쪽 위 (Top-Right) */
.value-item.top-right {
    top: 150px; 
    right: -80px;
    transform: translate(50%, -50%);
}

/* 3. 왼쪽 아래 (Bottom-Left) */
.value-item.bottom-left {
    bottom: 150px; 
    left: -80px;
    transform: translate(-50%, 50%);
}

/* 4. 오른쪽 아래 (Bottom-Right) */
.value-item.bottom-right {
    bottom: 150px; 
    right: -80px;
    transform: translate(50%, 50%);
}


/* ================================================================= */
/* @media (max-width: 768px) - 핵심가치 섹션 모바일 대응 */
/* ================================================================= */
@media (max-width: 768px) {
    
    /* 1. Value Section: 컬럼 방향으로 변경 (기존 유지, 하지만 min-height 조정) */
    .value-section {
        flex-direction: column;
        min-height: 700px; /* 기존 유지, 필요시 조정 */
        padding: 250px 0 0 0;
        align-items: center; /* 세로 중앙 정렬 */
        /* border: 1px solid yellow; */ /* 디버깅용, 실제로는 제거 */
		margin-bottom:50px;
    }

    /* 2. 중앙 원형 구조 (PC 절대 위치 구조) 축소 및 블록화 */
    .value-out-line {
        top: -450px;
        width: 90%; /* 모바일 크기로 축소 */
        height: 228px;
        margin: 0 auto 40px; 
    }
    
    /* 2-1. 내부 라인 및 로고 크기 조정 */
    .value-inner-line {
        width: 140px;
        height: 140px;
    }
    .value-logo {
        width: 81px;
        height: 61px;
    }
    /* 2-2. 중앙 구조의 파장 애니메이션 위치 보정 (필요 시) */
    .value-inner-line::after {
        /* 파장이 중앙 구조를 기준으로 나오도록 위치 유지 */
    }

    .value-items-list li:nth-child(2){
        margin-left: 0px;
    }

    /* 3. 리스트 컨테이너: 절대 위치 해제 및 세로 배치 준비 */
    .value-items-list {
        position: static;
        width: 100%;
        max-width: 100%;
        /* 🌟 중요: 중앙 정렬을 위해 margin-left/right: auto 적용 */
        margin: 300px auto; 
        padding-top: 0;
        /* border: 1px solid yellow; */ /* 디버깅용, 실제로는 제거 */
    }

    /* 4. 리스트 아이템: 세로로 쌓이도록 설정 (각 아이템은 row로 유지) */
   .value-item {
        position: static;
        width: 100%;
        margin-bottom: 25px;
        display: flex;
        flex-direction: row !important; /* 가로 배치 강제 */
        align-items: flex-start !important; /* 🌟 상단 정렬로 변경 */
        justify-content: flex-start; /* 왼쪽부터 시작 */
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    
    /* 5. 아이템 내부 순서 및 스타일 (모든 항목에 통일된 순서 적용) */
    
    /* 모든 자식 요소의 order 및 정렬 초기화 */
    .value-item > * {
        order: initial !important; 
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 🌟 아이콘: 1번 (가장 왼쪽) */
    .value-item-icon {
        order: 1; 
        width: 60px; 
        height: 60px;

        margin-right: -30px !important; /* 🌟 라인과의 간격 */
        /* border: 1px solid red; */ /* 디버깅용, 실제로는 제거 */
    }

    /* 🌟 라인 이미지: 2번 (아이콘 오른쪽) */
    .value-line-img0,
    .value-line-img1,
    .value-line-img2,
    .value-line-img3 {
        order: 2;
        width: 51px;
        height: 9px;
        background-repeat: no-repeat; /* repeat-y 대신 no-repeat으로 변경 (모바일 이미지에 맞게) */
        background-position: center;
        background-size: cover;
        flex-shrink: 0;
        margin: 25px 20px !important; /* 🌟 아이콘과 콘텐츠 사이 간격 */
        /* border: 1px solid red; */ /* 디버깅용, 실제로는 제거 */
		 align-self: flex-start;
    }

    /* 각 라인 이미지 배경 (기존 유지, 모바일 버전 이미지 사용) */
    .value-line-img0 {
        background-image: url('/assets/img/value_line0_m.png'); 
    }
    .value-line-img1 {
        background-image: url('/assets/img/value_line1_m.png'); 
    }
    .value-line-img2 {
        background-image: url('/assets/img/value_line2_m.png'); 
    }
    .value-line-img3 {
        background-image: url('/assets/img/value_line3_m.png'); 
    }

    /* 🌟 콘텐츠: 3번 (가장 오른쪽) */
    .value-item-content {
        order: 3;
        flex-grow: 1; 
        text-align: left !important;
        
        /* 🚨 핵심 수정: PC에서 설정된 margin-top: 120px;을 0으로 강제 초기화 */
        margin-top: 0 !important; 
		margin-left: 0 !important;
		margin-right: 0 !important;

        /* 텍스트 내용물이 많더라도 수직 중앙 정렬이 되도록 Flexbox 추가 */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 내부 요소 수직 중앙 정렬 */
        align-items: flex-start; /* 내부 요소 왼쪽 정렬 */
        
        white-space: normal;
        /* border: 1px solid red; */ /* 디버깅용, 실제로는 제거 */
    }
    
    /* 텍스트 스타일 조정 (모바일에서 작게) */
    .value-item-title {
        font-size: 16px;
    }
    .value-item-title-sub {
        font-size: 13px;
    }
    .value-item-text {
        font-size: 13px;
        display: block; /* 모바일에서 긴 설명 숨김 (선택 사항) */
    }
}


/* 핵심 가치 섹션의 물결 효과 애니메이션 */
@keyframes wave-pulse {
    0% {
        /* 시작: 작은 그림자, 불투명도 유지 (파장의 원점) */
        box-shadow: 0 0 0 0 rgba(7, 152, 224, 0.5); /* 💡 밝은 하늘색 (0.5 투명도) */
    }
    
    50% {
        /* 💡 파장의 최대 확장: 70%에서 50%로 변경하여 속도 조정 */
        /* 그림자 확장 크기 증가, 투명도 거의 0으로 감소 */
        box-shadow: 0 0 0 180px rgba(7, 152, 224, 0.05); /* 💡 파장이 끝으로 갈 때 매우 흐리게 */
    }
    
    100% {
        /* 종료: 그림자 사라짐 */
        box-shadow: 0 0 0 0 rgba(7, 152, 224, 0); 
    }
}

@media (max-width: 768px) {
	/* 핵심 가치 섹션의 물결 효과 애니메이션 */
	@keyframes wave-pulse {
		0% {
			/* 시작: 작은 그림자, 불투명도 유지 (파장의 원점) */
			box-shadow: 0 0 0 0 rgba(7, 152, 224, 0.5); /* 💡 밝은 하늘색 (0.5 투명도) */
		}
		
		50% {
			/* 💡 파장의 최대 확장: 70%에서 50%로 변경하여 속도 조정 */
			/* 그림자 확장 크기 증가, 투명도 거의 0으로 감소 */
			box-shadow: 0 0 0 60px rgba(7, 152, 224, 0.05); /* 💡 파장이 끝으로 갈 때 매우 흐리게 */
		}
		
		100% {
			/* 종료: 그림자 사라짐 */
			box-shadow: 0 0 0 0 rgba(7, 152, 224, 0); 
		}
	}


}

/* ================================================================= */
/* 20. Map Section Styles */
/* ================================================================= */

.map-section {
    padding: 0;
    margin: 0;
    width: 100%;
	margin-top:-50px;
}

.map-section::after { 
    content: '';
    position: absolute;
    
    /* 🌟 위치 조정 핵심: 지도 높이 (400px)보다 작은 값으로 설정하여 오버랩 */
    /* 지도의 상단에서 300px 아래에 시작 (400px 지도 높이 중 100px은 지도에 겹침) */
    top: 870px; 
    right: 270px;
    
    /* 🌟 이미지 크기 (250px * 250px 예시) */
    width: 250px; 
    height: 250px; 
    
    background-image: url('/assets/img/map_b_bg.png');
    background-size: cover; 
    background-repeat: no-repeat;
    
    /* z-index를 높여 지도(iframe)와 연락처 정보 위에 오도록 설정 */
    z-index: -20; 
    pointer-events: none;
}

/* 지도 컨테이너 (지도 높이 지정) */
.map-container {
    width: 100%;
    height: 600px; /* 적절한 지도 높이 설정 */
}

/* 🌟 하단 연락처 정보 영역 (map_bg.png 배경) */
.map-contact-info {
    width: 100%;
    /* 🌟 배경 이미지 및 크기: 1400px * 180px 기준 */
    height: 180px;
    background-image: url('/assets/img/map_bg.png');
    background-size: cover; /* 배경이 컨테이너를 꽉 채우도록 */
    background-position: center;
    background-repeat: no-repeat;
    
    /* 내용물 중앙 정렬을 위한 Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top:20px;
	margin-bottom:150px;
}

#daumRoughmapContainer1760451200614 {
    /* 🌟 PC에서 이 요소를 기준으로 배경 이미지를 위치시키기 위해 position: relative 설정 */
    position: relative; 
    overflow: hidden; 
    height: 400px; /* PC 지도 높이 */
}

.map-contact-content {
    /* 내부 내용물은 1400px 너비까지 중앙 정렬 */
    max-width: 1400px;
    width: 90%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	margin-top:-30px;
}

/* 🌟 주소 텍스트 (24px, #ffffff) */
.map-address {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 20px;
}

/* 연락처 디테일 컨테이너 */
.contact-details {
    display: flex;
    gap: 40px; /* 항목 간 간격 */
    justify-content: center;
    align-items: center;
}

.contact-item {
    display: flex;
    align-items: center;
}

/* 아이콘 */
.contact-icon {
    width: 20px; 
    height: 20px;
    margin-right: 8px;
}

/* 🌟 TEL, FAX, E-mail 타이틀 (16px, #68EFFF) */
.contact-title {
    font-size: 16px;
    font-weight: 700;
    color: #68EFFF;
    margin-right: 5px;
}

/* 🌟 실제 연락처 정보 (16px, #ffffff) */
.contact-text {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}


/* ================================================================= */
/* @media (max-width: 768px) - 모바일 대응 */
/* ================================================================= */
@media (max-width: 768px) {
   
	.map-container {
        height: 300px; /* 모바일에서 지도 높이 축소 */
    }

	.map-section::after {
        display: none;
    }

	/* 🌟 다음 지도 컨테이너 모바일 크기 조정 */
    #daumRoughmapContainer1760451200614 {
        width: 100% !important; /* 모바일에서 너비 꽉 채우기 */
        height: 300px !important; /* 🌟 모바일에서 지도 높이 축소 */
    }
	/* 🌟 지도를 감싸는 .map-section의 높이도 조정 (이전 단계에서 사용했다면) */
    .map-section {
        /* 높이 관련 스타일 초기화 또는 조정 */
        height: auto;
		margin-top:0px;
    }

    
    /* 지도가 로드된 후 생성되는 iframe의 크기 강제 설정 */
    #daumRoughmapContainer1760451200614 iframe {
        width: 100% !important;
        height: 300px !important;
    }

	.map-contact-content {
		max-width: 100%;
		margin-top:0px;
	}





    .map-contact-info {
		width:90%;
        height: auto; /* 높이 자동 조절 */
        padding: 10px 20px 30px; /* 내부 패딩 추가 */
		margin-top:20px;
		margin-bottom:80px;
    }
    
    .map-address {
        font-size: 18px; /* 주소 텍스트 축소 */
        margin-bottom: 25px;
        word-break: keep-all; /* 줄바꿈 방지 */
    }

    .contact-details {
        flex-direction: column; /* 세로로 배치 */
        gap: 10px;
    }
    
    .contact-title,
    .contact-text {
        font-size: 14px; /* 연락처 텍스트 축소 */
    }
    
    .contact-item {
        /* 각 항목을 좌측 정렬 */
        width: 100%;
        justify-content: flex-start;
    }
}


/* ================================================================= */
/* 21. Measurement Section Styles */
/* ================================================================= */
.measurement-section {
    padding: 0px 0; /* 상하 여백 */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 🌟 전체 박스 (1400x620, Border) */
.measurement-box {
    width: 1400px;
    height: 620px;
    border: 1px solid #1DB7C7;
    display: flex; /* 좌우 분할 */
    margin: 0 auto;
    background-color: #fff; /* 오른쪽 영역을 위해 기본 흰색 배경 설정 */
	 border-radius:40px;
}

/* 🌟 왼쪽 영역 (440x620, 배경 이미지) */
.measurement-left {
position:absolute;
    width: 440px;
	height: 680px;
    
    /* 배경 이미지 적용 */
    background-image: url('/assets/img/Measurement_bg.png');
    background-size: cover;

    background-repeat: no-repeat;
   
    /* 텍스트 컨텐츠를 위한 Flexbox 설정 */
    display: flex;
    align-items: top; /* 텍스트를 수직 중앙 정렬 (필요시 top/padding으로 조정) */
    padding-left: 50px; /* 왼쪽 정렬 */
	padding-top:30px;
    box-sizing: border-box;

	border:0px solid yellow;
	

}

/* 🌟 텍스트 오버레이 스타일 */
.measurement-content-overlay {
    /* 텍스트 요소들을 세로로 배치 */
    display: flex;
    flex-direction: column;
    text-align: left;
    max-width: 340px; /* 텍스트 너비 제한 */
}

/* 🌟 상단 타이틀 (20px, #ffffff) */
.measurement-left .section-sub-title {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 15px;
}

/* 🌟 라인 이미지 (56x10) */
.title-line-image {
    width: 56px;
    height: 10px;
    margin-bottom: 25px;
}

/* 🌟 메인 텍스트 (36px) */
.section-main-title {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 40px 0;
}

/* 🌟 CSS로 구현된 흰색 라인 (56px * 10px) */
.title-css-line {
    width: 16px;
    height: 1px; /* 요청하신 높이 */
    background-color: #ffffff;
    margin: 0px 0 30px ; /* 기존 간격 유지 */
}


/* 🌟 버튼 (180x60, 배경 흰색) */
.measurement-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 60px;
    background-color: #ffffff;
    color: var(--text-dark); /* 기본 텍스트 색상 사용 */
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
	margin-top:180px;
}

.measurement-btn:hover {
    background-color: #1DB7C7;
    color: #ffffff;
}

/* 오른쪽 영역 (나머지 너비) */
.measurement-right {
	margin-left:460px;
    flex-grow: 1; 
     width: 960px; 
    padding: 35px 20px; /* 텍스트와 이미지에 적절한 패딩 설정 */
    box-sizing: border-box;
    
    /* 텍스트와 이미지 요소를 세로로 배치하고 왼쪽 상단 정렬 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* top 정렬 */
	border:0px solid yellow;
    
    overflow: hidden; /* 이미지 너비 관리를 위해 */
}

/* 🌟 설명 텍스트 (20px, #333333, 왼쪽 정렬) */
.measurement-right-text {
    font-size: 19px;
    color: #333333;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40px; /* 이미지와의 간격 */
}

/* 이미지 컨테이너 (가로로 2개의 이미지를 배치) */
.measurement-right-images {
    display: flex;
    gap: 15px; /* 이미지 사이의 간격 */
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 이미지 아이템 */
.right-image-item {
    display: block;
    object-fit: cover;
}

/* 첫 번째 이미지 크기 (407x267) */
.right-image-item.size-407 {
    width: 407px;
    height: 267px;
    flex-shrink: 0;
}

/* 두 번째 이미지 크기 (399x267) */
.right-image-item.size-399 {
    width: 399px;
    height: 267px;
    flex-shrink: 0;
}

/* 두 번째 이미지와 캡션을 감싸는 컨테이너 */
.right-image-with-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 캡션을 오른쪽으로 정렬 */
    /* 두 번째 이미지가 399px이므로 여백 없이 flex-grow: 0 */
    flex-shrink: 0; 
}

/* 🌟 캡션 텍스트 (14px, 오른쪽 정렬) */
.right-image-caption {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    text-align: right; /* 오른쪽 정렬 */
    margin-top: 10px;
    width: 100%;
}

.measurement-subtitle{
	font-size: 40px;
	margin-top: 120px;

}

.measurement-detail-image{
	width:1400px;
	border:1px solid yellow;
}

/* ================================================================= */
/* @media (max-width: 768px) - 모바일 대응 */
/* ================================================================= */
@media (max-width: 768px) {
  /* 🌟 1. measurement-box: 전체 크기 및 구조 (316*976px, 세로 정렬) */
   .measurement-box {
        width: 100%; 
     
        min-height: 1130px; /* 고정 높이 대신 최소 높이로 변경 (혹시 모를 오버플로우 방지) */
        height: 976px;     /* 요청하신 높이 유지 */
        margin: 0 auto; 
        
        /* 내부 컨텐츠 (left, right)를 세로로 쌓기 */
        display: flex; 
        flex-direction: column; 

    }
    
    /* 🌟 2. measurement-left 영역 (상단: 40%) - 배경 문제 해결 */
    .measurement-left {
		position:relative;
        order: 1; 
        width: 100%;
        height: 316px; /* 이미지 기반 비율 */
        padding: 20px 30px;
        box-sizing: border-box;
        
        /* 배경 이미지 적용 및 표시 보장 */
        background-image: url('/assets/img/Measurement_bg_m.png'); 
        background-size: cover; /* 배경이 영역을 완전히 덮도록 */
        background-position: center;
        background-repeat: no-repeat;
        
        /* 내부 텍스트 중앙 정렬 */
        display: flex;
        flex-direction: column;
        justify-content: left; 
        align-items: left; 
        text-align: left;
        color: #fff; /* 텍스트 색상 흰색 */

		 border-top-left-radius: 40px;    /* 왼쪽 상단 */
        border-top-right-radius: 40px;   /* 오른쪽 상단 */
    }

    /* 1-4. 버튼 (140x40, 14px) */
    .measurement-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 140px; 
        height: 40px; 
        font-size: 14px; 
        background-color: #fff; /* 흰색 배경 */
        color: #333; 
        border-radius: 4px;
        text-decoration: none;
        border: none;
		margin-top:40px;
    }
    
    /* 1-1. 상단 타이틀 (14px) */
    .measurement-left .section-sub-title {
        font-size: 14px; 
        line-height: 1.2;
        margin-bottom: 5px;
        color: inherit;
    }

    /* 1-3. 메인 텍스트 (22px) */
    .measurement-left .section-main-title {
        font-size: 22px; 
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 20px;
        color: inherit;
    }
    
    /* 라인 이미지 (CSS 구현 예시) */
    .title-css-line {
        width: 60px;
        height: 2px;
        background-color: #fff; /* 흰색 라인 */
        margin: 10px 0;
    }



	.measurement-right {
	margin-left:460px;
    flex-grow: 1; 
     width: 960px; 
    padding: 35px 20px; /* 텍스트와 이미지에 적절한 패딩 설정 */
    box-sizing: border-box;
    
    /* 텍스트와 이미지 요소를 세로로 배치하고 왼쪽 상단 정렬 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* top 정렬 */
	border:0px solid yellow;
    
    overflow: hidden; /* 이미지 너비 관리를 위해 */
}

/* 🌟 설명 텍스트 (20px, #333333, 왼쪽 정렬) */
.measurement-right-text {
    font-size: 19px;
    color: #333333;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40px; /* 이미지와의 간격 */
}



    /* 🌟 4. measurement-right 영역 (하단: 60%) - 세로 배열 보장 */
   .measurement-right {
        order: 2; 
        width: 100% !important; 
        
        padding: 30px 20px;
        box-sizing: border-box;
        margin-left: 0px;
        
        /* 내부 요소를 세로로 구성 (Flex 속성은 유지) */
        display: flex !important;  
        flex-direction: column !important; 
        
        /* 💡 align-items를 flex-start로 변경하여 자식 요소들을 왼쪽으로 붙임 */
        align-items: flex-start !important; 
        
        justify-content: flex-start;
        
        /* 💡 컨테이너 자체의 text-align을 left로 변경하여 상속 문제 해결 */
        text-align: left !important;  

    }
    
    /* 🌟 measurement-right의 직접적인 자식 요소 (Text와 Images 컨테이너) */
   .measurement-right > .measurement-right-text,
    .measurement-right > .measurement-right-images {
        width: 100% !important; 
        /* 텍스트 컨테이너와 이미지 컨테이너 모두 왼쪽으로 정렬되도록 margin을 0으로 설정 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* measurement-right-text 스타일 */
   .measurement-right-text { 

        font-size: 16px; 
        line-height: 1.7;
        margin-bottom: 25px; 
   
        word-break: break-word;
 

         border:0px solid red; 는 디버깅 후 삭제하세요 
    }
    
    /* 🌟 이미지들을 감싸는 컨테이너: 내부 요소 (이미지 1과 이미지 2 그룹)를 세로로 정렬 */
    .measurement-right-images {
        display: flex !important;
        flex-direction: column !important; /* 세로 배열 강제 */
        align-items: center !important;
        width: 100%;
		border:0px solid yellow;
    }
    
    /* 이미지 캡션을 포함하는 컨테이너: 내부 요소 (이미지 2와 캡션)를 세로로 정렬 */
    .right-image-with-text {
        width: 100%;
        display: flex !important;
        flex-direction: column !important; /* 세로 배열 강제 */
        align-items: center !important;
        margin-bottom: 20px; 
    }

    /* 개별 이미지 아이템 */
    .measurement-right-images img.right-image-item {
        display: block; 
        width: 100%; 

        height: auto;
        margin-bottom: 20px; 
    }

    /* 캡션이 있는 이미지 아래 간격 조정 */
    .right-image-with-text img.right-image-item {
        margin-bottom: 10px; /* 캡션과의 간격만 남김 */
    }


	/* 첫 번째 이미지 크기 (407x267) */
	.right-image-item.size-407 {
		width: 100%;
		height:auto;

	   
	}

	/* 두 번째 이미지 크기 (399x267) */
	.right-image-item.size-399 {
		width: 100%;
		height:auto;
	}

    /* 이미지 캡션 텍스트 */
    .right-image-caption {
        font-size: 12px; 
        color: #777;
        text-align: center;
        width: 100%;
    }

    /* ================================================================= */
    /* 🌟 5. measurement-subtitle 영역 (덮어버림/벗어남 문제 해결) */
    /* ================================================================= */

    /* measurement-box 다음에 오는 h2 요소의 스타일 */
    .measurement-subtitle {
        /* 기본 블록 요소로 배치 및 마진을 주어 measurement-box 아래로 확실히 배치 */
        display: block; 
        position: static; /* 혹시 모를 오버랩 방지를 위해 기본 위치 강제 */
        z-index: 1; /* z-index 초기화 */
        
        width: 100%;
        padding: 0 0px;
        box-sizing: border-box;
        
        /* measurement-box와의 충분한 여백 확보 */
        margin-top: 80px; 
        margin-bottom: 30px; 
        text-align: left; 
        
        font-size: 20px; /* 모바일 크기에 맞게 임의 설정 */
        font-weight: 700;
        color: #333;
    }

    /* measurement-subtitle 다음에 오는 이미지들 (세로 배열) */
    /* pc-only 클래스는 위에서 display: none 처리됨 */
    .measurement-detail-image {
        display: block; 
        width: 100%;
        max-width: 316px;
        height: auto;
        margin: 0 auto 20px; /* 중앙 정렬 및 간격 */
    }
  
    
}

/* 🌟 개별 측정 항목을 감싸는 전체 박스 (1400px) */
.measurement-item-box {
    width: 1400px;
    margin: 50px auto 30px; /* measurement-subtitle 아래 간격 조정 */
    
    /* 요청하신 보더와 라운드 */
    border: 2px solid #E9F2FF;
    border-radius: 30px;
    background-color: #fff; /* 내용의 기본 배경색 */
    
    overflow: hidden; /* 내부 요소의 라운딩 처리를 위해 */
}

/* 🌟 1. 아이템 헤더 (상단 74px, 배경 #E9F2FF) */
.item-header {
    width: 100%;
    height: 74px;
    background-color: #E9F2FF;
    padding: 0 40px;
    box-sizing: border-box;
    
    /* 텍스트 정렬 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}

/* 헤더 타이틀 (22px, #0391FE, 왼쪽 정렬) */
.item-header-title {
    font-size: 22px;
    color: #0391FE;
    font-weight: 700;
    text-align: left;
    margin: 0;
}

/* 🌟 2. 아이템 콘텐츠 (이미지 + 텍스트/테이블) */
.item-content {
    display: flex; /* 좌우 분할 */
    padding: 40px;
    gap: 40px; /* 이미지와 텍스트/테이블 사이 간격 */
    align-items: flex-start; /* 상단 정렬 */
}

/* 2-1. 왼쪽 영역 (이미지 380x260) */
.item-content-left {
    flex-shrink: 0; /* 이미지 크기 고정 */
    width: 380px;
}

.item-content-left img {
    width: 380px;

    display: block;
    object-fit: cover;
    border-radius: 10px; /* 이미지 자체에 라운드 처리 (선택 사항) */
}

/* 2-2. 오른쪽 영역 (타이틀, 설명, 테이블) */
.item-content-right {
    flex-grow: 1; /* 남은 공간 모두 사용 */
}

/* 오른쪽 타이틀 (20px, #333333) */
.item-right-title {
    font-size: 20px;
    color: #333333;
    font-weight: 700;
    text-align: left;
	margin-top:5px;
    margin-bottom: 15px;
}

/* 간단 설명 (18px) */
.item-right-description {
    font-size: 18px;
    color: #555555;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 30px;
}

/* 🌟 테이블 스타일 */
.item-content-right table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    table-layout: fixed; /* 테이블 너비 고정 */
	 border-radius: 10px; /* 테이블 전체에 둥근 모서리 적용 */
    overflow: hidden;    /* 둥근 모서리 밖으로 셀이 나가지 않도록 처리 */
}

/* 테이블 헤더 */
.item-content-right th {
    background-color: #EEEEEE; /* 헤더 배경색 */
    color: #333;
    font-weight: 700;
    padding: 12px 15px;
    border: 1px solid #EEEEEE; /* 라인 */
    text-align: center;

	 &:first-child { 
        border-top-left-radius: 10px; 
    }
    /* 오른쪽 상단 */
    &:last-child {
        border-top-right-radius: 10px; 
    }
}

/* 테이블 내용 */
.item-content-right td {
    padding: 12px 15px;
    border: 1px solid #EEEEEE; /* 라인 */
    color: #555;
    text-align: center;
	font-weight: 500;


}

  /* 바닥 행의 첫 번째 셀 */
    .item-content-right tr:last-child td:first-child { 
        border-bottom-left-radius: 10px; 
    }
    /* 바닥 행의 마지막 셀 */
    .item-content-right tr:last-child td:last-child { 
        border-bottom-right-radius: 10px; 
    }

/* 첫 번째 열 (항목) 강조 (선택 사항) */
.item-content-right td:first-child {
    font-weight: 700;

}



@media (max-width: 768px) {
    
   
    /* 🌟 개별 측정 항목을 감싸는 전체 박스 (모바일) */
    .measurement-item-box {
        width: 100%;
       
        margin: 30px auto 20px; /* 간격 조정 */
        border: 2px solid #E9F2FF;
        border-radius: 20px;
        overflow: hidden;
    }

    /* 🌟 1. 아이템 헤더 (모바일) */
    .item-header {
        height: auto; /* 내용에 따라 높이 자동 조정 */
        min-height: 50px;
        padding: 10px 20px;

    }

    /* 헤더 타이틀 (22px -> 18px로 조정) */
    .item-header-title {
        font-size: 18px; 
		text-align:center;
		margin:auto;
    }

    /* 🌟 2. 아이템 콘텐츠 (모바일: 세로로 배치) */
    .item-content {
        flex-direction: column; /* 세로로 쌓기 */
        padding: 20px;
        gap: 20px;
    }

    /* 2-1. 왼쪽 영역 (이미지) */
    .item-content-left {
        width: 100%; 
        order: 1; /* 이미지 먼저 배치 */
    }

    .item-content-left img {
        width: 100%;
        height: auto;
        max-height: 200px; /* 최대 높이 제한 (선택 사항) */
        object-fit: cover;
    }

    /* 2-2. 오른쪽 영역 (타이틀, 설명, 테이블) */
    .item-content-right {
        width: 100%;
        order: 2; /* 텍스트/테이블 나중에 배치 */
    }
    
    /* 오른쪽 타이틀 (20px -> 18px로 조정) */
    .item-right-title {
        font-size: 18px;
        margin-bottom: 10px;

    }

    /* 간단 설명 (18px -> 16px로 조정) */
    .item-right-description {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* 🌟 테이블 스타일 (모바일) */
    .item-content-right table {
        font-size: 14px;
    }

    .item-content-right th,
    .item-content-right td {
        padding: 8px 10px;
        /* 복잡한 테이블은 overflow-x: auto를 부모 요소에 적용할 수도 있습니다. */
    }
}

/* ================================================================= */
/* 22. Software Section Styles */
/* ================================================================= */
.software-section {
    padding: 0px 0; /* 상하 여백 */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 🌟 전체 박스 (1400x620, Border) */
.software-box {
    width: 1400px;
    height: 620px;
    border: 1px solid #1DB7C7;
    display: flex; /* 좌우 분할 */
    margin: 0 auto;
    background-color: #fff; /* 오른쪽 영역을 위해 기본 흰색 배경 설정 */
	 border-radius:40px;
}

/* 🌟 왼쪽 영역 (440x620, 배경 이미지) */
.software-left {
position:absolute;
    width: 440px;
	height: 620px;
    
    /* 배경 이미지 적용 */
    background-image: url('/assets/img/software_bg.png');
    background-size: cover;

    background-repeat: no-repeat;
   
    /* 텍스트 컨텐츠를 위한 Flexbox 설정 */
    display: flex;
    align-items: top; /* 텍스트를 수직 중앙 정렬 (필요시 top/padding으로 조정) */
    padding-left: 50px; /* 왼쪽 정렬 */
	padding-top:30px;
    box-sizing: border-box;

	border:0px solid yellow;
	

}

/* 🌟 텍스트 오버레이 스타일 */
.software-content-overlay {
    /* 텍스트 요소들을 세로로 배치 */
    display: flex;
    flex-direction: column;
    text-align: left;
    max-width: 340px; /* 텍스트 너비 제한 */
}

/* 🌟 상단 타이틀 (20px, #ffffff) */
.software-left .section-sub-title {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 15px;
}

/* 🌟 라인 이미지 (56x10) */
.title-line-image {
    width: 56px;
    height: 10px;
    margin-bottom: 25px;
}

/* 🌟 메인 텍스트 (36px) */
.section-main-title {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 40px 0;
}

/* 🌟 CSS로 구현된 흰색 라인 (56px * 10px) */
.title-css-line {
    width: 16px;
    height: 1px; /* 요청하신 높이 */
    background-color: #ffffff;
    margin: 0px 0 30px ; /* 기존 간격 유지 */
}


/* 🌟 버튼 (180x60, 배경 흰색) */
.software-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 60px;
    background-color: #ffffff;
    color: var(--text-dark); /* 기본 텍스트 색상 사용 */
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
	margin-top:180px;
}

.software-btn:hover {
    background-color: #1DB7C7;
    color: #ffffff;
}

/* 오른쪽 영역 (나머지 너비) */
.software-right {
	margin-left:460px;
    flex-grow: 1; 
     width: 960px; 
    padding: 35px 20px; /* 텍스트와 이미지에 적절한 패딩 설정 */
    box-sizing: border-box;
    
    /* 텍스트와 이미지 요소를 세로로 배치하고 왼쪽 상단 정렬 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* top 정렬 */
	border:0px solid yellow;
    
    overflow: hidden; /* 이미지 너비 관리를 위해 */
}

/* 🌟 설명 텍스트 (20px, #333333, 왼쪽 정렬) */
.software-right-text {
    font-size: 19px;
    color: #333333;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40px; /* 이미지와의 간격 */
}

/* 이미지 컨테이너 (가로로 2개의 이미지를 배치) */
.software-right-images {
    display: flex;
    gap: 15px; /* 이미지 사이의 간격 */
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
	margin-top:40px;
}

/* 이미지 아이템 */
.right-image-item {
    display: block;
    object-fit: cover;
}

/* 첫 번째 이미지 크기 (407x267) */
.right-image-item.size-292 {
    width: 292px;
    height: 330px;
    flex-shrink: 0;
}

/* 두 번째 이미지 크기 (399x267) */
.right-image-item.size-532 {
    width: 532px;
    height: 330px;
    flex-shrink: 0;
}

/* 두 번째 이미지와 캡션을 감싸는 컨테이너 */
.right-image-with-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 캡션을 오른쪽으로 정렬 */
    /* 두 번째 이미지가 399px이므로 여백 없이 flex-grow: 0 */
    flex-shrink: 0; 
}

/* 🌟 캡션 텍스트 (14px, 오른쪽 정렬) */
.right-image-caption {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    text-align: right; /* 오른쪽 정렬 */
    margin-top: 10px;
    width: 100%;
}

.software-subtitle{
	font-size: 40px;
	margin-top: 120px;

}

.software-detail-image{
	width:1400px;
	border:1px solid yellow;
}

/* ================================================================= */
/* @media (max-width: 768px) - 모바일 대응 */
/* ================================================================= */
@media (max-width: 768px) {
  /* 🌟 1. software-box: 전체 크기 및 구조 (316*976px, 세로 정렬) */
   .software-box {
        width: 100%; 
     
        min-height: 1200px; /* 고정 높이 대신 최소 높이로 변경 (혹시 모를 오버플로우 방지) */
        height: 876px;     /* 요청하신 높이 유지 */
        margin: 0 auto; 
        
        /* 내부 컨텐츠 (left, right)를 세로로 쌓기 */
        display: flex; 
        flex-direction: column; 

    }
    
    /* 🌟 2. software-left 영역 (상단: 40%) - 배경 문제 해결 */
    .software-left {
		position:relative;
        order: 1; 
        width: 100%;
        height: 316px; /* 이미지 기반 비율 */
        padding: 20px 30px;
        box-sizing: border-box;
        
        /* 배경 이미지 적용 및 표시 보장 */
        background-image: url('/assets/img/software_bg_m.png'); 
        background-size: cover; /* 배경이 영역을 완전히 덮도록 */
        background-position: center;
        background-repeat: no-repeat;
        
        /* 내부 텍스트 중앙 정렬 */
        display: flex;
        flex-direction: column;
        justify-content: left; 
        align-items: left; 
        text-align: left;
        color: #fff; /* 텍스트 색상 흰색 */

		 border-top-left-radius: 40px;    /* 왼쪽 상단 */
        border-top-right-radius: 40px;   /* 오른쪽 상단 */
    }

    /* 1-4. 버튼 (140x40, 14px) */
    .software-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 140px; 
        height: 40px; 
        font-size: 14px; 
        background-color: #fff; /* 흰색 배경 */
        color: #333; 
        border-radius: 4px;
        text-decoration: none;
        border: none;
		margin-top:40px;
    }
    
    /* 1-1. 상단 타이틀 (14px) */
    .software-left .section-sub-title {
        font-size: 14px; 
        line-height: 1.2;
        margin-bottom: 5px;
        color: inherit;
    }

    /* 1-3. 메인 텍스트 (22px) */
    .software-left .section-main-title {
        font-size: 22px; 
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 20px;
        color: inherit;
    }
    
    /* 라인 이미지 (CSS 구현 예시) */
    .title-css-line {
        width: 60px;
        height: 2px;
        background-color: #fff; /* 흰색 라인 */
        margin: 10px 0;
    }



	.software-right {
	margin-left:460px;
    flex-grow: 1; 
     width: 960px; 
    padding: 35px 20px; /* 텍스트와 이미지에 적절한 패딩 설정 */
    box-sizing: border-box;
    
    /* 텍스트와 이미지 요소를 세로로 배치하고 왼쪽 상단 정렬 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* top 정렬 */
	border:0px solid yellow;
    
    overflow: hidden; /* 이미지 너비 관리를 위해 */
}

/* 🌟 설명 텍스트 (20px, #333333, 왼쪽 정렬) */
.software-right-text {
    font-size: 19px;
    color: #333333;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40px; /* 이미지와의 간격 */
}



    /* 🌟 4. software-right 영역 (하단: 60%) - 세로 배열 보장 */
   .software-right {
        order: 2; 
        width: 100% !important; 
        
        padding: 30px 20px;
        box-sizing: border-box;
        margin-left: 0px;
        
        /* 내부 요소를 세로로 구성 (Flex 속성은 유지) */
        display: flex !important;  
        flex-direction: column !important; 
        
        /* 💡 align-items를 flex-start로 변경하여 자식 요소들을 왼쪽으로 붙임 */
        align-items: flex-start !important; 
        
        justify-content: flex-start;
        
        /* 💡 컨테이너 자체의 text-align을 left로 변경하여 상속 문제 해결 */
        text-align: left !important;  

    }
    
    /* 🌟 software-right의 직접적인 자식 요소 (Text와 Images 컨테이너) */
   .software-right > .software-right-text,
    .software-right > .software-right-images {
        width: 100% !important; 
        /* 텍스트 컨테이너와 이미지 컨테이너 모두 왼쪽으로 정렬되도록 margin을 0으로 설정 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* software-right-text 스타일 */
   .software-right-text { 

        font-size: 16px; 
        line-height: 1.7;
        margin-bottom: 25px; 
   
        word-break: break-word;
 

         border:0px solid red; 는 디버깅 후 삭제하세요 
    }
    
    /* 🌟 이미지들을 감싸는 컨테이너: 내부 요소 (이미지 1과 이미지 2 그룹)를 세로로 정렬 */
    .software-right-images {
        display: flex !important;
        flex-direction: column !important; /* 세로 배열 강제 */
        align-items: center !important;
        width: 100%;
		border:0px solid yellow;
    }
    
    /* 이미지 캡션을 포함하는 컨테이너: 내부 요소 (이미지 2와 캡션)를 세로로 정렬 */
    .right-image-with-text {
        width: 100%;
        display: flex !important;
        flex-direction: column !important; /* 세로 배열 강제 */
        align-items: center !important;
        margin-bottom: 20px; 
    }

    /* 개별 이미지 아이템 */
    .software-right-images img.right-image-item {
        display: block; 
        width: 100%; 

        height: auto;
        margin-bottom: 20px; 
    }

    /* 캡션이 있는 이미지 아래 간격 조정 */
    .right-image-with-text img.right-image-item {
        margin-bottom: 10px; /* 캡션과의 간격만 남김 */
    }



	.right-image-item.size-292 {
		width: 100%;
		height:auto;

	   
	}

	/* 두 번째 이미지 크기 (399x267) */
	.right-image-item.size-532 {
		width: 100%;
		height:auto;
	}

    /* 이미지 캡션 텍스트 */
    .right-image-caption {
        font-size: 12px; 
        color: #777;
        text-align: center;
        width: 100%;
    }

    /* ================================================================= */
    /* 🌟 5. software-subtitle 영역 (덮어버림/벗어남 문제 해결) */
    /* ================================================================= */

    /* software-box 다음에 오는 h2 요소의 스타일 */
    .software-subtitle {
        /* 기본 블록 요소로 배치 및 마진을 주어 software-box 아래로 확실히 배치 */
        display: block; 
        position: static; /* 혹시 모를 오버랩 방지를 위해 기본 위치 강제 */
        z-index: 1; /* z-index 초기화 */
        
        width: 100%;
        padding: 0 0px;
        box-sizing: border-box;
        
        /* software-box와의 충분한 여백 확보 */
        margin-top: 80px; 
        margin-bottom: 30px; 
        text-align: left; 
        
        font-size: 20px; /* 모바일 크기에 맞게 임의 설정 */
        font-weight: 700;
        color: #333;
    }

    /* software-subtitle 다음에 오는 이미지들 (세로 배열) */
    /* pc-only 클래스는 위에서 display: none 처리됨 */
    .software-detail-image {
        display: block; 
        width: 100%;
        max-width: 316px;
        height: auto;
        margin: 0 auto 20px; /* 중앙 정렬 및 간격 */
    }
  
    
}

.software-sub-feature-wrapper {
    position: relative;
    
    /* 💥 핵심 수정: 부모 main-wrapper의 제약에서 벗어나 화면 전체 너비(100vw)로 강제 확장 */
    width: 100vw; 
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    padding: 50px 0 80px 0; /* 상하 패딩 유지, 좌우 패딩은 내부 콘텐츠에서 처리 */
    z-index: 1; /* 콘텐츠보다 뒤에 위치하도록 설정 */
}

/* 🌟 obje.png 배경 스타일 (Full Width, 컨테이너 배경으로 사용) 🌟 */
.software-sub-feature-wrapper::before {
    content: '';
    position: absolute;
    top: 290px; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    
    background-image: url('/assets/img/obje.png'); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1; 
}




/* 🌟 주요 분석기능 타이틀 (마진 하단 조정) */
.software-subtitle {
margin-left: auto;
	    margin-right: auto;
	max-width: 1400px; /* 1400px 제한 */
    text-align: left; 
    font-family: 'SUIT', sans-serif;
    font-size: 40px; 
    font-weight: 700; 
    color: var(--text-dark); 
    margin-bottom: 50px; 
}

/* 🌟 2x2 이미지 그리드 컨테이너 */
.software-sub-grid {
 max-width: 1400px; /* 1400px 제한 */
  margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;

}

.software-sub-item {
    /* 🌟 요청 사양 */
    width: 90%;
    border: 1px solid #E9F2FF; /* E9F2FF 보더 */
    border-radius: 30px;      /* radius 30px */
    background-color: #ffffff; /* 배경 흰색 */
    padding: 40px 40px;       /* 내부 여백 설정 */
    margin-bottom: 20px;
    
    /* 좌우 분할 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    gap: 40px;
}

/* 🌟 1. 왼쪽 영역 (이미지 160x160) */
.software-sub-item .software-sub-image {
    width: 160px;
    height: 160px;
    flex-shrink: 0; /* 크기 고정 */
    object-fit: cover;
    display: block;
    border-radius: 10px; /* 이미지 자체 라운딩 (선택 사항) */
}
/* 모바일 전용 이미지는 PC에서 숨김 */
.software-sub-item .software-sub-image.mobile-only {
    display: none;
}
/* PC 전용 이미지는 PC에서 표시 */
.software-sub-item .software-sub-image.pc-only {
    display: block;
}


/* 🌟 2. 오른쪽 영역 (텍스트 컨테이너) */
.software-sub-content {
    flex-grow: 1; /* 남은 공간 모두 사용 */
    text-align: left;
}

/* 🌟 타이틀 (22px, #0391FE) */
.software-sub-title {
    font-size: 22px;
    color: #0391FE;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

/* 🌟 내용 (18px, #333333) */
.software-sub-description {
    font-size: 18px;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}


/* 모바일 조정 */
@media (max-width: 1023px) {
    .software-section {
		padding-top: 0px; 
		padding-bottom: 00px; 
	}
    
    .software-sub-feature-wrapper {
        /* 💥 수정: 모바일에서는 음수 마진 대신 0으로 설정 */
		padding: 0px 0 40px 0; /* 상하 패딩 유지, 좌우 패딩은 내부 콘텐츠에서 처리 */
    }





	.software-sub-feature-wrapper::before {
			background-image: none; 
	}

    



	.software-subtitle {
	max-width: 90%; /* 1400px 제한 */
        text-align: left; /* ✨ 타이틀 중앙 정렬 */
        margin: 40px 20px; /* 하단 여백 조정 (선택 사항) */
        font-size: 24px; /* 모바일 크기 조정 (선택 사항) */
    }

	 .software-sub-grid {

        /* 기존 PC Grid 설정을 해제하고 Flex Column 또는 Grid 1열로 변경 */
        display: flex; /* Flexbox 사용 */
        flex-direction: column; /* ✨ 세로로 쌓기 */
        gap: 20px; /* 항목 간 세로 간격 */
        padding: 0 20px; /* 좌우 20px 여백 (선택 사항) */
    }

    /* ---------------------------------------------------- */
    /* 2. 그리드 레이아웃: 1개씩 세로로 쌓기 */
    /* ---------------------------------------------------- */
   .software-sub-item {
        /* 세로로 나타나야 함 (부모 컨테이너에 flex-direction: column이 적용되어 있다면 이 코드는 필요 없습니다) 
           만약 software-sub-item 자체가 세로로 쌓여야 한다면, 이 박스를 감싸는 부모에 flex-direction: column을 적용하세요.
           여기서는 박스 내부 요소만 세로로 정렬합니다. */
        flex-direction: column; /* 이미지와 텍스트를 세로로 쌓기 */
        align-items: flex-start; /* 좌측 상단 정렬 */
        padding: 20px;
        margin-bottom: 15px;
        gap: 15px; /* 이미지와 텍스트 사이 간격 줄임 */
		display:block;
    }

    /* 🌟 1. 이미지 영역 (모바일) */
    .software-sub-item .software-sub-image {
        width: 100%; /* 너비 100%로 확장 */
        max-width: 160px; /* 최대 크기 160x160 유지 */
        height: auto;
        object-fit: cover;
        margin: 0 auto ; /* 이미지 하단 여백 추가 및 왼쪽 정렬 */
		padding:50px;
    }
    
    /* PC 전용 이미지는 모바일에서 숨김 */
    .software-sub-item .software-sub-image.pc-only {
        display: none !important;
    }
    /* 모바일 전용 이미지는 모바일에서 표시 */
    .software-sub-item .software-sub-image.mobile-only {
        display: block !important;
    }

    /* 🌟 2. 오른쪽 영역 (텍스트 컨테이너) */
    .software-sub-content {
        width: 100%;
        text-align: center;
    }

    /* 🌟 타이틀 (22px -> 18px로 조정) */
    .software-sub-title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    /* 🌟 내용 (18px -> 16px로 조정) */
    .software-sub-description {
        font-size: 16px;
        line-height: 1.5;
		margin-bottom: 40px;
    }
}
/* ================================================================= */
/* 23. Control Section Styles (새로운 섹션 또는 기존 섹션에 추가) */
/* ================================================================= */

/* 컨트롤 메인 이미지 스타일 (기존 스타일 유지) */
.control-main-image {
    display: block;
    margin: 0 auto 50px auto; 
    width: 100%; 
    height: auto;
    max-width: 1200px;
}

.control-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 0; /* 섹션 상하 여백 */
}

/* 🌟 중앙 박스 (1400x400) */
.control-box {
    width: 1400px;
    height: 400px;
    margin: 0 auto;
    
    /* 배경 이미지 및 스타일 */
    background-image: url('/assets/img/control_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px; /* 박스 모서리 둥글게 (선택 사항) */
    
    /* 내부 콘텐츠 중앙 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    box-sizing: border-box;
}

/* 🌟 타이틀 (36px, #ffffff) */
.control-box .control-title {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 25px;
    max-width: 800px; /* 텍스트 너비 제한 (선택 사항) */
}

/* 🌟 내용 (20px, #ffffff) */
.control-box .control-description {
    font-size: 20px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1000px; /* 텍스트 너비 제한 (선택 사항) */
}

/* 🌟 버튼 (180x60, 배경 #ffffff) */
.control-contact-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 60px;
    background-color: #ffffff;
    color: var(--text-dark); /* 기본 텍스트 색상 사용 */
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.control-contact-btn:hover {
    background-color: #0391FE;
    color: #ffffff;
}

/* 기존 이미지 요소는 이 구조에 맞게 숨김/대체됩니다. */
.control-image-top.pc-only,
.control-image-top.mobile-only {
    display: none !important;
}


/* 🌟 상세 이미지 컨테이너 스타일 (1400px 배경) 🌟 */
.control-detail-wrapper {
    /* 중앙 정렬 및 1400px 제한 */
    max-width: 1400px; 
    margin: 20px auto 80px; 
    
    /* 배경 및 디자인 */
    background-color: #F2F8FA; /* 요청하신 배경색 */
    border-radius: 30px; /* 요청하신 라운드 처리 */
    padding: 50px 20px; /* 내부 콘텐츠 여백 확보 */
    
    /* main-wrapper 내에서 좌우 패딩을 포함하여 1400px을 유지하도록 */
    width: 100%; 
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

/* 🌟 상단 단일 이미지 스타일 (control_sub1.png) 🌟 */
.control-sub-top-image-wrapper {
    text-align: center; /* 내부 이미지를 중앙 정렬 */
    margin-bottom: 50px; /* 하단 그리드와의 간격 */
}

.control-sub-image-single {
    display: inline-block; /* 중앙 정렬을 위해 */
    max-width: 100%;
    height: auto;
}




.control-sub-list, .control-sub-grid { 
    display: flex;
    flex-wrap: wrap; /* 3개씩 다음 줄로 넘기기 */
    gap: 30px; /* 아이템 간 간격 설정 (조정 필요) */
    width: 1300px; /* 섹션 최대 너비 (조정 필요) */
    margin: 0 auto;
	border:0px solid yellow;
}

/* 🌟 각 아이템 스타일 */
.control-sub-item {
   width: 353px; 
    max-width: 353px; 

    background-color: #FFFFFF;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 그림자 효과 */
    padding: 40px 30px; 
    
    /* 기존 스타일 유지 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center;
    margin-bottom: 0; /* 부모의 gap으로 간격 처리 */
}

.control-sub-item .control-sub-image {
    display: block;
    width: auto; 
    height: 124px; /* 모든 이미지 높이 고정 (이전 설정) */
    max-width: 100%;
    object-fit: contain; /* 이미지 비율 유지 */
    margin-bottom: 25px; /* 이미지 아래 간격 */
}

/* 🌟 5번째 control-sub-item 스타일 재정의 (배경/그림자 제거 및 높이 강제 적용) */
.control-sub-item:nth-child(5) {
    background-color: transparent; 
    box-shadow: none;              
    border: none;                  
    
    /* 💡 최소 높이 설정: 
       다른 아이템의 '패딩 + 이미지 + 마진 + 타이틀/내용 + 패딩' 높이와 
       균형을 맞추기 위해 min-height를 강제 적용합니다.
       (375px는 다른 아이템의 높이를 추정한 값이며, 필요에 따라 조정 가능) */
 
    
    /* 컨텐츠가 없으므로 중앙 정렬이 잘 되도록 설정 */
    display: flex;
    flex-direction: column; 
    justify-content: center; /* 수직 중앙 정렬 */
    align-items: center; 
    
    /* 5번째 항목의 패딩을 좌우 0으로 설정했다면 다시 조정하세요. */
    /* 현재는 padding: 40px 30px; 으로 가정합니다. */
}


/* 🌟 타이틀 (20px, #017197) */
.control-sub-item .control-sub-title {
    font-size: 20px;
    color: #017197;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

/* 🌟 내용 (18px, #333333) */
.control-sub-item .control-sub-description {
    font-size: 18px;
    color: #333333;
    line-height: 1.6;
    margin: 0;
    max-width: 600px; /* 텍스트 너비 제한 (선택 사항) */
}

/* 모바일 조정 */
@media (max-width: 1023px) {
	.control-section {
        padding: 40px 0; /* 모바일 상하 여백 */
    }

    /* 🌟 중앙 박스 (100% x 457px) */
    .control-box {
        width: 100%;
       
        height: 457px; /* 요청하신 높이 */
        
        /* 배경 이미지 및 스타일 */
        background-image: url('/assets/img/control_bg_m.png');
        background-size: cover;
        border-radius: 10px; /* 모바일 라운드 조정 */
        
        /* 내부 컨텐츠 중앙 정렬은 PC와 동일하게 유지 */
        padding: 30px 20px;
    }

    /* 🌟 타이틀 (36px -> 22px) */
    .control-box .control-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    /* 🌟 내용 (20px -> 16px) */
    .control-box .control-description {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    /* 🌟 버튼 (180x60 -> 160x50) */
    .control-contact-btn {
        width: 160px;
        height: 50px;
        font-size: 16px;
    }
	.control-image-top{
		width:100%;
	}


    
    .control-detail-wrapper {
        padding: 30px 20px; /* 모바일 패딩 조정 */
        border-radius: 5px; /* 모바일에서 radius 약간 줄이기 */
    }
    
    .control-sub-top-image-wrapper {
        margin-bottom: 30px;
    }
    
    .control-sub-list, .control-sub-grid { 
        flex-direction: column; /* 세로 배열 강제 */
        gap: 20px; /* 간격 조정 */
        width: 100%;
    }

    /* 🌟 각 아이템 스타일 */
    .control-sub-item {
        width: 100% !important; /* 모바일에서 너비 100% 강제 */

    max-width: 90% !important; /* 모바일에서 너비 100% 강제 */

        margin-bottom: 0; /* 부모의 gap으로 간격 처리 */
        padding: 30px 20px; /* 모바일 패딩 조정 */
    }

    /* 🌟 5번째 control-sub-item 스타일 재정의 (모바일에서도 동일하게 적용) */
    .control-sub-item:nth-child(5) {
       display:none;
    }

    /* 이미지 스타일 (모바일) */
    .control-sub-item .control-sub-image {
        margin-bottom: 20px;
        max-width: 80%; /* 모바일에서 이미지 크기 약간 줄임 */
    }

    /* 🌟 타이틀 (20px -> 18px) */
    .control-sub-item .control-sub-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    /* 🌟 내용 (18px -> 16px) */
    .control-sub-item .control-sub-description {
        font-size: 16px;
        line-height: 1.5;
    }
    
}
@media (max-width: 600px) {
    /* 작은 화면에서는 2열로도 시도해 볼 수 있습니다. (필요하다면) */
    /* .control-sub-grid {
        grid-template-columns: repeat(2, 1fr); 
    } */
}

/* ================================================================= */
/* 24. Career Section Styles (채용안내 섹션) */
/* ================================================================= */

/* 🌟 Full Width 배경 래퍼 (career_bg.png 적용) 🌟 */
.career-section-wrapper {
    position: relative;
    /* 부모 main-wrapper의 제약을 무시하고 화면 전체 너비(100vw)로 강제 확장 */
    width: 100vw; 

    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    padding-top: 100px; /* 상단 여백 (텍스트를 중앙에 가깝게 배치하기 위해) */
    padding-bottom: 150px; /* 하단 이미지 영역을 위한 충분한 여백 확보 */
    
    background-image: url('/assets/img/sub_career_bg.png'); 
    background-size: cover; 
    background-position: top center;
    background-repeat: no-repeat;
	margin-bottom:400px;
	

}

/* 🌟 1400px 중앙 콘텐츠 영역 🌟 */
.career-content-area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px; /* 좌우 패딩 (모바일 대응 및 가장자리 여백) */
    position: relative;
    z-index: 2; /* 배경 위에 오도록 */
}

/* 🌟 채용 슬로건 텍스트 스타일 🌟 */
.career-slogan {
    text-align: left; 
    color: #ffffff; /* 요청하신 흰색 */
    font-size: 40px; /* 요청하신 40px */
    font-weight: 800; /* Extra Bold (800) */
    margin-bottom: 80px; /* 하단 이미지와의 간격 */
}



.career-item-row {
    display: flex;
    justify-content: space-between; /* 아이템 간 간격 균등 분배 */
    gap: 10px; /* 아이템 사이 최소 간격 */
    
    /* 💥 배경 하단 50px 위에 겹치도록 절대 위치 지정 */
    position: absolute;
    bottom: -500px; /* 이미지 높이에 따라 조정될 수 있음. (50px + 이미지 높이의 절반 이상) */
    left: 50%; 
    transform: translateX(-50%); /* 중앙 정렬 */
    
    width: 100%; /* career-content-area의 1400px 너비 사용 */
    max-width: 1400px; /* 너비 제한 */
    padding: 0 20px; /* content-area와 동일한 좌우 패딩 */
	border:0px solid yellow;
}


/* 🌟 개별 아이템 박스 (268x360) */
.career-item {
    width: 268px;
    height: 360px;
    flex-shrink: 0;    
    /* 요청 사양 */
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    border-radius: 0px; /* 30px 대신 10px로 가정. 필요시 조정 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 그림자 */
    padding: 30px 20px;
    box-sizing: border-box;
    
    /* 내부 콘텐츠 중앙 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    
    /* 모바일 전용 요소는 PC에서 숨김 */
    &.mo_title { display: none; }
    &.pc_title { display: flex; }
}

/* 🌟 이미지 (52x50) */
.career-item .career-image {
    width: 52px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 0px;
}

/* 🌟 타이틀 (28px, #0391FE) */
.career-item .career-title {
    font-size: 28px;
    color: #0391FE;
    font-weight: 700;
    margin-bottom: 20px;
}

/* 🌟 구분선 (37x1, #dddddd) */
.career-item .career-divider {
    width: 37px !important;
    height: 1px !important; /* 높이 1px 강제 */
    background-color: #DDDDDD !important; /* 배경색 강제 */
    margin-bottom: 10px;
}
/* 🌟 부제 (18px, #333333) - HTML 구조상 이 텍스트가 필요함 */
.career-item .career-subtitle {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
    margin-bottom: 15px;

	white-space: nowrap;
}


/* 🌟 상세 설명 (16px, #666666) */
.career-item .career-description {
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}


/* 모바일 조정 */
@media (max-width: 1023px) {
    
	.career-section-wrapper {


		padding-top: 220px; /* 상단 여백 (텍스트를 중앙에 가깝게 배치하기 위해) */
		 padding-bottom: 10px; 
		margin-bottom:0px;
		border:0px solid yellow;
		background-image: url('/assets/img/sub_career_bg_m.png'); 
		height:1000px;


	}




	.career-content-area {
		padding: 0 20px; /* 좌우 패딩 (모바일 대응 및 가장자리 여백) */
		border:0px solid yellow;
		top:-190px;
	}
    
    .career-slogan {
        font-size: 26px;
        text-align: left;
        margin-bottom: 40px;
		border:0px solid red;
		line-height:1.3;
    }


    	/*
.career-item-row {
    display: flex;
    justify-content: space-between; 
    gap: 20px; 
    
   
    position: absolute;
    bottom: -450px; 
    left: 50%; 
    transform: translateX(-50%); 
    
    width: 100%; 
    max-width: 1400px; 
    padding: 0 20px; 
	border:0px solid yellow;
}

.career-item {
    flex-basis: 0; 
    flex-grow: 1; 
    min-width: 150px; 
}

*/
   .career-item-row {
        /* 절대 위치를 해제하거나, 위치를 모바일에 맞게 조정 */
        position: relative; 
		margin-top:50px;
        bottom: 0;
        left: 0;
        transform: none;
        padding: 0 0px; /* content-area와 동일한 좌우 패딩 */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2열로 변경 */
        gap: 10px;
    }

	.career-item {
		width: 100%;
		height: 330px;
		flex-shrink: 0;    
	   min-width: 170px; 
	}

 

    /* 🌟 타이틀, 설명 폰트 크기 조정 */
    .career-item .career-image {
	 width: 31px;
    height:30px;
        margin-bottom: 0px;
    }
    
    .career-item .career-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .career-item .career-divider {
        margin-bottom: 0px;
    }

    .career-item .career-subtitle {
        font-size: 17px;
        margin-bottom: 10px;
white-space: unset;
    }

    .career-item .career-description {
        font-size: 14px;
        line-height: 1.4;
    }
}


/* ================================================================= */
/* 25. Career Process Section Styles (채용 공고 섹션) */
/* ================================================================= */


.career-process-section {
    position: relative;
    
    /* 💥 배경색 대신 투명하게 두고, 상하 패딩으로 높이만 확보 */
    /* width: 100%; (Full Width 확장 로직은 ::before로 옮김) */
    background-color: transparent; 
    padding: 60px 0; 
    z-index: 1; 

}

/* 🌟 Full Width 배경색을 위한 ::before 유사 요소 (Full Width 배경 담당) 🌟 */
.career-process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* 뷰포트 중앙에서 시작 */
    
    /* 💥 이전에 시도했던 Full Width 확장 로직을 ::before에 적용 */
    width: 100vw; 
    margin-left: -50vw; /* 왼쪽으로 뷰포트 너비의 절반만큼 이동 */
    
    height: 100%; 
    background-color: #F3F9FF; /* 요청하신 배경색 적용 */
    z-index: -1; /* .career-process-section의 콘텐츠 뒤로 보냄 */
}


/* 🌟 1400px 중앙 콘텐츠 (.career-process-content) 🌟 */
.career-process-content {
    /* 💥 이 요소에 배경색이 들어가지 않도록 주의 */
    /* 중앙 정렬 스타일 유지 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px; 
    
    /* 2단 레이아웃 스타일 유지 */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 50px; 
    position: relative; /* ::before 보다 위에 오도록 z-index를 보장 */
    z-index: 2;
}



/* 1. 왼쪽 텍스트 영역 */
.process-text-area {
    flex-basis: 50%; /* 왼쪽 영역 너비 (50% 정도 할당) */
    flex-shrink: 0;
	margin-top:-50px;
}

.process-title {
    text-align: left;
    font-size: 40px; /* 요청하신 40px */
    font-weight: 800; /* Extra Bold */
    color: var(--text-dark); /* 기본 어두운 색상 사용 */
    margin-bottom: 20px;
}

.process-description {
    text-align: left;
    font-size: 16px; /* 요청하신 16px */
    font-weight: 400; /* Regular */
    color: var(--text-medium); /* 중간 색상 또는 어두운 색상 사용 */
    line-height: 1.6;
}


/* 🌟 아이템을 감싸는 컨테이너 */
.process-link-area {
    width: 630px; /* 300px * 2 + 30px 간격으로 가정 */
    max-width: 100%;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    gap: 30px; /* 아이템 사이 간격 */
}

/* 🌟 개별 링크 박스 (300x200) */
.process-link-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 수평 중앙 정렬 */
    justify-content: center; /* 수직 중앙 정렬 */
    
    width: 300px;
    height: 200px;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none; /* 링크 밑줄 제거 */

    /* 요청 사양 */
    background-color: #FFFFFF;
    border: 0px solid #ddd; /* 보더 추가 (선택 사항) */
    border-radius: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
    
    /* IE/Edge에서 Flexbox 클릭 영역 문제 방지 */
    cursor: pointer; 
}

.process-link-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 🌟 1. 상단 이미지 (100% * 28px) */
.process-link-item .process-logo-image {
    width: 100%;
    height: 28px; /* 이미지 높이 고정 */
    object-fit: contain;
    margin-bottom: 20px;
}

/* 🌟 2. 타이틀 (18px, #333333) */
.process-link-item .process-title {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
    margin-bottom: 20px;
}

/* 🌟 3. 버튼 (배경 #EEEEEE) */
.process-link-item .process-apply-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 너비 및 높이 조정 (예: 120x40) */
    width: 120px;
    height: 40px;
    
    background-color: #EEEEEE;
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.process-link-item:hover .process-apply-btn {
    background-color: #DDDDDD;
}


/* 모바일 조정 */
@media (max-width: 1023px) {
    
  .career-process-section {
        padding: 50px 0;
    }
    
    .career-process-content {
        flex-direction: column; /* 세로로 쌓기 */
        gap: 40px;
    }
    
    .process-text-area {
        flex-basis: auto;
        text-align: center;
		margin-top:40px;
    }
    
    .process-title,
    .process-description {
        text-align: center; /* 텍스트 중앙 정렬 */
		border:0px solid yellow;
		margin: 10px auto 10px;
    }
    
    .process-title {
        font-size: 26px;
    }
	.process-description {
		font-size: 15px;
	}

   /* 🌟 아이템을 감싸는 컨테이너 (세로 배열) */
    .process-link-area {
        width: 100%;
        flex-direction: column;
        align-items: center; /* 아이템들을 중앙에 배치 */
        gap: 15px; /* 모바일 아이템 간격 */
        margin: 30px auto;
    }

    /* 🌟 개별 링크 박스 (모바일: 1열 배치) */
    .process-link-item {
        width: 100%;
        max-width: 316px; /* 모바일 최대 너비 제한 */
        height: 180px; /* 높이 약간 줄임 */
    }
    
    /* 🌟 1. 상단 이미지 */
    .process-link-item .process-logo-image {
        margin-bottom: 15px;
    }

    /* 🌟 2. 타이틀 */
    .process-link-item .process-title {
        font-size: 16px;
        margin-bottom: 15px;
    }

    /* 🌟 3. 버튼 */
    .process-link-item .process-apply-btn {
        width: 100px;
        height: 35px;
        font-size: 14px;
    }
}
@media (max-width: 600px) {
    .process-link-area {
        flex-direction: column; /* 600px 이하에서는 링크를 세로로 쌓기 */
        gap: 15px;
    }
    .process-link-item {
        max-width: 100%; /* 너비 꽉 채우기 */
    }
}


/* ================================================================= */
/* 26. Partner Section Styles (파트너 페이지) */
/* ================================================================= */

/* 🌟 1. 파트너 인트로 섹션 (partner_bg 배경) 🌟 */
.partner-intro-section {
    position: relative;
    width: 100%;
    /* 흰색 섹션과의 겹침을 위해 충분한 하단 패딩 확보 */
    padding-top: 150px; 
    padding-bottom: 300px; 
}

/* 🌟 Full Width 배경을 위한 ::before 유사 요소 🌟 */
.partner-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; 
    /* 💥 Full Width 확장을 위한 핵심 로직 */
    width: 100vw; 
    margin-left: -50vw; 
    
    height: 440px; 
    background-image: url('/assets/img/partner_bg.png'); 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1; 
}

/* 1400px 중앙 콘텐츠 영역 */
.partner-content-area {
    /* main-wrapper 클래스 사용 시 max-width와 margin: auto는 이미 적용됨 */
    position: relative;
    z-index: 2; /* 배경 위에 오도록 */
    
    /* 텍스트 영역의 세로 중앙 정렬을 위한 Flexbox (필요시) */
   display: flex;
    flex-direction: column;  /* 세로 배치 */
    align-items: flex-start; /* 왼쪽 정렬 */

    min-height: 200px; /* 텍스트 영역 최소 높이 */
}

.partner-intro-text {
    /* 텍스트 세로 중앙 정렬을 위해 플렉스 항목으로 설정 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* main-wrapper가 1400px을 담당하므로 너비 설정은 생략 */
	margin-top:-100px;
}

.partner-title {
    text-align: left;
    color: #ffffff; 
    font-size: 40px; 
    font-weight: 800; /* Extra Bold */
    margin-bottom: 20px;
}

.partner-description {
    text-align: left;
    color: #ffffff; 
    font-size: 18px; 
    font-weight: 400; /* Regular */
    line-height: 1.6;
}

/* ----------------------------------------------------------------- */

/* 🌟 2. 모집 대상 섹션 (겹치는 흰색 영역) 🌟 */
.partner-target-section {
    position: relative;
    width: 100%;
    
    /* 💥 partner_bg 하단 100px 지점부터 시작하도록 음수 마진 적용 */
    /* partner-intro-section의 하단 패딩(300px)을 고려하여 조정 */
    margin-top: -280px; /* (예시 값: 250px) - 이 값은 이미지 높이에 따라 조정 필요 */
    
    background-color: #ffffff; /* 흰색 배경 */
    padding-top: 50px; /* 내부 콘텐츠 상단 여백 */
    padding-bottom: 100px; /* 내부 콘텐츠 하단 여백 */
    z-index: 5; /* partner_bg 위에 확실히 겹치도록 */


}

.process-text-area {
    display: flex;
    flex-direction: column;  /* 세로 배치 */
    align-items: flex-start; /* 왼쪽 정렬 */
}

/* 모집대상 타이틀 */
.target-title {
    text-align: left;
    color: #333333; 
    font-size: 24px; 
    font-weight: 700; /* Bold */
    margin-bottom: 30px;
	display:block;


}


/* 모바일 조정 */
@media (max-width: 1023px) {
    .partner-intro-section {
        padding-top: 0px; 
        padding-bottom: 200px;
		border:0px solid yellow;
    }

	.partner-intro-text {

	margin-top:20px;
	border:0px solid yellow;
}

    .partner-title {
        font-size: 26px;
        text-align: center;
    }
    .partner-description {
        font-size: 16px;
        text-align: center;
    }
    
    .partner-target-section {
        margin-top: -120px; /* 모바일 겹침 조정 */
    }
    .target-title {
        font-size: 20px;
    }
    
}


/* ----------------------------------------------------------------- */
/* 🌟 2. 모집 대상 섹션 스타일 (추가) */
/* ----------------------------------------------------------------- */

/* F3F9FF 박스 */
.target-box-bg {
    width: 100%;
    /* 💥 높이 100px 유지 */
    height: 100px; 
    background-color: #F3F9FF;
    border-radius: 5px; 
    
    /* 💥 내부 아이템 배치를 위한 Flexbox 설정 */
    display: flex;
    align-items: center; /* 내부 wrapper를 세로 중앙에 정렬 */
    padding: 0 5px; /* 좌우 내부 패딩 */
	border:0px solid yellow;

}

/* 5개 항목을 감싸는 래퍼 */
.target-items-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 항목 간 간격을 균등하게 분배 */
    gap: 10px; /* 항목 사이 최소 간격 */
}

/* 각 항목 아이템 */
.target-items-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 간격 균등 분배는 유지 */
    gap: 10px; /* 항목 간 간격 */
	margin:0 20px;
}

/* 아이콘 스타일 */
.target-icon {
    width: 18px; /* 요청하신 18px */
    height: 18px; /* 요청하신 18px */
    margin-right: 8px; /* 아이콘과 텍스트 사이 간격 */
    flex-shrink: 0; /* 아이콘이 줄어들지 않도록 */
}

/* 텍스트 스타일 */
.target-text {
    color: #333333; 
    font-size: 16px; 
    font-weight: 500; /* Medium */
    line-height: 1.2;
}


/* 모바일 조정 */
@media (max-width: 1200px) {
    /* 1200px 이하에서는 5개 항목을 한 줄에 표시하기 어려울 수 있습니다. */
    .target-items-wrapper {
        flex-wrap: wrap; /* 다음 줄로 넘어가도록 설정 */
        justify-content: flex-start; /* 왼쪽 정렬 */
        gap: 20px 30px; /* 행과 열 간격 조정 */
    }
    .partner-target-item {
        flex-basis: auto; /* 너비 자동 조절 */
    }
}

@media (max-width: 768px) {
    .target-box-bg {
        height: auto; /* 모바일에서 높이 자동 조절 */
        padding: 0;
		  background-color: #ffffff;
    }
    .target-items-wrapper {
        flex-direction: column; /* 세로로 쌓기 */
        gap: 15px;
		margin:0 0px;
    }


}


.partner-process-divider {
    width: 100%;
    max-width: 1400px;
    height: 1px;
    /* dddddd 색상 적용 */
    background-color: #eeeeee; 
    margin: 50px auto; 
}


/* 🌟 협력사 등록 절차 안내 헤더 영역 (2단 레이아웃) 🌟 */
.partner-process-header {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: flex-end; /* 텍스트 하단을 기준으로 정렬 */
  
    padding: 0 0 10px 0; /* 필요시 하단 패딩 */
}

/* 왼쪽: 타이틀 스타일 */
.process-guide-title {
    text-align: left;
    color: #333333; 
    font-size: 24px; 
    font-weight: 700; /* Bold */
    line-height: 1.2;
    flex-shrink: 0;
}

/* 오른쪽: 안내 텍스트 스타일 */
.process-guide-note {
    text-align: right; /* 오른쪽 정렬 */
    color: #333333; 
    font-size: 14px; 
    font-weight: 500; /* Medium */
    line-height: 1.2;
    margin-left: 20px; /* 타이틀과의 최소 간격 확보 */
}

/* 💥 오른쪽 텍스트 내 '*' 기호 색상 */
.process-guide-note .highlight-star {
    color: #0391FE; /* 요청하신 0391FE 컬러 */
    font-size: 14px;
    font-weight: 700;
}

/* 모바일 조정 */
@media (max-width: 768px) {

.partner-process-divider {
    width: 100%;
    max-width: 1400px;
    height: 1px;
    /* dddddd 색상 적용 */
    background-color: #eeeeee; 
    margin: 20px auto; 
}

    .partner-process-header {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: flex-start; /* 왼쪽 정렬 */
        gap: 10px;
        margin-top: 30px;
    }
    .process-guide-note {
        text-align: left;
        margin-left: 0;
    }

	.process-guide-title {

		font-size: 20px; 

	}

}


/* 🌟 단계를 감싸는 행 컨테이너 */
.process-steps-row {
    width: 100%;
    max-width: 1400px; /* 섹션 최대 너비 (조정 필요) */
    margin: 0px auto;
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: space-between; /* 항목 사이에 균등 간격 */
    gap: 15px; /* 항목 간 최소 간격 */
}

/* 🌟 개별 단계 박스 (274x100) */
.process-step-item {
    width: 274px;
    height: 100px;
    flex-shrink: 0;
    
    /* 요청 사양 */
    background-color: #F4F4F4;
    border-radius: 8px; /* 모서리 둥글게 (선택 사항) */
    padding: 0 15px; /* 내부 여백 */
    box-sizing: border-box;

    /* 내부 콘텐츠 정렬 (이미지 + 텍스트를 가로로 배열) */
    display: flex;
    align-items: center; 
 justify-content: center; 
    transition: background-color 0.3s;
    text-decoration: none; /* a 태그로 사용할 경우 */
}

/* 🌟 마지막 단계 박스 배경색 변경 */
.process-steps-row .process-step-item:last-child {
    background-color: #27559B; /* 기본 배경색을 오버 색상과 동일하게 설정 */
}

/* 🌟 마지막 단계 박스 텍스트/이미지 색상 변경 */
.process-steps-row .process-step-item:last-child .process-step-text,
.process-steps-row .process-step-item:last-child .process-step-image {
    color: #FFFFFF; /* 텍스트 흰색으로 변경 */
    /* 이미지 필터로 색상 변경 (필요시) */
    /* filter: brightness(0) invert(1); */
}

/* 🌟 마우스 오버 효과 (마지막 항목은 오버해도 색상 유지) */
.process-step-item:hover {
    background-color: #27559B; 
}
/* 마지막 항목은 호버해도 배경색 변경 없음 */
.process-steps-row .process-step-item:last-child:hover {
    background-color: #27559B; /* 동일 색상 유지 (또는 살짝 어둡게 #204c8f) */
}


.process-step-item:hover .process-step-text,
.process-step-item:hover .process-step-image {
    color: #FFFFFF !important; /* 텍스트 색상 변경 */
    /* 이미지 필터로 색상 변경 (필요시) */
    /* filter: brightness(0) invert(1); */
}


/* 🌟 1. 이미지 */
.process-step-item .process-step-image {

    object-fit: contain;
    padding-right:15px;
    flex-shrink: 0;
}

/* 🌟 2. 텍스트 (18px, #333333) */
.process-step-item .process-step-text {
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    margin: 0;
}

/* 🌟 화살표 (PC: 기존 이미지 사용) */
.process-arrow {
    flex-shrink: 0;
    width: 50px; /* 화살표 크기 조정 */
    height: auto;
    display: flex; /* PC에서는 표시 */
    align-items: center;
    justify-content: center;
}
.process-arrow .process-arrow-image.mobile-only {
    display: none;
}


/* 🌟 등록 신청 버튼 영역 🌟 */
.process-button-area {
margin:0 auto;
    text-align: center; /* 버튼 중앙 정렬 */
    margin-bottom: 50px; /* 하단 여백 */
}

.register-partner-btn {
    display: inline-block; /* 너비 조정을 위해 */
    padding: 15px 40px; 
    
    /* 💥 배경은 없고 라인(테두리) */
    background-color: transparent; 
    border: 1px solid #333333; /* 요청하신 라인 333333 */
    border-radius: 5px; 
    
    /* 텍스트 스타일 */
    color: #333333; /* 요청하신 텍스트 333333 */
    font-size: 18px; 
    font-weight: 600; /* Semibold */
    text-decoration: none; /* 밑줄 제거 */
    
    transition: background-color 0.2s, color 0.2s;
}

.register-partner-btn:hover {
    background-color: #333333; /* 호버 시 색 반전 (선택적) */
    color: #ffffff;
}


/* 모바일 조정 */
@media (max-width: 768px) {
   /* ---------------------------------------------------- */
    /* Process Steps (.process-steps-row) 모바일 조정 */
    /* ---------------------------------------------------- */
    /* 🌟 단계를 감싸는 행 컨테이너 (세로 배열) */
    .process-steps-row {
        width: 100%;
        max-width: 316px; 
        flex-direction: column; /* 세로로 쌓기 */
        gap: 0; /* 간격은 아이템 마진으로 처리 */
        margin: 30px auto;
    }

    /* 🌟 개별 단계 박스 (모바일: 1열 배치) */
    .process-step-item {
        width: 100%;
        height: 80px; /* 모바일 높이 조정 */
        margin-bottom: 0; 
    }
    
    /* 🌟 텍스트 (18px -> 16px) */
    .process-step-item .process-step-text {
        font-size: 16px;
    }

    /* 🌟 화살표 (모바일: 세로 화살표 이미지 사용) */
    .process-arrow {
        width: 100%;
        height: 40px; /* 화살표 이미지 간격 */
        margin: 5px 0;
        display: flex; /* 모바일에서 표시 */
        transform: rotate(-180deg); /* PC 화살표 이미지를 90도 돌려 세로 화살표처럼 사용 */
        /* 만약 별도 모바일 화살표 이미지를 사용한다면 아래와 같이 설정 */
        /*
        .process-arrow-image.pc-only { display: none; }
        .process-arrow-image.mobile-only { display: block; transform: rotate(0); }
        */
    }
    .process-arrow .process-arrow-image {
        width: 20px;
        height: auto;
    }



	/* 🌟 마지막 단계 박스 배경색 변경 */
    .process-steps-row .process-step-item:last-child {
        background-color: #27559B; /* 기본 배경색을 오버 색상과 동일하게 설정 */
    }

    /* 🌟 마지막 단계 박스 텍스트/이미지 색상 변경 */
    .process-steps-row .process-step-item:last-child .process-step-text,
    .process-steps-row .process-step-item:last-child .process-step-image {
        color: #FFFFFF; /* 텍스트 흰색으로 변경 */
        /* 이미지 필터로 색상 변경 (필요시) */
        /* filter: brightness(0) invert(1); */
    }

    /* 마지막 항목은 호버해도 배경색 변경 없음 */
    .process-steps-row .process-step-item:last-child:hover {
        background-color: #27559B; 
    }
}




/* ================================================================= */
/* 27. Partner Form Section Styles (정보 입력 폼) */
/* ================================================================= */

.partner-form-section {
    width: 100%;
    display: flex;
    justify-content: center; /* 폼 컨테이너 중앙 정렬 */
    padding: 0px 0;
}

.partner-input-container {
    width: 100%;
    max-width: 600px; /* 요청하신 너비 600px */
    padding: 0 20px; /* 좌우 패딩 (모바일 대응) */
	margin-bottom:150px;
}

/* 폼 헤더 및 타이틀 */
.partner_input_header {
    width: 100%;
    padding: 0 0 15px 0;
    margin-bottom: 0px; /* 타이틀 아래 폼과의 간격 */
    border-top: 1px solid #333333; /* 요청하신 상단 1px 라인 333333 */
}

.partner_input_header_bottom {
    width: 100%;
    padding: 0 0 0px 0;
    margin-bottom: 20px; /* 타이틀 아래 폼과의 간격 */
    border-bottom: 1px solid #333333; /* 요청하신 상단 1px 라인 333333 */
}


.partner_input_title {
    text-align: left;
    color: #333333; 
    font-size: 20px; 
    font-weight: 800; /* Extra Bold */
    margin: 20px 0;
}

/* 폼 그룹 (라벨 + 인풋) */
.partner_input_group {

    display: flex;
    align-items: center;
	flex-wrap: wrap; /* 줄바꿈 허용 */
    margin-bottom: 15px; /* 그룹 간 간격 */
    border-bottom: 0px dashed #dddddd; /* 인접한 항목 간 구분선 (선택적) */
    padding-bottom: 15px;
	gap:50px;
}

/* 라벨 스타일 (회사명*, 사업자번호* 등) */
.partner_input_label {
    flex-shrink: 0; /* 라벨이 줄어들지 않도록 */
    width: 240px; /* 라벨 너비 고정 */
    text-align: left;
    color: #333333; 
    font-size: 16px; 
    font-weight: 400; /* Regular */
    line-height: 1.2;
	border:0px solid yellow;
	white-space: nowrap;
}


/* 라벨 옆에 입력 필드/텍스트 영역을 가로로 정렬할 때 사용 */
.partner_input_align_row {
    display: flex;
    align-items: flex-start; /* 텍스트 영역 때문에 상단 정렬 */
}


/* 필수 항목 (*) 표시 */
.partner_input_label.required::after {
    content: '*';
    color: #0391FE;
    margin-left: 5px;
}

/* 문의내용, 첨부파일 등 가로 정렬 시 라벨의 고정 너비 지정 */
.partner_input_group .partner_input_label {
    flex-shrink: 0; /* 라벨 너비 고정 */
    width: 100px; /* 라벨 너비 (이미지 기반) */
    /* 필요에 따라 라벨 폰트/색상 지정 */
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* 텍스트 영역의 라벨 정렬 조정 (텍스트 영역이 높으므로) */
.partner_input_align_row .partner_input_label {
    padding-top: 10px; /* 텍스트 영역의 시작점에 맞추기 위한 패딩 */
}


/* 문의내용 텍스트 영역 스타일 */
.partner_input_textarea_custom {
    flex-grow: 1; /* 남은 공간을 모두 차지 */
    min-height: 150px; /* 최소 높이 */
    width: 70%;
    padding: 15px;
    background-color:#F4F4F4;
    border: 0px solid #cccccc; 
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333333;
    resize: vertical; /* 수직 크기 조절만 허용 */
}


/* 2. 첨부파일 커스터마이징 */
.file-input-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1; /* 나머지 공간 차지 */
}

.file-input-wrapper .file-display-field {
    /* 파일명 표시 인풋 필드의 높이를 커스텀 버튼에 맞춥니다. */
    height: 45px;
    margin-right: 10px; /* 버튼과의 간격 */
    flex-grow: 1;
}

/* 실제 input type=file을 시각적으로 숨김 */
.hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 커스텀 첨부파일 버튼 스타일 */
.custom-file-button {
    flex-shrink: 0; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    line-height: 45px; /* 텍스트 수직 중앙 정렬 */
    padding: 0 20px;
    background-color: #555555; 
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

/* 3. DDDDDD 라인 스타일 */
.divider-dddddd {
    border: none;
    border-top: 1px solid #DDDDDD; /* 요청 색상 */
    margin: 30px 0; /* 상하 여백 */
}

/* 인풋/텍스트에어리어 필드 */
.partner_input_field,
.partner_input_textarea {
    flex-grow: 1; /* 남은 공간을 모두 채움 */

    width: 70%;
    height: 45px;
    padding: 0 15px;
	background-color:#F4F4F4;
    border: 0px solid #cccccc; 
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333333;
    transition: border-color 0.2s;
	border:0px solid yellow;
}

.partner_input_textarea {
    resize: vertical; /* 세로 크기만 조절 가능 */
    height: auto;
    min-height: 100px;
    padding: 10px 15px;
}

.partner_input_field:focus,
.partner_input_textarea:focus {
    border-color: #0391FE;
    outline: none;
}


/* sub.css 파일에 반드시 포함되어야 할 코드 */
 .password-guide-text1 {
    /* 이 속성이 가장 중요합니다. 요소를 블록처럼 만들어 새 줄에서 시작하도록 합니다. */
    flex-basis: 100%;   /* 한 줄 전체 차지 */

	display:block;
    width:100%;
    /* 나머지 요청 스타일 */
    font-size: 13px;
    color: #0391FE; 
    margin-top: -20px; /* input과의 간격 */
	margin-left:150px;
	margin-bottom:20px;
    line-height: 1.4;
    font-weight: 500;
	border:0px solid yellow;

}



/* 모바일 조정 */
@media (max-width: 650px) {
    .partner-input-container {
        max-width: 100%;
        padding: 0 15px;
    }
    .partner_input_group {
        flex-direction: column; /* 세로로 쌓기 */
        align-items: flex-start;
        padding-bottom: 10px;
		gap:0px;
    }



    .partner_input_label {
        width: 100%; /* 라벨 너비 100% */
        margin-bottom: 5px;
    }
    .partner_input_field,
    .partner_input_textarea {
	width:100%;
        height: 40px;
    }
    .partner_input_textarea {
        min-height: 80px;
    }

	.password-guide-text1 {
        font-size: 10px;
		margin-left:0px;

    }

	/* 1. 문의 내용 텍스트 영역 */
    .partner_input_textarea_custom {
        width: 100% !important; /* 부모 너비 전체 사용 */
        min-width: 100% !important; /* 너비가 줄어들지 않도록 방지 */
        box-sizing: border-box; /* 패딩과 보더가 전체 너비 안에 포함되도록 설정 */
    }

  
}



/* ----------------------------------------------------------------- */
/* 🌟 27. Partner Form Section Styles - 동의 및 버튼 추가 */
/* ----------------------------------------------------------------- */

/* 동의 영역 전체 래퍼 */
.partner_agree_wrapper {
    margin-top: 0px; 
}

/* 정보 안내 박스 (DDDDDD 라인 박스) */
.partner_agree_box {
    width: 100%;
    border: 1px solid #DDDDDD; /* 요청하신 DDDDDD 라인 */
    background-color: #ffffff; /* 박스 배경색 (구분 용도) */
    padding: 10px 15px;
    margin-bottom: 20px; /* 체크박스와의 간격 */
    box-sizing: border-box;
	border-radius:5px;
}

/* 안내 텍스트 */
.partner_agree_text {
    text-align: left;
    color: #666666; /* 요청하신 666666 */
    font-size: 13px; /* 요청하신 13px */
    font-weight: 400; /* Regular */
    line-height: 1.4;
    margin: 0;
}

/* 동의 체크박스 영역 (오른쪽 정렬) */
.partner_agree_check_area {
    width: 100%;
    text-align: right; /* 오른쪽 정렬 */
    margin-bottom: 30px;
}

.partner_agree_label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* 체크박스 스타일 (20px 크기 및 숨김 처리) */
.partner_input_checkbox {
    /* 기본 체크박스는 숨기고 커스텀 스타일링을 위해 ::before를 사용할 수 있으나, */
    /* 간단하게 인풋 크기만 조정합니다. */
    width: 20px; 
    height: 20px; 
    margin-right: 5px; 
    flex-shrink: 0;
}

/* '동의합니다' 텍스트 */
.partner_check_text {
    color: #333333;
    font-size: 14px; 
    font-weight: 500; /* Medium */
    line-height: 1;
}


/* 🌟 신청하기 버튼 🌟 */
.partner_submit_area {
    text-align: center;
    margin-top: 20px; /* 폼 하단 라인과의 간격 */

	border:0px solid yellow;
}

.partner_submit_btn {
    width: 100%;
    max-width: 250px; /* 버튼 최대 너비 (선택적) */
    height: 55px; 
    max-width: 100%; /* 부모의 100%를 사용하도록 설정 */
    background-color: #0391FE; /* 요청하신 BG 0391FE */
    color: #ffffff; /* 요청하신 텍스트 FFFFFF */
    
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700; /* Bold (강조를 위해 Semibold 대신 사용) */
    cursor: pointer;
    transition: background-color 0.2s;
}

.partner_submit_btn:hover {
    background-color: #007acc; /* 호버 효과 */
}


/* 폼 하단 라인 (위치 조정) */
.partner_input_footer {
    width: 100%;
    border-top: 1px solid #333333;
    /* 폼의 마지막 그룹과 버튼 영역 사이에 위치하도록 마진 조정 */
    margin-top: 50px; 
}

.partner_submit_area button {
    height: 50px; /* 버튼 높이 (충분함) */
    padding: 0 30px; /* 좌우 패딩 (충분함) */
    
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    
    flex-grow: 1; 
    
    /* 💡 버튼이 너무 작아지는 것을 방지하기 위해 최소 너비 추가 */
    min-width: 100px; /* 내용이 적더라도 최소 100px 너비 확보 */
}

/* 버튼 중앙 정렬 컨테이너 */
.button-group-center {
    display: flex;
    justify-content: center; /* 버튼 그룹 자체는 중앙 정렬 */
    align-items: stretch; /* 버튼들이 컨테이너 높이에 맞춰 늘어나도록 (옵션) */
    gap: 10px; /* 버튼 사이 간격 */
    margin-top: 30px;
    /* 버튼의 비율을 제어하기 위해 너비를 설정할 수 있습니다. 
       전체 폼 너비 내에서 비율을 적용하려면 이 컨테이너의 너비가 100%여야 합니다. */
    width: 100%; 
}

/* 목록으로 버튼 (30% 비율) */
.partner_btn_outline_blue {
    /* 💡 30% 비율 설정 */
    flex-basis: 30%; 
	width:180px;
    
    background-color: #ffffff;
    border: 1px solid #0391FE; 
    color: #0391FE; 
}

/* 문의하기 버튼 (70% 비율) */
.partner_btn_solid_blue {
    /* 💡 70% 비율 설정 */
    flex-basis: 70%;
    width:400px;
    background-color: #0391FE; 
    border: 1px solid #0391FE;
    color: #ffffff;
}


.partner_btn_outline_blue:hover {
    background-color: rgba(3, 145, 254, 0.05);
}


.partner_btn_solid_blue:hover {
    background-color: #0077d4;
    border-color: #0077d4;
}

@media (max-width: 600px) {
    .partner_submit_area button {
        font-size: 14px; /* 모바일에서 폰트 크기 줄임 */
        padding: 0 10px; /* 모바일에서 패딩 줄임 */
    }

	.partner_btn_outline_blue {
	width:30%;
	}

	.partner_btn_solid_blue {
		width:60%;
	}


}
/* 파일: sub.css (추가) */

/* ================================================================= */
/* 28. Product Contents Grid Styles (제품 소개) */
/* ================================================================= */

.product_contents_section {
    padding: 0px 0 80px 0 ;
}

/* 그리드 컨테이너: 2열 배치 */
.product_contents_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 중앙 정렬 */
    gap: 40px; /* 아이템 간 간격 */
    max-width: 1400px; 
    margin: 0 0  40px 0;
    padding: 0 20px;
}

/* 🌟 제품 아이템 박스 스타일 (기본) 🌟 */
.product_contents_item {
    position: relative;
    width: 660px; /* 요청하신 너비 */
    max-width: 100%;
    
    /* 기본 상태 */
    background-color: #F5F7FA;
    border: 1px solid #F5F7FA; /* 기본 배경과 동일한 라인 */
    border-radius: 10px;
    padding: 30px 20px 50px 20px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    
    /* 호버 애니메이션 준비 */
    transition: all 0.3s ease;
}

/* ---------------- 아이템 호버 효과 ---------------- */
.product_contents_item:hover {
    background-color: #FFFFFF;
    border-color: #0391FE; /* 라인 0391FE */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* ---------------- NEW 태그 ---------------- */
.product_contents_new_tag {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 65px;
    height: 34px;
    
    /* 기본 상태 */
    background-color: #333333;
    color: #FFFFFF;
    border-radius: 30px;
    
    /* 중앙 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* 🌟 NEW 태그 호버 효과 🌟 */
.product_contents_item:hover .product_contents_new_tag {
    background-color: #FFFFFF; /* 배경 흰색 */
    color: #0391FE; /* 텍스트 0391FE */
    border: 1px solid #0391FE; /* 테두리 추가 */
}

/* ---------------- 이미지 ---------------- */
.product_contents_media {
    margin: 25px 0 25px 0;
    text-align: center;
}

.product_contents_image {
    /* 309*191 이미지를 260px 컨테이너에 맞게 비율 유지하여 표시 */
    width: 100%; 
    height: auto;
    max-width: 309px; 
    display: block;
    margin: 0 auto;
}

/* ---------------- 타이틀 ---------------- */
.product_contents_title {
    color: #333333;
    font-family: 'Poppins', sans-serif; /* Poppins 폰트 필요 */
    font-size: 24px;
    font-weight: 700; /* Bold */
    margin-bottom: 30px;
    line-height: 1.3;
}

/* ---------------- 버튼 (자세히 보기) ---------------- */
.product_contents_button {
    display: inline-block;
    padding: 10px 25px;
    
    /* 기본 상태 */
    border: 1px solid #333333;
    background-color: transparent;
    color: #333333;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* 🌟 버튼 호버 효과 🌟 */
.product_contents_item:hover .product_contents_button {
    background-color: #0391FE; /* 배경 0391FE */
    color: #FFFFFF; 
    border-color: #0391FE;
}

/* ---------------- 모바일 조정 (1개씩) ---------------- */
@media (max-width: 768px) {
    .product_contents_grid {
        gap: 20px;
    }
    .product_contents_item {
        /* 모바일에서 1개씩 보이도록 너비 조정 */
        width: 100%; 
        max-width: 350px; /* 최대 너비 제한으로 중앙 정렬 */
    }
}



/* 파일: sub.css (추가) */

/* ================================================================= */
/* 29. Product Detail Section Styles (제품 상세) */
/* ================================================================= */

/* Full Width Background Section (배경색 #FAFAFA) */
.product_detail_full_section {
    position: relative;
    
    /* Full Width 배경을 위한 100vw hack (상위 요소 제약 우회) */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background-color: #FAFAFA; /* 요청하신 배경색 */
    padding: 80px 0; /* 상하 패딩 */
    z-index: 1; 
}

/* 1400px 콘텐츠 컨테이너 (main-wrapper 클래스 사용으로 max-width 확보) */
.product_detail_container {
    padding: 0 20px;
}

/* 1. 좌/우 2단 레이아웃 */
.product_detail_row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 💥 세로 중앙 정렬 */
    gap: 50px;
	border:0px solid yellow;
}

/* 2. 왼쪽 영역 (텍스트) */
.product_detail_text_area {
    flex: 1; 
    text-align: left;
}

.product_detail_title {
    color: #333333;
    /* font-family: 'Poppins', sans-serif; */ 
    font-size: 40px; 
    font-weight: 700; /* Bold */
    margin-bottom: 25px;
    line-height: 1.3;
    text-align: left;
}

.product_detail_description {
    color: #333333; 
    /* font-family: 'suit', sans-serif; */ 
    font-size: 16px; 
    font-weight: 400; /* Regular */
    line-height: 1.7;
    text-align: left;
}

/* 3. 오른쪽 영역 (이미지) */
.product_detail_media_area {
    flex-shrink: 0;
    width: 50%; 
    max-width: 600px;
}

.product_detail_images_wrapper {
    display: flex;
    gap: 20px; /* 이미지 간 간격 */
     align-items: stretch; 
    justify-content: center;
}

.product_detail_image {
     height: 254px; /* 💥 두 이미지 중 더 큰 높이(254px)로 고정 */
    display: block;
    border-radius: 8px; 
    object-fit: contain;
}

/* 이미지 크기 고정 */
.product_detail_image.detail_img_1 {
    width: 308px; 

}

.product_detail_image.detail_img_2 {
    width: 263px; 

}

/* 모바일 반응형 */
@media (max-width: 1024px) {
    .product_detail_full_section {
        padding: 50px 0;
    }
    .product_detail_row {
	width:90%;
        flex-direction: column; /* 세로로 쌓기 */
        gap: 30px;
		margin:0 20px;
    }



    .product_detail_text_area,
    .product_detail_media_area {
        width: 100%;
        max-width: 100%;
    }
    .product_detail_title {
        font-size: 30px;
        text-align: center;
    }
    .product_detail_description {
        text-align: center;
    }
   .product_detail_images_wrapper {
        gap: 10px;
        align-items: center;
    }
    /* 모바일에서는 높이 고정을 해제하고 비율 유지 */
    .product_detail_image {
        height: auto;
    }
    .product_detail_image.detail_img_1,
    .product_detail_image.detail_img_2 {
        width: 45%;
    }
}



/* ================================================================= */
/* 30. Product Option Section Styles (맞춤제작 옵션) */
/* ================================================================= */

.product_option_section {
    width: 100%;
    /* 💥 윗 섹션과의 겹침을 위한 음수 마진 (150px 위로 이동) */
    margin-top: -50px; 
    padding-bottom: 50px;
    position: relative;
    z-index: 10; 
}

/* 1400px 흰색 박스 컨테이너 */
.product_option_wrapper {
    background-color: #FFFFFF; /* 흰색 배경 */
    border-radius: 10px;

    
    /* 그림자 효과 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
    
    padding: 30px 40px; /* 내부 패딩 */
}

/* 옵션 로우 (왼쪽/오른쪽 분할) */
.product_option_row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 세로 중앙 정렬 */
    padding: 20px 0;
    gap: 30px;
}

/* 왼쪽 영역: 타이틀 및 아이콘 */
.product_option_title_area {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 30%; 
    max-width: 350px;
}

.product_option_icon {
    width: 16px; 
    height: 16px; 
    margin-right: 10px;
    flex-shrink: 0;
}

.product_option_title {
    color: #333333;
    /* font-family: 'suit', sans-serif; */ 
    font-size: 22px; 
    font-weight: 600; /* Semibold */
    margin: 0;
    line-height: 1.2;
    text-align: left;
}

/* 오른쪽 영역: 설명 텍스트 */
.product_option_description_area {
    flex-grow: 1;
    width: 70%;
}


.product_option_description_row {
    display: flex;
    justify-content: space-between; /* 항목 간 간격 균등 분배 */
    gap: 20px; /* 항목 사이 간격 */
    margin-bottom: 10px; /* 로우 간 간격 */
}

/* 설명 텍스트 각 항목 */
.product_option_text_item {
    width: 50%; /* 💥 한 행에 2개가 오도록 50% 너비 설정 */
    flex-shrink: 0;
    
    color: #333333; 
    /* font-family: 'suit', sans-serif; */ 
    font-size: 16px; 
    font-weight: 500; /* Medium */
    line-height: 1.7;
    text-align: left;
    margin: 0; /* 불필요한 마진 제거 */
}

/* 문장이 하나일 경우, 텍스트를 왼쪽 정렬하고 너비를 100%로 설정 */
.product_option_single_row .product_option_text_item {
    width: 100%;
}



.product_option_single_row .product_option_text_item_title{
	 text-align: left;
	 font-size: 22px;
	  font-weight: 700; /* Bold */
	  display:block;
	    padding: 0px 0px 20px 0;
}




.product_option_table {
    width: 100%;
    border-collapse: collapse; /* 셀 경계선 병합 */
    text-align: left;
    table-layout: fixed; /* 너비 고정을 위해 */
}

/* 테이블 헤더/데이터 공통 스타일 */
.product_option_table_header,
.product_option_table_data {
    padding: 12px 15px;
    font-size: 15px;
    border: 1px solid #DDDDDD; /* 요청하신 라인 DDDDDD */
}

/* 테이블 헤더 (첫 번째 열) */
.product_option_table_header {
    background-color: #EEEEEE; /* 옅은 배경색 */
    color: #333333;
    font-weight: 500; /* Medium */
    border-left: none; /* 좌측 라인 제거 */
	text-align:center;
}

/* 테이블 데이터 (두 번째 열) */
.product_option_table_data {
    background-color: #FFFFFF;
    color: #666666;
    font-weight: 400; /* Regular */
	text-align:center;
  
}

/* 첫 번째 로우 상단 라인 (필요시) */
.product_option_table tbody tr:first-child th,
.product_option_table tbody tr:first-child td {
    /* 상단 라인은 이미 1px solid #DDDDDD; 에 포함되므로 별도 처리 불필요 */
}

/* 마지막 로우 하단 라인 강조 (선택적) */
.product_option_table_last_row th,
.product_option_table_last_row td {
    border-bottom: 1px solid #DDDDDD; 
}

/* 하단 구분선 (DDDDDD) */
.product_option_separator {
    width: 100%;
    height: 1px;
    background-color: #DDDDDD; 
    margin: 10px 0; 
}


@media (max-width: 768px) {
    /* 🌟 1. 섹션 컨테이너: 좌우 패딩 설정 */
    .product-main-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 🌟 2. 섹션 컨테이너: 실제 좌우 여백을 여기에 적용 */
    .product_option_section {
		margin:20px auto;
        
        /* 좌우 패딩을 여기에 적용하여 내용물에 여백을 줍니다. */
        padding-left: 10px !important; 
        padding-right: 0px !important; 
        box-sizing: border-box;
    }

    /* 🌟 3. 옵션 래퍼 및 액션 영역: 컨테이너 너비 100% 강제 적용 */
    .product_option_wrapper,
    .product_option_action_area {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important; /* 혹시 모를 마진 제거 */
        
        /* 내부 콘텐츠의 깨짐을 막기 위한 가로 스크롤 허용 (최후의 수단) */
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 10px;
		background: none;
    }


	.product_option_wrapper {
    background-color: #FFFFFF; /* 흰색 배경 */
    border-radius: 10px;

    
    /* 그림자 효과 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
    
    padding: 30px 40px; /* 내부 패딩 */
}

    
    /* 🌟 4. [가장 중요] 래퍼 내부의 모든 고정 요소(이미지/테이블) 너비 강제 재설정 */
    .product_option_wrapper img,
    .product_option_wrapper table,
    .product_option_wrapper iframe,
    .product_option_wrapper .editor-content * { /* 에디터 내의 모든 요소 대상 */
        /* 내부 콘텐츠가 100%를 초과하지 않도록 최강력으로 설정 */
        max-width: 100% !important; 
        height: auto !important;
        box-sizing: border-box;
    }

    /* 🌟 5. 목록 버튼 스타일 (선택 사항: 버튼 중앙 정렬 및 확장) */
    .product_option_action_area {
        text-align: center; /* 내부 요소 중앙 정렬 */
        margin-top: 20px;
    }
    .product_option_list_btn {
		margin-top:20px;
        width: 100%; 
        max-width: 300px; /* 버튼 최대 너비 제한 */
        display: inline-block; /* 중앙 정렬을 위해 필요 */
        box-sizing: border-box;
    }
}

/* ================================================================= */
/* 31. Product Option Action Area (목록으로 버튼) */
/* ================================================================= */

/* 버튼 컨테이너: 중앙 정렬을 위해 사용 */
.product_option_action_area {
    width: 100%;
    max-width: 1400px;
    margin: 40px auto 0 auto; /* 상단 간격 조정 */
    text-align: center;
    padding: 0 20px;
}

/* 🌟 목록으로 버튼 스타일 🌟 */
.product_option_list_btn {
    display: inline-block;
    padding: 12px 30px;
    
    background-color: transparent; /* 배경 없음 */
    color: #0391FE; /* 요청하신 텍스트 컬러 0391FE */
    border: 1px solid #0391FE; /* 요청하신 라인 컬러 0391FE */
    
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 호버 효과 (선택적) */
.product_option_list_btn:hover {
    background-color: #0391FE;
    color: #FFFFFF;
}

/* 모바일 조정 */
@media (max-width: 768px) {
    .product_option_action_area {
        margin-top: 25px;
    }
    .product_option_list_btn {
        width: 100%;
        max-width: 200px; /* 모바일에서 적절한 너비 제한 */
        padding: 10px 20px;
        font-size: 15px;
    }
}



/* --- --------------------------------------------------------------------------------게시판 */
.bbs-section {
    padding-top: 80px; 
    padding-bottom: 80px; 
}
/* --- 게시판 헤더 (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;
    }
}

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

/* 페이징 중앙 정렬 영역 */
.business-pagination-area {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center;
    gap: 10px;
    padding: 20px 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: #0391FE;
    border-color: #0391FE;
    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 #333333;
    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;
}

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

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

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


/* 메타 정보 컨테이너: 좌우 분리 */
.meta-info-split {
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center;
    padding-top: 15px; /* 상단 제목과의 간격 */
    padding-bottom: 15px; /* 하단 내용과의 간격 */
    border-bottom: 1px solid #e0e0e0; /* 하단 구분선 */
}

/* 좌측 첨부파일 영역 */
.meta-item-left {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555555;
}

/* 우측 작성자/작성일 영역 */
.meta-item-right {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555555;
    gap: 20px; /* 작성자 - 작성일 사이 간격 */
}

/* 라벨(제목) 굵은 글씨 및 간격 설정 */
.meta-info-split .meta-label {
    font-weight: 700; /* 요청하신 굵은 글씨 */
    color: #333333;
    margin-right: 5px; /* 콜론 뒤 간격 */
}

/* 첨부파일 다운로드 아이콘 스타일 */
.meta-item-file {
    display: flex;
    align-items: center;
    gap: 5px;
}

.download-icon-link {
    display: flex; /* 링크 영역도 flex로 설정하여 아이콘 중앙 정렬 */
    align-items: center;
}

.download-icon {
    width: 16px;  /* 요청하신 16x16 */
    height: 16px; /* 요청하신 16x16 */
    vertical-align: middle;
}

/* --- 모바일 반응형 (@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-product-info {
        padding: 15px;
        margin-bottom: 30px;
    }

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

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

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

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

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


.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;

    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: 0px; 
    text-align: left; /* 타이틀 및 정보 중앙 정렬 */

}

.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: left;
}

/* 메타 정보 구분자 스타일 */
.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: 13px;
    }
}


/* --- 게시판 헤더 (PC: 16px, 굵은 글씨) --- */
.down-bbs-header {
    display: grid;
    /* PC 레이아웃: 번호(100px) | 제목(나머지) | 작성일(120px) */
    grid-template-columns: 100px 1fr 100px 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; /* 헤더 아래 라인 */
}

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

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


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

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

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

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

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



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

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

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

.down-bbs-list .notice-row .down-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) {
    
    .down-bbs-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

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

    }

	 .down-bbs-header .down-bbs-down {
        display: none; /* 작성일 숨김 */
    }

    
    .down-bbs-header .down-bbs-date {
        display: none; /* 작성일 숨김 */
    }


    
    .down-bbs-header .down-bbs-subject {
        padding-left: 10px;
    }

    /* 모바일 로우 */
    .down-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;
    }
    
    .down-bbs-row .down-bbs-no {
        /* 모바일에서는 번호를 제목 줄과 분리하여 좌측에 고정 */
        position: absolute;
        width: 50px;
        left: 0;
        text-align: center;
        margin-top: 3px;
    }

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

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

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

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

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



/* 🌟 왼쪽 하단 배경 이미지 🌟 */
body.min-h-screen { 
    position: relative; /* 자식 요소의 absolute 위치 기준 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
    min-height: 100vh; /* 전체 페이지 높이 확보 */
}

/* 🌟 배경 이미지가 푸터 위에 위치하도록 수정 🌟 */
.login-bg-decoration {
    /* 💥 수정: absolute로 변경하여 body를 기준으로 배치 */
    position: absolute; 
    
    /* 💥 수정: top: 0을 추가하여 body 전체 높이를 확보 (이미지 표시 영역 확보) */
    top: 0; 

    left: 0;
    
    width: 100%;
     min-height: calc(100vh - 360px);
    pointer-events: none; 
    z-index: -10; 
    
    /* 💥 핵심 수정: 절대 경로로 변경 (다른 이미지들과 동일한 형식) */
    background-image: url('/assets/img/member_b_bg.png'); 
    
    background-repeat: no-repeat;
    background-position: left bottom; /* 왼쪽 하단에 배치 */
    background-size: auto; 
}
/* 모바일 미디어 쿼리 (필요시 유지) */
@media (max-width: 768px) {
    .login-bg-decoration {
        display: none;
    }
}

/*로그인*/
.login-container {
  margin:0 auto;
  border: 0px solid #dddddd; /* Dddddd 라인 유지 */
  width: 100%;
  max-width: 420px;  /* PC에서는 320px, 모바일에서는 화면에 맞게 */
  text-align: center;
  padding: 20px;
  min-height: calc(100vh - 550px);



}

.login-container h2 {
  font-size: 40px;
  margin-bottom: 20px;
  font-weight: bold;
}

.login-container form input {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  border: 0px solid #ddd;
  background-color:#F4F4F4;
  border-radius: 4px;
  /* 💥 문제의 원인일 수 있는 padding: 0 10px; 은 width: 100%와 함께 사용 시 
     box-sizing: border-box;가 없으면 너비를 초과시킬 수 있습니다. */
  padding: 0 10px; 
  font-size: 14px;
  
  /* 💥 핵심 수정: 패딩을 너비 계산에 포함시켜 영역 초과 방지 */
  box-sizing: border-box; 
}

.page_login-btn {
  /* 💥 수정: 106% 대신 100%로 변경하여 부모 영역을 벗어나지 않도록 함 */
  width: 100%; 
  height: 60px;
  background: #0391FE;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 22px;
  
  cursor: pointer;
  transition: background 0.2s;
}

page_login-btn:hover {
  background: #007acc;
}

.pw_links {
  margin: 10px 0 30px 0;
}

.pw_links a {
  font-size: 16px;
  color: #666;
  text-decoration: none;
}

.page_sign-btn {
  width: 100%;
  height: 60px;
  border: 1px solid #0391FE;
  background: #fff;
  border-radius: 4px;
  font-size: 22px;
  color: #0095f6;
  cursor: pointer;
  transition: background 0.2s;
}

.page_sign-btn:hover {
  background: #f9f9f9;
}

/* 반응형 */
@media screen and (max-width: 480px) {

  .login-container {
    max-width: 90%;
    padding: 10px;
	margin:auto;

  }

  .login-container h2 {
    font-size: 20px;
  }

  .login-container form input {
    height: 40px;
    font-size: 13px;
  }

  .page_login-btn, .page_signup-btn {
    height: 42px;
    font-size: 14px;
  }
}

.regist-intro-content {
    /* 중앙 정렬을 위해 텍스트 정렬 설정 */
    text-align: center;
	margin-top:150px;

}

.regist-slogan {
    font-family: 'SUIT', sans-serif;
    font-size: 40px; /* 🌟 40px */
    font-weight: 700; /* 🌟 볼드 */
    color: var(--text-dark); /* 🌟 #333333 */
    line-height: 1.5;
    margin: 0 auto 50px; /* 하단에 50px 간격 */
    max-width: 1000px; /* 너무 넓게 퍼지지 않도록 최대 너비 설정 */
	letter-spacing:-2px;
	border:0px solid yellow;
}


.regist-desc {
    font-family: 'SUIT', sans-serif;
    font-size: 20px; /* 🌟 40px */
    font-weight: 700; /* 🌟 볼드 */
    color: var(--text-dark); /* 🌟 #333333 */
    line-height: 1.5;
    margin: 0 auto 10px; /* 하단에 50px 간격 */
    max-width: 600px; /* 너무 넓게 퍼지지 않도록 최대 너비 설정 */
	letter-spacing:-2px;
	border:0px solid yellow;
	text-align:left;
}

.regist-terms-textarea {
    /* 약관 영역의 고정된 크기 설정 */
    width: 100%; /* 너비는 부모에 맞게 */
    height: 300px; /* 원하는 높이로 지정 */
    
    /* 스크롤바 생성 */
    overflow-y: scroll; 
    
    /* 텍스트 내용이 컨테이너 밖으로 나가지 않도록 패딩 추가 */
    padding: 15px; 
    border: 1px solid #ccc; /* 테두리 추가 (선택 사항) */
    
    /* 텍스트 크기 및 기본 스타일 (인라인 스타일을 덮어쓰거나 통일) */
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 768px) {
	.regist-intro-content {
		/* 중앙 정렬을 위해 텍스트 정렬 설정 */
		text-align: center;
		margin-top:150px;

	}

	.regist-slogan {
		font-size: 20px; /* 🌟 40px */
		line-height: 1.2;
	}

	.regist-terms-textarea {
		width:90%;
	}


}

/* ================================================================= */
/* 42. Find ID/PW Styles (아이디/비밀번호 찾기) */
/* ================================================================= */

.find-container {
    padding-top: 50px; /* 상단 여백 추가 */
}

.find-page-title {
    /* .login-container h2 와 동일한 스타일 */
    font-size: 40px;
    margin-bottom: 30px; /* 탭 버튼과의 간격 */
    font-weight: bold;
    text-align: center;
}

/* 🌟 탭 버튼 컨테이너 🌟 */
.find-tabs {
    display: flex;
    justify-content: center; /* 버튼 중앙 정렬 */
    gap: 10px; /* 버튼 사이 간격 */
    margin-bottom: 30px; /* 폼과의 간격 */

}

/* 🌟 탭 버튼 기본 스타일 (비선택 상태) 🌟 */
.find-tab-btn {
    flex-grow: 1; /* 너비를 유연하게 채움 */
    max-width: 150px; /* 최대 너비 제한 */
    height: 50px;
    
    background-color: transparent; /* 배경 없음 */
    color: #333333; /* 요청하신 텍스트 컬러 333333 */
    border: 1px solid #DDDDDD; /* 요청하신 라인 컬러 DDDDDD */
    
    border-radius: 30px; /* 요청하신 radius: 10px */
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 🌟 탭 버튼 선택된 상태 (active) 🌟 */
.find-tab-btn.active {
    background-color: #0391FE; /* 요청하신 BG 0391FE */
    color: #FFFFFF; /* 요청하신 텍스트 컬러 흰색 */
    border-color: #0391FE; /* 선택된 색상과 동일하게 라인 변경 */
    font-weight: 700; /* 선택된 버튼 강조 */
}

/* 폼 컨테이너 */
.find-form-wrapper {
    width: 100%;
}

.find-form {
    /* .login-container form 스타일을 재활용 */
    display: flex;
    flex-direction: column;
}

.find-form.hidden {
    display: none;
}

.find-submit-btn {
    /* .page_login-btn 스타일을 재활용 */
    margin-top: 10px;
    width: 100%; /* 폼 너비에 맞게 조정 */
    height: 60px;
	font-size:22px;
	font-weight: 500; /* 선택된 버튼 강조 */
}

/* 모바일 환경 */
@media (max-width: 768px) {
    .find-page-title {
        font-size: 30px;
    }
    .find-tabs {
        gap: 5px;
        margin-bottom: 20px;
    }
    .find-tab-btn {
        height: 45px;
        font-size: 15px;
    }
}


/* ================================================================= */
/* 43. Find Result Page Styles (아이디 찾기 결과) */
/* ================================================================= */

.find-tabs-separator {
    display: block; 
    width: 100%;
    
    /* 💥 수정: 높이와 배경색을 제거하고 border-top 사용 */
    height: 0; /* 라인을 border로만 표현하기 위해 높이를 0으로 설정 */
    background-color: transparent; /* 배경색 투명 설정 */
    
    /* 💥 핵심 수정: border-top으로 1px 라인 명시 */
    border-top: 1px solid #333333; 
    
    /* 위아래 간격 재조정 */
    padding-top: 0; 
    margin-top: 20px; 
    margin-bottom: 30px; 
}

.find-result-wrapper {
    /* 폼 컨테이너와 동일하게 중앙 정렬되도록 설정 */
    width: 100%;
    max-width: 320px; /* .login-container의 폼 너비와 동일하게 설정 */
    margin: 0 auto;
    text-align: center;
}

/* 결과 아이콘 영역 */
.result-icon-area {
    margin-bottom: 15px;
}

.result-icon {
    width: 44px; /* 요청하신 44px */
    height: 44px; /* 요청하신 44px */
    object-fit: contain;
}


/* 🌟 새로 추가: 결과 페이지 메인 타이틀 🌟 */
.result-title {
    font-size: 26px; /* 요청하신 26px */
    font-weight: 700; /* 요청하신 Bold */
    color: #333333; /* 요청하신 333333 색상 */
    line-height: 1.4;
    text-align: center;
    
    /* 아이콘 및 하단 메시지와의 간격 조정 */
    margin-top: 20px; 
    margin-bottom: 20px; 
}


/* 안내 메시지 */
.result-message {
    font-size: 16px; /* 요청하신 16px */
    color: #333333;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* 🌟 아이디 표시 박스 (F4F4F4 배경, 60px 높이) 🌟 */
.result-id-box {
    display: flex;
    justify-content: center; /* 내부 텍스트 중앙 정렬 */
    align-items: center;
    
    width: 100%;
    height: 60px; /* 요청하신 60px 높이 */
    
    background-color: #F4F4F4; /* 요청하신 F4F4F4 배경 */
    border-radius: 4px;
    
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
}

.result-id-box .id-label {
    font-weight: 500;
    margin-right: 10px;
}

.result-id-box .found-id {
    font-weight: 700;
}

/* 로그인 버튼 */
.find-login-btn {
    /* .page_login-btn 스타일을 재활용 */
    margin-top: 0; 
    width: 100%;
    height: 60px;
}

/* 모바일 환경 */
@media (max-width: 768px) {
    .result-title {
        font-size: 22px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

	.result-message {
		font-size: 14px; /* 요청하신 16px */
		color: #333333;
		font-weight: 500;
		margin-bottom: 25px;
		line-height: 1.5;
	}

}

/* ================================================================= */
/* 비밀번호 확인 페이지 스타일 (화면 중앙 정렬 및 반응형) */
/* ================================================================= */

/* 전체 컨테이너: 가로/세로 중앙 정렬 */
.confirm-wrapper {
    /* main 태그에 display: flex가 있다고 가정하고, 내부에서 중앙 정렬 */
    display: block; 
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    width: 1400px;
    height: 800px; /* 부모(main) 높이에 맞춤 */
	margin-top:400px;

	border:1px solid yellow;
    
    /* 화면이 작을 때 스크롤이 가능하도록 min-height는 설정하지 않습니다. */
}

.confirm-form {
    width: 100%;
    max-width: 600px; /* 요청하신 최대 너비 */
    padding: 30px; /* 내부 컨텐츠와 외곽선 사이 여백 */
    box-sizing: border-box; 
    
    /* 중앙에 띄워진 느낌을 주기 위해 배경색과 그림자 추가 (선택 사항) */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 기존 제목, 라인, 버튼 스타일은 유지 */
/* ... (confirm-title, divider-333333, divider-dddddd, button-group-confirm 등) ... */


/* 🌟 반응형 처리: 화면이 600px보다 작아질 때 🌟 */
@media (max-width: 640px) {
    .confirm-form {
        /* 모바일 환경에서는 max-width를 해제하고 좌우 패딩만 유지 */
        max-width: 100%; 
        padding: 20px;
        
        /* 모바일 전체 화면 사용 시 중앙의 여백 제거 */
        margin: 20px;
    }
}


.mobile-menu-btn img {
    /* 트랜지션을 추가하여 색상 전환 시 부드럽게 보이도록 할 수 있습니다. */
    transition: filter 0.3s ease; 
}


/* body 태그에 'special-dark-header' 클래스가 있을 때만 적용 */
body.special-dark-header .mobile-menu-btn img {
    /* 1. filter: invert(100%)를 사용하여 흰색 이미지를 검은색으로 반전 */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    
    /* 2. 또는, 이미지가 단순한 검은색 아이콘이라면 다른 이미지로 교체하는 방법도 있습니다. */
    /* display: none; */
}

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

/* 페이지 컨테이너 기본 설정 */
.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;
    }
}