/* ── 1) 전체 달력 컨테이너 ── */
.flatpickr-calendar {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: none;
    width: 280px;
}

/* ── 2) 헤더 & 요일 ── */
.flatpickr-months .flatpickr-month {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flatpickr-calendar .flatpickr-months {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em 1em;
    background: #bee1ed;
    border-bottom: 1px solid #f2f2f2;
}
.flatpickr-calendar .flatpickr-current-month {
    color: #333;
    font-weight: 600;
    font-size: 1.1em;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    height: auto;
    left: auto;
    width: auto;
    justify-content: center;
    gap: 10px;
    padding: 0;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 0.25em;
    width: 2em !important;
    height: 2em !important;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.2s;
    top: 0;  /* 부모가 relative 이므로 필요하다면 조정 */
}
.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    background-color: rgba(53, 126, 221, 0.1);
}

/* 화살표 버튼 동그랗게, hover 간격 보정 (inline 스타일 대신 CSS 로도 가능) */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    border-radius: 50%;
    transition: background-color 0.2s;
}
.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    background: rgba(53, 126, 221, 0.1);
}

/* ── 3) 요일 헤더 ── */
.flatpickr-calendar .flatpickr-weekdays {
    border-bottom: 1px solid #f2f2f2;
    height: auto;
}
.flatpickr-calendar .flatpickr-weekday {
    color: #757575;
    text-transform: uppercase;
    padding: 0.7em 0;
}

/* ── 4) 날짜 셀 크기 & 간격 ── */
.flatpickr-calendar .flatpickr-day {
    width: 2em !important;
    height: 2em !important;
    min-width: 2em !important;
    max-width: 2em !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    margin: 4px;   /* 셀 간격 제거 */
    padding: 0;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* ── 5) hover 효과 ── */
.flatpickr-calendar .flatpickr-day:hover {
    background: #e6f0ff !important;
    color: #1a1a1a !important;
    border-color: #357edd !important;
}

/* ── 6) 오늘 강조 ── */
.flatpickr-calendar .flatpickr-day.today {
    border-color: #e74c3c !important;
}

/* ── 7) 선택된 범위 ── */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: #bfddff  !important;
    color: #fff;
    border-color: #bfddff  !important;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay.selected,
.flatpickr-calendar .flatpickr-day.prevMonthDay.startRange,
.flatpickr-calendar .flatpickr-day.prevMonthDay.endRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.selected,
.flatpickr-calendar .flatpickr-day.nextMonthDay.startRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.endRange{
    color: rgba(57, 57, 57, 0.3);
}

/* ── 8) inRange ── */
.flatpickr-calendar .flatpickr-day.inRange {
    background: rgba(53, 126, 221, 0.1) !important;
    border-radius: 0;
    box-shadow: -7px 0 0 #357edd1a, 5px 0 0 #357edd1a;
}
.flatpickr-calendar .flatpickr-day.startRange {
    box-shadow: 0 0 0 #357edd1a, 5px 0 0 #357edd1a;
}
.flatpickr-calendar .flatpickr-day.endRange {
    box-shadow: -7px 0 0 #357edd1a, 0 0 0 #357edd1a;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -7px 0 0 #357edd1a, 0 0 0 #357edd1a;
}
.flatpickr-day.selected.startRange.endRange {
    box-shadow: 0 0 0 5px #357edd1a;
}

/* ── 9) 비활성 날짜(이전/다음 달) 중 선택되지 않은 것만 회색 처리 ── */
.flatpickr-calendar .flatpickr-day.prevMonthDay:not(.selected):not(.startRange):not(.endRange):not(.inRange),
.flatpickr-calendar .flatpickr-day.nextMonthDay:not(.selected):not(.startRange):not(.endRange):not(.inRange),
.flatpickr-calendar .flatpickr-day.disabled:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
    color:      #b5b7c0 !important;
    background: none    !important;
    /* ❌ border:none 대신 투명한 테두리로 */
    border: 1px solid transparent !important;
    font-weight: lighter;
}

/* ── 9-B) (대안) 비활성 날짜 hover 시 회색 테두리만 주고 싶을 때 ── */
/* 아래 블록을 사용하시면 배경은 그대로 두고 테두리만 회색으로 바뀝니다. */
.flatpickr-calendar .flatpickr-day.prevMonthDay:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover,
.flatpickr-calendar .flatpickr-day.nextMonthDay:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover,
.flatpickr-calendar .flatpickr-day.disabled:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover {
    border-color: #c0c4cc !important
}

/* ── 10) 커스텀 화살표만 보이게(중복 제거) ── */
/* 기본 SVG 아이콘 숨기기 */
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    display: none !important;
}
/* ::after 로 표시할 화살표 */
.flatpickr-calendar .flatpickr-prev-month::after,
.flatpickr-calendar .flatpickr-next-month::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: #555;
    content: '';
}

.flatpickr-calendar .flatpickr-next-month::after {
    left: 55%;
}

.flatpickr-calendar .flatpickr-prev-month::after { content: "◀"; }
.flatpickr-calendar .flatpickr-next-month::after { content: "▶"; }

.flatpickr-days {
    width: 280px !important;
}

.dayContainer {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}

/* ── 1) 요일 헤더 (일요일·토요일) ── */
.flatpickr-calendar .flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(1) {
    color: #e63946;  /* 일요일 헤더 빨강 */
}
.flatpickr-calendar .flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(7) {
    color: #1d3557;  /* 토요일 헤더 파랑 */
}

/* ── 2) 날짜 셀 (dayContainer 내에서 첫째·일곱째 열) ── */
.flatpickr-calendar .dayContainer .flatpickr-day:nth-child(7n+1) {
    color: #ff6a76;  /* 일요일 날짜 빨강 */
}
.flatpickr-calendar .dayContainer .flatpickr-day:nth-child(7n) {
    color: #6b8fcc;  /* 토요일 날짜 파랑 */
}

/* ── 3) 선택된 범위나 hover 시에도 컬러 유지 ── */
/* ── 1) 기본: 선택・hover 시 연한 색상 ── */
.flatpickr-calendar .dayContainer .flatpickr-day.selected.startRange:nth-child(7n+1),
.flatpickr-calendar .dayContainer .flatpickr-day.startRange:nth-child(7n+1),
.flatpickr-calendar .dayContainer .flatpickr-day.endRange:nth-child(7n+1),
.flatpickr-calendar .dayContainer .flatpickr-day.inRange:nth-child(7n+1),
.flatpickr-calendar .dayContainer .flatpickr-day:hover:nth-child(7n+1) {
    color: #ff0000;
}

.flatpickr-calendar .dayContainer .flatpickr-day.selected.startRange:nth-child(7n),
.flatpickr-calendar .dayContainer .flatpickr-day.startRange:nth-child(7n),
.flatpickr-calendar .dayContainer .flatpickr-day.endRange:nth-child(7n),
.flatpickr-calendar .dayContainer .flatpickr-day.inRange:nth-child(7n),
.flatpickr-calendar .dayContainer .flatpickr-day:hover:nth-child(7n) {
    color: #0054dd;
}

/* ── 2) 비활성(prevMonthDay/nextMonthDay) 일·토는 더 진한 색 ── */
.flatpickr-calendar .dayContainer .flatpickr-day.prevMonthDay:nth-child(7n+1),
.flatpickr-calendar .dayContainer .flatpickr-day.nextMonthDay:nth-child(7n+1),
.flatpickr-calendar .dayContainer .flatpickr-day.disabled:nth-child(7n+1) {
    color: #df8e8e !important;
}

.flatpickr-calendar .dayContainer .flatpickr-day.prevMonthDay:nth-child(7n),
.flatpickr-calendar .dayContainer .flatpickr-day.nextMonthDay:nth-child(7n),
.flatpickr-calendar .dayContainer .flatpickr-day.disabled:nth-child(7n) {
    color: #8ba8d8 !important;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange {
    border-color: #eaf2fc;
}

/* month dropdown 에 적용할 padding / border-radius etc */
.flatpickr-calendar .my-flatpickr-month {
    padding: 4px 5px;
    border-radius: 6px;
    margin-right: 10px;  /* 오른쪽으로 살짝 떨어뜨리기 */
}
.flatpickr-current-month .numInputWrapper {
    width: 7ch;
    display: inline-block;
    padding: 5px;
    align-content: center;
    border-radius: 6px;
}

/* 일반 disabled 스타일 */
span.flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .dayContainer span.flatpickr-day.flatpickr-disabled:nth-child(7n) {
    background: none !important;
    color: rgba(57, 57, 57, 0.1) !important;
    border-color: transparent !important;
}

span.flatpickr-day.flatpickr-disabled:hover {
    background: none !important;
    color: rgba(57, 57, 57, 0.1) !important;
}

/* hover 효과에서 today는 제외 */
span.flatpickr-day.flatpickr-disabled:not(.today):hover {
    border-color: transparent !important;
}