/* Flatpickr 커스텀 스타일 - 모바일 최적화 */
.flatpickr-calendar {
    width: 100% !important;
    max-width: 320px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 12px;
    margin: 5px auto;
}

/* 날짜 셀 스타일 */
.flatpickr-day {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    margin: 2px;
    font-size: 14px;
    border: none !important;  /* 라인 제거 */
}

/* 선택된 날짜 */
.flatpickr-day.selected {
    background: #02A360 !important;
    border-color: #02A360 !important;
    color: white !important;
    border: none !important;
}

/* 비활성화된 날짜 */
.flatpickr-day.disabled {
    color: #ccc !important;
    cursor: not-allowed;
    background: #f8f8f8;
}

/* 오늘 날짜 */
.flatpickr-day.today {
    border-color: #02A360;
}

/* 달력 헤더 */
.flatpickr-current-month {
    font-size: 16px;
    padding: 5px 0;  /* 상단 패딩 감소 */
    margin-top: -2px; 
}

/* 연도 텍스트 스타일 */
.flatpickr-current-month .cur-year {
    font-weight: bold !important; /* 연도 텍스트를 진하게 처리 */
}

/* 연도 선택 화살표 스타일 */
.flatpickr-current-month .numInputWrapper {
    position: relative !important;
    margin-left: 5px !important; /* 연도 텍스트와 화살표 사이 간격 줄임 */
}

.flatpickr-current-month .numInputWrapper span {
    /* 기존 화살표 스타일 초기화 */
    opacity: 0 !important;
    border: none !important; 
}

.flatpickr-current-month .numInputWrapper span:after,
.flatpickr-current-month .numInputWrapper span:before {
    /* 기존 화살표의 가상 요소 숨김 */
    display: none !important;
    content: '' !important;
    border: none !important;
}

.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown,
.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown,
span.arrowUp,
span.arrowDown,
.year-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-size: 16px 16px !important; /* 이미지 크기 약간 축소 */
    cursor: pointer !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #f0f0f0 !important; /* 배경색 추가 */
    z-index: 10 !important; /* z-index 증가 */
    display: block !important;
    opacity: 1 !important;
    border: 1px solid #ccc !important; /* 테두리 추가 */
    border-radius: 4px !important; /* 둥근 모서리 추가 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; /* 약간의 그림자 효과 */
    /* 명확한 클래스명 지정 */
    pointer-events: auto !important; /* 이벤트 수신 보장 */
}

.flatpickr-current-month .numInputWrapper .arrowUp:hover,
.flatpickr-current-month .numInputWrapper .arrowDown:hover,
.numInputWrapper span.arrowUp:hover,
.numInputWrapper span.arrowDown:hover,
span.arrowUp:hover,
span.arrowDown:hover,
.year-arrow:hover {
    background-color: #e0e0e0 !important; /* 호버 시 배경색 변경 */
    border-color: #aaa !important; /* 호버 시 테두리 색상 강화 */
}

.flatpickr-current-month .numInputWrapper .arrowUp,
.numInputWrapper span.arrowUp,
span.arrowUp {
    right: -22px !important; /* 위 방향 화살표 위치 조정 */
    background-image: url('/images/arrow_up_large.svg') !important; /* SVG 이미지로 변경 */
}

.flatpickr-current-month .numInputWrapper .arrowDown,
.numInputWrapper span.arrowDown,
span.arrowDown {
    right: -45px !important; /* 아래 방향 화살표 위치 조정 */
    background-image: url('/images/arrow_down_large.svg') !important; /* SVG 이미지로 변경 */
}

/* 화살표 버튼 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 10px;
}

/* 비활성화된 날짜 스타일 */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay.flatpickr-disabled,
.flatpickr-day.nextMonthDay.flatpickr-disabled,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: #ccc !important;
    background-color: #f0f0f0 !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.5;
    pointer-events: none;
}

/* 선택된 날짜 스타일 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: #02A360 !important;
    border-color: #02A360 !important;
    color: #fff !important;
    border: none !important;
}

/* 오늘 날짜 스타일 */
.flatpickr-day.today {
    border-color: #02A360;
    background-color: transparent;
    color: #02A360;
}

/* 호버 효과 */
.flatpickr-day:hover:not(.flatpickr-disabled) {
    background-color: #e6f7ef;
    border: none !important;
}

/* 선택 가능한 날짜 범위 스타일 */
.flatpickr-day.in-range:not(.selected) {
    background-color: rgba(2, 163, 96, 0.1) !important;
    border-color: transparent !important;
}

.flatpickr-day.in-range:hover {
    background-color: rgba(2, 163, 96, 0.2) !important;
}

/* 비활성화된 날짜 스타일 강화 */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: rgba(72, 72, 72, 0.3) !important;
    background: #f8f8f8 !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* 선택 가능한 날짜 범위 스타일 강화 */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: #e6f7ef !important;
    border-color: transparent !important;
    color: #000 !important;
}

/* 선택된 날짜 스타일 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #02A360 !important;
    border-color: #02A360 !important;
    color: #fff !important;
    border: none !important;
}

/* 모바일 최적화를 위한 달력 크기 조정 */
@media screen and (max-width: 375px) {
    .flatpickr-calendar {
        width: 95% !important;
        min-width: 250px;
        padding: 5px;
    }

    .flatpickr-day {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        margin: 1px;
    }
    
    .flatpickr-current-month {
        font-size: 14px;
        padding: 5px 0;  /* 상단 패딩 감소 */
        margin-top: -2px; 
    }
    
    /* 화살표 버튼 크기 조정 */
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        padding: 5px;
    }
    
    /* 요일 헤더 크기 조정 */
    .flatpickr-weekday {
        font-size: 11px;
    }
    
    /* 입력 필드 관련 - 폰트 크기 속성 제거 */
    input.flatpickr-input {
        /* font-size: 12px; 제거 - 기본 폰트 크기 유지 */
        padding: 8px 5px;
        width: 100%;
    }
    
    /* 날짜 선택기가 모바일 화면에서 중앙에 나타나도록 설정 */
    .flatpickr-calendar.open {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* 작은 화면(320px)에서만 폰트 크기 축소 */
@media screen and (max-width: 320px) {
    input.flatpickr-input {
        font-size: 12px;
        padding: 6px 4px;
    }
    
    .flatpickr-day {
        font-size: 11px;
    }
    
    .flatpickr-current-month {
        font-size: 13px;
        padding: 5px 0;  /* 상단 패딩 감소 */
        margin-top: -2px; 
    }
    
    .flatpickr-weekday {
        font-size: 10px;
    }
}

/* 모바일 기기에서 입력 필드의 패딩 및 폰트 조정 */
input.flatpickr-input {
    box-sizing: border-box;
    text-overflow: ellipsis;
    width: 100%; /* 입력 필드가 부모 요소의 너비를 꽉 채우도록 설정 */
}

/* 달력 월 이동 화살표 버튼 스타일 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 5px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    margin: 10px !important; 
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background-color: #e0e0e0 !important;
    border-color: #aaa !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #333 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #000 !important;
}