/* #intro 섹션에 배경 이미지 적용 */
#intro {
	height: calc(100vh - 78px);
		display: flex;
		align-items: center;
		justify-content: center;
		text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(0, 0, 0, 0.9);
		
		/* transition: background-color 0.3s; (유지) */
		
		/* 👇 2개 이미지 슬라이드쇼를 위한 CSS 수정 */
		background-color: var(--section-bg); /* 배경색 유지 */
		
		/* 2개의 이미지를 넣습니다. (오버레이 포함 총 3개 레이어) */
		/* 순서: Overly, b1, b5 */
		background-image: 
			linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
			url('../../assets/images/office/blueteck-1-16x9.jpg'), /* (2) - b1 이미지 */
			url('../../assets/images/office/Lab-Building.jpg'); /* (3) - b5 이미지 */
		
		background-size: cover; /* 영역 전체를 덮도록 설정 */
		background-position: center;
		background-repeat: no-repeat;
		
		/* 애니메이션 적용: 5초 간격으로 2개 이미지를 10초 동안 무한 반복 */
		animation: background-fade 10s infinite; /* 애니메이션 시간 10초로 변경 */
	}
	
	/* 다크 모드일 때 오버레이를 어둡게 변경 */
	body.dark-mode #intro {
		/* 👇 다크 모드 오버레이와 2개 이미지 경로 유지 */
		/* 순서: Overly, b1, b5 */
		background-image: 
			linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
			url('../../assets/images/office/blueteck-1-16x9.jpg'), 
			url('../../assets/images/office/Lab-Building.jpg');
	}
	
	
	
	@keyframes background-fade {
		/* 첫 번째 이미지 표시 (0% ~ 50%) */
		0%, 50% { 
			background-position: 
				center, /* 오버레이 */
				center, /* b1 (표시) */
				-9999px; /* b5 (숨김) */
		}
		
		/* 두 번째 이미지 표시 (50.01% ~ 100%) */
		50.01%, 100% {
			background-position: 
				center, /* 오버레이 */
				-9999px, /* b1 (숨김) */
				center; /* b5 (표시) */
		}
	}
	
	/* 👇 #ceo 섹션 스타일 수정: 배경 이미지 스타일 제거 */
	#ceo {
		background-size: initial;
		background-position: initial;
		background-repeat: initial;
	}

    /* #ceo 섹션 내부의 이미지와 텍스트를 정렬하기 위한 컨테이너 */
    .ceo-flex-container {
        display: flex;
        gap: 40px; /* 이미지와 텍스트 사이 간격 */
        align-items: stretch; /* 아이템의 높이를 동일하게 만듭니다. */
        margin-top: 40px; /* 섹션 제목과의 간격 */
    }

    /* 왼쪽 이미지 박스 스타일 (정사각형) */
    .ceo-image-box {
        background-image: url('../images/bg/about_bg2.jpg'); /* 이미지 경로 */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px; 
        
        /* 텍스트 내용의 높이에 이 박스의 높이가 맞춰지고, 그 높이에 맞춰 너비를 설정 (정사각형) */
        flex: 0 0 350px; /* 너비 고정 (데스크톱) */
        min-height: 350px; /* 최소 높이 설정 (정사각형 유지) */
    }
    
    /* 오른쪽 텍스트 컨텐츠 박스 스타일 */
    .ceo-text-content {
        flex: 1; /* 남은 공간을 모두 차지 */
    }
	/* 👆 #ceo 섹션 스타일 수정 끝 */
	
	
	/* 👇 #vision 섹션의 .vision-item 배경 이미지 스타일 (수정됨: #intro, #ceo와 동일한 오버레이 적용) */
	#vision .vision-grid .vision-item {
		padding: 30px;
		border-radius: 8px;
		/* 이전에 하드코딩된 color: #fff; 및 text-shadow 관련 스타일 제거. 테마 색상을 따릅니다. */
		transition: all 0.3s ease;
		min-height: 400px;
		justify-content: center;
		text-align: center;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	/* 첫 번째 vision-item (경영이념): vision_1.png */
	#vision .vision-grid .vision-item:nth-child(1) {
		/* 라이트 모드: #intro, #ceo와 동일한 밝은 오버레이 (White 80%) */
		background-image: 
			linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
			url('../images/bg/vison_1.jpg');
	}
	
	/* 두 번째 vision-item (비전): vision_2.png */
	#vision .vision-grid .vision-item:nth-child(2) {
		/* 라이트 모드: #intro, #ceo와 동일한 밝은 오버레이 (White 80%) */
		background-image: 
			linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
			url('../images/bg/vison_2.jpg');
	}
	
	/* 다크 모드일 때 오버레이를 어둡게 변경 (Black 80%) */
	body.dark-mode #vision .vision-grid .vision-item:nth-child(1) {
		background-image: 
			linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
			url('../images/bg/vison_1.jpg');
	}
	
	body.dark-mode #vision .vision-grid .vision-item:nth-child(2) {
		background-image: 
			linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
			url('../images/bg/vison_2.jpg');
	}
	
	/* vision-item 내부의 제목(h3) 및 비전 타이틀 색상 고정 스타일 제거 */
	#vision .vision-grid .vision-item h3 {
		text-align: center;
		/* 기존 color: #fff; 및 text-shadow 관련 스타일 제거 */
	}
	#vision .vision-grid .vision-item .vision-title {
		/* 기존 color: #fff; 및 text-shadow 관련 스타일 제거 */
	}
	/* 👆 #vision 섹션의 .vision-item 배경 이미지 스타일 수정 끝 */
	
	
	.about-section-container {
		padding: 100px 0;
	}
	.about-section-container h3 {
		border-bottom: 2px solid var(--primary-color);
		padding-bottom: 10px;
		margin-bottom: 20px;
		font-size: 1.5em;
	}
	.about-section-container p, .about-section-container li {
		font-size: 1.1em;
		line-height: 1.8;
		color: var(--text-color);
		margin-bottom: 1rem;
	}
	
	/* 👇 #history 섹션에 새로 추가된 div에 배경 이미지 적용 */
	.history-image-bg {
		/* 연혁 이미지는 세로로 길 수 있으므로 800px 정도로 설정합니다. */
		/* 실제 이미지 비율에 맞게 이 값을 조절하세요. */
		height: 900px; 
		margin-top: 20px;
		background-image: url('../images/bg/about_bg6.jpg'); /* 라이트 모드 기본 이미지 */
		background-size: cover; /* 이미지가 컨테이너를 꽉 채우도록(양 옆 여백 제거) */
		background-position: center top; /* 이미지를 상단에 정렬 (로고 보이게) */
		background-repeat: no-repeat;
		border-radius: 8px; /* 선택 사항 */
	}
	
	/* 다크 모드일 때 배경 이미지 변경 */
	body.dark-mode .history-image-bg {
		background-image: url('../images/bg/about_bg7.jpg'); /* 다크 모드 이미지 추가 */
	}
	/* 👆 .history-image-bg 추가 끝 */
	
	/* 기존 #organization img 스타일은 조직도 이미지를 div 배경으로 대체하면서 제거합니다. */
	
	/* 👇 #organization 섹션에 새로 추가된 div에 배경 이미지 적용 */
	.organization-image-bg {
		height: 400px; /* 적절한 높이 설정 */
		margin-top: 20px;
		background-image: url('../images/bg/about_bg4.jpg'); /* 라이트 모드 기본 이미지 */
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 8px; /* 선택 사항 */
	}
	
	/* 다크 모드일 때 배경 이미지 변경 */
	body.dark-mode .organization-image-bg {
		background-image: url('../images/bg/about_bg5.jpg'); /* 다크 모드 이미지 추가 */
	}
	/* 👆 .organization-image-bg 추가 끝 */
	
	
	.vision-grid { /* 새롭게 추가된 클래스 */
		display: flex;
		gap: 20px;
	}
	.vision-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
		margin-bottom: 20px;
	}
	.vision-item .vision-title {
		font-size: 40px; line-height: 1; padding: 0 5px;    margin-bottom: 2rem;	
	}
	.vision-item h3 {
		text-align: center;
	}
	/* 모바일 화면에서 상하로 정렬되도록 수정 */
	@media (max-width: 768px) {
		.vision-grid {
			flex-direction: column;
		}
        
        /* CEO 섹션 모바일 레이아웃: 이미지-텍스트 세로 정렬 */
        .ceo-flex-container {
            flex-direction: column;
            margin-top: 20px;
        }
        .ceo-image-box {
            flex: 0 0 100%; /* 너비 100% */
            min-height: 0; /* min-height 초기화 */
            height: 0; /* 높이를 0으로 설정 */
            padding-top: 100%; /* 너비에 맞춘 정사각형 (padding-top hack) */
            aspect-ratio: initial;
            background-size: cover;
            background-position: center;
        }
		
		/* 다크 모드일 때 오버레이를 어둡게 변경 */
		body.dark-mode #intro {
			/* 👇 다크 모드 오버레이와 2개 이미지 경로 유지 */
			/* 순서: Overly, b1, b5 */
			background-image: 
				linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), /* 다크 모드 오버레이 (1) */
				url('../../assets/images/office/blueteck-1-16x9.jpg'), 
				url('../../assets/images/office/Lab-Building.jpg');
		}
		
		/*
		  (주석 처리: 원본 파일의 @keyframes 중복 선언 오류 수정)
		@keyframes background-fade {
			0%, 50% { 
				background-position: 
					center,
					center,
					-9999px;
			}
			50.01%, 100% {
				background-position: 
					center,
					-9999px,
					center;
			}
		}
		*/
		
		/* 👇 #ceo 섹션 배경 이미지 스타일 (유지) */
		#ceo {
            /* 기존 스타일 제거 */
            background-size: initial;
            background-position: initial;
            background-repeat: initial;
		}
		
		/* 다크 모드일 때 오버레이를 어둡게 변경 */
		body.dark-mode #ceo {
			/* 기존 스타일 제거 */
		}
		/* 👆 #ceo 섹션 배경 이미지 스타일 끝 */
		
		
		/* 👇 #vision 섹션의 .vision-item 배경 이미지 스타일 (수정됨: #intro, #ceo와 동일한 오버레이 적용) */
		#vision .vision-grid .vision-item {
			padding: 30px;
			border-radius: 8px;
			/* 이전에 하드코딩된 color: #fff; 및 text-shadow 관련 스타일 제거. 테마 색상을 따릅니다. */
			transition: all 0.3s ease;
			min-height: 400px;
			justify-content: center;
			text-align: center;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		
		/* 첫 번째 vision-item (경영이념): vision_1.png */
		#vision .vision-grid .vision-item:nth-child(1) {
			/* 라이트 모드: #intro, #ceo와 동일한 밝은 오버레이 (White 80%) */
			background-image: 
				linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
				url('../images/bg/vison_1.jpg');
		}
		
		/* 두 번째 vision-item (비전): vision_2.png */
		#vision .vision-grid .vision-item:nth-child(2) {
			/* 라이트 모드: #intro, #ceo와 동일한 밝은 오버레이 (White 80%) */
			background-image: 
				linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
				url('../images/bg/vison_2.jpg');
		}
		
		/* 다크 모드일 때 오버레이를 어둡게 변경 (Black 80%) */
		body.dark-mode #vision .vision-grid .vision-item:nth-child(1) {
			background-image: 
				linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
				url('../images/bg/vison_1.jpg');
		}
		
		body.dark-mode #vision .vision-grid .vision-item:nth-child(2) {
			background-image: 
				linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
				url('../images/bg/vison_2.jpg');
		}
		
		/* vision-item 내부의 제목(h3) 및 비전 타이틀 색상 고정 스타일 제거 */
		#vision .vision-grid .vision-item h3 {
			text-align: center;
			/* 기존 color: #fff; 및 text-shadow 관련 스타일 제거 */
		}
		#vision .vision-grid .vision-item .vision-title {
			/* 기존 color: #fff; 및 text-shadow 관련 스타일 제거 */
		}
		/* 👆 #vision 섹션의 .vision-item 배경 이미지 스타일 수정 끝 */
		
		
		.about-section-container {
			padding: 100px 0;
		}
		.about-section-container h3 {
			border-bottom: 2px solid var(--primary-color);
			padding-bottom: 10px;
			margin-bottom: 20px;
			font-size: 1.5em;
		}
		.about-section-container p, .about-section-container li {
			font-size: 1.1em;
			line-height: 1.8;
			color: var(--text-color);
			margin-bottom: 1rem;
		}
		
		/* 👇 #history 섹션 이미지 스타일 (모바일) */
		.history-image-bg {
			height: 800px; /* 데스크탑과 동일하게 유지 (필요시 조절) */
			margin-top: 20px;
			background-image: url('../images/bg/about_bg6.jpg'); 
			background-size: cover; /* 이미지가 컨테이너를 꽉 채우도록 */
			background-position: center top; /* 이미지를 상단에 정렬 (로고 보이게) */
			background-repeat: no-repeat;
			border-radius: 8px;
		}
	
		/* 다크 모드일 때 배경 이미지 변경 (모바일) */
		body.dark-mode .history-image-bg {
			background-image: url('../images/bg/about_bg7.jpg'); 
		}
		/* 👆 .history-image-bg 추가 끝 */
		
		/* 기존 #organization img 스타일은 조직도 이미지를 div 배경으로 대체하면서 제거합니다. */
		
		/* 👇 #organization 섹션에 새로 추가된 div에 배경 이미지 적용 */
		.organization-image-bg {
			height: 400px; /* 적절한 높이 설정 */
			margin-top: 20px;
			/* 수정: 이미지 잘림 방지 및 비율 유지를 위해 'contain'으로 변경 */
			background-size: contain; 
			background-position: center;
			background-repeat: no-repeat; /* 이미지가 contain 될 때 반복 방지 */
			background-color: var(--section-bg); /* contain 시 남는 여백을 채울 배경색 */
			background-image: url('../images/bg/about_bg4.jpg'); /* 라이트 모드 기본 이미지 */
			border-radius: 8px; /* 선택 사항 */
		}
		
		/* 다크 모드일 때 배경 이미지 변경 */
		body.dark-mode .organization-image-bg {
			background-image: url('../images/bg/about_bg5.jpg'); /* 다크 모드 이미지 추가 */
		}
		/* 👆 .organization-image-bg 수정 완료 */
		
		
		.vision-grid { /* 새롭게 추가된 클래스 */
			display: flex;
			gap: 20px;
		}
		.vision-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15px;
			margin-bottom: 20px;
		}
		.vision-item .vision-title {
			font-size: 40px; line-height: 1; padding: 0 5px;    margin-bottom: 2rem;	
		}
		.vision-item h3 {
			text-align: center;
		}
		
		/* (주석 처리: 원본 파일의 @media 중첩 오류 수정)
		  @media (max-width: 768px) {
			.vision-grid {
				flex-direction: column;
			}
		}
		*/
	}
}