/*
* for supported in all modern browsers
* Copyright Maketerbee
* Maketerbee
* ---------------------------------------------------------------------------
* 데스크탑 헤더 현대화 (2026-08-20)
* 벤치마킹: prugio-riverfront.com — 헤더 90px / 얇은 산세리프 16px 메뉴 /
*           넓은 여백·낮은 밀도 / 0.3s 내외의 짧고 은은한 전환
*
* [건드리기 전에 반드시 읽을 것]
* 1) js/header.js 가 hover 시 헤더 높이를 **인라인으로 직접** 세팅한다.
*      maxHeight = 헤더 높이 + (.gnb > ul > li > ul 의 outerHeight)
*    → 즉 아래 2차 메뉴 ul 의 min-height 가 "펼쳐진 헤더 높이"를 결정한다.
*      패널 여백을 바꾸면 펼침 높이도 같이 바뀐다는 뜻이다.
* 2) 같은 이유로 **스크롤(.is-down) 에서 헤더 높이를 바꾸면 안 된다.**
*    hover 를 한 번이라도 거치면 JS 가 남긴 인라인 height 가 CSS 를 이겨서
*    배경 바만 남고 내용이 어긋난다. → .is-down 은 배경·그림자·색만 바꾼다.
*    (덤으로 스크롤 시 레이아웃 점프도 사라진다)
* 3) body 에는 push-active 가 붙지 않는다(모바일 토글 '버튼'에만 붙는다).
*    body:not(.push-active) 는 사실상 항상 참이지만, 특이도 사슬이 이 전제로
*    짜여 있어 구조를 그대로 보존한다.
* 4) .tel 의 animation / @keyframes 는 css/header.tel.css 담당이다. 여기서는
*    크기·여백·색만 다룬다.
*
* [A / B 공통 디자인 언어]
*    높이 84→90px, 메뉴 16px(--fs-base), 텍스트 폭 밑줄 1px, 0.3s ease 전환,
*    드롭다운 = 헤더가 펼쳐지며 그 위에 항목이 페이드인.
* [성격 차이]
*    A(투명 오버레이) = 얇은 400 + 넓은 자간, 히어로 위 흰 글자 → 스크롤 시 솔리드
*    B(솔리드 임팩트) = 처음부터 흰 배경, 500 굵기, 알약형 CTA
*/
.xet-layout .layout__header .layout__header_fixed {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  background-color: transparent;
  /* transition:all 은 JS 가 넣는 인라인 height / popup.js 가 넣는 top 까지
     싸잡아 흔들어 예측이 안 된다. 필요한 속성만 명시한다.
     height 는 드롭다운 펼침 애니메이션에 필요하므로 남긴다. */
  transition: top 0.3s ease, height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.xet-layout .layout__header .layout__header_fixed .layout__header_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.75rem;
}
.xet-layout .layout__header .logo {
  /* 모바일: 로고를 맨 왼쪽으로 (전화·메뉴는 오른쪽에 모인다) */
  order: 1;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-text-strong-color);
  transition: color 0.3s ease;
}
/* [수정] width:100% 는 폭이 shrink-to-fit 인 .logo 안에서 이미지의 '고유 폭'을
   그대로 차지하게 만든다. 세로로 긴 로고(예: 400x200)를 넣으면 실제 그림은
   80x40 으로 줄어드는데 상자는 400px 을 먹어 로고 옆에 빈 공간이 생겼다.
   높이 기준으로 맞추고 폭은 내용에 맡긴다. */
.xet-layout .layout__header .logo > img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  display: none;
}
.xet-layout .layout__header .logo > img.logo__dark {
  display: block;
}
.xet-layout .layout__header .logo > img.logo__dark.not {
  filter: invert(1);
}
.xet-layout .layout__header .gnb-wrp {
  display: none;
}
.xet-layout .layout__header .gnb {
  transition: opacity 0.3s ease;
}
.xet-layout .layout__header .gnb > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.xet-layout .layout__header .gnb > ul > li {
  position: relative;
  padding: 0 20px;
}
/* 메뉴 타이포
   - 한글 메뉴라 uppercase 는 의미가 없어 제거했다(영문 메뉴에서도 letter-spacing 으로 충분).
   - 700 은 광고 티가 나서 400/500 으로 낮췄다. 300 은 채택하지 않았다:
     관리자가 고르는 한글 웹폰트 상당수가 300 을 갖고 있지 않아 브라우저가
     가짜 얇게(synthetic) 그리거나 400 으로 떨어져 기기마다 달라진다.
   - 크기는 --fs-base(모바일 16px / 데스크탑 16px). rem 직접 사용은 데스크탑
     루트 14px 때문에 작아지므로 금지. */
.xet-layout .layout__header .gnb > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  color: var(--dark-text-strong-color);
  transition: color 0.3s ease;
}
/* 밑줄: 헤더 바닥이 아니라 '글자 바로 아래'에 둔다(탭 인디케이터처럼 보이지 않게).
   a 는 padding 이 0 이라 좌우 폭이 곧 글자 폭이다. */
.xet-layout .layout__header .gnb > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 13px);
  height: 1px;
  background-color: var(--theme-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.xet-layout .layout__header .gnb > ul > li ul {
  /* display:none→block 토글은 트랜지션이 걸리지 않아 즉시 나타나므로
     opacity/transform 기반으로 전환해 부드럽게 열리도록 한다 (푸르지오 리버프론트 벤치마킹)

     ★ min-height 가 곧 '펼쳐진 헤더 높이 - 헤더 높이' 다 (header.js 참고).
       250px 은 항목 3개일 때 아래로 100px 가까이 빈 공간이 남아 190px 로 줄였다. */
  z-index: 99;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  min-height: 190px;
  padding: 34px 0 26px;
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.xet-layout .layout__header .gnb > ul > li ul li {
  position: relative;
  float: none;
}
.xet-layout .layout__header .gnb > ul > li ul li + li {
  margin-top: 2px;
}
.xet-layout .layout__header .gnb > ul > li ul li a {
  position: relative;
  display: block;
  text-align: center;
  /* 1차 16px 보다 한 단계 작게 + 위아래 여백으로 터치/클릭 영역 확보 */
  font-size: 15px;
  font-weight: var(--fw-normal);
  letter-spacing: -0.01em;
  line-height: 1.5;
  padding: 7px 0;
  color: var(--text-strong-color);
  transition: color 0.3s ease;
}
.xet-layout .layout__header .gnb > ul > li ul li span.arrow {
  position: absolute;
  right: 2rem;
  top: 0;
  bottom: 0;
  font-size: 0.75rem;
  font-weight: normal;
  display: flex;
  align-items: center;
  color: #999;
  transition: color 0.3s ease;
}
.xet-layout .layout__header .gnb > ul > li ul li ul {
  display: none;
  top: -1rem;
  left: 100%;
}
.xet-layout .layout__header .gnb > ul li:hover > a,
.xet-layout .layout__header .gnb > ul li:hover > a > span.arrow,
.xet-layout .layout__header .gnb > ul li.is-active > a,
.xet-layout .layout__header .gnb > ul li.is-active > a > span.arrow,
.xet-layout .layout__header .gnb > ul a.is-active {
  color: var(--theme-color) !important;
}
.xet-layout .layout__header .gnb > ul li:hover > a::after,
.xet-layout .layout__header .gnb > ul li.is-active > a::after {
  background-color: var(--theme-color);
  transform: scaleX(1);
}
.xet-layout .layout__header .account-wrp {
  order: 3;
  flex-shrink: 0;
  min-width: 40px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* ※ .account 계열은 현재 include/header.html 에 마크업이 없다(로그인 UI 미사용,
   컨테이너에 not-login 이 하드코딩되어 있음). 로그인 버튼 복원 대비로 남겨 둔다. */
.xet-layout .layout__header .account {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  width: 40px;
}
.xet-layout .layout__header .account a,
.xet-layout .layout__header .account button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dark-text-base-color);
}
.xet-layout .layout__header .account a span,
.xet-layout .layout__header .account a img,
.xet-layout .layout__header .account button span,
.xet-layout .layout__header .account button img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.xet-layout .layout__header .account a span,
.xet-layout .layout__header .account button span {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--dark-text-base-color);
}
/* 대표전화 : 애니메이션은 css/header.tel.css 담당. 여기서는 형태만. */
/* ─────────────────────────────────────────────────────────────
   모바일 헤더 (2026-08-20 개편)
   배치 : [로고]  ················  [전화] [메뉴]
     - 마크업 순서는 로고 → account-wrp(전화) → 토글 이라 order 만 조정하면 된다.
     - 이전에는 [메뉴][로고][전화] 대칭 구조에 로고 양옆으로 똑같이 생긴
       각진 테두리 박스가 두 개 붙어 있어 무겁고 낡아 보였다.
   버튼 : 테두리 박스를 없애고 아이콘만 남긴다. 터치 영역은 44px 로 확보하되
          시각적으로는 아이콘만 떠 있게 한다(고급스럽고 절제된 톤).
   ───────────────────────────────────────────────────────────── */
.xet-layout .layout__header .tel {
  order: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  transition: color 0.3s ease;
}
/* 아이콘만, 테두리 없는 원형. 배경/테두리는 평상시 투명하고
   눌렀을 때만 은은한 원형 피드백이 보인다. */
.xet-layout .layout__header .tel > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--dark-text-strong-color);
  border: 0;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.xet-layout .layout__header .tel:active > span {
  background-color: rgba(255, 255, 255, 0.14);
}
.xet-layout .layout__header .tel > span > i {
  font-size: 22px;
}
.xet-layout .layout__header .tel > span > strong {
  display: none;
}
/* 햄버거 : 테두리 없는 3줄.
   2줄 미니멀도 검토했으나 분양광고 특성상 메뉴 버튼이 명확히 보이는 쪽이 중요해
   익숙한 3줄을 유지한다. 대신 테두리 박스를 없애 가볍게 만든다. */
.xet-layout .layout__header .gnb-toggle-btn {
  order: 3;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  z-index: 1000000;
}
.xet-layout .layout__header .gnb-toggle-btn:active {
  background-color: rgba(255, 255, 255, 0.14);
}
/* 모바일 전용 배치 보정
   컨테이너가 space-between 이라 [로고][전화][메뉴] 셋이 균등하게 벌어진다.
   로고에 margin-right:auto 를 줘서 전화·메뉴가 오른쪽에 붙어 한 덩어리가 되게 한다.
   (데스크탑은 사이에 gnb 가 들어가고 간격 설계가 다르므로 1023px 이하로 한정) */
@media (max-width: 1023px) {
  .xet-layout .layout__header .logo {
    margin-right: auto;
  }
  .xet-layout .layout__header .layout__header_fixed .layout__header_container {
    gap: 0.25rem;
  }
  /* 스크롤로 헤더가 흰 배경이 되면 눌림 피드백도 어두운 쪽으로 바꾼다
     (흰 배경 위에서 흰 반투명 원은 보이지 않는다) */
  body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .gnb-toggle-btn:active,
  body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .tel:active > span {
    background-color: rgba(0, 0, 0, 0.06);
  }
}
.xet-layout .layout__header .gnb-toggle-btn i {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--dark-text-strong-color);
  border-radius: 2px;
  transform-origin: left center;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ─── 햄버거 주기적 시선유도 ──────────────────────────────────────────
   3줄이 위에서부터 차례로 짧아졌다 돌아온다. 메뉴가 여기 있다는 걸 알린다.

   ★ 전화버튼 애니메이션(css/header.tel.css)과 '시차'를 두기 위해
     양쪽 주기를 6s 로 통일했다. 주기가 서로 다르면 위상이 조금씩 밀려
     결국 두 요소가 동시에 움직이는 순간이 생긴다.
       햄버거 : 5% ~ 20%  (0.3s ~ 1.2s)   ← 앞구간
       전화 A : 60% ~ 100% (3.6s ~ 6.0s)  ← 뒷구간
       전화 B : 82% ~ 97%  (4.9s ~ 5.8s)  ← 뒷구간
     한쪽 주기를 바꾸면 반드시 다른 쪽도 함께 맞출 것.

   진폭은 작게(0.55 배까지만), 나머지 4.8초는 완전 정지 상태다.
   ──────────────────────────────────────────────────────────────── */
@keyframes headerBurgerNudge {
  0%, 5%, 20%, 100% {
    transform: scaleX(1);
  }
  11% {
    transform: scaleX(0.55);
  }
}
.xet-layout .layout__header .gnb-toggle-btn i {
  animation: headerBurgerNudge 6s ease-in-out infinite;
}
.xet-layout .layout__header .gnb-toggle-btn i:nth-child(2) {
  animation-delay: 0.1s;
}
.xet-layout .layout__header .gnb-toggle-btn i:nth-child(3) {
  animation-delay: 0.2s;
}
/* 메뉴가 열려 X 로 바뀌는 동안에는 반드시 꺼야 한다.
   애니메이션의 transform 이 X 변형 transform 을 덮어써 버리기 때문이다.
   또한 시선유도용 transform-origin(left)을 center 로 되돌린다 —
   그대로 두면 막대가 왼쪽 끝을 축으로 돌아 가운데서 교차하지 않는다. */
.xet-layout .layout__header .gnb-toggle-btn.push-active i {
  animation: none;
  transform-origin: center;
}
/* 열림(X) 전환 : 3줄 기준 오프셋.
   막대 1.5px × 3 + gap 6px × 2 = 16.5px. 1번 막대 중심은 컨테이너 중심에서 -7.5px,
   3번은 +7.5px. 서로 7.5px 씩 당겨 붙인 뒤 회전시키면 정확히 가운데서 교차한다. */
.xet-layout .layout__header .gnb-toggle-btn.push-active i:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.xet-layout .layout__header .gnb-toggle-btn.push-active i:nth-child(2) {
  opacity: 0;
}
.xet-layout .layout__header .gnb-toggle-btn.push-active i:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
/* 펼쳐진 상태.
   height 값은 JS 가 인라인으로 덮어쓰므로 폴백일 뿐이다(헤더 90 + 패널 190). */
.xet-layout .layout__header .layout__header_fixed.hovered {
  overflow: hidden;
  height: 280px;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.28);
}
.xet-layout .layout__header .layout__header_fixed.hovered .layout__header_container {
  position: relative;
}
/* 헤더 줄과 드롭다운을 가르는 헤어라인.
   컨테이너(.xet-container-fluid)의 좌우 패딩이 20/24/30px 로 달라지므로
   음수 마진 대신 100vw 로 전체 폭을 만든다. .hovered 에 overflow:hidden 이 있어
   가로 스크롤은 생기지 않는다. */
.xet-layout .layout__header .layout__header_fixed.hovered .layout__header_container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--border-color);
}
.xet-layout .layout__header .layout__header_fixed.hovered .gnb > ul ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down {
  opacity: 1;
  visibility: visible;
  background-color: #fff;
  transform: translateY(0%);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .logo, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .logo {
  color: var(--text-strong-color);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .logo > img, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .logo > img {
  display: block;
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .logo > img.logo__dark, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .logo > img.logo__dark {
  display: none;
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .gnb > ul > li a, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .gnb > ul > li a {
  color: var(--text-strong-color);
}
/* 2차 메뉴는 한 단계 옅게 — 1차/2차 위계를 색으로 잡는다.
   위 규칙보다 요소 선택자가 많아 특이도로 이긴다(클래스 수는 동일). */
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .gnb > ul > li ul li a, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .gnb > ul > li ul li a {
  color: var(--text-base-color);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .account a,
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .account button, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .account a,
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .account button {
  color: var(--text-base-color);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .account a span,
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .account button span, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .account a span,
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .account button span {
  border-color: var(--text-base-color);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .tel > span, body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .tel > span {
  color: var(--text-strong-color);
  border-color: var(--text-strong-color);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .gnb-toggle-btn i,
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .gnb-toggle-btn i {
  background: var(--text-strong-color);
}
body:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
}
body:not(.push-active) .xet-layout.member-act .layout__header .logo {
  color: var(--text-strong-color);
}
body:not(.push-active) .xet-layout.member-act .layout__header .logo > img {
  display: block;
}
body:not(.push-active) .xet-layout.member-act .layout__header .logo > img.logo__dark {
  display: none;
}
body:not(.push-active) .xet-layout.member-act .layout__header .gnb > ul > li > a {
  color: var(--text-strong-color);
}
body:not(.push-active) .xet-layout.member-act .layout__header .gnb-toggle-btn i {
  background: var(--text-strong-color);
}

/* =========================================================
   다크모드
   현재 js/header.js 에서 라이트 모드를 강제하고 있어 동작하지 않지만,
   복구 대비로 남겨둔다 (테마 규칙상 삭제 금지).
   ========================================================= */
body.color_scheme_dark .xet-layout .layout__header .logo {
  color: var(--dark-text-strong-color) !important;
}
body.color_scheme_dark .xet-layout .layout__header .logo > img {
  display: none !important;
}
body.color_scheme_dark .xet-layout .layout__header .logo > img.logo__dark {
  display: block !important;
}
body.color_scheme_dark .xet-layout .layout__header .gnb > ul > li a {
  color: var(--dark-text-strong-color) !important;
}
body.color_scheme_dark .xet-layout .layout__header .gnb > ul li:hover > a,
body.color_scheme_dark .xet-layout .layout__header .gnb > ul li:hover > a > span.arrow,
body.color_scheme_dark .xet-layout .layout__header .gnb > ul li.is-active > a,
body.color_scheme_dark .xet-layout .layout__header .gnb > ul li.is-active > a > span.arrow,
body.color_scheme_dark .xet-layout .layout__header .gnb > ul a.is-active {
  color: var(--theme-color) !important;
}
body.color_scheme_dark .xet-layout .layout__header .account a,
body.color_scheme_dark .xet-layout .layout__header .account button {
  color: var(--dark-text-base-color) !important;
}
body.color_scheme_dark .xet-layout .layout__header .account a span,
body.color_scheme_dark .xet-layout .layout__header .account button span {
  border-color: var(--dark-text-base-color) !important;
}
body.color_scheme_dark .xet-layout .layout__header .tel > span {
  color: var(--dark-text-strong-color);
  border-color: var(--dark-text-strong-color);
}
body.color_scheme_dark .xet-layout .layout__header .gnb-toggle-btn i {
  background: var(--dark-text-strong-color) !important;
}
body.color_scheme_dark .xet-layout .layout__header .layout__header_fixed.hovered .layout__header_container::after {
  background-color: var(--dark-border-color);
}
body.color_scheme_dark:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered, body.color_scheme_dark:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down {
  background-color: var(--dark-bg-color);
}
body.color_scheme_dark:not(.push-active) .xet-layout .layout__header .layout__header_fixed.hovered .tel > span, body.color_scheme_dark:not(.push-active) .xet-layout .layout__header .layout__header_fixed.is-down .tel > span {
  color: var(--dark-text-strong-color);
  border-color: var(--dark-text-strong-color);
}

/* =========================================================
   데스크탑 (1024px~)
   헤더 높이를 명시값으로 고정한다. header.js 가 ready 시점에 outerHeight 를
   재서 펼침 높이를 계산하므로, 높이가 auto(=내용 의존) 면 폰트 로딩 타이밍에
   따라 계산값이 흔들린다.
   ========================================================= */
@media (min-width: 1024px) {
  .xet-layout .layout__header .layout__header_fixed {
    height: 84px;
  }
  .xet-layout .layout__header .layout__header_fixed .layout__header_container {
    height: 84px;
    gap: 2rem;
  }
  .xet-layout .layout__header .layout__header_fixed .layout__header_container.not-login.not-tel .gnb {
    margin-right: 2rem;
  }
  .xet-layout .layout__header .logo {
    order: 1;
    /* 텍스트 로고(로고 이미지 미등록)일 때의 크기. rem 은 데스크탑에서
       루트 14px 이라 작아지므로 px 고정. */
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    justify-content: flex-start;
    height: 40px;
  }
  .xet-layout .layout__header .gnb-wrp {
    order: 2;
    display: block;
  }
  /* 1차 메뉴는 헤더 높이를 꽉 채운다 → 2차 메뉴 ul(top:100%)이 헤더 아래 선에
     정확히 붙고, hover 판정 영역도 헤더 전체가 된다. */
  .xet-layout .layout__header .gnb > ul > li > a {
    height: 84px;
  }
  .xet-layout .layout__header .account-wrp {
    order: 3;
    gap: 1.25rem;
  }
  .xet-layout .layout__header .account {
    display: flex;
  }
  .xet-layout .layout__header .tel {
    order: 4;
  }
  .xet-layout .layout__header .tel > span {
    width: auto;
    height: 42px;
    padding: 0 20px;
    border-radius: 0px;
    /* 21px(1.5rem) 은 헤더 안에서 지나치게 커 18px 로 낮추고 굵기로 존재감을 준다 */
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: var(--dark-text-strong-color) !important;
  }
  .xet-layout .layout__header .tel > span > i {
    font-size: 18px;
  }
  .xet-layout .layout__header .tel > span > strong {
    display: block;
    margin-left: 6px;
    font-weight: inherit;
  }
  /* 데스크탑에서는 모바일 풀스크린 메뉴를 쓰지 않으므로 완전히 숨긴다
     (크기·배경 지정은 보이지 않는 요소에 대한 죽은 선언이라 정리했다) */
  .xet-layout .layout__header .gnb-toggle-btn {
    display: none;
  }
}
@media (min-width: 1200px) {
  /* 벤치마킹 실측치 90px. 스크롤해도 이 높이는 바뀌지 않는다(위 주석 2번 참고) */
  .xet-layout .layout__header .layout__header_fixed {
    height: 90px;
  }
  .xet-layout .layout__header .layout__header_fixed .layout__header_container {
    height: 90px;
  }
  .xet-layout .layout__header .logo {
    font-size: 26px;
    height: 44px;
  }
  .xet-layout .layout__header .gnb > ul > li {
    padding: 0 24px;
  }
  .xet-layout .layout__header .gnb > ul > li > a {
    height: 90px;
  }
  .xet-layout .layout__header .tel > span {
    height: 44px;
    padding: 0 22px;
  }
}
@media (min-width: 1440px) {
  .xet-layout .layout__header .layout__header_fixed .layout__header_container {
    gap: 3rem;
  }
  .xet-layout .layout__header .gnb > ul > li {
    padding: 0 30px;
  }
  /* 넓은 화면에서도 글자는 키우지 않는다(기존 1.25rem→17.5px 는 과했다).
     여백만 늘려 밀도를 낮추는 것이 벤치마킹 대상의 방식. */
  .xet-layout .layout__header .gnb > ul > li > a {
    font-size: var(--fs-base);
  }
}

@media (min-width: 1024px) {
  /* PC에서 2차 메뉴가 비어 있으면 빈 ul 을 숨긴다 (클릭 가로채기·높이 계산 오류 방지) */
  .xet-layout .layout__header .gnb > ul > li > ul:empty {
    display: none !important;
  }
  /* [우회책] header.js 가 hover 아웃에서 jQuery .hide() 를 호출해 인라인
     display:none 을 박는다. 그러면 다음 번 .show() 때 display 가 none→block 으로
     바뀌는 같은 프레임에 opacity 도 1이 되어 페이드가 아예 재생되지 않는다
     (닫힐 때도 즉시 사라진다).
     display 를 !important 로 고정해 인라인을 무력화하고, 보이고 안 보이고는
     opacity/visibility/pointer-events 로만 제어한다. JS 수정 없이 전환을 살리는 방법.
     ※ 위 :empty 규칙은 pseudo-class 만큼 특이도가 높아 이 규칙에 지지 않는다. */
  .xet-layout .layout__header .gnb > ul > li > ul {
    display: block !important;
  }
}

/* =========================================================
 * HEADER STYLE SWITCH ($li->header_style : A / B)
 * A = 투명 오버레이 럭셔리 (default) / B = 솔리드 임팩트
 * ========================================================= */

/* ---------- STYLE A : 투명 오버레이 럭셔리 ---------- */
/* 얇고 자간이 넓은 메뉴. (한글 메뉴에서 uppercase 는 효과가 없어 제거) */
.xet-layout .layout__header.header--style-a .gnb > ul > li > a {
  font-weight: var(--fw-normal);
  letter-spacing: 0.02em;
}
/* 히어로 사진 위에 얹히는 상태에서만 아주 옅은 그림자로 가독성을 확보한다.
   (400 굵기 흰 글씨가 밝은 하늘·건물 사진에 묻히는 것 방지) */
.xet-layout .layout__header.header--style-a .layout__header_fixed:not(.is-down):not(.hovered) .gnb > ul > li > a,
.xet-layout .layout__header.header--style-a .layout__header_fixed:not(.is-down):not(.hovered) .logo {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
/* 히어로 위(투명 상태)에서는 hover/활성 색을 테마색으로 바꾸지 않는다.
   테마색은 관리자가 고르는 값이라 밝은 색이면 사진 위에서 아예 안 읽히고,
   진한 색이면 어두운 사진에 묻힌다. 흰 글자를 유지하고 '흰 밑줄'로만 표시한다
   (솔리드로 바뀐 뒤에는 아래 기본 규칙대로 테마색을 쓴다).
   기존 규칙이 !important 라 같은 무기로 이겨야 한다. */
.xet-layout .layout__header.header--style-a .layout__header_fixed:not(.is-down):not(.hovered) .gnb > ul > li:hover > a,
.xet-layout .layout__header.header--style-a .layout__header_fixed:not(.is-down):not(.hovered) .gnb > ul > li.is-active > a {
  color: var(--dark-text-strong-color) !important;
}
.xet-layout .layout__header.header--style-a .layout__header_fixed:not(.is-down):not(.hovered) .gnb > ul > li:hover > a::after,
.xet-layout .layout__header.header--style-a .layout__header_fixed:not(.is-down):not(.hovered) .gnb > ul > li.is-active > a::after {
  background-color: currentColor;
}
/* 스크롤(또는 hover)로 솔리드 전환.
   0.82 는 히어로가 비쳐 글자가 지저분해져 0.94 로 올렸다. 배경이 비치는 구간을
   대비해 blur 는 유지. 그림자 대신 헤어라인 1줄로 마감(절제된 톤). */
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.is-down,
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.hovered {
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* hover로 서브메뉴가 펼쳐질 때는 불투명 흰 배경 유지(가독성) */
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.hovered {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.24);
}
/* 솔리드로 바뀌면 그림자는 즉시 걷는다 */
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.is-down .gnb > ul > li > a,
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.is-down .logo,
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.hovered .gnb > ul > li > a,
body:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.hovered .logo,
body:not(.push-active) .xet-layout.member-act .layout__header.header--style-a .layout__header_fixed .gnb > ul > li > a,
body:not(.push-active) .xet-layout.member-act .layout__header.header--style-a .layout__header_fixed .logo {
  /* 회원 페이지(member-act)는 히어로가 없어 밝은 배경 위에 진한 글자가 온다.
     ↑ 위 :not() 2개짜리 설정 규칙(클래스 6개)을 이기려고 선택자를 한 단계 더 붙였다. */
  text-shadow: none;
}
body.color_scheme_dark:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.is-down,
body.color_scheme_dark:not(.push-active) .xet-layout .layout__header.header--style-a .layout__header_fixed.hovered {
  background-color: rgba(20, 20, 20, 0.72);
}

/* ---------- STYLE B : 솔리드 임팩트 ---------- */
/* 처음부터 솔리드 흰 배경. 기본은 헤어라인만, 스크롤하면 그림자가 옅게 살아난다
   (A 와 같은 '스크롤 반응' 언어를 공유하되 B 는 더 조용하게) */
.xet-layout .layout__header.header--style-b .layout__header_fixed {
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
body:not(.push-active) .xet-layout .layout__header.header--style-b .layout__header_fixed.is-down {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
/* 배경이 흰색이라 A 보다 한 단계 진하게 — 자간은 좁혀 밀도 있는 인상 */
.xet-layout .layout__header.header--style-b .gnb > ul > li > a {
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
/* 로고 : 라이트 로고 상시 노출 + 진한 텍스트 */
.xet-layout .layout__header.header--style-b .logo {
  color: var(--text-strong-color);
}
.xet-layout .layout__header.header--style-b .logo > img {
  display: block;
}
.xet-layout .layout__header.header--style-b .logo > img.logo__dark {
  display: none;
}
/* GNB / 계정 / 햄버거 : 진한 텍스트 상시 */
.xet-layout .layout__header.header--style-b .gnb > ul > li > a {
  color: var(--text-strong-color);
}
.xet-layout .layout__header.header--style-b .gnb > ul li:hover > a,
.xet-layout .layout__header.header--style-b .gnb > ul li.is-active > a,
.xet-layout .layout__header.header--style-b .gnb > ul a.is-active {
  color: var(--theme-color) !important;
}
.xet-layout .layout__header.header--style-b .account a,
.xet-layout .layout__header.header--style-b .account button {
  color: var(--text-base-color);
}
.xet-layout .layout__header.header--style-b .account a span,
.xet-layout .layout__header.header--style-b .account button span {
  border-color: var(--text-base-color);
}
/* B 는 흰 배경이므로 아이콘을 진한 색으로. 테두리는 A 와 동일하게 없앤다. */
.xet-layout .layout__header.header--style-b .gnb-toggle-btn {
  border: 0;
}
.xet-layout .layout__header.header--style-b .gnb-toggle-btn:active,
.xet-layout .layout__header.header--style-b .tel:active > span {
  background-color: rgba(0, 0, 0, 0.06);
}
.xet-layout .layout__header.header--style-b .gnb-toggle-btn i {
  background: var(--text-strong-color);
}
/* 대표전화 : 모바일은 테두리 없는 원형 아이콘 (데스크탑은 아래 1024px+ 에서 알약 CTA) */
.xet-layout .layout__header.header--style-b .tel > span {
  border-radius: 50%;
  color: var(--text-strong-color);
  border: 0;
}
/* 다크모드에서 B 솔리드바는 어두운 배경으로 */
body.color_scheme_dark .xet-layout .layout__header.header--style-b .layout__header_fixed {
  background-color: var(--dark-content-bg-color);
}

@media (min-width: 1024px) {
  /* 좌측 로고 살짝 크게 */
  .xet-layout .layout__header.header--style-b .logo {
    height: 44px;
  }
  /* 우측 대표전화 : 두드러진 테마컬러 알약 CTA */
  .xet-layout .layout__header.header--style-b .tel > span {
    border-radius: 999px;
    padding: 0 24px;
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: var(--dark-text-strong-color) !important;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.35);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  }
  .xet-layout .layout__header.header--style-b .tel > span:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
  }
}
@media (min-width: 1200px) {
  .xet-layout .layout__header.header--style-b .logo {
    height: 48px;
  }
}

/* =========================================================
   모션 최소화 설정 대응
   .tel 의 animation 은 css/header.tel.css 담당이라 여기서 건드리지 않는다
   (transition 만 끈다).
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .xet-layout .layout__header .layout__header_fixed,
  .xet-layout .layout__header .logo,
  .xet-layout .layout__header .logo > img,
  .xet-layout .layout__header .gnb,
  .xet-layout .layout__header .gnb > ul > li > a,
  .xet-layout .layout__header .gnb > ul > li > a::after,
  .xet-layout .layout__header .gnb > ul > li ul,
  .xet-layout .layout__header .gnb > ul > li ul li a,
  .xet-layout .layout__header .account,
  .xet-layout .layout__header .tel,
  .xet-layout .layout__header .tel > span,
  .xet-layout .layout__header .gnb-toggle-btn i {
    transition-duration: 0.01ms !important;
  }
  /* 드롭다운이 살짝 올라오는 이동감 제거 (헤어라인의 translateX 는 건드리지 않음) */
  .xet-layout .layout__header .gnb > ul > li ul {
    transform: none !important;
  }
  /* 햄버거 주기적 시선유도도 끈다. 정지 시 줄 길이가 줄어든 채로 남지 않도록
     scaleX 를 원래대로 되돌려 준다. */
  .xet-layout .layout__header .gnb-toggle-btn i {
    animation: none !important;
    transform: scaleX(1);
  }
  .xet-layout .layout__header .gnb-toggle-btn.push-active i:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .xet-layout .layout__header .gnb-toggle-btn.push-active i:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }
}