:root {
    --calendar-border-radius : 6px;
    --dot-size: 6px;
    --dot-color: var(--td-light);
}

.calendar-wrap { font-family: "Noto Sans KR" }
.calendar-wrap * { transition: all 0.2s ease;}
.calendar-wrap .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;}
.calendarWrap.attendance .calendar-wrap { max-width: 360px; margin: 0px auto;}

.calendar-wrap .calendar-header a.btn-previous,
.calendar-wrap .calendar-header a.btn-next {padding: 0; cursor: pointer; border-radius: var(--calendar-border-radius); border: 1px solid var(--s-color1); padding: 9px}
.calendar-wrap .calendar-header a.btn-previous i,
.calendar-wrap .calendar-header a.btn-next i { width: 16px; height: 16px;display: block;background-position: center;background-size: contain;}
.calendar-wrap .calendar-header a.btn-previous i {background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2012L6%208L10%204%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); }
.calendar-wrap .calendar-header a.btn-next i { background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2012L10%208L6%204%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');}
.calendar-wrap .calendar-header .month { font-size: var(--f-heading2);font-style: normal; font-weight: 700;}

.calendarWrap.product { max-width: 450px; margin: 0px auto; }
.calendar-wrap .calendar-body .day-list { display: grid; grid-template-columns: repeat(7, 1fr); grid-column-gap: 4px ; grid-row-gap: 4px ; text-align: center; }
.calendar-wrap .calendar-body .day-list:nth-child(2) { margin-top: 4px;}
.calendar-wrap .calendar-body .day-list.week .day-item { font-size: var(--f-body3); color: #7A7A89; text-align: center; letter-spacing: -0.24px;}

.calendar-wrap .calendar-body .day-list.day .day-item {position: relative;display: flex; align-items: center;justify-content: center; margin: auto; flex-wrap: wrap; max-width: 42px; max-height: 42px; width: 100%; height: 100%; aspect-ratio: 1/1; padding: 3px; }
.calendar-wrap .calendar-body .day-list.day .day-item .day-box { font-size: var(--f-body1); color: var(--n-subTitle); letter-spacing: -0.28px;  cursor: pointer; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.calendar-wrap .calendar-body .day-list.day .day-item .day-box span { font-size: inherit; display: flex; align-items: center; justify-content: center; aspect-ratio: 36/26; width: 100%; height: auto; transition: none;}
/* active */
.calendar-wrap .calendar-body .day-list.day .day-item.active .day-box{align-items: flex-start;}
.calendar-wrap .calendar-body .day-list.day .day-item.none.active .day-box span{aspect-ratio: 1/1;}
.calendar-wrap .calendar-body .day-list.day .day-item.none.active .day-box span,
.calendar-wrap .calendar-body .day-list.day .day-item.active .day-box span{background-color: var(--p-color2); border-radius: 6px; color: #fff; font-weight: 500;}
/* .calendar-wrap .calendar-body .day-list.day .day-item.holiday .day-box span { color: red } */

/* .calendar-wrap .calendar-body .day-list.day .day-item:nth-child(7n) .day-box .date { color: red }
.calendar-wrap .calendar-body .day-list.day .day-item:nth-child(1) .day-box .date,
.calendar-wrap .calendar-body .day-list.day .day-item:nth-child(7n+1) .day-box .date { color: blue } */

/* Indicator Start */
.calendar-wrap .calendar-body .day-list.day .day-item .indicator { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 3px; width: 100%; min-height: initial !important;}
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span { display: inline-block; width: var(--dot-size) !important; height: var(--dot-size); border-radius: 50%; background: var(--dot-color); }
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span + span { margin-left: 2px; }

.calendar-wrap .calendar-body .day-list.day .day-item .indicator span.start,
.calendar-info .calendar-list .calendar-item .title span.start {--dot-color: var(--e-speaking-color); --tag-text: "개강"; --tag-background: var(--e-speaking-color-bg)}
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span.end,
.calendar-info .calendar-list .calendar-item .title span.end {--dot-color: var(--e-reading-color); --tag-text: "종강"; --tag-background: var(--e-reading-color-bg)}
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span.cdt,
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span.pbt,
.calendar-info .calendar-list .calendar-item .title span.cdt,
.calendar-info .calendar-list .calendar-item .title span.pbt { --dot-color: var(--e-writing-color) ; --tag-text: "모의고사"; --tag-background: var(--e-writing-color-bg)}
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span.special,
.calendar-info .calendar-list .calendar-item .title span.special {--dot-color: var(--e-listening-color); --tag-text: "특강"; --tag-background: var(--e-listening-color-bg)}
.calendar-wrap .calendar-body .day-list.day .day-item .indicator span.study,
.calendar-info .calendar-list .calendar-item .title span.study {--dot-color: var(--e-listening-color); --tag-text: "수강"; --tag-background: var(--e-listening-color-bg)}

.calendarWrap.attendance .calendar-wrap .calendar-body .day-list.day .day-item .indicator { display: none; }

/* 날짜 Activate */
.academy .calendar-wrap .calendar-body .day-list.day .day-item.today { border: 1px solid var(--p-color1); border-radius: var(--calendar-border-radius);}
.ielts .calendar-wrap .calendar-body .day-list.day .day-item.today { border: 1px solid var(--p-color2); border-radius: var(--calendar-border-radius);}


.calendarWrap.attendance .calendar-wrap .calendar-body .day-list.day .day-item .day-box { border-radius: 8px ;}
.calendarWrap.attendance .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box span::after { content: "오늘"; font-size: 11px; color: var(--n-subTitle); display: block; margin-top: 3px;;}

.calendar-wrap .calendar-body .day-list.day .day-item.attendance .day-box { background: var(--p-color2);}
.calendar-wrap .calendar-body .day-list.day .day-item.attendance .day-box span,
.calendar-wrap .calendar-body .day-list.day .day-item.absent .day-box span{ color: #fff; font-weight: 700; display: block;}
.calendar-wrap .calendar-body .day-list.day .day-item.attendance .day-box span::after {content: "출석";  color: #fff; font-size: 10px; font-weight: 700; display: block;}
.calendar-wrap .calendar-body .day-list.day .day-item.absent .day-box { background: var(--b-color2); border-radius: 6px;  }
.calendar-wrap .calendar-body .day-list.day .day-item.absent .day-box span::after {content: "결석";  color: #fff; font-size: 10px; font-weight: 700; display: block;}

/* .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box {border: none;} */


.calendar-wrap .calendar-body .day-list.day .day-item.today.active ,
.calendar-wrap .calendar-body .day-list.day .day-item.today.active .day-box { border: none !important} /* 오늘이고, 사용자가 선택한 날짜이면 사용자 선택된 css가 먼저 */
.calendar-wrap .calendar-body .day-list.day .day-item.today.active .day-box span::after { content: "" !important}

/* Calendar Info */
.calendarWrap.product .calendar-info { margin-top: 16px;}
.calendar-info { padding-top: 16px; position: relative; }
.calendar-info::before { content: '';position: absolute;left: -16px;top: 0;width: calc(100% + 32px);height: 1px;background-color: var(--s-color1); }
.calendar-info .calendar-header ,
.calendar-info .calendar-list#default,
.calendar-info .calendar-list .date { display: none;}

.calendar-info .calendar-list .calendar-item { display: flex; align-content: center; justify-content: space-between;margin-bottom: 8px}
.calendar-info .calendar-list .calendar-item .title { display: flex; align-items: center; font-size: var(--f-body1);}
.calendar-info .calendar-list .calendar-item .title span {padding: 2px 6px 2px 6px; margin-right: 4px; font-size: var(--f-body3);font-weight: 500; background-color: var(--tag-background); color: var(--dot-color); border-radius: 100px;}
.calendar-info .calendar-list .calendar-item .title span::before { content: var(--tag-text)}

.calendar-info .calendar-list .calendar-item .timer {font-size: var(--f-body3); color: var(--n-info) }

/* Tablet */
@media screen and (min-width: 576px) {
    /* .calendarWrap.product { display: flex; align-items: stretch; justify-content: space-between; max-width: unset;  max-width: calc(488px + 232px + 16px);}
    .calendarWrap.product .calendar { max-width: 488px; width: 100%;}
    .calendarWrap.product .calendar-info { max-width: 232px; width: 100%; border: 1px solid var(--s-color1); border-radius: 12px; margin-top: 0px; margin-left: 16px;;} */
    /* :root {
        --calendar-border-radius : 8px;
    } */
    .calendarWrap.product { max-width: unset}
    .calendarWrap.product .calendar-wrap .calendar-header .month { font-size: var(--f-heading1);}

    .calendar-wrap .calendar-body .day-list { grid-row-gap: 8px; grid-column-gap: 14px;}



}

/* PC */
@media screen and (min-width: 1200px) {
    /* :root {
        --calendar-border-radius : 8px;
        --calendar-max-width : 488px;
        --calendar-info-max-width : 232px;
    } */

    .calendarWrap.product { display: flex; align-items: stretch; justify-content: space-between; max-width: unset;  max-width: calc(488px + 232px + 16px);}
    .calendarWrap.product .calendar { max-width: 488px; width: 100%;}
    .calendarWrap.product .calendar-info { max-width: 232px; width: 100%; border: 1px solid var(--s-color1); border-radius: 12px; margin-top: 0px; margin-left: 16px;;}
    .ielts .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box { border: 1px solid var(--p-color2); border-radius: 8px;}
    .academy .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box { border: 1px solid var(--p-color1); border-radius: 8px;}

    .calendarWrap.product .calendar-wrap .calendar-body .day-list {row-gap: 8px; column-gap: 16px;}
    .calendarWrap.product .calendar-wrap .calendar-body .day-list.week { margin-bottom: 8px;}
    .calendarWrap.product .calendar-wrap .calendar-body .day-list.week .day-item {  font-size: var(--f-body1);font-weight: 700; }

    .calendar-wrap .calendar-body .day-list.day .day-item{aspect-ratio: 56/72; max-width: 56px; max-height: 94px; padding: 0 7px; display: block;}
    .calendar-wrap .calendar-body .day-list.day .day-item .day-box{align-items: flex-start; height: auto;}
    .calendar-wrap .calendar-body .day-list.day .day-item .day-box span{aspect-ratio: 1/1;}
    .calendar-wrap .calendar-body .day-list.day .day-item .indicator{position: static; margin-top: 8px;}
    /* active */
    .calendar-wrap .calendar-body .day-list.day .day-item.none.active .day-box span,
    .calendar-wrap .calendar-body .day-list.day .day-item.active .day-box span{border-radius: 8px;}

    .calendarWrap.attendance .calendar-wrap { max-width: unset ;}
    .calendarWrap.attendance .calendar-wrap .calendar-body .day-list { grid-row-gap: 12px;}
    .calendarWrap.attendance .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box span::after { margin-top: 0px;}
    /* .calendarWrap.product .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box span::after { content: "오늘"; font-size: var(--f-body4); color: var(--n-subTitle); display: block; font-weight: 400; } */

    .calendarWrap.product .calendar-wrap .calendar-body .day-list.day .day-item .indicator span {font-size: var(--f-body3);font-weight: 500; background-color: var(--tag-background); color: var(--dot-color); border-radius: 100px; height: 20px; width: auto !important; display: block; padding: 0 8px;}
    .calendarWrap.product .calendar-wrap .calendar-body .day-list.day .day-item .indicator span + span { margin-left: 4px;;}
    .calendarWrap.product .calendar-wrap .calendar-body .day-list.day .day-item .indicator span::before { content: var(--tag-text); letter-spacing: -1px;}

    .calendarWrap.classroom .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box{ border: none !important }
    .calendarWrap.product .calendar-wrap .calendar-body .day-list.day .day-item.today .day-box span::after { content: "오늘"; font-size: 11px; color: var(--n-subTitle); display: block; font-weight: 400;}
    /* 날짜 Active*/



    .calendar-info { padding: 16px; color: var(--n-mainTitle)}
    .calendar-info::before { display: none }
    .calendar-info .calendar-header { display: block; margin-bottom: 16px; font-weight: 700; font-size: var(--f-body3); color: var(--n-info);}

    .calendar-info .calendar-list { margin-bottom: 16px; height: auto !important ; width: 100%;}
    .calendar-info .calendar-list .date { display: block; margin-bottom: 8px; font-size: var(--f-body3);}

    .calendar-info .calendar-list .calendar-item { padding: 12px; position: relative; background: var(--b-color5); width: 100%;border-radius: 8px;}
    .calendar-info .calendar-list .calendar-item:last-of-type { margin-bottom: 0px;}
    .calendar-info .calendar-list .calendar-item .title { display: block; width: 100% ;}
    .calendar-info .calendar-list .calendar-item .title span { display: inline-block;}
    .calendar-info .calendar-list .calendar-item .title div {  margin-top: 8px;}

    .calendar-info .calendar-list .calendar-item .timer { position: absolute;     right: 16px;top: 16px; letter-spacing: normal;}

    .calendar-info.classroom { padding: 0px;}
    .calendar-info.classroom .calendar-list { overflow: hidden; margin-bottom: 0px;;}
    .calendar-info.classroom .calendar-list .calendar-item .title{ display: flex;}
    .calendar-info.classroom .calendar-list .calendar-item .title div { margin-top: 0px;;}
    .calendar-info.classroom .calendar-list .calendar-item .timer { top: 50%; transform: translateY(-50%);}

}

/*
.ani-card { opacity: 0;transform: translateY(20px) scale(0.95);transition: all 0.3s ease;}
.ani-card.appear {opacity: 1;transform: translateY(0) scale(1);} */