/* =========================================
이음 검색 결과 — 지도 + 목록/혼합 (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)}
/* ---------- 실제 지도 ---------- */
/* 크기를 inset:0 에만 기대면 안 된다 — 네이버 SDK 가 지도를 만들 때 컨테이너에
position:relative 를 인라인으로 덮어써서 그 순간 높이가 0 이 된다(지도가 사라진다).
width/height 100% 는 .app 의 명시 높이(100dvh)를 기준으로 잡히므로 position 이 바뀌어도 남는다 */
.map{position:absolute;inset:0;width:100%;height:100%;z-index:0;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)}
/* 가격 핀은 글이 길어 원이 아니라 알약이다 (44px 원에 '180,000원'이 안 들어간다) */
.pin--price{width:auto;height:32px;padding:0 11px;font-size:13px;white-space:nowrap}
/* 묶음 핀 — 줌을 줄이면 지역마다 몇 곳인지 알려 준다. 알약이 아니라 원으로 크게 둔다:
지도 위에서 먼저 읽혀야 하는 것이 개수라서, 개수를 키우고 지역명을 그 아래 줄에 쌓는다 */
.pin--cluster{width:58px;height:58px;padding:0;border-radius:9999px;
background:var(--blue-500);border:3px solid var(--white);
box-shadow:0 4px 12px rgba(17,17,17,.3);
grid-auto-flow:row;align-content:center;gap:1px;line-height:1.05;white-space:nowrap}
.pin--cluster b{font-size:21px;font-weight:800;letter-spacing:-.6px}
.pin--cluster em{font-size:11px;font-weight:600;font-style:normal;letter-spacing:-.3px}
/* 지도를 못 그릴 때(키 미등록 등) 그 자리를 대신한다 */
.map-none{padding:24px 20px;text-align:center}
/* 정보 안내 힌트 */
.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%)}
/* 왼쪽(검색어)과 오른쪽(날짜·인원)이 각각 누를 수 있는 자리다 — 한 링크였던 것을 쪼갰다.
둘 사이에 손가락이 헷갈리지 않게 최소 8px 을 띄우고, 각자 56px 을 다 쓰게 한다 */
.tsearch{height:56px;display:flex;align-items:stretch;justify-content:space-between;gap:8px;padding:0 16px}
.tsearch__left{flex:1;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;justify-content:center;gap:2px;flex:none;
background:none;text-align:right;color:inherit}
.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 지만 공용 바텀시트(css/sheet.css)가 아니다.
지도 위에 얹혀 손으로 끌어 올리고 내리는 패널이라 position·높이·손잡이가 전부 다르다
(공용은 화면을 덮는 모달, 이쪽은 지도의 일부다).
이 화면의 모달 시트는 아래 .fsheet 다 — 이름이 겹쳐서 갈라진 것이 아니라 모양이 다르다.
지도만 볼 때 걸쳐 두는 높이 — 손잡이(28px) + '몇 곳' 줄이 들어갈 만큼 */
.app{--sheet-peek:64px}
.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%)}
/* 혼합 모드에서는 시트의 아래 48% 가 화면 밖으로 나간다. transform 은 레이아웃을 바꾸지 않아서
목록은 여전히 시트 전체 높이를 가진 줄 알고, 끝까지 내려도 마지막 카드가 화면 밖에서 잘렸다.
밀려난 만큼을 아래 여백으로 돌려준다 — 시트 높이가 calc(100% - 152px) 이므로 그 48% 다.
(%로 된 padding 은 높이가 아니라 '너비' 기준이라 쓸 수 없다) */
.app.mode-mixed .sheet__list{padding-bottom:calc(0.48 * (100dvh - 152px) + 96px + env(safe-area-inset-bottom))}
.app.mode-list .sheet{transform:translateY(0)}
/* 지도만 볼 때도 손잡이와 '몇 곳' 은 남긴다(--sheet-peek).
통째로 내려 버리면 목록이 있다는 것 자체가 화면에서 사라져, 처음 온 사람은 지도가 전부인 줄 안다.
걸쳐 두면 올려서 목록 · 내려서 지도가 한 손가락으로 오간다 */
.app.mode-map .sheet{transform:translateY(calc(100% - var(--sheet-peek)))}
/* 전체화면(끝까지 끌어올림): 카드 티(둥근 모서리·핸들 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 .mapcards{bottom:calc(var(--sheet-peek) + 12px)}
/* '목록 보기' 알약은 감춘다 — 걸쳐 있는 시트가 같은 일을 하고, 둘이 나란히 있으면 어수선하다 */
.app.mode-map .maplistbtn{display:none}
.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}
}
/* ---------- 필터/정렬 바텀시트 ----------
공용 바텀시트(css/sheet.css)와 구조가 다르다 — 손잡이가 흐름 안에 있고(공용은 absolute),
머리가 32px 에 닫기가 오른쪽(공용은 56px .sheet__head), 적용 버튼이 44px(공용 .btn-cta 는 52px),
초기화와 한 줄로 서는 발(.fsheet__cta--row)이 있다.
이름만 바꿔 공용으로 옮길 수 있는 사본이 아니다 — 옮기려면 이 시트의 비율을 공용에 맞춰
다시 그려야 한다(디자인 결정). 2026-09-22 확인하고 그대로 두기로 했다. */
.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{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}
/* 항목 탭 — 공통 .ltabs.ltabs--static.swiper / .ltab (tokens.css · app.js) 사용, 시트 flex 레이아웃 보정만 */
.fsheet__tabs{flex:none}
.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)}
/* 초기화 + 적용 두 개가 나란히 서는 CTA */
.fsheet__cta--row{display:flex;align-items:center;gap:8px}
.fsheet__cta--row .fsheet__apply{flex:1;width:auto}
.fsheet__reset{flex:none;display:flex;align-items:center;gap:4px;height:44px;padding:0 12px;background:none;
color:var(--g700);font-size:15px;font-weight:600;letter-spacing:-.375px}
.fsheet__reset i{color:var(--g500)}
/* 다중 선택 그룹 — 체크박스 리스트 (어드민 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)}