/* 메뉴바 전체 배경 및 위치 설정 (Smilegate 스타일) */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;          /* 고정 높이 70px */
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 20px 0 40px; /* 우측 여백 줄여서 nav-right를 오른쪽으로 */

  background-color: transparent;        /* 초기 상태는 완전 투명 */
  transition: background-color 0.3s ease;
}

/* 스크롤 시 순수 검정 배경으로 전환 */
.navbar.scrolled {
  background-color: #000;
}

/* 하단 구분선: 어두운 페이지에서도 메뉴바 경계를 명확히 표시 */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* 중앙 메뉴: 절대 위치로 항상 정중앙 고정 (Home·Introduce·Archive 3개) */
.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

/* 메뉴 링크: 기본 스타일 + 좌우 패딩으로 간격 확보 */
.nav-menu a {
  position: relative;          /* ::after 밑줄 기준점 */
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 32px;             /* 좌우 패딩으로 시각적 간격 확보 */
}

/* 첫 번째 항목 제외하고 왼쪽에 세로 구분선 */
.nav-menu a + a {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* 호버 밑줄 애니메이션: 좌→우로 스윕 (색상 변화 없음) */
.nav-menu a::after {
  content: '';
  display: block;
  height: 2px;
  background: #fff;
  width: 0;
  transition: width 0.3s ease;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* 우측 전체 영역: 소셜 아이콘 묶음.
   로고를 없앤 뒤로는 .navbar의 flex 자식 중 흐름에 남는 요소가 이것 하나뿐이라
   space-between만으로는 좌측에 붙어버린다. margin-left: auto로 항상 우측에 고정한다. */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 소셜 아이콘 묶음 */
.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 각 아이콘 래퍼: 미리보기 카드의 기준점 */
.social-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* 소셜 아이콘 개별: 흰색, 호버 시 살짝 투명해짐 */
.social-icon {
  color: #fff;
  display: flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.social-icon:hover {
  opacity: 1;
}

/* 미리보기 카드: 기본 숨김 */
.social-preview {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 1500;
}

/* 위쪽 삼각형 화살표 */
.social-preview::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}

/* 카드가 열렸을 때 */
.social-preview.open {
  display: flex;
}

/* 플랫폼 이름 */
.preview-platform {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 핸들/아이디 */
.preview-handle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* 방문하기 버튼 */
.preview-btn {
  margin-top: 8px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
  padding-bottom: 1px;
  transition: opacity 0.2s;
}

.preview-btn:hover {
  opacity: 0.5;
}

/* 카카오 QR 모달 오버레이 */
.kakao-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 모달 박스 */
.kakao-modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  min-width: 300px;
}

/* 닫기 버튼 */
.kakao-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #555;
}

/* KakaoTalk 레이블 */
.kakao-modal-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0;
  letter-spacing: 0.05em;
}

/* QR 이미지 */
.kakao-modal-qr {
  width: 240px;
  height: 240px;
  object-fit: contain;
}

/* 카카오 ID */
.kakao-modal-id {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* PC에서 모바일 전용 소셜 링크 숨김 */
.nav-menu-social-mobile {
  display: none;
}

/* 햄버거 버튼: 기본(PC)에서는 숨김 */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* ===== 모바일 반응형 ===== */
@media (max-width: 768px) {
  /* 메뉴바: 햄버거 버튼만 우측 절대 위치로 남기고 나머지는 드롭다운으로 내린다
     (로고를 없애면서 가운데 정렬할 대상도 사라져 justify-content 지정은 제거) */
  .navbar {
    height: 60px;
    padding: 0 16px;
  }

  /* 모바일: 기본 반투명, 햄버거 드롭다운 열리면 완전 불투명 */
  .navbar,
  .navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .navbar.menu-open {
    background-color: #000;
  }

  /* 햄버거 버튼: 우측에 절대 위치로 고정 */
  .nav-hamburger {
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 우측 nav-right 전체 숨김 — 모바일은 드롭다운으로 대체 */
  .nav-right {
    display: none;
  }

  /* 중앙 메뉴: 절대중앙 해제 → 메뉴바 아래 세로 드롭다운 */
  .nav-menu {
    position: absolute;
    top: 60px;
    left: 0;
    transform: none;
    width: 100%;
    flex-direction: column;
    background-color: #000;
    display: none;
  }

  /* .open 클래스가 붙으면 펼침 */
  .nav-menu.open {
    display: flex;
  }

  /* 드롭다운 메뉴 링크: 세로 풀폭, 터치 영역 확보, 구분선 */
  .nav-menu a {
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* 세로 배치에서는 좌측 세로 구분선 제거 */
  .nav-menu a + a {
    border-left: none;
  }

  /* 소셜 링크: 일반 메뉴와 구분되도록 작게·흐리게 */
  .nav-menu-social-mobile {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: 0.08em !important;
    padding: 12px 20px !important;
  }

  /* 일반 메뉴(Archive) 바로 다음, 즉 소셜 첫 항목 위에만 구분선.
     원래는 Login 링크를 기준으로 잡았지만 Login이 사라져 선택자를 바꿨다. */
  .nav-menu a:not(.nav-menu-social-mobile) + .nav-menu-social-mobile {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-top: 4px;
    padding-top: 16px !important;
  }

  /* 소셜 링크 호버: 살짝 밝아짐 */
  .nav-menu-social-mobile:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }
}