@charset "utf-8";

/* ===== FONT IMPORTS ===== */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ===== RESET & BASE STYLES ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; line-height: 1.6; }


/* ===== 재단소개 > 인사말 START ============================================================= */
/* ===== 1. 인사말 섹션 ===== */
.greeting-section { width: 100%; position: relative; margin-top: 180px; margin-bottom: 80px; } /* 인사말 메인 컨테이너 */
.sect-container { width: 1280px; height: 808px; margin: 0 auto; } /* 공통 섹션 컨테이너 (1280px 고정폭) */
.sect-title { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 35px; line-height: 41px; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; margin-bottom: 80px; } /* 섹션 제목 스타일 */
.greet-card { display: flex; gap: 80px; align-items: flex-start; } /* 인사말 카드 컨테이너 (이사장 사진 + 텍스트 영역) */
.greet-photo { flex-shrink: 0; /* 축소 방지 */ } /* 1-1. 이사장 사진 영역 */
.greet-photo img { width: 380px; height: 458px; object-fit: cover; object-position: center top; background-color: #f0f0f0; border-radius: 10px; }
.greet-body { width: 815px; display: flex; flex-direction: column; justify-content: flex-start; } /* 1-2. 인사말 텍스트 영역 */
.greet-headline { width: 669px; height: 118px; font-family: 'Gowun Batang', serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 40px; line-height: 60px; letter-spacing: 0px; color: #000000; text-align: left; margin: 0; padding: 0; } /* 인사말 제목 */
.greet-headline em { font: normal normal bold 40px/60px Gowun Batang; letter-spacing: 0px; color: #004778; font-style: normal; } /* 인사말 제목 내 강조 텍스트 (이사장 이름) */
.greet-text { height: 444px; margin-top: 30px; } /* 인사말 본문 컨테이너 */
.greet-text p { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: 28px; letter-spacing: 0px; color: #000000; text-align: justify; opacity: 1; margin-bottom: 28px; word-break: keep-all; /* 한글 단어 단위로 줄바꿈 */ word-wrap: break-word; /* 긴 단어 강제 줄바꿈 */ } /* 인사말 본문 단락 */
.greet-text p:last-child { margin-bottom: 0; } /* 마지막 단락은 하단 마진 제거 */
.greet-sign { height: 51px; font-family: 'Gowun Batang', serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 35px; line-height: 70px; letter-spacing: 0px; color: #000000; text-align: left; margin-top: 40px; padding: 0; } /* 인사말 서명 */
.greet-sign em { font-family: 'Gowun Batang', serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 35px; line-height: 70px; letter-spacing: 0px; color: #004778; text-align: left; } /* 서명 내 강조 텍스트 (이사장 이름) */



/* ===== 2. 이사회 섹션 ===== */
.board-section { width: 100%; background-color: #f8f8f8; margin-top: 0; padding: 120px 0; } /* 이사회 메인 컨테이너 (회색 배경) */
.board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 78px 115px; /* 행 간격 78px, 열 간격 115px */ margin-top: 40px; } /* 이사회 그리드 (2열 배치) */
.board-card { display: flex; gap: 40px; align-items: flex-start; background: transparent; } /* 2-1. 이사 카드 (사진 + 정보) */
.board-photo { flex-shrink: 0; /* 축소 방지 */ } /* 이사 사진 영역 */
.board-photo img { width: 150px; height: 170px; border-radius: 12px; object-fit: cover; }
.board-info { flex: 1; min-width: 0; /* flexbox 텍스트 오버플로우 방지 */ } /* 이사 정보 영역 */
.board-name { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 35px; font-weight: bold; line-height: 34px; color: #000000; letter-spacing: 0px; text-align: left; margin-bottom: 50px; } /* 2-2. 이사 이름 및 직책 */
.board-name .role { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: normal; line-height: 28px; color: #000000; letter-spacing: 0px; text-align: left; margin-left: 2px; } /* 이사 직책 (이사/감사 등) */
.board-career { display: flex; flex-direction: column; gap: 2px; } /* 2-3. 이사 경력 정보 컨테이너 */
.career-item { display: flex; align-items: flex-start; gap: 8px; } /* 개별 경력 항목 (현/전 배지 + 경력 텍스트) */
.career-badge { display: inline-block; width: 20px; height: 27px; text-align: center; flex-shrink: 0; } /* 경력 구분 배지 (現/前) 공통 스타일 */
.career-badge.current { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: normal; line-height: 28px; color: #000000; letter-spacing: 0px; text-align: left; opacity: 1; background: transparent; } /* 현재 직책 배지 스타일 (現) */
.career-badge.previous { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: normal; line-height: 28px; color: #000000; letter-spacing: 0px; text-align: left; opacity: 1; background: transparent; } /* 이전 직책 배지 스타일 (前) */
.career-text { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: normal; line-height: 28px; color: #000000; letter-spacing: 0px; text-align: left; opacity: 1; flex: 1; } /* 경력 세부 내용 텍스트 */
                        


/* ===== 3. 조직도 섹션 ===== */
.organization-section { width: 100%; background-color: #ffffff; margin-top: 0; padding: 180px 0; } /* 조직도 메인 컨테이너 (흰색 배경) */
.organization-grid { display: flex; justify-content: center; margin-top: 40px; } /* 조직도 이미지 컨테이너 */
.organization-grid img { max-width: 100%; height: auto; } /* 조직도 이미지 */

/* ===== 4. 반응형 CSS ===== */
/* 4-1. 작은 데스크톱 (1320px 이하) */
@media (max-width: 1320px) {
    .greeting-section { margin-bottom: 180px; } /* 인사말 섹션 하단 여백 */
    .sect-container { width: 100%; max-width: 1200px; padding: 0 40px; height: auto; } /* 섹션 컨테이너 반응형 */
    .greet-card { gap: 60px; } /* 인사말 카드 간격 조정 */
    .greet-photo img { width: 340px; height: auto; } /* 이사장 사진 크기 조정 */
    .greet-body { width: calc(100% - 340px - 60px); max-width: none; } /* 인사말 텍스트 영역 크기 */
    .greet-headline { width: 100%; font-size: 35px; line-height: 50px; } /* 인사말 제목 폰트 조정 */
    .greet-headline em {font-size: 35px; }
    .greet-text { height: auto; } /* 인사말 본문 높이 자동 */
    .greet-sign { font-size: 33px; } /* 서명 폰트 크기 */
    .board-grid { gap: 60px 40px; } /* 이사회 그리드 간격 */
    .career-text { font-size: 16px; } /* 경력 텍스트 폰트 크기 */
}

/* 4-2. 태블릿 (960px 이하) */
@media (max-width: 960px) {
    .greeting-section { margin-top: 80px; margin-bottom: 80px; } /* 인사말 섹션 여백 조정 */
    .board-section { padding: 40px 0; } /* 이사회 섹션 패딩 */
    .board-grid { grid-template-columns: 1fr; gap: 40px; } /* 이사회 그리드 1열 배치 */
    .board-card { gap: 30px; } /* 이사 카드 간격 */
    .board-name { font-size: 30px; margin-top: -2px; } /* 이사 이름 폰트 크기 */
    .board-name .role { font-size: 18px; line-height: 24px; } /* 이사 직책 폰트 */
    .greet-card { flex-direction: column; gap: 40px; align-items: center; } /* 인사말 카드 세로 배치 */
    .greet-photo img { width: 380px; height: 458px; } /* 이사장 사진 크기 */
    .greet-body { width: 100%; text-align: center; } /* 인사말 텍스트 영역 중앙 정렬 */
    .greet-headline { width: 100%; text-align: center; } /* 인사말 제목 중앙 정렬 */
    .greet-text { text-align: center; } /* 인사말 본문 중앙 정렬 */
    .greet-text p { text-align: left; } /* 인사말 단락 좌측 정렬 */
    .greet-sign { text-align: center; } /* 서명 중앙 정렬 */
    .career-text { font-size: 20px; } /* 경력 텍스트 폰트 크기 */
    .organization-section { padding-top: 80px; padding-bottom: 120px; } /* 조직도 섹션 패딩 */
}

/* 4-3. 모바일 (769px 이하) */
@media (max-width: 769px) {
    .greeting-section { margin-top: 80px; margin-bottom: 80px; } /* 인사말 섹션 여백 */
    .sect-container { height: auto; padding: 0 20px; } /* 섹션 컨테이너 패딩 */
    .sect-title { font-size: 28px; line-height: 34px; margin-bottom: 40px; } /* 섹션 제목 폰트 */
    .greet-card { flex-direction: column; gap: 30px; align-items: center; } /* 인사말 카드 세로 배치 */
    .greet-photo img { width: 100%; height: auto; } /* 이사장 사진 반응형 */
    .greet-body { width: 100%; text-align: center; } /* 인사말 텍스트 영역 중앙 정렬 */
    .greet-headline { width: 100%; height: auto; font-size: 28px; line-height: 36px; text-align: center; margin-bottom: 20px; } /* 인사말 제목 */
    .greet-headline em { font-size: 28px; }
    .greet-text { height: auto; margin-top: 20px; } /* 인사말 본문 */
    .greet-text p { font-size: 16px; line-height: 24px; text-align: left; margin-bottom: 20px; } /* 인사말 단락 */
    .greet-sign { font-size: 28px; line-height: 30px; text-align: center; margin-top: 30px; } /* 서명 */
    .greet-sign em { font-size: 28px; } /* 서명 강조 텍스트 */
    .board-section { padding: 80px 0; } /* 이사회 섹션 패딩 */
    .board-grid { gap: 30px; margin-top: 30px; } /* 이사회 그리드 간격 */
    .board-card { flex-direction: row; gap: 20px; text-align: left; align-items: flex-start; } /* 이사 카드 가로 배치 */
    .board-photo img { width: 120px; height: 140px; } /* 이사 사진 크기 */
    .board-info { margin-top: -8px; } /* 이사 정보 위치 조정 */
    .board-name { font-size: 18px; line-height: 32px; text-align: left; margin-top: 3px; margin-bottom: 44px; } /* 이사 이름 */
    .board-name .role { font-size: 15px; line-height: 24px; } /* 이사 직책 */
    .career-badge.current { font-size: 15px; line-height: 22px; } /* 현재 경력 배지 */
    .career-badge.previous { font-size: 15px; line-height: 22px; } /* 이전 경력 배지 */
    .career-item { margin-top: -5px; } /* 경력 항목 위치 조정 */
    .career-text { font-size: 15px; line-height: 22px; text-align: left; } /* 경력 텍스트 */
    .organization-section { padding: 80px 0; } /* 조직도 섹션 패딩 */
    .organization-grid { margin-top: 30px; } /* 조직도 그리드 여백 */
}

/* 4-4. 초소형 모바일 (440px 이하) */
@media (max-width: 440px) {
    .organization-grid img { content: url('/resources/images/directors/img_organization_mo.png'); } /* 조직도 이미지를 모바일용으로 변경 */
    .sect-title { font-size: 20px; line-height: 20px; margin-bottom: 20px; } /* 섹션 제목 최소 크기 */
    .greet-card { gap: 20px; } /* 인사말 카드 간격 최소화 */
    .greet-headline { font-size: 19px; text-align: left; letter-spacing: 0px; opacity: 1; } /* 인사말 제목 최소 크기 */
    .greet-headline em { font-size: 19px; }
    .greet-text { margin-top: 0px; } /* 인사말 텍스트 마진 제거 */
    .greet-text p { font-size: 16px; line-height: 23px; color: #000000; letter-spacing: 0px; opacity: 1; word-break: keep-all; word-wrap: break-word; text-align: left; } /* 인사말 본문 최소 폰트 */
    .greet-sign { margin-top: 20px; font-size: 19px; text-align: right; letter-spacing: 0px; opacity: 1; } /* 인사말 서명 최소 폰트 */
    .greet-sign em { font-size: 19px; font-weight: bold; line-height: 70px; color: #004778; letter-spacing: 0px; } /* 서명 강조 텍스트 최소 폰트 */
    .board-section { padding: 40px 0; } /* 이사회 섹션 최소 패딩 */
    .board-card { gap: 16px; } /* 이사 카드 간격 최소화 */
    .board-photo img { width: 84px; height: 95px; } /* 이사 사진 최소 크기 */
    .board-name .role { font-size: 12px; line-height: 24px; } /* 이사 직책 최소 폰트 */
    .board-info { margin-top: -12px; } /* 이사 정보 위치 조정 */
    .board-name { margin-top: 7px; margin-bottom: 17px; } /* 이사 이름 마진 조정 */
    .career-badge.current { font-size: 13px; line-height: auto; margin-top: -5px; width: 20px; min-width: 20px; flex-shrink: 0; } /* 현재 경력 배지 최소 폰트 */
    .career-badge.previous { font-size: 13px; line-height: auto; margin-top: -5px; width: 20px; min-width: 20px; flex-shrink: 0; } /* 이전 경력 배지 최소 폰트 */
    .career-text { font-size: 13px; line-height: 16px; text-align: left; margin-top: -2px; margin-left: 0; padding-left: 0; text-indent: 0; position: relative; left: 0; } /* 경력 텍스트 최소 폰트 */
    span.career-text.career-text-02 { padding-top: 5px; padding-bottom: 5px; } /* 특수 경력 텍스트 패딩 조정 */
    .career-item { margin-top: -5px; gap: 0px; align-items: flex-start; justify-content: flex-start; } /* 초소형 모바일에서 경력 항목 간격 최소화 */
}
/* ===== 재단소개 > 인사말 END ============================================================= */



/* ===== 공통 썸네일 슬라이더 스타일 ===== */
/* 뷰포트: 넘침 가리기 + 스크롤바 숨기기 */
.thumbnail-slider { position: relative; overflow: hidden; scrollbar-width: none; } /* Firefox */
.thumbnail-slider::-webkit-scrollbar { display: none; } /* WebKit */

/* 트랙: 가로 플렉스 + 스와이프에 필요한 옵션 */
.thumbnail-track { display: flex; transition: transform .35s ease; will-change: transform; touch-action: pan-y; user-select: none; -webkit-user-drag: none; } /* 세로 스크롤은 브라우저, 가로는 우리가 처리 */
.thumbnail-track.dragging { cursor: grabbing; }

/* 썸네일 카드 박스 */
.thumbnail-item { box-sizing: border-box; }

/* 이미지가 이벤트를 가로채지 않도록 + 공용CSS 고정 크기 무력화 */
.thumbnail-slider .thumbnail-item img{
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	display:block;
	pointer-events:none;
	-webkit-user-drag:none;
}

/* ===== 공통 메인 이미지 스타일 ===== */
/* 메인 이미지 박스: 넘치는 부분 가리기 */
.hope-wings-section .main-image,
.science-section .main-image,
.force-section .main-image,
.hope-space-section .main-image,
.eco-village-section .main-image,
.mariche-section .main-image,
.change-town-section .main-image{
	position: relative;
	overflow: hidden;
	/* 필요시 둥근 모서리: border-radius: 8px; */
	--zoom-scale: 1.08;   /* 확대 비율 */
	--zoom-speed: 600ms;  /* 애니메이션 시간 */
}

/* 이미지: 부드러운 확대 */
.hope-wings-section .main-image img,
.science-section .main-image img,
.force-section .main-image img,
.hope-space-section .main-image img,
.eco-village-section .main-image img,
.mariche-section .main-image img,
.change-town-section .main-image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transform: scale(1);
	transform-origin: center center;
	transition: transform var(--zoom-speed) cubic-bezier(.22,.61,.36,1);
	will-change: transform;
	-webkit-user-drag: none;
}

/* 마우스 hover, 키보드 focus, 터치 press 클래스 공통 적용 */
.hope-wings-section .main-image:hover img,
.hope-wings-section .main-image:focus-within img,
.hope-wings-section .main-image.is-pressed img,
.science-section .main-image:hover img,
.science-section .main-image:focus-within img,
.science-section .main-image.is-pressed img,
.force-section .main-image:hover img,
.force-section .main-image:focus-within img,
.force-section .main-image.is-pressed img,
.hope-space-section .main-image:hover img,
.hope-space-section .main-image:focus-within img,
.hope-space-section .main-image.is-pressed img,
.eco-village-section .main-image:hover img,
.eco-village-section .main-image:focus-within img,
.eco-village-section .main-image.is-pressed img,
.mariche-section .main-image:hover img,
.mariche-section .main-image:focus-within img,
.mariche-section .main-image.is-pressed img,
.change-town-section .main-image:hover img,
.change-town-section .main-image:focus-within img,
.change-town-section .main-image.is-pressed img{
	transform: scale(var(--zoom-scale));
}

/* 키보드 포커스 스타일(접근성) */
.hope-wings-section .main-image:focus-visible,
.hope-wings-section .main-image :focus-visible,
.science-section .main-image:focus-visible,
.science-section .main-image :focus-visible,
.force-section .main-image:focus-visible,
.force-section .main-image :focus-visible,
.hope-space-section .main-image:focus-visible,
.hope-space-section .main-image :focus-visible,
.eco-village-section .main-image:focus-visible,
.eco-village-section .main-image :focus-visible,
.mariche-section .main-image:focus-visible,
.mariche-section .main-image :focus-visible,
.change-town-section .main-image:focus-visible,
.change-town-section .main-image :focus-visible{
	outline: 2px solid #1f6feb;
	outline-offset: 2px;
}

/* 사용자의 '감소된 모션' 설정을 존중 */
@media (prefers-reduced-motion: reduce){
	.hope-wings-section .main-image img,
	.science-section .main-image img,
	.force-section .main-image img,
	.hope-space-section .main-image img,
	.eco-village-section .main-image img,
	.mariche-section .main-image img,
	.change-town-section .main-image img{
		transition: none;
	}
}

/* ===== 공통 화살표 마스크 스타일 ===== */
:root{
	--chev-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 1 L5 5 L1 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== 공통 네비게이션 스타일 ===== */
/* 네비게이션 그룹 */
.hope-wings-section .slide-nav,
.science-section .slide-nav,
.force-section .slide-nav,
.hope-space-section .slide-nav,
.eco-village-section .slide-nav,
.mariche-section .slide-nav,
.change-town-section .slide-nav{ display:flex; gap:15px; }

/* 버튼 기본 (40×40, 배경 #FFEBD8, 테두리 없음) */
.hope-wings-section .slide-nav .slide-prev,
.hope-wings-section .slide-nav .slide-next,
.science-section .slide-nav .slide-prev,
.science-section .slide-nav .slide-next,
.force-section .slide-nav .slide-prev,
.force-section .slide-nav .slide-next,
.hope-space-section .slide-nav .slide-prev,
.hope-space-section .slide-nav .slide-next,
.eco-village-section .slide-nav .slide-prev,
.eco-village-section .slide-nav .slide-next,
.mariche-section .slide-nav .slide-prev,
.mariche-section .slide-nav .slide-next,
.change-town-section .slide-nav .slide-prev,
.change-town-section .slide-nav .slide-next{
	--btn-size: 40px;
	--accent: #F77E0B;
	--bg: #FFEBD8;

	width: var(--btn-size);
	height: var(--btn-size);
	border-radius: 50%;
	background: var(--bg);
	border: 0;
	padding: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	cursor: pointer;
	outline: none;

	/* ← 버튼 안의 '<', '>' 텍스트 숨김 (겹침 방지) */
	font-size: 0;
	line-height: 0;
	color: transparent;
}

/* 화살표(6×10) */
.hope-wings-section .slide-nav .slide-prev::before,
.hope-wings-section .slide-nav .slide-next::before,
.science-section .slide-nav .slide-prev::before,
.science-section .slide-nav .slide-next::before,
.force-section .slide-nav .slide-prev::before,
.force-section .slide-nav .slide-next::before,
.hope-space-section .slide-nav .slide-prev::before,
.hope-space-section .slide-nav .slide-next::before,
.eco-village-section .slide-nav .slide-prev::before,
.eco-village-section .slide-nav .slide-next::before,
.mariche-section .slide-nav .slide-prev::before,
.mariche-section .slide-nav .slide-next::before,
.change-town-section .slide-nav .slide-prev::before,
.change-town-section .slide-nav .slide-next::before{
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 6px; height: 10px;
	transform: translate(-50%, -50%);
	background: var(--accent);
	-webkit-mask: var(--chev-mask) center/contain no-repeat;
	mask: var(--chev-mask) center/contain no-repeat;
}

/* 왼쪽만 좌우 반전 */
.hope-wings-section .slide-nav .slide-prev::before,
.science-section .slide-nav .slide-prev::before,
.force-section .slide-nav .slide-prev::before,
.hope-space-section .slide-nav .slide-prev::before,
.eco-village-section .slide-nav .slide-prev::before,
.mariche-section .slide-nav .slide-prev::before,
.change-town-section .slide-nav .slide-prev::before{
	transform: translate(-50%, -50%) scaleX(-1);
}

/* 비활성화 옵션 */
.hope-wings-section .slide-nav .slide-prev:disabled,
.hope-wings-section .slide-nav .slide-next:disabled,
.science-section .slide-nav .slide-prev:disabled,
.science-section .slide-nav .slide-next:disabled,
.force-section .slide-nav .slide-prev:disabled,
.force-section .slide-nav .slide-next:disabled,
.hope-space-section .slide-nav .slide-prev:disabled,
.hope-space-section .slide-nav .slide-next:disabled,
.eco-village-section .slide-nav .slide-prev:disabled,
.eco-village-section .slide-nav .slide-next:disabled,
.mariche-section .slide-nav .slide-prev:disabled,
.mariche-section .slide-nav .slide-next:disabled,
.change-town-section .slide-nav .slide-prev:disabled,
.change-town-section .slide-nav .slide-next:disabled{
	opacity: .45; cursor: default; box-shadow: none;
}

/* ===== 공통 카운터 스타일 ===== */
/* 카운터 기본 폰트는 사이트 스타일에 맞춰 두고 색상만 지정 */
.hope-wings-section .slide-counter .cur,
.science-section .slide-counter .cur,
.force-section .slide-counter .cur,
.hope-space-section .slide-counter .cur,
.eco-village-section .slide-counter .cur,
.mariche-section .slide-counter .cur,
.change-town-section .slide-counter .cur {
	/* UI Properties */
	font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 18px/35px var(--unnamed-font-family-pretendard);
	letter-spacing: var(--unnamed-character-spacing-0);
	color: var(--unnamed-color-000000);
	text-align: left;
	font: normal normal bold 18px/35px Pretendard;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
} 
.hope-wings-section .slide-counter .sep,
.hope-wings-section .slide-counter .total,
.science-section .slide-counter .sep,
.science-section .slide-counter .total,
.force-section .slide-counter .sep,
.force-section .slide-counter .total,
.hope-space-section .slide-counter .sep,
.hope-space-section .slide-counter .total,
.eco-village-section .slide-counter .sep,
.eco-village-section .slide-counter .total,
.mariche-section .slide-counter .sep,
.mariche-section .slide-counter .total,
.change-town-section .slide-counter .sep,
.change-town-section .slide-counter .total {
	font: normal normal normal 18px/35px Pretendard;
	letter-spacing: 0;
	color: #B1B1B1;
	text-align: left;
	opacity: 1;
}
/* 간격 살짝 */
.hope-wings-section .slide-counter .sep,
.science-section .slide-counter .sep,
.force-section .slide-counter .sep,
.hope-space-section .slide-counter .sep,
.eco-village-section .slide-counter .sep,
.mariche-section .slide-counter .sep,
.change-town-section .slide-counter .sep { padding: 0 .7em; }

/* 378px 이하에서만 버튼 크기를 32px로 축소 */
@media (max-width: 440px) {
	.hope-wings-section .slide-nav .slide-prev,
	.hope-wings-section .slide-nav .slide-next,
	.science-section .slide-nav .slide-prev,
	.science-section .slide-nav .slide-next,
	.force-section .slide-nav .slide-prev,
	.force-section .slide-nav .slide-next,
	.hope-space-section .slide-nav .slide-prev,
	.hope-space-section .slide-nav .slide-next,
	.eco-village-section .slide-nav .slide-prev,
	.eco-village-section .slide-nav .slide-next,
	.mariche-section .slide-nav .slide-prev,
	.mariche-section .slide-nav .slide-next,
	.change-town-section .slide-nav .slide-prev,
	.change-town-section .slide-nav .slide-next{
		--btn-size: 32px;
		width: 32px;
		height: 32px;
	}
}

/* ===== 사업안내 > 희망날개 START ============================================================= */
/* ===== 희망날개 섹션 ===== */
.hope-wings-section { width: 100%; margin-top: 180px; padding-bottom: 180px; background-color: #ffffff; } /* 희망날개 메인 컨테이너 (상 180px, 하 240px 여백) */
.hope-wings-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: block; box-sizing: border-box; overflow: hidden; } /* 1-1. 데스크톱 고정폭 컨테이너 (콘텐츠 620px + 간격 40px + 이미지 620px = 1280px) */
.content-area { width: 620px; min-width: 620px; max-width: 620px; float: left; margin-right: 40px; box-sizing: border-box; } /* 1-2. 좌측 콘텐츠 영역 - 텍스트 정보 및 지원 내용 표시 (620px 고정폭) */
.image-area { width: 620px; min-width: 620px; max-width: 620px; float: right; box-sizing: border-box; } /* 1-3. 우측 이미지 영역 - 메인 이미지 및 썸네일 슬라이더 (620px 고정폭) */
.section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #F77E0B; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 2-1. 희망날개 메인 제목 스타일 (오렌지 컬러 #F77E0B) */
.section-description { width: 620px; min-width: 620px; max-width: 620px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; } /* 2-2. 희망날개 프로그램 소개 설명 텍스트 (자연스러운 줄바꿈) */
.support-info { margin-bottom: 48px; height: 108px; } /* 2-3. 지원 대상 및 지원 내용 정보 컨테이너 (2개 항목 고정 높이 108px) */
.info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 72px; } /* 지원 정보 개별 항목 - 지원 대상/내용 항목별 레이아웃 (라벨 + 내용) */
.info-item:last-child { margin-bottom: 0; } /* 마지막 지원 정보 항목 하단 마진 제거 */
.hope-wings-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 - 지원 대상/내용 라벨 스타일 (지원대상, 지원내용 등) */
.info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 - 지원 대상/내용 세부 설명 텍스트 */
.slider-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; } /* 3-1. 슬라이더 컨트롤 영역 - 썸네일 슬라이더 상단 컨트롤 (카운터 + 네비게이션 버튼) */
.slide-counter { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; color: #666; } /* 슬라이드 진행 상태 표시 - 현재 슬라이드 번호 및 전체 개수 (예: 1/5) */
.slide-nav { display: flex; gap: 10px; } /* 슬라이드 네비게이션 버튼 그룹 - 이전/다음 버튼 컨테이너 */
.slide-prev, .slide-next { width: 40px; height: 40px; border: 2px solid #ddd; background-color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666; transition: all 0.3s ease; } /* 슬라이드 버튼 기본 스타일 - 이전/다음 버튼 공통 (원형 버튼) */
/* .slide-prev:hover, .slide-next:hover { background-color: #ff6b35; border-color: #ff6b35; color: #fff; } 슬라이드 버튼 호버 상태 제거 */
.thumbnail-slider { display: flex; gap: 20px; overflow-x: auto; } /* 3-2. 썸네일 슬라이더 - 썸네일 이미지들의 가로 스크롤 컨테이너 */
.thumbnail-item { flex-shrink: 0; width: 140px; height: 102px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; } /* 썸네일 개별 아이템 - 썸네일 이미지 컨테이너 (140×102px 고정 크기) */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */
@media (min-width: 960px) {
    .thumbnail-item img { width: 140px; height: 102px; min-width: 140px; min-height: 102px; max-width: 140px; max-height: 102px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
}

/* 4개 이하일 때도 5개 이상일 때와 동일한 미디어 쿼리 적용 */
/* 1320px 이하 - 모든 섹션 통일 */
@media (max-width: 1320px) {
    .hope-wings-section .thumbnail-item,
    .science-section .thumbnail-item,
    .force-section .thumbnail-item,
    .hope-space-section .thumbnail-item,
    .mariche-section .thumbnail-item,
    .eco-village-section .thumbnail-item,
    .change-town-section .thumbnail-item { width: 120px; height: 90px; }
    
    .hope-wings-section .thumbnail-item img,
    .science-section .thumbnail-item img,
    .force-section .thumbnail-item img,
    .hope-space-section .thumbnail-item img,
    .mariche-section .thumbnail-item img,
    .eco-village-section .thumbnail-item img,
    .change-town-section .thumbnail-item img { width: 120px; height: 90px; min-width: 120px; min-height: 90px; max-width: 120px; max-height: 90px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }

    .hope-wings-section .info-label {
        min-width: 100px;
        font-size: 18px;
    }
}

/* 960px 이하 - 모든 섹션 통일 (JavaScript 동적 계산과 동일한 높이 적용) */
@media (max-width: 960px) {
    .hope-wings-section .thumbnail-track > .thumbnail-item,
    .science-section .thumbnail-track > .thumbnail-item,
    .force-section .thumbnail-track > .thumbnail-item,
    .hope-space-section .thumbnail-track > .thumbnail-item,
    .mariche-section .thumbnail-track > .thumbnail-item,
    .eco-village-section .thumbnail-track > .thumbnail-item,
    .change-town-section .thumbnail-track > .thumbnail-item { height: 135px; }
}

/* 769px 이하 - 모든 섹션 통일 (JavaScript 동적 계산과 동일한 높이 적용) */
@media (max-width: 769px) {
    .hope-wings-section .thumbnail-track > .thumbnail-item,
    .science-section .thumbnail-track > .thumbnail-item,
    .force-section .thumbnail-track > .thumbnail-item,
    .hope-space-section .thumbnail-track > .thumbnail-item,
    .mariche-section .thumbnail-track > .thumbnail-item,
    .eco-village-section .thumbnail-track > .thumbnail-item,
    .change-town-section .thumbnail-track > .thumbnail-item { height: 113px; }
}

/* 440px 이하 - 모든 섹션 통일 (JavaScript 동적 계산과 동일한 높이 적용) */
@media (max-width: 440px) {
    .hope-wings-section .thumbnail-track > .thumbnail-item,
    .science-section .thumbnail-track > .thumbnail-item,
    .force-section .thumbnail-track > .thumbnail-item,
    .hope-space-section .thumbnail-track > .thumbnail-item,
    .mariche-section .thumbnail-track > .thumbnail-item,
    .eco-village-section .thumbnail-track > .thumbnail-item,
    .change-town-section .thumbnail-track > .thumbnail-item { height: 52px; }
}
.main-image { position: relative; border-radius: 20px; overflow: hidden; } /* 3-3. 메인 이미지 영역 - 희망날개 대표 이미지 컨테이너 (모서리 둥글게 처리) */
.main-image img { width: 100%; height: auto; display: block; } /* 메인 이미지 반응형 스타일 (가로 100%, 비율 유지) */
/* ===== 4. 반응형 CSS ===== */
/* 4-1. 중간 데스크톱 (1320px 이하) */
@media (max-width: 1320px) {
    .hope-wings-section { margin: 180px 0 0 0; }
    .hope-wings-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .section-title { font-size: 32px; }
    .section-description { font-size: 18px; line-height: 26px; }
    .info-label { min-width: 100px; font-size: 18px; }
    .info-content { font-size: 18px; }
}
/* 4-2. 태블릿 (960px 이하) */
@media (max-width: 960px){
    .hope-wings-section { margin: 120px 0 0 0; padding-bottom: 120px;} /* 섹션/컨테이너 기본 설정 */
    .hope-wings-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .hope-wings-section .section-title { grid-row: 1; margin-bottom: 15px; } /* 그리드 아이템들의 순서 지정 */
    .hope-wings-section .section-description { grid-row: 2; margin-bottom: 30px; }
    .hope-wings-section .support-info { grid-row: 3; margin-bottom: 40px; }
    .hope-wings-section .image-area { grid-row: 4; }
    .hope-wings-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; }
    .hope-wings-section .thumbnail-slider { grid-row: 6; }
    .hope-wings-section .content-area, .hope-wings-section .image-area { width: 100%; max-width: 100%; min-width: 0; display: contents; } /* content-area와 image-area는 그리드 컨테이너의 직계 자식으로 취급 */
    .hope-wings-section .section-title { font-size: 32px; text-align: left; } /* 텍스트 스타일링 */
    .hope-wings-section .section-description { width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .hope-wings-section .support-info { height: auto; } /* 지원 정보 */
    .hope-wings-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; }
    .hope-wings-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .hope-wings-section .info-content { font-size: 18px; padding: 10px 0; }
    .hope-wings-section .slider-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /* 슬라이더 컨트롤 */
    .hope-wings-section .slide-counter { font-size: 15px; }
    .hope-wings-section .thumbnail-slider { overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; } /* 뷰포트: 상단 큰 이미지와 동일한 너비로 설정 */
    .hope-wings-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); } /* 트랙: gap 사용 + 양쪽을 살짝(-3px) 바깥으로 빼서 모서리 안 잘리게 */
    .hope-wings-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); } /* 첫/마지막 아이템만 안쪽으로 3px 보정 → 둥근 모서리 노출 */
    .hope-wings-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .hope-wings-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: JavaScript에서 동적으로 크기 계산 */
    .hope-wings-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 꽉 차게 설정 - 높은 특이도로 우선순위 확보 */
    }
/* 4-3. 모바일 (769px 이하) */
@media (max-width: 769px) {
    .hope-wings-section { margin: 80px 0 0 0; padding-bottom: 80px} /* 모바일에서 적절한 여백 설정 */
    .hope-wings-section .container { padding: 0 20px; } /* 좀 더 작은 패딩으로 공간 확보 */
    .hope-wings-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); } /* 썸네일 슬라이더: 769px 이하에서 정확히 4개만 보이도록 너비 제한 */
    .hope-wings-section .section-description { margin-bottom: 20px; }
    .hope-wings-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; } /* 트랙: gap을 줄이고 JavaScript 계산에 맞춤 */
    .hope-wings-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: 769px에서 더 자연스러운 높이 */
    .hope-wings-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 완벽하게 맞춤 - 높은 특이도로 우선순위 확보 */
    .hope-wings-section .section-title { font-size: 30px; } /* 폰트 크기: 960px 대비 -2px씩 축소 */
    .hope-wings-section .section-description { font-size: 18px; line-height: 22px; }
    .hope-wings-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .hope-wings-section .info-content { font-size: 18px; padding: 10px 0; }
}

/* 4-4. 초소형 모바일 (440px 이하) */
@media (max-width: 440px) {
    .hope-wings-section { margin: 80px 0 0 0; padding-bottom: 0;}
    .hope-wings-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; } /* 폰트 크기: 769px 대비 -2px씩 축소 */
    .hope-wings-section .section-description { line-height: 29px; margin-bottom: 15px; font-size: 16px; }
    .hope-wings-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; color: #707070;}
    .hope-wings-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 21px;}
    .hope-wings-section .info-item { margin-bottom: 0px; }
    .hope-wings-section .support-info { margin-bottom: 5px; }
    .hope-wings-section .container { padding: 0 12px; } /* 컨테이너 패딩도 더 작게 조정 */
    .hope-wings-section .thumbnail-slider { max-width: calc(100vw - 30px); } /* 썸네일 슬라이더: 더 작은 화면에 최적화 */
    .hope-wings-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .hope-wings-section .thumbnail-track { gap: 6px; } /* 트랙: gap을 더 줄여서 공간 확보 */
    .hope-wings-section .thumbnail-track > .thumbnail-item { border-radius: 6px; } /* 썸네일 아이템: 378px에서 72×52 크기 + 라운딩 */
    .hope-wings-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; } /* 이미지 라운딩도 맞춤 */
}
/* ===== 사업안내 > 희망날개 END ============================================================= */



/* ===== 사업안내 > 상상이상의 사이언스 START ============================================================= */
.science-section { width: 100%; padding-top: 120px; padding-bottom: 120px; background-color: #f9f9f9; } /* 메인 컨테이너 */
.science-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0; box-sizing: border-box; overflow: hidden; } /* 컨테이너 (1280px 고정폭, 40px 중앙 여백) */
.science-section .image-area { width: 620px; min-width: 620px; max-width: 620px; flex-shrink: 0; box-sizing: border-box; } /* 이미지 영역 (좌측 620px 고정폭) */
.science-section .content-area { width: 620px; min-width: 620px; max-width: 620px; flex-shrink: 0; margin-left: 40px; box-sizing: border-box; } /* 콘텐츠 영역 (우측 620px 고정폭, 40px 중앙 여백) */
.science-section .section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #F77E0B; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 메인 제목 (오렌지 컬러) */
.science-section .section-description { width: 620px; min-width: 620px; max-width: 620px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; } /* 설명 텍스트 (620px 고정폭, 자연스러운 줄바꿈) */
.science-section .support-info { margin-bottom: 35px; height: 87px; } /* 지원 정보 컨테이너 (2개 항목 고정 높이) */
.science-section .info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 65px; } /* 지원 정보 개별 항목 */
.science-section .info-item:first-child {height: 38px;}
.science-section .info-item:last-child { margin-bottom: 0; } /* 마지막 항목 하단 마진 제거 */
.science-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 */
.science-section .info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 */
.science-section .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } /* 슬라이더 컨트롤 영역 */
.science-section .slide-counter { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; color: #666; } /* 슬라이드 진행 상태 표시 */
/* .science-section .slide-nav { display: flex; gap: 15px; } 공통 CSS에서 처리 */
.science-section .slide-prev, .science-section .slide-next { width: 40px; height: 40px; border: 2px solid #ddd; background-color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666; transition: all 0.3s ease; } /* 슬라이드 버튼 기본 스타일 */
/* .science-section .slide-prev:hover, .science-section .slide-next:hover { background-color: #ff6b35; border-color: #ff6b35; color: #fff; } 슬라이드 버튼 호버 상태 제거 */
.science-section .thumbnail-slider { display: flex; gap: 20px; overflow-x: auto; } /* 썸네일 슬라이더 */
.science-section .thumbnail-item { flex-shrink: 0; width: 140px; height: 102px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; } /* 썸네일 개별 아이템 (140×102px 고정 크기) */
.science-section .main-image { position: relative; border-radius: 20px; overflow: hidden; } /* 메인 이미지 영역 */
.science-section .main-image img { width: 100%; height: auto; display: block; } /* 메인 이미지 반응형 스타일 */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */

@media (max-width: 1320px) { 
    .science-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .science-section .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .science-section .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .science-section .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .science-section .section-title { font-size: 32px; }
    .science-section .section-description { font-size: 18px; line-height: 26px; }
    .science-section .info-label { min-width: 100px; font-size: 18px; }
    .science-section .info-content { font-size: 18px; }
} /* 1320px 이하 반응형 */
@media (max-width: 960px) { 
    .science-section { width: 100%; padding-top: 80px; padding-bottom: 80px; background-color: #f9f9f9; } 
    .science-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .science-section .section-title { grid-row: 1; margin-bottom: 15px; text-align: left; }
    .science-section .section-description { grid-row: 2; margin-bottom: 30px; width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .science-section .support-info { grid-row: 3; margin-bottom: 40px; height: auto; }
    .science-section .image-area { grid-row: 4; width: 100%; max-width: 100%; min-width: 0; display: contents; }
    .science-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
    .science-section .thumbnail-slider { grid-row: 6; overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; }
    .science-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); }
    .science-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); }
    .science-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .science-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .science-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; }
    .science-section .content-area { width: 100%; max-width: 100%; min-width: 0; display: contents; }
    .science-section .info-item:first-child { height: 83px; }
    .science-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; text-align: left; }
    .science-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .science-section .info-content { font-size: 18px; padding: 10px 0; }
    .science-section .thumbnail-item img { width: 120px; height: 90px; min-width: 120px; min-height: 90px; max-width: 120px; max-height: 90px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
} /* 960px 이하 반응형 */

/* 960px 초과에서 적용되는 썸네일 스타일 */
@media (min-width: 960px) { 
    .science-section .thumbnail-item img { width: 140px; height: 102px; min-width: 140px; min-height: 102px; max-width: 140px; max-height: 102px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
}
@media (max-width: 769px) { 
    .science-section { padding-top: 40px; padding-bottom: 40px; }
    .science-section .container { padding: 0 20px; }
    .science-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); }
    .science-section .section-description { margin-bottom: 20px; }
    .science-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; }
    .science-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .science-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; }
    .science-section .section-title { font-size: 30px; }
    .science-section .section-description { font-size: 18px; line-height: 22px; }
    .science-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .science-section .info-content { font-size: 18px; padding: 10px 0; }
} /* 769px 이하 반응형 */
@media (max-width: 440px) { 
    .science-section { margin: 80px 0 0 0; padding-top: 40px; padding-bottom: 40px; }
    .science-section .container { padding: 0 12px; }
    .science-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; }
    .science-section .section-description { line-height: 29px; margin-bottom: 15px; font-size: 16px; }
    .science-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; }
    .science-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 21px;}
    .science-section .info-item { margin-bottom: 0px; }
    .science-section .info-item:first-child{ height: 63px; }
    .science-section .support-info { margin-bottom: 5px; }
    .science-section .thumbnail-slider { max-width: calc(100vw - 30px); }
    .science-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .science-section .thumbnail-track { gap: 6px; }
    .science-section .thumbnail-track > .thumbnail-item { border-radius: 6px; }
    .science-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; }
} /* 440px 이하 반응형 */
/* ===== 사업안내 > 상상이상의 사이언스 END ============================================================= */


/* ===== 사업안내 > 포어스 START ============================================================= */
.force-section { width: 100%; margin-top: 180px; padding-bottom: 180px; background-color: #ffffff; } /* 메인 컨테이너 */
.force-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: block; box-sizing: border-box; overflow: hidden; } /* 데스크톱 고정폭 컨테이너 (1280px) */
.force-section .content-area { width: 620px; min-width: 620px; max-width: 620px; float: left; margin-right: 40px; box-sizing: border-box; } /* 좌측 콘텐츠 영역 (620px 고정폭) */
.force-section .image-area { width: 620px; min-width: 620px; max-width: 620px; float: right; box-sizing: border-box; } /* 우측 이미지 영역 (620px 고정폭) */
.force-section .section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #F77E0B; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 메인 제목 (오렌지 컬러) */
.force-section .section-description { width: 620px; min-width: 620px; max-width: 620px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; } /* 프로그램 소개 설명 텍스트 (자연스러운 줄바꿈) */
.force-section .support-info { margin-bottom: 100px; height: 90px; } /* 지원 대상 및 지원 내용 정보 컨테이너 (2개 항목 고정 높이) */
.force-section .info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 135px; } /* 지원 정보 개별 항목 */
.force-section .info-item:first-child { height: 38px; }
.force-section .info-item:last-child { margin-bottom: 0; } /* 마지막 항목 하단 마진 제거 */
.force-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 */
.force-section .info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */
@media (min-width: 960px) {
}
/* ===== 4. 반응형 CSS ===== */
/* 4-1. 중간 데스크톱 (1320px 이하) */
@media (max-width: 1320px) {
    .force-section { margin: 180px 0 0 0; }
    .force-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .force-section .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .force-section .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .force-section .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .force-section .section-title { font-size: 32px; }
    .force-section .section-description { font-size: 18px; line-height: 26px; }
    .force-section .info-label { min-width: 100px; font-size: 18px; }
    .force-section .info-content { font-size: 18px; }
    .force-section .info-item:first-child { height: 64px; }
}
/* 4-2. 태블릿 (960px 이하) */
@media (max-width: 960px){
    .force-section { margin: 120px 0 0 0; padding-bottom: 120px;} /* 섹션/컨테이너 기본 설정 */
    .force-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .force-section .section-title { grid-row: 1; margin-bottom: 15px; } /* 그리드 아이템들의 순서 지정 */
    .force-section .section-description { grid-row: 2; margin-bottom: 30px; }
    .force-section .support-info { grid-row: 3; margin-bottom: 40px; }
    .force-section .image-area { grid-row: 4; }
    .force-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; }
    .force-section .thumbnail-slider { grid-row: 6; }
    .force-section .content-area, .force-section .image-area { width: 100%; max-width: 100%; min-width: 0; display: contents; } /* content-area와 image-area는 그리드 컨테이너의 직계 자식으로 취급 */
    .force-section .section-title { font-size: 32px; text-align: left; } /* 텍스트 스타일링 */
    .force-section .section-description { width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .force-section .support-info { height: auto; } /* 지원 정보 */
    .force-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; }
    .force-section .info-item:first-child { height: 82px; }
    .force-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .force-section .info-content { font-size: 18px; padding: 10px 0; }
    .force-section .slider-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /* 슬라이더 컨트롤 */
    .force-section .slide-counter { font-size: 15px; }
    .force-section .thumbnail-slider { overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; } /* 뷰포트: 상단 큰 이미지와 동일한 너비로 설정 */
    .force-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); } /* 트랙: gap 사용 + 양쪽을 살짝(-3px) 바깥으로 빼서 모서리 안 잘리게 */
    .force-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); } /* 첫/마지막 아이템만 안쪽으로 3px 보정 → 둥근 모서리 노출 */
    .force-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .force-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: JavaScript에서 동적으로 크기 계산 */
    .force-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 꽉 차게 설정 - 높은 특이도로 우선순위 확보 */
    }
/* 4-3. 모바일 (769px 이하) */
@media (max-width: 769px) {
    .force-section { margin: 80px 0 0 0; padding-bottom: 80px} /* 모바일에서 적절한 여백 설정 */
    .force-section .container { padding: 0 20px; } /* 좀 더 작은 패딩으로 공간 확보 */
    .force-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); } /* 썸네일 슬라이더: 769px 이하에서 정확히 4개만 보이도록 너비 제한 */
    .force-section .section-description { margin-bottom: 20px; }
    .force-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; } /* 트랙: gap을 줄이고 JavaScript 계산에 맞춤 */
    .force-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: 769px에서 더 자연스러운 높이 */
    .force-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 완벽하게 맞춤 - 높은 특이도로 우선순위 확보 */
    .force-section .section-title { font-size: 30px; } /* 폰트 크기: 960px 대비 -2px씩 축소 */
    .force-section .section-description { font-size: 18px; line-height: 22px; }
    .force-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .force-section .info-content { font-size: 18px; padding: 10px 0; }
}

/* 4-4. 초소형 모바일 (440px 이하) */
@media (max-width: 440px) {
    .force-section { margin: 80px 0 0 0; padding-bottom: 0;}
    .force-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; } /* 폰트 크기: 769px 대비 -2px씩 축소 */
    .force-section .section-description { line-height: 29px; margin-bottom: 15px; font-size: 16px; }
    .force-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; }
    .force-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 21px;}
    .force-section .info-item { margin-bottom: 0px; }
    .force-section .info-item:first-child{ height: 64px; }
    .force-section .support-info { margin-bottom: 5px; }
    .force-section .container { padding: 0 12px; padding-bottom: 80px;} /* 컨테이너 패딩도 더 작게 조정 */
    .force-section .thumbnail-slider { max-width: calc(100vw - 30px); } /* 썸네일 슬라이더: 더 작은 화면에 최적화 */
    .force-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .force-section .thumbnail-track { gap: 6px; } /* 트랙: gap을 더 줄여서 공간 확보 */
    .force-section .thumbnail-track > .thumbnail-item { border-radius: 6px; } /* 썸네일 아이템: 378px에서 72×52 크기 + 라운딩 */
    .force-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; } /* 이미지 라운딩도 맞춤 */
}
/* ===== 사업안내 > 포어스 END ============================================================= */


/* ===== 사업안내 > 희망공간 START ============================================================= */
/* ===== 희망공간 섹션 ===== */
.hope-space-section { width: 100%; margin-top: 180px; padding-bottom: 180px; background-color: #ffffff; } /* 희망공간 메인 컨테이너 (상 180px, 하 180px 여백) */
.hope-space-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: block; box-sizing: border-box; overflow: hidden; } /* 1-1. 데스크톱 고정폭 컨테이너 (콘텐츠 620px + 간격 40px + 이미지 620px = 1280px) */
.hope-space-section .content-area { width: 620px; min-width: 620px; max-width: 620px; float: left; margin-right: 40px; box-sizing: border-box; } /* 1-2. 좌측 콘텐츠 영역 - 텍스트 정보 및 지원 내용 표시 (620px 고정폭) */
.hope-space-section .image-area { width: 620px; min-width: 620px; max-width: 620px; float: right; box-sizing: border-box; } /* 1-3. 우측 이미지 영역 - 메인 이미지 및 썸네일 슬라이더 (620px 고정폭) */
.hope-space-section .section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #339234; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 2-1. 희망공간 메인 제목 스타일 (오렌지 컬러 #F77E0B) */
.hope-space-section .section-description { width: 620px; min-width: 620px; max-width: 620px; height: 100px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; overflow: hidden; } /* 2-2. 희망공간 프로그램 소개 설명 텍스트 (2줄 고정 높이 52px) */
.hope-space-section .support-info { margin-bottom: 12px; height: 108px; } /* 2-3. 지원 대상 및 지원 내용 정보 컨테이너 (2개 항목 고정 높이 108px) */
.hope-space-section .info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 35px; } /* 지원 정보 개별 항목 - 지원 대상/내용 항목별 레이아웃 (라벨 + 내용) */
.hope-space-section .info-item:last-child { margin-bottom: 0; height: 75px;} /* 마지막 지원 정보 항목 하단 마진 제거 */
.hope-space-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 - 지원 대상/내용 라벨 스타일 (지원대상, 지원내용 등) */
.hope-space-section .info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 - 지원 대상/내용 세부 설명 텍스트 */
.hope-space-section .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } /* 3-1. 슬라이더 컨트롤 영역 - 썸네일 슬라이더 상단 컨트롤 (카운터 + 네비게이션 버튼) */
.hope-space-section .slide-counter { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; color: #666; } /* 슬라이드 진행 상태 표시 - 현재 슬라이드 번호 및 전체 개수 (예: 1/5) */
/* .hope-space-section .slide-nav { display: flex; gap: 15px; } 공통 CSS에서 처리 */
.hope-space-section .slide-prev, .hope-space-section .slide-next { width: 40px; height: 40px; border: 2px solid #ddd; background-color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666; transition: all 0.3s ease; } /* 슬라이드 버튼 기본 스타일 - 이전/다음 버튼 (원형 버튼) */
/* .hope-space-section .slide-prev:hover, .hope-space-section .slide-next:hover { background-color: #ff6b35; border-color: #ff6b35; color: #fff; } 슬라이드 버튼 호버 상태 제거 */
.hope-space-section .thumbnail-slider { display: flex; gap: 20px; overflow-x: auto; } /* 3-2. 썸네일 슬라이더 - 썸네일 이미지들의 가로 스크롤 컨테이너 */
.hope-space-section .thumbnail-item { flex-shrink: 0; width: 140px; height: 102px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; } /* 썸네일 개별 아이템 - 썸네일 이미지 컨테이너 (140×102px 고정 크기) */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */
@media (min-width: 960px) {
    .hope-space-section .thumbnail-item img { width: 140px; height: 102px; min-width: 140px; min-height: 102px; max-width: 140px; max-height: 102px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
}
.hope-space-section .main-image { position: relative; border-radius: 20px; overflow: hidden; } /* 3-3. 메인 이미지 영역 - 희망공간 대표 이미지 컨테이너 (모서리 둥글게 처리) */
.hope-space-section .main-image img { width: 100%; height: auto; display: block; } /* 메인 이미지 반응형 스타일 (가로 100%, 비율 유지) */
/* ===== 4. 반응형 CSS ===== */
/* 4-1. 중간 데스크톱 (1320px 이하) */
@media (max-width: 1320px) {
    .hope-space-section { margin: 180px 0 0 0; }
    .hope-space-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .hope-space-section .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .hope-space-section .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .hope-space-section .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .hope-space-section .section-title { font-size: 32px; }
    .hope-space-section .section-description { font-size: 18px; line-height: 26px; }
    .hope-space-section .info-label { min-width: 100px; font-size: 18px; }
    .hope-space-section .info-content { font-size: 18px; }
}
/* 4-2. 태블릿 (960px 이하) */
@media (max-width: 960px){
    .hope-space-section { margin: 120px 0 0 0; padding-bottom: 120px;} /* 섹션/컨테이너 기본 설정 */
    .hope-space-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .hope-space-section .section-title { grid-row: 1; margin-bottom: 15px; } /* 그리드 아이템들의 순서 지정 */
    .hope-space-section .section-description { grid-row: 2; margin-bottom: 30px; }
    .hope-space-section .support-info { grid-row: 3; margin-bottom: 40px; }
    .hope-space-section .image-area { grid-row: 4; }
    .hope-space-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; }
    .hope-space-section .thumbnail-slider { grid-row: 6; }
    .hope-space-section .content-area, .hope-space-section .image-area { width: 100%; max-width: 100%; min-width: 0; display: contents; } /* content-area와 image-area는 그리드 컨테이너의 직계 자식으로 취급 */
    .hope-space-section .section-title { font-size: 32px; text-align: left; } /* 텍스트 스타일링 */
    .hope-space-section .section-description { width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .hope-space-section .support-info { height: auto; } /* 지원 정보 */
    .hope-space-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; }
    .hope-space-section .info-item:last-child {height: 85px;}
    .hope-space-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .hope-space-section .info-content { font-size: 18px; padding: 10px 0; padding-top: 0;}
    .hope-space-section .slider-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /* 슬라이더 컨트롤 */
    .hope-space-section .slide-counter { font-size: 15px; }
    .hope-space-section .thumbnail-slider { overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; } /* 뷰포트: 상단 큰 이미지와 동일한 너비로 설정 */
    .hope-space-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); } /* 트랙: gap 사용 + 양쪽을 살짝(-3px) 바깥으로 빼서 모서리 안 잘리게 */
    .hope-space-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); } /* 첫/마지막 아이템만 안쪽으로 3px 보정 → 둥근 모서리 노출 */
    .hope-space-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .hope-space-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: JavaScript에서 동적으로 크기 계산 */
    .hope-space-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 꽉 차게 설정 - 높은 특이도로 우선순위 확보 */
    }
/* 4-3. 모바일 (769px 이하) */
@media (max-width: 769px) {
    .hope-space-section { margin: 80px 0 0 0; padding-bottom: 80px} /* 모바일에서 적절한 여백 설정 */
    .hope-space-section .container { padding: 0 20px; } /* 좀 더 작은 패딩으로 공간 확보 */
    .hope-space-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); } /* 썸네일 슬라이더: 769px 이하에서 정확히 4개만 보이도록 너비 제한 */
    .hope-space-section .section-description { margin-bottom: 20px; }
    .hope-space-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; } /* 트랙: gap을 줄이고 JavaScript 계산에 맞춤 */
    .hope-space-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: 769px에서 더 자연스러운 높이 */
    .hope-space-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 완벽하게 맞춤 - 높은 특이도로 우선순위 확보 */
    .hope-space-section .section-title { font-size: 30px; } /* 폰트 크기: 960px 대비 -2px씩 축소 */
    .hope-space-section .section-description { font-size: 18px; line-height: 22px; }
    .hope-space-section .info-item:last-child {height: 130px;}
    .hope-space-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .hope-space-section .info-content { font-size: 18px; padding: 10px 0; line-height: 30px; }
}

/* 4-4. 초소형 모바일 (440px 이하) */
@media (max-width: 440px) {
    .hope-space-section { margin: 80px 0 0 0; padding-bottom: 0;}
    .hope-space-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; } /* 폰트 크기: 769px 대비 -2px씩 축소 */
    .hope-space-section .section-description { line-height: 26px; margin-bottom: 15px; font-size: 16px; }
    .hope-space-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; }
    .hope-space-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 20px;}
    .hope-space-section .info-item { margin-bottom: 0px; }
    .hope-space-section .info-item:last-child{ height: 90px;}
    .hope-space-section .support-info { margin-bottom: 0px; }
    .hope-space-section .container { padding: 0 12px; } /* 컨테이너 패딩도 더 작게 조정 */
    .hope-space-section .thumbnail-slider { max-width: calc(100vw - 30px); } /* 썸네일 슬라이더: 더 작은 화면에 최적화 */
    .hope-space-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .hope-space-section .thumbnail-track { gap: 6px; } /* 트랙: gap을 더 줄여서 공간 확보 */
    .hope-space-section .thumbnail-track > .thumbnail-item { border-radius: 6px; } /* 썸네일 아이템: 378px에서 72×52 크기 + 라운딩 */
    .hope-space-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; } /* 이미지 라운딩도 맞춤 */
}
/* ===== 사업안내 > 희망공간 END ============================================================= */


/* ===== 사업안내 > 에코 빌리지 START ============================================================= */
.eco-village-section { width: 100%; padding-top: 120px; padding-bottom: 120px; background-color: #f9f9f9; } /* 메인 컨테이너 */
.eco-village-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0; box-sizing: border-box; overflow: hidden; } /* 컨테이너 (1280px 고정폭, 40px 중앙 여백) */
.eco-village-section .image-area { width: 620px; min-width: 620px; max-width: 620px; flex-shrink: 0; box-sizing: border-box; } /* 이미지 영역 (좌측 620px 고정폭) */
.eco-village-section .content-area { width: 620px; min-width: 620px; max-width: 620px; flex-shrink: 0; margin-left: 40px; box-sizing: border-box; } /* 콘텐츠 영역 (우측 620px 고정폭, 40px 중앙 여백) */
.eco-village-section .section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #339234; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 메인 제목 (오렌지 컬러) */
.eco-village-section .section-description { width: 620px; min-width: 620px; max-width: 620px; height: 135px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; overflow: hidden; } /* 설명 텍스트 (620px 고정폭, 2줄 고정 높이) */
.eco-village-section .support-info { margin-bottom: 20px; height: 108px; } /* 지원 정보 컨테이너 (2개 항목 고정 높이) */
.eco-village-section .info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 35px; } /* 지원 정보 개별 항목 */
.eco-village-section .info-item:last-child { margin-bottom: 0; height: 75px;} /* 마지막 항목 하단 마진 제거 */
.eco-village-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 */
.eco-village-section .info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 */
.eco-village-section .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } /* 슬라이더 컨트롤 영역 */
.eco-village-section .slide-counter { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; color: #666; } /* 슬라이드 진행 상태 표시 */
/* .eco-village-section .slide-nav { display: flex; gap: 15px; } 공통 CSS에서 처리 */
.eco-village-section .slide-prev, .eco-village-section .slide-next { width: 40px; height: 40px; border: 2px solid #ddd; background-color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666; transition: all 0.3s ease; } /* 슬라이드 버튼 기본 스타일 */
/* .eco-village-section .slide-prev:hover, .eco-village-section .slide-next:hover { background-color: #ff6b35; border-color: #ff6b35; color: #fff; } 슬라이드 버튼 호버 상태 제거 */
.eco-village-section .thumbnail-slider { display: flex; gap: 20px; overflow-x: auto; } /* 썸네일 슬라이더 */
.eco-village-section .thumbnail-item { flex-shrink: 0; width: 140px; height: 102px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; } /* 썸네일 개별 아이템 (140×102px 고정 크기) */
.eco-village-section .main-image { position: relative; border-radius: 20px; overflow: hidden; } /* 메인 이미지 영역 */
.eco-village-section .main-image img { width: 100%; height: auto; display: block; } /* 메인 이미지 반응형 스타일 */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */
.white-space{background-color: #ffffff;width: 100%;height: 180px;}

@media (max-width: 1320px) { 
    .eco-village-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .eco-village-section .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .eco-village-section .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .eco-village-section .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .eco-village-section .section-title { font-size: 32px; }
    .eco-village-section .section-description { font-size: 18px; line-height: 26px; }
    .eco-village-section .info-label { min-width: 100px; font-size: 18px; }
    .eco-village-section .info-content { font-size: 18px; }
} /* 1320px 이하 반응형 */
@media (max-width: 960px) { 
    .eco-village-section { width: 100%; padding-top: 80px; padding-bottom: 80px; background-color: #f9f9f9; }
    .eco-village-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .eco-village-section .section-title { grid-row: 1; margin-bottom: 15px; text-align: left; }
    .eco-village-section .section-description { grid-row: 2; margin-bottom: 30px; width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .eco-village-section .support-info { grid-row: 3; margin-bottom: 40px; height: auto; }
    .eco-village-section .image-area { grid-row: 4; width: 100%; max-width: 100%; min-width: 0; display: contents; }
    .eco-village-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
    .eco-village-section .thumbnail-slider { grid-row: 6; overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; }
    .eco-village-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); }
    .eco-village-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); }
    .eco-village-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .eco-village-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .eco-village-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; }
    .eco-village-section .content-area { width: 100%; max-width: 100%; min-width: 0; display: contents; }
    .eco-village-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; text-align: left; }
    .eco-village-section  .info-item:last-child {height: 85px;}
    .eco-village-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .eco-village-section .info-content { font-size: 18px; padding: 10px 0; padding-top: 0;}
    .eco-village-section .thumbnail-item img { width: 120px; height: 90px; min-width: 120px; min-height: 90px; max-width: 120px; max-height: 90px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
    .white-space{background-color: #ffffff;width: 100%;height: 80px;}
} /* 960px 이하 반응형 */

/* 960px 초과에서 적용되는 썸네일 스타일 */
@media (min-width: 960px) { 
    .eco-village-section .thumbnail-item img { width: 140px; height: 102px; min-width: 140px; min-height: 102px; max-width: 140px; max-height: 102px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
}
@media (max-width: 769px) { 
    .eco-village-section { padding-top: 40px; padding-bottom: 40px; }
    .eco-village-section .container { padding: 0 20px; }
    .eco-village-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); }
    .eco-village-section .section-description { margin-bottom: 20px; }
    .eco-village-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; }
    .eco-village-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .eco-village-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; }
    .eco-village-section .section-title { font-size: 30px; }
    .eco-village-section .section-description { font-size: 18px; line-height: 22px; }
    .eco-village-section .info-item:last-child {height: 130px;}
    .eco-village-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .eco-village-section .info-content { font-size: 18px; padding: 10px 0; line-height: 30px; }
} /* 769px 이하 반응형 */
@media (max-width: 440px) { 
    .eco-village-section { margin: 80px 0 0 0; padding-top: 40px; padding-bottom: 40px; }
    .eco-village-section .container { padding: 0 12px; }
    .eco-village-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; }
    .eco-village-section .section-description { line-height: 26px; margin-bottom: 15px; font-size: 16px; }
    .eco-village-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; }
    .eco-village-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 20px;}
    .eco-village-section .info-item { margin-bottom: 0px; }
    .eco-village-section .info-item:last-child { height: 71px;}
    .eco-village-section .support-info { margin-bottom: 20px; }
    .eco-village-section .thumbnail-slider { max-width: calc(100vw - 30px); }
    .eco-village-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .eco-village-section .thumbnail-track { gap: 6px; }
    .eco-village-section .thumbnail-track > .thumbnail-item { border-radius: 6px; }
    .eco-village-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; }
} /* 440px 이하 반응형 */

/* ===== 사업안내 > 에코 빌리지 END ============================================================= */


/* ===== 사업안내 > 1% 마리채 START ============================================================= */
/* ===== 1% 마리채 섹션 ===== */
.mariche-section { width: 100%; margin-top: 180px; padding-bottom: 180px; background-color: #ffffff; } /* 1% 마리채 메인 컨테이너 (상 180px, 하 180px 여백) */
.mariche-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: block; box-sizing: border-box; overflow: hidden; } /* 1-1. 데스크톱 고정폭 컨테이너 (콘텐츠 620px + 간격 40px + 이미지 620px = 1280px) */
.mariche-section .content-area { width: 620px; min-width: 620px; max-width: 620px; float: left; margin-right: 40px; box-sizing: border-box; } /* 1-2. 좌측 콘텐츠 영역 - 텍스트 정보 및 지원 내용 표시 (620px 고정폭) */
.mariche-section .image-area { width: 620px; min-width: 620px; max-width: 620px; float: right; box-sizing: border-box; } /* 1-3. 우측 이미지 영역 - 메인 이미지 및 썸네일 슬라이더 (620px 고정폭) */
.mariche-section .section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #00b5f1; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 2-1. 1% 마리채 메인 제목 스타일 (오렌지 컬러 #F77E0B) */
.mariche-section .section-description { width: 620px; min-width: 620px; max-width: 620px; height: 100px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; overflow: hidden; } /* 2-2. 1% 마리채 프로그램 소개 설명 텍스트 (2줄 고정 높이 100px) */
.mariche-section .support-info { margin-bottom: 12px; height: 145px; } /* 2-3. 지원 대상 및 지원 내용 정보 컨테이너 (2개 항목 고정 높이 108px) */
.mariche-section .info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 75px; } /* 지원 정보 개별 항목 - 지원 대상/내용 항목별 레이아웃 (라벨 + 내용) */
.mariche-section .info-item:last-child { margin-bottom: 0; height: 75px; } /* 마지막 지원 정보 항목 하단 마진 제거 */
.mariche-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 - 지원 대상/내용 라벨 스타일 (지원대상, 지원내용 등) */
.mariche-section .info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 - 지원 대상/내용 세부 설명 텍스트 */
.mariche-section .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } /* 3-1. 슬라이더 컨트롤 영역 - 썸네일 슬라이더 상단 컨트롤 (카운터 + 네비게이션 버튼) */
.mariche-section .slide-counter { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; color: #666; } /* 슬라이드 진행 상태 표시 - 현재 슬라이드 번호 및 전체 개수 (예: 1/5) */
.mariche-section .slide-prev, .mariche-section .slide-next { width: 40px; height: 40px; border: 2px solid #ddd; background-color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666; transition: all 0.3s ease; } /* 슬라이드 버튼 기본 스타일 - 이전/다음 버튼 공통 (원형 버튼) */
.mariche-section .thumbnail-slider { display: flex; gap: 20px; overflow-x: auto; } /* 3-2. 썸네일 슬라이더 - 썸네일 이미지들의 가로 스크롤 컨테이너 */
.mariche-section .thumbnail-item { flex-shrink: 0; width: 140px; height: 102px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; } /* 썸네일 개별 아이템 - 썸네일 이미지 컨테이너 (140×102px 고정 크기) */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */
@media (min-width: 960px) {
    .mariche-section .thumbnail-item img { width: 140px; height: 102px; min-width: 140px; min-height: 102px; max-width: 140px; max-height: 102px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
}
.mariche-section .main-image { position: relative; border-radius: 20px; overflow: hidden; } /* 3-3. 메인 이미지 영역 - 1% 마리채 대표 이미지 컨테이너 (모서리 둥글게 처리) */
.mariche-section .main-image img { width: 100%; height: auto; display: block; } /* 메인 이미지 반응형 스타일 (가로 100%, 비율 유지) */
/* ===== 4. 반응형 CSS ===== */
/* 4-1. 중간 데스크톱 (1320px 이하) */
@media (max-width: 1320px) {
    .mariche-section { margin: 180px 0 0 0; }
    .mariche-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .mariche-section .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .mariche-section .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .mariche-section .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .mariche-section .section-title { font-size: 32px; }
    .mariche-section .section-description { font-size: 18px; line-height: 26px; }
    .mariche-section .info-label { min-width: 100px; font-size: 18px; }
    .mariche-section .info-content { font-size: 18px; }
}
/* 4-2. 태블릿 (960px 이하) */
@media (max-width: 960px){
    .mariche-section { margin: 120px 0 0 0; padding-bottom: 120px;} /* 섹션/컨테이너 기본 설정 */
    .mariche-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .mariche-section .section-title { grid-row: 1; margin-bottom: 15px; } /* 그리드 아이템들의 순서 지정 */
    .mariche-section .section-description { grid-row: 2; margin-bottom: 30px; }
    .mariche-section .support-info { grid-row: 3; margin-bottom: 40px; }
    .mariche-section .image-area { grid-row: 4; }
    .mariche-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; }
    .mariche-section .thumbnail-slider { grid-row: 6; }
    .mariche-section .content-area, .mariche-section .image-area { width: 100%; max-width: 100%; min-width: 0; display: contents; } /* content-area와 image-area는 그리드 컨테이너의 직계 자식으로 취급 */
    .mariche-section .section-title { font-size: 32px; text-align: left; } /* 텍스트 스타일링 */
    .mariche-section .section-description { width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .mariche-section .support-info { height: auto; } /* 지원 정보 */
    .mariche-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; }
    .mariche-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .mariche-section .info-content { font-size: 18px; padding: 10px 0; padding-top: 0;}
    .mariche-section .slider-controls { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /* 슬라이더 컨트롤 */
    .mariche-section .slide-counter { font-size: 15px; }
    .mariche-section .thumbnail-slider { overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; } /* 뷰포트: 상단 큰 이미지와 동일한 너비로 설정 */
    .mariche-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); } /* 트랙: gap 사용 + 양쪽을 살짝(-3px) 바깥으로 빼서 모서리 안 잘리게 */
    .mariche-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); } /* 첫/마지막 아이템만 안쪽으로 3px 보정 → 둥근 모서리 노출 */
    .mariche-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .mariche-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: JavaScript에서 동적으로 크기 계산 */
    .mariche-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 꽉 차게 설정 - 높은 특이도로 우선순위 확보 */
    }
/* 4-3. 모바일 (769px 이하) */
@media (max-width: 769px) {
    .mariche-section { margin: 80px 0 0 0; padding-bottom: 80px} /* 모바일에서 적절한 여백 설정 */
    .mariche-section .container { padding: 0 20px; } /* 좀 더 작은 패딩으로 공간 확보 */
    .mariche-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); } /* 썸네일 슬라이더: 769px 이하에서 정확히 4개만 보이도록 너비 제한 */
    .mariche-section .section-description { margin-bottom: 20px; }
    .mariche-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; } /* 트랙: gap을 줄이고 JavaScript 계산에 맞춤 */
    .mariche-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 썸네일 아이템: 769px에서 더 자연스러운 높이 */
    .mariche-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; } /* 이미지: 컨테이너에 완벽하게 맞춤 - 높은 특이도로 우선순위 확보 */
    .mariche-section .section-title { font-size: 30px; } /* 폰트 크기: 960px 대비 -2px씩 축소 */
    .mariche-section .section-description { font-size: 18px; line-height: 22px; }
    .mariche-section .info-item:last-child { height: 110px; }
    .mariche-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .mariche-section .info-content { font-size: 18px; padding: 10px 0; line-height: 30px; }
}

/* 4-4. 초소형 모바일 (440px 이하) */
@media (max-width: 440px) {
    .mariche-section { margin: 80px 0 0 0; padding-bottom: 0;}
    .mariche-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; } /* 폰트 크기: 769px 대비 -2px씩 축소 */
    .mariche-section .section-description { line-height: 26px; margin-bottom: 15px; font-size: 16px; }
    .mariche-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; }
    .mariche-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 20px;}
    .mariche-section .info-item { margin-bottom: 0px; }
    .mariche-section .info-item:last-child { height: 90px; }
    .mariche-section .support-info { margin-bottom: 0px; }
    .mariche-section .container { padding: 0 12px; } /* 컨테이너 패딩도 더 작게 조정 */
    .mariche-section .thumbnail-slider { max-width: calc(100vw - 30px); } /* 썸네일 슬라이더: 더 작은 화면에 최적화 */
    .mariche-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .mariche-section .thumbnail-track { gap: 6px; } /* 트랙: gap을 더 줄여서 공간 확보 */
    .mariche-section .thumbnail-track > .thumbnail-item { border-radius: 6px; } /* 썸네일 아이템: 378px에서 72×52 크기 + 라운딩 */
    .mariche-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; } /* 이미지 라운딩도 맞춤 */
}
/* ===== 사업안내 > 1% 마리채 END ============================================================= */


/* ===== 사업안내 > 체인지 마이 타운 START ============================================================= */
.change-town-section { width: 100%; padding-top: 120px; padding-bottom: 120px; background-color: #f9f9f9; } /* 메인 컨테이너 */
.change-town-section .container { width: calc(620px + 40px + 620px); min-width: 1280px; max-width: 1280px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0; box-sizing: border-box; overflow: hidden; } /* 컨테이너 (1280px 고정폭, 40px 중앙 여백) */
.change-town-section .image-area { width: 620px; min-width: 620px; max-width: 620px; flex-shrink: 0; box-sizing: border-box; } /* 이미지 영역 (좌측 620px 고정폭) */
.change-town-section .content-area { width: 620px; min-width: 620px; max-width: 620px; flex-shrink: 0; margin-left: 40px; box-sizing: border-box; } /* 콘텐츠 영역 (우측 620px 고정폭, 40px 중앙 여백) */
.change-town-section .section-title { font: normal normal bold 35px/41px Pretendard; letter-spacing: 0px; color: #00b5f1; text-align: left; opacity: 1; margin: 0 0 20px 0; } /* 메인 제목 (오렌지 컬러) */
.change-town-section .section-description { width: 620px; min-width: 620px; max-width: 620px; height: 135px; box-sizing: border-box; padding: 0; margin: 0 0 20px 0; font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; opacity: 1; overflow: hidden; } /* 설명 텍스트 (620px 고정폭, 2줄 고정 높이) */
.change-town-section .support-info { margin-bottom: 20px; height: 108px; } /* 지원 정보 컨테이너 (2개 항목 고정 높이) */
.change-town-section .info-item { display: flex; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 35px; } /* 지원 정보 개별 항목 */
.change-town-section .info-item:last-child { margin-bottom: 0; height: 75px; } /* 마지막 항목 하단 마진 제거 */
.change-town-section .info-label { font: normal normal bold 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; min-width: 120px; display: flex; align-items: flex-start; } /* 지원 정보 라벨 */
.change-town-section .info-content { font: normal normal normal 25px/35px Pretendard; letter-spacing: 0px; color: #707070; text-align: left; opacity: 1; flex: 1; } /* 지원 정보 내용 */
.change-town-section .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } /* 슬라이더 컨트롤 영역 */
.change-town-section .slide-counter { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; color: #666; } /* 슬라이드 진행 상태 표시 */
.change-town-section .slide-prev, .change-town-section .slide-next { width: 40px; height: 40px; border: 2px solid #ddd; background-color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666; transition: all 0.3s ease; } /* 슬라이드 버튼 기본 스타일 */
.change-town-section .thumbnail-slider { display: flex; gap: 20px; overflow-x: auto; } /* 썸네일 슬라이더 */
.change-town-section .thumbnail-item { flex-shrink: 0; width: 140px; height: 102px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s ease; } /* 썸네일 개별 아이템 (140×102px 고정 크기) */
.change-town-section .main-image { position: relative; border-radius: 20px; overflow: hidden; } /* 메인 이미지 영역 */
.change-town-section .main-image img { width: 100%; height: auto; display: block; } /* 메인 이미지 반응형 스타일 */
/* 960px 초과에서만 적용되는 전역 썸네일 스타일 */

@media (max-width: 1320px) { 
    .change-town-section .container { width: auto; max-width: 1200px; min-width: auto; padding: 0 40px; display: flex; align-items: flex-start; }
    .change-town-section .content-area { width: calc(50% - 20px); min-width: auto; max-width: none; margin-right: 40px; }
    .change-town-section .image-area { width: calc(50% - 20px); min-width: auto; max-width: none; align-self: flex-start; }
    .change-town-section .section-description { width: 100%; min-width: auto; max-width: 100%; height: auto; }
    .change-town-section .section-title { font-size: 32px; }
    .change-town-section .section-description { font-size: 18px; line-height: 26px; }
    .change-town-section .info-label { min-width: 100px; font-size: 18px; }
    .change-town-section .info-content { font-size: 18px; }
} /* 1320px 이하 반응형 */
@media (max-width: 960px) { 
    .change-town-section { width: 100%; padding-top: 80px; padding-bottom: 80px; background-color: #f9f9f9; } 
    .change-town-section .container { width: 100%; max-width: 960px; min-width: 0; padding: 0 40px; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 0; }
    .change-town-section .section-title { grid-row: 1; margin-bottom: 15px; text-align: left; }
    .change-town-section .section-description { grid-row: 2; margin-bottom: 30px; width: 100%; min-width: 0; max-width: 100%; font-size: 18px; line-height: 24px; height: auto; text-align: left; }
    .change-town-section .support-info { grid-row: 3; margin-bottom: 40px; height: auto; }
    .change-town-section .image-area { grid-row: 4; width: 100%; max-width: 100%; min-width: 0; display: contents; }
    .change-town-section .slider-controls { grid-row: 5; margin-bottom: 20px; margin-top: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
    .change-town-section .thumbnail-slider { grid-row: 6; overflow: hidden; padding: 0; box-sizing: border-box; width: 100%; }
    .change-town-section .thumbnail-track { display: flex; gap: 12px; will-change: transform; margin-left: calc(-1 * var(--safe-edge, 3px)); margin-right: calc(-1 * var(--safe-edge, 3px)); }
    .change-town-section .thumbnail-track > .thumbnail-item:first-child { margin-left: var(--safe-edge, 3px); }
    .change-town-section .thumbnail-track > .thumbnail-item:last-child { margin-right: var(--safe-edge, 3px); }
    .change-town-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 10px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .change-town-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 10px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; }
    .change-town-section .content-area { width: 100%; max-width: 100%; min-width: 0; display: contents; }
    .change-town-section .info-item { flex-direction: column; height: auto; margin-bottom: 15px; text-align: left; }
    .change-town-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0; }
    .change-town-section .info-content { font-size: 18px; padding: 10px 0; padding-top: 0;}
    .change-town-section .thumbnail-item img { width: 120px; height: 90px; min-width: 120px; min-height: 90px; max-width: 120px; max-height: 90px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
} /* 960px 이하 반응형 */

/* 960px 초과에서 적용되는 썸네일 스타일 */
@media (min-width: 960px) { 
    .change-town-section .thumbnail-item img { width: 140px; height: 102px; min-width: 140px; min-height: 102px; max-width: 140px; max-height: 102px; object-fit: cover; display: block; box-sizing: border-box; margin: 0; padding: 0; }
}
@media (max-width: 769px) { 
    .change-town-section { padding-top: 40px; padding-bottom: 40px; }
    .change-town-section .container { padding: 0 20px; }
    .change-town-section .thumbnail-slider { width: 100%; overflow: hidden; padding: 0; box-sizing: border-box; max-width: calc(100vw - 40px); }
    .change-town-section .section-description { margin-bottom: 20px; }
    .change-town-section .thumbnail-track { display: flex; gap: 8px; will-change: transform; justify-content: flex-start; align-items: stretch; }
    .change-town-section .thumbnail-track > .thumbnail-item { flex: 0 0 auto; border-radius: 8px; overflow: hidden; position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .change-town-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { display: block; width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: unset; max-height: unset; margin: 0; padding: 0; border: none; box-sizing: border-box; object-fit: cover; object-position: center; border-radius: 8px; transform: translateZ(0); -webkit-user-drag: none; pointer-events: none; }
    .change-town-section .section-title { font-size: 30px; }
    .change-town-section .section-description { font-size: 18px; line-height: 22px; }
    .change-town-section .info-item:last-child { height: 130px; }
    .change-town-section .info-label { min-width: 0; font-size: 18px; padding: 10px 0; padding-bottom: 0;}
    .change-town-section .info-content { font-size: 18px; padding: 10px 0; line-height: 30px;}
} /* 769px 이하 반응형 */
@media (max-width: 440px) { 
    .change-town-section { margin: 80px 0 0 0; padding-top: 40px; padding-bottom: 40px; }
    .change-town-section .container { padding: 0 12px; }
    .change-town-section .section-title { height: 24px; line-height: 24px; font-size: 20px; margin-bottom: 20px; }
    .change-town-section .section-description { line-height: 26px; margin-bottom: 15px; font-size: 16px; }
    .change-town-section .info-label { min-width: 0; padding: 0 0; height: 19px; line-height: 19px; font-size: 16px; }
    .change-town-section .info-content { font-size: 16px; padding: 10px 0; padding-bottom: 15px; line-height: 20px;}
    .change-town-section .info-item { margin-bottom: 0px; }
    .change-town-section .info-item:last-child { height: 71px; }
    .change-town-section .support-info { margin-bottom: 20px; }
    .change-town-section .thumbnail-slider { max-width: calc(100vw - 30px); }
    .change-town-section .slider-controls { margin-top: 15px; margin-bottom: 10px; }
    .change-town-section .thumbnail-track { gap: 6px; }
    .change-town-section .thumbnail-track > .thumbnail-item { border-radius: 6px; }
    .change-town-section .thumbnail-slider .thumbnail-track > .thumbnail-item img { border-radius: 6px; }
} /* 440px 이하 반응형 */

/* ===== 사업안내 > 체인지 마이 타운 END ============================================================= */

/* ===== 오시는길 페이지 START ============================================================= */
/* ===== 1. 오시는길 섹션 ===== */
.location-section { 
    width: 100%; 
    position: relative; 
    margin-top: 180px; 
    margin-bottom: 202px; 
} /* 오시는길 메인 컨테이너 */

.location-container { 
    width: 1284px; 
    margin: 0 auto; 
    padding: 0; 
} /* 오시는길 컨테이너 */

.location-title { 
    font: normal normal bold 35px/55px 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    letter-spacing: 0px; 
    color: #000000; 
    text-align: left; 
    opacity: 1; 
    margin-bottom: 80px; 
} /* 오시는길 제목 */

.location-map { 
    width: 100%; 
    margin-bottom: 92.68px; 
    text-align: center; 
} /* 지도 영역 */

.location-map img { 
    width: 100%; 
    max-width: 1280.4px; 
    height: auto; 
    border: 1px solid #D6D6D6;
} /* 지도 이미지 */

.location-info { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    justify-content: flex-start; 
    align-items: flex-start; 
    width: 100%; 
} /* 연락처 정보 컨테이너 */

.location-section .info-item, .directions-section .directions-item { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
    text-align: left; 
    height: 68px; 
    overflow: visible; 
} /* location.jsp 전용 정보 항목 스타일 */

.info-icon { 
    flex-shrink: 0; 
} /* 아이콘 영역 */

.info-icon img { 
    width: 60px; 
    height: 60px; 
    object-fit: contain; 
} /* 아이콘 이미지 */

.info-content { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    min-width: 180px; 
} /* 정보 내용 영역 */

.info-row { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
} /* 정보 행 (라벨과 텍스트 가로 배치) */

.info-label { 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 34px; 
    color: #707070; 
    letter-spacing: 0px; 
    flex-shrink: 0; 
    min-width: 120px; 
} /* 정보 라벨 (다른 페이지용) */

.location-section .info-label, .directions-section .info-label { 
    font: normal normal bold 20px/28px 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    letter-spacing: 0px; 
    color: #000000; 
    text-align: left; 
    opacity: 1; 
    flex-shrink: 0; 
    min-width: 90px; 
    margin: 0; 
} /* location.jsp 전용 라벨 스타일 */

.info-text { 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    font-size: 16px; 
    font-weight: normal; 
    line-height: 22px; 
    color: #000000; 
    letter-spacing: 0px; 
} /* 정보 텍스트 (다른 페이지용) */

.location-section .info-text, .directions-section .info-text { 
    font: normal normal normal 20px/28px 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    letter-spacing: 0px; 
    color: #000000; 
    text-align: left; 
    opacity: 1; 
    margin: 0; 
} /* location.jsp 전용 텍스트 스타일 */

/* ===== 2. 찾아오시는 길 섹션 ===== */
.directions-section { 
    width: 100%; 
    position: relative; 
    margin-top: 120px; 
    margin-bottom: 180px; 
} /* 찾아오시는 길 메인 컨테이너 */

.directions-container { 
    width: 1284px; 
    margin: 0 auto; 
    padding: 0; 
} /* 찾아오시는 길 컨테이너 */

.directions-title { 
    font: normal normal bold 35px/41px 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    letter-spacing: 0px; 
    color: #000000; 
    text-align: left; 
    opacity: 1; 
    margin-bottom: 80px; 
} /* 찾아오시는 길 제목 */

.directions-list { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    justify-content: flex-start; 
    align-items: flex-start; 
    width: 100%; 
} /* 교통수단 목록 */

.directions-item { 
    display: flex; 
    gap: 20px; 
    align-items: center; 
    text-align: left; 
} /* 교통수단 항목 공통 */

.directions-icon { 
    flex-shrink: 0; 
} /* 교통수단 아이콘 영역 */

.directions-icon img { 
    width: 60px; 
    height: 60px; 
    object-fit: contain; 
} /* 교통수단 아이콘 이미지 */

.directions-content { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    min-width: 180px; 
} /* 교통수단 내용 영역 */

.directions-row { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
} /* 교통수단 행 (라벨과 텍스트 가로 배치) */



.directions-details { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
} /* 교통수단 상세 정보 */



/* ===== 3. 오시는길 반응형 ===== */
@media (max-width: 1320px) {
    .location-section { margin-top: 140px; margin-bottom: 140px; } /* 오시는길 섹션 여백 조정 */
    .location-container, .directions-container { width: 100%; max-width: 1284px; padding: 0 40px; } /* 컨테이너 반응형 */
    .location-title { font-size: 32px; line-height: 50px; margin-bottom: 60px; } /* 오시는길 제목 크기 조정 */
    .directions-title { font-size: 32px; line-height: 37px; margin-bottom: 60px; } /* 찾아오시는 길 제목 크기 조정 */
    .location-info, .directions-list { gap: 28px; } /* 항목 간격 조정 */
    .info-icon img, .directions-icon img { width: 56px; height: 56px; } /* 아이콘 크기 조정 */
    .location-section .info-label, .directions-section .info-label { font-size: 18px; line-height: 25px; min-width: 80px; } /* location.jsp 라벨 크기 조정 */
    .info-row, .directions-row { gap: 12px; } /* 정보 행 간격 조정 */
    .location-section .info-text, .directions-section .info-text { font-size: 18px; line-height: 25px; } /* location.jsp 텍스트 크기 조정 */
}

@media (max-width: 960px) {
    .location-section, .directions-section { margin-top: 100px; margin-bottom: 100px; } /* 섹션 여백 조정 */
    .location-container, .directions-container { padding: 0 30px; } /* 컨테이너 패딩 조정 */
    .location-title { font-size: 28px; line-height: 44px; margin-bottom: 40px; } /* 오시는길 제목 크기 조정 */
    .directions-title { font-size: 28px; line-height: 33px; margin-bottom: 40px; } /* 찾아오시는 길 제목 크기 조정 */
    .location-info, .directions-list { flex-direction: column; gap: 30px; justify-content: flex-start; align-items: flex-start; } /* 세로 배치로 변경 */
    .location-map { margin-bottom: 60px; } /* 지도 하단 여백 조정 */
    .directions-section { margin-top: 80px; } /* 찾아오시는 길 상단 여백 조정 */
}

@media (max-width: 769px) {
    .location-section, .directions-section { margin-top: 80px; margin-bottom: 80px; } /* 섹션 여백 조정 */
    .location-container, .directions-container { padding: 0 20px; } /* 컨테이너 패딩 조정 */
    .location-title { font-size: 24px; line-height: 38px; margin-bottom: 30px; } /* 오시는길 제목 크기 조정 */
    .directions-title { font-size: 24px; line-height: 28px; margin-bottom: 30px; } /* 찾아오시는 길 제목 크기 조정 */
    .location-info, .directions-list { flex-direction: column; gap: 25px; justify-content: flex-start; align-items: flex-start; } /* 세로 배치로 변경 */
    .location-section .info-item, .directions-section .directions-item { gap: 15px; height: auto; overflow: visible; } /* location.jsp 아이템 내부 간격 조정 */
    .info-icon img, .directions-icon img { width: 56px; height: 56px; } /* 아이콘 크기 조정 */
    .location-section .info-label, .directions-section .info-label { font-size: 18px; line-height: 25px; min-width: 80px; } /* location.jsp 라벨 크기 조정 */
    .info-row, .directions-row { gap: 12px; } /* 정보 행 간격 조정 */
    .location-section .info-text, .directions-section .info-text { font-size: 18px; line-height: 25px; } /* location.jsp 텍스트 크기 조정 */
}

@media (max-width: 440px) {
    .location-section, .directions-section { margin-top: 80px; margin-bottom: 80px; } /* 섹션 여백 조정 */
    .location-container, .directions-container { padding: 0 20px; } /* 컨테이너 패딩 조정 */
    .location-title { font-size: 20px; line-height: 24px; margin-bottom: 20px; } /* 오시는길 제목 최소 크기 */
    .directions-title { font-size: 20px; line-height: 23px; margin-bottom: 20px; } /* 찾아오시는 길 제목 최소 크기 */
    .location-info, .directions-list { flex-direction: column; gap: 19px; justify-content: flex-start; align-items: flex-start; } /* 세로 배치로 변경 */
    .location-section .info-item, .directions-section .directions-item { gap: 10px; height: auto; overflow: visible; align-items: flex-start; } /* location.jsp 아이템 내부 간격 최소화 및 상단 정렬 */
    .info-row, .directions-row { flex-direction: column; gap: 6px; align-items: flex-start; } /* 작은 화면에서는 세로 배치 */
    .directions-details { flex-direction: column; gap: 4px; } /* 작은 화면에서는 교통정보도 세로 배치 */
    .location-section .info-label, .directions-section .info-label { font-size: 16px; line-height: 22px; min-width: auto; } /* location.jsp 라벨 크기 및 최소 너비 조정 */
    .location-section .info-text, .directions-section .info-text { font-size: 16px; line-height: 22px; } /* location.jsp 텍스트 크기 조정 */
    
    /* 아이콘 상단 여백 설정 (개별 조정 가능) */
    .address-info .info-icon { margin-top: 8px; } /* 주소 아이콘 */
    .subway-info .directions-icon { margin-top: 8px; } /* 지하철 아이콘 */
    .bus-info .directions-icon { margin-top: 8px; } /* 버스 아이콘 */
    
    /* 아이콘 중앙 정렬 (텍스트가 한 줄인 경우) */
    .location-section .phone-info, 
    .location-section .email-info, 
    .directions-section .car-info { 
        align-items: center !important; 
    } /* 문의처, 이메일, 자가용 중앙 정렬 */
    
    .location-section .phone-info .info-icon, 
    .location-section .email-info .info-icon, 
    .directions-section .car-info .directions-icon { 
        margin-top: 0; 
    } /* 중앙 정렬 아이콘들은 여백 제거 */
    
    .location-map { margin-bottom: 19.97px; } /* 지도 하단 여백 최소화 */
    .location-map img { border: 1px solid #D6D6D6 } 
    .directions-section { margin-top: 40px; } /* 찾아오시는 길 상단 여백 최소화 */
}

/* ===== 오시는길 페이지 END ============================================================= */


/* ===== main 재단소식 START ============================================================= */


/* ===== main 재단소식 END ============================================================= */