.calendar-wrapper { display: flex; font-family: 'Segoe UI', sans-serif; max-width: 700px; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.calendar-left { padding: 20px; width: 60%; }
.calendar-header { display: flex; justify-content: center; align-items: center; font-weight: bold; margin-bottom: 10px; }
.calendar-header .nav-btn { background: none; border: none; font-size: 18px; margin: 0 20px; cursor: pointer; }
.weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); list-style: none; padding: 0; margin: 5px 0; text-align: center; }
.weekdays li { font-weight: bold; color: #888; }
.days li { margin: 6px 0; padding: 10px; color: #333; position: relative; cursor: pointer; }
.days li .da { color: #333; }
.days li:before { width: 100%; aspect-ratio:2/ 2; background: rgba(204,204,204,0.00); color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.dayon::after { content: ""; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); }
.days li.active { color: #fff; }
.days li.active:before { width: 100%; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.today { color: #fff; }
.days li.today:before { width: 100%; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.other-month { color: #ccc; }

.calendar-right { width: 40%; background: #f7f7f7; padding: 20px; border-left: 1px solid #ddd; }
.selected-date { background: #f85a40; color: white; padding: 10px 15px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; margin-bottom: 20px; }
.schedule { list-style: none; padding-left: 10px; color: #555; }


/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.calendar-wrapper { display: flex;   flex-direction:column;  font-family: 'Segoe UI', sans-serif; max-width:100%!important; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }	
.calendar-left { padding: 20px; width: 100%!important; }
.calendar-right { width: 100%!important; background: #f7f7f7; padding: 20px; border-left: none; border-top: 1px solid #ddd; }
	
.days li { margin: 6px 0; padding:10px; color: #333; position: relative; cursor: pointer; }	
.days li:before { width: 50px;   aspect-ratio:2/ 2; background: rgba(204,204,204,0.00); color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.active:before { width:50px; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }
.days li.today { color: #fff; }
.days li.today:before { width:50px; aspect-ratio:2/ 2; background: #4CAF50; color: #333; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border-radius: 100%; }	
	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
	
}
/* 구분 //end -----------------------------------*/