/* ==========================================================================
   집팔고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: 761px) {
  .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;
  margin: 0 24px;
}
/* 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-close:hover { background: var(--color-bg-2); }
.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 button:hover,
#adminQuickMenu a:hover {
  background: var(--color-bg-2) !important;
  color: var(--color-ink) !important;
}
#adminQuickMenu .customer-logout-btn {
  color: var(--color-primary) !important;
  border-color: var(--color-primary-soft) !important;
}