/* ============================================================
   집테리어 최종 디자인 — 큰 탭 5개 + 화면 골격  (2026-09-16, 디자인 총괄)
   ------------------------------------------------------------
   주소 규칙은 js/zp-route.js 가 맡는다. 이 파일은 **보이는 것만** 정한다.
     · html[data-zp-view="…"]      지금 화면 (라우터가 붙임)
     · [data-zp-view-tab="…"]      위쪽 큰 탭
     · [data-zp-view-panel="…"]    화면 조각 (라우터가 hidden 을 켰다 껐다)

   색은 css/style.css 의 기존 토큰만 쓴다(--green·--red·--ink·--line…).
   새 색을 만들지 않는다 — 시안의 초록/빨강이 이미 이 토큰과 같은 계열이다.

   🔵 모바일에서 위쪽 큰 탭을 감춘다(디자인 총괄 판단 2026-09-16)
      시안은 모바일에도 위쪽 탭 3개를 두는데, 부대표 지시로 붙이는
      **공용 하단 탭바에 같은 3개가 또 들어간다.** 같은 메뉴가 위아래로
      두 번 나오면 어느 쪽이 지금 위치인지 헷갈리고 세로 공간만 먹는다.
      → 모바일은 하단 탭바 하나로 통일. PC 는 시안 그대로 위쪽 탭 5개.
      되돌리려면 맨 아래 @media 블록의 display:none 한 줄만 지우면 된다.
   ============================================================ */

/* ============================================================
   조작부 크기 규칙 — **높이는 네 종류만 쓴다**
   ------------------------------------------------------------
   처음엔 36/44/46/48/52 가 섞여 있어 줄마다 층이 졌다. 값을 줄이고
   변수로 묶어, 새 화면을 만들 때 임의 숫자가 다시 끼어들지 못하게 한다.

     --h-sm 40  작은 조작부(조건 변경·정렬)   ※ 모바일에서는 누르는 자리를 44 로 넓힘
     --h-tap 44 손가락 최소치(연락 3버튼·칩)
     --h-md 48  입력칸·선택칸·세그먼트·보조 버튼   ← 기본
     --h-lg 52  화면을 넘기는 큰 버튼

   모서리도 셋만: --r-sm 8(작은 것) / --r-md 10(조작부) / --r-lg 12(상자)
   ============================================================ */
:root{
  --h-sm: 40px; --h-tap: 44px; --h-md: 48px; --h-lg: 52px;
  --r-sm: 8px;  --r-md: 10px;  --r-lg: 12px;
  --zp-focus: 0 0 0 3px rgba(68,116,102,.16);
}

/* ---------- 위쪽 큰 탭 ---------- */
.zp-viewtabs{
  display: flex; align-items: stretch; gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--line, #e6e9e7);
  padding: 0 clamp(16px, 3vw, 40px);
  overflow-x: auto;                 /* 좁은 PC 창에서 탭이 잘리지 않게 */
  scrollbar-width: none;
}
.zp-viewtabs::-webkit-scrollbar{ display: none; }

.zp-viewtab{
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: var(--h-md); padding: 0 20px;
  border: 0; background: none;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--ink, #202421);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
/* 보이는 상자는 그대로 두고 누르는 자리만 넓힌다(공용 GNB 탭과 같은 방식) */
.zp-viewtab::before{ content: ""; position: absolute; inset: 0; }

.zp-viewtab.is-on{ color: var(--red, #bb1730); }
/* 밑줄은 글자 폭에만 긋는다 — 탭 상자 폭에 그으면 글자 수에 따라 길이가 들쭉날쭉해 보인다 */
.zp-viewtab.is-on::after{
  content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px;
  height: 3px; background: var(--red, #bb1730); border-radius: 2px 2px 0 0;
}
.zp-viewtab:focus-visible{ outline: 2px solid var(--red, #bb1730); outline-offset: -4px; }

/* ---------- 화면 조각 ---------- */
[data-zp-view-panel][hidden]{ display: none !important; }

/* 왼쪽 패널 — 시안의 검색·안내 영역. 오른쪽 지도는 기존 .map-shell 이 그대로 쓴다. */
.zp-pane{
  display: flex; flex-direction: column; gap: 18px;
  /* 좌우 여백은 **변수 하나로** 쓴다 — 아래쪽 고정줄이 이 값만큼 바깥으로 나가
     패널 끝까지 채워야 하는데, 두 곳에 따로 적으면 어긋난다
     (실측: 고정줄이 6px 삐져나왔다). */
  --zp-pane-px: clamp(16px, 2.2vw, 28px);
  padding: 24px var(--zp-pane-px) 32px;
  background: #fff;
  /* 🔵 한글은 기본값(break-all 계열)으로 두면 **어절 한가운데서 끊긴다.**
     375 실측에서 "…찾아보세 / 요." 처럼 한 글자만 떨어졌다.
     keep-all 은 어절 단위로만 끊어 준다 — 한글 화면의 기본값으로 둘 것.
     pretty 는 지원 브라우저에서 마지막 줄 외톨이를 한 번 더 줄여 준다. */
  word-break: keep-all;
  text-wrap: pretty;
}
.zp-pane__title{ margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #202421); }
.zp-pane__lead{ margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #202421); text-wrap: balance; }
.zp-pane__desc{ margin: -10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted, #777e79); }

/* ---------- 두 갈래 선택(아파트명 검색 / 지도로 찾기) ---------- */
.zp-segment{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.zp-segment__btn{
  min-height: var(--h-md); padding: 0 12px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md);
  background: #fff; color: var(--ink, #202421);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.zp-segment__btn[aria-pressed="true"]{
  background: var(--green-3, #447466); border-color: var(--green-3, #447466); color: #fff;
}
.zp-segment__btn:focus-visible{ outline: 2px solid var(--green, #21463b); outline-offset: 2px; }

/* ---------- 입력 ---------- */
.zp-field{ display: flex; flex-direction: column; gap: 8px; }
.zp-field__label{ font-size: 14px; font-weight: 700; color: var(--ink, #202421); }
.zp-field__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.zp-input{ position: relative; display: flex; align-items: center; }
.zp-input input{
  width: 100%; min-height: var(--h-md); padding: 0 46px 0 14px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md);
  background: #fff; font: inherit; font-size: 15px; color: var(--ink, #202421);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.zp-input input::placeholder{ color: #a7aeaa; }
.zp-input input:focus{ outline: none; border-color: var(--green-3, #447466); box-shadow: var(--zp-focus); }
.zp-input__icon{
  position: absolute; right: 14px; width: 20px; height: 20px;
  color: var(--muted, #777e79); pointer-events: none;
}

.zp-select{
  width: 100%; min-height: var(--h-md); padding: 0 38px 0 14px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md);
  background: #fff; font: inherit; font-size: 15px; color: var(--ink, #202421);
  /* 화살표는 배경 이미지로 — 외부 파일 없이 data URI 로 넣어 요청을 늘리지 않는다 */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23777e79' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.zp-select:focus{ outline: none; border-color: var(--green-3, #447466); box-shadow: var(--zp-focus); }
.zp-select:disabled{ background-color: var(--soft, #f5f6f5); color: #a7aeaa; cursor: not-allowed; }

/* ---------- 큰 버튼 ---------- */
/* 🔵 시안 확인: **누를 수 있는 큰 버튼은 빨강**(--red) 이다.
   초록은 '지금 고른 것'(아파트명 검색 / 지도로 찾기 같은 두 갈래 선택)에만 쓴다.
   둘을 섞으면 "고른 것"과 "누를 것"이 같은 색이 되어 구분이 사라진다. */
.zp-cta{
  min-height: var(--h-lg); width: 100%;
  border: 0; border-radius: var(--r-md);
  background: var(--red, #bb1730); color: #fff;
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.zp-cta:hover{ background: var(--red-dark, #951125); }
/* 🔵 '아직 못 누름'은 회색으로만 알리지 않는다 — 색만으로는 왜 못 누르는지 모른다.
      실제 문구(.zp-cta__why)를 버튼 아래에 같이 둔다. */
.zp-cta:disabled{ background: #c9cfcb; cursor: not-allowed; }
.zp-cta__why{ margin: 6px 0 0; font-size: 13px; color: var(--muted, #777e79); text-align: center; }
.zp-cta:focus-visible{ outline: 2px solid var(--red, #bb1730); outline-offset: 2px; }

/* ---------- 3단계 안내 ---------- */
.zp-steps{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 16px 16px;
  background: var(--green-soft, #edf5f2); border-radius: 12px;
}
.zp-steps__list{
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 2vw, 18px);
  margin: 0; padding: 0; list-style: none;
}
.zp-steps__item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; max-width: 108px;
  font-size: 13px; font-weight: 700; color: var(--green, #21463b); text-align: center;
}
.zp-steps__icon{
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--green-3, #447466);
}
.zp-steps__arrow{ align-self: center; margin-top: 12px; color: var(--green-3, #447466); flex: none; }
.zp-steps__note{ margin: 12px 0 0; font-size: 13px; color: var(--green-2, #2f5c4e); text-align: center; word-break: keep-all; text-wrap: pretty; }
.zp-steps__wrap{ display: flex; flex-direction: column; }

/* ---------- 지도로 넘어가는 줄 ---------- */
.zp-tomap{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  align-self: center;
  min-height: var(--h-tap); padding: 0 12px;
  color: var(--green, #21463b); font-size: 14px; font-weight: 700;
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.zp-tomap:hover{ text-decoration: underline; }
.zp-tomap:focus-visible{ outline: 2px solid var(--green, #21463b); outline-offset: 2px; }

/* ============================================================
   기존 지도 화면(.app)에 끼워 넣기 — **지도와 지도 버튼은 손대지 않는다**
   ------------------------------------------------------------
   `.app` 은 이미 가로 배치다(style.css:25 `display:flex`).
       .app  ├ .zp-pane        ← 새로 넣는 왼쪽 칸
             ├ .detail-panel   ← 기존(평소 width:0, 단지 고르면 펼쳐짐)
             └ .map-shell      ← 기존 지도 (flex:1 이라 남는 폭을 다 먹는다)
   그래서 **앞에 칸 하나를 더 넣기만 하면** 지도는 그대로 오른쪽에 남는다.
   style.css 의 .map-shell·.detail-panel 규칙은 한 줄도 건드리지 않는다.
   ============================================================ */
/* 🔴 공용 GNB 는 **화면에 떠 있다**(body 첫 자식 div 가 position:fixed, 높이 80/101).
   그래서 `.app` 은 화면 맨 위(0)부터 시작하고 지도의 위쪽 일부가 헤더에 가려져 있었다.
   새 디자인은 GNB 아래에 **탭줄**이 한 줄 더 들어가므로, 그만큼 `.app` 을 내리고
   높이를 줄여야 한다. 안 그러면 문서가 화면보다 정확히 탭줄 높이(49px)만큼 길어진다
   (실측으로 확인: 문서 949 vs 화면 900).
   ⚠️ style.css 의 `.app{height:100%}` 는 건드리지 않는다 — 여기서 덮어쓴다. */
:root{ --zp-viewtabs-h: 49px; }     /* 탭 48 + 아래 테두리 1 */

.zp-viewtabs{
  position: fixed; left: 0; right: 0; top: var(--z360-gnb-h, 80px);
  z-index: 30;
}
/* ⚠️ 바깥 여백(margin-top)으로 내리면 **문서가 그만큼 길어져 헛스크롤이 생긴다**
   (실측: 아무것도 없는 129px 가 스크롤됐다). 안쪽 패딩으로 내려야 전체 높이가 그대로다. */
html[data-zp-view] .app{
  box-sizing: border-box;
  padding-top: calc(var(--z360-gnb-h, 80px) + var(--zp-viewtabs-h));
  height: 100%;
}

/* 🔒 안전장치(집테리어 총괄 지적 09-17): `.app` 은 flex 행이라 이 칸이 폭을 갖는 순간 지도가 밀린다.
   그건 **설계상 의도**(왼쪽 칸 460 + 지도 나머지)지만, **JS 가 실패하거나 아직 안 돈 순간**에
   빈 칸이 지도를 밀면 안 된다. 그래서 기본은 감추고, 라우터가 `html[data-zp-view]` 를 붙인 뒤에만 그린다.
   → JS 가 죽으면 화면은 지금(배포 전)과 완전히 같다. */
.app > .zp-pane{ display: none; }
html[data-zp-view] .app > .zp-pane{ display: flex; }

.app > .zp-pane{
  flex: 0 0 var(--zp-pane-w, 460px);
  min-width: 0;
  height: 100%;
  /* `.app{overflow:hidden}` 이라 이 칸이 스스로 스크롤해야 한다.
     안 주면 내용이 길 때 아래가 잘린 채 스크롤이 안 된다. */
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line, #e6e9e7);
}
/* 단지를 골라 상세 패널이 펼쳐지면 왼쪽 칸은 비켜 준다 —
   시안의 흐름(검색 → 단지 상세)이 한 칸 안에서 이어지기 때문이다.
   ⚠️ 없애지 않고 감추기만 한다. 닫으면 검색하던 상태가 그대로 남는다. */
.app.panel-open > .zp-pane{ display: none; }

@media (max-width: 1180px){ :root{ --zp-pane-w: 400px; } }

/* ============================================================
   모바일 (≤768) — 공용 하단 탭바가 큰 탭 역할을 한다
   ============================================================ */
@media (max-width: 768px){
  /* 🔵 위쪽 큰 탭은 감춘다. 되돌리려면 이 한 줄만 지운다. */
  .zp-viewtabs{ display: none; }

  .zp-pane{ --zp-pane-px: 16px; padding: 20px var(--zp-pane-px) 24px; gap: 16px; }
  .zp-pane__title{ font-size: 24px; }
  .zp-pane__lead{ font-size: 18px; }
  .zp-field__row{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .zp-steps__item{ font-size: 12px; }
  .zp-steps__icon{ width: 42px; height: 42px; }

  /* 하단 탭바에 가리지 않게 — 기본값 필수(계약 ②).
     값이 없거나 자산이 안 떠도 0px 로 안전하게 떨어진다. */
  .zp-pane{ padding-bottom: calc(24px + var(--z360-tabbar-space, 0px)); }

  /* 🔵 부대표 지시(2026-09-16): **모바일 첫 화면에서 지도를 뺀다.**
     대신 하단 탭바의 '지도' 로 오간다. 그래서 모바일에서는
     화면 조각과 지도가 **동시에 보이지 않는다** — 둘 중 하나다.
     ⚠️ 지도 자체와 지도 버튼은 그대로다. 보이고 안 보이고만 바뀐다. */
  /* 🔵 모바일에서는 탭줄이 없으니 `.app` 을 원래대로 되돌린다 —
     **지도 높이를 건드리지 않기 위해서다**(부대표: 지도는 그대로 유지).
     대신 화면 조각만 떠 있는 GNB 높이만큼 내린다. */
  html[data-zp-view] .app{ padding-top: 0; height: 100%; }
  .app > .zp-pane{
    flex: 1 1 auto; width: 100%; height: 100%;
    border-right: 0;
    padding-top: calc(var(--z360-gnb-h, 101px) + 20px);
  }
  html[data-zp-view="map"] .app > .zp-pane{ display: none; }        /* 지도 탭 → 지도만 */

  /* 🔴 배포 후 실측(09-17 12:50, 375)에서 잡힌 결함: 공용 헤더 #zpPortalHeader(fixed) 가 .map-shell 의 자식이라
     .map-shell 을 display:none 으로 감추면 **헤더까지 사라지고** --z360-gnb-h 도 빈 값이 됐다.
     그래서 감추지 않고 **화면 밖으로 밀어 둔다** — fixed 헤더는 뷰포트 기준이라 그대로 보이고,
     지도(#map) 크기는 375 그대로여서 지도↔화면 전환에 재배치도 필요 없다.
     왼쪽(-) 으로 밀면 가로 스크롤(넘침)도 생기지 않는다. */
  html:not([data-zp-view="map"]) .app > .map-shell{
    position: absolute; top: 0; left: -200vw; width: 100vw; height: 100%;
    pointer-events: none;                                  /* 지도 조각이 화면 밖에서 클릭을 먹지 않게 */
  }
  html:not([data-zp-view="map"]) .app > .map-shell > #zpPortalHeader{ pointer-events: auto; } /* 헤더는 눌려야 한다 */
  /* 헤더 안 지도 검색창(fixed, top≈111)은 지도 화면 것 — 화면 조각 제목과 겹치므로 지도 탭에서만 */
  html:not([data-zp-view="map"]) #zpPortalHeader .search-box{ display: none; }
}

@media (max-width: 360px){
  .zp-field__row{ grid-template-columns: 1fr; }   /* 평형·타입이 너무 좁아지면 한 줄씩 */
  .zp-steps__list{ gap: 4px; }
  .zp-steps__item{ font-size: 11px; }
}