@charset "UTF-8";
/* =============================================================================
   testimonial-media — "미디어/유튜브에 소개된 2025 MPE 스토리"
   Figma: 모바일 6350:5032 / PC 6350:5412
   ============================================================================= */

.testimonial-media {
  --tm-divider: var(--c-line-inverse-subtle);

  background-color: var(--c-bg-inverse);
  color: var(--c-text-inverse);
  overflow: hidden; /* 배경 글로우가 가로 스크롤을 만들지 않도록 */
}

/* 배경 원형 글로우 (Figma Ellipse 43 — 블러 처리된 파란 원)
   원본은 지름 458px 원 + blur(100). 뷰포트 폭에 따라 늘어나면 안 되므로
   크기를 px로 고정하고 섹션이 잘라냅니다. */
.testimonial-media__glow {
  position: absolute;
  top: 33px;
  left: calc(50% - 13.5px);
  width: 916px;
  height: 916px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    circle closest-side at 50% 58%,
    var(--c-michelin-blue) 0%,
    transparent 100%
  );
  opacity: 0.6;
}

.testimonial-media__inner {
  position: relative; /* 글로우 위로 */
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding-block: var(--s-56) var(--s-48);
}

.testimonial-media__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}

.testimonial-media__title {
  margin: 0;
  font-weight: var(--fw-extrabold);
  font-size: 30px;
  line-height: var(--lh-snug);
  letter-spacing: -0.6px;
}

.testimonial-media__lead {
  color: var(--c-text-inverse-muted);
  font-size: 14px;
  line-height: 1.5;
}

.testimonial-media__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 490px;
  margin-inline: auto;
}

.testimonial-media__item + .testimonial-media__item {
  margin-top: var(--s-4);
  border-top: 1px solid var(--tm-divider);
}

.testimonial-media__link {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-16) var(--s-4) var(--s-16) var(--s-8);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.testimonial-media__link:hover {
  opacity: 0.7;
}

.testimonial-media__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--s-4);
  justify-content: center;
  min-width: 0; /* text-overflow 가 동작하려면 필요 */
}

.testimonial-media__source {
  color: rgba(255, 255, 255, 0.3);
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-media__headline {
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-media__badge {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.3);
}

/* -----------------------------------------------------------------------------
   PC
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .testimonial-media__glow {
    top: -209px;
    left: 50%;
    width: 1572px;
    height: 1572px;
  }

  .testimonial-media__inner {
    gap: var(--s-32);
    padding-block: var(--s-80) 100px;
  }

  .testimonial-media__head {
    gap: var(--s-8);
  }

  .testimonial-media__title {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .testimonial-media__lead {
    font-size: 16px;
    line-height: var(--lh-relaxed);
  }

  .testimonial-media__item + .testimonial-media__item {
    margin-top: var(--s-12);
  }
}