@charset "UTF-8";

/* ============================================
   서비스 소개 (신규) - Figma 2928:54719 (SS/Partner/공구 벤더사/PC, 1200x9300)
   ============================================
   [전역 결정]
   - 콘텐츠 폭 1200px (max-width, 중앙) — Figma 프레임 폭
   - 섹션 좌우 패딩 128px → 내부 콘텐츠 폭 944 (= 슬라이더 뷰포트 폭과 동일)
   - 섹션 상하 패딩 160px
   - 폰트 Pretendard Variable
   - 헤더는 res/css/ss-header.css / 푸터는 res/css/ss-footer.css (둘 다 공용)

   [세로 리듬] Figma y좌표 그대로 이식 (섹션 높이로 검산)
   히어로 0~1032 / 트랙소개 1032~2168 / 카드2개 2168~2768 / 핵심가치 SaaS 2768~3650
   매칭 3650~4682 / 매출확장 4682~5714 / 핵심가치 App 5714~6596
   정산 6596~7628 / 성장 7628~8660 / 푸터 8660~9300
   단 히어로 높이만 사용자 요청으로 100dvh 로 대체했다(원값 1032 는 .svc-hero 주석에 보존)

   [없는 요소] 시안에 없는 것은 만들지 않는다
   - hover / focus / transition / 애니메이션
     예외 2건(둘 다 슬라이더·앵커 동작에 필수, 메인 지시분):
       · .svc-slider__track 의 transform transition
       · html { scroll-behavior: smooth } — 카드 버튼 앵커 스크롤용
   - 자동재생 / 무한루프 (시안에 근거 없음)
   - 좌우 화살표 버튼 (시안에 없음 — 이동은 인디케이터 클릭 + 방향키)
   - 이전 버전의 si-* 섹션 전부 (스크롤 인디케이터·feature 카드·partner 배너 등)
   - IBM Plex Mono 폰트 — 핵심가치 카드의 SaaS/App 은 통 이미지에 포함되어 폰트 의존성 없음

   [모바일] 이번 작업 범위 밖(PC 전용). 좁은 폭 가로 스크롤 방어만 넣었다
   ============================================ */

/* ---- base ----
   reset.css는 box-sizing을 주지 않고 body 폰트를 Spoqa Han Sans Neo로 고정하므로 여기서 덮는다
   (이전 버전이 style_new.css로 처리하던 몫. 그 파일은 더 이상 로드하지 않는다) */
* {
  box-sizing: border-box;
}

/* 카드 버튼 → 핵심가치 섹션 앵커 이동. 시안 외지만 앵커 동작에 필요한 최소분 */
html {
  scroll-behavior: smooth;
}

/* 모바일에서만 살아나는 강제 개행. 문구를 두 벌 복제하지 않기 위한 장치다
   (트랙 타이틀 2줄 / 카드 제목 3줄 — 768 분기에서 display:inline 으로 켠다) */
.svc-br--m {
  display: none;
}

body {
  background: #ffffff;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* ============================================
   2. 히어로 - Figma 2928:54722 (Section/MainTitle, 1200x1032)
   ============================================
   배경: 섹션 전체를 덮는 이미지 + 그 위 rgba(255,255,255,0.7) 오버레이 1겹
     에셋 svc_hero_bg.jpg 2400x1791 (PC·모바일 공용 원본)
     오버레이는 background 레이어 1번(이미지보다 위)으로 올린다 —
     background 는 텍스트 콘텐츠보다 항상 아래이므로 [이미지 < 오버레이 < 텍스트] 순서가 보장된다

   컨테이너: column, center, padding 0 70px, 본문 블록 padding-bottom 104, gap 10
   로고: 139x16, 위아래 padding 10px 0
   타이틀 center, ls -0.004em / 두 줄 사이 gap 10
     매출 모멘텀을 위한  64px 700, lh 1.3, #000000
     서비스 트랙        48px 600, lh 1.3, #333333
   ============================================ */
.svc-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 시안 외 조정(사용자 요청): Figma 실측 1032px → 뷰포트 한 화면 높이.
     dvh 를 모르는 브라우저가 앞의 vh 를 쓰도록 두 줄로 선언한다(뒤 선언이 이긴다).
     height 가 아니라 min-height 라 콘텐츠가 넘치면 섹션이 늘어난다 */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 70px;
  /* 레이어 1 = rgba(255,255,255,0.7) 오버레이 / 레이어 2 = 배경 이미지 */
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.7)
    ),
    url("../res/img/new/svc_hero_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #ffffff; /* 이미지 로드 실패 시 폴백 */
}

.svc-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 104px; /* 본문 블록 padding-bottom */
}

.svc-hero__logo {
  padding: 10px 0;
  line-height: 0;
}

.svc-hero__logo img {
  width: 139px;
  height: 16px;
}

.svc-hero__title {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 두 줄 사이 */
  text-align: center;
  letter-spacing: -0.004em;
}

.svc-hero__title-1 {
  font-weight: 700;
  font-size: 64px;
  line-height: 1.3;
  color: #000000;
}

.svc-hero__title-2 {
  font-weight: 600;
  font-size: 48px;
  line-height: 1.3;
  color: #333333;
}

/* ============================================
   3. 트랙 소개 - Figma 2928:54723 (y1032~2168, h1136)
   ============================================
   섹션: background #FFFFFF, padding 160px 128px, column, center, gap 80
   SubTitle 2928:54724 (center, gap 20)
     하나의 트랙에서…    48px 700, lh 1.3, ls -0.005em, #1A1A1A
     스타일셀러는 좋은…  22px 600, lh 1.3, ls -0.023em, #666666
   image 6 2928:54725: 745x479, radius 40, object-fit cover
   설명 2928:54727: 14.7px 500, lh 1.5, ls -0.034em, #666666, center, 3줄

   검산 h1136 = 160 + [111 + 80 + 479 + 80 + 66.15] + 160 = 1136.15 → gap 80 확정
   ============================================ */
.svc-track {
  padding: 160px 0;
  background: #ffffff;
}

.svc-track__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 128px;
}

.svc-track__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.svc-track__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #1a1a1a;
}

.svc-track__sub {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.023em;
  color: #666666;
}

.svc-track__flow {
  width: 745px;
  max-width: 100%; /* 좁은 폭 방어 */
  height: auto;
  aspect-ratio: 745 / 479;
  border-radius: 40px;
  object-fit: cover;
}

.svc-track__desc {
  font-weight: 500;
  font-size: 14.7px;
  line-height: 1.5;
  letter-spacing: -0.034em;
  color: #666666;
  text-align: center;
}

/* ============================================
   4. 카드 2개 - Figma 2928:54728 (y2168~2768, h600)
   ============================================
   [요소] 좌: 에스엔에스 커머스 살펴보기 / 우: 스타일셀러 살펴보기
   [문구 교정] 시안 '샐러 생태계를' → '셀러 생태계를' (2026-07-31 사용자 지시)
   [링크] 외부 URL이 아니라 페이지 내 앵커 — 좌 #svcCoreSaas / 우 #svcCoreApp

   background #FFFFFF, 2열 중앙 정렬, 각 열 폭 300, 열 간 gap 229, 세로는 섹션 중앙
   각 열: column, center, gap 40
     텍스트 블록 gap 20, center
       라벨 14.7px 400, lh 1.5, ls -0.034em, #666666
       제목 30px 600, lh 1.3, ls -0.008em, #000000 (2줄)
   버튼: height 40, padding 7px 14px, radius 14, center
     좌 background #3358FF (Secondary/400) + 워드마크 SNS COMMERCE 142.773x14 (white)
     우 background #F3FF99 (Primary/200) + 워드마크 STYLESELLER 118.583x14 (black)
   ============================================ */
.svc-cards {
  display: flex;
  align-items: center; /* 세로는 섹션 중앙 */
  min-height: 600px;
  background: #ffffff;
}

.svc-cards__inner {
  display: flex;
  justify-content: center;
  gap: 229px; /* 열 간 */
  flex-wrap: wrap; /* 좁은 폭 방어 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 128px;
}

.svc-cards__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 300px;
}

.svc-cards__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.svc-cards__label {
  font-weight: 400;
  font-size: 14.7px;
  line-height: 1.5;
  letter-spacing: -0.034em;
  color: #666666;
}

.svc-cards__title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: #000000;
}

.svc-cards__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 7px 14px;
  border-radius: 14px;
  text-decoration: none;
}

.svc-cards__btn--blue {
  background: #3358ff; /* Secondary/400 */
}

.svc-cards__btn--blue img {
  width: 142.773px;
  height: 14px;
}

.svc-cards__btn--lime {
  background: #f3ff99; /* Primary/200 */
}

.svc-cards__btn--lime img {
  width: 118.583px;
  height: 14px;
}

/* ============================================
   5 / 8. 핵심가치 카드 - Figma 2928:54740 (SNS COMMERCE) / 2928:54762 (STYLESELLER)
   ============================================
   두 섹션 구조 동일. 카드는 통 이미지다 —
   배경 사진 + rgba(0,0,0,0.2) 오버레이 + 'SaaS'/'App' 텍스트가 이미 합성돼 있다.
   따라서 오버레이 요소·텍스트 노드·IBM Plex Mono 로드가 전부 불필요하다.

   섹션: column, center, gap 80, padding 160px 0
   SubTitle: 48px 700, lh 1.3, ls -0.005em, #1A1A1A, center
   카드 940x420: radius 40, box-shadow 0 0 60px rgba(0,0,0,0.05), object-fit cover

   검산 h882 = 160 + [62.4 + 80 + 420] + 160 = 882.4
   앵커 대상이므로 scroll-margin-top 으로 고정 헤더(90) 보정
   ============================================ */
.svc-core {
  padding: 160px 0;
  background: #ffffff;
  /* 고정 헤더 보정. 설계값은 90(= pad 30 + 콘텐츠 45 + pad 15)이지만
     실측 높이는 91.25 다(채용 버튼 line-height 때문에 콘텐츠가 46.25).
     90 을 쓰면 앵커 이동 후 섹션 상단이 헤더 밑으로 1.1px 들어간다 → 실측값을 쓴다 */
  scroll-margin-top: 91.25px;
}

.svc-core__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 128px;
}

.svc-core__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #1a1a1a;
  text-align: center;
}

/* picture 를 박스 트리에서 빼 카드가 섹션의 flex 아이템으로 남게 한다 */
.svc-core__picture {
  display: contents;
}

.svc-core__card {
  width: 940px;
  max-width: 100%; /* 좁은 폭 방어 */
  height: auto;
  aspect-ratio: 940 / 420;
  border-radius: 40px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
  object-fit: cover;
}

/* ============================================
   6 / 7 / 9 / 10. 슬라이더 4개 (공통 껍데기)
   ============================================
   Figma 2928:54752(매칭 3장) / 54761(매출확장 2장) / 54778(정산 3장) / 54789(성장 5장)

   섹션        클래스     배경                             제목 그라디언트         장수
   매칭        --match    linear-gradient(#FFF → #F2F2F2)  #000 1.55% → #EFFF75    3
   매출확장    --sales    #F2F2F2                          #000 → #99ACFF          2
   정산        --settle   linear-gradient(#FFF → #F2F2F2)  #000 1.55% → #EFFF75    3
   성장        --grow     #F2F2F2                          #000 → #99ACFF          5

   섹션: padding 160px 128px, column, gap 60
   헤더 블록 gap 20
     타이틀 48px 700, lh 1.3, ls -0.005em, #000000
     서브   17.5px 500, lh 1.5, ls -0.01em, #666666 (2줄)
   트랙 래퍼 gap 30 (트랙 ↔ 인디케이터)
   트랙 display flex, gap 8 — 슬라이드 944, 피치 952
   뷰포트 944 (Frame 2147238996 폭) → 1장 노출, overflow hidden

   [인디케이터 점 개수] 시안은 숨긴 인스턴스 잔재로 실제 슬라이드 수와 어긋난다
   (3→4 / 2→4 / 3→4 / 5→6). 구현은 실제 슬라이드 수에 맞춘다
   ============================================ */
.svc-slider {
  padding: 160px 0;
}

.svc-slider--match,
.svc-slider--settle {
  background: linear-gradient(to bottom, #ffffff, #f2f2f2);
}

.svc-slider--sales,
.svc-slider--grow {
  background: #f2f2f2;
}

.svc-slider__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 128px;
}

.svc-slider__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.svc-slider__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #000000;
}

.svc-slider__sub {
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #666666;
}

.svc-slider__body {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 트랙 ↔ 인디케이터 */
}

.svc-slider__viewport {
  width: 944px;
  max-width: 100%; /* 좁은 폭 방어 — 넘치는 슬라이드는 여기서 클리핑된다 */
  overflow: hidden;
}

.svc-slider__track {
  display: flex;
  gap: 8px; /* 슬라이드 944 + gap 8 = 피치 952 */
  list-style: none;
  margin: 0;
  padding: 0;
  /* 시안 외 추가: 슬라이드 이동에 필요한 최소분(메인 지시). 자동재생·무한루프는 없다 */
  transition: transform 0.4s ease;
  /* 시안 외 추가(사용자 요청): 드래그 스와이프.
     pan-y = 세로 스크롤은 브라우저가 계속 처리하고 가로만 스크립트가 가져간다.
     cursor: grab 은 드래그 가능함을 알리는 최소 힌트다 */
  touch-action: pan-y;
  cursor: grab;
}

/* 드래그 중 — index.js 가 붙였다 뗀다 */
.svc-slider__track.is-dragging {
  transition: none; /* 손가락/커서를 지연 없이 따라간다 */
  cursor: grabbing;
  user-select: none; /* 드래그 중에만. 평소 텍스트 선택은 그대로 둔다 */
}

/* 이미지 기본 드래그(고스트 이미지) 차단. index.js 의 draggable=false 와 짝이다 */
.svc-slide img {
  -webkit-user-drag: none;
}

/* ---- 슬라이드 Asset/Core 1 (944x429) ----
   background #FFFFFF, radius 40, overflow hidden, flex align-items center
   좌측 텍스트 420: padding 80px 40px, column, gap 30, height 100%
     제목 30px 700, lh 1.3, ls -0.008em — 그라디언트 텍스트
     본문 17.5px 500, lh 1.5, ls -0.01em, #000000, height 200, padding-right 20
   우측 썸네일 524x429: object-fit cover
   검산 429 = padding 80×2 + [제목 39 + gap 30 + 본문 200] / 폭 944 = 420 + 524 */
/* 폭을 뷰포트(=944 트랙)에 맞춘다. 설계폭에서는 100% == 944 라 값이 같고,
   그보다 좁아지면 슬라이드가 잘리는 대신 함께 줄어든다.
   피치는 index.js 가 DOM 에서 실측하므로 폭이 변해도 이동량이 어긋나지 않는다 */
.svc-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  width: 100%;
  height: 429px;
  border-radius: 40px;
  background: #ffffff;
  overflow: hidden;
}

.svc-slide__text {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 420px;
  height: 100%;
  padding: 80px 40px;
}

/* 그라디언트 텍스트 — 섹션별 색은 아래 모디파이어에서 지정한다 */
.svc-slide__title {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-slider--match .svc-slide__title,
.svc-slider--settle .svc-slide__title {
  background-image: linear-gradient(to right, #000000 1.55%, #efff75 101.04%);
}

.svc-slider--sales .svc-slide__title,
.svc-slider--grow .svc-slide__title {
  background-image: linear-gradient(to right, #000000, #99acff);
}

.svc-slide__body {
  height: 200px;
  padding-right: 20px;
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000000;
}

/* 944 − 텍스트 420 = 524. 슬라이드가 좁아지면 이쪽이 먼저 줄어든다 */
.svc-slide__thumb {
  flex: 1 1 524px;
  min-width: 0;
  width: 524px;
  height: 429px;
  object-fit: cover;
}

/* 성장 섹션 썸네일 배경 - Figma 2928:54789
   원본 레이어가 투명 영역을 가져 이 배경이 비치는 구조다.
   현재 에셋은 섹션 export 크롭이라 배경이 이미 합성돼 있어 드러나지 않지만,
   투명 PNG로 교체될 경우를 대비해 스펙대로 남긴다 */
.svc-slider--grow .svc-slide__thumb {
  background: linear-gradient(235.5677deg, #edf2f7 0%, #99acff 100%);
}

/* ---- 인디케이터 Asset/Bar/Active ----
   래퍼: center
   알약: background #FFFFFF, padding 20px 40px, radius 40, flex gap 12
   active:   60x8, radius 10, linear-gradient(to right, #EFFF75 1.55%, #CCCCCC 101.04%)
   inactive: 8x8 원형 #CCCCCC */
.svc-slider__dots {
  display: flex;
  justify-content: center;
}

.svc-slider__pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  border-radius: 40px;
  background: #ffffff;
}

.svc-slider__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cccccc;
  cursor: pointer;
}

.svc-slider__dot.is-active {
  width: 60px;
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(to right, #efff75 1.55%, #cccccc 101.04%);
}

/* ============================================
   모바일 - Figma 2962:11098 (SS/Partner/공구 벤더사/Mobile, 375x6556)
   ============================================
   브레이크포인트는 기존 레포 관례를 따라 max-width: 768px 하나만 쓴다.
   768~1200 구간은 PC 레이아웃이 그대로 줄어든다(슬라이드가 유동 폭이라 잘리지 않는다).

   [모바일 실측 토큰] 스펙에 실측값이 있는 것 — 파생 아님
     좌우 패딩 20 / 섹션 상하 패딩 112 / 섹션 내 블록 gap 30 / 헤더 블록 gap 10
     섹션 타이틀 22px 600, lh 1.3, ls -0.023em
     섹션 서브   14.7px 500, lh 1.5, ls -0.034em
     슬라이드 제목 22px 700, ls -0.023em / 본문 14.7px 500, ls -0.034em
     border-radius 40 은 모바일에서도 그대로다(모바일 슬라이드 실측이 40)
     이미지 종횡비는 PC 와 같다(image6 745:479 = 335:215.4 로 확인)

   [세로 리듬] 모바일 y
     히어로 0~812 / 트랙소개+카드 812~1624 / 핵심가치 SaaS 1624~2284
     매칭 2284~3096 / 매출확장 3096~3908 / 핵심가치 App 3908~4568
     정산 4568~5380 / 성장 5380~6192 / 푸터 6192~6556

   [없는 요소]
   - 인디케이터 — 모바일 시안에 Asset/Bar/Active 가 없다. 스와이프로만 넘긴다
   - 슬라이더 서브의 줄바꿈 — PC 2줄이 모바일에선 한 단락으로 합쳐진다
     (마크업의 br.svc-slider__br--pc 를 숨겨서 처리)

   [파생] 스펙에 모바일 실측이 없어 PC 에서 파생한 것. 실측 나오면 여기만 교체하면 된다
     트랙소개·핵심가치 제목/서브 → 위 '섹션 타이틀/서브' 토큰으로 스냅
     트랙소개·핵심가치 섹션 gap 80 → 30 (섹션 내 블록 gap 토큰)
     핵심가치 카드 → width 100%, 종횡비 940:420 유지 (에셋이 1880x840 가로형)
     카드 2개 열 제목 30 → 22 / 열 내부 gap 40 → 20 / 워드마크 ×0.8 (버튼 h40 → h32)
     (푸터 모바일은 파생이 아니라 실측이다 — res/css/ss-footer.css 768 분기 참조)
   ============================================ */
@media screen and (max-width: 768px) {
  /* ---- 히어로 - Figma 2928:16220 (375x812) ----
     padding 0 20px, 타이틀 블록 padding-bottom 44, center
     로고 87x10 (2026-07-31 개정에서 모바일에도 추가됨)
     매출 모멘텀을 위한  30px 700, lh 1.3, ls -0.008em, #000000
     서비스 트랙        22px 600, lh 1.3, ls -0.023em, #333333
     높이는 PC 와 마찬가지로 100dvh 를 그대로 쓴다(사용자 요청분이라 분기하지 않는다) */
  .svc-hero {
    padding: 0 20px;
  }

  .svc-hero__inner {
    padding-bottom: 44px;
  }

  /* 모바일 전용 강제 개행 (트랙 타이틀 2줄 / 카드 제목 3줄). PC 에서는 숨는다 */
  .svc-br--m {
    display: inline;
  }

  .svc-hero__logo {
    padding: 20px 0; /* PC 10px 0 */
  }

  .svc-hero__logo img {
    width: 87px;
    height: 10px;
  }

  .svc-hero__title {
    letter-spacing: normal; /* 줄마다 값이 달라 각 줄에서 지정한다 */
  }

  .svc-hero__title-1 {
    font-size: 30px;
    letter-spacing: -0.008em;
  }

  .svc-hero__title-2 {
    font-size: 22px;
    letter-spacing: -0.023em;
  }

  /* ---- 트랙 소개 - Figma 2962:11104 (Banner 4) ----
     섹션 padding 112px 20px 0, gap 30
     타이틀 22px 600 center, 2줄 강제 개행 (하나의 트랙에서 / 모멘텀을 만드세요)
     서브   14.7px 500, lh 1.5, ls -0.034em, #666, 2줄
     image 6 335x215, radius 40 — PC 745x479 와 종횡비 동일(1.556) → 같은 에셋 재사용
     설명문 12.5px 500, lh 1.5, #666, 3줄 (PC 14.7px) */
  .svc-track {
    padding: 112px 0 0;
  }

  .svc-track__inner {
    gap: 30px;
    padding: 0 20px;
  }

  .svc-track__head {
    gap: 10px;
  }

  /* 헤더 각 줄 내부 padding 0 20px (공통) */
  .svc-track__title,
  .svc-track__sub {
    padding: 0 20px;
  }

  .svc-track__title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.023em;
  }

  .svc-track__sub {
    font-weight: 500;
    font-size: 14.7px;
    line-height: 1.5;
    letter-spacing: -0.034em;
  }

  .svc-track__flow {
    width: 100%;
  }

  .svc-track__desc {
    font-size: 12.5px; /* PC 14.7px */
  }

  /* ---- 카드 2개 - Figma 2962:11104 안 (트랙 소개 섹션에 이어진다) ----
     각 159.5폭, padding 12, radius 30, background #FFFFFF, 내부 gap 40
     카드 간격 16 (175.5 − 159.5)
     라벨 9px 500 #666 (PC 14.7)
     제목 17.5px 600 lh 1.2 center, 3줄 강제 개행
     버튼 h32, padding 5.6px 11.2px, radius 14 / 워드마크 114.219x11.2 · 94.866x11.2 */
  .svc-cards {
    min-height: 0; /* PC 의 600 고정 해제 */
    padding: 30px 0 0; /* 트랙 소개 설명문과 섹션 gap 30 */
  }

  .svc-cards__inner {
    gap: 16px;
    flex-wrap: nowrap;
    padding: 0 20px;
  }

  .svc-cards__col {
    flex: 1 1 0;
    gap: 40px;
    min-width: 0;
    width: auto;
    padding: 12px;
    border-radius: 30px;
    background: #ffffff;
  }

  .svc-cards__text {
    gap: 20px;
  }

  .svc-cards__label {
    font-size: 9px;
    font-weight: 500; /* PC 400 */
  }

  .svc-cards__title {
    font-size: 17.5px;
    line-height: 1.2; /* PC 1.3 */
    letter-spacing: -0.023em;
  }

  .svc-cards__btn {
    height: 32px;
    padding: 5.6px 11.2px;
  }

  .svc-cards__btn--blue img {
    width: 114.219px;
    height: 11.2px;
  }

  .svc-cards__btn--lime img {
    width: 94.866px;
    height: 11.2px;
  }

  /* ---- 핵심가치 카드 - Figma 2962:11141(SaaS) / 2962:11179(App) ----
     섹션 padding 112px 20px 0, 타이틀 22px 600, 타이틀 아래 44px 스페이서
     카드 344x420(SaaS) / 335x420(App) — SaaS 는 컨테이너 335 를 좌우 4.5px 씩 넘친다(시안 그대로)
     에셋은 모바일 전용 크롭(688x840 / 670x840). PC 940x420 과 비율이 달라 그대로 쓰면 찌그러진다
     → 마크업의 <picture><source media> 로 분기 */
  .svc-core {
    padding: 112px 0 0;
    scroll-margin-top: 103px; /* 모바일 헤더 높이 103 = pad 60 + 햄버거 28 + pad 15 */
  }

  .svc-core__inner {
    gap: 44px; /* 타이틀 아래 스페이서 */
    padding: 0 20px;
  }

  .svc-core__title {
    padding: 0 20px; /* 헤더 각 줄 내부 padding (공통) */
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.023em;
  }

  .svc-core__card {
    height: 420px;
    aspect-ratio: auto; /* PC 의 940/420 해제 — 모바일은 폭·높이를 직접 준다 */
  }

  /* Figma 344 / 335 는 375 폭에서의 값이다(컨테이너 335 기준 +9 / ±0).
     화면이 넓어지면 같이 늘어나야 하므로 컨테이너 대비로 건다.
     .svc-core__picture 가 display:contents 라 % 기준은 .svc-core__inner(=콘텐츠 폭) */
  .svc-core--saas .svc-core__card {
    width: calc(100% + 9px); /* 시안대로 컨테이너를 좌우 4.5씩 넘긴다 */
    max-width: none;
  }

  .svc-core--app .svc-core__card {
    width: 100%;
  }

  /* ---- 슬라이더 - Figma 2928:16287 (Banner 3 기준, 4개 동일 컴포넌트) ----
     섹션 padding 112px 20px 0, gap 30
     헤더 블록 gap 10, 각 줄 내부 padding 0 20px
     트랙 gap 20 — 슬라이드 335, 피치 355 */
  .svc-slider {
    padding: 112px 0 0;
  }

  .svc-slider__inner {
    gap: 30px;
    padding: 0 20px;
  }

  .svc-slider__head {
    gap: 10px;
  }

  .svc-slider__title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.023em;
  }

  .svc-slider__sub {
    padding: 0 20px; /* 헤더 각 줄 내부 들여쓰기 → 텍스트 폭 295 */
    font-size: 14.7px;
    letter-spacing: -0.034em;
  }

  .svc-slider__title {
    padding: 0 20px;
  }

  /* PC 2줄 → 모바일 한 단락 */
  .svc-slider__br--pc {
    display: none;
  }

  .svc-slider__track {
    gap: 20px; /* 슬라이드 335 + 20 = 피치 355 */
  }

  /* 세로 배치: 텍스트 335x249 위 / 썸네일 335x274.25 아래 */
  .svc-slide {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .svc-slide__text {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    gap: 30px;
    padding: 30px;
  }

  .svc-slide__title {
    font-size: 22px;
    letter-spacing: -0.023em;
  }

  .svc-slide__body {
    height: 130px; /* 실측 */
    padding-right: 0;
    font-size: 14.7px;
    letter-spacing: -0.034em;
  }

  .svc-slide__thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 307;
  }

  /* 모바일 시안엔 인디케이터가 없다 → 스와이프로만 넘긴다 */
  .svc-slider__dots {
    display: none;
  }

  /* ---- 푸터 ----
     모바일 푸터는 res/css/ss-footer.css 의 768 분기가 실측값으로 처리한다
     (Figma 2962:11226 — 4열 메뉴가 통째로 없는 축약형).
     이 파일은 ss-footer.css 뒤에 로드되므로 여기서 겹쳐 쓰면 그 실측값을 덮어쓴다 → 두지 않는다 */
}

/* ============================================
   접근성 — 모션 축소 선호 시 이동 애니메이션 해제
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .svc-slider__track {
    transition: none;
  }
}

/* ============================================
   스크롤 핀 슬라이더 (시안 외 추가 — 사용자 요청)
   ============================================
   동작·수치는 res/js/ss-scroll-pin.js. 여기서는 붙는 방식만 정의한다.
   ============================================ */
.svc-slider__inner.is-pinned {
  position: sticky;
  top: var(--ss-pin-top, 0);
  transform-origin: top center;
}