/* =============================================================
 * smenth common.css
 * (이전 common-settings.php wp_head 인라인 CSS 정적 부분 분리)
 *
 * 동적(옵션 기반) CSS는 여전히 wp_head에서 inline 출력:
 *   - :root --smenth-primary (공통 컬러)
 *   - #smenth-menu-shadow (PC GNB text-shadow 토글)
 *   - #smenth-common-title-font (폰트 통합 오버라이드)
 *
 * 본 파일은 언제든 캐시 가능한 정적 규칙만 포함.
 * ============================================================= */

/* === 슬라이드아웃 모바일 메뉴 (.is-open 토글 + +/− 아이콘) === */
#slide-out-widget-area .menu-item-has-children > .sub-menu{display:none;}
#slide-out-widget-area .menu-item-has-children.is-open > .sub-menu{display:block !important;}
#slide-out-widget-area li.back{display:none !important;}

/* + / − 토글 아이콘 — 좌우 invisible/visible 페어로 텍스트 중앙정렬 유지 */
#slide-out-widget-area .menu-item-has-children > a::before,
#slide-out-widget-area .menu-item-has-children > a::after{
	content:"+";
	display:inline-block;
	font-weight:300;
	font-size:1em;
	line-height:1;
	vertical-align:middle;
	position:relative;
	top:-1px;
}
#slide-out-widget-area .menu-item-has-children > a::before{
	visibility:hidden;
	margin-right:10px;
}
#slide-out-widget-area .menu-item-has-children > a::after{
	margin-left:10px;
	opacity:.7;
	transition:opacity .2s ease;
}
#slide-out-widget-area .menu-item-has-children.is-open > a::after{
	content:"\2212";
	opacity:1;
}
#slide-out-widget-area .menu-item-has-children.is-open > a::before{
	content:"\2212";
}

/* 모바일 메뉴 전체 그룹을 위로 20px 이동 */
#slide-out-widget-area .off-canvas-menu-container,
#slide-out-widget-area .inner > nav,
#slide-out-widget-area ul.menu,
#slide-out-widget-area nav > ul{
	transform:translateY(-20px);
}

/* === Salient 헤더 보정 === */
/* transparent 상태에서 backdrop-filter 제거 (페이지 최상단 블러 보이는 문제) */
#header-outer.transparent{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
/* Salient 기본 padding 제거 → 브라우저 상단과 헤더 사이 빈 공간 없앰 */
#header-outer{padding-top:0 !important;}

/* === ddnayo 외부 위젯 표 정리 === */
/* 표 배경 transparent (body 배경과 자연스럽게) */
.priceTable,.priceTable *,
#tblRate,#tblRate *,
[id^="ddnayo"] table,[id^="ddnayo"] table *,
.ddnayo table,.ddnayo table *{
	background:transparent !important;
	background-color:transparent !important;
}
/* 가독성을 위한 1px 셀 라인 */
.priceTable,#tblRate,[id^="ddnayo"] table,.ddnayo table{
	border-collapse:collapse !important;
}
.priceTable th,.priceTable td,
#tblRate th,#tblRate td,
[id^="ddnayo"] table th,[id^="ddnayo"] table td,
.ddnayo table th,.ddnayo table td{
	border:1px solid rgba(0,0,0,.1) !important;
	text-align:center !important;
}
/* 최상단 날짜·요일 행만 검정 20% 배경 */
.priceTable thead th,.priceTable thead td,
.priceTable > tbody > tr:first-child th,.priceTable > tbody > tr:first-child td,
#tblRate tr.head td,#tblRate tr.head th{
	background:rgba(0,0,0,.05) !important;
	background-color:rgba(0,0,0,.05) !important;
}
/* 예약가능 행 글씨색 red */
#tblRate tr.state td,#tblRate tr.state td *{color:red !important;}

/* ddnayo 주간 네비게이션 화살표 — CSS border 삼각형 */
.wrap_ddnayo .week_date .prv,
.wrap_ddnayo .week_date .next{
	background:none !important;
	background-image:none !important;
	width:28px !important;
	height:28px !important;
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	user-select:none;
	vertical-align:middle;
	font-size:0 !important;
}
.wrap_ddnayo .week_date .prv::before,
.wrap_ddnayo .week_date .next::before{
	content:"";
	display:inline-block;
	width:0;height:0;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
.wrap_ddnayo .week_date .prv::before{border-right:7px solid #222;}
.wrap_ddnayo .week_date .next::before{border-left:7px solid #222;}

/* === 모바일 (≤768px) === */
@media(max-width:768px){
	/* ddnayo 풀와이드 컨테이너 — 부모 vc_column 패딩 무시하고 뷰포트 좌우 10px까지 확장 */
	.ddnayo.room_daily_price{
		position:relative !important;
		left:50% !important;
		right:50% !important;
		margin-left:calc(-50vw + 10px) !important;
		margin-right:calc(-50vw + 10px) !important;
		width:calc(100vw - 20px) !important;
		max-width:none !important;
	}
	.ddnayo.room_daily_price .room_rprice{padding:0 !important;}

	/* ddnayo 표 — 풀와이드 + fixed layout */
	.priceTable,#tblRate,[id^="ddnayo"] table,.ddnayo table{
		width:100% !important;
		table-layout:fixed !important;
	}
	.priceTable th,.priceTable td,
	.priceTable th *,.priceTable td *,
	#tblRate th,#tblRate td,
	#tblRate th *,#tblRate td *,
	[id^="ddnayo"] table th,[id^="ddnayo"] table td,
	[id^="ddnayo"] table th *,[id^="ddnayo"] table td *,
	.ddnayo table th,.ddnayo table td,
	.ddnayo table th *,.ddnayo table td *{
		font-size:14px !important;
		padding:10px !important;
		line-height:1.4 !important;
		white-space:normal !important;
		word-break:auto-phrase !important;
		overflow-wrap:anywhere !important;
		text-align:center !important;
	}

	/* TablePress 표 — 모바일 컴팩트 */
	.tablepress{
		width:100% !important;
		max-width:100% !important;
		table-layout:fixed !important;
	}
	.tablepress td,.tablepress th,
	.tablepress td *,.tablepress th *{
		font-size:10px !important;
		line-height:14px !important;
		letter-spacing:-0.04em !important;
		word-break:keep-all !important;
		overflow-wrap:break-word !important;
		padding:6px 4px !important;
	}
}

/* === 모바일/태블릿 (≤999px) — WPBakery row + 헤더 패딩 보정 === */
@media(max-width:999px){
	.vc_row.top-level.full-width-section:not(.full-width-ns)>.span_12{
		padding-top:0 !important;
	}
	#header-outer{padding-top:12px !important;}
}

/* ============================================================
 * [통합 오버라이드 v6] 모든 ddnayo 표 + priceTable + tablepress 모바일 통합 스타일
 * 적용일: 2026-05-21
 * 양 사이트(탬플릿/클론) 동일 적용
 * 변경 요지:
 *   v4: 광범위 10px 적용 (일별요금표 OK, priceTable 컬럼 폭 불균형)
 *   v5: priceTable 만 타깃 (일별요금표 14px 유지 → 좁은 모바일에서 글자 세로 떨어짐)
 *   v6: 광범위 10px + priceTable 컬럼 폭 분배 + 금액 nowrap (둘 다 해결)
 * ============================================================ */
@media(max-width:768px){
	/* 모든 ddnayo/priceTable/tblRate 표 fixed layout + 컴팩트 셀 */
	.priceTable,#tblRate,
	[id^="ddnayo"] table,.ddnayo table{
		width:100% !important;
		max-width:100% !important;
		table-layout:fixed !important;
		border-collapse:collapse !important;
	}

	.priceTable th,.priceTable td,
	.priceTable th *,.priceTable td *,
	#tblRate th,#tblRate td,
	#tblRate th *,#tblRate td *,
	[id^="ddnayo"] table th,[id^="ddnayo"] table td,
	[id^="ddnayo"] table th *,[id^="ddnayo"] table td *,
	.ddnayo table th,.ddnayo table td,
	.ddnayo table th *,.ddnayo table td *{
		font-size:10px !important;
		line-height:13px !important;
		letter-spacing:-0.04em !important;
		word-break:keep-all !important;
		overflow-wrap:break-word !important;
		padding:5px 3px !important;
		text-align:center !important;
		vertical-align:middle !important;
	}

	/* priceTable 금액 셀(td.wk / td.ad) 한 줄 표시 강제 */
	.priceTable td.wk,.priceTable td.ad,
	.priceTable td.wk *,.priceTable td.ad *{
		font-size:9px !important;
		letter-spacing:-0.06em !important;
		white-space:nowrap !important;
		overflow:hidden !important;
	}

	/* priceTable 컬럼 폭 분배 (총합 100%) */
	.priceTable .nm{ width:13% !important; }
	.priceTable .sz{ width:8% !important; }
	.priceTable .ss{ width:10% !important; }
	.priceTable .wk{ width:12% !important; }
	.priceTable th.ad[colspan="3"]{ width:33% !important; }
	.priceTable .ad{ width:11% !important; }

	/* priceTable nm 셀 정리 */
	.priceTable td.nm p,
	.priceTable td.nm .small{
		margin:0 !important;
		padding:0 !important;
		line-height:1.15 !important;
	}
	.priceTable td.nm .small{
		font-size:8px !important;
		opacity:.75;
		display:block;
		margin-top:1px !important;
	}

	/* TablePress 표 - 동일 컴팩트 스타일 */
	.tablepress td,.tablepress th,
	.tablepress td *,.tablepress th *{
		font-size:10px !important;
		line-height:13px !important;
		letter-spacing:-0.04em !important;
		word-break:keep-all !important;
		overflow-wrap:break-word !important;
		padding:5px 3px !important;
	}
}

/* ============================================================
 * [작업물 #2 / v7] smen-pinned 갤러리 - 이미지 원본 비율 그대로 표시 (잘림 X, letterbox X)
 * 적용일: 2026-05-21
 *
 * 문제: .smen-pinned__main { aspect-ratio: 16/9 } + img { object-fit: cover }
 *      → 정사각형/세로 이미지가 16:9에 cover로 채워지며 상하/좌우 일부가 잘림
 * 해결: aspect-ratio 해제, active 슬라이드만 relative로 컨테이너 높이 결정,
 *      비활성 슬라이드는 absolute로 동일 위치에 겹침 (페이드 전환 유지),
 *      이미지는 width:100%/height:auto/object-fit:unset 로 자연 비율 표시.
 * 영향: 썸네일(.smen-pinned__thumbs)은 미수정 - 정사각형 cover 유지.
 * ============================================================ */
.smen-pinned__main{
	aspect-ratio:auto !important;
	height:auto !important;
	min-height:0 !important;
}
.smen-pinned__image{
	position:absolute !important;
	top:0 !important;
	left:0 !important;
	width:100% !important;
	height:auto !important;
	aspect-ratio:auto !important;
}
.smen-pinned__image.is-active{
	position:relative !important;
}
.smen-pinned__main > img,
.smen-pinned__image > img{
	width:100% !important;
	height:auto !important;
	max-width:100% !important;
	max-height:none !important;
	object-fit:unset !important;
	object-position:initial !important;
	display:block !important;
}