/* ======================================================
   Flatpickr 커스텀 UI/UX (높이 자동 조절 & 레이아웃 보정)
====================================================== */
/* 1. 달력 전체 박스 및 내부 컨테이너 너비 강제 고정 */
.flatpickr-calendar {
  box-sizing: border-box !important;
  width: 320px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.dayContainer,
.flatpickr-days {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* 2. 요일(Weekdays) 패딩 및 너비 삐져나옴 완벽 해결 */
.flatpickr-weekdays {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
.flatpickr-weekday {
  flex: 1 !important;
  max-width: 14.28% !important;
  text-align: center !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

/* 3. 날짜(Days) 셀 크기 그리드 맞춤 */
.dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

/* 4. 이전달 / 다음달 날짜 안 보이게 숨기기 (숨김 처리) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 5. 생성한 년도 드롭다운(select) 예쁘게 스타일링 */
.cur-year-select {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  margin-left: 4px;
}

.cur-year-select:hover {
  border-color: #94a3b8;
}

/* 선택된 날짜 & 오늘 날짜 포인트 컬러 */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-primary, #0066ff) !important;
  border-color: var(--color-primary, #0066ff) !important;
  color: #fff !important;
}

.flatpickr-day.today {
  border-color: var(--color-primary, #0066ff) !important;
}

/* flatpickr-months 헤더 배경 및 중앙 정렬 */
.flatpickr-months {
  background-color: #fff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

.flatpickr-months .flatpickr-month {
  background: transparent !important;
  color: #fff !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flatpickr-current-month {
  position: relative !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* 드롭다운 월 선택기 글자색 보정 */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #333 !important;
  background: transparent !important;
}

/* 화살표 버튼 좌/우 정렬 및 스타일 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: 34px !important;
  width: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: rgba(36, 36, 36, 0.95) !important;
  fill: rgba(36, 36, 36, 0.95) !important;
  cursor: pointer !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary);
}
.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: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #fff !important;
}
.flatpickr-months .flatpickr-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/*  날짜 컨테이너 높이 자동화 */
.flatpickr-innerContainer {
  padding: 12px 12px 0 12px !important;
}
.flatpickr-rContainer,
.dayContainer,
.flatpickr-days {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.flatpickr-weekday {
  flex: 1 !important;
  max-width: 14.28% !important;
  text-align: center !important;
  font-weight: 600 !important;
  color: #64748b !important;
}
.dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  outline: none !important;
}
/* 날짜 기본 셀 */
.flatpickr-day {
  flex: 1 0 14.28% !important;
  max-width: 14.28% !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
}
/*  이전달 / 다음달 날짜 숨기기 & 높이  */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.flatpickr-day.nextMonthDay:nth-child(n + 36) {
  display: none !important;
}

/* 년도 드롭다운 select 스타일 */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 4px !important;
  cursor: pointer !important;
}
.flatpickr-calendar .numInputWrapper span {
  display: none !important;
}
.flatpickr-calendar .numInputWrapper {
  padding: 0 !important;
  width: 100% !important;
}
.cur-year-select {
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: #333 !important;
  padding: 0 4px !important;
  cursor: pointer !important;
  margin-left: 2px !important;

  /* 화살표 아이콘 및 정렬 스타일 */
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* 드롭다운 옵션 목록 색상 고정 */
.cur-year-select option,
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  color: #333 !important;
  background-color: #fff !important;
}
#input-birth[readonly],
.flatpickr-input[readonly] {
  background-color: #f8faff !important;
  color: #333333 !important;
  opacity: 1 !important;
}
#input-birth[readonly],
.flatpickr-input[readonly] {
  background-color: #f8faff !important;
  color: #333333 !important;
  opacity: 1 !important;
}

#input-birth:focus,
.flatpickr-input:focus {
  background-color: var(--form-input-bg-white) !important;
  border-color: var(--form-input-border-focus) !important;
  box-shadow: var(--form-input-shadow-focus) !important;
}
#input-birth::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* 오른쪽 달력 아이콘 버튼 */
.btn-calendar {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.btn-calendar:hover {
  background-color: #f0f2f5;
}

.btn-calendar img {
  width: 20px;
  height: 20px;
}