/*
* 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(--on-dark-strong-color);
  transition: color 0.3s ease;
}
/* [수정] width:100% 는 폭이 shrink-to-fit 인 .logo 안에서 이미지의 '고유 폭'을
   그대로 차지하게 만든다. 세로로 긴 로고(예: 400x200)를 넣으면 실제 그림은
   80x40 으로 줄어드는데 상자는 400px 을 먹어 로고 옆에 빈 공간이 생겼다.
   높이 기준으로 맞추고 폭은 내용에 맡긴다. */
.xet-layout .layout__header .logo > img {
  /* [2026-08-22] height:100% 였을 때는 업로드한 로고 파일의 실제 픽셀 크기와 무관하게
     항상 .logo 박스 높이(모바일 2.5rem=40px, 데스크탑 40~48px)까지 강제로 늘렸다.
     작은 로고를 올리면 원본보다 커 보이고 화질도 흐려지는 원인이었다.
     height:auto + max-height:100% 로 바꿔 '박스보다 클 때만' 줄이고, 작으면 원본 크기 그대로 낸다. */
  width: auto;
  height: auto;
  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 {
  /* [2026-08-24] 단순 invert(1) 은 로고가 단일 어두운 색이 아니면(예: 빨강 등
     유채색 포함) 완전한 흰색이 아니라 색이 반전(빨강→청록)될 뿐이었다.
     로고 색상과 무관하게 완전한 흰색 실루엣이 되도록 brightness(0) 을 먼저
     걸어 무채색(검정)으로 만든 뒤 invert(1) 로 흰색으로 뒤집는다.
     (footer.html 의 is-fallback-white 와 동일한 필터 값으로 통일 - css/footer.css 참고) */
  filter: brightness(0) 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(--on-dark-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(--on-dark-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(--on-dark-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(--on-dark-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(--on-dark-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);
}

/* =========================================================
   데스크탑 (1024px~)
   헤더 높이를 명시값으로 고정한다. header.js 가 ready 시점에 outerHeight 를
   재서 펼침 높이를 계산하므로, 높이가 auto(=내용 의존) 면 폰트 로딩 타이밍에
   따라 계산값이 흔들린다.
   ========================================================= */
/* [2026-08-22] 사용자 첨부 참고 템플릿(footer_template.html)의 기법을 헤더에도 적용:
   1) 브레이크포인트를 1024px 하나로 통합 — 기존에 1200/1440px 에 걸려있던 "여기서부터
      더 커짐" 계단식 규칙(헤더 84→90px, gnb gap 28→42px, 로고 24→26px 등)을 전부
      이 블록의 min(vw, px) 유동값으로 흡수했다. 1200/1440px 전용 미디어쿼리는 삭제.
   2) 유동 값 계산법: 기존에 "cap 값이 자리잡던 폭"을 기준으로 vw 계수를 역산했다
      (예: 헤더높이는 1200px 폭에서 90px 로 고정되던 값이었으니 90÷12=7.5vw).
      1024px 부근에서는 이전 고정값(84px 등)보다 살짝 작게 시작해 그 cap 폭까지
      서서히 자라나고, 그 이상 폭에서는 cap 에서 멈춘다(더 커지지 않음 - 기존과 동일). */
@media (min-width: 1024px) {
  .xet-layout .layout__header .layout__header_fixed {
    height: min(7.5vw, 90px);
  }
  .xet-layout .layout__header .layout__header_fixed .layout__header_container {
    height: min(7.5vw, 90px);
    gap: min(2.9167vw, 42px);
  }
  .xet-layout .layout__header .layout__header_fixed .layout__header_container.not-login.not-tel .gnb {
    margin-right: min(2.9167vw, 42px);
  }
  .xet-layout .layout__header .logo {
    order: 1;
    /* 텍스트 로고(로고 이미지 미등록)일 때의 크기. rem 은 데스크탑에서
       루트 14px 이라 작아지므로 px 고정. */
    font-size: min(2.1667vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
    justify-content: flex-start;
    height: min(3.667vw, 44px);
  }
  .xet-layout .layout__header .gnb-wrp {
    order: 2;
    display: block;
  }
  .xet-layout .layout__header .gnb > ul > li {
    padding: 0 min(2.0833vw, 30px);
  }
  /* 1차 메뉴는 헤더 높이를 꽉 채운다 → 2차 메뉴 ul(top:100%)이 헤더 아래 선에
     정확히 붙고, hover 판정 영역도 헤더 전체가 된다. */
  .xet-layout .layout__header .gnb > ul > li > a {
    height: min(7.5vw, 90px);
  }
  .xet-layout .layout__header .account-wrp {
    order: 3;
    gap: 17.5px;
  }
  .xet-layout .layout__header .account {
    display: flex;
  }
  .xet-layout .layout__header .tel {
    order: 4;
  }
  .xet-layout .layout__header .tel > span {
    width: auto;
    height: min(3.667vw, 44px);
    padding: 0 min(1.8333vw, 22px);
    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(--on-dark-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: 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(--on-dark-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;
}

/* ---------- 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);
  /* 레퍼런스(더샵 분당센트로) 실측: 메가메뉴가 펼쳐질 때 헤더 높이가 1s 에 걸쳐
     천천히 늘어난다(실측: transition:1s). 공유 규칙(top 0.3s)은 그대로 두고
     height 만 B 전용으로 늦춘다 - 2026-08-22, 사용자가 "애니메이션 똑같이" 요청. */
  transition: top 0.3s ease, height 1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* 메가메뉴 실측(더샵 분당센트로): 1차 메뉴와 같은 16px/자간 normal, 밑줄은
   가는 1px 스케일이 아니라 두꺼운(3px) 바가 좌측부터 자라난다. 2차 항목도
   1차와 같은 16px(스텝다운 없음)에 세로 간격 25px 로 여유 있게 — 실측값 그대로. */
/* [2026-08-22] 처음엔 a::after(글자 폭만큼만) 를 top 대신 bottom:0 으로 옮겨
   "바 맨 아래"까지는 해결했는데, a 자체가 텍스트 폭만큼만 있어 밑줄도 여전히
   글자 폭만이었다. 사용자 요청으로 "탭 전체 폭(li 의 좌우 padding 포함)"까지
   넓힌다 - a::after 는 a 를 벗어날 수 없으므로 끄고, li::after 로 옮겨 li 의
   패딩 박스 전체(왼쪽 끝~오른쪽 끝)를 밑줄 폭으로 쓴다. li 는 이미
   position:relative 라 별도 포지셔닝 컨텍스트 추가가 필요 없다. */
.xet-layout .layout__header.header--style-b .gnb > ul > li > a::after {
  content: none;
}
.xet-layout .layout__header.header--style-b .gnb > ul > li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--theme-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.xet-layout .layout__header.header--style-b .gnb > ul li:hover::after,
.xet-layout .layout__header.header--style-b .gnb > ul li.is-active::after {
  transform: scaleX(1);
}
/* 활성/호버 탭 위 작은 점 — 레퍼런스 실측 반영. 마크업은 include/header.html 의
   .gnb-dot(항상 출력)이고, 스타일 B에서만 보이도록 여기서 켠다.
   데스크탑(gnb-wrp 가 나타나는 1024px~)에서만 의미가 있다. */
.xet-layout .layout__header.header--style-b .gnb > ul > li > a > .gnb-dot {
  display: none;
}
@media (min-width: 1024px) {
  .xet-layout .layout__header.header--style-b .gnb > ul > li > a > .gnb-dot {
    display: block;
    position: absolute;
    top: 18px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--theme-color);
    transform: translateX(-50%) scale(0);
    transition: transform 0.3s ease;
  }
  .xet-layout .layout__header.header--style-b .gnb > ul li:hover > a > .gnb-dot,
  .xet-layout .layout__header.header--style-b .gnb > ul li.is-active > a > .gnb-dot {
    transform: translateX(-50%) scale(1);
  }
}
.xet-layout .layout__header.header--style-b .gnb > ul > li ul li a {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
}
.xet-layout .layout__header.header--style-b .gnb > ul > li ul li + li {
  margin-top: 25px;
}
.xet-layout .layout__header.header--style-b .gnb > ul > li ul {
  min-height: 220px;
}
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);
}
/* [2026-08-22] 레퍼런스(더샵 분당센트로) 실측으로는 메가메뉴가 펼쳐진 상태에서
   헤더 background-color 가 rgba(0,0,0,0)(완전 투명) 이었지만, 그건 그 사이트
   히어로 사진이 밝은 톤이라 우연히 읽혔던 것뿐이다. 실제 사용자 사이트(하늘색
   히어로 사진)에 100% 그대로 적용해보니 글자가 거의 안 보일 정도로 묻혀
   "반투명 오버레이"가 아니라 사실상 못 쓰는 상태가 됐다 - 사용자 피드백으로
   완전 투명 대신 흰색 반투명 + 블러(frosted glass)로 되돌린다. 진하기는 A 의
   스크롤 상태(0.94)보다 살짝 연하게 잡아 '오버레이' 느낌은 살리면서 글자
   가독성은 확보한다. (.is-down 은 기존처럼 완전 불투명 흰색 유지) */
body:not(.push-active) .xet-layout .layout__header.header--style-b .layout__header_fixed.hovered {
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.24);
}
/* [2026-08-22] 위 반투명은 .layout__header_fixed 전체(1차 메뉴 줄 + 메가메뉴 영역을
   합친 박스) 에 걸린다. 사용자 요청: 1차 메뉴 줄은 계속 불투명 흰색으로 남아야
   하고, 반투명은 그 아래로 새로 펼쳐지는 메가메뉴 영역에만 적용돼야 한다.
   .layout__header_container(1차 줄 그 자체)에 자기만의 불투명 흰 배경을 줘서
   부모의 반투명 배경 위를 덮어버리면, 컨테이너가 차지하지 않는 아래쪽(메가메뉴
   영역)에서만 부모의 반투명이 그대로 보인다 — 마크업/구조 변경 없이 해결.
   [2026-08-22 추가수정] .layout__header_container 는 .xet-container-fluid
   (좌우 패딩 16~30px 짜리 래퍼) 안에 들어있고, 그 패딩 부분은 container 자기
   배경이 아니라 fluid 래퍼의 배경이 보이는 영역이다 - fluid 래퍼엔 배경이
   없어서 1차 메뉴 줄의 "좌우 여백"만 부모(.layout__header_fixed)의 반투명이
   그대로 비쳐 보였다. fluid 래퍼는 자식이 .layout__header_container 하나뿐이라
   높이가 그 줄 높이와 똑같고, 드롭다운(.gnb > ul > li ul)은 absolute 로
   빠져 있어 fluid 래퍼 박스 밖(즉 메가메뉴 영역)엔 전혀 영향이 없다 -
   fluid 래퍼에도 같은 불투명 흰 배경을 주면 1차 줄 전체(좌우 여백 포함)만
   딱 덮이고 메가메뉴 영역은 그대로 반투명으로 남는다. */
.xet-layout .layout__header.header--style-b .layout__header_fixed.hovered .xet-container-fluid,
.xet-layout .layout__header.header--style-b .layout__header_fixed.hovered .layout__header_container {
  background-color: #fff;
}
/* 배경이 흰색이라 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;
}
@media (min-width: 1024px) {
  /* 좌측 로고 살짝 크게 — [2026-08-22] 1200px 전용 계단(44→48px)을 min(vw,px)
     유동값으로 흡수 (기존 48px 이 1200px 폭에서 자리잡던 값이라 48÷12=4vw). */
  .xet-layout .layout__header.header--style-b .logo {
    height: min(4vw, 48px);
  }
  /* 우측 대표전화 : 두드러진 테마컬러 알약 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(--on-dark-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);
  }
}

/* =========================================================
   모션 최소화 설정 대응
   .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);
  }
}