/* 회사 소개(Our Firm) 페이지 고유 규칙.
   컨테이너·격자·섹션 여백·타이포·색은 전부 style.css 토큰을 그대로 쓴다. 여기서 새로 정의하지 않는다.
   재사용 컴포넌트(.certsec/.cta/.ftr/.hdr)는 style.css 그대로. By the Numbers는 .about--cards로 이 페이지에서만 덮어쓴다.

   정렬 규칙(1차 피드백 2026-09-28) — 가운데 정렬(.certsec/.cta/By the Numbers 헤드)과 히어로를 뺀 2단 섹션은 전부 같은 선을 쓴다.
     1280↑ 12칸: 좌 1/6 · 우 7/13 (6번 칸은 비움)   768–1279 8칸: 좌 1/5 · 우 5/9   <768: 한 줄로 쌓음
   글자 열은 항상 L1 또는 L7(8칸 L5)에서 시작한다. fr·고정 gap(96px) 금지 — 격자선에서 벗어난다. */

/* 줄바꿈 — 한 단어만 다음 줄로 넘어가는 제목·문단 방지 (검증 P8) */
.h2,
.fhero__title,
.fhero__sub {
  text-wrap: balance;
}
.quote__text p,
.facc__inner p,
.vcard__text,
.vline__text,
.value__sub,
.joinus__text {
  text-wrap: pretty;
}
/* 검정 섹션 버튼: 호버 채움을 흰색으로(기본은 --ink라 검정 바탕에서 호버가 안 보였다) */
.whatweare .btn,
.value .btn {
  --btn-ink: var(--white);
  --btn-paper: var(--ink);
}

/* ── ① Hero — 좌하단 정렬 + 왼쪽 세로 괘선 (참고: McKinsey QuantumBlack) ─────── */
.fhero {
  position: relative;
  height: 80vh;
  min-height: 520px;
  max-height: 900px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.fhero__media {
  position: absolute;
  inset: 0;
}
.fhero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 6, 14, 0.62) 0%, rgba(4, 6, 14, 0.18) 38%, rgba(4, 6, 14, 0) 70%),
    linear-gradient(
      180deg,
      rgba(4, 6, 14, 0.42) 0%,
      rgba(4, 6, 14, 0) 34%,
      rgba(4, 6, 14, 0.1) 58%,
      rgba(4, 6, 14, 0.78) 100%
    );
} /* 영상 컬러는 살리고 좌·하단만 눌러 타이포를 세운다 */
.fhero__inner {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  padding-bottom: 44px;
}
.fhero__copy {
  position: relative;
  padding-left: 20px;
}
/* 세로 괘선(9-28 모션): 처음에 위에서 아래로 그어지고(::after), 그 뒤로 빛줄기가 선을 따라 위에서 아래로 흐른다(::before, 반복).
   빛은 배경 그림을 위 → 아래로 옮겨 그려 선 길이 안에서만 보인다. 움직임 줄이기 설정이면 선만 그대로 */
.fhero__copy::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: top;
  animation: fhero-line 1.2s var(--expo) 0.15s both;
}
.fhero__copy::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.9) 62%,
      #fff 86%,
      rgba(255, 255, 255, 0)
    )
    no-repeat 0 -66.7% / 1px 40%;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
  animation: fhero-flow 3.8s cubic-bezier(0.55, 0, 0.35, 1) 1.3s infinite;
}
@keyframes fhero-line {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes fhero-flow {
  0% {
    background-position: 0 -66.7%;
  }
  60%,
  100% {
    background-position: 0 166.7%;
  }
} /* 2.3초 흐르고 1.5초 쉼 */
@media (prefers-reduced-motion: reduce) {
  .fhero__copy::after {
    animation: none;
  }
  .fhero__copy::before {
    animation: none;
    opacity: 0;
  }
}
.fhero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 8.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
.fhero__sub {
  margin-top: 16px;
  font: 400 15px/1.5 var(--sans);
  color: rgba(255, 255, 255, 0.82);
  max-width: 34ch;
}
@media (min-width: 768px) {
  .fhero__inner {
    padding-bottom: 56px;
  }
  .fhero__copy {
    padding-left: 28px;
  }
  .fhero__title {
    font-size: 52px;
  } /* 10-02 사용자: 히어로 제목 조금 작게(58 → 52 · 1280↑ 78 → 68) */
  .fhero__sub {
    margin-top: 20px;
    font-size: 16px;
    max-width: 44ch;
  }
}
@media (min-width: 1280px) {
  .fhero__inner {
    padding-bottom: 72px;
  }
  .fhero__title {
    font-size: 64px;
    line-height: 1.12;
  } /* 10-02 사용자: 64px로 */
  .fhero__sub {
    font-size: 18px;
    max-width: 58ch;
  } /* 히어로 서브 — 문의 페이지 히어로와 같은 18px(짝수 · 같은 위계) */
}

/* ── ② Purpose — 사진은 좌측 영역의 우측 끝에 붙이고, 인용문은 Our Firm 본문과 같은 선(L7/L5)에서 시작 ── */
.quote {
  background: var(--white);
}
.quote__inner {
  row-gap: 32px;
  align-items: start;
}
.quote__photo {
  grid-column: 1 / 4;
  max-width: 280px;
  margin: 0;
  background: var(--img-bg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
} /* <768: 600–767에서 화면을 채우지 않게 상한 */
.quote__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote__body {
  grid-column: 1 / -1;
}
.quote__lead {
  margin-bottom: 28px;
  text-wrap: balance;
} /* 9-29: 이전 히어로 문장 'M&A로 대한민국의 문제를 풉니다.'를 Purpose 머리로 */
.quote__text {
  margin: 0;
}
.quote__text p {
  font: 400 16px/1.72 var(--sans);
  letter-spacing: -0.015em;
} /* 1차 피드백: 대표이사 말은 Pretendard · 10-01 사용자: 선언문 본문 크기 줄임(18 → 16) */
.quote__text p + p {
  margin-top: 18px;
}
.quote__name {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 600 16px/1.4 var(--sans);
}
.quote__role {
  margin-top: 4px;
  font: 400 15px/1.4 var(--sans);
  color: var(--muted);
}
@media (min-width: 768px) {
  .quote__photo {
    grid-column: 2 / 5;
    justify-self: end;
    width: 100%;
    max-width: 286px;
  } /* 오른쪽 끝 = L5(아래 Our Firm 이미지 오른쪽 끝과 같은 선). 768 249 → 1024 286 → 1280 286으로 끊김 없이 */
  .quote__body {
    grid-column: 5 / 9;
  }
  .quote__text p {
    font-size: 17px;
    line-height: 1.72;
  }
}
@media (min-width: 1280px) {
  .quote__lead {
    margin-bottom: 36px;
  }
  .quote__photo {
    grid-column: 3 / 6;
  } /* 3칸, 오른쪽 끝 = L6 */
  .quote__body {
    grid-column: 7 / 13;
  }
  .quote__text p {
    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.68;
  } /* 10-01 줄임: 1280 19 → 1440 20 → 1600 22(이전 23 → 26 → 28) */ /* 1280 23 → 1440 26 → 1600 28. 브레이크포인트를 늘리지 않고 Our Firm 제목(28 세리프)과 위계를 맞춘다 */
  .quote__text p + p {
    margin-top: 22px;
  }
}

/* ── ③ Our Firm — 좌 이미지 크로스페이드 / 우 아코디언 (참고: Brookfield #section-f67692)
   Brookfield가 부드러운 이유: ① 닫힘·열림이 **동시에 같은 곡선**(500ms easeInOutQuad — 천천히 출발·천천히 도착)
   ② 글자는 높이보다 늦게(750ms) 따라 나타남 ③ 이미지는 새 것이 위에서 페이드인, 옛 것은 150ms 버텼다 빠짐
   ④ 전환 중엔 입력 잠금. 호버 색·밑줄·아이콘 같은 장식은 없다 — 마우스 환경에서는 **올리면 열린다**(폭 무관).
   --expo(앞에 몰린 곡선)를 높이에 쓰면 "탁" 열린다. 높이에는 쓰지 않는다. */
.whatweare {
  --facc-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --facc-fade: cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--ink);
  color: var(--white);
}
.whatweare__inner {
  row-gap: 32px;
  align-items: start;
}
.whatweare__media {
  position: relative;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  background: var(--ink);
  overflow: hidden;
} /* 전 폭 1:1 — AX 영상도 1:1로 다시 뽑았다(ax-flow-sq). <768 상한 440(767에서 719²가 화면을 채우던 문제) */
.whatweare__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.75s var(--facc-fade) 0.15s;
} /* 나가는 쪽: 150ms 버틴 뒤 페이드 */
.whatweare__img.is-on {
  opacity: 1;
  z-index: 1;
  transition-delay: 0s;
}
/* 이미지 톤 맞춤(9-28) — 나머지 둘(팀 사진·AX 트리)은 원본 가장자리가 어두움 */
.whatweare__img[data-facc-img='0'] {
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), #000 20%, #000 74%, rgba(0, 0, 0, 0.32)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), #000 18%, #000 82%, rgba(0, 0, 0, 0.6));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), #000 20%, #000 74%, rgba(0, 0, 0, 0.32)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), #000 18%, #000 82%, rgba(0, 0, 0, 0.6));
  mask-composite: intersect;
} /* 기업형 M&A 자문사(로비) — 사진 밝기는 그대로, 가장자리(천장 조명·밝은 바닥·양옆)만 검정 배경으로 살짝 스며들게(9-28 2차: 전체 밝기 낮춤 뺌) */
.whatweare__img[data-facc-img='1'] {
  top: 50%;
  bottom: auto;
  height: auto;
  aspect-ratio: 5 / 3;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 3.5%,
    rgba(0, 0, 0, 0.92) 7%,
    #000 10%,
    #000 90%,
    rgba(0, 0, 0, 0.92) 93%,
    rgba(0, 0, 0, 0.6) 96.5%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 3.5%,
    rgba(0, 0, 0, 0.92) 7%,
    #000 10%,
    #000 90%,
    rgba(0, 0, 0, 0.92) 93%,
    rgba(0, 0, 0, 0.6) 96.5%,
    rgba(0, 0, 0, 0) 100%
  );
} /* 자문 역량(팀 8명) — 5:3 원본을 폭에 맞춰 전원이 보이게, 위아래 검은 여백과는 끝 10%만 부드럽게(빠르게 차오르는 곡선) 이어지게 — 18% 선형은 윗줄 얼굴까지 어두워져 줄임(9-28 2차) */
/* M&A AX — 서비스 소개 히어로의 두 링(css/rings.css)을 정사각 사진 상자에(9-29 사용자). 크기는 상자 폭 기준(컨테이너 단위)이라 어느 화면에서도 같은 비율.
   보이는 동안만 돈다(다른 항목이 열려 있으면 모든 움직임 멈춤). 이전 AX 트리는 hidden 보관 */
.whatweare__rings {
  container-type: inline-size;
  overflow: hidden;
  background: #050505;
}
.whatweare__rings .appr__stage {
  --rad: 24cqw;
  --sep: 0.58;
  --mx: 50%;
  --ay: 50%;
}
.whatweare__rings .appr__name {
  font-size: 3.4cqw;
}
.whatweare__rings .appr__plus {
  width: 7.4cqw;
  height: 7.4cqw;
}
.whatweare__rings .appr__plus span::before {
  width: 2.7cqw;
}
.whatweare__rings .appr__plus span::after {
  height: 2.7cqw;
}
.whatweare__rings .appr__impact {
  top: calc(var(--ly) + 9cqw);
  font-size: 3.5cqw;
}
.whatweare__rings:not(.is-on) .appr__stage,
.whatweare__rings:not(.is-on) .appr__stage *,
.whatweare__rings:not(.is-on) .appr__ring::before,
.whatweare__rings:not(.is-on) .appr__ring::after,
.whatweare__rings:not(.is-on) .appr__beam::after {
  animation-play-state: paused;
}
/* M&A AX 트리 — 정지 판(연결선 없는 시안) + 연결선 그라데이션만 그리는 캔버스(our-firm.js AxTree) */
.whatweare__ax img,
.whatweare__ax canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.whatweare__ax img {
  object-fit: cover;
} /* 들어오는 쪽: 즉시, 항상 위 */
/* 아코디언 — 클래스 앞에 f를 붙여 공용 main.js의 옛 [data-acc] 컨트롤러와 분리한다 */
.facc {
  margin-top: 16px;
}
.facc__item {
  position: relative;
} /* 구분선은 .eline(항목 위 1px) — 아래 '라인 모션' */
.facc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  text-align: left;
}
.facc__head {
  -webkit-tap-highlight-color: transparent;
  color: var(--white);
  transition: color 0.35s ease;
}
.facc__item:not(.is-open) .facc__head {
  color: rgb(255 255 255 / var(--inactive));
} /* 닫힌 항목은 비활성 공통 톤(--inactive, style.css) — 열린 항목이 돋보이게 */
.facc__item:not(.is-open) .facc__head:focus-visible {
  color: var(--white);
} /* 키보드로 고른 항목은 밝게 */
.facc__head:focus-visible {
  outline: none;
}
.facc__head:focus-visible .facc__title {
  outline: 1px solid var(--white);
  outline-offset: 6px;
} /* 링은 제목 글자에만 — 구분선·본문과 겹치지 않게 */
.facc__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: inherit;
} /* 색은 .facc__head(열림 흰색 · 닫힘 회색). 9-29: 키워드가 이 섹션의 제목 역할 — 본문·수치와 크기 차이가 나게 키움(22/24/28 → 30/32–36/38–46), 수치는 한 단계 작게(22/24/26) */
.facc__sign {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}
.facc__sign::before,
.facc__sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1px;
  background: currentColor;
  transition: transform 0.6s var(--facc-inout);
}
.facc__sign::after {
  transform: rotate(90deg);
}
.facc__item.is-open .facc__sign::after {
  transform: rotate(0deg);
}
/* 0fr → 1fr 축소는 **행이 하나일 때만** 먹는다. 문단이 여럿이면 암시적 행이 더 생겨 안 접힌다 → 한 겹 감쌌다 */
.facc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--facc-inout);
} /* 패널이 Brookfield(60px)보다 길어(≈170px) 500 → 600ms */
.facc__item.is-open .facc__panel {
  grid-template-rows: 1fr;
}
.facc__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.75s var(--facc-fade),
    visibility 0s linear 0.6s;
} /* 닫힌 본문은 접힌 뒤 스크린리더·탭 순서에서 뺀다 */
.facc__item.is-open .facc__inner {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.facc__inner p {
  max-width: 42em;
  font: 400 15px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.66);
}
.facc__inner .facc__lead {
  padding-bottom: 12px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
}
.facc__inner p:last-child {
  padding-bottom: 22px;
}
.facc__inner .facc__fig {
  margin-top: 12px;
  font: 400 14px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.5);
} /* .facc__inner p(15px · 0.66)에 덮여 있던 것을 의도대로 */
.facc__fig span {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.1;
  color: var(--white);
}
.whatweare .btn {
  margin-top: 36px;
}
@media (min-width: 768px) {
  .whatweare__media {
    grid-column: 5 / 9;
    max-width: none;
  } /* 9-29: 글 왼쪽 · 사진 오른쪽으로 바꿈(사용자 지시). 1/4로 줄이면 태블릿에서 글자 열이 이미지보다 50–322px 길어져 되돌림(1279↔1280 크기 역전은 창 크기를 바꿀 때만 보여 감수) */
  .whatweare__copy {
    grid-column: 1 / 5;
    grid-row: 1;
  } /* 사진이 문서상 앞이라 자동 배치면 글이 둘째 줄로 밀린다 → 같은 줄에 고정 */
  .whatweare__media {
    grid-row: 1;
  }
  .facc__title {
    font-size: clamp(32px, 3.5vw, 36px);
  }
  .facc__fig span {
    font-size: 24px;
  }
}
@media (min-width: 1280px) {
  .whatweare__media {
    grid-column: 8 / 13;
  } /* 좌우 바꿈(9-29) — 글 1/7 · 한 칸 비움 · 사진 8/13(1:1, 1440 높이 559). 섹션마다 오른쪽 에셋 정렬이 달라도 됨(메인과 같은 변주, 9-29 사용자) */
  .whatweare__copy {
    grid-column: 1 / 7;
  }
  .facc {
    margin-top: 20px;
  }
  .facc__head {
    padding: clamp(18px, 1.53vw, 22px) 0;
  } /* 1280 19.6 → 1440 22 */
  .facc__title {
    font-size: clamp(38px, 3vw, 46px);
    line-height: 1.15;
  } /* 1280 38 → 1440 43 → 1536↑ 46 */
  .facc__inner p {
    font-size: 16px;
  }
  .facc__inner .facc__lead {
    font-size: 19px;
  }
  .facc__fig span {
    font-size: 26px;
  }
  .whatweare .btn {
    margin-top: clamp(32px, 3.3vw, 48px);
  }
}
/* 호버로 여는 환경(마우스 — 폭과 무관)에서는 +/− 부호를 뺀다. Brookfield와 같이 장식 없이 열림 자체가 피드백.
   Brookfield는 1280↑에서만 호버지만, 사용자 결정(2026-09-28)으로 마우스면 어느 폭이든 호버로 연다. 터치는 탭. */
@media (hover: hover) and (pointer: fine) {
  .facc__sign {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .facc__panel,
  .facc__inner,
  .whatweare__img,
  .facc__sign::before,
  .facc__sign::after,
  .facc__head {
    transition: none;
  }
}

/* ── ④ By the Numbers — Hg `PortfolioProjects` 방식 (참고: hgcapital.com/approach/driving-ai-transformation)
   어두운 바탕 + 한 단계 밝은 면 카드(라벨 위, 큰 수치 바닥) + 가운데 헤드.
   (9-28) 섹션 뒤에 배경 영상(메인 Hero 4번째 흐름장 — numbers-bg-flow, 인트로 없는 9초 완벽 루프)을 깔고 카드는 유리로: 역동성 + 글래스모피즘 강화(사용자 요청). 카드는 25% 아래에서 순차로 올라온다(1s, expo).
   Hg 인상의 핵심이 "바탕과 카드 면의 명도 차"라 검정 바탕으로 둔다(흰 바탕+#f3f3f3은 명도 차가 Hg의 1/3이라 빈 자리 표시처럼 읽혔다).
   흑백 교차: Our Firm(B) → 여기(B, 위 1px 선으로 구분) → 인증(W)이 검정 사이 흰 띠가 되어 '정부 인증'이 도드라진다.
   (9-28) 카드는 **한 줄**, 섹션 전폭 띠로 펼쳐 왼쪽으로 한 칸씩 자동 이동(스프링 — 탄성). 보이는 장수 1280↑ 3.5 / 768 2.5 / <768 1.25.
   기본(스크립트 없음·모션 줄이기)은 가로 스크롤 띠 — fail-open. JS가 .is-slider를 붙이면 자동 슬라이드.
   홈 .about/.stats는 그대로 두고 .about--cards로만 덮어쓴다. 카운트업(main.js)은 .stats 구조 그대로라 동작.
   카드 등장은 our-firm.js가 카드 단위로(화면 밖 카드만 .is-wait → 들어올 때 해제) — 2행이 화면 밖에서 끝나 버리던 문제. */
.about--cards {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
/* 배경 영상 — 위는 앞 섹션(Our Firm, 검정)에서 이어지게 검정으로 녹이고, 전체는 눌러서 글자·카드가 앞에 서게 */
.about__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.about__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      var(--ink) 0%,
      rgba(10, 10, 10, 0.4) 14%,
      rgba(10, 10, 10, 0.1) 42%,
      rgba(10, 10, 10, 0.08) 62%,
      rgba(10, 10, 10, 0.78) 100%
    ),
    /* 아래는 기준일 글자가 선과 겹치지 않게 더 누름 */
    radial-gradient(ellipse 60% 42% at 50% 20%, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0) 72%);
} /* 흐름장은 원래 검정 바탕이라 덮개는 가볍게 — 제목 뒤만 한 번 더 눌러 가독성 */
.about--cards .wrap {
  position: relative;
  z-index: 1;
}
.about--cards + .certsec {
  border-top: 0;
}
.about--cards .grid {
  row-gap: 0;
}
.about--cards .about__copy {
  grid-column: 1 / -1;
}
.about--cards .about__note {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.62);
}
.about--cards {
  --per: 1.25;
  --wrapw: min(100vw - var(--gutter) * 2, 1608px);
  --bleed: max(var(--gutter), (100vw - 1608px) / 2);
  --card: calc((var(--wrapw) - var(--gap) * (var(--perint, 1))) / var(--per));
}
/* 지표 띠 — 섹션 전폭. 첫 카드는 wrap 왼쪽 끝(L1)에서 시작하고 오른쪽은 화면 끝까지 넘친다 */
.stats__viewport {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  padding: 0 var(--bleed) 56px;
  margin-bottom: -56px; /* 아래 56: 카드가 25% 아래에서 올라올 때 잘리지 않게 */
  overflow: auto hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--bleed);
}
.stats__viewport::-webkit-scrollbar {
  display: none;
}
.stats__viewport.is-slider {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.stats__viewport.is-slider.is-drag {
  cursor: grabbing;
}
.about--cards .stats {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0;
  row-gap: 0;
  will-change: transform;
}
.about--cards .stat {
  flex: 0 0 var(--card);
  min-height: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  /* 유리 카드 — Optiver about-us `.glass-effect` + 헤더 림을 각진 흑백으로 옮김(9-28 실측).
     유리 느낌은 블러가 아니라 ① 판 자체의 사선 명암(좌상단 더 어둡게 → 우하단 살짝 밝게) ② 가운데 사선이 비는 1px 그라데이션 테두리
     ③ 좌상단 강·우하단 약의 L자 림에서 나온다. 블러는 영상 디테일만 정리하는 8px(saturate 없음 — 영상 색을 키우지 않는다). */
  --glass-fill: rgba(10, 10, 10, 0.3);
  --glass-start: rgba(0, 0, 0, 0.35);
  --glass-end: rgba(255, 255, 255, 0.075);
  --glass-border: rgba(255, 255, 255, 0.175);
  position: relative;
  z-index: 0;
  isolation: isolate;
  border: 0;
  box-shadow: none;
  background-color: var(--glass-fill);
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 40%),
    /* 두께 음영(어두운 쪽) */ linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 40%),
    linear-gradient(to top, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 40%),
    /* 두께 음영(밝은 쪽) */ linear-gradient(to left, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 40%),
    linear-gradient(165deg, var(--glass-start) 0%, rgba(255, 255, 255, 0) 50%, var(--glass-end) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 1s var(--expo) var(--up, 0s),
    opacity 0.6s ease var(--up, 0s);
}
/* 1px 그라데이션 테두리 — 우상단→좌하단 사선 구간이 빈다(Optiver ::before) */
.about--cards .stat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg, var(--glass-border) 40%, rgba(255, 255, 255, 0) 50%, var(--glass-border) 85%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}
/* 스펙큘러 림 — 좌상단 L 0.45, 우하단 L 0.27, 각 변 82%에서 사라짐(Optiver 헤더 SVG 림을 각진 L자로) */
.about--cards .stat::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: none;
  height: auto;
  background-color: transparent;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 82%) top left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 82%) top left / 1px 100% no-repeat,
    linear-gradient(270deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0) 82%) bottom right / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0) 82%) bottom right / 1px 100% no-repeat;
}
/* 블러 미지원 브라우저 — 판을 진하게 / 화면 밖 카드(복제 포함)는 블러를 꺼 가볍게(JS가 .is-off) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .about--cards .stat {
    --glass-fill: rgba(10, 10, 10, 0.5);
  }
}
.about--cards .stat.is-off {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 기본은 보이는 상태(fail-open). JS가 화면이 실제로 그려지는 것을 확인한 뒤, 아직 화면 밖인 카드에만 .is-wait를 붙여 숨겼다가 들어올 때 올린다.
   스크립트·감지가 어떤 이유로 안 돌아도 수치는 보인다(9-28: 인앱 브라우저에서 카드가 숨은 채 남았던 사고). */
.about--cards .stat.is-wait {
  opacity: 0;
  transform: translateY(25%);
}
.about--cards .stat.no-tr {
  transition: none;
}
.about--cards .stat dt {
  font: 500 16px/1.4 var(--sans);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}
.about--cards .stat dd {
  margin-top: 0;
  font-size: min(64px, calc(var(--card) * 0.165));
  line-height: 1.05;
} /* 카드 폭에 비례 — 가장 긴 "4.18조 원"이 안쪽에 들어가게 */
.about--cards .stat dd > span {
  white-space: nowrap;
}
.about--cards .stat dt > span,
.about--cards .stat dd > span {
  transform: none;
  filter: none;
  opacity: 1;
  transition: opacity 0.6s linear calc(var(--up, 0s) + 0.1s);
}
.about--cards .stat.is-wait dt > span,
.about--cards .stat.is-wait dd > span {
  opacity: 0;
}
.about--cards .stat dt {
  text-wrap: balance;
}
.about--cards .stats__foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.about--cards .stats__progress {
  position: relative;
  flex: 0 0 120px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.about--cards .stats__progress i {
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
} /* 슬라이더 위치를 그대로 따라감(JS) */
.about--cards .stats__asof {
  margin: 0;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
  .about--cards {
    --per: 2.5;
    --perint: 2;
  }
  .about--cards .about__copy {
    text-align: center;
  }
  .about--cards .about__note {
    margin-inline: auto;
    max-width: 60ch;
  }
  .stats__viewport {
    margin-top: 48px;
  }
  .about--cards .stat {
    min-height: 240px;
    padding: 24px;
  }
  .about--cards .stats__progress {
    flex-basis: 160px;
  }
  .about--cards .stats__foot {
    margin-top: 24px;
  }
}
@media (min-width: 1280px) {
  .about--cards {
    --per: 3.5;
    --perint: 3;
  }
  .stats__viewport {
    margin-top: 64px;
  }
  .about--cards .stat {
    min-height: 300px;
    padding: 28px;
  }
  .about--cards .stat dt {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about--cards .stat,
  .about--cards .stat.is-wait {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .about--cards .stat dt > span,
  .about--cards .stat dd > span,
  .about--cards .stat.is-wait dt > span,
  .about--cards .stat.is-wait dd > span {
    opacity: 1;
    transition: none;
  }
}

/* ── ⑤ Our Value — 헤드(1280↑ 좌 제목 1/7 · 우 서브 7/13) + 글 카드 3장 가로 (참고: Cohere "Why leading teams trust Cohere") ── */
.value {
  background: var(--ink);
  color: var(--white);
}
.value__sub {
  margin-top: 20px;
  font: 400 15px/1.75 var(--sans);
  color: rgba(255, 255, 255, 0.64);
}
.vgrid {
  margin-top: 40px;
}
/* 카드 = 글만(9-28 사진 제거 — 바로 아래 팀 섹션의 실제 인물 사진과 연출 사진이 겹쳐서) + 면 + 오른쪽 아래 사선 홈(화살표 자리).
   면은 ::before에만 clip-path — 카드 내용·화살표는 잘리지 않는다 */
.vcard {
  --notch-w: 56px;
  --notch-h: 56px;
  --notch-d: 20px;
  --pad: 16px;
  --pad-top: 28px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: var(--pad-top) var(--pad) 0;
}
.vcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #1a1a1a;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--notch-h)),
    calc(100% - var(--notch-w)) calc(100% - var(--notch-h)),
    calc(100% - var(--notch-w) - var(--notch-d)) 100%,
    0 100%
  );
  transition: background-color 0.4s;
}
.vcard__label {
  font: 500 12px/16px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.vcard__title {
  margin-top: 10px;
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.vcard__text {
  margin: 12px 0 28px;
  font: 400 15px/1.75 var(--sans);
  color: rgba(255, 255, 255, 0.64);
}
/* 링크 줄은 카드 바닥(행 안에서 같은 높이) — 오른쪽 끝까지 뻗어 화살표가 홈 한가운데 앉는다. ::after로 카드 전체를 누를 수 있게 */
.vcard__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--notch-h);
  margin: auto calc(var(--pad) * -1) 0 0;
  font: 500 15px/20px var(--sans);
}
.vcard__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.vcard__link:focus-visible {
  outline: none;
}
.vcard:has(.vcard__link:focus-visible) {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}
.vcard__arrow {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: calc(var(--notch-w) - 6px);
  height: calc(var(--notch-h) - 6px);
  transition: color 0.3s 0.1s;
} /* 홈 안쪽 6px 띄움 */
.vcard__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--expo);
} /* 호버 채움 — .btn과 같은 문법 */
.vcard__arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 0.45s var(--expo);
}
@media (hover: hover) {
  .vcard:hover::before {
    background: #212121;
  }
  .vcard:hover .vcard__arrow {
    color: var(--ink);
  }
  .vcard:hover .vcard__arrow::before {
    transform: scaleX(1);
  }
}
/* <768: 가로로 넘기는 트랙(홈 팀 레일 .rail__track과 같은 문법) — 다음 카드가 비쳐 넘길 수 있음을 알린다 */
@media (max-width: 767px) {
  .vgrid {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .vgrid::-webkit-scrollbar {
    display: none;
  }
  .vcard {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
}
@media (min-width: 768px) {
  .value__sub {
    max-width: 40ch;
  }
  .vgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: 48px;
  }
}
@media (min-width: 1280px) {
  .value__head {
    grid-column: 1 / 7;
  }
  .value__sub {
    grid-column: 7 / 13;
    align-self: end;
    margin-top: 0;
  }
  .vgrid {
    margin-top: 64px;
  }
  .vcard {
    --notch-w: 64px;
    --notch-h: 60px;
    --notch-d: 24px;
    --pad: 20px;
    --pad-top: 36px;
  }
  .vcard__title {
    font-size: 26px;
  }
  .vcard__text {
    font-size: 16px;
  }
}

/* ── ⑤-C Our Value 비교안 — Hebbia About 'Our Values' 형식: 가는 선 사이에 번호·제목(1280↑ 1/7) / 설명(7/13)이 한 줄씩. 타이포와 선만 ──
   마우스 환경에선 줄 전체가 흐리다가 올린 줄만 흰색(Hebbia와 같은 0.3초). 터치·좁은 화면은 처음부터 모두 밝게 */
.vlines {
  margin-top: 40px;
  padding: 0;
  list-style: none;
} /* ol 기본 들여쓰기·번호 제거 — 번호는 (01) 표기로 */
.vline {
  position: relative;
  padding-block: 28px;
} /* 구분선은 .eline(줄 위 1px) — 아래 '라인 모션' */
.vline:last-child {
  padding-bottom: 0;
}
.vline__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
}
.vline__index {
  flex: 0 0 auto;
  padding-top: 0.45em;
  font: 400 14px/1 var(--sans);
  color: rgba(255, 255, 255, 0.56);
} /* 번호는 제목 윗선에 맞춤 */
.vline__label {
  font: 400 26px/1.25 var(--serif);
  letter-spacing: -0.01em;
}
.vline__text {
  margin-top: 12px;
  font: 400 15px/1.75 var(--sans);
  color: rgba(255, 255, 255, 0.64);
}
@media (min-width: 768px) {
  .vlines {
    margin-top: 48px;
  }
  .vline {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
    padding-block: 40px;
  }
  .vline__head {
    grid-column: 1 / 5;
    gap: 20px;
  }
  .vline__index {
    font-size: 16px;
  }
  .vline__label {
    font-size: 32px;
    line-height: 1.2;
  }
  .vline__text {
    grid-column: 5 / 9;
    margin-top: 0;
    font-size: 16px;
    line-height: 1.7;
  }
}
@media (min-width: 1280px) {
  .vlines {
    margin-top: 64px;
  }
  .vline {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block: 48px;
  }
  .vline__head {
    grid-column: 1 / 7;
    gap: 24px;
  }
  .vline__index {
    font-size: 18px;
  }
  .vline__label {
    font-size: clamp(36px, 2.9vw, 44px);
  }
  .vline__text {
    grid-column: 7 / 13;
    max-width: 34em;
    font-size: 18px;
    line-height: 1.65;
  }
}
@media (hover: hover) and (min-width: 768px) {
  .vline {
    color: rgb(255 255 255 / var(--inactive));
    transition: color 0.3s ease-in-out;
  } /* 비활성 공통 톤(0.42 → 0.5로 통일) */
  .vline:hover {
    color: var(--white);
  }
  .vline__index,
  .vline__text {
    color: inherit;
  }
}

/* ── ⑤-B Our Value 비교안 — Hg PorfolioValue 형식: 좌 카피(sticky, 사진 없음) + 우 1px 세로선 뒤 칸 3개(칸 사이 1px) ──
   768↑는 섹션 위아래 여백을 칸 안으로 옮겨 세로선이 섹션 끝에서 끝까지 이어지게 한다(Hg와 같은 구조) */
.value--list .value__sub {
  max-width: 40ch;
}
.vlist {
  margin-top: 40px;
}
.vrow {
  padding: 32px 0;
  border-top: 1px solid var(--line-dark);
}
.vrow:last-child {
  padding-bottom: 0;
}
.vrow__title {
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.vrow__text {
  max-width: 36em;
  margin-top: 12px;
  font: 400 15px/1.75 var(--sans);
  color: rgba(255, 255, 255, 0.64);
}
.vrow .btn {
  margin-top: 24px;
}
@media (min-width: 768px) {
  .value--list {
    padding-block: 0;
  }
  .value--list .value__aside {
    grid-column: 1 / 5;
    align-self: start;
    position: sticky;
    top: var(--hdr-h);
    padding-block: var(--sec-y);
  }
  .vlist {
    grid-column: 5 / 9;
    margin-top: 0;
    border-left: 1px solid var(--line-dark);
  }
  .vrow {
    padding: 48px 0 48px 32px;
  }
  .vrow:first-child {
    border-top: 0;
    padding-top: var(--sec-y);
  } /* 첫 칸 제목 = 왼쪽 eyebrow와 같은 높이 */
  .vrow:last-child {
    padding-bottom: var(--sec-y);
  }
  .vrow__title {
    font-size: 26px;
  }
}
@media (min-width: 1280px) {
  .value--list .value__aside {
    grid-column: 1 / 6;
  }
  .value--list .value__sub {
    margin-top: 20px;
  } /* A안의 1280↑ 서브(margin 0, 오른쪽 배치) 규칙을 되돌림 */
  .vlist {
    grid-column: 7 / 13;
  }
  .vrow {
    padding-left: 48px;
  }
  .vrow__title {
    font-size: clamp(26px, 2vw, 30px);
  }
  .vrow__text {
    font-size: 16px;
  }
}
/* 블라인드 — A·B 중 숨긴 안은 섹션에 hidden (마크업·스타일 보관) */
.value[hidden] {
  display: none;
}

/* ── 라인 모션 — Our Firm 아코디언 · Our Value 목록의 구분선(항목·줄 위 1px). 글래스 톤: 유리 모서리에 빛이 맺히듯 ──
   .eline         기본 선 — 왼쪽이 조금 밝은 그라데이션(글래스 카드 테두리와 같은 결)
   .eline::before 활성 선 — 열린 항목(아코디언)·마우스를 올린 줄(Our Value)에서 왼쪽부터 그어짐. 꺼질 땐 걷히는 움직임 없이 제자리에서 0.2초 만에 흐려짐(9-28 사용자)
   .eline::after  빛 머리 — 1px 코어 + 번짐. 선이 그어지는 끝을 따라 달리다 사라짐(AX 트리 빛줄기와 같은 문법)
   등장 — 목록이 처음 화면에 들어올 때 선이 위에서부터 차례로 그어지고 빛 머리가 그 끝에 붙어 달림(JS: is-armed → is-drawing → is-drawn).
   화면 밖일 때만 JS가 숨기므로(is-armed) JS가 없거나 늦어도 선은 그대로 보인다 */
.eline {
  --eline-c: 255 255 255;
  --eline-dur: 0.6s;
  --eline-ease: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 9px;
  overflow: hidden;
  pointer-events: none;
  transform-origin: left;
  background: linear-gradient(
      90deg,
      rgb(var(--eline-c) / 0.36),
      rgb(var(--eline-c) / 0.2) 55%,
      rgb(var(--eline-c) / 0.12)
    )
    0 50% / 100% 1px no-repeat;
}
.eline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
  background: rgb(var(--eline-c) / 0.92);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity 0.2s ease-out,
    transform 0s linear 0.2s;
} /* 꺼짐: 흐려진 뒤에야 길이를 0으로 — 다음에 다시 그어지게 */
.eline::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(-100%);
  background:
    linear-gradient(90deg, rgb(var(--eline-c) / 0) calc(100% - 140px), rgb(var(--eline-c) / 0.95)) 0 50% / 100% 1px
      no-repeat,
    radial-gradient(closest-side, rgb(var(--eline-c) / 0.55), rgb(var(--eline-c) / 0)) 100% 50% / 72px 9px no-repeat;
}
/* 밝은 섹션(.on-light — 서비스 소개): 선·빛 머리를 검정으로. 흰 바탕에선 번짐이 얼룩처럼 보여 머리는 코어만 */
.on-light .eline {
  --eline-c: 10 10 10;
}
.on-light .eline::after {
  background: linear-gradient(90deg, rgb(var(--eline-c) / 0) calc(100% - 140px), rgb(var(--eline-c) / 0.95)) 0 50% /
    100% 1px no-repeat;
}
@keyframes eline-head {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  12%,
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}
@keyframes eline-scan {
  0%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 활성: 아코디언은 열린 항목(터치도 같음), Our Value는 마우스를 올린 줄 */
.facc__item.is-open > .eline::before {
  opacity: 1;
  transform: scaleX(1);
  transition:
    transform var(--eline-dur) var(--eline-ease),
    opacity 0s;
}
.facc__item.is-open > .eline::after {
  animation: eline-head var(--eline-dur) var(--eline-ease) both;
}
@media (hover: hover) and (min-width: 768px) {
  .vline > .eline {
    --eline-dur: 0.7s;
    --eline-ease: cubic-bezier(0.65, 0, 0.35, 1);
  }
  .vline:hover > .eline::before {
    opacity: 1;
    transform: scaleX(1);
    transition:
      transform var(--eline-dur) var(--eline-ease),
      opacity 0s;
  }
  .vline:hover > .eline::after {
    animation: eline-head var(--eline-dur) var(--eline-ease) both;
  }
  /* 범용 — 줄에 마우스를 올리면 그 줄 위 선이 켜짐(서비스 소개 비교·단계 줄) */
  .eline-hover > .eline {
    --eline-dur: 0.7s;
    --eline-ease: cubic-bezier(0.65, 0, 0.35, 1);
  }
  .eline-hover:hover > .eline::before {
    opacity: 1;
    transform: scaleX(1);
    transition:
      transform var(--eline-dur) var(--eline-ease),
      opacity 0s;
  }
  .eline-hover:hover > .eline::after {
    animation: eline-head var(--eline-dur) var(--eline-ease) both;
  }
}
/* 자동 넘김(9-28) — 열린 항목의 위 선이 진행 막대가 된다: JS가 --p(0→1)를 매 프레임 넣고, 빛 머리는 채워지는 끝을 따라감.
   멈춤(.is-paused: 마우스·키보드가 머무를 때)이면 원래 규칙(0.6초에 꽉 참 + 빛 머리 한 번)으로 돌아간다 */
.facc.is-auto:not(.is-paused) .facc__item.is-open > .eline::before {
  transform: scaleX(var(--p, 0));
  transition: opacity 0s;
}
.facc.is-auto:not(.is-paused) .facc__item.is-open > .eline::after {
  animation: none;
  opacity: min(1, calc(var(--p, 0) * 14), calc((1 - var(--p, 0)) * 14));
  transform: translateX(calc((var(--p, 0) - 1) * 100%));
}
/* 등장(활성 규칙보다 뒤 — 등장 중엔 이쪽이 이김. 끝나면 열린 항목의 빛 머리가 한 번 더 지나감) */
[data-elines].is-armed .eline {
  transform: scaleX(0);
}
[data-elines].is-drawing .eline {
  transform: scaleX(1);
  transition: transform 1.1s var(--expo) calc(var(--i, 0) * 0.12s);
}
[data-elines].is-drawing .eline::after {
  transform: none;
  animation: eline-scan 1.1s linear calc(var(--i, 0) * 0.12s) both;
} /* 머리는 제자리(오른끝) — 선이 늘어나는 끝에 그대로 붙어 감 */
@media (prefers-reduced-motion: reduce) {
  .eline,
  .eline::before {
    transition: none !important;
  }
  .eline::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── ⑤-2 Our People — 전문인력 가로 슬라이더. 인원 수와 무관(한 명 빼거나 넣어도 빈칸 없음) · 화살표 · 진행선 · 마우스 끌기 · 스냅 ──
   한 화면에 1280↑ 5.5장 · 768↑ 3.5장 · <768 2.2장(다음 카드가 비쳐 넘길 수 있음을 알림). 트랙은 화면 끝까지, 첫 카드는 본문 선에.
   머리는 Our Value와 같은 선(1280↑ 제목 1/7 · 설명 7/13). 사진 3:4는 홈 카드와 같은 비율·초점 */
.team {
  --bleed: max(var(--gutter), calc((100vw - 1608px) / 2));
  --per: 2.2;
  --tgap: 12px;
  background: var(--white);
}
.team + .joinus,
.people + .joinus {
  border-top: 1px solid var(--line);
} /* 흰 섹션끼리 — 채용과 1px로 구분(메인에서 가져온 팀 섹션 포함). 10-02 남는 '}' 제거(다음 규칙이 무시되던 것) */
.team .sec-head__side {
  font: 400 15px/1.75 var(--sans);
  max-width: 40ch;
}
.team__track {
  display: flex;
  gap: var(--tgap);
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.team__track::-webkit-scrollbar {
  display: none;
}
.team__track.is-drag {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.member {
  flex: 0 0 calc((100% - var(--tgap) * (var(--per) - 1)) / var(--per));
  scroll-snap-align: start;
} /* 100% = 트랙 안쪽 폭(= 본문 폭) */
.member__link {
  display: block;
}
.member__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.member__img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--img-bg);
}
.member__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 1s var(--expo);
  -webkit-user-drag: none;
}
.member__name {
  margin-top: 12px;
  font: 600 15px/1.4 var(--sans);
}
.member__role {
  margin-left: 2px;
  font-weight: 400;
  color: var(--muted);
}
.member__job {
  margin-top: 2px;
  font: 500 13px/1.4 var(--sans);
}
.member__career {
  margin-top: 6px;
  font: 400 12px/1.5 var(--sans);
  color: var(--muted);
}
.team__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.team__progress {
  position: relative;
  flex: 0 1 160px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.team__progress i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--ink);
} /* 보이는 구간 — 폭·위치는 JS */
.team__nav {
  display: flex;
  gap: 8px;
}
.team__btn {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition:
    color 0.3s 0.1s,
    opacity 0.3s;
}
.team__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--expo);
} /* 호버 채움 — .btn과 같은 문법 */
.team__btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.team__btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.team__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .member__link:hover .member__img img {
    transform: scale(1.04);
  }
  .member__link:hover .member__name {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  .team__btn:not(:disabled):hover {
    color: var(--white);
  }
  .team__btn:not(:disabled):hover::before {
    transform: scaleX(1);
  }
}
@media (min-width: 768px) {
  .team {
    --per: 3.5;
    --tgap: var(--gap);
  }
  .member__name {
    font-size: 16px;
  }
  .member__job {
    font-size: 14px;
  }
  .member__career {
    font-size: 13px;
  }
  .team__foot {
    margin-top: 32px;
  }
  .team__progress {
    flex-basis: 240px;
  }
}
@media (min-width: 1280px) {
  .team {
    --per: 5.5;
  }
  .team .sec-head__main {
    grid-column: 1 / 7;
  }
  .team .sec-head__side {
    grid-column: 7 / 13;
  }
}

/* ── ⑥ Careers ──────────────────────────────────────────────────────────── */
.joinus {
  background: var(--white);
}
.joinus__inner {
  row-gap: 32px;
  align-items: center;
}
.joinus__copy {
  grid-column: 1 / -1;
}
.joinus__text {
  margin-top: 20px;
  font: 400 15px/1.75 var(--sans);
  color: var(--muted);
}
@media (min-width: 768px) {
  .joinus__text {
    font-size: 16px;
  }
}
@media (min-width: 1280px) {
  .joinus__text {
    font-size: 18px;
    line-height: 1.7;
  }
} /* 10-02 같은 위계(섹션 서브 문구) — 메인 섹션 서브와 같은 18px */
.joinus .btn {
  margin-top: 32px;
}
.joinus__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 2px;
}
.joinus__media {
  grid-column: 1 / -1;
  background: var(--img-bg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.joinus__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .joinus__copy {
    grid-column: 1 / 5;
  }
  .joinus__media {
    grid-column: 5 / 9;
  }
}
@media (min-width: 1280px) {
  .joinus__copy {
    grid-column: 1 / 6;
  }
  .joinus__media {
    grid-column: 7 / 13;
  }
}