/* =============================================================================
 * 날짜 선택 달력 «본문» 공통 — 2026-10-28 Figma «01.member» Calendar(3021:60370)
 * 머리말의 좌우 화살표(이전·다음 달)는 화면마다 원래 것을 그대로 두고, 아래 «본문»(연·월 표시 + 요일 + 날짜 칸)만
 * 이 규칙으로 통일한다(사용자 결정). 앱은 React 공용 컴포넌트 하나(`components/calendar/CalendarBody.tsx`)가 이 마크업을 그린다.
 *
 *   .mws-cal                     달력 본문(폭은 부모를 따른다)
 *     .mws-cal__head             연·월 + 좌우 화살표 자리
 *       .mws-cal__nav            화살표 버튼(화면이 주는 것 — 모양은 화면 규칙)
 *       .mws-cal__title          «2026년» / «8월» 두 줄
 *     .mws-cal__grid             7열 — 요일 1줄 + 날짜 6주(42칸 고정)
 *       .mws-cal__week           요일(일·토 = 민트)
 *       .mws-cal__day            날짜 칸 24×24 · 11px
 *         .is-sun / .is-sat      주말(민트)
 *         .is-outside            앞뒤 달(흐리게 — 주말은 연민트)
 *         .is-today              오늘(연민트 테두리)
 *         .is-selected           고른 날(민트 채움 · 흰 굵은 글자)
 *         :disabled              고를 수 없는 날
 * ============================================================================= */

.mws-cal { display: flex; flex-direction: column; width: 100%; font-family: var(--font-family-base, "Noto Sans KR", sans-serif); }
.mws-cal__head { position: relative; display: flex; align-items: center; justify-content: center; padding-bottom: 10px; }
.mws-cal__title { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.mws-cal__year,
.mws-cal__month { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 2px 10px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 12px; line-height: 16px; cursor: default; }
.mws-cal__year { font-weight: 500; color: #1a1a1a; }
.mws-cal__month { font-weight: 400; color: #444; }
button.mws-cal__year,
button.mws-cal__month { cursor: pointer; }
button.mws-cal__year:hover,
button.mws-cal__month:hover { background: #f7f7f7; }
.mws-cal__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.mws-cal__nav--prev { left: 0; }
.mws-cal__nav--next { right: 0; }

.mws-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; justify-items: center; }
.mws-cal__week,
.mws-cal__day { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; font: inherit; font-size: 11px; line-height: 14px; }
.mws-cal__week { font-weight: 500; color: #949494; }
.mws-cal__week.is-sun,
.mws-cal__week.is-sat { color: #81d8d0; }
.mws-cal__day { font-weight: 400; color: #444; cursor: pointer; }
.mws-cal__day.is-sun,
.mws-cal__day.is-sat { color: #81d8d0; }
.mws-cal__day.is-outside { color: #cfcfcf; }
.mws-cal__day.is-outside.is-sun,
.mws-cal__day.is-outside.is-sat { color: #c0ede9; }
.mws-cal__day.is-today { border-color: #c0ede9; }
.mws-cal__day.is-selected { border-color: #81d8d0; background: #81d8d0; color: #fff; font-weight: 700; }
.mws-cal__day:not(.is-selected):hover { background: #f7f7f7; }
.mws-cal__day:disabled { color: #e8e8e8; cursor: default; background: none; }

/* 앱: 화면마다 있던 달력 격자 자리(`reservation-calendar__grid` 등)를 감싸개로만 쓴다 — 안쪽 `.mws-cal__grid` 가 칸을 그린다. */
[class*="calendar__grid"].mws-cal { display: block; height: auto; min-height: 0; grid-template-rows: none; grid-template-columns: none; padding-top: 0; }