/* ═══════════════════════════════════════════════════════════════
   부산어디? — 구/군 컬러 시스템 & 카테고리 아이콘
   districts.css  |  v1.0  |  2026-04
   ═══════════════════════════════════════════════════════════════ */

/* ── 부산 16개 구/군 CSS 변수 ── */
:root {
  /* 구/군 대표 색상 */
  --district-haeundae:  #1E90A5;   /* 해운대구 — 바다빛        */
  --district-junggu:    #C0392B;   /* 중구     — 전통/영화     */
  --district-namgu:     #27AE60;   /* 남구     — 자연          */
  --district-seogu:     #2980B9;   /* 서구     — 송도바다      */
  --district-donggu:    #E67E22;   /* 동구     — 역사          */
  --district-busanjin:  #8E44AD;   /* 부산진구 — 번화가        */
  --district-dongrae:   #D35400;   /* 동래구   — 온천/역사     */
  --district-bukgu:     #16A085;   /* 북구     — 생태          */
  --district-gangseo:   #2C3E50;   /* 강서구   — 신항만        */
  --district-yeonje:    #F39C12;   /* 연제구   — 먹거리        */
  --district-suyeong:   #1ABC9C;   /* 수영구   — 광안리        */
  --district-sasang:    #7F8C8D;   /* 사상구   — 산업          */
  --district-saha:      #E74C3C;   /* 사하구   — 감천          */
  --district-geumjeong: #27AE60;   /* 금정구   — 산성          */
  --district-yeongdo:   #3498DB;   /* 영도구   — 섬/바다       */
  --district-gijang:    #2ECC71;   /* 기장군   — 자연/해산물   */

  /* 구/군 연한 배경색 (--10 계열) */
  --district-haeundae-10:  #e8f5f8;
  --district-junggu-10:    #fbeaea;
  --district-namgu-10:     #e9f7ef;
  --district-seogu-10:     #e8f1f8;
  --district-donggu-10:    #fdf2e6;
  --district-busanjin-10:  #f4ecf9;
  --district-dongrae-10:   #faeae0;
  --district-bukgu-10:     #e6f5f3;
  --district-gangseo-10:   #e8eaed;
  --district-yeonje-10:    #fef5e4;
  --district-suyeong-10:   #e7faf6;
  --district-sasang-10:    #edeeed;
  --district-saha-10:      #fdecea;
  --district-geumjeong-10: #e9f7ef;
  --district-yeongdo-10:   #e8f4fb;
  --district-gijang-10:    #eafaf1;

  /* 카테고리 색상 */
  --cat-beach:     #1E90A5;
  --cat-park:      #27AE60;
  --cat-temple:    #E67E22;
  --cat-market:    #F39C12;
  --cat-museum:    #8E44AD;
  --cat-seafood:   #2980B9;
  --cat-bbq:       #E74C3C;
  --cat-noodle:    #D35400;
  --cat-cafe:      #795548;
  --cat-hotel:     #2C3E50;
  --cat-pension:   #16A085;
  --cat-festival:  #C0392B;
  --cat-tour:      #1ABC9C;
  --cat-shopping:  #9B59B6;
  --cat-nature:    #2ECC71;
  --cat-history:   #BDC3C7;

  /* 공통 */
  --district-pill-radius:  999px;
  --district-badge-radius: 6px;
  --transition-fast:       150ms ease;
  --transition-base:       250ms ease;
}

/* ─────────────────────────────────────────
   1. .district-pill — 작은 컬러 pill
   ───────────────────────────────────────── */
.district-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         2px 10px;
  border-radius:   var(--district-pill-radius);
  font-size:       0.72rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  white-space:     nowrap;
  color:           #fff;
  background:      var(--pill-bg, #888);
  transition:      transform var(--transition-fast),
                   box-shadow var(--transition-fast);
  cursor:          default;
}

.district-pill:hover {
  transform:    translateY(-1px);
  box-shadow:   0 3px 10px rgba(0,0,0,.18);
}

/* 구/군별 pill 색상 */
.district-pill[data-district="해운대구"] { --pill-bg: var(--district-haeundae); }
.district-pill[data-district="중구"]     { --pill-bg: var(--district-junggu); }
.district-pill[data-district="남구"]     { --pill-bg: var(--district-namgu); }
.district-pill[data-district="서구"]     { --pill-bg: var(--district-seogu); }
.district-pill[data-district="동구"]     { --pill-bg: var(--district-donggu); }
.district-pill[data-district="부산진구"] { --pill-bg: var(--district-busanjin); }
.district-pill[data-district="동래구"]   { --pill-bg: var(--district-dongrae); }
.district-pill[data-district="북구"]     { --pill-bg: var(--district-bukgu); }
.district-pill[data-district="강서구"]   { --pill-bg: var(--district-gangseo); }
.district-pill[data-district="연제구"]   { --pill-bg: var(--district-yeonje); }
.district-pill[data-district="수영구"]   { --pill-bg: var(--district-suyeong); }
.district-pill[data-district="사상구"]   { --pill-bg: var(--district-sasang); }
.district-pill[data-district="사하구"]   { --pill-bg: var(--district-saha); }
.district-pill[data-district="금정구"]   { --pill-bg: var(--district-geumjeong); }
.district-pill[data-district="영도구"]   { --pill-bg: var(--district-yeongdo); }
.district-pill[data-district="기장군"]   { --pill-bg: var(--district-gijang); }

/* ─────────────────────────────────────────
   2. .district-badge — 배지 (카드 안 등)
   ───────────────────────────────────────── */
.district-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         4px 12px;
  border-radius:   var(--district-badge-radius);
  font-size:       0.78rem;
  font-weight:     700;
  color:           #fff;
  background:      var(--badge-bg, #888);
  box-shadow:      0 1px 4px rgba(0,0,0,.15);
  user-select:     none;
}

.district-badge .badge-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.district-badge[data-district="해운대구"] { --badge-bg: var(--district-haeundae); }
.district-badge[data-district="중구"]     { --badge-bg: var(--district-junggu); }
.district-badge[data-district="남구"]     { --badge-bg: var(--district-namgu); }
.district-badge[data-district="서구"]     { --badge-bg: var(--district-seogu); }
.district-badge[data-district="동구"]     { --badge-bg: var(--district-donggu); }
.district-badge[data-district="부산진구"] { --badge-bg: var(--district-busanjin); }
.district-badge[data-district="동래구"]   { --badge-bg: var(--district-dongrae); }
.district-badge[data-district="북구"]     { --badge-bg: var(--district-bukgu); }
.district-badge[data-district="강서구"]   { --badge-bg: var(--district-gangseo); }
.district-badge[data-district="연제구"]   { --badge-bg: var(--district-yeonje); }
.district-badge[data-district="수영구"]   { --badge-bg: var(--district-suyeong); }
.district-badge[data-district="사상구"]   { --badge-bg: var(--district-sasang); }
.district-badge[data-district="사하구"]   { --badge-bg: var(--district-saha); }
.district-badge[data-district="금정구"]   { --badge-bg: var(--district-geumjeong); }
.district-badge[data-district="영도구"]   { --badge-bg: var(--district-yeongdo); }
.district-badge[data-district="기장군"]   { --badge-bg: var(--district-gijang); }

/* ─────────────────────────────────────────
   3. .district-map-pin — 지도 마커
   ───────────────────────────────────────── */
.district-map-pin {
  position:       relative;
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  width:          36px;
  height:         36px;
  border-radius:  50% 50% 50% 0;
  transform:      rotate(-45deg);
  background:     var(--pin-bg, #888);
  box-shadow:     0 2px 8px rgba(0,0,0,.25);
  transition:     transform var(--transition-fast),
                  box-shadow var(--transition-fast);
  cursor:         pointer;
}

.district-map-pin:hover {
  transform:      rotate(-45deg) scale(1.15);
  box-shadow:     0 4px 14px rgba(0,0,0,.3);
}

.district-map-pin .pin-emoji {
  display:        inline-block;
  transform:      rotate(45deg);
  font-size:      1rem;
  line-height:    1;
}

.district-map-pin[data-district="해운대구"] { --pin-bg: var(--district-haeundae); }
.district-map-pin[data-district="중구"]     { --pin-bg: var(--district-junggu); }
.district-map-pin[data-district="남구"]     { --pin-bg: var(--district-namgu); }
.district-map-pin[data-district="서구"]     { --pin-bg: var(--district-seogu); }
.district-map-pin[data-district="동구"]     { --pin-bg: var(--district-donggu); }
.district-map-pin[data-district="부산진구"] { --pin-bg: var(--district-busanjin); }
.district-map-pin[data-district="동래구"]   { --pin-bg: var(--district-dongrae); }
.district-map-pin[data-district="북구"]     { --pin-bg: var(--district-bukgu); }
.district-map-pin[data-district="강서구"]   { --pin-bg: var(--district-gangseo); }
.district-map-pin[data-district="연제구"]   { --pin-bg: var(--district-yeonje); }
.district-map-pin[data-district="수영구"]   { --pin-bg: var(--district-suyeong); }
.district-map-pin[data-district="사상구"]   { --pin-bg: var(--district-sasang); }
.district-map-pin[data-district="사하구"]   { --pin-bg: var(--district-saha); }
.district-map-pin[data-district="금정구"]   { --pin-bg: var(--district-geumjeong); }
.district-map-pin[data-district="영도구"]   { --pin-bg: var(--district-yeongdo); }
.district-map-pin[data-district="기장군"]   { --pin-bg: var(--district-gijang); }

/* ─────────────────────────────────────────
   4. .district-card — 구/군 카드 하이라이트
   ───────────────────────────────────────── */
.district-card {
  border:           3px solid transparent;
  border-radius:    12px;
  background:       #fff;
  transition:       border-color var(--transition-base),
                    box-shadow var(--transition-base),
                    transform var(--transition-base);
  overflow:         hidden;
}

.district-card:hover {
  transform:    translateY(-3px);
  box-shadow:   0 8px 24px rgba(0,0,0,.12);
}

.district-card.is-active {
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}

/* border-color per district */
.district-card[data-district="해운대구"] { border-color: var(--district-haeundae); }
.district-card[data-district="해운대구"].is-active { background: var(--district-haeundae-10); }

.district-card[data-district="중구"]     { border-color: var(--district-junggu); }
.district-card[data-district="중구"].is-active { background: var(--district-junggu-10); }

.district-card[data-district="남구"]     { border-color: var(--district-namgu); }
.district-card[data-district="남구"].is-active { background: var(--district-namgu-10); }

.district-card[data-district="서구"]     { border-color: var(--district-seogu); }
.district-card[data-district="서구"].is-active { background: var(--district-seogu-10); }

.district-card[data-district="동구"]     { border-color: var(--district-donggu); }
.district-card[data-district="동구"].is-active { background: var(--district-donggu-10); }

.district-card[data-district="부산진구"] { border-color: var(--district-busanjin); }
.district-card[data-district="부산진구"].is-active { background: var(--district-busanjin-10); }

.district-card[data-district="동래구"]   { border-color: var(--district-dongrae); }
.district-card[data-district="동래구"].is-active { background: var(--district-dongrae-10); }

.district-card[data-district="북구"]     { border-color: var(--district-bukgu); }
.district-card[data-district="북구"].is-active { background: var(--district-bukgu-10); }

.district-card[data-district="강서구"]   { border-color: var(--district-gangseo); }
.district-card[data-district="강서구"].is-active { background: var(--district-gangseo-10); }

.district-card[data-district="연제구"]   { border-color: var(--district-yeonje); }
.district-card[data-district="연제구"].is-active { background: var(--district-yeonje-10); }

.district-card[data-district="수영구"]   { border-color: var(--district-suyeong); }
.district-card[data-district="수영구"].is-active { background: var(--district-suyeong-10); }

.district-card[data-district="사상구"]   { border-color: var(--district-sasang); }
.district-card[data-district="사상구"].is-active { background: var(--district-sasang-10); }

.district-card[data-district="사하구"]   { border-color: var(--district-saha); }
.district-card[data-district="사하구"].is-active { background: var(--district-saha-10); }

.district-card[data-district="금정구"]   { border-color: var(--district-geumjeong); }
.district-card[data-district="금정구"].is-active { background: var(--district-geumjeong-10); }

.district-card[data-district="영도구"]   { border-color: var(--district-yeongdo); }
.district-card[data-district="영도구"].is-active { background: var(--district-yeongdo-10); }

.district-card[data-district="기장군"]   { border-color: var(--district-gijang); }
.district-card[data-district="기장군"].is-active { background: var(--district-gijang-10); }

/* ─────────────────────────────────────────
   5. .district-card__header — 카드 상단 컬러 바
   ───────────────────────────────────────── */
.district-card__header {
  padding:        14px 16px 10px;
  color:          #fff;
  background:     var(--header-bg, #888);
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.district-card__header .header-emoji { font-size: 1.4rem; }
.district-card__header .header-name  { font-size: 1rem; font-weight: 700; }
.district-card__header .header-desc  { font-size: 0.75rem; opacity: .85; }

.district-card[data-district="해운대구"] .district-card__header { --header-bg: var(--district-haeundae); }
.district-card[data-district="중구"]     .district-card__header { --header-bg: var(--district-junggu); }
.district-card[data-district="남구"]     .district-card__header { --header-bg: var(--district-namgu); }
.district-card[data-district="서구"]     .district-card__header { --header-bg: var(--district-seogu); }
.district-card[data-district="동구"]     .district-card__header { --header-bg: var(--district-donggu); }
.district-card[data-district="부산진구"] .district-card__header { --header-bg: var(--district-busanjin); }
.district-card[data-district="동래구"]   .district-card__header { --header-bg: var(--district-dongrae); }
.district-card[data-district="북구"]     .district-card__header { --header-bg: var(--district-bukgu); }
.district-card[data-district="강서구"]   .district-card__header { --header-bg: var(--district-gangseo); }
.district-card[data-district="연제구"]   .district-card__header { --header-bg: var(--district-yeonje); }
.district-card[data-district="수영구"]   .district-card__header { --header-bg: var(--district-suyeong); }
.district-card[data-district="사상구"]   .district-card__header { --header-bg: var(--district-sasang); }
.district-card[data-district="사하구"]   .district-card__header { --header-bg: var(--district-saha); }
.district-card[data-district="금정구"]   .district-card__header { --header-bg: var(--district-geumjeong); }
.district-card[data-district="영도구"]   .district-card__header { --header-bg: var(--district-yeongdo); }
.district-card[data-district="기장군"]   .district-card__header { --header-bg: var(--district-gijang); }

/* ─────────────────────────────────────────
   6. .spot-card-district — 장소 카드 내 구 표시
   ───────────────────────────────────────── */
.spot-card-district {
  position:         absolute;
  top:              10px;
  left:             10px;
  display:          inline-flex;
  align-items:      center;
  gap:              4px;
  padding:          3px 9px;
  border-radius:    var(--district-pill-radius);
  font-size:        0.68rem;
  font-weight:      700;
  color:            #fff;
  background:       var(--spot-district-bg, rgba(0,0,0,.55));
  backdrop-filter:  blur(4px);
  z-index:          2;
  pointer-events:   none;
}

.spot-card-district[data-district="해운대구"] { --spot-district-bg: var(--district-haeundae); }
.spot-card-district[data-district="중구"]     { --spot-district-bg: var(--district-junggu); }
.spot-card-district[data-district="남구"]     { --spot-district-bg: var(--district-namgu); }
.spot-card-district[data-district="서구"]     { --spot-district-bg: var(--district-seogu); }
.spot-card-district[data-district="동구"]     { --spot-district-bg: var(--district-donggu); }
.spot-card-district[data-district="부산진구"] { --spot-district-bg: var(--district-busanjin); }
.spot-card-district[data-district="동래구"]   { --spot-district-bg: var(--district-dongrae); }
.spot-card-district[data-district="북구"]     { --spot-district-bg: var(--district-bukgu); }
.spot-card-district[data-district="강서구"]   { --spot-district-bg: var(--district-gangseo); }
.spot-card-district[data-district="연제구"]   { --spot-district-bg: var(--district-yeonje); }
.spot-card-district[data-district="수영구"]   { --spot-district-bg: var(--district-suyeong); }
.spot-card-district[data-district="사상구"]   { --spot-district-bg: var(--district-sasang); }
.spot-card-district[data-district="사하구"]   { --spot-district-bg: var(--district-saha); }
.spot-card-district[data-district="금정구"]   { --spot-district-bg: var(--district-geumjeong); }
.spot-card-district[data-district="영도구"]   { --spot-district-bg: var(--district-yeongdo); }
.spot-card-district[data-district="기장군"]   { --spot-district-bg: var(--district-gijang); }

/* ─────────────────────────────────────────
   7. .district-filter-btn — 필터 버튼
   ───────────────────────────────────────── */
.district-filter-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
  padding:          6px 14px;
  border-radius:    var(--district-pill-radius);
  border:           2px solid var(--filter-color, #888);
  background:       transparent;
  color:            var(--filter-color, #888);
  font-size:        0.8rem;
  font-weight:      600;
  cursor:           pointer;
  transition:       background var(--transition-fast),
                    color var(--transition-fast),
                    transform var(--transition-fast);
  white-space:      nowrap;
}

.district-filter-btn:hover,
.district-filter-btn.is-active {
  background:  var(--filter-color, #888);
  color:       #fff;
  transform:   translateY(-1px);
}

.district-filter-btn[data-district="해운대구"] { --filter-color: var(--district-haeundae); }
.district-filter-btn[data-district="중구"]     { --filter-color: var(--district-junggu); }
.district-filter-btn[data-district="남구"]     { --filter-color: var(--district-namgu); }
.district-filter-btn[data-district="서구"]     { --filter-color: var(--district-seogu); }
.district-filter-btn[data-district="동구"]     { --filter-color: var(--district-donggu); }
.district-filter-btn[data-district="부산진구"] { --filter-color: var(--district-busanjin); }
.district-filter-btn[data-district="동래구"]   { --filter-color: var(--district-dongrae); }
.district-filter-btn[data-district="북구"]     { --filter-color: var(--district-bukgu); }
.district-filter-btn[data-district="강서구"]   { --filter-color: var(--district-gangseo); }
.district-filter-btn[data-district="연제구"]   { --filter-color: var(--district-yeonje); }
.district-filter-btn[data-district="수영구"]   { --filter-color: var(--district-suyeong); }
.district-filter-btn[data-district="사상구"]   { --filter-color: var(--district-sasang); }
.district-filter-btn[data-district="사하구"]   { --filter-color: var(--district-saha); }
.district-filter-btn[data-district="금정구"]   { --filter-color: var(--district-geumjeong); }
.district-filter-btn[data-district="영도구"]   { --filter-color: var(--district-yeongdo); }
.district-filter-btn[data-district="기장군"]   { --filter-color: var(--district-gijang); }

/* ─────────────────────────────────────────
   8. .district-selector — 16구 선택 그리드
   ───────────────────────────────────────── */
.district-selector {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:                   8px;
  padding:               16px;
}

.district-selector-item {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              4px;
  padding:          12px 8px;
  border-radius:    10px;
  border:           2px solid transparent;
  background:       var(--item-bg, #f5f5f5);
  color:            var(--item-color, #555);
  font-size:        0.8rem;
  font-weight:      600;
  cursor:           pointer;
  transition:       all var(--transition-base);
  text-align:       center;
}

.district-selector-item .item-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.district-selector-item:hover,
.district-selector-item.is-active {
  border-color: var(--item-active-color);
  background:   var(--item-active-color);
  color:        #fff;
  transform:    translateY(-2px);
  box-shadow:   0 4px 12px rgba(0,0,0,.15);
}

.district-selector-item[data-district="해운대구"] { --item-active-color: var(--district-haeundae); }
.district-selector-item[data-district="중구"]     { --item-active-color: var(--district-junggu); }
.district-selector-item[data-district="남구"]     { --item-active-color: var(--district-namgu); }
.district-selector-item[data-district="서구"]     { --item-active-color: var(--district-seogu); }
.district-selector-item[data-district="동구"]     { --item-active-color: var(--district-donggu); }
.district-selector-item[data-district="부산진구"] { --item-active-color: var(--district-busanjin); }
.district-selector-item[data-district="동래구"]   { --item-active-color: var(--district-dongrae); }
.district-selector-item[data-district="북구"]     { --item-active-color: var(--district-bukgu); }
.district-selector-item[data-district="강서구"]   { --item-active-color: var(--district-gangseo); }
.district-selector-item[data-district="연제구"]   { --item-active-color: var(--district-yeonje); }
.district-selector-item[data-district="수영구"]   { --item-active-color: var(--district-suyeong); }
.district-selector-item[data-district="사상구"]   { --item-active-color: var(--district-sasang); }
.district-selector-item[data-district="사하구"]   { --item-active-color: var(--district-saha); }
.district-selector-item[data-district="금정구"]   { --item-active-color: var(--district-geumjeong); }
.district-selector-item[data-district="영도구"]   { --item-active-color: var(--district-yeongdo); }
.district-selector-item[data-district="기장군"]   { --item-active-color: var(--district-gijang); }

/* ─────────────────────────────────────────
   9. .category-icon-wrap — 카테고리 아이콘 컨테이너
   ───────────────────────────────────────── */
.category-icon-wrap {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  border-radius:    10px;
  background:       var(--cat-icon-bg, #888);
  font-size:        1.3rem;
  flex-shrink:      0;
  transition:       transform var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.category-icon-wrap:hover {
  transform:    scale(1.08);
  box-shadow:   0 4px 12px rgba(0,0,0,.18);
}

/* 카테고리별 배경색 */
.category-icon-wrap.cat-beach    { --cat-icon-bg: var(--cat-beach); }
.category-icon-wrap.cat-park     { --cat-icon-bg: var(--cat-park); }
.category-icon-wrap.cat-temple   { --cat-icon-bg: var(--cat-temple); }
.category-icon-wrap.cat-market   { --cat-icon-bg: var(--cat-market); }
.category-icon-wrap.cat-museum   { --cat-icon-bg: var(--cat-museum); }
.category-icon-wrap.cat-seafood  { --cat-icon-bg: var(--cat-seafood); }
.category-icon-wrap.cat-bbq      { --cat-icon-bg: var(--cat-bbq); }
.category-icon-wrap.cat-noodle   { --cat-icon-bg: var(--cat-noodle); }
.category-icon-wrap.cat-cafe     { --cat-icon-bg: var(--cat-cafe); }
.category-icon-wrap.cat-hotel    { --cat-icon-bg: var(--cat-hotel); }
.category-icon-wrap.cat-pension  { --cat-icon-bg: var(--cat-pension); }
.category-icon-wrap.cat-festival { --cat-icon-bg: var(--cat-festival); }
.category-icon-wrap.cat-tour     { --cat-icon-bg: var(--cat-tour); }
.category-icon-wrap.cat-shopping { --cat-icon-bg: var(--cat-shopping); }
.category-icon-wrap.cat-nature   { --cat-icon-bg: var(--cat-nature); }
.category-icon-wrap.cat-history  { --cat-icon-bg: var(--cat-history); }

/* ─────────────────────────────────────────
   10. .cat-icon (작은 인라인 아이콘)
   ───────────────────────────────────────── */
.cat-icon {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            28px;
  height:           28px;
  border-radius:    6px;
  font-size:        1rem;
  color:            #fff;
}

.cat-icon.cat-beach    { background: var(--cat-beach); }
.cat-icon.cat-park     { background: var(--cat-park); }
.cat-icon.cat-temple   { background: var(--cat-temple); }
.cat-icon.cat-market   { background: var(--cat-market); }
.cat-icon.cat-museum   { background: var(--cat-museum); }
.cat-icon.cat-seafood  { background: var(--cat-seafood); }
.cat-icon.cat-bbq      { background: var(--cat-bbq); }
.cat-icon.cat-noodle   { background: var(--cat-noodle); }
.cat-icon.cat-cafe     { background: var(--cat-cafe); }
.cat-icon.cat-hotel    { background: var(--cat-hotel); }
.cat-icon.cat-pension  { background: var(--cat-pension); }
.cat-icon.cat-festival { background: var(--cat-festival); }
.cat-icon.cat-tour     { background: var(--cat-tour); }
.cat-icon.cat-shopping { background: var(--cat-shopping); }
.cat-icon.cat-nature   { background: var(--cat-nature); }
.cat-icon.cat-history  { background: var(--cat-history); }

/* ─────────────────────────────────────────
   11. 구/군 색상 사이드바 (지도 범례)
   ───────────────────────────────────────── */
.district-legend {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  padding:        12px;
  background:     #fff;
  border-radius:  10px;
  box-shadow:     0 2px 12px rgba(0,0,0,.1);
  max-height:     400px;
  overflow-y:     auto;
}

.district-legend-item {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        6px 8px;
  border-radius:  6px;
  cursor:         pointer;
  transition:     background var(--transition-fast);
}

.district-legend-item:hover {
  background: #f5f5f5;
}

.district-legend-item .legend-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    var(--legend-color, #888);
}

.district-legend-item .legend-name {
  font-size:   0.8rem;
  font-weight: 600;
  color:       #333;
}

.district-legend-item .legend-emoji {
  font-size:   0.85rem;
  margin-left: auto;
}

.district-legend-item[data-district="해운대구"] .legend-dot { --legend-color: var(--district-haeundae); }
.district-legend-item[data-district="중구"]     .legend-dot { --legend-color: var(--district-junggu); }
.district-legend-item[data-district="남구"]     .legend-dot { --legend-color: var(--district-namgu); }
.district-legend-item[data-district="서구"]     .legend-dot { --legend-color: var(--district-seogu); }
.district-legend-item[data-district="동구"]     .legend-dot { --legend-color: var(--district-donggu); }
.district-legend-item[data-district="부산진구"] .legend-dot { --legend-color: var(--district-busanjin); }
.district-legend-item[data-district="동래구"]   .legend-dot { --legend-color: var(--district-dongrae); }
.district-legend-item[data-district="북구"]     .legend-dot { --legend-color: var(--district-bukgu); }
.district-legend-item[data-district="강서구"]   .legend-dot { --legend-color: var(--district-gangseo); }
.district-legend-item[data-district="연제구"]   .legend-dot { --legend-color: var(--district-yeonje); }
.district-legend-item[data-district="수영구"]   .legend-dot { --legend-color: var(--district-suyeong); }
.district-legend-item[data-district="사상구"]   .legend-dot { --legend-color: var(--district-sasang); }
.district-legend-item[data-district="사하구"]   .legend-dot { --legend-color: var(--district-saha); }
.district-legend-item[data-district="금정구"]   .legend-dot { --legend-color: var(--district-geumjeong); }
.district-legend-item[data-district="영도구"]   .legend-dot { --legend-color: var(--district-yeongdo); }
.district-legend-item[data-district="기장군"]   .legend-dot { --legend-color: var(--district-gijang); }

/* ─────────────────────────────────────────
   12. 필터링 애니메이션
   ───────────────────────────────────────── */
@keyframes districtFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.district-filter-enter {
  animation: districtFadeIn 300ms ease both;
}

.district-filter-exit {
  opacity:    0;
  transform:  scale(.95);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

/* hidden 상태 */
.district-hidden {
  display: none !important;
}

/* ─────────────────────────────────────────
   13. 반응형
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .district-selector {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
  }

  .district-selector-item {
    padding: 8px 4px;
    font-size: 0.7rem;
  }

  .district-selector-item .item-emoji {
    font-size: 1.2rem;
  }

  .district-map-pin {
    width:  28px;
    height: 28px;
  }

  .category-icon-wrap {
    width:  36px;
    height: 36px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .district-selector {
    grid-template-columns: repeat(3, 1fr);
  }

  .district-legend {
    max-height: 240px;
  }
}