/* 장자기독학교 오시는길 페이지 전용 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========== BODY & BASIC OVERRIDES ========== */
body, input, select, textarea {
	font-weight: 400;
}

strong, b {
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
}

/* ========== MAIN HEADER ========== */
#main > header {
	background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%) !important;
	position: relative;
	overflow: hidden;
}

#main > header:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23e85d75" stop-opacity="0.05"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><circle cx="200" cy="200" r="300" fill="url(%23a)"/><circle cx="800" cy="800" r="400" fill="url(%23a)"/></svg>');
	opacity: 0.3;
	pointer-events: none;
}

#main > header h2 {
	font-size: 2.5em;
	font-weight: 800;
	background: linear-gradient(135deg, #e85d75 0%, #5c7cfa 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 2;
}

#main > header p {
	color: var(--text-secondary) !important;
	font-size: 1.2em;
	position: relative;
	z-index: 2;
}

/* ========== WRAPPER STYLES ========== */
.wrapper.style1 {
	background: var(--light-surface) !important;
	color: var(--text-primary) !important;
}

.wrapper.style3 {
	background: var(--light-bg) !important;
	color: var(--text-primary) !important;
}

/* ========== CONTENT SECTIONS ========== */
.content-section {
	margin: 3rem 0;
	padding: 3rem;
	background: var(--light-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 16px;
	transition: all 0.3s ease;
}

.content-section:hover {
	border-color: rgba(232, 93, 117, 0.3) !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.content-section h3 {
	color: var(--text-primary) !important;
	margin-bottom: 2rem;
	font-size: 1.8em;
	font-weight: 700;
	text-align: center;
	background: linear-gradient(135deg, #e85d75 0%, #5c7cfa 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ========== LOCATION DETAILS ========== */
.location-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

.address-card,
.contact-card {
	background: var(--light-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 2rem;
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	transition: all 0.3s ease;
}

.address-card:hover,
.contact-card:hover {
	border-color: rgba(232, 93, 117, 0.3);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.address-icon,
.contact-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #e85d75 0%, #5c7cfa 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5em;
	flex-shrink: 0;
}

.address-info h4,
.contact-info h4 {
	color: var(--text-primary);
	margin-bottom: 1rem;
	font-size: 1.2em;
	text-transform: none;
}

.address-main {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
}

.address-detail,
.postal-code {
	color: var(--text-secondary);
	margin-bottom: 0.3rem;
}

.contact-info p {
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

/* ========== MAP SECTION - CRITICAL FIX ========== */
#map-container {
	margin-bottom: 2rem;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--border-color);
	position: relative;
	min-height: 400px !important;
	height: 400px !important;
}

#naverMap {
	background: var(--light-surface);
	width: 100% !important;
	height: 400px !important;
	min-height: 400px !important;
	position: relative !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 네이버 지도 내부 요소들이 제대로 표시되도록 */
#naverMap > div {
	width: 100% !important;
	height: 100% !important;
}

.map-controls {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.map-controls .button {
	min-width: 120px;
}

/* ========== TRANSPORTATION SECTION ========== */
.transport-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.transport-card {
	background: var(--light-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
}

.transport-card:hover {
	border-color: rgba(92, 124, 250, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.transport-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #5c7cfa 0%, #e85d75 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 2em;
	margin: 0 auto 1.5rem;
}

.transport-card h4 {
	color: var(--text-primary);
	margin-bottom: 1.5rem;
	font-size: 1.2em;
	text-transform: none;
}

.transport-list {
	list-style: none;
	padding: 0;
	text-align: left;
}

.transport-list li {
	color: var(--text-secondary);
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-color);
	position: relative;
	padding-left: 1.5rem;
}

.transport-list li:last-child {
	border-bottom: none;
}

.transport-list li:before {
	content: '•';
	color: #e85d75;
	position: absolute;
	left: 0;
	font-weight: bold;
}

/* ========== BUTTON STYLES ========== */
.button.primary {
	background: linear-gradient(135deg, #e85d75 0%, #5c7cfa 100%) !important;
	border: none !important;
	color: white !important;
	padding: 0 2em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	box-shadow: 0 8px 25px rgba(232, 93, 117, 0.2) !important;
}

.button.primary:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 12px 35px rgba(232, 93, 117, 0.3) !important;
	background: linear-gradient(135deg, #5c7cfa 0%, #e85d75 100%) !important;
	color: white !important;
}

.button {
	border: 2px solid #5c7cfa !important;
	color: #5c7cfa !important;
	background: transparent !important;
	transition: all 0.3s ease;
	font-weight: 500;
}

.button:hover {
	background-color: #5c7cfa !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(92, 124, 250, 0.2) !important;
}

.button:focus {
	outline: 2px solid #5c7cfa !important;
	outline-offset: 2px !important;
	border-color: #5c7cfa !important;
}

.button:focus:not(:focus-visible) {
	outline: none !important;
}

.button.small {
	padding: 0.6em 1.5em !important;
	font-size: 0.8em !important;
	height: auto !important;
	line-height: 1.2 !important;
}

/* ========== RESPONSIVE DESIGN ========== */
@media screen and (max-width: 980px) {
	.content-section {
		padding: 2rem;
	}
	
	#main > header h2 {
		font-size: 2em;
	}
	
	#main > header p {
		font-size: 1.1em;
	}
	
	.location-details {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.transport-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media screen and (max-width: 736px) {
	.content-section {
		padding: 1.5rem;
	}
	
	#main > header h2 {
		font-size: 1.8em;
	}
	
	#main > header p {
		font-size: 1em;
	}
	
	.address-card,
	.contact-card,
	.transport-card {
		padding: 1.5rem;
	}
	
	.address-icon,
	.contact-icon,
	.transport-icon {
		width: 50px;
		height: 50px;
		font-size: 1.2em;
	}
	
	.map-controls {
		flex-direction: column;
		align-items: center;
	}
	
	.map-controls .button {
		width: 100%;
		max-width: 200px;
	}
	
	#map-container,
	#naverMap {
		height: 300px !important;
		min-height: 300px !important;
	}
}

@media screen and (max-width: 480px) {
	.content-section {
		padding: 1rem;
	}
	
	#main > header {
		padding: 4em 2em 2em 2em;
	}
	
	.address-card,
	.contact-card {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	
	.transport-card {
		padding: 1rem;
	}
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.content-section {
	animation: fadeInUp 0.6s ease-out;
	animation-fill-mode: both;
}

.content-section:nth-child(1) { animation-delay: 0.1s; }
.content-section:nth-child(2) { animation-delay: 0.2s; }
.content-section:nth-child(3) { animation-delay: 0.3s; }

/* ========== SCROLLBAR STYLING ========== */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--light-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #e85d75;
}

/* ========== TEXT SELECTION ========== */
::selection {
	background: #e85d75;
	color: white;
}

::-moz-selection {
	background: #e85d75;
	color: white;
}