/* =========================================================
   LETSRUN PLAY · 전체 일정 페이지(play-now.html) — 전용 레이아웃 CSS
   (260815 B안으로 출발해 현재는 이 페이지의 정식 CSS다 — "원본은 이 파일을 읽지 않는다"던
    옛 주석은 B안이 본편으로 승격되며 사실이 아니게 되어 260819에 정정.)

   재사용: .section/.container/.section__head/.chip/.chip-dd/.btn/.tag--cat/.badge/
           .card-region-badge (home.css) · .cal-nav/.cal-weekdays/.cal-grid/.cal-day (calendar.css)
   이 파일이 새로 정의하는 것: (1) 좌 목록 + 우 sticky 캘린더 2단 레이아웃,
   (2) 일정 리스트 행(.wson-item), (3) 페이지형 캘린더 크기 보정.

   모든 선택자에 `wson-` 접두사를 붙여 다른 페이지로 새지 않게 한다
   (calendar.css의 .cal-* 는 이 페이지에서 크기만 덮어쓰고, 원본 모달 값은 건드리지 않는다 —
    아래 캘린더 보정은 전부 `.wson-cal` 하위로 한정).
   ========================================================= */

/* ---------- 페이지 헤더 ---------- */
/* 제목 + 지역 필터를 한 줄에 두는 것은 공용 .section__head__top(home.css)이 담당한다 —
   여기서는 그 안에 들어간 .chips의 기본 여백/가로 스크롤만 해제한다
   (.chips는 원래 여러 칩이 줄지어 스크롤되는 필터 바용이라 음수 margin과 overflow를 갖고 있다). */
/* 지역 필터 바 — 260829 재확정: 페이지 제목("전체 일정") 옆 헤더 행(.section__head__top이
   flex 배치 담당). 페이지 레벨 필터로 Upcoming과 Weekly 모두에 적용된다는 위계가 위치로
   드러난다. .chips 기본 여백·스크롤은 헤더 안에서 불필요해 해제. */
.wson-filterbar{margin:0;padding:0;overflow:visible}

/* ---------- 2단 레이아웃 ---------- */
/* 좌: 일정 목록(스크롤) · 우: 캘린더(sticky). DIVE What's on과 동일한 역할 분담 —
   목록을 아무리 내려도 날짜 선택 UI가 항상 화면에 남는다. */
/* margin-top은 앞선 .section__head의 margin-bottom(20px)과 상쇄(collapse)된다 —
   둘 중 큰 값이 실제 간격이므로 20px로 맞춰 제목과 본문이 한 덩어리로 붙어 보이게 한다
   (28px일 때는 제목 아래만 유독 벌어져 헤더가 떠 보였다). */
.wson-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;margin-top:20px}
/* 캘린더 카드 상단을 그룹 제목이 아니라 그 아래 첫 일정의 구분선과 같은 높이로 내린다 —
   제목 한 줄(줄높이+여백)만큼. 필터가 헤더로 올라가며(260829 재확정) 좌측 첫 요소가 다시
   그룹 제목이 되어 이 보정을 복원했다. */
.wson-cal{position:sticky;top:96px;margin-top:43px}

/* ---------- 그룹 제목(Now / Upcoming) ---------- */
/* ⚠ `:not([hidden])`가 핵심이다. 진행 중 일정이 0건이면 Now 그룹에 hidden을 걸어 감추는데
   (§9 빈 영역 미노출), hidden이어도 DOM 형제로는 남아 있어 그냥 `.wson-group + .wson-group`로
   쓰면 Upcoming이 48px를 그대로 받는다. 그러면 좌측 목록만 48px 아래에서 시작해
   우측 캘린더 카드와 시작선이 어긋난다. 양쪽 다 보일 때만 간격을 준다. */
.wson-group:not([hidden]) + .wson-group:not([hidden]){margin-top:48px}
/* 섹션급 제목(Now/Upcoming/Weekly/날짜 보기)은 800 — 요일 그룹 제목(22px/700)과 크기+굵기
   두 축으로 위계를 가른다(260829 총괄: "Weekly랑 같은 크기라 위계 구분이 안 됨"). */
.wson-group__title{font-size:var(--fs-card-lg);font-weight:800;color:var(--ink);margin:0 0 4px}
.wson-group__count{font-size:var(--fs-label);color:var(--grey);font-weight:600;margin-left:8px}

/* ---------- 일정 목록 행 ---------- */
.wson-list{display:flex;flex-direction:column}
/* 행 구분선은 위쪽에만 — 그룹 제목 바로 아래 첫 행에도 선이 생겨 제목과 목록이 분리돼 보인다 */
.wson-item{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:center;
  padding:24px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.wson-item:hover .wson-item__title{text-decoration:underline;text-underline-offset:3px}
.wson-item__date{font-size:var(--fs-label);font-weight:600;color:var(--ink)}

/* 260826: --fs-h3(18px) → --fs-h2(22px, 모바일 19px) — 전체일정 행은 날짜·소개·배지가 함께 있는
   큰 행이라 18px 제목이 소개 문단과 위계 차이가 약하다는 클라이언트 피드백. 그룹 제목
   (.wson-group__title, --fs-card-lg 26px)보다는 한 단계 아래를 유지한다. 기존 토큰만 사용. */
.wson-item__title{font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--ink);margin:6px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wson-item__desc{font-size:var(--fs-body-sm);color:var(--grey);margin:6px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wson-item__foot{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
/* 썸네일 — 카드와 동일한 Cover 규칙(대표 이미지). 값이 없으면 중립 플레이스홀더로 자연 대체 */
.wson-item__media{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--img, var(--neut-thumb)) center/cover no-repeat}
  /* (260819: 지역 배지가 모서리 융합형 → 떠 있는 필로 재설계되며 --region-badge-r 훅 소멸) */

/* ---------- 페이지형 캘린더 보정 ---------- */
/* calendar.css는 모달(고정 높이) 기준이라 여백이 촘촘하다 — 페이지에서는 카드로 감싸고 숨통을 튼다.
   .cal-day 등 셀 자체 규격은 그대로 물려받는다(두 화면의 날짜 UI가 어긋나지 않도록). */
/* 카드 안쪽 여백을 20px로 줄여 월 이동 바(.cal-nav)가 좌측 그룹 제목과 비슷한 높이에서
   시작하게 한다 — 24px일 때는 카드 위쪽만 비어 캘린더가 아래로 처져 보였다. */
.wson-cal__box{border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;background:var(--white)}
/* 월 이동 바 — 큰 라벨 왼쪽 + 작은 화살표를 라벨에 밀착 + 오늘 오른쪽(260819, 모바일 패턴을
   데스크톱까지 공통 승격 — 이전 데스크톱은 ‹ 라벨 › 가운데 정렬이라 버튼들이 겹쳐 보였다).
   버튼 축소(32→26px)는 이 페이지 스코프만 — calendar.css 원본 모달 값은 건드리지 않는다(§35). */
.wson-cal .cal-nav{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.wson-cal .cal-nav__group{display:flex;align-items:center;gap:4px}
.wson-cal .cal-nav__label{font-size:var(--fs-card-lg);font-weight:800;color:var(--ink);
  letter-spacing:-0.01em;min-width:0;text-align:left;order:-1;margin-right:6px}
.wson-cal .cal-nav__btn{width:26px;height:26px;font-size:var(--fs-body-sm)}
/* 요일을 풀네임(일요일…)으로 바꾸며 칸 대비 글자가 길어져 크기만 캡션급으로 보정 */
.wson-cal .cal-weekdays{margin-bottom:10px}
.wson-cal .cal-weekdays span{font-size:var(--fs-badge)}
.wson-cal .cal-grid{gap:6px 4px}
.wson-cal__reset{width:100%;margin:0 0 16px} /* 260819: 카드 최상단으로 이동 — 아래 여백만 */
.wson-cal__hint{font-size:var(--fs-caption);color:var(--grey);text-align:center;margin:12px 0 0}
/* 접기 핸들 — 모바일 전용(아래 media에서 노출). 데스크톱은 sticky 전체 달이 기본이라 필요 없다. */
.wson-cal__fold{display:none}

/* ---------- 모바일 (260819 재설계 — 현대카드 DIVE What's on 모바일 참고) ----------
   구성: [큰 월 타이틀 + 이동 컨트롤] → [주간 스트립(기본) ↔ 월 전체(핸들로 펼침)] →
   [일정 목록: 썸네일 왼쪽 정사각 + 우측 날짜/제목/소개/배지].
   간격 체계(위→아래): 캘린더 카드 안 16px 패딩 · 헤더↔요일 14px · 요일↔날짜 8px ·
   날짜↔핸들 4px · 카드↔목록 24px · 행 상하 20px · 행 안 날짜→제목 4px → 소개 4px → 배지 10px. */
@media (max-width:997px){
  /* 캘린더를 목록 위로 — 좁은 화면에서 날짜부터 고르고 결과를 아래에서 확인하는 순서가 자연스럽다 */
  /* ⚠ 1fr(=minmax(auto,1fr))이 아니라 minmax(0,1fr) — 260829 상설 탭의 요일 내비 칩 행
     (nowrap, min-content 488px)이 auto 최소값으로 트랙을 510px까지 밀어 페이지가 가로로
     넘치던 버그. 0으로 잠그면 칩 행은 제자리에서 가로 스크롤된다(데스크톱 규칙과 동일 원리). */
  .wson-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:16px}
  /* 데스크톱의 43px margin-top(제목 옆이 아니라 구분선 높이에 캘린더를 맞추는 값)은
     모바일에선 무의미하다 — 캘린더가 목록 위 첫 요소(order:-1)로 올라가 옆에 제목이
     없으므로, 이 값을 그대로 두면 화면 맨 위에 불필요한 빈 여백만 남는다. */
  .wson-cal{position:static;order:-1;margin-top:0}
  .wson-cal__box{padding:16px 16px 8px} /* 아래쪽은 핸들 버튼이 자체 패딩을 가져 8px로 마감 */
  .wson-head{align-items:flex-start}

  /* 캘린더 헤더 패턴은 base로 승격(260819) — 모바일 전용 조정만 남긴다 */
  .wson-cal .cal-nav{margin-bottom:14px}
  .wson-cal .cal-weekdays{margin-bottom:8px}

  /* --- 주간 스트립 접기(기본) / 월 전체 펼치기 ---
     renderCalendar()가 기준 주(선택 날짜 > 오늘 > 첫 주) 외 셀에 .is-off를 달아두고,
     여기서는 접힘 상태(is-unfolded 없음)에서만 그 셀을 숨긴다 — 데스크톱은 이 media 밖이라
     .is-off가 있어도 전체 달이 항상 보인다. */
  .wson-cal__box:not(.is-unfolded) .cal-grid > .is-off{display:none}
  .wson-cal__box:not(.is-unfolded) .wson-cal__hint{display:none} /* 접힘 시 한 줄이라도 더 가볍게 */
  .wson-cal__fold{display:flex;align-items:center;justify-content:center;width:100%;
    padding:8px 0 6px;margin-top:4px;color:var(--soft)}
  .wson-cal__fold .ico-svg{width:22px;height:22px;transition:transform .2s ease}
  .wson-cal__box.is-unfolded .wson-cal__fold .ico-svg{transform:rotate(180deg)}

  /* --- 일정 목록: 썸네일 왼쪽 정사각(DIVE 리스트 행) --- */
  .wson-group:not([hidden]) + .wson-group:not([hidden]){margin-top:32px}
  .wson-group__title{margin-bottom:0} /* 행 자체가 padding-top 20px을 가져 이중 여백 방지 */
  .wson-item{grid-template-columns:104px minmax(0,1fr);gap:16px;padding:20px 0;align-items:start}
  .wson-item__media{grid-column:1;grid-row:1;aspect-ratio:1/1;border-radius:var(--r-md)}
  /* 260821(재정정): 배지는 유지하되 104px 정사각 썸네일에 맞게 축소 — 글자 11px·패딩 4×8·모서리 6px.
     기본값(12px·6×10·10px 오프셋)은 큰 썸네일 기준이라 작은 정사각 안에서 비율이 커 보였다. */
  .wson-item__media .card-region-badge{top:6px;left:6px;font-size:var(--fs-badge);padding:4px 8px}
  .wson-item__body{grid-column:2;grid-row:1;min-width:0}
  /* 제목 크기를 여기서 다시 지정하지 않는다 — --fs-h3 토큰 자체가 이 breakpoint(997px)에서
     18px→16px로 이미 줄어든다(tokens.css). 프로젝트 전역 카드 제목과 같은 방식으로 축소된다. */
  .wson-item__title{margin-top:4px}
  /* DIVE처럼 부제(소개)를 회색 한 줄로 노출 — 이전 모바일은 숨겼으나 행이 좌우 구조가 되며
     세로 공간이 생겨 복원. 두 줄 이상은 잘라 행 높이가 들쭉날쭉하지 않게 한다. */
  .wson-item__desc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:4px}
  .wson-item__foot{margin-top:10px}
}

/* ---------- 상설 프로그램 — 요일 반복 노출 (260829 신설, 고객 4차 메일 8/28) ----------
   그룹(요일 세트)마다 [제목 + .day-pills(공용, home.css)] 헤더 아래 카드 그리드.
   카드는 공용 .card--pick(contentCardHTML) 그대로 — 여기서는 그리드 배치만 정의한다
   (컴포넌트는 공통 CSS, 페이지 CSS는 배치만 — §35). 그리드 규격은 Collection과 동일
   (3열 → ≤997 2열 → ≤480 1열, 기본 width 240px 카드를 auto로 풀어 칸을 채운다). */

/* Weekly 통합 섹션(260829) — Upcoming 아래 넉넉한 간격으로 이어지고, #weekly 해시 진입 시
   GNB에 가리지 않게 scroll-margin-top을 준다. */
#weekly{margin-top:72px;scroll-margin-top:110px}
/* Weekly 리드 문구 — 타이틀 아래 긴 라인(border-top)을 이 요소가 그린다(전체 일정의
   "Upcoming + 첫 행 윗선"과 같은 구성, 260829 총괄 지시). */
.wson-weekly__lead{font-size:var(--fs-body-sm);color:var(--grey);margin-bottom:28px;
  border-top:1px solid var(--line);padding-top:14px}

/* --- 요일 내비(260829 통합) — 같은 내용을 두 곳에 그린다:
   데스크톱 = 우측 sticky 레일(.wson-cal) 안 캘린더 아래 두 번째 카드(--desk) /
   모바일 = Weekly 리드 아래 GNB sticky 가로 칩 행(--m). 항목 활성 = .playnow__item.is-active와
   같은 옐로우 필 언어(현재 위치 표시). */
.wson-daynav--desk{margin-top:16px}
.wson-daynav--m{display:none} /* 모바일 전용 — 아래 media에서 노출 */
.wson-daynav .wson-cal__box{padding:12px}
.wson-daynav__title{font-size:var(--fs-label);font-weight:700;color:var(--grey);padding:6px 12px 10px}
/* 목록은 공용 .chips/.chip을 그대로 쓴다(모바일에서 다른 화면의 필터 칩과 같은 모양·동작 —
   가로 한 줄·스크롤바 숨김·드래그·선택 칩 가운데 정렬). 데스크톱에서만 세로 목록으로 덮는다. */
.wson-daynav__list{display:flex;flex-direction:column;gap:4px;flex-wrap:nowrap;margin-bottom:0}
.wson-daynav__item{justify-content:space-between;gap:10px;width:100%;height:auto;min-width:0;
  padding:14px 16px;border-radius:var(--r-md);border-color:transparent;background:transparent;
  font-size:var(--fs-body);font-weight:600;color:var(--ink);text-align:left;transition:background .15s ease}
.wson-daynav__item:hover{background:var(--bg)}
.wson-daynav__item.is-selected{background:var(--yellow-500);border-color:var(--yellow-500)}
.wson-daynav__count{font-size:var(--fs-label);font-weight:700;color:var(--grey)}
.wson-daynav__item.is-selected .wson-daynav__count{color:var(--ink);opacity:.75}
/* 내비 클릭 이동 시 그룹 제목이 GNB(80px) 아래 여유 있게 멈추는 지점 */
.weekly-group{scroll-margin-top:110px}

/* 캘린더 날짜 선택 시 모바일이 결과로 스크롤한다(일정 IIFE) — 목적지("10월 2일 (금) 일정"
   제목·빈 안내)가 GNB(56px)에 가리지 않게 여유를 준다(260829 총괄: "날짜 제목까지 다 보여야").
   데스크톱은 좌우 배치라 스크롤하지 않으므로 이 값은 실질 모바일 전용이다. */
#wsonDayGroup,#wsonEmpty{scroll-margin-top:72px}


/* 그룹 간 구분(260829 재정정, 총괄: "간격이 좁아 그룹 구분이 파악 안 된다") — 넉넉한 간격 +
   연회색 헤어라인. hidden 그룹(요일 필터)을 건너뛰고 "보이는 그룹 중 두 번째부터"만 선이
   생기도록 :not([hidden]) ~ 조합을 쓴다(첫 보이는 그룹 위에는 리드의 라인이 이미 있다). */
.weekly-group:not([hidden]) ~ .weekly-group:not([hidden]){margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
/* 그룹 헤더 — 요일 표시를 오른쪽 끝으로 밀지 않고 제목 옆에 붙인다(260829 후속, 총괄:
   "웹에서 너무 작고 여백이 많다" — 크기는 공용 .day-pill이 데스크톱 38px로 확대) */
.weekly-group__head{display:flex;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:20px}
/* 그룹 제목은 섹션 제목(Weekly, --fs-card-lg 26px)보다 한 단계 아래(--fs-h2 22px/700) —
   같은 크기면 "Weekly > 요일 그룹" 위계가 안 읽힌다(260829 총괄 지적). */
.weekly-group__title{font-size:var(--fs-h2);font-weight:700;color:var(--ink)}
/* 260830: 세로 간격(row)을 가로(32/12px)보다 크게 — 위 카드의 방문정보 줄과 아래 카드
   이미지가 같은 간격이면 행 구분이 안 읽힌다(총괄 리포트). hub.css의 hub-play__grid
   모바일 row-gap 보정(24px)과 같은 유형의 문제 — Collection 그리드(coll__grid)도 동일 적용. */
.weekly-group__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);row-gap:48px}
.weekly-group__grid .card--pick{width:auto}
@media (max-width:997px){
  #weekly{margin-top:48px;scroll-margin-top:126px}
  .wson-weekly__lead{margin-top:4px;margin-bottom:0}
  /* 모바일: 데스크톱 레일 카드는 숨기고(--desk), Weekly 리드 아래 **공용 필터 칩 한 줄**을
     **GNB 아래 sticky 고정**(260829 총괄 — 29CM류 "많은 필터 = 가로 스크롤 행 + 상단 고정").
     22개 콘텐츠를 스크롤하는 동안에도 요일 이동이 항상 손에 닿고, 스크롤스파이가 현재 그룹을
     칩에 표시한다. z-index 30 = GNB(50)·공지(40) 아래. 배경을 칠해야 카드가 뒤로 지나가므로
     래퍼를 좌우 풀블리드로 늘리고(안쪽 칩 행의 자체 bleed는 끔) 흰 배경 + 하단 헤어라인. */
  .wson-daynav--desk{display:none}
  .wson-daynav--m{display:block;position:sticky;top:56px;z-index:30;
    margin-inline:calc(var(--pad-page) * -1);margin-top:14px;padding:10px 0;
    background:var(--white);border-bottom:1px solid var(--line)}
  .wson-daynav__list{margin-inline:0;padding-inline:var(--pad-page)} /* 칩 행 자체 bleed 중복 방지 */
  .wson-daynav__list{flex-direction:row}
  .wson-daynav__item{width:auto;height:36px;padding:0 14px;justify-content:center;gap:6px;
    border-color:var(--line);background:var(--white);font-size:var(--fs-label);font-weight:500}
  .wson-daynav__item.is-selected{border-color:var(--yellow-500)}
  /* 칩에는 요일만 — 건수(2곳·11곳…)는 칩을 길게 만들고 정보량도 적어 뺀다(총괄).
     데스크톱 세로 목록에서는 우측에 그대로 둔다. */
  .wson-daynav__count{display:none}
  .weekly-group{scroll-margin-top:126px} /* GNB 56 + sticky 요일 내비 57 + 여유 — 고정 바에 제목이 가리지 않게 */
  #weeklyGroups{margin-top:20px} /* sticky 칩 행과 첫 그룹 사이 숨통 */
  .weekly-group:not([hidden]) ~ .weekly-group:not([hidden]){margin-top:48px;padding-top:28px}
  .weekly-group__head{gap:14px;margin-bottom:14px}
  .weekly-group__grid{grid-template-columns:repeat(2,1fr);gap:12px;row-gap:32px}
}
@media (max-width:480px){
  .weekly-group__grid{grid-template-columns:1fr}
}