body {
    font-family: 'SUIT Medium', sans-serif;
}
#datepicker {
    width: 100%; /* 카드 너비에 맞게 조정 */
    height: auto;
    padding: 5px; /* 달력 주변 여백 */
}

.datepicker th, .datepicker td {
    text-align: center;
    padding: 12px; /********** 달력크기 **********/
}
/* 달력크기 동적조정 */
@media (max-width: 1730px) {
    .datepicker th, .datepicker td {
        padding: 11px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1630px) {
    .datepicker th, .datepicker td {
        padding: 10px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1530px) {
    .datepicker th, .datepicker td {
        padding: 9px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1430px) {
    .datepicker th, .datepicker td {
        padding: 7px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1330px) {
    .datepicker th, .datepicker td {
        padding: 6px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1230px) {
    .datepicker th, .datepicker td {
        padding: 5px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1130px) {
    .datepicker th, .datepicker td {
        padding: 4px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 1030px) {
    .datepicker th, .datepicker td {
        padding: 4px; /* 더 작은 화면에서 더 작은 패딩 */
    }
}
@media (max-width: 990px) {
    .datepicker th, .datepicker td {
        padding: 14px; /* 모바일 화면에서 패딩 적용 */
        text-align: center;
    }
}
@media (max-width: 768px) {
    .datepicker th, .datepicker td {
        padding: 12px; /* 모바일 화면에서 패딩 적용 */
    }
}

.datepicker table {
    width: 100%;
    height: auto;
    table-layout: auto;
}
.datepicker th {
    background-color: #f8f9fa; /* 요일 헤더 배경색 */
    color: #0056b3; /* 요일 헤더 텍스트 색상 - 진한 파란색 */
}
.datepicker .today {
    background-color: transparent; /* 배경색 제거 */
    border-radius: 50%; /* 동그라미 모양 */
    color: #007bff; /* 텍스트 색상 */
    padding: 0px; /* 패딩 줄임 */
}
.datepicker .datepicker-switch {
    color: #6c757d; /* 년도 텍스트 색상 - 회색 */
}
#datepicker .datepicker {
    padding: 0; /* Datepicker의 내부 패딩 제거 */
    border: none; /* 필요한 경우 테두리 제거 */
}


#datepicker {
    width: 100%; /* card 크기에 맞춰 조정 */
}
.card {
    width: 100%;
    max-width: 600px;
    min-width: 300px;
    margin: auto;
    padding: 0;
    height: auto;
    font-family: 'SUIT Medium', sans-serif;
}

@media (max-width: 768px) {
    .card {
        max-width: 500px;
    }
}

@media (max-width: 480px) {
    .card {
        max-width: 100%;
        margin: 10px;
    }
}
.card {
    height: auto; /* 높이를 내용에 맞게 자동 조정 */
}


/*이미지 돋보기*/
.image-container {
    position: relative;
    display: inline-block;
}

.zoom-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

/* 스타일 및 크기는 원하는 대로 조정할 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: 10% auto;
    display: block;
    width: 80%;
    max-width: 900px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}