@charset "utf-8";

/*
	** MAIN CSS
*/



.main-wrapper {
	position: relative;
	overflow: hidden auto;
	/* 섹션 순서를 CSS order 로 바꿀 수 있게 flex 컨테이너로 둔다.
	   섹션은 전부 폭 100% 블록이라 세로 배치 결과는 기존과 같고,
	   팝업(.main-popup/.pop-up)은 position:absolute 라 흐름 밖이라 영향받지 않는다.
	   이 한 줄 덕분에 관리자의 "순서" 값이 JSP 분기 없이 실제로 반영된다. */
	display: flex;
	flex-direction: column;
}
.main-section {
	padding: var(--section-pad, 90px) 0;
}

/* ── 섹션 배경(bg_type) ──────────────────────────────────────────────
   'none' 은 현행 상태라 규칙이 없다 — 기본이 곧 none 이다. */
.main-section[data-bg="surface"] {
	background: var(--c-surface, #f5f7ef);
}
.main-section[data-bg="dark"] {
	background: var(--c-dark, #382f2d);
	color: #fff;
}
.main-section[data-bg="dark"] .main-section-title,
.main-section[data-bg="dark"] .main-sub-title,
.main-section[data-bg="dark"] .main-section-body {
	color: #fff;
}
/* 이미지 배경. 실제 URL 은 인라인 style 의 --section-bg-image 로 온다(규칙 주입이 아니다).
   변수가 비면 background-image 가 무효가 되어 배경이 없는 것과 같아진다 — 안전한 기본이다. */
.main-section[data-bg="image"] {
	background-image: var(--section-bg-image);
	background-size: cover;
	background-position: center;
	position: relative;
}
/* 사진 위 글씨 가독성. 히어로와 같은 방식이다. */
.main-section[data-bg="image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}
.main-section[data-bg="image"] > .container {
	position: relative;
	z-index: 1;
	color: #fff;
}
.main-section[data-bg="image"] .main-section-title,
.main-section[data-bg="image"] .main-sub-title,
.main-section[data-bg="image"] .main-section-body {
	color: #fff;
}

/* ── 섹션 레이아웃(layout_variant) ───────────────────────────────────
   layout_variant 가 비면 프론트가 테마의 card_columns_variant 를 내보내므로
   data-layout 에는 항상 "{n}col" 또는 "slide" 가 들어온다(정수가 아니다). */
.main-section[data-layout="2col"] .main-card-list > li { width: 50%; }
.main-section[data-layout="3col"] .main-card-list > li { width: 33.333%; }
.main-section[data-layout="4col"] .main-card-list > li { width: 25%; }

/* 슬라이드 — swiper 를 새로 붙이지 않고 가로 스크롤로 처리한다.
   JS 를 늘리지 않으려는 선택이고, 터치 기기에서는 스와이프가 그대로 된다. */
.main-section[data-layout="slide"] .main-card-list {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.main-section[data-layout="slide"] .main-card-list > li {
	flex: 0 0 auto;
	width: 300px;
	scroll-snap-align: start;
}

/* 섹션 본문 문구 */
.main-section-body {
	margin-top: 14px;
	font-size: 1.02em;
	line-height: 1.7;
	color: var(--c-text, #494949);
}
.main-section-title {
	font-size: 3em;
	font-weight: 600;
}
.main-sub-title {
	font-size: var(--font-size-28);
}
.main-bg {
	background: var(--c-surface, #f5f7ef);
}
.main-more {
	position: absolute;
	top: 0;
	right: 0;
}
.main-more::after {
	content: "\2b";
	font-weight: 900;
	font-family: "Font Awesome 6 Pro";
	font-size: var(--font-size-22);
}
@media all and (max-width: 1023px) {
	.main-section-title {
		font-size: 2.75em;
	}
	.main-sub-title {
		font-size: var(--font-size-24);
	}
}
@media all and (max-width: 767px) {
	.main-section {
		padding: 60px 0;
	}
	.main-section-title {
		font-size: 2em;
	}
	.main-sub-title {
		font-size: var(--font-size-22);
	}
	.main-more::after {
		font-size: var(--font-size-20);
	}
}



.main-visual {
	position: relative;
}
.main-visual-slide {
	max-width: 90%;
	height: calc(100vh - 158px);
	position: relative;
}
.main-visual-slide .text-box {
	position: absolute;
	z-index: 5;
	top: 20%;
    width: 100%;
	text-align: center;
	color: #fff;
}
.main-visual-slide .text-box .title {
	font-size: 3.25em;
	font-weight: 600;
	font-family: 'S-CoreDream';
	word-break: keep-all;
}
.main-visual-slide .text-box .desc {
	font-size: 2.25em;
	margin-bottom: 10px;
	font-family: 'S-CoreDream';
}
.main-visual-slide .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-visual-slide .slide-control {
	position: absolute;
	z-index: 5;
	top: 48%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: #fff;
}
.main-visual-slide .swiper-pagination {
	position: unset;
	width: auto;
	text-align: left;
}
.main-visual-slide .swiper-pagination-bullet {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	background: none;
	opacity: 0.5;
}
.main-visual-slide .swiper-pagination-bullet-active {
	opacity: 1;
}
.main-visual-slide .swiper-pagination-num {
	margin-right: 15px;
}
.main-visual-slide .swiper-progress-bar {
	position: relative;
	display: none;
	width: 180px;
	height: 1px;
	margin-right: 15px;
	background: rgba(225,225,225,0.5);
}
.main-visual-slide .swiper-progress-bar::after {
	content: "";
	position: absolute;
	background: #fff;
	width: 100%;
	height: 100%;
}
.main-visual-slide .swiper-pagination-bullet-active .swiper-progress-bar {
	display: block;
}
.main-visual-slide .swiper-pagination-bullet-active .swiper-progress-bar::after {
	transition-delay: unset;
	animation: 5s progress linear;
}
@keyframes progress {
    0% {width: 0%;}
    100% {width: 100%;}
}
.main-visual-slide .swiper-pause .swiper-progress-bar::after {
	animation-play-state: paused;
}
.main-visual-slide :is(.swiper-button-play, .swiper-button-pause) {
	display: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	color: #fff;
	font-size: var(--font-size-15);
}
.main-visual-slide :is(.swiper-button-play, .swiper-button-pause).active {
	display: inline-flex;
}
.main-visual-slide .swiper-button-play::after,
.main-visual-slide .swiper-button-pause::after {
	display: inline-flex;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
}
.main-visual-slide .swiper-button-play::after {
	content:"\f04b";
}
.main-visual-slide .swiper-button-pause::after {
	content:"\f04c";
}
@media all and (max-width: 1023px) {
	.main-visual-slide {
		height: calc(100vh - 132px);
	}
	.main-visual-slide .text-box .title {
		font-size: 2.75em;
	}
	.main-visual-slide .text-box .desc {
		font-size: var(--font-size-26);
	}
}
@media all and (max-width: 767px) {
	.main-visual-slide {
		height: 550px;
	}
	.main-visual-slide .text-box {
		padding: 0 10px;
	}
	.main-visual-slide .text-box .title {
		font-size: 2em;
	}
	.main-visual-slide .text-box .desc {
		font-size: var(--font-size-20);
	}
	.main-visual-slide .swiper-progress-bar {
		width: 80px;
	}
	.main-visual-slide .slide-control {
		top: 42%;
		padding: 0 10px;
	}
	.main-visual-slide .swiper-pagination-num {
		margin-right: 10px;
	}
}


.scroll-down {
	position: absolute;
	bottom: 60px;
	width: 5%;
	display: flex;
	align-items: center;
	color: var(--primary-color);
	writing-mode: vertical-lr;
	white-space: nowrap;
	animation: scrollDown 1s ease-in-out 0.5s infinite alternate both;
}
@keyframes scrollDown {
	0% {transform:translateY(0);}
	100% {transform:translateY(10px);}
}
.scroll-down::before {
	content: "";
	display: block;
	width: 1px;
	height: 85px;
	margin-bottom: 20px;
	background: var(--primary-color);
}
@media all and (max-width: 1023px) {
	.scroll-down {
		display: none;
	}
}


.main-visual .sns-list {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.main-visual .sns-list .lnk {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: var(--c-border, #d7d7d7);
	font-size: var(--font-size-22);
}
.main-visual .sns-list .blog img {
	width: 26px;
}
@media all and (max-width: 1023px) {
	.main-visual .sns-list .lnk {
		font-size: var(--font-size-20);
	}
	.main-visual .sns-list .blog img {
		width: 24px;
	}
}
@media all and (max-width: 767px) {
	.main-visual .sns-list {
		position: initial;
		transform: none;
		flex-direction: row;
		width: auto;
		margin-top: 20px;
	}
}


.main-guide .list-box {
	display: flex;
	align-items: center;
	gap: 0 3%;
	margin-top: 200px;
	position: relative;
}
.main-guide .list-box::after {
	content: "";
	position: absolute;
	bottom: 100%;
	right: 0;
	width: 200px;
	height: 200px;
	margin-bottom: 15px;
	background: url("../img/layout/logo-square.png") no-repeat center / cover;
}
.main-guide .list-box li {
	flex: 0 0 31.33%;
}
.main-guide .list-box li:nth-child(1) {
	transform: translateY(-65px);
}
.main-guide .list-box li:nth-child(2) {
	transform: translateY(-140px);
}
.main-guide .list-box .img-box {
	border: 2px solid transparent;
	transition: var(--transition);
}
.main-guide .list-box .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-guide .list-box .text {
	margin-top: 25px;
	font-weight: 600;
	font-size: var(--font-size-26);
	transition: var(--transition);
}
.main-guide .list-box a:hover .img-box {
	transform: translateY(-2px);
	border-color: var(--primary-color);
	box-shadow: 9px 9px 15px rgba(0,0,0,0.25);
}
.main-guide .list-box a:hover .text {
	color: var(--primary-color);
}
@media all and (max-width: 1023px) {
	.main-guide .list-box {
		margin-top: 100px;
	}
	.main-guide .list-box::after {
		width: 120px;
		height: 120px;
	}
	.main-guide .list-box li:nth-child(1) {
		transform: translateY(-30px);
	}
	.main-guide .list-box li:nth-child(2) {
		transform: translateY(-80px);
	}
	.main-guide .list-box .text {
		font-size: var(--font-size-22);
	}
}
@media all and (max-width: 767px) {
	.main-guide .list-box {
		margin-top: 0;
		flex-wrap: wrap;
		gap: 10px;
	}
	.main-guide .list-box::after {
		margin-bottom: 0;
		bottom: 10px;
		right: 10px;
	}
	.main-guide .list-box li {
		position: relative;
		flex: 0 0 48%;
		transform: translateY(0) !important;
	}
	.main-guide .list-box .img-box {
		height: 200px;
		position: relative;
	}
	.main-guide .list-box .img-box::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 60%);
	}
	.main-guide .list-box .text {
		margin-top: 0;
		position: absolute;
		bottom: 15px;
		left: 12px;
		font-size: var(--font-size-18);
		color: #fff !important;
	}
	.main-guide .list-box li:hover .img-box {
		box-shadow: 3px 3px 10px rgba(0,0,0,0.25);
	}
}


.main-way {
	background: url("../img/main/way-bg.jpg") no-repeat center;
	background-attachment: fixed;
	text-align: center;
	color: #fff;
}
.main-way .list-box {
	margin-top: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 60px;
}
.main-way .list-box li {
	flex: 0 0 230px;
	height: 230px;
	border-radius: 50%;
	font-size: var(--font-size-22);
	overflow: hidden;
}
.main-way .list-box a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px 0;
	width: 100%;
	height: 100%;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	transition: var(--transition);
}
.main-way .list-box a:hover {
	background: var(--c-primary-a80, rgb(12,90,73,0.8));
}
.main-way .list-box a::before {
	content: "";
	display: block;
	width: 70px;
	height: 70px;
}
.main-way .list-box li:nth-child(1) a::before {background: url("../img/main/way-img01.png") no-repeat center / cover;}
.main-way .list-box li:nth-child(2) a::before {background: url("../img/main/way-img02.png") no-repeat center / cover;}
.main-way .list-box li:nth-child(3) a::before {background: url("../img/main/way-img03.png") no-repeat center / cover;}
@media all and (max-width: 1023px) {
	.main-way .list-box {
		margin-top: 60px;
		gap: 0 40px;
	}
	.main-way .list-box li {
		flex: 0 0 200px;
		height: 200px;
		font-size: var(--font-size-20);
	}
	.main-way .list-box a::before {
		width: 60px;
		height: 60px;
	}
}
@media all and (max-width: 767px) {
	.main-way {
		background-attachment: initial;
	}
	.main-way .list-box {
		margin-top: 50px;
		gap: 0 10px;
		width: 100%;
	}
	.main-way .list-box li {
		flex: 0 0 30%;
		height: auto;
		font-size: var(--font-size-16);
		border-radius: var(--radius-card, 15px);
	}
	.main-way .list-box a {
		gap: 15px 0;
		padding: 20px 0;
	}
	.main-way .list-box a::before {
		width: 40px;
		height: 40px;
	}
}


.main-board .main-sub-title {
	padding-right: 50px;
	margin-bottom: 40px;
	word-break: keep-all;
}
@media all and (max-width: 767px) {
	.main-board .main-sub-title {
		margin-bottom: 30px;
	}
}

.main-news {
	position: relative;
}
.main-news .list-box {
	display: flex;
	gap: 20px 3%;
}
.main-news .list-box li {
	flex: 0 0 calc(25% - 2.3%);
}
.main-news .list-box a {
	display: block;
	padding: 40px 35px;
	border: 1px solid var(--c-secondary, #d4d8c9);
	border-radius: 8px;
	transition: var(--transition);
}
.main-news .list-box .title {
	font-size: var(--font-size-22);
	font-weight: 600;
	margin-bottom: 25px;
	min-height: 58px;
	transition: var(--transition);
}
.main-news .list-box .desc {
	line-height: 1.5;
	color: var(--c-text, #494949);
	min-height: 72px;
}
.main-news .list-box .date {
	margin-top: 30px;
	font-size: var(--font-size-14);
	color: var(--c-text, #494949);
}
.main-news .list-box a:hover {
	border-color: var(--primary-color);
}
.main-news .list-box a:hover .title {
	color: var(--primary-color);
}
.main-wrapper .board-empty {
	padding-top:40px;
	padding-bottom: 40px;
}
.main-wrapper .board-empty::before {
	background: var(--c-bg, #fbfcf8);
}
@media all and (max-width: 1023px) {
	.main-news .list-box {
		flex-wrap: wrap;
	}
	.main-news .list-box li {
		flex: 0 0 48.5%;
	}
	.main-news .list-box a {
		padding: 30px;
	}
}
@media all and (max-width: 767px) {
	.main-news .list-box {
		gap: 15px 0;
	}
	.main-news .list-box li {
		flex: 0 0 100%;
	}
	.main-news .list-box a {
		padding: 20px 18px;
	}
	.main-news .list-box .title {
		font-size: var(--font-size-18);
		margin-bottom: 10px;
		min-height: auto;
	}
	.main-news .list-box .desc {
		font-size: var(--font-size-15);
		min-height: auto;
	}
	.main-news .list-box .date {
		margin-top: 10px;
	}
}


.main-gallery {
	position: relative;
	margin-top: 100px;
	overflow: hidden;
}
.main-gallery .list-box {
	display: flex;
	gap: 0 35px;
}
.main-gallery .list-box li {
	flex: 0 0 calc(33.3333% - 23px);
}
.main-gallery .list-box .img-box {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.main-gallery .list-box .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
}
.main-gallery .list-box .text-box {
	margin-top: 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 20px;
}
.main-gallery .list-box .text-box .title {
	font-size: var(--font-size-20);
	font-weight: 600;
	transition: var(--transition);
}
.main-gallery .list-box .text-box .date {
	font-size: var(--font-size-14);
	color: var(--c-text, #494949);
}
.main-gallery .list-box a:hover img {
	transform: scale(1.1);
}
.main-gallery .list-box a:hover .title {
	color: var(--primary-color);
}
@media all and (max-width: 1023px) {
	.main-gallery .list-box {
		overflow: auto hidden;
	}
	.main-gallery .list-box li {
		flex: 0 0 400px;
	}
}
@media all and (max-width: 767px) {
	.main-gallery {
		margin-top: 60px;
	}
	.main-gallery .list-box {
		gap: 0 20px;
	}
	.main-gallery .list-box li {
		flex: 0 0 300px;
	}
	.main-gallery .list-box .text-box {
		margin-top: 15px;
	}
	.main-gallery .list-box .text-box .title {
		font-size: var(--font-size-18);
	}
}


.main-popup {
	position: absolute;
	right:calc(var(--popup-width) * -1);
	top:200px;
	z-index: 50;
	display: flex;
	--popup-width: 389px;
	transition: 0.3s ease-in-out;
}
.main-popup.active {
	right:0;
}
.main-popup .btn-item {
	display: flex;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	width: 40px;
	background: var(--c-text-strong, #3c3c3c);
	color: #fff;
	border-radius: 0;
}
.main-popup .btn-item.close {
	display: none;
}
.main-popup.active .btn-item.close {
	display: flex;
}
.main-popup.active .btn-item.open {
	display: none;
}
.main-popup .btn-item .text {
	align-self: center;
	padding:15px 0;
	letter-spacing: 1px;
	font-size: var(--font-size-15);
}
.main-popup .btn-item .checkbox-label {
	gap:5px;
}
.main-popup .checkbox-text {
	margin:0;
}
.main-popup .btn-item .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex:0 0 40px;
	width: 100%;
	height: 40px;
	background:#000;
	color: #fff;
	border-radius: 0;
	font-size: var(--font-size-18);
}
.main-popup-slide {
	width: var(--popup-width);
	position: relative;
}
.main-popup-slide .swiper-control {
	position: absolute;
	right:20px;
	top:15px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 5;
	gap:0 10px;
}
.main-popup-slide .swiper-pagination {
	position: relative;
	bottom: auto;
	left: auto;
	top:auto;
	display: flex;
	align-items: center;
}
.main-popup-slide .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 0;
	border:1px solid #fff;
	background: none;
	opacity: 1;
	vertical-align: top;
}
.main-popup-slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background:#fff;
}
.main-popup-slide .swiper-control .btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 10px;
	font-size: var(--font-size-14);
	color: #fff;
	line-height: 1;
}
.main-popup-slide .swiper-control .btn.active {
	display: flex;
}
@media all and (max-width: 767px) {
	.main-popup {
		--popup-width: 280px;
	}
	.main-popup .btn-item {
		width: 35px;
	}
	.main-popup .btn-item .text {
		font-size: var(--font-size-14);
		padding:10px 0;
	}
	.main-popup .btn-item .btn {
		flex:0 0 35px;
		height: 35px;
	}
}


.main-menu {
	position: absolute;
	z-index: 5;
	top: 60%;
	left: 0;
	right: 0;
	max-width: 660px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	gap: 0 4%;
}
.main-menu .menu-btn {
	position: relative;
	flex: 1 1 0;
	padding: 30px 0;
	text-align: center;
	border-radius: 20px;
	background: rgba(255,255,255,0.8);
	box-shadow: 3px 0 8px rgba(0,0,0,0.08);
	transition: var(--transition);
}
.main-menu .menu-btn .desc {
	align-content: center;
	min-height: 48px;
	margin-top: 15px;
	font-weight: 600;
	line-height: 1.2;
	font-size: var(--font-size-20);
	transition: var(--transition);
}
.main-menu .menu-btn:hover {
	background: rgba(255,255,255,0.9);
}
.main-menu .menu-btn:hover .img {
	animation: menuImg 0.9s both;
}
.main-menu .menu-btn:hover .desc {
	color: var(--primary-color);
}
@keyframes menuImg {
	15% {transform: rotateZ(5deg);}
	30% {transform: rotateZ(-5deg);}
	45% {transform: rotateZ(2deg);}
	60% {transform: rotateZ(-2deg);}
	75% {transform: rotateZ(1deg);}
}
@media all and (max-width: 1023px) {
	.main-menu .menu-btn .img {
		width: 50px;
		margin: 0 auto;
	}
	.main-menu .menu-btn .desc {
		font-size: var(--font-size-18);
	}
}
@media all and (max-width: 767px) {
	.main-menu .menu-btn {
		padding: 18px 0;
	}
	.main-menu .menu-btn .img {
		width: 38px;
	}
	.main-menu .menu-btn .desc {
		min-height: 39px;
		margin-top: 10px;
		font-size: var(--font-size-16);
	}
}

:has(.main-wrapper) .quick-menu {
	display: none;
}
/* ── 신설 섹션 (2026-07-27 테마 시스템) ─────────────────────────────
   색·모서리는 전부 토큰을 쓴다. 폴백은 TYPE A(현재 화면)의 값이라
   테마가 없는 경로에서도 기존 톤과 어긋나지 않는다. */
.main-facility .container,
.main-program .container { padding-top: 80px; padding-bottom: 80px; }

.main-card-list { display: flex; flex-wrap: wrap; margin: 30px -12px 0; }
.main-card-list > li { width: calc(100% / var(--card-cols, 3)); padding: 0 12px; margin-bottom: 24px; }
.main-card-list > li > a { display: block; height: 100%;
	border: 1px solid var(--c-border, #d7d7d7);
	border-radius: var(--radius-card, 15px);
	overflow: hidden; background: #fff;
	transition: box-shadow .25s, transform .25s; }
.main-card-list > li > a:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.main-card-list .img-box { width: 100%; padding-top: 66%; position: relative; overflow: hidden; }
.main-card-list .img-box img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.main-card-list .text { padding: 18px 20px 22px; }
.main-card-list .card-title { display: block; font-family: var(--font-title, 'S-CoreDream');
	font-size: 1.15em; color: var(--c-text-strong, #3c3c3c); }
.main-card-list .card-meta { display: block; margin-top: 6px; font-size: .92em; color: var(--c-text, #494949); }

/* 히어로 오버레이 — 사진·영상 위 글씨 가독성. 모든 hero_variant 에 공통으로 적용된다.
   기본 0 이면 rgba(0,0,0,0) 이라 아무것도 안 보인다(규칙은 있지만 무해하다). */
.main-visual-slide .swiper-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, var(--hero-overlay, 0));
	pointer-events: none;
}
.main-visual-slide .text-box {
	z-index: 2;   /* 오버레이보다 앞 */
}

/* ── 히어로 형태(hero_variant) ───────────────────────────────────────────
   관리자가 site_theme.hero_variant 에서 고른 값이 <html data-hero> 로 내려온다.
   'slider' 는 사이트의 원래 모습이므로 규칙을 두지 않는다 — 기본이 곧 slider 다.

   ★ 이 규칙들은 테마 전용 파일이 아니라 공용에 있어야 한다. 전에 EDITORIAL_B.css 가
     정적 히어로를 하드코딩해 둬서, 다른 테마가 'static' 을 골라도 안 바뀌고
     EDITORIAL_B 는 'slider' 를 골라도 정지해 있었다(둘 다 관리자에게 거짓말). */

/* 단일 대형 이미지 — 슬라이드가 여러 장 등록돼 있어도 첫 장만 크게 보인다.
   swiper 는 .swiper-wrapper 에 인라인 transform 을 쓰므로 여기서만 !important 를 쓴다.
   JS 는 계속 돌지만 화면은 정지한 한 장으로 보인다(마크업을 분기하지 않는 방법). */
[data-hero="static"] .main-visual-slide .swiper-wrapper {
	transform: none !important;
	display: block;
}
[data-hero="static"] .main-visual-slide .swiper-slide:not(:first-child) {
	display: none;
}
[data-hero="static"] .main-visual .swiper-control,
[data-hero="static"] .main-visual .slide-control {
	display: none;
}

/* 영상 히어로 — 영상은 이미지와 같은 크기 규칙을 받아야 한다.
   이 규칙은 hero_variant 와 무관하게 필요하다: 영상 파일이 올라오면 어느 형태에서든 나온다. */
.main-visual-slide .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 영상 + 큰 제목 — 영상 위 글씨는 배경이 계속 움직여 읽기 어렵다.
   그래서 제목을 키우고 오버레이를 진하게 깐다. 이 둘은 같이 가야 뜻이 산다. */
[data-hero="video-bold"] .main-visual-slide .text-box .title {
	font-size: 3.4em;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
[data-hero="video-bold"] .main-visual-slide .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* 영상은 배경이 계속 움직여 단색 막보다 아래로 짙어지는 그라디언트가 낫다.
	   테마가 hero_overlay 를 정하면 그 값을, 안 정하면 0.45 를 쓴다. */
	background: linear-gradient(180deg,
			rgba(0,0,0,calc(var(--hero-overlay, 0.45) * 0.33)) 0%,
			rgba(0,0,0,var(--hero-overlay, 0.45)) 100%);
	pointer-events: none;
}
[data-hero="video-bold"] .main-visual-slide .text-box {
	z-index: 2;   /* 위 오버레이보다 앞에 와야 글씨가 안 묻힌다 */
}

@media all and (max-width: 767px) {
	[data-hero="video-bold"] .main-visual-slide .text-box .title { font-size: 1.9em; }
}

/* 낮은 히어로 + 빠른예약 바 — 예약이 목적인 사이트용.
   히어로를 화면 절반으로 낮추고, 모바일에만 있던 빠른예약 바를 데스크톱에서도
   히어로 바로 아래에 흐름 안에 놓는다(모바일의 하단 고정 동작은 그대로 둔다).

   ★ 이 값은 원래 'compact-search'(낮은 히어로 + 검색)였다. 그런데 메인에는 날짜·인원
     검색 폼이 없고 새로 만드는 것은 예약 흐름과 물리는 별개 기능이다. 그래서 이미 있는
     빠른예약 바를 쓰는 것으로 재정의했다. DB 값은 마이그레이션을 피하려고 그대로 뒀다. */
[data-hero="compact-search"] .main-visual-slide {
	height: 52vh;
	min-height: 360px;
}
[data-hero="compact-search"] .main-reserve-bar {
	display: flex;
	position: static;
	max-width: 90%;
	margin: 0 auto;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
[data-hero="compact-search"] .main-reserve-bar .rb-btn {
	flex: 1;
	padding: 18px 0;
	text-align: center;
	font-size: 1.05em;
	color: #fff;
}
[data-hero="compact-search"] .main-reserve-bar .rb-primary { background: var(--c-primary, #0c5a49); }
[data-hero="compact-search"] .main-reserve-bar .rb-secondary { background: var(--c-text-strong, #3c3c3c); }

/* 모바일에서는 원래대로 하단 고정이다 — 위 규칙이 그것을 흐름 안으로 끌어내리면 안 된다.
   720px 미디어쿼리가 main.css 뒤쪽에 있어 그대로 이기지만, position 은 명시해 둔다. */
@media (max-width: 720px) {
	[data-hero="compact-search"] .main-reserve-bar {
		position: fixed;
		max-width: none;
		margin: 0;
	}
}

/* 모션 강도가 '없음'이면 카드 반응을 끈다(테마가 정하는 상한).
   OS 의 prefers-reduced-motion 은 아래에서 따로 존중한다. */
[data-motion="none"] .main-card-list > li > a { transition: none; }
[data-motion="none"] .main-card-list > li > a:hover { transform: none; box-shadow: none; }

/* 모션 강도가 '적극'이면 카드 반응을 키운다.
   'subtle'(기본)은 규칙이 없다 — 사이트의 원래 반응이 곧 subtle 이다.
   OS 의 prefers-reduced-motion 은 파일 끝에서 이 값과 무관하게 모든 것을 끈다. */
[data-motion="active"] .main-card-list > li > a {
	transition: transform .35s ease, box-shadow .35s ease;
}
[data-motion="active"] .main-card-list > li > a:hover {
	transform: translateY(-8px);
	box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}
[data-motion="active"] .main-guide .img-box img {
	transition: transform .5s ease;
}
[data-motion="active"] .main-guide li:hover .img-box img,
[data-motion="active"] .main-gallery li:hover .img-box img {
	transform: scale(1.06);
}

/* 모바일 하단 고정 예약바 — 데스크톱에서는 숨긴다 */
.main-reserve-bar { display: none; }

@media (max-width: 1024px) {
	/* 데스크톱 열 수 설정과 무관하게 화면 폭이 좁으면 줄인다 — 이용자 화면이 이긴다. */
	.main-card-list > li,
	.main-section[data-layout="3col"] .main-card-list > li,
	.main-section[data-layout="4col"] .main-card-list > li { width: 50%; }
}
@media (max-width: 720px) {
	.main-card-list > li,
	.main-section[data-layout="2col"] .main-card-list > li,
	.main-section[data-layout="3col"] .main-card-list > li,
	.main-section[data-layout="4col"] .main-card-list > li { width: 100%; }
	.main-facility .container,
	.main-program .container { padding-top: 50px; padding-bottom: 50px; }

	.main-reserve-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.12); }
	.main-reserve-bar .rb-btn { flex: 1; padding: 15px 0; text-align: center; font-size: 1.02em; color: #fff; }
	.main-reserve-bar .rb-primary { background: var(--c-primary, #0c5a49); }
	.main-reserve-bar .rb-secondary { background: var(--c-text-strong, #3c3c3c); }
	/* 고정 바가 푸터 마지막 줄을 가리지 않게 여백을 준다 */
	.main-wrapper { padding-bottom: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.main-card-list > li > a { transition: none; }
	.main-card-list > li > a:hover { transform: none; }
	/* motion_level='active' 도 여기서 함께 끈다 — 테마 설정보다 이용자 설정이 이긴다. */
	[data-motion="active"] .main-card-list > li > a { transition: none; }
	[data-motion="active"] .main-card-list > li > a:hover { transform: none; box-shadow: none; }
	[data-motion="active"] .main-guide .img-box img { transition: none; }
	[data-motion="active"] .main-guide li:hover .img-box img,
	[data-motion="active"] .main-gallery li:hover .img-box img { transform: none; }
}