/* ---------- Company 페이지 ----------
   컬러/폰트는 style.css의 공용 토큰을 재사용. GNB는 style.css에 정의된 것을
   그대로 쓰고, footer는 이 페이지만 라이트 테마라 새로 만든다. */

/* 이 페이지는 검정 클라이언트 섹션 아래가 흰색 footer로 이어지므로, body 기본
   배경(검정)을 흰색으로 덮어 모서리 리빌 시 흰색이 자연스럽게 드러나게 한다. */
.company-page {
  background: var(--color-white);
}

/* ---------- 스크롤 진입 시 한 번 떠오르며 페이드인(footer와 동일 모션) ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Section 1: 인트로 문단 ---------- */
.company-intro {
  background: var(--color-beige);
  padding: 160px 24px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.company-intro__block {
  max-width: 640px;
}

.company-intro__block + .company-intro__block {
  margin-top: 29px;
}

.company-intro__title {
  color: var(--color-point);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.8;
}

.company-intro__desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-black);
}

/* ---------- Section 2: Creative with us. + 클라이언트 로고 ----------
   footer-lead: 스크롤로 footer(흰색)에 다가갈수록 하단 모서리가 0 → 64px로
   둥글게 열리며 흰 footer로 자연스럽게 이어진다(다른 페이지와 동일한 연출). */
.company-clients {
  background: var(--color-black);
  color: var(--color-white);
  padding: 140px 24px 120px;
  text-align: center;
  overflow: hidden;
}

.company-clients__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
}

.company-clients__accent {
  color: var(--color-point);
}

.company-clients__grid {
  max-width: 880px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
  place-items: center;
}

.company-clients__logo {
  max-width: 280px;
  max-height: 72px;
}

/* Mercedes-Benz는 기본 크기(280x72)의 1.5배 */
.company-clients__logo--lg {
  max-width: 420px;
  max-height: 108px;
}

/* VOLVO는 크기 조정 제외, 원래 크기 유지 */
.company-clients__logo--sm {
  max-width: 140px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.company-clients__logo:hover {
  opacity: 1;
}

/* ---------- Footer (라이트 테마 신규 제작) ----------
   검정 footer(style.css .footer)와 별개 컴포넌트. 배경 흰색, 로고/텍스트는
   어두운 색 그대로(반전 필터 없음). 화면에 들어오면 로고/텍스트가 아래에서
   떠오르며 페이드인되는 모션은 검정 footer와 동일하게 맞춘다. */
.company-footer-wrap {
  position: relative;
  z-index: 0;
  flex: 1 0 auto;
  background: var(--color-white);
}

.company-footer {
  height: 100%;
  background: var(--color-white);
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 70px 40px 32px;
}

.company-footer__logo {
  height: 44px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.company-footer__bottom {
  align-self: stretch;
  margin-top: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-black);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.company-footer__bottom a {
  color: var(--color-black);
  font-weight: 700;
}

.company-footer__bottom p {
  color: #6b6b6b;
}

.company-footer-wrap.is-visible .company-footer__logo,
.company-footer-wrap.is-visible .company-footer__bottom {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
  .company-intro { padding: 120px 24px 100px; }
  .company-intro__block + .company-intro__block { margin-top: 29px; }
  .company-clients { padding: 100px 24px 90px; }
  .company-clients__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; margin-top: 56px; }
  .company-footer { padding: 50px 24px 20px; }
  .company-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 70px; }
}

@media (max-width: 480px) {
  .company-intro { padding: 96px 20px 80px; }
  .company-intro__title { font-size: clamp(1.1rem, 5vw, 1.3rem); }
  .company-intro__desc { font-size: 14px; }
  .company-intro__block + .company-intro__block { margin-top: 25px; }

  .company-clients { padding: 80px 20px 72px; }
  .company-clients__title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .company-clients__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }

  .company-footer { padding: 40px 20px 16px; }
  .company-footer__logo { height: 36px; }
  .company-footer__bottom { margin-top: 40px; }
}