/*
 * 2026-10-28 Figma «03.venue/place» 홈 새 섹션 — 웨딩홀 홈(3024:60301) · 플레이스 홈(3024:60502) 공용.
 *   · 추천(venue-home-recommend)   — 카드는 목록과 같은 venue-filter-card(venue-filter-results.css)
 *   · 영상 피처(venue-home-feature) — 왼쪽 썸네일 5 + 큰 영상 + 업체명/지역 (60310)
 *   · 시크릿 토크(venue-home-talk)   — 4열 × 2줄 글 카드 (60315)
 *   데이터는 모두 HQ «노출 영역» 지정분 — 지정이 없으면 섹션을 그리지 않는다(앱).
 */

/* ── 추천 ─────────────────────────────────────── */
.venue-home-content > .venue-home-recommend {
  margin-top: 0;
}

/* Figma 3024:60306 — 추천 블록 아래 여백(다음 섹션까지 약 80px) */
.venue-home-recommend {
  padding-bottom: 40px;
}

/* ── 영상 피처 ─────────────────────────────────── */
.venue-home-feature {
  display: flex;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.venue-home-feature__box {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--semantic-bg, #f7f7f7);
}

.venue-home-feature__thumbs {
  display: flex;
  width: 108px;
  flex: 0 0 auto;
  flex-direction: column;
  /* 5장보다 적으면 위에서부터 채운다(벌어지지 않게) */
  justify-content: flex-start;
  gap: 6px; /* 2026-10-31 Figma(3024:60557) — 예전 10 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.venue-home-feature__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

/* 2026-10-31 Figma — 사진은 칸을 꽉 채우고(모서리 8) 고른 것만 «안쪽» 3px 진한 테두리를 사진 위에 겹친다
   (예전: 바깥 4px 테두리가 사진을 안으로 밀어 고른 사진만 작아 보였다). */
.venue-home-feature__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.venue-home-feature__thumb::after {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: 8px;
  content: "";
  pointer-events: none;
}

.venue-home-feature__thumb[aria-current="true"]::after {
  border-color: var(--neutral-tx1-hero, #1a1a1a);
}

.venue-home-feature__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--semantic-bg, #f7f7f7);
}

.venue-home-feature__media > img,
.venue-home-feature__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.venue-home-feature__sound {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.venue-home-feature__sound img {
  width: 13px;
  height: 12px;
}

.venue-home-feature__credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  margin: 0;
  color: rgba(242, 242, 242, 0.6);
  font-size: 10px;
  line-height: 1.5;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

.venue-home-feature__title {
  display: flex;
  width: 360px;
  max-width: 360px;
  flex: 0 1 360px;
  align-items: flex-end;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.venue-home-feature__title-inner {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.venue-home-feature__name {
  display: flex;
  min-width: 97px;
  flex: 1 1 0;
  flex-direction: column;
}

.venue-home-feature__name strong {
  overflow: hidden;
  color: var(--neutral-tx2-title, #444);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-home-feature__name span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--neutral-tx2-title, #444);
  font-size: 14px;
  line-height: 20px;
}

.venue-home-feature__name span img {
  width: 12px;
  height: 12px;
}

.venue-home-feature__chevron {
  width: 10px;
  height: 20px;
}

/* ── 시크릿 토크 ────────────────────────────────── */
.venue-home-talk {
  display: flex;
  width: 100%;
  max-width: 1280px;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.venue-home-talk__head {
  display: flex;
  align-items: center;
  gap: 20px;
  color: inherit;
  text-decoration: none;
}

.venue-home-talk__head-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.venue-home-talk__head h2 {
  margin: 0;
  color: var(--neutral-tx1-hero, #1a1a1a);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.venue-home-talk__head-text > span {
  color: var(--neutral-tx2-title, #444);
  font-size: 14px;
  line-height: 20px;
}

.venue-home-talk__head > img {
  width: 10px;
  height: 20px;
}

.venue-home-talk__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.venue-home-talk__card {
  display: flex;
  box-sizing: border-box;
  height: 100%;
  flex-direction: column;
  justify-content: center; /* 2026-10-30 — 메인 «시크릿 공간» 카드와 같게 세로 가운데(카드 높이는 줄에서 가장 긴 글에 맞춘다) */
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--semantic-bg-hover, #e8e8e8);
  border-radius: 8px;
  color: var(--neutral-tx2-title, #444);
  text-decoration: none;
}

.venue-home-talk__card:hover {
  background: var(--semantic-bg, #f7f7f7);
}

.venue-home-talk__card img {
  width: 17px;
  height: 15px;
}

.venue-home-talk__card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 1319px) {
  .venue-home-feature,
  .venue-home-talk {
    width: auto;
    /* 2026-10-29 — 숫자로(반응형 토큰이 모바일에서 14 로 줄어 Figma 20 과 어긋났다) */
    margin-right: 20px;
    margin-left: 20px;
  }
}

@media (max-width: 1023px) {
  .venue-home-feature__title {
    width: 220px;
    flex-basis: 220px;
  }

  .venue-home-talk__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Figma 390(3024:60549) — 썸네일 줄 → 영상 → 업체명 / 토크 2열 */
@media (max-width: 767px) {
  /* 2026-10-29 Figma 390 — 회색 판이 화면 끝까지(모서리 0) · 안쪽 20 · 위아래 20 · 썸네일 65(간격 6 — 2026-10-31) */
  .venue-home-feature {
    margin-right: 0;
    margin-left: 0;
    padding: 20px 0;
  }

  .venue-home-feature__box {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 0;
  }

  .venue-home-feature__thumbs {
    width: 100%;
    flex-direction: row;
    gap: 6px;
  }

  /* 2026-10-29 — 늘어나는 단위는 버튼이 아니라 <li>(줄의 자식)다. 버튼에만 flex 를 주면 <li> 가 사진 원래 비율로 폭을 잡아
     썸네일 크기가 제각각이 됐다(가로 사진 63 · 4:5 사진 49). 칸을 똑같이 나누고 버튼은 칸을 채운다. */
  .venue-home-feature__thumbs > li {
    flex: 1 1 0;
    min-width: 0;
  }

  /* 2026-11-10 제보 — 지역에 따라 영상 업체가 1~4곳이면 칸이 늘어나 썸네일 한 장이 줄 전체(350px)를 차지했다.
     칸 폭은 언제나 «5장 기준»(간격 6 × 4 = 24). 모자라면 왼쪽부터 채우고 오른쪽은 빈다. */
  .venue-home-feature__thumbs > li {
    flex: 0 0 calc((100% - 24px) / 5);
    max-width: calc((100% - 24px) / 5);
  }

  .venue-home-feature__thumb {
    width: 100%;
  }

  /* 세로 배치에서 flex:1 1 0 이면 높이가 0 이 된다 — 폭 기준 4:3 으로 */
  .venue-home-feature__media {
    width: 100%;
    flex: none;
  }

  .venue-home-feature__title {
    width: auto;
    max-width: none;
    flex: none;
  }

  .venue-home-talk__card {
    padding: 16px;
  }
}

/* ── 플레이스 홈 «트렌드 매거진» — 메인 카드(index-trend-magazine)를 3열 격자로(Figma 3024:60511, 카드 420×592) ── */
/* 2026-10-29 — 플레이스 홈 안에서는 메인 카드의 모바일 좌우 20 을 빼고(바깥 main 이 20 을 준다) — 특정도를 올려 CSS 순서와 무관하게 */
.place-home-main .index-trend-magazine,
.place-home-magazine {
  padding: 0;
}

.place-home-magazine .index-trend-magazine__inner {
  padding: 0;
}

.place-home-magazine__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.place-home-magazine .index-trend-magazine__card {
  aspect-ratio: 420 / 592;
}

@media (max-width: 767px) {
  .place-home-magazine__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .place-home-magazine .index-trend-magazine__card {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }
}

/* 플레이스 홈은 섹션을 .venue-home-content(1280, 좁은 폭에서 자체 여백)로 감싼다 — 그 안에서는 섹션 여백을 겹쳐 주지 않는다 */
.place-home-main .venue-home-recommend {
  margin-top: 40px;
}

@media (max-width: 1319px) {
  .venue-home-content > .venue-home-recommend,
  .venue-home-content > .venue-home-feature,
  .venue-home-content > .venue-home-talk {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

/* 2026-10-29 Figma 390 — 플레이스 홈은 main 이 좌우 20 을 주므로 영상 피처 회색 판을 화면 끝까지 꺼낸다(위 «여백 겹치지 않기» 뒤에) */
@media (max-width: 767px) {
  .venue-home-content > .venue-home-feature {
    width: auto;
    margin-right: -20px;
    margin-left: -20px;
  }
}

/* 2026-11-02 요청 — 썸네일 열 아랫줄을 보기 영역(영상)과 맞춘다(768px 이상).
   썸네일은 108 정사각 고정이라 5장 = 564px 인데 영상 칸은 폭에 따라 더 크다(1600px 579) → 5장이면 열 높이를 영상 칸에 맞추고 간격을 벌린다.
   5장보다 적으면 예전처럼 위에서부터 채운다. */
@media (min-width: 768px) {
  .venue-home-feature__box {
    align-items: stretch;
  }
  .venue-home-feature__thumbs:has(> li:nth-child(5)) {
    justify-content: space-between;
  }
}

/* 2026-11-02 요청 — 플레이스 홈 «추천 플레이스» 카드 사진 = 3:4 세로형(목록 카드 공용 규칙은 4:3 — 이 섹션만 덮는다). */
.venue-home-recommend .place-home-filter-results__grid .venue-filter-card__media {
  aspect-ratio: 3 / 4;
}