/* 반드시 CLAUDE.md의 절대원칙을 읽고 따를 것, 하나의 클래스/모듈은 하나의 책임만 가져야 함 (SRP 원칙), 하나의 파일에 코드줄은 최대 500~600줄 내에서 생성하여야 하며 최대 코드줄이 넘어가지 않도록 작성, 만약 코드가 길어지면 분할해서 코드작업을 완성하여야 함 */
/* 문서 위치: X:\web\theunjeong\docs\FRONTEND_BUSINESS_LOCATION.md */
/* 사업개요 및 오시는길 섹션 스타일 */

/* ===========================================
   사업개요 섹션 (데스크탑)
   =========================================== */
.business-overview-section {
	padding: 80px 0;
	background: #f9f9f9;
}

.business-overview-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.business-overview-header {
	text-align: center;
	margin-bottom: 30px;
}

.business-overview-subtitle {
	font-size: 36px;
	font-weight: bold;
	color: #333;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
	line-height: 1.4;
	margin: 0;
}

.business-overview-title {
	font-size: 42px;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin: 0;
}

.business-overview-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.business-overview-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
}

.business-overview-table th {
	background: #786555;
	color: white;
	font-weight: bold;
	padding: 20px 30px;
	border: 1px solid #e0e0e0;
	font-size: 16px;
	text-align: center;
	width: 237px;
	vertical-align: middle;
}

.business-overview-table td {
	background: white;
	color: #333;
	padding: 20px 30px;
	border: 1px solid #e0e0e0;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
}

.business-overview-table .nested-cell {
	padding: 0;
	vertical-align: middle;
	border-left: none;
	border-top: none;
	border-bottom: none;
	/* 우측 테두리는 유지 */
}

.business-overview-table .nested-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.business-overview-table .nested-table th {
	background: #786555;
	color: white;
	font-weight: bold;
	padding: 15px 20px;
	border: none;
	border-right: 1px solid #6b5a4c;
	font-size: 15px;
	text-align: center;
	width: 237px;
}

.business-overview-table .nested-table th:last-child {
	border-right: none;
}

.business-overview-table .nested-table td {
	background: white;
	padding: 15px 20px;
	border: none;
	border-top: 1px solid #e0e0e0;
	font-size: 15px;
	text-align: center;
}

.business-overview-table .nested-table tr:first-child td {
	border-top: none;
}

/* ===========================================
   오시는 길 섹션 (데스크탑)
   =========================================== */
.location-section {
	padding: 80px 0;
	background: #fff;
}

.location-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.location-header {
	text-align: center;
	margin-bottom: 30px;
}

.location-subtitle {
	font-size: 16px;
	color: #666;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
}

.location-title {
	font-size: 36px;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin: 0;
}

.location-map-wrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.location-map-container {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	max-width: 100%;
}

.location-map {
	max-width: 860px;
	width: 100%;
	background: #f5f5f5;
	border-radius: 8px;
	overflow: hidden;
}

.location-map img {
	width: 100%;
	height: auto;
	display: block;
}

.location-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 30px;
	background: #fff;
	border-radius: 8px;
	min-width: 300px;
}

/* 뒤뚱뒤뚱 애니메이션 */
@keyframes wiggle {
	0%, 100% { transform: rotate(0deg); }
	10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
	20%, 40%, 60%, 80% { transform: rotate(5deg); }
}

.location-naver-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.location-naver-link:hover {
	animation: wiggle 0.6s ease-in-out;
}

.naver-icon {
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
	border-radius: 12px;
}

.naver-text {
	color: #03C75A;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.location-address {
	text-align: center;
}

.location-name {
	font-size: 20px;
	font-weight: bold;
	color: #333;
	margin: 0 0 10px 0;
}

.location-addr {
	font-size: 20px;
	color: #666;
	margin: 0;
	line-height: 1.6;
}

/* Coming Soon 섹션 */
.coming-soon-section {
	height: 100vh;
}

.coming-soon-message {
	padding: 30px 40px;
	margin: 0 20px;
}

.coming-soon-message h1 {
	font-size: 36px;
}

.coming-soon-message p {
	font-size: 16px;
}

/* 데스크톱/모바일 테이블 표시 제어 */
.desktop-table {
	display: block;
}

.mobile-table {
	display: none;
}

/* 모바일 전용 줄바꿈 숨김 (데스크톱) */
.mobile-br {
	display: none;
}

/* ===========================================
   모바일 반응형 (768px 이하)
   =========================================== */
@media (max-width: 768px) {
	/* 데스크톱 테이블 숨기기, 모바일 테이블 표시 */
	.desktop-table {
		display: none;
	}

	.mobile-table {
		display: block;
	}

	/* 모바일 전용 줄바꿈 표시 */
	.mobile-br {
		display: block;
	}

	/* 사업개요 섹션 */
	.business-overview-section {
		padding: 60px 0;
	}

	.business-overview-header {
		margin-bottom: 20px;
	}

	.business-overview-subtitle {
		font-size: 24px;
	}

	.business-overview-title {
		font-size: 28px;
	}

	/* 모바일 테이블 스타일링 */
	.business-overview-table-mobile {
		width: 100%;
		border-collapse: collapse;
		background: white;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		overflow: hidden;
	}

	.business-overview-table-mobile th {
		background: #786555;
		color: white;
		font-weight: bold;
		padding: 15px 20px;
		border: 1px solid #e0e0e0;
		font-size: 14px;
		text-align: center;
		width: 30%;
		vertical-align: middle;
	}

	.business-overview-table-mobile td {
		background: white;
		color: #333;
		padding: 15px 20px;
		border: 1px solid #e0e0e0;
		font-size: 14px;
		line-height: 1.6;
		text-align: left;
		vertical-align: middle;
	}

	/* 기존 데스크톱 테이블 스타일 (사용 안 함) */
	.business-overview-table th {
		padding: 15px 20px;
		font-size: 14px;
	}

	.business-overview-table td {
		padding: 15px 20px;
		font-size: 14px;
	}

	/* 오시는 길 섹션 - 모바일 최적화 */
	.location-section {
		padding: 60px 0;
	}

	.location-container {
		padding: 0;
	}

	.location-header {
		margin-bottom: 20px;
		padding: 0 20px;
	}

	.location-subtitle {
		font-size: 14px;
	}

	.location-title {
		font-size: 24px;
	}

	/* 지도 wrapper - 여백 제거 */
	.location-map-wrapper {
		margin: 0;
		padding: 0;
	}

	/* 지도와 정보를 세로로 배치 - 여백 완전 제거 */
	.location-map-container {
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
	}

	/* 지도 이미지 100% 너비 - 배경과 그림자 제거 */
	.location-map {
		max-width: 100%;
		width: 100%;
		height: auto;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.location-map img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* 정보 영역 - 이미지와 적절한 간격 유지 */
	.location-info {
		width: 100%;
		min-width: auto;
		padding: 0 20px;
		margin-top: 30px;
		gap: 10px;
		background: transparent;
		border-radius: 0;
	}

	/* 네이버 아이콘 50% 축소 */
	.naver-icon {
		width: 50%;
		height: auto;
	}

	.naver-text {
		font-size: 16px;
	}

	/* 주소 폰트사이즈 축소 */
	.location-name {
		font-size: 16px;
	}

	.location-addr {
		font-size: 14px;
	}
}

/* ===========================================
   모바일 반응형 (480px 이하)
   =========================================== */
@media (max-width: 480px) {
	/* 데스크톱 테이블 숨기기, 모바일 테이블 표시 */
	.desktop-table {
		display: none;
	}

	.mobile-table {
		display: block;
	}

	/* 모바일 전용 줄바꿈 표시 */
	.mobile-br {
		display: block;
	}

	/* 사업개요 섹션 */
	.business-overview-section {
		padding: 40px 0;
	}

	.business-overview-subtitle {
		font-size: 20px;
	}

	.business-overview-title {
		font-size: 24px;
	}

	/* 모바일 테이블 스타일링 */
	.business-overview-table-mobile {
		width: 100%;
		border-collapse: collapse;
		background: white;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		overflow: hidden;
	}

	.business-overview-table-mobile th {
		background: #786555;
		color: white;
		font-weight: bold;
		padding: 12px 15px;
		border: 1px solid #e0e0e0;
		font-size: 13px;
		text-align: center;
		width: 30%;
		vertical-align: middle;
	}

	.business-overview-table-mobile td {
		background: white;
		color: #333;
		padding: 12px 15px;
		border: 1px solid #e0e0e0;
		font-size: 13px;
		line-height: 1.6;
		text-align: left;
		vertical-align: middle;
	}

	/* 기존 데스크톱 테이블 스타일 (사용 안 함) */
	.business-overview-table th {
		padding: 12px 15px;
		font-size: 13px;
	}

	.business-overview-table td {
		padding: 12px 15px;
		font-size: 13px;
	}

	/* 오시는 길 섹션 */
	.location-section {
		padding: 40px 0;
	}

	.location-container {
		padding: 0;
	}

	.location-header {
		margin-bottom: 15px;
		padding: 0 20px;
	}

	.location-subtitle {
		font-size: 13px;
	}

	.location-title {
		font-size: 20px;
	}

	/* 지도 wrapper - 여백 제거 */
	.location-map-wrapper {
		margin: 0;
		padding: 0;
	}

	.location-map-container {
		gap: 0;
		margin: 0;
		padding: 0;
	}

	/* 지도 이미지 - 배경과 그림자 제거 */
	.location-map {
		height: auto;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.location-map img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* 정보 영역 - 이미지와 적절한 간격 유지 */
	.location-info {
		padding: 0 20px;
		margin-top: 30px;
		gap: 8px;
		background: transparent;
		border-radius: 0;
	}

	/* 네이버 아이콘 50% 축소 */
	.naver-icon {
		width: 50%;
		height: auto;
	}

	.naver-text {
		font-size: 14px;
	}

	/* 주소 폰트사이즈 추가 축소 */
	.location-name {
		font-size: 15px;
	}

	.location-addr {
		font-size: 13px;
	}
}