@charset "UTF-8";
/*
* main.css — 메인 섹션 (히어로 / 프리미엄 / 지도안내 / 추가섹션 / 접수폼)
* Copyright 마케터비
* 마케터비
*
* 디자인 톤: 한강 푸르지오 리버프론트 벤치마킹
*  - 넉넉한 여백, 낮은 요소 밀도, 얇은 웨이트 + 넓은 자간
*  - 채도를 낮춘 절제된 팔레트, 이미지가 주인공
*  - 전환은 0.3s 내외로 짧고 은은하게 (fade + 살짝 위로)
*
* 수직 리듬 (섹션 상하 padding) — 전 섹션 공통
*   ~767px : 64px  /  768~1023px : 96px  /  1024~1199px : 120px
*   1200~1439px : 150px  /  1440px~ : 170px
*
* ※ 색상은 base.css / layout.css 의 토큰을 사용한다. (신규 변수 정의 금지)
*   이미지 위에 얹히는 흰색 계열만 rgba 하드코딩을 허용한다.
*/

/* ============================================================
   1. 섹션 공통 — 수직 리듬 / 배경 / 구분선
   ============================================================ */
.xet-layout .layout__body-main > section {
  position: relative;
  background-color: var(--content-bg-color);
  transition: var(--transition-all);
}
/* 카드형 그림자 제거 → 여백만으로 섹션을 구분하는 에디토리얼 레이아웃 */
.xet-layout .layout__body-main > section:not(.main-visual) {
  padding: 64px 0;
  box-shadow: none;
}
.xet-layout .layout__body-main > section:nth-child(n+3) {
  margin-top: 0;
}
/* 콘텐츠 섹션끼리 맞닿는 지점에만 헤어라인 */
.xet-layout .layout__body-main > section:not(.main-visual) + section:not(.main-visual) {
  border-top: 1px solid var(--border-color);
}

/* ----- 섹션 공통 제목 ----- */
.xet-layout .layout__body-main > section .main-section__title {
  margin-bottom: 36px;
  text-align: center;
  font-size: clamp(24px, 6.4vw, 32px) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em;
  color: var(--text-strong-color);
  word-break: keep-all;
  text-wrap: balance;
}

/* ----- 추가섹션 1 / 2 (article.main-section__content) -----
   표시방식 3종을 modifier 로 구분한다 (main_sectionN_layout).
     --image : 이미지만        --text : 글만        --both : 이미지 + 글 2단
   모바일에서는 세 방식 모두 세로 스택이므로 여기 기본 규칙이 그대로 쓰이고,
   2단 배치는 아래 "13. 데스크탑" 구간에서만 켠다.
   모바일 전용 이미지 교체는 CSS 가 아니라 템플릿 분기(custom1/2.html)가 담당한다. */
/* 본문 크기는 px 로 고정한다.
   ★ 이 테마는 html font-size 가 모바일 16px → 1024px 이상에서 14px 로 줄어든다(layout.css).
     따라서 rem 을 쓰면 데스크탑에서 글자가 '더 작아진다'. (1rem = 모바일 16px / 데스크탑 14px)
     제목은 이미 px·clamp 로 고쳤는데 본문만 rem 으로 남아 있어 같은 방식으로 맞춘다.
   좁은 화면에서는 clamp 로 유동, 데스크탑에서는 아래 미디어쿼리로 한 단계 키운다. */
.xet-layout .layout__body-main > section article.main-section__content {
  color: var(--text-base-color);
  font-size: clamp(15px, 4vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.01em;
  word-break: keep-all;
}
.xet-layout .layout__body-main > section article.main-section__content > div + div {
  margin-top: var(--gap2x);
}
.xet-layout .layout__body-main > section article.main-section__content img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  vertical-align: top;
}
/* 이미지 블록. 분양 상세이미지처럼 세로로 긴 이미지를 가운데 정렬로 건다.
   picture 는 inline 요소라 아래 여백이 생기므로 block 으로 눕힌다. */
.xet-layout .layout__body-main > section article.main-section__content .main-section__media {
  text-align: center;
}
.xet-layout .layout__body-main > section article.main-section__content .main-section__media picture {
  display: block;
}
/* --image(이미지만) 방식은 위 .main-section__media 규칙만으로 완결된다.
   글이 없으므로 전용 modifier 규칙을 따로 두지 않는다 (빈 규칙 금지). */
/* 글만 방식은 한 줄이 너무 길어지지 않게 폭을 제한한다 (가독성) */
.xet-layout .layout__body-main > section article.main-section__content--text .main-section__body {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* 관리자가 직접 넣은 p·ul 의 브라우저 기본 여백이 섹션 상하 여백과 겹치지 않게 정돈 */
.xet-layout .layout__body-main > section article.main-section__content .main-section__text > *:first-child {
  margin-top: 0;
}
.xet-layout .layout__body-main > section article.main-section__content .main-section__text > *:last-child {
  margin-bottom: 0;
}
.xet-layout .layout__body-main > section article.main-section__content .main-section__content__link {
  text-align: center;
  margin-top: var(--gap3x);
}

/* ----- 섹션 내 아웃라인 버튼 공통 (프리미엄 / 지도 / 추가섹션) ----- */
.xet-layout .layout__body-main .main-section-container .xet-btn.btn-outline {
  height: auto;
  min-height: 2.75rem;
  padding: 0.75rem 1.6rem;
  border-radius: 2px;
  border-color: var(--btn-border-color);
  color: var(--text-strong-color);
  background-color: transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.xet-layout .layout__body-main .main-section-container .xet-btn.btn-outline:hover,
.xet-layout .layout__body-main .main-section-container .xet-btn.btn-outline:focus-visible {
  border-color: var(--theme-color);
  color: var(--theme-color);
  background-color: transparent;
}

/* ----- AOS: 등장 모션을 짧고 은은하게 (fade + 살짝 위로) ----- */
.xet-layout .layout__body-main [data-aos=fade-up] {
  transform: translate3d(0, 24px, 0);
}
.xet-layout .layout__body-main [data-aos=fade-up].aos-animate {
  transform: none;
}
.xet-layout .layout__body-main [data-aos][data-aos-delay="300"].aos-animate {
  transition-delay: 0.12s;
}

/* ============================================================
   2. 히어로 (.main-visual) — 슬라이더 / 배경영상 공통
   ============================================================ */
.xet-layout .layout__body-main .main-visual {
  position: relative;
}

/* ----- 스크롤 다운 인디케이터 ----- */
.xet-layout .layout__body-main .main-visual .icon-scroll {
  z-index: 10;
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 22px;
  height: 56px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  pointer-events: none;
}
/* 흘러내리는 빔 라인 */
.xet-layout .layout__body-main .main-visual .icon-scroll::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 38px;
  margin-left: -0.5px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) no-repeat,
    rgba(255, 255, 255, 0.18);
  background-size: 100% 45%, 100% 100%;
  background-position: 50% -50%, 0 0;
  animation: scrollLine 2.4s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
/* 바운스 셰브론 */
.xet-layout .layout__body-main .main-visual .icon-scroll::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  border-right: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg);
  animation: scrollChevron 2.4s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes scrollLine {
  0% { background-position: 50% -50%, 0 0; }
  100% { background-position: 50% 150%, 0 0; }
}
@keyframes scrollChevron {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}

/* ----- 슬라이더 컨테이너 ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #000;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper.vh100 {
  height: 100vh;
  height: 100svh; /* 모바일 주소창 노출 시 하단 잘림 방지 */
  min-height: 480px;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper.vh100 .swiper-slide .main-visual-swiper__image > img {
  height: 100%;
  object-fit: cover !important;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .swiper-slide {
  overflow: hidden;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .swiper-slide .main-visual-swiper__image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .swiper-slide .main-visual-swiper__image > img {
  width: 100%;
  will-change: transform;
}
/* 오버레이: --hero-overlay 는 sections/hero.html 의 <section> 에서 인라인 주입 (기본 0.3) */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .swiper-slide .main-visual-swiper__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--hero-overlay, 0.3));
}
/* 상·하단 은은한 비네트 (캡션·컨트롤 가독성) */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .swiper-slide .main-visual-swiper__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.34) 100%);
}

/* ----- 캡션 레이어 (슬라이더 / 영상 공통) ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content {
  display: flex;
  align-items: center;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: transparent;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article.text-center {
  align-items: center;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article.text-right {
  align-items: flex-end;
}

/* 유동 타이포 — 얇은 웨이트 + 넉넉한 자간 */
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title {
  font-size: clamp(28px, 7.6vw, 46px);
  line-height: 1.32;
  font-weight: 300;
  letter-spacing: 0.01em;
  word-break: keep-all;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__subTitle {
  max-width: 640px;
  font-size: clamp(14px, 3.7vw, 17px);
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: 0.03em;
  word-break: keep-all;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title + div,
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title + div + div {
  margin-top: var(--gap2x);
}
/* 히어로 고스트 버튼 */
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content__link .xet-btn {
  height: auto;
  min-height: 3rem;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background-color: transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content__link .xet-btn:hover,
.xet-layout .layout__body-main .main-visual .main-visual-swiper__content__link .xet-btn:focus-visible {
  border-color: #fff;
  background-color: #fff;
  color: var(--text-strong-color);
}

/* ----- 켄번즈 (활성 슬라이드 이미지) ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__image > img {
  animation: xetKenburns 12s ease-out both;
}
@keyframes xetKenburns {
  0% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ----- 캡션 순차 등장 (Swiper 초기화 후에만 숨김 → 단일 이미지에서도 안전) ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide .main-visual-swiper__content article > * {
  opacity: 0;
  transform: translateY(16px);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__content article > * {
  animation: xetHeroUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__content article > *:nth-child(1) { animation-delay: 0.15s; }
.xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__content article > *:nth-child(2) { animation-delay: 0.27s; }
.xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__content article > *:nth-child(3) { animation-delay: 0.39s; }
@keyframes xetHeroUp {
  to { opacity: 1; transform: none; }
}

/* ============================================================
   3. 히어로 슬라이더 컨트롤
   ============================================================ */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__controls {
  z-index: 10;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__controls__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ----- 좌우 이동 / 재생 컨트롤 : 데스크탑 전용 ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations {
  display: none;
  align-items: center;
  gap: 4px;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  height: 44px;
  width: 44px;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  border: 0;
  background-color: transparent;
  appearance: none;
  text-shadow: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations button:hover,
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations button:focus-visible {
  color: #fff;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigation__prev:hover {
  transform: translateX(-3px);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigation__next:hover {
  transform: translateX(3px);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations button i {
  line-height: inherit;
  font-size: 22px;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations button.swiper-button-disabled {
  cursor: auto;
  pointer-events: none;
  opacity: 0.35;
}

/* ----- 페이지네이션 : 얇은 바 인디케이터 (모바일 포함 상시 노출) ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination {
  width: auto !important;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination.swiper-pagination-fraction > span:first-child {
  margin-right: 10px;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination.swiper-pagination-fraction > span:last-child {
  margin-left: 10px;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination.swiper-pagination-fraction .swiper-pagination-current {
  color: #fff;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 20px;
  height: 2px;
  margin: 0 4px !important;
  border-radius: 0;
  opacity: 1;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination.swiper-pagination-bullets .swiper-pagination-bullet:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 40px;
  background-color: #fff;
}

/* ----- 재생/일시정지 + 진행 원형 게이지 : 데스크탑 전용 ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle {
  position: relative;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  stroke-width: 1.5px;
  stroke: rgba(255, 255, 255, 0.85);
  fill: none;
  stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle button {
  z-index: 3;
  position: absolute;
  right: 0;
  top: 0;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle .play-button-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  border: 0;
  background-color: transparent;
  color: inherit;
  appearance: none;
  transition: color 0.3s ease;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle .play-button-control:hover {
  color: #fff;
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle .play-button-text i {
  font-size: 15px;
}

/* ----- 하단 진행 라인 : 모바일 전용 ----- */
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-line {
  z-index: 10;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}
.xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-line svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  stroke-width: 2px;
  stroke: rgba(255, 255, 255, 0.9);
  fill: none;
  stroke-dashoffset: calc(100 * (1 - var(--progress)));
  stroke-dasharray: 100;
}

/* ----- 모바일: 하단 고정 퀵버튼에 컨트롤이 가리지 않도록 위로 올림 ----- */
@media (max-width: 1023px) {
  body.quickbutton .xet-layout .layout__body-main .main-visual .icon-scroll {
    bottom: calc(42px + 4rem);
  }
  body.quickbutton .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__controls {
    bottom: calc(20px + 4rem);
  }
  body.quickbutton .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-line {
    bottom: 4rem;
  }
}

/* ============================================================
   4. 히어로 — 배경영상 (.hero-video)
   ============================================================ */
.xet-layout .layout__body-main .main-visual .hero-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #000;
}
.xet-layout .layout__body-main .main-visual .hero-video.vh100 {
  height: 100vh;
  height: 100svh;
  min-height: 480px;
}
.xet-layout .layout__body-main .main-visual .hero-video:not(.vh100) {
  aspect-ratio: 16 / 9;
}
.xet-layout .layout__body-main .main-visual .hero-video__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.xet-layout .layout__body-main .main-visual .hero-video__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* iframe 을 화면에 꽉 차게 커버 (16:9 유지하며 넘치는 부분 크롭) */
.xet-layout .layout__body-main .main-visual .hero-video__frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;      /* 100vw * 9/16 */
  min-width: 177.78vh;  /* 100vh * 16/9 */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
}
/* 외부 mp4 주소: video 태그는 object-fit 으로 풀스크린 커버 */
.xet-layout .layout__body-main .main-visual .hero-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.xet-layout .layout__body-main .main-visual .hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.34) 100%),
    rgba(0, 0, 0, var(--hero-overlay, 0.3));
}
/* 영상 히어로 캡션 등장 (로드시 순차, active 클래스 의존 없음) */
.xet-layout .layout__body-main .main-visual .hero-video__content article > * {
  opacity: 0;
  transform: translateY(16px);
  animation: xetHeroUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.xet-layout .layout__body-main .main-visual .hero-video__content article > *:nth-child(1) { animation-delay: 0.15s; }
.xet-layout .layout__body-main .main-visual .hero-video__content article > *:nth-child(2) { animation-delay: 0.27s; }
.xet-layout .layout__body-main .main-visual .hero-video__content article > *:nth-child(3) { animation-delay: 0.39s; }

/* ============================================================
   5. 프리미엄 소개 — 텍스트 블록 공통 (.main-premium__text)
   ------------------------------------------------------------
   스와이프형의 좌측 컬럼과 탭형의 설명부가 이 클래스를 공유한다.
   설명(desc)은 오직 이 블록에만 존재한다. 예전에는 좌측 컬럼과 우측 카드가
   같은 desc 를 중복 출력하고 데스크탑에서 카드 쪽을 display:none 으로 감췄는데,
   마크업에서 카드 설명을 없애면서 그 우회책도 함께 걷어냈다.
   타이포 위계 : 아이브로우(.h4) → 제목(.h2) → 본문(.main-premium__desc) → 버튼
   ============================================================ */
.xet-layout .layout__body-main .main-premium__text {
  color: var(--text-base-color);
  letter-spacing: 0.01em;
  word-break: keep-all;
}
/* 아이브로우 — 앞에 짧은 룰 라인을 붙여 제목과의 위계를 분명히 한다 */
.xet-layout .layout__body-main .main-premium__text .h4 {
  color: var(--theme-color);
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.xet-layout .layout__body-main .main-premium__text .h4::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background-color: currentColor;
}
.xet-layout .layout__body-main .main-premium__text .h2 {
  color: var(--text-strong-color);
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em;
}
.xet-layout .layout__body-main .main-premium__text .h4 + .h2 {
  margin-top: 14px;
}
.xet-layout .layout__body-main .main-premium__text .main-premium__desc {
  font-size: 15px;
  line-height: 1.9;
}
/* 앞 요소가 있을 때만 간격을 준다(소제목·제목이 비어도 위쪽에 빈 여백이 남지 않게) */
.xet-layout .layout__body-main .main-premium__text div + .main-premium__desc {
  margin-top: var(--gap);
}
.xet-layout .layout__body-main .main-premium__text div + .main-premium__link {
  margin-top: var(--gap2x);
}

/* ============================================================
   6. 프리미엄 소개 — 스와이프형 (.main-premium)
   ------------------------------------------------------------
   ~1023px  : 이미지 카드(+페이지네이션)가 위, 설명 텍스트가 아래인 세로 스택
   1024px~  : 좌 텍스트 / 우 이미지 2컬럼
   좌측 텍스트 스와이퍼는 우측 이미지 스와이퍼의 thumbs 로 묶여 있어(js/main.js)
   어느 화면에서든 활성 카드의 설명이 따라 바뀐다. → 설명은 항상 정확히 한 번 보인다.
   ============================================================ */
.xet-layout .layout__body-main .main-premium .main-premium__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap3x);
}
/* 이미지가 주인공이라 모바일에서는 카드를 먼저 보여주고 설명이 뒤따르게 한다 */
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right {
  order: 1;
  min-width: 0;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__left {
  order: 2;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* 좌측 스와이퍼는 flex 아이템이라 폭을 명시하지 않으면 콘텐츠 폭으로 줄어든다 */
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__left .swiper {
  width: 100%;
  min-width: 0;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__left .swiper .swiper-slide {
  display: flex;
  align-items: center;
  background-color: var(--content-bg-color);
  transition: var(--transition-all);
}

/* 이미지 슬라이더 */
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper {
  overflow: visible;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide {
  width: 84%;
  height: auto;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide-shadow-left,
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide-shadow-right {
  border-radius: 2px;
  overflow: hidden;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container {
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: none;
  background-color: var(--content-bg-color);
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container .swiper-slide__img {
  min-height: 200px;
  overflow: hidden;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container .swiper-slide__img > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 마우스가 있는 환경에서만 아주 느린 줌인 (터치기기 hover 고착 방지) */
@media (hover: hover) {
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container:hover .swiper-slide__img > img {
    transform: scale(1.04);
  }
}

/* 모바일 페이지네이션 (바 인디케이터) */
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--gap2x);
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper-pagination .swiper-pagination-bullet {
  width: 18px;
  height: 2px;
  margin: 0 4px !important;
  border-radius: 0;
  opacity: 1;
  background: var(--border-color);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 34px;
  background-color: var(--theme-color);
}

/* 좌우 이동 컨트롤 (데스크탑 전용. 모바일은 페이지네이션이 대신한다) */
.xet-layout .layout__body-main .main-premium .swiper-controll {
  display: none;
}
.xet-layout .layout__body-main .main-premium .swiper-controll .swiper-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 원형 → 각진 모서리로. 섹션 전체의 절제된 톤(반경 2px)에 맞춘다. */
.xet-layout .layout__body-main .main-premium .swiper-controll .main-premium-swiper-button-prev,
.xet-layout .layout__body-main .main-premium .swiper-controll .main-premium-swiper-button-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  color: var(--text-base-color);
  background-color: transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.xet-layout .layout__body-main .main-premium .swiper-controll .main-premium-swiper-button-prev:hover,
.xet-layout .layout__body-main .main-premium .swiper-controll .main-premium-swiper-button-next:hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}
.xet-layout .layout__body-main .main-premium .swiper-controll i {
  font-size: 20px;
  line-height: 1;
}

/* ============================================================
   7. 프리미엄 소개 — 탭형 (.main-premium--tab)
   ------------------------------------------------------------
   타이포·간격은 위 .main-premium__text 가 전담한다(스와이프형과 톤 공유).
   여기서는 이미지/텍스트의 배치만 다룬다.
   ============================================================ */
.xet-layout .layout__body-main .main-premium--tab .main-premium-tab__container {
  display: flex;
  flex-direction: column;
  gap: var(--gap2x);
}
.xet-layout .layout__body-main .main-premium--tab .main-premium-tab__img img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  vertical-align: top;
}

/* ============================================================
   8. 탭 공통 (.main-tabs — 프리미엄 탭형)
   ============================================================ */
/* 탭 버튼 스트립: 언더라인형.
   li 는 flex:1 0 auto 로 "남으면 늘어나고 모자라면 줄지 않는다".
   → 항목이 많아도 모바일에서 글자가 눌리지 않고, js/main.js 의
     centerTabItem() 가 wrapper 를 translate 해 가로 스크롤처럼 동작한다. */
.xet-layout .layout__body-main .main-tabs .main-tab__buttons {
  overflow: hidden;
}
.xet-layout .layout__body-main .main-tabs .main-tab__buttons ul {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li {
  flex: 1 0 auto;
  width: auto;
  height: auto;
  padding: 0;
}
.xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 1.25rem;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid var(--border-color);
  border-radius: 0;
  background-color: transparent;
  color: var(--text-base-color);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li a:hover {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li.is-active a {
  border-color: var(--theme-color) !important;
  background-color: transparent !important;
  color: var(--text-strong-color) !important;
  font-weight: 600;
}

.xet-layout .layout__body-main .main-tabs .main-tab__contents {
  overflow: hidden;
  margin-top: var(--gap2x);
  border-radius: 0;
}
.xet-layout .layout__body-main .main-tabs .main-tab__contents .tab__content {
  min-height: 200px;
}
.xet-layout .layout__body-main .main-tabs .main-tab__contents .tab__content img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  vertical-align: top;
}
/* 예전엔 여기서 `.tab__content div + div { margin-top }` 로 일괄 간격을 줬는데
   .main-premium-tab__container 의 flex gap 과 .main-premium__text 의 개별 간격에
   이중으로 얹혀 간격이 어긋났다 → 제거하고 각 블록에서만 간격을 준다. */

/* ============================================================
   9. 지도안내 (.main-location)
   ------------------------------------------------------------
   탭을 없애고 장소 1~2개소를 세로로 쌓는다(모바일에서 클릭 없이 둘 다 노출).
   섹션에 .main-tabs 클래스가 더는 없으므로 이 블록만으로 자체 완결되어야 한다.
   과거엔 .main-tabs .tab__content div + div 의 margin-top 이 흘러들어와
   지도 위에 여백이 생겼고 이를 margin-top:0 !important 로 되돌리고 있었다 → 원인이 사라져 제거.
   구분은 그림자 없이 헤어라인 + 각진 모서리로만.
   ============================================================ */
.xet-layout .layout__body-main .main-location .main-location__item {
  display: flex;
  flex-direction: column;
}
/* 2개소일 때만 걸리는 구분선/간격. 1개소면 아무 규칙도 적용되지 않아 그대로 자연스럽다. */
.xet-layout .layout__body-main .main-location .main-location__item + .main-location__item {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-color);
}
/* 마지막 블록 하단 여백은 섹션 자체 padding 이 담당한다(이중 여백 방지). */
.xet-layout .layout__body-main .main-location .main-location__item:last-child {
  margin-bottom: 0;
}
.xet-layout .layout__body-main .main-location .main-location__content__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 0 var(--gap2x);
}
/* 제목+주소 묶음. 데스크탑 가로 배치에서 긴 주소가 버튼을 밀어내지 않도록 min-width:0. */
.xet-layout .layout__body-main .main-location .main-location__content__heading {
  min-width: 0;
}
.xet-layout .layout__body-main .main-location .main-location__content__header .h2 {
  color: var(--text-strong-color);
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em;
  word-break: keep-all;
}
/* 마크업에 있던 mg-t1rem 유틸을 걷어내고 여기서 제어한다(16px → 8px 로 더 붙임). */
.xet-layout .layout__body-main .main-location .main-location__content__header .h4 {
  margin-top: var(--space-2);
  color: var(--text-base-color);
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em;
  word-break: keep-all;
}
/* 버튼 묶음과 제목 사이 간격은 header 의 flex gap 이 담당한다(구 mg-t1rem/lg-mg-t0 대체). */
.xet-layout .layout__body-main .main-location .main-location__content__header .xet-btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.xet-layout .layout__body-main .main-location .main-location__content__map {
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: var(--transition-all);
}
/* 세로로 2개가 쌓이므로 지도 높이를 단계별로 낮췄다(300/400/480/560 → 260/320/380/420).
   두 개소를 합쳐도 한 섹션이 과하게 길어지지 않게 하는 것이 목적. */
.xet-layout .layout__body-main .main-location .main-location__content__map iframe {
  display: block;
  width: 100% !important;
  height: 260px !important;
  border: 0 !important;
}
.xet-layout .layout__body-main .main-location .main-location__content__map > img {
  display: block;
  width: 100%;
  height: auto;
  border: 0 !important;
  vertical-align: top;
}

/* ============================================================
   10. 접수폼 섹션 껍데기 (.main-contactform)
   ------------------------------------------------------------
   폼 내부(입력필드·버튼·동의문구)는 include/page_contact 담당이므로 건드리지 않는다.
   여기서는 섹션 껍데기만 다룬다.
   ※ 구조 통일을 위해 .main-section-container 래퍼를 넣었지만, 이 래퍼에는
     의도적으로 margin/padding 을 주지 않는다. 섹션 상하 여백은
     `.layout__body-main > section:not(.main-visual)` 한 곳에서만 나오므로
     래퍼 추가로 여백이 이중 적용되지 않는다. (다른 5개 섹션도 동일 조건)
   ============================================================ */
/* .xet-container(최대 1380px)는 폼(640px)에 비해 지나치게 넓어
   제목 줄길이가 과하게 늘어났다. 껍데기 폭만 좁혀 시선을 폼으로 모은다.
   폼 자체의 640px 제한은 include/page_contact/css/style.css 가 계속 담당한다. */
.xet-layout .layout__body-main .main-contactform .main-section__title,
.xet-layout .layout__body-main .main-contactform .main-section__content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   11. 다크 스킴 (현재 강제 라이트지만 규칙은 유지)
   ============================================================ */
body.color_scheme_dark .xet-layout .layout__body-main > section {
  background-color: var(--dark-content-bg-color);
}
body.color_scheme_dark .xet-layout .layout__body-main > section:not(.main-visual) + section:not(.main-visual) {
  border-top-color: var(--dark-border-color);
}
body.color_scheme_dark .xet-layout .layout__body-main > section .main-section__title {
  color: var(--dark-text-strong-color);
}
body.color_scheme_dark .xet-layout .layout__body-main > section article.main-section__content {
  color: var(--dark-text-base-color);
}
/* 프리미엄 텍스트 블록 — 스와이프형·탭형 공통 */
body.color_scheme_dark .xet-layout .layout__body-main .main-premium__text {
  color: var(--dark-text-base-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-premium__text .h2 {
  color: var(--dark-text-strong-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__left .swiper .swiper-slide {
  background-color: var(--dark-content-bg-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container {
  background-color: var(--dark-bg-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-premium .swiper-controll .main-premium-swiper-button-prev,
body.color_scheme_dark .xet-layout .layout__body-main .main-premium .swiper-controll .main-premium-swiper-button-next {
  border-color: var(--dark-border-color);
  color: var(--dark-text-base-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li a {
  border-bottom-color: var(--dark-border-color);
  color: var(--dark-text-base-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li.is-active a {
  color: var(--dark-text-strong-color) !important;
}
body.color_scheme_dark .xet-layout .layout__body-main .main-location .main-location__content__header .h2 {
  color: var(--dark-text-strong-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-location .main-location__content__header .h4 {
  color: var(--dark-text-base-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-location .main-location__content__map {
  border-color: var(--dark-border-color);
}
body.color_scheme_dark .xet-layout .layout__body-main .main-section-container .xet-btn.btn-outline {
  border-color: var(--dark-btn-border-color);
  color: var(--dark-text-strong-color);
}

/* ============================================================
   12. 태블릿 (768px ~ 1023px)
   ============================================================ */
@media (min-width: 768px) {
  .xet-layout .layout__body-main > section:not(.main-visual) {
    padding: 96px 0;
  }
  .xet-layout .layout__body-main > section .main-section__title {
    margin-bottom: 52px;
    font-size: 36px !important;
  }
  .xet-layout .layout__body-main > section article.main-section__content > div + div {
    margin-top: var(--gap3x);
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title {
    font-size: 44px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__subTitle {
    font-size: 17px;
  }
  .xet-layout .layout__body-main .main-premium__text .h2,
  .xet-layout .layout__body-main .main-location .main-location__content__header .h2 {
    font-size: 26px !important;
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content {
    gap: var(--gap4x);
  }
  .xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li a {
    height: 56px;
    padding: 0 1.75rem;
    font-size: 16px;
  }
  .xet-layout .layout__body-main .main-tabs .main-tab__contents {
    margin-top: var(--gap3x);
  }
  .xet-layout .layout__body-main .main-location .main-location__item + .main-location__item {
    margin-top: var(--gap4x);
    padding-top: var(--gap4x);
  }
  .xet-layout .layout__body-main .main-location .main-location__content__header {
    padding-bottom: var(--gap3x);
  }
  .xet-layout .layout__body-main .main-location .main-location__content__map iframe {
    height: 320px !important;
  }
}

/* ============================================================
   13. 데스크탑 (1024px ~)
   ============================================================ */
@media (min-width: 1024px) {
  .xet-layout .layout__body-main > section:not(.main-visual) {
    padding: 120px 0;
  }
  .xet-layout .layout__body-main > section .main-section__title {
    margin-bottom: 64px;
    font-size: 40px !important;
  }

  /* ----- 추가섹션: '이미지 + 글' 방식만 좌우 2단으로 전환 -----
     이미지가 왼쪽, 글·버튼이 오른쪽. 1023px 이하에서는 규칙 자체가 없어
     자동으로 세로 스택(이미지 위 / 글 아래)이 된다.
     minmax(0,1fr) 은 긴 이미지가 컬럼을 밀어내지 않게 하는 관용구. */
  .xet-layout .layout__body-main > section article.main-section__content--both {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap4x);
    align-items: center;
  }
  /* 세로 스택용 간격은 2단에서 필요 없다 (768px 구간 규칙과 특이도가 같아 순서로 이긴다) */
  .xet-layout .layout__body-main > section article.main-section__content--both > div + div {
    margin-top: 0;
  }
  /* 2단일 때 버튼은 글과 같은 정렬을 따른다 (article 의 text-center/text-left 상속) */
  .xet-layout .layout__body-main > section article.main-section__content--both .main-section__content__link {
    text-align: inherit;
    margin-top: var(--gap2x);
  }

  /* ----- 히어로 ----- */
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article {
    padding-right: 10%;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article.text-center {
    padding: 0 10%;
    align-items: center;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title {
    font-size: 52px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__subTitle {
    font-size: 18px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__navigations {
    display: flex;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__pagination {
    display: flex;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-circle {
    display: flex;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__progress-line {
    display: none;
  }

  /* ----- 프리미엄 텍스트 블록 (스와이프형·탭형 공통) ----- */
  .xet-layout .layout__body-main .main-premium__text .h2 {
    font-size: 32px !important;
  }
  .xet-layout .layout__body-main .main-premium__text .main-premium__desc {
    font-size: 16px;
  }
  .xet-layout .layout__body-main .main-premium__text div + .main-premium__desc {
    margin-top: var(--gap2x);
  }
  .xet-layout .layout__body-main .main-premium__text div + .main-premium__link {
    margin-top: var(--gap3x);
  }

  /* ----- 프리미엄 (스와이프형) : 좌 텍스트 42% / 우 이미지 ----- */
  /* 이미지가 주인공이라 오른쪽에 더 넓은 폭을 준다. 세로 스택용 order 는 여기서 되돌린다. */
  .xet-layout .layout__body-main .main-premium .main-premium__content {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: clamp(40px, 5vw, 90px);
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__left {
    order: 1;
    flex: 0 0 42%;
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right {
    order: 2;
    flex: 1 1 auto;
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper {
    padding: 0;
    overflow: hidden;
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide {
    width: 360px;
  }
  /* 고정 높이(480/540px) 대신 비율 고정 — 카드 크기가 달라져도 3:4 가 유지된다 */
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container .swiper-slide__img {
    aspect-ratio: 3 / 4;
    height: auto;
  }
  /* 활성 카드에 시선을 모은다 (coverflow 의 그림자만으로는 약함).
     Swiper 초기화 후에만 흐리게 한다 — 초기화 전/실패 시 전 카드가 흐려지는 것을 막는다. */
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper.swiper-initialized .swiper-slide .swiper-slide__container {
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper.swiper-initialized .swiper-slide.swiper-slide-active .swiper-slide__container {
    opacity: 1;
  }
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper-pagination {
    display: none;
  }
  /* 컨트롤은 가운데가 아니라 좌측 텍스트 컬럼의 시작선에 맞춰 둔다 */
  .xet-layout .layout__body-main .main-premium .swiper-controll {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: var(--gap3x);
  }

  /* ----- 프리미엄 (탭형) ----- */
  .xet-layout .layout__body-main .main-premium--tab .main-premium-tab__container {
    flex-direction: row;
    align-items: center;
    gap: clamp(40px, 5vw, 90px);
  }
  .xet-layout .layout__body-main .main-premium--tab .main-premium-tab__img {
    flex: 1 1 auto;
    min-width: 0;
  }
  .xet-layout .layout__body-main .main-premium--tab .main-premium-tab__desc {
    flex: 0 0 42%;
    min-width: 0;
  }

  /* ----- 탭 공통 ----- */
  .xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li a {
    height: 60px;
    padding: 0 2rem;
    font-size: 17px;
  }
  .xet-layout .layout__body-main .main-tabs .main-tab__contents {
    margin-top: var(--gap4x);
  }

  /* ----- 지도안내 ----- */
  .xet-layout .layout__body-main .main-location .main-location__item + .main-location__item {
    margin-top: var(--space-20);
    padding-top: var(--space-20);
  }
  .xet-layout .layout__body-main .main-location .main-location__content__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap2x);
    padding-bottom: var(--gap3x);
  }
  .xet-layout .layout__body-main .main-location .main-location__content__header .h2 {
    font-size: 32px !important;
  }
  .xet-layout .layout__body-main .main-location .main-location__content__header .xet-btn-container {
    flex: 0 0 auto;
  }
  .xet-layout .layout__body-main .main-location .main-location__content__map iframe {
    height: 380px !important;
  }
}

/* ============================================================
   14. 와이드 데스크탑 (1200px ~ / 1440px ~)
   ============================================================ */
@media (min-width: 1200px) {
  .xet-layout .layout__body-main > section:not(.main-visual) {
    padding: 150px 0;
  }
  .xet-layout .layout__body-main > section .main-section__title {
    margin-bottom: 76px;
    font-size: 46px !important;
  }
  .xet-layout .layout__body-main .main-visual .icon-scroll {
    bottom: 24px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title {
    font-size: 60px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__subTitle {
    font-size: 19px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__controls {
    bottom: 24px;
  }
  .xet-layout .layout__body-main .main-premium__text .h2,
  .xet-layout .layout__body-main .main-location .main-location__content__header .h2 {
    font-size: 36px !important;
  }
}
@media (min-width: 1440px) {
  .xet-layout .layout__body-main > section:not(.main-visual) {
    padding: 170px 0;
  }
  /* 제목 아래 여백도 섹션 여백과 같은 5단(36/52/64/76/88)으로 맞춘다.
     이 구간만 76px 에 멈춰 있어 제목(52px)에 비해 아래가 좁았다. */
  .xet-layout .layout__body-main > section .main-section__title {
    margin-bottom: 88px;
    font-size: 52px !important;
  }
  .xet-layout .layout__body-main .main-visual .icon-scroll {
    bottom: 30px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article .main-visual-swiper__content__title {
    font-size: 68px;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper .main-visual-swiper__controls {
    bottom: 30px;
  }
  /* 카드 높이는 위 aspect-ratio(3:4) 가 따라오므로 폭만 키운다 */
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide {
    width: 400px;
  }
  .xet-layout .layout__body-main .main-location .main-location__content__map iframe {
    height: 420px !important;
  }
}

/* ============================================================
   15. 모바일 미세 조정 (~767px)
   ============================================================ */
@media (max-width: 767px) {
  /* 히어로 캡션: .xet-container 기본 여백(16~20px)보다 조금 더 넉넉하게 */
  .xet-layout .layout__body-main .main-visual .main-visual-swiper__content article {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* 항목이 많은 탭에서 버튼 좌우 여백을 줄여 한 화면에 더 담기도록 */
  .xet-layout .layout__body-main .main-tabs .main-tab__buttons ul li a {
    padding: 0 1rem;
  }
}

/* ============================================================
   16. 모션 최소화 선호 사용자 배려
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .xet-layout .layout__body-main .main-visual .icon-scroll::before,
  .xet-layout .layout__body-main .main-visual .icon-scroll::after {
    animation: none;
  }
  .xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__image > img,
  .xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide .main-visual-swiper__content article > *,
  .xet-layout .layout__body-main .main-visual .main-visual-swiper.swiper-initialized .swiper-slide.swiper-slide-active .main-visual-swiper__content article > *,
  .xet-layout .layout__body-main .main-visual .hero-video__content article > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .xet-layout .layout__body-main [data-aos],
  .xet-layout .layout__body-main [data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .xet-layout .layout__body-main .main-tabs .main-tab__buttons ul,
  .xet-layout .layout__body-main .main-tabs .main-tab__contents .swiper-wrapper {
    transition-duration: 0s !important;
  }
  /* 프리미엄 카드 줌인 / 비활성 카드 페이드 */
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container,
  .xet-layout .layout__body-main .main-premium .main-premium__content .main-premium__content__right .swiper .swiper-slide .swiper-slide__container .swiper-slide__img > img {
    transition: none !important;
    transform: none !important;
  }
}