/* ==========================================================================
   WEBDOT Enterprise Design System
   Clay Global 스타일 엔터프라이즈급 디자인 토큰 + 레이아웃 시스템
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (CLAUDE.md Core 토큰 기반)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --wd-primary: #1D74FF;
  --wd-primary-light: #AEC1F5;
  --wd-dark: #191919;
  --wd-dark-section: #141C30;
  --wd-text-primary: #191919;
  --wd-text-secondary: #5A5757;
  --wd-text-muted: #939393;
  --wd-surface-light: #F6F6F6;
  --wd-surface-dark: #191919;
  --wd-border: #D9D9D9;
  --wd-border-on-dark: #5A5757;
  --wd-white: #FFFFFF;

  /* Typography */
  --wd-font-kr: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wd-font-en: 'Wanted Sans Variable', 'Wanted Sans', sans-serif;

  /* Spacing (섹션 간격) */
  --wd-section-xl: 200px;
  --wd-section-lg: 140px;
  --wd-section-md: 120px;
  --wd-section-sm: 100px;
  --wd-section-base: 80px;

  /* Easing */
  --wd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Duration */
  --wd-duration: 0.3s;
  --wd-duration-slow: 0.8s;

  /* Shadow */
  --wd-shadow-dropdown: 0 10px 30px rgba(25, 25, 25, 0.08);
  --wd-shadow-card: 2px 10px 24px rgba(25, 25, 25, 0.16);
}




/* --------------------------------------------------------------------------
   3. 와이드 레이아웃 시스템 (.wd-container)
   기존 .container(1280px max-width)와 독립적으로 운용
   -------------------------------------------------------------------------- */
.wd-container {
  width: 100%;
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .wd-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* --------------------------------------------------------------------------
   4. 타이포그래피 시스템
   Core 스케일: Display 52px → H1 42px → H2 36px → H3 32px → H4 24px
   -------------------------------------------------------------------------- */
/* x1.5 스케일 — Clay 대비 파격적 대형 타이포 */
.wd-display {
  font-family: var(--wd-font-kr);
  font-size: 132px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.wd-h1 {
  font-family: var(--wd-font-kr);
  font-size: 108px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.wd-h2 {
  font-family: var(--wd-font-kr);
  font-size: 84px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.wd-h3 {
  font-family: var(--wd-font-kr);
  font-size: 72px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.wd-h4 {
  font-family: var(--wd-font-kr);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.wd-number {
  font-family: var(--wd-font-en);
  font-size: 70px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wd-text-muted);
}

.wd-body-lg {
  font-family: var(--wd-font-kr);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.wd-body {
  font-family: var(--wd-font-kr);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.wd-body-sm {
  font-family: var(--wd-font-kr);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 영문 라벨 */
.wd-label-en {
  font-family: var(--wd-font-en);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* 영문 폰트 클래스 */
.wd-font-en {
  font-family: var(--wd-font-en);
}

/* 반응형 — 태블릿 (1080px 이하) */
@media (max-width: 1080px) {
  .wd-display { font-size: 72px; }
  .wd-h1 { font-size: 60px; }
  .wd-h2 { font-size: 52px; }
  .wd-h3 { font-size: 44px; }
  .wd-h4 { font-size: 32px; }
  .wd-number { font-size: 72px; }
  .wd-body-lg { font-size: 28px; }
  .wd-body { font-size: 24px; }
  .wd-body-sm { font-size: 20px; }
  .wd-label-en { font-size: 16px; }
}

/* 반응형 — 모바일 (640px 이하) */
@media (max-width: 640px) {
  .wd-display { font-size: 48px; }
  .wd-h1 { font-size: 40px; }
  .wd-h2 { font-size: 36px; }
  .wd-h3 { font-size: 32px; }
  .wd-h4 { font-size: 26px; }
  .wd-number { font-size: 48px; }
  .wd-body-lg { font-size: 20px; }
  .wd-body { font-size: 18px; }
  .wd-body-sm { font-size: 16px; }
  .wd-label-en { font-size: 13px; }
}


/* --------------------------------------------------------------------------
   5. 섹션 간격
   -------------------------------------------------------------------------- */
.wd-section {
  padding-top: var(--wd-section-md);
  padding-bottom: var(--wd-section-md);
}

.wd-section-lg {
  padding-top: var(--wd-section-xl);
  padding-bottom: var(--wd-section-xl);
}

@media (max-width: 1080px) {
  .wd-section {
    padding-top: var(--wd-section-base);
    padding-bottom: var(--wd-section-base);
  }
  .wd-section-lg {
    padding-top: var(--wd-section-md);
    padding-bottom: var(--wd-section-md);
  }
}

@media (max-width: 640px) {
  .wd-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .wd-section-lg {
    padding-top: var(--wd-section-base);
    padding-bottom: var(--wd-section-base);
  }
}


/* --------------------------------------------------------------------------
   6. GSAP 애니메이션 초기 상태 (JS에서 animate)
   -------------------------------------------------------------------------- */
.gsap-fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.gsap-fade-in {
  opacity: 0;
}

.gsap-scale-in {
  opacity: 0;
  transform: scale(1.03);
}

.gsap-clip-reveal {
  clip-path: inset(5% 0 0 0);
  opacity: 0;
}

.gsap-blur-reveal {
  opacity: 0;
  filter: blur(10px);
}


/* --------------------------------------------------------------------------
   7. 사진 캐러셀 (무한 스크롤)
   -------------------------------------------------------------------------- */
.photo-marquee {
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.photo-marquee:active {
  cursor: grabbing;
}

.photo-marquee-track {
  display: flex;
  gap: 16px;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}

.photo-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.photo-marquee-track img {
  height: 350px;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .photo-marquee-track img {
    height: 220px;
  }
}


/* --------------------------------------------------------------------------
   8. 다크/라이트 섹션 패턴
   -------------------------------------------------------------------------- */
.wd-section-dark {
  background-color: var(--wd-dark);
  color: var(--wd-white);
}

.wd-section-light {
  background-color: var(--wd-white);
  color: var(--wd-text-primary);
}


/* --------------------------------------------------------------------------
   9. Testimonial 캐러셀 커스텀
   -------------------------------------------------------------------------- */
.testimonials-swiper .swiper-slide {
  opacity: 0 !important;
  transition: opacity 0.6s var(--wd-ease);
}

.testimonials-swiper .swiper-slide-active {
  opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   10. Client 로고 그리드
   -------------------------------------------------------------------------- */
.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.05);
}

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

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

.client-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background-color: var(--wd-dark);
}

.client-logo-cell img {
  height: 2rem;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%) brightness(2);
  transition: opacity var(--wd-duration) var(--wd-ease);
}

.client-logo-cell:hover img {
  opacity: 0.8;
}