/* ============================================================
   집테리어 최종 디자인 — 큰 탭 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; }
/* 🔴 2026-09-21 수정 — **내가 낸 결함**(부대표 지적으로 실측): 바로 위 줄은 특이도가
   (0,2,1) 인데, 이 칸을 그리는 규칙 `html[data-zp-view] .app > .zp-pane{display:flex}` 는
   (0,3,1) 이라 **항상 이긴다**. 그래서 단지 상세가 열려도 왼쪽 칸이 안 비켜서
   왼쪽칸 + 단지상세 + 지도 = **3단**이 됐다(전 서비스 규칙: 최대 2단).
   같은 조건을 앞에 붙여 (0,4,1) 로 올린다. 동작은 원래 의도 그대로다. */
@media (min-width: 769px){
  html[data-zp-view] .app.panel-open > .zp-pane{ display: none; }
}
/* ⚠️ 모바일(≤768)은 일부러 그대로 둔다. 거기선 상세 패널이 화면을 꽉 채워(inset:0 auto 0 0)
   3단이 생길 수 없고, 탭 이동 중 panel-open 이 남아 있으면 빈 화면이 될 위험만 커진다. */

/* 🔴 2026-09-21 수정 — **내가 낸 결함**: 이 칸만 1180 초과에서 460 이었다. 기존 상세 패널들은
   모두 `--panel-width`(400) 를 쓰는데, 내가 이 칸과 포폴·업체 패널만 460 으로 따로 잡아
   **1단 460 · 2단 400** 으로 어긋났다(1280 실측). 게다가 포폴 패널은 `left:var(--panel-width)`
   =400 에서 열려 460 짜리 왼쪽 칸을 **60px 덮었다** — 부대표가 보신 "포폴 창이 위를 덮었다".
   고침: 이 칸 폭을 기존 변수에 **묶는다**. 화면 폭별 반응(1060·768·모바일)도 자동으로 따라온다.
   ⚠️ `--panel-width` 자체는 건드리지 않는다(관리자·업체홈 등 다른 화면이 같이 쓴다). */
:root{ --zp-pane-w: var(--panel-width, 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; }
}

/* 🔴 2026-09-21 수정 — **내가 낸 결함**: 0단계에서 위쪽 탭줄(49px)을 GNB 아래에 새로 넣으면서
   기존 상세 패널들의 시작 위치를 그대로 뒀다. 그 패널들은 `top:84px`(GNB 아래)로 열리도록
   돼 있어서 **탭줄을 덮어 버렸다**(포폴 z2200 · 업체 z2300 · 채팅 z900 > 탭줄 z30).
   배포 후 검증에서 패널 '폭'만 재고 **실제로 열어 보지 않아** 넉 달 만에 부대표가 먼저 발견했다.
   고침: `top` 만 탭줄 높이만큼 내린다 — `bottom:0` 이 유지되므로 높이는 자동으로 줄어든다.
   폭도 왼쪽 칸과 같게 맞춘다(전 서비스 규칙: 상세 1단 = 2단 폭 동일).
   ⚠️ 모바일(≤768)은 탭줄이 없으므로 건드리지 않는다. */
/* ⚠️ 1차 수정(84px+49px)은 1280 에서만 맞았다. 창이 좁아 헤더가 두 줄이 되면(1024 에서 GNB 132)
      고정 84px 이 헤더 속으로 들어가 **여전히 어긋났다** — 기존 패널들이 애초에 GNB 가변 높이를
      따르지 않고 80px 기준 고정값을 쓰고 있었다. 그래서 **변수로 다시 계산**한다.
        패널 위 여백 = GNB + 탭줄 + (원래 여백: 패널 4 · 채팅 17 · 닫기버튼 14)
      이러면 헤더가 한 줄이든 두 줄이든 따라간다. */
@media (min-width: 769px){
  html[data-zp-view] #portfolioDetailPanel,
  html[data-zp-view] #companyDetailPanel{
    top: calc(var(--z360-gnb-h, 80px) + var(--zp-viewtabs-h, 49px));   /* 디자인-056 10-26(📮 김정훈-113 「2번째 창 틈새 붙이기」): + 4px 틈 없앰 — 탭 줄 바로 아래 · 첫 칸과 같은 높이 */
    width: var(--zp-pane-w, 460px);
  }
  html[data-zp-view] #chatPanel{
    top: calc(var(--z360-gnb-h, 80px) + var(--zp-viewtabs-h, 49px) + 17px);
  }
  /* 패널 닫기(X) — GNB 안쪽에 떠 있었다 */
  html[data-zp-view] #pcOuterPanelClose{
    top: calc(var(--z360-gnb-h, 80px) + var(--zp-viewtabs-h, 49px) + 14px);
  }
  /* 단지 패널은 `.app` 의 flex 항목인데 margin-top:84px 를 따로 갖고 있어,
     내가 `.app` 에 준 padding-top 위에 **이중으로** 얹혀 위쪽이 84px 비었다. */
  html[data-zp-view] .app > .detail-panel{ margin-top: 0; }
}

/* ============================================================
   🔴 2026-09-21 실측 결함 — 모바일 단지 상세: 닫기(X)가 통계 네 번째 칸을 덮는다
   ------------------------------------------------------------
   375 실측: X 321~359 · `.portfolio-strip` 4번째 칸 281~375 → "타입 6" 이 X 밑에 깔린다.
   `.detail-panel.mobile-tabs-docked::before` 가 흰 안전영역(54px)을 만들지만 그 클래스는
   **스크롤해야** 붙는다. 그래서 **맨 위(스크롤 0)** 에서만 겹친다 — 화면 열자마자 보이는 그 순간이다.
   고침: 통계줄 오른쪽에 X 자리(38+8)만큼 여백을 준다. 칸 4개는 그만큼 좁아질 뿐
   빈 줄이 생기지 않는다(전에 지적받은 "위에 공간 비는거" 를 만들지 않는 방법).
   실측(고침 후): 4번째 칸 247~329, 글자 중앙 288 → X(321~) 와 안 겹친다.
   ⚠️ PC 는 닫기 버튼이 패널 바깥(fixed)이라 해당 없음 → 모바일만.
   ============================================================ */
@media (max-width: 768px){
  .detail-panel .portfolio-strip{ padding-right: 46px; }
}

/* ============================================================
   🔴 2026-09-21 실측 결함 — 공용 헤더가 3% 비쳐서 뒤 내용이 글자로 읽힌다
   ------------------------------------------------------------
   375 실측: `#zpPortalHeader` 배경이 rgba(255,255,255,.97) 인데 `backdrop-filter` 는 none.
   흐림 없이 3%만 비치니, 뒤로 지나가는 업체 카드 이름이 로고·로그인 옆에 **또렷한 회색 글자**로
   겹쳐 보인다(빨강으로 바꿔 덮이는 범위를 확인 → 투명도가 원인). 서리유리 효과를 의도한 값이지만
   흐림이 없어 "화면이 깨진 것"처럼 보인다.
   고침: 집테리어 화면에서만 불투명하게. 공용 자산(z360 헤더) 자체는 건드리지 않는다 —
   집팔고·집사고가 같이 쓰기 때문이다. 전 서비스에 적용할지는 부대표 결정 사항.
   ============================================================ */
html[data-zp-view] #zpPortalHeader{ background: #fff; }

/* ---------- 연락 확인 창(전화·문자) · 짧은 알림 ----------
   2026-10-15 직원 점검(07ed2d·268eef): zp-views.js 가 만드는 .zp-modal·.zp-toast 에 모양이 하나도 없어서
   창이 페이지 맨 아래에 그냥 붙고, ×·취소를 눌러도(클래스 is-on 만 빠짐) 닫히지 않았다. 가운데 뜨는 창·아래 알림으로. */
.zp-modal{ position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(7,18,14,.45); }
.zp-modal.is-on{ display: flex; }
.zp-modal__box{ position: relative; width: min(380px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 16px; padding: 22px 20px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.25); font-size: 14px; color: var(--ink, #202421); }
.zp-modal__close{ position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; color: var(--muted, #777e79); cursor: pointer; }
.zp-modal__close:hover{ background: var(--soft, #f5f6f5); }
.zp-modal__title{ margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.zp-modal__co{ display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg, 12px); margin: 0 0 14px; }
.zp-modal__logo{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--green-soft, #edf5f2); color: var(--green, #21463b); font-weight: 800; }
.zp-modal__name{ display: block; font-size: 15px; font-weight: 800; }
.zp-modal__hours{ display: block; font-size: 12px; color: var(--muted, #777e79); }
.zp-modal__tel{ display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; color: var(--green-2, #2f5c4e); }
.zp-modal__lead{ margin: 0 0 6px; font-size: 13px; color: var(--muted, #777e79); }
.zp-modal__script{ padding: 12px; border-radius: 10px; background: var(--soft, #f5f6f5); font-weight: 700; margin: 0 0 8px; }
.zp-modal__hint{ margin: 0 0 14px; font-size: 12px; color: var(--muted, #777e79); }
.zp-modal .zp-cta{ width: 100%; }
.zp-modal__sub{ margin: 8px 0 2px; font-size: 12px; color: var(--muted, #777e79); text-align: center; }
.zp-modal__cancel{ display: block; width: 100%; height: 42px; margin-top: 4px; border: 0; background: transparent; color: var(--muted, #777e79); font-weight: 700; cursor: pointer; }
.zp-toast{ position: fixed; left: 50%; bottom: 28px; z-index: 9100; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; background: #1d2420; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.zp-toast.is-on{ opacity: 1; transform: translate(-50%, 0); }
.zp-toast__ok{ flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1f8a5c; }
/* 10-22 집테관리-036(김정훈 팀장 「수기입력으로 바뀐 칸은 화살표 없애기」): 직접 적는 칸(input)이 .zp-select 꾸밈을 쓰면 고르는 칸 화살표가 따라 나왔다.
   글 칸만 화살표 없이 — 고르는 칸(select)은 그대로. 날짜 칸은 브라우저 달력 표시만 남는다. */
input.zp-select{ background-image: none; padding-right: 14px; }
/* ============================================================
   10-23 모바일-003(김정훈 팀장 「포폴 목록 x 창닫기 버튼」) — 휴대폰 단지 상세(포트폴리오 · 타입 · 단지정보)
   ------------------------------------------------------------
   원래: 내려서 탭이 위에 붙으면(.mobile-tabs-docked) 패널 맨 위에 흰 띠(54px · ::before)가 생기고
         x 하나만 그 띠에 있어 「한 줄 전체를 차지」 · 탭은 그 띠 아래(top:54px)에 붙음.
   고침: ① x = 작은 동그라미(34px · 살짝 음영 · 반투명 흰 바탕) — 휴대폰에선 늘
         ② 흰 띠 없앰 · 탭이 맨 위(위쪽 「집팔고 · 집테리어 · 집사고 · 집서비스」 바로 아래)에 붙음
         ③ 탭이 붙은 동안 탭 줄 오른쪽에 x 자리(52px)를 비우고 x 를 탭 줄 가운데 높이에 둠
   10-23 모바일-006(김정훈 팀장 「평 · ㎡ 단추가 모바일 화면에서 방해되는 위치 → 적정 위치로」)
   원래: 탭이 붙으면 평/㎡ 단추가 탭 아래 오른쪽(top:116px)에 떠서 포트폴리오 카드 제목·사진을 가림.
   고침: ④ 평/㎡ 단추를 탭 줄 안 · x 바로 왼쪽으로(떠 있는 그림자 없이 작은 칸) — 내용 위에 아무것도 안 뜸
         ⑤ 포트폴리오 상세의 같은 단추도 맨 위 제목 줄(♡ 왼쪽)로
         탭 줄 오른쪽 비운 자리 52px → 128px(평/㎡ 70px + x 34px + 사이)
   PC(769 이상)는 안 바뀜.
   ============================================================ */
@media (max-width:768px){
  .detail-panel .panel-close{
    width:34px;height:34px;top:10px;right:12px;
    border:1px solid rgba(33,41,37,.08);border-radius:50%;
    background:rgba(255,255,255,.86);
    box-shadow:0 2px 8px rgba(0,0,0,.16);
    font-size:19px;line-height:1;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .detail-panel .panel-close:hover{background:rgba(255,255,255,.96)}
  .detail-tabs{top:0}
  .detail-panel.mobile-tabs-docked::before{display:none}
  .detail-panel.mobile-tabs-docked .detail-tabs{padding-right:128px}
  .detail-panel.mobile-tabs-docked .panel-close{top:16px}
  .detail-panel.mobile-tabs-docked .mobile-panel-area-unit{top:16px;right:52px;height:34px;padding:2px 5px;gap:1px;border-color:rgba(33,70,59,.12);border-radius:17px;box-shadow:none;background:#fff}
  .detail-panel.mobile-tabs-docked .mobile-panel-area-unit button{border-radius:14px}
  /* 같은 단추가 포트폴리오 상세(내렸을 때 사진 위 top:100px)에도 떠 있음 → 맨 위 제목 줄 ♡ 왼쪽으로 */
  .portfolio-detail-panel.mobile-actions-docked .portfolio-detail-area-unit{top:11px;right:108px;height:36px;padding:2px 5px;gap:1px;border-color:rgba(33,70,59,.12);border-radius:18px;box-shadow:none;background:#fff}
  .portfolio-detail-panel.mobile-actions-docked .portfolio-detail-area-unit button{border-radius:14px}
  /* 제목이 평/㎡ 단추 밑으로 안 들어가게(단추 왼쪽 끝 = 화면 폭 - 187px) — 「← 목록/업체정보」 가 있으면 제목이 71px 오른쪽에서 시작 */
  .portfolio-detail-panel.mobile-actions-docked .portfolio-detail-head h2{min-width:0;max-width:calc(100vw - 203px);overflow:hidden;text-overflow:ellipsis}
  .portfolio-detail-panel.mobile-actions-docked[data-opened-from-list] .portfolio-detail-head h2,
  .portfolio-detail-panel.mobile-actions-docked[data-opened-from-company] .portfolio-detail-head h2{max-width:calc(100vw - 274px)}
}

/* ============================================================
   10-23 모바일-008(김정훈 팀장 「모바일 평전환 버튼 삭제 · 견적문의 빨간 버튼 상자 크기 조정」)
   ------------------------------------------------------------
   원래: ① 휴대폰 단지 창 탭 줄 · 포트폴리오 상세 제목 줄에 평/㎡ 단추(오늘 모바일-006 에서 그 자리로 옮김)
         ② 단지 창 맨 아래 빨간 「이 단지 인테리어 견적문의」 단추가 화면 끝에서 끝까지(카드는 좌우 18px 안쪽)
   고침: ① 휴대폰에선 평/㎡ 단추를 안 보임(늘 평 · 고른 값은 저장 안 되던 것이라 남는 값 없음) · 탭 줄 오른쪽 비운 자리 128px → x 자리 52px
         ② 빨간 단추 상자에 좌우 18px — 카드와 같은 폭
   PC(769 이상)는 안 바뀜.
   ============================================================ */
@media (max-width:768px){
  .detail-panel .mobile-panel-area-unit,
  .portfolio-detail-panel .portfolio-detail-area-unit{display:none!important}
  .detail-panel.mobile-tabs-docked .detail-tabs{padding-right:52px}
  .portfolio-detail-panel.mobile-actions-docked .portfolio-detail-head h2,
  .portfolio-detail-panel.mobile-actions-docked[data-opened-from-list] .portfolio-detail-head h2,
  .portfolio-detail-panel.mobile-actions-docked[data-opened-from-company] .portfolio-detail-head h2{max-width:none}
  .detail-panel .zp-ef-complex-cta{padding-left:18px;padding-right:18px}
}

/* ============================================================
   10-23 디자인-033(김정훈 팀장 「지도 평 버튼 아래 회색 음영선 없애기」)
   ------------------------------------------------------------
   원래: 휴대폰 지도 오른쪽 단추 칸(.map-quick-controls)은 짧은 화면 대비로 「안에서 스크롤되는 칸」(overflow-y:auto · zp-map-rail.css)인데,
         안쪽 내용 폭이 47px 로 칸(44px)보다 3px 넓어 가로로도 넘침 → 안드로이드(삼성 인터넷 등)가 칸 맨 아래(= 평 단추 바로 아래)에 회색 스크롤 막대를 그림.
   고침: 가로 넘침은 잘라 막고(세로 스크롤은 그대로) · 스크롤 막대는 그리지 않음. PC 그대로.
   ============================================================ */
@media (max-width:768px){
  .map-shell > .map-quick-controls{overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .map-shell > .map-quick-controls::-webkit-scrollbar{display:none;width:0;height:0}
}