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

/* ─────────────────────────────────────────
   공통 ::before 아이콘 기반
   ───────────────────────────────────────── */
[class*="icon-"]::before,
[class*="district-icon-"]::before {
  display:     inline-block;
  font-style:  normal;
  font-variant:normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}

/* ─────────────────────────────────────────
   1. 관광지 / 자연 카테고리 아이콘
   ───────────────────────────────────────── */
.icon-beach::before        { content: '🏖️'; }
.icon-park::before         { content: '🌿'; }
.icon-temple::before       { content: '⛩️'; }
.icon-museum::before       { content: '🏛️'; }
.icon-fortress::before     { content: '🏯'; }
.icon-island::before       { content: '🏝️'; }
.icon-mountain::before     { content: '⛰️'; }
.icon-waterfall::before    { content: '💧'; }
.icon-garden::before       { content: '🌸'; }
.icon-bridge::before       { content: '🌉'; }
.icon-lighthouse::before   { content: '🗼'; }
.icon-port::before         { content: '⚓'; }
.icon-nature::before       { content: '🌳'; }
.icon-wave::before         { content: '🌊'; }
.icon-sunset::before       { content: '🌅'; }
.icon-cultural::before     { content: '🎭'; }
.icon-heritage::before     { content: '🏺'; }
.icon-village::before      { content: '🏘️'; }

/* ─────────────────────────────────────────
   2. 음식 / 맛집 카테고리 아이콘
   ───────────────────────────────────────── */
.icon-seafood::before      { content: '🦞'; }
.icon-bbq::before          { content: '🥩'; }
.icon-noodle::before       { content: '🍜'; }
.icon-cafe::before         { content: '☕'; }
.icon-bakery::before       { content: '🥐'; }
.icon-sushi::before        { content: '🍣'; }
.icon-grill::before        { content: '🍖'; }
.icon-soup::before         { content: '🍲'; }
.icon-rice::before         { content: '🍚'; }
.icon-snack::before        { content: '🍢'; }
.icon-tteok::before        { content: '🍡'; }
.icon-fish::before         { content: '🐟'; }
.icon-crab::before         { content: '🦀'; }
.icon-shrimp::before       { content: '🦐'; }
.icon-octopus::before      { content: '🐙'; }
.icon-meat::before         { content: '🥩'; }
.icon-burger::before       { content: '🍔'; }
.icon-pizza::before        { content: '🍕'; }
.icon-dessert::before      { content: '🍰'; }
.icon-icecream::before     { content: '🍦'; }
.icon-drink::before        { content: '🥤'; }
.icon-beer::before         { content: '🍺'; }
.icon-wine::before         { content: '🍷'; }
.icon-restaurant::before   { content: '🍽️'; }
.icon-fork::before         { content: '🍴'; }

/* ─────────────────────────────────────────
   3. 숙소 카테고리 아이콘
   ───────────────────────────────────────── */
.icon-hotel::before        { content: '🏨'; }
.icon-pension::before      { content: '🏡'; }
.icon-resort::before       { content: '🏖️'; }
.icon-hostel::before       { content: '🛏️'; }
.icon-guesthouse::before   { content: '🏠'; }
.icon-camping::before      { content: '🏕️'; }
.icon-glamping::before     { content: '⛺'; }
.icon-hanok::before        { content: '🏯'; }
.icon-motel::before        { content: '🏩'; }
.icon-bed::before          { content: '🛌'; }

/* ─────────────────────────────────────────
   4. 이벤트 / 축제 아이콘
   ───────────────────────────────────────── */
.icon-festival::before     { content: '🎪'; }
.icon-fireworks::before    { content: '🎆'; }
.icon-film::before         { content: '🎬'; }
.icon-music::before        { content: '🎵'; }
.icon-art::before          { content: '🎨'; }
.icon-sports::before       { content: '🏅'; }
.icon-parade::before       { content: '🎉'; }
.icon-fair::before         { content: '🎠'; }
.icon-marathon::before     { content: '🏃'; }
.icon-calendar::before     { content: '📅'; }
.icon-ticket::before       { content: '🎟️'; }
.icon-stage::before        { content: '🎭'; }

/* ─────────────────────────────────────────
   5. 쇼핑 / 편의 아이콘
   ───────────────────────────────────────── */
.icon-market::before       { content: '🛒'; }
.icon-shopping::before     { content: '🛍️'; }
.icon-mall::before         { content: '🏬'; }
.icon-pharmacy::before     { content: '💊'; }
.icon-convenience::before  { content: '🏪'; }
.icon-souvenir::before     { content: '🎁'; }

/* ─────────────────────────────────────────
   6. 교통 / 이동 아이콘
   ───────────────────────────────────────── */
.icon-train::before        { content: '🚂'; }
.icon-bus::before          { content: '🚌'; }
.icon-subway::before       { content: '🚇'; }
.icon-taxi::before         { content: '🚕'; }
.icon-ferry::before        { content: '⛴️'; }
.icon-airplane::before     { content: '✈️'; }
.icon-parking::before      { content: '🅿️'; }
.icon-bicycle::before      { content: '🚲'; }

/* ─────────────────────────────────────────
   7. 기타 유틸리티 아이콘
   ───────────────────────────────────────── */
.icon-hotspring::before    { content: '♨️'; }
.icon-palette::before      { content: '🎨'; }
.icon-anchor::before       { content: '⚓'; }
.icon-shop::before         { content: '🏪'; }
.icon-industry::before     { content: '🏭'; }
.icon-star::before         { content: '⭐'; }
.icon-heart::before        { content: '❤️'; }
.icon-map::before          { content: '🗺️'; }
.icon-pin::before          { content: '📍'; }
.icon-camera::before       { content: '📷'; }
.icon-search::before       { content: '🔍'; }
.icon-info::before         { content: 'ℹ️'; }
.icon-phone::before        { content: '📞'; }
.icon-email::before        { content: '📧'; }
.icon-clock::before        { content: '🕐'; }
.icon-hot::before          { content: '🔥'; }
.icon-new::before          { content: '🆕'; }
.icon-ai::before           { content: '🤖'; }
.icon-translate::before    { content: '🌐'; }

/* ─────────────────────────────────────────
   8. 구/군 대표 아이콘
   ───────────────────────────────────────── */
.district-icon-haeundae::before  { content: '🏄'; }   /* 해운대구 — 서핑/해변 */
.district-icon-junggu::before    { content: '🎬'; }   /* 중구     — BIFF 영화제 */
.district-icon-namgu::before     { content: '🌊'; }   /* 남구     — 오륙도/이기대 */
.district-icon-seogu::before     { content: '🏖️'; }  /* 서구     — 송도해수욕장 */
.district-icon-donggu::before    { content: '🚂'; }   /* 동구     — 부산역 */
.district-icon-busanjin::before  { content: '🛍️'; }  /* 부산진구 — 서면/쇼핑 */
.district-icon-dongrae::before   { content: '♨️'; }  /* 동래구   — 온천 */
.district-icon-bukgu::before     { content: '🌿'; }   /* 북구     — 화명생태공원 */
.district-icon-gangseo::before   { content: '✈️'; }  /* 강서구   — 김해공항 */
.district-icon-yeonje::before    { content: '🍽️'; }  /* 연제구   — 먹자골목 */
.district-icon-suyeong::before   { content: '🌉'; }   /* 수영구   — 광안대교 */
.district-icon-sasang::before    { content: '🏭'; }   /* 사상구   — 산업단지 */
.district-icon-saha::before      { content: '🎨'; }   /* 사하구   — 감천문화마을 */
.district-icon-geumjeong::before { content: '🏯'; }   /* 금정구   — 금정산성 */
.district-icon-yeongdo::before   { content: '⚓'; }   /* 영도구   — 해양/항구 */
.district-icon-gijang::before    { content: '🦀'; }   /* 기장군   — 해산물 */

/* ─────────────────────────────────────────
   9. 아이콘 크기 유틸리티
   ───────────────────────────────────────── */
.icon-xs::before  { font-size: 0.75rem; }
.icon-sm::before  { font-size: 1rem; }
.icon-md::before  { font-size: 1.25rem; }
.icon-lg::before  { font-size: 1.5rem; }
.icon-xl::before  { font-size: 2rem; }
.icon-2xl::before { font-size: 2.5rem; }
.icon-3xl::before { font-size: 3rem; }

/* ─────────────────────────────────────────
   10. .icon-badge — 뱃지 스타일 아이콘
   ───────────────────────────────────────── */
.icon-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  border-radius:    10px;
  background:       #f0f0f0;
  font-size:        1.25rem;
  line-height:      1;
  transition:       transform 150ms ease, box-shadow 150ms ease;
}

.icon-badge:hover {
  transform:    scale(1.1);
  box-shadow:   0 4px 12px rgba(0,0,0,.15);
}

/* 카테고리별 배경색 적용 */
.icon-badge.beach    { background: #e8f5f8; }
.icon-badge.food     { background: #fdf2e6; }
.icon-badge.stay     { background: #eef0f8; }
.icon-badge.festival { background: #fbeaea; }
.icon-badge.shopping { background: #f4ecf9; }
.icon-badge.nature   { background: #e9f7ef; }

/* ─────────────────────────────────────────
   11. .icon-circle — 원형 아이콘
   ───────────────────────────────────────── */
.icon-circle {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            48px;
  height:           48px;
  border-radius:    50%;
  background:       var(--icon-circle-bg, #1E90A5);
  color:            #fff;
  font-size:        1.4rem;
  box-shadow:       0 2px 8px rgba(0,0,0,.2);
  flex-shrink:      0;
}

/* ─────────────────────────────────────────
   12. SVG inline background 아이콘
       (커스텀 핀 마커)
   ───────────────────────────────────────── */

/* 해변/파도 핀 마커 */
.svg-pin-beach {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8z' fill='%231E90A5'/%3E%3Ctext x='12' y='12' text-anchor='middle' font-size='8' fill='white'%3E🏖%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 32px;
  display: inline-block;
}

/* 음식/포크 핀 마커 */
.svg-pin-food {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8z' fill='%23E67E22'/%3E%3Ctext x='12' y='12' text-anchor='middle' font-size='8' fill='white'%3E🍽%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 32px;
  display: inline-block;
}

/* 숙소/침대 핀 마커 */
.svg-pin-stay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8z' fill='%232C3E50'/%3E%3Ctext x='12' y='12' text-anchor='middle' font-size='8' fill='white'%3E🏨%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 32px;
  display: inline-block;
}

/* 이벤트/축제 핀 마커 */
.svg-pin-festival {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8z' fill='%23C0392B'/%3E%3Ctext x='12' y='12' text-anchor='middle' font-size='8' fill='white'%3E🎪%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 32px;
  display: inline-block;
}

/* 자연/공원 핀 마커 */
.svg-pin-nature {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8z' fill='%2327AE60'/%3E%3Ctext x='12' y='12' text-anchor='middle' font-size='8' fill='white'%3E🌿%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 32px;
  display: inline-block;
}

/* 기본 핀 마커 (부산어디? 브랜드) */
.svg-pin-default {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8z' fill='%23E74C3C'/%3E%3Ccircle cx='12' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 32px;
  display: inline-block;
}

/* ─────────────────────────────────────────
   13. SVG inline 아이콘 (배경 이미지용)
   ───────────────────────────────────────── */

/* 파도 아이콘 */
.svg-icon-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 10 Q5 0 10 10 Q15 20 20 10 Q25 0 30 10 Q35 20 40 10' stroke='%231E90A5' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px;
  height: 20px;
  display: inline-block;
}

/* 포크 아이콘 */
.svg-icon-fork {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E67E22'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* 침대 아이콘 */
.svg-icon-bed {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232C3E50'%3E%3Cpath d='M20 9.557V3h-2v2H6V3H4v6.557C2.81 10.25 2 11.525 2 13v4h2v2h2v-2h12v2h2v-2h2v-4c0-1.475-.811-2.75-2-3.443zM18 7v2h-5V7h5zM6 7h5v2H6V7zm14 8H4v-2c0-1.103.897-2 2-2h12c1.103 0 2 .897 2 2v2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* 달력 아이콘 */
.svg-icon-calendar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C0392B'%3E%3Cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z'/%3E%3Crect x='9' y='12' width='2' height='2'/%3E%3Crect x='13' y='12' width='2' height='2'/%3E%3Crect x='17' y='12' width='2' height='2'/%3E%3Crect x='5' y='16' width='2' height='2'/%3E%3Crect x='9' y='16' width='2' height='2'/%3E%3Crect x='13' y='16' width='2' height='2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* 별점 아이콘 */
.svg-icon-star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F39C12'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* 위치 핀 아이콘 */
.svg-icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E74C3C'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* ─────────────────────────────────────────
   14. HOT 뱃지 / NEW 뱃지
   ───────────────────────────────────────── */
.badge-hot {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  padding:        2px 8px;
  border-radius:  999px;
  font-size:      0.68rem;
  font-weight:    800;
  background:     linear-gradient(135deg, #ff6b35, #e74c3c);
  color:          #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:     0 2px 6px rgba(231,76,60,.4);
}

.badge-hot::before { content: '🔥'; font-size: 0.75rem; }

.badge-new {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  padding:        2px 8px;
  border-radius:  999px;
  font-size:      0.68rem;
  font-weight:    800;
  background:     linear-gradient(135deg, #1E90A5, #1abc9c);
  color:          #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:     0 2px 6px rgba(30,144,165,.35);
}

.badge-new::before { content: '✨'; font-size: 0.75rem; }

.badge-recommend {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  padding:        2px 8px;
  border-radius:  999px;
  font-size:      0.68rem;
  font-weight:    800;
  background:     linear-gradient(135deg, #f39c12, #e67e22);
  color:          #fff;
  letter-spacing: 0.04em;
  box-shadow:     0 2px 6px rgba(243,156,18,.35);
}

.badge-recommend::before { content: '⭐'; font-size: 0.75rem; }

/* ─────────────────────────────────────────
   15. 별점 표시
   ───────────────────────────────────────── */
.star-rating {
  display:     inline-flex;
  gap:         1px;
  font-size:   0.9rem;
  line-height: 1;
}

.star-rating .star-full  { color: #F39C12; }
.star-rating .star-half  { color: #F39C12; opacity: .6; }
.star-rating .star-empty { color: #ddd; }

.star-rating .star-full::before  { content: '★'; }
.star-rating .star-half::before  { content: '⯨'; }
.star-rating .star-empty::before { content: '☆'; }

/* ─────────────────────────────────────────
   16. 카테고리 탭 아이콘 버튼
   ───────────────────────────────────────── */
.category-tab-btn {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              5px;
  padding:          10px 14px;
  border:           none;
  border-radius:    10px;
  background:       transparent;
  cursor:           pointer;
  font-size:        0.72rem;
  font-weight:      600;
  color:            #666;
  transition:       all 150ms ease;
  white-space:      nowrap;
}

.category-tab-btn .tab-icon {
  font-size:   1.4rem;
  line-height: 1;
}

.category-tab-btn:hover {
  background: #f5f5f5;
  color:      #333;
  transform:  translateY(-1px);
}

.category-tab-btn.is-active {
  background:  var(--tab-active-bg, #e8f5f8);
  color:       var(--tab-active-color, #1E90A5);
  font-weight: 700;
}

/* ─────────────────────────────────────────
   17. 반응형
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .icon-circle {
    width:     36px;
    height:    36px;
    font-size: 1.1rem;
  }

  .icon-badge {
    width:     34px;
    height:    34px;
    font-size: 1rem;
  }

  .category-tab-btn {
    padding:   8px 10px;
    font-size: 0.65rem;
  }

  .category-tab-btn .tab-icon {
    font-size: 1.2rem;
  }
}