/* =========================
   예약 월 탭
========================= */
.reservationTabs {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	margin: 0 0 10px 0;
	border-bottom: 1px solid #d8d8d8;
}

.reservationTabs td {
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	transition: all 0.25s ease;
	position: relative;
}

.subMenuon,
.subMenuoff {
	letter-spacing: -0.03em;
	padding: 22px 10px 18px;
	font-size: 1.15rem;
	font-weight: 500;
	color: #555;
	background: transparent;
	user-select: none;
}

.subMenuon {
	background: #ffffff;
	color: #222;
	font-weight: 700;
	border: 1px solid #d8d8d8;
	border-bottom: 1px solid #ffffff;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -1px 0 rgba(255,255,255,0.7), 0 3px 12px rgba(0,0,0,0.03);
	z-index: 2;
}

.subMenuoff {
	color: #666;
	border-bottom: 1px solid transparent;
}

.subMenuoff:hover {
	color: #222;
	background: rgba(255,255,255,0.45);
	border-radius: 14px 14px 0 0;
}

.subMenuon:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 9px;
	transform: translateX(-50%);
	width: 38px;
	height: 4px;
	border-radius: 999px;
	background: #f0c419;
}

/* =========================
   예약 테이블
========================= */
.reservationCalendar {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: #f5f5f5;
}

.reservationCalendar .underLine3 {
	height: 44px;
	font-size: 1.05rem;
	font-weight: 500;
	color: #505050;
	background: #f7f7f7;
	border-bottom: 1px solid #d6d6d6;
	letter-spacing: -0.03em;
}

.reservationCalendar td.underLine {
	border-bottom: 1px solid #d6d6d6;
	position: relative;
	height: 102px;
	vertical-align: top;
}

/* 라인 */
.reservationCalendar td.rightLine {
	border-right: 1px solid #d6d6d6;
}

.reservationCalendar td.leftLine {
	border-left: 1px solid #d6d6d6;
}

/* =========================
   셀 배경 규칙
   - 빈칸: 그레이
   - 날짜 있는 평일: 화이트
   - 날짜 있는 토요일: 연블루
   - 날짜 있는 일요일: 연핑크
========================= */
.reservationCalendar td.cell-empty {
	background: #f1f1f1;
}

.reservationCalendar td.cell-weekday {
	background: #ffffff;
}

.reservationCalendar td.cell-sat {
	background: #f1f8fc;
}

.reservationCalendar td.cell-sun {
	background: #fcf3f8;
}

/* =========================
   날짜 원형 배지
========================= */
.day-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	box-sizing: border-box;
}

.day-badge.sun {
	background: #e9b2d6;
	color: #333;
}

.day-badge.sat {
	background: #9fd3ea;
	color: #333;
}

.day-badge.weekday {
	background: #ececec;
	color: #333;
}

.day-badge.today {
	background: #d64141 !important;
	color: #fff !important;
}

/* =========================
   셀 내부 정렬
========================= */
.calendar-content {
	margin-top: 40px;
	min-height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	line-height: 1;
	gap: 2px;
	text-align: center;
	padding-top: 2px;
	box-sizing: border-box;
}

.calendar-cell-status-area {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 30px;
	margin-bottom: 0;
}

/* =========================
   예약 가능 숫자 말풍선
========================= */
.remain-bubble-wrap {
	margin: 0;
	text-align: center;
	line-height: 1;
	overflow: visible;
}

.remain-bubble-svg {
	display: block;
	vertical-align: top;
	width: 38px;
	height: 28px;
	max-width: 100%;
	margin: 0 auto -2px;
}

/* =========================
   상태 SVG (마감 / 지난 날짜)
========================= */
.calendar-status-svg {
	display: inline-block;
	vertical-align: top;
}

.calendar-status-svg.calendar-status-closed {
	width: 46px;
	height: 26px;
	position: relative;
	top: 1px;
}

.calendar-status-svg.calendar-status-past {
	width: 34px;
	height: 34px;
}

/* =========================
   예약 버튼
========================= */
.calendar-reserve-wrap {
	margin-top: -1px;
	text-align: center;
}

.calendar-reserve-btn {
	max-width: 100%;
}

/* =========================
   버튼 컬러
========================= */
.yellowB {
	color: #5c4700;
	border: solid 1px #d7af00;
	background: #f3c400;
	border-radius: 8px;
	font-weight: 700;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}

.yellowB:hover,
.yellowB:active {
	background: #ffd426;
	border-color: #d7af00;
}

.redB {
	color: #fff;
	border: solid 1px #d53d37;
	background: #e9433c;
	border-radius: 8px;
	font-weight: 700;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}

.redB:hover,
.redB:active {
	background: #ff5d56;
	border-color: #d53d37;
}

/* =========================
   모바일
========================= */
@media (max-width: 768px) {
	.subMenuon,
	.subMenuoff {
		padding: 16px 6px 14px;
		font-size: 1rem;
	}

	.subMenuon {
		border-radius: 14px 14px 0 0;
	}

	.subMenuon:after {
		width: 28px;
		height: 3px;
		bottom: 7px;
	}

	.reservationCalendar .underLine3 {
		height: 38px;
		font-size: 0.96rem;
	}

	.reservationCalendar td.underLine {
		height: 96px;
	}

	.day-badge {
		top: 6px;
		right: 6px;
		width: 30px;
		height: 30px;
		font-size: 0.95rem;
	}

	.calendar-content {
		margin-top: 38px;
		min-height: 44px;
		gap: 1px;
		padding-top: 1px;
	}

	.calendar-cell-status-area {
		min-height: 28px;
		margin-bottom: 0;
	}

	.calendar-status-svg.calendar-status-closed {
		width: 40px;
		height: 23px;
		top: 1px;
	}

	.calendar-status-svg.calendar-status-past {
		width: 28px;
		height: 28px;
	}

	.remain-bubble-svg {
		width: 32px;
		height: 24px;
	}

	.calendar-reserve-wrap {
		margin-top: -1px;
	}
}

@media (max-width: 480px) {
	.subMenuon,
	.subMenuoff {
		padding: 14px 4px 12px;
		font-size: 0.92rem;
	}

	.reservationCalendar .underLine3 {
		height: 34px;
		font-size: 0.9rem;
	}

	.reservationCalendar td.underLine {
		height: 92px;
	}

	.day-badge {
		top: 6px;
		right: 6px;
		width: 27px;
		height: 27px;
		font-size: 0.9rem;
	}

	.calendar-content {
		margin-top: 36px;
		min-height: 42px;
		gap: 1px;
		padding-top: 2px;
	}

	.calendar-cell-status-area {
		min-height: 26px;
		margin-bottom: 1px;
	}

	.calendar-status-svg.calendar-status-closed {
		width: 36px;
		height: 21px;
		top: 2px;
	}

	.calendar-status-svg.calendar-status-past {
		width: 24px;
		height: 24px;
	}

	.remain-bubble-svg {
		width: 28px;
		height: 21px;
		margin: 0 auto -3px;
	}

	.calendar-reserve-wrap {
		margin-top: -1px;
	}

	.calendar-reserve-btn {
		transform: scale(0.92);
		transform-origin: center top;
	}
}