/* ==========================================================
   맨 위 메뉴의 Service 서브메뉴 · 휴대폰 메뉴 묶음 (모든 페이지 공통)
   - 각 페이지 CSS 다음, chat.css 앞에서 불러옵니다.
   - Service에 마우스를 올리거나, 키보드로 Service에 들어가면 아래로 목록이 열립니다.
   - 서브메뉴 항목을 바꾸려면 모든 페이지 <nav class="g-gnav"> 안 <div class="g-sub-menu">를 함께 고칩니다 (_office\지도.md 참고).
   목차
     1. 서브메뉴 자리
     2. 펼쳐지는 목록
     3. 휴대폰 메뉴 안 서비스 묶음
     4. 화면 폭별 조정
     5. 로그인 · 회원가입 링크 숨기기
   ========================================================== */

/* ========== 1. 서브메뉴 자리 ========== */
.g-sub {
  position: relative;
  display: flex;
  align-items: center;
}

/* Service 글자 오른쪽의 작은 꺾쇠 */
.g-sub::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
  transition: transform .25s;
}

.g-sub:hover::after,
.g-sub:focus-within::after {
  transform: translateY(1px) rotate(225deg);
}

/* ========== 2. 펼쳐지는 목록 ========== */
.g-sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--g-line, #e2e2dc);
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(22, 22, 22, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

/* 메뉴 글자와 목록 사이 빈틈에서 마우스가 빠져도 닫히지 않게 */
.g-sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.g-sub:hover .g-sub-menu,
.g-sub:focus-within .g-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 목록 안 항목 (맨 위 메뉴 글꼴 · 밑줄 효과를 쓰지 않음) */
.g-gnav .g-sub-menu a {
  font-family: var(--g-ko, "Pretendard Variable", sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--g-ink, #161616);
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.g-gnav .g-sub-menu a:hover,
.g-gnav .g-sub-menu a:focus-visible,
.g-gnav .g-sub-menu a[aria-current] {
  background: var(--g-road-soft, #e6f0eb);
  color: var(--g-road, #1f6b4e);
}

.g-sub-menu .g-road-ln {
  display: none;
}

/* 첫 항목(한눈에) 아래 얇은 선 */
.g-gnav .g-sub-menu a:first-child {
  border-bottom: 1px solid var(--g-line, #e2e2dc);
  border-radius: 8px 8px 0 0;
  margin-bottom: 4px;
}

/* ========== 3. 휴대폰 메뉴 안 서비스 묶음 ========== */
/* 서비스 아래 항목은 조금 들여 쓰고 왼쪽에 선 */
.g-drawer a.g-drawer-sub {
  padding-left: 22px;
  font-size: .92em;
  border-left: 2px solid var(--g-road-soft, #e6f0eb);
}

/* ========== 4. 화면 폭별 조정 ========== */
/* 화면 폭 1100px 이하일 때 (태블릿 · 휴대폰): 맨 위 메뉴는 ☰ 버튼으로 접히므로 서브메뉴도 숨김 */
@media (max-width: 1100px) {
  .g-sub {
    display: none;
  }
}

/* ========== 5. 로그인 · 회원가입 링크 숨기기 ========== */
/* 회원 기능은 아직 샘플(방문자 브라우저 저장)이라 공개하지 않습니다 (2026-11-02 대표 결정).
   서버 방식 회원 기능을 만든 뒤 다시 보이게 하려면 아래 규칙을 지우면 됩니다. */
[data-member-links] {
  display: none !important;
}