/*
  list-page.css
  ------------------------------------------------------------
  restaurants.html, shopping.html처럼 "Outdoor 섹션에서만 연결되는
  간단한 목록형 페이지"에서 공통으로 쓰는 스타일입니다.
  두 페이지가 구조는 같고 내용(제목/설명/아이템 목록)만 다르기 때문에,
  스타일과 렌더링 로직(js/list-page.js)을 공용으로 만들었습니다.
*/

.list-page{ padding:150px 24px 120px; max-width:760px; margin:0 auto; }

.list-page-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-en-main); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(57,49,32,.55); margin-bottom:40px; transition:color .25s var(--ease);
}
.list-page-back:hover{ color:var(--ink); }
.list-page-back svg{ width:14px; height:14px; }

.list-page h1{
  font-family:var(--font-kr); font-size:clamp(26px, 3.6vw, 36px);
  color:var(--ink); margin-bottom:14px;
}
.list-page-intro{
  font-family:var(--font-kr); font-size:14.5px; line-height:1.8;
  color:rgba(57,49,32,.65); margin-bottom:48px; max-width:520px;
}

.list-page-items{ display:flex; flex-direction:column; }
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; border-top:1px solid var(--line);
}
.list-page-items li:last-child .list-item{ border-bottom:1px solid var(--line); }
.list-item-name{ font-family:var(--font-kr); font-size:17px; font-weight:700; color:var(--ink); }
.list-item-desc{
  font-family:var(--font-kr); font-size:13px; color:rgba(57,49,32,.6);
  margin-top:6px; line-height:1.6;
}
.list-item-link{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:all .25s var(--ease);
}
.list-item-link:hover{ background:var(--ink); color:var(--foam); }
.list-item-link svg{ width:15px; height:15px; }

@media (max-width:640px){
  .list-page{ padding:120px 20px 90px; }
  .list-item{ align-items:flex-start; }
}