/* 달력 전체 */
.calendar-wrap {
    --calendar-wrap-padding-inline: 10px;
    --color-sunday: #ef5555;
    --color-saturday: #5d7fff;
    --color-selected: var(--color-main-02);
    --color-disabled: #ddd;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-inline: var(--calendar-wrap-padding-inline);
    padding-bottom: calc(var(--calendar-wrap-padding-inline) * 2);
    background-color: #fff;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);

    /* 달력 월 표시 부분 */
    & .calendar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding-bottom: 20px;

        & .dateTitle {
            font-size: var(--font-size-20);
            font-weight: var(--font-weight-bold);
            letter-spacing: 0.5px;
        }
    }
    
    /* 달력 요일(week) 및 날짜(date) 부분 */
    & .grid-cal {
        --grid-cal-gap: 5px;
        --grid-cal-vertical-gap: calc(var(--grid-cal-gap) * 6);

        @media screen and (max-width: 640px) {
            --grid-cal-vertical-gap: calc(var(--grid-cal-gap) * 3);
        }

        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-column-gap: var(--grid-cal-gap);
        justify-items: center;
        width: 100%;

        /* 요일 부분 */
        &.dateHead {
            padding-block: var(--grid-cal-vertical-gap);
        }

        /* 날짜 부분 */
        &.dateBoard {
            grid-row-gap: var(--grid-cal-vertical-gap);
        }
    }
    
    /* 일자 부분 */
    & .date-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        & .date {
            --date-w: clamp(30px, 6.5625vw, 42px);
            
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--date-w);
            aspect-ratio: 1/1;
            border-radius: 50%;
            color: #2a2a2a;
            cursor: pointer;

            /* 휴일, 일요일, 토요일 색상 */
            &.saturday {color: var(--color-saturday);}
            &.date.selected {
                background-color: var(--color-selected); 
                color: #fff;
            }
            &.date:where(.disabled, .unselected) {
                background-color: transparent; 
                color: #ddd; 
                cursor: not-allowed;

                &.holiday {
                    color: var(--color-sunday); 
                    cursor: not-allowed;
                }
            }
            &.date.today {
                position: relative;
                &::before {
                    position: absolute;
                    top: 80%;
                    font-size: 10px;
                    word-break: keep-all;
                    text-align: center;
                    line-height: 1.1;
                    content: '오늘';
                }

                &.disbled {
                    background-color: var(--color-main-02); 
                    color: #fff; cursor: not-allowed;
                }
            }

            &.has-title {
                position: relative;

                &::before {
                    position: absolute;
                    top: 80%;
                    font-size: 10px;
                    content: var(--holiday-name);
                    word-break: keep-all;
                    text-align: center;
                    line-height: 1.1;

                    @media screen and (max-width: 480px) {
                        font-size: 8px;
                    }
                }
            }
            
        }
    }

    /* 좌우 버튼 */
    & .btn  {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        box-shadow: 0 3px 7px rgba(0,0,0,0.15);
        cursor: pointer;

        &.prevDay::after {left: 12px; transform: rotate(-135deg);}
        &.nextDay::after {left: 8px; transform: rotate(45deg);}
    }
    & .btn::after {
        position: absolute;
        top: 10px;
        width: 8px;
        height: 8px;
        border: 2px solid #999;
        border-width: 2px 2px 0 0;
        content: '';
    }
    
}