/* =========================================
   HEADER 전체
========================================= */
.main-header {
  width: 100%;
  background: linear-gradient(135deg, #def5e9, #f2fff7);
  border-bottom: 0.12em solid #cfe8d9;
  padding: 1.2em 2em;

  /* ★ 화면 상단 고정 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  /* 고정 헤더는 아래 그림자 넣어주면 더 자연스러움 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-inner {
  width: 100%;
  margin: 0 auto;

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

  flex-wrap: wrap;
}

/* =========================================
   로고 (왼쪽 고정)
========================================= */
.logo {
  font-size: 2em;
  font-weight: 700;
  color: #2b593a;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.logo:hover {
  opacity: 0.8;
}

/* =========================================
   NAV 영역 (가운데 정렬)
========================================= */
.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-left: 2em;
  font-weight: bold;
}

.nav-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  white-space: nowrap;
}

.nav-menu a {
  font-size: 1.1em;
  text-decoration: none;
  color: #2b593a;
  padding: 0.4em 0.7em;
  border-radius: 0.6em;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0);
}

.nav-menu a:hover {
  background: rgba(79, 164, 107, 0.15);
  color: #1e4b31;
}

/* =========================================
   모바일 햄버거 버튼 (오른쪽)
========================================= */
.hamburger {
  display: none;
  font-size: 2.2em;
  cursor: pointer;
  color: #2b593a;
}

/* =========================================
   모바일 메뉴
========================================= */
.mobile-menu {
  display: none;
  background: #e6f6ee;
  padding: 2em 1.5em;
  border-top: 0.1em solid #cfe8d2;
  font-weight: bold;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  margin-bottom: 1.2em;
}

.mobile-menu a {
  text-decoration: none;
  font-size: 1.3em;
  color: #2b593a;
  transition: color 0.2s ease;
}

.mobile-menu a:hover {
  color: #4fa46b;
}

.mobile-menu.open {
  display: block;
}

/* =========================================
   반응형
========================================= */
@media (max-width: 1200px) {
  .nav-menu ul {
    gap: 1.1em;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .header-inner {
    justify-content: space-between;
  }
}

/* =========================================
   ★ body가 header에 가리지 않도록 보정
========================================= */
body {
  padding-top: 5.2em; /* 필요하면 5.0em ~ 6.0em 사이에서 조절 가능 */
}