@charset "UTF-8";
/* =============================================================================
   testimonial-people — "Station B,없섭이 함께 하는 2026 MPE!"
   Figma: 모바일 6350:5020 / PC 6350:5385
   ============================================================================= */

.testimonial-people {
  /* 프로필 사이 세로 구분선이 아이템 위/아래로 삐져나오는 양 */
  --tp-rule-over: 27px;
  --tp-rule-under: 14px;
  /* 프로필 두 개 사이 간격 (구분선이 이 간격 한가운데 놓입니다) */
  --tp-gap: 51px;

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

/* 배경 원형 글로우 (Figma Ellipse 43 — 블러 처리된 파란 원)
   원본은 지름 310px 원 + blur(100). 뷰포트 폭에 따라 늘어나면 안 되므로
   크기를 px로 고정하고 섹션이 잘라냅니다. */
.testimonial-people__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    300px 280px at 50% 62%,
    var(--c-michelin-blue) 0%,
    transparent 100%
  );
  /* 섹션 경계에서 잘린 자국이 보이지 않도록 아래쪽을 부드럽게 지웁니다 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0 46%, transparent 94%);
  opacity: 0.6;
}

.testimonial-people__inner {
  position: relative; /* 글로우 위로 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-40);
  padding-block: var(--s-32) var(--s-24);
}

.testimonial-people__title {
  margin: 0;
  font-weight: var(--fw-extrabold);
  font-size: 30px;
  line-height: var(--lh-snug);
  letter-spacing: -0.6px;
  text-align: center;
  text-transform: uppercase;
}

.testimonial-people__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--tp-gap);
}

.testimonial-people__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-12);
  max-width: 160px;
}

/* 두 사람 사이 세로 그라데이션 구분선 (Figma Vector 920) */
.testimonial-people__item + .testimonial-people__item::before {
  content: "";
  position: absolute;
  top: calc(var(--tp-rule-over) * -1);
  bottom: calc(var(--tp-rule-under) * -1);
  left: calc(var(--tp-gap) / -2);
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.01)
  );
  opacity: 0.3;
}

.testimonial-people__photo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  box-shadow: 0 4px 34px rgba(5, 10, 18, 0.9);
}

.testimonial-people__name {
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.5px;
  text-align: center;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   PC
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .testimonial-people {
    --tp-rule-over: 36px;
    --tp-rule-under: 28px;
    --tp-gap: 103px;
  }

  .testimonial-people__glow {
    background: radial-gradient(
      440px 400px at 50% 62%,
      var(--c-michelin-blue) 0%,
      transparent 100%
    );
  }

  .testimonial-people__inner {
    gap: var(--s-56);
    padding-block: var(--s-64) var(--s-56);
  }

  .testimonial-people__title {
    font-size: 40px;
    letter-spacing: -0.8px;
    text-transform: none;
  }

  .testimonial-people__item {
    gap: var(--s-16);
    max-width: 200px;
  }

  .testimonial-people__photo {
    width: 85px;
    height: 85px;
  }

  .testimonial-people__name {
    font-size: 18px;
    line-height: var(--lh-base);
    letter-spacing: -0.71px;
  }
}