/*------------------------------------------------------------------------------------------------------
주라커피
---------------------------------------------------------------------------------------------------------*/
/* 기본 색상 정의 */
.color-dark-roast { color: #4A2B1A; } /* 진한 커피색 */
.color-coffee-bean { color: #7E5940; } /* 원두색 */
.text-black { color: #2C2C2C; }

/* ------------------------------------------- */
/* 모바일 기본 스타일 (Mobile First) */
/* ------------------------------------------- */

.intro-section {
	padding: 40px 15px; /* 모바일 패딩 */
	border-bottom: 1px solid #EBEBEB; /* 섹션 구분선 */
}
.intro-section:last-child {
	border-bottom: none;
}

/* 메인 영문 제목 스타일 */
.main-title-en {
	font-family: 'Cafe24 Classic Type', sans-serif; 
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.1;
	color: #7E5940; /* 원두색 */
	margin-bottom: 5px;
}

/* 서브 한글 제목 스타일 */
.sub-title-ko {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #4A2B1A; /* 진한 커피색 */
	margin-bottom: 20px;
}

/* 섹션별 이미지 스타일 */
.intro-img-wrapper {
	width: 100%;
	height: 250px;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 8px;
}
.intro-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 본문 텍스트 스타일 */
.intro-text h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: #4A2B1A;
	margin-top: 10px;
	margin-bottom: 15px;
}
.intro-text h4 {
	font-size: 1.1rem;
	font-weight: 500;
	color: #7E5940;
	margin-top: 15px;
	margin-bottom: 10px;
}
.intro-text p {
	font-size: 0.95rem;
	color: #2C2C2C;
	line-height: 1.7;
}

.blockquote-small {
	font-size: 0.9rem;
	font-style: italic;
	color: #7E5940;
	border-left: 3px solid #7E5940;
	padding-left: 10px;
	margin-bottom: 15px;
}

/* ------------------------------------------- */
/* PC/데스크톱 스타일 (768px 이상에서 적용) */
/* ------------------------------------------- */
@media (min-width: 768px) {
	/*.intro-section {
		padding: 80px 0;
	}*/

	/* 좌우 2단 레이아웃 (Bootstrap grid 사용) */
	.row.align-items-center > .col-md-5, 
	.row.align-items-center > .col-md-7 {
		padding: 0 30px;
	}

	.main-title-en {
		font-size: 3.5rem; /* PC에서 H1 크기 확대 */
	}
	.sub-title-ko {
		font-size: 1.6rem; /* PC에서 H2 크기 확대 */
	}

	.intro-img-wrapper {
		height: 400px; /* PC에서 이미지 높이 확대 */
	}

	.intro-text h3 {
		font-size: 1.8rem;
	}
	.intro-text p {
		font-size: 1.05rem; /* PC에서 본문 크기 약간 확대 */
	}
}

/*------------------------------------------------------------------------------------------------------
대표인사
---------------------------------------------------------------------------------------------------------*/
/* !important를 사용하여 Bootstrap 기본 스타일을 재정의합니다. */
.color-dark-roast { color: #4A2B1A !important; }        /* 진한 커피색 */
.color-coffee-bean { color: #7E5940 !important; }       /* 주 원두색 */
.bg-crema { background-color: #EBDAC8 !important; }     /* 크리마 배경색 */
.color-coffee-text { color: #543e31 !important; }       /* 블록 인용문 텍스트 */
.border-coffee-bean { border-color: #7E5940 !important; } /* 원두색 테두리 */

/* 기본 폰트 및 스타일 */
/* 제목 스타일 */
.main-heading {
	font-size: 2.25rem; /* H2 크기 설정 */
	font-weight: 800; /* 매우 굵게 */
	line-height: 1.3;
}

/* 본문 폰트 크기 및 색상 */
.greeting-content p {
	font-size: 1.05rem;
	color: #374151; 
	margin-bottom: 1.5rem;
}

/* 인용구 스타일 */
.blockquote-style {
	border-left: 5px solid #7E5940; /* 원두색 경계선 적용 */
	padding: 1.25rem;
	border-radius: 0.5rem;
	font-style: italic;
}

/* 하단 장식선 그라데이션 */
.footer-line-gradient {
	background-image: linear-gradient(to right, #7E5940, #4A2B1A);
	height: 4px; /* 높이 고정 */
}

/* 큰 화면에서 가독성을 위해 내용 영역을 중앙에 배치하고 너비를 적절히 제한 */
.content-container {
	max-width: 960px; /* max-w-4xl과 유사한 크기 */
	margin: 0 auto;
}

/*------------------------------------------------------------------------------------------------------
커피이야기
---------------------------------------------------------------------------------------------------------*/
/* 기본 색상 정의 */
.color-dark-roast { color: #4A2B1A; }
.color-coffee-bean { color: #7E5940; }
.text-black { color: #2C2C2C; }

/* ------------------------------------------- */
/* 모바일 기본 스타일 (Mobile First) */
/* ------------------------------------------- */

.joora-h2 { 
	font-family: 'Cafe24 Classic Type', sans-serif; 
	font-size: 2.2rem;
	font-weight: 700; 
}

.story-section {
	padding: 0 0 25px;
	margin-bottom: 20px;
	background-color: white; /* 섹션 자체는 흰색 유지 */
	border-radius: 0; /* 배경색이 없으니 둥근 모서리 제거 */
	box-shadow: none; /* 그림자 제거 */
	/* === 섹션 구분을 위한 경계선 강화 === */
	border-bottom: 10px solid #EAEAEA; /* 연한 회색으로 두꺼운 하단 경계선 추가 */
}

/* 마지막 섹션에는 경계선 제거 (선택 사항) */
.story-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.story-section h2 {
	font-family: 'Ridi Batang', serif;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 15px;
	padding-bottom: 8px;
	border-bottom: 2px solid #7E5940; /* 제목 하단 선 유지 */
	display: inline-block;
}

.story-section h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #4A2B1A; 
	margin-top: 20px;
	margin-bottom: 10px;
}

.story-section p {
	font-size: 1rem;
	color: #2C2C2C;
	margin-bottom: 15px;
	text-align: left;
}

.highlight {
	font-weight: 700;
	color: #7E5940; 
}

/* 타입 박스 (품종 설명)의 배경색 제거 및 테두리만 강화 */
.type-box {
	background-color: transparent; /* 배경색 제거 */
	padding: 15px;
	border: 1px solid #EBEBEB; /* 연한 테두리 추가 */
	border-left: 4px solid #4A2B1A; /* 왼쪽 강조선 유지 */
	border-radius: 5px; /* 모서리 둥글게 */
	margin-bottom: 15px;
}

.type-box h4 {
	font-size: 1.15rem;
	font-weight: 700;
	color: #4A2B1A;
	margin-bottom: 8px;
}

/* 지도 이미지 영역의 배경색 제거 및 테두리만 남김 */
.map-placeholder {
	min-height: 200px;
	background-color: transparent; /* 배경색 제거 */
	/*border: 1px solid #BDBDBD;*/
	color: #7E5940;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	border-radius: 8px;
	margin: 15px 0;
}

/* ------------------------------------------- */
/* PC/데스크톱 스타일 (768px 이상에서 적용) */
/* ------------------------------------------- */
@media (min-width: 768px) {
	.joora-h2 { 
		font-size: 3.5rem;
	}
	.story-section {
		padding: 40px 0;
	}
	.story-section h2 {
		font-size: 2rem;
		padding-bottom: 10px;
		border-bottom-width: 3px;
	}
	.story-section h3 {
		font-size: 1.5rem;
		margin-top: 25px;
		margin-bottom: 15px;
	}
	.story-section p {
		font-size: 1.05rem;
		text-align: justify;
	}
	.type-box {
		padding: 20px;
		border-left-width: 5px;
		margin-bottom: 20px;
	}
	.map-placeholder {
		min-height: 300px;
		font-size: 1.2rem;
	}
}

/*------------------------------------------------------------------------------------------------------
열매에서 내손까지
---------------------------------------------------------------------------------------------------------*/
.joora-h2 { 
	font-family: 'Cafe24 Classic Type', sans-serif;
	/*font-size: 3.4375rem; */
	font-weight: 700; 
	color: #4A2B1A;
}
.joora-sub-title { 
	font-family: 'Ridi Batang', serif;
	color: #7E5940;
	font-size: 1.5rem; 
}

.process-grid-container {
	padding: 50px 0;
	max-width: 1200px;
	margin: 0 auto;
}

.row.align-items-stretch {
	display: flex;
	flex-wrap: wrap;
}
.row.align-items-stretch > .col {
	display: flex;
}

.process-step-card {
	background-color: #ffffff;
	border-radius: 1rem;
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
	padding: 0; 
	margin-bottom: 30px; 
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden; 
	opacity: 0;
	transform: translateY(30px);
	/* 높이 맞춤 핵심 CSS */
	flex-grow: 1; 
	display: flex; 
	flex-direction: column; 
}
.process-step-card.show {
	opacity: 1;
	transform: translateY(0);
}
.process-step-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* 이미지 영역 */
.process-card-image {
	width: 100%;
	height: 250px; 
	overflow: hidden;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}
.process-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	transition: transform 0.3s ease;
}
.process-step-card:hover .process-card-image img {
	transform: scale(1.05); 
}

.process-card-content {
	padding: 25px;
	flex-grow: 1; 
	display: flex;
	flex-direction: column;
}

.process-step-number {
	font-family: 'Cafe24 Classic Type', sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	color: #094531;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}
.process-step-number span {
	display: inline-block;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background-color: #094531;
	color: white;
	border-radius: 50%;
	font-size: 1.5rem;
	margin-right: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.process-card-content h3 {
	font-weight: 700;
	color: #4A2B1A;
	font-size: 1.5rem;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}
.process-card-content h3 i {
	font-size: 1.8rem;
	color: #7E5940;
	margin-right: 10px;
}

.process-card-content p {
	/*font-size: 0.95rem;
	color: #2C2C2C;*/
	margin-bottom: 0;
	flex-grow: 1;
}

/* 반응형 (모바일 최적화) */
@media (max-width: 768px) {
	.joora-h2 { font-size: 2.2rem; }
	.joora-sub-title { font-size: 1.1rem; }
	.process-grid-container { padding: 30px 15px; }
	.process-step-card { margin-bottom: 20px; }
	.process-card-image { height: 200px; }
	.process-step-number { font-size: 2rem; }
	.process-step-number span { width: 40px; height: 40px; line-height: 40px; font-size: 1.3rem; margin-right: 10px; }
	.process-card-content h3 { font-size: 1.2rem; }
	.process-card-content h3 i { font-size: 1.5rem; margin-right: 8px; }
	/*.process-card-content p { font-size: 0.9rem; }*/
}

/*------------------------------------------------------------------------------------------------------
드립백 생산과정
---------------------------------------------------------------------------------------------------------*/
/* 기본 색상 정의 */
.color-dark-roast { color: #4A2B1A; } /* 진한 커피색 */
.color-coffee-bean { color: #7E5940; } /* 원두색 */
.color-light-beige { background-color: #F8F4F0; } /* 연한 베이지 배경 */

/* ------------------------------------------- */
/* 타이틀 및 섹션 구분 */
/* ------------------------------------------- */

.page-title-h1 { 
	font-family: 'Cafe24 Classic Type', sans-serif; 
	font-size: 2.8rem;
	font-weight: 700; 
	color: #4A2B1A;
	margin-bottom: 40px;
	text-align: center;
}

.process-section {
	padding: 40px 15px; 
	/*margin-bottom: 30px;*/
	background-color: #ffffff; /* 섹션별 흰색 배경 */
	box-shadow: 0 0 20px rgba(0,0,0,0.05); /* 은은한 전체 그림자 */
}

.process-section h2 {
	font-family: 'Cafe24 Classic Type', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: #7E5940;
	margin-bottom: 40px;
	text-align: center;
}

/* ------------------------------------------- */
/* 단계별 스타일 */
/* ------------------------------------------- */

.process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px 0;
	margin-bottom: 0; 
	text-align: center;
	position: relative;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* 단계별 흐름선 (모바일) */
.process-step:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -5px; /* 다음 단계와의 간격 조정 */
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 20px; /* 다음 단계까지 연결되는 선 */
	background-color: #EBDAC8;
}

.step-number-and-text {
	display: flex; 
	flex-direction: column; 
	align-items: center;
	width: 100%;
	background-color: #fff; 
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 텍스트 박스에 그림자 */
}

.step-number {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: white;
	background-color: #7E5940; /* 번호 배경색을 커피콩색으로 */
	padding: 5px 15px;
	border-radius: 4px;
	margin-bottom: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.step-content h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #4A2B1A;
	margin-bottom: 5px;
}

.step-content p {
	/*font-size: 0.9rem;
	color: #666;*/
	margin-bottom: 0;
}

.process-image-wrapper {
	width: 90%;
	height: 150px; 
	overflow: hidden;
	border-radius: 8px;
	margin-top: 15px; 
	 /*background-color: #f7f7f7;*/
	display: flex;
	justify-content: center;
	align-items: center;
	/*border: 1px solid #EAEAEA;*/
}
.process-image-wrapper img {
	object-fit: contain;
	/*max-width: 100%; 
	height: 100%;*/
}


/* ------------------------------------------- */
/* PC/데스크톱 스타일 (768px 이상) - 수평 흐름 강조 */
/* ------------------------------------------- */
@media (min-width: 768px) {
	.process-section {
		padding: 60px 0;
	}

	.process-step {
		flex-direction: row; /* 텍스트 + 이미지 수평 배열 */
		text-align: left;
		padding: 40px 0;
		border-bottom: 1px solid #ccc; /* 수평 구분선 */
		max-width: 960px;
	}
	.process-step:last-child {
		 border-bottom: none;
	}

	/* 단계별 흐름선 (PC) - 꺾쇠 모양으로 흐름 강조 */
	.process-step:not(:last-child)::after {
		content: '\203A'; /* 유니코드 꺾쇠 '>' */
		font-size: 3rem;
		color: #EBDAC8;
		position: absolute;
		top: 50%;
		right: -20px; /* 오른쪽으로 배치 */
		left: auto;
		transform: translateY(-50%) scaleX(0.7); /* 중앙 정렬 후 크기 조정 */
		width: auto;
		height: auto;
		z-index: 10;
		display: none; /* 실제로는 꺾쇠 대신 border-bottom을 사용하거나, 별도의 컨테이너에서 조정하는 게 더 안정적임. 여기서는 border-bottom만 유지 */
	}
	.process-step:not(:last-child) {
		 margin-bottom: 0;
	}
	.process-step:not(:last-child)::after {
		display: none; /* 수직선 제거 */
	}

	.step-number-and-text {
		flex-direction: row; /* 번호와 내용을 수평으로 배치 */
		align-items: flex-start;
		padding: 0;
		flex-grow: 1;
		width: auto;
		box-shadow: none; /* PC에서는 카드 그림자 제거 */
	}

	.step-number {
		font-size: 1.2rem;
		padding: 8px 18px;
		border-radius: 6px;
		margin-right: 30px; 
		margin-bottom: 0;
		align-self: flex-start; /* 상단 정렬 */
		background-color: #4A2B1A; /* 진한 커피색으로 변경 */
	}
	
	.step-content {
		max-width: 400px; 
		padding-right: 20px;
	}

	.process-image-wrapper {
		width: 350px; 
		height: 220px; 
		margin-top: 0;
		margin-left: auto; /* 우측으로 붙이기 */
		flex-shrink: 0;
	}

}

/*------------------------------------------------------------------------------------------------------
운영비전, 중장기 발전계획
---------------------------------------------------------------------------------------------------------*/
 .vision-theme {
	--joora-deep-green: #2B5D3D; /* 진한 숲의 그린 */
	--joora-gold-accent: #B8860B; /* 고급스러운 골드 */
	--joora-light-beige: #F8F5EC; /* 아주 밝은 베이지 (배경) */
	--joora-soft-gray: #D6D6CC; /* 부드러운 회색 */
	--joora-text-dark: #333333; /* 짙은 회색 텍스트 */
	--font-family-classic: 'Cafe24 Classic Type', sans-serif;
}

/* .vision-theme 클래스가 상속되어야 변수 사용 가능 */
.container-vision {
	/*max-width: 1000px;*/
	margin: 40px auto;
	padding: 0 20px;
}
.section-title {
	font-family: var(--font-family-classic);
	color: var(--joora-deep-green);
	font-size: 2.25rem; /* text-4xl */
	border-left: 5px solid var(--joora-deep-green);
	padding-left: 1rem;
	margin-bottom: 2rem;
	font-weight: 700;
}

/* 테이블 스타일 */
.plan-table {
	width: 100%;
	border-collapse: separate; /* border-radius 사용을 위해 separate 설정 */
	border-spacing: 0;
	overflow: hidden; /* 모서리 라운딩을 위해 필요 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 0.75rem;
}

/* 헤더 스타일 */
.plan-table th {
	padding: 1rem 0.75rem;
	text-align: center;
	font-weight: 700;
	color: white;
	background-color: var(--joora-deep-green); /* 진한 그린 배경 */
	border-right: 1px solid rgba(255, 255, 255, 0.2); /* 흰색 구분선 */
}
/* 첫 번째 열 (항목) 스타일 */
/* 헤더의 시기구분과 본문의 항목 구분 스타일을 통일 */
.plan-table td:first-child {
	background-color: var(--joora-light-beige); /* 밝은 베이지 배경 */
	color: var(--joora-text-dark);
	font-weight: 700;
	text-align: center;
	border-right: 2px solid var(--joora-soft-gray); /* 부드러운 회색 구분선 */
}
/* 데이터 셀 스타일 */
.plan-table td {
	padding: 1rem 0.75rem;
	vertical-align: top;
	border: 1px solid var(--joora-soft-gray);
	line-height: 1.6;
}

/* 연도/기간 셀 스타일 */
.plan-table .stage-year {
	font-weight: 700;
	color: var(--joora-gold-accent);
	background-color: #FDFCEF; /* 아주 연한 노랑/베이지 */
}

/* 구분 열 스타일 (첫 번째 td) */
.plan-table .item-category {
	font-weight: 700;
	color: var(--joora-gold-accent); /* 골드 포인트 */
	background-color: var(--joora-light-beige);
	text-align: center;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	vertical-align: middle; /* 항목 셀 수직 중앙 정렬 */
}

/* 중장기/단기/장기 텍스트 스타일 */
.plan-table .stage-label {
	font-size: 0.9rem;
	color: #ffffff;
	font-weight: 500;
	display: block;
	margin-top: 0.25rem;
}

/* 모바일 반응형 디자인 */
@media (max-width: 768px) {
	.section-title {
		font-size: 1.75rem; /* 모바일에서 제목 크기 줄이기 */
	}
	.plan-table {
		/* 모바일에서 테이블 스크롤 가능하게 */
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		border-radius: 0;
		box-shadow: none;
	}
	.plan-table-wrapper {
		 /* 모바일에서 수평 스크롤이 가능하도록 부모 컨테이너 추가 */
		overflow-x: auto;
		padding-bottom: 10px;
	}
	.plan-table thead, .plan-table tbody {
		display: table;
		width: 100%;
	}
	.plan-table th, .plan-table td {
		padding: 0.75rem 0.5rem;
		min-width: 120px; /* 모바일에서 최소 너비 설정 */
		white-space: normal;
		word-break: keep-all;
	}
}

/*------------------------------------------------------------------------------------------------------
직업시설
---------------------------------------------------------------------------------------------------------*/
/* 페이지 전용 그린/골드/베이지 테마 CSS 변수 적용 */
.facility-theme {
	--joora-deep-green: #2B5D3D; /* 진한 숲의 그린 */
	--joora-gold-accent: #B8860B; /* 고급스러운 골드 */
	--joora-light-beige: #F8F5EC; /* 아주 밝은 베이지 (배경) */
	--joora-soft-gray: #D6D6CC; /* 부드러운 회색 */
	--joora-text-dark: #333333; /* 짙은 회색 텍스트 */
	--font-family-classic: 'Cafe24 Classic Type', sans-serif;
}

.container-facility {
	/*max-width: 1000px;*/
	margin: 40px auto;
	padding: 0 20px;
}
.main-title {
	font-family: var(--font-family-classic);
	color: var(--joora-deep-green);
	font-size: 2.5rem; /* text-5xl */
	font-weight: 800;
	text-align: center;
	margin-bottom: 0.5rem;
	line-height: 1.2;
}
.subtitle-path {
	text-align: center;
	font-size: 1.25rem; /* text-xl */
	color: #555;
	margin-bottom: 3rem;
	font-weight: 500;
}
.section-title-sub {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.75rem; /* text-2xl */
	font-weight: 700;
	color: var(--joora-deep-green);
	border-bottom: 3px solid var(--joora-gold-accent); /* 골드 밑줄 */
	padding-bottom: 0.5rem;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

/* 강조 박스 스타일 */
.info-box {
	background-color: var(--joora-light-beige); /* 밝은 베이지 배경 */
	border-left: 5px solid var(--joora-deep-green); /* 그린 포인트 바 */
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 2.5rem;
}

.highlight-text {
	color: var(--joora-gold-accent);
	font-weight: 700;
}

/* 보호작업장 정의 카드 스타일 */
.definition-card {
	background-color: white;
	border: 2px solid var(--joora-soft-gray);
	border-radius: 1rem;
	padding: 3rem 2rem;
	text-align: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.card-heading {
	font-size: 2rem;
	font-weight: 800;
	color: var(--joora-deep-green);
	margin-bottom: 1.5rem;
	position: relative;
}
.card-heading::after {
	content: '';
	display: block;
	width: 50px;
	height: 4px;
	background-color: var(--joora-gold-accent);
	margin: 10px auto 0;
	border-radius: 2px;
}
.card-content {
	font-size: 1.1rem;
	font-weight: 400;
	text-align: justify;
	max-width: 800px;
	margin: 0 auto;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
	.main-title {
		font-size: 2rem;
	}
	.subtitle-path {
		font-size: 1rem;
	}
	.section-title-sub {
		font-size: 1.5rem;
	}
	.info-box {
		padding: 1.5rem;
	}
	.card-heading {
		font-size: 1.5rem;
	}
	.card-content {
		font-size: 1rem;
	}
}

/*------------------------------------------------------------------------------------------------------
사업소개
---------------------------------------------------------------------------------------------------------*/
.biz-container { 
	--joora-deep-green: #2B5D3D; /* 진한 숲의 그린 */
	--joora-gold-accent: #B8860B; /* 고급스러운 골드 */
	--joora-light-beige: #F8F5EC; /* 아주 밝은 베이지 (카드 배경) */
	--joora-soft-gray: #D6D6CC; /* 부드러운 회색 */
	--joora-text-dark: #333333; /* 짙은 회색 텍스트 */
	--font-family-classic: 'Cafe24 Classic Type', sans-serif;
	
	/* 컨테이너 내 기본 스타일 */
	font-family: 'Noto Sans KR', sans-serif;
	color: var(--joora-text-dark);
	line-height: 1.7;
	/*max-width: 1000px;*/
	margin: 40px auto; 
	padding: 0 20px;
}

/* 섹션 제목 스타일 */
.biz-sub-heading { 
	font-size: 1.75rem; 
	font-weight: 800;
	color: var(--joora-deep-green);
	border-left: 5px solid var(--joora-gold-accent); 
	padding-left: 1rem;
	margin-top: 3rem; 
	margin-bottom: 2rem;
}

.biz-container > .biz-sub-heading:first-of-type { 
	margin-top: 1rem;
}

/* 프로그램 카드 스타일 */
.biz-program-card { 
	background-color: var(--joora-light-beige); 
	border: none; /* 부트스트랩 기본 border 제거 */
	border-radius: 0.75rem;
	transition: transform 0.2s, box-shadow 0.2s;
}
.biz-program-card:hover { 
	transform: translateY(-3px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}
.biz-program-title { 
	font-size: 1.25rem; 
	font-weight: 700;
	color: var(--joora-deep-green);
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}
.biz-program-description { 
	font-size: 0.95rem;
	color: #555;
	text-align: left; /* 요청에 따라 왼쪽 정렬로 수정 */
}

/* 교육사업 리스트 스타일 */
.biz-education-list h4 { 
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--joora-gold-accent);
	margin-top: 1rem;
	border-bottom: 1px dashed var(--joora-soft-gray);
	padding-bottom: 0.25rem;
}
.biz-education-item { 
	padding: 0.5rem 0;
	border-left: 3px solid var(--joora-deep-green);
	padding-left: 1rem;
	margin-left: 0.5rem;
	list-style: none; /* 기본 리스트 스타일 제거 */
}
.biz-education-list ul {
	padding-left: 0.5rem; /* ul의 기본 패딩 조정 */
}

/* 모바일 반응형 */
@media (max-width: 768px) {
	.biz-sub-heading { 
		font-size: 1.5rem;
		margin-top: 2rem;
	}
	.biz-program-title { 
		font-size: 1.15rem;
	}
	.biz-program-description { 
		font-size: 0.9rem;
	}
}

/*------------------------------------------------------------------------------------------------------
이용안내
---------------------------------------------------------------------------------------------------------*/
.contact-container { 
	--joora-deep-green: #2B5D3D; /* 진한 숲의 그린 */
	--joora-gold-accent: #B8860B; /* 고급스러운 골드 */
	--joora-soft-gray: #E0E0E0; /* 얇은 구분선용 부드러운 회색 */
	--joora-text-dark: #333333; /* 짙은 회색 텍스트 */
	
	font-family: 'Noto Sans KR', sans-serif;
	color: var(--joora-text-dark);
	line-height: 1.7;
	max-width: 1200px; /* 컨테이너 너비를 확장하여 좌우 배치에 유리하게 */
	margin: 40px auto; 
	padding: 0 20px;
}

/* 메인 제목 스타일 */
.contact-title {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--joora-deep-green);
	margin-bottom: 0.5rem;
	border-bottom: 4px solid var(--joora-gold-accent); 
	display: inline-block;
	padding-bottom: 0.5rem;
}

/* 메인 콘텐츠 영역 (이미지 + 연락처)를 감싸는 컨테이너 */
.main-content-wrapper {
	background-color: white; /* 좌우 분할 콘텐츠 배경을 흰색으로 */
	border-radius: 1rem;
	/*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
	overflow: hidden; /* 이미지 경계를 깔끔하게 처리 */
}

/* 이미지 컨테이너 스타일 (사용자 요청 참고 반영) */
.image-banner-container {
	text-align: center;
	overflow: hidden;
	/*height: 450px; */
}
.image-banner-container img {
	/*width: 100%;
	height: 100%;*/
	object-fit: cover; 
	object-position: center 30%; 
}

/* 연락처 정보 영역 스타일 */
.contact-details-area {
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	height: 100%; /* 부모의 높이를 상속받아 중앙 정렬되도록 */
}

/* 연락처 항목 스타일 (수평 분할 리스트 재사용) */
.contact-info-list {
	padding: 10px 0;
}
.contact-block {
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--joora-soft-gray); 
}
.contact-info-list .contact-block:first-child {
	border-top: 1px solid var(--joora-soft-gray); 
}

.contact-label-group {
	display: flex;
	align-items: center;
	font-size: 1.15rem; 
	font-weight: 700;
	color: var(--joora-deep-green);
}

.contact-label-group svg {
	color: var(--joora-gold-accent); 
	width: 26px; 
	height: 26px;
	margin-right: 1.2rem;
	flex-shrink: 0;
}

.contact-value {
	font-size: 1.3rem; 
	font-weight: 600;
	color: var(--joora-text-dark); 
}

.contact-value a {
	color: var(--joora-deep-green) !important;
	text-decoration: none;
	transition: color 0.2s;
}
.contact-value a:hover {
	color: var(--joora-gold-accent) !important;
}

/* 모바일 반응형 (좌우 분할 해제) */
@media (max-width: 992px) { /* md 이상에서 좌우 분할 */
	.image-banner-container {
		/*height: 250px; */
		border-radius: 0.75rem 0.75rem 0 0; /* 모바일에서 상단만 둥글게 */
	}
	.contact-details-area {
		padding: 30px;
	}
	.main-content-wrapper {
		margin-top: 30px;
	}
	/* 모바일에서 연락처 항목 중앙 정렬 */
	.contact-block {
		display: block; 
		text-align: center;
	}
	.contact-label-group {
		justify-content: center; 
		margin-bottom: 0.5rem;
		font-size: 1.1rem;
	}
	.contact-value {
		font-size: 1.2rem;
	}
}

/*------------------------------------------------------------------------------------------------------
후원안내
---------------------------------------------------------------------------------------------------------*/
.support_container {
	max-width: 1000px;
	margin: 0 auto;
	background: white;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 3rem 2rem;
	text-align: center;
}

.header h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

.header .subtitle {
	font-size: 1.125rem;
	opacity: 0.95;
	line-height: 1.8;
}

.content {
	padding: 3rem 2rem;
}

.intro {
	background: #f8f9ff;
	padding: 2rem;
	border-radius: 12px;
	margin-bottom: 3rem;
	border-left: 4px solid #667eea;
}

.intro p {
	font-size: 1.125rem;
	color: #333;
	line-height: 2;
}

.section {
	margin-bottom: 3rem;
}

.section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px solid #667eea;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.donation-types {
	display: grid;
	gap: 1.5rem;
}

.donation-card {
	background: #f8f9ff;
	padding: 1.5rem;
	border-radius: 12px;
	border-left: 4px solid #667eea;
}

.donation-card h4 {
	font-size: 1.25rem;
	color: #667eea;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.donation-card p {
	color: #555;
	font-size: 1rem;
}

.account-box {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 2rem;
	border-radius: 12px;
	text-align: center;
	margin-bottom: 1.5rem;
}

.account-box .bank {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.account-box .number {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 0.5rem;
}

.account-box .holder {
	font-size: 1.125rem;
	opacity: 0.9;
}

.benefits {
	background: #fff8e1;
	padding: 1.5rem;
	border-radius: 12px;
	border-left: 4px solid #ffa726;
}

.benefits h5 {
	color: #f57c00;
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

.benefits ul {
	list-style: none;
	padding: 0;
}

.benefits li {
	padding: 0.5rem 0;
	padding-left: 1.5rem;
	position: relative;
	color: #555;
}

.benefits li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #ffa726;
	font-weight: bold;
	font-size: 1.25rem;
}

.contact-box {
	background: #f8f9ff;
	padding: 2rem;
	border-radius: 12px;
	display: grid;
	gap: 1rem;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.contact-info {
	flex: 1;
}

.contact-label {
	font-size: 0.875rem;
	color: #999;
	margin-bottom: 0.25rem;
}

.contact-value {
	font-size: 1.125rem;
	color: #333;
	font-weight: 600;
}

.support_footer {
	background: #f5f5f5;
	padding: 2rem;
	text-align: center;
	color: #666;
	font-size: 0.875rem;
}

.cta-button {
	display: inline-block;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 1rem 3rem;
	border-radius: 50px;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: 2rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

@media (max-width: 768px) {
	.header h2 {
		font-size: 2rem;
	}

	.header .subtitle {
		font-size: 1rem;
	}

	.content {
		padding: 2rem 1.5rem;
	}

	.account-box .number {
		font-size: 1.5rem;
	}

	.contact-item {
		flex-direction: column;
		text-align: center;
	}
}

/*------------------------------------------------------------------------------------------------------
자원봉사안내
---------------------------------------------------------------------------------------------------------*/
.vwork_container {
	max-width: 1000px;
	margin: 0 auto;
	background: white;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.vwork_header {
	background: linear-gradient(135deg, #543e31 0%, #4A2B1A 100%);
	color: white;
	padding: 3rem 2rem;
	text-align: center;
}

.vwork_header h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

.vwork_header .vwork_subtitle {
	font-size: 1.125rem;
	opacity: 0.95;
	line-height: 1.8;
}

.vwork_content {
	padding: 3rem 2rem;
}

.vwork_intro {
	background: #faf6f3;
	padding: 2rem;
	border-radius: 12px;
	margin-bottom: 3rem;
	border-left: 4px solid #7E5940;
	text-align: center;
}

.vwork_intro p {
	font-size: 1.125rem;
	color: #333;
	line-height: 2;
}

.vwork_section {
	margin-bottom: 3rem;
}

.vwork_section_title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #543e31;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px solid #7E5940;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vwork_info_box {
	background: #faf6f3;
	padding: 2rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.vwork_info_item {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid #EBDAC8;
}

.vwork_info_item:last-child {
	border-bottom: none;
}

.vwork_info_label {
	font-weight: 700;
	color: #543e31;
	font-size: 1.125rem;
}

.vwork_info_value {
	color: #555;
	font-size: 1rem;
	line-height: 1.8;
}

.vwork_highlight {
	background: linear-gradient(135deg, #543e31 0%, #4A2B1A 100%);
	color: white;
	padding: 2rem;
	border-radius: 12px;
	text-align: center;
	margin-bottom: 2rem;
}

.vwork_highlight h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.vwork_highlight p {
	font-size: 1.125rem;
	opacity: 0.95;
}

.vwork_contact_box {
	background: #faf6f3;
	padding: 2rem;
	border-radius: 12px;
	display: grid;
	gap: 1rem;
}

.vwork_contact_item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.vwork_contact_icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #543e31 0%, #4A2B1A 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.vwork_contact_info {
	flex: 1;
}

.vwork_contact_label {
	font-size: 0.875rem;
	color: #999;
	margin-bottom: 0.25rem;
}

.vwork_contact_value {
	font-size: 1.125rem;
	color: #333;
	font-weight: 600;
}

.vwork_vms_box {
	background: #faf6f3;
	padding: 2rem;
	border-radius: 12px;
	border-left: 4px solid #FF7F50;
	margin-bottom: 2rem;
}

.vwork_vms_box h4 {
	color: #7E5940;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.vwork_vms_box p {
	color: #555;
	line-height: 1.8;
	margin-bottom: 1rem;
}

.vwork_vms_link {
	display: inline-block;
	background: #FF7F50;
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: transform 0.3s ease;
}

.vwork_vms_link:hover {
	transform: translateY(-2px);
}

.vwork_image_box {
	margin-top: 2rem;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.vwork_image_box img {
	width: 100%;
	height: auto;
	display: block;
}

.vwork_cta_button {
	display: inline-block;
	background: linear-gradient(135deg, #7E5940 0%, #543e31 100%);
	color: white;
	padding: 1rem 3rem;
	border-radius: 50px;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: 2rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 15px rgba(84, 62, 49, 0.4);
}

.vwork_cta_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(84, 62, 49, 0.6);
}

.vwork_footer {
	background: #EBDAC8;
	padding: 2rem;
	text-align: center;
	color: #543e31;
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	body {
		padding: 1rem;
	}

	.vwork_header h2 {
		font-size: 2rem;
	}

	.vwork_header .vwork_subtitle {
		font-size: 1rem;
	}

	.vwork_content {
		padding: 2rem 1.5rem;
	}

	.vwork_info_item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.vwork_contact_item {
		flex-direction: column;
		text-align: center;
	}
}

/*------------------------------------------------------------------------------------------------------
제품소개
---------------------------------------------------------------------------------------------------------*/
		/*-----------------------------------
		티브릭
		-----------------------------------*/