/* ============================================================
   HOTSELLER — hotseller.co.kr 클린 재구축 스타일시트
   시맨틱 HTML + flex/grid. 좌표 절대배치 없음.
   ============================================================ */

/* ---------- @font-face : Pretendard (자가호스팅 woff2 5종) ---------- */
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/c0b476_2d0b4f8b33d64a04a8bb3251b3eeffd9.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/c0b476_c9430c9f4b054176af8f434210934aed.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/c0b476_3c13694c08e346a689767efcbcef035c.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/c0b476_2bbdd4d76e9b418fb36145a1780300ac.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/c0b476_e3993ec0b60641da99dca743444040cf.woff2") format("woff2");
}

/* ---------- 뷰포트 비례 스케일 루트(1600에서 캡) ----------
   원본(Wix)은 1440 디자인을 폭 비례로 스케일하되 뷰포트 1600에서 고정(캡)한다.
   1600 초과 폭에선 1600 크기 그대로 유지 + 콘텐츠가 중앙정렬된다.
   루트 폰트를 1600값(17.7778px = 1600/1440×16)에서 클램프하면 rem 기반 요소가
   1600에서 자동으로 멈추고, --maxw(90rem=1600px)도 함께 캡되어 중앙정렬된다.
   1440 → 16px, 1600 → 17.7778px, 1890 → 17.7778px(캡). 모바일은 @media에서 16px 고정. */
html {
  scroll-behavior: smooth;
  font-size: min(calc(100vw / 1440 * 16), 17.7778px);   /* 1600에서 캡. 모바일은 @media에서 16px 고정 */
}

/* ---------- Design tokens ---------- */
:root {
  /* color */
  --c-white: #ffffff;
  --c-ink: #323232;          /* 본문 진한 텍스트 rgb(50,50,50) */
  --c-gray: #6e6e6e;         /* 보조 본문 rgb(110,110,110) */
  --c-gray-light: #878787;   /* 라벨 rgb(135,135,135) */
  --c-blue: #0062e0;         /* 브랜드 블루 rgb(0,98,224) */
  --c-blue-soft: #44afff;    /* 라이트 블루 rgb(68,175,255) */
  --c-cv-top: #0a2a52;       /* Core Value 그라데이션 상단 */
  --c-cv-bot: #0b53b0;       /* Core Value 그라데이션 하단 */
  --c-footer: #000;          /* 푸터 블랙 (원본 실측 rgb(0,0,0)) */
  --c-scrim: rgba(8, 16, 30, 0.55); /* 카드/밴드 어둠막 */

  /* layout (px÷16 = rem, 비례 스케일 대상) */
  --maxw: 90rem;             /* 1440px. 원본 콘텐츠 x91~x1349(풀폭 90패딩) 정합 */
  --pad-x: 5.625rem;         /* 90px. 데스크톱 좌우 여백 (원본 x≈91 기준) */
  --nav-h: 5.625rem;         /* 90px. 원본 헤더 높이 */

  /* type scale (원본 라이브 getComputedStyle 실측 px @1440 ÷16 = rem) */
  --fs-nav: 1rem;            /* 16px */
  --fs-label: 1.41956rem;    /* 22.713px. 섹션 라벨 (Mission/Vision/...) */
  --fs-h2: 2.55521rem;       /* 40.8833px. 섹션 대제목 */
  --fs-h3: 2.27129rem;       /* 36.3407px. 카드/단계 소제목 */
  --fs-body: 1.02209rem;     /* 16.3534px */
  --fs-body-sm: 0.90851rem;  /* 14.5362px */
  --fs-phase: 3.97476rem;    /* 63.5962px. Roadmap 영문 대제목 */
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.5;
  overflow-x: hidden;            /* 가로 스크롤 차단 */
  -webkit-font-smoothing: antialiased;
}

img,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; font-weight: inherit; }

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

/* ---------- 스크롤 reveal (IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(2.25rem);   /* 36px */
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* 공통 섹션 라벨/제목 — 원본 실측: 라벨 22.713px/500, 헤딩 40.8833px/600(SemiBold)
   헤딩 기본색은 회색(110,110,110), 강조 절은 <strong>으로 다크(50,50,50) */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;                    /* 원본 실측 29.53/22.713 */
  color: var(--c-blue);                /* 대부분 섹션 라벨 = 파랑 rgb(0,98,224) */
  margin-bottom: 1.5rem;               /* 24px / 원본 eyebrow 자간 = normal */
}
.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;                    /* 원본 헤딩 = SemiBold 600 (Mission만 700로 별도 지정) */
  line-height: 1.3;                    /* 원본 53.15/40.88 */
  color: var(--c-gray);                /* 회색 베이스 rgb(110,110,110) */
}
.section-title strong {
  font-weight: inherit;                /* 강조 절도 동일 굵기, 색만 다크 */
  color: var(--c-ink);                 /* rgb(50,50,50) */
}
.section-body {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--c-ink);                 /* 원본 본문 = rgb(50,50,50) */
  line-height: 1.5;                    /* 원본 24.53/16.35 */
  word-break: keep-all;                /* 한글 단어 경계로만 줄바꿈(글자 파편 방지) */
}
/* 카드/스텝 본문도 단어 경계 줄바꿈 */
.cv-card__text, .biz-card__text, .roadmap__step-text, .roadmap__step-title { word-break: keep-all; }
/* 반응형 줄바꿈: br-m(모바일 전용)은 데스크톱에서 숨김, br-d(데스크톱 전용)는 모바일에서 숨김 */
.br-m { display: none; }
.section-body strong {
  font-weight: 600;                    /* 원본 강조 = Pretendard SemiBold */
  color: inherit;
}
/* Fit 2번째 문단 강조처럼 본문 내 SemiBold(600) 강조용 */
.section-body .em-semibold {
  font-weight: 600;
  color: inherit;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header__inner {
  width: 100%;
  max-width: 77.5rem;       /* 1240px. 로고 x≈191 / 네비 우측 x≈1249 (원본 실측 정합) */
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 스크롤 시 헤더 배경 (main.js 가 토글) */
.site-header.is-scrolled {
  background: rgba(8, 14, 26, 0.5);   /* 원본 스크롤 헤더는 반투명 회색(밝은 섹션 위에서 중간 회색) */
  box-shadow: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;            /* 9px */
}
.brand__mark {
  width: 1.375rem;           /* 22px */
  height: 1.375rem;
  /* 파란 H 마크 → 흰색으로 (헤더/푸터 어두운 배경용) */
  filter: brightness(0) invert(1);
}
.brand__name {
  font-size: 1.25rem;        /* 20px */
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-white);
}

.nav {
  display: flex;
  align-items: center;
  gap: 3.125rem;             /* 50px */
}
.nav__link {
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--c-white);
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.nav__link:hover { opacity: 1; }
/* 현재 활성(스크롤 위치) 네비 항목 밑줄 — 원본과 동일 */
.nav__link.is-active { opacity: 1; }
.nav__link.is-active::after {
  content: "";
  display: block;
  height: 2px;              /* 장식 하이라인 — px 유지 */
  margin-top: 0.25rem;      /* 4px */
  background: currentColor;
}

/* 스크린리더 전용(시각적 숨김) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 햄버거 (모바일 전용) */
.nav-toggle {
  display: none;            /* 데스크톱 숨김. 모바일(@media)에서만 노출, 그땐 root=16px */
  width: 2.5rem;            /* 40px */
  height: 2.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.5rem;          /* 8px */
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;             /* 장식 바 — px 유지 */
  background: var(--c-white);
  margin: 5px 0;           /* 장식 바 간격 — px 유지 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 61.3125rem;       /* 981px. 원본 히어로 섹션 높이(1440 기준 실측 981) */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 12, 30, 0.25) 0%, rgba(4, 12, 30, 0.05) 45%, rgba(4, 12, 30, 0.35) 100%);
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 14vh;
}
.hero__kicker {
  font-size: 1.875rem;      /* 30px */
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   MISSION
   ============================================================ */
/* 원본: 섹션 ≈ y981–1708 (높이 ≈727). 텍스트 좌측 x91, 지구본 우측 x703 w599 */
.mission {
  padding: 5.125rem 0 2.875rem;   /* 82px 0 46px — Vision이 y≈1708에서 시작하도록 역산 */
  background: var(--c-white);
}
.mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3.75rem;                /* 60px */
}
/* Mission 헤딩만 예외: Bold 700 + 회색 베이스 rgb(135,135,135) (강조 절은 다크 50,50,50) */
.mission__title {
  margin: 1.5rem 0 3.5rem;     /* 24px 0 56px */
  font-weight: 600;            /* 원본 Pretendard SemiBold */
  color: var(--c-gray-light);
}
.mission__p2 { margin-top: 0; }   /* 원본 데스크톱도 두 문단 연속(추가 여백 없음, gap=줄높이 25px) */
.mission__media {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 37.4375rem;       /* 599px */
  margin-left: auto;
}
.mission__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   VISION (배경 비디오 + 텍스트 + 버튼)
   ============================================================ */
/* 원본: 섹션 ≈ y1708–2802 (높이 ≈1094). 배경 비디오 풀폭.
   텍스트 좌측 상단(x91 y1800~), 칩 3개는 흩뿌린 위치. */
.vision {
  position: relative;
  min-height: 68.375rem;       /* 1094px */
  padding: 5.75rem 0 0;        /* 92px */
  overflow: hidden;
  background: #f5f8fc;
}
.vision__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.95;
}
.vision__video--m { display: none; }   /* 모바일 전용 비디오 — 데스크톱 숨김 */
.vision__inner { position: relative; z-index: 2; }
.vision__title { margin: 0.375rem 0 1.625rem; max-width: 47.5rem; }  /* 6px 0 26px; 760px / 데스크톱은 section-title 회색110 상속, 모바일만 135 */
/* 버튼 스테이지: 풀폭 섹션(.vision) 기준 절대 좌표 레이어.
   패딩 없이 inset:0으로 깔아 left/top을 섹션 좌상단(0,0) 기준으로 직접 지정한다. */
.vision__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}
.pill {
  position: absolute;
  display: block;
  width: 8.4375rem;       /* 135px */
  height: 2.8125rem;      /* 45px */
  object-fit: contain;
}
/* 원본 버튼 절대 좌표 (풀폭 섹션 기준, 섹션 시작 y1708):
   Software left657 top2056(상대348), Brand left435 top2170(상대462), Marketing left840 top2158(상대450). */
.pill--software  { left: 41.0625rem; top: 21.75rem; }   /* 657px; 348px */
.pill--brand     { left: 27.1875rem; top: 28.875rem; }  /* 435px; 462px */
.pill--marketing { left: 52.5rem;   top: 28.125rem; }   /* 840px; 450px */

/* ============================================================
   CORE VALUE (다크 그라데이션 + 카드 스택)
   ============================================================ */
/* 원본: 섹션 ≈ y2802–7720. 헤딩 좌측(x91, sticky 느낌) + 카드 우측 단일 컬럼(x678 w670 h670).
   .container 대신 2-컬럼 그리드로 헤딩 좌 / 카드 우 배치. */
.core-value {
  background: linear-gradient(180deg, var(--c-cv-top) 0%, var(--c-cv-bot) 100%);
  color: var(--c-white);
  padding: 8.5rem 0 9.25rem;  /* 136px 0 148px. 카드 첫장 y2938 ≈ 섹션+136 */
}
.core-value .container {
  display: grid;
  /* 원본 콘텐츠폭 ~1260(헤딩 x91~593, 카드 x678~1348)에 맞춰 컨테이너 확장 */
  max-width: 90rem;           /* 1440px@1440, 1600에서 캡 */
  /* 좌측 헤딩 컬럼(나머지) + 우측 카드 컬럼 670px 고정.
     카드는 어느 뷰포트에서도 670px 유지(스케일 안 함) → 고정 px. */
  grid-template-columns: minmax(0, 1fr) 670px;
  column-gap: 2.5rem;         /* 40px */
  align-items: start;
}
.core-value__head {
  position: sticky;
  top: 8.75rem;               /* 140px. 좌측 헤딩 고정 느낌 */
  padding-top: 8.875rem;      /* 142px. 헤딩 y3080 ≈ 섹션+278 (카드 시작보다 아래) */
}
.core-value__head .eyebrow { color: var(--c-blue-soft); }
.core-value__title {
  font-size: var(--fs-h2);
  font-weight: 600;           /* 원본 실측 SemiBold 600 */
  line-height: 1.34;
  color: var(--c-white);
  word-break: keep-all;       /* 한글 단어 중간 끊김 방지 (<br> 기준 줄바꿈) */
}
.core-value__list {
  display: flex;             /* 음수 margin 겹침을 위해 flex (grid는 음수margin 미적용) */
  flex-direction: column;
  align-items: flex-end;     /* 670px 카드 우측 정렬 */
  justify-content: end;
}
.cv-card {
  position: relative;
  width: 670px;               /* 원본 실측 670px 고정 (어느 뷰포트에서도 불변) */
  height: 670px;
  border-radius: 16.75px;     /* 원본 SVG 마스크 둥근모서리(viewBox 25/1000 × 670 = 16.75px) */
  overflow: hidden;
  display: block;             /* 본문 블록은 absolute로 배치 */
}
/* 카드 피치: 원본 1440 실측 663.58px가 vw 비례 스케일(1600 cap). 카드는 670 고정이라
   1440에선 -6.42px(살짝 겹침), 1600+에선 +67.3px(간격)이 된다. rem이 1600 cap을 담당. */
.cv-card:not(:first-child) { margin-top: calc(41.47375rem - 670px); }
.cv-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cv-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(6, 14, 28, 0.72) 0%, rgba(6, 14, 28, 0.42) 60%, rgba(6, 14, 28, 0.30) 100%);
  z-index: 1;
}
/* 카드 박스(670px)와 라벨 폰트(24px)만 고정. 본문/제목 폰트·세로위치·가로 inset은
   원본처럼 vw 비례 스케일(1600 cap)된다 → rem으로 표기(1440 기준값 ÷16 = rem). */
.cv-card__body {
  position: absolute;
  z-index: 2;
  /* 원본 1440 실측: 라벨 상단 카드+336.56px, 좌우 inset 54.47px (둘 다 스케일) */
  top: 21.035rem;        /* 336.56 ÷16 */
  left: 3.404375rem;     /* 54.47 ÷16 */
  right: 3.404375rem;
}
.cv-card__label {
  font-size: 24px;             /* 원본 실측 24px 고정 */
  font-weight: 500;            /* 원본 Medium 500 */
  line-height: 1.3;            /* 원본 실측 31.2px = 24×1.3 */
  color: var(--c-white);       /* 원본 실측 solid rgb(255,255,255) */
}
.cv-card__title {
  font-size: 2.27129rem;       /* 36.3407 ÷16, vw 스케일(1600 cap) */
  font-weight: 600;            /* 원본 Pretendard SemiBold */
  line-height: 1.3;            /* 47.24px = 36.34×1.3 */
  margin: 0.68125rem 0 0;      /* 라벨 라인박스(고정 31.2) 다음 10.9px ÷16, 스케일 */
  color: var(--c-white);
}
.cv-card__text {
  font-size: 1.02209rem;       /* 16.3534 ÷16, vw 스케일(1600 cap) */
  font-weight: 400;
  line-height: 1.6;            /* 26.165px = 16.35×1.6 */
  margin-top: 1.7025rem;       /* 27.24px ÷16, 스케일 */
  color: var(--c-white);       /* 원본 실측 solid rgb(255,255,255) */
  /* 폭은 본문 좌우 inset(3.404375rem)이 결정. 줄바꿈은 <br>가 제어 */
}

/* ============================================================
   ROADMAP (3 풀폭 밴드 — 사진 + scrim)
   ============================================================ */
/* 원본: 헤딩 y7937–8088, 밴드 이미지 각 h500 (y8154/8654/9154). 단계 텍스트 우측 x848. */
.roadmap__head {
  padding: 9.375rem 0 4.125rem;   /* 150px 0 66px */
  background: var(--c-white);
}
.roadmap__head .eyebrow { color: var(--c-blue); }
/* 헤딩 회색 베이스(110,110,110)는 .section-title 기본값, 강조 절만 <strong>으로 다크 */
.roadmap__band {
  position: relative;
  height: 31.25rem;           /* 500px */
  display: flex;
  align-items: center;
  color: var(--c-white);
  overflow: hidden;
}
.roadmap__band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.roadmap__band-bg--m { display: none; }   /* 모바일 전용 정사각 배경 — 데스크톱 숨김 */
.roadmap__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 14, 28, 0.5) 0%, rgba(6, 14, 28, 0.36) 55%, rgba(6, 14, 28, 0.3) 100%);
  z-index: 1;
}
.roadmap__band-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  /* 원본: 단계 텍스트 x844(콘텐츠 좌측+754). phase 컬럼 686 + gap 68 = 754.
     phase 최장 "New Ventures Phase"(609px)가 한 줄에 들어가도록 686으로. */
  grid-template-columns: minmax(0, 42.875rem) 1fr;   /* 686px */
  align-items: center;
  column-gap: 4.25rem;        /* 68px */
}
.roadmap__phase {
  font-size: var(--fs-phase);
  font-weight: 400;            /* 원본 실측 Regular 400 (phase 라벨은 얇음) */
  line-height: 1.1;
  color: var(--c-white);
}
.roadmap__step-num {
  font-size: var(--fs-body);   /* 원본 16.3534px */
  font-weight: 600;            /* 원본 실측 SemiBold 600 */
  line-height: 1.4;            /* 원본 실측 22.89/16.3534 */
  color: var(--c-white);       /* 원본 실측 rgb(255,255,255) */
  margin-bottom: 0.75rem;      /* 12px */
}
.roadmap__step-title {
  font-size: var(--fs-h3);
  font-weight: 600;            /* 원본 실측 SemiBold 600 */
  line-height: 1.3;            /* 원본 실측 47.24/36.34 */
  margin-bottom: 1.375rem;     /* 22px */
  color: var(--c-white);
}
.roadmap__step-text {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: 1.6;            /* 원본 실측 밴드2·3 = 23.26/14.5362 */
  color: var(--c-white);       /* 원본 실측 rgb(255,255,255) */
}

/* ============================================================
   BUSINESS (6 카드 2열 그리드)
   ============================================================ */
/* 원본: 헤딩 y9789, 카드 이미지 y9956~11250 (2열, x91/x765, 이미지 w≈584). */
.business {
  padding: 9.375rem 0 10rem;   /* 150px 0 160px */
  background: var(--c-white);
}
.business__head { margin-bottom: 4rem; }   /* 64px */
.business__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.75rem 5.75rem;        /* 92px 92px */
}
.business__head .eyebrow { color: var(--c-blue); }
.biz-card__media {
  width: 100%;
  border-radius: 0.25rem;     /* 4px */
  overflow: hidden;
  background: #eef2f7;
}
/* 원본은 카드 이미지를 자연비율로 표시(높이 변동 287~320). 크롭하지 않는다 */
.biz-card__media img {
  width: 100%;
  height: auto;
  display: block;
}
.biz-card__title {
  font-size: var(--fs-label);
  font-weight: 600;            /* 원본 Pretendard SemiBold */
  line-height: 1.4;             /* 원본 실측 31.80/22.713 */
  margin: 1.375rem 0 0.75rem;   /* 22px 0 12px */
  color: var(--c-ink);
}
.biz-card__text {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: 1.4;             /* 원본 실측 20.35/14.5362 */
  color: var(--c-ink);          /* 원본 실측 rgb(50,50,50) */
}

/* ============================================================
   FIT (텍스트 좌 + 사진 우)
   ============================================================ */
/* 원본: 헤딩 y11779, 사진 2장 우측(x599 h598 / x980 h543). 섹션 ≈11700–12300. */
.fit {
  padding: 9.375rem 0 9.375rem;   /* 150px 0 150px */
  background: var(--c-white);
}
/* 원본: 텍스트(좌, ~479px) + 이미지 2장(우, 각 369px). 컨테이너 1258 */
.fit__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.75rem;               /* 28px: 텍스트–이미지 간격 */
}
.fit .eyebrow { color: var(--c-blue); }
.fit__title { margin: 0.375rem 0 1.75rem; }       /* 6px 0 28px */
.fit__emph2 { color: var(--c-ink); }              /* '분들에게는' 데스크톱 다크 50 (모바일은 회색으로 오버라이드) */
.fit__body + .fit__body { margin-top: 1.125rem; } /* 18px */
.fit__media {
  display: flex;
  gap: 0.8125rem;            /* 13px */
  align-items: flex-start;
}
/* 원본 데스크톱: 두 이미지 같은 비율(409/598≈0.684)·같은 높이·상단정렬.
   인물은 w_409,h_598,fp_0.43_0.50 크롭. */
.fit__media img {
  width: 23.0625rem;         /* 369px */
  aspect-ratio: 409 / 598;   /* 원본 크롭 비율 0.684 (인물·태블릿 동일 → 높이 일치) */
  object-fit: cover;
  object-position: 43% 50%;  /* 원본 focal point fp_0.43_0.50 */
  border-radius: 0.25rem;    /* 4px */
  display: block;
}
.fit__media img:last-child { object-position: center; margin-top: 0; }   /* 태블릿도 동일 비율·상단정렬(높이 일치) */
/* img1은 원본 크롭이 UA별로 다름(데스크톱 0.617 / 모바일 0.872) → 변형 2장 swap.
   .fit__media img(0,1,1)보다 특이도 높여야 display 적용됨 */
.fit__media .fit-img--m { display: none; }   /* 데스크톱은 fit-img--d 표시 */

/* ============================================================
   COMPANY (블루 섹션 + 사진 + 썸네일 스트립)
   ============================================================ */
/* 원본: 헤딩 y12578, 오피스 이미지 y12686 w1257 h408, 썸네일 스트립 y13104 (11장 120×120), 푸터 y13417. */
.company {
  /* 원본 실측: linear-gradient(315deg, rgb(0,53,120) 0%, rgb(0,98,224) 100%) */
  background: linear-gradient(315deg, #003578 0%, #0062e0 100%);
  color: var(--c-white);
  padding: 7.5rem 0 8.125rem;   /* 120px 0 130px */
}
.company__title {
  font-size: var(--fs-h2);
  font-weight: 600;            /* 원본 실측 SemiBold 600 */
  line-height: 1.3;            /* 원본 실측 53.15/40.88 */
  color: var(--c-white);
  margin-bottom: 4rem;         /* 64px */
}
.company__hero {
  width: 100%;
  border-radius: 0.25rem;      /* 4px */
  overflow: hidden;
  aspect-ratio: 1257 / 408;
}
.company__hero img { width: 100%; height: 100%; object-fit: cover; }
.company__hero { cursor: pointer; }   /* 클릭 → 다음 슬라이드 */
.company__strip {
  display: flex;               /* 원본: 단일 행(썸네일 ~120px) + 가로 스크롤 */
  overflow-x: auto;
  gap: 0.625rem;               /* 10px */
  margin-top: 1.125rem;        /* 18px */
  scrollbar-width: none;
}
.company__strip::-webkit-scrollbar { display: none; }
.company__strip img {
  flex: 0 0 7.5rem;            /* 120px 고정 — 원본 단일 행 썸네일 */
  width: 7.5rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.1875rem;    /* 3px */
  cursor: pointer;
  opacity: 0.55;               /* 비활성 썸네일 흐리게 */
  transition: opacity 0.2s ease;
}
.company__strip img.is-active,
.company__strip img:hover { opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-footer);
  color: rgba(255, 255, 255, 0.82);
  padding: 3.5rem 0 4rem;      /* 56px 0 64px */
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;                 /* 40px */
  align-items: start;
  max-width: 77.5rem;          /* 1240px — 원본 푸터는 헤더와 동일 컨테이너(법인정보 x191/우측컬럼 x1069) */
}
.site-footer__brand { display: flex; flex-direction: column; gap: 1.125rem; }   /* 18px */
.site-footer__legal {
  font-size: 0.66142rem;       /* 원본 실측 10.58px */
  color: var(--c-white);       /* 원본 데스크톱 푸터 = 100% 흰색 */
  line-height: 1.4;            /* 원본 실측 14.82/10.58 */
}
.site-footer__col h2 {
  font-size: 1.0394rem;        /* 원본 실측 16.63px */
  font-weight: 600;            /* 원본 Pretendard SemiBold */
  line-height: 1.4;            /* 원본 실측 23.28/16.63 */
  color: var(--c-white);
  margin-bottom: 0.625rem;     /* 10px */
}
.site-footer__col + .site-footer__col { margin-top: 1.625rem; }   /* 26px */
.site-footer__col p,
.site-footer__col a {
  font-size: 0.66142rem;       /* 원본 실측 10.58px */
  color: var(--c-white);       /* 원본 데스크톱 푸터 = 100% 흰색 */
  line-height: 1.4;            /* 원본 실측 14.82/10.58 */
}
.site-footer__col a:hover { color: var(--c-white); }

/* ============================================================
   반응형 — 모바일 (<1000px) : 단일 컬럼 스택 + 햄버거
   ============================================================ */
@media (max-width: 999px) {
  /* 원본 Wix 모바일은 390 기준 디자인을 vw 비례로 스케일(480=×1.23).
     루트 폰트를 vw/390에 비례시키고(585px에서 cap) 모든 값을 rem로 둔다. */
  html { font-size: min(calc(100vw / 390 * 16), 24px); }

  :root {
    --pad-x: 2.5rem;          /* 원본 콘텐츠폭(380px)에 1px 여유 → 단어가 원본과 동일 줄에 들어감 (Mission/Vision/CoreValue/Business) */
    --maxw: 100%;
    --nav-h: 57px;            /* 원본 모바일 헤더는 vw 스케일 아닌 고정 밴드 (57px@390, 58.5px@480) */
    --fs-nav: 1rem;
    --fs-label: 0.975rem;     /* 15.6 */
    --fs-h2: 1.3rem;          /* 20.8 */
    --fs-h3: 1.17rem;         /* 18.72 */
    --fs-body: 0.91rem;       /* 14.56 */
    --fs-body-sm: 0.78rem;    /* 12.48 */
    --fs-phase: 0.8rem;       /* 12.8 */
  }

  /* 헤더: 원본 모바일은 fixed가 아니라 hero 위에 얹혀 스크롤과 함께 사라짐 */
  .site-header { position: absolute; }
  .site-header.is-scrolled { background: transparent; box-shadow: none; }
  /* 헤더: 원본 모바일은 좌우 패딩 ~25px(콘텐츠 51보다 좁음) */
  .site-header__inner { padding: 0 1.27rem; max-width: none; }
  /* 네비: 데스크톱 링크 숨기고 햄버거 노출 */
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(8, 14, 26, 0.97);
    padding: 0.5rem 0;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { width: 100%; padding: 0.875rem 1.5rem; font-size: 1rem; }

  /* 원본 모바일 타이포(데스크톱 base와 분기): 본문 행간 1.4, eyebrow 자간 normal, 제목 행간 1.2 */
  .section-body { line-height: 1.4; }
  .eyebrow { letter-spacing: normal; margin-bottom: 1rem; }   /* 원본 모바일 eyebrow→제목 ~19px (데스크톱 24px 스케일 과다 보정) */
  .mission__title, .vision__title, .core-value__title, .cv-card__title, .fit__title { line-height: 1.2; }   /* 원본 25.6 제목 normal */
  .mission__title { margin: 0 0 1.05rem; }   /* 원본 모바일 Mission 제목→본문 ~20px (데스크톱 3.5rem 스케일 과다 보정) */
  .vision__title { color: var(--c-gray-light); }   /* 원본 모바일 Vision 회색 135 (데스크톱은 110) */
  .vision__title strong .vision__kr { color: var(--c-gray-light); }   /* '기업이' 모바일은 회색 135 (데스크톱은 strong 다크 50 상속) */
  #business-title strong { color: #000; }   /* 원본 모바일 비즈니스 강조 순검정 0 (데스크톱은 50) */
  .biz-card__title { line-height: 1.3; }   /* 원본 26.6/20.5=1.3 */
  .roadmap__step-num, .roadmap__step-title { line-height: 1.4; }   /* 원본 32.3/23=1.4 */
  /* 원본 모바일 푸터 텍스트는 100% 흰색(데스크톱은 흐림) */
  .site-footer__legal, .site-footer__col p, .site-footer__col a { color: var(--c-white); }

  /* 데스크톱용 하드 <br>는 모바일에서 숨김. 모바일 전용 줄바꿈은 br-m으로 표시 */
  .section-body:not(.brk) br:not(.br-m), .cv-card__text br:not(.br-m), .biz-card__text br:not(.br-m) { display: none; }
  /* 로드맵 step-text는 원본이 모바일에서도 문장별 <br>를 유지(밴드1 중간 블록만 자연 줄바꿈) → 숨기지 않음 */
  .br-d { display: none; }
  .br-m { display: inline; }

  /* HERO: 원본 모바일은 16:9 짧은 영상(390×219, 480×270) */
  .hero { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .hero__kicker { font-size: 1.375rem; }

  /* MISSION: 텍스트 먼저 → 지구본(컨테이너 폭, 중앙) */
  .mission { padding: 5.2rem 0 3.75rem; }   /* 원본 히어로→Mission 여백 102px@480 */
  .mission__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .mission__text { margin-right: -0.95rem; }   /* 원본 본문 폭(우 패딩 좁힘). "이롭게 하여," 한 줄 확보 */
  .mission__p2 { margin-top: 0; }   /* 원본 모바일: 두 문장 연속(추가 여백 없음) */
  .mission__media { width: 100%; max-width: none; margin: 0.5rem auto 0; }

  /* VISION: 풀폭 영상 figure 위에 텍스트(상단)+버튼(피규어 주변 절대배치) */
  .vision { padding: 3.5rem 0 0; min-height: 186.7vw; }   /* 원본 비디오 480×896 = 세로/가로 1.867 */
  /* 모바일은 원본 전용 비디오(62a56735, 머리 와이드 샷)로 교체 */
  .vision__video:not(.vision__video--m) { display: none; }
  .vision__video--m { display: block; }
  .vision__inner { position: relative; z-index: 2; }
  .vision__stage {
    position: absolute; inset: 0; height: auto;
    display: block; pointer-events: none; margin-top: 0;
  }
  .vision__stage .pill { position: absolute; width: 6.09rem; height: auto; }
  .pill--software  { left: 37.6%; top: 52.8%; }
  .pill--marketing { left: 63.2%; top: 60.5%; }
  .pill--brand     { left: 10.8%; top: 64.5%; }

  /* CORE VALUE: 정사각 카드(컨테이너 폭), 텍스트 하단 오버레이 */
  .core-value { padding: 3.5rem 0 3.75rem; }
  .core-value .container { grid-template-columns: 1fr; }
  .core-value__head { position: static; top: auto; padding-top: 0; text-align: center; margin-bottom: 2rem; }
  .core-value__list { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 2.6rem; align-items: stretch; }
  .cv-card { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; border-radius: 0.625rem; display: block; }
  .cv-card:not(:first-child) { margin-top: 0; }
  .cv-card__body { position: absolute; top: auto; bottom: 1.625rem; left: 1.25rem; right: 1.25rem; }
  .cv-card__label { font-size: 0.845rem; }
  .cv-card__title { font-size: 1.3rem; line-height: 1.2; margin: 0.375rem 0 0; }   /* 원본 normal */
  .cv-card__text { font-size: 0.78rem; line-height: 1.4; margin-top: 0.625rem; max-width: none; }   /* 원본 모바일 21.5/15.4=1.4 (자간은 원본 줄별 auto-fit이라 normal 유지) */

  /* ROADMAP: 풀폭 정사각 밴드, 패딩 24.6 */
  #roadmap { --pad-x: 1.54rem; }
  .roadmap__head { padding: 3.5rem 0 1.625rem; }
  /* 원본 모바일: Roadmap 제목은 30.7px@480 (1.56rem) — Mission/CV/Fit(1.3rem)보다 큼 */
  #roadmap .section-title { font-size: 1.56rem; }
  /* 원본 모바일: 텍스트가 정사각 이미지 중앙이 아니라 하단에 위치 */
  .roadmap__band { min-height: 0; height: 100vw; width: 100%; max-width: 100%; aspect-ratio: auto; align-items: flex-end; }
  .roadmap__band::after { background: linear-gradient(180deg, rgba(6,14,28,0.05) 0%, rgba(6,14,28,0.15) 45%, rgba(6,14,28,0.72) 100%); }
  /* 모바일: 정사각 전용 배경 이미지로 교체 */
  .roadmap__band-bg:not(.roadmap__band-bg--m) { display: none; }
  .roadmap__band-bg--m { display: block; }
  .roadmap__band-inner { grid-template-columns: 1fr; gap: 0.875rem; align-items: start; padding-bottom: 2.9rem; }
  .roadmap__phase { font-size: 0.8rem; }
  /* 모바일: 원본은 "N단계 : 제목"을 한 줄로 결합 */
  .roadmap__step-num { display: inline; font-size: 1.17rem; line-height: 1.3; margin: 0; }
  .roadmap__step-num::after { content: " : "; white-space: pre; }
  .roadmap__step-title { display: inline; font-size: 1.17rem; }
  .roadmap__step-text { font-size: 0.715rem; margin-top: 0.5rem; letter-spacing: -0.02em; }   /* 원본 per-line squeeze 근사 — 긴 마지막 줄이 한 줄에 들어가도록(원본 일치). keep-all 상속 */
  .roadmap__band:nth-of-type(2) .roadmap__step-text { line-height: 1.4; }   /* 원본 모바일만 밴드1 행간 1.4 (데스크톱 밴드1은 1.6) */

  /* BUSINESS: 단일 컬럼, 이미지 307×177(가로 크롭) */
  .business { padding: 3.5rem 0 3.75rem; }
  /* 원본 모바일: Business 제목 30.7px@480 (1.56rem) */
  #business .section-title { font-size: 1.56rem; }
  .business__grid { grid-template-columns: 1fr; gap: 1.875rem; }
  .biz-card__media { aspect-ratio: 307 / 177; }
  .biz-card__media img { height: 100%; object-fit: cover; }
  .biz-card__title { font-size: 1.04rem; }
  .biz-card__text { font-size: 0.78rem; letter-spacing: -0.01em; line-height: 1.4; }   /* 원본 모바일 -0.01em, lh 1.4 */

  /* FIT: 검정 배경 + 흰 텍스트, 패딩 24, 이미지 2장 나란히 */
  /* 원본 모바일 Fit은 검은 배경 + 흰 텍스트 (데스크톱은 흰색 — Wix UA 분기) */
  .fit { --pad-x: 1.5rem; padding: 3.5rem 0 3.75rem; background: #000; }
  .fit__title { color: rgb(194, 194, 194); }              /* 원본 모바일 Fit 회색 194 */
  .fit__title strong { color: #fff; }                     /* '워라밸을 중요하게 생각하는'만 흰색 */
  .fit__emph2 { color: rgb(194, 194, 194); }              /* '분들에게는' 모바일은 회색(데스크톱은 다크) */
  .fit__body, .fit__body .em-semibold { color: #fff; }
  .fit__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .fit__media { flex-direction: row; gap: 0.625rem; justify-content: flex-start; align-items: flex-start; }
  /* 원본 모바일: 좌 204.8×234.6(ar0.87), 우 204.8×300.3(ar0.68), 상단 정렬 */
  .fit__media .fit-img--m { display: block; }    /* 모바일은 fit-img--m 표시 */
  .fit__media .fit-img--d { display: none; }
  .fit__media img { width: calc((100% - 0.625rem) / 2); max-width: none; aspect-ratio: 205 / 235; object-fit: cover; object-position: 43% 50%; margin-top: 0; }
  .fit__media img:last-child { aspect-ratio: 205 / 300; object-position: center; margin-top: 0; }   /* base margin-top 덮어 상단 정렬 */
  /* 원본 모바일: 인물 이미지(0.872)가 태블릿(0.68)보다 짧음 → 같은 높이 칸에 사진 상단정렬 + 아래 회색(#eee) 노출 */
  .fit__media .fit-img--m { aspect-ratio: 205 / 300; object-fit: contain; object-position: top; background: rgb(238, 238, 238); }

  /* COMPANY: 패딩 24.6 */
  .company { --pad-x: 1.55rem; padding: 3.5rem 0 3.75rem; }
  .company__title { font-size: 1.56rem; }
  /* 원본 모바일(모바일 UA) 480: featured 421×236≈1.8:1 + 썸네일 90×90 가로 스트립 */
  .company__hero { aspect-ratio: 421 / 236; }
  .company__strip { display: flex; grid-template-columns: none; overflow-x: auto; gap: 10px; margin-top: 0.75rem; -webkit-overflow-scrolling: touch; }
  .company__strip img { flex: 0 0 auto; width: 90px; aspect-ratio: 1 / 1; }   /* 원본 고정 90px(모바일 UA) */

  .site-footer { --pad-x: 3.2rem; }   /* 원본 모바일 푸터 들여쓰기 63px@480 */
  .site-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .site-footer__col h2 { font-size: 0.91rem; }
  .site-footer__legal, .site-footer__col p, .site-footer__col a { font-size: 0.65rem; }   /* 원본 12.8px@480 */
  /* 원본 모바일 푸터 로고는 얇은 워드마크(182×20). 헤더보다 작게 */
  .site-footer .brand { gap: 0.45rem; }
  .site-footer .brand__mark { width: 1rem; height: 1rem; }
  .site-footer .brand__name { font-size: 0.85rem; letter-spacing: 0.1em; line-height: 1; }
}