/* ============================================================
   집360 공용 모바일 하단 탭바 v1 — 2026-09-16 (디자인 총괄)
   ============================================================
   세 서비스(집팔고·집사고·집테리어)가 한 벌을 공유한다. 계약은
   outputs/집테리어_최종디자인_검토_2026-09-16.md 4-5 장에 있다. 요지:

   ① 탭바는 **화면 이동만** 한다. 화면 안의 목록↔지도 토글은 각 서비스 것이고
      여기서 건드리지 않는다.
   ② 자리를 빼거나 비울 때 쓰는 값은 **--z360-tabbar-space** 하나다.
      --z360-tabbar-h 는 탭바가 자기를 그릴 때만 쓴다(safe-area 이중 가산 방지).
      쓰는 쪽은 반드시 기본값을 함께 적는다: var(--z360-tabbar-space, 0px)
      — calc() 안에 미정의 변수가 하나라도 있으면 그 선언 전체가 무효가 되어
        값이 0 이 되는 게 아니라 속성이 사라진다(집팔고 총괄 지적).
   ③ 아래 :root 기본값 0 은 **자산이 로드되자마자** 깔린다. 탭바를 그리지 않는
      화면(PC·관리자·단독 페이지)이나 숨김 상태에서도 0 이 유지된다.
   ④ z-index 는 서비스마다 척도가 달라 --z360-tabbar-z 로 받는다
      (집팔고·집사고 150 / 집테리어 1100). 기본값 150.
   ============================================================ */

:root{
  --z360-tabbar-h: 0px;
  --z360-tabbar-space: 0px;
}

/* 탭바 자신 -------------------------------------------------- */
.z360-tabbar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z360-tabbar-z, 150);
  display: flex; align-items: stretch;
  background: var(--z360-tabbar-bg, #fff);
  border-top: 1px solid var(--z360-tabbar-line, #E6E9E7);
  /* 아이폰 홈 인디케이터 영역만큼 안쪽 여백을 준다. 이 패딩이 들어간 전체 높이가
     --z360-tabbar-space 이고, 그 위 내용 높이가 --z360-tabbar-h 다. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: inherit;
}
.z360-tabbar[hidden]{ display: none; }

.z360-tabbar__item{
  position: relative;
  flex: 1 1 0; min-width: 0;
  min-height: 56px;              /* 디자이너 확정 전 임시값. JS 가 실측해 변수에 넣는다 */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px;
  border: 0; background: transparent;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
  color: var(--z360-tabbar-ink, #6E7672);
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 보이는 상자는 그대로 두고 누르는 자리만 넓힌다(공용 GNB 탭과 같은 방식) */
.z360-tabbar__item::before{ content: ""; position: absolute; inset: -2px 0; }
.z360-tabbar__item svg{ width: 22px; height: 22px; display: block; flex: none; }
.z360-tabbar__label{
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.z360-tabbar__item.is-on{ color: var(--z360-tabbar-on, #2F6B4A); }
.z360-tabbar__item.is-on svg{ stroke-width: 2.2; }
.z360-tabbar__item:focus-visible{ outline: 2px solid var(--z360-tabbar-on, #2F6B4A); outline-offset: -3px; }

/* 아주 좁은 화면(320)에서 글자가 겹치지 않게만 줄인다 */
@media (max-width: 340px){
  .z360-tabbar__item{ font-size: 10px; padding-left: 0; padding-right: 0; }
  .z360-tabbar__item svg{ width: 20px; height: 20px; }
}

/* PC 에는 그리지 않는다. JS 도 같은 기준(≤768)으로 붙였다 뗐다 한다. */
@media (min-width: 769px){
  .z360-tabbar{ display: none; }
}

/* 차단 스위치 — 서비스별로 즉시 끌 수 있다(전체 롤백 없이) */
html[data-z360-tabbar="off"] .z360-tabbar{ display: none; }

@media (prefers-reduced-motion: no-preference){
  .z360-tabbar__item{ transition: color .12s ease; }
}