/* ═══════════════════════════════════════════════════════════
   svc-theme.css — service/index.html 전용 다픽 연보라 테마
   · 모든 규칙은 .svc-page 스코프로만 작성 (전역/타 페이지 오염 금지)
   · common/header.css 는 무수정. 이 파일을 페이지 CSS 로드 순서의
     가장 마지막에 두어 .svc-page .gnb 셀렉터로만 override 한다.
   · Phase 1: 연보라 변수 골격 + .gnb 네비 톤 + BRAND/SERVICE 토글 이식
   · Phase 2(예정): 본문 섹션 연보라 톤 전환 + 블랙 배경 해소
═══════════════════════════════════════════════════════════ */

/* ── 연보라 변수 (다픽 로고 dapicklogo.png 실측 확정값 — 임의 변경 금지) ── */
.svc-page {
  --svc-purple: #762ae4;        /* 다픽 로고 주조색 */
  --svc-purple-deep: #5e22b6;   /* hover/강조 */
  --svc-purple-light: #eadffb;  /* 연보라 섹션 배경 (Phase 2) */
  --svc-purple-faint: #f1eafc;  /* 연보라 보조 배경/보더 */
  --svc-accent: #fbc81d;        /* 로고 체크마크 옐로 [확정필요] 포인트 사용 여부 — 정의만, 사용 금지 */
  --svc-bg: #ffffff;
  --svc-text: #2b2b33;

  /* header.css 가 var(--transition) 참조 — service 페이지는 common/style.css 미로드라
     스코프 한정으로 정의(전역 오염 아님). */
  --transition: 0.25s ease;
}

/* ── GNB: 기존 .nav 와 동일한 고정 박스(공지바 아래, 64px)로 배치 → 레이아웃 무회귀 ── */
.svc-page .gnb {
  position: fixed;
  top: var(--notice-h);
  left: 0;
  right: 0;
  background: var(--svc-bg);
  border-bottom: 1px solid var(--svc-purple-faint);
}
.svc-page .gnb__inner {
  padding: 0 24px; /* 메인(phase3.css)과 동일 좌우 여백 */
}
/* 메뉴 hover/active → 연보라 (header.css 의 골드 override) */
.svc-page .gnb__link:hover,
.svc-page .gnb__link.is-active {
  color: var(--svc-purple-deep);
  border-bottom-color: var(--svc-purple);
}

/* ── BRAND ↔ SERVICE 토글 ──
   원본 스타일은 phase3.css(인덱스 전용·footer-bar/store 등 다수 포함)에 있어
   통째 로드 시 누출 위험. 토글 컴포넌트만 .svc-page 스코프로 이식 + 연보라 테마. */
.svc-page .brand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--svc-purple-faint);
  border-radius: 999px;
}
.svc-page .brand-toggle__opt {
  font-family: var(--font-en, 'Bebas Neue', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--svc-text);
  padding: 7px 16px;
  border-radius: 999px;
  line-height: 1;
  transition:
    background var(--transition),
    color var(--transition);
}
.svc-page .brand-toggle__opt.is-active {
  background: var(--svc-purple);
  color: #fff;
}
.svc-page .brand-toggle__opt:not(.is-active):hover {
  color: var(--svc-purple-deep);
}

/* ══ 반응형 ══ */
@media (max-width: 900px) {
  .svc-page .gnb__inner {
    padding: 0 16px;
  }
  /* 토글은 모바일에서도 노출 — BRAND/SERVICE 전환 경로 유지 */
  .svc-page .gnb__right {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
}
@media (max-width: 640px) {
  /* 공지바가 모바일에서 ~32px로 축소 → gnb 를 그 아래로,
     카테고리 탭(.service-nav)은 공지(32)+gnb(64) 아래로 보정 */
  .svc-page .gnb {
    top: 32px;
  }
  .svc-page .service-nav {
    top: 96px;
  }
}
@media (max-width: 480px) {
  .svc-page .brand-toggle__opt {
    font-size: 0.72rem;
    padding: 7px 11px;
    letter-spacing: 0.5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Phase 2 — 본문 화이트 + 연보라 전면 전환
   · service.css 의 다크 팔레트 변수(--black*/--white/--gray*)를
     .svc-page 스코프에서 라이트/연보라로 재매핑 → var 기반 규칙 일괄 반전.
   · 공유 header.css 가 --black/--white 를 헤더 텍스트/배경에 쓰므로
     .svc-page .gnb 에서 원래 의미로 재선언(헤더 무파손).
   · 리터럴 다크/보라버튼 텍스트 등 var 로 안 잡히는 곳만 개별 보정.
═══════════════════════════════════════════════════════════ */
.svc-page {
  --black: #ffffff; /* 구버전 페이지/표면 배경 → 화이트 */
  --black2: #faf8ff; /* 보조 표면(메인 비주얼/썸네일) */
  --black3: var(--svc-purple-faint); /* 탭바/카드 표면 */
  --black4: var(--svc-purple-light);
  --white: var(--svc-text); /* 구버전 화이트 텍스트 → 다크 텍스트 */
  --gray1: var(--svc-text);
  --gray2: #54545f; /* 연보라 배경 위 대비 4.5:1+ 확보 */
  --gray3: #5f5f6a; /* 연보라 배경 위 대비 4.5:1+ 확보 */

  background: var(--svc-bg);
  color: var(--svc-text);
}

/* 헤더는 공유 header.css 의 --black/--white 의미 유지 (다크 텍스트 / 화이트 배경) */
.svc-page .gnb {
  --black: #2b2b33; /* gnb 메뉴 텍스트·햄버거 라인 = 다크 */
  --white: #ffffff; /* gnb 배경 = 화이트 */
}

/* 인트로 커튼이 열릴 때 검정 대신 화이트 본문이 드러나도록(플래시 차단 안전망) */
html.intro-active .svc-page {
  background: var(--svc-bg);
}

/* HERO — 리터럴 다크 텍스트 보정 */
.svc-page .hero__title {
  color: var(--svc-text);
}

/* 메인 비주얼/썸네일 — 리터럴 다크 배경 보정 */
.svc-page .svc-main__inner {
  background: linear-gradient(160deg, var(--svc-purple-faint) 0%, #ffffff 70%);
}
.svc-page .svc-main__inner.has-img,
.svc-page .svc-thumb__img-wrap {
  background: var(--svc-purple-light);
}

/* 보라 버튼/배지 위 텍스트 = 흰색 (리터럴 #000 보정) */
.svc-page .svc-main__badge,
.svc-page .svc-main__cta,
.svc-page .dialog-item__badge,
.svc-page .dialog-cta__btn {
  color: #ffffff;
}

/* 다픽 브릿지 — 흰 배경 + 연보라 액센트 (대면적 진보라 밴드 금지) */
.svc-page .dapick-bridges {
  background: #ffffff;
  border-top: 2px solid var(--svc-purple);
  border-bottom: 1px solid var(--svc-purple-faint);
}
.svc-page .dapick-bridges__title {
  color: var(--svc-text);
}
.svc-page .dapick-bridges__title em {
  color: var(--svc-purple);
}
.svc-page .dapick-bridges__sub {
  color: var(--gray2);
}
.svc-page .dapick-bridges__btn {
  background: var(--svc-purple);
  color: #ffffff;
}
.svc-page .dapick-bridges__btn:hover {
  background: var(--svc-purple-deep);
}

/* 다이얼로그(모달) — 라이트 */
.svc-page .dialog-overlay {
  background: rgba(43, 20, 70, 0.55);
}
.svc-page .dialog-box {
  background: #ffffff;
}
.svc-page .dialog-title,
.svc-page .dialog-item__value {
  color: var(--svc-text);
}
.svc-page .dialog-item {
  background: var(--svc-purple-faint);
}
.svc-page .dialog-close:hover {
  color: var(--svc-text);
}

/* ═══════════════════════════════════════════════════════════
   Phase 3 — 화이트 베이스 확립 ("흰 종이 위에 연보라를 얹는다")
   · 모든 영역 기본 배경 = 흰색. 진보라는 버튼/강조/보더/아이콘에만.
   · 진보라·다크 대면적 배경 0 목표.
═══════════════════════════════════════════════════════════ */

/* 3-4. 공지바 — 흰 배경 + 보라 텍스트 + 하단 보더, "확인하기" 버튼화 */
.svc-page .notice-bar {
  background: #ffffff;
  color: var(--svc-purple);
  border-bottom: 1px solid var(--svc-purple-faint);
}
.svc-page .notice-arrow {
  background: var(--svc-purple);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  /* 시각 높이는 작아도 공지바 전체(높이 38px·onclick)가 터치 영역 */
}

/* 3-1. 카테고리 탭 — 흰 배경 + 하단 보더 (활성탭 보라 텍스트·밑줄은 service.css 유지) */
.svc-page .service-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--svc-purple-faint);
}

/* 3-3. gnb 메뉴 제거 → 로고 좌 / 토글 우 정렬 */
.svc-page .gnb__right {
  margin-left: auto;
}

/* 3-2. 하단 고정 바 — 흰 배경 + 보라 CTA + SNS 통합 */
.svc-page .bottom-nav {
  background: #ffffff;
  border-top: 1px solid var(--svc-purple-faint);
  box-shadow: 0 -2px 12px rgba(118, 42, 228, 0.08);
  gap: 12px;
  padding: 0 5%; /* index footer-bar 와 동일 좌우 여백 */
  justify-content: flex-start; /* 가운데 정렬 해제 → 좌우로 펼침 */
}
.svc-page .bottom-nav__sns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.svc-page .bottom-nav__sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--svc-purple);
  border-radius: 8px; /* index footer-bar__sns-btn 와 동일 */
  transition:
    background var(--transition),
    color var(--transition);
}
.svc-page .bottom-nav__sns-btn:hover {
  filter: brightness(0.93);
}
.svc-page .bottom-nav__btn {
  background: var(--svc-purple);
  color: #ffffff;
  flex: 1; /* index footer-bar__cta 와 동일 — 우측까지 채움 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 1px;
}
.svc-page .bottom-nav__btn:hover {
  background: var(--svc-purple-deep);
}

/* 3-5. svc-main 하단 CTA 바 — 리터럴 rgba(0,0,0,.88) 다크 → 라이트(Phase 2 누락분) */
.svc-page .svc-main__bottom-cta {
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--svc-purple-faint);
}
.svc-page .svc-main__bottom-cta:hover {
  background: var(--svc-purple-faint);
}
.svc-page .svc-main__bottom-cta-text {
  color: var(--svc-text);
}

/* 메인 비주얼 hover 오버레이(제품 이미지 위) — 딥퍼플 스크림 + 라이트 텍스트 */
.svc-page .svc-main__content {
  background: linear-gradient(
    to top,
    rgba(43, 20, 70, 0.94) 0%,
    rgba(43, 20, 70, 0.55) 55%,
    transparent 100%
  );
}
.svc-page .svc-main__content .svc-main__title,
.svc-page .svc-main__content .svc-main__desc {
  color: #ffffff;
}
.svc-page .svc-main__content .svc-main__stat {
  color: var(--svc-purple-light);
}

/* 3-5. 다이얼로그 보조 그레이 리터럴(#aaa/#888/#666/#555) → 라이트 팔레트 대비 확보 */
.svc-page .dialog-item__label,
.svc-page .dialog-amount-label,
.svc-page .dialog-note,
.svc-page .dialog-cta__sub {
  color: var(--gray2);
}
.svc-page .dialog-close {
  color: var(--gray3);
}

/* 모바일 하단바 — index 구조와 동일 2줄 배치(전화·CTA 1줄 / SNS 1줄), 모두 44px */
@media (max-width: 640px) {
  .svc-page .bottom-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 4%;
    gap: 8px;
  }
  .svc-page .bottom-nav__tel {
    order: 1;
    flex: 1 1 46%;
  }
  .svc-page .bottom-nav__btn {
    order: 2;
    flex: 1 1 46%;
    max-width: none;
  }
  .svc-page .bottom-nav__sns {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
  body.svc-page {
    padding-bottom: 120px; /* 2줄 바 높이 보정 */
  }
}
@media (max-width: 420px) {
  .svc-page .bottom-nav__tel-label {
    display: none; /* 아주 좁은 화면: '전화상담' 라벨 숨기고 번호만 */
  }
}

/* ═══════════════════════════════════════════════════════════
   전체 화이트 평탄화 — 지혁님 요청: 흰 캔버스로 리셋 후 재설계
   · 모든 영역 배경 = 순수 흰색, 장식 그라데이션·연보라 밴드·다크 스크림 제거
   · 텍스트는 다크 유지, CTA/링크/배지 보라 액센트만 최소 유지(요소 소실 방지)
   · 재설계 시 이 블록만 삭제하면 직전(Phase 3) 상태로 복귀
═══════════════════════════════════════════════════════════ */
.svc-page {
  --black2: #ffffff;
  --black3: #ffffff;
  --black4: #ffffff;
}
.svc-page .hero,
.svc-page .service-section,
.svc-page .service-nav,
.svc-page .notice-bar,
.svc-page .svc-layout,
.svc-page .svc-sidebar,
.svc-page .svc-main,
.svc-page .svc-main__inner,
.svc-page .svc-main__inner.has-img,
.svc-page .svc-thumbs,
.svc-page .svc-thumb,
.svc-page .svc-thumb__img-wrap,
.svc-page .svc-thumb__label,
.svc-page .dapick-bridges,
.svc-page .service-banner,
.svc-page .bottom-nav,
.svc-page .footer-extended__legal,
.svc-page .dialog-box,
.svc-page .dialog-item,
.svc-page .dialog-amount-box {
  background: #ffffff;
}
/* 메인 비주얼 hover 오버레이도 흰색(다크 스크림 제거) + 텍스트 다크 */
.svc-page .svc-main__content {
  background: rgba(255, 255, 255, 0.92);
}
.svc-page .svc-main__content .svc-main__title,
.svc-page .svc-main__content .svc-main__desc,
.svc-page .svc-main__content .svc-main__stat {
  color: var(--svc-text);
}
.svc-page .svc-main__bottom-cta {
  background: rgba(255, 255, 255, 0.92);
}
/* 장식용 컬러 보더/그림자 → 옅은 회색 (평탄) */
.svc-page .notice-bar,
.svc-page .service-nav,
.svc-page .dapick-bridges,
.svc-page .bottom-nav {
  border-color: #ececec;
}
.svc-page .dapick-bridges {
  border-top-width: 1px;
}
.svc-page .bottom-nav {
  box-shadow: 0 -1px 0 #ececec;
}

/* 하단바 SNS 아이콘 — 브랜드 컬러 (카카오 노랑 / 인스타 그라데이션 / 네이버 그린) */
.svc-page .bottom-nav__sns-btn--kakao {
  background: #fee500;
  color: #3a1d1d;
}
.svc-page .bottom-nav__sns-btn--insta {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #ffffff;
}
.svc-page .bottom-nav__sns-btn--naver {
  background: #03c75a;
  color: #ffffff;
}

/* 하단바 전화상담(tel) — index 하단바 구조 동일, 보라 톤 */
.svc-page .bottom-nav__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--svc-text);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #ececec;
  border-radius: 8px; /* index footer-bar__tel 와 동일 */
  flex-shrink: 0;
  transition: border-color var(--transition);
}
.svc-page .bottom-nav__tel:hover {
  border-color: var(--svc-purple);
}
.svc-page .bottom-nav__tel svg {
  color: var(--svc-purple);
  flex-shrink: 0;
}
.svc-page .bottom-nav__tel-text {
  font-size: 0.92rem;
}
.svc-page .bottom-nav__tel-text strong {
  color: var(--svc-purple-deep);
  font-weight: 900;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════
   다픽 바로가기 영역 — 기존(원본) 컬러톤 복원 (지혁님 요청)
   원본: 다크 네이비-퍼플 그라데이션 + 골드 액센트.
   골드는 이 페이지 무골드 규칙 따라 연보라/화이트로 대체.
   (흰 캔버스 위 단 하나의 의도된 다크 액센트 패널)
═══════════════════════════════════════════════════════════ */
.svc-page .dapick-bridges {
  background: linear-gradient(135deg, #0f0826 0%, #1a0f3a 50%, #0a1628 100%);
  border-top: 3px solid var(--svc-purple);
  border-bottom: 3px solid rgba(118, 42, 228, 0.3);
}
.svc-page .dapick-bridges__title {
  color: #ffffff;
}
.svc-page .dapick-bridges__title em {
  color: var(--svc-purple-light);
}
.svc-page .dapick-bridges__sub {
  color: rgba(255, 255, 255, 0.78);
}
.svc-page .dapick-bridges__btn {
  background: #ffffff;
  color: var(--svc-purple-deep);
}
.svc-page .dapick-bridges__btn:hover {
  background: var(--svc-purple-light);
  color: var(--svc-purple-deep);
}

/* 푸터 텍스트 — 반투명 회색 제거, 솔리드 검정으로 가독성 확보 (지혁님 요청) */
.svc-page .footer-extended__legal-info p,
.svc-page .footer-extended__legal-info strong,
.svc-page .footer-copy,
.svc-page .footer-meta p,
.svc-page .footer-meta strong,
.svc-page .cert-logo-main-label {
  color: var(--svc-text);
}

/* ═══════════════════════════════════════════════════════════
   상품 3D 전시 (.svc3d) — 흰 배경 + 연보라 카드/칩
   model-viewer 무대 + 썸네일 칩으로 모델 전환
═══════════════════════════════════════════════════════════ */
.svc-page .svc3d {
  padding: 56px 5% 64px;
  background: #ffffff;
  text-align: center;
}
.svc-page .svc3d__head {
  margin-bottom: 24px;
}
.svc-page .svc3d__title {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 900;
  color: var(--svc-text);
  line-height: 1.3;
}
.svc-page .svc3d__desc {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--gray2);
}
.svc-page .svc3d__stage {
  max-width: 720px;
  margin: 0 auto;
  background: var(--svc-purple-faint);
  border: 1px solid var(--svc-purple-light);
  border-radius: 18px;
  overflow: hidden;
}
.svc-page .svc3d__viewer {
  display: block;
  width: 100%;
  height: 440px;
  background-color: transparent;
}
.svc-page .svc3d__thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.svc-page .svc3d__thumb {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--svc-purple-light);
  border-radius: 999px;
  background: #ffffff;
  color: var(--svc-text);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}
.svc-page .svc3d__thumb:hover {
  border-color: var(--svc-purple);
}
.svc-page .svc3d__thumb.is-active {
  background: var(--svc-purple);
  border-color: var(--svc-purple);
  color: #ffffff;
}
@media (max-width: 640px) {
  .svc-page .svc3d {
    padding: 40px 5% 48px;
  }
  .svc-page .svc3d__viewer {
    height: 340px;
  }
}

/* ═══════════════════════════════════════════════════════════
   스크롤 연동 가로 슬라이드 (.svc-split) — 좌 sticky 패널 + 우 가로 트랙
   · 러닝웨이(섹션 height = 아이템수×100vh) + sticky 뷰포트 + JS translateX
   · 스크롤 하이재킹 없음(preventDefault 0), 화이트 베이스 + 연보라 액센트
═══════════════════════════════════════════════════════════ */
.svc-page .svc-split {
  position: relative;
  height: calc((var(--item-count, 3) + 1) * 100vh); /* 러닝웨이 + 끝 홀드 1.0(마지막 아이템에서 휠 1~2회 머무름) */
  background: #ffffff;
}
.svc-page .svc-split__viewport {
  position: sticky;
  top: var(--nav-h); /* 공지바(38)+gnb(64) 스택 아래 */
  height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* 좌: 고정 패널 */
.svc-page .svc-split__pin {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center; /* 카피 박스 세로 중앙 */
}
.svc-page .svc-split__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--svc-purple-faint); /* src="#" 미확보 시 연보라 플레이스홀더(검정 노출 방지) */
}
/* #phone 핀 3D 무대 (model-viewer) — 화이트 배경 + 보라 엣지 */
.svc-page .svc-split__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #ffffff;
  --poster-color: transparent;
}
/* 보라 엣지 — 1px 라인 + 은은한 비네트. 드래그/휠 통과 위해 pointer-events:none
   (비네트 과하면 0.07→0.04, 라인만 원하면 두 번째 inset 제거) */
.svc-page .svc-split__pin--3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* 무대 위, 카피 아래 */
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px var(--svc-purple-light),
    inset 0 0 90px rgba(118, 42, 228, 0.07);
}
/* 카피 — 상단 중앙 가로 바 (3D 피사체와 안 겹치게) */
.svc-page .svc-split__pin--3d .svc-split__copy {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 560px);
  margin: 0;
  padding: 16px 28px;
  text-align: center;
  z-index: 3; /* 최상단 */
  pointer-events: none;
}
/* reveal: translateX(-50%) 중앙정렬 보존하며 translateY 만 분기 */
.svc-page.svc-reveal .svc-split__pin--3d .svc-split__copy {
  transform: translate(-50%, 36px);
}
.svc-page.svc-reveal .svc-split__pin--3d .svc-split__copy.is-in {
  transform: translate(-50%, 0);
}
/* 좌측 카피 — 다크 스크림 금지 → 반투명 화이트 패널 */
.svc-page .svc-split__copy {
  position: relative;
  z-index: 1;
  margin: 0 0 0 8%;
  max-width: 78%;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--svc-purple-faint);
  border-radius: 16px;
}
.svc-page .svc-split__tag {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--svc-purple);
  margin-bottom: 8px;
}
.svc-page .svc-split__title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: 1.25;
  color: var(--svc-text);
}
.svc-page .svc-split__title em {
  font-style: normal;
  color: var(--svc-purple);
}

/* 우: 가로 트랙 (휠 진행도 → translateX) */
.svc-page .svc-split__clip {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.svc-page .svc-split__track {
  display: flex;
  gap: 4vw; /* 확대 후 다음 아이템 걸침 유지 위해 5→4vw */
  padding: 0 6vw;
  align-items: center;
  height: 100%;
  will-change: transform;
}
/* 아이템 = 가로 배치(이미지 좌 / 텍스트 우) */
.svc-page .svc-split__item {
  flex: 0 0 auto;
  width: auto;
  max-width: calc(50vw - 10vw); /* 클리핑 가드: 아이템 총폭 ≤40vw → 텍스트 항상 온전히 */
  display: flex;
  align-items: center;
  gap: 1.5vw; /* 텍스트를 이미지에 붙임 */
}
.svc-page .svc-split__media {
  /* 합이 넘치면 이미지가 양보(shrink), 텍스트는 온전히. min-width 로 과축소 방지 */
  flex: 0 1 auto;
  min-width: 260px;
  width: clamp(300px, 22vw, 430px); /* 중간값 — 직전 30vw/600px 과대 → 22vw 회귀 */
  aspect-ratio: 3 / 2; /* 투명 비율 틀(보더/배경 없음). 없으면 정방형 폴더블만 세로로 커져 높이 들쭉날쭉 */
}
.svc-page .svc-split__media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 비율 틀 안에서 원본 비율 유지(레터박스 허용·잘림 없음) */
  display: block;
}
/* 꽉 찬 사진을 쓰는 아이템에만 cover 복귀: .svc-split__media--cover */
.svc-page .svc-split__media--cover img {
  object-fit: cover;
  padding: 0;
}
.svc-page .svc-split__text {
  flex: 0 0 auto; /* 클리핑 가드: 텍스트는 절대 안 줄어듦 */
  width: clamp(220px, 18vw, 320px);
  text-align: center; /* 가운데 정렬 */
}
.svc-page .svc-split__name {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 900;
  color: var(--svc-purple); /* 카테고리 포인트 — 진보라 */
  margin-bottom: 8px;
}
.svc-page .svc-split__benefit {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--svc-text); /* 다크 볼드 */
  margin-bottom: 8px;
}
.svc-page .svc-split__desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray2);
  max-width: 480px;
}

/* 아이템 팝 등장(뿅/팡) — is-pop 토글로 반복재생. .svc-reveal 가 있어야 hidden 적용
   (JS 미작동/실패 시 콘텐츠 항상 표시). reduced-motion → svc-reveal 미부여로 항상 표시 */
.svc-page.svc-reveal .svc-split__item .svc-split__media,
.svc-page.svc-reveal .svc-split__item .svc-split__text {
  opacity: 0;
  transform: scale(0.6);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease-out;
}
.svc-page.svc-reveal .svc-split__item .svc-split__text {
  transition-delay: 0.12s; /* 이미지 먼저 뿅 → 텍스트 살짝 늦게 팡 */
}
.svc-page.svc-reveal .svc-split__item.is-pop .svc-split__media,
.svc-page.svc-reveal .svc-split__item.is-pop .svc-split__text {
  opacity: 1;
  transform: scale(1);
}

/* 인트로 칸 스크롤 힌트 + 화살표 왕복 */
.svc-page .svc-split__scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--svc-purple);
}
.svc-page .svc-split__arrow {
  display: inline-block;
  animation: svcArrow 1.2s ease-in-out infinite;
}
@keyframes svcArrow {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-page .svc-split__arrow {
    animation: none;
  }
}

/* 교차 배치 — 플립(핀 우측 / 트랙 좌측). DOM 순서는 유지하고 order로만 반전(SR 읽기순서 보존).
   데스크탑(>768)에서만 적용 — 모바일은 항상 DOM 순서(핀 배너 위 + 캐러셀 아래) */
@media (min-width: 769px) {
  .svc-page .svc-split--flip .svc-split__clip {
    order: 1;
  }
  .svc-page .svc-split--flip .svc-split__pin {
    order: 2;
  }
  .svc-page .svc-split--flip .svc-split__copy {
    margin: 0 8% 0 0; /* 우측 핀 → 카피 오른쪽 인셋(미러) */
  }
}

/* 모바일(≤768): 러닝웨이/ sticky 해제 → 가로 스와이프 캐러셀 */
@media (max-width: 768px) {
  .svc-page .svc-split {
    height: auto;
  }
  .svc-page .svc-split__viewport {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .svc-page .svc-split__pin {
    height: 48vh;
  }
  .svc-page .svc-split__copy {
    margin: 0 16px 16px;
    max-width: none;
  }
  .svc-page .svc-split__clip {
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .svc-page .svc-split__clip::-webkit-scrollbar {
    display: none;
  }
  .svc-page .svc-split__track {
    transform: none !important; /* 모바일은 JS 변환 미적용 */
    height: auto;
    align-items: stretch;
    gap: 14px;
    padding: 8px 5% 24px;
  }
  .svc-page .svc-split__item {
    width: 88vw;
    max-width: none; /* 데스크탑 클리핑 가드(40vw) 해제 — 모바일 카드는 88vw 유지 */
    align-items: center; /* 가로 배치 유지(이미지 좌 / 텍스트 우) */
    scroll-snap-align: start;
  }
  .svc-page .svc-split__media {
    flex: 0 0 auto; /* 모바일은 양보 불필요 — 고정폭 */
    min-width: 0; /* 데스크탑 가드(260px) 해제 — 좁은 화면 오버플로 방지 */
    width: 66vw;
  }
  .svc-page .svc-split__text {
    width: auto;
  }
}

/* 모션 줄이기: 러닝웨이/sticky 해제 → 손으로 넘기는 일반 가로 캐러셀 폴백 */
@media (prefers-reduced-motion: reduce) {
  .svc-page .svc-split {
    height: auto;
  }
  .svc-page .svc-split__viewport {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .svc-page .svc-split__pin {
    height: 48vh;
  }
  .svc-page .svc-split__clip {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .svc-page .svc-split__track {
    transform: none !important;
    height: auto;
    align-items: stretch;
  }
  .svc-page .svc-split__item {
    scroll-snap-align: start;
  }
}

/* ── 등장 연출(reveal) — transform/opacity 전용, 반복재생 ──
   .svc-reveal 가 붙어야 hidden 적용 → JS 미작동 시 콘텐츠는 항상 보임(안전) */
.svc-page [data-reveal] {
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.svc-page.svc-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
}
.svc-page.svc-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .svc-page [data-reveal] {
    transition: none;
  }
  .svc-page.svc-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   [게이트] 준비중 오버레이 (.svc-coming) — 다픽 우선작업 임시
   · 본문 작업물(3D 핀·스플릿·게이지·하단바) 무삭제, 흰 가림막만 덮음.
   · 복귀: service/index.html 의 .svc-coming 블록(+ 인라인 <script>) 제거 → .svc-coming-on
     클래스가 안 붙어 overflow 잠금도 자동 해제 → 한 곳 수정으로 원상복귀.
═══════════════════════════════════════════════════════════ */
.svc-coming {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #ffffff;
  text-align: center;
  padding: 24px;
}
.svc-coming__title {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 900;
  color: var(--svc-text, #2b2b33);
}
.svc-coming__sub {
  color: #6b6b73;
}
.svc-coming__home {
  margin-top: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border-radius: 10px;
  background: #762ae4;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.svc-coming__home:hover {
  background: var(--svc-purple-deep, #5e22b6);
}
/* 뒤 본문 스크롤 잠금 — 오버레이가 켜졌을 때만(블록 제거 시 자동 해제) */
body.svc-page.svc-coming-on {
  overflow: hidden;
}
/* 오버레이 뒤 model-viewer 렌더 루프 정지 — #phone 핀 무대는 마크업에 auto-rotate 가
   하드코딩(JS 가드로는 못 멈춤). display:none 이면 model-viewer 가 렌더를 중단 → 자원 낭비 0.
   가림막에 가려 어차피 안 보임. 게이트 클래스 제거 시 자동 복귀. */
body.svc-page.svc-coming-on model-viewer {
  display: none;
}