/* ===== externalV2 set.css — Figma YBS-B2C (720-22309) ===== */
html, body { overflow-x: hidden; }

button, input, select, textarea {
	font-family: inherit;
}

/* ── Base font ── */
.yapen-container, .yapen-setStepContainer, .yapen-roomCheckAlertLayer {
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
		'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
		'Segoe UI Symbol', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Tokens ── */
:root {
	--color-text-main: #1b1c1f;
	--color-text-sub: #6e6f73;
	--color-text-medium: #8b8d92;
	--color-fill-weak: #f7f8fb;
	--color-line-weak: #e9eaef;
	--color-line-medium: #8b8d92;
	--color-static-white: #fff;
	--color-red-600: #dc0328;
	--color-site-pay: #6F56FA;
	--color-primary: #4154ff;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--sp-4: 4px;
	--sp-6: 6px;
	--sp-8: 8px;
	--sp-12: 12px;
	--sp-16: 16px;
}

/* ===== V2 GNB Header Override (Figma 222:10050) ===== */
.yapen-header {
	width: 100%; padding: 0; text-align: center;
	border-bottom: 1px solid var(--color-line-weak);
	position: fixed; top: 0; left: 0; z-index: 11;
	background-color: var(--color-static-white);
	height: 60px; box-sizing: border-box;
	display: flex; justify-content: center;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
		'Noto Sans KR', 'Malgun Gothic', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.yapen-header .yapen-headerLayer {
	max-width: 1280px; width: 100%; min-width: 0; padding: 0 24px; margin: 0 auto;
	box-sizing: border-box; /* PENCO-346 */
	display: flex; align-items: center; justify-content: space-between;
	height: 100%; text-align: left; position: relative;
	box-sizing: border-box;
}
.yapen-header .yapen-headerLayer .headerPensionName,
.yapen-header .yapen-headerLayer .headerPensionName:hover,
.yapen-header .yapen-headerLayer .headerPensionName:focus,
.yapen-header .yapen-headerLayer .headerPensionName:visited,
.yapen-header .yapen-headerLayer .headerPensionName:active {
	font-size: 20px; font-weight: 700; color: #3c3d40;
	line-height: 24px; order: -1; flex: 1;
	text-decoration: none; cursor: pointer; border-bottom: none;
}
.yapen-header .yapen-headerLayer .yapen-header-float-r {
	float: none; position: static; right: auto;
	display: flex; align-items: flex-end; gap: 40px; height: 100%;
}
.yapen-header .yapen-headerLayer .headerSite {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	height: 60px; padding: 20px 0 0; margin: 0;
	font-size: 16px; font-weight: 500; color: var(--color-text-main);
	cursor: pointer; position: relative; box-sizing: border-box; white-space: nowrap; line-height: 19px;
}
.yapen-header .yapen-headerLayer .headerSite:hover { color: var(--color-text-main); }
.yapen-header .yapen-headerLayer .headerSite.on { font-weight: 700; color: var(--color-primary); }
.yapen-header .yapen-headerLayer .headerSite.on::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-primary);
}
.yapen-header .yapen-headerLayer .lineBar { display: none; }
.yapen-header .yapen-headerLayer .viewCeoBtn { display: none; }
.yapen-header .yapen-headerLayer .yapen-header-menu-icon { display: none; }
.yapen-header .yapen-headerLayer .yapen-header-float-r .yapen-header-menu-close-layer { display: none; }
.yapen-header .yapen-headerLayer .yapen-header-float-r .yapen-header-info-layer { display: none; }

/* ── Base: 테마 CSS의 .yapen-container { width:1024px; min-width:600px } 오버라이드 ── */
.yapen-container {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 60px 0 0 0;
	min-height: calc(100vh - 60px);
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	top: auto;
}
.yapen-setContainer { margin: 0 auto; }

/* 푸터 하단 고정: 콘텐츠가 적을 때도 푸터가 뷰포트 하단에 위치 */
.yapen-container > .v2-footer {
	margin-top: auto;
	flex-shrink: 0;
}

/* ── Outer Wrap (Figma 720:22432) ── */
.yapen-setMainGrid {
	display: flex;
	width: 1280px;
	max-width: 100%;
	padding: 0 24px;
	align-items: flex-start;
	gap: 40px;
	box-sizing: border-box;
	margin: 0 auto;
}

/* ── Inner Wrap (Figma 720:22433): 달력 + 객실/옵션 ── */
.v2-mainWrap {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex: 1;
	min-width: 0;
}

/* ── Left panel: 체크인 날짜 — PENCO-352: [디자인QA] 달력·날짜 영역 (Figma 720:22434~22438, 300px) ── */
.yapen-setPanel--date { width: 300px; flex-shrink: 0; padding-top: 40px; }
.yapen-setPanelTitle {
	font-size: 16px; font-weight: 700; color: var(--color-text-main);
	margin: 0 0 16px; line-height: 19px;
}

/* Date display box (Figma 1534:25438 SingleDatePicker — 높이 44, 16px/700) */
.v2-dateDisplay {
	display: flex; align-items: center; justify-content: center;
	height: 44px; min-height: 44px; box-sizing: border-box;
	border: 1px solid var(--color-line-weak); border-radius: var(--radius-lg);
	padding: 0 16px;
	font-size: 16px; font-weight: 700; color: var(--color-text-main);
	line-height: 19px;
	text-align: center; cursor: default; margin-bottom: 8px;
}

/* Calendar bordered container */
.v2-calendarWrap {
	border: 1px solid var(--color-line-weak); border-radius: var(--radius-lg);
	padding: 12px; background: var(--color-static-white);
}

/* Calendar header (Figma 1534:25438 — 아이콘 양 끝 배치) */
.yapen-setHeadLayer { width: 100%; position: relative; font-size: 12px; line-height: 14px; }
.yapen-setHeadLayer .yapen-setMonth {
	margin-bottom: 8px;
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; gap: 8px;
}
.yapen-setHeadLayer .yapen-setMonth .monthInfo {
	flex: 1; text-align: center;
	font-size: 14px; line-height: 17px; font-weight: 700; color: var(--color-text-main);
}
.yapen-setHeadLayer .yapen-setMonth .prevMonth,
.yapen-setHeadLayer .yapen-setMonth .nextMonth {
	cursor: pointer; width: 32px; height: 32px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: none; padding: 0; border-radius: 6px;
}
.yapen-setHeadLayer .yapen-setMonth .prevMonth svg,
.yapen-setHeadLayer .yapen-setMonth .nextMonth svg {
	display: block; width: 32px; height: 32px;
}
.yapen-setHeadLayer .yapen-setMonth .nextMonth svg { transform: rotate(180deg); }
.yapen-setHeadLayer .yapen-setMonth .prevMonth:hover,
.yapen-setHeadLayer .yapen-setMonth .nextMonth:hover { background: var(--color-fill-weak); }
.yapen-setHeadLayer .yapen-setMonth .prevMonth.dim,
.yapen-setHeadLayer .yapen-setMonth .nextMonth.dim { cursor: default; pointer-events: none; }
.yapen-setHeadLayer .yapen-setMonth .prevMonth.dim svg path,
.yapen-setHeadLayer .yapen-setMonth .nextMonth.dim svg path { fill: var(--color-line-weak); }
.yapen-setHeadLayer .yapen-setMonth .todayInfoText { display: none; }

/* Calendar table (Figma 1534:25438 — 요일 700, 토요일 블루 제거, 요일 하단 divider, 선택 36×36 round 8) */
.yapen-setCalendarLayer { width: 100%; margin-top: 8px; }
.yapen-calendarTbl { width: 100%; table-layout: fixed; word-break: break-all; border-collapse: collapse; }
.yapen-calendarTbl thead tr th {
	text-align: center; font-size: 12px; line-height: 14px; font-weight: 400;
	height: 28px; padding: 0; vertical-align: middle;
	color: var(--color-text-sub);
	border-bottom: 1px solid var(--color-line-weak);
}
.yapen-calendarTbl thead tr th.satDay { color: var(--color-text-sub); }
.yapen-calendarTbl thead tr th.sunDay { color: var(--color-red-600); }
.yapen-calendarTbl tbody tr:first-child td { padding-top: 8px; }
.yapen-calendarTbl tbody tr td {
	background: var(--color-static-white); text-align: center; font-size: 14px; line-height: 17px; font-weight: 700;
	padding: 0; color: var(--color-text-main); cursor: pointer; position: relative; vertical-align: middle;
}
.yapen-calendarTbl tbody tr td.satDay { color: var(--color-text-main); }
.yapen-calendarTbl tbody tr td.sunDay { color: var(--color-red-600); }
.yapen-calendarTbl tbody tr td.block { color: #c2c2c2; cursor: default; }
/* 주문서 달력(Figma 720:22438): 예약종료 문구 없음, 날짜만 표시·비활성은 회색 */
.yapen-calendarTbl tbody tr td .dayText { padding: 10px 0; position: relative; font-size: 14px; line-height: 17px; }
.yapen-calendarTbl tbody tr td .dayText label { z-index: 1; position: relative; cursor: pointer; font-size: 14px; line-height: 17px; }
.yapen-calendarTbl tbody tr td .dayText.selectText { color: var(--color-static-white); }
.yapen-calendarTbl tbody tr td .dayText .select {
	background-color: var(--color-text-main); border-radius: 8px; z-index: 0;
	position: absolute; width: 36px; height: 36px; top: 50%; margin-top: -18px; left: 50%; margin-left: -18px;
}
.yapen-calendarTbl tbody tr td.v2-cal-empty { cursor: default; pointer-events: none; }
.yapen-calendarTbl tbody tr td.v2-cal-empty .dayText { cursor: default; }

/* MessageBox: period info */
.yapen-setDateInfoBox {
	display: flex; align-items: center; gap: 8px;
	background: var(--color-fill-weak); border-radius: var(--radius-lg);
	padding: 12px 16px; margin-top: 16px; font-size: 13px; line-height: 16px; color: var(--color-text-main);
}
.yapen-setDateInfoBox .yapen-infoIcon { flex-shrink: 0; }
.yapen-setDateInfoBox .yapen-setDatePriceTitle { font-size: 13px; line-height: 16px; color: var(--color-text-main); }
.yapen-setDateInfoBox .yapen-setDatePriceTitle b { font-weight: 700; }

/* Hidden pension info (still in DOM for potential use) */
.yapen-pensionInfoLayer { display: none; }
.yapen-setDateInfoTitle { display: none; }

/* ── Center scroll wrapper (PENCO-351: PC에서 객실/옵션만 스크롤) ── */
.v2-centerScroll {
	display: block;
}

/* ── Center tab header (Figma 720:22407 / 1589:34378) — 객실·옵션 리스트 스크롤 시 상단 고정 + 배경 blur (PENCO-351) */
/* Figma Tab(1589:33064): backdrop-blur 6.5px, bg white / alpha 0.8, 구분선 2×12 */
.v2-centerTab {
	display: flex; align-items: center; gap: 12px;
	padding-top: 40px; padding-bottom: 16px;
	position: sticky; top: 0; z-index: 5;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(6.5px);
	-webkit-backdrop-filter: blur(6.5px);
}
.v2-centerTab-item {
	font-size: 16px; font-weight: 700; line-height: 19px;
	color: var(--color-text-medium); cursor: pointer;
	transition: color .15s;
}
.v2-centerTab-item.active { color: var(--color-text-main); }
.v2-centerTab-divider { width: 2px; height: 12px; background: #e9eaef; flex-shrink: 0; }

/* ── Center panel: 객실 + 옵션 (Figma 720:22440: flex-1) ── */
.yapen-setPanel--center { flex: 1; min-width: 0; }

/* Room layer */
.yapen-setRoomLayer { width: 100%; position: relative; }
.yapen-setRoomLayer .yapen-setRoomTitle {
	font-size: 16px; font-weight: 700; color: var(--color-text-main);
	padding: 0 0 16px; margin: 0; line-height: 19px; border: none;
}
.yapen-setRoomLayer .yapen-loadingGif { height: 40px; margin: 40px auto; display: block; }
/* Figma 720:55467 리스트 CASE – width 572, stroke inside */
.yapen-setRoomLayer .yapen-setRoomContent {
	width: 572px; max-width: 100%; box-sizing: border-box;
	min-height: 100px; border: 1px solid var(--color-line-weak);
	border-radius: var(--radius-lg); overflow: hidden;
    border-bottom: 0;
}

/* Room list items — PENCO-348 객실 리스트 / PENCO-353 예약가능 배지 숨김은 .yapen-revPossIcon 규칙 참고 (Figma List_PC, 720:22353) */
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list {
	padding: var(--sp-16); font-size: 0; background: var(--color-static-white);
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 12px;
	row-gap: 0;
	align-items: start;
	transition: background .15s;
	border-bottom: 1px solid #f2f3f7;
}
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list:last-child { border-bottom: none; }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list:hover { background: #fbfbfd; }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list.on { background: #ffffff; }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list.on:hover { background: #fbfbfd; }

.yapen-setRoomLayer .checkSec { grid-column: 1; grid-row: 1 / 4; display: flex; align-items: flex-start; flex-shrink: 0; padding-top: 2px; }
/* PENCO-355: 단일사업자=checkbox(사각), 다중사업자=radio(원형) — 서버가 setRoom HTML에서 타입 구분 */
.yapen-setRoomLayer .checkSec input[type=checkbox] {
	width: 20px; height: 20px; border: 1px solid #8b8d92;
	border-radius: 4px; cursor: pointer;
	accent-color: var(--color-text-main);
	-webkit-appearance: none; appearance: none;
	background: var(--color-static-white); position: relative;
}
.yapen-setRoomLayer .checkSec input[type=radio] {
	width: 20px; height: 20px; border: 1px solid #8b8d92;
	border-radius: 50%; cursor: pointer;
	accent-color: var(--color-text-main);
	-webkit-appearance: none; appearance: none;
	background: var(--color-static-white); position: relative;
}
.yapen-setRoomLayer .checkSec input[type=checkbox]:checked,
.yapen-setRoomLayer .checkSec input[type=radio]:checked {
	background: var(--color-text-main); border-color: var(--color-text-main);
}
/* 체크박스 체크마크: v2-checkbox-unified.css (PENCO-337) */
.yapen-setRoomLayer .checkSec input[type=radio]:checked::after {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 8px; height: 8px; margin: -4px 0 0 -4px;
	background: var(--color-static-white); border-radius: 50%;
}

/* Thumbnail: 131x131, 8px radius (Figma 720:57818) */
.yapen-setRoomLayer .roomImageLayer { grid-column: 2; grid-row: 1 / 4; width: 131px; height: 131px; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; }
.yapen-setRoomLayer .roomImageLayer .roomImage { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
/* PENCO-374: 이미지 없는 케이스 — NOL 로고 플레이스홀더 (Figma 1711:1004343) */
.yapen-setRoomLayer .roomImageLayer.v2-noimage {
	cursor: default;
	background: url('/images/nol-placeholder.svg') center / cover no-repeat;
}
/* Figma ProductBadge: 이미지 갯수 카운트 뱃지 */
.yapen-setRoomLayer .v2-roomImgBadge {
	position: absolute; right: 8px; bottom: 8px;
	display: none; align-items: center; gap: 1px;
	min-height: 22px; padding: 4px 6px; box-sizing: border-box;
	background: rgba(0, 0, 0, 0.6); border-radius: 6px;
	font-size: 12px; font-weight: 700; color: var(--color-static-white);
	white-space: nowrap; cursor: pointer; line-height: 14px;
}
.yapen-setRoomLayer .v2-roomImgBadge.v2-loaded { display: inline-flex; }

/* ===== V2 객실 이미지 뷰어 (Figma PC 915:350518 / MO 925:508057) ===== */
.v2-roomPhotoScrim {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(0, 0, 0, 0.5);
}
.v2-roomPhotoModal {
	position: fixed; inset: 0; z-index: 101;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; box-sizing: border-box;
}
.v2-roomPhotoModal-inner {
	position: relative;
	width: 100%; max-width: 960px; max-height: 100%;
	background: var(--color-static-white);
	border: 1px solid var(--color-line-weak);
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	gap: 16px;
	padding: 24px;
	box-sizing: border-box;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.v2-roomPhotoModal-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 0 20px 0; flex-shrink: 0;
}
.v2-roomPhotoModal-main { padding: 0; }
.v2-roomPhotoModal-thumbs { padding: 0; }
.v2-roomPhotoModal-back {
	display: none;
	flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: none; background: none;
	cursor: pointer; border-radius: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231b1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center no-repeat;
	background-size: 24px;
}
.v2-roomPhotoModal-title {
	margin: 0; font-size: 24px; font-weight: 700; color: var(--color-text-main);
	line-height: 29px; flex: 1; text-align: left;
}
.v2-roomPhotoModal-close {
	width: 44px; height: 44px; padding: 0; border: none; background: none;
	cursor: pointer; border-radius: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231b1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center no-repeat;
	background-size: 24px;
}
/* Figma 915:351270 PC — 블랙 opacity 네모 버튼, 썸네일 선택 100% / 미선택 60% */
.v2-roomPhotoModal-main {
	position: relative; flex: 1; min-height: 0;
	display: flex; align-items: center; justify-content: center;
	box-sizing: border-box;
}
.v2-roomPhotoModal-imgWrap {
	position: relative;
	width: 100%; height: 600px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; border-radius: var(--radius-lg);
}
.v2-roomPhotoModal-img {
	max-width: 100%; max-height: 100%; object-fit: contain;
}
.v2-roomPhotoModal-prev,
.v2-roomPhotoModal-next {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 2;
	width: 48px; height: 48px; padding: 0; border: none;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.45);
	cursor: pointer; flex-shrink: 0;
	background-repeat: no-repeat; background-position: center; background-size: 30px;
	transition: background-color 0.15s;
}
.v2-roomPhotoModal-prev {
	left: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z' fill='%23fff'/%3E%3C/svg%3E");
}
.v2-roomPhotoModal-next {
	right: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z' fill='%23fff'/%3E%3C/svg%3E");
}
.v2-roomPhotoModal-prev:hover,
.v2-roomPhotoModal-next:hover {
	background-color: rgba(0, 0, 0, 0.65);
}
.v2-roomPhotoModal-prev.off,
.v2-roomPhotoModal-next.off {
	opacity: 0.35; pointer-events: none; cursor: default;
}
.v2-roomPhotoModal-thumbs {
	flex-shrink: 0;
}
.v2-roomPhotoModal-thumbList {
	display: flex; gap: 7px; list-style: none; margin: 0; padding: 0;
	overflow-x: auto; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.v2-roomPhotoModal-thumbList li {
	flex-shrink: 0; width: 90px; height: 60px; border-radius: 8px;
	overflow: hidden; cursor: pointer; border: 2px solid transparent;
	opacity: 0.6;
}
.v2-roomPhotoModal-thumbList li.on {
	opacity: 1;
}
.v2-roomPhotoModal-thumbList li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-roomPhotoModal-badge {
	display: none;
}

/* Figma MO 925:508057 — < 버튼, 이미지 뷰포트 100% */
@media only screen and (max-width: 1279px) {
	.v2-roomPhotoModal { align-items: flex-start; padding: 0; }
	.v2-roomPhotoModal-inner {
		max-width: none; max-height: none; width: 100%;
		border-radius: 0; border: none;
		box-shadow: none; min-height: 100vh;
		padding: 0;
	}
	.v2-roomPhotoModal-header {
		padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
		flex-shrink: 0;
	}
	/* PENCO-372: back 아이콘 < 디자인으로 교체, 24x24 */
	.v2-roomPhotoModal-back {
		display: flex;
		align-items: center; justify-content: center;
		flex: 0 0 24px; width: 24px; height: 24px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9402 5.31451C16.4017 5.75094 16.4219 6.47879 15.9855 6.94022L10.7329 12.4938L15.9855 18.0473C16.4219 18.5087 16.4017 19.2366 15.9402 19.673C15.4788 20.1094 14.7509 20.0892 14.3145 19.6277L8.31451 13.284C7.89516 12.8406 7.89516 12.1469 8.31451 11.7035L14.3145 5.35978C14.7509 4.89835 15.4788 4.87808 15.9402 5.31451Z' fill='%231B1C1F'/%3E%3C/svg%3E");
		background-size: 24px; background-position: center; background-repeat: no-repeat;
	}
	/* PENCO-372: X 버튼 모바일에서 숨김 (back과 중복) */
	.v2-roomPhotoModal-close { display: none; }
	.v2-roomPhotoModal-title { font-size: 18px; line-height: 21px; text-align: left; padding-left: 8px; }
	.v2-roomPhotoModal-main {
		padding: 0; flex: 1; min-height: 0;
		align-items: center; justify-content: center;
		width: 100%;
	}
	.v2-roomPhotoModal-imgWrap {
		height: auto; max-height: 60vh; width: 100%;
		padding: 0; border-radius: 0;
	}
	.v2-roomPhotoModal-img {
		width: 100%; max-width: 100vw; object-fit: contain;
	}
	.v2-roomPhotoModal-prev, .v2-roomPhotoModal-next { display: none; }
	.v2-roomPhotoModal-thumbs { display: none; }
	/* PENCO-372: 순서 카운트 뱃지 사이즈 조정 */
	.v2-roomPhotoModal-badge {
		display: inline-flex !important;
		align-items: center; justify-content: center;
		position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
		height: 18px; padding: 0 6px; border-radius: 9px;
		background: rgba(0, 0, 0, 0.6); color: var(--color-static-white);
		font-size: 10px; line-height: 1; font-weight: 700;
		white-space: nowrap; box-sizing: border-box;
	}
}

/* Contents: roomInfoContent 투명화 (grid 자식으로 노출) */
.yapen-setRoomLayer .roomInfoContent { display: contents; }
.yapen-setRoomLayer .roomNameLayer { grid-column: 3; grid-row: 1; cursor: default; min-width: 0; padding-top: 4px; }
/* Title: 객실명 + 기준/최대 4px gap (Figma) */
.yapen-setRoomLayer .roomNameLayer .roomName { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 16px; font-weight: 700; color: var(--color-text-main); word-break: break-all; line-height: 19px; }
.yapen-setRoomLayer .roomNameLayer .roomName.block { color: #c2c2c2; }
.yapen-setRoomLayer .roomNameLayer .roomSize { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-sub); margin: 0; }
.yapen-setRoomLayer .roomNameLayer .roomSize.block { color: #c2c2c2; }
.yapen-setRoomLayer .roomNameLayer .roomPeople { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-sub); margin: 0; }
/* Figma: 금액은 하단 한 번만 표시. 객실명 옆 roomResultPrice(상단 가격) 미사용 */
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .roomNameLayer .yapen-roomPrice-layer { display: none; }
/* PENCO-353: Figma 720:22353 리스트에는 "예약가능" 배지 없음 — revPossIcon만 비표시. 입금대기/특가는 720:55467 Disabled 케이스용 유지 */
.yapen-setRoomLayer .roomNameLayer .yapen-revPossIcon {
	display: none !important;
}
/* Figma 720:55467 Disabled(예약완료): 배지 표시, 객실명 #1b1c1f */
.yapen-setRoomLayer .roomNameLayer .yapen-revWaitIcon,
.yapen-setRoomLayer .roomNameLayer .yapen-revSaleIcon {
	display: inline-block;
	font-size: 12px; line-height: 14px; font-weight: 500; padding: 2px 6px; border-radius: 4px;
	margin-bottom: 4px;
}
.yapen-setRoomLayer .roomNameLayer .yapen-revWaitIcon { background: #fff8e6; color: #b8860b; }
.yapen-setRoomLayer .roomNameLayer .yapen-revSaleIcon { background: var(--color-fill-weak); color: var(--color-text-sub); }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .roomNameLayer .roomName.block { color: #1b1c1f; }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .checkSec input:disabled { cursor: default; opacity: 0.7; }

/* Room dropdown area (Figma: 선택 시 bg #ffffff) */
.yapen-setRoomLayer .roomRevContent {
	grid-column: 3; grid-row: 2;
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	background: var(--color-fill-weak); border-radius: 8px;
	padding: var(--sp-12); box-sizing: border-box;
	margin-top: 12px;
}
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list.on .roomRevContent { background: var(--color-fill-weak); }

.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-revDay-layer {
	display: inline-flex; flex-direction: column; gap: 6px;
}
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-revDay-layer .yapen-revDay-title { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-main); }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-revDay-layer .yapen-revDay-title.block { color: #ccc; }

.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-revPeople-layer {
	display: inline-flex; flex-direction: row; gap: 6px; align-items: flex-end;
}

.yapen-setRoomLayer .peopleLayer { display: inline-flex; flex-direction: column; gap: 6px; min-width: 60px; }
.yapen-setRoomLayer .peopleLayer label { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-main); }
.yapen-setRoomLayer .peopleLayer.block label { color: #ccc; }

.yapen-setRoomLayer select {
	min-width: 60px; padding: 6px 28px 6px 12px; border: 1px solid #dadbdf;
	border-radius: var(--radius-md); color: var(--color-text-main); font-size: 14px; line-height: 17px;
	background: var(--color-static-white); height: 32px; box-sizing: border-box;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52859 5.52859C3.78894 5.26824 4.21106 5.26824 4.47141 5.52859L8 9.05719L11.5286 5.52859C11.7889 5.26824 12.2111 5.26824 12.4714 5.52859C12.7318 5.78894 12.7318 6.21106 12.4714 6.47141L8.47141 10.4714C8.21106 10.7318 7.78894 10.7318 7.52859 10.4714L3.52859 6.47141C3.26824 6.21106 3.26824 5.78894 3.52859 5.52859Z' fill='%236e6f73'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px;
}
.yapen-setRoomLayer select:focus { outline: none; border-color: #dadbdf; }
.yapen-setRoomLayer select:disabled {
	color: #c7c8cd; border-color: #dadbdf; background-color: #f7f8fb;
	background-image: none;
}
.yapen-setRoomLayer .yapen-revDay { width: 90px; margin-top: 0; }
.yapen-setRoomLayer .yapen-peopleSet { width: 75px; margin-top: 0; }

/* Room price area (Figma 720:57372, 720:57818 – Price_Area: 인원 추가금 좌측, 결제가 우측) */
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-roomTotalPrice-layer {
	grid-column: 3; grid-row: 3;
	width: 100%; min-width: 0;
	display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: flex-end;
	padding: 12px 0 0; box-sizing: border-box;
}
/* PC: 인원 추가금 있을 때 좌측(인원 추가금) / 우측(결제가) 배치 (Figma 720:57818) */
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-roomTotalPrice-layer.v2-has-addpay {
	justify-content: space-between;
}
/* DOM 순서가 결제가→인원추가금이므로, 시각적 순서를 인원추가금(좌) / 결제가(우)로 맞춤 */
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-roomTotalPrice-layer .roomPaySiteLayer { order: -1; }
.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .yapen-roomTotalPrice-layer .roomPayNowLayer { order: 0; }
.yapen-setRoomLayer .roomPriceLayer { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 14px; }
.yapen-setRoomLayer .roomPriceLayer .roomBasicPrice { font-size: 13px; line-height: 16px; text-decoration: line-through; color: var(--color-text-sub); }
.yapen-setRoomLayer .roomPriceLayer .roomBasicPrice.off { display: none; }
.yapen-setRoomLayer .roomPriceLayer .roomResultPrice { font-size: 16px; line-height: 19px; font-weight: 700; color: var(--color-text-main); }
.yapen-setRoomLayer .roomPriceLayer .roomResultPrice .roomPriceUnit { font-weight: 400; }
.yapen-setRoomLayer .roomPriceLayer .roomResultPrice.block { color: #c2c2c2; }

/* 인원 추가금 – Figma 720:57818 "현장 결제가" 영역 (인원 추가금 + ⓘ + 금액, gap 4px) */
.yapen-setRoomLayer .roomPaySiteLayer {
	display: inline-flex; flex-direction: row; align-items: center; gap: 4px;
	color: var(--color-text-sub); font-size: 12px; line-height: 14px; white-space: nowrap;
}
.yapen-setRoomLayer .roomPaySiteTitle { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-sub); display: inline-flex; align-items: center; gap: 2px; }
.yapen-setRoomLayer .roomPaySite { font-weight: 400; color: var(--color-text-sub); font-size: 12px; line-height: 14px; text-align: right; }
.yapen-setRoomLayer .roomPaySite .roomPriceUnit { font-weight: 400; }
.yapen-setRoomLayer .roomPaySite.block { color: #c2c2c2; }
.yapen-setRoomLayer .v2-addpay-help {
	display: inline-flex; align-items: center; justify-content: center;
	width: 14px; height: 14px; flex-shrink: 0;
	color: var(--color-text-sub); cursor: help;
	position: relative;
}
.yapen-setRoomLayer .v2-addpay-help svg { display: block; width: 14px; height: 14px; }
.v2-addpay-tooltip {
	position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
	z-index: 100; display: flex; flex-direction: column; align-items: center;
}
.v2-addpay-tooltip-arrow {
	width: 12px; height: 6px; flex-shrink: 0;
	background: #1b1c1f; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.v2-addpay-tooltip-body {
	background: #1b1c1f; color: #fff; border-radius: 6px;
	width: 141px; padding: 12px; box-sizing: border-box;
	font-size: 12px; line-height: 18px; font-weight: 400;
	font-family: 'Pretendard', sans-serif;
}

/* 결제가 – Figma: flex-grow, 우측 정렬 */
.yapen-setRoomLayer .roomPayNowLayer {
	display: inline-flex; flex: 1 0 0; flex-direction: row; align-items: center; gap: 4px; justify-content: flex-end;
	white-space: nowrap;
}
.yapen-setRoomLayer .roomPayNowTitle { display: none; }
.yapen-setRoomLayer .roomPayNow { font-weight: 700; color: var(--color-text-main); font-size: 16px; line-height: 19px; }
.yapen-setRoomLayer .roomPayNow .roomPriceUnit,
.yapen-setRoomLayer .roomPayNow .v2-price-unit { font-weight: 400; }
.yapen-setRoomLayer .roomPayNow.block { color: #c2c2c2; }

/* 할인 배지 – Figma 853:75159: 13px Bold red, 가격은 main color 유지 */
.yapen-setRoomLayer .roomSalePercent { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color-red-600); }
.yapen-setRoomLayer .roomSalePercent.off { display: none; }
.yapen-setRoomLayer .roomSalePercent.block { color: #c2c2c2; }

/* ── Option layer — PENCO-350: [디자인QA] 예약하기 옵션 리스트 (Figma 720:57901 옵션 CASE) ── */
.yapen-setOptionLayer { width: 100%; position: relative; margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }

.yapen-setOptionHeader { display: flex; flex-direction: column; gap: 4px; }
.yapen-setOptionTitle { font-size: 16px; font-weight: 700; color: var(--color-text-main); line-height: 19px; margin: 0; padding: 0; }
.yapen-setOptionSub { font-size: 14px; font-weight: 500; color: var(--color-text-sub); line-height: 17px; }

/* Option list (Figma 720:57902 Option — State=선택 전) */
.v2-optionList {
	border: 1px solid var(--color-line-weak);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-static-white);
}

.v2-optionItem {
	display: flex; gap: 12px;
    align-items: center;
	padding: 16px;
	background: var(--color-static-white);
	border-bottom: 1px solid #f2f3f7; /* fill/neutral/weak1 (Figma 720:57901) */
}
.v2-optionItem:last-child { border-bottom: none; }

.v2-optionItem.has-qty .v2-optionName { font-weight: 700; }

.v2-optionInfo {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.v2-optionName { font-size: 16px; font-weight: 500; color: var(--color-text-main); line-height: 19px; }
.v2-optionDesc { font-size: 12px; font-weight: 400; color: var(--color-text-sub); line-height: 14px; }

.v2-optionRight {
	display: flex; gap: 16px; align-items: center;
	flex-shrink: 0;
}

.v2-optionPriceArea {
	display: flex; gap: 6px; align-items: center; justify-content: flex-end;
}
/* ProductBadge: 현장결제 — theme=filledBasic size=small, bg #f2f3f7 (Figma 720:57902) */
.v2-optionBadge {
	display: inline-flex; align-items: center;
	height: 18px; min-height: 17px;
	padding: 2px 6px;
	background: #f2f3f7;
	border-radius: var(--radius-md);
	font-size: 10px; line-height: 12px; font-weight: 700; color: var(--color-text-sub);
	white-space: nowrap; box-sizing: border-box;
}
.v2-optionPrice { font-size: 16px; line-height: 19px; font-weight: 700; color: var(--color-text-main); white-space: nowrap; text-align: right; }
.v2-optionPriceUnit { font-weight: 400; }

/* Stepper (Figma 720:57901 / 720:80433 — Line/ic_remove, Line/ic_add) */
.v2-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
}
.v2-stepper-btn {
	box-sizing: border-box;
	width: 32px; height: 32px;
	min-width: 32px; min-height: 32px;
	display: flex; align-items: center; justify-content: center;
	padding: 4px 8px;
	background: var(--color-static-white);
	border: 1px solid var(--color-line-weak);
	font-family: inherit;
	color: var(--color-text-main);
	cursor: pointer;
	user-select: none;
	transition: background .1s, color .1s;
}
.v2-stepper-btn:hover:not(:disabled) { background: var(--color-fill-weak); }
.v2-stepper-btn:disabled {
	color: var(--color-line-weak);
	cursor: not-allowed;
}
.v2-stepper-btn:disabled:hover { background: var(--color-static-white); }
.v2-stepper-minus {
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	border-right: none;
}
.v2-stepper-plus {
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	border-left: none;
}
/* +/- 아이콘 (Figma Line/ic_remove, Line/ic_add — SVG inline) */
.v2-stepper-svg {
	display: block;
	width: 16px; height: 16px;
	flex-shrink: 0;
	pointer-events: none;
}
.v2-stepper-value {
	box-sizing: border-box;
	width: 32px; height: 32px;
	min-width: 32px; min-height: 32px;
	display: flex; align-items: center; justify-content: center;
	padding: 4px;
	border: 1px solid var(--color-line-weak);
	font-family: 'Pretendard Variable', Pretendard, sans-serif;
	font-size: 16px; font-weight: 700; line-height: 19px;
	color: var(--color-text-main);
	background: var(--color-static-white);
	flex-shrink: 0;
}
.v2-stepper-value.zero { color: var(--color-line-weak); }
/* 객실 미선택 시 Stepper 전체 Disabled (Figma 720:57901) */
.v2-no-room-selected .v2-stepper .v2-stepper-btn,
.v2-no-room-selected .v2-stepper .v2-stepper-value {
	color: var(--color-line-weak);
	background: var(--color-static-white);
}
.v2-no-room-selected .v2-stepper .v2-stepper-btn {
	cursor: not-allowed;
}

/* ── Right panel: 선택한 객실 — PENCO-354: [디자인QA] 우측 요약·빈 상태 (Figma 720:22469, 720:22380) · PENCO-349와 연계 ── */
.yapen-setPanel--selected {
	width: 300px; flex-shrink: 0; padding-top: 40px;
	position: sticky; top: 0;
	display: flex; flex-direction: column;
	gap: 16px;
}
/* PENCO-349: 즉시결제(.v2-bottom-pay) ↔ 예약하기(.yapen-revBtn)만 12px — flex gap 16px 유지, margin-top -4px. set.html에서 두 블록 사이 공백 없음(A+B 선택자) */
.yapen-setPanel--selected > .v2-bottom-pay + .yapen-revBtn {
	margin-top: -4px;
}

.v2-selected-title {
	display: flex; align-items: baseline; gap: 8px;
	font-size: 16px; font-weight: 700; color: var(--color-text-main);
	line-height: 19px;
}
.v2-selected-count { color: var(--color-text-medium); font-weight: 700; }
.v2-selected-count.active { color: var(--color-primary); }

/* Empty state (Figma 720:22380) */
.v2-empty-box {
	background: var(--color-fill-weak); border-radius: var(--radius-lg);
	height: 200px; width: 100%;
	display: flex; align-items: center; justify-content: center;
}
.v2-empty-box-text {
	font-size: 14px; font-weight: 500; color: var(--color-text-sub);
	line-height: 17px; text-align: center; white-space: nowrap;
}

.v2-price-summary {
	background: var(--color-fill-weak); border-radius: var(--radius-lg);
	padding: 16px; display: none; flex-direction: column; gap: 12px;
}
.v2-price-row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.v2-price-row--total .v2-price-label { font-weight: 700; }
.v2-price-row--sub .v2-price-label { font-weight: 500; }
.v2-price-label { font-size: 14px; font-weight: 700; color: var(--color-text-sub); line-height: 17px; white-space: nowrap; }
.v2-price-value { font-size: 14px; font-weight: 700; color: var(--color-text-main); line-height: 17px; text-align: right; flex: 1; min-width: 0; }
.v2-price-value span { font-weight: 700; }
.v2-price-value .v2-price-won { font-weight: 400; }
.v2-price-divider { height: 1px; background: #e9eaef; flex-shrink: 0; width: 100%; }

.v2-nowpay-inbox,
.v2-sitepay-inbox {
	display: flex; flex-direction: column; gap: 8px;
}
/* PENCO-349: 세부 내역 없을 때 불필요한 8px gap 제거 */
.v2-nowpay-details:empty { display: none !important; }
.v2-sitepay-inbox:not(:has(.v2-nowpay-details:not(:empty))) { gap: 0; }

/* Bottom 즉시 결제 (Figma: 16px Bold main / 18px Bold #4154ff) */
.v2-bottom-pay { display: none; flex-direction: column; gap: 12px; padding: 0 8px; }
.v2-bottom-pay-row {
	display: flex; align-items: center; justify-content: space-between;
	font-weight: 700; white-space: nowrap;
}
.v2-bottom-pay-label { font-size: 16px; font-weight: 700; color: var(--color-text-main); line-height: 19px; }
.v2-bottom-pay-amount { font-size: 18px; font-weight: 700; color: #4154ff; line-height: 21px; text-align: right; }
.v2-bottom-pay-amount .v2-price-won { font-weight: 400; }

.v2-nowpay-details { display: flex; flex-direction: column; gap: 6px; }
.v2-detail-row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.v2-detail-left {
	display: flex; align-items: center; gap: 2px;
	font-size: 12px; line-height: 14px; color: var(--color-text-sub); font-weight: 400;
	min-width: 0; flex: 1; overflow: hidden;
}
.v2-detail-left span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-detail-icon {
	flex-shrink: 0; width: 14px; height: 14px;
	display: flex; align-items: center; justify-content: center;
}
/* PENCO-349: 세부항목 아이콘 ⌞ (info 결제 내역과 동일) */
.v2-detail-icon::before {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath transform='translate(4.5,4.5)' d='M0 0.5C0 0.223858 0.223858 0 0.5 0C0.776142 0 1 0.223858 1 0.5V4H4.5C4.77614 4 5 4.22386 5 4.5C5 4.77614 4.77614 5 4.5 5H0.5C0.223858 5 0 4.77614 0 4.5V0.5Z' fill='%236E6F73'/%3E%3C/svg%3E") no-repeat center;
	background-size: 14px 14px;
}
.v2-detail-value .v2-detail-num { font-weight: 400; }
.v2-detail-value .v2-detail-won { font-weight: 400; }
.v2-detail-value {
	font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-main);
	text-align: right; width: 70px; flex-shrink: 0; white-space: nowrap;
}

/* 예약하기 button (Figma 44px, 8px radius) */
.yapen-revBtn {
	background: var(--color-primary); border: none; color: var(--color-static-white);
	height: 44px; min-height: 44px; padding: 0 16px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 700; line-height: 19px;
	cursor: pointer; border-radius: var(--radius-lg); width: 100%; box-sizing: border-box;
	transition: background-color .15s;
}
.yapen-revBtn:hover { background: #3345e0; }
.yapen-revBtn:focus-visible { outline: 2px solid var(--color-text-main); outline-offset: 2px; }

/* 하단 안내 (Figma 720:22424 footnote) */
.v2-selected-footnote {
	margin: 0; font-size: 12px; line-height: 18px;
	color: var(--color-text-medium); font-weight: 400;
}
.v2-selected-footnote strong { font-weight: 700; }

/* ── Step bar (mobile) ── */
.yapen-setStepContainer {
	position: fixed; top: 0; left: 0; width: 100%; height: 56px;
	border-bottom: 1px solid var(--color-line-weak); z-index: 12;
	background: var(--color-static-white); display: none;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.yapen-setStepContainer .yapen-setStepLayer { float: left; width: 33.3%; height: 56px; text-align: center; padding: 12px 0; box-sizing: border-box; }
.yapen-setStepContainer .yapen-setStepLayer.option { width: 25%; }
.yapen-setStepContainer .yapen-setStepLayer .yapen-setStepTitle { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color-text-medium); }
.yapen-setStepContainer .yapen-setStepLayer .yapen-setStepTitle.on { color: var(--color-text-main); }
.yapen-setStepContainer .yapen-setStepLayer .yapen-setStepText { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-sub); margin-top: 4px; }

/* ── Popup guide (existing feature) ── */
.yapen-popupGuideLayer { padding: 0; border: 1px solid #aaa; background: var(--color-static-white); position: absolute; z-index: 15; letter-spacing: .5px; line-height: 120%; top: 90px; left: 5px; width: 160px; display: none; }
.yapen-popupGuideLayer .yapen-popupGuideContent { padding: 10px; }
.yapen-popupGuideLayer .yapen-popupGuideContent .yapen-totalGuide { font-size: 12px; line-height: 14px; text-align: left; }

/* ── Alert layer ── */
.yapen-roomCheckAlertLayer { display: none; position: fixed; left: 50%; bottom: 2%; padding: 10px 16px; background: rgba(10,10,10,.7); color: var(--color-static-white); z-index: 13; opacity: 0; text-align: center; border-radius: var(--radius-lg); font-size: 13px; line-height: 16px; }

/* ── Date info elements (hidden but kept for JS) ── */
.dateInfoIcon { position: relative; top: 3px; cursor: pointer; width: 16px; height: 16px; display: inline-block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%231b1c1f'/%3E%3Cpath d='M8 7v3.5' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='5.2' r='.65' fill='white'/%3E%3C/svg%3E") no-repeat center; background-size: 16px 16px; }
.dateInfoIcon:hover { opacity: 0.7; }
.dateInfoAllLayer { position: absolute; z-index: 1; background: var(--color-static-white); border: 1px solid var(--color-line-weak); top: 5px; left: 0; padding: 10px; display: none; }

/* ── Mobile-only elements: hidden on desktop ── */
.v2-mo-bottomBar { display: none; }
.v2-mo-calSheet-overlay { display: none; }

/* ===== PENCO-351: PC — 체크인 날짜·선택한 객실 = 뷰포트 고정 / 객실·옵션만 v2-centerScroll 스크롤 / 탭 sticky + blur(6.5px) (Figma 1589:34378) ===== */
@media only screen and (min-width: 1280px) {
	.yapen-container:has(.yapen-setContainer) {
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.yapen-container:has(.yapen-setContainer) > .v2-footer {
		flex-shrink: 0;
	}
	.yapen-setContainer {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.yapen-setMainGrid {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		align-items: stretch;
		align-self: stretch;
	}
	.v2-mainWrap {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		align-items: stretch;
		align-self: stretch;
	}
	/* 좌: 체크인 날짜 — 뷰포트 고정, 스크롤 없음 */
	.yapen-setPanel--date {
		align-self: stretch;
		min-height: 0;
		max-height: none;
		overflow: hidden;
		overflow-x: hidden;
	}
	/* 중: 객실/옵션만 스크롤 */
	.yapen-setPanel--center {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.v2-centerScroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}
	/* 우: 선택한 객실 — 뷰포트 고정, 스크롤 없음 */
	.yapen-setPanel--selected {
		position: relative;
		top: auto;
		align-self: stretch;
		min-height: 0;
		max-height: none;
		overflow: hidden;
		overflow-x: hidden;
	}
	.v2-centerTab {
		z-index: 6;
		flex-shrink: 0;
	}
}

/* ===== Mobile (360–1279) Figma 274:12551 / 320:12377 / 320:12643 ===== */
@media only screen and (max-width: 1279px) {
	/* PENCO-369: 테마 CSS body overflow-x:hidden → overflow-y가 auto로 승격 → body가 scroll container가 되어 position:sticky 무효화.
	   body overflow를 visible로 오버라이드하여 sticky 정상 동작 (.yapen-container에 overflow-x:hidden 이미 적용됨) */
	html, body { overflow: visible !important; }

	/* ── GNB Header: mobile tabs ── */
	.yapen-header { height: auto; flex-direction: column; align-items: stretch; }
	.yapen-header .yapen-headerLayer {
		flex-direction: column; align-items: flex-start; height: auto; padding: 0 20px;
	}
	.yapen-header .yapen-headerLayer .headerPensionName,
	.yapen-header .yapen-headerLayer .headerPensionName:hover,
	.yapen-header .yapen-headerLayer .headerPensionName:focus,
	.yapen-header .yapen-headerLayer .headerPensionName:visited,
	.yapen-header .yapen-headerLayer .headerPensionName:active {
        font-size: 18px;
        line-height: 21px;
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 2px 16px;
        flex: none;
        width: 100%;
        box-sizing: border-box;
        max-width: none;
        text-align: left;
	}
	.yapen-header .yapen-headerLayer .yapen-header-float-r {
		position: static; right: auto; float: none;
		display: flex; align-items: flex-end;
		width: 100%; gap: 0; height: 48px; justify-content: flex-start;
		padding: 0 20px; box-sizing: border-box;
	}
	.yapen-header .yapen-headerLayer .headerSite {
		display: flex; flex-direction: column; align-items: center;
		flex: 1; height: 48px; padding: 16px 0 0; margin: 0;
		font-size: 14px; font-weight: 500;
		line-height: 17px; justify-content: flex-start; text-align: center;
		border: none; border-bottom: none;
	}
	.yapen-header .yapen-headerLayer .headerSite.on { font-weight: 700; }
	.yapen-header .yapen-headerLayer .headerSite.on::after { bottom: 0; }
	.yapen-container { padding: 100px 0 0 0; width: 100%; max-width: 100vw; overflow: visible; }

	/* ── Step bar hidden ── */
	.yapen-setStepContainer { display: none !important; }

	/* ── Layout: single column (PENCO-369: 뷰포트 100% 보장) ── */
	.yapen-setContainer { width: 100%; max-width: 100vw; box-sizing: border-box; }
	.yapen-setMainGrid {
		width: 100%; max-width: 100vw; padding: 0; gap: 0; flex-direction: column; box-sizing: border-box;
	}
	.v2-mainWrap { flex-direction: column; gap: 0; width: 100%; max-width: 100vw; box-sizing: border-box; }
	.yapen-setPanel--center { width: 100%; max-width: 100vw; overflow: visible; box-sizing: border-box; }
	.yapen-setRoomLayer { width: 100%; max-width: 100%; box-sizing: border-box; }
	.yapen-setOptionLayer { max-width: 100%; box-sizing: border-box; }

	/* ── Date panel ── */
	.yapen-setPanel--date {
		width: 100%; padding: 20px; box-sizing: border-box;
		border-bottom: 1px solid #e9eaef;
	}
	.yapen-setPanelTitle { font-size: 16px; line-height: 19px; margin-bottom: 16px; }
	.v2-dateDisplay {
		cursor: pointer; text-align: left; font-size: 16px; font-weight: 700;
		line-height: 19px;
		height: 44px; min-height: 44px; padding: 0 16px; position: relative;
		justify-content: flex-start;
	}
	.v2-dateDisplay::after {
		content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
		width: 20px; height: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M15.833 3.333H4.167A1.667 1.667 0 0 0 2.5 5v11.667a1.667 1.667 0 0 0 1.667 1.666h11.666a1.667 1.667 0 0 0 1.667-1.666V5a1.667 1.667 0 0 0-1.667-1.667ZM13.333 1.667v3.333M6.667 1.667v3.333M2.5 8.333h15' stroke='%238b8d92' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-size: contain; background-repeat: no-repeat;
	}
	.v2-calendarWrap { display: none; }
	.yapen-setDateInfoBox { margin-top: 12px; }

	/* ── Center tab: 모바일 sticky (PENCO-369 / Figma 1670:49381) ── */
	.v2-centerTab {
		padding: 20px 20px 16px;
		position: sticky;
		top: var(--v2-header-h, 84px);
		z-index: 6;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(6.5px);
		-webkit-backdrop-filter: blur(6.5px);
	}

	/* ── Right panel (selected rooms): hidden on mobile ── */
	.yapen-setPanel--selected { display: none !important; }

	/* ── Room list: mobile horizontal cards ── */
	.yapen-setRoomLayer .yapen-setRoomContent {
		width: 100%; max-width: 100%; box-sizing: border-box;
		border: none; border-radius: 0;
		overflow: visible;
	}
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list {
		display: flex; column-gap: 16px; row-gap: 0; align-items: flex-start;
		padding: 12px 20px; border-bottom: 1px solid #f2f3f7;
		grid-template-columns: none;
	}
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list:last-child { border-bottom: none; }
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list.on { background: var(--color-static-white); }

	.yapen-setRoomLayer .checkSec {
		grid-column: auto; grid-row: auto;
		padding-top: 0; display: flex; align-items: flex-start; flex-shrink: 0;
	}
	.yapen-setRoomLayer .roomInfoContent {
		display: flex !important; flex: 1 0 0; gap: 12px; min-width: 0;
		align-self: stretch;
	}
	.yapen-setRoomLayer .roomImageLayer {
		grid-column: auto; grid-row: auto;
		width: 100px !important; height: 100px !important;
		border-radius: 8px; flex-shrink: 0;
	}
	.yapen-setRoomLayer .roomNameLayer {
		grid-column: auto; grid-row: auto;
		flex: 1 0 0; min-width: 0; display: flex; flex-direction: column;
		justify-content: space-between; padding: 8px 0;
		align-self: stretch;
	}
	.yapen-setRoomLayer .roomNameLayer .roomName { font-size: 16px; line-height: 19px; gap: 2px; }
	.yapen-setRoomLayer .roomNameLayer .roomPeople { font-size: 12px; line-height: 14px; }

	/* Mobile: price + 인원 추가금 in total price layer (Figma 853:75022), not in roomNameLayer */
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .roomNameLayer .yapen-roomPrice-layer {
		display: none !important;
	}
	.yapen-setRoomLayer .roomNameLayer .roomPriceLayer {
		display: none;
	}

	/* Room expanded detail (투숙 기간 + 인원): hidden until checked */
	.yapen-setRoomLayer .roomRevContent {
		grid-column: auto; grid-row: auto;
		margin: 12px 0 0 0;
		margin-left: 36px;
		flex-basis: calc(100% - 36px);
		box-sizing: border-box;
		display: none;
		order: 3;
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 16px;
		gap: 10px;
	}
	.yapen-setRoomLayer .yapen-setRoom-list.v2-room-checked .roomRevContent {
		display: flex;
	}
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list {
		flex-wrap: wrap;
	}

	/* PENCO-369: 모바일 투숙 기간 / 인원 셀렉트 Figma 853:74183 Dropdown_Area */
	.yapen-setRoomLayer .yapen-revDay-layer {
		width: 100%;
		display: flex; flex-direction: column; gap: 6px;
	}
	.yapen-setRoomLayer .yapen-revDay { width: 100%; }
	.yapen-setRoomLayer .yapen-revPeople-layer {
		width: 100%;
		display: flex; flex-direction: row; gap: 6px; align-items: flex-end;
	}
	.yapen-setRoomLayer .peopleLayer {
		flex: 1 0 0; min-width: 0;
	}
	.yapen-setRoomLayer .yapen-peopleSet { width: 100%; }

	/* Room total price layer on mobile: 객실 우측 컬럼 하단 정렬(Figma 274:12551) */
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .roomNameLayer .yapen-roomTotalPrice-layer {
		display: flex !important;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		width: 100%;
		min-width: 0;
		padding-top: 0;
	}
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .roomNameLayer .yapen-roomTotalPrice-layer .roomPayNowLayer {
		order: 0;
		flex: none;
		width: 100%;
		justify-content: flex-end;
	}
	.yapen-setRoomLayer .yapen-setRoomContent .yapen-setRoom-list .roomNameLayer .yapen-roomTotalPrice-layer .roomPaySiteLayer {
		order: 1;
	}

	/* ── Options mobile ── */
	.yapen-setOptionLayer { padding: 0 20px 40px; }
	.yapen-setOptionHeader { gap: 4px; }
	.yapen-setOptionSub { font-size: 12px; line-height: 14px; font-weight: 500; }
	.v2-optionList {
		border: none;
		border-radius: 0;
		background: transparent;
		overflow: visible;
		padding: 12px 0;
		gap: 12px;
		display: flex;
		flex-direction: column;
	}
	.v2-optionItem {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 12px 0;
	}
	.v2-optionName { font-size: 14px; line-height: 17px; font-weight: 400; }
	.v2-optionDesc { font-size: 12px; line-height: 14px; }
	.v2-optionRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
	}
	.v2-optionPriceArea {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		min-width: 0;
	}
	.v2-optionBadge { order: 1; }
	.v2-optionPrice { font-size: 14px; line-height: 17px; font-weight: 700; order: 0; }
	.v2-stepper-value.zero { color: #e9eaef; }

	/* ── Mobile Bottom Sheet Bar (Figma 320:12643 / 1233:22728) ── */
	.v2-mo-bottomBar {
		position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
		background: var(--color-static-white);
		border-top: 1px solid #e9eaef;
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
		padding: 0 0 max(12px, env(safe-area-inset-bottom));
		border-radius: 24px 24px 0 0;
		transition: box-shadow 0.2s;
	}

	/* Drag handle */
	.v2-mo-bottomBar-handle {
		display: flex; justify-content: center;
		padding: 12px 16px;
		cursor: pointer;
	}
	.v2-mo-bottomBar-handle span {
		width: 30px; height: 4px; border-radius: 9999px; background: #b6b7bb;
	}

	/* Summary section (expanded state) */
	.v2-mo-bottomBar-summary {
		padding: 16px 20px 8px;
	}
	.v2-mo-priceArea {
		background: #f7f8fb; border-radius: 8px; padding: 16px;
		display: flex; flex-direction: column; gap: 12px;
	}
	.v2-mo-sumRow {
		display: flex; justify-content: space-between; align-items: baseline;
	}
	.v2-mo-sumRow--total .v2-mo-sumLabel {
		font-size: 14px; line-height: 17px; font-weight: 700; color: #6e6f73;
	}
	.v2-mo-sumRow--total .v2-mo-sumValue {
		font-size: 14px; line-height: 17px; font-weight: 700; color: var(--color-text-main);
	}
	.v2-mo-sumRow--sub .v2-mo-sumLabel {
		font-size: 14px; line-height: 17px; font-weight: 500; color: #6e6f73;
	}
	.v2-mo-sumRow--sub .v2-mo-sumValue {
		font-size: 14px; line-height: 17px; font-weight: 700; color: var(--color-text-main);
	}
	.v2-mo-sumValue .v2-price-won,
	.v2-mo-bottomBar-amount .v2-price-won { font-weight: 400; }
	.v2-mo-sumDivider {
		height: 1px; background: #e9eaef;
	}
	.v2-mo-sumDetails {
		display: flex; flex-direction: column; gap: 6px;
		margin-top: -4px;
	}
	.v2-mo-sumDetails:empty { display: none; }
	.v2-mo-sumDetail-row {
		display: flex; justify-content: space-between; align-items: baseline;
	}
	.v2-mo-sumDetail-row .v2-mo-sumDetailLabel {
		font-size: 12px; line-height: 14px; font-weight: 400; color: #6e6f73;
		display: flex; align-items: center; gap: 2px;
	}
	.v2-mo-sumDetail-row .v2-mo-sumDetailLabel::before {
		content: '';
		display: block; flex-shrink: 0;
		width: 14px; height: 14px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath transform='translate(4.5,4.5)' d='M0 0.5C0 0.223858 0.223858 0 0.5 0C0.776142 0 1 0.223858 1 0.5V4H4.5C4.77614 4 5 4.22386 5 4.5C5 4.77614 4.77614 5 4.5 5H0.5C0.223858 5 0 4.77614 0 4.5V0.5Z' fill='%236E6F73'/%3E%3C/svg%3E") no-repeat center;
		background-size: 14px 14px;
	}
	.v2-mo-sumDetail-row .v2-mo-sumDetailValue {
		font-size: 12px; line-height: 14px; font-weight: 400; color: var(--color-text-main);
	}

	/* Bottom row: collapsed = row layout, expanded = stacked */
	.v2-mo-bottomBar-inner {
		display: flex; flex-direction: column; align-items: stretch; gap: 20px;
		padding: 12px 20px;
	}
	.v2-mo-bottomBar-info {
		display: flex; flex-direction: row;
		justify-content: space-between; align-items: baseline;
		gap: 8px;
	}
	.v2-mo-bottomBar-label { font-size: 16px; font-weight: 700; color: var(--color-text-main); line-height: 19px; }
	.v2-mo-bottomBar-amount { font-size: 18px; font-weight: 700; color: var(--color-primary); line-height: 21px; }
	.v2-mo-bottomBar-btn {
		width: 100%;
		height: 52px; border-radius: 8px; border: none;
		background: var(--color-primary); color: #fff;
		font-size: 16px; line-height: 19px; font-weight: 700; cursor: pointer;
		display: flex; align-items: center; justify-content: center;
	}
	.v2-mo-bottomBar-btn:active { background: #3344dd; }

	/* ── Mobile Calendar Bottom Sheet ── */
	.v2-mo-calSheet-overlay {
		position: fixed; inset: 0; z-index: 100;
		background: rgba(0,0,0,0.5);
		display: flex; align-items: flex-end; justify-content: center;
	}
	.v2-mo-calSheet {
		background: var(--color-static-white);
		border-radius: 24px 24px 0 0;
		width: 100%;
		max-width: none;
		padding: 12px 0 max(20px, env(safe-area-inset-bottom));
		box-sizing: border-box;
		max-height: 85vh;
		overflow-y: auto;
		/* Figma 1691:30869 Drop Shadow/lv3 */
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
	}
	.v2-mo-calSheet::before {
		content: '';
		display: block;
		width: 30px;
		height: 4px;
		border-radius: 9999px;
		background: #b6b7bb;
		margin: 0 auto 12px;
	}
	.v2-mo-calSheet-header {
		text-align: center;
		min-height: 40px;
		padding: 4px 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.v2-mo-calSheet-title {
		font-size: 18px; font-weight: 700; color: var(--color-text-main); line-height: 21px; margin: 0;
	}
	.v2-mo-calSheet-body {
		margin: 12px 20px 0;
		padding: 12px;
		border: 1px solid #e9eaef;
		border-radius: var(--radius-lg);
		background: var(--color-static-white);
	}
	.v2-mo-calSheet-body .yapen-setMonth { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
	.v2-mo-calSheet-body .monthInfo { font-size: 14px; line-height: 17px; font-weight: 700; color: var(--color-text-main); }
	.v2-mo-calSheet-body .prevMonth,
	.v2-mo-calSheet-body .nextMonth {
		cursor: pointer; width: 32px; height: 32px;
		display: inline-flex; align-items: center; justify-content: center;
		background: none; border-radius: 6px;
	}
	.v2-mo-calSheet-body .yapen-setMonth .prevMonth.dim,
	.v2-mo-calSheet-body .yapen-setMonth .nextMonth.dim { visibility: hidden; pointer-events: none; }
	.v2-mo-calSheet-body .yapen-setMonth .prevMonth svg,
	.v2-mo-calSheet-body .yapen-setMonth .nextMonth svg {
		display: block;
		width: 20px;
		height: 20px;
	}
	.v2-mo-calSheet-body .yapen-calendarTbl { width: 100%; }
	.v2-mo-calSheet-body .yapen-calendarTbl tbody tr td .dayText .select {
		width: 36px; height: 36px; margin-top: -18px; margin-left: -18px;
	}
	.v2-mo-calSheet-apply {
		width: calc(100% - 40px);
		margin: 16px 20px 0;
		height: 52px;
		border: none;
		border-radius: 8px;
		background: var(--color-primary); color: #fff;
		font-size: 16px; line-height: 19px; font-weight: 700; cursor: pointer;
	}
	.v2-mo-calSheet-apply:active { background: #3344dd; }

	/* ── Payment summary mobile (above bottom bar) ── */
	.v2-mo-summary {
		background: var(--color-static-white);
		border-top: 1px solid #e9eaef;
		padding: 20px;
	}

	/* ── Footer: add bottom padding for sticky bar ── */
	.v2-footer { padding-bottom: 100px; }
}

/* ===== Responsive (legacy breakpoints — now mostly handled by 1279px) ===== */

@media only screen and (max-width: 640px) {
	/* Smaller mobile refinements (within 1279px mobile baseline) */
	.yapen-header .yapen-headerLayer { padding: 0 16px; }
	.yapen-header .yapen-headerLayer .headerPensionName,
	.yapen-header .yapen-headerLayer .headerPensionName:hover,
	.yapen-header .yapen-headerLayer .headerPensionName:focus,
	.yapen-header .yapen-headerLayer .headerPensionName:visited,
	.yapen-header .yapen-headerLayer .headerPensionName:active { font-size: 16px; line-height: 19px; }
	.yapen-header .yapen-headerLayer .headerSite { font-size: 13px; line-height: 16px; }
	.yapen-header .yapen-headerLayer .headerSite.on::after { bottom: 0; }

	.yapen-setRoomLayer select {
		padding-right: 28px;
	}
}

@media screen\0 {
	.yapen-calendarTbl tbody tr td .dayText .select { margin-top: -18px; margin-left: -17px; }
}

/* ===== PENCO-373: 예약 확인 모달 (Figma 1696:128647) ===== */
.v2-revConfirm-overlay {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(0, 0, 0, 0.5);
	display: flex; align-items: center; justify-content: center;
}
.v2-revConfirm {
	background: var(--color-static-white);
	border: 1px solid var(--color-line-weak);
	border-radius: 16px;
	padding: 24px;
	width: 400px; max-width: calc(100vw - 32px);
	max-height: 80vh;
	display: flex; flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
		'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
.v2-revConfirm-header {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 20px; flex-shrink: 0;
}
.v2-revConfirm-title {
	font-size: 20px; font-weight: 700; color: var(--color-text-main);
	margin: 0; line-height: 24px;
}
.v2-revConfirm-close {
	width: 40px; height: 40px; border: none; background: none;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; border-radius: 8px; padding: 0;
}
.v2-revConfirm-close:hover { background: var(--color-fill-weak); }
.v2-revConfirm-body {
	overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
	min-height: 0; flex: 1;
}
.v2-revConfirm-rooms {
	display: flex; flex-direction: column; gap: 8px;
}
.v2-revConfirm-card {
	border: 1px solid var(--color-line-weak);
	border-radius: 8px; padding: 20px;
	display: flex; flex-direction: column; gap: 12px;
}
.v2-revConfirm-row {
	display: flex; align-items: center; gap: 2px;
	font-size: 14px; font-weight: 400; line-height: 17px;
}
.v2-revConfirm-label {
	width: 120px; flex-shrink: 0; color: var(--color-text-sub);
}
.v2-revConfirm-value {
	flex: 1; text-align: right; color: var(--color-text-main);
}
.v2-revConfirm-msgbox {
	background: var(--color-fill-weak); border-radius: 8px; padding: 16px;
}
.v2-revConfirm-msgbox ul {
	margin: 0; padding: 0 0 0 18px; list-style: disc;
	font-size: 13px; font-weight: 400; line-height: 20px;
	color: var(--color-text-sub);
}
.v2-revConfirm-msgbox strong { font-weight: 700; }
.v2-revConfirm-footer {
	display: flex; gap: 8px; justify-content: flex-end;
	padding-top: 20px; flex-shrink: 0;
}
.v2-revConfirm-btn {
	height: 44px; padding: 0 20px; border-radius: 8px;
	font-size: 16px; font-weight: 700; line-height: 19px;
	cursor: pointer; white-space: nowrap;
	font-family: inherit;
}
.v2-revConfirm-btn--back {
	background: var(--color-static-white);
	border: 1px solid var(--color-line-weak);
	color: var(--color-text-main);
}
.v2-revConfirm-btn--back:hover { background: var(--color-fill-weak); }
.v2-revConfirm-btn--submit {
	background: #4154ff; border: none; color: #fff;
}
.v2-revConfirm-btn--submit:hover { background: #3545d9; }

@media only screen and (max-width: 1279px) {
	.v2-revConfirm-overlay { align-items: flex-end; }
	.v2-revConfirm {
		width: 100%; max-width: none; max-height: 85vh;
		border-radius: 24px 24px 0 0; border-bottom: none;
		animation: v2-revConfirm-slideUp 0.3s ease-out;
	}
	.v2-revConfirm::before {
		content: ''; display: block; width: 30px; height: 4px;
		border-radius: 9999px; background: #b6b7bb;
		margin: 0 auto 12px; flex-shrink: 0;
	}
}
@keyframes v2-revConfirm-slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

/* ===== Footer (Figma 221:14894) ===== */
.v2-footer {
	display: flex; justify-content: space-between; align-items: flex-start;
	max-width: 1280px; width: 100%; box-sizing: border-box;
	margin-left: auto; margin-right: auto;
	background: var(--color-static-white);
	padding: 40px 24px;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
		'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
.v2-footer-info {
	display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
	font-size: 12px; color: var(--color-text-medium); line-height: 1; white-space: nowrap;
}
.v2-footer-notice { margin: 0; font-weight: 400; }
.v2-footer-meta {
	display: flex; align-items: center; gap: 12px;
}
.v2-footer-name { font-weight: 700; }
.v2-footer-addr,
.v2-footer-tel { font-weight: 400; }
.v2-footer-partner {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 10px 16px;
	border: 1px solid var(--color-line-weak); border-radius: 8px;
	background: var(--color-static-white);
	font-size: 14px; line-height: 17px; font-weight: 400; color: var(--color-text-main);
	cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.v2-footer-partner:hover { background: var(--color-fill-weak); }

@media (max-width: 768px) {
	/* GNB Header: 2-row layout (Figma 853:26711) */
	.yapen-header { height: auto; }
	.yapen-header .yapen-headerLayer {
		flex-direction: column; padding: 0; align-items: stretch;
	}
	.yapen-header .yapen-headerLayer .headerPensionName,
	.yapen-header .yapen-headerLayer .headerPensionName:hover,
	.yapen-header .yapen-headerLayer .headerPensionName:focus,
	.yapen-header .yapen-headerLayer .headerPensionName:visited,
	.yapen-header .yapen-headerLayer .headerPensionName:active {
		font-size: 18px; line-height: 21px; min-height: 48px;
		display: flex; align-items: center;
		padding: 2px 16px; flex: none; width: 100%; box-sizing: border-box;
		max-width: none; text-align: left;
	}
	.yapen-header .yapen-headerLayer .yapen-header-menu-icon { display: none; }
	.yapen-header .yapen-headerLayer .yapen-header-float-r {
		position: static; right: auto; float: none;
		gap: 0; width: 100%; height: 48px;
		border-left: none;
		padding: 0 16px; box-sizing: border-box;
		background: var(--color-static-white); z-index: auto;
	}
	.yapen-header .yapen-headerLayer .headerSite {
		flex: 1; display: flex; font-size: 14px; line-height: 17px; height: 48px;
		padding: 16px 0 0; margin: 0; width: auto;
		text-align: center; justify-content: flex-start; align-items: center; gap: 0;
		border-bottom: none;
	}
	.yapen-header .yapen-headerLayer .headerSite.on::after {
		bottom: 0;
	}
	.yapen-header .yapen-headerLayer .yapen-header-float-r .yapen-header-menu-close-layer { display: none; }
	.yapen-header .yapen-headerLayer .yapen-header-float-r .yapen-header-info-layer { display: none; }
	.yapen-header .yapen-headerLayer .viewCeoBtn { display: none; }
	.yapen-container { padding: 96px 0 0 0; }

	/* Footer MO (Figma 320:12350) */
	.v2-footer {
		flex-direction: column; gap: 12px;
		padding: 32px 20px;
	}
	.v2-footer-info {
		font-size: 12px; line-height: 18px; white-space: normal;
		gap: 12px;
	}
	.v2-footer-notice { line-height: 18px; }
	.v2-footer-meta {
		flex-direction: column; align-items: flex-start; gap: 4px;
	}
	.v2-footer-partner { display: none; }
}