/* ==========================================================================
   집팔고360 포털 공통 헤더 — 집테리어 적용 (2026-09-04, 2차 동기화)
   근거: 집팔고360H_디자인_UIUX_개발지침_2026-09-04(공통헤더 GNB 확정본),
         공통헤더 작업지시 1~6장 + 헤더메뉴 수정 1~2장(★360H_INDEX_헤더메뉴
         세션 크로스메시지로 부대표 직접지시 전달받음, 2026-09-04).
   원본: zippalgo360_4page_slider_v7_fixed(H 포털 최종 시안)의 헤더
   (js/common.js ZP.renderHeader류 + css/style.css .top-header 계열)를
   zipterior 자체 구조(#zpPortalHeader가 .map-shell 위에 absolute로 뜨는
   구조)에 맞게 이식. 1차 이식(같은 날 이전 버전)에서 로고가 텍스트였고
   CTA로테이션·COMING모달·뱃지 위치가 최종본과 어긋나 있던 걸 이번에
   전부 최종본 기준으로 재동기화한다.
   ========================================================================== */
:root {
  /* 지침 확정: core(#9F1730) 폐지, ink 구값(#1f1f1f)도 폐지 -- primary/ink만 사용 */
  --color-primary: #D63B3B;
  --color-primary-soft: #FBE4E4;
  --color-ink: #2b2b2b;
  --color-muted: #63666d;
  --color-bg: #faf8f5;
  --color-bg-2: #f4efe8;
  --color-border: #e6e0d8;
  --radius-lg: 20px;
}
/* zipterior 지도 화면은 #map이 전체를 채우고 topbar/platbar 등은 전부
   .map-shell(position:relative) 기준 absolute로 떠있는 구조다(기존
   .topbar{position:absolute;top:118px;...}도 동일 패턴). 이 헤더도
   같은 방식으로 띄우고, .topbar의 top을 헤더 실제 높이만큼 당긴다
   (아래 .topbar 오버라이드). pointer-events는 기존 platbar/service-nav와
   동일하게 컨테이너는 none, 실제 클릭요소만 auto.
   2026-09-05: 부대표 지적("간격이 하나도 안 맞는다")으로 레퍼런스
   (zippalgo360_4page_slider_v7_fixed, localhost 서버로 직접 띄워
   getBoundingClientRect·getComputedStyle로 실측)와 1280px 기준으로
   전부 다시 대조했다. 1차 이식 때 zipterior 기존 공간(원래 2단 88px)에
   맞추려고 60px로 줄였던 게 레퍼런스(80px)보다 눈에 띄게 낮고 빽빽해
   보였던 원인 — 이번엔 압축하지 않고 레퍼런스 실측값 그대로 맞춘다. */
/* 2026-09-05 4차: position:absolute -> fixed. 마커 클릭 시 여는 단지정보
   패널(.detail-panel)은 .app{display:flex}의 형제(flex:0 0 auto, width
   0->var(--panel-width))라 열리면 다음 flex 형제인 .map-shell 전체가
   오른쪽으로 밀리고 좁아진다(.app.panel-open .detail-panel, style.css
   27번째 줄). #zpPortalHeader가 absolute로 .map-shell을 기준삼고 있어서
   같이 밀려 좁아져 보였다(실측: 클릭 전 header{left:0,width:1920} ->
   클릭 후 {left:430,width:1490} -- 실제 재현/확인함). fixed로 바꾸면
   뷰포트 기준으로 고정되어 .detail-panel의 flex 폭 변화와 완전히
   무관해진다(.app/.map-shell 둘 다 transform 등 새 containing block을
   만드는 속성이 없어 fixed가 정상적으로 뷰포트 기준을 잡는 것도 확인함).
   아래 .detail-panel{margin-top:84px}과 짝을 이뤄 "헤더는 고정, 패널은
   헤더 아래에 노출"을 만든다(부대표 지시, 헤더메뉴 수정 3장). */
#zpPortalHeader {
  position: fixed;
  z-index: 2600; /* 기존 platbar/service-nav와 동일한 값, .topbar(2500)보다 위 */
  left: 0; right: 0; top: 0;
  pointer-events: none;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--color-border);
  font-family: Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* 2026-09-07 핫픽스: 위 #zpPortalHeader 는 pointer-events:none 이고, 클릭은
   자식에서 되살리는 구조다. 공용 GNB 로 바꾸며 헤더 시각 규칙을 걷어낼 때
   그 "되살리는 줄"(.logo,.service-tabs,.search-box,.header-right 다중 셀렉터)이
   같이 지워져 헤더 전체가 클릭 불가가 됐다(실측: 햄버거 위치 히트테스트가
   지도 SVG 를 반환).
   자식 이름을 나열하는 대신 직계 자식 전부로 걸어 공용 GNB 가 내부 구조를
   바꿔도 안 깨지게 한다. 자식 사이 여백은 원래대로 통과시킨다. */
#zpPortalHeader .top-header > * { pointer-events: auto; }
/* 헤더가 항상 뷰포트 상단에 고정으로 뜨므로, .detail-panel(단지정보
   패널) 콘텐츠가 헤더에 가려진 채(패널 자체는 top:0부터 시작) 노출되지
   않도록 그만큼 밀어준다. margin-top은(absolute 자식과 달리 padding이
   아니라) 패널 박스 자체를 내리는 값이라 안의 .panel-close 같은 절대
   배치 자식도 함께 내려간다 -- flex(align-items 기본 stretch) 자식이라
   margin-top만큼 높이도 자동으로 줄어 화면 아래쪽이 넘치지 않는다(실측
   확인: 적용 후 .detail-panel{top:84,height:835}, 안의
   .cluster-select-head도 top:84로 헤더 밑에 정상 노출됨). */
.detail-panel { margin-top: 84px; }
/* 2026-09-06 23차: 위 1단(.detail-panel)만 내려놨더니, 같은 이유로 y=0 부터
   시작하는 2단(포트폴리오 상세)·3단(업체 상세) 패널의 상단이 고정 헤더에
   가려져 있었다(부대표 지적). 실측: 두 패널 모두 top:0 -> 자체 헤더(제목·
   즐겨찾기·닫기 60px)가 통째로 헤더 뒤로 숨고, 업체 패널의 닫기(X)는 헤더
   햄버거 버튼에 덮여 클릭조차 안 됐다(elementFromPoint 로 확인). 외부 닫기
   버튼도 top:14px 라 로고·탭 위에 X가 겹쳐 보였다.
   모바일(<=760px)은 전체화면 패널이라 그대로 두고 데스크톱만 내린다. */
@media (min-width: 769px) {
  .app > .portfolio-detail-panel,
  .app > .company-detail-panel{ top: 84px; }
  .app > .pc-outer-panel-close{ top: 94px; }
}
/* 통합검색창(원래 zipterior 자체 .topbar에 있던 걸 부대표 지시로 이
   위치로 이전, 로고 zipterior-logo.png는 제거함) -- .search-box 자체의
   기본 스타일(height:64px;max-width:520px 등)은 zipterior 기존
   css/style.css에 이미 있어 그대로 물려받고, 여기서는 GNB 행 안에서
   남는 공간을 채우도록 flex만 지정한다. */
#zpPortalHeader .search-box {
  flex: 1 1 auto;
  /* 2026-09-07: margin:0 24px 삭제 -- 공용 GNB(zip360.kr/shared/gnb-v1)의
     .top-header{gap:38px}가 이미 형제 요소 사이 간격을 담당한다. 같이 두면
     양쪽 62px로 중복 벌어짐(부대표 지시로 제거, 간격은 공용 쪽에서 공통 관리). */
}
/* 2026-09-06: 부대표 지시 "통합 검색창 그림자 이런 거 없애고 박스 1개로만".
   원래 style.css 의 .search-box 는 64px 바깥 박스(반투명 배경+테두리+큰
   그림자+블러, padding 10px) 안에 42px 입력창(자기 테두리)이 또 들어가는
   이중 박스였다. 바깥 박스를 투명/무테두리로 비우고 입력창 하나만 남긴다.
   치수는 zippalgo360.com/map 검색창 실측(높이 46px, radius 16px, 테두리
   1px #e6e9e7, 글자 14px, 아이콘 18px 초록 stroke 2.4, 포커스 시 테두리
   brand-green)과 맞추되, 레퍼런스에 있는 shadow-md 는 지시대로 뺐다. */
#zpPortalHeader .search-box {
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
#zpPortalHeader .search-box input {
  height: 46px;
  padding: 12px 44px 12px 16px;
  border: 1px solid #e6e9e7;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  font-size: 14px;
  color: #202421;
}
#zpPortalHeader .search-box input::placeholder { color: #777e79; }
#zpPortalHeader .search-box input:focus { border-color: #21463b; }
#zpPortalHeader .search-icon {
  right: 16px; top: 0; bottom: 0; width: 18px;
  color: #21463b;
}
#zpPortalHeader .search-icon svg { width: 18px; height: 18px; stroke-width: 2.4; }
/* 결과 드롭다운은 원래 64px 박스 기준 top:70px 이었음 -> 46px 박스 + 6px */
#zpPortalHeader .search-results { top: 52px; }
/* 2026-09-05 3차 수정: 레퍼런스가 1360px에서 한 단계 더 축소되는 걸
   놓쳤었다(그 아래 값을 기본값으로 착각) -- 여기서 그 단계를 복원한다.
   width:min(1440px,100% - 64px)는 폭에 상관없이 그대로 유지(좁은
   화면에서는 이미 100% - 64px로 자동 축소되므로 별도 padding 오버라이드
   불필요). */
/* 기존 platbar/service-nav와 동일한 임베드 숨김 규칙(집팔고360n Core
   iframe 중복 노출 방지) — 이 헤더에도 그대로 적용해 동작을 유지한다. */
html.zt-embedded #zpPortalHeader,
html.zp-zippalgo-embedded #zpPortalHeader { display: none !important; }
/* ---- 서비스예정 안내 모달(집사고·집서비스·CTA "원하는 아파트" 공용,
   헤더메뉴 수정 1장: 토스트 대신 모달, 닫기버튼+3초 자동닫힘+배경
   스크롤 잠금) — js/zp-portal-header.js가 생성/제거한다. ---- */
html.zp-modal-open, body.zp-modal-open { overflow: hidden; }
.zp-coming-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000; /* #zpPortalHeader(2600)보다 위 */
  background: rgba(15,18,24,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.zp-coming-modal {
  position: relative;
  width: min(320px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(31,31,31,.18);
  padding: 34px 24px 26px;
  text-align: center;
  font-family: Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.zp-coming-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 15px;
  cursor: pointer;
}
.zp-coming-modal-text {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.6;
}
/* ---- 햄버거 패널(#adminQuickMenu) 내용물 스킨만 새 시안 톤으로 —
   구조·클래스·기능(data-portal-url/customer-logout-btn 등, index.html
   하단 인라인 스크립트가 그대로 관리)은 전혀 건드리지 않는다. ---- */
#adminQuickMenu .menu-section-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
#adminQuickMenu button,
#adminQuickMenu a {
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  margin: 5px 0 !important;
  font-weight: 700 !important;
}
#adminQuickMenu .customer-logout-btn {
  color: var(--color-primary) !important;
  border-color: var(--color-primary-soft) !important;
}

/* ============================================================
   2026-09-08: 모바일에서 통합검색창을 헤더 밖(지도 위)으로 띄운다.
   ------------------------------------------------------------
   [왜] 375x812 실측에서 헤더가 242px(화면의 30%)를 먹고 있었다.
   검색창이 폭 100%라 wrap 을 유발해 header-right 가 독립된 줄로
   밀려나면서 4행(로고/검색/버튼/탭)이 됐기 때문이다. 모바일 전담
   세션이 공용 GNB 를 보정해 200px 까지 줄였고, 검색창을 빼면
   2행 98px 이 된다(그쪽 실측). 지도 가시영역 612 -> 714px.

   [부대표 결정] 선택지 4개(지도 위 floating / 탭 아래 한 줄 /
   아이콘만 두고 확장 / 유지) 중 **지도 위 floating** 으로 확정.
   카카오맵·네이버지도가 쓰는 방식이라 익숙하고 검색창 크기를
   줄이지 않아도 된다는 이유.

   [마크업을 안 건드리는 이유] index.html 의 슬롯 스크립트가
   `slots.querySelector('.search-box')` 로 검색창을 찾아 공용 GNB 에
   주입한다. DOM 을 옮기면 그 배선이 깨지므로 CSS 로만 위치를 바꾼다.

   [top:111px 근거] 검색창을 뺀 뒤 #zpPortalHeader 바닥선이 99px
   (모바일 세션 실측). 거기에 여백 12px.

   [패널 열릴 때 숨기는 이유] 모바일에서 세 상세 패널이 모두
   전체화면(inset:0)이고, 헤더는 z-index 2600 으로 그 위에 그려진다
   (패널 z: detail 1200 / company 2300 / portfolio 2400).
   검색창은 헤더 자식이라 stacking context 상 z-index 를 낮춰도
   패널 위에 뜬다 -- 실측으로 확인함. 그래서 z-index 대신 :has() 로
   패널이 열리면 감춘다(:has() 지원 확인함).
   ============================================================ */
@media (max-width: 768px) {
  #zpPortalHeader .search-box {
    position: fixed;
    top: 111px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
  }
  /* 지도 위에 떠 있으므로 배경과 분리되도록 그림자를 준다.
     (데스크톱은 부대표 지시로 그림자를 뺐지만, 그건 헤더 안에
     있을 때 얘기다 -- 지도 위에서는 경계가 안 보인다.) */
  #zpPortalHeader .search-box input {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
    /* 2026-09-08: iOS Safari 는 16px 미만 입력을 탭하면 화면을 자동 확대하고
       되돌리지 않는다. 14px -> 16px 로 올려 그 버그를 피한다(모바일 전담
       세션이 집팔고에서 같은 문제를 먼저 확인해 알려줌).
       ⚠️대신 placeholder 가 더 잘린다: 가용폭 291px 인데 14px 일 때 315px,
       16px 면 360px 필요. **지금도 이미 잘리고 있는 상태**라 16px 로 올리는
       쪽이 낫다고 판단했다(탭할 때마다 화면이 확대되는 것보다는 낫다).
       문구를 줄일지는 부대표 판단으로 남겨둔다. */
    font-size: 16px;
  }

  /* 상세 패널이 열리면 지도 검색창은 감춘다(패널 콘텐츠를 가림) */
  body:has(.detail-panel.open) #zpPortalHeader .search-box,
  body:has(.company-detail-panel.open) #zpPortalHeader .search-box,
  body:has(.portfolio-detail-panel.open) #zpPortalHeader .search-box {
    display: none;
  }
}

/* ============================================================
   터치 기기에서 hover 잔상 방지 — 2026-09-10 모바일 세션
   ------------------------------------------------------------
   손가락에는 커서가 없는데 :hover 규칙이 그대로 살아 있으면,
   탭한 뒤 배경색이 남아 버튼이 계속 눌린 것처럼 보인다.
   마우스가 있는 기기(hover: hover)에서만 적용되게 감싼다 —
   데스크톱 동작은 그대로이고 터치 기기에서만 효과가 빠진다.
   ※ .is-active 같은 선택 상태는 옮기지 않았다(터치에서도 필요).
   ============================================================ */
@media (hover: hover) {
  .zp-coming-modal-close:hover{ background: var(--color-bg-2); }
  #adminQuickMenu button:hover, #adminQuickMenu a:hover{ background: var(--color-bg-2) !important; color: var(--color-ink) !important; }
}