@charset "UTF-8";
/* =============================================================================
   pillars — 네 가지 핵심 가치
   모바일: 가로 스크롤 캐러셀 (카드 1장 + 다음 장 살짝 노출)
   PC(1024+): 스크롤을 끄고 4열 정적 배치
   ============================================================================= */

.pillars {
  /* 캐러셀 카드 폭. 트랙 좌우 패딩 계산에도 쓰입니다. */
  --pillars-card-w: min(302px, 78vw);
  --pillars-card-gap: var(--s-16);

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

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

.pillars__track {
  gap: var(--pillars-card-gap);
  /* 첫/마지막 카드가 화면 가장자리에 붙지 않도록.
     좁은 화면에서는 카드가 가운데에 오도록 여백을 키우되 48px 을 넘기지 않습니다. */
  padding-inline: clamp(
    var(--gutter),
    calc((100% - var(--pillars-card-w)) / 2),
    48px
  );
  padding-block: var(--s-4);
}

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

.pillars__track > .pillars__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  flex: 0 0 var(--pillars-card-w);
  background-color: var(--c-card-surface);
}

.pillars__image {
  width: 100%;
  aspect-ratio: 302 / 202;
  object-fit: cover;
}

/* 세로 사진(03)은 중앙보다 살짝 위를 잡아야 로고·타이어가 함께 들어옵니다. */
.pillars__image--tall {
  object-position: center 32%;
}

.pillars__body {
  padding: var(--s-24);
}

.pillars__num {
  margin-bottom: var(--s-12);
  color: var(--c-michelin-yellow);
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

.pillars__title {
  margin-bottom: var(--s-8);
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-text-inverse);
}

.pillars__desc {
  color: var(--c-text-inverse-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

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

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

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

  .pillars__track > .pillars__card {
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
  }

  .pillars__image {
    aspect-ratio: 252 / 161.686;
  }

  .pillars__body {
    padding: var(--s-16) var(--s-16) var(--s-24);
  }

  .pillars__num {
    margin-bottom: 3px;
    font-size: var(--fs-body-sm);
  }

  .pillars__title {
    font-size: var(--fs-body);
  }

  .pillars__desc {
    font-size: 13px;
    letter-spacing: -0.02em;
  }
}