/* ============================================
   DOG&TREE STAY - subpage_05 전용 스타일
   ============================================ */

/* Hero (pageVisual.pn7) */
.pageVisual.pn7 .bg{
	background:url('/bbs/sub/img/stay/stay_01.jpg') no-repeat center;
	background-size:cover;
	background-attachment:fixed;
}
.pageVisual.pn7 .txts p:before{ width:8vw; }
@media (max-width:812px){
	.pageVisual.pn7 .bg{ background-attachment:scroll; }
	.pageVisual.pn7 .txts p:before{ width:0; }
}

/* Inner page top (page_top.pn13) */
.page_top.pn13 .bg{
	background:url('/bbs/sub/img/stay/stay_03.jpg') no-repeat center / cover;
}

/* ============================================
   STAY 특별함 5장 (re100 override — high specificity)
   .m32 .sec1 .conwrap 스코프와 동급 이상으로 작성
   ============================================ */
.m32 .sec1 .conwrap .re100.stay-features{
	margin-top:60px;
	padding-top:80px;
}
.m32 .sec1 .conwrap .re100.stay-features ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
	gap:20px;
}
.m32 .sec1 .conwrap .re100.stay-features ul li{
	flex:1 1 0;
	max-width:240px;
	min-width:180px;
	width:auto;
	margin:0;
	padding:28px 20px 24px;
	overflow:visible;
	text-align:center;
	background:#fff;
	border:1px solid #ece9dd;
	border-radius:18px;
	transition:all 0.35s ease;
}
.m32 .sec1 .conwrap .re100.stay-features ul li:hover{
	border-color:#277a6c;
	background:#fafaf6;
	transform:translateY(-6px);
	box-shadow:0 14px 30px rgba(39,122,108,0.12);
}

/* titarea — 기존 pill 보더/높이 완전 무력화 */
.m32 .sec1 .conwrap .re100.stay-features ul li .titarea{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	width:auto;
	height:auto;
	min-height:0;
	margin:0 0 16px;
	padding:0;
	border:0 none;
	border-radius:0;
	background:transparent;
}
.m32 .sec1 .conwrap .re100.stay-features ul li .titarea:after{ display:none; }
.m32 .sec1 .conwrap .re100.stay-features ul li .titarea > div{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
}
.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:38px;
	height:24px;
	padding:0 12px;
	margin:0;
	border-radius:30px;
	background:#f1eee1;
	color:#9a8f6c;
	font-size:12px;
	font-weight:700;
	letter-spacing:1.5px;
	font-family:"Lexend","Noto Sans KR",sans-serif;
	transition:all 0.3s;
}
.m32 .sec1 .conwrap .re100.stay-features ul li:hover .titarea .num{
	background:#277a6c;
	color:#fff;
}
.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .tit{
	font-size:16.5px;
	font-weight:600;
	color:#222;
	letter-spacing:-0.4px;
	line-height:1.4;
	word-break:keep-all;
}
.m32 .sec1 .conwrap .re100.stay-features ul li:hover .titarea .tit{
	color:#277a6c;
}
.m32 .sec1 .conwrap .re100.stay-features ul li .txtarea{
	padding:14px 0 0;
	margin-top:4px;
	border-top:1px dashed #e3dfce;
	font-size:13.5px;
	line-height:1.55;
	color:#777;
	letter-spacing:-0.2px;
	word-break:keep-all;
}

/* 상단 tip line */
.m32 .sec1 .conwrap .re100.stay-features .tip{
	width:calc(100% - 60px);
	left:30px;
	right:auto;
	top:24px;
}
.m32 .sec1 .conwrap .re100.stay-features .tip > div > span{
	padding:0 14px;
	font-size:15px;
}

@media (max-width:1399px){
	.m32 .sec1 .conwrap .re100.stay-features ul{ gap:14px; }
	.m32 .sec1 .conwrap .re100.stay-features ul li{ max-width:200px; min-width:160px; padding:24px 16px 20px; }
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .tit{ font-size:15px; }
}

/* ===== Mobile: 세로 스택 + 가로 카드 ===== */
@media (max-width:812px){
	.m32 .sec1 .conwrap .re100.stay-features{ margin-top:24px; padding-top:0; }
	.m32 .sec1 .conwrap .re100.stay-features .tip{ display:none; }
	.m32 .sec1 .conwrap .re100.stay-features ul{
		flex-direction:column;
		flex-wrap:nowrap;
		gap:10px;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li{
		display:flex;
		align-items:center;
		gap:16px;
		flex:0 0 auto;
		max-width:none;
		min-width:0;
		width:100%;
		padding:16px 18px;
		border-radius:14px;
		text-align:left;
	}
	/* mobile: 번호 = 좌측 큰 원형 뱃지 */
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea{
		flex:0 0 48px;
		margin:0;
		min-height:0;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea > div{
		flex-direction:column;
		gap:0;
	}
	/* mobile: 제목은 titarea에서 분리해 우측 영역으로 이동 (시각적으로) */
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .tit{ display:none; }
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .num{
		min-width:48px;
		height:48px;
		padding:0;
		border-radius:50%;
		background:#f1eee1;
		color:#9a8f6c;
		font-size:14px;
		letter-spacing:0.5px;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li:hover .titarea .num,
	.m32 .sec1 .conwrap .re100.stay-features ul li:active .titarea .num{
		background:#277a6c;
		color:#fff;
	}
	/* mobile: 우측 컨텐츠 = 제목(li::before) + 설명(txtarea) */
	.m32 .sec1 .conwrap .re100.stay-features ul li .txtarea{
		flex:1 1 auto;
		padding:0;
		margin:0;
		border:0;
		font-size:13px;
		line-height:1.45;
		color:#666;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li{ position:relative; }
}

/* mobile 제목 강제 표시 — 데이터 속성 없으니 contents API 사용을 대신해 .tit를 다시 활용 */
@media (max-width:812px){
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea{
		flex:0 0 48px;
		margin:0;
	}
	/* tit를 .titarea 밖으로 끌어내기 어려우니, mobile에서는 .titarea 자체를 가로 컴포지션 일부로 */
	.m32 .sec1 .conwrap .re100.stay-features ul li{
		flex-wrap:wrap;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea{
		flex:1 1 auto;
		display:flex;
		flex-direction:row;
		align-items:center;
		gap:14px;
		margin:0;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea > div{
		flex-direction:row;
		align-items:center;
		gap:14px;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .tit{
		display:block;
		font-size:15px;
		font-weight:600;
		color:#222;
		line-height:1.35;
		text-align:left;
	}
	.m32 .sec1 .conwrap .re100.stay-features ul li .titarea .tit br{ display:none; }
	.m32 .sec1 .conwrap .re100.stay-features ul li .txtarea{
		flex:0 0 100%;
		padding-left:64px;
		padding-top:8px;
		font-size:12.5px;
		color:#666;
	}
}

/* ============================================
   Gallery (Swiper)
   ============================================ */
.stay-gallery{
	position:relative;
	margin-top:40px;
	padding:0 0 30px;
}
.stay-swiper{
	position:relative;
	overflow:hidden;
	padding-bottom:20px;
}
.stay-swiper .swiper-wrapper{
	box-sizing:border-box;
}
.stay-swiper .swiper-slide{
	height:auto;
}
.stay-swiper .swiper-slide .thumb{
	position:relative;
	width:100%;
	padding-top:66%;
	overflow:hidden;
	border-radius:6px;
	background:#f4f4f4;
}
.stay-swiper .swiper-slide .thumb img{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.6s ease;
}
.stay-swiper .swiper-slide:hover .thumb img{
	transform:scale(1.03);
}

.stay-swiper .control{
	position:relative;
	display:flex;
	align-items:center;
	gap:18px;
	margin-top:24px;
}
.stay-swiper .swiper-button-prev,
.stay-swiper .swiper-button-next{
	position:relative;
	left:auto; right:auto; top:auto;
	width:44px;
	height:44px;
	margin:0;
	border:1px solid #cfcfcf;
	border-radius:50%;
	background:#fff;
	font-size:0;
	color:transparent;
	cursor:pointer;
	transition:all 0.25s;
}
.stay-swiper .swiper-button-prev:after,
.stay-swiper .swiper-button-next:after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:9px;
	height:9px;
	border-top:1.5px solid #555;
	border-right:1.5px solid #555;
}
.stay-swiper .swiper-button-prev:after{
	transform:translate(-30%,-50%) rotate(-135deg);
}
.stay-swiper .swiper-button-next:after{
	transform:translate(-70%,-50%) rotate(45deg);
}
.stay-swiper .swiper-button-prev:hover,
.stay-swiper .swiper-button-next:hover{
	border-color:#277a6c;
}
.stay-swiper .swiper-button-prev:hover:after,
.stay-swiper .swiper-button-next:hover:after{
	border-color:#277a6c;
}
.stay-swiper .swiper-scrollbar{
	position:relative;
	flex:1;
	height:3px;
	background:#eee;
	border-radius:2px;
	cursor:pointer;
}
.stay-swiper .swiper-scrollbar-drag{
	height:3px;
	background:#277a6c;
	border-radius:2px;
}

@media (max-width:812px){
	.stay-swiper .swiper-button-prev,
	.stay-swiper .swiper-button-next{ width:38px; height:38px; }
	.stay-swiper .swiper-slide .thumb{ border-radius:8px; }
}

/* ============================================
   Tables (.stay-table)
   ============================================ */
.stay-table .nowrap{ white-space:nowrap; display:inline-block; }
.stay-table thead th,
.stay-table tbody td{
	word-break:keep-all;
	letter-spacing:-0.2px;
}
.stay-table thead th{
	font-size:16px;
	line-height:1.45;
	padding:14px 6px;
}
.stay-table thead th .th-sub{
	display:inline-block;
	margin-top:3px;
	font-size:0.82em;
	font-weight:500;
	color:#888;
	letter-spacing:-0.3px;
}
.stay-table tbody td{
	font-size:16px;
	padding:14px 6px;
	font-weight:500;
}

@media (max-width:1399px){
	.stay-table thead th{ font-size:15px; padding:13px 6px; }
	.stay-table tbody td{ font-size:15px; padding:13px 6px; }
}
@media (max-width:812px){
	.stay-table{ table-layout:fixed; width:100%; }
	.stay-table thead th{
		font-size:13px;
		line-height:1.4;
		padding:11px 4px;
	}
	.stay-table tbody td{
		font-size:13.5px;
		padding:13px 4px;
		letter-spacing:-0.3px;
	}
	.stay-table .nowrap{ display:inline-block; }
}
@media (max-width:380px){
	.stay-table thead th{ font-size:12px; padding:10px 3px; }
	.stay-table tbody td{ font-size:12.5px; padding:11px 3px; }
}

/* ============================================
   카페 / 운동장 이용시간 (2-up)
   ============================================ */
.stay-hours{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	max-width:520px;
	margin:30px auto 18px;
}
.stay-hour-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:26px 18px;
	border:1px solid #d8d2bf;
	border-radius:14px;
	background:#fafaf6;
	text-align:center;
	transition:all 0.25s;
}
.stay-hour-card:hover{
	border-color:#277a6c;
	background:#fff;
	transform:translateY(-2px);
	box-shadow:0 6px 20px rgba(39,122,108,0.10);
}
.stay-hour-label{
	font-size:13px;
	font-weight:600;
	color:#9a8f6c;
	letter-spacing:0.4px;
}
.stay-hour-time{
	display:inline-flex;
	align-items:baseline;
	gap:6px;
	font-size:22px;
	font-weight:700;
	color:#277a6c;
	letter-spacing:-0.4px;
	font-family:"Lexend","Noto Sans KR",sans-serif;
	white-space:nowrap;
}
.stay-hour-suffix{
	font-size:13px;
	font-weight:500;
	color:#666;
	letter-spacing:-0.2px;
}

@media (max-width:812px){
	.stay-hours{ gap:10px; margin:22px 0 14px; }
	.stay-hour-card{ padding:20px 12px; gap:8px; border-radius:12px; }
	.stay-hour-label{ font-size:12px; }
	.stay-hour-time{ font-size:18px; }
	.stay-hour-suffix{ font-size:12px; }
}

/* ============================================
   체크인 / 체크아웃 카드
   ============================================ */
.stay-checkin{
	max-width:520px;
	margin:30px auto 18px;
	padding:24px 28px;
	border:1px solid #d8d2bf;
	border-radius:14px;
	background:#fafaf6;
	text-align:left;
}
.stay-checkin-row{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:18px;
	padding:10px 0;
}
.stay-checkin-row + .stay-checkin-row{
	border-top:1px dashed #d8d2bf;
}
.stay-checkin-label{
	flex:0 0 auto;
	font-size:14px;
	font-weight:700;
	letter-spacing:1.5px;
	color:#277a6c;
	font-family:"Lexend","Noto Sans KR",sans-serif;
}
.stay-checkin-time{
	flex:1 1 auto;
	text-align:right;
	font-size:18px;
	font-weight:600;
	color:#222;
	letter-spacing:-0.3px;
	white-space:nowrap;
}
.stay-checkin-note{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:18px 0 0;
	padding:12px 14px;
	border-radius:8px;
	background:#fff;
	font-size:13.5px;
	line-height:1.5;
	color:#555;
	word-break:keep-all;
	letter-spacing:-0.2px;
}
.stay-checkin-mark{
	flex:0 0 18px;
	width:18px;
	height:18px;
	margin-top:1px;
	border-radius:50%;
	background:#ff6714;
	color:#fff;
	font-size:12px;
	font-weight:700;
	line-height:18px;
	text-align:center;
}

@media (max-width:812px){
	.stay-checkin{
		margin:22px 0 14px;
		padding:18px 18px;
		border-radius:12px;
	}
	.stay-checkin-row{ padding:8px 0; gap:12px; }
	.stay-checkin-label{ font-size:12px; letter-spacing:1px; }
	.stay-checkin-time{ font-size:15.5px; }
	.stay-checkin-note{
		margin-top:14px;
		padding:10px 12px;
		font-size:12.5px;
	}
}

/* ============================================
   Rule Cards (객실 / 반려견 / 퇴실)
   ============================================ */
.stay-rules{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
	margin-top:30px;
	text-align:left;
}
.stay-rule-card{
	padding:30px 26px;
	border:1px solid #e7e3d8;
	border-radius:10px;
	background:#fafaf6;
	transition:all 0.25s;
}
.stay-rule-card:hover{
	border-color:#c9c3b0;
	background:#fff;
	box-shadow:0 6px 24px rgba(0,0,0,0.04);
}
/* h5 — override .m32 .sec1 .conwrap h5 (29px) bleed */
.m32 .sec1 .conwrap .stay-rule-card h5,
.stay-rule-card h5{
	margin:0 0 14px;
	padding-bottom:10px;
	border-bottom:1px solid #d8d2bf;
	font-size:17px;
	font-weight:700;
	color:#277a6c;
	letter-spacing:-0.3px;
	line-height:1.3;
	text-align:left;
}
.stay-rule-card ul{
	margin:0;
	padding:0;
	list-style:none;
}
.stay-rule-card li{
	position:relative;
	padding:5px 0 5px 14px;
	font-size:14.5px;
	line-height:1.55;
	color:#444;
	word-break:keep-all;
	letter-spacing:-0.2px;
}
.stay-rule-card li:before{
	content:'';
	position:absolute;
	left:0;
	top:13px;
	width:4px;
	height:4px;
	border-radius:50%;
	background:#277a6c;
}
.stay-rule-card strong{
	color:#222;
	font-weight:600;
}
.stay-rule-card .nowrap{ white-space:nowrap; }

@media (max-width:1399px){
	.stay-rules{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:812px){
	.stay-rules{ grid-template-columns:1fr; gap:12px; margin-top:20px; }
	.stay-rule-card{ padding:20px 18px; }
	.m32 .sec1 .conwrap .stay-rule-card h5,
	.stay-rule-card h5{
		font-size:15.5px;
		margin-bottom:12px;
		padding-bottom:9px;
	}
	.stay-rule-card li{
		font-size:13.5px;
		padding:4px 0 4px 12px;
		line-height:1.5;
	}
	.stay-rule-card li:before{ top:11px; width:3px; height:3px; }
}

/* ============================================
   예약 / 문의 (전화 버튼)
   ============================================ */
.stay-contact{ text-align:center; }
.stay-tels{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:12px;
	max-width:440px;
	margin:24px auto 0;
}
.stay-tels a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	width:100%;
	padding:16px 24px;
	border:1px solid #e0dccd;
	border-radius:12px;
	background:#fff;
	color:#222;
	text-decoration:none;
	transition:all 0.2s ease;
	-webkit-tap-highlight-color:transparent;
}
.stay-tels a:hover,
.stay-tels a:focus-visible{
	border-color:#277a6c;
	background:#fafaf6;
	transform:translateY(-1px);
	box-shadow:0 4px 14px rgba(39,122,108,0.10);
}
.stay-tels a:active{
	transform:translateY(0);
	background:#f3efe1;
}
.stay-tels .stay-tel-icon{
	flex:0 0 auto;
	color:#277a6c;
	transition:transform 0.2s;
}
.stay-tels a:hover .stay-tel-icon{
	transform:rotate(-12deg);
}
.stay-tels .stay-tel-num{
	font-size:19px;
	font-weight:600;
	letter-spacing:0.4px;
	color:#222;
	font-family:"Lexend","Noto Sans KR",sans-serif;
}

@media (max-width:812px){
	.stay-tels{ gap:10px; margin-top:20px; max-width:none; }
	.stay-tels a{ padding:18px 20px; border-radius:14px; }
	.stay-tels .stay-tel-num{ font-size:17px; }
}