/* 장자기독학교 입학안내 페이지 - 라이트 테마 (중간톤) */
@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');

:root {
	--primary-red: #e85d75;
	--primary-blue: #5c7cfa;
	--light-bg: #f8fafc;
	--light-surface: #ffffff;
	--light-card: #f1f5f9;
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--text-muted: #94a3b8;
	--border-color: #e2e8f0;
	--gradient-primary: linear-gradient(135deg, #e85d75 0%, #5c7cfa 100%);
	--gradient-light: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
	--gradient-accent: linear-gradient(135deg, #5c7cfa 0%, #e85d75 100%);
	--shadow-light: rgba(0, 0, 0, 0.1);
}

/* ========== 입학안내 헤더 이미지 스타일 (수정됨) ========== */
#admission-header {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}

#admission-header .wrapper {
    padding: 0 !important;
}

#admission-header .spotlight {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #ffffff !important;
}

#admission-header .spotlight .image {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: block !important;
    background: #ffffff !important;
}

#admission-header .spotlight .content {
    display: none !important;
}

#admission-header .spotlight .image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block !important;
    transition: transform 0.6s ease, filter 0.6s ease !important;
    filter: brightness(1) contrast(1.1) !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 헤더 애니메이션 */
#admission-header .spotlight:not(.animate) .image {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

#admission-header.animate .spotlight .image,
#admission-header .spotlight.animate .image {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#admission-header .spotlight:hover .image img {
    transform: scale(1.02) !important;
}

/* ========== CRITICAL MENU FIX ========== */
/* 메뉴가 보이도록 강제 설정 */
html body #menu {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	width: 20em !important;
	max-width: 80% !important;
	height: 100% !important;
	background: white !important;
	box-shadow: -0.5em 0 1em rgba(0,0,0,0.2) !important;
	overflow-y: auto !important;
	z-index: 10001 !important;
	transform: translateX(100%) !important;
	-webkit-transform: translateX(100%) !important;
	transition: transform 0.5s ease !important;
	-webkit-transition: -webkit-transform 0.5s ease !important;
}

html body.is-menu-visible #menu {
	transform: translateX(0) !important;
	-webkit-transform: translateX(0) !important;
}

body.is-menu-visible #page-wrapper {
	opacity: 0.35 !important;
	pointer-events: none !important;
}

body.is-menu-visible #page-wrapper:before {
	content: '' !important;
	display: block !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0,0,0,0.5) !important;
	z-index: 10000 !important;
}

#menu ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 2em 0 0 0 !important;
}

#menu ul > li {
	border-top: 1px solid var(--border-color) !important;
	margin: 0 !important;
	padding: 0 !important;
}

#menu ul > li > a {
	display: block !important;
	padding: 1em 2em !important;
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
}

#menu ul > li > a:hover {
	background: var(--light-card) !important;
	color: var(--primary-red) !important;
	padding-left: 2.5em !important;
}

#menu ul > li > a.active {
	color: var(--primary-red) !important;
	font-weight: 600 !important;
}

/* 메뉴 토글 버튼 */
.menuToggle {
	display: block !important;
	cursor: pointer !important;
	z-index: 10002 !important;
}

/* ========== BODY & BASIC OVERRIDES ========== */
body {
	background: var(--light-bg) !important;
	color: var(--text-primary) !important;
	font-family: 'Noto Sans KR', 'Inter', sans-serif !important;
}

body, input, select, textarea {
	color: var(--text-primary) !important;
	font-weight: 400;
}

strong, b {
	color: var(--text-primary) !important;
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary) !important;
	font-weight: 600;
}

/* ========== HEADER IMPROVEMENTS ========== */
#header {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 2px 8px var(--shadow-light) !important;
	border-bottom: 1px solid var(--border-color) !important;
	transition: all 0.3s ease !important;
}

#header h1 a {
	color: var(--text-primary) !important;
	font-weight: 700;
	text-decoration: none;
	border: none;
}

#header nav > ul > li > a {
	color: var(--text-secondary) !important;
	font-weight: 500;
	transition: all 0.3s ease;
}

#header nav > ul > li > a:hover {
	color: var(--primary-red) !important;
}

/* ========== MAIN HEADER ========== */
#main > header {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	color: white !important;
	position: relative;
	overflow: hidden;
	padding: 8em 0 6em 0;
}

#main > header:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
	animation: shimmer 4s infinite;
	pointer-events: none;
}

#main > header h2 {
	color: white !important;
	font-size: 2.5em;
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

#main > header p {
	color: white !important;
	font-size: 1.2em;
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ========== SUB NAVIGATION ========== */
.sub-nav {
	background: var(--light-surface) !important;
	padding: 2em 0;
	border-bottom: 1px solid var(--border-color);
}

.sub-nav .actions.fit .button {
	background: transparent !important;
	color: var(--text-secondary) !important;
	border: 2px solid var(--border-color) !important;
	font-weight: 500;
	transition: all 0.3s ease;
	font-size: 0.9em !important;
	padding: 0.8em 2em !important;
	border-radius: 8px !important;
	text-transform: none !important;
	letter-spacing: 0.5px !important;
}

.sub-nav .actions.fit .button:hover {
	background: var(--primary-red) !important;
	color: white !important;
	border-color: var(--primary-red) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(232, 93, 117, 0.2) !important;
}

.sub-nav .actions.fit .button.active {
	background: var(--gradient-primary) !important;
	color: white !important;
	border-color: var(--primary-red) !important;
}

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

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

.wrapper.style4 {
	background: var(--gradient-primary) !important;
	color: white !important;
	position: relative;
}

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

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

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

.content-section h3 {
	color: var(--text-primary) !important;
	margin-bottom: 2rem;
	font-size: 1.8em;
	font-weight: 700;
	text-align: center;
	background: var(--gradient-primary);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.content-section .placeholder {
	background: rgba(232, 93, 117, 0.05) !important;
	border: 2px dashed var(--primary-red) !important;
	border-radius: 12px;
	padding: 3rem;
	text-align: center;
	color: var(--text-secondary) !important;
}

/* ========== Q&A TABS ========== */
.qna-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
	justify-content: center;
}

.qna-tab {
	background: transparent !important;
	border: 2px solid var(--border-color) !important;
	color: var(--text-secondary) !important;
	padding: 0.8em 1.5em !important;
	border-radius: 8px !important;
	font-size: 0.85em !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.qna-tab:hover {
	background: var(--primary-blue) !important;
	color: white !important;
	border-color: var(--primary-blue) !important;
	transform: translateY(-2px);
}

.qna-tab.active {
	background: var(--gradient-primary) !important;
	color: white !important;
	border-color: var(--primary-red) !important;
}

/* ========== QNA CONTENT ========== */
.qna-content {
	background: var(--light-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 12px;
	padding: 2.5rem;
	min-height: 300px;
}

/* ========== QNA ITEMS ========== */
.qna-item {
	background: white;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	margin-bottom: 1rem;
	box-shadow: 0 2px 4px var(--shadow-light);
	transition: all 0.3s ease;
}

.qna-item:hover {
	border-color: rgba(232, 93, 117, 0.3);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.qna-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.qna-question:hover {
	background: rgba(232, 93, 117, 0.03);
}

.qna-question h4 {
	color: var(--text-primary);
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	letter-spacing: -0.5px;
}

.qna-toggle {
	display: none !important;
}

.qna-answer {
	display: none;
	padding: 0 1.5rem 1.5rem;
	border-top: 1px solid var(--border-color);
}

.qna-item.active .qna-answer {
	display: block;
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.answer-content h5 {
	color: var(--text-primary);
	font-size: 1em;
	font-weight: 600;
	margin: 1.5rem 0 0.8rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.answer-content p {
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0.8rem 0;
}

/* ========== FOOTER ========== */
#footer {
	background: var(--light-surface) !important;
	border-top: 1px solid var(--border-color) !important;
}

#footer .icons a {
	color: var(--text-secondary) !important;
	transition: all 0.3s ease;
	background: var(--light-card) !important;
	border: 1px solid var(--border-color) !important;
}

#footer .icons a:hover {
	color: white !important;
	background: var(--primary-red) !important;
	border-color: var(--primary-red) !important;
}

/* ========== RESPONSIVE ========== */
@media screen and (max-width: 980px) {
	.content-section {
		padding: 2rem;
	}
	
	body #menu {
		width: 16em !important;
		transform: translateX(16em) !important;
	}
	
	#admission-header .spotlight .image {
        height: auto !important;
    }
    
    #admission-header .spotlight .image img {
        width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 736px) {
	.content-section {
		padding: 1.5rem;
	}
	
	body #menu {
		width: 100% !important;
		max-width: 100% !important;
		transform: translateX(100%) !important;
	}
	
	/* 헤더 모바일 최적화 */
    #admission-header {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #admission-header .wrapper {
        padding: 0 !important;
    }
    
    #admission-header .spotlight {
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    #admission-header .spotlight .image {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }
    
    #admission-header .spotlight .image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

@media screen and (max-width: 480px) {
    /* 헤더 작은 화면 최적화 */
    #admission-header .spotlight .image img {
        width: 100% !important;
        height: auto !important;
    }
}

::selection {
	background: var(--primary-red);
	color: white;
}
/* ========== 입학요강 게시판 스타일 ========== */

/* 입학요강 아이템 */
.admission-guide-item {
	background: white;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 8px var(--shadow-light);
	transition: all 0.3s ease;
	overflow: hidden;
}

.admission-guide-item:hover {
	border-color: rgba(232, 93, 117, 0.3);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.admission-guide-item.active {
	border-color: var(--primary-blue);
}

/* 입학요강 헤더 */
.guide-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 2rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
	gap: 1rem;
}

.guide-header:hover {
	background: rgba(232, 93, 117, 0.03);
}

.guide-header h4 {
	color: var(--text-primary);
	margin: 0;
	font-size: 1.2em;
	font-weight: 600;
	display: flex;
	align-items: center;
	flex: 1;
	letter-spacing: -0.5px;
}

/* 입학요강 메타정보 */
.guide-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.guide-date {
	color: var(--text-muted);
	font-size: 0.9em;
	white-space: nowrap;
}

.guide-toggle-btn {
	background: var(--primary-blue);
	border: none;
	color: white;
	cursor: pointer;
	padding: 0.6rem 1.2rem;
	font-size: 0.9em;
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	box-shadow: 0 2px 4px rgba(92, 124, 250, 0.2);
}

.guide-toggle-btn:hover {
	background: var(--primary-red);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(232, 93, 117, 0.3);
}

.guide-toggle-btn i {
	font-size: 0.9em;
	transition: transform 0.3s ease;
}

.admission-guide-item.active .guide-toggle-btn {
	background: var(--primary-red);
}

.admission-guide-item.active .guide-toggle-btn i {
	transform: rotate(180deg);
}

/* 입학요강 내용 */
.guide-content {
	border-top: 1px solid var(--border-color);
	animation: slideDown 0.3s ease-out;
}

.guide-body {
	padding: 2rem;
	color: var(--text-secondary);
	line-height: 1.8;
	font-size: 1em;
}

/* 첨부파일 다운로드 링크 */
.guide-attachment {
	padding: 0 2rem 2rem;
}

.file-download-link {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--primary-blue) !important;
	color: white !important;
	text-decoration: none !important;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(92, 124, 250, 0.2);
}

.file-download-link:hover {
	background: var(--primary-red) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(232, 93, 117, 0.3);
}

.file-download-link i {
	font-size: 1.1em;
}

/* 반응형 */
@media screen and (max-width: 736px) {
	.guide-header {
		padding: 1rem 1.5rem;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.guide-header h4 {
		font-size: 1em;
		margin-bottom: 0.5rem;
	}
	
	.guide-meta {
		width: 100%;
		justify-content: space-between;
	}
	
	.guide-toggle-btn {
		font-size: 0.85em;
		padding: 0.5rem 1rem;
	}
	
	.guide-body {
		padding: 1.5rem;
		font-size: 0.95em;
	}
	
	.guide-attachment {
		padding: 0 1.5rem 1.5rem;
	}
	
	.file-download-link {
		width: 100%;
		justify-content: center;
		font-size: 0.9em;
	}
}

/* 애니메이션 */
@keyframes slideDown {
	from {
		opacity: 0;
		max-height: 0;
	}
	to {
		opacity: 1;
		max-height: 2000px;
	}
}