/*
	월별 진료일정 달력 (메인 팝업 / 관리자 미리보기 공용)
	- 달력 박스 가로폭(cqw) 기준으로 내부 크기가 자동 비율 조정됨
	- 기준 크기 : 520 x 585 (팝업 1.3배)
	- 배경색 / 요일 배경색은 /js/month_schedule.js 에서 월별로 지정
*/

.calendar_box{
	position:relative;
	display:flex;
	flex-direction:column;
	width:100%;
	max-width:520px;
	height:585px;
	aspect-ratio:400 / 450;
	padding:22px 18px 18px;
	background-color:#58604e;
	background-image:
		radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.16) 100%);
	color:#fff;
	font-family:'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	letter-spacing:-0.02em;
	box-sizing:border-box;
	overflow:hidden;
	container-type:inline-size;
}

@supports (aspect-ratio:1 / 1){
	.calendar_box{ height:auto; }
}

/* 헤더 */
.calendar_header{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	gap:2.4cqw;
	margin-bottom:16px;
	margin-bottom:3.2cqw;
	font-size:32px;
	font-size:6.4cqw;
	font-weight:800;
	line-height:1.2;
	text-align:center;
}

.calendar_icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:48px;
	height:48px;
	width:9.4cqw;
	height:9.4cqw;
	border-radius:50%;
	background:rgba(255,255,255,0.16);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28);
	box-sizing:border-box;
	color:#fff;
}

.calendar_icon svg{
	display:block;
	width:26px;
	height:26px;
	width:5.2cqw;
	height:5.2cqw;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* 요일 */
.calendar_week,
.calendar_days{
	display:grid;
	grid-template-columns:repeat(7, minmax(0, 1fr));
}

.calendar_week{
	margin-bottom:8px;
	margin-bottom:1.6cqw;
	border-radius:999px;
	overflow:hidden;
}

.calendar_week div{
	padding:9px 0;
	padding:1.8cqw 0;
	text-align:center;
	font-size:15px;
	font-size:3cqw;
	font-weight:700;
	line-height:1;
	color:rgba(255,255,255,0.92);
	box-sizing:border-box;
}

.calendar_week div:first-child{ color:#ffc2c2; }
.calendar_week div:last-child{ color:#c5e3ff; }

/* 날짜 - 남은 높이를 주 수에 맞게 자동 분배 */
.calendar_days{
	flex:1 1 auto;
	min-height:0;
	grid-auto-rows:minmax(0, 1fr);
	gap:4px;
	gap:0.8cqw;
}

.calendar_day{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	min-width:0;
	padding-top:6px;
	padding-top:1.1cqw;
	border-radius:10px;
	border-radius:2cqw;
	text-align:center;
	box-sizing:border-box;
	transition:background-color .2s;
}

.calendar_day .num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	width:6.6cqw;
	height:6.6cqw;
	border-radius:50%;
	font-size:18px;
	font-size:3.5cqw;
	font-weight:600;
	line-height:1;
	color:rgba(255,255,255,0.95);
	font-variant-numeric:tabular-nums;
}

.calendar_day .txt{
	display:block;
	white-space:nowrap;
	margin-top:4px;
	margin-top:0.7cqw;
	font-size:16px;
	font-size:3.1cqw;
	font-weight:700;
	line-height:1.15;
	word-break:keep-all;
}

.calendar_day .time{
	display:block;
	margin-top:2px;
	margin-top:0.3cqw;
	font-size:10.5px;
	font-size:2.05cqw;
	font-weight:500;
	line-height:1.2;
	letter-spacing:-0.06em;
	white-space:nowrap;
	color:rgba(255,255,255,0.9);
	font-variant-numeric:tabular-nums;
}

.calendar_day .time em{
	display:block;
	font-style:normal;
}

.calendar_day.has_time{
	padding-top:4px;
	padding-top:0.7cqw;
}

.calendar_day.has_time .num{
	width:28px;
	height:28px;
	width:5.4cqw;
	height:5.4cqw;
	font-size:15px;
	font-size:2.9cqw;
}

.calendar_day.has_time .txt{
	margin-top:2px;
	margin-top:0.4cqw;
	font-size:13px;
	font-size:2.5cqw;
	letter-spacing:-0.05em;
}

.calendar_day.empty{
	visibility:hidden;
}

/* 표시된 날 : 은은한 카드 + 색상 뱃지 */
.calendar_day.red,
.calendar_day.blue,
.calendar_day.green{
	background:rgba(255,255,255,0.12);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
}

.calendar_day.red .num,
.calendar_day.blue .num,
.calendar_day.green .num{
	font-weight:800;
	color:#1f1f1f;
	box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

/* 휴진 */
.calendar_day.red .num{ background:#ffe36e; }
.calendar_day.red .txt{ color:#ffe36e; }

/* 오전/오후 진료 */
.calendar_day.blue .num{ background:#8ccaff; }
.calendar_day.blue .txt{ color:#9fd3ff; }

/* 정상진료 */
.calendar_day.green .num{ background:#a8e6a1; }
.calendar_day.green .txt{ color:#b4ecae; }


/* 6주 달력 - 칸이 작아지므로 살짝 축소 */
.calendar_box.rows-6{
	padding-top:18px;
	padding-bottom:14px;
}

.calendar_box.rows-6 .calendar_header{
	margin-bottom:2.4cqw;
	font-size:5.8cqw;
}

.calendar_box.rows-6 .calendar_icon{
	width:8.4cqw;
	height:8.4cqw;
}

.calendar_box.rows-6 .calendar_icon svg{
	width:4.6cqw;
	height:4.6cqw;
}

.calendar_box.rows-6 .calendar_week{ margin-bottom:1.2cqw; }
.calendar_box.rows-6 .calendar_week div{ padding:1.5cqw 0; }
.calendar_box.rows-6 .calendar_days{ gap:0.6cqw; }
.calendar_box.rows-6 .calendar_day{ padding-top:0.7cqw; }

.calendar_box.rows-6 .calendar_day .num{
	width:5.8cqw;
	height:5.8cqw;
	font-size:3.2cqw;
}

.calendar_box.rows-6 .calendar_day .txt{
	margin-top:0.4cqw;
	font-size:2.8cqw;
	line-height:1.1;
}

.calendar_box.rows-6 .calendar_day.has_time{
	padding-top:0.4cqw;
}

.calendar_box.rows-6 .calendar_day.has_time .num{
	width:4.8cqw;
	height:4.8cqw;
	font-size:2.7cqw;
}

.calendar_box.rows-6 .calendar_day.has_time .txt{
	margin-top:0.2cqw;
	font-size:2.3cqw;
}

.calendar_box.rows-6 .calendar_day .time{
	margin-top:0.1cqw;
	font-size:1.95cqw;
	line-height:1.15;
}


@media (max-width:1023px){
	.calendar_box{
		padding:16px 12px 12px;
	}

	.calendar_box.rows-6{
		padding-top:13px;
		padding-bottom:10px;
	}
}


/* 관리자 버튼 (.jqb_slide 는 position:absolute 이므로 기준이 됨) */
.ms_edit_btn{
	position:absolute;
	top:8px;
	right:8px;
	z-index:5;
	padding:3px 9px;
	border-radius:3px;
	background:#ffe95c;
	color:#000 !important;
	font-size:12px;
	font-weight:700;
	line-height:1.4;
	text-decoration:none;
}

.ms_admin_btn{
	position:fixed;
	left:15px;
	bottom:15px;
	z-index:100000;
	padding:10px 16px;
	border-radius:5px;
	background:#3b5d8f;
	color:#fff !important;
	font-size:14px;
	font-weight:700;
	text-decoration:none;
	box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.ms_admin_btn:hover{
	background:#2a4570;
}