/* =========================================
   월별 세로 스크롤 범위 캘린더 (공용) — js/calendar.js 가 그리는 칸의 모양

   검색 첫 화면 · 고택 상세 · 검색 결과가 같은 달력을 쓴다.
   담는 자리(요약 줄이 있는 시트 · 체크인/체크아웃 상자 · 필터 시트 한 칸)는 화면마다 달라
   각자 css 에 남고, 여기에는 요일 줄과 날짜 칸만 둔다.

   sheet.css 와 detail.css 에 같은 규칙이 두 벌 있었다. 한 벌은 고른 날에 테두리가 있고
   한 벌은 없어서, 같은 달력이 화면마다 다르게 보였다 — 테두리 있는 쪽으로 맞췄다.
   라벤더 밴드 위에 얹히는 칩이라 테두리가 있어야 시작·끝이 눈에 잡힌다.
========================================= */

/* 요일 줄 — 달력 위에 고정으로 놓는다 */
.calwk{display:grid;grid-template-columns:repeat(7,1fr);padding:8px 16px 4px;border-bottom:1px solid var(--g100)}
/* 달력만 안에서 굴린다. 한 시트에 날짜 말고 다른 것이 함께 있는데 4개월치를 그대로 펼치면
   나머지가 2,000px 아래로 밀려 아무도 못 본다 — 옵션을 등록해도 못 찾았다(2026-09-15) */
.calmonths{padding:4px 16px 0;max-height:44vh;max-height:44dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.calmonth + .calmonth{margin-top:20px}
.calmonth__label{font-size:16px;font-weight:700;color:var(--blue-strong);letter-spacing:-.4px;margin:12px 0 8px}

/* 요일 헤더 · 날짜 그리드 */
.cal__wd{height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--g900);letter-spacing:-.325px}
.cal__wd--sun{color:var(--red-500)}.cal__wd--sat{color:var(--blue-500)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px}
.cal__day{position:relative;height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--g900);cursor:pointer}
.cal__n{position:relative;z-index:1;width:30px;height:30px;display:grid;place-items:center;border-radius:50%}
.cal__day--sun{color:var(--red-500)}.cal__day--sat{color:var(--blue-500)}
.cal__day--off{color:var(--g300);cursor:default}
.cal__day--today .cal__n{font-weight:700}
.cal__day--blank{cursor:default;pointer-events:none}
/* 범위 밴드(연한 라벤더) — 시작/끝은 안쪽 절반만 채운다 */
.cal__day--mid::before,.cal__day--start::before,.cal__day--end::before{content:"";position:absolute;top:50%;
  transform:translateY(-50%);height:40px;background:var(--blue-50)}
.cal__day--mid::before{left:0;right:0}
.cal__day--start::before{left:50%;right:0}
.cal__day--end::before{left:0;right:50%}
/* 시작·끝·단일 = 테두리 있는 둥근 박스(라벤더 밴드 위에 얹힌 칩) + 진한 볼드 */
.cal__day--start .cal__n,.cal__day--end .cal__n,.cal__day--single .cal__n{width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--white);color:var(--blue-strong);font-weight:700;border:1.5px solid var(--blue-500);
  box-shadow:0 2px 6px rgba(62,104,255,.16)}