/*
 * 칩 필터(chip-filter) — 2026-10-28 Figma «03.venue/place» filter(3024:63268 · 63414).
 *   웨딩홀·플레이스 목록 / 이벤트·특가 공용. «지역(시/도) · 지역(구/군) 드롭다운 + 칩 한 줄» + 고른 조건 줄(초기화).
 *   칩 묶음은 화면마다 다르다 — 웨딩홀 = 형태(예식 진행 방식) · 플레이스 = 스냅·기타 «종류» · 이벤트 = 유형(플레이스 이벤트는 칩 없음).
 *   2026-10-30 — 칩은 «모두 켜짐» 에서 시작해 끈다 · 고른 조건 줄에는 지역만 · 검색칸 없음 · 모바일 3열.
 *   동작은 assets/js/components/chip-filter.js(데모 — 앱은 React 로 다시 만든다).
 */

.chip-filter {
  display: flex;
  width: 100%;
  max-width: 1280px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0 auto;
  padding: 20px 0 0 20px;
}

.chip-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.chip-filter__select {
  position: relative;
}

.chip-filter__trigger,
.chip-filter__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid var(--semantic-border-hover, #dadada);
  border-radius: var(--radius-sm, 8px);
  background: var(--semantic-white, #fff);
  color: var(--neutral-tx3-sub, #949494);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.chip-filter__trigger img {
  width: 11px;
  height: 10px;
  transition: transform 0.15s ease;
}

/* 고른 값이 있거나 펼친 드롭다운 · 고른 칩 = 진한 테두리 + 진한 글자 */
.chip-filter__trigger.is-selected,
.chip-filter__trigger[aria-expanded="true"],
.chip-filter__chip[aria-pressed="true"] {
  border-color: var(--neutral-tx2-title, #444);
  color: var(--neutral-tx1-hero, #1a1a1a);
}

.chip-filter__trigger:disabled {
  cursor: default;
  opacity: 0.6;
}

.chip-filter__options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-sm, 8px);
  background: var(--semantic-white, #fff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  list-style: none;
}

.chip-filter__options button {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--neutral-tx2-title, #444);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.chip-filter__options button:hover,
.chip-filter__options button[aria-selected="true"] {
  background: var(--semantic-bg, #f7f7f7);
}

.chip-filter__chips {
  display: contents;
}

/* 고른 조건 줄 — Figma filter-select-list(회색 바탕 · 10px · 라운드 8).
   2026-10-30 — 조건 글자와 «초기화» 를 세로 가운데로(예전 flex-end 라 한 줄일 때 어긋났다). 이 줄에는 지역만 나온다(칩은 안 나온다). */
.chip-filter__selected {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--semantic-bg, #f7f7f7);
}

.chip-filter__selected[hidden] {
  display: none;
}

.chip-filter__selected-list {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2026-10-30 제보 — 항목(li)이 바깥 line-height(24px)를 물려받아 «서울 ×» 가 줄 기준선으로 3px 내려가고 상자가 44px 였다(Figma 36). */
.chip-filter__selected-list,
.chip-filter__selected-list li {
  line-height: 16px;
}

.chip-filter__selected-list li {
  display: flex;
}

.chip-filter__selected-item,
.chip-filter__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.chip-filter__selected-item {
  color: var(--neutral-tx2-title, #444);
  font-weight: 500;
}

.chip-filter__selected-item img {
  width: 12px;
  height: 12px;
  padding: 1px;
}

.chip-filter__reset {
  color: var(--neutral-tx3-sub, #949494);
}

.chip-filter__reset img {
  width: 16px;
  height: 16px;
}

@media (max-width: 1319px) {
  .chip-filter {
    padding-right: var(--spacing-lg, 20px);
  }
}

@media (max-width: 767px) {
  .chip-filter {
    padding: 20px 20px 0;
  }
}

/* 필터 바로 아래 첫 섹션까지 60px — Figma body(필터 아래) 안 첫 블록 y=60 */
.chip-filter + section {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .chip-filter + section {
    margin-top: 40px;
  }
}

/* 2026-10-30 요청 — 지역 드롭다운 폭 고정(고르면 줄어들던 것) · 화살표 뒤집힐 때 움직임 없음.
   긴 이름(«용산/중구/종로», «강남/서초 외 2»)은 말줄임. */
.chip-filter__select .chip-filter__trigger {
  width: 130px;
  justify-content: space-between;
}

.chip-filter__select .chip-filter__trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-filter__select .chip-filter__trigger img {
  flex: none;
  transition: none;
}

/* 2026-10-30 요청 — 모바일(767px 이하)은 지역 드롭다운 둘 + 칩을 같은 폭 3열 격자로(Figma device=mobile). */
@media (max-width: 767px) {
  .chip-filter__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .chip-filter__select .chip-filter__trigger,
  .chip-filter__chip {
    width: 100%;
    min-width: 0;
  }

  .chip-filter__chip {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 2026-11-09 요청 — 360px 이하는 한 줄에 2개(3열이면 «지역 (시…)» «신규·리뉴얼 오프닝» 처럼 글자가 잘린다) */
@media (max-width: 360px) {
  .chip-filter__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2026-11-02 Figma «Venue / Venue Home Filter»(1311:130171·130185·130199 · 130213~243) — 위아래 간격.
   PC·태블릿: 히어로 → 80 → 칩 줄 → (10 → 고른 조건 줄) → 80 → 다음 섹션
   모바일: 히어로 → 20 → 칩 줄 → 20 → 다음 섹션 내용(웨딩홀 «가까운 베뉴» 는 안쪽 위 여백 20 이 그 몫) */
.venue-home-main .chip-filter {
  padding-top: 80px;
}
.venue-home-main .chip-filter + section {
  margin-top: 80px;
}
@media (max-width: 767px) {
  .venue-home-main .chip-filter {
    padding-top: 20px;
  }
  .venue-home-main .chip-filter + section {
    margin-top: 20px;
  }
  .venue-home-main .chip-filter + section.venue-home-nearby:not(.place-home-nearby) {
    margin-top: 0;
  }
}

/* 2026-11-02 요청 — 넓은 화면(1320px 이상)에서 칩 줄이 본문보다 20px 안쪽에서 시작했다(왼쪽 여백 20) → 본문 왼쪽 끝에 맞춘다.
   1319px 이하는 본문도 20px 안쪽이라 그대로 맞다. */
@media (min-width: 1320px) {
  .chip-filter {
    padding-left: 0;
  }
}