@charset "utf-8";

.GNS_MAIN_03{width: 100%;  overflow-x:hidden;padding-bottom: clamp(30px, calc(4.605vw + 11.579px), 100px)}
.GNS_MAIN_03 .contents-container{ }

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.GNS_MAIN_03 .contents-container .grid_box{width: 100%; float: left;  display: grid; grid-template-columns: repeat(2, 1fr); gap:3%; }
.GNS_MAIN_03 .contents-container .grid_box .fl{width:100% ; float: left; position: relative ;  
padding: clamp(10px, calc(1.316vw + 4.737px), 30px)!important ;
border-radius: 20px; background-color: #f9fafc!important;}
	
	
.GNS_MAIN_03 .contents-container .grid_box .fr{width:100%; float: left;position: relative ; }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {


}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.GNS_MAIN_03 .contents-container .grid_box{width: 100%; float: left; display: grid; grid-template-columns:100%; gap:3%;}
.GNS_MAIN_03 .contents-container .grid_box .fl{width:100%; float: left; position: relative }
.GNS_MAIN_03 .contents-container .grid_box .fr{width: 100%; float: left;position: relative }


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.calendar-wrapper { display: flex; font-family: 'Segoe UI', sans-serif; max-width: 700px;  overflow: hidden;  }

.calendar-left { padding: 50px; width: 60%;  background-color: #fff; border-radius: 25px; }
.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;  font-weight: 700}

.weekdays li {font-weight: 800; color: #4CAF50; }
.weekdays li:first-child { color: #ff0000; } /* 일요일 빨간색 */
.weekdays li:last-child { color: #0000ff; } /* 토요일 파란색 */

/* 기본 날짜 스타일 */
.days li { 
  margin: 12px 0; 
  padding: 0; 
  position: relative; 
  cursor: pointer; 
}
.days li .day { 
  color: #333; 
  position: relative; 
  z-index: 2; 
}

/* 배경 원 */
.days li:before { 
  width: 45px; 
  height: 45px; 
  background-color: transparent; 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 0; 
  border-radius: 50%; 
}

/* 예약된 날짜 */
.days li.dayon:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #f0f0f0 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.dayon .day { 
  color: #333 !important; 
  position: relative; 
  z-index: 2; 
}
.days li.dayon::after { 
  content: ""; 
  width: 6px; 
  height: 6px; 
  background-color: #fff!important; 
  border-radius: 50%; 
  position: absolute; 
  bottom: -12px; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 3; 
}

/* 예약+클릭된 날짜 */
.days li.dayon.active:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #2196F3 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.dayon.active .day { 
  color: #fff !important; 
  position: relative; 
  z-index: 2; 
}

/* 클릭된 날짜 */
.days li.active:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #4CAF50 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.active .day { 
  color: #fff !important; 
  position: relative; 
  z-index: 2; 
}

/* 오늘 날짜 */
.days li.today:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #FF5722 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.today .day { 
  color: #fff !important; 
  position: relative; 
  z-index: 2; 
}

.days li.other-month { color: #ccc; }

.calendar-right { width: 40%; padding: 20px; }
.selected-date {  background-color: var(--point2)!important;color: white; padding: 10px 40px; border-radius: 50px; 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-color: #f7f7f7; padding: 20px; border-left: none; border-top: 1px solid #ddd; }
	
/* 모바일에서도 동일한 스타일 적용 */
.days li { margin: 12px 0; padding: 0; position: relative; cursor: pointer; }	
.days li .day { color: #333; position: relative; z-index: 2; }

.days li:before { 
  width: 45px; 
  height: 45px; 
  background-color: transparent; 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 0; 
  border-radius: 50%; 
}

.days li.dayon:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #f0f0f0 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.dayon .day { 
  color: #333 !important; 
  position: relative; 
  z-index: 2; 
}

.days li.dayon.active:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #2196F3 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.dayon.active .day { 
  color: #fff !important; 
  position: relative; 
  z-index: 2; 
}

.days li.active:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #4CAF50 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.active .day { 
  color: #fff !important; 
  position: relative; 
  z-index: 2; 
}

.days li.today:before { 
  width: 45px !important; 
  height: 45px !important; 
  background-color: #FF5722 !important; 
  content: "" !important; 
  position: absolute !important; 
  left: 50% !important; 
  top: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  z-index: 0 !important; 
  border-radius: 50% !important; 
}
.days li.today .day { 
  color: #fff !important; 
  position: relative; 
  z-index: 2; 
}
	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
	
}
/* 구분 //end -----------------------------------*/

.days li.dayon::after {
    content: "";
    width: 6px;
    height: 6px;
   background-color: var(--primary);
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

/* 기본 날짜 색상 */
.days li { color: #333; font-family:var(--ff-ko10)!important; }

/* 요일별 색상 */
.days li.sunday { color: #e44e3e !important; } /* 일요일 빨간색 */
.days li.saturday { color: #0097cb !important; } /* 토요일 파란색 */
.days li.holiday { color: #e44e3e !important; } /* 법정 공휴일 빨간색 */

/* 일정 있는 날(dayon)은 흰색 텍스트 유지 */
.days li.dayon { color: #fff !important; }

/* 오늘 날짜나 active 상태일 때는 흰색 텍스트 유지 */
.days li.today { color: #fff !important; }
.days li.active { color: #fff !important; }


.weekdays li{color:var(--tertiary)!important; font-family:var(--ff-ko10)!important; font-size: 14px!important}