@charset "utf-8";
/* ===== store page styles ===== */

/* ===== con02 : 신규 오픈 매장 (main_shop 연동 · 무한 흐름 카드 + 중앙 오버레이) =====
   카드(.store_s*) 는 custom.css 공통. 여기선 섹션/무대/스와이퍼/중앙오버레이만. */
.con02_iner {
  padding-top: 7.5vw;
  padding-bottom: 5vw;
}

/* 흐르는 카드 + 중앙 오버레이가 겹치는 무대 (풀블리드) */
.con02_stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 매장 카드 스와이퍼 (full-bleed, 무한 흐름) */
.con02_swiper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* 등속 마퀴 — loop autoplay(delay:0) + linear 타이밍으로 끊김없이 흐름 */
.con02_swiper .swiper-wrapper {
  transition-timing-function: linear;
}

/* 슬라이드 폭 = 카드322 + 좌우갭25 (spaceBetween 없이 슬롯폭으로 간격) */
.con02_swiper .swiper-slide {
  width: calc(var(--px) * 347);
}

/* 중앙 오버레이 — 흐르는 카드 위 (z10). ::before 솔리드 흰 백드롭으로 카드 가림 */
.con02_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 430);
  height: 100%;
}

.con02_center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.con02_center_in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.con02_new {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 120);
  aspect-ratio: 120 / 42;
}

.con02_eyb {
  margin-top: 0.6vw;
  color: #8a8a8a;
}

.con02_tit {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 40);
  line-height: 1;
}

.con02_mascot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 459);
  aspect-ratio: 459 / 247;
  margin-top: 1.2vw;
  margin-right: -6vw;
}


/* ===== con03 : 가까운 매장 찾기 (카카오 지도 + 검색 + 매장 리스트 + 페이지네이션) ===== */
.con03_iner {
  padding-top: 3.5vw;
  padding-bottom: 6.3vw;
}

.con03_tit {
  font-size: calc(var(--px) * 40);
  color: #141414;
  line-height: 1;
}

/* 카카오 지도 컨테이너 (앱키 전엔 회색 플레이스홀더) */
.con03_map {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1488);
  height: calc(var(--px) * 487);
  margin-top: 1.8vw;
  border-radius: calc(var(--px) * 40);
  background: #a5d1f2;
  overflow: hidden;
}

.con03_map_kakao {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: grab; /* 지도 드래그 가능 표시 */
}

.con03_map_kakao:active {
  cursor: grabbing;
}

/* 지도 말풍선(커스텀 오버레이) — 흰 배경 + 회전사각형 꼬리(라인까지). map.js showOv 가 삽입 */
.map_marker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.map_marker_text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 16);
  background: #fff;
  border: 2px solid #141414;
  border-radius: calc(var(--px) * 20);
  color: #141414;
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 calc(var(--px) * 3) calc(var(--px) * 8) rgba(0, 0, 0, 0.18);
}

.map_marker_tail {
  display: flex;
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 14);
  background: #fff;
  border-right: 2px solid #141414;
  border-bottom: 2px solid #141414;
  transform: rotate(45deg);
  margin-top: calc(var(--px) * -8); /* 본체에 박아 연결 (흰 배경이 본체 아래선을 덮어 트임) */
}

/* 검색 밴드 — 풀폭 #f2f2f2 + 상하 라인 (PSD Rectangle 1 copy 25) */
.con03_searchbar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2.9vw;
  padding: 1vw 0;
  background: #f9f9f9;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.con03_searchbar .pet_search_btn {
  background: #eee;
}

/* 검색 pill — 공통 pet_search + con03 커스텀 색상
   (평소=검정버튼/흰돋보기, 호버=검정원 작아지고 옅은 크림 링 남음, 흰pill+연회색보더) */
.con03_search {
  --psearch-border: #dfdfdf;
  --psearch-btn: #f8f4eb;
  --psearch-btnhv: #141414;
  --psearch-ico: #ffffff;
  width: calc(var(--px) * 736);
  height: calc(var(--px) * 72);
}

/* 매장 리스트 */
.con03_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1288);
  margin-top: 3.4vw;
}

.store {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 61);
  color: #141414;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.store+.store {
  border-top: 1px solid #ececec;
}

.store:hover {
  background: #faf7f0;
}

/* 라벨 셀(정렬용) + 네이비 pill */
.store_label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 10.5%;
}

.store_label_tx {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: calc(var(--px) * 22);
  padding: calc(var(--px) * 6) calc(var(--px) * 15);
  border-radius: calc(var(--px) * 999);
  background: #0b1a2f;
  font-size: calc(var(--px) * 13);
  font-weight: 600;
  color: #fff;
}

.store_name {
  width: 24%;
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  color: #141414;
}

.store_addr {
  width: 32.8%;
  font-size: calc(var(--px) * 17);
  font-weight: 400;
  color: #8a8a8a;
}

.store_tel {
  width: 13.7%;
  font-size: calc(var(--px) * 17);
  font-weight: 400;
  color: #8a8a8a;
}

/* 네이버 지도 버튼 (이미지) */
.store_naver {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 106);
  aspect-ratio: 106 / 29;
  margin-right: 3.9vw;
}

.store_naver img {
  width: calc(var(--px) * 109);
  transition: filter 0.25s ease;
}

.store_naver:hover img {
  filter: brightness(0.92);
}

/* 화살표 셀 (정렬용) */
.store_arw {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 5%;
}

/* 검정 원 = 공통 .swiper_navbtn 재사용. 링은 아이콘 직접 호버 시에만 (아이콘 중심 40px) */
.store_arw_ico {
  position: relative;
}

.store_arw_ico::after {
  content: "";
  position: absolute;
  width: calc(var(--px) * 55);
  aspect-ratio: 1;
  border: 1px solid #bdbdbd;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.store_arw_ico:hover::after {
  opacity: 1;
}

.store_arw_ico img {
  width: calc(var(--px) * 12);
  filter: brightness(0) invert(1);
}

/* 검색결과 없음 (기본 hide 클래스로 숨김 → JS 가 토글) */
.noshop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 120);
  font-size: calc(var(--px) * 17);
  color: #999;
}

/* ===== 페이지네이션 — 공통 .pet_paging (custom.css) 로 이전. 여기선 섹션 상단 간격만 지정 =====
   HTML: <div class="store_paging pet_paging"> (시각 스타일은 pet_paging_* 공통) */
.store_paging {
  margin-top: 4.4vw;
}


/* ============================================================================
   📱 MOBILE ( max-width:599px ) — STORE (매장)
   ============================================================================ */
@media (max-width: 599px) {

  /* ===== con02 : 신규 오픈 매장 (마퀴 카드 + 중앙 흰섬 오버레이) =====
     레이아웃(중앙 흰섬 + 양옆 흐르는 카드)은 유지. PC --px 값이 모바일서 microscopic
     (타이틀 8px·라벨 3.5px·카드 66px) → 전부 vw 재정의. */
  .con02_iner {
    padding-top: 15vw;
    padding-bottom: 10vw;
  }

  /* 마퀴 슬라이드 슬롯 — slidesPerView:'auto' 라 CSS 슬롯폭이 그대로 반영 (카드42 + 좌우갭4) */
  .con02_swiper .swiper-slide {
    width: 46vw;
  }

  /* 공통 카드(.store_s*) — store 전용 스코프(.con02_swiper)로 front 마퀴 무손상.
     base calc(--px*N)=모바일 microscopic → vw 재정의(라디우스 4vw 토큰 = front 카드와 통일) */
  .con02_swiper .store_sitem {
    width: 42vw;
    border-radius: 4vw;
  }

  .con02_swiper .store_sinfo {
    padding: 4vw;
    padding-bottom: 5vw;
  }

  .con02_swiper .store_slabel {
    padding: 1.6vw 3vw;
    font-size: 3.3vw;
  }

  .con02_swiper .store_sname {
    margin-top: 3.1vw;
    font-size: 3.6vw;
  }

  /* 세로 스택 — PC는 흐르는 카드 위에 흰섬 오버레이지만, 모바일선 카드가 너무 가려져
     상하 분리: 중앙 오버레이(제목/마스코트)를 위, 마퀴 카드 스와이퍼를 아래로. */
  .con02_stage {
    flex-direction: column;
    gap: 7vw;
  }

  /* 흰섬 오버레이 → in-flow 상단 블록 (absol 해제·풀폭·카드 가림 백드롭 제거) */
  .con02_center {
    position: relative;
    order: -1;
    width: 100%;
    height: auto;
  }

  .con02_center::before {
    display: none;
  }

  .con02_new {
    width: 24vw;
  }

  .con02_eyb {
    margin-top: 2vw;
    font-size: 3.3vw;
  }

  .con02_tit {
    margin-top: 4vw;
    font-size: 7.3vw;
  }

  .con02_mascot {
    width: 50vw;
    margin-top: 4vw;
    margin-right: -12.7vw;
    margin-bottom: -10.1vw;
  }

  /* ===== con03 : 가까운 매장 찾기 — PC --px 극소화(타이틀 8px·행 12px·검색pill 15px) → vw 재구성 ===== */
  .con03_iner {
    padding-top: 5vw;
    padding-bottom: 15vw;
  }

  .con03_tit {
    font-size: 7.3vw;
  }

  /* 지도 — PC 와이드 배너(3:1) → 모바일 정사각에 가깝게(터치/판독). 앱키 전엔 파란 플레이스홀더 */
  .con03_map {
    width: 90vw;
    height: 62vw;
    margin-top: 5vw;
    border-radius: 5vw;
  }

  /* 검색 밴드(풀폭) + pill 상하 여유 */
  .con03_searchbar {
    margin-top: 8vw;
    padding: 4vw 0;
  }

  /* 검색 pill — PC 폭/높이(--px) 붕괴 → 공통 pet_search 터치 사이즈(높이 14vw)에 맞춰 폭만 90vw */
  .con03_search {
    width: 90vw;
    height: 14vw;
  }

  /* 매장 리스트 — 한 행(6열 가로 strip) → 세로 3줄 카드 (order 로 재배치)
     line1: [지역pill] 매장명 ......... [→]  /  line2: 주소  /  line3: 전화 ..... [네이버지도] */
  .con03_list {
    width: 90vw;
    margin-top: 6vw;
  }

  .store {
    flex-wrap: wrap;
    height: auto;
    padding: 4vw 2vw;
    column-gap: 2vw;
    row-gap: 1.8vw;
  }

  .store_label {
    order: 1;
    width: auto;
  }

  .store_label_tx {
    margin-left: 0;
    padding: 1vw 2.6vw;
    font-size: 3vw;
  }

  .store_name {
    order: 2;
    flex: 1;
    width: auto;
    font-size: 4vw;
  }

  .store_arw {
    order: 3;
    width: auto;
  }

  .store_arw_ico img {
    width: 3.6vw;
  }

  .store_addr {
    order: 4;
    width: 100%;
    font-size: 3.3vw;
  }

  .store_tel {
    order: 5;
    flex: 1;
    width: auto;
    font-size: 3.3vw;
  }

  .store_naver {
    order: 6;
    width: 19vw;
    margin-right: 0;
  }

  .store_naver img {
    width: 100%;
  }

  /* 검색 결과 없음 */
  .noshop {
    height: auto;
    padding: 9vw 0;
    font-size: 3.5vw;
  }

  /* 페이지네이션 상단 간격 (원·번호 크기는 공통 .pet_paging @media = custom.css) */
  .store_paging {
    margin-top: 9vw;
  }

  .store_arw_ico::after {
    width: calc(var(--px) * 295);
  }

  /* 지도 말풍선 — 모바일은 --px 가 microscopic → vw 로 재지정 (폰트만 덮으면 패딩/꼬리가 뭉개짐) */
  .map_marker_text {
    padding: 1.4vw 3vw;
    border-radius: 10vw;
    font-size: 3.3vw;
  }

  .map_marker_tail {
    width: 2.6vw;
    height: 2.6vw;
    margin-top: -1.4vw;
  }
}

#map img{
  pointer-events: all;
}