/* ==========================================================================
   집팔고360 포털 공통 헤더 — 집테리어 적용 (2026-09-04)
   근거: 집팔고360H_메인_포털_HTML_개발지침_2026-09-03 6-2/6-4,
         집팔고360H_집테리어_연동_지침_2026-09-04.
   원본: zippalgo360_4page_slider_v7_fixed(H 포털 메인 시안, 대표 제공)의
   헤더(js/common.js ZP.renderHeader + css/style.css .top-header 계열)를
   그대로 이식. 기존 zipterior css(style.css/mobile.css/portal.css)의
   변수명(--red/--muted 등)·클래스명과 충돌 없음을 확인함(전수 검색 0건).
   ========================================================================== */
:root{
  --color-core: #9F1730;        /* 집팔고360 브랜드 — 로고 포인트 전용(지침 5장) */
  --color-primary: #D63B3B;     /* 집팔고 서비스색(지침 5장) */
  --color-primary-soft: #FBE4E4;
  --color-sage: #BCCCC2;        /* 공용 보조색(지침 5장, 미사용이지만 토큰만 유지) */
  --color-ink: #1f1f1f;
  --color-muted: #63666d;
  --color-bg-2: #f4efe8;
  --color-border: #e6e0d8;
}

/* zipterior 지도 화면은 #map이 전체를 채우고 topbar/platbar 등은 전부
   .map-shell(position:relative) 기준 absolute로 떠있는 구조다(기존
   .topbar{position:absolute;top:118px;...}도 동일 패턴). 이 헤더도
   같은 방식으로 띄우고, 기존 platbar(44px)+service-nav(44px, top:66px
   시작) 2단이 차지하던 자리를 1단(60px)으로 정리하면서 .topbar의 top을
   그만큼 당긴다(아래 .topbar 오버라이드). pointer-events는 기존
   platbar/service-nav와 동일하게 컨테이너는 none, 실제 클릭요소만 auto. */
#zpPortalHeader{
  position: absolute;
  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;
}
#zpPortalHeader .top-header{
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
}
#zpPortalHeader .logo,
#zpPortalHeader .service-tabs{ pointer-events: auto; }
/* 기존 platbar(14~58px)+service-nav(66~110px) 2단이 쓰던 자리를 1단
   60px 헤더로 정리했으니 .topbar 시작 위치를 그만큼 당긴다(원래
   top:118px). 좌우 여백(14px)·검색창 등 나머지는 기존 그대로 유지. */
.topbar{ top: 68px !important; }
@media (max-width: 760px){
  /* 이 폭 이하는 /m으로 리다이렉트되어 실사용 노출은 없지만 방어적으로만. */
  .topbar{ top: 60px !important; }
}
#zpPortalHeader .logo{
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--color-ink);
  white-space: nowrap;
}
#zpPortalHeader .logo span{ color: var(--color-core); }
#zpPortalHeader .service-tabs{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 28px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#zpPortalHeader .service-tabs::-webkit-scrollbar{ display: none; }
#zpPortalHeader .service-tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-ink);
}
#zpPortalHeader .service-tab .tab-text{ line-height: 1; }
#zpPortalHeader .service-tab.active{ color: var(--color-primary); cursor: default; }
#zpPortalHeader .service-tab.active::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 999px;
  background: var(--color-primary);
}
#zpPortalHeader .service-tab-service{ position: relative; gap: 0; }
#zpPortalHeader .service-tab-service .tab-caption{
  position: absolute; left: 50%; bottom: calc(50% + 11px);
  transform: translateX(-50%);
  width: max-content; margin: 0;
  color: var(--color-primary); font-size: 10px; font-weight: 700;
  line-height: 1; white-space: nowrap;
}
#zpPortalHeader .badge-soon,
#zpPortalHeader .service-soon-marker{
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--color-bg-2); color: var(--color-muted);
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
#zpPortalHeader .service-upcoming-group{
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 4px; white-space: nowrap;
}
@media (max-width: 1024px){
  #zpPortalHeader .top-header{ padding: 0 16px; gap: 20px; }
  #zpPortalHeader .service-tabs{ gap: 18px; }
  #zpPortalHeader .service-tab{ font-size: 14px; min-height: 52px; }
}
@media (max-width: 760px){
  /* 이 폭 이하는 index.html 자체가 /m으로 리다이렉트되어(v2.5.41) 이
     데스크톱 헤더는 사실상 노출되지 않는다 -- 방어적으로만 축소. */
  #zpPortalHeader .top-header{ padding: 0 12px; gap: 14px; }
  #zpPortalHeader .service-tabs{ gap: 12px; }
  #zpPortalHeader .service-tab{ font-size: 13px; }
  #zpPortalHeader .service-tab-service .tab-caption{ font-size: 9px; }
}
/* 기존 platbar/service-nav와 동일한 임베드 숨김 규칙(집팔고360n Core
   iframe 중복 노출 방지) — 이 헤더에도 그대로 적용해 동작을 유지한다. */
html.zt-embedded #zpPortalHeader,
html.zp-zippalgo-embedded #zpPortalHeader{ display: none !important; }

/* ---- 햄버거 패널(#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;
}