/* 버튼용 Pretendard 글꼴 (@import는 파일 맨 위에 있어야 동작함) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* ===================================
   메인 페이지 전용 스타일 (통합본)
   - 순서: hero → about → concerts → repertoire → members → contact
   - 각 섹션 규칙은 .visual / #about / #concerts / #repertoire / #members / #contact 안에서만 적용
   =================================== */


/* ===================================
   메인 슬라이드(hero) 전용 스타일
   - xedition 레이아웃의 .visual(슬라이드 영역) 안에서만 적용
   - etc_pages/css/style.css에서 hero/버튼 규칙만 옮겨옴
   =================================== */

.visual {
	--hero-primary: #1a2332;
	--hero-accent: #c9a961;
	--hero-accent-hover: #b89850;
	--hero-light: #ffffff;
	--hero-transition: all 0.3s ease;
}

/* 텍스트 */
.visual .hero-title {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px;
}

.visual .hero-subtitle {
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--hero-accent);
	margin: 0 0 15px;
}

.visual .hero-description {
	font-size: 1.2rem;
	font-weight: 300;
	margin: 0 0 40px;
}

/* 버튼 묶음 */
.visual .hero-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
}

/* 버튼 */
.visual .hero-buttons .btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 15px 35px;
	border-radius: 30px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: var(--hero-transition);
}

.visual .hero-buttons .btn-primary {
	background: var(--hero-accent);
	color: var(--hero-light);
	border: 2px solid var(--hero-accent);
}

.visual .hero-buttons .btn-primary:hover {
	background: var(--hero-accent-hover);
	border-color: var(--hero-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(201, 169, 97, 0.4);
}

.visual .hero-buttons .btn-secondary {
	background: transparent;
	color: var(--hero-light);
	border: 2px solid var(--hero-light);
}

.visual .hero-buttons .btn-secondary:hover {
	background: var(--hero-light);
	color: var(--hero-primary);
}

/* 태블릿/모바일 */
@media (max-width: 768px) {
	.visual .hero-title {
		font-size: 2.2rem;
	}

	.visual .hero-subtitle {
		font-size: 1.2rem;
	}

	.visual .hero-description {
		font-size: 1rem;
	}

	.visual .hero-buttons {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.visual .hero-title {
		font-size: 1.8rem;
	}

	.visual .hero-buttons {
		flex-direction: column;
		gap: 15px;
	}

	.visual .hero-buttons .btn {
		padding: 12px 30px;
	}

	.visual .hero-description {
		margin-bottom: 24px;
	}
}

/* 휴대폰: xedition은 479px 이하에서 슬라이드 높이를 270px로 고정함
   → 제목 2줄 + 설명 + 세로로 쌓인 버튼 2개가 들어가지 않아 아래가 잘리므로 높이를 늘림 */
@media all and (max-width: 479px) {
	.visual.swiper-container,
	.visual.swiper-container > div > div {
		height: 400px;
	}
}


/* ===================================
   메인 페이지 About 섹션 전용 스타일
   - 페이지 관리 도구로 넣은 <section class="section" id="about"> 안에서만 적용
   - etc_pages/css/style.css에서 section/about/버튼 규칙만 옮겨옴
   =================================== */

#about {
	--about-primary: #1a2332;
	--about-accent: #c9a961;
	--about-accent-hover: #b89850;
	--about-text-dark: #2c3e50;
	--about-text-gray: #7f8c8d;
	--about-light: #ffffff;
	--about-transition: all 0.3s ease;

	position: relative;
	padding: 48px 0 32px; /* 아래 여백은 줄임 (바로 아래 유튜브 줄과 가깝게) */
}

#about *,
#about *::before,
#about *::after {
	box-sizing: border-box;
}

/* xedition의 .container { min-width: 1240px; } 무효화 */
#about .container {
	min-width: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: transparent;
}

/* 섹션 제목 */
#about .section-header {
	text-align: center;
	margin-bottom: 40px;
}

#about .section-title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--about-primary);
	margin: 0 0 15px;
}

#about .section-subtitle {
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--about-text-gray);
	margin: 0;
}

/* 본문 + 사진 2단 */
#about .about-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-bottom: 60px;
}

/* 아래 특징 카드(.features)가 없을 때는 본문 아래 여백 없음 */
#about .about-content:last-child {
	margin-bottom: 0;
}

#about .about-text h3 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--about-primary);
	margin: 0 0 20px;
}

#about .about-text p {
	margin: 0 0 20px;
	line-height: 1.8;
	color: var(--about-text-dark);
}

#about .about-image {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about .about-image:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

#about .about-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 450px;
	object-fit: cover;
}

/* 특징 카드 (현재 주석 처리된 .features 영역용) */
#about .features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

#about .feature-card {
	background: var(--about-light);
	padding: 40px 30px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
	transition: var(--about-transition);
}

#about .feature-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#about .feature-icon {
	font-size: 3rem;
	margin-bottom: 20px;
}

#about .feature-card h3 {
	font-size: 1.3rem;
	color: var(--about-primary);
	margin: 0 0 15px;
}

#about .feature-card p {
	color: var(--about-text-gray);
	line-height: 1.6;
	margin: 0;
}

/* 버튼 */
#about .btn {
	display: inline-block;
	padding: 15px 35px;
	border-radius: 30px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: var(--about-transition);
}

#about .btn-primary {
	background: var(--about-accent);
	color: var(--about-light);
}

#about .btn-primary:hover {
	background: var(--about-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(201, 169, 97, 0.4);
}

/* 태블릿/모바일 */
@media (max-width: 768px) {
	#about .about-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	#about .about-image img {
		height: 350px;
	}
}

@media (max-width: 480px) {
	#about {
		padding: 36px 0 24px;
	}

	#about .section-title {
		font-size: 1.8rem;
	}

	#about .btn {
		padding: 12px 30px;
	}
}


/* ===================================
   메인 페이지 Concerts 섹션 전용 스타일
   - 페이지 관리 도구로 넣은 <section class="section section-gray" id="concerts"> 안에서만 적용
   - etc_pages/css/style.css에서 section/concert/버튼 규칙만 옮겨옴
   =================================== */

#concerts {
	--concerts-primary: #1a2332;
	--concerts-accent: #c9a961;
	--concerts-accent-hover: #b89850;
	--concerts-text-dark: #2c3e50;
	--concerts-text-gray: #7f8c8d;
	--concerts-light: #ffffff;
	--concerts-bg-light: #f8f9fa;
	--concerts-transition: all 0.3s ease;

	position: relative;
	padding: 48px 0; /* 섹션 위아래 여백 (원래 80px) */
	margin-top: 40px; /* 위쪽 일정 섹션과의 간격 */
}

#concerts.section-gray {
	background-color: var(--concerts-bg-light);
}

#concerts *,
#concerts *::before,
#concerts *::after {
	box-sizing: border-box;
}

/* xedition의 .container { min-width: 1240px; background: #fff; } 무효화 */
#concerts .container {
	min-width: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: transparent;
}

/* 공연 카드 목록 */
#concerts .concerts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
}

#concerts .concert-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--concerts-light);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
	transition: var(--concerts-transition);
}

#concerts .concert-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#concerts .concert-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 500;
}

#concerts .concert-badge.upcoming {
	background: var(--concerts-accent);
	color: var(--concerts-light);
}

#concerts .concert-badge.past {
	background: var(--concerts-text-gray);
	color: var(--concerts-light);
}

#concerts .concert-image {
	position: relative;
	aspect-ratio: 210 / 297; /* 포스터(A판 세로) 비율 그대로 → 위아래 잘림 없음 (원래 height: 300px) */
	overflow: hidden;
	background: var(--concerts-bg-light);
}

#concerts .concert-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

#concerts .concert-card:hover .concert-image img {
	transform: scale(1.1);
}

#concerts .concert-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 30px;
}

#concerts .concert-date {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 15px 20px;
	margin-bottom: 15px;
	border-radius: 8px;
	background: var(--concerts-primary);
	color: var(--concerts-light);
}

#concerts .concert-date .month {
	font-size: 1rem;
	font-weight: 300;
}

#concerts .concert-date .day {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1;
}

#concerts .concert-date .event-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.08rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	word-break: keep-all;
}

#concerts .concert-content h3 {
	font-size: 1.5rem;
	color: var(--concerts-primary);
	margin: 0 0 15px;
}

#concerts .concert-info {
	margin-bottom: 15px;
}

#concerts .concert-info p {
	color: var(--concerts-text-dark);
	margin: 0 0 8px;
}

#concerts .concert-description {
	color: var(--concerts-text-gray);
	line-height: 1.6;
	margin: 0 0 20px;
}

/* 버튼 */
#concerts .btn {
	display: inline-block;
	padding: 15px 35px;
	border-radius: 30px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: var(--concerts-transition);
}

#concerts .btn-primary {
	background: var(--concerts-accent);
	color: var(--concerts-light);
}

#concerts .btn-primary:hover {
	background: var(--concerts-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(201, 169, 97, 0.4);
}

#concerts .btn-outline {
	padding: 12px 30px;
	background: transparent;
	color: var(--concerts-accent);
	border: 2px solid var(--concerts-accent);
}

#concerts .btn-outline:hover {
	background: var(--concerts-accent);
	color: var(--concerts-light);
}

/* 버튼을 카드 하단에 고정 */
#concerts .concert-content .btn {
	margin-top: auto;
}

/* 태블릿/모바일 */
@media (max-width: 768px) {
	#concerts .concerts-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	#concerts {
		padding: 36px 0; /* 원래 60px */
	}

	#concerts .btn {
		padding: 12px 30px;
	}
}


/* ===================================
   메인 페이지 Repertoire 섹션 전용 스타일
   - 페이지 관리 도구로 넣은 <section class="section section-gray" id="repertoire"> 안에서만 적용
   - etc_pages/css/style.css에서 section/repertoire/버튼 규칙만 옮겨옴
   =================================== */

#repertoire {
	/* 본문 HTML의 인라인 style이 var(--text-gray), var(--accent-color)를 쓰므로
	   style.css와 같은 이름의 변수를 이 섹션 안에서만 정의 */
	--primary-color: #1a2332;
	--accent-color: #c9a961;
	--text-dark: #2c3e50;
	--text-light: #ffffff;
	--text-gray: #7f8c8d;
	--bg-light: #f8f9fa;
	--transition: all 0.3s ease;

	position: relative;
	padding: 48px 0; /* 섹션 위아래 여백 (원래 80px) */
}

#repertoire.section-gray {
	background-color: var(--bg-light);
}

#repertoire *,
#repertoire *::before,
#repertoire *::after {
	box-sizing: border-box;
}

/* xedition의 .container { min-width: 1240px; background: #fff; } 무효화 */
#repertoire .container {
	min-width: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: transparent;
}

/* 사진 + 본문 2단 */
#repertoire .repertoire-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-bottom: 60px;
}

#repertoire .repertoire-image {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#repertoire .repertoire-image:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

#repertoire .repertoire-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 450px;
	object-fit: cover;
}

#repertoire .repertoire-text h3 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color);
	margin: 0 0 20px;
}

#repertoire .repertoire-text p {
	margin: 0 0 20px;
	line-height: 1.8;
	color: var(--text-dark);
}

/* 하이라이트 목록 (style.css에 있던 .repertoire-highlights 영역용) */
#repertoire .repertoire-highlights {
	margin-top: 30px;
}

#repertoire .highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: rgba(201, 169, 97, 0.05);
	border-radius: 10px;
	border-left: 3px solid var(--accent-color);
	transition: all 0.3s ease;
}

#repertoire .highlight-item:hover {
	background: rgba(201, 169, 97, 0.1);
	transform: translateX(5px);
}

#repertoire .highlight-icon {
	font-size: 2rem;
	flex-shrink: 0;
}

#repertoire .highlight-item h4 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0 0 5px;
}

#repertoire .highlight-item p {
	font-size: 0.95rem;
	color: var(--text-gray);
	margin: 0;
	line-height: 1.5;
}

/* 버튼 */
#repertoire .btn {
	display: inline-block;
	padding: 15px 35px;
	border-radius: 30px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: var(--transition);
}

#repertoire .btn-primary {
	background: var(--accent-color);
	color: var(--text-light);
}

#repertoire .btn-primary:hover {
	background: #b89850;
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(201, 169, 97, 0.4);
}

/* 태블릿/모바일 */
@media (max-width: 768px) {
	#repertoire .repertoire-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	#repertoire .repertoire-image img {
		height: 350px;
	}

	#repertoire .highlight-item {
		padding: 12px;
		gap: 12px;
	}

	#repertoire .highlight-icon {
		font-size: 1.5rem;
	}

	#repertoire .highlight-item h4 {
		font-size: 1rem;
	}

	#repertoire .highlight-item p {
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	#repertoire {
		padding: 36px 0; /* 원래 60px */
	}

	#repertoire .btn {
		padding: 12px 30px;
	}
}


/* ===================================
   메인 페이지 Members 섹션 전용 스타일
   - 페이지 관리 도구로 넣은 <section class="section" id="members"> 안에서만 적용
   - etc_pages/css/style.css에서 section/member/버튼 규칙만 옮겨옴
   =================================== */

#members {
	--primary-color: #1a2332;
	--secondary-color: #8b7355;
	--accent-color: #c9a961;
	--text-dark: #2c3e50;
	--text-light: #ffffff;
	--text-gray: #7f8c8d;
	--bg-light: #f8f9fa;
	--transition: all 0.3s ease;

	position: relative;
	padding: 48px 0; /* 섹션 위아래 여백 (원래 80px) */
}

#members *,
#members *::before,
#members *::after {
	box-sizing: border-box;
}

/* xedition의 .container { min-width: 1240px; background: #fff; } 무효화 */
#members .container {
	min-width: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: transparent;
}

/* 섹션 제목 */
#members .section-header {
	text-align: center;
	margin-bottom: 40px;
}

#members .section-title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color);
	margin: 0 0 15px;
}

#members .section-subtitle {
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--text-gray);
	margin: 0;
}

/* 지휘자/악장/단장 카드 */
#members .leadership {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-bottom: 60px;
}

#members .member-card {
	background: var(--text-light);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

#members .member-card.featured {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	text-align: left;
}

#members .member-card.featured.reverse {
	flex-direction: row-reverse;
}

/* 카드 가장자리에서 띄워야 사진의 둥근 모서리와 그림자가 보임 */
#members .member-card.featured .member-image {
	margin: 20px 0 20px 20px;
}

#members .member-card.featured.reverse .member-image {
	margin: 20px 20px 20px 0;
}

#members .member-image {
	position: relative;
	flex-shrink: 0;
	width: 200px;
	height: 250px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--bg-light);
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#members .member-image:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* 사진이 틀을 꽉 채워야 둥근 모서리가 사진에 적용됨 (얼굴이 잘리지 않게 위쪽 기준) */
#members .member-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

#members .member-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	padding: 20px 30px 20px 15px;
}

#members .member-info h3 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color);
	margin: 0 0 8px;
}

#members .member-role {
	display: inline-block;
	align-self: flex-start;
	padding: 5px 15px;
	margin: 0 0 15px;
	border-radius: 15px;
	background: var(--accent-color);
	color: var(--text-light);
	font-size: 0.9rem;
	font-weight: 500;
}

#members .member-role.conductor {
	background: var(--primary-color);
}

#members .member-role.concertmaster {
	background: var(--secondary-color);
}

#members .member-role.president {
	background: var(--accent-color);
}

#members .member-detail {
	font-size: 0.95rem;
	color: var(--text-gray);
	margin: 5px 0 15px;
}

#members .member-card.featured .member-detail {
	font-size: 1rem;
	margin: 0 0 15px;
}

#members .member-bio {
	color: var(--text-gray);
	line-height: 1.8;
	font-size: 1rem;
	margin: 0;
}

/* 버튼 */
#members .btn {
	display: inline-block;
	padding: 15px 35px;
	border-radius: 30px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: var(--transition);
}

#members .btn-primary {
	background: var(--accent-color);
	color: var(--text-light);
}

#members .btn-primary:hover {
	background: #b89850;
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(201, 169, 97, 0.4);
}

/* 파트별 단원 (members.js가 .parts 안에 동적 생성)
   파트는 PC 한 줄에 3개(1024px 이하 2개, 768px 이하 1개), 파트 안의 단원은 한 줄에 2명 */
#members .parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1024px) {
	#members .parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

#members .part-section {
	background: var(--text-light);
	padding: 24px 20px;
	border-radius: 10px;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

#members .part-title {
	font-size: 1.3rem;
	color: var(--primary-color);
	margin: 0 0 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid var(--accent-color);
}

#members .members-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

#members .member-item {
	padding: 12px;
	background: var(--bg-light);
	border-radius: 8px;
	transition: var(--transition);
}

#members .member-item:hover {
	background: var(--accent-color);
	color: var(--text-light);
}

#members .member-main-line {
	display: flex;
	flex-direction: column; /* 한 줄에 여러 명이라 이름 아래에 학과·학번 */
	align-items: flex-start;
	gap: 4px;
}

#members .member-name-line {
	font-weight: 500;
	font-size: 1rem;
	flex: 1;
}

#members .member-info-line {
	font-size: 0.85rem;
	color: var(--text-gray);
	word-break: keep-all; /* 학과·학번이 글자 중간에서 끊기지 않게 */
}

#members .member-item:hover .member-info-line {
	color: var(--text-light);
}

#members .member-instrument {
	font-size: 0.85rem;
	color: var(--text-gray);
	margin-top: 4px;
}

#members .member-item:hover .member-instrument {
	color: var(--text-light);
	opacity: 0.9;
}

/* 태블릿/모바일 */
@media (max-width: 768px) {
	#members .leadership {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	#members .member-card.featured,
	#members .member-card.featured.reverse {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}

	#members .member-image {
		width: 180px;
		height: 220px;
		margin: 0 auto;
	}

	#members .member-card.featured .member-image,
	#members .member-card.featured.reverse .member-image {
		margin: 20px auto 0;
	}

	#members .member-info {
		padding: 20px;
	}

	#members .member-info h3 {
		font-size: 1.5rem;
	}

	#members .member-role {
		align-self: center;
	}

	#members .member-card.featured .member-detail {
		font-size: 0.9rem;
	}

	#members .parts {
		grid-template-columns: 1fr;
	}

	#members .member-info-line {
		font-size: 0.8rem;
	}

	#members .part-section {
		padding: 24px 18px;
	}

}

@media (max-width: 480px) {
	#members {
		padding: 36px 0; /* 원래 60px */
	}

	#members .section-title {
		font-size: 1.8rem;
	}

	#members .btn {
		padding: 12px 30px;
	}
}


/* ===================================
   메인 페이지 Contact 섹션 전용 스타일
   - 페이지 관리 도구로 넣은 <section class="section" id="contact"> 안에서만 적용
   - etc_pages/css/style.css에서 section/contact/map 규칙만 옮겨옴
   =================================== */

#contact {
	--primary-color: #1a2332;
	--accent-color: #c9a961;
	--text-dark: #2c3e50;
	--text-light: #ffffff;
	--text-gray: #7f8c8d;
	--bg-light: #f8f9fa;
	--transition: all 0.3s ease;

	position: relative;
	padding: 48px 0; /* 섹션 위아래 여백 (원래 80px) */
}

#contact *,
#contact *::before,
#contact *::after {
	box-sizing: border-box;
}

/* xedition의 .container { min-width: 1240px; background: #fff; } 무효화 */
#contact .container {
	min-width: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: transparent;
}

/* 연락처 + 지도 2단 */
#contact .contact-content {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 60px;
}

#contact .contact-info h3 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color);
	margin: 0 0 30px;
}

#contact .info-item {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

#contact .info-icon {
	font-size: 2rem;
	min-width: 50px;
	line-height: 1.2;
}

#contact .info-text h4 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0 0 8px;
}

#contact .info-text p {
	color: var(--text-gray);
	line-height: 1.8;
	margin: 0;
	word-break: break-all;
}

/* 연락처 링크 (이메일·홈페이지·유튜브): about 페이지 이메일 링크와 같은 금색 */
#contact .info-text a {
	color: var(--accent-color);
	text-decoration: none;
	transition: var(--transition);
}

#contact .info-text a:hover {
	color: #b89850;
	text-decoration: underline;
}

/* SNS 링크 (style.css에 있던 .social-links 영역용) */
#contact .social-links {
	margin-top: 40px;
}

#contact .social-links h4 {
	font-size: 1.1rem;
	color: var(--primary-color);
	margin: 0 0 15px;
}

#contact .social-icons {
	display: flex;
	gap: 15px;
}

#contact .social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--text-light);
	transition: var(--transition);
}

#contact .social-link:hover {
	background: var(--accent-color);
	transform: translateY(-5px);
}

#contact .social-link[href*="youtube"] {
	background: #ff0000;
	box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
}

#contact .social-link[href*="youtube"]:hover {
	background: #cc0000;
	box-shadow: 0 4px 12px rgba(255, 0, 0, 0.5);
}

/* 지도 */
#contact .map-container {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

#contact .map-container iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: 10px;
}

/* 태블릿/모바일 */
@media (max-width: 768px) {
	#contact .contact-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	#contact .map-container iframe {
		height: 250px;
	}
}

@media (max-width: 480px) {
	#contact {
		padding: 36px 0; /* 원래 60px */
	}
}


/* ===================================
   xedition: 사이드바(LNB) 메뉴가 없는 서브 페이지는 본문을 메인 페이지와 같은 전체 폭으로
   - sidebar_position 기본값(right) 때문에 LNB가 없어도 .content가 900px로 고정되는 문제 보정
   - 게시판, iframe으로 넣은 etc_pages 단독 페이지(members.html, about.html 등) 모두 해당
   =================================== */
.body.fixed-width.left:not(:has(> .lnb)) > .content,
.body.fixed-width.right:not(:has(> .lnb)) > .content {
	float: none;
	width: auto;
}


/* ===================================
   xedition: 모바일(폭 479px 이하)에서도 하단 메뉴(사이트맵) 보이기
   - 레이아웃 layout.css가 이 폭에서 .f_info2 / .site_map 을 숨기므로 여기서 다시 표시
   - 좁은 화면에 맞게 1단계 메뉴를 2열로 배치, 2단계 메뉴는 그 아래 작게
   =================================== */
@media all and (max-width: 479px) {
	.footer .f_info2,
	.footer .site_map {
		display: block;
	}
	.footer .f_info2 {
		margin: 0;
		padding: 16px 15px 4px;
	}
	.footer .site_map > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 16px;
		margin: 0;
		padding: 0;
		background: none;
		list-style: none;
	}
	.footer .site_map > ul li,
	.footer .site_map > ul li:first-child,
	.footer .site_map > ul li.clear {
		float: none;
		clear: none;
		width: auto;
		margin: 0;
	}
	.footer .site_map > ul li a {
		margin: 0 0 6px;
		padding: 0;
		font-size: 15px;
		font-weight: 600;
	}
	.footer .site_map > ul ul {
		margin: 0 0 10px;
		padding: 0;
		list-style: none;
	}
	.footer .site_map > ul ul a {
		margin: 0 0 4px;
		font-size: 13px;
		font-weight: normal;
		line-height: 18px;
	}
}


/* ===================================
   메인 화면 버튼 크기 통일
   - 기준: 갤러리 위젯(etc_pages/gallery)의 '전체 갤러리 보기' 버튼 (Pretendard 16px)
   - 레이아웃 기본 글자 크기(12px)를 물려받아 버튼이 작아 보이던 것을 보정
   - 라이믹스 기본 XE 버튼 스타일(common/css/rhymix.scss의 .btn)이 높이 24px·여백·테두리·글자 그림자를
     !important로 강제하므로, 여기서 !important로 되돌림
   - 휴대폰(480px 이하)에서는 여백 12px 30px (갤러리 버튼도 같게 맞춤)
   =================================== */
.visual .hero-buttons .btn,
#about .btn,
#concerts .btn,
#repertoire .btn,
#members .btn {
	height: auto !important;
	padding: 15px 35px !important;
	border: 0;
	border-radius: 30px;
	box-shadow: none;
	text-shadow: none;
	background-image: none;
	filter: none;
	vertical-align: middle;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 16px;
	line-height: normal !important;
}
/* 테두리 있는 버튼: 위의 border: 0 에 덮이지 않게 다시 지정, 테두리 두께(2px)만큼 여백을 줄여 크기를 맞춤 */
.visual .hero-buttons .btn-secondary,
#concerts .btn-outline {
	padding: 13px 33px !important;
}
.visual .hero-buttons .btn-secondary {
	border: 2px solid var(--hero-light);
}
#concerts .btn-outline {
	border: 2px solid var(--concerts-accent);
}
@media (max-width: 480px) {
	.visual .hero-buttons .btn,
	#about .btn,
	#concerts .btn,
	#repertoire .btn,
	#members .btn {
		padding: 12px 30px !important;
	}
	.visual .hero-buttons .btn-secondary,
	#concerts .btn-outline {
		padding: 10px 28px !important;
	}
}


/* ===================================
   xedition: 상단 로고 글자(숭만오동)가 태블릿에서 두 줄로 나뉘지 않게
   - 로고 h1은 float 이라 메뉴에 밀려 폭이 좁아지면 한글 글자 사이에서 줄바꿈됨
   =================================== */
.header > h1.logo-item {
	white-space: nowrap;
}


/* ===================================
   본문 표 테두리
   - 에디터로 만든 표 중 border 속성이 없는 표(개인정보처리방침 등)는 테두리가 안 보여서 기본 테두리를 줌
   - 글쓴이가 border 속성을 직접 지정한 표는 건드리지 않음
   =================================== */
.xe_content table:not([border]) {
	border-collapse: collapse;
	width: 100%;
	margin: 12px 0;
}
.xe_content table:not([border]) th,
.xe_content table:not([border]) td {
	border: 1px solid #d5d9e0;
	padding: 8px 10px;
	vertical-align: top;
	text-align: left;
}
.xe_content table:not([border]) th {
	background: #f4f6f9;
	font-weight: 600;
}
.xe_content table:not([border]) th p,
.xe_content table:not([border]) td p {
	margin: 0;
}

/* 모바일: 표가 화면보다 넓으면 표 안에서 가로 스크롤 */
@media (max-width: 640px) {
	.xe_content table:not([border]) {
		display: block;
		overflow-x: auto;
	}
}


/* ===================================
   약관·개인정보처리방침 페이지 (문서형 디자인)
   - 이용약관(mid: terms) = .document_439_5, 개인정보처리방침(mid: privacy) = .document_436_5
     (페이지 문서 번호가 바뀌면 아래 선택자의 숫자도 바꿔야 함)
   - 읽기 편한 폭, 넉넉한 줄 간격, 조항 제목 강조, 번호 목록 표시
   =================================== */
.document_439_5,
.document_436_5 {
	--legal-primary: #1a2332;
	--legal-accent: #c9a961;
	--legal-text: #3d4756;
	--legal-line: #e3e6eb;
	max-width: 880px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--legal-text);
	word-break: keep-all;
}
.document_439_5 p,
.document_436_5 p {
	margin: 0 0 10px;
}
/* 조항 제목 (약관은 h3, 개인정보처리방침은 h2) */
.document_439_5 h2,
.document_439_5 h3,
.document_436_5 h2,
.document_436_5 h3 {
	margin: 40px 0 14px;
	padding: 0 0 10px 14px;
	border-bottom: 1px solid var(--legal-line);
	position: relative;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--legal-primary);
}
.document_439_5 h2::before,
.document_439_5 h3::before,
.document_436_5 h2::before,
.document_436_5 h3::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--legal-accent);
}
/* 에디터에서 간격용으로 넣은 빈 제목(<h2>&nbsp;</h2>) 숨김
   - 개인정보처리방침: 실제 조항 제목에는 id가 붙어 있고 빈 제목에는 없음
   - 이용약관: 조항 제목은 h3이고 h2는 맨 위의 빈 줄뿐 */
.document_436_5 > h2:not([id]),
.document_439_5 > h2 {
	display: none;
}
/* 번호·글머리 목록 (레이아웃이 list-style을 없애 두어서 다시 켬) */
.document_439_5 ol,
.document_436_5 ol {
	list-style: decimal;
	margin: 0 0 12px;
	padding-left: 24px;
}
.document_439_5 ul,
.document_436_5 ul {
	list-style: disc;
	margin: 6px 0 12px;
	padding-left: 22px;
}
.document_439_5 li,
.document_436_5 li {
	margin: 0 0 6px;
	padding-left: 4px;
}
.document_439_5 li::marker,
.document_436_5 li::marker {
	color: var(--legal-accent);
	font-weight: 600;
}
.document_439_5 li > ul,
.document_436_5 li > ul {
	margin-top: 6px;
}
.document_439_5 a,
.document_436_5 a {
	color: #2b5fb4;
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* 표: 위의 '본문 표 테두리' 규칙 위에 색만 맞춤 */
.document_436_5 table:not([border]) th,
.document_439_5 table:not([border]) th {
	background: #f5f2ea;
	color: var(--legal-primary);
}
.document_436_5 table:not([border]),
.document_439_5 table:not([border]) {
	font-size: 14px;
	margin: 14px 0 18px;
}

@media (max-width: 640px) {
	/* 모바일에서 좌우 여백 (제목 h1도 같이 들어가도록 감싸는 .content에 줌, 약관·개인정보 페이지에만) */
	#content:has(> .document_439_5),
	#content:has(> .document_436_5) {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.document_439_5,
	.document_436_5 {
		font-size: 14px;
	}
	.document_439_5 h2,
	.document_439_5 h3,
	.document_436_5 h2,
	.document_436_5 h3 {
		margin-top: 32px;
		font-size: 16px;
	}
	.document_439_5 h2::before,
	.document_439_5 h3::before,
	.document_436_5 h2::before,
	.document_436_5 h3::before {
		height: 16px;
	}
	/* 표 첫 칸(구분)이 좁아서 "회원가/입"처럼 단어 중간에서 끊기지 않게 */
	.document_436_5 table:not([border]) tr > :first-child,
	.document_439_5 table:not([border]) tr > :first-child {
		min-width: 5em;
	}
}


/* ===================================
   푸터: 이용약관 | 개인정보처리방침 (레이아웃 설정의 '푸터 문구' = .sub_desc)
   - xedition은 모바일(479px 이하)에서 .sub_desc를 숨겨서 다시 보이게 함
   - 개인정보처리방침 링크는 법령 권고대로 눈에 띄게 굵게 표시
   =================================== */
.footer .sub_desc a {
	color: #666;
	text-decoration: none;
}
.footer .sub_desc a:hover,
.footer .sub_desc a:focus {
	color: #cda25a;
	text-decoration: underline;
}
.footer .sub_desc a[href*="privacy"] {
	font-weight: 700;
	color: #444;
}
@media all and (max-width: 479px) {
	.footer .sub_desc {
		display: block;
		margin: 0;
		padding: 0 15px 10px;
		font-size: 12px;
	}
}