/* ============================================================
   서비스 (service.html) — Figma 서비스 섹션 (151:26929)
   서비스1 / 서비스2 / 서비스3 / 서비스4(+4.1) / 서비스5
   ============================================================ */

/* ---------------- 서비스 1 — 표지 ----------------
   표지는 화면 높이에 정확히 맞는다(.sf-pin 높이 = --vhz).
   사진은 미리 가로로 돌려 둔 파일(sv-hero-w.jpg)을 object-fit:cover로 깔아
   화면 비율이 어떻든 여백 없이 꽉 찬다. */
.sv-hero { height: 1024px; background: #000; }
.sv-hero-ph { position: absolute; inset: 0; overflow: hidden; }
.sv-hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.sv-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5.957%, #000 113.43%);
}
/* 헤드라인+부제는 한 덩어리로 세로 중앙 정렬 (Figma 기준 중앙에서 31px 아래) */
.sv-hero-txt {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 31px;
  display: flex; flex-direction: column; align-items: center; gap: 60.8px;
  z-index: 5;
}
.sv-hero-h {
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: 1.2;
  color: #fff; text-align: center; white-space: nowrap;
  text-shadow: 0 0 24px rgba(0, 0, 0, .48);
}
.sv-hero-d {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 27px; line-height: normal;
  color: #fff; opacity: .8; text-align: center; white-space: nowrap;
}

/* ---------------- 서비스 2 — 같은 엔진 ---------------- */
.sv-engine { height: 1024px; background: #000; }
.sv-eng-col { position: absolute; top: 411px; width: 640px; height: 722px; }
.sv-eng-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; max-width: none; }
.sv-eng-col .fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 42.664%);
}
.sv-eng-col.c1 { left: 0; }
.sv-eng-col.c2 { left: 640px; }
.sv-eng-col.c3 { left: 1280px; }
.sv-eng-h {
  position: absolute;
  left: calc(50% + 0.5px); top: 214px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: 1.2;
  color: #fff; text-align: center; white-space: nowrap;
  z-index: 5;
}
.sv-eng-card {
  position: absolute;
  top: 486px;
  width: 312px; height: 220px;
  padding: 40px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  z-index: 5;
}
.sv-eng-card.k1 { left: 156px; }
.sv-eng-card.k2 { left: 804px; }
.sv-eng-card.k3 { left: 1452px; }
.sv-eng-card .n {
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 40px; line-height: normal;
  color: #fff; white-space: nowrap;
}
.sv-eng-card .l {
  width: 227px;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 18px; line-height: normal;
  color: rgba(255, 255, 255, .6); text-align: center;
}

/* ---------------- 서비스 3 — 서비스 4종 ---------------- */
/* 상세 텍스트와 콘텐츠 사이 120px (대표 지시) — 콘텐츠 전체를 47px 내리고 프레임도 그만큼 키웠다 */
.sv-list { height: 2177px; background: #000; }
.sv-list-h {
  position: absolute;
  left: 276px; top: 211px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: 1.2;
  color: #fff; white-space: nowrap;
}
.sv-list-d {
  position: absolute;
  left: 549px; top: 358px;
  transform: translateX(-50%);
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 32px;
  color: rgba(255, 255, 255, .6); text-align: center; white-space: nowrap;
}
/* 영문은 한 줄이 길어 왼쪽 여백을 침범한다 — 제목 오른쪽 끝(739px)에 맞춰
   우측정렬 2줄로 (대표 지시). 데스크톱 전용 — 모바일은 subpage-mobile.css 배치 유지 */
@media (min-width: 901px) {
  html[lang="en"] .sv-list-d {
    left: auto; right: 1181px;   /* 1920 - 739 */
    transform: none;
    text-align: right; white-space: normal;
  }
  html[lang="en"] .sv-list-d .m-br { display: inline; }
}
.sv-shot { position: absolute; width: 680px; height: 368px; overflow: hidden; }
.sv-shot img { width: 100%; height: 100%; object-fit: cover; }
.sv-shot.s1 { left: 280px; top: 510px; }
.sv-shot.s2 { left: 960px; top: 878px; }
.sv-shot.s3 { left: 280px; top: 1246px; }
.sv-shot.s4 { left: 960px; top: 1614px; }
.sv-item {
  position: absolute;
  width: 630px;
  display: flex; flex-direction: column; gap: 25px;
}
.sv-item h3 {
  margin: 0;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 46px; line-height: normal;
  color: #fff;
}
.sv-item p {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 32px;
  color: rgba(255, 255, 255, .7);
}
.sv-item.i1 { left: 1010px; top: 649px; align-items: flex-start; }
/* CARLOG 문단은 EUMM 사진과의 간격이 EUMM 문단↔SHUTTLE MATE 사진 간격(51px)과 같도록 32px 위로 (대표 지시) */
.sv-item.i2 { left: 280px;  top: 1017px; align-items: flex-end; text-align: right; }
.sv-item.i3 { left: 1010px; top: 1417px; align-items: flex-start; }
.sv-item.i4 { left: 280px;  top: 1785px; align-items: flex-end; text-align: right; }
.sv-item.i2 h3, .sv-item.i2 p,
.sv-item.i4 h3, .sv-item.i4 p { width: 100%; text-align: right; }

/* ---------------- 서비스 4 — 도입 절차 ---------------- */
.sv-steps { height: 1024px; background: #000; }
.sv-steps-track {
  position: absolute;
  left: 659px; top: 191px;
  height: 730px;
  display: flex; align-items: center; gap: 16px;
  transition: transform .55s cubic-bezier(.22, .68, .24, 1);
  will-change: transform;
}
/* 본문은 흐름 배치(justify-end + pb 80) — Figma와 동일하게 아래에서 쌓인다 */
.sv-step {
  position: relative;
  width: 352px; height: 730px;
  flex-shrink: 0;
  overflow: hidden;
  background: #3a3a3a;
  cursor: pointer;
  outline: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 41px 80px;
}
.sv-step .ph { position: absolute; inset: 0; overflow: hidden; }
.sv-step .ph img { position: absolute; max-width: none; }
/* Figma의 카드별 사진 배치(카드 폭·높이 대비 %) */
.sv-step.k1 .ph img { left: -4.73%; top: -4.29%; width: 139.12%; height: 119.24%; }
.sv-step.k2 .ph img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-step.k3 .ph img { left: -44.25%; top: 0; width: 311.04%; height: 100%; }
.sv-step.k4 .ph img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* 선택 시 파란 틴트 (Figma 서비스4.1) */
.sv-step .tint {
  position: absolute; inset: 0;
  background: rgba(0, 68, 195, .8);
  opacity: 0;
  transition: opacity .3s ease;
}
.sv-step.is-on .tint { opacity: 1; }
/* 강조된 카드는 Figma 서비스4.1처럼 어두운 글로우 없이 파란 면만 남는다 */
.sv-step.is-on .glow { opacity: 0; }
.sv-step .glow { position: absolute; max-width: none; pointer-events: none; transition: opacity .3s ease; }
.sv-step.k1 .glow { left: -180px; top: 249px; width: 820px; height: 744px; }
.sv-step.k2 .glow { left: -209px; top: 241px; width: 820px; height: 744px; }
.sv-step.k3 .glow { left: -159px; top: 262px; width: 820px; height: 776px; }
.sv-step .no {
  position: absolute;
  left: 41px; top: 404px;
  width: 270px;
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 72px; line-height: normal;
  letter-spacing: -2.88px;
  color: #fff;
  z-index: 3;
}
.sv-step .tx {
  position: relative;
  width: 270px;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  color: #fff;
  z-index: 3;
}
.sv-step .tx h3 {
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 32px; line-height: normal;
}
.sv-step .tx p {
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 20px; line-height: normal;
  opacity: .7;
}
.sv-steps-mask {
  position: absolute;
  left: 280px; top: 0;
  width: 440px; height: 1029px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000 72.596%);
  z-index: 10;
  pointer-events: none;
}
.sv-steps-h {
  position: absolute;
  left: 280px; top: 191px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; white-space: nowrap;
  z-index: 12;
}
.sv-steps-d {
  position: absolute;
  left: 280px; top: 343px;
  width: 414px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 32px;
  color: rgba(255, 255, 255, .6);
  z-index: 12;
}

/* ---------------- 서비스 5 — CTA ---------------- */
.sv-cta { height: 1024px; background: #000; }
.sv-glow { position: absolute; max-width: none; transform: rotate(180deg); pointer-events: none; }
.sv-glow.g1 { left: -536px; top: -828px; width: 3163px; height: 1931px; }
.sv-glow.g2 { left: -236px; top: -530px; width: 2563px; height: 794px; }
.sv-cta-h {
  position: absolute;
  left: 50%; top: 341px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
  z-index: 5;
}
.sv-cta-d {
  position: absolute;
  left: calc(50% - 0.5px); top: 432px;
  transform: translateX(-50%);
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 28px; line-height: normal;
  color: #fff; opacity: .6; text-align: center; white-space: nowrap;
  z-index: 5;
}
.sv-cta-btns {
  position: absolute;
  left: 50%; top: 541px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  z-index: 5;
}
/* 글자 24 → 18px, 버튼도 같은 비율(0.75)로 줄이고 모서리 5px (대표 지시) */
.sv-cta-btns .btn {
  width: 165px;
  padding: 10.5px 30px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-size: 18px; line-height: 1.4;
  text-decoration: none; white-space: nowrap;
}
.sv-cta-btns .btn.white { background: #fff; color: #000; font-weight: 600; }
.sv-cta-btns .btn.blue { background: var(--blue); color: #fff; font-weight: 500; }