/* ============================================================
   랜딩 (index) — 히어로 섹션
   step.md: 인라인 스타일 제거 · 시맨틱 마크업 · 별도 CSS
   ============================================================ */
:root {
  --hero-indigo: #4f46e5;
  --hero-indigo-dark: #4338ca;
  --color-brand-light: #e0e5fe; /* 연보라 — 링·라이트 카드 공통 */
  --color-brand-subtle: #eef1ff; /* 아주 연한 보라 — 혜택 카드 배경 */
  --hero-ink: #111827;
  --hero-desc: #6b7280;
  --hero-note: #8c8f9e;
  --hero-shadow: 0 10px 21px rgba(76, 71, 154, 0.05),
    0 39px 39px rgba(76, 71, 154, 0.09), 0 87px 52px rgba(76, 71, 154, 0.04);
  /* 타이틀=Paperlogy(폴백 Pretendard), 본문=Pretendard — index 인라인 :root 에 정의됨 */
  --hero-font: var(--font, 'Pretendard', sans-serif);
  --hero-title-font: var(--Paperlogy, 'Pretendard', sans-serif);

  /* 히어로 플로팅 영상 배치 (반응형: 화면 좁아지면 줄고 최대값은 아래) */
  --media-h: 233px; /* 영상 높이 */
  --media-right: 4%; /* 좌우 기본 인셋 (좁으면 1%로) */
  --media-stagger-x: clamp(
    28px,
    6.7vw,
    88px
  ); /* contract가 attendance보다 왼쪽으로: 최대 88px */
  --media-gap-y: clamp(
    36px,
    5vw,
    90px
  ); /* contract↔attendance 상하 간격: 최대 90px */
}

.pc-in {
  display: inline;
}
.pc {
  display: flex;
}
.mo {
  display: none;
}

/* ── 섹션 래퍼 ─────────────────────────────────────────── */
.hero {
  position: relative;
  /* min-height: 780px; */
  min-height: 100svh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
  background: radial-gradient(
    ellipse 50% 25% at 50% 50%,
    #ffffff 0%,
    #f8f8ff 100%
  );
  font-family: var(--hero-font);
  word-break: keep-all; /* 히어로 전체 텍스트: 단어 단위로만 줄바꿈(자동 wrap) */
}
.hero .hero-wrap {
  position: relative;
  max-width: 1300px;
  width: 100%;

  padding: 120px 24px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ── 배경 블러 블롭 ─────────────────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-blob {
  position: absolute;
  border-radius: 9999px;
}
.hero-blob.blob-a {
  width: 446px;
  height: 284px;
  left: 6%;
  top: 15%;
  background: rgba(111, 58, 237, 0.12);
  filter: blur(110px);
}
.hero-blob.blob-b {
  width: 284px;
  height: 203px;
  left: -2%;
  top: 52%;
  background: rgba(236, 72, 153, 0.08);
  filter: blur(90px);
}
.hero-blob.blob-c {
  width: 284px;
  height: 203px;
  right: 4%;
  top: 49%;
  background: rgba(72, 184, 236, 0.12);
  filter: blur(90px);
}

/* ── 중앙 콘텐츠 ───────────────────────────────────────── */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* 타이틀: 롤러(근로계약서→출퇴근→급여) + 고정 문구(이제 자동으로!) */
.tit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tit-roller {
  display: inline-flex;
  height: 1.3em;
  overflow: hidden;
  padding: 0 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--hero-shadow);
  font-family: var(--hero-title-font);
  font-size: clamp(38px, 7.6vw, 72px);
  line-height: 1.3;
}
.roller-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.roller-item {
  height: 1.3em;
  line-height: 1.3em;
  font-weight: 600;
  color: var(--hero-ink);
  letter-spacing: -1px;
  white-space: nowrap;
}
.tit-accent {
  font-family: var(--hero-title-font);
  font-size: clamp(38px, 7.6vw, 72px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -1px;
  color: var(--hero-indigo);
}

.hero-desc {
  color: #6b7280;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 27px */
  letter-spacing: -0.45px;
}

/* ── CTA ───────────────────────────────────────────────── */
.hero-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 50px;
}

/* CTA — position-aware 호버: 기본 인디고, 호버 시 커서에서 흰 원이 퍼지며 글자는 인디고로 */
.btn-start {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* border 1px 만큼 상하좌우 패딩을 줄여 테두리 유무와 무관하게 버튼 외곽 크기를 동일하게 유지 */
  padding: 15px 23px 15px 27px;
  background: var(--hero-indigo);
  /* hover 시 색만 켜는 투명 테두리(PC·모바일 공통) — 기본부터 자리를 잡아 hover 레이아웃 점프 방지 */
  border: 1px solid transparent;
  border-radius: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  /* 해제 시 배경 즉시 인디고 복귀 → 축소 원이 인디고 위에서 자연스럽게 사라짐 */
  transition: color 0.4s ease, border-color 0.4s ease,
    background-color 0s linear 0s;
}
.btn-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  pointer-events: none;
  z-index: 0;
}
.btn-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn-arrow {
  width: 22px;
  height: 22px;
  display: block;
}
/* 확산 원이 다 덮은 뒤(0.5s) 배경을 흰색으로 스냅 → 라운드 모서리 hairline 제거 */
.btn-start:hover {
  color: var(--hero-indigo);
  background-color: #fff;
  /* hover 시 현재 칠해져 있던 인디고색으로 테두리 표시 (PC·모바일 공통) */
  border-color: var(--hero-indigo);
  transition: color 0.4s ease, border-color 0.4s ease,
    background-color 0s linear 0.5s;
}
.btn-start:hover .btn-fill {
  width: 520px;
  height: 520px;
}
.hero-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--hero-note);
}

/* ── 플로팅 미디어 (영상) ──────────────────────────────── */
.hero-media {
  position: absolute;
  z-index: 1;
  width: 250px;
  aspect-ratio: 1 / 1;

  height: var(--media-h);
  border-radius: 10px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 200px 67px 0 rgba(76, 71, 154, 0),
    0 154px 62px 0 rgba(76, 71, 154, 0.01),
    0 87px 52px 0 rgba(76, 71, 154, 0.05), 0 39px 39px 0 rgba(76, 71, 154, 0.09),
    0 10px 21px 0 rgba(76, 71, 154, 0.05);
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-media-group {
  display: contents; /* PC: 그룹 투명 → 영상 절대배치 그대로 */
}

.media-payroll {
  left: var(--media-right);
  top: 30%;
} /* 급여명세 — 왼쪽 */

/* 계약서작성(위) + 출퇴근(아래) = 오른쪽 스태거 쌍.
   contract 가 attendance 보다 왼쪽으로 --media-stagger-x, 상하 간격 --media-gap-y */
.media-contract {
  top: 14%;
  right: calc(var(--media-right) + var(--media-stagger-x));
}
.media-attendance {
  top: calc(14% + var(--media-h) + var(--media-gap-y));
  right: var(--media-right);
}

/* ============================================================
   섹션2 — 문제제기(걱정) · 해결(핵심 기능)
   ============================================================ */
.pain {
  padding: 80px 24px;
  background: linear-gradient(180deg, #f8f8ff 0%, #ffffff 100%);
  word-break: keep-all; /* 섹션2 전체 텍스트: 단어 단위 줄바꿈 */
}
.pain-inner {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
}

.pain-empathy {
  width: 40%;
}
.pain-solution {
  width: 60%;
}

/* ── 왼쪽: 걱정(공감) — 스크롤 동안 고정, 오른쪽이 지나감 ── */
.pain-empathy {
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.pain-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pain-alert {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 1px 2px rgba(151, 168, 195, 0.1),
    0 4px 4px rgba(151, 168, 195, 0.09), 0 9px 6px rgba(151, 168, 195, 0.05);
  color: #fd4c4f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  /* 배경·글자색 반전 깜빡임 (#FFF ↔ #FD4C4F) — 주의 환기 */
  animation: painAlertBlink 1.2s steps(1, end) infinite;
}
@keyframes painAlertBlink {
  0%,
  50% {
    background-color: #ffffff;
    color: #fd4c4f;
  }
  50.01%,
  100% {
    background-color: #fd4c4f;
    color: #ffffff;
  }
}

.pain-title {
  font-family: var(--hero-title-font);
  font-size: 56px;
  line-height: 1.3;
  color: var(--hero-ink);
}
.pain-title-thin {
  font-weight: 400;
}
.pain-title-bold {
  font-weight: 700;
}
.pain-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hero-desc);
}

/* 걱정 말풍선 클러스터 (Figma 490×308 절대배치) — worry-stage 가 비율 그대로 축소.
   현재 크기가 최대(--cs:1), 화면 좁아지면 blob·ring·말풍선·간격이 함께 줄어듦. */
.worry-stage {
  width: 100%;
  max-width: 490px;
}
.worry-cluster {
  position: relative;
  width: 100%;
  max-width: 490px;
  aspect-ratio: 490 / 308;
}
.worry-blob {
  position: absolute;
  left: 20%;
  top: 5%;
  width: 60%;
  height: 92%;
  background: rgba(58, 115, 237, 0.12);
  border-radius: 9999px;
  filter: blur(110px);
}
.worry-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 180px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-light, #e0e5fe);
  border-radius: 9999px;
}
.worry-bubble {
  position: absolute;
  z-index: 2;
  width: 200px;
  height: 98px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
  color: #33384d;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  /* 초기: 투명 + blur 16 + 중앙 반대쪽(바깥)으로 밀림 → .in 시 중앙으로 모여듦 */
  opacity: 0;
  filter: blur(16px);
  transition: opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s ease;
  will-change: transform, opacity, filter;
}
.worry-tl {
  left: 0;
  top: 0;
  transform: translate(-46px, -46px);
} /* fade-right-down */
.worry-tr {
  right: 0;
  top: 0;
  transform: translate(46px, -46px);
} /* fade-left-down  */
.worry-bl {
  left: 0;
  bottom: 0;
  transform: translate(-46px, 46px);
} /* fade-right-up   */
.worry-br {
  right: 0;
  bottom: 0;
  transform: translate(46px, 46px);
} /* fade-left-up    */

/* 섹션 진입 시: 제자리로 모여들며 선명해짐 (blur 16→0) */
.pain.in .worry-bubble {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0);
}

.worry-center {
  width: 56%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.worry-center img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* ── 오른쪽: 해결(핵심 기능) ───────────────────────────── */
.pain-solution {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 80px 0;
}
/* 계단식 2열 카드 (Figma: 왼쪽열=계약서·급여 / 오른쪽열=제목·출퇴근, 아래로 오프셋) */
.solution-stack {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

/* .solution-stack  */

.solution-col {
  display: flex;
  flex-direction: column;
}
.solution-col-left {
  gap: 50px;
}
.solution-col-right {
  gap: 76px;
  padding-top: 4px;
}

.solution-title {
  color: var(--hero-indigo);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
}

.feat-card {
  max-width: 320px;
  width: 100%;
  max-height: 300px;
  aspect-ratio: 1 / 1;
  padding: 40px 36px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  /* 스크롤 등장: 화면에 들어오면 아래에서 떠오름 */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.feat-card.in {
  opacity: 1;
  transform: translateY(0);
}

.feat-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0; /* 내용 넘칠 때 아이콘 정사각 유지 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
}
.feat-icon svg {
  width: 24px;
  height: 24px;
}
.feat-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.feat-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

/* 카드별 색상 */
.feat-contract {
  background: var(--hero-indigo);
}
.feat-contract .feat-icon {
  background: rgba(255, 255, 255, 0.18);
}
.feat-contract .feat-title {
  color: #fff;
}
.feat-contract .feat-desc {
  color: #ccd1f5;
}

.feat-attend {
  background: var(--color-brand-light, #e0e5fe);
}
.feat-attend .feat-icon {
  background: rgba(79, 70, 229, 0.18);
  color: var(--hero-indigo);
}
.feat-attend .feat-title {
  color: var(--hero-ink);
}
.feat-attend .feat-desc {
  color: var(--hero-desc);
}

.feat-payroll {
  background: #1c2438;
}
.feat-payroll .feat-icon {
  background: rgba(79, 70, 229, 0.3);
}
.feat-payroll .feat-title {
  color: #fff;
}
.feat-payroll .feat-desc {
  color: #a6adc2;
}

.solution-foot {
  text-align: center;
  color: var(--hero-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── 반응형 ────────────────────────────────────────────── */

/* 걱정 클러스터 축소는 ≤768 레이아웃 블록에서 한 번만 처리 (--cs). 중간 브레이크포인트 없음. */

/* ============================================================
   섹션3 — 사용자 사진 (flex 정렬 + 로테이션으로 스캐터 느낌, 반응형)
   ============================================================ */
.people {
  padding: 80px 24px;
  background: #fff;
}
.people-stack {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: flex-start; /* margin-top 으로 위아래 스태거 */
  max-width: 860px;
  margin: 0 auto; /* 섹션 여백은 .people 의 80px 만 (여분 padding 제거) */
}
.people-card {
  width: clamp(140px, 42vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 2px 7px 15px 0 rgba(128, 128, 128, 0.1),
    6px 27px 28px 0 rgba(128, 128, 128, 0.09),
    14px 61px 38px 0 rgba(128, 128, 128, 0.05);
}
/* 고정 좌표(left) 대신 margin(겹침·스태거) + 로테이션으로 스캐터 */
.people-card:not(:first-child) {
  margin-left: -22px;
}
.people-card:nth-child(1) {
  margin-top: 0;
  transform: rotate(-6deg);
  z-index: 1;
}
.people-card:nth-child(2) {
  transform: rotate(5deg);
  z-index: 2;
}
.people-card:nth-child(3) {
  margin-top: -10px;
  transform: rotate(-5deg);
  z-index: 3;
}
.people-card:nth-child(4) {
  transform: rotate(6deg);
  z-index: 2;
}

.people-card:nth-child(even) {
  margin-top: 40px;
}

/* ============================================================
   섹션4 — 5가지 핵심 기능
   왼쪽: sticky 카피 + 등록 그리드(이미지가 날아와 슬롯 채움)
   오른쪽: 카드 스택 (스크롤에 따라 아래에서 날아와 쌓임, ScrollTrigger)
   ============================================================ */
.feat5 {
  background: #f8f8ff;
  padding: 80px 24px; /* 섹션 간 여백 넓게 */
}
.feat5-inner {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 100px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: stretch; /* 오른쪽 칸이 그리드 높이만큼 늘어나 카드가 세로 중앙에 오게 */
  width: 100%;
}

/* ── 왼쪽: 스크롤 동안 고정(sticky), 오른쪽 카드가 지나가며 쌓임 ── */
.feat5-left {
  position: sticky;
  top: 120px;
  align-self: start;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.reg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 420px;
  width: 100%;
}
.reg-slot {
  position: relative;
  flex: 0 0 auto;
  width: calc(50% - 10px);
  height: auto;
  max-width: 200px;
  max-height: 200px;
  aspect-ratio: 1 / 1;

  border-radius: 10px;
  background: var(--color-brand-light, #e0e5fe);
  /* border: 1px solid #4F46E5; */
  overflow: hidden;
}
.reg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 2px 7px 15px rgba(128, 128, 128, 0.1),
    6px 27px 28px rgba(128, 128, 128, 0.09),
    14px 61px 38px rgba(128, 128, 128, 0.05);
  will-change: transform, opacity;
}
/* 슬롯1: 평소 '+' 점선 자리 → box3 가 채우면 가려짐 */
.reg-slot-plus {
  overflow: visible; /* box3 가 밖에서 끌려올 때 잘리지 않게 */
  z-index: 5; /* 드래그가 다른 슬롯 위로 지나가게 */
  border: 2px dashed #b3b9f2; /* 이동 중엔 점선 테두리가 보임 */
  background: #f8f8ff;
  transition: border-color 0.2s ease;
}
/* 이미지가 딱 들어오면 점선 테두리·+ 제거 */
.reg-slot-plus.is-filled {
  border-color: transparent;
}
.reg-slot-plus.is-filled .reg-plus {
  display: none;
}
.reg-plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  color: var(--hero-indigo);
}
/* 슬롯1 fill(box3): 클론이 착지하기 전엔 숨김 */
.reg-photo-fly {
  opacity: 0;
}

/* 플라잉 클론: 섹션3 box3 위치 → 섹션4 슬롯1 위치로 JS 가 실시간 이동 */
.drag-fly {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 2px 7px 15px rgba(128, 128, 128, 0.1),
    6px 27px 28px rgba(128, 128, 128, 0.09),
    14px 61px 38px rgba(128, 128, 128, 0.05);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  will-change: transform, opacity, width, height;
}
.drag-fly img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reg-cursor {
  position: absolute;
  right: -6px;
  bottom: -10px;
  z-index: 3;
  line-height: 0;
  filter: drop-shadow(0 2px 4px rgba(17, 24, 39, 0.25));
}
.feat5-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.feat5-eyebrow {
  color: var(--hero-indigo);
  font-family: var(--hero-title-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.feat5-title {
  font-family: var(--hero-title-font);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.3;
  color: var(--hero-ink);
}
.feat5-title-thin {
  font-weight: 400;
}
.feat5-title-bold {
  font-weight: 700;
}
.feat5-note {
  color: #a2a6b0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── 오른쪽: 카드 스택 (assistantly .different-box 방식 — position:sticky + 스태거 top, opacity 항상 1) ── */
.feat5-right {
  position: relative;
  display: flex;
  align-items: center; /* 핀 구간 내내 카드 스택을 세로 중앙에 (헤더에 안 가리게) */
  justify-content: center;
}
/* 카드가 모이는 컨테이너 — 섹션이 핀(고정)되므로 sticky 없이 flex 중앙정렬로 배치 */
.feat5-stack {
  position: relative;
  width: 100%; /* 그리드 컬럼(1fr)에 맞춰 유동 축소 → 좁은 폭 2-col 오버플로우 방지 */
  max-width: 480px; /* PC 최대 폭 */
  height: 320px; /* 카드 한 장 높이 기준 */
}
/* 개별 카드: 절대 위치로 겹쳐 쌓임 (레퍼런스 .card) */
.feat5-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 36px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 20px 60px rgba(79, 70, 229, 0.12);
  opacity: 0; /* 초기: 아래에서 대기 (JS 가 fly-in) */
  will-change: transform, opacity;
}
/* 카드별 최종 tilt 각도 + x/y 오프셋 + z-index — 살짝 뒤죽박죽하게 쌓이도록 (JS 가 --final-* 읽어 적용) */
/* 겹치는 각도: 3패턴 사이클(-7° / 7° / -2°) 반복 → 2패턴(좌우 번갈아)보다 더 뒤죽박죽 */
.feat5-card:nth-child(1) {
  --final-rotate: -7deg;
  --final-x: -12px;
  --final-y: 9px;
  z-index: 1;
}
.feat5-card:nth-child(2) {
  --final-rotate: 7deg;
  --final-x: 13px;
  --final-y: -7px;
  z-index: 2;
}
.feat5-card:nth-child(3) {
  --final-rotate: -2deg;
  --final-x: -7px;
  --final-y: 11px;
  z-index: 3;
}
.feat5-card:nth-child(4) {
  --final-rotate: -7deg;
  --final-x: 15px;
  --final-y: -5px;
  z-index: 4;
}
.feat5-card:nth-child(5) {
  --final-rotate: 7deg;
  --final-x: -10px;
  --final-y: 6px;
  z-index: 5;
}
.feat5-card-icon {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: start;
  font-size: 34px;
  line-height: 1;
}
.feat5-card-eyebrow {
  color: var(--hero-indigo);
  font-size: 18px;
  font-weight: 700;
}
.feat5-card-title {
  color: var(--hero-ink);
  font-family: var(--hero-title-font);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}
.feat5-card-desc {
  color: var(--hero-desc);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   섹션5 — 왜 오퍼센트일까요 (혜택 카드, hover 리프트 + 섀도우)
   ============================================================ */
.why {
  background: #fff;
  padding: 80px 24px;
  overflow: hidden;
}
.why-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.why-title {
  font-family: var(--hero-title-font);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.3;
  color: var(--hero-ink);
}
.why-title-thin {
  font-weight: 400;
}
.why-title-bold {
  font-weight: 700;
}

.why-grid {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 30px;
}
.why-card {
  flex: 1 1 260px;
  min-height: 240px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-brand-subtle, #eef1ff);
  border-radius: 20px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s ease;
}
.why-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 10px 21px rgba(76, 71, 154, 0.05),
    0 39px 39px rgba(76, 71, 154, 0.09), 0 87px 52px rgba(76, 71, 154, 0.05),
    0 154px 62px rgba(76, 71, 154, 0.01);
}
.why-icon {
  display: inline-flex;
  padding: 16px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  color: var(--hero-indigo);
}
.why-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.why-card-title {
  color: var(--hero-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.why-card-desc {
  color: var(--hero-desc);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   섹션6 — 시간 절감 비교 (오퍼센트 막대·라벨 clip 릴리즈)
   ============================================================ */
.tm {
  background: #111827;
  padding: 80px 24px;
  overflow: hidden;
}
.tm-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 80px;
}
/* 왼쪽 카피 */
.tm-copy {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.tm-copy-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tm-eyebrow {
  color: #99a3fa;
  font-family: var(--hero-title-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.tm-title {
  font-family: var(--hero-title-font);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.3;
  color: #fff;
}
.tm-title-thin {
  font-weight: 400;
}
.tm-title-bold {
  font-weight: 700;
}
.tm-highlight {
  color: #99a3fa;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.5;
}

/* 오른쪽 차트 */
.tm-chart {
  flex: 0 0 auto;
  width: 605px;
  max-width: 100%;
}
.tm-task {
  margin-bottom: 28px;
}
.tm-task-label {
  color: #a6adc2;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.tm-barrow {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  margin-bottom: 8px;
}
.tm-barrow::before {
  /* 트랙 */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(51, 59, 82, 0.36);
  border-radius: 6px;
}
.tm-bar {
  position: relative;
  height: 100%;
  border-radius: 6px;
  flex: 0 0 auto;
}
.tm-bar-before {
  width: var(--w, 0);
  background: linear-gradient(90deg, #111827 0%, #acb1bc 100%);
}
.tm-bar-oper {
  background: linear-gradient(90deg, #111827 0%, #4f46e5 100%);
}
.tm-before-label {
  position: relative;
  margin-left: 10px;
  color: #bfc4e0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tm-oper-label {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: #99a3fa;
}
.tm-oper-brand {
  color: #bfc4e0;
}

/* 오퍼센트 막대: width 0 → 목표% 로 왼→오 부드럽게 자람. 라벨은 막대가 자란 뒤 fade in.
   각 막대는 자기 태스크가 화면에 들어올 때(.tm-in) 개별 재생 → 스크롤 속도와 무관하게 3개 모두 작동 */
.tm-bar-oper {
  width: 0;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-oper-label {
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}
.tm-task.tm-in .tm-bar-oper {
  width: var(--w);
}
.tm-task.tm-in .tm-oper-label {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  opacity: 1;
}

.tm-note {
  margin-top: 20px;
  color: #73788f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* ============================================================
   섹션7 — 사장님 후기 (hover 섀도우)
   ============================================================ */
.reviews {
  background: #f8f8ff;
  padding: 80px 0 0;
}
.reviews-inner {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* gap: 50px; */
}
.reviews-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}
.reviews-eyebrow {
  color: var(--hero-indigo);
  font-family: var(--hero-title-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.reviews-title {
  font-family: var(--hero-title-font);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.3;
  color: var(--hero-ink);
}
.reviews-title-thin {
  font-weight: 400;
}
.reviews-title-bold {
  font-weight: 700;
}

.reviews-grid {
  display: none; /* 클론 소스로만 사용 — 화면엔 항상 Swiper 슬라이더 표시 */
}
.review-card {
  flex: 1 1 300px;
  min-height: 220px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  background: #fff;
  border-radius: 20px;
  transition: box-shadow 0.35s ease;
}

.review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--hero-indigo);
}
.review-stars svg {
  width: 20px;
  height: 20px;
  display: block;
}
.review-quote {
  color: var(--hero-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}
.review-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #edf0ff;
  border-radius: 100px;
  font-size: 20px;
}
.review-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-role {
  color: var(--hero-ink);
  font-size: 14px;
  font-weight: 600;
}
.review-loc {
  color: #8c8f9e;
  font-size: 13px;
  font-weight: 400;
}

/* ── reviews Swiper 캐러셀 — 모든 폭에서 슬라이더(최대 3개·자동재생·루프·스와이프) ──
   >480: 3개(가운데 활성 카드에 그림자), ≤480: 1개. 사이드는 overflow:hidden 으로 자연스럽게 잘림.
   원본 .reviews-grid 는 클론 소스로만 쓰고 숨김(항상 슬라이더 표시). */
.reviews-slider {
  display: block;
  width: 95%;
  /* 넓은 화면에서 최대 1300px, 가운데 정렬. 카드 폭은 slidesPerView:'auto' + 아래 슬라이드 width 로 제어. */
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /* 3-up 에서 좌우로 넘치는 사이드 카드 자연스럽게 잘림 */
}
/* 가로 간격은 Swiper spaceBetween, 세로 패딩은 떠오르는 그림자 여유 */
/* slidesPerView:'auto' → 슬라이드 폭을 CSS 로 제어.
   기본(넓은 화면): 3장이 간격(28×2) 포함 딱 맞도록 (100% - 간격2개)/3 = 카드 폭 */
.reviews-slider .swiper-slide {
  width: calc((100% - 56px) / 3);
  display: flex;
  justify-content: center;
  padding: 50px 0 80px;
  box-sizing: border-box;
  height: auto; /* 카드 높이 통일: 슬라이드가 늘어나 가장 큰 카드 높이에 맞춰 정렬 */
}
.reviews-slider .swiper-slide .review-card {
  width: 100%; /* 슬라이드 폭 채움 */
  height: 100%; /* 모든 슬라이드 카드 동일 높이 */
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.reviews-slider .review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 21px rgba(76, 71, 154, 0.05),
    0 39px 39px rgba(76, 71, 154, 0.09), 0 87px 52px rgba(76, 71, 154, 0.05),
    0 154px 62px rgba(76, 71, 154, 0.01);
}

/* ≤1024: 카드 폭 343px 고정 (가운데 강조 + 사이드 잘림) */
@media (max-width: 1024px) {
  .reviews-slider .swiper-slide {
    width: 343px;
  }
}

/* ============================================================
   섹션8 — 자주 묻는 질문 (왼쪽 sticky 헤더 + 오른쪽 문답)
   ============================================================ */
.faq {
  background: #fff;
  padding: 80px 24px;
}
.faq-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 100px;
}
.faq-left {
  flex: 1 1 0;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.faq-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-eyebrow {
  color: var(--hero-indigo);
  font-family: var(--hero-title-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.faq-title {
  font-family: var(--hero-title-font);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.3;
  color: var(--hero-ink);
}
.faq-title-thin {
  font-weight: 400;
}
.faq-title-bold {
  font-weight: 700;
}

.faq-list {
  flex: 0 0 auto;
  width: 700px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.faq-item {
  padding: 24px 28px;
  background: #f9fafb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-q {
  color: var(--hero-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.faq-a {
  color: var(--hero-desc);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   섹션9 — 최종 CTA (coin 배경 + 스크롤 블러 + 반전 색상 버튼)
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--hero-indigo);
  padding: 70px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* width: 1722px;
  height: 1722px; */
  max-width: none;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}
.cta-blur {
  /* 블러도는 JS(ScrollTrigger scrub)가 스크롤에 연동해 0→24px 로 인라인 설정 */
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(79, 70, 229, 0.15);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
}
/* ScrollTrigger 미지원 폴백 (관찰자가 .cta-visible 부여) */
.cta.cta-visible .cta-blur {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.cta-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
}
.cta-title {
  font-family: var(--hero-title-font);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.3;
  color: #fff;
}
.cta-title-thin {
  font-weight: 400;
}
.cta-title-bold {
  font-weight: 700;
}
.cta-sub {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cta-login {
  color: #ccd1f5;
  font-size: 15px;
  font-weight: 500;
}
.cta-login a {
  color: #fff;
  text-decoration: none;
}
.cta-login a:hover {
  text-decoration: underline;
}

/* CTA 버튼 — 히어로 버튼과 색상 반대: 흰 배경/인디고 글자 → hover 인디고 채움/흰 글자 */
.btn-start.btn-start-invert {
  background: #fff;
  color: var(--hero-indigo);
  transition: color 0.4s ease, border-color 0.4s ease,
    background-color 0s linear 0s;
}
.btn-start.btn-start-invert .btn-fill {
  background: var(--hero-indigo);
}
.btn-start.btn-start-invert:hover {
  color: #fff;
  background-color: var(--hero-indigo);
  /* invert 는 원래 배경이 흰색 → hover 시 테두리도 원래 배경색(흰색)으로 (base 의 인디고 테두리를 덮어씀) */
  border-color: #fff;
  transition: color 0.4s ease, border-color 0.4s ease,
    background-color 0s linear 0.5s;
}

/* ============================================================
   랜딩 전용 푸터 (다크)
   ============================================================ */
.lp-footer {
  background: #111827;
  padding: 60px clamp(24px, 8vw, 120px);
  overflow: hidden;
}
.lp-footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lp-footer-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-footer-links a {
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  color: #73788f;
  transition: color 0.2s;
}
.lp-footer-links a.is-strong {
  color: #bfc4e0;
}
.lp-footer-links a:hover {
  color: #fff;
}

.lp-lang {
  display: flex;
  align-items: center;
}
.lp-lang a {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  color: #bfc4e0;
  transition: background 0.2s, color 0.2s;
}
.lp-lang a:hover {
  color: #fff;
}
.lp-lang a.is-active {
  background: var(--hero-indigo);
  color: #fff;
}

.lp-footer-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-footer-logo-link {
  display: inline-flex;
  align-items: center;
}
.lp-footer-logo {
  width: 104px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* 단색 로고를 다크 배경용 흰색으로 */
  opacity: 0.8;
  transition: opacity 0.2s;
}
.lp-footer-logo-link:hover .lp-footer-logo {
  opacity: 1;
}
.lp-footer-info {
  color: #73788f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
.lp-footer-info a {
  color: inherit;
  text-decoration: none;
}
.lp-footer-info a:hover {
  color: #bfc4e0;
}

/* ============================================================
   랜딩 전용 헤더 (그라데이션 + 블러, 우측 CTA 버튼)
   .hdr-landing 은 landingNav 일 때만 header 에 붙음 → 다른 페이지 영향 없음
   ============================================================ */
.hdr-landing {
  border-bottom: 0 !important;
  /* 최상단(scroll 0)에선 투명 → 블러/그라데이션 경계선 없음.
     스크롤하면 .is-scrolled 로 배경+블러가 켜져 본문 위 가독성 확보 */
  background: #f8f8ff;
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.hdr-landing.is-scrolled {
  background: transparent;
  /* background: linear-gradient(
    180deg,
    rgba(248, 248, 255, 0.85) 34.13%,
    rgba(248, 248, 255, 0) 100%
  ); */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* 랜딩 헤더: 상하 패딩 20px · 높이 80px (기본 py-[13.5px]/h-[54px] 오버라이드) */
.hdr-landing > div {
  padding-top: 20px;
  padding-bottom: 20px;
  height: 80px;
}

/* 헤더를 섹션1(hero) '위에 겹치게': hero 를 헤더 높이(80px)만큼 끌어올림.
   → 헤더의 투명 영역이 body 배경(#EBEFFE 푸른색) 대신 섹션1 배경을 보여줘 최상단 색 경계 제거. */
.hero {
  margin-top: -80px;
}

.hdr-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 10px 16px 10px 20px;
  background: var(--hero-indigo, #4f46e5);
  border-radius: 8px;
  color: #fff;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 1px 1px 4px rgba(47, 44, 99, 0.1),
    4px 6px 7px rgba(47, 44, 99, 0.09), 8px 13px 9px rgba(47, 44, 99, 0.05);
  transition: background 0.2s, transform 0.2s;
}
.hdr-cta-btn:hover {
  background: var(--hero-indigo-dark, #4338ca);
  transform: translateY(-1px);
}
.hdr-cta-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ============================================================
   타이포그래피 공통 토큰 (역할 기반 · 사이즈별)
   - 묶는 것: font-family(Paperlogy) · font-size · line-height(130%) · letter-spacing(=크기×-0.025em)
   - 요소별 유지: color · font-weight (요소 규칙에 그대로 둠)
   - 파일 끝에 두어 같은 특정도의 기존 규칙(.pain-title 등)을 덮음.
   - 지금은 고정 px(데스크톱 기준). 반응형은 이 클래스에 media query 를 더해 한 곳에서 조절.
   ============================================================ */
.lp-display {
  font-family: var(--hero-title-font);
  font-size: 72px;
  line-height: 130%;
  letter-spacing: -1.8px;
}
.lp-title-lg {
  font-family: var(--hero-title-font);
  font-size: 56px;
  line-height: 130%;
  letter-spacing: -1.4px;
}
.lp-title-md {
  font-family: var(--hero-title-font);
  font-size: 48px;
  line-height: 130%;
  letter-spacing: -1.2px;
}
.lp-title-sm {
  font-family: var(--hero-title-font);
  font-size: 44px;
  line-height: 130%;
  letter-spacing: -1.1px;
}
.lp-subtitle-lg {
  font-family: var(--hero-title-font);
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -0.6px;
}
.lp-subtitle {
  font-family: var(--hero-title-font);
  font-size: 18px;
  line-height: 130%;
  letter-spacing: -0.45px;
}

/* ============================================================
   반응형 (media queries) — 브레이크포인트 내림차순 정리
   (레이아웃은 ≤768, 글자 크기는 ≤480 원칙)
   ============================================================ */

/* ── 반응형 ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root {
    --media-right: 3%;
  } /* 좁아지면 좌우 영상 바깥으로 (stagger·gap 은 clamp 로 자동 축소) */

  .lp-display {
    font-family: var(--hero-title-font);
    font-size: 60px;
    line-height: 130%;
    letter-spacing: -1.8px;
  }
  .lp-title-lg {
    font-family: var(--hero-title-font);
    font-size: 46px;
    line-height: 130%;
    letter-spacing: -1.4px;
  }
  .lp-title-md,
  .lp-title-sm {
    font-family: var(--hero-title-font);
    font-size: 42px;
    line-height: 130%;
    letter-spacing: -1.2px;
  }

  .hero-media {
    width: 200px;
    height: 200px;
  }

  .feat-card {
    padding: 30px 25px;
  }

  .solution-stack,
  .solution-col-left {
    gap: 25px;
  }

  .worry-bubble {
    width: 170px;
  }
  .pain-inner {
    gap: 60px;
  }

  /*  */
  /*  */
  /*  */
  .feat5-inner {
    gap: 60px;
  }

  .pain-empathy,
  .faq-left,
  .tm-copy {
    width: 45%;
  }
  .pain-solution,
  .faq-list,
  .tm-chart {
    width: 55%;
  }
}

/* ── 반응형: 좁은 화면은 sticky 해제, 정적 세로 스택 ── */
@media (max-width: 1024px) {
  /* 미디어 실제 높이(150px)에 맞춰 --media-h 보정 + 세로 간격 축소.
     (attendance.top = 14% + --media-h + --media-gap-y 이므로, --media-h 가 실제보다 크면 간격이 벌어짐) */
  :root {
    --media-h: 150px; /* 실제 .hero-media 높이와 일치 */
    --media-gap-y: 36px; /* contract↔attendance 세로 간격: 130px → 36px (반 이상 축소) */
  }
  .hero-media {
    width: 150px;
    height: 150px;
  }

  .hero {
    /* min-height: 620px; */
  }

  .pain-inner {
    flex-direction: column;
    gap: 80px;
  }

  .pain-empathy {
    position: static;
    width: 100%;
    align-items: center;
  }
  .pain-lead {
    width: 100%;
  }
  .worry-bubble {
    width: 200px;
  }
  .pain-solution {
    padding: 0;
    width: 100%;
  }

  .people-card {
    width: clamp(100px, 24vw, 200px);
  }

  .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .feat5-eyebrow {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .tm-inner {
    flex-direction: column;
    gap: 50px;
  }
  .tm-chart {
    width: 100%;
  }

  .faq-inner {
    flex-direction: column;
    gap: 40px;
  }
  .faq-left {
    position: static;
    top: auto;
  }
  .faq-list {
    width: 100%;
  }

  /* 히어로 ≤900: 영상을 상단 밴드에 고정 배치하고 콘텐츠를 그 아래로 → 겹침 방지 (세로 1열) */
  /* 히어로 ≤900: 영상 그룹을 흐름 안(order:-1)에 두고, 콘텐츠는 아래. 간격은 hero-wrap gap. */
  .hero {
    align-items: center; /* 히어로 콘텐츠 위아래 중앙정렬 */
  }
  .hero-wrap {
    justify-content: center;
    gap: 100px; /* 영상 블록 ↔ 콘텐츠 사이 간격 */
  }

  .hero .hero-wrap {
    padding: 100px 16px 80px;
  }

  /* 영상 3개: grid 2열×2행(좌 1개 spans + 우 2개), 중앙정렬 + gap(양옆 25 / 위아래 30) */
  .hero-media-group {
    order: -1; /* 영상을 콘텐츠 위로 */
    position: static;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 25px;
    row-gap: 30px;
    width: 70%;
  }
  .hero-media {
    position: static;
    display: block;
    max-width: 200px;
    max-height: 200px;
    aspect-ratio: 1 /1;
    width: 100%;
    height: auto;
  }

  .media-payroll {
    grid-column: 1;
    grid-row: 1 / 3;
    top: auto;
    left: auto;
    right: auto;
  }
  .media-contract {
    grid-column: 2;
    grid-row: 1;
    top: auto;
    left: auto;
    right: auto;
  }
  .media-attendance {
    grid-column: 2;
    grid-row: 2;
    top: auto;
    left: auto;
    right: auto;
  }
  .hero-inner {
    margin-top: 0;
  }

  /* feat5 모바일 규칙은 아래 별도 @media (max-width: 1024px) 블록으로 이동 (1-col 덱) */
}

/* feat5 ≤1024: 1-col(그리드+문구 위, 덱 아래). 카드는 base 그대로 절대 겹침(덱) 유지.
   JS 가 feat5-inner 를 화면 20vh 에 고정하고 카드를 순차로 쌓음(pin+fly-in). */
@media (max-width: 1024px) {
  .feat5-inner {
    grid-template-columns: 1fr;
    gap: 60px;
    justify-items: center;
  }
  .feat5-left {
    position: static;
    top: auto;
    align-items: center;
  }
  .reg-grid {
    justify-content: center;
  }

  .feat5-right {
    width: 100%;
  }
  .feat5-stack {
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 480px;
    height: 320px;
    margin: 0 auto;
  }

  .reviews-slider {
    width: 100%;
  }

  .lp-footer-bottom {
    flex-direction: column;
    align-items: start;
  }
}

/* feat5 짧은 폰(세로 여유 부족): 문구↔덱 간격을 줄여 핀 상태에서 하단 카드가 화면 밖으로 잘리지 않게 한다. */
@media (max-width: 1024px) and (max-height: 760px) {
  .feat5-inner {
    gap: 32px;
  }
}
@media (max-width: 1024px) and (max-height: 660px) {
  .feat5-inner {
    gap: 20px;
  }
}

/* ── 히어로 모바일 레이아웃 (≤768): 콘텐츠 하단 정렬 + 플로팅 영상을 작게 상단에 배치 (목업 기준) ── */
/* ── 섹션2 모바일 레이아웃 (≤768, 목업 기준: 정렬·패딩·마진·gap) — 레이아웃 변경은 오직 여기(≤768) ── */
/* ── 랜딩 모바일 헤더 (≤768): 로고 + [무료로 시작하기]만 노출 (목업). 로그인·햄버거 숨김 ── */
@media (max-width: 768px) {
  .pc-in,
  .pc {
    display: none;
  }

  .mo {
    display: flex;
  }

  .pain,
  .cta,
  .faq,
  .tm,
  .why {
    padding: 70px 20px;
  }

  .pain-solution,
  .faq-list,
  .tm-chart,
  .pain-empathy,
  .faq-left,
  .tm-copy {
    width: 100%;
  }

  .hero {
    padding: 100px 20px 80px;
  }
  /* 히어로 영상 배치·크기·콘텐츠 오프셋은 위 ≤900 블록에서 통합 처리 (겹침 방지) */
  .hero .hero-wrap {
    padding: 50px 16px 80px;
  }

  .hero-media {
    /* width: 220px;
    height: 200px; */
  }

  .pain-inner {
    flex-direction: column;
    align-items: center;
    gap: 80px; /* empathy ↔ solution */
  }
  /* empathy: 좌측 정렬 (목업) */
  .pain-empathy {
    align-items: center;
    position: static;
    top: auto;
    gap: 40px;
    width: 100%;
  }
  /* 걱정 클러스터: 모바일에서 비율 축소 (목업 340/490 ≈ 0.69). 여기서만 조정 */
  .worry-stage {
    --cs: 0.69;
    max-width: 460px;
  }
  .pain-lead {
    align-items: flex-start;
    text-align: left;
  }
  .pain-sub {
    text-align: left;
  }
  /* solution: 세로 중앙, 카드 2열 스태거 유지(축소) */
  .pain-solution {
    padding: 0;
    width: 100%;
    align-items: center;
    gap: 50px;
  }
  .solution-stack {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .solution-col-right {
    gap: 24px;
    padding-top: 0;
    order: 0; /* 왼쪽=계약서·급여, 오른쪽=제목·출퇴근 (목업) */
  }
  .solution-title {
    text-align: left;
  }
  .feat-card {
    width: 100%; /* 2열이 좁은 화면에도 들어가게 */
    /* max-width:none 이면 feat-attend 가 오른쪽 '제목 너비' 컬럼(≈293)을 채워 유독 커짐(정사각).
       왼쪽 카드(≈237)와 맞게 캡핑해 feat-attend 만 커지는 것 방지. */
    max-width: 240px;
    height: auto;
    padding: 18px 16px;
    gap: 10px;
    border-radius: 10px;
  }
  .feat-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .feat-icon svg {
    width: 18px;
    height: 18px;
  }

  .hdr-landing #hdrNav {
    display: flex !important; /* 데스크톱 nav(hidden) 를 모바일에서도 노출해 CTA 보이게 */
  }
  .hdr-landing #hdrNav .hdr-nav-link {
    display: none !important; /* 로그인 숨김 */
  }
  .hdr-landing #hdrHamburger {
    display: none !important; /* 햄버거 숨김 */
  }

  .cta-bg {
    width: 125%;
  }

  .why-grid {
    gap: 20px;
  }

  .why-card-title {
    font-size: 18px;
  }
  .why-card-desc br {
    display: none;
  }
  .why-card-desc {
    word-break: keep-all;
    font-size: 14px;
  }
  .feat-title {
    font-size: 17px;
  }
  .feat-desc {
    font-size: 12px;
  }

  .solution-title {
    font-size: 30px;
  }

  .worry-bubble {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    letter-spacing: -0.35px;

    width: 200px;
    height: 85px;
  }

  .worry-center img {
    width: 80px;
    height: 80px;
  }

  .lp-subtitle {
    font-size: 16px;
    letter-spacing: -0.4px;
  }

  .lp-display {
    font-size: 52px;
  }

  .feat5-stack {
    aspect-ratio: 12 / 7;
    width: 90%;
    height: auto;
    border-radius: 15px;
    max-width: 400px;
  }

  .feat5-card-title {
    font-size: 25px;
  }

  .feat5-card-desc {
    font-size: 14px;
  }

  .feat5-card {
    border-radius: 15px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04),
      0 10px 30px rgba(79, 70, 229, 0.12);
  }

  .feat5-note {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    letter-spacing: -0.3px;
  }
}

@media (max-width: 640px) {
  .lp-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .people-stack {
    gap: 16px 0;
    padding: 16px 0 32px;
  }
  .people-card {
    margin-left: 0;
    margin-top: 0;
  }
  .people-card:nth-child(even) {
    /* margin-top: 22px; */
  } /* 모바일은 가벼운 스태거만 */
}

/* ── 히어로 글자 크기 (≤480): 부제목 18→16 · 노트 14→12
   (타이틀 .lp-display 72→48 은 토큰 정의 뒤에 와야 이기므로 파일 끝에 별도로 둠) ── */
/* ── 섹션2 모바일 글자 크기 (≤480, 목업 기준). 제목·부제목은 공통토큰 ≤480 override(파일 끝)에서 처리 ── */
/* 반응형 토큰 override — 토큰 정의 뒤에 와야 이김. 공통 토큰의 ≤480 모바일 크기를 한 곳에서 관리.
   .lp-title-lg 는 pain·why·tm·reviews·faq 제목 공용 → ≤480 에서 40px(목업)로 함께 축소. */

@media (max-width: 480px) {
  .hero-desc {
    font-size: 16px;
  }
  .hero-note {
    font-size: 12px;
  }
  /* 영상 블록 간격: ≤480 은 양옆 17 · 위아래 21 */
  .hero-wrap {
    gap: 70px; /* ≤480 영상 블록 ↔ 콘텐츠 간격 */
  }
  .hero-media-group {
    column-gap: 17px;
    row-gap: 21px;
  }

  .worry-bubble {
    max-width: 175px;
    width: 45%;

    border-radius: 11.102px;
    box-shadow: 0 2.776px 11.102px 0 rgba(0, 0, 0, 0.1);
    padding: 13px 12.5px;
    max-height: 68px;
    height: auto;
  }

  .worry-ring {
    width: 50%;
    aspect-ratio: 1/1;

    max-width: 124.898px;
    max-height: 124.898px;
  }
  .worry-blob {
    max-width: 202.612px;
    max-height: 197.061px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .worry-cluster {
    aspect-ratio: 480 / 195;
  }

  /* ── pain-solution (≤480): 목업대로 단일 세로 컬럼(제목→카드3→문구), 카드 계단식 stagger ── */
  .pain-solution {
    gap: 30px; /* 목업 외곽 간격 (768 의 50px 덮음) */
  }
  .solution-stack {
    flex-direction: column; /* 768 의 2열(row) → 1열 */
    align-items: flex-start;
    gap: 16px; /* 카드 간 세로 간격(목업) */
    width: 100%;
  }
  /* 2열 래퍼 평탄화 → 제목·카드 3개가 한 컬럼에서 order 로 재배치됨 */
  .solution-col-left,
  .solution-col-right {
    display: contents;
  }
  .solution-title {
    order: -1; /* 제목 맨 위 */
    margin-bottom: 14px; /* 카드까지 30px(=16+14) 목업 간격 */
    font-size: 28px; /* 목업 (line-height 1.3 은 base 와 동일 → 생략) */
  }
  /* 제목 첫 줄바꿈은 480 이하에서만 제거 → "왜 지금, 오퍼센트로 / 바꿔야 할까요?" (2줄) */
  .solution-title .br-pc480 {
    display: none;
  }
  .feat-contract {
    order: 1;
  }
  .feat-attend {
    order: 2;
    align-self: flex-end; /* 오른쪽 끝 정렬 — flex 정렬로 계단식(카드1·3=왼쪽 끝, 카드2=오른쪽 끝) */
  }
  .feat-payroll {
    order: 3;
  }
  /* 카드: 고정 280×225 → max-* + 반응형 % */
  .feat-card {
    width: 80%;
    max-width: 280px;
    /* 목업 225px 높이 → min-height. max-height 로 두면 좁은 폭(예:340px)에서 줄바꿈이 늘어 내용이 넘쳐 잘림.
       min 으로: 짧은 카드는 225 유지, 긴 카드는 내용만큼 늘어남(잘림 없음). */
    min-height: 225px;
    height: auto;
    aspect-ratio: auto; /* 데스크톱 1/1 정사각 해제 (목업 280×225) */
    padding: 30px 20px;
    gap: 15px;
    border-radius: 15px;
  }
  .feat-icon {
    width: 37.5px;
    height: 37.5px;
    border-radius: 9px; /* svg 18×18 은 768 값과 동일 → 생략 */
  }
  .feat-title {
    font-size: 18px; /* 목업 (line-height 1.4 은 base 와 동일 → 생략) */
  }
  .feat-desc {
    font-size: 14px; /* 목업 (line-height 1.6 은 base 와 동일 → 생략) */
  }
  .solution-foot {
    font-size: 16px; /* 목업 */
  }

  .lp-display {
    font-size: 48px;
    letter-spacing: -1.2px;
  }
  .lp-title-lg {
    font-size: 40px;
    letter-spacing: -1px;
  }

  .reviews-slider {
    display: block;
  }
  .reviews-head {
    padding: 0 16px;
  }

  .cta-bg {
    width: 150%;
  }

  /* why-grid (≤480): 목업 = 4카드 지그재그(왼-오-왼-오) 단일 컬럼 */
  .why-grid {
    display: flex; /* ≤1024 에서 grid(2열)로 바뀐 것을 flex 로 되돌림 */
    flex-direction: column;
    align-items: flex-start;
    gap: 0; /* 겹침(overlap)을 margin 으로 제어 → gap 제거 */
  }
  .why-card:nth-child(even) {
    align-self: flex-end; /* 짝수(2·4) 오른쪽 끝 → 지그재그(홀수는 왼쪽 끝). flex 정렬. */
  }
  .why-card:not(:first-child) {
    /* 계단식 겹침(캐스케이드) = 카드 높이의 15%. 카드가 min-height:200px(≤480은 폭도 max 200) 이라 ≈30px. */
    margin-top: -30px;
  }

  .feat5-card {
    gap: 14px;
    padding: 22.5px 18px;
  }

  .feat5-card-title {
    font-size: 18px;
  }
  .feat5-card-desc {
    font-size: 11px;
  }

  .feat5-card,
  .feat5-stack {
    border-radius: 11.25px;
  }

  .hero-media {
    width: 140px;
    height: 130px;
  }

  .hero .hero-wrap {
    padding: 20px 16px 80px;
  }

  .feat5-card-icon svg {
    width: 27px;
    height: 27px;
  }

  .why-card {
    flex: 0 0 auto; /* 컬럼에서 늘어남 방지 */
    width: 62%; /* 목업 200/343 ≈ 58% (지그재그 여백 확보) */
    aspect-ratio: 1 / 1;
    max-width: 250px;
    max-height: 250px;
    min-height: auto;
    height: auto;
    padding: 20px; /* 목업 */
    gap: 8px; /* 목업 */
    border-radius: 20px; /* 목업 */
    /* 목업 카드 그림자 — 4장 공통(.why-card 에 한 번). 겹치는 카드 깊이감. (1층 alpha 0 은 무효지만 목업값 그대로) */
    box-shadow: 0 0 40px 0 rgba(76, 71, 154, 0),
      0 20px 20px 0 rgba(76, 71, 154, 0.01),
      0 60px 15px 0 rgba(76, 71, 154, 0.05), 0 0 16px 0 rgba(76, 71, 154, 0.05),
      0 10px 16px 0 rgba(76, 71, 154, 0.05);
  }

  .why-icon {
    padding: 16px; /* 목업 */
    flex-shrink: 0; /* 아이콘 원형 유지(내용 넘쳐도 안 찌그러짐) */
  }

  .why-icon svg {
    width: 24px;
    height: 24px;
  }

  .why-card-title {
    font-size: 20px; /* 시안 */
    line-height: normal; /* 시안 (base 1.3 → normal). 카드 세로 크기가 시안과 달랐던 원인. */
    letter-spacing: -0.5px; /* 시안 */
  }

  .pain,
  .cta,
  .faq,
  .tm,
  .why {
    padding: 60px 16px;
  }

  .reviews {
    padding: 60px 0 0;
  }

  .reviews-slider .swiper-slide {
    padding: 50px 0 60px;
  }

  .tm-barrow {
    height: 20px;
    margin-bottom: 6px;
  }

  .tm-task-label {
    font-size: 14px;
    letter-spacing: -0.35px;

    margin-bottom: 6px;
  }

  .tm-before-label {
    font-size: 9.213px;
    font-style: normal;
    line-height: normal;
  }
  .tm-oper-label {
    margin-left: 7px;
    font-size: 11.339px;
  }

  .tm-note {
    font-size: 12px;
    line-height: 130%; /* 15.6px */
    letter-spacing: -0.3px;
  }

  .lp-subtitle-lg {
    font-size: 20px;
    line-height: 150%; /* 30px */
    letter-spacing: -0.5px;
  }

  .faq-item {
    padding: 20px;
    gap: 5px;

    border-radius: 10px;
  }

  .faq-q {
    font-size: 15px;
    letter-spacing: -0.375px;
  }

  .faq-a {
    font-size: 15px;
    line-height: 160%; /* 24px */
    letter-spacing: -0.375px;
  }

  .faq-list {
    width: 100%;
    max-width: auto;
    gap: 12px;
  }

  .lp-footer-top {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: start;
    gap: 12px;
  }

  .lp-footer {
    padding: 40px 16px;
  }

  .reviews-slider .swiper-slide {
    width: 95%;
    max-width: 310px;
  }

  .reviews-slider .swiper-slide .review-card {
    border-radius: 15px;

    aspect-ratio: 311 / 170;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 20px;
    gap: 18px;
  }

  .review-avatar {
    padding: 7.5px;
    width: 33px;
    height: 33px;
    font-size: 12px;
  }

  .review-who {
    gap: 1.5px;
  }

  .review-stars svg {
    width: 15px;
    height: 15px;
  }

  .review-quote {
    font-size: 14px;
    line-height: 155%; /* 21.7px */
    letter-spacing: -0.35px;
  }

  .review-role {
    font-size: 12px;
    letter-spacing: -0.3px;
  }

  .review-loc {
    font-size: 11px;
    font-style: normal;
    line-height: normal;
  }
}

@media (max-width: 450px) {
  .worry-cluster {
    aspect-ratio: 480 / 230;
  }
}
@media (max-width: 420px) {
  .worry-bubble {
    max-width: 200px;
    width: 41%;
    /* font-size: 11px;
    line-height: 150%; 
    letter-spacing: -0.278px; */
  }

  .worry-cluster {
    aspect-ratio: 480 / 250;
  }
}

@media (max-width: 380px) {
  .why-card {
    width: 65%;
  }
  .worry-bubble {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pain-alert {
    animation: none;
  }

  .worry-bubble {
    transition: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .feat-card {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .why-card {
    transition: none;
  }
  .why-card:hover {
    transform: none;
  }

  .tm-reveal {
    clip-path: none;
    transition: none;
  }

  .review-card {
    transition: none;
  }

  .cta-blur {
    transition: none;
  }
}