@charset "utf-8";

/*
	캠프 예약·결제 화면 — Figma 05 D2-1 일정·구역 · D2-2 정보·결제 · D2-3 예약 완료 · D2-4 예약 확인→상세→취소 (M5 배치3)

	★ 예약 레이아웃 두 벌(microLayout=POPUP, siteMicroLayout=INLINE/CALENDAR)이 <body class="camp-rsv"> 로 싣는다.
	  예약 레이아웃은 Micro/camp/* 전용이라 포털·홈 화면에는 실리지 않는다. 전 선택자는 .camp-rsv 아래다.
	★ 색·모서리는 캠프 테마 토큰(site_theme → SiteThemeService.toCssVars, 레이아웃이 :root 로 주입)만 쓴다.
	  폴백은 NATURE_A 값. 캠프별 분기 없음.
	★ 디자인만 — 마크업은 기존 그대로(폼 필드·JS 훅 불변). micro(contents.css) 와 site(reserve.css, .rsv-scope)
	  두 원본을 같은 깊이의 선택자로 덮는다(뒤에 로드 + 같은 특이도 = 이긴다).
*/

/* ── 토큰: 예약 원본 변수를 캠프 테마로 ─────────────────────────────── */
/* reserve.css 는 .rsv-scope 에서 --primary-color 를 다시 고정한다(#0c5c4a) — :root 주입만으로는 안 바뀐다. */
.camp-rsv,
.camp-rsv .rsv-scope {
	--primary-color: var(--c-primary, #0c5a49);
	--border-color: var(--c-border, #d7d7d7);
}

/* ── 바탕·본문 카드 ─────────────────────────────────────────────────── */
.camp-rsv .sub-wrap {
	background: var(--c-bg, #fbfcf8);
}
.camp-rsv .sub-box {
	background: transparent;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

/* 실시간예약 / 예약확인 탭 — 활성 밑줄·글자를 테마 primary 로 */
.camp-rsv .tab-basic.opt-type1 li {
	border-bottom-color: var(--c-border, #d7d7d7);
}
.camp-rsv .tab-basic.opt-type1 a.opt-active {
	color: var(--c-primary, #0c5a49);
	font-weight: 700;
}
.camp-rsv .tab-basic.opt-type1 a::before {
	background: var(--c-primary, #0c5a49);
}

/* ── 단계 표시(Stepper, Figma 20:142) — 순수 표시용, 기능 없음 ─────────── */
.camp-rsv .camp-rsv-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
.camp-rsv .camp-rsv-stepper li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text-muted, #666);
	white-space: nowrap;
}
.camp-rsv .camp-rsv-stepper li + li::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-right: 4px;
	background: var(--c-border, #d7d7d7);
}
.camp-rsv .camp-rsv-stepper .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--c-border, #d7d7d7);
	background: var(--c-surface, #f5f7ef);
	font-size: 13px;
	font-weight: 700;
}
.camp-rsv .camp-rsv-stepper li.is-current {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
}
.camp-rsv .camp-rsv-stepper li.is-current .num,
.camp-rsv .camp-rsv-stepper li.is-done .num {
	border-color: var(--c-primary, #0c5a49);
	background: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
}
.camp-rsv .camp-rsv-stepper li.is-done + li::before,
.camp-rsv .camp-rsv-stepper li.is-current + li.is-done::before {
	background: var(--c-primary, #0c5a49);
}
@media all and (max-width: 767px) {
	.camp-rsv .camp-rsv-stepper {
		gap: 6px;
		margin-bottom: 20px;
	}
	.camp-rsv .camp-rsv-stepper li {
		font-size: 12px;
		gap: 4px;
	}
	.camp-rsv .camp-rsv-stepper li + li::before {
		width: 16px;
	}
	.camp-rsv .camp-rsv-stepper .num {
		width: 22px;
		height: 22px;
		font-size: 11px;
	}
}

/* ── 버튼(Figma Button 4:49) — 모서리 8px, 주 동작 primary ───────────── */
.camp-rsv .sub-contents .btn-basic.opt-style-square,
.camp-rsv .sub-contents .btn-basic.opt-color-primary,
.camp-rsv .sub-contents .btn-basic.opt-color-secondary {
	border-radius: var(--radius-md, 8px);
}
.camp-rsv .sub-contents .btn-basic.opt-color-primary {
	background-color: var(--c-primary, #0c5a49);
	border-color: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
}
/* 다음 단계·결제·조회 CTA — 원본은 무채색(secondary) 버튼이다. 페이지당 CTA 는 primary 로 칠한다. */
.camp-rsv .camping-site-reserve .next-step-btn,
.camp-rsv .btn-basic-wrap.opt-reserve-confirm .btnPay,
.camp-rsv .login-wrap .btnProc {
	background-color: var(--c-primary, #0c5a49);
	border-color: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
	font-weight: 700;
}

/* ── D2-1 일정·구역 — 구역 카드(Site Option 16:125) ───────────────────── */
.camp-rsv .camping-zone-reserve-title {
	color: var(--c-text-strong, #3c3c3c);
}
.camp-rsv .camping-zone-reserve .camping-zone-reserve-box {
	background: var(--c-surface, #f5f7ef);
	border: 1px solid var(--c-border, #d7d7d7);
	border-radius: var(--radius-card, 15px);
	padding: 16px;
	margin-bottom: 14px;
}
.camp-rsv .camping-zone-info .img-box {
	border-radius: var(--radius-md, 8px);
}
/* 잔여 배지(Badge 4:79) — 테두리 상자 → 연한 primary 알약 */
.camp-rsv .camping-zone-info .text-box .state-box {
	height: auto;
	padding: 4px 6px;
	border: 0;
	border-radius: 999px;
	background: var(--c-surface, #f5f7ef);
	background: color-mix(in srgb, var(--c-primary, #0c5a49) 12%, transparent);
	color: var(--c-primary, #0c5a49);
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 8px;
}
.camp-rsv .camping-zone-info .text-box .state-box.opt-disabled {
	background: var(--c-surface, #f5f7ef);
	background: color-mix(in srgb, var(--c-text-muted, #666) 12%, transparent);
	color: var(--c-text, #494949);
}
.camp-rsv .camping-zone-info .title {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
}
.camp-rsv .camping-zone-info .price {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
}
.camp-rsv .camping-zone-info .desc-box .desc {
	color: var(--c-text-muted, #666);
}
/* 데스크톱: Figma 행 비율(사진 120×90 · 제목 17 · 가격 18). 모바일은 원본의 세로 쌓기 그대로. */
@media all and (min-width: 1024px) {
	.camp-rsv .camping-zone-info .img-box {
		flex: 0 0 120px;
		height: 90px;
	}
	.camp-rsv .camping-zone-info .img-box::after {
		background-size: 60px;
	}
	.camp-rsv .camping-zone-info .text-box {
		padding: 0 20px;
	}
	.camp-rsv .camping-zone-info .title {
		font-size: 17px;
	}
	.camp-rsv .camping-zone-info .price {
		font-size: 18px;
	}
	.camp-rsv .camping-zone-info .btn-basic {
		margin-top: 6px;
		height: 44px;
	}
}
/* 사이트(자리) 행 — 원본 회색(#F3F3F3) → 테마 바탕 */
.camp-rsv .camping-site-reserve-list li {
	background: var(--c-bg, #fbfcf8);
	border-color: var(--c-border, #d7d7d7);
	border-radius: var(--radius-md, 8px);
}
.camp-rsv .camping-site-reserve-list li.opt-active {
	border: 2px solid var(--c-primary, #0c5a49);
}
/* 예약가능객실보기(라인 버튼) — 검정 테두리 → 테마 테두리·표면 */
.camp-rsv .camping-zone-info .btn-basic {
	background: var(--c-bg, #fbfcf8);
	border-color: var(--c-border, #d7d7d7);
	color: var(--c-text-strong, #3c3c3c);
	border-radius: var(--radius-md, 8px);
	font-weight: 700;
}
.camp-rsv .camping-zone-info .btn-basic:hover {
	border-color: var(--c-primary, #0c5a49);
	color: var(--c-primary, #0c5a49);
}
/* 사이트(자리) 선택 — 선택됨은 원본이 무채색(secondary)이었다. 선택됨 = primary 채움 + 체크 글자는 JS 가 그대로 */
.camp-rsv .camping-site-reserve-list .btn-basic {
	border-radius: var(--radius-md, 8px);
	background: var(--c-bg, #fbfcf8);
	border-color: var(--c-border, #d7d7d7);
	color: var(--c-text-strong, #3c3c3c);
}
.camp-rsv .camping-site-reserve-list li.opt-active .btn-basic {
	background-color: var(--c-primary, #0c5a49);
	border-color: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
}
.camp-rsv .camping-site-reserve-list li.opt-end .btn-basic {
	background-color: transparent;
	border-color: var(--c-border, #d7d7d7);
	color: var(--c-text-muted, #666);
	opacity: 0.4;
}

/* 일정 선택 달력(모달, Range Calendar 20:143) — 선택일 색은 --primary-color 토큰으로 따라온다 */
.camp-rsv .schedule-period {
	background: var(--c-surface, #f5f7ef);
	border: 1px solid var(--c-border, #d7d7d7);
	border-radius: 12px;
}
.camp-rsv .schedule-modal .js-apply-datepicker {
	background-color: var(--c-primary, #0c5a49);
	border-color: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
	border-radius: var(--radius-md, 8px);
}

/* 선택일: 체크인·체크아웃 = primary 채움, 사이 날짜 = secondary(원본은 #333 고정) */
.camp-rsv .schedule-calendar.fc .fc-daygrid-day.opt-active {
	background: var(--c-primary, #0c5a49);
}
.camp-rsv .schedule-calendar.fc .fc-daygrid-day.opt-range {
	background: var(--c-secondary, #d4d8c9);
}
.camp-rsv .schedule-calendar.fc .fc-daygrid-day.opt-active .fc-daygrid-day-number {
	color: var(--c-on-primary, #fff);
}
.camp-rsv .schedule-calendar.fc .fc-daygrid-day.opt-range .fc-daygrid-day-number {
	color: var(--c-text-strong, #3c3c3c);
}

/* ── D2-2 정보·결제 — 입력 카드 + 오른쪽 요약 ────────────────────────── */
.camp-rsv .reserve-pay-wrap .reserve-step-card {
	background: var(--c-surface, #f5f7ef);
	border: 1px solid var(--c-border, #d7d7d7);
	border-radius: var(--radius-card, 15px);
	padding: 24px;
	margin-bottom: 16px;
}
.camp-rsv .reserve-pay-wrap .reserve-step-title {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 14px;
}
.camp-rsv .reserve-pay-wrap .reserve-step-title .title {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
}
.camp-rsv .reserve-pay-wrap .input-text input[type="text"],
.camp-rsv .reserve-pay-wrap .input-text input[type="tel"],
.camp-rsv .reserve-pay-wrap .input-text input[type="number"],
.camp-rsv .reserve-pay-wrap .input-text select,
.camp-rsv .reserve-pay-wrap .input-text textarea {
	background: var(--c-bg, #fbfcf8);
	border-color: var(--c-border, #d7d7d7);
	border-radius: var(--radius-md, 8px);
}
.camp-rsv .reserve-pay-wrap .input-text input:focus,
.camp-rsv .reserve-pay-wrap .input-text select:focus,
.camp-rsv .reserve-pay-wrap .input-text textarea:focus {
	border-color: var(--c-primary, #0c5a49);
	outline: 2px solid color-mix(in srgb, var(--c-primary, #0c5a49) 25%, transparent);
	outline-offset: 0;
}
.camp-rsv .reserve-pay-wrap .reserve-badge-box.opt-primary {
	background: var(--c-surface, #f5f7ef);
	background: color-mix(in srgb, var(--c-primary, #0c5a49) 12%, transparent);
	border-color: transparent;
	color: var(--c-primary, #0c5a49);
	border-radius: 999px;
}
/* 요약 카드(오른쪽 고정) — 데스크톱은 흰 카드 + 그림자, 모바일 원본 초록(#99cb94) 고정값은 테마 표면으로 */
.camp-rsv .reserve-pay-wrap .reserve-step-item.opt-fixed .reserve-step-card {
	background: var(--c-bg, #fbfcf8);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
@media all and (max-width: 1023px) {
	.camp-rsv .reserve-pay-wrap .reserve-step-item.opt-fixed .reserve-step-card {
		background: var(--c-surface, #f5f7ef);
		box-shadow: none;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}
/* 요약 목록·표 머리 — 원본 연녹색(#eef8ee) 고정값 → 테마 primary 옅은 칠 */
.camp-rsv .reserve-result-list,
.camp-rsv .table-basic.opt-type1 .table-title {
	background: var(--c-surface, #f5f7ef);
	background: color-mix(in srgb, var(--c-primary, #0c5a49) 6%, var(--c-bg, #fbfcf8));
}
/* 총 결제금액 — accent(Figma 115,000원) */
.camp-rsv .reserve-pay-wrap .reserve-result-total {
	padding-top: 14px;
	border-top: 1px solid var(--c-border, #d7d7d7);
}
.camp-rsv .reserve-pay-wrap .reserve-result-total .title {
	color: var(--c-text-strong, #3c3c3c);
}
.camp-rsv .reserve-pay-wrap .reserve-result-total .price {
	color: var(--c-accent, #c4531d);
}
/* 결제하기 줄 — CTA 높이 52 */
.camp-rsv .btn-basic-wrap.opt-reserve-confirm .btn-basic {
	height: 52px;
	border-radius: var(--radius-md, 8px);
}
.camp-rsv .btn-basic-wrap.opt-reserve-confirm .btn-basic:not(.btnPay) {
	background: var(--c-bg, #fbfcf8);
	border-color: var(--c-border, #d7d7d7);
	color: var(--c-text-strong, #3c3c3c);
}

/* ── D2-3 예약 완료 ─────────────────────────────────────────────────── */
.camp-rsv .reserve-complete .text-box {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
	/* 원본 완료 그림(img-complete.png, 고정 녹색) → 테마 primary 원 + 체크(Figma 25:1920) */
	background: none;
	padding-top: 0;
}
.camp-rsv .reserve-complete .text-box::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}
.camp-rsv .reserve-complete .reserve-complete-box {
	background: var(--c-surface, #f5f7ef);
	border-radius: var(--radius-card, 15px);
	padding: 20px 20px 10px;
	margin-top: 16px;
}
.camp-rsv .reserve-complete .reserve-complete-box .title-box {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
	border-bottom-color: var(--c-border, #d7d7d7);
}
.camp-rsv .reserve-complete .reserve-complete-box .rows .title {
	color: var(--c-text-muted, #666);
}
.camp-rsv .reserve-complete .reserve-complete-box .rows .desc {
	color: var(--c-text-strong, #3c3c3c);
}
.camp-rsv .reserve-complete .btn-basic.opt-color-secondary {
	background-color: var(--c-primary, #0c5a49);
	border-color: var(--c-primary, #0c5a49);
	color: var(--c-on-primary, #fff);
}

/* ── D2-4 예약 확인(휴대폰 인증) → 목록·상세 → 취소 ─────────────────── */
.camp-rsv .login-wrap {
	background: var(--c-surface, #f5f7ef);
	border-radius: var(--radius-card, 15px);
	padding: 28px;
}
.camp-rsv .login-wrap .login-title {
	color: var(--c-text-strong, #3c3c3c);
	font-weight: 700;
}
.camp-rsv .login-wrap .input-text input {
	background: var(--c-bg, #fbfcf8);
	border-color: var(--c-border, #d7d7d7);
	border-radius: var(--radius-md, 8px);
}
.camp-rsv .mypage-wrap .mypage-reserve-item {
	background: var(--c-surface, #f5f7ef);
	border-color: var(--c-border, #d7d7d7);
	border-radius: var(--radius-card, 15px);
}
.camp-rsv .mypage-wrap .mypage-reserve-item .col-box:not(:last-child) {
	border-right-color: var(--c-border, #d7d7d7);
}
.camp-rsv .mypage-wrap .mypage-reserve-item .col-box .badge.opt-use {
	background: var(--c-surface, #f5f7ef);
	background: color-mix(in srgb, var(--c-primary, #0c5a49) 12%, transparent);
	border-color: transparent;
	color: var(--c-primary, #0c5a49);
	border-radius: 999px;
}
.camp-rsv .mypage-wrap .mypage-pay-box {
	border-color: var(--c-border, #d7d7d7);
	border-radius: var(--radius-card, 15px);
}
/* 예약 부가상품 목록은 기본 예약 금액 행과 열 구성이 다르다. */
.camp-rsv #goodsAddonList .item-box {
	display:grid;
	grid-template-columns:minmax(0, 1fr) 116px max-content;
	align-items:center;
	gap:12px;
}
.camp-rsv #goodsAddonList .title { min-width:0; }
.camp-rsv #goodsAddonList .goodsNameText {
	display:inline-block;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	vertical-align:middle;
}
.camp-rsv #goodsAddonList .goods-qty-box { display:flex;align-items:center;gap:6px; }
.camp-rsv #goodsAddonList .goods-qty-box button { width:28px;min-width:28px;height:32px;margin:0;padding:0; }
.camp-rsv #goodsAddonList .goodsQtyInput { width:48px;min-width:0;text-align:center; }
.camp-rsv #goodsAddonList .price { white-space:nowrap; }
@media all and (max-width:600px) {
	.camp-rsv #goodsAddonList .item-box { grid-template-columns:minmax(0, 1fr) max-content;gap:8px; }
	.camp-rsv #goodsAddonList .title { grid-column:1 / -1; }
}