/* =========================================
   이음 즐길거리 (목록·상세) — Figma 254:11617 / 254:11665
   공통 리셋·헤더·아이콘·GNB 는 tokens.css 사용
========================================= */
.app--gnb{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

.xbody{padding:16px 0 0;display:flex;flex-direction:column;gap:30px}

/* 검색 인풋 */
.xsearch{margin:0 16px;height:44px;border:1px solid var(--g91);border-radius:9999px;display:flex;align-items:center;
  gap:13px;padding:0 18px;color:var(--g400);font-size:15px;font-weight:500;letter-spacing:-.375px}
.xsearch i{font-size:20px;color:var(--g500)}

/* 상단 필터 칩 — 칩(.chip/.chip--on)은 공통 tokens.css 사용 */
.xchips{display:flex;gap:8px;overflow-x:auto;padding:0 16px} /* 칩 간격 8px — 앱 공통 */
.xchips::-webkit-scrollbar{display:none}

/* 섹션 헤더 — 공통 .sechead/.fs-title (tokens.css) 위 페이지 여백 보정
   sechead 는 우측 액션(전체삭제 등)과의 44px 정렬을 위해 세로 중앙 정렬하지만,
   이 페이지의 head 들은 액션이 없어 그 여백만큼 타이틀-리스트 간격이 불필요하게 벌어진다.
   h2 를 박스 높이(44px)만큼 line-height 로 채워 슬랙을 없애고(홈 .sec__title 과 동일 패턴),
   gap 도 홈의 8px 기준에 맞춘다 */
.xsec{display:flex;flex-direction:column;gap:8px}
.xsec__head{padding:env(safe-area-inset-top) 16px 0}
.xsec__head h2{line-height:44px}
.xsec__title{padding:0 16px}

/* 에디터 픽 대형 카드 */
.editorpick{margin:0 16px;position:relative;height:200px;border-radius:8px;overflow:hidden;background:var(--blue-500)}
.editorpick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.editorpick::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 10%,rgba(0,0,0,.4) 71%)}
.editorpick__txt{position:absolute;left:20px;bottom:20px;z-index:2;color:var(--white);display:flex;flex-direction:column;gap:8px}
.editorpick__cat{font-size:14px;color:var(--g50);letter-spacing:-.35px}
.editorpick__t{font-size:16px;font-weight:600;letter-spacing:-.4px}
.editorpick__a{font-size:14px;color:var(--g50);letter-spacing:-.35px}

/* 지금 뜨는 그리드 — 텍스트는 공통 .fs-name/.fs-sub (tokens.css) 사용 */
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px} /* 카드 리스트 간격 12px — 앱 공통 */
.xgcard{display:flex;flex-direction:column;gap:8px;min-width:0}
.xgcard__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.xgcard__img{height:140px;border-radius:8px;overflow:hidden;background:var(--blue-500)}
.xgcard__img img{width:100%;height:100%;object-fit:cover}

/* 에디터 추천 코스 (가로 스크롤 · 중앙 스냅 카드) */
/* 회색 밴드 내부 상하 16px(위 패딩·아래 coursescroll 패딩)을 음수 마진으로 상쇄해
   이웃 섹션과의 실제 사잇값을 다른 콘텐츠 간격(30px)과 동일하게 맞춘다 */
.coursebox{background:var(--g50);padding:16px 0 0;margin:-16px 0;display:flex;flex-direction:column;gap:8px}
.coursebox__head{padding:0 16px}
.coursebox__head h2{line-height:44px} /* xsec__head 와 동일 — 세로 중앙 정렬 슬랙 제거 */
/* 좌측 정렬 가로 스크롤: 좌측 여백 16px 고정, 다음 카드가 살짝 보이도록 카드폭 축소 */
/* top padding 은 0 — 위쪽 여백은 .coursebox 의 gap(8px)이 담당(타이틀-리스트 간격 통일).
   좌우·하단 16px 은 유지(카드 좌측 시작 여백 · 그레이밴드 하단 대칭용) */
.coursescroll{--cw:min(300px,80vw);display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding-left:16px;padding:0 16px 16px;scrollbar-width:none}
.coursescroll::-webkit-scrollbar{display:none}
.coursecard{flex:0 0 var(--cw);background:var(--white);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(17,17,17,.09),0 1px 3px rgba(17,17,17,.05);
  scroll-snap-align:start}
/* 이미지 상단 + 코스 유형 배지 오버레이 */
.coursecard__img{position:relative;height:180px;overflow:hidden;background:var(--blue-500)}
.coursecard__img img{width:100%;height:100%;object-fit:cover}
.coursecard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 45%,rgba(0,0,0,.32))}
.coursecard__badge{position:absolute;left:12px;top:12px;z-index:1;padding:6px 11px;border-radius:9999px;
  background:rgba(255,255,255,.9);color:var(--blue-500);font-size:12px;font-weight:700;letter-spacing:-.3px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 텍스트는 공통 .fs-name/.fs-sub (tokens.css) 사용 — 레이아웃만 */
.coursecard__txt{display:flex;flex-direction:column;gap:6px;padding:14px 16px 0}
.coursecard__route{display:flex;align-items:flex-start;gap:5px;line-height:1.45}
.coursecard__route i{flex:none;margin-top:2px;color:var(--blue-500)}
.coursecard__meta{display:flex;align-items:center;gap:14px;padding:12px 16px 16px;margin-top:auto}
.coursecard__meta span{display:flex;align-items:center;gap:4px}

/* 더 많은 이야기 리스트 */
.storylist{margin:0 16px;background:var(--white);border-radius:8px;}
.storyrow{display:flex;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--g200)}
.storyrow:last-child{border-bottom:0}
/* 썸네일은 공통 .thumb .thumb--70 (tokens.css) 사용 */
.storyrow__body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} /* 남은 폭 전체 차지 → foot 이 행 끝까지 벌어짐 */
/* 텍스트는 공통 .fs-label/.fs-name/.fs-sub (tokens.css) 사용 */
/* 지역(좌) · 조회수·댓글수(우) — 양끝 정렬 */
.storyrow__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.storyrow__area{min-width:0}
.storyrow__counts{flex:none;display:flex;align-items:center;gap:10px}
.storyrow__meta{flex:none;display:flex;align-items:center;gap:3px}
.storyrow__meta i{font-size:14px}

/* =========================================
   상세
========================================= */
/* 텍스트는 공통 .fs-* (tokens.css) 사용 — 레이아웃 보정만 유지 */
.xd{padding:16px;display:flex;flex-direction:column;gap:20px}
.xd-head{display:flex;flex-direction:column;gap:8px}
.xd-meta{display:flex;align-items:center;justify-content:space-between}
.xd-meta__left{display:flex;align-items:center;gap:8px}
.xd-meta__item{display:flex;align-items:center;gap:4px}
.xd-meta__item i{font-size:16px}
.xd-hero{height:140px;border-radius:8px;overflow:hidden;background:var(--blue-500)}
.xd-hero img{width:100%;height:100%;object-fit:cover}
.xd-text{line-height:22px}
.xd-imgs{display:flex;gap:8px}
.xd-imgs>div{flex:1;height:140px;border-radius:8px;overflow:hidden;background:var(--blue-500)}
.xd-imgs img{width:100%;height:100%;object-fit:cover}

/* 근처 고택 박스 */
.nearbox{background:var(--g50);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px}
.nearbox__label{display:flex;align-items:center;gap:4px}
.nearbox__label i{font-size:16px}
.nearbox__card{display:flex;gap:12px;align-items:center}
/* 썸네일은 공통 .thumb .thumb--56 (tokens.css) 사용 */
.nearbox__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.nearbox__btns{display:flex;gap:8px}

/* 댓글 — 아바타는 공통 .icirc, 텍스트는 공통 .fs-* (tokens.css) 사용 */
.cmt-tab{border-bottom:1px solid var(--g100);padding:8px 0 10px}
.cmt-tab b{color:var(--blue-500);font-weight:500}
.cmt{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cmt__top{display:flex;align-items:center;justify-content:space-between}
.cmt__who{display:flex;align-items:center;gap:8px}
.cmt__more{width:20px;height:20px;display:grid;place-items:center;color:var(--g500)}
.cmt__body{padding-left:48px;display:flex;flex-direction:column;gap:8px}
.cmt__reply{display:flex;align-items:center;gap:2px}
.cmt__reply i{font-size:14px}

/* =========================================
   태블릿 (600px~) — 그리드 3열·이미지 비율 유지
========================================= */
@media (min-width:600px){
  .xgrid{grid-template-columns:repeat(3,1fr)}
  .xgcard__img{height:auto;aspect-ratio:4/3}
  .editorpick{height:260px}
  .xd-hero{height:220px}
  .xd-imgs>div{height:180px}
}