.customer-center-page .customer-guide {
  padding: 80px var(--spacing-lg);
  background: var(--semantic-white);
}

.customer-center-page .customer-guide__inner {
  gap: 40px;
}

.customer-center-page .customer-guide__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.customer-center-page .customer-guide__title {
  color: var(--neutral-tx1-hero);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-44);
}

.customer-center-page .customer-guide__more {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-base);
  border: var(--stroke-1) solid var(--semantic-border);
  border-radius: var(--radius-sm);
  color: var(--neutral-tx2-title);
  background: var(--semantic-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
}

.customer-center-page .customer-guide__more img {
  width: 10px;
}

.customer-center-page .customer-guide__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 60px;
  column-gap: min(160px, calc((100% - 500px) / 4));
  padding: 0 60px;
}

.customer-center-page .customer-guide__item {
  flex: 0 0 100px;
  gap: var(--spacing-sm);
  color: var(--neutral-tx2-title);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-22);
}

.customer-center-page .customer-guide__icon {
  width: 116px;
}

/*
 * 2026-10-26 Figma 14.Customer Center(607:43444) — 원 100px · 원과 라벨 사이 10px.
 * 아이콘 SVG 는 116×116(원 100 = 8~108, 그 아래 받침 그림자 6px)이라 100px 칸에 넣으면 86px 로 줄었다 —
 * 원래 크기로 그리고 바깥 여백(위 6 · 좌우 8)을 음수 여백으로 걷어 칸 폭 100 을 지킨다.
 */
@media (min-width: 768px) {
  .customer-center-page .customer-guide__item {
    flex: 0 0 auto;
    min-width: 100px;
    gap: 0;
  }

  .customer-center-page .customer-guide__icon {
    width: 116px;
    max-width: none;
    height: 116px;
    margin: -6px -8px 0;
  }
}

@media (max-width: 1024px) {
  .customer-center-page .customer-guide__list {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    column-gap: clamp(0px, calc((100vw - 460px) / 2), 160px);
  }
}

@media (max-width: 767px) {
  .customer-center-page .customer-guide {
    padding: 80px 12px;
  }

  .customer-center-page .customer-guide__title {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-24);
  }

  .customer-center-page .customer-guide__more {
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) var(--spacing-md);
  }

  .customer-center-page .customer-guide__list {
    gap: 28px 10px;
    padding: 0;
  }

  .customer-center-page .customer-guide__item {
    gap: var(--spacing-2xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-20);
  }

  .customer-center-page .customer-guide__icon {
    width: 58px;
  }

  /*
   * 2026-10-26 Figma 360(607:43556) — 위아래 40 · 제목↔목록 24 · 원 50px(SVG 116 → 58, 바깥 여백 위 3 · 좌우 4 걷음)
   * · 원↔라벨 6 · 라벨 14/20 Medium 한 줄 · 3열(간격 10) · 줄 간격 28 → 섹션 420
   */
  .customer-center-page .customer-guide {
    padding: 40px 12px;
  }

  .customer-center-page .customer-guide__inner {
    gap: 24px;
  }

  .customer-center-page .customer-guide__list {
    justify-content: center;
    gap: 28px 10px;
  }

  .customer-center-page .customer-guide__item {
    gap: 1px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .customer-center-page .customer-guide__icon {
    max-width: none;
    height: 58px;
    margin: -3px -4px 0;
  }
}