.site-header {
  display: flex;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 본문보다 위 */
  gap: 13px;
  background: inherit;
}

.site-main {
  padding: 63px 21px 21px 21px;
}

/* 메인 페이지에서 슬라이더가 있을 때 헤더 스타일 */
.home .site-header {
  background: none;
  position: relative;
  z-index: 100;
}


.menu-brand {
  padding: 21px 13px 21px 21px;
  white-space: nowrap;
}

.menu-brand a {
  text-decoration: none;
}

.menu {
  flex: 1;
  margin: 0;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  padding: 21px 21px 21px 0;
  list-style: none;
  transition: transform 0.25s ease, max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  will-change: transform, max-height, opacity, padding;
  max-height: 400px;
  overflow: hidden;
}

.menu-hideable.is-hidden {
  transform: translateY(-110%);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.menu-item {
  list-style: none;
}

.menu-item a {
  text-decoration: none;
}






@media (max-width: 768px) {
  .site-header {
    flex-wrap: wrap;
    gap: 0;
  }

  .menu-brand {
    flex-basis: 100%;
    padding: 21px 21px 13px 21px;
  }

  .menu {
    flex-basis: 100%;
    padding: 0 21px 21px 21px;
    gap: 13px;
    max-height: 500px;
  }
  
  /* 모바일에서 주소창을 고려한 높이 계산 */
  .site-main {
    padding-top: 97px;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100dvh; /* dynamic viewport height */
    min-height: 100vh; /* fallback */
  }
  
  /* iOS Safari에서 주소창 고려 */
  @supports (-webkit-touch-callout: none) {
    .site-main {
      min-height: -webkit-fill-available;
    }
  }
}