@charset "UTF-8";

/* ============================================================
   기업 소개 — Figma 2928:35497 (PC 1200x12834, 13섹션)
   ============================================================
   [정본 스펙] _workspace/figma/company_2928-35497_spec.md
   [범위] 이번 파일은 **PC 구현**이다. 모바일 시안(개별 프레임 11개)은
          별도 실측 후 @media 로 추가한다 — 지금은 가로 스크롤만 막아 둔다.

   [레이아웃 방침]
   섹션 높이·요소 좌표가 전부 Figma 절대값으로 주어져 있고, 특히 연혁(2995px
   지그재그 11항목)은 y 간격이 불규칙하다. 그래서 각 섹션은
     .co-*__inner = position:relative; width:1200px; height:<Figma 높이>
   안에 자식을 Figma 좌표 그대로 absolute 배치한다. 수치 추적성이 최우선이고,
   모바일은 어차피 레이아웃이 통째로 다른 시안이라 @media 에서 갈아끼운다.

   [공통 타이포 — Figma style]
   48/Bold      : 48px / 700 / lh 1.3 / ls -0.25px      (섹션 타이틀)
   17.5/Medium  : 17.5px / 500 / lh 1.5 / ls -0.175px   (섹션 서브)
   20/Medium    : 20px / 500 / lh 1.3 / ls -0.25px
   ============================================================ */

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
  /* 1200 고정 폭 섹션이라 좁은 뷰포트에서 가로 스크롤이 생기지 않게 막는다.
     모바일 시안 반영 전까지의 임시 안전장치다 */
  overflow-x: hidden;
}

.co-hero *,
.co-copy *,
.co-banner *,
.co-stats *,
.co-global *,
.co-ai *,
.co-history *,
.co-brandtitle *,
.co-brandwall *,
.co-cta *,
.co-info * {
  box-sizing: border-box;
}

/* ============================================
   1. 히어로 - Figma 2928:35501 (1200x1032)
   ============================================
   [높이] 시안 1032 → 뷰포트 한 화면(100dvh). 서비스 소개 히어로와 같은 처리
   [배경] 흰 배경 + 캔버스 라인만(2026-08-18 사용자 지시).
     시안의 배경 3겹(방사형 그라디언트 #CCCCCC→#FFFFFF / 흰 70% 오버레이 /
     패턴 co_hero_pattern.jpg 50%)은 제거했다 — 패턴이 캔버스 라인의 정지 이미지라
     둘이 겹치면 결이 중복된다. 움직이는 캔버스 쪽을 남긴다.
     ※ 캔버스는 PC 전용이라 모바일 히어로는 흰 배경 + 텍스트만 남는다(사용자 확인분)
   ============================================ */
.co-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* dvh 를 모르는 브라우저가 앞의 vh 를 쓰도록 두 줄로 선언한다(뒤 선언이 이긴다) */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 70px;
  overflow: hidden;
  background-color: #ffffff;
}

/* 커서 반응 라인 배경 - 시안에 없는 사용자 요청분(hero-lines.js 가 생성).
   흰 배경 위, 텍스트(.co-hero__inner z-index 1) 아래에 깔린다 */
.co-hero__lines-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 캔버스는 장식이라 클릭·선택을 가로채지 않는다 */
}

.co-hero__inner {
  position: relative; /* 배경 레이어 위 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 104px;
}

.co-hero__logo {
  padding: 10px 0;
}

.co-hero__logo img {
  display: block;
  width: 139px;
  height: 16px;
}

.co-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: center;
  letter-spacing: -0.25px;
}

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

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

/* ============================================
   2. 한 줄 카피 - Figma 2928:35502 (1200x1032, #FFFFFF)
   ============================================
   텍스트는 섹션 정중앙. 36px/700, lh 1.3, ls -0.007em, #999999
   ============================================ */
.co-copy {
  display: flex;
  /* center 로 두면 핀이 섹션 높이를 늘렸을 때 문구가 늘어난 높이의 한가운데로 밀려난다
     (핀 계산은 '문구가 섹션 padding 만큼 아래'를 전제한다 → 문구가 화면에 오기 전에 색이 켜졌다).
     세로 위치는 padding 이 이미 시안대로 잡아 준다 */
  align-items: flex-start;
  justify-content: center;
  /* `.co-copy *` 는 자식만 잡는다 — 섹션 자신은 content-box 라
     핀이 인라인 height 를 쓸 때 padding 938.4 이 이중으로 더해진다(실측 3288 → 4226) */
  box-sizing: border-box;
  /* 시안 높이 1032 = 문구 2줄(36 × 1.3 × 2 = 93.6) + 상하 여백 469.2.
     스크롤 핀이 섹션 높이를 인라인으로 다시 쓰기 때문에 고정 height 로 두면
     핀이 걸리는 순간 여백이 사라진다(핀의 자연 높이 = 내용 높이 + padding).
     그래서 같은 1032 를 padding 으로 잡는다 — 핀이 없어도 시안 높이 그대로다 */
  padding: 469.2px 0;
  background: #ffffff;
}

.co-copy__text {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.007em;
  color: #999999;
  text-align: center;
}

/* 글자 단위 스크롤 색 전환 (시안 외 추가 — 사용자 요청).
   span 과 is-on 부여는 res/js/ss-scroll-pin.js 담당.
   섹션이 고정된 동안 스크롤을 내리는 만큼 앞에서부터 한 글자씩 켜진다 */
.co-copy__text.is-pinned {
  position: sticky;
  top: var(--ss-pin-top, 0);
  transform-origin: top center;
}

.co-copy__text .ss-pin-char {
  /* reset.css 가 span 에 line-height:150% 와 vertical-align:middle 을 요소 선택자로 직접 걸어 둔다.
     글자를 span 으로 쪼개는 순간 줄높이가 1.3 → 1.5 로 뛰고(+ middle 정렬로 줄당 2px 더)
     문구 높이가 94 → 98 로 달라진다 — 시안 높이 1032 가 어긋난다 */
  line-height: inherit;
  vertical-align: baseline;
  transition: color 0.18s ease-out;
}

.co-copy__text .ss-pin-char.is-on {
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  .co-copy__text .ss-pin-char {
    transition: none;
  }
}

/* ============================================
   3. 확장 구조 - Figma 2928:35504 (Section/Banner 1, 1200x1032)
   ============================================
   [요소] 헤더(y134.5) → 슬라이더(y369, 940x420) → 하단 3카드(y819)
   [슬라이더] 슬라이드 left 99 / 우측 여백 161 → 좌우 이웃이 걸쳐 보이는 peek.
              inner 에 overflow:hidden 을 걸어 Figma 프레임(1200)에서 잘리게 한다
   ============================================ */
.co-banner {
  background: #f2f2f2;
}

.co-banner__inner {
  position: relative;
  width: 1200px;
  height: 1032px;
  margin: 0 auto;
  overflow: hidden; /* peek 슬라이드를 프레임 폭에서 자른다 */
}

/* Figma 2928:35505 는 items-start — 좌측 정렬이다(가운데 정렬은 AI 섹션 헤더뿐) */
.co-banner__head {
  position: absolute;
  top: 134.5px;
  left: 128px;
  right: 128px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.co-banner__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.co-banner__sub {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

.co-slider {
  --co-slide-gap: 8px; /* 파생: 시안에 슬라이드 간 간격 표기가 없다. 서비스 소개 슬라이더와 동일 값 */
  position: absolute;
  top: 369px;
  left: 99px;
  width: 940px;
}

.co-slider__viewport {
  overflow: visible; /* peek — 자르는 것은 .co-banner__inner 담당 */
}

.co-slider__track {
  display: flex;
  gap: var(--co-slide-gap);
  transition: transform 0.4s ease;
  touch-action: pan-y; /* 세로 스크롤은 브라우저에 양보 (ss-slider.js 와 짝) */
  cursor: grab;
}

.co-slider__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.co-slide {
  flex: 0 0 940px;
  width: 940px;
  height: 420px;
  border-radius: 40px;
  overflow: hidden;
}

.co-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---- 하단 3카드 - Figma 2928:35508 ---- */
.co-cards {
  position: absolute;
  top: 819px;
  left: 84px;
  display: flex;
  gap: 12px; /* 카드 336 + gap 12 = 피치 348 */
  width: 1032px;
}

.co-cards > li {
  flex: 0 0 336px;
}

/* 시안 외 추가(사용자 요청): 활성 슬라이드에 해당하는 카드는 확대, 나머지는 축소.
   배율(활성 1.04 / 비활성 0.97)은 사용자가 지정하지 않아 정한 값이다 —
   확대가 눈에 띄되 336x160 카드가 이웃(gap 12)을 침범하지 않는 선(±13px)으로 잡았다 */
.co-card {
  position: relative;
  display: block;
  width: 336px;
  height: 160px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 2px 4px 20px rgba(104, 76, 76, 0.04);
  text-align: left;
  cursor: pointer;
  transform: scale(0.97);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.co-card[aria-current="true"] {
  transform: scale(1.04);
}

.co-card__icon {
  position: absolute;
  left: 24px;
  top: 44px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #efff75; /* Figma Ellipse 1371 은 단색 원이라 CSS 로 그린다 */
}

.co-card__icon img {
  /* 카드 기준 이미지 left 28 / top 48 → 원(24,44) 기준 +4,+4.
     3번째 카드만 시안이 top 51 이지만 파생: 48 로 정규화했다 */
  position: absolute;
  left: 4px;
  top: 4px;
  width: 64px;
  height: 64px;
}

.co-card__title {
  position: absolute;
  left: 112px;
  top: 55px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: #000000;
  white-space: nowrap;
}

.co-card__body {
  position: absolute;
  left: 112px;
  top: 101px;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.14px;
  color: #000000;
  white-space: nowrap;
}

/* ============================================
   4. 통계 - Figma 2928:35532 (Count, 1200x1032, #FFFFFF)
   ============================================
   [배경] 도트 지도. 원본 Group 1 은 1756x902 @x-316 이지만
          export(co_stats_map.png)가 이미 프레임 폭으로 잘려 나왔다 →
          left 0 / top 441.7 / 1200x902.44 로 그대로 배치한다(재크롭 금지)
   [숫자] res/js/ss-countup.js — 리스트 진입 시 1회 카운트업
   [파생] 시안에서 라벨 x 가 값 x 보다 4~6px 오른쪽으로 흔들린다 → 좌측 정렬로 맞춤
   ============================================ */
.co-stats {
  background: #ffffff;
}

.co-stats__inner {
  position: relative;
  width: 1200px;
  height: 1032px;
  margin: 0 auto;
  overflow: hidden;
}

.co-stats__map {
  position: absolute;
  left: 0;
  top: 441.7px;
  width: 1200px;
  height: 902.44px;
}

/* Figma 2928:45030 은 items-start — 좌측 정렬이다 */
.co-stats__head {
  position: absolute;
  top: 134.5px;
  left: 128px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 944px;
}

.co-stats__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.co-stats__sub {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

/* 값(y712) 위 / 라벨(y796) 아래. 리스트 자체가 IntersectionObserver 대상이라
   좌표를 가진 실제 박스여야 한다(자식만 absolute 로 두면 높이가 0이 된다) */
.co-stats__list {
  position: absolute;
  top: 712px;
  left: 0;
  width: 1200px;
  height: 110px;
}

.co-stats__item {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.co-stats__item:nth-child(1) {
  left: 128px;
}
.co-stats__item:nth-child(2) {
  left: 354px;
}
.co-stats__item:nth-child(3) {
  left: 624px;
}
.co-stats__item:nth-child(4) {
  left: 831px;
}

.co-stats__value {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
  white-space: nowrap;
}

.co-stats__plus {
  font-size: 48px; /* 접미 '+' 만 48 */
}

.co-stats__label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #333333;
  white-space: nowrap;
}

/* ============================================
   5. 글로벌 확장 - Figma 2928:45045 (1200x993, 배경 #000000)
   ============================================
   [배경] 섹션 export 픽셀 실측 #000000 (이 페이지에서 유일한 다크 섹션)
   [지도] 도트 9,500개 벡터 → 이미지 export. 그 위에 위치 핀 7개(#CCCCCC)
   [타임라인] 축 Vector 306 = x85~1114(1030폭) @y798, #EFFF75 / 점 10x10 #EFFF75
   ============================================ */
.co-global {
  background: #000000;
  overflow: hidden;
}

.co-global__inner {
  position: relative;
  width: 1200px;
  height: 993px;
  margin: 0 auto;
}

/* 시안 레이어 순서상 지도는 타이틀·카피 아래에 깔린다.
   마크업 순서만으로는 뒤에 오는 지도가 텍스트를 덮으므로 텍스트를 위로 올린다 */
.co-global__title,
.co-global__count,
.co-global__sub {
  z-index: 1;
}

.co-global__title {
  position: absolute;
  left: 128px;
  top: 160px;
  width: 944px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #ffffff;
}

/* 그라디언트 텍스트 #EFFF75 → #FFFFFF. line-height 는 시안이 62px 고정 */
.co-global__count {
  position: absolute;
  left: 128px;
  top: 246px;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: -0.25px;
  background: linear-gradient(90deg, #efff75 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.co-global__sub {
  position: absolute;
  left: 128px;
  top: 324px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #cccccc;
}

.co-global__map {
  position: absolute;
  left: 208.11px;
  top: 217.42px;
  width: 947.77px;
  height: 475.05px;
}

/* PC 는 도트맵 캔버스(business-introduce/dot-map.js)가 지도와 핀을 대신 그린다.
   정적 지도(배경 이미지)와 핀 7개는 모바일(768 이하) 전용으로 남긴다 — 모바일은 현행 유지 확정 */
.co-global__pin {
  display: none;
  position: absolute;
  width: 30px;
  height: 36.2px;
}

/* ---- 도트 월드맵 (PC 전용) - 디자이너 프로토타입 dot-map.html 이식 ----
   도트 9,536개는 맵 좌표 946x471 기준이고 캔버스가 컨테이너 폭에 맞춰 환산한다.
   핀은 LOCS 좌표를 %로 환산해 절대배치하며, tip(핀 끝)이 좌표에 오도록 translate 한다 */
.co-global__dotmap {
  position: absolute;
  inset: 0;
}

.co-global__dotmap-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.co-global__dotmap-pin {
  position: absolute;
  width: 26px;
  height: 34px;
  transform: translate(-50%, -100%);
  background: url("../res/img/new/co_map_pin_dot.svg") no-repeat center / contain;
  filter: drop-shadow(0 0 6px #eaff6b);
  pointer-events: none; /* 커서 블룸 판정은 컨테이너 좌표로 하므로 핀이 가리면 안 된다 */
  animation-name: co-global-pin-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* duration·delay 는 핀마다 달라 JS 가 인라인으로 준다 */
}

@keyframes co-global-pin-twinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.co-global__pin--1 {
  left: 985px;
  top: 371px;
  width: 33.79px;
  height: 40.78px;
}
.co-global__pin--2 {
  left: 366px;
  top: 368px;
}
.co-global__pin--3 {
  left: 663px;
  top: 357px;
}
.co-global__pin--4 {
  left: 904px;
  top: 344px;
}
.co-global__pin--5 {
  left: 932px;
  top: 406px;
}
.co-global__pin--6 {
  left: 906px;
  top: 463px;
}
.co-global__pin--7 {
  left: 938px;
  top: 510px;
}

/* ---- 일본 런칭 카드 - Figma 2928:54577 (209x157 @x906 y584) ---- */
.co-global__jp {
  position: absolute;
  left: 906px;
  top: 584px;
  width: 209px;
  height: 157px;
  border: 1px solid #efff75;
  border-radius: 30px;
  background: rgba(239, 255, 117, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow: hidden;
}

/* 아래 좌표는 전부 카드(906,584) 기준 상대값이다 */
.co-global__jp-flag {
  position: absolute;
  left: 28px;
  top: 28px;
  width: 54px;
  height: 34px;
}

.co-global__jp-date {
  position: absolute;
  left: 29px;
  top: 74px;
  width: 79px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #efff75;
  text-align: center;
}

.co-global__jp-text {
  position: absolute;
  left: 29px;
  top: 108px;
  width: 134px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #ffffff;
  text-align: center;
}

/* ---- 타임라인 ---- */
.co-global__axis {
  position: absolute;
  left: 85px;
  top: 798px;
  width: 1030px;
  height: 1px;
  background: #efff75;
}

/* 항목은 점(y814) 기준. 이름 +20 / 설명 +54.
   파생: 시안에서 점·이름·설명 x 가 1~3px 씩 어긋나 항목 좌측으로 통일했다 */
.co-global__tl-item {
  position: absolute;
  top: 814px;
}

.co-global__tl-item--1 {
  left: 85px;
}
.co-global__tl-item--2 {
  left: 412px;
}
.co-global__tl-item--3 {
  left: 740px;
}

.co-global__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #efff75;
}

.co-global__tl-name {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #efff75;
  white-space: nowrap;
}

.co-global__tl-desc {
  position: absolute;
  left: 0;
  top: 54px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #999999;
  white-space: nowrap;
}

/* ============================================
   6. AI 매칭 · 특허 - Figma 2928:54581 (1200x1550, 배경 #F2F2F2)
   ============================================
   다이어그램 카드(944x434 @x128 y328) 안의 좌표는 카드 기준 상대값으로 바꿔 적었다.
   그라디언트 텍스트 3종: #000000 → #99ACFF (background-clip: text)
   ============================================ */
.co-ai {
  background: #f2f2f2;
}

.co-ai__inner {
  position: relative;
  width: 1200px;
  height: 1550px;
  margin: 0 auto;
}

.co-ai__head {
  position: absolute;
  top: 134.5px;
  left: 128px;
  right: 128px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.co-ai__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.co-ai__sub {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

.co-ai__diagram {
  position: absolute;
  left: 128px;
  top: 328px;
  width: 944px;
  height: 434px;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 2px 2px 20px rgba(221, 209, 209, 0.12);
}

.co-ai__engine-label {
  position: absolute;
  left: 44px;
  top: 44px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  background: linear-gradient(90deg, #000000 0%, #99acff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.co-ai__box {
  position: absolute;
  left: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 80px;
  border: 1px solid #b3b3b3;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #0d0d0d;
}

.co-ai__box--seller {
  top: 141px;
}
.co-ai__box--product {
  top: 235px;
}

.co-ai__brace {
  position: absolute;
  left: 274px;
  top: 180px;
  width: 34px;
  height: 98px;
}

.co-ai__arrow {
  position: absolute;
  top: 224px; /* 시안 선 y556(높이 0) → 스트로크 두께만큼 올려 중앙을 맞춘다 */
  width: 63px;
  height: 8px;
}

.co-ai__arrow--1 {
  left: 308px;
}
.co-ai__arrow--2 {
  left: 571px;
}

.co-ai__engine {
  position: absolute;
  left: 398px;
  top: 159px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 147px;
  height: 140px;
  border-radius: 30px;
  background: #edff66;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
  text-align: center;
}

/* 결과 아이콘: 박스 130x103 안에 130x130 이미지를 top 0 으로 넣고 잘라 쓴다
   (Figma: 이미지 높이 = 박스의 126.21%) */
.co-ai__result-icon {
  position: absolute;
  left: 694px;
  top: 142px;
  display: block;
  width: 130px;
  height: 103px;
  overflow: hidden;
}

.co-ai__result-icon img {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 130px;
}

.co-ai__result-label {
  position: absolute;
  left: 759px;
  top: 267px;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
  white-space: nowrap;
}

.co-ai__note {
  position: absolute;
  left: 471.5px;
  top: 387px;
  transform: translate(-50%, -50%);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
  white-space: nowrap;
}

/* ---- 성과 카드 2개 (각 462x244 @y792) ---- */
.co-ai__metric {
  position: absolute;
  top: 792px;
  width: 462px;
  height: 244px;
  border-radius: 30px;
  box-shadow: 2px 2px 20px rgba(221, 209, 209, 0.12),
    inset -2px -2px 12px rgba(255, 255, 255, 0.12),
    inset 2px 2px 12px rgba(255, 255, 255, 0.12);
}

.co-ai__metric--conv {
  left: 128px;
  background: linear-gradient(270deg, #efff75 0%, #ffffff 100%);
}

.co-ai__metric--risk {
  left: 610px;
  background: linear-gradient(223.2588deg, #99acff 0%, #edf2f7 100%);
}

/* 아래 좌표는 각 카드 기준 상대값. 시안에서 라벨/값/설명 x 가 1~2px 어긋나 있어 그대로 옮겼다 */
.co-ai__metric-label {
  position: absolute;
  top: 40px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  background: linear-gradient(90deg, #000000 0%, #99acff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.co-ai__metric-value {
  position: absolute;
  top: 138px;
  transform: translateY(-50%);
  font-size: 80px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
  white-space: nowrap;
}

.co-ai__metric-value span {
  font-size: 48px; /* '%' 만 48 */
}

.co-ai__metric-desc {
  position: absolute;
  top: 201px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #666666;
  white-space: nowrap;
}

.co-ai__metric--conv .co-ai__metric-label {
  left: 38px;
}
.co-ai__metric--conv .co-ai__metric-value {
  left: 36px;
}
.co-ai__metric--conv .co-ai__metric-desc {
  left: 38px;
}
.co-ai__metric--risk .co-ai__metric-label {
  left: 39px;
}
.co-ai__metric--risk .co-ai__metric-value {
  left: 38px;
}
.co-ai__metric--risk .co-ai__metric-desc {
  left: 39px;
}

/* ---- 특허 ---- */
.co-ai__patent-title {
  position: absolute;
  left: 50%;
  top: 1138px;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
}

.co-ai__patents {
  position: absolute;
  left: 135px;
  top: 1183px;
  width: 937px;
  height: 145px;
  border: 1px solid #b3b3b3;
  border-radius: 16px;
}

/* 카드 기준 상대 좌표. 행 사이 구분선은 Figma Vector 305(881폭, #CCCCCC) 를 CSS 로 그린다 */
.co-ai__patent-row {
  position: absolute;
  left: 40px;
  right: 40px;
  height: 32px;
}

.co-ai__patent-row:nth-child(1) {
  top: 31px;
}

.co-ai__patent-row:nth-child(2) {
  top: 90px;
}

.co-ai__patent-row:nth-child(2)::before {
  content: "";
  position: absolute;
  left: -12px; /* 카드 기준 x28 = 행 기준 -12 */
  top: -16px; /* 카드 기준 y74 */
  width: 881px;
  height: 1px;
  background: #cccccc;
}

.co-ai__patent-name {
  position: absolute;
  left: 0;
  top: 16px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.co-ai__patent-no {
  position: absolute;
  right: 0;
  top: 16px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #999999;
  white-space: nowrap;
}

.co-ai__patent-more {
  position: absolute;
  left: 966.5px;
  top: 1360px;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #999999;
  white-space: nowrap;
}

/* ============================================
   7. 연혁 - Figma 2928:54616 (1200x2995, #FFFFFF)
   ============================================
   [축] Vector 304 = x600, y445, 높이 2415.
        세로 그라디언트 white → #375CFF(25.48%~75%) → white
   [항목] 지그재그. 좌측 블록 left 181(텍스트 우측정렬) / 우측 블록 left 593.
          점(14x14)은 좌우 모두 절대 x593 에 놓여 축과 겹친다
   [점] 바깥 원 r7 rgba(200,210,255,0.5) + 안쪽 원 r4 #375CFF → CSS 로 그린다
   ============================================ */
.co-history {
  background: #ffffff;
}

.co-history__inner {
  position: relative;
  width: 1200px;
  height: 2995px;
  margin: 0 auto;
}

.co-history__title {
  position: absolute;
  left: 111px;
  top: 160px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.co-history__quote {
  position: absolute;
  left: 111px;
  top: 352.75px; /* 시안 세로중심 379, 2줄(17.5×1.5×2=52.5) */
  width: 818px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

.co-history__axis {
  position: absolute;
  left: 600px;
  top: 445px;
  width: 1px;
  height: 2415px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #375cff 25.4808%,
    #375cff 75%,
    #ffffff 100%
  );
}

/* ---- 구간 라벨 ---- */
.co-history__era {
  position: absolute;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.64px;
  color: #375cff;
  white-space: nowrap;
}

/* 시안 세로중심 값에서 라벨 높이(64×1.5=96)의 절반을 뺀 top */
.co-history__era--present {
  left: 638px;
  top: 539px;
}
.co-history__era--2020 {
  left: 368px;
  top: 871px;
}
.co-history__era--2015 {
  left: 638px;
  top: 1595px;
}

/* 시안 외 추가(사용자 요청): 연혁 요소가 뷰포트에 들어올 때 아래→위로 등장.
   대상은 구간 라벨 3개 + 연혁 항목 11개 + 영상 썸네일 = [data-history-reveal] 전부.
   초기 상태는 index.js 가 .is-reveal 을 붙일 때만 적용된다 →
   JS 가 실행되지 않아도 요소가 사라지지 않는다.
   이동량 24px / 0.5s 는 사용자가 값을 지정하지 않아 정한 값이다 */
.co-history [data-history-reveal].is-reveal {
  opacity: 0;
  transform: translateY(24px);
  /* transition 을 여기 두면 JS 가 클래스를 붙이는 순간 '보임 → 숨김' 으로 0.5초 사라졌다가
     다시 나타난다. 그래서 들어오는 쪽(.is-visible)에만 transition 을 건다 */
}

.co-history [data-history-reveal].is-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- 항목 ---- */
/* 연도·본문은 일반 흐름으로 쌓는다(점만 absolute).
   등장 애니메이션이 IntersectionObserver 로 발화하는데, 높이 0인 박스는
   교차 비율이 항상 0 이라 threshold 를 넘지 못한다 → 실제 높이를 갖게 둔다 */
.co-history__item {
  position: absolute;
  width: 426px;
}

.co-history__item--left {
  left: 181px;
}
.co-history__item--right {
  left: 593px;
}

.co-history__item[data-year="2025"] {
  top: 649px;
}
.co-history__item[data-year="2024"] {
  top: 769px;
}
.co-history__item[data-year="2023"] {
  top: 977px;
}
.co-history__item[data-year="2022"] {
  top: 1097px;
}
.co-history__item[data-year="2021"] {
  top: 1295px;
}
.co-history__item[data-year="2020"] {
  top: 1467px;
}
.co-history__item[data-year="2019"] {
  top: 1705px;
}
.co-history__item[data-year="2018"] {
  top: 1825px;
}
.co-history__item[data-year="2017"] {
  top: 1971px;
}
.co-history__item[data-year="2016"] {
  top: 2091px;
}
.co-history__item[data-year="2015"] {
  top: 2237px;
}

.co-history__year {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5; /* 20 × 1.5 = 30 */
  letter-spacing: -0.2px;
  color: #000000;
  white-space: nowrap;
}

.co-history__desc {
  margin-top: 6px; /* 시안 연도 대비 +36 − 연도 높이 30 */
  width: 380px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

.co-history__desc b {
  font-weight: 600;
  color: #333333;
}

/* 2023 항목만 강조 뒤 문장도 SemiBold 인데 색은 본문색을 유지한다(시안 그대로) */
.co-history__semi {
  font-weight: 600;
}

.co-history__dot {
  position: absolute;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(200, 210, 255, 0.5);
}

.co-history__dot::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #375cff;
}

.co-history__item--left .co-history__year {
  margin-left: 339px;
}
.co-history__item--left .co-history__desc {
  margin-left: 0;
  text-align: right;
}
.co-history__item--left .co-history__dot {
  left: 412px;
}

.co-history__item--right .co-history__year {
  margin-left: 46px;
}
.co-history__item--right .co-history__desc {
  margin-left: 46px;
}
.co-history__item--right .co-history__dot {
  left: 0;
}

/* ---- 영상 썸네일 → YouTube ---- */
.co-history__video {
  position: absolute;
  left: 630px;
  top: 2385px;
  display: block;
  width: 423px;
  height: 235px;
  border-radius: 30px;
  overflow: hidden;
}

.co-history__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   8. 브랜드 타이틀 - Figma 2928:54638 (1200x428)
   ============================================ */
.co-brandtitle {
  background: #ffffff;
}

.co-brandtitle__inner {
  position: relative;
  width: 1200px;
  height: 428px;
  margin: 0 auto;
}

.co-brandtitle__title {
  position: absolute;
  left: 128px;
  top: 160px;
  width: 944px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
  text-align: center;
}

.co-brandtitle__sub {
  position: absolute;
  left: 128px;
  top: 242px; /* 헤더(y160) 내부 y82 */
  width: 944px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
  text-align: center;
}

/* ============================================
   9. 브랜드 워드클라우드 - Figma 2928:54642 (1200x1083)
   ============================================
   2026-08-12: co_brand_globe.png(2400x2166) / _m.png(750x634) → 코드 렌더로 교체.
   res/js/ss-node-sphere.js 가 canvas 로 그린다 (main .main-global__illust 와 같은 스크립트).

   에셋에는 그림 주변 여백이 크게 들어 있었다. 코드 렌더는 주어진 박스를 꽉 채우므로
   박스를 **에셋 속 실제 그림 영역**으로 좁혀야 크기가 이미지 시절과 같아진다.
   에셋 실측(캔버스에 그려 알파·비백색 픽셀 bbox):
     PC   2400x2166 중 그림 (523,342)~(1848,1562) → 표시(1/2배) 662.5x610, 중심 (592.75, 476)
     모바일 750x634 중 그림 (94,9)~(644,515)     → 표시(1/2배) 275x253,   중심 (184.5, 131)
   스피어는 박스 짧은 변 기준으로 그려지고 그려진 폭이 박스의 약 95% 이므로
   박스 한 변 = 그림 폭 / 0.965 로 잡고 그림 중심에 맞춘다 (PC 686, 모바일 285)
   ============================================ */
.co-brandwall {
  background: #ffffff;
}

.co-brandwall__inner {
  position: relative;
  width: 1200px;
  height: 1083px;
  margin: 0 auto;
}

.co-brandwall__illust {
  position: absolute;
  left: 250px; /* 그림 중심 592.75 − 686/2 */
  top: 133px; /* 그림 중심 476 − 686/2 */
  width: 686px;
  height: 686px;
}

/* ============================================
   10. CTA - Figma 2928:54644 (1200x349, 배경 #EFFF75)
   ============================================
   padding 128 + 콘텐츠 93 + padding 128 = 349
   ============================================ */
.co-cta {
  background: #efff75;
}

.co-cta__inner {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 1200px;
  margin: 0 auto;
  padding: 128px;
}

.co-cta__text {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.co-cta__title {
  font-size: 48px;
  font-weight: 600;
  line-height: normal;
  color: #000000;
}

.co-cta__sub {
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.44px;
  color: #000000;
}

.co-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 28px;
  border-radius: 20px;
  background: #ffffff;
}

.co-cta__btn-label {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.co-cta__btn-label img {
  display: block;
  width: 139px;
  height: 16px;
}

.co-cta__btn-label span {
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.25px;
  color: #000000;
  white-space: nowrap;
}

.co-cta__btn-arrow {
  display: block;
  width: 17px;
  height: 14px;
}

/* ============================================
   11. 회사 정보표 - Figma 2928:54656 (vision- 35, 1200x668)
   ============================================
   폭은 다른 섹션과 같은 .co-*__inner 관례(width 1200 + margin auto)를 따른다
   (2026-08-26 사용자 지시). 콘텐츠 들여쓰기 95px 은 그 1200 박스 기준이다.
   [바뀐 것] 구분선은 시안 1300폭을 살려 화면 꽉 차게 뒀었으나, 이제 다른 섹션과
   같은 1200 박스 안에서 끝난다 — calc/max() 로 환산하던 --co-info-pad 는 필요 없어졌다
   ============================================ */
.co-info {
  padding: 127px 0 112px;
  background: #ffffff;
}

.co-info__inner {
  width: 1200px; /* .co-history__inner · .co-brandtitle__inner · .co-cta__inner 와 동일 */
  margin: 0 auto;
}

.co-info__logo {
  padding-left: 95px;
}

.co-info__logo img {
  display: block;
  width: 434px;
  height: 50px;
}

.co-info__table {
  margin-top: 35px; /* 로고 하단 177 → 첫 선 212 */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.co-info__row {
  display: flex;
  align-items: center;
  height: 49px;
  padding-left: 95px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.co-info__row dt {
  width: 200px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #000000;
}

.co-info__row dd {
  margin-left: 12px;
  font-size: 17.5px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #000000;
}

/* 모바일 전용 강제 개행 / 모바일 전용 요소 — PC 에서는 숨는다 */
.co-br-m {
  display: none;
}

.co-card__thumb {
  display: none;
}

/* ============================================================
   모바일 - Figma 개별 프레임 11개 (폭 375)
   ============================================================
   PC 1200 프레임과 달리 모바일은 섹션마다 별도 프레임으로 그려졌고,
   구조가 다른 섹션이 많다. 같은 마크업을 재배치해서 맞춘다.

   | 섹션 | 노드 | h | PC 대비 차이 |
   |------|------|---|--------------|
   | 히어로 | 2928:54712 | 812 | 로고 hidden, 64/48 → 30/22 |
   | 카피 | 2928:54802 | 316 | 36/700 → 17.5/600 |
   | 3카드 | 2928:16344 | 812 | **통이미지 슬라이더 없음.** 카드가 곧 슬라이드(아이콘+제목+본문+썸네일) |
   | 통계 | 2928:16380 | 812 | **값 좌 / 라벨 우** 가로 배치 (PC 는 값 위·라벨 아래) |
   | 글로벌 | 2928:25896 | 866 | 타임라인 세로, **가로 축 없음** |
   | AI | 2928:35461 | 1501 | **다이어그램 세로**, 칩은 좌=상품·우=셀러(PC 는 위=셀러) |
   | 연혁 | 2928:35433 | 1693 | **지그재그 아님** — 좌측 단일 컬럼 |
   | 브랜드 | 2928:35456 | 812 | PC 의 타이틀+로고월 2섹션이 1개로 합쳐짐 |
   | CTA | 2928:54792 | 264 | 세로 배치 |
   | 회사정보표 | — | — | **모바일에 없음** |
   | 푸터 | 2928:35460 | 364 | ss-footer.css 축약형 재사용 |

   문구는 전부 웹(PC) 기준이다 — 모바일 시안의 `모맨텀`·`400k+`·`9개국 +` 등은 채택하지 않는다.
   ============================================================ */
@media screen and (max-width: 768px) {
  .co-br-m {
    display: inline;
  }

  /* ---- 1. 히어로 - 2928:54712 ---- */
  .co-hero {
    padding: 0 20px;
  }

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

  .co-hero__logo {
    display: none; /* 시안에서 로고 프레임이 hidden 이다 */
  }

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

  .co-hero__title-2 {
    font-size: 22px;
    letter-spacing: -0.005em;
  }

  /* ---- 2. 카피 - 2928:54802 ---- */
  .co-copy {
    /* 시안 높이 316 = 문구 2줄(17.5 × 1.2 × 2 = 42) + 상하 여백 137.
       PC 와 같은 이유로 height 대신 padding 이다 */
    padding: 137px 0;
  }

  .co-copy__text {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.15px;
  }

  /* ---- 3. 3카드 - 2928:16344 ----
     섹션 pt112 px20, 헤더 gap10(각 줄 내부 px20), 트랙 gap20.
     PC 의 통이미지 슬라이더는 모바일 시안에 없다 → 숨기고 카드가 슬라이드가 된다.
     슬라이더 JS 대신 네이티브 가로 스크롤 + scroll-snap 을 쓴다
     (시안에 인디케이터가 없고, 터치 스크롤이 곧 기대 동작이다) */
  .co-banner__inner {
    width: 100%;
    height: auto;
    /* 하단 32 = 시안 프레임 812 − (pt112 + 헤더 + gap30 + 카드 526.25) */
    padding: 112px 0 32px;
    overflow: visible;
  }

  .co-banner__head {
    position: static;
    gap: 10px;
    padding: 0 40px; /* 섹션 20 + 헤더 각 줄 내부 20 */
  }

  .co-banner__title {
    font-size: 22px;
    letter-spacing: -0.11px;
  }

  .co-br-pc {
    display: none; /* PC 개행 해제 — 모바일 폭에서 자연 개행 */
  }

  .co-banner__sub {
    font-size: 14.7px;
    letter-spacing: -0.5px;
  }

  .co-slider {
    display: none;
  }

  .co-cards {
    position: static;
    width: auto;
    margin-top: 30px;
    padding: 0 20px;
    gap: 20px; /* 슬라이드 335 + 20 = 피치 355 */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .co-cards::-webkit-scrollbar {
    display: none;
  }

  .co-cards > li {
    /* Figma 335 = 375 폭의 콘텐츠 폭. 화면이 넓어지면 슬라이드도 같이 넓어진다 */
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .co-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 100%; /* Figma 335 = 콘텐츠 폭 */
    height: auto;
    padding: 30px;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: none; /* 시안 모바일 카드엔 그림자가 없다 */
    transform: none; /* 슬라이드↔카드 확대 연동은 PC 전용 */
  }

  .co-card[aria-current="true"] {
    transform: none;
  }

  /* relative 를 유지해야 안쪽 이미지가 카드가 아니라 원을 기준으로 놓인다 */
  .co-card__icon {
    position: relative;
    left: auto;
    top: auto;
    width: 60px;
    height: 60px;
  }

  .co-card__icon img {
    left: 3.33px;
    top: 3.33px;
    width: 53.333px;
    height: 53.333px;
  }

  .co-card__title {
    position: static;
    transform: none;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.11px;
    white-space: normal;
    /* 그라디언트 텍스트 — 시안 black 1.55% → #EFFF75 101.04% */
    background: linear-gradient(90deg, #000000 1.55%, #efff75 101.04%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .co-card__body {
    position: static;
    transform: none;
    font-size: 14.7px;
    letter-spacing: -0.5px;
    white-space: normal;
  }

  /* 썸네일은 카드 padding 을 뚫고 좌우·하단 끝까지 붙는다.
     PC 에서 내려받지 않도록 마크업이 아니라 CSS 배경으로 넣는다 */
  .co-card__thumb {
    display: block;
    width: calc(100% + 60px);
    margin: 0 -30px -30px;
    aspect-ratio: 375 / 307;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .co-card__thumb--1 {
    background-image: url("../res/img/new/co_card_thumb_1.jpg");
  }
  .co-card__thumb--2 {
    background-image: url("../res/img/new/co_card_thumb_2.jpg");
  }
  .co-card__thumb--3 {
    background-image: url("../res/img/new/co_card_thumb_3.jpg");
  }

  /* ---- 4. 통계 - 2928:16380 ----
     export 가 프레임 폭으로 잘려 나와 left 0 에 그대로 놓는다(시안 375x350)
     폭을 375 로 고정하면 360px 기기(갤럭시 등)에서 15px 가로 스크롤이 생긴다
     → 100% + height auto. 에셋이 750x700 = 정확히 2x 라 375 에서는 렌더가 같고
       그 아래에서만 비율을 유지한 채 줄어든다 */
  .co-stats__inner {
    width: 100%;
    height: 812px;
  }

  .co-stats__map {
    left: 0;
    top: 476px;
    width: 100%;
    height: auto;
  }

  .co-stats__head {
    top: 87.4px;
    left: 21px;
    right: 20px; /* Figma width 334 = 375 − 21 − 20 */
    width: auto;
    gap: 18.6px; /* 타이틀 하단 155 → 서브 173.6 */
  }

  .co-stats__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .co-stats__sub {
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  .co-stats__list {
    top: 372px;
    left: 40px;
    right: 40px; /* Figma width 295 = 375 − 40 − 40 */
    width: auto;
    height: 368px;
  }

  /* 값 좌 / 라벨 우, 항목 높이 62 · 피치 102 */
  .co-stats__item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* 목록 폭을 그대로 */
    height: 62px;
    left: 0;
  }

  /* PC 의 :nth-child left 가 특이도로 이기므로 여기서 함께 0 으로 덮는다 */
  .co-stats__item:nth-child(1) {
    left: 0;
    top: 0;
  }
  .co-stats__item:nth-child(2) {
    left: 0;
    top: 102px;
  }
  .co-stats__item:nth-child(3) {
    left: 0;
    top: 204px;
  }
  .co-stats__item:nth-child(4) {
    left: 0;
    top: 306px;
  }

  .co-stats__value {
    font-size: 48px;
  }

  .co-stats__plus {
    font-size: 48px; /* 모바일 시안은 '+' 도 값과 같은 크기다 */
  }

  .co-stats__label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.0625px;
    color: #666666;
  }

  /* ---- 5. 글로벌 - 2928:25896 ---- */
  .co-global__inner {
    width: 100%;
    height: 866px;
  }

  .co-global__title {
    left: 21px;
    top: 104px;
    width: auto;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .co-global__count {
    left: 21px;
    top: 176px;
    font-size: 30.152px;
    line-height: 38.946px;
    letter-spacing: -0.157px;
  }

  .co-global__sub {
    left: 21px;
    top: 223px;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* 모바일은 정적 지도 + 핀 7개를 그대로 쓴다(도트맵은 PC 전용).
     지도를 배경으로 두면 이 미디어 블록이 맞을 때만 내려받는다 */
  /* 지도 박스는 폭을 따라 늘어나고 높이는 비율로 따라온다.
     height:0 + padding-top(%) 로 잡는 이유: 절대배치 박스에 aspect-ratio 를 쓰면
     WebKit 이 auto 높이를 비율이 아닌 남은 공간으로 계산한다(글로벌 스피어에서 실측).
     % padding 은 컨테이너(.co-global__inner) 폭 기준 — 375 에서 183.24 로 시안과 일치 */
  .co-global__map {
    left: 4px;
    right: 5.41px; /* Figma width 365.59 = 375 − 4 − 5.41 */
    top: 308px;
    width: auto;
    height: 0;
    padding-top: 48.864%; /* 183.24 / 375 */
    background: url("../res/img/new/co_global_map_m.png") no-repeat center /
      contain;
  }

  .co-global__dotmap {
    display: none;
  }

  /* 핀은 지도 박스의 자식이라 좌표를 % 로 준다(지도와 같이 움직인다).
     좌표는 핀 끝(tip = 아래 꼭짓점)이고, translate 로 tip 을 그 지점에 맞춘다.
     크기는 아이콘이라 고정 — 시안 11.44x13.81 (1번만 12.89x15.55) */
  .co-global__pin {
    display: block;
    width: 11.44px;
    height: 13.81px;
    transform: translate(-50%, -100%);
  }

  .co-global__pin--1 {
    left: 83.305%;
    top: 40.302%;
    width: 12.89px;
    height: 15.55px;
  }
  .co-global__pin--2 {
    left: 18.523%;
    top: 38.725%;
  }
  .co-global__pin--3 {
    left: 49.512%;
    top: 36.439%;
  }
  .co-global__pin--4 {
    left: 74.655%;
    top: 33.732%;
  }
  .co-global__pin--5 {
    left: 77.576%;
    top: 46.638%;
  }
  .co-global__pin--6 {
    left: 74.865%;
    top: 58.503%;
  }
  .co-global__pin--7 {
    left: 78.202%;
    top: 68.287%;
  }

  .co-global__jp {
    /* Figma left 233 = 우측 여백 19 (375 − 233 − 123). 우측 기준으로 걸어야 안 쏠린다 */
    left: auto;
    right: 19px;
    top: 438.49px;
    width: 123px;
    height: 92.4px;
    border-radius: 18px; /* 파생: PC 30 × (123/209) ≈ 17.7 */
  }

  .co-global__jp-flag {
    left: 16.48px;
    top: 16.48px;
    width: 31.73px;
    height: 20.04px;
  }

  .co-global__jp-date {
    left: 16.07px;
    top: 42.55px;
    width: 48px;
    font-size: 12px;
    letter-spacing: -0.1471px;
  }

  .co-global__jp-text {
    left: 16px;
    top: 64.51px;
    width: 84px;
    font-size: 10px; /* 파생: 시안 텍스트 박스 높이 13 ÷ lh 1.3 */
    letter-spacing: -0.1471px;
  }

  /* 모바일 시안엔 가로 타임라인 축이 없다 */
  .co-global__axis {
    display: none;
  }

  .co-global__tl-item--1 {
    left: 46px;
    top: 556px;
  }
  .co-global__tl-item--2 {
    left: 46px;
    top: 646px;
  }
  .co-global__tl-item--3 {
    left: 46px;
    top: 736px;
  }

  .co-global__dot {
    width: 8px;
    height: 8px;
  }

  .co-global__tl-name {
    left: 1px;
    top: 16px;
    font-size: 16px;
  }

  .co-global__tl-desc {
    left: 0;
    top: 45px;
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  /* ---- 6. AI 매칭 · 특허 - 2928:35461 ----
     PC 는 가로 흐름(칩 2개 → 엔진 → 결과), 모바일은 세로 흐름이다.
     브레이스·화살표는 같은 SVG 를 90도 회전해 쓴다 */
  .co-ai__inner {
    width: 100%;
    height: 1501px;
  }

  .co-ai__head {
    top: 104.2px;
    left: 0;
    right: 0;
    gap: 18.2px;
    padding: 0 20px;
  }

  .co-ai__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .co-ai__sub {
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  .co-ai__diagram {
    /* 내부 요소가 335 기준 절대좌표라 폭을 늘리면 배치가 깨진다 → 크기 유지 + 중앙정렬 */
    left: 50%;
    margin-left: -167.5px;
    top: 218px;
    width: 335px;
    height: 520px;
  }

  .co-ai__engine-label {
    left: 24px;
    top: 34.5px;
    font-size: 16px;
  }

  .co-ai__box {
    width: 132.091px;
    height: 55.617px;
    top: 95px;
    border-width: 0.695px;
    border-radius: 20.856px;
    font-size: 13.904px;
    letter-spacing: -0.1738px;
  }

  /* 모바일은 좌=상품 / 우=셀러 (PC 는 위=셀러 / 아래=상품) */
  .co-ai__box--product {
    left: 30px;
  }
  .co-ai__box--seller {
    left: 173px;
  }

  /* 24x150 박스를 90도 돌려 가로 150 × 세로 24 로 보이게 한다 */
  .co-ai__brace {
    left: 155.5px;
    top: 98px;
    width: 24px;
    height: 150px;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .co-ai__arrow {
    height: 8px;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .co-ai__arrow--1 {
    left: 157px;
    top: 191.5px;
    width: 21px;
  }

  .co-ai__arrow--2 {
    left: 158.5px;
    top: 323px;
    width: 18px;
  }

  .co-ai__engine {
    left: 116px;
    top: 214px;
    width: 102.196px;
    height: 97.33px;
    border-radius: 20.856px;
    font-size: 13.904px;
    letter-spacing: -0.1738px;
  }

  .co-ai__result-icon {
    left: 122px;
    top: 329px;
    width: 90.378px;
    height: 71.607px;
  }

  .co-ai__result-icon img {
    width: 90.378px;
    height: 90.378px;
  }

  .co-ai__result-label {
    left: 168.03px;
    top: 422.07px;
    font-size: 16px;
    letter-spacing: -0.1738px;
  }

  .co-ai__note {
    left: 167.5px;
    top: 471px;
    font-size: 12px;
    letter-spacing: -0.12px;
    white-space: normal;
    width: 260px;
    text-align: center;
  }

  .co-ai__metric {
    left: 20px;
    right: 20px; /* Figma width 335 = 375 − 20 − 20 */
    width: auto;
    height: 176px;
    box-shadow: 1.45px 1.45px 14.502px rgba(221, 209, 209, 0.12);
  }

  .co-ai__metric--conv {
    top: 756px;
  }

  .co-ai__metric--risk {
    top: 950px;
    background: linear-gradient(223.1087deg, #99acff 0%, #edf2f7 100%);
  }

  .co-ai__metric-label {
    font-size: 14.502px;
    letter-spacing: -0.1813px;
  }

  .co-ai__metric-value {
    font-size: 48px;
    letter-spacing: -0.1813px;
  }

  .co-ai__metric-value span {
    font-size: 24px;
  }

  .co-ai__metric-desc {
    font-size: 14.502px;
    letter-spacing: -0.1813px;
  }

  .co-ai__metric--conv .co-ai__metric-label {
    left: 24px;
    top: 24.08px;
  }
  .co-ai__metric--conv .co-ai__metric-value {
    left: 24px;
    top: 105px;
  }
  .co-ai__metric--conv .co-ai__metric-desc {
    left: 24px;
    top: 145.82px;
  }
  .co-ai__metric--risk .co-ai__metric-label {
    left: 24px;
    top: 29.08px;
  }
  .co-ai__metric--risk .co-ai__metric-value {
    left: 24px;
    top: 105px;
  }
  .co-ai__metric--risk .co-ai__metric-desc {
    left: 24px;
    top: 145.82px;
  }

  .co-ai__patent-title {
    top: 1183px;
    font-size: 16px;
    font-weight: 500;
  }

  .co-ai__patents {
    left: 20px;
    right: 20px; /* Figma width 335 = 375 − 20 − 20 */
    top: 1217px;
    width: auto;
    height: 132px;
    border-radius: 15px;
  }

  /* 모바일은 특허명 아래에 번호가 오는 세로 2줄 구성이다(PC 는 좌우) */
  .co-ai__patent-row {
    left: 24px;
    right: 24px;
    height: auto;
  }

  .co-ai__patent-row:nth-child(1) {
    top: 16.2px;
  }

  .co-ai__patent-row:nth-child(2) {
    top: 79.2px;
  }

  .co-ai__patent-row:nth-child(2)::before {
    left: -11.5px; /* 카드 기준 12.5 = 행 기준 -11.5 */
    right: -11.5px; /* 카드 기준 12.5 (Figma width 310 = 335 − 12.5 × 2) */
    top: -13.2px; /* 카드 기준 66 */
    width: auto;
  }

  .co-ai__patent-name,
  .co-ai__patent-no {
    position: static;
    display: block;
    transform: none;
    text-align: left;
    font-size: 12px;
    letter-spacing: -0.1813px;
  }

  .co-ai__patent-no {
    margin-top: 8.4px;
  }

  .co-ai__patent-more {
    left: auto;
    right: 20px;
    top: 1369px;
    transform: translateY(-50%);
    font-size: 12px;
    letter-spacing: -0.1813px;
  }

  /* ---- 7. 연혁 - 2928:35433 ----
     PC 지그재그 → 모바일은 축(x32) 우측 단일 컬럼 */
  .co-history__inner {
    width: 100%;
    height: 1693px;
  }

  .co-history__title {
    left: 21px;
    top: 87.4px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .co-history__quote {
    left: 19px;
    right: 21px; /* Figma width 335 = 375 − 19 − 21 */
    top: 189px;
    width: auto;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  .co-history__axis {
    left: 32px;
    top: 277px;
    height: 1192px;
  }

  .co-history__era {
    left: 56px;
    font-size: 36px;
    letter-spacing: -0.36px;
  }

  .co-history__era--present {
    top: 311px;
  }
  .co-history__era--2020 {
    top: 536.2px;
  }
  .co-history__era--2015 {
    top: 988.6px;
  }

  .co-history__item,
  .co-history__item--left,
  .co-history__item--right {
    left: 28px;
    right: 91.4px; /* Figma width 255.6 = 375 − 28 − 91.4 */
    width: auto;
  }

  .co-history__item[data-year="2025"] {
    top: 377px;
  }
  .co-history__item[data-year="2024"] {
    top: 450.6px;
  }
  .co-history__item[data-year="2023"] {
    top: 602.2px;
  }
  .co-history__item[data-year="2022"] {
    top: 659.8px;
  }
  .co-history__item[data-year="2021"] {
    top: 781.4px;
  }
  .co-history__item[data-year="2020"] {
    top: 887px;
  }
  .co-history__item[data-year="2019"] {
    top: 1054.6px;
  }
  .co-history__item[data-year="2018"] {
    top: 1128.2px;
  }
  .co-history__item[data-year="2017"] {
    top: 1217.8px;
  }
  .co-history__item[data-year="2016"] {
    top: 1291.4px;
  }
  .co-history__item[data-year="2015"] {
    top: 1381px;
  }

  .co-history__item--left .co-history__year,
  .co-history__item--right .co-history__year {
    margin-left: 16.56px;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  .co-history__item--left .co-history__desc,
  .co-history__item--right .co-history__desc {
    /* 파생: 시안 인스턴스가 비균등 축소돼 연도와 겹치는 오프셋(12.96)을 갖고 있다.
       PC 와 같은 6px 간격으로 정규화한다 */
    margin-top: 6px;
    margin-left: 16.56px;
    width: auto; /* Figma 228 = 항목 폭 255.6 − 들여쓰기 16.56 − 우측 11 */
    padding-right: 11px;
    font-size: 10.5px;
    letter-spacing: -0.105px;
    text-align: left;
  }

  .co-history__item--left .co-history__dot,
  .co-history__item--right .co-history__dot {
    left: 0;
    top: 2.88px;
    width: 8.4px;
    height: 8.4px;
  }

  .co-history__dot::after {
    left: 1.8px;
    top: 1.8px;
    width: 4.8px;
    height: 4.8px;
  }

  .co-history__video {
    left: 52px;
    top: 1466.6px;
    width: 237px;
    height: 132px;
  }

  /* ---- 8 + 9. 브랜드 - 2928:35456 (PC 의 2섹션이 모바일에선 1개) ---- */
  .co-brandtitle__inner {
    width: 100%;
    height: 349px;
  }

  .co-brandtitle__title {
    left: 21px;
    top: 104px;
    width: auto;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
  }

  .co-brandtitle__sub {
    left: 21px;
    right: 20px; /* Figma width 334 = 375 − 21 − 20 */
    top: 206px;
    width: auto;
    font-size: 12px;
    letter-spacing: -0.12px;
    text-align: left;
  }

  .co-brandwall__inner {
    width: 100%;
    height: 463px; /* 349 + 463 = 시안 섹션 812 */
  }

  /* 구 에셋(750x634 = 시안 375x317 의 2x) 속 그림 영역 275x253, 중심 (184.5, 131) 에 맞춘다.
     박스 285 정사각 → left 42 = 184.5 − 285/2. top 은 0 으로 잘라 위 섹션과 겹치지 않게 둔다
     (정확한 중심 정렬이면 −11.5px, 실효 차이가 작다). 42+285=327 이라 360px 기기도 넘치지 않는다 */
  .co-brandwall__illust {
    /* 노드 스피어 캔버스 — 고정 크기 아트라 중앙정렬만 한다(Figma left 42 = 375 기준 중앙) */
    left: 50%;
    margin-left: -142.5px;
    top: 0;
    width: 285px;
    height: 285px;
  }

  /* ---- 10. CTA - 2928:54792 ---- */
  .co-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    width: 100%;
    padding: 80px 20px 28px;
  }

  .co-cta__text {
    flex: none;
    gap: 10px;
  }

  .co-cta__title {
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.25px;
  }

  .co-cta__sub {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.15px;
  }

  .co-cta__btn-label img {
    width: 92px;
    height: 10.59px;
  }

  .co-cta__btn-label span {
    font-size: 14px;
  }

  /* ---- 11. 회사 정보표 — 모바일 시안에 없다 ---- */
  .co-info {
    display: none;
  }
}

/* ============================================
   접근성 — 움직임 최소화 설정
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .co-card {
    transition: none;
  }

  .co-slider__track {
    transition: none;
  }

  .co-history [data-history-reveal].is-reveal,
  .co-history [data-history-reveal].is-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   스크롤 핀 슬라이더 (시안 외 추가 — 사용자 요청)
   ============================================
   동작·수치는 res/js/ss-scroll-pin.js 가 잡는다. 여기서는 붙는 방식만 정의한다.
   - 섹션 높이는 JS 가 인라인으로 늘린다(핀 구간)
   - 화면보다 내용이 크면 JS 가 transform: scale() 로 줄인다 → 원점은 상단 중앙
   - prefers-reduced-motion: reduce 면 JS 가 아예 붙이지 않는다(클래스 미부여)
   ============================================ */
.co-banner__inner.is-pinned {
  position: sticky;
  top: var(--ss-pin-top, 0);
  transform-origin: top center;
}