/* =============================================================
   Air Datepicker — LinkBuilder 디자인 시스템 테마
   design-system.css 의 토큰(var(--brand-*), --ink-*, --r-*)에 매핑.
   air-datepicker.css 다음에 로드할 것.
   ============================================================= */
.air-datepicker {
  --adp-font-family: var(--font-sans);
  --adp-font-size: 14px;
  --adp-width: 268px;
  --adp-z-index: 60;
  --adp-padding: 8px;

  --adp-transition-duration: .18s;
  --adp-transition-ease: ease-out;

  /* 컨테이너 */
  --adp-background-color: var(--surface);
  --adp-border-color: var(--ink-200);
  --adp-border-color-inner: var(--ink-100);
  --adp-border-radius: var(--r-lg);

  /* 텍스트 */
  --adp-color: var(--ink-700);
  --adp-color-secondary: var(--ink-400);
  --adp-accent-color: var(--brand-600);
  --adp-color-current-date: var(--brand-600);
  --adp-color-other-month: var(--ink-300);
  --adp-color-other-month-hover: var(--ink-400);
  --adp-color-disabled: var(--ink-300);
  --adp-color-disabled-in-range: var(--ink-300);

  /* 셀 hover/active */
  --adp-background-color-hover: var(--bg-page);
  --adp-background-color-active: var(--ink-100);
  --adp-cell-background-color-hover: var(--bg-page);
  --adp-cell-border-radius: var(--r-md);

  /* 선택된 날짜 */
  --adp-cell-background-color-selected: var(--brand-600);
  --adp-cell-background-color-selected-hover: var(--brand-700);

  /* 범위 선택 */
  --adp-background-color-in-range: var(--brand-subtle);
  --adp-background-color-in-range-focused: var(--brand-muted-bg-hover);
  --adp-cell-background-color-in-range: var(--brand-subtle);
  --adp-cell-background-color-in-range-hover: var(--brand-muted-bg-hover);
  --adp-cell-border-color-in-range: var(--brand-200);
  --adp-background-color-selected-other-month: var(--brand-500);
  --adp-background-color-selected-other-month-focused: var(--brand-600);

  /* 요일 헤더 */
  --adp-day-name-color: var(--brand-600);
  --adp-day-name-color-hover: var(--brand-700);

  /* 네비게이션 */
  --adp-nav-color-secondary: var(--ink-400);
  --adp-nav-arrow-color: var(--ink-500);

  /* 하단 버튼 (오늘/초기화) */
  --adp-btn-color: var(--brand-600);
  --adp-btn-color-hover: var(--brand-700);
  --adp-btn-background-color-hover: var(--brand-subtle);
  --adp-btn-background-color-active: var(--brand-muted-bg-hover);
  --adp-btn-border-radius: var(--r-sm);

  /* 타임피커 */
  --adp-time-track-color: var(--ink-300);
  --adp-time-track-color-hover: var(--brand-400);
  --adp-time-day-period-color: var(--ink-500);

  /* 팝업 그림자 (디자인 시스템 float 사용) */
  box-shadow: var(--sh-float);
}

/* 네비게이션 타이틀·요일을 살짝 더 또렷하게 */
.air-datepicker-nav--title { color: var(--ink-800); font-weight: 600; }
.air-datepicker-nav--title:hover { background: var(--bg-page); }
.air-datepicker-body--day-name { font-weight: 600; }

/* 주말 색상 (한국 캘린더 관행: 일=빨강, 토=파랑) — firstDay=0, '이번 달' 셀만 적용 */
.air-datepicker-body--day-names .air-datepicker-body--day-name:first-child { color: var(--danger); }
.air-datepicker-body--day-names .air-datepicker-body--day-name:last-child { color: var(--info); }
.air-datepicker-body--cells.-days- .air-datepicker-cell.-day-:not(.-other-month-):nth-child(7n+1) { color: var(--danger); }
.air-datepicker-body--cells.-days- .air-datepicker-cell.-day-:not(.-other-month-):nth-child(7n)   { color: var(--info); }

/* 공휴일 = 빨강 (이번 달 셀) — 토/일(주말) 규칙과 명시도를 맞추고 뒤 순서로 두어,
   토요일과 겹친 공휴일(예: 추석)도 파랑이 아닌 빨강으로 표시되게 우선한다. */
.air-datepicker-body--cells.-days- .air-datepicker-cell.-day-.-holiday-:not(.-other-month-) {
  color: var(--danger); font-weight: 500;
}

/* 다른 달 날짜는 흐리게 (주말/공휴일 색상보다 우선) */
.air-datepicker-cell.-day-.-other-month- { color: var(--ink-300); opacity: .7; }
.air-datepicker-cell.-day-.-other-month-:hover { color: var(--ink-400); }

/* 오늘 날짜 — 링 테두리 + 굵게로 확실히 구분 */
.air-datepicker-cell.-day-.-current- {
  color: var(--brand-700); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--brand-400);
}

/* 선택된 날짜는 흰색 텍스트 우선 (오늘=선택 시 링 제거) */
.air-datepicker-cell.-day-.-selected-,
.air-datepicker-cell.-day-.-holiday-.-selected-,
.air-datepicker-cell.-day-.-current-.-selected- { color: var(--on-primary); }
.air-datepicker-cell.-day-.-current-.-selected- { box-shadow: none; }