/* === layout.css ===
   레이아웃: 그리드, 섹션 구조, 공통 패턴
========================================= */

/* --- 스크롤 리빌 (아래→위 페이드업) ---
   transform이 아닌 translate 속성을 써서, 카드류의 :hover transform(리프트 효과)과 충돌하지 않도록 한다. */

.reveal {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 0.7s var(--transition-slow), translate 0.7s var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }
.reveal--delay-4 { transition-delay: 480ms; }

/* 모션 감소를 선호하면 등장 애니메이션 없이 즉시 표시한다.
   JS가 .is-visible을 못 붙이는 상황에서도 콘텐츠가 숨겨지지 않도록 .reveal 자체를 노출시킨다. */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    translate: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* --- 공통 그리드 패턴 --- */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- 2열 콘텐츠 레이아웃 --- */

.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.split-layout__content,
.split-layout__media {
  min-width: 0;
}

@media (min-width: 1024px) {
  .split-layout {
    grid-template-columns: 1fr 1fr;
  }

  .split-layout--reverse .split-layout__media {
    order: -1;
  }
}

/* --- 문의 폼 레이아웃 --- */

.contact__form {
  max-width: 36rem;
  margin: 0 auto;
}

/* --- 워크플로우 그리드 --- */

.workflow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .workflow__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .workflow__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --- 통계(협업 파트너) 그리드 --- */

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 푸터 하단 2단 레이아웃 --- */

.footer__bottom--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .footer__bottom--split {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- 스킵 내비게이션 (접근성) --- */

.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}

.skip-nav:focus {
  top: 0;
}