/* Header Component */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: transparent; /* 슬라이드 배경 위에 오버레이 */
  z-index: 100;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-2xl);
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo-image {
  display: block;
  height: clamp(17px, 1.67vw, 32px);
}

.header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header__logo-link {
  text-decoration: none;
  color: inherit;
}

/* 헤더 버튼 */
.btn--header {
  background-color: #0159fd; /* Figma: 헤더 CTA 버튼 배경색 */
  color: #ffffff;
  padding: var(--spacing-sm) var(--spacing-lg);
  height: clamp(16px, 2.08vw, 40px); /* 40px @1920px, min = 40 × 0.4 */
  font-size: clamp(11px, 0.68vw, 13px); /* 13px @1920px, min 11px for readability */
  line-height: 1.23;
  border-radius: 50px;
  white-space: nowrap;
}

/* 1920px 이상: 헤더 버튼 고정값 */
@media screen and (min-width: 1920px) {
  .btn--header {
    height: 40px;
    font-size: 13px;
    padding: 12px 24px; /* --spacing-sm, --spacing-lg @1920px */
  }
}

.header__language {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.header__language-text {
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: clamp(11px, 0.68vw, 13px);
  line-height: 1.23;
  color: #ffffff;
}

.header__language-arrow {
  display: block;
  width: clamp(6px, 0.63vw, 12px);
  height: auto;
  transition: transform 0.2s ease;
}

.header__language--open .header__language-arrow {
  transform: rotate(180deg);
}

/* Language Dropdown */
.header__language-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-60%);
  margin-top: var(--spacing-md);
  padding: clamp(2px, 0.21vw, 4px) 0;
  background-color: #ffffff;
  border-radius: clamp(10px, 1.04vw, 20px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  min-width: clamp(52px, 5.21vw, 100px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.header__language--open .header__language-dropdown {
  opacity: 1;
  visibility: visible;
}

.header__language-option {
  padding: clamp(4px, 0.42vw, 8px) var(--spacing-sm);
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: clamp(11px, 0.68vw, 13px);
  line-height: 1.23;
  color: #6b7280;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header__language-option--active {
  color: #0159fd;
}

.header__language-option:hover {
  background-color: transparent;
}

.header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(13px, 1.25vw, 24px);
  height: clamp(13px, 1.25vw, 24px);
  padding: 0;
}

.header__menu-icon {
  display: block;
  width: clamp(13px, 1.25vw, 24px);
  height: clamp(13px, 1.25vw, 24px);
}

/* 메뉴 드로어 */
.header-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.header-menu--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header-menu__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.header-menu__drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(400px, 45vw, 600px); /* 오른쪽 영역 메뉴 폭 */
  height: 100%;
  background-color: transparent;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.header-menu--open .header-menu__drawer {
  transform: translateX(0);
}

.header-menu__close {
  position: absolute;
  top: calc((var(--header-height) - clamp(13px, 1.25vw, 24px)) / 2);
  right: var(--spacing-2xl);
  width: clamp(13px, 1.25vw, 24px);
  height: clamp(13px, 1.25vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 10;
}

.header-menu__close-icon {
  display: block;
  width: clamp(13px, 1.25vw, 24px);
  height: clamp(13px, 1.25vw, 24px);
}

.header-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px); /* 항목 간 간격 (Figma line-height 84px 기준) */
}

.header-menu__item {
  margin: 0;
}

.header-menu__link {
  font-family: var(--font-montserrat); /* Figma: Montserrat ExtraBold */
  font-weight: 800;
  font-size: clamp(32px, 3.13vw, 60px);
  line-height: 1.4; /* Figma lineHeight 84px 근사치 */
  color: #ffffff;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.header-menu__link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* 1920px 이상: 중앙 고정 레이아웃 기준 */
@media screen and (min-width: 1920px) {
  .header-menu__drawer {
    width: 600px;
    /* 1920px 컨테이너 기준 오른쪽 정렬 */
    right: calc((100vw - 1920px) / 2);
  }

  .header-menu__close {
    /* 1920px 컨테이너 기준 오른쪽 64px 위치 */
    right: calc((100vw - 1920px) / 2 + 64px);
  }
}