/* ===========================================================================
   로컬 내비 — 검은 상단바 아래 붙는 흰 유리 띠

   Apple 의 제품 페이지가 쓰는 두 번째 내비다. 왼쪽에 지금 보고 있는 것의
   이름(21px), 오른쪽에 그 페이지 안의 앵커와 '도입 문의' 알약.

   글로벌 내비가 "회사의 어디", 로컬 내비가 "이 페이지의 어디"를 맡는다.
   그래서 빵부스러기(breadcrumb)를 따로 두지 않는다.
   =========================================================================== */

.localnav {
  position: sticky;
  /* 검은 상단바 바로 아래에 달라붙는다. 둘 다 sticky 라 쌓인다. */
  top: var(--nx-header-h);
  z-index: 55;
  height: var(--nx-localnav-h);
  background: var(--nx-s-localnav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--nx-divider);
}

.localnav__inner {
  display: flex;
  align-items: center;
  gap: var(--nx-sp-6);
  height: 100%;
  max-width: var(--nx-container-wide);
}

.localnav__title {
  font-size: var(--nx-fs-lg);
  font-weight: 600;
  letter-spacing: var(--nx-tracking);
  color: var(--nx-text);
  white-space: nowrap;
  flex-shrink: 0;
  /* 앵커가 없는 페이지에서도 문의 알약이 오른쪽 끝에 남도록 여기서 민다. */
  margin-right: auto;
}

/* 앵커를 접었다 펴는 제목 버튼. 앵커가 늘 보이는 넓은 화면에서는 아예
   그리지 않는다 — 탭 멈춤과 '접힘' 상태가 거짓이 된다. 좁은 화면에서 스크립트가
   있을 때만 꺼낸다. all: unset 을 쓰지 않는다 — 명시도가 같은 .localnav__title
   의 글꼴과 포커스 고리까지 지워 버린다. */
.localnav__toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.localnav__chevron {
  display: inline-flex;
  color: var(--nx-text-2);
  transition: transform var(--nx-t-fast);
}

.localnav.is-open .localnav__chevron {
  transform: rotate(180deg);
}

.localnav__links {
  display: flex;
  align-items: center;
  gap: var(--nx-sp-6);
  min-width: 0;
  /* 좁은 화면에서는 옆으로 밀어 본다. 줄바꿈은 띠 높이를 깨뜨린다. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.localnav__links::-webkit-scrollbar {
  display: none;
}

/* text-2(#6e6e73)는 검은 구간 위 회색 유리(#b8b8b8)에서 2.56:1 로 흐려진다.
   한 단계 짙은 #424245 는 같은 자리에서 5.05:1, 흰 바탕에서 10:1 이다. */
.localnav__link {
  font-size: var(--nx-fs-xs);
  color: #424245;
  white-space: nowrap;
}

.localnav__link:hover {
  color: var(--nx-text);
}

.localnav__link.is-active {
  color: var(--nx-text);
  font-weight: 500;
}

.localnav__cta {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0 var(--nx-sp-4);
  font-size: var(--nx-fs-xs);
  background: var(--nx-accent);
  color: var(--nx-text-on-accent);
}

.localnav__cta:hover {
  background: var(--nx-accent-glow);
  color: var(--nx-text-on-accent);
}

/* 앵커 목록이 있을 때만 왼쪽 여백을 준다 — 없으면 제목과 알약만 남는다. */
.localnav__links:empty {
  display: none;
}

/* 휴대폰에서는 검은 상단바가 스크롤과 함께 사라진다(chrome.css). 붙어 있는
   것은 이 띠 하나라 맨 위에 붙인다. */
@media (max-width: 980px) {
  .localnav {
    top: 0;
  }
}

@media (max-width: 860px) {
  /* 반투명 유리 뒤로 본문이 비치면 제목이 흐려진다. 거의 불투명하게 깐다. */
  .localnav {
    background: rgba(255, 255, 255, 0.94);
  }
  .localnav__inner {
    gap: var(--nx-sp-4);
  }
  /* 긴 제목(사례·제품 이름)은 줄지 않으면 알약을 화면 끝으로 민다. 제목이
     먼저 줄고, 넘치는 글자는 말줄임표로 접는다. */
  .localnav__title {
    font-size: var(--nx-fs-md);
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 스크립트가 없으면 제목 옆에 앵커 줄이 남는다. 함께 줄면 짧은 제목까지
     접히니 제목은 줄이지 않고 폭만 반으로 묶는다. */
  .localnav__label {
    flex-shrink: 0;
    max-width: 50%;
  }
  .js .localnav__label {
    display: none;
  }
  .js .localnav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
  }
  .localnav__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .localnav__chevron {
    flex-shrink: 0;
  }
  /* 알약은 32px 로 두고 보이지 않는 테두리로 누를 자리를 44px 까지 넓힌다. */
  .localnav__cta {
    position: relative;
    min-height: 32px;
  }
  .localnav__cta::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }
  /* 앵커를 없애지 않고 제목 아래로 접는다. 긴 페이지일수록 앵커가 필요하다.
     접고 펴는 손잡이가 스크립트라, 스크립트가 없으면 앵커는 가로로 미는 줄로
     남는다. */
  .js .localnav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--nx-sp-2) var(--nx-sp-6) var(--nx-sp-4);
    /* 붙어 있는 띠에 매달린 목록이라 페이지를 굴려도 올라오지 않는다. 화면을
       넘으면(가로로 눕힌 휴대폰) 목록 안에서 굴린다. */
    max-height: calc(100vh - var(--nx-localnav-h));
    max-height: calc(100dvh - var(--nx-localnav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 불투명하게 깐다. 조금만 비쳐도 앵커 사이로 본문 제목이 겹쳐 읽힌다. */
    background: #fff;
    border-bottom: 1px solid var(--nx-divider);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  }
  .js .localnav.is-open .localnav__links {
    display: flex;
  }
  .js .localnav__link {
    flex-shrink: 0;
    font-size: 17px;
    padding-block: 12px;
  }
  .js .localnav__link + .localnav__link {
    border-top: 1px solid var(--nx-divider);
  }
}

@media (max-width: 720px) {
  /* 본문 컨테이너와 같은 시작선에 맞춘다. */
  .js .localnav__links {
    padding-inline: var(--nx-sp-5);
  }
}