/* =========================================================
   LETSRUN PLAY · 캘린더 · 검색 모달 — 전용 레이아웃 CSS
   .modal/.modal__box/.modal__head/.modal__body/.modal__foot 공용 셸은 home.css 그대로 재사용.
   이 파일은 (1) 캘린더·검색 모달의 고정 크기/바텀시트 전환, (2) 날짜 그리드,
   (3) 일정 카드 배치만 정의한다 — 버튼·칩·배지·타이포는 공통 클래스 그대로 사용.
   ========================================================= */

/* ---------- 모달 크기 고정(콘텐츠에 따라 커졌다 작아졌다 하지 않도록) ---------- */
/* 260827: height에 svh 2차 선언 — iOS 툴바 노출 시 vh 기준 높이가 화면을 넘어 아래가 잘리던 것 보정(home.css .modal__box와 동일 원리) */
.sheet-modal .modal__box{width:min(640px,calc(100vw - 40px));height:min(640px,86vh);height:min(640px,86svh)}
.sheet-modal .modal__head{background:var(--white);border-bottom:1px solid var(--line);padding:20px 24px;flex:none}
/* 제목 타이포는 여기서 정하지 않는다(260811) — 이 파일이 .sheet-modal 전체를 지배하면 검색·코스
   모달 제목까지 캘린더 파일이 소유하게 된다. 기본값은 home.css의 .modal__head h3가 갖는다. */
.sheet-modal .modal__head p{font-size:var(--fs-label);color:var(--grey);margin-top:2px}
.sheet-modal .modal__close{background:var(--bg);color:var(--ink)}
.sheet-modal .modal__body{flex:1;min-height:0;display:flex;flex-direction:column;padding:20px 24px}

/* ---------- 날짜 이동 바 ---------- */
/* 3열 grid: 가운데 열(이전/월/다음)은 항상 중앙 정렬 유지, "오늘"은 오른쪽 열에 고정 —
   flex 한 줄에 그냥 추가하면 "오늘" 버튼 너비만큼 가운데 그룹이 중앙에서 밀린다. */
.cal-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:16px;flex:none}
.cal-nav__group{grid-column:2;display:flex;align-items:center;justify-content:center;gap:16px}
/* "오늘" — 260815 시각 정돈. 이전에는 .chip(36px) 위에 min-height:44px가 얹혀 있어 옆의
   ‹ › 버튼(32px 원형)보다 12px 더 크고, 흰 배경+테두리까지 있어 혼자 튀어 보였다.
   같은 줄에 있는 세 컨트롤이 한 세트로 읽히도록 높이·톤을 ‹ ›에 맞춘다
   (--bg 채움 · 테두리 없음 · 32px). 44px 터치 영역은 260806에 정한 방식대로
   가상 요소로만 유지한다 — 시각 크기는 줄이되 누르는 범위는 그대로. */
.cal-nav__today{grid-column:3;justify-self:end;position:relative;
  height:32px;min-height:0;padding-inline:12px;
  background:var(--bg);border-color:transparent;color:var(--ink)}
.cal-nav__today:hover{background:var(--line)}
.cal-nav__today::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:44px}
.cal-nav__btn{width:32px;height:32px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-body-lg);color:var(--ink);flex:none}
.cal-nav__label{font-size:var(--fs-body);font-weight:700;color:var(--ink);min-width:100px;text-align:center}

/* ---------- 날짜 그리드 ---------- */
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;flex:none}
.cal-weekdays span{text-align:center;font-size:var(--fs-caption);color:var(--grey)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:none}
/* 하루 일정이 2~4개뿐이라 아래 목록 영역이 상대적으로 커 보이던 것을 보완 — 날짜 칸을 키워
   달력이 모달에서 차지하는 비중을 늘린다(40→52px, 간격도 4→6px) */
.cal-day{width:100%;max-width:44px;aspect-ratio:1/1;max-height:44px;margin-inline:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:600;color:var(--ink);position:relative;isolation:isolate} /* isolation: ::before(z-index:-1) 원이 조상 카드의 흰 배경 뒤로 빠지지 않게 셀 자체를 스태킹 컨텍스트로 */
/* 260819: 호버/선택 원을 요소 배경이 아니라 ::before 원으로 그린다 — 셀 박스보다 4px 크게
   (inset:-4px) 확장해 아래쪽 일정 점(.cal-day__dot)까지 원 안에 완전히 담기게 한다(클라이언트
   요청 — 이전에는 점이 원 가장자리에 걸쳐 잘려 보였다). z-index:-1이라 숫자·점보다 뒤에 깔리고,
   레이아웃 박스는 그대로라 그리드 간격·셀 크기는 변하지 않는다. */
.cal-day::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1}
/* 260829: 호버 색은 아래 요일 블록의 옐로우 호버 규칙이 담당(회색 호버 폐지) */
/* 260813: 1.5px→1px로 얇게(얇은 border 방향)만 하고 색은 ink 유지 —
   --line까지 낮췄더니 "오늘"이 거의 안 보여 식별 기능을 잃었다(1차 적용 중 되돌림).
   선택=ink 채움 / 오늘=ink 테두리 로 채움 vs 선 대비가 유지된다. */
.cal-day.is-today{border:1px solid var(--ink)}
/* 260813: 선택 날짜를 노란 면 → ink 면 + 흰 글자로. 이 프로젝트에서 "선택됨"의 시각 언어는
   이미 .chip.is-selected(ink 배경/흰 글자)라 같은 규칙으로 통일했다(동일 역할 컴포넌트만 통일).
   노란색은 카테고리 Badge(행사)의 의미색으로 계속 쓰이므로, 의미 없는 자리에서 빼서
   Badge 쪽 의미가 더 또렷해지는 효과도 있다.
   "오늘"은 ink 테두리였는데 선택과 색이 겹쳐 보여 얇은 --line 테두리로 낮췄다 —
   선택(채워짐) vs 오늘(테두리)의 위계가 분명해진다. */
.cal-day[aria-selected="true"]{color:var(--ink);font-weight:700}
/* 260829 고객 요청(저녁 회신)으로 무채색 정책을 대체 — 옐로우 위계 3단계:
   ① 금·토·일 상시 = 밝고 연한 **작은** 원(--yellow-300, inset 2px — 상설 주 운영일 강조.
      100은 실화면에서 티가 안 난다는 총괄 피드백으로 300까지 올림)
   ② 호버 = 메인에서 살짝 톤다운(--yellow-400, 큰 원)
   ③ 선택 = 찐한 메인 옐로우(--yellow-500, 큰 원 + ink 글자 — 흰 글자는 옐로우 위 대비 부족)
   일정 점은 주황(--coral-500) — 옐로우 원들 위에서도 구분된다. */
.cal-day[aria-selected="true"]::before,.cal-day[aria-selected="true"]:hover::before{background:var(--yellow-500);inset:-4px}
.cal-day__dot{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--coral-500)}
/* 요일 구분(금·토·일 = 상설 프로그램 주 운영일):
   ⚠ 260829 고객 요청으로 그리드가 **월요일 시작** 7열이 됐다(렌더러 2곳: play-now.html·home.js
   모달 — startDow=(getDay()+6)%7). 선행 빈 <span>도 자식으로 세므로 열 위치(nth-child)가 곧
   요일이다: 7n+5=금 · 7n+6=토 · 7n=일. 이 규칙과 렌더러의 시작 요일은 한 세트 — 한쪽만
   바꾸면 색이 요일과 어긋난다. */
.cal-grid > .cal-day:nth-child(7n+5),
.cal-grid > .cal-day:nth-child(7n+6),
.cal-grid > .cal-day:nth-child(7n){font-weight:800}
.cal-grid > .cal-day:nth-child(7n+5)::before,
.cal-grid > .cal-day:nth-child(7n+6)::before,
.cal-grid > .cal-day:nth-child(7n)::before{background:var(--yellow-300);inset:2px}
/* 호버·선택은 요일 상시 원보다 우선(뒤 선언 + 동일 특이도 초과) — 큰 원으로 확장 */
.cal-grid > .cal-day:hover::before{background:var(--yellow-400);inset:-4px}
.cal-grid > .cal-day[aria-selected="true"]::before{background:var(--yellow-500);inset:-4px}
.cal-grid > .cal-day:not(:nth-child(7n+5)):not(:nth-child(7n+6)):not(:nth-child(7n)):not([aria-selected="true"]){color:var(--grey);font-weight:500}
.cal-weekdays span:nth-child(5),.cal-weekdays span:nth-child(6),.cal-weekdays span:nth-child(7){color:var(--ink);font-weight:700}

/* ---------- 선택 날짜 일정 카드 ---------- */
.cal-day-title{font-size:var(--fs-body-sm);font-weight:700;color:var(--ink);margin:18px 0 10px;flex:none}
.cal-events{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.cal-event{background:var(--bg);border-radius:var(--r-lg);padding:16px}
.cal-event__title{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.cal-event__meta{font-size:var(--fs-label);color:var(--grey);margin-top:4px}
.cal-event__tags{display:flex;align-items:center;gap:8px;margin-top:10px}
/* 목록형 밀집 UI라 태그·배지 모두 작은 사이즈(Badge S)로 — .badge--sm과 동일 치수 */
.cal-event__tags .tag--cat,.cal-event__tags .badge{height:19px;padding:0 10px;font-size:var(--fs-badge)}
.cal-empty{font-size:var(--fs-body-sm);color:var(--grey);padding:24px 0;text-align:center}

/* ---------- 검색 입력창 ---------- */
.search-input-wrap{position:relative;margin-bottom:16px;flex:none}
/* 260813 2차 Visual Pass: 입력 필드도 조작 UI라 pill→rounded rectangle(--r-lg, 48px 높이에 비례) */
.search-input{width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-lg);padding-inline:20px;padding-right:48px;font-size:var(--fs-body);font-family:inherit;margin-bottom:0;color:var(--ink)}
.search-input::placeholder{color:var(--soft)}
/* 입력 중 상태(260806) — 공용 포커스 링(home.css)은 모든 조작 요소에 적용되지만, 검색창은 알약 형태라
   링만으로는 "지금 입력 가능한 칸"이라는 신호가 약했다. 테두리를 ink로 올려 필드 자체가 활성임을 보인다.
   링과 중복돼 보이지 않도록 outline-offset을 0으로 좁혀 테두리에 붙인다. */
.search-input:focus-visible{border-color:var(--ink);outline-offset:0}
/* 브라우저 기본 clear(×) 아이콘과 중복 노출되지 않도록 웹킷 계열의 네이티브 버튼은 숨기고 공통 버튼 하나로 통일 */
.search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-input__clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--soft)}
.search-input__clear:hover{background:var(--bg);color:var(--ink)}
.search-input__clear .ico-svg{width:16px;height:16px}
#searchChips{margin-bottom:16px;flex:none}
/* 카테고리 탭(#searchChips)은 기존처럼 모바일에서 가로 스크롤 허용(단일 선택 탭이라 "더 있다"는 게
   스와이프로 자연스럽게 읽힌다) — 드롭다운 3개(#searchFilterChips, 지역·테마·유형)는 스크롤 밖으로
   숨으면 필터가 있다는 것 자체를 알 수 없으므로 항상 줄바꿈되게 분리한다. ID 선택자라 home.css의
   모바일 `.chips{flex-wrap:nowrap;overflow-x:auto}` 규칙보다 우선 적용된다. */
#searchFilterChips{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding-inline:0;margin-bottom:12px}

/* ---------- 검색 결과 카드(동일 톤) ---------- */
.cal-events .cal-event a{color:inherit;text-decoration:none;display:block}

/* ---------- 모바일: 바텀시트로 전환 ---------- */
@media (max-width:997px){
  .sheet-modal{align-items:flex-end}
  .sheet-modal .modal__box{width:100%;height:88vh;max-height:none;border-radius:var(--r-xl) 20px 0 0;animation:sheet-up .28s ease-out}
  .sheet-modal .modal__head{padding:16px var(--pad-page)}
  .sheet-modal .modal__body{padding:16px var(--pad-page) max(16px, env(safe-area-inset-bottom))}
}
@keyframes sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}