/* =========================================================
   LETSRUN PLAY · DETAIL SHELL (공통) — 상세 템플릿 4종 공용
   HOME의 GNB/Footer/버튼/칩/카드 CSS(../home/home.css)를 그대로 불러와 재사용하고,
   이 파일은 상세 페이지에만 필요한 모듈(히어로 정보 그리드·타임라인 등)만 추가한다.
   유형 차이는 .detail-page--event 등 modifier의 --detail-accent* 변수 재정의로만 처리.
   ========================================================= */

/* ---------- 유형 accent — tokens.css의 기존 시맨틱 별칭(--c-event 등)을 그대로 매핑 ---------- */
/* 기본값(260806) — modifier가 없거나 아직 매핑되지 않은 상세 페이지도 accent를 갖도록 .detail-page에
   폴백을 둔다. 이전에는 event/season/experience/facility 4종만 정의돼 있어서, 같은 셸을 쓰는
   course-detail.html(.detail-page--course)에서 세 변수가 전부 "정의 안 됨"이 됐다 — 그 페이지가 아직
   accent를 쓰는 컴포넌트를 담고 있지 않아 화면은 멀쩡했지만, .btn--accent 하나만 추가해도 조용히 색을
   잃는 상태였다. 중립 톤(ink 계열)을 기본으로 둬서 "색이 없는" 상황 자체를 없앤다. */
.detail-page{--detail-accent:var(--line);--detail-accent-deep:var(--ink);--detail-accent-bg:var(--bg)}
.detail-page--event{--detail-accent:var(--c-event);--detail-accent-deep:var(--c-event-deep);--detail-accent-bg:var(--c-event-bg)}
.detail-page--season{--detail-accent:var(--c-season);--detail-accent-deep:var(--c-season-deep);--detail-accent-bg:var(--c-season-bg)}
.detail-page--experience{--detail-accent:var(--c-exp);--detail-accent-deep:var(--c-exp-deep);--detail-accent-bg:var(--c-exp-bg)}
.detail-page--facility{--detail-accent:var(--c-fac);--detail-accent-deep:var(--c-fac-deep);--detail-accent-bg:var(--c-fac-bg)}

/* ---------- 안내 바 (공지 톤 — .notice 구조 재사용) ----------
   260828: 배경 = 브랜드 옐로우(전 유형 공통, accent 톤 폐기 — 눈에 띄지 않는다는 클라이언트 지적),
   배지 = 검정 필 + 흰 글자, 닫기 전까지 GNB 아래 sticky 고정(GNB z-index 50 아래 40). */
.notice.detail-notice{background:var(--yellow-500);border-left:0;position:sticky;top:80px;z-index:40}
.detail-notice .notice__badge{background:var(--ink);color:var(--white)}
.detail-notice .notice__close{color:var(--ink)}
@media (max-width:997px){
  .notice.detail-notice{top:56px} /* 모바일 GNB 높이 */
}

/* ---------- 뒤로가기 바 — 상세 템플릿(행사·시즌·체험·시설·코스, .detail-hero 보유 페이지) 전용.
   대표 허브 페이지(PLAY NOW 등)에는 이 요소 자체가 없다 — GNB 활성 메뉴만으로 위치를 전달한다.
   데스크톱·모바일 동일하게 노출(문구 항상 "뒤로") — 클릭 동작은 home.js의 공용 [data-back] 핸들러. */
/* 260811: 상단 진입 여백을 HOME 히어로(.hero{padding-top:32px})와 같은 리듬으로 맞춘다 — 기존
   padding-block:16px은 "뒤로"가 GNB에 16px로 붙어 허브·HOME보다 눈에 띄게 좁았다. 아래쪽 16px과
   min-height(44px 터치 영역, 260806 UI Audit)은 그대로 두고 위쪽만 32px로 키운다. 모바일은 아래
   ≤997 블록에서 16px로 되돌린다(모바일 HOME도 12px로 촘촘한 리듬을 쓴다). */
.detail-back{display:none;align-items:center;gap:6px;padding-block:32px 16px;font-size:var(--fs-body-lg);font-weight:700;color:var(--ink);min-height:44px} /* 260819: 14→16px — 너무 작다는 피드백(전 상세·코스·Collection 공통) */
.detail-back .ico-svg{width:20px;height:20px} /* 텍스트 확대에 비례해 chevron도 18→20 */
body:has(.detail-hero) .detail-back{display:flex}
/* 아이콘은 공용 .ico-svg 인라인 svg(home.css) 재사용 — 페이지마다 인라인 svg를 중복 작성하지 않는다 */

/* ---------- 히어로: 이미지 + 정보 ---------- */
.detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding-bottom:var(--gap-section)}
/* 대표 이미지 비율 — 4종 공통 토큰(개별 height 임의 지정 금지, width만 반응형으로 변함) */
.detail-hero__media{--detail-media-ratio:1/1;aspect-ratio:var(--detail-media-ratio);border-radius:var(--r-hero);overflow:hidden;background:var(--img,var(--neut-thumb));background-size:cover;background-position:var(--img-pos,center)}
.detail-hero__info{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.detail-hero__tags{display:flex;gap:8px}
.detail-hero__title{font-size:32px;font-weight:700;letter-spacing:-.01em}
.detail-hero__desc{font-size:var(--fs-body);color:var(--grey);line-height:var(--lh-body)}

/* 정보 리스트(공통 grid — label 열 시작선 고정, value는 항상 왼쪽 정렬) */
.detail-meta{--detail-meta-label-w:64px;list-style:none;display:flex;flex-direction:column;margin-top:4px} /* 260819: 108→64 — 라벨(최장 '소요시간' 4자)과 값 사이가 과하게 벌어진다는 피드백. 변수 하나라 상세 4종 템플릿+개별 29페이지 전부 동시 적용 */
.detail-meta__row{display:grid;grid-template-columns:var(--detail-meta-label-w) 1fr;column-gap:var(--sp-4);padding:14px 0;border-top:1px solid var(--line)} /* gap도 24→16 */
.detail-meta__row:last-child{border-bottom:1px solid var(--line)}
.detail-meta__label{font-size:var(--fs-label);color:var(--grey)}
/* 260820: 목록을 닫는 선 + 바로 뒤 .detail-section의 border-top이 짧은 간격을 두고 두 줄로
   보이던 중복 라인 제거(전 상세 공통, 2단 작업 이전부터 있던 기존 현상).
   :has(+ …)로 "뒤에 선을 가진 섹션이 실제로 오는 경우"에만 끈다 —
   뒤가 연관 콘텐츠(.section.container, 선 없음)인 페이지에서는 닫는 선이 유일한 마감이라 유지.
   ⚠ 데스크톱 2단에서는 메타가 카드 안이고 뒤에 CTA가 이어져 중복이 아니므로 모바일에서만
   끈다(모바일 규칙은 아래 max-width:997 블록). 타임라인은 양쪽 폭 모두 중복이라 공통 처리. */
.detail-section:has(+ .detail-section) .detail-timeline__row:last-child{border-bottom:0}
.detail-meta__value{font-size:var(--fs-body-sm);font-weight:600;color:var(--ink);text-align:left}
/* 260828: 메타 값 보조 줄 — 주 정보(요일·시간·기간·금액)는 본 줄, 괄호 보조 설명·회차 시각표는
   이 줄로 내린다(클라이언트 확정 위계). 전 상세 공통 — 여기 한 곳만 고치면 전부 바뀐다. */
.detail-meta__sub{display:block;font-size:.85em;font-weight:400;color:var(--grey);margin-top:2px}
/* 메타 값 동급 나열(날짜·시각이 다른 두 항목 등) — 한 줄에 · 로 잇지 않고 항목당 한 줄. 여기 한 곳만 고치면 전부 */
.detail-meta__item{display:block}

.detail-hero__cta{display:flex;gap:10px;margin-top:8px}
/* 260813 2차 Visual Pass: CTA도 Chip과 같은 이유로 pill→rounded rectangle.
   클래스명 .btn--pill은 그대로 두되(HTML 45곳 일괄 변경은 안 함) 실제 radius만 base .btn과
   맞춘다 — 상세 페이지 CTA 91%가 이 클래스를 쓰므로 여기 하나로 전체가 바뀐다. */
.btn--pill{border-radius:var(--r-md)}
/* 260828: 예약 버튼 = 옐로우 키컬러 — 260821 클라이언트 확정("예약하기는 옐로우 키컬러로 쓸 계획")의
   첫 실제 적용(시크릿웨이 투어). 템플릿별 accent 색이 아니라 전 상세 공통 브랜드 옐로우를 쓴다.
   공유(.btn--outline)는 현 디자인 유지 — 함께 바꾸지 말 것(같은 확정 사항). */
.btn--accent{background:var(--yellow-500);color:var(--ink)}
.btn--outline{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.btn--outline:hover{background:var(--bg)}
.btn--lg{height:52px;padding-inline:24px;font-size:var(--fs-body-lg);gap:6px}
.btn--icon{width:52px;height:52px;flex:none;border:1px solid var(--line)}
.btn--icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.detail-hero__cta .btn--accent{flex:1}
.detail-hero__cta .btn--outline{flex:none}

/* ---------- 공통 섹션(소개·일정 등 모듈 헤더) ---------- */
.detail-section{padding-block:32px;border-top:1px solid var(--line)}
.detail-section__head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.detail-section__icon{width:28px;height:28px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink)}
.detail-section__icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.detail-section__title{font-size:18px;font-weight:700}
.detail-prose{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);white-space:pre-line}
.detail-prose small{display:block;margin-top:10px;font-size:var(--fs-caption);color:var(--grey)}

/* 타임라인(시간 + 설명 리스트) */
.detail-timeline{list-style:none;display:flex;flex-direction:column}
.detail-timeline__row{display:flex;gap:20px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.detail-timeline__row:last-child{border-bottom:1px solid var(--line)}
.detail-timeline__time{flex:0 0 76px;font-size:var(--fs-body-sm);font-weight:700;color:var(--ink)}
.detail-timeline__desc{font-size:var(--fs-body-sm);color:var(--ink)}
.detail-timeline__row--highlight .detail-timeline__time,
.detail-timeline__row--highlight .detail-timeline__desc{color:var(--detail-accent-deep);font-weight:700}

/* ---------- 공유 모달 (4종 공통 · home.css .modal 셸 재사용) ---------- */
.share-modal .modal__head{background:var(--white);border-bottom:1px solid var(--line);padding:20px 24px}
/* 제목 타이포는 home.css의 .modal__head h3(Utility 기본값)를 그대로 쓴다 — 260811 정리 전에는
   여기서 16px로 낮춰, 같은 역할인 검색·캘린더 제목(18px)과 어긋나 있었다. */
.share-modal .modal__body{padding:20px 24px 24px}
.share-options{list-style:none;display:flex;flex-direction:column;gap:4px}
.share-options__item{width:100%;padding:14px 8px;border-radius:12px;font-size:var(--fs-body-sm);font-weight:600;color:var(--ink);text-align:left}
.share-options__item:hover{background:var(--bg)}
.share-options__feedback{margin-top:12px;font-size:var(--fs-label);color:var(--grey)}
.share-options__feedback[hidden]{display:none}

/* 시설형 전용: 위치 지도 자리 표시자 */
.detail-map{aspect-ratio:16/7;border-radius:var(--r-lg);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:var(--fs-label);position:relative}
.detail-map__pin{width:14px;height:14px;border-radius:50%;background:var(--detail-accent)}

/* 시설형 전용: 사진 갤러리 */
/* 사진 갤러리 — home.css의 공용 .rail__track(가로 스크롤) 그대로 재사용해, 사진이 3장을 넘으면
   자동으로 캐러셀(화살표 노출)이 되고 3장 이하면 지금처럼 한 줄 그리드로 꽉 채워 보인다.
   overflow 여부에 따른 화살표 표시/숨김은 이미 있는 [data-rail] 공용 로직이 그대로 처리하므로
   갤러리 전용 JS를 새로 만들지 않는다. --gap-card만 갤러리 간격(16px)에 맞춰 이 트랙 안에서만 재정의. */
.detail-gallery{--gap-card:16px}
/* 260811: 폭을 형제 개수 기준 퍼센트(구 calc((100% - 32px)/3))에서 고정폭으로 변경 — 사진이
   1~2장뿐인 콘텐츠(신규 등록분 다수)에서 나머지 칸이 빈 여백으로 남아 레이아웃이 깨져 보이던
   문제를 해결한다. 카드형 레일(.card--wide 등)과 동일하게 항목 폭은 개수와 무관하게 고정하고,
   4장을 넘으면 기존 rail 가로 스크롤이 그대로 처리한다. */
.detail-gallery__item{flex:none;width:280px;aspect-ratio:4/3;border-radius:var(--r-media);background:var(--img,var(--neut-thumb));background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:10px;color:var(--soft);font-size:var(--fs-caption);cursor:zoom-in;border:0;text-align:left}
.detail-gallery__item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ---------- 갤러리 유튜브 카드 (260828) ----------
   같은 갤러리 레일(.detail-gallery .rail__track) 안에서 사진 카드와 섞어 쓰는 변형.
   iframe 플레이어·영상 모달·API 연동은 만들지 않는다 — 클릭하면 유튜브 원본을 새 창으로 연다.
   썸네일 원본 비율이 카드(4:3)와 달라도 내용이 잘리지 않게: 실제 썸네일은 contain 중앙 정렬,
   같은 이미지를 blur+cover 배경으로 깔아 빈 공간이 검은 여백처럼 보이지 않게 한다.
   radius·간격·카드 크기는 사진 카드 규격을 그대로 상속한다.
   등록 마크업 규격(운영·서버용 — server-handoff "갤러리" 항목과 동일):
   <a class="detail-gallery__item detail-gallery__item--youtube" href="{유튜브 URL}"
      target="_blank" rel="noopener" aria-label="{영상 제목}, 유튜브 새 창 열림">
     <img class="detail-gallery__yt-bg" src="{썸네일 경로}" alt="" aria-hidden="true">
     <img class="detail-gallery__yt-thumb" src="{썸네일 경로}" alt="">
     <span class="detail-gallery__yt-play" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M8 5.5V18.5L19 12L8 5.5Z" fill="currentColor"/></svg></span>
     <span class="detail-gallery__yt-title">{영상 제목 — 선택, 없으면 요소 생략}</span>
   </a>
   · data-gallery-open을 붙이지 않는다 — 사진 라이트박스 대상이 아니다(detail.js 무수정으로 자동 제외).
   · 썸네일은 로컬 자산 권장(assets/img/media/ 등) — 외부 핫링크는 유튜브 정책·속도에 종속된다. */
.detail-gallery__item--youtube{position:relative;overflow:hidden;padding:0;cursor:pointer;display:block;text-decoration:none}
.detail-gallery__yt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(16px) brightness(.72);transform:scale(1.2)}
.detail-gallery__yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.detail-gallery__yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.62);color:var(--white);
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.detail-gallery__yt-play svg{width:22px;height:22px;margin-left:2px}
.detail-gallery__item--youtube:hover .detail-gallery__yt-play{transform:translate(-50%,-50%) scale(1.1)}
.detail-gallery__yt-title{position:absolute;left:10px;right:10px;bottom:8px;color:var(--white);
  font-size:var(--fs-caption);font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.65);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* 시설형/체험형: 프로그램·예약 안내 카드 */
.detail-info-card{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg)}
/* 260819: 이 컴포넌트는 지금까지 섹션당 1장만 쓰여 세로 간격 규칙이 없었다. 놀라운지 상세에
   대통령배·그랑프리 날짜 행이 더해지며 연속 배치가 생겨 인접 규칙만 추가한다 — 1장짜리
   섹션에는 적용되지 않으므로 기존 화면은 그대로다. */
.detail-info-card + .detail-info-card{margin-top:12px}
/* 260829: 연결 콘텐츠의 Cover 썸네일을 --img로 받는다(카드 썸네일과 같은 훅) — 값이 없으면
   기존 키컬러 사각형이 그대로 폴백(§9 — 이미지 없는 프로그램 카드도 깨지지 않는다). */
.detail-info-card__icon{width:48px;height:48px;border-radius:12px;flex:none;
  background:var(--img, var(--detail-accent)) center/cover no-repeat}
.detail-info-card__body{flex:1}
.detail-info-card__title{font-size:var(--fs-body);font-weight:700}
.detail-info-card__desc{font-size:var(--fs-label);color:var(--grey);margin-top:2px}

/* 체험형/시즌형: 코스·동선 스텝 (개수가 유형마다 달라 auto-fit로 유연하게 배분) */
/* 리드 문단이 있는 코스 구성(시크릿웨이 등) — 문단과 카드 그리드 사이 숨통. 인접 결합자라
   리드 없는 기존 사용처(렛츠런투어·체험 구성 등)는 영향 없다(260829). */
.detail-prose + .detail-steps{margin-top:20px}
.detail-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.detail-steps__item{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.detail-steps__num{font-size:var(--fs-caption);font-weight:700;color:var(--detail-accent-deep)}
.detail-steps__title{font-size:var(--fs-body);font-weight:700;margin-top:8px}
.detail-steps__desc{font-size:var(--fs-label);color:var(--grey);margin-top:4px}

/* =========================================================
   모바일 ≤997 — 순서: 이미지 → 태그 → 제목 → 정보 → CTA → 소개 → 일정 → 연관 콘텐츠
   ========================================================= */
@media (max-width:997px){
  /* 260811: 데스크톱에서 키운 상단 진입 여백(32px)을 모바일에서는 12px로 되돌린다 —
     모바일 HOME의 첫 텍스트도 12px(.playnow{padding-top:12px})에서 시작하므로 같은 값으로 맞춘다.
     아래쪽 16px과 min-height(44px 터치 영역)은 그대로 둔다. */
  .detail-back{display:flex;padding-block:12px 16px}

  .detail-hero{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding-bottom:var(--gap-section)}
  .detail-hero__media{border-radius:var(--r-hero)}
  .detail-hero__title{font-size:24px}
  .detail-hero__info{gap:14px;padding-top:0}

  .detail-meta__row{column-gap:var(--sp-4)}
  /* 260820: 1열에서는 메타 목록 바로 아래에 첫 섹션(border-top)이 붙어 두 줄로 보인다 —
     닫는 선을 끄고 섹션 선 하나만 남긴다(위 .detail-timeline 주석 참고). */
  .detail-hero:has(+ .detail-section) .detail-meta__row:last-child{border-bottom:0}

  .detail-section{padding-block:24px}
  .detail-hero__cta{flex-wrap:wrap}

  .detail-gallery__item{width:160px}
  .detail-steps{grid-template-columns:1fr 1fr;gap:12px}
}

/* =========================================================
   태블릿 768~997 — GNB·뒤로가기 등 셸은 모바일이지만, 상세 히어로는 가로 공간이 충분하므로
   2단을 유지한다(1단으로 떨어지면 대표 이미지가 900px 가까이 늘어나 과도하게 커짐)
   ========================================================= */
@media (min-width:768px) and (max-width:997px){
  .detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .detail-hero__title{font-size:28px}
}

/* =========================================================
   사진 갤러리 확대 보기(Lightbox) — home.css의 .modal 셸(위치·딤·열림 상태) 그대로 사용,
   여기서는 어두운 배경 위 이미지 뷰어 레이아웃만 추가한다.
   ========================================================= */
.lightbox-modal .modal__dim{background:rgba(0,0,0,.85)}
.lightbox-modal__box{position:relative;max-width:min(92vw,960px);max-height:88vh;display:flex}
.lightbox-modal__img{max-width:100%;max-height:88vh;border-radius:var(--r-sm);display:block;object-fit:contain;margin:auto}
.lightbox-modal__close{position:absolute;background:rgba(255,255,255,.9);color:var(--ink)}
/* 히트 영역 확장(260806) — 공용 .modal__close(34×34)를 그대로 쓰는데 라이트박스는 주변이 어두운
   빈 공간이라 넓힐 여유가 크다. 원 지름은 34px 그대로 두고 누를 면적만 44×44로 맞춘다. */
.lightbox-modal__close::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%}
.lightbox-modal__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;flex:none;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.lightbox-modal__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lightbox-modal__nav--prev{left:12px}
.lightbox-modal__nav--next{right:12px}
.lightbox-modal__count{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);color:var(--white);font-size:var(--fs-label);white-space:nowrap}
@media (max-width:997px){
  .lightbox-modal__nav--prev{left:6px}
  .lightbox-modal__nav--next{right:6px}
}


/* ===== [확정 · 260820] 상세 2단 — sticky "방문 정보 카드" (전 상세 31개 공통) =====
   NOL 티켓형 2단 레퍼런스를 우리 서비스에 맞게 재해석 — NOL의 오른쪽 레일은 "예매 카드"라
   모든 상품에 거래가 있어야 성립하지만, 이 서비스의 목적 액션은 방문이다. 레일을 "방문 정보
   카드"(지역·운영시간·문의·상태·공유·좋아요, 예약 URL이 있는 콘텐츠만 예약 슬롯)로 정의해
   어떤 콘텐츠든 카드가 비지 않는다. 260819 프로토(2페이지) → 260820 클라이언트 확정으로
   .detail-page 전체(상세 30 + 코스 상세)로 승격. 마크업은 옮기지 않았다 —
   .detail-hero{display:contents}로 media/info를 페이지 그리드에 직접 배치한다.
   롤백 지점: git tag backup-before-2col-260820 */
/* ⚠ 사이트 공통 데스크톱 breakpoint(998px) 그대로다 — 한때 1200px로 올렸다가 되돌렸다.
   올렸던 이유는 좁은 칼럼에서 "카드 높이에 맞춘" 이미지가 세로로 길어지는 문제였는데,
   이미지를 4:3 고정으로 바꾸면서 그 이유가 사라졌다. 반대로 1200 기준을 두면 1000~1199
   창(레티나 반폭 등 실사용 폭)에서 2단이 통째로 사라져 "예전 디자인으로 롤백된 것처럼"
   보인다는 리포트가 있었다 — §27 공통 breakpoint를 벗어나지 않는다. */
@media (min-width:998px){
  /* ⚠ div.container로 한정 — "함께 보면 좋아요"/"방문정보"는 <section class="section container">라
     main > .container에 함께 걸려 섹션 자체가 2단 그리드가 돼 정렬이 깨진다(실제 발생·수정). */
  /* 카드 폭 — 320px까지 줄면 메타 값이 두세 줄로 깨져 카드가 답답해진다는 피드백(260820).
     하한을 360으로 올리고 넓은 화면에서 420까지 키운다. */
  .detail-page main > div.container{display:grid;
    grid-template-columns:minmax(0,1fr) clamp(360px,30vw,420px);
    column-gap:clamp(36px,4vw,56px);align-items:start;grid-auto-flow:row}
  .detail-page .detail-back{grid-column:1 / -1;grid-row:1}
  .detail-page .detail-hero{display:contents}
  /* 코스 상세는 hero가 #courseDetailRoot(JS 렌더 루트) 안에 있어 이 래퍼도 그리드에서
     투명해야 media/info가 컬럼에 배치된다. empty state는 래퍼 밖이라 무관. */
  .detail-page--course #courseDetailRoot{display:contents}
  /* 이미지는 정방형(1:1) 고정 — 칼럼 폭에 비례해 통째로 커지고 작아지기만 한다(폭에 따라
     가로세로가 널뛰지 않게, 260820 원칙 유지). 260822 4:3 → 1:1: 모바일이 정방형 풀폭이라
     창을 데스크톱으로 키우는 순간 4:3 반토막(965 → 593px 높이)으로 꺼져 보였다 — "웹에서 더
     시원하게 커져야 한다"(클라이언트). 1:1이면 모바일과 비율이 같아 폭만 달라지고, 1440에서
     791×791로 화면을 채운다. ⚠ 카드 높이와 억지로 맞추지 않는다는 원칙은 그대로다: 맞추려면
     둘 중 하나가 콘텐츠와 무관한 높이를 갖게 되고, 실제로 카드가 늘어나 CTA가 저 아래로
     떨어지는 어색한 여백이 생겼다(260820 철회 — 관련 JS 동기화 스크립트도 함께 제거). */
  .detail-page .detail-hero__media{grid-column:1;grid-row:2;margin-bottom:40px;width:100%;
    aspect-ratio:1/1;height:auto}
  /* 260822: 하단 추천 레일(함께 보면 좋아요 · 같은 취향으로 더 보기)은 항상 정확히 3장이다
     (detail.js 규칙). 카드가 가로 스크롤 레일용 고정폭(240px)이라 넓은 화면에서 오른쪽이 텅 비어
     "여백이 크다"(클라이언트) — 3장이 컨테이너 폭을 꽉 채우도록 폭을 3등분으로 재정의한다.
     스크롤이 필요 없어지므로 화살표·페이드는 wireRailArrows가 알아서 숨긴다(넘침 없음 판정).
     모바일(≤997)은 기존 가로 스크롤 레일 그대로다. */
  .detail-page section[data-related] .card--pick,
  .detail-page section[data-theme-related] .card--pick{
    width:calc((100% - var(--gap-card,32px) * 2) / 3)}

  /* 본문 섹션은 전부 왼쪽 컬럼으로 — auto-placement가 col2(카드 점유)를 건너뛴다 */
  .detail-page main > div.container > .detail-section{grid-column:1}
  /* 방문 정보 카드 — 기존 hero info를 그대로 카드화(sticky). 행 span을 넉넉히 잡아
     오른쪽 컬럼 전체를 차지한다(남는 implicit row는 높이 0이라 무해). */
  .detail-page .detail-hero__info{grid-column:2;grid-row:2 / span 40;/* 폴백 — home.js가 실제 행 수로 재설정한다(빈 행 유령 높이 방지, 260822) */;align-self:start;
    position:sticky;top:96px;
    /* ⚠ top 96 = GNB 80 + 여유 16. 공지 바가 떠 있는 동안은 아래 :has() 규칙이 148로 내린다(260828) */
border:1px solid var(--line);border-radius:var(--r-xl);
    padding:26px;background:var(--white)}
  /* 공지 바(sticky, GNB 80 + 바 52)가 노출 중이면 정보 카드가 그 아래에 멈추도록 — 닫으면(hidden) 96으로 복귀 */
  .detail-page:has(.detail-notice:not([hidden])) .detail-hero__info{top:148px}

  /* ---- 카드 CTA 위계 (260820 확정) — 최대 3개: 예약하기 · 공유 · 좋아요 ----
     · 버튼이 하나뿐이어도 가로는 항상 꽉 채운다(카드 안에서 작은 버튼이 떠 보이지 않게)
     · 예약(.btn--accent)이 있으면 그게 주 버튼(남는 폭 전부), 공유·좋아요는 아이콘 정사각
     · 예약이 없으면 공유가 주 버튼, 좋아요만 아이콘 — 우선순위 예약 > 공유 > 좋아요
     · 데스크톱 카드에서는 모바일 바(52px)보다 한 단계 크게(56px)
     실제로 보이는 버튼 수는 콘텐츠(예약 URL 유무)와 로그인 상태(좋아요)에 따라 달라진다 —
     :has()로 마크업 그대로 두고 조합만 판별한다(§9: 없는 버튼은 자리도 남기지 않는다). */
  .detail-page .detail-hero__cta{flex-wrap:nowrap;margin-top:8px}
  .detail-page .detail-hero__cta > .btn{height:56px}
  .detail-page .detail-hero__cta > .btn--accent{flex:1 1 auto;min-width:0}
  /* 예약이 있는 경우: 보조 액션은 아이콘만 */
  .detail-page .detail-hero__cta:has(.btn--accent) .btn--outline{flex:0 0 56px;width:56px;
    padding:0;font-size:0;gap:0}
  /* 예약이 없는 경우: 공유가 주 버튼(가로 채움), 좋아요가 함께 있으면 좋아요만 아이콘 */
  .detail-page .detail-hero__cta:not(:has(.btn--accent)) [data-share-open]{flex:1 1 auto;min-width:0}
  .detail-page .detail-hero__cta:not(:has(.btn--accent)) .btn-like{flex:0 0 56px;width:56px;
    padding:0;font-size:0;gap:0}
  .detail-page .detail-hero__cta .btn svg{width:20px;height:20px;flex:none}
}
@media (max-width:997px){
  /* 모바일: CTA(예약·공유·좋아요)를 NOL처럼 하단 고정 바로 — 마크업 이동 없이 기존
     .detail-hero__cta를 fixed로 띄운다. 예약 버튼이 없는 콘텐츠는 공유·좋아요만 나온다
     (§9 — 없는 버튼을 자리로 남기지 않음). CTA 자체가 없는 코스 상세는 바가 아예 없다. */
  .detail-page .detail-hero__cta{position:fixed;left:0;right:0;bottom:0;z-index:55;
    margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--line);flex-wrap:nowrap}
  .detail-page .detail-hero__cta .btn{flex:1;min-width:0;white-space:nowrap}
  /* CTA 위계 — 예약 > 공유 > 좋아요 (클라이언트 확정, 데스크톱 카드와 같은 규칙).
     · 예약이 있으면: 예약이 주 버튼(남은 폭 전부), 공유·좋아요는 52px 아이콘.
     · 예약이 없으면: **공유가 주 버튼, 좋아요는 하트 아이콘만**(260821 — 이전 "반반"은 위계가
       없어 보인다는 피드백). 좋아요는 어느 경우든 아이콘만이다.
     향후 예약 버튼은 옐로우 키컬러로 쓸 예정, 공유는 현 아웃라인 타입 유지(클라이언트 메모). */
  .detail-page .detail-hero__cta:has(.btn--accent) .btn--outline,
  .detail-page .detail-hero__cta .btn-like{flex:0 0 52px;padding:0;font-size:0;gap:0}
  .detail-page .detail-hero__cta:has(.btn--accent) .btn--outline svg,
  .detail-page .detail-hero__cta .btn-like svg{width:20px;height:20px}
  /* 마우스/터치로 누른 뒤 남는 포커스 링 차단 — 키보드 :focus-visible은 그대로(칩과 같은 방식) */
  html[data-input="pointer"] .detail-hero__cta .btn:focus-visible{outline:none}
  /* 바에 가리지 않게 본문 하단 여유 + FAB 스택을 바 위로 — CTA 바가 있는 페이지만(코스 상세 제외) */
  .detail-page:has(.detail-hero__cta) main{padding-bottom:76px}
  .detail-page:has(.detail-hero__cta) .fab-stack{bottom:calc(72px + env(safe-area-inset-bottom))}
}