@charset "UTF-8";
/* =============================================================================
   special-experience — "특별한 경험" 레이스카 비주얼 (W2)
   Figma: 모바일 6350:4821 (375×512) / PC 6350:5189 (1140×672)

   dim 4장(상/하/좌/우)은 이미지로 굽지 않고 CSS 그라디언트로 재현합니다.
   모바일에서 스테이지 폭(583px)은 뷰포트보다 넓으므로 가운데 정렬 + 클리핑.
   ============================================================================= */

.special-experience {
  overflow: hidden;
  padding-block: 19px 59px;
  background-color: var(--c-black);
  color: var(--c-text-inverse);
  text-align: center;
  word-break: keep-all; /* 한국어 단어 중간에서 줄바꿈되지 않도록 (320px 대응) */
}

/* -----------------------------------------------------------------------------
   비주얼
   -------------------------------------------------------------------------- */
.special-experience__media {
  position: relative;
  overflow: hidden;
}

/* 모바일 583px / PC 1140px. 두 아트보드의 비율이 같아 aspect-ratio 는 하나면 됩니다. */
.special-experience__stage {
  position: relative;
  left: 50%;
  width: min(155.47%, 1140px);
  aspect-ratio: 583 / 266.44;
  overflow: hidden;
  transform: translateX(-50%);
}

/* Figma 원본 크롭을 그대로 재현합니다 (스테이지 대비 91.58% × 131.61%,
   위로 40.05% 끌어올림). 두 아트보드가 같은 비율이라 % 하나로 커버됩니다. */
.special-experience__layer {
  position: absolute;
  top: -40.05%;
  left: 1.23%;
  width: 91.58%;
  height: 131.61%;
  object-fit: fill;
}

/* 블러는 배경 레이어에만. 전경의 레이스카는 선명해야 초점이 살아납니다. */
.special-experience__layer--bg {
  filter: blur(0.95px);
}

/* 레이스카 컷아웃은 "특별한 경험" 타이틀 위에 겹칩니다 (마크업 순서로 처리) */
.special-experience__layer--car {
  pointer-events: none;
}

.special-experience__dim {
  position: absolute;
  pointer-events: none;
}

.special-experience__dim--top {
  top: 0;
  right: 0;
  left: 0;
  height: 64.6%;
  background-image: linear-gradient(
    to bottom,
    var(--c-black) 0%,
    var(--c-black) 3.6%,
    rgba(0, 0, 0, 0) 100%
  );
}

.special-experience__dim--bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 25.9%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--c-black));
}

/* 좌우 비네팅. 폭은 두 아트보드 모두 스테이지의 27.45% 이고 위치만 다릅니다.
   (모바일은 스테이지가 뷰포트보다 넓어 안쪽으로 더 들어옵니다.) */
.special-experience__dim--left,
.special-experience__dim--right {
  top: 0;
  bottom: 0;
  width: 27.45%;
}

.special-experience__dim--left {
  left: 15.6%;
  background-image: linear-gradient(to right, var(--c-black), rgba(0, 0, 0, 0));
}

.special-experience__dim--right {
  right: 17.5%;
  background-image: linear-gradient(to left, var(--c-black), rgba(0, 0, 0, 0));
}

/* Figma 위치에서 위로 끌어올립니다 — 원본 크롭대로 두면 레이스카 지붕이
   글자를 너무 많이 덮습니다. 모바일 스테이지(266px)와 PC 스테이지(521px)의
   높이가 달라, 같은 비율(5.76%)이 되도록 모바일 15px / PC 30px 로 나눕니다. */
.special-experience__display {
  position: absolute;
  top: 11.64%;
  right: 0;
  left: 0;
  margin-top: -15px;
  font-size: min(14.93vw, 90px); /* 모바일 실측 56px @375 */
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   본문
   -------------------------------------------------------------------------- */
.special-experience__body {
  position: relative; /* PC 에서 비주얼 위로 겹칩니다 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-12);
  margin-top: 28px;
}

.special-experience__lead {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
}

/* -----------------------------------------------------------------------------
   PC (1024 이상)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .special-experience { padding-block: var(--s-24) var(--s-64); }

  .special-experience__layer--bg { filter: blur(1.85px); }

  .special-experience__dim--left { left: 0.88%; }

  .special-experience__dim--right { right: 7.02%; }

  .special-experience__display {
    top: 14.59%;
    margin-top: -30px; /* 모바일 -15px 를 덮어씁니다 (위 주석 참고) */
    font-size: min(7.9vw, 90px);
  }

  .special-experience__body { margin-top: -69px; }

  .special-experience__lead { font-size: 26px; }
}