/* 숙박 입실·퇴실 선택 강조: 달력(tab1, stayDateSelect.js)과 목록(tab2, scheduleTable.js) 공용.
   calendar.css·table-sticky.css는 common.css가 @import하는 디자인 영역이라 여기서 덮어쓴다. */

/* 퇴실 가능 칸 깜빡임: 두 색 사이를 오가며, 빗금 배경은 깜빡이는 동안 가린다 */
@keyframes checkout-candidate-blink {
  0%,
  100% {
    background-color: var(--candidate-from);
    background-image: none;
  }
  50% {
    background-color: var(--candidate-to);
    background-image: none;
  }
}

/* 퇴실 가능 칸: 달력은 초록, 목록은 자리 유형 색 */
.calendar.range .pignose-calendar .pignose-calendar-unit.checkout-candidate {
  --candidate-from: var(--white);
  --candidate-to: color-mix(in srgb, var(--green) 35%, white);
  animation: checkout-candidate-blink 2s ease-in-out infinite;
}

.table-sticky tbody td.day.checkout-candidate {
  --candidate-from: var(--white);
  --candidate-to: color-mix(in srgb, var(--map-color) 30%, white);
  animation: checkout-candidate-blink 2s ease-in-out infinite;
}

/* 움직임 줄이기 설정이면 깜빡이지 않고 색만 칠한다 */
@media (prefers-reduced-motion: reduce) {
  .calendar.range .pignose-calendar .pignose-calendar-unit.checkout-candidate,
  .table-sticky tbody td.day.checkout-candidate {
    animation: none;
    background: var(--candidate-to);
  }
}

/* 선택 범위 외곽선 색·두께 변수 (달력은 범위 배경도 초록으로 통일) */
.calendar.range .pignose-calendar .pignose-calendar-unit:is(.pignose-calendar-unit-active, .pignose-calendar-unit-range) {
  --range-line: color-mix(in srgb, var(--green) 75%, black);
  --range-line-w: 3px;
  background-color: color-mix(in srgb, var(--green) 25%, white);
}

.table-sticky tbody td.day:is(.first-active, .second-active, .active) {
  --range-line: color-mix(in srgb, var(--map-color) 60%, black);
  --range-line-w: 3px;
}

/* 선택 범위 위·아래 선: border-box 배경이라 칸 사이 세로줄 위까지 이어진다 */
.calendar.range .pignose-calendar .pignose-calendar-unit:is(.pignose-calendar-unit-active, .pignose-calendar-unit-range),
.table-sticky tbody td.day:is(.first-active, .second-active, .active) {
  background-image: linear-gradient(var(--range-line), var(--range-line)), linear-gradient(var(--range-line), var(--range-line));
  background-size: 100% var(--range-line-w);
  background-position: top, bottom;
  background-repeat: no-repeat;
  background-origin: border-box;
  box-shadow: none;
}

/* 범위 안 칸 사이 세로줄을 지워 한 덩어리로 보이게 한다 */
.calendar.range .calendar-in:not(.awaiting-checkout) .pignose-calendar-unit:is(.pignose-calendar-unit-range, .pignose-calendar-unit-first-active):not(.pignose-calendar-unit-second-active):not(.pignose-calendar-unit-day-use) {
  border-right-color: transparent;
}

/* 입실일은 왼쪽 선, 퇴실일은 오른쪽 선. 주가 바뀌는 쪽은 선 없이 열어 둔다(구글 캘린더식) */
.calendar.range .pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-first-active,
.table-sticky tbody td.day.first-active {
  box-shadow: inset var(--range-line-w) 0 0 0 var(--range-line);
}

.calendar.range .pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-second-active,
.table-sticky tbody td.day.second-active {
  box-shadow: inset calc(var(--range-line-w) * -1) 0 0 0 var(--range-line);
}

/* 당일 이용이거나 입실일만 고른 상태는 네 면 모두 선 */
.calendar.range .pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-first-active:is(.pignose-calendar-unit-day-use, .pignose-calendar-unit-second-active),
.calendar.range .calendar-in.awaiting-checkout .pignose-calendar-unit.pignose-calendar-unit-first-active,
.table-sticky tbody td.day.first-active.second-active,
.table-sticky tbody td.day.first-active:not(.second-active):not(:has(~ .second-active)) {
  box-shadow: inset 0 0 0 var(--range-line-w) var(--range-line);
}

/* 모바일은 칸이 작아 선을 2px로 */
@media (max-width: 812px) {
  .calendar.range .pignose-calendar .pignose-calendar-unit:is(.pignose-calendar-unit-active, .pignose-calendar-unit-range),
  .table-sticky tbody td.day:is(.first-active, .second-active, .active) {
    --range-line-w: 2px;
  }
}