/* ========================================
   Header / GNB
   ======================================== */

/* Header Base Styles */
.site-header {
  position: fixed;
  width: 100%;
  height: 82px;
  z-index: 101;
  transition: color 0.2s ease-in;
  top: 0px;
  color: rgb(255, 255, 255);
}

/* 태블릿: Header 높이 조정 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header {
    height: 6.83vw; /* 82px / 1200px */
  }
}

/* Logo - Base Styles (공통) */
.site-header__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  transition: width 0.2s ease-in, top 0.2s ease-in, left 0.2s ease-in,
    transform 0.2s ease-in, color 0.1s ease-in;
  z-index: 100;
}

/* Logo - Initial State (큰 로고, 화면 하단) */
.site-header__logo-link--initial {
  position: fixed;
  width: 1240px;
  top: calc(-148px + 100vh);
  transform: translate(-50%, -100%);
  pointer-events: none;
}

/* Logo - Scrolled State (작은 로고, header 상단) */
.site-header__logo-link--scrolled {
  position: absolute;
  width: 114px;
  top: 30px;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Logo - 중간 크기 (1200px ~ 1400px) */
@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .site-header__logo-link--initial {
    width: 1000px;
  }

  .site-header__logo-link--scrolled {
    width: 114px;
  }
}

/* Logo - 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__logo-link--initial {
    width: 83.33vw; /* 1000px / 1200px */
    top: calc(100vh - 12.33vw); /* 148px / 1200px */
  }

  .site-header__logo-link--scrolled {
    width: 9.5vw; /* 114px / 1200px */
    top: 2.5vw; /* 30px / 1200px */
  }
}

/* Logo - 모바일 */
@media (max-width: 767px) {
  .site-header__logo-link--initial {
    width: 88.89vw; /* 320px / 360px */
    top: calc(100dvh - 100px);
    pointer-events: none;
  }

  /* dvh 미지원 브라우저 fallback */
  @supports not (height: 100dvh) {
    .site-header__logo-link--initial {
      top: calc((var(--vh, 1vh) * 100) - 100px);
    }
  }

  .site-header__logo-link--scrolled {
    position: absolute;
    left: 20px;
    width: 92px;
    top: 22px;
    transform: translate(0);
    pointer-events: auto;
  }
}

.site-header__logo-icon {
  display: inline-flex;
  width: 114px;
  height: 21px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  transition: 0.4s ease-in;
}

.site-header__logo-icon svg {
  width: 100%;
  height: 100%;
}

/* Header Inner - Initial State (숨김) */
.site-header .site-header__inner {
  height: 100%;
  transition: transform 0.2s ease-in 0.2s, background 0.2s ease-in;
  transform: translateY(-100px);
}

/* Header Inner - Scrolled State (나타남) */
.site-header--scrolled .site-header__inner {
  transform: translateY(0);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 태블릿/모바일: Header Inner 레이아웃 */
@media (max-width: 1200px) {
  .site-header .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.83vw; /* 10px / 1200px */
    width: 100%;
  }

  /* 스크롤 후 헤더 나타남 */
  .site-header--scrolled .site-header__inner {
    transform: translateY(0);
  }

  /* 메뉴 오픈 시 배경색 */
  .site-header.menu-open .site-header__inner {
    background: #000;
  }
}

@media (max-width: 767px) {
  .site-header .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    width: 100%;
  }
}

/* 메뉴 오픈 시 오버레이 배경 (태블릿/모바일) */
@media (max-width: 1200px) {
  .site-header::before {
    position: fixed;
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .site-header.menu-open::before {
    visibility: visible;
    opacity: 1;
  }
}

.site-header__menu-button {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 10px;
  display: none; /* 데스크톱에서는 숨김 */
}

/* 태블릿/모바일에서는 항상 햄버거 버튼 표시 */
@media (max-width: 1200px) {
  .site-header__menu-button {
    display: flex;
  }
}

/* 태블릿 사이즈 조정 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__menu-button {
    width: 3.33vw; /* 40px / 1200px */
    height: 3.33vw;
    padding: 0.83vw; /* 10px / 1200px */
  }

  .site-header__menu-button .bar {
    width: 1.67vw; /* 20px / 1200px */
    height: 0.17vw; /* 2px / 1200px */
  }
}

/* 모바일 사이즈 조정 */
@media (max-width: 767px) {
  .site-header__menu-button {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  .site-header__menu-button .bar {
    width: 20px;
    height: 2px;
  }
}

.site-header__menu-button .bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background-color: currentcolor;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.site-header__menu-button .bar:first-of-type {
  transform: translate(-50%, calc(-50% - 5px));
  animation-name: aniBarFirstBack;
}

.site-header__menu-button .bar:nth-of-type(2) {
  transform: translate(-50%, calc(-50% + 5px));
  animation-name: aniBarLastBack;
}

/* 메뉴 오픈 시 X 모양으로 변경 */
.site-header__menu-button.is-open .bar:first-of-type {
  animation-name: aniBarFirst;
}

.site-header__menu-button.is-open .bar:nth-of-type(2) {
  animation-name: aniBarLast;
}

/* 햄버거 → X 애니메이션 */
@keyframes aniBarFirst {
  0% {
    transform: translate(-50%, calc(-50% - 5px));
  }
  70% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes aniBarLast {
  0% {
    transform: translate(-50%, calc(-50% + 5px));
  }
  70% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

/* X → 햄버거 애니메이션 */
@keyframes aniBarFirstBack {
  0% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  30% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

@keyframes aniBarLastBack {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  30% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, calc(-50% + 5px));
  }
}

.header_inner_menu {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0px 60px 0px 30px;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .header_inner_menu {
    padding: 0px 40px 0px 30px;
  }
}

/* 태블릿: 사이드 메뉴 패널 */
@media (max-width: 1200px) and (min-width: 768px) {
  .header_inner_menu {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    align-items: flex-start;
    width: 50vw; /* 600px / 1200px = 50% */
    max-width: 600px;
    height: calc((var(--vh, 1vh) * 100) - 60px);
    padding: 2.5vw 2.92vw 2.92vw; /* 30px 35px 35px */
    right: 0;
    top: 6.83vw; /* 82px / 1200px */
    background: #000;
    transition: all 0.2s ease-in 0.2s;
  }

  /* 메뉴가 열렸을 때 */
  .header_inner_menu.is-open {
    visibility: visible;
    opacity: 1;
  }

  /* 메뉴 내부 순서 조정 */
  .header_inner_menu .site-header__nav {
    order: 2;
    width: 100%;
  }

  .header_inner_menu .site-header__devsites {
    order: 3;
  }
}

/* 모바일: 전체 너비 사이드 메뉴 */
@media (max-width: 767px) {
  .site-header {
    height: 60px !important;
  }

  .header_inner_menu {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: calc((var(--vh, 1vh) * 100) - 60px);
    padding: 20px 20px 30px;
    left: 0;
    top: 60px;
    background: #000;
    transition: all 0.2s ease-in 0.2s;
  }

  /* 메뉴가 열렸을 때 */
  .header_inner_menu.is-open {
    visibility: visible;
    opacity: 1;
  }

  /* 메뉴 내부 순서 조정 */
  .header_inner_menu .site-header__nav {
    order: 2;
    width: 100%;
  }

  .header_inner_menu .site-header__devsites {
    order: 3;
  }

  .header_inner_menu .site-header__actions {
    order: 1;
  }
}

.site-header .site-header__nav {
  height: 100%;
}

/* 모바일/태블릿: 스크롤 가능 */
@media (max-width: 767px) {
  .site-header .site-header__nav {
    overflow-y: auto;
  }
}

.site-header__nav-list {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  height: 100%;
}

/* 태블릿: 세로 배치 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 1.67vw; /* 20px / 1200px */
    margin-top: 3.67vw; /* 44px / 1200px */
  }
}

/* 모바일: 세로 배치 */
@media (max-width: 767px) {
  .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 15px;
    margin-top: 40px;
  }
}

.site-header__nav-list li {
  display: flex;
}

.site-header__nav-list li:nth-of-type(1) {
  width: 106px;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .site-header__nav-list li:nth-of-type(1) {
    width: 74px;
  }
}

@media (max-width: 1200px) {
  .site-header__nav-list li:nth-of-type(1),
  .site-header__nav-list li:nth-of-type(2),
  .site-header__nav-list li:nth-of-type(3),
  .site-header__nav-list li:nth-of-type(4),
  .site-header__nav-list li:nth-of-type(5) {
    width: 100% !important;
  }
}

.site-header__nav-list li:nth-of-type(2) {
  width: 132px;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .site-header__nav-list li:nth-of-type(2) {
    width: 97px;
  }
}

.site-header__nav-list li:nth-of-type(3) {
  width: 142px;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .site-header__nav-list li:nth-of-type(3) {
    width: 103px;
  }
}

.site-header__nav-list li:nth-of-type(4) {
  width: 133px;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .site-header__nav-list li:nth-of-type(4) {
    width: 101px;
  }
}

.site-header__nav-list li:nth-of-type(5) {
  width: 93px;
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
  .site-header__nav-list li:nth-of-type(5) {
    width: 59px;
  }
}

.site-header__nav-list.is_main_page a {
  opacity: 1;
}

.site-header__nav-list a {
  opacity: 0.6;
}

.site-header__nav-link {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 17px;
  color: currentcolor;
  transition: 0.2s ease-in;
  opacity: 0.6;
}

.site-header__nav-link.is_selected {
  font-weight: 700;
  opacity: 1 !important;
}

@media (min-width: 1201px) {
  .site-header__nav-link:hover {
    font-weight: 700;
    opacity: 1 !important;
  }
}

/* 태블릿: 왼쪽 정렬, 큰 폰트 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__nav-link {
    justify-content: flex-start;
    padding: 0;
    font-size: 4.17vw; /* 50px / 1200px */
    font-weight: 700;
    line-height: 1.1;
  }
}

/* 모바일: 왼쪽 정렬, 큰 폰트 */
@media (max-width: 767px) {
  .site-header__nav-link {
    justify-content: flex-start;
    padding: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
  }
}

.site-header__actions {
  display: flex;
  gap: 30px;
}

/* 태블릿/모바일: actions 레이아웃 */
@media (max-width: 1200px) {
  .site-header__actions {
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    order: 1;
  }
}

.site-header__lang {
  position: relative;
  display: flex;
}

/* 태블릿/모바일 */
@media (max-width: 1200px) {
  .site-header__lang {
    order: 2;
  }
}

.site-header__lang-button {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__lang-button {
    gap: 0.33vw; /* 4px / 1200px */
    font-size: 1.33vw; /* 16px / 1200px */
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .site-header__lang-button {
    font-size: 16px;
  }
}

.site-header__lang-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  transition: 0.4s ease-in;
}

.site-header__lang-icon svg {
  width: 100%;
  height: 100%;
}

/* 모바일 */
@media (max-width: 767px) {
  .site-header__lang-icon {
    width: 24px;
    height: 24px;
  }
}

.site-header__lang-caret {
  width: 12px;
  height: 12px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform 0.2s ease-in;
}

/* 언어 드롭다운 열렸을 때 화살표 회전 */
.site-header__lang.is-open .site-header__lang-caret {
  transform: rotate(-180deg);
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__lang-caret {
    width: 1vw; /* 12px / 1200px */
    height: 1vw;
  }
}

.site-header__lang-caret-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  transition: 0.4s ease-in;
}

.site-header__lang-caret-icon svg {
  width: 100%;
  height: 100%;
}

.site-header__lang-dropdown {
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  right: 0px;
  bottom: -10px;
  max-height: 0px;
  border-radius: 14px;
  border: 1px solid rgb(255, 255, 255);
  transform: translateY(100%);
  background: rgb(0, 0, 0);
  transition: max-height 0.3s ease-out, visibility 0.3s ease-out;
  width: auto;
}

/* 언어 드롭다운 열렸을 때 */
.site-header__lang.is-open .site-header__lang-dropdown {
  visibility: visible;
  max-height: 78px;
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__lang-dropdown {
    border-radius: 1.17vw; /* 14px / 1200px */
    bottom: -0.83vw; /* -10px / 1200px */
  }
}

.site-header__lang-option {
  display: flex;
  width: 100%;
  padding: 2px 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-box-pack: center;
  justify-content: center;
  color: rgb(255, 255, 255);
}

.site-header__lang-option:first-of-type {
  padding-top: 12px;
}

.site-header__lang-option:last-of-type {
  padding-bottom: 12px;
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__lang-option {
    padding: 0.17vw 1.5vw; /* 2px 18px / 1200px */
    font-size: 1vw; /* 12px / 1200px */
  }

  .site-header__lang-option:first-of-type {
    padding-top: 1vw; /* 12px / 1200px */
  }

  .site-header__lang-option:last-of-type {
    padding-bottom: 1vw; /* 12px / 1200px */
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .site-header__lang-option {
    font-size: 16px;
  }
}

.site-header__devsites {
  position: relative;
  display: none;
}

/* 태블릿/모바일에서 Developer Sites 표시 */
@media (max-width: 1200px) {
  .site-header__devsites {
    display: block;
    width: 100%;
    order: 3;
  }
}

.site-header__devsites-button {
  display: flex;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(255, 255, 255);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__devsites-button {
    padding-bottom: 1.33vw; /* 16px / 1200px */
    font-size: 1.42vw; /* 17px / 1200px */
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .site-header__devsites-button {
    padding-bottom: 16px;
    font-size: 17px;
  }
}

.site-header__devsites-caret {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
}

/* + 아이콘 (before: 가로선, after: 세로선) */
.site-header__devsites-caret::before,
.site-header__devsites-caret::after {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  content: '';
  transition: all 0.2s ease-in;
}

/* 닫힌 상태: after가 세로로 회전하여 + 모양 */
.site-header__devsites-caret::after {
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* 열린 상태: after가 가로로 돌아와 - 모양 */
.site-header__devsites.is-open .site-header__devsites-caret::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 태블릿 사이즈 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__devsites-caret {
    width: 1.67vw; /* 20px / 1200px */
    height: 1.67vw;
  }

  .site-header__devsites-caret::before,
  .site-header__devsites-caret::after {
    width: 1.33vw; /* 16px / 1200px */
  }
}

/* 모바일 사이즈 */
@media (max-width: 767px) {
  .site-header__devsites-caret {
    width: 20px;
    height: 20px;
  }

  .site-header__devsites-caret::before,
  .site-header__devsites-caret::after {
    width: 16px;
  }
}

.site-header__devsites-list {
  overflow-y: auto;
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: -0.73vw;
  max-height: 0px;
  border-radius: 0.73vw;
  border: 1px solid rgb(255, 255, 255);
  transform: translateY(-100%);
  background: rgb(0, 0, 0);
  transition: max-height 0.3s ease-out, visibility 0.3s ease-out;
}

/* Developer Sites 리스트 열렸을 때 */
.site-header__devsites.is-open .site-header__devsites-list {
  visibility: visible;
  max-height: 11.67vw; /* 224px / 1920px */
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__devsites-list {
    width: 100%;
    padding: 1.67vw; /* 20px / 1200px */
    border-radius: 1.17vw; /* 14px / 1200px */
    top: -1.5vw; /* -18px / 1200px */
  }

  .site-header__devsites.is-open .site-header__devsites-list {
    max-height: 224px;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .site-header__devsites-list {
    width: 100%;
    padding: 20px;
    border-radius: 14px;
    top: -18px;
  }

  .site-header__devsites.is-open .site-header__devsites-list {
    max-height: 224px;
  }
}

/* Developer Sites 리스트 스크롤바 */
.site-header__devsites-list::-webkit-scrollbar {
  width: 8px;
}

.site-header__devsites-list::-webkit-scrollbar-thumb {
  background: #808080;
  border-radius: 18px;
  border: 2px solid #000;
}

.site-header__devsites-list::-webkit-scrollbar-track {
  background: transparent;
}

.site-header__devsites-link {
  display: flex;
  width: 100%;
  padding: 2px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-header__devsites-link:first-of-type {
  padding-top: 1.25vw; /* 24px / 1920px */
}

.site-header__devsites-link:last-of-type {
  padding-bottom: 1.25vw; /* 24px / 1920px */
}

/* 태블릿 */
@media (max-width: 1200px) and (min-width: 768px) {
  .site-header__devsites-link {
    padding: 0.33vw 0; /* 4px / 1200px */
    font-size: 1.25vw; /* 15px / 1200px */
  }

  .site-header__devsites-link:first-of-type {
    padding-top: 0;
  }

  .site-header__devsites-link:last-of-type {
    padding-bottom: 0;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .site-header__devsites-link {
    padding: 4px 0;
    font-size: 15px;
  }

  .site-header__devsites-link:first-of-type {
    padding-top: 0;
  }

  .site-header__devsites-link:last-of-type {
    padding-bottom: 0;
  }
}