@charset "UTF-8";

/* Pretendard 폰트 import */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css');

/* CSS 변수 import */
@import url('./styleguide.css');

/* 모바일 헤더 전용 CSS */

/* 헤더 컨테이너 */
.mobile-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed; /* fixed로 변경하여 확실히 최상위 고정 */
  top: 0;
  left: 0;
  width: 100vw; /* 뷰포트 전체 너비 */
  z-index: 100000; /* 사이드 메뉴보다 더 높은 z-index */
  background-color: #ffffff; /* 배경색 추가 */
}

/* 헤더 내부 프레임 */
.frame-2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.2vw var(--mobile-padding); /* 반응형 패딩 */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #e1e1e1;
}

/* 로고 스타일 */
.logo-eng-header {
  position: relative;
  width: 20.8vw; /* 78px/375px = 20.8% */
  height: 8.53vw; /* 32px/375px = 8.53% */
  max-width: 78px; /* 최대 크기 제한 */
  max-height: 32px;
}

/* 햄버거 메뉴 아이콘 */
.icon-header {
  position: relative;
  width: 6.4vw; /* 24px/375px = 6.4% */
  height: 6.4vw;
  max-width: 24px; /* 최대 크기 제한 */
  max-height: 24px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* 로고 링크 스타일 */
.logo-link-header {
  text-decoration: none;
  display: block;
}

/* 사이드 메뉴 오버레이 */
.mobile-menu-overlay-header {
  position: fixed;
  top: 0; /* 화면 최상단에서 시작 */
  left: 0;
  width: 100vw; /* 뷰포트 전체 너비 */
  height: 100vh; /* 전체 화면 높이 */
  background-color: #ffffff; /* 완전히 불투명한 흰색 배경 */
  z-index: 99999; /* 더 높은 z-index로 설정 */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu-overlay-header.active {
  transform: translateX(0);
}

/* 사이드 메뉴 컨테이너 */
.mobile-menu-container-header {
  background-color: var(--white);
  width: 100vw; /* 뷰포트 전체 너비 */
  max-width: 100%; /* 최대 너비 제한 */
  min-height: 100vh; /* 전체 화면 높이 */
  position: relative;
  padding-top: 15.2vw; /* 헤더 높이만큼 패딩 추가 (57px/375px = 15.2%) */
}

/* 사이드 메뉴 리스트 */
.mobile-menu-list-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  position: relative;
  top: 0;
  left: 0;
}

/* 메인 메뉴 항목 */
.mobile-menu-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.73vw 6.4vw; /* 반응형 패딩 */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-item-header .menu-title-header {
  font-family: var(--pret-bold-18-font-family);
  font-weight: var(--pret-bold-18-font-weight);
  color: #000000;
  font-size: var(--pret-bold-18-font-size);
  line-height: var(--pret-bold-18-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  letter-spacing: var(--pret-bold-18-letter-spacing);
  white-space: nowrap;
  font-style: var(--pret-bold-18-font-style);
}

.mobile-menu-item-header .menu-arrow-header {
  position: relative;
  width: 5.33vw; /* 20px/375px = 5.33% */
  height: 5.33vw;
  max-width: 20px;
  max-height: 20px;
  transition: transform 0.3s ease;
}

.mobile-menu-item-header.expanded .menu-arrow-header {
  transform: rotate(180deg);
}

/* 서브메뉴 컨테이너 */
.mobile-submenu-header {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.mobile-submenu-header.active {
  display: flex;
}

/* 서브메뉴 항목 */
.mobile-submenu-item-header {
  display: flex;
  align-items: center;
  gap: 11.47vw; /* 43px/375px = 11.47% */
  padding: 3.73vw 6.4vw 3.73vw 9.6vw; /* 반응형 패딩 */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #eaf2f8;
  cursor: pointer;
  text-decoration: none;
}



.mobile-submenu-item-header .submenu-title-header {
  font-family: var(--pret-regular-16-font-family);
  font-weight: var(--pret-regular-16-font-weight);
  color: #000000;
  font-size: var(--pret-regular-16-font-size);
  line-height: var(--pret-regular-16-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  letter-spacing: var(--pret-regular-16-letter-spacing);
  white-space: nowrap;
  font-style: var(--pret-regular-16-font-style);
}

.mobile-submenu-item-header:hover .submenu-title-header {
  color: #1b70b0;
}

/* 현재 페이지 표시 스타일 */
.mobile-submenu-item-header.current-page {
  background-color: #d4edda !important;
  border-left: 4px solid #1b70b0;
}

.mobile-submenu-item-header.current-page .submenu-title-header {
  font-family: "Pretendard-Bold", Helvetica !important;
  font-weight: 700 !important;
  color: #1b70b0 !important;
  font-size: var(--mobile-font-m) !important;
}

/* 확장된 메뉴 스타일 */
.mobile-menu-item-header.expanded {
  background-color: #f8f9fa;
}

.mobile-menu-item-header.expanded .menu-title-header {
  color: #1b70b0;
  font-weight: 700;
}

/* 부메뉴 (3차 메뉴) 스타일 - 자연스럽고 통일된 디자인 */
.mobile-submenu-sub-header {
  display: none;
  flex-direction: column;
  background-color: #eaf2f8; /* 기존 서브메뉴와 똑같은 색상 */
  position: relative;
  align-self: stretch;
  width: 100%;
}

.mobile-submenu-sub-header.active {
  display: flex;
}

.mobile-submenu-sub-item-header {
  display: flex;
  align-items: center;
  padding: 3.73vw 6.4vw 3.73vw 12.8vw; /* 왼쪽 패딩을 더 늘려서 들여쓰기 효과 */
  text-decoration: none;
  color: #000000;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #eaf2f8; /* 기존 서브메뉴와 똑같은 색상 */
}

.mobile-submenu-sub-item-header:hover {
  background-color: #d4e8f0; /* 기존 호버 효과와 유사 */
}

.mobile-submenu-sub-item-header .submenu-title-header {
  font-family: var(--pret-regular-16-font-family);
  font-weight: var(--pret-regular-16-font-weight);
  color: #000000;
  font-size: var(--pret-regular-16-font-size);
  line-height: var(--pret-regular-16-line-height);
  letter-spacing: var(--pret-regular-16-letter-spacing);
  font-style: var(--pret-regular-16-font-style);
}

.mobile-submenu-sub-item-header:hover .submenu-title-header {
  color: #1b70b0;
}

/* 부메뉴(3차 메뉴) 현재 페이지 표시 스타일 */
.mobile-submenu-sub-item-header.current-page {
  background-color: #d4edda !important;
  border-left: 4px solid #1b70b0;
}

.mobile-submenu-sub-item-header.current-page .submenu-title-header {
  font-family: "Pretendard-Bold", Helvetica !important;
  font-weight: 700 !important;
  color: #1b70b0 !important;
  font-size: var(--pret-regular-16-font-size) !important;
}

/* 반응형을 위한 미디어 쿼리 */
@media (max-width: 375px) {
  .frame-2-header {
    padding: 12px 16px;
  }
  
  .logo-eng-header {
    width: 70px;
    height: 28px;
  }
  
  .icon-header {
    width: 20px;
    height: 20px;
  }
  
  .mobile-menu-container-header,
  .mobile-menu-list-header {
    width: 100vw;
  }
}