/* flatpickr iOS 톤 — css/lib/flatpickr.min.css 뒤에 실어야 같은 특이도에서 이긴다 */
.flatpickr-calendar,
.fp-pop {
  --px: 1px; /* 팝업은 뷰포트 스케일을 따르지 않는다 — 모바일에서 --px 가 0.2 로 줄면 달력이 쪼그라든다 */
  --bodyXS: calc(var(--px)*14); /* 폰트 토큰도 여기서 고정 --px 로 다시 푼다 — :root 값은 뷰포트 따라 줄어든다 */
  --bodyM: calc(var(--px)*16);
  --bodyL: calc(var(--px)*17);
  --fp-label: #1c1c1e;
  --fp-tertiary: rgb(60 60 67 / 30%);
  --fp-fill: rgb(118 118 128 / 12%);
  --fp-tint: color-mix(in srgb, var(--primary) 12%, transparent);
  width: calc(var(--px)*304);
  padding: calc(var(--px)*8) calc(var(--px)*12) calc(var(--px)*12);
  border: 0;
  border-radius: calc(var(--px)*16);
  background: rgb(255 255 255 / 88%);
  -webkit-backdrop-filter: blur(calc(var(--px)*24)) saturate(180%);
  backdrop-filter: blur(calc(var(--px)*24)) saturate(180%);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 6%), 0 12px 40px rgb(0 0 0 / 14%), 0 2px 8px rgb(0 0 0 / 6%);
  font-family: var(--font-system);
  color: var(--fp-label);
  letter-spacing: -0.01em;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none; }
.flatpickr-calendar.arrowTop { margin-top: calc(var(--px)*6); }
.flatpickr-calendar.arrowBottom { margin-top: calc(var(--px)*-6); }
.flatpickr-calendar.animate.open,
.fp-pop.open { animation: fp-ios-in 340ms cubic-bezier(0.32, 1.28, 0.6, 1); transform-origin: top center; }
.flatpickr-calendar.animate.open.arrowBottom,
.fp-pop.open.arrowBottom { transform-origin: bottom center; }
@keyframes fp-ios-in {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.animate.open,
  .fp-pop.open { animation: none; }
}

/* 머리글 — 「2026년 9월」 왼쪽, 이전·다음은 오른쪽 */
.flatpickr-months {
  position: relative;
  height: calc(var(--px)*44); /* HEIGHT: flatpickr 가 월 표시를 absolute 로 띄워 콘텐츠가 높이를 못 만든다 */
  margin-bottom: calc(var(--px)*2);
}
.flatpickr-months .flatpickr-month {
  height: calc(var(--px)*44); /* HEIGHT: 위와 같은 absolute 월 표시의 기준면 */
  color: var(--fp-label);
}
.flatpickr-current-month {
  left: calc(var(--px)*6);
  width: auto;
  height: calc(var(--px)*44); /* HEIGHT: absolute 머리글을 44 터치행 가운데 세우는 기준 */
  padding: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--px)*4);
  font-size: var(--bodyM);
  font-weight: 600;
}
.flatpickr-current-month span.cur-month { order: 1; margin: 0; font-weight: 600; }
.flatpickr-current-month span.cur-month:hover { background: none; }
.flatpickr-current-month .numInputWrapper { width: auto; display: flex; align-items: center; }
.flatpickr-current-month .numInputWrapper::after { content: "년"; }
.flatpickr-current-month .numInputWrapper:hover { background: none; }
.flatpickr-current-month .numInputWrapper span { display: none; }
.flatpickr-current-month input.cur-year { width: 4ch; padding: 0; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: calc(var(--px)*4);
  width: calc(var(--px)*36);
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}
/* flatpickr 가 .flatpickr-prev-month.flatpickr-prev-month 로 2중 클래스를 걸어 같은 특이도로 맞춘다 */
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month { left: auto; right: calc(var(--px)*40); }
.flatpickr-months .flatpickr-next-month.flatpickr-next-month { right: calc(var(--px)*2); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: calc(var(--px)*13); aspect-ratio: 1; fill: var(--primary); }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: var(--fp-tint); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary); }

.flatpickr-weekdays { height: auto; padding-block: calc(var(--px)*4); }
span.flatpickr-weekday { font-size: var(--bodyXS); font-weight: 600; line-height: 1.2; color: var(--fp-tertiary); }

/* 날짜 — 40 셀 안의 36 원 */
.flatpickr-days { width: calc(var(--px)*280); }
.dayContainer { width: calc(var(--px)*280); min-width: calc(var(--px)*280); max-width: calc(var(--px)*280); padding: 0; justify-content: flex-start; }
.flatpickr-day {
  flex-basis: calc(var(--px)*36);
  max-width: calc(var(--px)*36);
  height: calc(var(--px)*36); /* HEIGHT: 선택 원이 원형이려면 폭과 같은 고정 높이가 필요하다 */
  margin: calc(var(--px)*2);
  border: 0;
  line-height: calc(var(--px)*36);
  font-size: var(--bodyM);
  font-weight: 400;
  color: var(--fp-label);
  transition: background-color 0.15s, color 0.15s;
}
.flatpickr-day.prevMonthDay { visibility: hidden; }
.flatpickr-day.nextMonthDay { display: none; } /* 다음 달 칸을 빼야 빈 6주차 줄이 안 남는다 */
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--fp-tint); }
.flatpickr-day.today { color: var(--primary); font-weight: 600; }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus { background: var(--fp-tint); color: var(--primary); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus { background: var(--primary); color: #fff; font-weight: 600; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--fp-tertiary); background: none; }

/* 시간 — flatpickr 입력칸 대신 js/date-time-picker.js 가 그리는 휠 */
.flatpickr-calendar.noCalendar,
.fp-pop { width: auto; padding: calc(var(--px)*8) calc(var(--px)*14); }
/* data-picker-type="wheel" 팝업 — flatpickr 밖이라 표시·층을 직접 갖는다 */
.fp-pop { position: absolute; z-index: 99999; /* flatpickr 가 .flatpickr-calendar{z-index:99999} 로 띄우는 층과 같다 */ visibility: hidden; opacity: 0; }
.fp-pop.open { visibility: visible; opacity: 1; }
.flatpickr-calendar.noCalendar .flatpickr-time { display: none; }
.fp-wheel { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--px)*4); }
.fp-wheel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: calc(var(--px)*32); /* HEIGHT: 선택 띠 = 휠 한 행 높이 — 행 높이와 어긋나면 띠가 값에서 비껴난다 */
  transform: translateY(-50%);
  border-radius: calc(var(--px)*8);
  background: var(--fp-fill);
  pointer-events: none;
}
.fp-wheel__col {
  position: relative;
  width: calc(var(--px)*52);
  height: calc(var(--px)*160); /* HEIGHT: 휠 창 = 5행 — 스크롤 컨테이너라 콘텐츠로 높이를 만들면 스크롤이 사라진다 */
  padding-block: calc(var(--px)*64);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  perspective: calc(var(--px)*360);
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  outline: none;
  cursor: grab;
}
.fp-wheel__col--text { width: auto; min-width: calc(var(--px)*120); padding-inline: calc(var(--px)*12); white-space: nowrap; }
.fp-wheel__col::-webkit-scrollbar { display: none; }
.fp-wheel__col.is-dragging { cursor: grabbing; scroll-snap-type: none; } /* 끄는 동안 스냅이 켜 있으면 매 프레임 행에 도로 붙어 손을 안 따라온다 */
.fp-wheel__item {
  height: calc(var(--px)*32); /* HEIGHT: 스냅 간격 = 행 높이 — JS 가 scrollTop/행높이로 값을 읽는다 */
  line-height: calc(var(--px)*32);
  text-align: center;
  scroll-snap-align: center;
  font-size: var(--bodyL);
  font-variant-numeric: tabular-nums;
  color: var(--fp-label);
  cursor: inherit;
  user-select: none;
  backface-visibility: hidden;
}
.fp-wheel__item[aria-selected="true"] { font-weight: 500; }
.fp-wheel__col:focus-visible .fp-wheel__item[aria-selected="true"] { color: var(--primary); }
.fp-wheel__sep { position: relative; font-size: var(--bodyL); font-weight: 600; }