/* assets/css/season-picker.css
 * 시즌(성수기/비수기) 시각화 날짜선택기 — 공통 스타일
 *  - flatpickr 테마 위에 덧씌워 사용. 모바일/PC 공용.
 *  - 색: 비수기(off) = 연한 녹색, 성수기(peak) = 연한 금색. 원본 디자인 톤 유지.
 */
.sp-wrap{position:relative}
.sp-input{width:100%;cursor:pointer;background:#fff}

/* 입력창 아래 범례(가격 포함) */
.sp-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:13px;color:#39443d;line-height:1.5}
.sp-legend .sp-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f6f4ee;border:1px solid #e7e3d8}
.sp-legend .sp-chip .sp-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.sp-legend .sp-chip.sp-off  .sp-dot{background:#15835f}
.sp-legend .sp-chip.sp-peak .sp-dot{background:#c4a356}
.sp-legend .sp-chip b{color:#0f5a43}
.sp-legend .sp-note{color:#6c7670;font-size:12.5px}

/* flatpickr 날짜 셀 배경 (연한 배경 + 하단 2px 바) */
.flatpickr-day.sp-day-off  { background:rgba(21,131,95,.08) }
.flatpickr-day.sp-day-peak { background:rgba(196,163,86,.14) }
.flatpickr-day.sp-day-off:hover,
.flatpickr-day.sp-day-peak:hover { background:#f0ebdc }

.flatpickr-day.sp-day-off::after,
.flatpickr-day.sp-day-peak::after{
  content:""; position:absolute; left:14%; right:14%; bottom:4px; height:3px; border-radius:2px;
}
.flatpickr-day.sp-day-off::after  { background:#15835f }
.flatpickr-day.sp-day-peak::after { background:#c4a356 }
.flatpickr-day{position:relative}

/* 선택된 날짜는 flatpickr 기본 selected 색을 유지하되 하단 바는 숨김 */
.flatpickr-day.selected.sp-day-off::after,
.flatpickr-day.selected.sp-day-peak::after,
.flatpickr-day.startRange.sp-day-off::after,
.flatpickr-day.endRange.sp-day-off::after,
.flatpickr-day.startRange.sp-day-peak::after,
.flatpickr-day.endRange.sp-day-peak::after{ display:none }

/* 오늘 셀도 밑줄 하나로 통일 */
.flatpickr-day.today.sp-day-off::after,
.flatpickr-day.today.sp-day-peak::after{ opacity:.6 }

/* 캘린더 상단에 범례(모바일에서도 보이도록) */
.flatpickr-calendar .sp-cal-head{
  padding:8px 12px 2px;display:flex;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:#39443d;border-top:1px solid #eee;background:#fbfaf6
}
.flatpickr-calendar .sp-cal-head .sp-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#fff;border:1px solid #e7e3d8}
.flatpickr-calendar .sp-cal-head .sp-chip .sp-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.flatpickr-calendar .sp-cal-head .sp-chip.sp-off  .sp-dot{background:#15835f}
.flatpickr-calendar .sp-cal-head .sp-chip.sp-peak .sp-dot{background:#c4a356}

@media (max-width:640px){
  .sp-legend{font-size:12.5px}
  .sp-legend .sp-chip{padding:3px 9px}
  .flatpickr-day.sp-day-off::after,
  .flatpickr-day.sp-day-peak::after{ bottom:3px; height:2px }
}