/* =========================================================
   LETSRUN PLAY · 코스(추천 코스) — 레이아웃 전용 CSS
   카드·모달·칩·버튼·타이포 자체 스타일은 home.css/detail.css 공용 규칙을 그대로 쓴다.
   이 파일은 코스 카드가 놓이는 rail, 미리보기 모달 내부 2단 배치, 상세 페이지의
   동선 리스트 폭만 정의한다.
   ========================================================= */

/* 코스 카드를 버튼으로 재사용(모달 트리거) — 기존 .card--wide 시각 규칙은 그대로 상속 */
button.card--wide{border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}

/* 코스 미리보기 모달 — 이미지 없이 컬러로만 운영(운영 부담 축소 확정).
   헤더가 코스 그라디언트(c1/c2, course.js가 인라인 주입)로 칠해지고 코스명이 크게 얹힌다.
   모바일 바텀시트 전환·닫기 버튼 등 셸 동작은 캘린더/검색과 동일한 .sheet-modal 공용을 그대로 쓴다. */
.course-modal__box{max-width:720px}
/* Large Modal Title — 제목이 곧 콘텐츠(코스명)인 강조형이라 Utility 기본값(18px)을 쓰지 않는다.
   .sheet-modal 의존을 빼고 이 클래스 자체가 Large를 뜻하도록 한다(260811). */
.modal__head h3.course-modal__title{font-size:26px;font-weight:800;color:var(--white);line-height:1.25}
.sheet-modal .course-modal__box .modal__head{border-bottom:0;padding:32px 24px 26px}
.sheet-modal .course-modal__box .modal__close{background:rgba(255,255,255,.22);color:var(--white)}
.course-modal__info{flex:1;min-width:0;min-height:0;overflow-y:auto}
.course-modal__summary{font-size:var(--fs-body-sm);color:var(--grey);margin-bottom:8px}
.course-modal__count{font-size:var(--fs-label);color:var(--grey);margin-bottom:16px}
/* 데스크톱은 내용 높이만큼만(캘린더처럼 고정하면 동선 3~8개 차이로 빈 공간이 남는다) — 모바일 바텀시트(88vh)는 공용 규칙 그대로 */
@media (min-width:998px){
  .sheet-modal .course-modal__box{height:auto;max-height:86vh}
}

/* 코스 상세 페이지 — 동선 리스트는 폭만 제한(항목 자체는 .modal__spots 공용 스타일) */
.course-detail__spots{max-width:640px}

/* "전체 동선"을 히어로 우측 컬럼 안에 이어 붙일 때는 페이지 상단 구분선(원래 풀폭 섹션 경계용)이
   불필요해 여백만 남기고 제거 — 섹션 자체 스타일(.detail-section)은 손대지 않는다 */
.detail-section--inline{border-top:0;padding-block:0;margin-top:8px}

/* 상세 히어로 컬러 블록 — 이미지 대신 코스 그라디언트 위에 코스명을 크게(배경은 course.js가 주입) */
#courseDetailMedia{display:flex;align-items:flex-end;padding:32px}
.course-hero__name{font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.25;color:var(--white);word-break:keep-all}

/* 잘못된 course 값 Empty State */
.course-empty{padding:120px var(--pad-page);text-align:center;color:var(--grey)}
.course-empty__title{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px}