/* ============================================================
   Sync-On 랜딩 — 토큰
   네이비 + 화이트 + 포인트 오렌지 (사용자 지정)
   타이포 / 스페이싱 / 컴포넌트 패턴은 디자인 시스템 기반
   ============================================================ */

/* All typography uses Pretendard (per user request) */

@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-ExtraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* === 브랜드 컬러 === */
  --navy-900: #06152F;
  --navy-800: #0A1F44;
  --navy-700: #11295A;
  --navy-600: #1B3A7A;
  --navy-100: #E6ECF5;

  --orange-500: #FF6B2B;
  --orange-600: #E85814;
  --orange-100: #FFE7DA;

--sky-500: #22A9DC;

  --white: #FFFFFF;
  --bg-soft: #F5F7FA;
  --bg-page: #FFFFFF;

  --ink-900: #0F1A2E;
  --ink-700: #36425A;
  --ink-500: #6B7689;
  --line-100: #E5E9EF;
  --line-200: #D5DBE3;

  /* === 타입 — 모든 글자 Pretendard === */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* === 스페이싱 (기준 1440px에서 8px = 0.5rem) === */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(10,31,68,.04), 0 1px 1px rgba(10,31,68,.03);
  --shadow-md: 0 8px 24px rgba(10,31,68,.06), 0 1px 3px rgba(10,31,68,.04);
  --shadow-lg: 0 24px 48px rgba(10,31,68,.12), 0 4px 8px rgba(10,31,68,.05);

  --container-max: 100%;
  --container-pad: 9.5rem;       /* 본문 섹션 좌우 여백 */
  --header-pad: 1rem;            /* 헤더 좌우 여백 */
}

* { box-sizing: border-box; }

/* === 유동 스케일 기준 ===
   디자인 기준 1440px에서 1rem = 16px (16 / 1440 = 1.1111vw).
   상한 없이 화면 폭에 정비례해 rem 기반 수치 전체가 확대·축소됨.
   13px 하한 = 화면 폭 1170px 이하에서는 더 작아지지 않음. */
html { font-size: max(13px, 1.1111vw); }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "tnum";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ============================================================
   반응형 — 모바일에서 배치 전환
   브레이크포인트: 모바일 ≤767 / 데스크탑 ≥768
   ※ 크기는 rem 배율이 담당. 여기는 '배치' 전환만.
   ============================================================ */

.only-mobile { display: none !important; }
.sp-m { display: none; }

@media (max-width: 767px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: revert !important; }

  /* 좁은 화면에서는 비례 여백이 과해지므로 고정값으로 대체 */
  :root { --container-pad: 20px; --header-pad: 20px; }

  /* 다단 그리드 → 1열 */
  .rsp-stack { grid-template-columns: 1fr !important; }
  .rsp-2col { grid-template-columns: 1fr 1fr !important; }

  /* 로고 월 — 모바일 3열 */
  .rsp-logos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .rsp-row { grid-template-columns: 1fr !important; }
  .rsp-row > * { order: 0 !important; }

  /* 가로 스와이프 */
  .rsp-swipe {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -20px !important;
    padding-inline: 20px !important;
    scrollbar-width: none;
  }
  .rsp-swipe::-webkit-scrollbar { display: none; }
  .rsp-swipe > * { flex: 0 0 84% !important; scroll-snap-align: start; }

  /* 1열 전환 시: 좌/우 경계선 → 상단 경계선 */
  .rsp-divider-light > * { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .rsp-divider-light > * + * { border-top: 0.5px solid rgba(255,255,255,0.14) !important; padding-top: 28px !important; }
  .rsp-divider-dark > * { border-right: none !important; }
  .rsp-divider-dark > * + * { border-top: 1px solid var(--line-100) !important; }

  /* CTA 불릿: 1열 세로 */
  .rsp-bullets { flex-direction: column !important; gap: 16px !important; }

  /* CTA — 폼 카드 전체 너비 */
  .rsp-stack { justify-items: stretch !important; }
  .rsp-stack > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

  /* 한글 줄바꿈 */
  p { word-break: keep-all !important; overflow-wrap: break-word !important; }

  #cta form { padding: 24px 20px !important; }
  #cta p { max-width: 100% !important; overflow: hidden !important; }

  br.br-desktop { display: none; }
  .sp-m { display: inline; }

  /* 서비스 페이지 전용 (service.html) */
  .rsp-areas { grid-template-areas: "head" "visual" "body" !important; }
  .rsp-visual { align-self: start !important; margin: 8px 0 24px !important; }
  .rsp-diagram { grid-template-columns: 1fr !important; }
  .rsp-diagram svg { transform: rotate(90deg); }

  /* 모바일 전용 글자 크기 (rem 배율 대신 고정) */
  .rsp-display { font-size: clamp(30px, 8.5vw, 46px) !important; line-height: 1.18 !important; }
  .rsp-h1 { font-size: clamp(26px, 6.5vw, 38px) !important; line-height: 1.25 !important; }
  .rsp-h2 { font-size: clamp(19px, 5vw, 24px) !important; }
  .rsp-body { font-size: 15px !important; }
  .rsp-card-title { font-size: 19px !important; }
  .rsp-card-body { font-size: 14.5px !important; }
  .rsp-num { font-size: clamp(34px, 11vw, 52px) !important; }

  .rsp-pad { padding: 28px 22px !important; }
}

/* ============================================================
   섹션 공용 타이포 — 전 섹션 글자 크기를 여기서 통제
   각 컴포넌트에는 fontSize를 쓰지 말고 이 클래스만 부여할 것.
   크기 조절: 원하는 px ÷ 16 = rem
   ============================================================ */
.sec-title {
  font-size: 3rem;          /* 1440px에서 56px */
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--navy-800);
  margin: 0;
}
.sec-lead {
  font-size: 1rem;       /* 1440px에서 21px */
  line-height: 1.8;
  letter-spacing: -0.7px;
  font-weight: 400;
  font-family: var(--font-sans);
  margin-top: 1.5rem;
}
.card-title {
  font-size: 1.375rem;        /* 1440px에서 22px */
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 700;
  font-family: var(--font-sans);
}
.card-body {
  font-size: 1rem;            /* 1440px에서 16px */
  line-height: 1.7;
  font-weight: 400;
  font-family: var(--font-sans);
  margin: 0;
}

.case-title {
  font-size: 2.125rem;        /* 1440px에서 34px */
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--navy-800);
  margin: 0;
}

.case-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid var(--line-200);
  color: var(--ink-500);
}
.case-tag-industry {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
  font-weight: 700;
}

/* 사례 성과 수치 — 제목 아래 한 줄 */
.case-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.75rem;
  margin-top: 1.5rem;
}
.case-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: -0.01em;
  margin-right: 0.5rem;
}
.case-stat-value {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}
.case-stat-primary .case-stat-value { color: var(--orange-500); }

/* === Type scale === */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-500);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--navy-800);
  margin: 0;
}
.t-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-700);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-500);
  line-height: 1.6;
}
.t-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* === Button === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  padding: 1.125rem 2rem;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn-orange {
  background: var(--orange-500);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,107,43,.32);
}
.btn-orange:hover { background: var(--orange-600); }
.btn-white { background: #fff; color: var(--navy-800); }
.btn-white:hover { background: #fff; color: var(--navy-700); }
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
  padding: 1.03125rem 1.875rem;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.6); }
.btn-ghost-navy {
  background: transparent;
  color: var(--navy-800);
  border: 1.5px solid var(--line-200);
  padding: 1.03125rem 1.875rem;
}
.btn-ghost-navy:hover { border-color: var(--navy-800); }

/* === 버튼 — 위치별 개별 조절 ===
   각 버튼은 자기 클래스만 고치면 다른 버튼에 영향 없음.
   환산: 원하는 px ÷ 16 = rem / padding은 (위아래) (좌우) 순서 */

.btn-header  { padding: 0.75rem 1.375rem;  font-size: 0.875rem; }   /* 헤더 CTA — 12×22px, 14px */
.btn-hero    { padding: 1rem 1.5rem;   font-size: 0.8rem; }  /* 히어로 CTA — 22×40px, 17px */
.btn-case    { padding: 1rem 1.5rem;     font-size: 0.8rem; }       /* Difference 사례 보기 — 18×32px, 16px */
.btn-submit  { padding: 1.375rem 2.5rem;   font-size: 1.0625rem; }  /* CTA 폼 제출 — 22×40px, 17px */
.btn-menu    { padding: 1.125rem 2rem;     font-size: 1rem; }       /* 모바일 메뉴 CTA — 18×32px, 16px */

/* 구버전 — 서비스/사례 페이지에서 아직 사용 중. 해당 페이지 정리 후 삭제 예정 */
.btn-lg { padding: 1.375rem 2.5rem; font-size: 1.0625rem; }
.btn-sm { padding: 0.75rem 1.375rem; font-size: 0.875rem; }

/* === 사례 페이지 히어로 배경 ===
   이미지 주소는 컴포넌트가 CSS 변수로 전달.
   화면 폭에 따라 데스크탑/모바일 이미지를 교체한다. */
.case-hero-bg {
  background-image: var(--bg-desktop);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .case-hero-bg {
    background-image: var(--bg-mobile);
    background-position: center top;
  }
}

/* 히어로 텍스트 가독성용 가림막 — 데스크탑은 좌→우, 모바일은 위→아래 */
.case-hero-veil {
  background: linear-gradient(90deg, #06152F 0%, rgba(6,21,47,0.85) 30%, rgba(6,21,47,0) 60%);
}
@media (max-width: 767px) {
  /* 모바일 이미지는 중앙이 이미 비어 있어 가림막 불필요 */
  .case-hero-veil { background: none; }
}

/* === 서비스 페이지 === */
.svc-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.svc-spec > * + *::before {
  content: '·';
  color: var(--ink-300);
  margin-right: 1.25rem;
}

/* 섹션 이동 메뉴 — 통째로 삭제 가능 */
.svc-nav {
  position: sticky;
  top: 4.75rem;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0.5px solid var(--line-100);
}
.svc-nav-inner {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.875rem;
}
.svc-nav-inner::-webkit-scrollbar { display: none; }
.svc-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-500);
  white-space: nowrap;
  transition: color .15s ease;
}
.svc-nav a:hover { color: var(--navy-800); }

/* 이미지 자리 (실제 이미지 준비 전 임시) */
.svc-figure {
  aspect-ratio: 9 / 16;
  border: 1px dashed var(--line-200);
  border-radius: 0.75rem;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--ink-300);
}
.svc-figure img,
.svc-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.75rem;
}

/* 원본 비율 유지 (광고 대시보드 등 가로형) */
.svc-figure-free {
  aspect-ratio: auto;
  min-height: 12rem;
}
.svc-figure-free img,
.svc-figure-free video {
  height: auto;
  object-fit: contain;
}

/* 카드 자동 흐름 (마퀴) */
.svc-marquee {
  overflow: hidden;
  margin-top: 3rem;
}
.svc-marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: svc-scroll 20s linear infinite;
}
.svc-marquee:hover .svc-marquee-track {
  animation-play-state: paused;
}
.svc-marquee-track > * {
  flex: 0 0 13rem;
}
@keyframes svc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.75rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-marquee-track { animation: none; }
}
@media (max-width: 767px) {
  .svc-marquee-track > * { flex: 0 0 16rem; }
}

/* ============================================================
   FlowSection — 고객 흐름 4단계 (홈 영상 아래)
   ============================================================ */
.fs-sec {
  display: grid;
  grid-template-columns: 53% 47%;
  min-height: 53.75rem;
  background: #fff;
  overflow: hidden;
}
.fs-visual {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 2% 2.5rem 7%;
}
.fs-fig { position: relative; width: min(88%, 37.5rem); opacity: 0; }
.fs-img { display: block; width: 100%; height: auto; }

/* 강조 효과 — 다른 단계 위에 흰 막을 씌워 흐리게 */
.fs-veil {
  position: absolute; border-radius: 2.25rem; background: #fff;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.fs-fig.fs-focus .fs-veil { opacity: .62; }
.fs-fig.fs-focus .fs-veil.fs-on { opacity: 0; }

.fs-badge {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  min-width: 2.75rem; height: 2.75rem; padding: 0 .625rem; border-radius: 1.375rem;
  background: var(--ink-900); color: #fff;
  font-size: .9375rem; font-weight: 700; letter-spacing: .02em;
  display: grid; place-items: center;
  box-shadow: 0 .5rem 1.25rem -.375rem rgba(15,26,46,.45);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.4), background .25s;
}
.fs-badge.fs-on { background: var(--orange-500); transform: translate(-50%, -50%) scale(1.18); }

.fs-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 8% 5rem 4%;
}
.fs-text > * { opacity: 0; }
.fs-eyebrow { margin: 0 0 1.125rem; font-size: .9375rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-700); }
.fs-title { margin: 0 0 1.5rem; font-size: 3.25rem; font-weight: 800; line-height: 1.24; letter-spacing: -.03em; color: var(--ink-900); }
.fs-title em { font-style: normal; color: var(--sky-500); }
.fs-lead { margin: 0 0 2.5rem; max-width: 32.5rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-700); }

.fs-steps { border-top: 1px solid var(--ink-900); }
.fs-step {
    display: grid; grid-template-columns: 3.625rem 1fr; align-items: center;
  gap: .375rem .875rem; padding: 1.25rem .25rem;
  border-bottom: 1px solid var(--line-100); transition: background .2s;
}
.fs-step:hover, .fs-step.fs-on { background: #FAFBFC; }
.fs-num { font-size: .875rem; font-weight: 700; letter-spacing: .04em; color: var(--sky-500); }
.fs-name { font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); }
.fs-name small { margin-left: .625rem; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink-500); }
.fs-tags { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: .375rem; }
.fs-tag { padding: .375rem .75rem; border-radius: 999px; background: #F2F4F7; font-size: .8125rem; font-weight: 600; color: var(--ink-700); }
.fs-more {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: 1.75rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--ink-900); text-decoration: none; transition: color .2s;
}
.fs-more svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s; }
.fs-more:hover { color: var(--sky-500); }
.fs-more:hover svg { transform: translateX(.25rem); }

/* 등장 + 떠 있는 움직임
   ※ 두 애니메이션을 반드시 한 규칙에 같이 적을 것.
     따로 적으면 뒤에 적힌 규칙이 앞의 것을 덮어써서 한쪽이 멈춤. */
.fs-sec.fs-in .fs-fig { animation: fsRise .9s cubic-bezier(.2,.7,.2,1) forwards, fsFloat 6s ease-in-out 1s infinite; }
.fs-sec.fs-in .fs-text > * { animation: fsRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.fs-sec.fs-in .fs-text > :nth-child(2) { animation-delay: .08s; }
.fs-sec.fs-in .fs-text > :nth-child(3) { animation-delay: .16s; }
.fs-sec.fs-in .fs-text > :nth-child(4) { animation-delay: .24s; }
@keyframes fsRise { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
@keyframes fsFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1rem; } }

@media (prefers-reduced-motion: reduce) {
  .fs-fig, .fs-text > *,
  .fs-sec.fs-in .fs-fig, .fs-sec.fs-in .fs-text > * { opacity: 1; animation: none; transform: none; }
}

/* 태블릿·모바일 — 글 먼저, 이미지 아래 + 글자 크기 보정 (rem 하한 13px 기준) */
@media (max-width: 1023px) {
  .fs-sec { grid-template-columns: 1fr; min-height: 0; }
  .fs-text { order: 1; padding: 4rem var(--container-pad) 2.25rem; }
  .fs-visual { order: 2; padding: 0 var(--container-pad) 3.5rem; }
  .fs-fig { width: min(86%, 32rem); }
  .fs-title { font-size: 2.25rem; }
  .fs-lead { font-size: 1.25rem; margin-bottom: 1.75rem; }
    .fs-step { grid-template-columns: 3.25rem 1fr; padding: 1rem .125rem; }
  .fs-num { font-size: .9375rem; }
  .fs-name { font-size: 1.375rem; }
  .fs-name small { display: block; margin: .25rem 0 0; font-size: 1rem; }
  .fs-tag { font-size: .9375rem; }
    .fs-more { font-size: 1.25rem; }
  .fs-badge { min-width: 2.625rem; height: 2.625rem; font-size: .875rem; }
}

/* ============================================================
   ExpertsSection — 3대 핵심 역량 (홈 섹션 3)
   ============================================================ */
.ex-sec {
  display: grid;
  grid-template-columns: 47% 53%;
  min-height: 53.75rem;
  background: #fff;
  overflow: hidden;
  word-break: keep-all;
}

/* 왼쪽 글 */
.ex-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 3% 5rem 8.5%;
}
.ex-text > * { opacity: 0; }
.ex-eyebrow { margin: 0 0 1.125rem; font-size: .9375rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-700); }
.ex-title { margin: 0 0 1.5rem; font-size: 3.25rem; font-weight: 800; line-height: 1.24; letter-spacing: -.03em; color: var(--ink-900); }
.ex-title em { font-style: normal; color: var(--sky-500); }
.ex-lead { margin: 0 0 2.75rem; max-width: 32rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-700); }
.ex-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-900); }
.ex-item { transition: opacity .3s; }
.ex-num { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 700; letter-spacing: .04em; color: var(--sky-500); }
.ex-role { display: block; margin-bottom: .5rem; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); transition: color .25s; }
.ex-desc { display: block; font-size: .9375rem; line-height: 1.6; color: var(--ink-500); }
.ex-list.ex-focus .ex-item { opacity: .4; }
.ex-list.ex-focus .ex-item.ex-on { opacity: 1; }
.ex-item.ex-on .ex-role { color: var(--sky-500); }

/* 오른쪽 이미지 3장 */
.ex-visual { position: relative; display: flex; align-items: center; padding: 3rem 5% 3rem 3%; }
.ex-stage { position: relative; width: 100%; aspect-ratio: 10 / 6.65; max-height: 34rem; }
.ex-card, .ex-after, .ex-before { position: absolute; opacity: 0; transition: opacity .35s; }
.ex-stage.ex-focus .ex-card, .ex-stage.ex-focus .ex-after, .ex-stage.ex-focus .ex-before, .ex-stage.ex-focus .ex-arrow { opacity: .35 !important; }
.ex-stage.ex-focus .ex-on { opacity: 1 !important; }

/* 성과 카드 */
.ex-card {
  left: 5%; top: 0; width: 90%; z-index: 1; overflow: hidden;
  background: #fff; border-radius: 1.5rem;
  box-shadow: 0 .125rem .25rem rgba(15,26,46,.05), 0 2rem 4rem -1.5rem rgba(15,26,46,.3);
}
.ex-card-head { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 1.75rem 0; }
.ex-chip { padding: .375rem .75rem; border-radius: 999px; background: #F2F4F7; font-size: .8125rem; font-weight: 700; color: var(--ink-900); }
.ex-period { font-size: .8125rem; font-weight: 500; color: var(--ink-500); }
.ex-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 1.75rem 1.75rem 1.5rem; }
.ex-kpi span { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 600; color: var(--ink-500); }
.ex-kpi b { display: block; font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ex-kpi b small { margin-left: .125rem; font-size: 1.25rem; font-weight: 700; }
.ex-kpi.ex-main b { color: var(--sky-500); }
.ex-foot { margin: 0; padding: 0 1.75rem 1.25rem; font-size: .8125rem; color: var(--ink-500); }
.ex-shot { position: relative; height: 9rem; overflow: hidden; border-top: 1px solid var(--line-100); }
.ex-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; opacity: .9; }
.ex-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 45%); }
.ex-shot i { position: absolute; right: .75rem; bottom: .75rem; z-index: 1; padding: .3rem .65rem; border-radius: 999px; background: rgba(15,26,46,.78); font-style: normal; font-size: .75rem; font-weight: 600; color: #fff; }

/* 비포·애프터 */
.ex-after { left: 51%; top: 44.5%; width: 30%; z-index: 2; }
.ex-before { left: 19.5%; top: 52.9%; width: 26%; z-index: 3; }
.ex-ph { position: relative; overflow: hidden; border: .3125rem solid #fff; border-radius: 1.25rem; background: #fff; box-shadow: 0 1.5rem 3rem -1rem rgba(15,26,46,.4); }
.ex-ph img { display: block; width: 100%; height: auto; }
.ex-tag { position: absolute; top: .75rem; left: .75rem; z-index: 2; padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.ex-before .ex-tag { background: #fff; color: var(--ink-900); }
.ex-after .ex-tag { background: var(--orange-500); color: #fff; }
.ex-cap { display: block; margin-top: .625rem; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--ink-700); }
.ex-arrow {
    position: absolute; left: 45.8%; top: 68.5%; z-index: 4; opacity: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ink-900);
  display: grid; place-items: center; box-shadow: 0 .5rem 1rem -.25rem rgba(15,26,46,.4);
}
.ex-arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: #fff; stroke-width: 2.4; }

/* 등장 순서: 글 → 비포 → 화살표 → 애프터(쓸리듯) → 성과 카드
   ※ 등장과 떠 있는 움직임은 반드시 한 규칙에 같이 적을 것 (따로 적으면 서로 덮어씀) */
.ex-sec.ex-in .ex-text > * { animation: exRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.ex-sec.ex-in .ex-text > :nth-child(2) { animation-delay: .08s; }
.ex-sec.ex-in .ex-text > :nth-child(3) { animation-delay: .16s; }
.ex-sec.ex-in .ex-text > :nth-child(4) { animation-delay: .24s; }
.ex-sec.ex-in .ex-before { animation: exRise .8s cubic-bezier(.2,.7,.2,1) .2s forwards, exFloat 6s ease-in-out 2.4s infinite; }
.ex-sec.ex-in .ex-arrow  { animation: exPop .5s cubic-bezier(.2,.9,.3,1.4) .75s forwards; }
.ex-sec.ex-in .ex-after  { animation: exWipe .9s cubic-bezier(.65,0,.35,1) .95s forwards, exFloat 7s ease-in-out 2.6s infinite; }
.ex-sec.ex-in .ex-card   { animation: exRise .9s cubic-bezier(.2,.7,.2,1) 1.5s forwards, exFloat 8s ease-in-out 3s infinite; }
@keyframes exRise  { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
@keyframes exPop   { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes exWipe  { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes exFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.75rem; } }

@media (prefers-reduced-motion: reduce) {
  .ex-text > *, .ex-before, .ex-after, .ex-card, .ex-arrow,
  .ex-sec.ex-in .ex-text > *, .ex-sec.ex-in .ex-before, .ex-sec.ex-in .ex-after,
  .ex-sec.ex-in .ex-card, .ex-sec.ex-in .ex-arrow { opacity: 1; animation: none; transform: none; clip-path: none; }
}

/* 태블릿·모바일 — 글 → 성과 카드 → 비포·애프터 나란히 */
@media (max-width: 1023px) {
  .ex-sec { grid-template-columns: 1fr; min-height: 0; }
  .ex-text { padding: 4rem var(--container-pad) 2rem; }
  .ex-title { font-size: 2.25rem; }
  .ex-lead { margin-bottom: 2rem; font-size: 1.25rem; }
  .ex-list { grid-template-columns: 1fr; gap: 1rem; }
  .ex-item { display: grid; grid-template-columns: 3rem 1fr; column-gap: .5rem; }
  .ex-num { grid-row: 1 / 3; margin: .25rem 0 0; font-size: .9375rem; }
  .ex-role { margin-bottom: .25rem; font-size: 1.375rem; }
  .ex-desc { font-size: 1rem; }
  .ex-visual { padding: 0 var(--container-pad) 3.5rem; }
  .ex-stage { display: grid; grid-template-columns: 1fr 1.25fr; gap: .875rem; align-items: end; aspect-ratio: auto; max-height: none; }
  .ex-card, .ex-after, .ex-before { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .ex-card { grid-column: 1 / 3; }
  .ex-before { order: 1; }
  .ex-after { order: 2; }
  .ex-arrow { display: none; }
  .ex-kpi b { font-size: 2.25rem; }
  .ex-kpi b small { font-size: 1.125rem; }
  .ex-kpi span, .ex-chip, .ex-period, .ex-foot { font-size: .9375rem; }
    .ex-tag { font-size: .875rem; }
  .ex-cap { font-size: .9375rem; }
}

/* ============================================================
   CasesSection — 성과 사례 (홈 섹션 4)
   ============================================================ */
.cs-sec {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  padding: 7rem 0;
  background: #fff;
  overflow: hidden;
  word-break: keep-all;
}

/* 왼쪽 배너 — 화면 왼쪽 끝에 붙음 */
.cs-card { padding-right: 1rem; }
.cs-banner {
  display: block; overflow: hidden; opacity: 0;
  border-radius: 0 1.25rem 1.25rem 0;
  box-shadow: 0 2rem 4rem -2rem rgba(15,26,46,.45);
}
.cs-banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cs-banner:hover img { transform: scale(1.04); }

/* 오른쪽 글 */
.cs-text { padding: 0 8.5% 0 7%; }
.cs-text > * { opacity: 0; }
.cs-eyebrow { margin: 0 0 1.125rem; font-size: .9375rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-700); }
.cs-h2 { margin: 0; font-size: 3.25rem; font-weight: 800; line-height: 1.24; letter-spacing: -.03em; color: var(--ink-900); }
.cs-h2 em { font-style: normal; color: var(--sky-500); }
.cs-case { max-width: 32rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ink-900); }
.cs-q { margin: 0 0 .75rem; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); }
.cs-desc { margin: 0 0 1.75rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-700); }
.cs-link { display: inline-flex; align-items: center; gap: .375rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink-900); text-decoration: none; transition: color .2s; }
.cs-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s; }
.cs-link:hover { color: var(--sky-500); }
.cs-link:hover svg { transform: translateX(.25rem); }

/* 등장: 배너가 쓸리듯 드러남 → 글이 차례로 떠오름 */
.cs-sec.cs-in .cs-banner { animation: csReveal 1s cubic-bezier(.65,0,.35,1) forwards; }
.cs-sec.cs-in .cs-text > * { animation: csRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.cs-sec.cs-in .cs-text > :nth-child(1) { animation-delay: .3s; }
.cs-sec.cs-in .cs-text > :nth-child(2) { animation-delay: .38s; }
.cs-sec.cs-in .cs-text > :nth-child(3) { animation-delay: .5s; }
@keyframes csRise { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
@keyframes csReveal { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .cs-banner, .cs-text > *,
  .cs-sec.cs-in .cs-banner, .cs-sec.cs-in .cs-text > * { opacity: 1; animation: none; transform: none; clip-path: none; }
}

/* 태블릿·모바일 — 글 먼저, 배너 아래 */
@media (max-width: 1023px) {
  .cs-sec { grid-template-columns: 1fr; padding: 4rem 0 3.5rem; }
  .cs-text { order: 1; padding: 0 var(--container-pad) 2.25rem; }
  .cs-card { order: 2; padding: 0 var(--container-pad); }
  .cs-banner { border-radius: 1rem; }
  .cs-h2 { font-size: 2.25rem; }
  .cs-case { margin-top: 1.75rem; padding-top: 1.5rem; }
  .cs-q { font-size: 1.375rem; }
  .cs-desc, .cs-link { font-size: 1.25rem; }
}

/* ============================================================
   Clients — 고객사 로고 (홈 섹션 5)
   ============================================================ */
.cl-sec {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  padding: 7rem 0;
  background: #fff;
  overflow: hidden;
  word-break: keep-all;
}

/* 왼쪽 글 */
.cl-text { padding: 0 4% 0 8.5%; }
.cl-text > * { opacity: 0; }
.cl-eyebrow { margin: 0 0 1.125rem; font-size: .9375rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-700); }
.cl-h2 { margin: 0 0 1.5rem; font-size: 3.25rem; font-weight: 800; line-height: 1.24; letter-spacing: -.03em; color: var(--ink-900); }
.cl-h2 em { font-style: normal; color: var(--sky-500); }
.cl-lead { margin: 0; max-width: 30rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink-700); }
.cl-count { display: flex; align-items: baseline; gap: .625rem; margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--ink-900); }
.cl-count b { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--sky-500); font-variant-numeric: tabular-nums; }
.cl-count span { font-size: 1.0625rem; font-weight: 600; color: var(--ink-700); }
.cl-note { margin: .75rem 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); }

/* 오른쪽 로고 띠 — 좌우 끝은 흰색으로 흐려짐 */
.cl-wall { position: relative; padding: 1.5rem 0; opacity: 0; }
.cl-wall::before, .cl-wall::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 6rem; pointer-events: none; }
.cl-wall::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.cl-wall::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.cl-row { overflow: hidden; }
.cl-track { display: flex; align-items: center; gap: 4rem; width: max-content; will-change: transform; }
.cl-t1 { animation: clLeft 46s linear infinite; }
.cl-t2 { animation: clRight 52s linear infinite; }
.cl-t3 { animation: clLeft 40s linear infinite; }
@keyframes clLeft  { from { transform: translateX(0); }                     to { transform: translateX(calc(-50% - 2rem)); } }
@keyframes clRight { from { transform: translateX(calc(-50% - 2rem)); }     to { transform: translateX(0); } }
.cl-row:hover .cl-track { animation-play-state: paused; }
.cl-logo { flex: 0 0 auto; height: 6.5rem; display: flex; align-items: center; justify-content: center; }
.cl-logo img {
  display: block; width: auto; height: auto; max-height: 4rem; max-width: 11rem;
  filter: grayscale(100%); opacity: .5;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.cl-logo:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* 등장 */
.cl-sec.cl-in .cl-text > *, .cl-sec.cl-in .cl-wall { animation: clRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.cl-sec.cl-in .cl-text > :nth-child(2) { animation-delay: .08s; }
.cl-sec.cl-in .cl-text > :nth-child(3) { animation-delay: .16s; }
.cl-sec.cl-in .cl-text > :nth-child(4) { animation-delay: .24s; }
.cl-sec.cl-in .cl-text > :nth-child(5) { animation-delay: .3s; }
.cl-sec.cl-in .cl-wall { animation-delay: .2s; }
@keyframes clRise { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cl-text > *, .cl-wall,
  .cl-sec.cl-in .cl-text > *, .cl-sec.cl-in .cl-wall { opacity: 1; animation: none; transform: none; }
  .cl-track { animation: none !important; }
}

/* 태블릿·모바일 — 글 먼저, 로고 띠 아래 */
@media (max-width: 1023px) {
  .cl-sec { grid-template-columns: 1fr; padding: 4rem 0 3.5rem; }
  .cl-text { order: 1; padding: 0 var(--container-pad) 2.25rem; }
  .cl-wall { order: 2; }
  .cl-h2 { font-size: 2.25rem; }
  .cl-lead { font-size: 1.25rem; }
  .cl-count { margin-top: 1.75rem; padding-top: 1.5rem; }
  .cl-count b { font-size: 2.5rem; }
  .cl-count span { font-size: 1.125rem; }
  .cl-note { font-size: 1.375rem; }
  .cl-wall::before, .cl-wall::after { width: 2.5rem; }
  .cl-logo { height: 5rem; }
  .cl-track { gap: 2.5rem; }
}