/* Parallax gallery — PC 2열 / 모바일 전체화면 겹침 */

.hc-parallax-gallery {
  position: relative;
  --hc-parallax-offset: var(--header-height, 80px);
  --hc-parallax-vh: calc(100svh - var(--hc-parallax-offset));
  --hc-parallax-step: var(--hc-parallax-vh, calc(100svh - 80px));
}

.hc-parallax-gallery__scroller {
  position: relative;
  height: calc(var(--hc-parallax-count, 1) * var(--hc-parallax-step));
}

.hc-parallax-gallery__sticky {
  position: sticky;
  top: var(--hc-parallax-offset);
  height: var(--hc-parallax-step);
  max-height: var(--hc-parallax-step);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
  isolation: isolate;
}

.hc-parallax-gallery__header {
  flex-shrink: 0;
  text-align: center;
  padding: clamp(8px, 1.8vw, 18px) var(--hc-page-pad-x, 16px) clamp(4px, 1vw, 8px);
}

.hc-parallax-gallery__title:empty,
.hc-parallax-gallery__lead:empty,
.hc-parallax-gallery__title[hidden],
.hc-parallax-gallery__lead[hidden] {
  display: none;
}

.hc-parallax-gallery__lead {
  margin: 0.5rem auto 0;
  max-width: 36em;
  line-height: 1.65;
}

.hc-parallax-gallery__stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.hc-parallax-gallery__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hc-parallax-gallery__item {
  position: absolute;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  box-sizing: border-box;
}

.hc-parallax-gallery__item.is-initial {
  opacity: 1;
  pointer-events: auto;
}

.hc-parallax-gallery__item.is-visible {
  pointer-events: auto;
}

.hc-parallax-gallery__frame {
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-parallax-gallery__poster {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(var(--hc-poster-tilt, 0deg));
  transform-origin: center center;
}

.hc-parallax-gallery__poster-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-parallax-gallery__source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.hc-parallax-gallery__frame img.hc-parallax-gallery__source {
  display: block;
  width: 1px;
  height: 1px;
  object-fit: none;
}

.hc-parallax-gallery__caption {
  display: none;
}

.hc-parallax-gallery__empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 420px);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--hc-ink-muted, #7a6248);
  border: 1px dashed rgba(92, 64, 40, 0.25);
  border-radius: 8px;
  background: rgba(250, 246, 239, 0.6);
}

@supports not (height: 100svh) {
  .hc-parallax-gallery {
    --hc-parallax-vh: calc(100vh - var(--hc-parallax-offset));
  }
}

/* 모바일: 전체화면 동일 위치 스택 (콘텐츠 폭 안) */
@media (max-width: 768px) {
  .hc-parallax-gallery__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    pointer-events: none;
    padding: 10px var(--hc-page-pad-x, 16px) 28px;
    background: linear-gradient(
      180deg,
      rgba(243, 235, 224, 0.94) 0%,
      rgba(243, 235, 224, 0.72) 55%,
      transparent 100%
    );
  }

  .hc-parallax-gallery__stage {
    flex: 1;
    min-height: 0;
  }

  .hc-parallax-gallery__item {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
  }

  .hc-parallax-gallery__title {
    font-size: 1.1rem;
    line-height: 1.28;
  }

  .hc-parallax-gallery__lead {
    font-size: 0.74rem;
    margin-top: 0.18rem;
    line-height: 1.38;
    opacity: 0.9;
  }

  .hc-parallax-gallery__item.is-initial-row:not(.is-initial) {
    opacity: 0;
    pointer-events: none;
  }
}

/* PC: 2열, 양쪽 벽 맞춤 */
@media (min-width: 769px) {
  .hc-parallax-gallery {
    --hc-parallax-step: clamp(520px, calc(86vh - var(--hc-parallax-offset)), 720px);
  }

  .hc-parallax-gallery__header {
    padding-bottom: clamp(4px, 1vw, 10px);
  }

  .hc-parallax-gallery__item {
    top: 0;
    height: 100%;
    transform-origin: center center;
  }

  .hc-parallax-gallery__item--col-left {
    left: 0;
    width: 50%;
  }

  .hc-parallax-gallery__item--col-right {
    left: 50%;
    width: 50%;
  }

  .hc-parallax-gallery__item.is-initial-row {
    opacity: 1;
    pointer-events: auto;
  }

  .hc-parallax-gallery__item.is-visible .hc-parallax-gallery__frame {
    transition: opacity 0.35s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-parallax-gallery__item {
    will-change: auto;
  }
}