/* 글로벌 네비게이션 — index/pay/pay-list/shipping/shipping-list 공통.
   Step 10-B: dropdown 잘림 방지를 위해 overflow visible.
   index.html은 추가로 3분할 grid override (brand/inner/actions). */

.navbar {
  background: #1e2d3d;
  border-bottom: 2px solid #3498db;
  height: 56px;
  display: flex;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  overflow: visible;
}

.navbar-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.navbar-link {
  flex: 1;
  flex-shrink: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #e0eaf4;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  /* 겹침 안전망 — 링크는 flex:1 로 메뉴폭의 1/7씩 고정 배분되는데(min-width:0라 그 아래로도 줄어든다)
     글자가 그 폭보다 길면 박스 밖으로 흘러 옆 링크와 겹쳤다(1280px의 Settlement).
     아래 두 줄로 겹침 대신 잘림(…)이 된다. 높이에는 영향 없음. */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s, background 0.15s;
  position: relative;
  user-select: none;
}

@media (min-width: 480px) {
  .navbar-link { font-size: 15px; padding: 0 12px; }
}
@media (min-width: 768px) {
  .navbar { height: 64px; }
  .navbar-link { font-size: 17px; padding: 0 16px; font-weight: 700; }
}

.navbar-link:hover {
  background: rgba(52, 152, 219, 0.15);
  color: #ffffff;
}

.navbar-link.active {
  color: #3498db;
  font-weight: 700;
}
.navbar-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  background: #3498db;
  border-radius: 2px 2px 0 0;
}

/* ── 모바일 햄버거 메뉴 (≤767px) ─────────────────────────────────────────────
   좁은 화면에서 상단 메뉴/계정 버튼이 화면 밖으로 잘려 못 누르던 문제 해결.
   ☰ 버튼으로 메뉴(.navbar-inner) + 계정 묶음(.navbar-actions)을 접었다 편다.
   각 페이지 inline `.navbar`(specificity 0,1,0)를 이기려고 아래는 `nav.navbar`(0,1,1)로 올림.
   PC(≥768px)는 이 규칙이 전혀 적용되지 않아 기존 가로 메뉴 그대로. */
.navbar-toggle {
  display: none;                 /* PC: 숨김 → grid 3분할(brand/inner/actions) 그대로, grid cell 미점유 */
  background: transparent;
  border: none;
  color: #e0eaf4;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  /* brand(좌) + ☰(우) 한 줄 + 아래로 접히는 메뉴/계정 줄 → flex-wrap */
  nav.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 56px;
  }
  .navbar-toggle { display: flex; margin-left: auto; }
  /* 제목 세로 중앙 정렬 — 상단 바 높이(56px)만큼 확보해 위아래 여백 균등(펼침 시 위 붙음 방지) */
  nav.navbar .navbar-brand { min-height: 56px; }

  /* 메뉴·계정 묶음: 전체폭 세로 스택, 닫힘=높이 0(현재 navbar 높이 유지) → 열림 시 펼침 */
  nav.navbar .navbar-inner,
  nav.navbar .navbar-actions {
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  nav.navbar.open .navbar-inner,
  nav.navbar.open .navbar-actions { max-height: 70vh; }
  /* 구분선은 상단 바(56px) 바로 아래에 붙임(margin-top 없음 → 제목이 바 안에서 상하 대칭 중앙).
     padding-top은 구분선과 첫 메뉴(Orders) 사이 여백. border/padding은 .open 상태만(닫힘 높이 0 유지). */
  nav.navbar.open .navbar-inner {
    padding-top: 12px;
    border-top: 2px solid rgba(255, 255, 255, 0.7);
  }
  nav.navbar.open .navbar-actions {
    padding: 10px 16px 14px;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* 링크: 가로 flex:1 균등 → 전체폭 세로 줄(탭 타겟 확대). active 밑줄 대신 색만. */
  nav.navbar .navbar-link {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);   /* 메뉴 항목 간 구분선 — 배경에 안 묻히게 */
  }
  /* 첫 메뉴는 위에 밝은 브랜드 구분선이 이미 있어 자기 border-top 제거(선 이중 방지) */
  nav.navbar .navbar-inner .navbar-link:first-child { border-top: none; }
  nav.navbar .navbar-link.active::after { display: none; }

  /* 계정: 사용자 이름 + 버튼을 전체폭으로(누르기 쉽게). .acct-* 는 각 페이지 inline 정의. */
  nav.navbar .acct-user { width: 100%; padding: 6px 2px; }
  nav.navbar .acct-btn { width: 100%; padding: 12px; font-size: 15px; }
}