/* ========================================
   scroll-feature (스크롤 특징)
   ======================================== */

.scroll-feature {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  gap: 6.25rem; /* 100px */
}

.scroll-feature__media {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.scroll-feature__image {
  width: auto;
  height: auto;
  max-width: none;
  max-height: 85vh;
}

.scroll-feature__hotspot {
  position: absolute;
  width: 3.75rem; /* 60px */
  height: 3.75rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: left, top;
}

.scroll-feature__hotspot-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #ff7700;
  transform: translate(-50%, -50%);
}

.scroll-feature__hotspot-ring--outer {
  width: 3.75rem; /* 60px */
  height: 3.75rem;
  opacity: 0.3;
}

.scroll-feature__hotspot-ring--middle {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  opacity: 0.6;
}

.scroll-feature__hotspot-ring--inner {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  opacity: 1;
}

.scroll-feature__content {
  flex: 1;
  min-width: 0;
  padding-right: var(--grid-margin);
}

.scroll-feature__title {
  margin: 0;
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: 2rem; /* 32px */
  line-height: 130%;
  letter-spacing: 0.06em;
  color: var(--color-brand-dark);
}

/* 한글 제목 */
.scroll-feature__title--ko {
  font-family: var(--font-suit);
  font-weight: var(--fw-suit-bold); /* 600 */
  font-size: var(--fs-title); /* 40px */
  letter-spacing: normal;
}

.scroll-feature__char {
  display: inline-block;
  will-change: transform, opacity;
}

/* 이미지 우측 40% */
.scroll-feature--media-end {
  gap: 0;
}

.scroll-feature--media-end .scroll-feature__content {
  padding-right: 5rem; /* 80px — 텍스트↔이미지 여백 */
  padding-left: var(--grid-margin);
}

.scroll-feature--media-end .scroll-feature__media {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.scroll-feature--media-end .scroll-feature__image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.scroll-feature__image--reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 이미지 우측 60% */
.scroll-feature--media-60.scroll-feature--media-end .scroll-feature__media {
  width: 60%;
}

.scroll-feature__features {
  margin-top: 5rem; /* 80px */
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30px */
}

.scroll-feature__feature-row {
  display: flex;
  align-items: stretch;
  gap: 2.5rem; /* 40px */
}

.scroll-feature__indicator {
  flex-shrink: 0;
  width: 1px;
  opacity: 0;
  background-color: var(--color-brand-dark);
  will-change: opacity;
}

.scroll-feature__feature-number,
.scroll-feature__feature-title {
  margin: 0;
  font-family: var(--font-suit);
  font-size: var(--fs-subtitle-md); /* 28px */
  line-height: 130%;
  color: var(--color-grey-200);
  transition: color 1s ease;
}

.scroll-feature__feature-title {
  font-weight: 600;
}

.scroll-feature__feature-number {
  font-weight: 700;
}

.scroll-feature__feature.is-active .scroll-feature__feature-number {
  color: var(--color-brand-point);
}

.scroll-feature__feature.is-active .scroll-feature__feature-title {
  color: var(--color-brand-dark);
}

.scroll-feature__feature-inner {
  min-width: 0;
}

.scroll-feature__feature-heading {
  display: flex;
  align-items: baseline;
  gap: 0.625rem; /* 10px */
}

.scroll-feature__feature-desc {
  margin: 0.875rem 0 0; /* 14px */
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-04); /* 18px */
  line-height: 150%;
  color: var(--color-brand-dark);
  will-change: opacity, transform;
}

.scroll-feature__feature-desc[hidden] {
  display: none;
}

.scroll-feature__feature-desc:empty {
  display: none;
}

.scroll-feature__dots {
  display: none;
}

@media (max-width: 63.9375rem) {
  :has(> .scroll-feature) {
    height: auto;
  }

  .scroll-feature {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    height: auto;
    padding: 5rem var(--grid-margin); /* 80px */
    box-sizing: border-box;
    touch-action: pan-y;
  }

  .scroll-feature:not(.scroll-feature--media-end) .scroll-feature__content {
    order: -1;
  }

  .scroll-feature__content,
  .scroll-feature--media-end .scroll-feature__content {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
    margin-bottom: 1.25rem; /* 20px */
  }

  .scroll-feature__media,
  .scroll-feature--media-end .scroll-feature__media,
  .scroll-feature--media-60.scroll-feature--media-end .scroll-feature__media {
    position: relative;
    width: 100%;
    height: 60vh;
    flex: 0 0 60vh;
    overflow: hidden;
  }

  .scroll-feature__image,
  .scroll-feature--media-end .scroll-feature__image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .scroll-feature__features {
    display: grid;
    margin-top: 1.875rem; /* 30px — 제목 ↔ 특징 */
    gap: 0;
  }

  .scroll-feature__feature {
    grid-area: 1 / 1;
    visibility: hidden;
  }

  .scroll-feature__feature.is-active {
    visibility: visible;
  }

  .scroll-feature__indicator {
    display: none;
  }

  .scroll-feature__feature-row {
    flex-direction: column;
    gap: 0;
  }

  .scroll-feature__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    margin-top: 0.875rem; /* 14px */
  }

  .scroll-feature__dot {
    width: 0.375rem; /* 6px */
    height: 0.375rem; /* 6px */
    padding: 0;
    border: 0;
    border-radius: 6.25rem;
    background-color: var(--color-brand-light-1);
    cursor: pointer;
  }

  .scroll-feature__dot.is-active {
    width: 1.25rem; /* 20px */
    background-color: var(--color-brand-dark);
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .scroll-feature__title,
  .scroll-feature__title--ko {
    font-size: 2rem; /* 32px */
  }

  .scroll-feature__feature-number {
    font-size: 1.125rem; /* 18px */
  }

  .scroll-feature__feature-title {
    font-size: 1.5rem; /* 24px */
  }

  .scroll-feature__feature-desc {
    font-size: 1rem; /* 16px */
  }
}

@media (max-width: 47.9375rem) {
  .scroll-feature__title,
  .scroll-feature__title--ko {
    font-size: 1.75rem; /* 28px */
  }

  .scroll-feature__feature-number {
    font-size: 1.25rem; /* 20px */
  }

  .scroll-feature__feature-title {
    font-size: 1.25rem; /* 20px */
  }

  .scroll-feature__feature-desc {
    font-size: 1rem; /* 16px */
  }
}

/* compact-stack: 제목 → 이미지 → 특징 → pagination (mattress / bedding) */
@media (max-width: 63.9375rem) {
  .mattress-tech-top-layer,
  .bedding-tech-process {
    height: auto;
    min-height: 0;
  }

  .scroll-feature--compact-stack.scroll-feature {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    padding-block: 5rem; /* 80px */
  }

  .scroll-feature--compact-stack .scroll-feature__content,
  .scroll-feature--compact-stack.scroll-feature--media-end .scroll-feature__content {
    display: contents;
    margin: 0;
    padding: 0;
  }

  .scroll-feature--compact-stack .scroll-feature__title,
  .scroll-feature--compact-stack .scroll-feature__title--ko {
    order: 1;
    margin-bottom: 1.25rem; /* 20px — 제목 ↔ 이미지 (mobile) */
  }

  .scroll-feature--compact-stack .scroll-feature__media,
  .scroll-feature--compact-stack.scroll-feature--media-end .scroll-feature__media,
  .scroll-feature--compact-stack.scroll-feature--media-60.scroll-feature--media-end .scroll-feature__media {
    order: 2;
    width: 100%;
    height: 30vh;
    flex: 0 0 30vh;
    margin: 0;
  }

  .scroll-feature--compact-stack .scroll-feature__features {
    order: 3;
    position: relative;
    display: block;
    margin-top: 0; /* 이미지 ↔ 특징 0 */
    padding-block: 1.25rem; /* 20px */
  }

  .scroll-feature--compact-stack .scroll-feature__feature {
    grid-area: auto;
    visibility: visible;
  }

  .scroll-feature--compact-stack .scroll-feature__feature:not(.is-active) {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .scroll-feature--compact-stack .scroll-feature__feature.is-active {
    position: relative;
    visibility: visible;
  }

  .scroll-feature--compact-stack .scroll-feature__dots {
    order: 4;
    margin-top: 0.875rem; /* 14px — 특징 ↔ pagination */
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .scroll-feature--compact-stack .scroll-feature__title,
  .scroll-feature--compact-stack .scroll-feature__title--ko {
    margin-bottom: 1.875rem; /* 30px — 제목 ↔ 이미지 (tablet) */
  }
}