@charset "UTF-8";
/*
* 레이아웃 팝업 3종 (include/popup.html + js/popup.js 와 1:1 대응)
*   A · swipe   기본       .xet-layout-popup / .layout-popup__container      (Swiper 모달)
*   B · gallery/sheet 나열형 .layout-popup--gallery(PC) / --sheet(모바일)     (전체 딤 + 갤러리/바텀시트)
*   C · banner  배너형     .layout-popup--banner                            (상단 고정 배너)
*
* 디자인 언어(푸르지오 리버프론트 벤치마킹): 각진 모서리(2px), 얇은 글꼴 + 넓은 자간,
* 넉넉한 여백, 0.3s 내외의 짧은 전환. 3종이 같은 버튼·닫기 컴포넌트를 공유한다.
* 색상/여백은 css/layout.css 의 :root 토큰만 사용하고, 새 토큰은 정의하지 않는다.
* 타이포는 px 고정 - html font-size 가 1024px 이상에서 16px→14px 로 줄기 때문.
*
* Copyright 마케터비
* 마케터비
*/

/* =========================================================
   0. 3종 공통 컴포넌트
   - .layout-popup__x    이미지 위에 얹히는 닫기(×)     : A · B · C 전부 동일
   - .layout-popup__btn  텍스트 버튼(ghost/solid/onimage): A · B · C 전부 동일
   - .layout-popup__footer  하단 버튼 바                 : A · B 공용
   ========================================================= */

.layout-popup__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  cursor: pointer;
  background: rgba(17, 17, 17, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.layout-popup__x:hover {
  background: rgba(17, 17, 17, 0.72);
  border-color: rgba(255, 255, 255, 0.5);
}

.layout-popup__x:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 배너(C)처럼 높이가 얕은 곳에서 쓰는 축소형 */
.layout-popup__x--sm {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.layout-popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.layout-popup__btn:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: -3px;
}

.layout-popup__btn--ghost {
  background: var(--content-bg-color);
  color: var(--text-base-color);
}

.layout-popup__btn--ghost:hover {
  background: #f7f7f7;
  color: var(--text-strong-color);
}

.layout-popup__btn--solid {
  background: #1a1a1a;
  color: #ffffff;
}

.layout-popup__btn--solid:hover {
  background: var(--theme-color);
}

/* 이미지 위에 직접 올라가는 변형(C 배너형). 높이만 줄이고 글꼴·자간·모서리는 동일하게 유지 */
.layout-popup__btn--onimage {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  background: rgba(17, 17, 17, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #ffffff;
  font-size: 12px;
}

.layout-popup__btn--onimage:hover {
  background: rgba(17, 17, 17, 0.72);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.layout-popup__footer {
  display: flex;
  /* A 모달은 세로 flex 라 화면이 낮을 때 버튼 바가 눌려 사라질 수 있다. 절대 줄어들지 않게 고정 */
  flex: 0 0 auto;
  border-top: 1px solid var(--border-color);
}

.layout-popup__footer .layout-popup__btn {
  flex: 1 1 50%;
  min-width: 0;
}

.layout-popup__footer .layout-popup__btn + .layout-popup__btn {
  border-left: 1px solid var(--border-color);
}

/* =========================================================
   A · swipe - 스와이프 모달 (기본값)
   JS 가 .is-open 을 토글한다. display 대신 visibility/opacity 를 쓰는 이유:
   display:none 상태에서는 Swiper 가 슬라이드 크기를 재지 못해 초기화가 틀어진다.
   ========================================================= */

.xet-layout-popup {
  z-index: 99991;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(15, 18, 25, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.xet-layout-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.xet-layout-popup .layout-popup__container {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 폭을 340px 로 '고정'하면 좁은 폰에서 좌우가 남고, 이미지가 패널보다 좁으면 빈 공간이 생긴다.
     → 폭은 이미지가 정하게 두고(width:auto) 상한만 건다.
       데스크탑은 340px, 좁은 화면은 화면폭의 92% 까지 쓴다.  */
  width: auto;
  max-width: min(340px, 92vw);
  /* ★ 92svh 처럼 '화면 높이' 기준으로 잡으면 안 된다.
     오버레이(.xet-layout-popup)에 padding 이 있어서(모바일 16 / 기본 24 / 데스크탑 40px)
     패널 높이 + 위아래 padding 이 화면을 넘고, 넘친 만큼 하단 버튼바가 잘린다.
     (데스크탑 padding 이 가장 커서 데스크탑에서만 잘리는 것처럼 보였다)
     그래서 '화면 높이 - 오버레이 padding(상하)' 를 상한으로 쓴다.
     padding 이 브레이크포인트마다 다르므로 아래 미디어쿼리에서 함께 조정한다.
     (기본 padding 24px -> 상하 48px) */
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--content-bg-color);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  /* 위에서 아래로 떨어지듯 등장(레퍼런스 벤치마킹, 2026-08-22) - 예전엔 14px 만 살짝
     내려오는 미세한 움직임이었다. 확실히 '위에서 내려온다'고 느껴지도록 거리를 늘리고
     ease-out 느낌의 커브(빠르게 시작해 부드럽게 정착)로 바꿨다. */
  transform: translateY(-56px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.xet-layout-popup.is-open .layout-popup__container {
  transform: translateY(0);
}

.xet-layout-popup .layout-popup__container__body {
  position: relative;
  /* 푸터(flex:0 0 auto)가 자리를 먼저 가져가고, 남는 높이를 본문이 받는다.
     min-height:0 이 있어야 flex 아이템이 내용보다 작게 줄어들 수 있다. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* xet_webp_img 가 <picture><source><img> 를 반환하므로 자식(>) 선택자를 쓰면 안 된다.
   어떤 비율의 이미지든 잘리지 않게 한다 — object-fit:cover 를 쓰면 크롭된다. */
.xet-layout-popup .layout-popup__container__body img {
  display: block;
  /* 폭은 패널을 꽉 채우고 높이는 비율대로.
     ※ max-height:100% 는 쓸 수 없다 — 이미지가 Swiper 체인
       (.popup-swiper > .swiper-wrapper > .swiper-slide > a > img) 안에 있어
       중간 요소들의 높이가 auto 라 퍼센트가 해석되지 않는다.
     그래서 '화면 높이 - 오버레이 padding(상하) - 푸터(버튼높이+경계선 1px)' 를 직접 뺀다.
     (기본 padding 24px -> 48 + 49 = 97px. 이 97px은 .layout-popup__btn 이 48px인
     768~1024px 구간에서만 정확하다. 768px 이하/1024px 이상은 버튼 높이가 각각
     50px/46px로 바뀌므로 아래 미디어쿼리에서 81→83, 129→127로 다시 계산해 맞춰뒀다.
     버튼 높이를 또 바꾸면 이 세 숫자도 함께 재계산할 것 — 2026-08-21 발견) */
  width: 100%;
  height: auto;
  max-height: calc(100vh - 97px);
  max-height: calc(100svh - 97px);
  flex-shrink: 1;
  object-fit: contain;
}

.xet-layout-popup .layout-popup__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 25;
}

/* Swiper 컨테이너에 .swiper 클래스가 없어 플러그인 기본 overflow 를 못 받는다. 여기서 보강 */
.xet-layout-popup .popup-swiper {
  position: relative;
  overflow: hidden;
}

.xet-layout-popup .popup-swiper .swiper-slide a {
  display: block;
}

/* ---- 페이지네이션 : 점 대신 얇은 선(절제된 톤) ---- */
.xet-layout-popup .popup-swiper-pagination {
  z-index: 12;
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

.xet-layout-popup .popup-swiper-pagination .swiper-pagination-bullet {
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 0;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.45);
  transition: background-color 0.3s ease;
}

.xet-layout-popup .popup-swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--theme-color);
}

/* ---- 좌/우 이동 버튼 : 기본은 숨김, JS 가 2장 이상일 때만 .is-visible ---- */
.popup-swiper-nav {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 32px;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: rgba(17, 17, 17, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease;
}

.popup-swiper-nav.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-swiper-nav--prev { left: 0; }
.popup-swiper-nav--next { right: 0; }

.popup-swiper-nav--prev::before,
.popup-swiper-nav--next::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.92);
}

.popup-swiper-nav--prev::before { transform: rotate(-135deg); }
.popup-swiper-nav--next::before { transform: rotate(45deg); }

.popup-swiper-nav:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* 데스크탑은 터치가 아니라 마우스로 조작하는 경우가 대부분인데,
   지금까지 이 버튼엔 :focus-visible 만 있고 :hover 가 없어 클릭해도 아무 반응이 없어 보였다. */
@media (hover: hover) and (pointer: fine) {
  .popup-swiper-nav:hover {
    background: rgba(17, 17, 17, 0.48);
  }
}

/* Swiper 기본 화살표 폰트 아이콘 제거 */
.popup-swiper-nav.swiper-button-prev::after,
.popup-swiper-nav.swiper-button-next::after {
  display: none;
}

/* ---- 자동재생 진행바 ---- */
.xet-layout-popup .popup-swiper__autoplay-progress {
  z-index: 11;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
}

.xet-layout-popup .popup-swiper__autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  stroke-width: 2px;
  stroke: var(--theme-color);
  fill: none;
  stroke-dashoffset: calc(100 * (1 - var(--progress)));
  stroke-dasharray: 100;
}

/* 팝업이 1장뿐이면 페이지네이션/화살표/진행바를 전부 없앤다(렌더 단계 판정) */
.popup-swiper.is-single .popup-swiper-pagination,
.popup-swiper.is-single .popup-swiper-nav,
.popup-swiper.is-single .popup-swiper__autoplay-progress {
  display: none;
}

/* .has-multi 는 2장 이상 표식. 진행바 자리를 확보해 페이지네이션이 겹치지 않게 한다 */
.popup-swiper.has-multi .popup-swiper__autoplay-progress {
  display: block;
}

/* =========================================================
   B · gallery/sheet - 갤러리형(PC 가로 나열) + 바텀시트(모바일 캐러셀)
   전체를 하나의 딤(오버레이)으로 묶어 배경 클릭을 막는다(전체 차단).
   구조는 A(swipe)와 동일한 2단 패턴을 그대로 재사용한다:
     .layout-popup--gallery / .layout-popup--sheet   = 오버레이(딤 + 중앙/하단 정렬, opacity/visibility 전환)
     .layout-popup--gallery__panel / __sheet__panel  = 실제 보이는 박스(자체 transform 전환)
   개별 쿠키(layoutPopup_N)는 그대로 유지 - js/popup.js 의 closePopupItem/closePopupItemDay 재사용.
   딤 클릭 · ESC · 하단 바 '닫기'는 쿠키를 쓰지 않고 세션에서만 숨기며(새로고침하면 다시 보임,
   3종 공통 원칙), 숨긴 뒤에는 우하단 재오픈 토글(.layout-popup--reopen)이 뜬다.
   참고: C:\laragon\www\bee 의 realty-bee 테마 popup_list.php Style 3(지웰형) — PC 다크 오버레이
   + 가로 갤러리 + 개별 X, Mobile 바텀시트 + 재오픈 토글 구조를 벤치마킹했다.
   이미지는 어떤 비율이든 절대 자르지 않는다(object-fit:contain, 테마 전체 원칙) — 이 부분만
   레퍼런스(object-fit:cover)와 의도적으로 다르게 간다.
   ========================================================= */

.layout-popup--gallery {
  z-index: 99990;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(15, 18, 25, 0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.layout-popup--gallery.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.layout-popup--gallery__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  /* Style A 와 동일하게 위에서 떨어지듯 등장(2026-08-22, 레퍼런스 벤치마킹) */
  transform: translateY(-56px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.layout-popup--gallery.is-open .layout-popup--gallery__panel {
  transform: translateY(0);
}

.layout-popup--gallery__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* 이미지 아래(바)와의 간격도, 이미지끼리의 간격도 이 gap 하나로만 만든다.
     예전에 __row 에 margin:auto 0 을 같이 줬더니 부모(auto-height flex column)의
     justify-content:center 와 충돌해 화면 높이에 따라 간격이 들쭉날쭉했다 - 여기선 쓰지 않는다. */
  gap: var(--gap2x);
  flex-wrap: wrap;
}

.layout-popup--gallery__item {
  position: relative;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--content-bg-color);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.layout-popup--gallery__item.is-closing {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.layout-popup--gallery__item a {
  display: block;
  height: 100%;
}

/* 어떤 비율의 이미지든 '잘리지 않고' 통째로 들어가게 한다(object-fit:cover 크롭 금지 - 테마 원칙) */
.layout-popup--gallery__item img {
  display: block;
  width: auto;
  height: 70vh;
  max-height: 560px;
  max-width: 100%;
  object-fit: contain;
}

.layout-popup--gallery__item .layout-popup__x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.layout-popup--gallery__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.layout-popup--gallery__check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
}

.layout-popup--gallery__check input {
  width: 14px;
  height: 14px;
  accent-color: var(--theme-color);
}

.layout-popup--gallery__bar-close {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.layout-popup--gallery__bar-close:hover {
  color: #ffffff;
}

/* ---- 모바일 · 바텀시트 (기본은 숨김 - 아래 768px 미디어쿼리에서 flex 로 전환) ---- */
.layout-popup--sheet {
  z-index: 99990;
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(15, 18, 25, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.layout-popup--sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.layout-popup--sheet__panel {
  position: relative;
  width: 100%;
  /* js/popup.js 의 computeSheetMaxViewportHeight() 가 쓰는 topGap(16px)과 반드시 같은 값이어야
     한다 - 여기가 더 작으면 overflow:hidden 때문에 JS 가 계산한 만큼 다 못 자라고
     하단 바가 잘려 보인다(2026-08-22 발견). */
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  /* 테마 기본 모서리는 2px(각진 모서리)지만, 바텀시트는 참고 사이트(realty-bee)와 동일하게
     16px 로 예외를 둔다 - 사용자가 이 라운딩을 마음에 들어함(2026-08-22). */
  border-radius: 16px 16px 0 0;
  background-color: var(--content-bg-color);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.layout-popup--sheet.is-open .layout-popup--sheet__panel {
  transform: translateY(0);
}

.layout-popup--sheet .layout-popup__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

/* 드래그 가능한 바텀시트라는 걸 알려주는 장식용 손잡이(참고 사이트와 동일). 기능은 없다 -
   실제 드래그-닫기는 아직 없고, 지금은 시각적 신호(clean look)만 재현한다. */
.layout-popup--sheet__handle {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

.layout-popup--sheet__handle::after {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--border-color);
}

.layout-popup--sheet__viewport {
  width: 100%;
  /* 고정 vh 값 대신 js/popup.js 의 fitSheetViewportToSlide() 가 '현재 슬라이드 이미지의
     실제 비율'로 픽셀 높이를 직접 계산해서 넣는다(가로폭 기준 aspect-ratio 만큼만) -
     그래야 이미지 위아래에 불필요한 흰 여백이 남지 않는다(팝업 1장, 이미지 비율이 화면과
     안 맞을 때 여백이 남던 문제 - 2026-08-22 수정).
     상한은 여기 고정값(예: 72vh)으로 두지 않는다 - "화면 높이 - 바 높이 - 살짝의 상단 여유"를
     JS(computeSheetMaxViewportHeight)가 실측해서 계산하므로, 세로로 긴 이미지일수록 화면을
     거의 꽉 채운다(고정 vh 상한이 실제 여유 공간보다 작아서 이미지가 불필요하게 잘려
     보이던 문제 - 2026-08-22 2차 수정). min-height 만 JS 계산 전 첫 페인트 방지용으로 둔다.
     (percentage-height 체인은 여전히 유효하다 - 여기 height 가 'auto' 가 아니라 JS 가
     넣는 확정 px 값이라 아래 slide/a/img 의 100% 체인이 그대로 풀린다) */
  min-height: 160px;
  overflow: hidden;
}

.layout-popup--sheet__track {
  display: flex;
  height: 100%;
  will-change: transform;
  touch-action: pan-y;
}

.layout-popup--sheet__slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.layout-popup--sheet__slide a {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* width:auto 로 두면 화면보다 좁은 이미지가 원본 픽셀 크기로 떠 좌우에 흰 여백이 생겼다.
   width:100% 로 폭을 꽉 채우고, height:auto + max-height:100% 로 비율을 유지한 채 세로만 제한한다.
   (위 __slide a 에 명시적 height:100% 를 준 이유도 이 max-height:100% 를 풀어주기 위해서다)
   align-items:flex-end(슬라이드/a 둘 다) - 시트 높이는 보통 이미지 비율에 딱 맞게 계산되지만,
   72vh 상한에 걸려 이미지가 시트보다 짧아지는 경우엔 이미지가 바닥에 붙는다(위쪽에 여백). */
.layout-popup--sheet__slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.layout-popup--sheet__dots {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
}

/* 팝업이 1장뿐이면 buildSheetDots()가 내용을 비워둔다 - 빈 채로 padding 만 차지해
   불필요한 흰 여백이 되는 걸 막는다. */
.layout-popup--sheet__dots:empty {
  display: none;
}

.layout-popup--sheet__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.layout-popup--sheet__dot.is-active {
  background-color: var(--theme-color);
}

.layout-popup--sheet .layout-popup--gallery__bar {
  flex-shrink: 0;
  height: 44px;
  margin-top: 0;
  padding: 0 16px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid var(--border-color);
  color: var(--text-base-color);
}

.layout-popup--sheet .layout-popup--gallery__bar-close:hover {
  color: var(--text-strong-color);
}

/* ---- 재오픈 토글 - 딤/ESC/바 '닫기'(쿠키 없이)로 숨겼을 때만 뜬다 ---- */
.layout-popup--reopen {
  z-index: 99988;
  position: fixed;
  right: 20px;
  bottom: 112px;
  display: none;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background-color: #1a1a1a;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.layout-popup--reopen.is-visible {
  display: flex;
}

.layout-popup--reopen:hover {
  background-color: var(--theme-color);
  transform: translateY(-2px);
}

/* =========================================================
   C · banner - 상단 배너형
   헤더(#js-header-fixed, position:fixed, z-index:99)와 겹치지 않도록
   js/popup.js 가 배너 실제 높이만큼 헤더의 top 을 내린다(투명 헤더 A 대응).
   배너가 전부 닫히면 헤더 top 은 원래대로 복구된다.
   ========================================================= */

.layout-popup--banner {
  z-index: 99990;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /* 배너를 5개까지 넣으면 화면을 다 덮는다. 높이를 제한하되 hidden 이 아니라 스크롤로
     처리해 잘린 배너가 '영영 못 보는' 상태가 되지 않게 한다. */
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.layout-popup--banner__item {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: var(--content-bg-color);
  animation: xetLayoutPopupBannerDown 0.4s ease backwards;
}

.layout-popup--banner__item:nth-of-type(2) { animation-delay: 0.06s; }
.layout-popup--banner__item:nth-of-type(3) { animation-delay: 0.12s; }
.layout-popup--banner__item:nth-of-type(4) { animation-delay: 0.18s; }
.layout-popup--banner__item:nth-of-type(5) { animation-delay: 0.24s; }

@keyframes xetLayoutPopupBannerDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.layout-popup--banner__item__link {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

  /* 어떤 비율의 이미지든 '잘리지 않고' 통째로 들어가게 한다.
     이전에는 width:100% 로 폭을 강제하고 넘치는 높이를 max-height 로 자른 뒤
     object-fit:cover 가 크롭해서, 세로로 긴 이미지(예: 350x550)의 아래쪽이 잘렸다.
     → 폭·높이를 모두 auto 로 두고 max-* 로만 상한을 걸면 짧은 쪽에 맞춰 비율 그대로 축소된다.
       (가로가 남으면 가운데 정렬) */
.layout-popup--banner__item__link img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 96px;
  margin: 0 auto;
  object-fit: contain;
}

.layout-popup--banner__item__actions {
  z-index: 2;
  position: absolute;
  top: 50%;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
}

/* =========================================================
   닫힘 전환 (B · C 공통). JS 가 .is-closing 을 붙였다가 display:none 처리한다.
   ========================================================= */

.layout-popup--banner__item.is-closing {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* =========================================================
   모바일 (~768px)
   화면을 덜 가리는 것이 최우선. 3종 모두 이미지 높이를 뷰포트 비율로 제한한다.
   ========================================================= */
@media (max-width: 768px) {
  /* 공통 버튼 - 터치 타겟 확보 */
  .layout-popup__btn {
    height: 50px;
    font-size: 13px;
  }

  .layout-popup__btn--onimage {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  .layout-popup__x {
    width: 34px;
    height: 34px;
  }

  .layout-popup__x--sm {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  /* A · swipe */
  .xet-layout-popup {
    padding: 16px;
  }

  .xet-layout-popup .layout-popup__container {
    /* 좁은 화면에서는 화면폭을 최대한 쓴다 (참고 사이트와 동일한 방식) */
    max-width: 92vw;
    /* 이 구간 오버레이 padding 은 16px -> 상하 32px */
    max-height: calc(100vh - 32px);
    max-height: calc(100svh - 32px);
  }

  .xet-layout-popup .layout-popup__container__body img {
    /* 32(오버레이 padding 상하) + 51(이 구간 푸터: 버튼 50px + 경계선 1px) = 83.
       이전에는 81(=32+49)이었다 — 이 구간 버튼 높이가 48→50px로 커진 걸 반영하지 못해
       실제 푸터보다 2px 작게 잡아, 이론상 이미지가 푸터를 2px 밀어낼 여지가 있었다. */
    max-height: calc(100vh - 83px);
    max-height: calc(100svh - 83px);
  }


  .xet-layout-popup .layout-popup__x {
    top: 10px;
    right: 10px;
  }

  .popup-swiper-nav {
    width: 28px;
    height: 54px;
  }

  /* B · gallery/sheet - 데스크탑 갤러리는 숨기고 바텀시트만 노출 */
  .layout-popup--gallery {
    display: none !important;
  }

  .layout-popup--sheet {
    display: flex;
  }

  .layout-popup--reopen {
    bottom: 84px;
  }

  /* C · banner */
  .layout-popup--banner {
    max-height: 50vh;
  }

  .layout-popup--banner__item__link img {
    max-height: 64px;
  }

  .layout-popup--banner__item__actions {
    right: 10px;
    gap: 6px;
  }
}

/* =========================================================
   데스크탑 (1024px~)
   html font-size 가 14px 로 줄어드는 구간. 버튼/글자는 px 고정이라 영향 없다.
   ========================================================= */
@media (min-width: 1024px) {
  .layout-popup__btn {
    height: 46px;
  }

  /* A · swipe */
  .xet-layout-popup {
    padding: 40px;
  }

  .xet-layout-popup .layout-popup__container {
    /* 폭 상한만 올린다(고정 폭 X). 이미지가 좁으면 패널도 같이 좁아진다. */
    max-width: 380px;
    /* 이 구간 오버레이 padding 은 40px -> 상하 80px.
       이걸 빼지 않아 패널이 화면을 넘고 하단 버튼바가 잘렸다(데스크탑에서만 보이던 증상). */
    max-height: calc(100vh - 80px);
    max-height: calc(100svh - 80px);
  }

  .xet-layout-popup .layout-popup__container__body img {
    /* 80(오버레이 padding 상하) + 47(이 구간 푸터: 버튼 46px + 경계선 1px) = 127.
       이전에는 129(=80+49)였다 — 이 구간 버튼 높이가 48→46px로 줄어든 걸 반영하지 못해
       실제로 필요한 것보다 2px 더 깎아, 이미지가 실제 여유 공간을 다 못 쓰고 있었다.
       (짤림은 아니고 낭비였지만, 계산 근거가 실제 푸터 높이와 어긋나 있던 건 사실이라 맞춘다) */
    max-height: calc(100vh - 127px);
    max-height: calc(100svh - 127px);
  }


  /* B · gallery/sheet - 재오픈 토글이 데스크탑 퀵상담 바(.quickcs-bar, 약 74px) 위로 오게 */
  .layout-popup--reopen {
    bottom: 112px;
  }

  /* C · banner */
  .layout-popup--banner__item__link img {
    max-height: 110px;
  }

  .layout-popup--banner__item__actions {
    right: 32px;
    gap: 10px;
  }
}



/* =========================================================
   모션 최소화 선호 - 전환/애니메이션 제거 (내용 자체는 그대로 보인다)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .xet-layout-popup,
  .xet-layout-popup .layout-popup__container,
  .layout-popup__btn,
  .layout-popup__x,
  .popup-swiper-nav,
  .xet-layout-popup .popup-swiper-pagination .swiper-pagination-bullet,
  .layout-popup--gallery,
  .layout-popup--gallery__panel,
  .layout-popup--gallery__item.is-closing,
  .layout-popup--sheet,
  .layout-popup--sheet__panel,
  .layout-popup--reopen,
  .layout-popup--banner__item.is-closing {
    transition: none;
  }

  .xet-layout-popup .layout-popup__container {
    transform: translateY(0);
  }

  .layout-popup--gallery__panel,
  .layout-popup--sheet__panel {
    transform: translateY(0);
  }

  .layout-popup--banner__item {
    animation: none;
  }
}