@charset "UTF-8";
/* =============================================================================
   features — 미쉐린 타이어의 강점 5가지
   모바일: 가로 스크롤 캐러셀 (가운데 카드 강조 — js/sections/features.js)
   PC(1024+): 스크롤을 끄고 5열 정적 배치
   -----------------------------------------------------------------------------
   카드 안쪽 요소는 전부 cqw(카드 폭 기준) 로 잡아서, 카드가 어떤 크기가 되든
   Figma 비율(카드 178.4px 기준)이 그대로 유지되게 했습니다.
   ============================================================================= */

.features {
  --features-card-w: min(202px, 62vw);

  background-color: var(--c-bg-inverse);
  color: var(--c-text-inverse);
  padding-block: var(--s-64);
}

/* 상단 블루 글로우 (Figma: 블러 처리한 타원 그라디언트) */
.features::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    72% 40% at 50% 22%,
    var(--c-michelin-blue),
    transparent 70%
  );
  opacity: 0.9;
  pointer-events: none;
}

.features__intro,
.features__track {
  position: relative; /* 글로우 위로 */
}

/* --- 비벤덤 --------------------------------------------------------------- */

.features__mascot {
  width: min(134px, 41%);
  margin-inline: auto;
  aspect-ratio: 194.163 / 142;
  overflow: hidden;
}

/* 아래쪽은 배경으로 자연스럽게 사라집니다 (Figma 의 그라디언트 오버레이 대체) */
.features__mascot img {
  width: 68.55%;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(180deg, black 17%, transparent 47%);
  mask-image: linear-gradient(180deg, black 17%, transparent 47%);
}

/* --- 헤더 ----------------------------------------------------------------- */

.features__header {
  margin-top: var(--s-4);
  text-align: center;
}

.features__title {
  font-size: 30px;
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
}

.features__subtitle {
  margin-top: var(--s-8);
  color: var(--c-text-inverse-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* --- 트랙 ----------------------------------------------------------------- */

.features__track {
  margin-top: var(--s-32);
  gap: var(--s-12);
  align-items: center;
  /* 첫/마지막 카드가 화면 가장자리에 붙지 않도록 */
  padding-inline: clamp(
    var(--gutter),
    calc((100% - var(--features-card-w)) / 2),
    96px
  );
  padding-block: var(--s-16);
}

/* --- 카드 ----------------------------------------------------------------- */

.features__track > .features__card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--features-card-w);
  aspect-ratio: 178.4 / 228;
  background-color: var(--c-card-surface-active);
  overflow: hidden;
  /* 카드 폭이 곧 안쪽 요소들의 기준 단위(cqw)가 됩니다. */
  container-type: inline-size;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.features__art {
  height: auto;
}

.features__art--safety { width: 58.3cqw; }
.features__art--test   { width: 93.64cqw; }
.features__art--award  { width: 45.4cqw; }

/* 02 — 텍스트 + 인증 뱃지 */

.features__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.32cqw;
  width: 100%;
  text-align: center;
}

.features__line {
  font-size: 7.74cqw;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.features__line-sm {
  font-size: 5.4cqw;
}

.features__art--badge {
  width: 30.87cqw;
}

/* 04 — 별점. "5" 는 이미지가 아니라 텍스트입니다. */

.features__art--rating {
  position: relative;
  width: 88.35cqw;
  /* "5" 를 아트 폭 기준으로 잡기 위한 컨테이너 */
  container-type: inline-size;
}

.features__art--rating img {
  width: 100%;
  height: auto;
}

.features__rating-num {
  position: absolute;
  left: 79.05%;
  top: 57.8%;
  font-family: var(--ff-display);
  font-size: 13.94cqw;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-text-inverse);
}

/* --- PC ------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .features {
    padding-block: var(--s-80) var(--s-96);
  }

  .features::before {
    background-image: radial-gradient(
      42% 34% at 50% 20%,
      var(--c-michelin-blue),
      transparent 72%
    );
  }

  .features__mascot {
    width: min(194px, 24%);
  }

  .features__header {
    margin-top: 0;
  }

  .features__title {
    font-size: 38px;
  }

  .features__subtitle {
    margin-top: var(--s-12);
    font-size: var(--fs-body);
  }

  /* 캐러셀 해제 — 5열 고정 배치 */
  .features__track {
    max-width: calc(948px + var(--gutter) * 2);
    margin-inline: auto;
    margin-top: var(--s-48);
    gap: var(--s-12);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: var(--gutter);
    padding-block: 0;
  }

  .features__track > .features__card {
    flex: 1 1 0;
    min-width: 0;
    transform: none;
    opacity: 1;
  }
}