@import url("../../css/epic/theme_tokens.css");
html,
body {
  margin: 0;
  padding: 0;
}

/* Hide any scrollbars inside the header area across browsers */
/*.header-wrapper,*/
/*.header-wrapper * {*/
/*  -ms-overflow-style: none; !* IE/Edge *!*/
/*  scrollbar-width: none; !* Firefox *!*/
/*}*/

/*.header-wrapper::-webkit-scrollbar,*/
/*.header-wrapper *::-webkit-scrollbar {*/
/*  display: none; !* Chrome/Safari *!*/
/*  width: 0;*/
/*  height: 0;*/
/*}*/

.header {
  display: flex;
  height: 88px;
  padding: 24px 112px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  /* 순수 레이아웃 컨테이너 역할만 담당 */
  box-sizing: border-box;
  position: relative;
}

/* 데스크탑 우측: 네비게이션 + 로그인 버튼 수평 정렬 */
.header-desktop-right {
  display: flex;
  align-items: center;
  gap: 24px; /* 네비와 로그인 그룹 사이 간격 (데스크탑 기준 24px) */
}

.header-nav {
  display: flex;
  gap: 4px; /* 각 네비 항목 간 간격 */
}

.header-login-group {
  display: flex;
  gap: 8px; /* 각 로그인 버튼 간 간격 */
  align-items: center;
}

.header-wrapper {
  position: relative;
  /* 기본 헤더 유리판 (레벨2) */
  box-shadow: 0 4px 8px 0 var(---LV-1, rgba(14, 15, 17, 0.03)),
    0 8px 16px 0 var(---LV-2, rgba(14, 15, 17, 0.05)),
    0 16px 24px 0 var(---LV-2, rgba(14, 15, 17, 0.05));

  backdrop-filter: blur(50px);

  /* 메가 메뉴 확장/축소 시 부드러운 애니메이션 */
  transition: box-shadow 0.25s ease, background 0.25s ease,
    padding-bottom 0.25s ease, border-bottom-color 0.25s ease, height 0.15s ease;
}

/* 메가 메뉴가 열렸을 때 헤더+메가 메뉴를 감싸는 배경 스타일 */
.header-wrapper.is-open {
  height: 460px;

  border-bottom: 1px solid var(---, #c2c8cc);
  background: var(
    ---BG,
    linear-gradient(
      180deg,
      var(---01, rgba(255, 255, 255, 0.95)) 0%,
      var(---02, rgba(255, 255, 255, 0.75)) 100%
    )
  );

  /* 시스템그림자/하단/레벨3 */
  box-shadow: 0 4px 8px 0 var(---LV-1, rgba(14, 15, 17, 0.03)),
    0 8px 16px 0 var(---LV-2, rgba(14, 15, 17, 0.05)),
    0 16px 24px 0 var(---LV-2, rgba(14, 15, 17, 0.05));
  backdrop-filter: blur(50px);

  /* 메가 메뉴 높이만큼 아래로 배경을 늘려서 총 높이가 약 434px 정도 되도록 */
}

.header img,
.header .nav-item,
.header .login-btn {
  transition: opacity 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.nav-font {
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  padding: 0px;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--nav-color, #fff);
}

/* 데스크탑 상단 네비 공통 정렬 (pill 선택 시 높이/정렬 깨지지 않도록) */
@media (min-width: 1300px) {
  .header-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px; /* 기본 상태에서도 radius를 줘서 hover 시 튐 현상 방지 */
  }
}

/* 데스크탑 상단 네비에서 선택된 상위 항목 스타일 */
@media (min-width: 1300px) {
  .header-nav .nav-item.is-active-main {
    border-radius: 8px;
    background: var(---, #5856d6); /* 보라색 배경 */
    color: var(---, #fff) !important; /* 보라색 배경일 때 텍스트 흰색 */
  }

  .header-nav .nav-item:hover {
    border-radius: 8px;
    background: var(---, #5856d6); /* 보라색 배경 */
    color: var(---, #fff) !important; /* 보라색 배경일 때 텍스트 흰색 */
  }

  body.theme-dark .header-nav .nav-item.is-active-main {
    background: var(---BG, #fff); /* 흰색 배경 */
    color: var(---, #5856d6) !important; /* 흰 배경일 때 텍스트 보라색 */
  }
}

.logo {
  height: 44px;
}

/* 기본 상태: 라이트 모드 */
.logo-light,
.logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  height: 44px;
  transition: opacity 0.25s ease;
  opacity: 0;
}

body.theme-light .logo-light {
  opacity: 1;
}
body.theme-light .logo-dark {
  opacity: 0;
}

body.theme-dark .logo-light {
  opacity: 0;
}
body.theme-dark .logo-dark {
  opacity: 1;
}

body.theme-light .nav-item {
  --nav-color: #1e2224;
}
body.theme-dark .nav-item {
  --nav-color: #fff;
}

.login-btn {
  border-radius: var(---M-M, 8px);
  border: var(---M-M, 1px) solid var(--login-border, #fff);
  background: var(--login-bg, rgba(255, 255, 255, 0.05));

  display: flex;
  height: var(---M-M, 32px);
  padding: 0 var(---M-M, 14px);
  justify-content: center;
  align-items: center;
  gap: var(--button-input-mm-button-m, 6px);

  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--login-color, #fff);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

body.theme-light .login-btn {
  --login-border: #5856d6;
  --login-bg: #fff;
  --login-color: #5856d6;
}

body.theme-dark .login-btn {
  --login-border: #fff;
  --login-bg: rgba(255, 255, 255, 0.05);
  --login-color: #fff;
}

body.theme-light .header-mobile-icon {
  --mobile-icon-color: #1e2224;
}

body.theme-dark .header-mobile-icon {
  --mobile-icon-color: #ffffff;
}

/* 모바일 전용 아이콘은 기본(데스크탑)에서는 숨김 */
.header-mobile-icon {
  display: none;
}

/* Bottom border with horizontal padding */
.header::after {
  border-bottom: #1e2224;
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  width: 100vw; /* 초기에는 화면 전체를 덮게 */
  transform: translateX(-50%);
  bottom: 0;
  height: 1px;
  background: var(--color-border-line, #c2c8cc);
  transition: left 0.2s ease, width 0.2s ease, transform 0.2s ease;
}

/* ===============================
   Desktop fixed width (≥1300px)
   =============================== */
@media (min-width: 1300px) {
  .header-wrapper {
    display: flex;
    justify-content: center;
  }

  .header {
    max-width: 1216px;
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* Hover 시 1216px 컨테이너 너비로 수축 */
  .header-wrapper:hover .header::after {
    left: 0;
    width: 100%;
    transform: none;
  }
}

/* 모바일/태블릿: 호버 시 보더 애니메이션 제거 */
@media (max-width: 1299px) {
  .header::after {
    transition: none;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .header-wrapper:hover .header::after {
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .contents-tit {
    display: none;
  }

  .contents-inner {
    margin-top: 150px;
  }

  .tab_list {
    margin-top: 150px;
  }

  .titBox {
    margin-top: 100px;
  }
}

/* ===============================
   Mega Menu Layout & Typography
   =============================== */

/* 메가 메뉴 패널 기본 레이아웃 */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 88px; /* 헤더 높이 아래에서 시작 */
  padding: 32px 0 40px;
  display: none !important; /* 기본은 숨김 */
  box-sizing: border-box;
  z-index: 10;
  justify-content: center;

  /* 확장 후 0.1초 뒤에 서서히 나타나는 애니메이션 */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease 0.1s, transform 0.45s ease 0.4s;
}

.mega-menu-inner {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  display: flex;
  gap: 24px; /* 각 그룹 사이 간격 24px */
}

/* 각 컬럼 */
.mega-column {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 타이틀-리스트 간 등 그룹 내부 기본 간격 16px */
}

/* 상단 타이틀 (예: 사업단 소개, 연구성과 등) */
.mega-title {
  padding-left: 17px;
  font-family: "SUITE", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  color: #1e2224;
  padding-bottom: 8px; /* 타이틀 내부와 디바이더 간 간격 */
  border-bottom: 1px solid #c2c8cc; /* 디바이더 역할 */
}

/* 서브 탭 (예: 연구소개) */
.mega-subtab {
  display: inline-flex;
  margin-top: 24px;
  margin-bottom: 12px;
  padding: 8px 20px;
  border-radius: 8px;
  background: rgba(88, 86, 214, 0.1);
  color: #5856d6;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* 링크 리스트 기본 스타일 */
.mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 디바이더와 각 항목, 항목 간 모두 16px 간격 */
}

.mega-links li {
  margin: 0;
}

/* 개별 링크 스타일 */
.mega-links a {
  border-radius: 6px;
  background: transparent;
  display: flex;
  padding: 8px 20px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  color: var(---, #0e0f11);
  font-family: "Pretendard", sans-serif;
  font-size: var(--l, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--l, 16px); /* 100% */

  text-decoration: none;
}

/* Hover 시 하이라이트 */
.mega-links a:hover {
  background: rgba(88, 86, 214, 0.1);
  color: var(---, #5856d6);
  font-weight: 400;
}

/* ===============================
   Mobile Layout (≤1300px)
   Logo centered, menu icon left, logout icon right
   =============================== */
@media (max-width: 1300px) {
  .header {
    padding-left: 24px;
    padding-right: 24px;
    justify-content: center;
    position: relative;
  }

  /* 데스크탑 네비/로그인은 숨김 */
  .header-desktop-right {
    display: none;
  }

  /* 로고 중앙 정렬 */
  .header-logo {
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* 모바일용 좌/우 아이콘 노출 */
  .header-mobile-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 22px;
    width: 40px;
    height: 40px;
    color: var(--mobile-icon-color);
    transition: color 0.25s ease;
  }

  .header-mobile-menu {
    justify-self: flex-start;
  }

  .header-mobile-logout {
    justify-self: flex-end;
  }

  /* 모바일에서는 헤더 hover 시 보더 수축 효과 제거 */
  .header-wrapper:hover .header::after {
    left: 0;
    right: 0;
  }
}

/* 1301px 이상에서는 모바일 아이콘 강제 숨김 */
@media (min-width: 1301px) {
  .header-mobile-icon {
    display: none !important;
  }
}

/* =========================
   모바일 메가 메뉴 기본 레이아웃
   ========================= */
.mega-menu-mobile {
  display: none; /* 기본은 숨김, 모바일 구간에서만 표시 */
}

.mega-mobile-inner {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.mega-mobile-left {
  border-right: 1px solid var(---, #c2c8cc);
  background: var(---, #f2f6fa);

  display: flex;
  width: 180px;
  padding: 24px 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.mega-mobile-main {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-mobile-main-item {
  width: 180px;
  box-sizing: border-box;
  border-bottom: 1px solid var(---, #c2c8cc);
  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #1e2224;
  cursor: pointer;
  background: transparent;
}

.mega-mobile-main-item.is-active {
  width: 180px;
  box-sizing: border-box;
  /* ✅ border-top 제거 */
  border-bottom: 1px solid var(---, #c2c8cc);
  background: var(---, #fff);

  display: flex;
  padding: 16px 24px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  color: #1e2224;
}

/* ✅ 항상 맨 위 항목만 top border */
.mega-mobile-main-item:first-child {
  border-top: 1px solid var(---, #c2c8cc);
}

.mega-mobile-login {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 버튼들 사이 간격 */
  padding: 0 20px 8px 20px;
  margin-top: 16px; /* 위의 그룹과의 간격 16px */
}

.mega-mobile-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mega-mobile-tab-row {
  display: flex;
  gap: 8px;
}

.mega-mobile-tab {
  border-radius: 8px;
  border: none;
  padding: 10px 18px;
  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 700;
  background: rgba(88, 86, 214, 0.08);
  color: #5856d6;
}

.mega-mobile-sub {
  list-style: none;
  margin: 0;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mega-mobile-sub li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  border-radius: 6px;
  background: transparent;

  color: var(---, #0e0f11);
  font-family: var(---, Pretendard);
  font-size: var(--l, 16px);
  font-style: normal;
  font-weight: 300;
  line-height: var(--l, 16px); /* 100% */

  text-decoration: none;
}

.mega-mobile-sub li a:hover {
  background: var(---, rgba(88, 86, 214, 0.1));
  color: var(---, #5856d6);
  font-weight: 600;
}

/* ===============================
   Breakpoints & Visibility Control
   =============================== */

/* [Desktop] 1300px 이상 */
@media (min-width: 1300px) {
  /* 데스크탑에서는 모바일 메뉴 절대 숨김 */
  .mega-menu-mobile {
    display: none !important;
  }

  /* Wrapper가 열렸을 때 데스크탑 메뉴 표시 */
  .header-wrapper.is-open .mega-menu-desktop {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
  }
}

/* [Mobile] 1300px 미만 */
@media (max-width: 1299px) {
  /* 1. 데스크탑 메뉴 절대 숨김 (가장 중요) */
  .mega-menu-desktop {
    display: none !important;
  }

  .header-wrapper.is-open {
    height: 100%;
  }

  /* 2. 모바일 메뉴 기본 설정 */
  .mega-menu-mobile {
    display: none; /* 기본 숨김 */

    /* 공통 클래스(.mega-menu)가 준 거대한 패딩 초기화 */
    padding: 0 !important;

    /* 모바일 전용 위치/크기 잡기 - 헤더(88px)를 제외한 전체 화면 높이 */
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 999;
    overflow-y: auto; /* 내용 길면 스크롤 */
    height: calc(100% - 88px);
    /* 모바일은 위아래 이동 애니메이션 없이, 투명도만 사용 */
    opacity: 0; /* 닫혀 있을 때는 투명 */
    transform: translateY(0); /* 데스크탑용 translateY(-8px) 초기화 */
    transition: opacity 0.2s ease; /* 부드럽게 나타나기 */
  }

  /* 3. Wrapper가 열렸을 때 모바일 메뉴 표시 */
  .header-wrapper.is-open .mega-menu-mobile {
    display: flex !important; /* flex로 띄움 */
    flex-direction: row;

    /* 열렸을 때는 완전히 보이도록 */
    opacity: 1 !important;
    transform: none !important;
  }

  /* 4. 모바일에서 메뉴 열렸을 때 헤더 높이 처리 */
  .header-wrapper.is-open {
    /* 데스크탑용 고정 높이(480px) 대신 내용물에 맞게 혹은 전체화면으로 */
  }

  /* 모바일 메가메뉴 내 로그아웃/회원가입 버튼 스타일 */
  .mega-mobile-login .login-btn {
    border-radius: var(---M-M, 10px);
    border: var(---M-M, 1.2px) solid var(---, #5856d6);
    background: var(---BG, #fff);
    width: 148px;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    height: var(---M-M, 42px);
    padding: 0 var(---M-M, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--button-input-mm-button-m, 6px);
    align-self: stretch;
  }

  .mega-mobile-login .login-btn:hover {
    border: var(--button-input-lll, 1.5px) solid var(---, #5856d6);
    background: var(---, rgba(88, 86, 214, 0.05));
    color: var(---, #100f39);
  }
}

.login-btn:hover {
  border: var(--button-input-lll, 1px) solid var(---, #5856d6);
  background: var(---, rgba(88, 86, 214, 0.05));
  color: var(---, #100f39);
}