/* ================================================================
   뚝배기 양평해장국 · 매장찾기
   Figma 확정 디자인(매장찾기) 기준 — 사이트의 ACSS 변수를 우선 사용하고,
   변수가 없는 환경에서도 보이도록 fallback 값을 함께 둡니다.
   모든 선택자에 .dbyp-sl 접두사를 두어 테마 스타일과 충돌하지 않게 함
   ================================================================ */

.dbyp-sl{
  /* 컬러 — 사이트 토큰 → fallback */
  --dbyp-ink:var(--secondary-ultra-dark,#320c09);
  --dbyp-bg:var(--hj-light-bg,#fdfaf3);
  --dbyp-card:#fffdf9;
  --dbyp-line:#c8b4b3;
  --dbyp-line-soft:rgba(50,12,9,.1);
  --dbyp-gray:#767676;
  --dbyp-sand:#ccbb90;
  --dbyp-sand-d:#968969;
  --dbyp-hanji:#f4f0e6;
  --dbyp-hanji2:#fdfaf3;
  /* 타이포 */
  --dbyp-font-h:var(--heading-font-family,'Gmarket Sans',Gmarket,'Noto Sans KR',sans-serif);
  --dbyp-font-t:var(--text-font-family,'Noto Sans KR',Pretendard,'Apple SD Gothic Neo',sans-serif);
  --dbyp-fs-h3:var(--h3,clamp(1.6rem,2.2vw,2.1rem));
  --dbyp-fs-h4:var(--h4,clamp(1.3rem,1.7vw,1.58rem));
  --dbyp-fs-h5:var(--h5,1.19rem);
  --dbyp-fs-m:var(--text-m,1.25rem);
  --dbyp-fs-s:var(--text-s,.94rem);
  /* 모양 */
  --dbyp-r-card:32px;
  --dbyp-r-btn:8px;
  --dbyp-h:737px;              /* PC 목록·지도 높이 (Figma) */
  --dbyp-gap:var(--hj-space-60,clamp(2rem,2vw + 1.8rem,2.5rem));
  --dbyp-sticky-top:100px;     /* 고정 헤더(80px) 아래 여백 */

  width:100%;min-width:0;
  color:var(--dbyp-ink);
  font-family:var(--dbyp-font-t);
  font-size:var(--dbyp-fs-m);
  line-height:1.6;
}
.dbyp-sl *,.dbyp-sl *::before,.dbyp-sl *::after{box-sizing:border-box}

/* ── 안내 띠 ── */
.dbyp-sl .dbyp-demo-bar{
  background:var(--dbyp-hanji);
  border:1px solid var(--dbyp-line-soft);border-radius:16px;
  padding:16px 24px;margin-bottom:24px;
  display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap;
}
.dbyp-sl .dbyp-demo-bar .tag{
  background:var(--dbyp-ink);color:#fff;font-family:var(--dbyp-font-h);font-weight:500;font-size:var(--dbyp-fs-s);
  padding:5px 14px;border-radius:40px;flex:none;
}
.dbyp-sl .dbyp-demo-bar p{margin:0;font-size:var(--dbyp-fs-s);color:var(--dbyp-gray);line-height:1.6}

/* ── 검색 · 필터 ── */
.dbyp-sl .dbyp-filter{
  display:flex;gap:12px 20px;align-items:stretch;flex-wrap:wrap;
  padding-bottom:var(--space-20,20px);
  border-bottom:1px solid var(--dbyp-line-soft);
}
.dbyp-sl .dbyp-filter select,
.dbyp-sl .dbyp-filter input[type="search"]{
  border:1px solid var(--dbyp-line-soft);background:#fff;border-radius:var(--dbyp-r-btn);
  padding:14px 20px;font-size:var(--dbyp-fs-m);font-weight:500;font-family:var(--dbyp-font-t);color:var(--dbyp-ink);
  line-height:1.5;max-width:100%;margin:0;
}
/* 시안의 갈색 삼각 화살표 */
.dbyp-sl .dbyp-filter select{
  flex:1 1 0;min-width:0;cursor:pointer;appearance:none;-webkit-appearance:none;
  padding-right:48px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23320c09'%3E%3Cpath d='M5 8h14l-7 9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:20px;
}
.dbyp-sl .dbyp-filter select::-ms-expand{display:none}
.dbyp-sl .dbyp-filter input[type="search"]{flex:2 1 200px;min-width:200px}
.dbyp-sl .dbyp-filter select:focus,
.dbyp-sl .dbyp-filter input[type="search"]:focus{outline:none;border-color:var(--dbyp-ink)}
.dbyp-sl .dbyp-reset{
  flex:none;background:var(--dbyp-ink);color:#fff;border:1px solid var(--dbyp-ink);border-radius:var(--dbyp-r-btn);
  padding:14px 30px;font-family:var(--dbyp-font-h);font-weight:500;font-size:var(--dbyp-fs-h5);line-height:1.2;
  cursor:pointer;transition:filter .2s,background-color .2s;text-align:center;
}
.dbyp-sl .dbyp-reset:hover{filter:brightness(1.25)}
.dbyp-sl .dbyp-cnt{margin-left:auto;font-size:var(--dbyp-fs-s);color:var(--dbyp-gray);font-weight:500;white-space:nowrap}
.dbyp-sl .dbyp-cnt b{font-family:var(--dbyp-font-h);font-size:var(--dbyp-fs-h5);color:var(--dbyp-ink)}

/* 모바일 목록/지도 토글 */
.dbyp-sl .dbyp-viewtoggle{display:none;gap:8px}
.dbyp-sl .dbyp-viewtoggle button{
  flex:1;border:1px solid var(--dbyp-ink);background:transparent;color:var(--dbyp-ink);
  border-radius:var(--dbyp-r-btn);padding:12px;font-family:var(--dbyp-font-h);font-weight:500;font-size:var(--dbyp-fs-h5);cursor:pointer;text-align:center;line-height:1.2;
}
.dbyp-sl .dbyp-viewtoggle button.on{background:var(--dbyp-ink);color:#fff}

/* ── 본문 2분할 (좌: 필터+목록 / 우: 지도) ── */
.dbyp-sl .dbyp-store-wrap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--dbyp-gap);align-items:start;
}
.dbyp-sl .dbyp-col{
  display:flex;flex-direction:column;gap:var(--space-20,20px);min-width:0;
  height:var(--dbyp-h);
}
.dbyp-sl .dbyp-store-wrap.dbyp-nomap{grid-template-columns:1fr}
.dbyp-sl .dbyp-store-wrap.dbyp-nomap .dbyp-col{height:auto}
.dbyp-sl .dbyp-store-wrap.dbyp-nomap .dbyp-slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));overflow:visible}

.dbyp-sl .dbyp-slist{
  display:flex;flex-direction:column;gap:20px;
  flex:1 1 auto;min-height:0;overflow-y:auto; padding: 1px; padding-right:4px;
}
.dbyp-sl .dbyp-slist::-webkit-scrollbar{width:6px}
.dbyp-sl .dbyp-slist::-webkit-scrollbar-thumb{background:rgba(50,12,9,.25);border-radius:3px}

/* ── 매장 카드 ── */
.dbyp-sl .dbyp-scard{
  background:var(--dbyp-card);border:1px solid var(--dbyp-line);border-radius:var(--dbyp-r-card);
  padding:32px;cursor:pointer;transition:border-color .2s,box-shadow .2s;flex:none;
}
.dbyp-sl .dbyp-scard:hover{border-color:var(--dbyp-sand-d);box-shadow:0 10px 26px rgba(50,12,9,.1)}
.dbyp-sl .dbyp-scard:focus-visible{outline:2px solid var(--dbyp-ink);outline-offset:2px}
.dbyp-sl .dbyp-scard.on{border-width:2px;border-color:var(--dbyp-ink);margin:-1px}

.dbyp-sl .dbyp-scard h3{
  margin:0;font-family:var(--dbyp-font-h);font-weight:700;font-size:var(--dbyp-fs-h3);
  color:var(--dbyp-ink);line-height:1.25;letter-spacing:-.01em;
}

/* 주소 · 전화번호 줄 (아이콘 + 텍스트) */
.dbyp-sl .dbyp-scard .info{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.dbyp-sl .dbyp-scard .info p{
  margin:0;display:flex;align-items:flex-start;gap:10px;
  font-size:var(--dbyp-fs-m);color:var(--dbyp-gray);line-height:1.5;
}
.dbyp-sl .dbyp-ic{width:22px;height:22px;flex:none;margin-top:2px}
.dbyp-sl .dbyp-scard .info .dbyp-ic{color:var(--dbyp-ink)}
.dbyp-sl .dbyp-scard .note{margin-top:12px;font-size:var(--dbyp-fs-s);color:var(--dbyp-gray);line-height:1.6}

/* 액션 버튼 — 전화하기(채움) / 길찾기(외곽선) */
.dbyp-sl .dbyp-scard .acts{margin-top:24px;display:flex;gap:10px}
.dbyp-sl .dbyp-scard .acts a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  text-align:center;text-decoration:none;font-family:var(--dbyp-font-h);font-weight:500;font-size:var(--dbyp-fs-h5);
  padding:16px 30px;border-radius:var(--dbyp-r-btn);border:1px solid var(--dbyp-ink);
  transition:filter .2s,background-color .2s,color .2s;line-height:1.2;
}
.dbyp-sl .dbyp-scard .acts a .dbyp-ic{width:20px;height:20px;margin-top:0}
.dbyp-sl .dbyp-scard .acts .call{background:var(--dbyp-ink);color:#fff}
.dbyp-sl .dbyp-scard .acts .call:hover{filter:brightness(1.25);color:#fff}
.dbyp-sl .dbyp-scard .acts .road{background:transparent;color:var(--dbyp-ink)}
.dbyp-sl .dbyp-scard .acts .road:hover{background:var(--dbyp-ink);color:#fff}

/* ── 결과 없음 ── */
.dbyp-sl .dbyp-empty{
  background:var(--dbyp-card);border:1px dashed var(--dbyp-line);border-radius:var(--dbyp-r-card);
  padding:48px 28px;text-align:center;
}
.dbyp-sl .dbyp-empty h4{margin:0;font-family:var(--dbyp-font-h);font-weight:700;font-size:var(--dbyp-fs-h4);color:var(--dbyp-ink)}
.dbyp-sl .dbyp-empty p{margin:10px 0 0;font-size:var(--dbyp-fs-m);color:var(--dbyp-gray);line-height:1.6}
.dbyp-sl .dbyp-empty-cta{
  display:inline-block;margin-top:20px;color:var(--dbyp-ink);font-family:var(--dbyp-font-h);font-weight:700;
  text-decoration:none;border-bottom:2px solid var(--dbyp-ink);padding-bottom:2px;
}

/* ── 지도 ── */
.dbyp-sl .dbyp-smap{
  position:sticky;top:var(--dbyp-sticky-top);
  background:var(--dbyp-hanji2);border-radius:var(--dbyp-r-card);overflow:hidden;
  height:var(--dbyp-h);
}
/* 지도 위 「전체 보기」 — 지도가 실제로 뜰 때만 노출 */
.dbyp-sl .dbyp-map-all{
  display:none;position:absolute;top:16px;left:16px;z-index:5;
  align-items:center;gap:7px;
  background:#fff;border:1px solid var(--dbyp-ink);border-radius:var(--dbyp-r-btn);
  padding:10px 16px;font-family:var(--dbyp-font-h);font-weight:500;font-size:var(--dbyp-fs-s);
  color:var(--dbyp-ink);cursor:pointer;transition:background-color .2s,color .2s;
  box-shadow:0 4px 14px rgba(50,12,9,.16);line-height:1;
}
.dbyp-sl.dbyp-has-map .dbyp-map-all{display:inline-flex}
.dbyp-sl .dbyp-map-all:hover{background:var(--dbyp-ink);color:#fff}
.dbyp-sl .dbyp-map-all .dbyp-ic{width:16px;height:16px;margin-top:0}

/* 키 미설정·마커 미선택 시 안내 영역 — Figma 체커보드 자리표시 */
.dbyp-sl .dbyp-map-canvas{
  position:relative;height:100%;
  display:flex;align-items:center;justify-content:center;padding:30px;
  background:conic-gradient(#f4f0e6 25%,#fdfaf3 0 50%,#f4f0e6 0 75%,#fdfaf3 0) 0 0/60px 60px;
}
.dbyp-sl .dbyp-map-el{display:none;position:absolute;inset:0;width:100%;height:100%}
.dbyp-sl.dbyp-has-map .dbyp-map-el{display:block}
.dbyp-sl.dbyp-has-map .dbyp-map-canvas{padding:0;background:none}
.dbyp-sl.dbyp-has-map .dbyp-map-fallback{display:none}

.dbyp-sl .dbyp-map-fallback{text-align:center;max-width:420px}
.dbyp-sl .dbyp-map-fallback .pin{font-size:46px;line-height:1}
.dbyp-sl .dbyp-map-fallback h4{margin:14px 0 0;font-family:var(--dbyp-font-h);font-weight:700;font-size:var(--dbyp-fs-h4);color:var(--dbyp-ink)}
.dbyp-sl .dbyp-map-fallback .ad{margin-top:10px;font-size:var(--dbyp-fs-m);color:var(--dbyp-gray);line-height:1.6}
.dbyp-sl .dbyp-map-fallback .tl{margin-top:14px;font-family:var(--dbyp-font-h);font-size:var(--dbyp-fs-h4);font-weight:700;color:var(--dbyp-ink)}
.dbyp-sl .dbyp-map-fallback .badge{
  margin-top:22px;padding-top:16px;border-top:1px dashed rgba(50,12,9,.25);
  font-size:var(--dbyp-fs-s);color:var(--dbyp-gray);line-height:1.7;
}

/* 카카오 인포윈도우 */
.dbyp-iw{box-sizing:border-box;padding:14px 18px 13px;width:230px;font-family:'Noto Sans KR',Pretendard,sans-serif;line-height:1.55}
.dbyp-iw strong{display:block;font-size:15px;color:#320c09;margin-bottom:6px;word-break:keep-all}
.dbyp-iw span{display:block;font-size:13px;color:#767676;word-break:keep-all;overflow-wrap:break-word}
.dbyp-iw a{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:#320c09;text-decoration:underline}

/* ── 지역별 현황 ── */
.dbyp-sl .dbyp-region-sec{
  margin-top:clamp(40px,5vw,64px);background:var(--dbyp-ink);
  border-radius:var(--dbyp-r-card);padding:clamp(30px,4vw,52px) clamp(20px,3vw,40px);
}
.dbyp-sl .dbyp-region-title{
  margin:0 0 24px;text-align:center;font-family:var(--dbyp-font-h);font-weight:700;
  font-size:var(--dbyp-fs-h3);color:#fff;
}
.dbyp-sl .dbyp-rgrid,.dbyp-rgrid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dbyp-sl .dbyp-rchip{
  background:rgba(255,255,255,.06);border:1px solid rgba(204,187,144,.4);border-radius:var(--dbyp-r-btn);
  padding:18px 22px;text-align:center;min-width:104px;cursor:pointer;transition:background-color .2s,border-color .2s;
  font-family:inherit;text-decoration:none;display:block;
}
.dbyp-sl .dbyp-rchip:hover{background:var(--dbyp-sand);border-color:var(--dbyp-sand)}
.dbyp-sl .dbyp-rchip:hover b,.dbyp-sl .dbyp-rchip:hover span{color:var(--dbyp-ink)}
.dbyp-sl .dbyp-rchip b{display:block;font-family:var(--dbyp-font-h);font-size:var(--dbyp-fs-h3);font-weight:700;color:var(--dbyp-sand);line-height:1}
.dbyp-sl .dbyp-rchip span{display:block;margin-top:8px;font-size:var(--dbyp-fs-s);color:rgba(255,255,255,.85);font-weight:700}

/* ── 반응형 ── */
@media(max-width:1024px){
  .dbyp-sl .dbyp-store-wrap{grid-template-columns:minmax(0,1fr)}
  .dbyp-sl .dbyp-col{height:auto}
  .dbyp-sl .dbyp-slist{max-height:min(75vh,720px);overflow-y:auto;padding-right:4px}
  .dbyp-sl .dbyp-smap{position:static;height:clamp(380px,60vh,520px);display:none}
  .dbyp-sl .dbyp-viewtoggle{display:flex;width:100%}
  .dbyp-sl.dbyp-show-map .dbyp-smap{display:block}
  .dbyp-sl.dbyp-show-map .dbyp-slist{display:none}
  .dbyp-sl .dbyp-cnt{margin-left:0;width:100%}
}
@media(max-width:640px){
  .dbyp-sl{--dbyp-r-card:24px}
  .dbyp-sl .dbyp-filter select,
  .dbyp-sl .dbyp-filter input[type="search"]{flex:1 1 100%;width:100%;min-width:0}
  .dbyp-sl .dbyp-filter .dbyp-reset{width:100%;flex:1 1 100%}
  .dbyp-sl .dbyp-scard{padding:24px 20px}
  .dbyp-sl .dbyp-scard .acts{flex-direction:column}
  .dbyp-sl .dbyp-scard .acts a{padding:15px 20px}
}