@charset "utf-8";

/* ==========================================================
   영업망 — 지점 목록 + 네이버 지도
   ========================================================== */
.store-finder{
  display:flex;gap:var(--sp-30);align-items:stretch;
  height:clamp(520px, calc(720 / var(--inner) * 100vw), 720px);
}

/* ---------- 좌측 : 검색 / 필터 / 목록 ---------- */
.store-finder__aside{
  width:400px;flex:none;display:flex;flex-direction:column;
  border:1px solid #ddd;border-radius:16px;overflow:hidden;background:#fff;
}

.store-search{display:flex;gap:5px;padding:var(--sp-20);border-bottom:1px solid #eee;}
.store-search__input{
  flex:1;min-width:0;height:44px;padding:0 14px;
  border:1px solid #ddd;border-radius:8px;background:#fff;
  font-family:inherit;font-size:var(--fs-16);color:#505050;
}
.store-search__input:focus{outline:none;border-color:var(--color-primary);}
.store-search__btn{
  flex:none;width:60px;height:44px;border:0;border-radius:8px;
  background:var(--color-primary);color:#fff;
  font-family:inherit;font-size:var(--fs-16);font-weight:600;cursor:pointer;
}
.store-search__btn:hover{background:var(--color-secondary);}

.store-filter{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:var(--sp-20);border-bottom:1px solid #eee;
}
/* <a> 로 만들어 URL 이 바뀌고 크롤러가 따라갈 수 있게 했다 */
.store-filter__btn{
  display:inline-flex;align-items:center;
  padding:0 14px;height:32px;border:1px solid #ddd;border-radius:100px;
  background:#fff;color:#767676;text-decoration:none;
  font-family:inherit;font-size:var(--fs-14);font-weight:500;cursor:pointer;
  transition:all .2s;
}
.store-filter__btn:hover{border-color:var(--color-primary);color:var(--color-primary);}

/* 활성 상태.
   :hover(0,2,0) 가 단일 클래스(0,1,0) 보다 우선순위가 높아 글자색이 배경색과 같아지므로
   --active:hover 를 함께 명시해 흰 글씨를 유지한다. */
.store-filter__btn--active,
.store-filter__btn--active:hover{
  background:var(--color-primary);border-color:var(--color-primary);
  color:#fff;font-weight:600;
}
/* 활성 상태에서도 hover 피드백은 남긴다 */
.store-filter__btn--active:hover{background:var(--color-secondary);border-color:var(--color-secondary);}

.store-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.store-list__count{
  padding:12px var(--sp-20);background:#fafafa;border-bottom:1px solid #eee;
  font-size:var(--fs-14);color:#686868;
}
.store-list__count strong{color:var(--color-primary);font-weight:700;}
.store-list__empty{padding:60px 20px;text-align:center;color:#999;font-size:var(--fs-14);line-height:1.7;}

/* 데이터를 불러오는 동안 */
.store-finder--loading .store-filter{min-height:52px;}
.store-finder--loading .store-list__count::after{content:'불러오는 중…';color:#aaa;}

.store-item{
  display:block;width:100%;padding:var(--sp-20);
  border:0;border-bottom:1px solid #eee;background:#fff;
  font-family:inherit;text-align:left;cursor:pointer;transition:background .15s;
}
.store-item:hover{background:#fafafa;}
.store-item--active{background:#EEF7F1;}
.store-item--active .store-item__name{color:var(--color-primary);}

.store-item__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.store-item__name{font-size:var(--fs-18);font-weight:700;color:#333;line-height:1.3;}
.store-item__badge{
  flex:none;padding:0 8px;border-radius:4px;
  background:#EAF3EE;color:var(--color-primary);
  font-size:12px;font-weight:600;line-height:20px;
}
.store-item__addr{font-size:var(--fs-14);color:#767676;line-height:1.5;}
.store-item__tel{
  display:inline-block;margin-top:6px;
  font-size:var(--fs-14);font-weight:600;color:#333;
}
.store-item__tel:hover{color:var(--color-primary);text-decoration:underline;}

/* ---------- 우측 : 지도 ---------- */
.store-finder__map{
  flex:1;min-width:0;position:relative;
  border:1px solid #ddd;border-radius:16px;overflow:hidden;background:#eef1f4;
  overscroll-behavior:contain;   /* 지도 안 스크롤이 페이지로 이어지지 않게 */
}
.store-map{width:100%;height:100%;}

/* 지도 SDK 키가 없을 때 안내 */
.store-map__fallback{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:30px;text-align:center;color:#767676;font-size:var(--fs-14);line-height:1.7;
}
.store-finder--no-map .store-map__fallback{display:flex;}
.store-finder--no-map .store-map{display:none;}
.store-map__fallback code{
  padding:2px 6px;border-radius:4px;background:#eef1f4;color:#333;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
}

/* 지도 말풍선 */
/* 본문은 마우스 이벤트를 통과시켜 지도(확대/축소·드래그)가 그대로 동작하게 한다.
   클릭이 필요한 요소만 pointer-events 를 되살린다. */
.store-info{
  position:relative;
  padding:14px 34px 14px 16px;min-width:200px;max-width:280px;
  font-family:var(--font-body);
  pointer-events:none;
}
.store-info__close,
.store-info__tel{pointer-events:auto;}
.store-info__close{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;border:0;border-radius:100%;
  background:transparent;color:#999;
  font-size:16px;line-height:1;cursor:pointer;
}
.store-info__close:hover{background:#f1f3f5;color:#333;}
.store-info__name{margin-bottom:6px;font-size:15px;font-weight:700;color:#222;line-height:1.3;}
.store-info__addr{font-size:13px;color:#767676;line-height:1.5;}
.store-info__tel{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--color-primary);}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:1024px){
  .store-finder{flex-direction:column;height:auto;}
  .store-finder__aside{width:100%;}
  .store-list{max-height:420px;}
  /* 세로 배치에서는 flex:1 이 0 으로 수축하므로 flex 를 풀고 높이를 준다 */
  .store-finder__map{flex:none;height:420px;}
}

@media (max-width:640px){
  .store-finder{gap:var(--sp-20);}
  .store-search{padding:15px;}
  .store-filter{padding:12px 15px;}
  .store-filter__btn{height:30px;padding:0 11px;font-size:13px;}
  .store-item{padding:15px;}
  .store-item__name{font-size:16px;}
  .store-list{max-height:340px;}
  .store-finder__map{flex:none;height:320px;}
}