/* === 모바일 헤더/메뉴 핫픽스 === */
@media (max-width: 960px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
  }
  .site-header .brand {
    z-index: 1001;
  }

  /* 메뉴 버튼(햄버거) 강제 노출 */
  .btn-menu,
  .menu-toggle,
  .mobile-toggle,
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* 기본은 닫힘 */
  .site-header .nav {
    display: none;
  }

  /* 열렸을 때 보이도록 */
  body.nav-open .site-header .nav {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    background: #fff;
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
}

/* === 배너(히어로) 이미지 꽉 차게 === */
.main-banner.hero {
  position: relative;
}
.main-banner.hero img {
  width: 100%;
  height: clamp(500px, 62vh, 820px);
  object-fit: cover; /* 화면에 꽉 차게(일부 잘림) */
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35));
}