@charset "UTF-8";

/* =====================================================
   외암민속마을 메인 페이지 (mainCon.css)
   - 일반 CSS  →  반응형 미디어쿼리(데스크톱→모바일) 순서
   ===================================================== */


/* =====================================================
   1. RESET & BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
	font-size: 62.5%;        /* 1rem = 10px (브라우저 기본 16px 기준) — 사용자 폰트 설정 존중 */
	scroll-behavior: smooth;
	overflow-x: hidden;      /* 가로 오버플로 차단 */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0; line-height: 140%;
	font-size: 1.6rem;
	font-family: 'Noto Sans KR','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif;
	overflow-x: hidden;      /* 가로 오버플로 차단 (세로는 기본 스크롤만) */
	-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; border: 0; user-select: none; -webkit-user-select: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; margin: 0; }
*:focus { outline: none; }
fieldset { margin: 0; border: 0; }
legend, caption { display: none; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
a { color: #666; text-decoration: none; }


/* =====================================================
   2. LAYOUT HELPERS
   ===================================================== */
.inner1, .inner3 {
	margin: 0 auto; position: relative;
	overflow: hidden;
}
.inner1 { max-width: 177rem; }
.inner3 { max-width: 142rem; }
/* overNon = overflow 해제 (sticky 헤더가 동작하도록) */
.inner3.overNon { overflow: visible; }

/* ===== 로그인(100-로그인) — SNS 로그인 박스 ===== */
.snsLogin {
	background-color: #f1f1f1;
	padding: 4rem;
	margin: 8rem auto;
	max-width: 44rem;
	border-radius: 1.5rem;
}
.snsLogin h4.tit.bar {
	margin: 0 0 2rem;
	padding-bottom: 1.2rem;
	font-size: 2rem;
	font-weight: 700;
	color: #224e42;
	border-bottom: 2px solid #224e42;
}
.snsLogin hr {
	border: none;
	border-top: 1px solid #d6d3ca;
	margin: 1.4rem 0;
}
.snsLogin a {
	display: block;
	position: relative;
	padding: 1.4rem 1.5rem 1.4rem 9rem;
	margin-bottom: 0.8rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: #fff;
	background-position: 2rem center;
	background-repeat: no-repeat;
	background-size: 2.6rem;
	border-radius: 0.4rem;
	text-decoration: none;
	transition: opacity 0.15s;
}
.snsLogin a:hover { opacity: 0.9; }
.snsLogin a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 6.5rem;
	width: 1px;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.25);
}
.snsLogin .naver {
	background-color: #2db400;
	background-image: url(../../main/images/sns_logo_03.png);
}
.snsLogin .kakao {
	background-color: #ffca00;
	color: #391e1f;
	background-image: url(../../main/images/sns_logo_04.png);
	background-size: 3.2rem;
}
.snsLogin .kakao::before { background-color: rgba(0, 0, 0, 0.12); }
.snsLogin .facebook {
	background-color: #3b5998;
	background-image: url(../../main/images/sns_logo_02.png);
	background-size: 1.7rem;
	background-position: 2.4rem center;
}
.snsLogin .google {
	background-color: #db4437;
	background-image: url(../../main/images/sns_logo_01.png);
	background-size: 3.2rem;
	margin-bottom: 2rem;
}
.snsLogin > p,
.snsLogin .txtCenter {
	margin-top: 1rem;
	font-size: 1.4rem;
	color: #666;
	text-align: center;
}
@media (max-width: 767px) {
	.snsLogin {
		padding: 2.4rem;
		margin: 4rem 1.2rem;
		max-width: none;
	}
	.snsLogin h4.tit.bar { font-size: 1.7rem; }
	.snsLogin a {
		padding: 1.2rem 1rem 1.2rem 7rem;
		font-size: 1.4rem;
		background-position: 1.6rem center;
		background-size: 2.2rem;
	}
	.snsLogin a::before { left: 5.4rem; }
}
.flex { display: flex; flex-wrap: wrap; justify-content: space-between; }
.blind { display: none; }
.txtCenter { text-align: center; }
.clearfix::after { content: ""; display: table; clear: both; }


/* =====================================================
   3. TYPOGRAPHY
   ===================================================== */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #333; }
body h1 { font-size: 4.8rem; letter-spacing: -0.3rem; }
body h2 { font-size: 3.8rem; letter-spacing: -0.2rem; }
body h3 { font-size: 3.2rem; letter-spacing: -0.1rem; }
body h4 { font-size: 2.7rem; letter-spacing: -0.1rem; }
body h5 { font-size: 2.4rem; letter-spacing: -0.1rem; }
body h6 { font-size: 2.2rem; font-weight: 500; line-height: 150%; letter-spacing: -0.1rem; }
body p, body li, body dt, body a { font-size: 1.7rem; font-weight: 500; }
.redTxt   { color: #dd3c10 !important; }
.brownTxt { color: #846335 !important; }


/* =====================================================
   4. HEADER
   - position: relative → 문서 흐름 안 → 스크롤 시 절대 고정되지 않음
   - margin-bottom: -17.1rem → 다음 요소(슬라이드)를 끌어올려 시각적 오버레이
   ===================================================== */
#header {
	position: relative;
	width: 100%; height: 17.1rem;
	margin-bottom: -17.1rem;            /* 슬라이드와 시각적으로 겹치게 */
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.4);  /* 반투명 — 슬라이드가 비쳐 보임 */
}

/* TopMenu */
#topMenu {
	padding: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
#topMenu .slogan {
	display: block; width: 16rem; height: 6.4rem;
	background: url(../../main/images/100tjs_logo.png) center/100% no-repeat;
}
#topMenu .logo {
	position: absolute; display: block;
	left: 50%; top: 0.4rem;
	transform: translateX(-50%);
}
#topMenu .item { display: flex; flex-wrap: wrap; }
#topMenu .item li { display: inline-block; height: 6.4rem; }
#topMenu .item li:nth-child(5) { display: none; }
#topMenu .item li a {
	position: relative; display: block;
	width: 100%;
	padding: 0 1.2rem;
	font-size: 1.5rem; line-height: 6.4rem;
	font-weight: normal; color: #fff;
	text-align: center;
}
#topMenu .item li a::before {
	content: ""; display: block;
	position: absolute; left: -0.1rem; top: 3rem;
	width: 0.3rem; height: 0.3rem;
	background-color: #fff; border-radius: 50%;
}
#topMenu .item li:first-child a::before,
#topMenu .item li .snsIcon::before { display: none; }
#topMenu .item li .snsIcon {
	width: 5.4rem; height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.7rem;
}
#topMenu .item li .snsIcon.three { background-image: url(../../main/images/sns_icon_03.png); margin-left: 2rem; }
#topMenu .item li .snsIcon.four  { background-image: url(../../main/images/sns_icon_04.png); }
#topMenu .item li .snsIcon:hover { opacity: 0.8; }

/* nav_open (mobile burger) — 스프라이트 원본 유지, button만 터치 영역 확대 */
#topMenu .nav_open {
	display: none;
	position: absolute; top: 50%; left: 2rem;
	width: 3rem; height: 1.8rem; z-index: 110;
	background: url(../../main/images/header_m_sprite.png) no-repeat 0 -5px;
	transform: translateY(-50%);
	overflow: visible;        /* 내부 button이 영역 밖으로 확장 가능하게 */
	cursor: pointer;
}
#topMenu .nav_open .nav_button {
	display: block;
	position: absolute;
	top: -1.3rem; left: -0.7rem;  /* 3×1.8rem → 4.4×4.4rem 터치 영역 */
	width: 4.4rem; height: 4.4rem;
	color: transparent;
	background: transparent; border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* lnb_active state */
.lnb_active #header { background-color: rgba(67, 87, 146, 1); }
.lnb_active #lnb .nav .depth1_item .depth1_text::before { background-color: rgba(255, 255, 255, 0.5); }


/* =====================================================
   5. MAIN SLIDE
   ===================================================== */
.mainSlide { position: relative; overflow: hidden; }
.mainSlide .swiper-slide {
	position: relative;
	width: 100%; height: 76.5rem;
	overflow: hidden;
}
.mainSlide .swiper-slide .tit {
	position: absolute; display: block;
	top: 50%; left: 50%; z-index: 11;
	transform: translate(-50%, -50%);
}
.mainSlide .swiper-slide .tit img { display: block; margin: 0 auto; }
.mainSlide .swiper-slide .img {
	position: relative; width: 100%; height: 100%;
	overflow: hidden;
}
.mainSlide .swiper-slide .img img {
	position: absolute;
	top: 50%; left: 50%; z-index: 10;
	width: 100%; height: 100%;
	min-width: 100%; min-height: 100%;
	object-fit: cover; object-position: center;
	transform: translate(-50%, -50%);
}
.mainSlide .slideCon .swiper-button-next,
.mainSlide .slideCon .swiper-button-prev {
	position: absolute; top: 50%;
	width: 2.3rem; height: 4.3rem; margin-top: 0;
	z-index: 10; cursor: pointer;
	color: #fff;
	background-position: center; background-repeat: no-repeat;
	transform: translateY(-50%);
}
.mainSlide .slideCon .swiper-button-next { right: 10rem; background-image: url(../../main/images/white_next_icon.png); }
.mainSlide .slideCon .swiper-button-prev { left: 10rem; background-image: url(../../main/images/white_pre_icon.png); }
.mainSlide .slideCon .swiper-button-next::after,
.mainSlide .slideCon .swiper-button-prev::after { display: none; }
.mainSlide .slideCon .bnt {
	position: absolute; left: 50%; bottom: 7rem; z-index: 21;
	height: 2rem;
	text-align: center;
	transform: translateX(-50%);
}
.mainSlide .slideCon .bnt #stopButton,
.mainSlide .slideCon .bnt #startButton {
	position: relative; display: inline-block;
	width: 2rem; height: 2rem; z-index: 10; cursor: pointer;
	color: #fff;
	background-position: center; background-repeat: no-repeat;
}
.mainSlide .slideCon .bnt #stopButton  { background-image: url(../../main/images/white_stop_icon.png); }
.mainSlide .slideCon .bnt #startButton { background-image: url(../../main/images/white_start_icon.png); }
.mainSlide .slideCon .swiper-pagination {
	position: relative; display: inline-block;
	width: auto; vertical-align: -0.2rem;
}
.mainSlide .slideCon .swiper-pagination .swiper-pagination-bullet,
.eventSlide .slideCon .swiper-pagination .swiper-pagination-bullet {
	width: 1rem; height: 1rem; border-radius: 0.5rem;
	background-color: rgba(255, 255, 255, 1); opacity: 1; cursor: pointer;
}
.mainSlide .slideCon .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.eventSlide .slideCon .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 4rem;
}


/* =====================================================
   6. MAIN SEARCH
   ===================================================== */
#mainSearch .inner3 {
	position: relative; margin-top: -6rem; z-index: 21;
	border-radius: 1.5rem;
	background: #fff url(../../main/images/bg_header.png) repeat;
	background-size: calc(100% / 5);
}
#mainSearch form { display: flex; flex-wrap: wrap; }
#mainSearch .searchDiv {
	width: calc(100% / 5);
	display: flex; justify-content: center; align-items: center;
}
#mainSearch .padding { padding: 2rem 2.5rem; width: 100%; }
#mainSearch .padding h5,
#mainSearch .padding p.redTxt { padding-left: 2rem; }
#mainSearch .padding h5 { line-height: 140%; }
#mainSearch .padding .tit { display: block; font-size: 1.4rem; color: #999; }

/* Kendo widget 공통 */
#mainSearch .padding .k-combobox,
#mainSearch .padding .k-datepicker {
	display: flex; align-items: center;
	width: 100%; height: 4.2rem;
	background: transparent;
}
.k-combobox .k-clear-value { display: none !important; }
#mainSearch .padding .k-dropdown-wrap,
#mainSearch .padding .k-picker-wrap {
	display: flex; align-items: center;
	position: relative;
	width: 100%; height: 4.2rem;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}
#mainSearch .padding .k-select {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    font-size: 0;
    color: transparent;
    border: 0 !important;
    padding: 0 !important;
    background: transparent center / 1rem auto no-repeat !important;
    background-image: url(../../main/images/black_arrow_down_icon.png) !important;
    transform: translateY(-50%);
}
#mainSearch .padding .k-datepicker .k-select {
	background-image: url(../../main/images/datePicker_icon.png) !important;
	background-size: 2rem auto !important;
}
#mainSearch .padding .k-select .k-icon { display: none !important; }
#mainSearch .padding .k-input {
	width: 100%; height: 4.2rem; line-height: 4.2rem;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1.9rem; font-weight: 700;
	letter-spacing: -0.1rem; color: #101010;
	cursor: pointer;
	margin: 0 !important;
	padding: 0.5rem 4rem 0.5rem 0 !important;
	border: 0 !important; outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
#mainSearch .padding .k-combobox:hover,
#mainSearch .padding .k-datepicker:hover,
#mainSearch .padding .k-state-focused {
	border: 0; outline: 0; box-shadow: none;
}

/* 예약 버튼 */
#mainSearch .searchDiv .brown.bnt {
	display: block;
	width: 100%; height: 100%; min-height: 8.6rem;
	padding: 2rem 6rem 2rem 3rem;
	font-size: 2.2rem; line-height: 4.6rem; font-weight: 700;
	text-align: left; color: #fff;
	background: #af8d5d url(../../main/images/arrow_icon.png) right 2rem center/3rem auto no-repeat;
	border: 0; border-radius: 0 1.5rem 1.5rem 0;
	transition: background-color 0.3s ease;
}
#mainSearch .searchDiv .brown.bnt:hover { background-color: #435792; }
#mainSearch .searchDiv input::placeholder { color: #999; font-weight: normal; }


/* =====================================================
   7. TEL PHONE
   ===================================================== */
#telPhone {
	position: relative;
	margin-top: -6rem;
	padding: 9rem 0 6rem 0;
	background-color: #f0ece1;
}
#telPhone .inner3 {
	position: relative;
	background-color: #af8d5d;
	border-radius: 2rem;
	overflow: visible;
}
#telPhone .inner3::before {
	content: ""; display: block;
	position: absolute; top: 0; left: 0; z-index: 1;
	width: calc((100% / 6) + 3rem);
	border-bottom: 12rem solid #d9211d;
	border-right: 6rem solid transparent;
	border-top-left-radius: 2rem;
}
#telPhone .inner3 .telWrap { padding: 2rem 4rem; }
#telPhone .inner3 .telWrap .item {
	position: relative;
	width: calc(100% / 6);
}
#telPhone .inner3 .telWrap .item:nth-child(n+3)::before {
	content: ""; display: block;
	position: absolute; left: 0; top: 0;
	width: 1px; height: 100%;
	background-color: rgba(255, 255, 255, 0.3);
}
#telPhone .inner3 .telWrap .item h3 {
	position: relative; z-index: 10;
	margin-top: 2rem;
	color: #fff; text-align: center;
}
#telPhone .inner3 .telWrap .item span {
	display: block;
	color: #fff; line-height: 150%; text-align: center;
}
#telPhone .inner3 .telWrap .item span.tit    { font-size: 1.7rem; }
#telPhone .inner3 .telWrap .item span.con    { font-size: 1.4rem; }
#telPhone .inner3 .telWrap .item span.telTxt { font-size: 2.2rem; font-weight: 700; }


/* =====================================================
   8. EVENT
   ===================================================== */
#event {
	position: relative;
	padding: 0 0 6rem 0;
	background-color: #f0ece1;
}
#event .inner3 { overflow: visible; }  /* 페이지네이션 클리핑 방지 */
#event h3 { margin-bottom: 4rem; }
.eventSlide { position: relative; }
/* 타이틀 영역으로 이동된 페이지네이션 (JS로 #event .inner3 직속 자식으로 이동됨) */
#event .inner3 > .swiper-pagination {
	position: absolute;
	top: 1.5rem;
	right: 0;
	left: auto;
	z-index: 10;
	width: 20rem; height: 2rem;
	text-align: right;
}
#event .inner3 > .swiper-pagination .swiper-pagination-bullet {
	width: 1rem; height: 1rem;
	margin: 0 0.5rem 0 0;
	border-radius: 0.5rem;
	background-color: #999;
	opacity: 1; cursor: pointer;
	display: inline-block;
}
#event .inner3 > .swiper-pagination .swiper-pagination-bullet-active {
	width: 4rem;
	background-color: #af8d5d;
}
.eventSlide .swiper-slide {
	width: calc((100% / 4) - 3rem);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
.eventSlide .swiper-slide:hover { transform: translateY(-0.8rem); }
.eventSlide .item dd {
	position: relative;
	margin-bottom: 2rem;
	border-radius: 0.8rem 0.8rem 0 0;
	overflow: hidden;
}
.eventSlide .item dd .img img { display: block; width: 100%; }
.eventSlide .item dd .type {
	position: absolute; left: 0; top: 0;
	width: 6rem; height: 3.8rem;
	font-size: 1.5rem; line-height: 3.8rem;
	color: #fff; text-align: center;
	background-color: #00aa3c;
}
.eventSlide .item dd .type.two   { background-color: #16763f; }
.eventSlide .item dd .type.three { background-color: #435792; }
.eventSlide .item dd .type.four  { background-color: #d9211d; }
.eventSlide .item dt a {
	display: inline-block; width: 100%;
	margin-bottom: 0.5rem;
	font-size: 2.1rem; letter-spacing: -0.1rem; color: #101010;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eventSlide .item dt a:hover { text-decoration: underline; }
.eventSlide .item dt .con {
	display: inline-block; width: 100%;
	font-size: 1.5rem; font-weight: normal; color: #787878;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* (구) .eventSlide .slideCon .swiper-pagination 규칙 제거됨
   — pagination은 JS로 #event .inner3 > .swiper-pagination 위치로 이동되었음 */

.eventSlide .slideCon .swiper-pagination .swiper-pagination-bullet { background-color: #999; }
.eventSlide .swiper-button-next,
.eventSlide .swiper-button-prev { display: none; }


/* =====================================================
   9. NEWS
   ===================================================== */
#news { padding: 10rem 0; }
#news .tit {
	padding-bottom: 4rem; margin-bottom: 4rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.95);
}
#news .more {
	display: block;
	width: 2.5rem; height: 2.5rem;
	margin-top: 0.3rem;
	border: 1px solid rgba(0, 0, 0, 0.5);
	background: url(../../main/images/black_more_icon.png) center no-repeat;
}
#news .notice { width: 41rem; }
#news .notice li { margin-bottom: 2.4rem; }
#news .notice li:last-child { margin-bottom: 0; }
#news .notice li a { display: flex; flex-wrap: wrap; }
#news .notice .type {
	display: block;
	width: 6rem; margin-right: 1rem;
	font-size: 1.7rem;
}
#news .notice .conT {
	display: inline-block;
	width: calc(100% - 17rem);
	font-size: 1.7rem; letter-spacing: -0.1rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#news .notice li .conT:hover { text-decoration: underline; }
#news .notice .date {
	display: block;
	width: 8rem; margin-left: 2rem;
	font-size: 1.4rem; font-weight: normal;
	color: #787878;
}
#news .festival { width: calc(100% - 47rem); }
#news .festival .item {
	display: flex; justify-content: center; align-items: center;
	width: calc((100% / 2) - 1.5rem);
	height: 24.2rem;
	padding: 4rem;
	color: #fff;
	background-color: #af8d5d;
	border-radius: 0.8rem;
	overflow: hidden;
	text-align: center;
}
#news .festival .item:first-child {
	background: #af8d5d url(../../main/images/festival_bg_img.png) center/100% no-repeat;
}
#news .festival .item:hover {
	background-color: #435792;
	transition: background-color 0.3s ease, color 0.3s ease;
}
#news .festival .item h2 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700; color: #fff;
}
#news .festival .item .whiteBg {
	display: block;
	width: 21rem;
	margin: 0 auto 2rem auto;
	font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;
	color: #101010; background-color: #fff;
	text-align: center;
}
#news .festival .item .con {
	display: block;
	font-size: 1.6rem; font-weight: normal;
}
#news .festival .item p {
	margin-bottom: 0.5rem;
	font-size: 1.8rem; letter-spacing: -0.1rem; color: #fff;
	word-break: keep-all;
}
#news .festival .item .ui.button.black.effect {
	position: relative; display: block;
	width: 19rem;
	margin: 2rem auto 0 auto;
	padding: 1.2rem 3rem;
	font-size: 1.6rem; color: #fff;
	background-color: #000;
	text-align: center;
	transition: all 0.2s linear 0s;
}
#news .festival .item .ui.button.black.effect::before {
	content: "\f178"; font-family: FontAwesome;
	display: flex; align-items: center; justify-content: center;
	position: absolute; right: 2rem; top: 0;
	width: 3rem; height: 100%;
	font-size: 15px; opacity: 0;
	transition: all 0.2s linear 0s;
}
#news .festival .item:hover .ui.button.black.effect {
	color: #101010; background-color: #fff;
	text-indent: -20px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
#news .festival .item:hover .ui.button.black.effect::before {
	color: #101010; opacity: 1; text-indent: 0;
}


/* =====================================================
   10. BANNER
   ===================================================== */
#banner {
	padding: 2.5rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
#banner .bannerWrap { position: relative; }
#banner .bannerWrap h6 {
	position: relative;
	width: 24rem; line-height: 2.9rem;
}
#banner .bannerWrap .slideCon {
	position: absolute; left: 10rem; top: 0.3rem;
	width: 6.7rem; height: 2.3rem;
	background-color: #fff;
}
#banner .bannerWrap .slideCon .swiper-button-prev {
	display: block; position: absolute;
	top: 0; left: 0; right: auto; margin: 0;
	width: 2.2rem; height: 2.3rem;
	border: 1px solid rgba(0, 0, 0, 0.15); border-right: none;
	background: url(../../main/images/black_pre_icon.png) center no-repeat;
}
#banner .bannerWrap .slideCon .swiper-button-next {
	display: block; position: absolute;
	top: 0; left: auto; right: 0; margin: 0;
	width: 2.2rem; height: 2.3rem;
	border: 1px solid rgba(0, 0, 0, 0.15); border-left: none;
	background: url(../../main/images/black_next_icon.png) center no-repeat;
}
#banner .bannerWrap .slideCon .swiper-button-next::after,
#banner .bannerWrap .slideCon .swiper-button-prev::after { display: none; }
#banner .bannerWrap .slideCon #startButton {
	display: block; position: absolute; top: 0; left: 2.3rem;
	width: 2.3rem; height: 2.3rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: url(../../main/images/black_start_icon.png) center no-repeat;
}
#banner .bannerWrap .slideCon #stopButton {
	display: block; position: absolute; top: 0; left: 2.3rem;
	width: 2.3rem; height: 2.3rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: url(../../main/images/black_stop_icon.png) center no-repeat;
}
#banner .bannerSlide {
	width: calc(100% - 24rem);
	overflow: hidden;
}
#banner .bannerSlide .swiper-slide { text-align: center; }
#banner .bannerSlide .swiper-slide a {
	display: block; position: relative;
	font-size: 1.8rem; line-height: 2.9rem; color: #101010;
}


/* =====================================================
   11. FOOTER
   ===================================================== */
footer {
	padding: 8rem 0;
	background-color: #393e51;
}
footer .inner3 {
	background: url(../../main/images/footer_logo.png) left top no-repeat;
	overflow: visible;
}
/* TOP 버튼 — 기본 숨김. .subPage 페이지에서 .show 클래스 있을 때만 표시 */
#topLink {
	display: none;
	position: fixed;
	right: 3rem; bottom: 3rem;
	z-index: 9999;
	width: 6rem; height: 6rem;
	font-size: 0; color: transparent;
	background: #af8d5d url(../../main/images/top_icon.png) center/2rem no-repeat;
	border: 0; border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	text-decoration: none;
}
.subPage #topLink.show { display: block; }
.subPage #topLink:hover { background-color: #8a6e3f; }

/* 모바일 ≤768px — TOP 버튼 완전 숨김 (JS 인라인 스타일도 차단) */
@media (max-width: 768px) {
	.subPage #topLink,
	.subPage #topLink.show {
		display: none !important;
		visibility: hidden !important;
	}
}
.footerMenu {
	padding: 0.5rem 0 0 18.5rem;
	margin-bottom: 4rem;
}
.footerMenu a {
	position: relative; display: inline-block;
	padding: 0 1.5rem;
	color: #fff; font-weight: normal;
}
.footerMenu a:link, .footerMenu a:visited, .footerMenu a:hover { color: #fff; }
.footerMenu a::before {
	content: ""; display: block;
	position: absolute; right: -0.3rem; top: 0.8rem;
	width: 0.3rem; height: 0.3rem;
	background-color: #fff; border-radius: 50%;
}
.footerMenu a:last-child::before { display: none; }
.footerMenu a:hover { text-decoration: underline; }
footer .info {
	padding-bottom: 4rem; margin-bottom: 4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
footer .info p { margin: 0; }
footer .info .infoP {
	position: relative; display: inline-block;
	padding-right: 1rem; margin-right: 1rem;
	font-size: 1.5rem; line-height: 2.7rem; font-weight: 300 !important;
	color: rgba(255, 255, 255, 0.75);
}
footer .info .infoP::before {
	content: ""; display: block;
	position: absolute; top: 0.4rem; right: -0.2rem;
	width: 1px; height: 2rem;
	background-color: rgba(255, 255, 255, 0.15);
}
footer .info .infoP:last-child { padding-right: 0; margin-right: 0; }
footer .info .infoP:last-child::before { display: none; }
footer .copy { position: relative; overflow: visible; }
footer .copy p {
	padding: 1rem 0;
	font-size: 1.5rem; line-height: 3rem; font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
}
footer .copy .item {
	position: absolute; top: 0; right: 0;
	width: 20rem; height: 4.6rem;
	text-align: right;
}
footer .copy .item li {
	display: inline-block;
	width: 4.6rem; height: 4.6rem;
	margin: 0 0.3rem;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
}
footer .copy .item .snsIcon {
	display: block; position: relative;
	width: 100%; height: 100%;
	background: url(../../main/images/sns_icon_01.png) center/60% no-repeat;
}
footer .copy .item .snsIcon.three { background-image: url(../../main/images/sns_icon_05.png); }
footer .copy .item .snsIcon.four  { background-image: url(../../main/images/sns_icon_06.png); }


/* =====================================================
   12. SUB PAGE COMMON
   - .subPage 본문 (서브 타이틀 / 인사말 등 컨텐츠 / 영상 모달)
   ===================================================== */

/* ----- Web fonts (원본 동일) ----- */
@font-face {
	font-family: 'EBSJSKMedium';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSJSKMedium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'iceSotong-Rg';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/iceSotong-Rg.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.Myeongjo    { font-family: 'Noto Serif KR', serif; }
.iceSotong   { font-family: 'iceSotong-Rg', sans-serif; }
.ceoName     { font-family: 'EBSJSKMedium', 'Noto Serif KR', serif; }

/* 서브페이지에서는 헤더가 슬라이드 오버레이가 아닌 단독 색상 */
.subPage #header {
	position: relative;
	margin-bottom: 0;
	background-color: #444242;
}

/* 공통 텍스트 정렬 보조 */
.txtRight { text-align: right; }
.txtLeft  { text-align: left; }
.lightBrownTxt { color: #af8d5d !important; }
.blueTxt { color: #435792 !important; }
.greenTxt { color: #167a68 !important; }
.brownBg {
	background-color: #f0ece1;
	padding: 8rem 0;
}

/* ----- subTit (브레드크럼 + 페이지 타이틀) ----- */
#subTit { padding: 2.5rem 0 0 0; }
#subTit .breadcrumb { margin-bottom: 5rem; }
#subTit .breadcrumb .section {
	font-size: 1.5rem; font-weight: normal;
	color: #787878;
}
#subTit .breadcrumb .Home.section {
	display: inline-block;
	width: 1.4rem; height: 1.4rem;
	background: url(../../main/images/home.gif) center/100% no-repeat;
}
#subTit .breadcrumb .active.section {
	font-size: 1.5rem; font-weight: 500;
	color: #101010;
}
#subTit .breadcrumb .divider {
	display: inline-block;
	width: 1.4rem; height: 1.4rem;
	background: url(../../main/images/divider.gif) center no-repeat;
}
#subTit h1 {
	margin-bottom: 6rem;
	font-weight: 500;
}

/* ----- subBody 공통 ----- */
#subBody p {
	line-height: 160%; color: #787878;
	word-break: keep-all;
}
#subBody .subBg + .inner2,
#subBody .brownBg .inner2.txtCenter { padding: 0 0 6rem 0; }

/* 인사말 상단 인삿말 박스 (배경 이미지) */
#subBody .subBg {
	padding-top: 33.5rem;
	background: url(../../main/images/sub_img_01.jpg) top center no-repeat;
}
#subBody .subBg .greeting {
	display: block;
	width: 80rem;
	max-width: 92%;
	margin: 0 auto 8rem auto;
	padding: 5rem 4rem;
	border-radius: 1.2rem;
	background-color: rgba(175, 141, 93, 0.9);
	text-align: center;
}
#subBody .subBg .greeting h4 {
	position: relative;
	margin-bottom: 4rem; padding-bottom: 4rem;
	font-weight: 500; color: #fff;
}
#subBody .subBg .greeting h4::before {
	content: ""; display: block;
	position: absolute; left: 50%; bottom: 0;
	width: 4.6rem; height: 0.3rem;
	background-color: #fff;
	transform: translateX(-50%);
}
#subBody .subBg .greeting p {
	font-weight: normal; color: #fff;
}

/* 2단 컬럼 (인사말 본문) */
#subBody .flex.two {
	position: relative;
}
#subBody .flex.two::before {
	content: ""; display: block;
	position: absolute; left: 50%; top: 0;
	width: 1px; height: 100%;
	background-color: rgba(0, 0, 0, 0.15);
}
#subBody .flex.two .item {
	width: calc((100% / 2) - 6rem);
}
#subBody .flex .item p {
	margin-bottom: 4rem;
}
#subBody .flex .item h5 {
	margin-bottom: 4rem;
	line-height: 140%; font-weight: 500;
}
#subBody .flex .ceoName {
	display: inline-block;
	margin-left: 1rem;
	font-family: 'EBSJSKMedium', 'Noto Serif KR', serif;
	font-size: 3.6rem;
	letter-spacing: 1rem;
}

/* 영상 썸네일 + 플레이 버튼 */
.movieWrap {
	display: block; position: relative;
	margin-bottom: 4rem;
	border-radius: 1.2rem; overflow: hidden;
}
.movieWrap img { width: 100%; }
.movieWrap .btn {
	display: block; position: absolute;
	left: 50%; top: 50%;
	width: 5.4rem; height: 5.4rem;
	background: url(../../main/images/movie_icon.png) center no-repeat;
	transform: translate(-50%, -50%);
}

/* 영상 모달 (Semantic UI Modal 기본 + 보강) */
.modal.movie_wnd .header {
	font-size: 2rem; font-weight: 700;
	padding: 1.5rem 2rem;
}
.modal.movie_wnd .content { padding: 1.5rem; }
.modal.movie_wnd iframe {
	display: block; width: 100%;
	max-height: 60vh;
	border: 0;
}
.modal.movie_wnd .actions { padding: 1rem 1.5rem; text-align: right; }
.modal.movie_wnd .ui.cancel.button.black {
	padding: 1rem 2rem;
	background-color: #101010; color: #fff;
	border-radius: 0.4rem; cursor: pointer;
}


/* ----- inner2 / inner4 (서브 페이지 폭) ----- */
.inner2 {
	margin: 0 auto; position: relative;
	max-width: 128rem;
}

/* ----- 마을유래 / 컨텐츠 박스 (brwonBg / whBg) ----- */
.brwonBg {
	padding: 10rem 0;
	background-color: #f0ece1;
}
.whBg {
	padding: 10rem 0;
	background-color: #fff;
}
.brwonBg .inner2 .flex,
.whBg .inner2 .flex {
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: flex-start;
	gap: 4rem;
}
.conWrap {
	width: calc(100% - 64rem);
}
.tit.bar {
	position: relative;
	padding-bottom: 2.5rem; margin-bottom: 4rem;
	font-weight: 600 !important;
}
.tit.bar::before {
	content: ""; display: block;
	position: absolute; left: 0; bottom: 0;
	width: 4.5rem; height: 0.3rem;
	background-color: #333;
}
.conWrap p { margin-bottom: 4rem; }
.conWrap p:last-child { margin-bottom: 0; }

.imgWrap {
	width: calc(100% - 68rem);
	border-radius: 1.2rem;
	overflow: hidden;
}
.imageBox {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.imageBox img {
	display: block; width: 100%;
	opacity: 1;
	backface-visibility: hidden;
	transition: 0.3s ease;
}
.imageBox .image-link .middle {
	display: block;
	position: absolute; top: 50%; left: 50%;
	z-index: 10;
	width: 6.5rem; height: 6.5rem;
	background-color: #4CAF50;
	border-radius: 50%;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: 0.5s ease;
}
.imageBox .middle i {
	margin: 0;
	font-size: 3rem; line-height: 6.5rem;
	color: #fff;
}
.imageBox a.image-link:hover .middle { opacity: 1; }
.imageBox a.image-link:hover img { opacity: 0.4; }
.imgWrap .imageBox { margin-bottom: 1rem; }
.imgWrap .imageBox:last-child { margin-bottom: 0; }
.imgWrap .imageBox a.image-link img {
	transform: scale(1);
	transition: all 0.3s ease-in-out;
}
.imgWrap .imageBox a.image-link:hover img { transform: scale(1.05); }


/* ----- 마을변천사 / 페이지 상단 배경이미지 + 타이틀 ----- */
.bgImg {
	position: relative; overflow: hidden;
	height: 55.6rem;
	margin-bottom: 8rem;
	text-align: center;
}
.bgImg img {
	position: absolute; top: 50%; left: 50%;
	z-index: 10;
	width: 100%; height: 100%;
	min-width: 100%; min-height: 100%;
	object-fit: cover; object-position: center;
	transform: translate(-50%, -50%);
}
.pageTit {
	margin-bottom: 8rem;
	text-align: center;
}
.pageTit .underBar {
	position: relative;
	padding-bottom: 2rem; margin-bottom: 2rem;
}
.pageTit .underBar::before {
	content: ""; display: block;
	position: absolute; left: 50%; bottom: 0;
	width: 4.5rem; height: 0.3rem;
	background-color: #333;
	transform: translateX(-50%);
}
.flex .conWrap { width: calc((100%/2) - 4rem); }
.flex .conWrap h5 { margin-bottom: 1rem; }
.flex .conWrap p + h5,
.conWrap + .checkerBoard { margin-top: 8rem; }

/* ----- 사진 갤러리 (3등분 / 2:1 분할) ----- */
.checkerBoard {
	width: 100%;
	margin-bottom: 1rem;
}
#subBody .checkerBoard:last-child { margin-bottom: 8rem; }
#subBody .checkerBoard .imageBox { border-radius: 1.2rem; }
#subBody .checkerBoard .imageBox,
#subBody .checkerBoard .WideTwo {
	position: relative;
	width: calc((100% / 3) - 0.7rem);
	overflow: hidden;
}
#subBody .checkerBoard .WideOne {
	width: calc(100% - ((100% / 3) + 0.35rem));
}
#subBody .checkerBoard .WideTwo .imageBox,
#subBody .checkerBoard .WideOne .imageBox {
	width: 100%;
	margin-bottom: 1rem;
}
#subBody .checkerBoard .WideTwo .imageBox:last-child,
#subBody .checkerBoard .WideOne .imageBox:last-child { margin-bottom: 0; }


/* ----- 정월 대보름 맞이 행사 / 축제 정보 (festivalInfo) + 갤러리 (galleryWrap) ----- */
/* festivalInfo 부모 flex — 3열 균등 gap */
.bodyWrap .flex:has(> .festivalInfo) {
	display: flex; flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 6rem;
}
.bodyWrap .festivalInfo {
	width: calc((100% - 4rem) / 3);   /* 100% - (2 × 2rem gap) / 3 columns */
	margin: 0;
	border-radius: 1.2rem;
	overflow: hidden;                  /* dt 진녹색 헤더 / dd 회색 본문 둥근 모서리 잘림 */
}
.bodyWrap .festivalInfo dt {
	padding: 1.5rem;
	font-size: 1.7rem; color: #fff;
	text-align: center;
	background-color: #224e42;
}
.bodyWrap .festivalInfo dd {
	display: flex; align-items: center; justify-content: center;
	height: 9.2rem;
	padding: 2rem;
	font-size: 1.6rem; line-height: 160%;
	text-align: center;
	background: #f7f7f7;
}

/* ----- 점 리스트 (.dot) / 여백 유틸리티 (.margin_*) ----- */
ul.dot { margin: 0; padding: 0; list-style: none; }
ul.dot > li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.6rem;
	font-size: 1.6rem; line-height: 170%;
	color: #555;
}
ul.dot > li:before {
	content: "";
	position: absolute;
	left: 0.3rem; top: 1.2rem;
	width: 0.4rem; height: 0.4rem;
	border-radius: 50%;
	background-color: #666;
}
ul.dot > li:last-child { margin-bottom: 0; }
.bodyWrap .conWrap h5 + ul.dot { margin-top: 1rem; }

/* margin 유틸리티 — 하단 여백 */
body .margin_20 { margin-bottom: 2rem !important; }
body .margin_30 { margin-bottom: 3rem !important; }
body .margin_40 { margin-bottom: 4rem !important; }
body .margin_60 { margin-bottom: 6rem !important; }
body .margin_80 { margin-bottom: 8rem !important; }

/* 행사 갤러리 — 3열 그리드 (gap 기반 정확한 폭) */
#subBody .galleryWrap.flex {
	display: flex; flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 6rem;
}
#subBody .galleryWrap .imageBox,
.bodyWrap .galleryWrap .imageBox {
	width: calc((100% - 2rem) / 3) !important;   /* .bodyWrap .imageBox의 100% !important 오버라이드 */
	margin: 0;
	border-radius: 1.2rem;
	overflow: hidden;
}
#subBody .galleryWrap .imageBox img { width: 100%; display: block; }

/* galleryWrap 메이슨리 — 가로 컬럼폭 동일, 세로 원본 비율 (세로 간격 없이 채움) */
#subBody .conWrap + .galleryWrap.flex.autoH {
    margin-top: 4.8rem;
}

#subBody .galleryWrap.flex.autoH {
	display: block !important;
	column-count: 3;
	column-gap: 2.4rem;
}
#subBody .galleryWrap.flex.autoH .imageBox {
	width: 100% !important;
	margin: 0 0 2.4rem;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}


/* ----- 매체속 외암마을 / 영화·드라마 3열 카드 (Heritage) ----- */
.Heritage.flex {
	display: flex; flex-wrap: wrap;
	gap: 8rem 4.5rem;       /* 행 gap 8rem / 열 gap 4.5rem */
    padding-bottom: 8rem;
}
.Heritage .item {
	width: calc((100% - 9rem) / 3);     /* 3열 — 두 개의 4.5rem gap을 뺀 후 3등분 */
	margin: 0;
}
.Heritage .item dd {
	margin-bottom: 2rem;
	overflow: hidden;
}
.Heritage .item dd.nonDD {
    margin-bottom: 0;
}
.Heritage .item dd p {
    border-radius: 1.2rem;
    margin-bottom: 0 !important;
}
.Heritage .item dd .imageBox img {
	width: 100%;
	transition: transform 0.3s ease;
}
.Heritage .item:hover dd .imageBox img { transform: scale(1.05); }
.Heritage .item h5 {
	margin-bottom: 2rem !important;
	font-weight: 700;
}
.Heritage .item p {
	margin-bottom: 1.5rem !important;
	color: #555;
}
.Heritage .item ul.dot {
	margin: 0 0 2.4rem;
	padding: 0;
	list-style: none;
}
.Heritage .item ul.dot li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.4rem;
	font-size: 1.5rem; line-height: 160%;
	color: #555;
	word-break: break-all;
}
.Heritage .item ul.dot li:before {
	content: "";
	position: absolute;
	left: 0.3rem; top: 1rem;
	width: 0.4rem; height: 0.4rem;
	border-radius: 50%;
	background-color: #666;
}
.Heritage .item .link {
	display: inline-block;
	position: relative;
	font-size: 1.6rem;
	line-height: 2.6rem;
	color: #224e42;
	font-weight: 500;
	padding-right: 1.8rem;
	border-bottom: 2px solid #224e42;
	transition: color 0.25s, border-color 0.25s;
}
.Heritage .item .link:after {
	content: "→";
	position: absolute;
	right: 0; top: 0;
	transition: transform 0.25s;
}
.Heritage .item .link:hover {
	color: #c4302b;
	border-bottom-color: #c4302b;
}
.Heritage .item .link:hover:after {
	transform: translateX(0.3rem);
}


/* ----- 오시는길 / 지도 + 교통 정보 (blockWrap + trafficWrap) ----- */
.blockWrap { margin-bottom: 8rem; }
.blockWrap p { margin-bottom: 4rem; }

/* 지도 */
.blockWrap #map {
	width: 100%;
	margin-bottom: 4rem;
	border-radius: 1.2rem;
	overflow: hidden;
}
.blockWrap #map iframe {
	display: block;
	width: 100%;
	height: 48rem;
	border: 0;
}

/* 주소 / 전화 정보 — 2열 */
.blockWrap > .flex {
	display: flex; flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 4rem;
}
.blockWrap .mapInfo {
	display: flex; align-items: flex-start;
	gap: 2rem;
	width: calc((100% - 2rem) / 2);
	margin: 0;
	padding: 3rem;
	background-color: #f7f7f7;
	border-radius: 1.2rem;
}
.blockWrap .mapInfo dt {
	flex-shrink: 0;
	width: 7rem; height: 7rem;
	margin: 0;
	border-radius: 1rem;
	background-color: #224e42;
	display: flex; align-items: center; justify-content: center;
}
.blockWrap .mapInfo dt .icon {
	width: auto; height: auto;
	color: #fff;
	font-size: 3.2rem;
	margin: 0;
	line-height: 1;
}
.blockWrap .mapInfo dd {
	margin: 0;
	padding-top: 0.6rem;
}
.blockWrap .mapInfo dd p {
	margin: 0;
	font-size: 1.6rem; line-height: 175%;
	color: #333;
}

/* 교통수단 표 */
.blockWrap .trafficWrap {
	border-radius: 1.2rem 1.2rem 0 0;
	overflow: hidden;
}
.blockWrap .trafficWrap .item {
	display: flex; align-items: stretch;
	margin: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.blockWrap .trafficWrap .item.tit {
	background-color: #224e42;
}
.blockWrap .trafficWrap .item.tit dt,
.blockWrap .trafficWrap .item.tit dd {
	margin: 0;
	padding: 1.5rem 2rem;
	font-size: 1.7rem; color: #fff;
	text-align: center;
	background-color: #224e42;
	border: 0;
}
.blockWrap .trafficWrap .item.tit dt { width: 24rem; }
.blockWrap .trafficWrap .item.tit dd { width: calc(100% - 24rem); text-align: left; padding-left: 6rem; }
.blockWrap .trafficWrap .item dt {
	width: 24rem;
	margin: 0;
	padding: 3rem;
	background-color: #f3efe6;
	display: flex; align-items: center; justify-content: center;
}
.blockWrap .trafficWrap .item dt > div {
	display: flex; flex-direction: column; align-items: center;
}
.blockWrap .trafficWrap .item dt .icon {
	width: 6rem; height: 6rem;
	margin: 0 0 1rem;
	border-radius: 1rem;
	background-color: #af8d5d;
	color: #fff;
	font-size: 3rem;
	display: flex; align-items: center; justify-content: center;
	line-height: 1;
}
.blockWrap .trafficWrap .item dt h6 {
	margin: 0;
	font-size: 1.7rem;
	color: #333;
}
.blockWrap .trafficWrap .item dd {
	width: calc(100% - 24rem);
	margin: 0;
	padding: 3rem 4rem;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}
.blockWrap .trafficWrap .item dd ul.dot { margin-bottom: 0; }
.blockWrap .trafficWrap .item dd ul.dot li { color: #333; }
.blockWrap .trafficWrap .item dd ul.dot + p.tip { margin-top: 2rem; }
.blockWrap .trafficWrap .item dd p.tip {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin: 1.5rem 0 0;
	font-size: 1.7rem; line-height: 170%;
	color: #af8d5d !important;
	background: none;
	border-radius: 0;
}
.blockWrap .trafficWrap .item dd p.tip:before {
	content: "\f05a";   /* Font Awesome 4 info-circle */
	font-family: "FontAwesome";
	flex-shrink: 0;
	font-size: 1.7rem;
	line-height: 170%;   /* 텍스트 첫 줄과 동일 라인박스 → 아이콘 높이 정렬 */
	color: #af8d5d;
}


/* ----- 외암마을 특징 / 본문 (titWrap + conWrap 2단) ----- */
.bodyWrap {
	width: 100%;
	margin-bottom: 8rem;
}
.bodyWrap.flex {
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: flex-start;
}
.bodyWrap .titWrap { width: 46.6rem; }
.bodyWrap .titWrap h3 {
	width: 28rem;
	word-break: keep-all;
}
.bodyWrap .titWrap p {
	width: 40rem;
	word-break: keep-all;
}
.bodyWrap.flex .conWrap {
	width: calc(100% - 48rem);
	margin-bottom: 0;
}
.bodyWrap.flex .conWrap.wide100 { width: 100%; }

/* ----- 통일 본문 가독성 다듬기 (pageTit + conWrap.wide100) -----
   - 본문 컬럼을 읽기 좋은 폭(96rem)으로 중앙 정렬 → 텍스트/festivalInfo/갤러리 모두 좌우 정렬 일치
   - 단조로운 텍스트 벽 해소: 줄간격·문단 색·h5 구분선·h6 포인트 컬러 */
.pageTit p {
	max-width: 78rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 175%;
}
.bodyWrap.flex .conWrap.wide100 {
	max-width: 96rem;
	margin-left: auto;
	margin-right: auto;
}
.bodyWrap.flex .conWrap.wide100 > p {
	line-height: 195%;
	color: #555;
}
.bodyWrap.flex .conWrap.wide100 > h5 {
	margin-top: 6rem;
	margin-bottom: 1.2rem;
}
.bodyWrap.flex .conWrap.wide100 > h5:first-child { margin-top: 0; }
.bodyWrap.flex .conWrap.wide100 > h6 { color: #224e42; }
.bodyWrap .conWrap h6 {
	margin: 3rem 0 1rem 0;
	font-size: 2rem; font-weight: 700;
	color: #333;
}
.bodyWrap .conWrap h6:first-child { margin-top: 0; }
.bodyWrap .Wrap50 {
	width: calc((100% / 2) - 0.8rem);
}
/* 이미지 2열 행을 본문 폭(96rem)에 맞춰 축소·중앙 정렬 → 텍스트 컬럼과 정렬 일치 */
.bodyWrap.flex:has(> .Wrap50) {
	max-width: 96rem;
	margin-left: auto;
	margin-right: auto;
}
.bodyWrap .imageBox {
	width: 100% !important;
	border-radius: 1.2rem;
}


/* ----- 외암마을체험 / 체험 안내바 + 체험 카드 그리드 (라이브 디자인 동일) ----- */
/* 상단 안내바 (체험안내 / 단체 / 개인 / 문의) — 4열 */
.expWrap.flex {
	display: flex; flex-wrap: wrap;
	margin-bottom: 6rem;
	border-radius: 1.2rem;
	background-color: #f5f4f2;
	overflow: hidden;
}
.expWrap .item {
	position: relative;
	width: 25%;
	padding: 6rem 5rem;
	text-align: center;
}
.expWrap .item:not(:last-child)::before {
	content: ""; position: absolute;
	top: 5rem; right: 0;
	width: 1px; height: calc(100% - 10rem);
	background-color: rgba(0, 0, 0, 0.15);
}
/* 1번 항목: 좌측 정렬 제목(.tit.bar) + 설명 — 폰트 크기는 라이브 동일(body h3 3.2rem / h6 2.2rem / p 1.7rem 상속) */
.expWrap .item h3.tit,
.expWrap .item h3.tit + p,
.expWrap .item p.tel { text-align: left; }
.expWrap .item h6,
.expWrap .item p {
	color: #333 !important;
	margin-bottom: 1rem !important;
}
.expWrap .item h6 { font-weight: 700; }
/* 아이콘 (단체/개인/문의) — expIcon 이미지 */
.expWrap .item .icon {
	display: block;
	height: 9rem;
	margin-bottom: 2rem;
	background-position: center center;
	background-repeat: no-repeat;
}
.expWrap .item:nth-child(2) .icon { background-image: url(../../main/images/expIcon_01.png); }
.expWrap .item:nth-child(3) .icon { background-image: url(../../main/images/expIcon_02.png); }
.expWrap .item:nth-child(4) .icon { background-image: url(../../main/images/expIcon_03.png); }
.expWrap .item p.tel { margin-bottom: 0.5rem; }
.expWrap .item p.tel .tit {
	display: inline-block;
	margin: 0 0.5rem 0 0;
	padding: 0.5rem 1.5rem;
	font-size: 1.4rem; color: #fff;
	text-align: center;
	border-radius: 1.2rem;
	background-color: #af8d5d;
}
.expWrap .item .lightBrownTxt { color: #af8d5d !important; }
.expWrap .item .smTxt { display: inline-block; margin-left: 0.5rem; }
/* 단체 체험비 보기 — Semantic 애니메이션 버튼 (라이브 동일) */
.expWrap .item .ui.button.red {
	margin-top: 1.5rem;
	padding: 1.2rem 3rem;
	font-size: 1.5rem;
}

/* 정렬 필터 (전체 / 개인 / 단체 / 가나다순) */
.itemAlign {
	margin: 0 0 2rem;
	font-size: 1.5rem;
}
.itemAlign a {
	display: inline-block;
	margin-left: 2rem;
	color: #555;
	cursor: pointer;
	letter-spacing: -0.05rem;
}
.itemAlign a:hover { text-decoration: underline; }
.itemAlign a.on {
	color: #dd3c10; font-weight: 700;
	padding-left: 2.4rem;
	background: url(../../main/images/alignCheck.png) left center no-repeat;
}

/* 체험 카드 그리드 (roomList expList) — 4열 gap 기반 */
.roomList.expList.flex {
	display: flex; flex-wrap: wrap;
	justify-content: flex-start;   /* 마지막 행 2개 등 미완성 행 — 왼쪽 정렬 (space-between 상속 차단) */
	gap: 3rem;
	margin-bottom: 8rem;
}
.roomList.expList .item {
	width: calc((100% - 9rem) / 4);
	margin: 0;
	border-radius: 1.2rem;
	overflow: hidden;
	background-color: #f5f4f2;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.roomList.expList .item:hover {
	transform: translateY(-0.8rem);
	box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.12);
}
.roomList.expList .item dt {
	position: relative;
	height: 22rem;
	overflow: hidden;
}
.roomList.expList .item dt .img,
.roomList.expList .item dt .img img { width: 100%; height: 100%; }
.roomList.expList .item dt .img img {
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.roomList.expList .item:hover dt .img img { transform: scale(1.06); }
.roomList.expList .item dd { padding: 2.4rem; }
.roomList.expList .item .type {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin-bottom: 1.4rem;
}
.roomList.expList .item .type .ui.label {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	font-size: 1.2rem; font-weight: 400; color: #fff;
	border-radius: 0.5rem;
}
.roomList.expList .item .type .ui.label.blue  { background-color: #003ca0; }
.roomList.expList .item .type .ui.label.brown { background-color: #553723; }
.roomList.expList .item .type .ui.label.green { background-color: #00aa3c; }
.roomList.expList .item .tit {
	display: block;
	margin-bottom: 1.4rem;
	font-size: 2rem; font-weight: 700; color: #003ca0;
	line-height: 150%; word-break: keep-all;
}
.roomList.expList .item .dot { margin: 0; }
.roomList.expList .item .dot li {
	font-size: 1.4rem; color: #555;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roomList.expList .item .dot li .redTxt { color: #c4302b; font-weight: 500; }


/* ----- 온라인예약 / 검색폼 (#bookingSearch) + 객실 목록 (.roomList) ----- */
#bookingSearch {
	margin-bottom: 5rem;
	border-radius: 1.2rem;
	background: #f5f4f2;
	overflow: hidden;
}
#bookingSearch form { display: flex; flex-wrap: wrap; align-items: stretch; }
#bookingSearch .searchDiv {
	width: 25%;
	display: flex; align-items: center;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}
#bookingSearch .searchDiv:first-child {
	width: 14%;
	background: #224e42;
}
#bookingSearch .searchDiv:last-child {
	width: 11%;
	border-right: 0;
}
#bookingSearch .padding { width: 100%; padding: 2.2rem 2.4rem; }
#bookingSearch .searchDiv:first-child .padding h5 {
	margin: 0; color: #fff; font-size: 1.9rem; line-height: 140%;
}
#bookingSearch .padding .tit {
	display: block; margin-bottom: 1.6rem;
	font-size: 1.4rem; color: #999;
}
#bookingSearch .padding input,
#bookingSearch .padding .k-widget {
	width: 100% !important;
	font-size: 1.6rem;
}
/* Kendo 위젯(민박명/체크인/체크아웃) 높이 통일 + 밑줄 스타일 일원화 */
#bookingSearch .padding .k-widget,
#bookingSearch .padding .k-picker-wrap,
#bookingSearch .padding .k-dropdown-wrap {
	height: 4.4rem !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
#bookingSearch .padding .k-picker-wrap,
#bookingSearch .padding .k-dropdown-wrap {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
	display: flex !important;
	align-items: center;
}
#bookingSearch .padding .k-widget .k-input {
	height: 4.4rem !important;
	line-height: 4.4rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 1.6rem;
}
#bookingSearch .padding .k-widget .k-select {
	height: 4.4rem !important;
	line-height: 4.4rem !important;
	background: transparent !important;
	border: 0 !important;
}
#bookingSearch .padding input {
	height: 4.4rem;
	padding: 0;
	border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	background: transparent;
}
#bookingSearch .padding input::placeholder { color: #999; font-weight: normal; }
#bookingSearch .searchDiv .brown.bnt {
	width: 100%; height: 100%;
	min-height: 8rem;
	font-size: 1.8rem; font-weight: 500; color: #fff;
	background-color: #af8d5d;
	transition: background-color 0.25s;
}
#bookingSearch .searchDiv .brown.bnt:hover { background-color: #946f3f; }

/* 객실 카드 그리드 — 예약(.roomList.flex, expList 제외) 4열 */
.roomList.flex:not(.expList) {
	display: flex; flex-wrap: wrap;
	justify-content: flex-start;
	gap: 3rem;
	margin-bottom: 8rem;
}
.roomList.flex:not(.expList) .item {
	width: calc((100% - 9rem) / 4);
	margin: 0;
	border-radius: 1.2rem;
	overflow: hidden;
	background-color: #f5f4f2;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.roomList.flex:not(.expList) .item:hover {
	transform: translateY(-0.8rem);
	box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.12);
}
.roomList.flex:not(.expList) .item dt {
	height: 22rem;
	overflow: hidden;
}
.roomList.flex:not(.expList) .item dt .img,
.roomList.flex:not(.expList) .item dt .img img { width: 100%; height: 100%; }
.roomList.flex:not(.expList) .item dt .img img {
	object-fit: cover; display: block;
	transition: transform 0.4s ease;
}
.roomList.flex:not(.expList) .item:hover dt .img img { transform: scale(1.06); }
.roomList.flex:not(.expList) .item dd { padding: 2.4rem; }
.roomList.flex:not(.expList) .item .tit {
	display: block;
	margin-bottom: 1.4rem;
	font-size: 2rem; font-weight: 700; color: #224e42;
	line-height: 140%; word-break: keep-all;
}
.roomList.flex:not(.expList) .item .dot { margin: 0 0 1.6rem; }
.roomList.flex:not(.expList) .item .dot li {
	font-size: 1.4rem; line-height: 160%; color: #555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.roomList.flex:not(.expList) .item .dot li + li { margin-top: 0.5rem; }
.roomList.flex:not(.expList) .item .price {
	display: block;
	margin-bottom: 1.6rem;
	font-size: 2.1rem; font-weight: 700; color: #c4302b;
	text-align: right;
}
/* 주말/주중 이중요금 (외암마을 주중 할인민박표 적용) */
.roomList.flex:not(.expList) .item .price.priceDual {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
}
.roomList.flex:not(.expList) .item .price.priceDual .pWeekend {
	font-size: 1.5rem; font-weight: 500; color: #888;
	text-decoration: line-through;
}
.roomList.flex:not(.expList) .item .price.priceDual .pWeekend b {
	font-weight: 500; color: #888;
	text-decoration: none;
}
.roomList.flex:not(.expList) .item .price.priceDual .pWeekday {
	font-size: 2rem; font-weight: 700; color: #c4302b;
}
.roomList.flex:not(.expList) .item .price.priceDual .pWeekday b {
	font-size: 1.4rem; font-weight: 700; color: #224e42;
	margin-right: 0.3rem;
}
.roomList.flex:not(.expList) .item .price.priceDual .pNote {
	font-size: 1.3rem; font-weight: 500; color: #888;
}
/* 날짜 기준 숙박료 자동계산 결과 (addJs.js PriceCalc) */
.roomList.flex:not(.expList) .item .calcTotal {
	margin-top: 0.6rem;
	padding: 0.8rem 1rem;
	background-color: #f0f6ff;
	border: 1px solid rgba(10, 88, 202, 0.25);
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
}
.roomList.flex:not(.expList) .item .calcTotal .calcNights {
	font-size: 1.3rem;
	color: #555;
}
.roomList.flex:not(.expList) .item .calcTotal .calcSum {
	font-size: 1.5rem;
	color: #224e42;
}
.roomList.flex:not(.expList) .item .calcTotal .calcSum b {
	font-size: 2rem;
	font-weight: 700;
	color: #c4302b;
	margin-left: 0.3rem;
}
.roomList.flex:not(.expList) .item .btnBox {
	display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.roomList.flex:not(.expList) .item .btnBox .ui.button {
	flex: 1;
	padding: 1.1rem 0.5rem;
	font-size: 1.4rem; font-weight: 500; color: #fff;
	text-align: center;
	border-radius: 0.5rem;
}
.roomList.flex:not(.expList) .item .btnBox .ui.button.brown { background-color: #553723; }
.roomList.flex:not(.expList) .item .btnBox .ui.button.green { background-color: #00963c; }
.roomList.flex:not(.expList) .item .btnBox .ui.button:hover { opacity: 0.88; }

/* 외부 예약 민박 — 별도 구분 섹션 (이미지·가격 없는 제휴 민박) */
.extRoomWrap {
	margin-bottom: 8rem;
	padding-top: 5rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.2);
}
.extRoomWrap .extRoomTit {
	position: relative;
	margin-bottom: 1rem; padding-bottom: 1.4rem;
	font-size: 2.4rem;
}
.extRoomWrap .extRoomTit::after {
	content: ""; position: absolute;
	left: 0; bottom: 0;
	width: 4.5rem; height: 0.3rem;
	background-color: #224e42;
}
.extRoomWrap .extRoomDesc {
	margin-bottom: 3rem;
	font-size: 1.6rem; color: #777;
}
/* 외부민박 카드 — 이미지 없는 컴팩트 형태 (일반 객실 카드와 구분) */
.roomList.flex.extRoom { gap: 2rem; margin-bottom: 0; }
.roomList.flex.extRoom .item {
	width: calc((100% - 6rem) / 4);
	padding: 2.4rem;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
}
.roomList.flex.extRoom .item:hover {
	transform: none;
	box-shadow: none;
	border-color: #224e42;
}
.roomList.flex.extRoom .item dd { padding: 0; }
.roomList.flex.extRoom .item .tit {
	display: block;
	margin-bottom: 1.2rem;
	font-size: 1.9rem; font-weight: 700; color: #224e42;
}
.roomList.flex.extRoom .item .dot { margin: 0 0 1.6rem; }
.roomList.flex.extRoom .item .dot li {
	font-size: 1.4rem; line-height: 160%; color: #666;
	word-break: break-all;
}
.roomList.flex.extRoom .item .btnBox .ui.button.green {
	display: block;
	padding: 1rem;
	font-size: 1.4rem; color: #fff; text-align: center;
	background-color: #00963c;
	border-radius: 0.5rem;
}
.roomList.flex.extRoom .item .btnBox .ui.button.green:hover { opacity: 0.88; }

/* 객실 상세보기 모달 */
.ui.modal.roomModal { border-radius: 1.2rem; }
.ui.modal.roomModal > .header {
	padding: 2rem 2.5rem;
	font-size: 2.2rem; font-weight: 700; color: #224e42;
}
.ui.modal.roomModal > .content { padding: 2.5rem; }
.ui.modal.roomModal .roomModalBody {
	display: flex; flex-wrap: wrap; gap: 2.5rem;
	align-items: flex-start;
}
.ui.modal.roomModal .roomModalImg {
	width: 36rem; flex-shrink: 0;
	border-radius: 1rem; overflow: hidden;
}
.ui.modal.roomModal .roomModalImg img { width: 100%; display: block; }
.ui.modal.roomModal .roomModalInfo { flex: 1; min-width: 24rem; }
.ui.modal.roomModal .roomModalInfo .dot { margin: 0 0 2rem; }
.ui.modal.roomModal .roomModalInfo .dot li {
	position: relative;
	padding-left: 1.4rem; margin-bottom: 0.8rem;
	font-size: 1.5rem; line-height: 165%; color: #555;
	word-break: keep-all;
}
.ui.modal.roomModal .roomModalInfo .dot li::before {
	content: ""; position: absolute;
	left: 0.3rem; top: 1rem;
	width: 0.4rem; height: 0.4rem;
	border-radius: 50%; background-color: #666;
}
.ui.modal.roomModal .roomModalPrice {
	font-size: 2.2rem; font-weight: 700; color: #c4302b;
	text-align: right;
}
.ui.modal.roomModal > .actions {
	padding: 1.5rem 2.5rem;
	text-align: right;
}
.ui.modal.roomModal > .actions .ui.button {
	display: inline-block;
	padding: 1.1rem 2.4rem;
	margin-left: 0.6rem;
	font-size: 1.5rem; border-radius: 0.5rem;
}
.ui.modal.roomModal > .actions .ui.button.green { color: #fff; background-color: #00963c; }
.ui.modal.roomModal > .actions .ui.cancel.button { color: #555; background-color: #e8e8e8; }


/* ----- 외암마을체험 상세 (#expView) ----- */
/* 컴포넌트(2단·5열·4열) 위주 페이지 → 표준 sub 폭(inner2 128rem) 사용 */
#expView {
	width: 100%;
	margin: 0 auto;
}
#expView .expHeader { margin-bottom: 5rem; text-align: center; }
#expView .expHeader h1 { margin-bottom: 1.5rem; font-weight: 500; }
#expView .expHeader .type {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	justify-content: center;
}
#expView .expHeader .type .ui.label {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	font-size: 1.3rem; font-weight: 400; color: #fff;
	border-radius: 0.5rem;
}
#expView .expHeader .type .ui.label.blue  { background-color: #003ca0; }
#expView .expHeader .type .ui.label.brown { background-color: #553723; }
#expView .expHeader .type .ui.label.green { background-color: #00aa3c; }

#expView .expBody { text-align: left; }
#expView .expBody hr {
	margin: 0 0 5rem;
	border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12);
}
#expView .expBody h5 {
	margin: 0 0 2.4rem;
	padding-bottom: 1.4rem;
	font-size: 2.1rem;
}
#expView .expBody h5:not(:first-of-type) { margin-top: 6rem; }

/* 체험기본정보 — 이미지 + 준비물/체험순서 2단 */
#expView .expBody .prepaRation.flex {
	display: flex; flex-wrap: wrap;
	gap: 4rem;
	margin-bottom: 6rem;
}
#expView .expBody .prepaRation dt {
	width: 54rem; margin: 0;
}
#expView .expBody .prepaRation dt .image-link {
	position: relative; display: block;
	width: 100%; height: 38rem;
	overflow: hidden;
	border-radius: 1.2rem;
}
#expView .expBody .prepaRation dt .image-link img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
#expView .expBody .prepaRation dd {
	width: calc(100% - 58rem); margin: 0;
}
#expView .expBody .prepaRation dd h6.brownTxt {
	margin-bottom: 1rem;
	font-size: 1.8rem; color: #846335;
}
#expView .expBody .prepaRation dd p + h6 { margin-top: 3rem; }
#expView .expBody .prepaRation dd p { font-size: 1.6rem; line-height: 170%; color: #555; }
#expView .expBody .prepaRation dd .order.flex {
	display: flex; flex-wrap: wrap;
	gap: 1rem 3rem;
	margin-top: 1.5rem;
}
#expView .expBody .prepaRation dd .order li {
	position: relative;
	width: calc((100% - 6rem) / 3);
	padding: 2rem;
	font-size: 1.5rem; line-height: 160%; color: #444;
	word-break: keep-all;
	background-color: #f5f4f2;
	border-radius: 0.8rem;
	display: flex; align-items: center;
}
#expView .expBody .prepaRation dd .order li::after {
	content: "→";
	position: absolute;
	right: -2.4rem; top: 50%;
	transform: translateY(-50%);
	width: 2.4rem; height: 2.4rem;
	font-size: 1.4rem; line-height: 2.4rem; text-align: center;
	color: #fff;
	background-color: #224e42;
	border-radius: 50%;
}
#expView .expBody .prepaRation dd .order li:last-child::after { display: none; }

/* 체험 요약 정보 5열 (소요시간/대상/시기/인원/체험비) */
#expView .expBody .expinfo.flex {
	display: flex; flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 6rem;
}
#expView .expBody .expinfo .item {
	width: calc((100% - 8rem) / 5);
	padding: 2.5rem 1.5rem;
	text-align: center;
	background-color: #f5f4f2;
	border-radius: 1.2rem;
}
#expView .expBody .expinfo .item h6.brownTxt {
	font-size: 1.6rem; color: #846335;
}
#expView .expBody .expinfo .item .icon {
	display: block;
	width: 6rem; height: 6rem;
	margin: 1.5rem auto;
	background-position: center; background-repeat: no-repeat;
	background-size: contain;
}
#expView .expBody .expinfo .item:nth-child(1) .icon { background-image: url(../../main/images/expIcon_04.png); }
#expView .expBody .expinfo .item:nth-child(2) .icon { background-image: url(../../main/images/expIcon_05.png); }
#expView .expBody .expinfo .item:nth-child(3) .icon { background-image: url(../../main/images/expIcon_06.png); }
#expView .expBody .expinfo .item:nth-child(4) .icon { background-image: url(../../main/images/expIcon_07.png); }
#expView .expBody .expinfo .item:nth-child(5) .icon { background-image: url(../../main/images/expIcon_08.png); }
#expView .expBody .expinfo .item .txt {
	display: flex; align-items: center; justify-content: center;
	min-height: 5rem;
	font-size: 1.7rem; line-height: 140%; color: #333;
}
#expView .expBody .expinfo .item .txt .smTxt { display: block; font-size: 1.3rem; }
#expView .expBody .expinfo .item .txt .smTxt.redTxt { color: #c4302b; }

/* 교과연계 표 */
#expView .expBody table.norTable {
	width: 100%;
	margin-bottom: 6rem;
	border-collapse: collapse;
}
#expView .expBody table.norTable th {
	padding: 1.4rem;
	font-size: 1.6rem; color: #fff;
	text-align: center;
	background-color: #224e42;
	border: 1px solid #224e42;
}
#expView .expBody table.norTable td {
	padding: 1.4rem;
	font-size: 1.5rem; line-height: 160%; color: #555;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.12);
}
#expView .expBody table.norTable td:last-child { text-align: left; }

/* 체험 갤러리 4열 */
#expView .expBody .expGallery.flex {
	display: flex; flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.5rem;
	margin-bottom: 6rem;
}
#expView .expBody .expGallery .item {
	width: calc((100% - 4.5rem) / 4);
	margin: 0;
}
#expView .expBody .expGallery .item .imageBox { margin: 0; }
#expView .expBody .expGallery .item .image-link {
	position: relative; display: block;
	width: 100%; height: 20rem;
	overflow: hidden;
	border-radius: 1rem;
}
#expView .expBody .expGallery .item .image-link img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 0.4s ease;
}
#expView .expBody .expGallery .item .image-link:hover img { transform: scale(1.08); }

/* 한복대여 갤러리 — 가로는 컬럼폭 동일, 세로는 원본 비율 (메이슨리: 세로 간격 없이 채움) */
#expView .expBody .expGallery.flex.autoH {
	display: block !important;
	column-count: 3;
	column-gap: 2.4rem;
}
#expView .expBody .expGallery.flex.autoH .item {
	width: 100%;
	margin: 0 0 2.4rem;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
#expView .expBody .expGallery.flex.autoH .item .image-link {
	height: auto;
}
#expView .expBody .expGallery.flex.autoH .item .image-link img {
	height: auto;
	object-fit: initial;
}

/* 목록 버튼 */
#expView .btnArea {
	margin: 6rem 0 8rem;
	text-align: center;
}
#expView .btnArea .listBtn {
	display: inline-block;
	padding: 1.4rem 4.5rem;
	font-size: 1.6rem; font-weight: 500; color: #fff;
	background-color: #224e42;
	border-radius: 0.6rem;
	transition: background-color 0.25s ease;
}
#expView .btnArea .listBtn:hover { background-color: #16382f; }


/* ----- 체험비안내 (#expPrice) ----- */
#expPrice { margin-bottom: 8rem; }
#expPrice h3.tit.bar { margin-bottom: 2.5rem; }
#expPrice > .flex {
	display: flex; flex-wrap: wrap;
	gap: 2rem 8rem;
	margin-bottom: 5rem;
}
#expPrice .expItem { width: calc((100% - 12rem) / 2); }
#expPrice .expItem h6 {
	margin-bottom: 1rem;
	font-weight: 600;
    color: #333;
}
#expPrice .expItem p + h6 {
   margin-top: 4.8rem; 
}
#expPrice .expItem h6 + p { margin-bottom: 0; }
#expPrice .expItem p {
	margin-bottom: 2.5rem;
	line-height: 170%; color: #555;
}
#expPrice .expItem p:last-child { margin-bottom: 0; }
#expPrice hr {
	margin: 5rem 0;
	border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12);
}
#expPrice > p {
	margin-bottom: 1.5rem;
	line-height: 175%; color: #555;
}
#expPrice h4.redTxt {
	margin: 2rem 0 0 0;
	line-height: 150%;
}
#expPrice > h6 {
	margin-bottom: 1rem;
	font-weight: 500; color: #333;
}
/* 체험비 표 */
#expPrice table.expTable {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	border-top: 3px solid #224e42;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
#expPrice table.expTable th {
	padding: 1.5rem;
	font-weight: 700; color: #333;
	text-align: center;
	background-color: #f5f4f2;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	border-right: 1px solid rgba(0, 0, 0, 0.15);
}
#expPrice table.expTable td {
	padding: 1.5rem;
	line-height: 150%; color: #444;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	border-right: 1px solid rgba(0, 0, 0, 0.15);
}
#expPrice table.expTable.tdRight_02 td:nth-child(2) { text-align: center; }
#expPrice table.expTable td.blueBg {
	text-align: left;
	vertical-align: top;
	background-color: #f7f9fc;
}
#expPrice table.expTable td.blueBg .dot {
	margin: 0; padding: 1rem;
}
#expPrice table.expTable td.blueBg .dot > li {
	line-height: 165%; color: #333;
    font-size: 1.7rem;
    font-weight: 500;
}
#expPrice table.expTable td.blueBg .dot > li + li { margin-top: 2.4rem; }
#expPrice table.expTable td.blueBg .dot > li h6 {
	margin: 0.5rem 0;
	font-weight: 700; color: #333;
}
#expPrice table.expTable td.blueBg .dot > li p {
	margin-top: 0.5rem;
	line-height: 160%; color: #666;
    font-size: 1.6rem;
    font-weight: 400;
}
#expPrice table.expTable td.blueBg .dot > li .redTxt { display: block; }


/* ----- 조직도 (organization) ----- */
.inner4 {
	margin: 0 auto; position: relative;
	max-width: 98rem;
}
.organization {
	padding: 17.5rem 0;
	background: url(../../main/images/organizationBg.jpg) center center no-repeat;
	background-size: cover;
}
.orgWrap { position: relative; }
.orgWrap .line {
	position: relative;
	overflow: hidden;
	text-align: center;
}
.orgWrap .line.one,
.orgWrap .line.two,
.orgWrap .line.three,
.orgWrap .line.four { padding-bottom: 4rem; }
.orgWrap .line.five { padding-top: 4rem; }

/* 공통 item 박스 (line.five 기준 — 둥근 원) */
.orgWrap .line .item {
	display: flex; align-items: center; justify-content: center;
	position: relative;
	width: 14rem; height: 14rem;
	margin: 0 auto;
	padding: 3rem;
	font-size: 2rem; line-height: 140%; font-weight: 700;
	color: #333; word-break: keep-all;
	background-color: #fff;
	border-radius: 50%;
}

/* line one~four — 가로 알약 모양 */
.orgWrap .line.one .item,
.orgWrap .line.two .item,
.orgWrap .line.three .item,
.orgWrap .line.four .item {
	width: 25rem; height: 8.8rem;
	margin: 0 auto;
	font-size: 3rem; font-weight: 700;
	color: #fff;
	background-color: rgba(175, 141, 93, 1);
	border-radius: 6rem;
}
.orgWrap .line.two .item,
.orgWrap .line.three .item,
.orgWrap .line.four .item {
	font-size: 2.4rem; color: #333;
	background-color: #fff;
}

/* 연결선 (세로 메인 / line.three 가로 / line.five 가로·세로) */
.orgWrap::before,
.orgWrap .line .item::before,
.orgWrap .line.three::before,
.orgWrap .line.five::before,
.orgWrap .line.five .item::before {
	content: ""; display: block;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.25);
}
.orgWrap::before {
	top: 8.8rem; left: 50%;
	width: 1px; height: 42.4rem;
}
.orgWrap .line.three::before {
	top: 4.4rem; left: 25%;
	width: 50%; height: 1px;
}
.orgWrap .line.five::before {
	top: 0; left: 8.2rem;
	width: calc(100% - 16.4rem); height: 1px;
}
.orgWrap .line.five .item::before {
	top: -4rem; left: 50%;
	width: 1px; height: 4rem;
}

/* line.three / line.five flex 배치 */
.orgWrap .line.three.flex,
.orgWrap .line.five.flex {
	display: flex; justify-content: space-between; align-items: center;
}

.bodyWrap .conWrap h5 + ul.dot + h5 {
    margin-top: 6rem;
}

/* =====================================================
   13. RESPONSIVE - PC NAV (min-width: 1300px)
   ===================================================== */
@media only screen and (min-width: 1300px) {
	/* lnb_active 시 화면 전체 어두운 오버레이 */
	.lnb_active #wrap::before {
		content: ""; display: block;
		position: fixed; top: 0; left: 0; z-index: 99;
		width: 100%; height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	#lnb { position: relative; top: 0; left: 0; width: 100%; overflow: hidden; }
	#lnb .nav * { transition-duration: 0.25s; transition-timing-function: linear; }
	#lnb .nav {
		position: relative; z-index: 10;
		height: 5.6rem;
		word-break: keep-all;
		transition-property: height;
	}
	#lnb .nav::after {
		content: ""; display: block; position: absolute; z-index: 0;
		left: 0; top: 5.6rem;
		width: 100%; height: calc(100% - 5.6rem);
		background-color: #fff;
	}
	#lnb .nav .menu_top, #lnb .nav .gnb_m_left,
	#lnb .mobile_top, #lnb .nav_close { display: none; }

	/* ----- depth1 ----- */
	#lnb .nav .depth1 {
		position: relative; z-index: 10;
		width: 100%; margin: 0 auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}
	#lnb .nav .depth1_list {
		display: table; width: 128rem; margin: 0 auto;
	}
	#lnb .nav .depth1_item {
		display: table-cell;
		text-align: center; vertical-align: middle;
	}
	#lnb .nav .depth1_item .depth1_text {
		display: block; position: relative;
		width: 100%; height: 100%; box-sizing: border-box;
		padding: 0 3.5rem;
		font-size: 2.1rem; line-height: 5.6rem;
		color: #fff; text-align: center; vertical-align: middle;
	}
	#lnb .nav .depth1_item .depth1_text::before {
		content: ""; display: block;
		position: absolute; bottom: 0.1rem; left: 0;
		margin-left: 5.2rem;
		width: calc(100% - 10rem); height: 0.4rem;
		background-color: #af8d5d;
		opacity: 0; transform: scaleX(0);
		transition: all 0.2s linear;
	}
	#lnb .nav .depth1_title { display: none; }
	.lnb_active #lnb .nav .depth1_item.active .depth1_text::before,
	#lnb .nav .depth1_item:hover .depth1_text::before {
		opacity: 1; transform: scaleX(1);
	}

	/* ----- depth2 (mega-menu, 148rem wide) ----- */
	#lnb .nav .depth2 {
		display: flex; flex-wrap: wrap;
		position: absolute; top: 5.6rem; left: 50%;
		transform: translateX(-50%);
		z-index: 20;
		width: 148rem;
		height: calc(100% - 5.6rem);
		visibility: hidden; overflow: hidden;
		word-break: keep-all;
		transition-property: visibility, background-color;
	}
	#lnb .nav .depth2 .depth2_title {
		left: 0; width: calc(100% / 5);
		padding: 6rem 2rem;
		font-size: 3.6rem; color: #af8d5d;
		text-align: center; box-sizing: border-box;
		border-left: 1px solid rgba(0, 0, 0, 0.15);
	}
	#lnb .nav .depth2_list {
		position: relative;
		width: calc((100% / 5) * 4);
		min-height: 25rem;
		padding: 2rem 0 6rem 0;
		box-sizing: border-box; overflow: hidden;
		background: url(../../main/images/bg_header.png) repeat;
		background-size: 296px;
		border-bottom: 1px solid transparent;
		border-right: 1px solid rgba(0, 0, 0, 0.15);
	}
	#lnb .nav .depth2_list::before {
		content: ""; display: block;
		position: absolute; top: 0; left: 0;
		width: 1px; height: 100%;
		background-color: rgba(0, 0, 0, 0.05);
	}
	#lnb .nav .depth2_list { text-align: left; }
	#lnb .nav .depth2_item {
		float: left; position: relative;
		width: 25%; padding-left: 5rem; box-sizing: border-box;
		text-align: left;
	}
	#lnb .nav .depth2_text {
		display: inline-block;
		margin: 3rem 0 1rem 0;
		font-size: 1.8rem; color: #555;
		text-align: left;
	}
	#lnb .nav .depth2_text:hover { color: #af8d5d; }

	/* depth2 펼침 — active 또는 hover */
	.lnb_active #lnb .nav .depth1_item.active .depth2,
	#lnb .nav .depth1_item:hover .depth2 {
		overflow: visible; visibility: visible;
	}

	/* ----- depth3 (inline within depth2_item) ----- */
	#lnb .nav .depth3 {
		display: block;
		text-align: left;
	}
	#lnb .nav .depth3_list { padding: 0; }
	#lnb .nav .depth3_item { width: 100%; text-align: left; }
	#lnb .nav .depth3_text {
		display: block; position: relative;
		padding: 0.4rem 0 0.4rem 1.3rem;
		font-size: 1.5rem; font-weight: 400;
		color: #999;
		text-align: left;
	}
	#lnb .nav .depth3_text::before {
		content: ""; display: block;
		position: absolute; left: 0.3rem; top: 1.3rem;
		width: 0.4rem; height: 0.4rem;
		background-color: #bbb; border-radius: 50%;
	}
	#lnb .nav .depth3_text:hover,
	#lnb .nav .depth3_text:focus { color: #104138; }
	#lnb .nav .depth4 { display: none; }
}


/* =====================================================
   14. RESPONSIVE - max-width: 1459px (layout padding)
   ===================================================== */
@media only screen and (max-width: 1459px) {
	.inner1, .inner3, #mainSearch { padding: 0 2rem; }
	#telPhone { padding: 9rem 2rem 6rem 2rem; }
	#telPhone .inner3 .telWrap { padding: 2rem 0 2rem 2rem; }
	#topMenu { padding: 2.5rem 0; }
	#mainSearch .inner3 { padding: 0; }
	footer .inner3 { background-position: 2rem top; }
	#event .inner3 > .swiper-pagination { right: 2rem; left: auto; top: 0; }
    
    #subBody .inner2,
    #subBody .subBg + .inner2,
    #subBody .brownBg .inner2.txtCenter {
        padding: 0 2rem;
    }
    #subBody .inner2 + .brownBg {
        margin-top: 8rem;
    }
}


/* =====================================================
   15. RESPONSIVE - max-width: 1299px (Mobile Nav + Tablet)
   ===================================================== */
@media only screen and (max-width: 1299px) {
	body h1 { font-size: 4.2rem; letter-spacing: -0.2rem; }
	body h2 { font-size: 3.6rem; letter-spacing: -0.1rem; }
	body h3 { font-size: 3rem; }
	body h4 { font-size: 2.5rem; }
	body h5 { font-size: 2.2rem; }
	body h6 { font-size: 2rem; }
	body p, body li, body dt, body a { font-size: 1.6rem; }
    
	#header {
		height: 11.4rem;
		margin-bottom: -11.4rem;   /* 모바일 헤더 높이에 맞춤 (오버레이 유지) */
	}
	#topMenu { border-bottom: none; }
	#topMenu .slogan {
		position: absolute; top: 50%; left: 7rem;
		transform: translateY(-50%);
	}
	#topMenu .logo {
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%, -50%);
	}
	#topMenu .nav_open { display: block; }
	#topMenu .item:first-child { display: none; }
	.inner1 { padding: 0 2rem; }
	#topMenu .inner1.flex { justify-content: right; padding: 0;}
    
    .depth2_title {
        display: none;
    }

	/* Mobile LNB */
	.lnb_open { overflow: hidden; }
	.lnb_open #lnb::before {
		content: ""; display: block;
		position: fixed; inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	#lnb {
		display: block; position: absolute;
		top: 0; left: 0; z-index: 200; width: 100%;
	}
	#lnb .nav {
		visibility: hidden;
		position: fixed; top: 0; left: -100%;
		width: 38rem; max-width: 90vw;
		height: 100vh; height: 100dvh;     /* iOS Safari URL바 보정 */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;  /* 모바일 부드러운 스크롤 */
		overscroll-behavior: contain;       /* 메뉴 끝 스크롤이 body로 전파 차단 */
		background-color: #fff;
		transition: left 0.25s linear, visibility 0.25s linear;
		will-change: left;                  /* GPU 가속 */
	}
	.lnb_open #lnb .nav { left: 0; visibility: visible; }

	#lnb .mobile_top {
		display: flex; flex-wrap: wrap;
		justify-content: space-between; align-items: center;
		position: relative; height: 8rem;
		padding: 1rem 2rem;
		background-color: #a97d32;
	}
	#lnb .mobile_top .logo_m a {
		display: block;
		width: 13.7rem; height: 4.7rem;
		background: url(../../main/images/mobileLogo.png) left center/100% no-repeat;
	}
	#lnb .nav_close {
		width: 2.8rem; height: 2.8rem;
		background: url(../../main/images/header_m_sprite.png) no-repeat -109px 0;
	}
	#lnb .nav_close .nav_button {
		display: block;
		width: 100%; height: 100%;
		font-size: 0; color: transparent;
	}

	#lnb .gnb_m_left {
		display: block;
		position: absolute; top: 8rem; left: 0;
		width: 8rem;
		background-color: #f4f4f4;
	}
	#lnb .gnb_m_left ul li {
		display: flex; align-items: center;
		height: 8rem;
		border-right: 1px solid rgba(0, 0, 0, 0.15);
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}
	#lnb .gnb_m_left ul li a {
		display: block;
		width: 100%;
		font-size: 1.4rem; line-height: 140%;
		color: #101010; text-align: center;
	}
	#lnb .gnb_m_left ul li.on {
		position: relative;
		width: calc(100% + 1px);
		border-right: 0;
		background-color: #fff;
	}
	#lnb .gnb_m_left ul li.on a { color: #a97d32; }

	#lnb .nav .depth1 {
		visibility: visible;
		width: calc(100% - 9rem);
		height: auto;
		padding: 0 2rem; margin-left: 9rem;
	}
	#lnb .nav .depth1_title {
		display: block;
		padding: 2.5rem 0 2rem 0;
		font-size: 2.4rem; line-height: 140%; font-weight: 700;
		color: #a97d32;
		border-bottom: 1px solid #a97d32;
	}
	/* 모바일 depth1_list는 세로 스택 (PC flex 무효화) */
	#lnb .nav .depth1_list {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		margin: 0;
		height: auto;
	}
	#lnb .nav .depth1_item {
		display: block;
		position: relative;
		flex: none;
		text-align: left;
		width: 100%;
	}
	#lnb .nav .depth1_text {
		display: block;
		width: 100%;
		padding: 15px 25px 15px 0;
		font-size: 18px; line-height: 20px; font-weight: 600;
		color: #000;
		text-align: left;
		border-bottom: 1px solid #d9d9d9;
	}
	#lnb .nav .depth1_text::before { display: none; }
	#lnb .nav .depth1_item.has::before {
		content: ""; display: block;
		position: absolute; top: 18px; right: 13px;
		width: 15px; height: 15px;
		background: url(../../main/images/header_m_sprite.png) no-repeat -194px -7px;
	}
	#lnb .nav .depth1_item.has.active::before {
		top: 22px; background-position: -155px -13px;
	}

	#lnb .nav .depth2,
	#lnb .nav .depth3 { display: none; }
	#lnb .depth1_item.active > .depth2 {
		display: block;
		padding: 1rem 0 2rem 0;
		border-bottom: 1px solid #d9d9d9;
	}
	#lnb .depth1_item.active .depth2_item { position: relative; }
	#lnb .depth1_item.active .depth2_item::before {
		content: ""; display: block;
		position: absolute; top: 1.3rem; left: 1rem;
		width: 0.7rem; height: 1rem;
		background: url(../../main/images/header_m_sprite.png) no-repeat -236px -8px;
	}
	#lnb .depth1_item.active .depth2_text {
		display: block;
		padding: 0.8rem 3rem 0.8rem 2.5rem;
		font-size: 1.5rem; line-height: 140%;
		color: #999;
	}
	/* depth2_item이 depth3를 가진 경우 우측에 +/− 토글 아이콘 표시 */
	#lnb .depth1_item.active .depth2_item.has::after {
		content: "+"; display: block;
		position: absolute; top: 0.8rem; right: 0.5rem;
		width: 2rem; height: 2rem;
		font-size: 1.8rem; line-height: 2rem; font-weight: 400;
		text-align: center; color: #a97d32;
	}
	#lnb .depth1_item.active .depth2_item.has.active::after {
		content: "−"; color: #af8d5d;
	}
	#lnb .depth1_item.active .depth2_item.active > .depth3 {
		display: block;
		margin-bottom: 1.5rem;
		padding: 0 0 1.5rem 0;
		background-color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}
	#lnb .depth1_item.active .depth2_item.active .depth3_item { position: relative; }
	#lnb .depth1_item.active .depth2_item.active .depth3_item::before {
		content: ""; display: block;
		position: absolute; top: 1.4rem; left: 2.5rem;
		width: 0.6rem; height: 1px;
		background-color: #999;
	}
	#lnb .depth1_item.active .depth2_item.active .depth3_text {
		padding: 0.5rem 2.5rem 0.5rem 4rem;
		font-size: 1.4rem; line-height: 180%;
		color: #999;
	}

	.mainSlide .swiper-slide { height: 65rem; }
	.mainSlide .swiper-slide .tit img { max-width: 38rem; width: 100%; }
	.mainSlide .slideCon .swiper-button-prev { left: 2rem; }
	.mainSlide .slideCon .swiper-button-next { right: 2rem; }

	#mainSearch .inner3 { margin-top: -5rem; }
	#mainSearch .padding .k-input { font-size: 1.6rem; }
	#mainSearch .searchDiv .brown.bnt { font-size: 2rem; background-size: 2.7rem; }
	#mainSearch .padding,
	#mainSearch .searchDiv .brown.bnt { padding: 1.5rem 2rem; }
    
    

	#news { padding: 8rem 0; }
	#news .notice  { width: 100%; margin-bottom: 8rem; }
	#news .festival { width: 100%; }

	#telPhone {
        padding: 9rem 0 4rem 0;
    }

    #telPhone .inner3 {
        position: relative;
        background-color: transparent;
        border-radius: 0;
        overflow: visible;
    }

    #telPhone .inner3::before,
    #telPhone .inner3 .telWrap .item:nth-child(1),
    #telPhone .inner3 .telWrap .item:nth-child(n+3)::before {
        display: none;
    }

    #telPhone .inner3 .telWrap {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: flex-start;
    }

    #telPhone .inner3 .telWrap .item {
        position: relative;
        width: calc((100% - 3rem) / 3);
        box-sizing: border-box;
        padding: 2rem;
        background-color: #af8d5d;
        border-radius: 1.2rem;
    }

	/* SUB PAGE — 1299 이하 */
	#subTit .breadcrumb { margin-bottom: 4rem; }
	#subBody .subBg .greeting { margin: 0 auto 6rem auto; }
	#subBody .flex .item p br,
	#subBody .flex .item h5 br { display: none; }

	/* 조직도 — 1299 이하 */
	.organization { padding: 15rem 0; }
	.organization .inner4 { max-width: 72rem; }
	.orgWrap .line.one,
	.orgWrap .line.two,
	.orgWrap .line.three,
	.orgWrap .line.four { padding-bottom: 3rem; }
	.orgWrap .line.five { padding-top: 3rem; }
	.orgWrap .line .item {
		width: 11.5rem; height: 11.5rem;
		padding: 2rem;
		font-size: 1.8rem;
	}
	.orgWrap .line.one .item,
	.orgWrap .line.two .item,
	.orgWrap .line.three .item,
	.orgWrap .line.four .item {
		width: 23rem; height: 7.5rem;
		font-size: 2.7rem;
		border-radius: 4rem;
	}
	.orgWrap .line.two .item,
	.orgWrap .line.three .item,
	.orgWrap .line.four .item { font-size: 2.2rem; }
	.orgWrap::before { top: 7.5rem; height: 34.5rem; }
	.orgWrap .line.three::before { top: 3.75rem; left: 25%; width: 50%; height: 1px; }
	.orgWrap .line.five::before {
		top: 0; left: 6.1rem;
		width: calc(100% - 12rem); height: 1px;
	}

	/* ===== 예약하기(11-01-02) — 1299px 이하: 좌·우 전체폭(테이블 형태 미적용) ===== */
	.reserve .left,
	.reserve .right { float: none; }
	.reserve .left { width: 100%; }
	.reserve .right {
		width: 100%;
		margin-bottom: 6rem;
	}
	/* ===== 월별예약현황(11-02) — 1299px 이하: 가로 스크롤 + 좌측 sticky ===== */
	.MonthState {
		width: 100%;                          /* 컨테이너 폭은 부모(100%) 유지 — 내부만 가로 스크롤 */
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
	}
	.MonthState .itemLeft {
		flex: 0 0 14rem;
		width: 14rem;
		position: sticky;
		left: 0;
		z-index: 20;                                 /* dayGroup.sticky=10 보다 높게 */
		background-color: #fff;
		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);  /* 가로 스크롤 시 경계 시각화 */
	}
	.MonthState .itemRight .dayGroup {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;                /* dayGroup 자체는 100% — 셀이 고정 폭으로 넘쳐 가로 스크롤 트리거 */
		min-width: 100%;
		min-height: 5.4rem;
		align-items: stretch;
	}
	.MonthState .itemRight { overflow: visible; min-width: 0; }
	/* dayGroup 100%이라 25일 이후 셀이 부모를 넘어 border-top이 잘림 → 셀 단위로 border-top 부여 */
	.MonthState .itemRight .dayGroup.sticky {
		border-top: 0 !important;
	}
	.MonthState .itemRight .dayGroup.sticky .day {
		border-top: 0.2rem solid rgba(0, 0, 0, 0.5);
	}
	.MonthState .itemRight .dayGroup .day {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 5.4rem;
	}
	.MonthState .itemLeft .titTd.sticky,
	.MonthState .itemRight .dayGroup.sticky { min-height: 5.4rem; }
	.MonthState::-webkit-scrollbar { height: 0.6rem; }
	.MonthState::-webkit-scrollbar-thumb { background: #cdbf9b; border-radius: 1rem; }
	.MonthState::-webkit-scrollbar-track { background: #efece2; border-radius: 1rem; }
	.MonthState .dayGroup.day28 .day,
	.MonthState .dayGroup.day29 .day,
	.MonthState .dayGroup.day30 .day,
	.MonthState .dayGroup.day31 .day {
		flex: 0 0 4rem;
		width: 4rem !important;
		min-width: 4rem;
		padding: 1.2rem 0;
	}
	.MonthState .titTd {
		font-size: 1.4rem;
		padding: 1.2rem 1rem;
		height: auto;
		min-height: 5.4rem;
	}
	.MonthState .sticky .dayGroup .day { font-size: 1.3rem; }
	.MonthState .dayGroup .day { font-size: 1.2rem; }
	.MonthState .itemRight::-webkit-scrollbar { height: 0.6rem; }
	.MonthState .itemRight::-webkit-scrollbar-thumb {
		background: #cdbf9b; border-radius: 1rem;
	}
	.MonthState .itemRight::-webkit-scrollbar-track {
		background: #efece2; border-radius: 1rem;
	}
}


/* =====================================================
   16. RESPONSIVE - max-width: 1023px (Tablet)
   ===================================================== */
@media only screen and (max-width: 1023px) {
    #header {
        height: 11.4rem;
        margin-bottom: -15.6rem;
    }
    #topMenu {
        padding: 0;
    }
	#topMenu .item {
		display: flex; justify-content: center;
		position: absolute; top: -4.2rem; left: 0;
		width: 100%;
		padding: 0 1rem;
		background-color: brown;
	}
	#topMenu .item li { height: 4.2rem; }
	#topMenu .item li:nth-child(5) { display: block; }
	#topMenu .item li a {
		padding: 0 0.7rem;
		font-size: 1.4rem; line-height: 4.2rem;
	}
	#topMenu .item li a::before { top: 2rem; }
	#topMenu .item li .snsIcon { width: 4.5rem; background-size: 2.7rem; }
	#topMenu .item li .snsIcon.three { margin-left: 1rem; }

	#topMenu .inner1.flex {
        margin-top: 4.2rem;
		position: relative;
		height: 11.4rem;
		overflow: visible;
	}
	#topMenu .slogan { width: 12rem; height: 4.8rem; }
	#topMenu .logo { width: 16.47rem; height: 5.04rem; }
	#topMenu .logo img { width: 100%; }

	.mainSlide .swiper-slide { height: 53.5rem; }
	.mainSlide .swiper-slide .tit img { max-width: 34rem; width: 80%; }
	.mainSlide .slideCon .bnt { bottom: 9rem; }

	#mainSearch { padding: 0 1rem; }
	#mainSearch .inner3 {
		margin-top: -7rem;
		background-size: calc(100% / 4);
	}
	#mainSearch .searchDiv:nth-child(1) {
		width: 100%;
		background-color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	#mainSearch .padding .k-combobox .k-input { width: 100%; }
	#mainSearch .padding,
	#mainSearch .searchDiv .brown.bnt { padding: 1rem 1.5rem; }
	#mainSearch .padding h5 {
		padding-left: 0;
		font-size: 1.7rem; line-height: 140%;
	}
	#mainSearch .padding p.redTxt { padding-left: 0; }
	#mainSearch .searchDiv { width: calc(100% / 4); }
	.eventSlide .item dt a { font-size: 1.9rem; }

	#news, footer { padding: 6rem 0; }
	#news .notice { margin-bottom: 6rem; }
	#news .tit {
		padding-bottom: 3rem; margin-bottom: 3rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	}
	.footerMenu { margin-bottom: 3rem; }
	footer .info {
		padding-bottom: 3rem; margin-bottom: 3rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	#telPhone {
		margin-top: -8rem;
		padding: 10rem 0 3rem 0;
	}
    #telPhone .inner3 {
        padding: 0 1rem;
    }
	#telPhone .inner3 .telWrap .item { padding: 2rem; }
	#news .notice .conT,
	#telPhone .inner3 .telWrap .item span.tit { font-size: 1.6rem; }
	#telPhone .inner3 .telWrap .item span.con { font-size: 1.3rem; }
	#telPhone .inner3 .telWrap .item span.telTxt { font-size: 2rem; }

	/* SUB PAGE — 1023 이하 */
	#subBody .subBg { padding-top: 24rem; background-size: cover; }
	#subBody .subBg .greeting {
		width: 100%; max-width: 100%;
		padding: 4rem 2rem;
	}
	#subBody .flex.two::before { display: none; }
	#subBody .flex.two .item { width: 100%; margin-bottom: 4rem; }
	#subBody .flex.two .item:last-child { margin-bottom: 0; }
    
    #subBody .subBg {
        padding-top: 0rem;
    }
    #subBody .inner2 + .brownBg {
        margin-top: 6rem;
    }
    
	/* brwonBg / whBg — 1023 이하 세로 스택 */
	.brwonBg, .whBg { padding: 6rem 2rem; }
	.brwonBg .inner2 .flex,
	.whBg .inner2 .flex { flex-direction: column; gap: 0; }
	/* conWrap/imgWrap 상하 붙음 방지 — 인접 형제 여백(gap 폴백, 모든 환경 보장) */
	.brwonBg .inner2 .flex > * + *,
	.whBg .inner2 .flex > * + * { margin-top: 4rem; }
	.conWrap, .imgWrap { width: 100%; }

	/* bodyWrap — 1023 이하 세로 스택 */
	.bodyWrap { margin-bottom: 6rem; padding: 0 2rem; }
	.bodyWrap.flex { flex-direction: column; gap: 2.5rem; }
	.bodyWrap .titWrap,
	.bodyWrap.flex .conWrap { width: 100%; }
	.bodyWrap .titWrap h3,
	.bodyWrap .titWrap p { width: 100%; }
	.bodyWrap .Wrap50 { width: 100%; margin-bottom: 1rem; }
	.bodyWrap .Wrap50:last-child { margin-bottom: 0; }

	/* Heritage — 1023 이하 2열 */
	.Heritage.flex {
		padding: 0 2rem;
		gap: 4rem 2rem;
	}
	.Heritage .item {
		width: calc((100% - 2rem) / 2);
		margin: 0;
	}

	/* festivalInfo — 1023 이하 1열 */
	.bodyWrap .flex:has(> .festivalInfo) { gap: 1.5rem; }
	.bodyWrap .festivalInfo { width: 100%; margin: 0; }

	/* dot 리스트 — 1023 이하 글자 축소 */
	ul.dot > li { font-size: 1.5rem; line-height: 165%; }
	ul.dot > li:before { top: 1.1rem; }

	/* galleryWrap — 1023 이하 2열 */
	#subBody .galleryWrap .imageBox,
	.bodyWrap .galleryWrap .imageBox { width: calc((100% - 1rem) / 2) !important; }
	/* galleryWrap 메이슨리 — 1023 이하 2열 */
	#subBody .galleryWrap.flex.autoH { column-count: 2; }
	#subBody .galleryWrap.flex.autoH .imageBox { width: 100% !important; }

	/* 외암마을체험 — 1023 이하: 안내바 2열, 카드 2열 */
	.expWrap .item { width: 50%; }
	.expWrap .item:nth-child(2)::before { display: none; }
	.roomList.expList.flex { gap: 2rem; }
	.roomList.expList .item { width: calc((100% - 2rem) / 2); }
	.roomList.expList .item dt { height: 20rem; }

	/* 온라인예약 — 1023 이하: 검색폼 세로, 객실 2열 */
	#bookingSearch form { flex-direction: column; }
	#bookingSearch .searchDiv,
	#bookingSearch .searchDiv:first-child,
	#bookingSearch .searchDiv:last-child {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	#bookingSearch .searchDiv:last-child { border-bottom: 0; }
	#bookingSearch .searchDiv .brown.bnt { min-height: 6rem; }
	.roomList.flex:not(.expList) { gap: 2rem; }
	.roomList.flex:not(.expList) .item { width: calc((100% - 2rem) / 2); }
	.roomList.flex:not(.expList) .item dt { height: 20rem; }
	.roomList.flex.extRoom .item { width: calc((100% - 2rem) / 2); }

	/* 외암마을체험 상세 — 1023 이하 */
	#expView .expBody .prepaRation.flex { flex-direction: column; gap: 3rem; }
	#expView .expBody .prepaRation dt,
	#expView .expBody .prepaRation dd { width: 100%; }
	#expView .expBody .prepaRation dd .order li { width: 100%; }
	#expView .expBody .prepaRation dd .order li::after { display: none; }
	#expView .expBody .expinfo .item { width: calc((100% - 4rem) / 3); }
	#expView .expBody .expGallery .item { width: calc((100% - 3rem) / 3); }
	/* 한복대여 메이슨리 — 1023 이하 3열 */
	#expView .expBody .expGallery.flex.autoH { column-count: 2; }
	#expView .expBody .expGallery.flex.autoH .item { width: 100%; }

	/* 체험비안내 — 1023 이하 */
	#expPrice > .flex { gap: 1.5rem; }
	#expPrice .expItem { width: 100%; }

	/* 오시는길 — 1023 이하 */
	.blockWrap #map iframe { height: 36rem; }
	.blockWrap .mapInfo { width: 100%; }
	.blockWrap .trafficWrap .item.tit { display: none; }
	.blockWrap .trafficWrap .item { flex-direction: column; }
	.blockWrap .trafficWrap .item dt,
	.blockWrap .trafficWrap .item dd { width: 100%; }
	.blockWrap .trafficWrap .item dt { padding: 2rem; }
	.blockWrap .trafficWrap .item dt > div { flex-direction: row; gap: 1.2rem; }
	.blockWrap .trafficWrap .item dt .icon { width: 4.2rem; height: 4.2rem; font-size: 2.2rem; margin: 0; }
	.blockWrap .trafficWrap .item dd { padding: 2.5rem 2rem; border-left: 0; border-top: 1px solid rgba(0,0,0,0.08); }
    
    .bgImg {
        height: 48rem;
        margin-bottom: 6rem;
    }
    .pageTit {
        margin-bottom: 6rem;
    }
    .flex .conWrap {
        width: 100%;
    }
    .flex .conWrap p + h5,
    .flex .conWrap + .conWrap,
    .conWrap + .checkerBoard {
        margin-top: 6rem;
    }

	/* ===== 예약하기(11-01-02) — 1023px 이하: 예약선택 폼 하단으로 ===== */
	.reserve {
		display: flex;
		flex-direction: column;
	}
	.reserve .left {
		order: 1;
		width: 100% !important;
		float: none;
	}
	.reserve .right {
		order: 2;
		width: 100% !important;
		float: none;
	}
	/* 예약선택(.right)이 하단으로 내려가면 .left 내부 예약신청하기 중복 → 숨김 */
	.reserve .left .leftSubmit { display: none !important; }


	/* 범례(예약가능 등) 태블릿 — 정렬+간격 */
	.stateType.flex {
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.2rem 2.4rem;
		margin: 2rem 0;
	}
	.stateType li {
		font-size: 1.5rem;
		margin: 0 !important;
		padding-left: 2.6rem;
	}
	.MonthState + .flex {
		margin-bottom: 4rem;
		padding-top: 1.2rem;
	}
}


/* =====================================================
   17. RESPONSIVE - max-width: 767px (Mobile)
   ===================================================== */
@media only screen and (max-width: 767px) {
	body h1 { font-size: 3rem; }
	body h2 { font-size: 2.6rem; }
	body h3 { font-size: 2.3rem; }
	body h4 { font-size: 2.1rem; }
	body h5 { font-size: 1.9rem; }
	body h6 { font-size: 1.7rem; }
	body p, body li, body dt, body a { font-size: 1.5rem; }


    #header {
        height: 9rem;
        margin-bottom: -9rem;
    }
	#topMenu .inner1.flex { height: 9rem; padding: 0;}
	#topMenu .logo { width: 12.81rem; height: 3.92rem; }
	#topMenu .slogan { display: none; }
    

	/* 상단 메뉴 좁은 화면에서 가로 오버플로 방지 */
	#topMenu .item {
		padding: 0 0.5rem;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#topMenu .item::-webkit-scrollbar { display: none; }
	#topMenu .item li { flex: 0 0 auto; }
	#topMenu .item li a {
		padding: 0 0.5rem;
		font-size: 1.2rem;
		white-space: nowrap;
	}
	#topMenu .item li a::before { display: none; }
	#topMenu .item li .snsIcon { width: 3.5rem; background-size: 2.2rem; }
	#topMenu .item li .snsIcon.three { margin-left: 0.5rem; }

	.mainSlide .swiper-slide { height: 52rem; }
	.mainSlide .swiper-slide .tit img { max-width: 34rem; width: 100%; }
	.mainSlide .slideCon .bnt { bottom: 3rem; }

	#mainSearch { padding: 2rem; background-color: #f0ece1; }
	#mainSearch .inner3 {
		position: relative;
		margin-top: 0;
		background-image: none;
		border-radius: 0.8rem;
	}
	#mainSearch .searchDiv { width: 100%; }
	#mainSearch .searchDiv:nth-child(1) {
		padding: 1rem 0;
		border-bottom: none;
	}
	#mainSearch .padding h5 { font-size: 2rem; }
	#mainSearch .padding,
	#mainSearch .searchDiv .brown.bnt { padding: 0.75rem 2rem; }
	#mainSearch .padding .k-input { font-size: 1.7rem; }
	#mainSearch .searchDiv .brown.bnt {
		padding: 1.5rem 2rem;
		font-size: 1.8rem; line-height: 150%;
		border-radius: 0 0 0.8rem 0.8rem;
        min-height: 6.2rem;
	}
	#event {
		margin-top: 0;
		padding: 2rem 0 4rem 0;
	}
	#event h3 {
		margin-bottom: 2rem;
		font-size: 2rem; text-align: left;
	}
	.eventSlide .item dt a { font-size: 1.7rem; }

	#news, footer { padding: 4rem 0; }
	#news .notice { margin-bottom: 4rem; }
	#news .tit {
		padding-bottom: 2rem; margin-bottom: 2rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	#news .notice .type { width: 5.5rem; font-size: 1.5rem; }
	#news .notice .conT { width: calc(100% - 6.5rem); font-size: 1.6rem; }
	#news .notice .date { display: none; }
	#news .notice li { margin-bottom: 1.2rem; }
	#news .festival .item {
		width: 100%; height: auto; min-height: 20rem;
		padding: 3rem;
	}
	#news .festival .item + .item { margin-top: 2rem; }
	#news .festival .item p { font-size: 1.7rem; }
	#news .festival .item:first-child h2 {
		margin-bottom: 0.5rem;
		font-size: 2.7rem;
	}

	#banner .bannerWrap h6 {
		position: relative;
		width: 18rem; line-height: 2.9rem;
	}
	#banner .bannerSlide { width: calc(100% - 18rem); }

	.footerMenu {
		padding: 4rem 0 0 0;
		margin-bottom: 2rem;
	}
	footer .info {
		padding-bottom: 2rem; margin-bottom: 2rem;
	}
	footer { padding-bottom: 3rem; }
	.footerMenu a:first-child { padding-left: 0; }
	footer .info .infoP {
		display: block;
		padding-right: 0; margin-right: 0;
	}
	footer .info .infoP::before { display: none; }
	footer .copy .item {
		position: relative;
		width: auto;
		margin-top: 1rem;
	}
	/* 모바일 ≤767 — TOP 버튼은 모든 페이지에서 미노출 */
	.subPage #topLink,
	.subPage #topLink.show { display: none !important; }
	footer .copy p {
		padding: 0;
		font-size: 1.5rem; line-height: 140%;
	}

	#telPhone {
		margin-top: 0;
		padding: 0 2rem 3rem 2rem;
	}
	#telPhone .inner3 { padding: 0; }
	#telPhone .inner3 .telWrap { padding: 1rem 0; gap: 0.8rem;}
	#telPhone .inner3 .telWrap .item {
		width: calc((100% - 0.8rem) / 2);
		padding: 1rem;
	}
	#telPhone .inner3 .telWrap .item span.tit { font-size: 1.4rem; }
	#telPhone .inner3 .telWrap .item span.con { font-size: 1.2rem; }
	#telPhone .inner3 .telWrap .item span.telTxt { font-size: 2rem; }

	/* SUB PAGE — 767 이하 */
	#subTit { padding: 2rem 0 0 0; }
	#subTit .breadcrumb { margin-bottom: 2.5rem; }
	#subTit h1 { margin-bottom: 3rem; }
	#subBody .subBg .greeting {
		margin: 0 auto 4rem auto;
		padding: 3rem 2rem;
	}
    #subBody .subBg .greeting h4 {
        word-break: keep-all;
        padding-bottom: 2rem;
        margin-bottom: 3rem;
    }
	#subBody .subBg .greeting p br { display: none; }
	#subBody .flex .ceoName { font-size: 3rem; letter-spacing: 0.5rem; }
    #subBody .flex.two .item {
        margin-bottom: 0;
    }
	#subBody .flex.two .item .txtRight { margin-bottom: 1rem; }
    #subBody .inner2 + .brownBg {
        margin-top: 3.6rem;
    }
    #subBody .flex .item p,
    .conWrap p {
        margin-bottom: 2.4rem;
    }
    #subBody .flex .item p:last-child,
    .conWrap p:last-child {
        margin-bottom: 0 !important;
    }
	.brownBg { padding: 3rem 0 !important; }
	.brownBg:last-child { padding-bottom: 3rem !important; }
	.brownBg .inner2.txtCenter p {
		padding: 0 2rem;
		margin-bottom: 1rem;
	}
	.movieWrap { margin-bottom: 2rem; }
	.modal.movie_wnd iframe { max-height: 40vh; }

	/* 조직도 — 767 이하 */
	.organization { padding: 10rem 0; }
	.organization .inner4 { max-width: 38rem; padding: 0 2rem; }
	.orgWrap .line.one,
	.orgWrap .line.two,
	.orgWrap .line.three,
	.orgWrap .line.four { padding-bottom: 3rem; }
	.orgWrap .line.five { padding-top: 3rem; }

	/* line.one~four (알약) */
	.orgWrap .line.one .item,
	.orgWrap .line.two .item,
	.orgWrap .line.three .item,
	.orgWrap .line.four .item {
		width: 14rem; height: 5.5rem;
		font-size: 2rem;
		border-radius: 3rem;
	}
	.orgWrap .line.two .item,
	.orgWrap .line.three .item,
	.orgWrap .line.four .item { font-size: 1.7rem; }

	/* line.five — 3열 2행 그리드로 변경하여 간격 확보 */
	.orgWrap .line.five {
		padding-top: 4rem;     /* 상단 연결선 자리 */
	}
	.orgWrap .line.five.flex {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem 1rem;       /* 행간 1.5rem / 열간 1rem */
		justify-content: stretch;
	}
	.orgWrap .line.five .item {
		width: 100%; height: auto;
		min-height: 7rem;
		margin: 0;
		padding: 1rem;
		font-size: 1.4rem; line-height: 130%; font-weight: 700;
		word-break: keep-all;
		border-radius: 0.8rem;
		background-color: rgba(255, 255, 255, 0.95);
	}

	/* 메인 세로선: 보존회 → 사무국 */
	.orgWrap::before { top: 5.5rem; height: 28.5rem; }
	.orgWrap .line.three::before { top: 3rem; }

	/* line.five 그리드 연결선: 가로선 + 각 컬럼 상단 짧은 세로선 */
	.orgWrap .line.five::before {
		display: block !important;
		top: 0;
		left: calc((100% / 6) - 4px) ;              /* 첫 컬럼 중앙 */
		width: calc(((100% / 6) * 4) + 8px);       /* 첫~세번째 컬럼 중앙까지 */
		height: 1px;
	}
	/* 상단 3개(첫째 행) 각 컬럼에서 위로 짧은 세로선 — padding-top(4rem)에 맞춤 */
	.orgWrap .line.five .item:nth-child(-n+3)::before {
		display: block !important;
		top: -4rem; left: 50%;
		width: 1px; height: 4rem;
	}
	/* 하단 3개(둘째 행)는 연결선 없음 */
	.orgWrap .line.five .item:nth-child(n+4)::before { display: none; }
    
    .brwonBg, .whBg {
        padding: 3.6rem 0;
    }
    .tit.bar {
        padding-bottom: 1.5rem;
        margin-bottom: 2.4rem;
    }
    .bgImg {
        height: 42rem;
        margin-bottom: 3.6rem;
    }
    .pageTit,
    .bodyWrap,
    .bodyWrap .flex:has(> .festivalInfo){
        margin-bottom: 3.6rem;
    }
    .flex .conWrap p + h5,
    .flex .conWrap + .conWrap,
    .conWrap + .checkerBoard,
    .flex .conWrap h5,
    .bodyWrap .conWrap h5 + ul.dot + h5 {
        margin-top: 3.6rem;
    }

    /* Heritage — 767 이하 1열 */
    .Heritage.flex { gap: 3rem; margin-bottom: 3.6rem; }
    .Heritage .item {
        width: 100%;
        margin: 0;
    }
    .Heritage .item + .item {
        margin-top: 2.4rem;
    }

    /* galleryWrap — 767 이하 1열 */
    #subBody .galleryWrap .imageBox,
    .bodyWrap .galleryWrap .imageBox { width: 100% !important; }
    /* galleryWrap 메이슨리 — 767 이하 2열, 좌우·상하 1.2rem */
    #subBody .galleryWrap.flex.autoH { column-count: 2; column-gap: 1.2rem; }
    #subBody .galleryWrap.flex.autoH .imageBox { width: 100% !important; margin: 0 0 1.2rem; }

    /* 외암마을체험 — 767 이하: 안내바 1열, 카드 1열 */
    .expWrap .item { width: 100%; padding: 3rem 2rem; }
    .expWrap .item::before { display: none !important; }
    .expWrap .item:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.1); }
    .itemAlign { text-align: left; }
    .itemAlign a { margin: 0 1.5rem 0 0; }
    .roomList.expList .item { width: 100%; }
    .roomList.expList .item dt { height: 24rem; }

    /* 온라인예약 — 767 이하: 객실 1열 */
    .roomList.flex:not(.expList) .item { width: 100%; }
    .roomList.flex:not(.expList) .item dt { height: 24rem; }
    .roomList.flex.extRoom .item { width: 100%; }
    /* 객실 모달 — 767 이하 세로 스택 */
    .ui.modal.roomModal .roomModalBody { flex-direction: column; gap: 1.5rem; }
    .ui.modal.roomModal .roomModalImg { width: 100%; }

    /* 외암마을체험 상세 — 767 이하 */
    #expView .expBody .expinfo .item { width: calc((100% - 2rem) / 2); }
    #expView .expBody .expGallery .item { width: calc((100% - 1.5rem) / 2); }
    #expView .expBody .expGallery .item .image-link { height: 16rem; }
    /* 한복대여 메이슨리 — 767 이하 2열, 좌우·상하 1.2rem */
    #expView .expBody .expGallery.flex.autoH { column-count: 2; column-gap: 1.2rem; }
    #expView .expBody .expGallery.flex.autoH .item { width: 100%; margin: 0 0 1.2rem; }
    #expView .expBody .expGallery.flex.autoH .item .image-link { height: auto; }

    /* 체험비안내 — 767 이하 */
    #expPrice table.expTable th,
    #expPrice table.expTable td { padding: 1rem; font-size: 1.4rem; }
    .Heritage .item h5 {
        margin-bottom: 1.2rem !important;
    }
    #subBody .conWrap + .galleryWrap.flex.autoH {
        margin-top: 2.4rem;
    }

    .Heritage .item ul.dot {
        margin: 0 0 1.2rem;
    }

	/* ===== 예약하기(11-01-02) 모바일 — 예약선택 하단 배치 + 깔끔한 스택 ===== */
	.reserve { display: flex; flex-direction: column; }
	.reserve .left {
		order: 1;
		width: 100% !important;
		float: none;
	}
	.reserve .right {
		order: 2;                       /* 예약선택은 폼 하단으로 */
		display: flex;
		flex-wrap: wrap;
		width: 100% !important;
		float: none;
		margin: 2rem 0 4rem;
		padding: 0;
		background-color: transparent;
		border: none;
		border-radius: 0;
	}
	.reserve .right h5 {
		width: 100%;
		margin: 0 0 1.4rem;
		padding: 0;
		background-color: transparent;
		color: #333;
		font-size: 2rem;
		font-weight: 700;
	}
	.reserve .right p {
		display: block;
		flex: 1 1 100%;
		width: 100% !important;
		min-width: 0;
		padding: 0 !important;
		margin: 0 0 1.4rem !important;
		text-align: left;
		border: none !important;
	}
	.reserve .right p + p { border-left: none !important; }
	.reserve .right p .tit {
		display: block;
		padding: 0.2rem 0 !important;
		background-color: transparent !important;
		color: #888 !important;
		font-size: 1.4rem !important;
		font-weight: 500 !important;
		border: none !important;
		text-align: left;
	}
	.reserve .right p .con {
		display: block;
		padding: 0 !important;
		font-size: 1.8rem !important;
		color: #333;
	}
	.reserve .right hr {
		width: 100%;
		display: block;
		margin: 1.6rem 0;
	}
	.reserve .right h6,
	.reserve .right .price,
	.reserve .right .priceNote {
		width: 100%;
		padding: 0;
		text-align: left;
	}
	.reserve .right .price,
	.reserve .right .price.priceDual {
		font-size: 2.8rem;
		margin-bottom: 1.6rem;
	}
	.reserve .right .price.priceDual { align-items: flex-start; }
	.reserve .right .price.priceDual .pWeekday { font-size: 2.4rem; }
	.reserve .right .priceNote { margin-bottom: 2rem; }
	.reserve .right .ui.button {
		display: block;
		width: 100%;
		margin: 1rem 0 1.6rem;
	}
	.inputWrap li { margin-bottom: 3rem; }
	.reserve .terms { padding: 2rem; height: 20rem; }

	/* ===== 월별예약현황(11-02) — 모바일(≤767): 좌 폭 축소·고정 셀 폭 ===== */
	.MonthState .itemLeft { flex: 0 0 11rem; width: 11rem; }
	.MonthState .itemRight { max-width: none; }
	.MonthState .itemRight .dayGroup { width: max-content; }
	.MonthState .dayGroup.day28 .day,
	.MonthState .dayGroup.day29 .day,
	.MonthState .dayGroup.day30 .day,
	.MonthState .dayGroup.day31 .day {
		flex: 0 0 2.6rem;
		width: 2.6rem !important;
		min-width: 2.6rem;
		padding: 1rem 0;
	}
	.MonthState .titTd {
		font-size: 1.3rem;
		padding: 1rem 0.8rem;
		min-height: 4.6rem;
	}
	.MonthState .itemRight .dayGroup { min-height: 4.6rem; align-items: stretch; }
	.MonthState .itemRight .dayGroup .day { min-height: 4.6rem; }
	.MonthState .itemLeft .titTd.sticky,
	.MonthState .itemRight .dayGroup.sticky { min-height: 4.6rem; }
	.MonthState .sticky .dayGroup .day { font-size: 1.2rem; }
	.MonthState .dayGroup .day { font-size: 1.1rem; }
	/* 일자 셀 내부 상태 마커(sType) 모바일 크기 축소 */
	.MonthState .dayGroup .day .sType {
		width: 1.4rem;
		height: 1.4rem;
		line-height: 1.4rem;
		font-size: 1rem !important;
		border-radius: 0.25rem;
	}

	/* 범례(예약가능/입금대기/예약완료/전화문의/공사중) 모바일 — 정렬+간격 + 사이즈 축소 */
	.stateType.flex {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.8rem 1.4rem;
		margin: 1.6rem 0;
		padding: 0.8rem 0;
	}
	.stateType li {
		font-size: 1.15rem;
		margin: 0 !important;
		padding-left: 2rem;
		line-height: 1.7rem;
	}
	.stateType li .sType {
		left: 0;
		top: 0;
		width: 1.7rem;
		height: 1.7rem;
		font-size: 1.1rem;
		line-height: 1.7rem;
	}
	.MonthState + .flex {
		margin-bottom: 4rem;
		padding-top: 1rem;
	}
}


/* =====================================================
   온라인예약 객실 상세 모달 (roomView) — 구 사이트 동일 스타일
   ===================================================== */
/* region1 */
.ui.modal.roomView {
	width: 100rem;
	max-width: 94vw;
	border-radius: 2rem;
	background-color: #fff;
}
.ui.modal.roomView .header,
.ui.modal.roomView .con,
.ui.modal.roomView .footer {
	position: relative;
	padding: 2rem 3rem;
}
/* Semantic UI 기본 .ui.modal>.header 하단 보더 제거 */
.ui.modal.roomView > .header {
	border-bottom: 0 !important;
	box-shadow: none !important;
}
/*.ui.modal.roomView .con {
	overflow-y: scroll;
}*/
.ui.modal.roomView .mClose {
	position: absolute;
	top: 1.6rem;
	right: 2.4rem;
	width: 4rem;
	height: 4rem;
	border: 1px solid #d8d2c0;
	border-radius: 50%;
	background: #fff none !important;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.ui.modal.roomView .mClose:hover {
	background: #224e42 !important;
	border-color: #224e42;
}
.ui.modal.roomView .mClose::before,
.ui.modal.roomView .mClose::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.8rem;
	height: 2px;
	background: #553723;
}
.ui.modal.roomView .mClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.ui.modal.roomView .mClose::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ui.modal.roomView .mClose:hover::before,
.ui.modal.roomView .mClose:hover::after { background: #fff; }
.ui.modal.roomView .roomTab {
	overflow: hidden;
	width: 100%;
	border-left: 1px solid #d7d7d7;
	margin-bottom: 3rem;
}
.ui.modal.roomView .roomTab a {
	width: 50%;
	line-height: 4.4rem;
	text-align: center;
	display: block;
	float: left;
	border: 1px solid #d7d7d7;
	color: #333;
	white-space: nowrap;
	margin: 0px -1px;
	background-color: #fff;
}
.ui.modal.roomView .roomTab a.on {
	color: #fff;
	background-color: #553723;
	font-weight: 500;
}

.ui.modal.roomView .footer {
	padding-top: 1.6rem;
	padding-bottom: 2.4rem;
}
.ui.modal.roomView .footer .ui.button {
	display: inline-block;
	min-width: 18rem;
	padding: 1.4rem 3.2rem !important;
	font-size: 1.6rem;
	font-weight: 600;
	color: #553723 !important;
	background-color: #ece8dc !important;
	border: 1px solid #ddd6c4 !important;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.ui.modal.roomView .footer .ui.button:hover {
	background-color: #553723 !important;
	color: #fff !important;
	border-color: #553723 !important;
}
.ui.modal.roomView .gallery {
	position: relative;
	overflow: hidden;
	width: 100%;
	height:  52rem;
	margin: 5rem auto 0;
}
.ui.modal.roomView .calendar + form,
.ui.modal.roomView .calendar {
	display: block;
	margin-bottom: 0;
}
.ui.modal.roomView form[name="fResvr"] {
	display: block;
	height: 0;
	overflow: hidden;
}
.ui.modal.roomView .gallery .swiper-slide {
	width: 100%;
	overflow: hidden;
}
.ui.modal.roomView .gallerySwiper {
	width: 100%;
	height: 8rem !important;
	box-sizing: border-box;
	margin: 0rem auto 4rem auto;

}
.ui.modal.roomView .gallerySwiper .swiper-slide {
	height: 100%;
	opacity: 0.4;
}
.ui.modal.roomView .gallerySwiper .swiper-slide-thumb-active {
	opacity: 1;
}
.ui.modal.roomView .swiper-slide img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}
.ui.modal.roomView .swiper-button-next,
.ui.modal.roomView .swiper-button-prev {
	width: 4.4rem;
	height: 6.4rem;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
	transition: opacity 0.15s;
}
.ui.modal.roomView .swiper-button-next:hover,
.ui.modal.roomView .swiper-button-prev:hover {
	opacity: 0.8;
}
/* Swiper 기본 파란 화살표(::after) 숨김 — 흰색 아이콘 이미지만 사용 */
.ui.modal.roomView .swiper-button-next::after,
.ui.modal.roomView .swiper-button-prev::after {
	display: none !important;
}
.ui.modal.roomView .swiper-button-next {
	background-image: url(../../main/images/white_next_icon.png);
}
.ui.modal.roomView .swiper-button-prev {
	background-image: url(../../main/images/white_pre_icon.png);
}
.ui.modal.roomView h5,
.terms .conList .roomItem h5 {
	display: flex;
	align-items: center;
	font-size: 2.2rem;
	margin-bottom: 1rem;
	line-height: 1.3;
}
.ui.modal.roomView p,
.terms .conList .roomItem p {
	font-weight: normal;
	color: #787878;
	line-height: 160%;
	margin-bottom: 1rem;	
}
.ui.modal.roomView ul.dot,
.terms .conList .roomItem ul.dot {
	margin-bottom: 4rem;
	padding-left: 4rem;
}
.ui.modal.roomView ul.dot li,
.terms .conList .roomItem ul.dot li  {
	display: block;
	font-size: 1.6rem;
	line-height: 140%;
	margin-bottom: 0.7rem;	
}
.ui.modal.roomView ul.dot .tit,
.terms .conList .roomItem ul.dot .tit {
	display: inline-block;
	width: 7.5rem;
	font-weight: 500;
	color: #101010;	
}
.ui.modal.roomView table,
.terms .conList .roomItem table,
#subBody .inner3 #block table {
	width: 100%;
	margin-bottom: 4rem;
}
.ui.modal.roomView table th,
.ui.modal.roomView table td,
.terms .conList .roomItem table th,
.terms .conList .roomItem table td,
#subBody .inner3 #block table th,
#subBody .inner3 #block table td {
	font-size: 1.6rem;
	line-height: 140%;
	padding: 1.2rem;
	text-align: center;
	background-color: #f7f7f7;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
#subBody .inner3 #block table th {
	background-color: #999;
	color: #fff !important;
}
#subBody .inner3 #block table td {
	background-color: #fff;
	color: #dd3c10 !important;
    font-weight: 700;
    font-size: 1.7rem;
}
.ui.modal.roomView table.tdLeft_01 td:nth-child(1),
.ui.modal.roomView table.tdLeft_02 td:nth-child(2),
.ui.modal.roomView table.tdLeft_03 td:nth-child(3),
.terms .conList .roomItem table.tdLeft_01 td:nth-child(1),
.terms .conList .roomItem table.tdLeft_02 td:nth-child(2),
.terms .conList .roomItem table.tdLeft_03 td:nth-child(3) {
	text-align: left;	
}
.ui.modal.roomView table td,
.terms .conList .roomItem table td {
	background-color: transparent;	
	border-top: none;
	word-break: keep-all;
	font-weight: normal;
}
.ui.modal.roomView .smTxt {
	color: #787878;
	font-size: 1.6rem;
	font-weight: normal;	
}
.ui.modal.roomView table td li {
	word-break: keep-all;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 160%;
}
.ui.modal.roomView table td li .block {
	display: block;
	margin-bottom: 1rem;	
}
.ui.modal.roomView .underline {
	text-decoration: underline;
}

/***** 예약자정보 등록 CSS ******/

/* region2 */
.monCon {
	margin-bottom: 6rem;	
}
.monCon .mbtn {
	display: inline-block;
	font-size: 1.9rem;
	line-height: 4.2rem;
	color: #999;
	margin: 0rem 2rem;
	background-repeat: no-repeat;
	cursor: pointer;
}
/* 이전달 비활성(오늘 월 이하로 이동 불가) */
.monCon .mbtn.off {
	opacity: 0.3;
	pointer-events: none;
	cursor: not-allowed;
}
.monCon #mBtnPre.mbtn,
.monCon #mBtnPre2.mbtn {
	padding-left: 3rem;
	background-image: url(../../main/images/arrow_prev.png);
	background-position: left center;
}
.monCon #mBtnNext.mbtn,
.monCon #mBtnNext2.mbtn {
	padding-right: 3rem;
	background-image: url(../../main/images/arrow_next.png);
	background-position: right center;
}
.monCon .dPick {
	display: inline-block;
}

.dPick .k-datepicker .k-picker-wrap {
	background-color: #fff;
}

.dPick .k-datepicker {
	width: 25.5rem;
	height: 4.2rem;
	vertical-align: -0.2rem;
}
.dPick .k-datepicker .k-picker-wrap {
	border: none;	
}
.dPick .k-datepicker .k-select  {
	position: relative;
    font-size: 1.6rem;
	font-weight: 500;
	color: #787878;
	border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: transparent;
	border-radius: 0.5rem;
	width: 8rem;
	height: 4.2rem;
	line-height: 4.2rem;
	background-image: url(../../main/images/datePicker_icon.png);
	background-position: 5rem center;
	background-repeat: no-repeat;
}
.dPick .k-datepicker .k-select:before {
	content: "달력";
	position: absolute;
	font-size: 1.6rem;
	top: 0.1rem;
	left: 1rem;
	display: block;
}
/* Kendo 기본 달력 아이콘 숨김 (구 디자인 datePicker_icon 배경 + "달력" 텍스트만 사용) */
.dPick .k-datepicker .k-select .k-icon,
.dPick .k-datepicker .k-select .k-icon.k-i-calendar,
.dPick .k-datepicker .k-select .k-i-calendar { display: none !important; }

.dPick .k-list .k-item.k-state-selected,
.dPick .k-list-optionlabel.k-state-selected {
    color: #fff;
    background-color: #3b92e5;
}
.dPick .k-datepicker .k-input {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.1rem;
	color: #101010;
	height: 4.2rem;
	line-height: 4.2rem;
	border: none;
	padding: 0.5rem 1rem 0.5rem 0rem;
	cursor: pointer;
}
.dPick .k-datepicker:hover,
.dPick .k-datepicker>.k-state-focused {
	border: none;
	outline: 0;
	box-shadow: none;
}
.stateType li {
	position: relative;
	font-size: 1.7rem;
	font-weight: normal;
	color: #333;
	margin-right: 3rem;
	padding-left: 2.7rem;
}
.stateType li:last-child {
	margin-right: 0rem;
}
.stateType li .sType {
	position: absolute;
	left: 0rem;
	top: 0rem;
}
.sType {
	position: relative;
	display: block;
	font-size: 1.5rem;
	line-height: 2.3rem;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 0.3rem;
	text-align: center;
	font-weight: 700;
	overflow: hidden;
}
.sType:before {
	content: "예";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	color: #fff;
	width: 100%;
	height: 100%;
	background-color: #00aa3c;
}
.sType.two:before {
	content: "대";
	background-color: #003ca0;
}
.sType.three:before {
	content: "완";
	background-color: #c9c2b8;
}
.sType.four:before {
	content: "전";
	background-color: #af8d5d;
}
.sType.five:before {
	content: "공";
	background-color: #1a1a1a;
}

.MonthState + .flex {
	padding-top: 2rem;
	margin-bottom: 8rem;
	clear: both;
}
.MonthState {
	display: flex;
	align-items: flex-start;
	margin: 2rem 0rem;
	height: auto;
	/* 가로 스크롤은 모바일/태블릿 media에서만 적용 → PC에서는 sticky-top 정상 동작 */
}
.scroll .MonthState {
	width: 100%;
	height: auto;
}
/* 상하 스크롤 시 헤더 행(민박명/날짜) 고정 + 좌·우 행 높이 동일 */
.scroll .MonthState .sticky,
.MonthState .itemLeft .titTd.sticky,
.MonthState .itemRight .dayGroup.sticky {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: #f0ece1;
}
.MonthState .itemLeft .titTd.sticky {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6.1rem;
	padding-top: 0;
	padding-bottom: 0;
}
.MonthState .itemRight .dayGroup.sticky {
	align-items: stretch;            /* 셀이 행 높이를 꽉 채우게 */
	min-height: 6.1rem;
}
.MonthState .itemRight .dayGroup.sticky .day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;                    /* PC: 부모 행 높이 100% */
	min-height: 6.1rem;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* 좌우 스크롤 시 민박명(인실) 컬럼(.itemLeft) 좌측 고정
   (dayGroup.sticky=10 보다 높게 두어 가로 스크롤 시 우측 셀에 가려지지 않게) */
.MonthState .itemLeft {
	float: none;
	position: sticky;
	left: 0;
	z-index: 20;
	flex: 0 0 23rem;
	width: 23rem;
	background-color: #fff;
	border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.MonthState .itemLeft .titTd { background-color: #fff; }
.MonthState .itemLeft .titTd.sticky { z-index: 25; }
.MonthState .itemRight .dayGroup.sticky { z-index: 10; }
.MonthState .itemRight {
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	overflow: visible;
}
/* 가로 스크롤바 톤 */
.MonthState::-webkit-scrollbar { height: 0.6rem; }
.MonthState::-webkit-scrollbar-thumb { background: #cdbf9b; border-radius: 1rem; }
.MonthState::-webkit-scrollbar-track { background: #efece2; border-radius: 1rem; }
.MonthState .sticky {
	font-weight: 700;
	background-color: #f0ece1;
	border-top: 0.2rem solid rgba(0, 0, 0, 0.5);
}

.MonthState .titTd {
	font-size: 1.7rem;
	font-weight: 500;
	width: 100%;
	height: 6.1rem;
	border-right: 1px solid  rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid  rgba(0, 0, 0, 0.15);
	padding: 2rem;
}
.MonthState .dayGroup {
	width: 100%;
	height: 6.1rem;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	/* 하단 보더는 .day 셀 단위로 통일(평일/주말 일관) */
}
.MonthState .sticky .dayGroup .day {
	font-size: 1.7rem;
	font-weight: 500;
}
.MonthState .dayGroup .day.past {
	color: #999;
}
.MonthState .dayGroup .day.sat {
	background-color: #fcfbf9;
}
.MonthState .dayGroup .day.sun {
	background-color: #e4dfd5;
}
.MonthState .dayGroup .day {
	display: block;
	text-align: center;
	padding: 2rem 0rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);   /* 평일·주말 동일한 한 줄 */
}
.MonthState .dayGroup .day + .day {
	border-left: 1px solid  rgba(0, 0, 0, 0.15);
}
.MonthState .dayGroup .day .sType {
	margin: 0rem auto;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
}
.MonthState .dayGroup.day31 .day {
	width: calc(100% / 31);
}
.MonthState .dayGroup.day30 .day {
	width: calc(100% / 30);
}
.MonthState .dayGroup.day29 .day {
	width: calc(100% / 29);
}
.MonthState .dayGroup.day28 .day {
	width: calc(100% / 28);
}


/******** organization CSS ********/

/* region3 */
.ui.modal.roomView .con .roomItem {
	overflow: hidden;	
}
.ui.modal.roomView .con .roomItem table td {
	color: #dd3c10 !important;
	font-weight: 700;
	font-size: 1.7rem;
}

/* roomView 모달 — 7열 월간 캘린더 보정 */
.ui.modal.roomView .MonthState {
	margin-bottom: 0rem;
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 2.4rem;
	align-items: flex-start;
}
.ui.modal.roomView .MonthState .calMonth {
	flex: 1 1 50%;
	width: 50%;
	min-width: 0;
}
.ui.modal.roomView .MonthState .calMonthTit {
	margin: 0 0 1rem;
	padding: 0.7rem 0;
	background-color: #f3efe3;
	border-radius: 0.6rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: #224e42;
	text-align: center;
	letter-spacing: 0.02em;
}
@media (max-width: 767px) {
	/* 모바일: 2개월 좌우 가로 스크롤 (디자인 깨짐 방지) */
	.ui.modal.roomView .MonthState {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 1.6rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 1rem;
		scroll-snap-type: x mandatory;
	}
	.ui.modal.roomView .MonthState .calMonth {
		flex: 0 0 auto;
		width: 30rem;
		min-width: 30rem;
		scroll-snap-align: start;
	}
	.ui.modal.roomView .MonthState::-webkit-scrollbar {
		height: 0.6rem;
	}
	.ui.modal.roomView .MonthState::-webkit-scrollbar-thumb {
		background: #cdbf9b;
		border-radius: 1rem;
	}
	.ui.modal.roomView .MonthState::-webkit-scrollbar-track {
		background: #efece2;
		border-radius: 1rem;
	}
	/* 월 이동 헤더 모바일 보정 */
	.ui.modal.roomView .monCon { gap: 1rem; }
	.ui.modal.roomView .monCon .calMonLabel {
		min-width: 0;
		font-size: 1.7rem;
	}
	/* 창닫기 버튼 모바일 보정 */
	.ui.modal.roomView .mClose {
		top: 1.2rem;
		right: 1.4rem;
		width: 3.4rem;
		height: 3.4rem;
	}
	.ui.modal.roomView .mClose::before,
	.ui.modal.roomView .mClose::after { width: 1.5rem; }
	.ui.modal.roomView .footer .ui.button {
		width: 100%;
		min-width: 0;
		padding: 1.5rem 2rem !important;
	}
	/* 모바일: 달력↔슬라이드 간격 축소 + 슬라이드 높이를 이미지에 맞게 가변 */
	.ui.modal.roomView .gallery {
		height: auto;
		margin-top: 2.4rem;
		padding-top: 2.4rem;
		border-top: 1px solid #ece7d8;
	}
	.ui.modal.roomView .gallery .swiper-wrapper {
		align-items: center;
	}
	.ui.modal.roomView .gallery .swiper-slide {
		height: auto;
	}
	.ui.modal.roomView .gallery .swiper-slide img {
		position: static;
		transform: none;
		-webkit-transform: none;
		width: 100%;
		height: auto;
	}
	.ui.modal.roomView .gallerySwiper {
		margin-bottom: 2rem;
	}
	/* 모달 좌우 패딩 축소 */
	.ui.modal.roomView .header,
	.ui.modal.roomView .con,
	.ui.modal.roomView .footer {
		padding-left: 1.4rem;
		padding-right: 1.4rem;
	}
	/* 체크인/체크아웃 라벨 한 줄 고정 */
	.ui.modal.roomView .MonthState .day.selStart a::before,
	.ui.modal.roomView .MonthState .day.selEnd a::before {
		white-space: nowrap;
		font-size: 0.95rem;
		letter-spacing: -0.02em;
	}
}
.ui.modal.roomView .MonthState .header,
.ui.modal.roomView .MonthState .booy .dayGroup {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	border: none !important;
	padding: 0rem !important;
}
.ui.modal.roomView .MonthState .header {
	margin-bottom: 0.4rem;
	padding-bottom: 0.6rem !important;
	border-bottom: 1px solid #ece7d8 !important;
}
.ui.modal.roomView .MonthState .header .day {
	color: #9a9a9a;
	background-color: transparent;
	font-weight: 600;
	font-size: 1.3rem;
	padding: 0.4rem 0 !important;
}
.ui.modal.roomView .MonthState .header .day:first-child { color: #d23b3b; }
.ui.modal.roomView .MonthState .header .day:last-child  { color: #2f6ad0; }

/* monCon - 월 이동 헤더 */
.ui.modal.roomView .monCon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	margin: 0 0 2rem;
}
.ui.modal.roomView .monCon .dPick { display: block; }
.ui.modal.roomView .monCon .calMonLabel {
	display: inline-block;
	min-width: 26rem;
	font-size: 2.1rem;
	font-weight: 700;
	color: #224e42;
	text-align: center;
	letter-spacing: 0.02em;
}
.ui.modal.roomView .monCon .mbtn {
	flex: 0 0 auto;
	width: 3.8rem;
	height: 3.8rem;
	min-width: 3.8rem;
	margin: 0;
	padding: 0;
	font-size: 0;
	color: transparent;
	background: #fff none !important;
	border: 1px solid #d8d2c0;
	border-radius: 50%;
	position: relative;
	overflow: visible;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.ui.modal.roomView .monCon .dPick { flex: 0 1 auto; min-width: 0; }
.ui.modal.roomView .monCon .mbtn:hover {
	background: #224e42 !important;
	border-color: #224e42;
}
.ui.modal.roomView .monCon .mbtn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.9rem;
	height: 0.9rem;
	border-top: 2px solid #553723;
	border-right: 2px solid #553723;
}
.ui.modal.roomView .monCon .mbtn:hover::before { border-color: #fff; }
.ui.modal.roomView .monCon #mBtnPre.mbtn::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.ui.modal.roomView .monCon #mBtnNext.mbtn::before {
	transform: translate(-70%, -50%) rotate(45deg);
}
.ui.modal.roomView .monCon #mBtnPre.mbtn.off {
	opacity: 0.3;
	pointer-events: none;
}

/* 날짜 셀 */
.ui.modal.roomView .MonthState .dayGroup { height: auto !important; }
.ui.modal.roomView .MonthState .day {
	width: calc(100% / 7) !important;
	height: auto !important;
	min-height: 3.5rem;
	padding: 0.2rem !important;
	font-size: 1.05rem;
	text-align: center !important;
	color: #333;
	background-color: #fff;
	border: none;
	box-sizing: border-box;
}
.ui.modal.roomView .MonthState .booy .day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ui.modal.roomView .MonthState .booy .day a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.4rem;
	padding: 0.3rem 0;
	border-radius: 0.6rem;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s;
}
.ui.modal.roomView .MonthState .booy .day a:hover { background-color: #d8edde; }
/* 예약가능 = 진하게(클릭 가능) */
.ui.modal.roomView .MonthState .booy .day.avail { color: #1f3d33; }
.ui.modal.roomView .MonthState .booy .day.avail a {
	color: #1f3d33;
	font-weight: 700;
}
.ui.modal.roomView .MonthState .booy .day:first-child,
.ui.modal.roomView .MonthState .booy .day:first-child a,
.ui.modal.roomView .MonthState .booy .day:first-child.avail a { color: #d23b3b; }
.ui.modal.roomView .MonthState .booy .day:last-child,
.ui.modal.roomView .MonthState .booy .day:last-child a,
.ui.modal.roomView .MonthState .booy .day:last-child.avail a { color: #2f6ad0; }
.ui.modal.roomView .MonthState .day .sType { margin-top: 0.8rem; }
.ui.modal.roomView .MonthState .day .endday {
	display: block;
	margin-top: 0.2rem;
	font-size: 1.1rem;
	color: #c0c0c0;
}
/* 예약불가(지난 날짜) = 흐리게 + 선택 불가 */
.ui.modal.roomView .MonthState .day.past {
	color: #d4d4d4 !important;
	background-color: transparent !important;
	font-weight: 400 !important;
	cursor: default;
	pointer-events: none;
	opacity: 0.7;
}
.ui.modal.roomView .MonthState .day.past .endday { color: #d8d8d8; }
.ui.modal.roomView .MonthState .day:last-child { border-right: none; }
.ui.modal.roomView .MonthState .day.schedule {
	background-color: #f0ece1;
	color: #333;
	font-weight: 500;
}

/* 범위 선택(체크인→체크아웃) */
.ui.modal.roomView .MonthState .day.selRange { background-color: #e3f1e8 !important; }
.ui.modal.roomView .MonthState .day.selStart,
.ui.modal.roomView .MonthState .day.selEnd { background-color: #e3f1e8 !important; }
.ui.modal.roomView .MonthState .day.selStart,
.ui.modal.roomView .MonthState .day.selEnd,
.ui.modal.roomView .MonthState .day.selStart a,
.ui.modal.roomView .MonthState .day.selEnd a {
	color: #fff !important;
	font-weight: 700;
}
.ui.modal.roomView .MonthState .day.selStart a,
.ui.modal.roomView .MonthState .day.selEnd a {
	background-color: #00963c !important;
}
.ui.modal.roomView .MonthState .day.selStart .endday,
.ui.modal.roomView .MonthState .day.selEnd .endday { color: #eaffef; }
/* 선택 시 날짜 위에 체크인 / 체크아웃 라벨 */
.ui.modal.roomView .MonthState .day.selStart a::before,
.ui.modal.roomView .MonthState .day.selEnd a::before {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff;
}
.ui.modal.roomView .MonthState .day.selStart a::before { content: '체크인'; }
.ui.modal.roomView .MonthState .day.selEnd   a::before { content: '체크아웃'; }
.ui.modal.roomView .MonthState .day.selStart .sType,
.ui.modal.roomView .MonthState .day.selEnd .sType { display: none; }

/* 안내문 + 예약하기 버튼 */
.ui.modal.roomView .calHint {
	margin: 0.4rem 0 0;
	padding: 1.1rem 1.4rem;
	background-color: #f7f4ec;
	border: 1px solid #e3dcc8;
	border-radius: 0.6rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: #553723;
	text-align: center;
}
.ui.modal.roomView .calGo {
	margin: 1.4rem 0 0.5rem;
	text-align: center;
}
.ui.modal.roomView .calGo .calGoBtn {
	min-width: 30rem;
	padding: 1.5rem 3rem;
	font-size: 1.7rem;
	font-weight: 700;
	color: #fff;
	background-color: #00963c;
	border: none;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
}
.ui.modal.roomView .calGo .calGoBtn:hover { opacity: 0.9; }
.ui.modal.roomView .calGo .calGoBtn:active { transform: translateY(1px); }
.ui.modal.roomView .calGo .calGoBtn:disabled,
.ui.modal.roomView .calGo .calGoBtn.disabled {
	background-color: #cfcfcf;
	cursor: not-allowed;
	opacity: 1;
}
/* 범례(예약가능/입금대기/예약완료/전화문의/공사중) 제거 */
.ui.modal.roomView .stateType,
.ui.modal.roomView .calendar > .flex {
	display: none !important;
}


/* roomView 모달 — Google Material Symbols 아이콘 */
.ui.modal.roomView .material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	line-height: 1;
	user-select: none;
}
/* h5 제목 앞 아이콘 (flex h5 — 세로 중앙 정렬) */
.ui.modal.roomView h5 .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 2.4rem;
	margin-right: 0.9rem;
	line-height: 1;
	color: #224e42;
}
.ui.modal.roomView h5.redTxt .material-symbols-outlined { color: #dd3c10; }
/* 숙박이용안내 탭 — Semantic UI 아이콘(m_cd=33 동일) */
.ui.modal.roomView h5 .icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0 1rem 0 0;
	font-size: 1em;
	line-height: 1;
	color: inherit;
}
/* 창닫기 아이콘 span 숨김 (구 디자인 btn_close.png 배경 사용) */
.ui.modal.roomView .mClose .material-symbols-outlined,
.monCon .mbtn .material-symbols-outlined { display: none; }


/* =====================================================
   예약하기 (11-01-02) — 예약폼/입력/체크박스 (구 10_02·10_03 동일)
   ===================================================== */
/* region A: reserve/inputWrap/k-checkbox */
.reserve {
	overflow: hidden;	
}
.reserve .left {
	float: left;
	width: calc(100% - 44rem);
	overflow: hidden;
}
.reserve .right {
	float: right;
	width: 36rem;
	border-radius: 2rem;
	padding: 4rem;
	background-color: #f5f4f2;
}
.reserve h5,
.reserve .right p {
	margin-bottom: 2rem;
}
.inputWrap {
	margin-bottom: 4rem;	
}
.inputWrap li {
	margin-bottom: 4rem;	
}
.inputWrap .tit,
.inputWrap .con,
.inputWrap .infoTxt {
	display: block;
	line-height: 160%;
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.inputWrap .tit label {
	display: block;
	font-size: 1.7rem;
	font-weight: normal;
	color: #787878;
}
.inputWrap .con .k-textbox,
.inputWrap .con .k-numerictextbox .k-input {
	width: 100%;
	height: 5.2rem;
	border-radius: 0.5rem;
	padding: 1.2rem 2rem;
	font-size: 1.7rem;
	line-height: 5.2rem;
	color: #787878;
	border: 1px solid rgba(0, 0, 0, 0.2);
}
/* 출입차량 다중 등록 (최대 5대) */
.inputWrap .con #carList { margin-bottom: 0.8rem; }
.inputWrap .con .carRow {
	display: flex;
	gap: 0.8rem;
	margin-bottom: 0.8rem;
}
.inputWrap .con .carRow .carInput { flex: 1 1 auto; width: auto !important; }
.inputWrap .con .carRow .carRemove {
	flex: 0 0 auto;
	height: 5.2rem;
	padding: 0 1.6rem;
	font-size: 1.4rem;
	border: 1px solid #ccc;
	background-color: #f5f4f2;
	color: #555;
	border-radius: 0.5rem;
	cursor: pointer;
}
.inputWrap .con .carRow .carRemove:hover { background-color: #e7e4dc; }
.inputWrap .con .carAdd {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.9rem 1.6rem !important;
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff !important;
	background-color: #00963c !important;
	border: 0 !important;
	border-radius: 0.5rem;
	cursor: pointer;
}
.inputWrap .con .carAdd:hover { opacity: 0.9; }
.inputWrap .con .carAdd:disabled,
.inputWrap .con .carAdd.disabled {
	background-color: #c4c4c4 !important;
	cursor: not-allowed;
	opacity: 1;
}
.inputWrap .con .carCount {
	display: inline-block;
	margin-left: 1rem;
	font-size: 1.4rem;
	color: #888;
}
.inputWrap .con .k-combobox {
	width: 30rem;
	font-size: 1.6rem;
}
.inputWrap .con .k-combobox .k-input {
	height: 4.4rem;
	padding: 0.8rem 1.2rem;
	font-size: 1.5rem;
	line-height: 4.4rem;
}
.inputWrap .con .k-numerictextbox {
	width: 16.5rem;
}
.inputWrap .con .k-numerictextbox .k-numeric-wrap {
	width: 100%;
}
.inputWrap .con .k-numerictextbox .k-input {
	border-radius: 0rem;
    border: none;
    /* padding-left: 7rem; */
    width: 5.2rem;
    margin-left: 5.9rem;
}
.inputWrap .con .k-numerictextbox .k-link {
	position: absolute;
	right: 0;
	top: 0;
    padding: 1rem;
	height: 5.2rem;
    width: 5.2rem;
	background-color: #f7f7f7;
	border-left: 1px solid rgba(0, 0, 0, 0.15);
	z-index: 10;
}
.inputWrap .con .k-numerictextbox .k-link:nth-child(2) {
	right: auto;
	left: 0;
	border-left: none;
	border-right: 1px solid rgba(0, 0, 0, 0.15);
	z-index: 10;
}
.inputWrap .con .k-numerictextbox .k-link .k-icon {
	font-size: 3.2rem;
	text-align: center;
	line-height: 4rem;
	width: 4rem;
	height: 4rem;
	display: block;
	position: absolute;
	top: 0.5rem;
	font-family: 'Noto Sans KR', sans-serif;
}
.inputWrap .con .k-numerictextbox .k-link .k-i-arrow-60-up::before {
	display: block;
    content: "+";
}
.inputWrap .con .k-numerictextbox .k-link .k-i-arrow-60-down::before {
	display: block;
    content: "-";
	font-size: 3.8rem;
}
.inputWrap .con .k-numerictextbox .k-link .k-icon:before {
	display: block;	
}
.inputWrap .con.flex {
	display: flex;	
}

.inputWrap .con.flex .k-textbox {
	width: calc(100% - 16rem);
}
.inputWrap .con.flex .ui.button {
	width: 15rem;
	height: 5.2rem;
	border-radius: 0.5rem;
	padding: 1.2rem 2rem;
	font-size: 1.5rem;
	line-height: 2.8rem;
}
.inputWrap .con .field {
	float: left;
	margin-right: 6rem;
	margin-bottom: 1rem;
	color: #787878;
	font-weight: normal;
}
.k-checkbox {
	width: 2.4rem;
    height: 2.4rem;
	border-radius: 0.5rem;
	margin-right: 0.2rem;
}
.k-checkbox::before {
	display: block;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 2.4rem;
	background-color: #dd3c10;
}
.inputWrap .con .k-checkbox {
	width: 2.4rem;
    height: 2.4rem;
	border-radius: 0.5rem;
	border: none;
	background-color: #f2f2f2;
	background-repeat: no-repeat;
    background-size: 50%;
    background-position: 50%;
	background-image: url(../../main/images/check.png);
	margin-right: 0.5rem;
}
.inputWrap .con .k-radio {
    width: 2.4rem;
    height: 2.4rem;
	margin-left: 0.2rem;
	margin-right: 0.5rem;
}
.inputWrap .con .k-radio:checked {
    border-color: #ababab;
    color: #fff;
    background-color: #fff;
}
.inputWrap .con .k-radio::before {
	display: block;
    width: 1.5rem;
    height: 1.5rem;
	background-color: #dd3c10;
}
.inputWrap .con .underTxt {
	color: #787878;
	font-weight: normal;
	text-decoration: underline;
	cursor: pointer;
}

.reserve .right p .tit {
	display: block;
	font-size: 1.7rem;
	color: #787878;
	font-weight: normal;
	margin-bottom: 0.5rem;
}
.reserve .right p .con,
.reserve .right p .con a {
	display: block;
	font-size: 2rem;
	line-height: 140%;
	font-weight: 700;
	color: #333 !important;
}
.reserve .right p .con a {
	cursor: pointer;
	color: #00F !important;
}
.reserve .right p .con a:hover {
	text-decoration: underline;
}
.reserve .right h6 {
	font-weight: 700;
	margin-bottom: 1.8rem;
}
/* 좌측(폼) 하단 예약신청하기 버튼 */
.reserve .left .leftSubmit {
	margin: 4rem 0 6rem;
}
.reserve .left .leftSubmit .ui.button.red {
	font-size: 1.7rem;
	padding: 1.6rem 2rem;
	border-radius: 0.5rem;
}
.reserve .right h6 .smTxt {
	font-weight: normal;
	margin-left: 0.4rem;
}
.reserve .right .price {
	font-size: 3.6rem;
	font-weight: 700;
	display: block;
	 margin-bottom: 4rem;
}
/* 총결제금액 산출 내역 + 숙박기간 */
.reserve .right .price.hasNote { margin-bottom: 1.2rem; }
.reserve .right .priceNote {
	display: block;
	margin-top: 0.4rem;
	margin-bottom: 4rem;
	font-size: 1.5rem;
	font-weight: 500;
	color: #888;
	line-height: 1.5;
}
.reserve .right p.stayRow .con {
	font-weight: 700;
	color: #224e42;
}
/* 예약선택 요약 - 주말·휴일 / 주중(월~목) 이중요금 */
.reserve .right .price.priceDual {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 4rem;
}
.reserve .right .price.priceDual .pWeekend {
	font-size: 1.8rem; font-weight: 500; color: #888;
	text-decoration: line-through;
}
.reserve .right .price.priceDual .pWeekend b {
	font-weight: 500; color: #888;
	text-decoration: none;
	margin-right: 0.4rem;
}
.reserve .right .price.priceDual .pWeekday {
	font-size: 3rem; font-weight: 700; color: #c4302b;
}
.reserve .right .price.priceDual .pWeekday b {
	display: block;
	font-size: 1.5rem; font-weight: 700; color: #224e42;
	margin-bottom: 0.2rem;
}
.reserve .right .price.priceDual .pNote {
	font-size: 1.4rem; font-weight: 500; color: #888;
}
/* 결제정보 표 - 결제금액 셀 이중요금 */
table.norTable td.priceDual {
	line-height: 150%;
}
table.norTable td.priceDual .pWeekend {
	display: block;
	font-size: 1.4rem; color: #888;
	text-decoration: line-through;
}
table.norTable td.priceDual .pWeekend b {
	font-weight: 500; color: #888;
	text-decoration: none;
	margin-right: 0.3rem;
}
table.norTable td.priceDual .pWeekday {
	display: block;
	font-size: 1.7rem; font-weight: 700; color: #c4302b;
}
table.norTable td.priceDual .pWeekday b {
	font-size: 1.3rem; font-weight: 700; color: #224e42;
	margin-right: 0.3rem;
}
table.norTable td.priceDual .pNote {
	font-size: 1.2rem; font-weight: 500; color: #888;
}
.reserve .right .ui.button {
	font-size: 1.7rem;
	line-height: 140%;
	border-radius: 0.5rem;
	padding: 1.5rem 3rem;	
}

.reserve .terms {
	border: 1px solid rgba(0, 0, 0, 0.15);
	padding: 3rem;
	overflow-y: scroll;
	height: 28.5rem;
	margin-bottom: 1rem;
}
.reserve p.txtRight + h5 {
	margin-top: 4rem;	
}

/* region B: table.norTable */
table.norTable {
	width: calc(100% + 2px);
	margin-left: -1px;
}
table.norTable th {
	background-color: #224e42;
	color: #fff;
	font-size: 1.6rem;
	line-height: 160%;
	padding: 1.2rem;
	text-align: center;
}
#useWrap table.norTable {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);	
}
#useWrap table.norTable th {
	border-top: 1px solid rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #f7f7f7;
	color: #333;	
}

table.norTable td {
	border: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 1.6rem;
	line-height: 160%;
	color: #787878;
	padding: 1.2rem;
	text-align: center;
}
.reserve table.norTable + p {
	margin: 1rem 0rem 6rem 0rem;
}
.reserve table.norTable + h5 {
	margin: 6rem 0rem 2rem 0rem;	
}

.reserve table.norTable td {
	font-size: 1.8rem;
	padding: 2rem;
	color: #333;
	font-weight: 500;
}


.resvrDone { padding: 4rem 2rem 5rem; margin-bottom: 4rem; border-radius: 1.2rem; background-color: #f5f4f2; }
.resvrDone h4 { margin-bottom: 1rem; color: #224e42; }
.resvrDone p { font-size: 1.6rem; color: #555; }


/* =====================================================
   민박예약조회 (13) — 게시판형 목록 + 상세 모달
   ===================================================== */
#bbsWrap { margin-bottom: 6rem; }
#bbsWrap .totalNum {
	margin-bottom: 1.2rem;
	font-size: 1.6rem;
	color: #333;
}
#bbsWrap .totalNum strong { color: #00963c; font-weight: 700; }
#bbsWrap .totalNum .pageInfo { color: #999; font-size: 1.4rem; }
#bbsWrap .bbsNoti {
	margin-top: 1.4rem;
	font-size: 1.4rem;
	color: #888;
}
#bbsList { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#bbsList .bbsTable {
	width: 100%;
	border-top: 2px solid #224e42;
	border-collapse: collapse;
}
#bbsList .bbsTable th,
#bbsList .bbsTable td {
	padding: 1.4rem 1rem;
	font-size: 1.5rem;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
#bbsList .bbsTable thead th {
	background-color: #f3efe3;
	color: #224e42;
	font-weight: 700;
}
#bbsList .bbsTable tbody tr:hover { background-color: #f7f6f2; }
#bbsList .bbsTable td .reserveLink {
	color: #224e42;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
#bbsList .bbsTable td .reserveLink:hover { color: #00963c; }

/* 상세 모달 (reserveView) */
.ui.modal.reserveView { border-radius: 1rem; }
.ui.modal.reserveView > .header {
	padding: 2rem 2.4rem;
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	background-color: #224e42;
	border-bottom: 0;
}
.ui.modal.reserveView .con { padding: 0; }
.ui.modal.reserveView .block { padding: 2.4rem; }
.ui.modal.reserveView .block h5 {
	margin: 0 0 1.2rem;
	font-size: 1.8rem;
	font-weight: 700;
	color: #553723;
}
.ui.modal.reserveView .block h5 + * { margin-bottom: 3rem; }
.ui.modal.reserveView .block h5 .icon { color: #00963c; }
.ui.modal.reserveView .bookingInfo { overflow-x: auto; }
.ui.modal.reserveView table.general {
	width: 100%;
	border-top: 2px solid #224e42;
	border-collapse: collapse;
}
.ui.modal.reserveView table.general th,
.ui.modal.reserveView table.general td {
	padding: 1.1rem 0.8rem;
	font-size: 1.4rem;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ui.modal.reserveView table.general thead th {
	background-color: #f3efe3;
	color: #224e42;
	font-weight: 700;
}
.ui.modal.reserveView table.general .rvState { margin: 0; font-size: 1.4rem; font-weight: 700; }
.ui.modal.reserveView table.general .rvState.redTxt { color: #c4302b; }
.ui.modal.reserveView .bbsInput .fieldList {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.ui.modal.reserveView .bbsInput .fieldList li {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ui.modal.reserveView .bbsInput .fieldList li .tit {
	flex: 0 0 16rem;
	padding: 1.2rem 1.4rem;
	background-color: #f7f6f2;
	font-size: 1.5rem;
	font-weight: 600;
	color: #553723;
}
.ui.modal.reserveView .bbsInput .fieldList li .con {
	flex: 1 1 auto;
	padding: 1.2rem 1.4rem;
	font-size: 1.5rem;
	color: #333;
}
.ui.modal.reserveView .actions.btn_center {
	padding: 1.6rem;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ui.modal.reserveView .actions .ui.button.rvClose {
	min-width: 16rem;
	padding: 1.3rem 3rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: #fff;
	background-color: #553723;
	border-radius: 0.5rem;
	cursor: pointer;
}
.ui.modal.reserveView .actions .ui.button.rvClose:hover { background-color: #3f2918; }

@media only screen and (max-width: 767px) {
	#bbsList .bbsTable { min-width: 56rem; }
	.ui.modal.reserveView .bbsInput .fieldList li .tit { flex-basis: 10rem; }
	.ui.modal.reserveView .block { padding: 1.6rem; }
}


/* =====================================================
   이용안내 (14) — 이용정보 카드 + 안내 박스
   ===================================================== */
#useWrap { margin-bottom: 4rem; }
#useWrap .flex {
	gap: 2.4rem;
	margin-bottom: 2rem;
}
#useWrap .useInfo {
	flex: 1 1 calc((100% - 7.2rem) / 4);
	min-width: 20rem;
	border-radius: 0.6rem;
	overflow: hidden;
	background-color: #f7f6f2;
}
#useWrap .useInfo dt {
	padding: 1.4rem;
	background-color: #224e42;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	text-align: center;
}
#useWrap .useInfo dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 12rem;
	padding: 2rem;
	font-size: 1.6rem;
	line-height: 1.7;
	color: #444;
	text-align: center;
}
#useWrap .useInfo dd .dot { margin: 0; }
#useWrap .useInfo dd .dot li { text-align: left; }

#useWrap .tit.bar { margin-top: 6rem; }
#useWrap .flex + .tit.bar { margin-top: 2rem; }
#useWrap .tit.bar + table,
#useWrap .tit.bar + p,
#useWrap .tit.bar + .dot,
#useWrap .tit.bar + .greyBox { margin-top: 1.6rem; }

#useWrap .greyBox {
	margin-top: 1.6rem;
	padding: 3rem;
	background-color: #f3f3f3;
	border-radius: 0.6rem;
}
#useWrap .greyBox p { margin-bottom: 1.6rem; }
#useWrap .greyBox .dot { margin: 0; }
/* p.tip — 07-오시는길 등 다른 페이지와 동일 디자인 (색상 #962323) */
#useWrap p.tip {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin: 0 0 1.6rem;
	font-size: 1.7rem; line-height: 170%;
	color: #962323 !important;
	background: none;
}
#useWrap p.tip:before {
	content: "\f05a";   /* Font Awesome 4 info-circle */
	font-family: "FontAwesome";
	flex-shrink: 0;
	font-size: 1.7rem;
	line-height: 170%;
	color: #962323;
}
#useWrap table.norTable caption {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

@media only screen and (max-width: 1023px) {
	#useWrap .useInfo { flex-basis: calc((100% - 2.4rem) / 2); }
}
@media only screen and (max-width: 767px) {
	#useWrap .flex { gap: 1.6rem; }
	#useWrap .useInfo { flex-basis: 100%; }
	#useWrap .useInfo dd { min-height: auto; }
	#useWrap .greyBox { padding: 2rem; }
	/* 모바일: 모든 .tit.bar 상단 여백 동일하게(6rem) */
	#useWrap .tit.bar,
	#useWrap .flex + .tit.bar { margin-top: 6rem; }
}


/* =====================================================
   마을안내도 (15) — 지도 + 시설 목록
   ===================================================== */
#vallageWrap { margin-bottom: 4rem; }
#vallageWrap .vallageMap {
	padding: 4rem 2rem;
	text-align: center;
	background-color: #f5f4f2;
	border-radius: 0.6rem;
}
#vallageWrap .vallageMap img {
	max-width: 100%;
	height: auto;
}
#vallageWrap .vallageInfo {
	margin-top: 2.4rem;
	padding: 4rem;
	background-color: #efe9df;
	border-radius: 0.6rem;
	gap: 3rem;
}
#vallageWrap .vallageInfo .normalVall {
	flex: 1 1 100%;
	width: 100%;
}
#vallageWrap .vallageInfo .minbag {
	flex: 1 1 100%;
	width: 100%;
}
#vallageWrap .vallageInfo .tit.bar {
	margin: 0 0 2rem;
}
#vallageWrap .vallageInfo .vallageList {
	justify-content: flex-start;
	gap: 1.4rem 0;
}
#vallageWrap .vallageInfo .normalVall .vallageList li {
	width: calc(100% / 6);
}
#vallageWrap .vallageInfo .minbag .vallageList li {
	width: calc(100% / 6);
}
#vallageWrap .vallageInfo .minbag .vallageList li a.rv {
	cursor: pointer;
}
#vallageWrap .vallageInfo .minbag .vallageList li a.rv:hover {
	color: #00963c;
	text-decoration: underline;
}
#vallageWrap .vallageInfo .vallageList li {
	display: flex;
	align-items: center;
	font-size: 1.7rem;
	font-weight: 700;
	color: #333;
}
#vallageWrap .vallageInfo .vallageList li span {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-right: 1rem;
	border-radius: 50%;
	font-size: 1.6rem;
	font-weight: 500;
	color: #fff;
	background-color: #597a71;
}
#vallageWrap .vallageInfo .minbag .vallageList li .num {
	background-color: #c4302b;
}

@media only screen and (max-width: 1023px) {
	#vallageWrap .vallageInfo .normalVall .vallageList li { width: 25%; }
	#vallageWrap .vallageInfo .minbag .vallageList li { width: 33.33%; }
}
@media only screen and (max-width: 767px) {
	#vallageWrap .vallageMap { padding: 2rem 1rem; }
	#vallageWrap .vallageInfo { padding: 2rem; }
	#vallageWrap .vallageInfo .normalVall .vallageList li,
	#vallageWrap .vallageInfo .minbag .vallageList li { width: 50%; }
	#vallageWrap .vallageInfo .vallageList li { font-size: 1.4rem; }
	#vallageWrap .vallageInfo .vallageList li span {
		width: 2.4rem; height: 2.4rem;
		font-size: 1.3rem; margin-right: 0.7rem;
	}
}


/* =====================================================
   예약시주의사항 (16) — 안내 블록
   ===================================================== */
#block {
	margin-bottom: 4rem;
	padding: 4rem 5rem;
	background-color: #f7f6f2;
	border-radius: 0.8rem;
}
/* h5 — 운영 페이지(m_cd=33)와 동일: Semantic UI 아이콘, 2.4rem 다크, 아이콘 동일색 */
#block h5 {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 1rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.87);
	letter-spacing: -0.1rem;
	line-height: 1.3;
}
#block h5 .icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0 1rem 0 0;
	font-size: 1em;
	line-height: 1;
	color: inherit;
}
#block .dot + h5 { margin-top: 5rem; }
#block .dot {
	margin: 0;
	padding-left: 0.5rem;
}
#block .dot li {
	margin-bottom: 0.8rem;
	font-size: 1.6rem;
	line-height: 1.7;
	color: #444;
}
#block .dot li .tit {
	display: inline-block;
	min-width: 8rem;
	font-weight: 700;
	color: #224e42;
}
#block .dot li .redTxt { color: #c4302b; }
#block .dot li .nonTxt { color: #888; }

/* 환불수수료율 표 */
#block .dot + h5,
#block .smTxt + h5 { margin-top: 5rem; }
#block .smTxt,
.ui.modal.roomView .smTxt {
	margin: 0.2rem 0 1.4rem;
	font-size: 1.4rem;
	color: #888;
}
#block .refundTable,
.ui.modal.roomView .refundTable {
	width: 100%;
	border-top: 2px solid #224e42;
	border-collapse: collapse;
}
#block .refundTable th,
#block .refundTable td,
.ui.modal.roomView .refundTable th,
.ui.modal.roomView .refundTable td {
	padding: 1.2rem 1.4rem;
	font-size: 1.5rem;
	line-height: 1.6;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
#block .refundTable thead th,
.ui.modal.roomView .refundTable thead th {
	background-color: #f3efe3;
	color: #224e42;
	font-weight: 700;
	text-align: center;
}
#block .refundTable tbody td,
.ui.modal.roomView .refundTable tbody td { color: #444; text-align: left; }
#block .refundTable tbody td:last-child,
.ui.modal.roomView .refundTable tbody td:last-child {
	text-align: center;
	font-weight: 700;
	color: #224e42;
}
#block .refundTable .refundNoti,
.ui.modal.roomView .refundTable .refundNoti {
	text-align: center;
	font-weight: 600;
	color: #c4302b;
	background-color: #faf4f3;
}

@media only screen and (max-width: 767px) {
	#block { padding: 2.4rem 1.8rem; }
	#block h5 { font-size: 2rem; }
	#block .dot + h5,
	#block .smTxt + h5 { margin-top: 4rem; }
	#block .dot li { font-size: 1.5rem; }
	#block .dot li .tit { min-width: 7rem; }
	#block .refundTable th,
	#block .refundTable td { padding: 1rem; font-size: 1.4rem; }
}


/* =====================================================
   개인정보보호정책 (101) — 정책 본문
   ===================================================== */
.privacy.policy {
	margin-bottom: 4rem;
	padding: 5rem 6rem;
	background-color: #f7f6f2;
	border-radius: 0.8rem;
	line-height: 1.6;
}
.privacy.policy h5 {
	margin: 0 0 1.2rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: #224e42;
	text-align: left;
}
.privacy.policy h6 {
	margin: 4.5rem 0 1rem;
	font-size: 1.8rem;
	font-weight: 700;
	color: #333;
}
.privacy.policy p {
	font-size: 1.6rem;
	color: #555;
	line-height: 1.7;
}
.privacy.policy ol {
	position: relative;
	list-style-type: decimal;
	margin: 0.8rem 0 0 3.4rem;
}
.privacy.policy ul ol { margin-left: 2.4rem; }
.privacy.policy ol li,
.privacy.policy ul li ol li {
	padding: 0.35rem 0 0.35rem 0.5rem;
	font-size: 1.55rem;
	color: #666;
	line-height: 1.65;
}
.privacy.policy ul {
	margin: 0.8rem 0 0;
}
.privacy.policy ul li {
	position: relative;
	padding: 0.35rem 0 0.35rem 2rem;
	font-size: 1.55rem;
	color: #666;
	line-height: 1.65;
}
.privacy.policy ul li:before {
	position: absolute;
	top: 0.35rem;
	left: 0;
	color: #224e42;
}
.privacy.policy ul li:nth-child(1):before { content: "\2460"; }
.privacy.policy ul li:nth-child(2):before { content: "\2461"; }
.privacy.policy ul li:nth-child(3):before { content: "\2462"; }
.privacy.policy ul li:nth-child(4):before { content: "\2463"; }
.privacy.policy ul li:nth-child(5):before { content: "\2464"; }
.privacy.policy ul li:nth-child(6):before { content: "\2465"; }
.privacy.policy ul li:nth-child(7):before { content: "\2466"; }
.privacy.policy ul li ol li:before { display: none; }
.privacy.policy ul.bar,
.privacy.policy ul ul.bar {
	margin: 0.8rem 0;
	padding: 0;
}
.privacy.policy ul.bar li {
	padding: 0.2rem 0 0.2rem 1.2rem;
	margin-bottom: 0;
}
.privacy.policy ul.bar li:before {
	content: "-";
	top: 0.2rem;
	color: #888;
}
.privacy.policy ul.bar li:nth-child(1) {
	padding-left: 0;
	font-weight: 700;
	color: #333;
}
.privacy.policy ul.bar li:nth-child(1):before,
.privacy.policy ul li ul.bar li:nth-child(1):before { content: ""; }
.privacy.policy ul + p,
.privacy.policy ol + p { margin-top: 1.6rem; }
.privacy.policy ol li strong { color: #333; }
.k-button {
    font-size: 1.4rem;
}
.k-filebrowser .k-upload .k-upload-button {
    padding: 0 1rem;
    min-width: 8em;
}
.k-filebrowser .k-search-wrap {
    margin: 0;
}
.k-window .k-textbox, .k-window .k-input.k-combobox .k-input-inner,
.k-window .k-numerictextbox .k-input, .k-window .k-textarea .k-input,
.k-window .k-combobox .k-dropdown-wrap .k-input,
.k-window .k-datepicker .k-input-inner {
    font-size: 1.4rem;
    padding: 0.5rem;
}
@media only screen and (max-width: 767px) {
	.privacy.policy { padding: 2.6rem 1.8rem; }
	.privacy.policy h5 { font-size: 1.9rem; }
	.privacy.policy h6 { font-size: 1.65rem; margin-top: 3.5rem; }
	.privacy.policy p,
	.privacy.policy ol li,
	.privacy.policy ul li { font-size: 1.45rem; }
	.privacy.policy ol { margin-left: 2.6rem; }
}