/* ============================================================
   집팔고360 공용 GNB v1 — 토큰화 리팩터링 (2026-09-08)
   ------------------------------------------------------------
   무엇이 바뀌었나: @media 가 더 이상 셀렉터를 다시 쓰지 않고
   :root 의 CSS 변수만 재할당한다. 계산된 값은 리팩터링 전과 동일.

   왜 바꿨나: 브레이크포인트마다 `.top-header .logo`(명시도 0,2,0) 같은
   셀렉터를 다시 쓰는 구조여서, 오버라이드하려면 그 명시도를 이겨야 했다.
   `@media` 는 명시도를 올려주지 않으므로 `.logo`(0,1,0)로 쓰면 @media
   안이든 밖이든 진다 — 2026-09-08 하루에 두 세션이 각각 이 함정을 밟았다
   (지도 레일 배포 무효, input 6개 미적용). 값을 변수로 빼면 오버라이드가
   "변수 재할당"이 되어 명시도 싸움 자체가 성립하지 않는다.

   한계(정직하게): flex-wrap / order / overflow 같은 "구조" 속성은
   토큰화 대상이 아니라 @media 안에 셀렉터로 남는다. 다만 실제로 사고가
   난 건 전부 "값"이었고, 값은 전부 변수로 나왔다.
   ============================================================ */
:root {
  --gnb-w:            min(1440px, 100% - 64px);
  --gnb-min-h:        80px;
  --gnb-gap:          38px;
  --gnb-logo-mr:      112px;
  --gnb-logo-h:       40px;   /* 2026-09-30 부대표 확정 로고(여백 거의 없음)로 교체 — 옛 파일 투명여백 보정값 64 를 되돌림(모바일 48→32 와 한 쌍) */
  --gnb-tabs-gap:     30px;
  --gnb-tab-fs:       17px;
  --gnb-tab-min-h:    80px;
  --gnb-active-bot:   calc(50% - 16px);
  --gnb-badge-top:    calc(50% + 12px);
  --gnb-caption-disp: block;
  --gnb-action-pad:   0px;
  --gnb-action-min-h: 0px;
}
@media (max-width: 1360px) {
  :root { --gnb-gap: 28px; --gnb-logo-mr: 72px; --gnb-tabs-gap: 22px; --gnb-tab-fs: 16px; }
}
@media (max-width: 1180px) {
  :root { --gnb-logo-mr: 32px; --gnb-tabs-gap: 18px; --gnb-tab-fs: 15px; }
}
@media (max-width: 1024px) {
  :root { --gnb-gap: 14px 20px; --gnb-logo-mr: 0px; --gnb-tab-min-h: 54px; }
}
@media (max-width: 768px) {
  :root {
    --gnb-w: min(1440px, 100% - 32px);
    --gnb-min-h: 56px;
    --gnb-gap: 8px 14px;
    --gnb-logo-h: 32px;   /* 2026-09-30 확정 로고 — 옛 여백 보정값 48 을 되돌림(PC 64→40 과 한 쌍) */
    --gnb-tab-min-h: 44px;
    /* 확정 간격 스케일: 30 / 22 / 18 / 18 / 16px — 좁아질수록 좁아진다 */
    --gnb-tabs-gap: 18px;
    --gnb-active-bot: calc(50% - 14px);
    --gnb-badge-top: calc(50% + 9px);
    --gnb-caption-disp: none;
    --gnb-action-pad: 12px 2px;
    --gnb-action-min-h: 44px;
  }
}
@media (max-width: 480px) {
  /* 10-20 점검-090(부대표 「① 모든 사이트 같이 넓힘」·직원 a502b9): 휴대폰에서 서비스 이름·「서비스 예정」 꼬리표끼리 붙어 보여 16→24px
     (320 폭까지 한 줄 그대로 · 집360 첫 화면·집팔고·집테리어 재 봄) */
  :root { --gnb-gap: 6px 12px; --gnb-tabs-gap: 24px; --gnb-tab-fs: 14px; }
}

.top-header {
  width: var(--gnb-w);
  margin: 0 auto;
  min-height: var(--gnb-min-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gnb-gap);
}
.top-header .logo { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: var(--gnb-logo-mr); }
.top-header .logo-img { height: var(--gnb-logo-h); width: auto; display: block; }
.top-header .service-tabs { display: flex; align-items: center; gap: var(--gnb-tabs-gap); flex: 0 0 auto; margin-left: 0; }
.top-header .service-tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--gnb-tab-min-h); padding: 0;
  font-size: var(--gnb-tab-fs); font-weight: 700; line-height: 1;
  color: var(--color-ink, #2b2b2b); white-space: nowrap; text-decoration: none;
}
.top-header .service-tab .tab-text { display: inline-block; line-height: 1; }
.top-header .service-tab.active { color: var(--color-primary, #d63b3b); cursor: default; }
.top-header .service-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: var(--gnb-active-bot);
  height: 2px; border-radius: 999px; background: var(--color-primary, #d63b3b);
}
.top-header .service-tab.service-tab-soon { flex-direction: row; justify-content: center; align-items: center; gap: 0; }
.top-header .tab-soon-badge {
  position: absolute; left: 50%; top: var(--gnb-badge-top); transform: translateX(-50%);
  /* 글씨 하한 11px(디자인지침). 그냥 11px 로 키우면 배지가 45->59px 이 되어
     '집사고'와 '집서비스' 배지가 1px 겹친다(실측). 문구는 그대로 두고 안쪽 여백과
     자간을 조여 53px 로 맞췄다 — 배지 사이 4px 확보. */
  padding: 0 3px; border-radius: 999px;
  background: var(--color-bg-2, #f3efe9); color: var(--color-muted, #8a8378);
  font-size: 11px; font-weight: 700; line-height: 1.45; letter-spacing: -.04em; white-space: nowrap;
}
.top-header .service-tab-service { position: relative; gap: 0; }
.top-header .service-tab-service .tab-caption {
  display: var(--gnb-caption-disp);
  position: absolute; left: 50%; bottom: calc(50% + 11px); transform: translateX(-50%);
  width: max-content; margin: 0; color: var(--color-primary, #d63b3b);
  font-weight: 700; line-height: 1; white-space: nowrap; font-size: 7.5px; letter-spacing: -0.4px;
}
.top-header .header-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.top-header .top-action-link {
  border: 0; appearance: none; font: inherit; cursor: pointer; background: transparent;
  color: rgba(43, 43, 43, .8); padding: var(--gnb-action-pad); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  /* 2026-09-08 터치타겟(디자인지침 7-2) — 세로 44px 하한.
     패딩 산술(12+16+12=40)에만 의존하면 글꼴·line-height가 바뀔 때 다시 어긋나므로
     min-height 로 하한을 선언한다. 가로 40px 는 유지 — 햄버거와 중심 간 거리 52px 로
     7-2 가로 예외를 이미 충족하며, 폭을 늘리면 모바일 헤더 2행 배치가 깨진다. */
  min-height: var(--gnb-action-min-h);
}

.top-header .admin-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.top-header .hamburger-btn {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--color-border, #e6e0d8); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease; cursor: pointer; position: relative;
}

.top-header .hamburger-bars { display: flex; flex-direction: column; gap: 4px; }
.top-header .hamburger-bars i { display: block; width: 16px; height: 2px; border-radius: 999px; background: var(--color-ink, #2b2b2b); font-style: normal; }
.top-header .admin-quick-menu[hidden] { display: none; }

/* --- 구조(structural) 속성: 토큰화 대상 아님, @media 에 남는다 --- */
@media (max-width: 1024px) {
  .top-header { flex-wrap: wrap; }
  .top-header .service-tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .top-header .service-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) {
  /* ⚠️ `inset` 은 **패딩 박스** 기준이다. 이 버튼은 border-box 36px 에 border 1px 이라
     기준 상자가 34px 이고, `inset:-4px` 이면 34+8 = **42px** 이 된다(실측 42x42).
     44 를 만들려면 -5px 이어야 한다: 34+10 = 44.
     한때 "햄버거는 시각 36 이지만 실제 히트 43~44" 로 기록돼 있었는데, 소수점까지 재니 42 였다. */
  .top-header .hamburger-btn::after { content: ""; position: absolute; inset: -5px; }
  /* 탭 4개가 210px 만 쓰고 오른쪽 133px 이 비어 있던 것을 고친다.
     처음엔 space-between 을 썼는데 그건 남는 폭을 **탭 사이**에 몰아준다 —
     실측하니 탭은 36~48px 인데 사이가 53~59px 이 되어(4개 서비스 전부)
     글자보다 빈칸이 넓었다. 빈칸의 위치만 오른쪽에서 가운데로 옮긴 셈이다.

     데스크톱과 **같은 모델**을 쓴다 — 콘텐츠 폭 + 고정 gap.
     탭을 늘리는 방식(flex-grow)은 두 번 다 빗나갔다:
       space-between  -> 남는 폭이 탭 '사이'로 몰려 탭 사이 53~59px
       flex: 1 0 auto -> 남는 폭이 탭 '안쪽'으로 흡수돼 박스 사이는 14px 이 됐지만
                         **글자 사이는 47px** 로 거의 그대로였다(데스크톱 30px 보다 넓다)
     `flex-grow > 0` 이면 gap 은 눈에 보이는 간격이 아니게 된다. 그래서 gap 값만
     보고 "줄였다"고 판단하면 안 된다 — 글자 사이를 재야 한다.
     탭 줄은 독립된 한 행이라 가운데 정렬한다(좌측 정렬하면 오른쪽이 죽는다). */
  .top-header .service-tabs { justify-content: center; }
  .top-header .service-tab { flex: 0 0 auto; }

  /* 탭 히트영역 가로 36.31 -> 46.31 (모바일만). 보이는 모양은 그대로다.
     실측: 집팔고·집사고 36.31x44, 집테리어·집서비스 48.41x44, 탭 중심 간격 57.8px.
     세로는 이미 44 라 가로만 넓힌다.
     ⚠️ 상자를 키우지 않고 **히트영역만** 넓히는 이유: 중심 간격이 57.8 이라
        상자를 키우면 이웃을 가로챌 수 있다. 좌우 5px 씩이면
            이웃 반폭 합 23.16 + 29.21 = 52.37 < 57.8  →  5.4px 남고 안 겹친다.
     ⚠️ `::after` 를 쓰지 않는다 — 활성 탭 밑줄이 이미 그 자리다(위 .service-tab.active::after).
        네 탭 모두 `::before` 는 비어 있는 것을 실측으로 확인했다. */
  .top-header .service-tab::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px;
  }

  /* 긴 상호가 들어오면 라벨이 넓어져 헤더의 다른 요소를 다음 줄로 밀어내
     헤더가 101 -> 152px 로 커졌다(실측, 23자 상호). 라벨은 이미 nowrap 이라
     줄바꿈은 안 되지만 폭이 그대로 늘어나는 게 문제다.
     폭을 제한하고 넘치면 말줄임표로 줄인다 — 이름을 조금 줄이는 쪽이
     헤더가 화면의 19% 를 먹는 것보다 낫다. */
  .top-header .top-action-link { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

  /* 배지 달린 탭이 활성일 때 밑줄이 배지를 관통하던 문제 (집사고 홈에서 드러남)
     ------------------------------------------------------------------
     실측(375px): 탭 y54~98 · 배지 y85~99 · 활성 밑줄 y88~90.
     밑줄이 배지 한가운데를 가로지르고, 배지는 헤더 밑변(98)까지 1px 넘었다.
     탭 높이 44px 안에 [글자 14 + 밑줄 2 + 배지 14 + 간격]을 모두 넣을
     공간이 없다. 헤더를 키우는 대신(모바일에서 이미 120px 다) 활성 표시를
     글자 색 하나로 줄인다 — 활성 탭은 이미 primary 색이라 충분히 읽힌다.
     서비스가 열려 배지가 빠지면 밑줄은 저절로 돌아온다. */
  .top-header .service-tab.active:has(.tab-soon-badge)::after { display: none; }

  /* 배지가 헤더 밑변을 1px 넘던 것 — 탭 줄에 그만큼 여유를 준다.
     (배지를 위로 올리면 부대표님이 지적한 "글자에 붙는" 문제로 되돌아간다) */
  .top-header .service-tabs { padding-bottom: 3px; }
}

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

/* ============================================================
   자재도매센터 진입 버튼 — 2026-09-22 부대표 지시
   ------------------------------------------------------------
   서비스 탭 오른쪽 끝에 붙는 사업자용 진입구.
   ⚠️ 모바일(≤1024px)은 헤더에서 숨기고 **햄버거 전체메뉴 안**에 넣는다(2026-09-22 C안).
      1024 이하에서는 `.service-tabs` 가 order:3 으로 아랫줄에 내려가므로
      이 버튼만 윗줄(로고·로그인·햄버거 사이)에 남아 자리가 엉킨다.
      PC 부터 확정하라는 지시라 모바일은 별도 결정 뒤에 연다.
   ============================================================ */
.top-header .gnb-materials {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 11px;
  border: 1px solid #cfe1d4;
  border-radius: 12px;
  background: #eef5f0;
  color: var(--color-ink, #2b2b2b);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.gnb-materials-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: #3f7355; flex: 0 0 auto;
}
.gnb-materials-ico svg { width: 22px; height: 22px; display: block; }
.gnb-materials-txt { display: inline-flex; flex-direction: column; gap: 3px; }
/* 작은 글씨라 본문 기준 4.5:1 이 적용된다. #3f7355 on #eef5f0 = 5.4:1 */
.gnb-materials-cap {
  font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; color: #3f7355; line-height: 1;
}
.gnb-materials-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.gnb-materials-arrow {
  margin-left: 2px; font-size: 16px; font-weight: 700; color: #9aa3a8; line-height: 1;
}

@media (hover: hover) {
  .top-header .gnb-materials:hover { background: #e4efe8; border-color: #bcd6c4; }
}

@media (max-width: 1024px) {
  /* ⚠️ 2026-10-12 부터 이 규칙은 **아무 일도 하지 않는다** — 헤더 아이콘 자체를
     그리지 않기 때문이다(gnb-v1.js 의 MATERIALS_HEADER_ON = false).
     지우지 않고 남겨 둔다: 헤더를 다시 켜면 모바일에서는 여전히 숨겨야 하고
     (탭 줄이 아랫줄로 내려가 자리가 엉킨다), 그때 이 규칙이 다시 필요하다. */
  .top-header .gnb-materials { display: none; }
}

/* 전체메뉴(햄버거) 안에 넣는 항목 — 모바일 C안(2026-09-22).
   헤더 버튼과 **같은 안쪽 조각**을 쓰므로 색·글자가 자동으로 같다.
   바깥 상자만 가로 꽉 차게 바꾼다. 서비스 CSS 없이 이 파일만으로 완결된다. */
/* 2026-10-12 부대표 지시: **옆 줄과 같은 모양**으로 맞춘다(집테리어 '파트너센터' 기준).
   전에는 민트 카드 + 아이콘 + 2줄(56~73px)이라 혼자 튀었다. 실측해서 맞춘 값:
       파트너센터  280x43 · 배경 없음 · 테두리 1px #e6e0d8 · 반경 12 · padding 11/12 · 13px/700
   ⚠️ 높이만 44 로 둔다. 파트너센터가 43px 이라 그대로 맞추면 터치타겟 44 에 1px 모자란다.
      눈으로는 구분이 안 되고 손가락 기준은 지킨다(집테리어 쪽도 44 로 올려달라고 전달함).
   ⚠️ 아이콘은 메뉴에서 뺐다(gnb-v1.js). 헤더 버튼을 다시 켜면 거기엔 아이콘이 남아 있다. */
.gnb-materials-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--color-border, #e6e0d8);
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink, #2b2b2b);
  text-decoration: none;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
/* 2026-10-12 부대표 지시: '사업자 전용' 은 **이름 위 오른쪽**에 작게 올린다.
   배지를 흐름 밖(absolute)으로 빼서 줄 높이가 늘어나지 않게 하고, 오른쪽 끝을
   '자재도매센터' 오른쪽 끝에 맞춘다. 이름 크기는 그대로 — 이웃 줄과 같아야 한다. */
.gnb-materials-menu .gnb-materials-txt {
  position: relative; display: inline-block; flex: 0 0 auto;
}
.gnb-materials-menu .gnb-materials-cap {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 1px;
  font-size: 9.5px; font-weight: 800; color: #3f7355;
  line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
.gnb-materials-menu .gnb-materials-name { font-size: 13px; font-weight: 700; }
.gnb-materials-menu .gnb-materials-arrow {
  margin-left: auto; font-size: 13px; font-weight: 700; color: #9aa3a8;
}

@media (hover: hover) {
  .gnb-materials-menu:hover { background: rgba(0, 0, 0, .03); }
}

/* ============================================================
   자리싸움에서 지지 않게 — 2026-10-12
   ------------------------------------------------------------
   집테리어 전체메뉴 안에서는 이 줄이 `display: block · padding: 13px 15px` 로
   계산됐다. 같은 클래스를 **메뉴 밖**에 붙여 재면 `flex · 11px 12px` 가 나온다
   (같은 페이지, 같은 CSS). 즉 **그 자리에서만** 무언가가 이긴다.

   어느 파일인지 끝내 못 찾았다. 집테리어 CSS 12장과 이 파일을 전수로 뒤졌는데
   `13px 15px` 도, 낱개 padding-top:13px 도, 그 요소에 걸리는 규칙도 안 나왔다.
   (브라우저에서 모든 시트를 훑어 `matches()` 로 대조해도 걸리는 규칙이 0이었다 —
    내 파일은 교차출처라 못 읽어서 그쪽만 확인이 안 됐다.)

   그래서 **원인을 찾아 고치는 대신 어디서 덮든 이기도록** 특정도를 올린다.
   클래스를 세 번 겹쳐 쓰면 (0,3,0) 이 되어 서비스 쪽 한두 겹 규칙을 이긴다.
   `!important` 를 쓰지 않은 이유: 서비스가 정당하게 덮어야 할 때 길을 막지 않기 위해서다
   (그쪽은 `!important` 한 줄이면 된다).

   ⚠️ 여기 적는 것은 **자리 배치에 꼭 필요한 것만** 이다. 색·글자는 위 블록에 둔다 —
      여기까지 올리면 서비스가 색을 맞추고 싶어도 못 바꾼다.
   ============================================================ */
.gnb-materials-menu.gnb-materials-menu.gnb-materials-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
}
.gnb-materials-menu.gnb-materials-menu .gnb-materials-txt {
  /* 위 블록과 같은 배치. 여기만 남으면 배지가 도로 이름 왼쪽으로 간다. */
  display: inline-block; position: relative; flex: 0 0 auto;
}
.gnb-materials-menu.gnb-materials-menu .gnb-materials-arrow { margin-left: auto; }

/* ============================================================
   호스트 모드 (.gnb-materials-row) — 2026-10-12
   ------------------------------------------------------------
   서비스가 자기 줄 클래스를 넘겨준 경우다. **상자는 건드리지 않는다** —
   테두리·배경·패딩·높이·글자는 전부 그 서비스 줄 그대로여서 옆 줄과 똑같아진다.
   내가 얹는 것은 '사업자 전용' 배지와, 이름을 그 배지 아래로 두는 배치뿐이다.
   ⚠️ 여기에 상자 속성(padding·border·background·min-height)을 절대 넣지 말 것.
      넣는 순간 다시 혼자 달라 보인다 — 그게 이 모드를 만든 이유다.
   ============================================================ */
/* 배지를 **흐름 밖으로** 뺀다(absolute). 안 그러면 한 줄이 더 생겨 이 줄만 키가 커진다
   — 실측 68px vs 이웃 51px. 지금은 이름만 흐름에 남아 **이웃과 같은 51px** 이 된다.
   right: 0 이라 배지 오른쪽 끝이 '자재도매센터' 오른쪽 끝과 정확히 맞고,
   bottom: 100% 로 이름 바로 위에 올라간다. */
.gnb-materials-row .gnb-materials-txt {
  position: relative; display: inline-block; vertical-align: middle;
}
.gnb-materials-row .gnb-materials-cap {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 1px;
  font-size: 9.5px; font-weight: 800; color: #3f7355;
  line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
.gnb-materials-row .gnb-materials-name {
  /* 기본 블록(.gnb-materials-name)의 line-height: 1 을 되돌린다.
     그게 먹어서 이 줄만 48px, 이웃은 51px 이었다. normal 이면 이웃 span 과 같다. */
  display: block; line-height: normal;
}

/* ------------------------------------------------------------
   호스트가 span 을 직접 노리는 경우 — 2026-10-12
   집360 메인 전체메뉴에는
       .sheet.sheet-simple .sheet-menu-item.simple span { font-size: 16px }
   가 있다. 특정도 (0,4,1) 이라 내 `.gnb-materials-row .gnb-materials-cap`
   (0,2,0) 을 이겨서 **배지가 9.5px 가 아니라 16px 로 나왔다.**
   (position·color 는 그 규칙에 없어 먹었고 font-size 만 덮여, 적용된 듯 보였다.)

   배지는 내가 얹는 **내 요소**라 호스트 글자값을 받으면 안 된다. 그래서 클래스를
   겹쳐 (0,5,0) 으로 올린다 — 클래스 수가 먼저라 (0,4,1) 을 이긴다.
   ⚠️ 이름(.gnb-materials-name)은 반대다. 부대표 지시대로 **이웃과 같은 크기**여야
      하므로 크기·굵기는 호스트가 이기게 그대로 둔다(여기에 넣지 말 것).
   ------------------------------------------------------------ */
.gnb-materials-row.gnb-materials-row .gnb-materials-cap.gnb-materials-cap.gnb-materials-cap {
  font-size: 9.5px;
  line-height: 1;
}

/* ===== 집360 휴대폰 머리 접기 v1 — 모바일-012 · 김정훈-99 · 모바일 세션 =====
   접히는 것: 1줄(로고 · 오른쪽 MY/☰). 남는 것: 2줄 서비스 탭. 0.2초에 걸쳐 접고 폄(높이 변수가 따라 바뀜).
   줄 사이 간격(row-gap)도 접을 때 0 — 남으면 빈 6px 띠가 생김.
   overflow:hidden 은 접혀 있을 때만 — 펴진 머리에서 ☰ · 로그인 쪽 펼침 메뉴가 잘리지 않게. */
@media (max-width: 768px) {
  .top-header .logo, .top-header .header-right {
    max-height: 64px; transition: max-height .2s ease, opacity .2s ease;
  }
  html.z360-gnb-collapsed .top-header .logo,
  html.z360-gnb-collapsed .top-header .header-right {
    max-height: 0; opacity: 0; pointer-events: none; overflow: hidden;
  }
  html.z360-gnb-collapsed .top-header { row-gap: 0; }
}

/* ============================================================
   10-27 디자인-065 — 김정훈 팀장님 김정훈-127 · 10:07 「①」(홈 세션)
   ③ 서비스 줄 글씨 2px 크게(맨 위 :root 와 각 화면 폭 값에 +2 · 뒤에 와서 이김)
   ④ 「서비스 예정」 꼬리표는 대본에서 안 그림 — 아래 규칙만으로 충분
   휴대폰 칸 사이 24px(점검-090)은 꼬리표끼리 붙는 것 때문이었는데, 꼬리표가 빠져도 375 폭에
   다섯 칸이 한 줄로 들어가 그대로 둔다(실측 37~338px · 줄 16~359). 360 아래만 14px(320 폭 실측 · 18px 도 넘침).
   ② 「홈」은 글자 폭이 15px 뿐이라 휴대폰 히트영역만 좌우 16px 넓힌다(14+32=46px · 이웃 집팔고와 안 겹침).
   ============================================================ */
:root { --gnb-tab-fs: 19px; }
@media (max-width: 1360px) { :root { --gnb-tab-fs: 18px; } }
@media (max-width: 1180px) { :root { --gnb-tab-fs: 17px; } }
@media (max-width: 480px)  { :root { --gnb-tab-fs: 16px; } }
@media (max-width: 359px)  { :root { --gnb-tabs-gap: 14px; } }
@media (max-width: 768px)  { .top-header .service-tab.service-tab-home::before { left: -16px; right: -16px; } }
@media (max-width: 359px)  { .top-header .service-tab.service-tab-home::before { right: -7px; } }

/* ============================================================
   10-27 집테관리-091 · 097 — 김정훈 팀장님 김정훈-164 · 15:12 · 15:29 · 김정훈-173(디자인 세션)
   091 PC 에서 서비스 줄(홈 · 집팔고 · 집테리어 · 집사고 · 집서비스)에 마우스를 올리면 글자색만 고른 탭 빨강 · 밑줄은 안 생김
   097 서비스 줄 글씨 1px 크게(065 의 화면 폭 값마다 +1 · 뒤에 와서 이김)
   ============================================================ */
:root { --gnb-tab-fs: 20px; }
@media (max-width: 1360px) { :root { --gnb-tab-fs: 19px; } }
@media (max-width: 1180px) { :root { --gnb-tab-fs: 18px; } }
@media (max-width: 480px)  { :root { --gnb-tab-fs: 17px; } }
@media (hover: hover) and (min-width: 769px) {
  .top-header .service-tabs .service-tab { transition: color .15s ease; }
  .top-header .service-tabs .service-tab:not(.active):hover,
  .top-header .service-tabs .service-tab:not(.active):focus-visible { color: var(--color-primary, #d63b3b); }
}

/* ============================================================
   10-27 집테관리-091b(091 다시) — 김정훈 팀장님 16:22 「집팔고 홈페이지 하단 줄도 마우스 색상」(디자인 세션)
   집팔고 둘째 줄(일반고객 · 중개사 · MY집팔고 · 매물지도 · 내 매물 관리 · 내 수익·정산 · 새 매물 등록)도
   PC 에서 마우스를 올리면 글자색만 빨강 · 밑줄 없음(위 서비스 줄과 같음) · 고른 것은 그대로
   ============================================================ */
@media (hover: hover) and (min-width: 769px) {
  .zp-subtabs .zp-subtab, .zp-role-switch .zp-role-btn { transition: color .15s ease; }
  .zp-subtabs .zp-subtab:not(.is-active):hover,
  .zp-subtabs .zp-subtab:not(.is-active):focus-visible,
  .zp-role-switch .zp-role-btn:not(.is-on):hover,
  .zp-role-switch .zp-role-btn:not(.is-on):focus-visible { color: var(--color-primary, #d63b3b); text-decoration: none; }
}

/* ============================================================
   10-27 디자인-099 — 김정훈 팀장님 18:02 「모바일 2번째 줄 항목 간격 줄이기」(디자인 세션)
   휴대폰 서비스 줄(홈 · 집팔고 · 집테리어 · 집사고 · 집서비스) 항목 사이: 480 이하 24 → 14px · 359 이하 14 → 10px
   ============================================================ */
@media (max-width: 480px) { :root { --gnb-tabs-gap: 14px; } }
@media (max-width: 359px) { :root { --gnb-tabs-gap: 10px; } }
/* ============================================================
   집테관리-134 10-29(📮 김정훈-237 · 팀장님 13:40 「홈,집팔고,집테리어,집사고,집서비스 폰트크기 1포인트 줄이기 · PC와 모바일 동일 · 줄인만큼 글자 간격도」)
   서비스 이름 글씨 = 지금 값 −1px(모든 폭 · PC 20 → 19 · 휴대폰 17 → 16) · 이름 사이 = 지금 값 × .95(PC 30 → 28.5 · 휴대폰 14 → 13.3)
   변수는 그대로 두고 쓰는 자리에서만 줄임(폭마다 값이 달라도 같은 비율) — 집서비스 위 작은 글 · 로고 · 오른쪽 단추 그대로
   ============================================================ */
.top-header .service-tab { font-size: calc(var(--gnb-tab-fs) - 1px); }
.top-header .service-tabs { gap: calc(var(--gnb-tabs-gap) * .95); }