/* =========================================
   이음 검색 결과 — 지도 + 목록/혼합 (Figma 254:11873 / 254:11950 / 710:2153)
   공통 리셋·아이콘·GNB 는 tokens.css 사용
========================================= */
.app{position:relative;max-width:var(--app-max);height:100vh;height:100dvh;margin:0 auto;overflow:hidden;background:var(--white)}

/* ---------- 실제 지도 ---------- */
.map{position:absolute;inset:0;z-index:0;background:var(--app-bg)}
.leaflet-container{font-family:inherit;background:var(--app-bg)}
/* 지도 마커 핀 */
.pin{display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;background:rgba(62,104,255,.85);
  box-shadow:0 2px 4px rgba(0,0,0,.2);color:var(--white);font-size:16px;font-weight:600;letter-spacing:-.4px;border:2px solid var(--white)}

/* 정보 안내 힌트 */
.ziphint{position:absolute;left:50%;top:36%;transform:translateX(-50%);z-index:15;width:126px;height:126px;
  border-radius:8px;background:rgba(255,255,255,.4);backdrop-filter:blur(5px);border:1px solid var(--g100);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  transition:opacity .4s ease}
.ziphint.hide{opacity:0;pointer-events:none}
.ziphint i{font-size:40px;color:var(--g700)}
.ziphint p{font-size:14px;letter-spacing:-.35px;line-height:1.4;color:var(--g900)}
.ziphint b{color:var(--blue-500)}

/* ---------- 상단 바 ---------- */
.topbar{position:absolute;left:0;right:0;top:0;z-index:30;background:var(--white);padding-top:env(safe-area-inset-top);padding-bottom:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.02)}
/* 텍스트는 공통 .fs-* (tokens.css) 사용 — 위치/레이아웃 보정만 유지 */
.thead{height:56px;display:flex;align-items:center;padding:0 16px;position:relative}
.thead__btn{width:20px;height:20px;display:grid;place-items:center;color:var(--g900);z-index:2}
.thead__title{position:absolute;left:50%;transform:translateX(-50%)}
.tsearch{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.tsearch__left{display:flex;align-items:center;gap:12px;min-width:0}
.tsearch__kw--ph{color:var(--g400);font-weight:500}
.tsearch__right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.tsearch__edit{display:inline-flex;align-items:center;gap:3px;color:var(--blue-500);font-weight:600}
.tsearch__edit i{font-size:13px}
.tsearch__cond{display:flex;align-items:center;gap:4px}
.tsearch__cond .dot{color:var(--g500)}
/* 주소(필터 미설정) 시 날짜·인원 플레이스홀더 */
.tsearch__cond--empty{gap:16px}
.tcond{display:flex;align-items:center;gap:6px}
.tcond i{font-size:18px;color:var(--g500)}
.tchips{display:flex;align-items:center;gap:8px;padding:0 16px;overflow-x:auto}
.tchips::-webkit-scrollbar{display:none}
/* 칩 wrapper를 레이아웃에서 펼쳐 칩들이 .tchips 가로 flex 행에 직접 배치(세로 쌓임 방지) */
#chipWrap{display:contents}
.tchip-ic{flex:none;width:36px;height:36px;border-radius:18px;border:1px solid var(--g200);background:var(--white);
  display:grid;place-items:center;color:var(--g700)}
.tchip{flex:none;display:flex;align-items:center;gap:4px;background:var(--blue-50);color:var(--blue-500);
  font-size:14px;letter-spacing:-.35px;padding:6px 12px;border-radius:9999px}
.tchip i{font-size:14px}
/* 항목별 필터 칩 — 기본은 아웃라인, 선택값 있으면 파란 강조 */
.tchip--cat{background:var(--white);border:1px solid var(--g200);color:var(--g700);height:36px;padding:0 12px}
.tchip--cat.tchip--on{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-500);font-weight:600}

/* ---------- 위치 버튼 (모드별 위치 — 항상 하단 콘텐츠 바로 위) ---------- */
.crosshair{position:absolute;right:16px;z-index:27;width:44px;height:44px;border-radius:9999px;
  background:var(--white);border:1px solid var(--g200);display:grid;place-items:center;color:var(--g700);
  box-shadow:0 2px 8px rgba(17,17,17,.12);transition:bottom .3s cubic-bezier(.32,.72,0,1)}
/* 혼합: 바텀시트(52%) 바로 위 / 지도: 카드 위 / 목록: 숨김 */
.app.mode-mixed .crosshair{bottom:calc(52vh - 64px)}
.app.mode-map   .crosshair{bottom:184px}
.app.mode-list  .crosshair{display:none}

/* ---------- 지도모드 하단 카드 + 목록보기 ---------- */
.mapcards{position:absolute;left:0;right:0;bottom:74px;z-index:24;display:none;gap:12px;overflow-x:auto;
  padding:0 16px;scroll-snap-type:x mandatory} /* 카드 리스트 간격 12px — 앱 공통 */
.mapcards::-webkit-scrollbar{display:none}
.mapcard{flex:0 0 88%;scroll-snap-align:center;background:var(--white);border-radius:12px;padding:12px;
  box-shadow:0 8px 24px rgba(17,17,17,.12),0 2px 6px rgba(17,17,17,.06);display:flex;gap:8px}
/* 썸네일은 공통 .thumb .thumb--70 (tokens.css) 사용 — 어두운 그라데이션만 보정 */
.mapcard__thumb{background:var(--g900)}
.mapcard__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.56))}
.mapcard__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.mapcard__loc{display:flex;align-items:center;justify-content:space-between}
.mapcard__loc i{color:var(--g500)}
/* 텍스트는 공통 .fs-cap-b/.fs-subtitle/.fs-name (tokens.css) 사용 */
.mapcard__price{display:flex;align-items:center;gap:4px}
.mapcard__price .rate{font-size:13px;color:var(--blue-500)}

.pillbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:26;height:44px;padding:0 18px;
  border-radius:9999px;background:var(--white);box-shadow:0 8px 12px rgba(17,17,17,.12),0 2px 3px rgba(17,17,17,.06);
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:600;color:var(--g900);letter-spacing:-.375px}
.pillbtn i{font-size:20px;color:var(--blue-500)}
.maplistbtn{display:none}

/* ---------- 바텀시트 (혼합/목록) ---------- */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:20;height:calc(100% - 152px);background:var(--white);
  border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(17,17,17,.1);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.32,.72,0,1),border-radius .3s cubic-bezier(.32,.72,0,1);will-change:transform}
/* 검색 시트는 드래그 핸들(컨테이너+::before pill) — 공통 pill base 무력화 */
.sheet__handle{flex:none;width:auto;height:28px;background:none;border-radius:0;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.sheet__handle::before{content:"";width:100px;height:4px;border-radius:9999px;background:var(--g300)}
.sheet__bar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 16px 12px}
.sheet__count b{font-weight:600}
.sheet__list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:40px;
  padding:4px 0 calc(96px + env(safe-area-inset-bottom))}

/* 지도보기 버튼 (목록 모드) */
.sheet__mapbtn{display:none}

/* ---------- 와이드 리스트 카드 — 공통 .wcard/.tags/.price/.badge-best/.heart (tokens.css) 위 페이지 보정 ---------- */
.wcard{padding:0 16px}
.wcard__photo--lead{width:328px}

/* =========================================
   상태 전환
========================================= */
.app.mode-mixed .sheet{transform:translateY(48%)}
.app.mode-list  .sheet{transform:translateY(0)}
.app.mode-map   .sheet{transform:translateY(100%)}
/* 전체화면(끝까지 끌어올림): 카드 티(둥근 모서리·핸들 pill) 제거해 한 화면처럼 */
.app.mode-list  .sheet{border-radius:0}
.app.mode-list  .sheet__handle::before{display:none}

.app.mode-map .mapcards{display:flex}
.app.mode-map .maplistbtn{display:flex}
.app.mode-list .sheet__mapbtn{display:flex}
.app.mode-map .ziphint{opacity:0;pointer-events:none}

/* =========================================
   태블릿 (600px~) — 목록 카드 사진·지도 카드 확대
========================================= */
@media (min-width:600px){
  .wcard__photo{width:180px;height:180px}
  .wcard__photo--lead{width:420px}
  .mapcard{flex:0 0 420px}
}

/* ---------- 필터/정렬 바텀시트 ---------- */
.fsheet-backdrop{position:fixed;inset:0;z-index:200;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .24s ease}
.fsheet-backdrop.on{opacity:1}
.fsheet-backdrop[hidden]{display:none}
.fsheet{width:100%;max-width:var(--app-max);background:var(--white);border-radius:20px 20px 0 0;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;
  transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);max-height:80vh;max-height:80dvh;overflow-y:auto}
.fsheet-backdrop.on .fsheet{transform:translateY(0)}
.fsheet__handle{width:100px;height:8px;border-radius:27px;background:var(--g200);margin:0 auto;flex:none}
.fsheet__head{display:flex;align-items:center;justify-content:space-between;height:32px}
.fsheet__close{width:44px;height:44px;margin:-6px -12px 0 0;display:grid;place-items:center;color:var(--g900)}
.fsheet__label{margin-bottom:-8px}
.fsheet__chips{display:flex;flex-wrap:wrap;gap:8px}
/* 선택 칩은 공통 .chip.chip--line (tokens.css) 사용 */
/* 탭형 필터 시트: 고정 높이 + 내부 스크롤 (탭·CTA 는 고정) */
.fsheet--tall{height:82vh;height:82dvh;padding:12px 0 0;gap:0;overflow:hidden}
.fsheet--tall .fsheet__head{flex:none;padding:0 16px;margin-top:12px}
.fsheet__tabs{flex:none;display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--g91);
  overflow-x:auto;scrollbar-width:none}
.fsheet__tabs::-webkit-scrollbar{display:none}
.ftab{flex:none;height:44px;display:flex;align-items:center;font-size:15px;font-weight:500;letter-spacing:-.375px;
  color:var(--g500);background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.ftab.on{color:var(--blue-500);font-weight:600;border-bottom-color:var(--blue-500)}
.fsheet__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 16px;
  display:flex;flex-direction:column;gap:24px}
.fsec{display:flex;flex-direction:column;gap:16px}
.fsheet__cta{flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -1px 4px rgba(17,17,17,.08)}
/* 적용하기 — 44px */
.fsheet__apply{height:44px;font-size:15px;font-weight:700;border-radius:var(--radius-base)}
/* 다중 선택 그룹 — 체크박스 리스트 (어드민 common.css .f-check 와 동일한 네이티브+accent 방식) */
.fsheet__checks{display:flex;flex-direction:column}
.fcheck{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;
  color:var(--g900);letter-spacing:-.375px;cursor:pointer}
.fcheck input[type="checkbox"]{width:20px;height:20px;accent-color:var(--blue-500);cursor:pointer;flex:none;margin:0}
/* 단일 선택 그룹(정렬) — 프라이머리 컬러 라디오 리스트 */
.fsheet__opts{display:flex;flex-direction:column}
.fsheet__opt{min-height:52px;display:flex;align-items:center;gap:12px;background:none;
  padding:0 4px;text-align:left;color:var(--g900)}
.fsheet__radio{width:22px;height:22px;border-radius:9999px;border:2px solid var(--g300);flex:none;
  box-sizing:border-box;transition:border-color .15s,background .15s,box-shadow .15s}
.fsheet__opt.on{font-weight:600}
.fsheet__opt.on .fsheet__radio{border-color:var(--blue-500);background:var(--blue-500);
  box-shadow:inset 0 0 0 4px var(--white)}