/* ============================================================
   layout.css
   풀스크린 스크롤 스냅, 섹션별 배경, 페이지 도트 인디케이터
   (index.html 의 <style> 블록에서 분리)
   ============================================================ */

/* ══════════════════════════════════════
   풀스크린 스크롤 스냅
══════════════════════════════════════ */
html, body {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.hero,
#about.section,
#services.section,
#skills.section,
#process.section,
.history-section,
#contact.section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* footer는 풀스크린 제외 — contact에 통합되므로 독립 footer 없음 */
.footer {
  scroll-snap-align: none !important;
  min-height: auto !important;
  display: block !important;
}

/* ── Contact + Footer 통합 섹션 ── */
/* contact 섹션을 flex column으로 만들어 footer를 맨 아래에 고정 */
#contact.contact-with-footer {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 콘텐츠 위, footer 아래 */
  padding-top: 80px;
  padding-bottom: 0;              /* footer가 하단을 담당 */
  background:
    radial-gradient(circle at 18% 22%, rgba(85,182,255,0.12), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.06), transparent 28%),
    linear-gradient(180deg, #0a1323 0%, #0d1728 46%, #0a1220 100%);
}

/* contact 콘텐츠 영역은 남은 공간을 채움 */
.contact-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* footer를 섹션 하단에 붙임 */
.footer-inline {
  position: relative;
  z-index: 1;
  width: 100%;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0;
  scroll-snap-align: none !important;
  min-height: auto !important;
}

#contact.contact-with-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 119px,
      rgba(255,255,255,0.035) 119px,
      rgba(255,255,255,0.035) 120px
    );
  opacity: 0.45;
  pointer-events: none;
}

.hero { position: relative; }
.hero .wrap { min-height: 100vh; display: flex; align-items: center; }

#about.section,
#process.section,
.history-section,
#contact.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* services 위아래 여백 넉넉하게 */
#services.section {
  padding-top: 120px;
  padding-bottom: 120px;
}

#skills.section { position: relative; overflow: hidden; }

.section-rule { display: none; }


/* ══════════════════════════════════════
   ABOUT — restrained grid background
══════════════════════════════════════ */
#about.section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f3f6fb 0%, #eef3fa 100%),
    var(--color-page-mid);
}

/* 기존 dot-grid 숨김 */
#about .about-dot-grid { display: none; }

/* 배경 그리드 패턴 */
#about.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      rgba(26,58,255,0.032) 59px,
      rgba(26,58,255,0.032) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(26,58,255,0.032) 59px,
      rgba(26,58,255,0.032) 60px
    );
  background-size: 60px 60px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.32));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.32));
  pointer-events: none;
  z-index: 0;
}

/* 우측의 은은한 표면감 */
#about.section::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(26,58,255,0.075) 0%,
    rgba(10,143,255,0.04) 42%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

/* about 내부 컨텐츠는 z-index 1 이상 */
#about .wrap { position: relative; z-index: 1; }

/* ══════════════════════════════════════
   SERVICES — 패럴랙스 배경
══════════════════════════════════════ */
#services.section {
  position: relative;
  overflow: hidden;
  background: var(--color-page-light);
}

/* 패럴랙스 그라디언트 레이어 (JS로 translateY 제어) */
.services-parallax-bg {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 900px 600px at 80% 30%, rgba(26,58,255,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 600px 800px at 10% 70%, rgba(10,143,255,0.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* 배경 대형 워터마크 텍스트 (JS로 translateY 제어) */
.services-watermark {
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-size: clamp(100px, 18vw, 200px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26,58,255,0.06);
  letter-spacing: -0.05em;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  will-change: transform;
}

/* 세로 라인 패턴 */
.services-bg-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 119px,
      rgba(26,58,255,0.03) 119px,
      rgba(26,58,255,0.03) 120px
    );
}

#services .wrap { position: relative; z-index: 1; }


/* ══════════════════════════════════════
   TECHNOLOGY — 배경 동영상 슬로우
══════════════════════════════════════ */
.skills-video-bg video {
  transform: scale(1.08);
  transform-origin: center center;
}


/* ══════════════════════════════════════
   PROCESS — 기하 배경
══════════════════════════════════════ */
#process.section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #111a2b 0%, #0b1220 100%),
    var(--color-page-dark-soft);
}

.process-geo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 큰 원 링 두 개 */
.process-geo-bg::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.035);
  top: 54%;
  left: -230px;
  transform: translateY(-50%);
}
.process-geo-bg::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
  top: 54%;
  left: -110px;
  transform: translateY(-50%);
}

/* 가로 스트라이프 (매우 흐릿) */
.process-stripe {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(255,255,255,0.012) 39px,
      rgba(255,255,255,0.012) 40px
    );
  pointer-events: none;
  z-index: 0;
}

/* 우측 블루 글로우 */
.process-glow {
  position: absolute;
  right: -160px;
  top: 42%;
  transform: translateY(-50%);
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(26,58,255,0.14) 0%,
    rgba(10,143,255,0.06) 36%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

#process .wrap { position: relative; z-index: 1; }

/* process 섹션 텍스트 색상 오버라이드 */
#process .section-label { color: rgba(255,255,255,0.5); }
#process .section-title  { color: #fff; }


/* ══════════════════════════════════════
   HISTORY — 깔끔한 라인 배경
══════════════════════════════════════ */
.history-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f2f5f9 0%, #edf2f8 100%),
    var(--color-page-mid);
}
.history-section.section-gray {
  background:
    linear-gradient(180deg, #f2f5f9 0%, #edf2f8 100%),
    var(--color-page-mid);
}

.history-bg-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 119px,
      rgba(15,23,42,0.032) 119px,
      rgba(15,23,42,0.032) 120px
    );
}

.history-bg-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.10), transparent);
}

.history-section .wrap { position: relative; z-index: 1; }


/* ══════════════════════════════════════
   페이지 인디케이터 도트
══════════════════════════════════════ */
.page-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #111;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.page-dot.active {
  background: #111;
  border-color: #fff;
  transform: scale(1.4);
}


/* ══════════════════════════════════════
   모바일: 스냅 해제 (콘텐츠가 잘리지 않게)
══════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { scroll-snap-type: none; }
  .nav { display: none; }

  .hero,
  #about.section,
  #services.section,
  #skills.section,
  #process.section,
  .history-section,
  #contact.section {
    min-height: auto;
    scroll-snap-align: none;
  }

  .hero .wrap { min-height: auto; }
  .page-dots  { display: none; }
  .services-watermark { display: none; }
}