/*
 * HEADER: 상단 고정 내비게이션, 모바일 메뉴, 본문 바로가기 링크.
 * COMPANY · BUSINESS · PROJECT · CONTACT 이동 링크 표시 포함
 * 수정 위치: 화면 맨 위 고정 헤더. 메뉴 높이·모바일 펼침 메뉴·스크롤 배경 등.
 */

/* 1. 상단 고정 헤더: 어느 화면에서도 메뉴가 맨 위에 붙어 있도록 설정 */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}

/* 2. PC 내비게이션 높이와 메뉴의 가로 정렬 */
.nav {
  height: 90px; /* PC 상단 메뉴 높이 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 회사 문자 로고 아래의 작은 한글 회사명 */
.brand small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  margin-top: 9px;
}

/* COMPANY / BUSINESS / PROJECT / LAB / CONTACT 메뉴 간격 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 35px;
}

/* 각 메뉴 항목의 글자 크기와 자간 */
.nav-links a {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
}

/* 오른쪽 CONTACT 버튼의 크기 및 모서리 */
.nav-contact {
  padding: 11px 18px;
  border-radius: 6px;
}

.nav-contact span {
  margin-left: 18px;
}

/* PC에서는 모바일 메뉴 버튼을 숨김 */
.menu-toggle {
  display: none;
}

/* 3. 키보드 접근성: Tab으로 선택할 때만 노출되는 본문 바로가기 링크 */
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  padding: 12px 20px;
  z-index: 100;
}

.skip-link:focus {
  top: 10px;
}

/* 4. 모바일 메뉴(760px 이하): 헤더 높이·햄버거 버튼·펼침 목록 */
@media (max-width: 760px) {
  .nav {
      height: 76px; /* 모바일 상단 메뉴 높이 */
  }

  .brand small {
      font-size: 8px;
  }

  .menu-toggle {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 5px;
      font-size: 12px;
  }

  .nav-links {
      position: absolute;
      top: 76px; /* 모바일 헤더 바로 아래에서 메뉴 펼침 */
      left: 0;
      right: 0;
      padding: 20px;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
  }

  .nav-links.is-open {
      display: flex;
  }

  .nav-links a {
      padding: 14px 16px;
  }
}

/* 5. 상단 헤더 반투명 네이비/리퀴드 글래스 배경 */
/* 아래부터는 HEADER에만 적용되는 색감·스크롤 반응·메뉴 강조 스타일입니다. */
.site-header {
  background: rgba(15, 23, 42, 0.65); /* 헤더 기본 투명도 */
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(18px); /* 헤더 뒤쪽 흐림 강도 */
  -webkit-backdrop-filter: blur(18px);
}

/* 아래로 스크롤하면 헤더 배경을 더 진하게 표시. 상태 클래스는 js/header.js가 적용 */
.site-header.is-scrolled {
  background: rgba(15, 23, 42, 0.93); /* 스크롤 후 헤더 불투명도 */
}

/* 로고의 SYSTEM 글자만 스카이블루 강조 */
.brand span {
  color: var(--accent);
}

.brand small {
  color: var(--text-sub);
}

/* 메뉴 기본 글자색 */
.nav-links a {
  color: #b9c8dc;
}

/* 현재 화면 섹션 메뉴(active) 및 마우스 호버 시 강조색 */
.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
}

/* 우측 CONTACT 메뉴 버튼의 테두리와 반투명 배경 */
.nav-contact {
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.05);
}

/* 본문 바로가기 링크가 나타났을 때의 배경·문자색 */
.skip-link {
  background: var(--accent);
  color: #06202f;
}

/* 모바일 메뉴 열기 버튼의 글래스 스타일 */
.menu-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
}

/* 모바일에서 펼쳐진 메뉴의 네이비 배경 */
@media (max-width: 760px) {
  .nav-links {
      background: rgba(15, 23, 42, 0.98);
      border-bottom: 1px solid var(--glass-border);
  }
}