@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — flatpickr 캘린더 토스 스킨 (2026-09-04)
   매물 등록(v2/registration.html · v2/prop/registration.html)의 승인일·입주일 픽커.
   다른 페이지(입금내역·계약)는 아직 기본 flatpickr — 여기 링크만 걸면 같은 모양이 된다.
   원칙: 색·반경·그림자는 전부 renewal-tokens 에서. 캘린더 구조(DOM)는 flatpickr 기본.
   ═══════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  width: 308px;
  padding: 8px 8px 10px;
  border: 1px solid var(--rn-border, #EBE7E2);
  border-radius: 14px;
  background: var(--rn-card-bg, #fff);
  box-shadow: var(--rn-shadow-pop, 0 14px 34px rgba(34, 30, 28, .16));
  color: var(--rn-text, #221E1C);
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display: none; } /* 말풍선 꼬리 제거 */
.flatpickr-calendar.animate.open { animation: rnFpOpen .16s cubic-bezier(.2, .7, .3, 1); }
@keyframes rnFpOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 헤더 — 월/연도 */
.flatpickr-months { align-items: center; padding: 6px 4px 2px; }
.flatpickr-months .flatpickr-month { height: 36px; color: var(--rn-text, #221E1C); }
.flatpickr-current-month { font-size: 15px; font-weight: 700; padding: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700; font-size: 15px; padding: 4px 6px; border-radius: 8px; background: transparent; appearance: none; -webkit-appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--rn-grey, #F1EFEC); }
.flatpickr-current-month input.cur-year { font-weight: 700; font-size: 15px; }
.flatpickr-current-month .numInputWrapper { width: 6.5ch; border-radius: 8px; }
.flatpickr-current-month .numInputWrapper:hover { background: var(--rn-grey, #F1EFEC); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  position: static; height: 32px; width: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--rn-text-sub, #5C554F);
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--rn-grey, #F1EFEC); color: var(--rn-brand, #812B27); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; fill: currentColor; }

/* 요일 */
.flatpickr-weekdays { height: 30px; }
span.flatpickr-weekday { font-size: 12px; font-weight: 600; color: var(--rn-text-dim, #948C83); }
.flatpickr-weekdaycontainer span.flatpickr-weekday:first-child { color: #C0392B; }   /* 일 */
.flatpickr-weekdaycontainer span.flatpickr-weekday:last-child { color: #2B5EA7; }    /* 토 */

/* 날짜 셀 */
.flatpickr-days { width: 292px; }
.dayContainer { width: 292px; min-width: 292px; max-width: 292px; padding: 2px 0 0; }
.flatpickr-day {
  width: 38px; max-width: 38px; height: 38px; line-height: 38px; margin: 2px 0;
  border-radius: 10px; border: 0; font-size: 14px; font-weight: 500; color: var(--rn-text, #221E1C);
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--rn-brand-faint, #FBF5F4); border-color: transparent; color: var(--rn-brand, #812B27); }
.flatpickr-day.today { border: 1px solid var(--rn-brand-border, #E5C7C4); color: var(--rn-brand, #812B27); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--rn-brand-soft, #F5E9E8); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--rn-brand, #812B27); border-color: var(--rn-brand, #812B27); color: #fff; font-weight: 700;
  box-shadow: 0 6px 14px rgba(129, 43, 39, .28);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--rn-text-faint, #B8B1A9); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--rn-text-faint, #B8B1A9); background: transparent; }
.flatpickr-day:nth-child(7n+1):not(.selected):not(.prevMonthDay):not(.nextMonthDay) { color: #C0392B; } /* 일요일 */
.flatpickr-day:nth-child(7n):not(.selected):not(.prevMonthDay):not(.nextMonthDay) { color: #2B5EA7; }  /* 토요일 */

/* 입력칸 — 달력 아이콘 + 클릭 영역 전체 */
.reg-input.v2-date {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23948C83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='16' rx='3'/><path d='M3 9.5h18M8 2.5v4M16 2.5v4'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
.reg-input.v2-date:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23812B27' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='16' rx='3'/><path d='M3 9.5h18M8 2.5v4M16 2.5v4'/></svg>"); }

/* 주소 모드 토글(단지명 검색 / 주소로 검색) — 세그먼트 */
.v2-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--rn-grey, #F1EFEC); margin-bottom: 8px; }
.v2-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--rn-text-sub, #5C554F); cursor: pointer; }
.v2-seg button.on { background: var(--rn-card-bg, #fff); color: var(--rn-brand, #812B27); box-shadow: 0 1px 3px rgba(34, 30, 28, .10); }
.v2-seg button:focus-visible { outline: 2px solid var(--rn-brand-border, #E5C7C4); outline-offset: 1px; }