@charset "utf-8";
#date_container .date-picker-wrapper {width: 100% !important; box-sizing: border-box !important; background: #fff; border: none; padding: 0;}
#date_container .month-wrapper {width: 100% !important; border: none; padding: 0;}
#date_container .month1 {width: 100% !important;}
#date_container h3 {display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.6rem; margin-bottom: 3rem;}
#date_confirm {background: #74A736; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; padding: 2.7rem; font-size: 3.6rem; font-weight: 500; border-radius: 16px; cursor: pointer; box-sizing: border-box ;}
#date_box, #date_box_single {width: 100%;}

#date_box_single .caption th:first-child, #date_box .caption th:first-child {text-align: right; width: calc((100% - 100px)/2);}
#date_box_single .caption th:last-child, #date_box .caption th:last-child {text-align: left; width: calc((100% - 100px)/2);}
#date_box_single .caption th, #date_box .caption th {padding-bottom: 3rem;}

.month1-header, .month2-header {margin-bottom: 8.5rem;}
.month-nav {display: flex; justify-content: center; align-items: center; column-gap: 20rem;}
.month-nav .prev img {width: 9rem; height: 9rem; object-fit: contain; display: block;}
.month-nav .next img {width: 9rem; height: 9rem; object-fit: contain; display: block;}
.prev, .next {cursor: pointer;}

.month-name {text-align: center; position: relative; cursor: pointer;}
.month-name .year-month {display: flex; align-items: center; justify-content: center; font-size: 4.4rem; color: #000; line-height: normal; position: relative; cursor: pointer;}
.month-name .year-month .month-element:last-child {margin-left: 1rem;}
.month-name .year-month .month-element {font-size: 4.4rem; color: #000; line-height: normal;}
.month-name .year-month::after {content: ''; width: 4.9rem; height: 4.9rem; background-image: url('../images/sub/ic_dropdown_arrow.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: 1rem; transition: transform 0.3s; display: inline-block; margin-top: 0.6rem;}
.month-name.active .year-month::after {transform: rotate(180deg);}

.month-dropdown-menu {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 250px; max-height: 300px; overflow-y: auto; display: none; margin-top: 1rem;}
.month-name.active .month-dropdown-menu {display: block;}
.month-dropdown-menu ul {list-style: none; margin: 0; padding: 1rem 0;}
.month-dropdown-menu li {padding: 1.2rem 2rem; cursor: pointer; font-size: 2.4rem; transition: background-color 0.2s;}
.month-dropdown-menu li:hover {background-color: #f5f5f5;}
.month-dropdown-menu li.current {background-color: #74A736; color: white;}

#date_box_single tbody td, #date_box tbody td {width: calc((100%)/7); border-bottom: 1px solid #F5F4F3; padding: 0 1rem; height: 33rem;}
#date_box_single tbody td:first-child, #date_box tbody td:first-child {padding-left: 3rem;}
/* #date_box_single tbody tr:last-child td, #date_box tbody tr:last-child td {border-bottom: 1px solid #212121;} */
#date_box_single .week-name th, #date_box .week-name th {color: #000; padding: 1.5rem 0; padding-left: 1rem; font-size: 3.2rem; font-weight: 500; border-bottom: 1px solid #F5F4F3; box-sizing: border-box;}
#date_box_single .date-picker-wrapper .month-wrapper table .day, #date_box .date-picker-wrapper .month-wrapper table .day {display: flex; align-items: flex-start; justify-content: flex-start; font-size: 2.4rem; line-height: 3.6rem; padding: 2.6rem 0; color: #000; text-align: center; box-sizing: border-box; row-gap: 0.5rem; height: 100%; column-gap: 0.5rem;}
#date_box_single .date-picker-wrapper .month-wrapper table td:last-child .day, #date_box .date-picker-wrapper .month-wrapper table td:last-child .day {margin-right: 0;}
#date_box_single .date-picker-wrapper .month-wrapper table .day.invalid, #date_box .date-picker-wrapper .month-wrapper table .day.invalid {background-color: #F5F5F5;}

.date-picker-wrapper .day.available-day {background-color: #FFF0D0; cursor: pointer;}
.date-picker-wrapper .day.unavailable-day {background-color: #FDD3D3 !important;}
.date-picker-wrapper .day.future-invalid {background-color: #f0f0f0; color: #ccc; cursor: not-allowed;}
.date-picker-wrapper .day.empty {background: transparent; cursor: default;}

#date_box_single .date-picker-wrapper .first-date-selected, #date_box_single .date-picker-wrapper .last-date-selected {color: white !important; position: relative; z-index: 1; background-color: #fff !important;}
#date_box_single .date-picker-wrapper .first-date-selected span, #date_box_single .date-picker-wrapper .last-date-selected span {color: #fff !important;}
#date_box_single .date-picker-wrapper .month-wrapper table .day.checked{background-color: #74A736 !important;}
#date_box .date-picker-wrapper .month-wrapper table .day.checked {background-color: #74A736 !important;}

/* #date_box .date-picker-wrapper .month-wrapper table .day.hovering {
	background-color: #74A736;
	color: #fff;
} */

/* #date_box_single .date-picker-wrapper .month-wrapper table .day.toMonth.hovering{
	background: #74A736;
	color: #fff;
}
#date_box .date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
	background: #74A736;
	color: #fff;
} */

#date_box_single .date-picker-wrapper table .caption .next img, #date_box_single .date-picker-wrapper table .caption .prev img, #date_box .date-picker-wrapper table .caption .next img, #date_box .date-picker-wrapper table .caption .prev img{width: 2.7rem; height: 2.7rem;}
#date_box_single .date-picker-wrapper table .caption .next:hover, #date_box_single .date-picker-wrapper table .caption .prev:hover, #date_box .date-picker-wrapper table .caption .next:hover, #date_box .date-picker-wrapper table .caption .prev:hover {background-color: #fff;}
.day-data-container {display: flex; flex-direction: column; row-gap: 0.8rem; width: 12.6rem;}

/* 데이터 배지 공통 스타일 */
.data-badge {padding: 1.4rem 1.9rem; border-radius: 0.6rem; font-size: 2.4rem; color: white; text-align: center; line-height: 3.6rem; font-weight: 500;}
.learning-complete {background-color: #2C2C2C;}
.monthly-data {background-color: #FF7F69; padding: 1.2rem;}
.mission-learning {background-color: #5D79FA;}
.day-number {font-size: 2.4rem; font-weight: 500; width: 2.8rem; text-align: right; line-height: 3.6rem; color: #000;}

@media screen and (max-width: 768px){
	.calendar_popup {width: 300px;}
	.month-nav {column-gap: 46px;}
    .month1-header, .month2-header {margin-bottom: 22px;}
	.month-nav .prev img {width: 24px; height: 24px;}
	.month-nav .next img {width: 24px; height: 24px;}
	.month-name .year-month {font-size: 14px;}
	.month-name .year-month .month-element {font-size: 14px;}
	.month-name .year-month::after {width: 14px; height: 14px; margin-top: 3px; margin-left: 3px;}
	#date_box_single .week-name th, #date_box .week-name th {font-size: 10px; padding: 0 0 5px 8px;}
	#date_box_single tbody td, #date_box tbody td {height: 87px; padding: 0; padding-top: 6px;}
	#date_box_single .date-picker-wrapper .month-wrapper table .day, #date_box .date-picker-wrapper .month-wrapper table .day {font-size: 10px; column-gap: 2px; row-gap: 4px; padding: 0;}
	.day-number {font-size: 10px; width: 12px; text-align: right; line-height: 9px;}
	.data-badge {font-size: 8px; line-height: 10px; padding: 4px; margin-top: 1px; border-radius: 2px;}
	.monthly-data {padding: 2px;}
    .month-name .year-month .month-element:last-child {margin-left: 5px;}
	.day-data-container {row-gap: 4px; width: 24px;}
    #date_box_single tbody td:first-child, #date_box tbody td:first-child {padding-left: 5px;}
}