/* 기본 스타일: XL (1200px 이상) */
.main-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.main-header .container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 20px;
  box-sizing: border-box;

  display: flex; /* ★★★ 이 부분 확인: flexbox 적용 ★★★ */
  align-items: center;
  justify-content: space-between; /* ★★★ 이 부분 확인: 양 끝 정렬 적용 ★★★ */
  gap: 30px;
}

.logo {
  flex-shrink: 0;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
}

.logo img {
  width: auto;
  height: 100%;
  max-height: 50px;
  object-fit: contain;
  display: block;
}

.main-nav-desktop {
  display: flex; /* XL, LG, MD에서는 항상 보이도록 */
  flex-grow: 1;
  justify-content: center;
}
.main-nav-desktop ul {
  display: flex;
  gap: 35px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav-desktop li {
  flex-shrink: 0;
}

.main-nav-desktop a {
  color: #333333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.main-nav-desktop a:hover {
  color: #d84141; /* ★★★ 강조색 #d84141 적용 ★★★ */
}

/* 멍하니님의 지시에 따라 .btn-highlight 관련 스타일 제거됨 */
/*
.main-nav-desktop a.btn-highlight {
  background-color: #1e1e1e;
  color: white;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 700;
  transition: background-color 0.3s ease;
}
.main-nav-desktop a.btn-highlight:hover {
  background-color: #333333;
  color: white;
  text-decoration: none;
}
*/

.header-right-widgets {
  display: flex; /* XL, LG, MD에서는 항상 보이도록 */
  gap: 15px;
  align-items: center;
  flex-shrink: 0;
}

/* 이미지 경로 수정 (css 폴더 기준 ../img/icons/) */
.icon {
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.icon:hover {
  /* SNS 아이콘은 이미지 자체가 색상을 가지므로 호버시 색상 변경은 하지 않고 transform만 유지 */
}

.icon.instagram { background-image: url('../img/icons/instagram.svg'); }
.icon.naver-reserve { background-image: url('../img/icons/naver-reserve.svg'); }
.icon.kakao { background-image: url('../img/icons/kakao.svg'); }

/* 모바일 전용 위젯 그룹 */
.mobile-header-widgets {
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  gap: 10px; /* 햄버거 버튼과 SNS 아이콘 간격 */
}

/* 모바일 메뉴 토글 버튼 (데스크탑에서는 숨김) */
.mobile-menu-toggle {
  display: none; /* 데스크탑에서는 기본적으로 숨김 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1001;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: #333;
  left: 0;
  transition: transform 0.3s ease;
}

.hamburger-icon {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-icon::before {
  content: '';
  top: -8px;
}

.hamburger-icon::after {
  content: '';
  top: 8px;
}

/* LG (Large / 992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .main-nav-desktop ul {
    gap: 25px; /* 메뉴 간격 살짝 좁힘 */
  }
  .main-nav-desktop a {
    font-size: 1.1rem; /* 글씨 크기 살짝 줄임 */
  }
  .main-header .container {
    gap: 20px;
  }
}

/* MD (Medium / 768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .main-nav-desktop ul {
    gap: 20px; /* 메뉴 간격 더 좁힘 */
  }
  .main-nav-desktop a {
    font-size: 1.05rem; /* 글씨 크기 더 줄임 */
    padding: 8px 0;
  }
  /* 멍하니님의 지시에 따라 .btn-highlight 관련 스타일 제거됨 (미디어쿼리 내부 포함) */
  /*
  .main-nav-desktop a.btn-highlight {
    padding: 6px 15px;
  }
  */
  .header-right-widgets {
    gap: 10px; /* SNS 아이콘 간격 줄임 */
  }
  .icon {
    width: 25px;
    height: 25px;
  }
  .logo {
    width: 110px;
    height: 45px;
  }
  .main-header .container {
    padding: 10px 20px;
    gap: 15px;
  }
}

/* SM (Small / 576px - 767px) 및 XS (Extra Small / 575px 이하) */
/* 이 구간부터 데스크탑 nav와 SNS는 숨기고 모바일 햄버거 + SNS 위젯을 보여줌 */
@media (max-width: 767px) {
  .main-nav-desktop,
  .header-right-widgets { /* desktop용 SNS는 숨김 */
    display: none;
  }
  .mobile-header-widgets {
    display: flex; /* ★★★ 이 부분 확인: 모바일 전용 위젯 그룹 표시 ★★★ */
    align-items: center; /* 아이콘과 햄버거 버튼 수직 중앙 정렬 */
    gap: 10px; /* 아이콘 간격 */
  }

  .mobile-header-widgets .icon { /* 모바일 헤더용 SNS 아이콘 */
    width: 28px;
    height: 28px;
  }

  .mobile-menu-toggle {
    display: flex; /* 767px 이하에서 모바일 토글 버튼 표시 */
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 120px; /* 모바일 로고 크기 살짝 줄임 */
    height: 45px;
  }
  .main-header .container {
    padding: 10px 15px;
  }
}

/* XS (Extra Small / 575px 이하) */
@media (max-width: 575px) {
  .logo {
    width: 90px;
    height: 35px;
  }
  .mobile-menu-toggle {
    width: 35px;
    height: 35px;
  }
  .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
    width: 22px;
  }
  .hamburger-icon::before { top: -7px; }
  .hamburger-icon::after { top: 7px; }
  .mobile-header-widgets .icon { /* 모바일 헤더용 SNS 아이콘 더 줄임 */
    width: 24px;
    height: 24px;
  }
}