.header {
  /* 헤더 높이 */
  --header-height: 90px;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;

  color: #ffffff;
  background-color: transparent;

  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header__inner {
  max-width: 1600px;
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* header inner 크기 관리 */

/* @media (max-width: 1200px) {
  .header__inner {
    padding: 0 40px;
  }
}

@media (max-width: 992px) {
  .header__inner {
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
  .header__inner {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .header__inner {
    padding: 0 15px;
  }
} */

.header__logo {
  flex-basis: 200px;
  flex-shrink: 0;
}

.header__nav {
  flex: 1;
}

.header__btn__menu {
  flex-basis: 200px;
  flex-shrink: 0;
}

/* header__logo */
.header__logo a {
  position: relative;
  z-index: 100;
}

.header__logo img {
  height: 24px;
}

/* header__btn__menu */
.header__btn__menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header__btn__sitemap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 16px;
  cursor: pointer;
  position: relative;
  z-index: 100;
}

.header__btn__sitemap .bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    width 0.3s ease;
  transform-origin: center center;
}

.header__btn__sitemap .bar:nth-child(2) {
  width: 60%;
}

.header__btn__sitemap:hover .bar:nth-child(2) {
  width: 100%;
}



/* header__nav */
/* 대메뉴 */
.header__gnb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(30px, 6vw, 80px);
  height: var(--header-height);

  font-size: 1.125rem;
  font-weight: 500;
}

/* 서브메뉴 */
.header__sub {
  position: absolute;
  top: 100%;
  left: 0;
  top: var(--header-height);
  width: 100%;
  height: 120px;
  background: #ffffff;
  border-top: 1px solid var(--c-g010);

  font-size: 1.125rem;
  font-weight: 400;
}

.header__sub__wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.header__sub__list {
  position: absolute;
  top: 0;
  height: 100%;
  text-align: center;
  padding-top: 16px;
}

.header__sub__list li {
  padding: 10px 0;
}

/* =========================================
  Header 반응형 조절
   ========================================= */

/* 1. 기본 헤더 높이 및 여백 조절 */
@media screen and (max-width: 1440px) {

  .header__inner {
    padding: 0 40px;
  }

  .header__gnb {
    gap: 40px;
  }

  /* 메뉴 간격 살짝 축소 */
}

@media screen and (max-width: 1280px) {
  .header {
    --header-height: 90px;
  }

  .header__inner {
    padding: 0 30px;
  }

  .header__logo {
    flex-basis: 150px;
  }

  .header__btn__menu {
    flex-basis: 150px;
  }

  .header__gnb {
    font-size: 1rem;
    gap: 30px;
  }
}

/* 2. 핵심: 1024px 미만 (태블릿/모바일 시작) */
@media screen and (max-width: 1024px) {
  .header {
    --header-height: 80px;
  }

  .header__inner {
    padding: 0 20px;
  }

  /* 요청사항: 대메뉴(GNB) 숨기기 */
  .header__nav {
    display: none;
  }

  /* 로고와 메뉴버튼 양 끝으로 배치 */
  .header__logo {
    flex-basis: auto;
  }

  .header__btn__menu {
    flex-basis: auto;
  }

  .header__logo img {
    height: 20px;
    /* 로고 크기 축소 */
  }

  /* 햄버거 버튼 크기 미세 조정 */
  .header__btn__sitemap {
    width: 24px;
    height: 18px;
  }
}

/* 3. 768px 이하 (모바일 일반) */
@media screen and (max-width: 768px) {
  .header__inner {
    padding: 0 15px;
  }

  /* 모바일에서 배경색이 흰색으로 바뀔 때(스크롤 시 등)를 대비한 바 색상 */
  /* .header.is-active .header__btn__sitemap .bar { background-color: #000; } */
}

/* 4. 480px 이하 (최소형 모바일) */
@media screen and (max-width: 480px) {
  .header {
    --header-height: 55px;
  }

  .header__logo img {
    height: 18px;
  }
}

/* *****************************************

              *** Sitemap ***
                  사이트맵

****************************************** */
/* sitemap__wrap: display 속성 제거, 기본 설정 유지 */
.sitemap__wrap {
  --sitemap--point: #efdbab;
  --sitemap--bg: #5b4435;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--sitemap--bg);
  color: #fff;
  z-index: 99;
  overflow: hidden;
}

/* 박스 내부는 세로 가운데 정렬 유지 */
.sitemap__box {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 5vw;
}

/* 배경 텍스트 장식 유지 */
.sitemap__box::before {
  content: 'HANMADANG';
  position: absolute;
  bottom: -50px;
  right: 0;
  font-size: 10vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  z-index: 0;
}

.sitemap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 핵심: 대메뉴 4개를 한 줄(4컬럼)로 배치 */
.sitemap__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 30px;
}

.sitemap__list > li {
  position: relative;
}

/* 메인 메뉴 링크 (원하시는 큼직하고 세련된 스타일) */
.sitemap__list > li > a {
  font-size: clamp(1.8rem, 3vw, 2rem);
  /* 4열에 맞춰 크기 살짝 조정 */
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  display: block;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  letter-spacing: -0.02em;
  line-height: 1.1;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  /* 구분선 추가 */
  padding-bottom: 15px;
}

.sitemap__list > li:hover > a {
  color: var(--sitemap--point);
  border-bottom-color: var(--sitemap--point);
  transform: translateY(-5px);
  /* 위로 살짝 들리는 효과 */
}

.sitemap__sublist li {
  margin-bottom: 12px;
}

.sitemap__sublist li a {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  padding: 5px 0;
  transition: all 0.3s ease;
  position: relative;
}

/* 서브메뉴 호버 효과 */
.sitemap__sublist li a:hover {
  color: #fff;
  padding-left: 20px;
}

.sitemap__sublist li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--sitemap--point);
  transition: width 0.3s ease;
}

.sitemap__sublist li a:hover::before {
  width: 15px;
}

/* 반응형 처리 */
@media (max-width: 1024px) {
  .sitemap__list {
    grid-template-columns: repeat(2, 1fr);
    /* 태블릿은 2열 */
    gap: 50px 30px;
  }
}

@media (max-width: 600px) {
  .sitemap__list {
    grid-template-columns: 1fr;
    /* 모바일은 1열 */
    gap: 20px;
  }

  .sitemap__list > li > a {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
}

/* *****************************************

              *** Active ***
    hover, scroll 에 따른 header 변경 요소

****************************************** */

.header.hovered,
.header.scrolled {
  color: #000000;
  background-color: #ffffff;
}

.header.hovered .header__gnb,
.header.scrolled .header__gnb,
.header.hovered .header__btn,
.header.scrolled .header__btn {
  color: #000;
}

.header.hovered .header__btn__sitemap .bar,
.header.scrolled .header__btn__sitemap .bar {
  background-color: #000000;
}

/* active 시 (열릴 때) */
.header__btn__sitemap.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__btn__sitemap.active .bar:nth-child(2) {
  opacity: 0;
}

.header__btn__sitemap.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 1024px) {
  .header__btn__sitemap.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .header__btn__sitemap.active .bar:nth-child(2) {
    opacity: 0;
  }

  .header__btn__sitemap.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* [수정] 우선순위 싸움에서 이기도록 body 클래스까지 포함해서 선언 */
body.is-fixed-header .header .header__btn__sitemap.active .bar,
.header__btn__sitemap.active .bar {
  background-color: #ffffff !important;
}

/* *****************************************

              *** fixed ***
        특정 페이지에서 헤더 색상 고정

****************************************** */
/* about.php, story.php 처럼 헤더가 항상 흰색이어야 하는 페이지 */
body.is-fixed-header .header {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-bottom: 1px solid #eee;
  /* 선택 사항 */
}

body.is-fixed-header .header .header__gnb {
  color: #000000 !important;
}

body.is-fixed-header .header .header__btn__sitemap .bar {
  background-color: #000000 !important;
}

/* [수정 시작] 헤더 숨김/나타남 애니메이션 */
.header {
  /* 기존 속성에 transform 추가 */
  transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

/* 스크롤 다운 시 헤더를 위로 숨김 */
.header.hide {
  transform: translateY(-100%);
}

/* 서브메뉴가 열려있을 때는 강제로 보이게 함 */
.header.hovered {
  transform: translateY(0) !important;
}

/* [수정 끝] */

.header,
.header__gnb,
.header__sub {
  /* 텍스트 흔들림 방지 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* GPU 가속을 강제하여 레이아웃 재계산 방지 */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}