/* ---------- Service 페이지 ----------
   컬러/폰트는 style.css의 공용 토큰을 재사용. GNB/footer는 style.css에 정의된
   것을 그대로 쓰고, 이 파일에는 이 페이지 전용 요소만 추가한다. */

.service-page {
  background: var(--color-white);
}

/* .service-content 하단 모서리가 라운드로 깎일 때 그 뒤로 검정이 바로 비치도록,
   footer-wrap 자체를 옮기지 않고 가상요소로 검정 배경판만 라운드 최대값(64px)
   만큼 위로 뻗어 나오게 한다. footer-wrap을 직접 옮기면(margin/top) 로고·텍스트
   위치가 다른 페이지보다 밀려 보이는 문제가 있었는데, 이 방식은 footer 내부
   레이아웃(padding 70px 등)을 그대로 둔 채 배경만 겹치므로 위치가 그대로 유지된다. */
.service-page + .footer-wrap {
  position: relative;
  z-index: 0;
}

.service-page + .footer-wrap::before {
  content: "";
  position: absolute;
  top: -64px;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--color-black);
  z-index: -1;
}

/* ---------- Hero: 영상 + 흐트러진 단어들 ----------
   원래 위치(고정 GNB 바로 아래)에서 여백을 두고 시작하되, top: 0으로 sticky를
   걸어 일반 콘텐츠처럼 자연스럽게 스크롤되다가 화면 맨 위(y=0)에 닿는 순간부터
   그 자리에 고정된다. 뒤이어 오는 .service-content(흰 배경)가 그 위로 슬라이드
   하며 덮고 지나간다(커튼처럼). */
.service-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: clamp(320px, 42vw, 560px);
  margin-top: 84px; /* 고정 GNB 높이만큼 확보 */
  overflow: hidden;
  background: var(--color-black);
}

/* hero를 덮으며 지나가는 실제 콘텐츠 블록. footer 진입부 모서리 radius는
   여기(footer-lead)에 적용된다 — 단, hero를 덮는 상단 모서리는 요청에 따라 직각 유지. */
.service-content {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  overflow: hidden;
}

.service-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-hero__words {
  position: absolute;
  inset: 0;
}

.sw {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--color-point);
  font-weight: 700;
  white-space: nowrap;
}

.sw--xs { font-size: 13px; font-weight: 500; opacity: 0.85; }
.sw--sm { font-size: 17px; font-weight: 500; opacity: 0.9; }
.sw--md { font-size: 22px; font-weight: 700; }
.sw--lg { font-size: 30px; font-weight: 700; }
.sw--xl { font-size: 38px; font-weight: 800; }

/* ---------- 공통: 섹션 타이틀 ---------- */
.service-intro__title,
.service-process__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
}

.service-intro__accent,
.service-process__accent {
  color: var(--color-point);
}

/* ---------- Section 2: Understand you. ---------- */
.service-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 40px 100px;
}

.service-intro__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.service-intro__index {
  color: var(--color-point);
  font-weight: 700;
  font-size: 14px;
}

.service-intro__heading {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.service-intro__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b6b6b;
}

/* ---------- Section 3: Produce you. ---------- */
.service-process {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 140px;
}

.service-process__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}

.process-step__name {
  font-size: 17px;
  font-weight: 700;
}

/* 기본값: 밑줄+화살표 전부 안 보임. hover 시 clip-path가 오른쪽에서 열리면서
   밑줄과 화살표가 하나의 덩어리로 좌→우로 "그려지듯" 함께 나타난다. */
.process-step__line {
  position: relative;
  display: block;
  margin-top: 20px;
  width: 100%;
  max-width: 212px; /* "File Preparation & Delivery" 텍스트 폭에 맞춤 */
  height: 16px;
}

.process-step__arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-black);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
}

.process-step:hover .process-step__arrow {
  clip-path: inset(0 0 0 0);
}

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
  .service-hero { margin-top: 68px; }
  .service-intro { padding: 88px 24px 72px; }
  .service-intro__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .service-process { padding: 24px 24px 100px; }
  .service-process__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}

@media (max-width: 480px) {
  .service-hero { height: clamp(240px, 60vw, 360px); margin-top: 56px; }
  .sw--xl { font-size: 26px; }
  .sw--lg { font-size: 20px; }
  .sw--md { font-size: 16px; }
  .sw--sm { font-size: 13px; }
  .sw--xs { font-size: 11px; }

  .service-intro { padding: 72px 20px 56px; }
  .service-intro__title, .service-process__title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .service-intro__grid { grid-template-columns: 1fr; gap: 32px; }

  .service-process { padding: 16px 20px 80px; }
  .service-process__grid { grid-template-columns: 1fr; gap: 32px; }
}