/* =========================================================
   LETSRUN PLAY · 주제별 콘텐츠 모아보기 — 전용 레이아웃 CSS
   (260819 신설 → 260819 2차 개편: 필터 칩 · 3열 그리드 · 상단 여백 축소 · 건수 제거)
   ---------------------------------------------------------
   이 파일이 갖는 것은 "목록 페이지의 배치"뿐이다.
   카드·배지·태그·버튼·칩은 home.css의 공용 컴포넌트를 그대로 쓰고 여기서 다시 정의하지 않는다(§35).
   .detail-back(홈으로)도 detail.css의 기존 컴포넌트를 그대로 재사용한다.

   허브 4종의 hub.css를 읽지 않는 이유: 그 파일은 히어로·인기·오픈 예정 등 허브 전용 섹션 배치를
   담고 있어 이 페이지에 필요 없는 규칙이 대부분이다. 겹치는 것은 그리드 하나뿐이라
   여기서 최소한만 정의한다.
   ========================================================= */

/* 페이지 헤더 — 제목 · 짧은 설명만(총 건수 텍스트는 260819 2차에서 제거 — 필터가 생기면서
   고정 카운트가 필터 결과와 안 맞아 보이기 쉬웠다). */
/* ---------- 상단 컬러 밴드 (260819, 클라이언트 A안) ----------
   흰 배경에 텍스트만 있던 헤더를 주제별 브랜드 컬러 밴드 + 말마 마스코트로.
   낮은 배너(데스크톱 min 140px / 모바일 96px)라 §44 "히어로·큐레이션을 다시 만들지 않는다"와
   충돌하지 않는다 — 콘텐츠가 아니라 주제 타이틀 장식이다. 마스코트는 바닥 정렬 + overflow
   hidden으로 위가 살짝 잘리는 스티커 느낌(처음방문 배너와 동일 기법). 색은 -200 파스텔
   스케일(기존 토큰)만 사용, live만 다크 반전. */
/* 260826: overflow:hidden 제거 — 마스코트가 처음방문 배너처럼 밴드 **위로 돌출**해야 해서
   컨테이너로 자르지 않고 마스코트 자신을 clip-path로 자른다(아래 마스코트 규칙 참고).
   밴드 배경·radius는 overflow와 무관하게 그대로다. */
.coll__head{position:relative;margin-bottom:20px;border-radius:var(--r-card);
  min-height:140px;padding:24px 170px 24px 28px;display:flex;flex-direction:column;justify-content:center;
  background:var(--bg)}
/* 260830: word-break:keep-all — 모바일에서 마스코트 예약 폭 때문에 설명이 좁게 꺾이는데,
   기본 줄바꿈은 "프로그\n램"·"공간\n과 시설"처럼 어절 중간을 자른다(총괄 리포트 "엔터 친 느낌").
   keep-all이면 어절 단위로만 꺾인다. */
.coll__title{font-size:var(--fs-h1,32px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0;word-break:keep-all}
/* text-wrap:balance — 두 줄로 꺾일 때 "골라보세요" 한 단어만 다음 줄에 남는 고아 줄을 없애고
   줄 길이를 비슷하게 나눈다(미지원 브라우저는 keep-all 상태 그대로 — 점진적 향상). */
.coll__desc{font-size:var(--fs-body);color:var(--grey);margin:8px 0 0;word-break:keep-all;text-wrap:balance}
/* 260821: 더보기 배너 말마가 "잘린다"는 클라이언트 리포트를 두 번 받았다.
   1차 시도(cover + 위 기준 크롭 = 상체 구도)는 오답이었다 — 처음방문 배너에서는 다리가 잘려
   자연스러웠지만, 여기는 밴드가 낮아 **잘리는 선이 얼굴에 걸린다**. 몸통이 잘리면 "구도"로
   읽히지만 얼굴이 잘리면 그냥 "망가진 그림"이다.
   → 결론: **아예 자르지 않는다.** 알파 실측 결과 원본 바닥이 실제로 크게 잘린 자산은
   macaron(최하단행 226px) 하나뿐이고 나머지는 사실상 온전하다
   (sunglass 11 · carrot 12 · cheer 2 · stand 26 · smile 39px).
   260826 후속: 그래도 carrot(당근 안은 흉상)·smile(머리 클로즈업)은 **아트 자체가 평평하게
   잘린 구도**라 밴드 아래선에서 여전히 "잘린 그림"으로 읽힌다는 재리포트 — CSS가 아니라
   자산 문제이므로 두 파일을 말마 기본형 매뉴얼북의 **완전 전신 컷**(당근 캐릭터 듀오 /
   스마일 안경 전신)으로 교체했다(파일명 동일, 이 규칙은 무수정). macaron은 엎드린 구도라
   바닥선에 앉은 것으로 자연스럽게 읽혀 유지.
   · object-fit:contain — 어느 방향으로도 깎이지 않는다. 캐릭터마다 비율이 제각각이어도
     (가로형 macaron 1.28 ~ 세로형 stand 0.53) 알아서 박스 안에 들어온다.
   · object-position:bottom — 캐릭터가 밴드 아래선을 딛고 선다. macaron처럼 바닥이 평평하게
     잘린 자산도 그 단면이 아래선에 붙어 자연스럽다(밴드 중간에 떠 있으면 파손으로 보인다).
   · ⚠ 폭은 반드시 고정한다. height만 주면 가로형이 밴드 padding(170px)을 넘어
     제목을 침범한다(실측 268px). 고정 폭 = 어떤 캐릭터가 와도 예약된 자리 안. */
/* 260826(클라이언트): 처음방문 배너의 말마 구조("위로 돌출 + 허리 아래 크롭", home.css
   .firstvisit__mascot)가 마음에 든다 — 더보기 밴드도 똑같이. 같은 수식 그대로 이식:
   · 요소 높이 = 밴드 × --cm-scale, 아래 --cm-crop 비율을 clip-path로 잘라 상반신 구도
   · bottom 음수값이 잘려나간 높이와 상쇄돼 보이는 아래끝 = 밴드 바닥선, 머리는 밴드 위로 돌출
   · 위 .coll__head의 overflow:hidden을 제거했기 때문에 돌출이 살아난다
   ⚠ places(마카롱)는 엎드린 가로 구도라 돌출·크롭이 안 어울려 기존 contain 방식 유지(아래 예외). */
.coll__head-mascot{position:absolute;right:24px;
  /* ⚠ 높이는 %가 아니라 px 기준 — %로 두면 설명이 2줄로 접혀 밴드가 커질 때 마스코트도 따라
     커지고, 커진 마스코트가 다시 문구를 밀어 접히는 되먹임이 생긴다(모바일 실측).
     밴드 min-height(140px) × 1.6 = 224px, 보이는 높이 168px → 밴드 위 돌출 28px. */
  --cm-h:224px;--cm-crop:0.25;
  height:var(--cm-h);
  bottom:calc(-1 * var(--cm-h) * var(--cm-crop));
  width:auto;object-fit:contain;object-position:bottom;
  clip-path:inset(0 0 calc(var(--cm-crop) * 100%) 0);pointer-events:none}
.coll__head--places .coll__head-mascot{--cm-scale:1;--cm-crop:0;
  bottom:0;width:146px;height:calc(100% - 12px);clip-path:none;object-position:bottom center}
.coll__head--taste{background:var(--coral-200)}
.coll__head--places{background:var(--green-200)}
.coll__head--experience{background:var(--ground-200)}
.coll__head--event{background:var(--yellow-200)}
/* 260828 클라이언트: 다크(ink) 배경에서 말마 스티커의 가장자리 흰 픽셀(원본 아트 특성, 1~2px)이
   테두리처럼 도드라져 배경을 밝은 옐로우로 교체 — 스마일 안경(옐로우) 컨셉과도 맞고,
   event 밴드(yellow-200)와는 한 톤 차이(yellow-300)로 구분한다. 텍스트는 기본 ink로 복귀. */
.coll__head--live{background:var(--yellow-300)}

/* 필터 — 260819 3차: HOME "취향대로"(#pickChips, 지역 드롭다운+테마 flat chip 한 줄)·
   공원 탐색 "지역별 공간 모두 보기"(#placeFilterChips, 지역+유형 드롭다운 두 개 한 줄)와
   완전히 같은 마크업을 collection.js가 그대로 그린다 — 이 요소 자체가 home.css의 .chips다
   (그룹별 라벨·세로 스택 없음). 여기서는 그리드와의 아래 간격만 최소로 둔다. */
.coll__filters{margin-bottom:24px}

/* 목록 그리드 — 260819 2차: 4열 → 3열(현재 콘텐츠 규모에서 4열은 카드가 작고 성겨 보였다).
   .card--pick/.card--wide는 각각 기본 width(240px/420px)를 가지므로 그리드 안에서는
   열 폭을 따르도록 auto로 푼다. */
/* 260830: 세로 간격(row)을 가로보다 크게 — 위 카드의 방문정보 줄과 아래 카드 이미지가
   같은 간격이면 행 구분이 안 읽힌다(총괄 리포트, PLAY NOW Weekly 그리드와 동일 보정). */
.coll__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);row-gap:48px}
.coll__grid .card--pick,.coll__grid .card--wide{width:auto}

/* 코스는 카드 자체가 가로로 넓은 컬러 배너라 3열을 그대로 쓰되(콘텐츠 grid와 같은 열 수라
   별도 규칙이 필요 없다), .course는 원래 캐러셀 카드라 폭 고정·스냅·비활성 축소 상태를 갖고
   있어 목록에서는 그 캐러셀 전용 값만 해제한다(그라디언트·radius·타이포는 그대로 물려받는다
   — 새 카드 컴포넌트 만들지 않음). */
.coll__course{flex:none;width:auto;scroll-snap-align:none;opacity:1;transform:none}

@media (max-width:997px){
  .coll__head{margin-bottom:16px;min-height:96px;padding:16px 116px 16px 18px}
  /* 모바일도 같은 돌출 구조 — 밴드 min-height(96px) × 1.5 = 144px, 보이는 108px → 돌출 12px.
     places 예외는 데스크톱 규칙 상속(크기만 축소). */
  .coll__head-mascot{right:12px;--cm-h:144px}
  .coll__head--places .coll__head-mascot{width:104px;height:calc(100% - 10px)}
  .coll__filters{margin-bottom:20px}
  .coll__grid{grid-template-columns:repeat(2,1fr);row-gap:32px}
}
@media (max-width:480px){
  .coll__grid{grid-template-columns:1fr}
}

/* ---------- 상단(Back → Header) 여백 축소 (260819 2차) ----------
   .detail-back(상단 32px/하단 16px, detail.css)에 이어 이 페이지 첫 .section이 일반
   --gap-section(72px 데스크톱/40px 모바일 — "섹션과 섹션 사이" 간격 토큰)을 그대로 받는 바람에
   "홈으로" 아래가 최대 88px까지 벌어져 있었다. 이 섹션은 main의 첫 자식이 아니라서
   (앞에 back-link용 .container가 있다) 허브 4종이 쓰는 `main > .section:first-child{padding-top:32}`
   규칙(home.css §27)의 대상이 되지 못해 생긴 문제다.
   처음엔 그 규칙과 같은 값(32/12px)을 줬으나, 260819 3차(컬러 밴드 도입 후) "홈으로와 배너
   간격이 너무 넓다"는 피드백으로 더 줄였다 — GNB 진입 여백(32/12)은 .detail-back의 위쪽
   패딩이 이미 담당하므로, 여기는 back 링크와 밴드 사이 간격만 만들면 된다(§27 무충돌).
   실효 간격 = back 하단 16px + 아래 값 → 데스크톱 24px / 모바일 16px. */
.coll > .section{padding-top:8px}
@media (max-width:997px){
  .coll > .section{padding-top:0}
}

/* .detail-back은 detail.css에서 기본 display:none이고 `body:has(.detail-hero)`일 때만 켜진다
   (상세 히어로가 있는 페이지 전용 컴포넌트라는 전제). 이 페이지는 히어로가 없으므로 여기서 켠다 —
   detail.css를 고치면 상세 31개가 함께 영향을 받으므로 건드리지 않는다(§35). */
.coll .detail-back{display:flex}