/********************** calendar **********************/
.calendar-wrap{background-color:#fff; border-radius:20px; box-sizing: border-box; overflow:hidden; border:1px solid var(--wht-border-color);}
.calendar-wrap .calendar-header{display:flex; justify-content:space-between; align-items: center; border-bottom:1px solid var(--wht-border-color); box-sizing: border-box;}
.calendar-wrap .calendar-header .btn-month{display: flex; align-items: center; justify-content: center; width:32px; height:32px; cursor: pointer;}
.calendar-wrap .calendar-header .btn-month:hover{opacity: 0.5;}

.tab-wrap .tab-content .calendar-header .title,
.bid-today .title{font-weight: 700; color:var(--bk-0-color);}

.calendar-wrap .calendar-content{display: flex; flex-flow: column; gap:12px;}
.calendar-wrap .calendar-days,
.calendar-wrap .calendar-dates{display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size:15px; font-weight:600;}
.calendar-wrap .calendar-days{color: var(--bk-10-color); text-align: center;}
.calendar-wrap .calendar-dates{color: var(--bk-0-color);}
.calendar-wrap .calendar-dates .date{ display: flex; flex-flow:column; justify-content: space-between; background-color: #F7F8FD; border-radius: 6px; cursor: pointer; font-weight: 600;}
.calendar-wrap .calendar-dates .date.disabled{background-color: transparent; opacity: .1; cursor: not-allowed; font-weight: 500;}
.calendar-wrap .calendar-dates .date.holiday{color:var(--red-0-color);}
.calendar-wrap .calendar-dates .date.selectedDate{background-color: var(--blue-0-color); color:#fff;}
.calendar-wrap .calendar-dates .date.selectedDate small{color:#fff;}
.calendar-wrap .calendar-dates .date small{display: block; text-align: right; color:var(--bk-50-color);}
.calendar-wrap .calendar-dates .date.today{background-color: var(--blue-0-color); color:#fff;}
.calendar-wrap .calendar-dates .date.today small{color:#fff;}

.calendar-wrap .calendar-color-code{display: flex; align-items: center; gap:16px;}
.calendar-wrap .calendar-color-code .code{font-size:13px; font-weight: 500; color:var(--bk-10-color); display: flex; align-items: center; gap:8px;}
.calendar-wrap .calendar-color-code .code::before{content: ""; display: block; width:12px; height: 12px; border-radius: 100%;}
.calendar-wrap .calendar-color-code .code.today::before{background-color: var(--blue-0-color);}
.calendar-wrap .calendar-color-code .code.holiday::before{background-color: var(--red-0-color);}
.calendar-wrap .calendar-color-code .code.count::before{background-color: var(--bk-50-color);}




/********************** PC **********************/
@media screen and (min-width: 1151px) {
    .calendar-wrap{min-width: 590px; width:42.21%;}
}
/********************** PC + TABLET **********************/
@media screen and (min-width: 768px) {
    .calendar-wrap .calendar-header,
    .calendar-wrap .calendar-color-code{padding:12px 30px;}
    .calendar-wrap .calendar-content{padding:12px 32px 0;}

    .tab-wrap .tab-content .calendar-header .title, 
    .bid-today .title{font-size:var(--subt-fs-pc-1);}
    .calendar-wrap .calendar-dates .date{padding:7px 9px; aspect-ratio:7 / 6; font-size:15px;}
    .calendar-wrap .calendar-dates .date small{font-size:12px;}
}

/********************** MOBILE **********************/
@media screen and (max-width: 767px) {
    .calendar-wrap .calendar-header,
    .calendar-wrap .calendar-color-code{padding:8px 20px;}
    .calendar-wrap .calendar-content{padding:8px 20px 0;}

    .tab-wrap .tab-content .calendar-header .title,
    .bid-today .title{font-size:var(--subt-fs-mo-1);}
    .calendar-wrap .calendar-dates{font-size:14px;}
    .calendar-wrap .calendar-dates .date{padding:6px 15%; font-size:14px;}
    .calendar-wrap .calendar-dates .date small{font-size:10px;}
}