@charset "utf-8";

/* ================================================================
   공통 헤더
   MO : 1줄(로고 또는 뒤로가기 + 검색 아이콘) 46 + 2줄(가로 스크롤 탭) 49 + 선 1 = 96
   PC : 한 줄(로고 | 메뉴 | 검색 버튼) 73 + 선 1 = 74  (1024px 부터)
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
}

.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 로고 */
.site-header__logo {
  padding-block: 8px;
}

.site-header__logo img {
  width: 108px;
  height: 30px;
}

/* 뒤로가기 (MO, 메인 제외) */
.site-header__back {
  display: flex;
  width: 24px;
  height: 24px;
  margin-block: 11px;
  color: var(--gray-a2);
}

.site-header--sub .site-header__logo,
.site-header--article .site-header__logo {
  display: none;
}

/* 검색 */
.site-header__search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  color: var(--gray-a2);
}

.site-header__search-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 탭 (MO: 화면 끝까지 가로 스크롤) */
.site-header__nav {
  position: relative;
  order: 3;
  flex: 0 0 calc(100% + var(--gutter) * 2);
  min-width: 0;
  max-width: calc(100% + var(--gutter) * 2);
  margin-inline: calc(var(--gutter) * -1);
  padding-top: 8px;
}

.site-header__nav::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
  transition: opacity var(--transition);
}

.site-header__nav.is-end::after {
  opacity: 0;
}

.site-header__tabs {
  display: flex;
  padding-inline: max(0px, calc(var(--gutter) - 16px)); /* 390 이하 0(탭 글자 x10, 시안) → 넓어지면 로고 줄과 맞춤 */
  scroll-padding-inline: 0 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site-header__tabs::-webkit-scrollbar {
  display: none;
}

.site-header__tab {
  flex: none;
  padding: 10px;
  color: var(--gray-a3);
  font-size: var(--fs-body2);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: color var(--transition);
}

.site-header__tab:focus-visible {
  outline-offset: -2px; /* 가로 스크롤 영역에서 포커스 링이 잘리지 않게 */
  border-radius: var(--radius-sm);
}

.site-header__tab:hover {
  color: var(--gray-a2);
}

.site-header__tab.is-active {
  color: var(--primary);
  font-weight: 700;
}

/* 아래 선 */
.site-header__line {
  height: 1px;
  background: var(--fill-elevated);
}

.site-header--article .site-header__line {
  display: none;
}

/* ---------- PC ---------- */
@media (min-width: 1024px) {
  .site-header__row {
    flex-wrap: nowrap;
    gap: 58px;
    min-height: 73px;
  }

  .site-header__back {
    display: none;
  }

  .site-header--sub .site-header__logo,
  .site-header--article .site-header__logo {
    display: block;
  }

  .site-header__logo {
    padding-block: 0;
  }

  .site-header__nav {
    order: 0;
    flex: 1;
    margin-inline: 0;
  }

  .site-header__nav::after {
    display: none;
  }

  .site-header__tabs {
    padding-inline: 0;
    overflow: visible;
  }

  .site-header__tab {
    flex: 1;
    text-align: center;
  }

  .site-header__search {
    gap: 4px;
    width: auto;
    height: auto;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    background: var(--gray-a5);
    transition: background-color var(--transition);
  }

  .site-header__nav + .site-header__search {
    margin-left: 0;
  }

  .site-header__search:hover {
    background: var(--gray-a4);
  }

  .site-header__search .icon {
    width: 16px;
    height: 16px;
  }

  .site-header__search-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: var(--fs-body2);
    font-weight: 600;
    line-height: 1.5;
  }

  .site-header__line {
    margin-inline: 16px;
  }

  .site-header--article .site-header__line {
    display: block;
  }
}