/* =============================================================================
   LE LABO · layout/site-shell.css
   - 메인(index) 전용 site-* 셸 시스템 + data-scroll-reveal 애니메이션
   - 구 css/common.css 의 추가 규칙과 css/responsive.css 의 site-* 미디어쿼리를 통합
   - 의존성: base/reset.css, layout/common.css, layout/page-shell.css 가 먼저 로드되어 있어야 함
   ============================================================================= */

/* --- Shell (1920 프레임 / 1440 콘텐츠) ------------------------------------ */
#wrap {
  max-width: 1920px;
  margin-inline: auto;
}

.site-shell .container,
#wrap .container {
  max-width: 1440px;
  margin-inline: auto;
}

/* --- Section 시스템: section > .container > .content ---------------------- */
.site-section > .container > .content {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  width: 100%;
  min-width: 0;
}

/* group: image_box / text_box / button_box 를 묶는 flex 행 (기본 가로) */
.site-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  min-width: 0;
}

.site-group--stack {
  flex-direction: column;
}

.site-image-box {
  flex: 0 1 auto;
  min-width: 0;
}

.site-text-box {
  flex: 1 1 min(100%, 28rem);
  min-width: 0;
}

.site-button-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12, 12px);
  align-items: center;
}

/* 헤더 스택: layout/common.css 의 .header.site-header 참고 (sticky 덮어쓰기 금지) */

/* 선택: 섹션에 data-scroll-reveal 주면 animation.js가 .is-revealed 부여 */
[data-scroll-reveal] {
  opacity: 1;
  transform: translateY(14px);
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-scroll-reveal].is-revealed {
  transform: none;
}

/* 블록 단위 스태거(자식 opacity는 부모와 독립 — reduced-motion 대응 용이) */
[data-scroll-reveal] > .container > .content > *,
[data-scroll-reveal].hero-section > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-d, 0ms),
    transform 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-d, 0ms);
}

[data-scroll-reveal].is-revealed > .container > .content > *,
[data-scroll-reveal].hero-section.is-revealed > * {
  opacity: 1;
  transform: none;
}

[data-scroll-reveal]:not(.is-revealed) > .container > .content,
[data-scroll-reveal]:not(.is-revealed).hero-section > * {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] {
    transform: none;
    transition: none;
  }

  [data-scroll-reveal] > .container > .content > *,
  [data-scroll-reveal].hero-section > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-scroll-reveal]:not(.is-revealed) > .container > .content,
  [data-scroll-reveal]:not(.is-revealed).hero-section > * {
    pointer-events: auto;
  }
}

/* 스크립트 미지원(또는 완전 비활성): 리빌 없이도 본문·클릭 가능 */
@media (scripting: none) {
  [data-scroll-reveal] {
    transform: none;
    transition: none;
  }

  [data-scroll-reveal] > .container > .content > *,
  [data-scroll-reveal].hero-section > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-scroll-reveal]:not(.is-revealed) > .container > .content,
  [data-scroll-reveal]:not(.is-revealed).hero-section > * {
    pointer-events: auto;
  }
}

/* --- Responsive (site-* 보정) -------------------------------------------- */
@media (max-width: 1440px) {
  .site-group {
    gap: clamp(16px, 2.5vw, 32px);
  }
}

@media (max-width: 1024px) {
  .site-section > .container > .content {
    gap: clamp(24px, 4vw, 40px);
  }
}

@media (max-width: 768px) {
  .site-group {
    flex-direction: column;
    align-items: stretch;
  }

  .site-image-box,
  .site-text-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .site-button-box {
    flex-direction: column;
    align-items: stretch;
  }

  .site-button-box > .btn,
  .site-button-box > a.btn {
    width: 100%;
    justify-content: center;
  }
}