@charset "UTF-8";
:root {
  --baseUnit: 0.75rem;
  --gutter: 2.25rem;
  --xs: 375px;
  --sm: 480px;
  --md: 992px;
  --lg: 1180px;
  --xl: 1920px;
}

h1 {
  font-size: 3.052rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
}

h2 {
  font-size: 2.441rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
}

h3 {
  font-size: 1.953rem;
  font-weight: 700;
  letter-spacing: -0.015rem;
}

h4 {
  font-size: 1.563rem;
  font-weight: 500;
  letter-spacing: -0.01rem;
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01rem;
}

p {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

.body-text {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

b {
  font-weight: 700;
}

strong {
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 디자인 토대
 *
 * 레퍼런스: cloudflare.com
 *
 * 핵심 규율: 흰 캔버스 위에 브랜드색을 "통짜 솔리드"로만 쓴다.
 * 브랜드색을 옅게 푼 틴트는 만들지 않는다. 색은 쓰거나 안 쓰거나 둘 뿐이며,
 * 그래서 액센트 블록이 나오면 "여기가 중요하다"가 즉시 읽힌다.
 *
 * 페이지 전체가 아래 4색으로만 그려진다.
 * ──────────────────────────────────────────────────────────── */
/* 형태 토큰 — 매직 넘버가 인라인으로 흩어지지 않도록 여기서 한 번만 정의한다 */
/* 액센트 블록의 기하학 — Cloudflare 실측값(viewport 1440 기준)
 *   히어로 1424×760 (가로세로비 1.87:1), CTA 1424×528 (2.70:1), 라운드 16px, 좌우 여백 8px.
 * 높이를 콘텐츠에 맡기면 이 비율이 무너지므로 직접 고정한다.
 * 좁은 화면에서는 비율을 버리고 패딩 기반 자동 높이로 흐르게 둔다. */
/* 콘텐츠 컨테이너 폭. 블록(1424px)보다 224px 좁아, 액센트 색면이 좌우로 112px씩 남는다. */
/* ── 타이포 토큰 (한글 기준) ──
 *
 * Cloudflare는 웨이트 500 하나로 h1~h3를 전부 처리하지만, 그건 라틴 기준이다.
 * 한글은 자소가 네모 안에 3~4개씩 조립돼 획 밀도가 라틴의 두 배 가까이 되고,
 * 그래서 같은 500이라도 "주식보상"은 "Cloudflare"보다 가늘고 흐리게 읽힌다.
 * 웨이트를 한 단계씩 올려 라틴과 같은 시각적 무게를 만든다.
 *
 * 웨이트를 올리면 행간과 자간도 함께 움직여야 한다.
 *   - 행간: 굵은 글자는 시각적 밀도가 높아 줄끼리 답답해지므로 넓힌다.
 *   - 자간: 글자가 이미 꽉 차 보이므로 더 조여도 버틴다. 조여야 덩어리로 읽힌다.
 * 폰트가 Pretendard Variable(45~920)이라 정수 웨이트에 묶이지 않는다.
 * ────────────────────────────── */
/* 웨이트 — 라틴 500의 시각적 무게를 한글에서 재현한 값 */
/* 자간 — 굵을수록 조인다 */
/* 행간 — 굵을수록, 그리고 한글일수록 넓힌다 */
/* ── 디스플레이 활자의 광학 행잉 (사용자 지정값, 2026-07-14) ──
 *
 * 잉크의 최좌측 픽셀은 이미 다른 요소들과 같은 선에 있다(히어로에서 실측: 아이브로우·H1·본문·
 * 버튼 전부 x=2). 그런데도 큰 제목만 안으로 들어가 보인다 — 큰 활자의 흔한 착시다. 눈은
 * '가장 왼쪽 점'이 아니라 **획의 무게 중심**으로 가장자리를 판단하는데, 큰 한글은 첫 자소의 획이
 * 안쪽에 몰려 있어 같은 잉크선에서도 더 들여쓴 것처럼 읽힌다. 그래서 디스플레이 활자는 조금
 * '매달아(hang)' 빼는 것이 조판의 관례다.
 *
 * ⚠️ px 가 아니라 % 인 것이 요점이다. 제목은 clamp 로 폭에 따라 커지므로 보정값도 함께 커져야
 *    한다 — px 로 박으면 좁은 화면에서 과보정이 된다. % 는 컨테이닝 블록 폭 기준이라 함께 자란다.
 *
 * ⚠️ **가운데 정렬 제목에는 걸지 마라.** 이 값은 '좌측 정렬선에 맞추는' 보정인데, 가운데 정렬
 *    블록에 margin-left 를 주면 정렬선을 맞추는 게 아니라 가운데 정렬 자체가 왼쪽으로 밀린다.
 *    맞출 왼쪽 선이 없는 곳에는 보정할 것도 없다(.e2-h2 는 .e2-section-head 안에서 가운데 정렬이다). */
/* ── 큰 섹션 제목 (64px @1440) ──
 * 대부분의 섹션 제목(.e2-h2)은 clamp(1.875rem, 3.2vw, 3rem) = 46px 다.
 * 여기서 한 단계 커지는 건 **사진 무대 위의 제목 하나뿐**이다(증권사 연동, .e2-brok__heading):
 * 어두워진 사진을 배경으로 세운 주인공이라 46px 로는 무대에 눌린다.
 * ⚠️ 커버리지 제목을 여기에 맞추려다 되돌렸다(사용자가 problem 제목과 맞추라고 정정) —
 *    커버리지는 흰 면 위의 보통 섹션 제목이므로 .e2-h2 와 같은 46px 다. 다시 올리지 마라. */
/* ── 모션 ──
 * 등장 인터랙션. npaystartup.com 과 같은 계열로, 라이브러리 없이
 * IntersectionObserver + CSS transition 으로만 만든다.
 * 시작 상태(아래로 살짝 내려가 있고, 흐리고, 투명)에서 제자리로 풀린다. */
/* ease-out-expo 계열 — 빠르게 나와 부드럽게 안착 */
/* ── sticky 사진 무대 = '베일' (Apple Watch 건강 섹션 실측 이식) ──
 * 시퀀스: 사진+텍스트(원본 밝기) → 사진 sticky 핀 고정 → 콘텐츠 구간에서 blur+brightness 강등.
 * 패럴랙스가 아니다: 사진은 1:1 로 스크롤되다 핀 고정될 뿐, transform 이동·확대가 없다.
 * 진행도 계산은 veil.js, 렌더링은 이 토큰들을 읽는 섹션 SCSS.
 *
 * ⚠️ 이 무대는 원래 커버리지 섹션의 것이었다. 2026-07-14 커버리지가 Stripe 그리드로 바뀌면서
 *    '증권사 연동까지 한 흐름으로 처리합니다'(.e2-brok) 섹션으로 통째로 이사했다(사용자 지시).
 *    그래서 이름을 cov → veil 로 바꿨다: 이 기계는 특정 섹션이 아니라 '베일' 그 자체이고,
 *    CSS 커스텀 프로퍼티(--e2-veil-*)는 처음부터 그 이름이었다. 섹션 이름을 단 토큰을
 *    다른 섹션이 쓰는 상태를 남기면 다음 사람이 반드시 헷갈린다. */
/* 스크림·텍스트 다크 글로우의 그늘색 */
/* 사진 무대 위 흰 글자의 스무스 텍스트 섀도.
 * ⚠️ 스무스 섀도는 '한 겹을 진하게'가 아니라 '여러 겹을 옅게' 쌓는 것이다. 단층 그림자는
 * blur 를 아무리 키워도 글자에서 뚝 끊기는 테두리로 읽힌다 — 반경을 대략 배로 늘리며 투명도를
 * 낮춘 램프를 겹쳐야 빛이 서서히 잦아드는 자연스러운 그늘이 된다(그림자 램프는 이 페이지의
 * 카드·판에서 쓰는 것과 같은 원리다. 다만 여기선 box-shadow 가 아니라 text-shadow 다).
 * 사진은 밝은 부분과 어두운 부분이 섞여 있으므로, 이 그늘이 흰 글자의 유일한 대비 보험이다. */
/* ⚠️ 아래 두 값은 veil.js 의 BLUR_MAX / BRIGHT_MIN 과 짝이다 — 함께 바꾼다.
 * Apple 실측 blur(20px) brightness(0.6). 여기서는 CSS 기본값(=JS 부재·reduced-motion 시
 * 고정되는 최종 상태)으로 쓰인다. 기본값이 '어두운 쪽'인 게 핵심이다 — JS 가 죽어도 흰 카드가
 * 읽히는 상태로 남는다(연출보다 가독성이 먼저다). */
/* 사진 레이어를 베일 blur 반경보다 넉넉히 키워 두는 여유 — 가장자리 번짐이
 * 섹션 경계에서 투명하게 새는 것을 막는다. */
/* 텍스트 무대 퇴장 후 콘텐츠 도착 전, 사진이 단독 주인공인 숨 고르기 구간 */
/* ── 히어로 아이브로우 ──
 * 제목 위에 얹는 한 단어. 아이브로우의 일은 '제목보다 먼저 읽히되 제목을 이기지 않는' 것이라,
 * 크기가 곧 기능이다. H1(clamp 34~56px) 대비 충분히 작아야 하고, 그렇다고 캡션처럼 작으면
 * 제목에 딸린 라벨로 가라앉는다. 20px 는 그 사이다.
 * ⚠️ 그라디언트 글자는 길이가 있어야 그라디언트로 읽힌다 — 더 줄이면 세 스톱이 짓눌려
 * 그냥 탁한 보라 한 덩어리가 된다. 크기를 더 내리려면 그라디언트를 포기하고 단색으로 가라. */
/* ── 히어로 후기 카드 덱 ──
 * 레퍼런스: Mobbin FOLLOW.ART(겹쳐 쌓인 카드 + 화살표 전환), Paraform(로고가 주인공인 면).
 * 카드 3장이 absolute 로 완전히 겹치므로 높이를 직접 고정한다 — 안 그러면 부모가
 * 0px 로 붕괴한다(자식이 전부 absolute 라 정상 흐름에 아무것도 안 남는다).
 * 뒷장 두 장의 오프셋·스케일·회전·불투명도는 deck.js 의 전환 대상이라 값이 어긋나면
 * 앞장 교체 애니메이션과 최종 정적 상태가 서로 달라진다 — 반드시 여기서만 정의한다. */
/* 카드 상단 사진 높이 — 홈 고객 인터뷰 스와이퍼(_horizontal-scroll.scss
   .horizontal-scroll-item-image-wrapper `max-height`: 155px)와 같은 비례를 쓴다. */
/* 뒷장 2장 — stripe.com/enterprise 히어로의 카드 부채꼴. 사용자가 그 화면을 직접 지목했다
   (2026-07-14). 핵심은 "한 방향으로 접힌다"는 것이다.

   ⚠️ 한때 뒷장1을 시계, 뒷장2를 반시계로 부호를 섞어 놨었다("책상에 흩뿌린 콜라주"). 그건
   부채꼴이 아니라 그냥 어질러진 더미다. 부채꼴은 카드 한 벌을 손에 쥐고 펼칠 때 생기는
   모양이라, 회전도 이동도 반드시 단조 증가해야 한다 — 뒤로 갈수록 더 돌고, 더 오른쪽으로,
   더 아래로. 부호를 섞으면 그 순간 '펼친 손'이 아니라 '엎지른 카드'가 된다. 되돌리지 마라.

   ⚠️ 부채꼴의 크기는 자유롭게 못 정한다 — 셰이더 평행사변형 폭의 하한을 이 값들이 정한다.
   회전이 특히 비싸다: 카드의 바운딩 박스 폭은 w·cos θ + h·sin θ 라, 세로로 긴 카드(≈500px)를
   9° 돌리면 그것만으로 폭이 78px 늘어난다(이동량보다 회전이 더 넓힌다). 띠를 카드 폭에
   가깝게 좁히려면 이동보다 먼저 회전을 줄여야 한다. 값을 바꾸면 wave.js 의 컷을 반드시
   다시 푼다(wave.js 가 DOM 에서 자동으로 다시 푼다 — 눈대중으로 상수를 고치지 마라).

   불투명도는 1 이다. 카드에서 유리를 걷어내 솔리드 흰색으로 되돌렸기 때문이다(사용자 지시:
   "glass effect는 카드에서 빼도 됨"). 앞장이 불투명해지면서 뒷장 글자가 비쳐 보이던 문제가
   사라졌고, 그래서 뒷장도 더 이상 유령처럼 흐릴 이유가 없다 — Stripe 의 부채꼴도 뒷장들이
   또렷하다. 깊이는 불투명도가 아니라 스케일과 그림자가 만든다. */
/* 뒷장이 오른쪽으로 삐져나오는 만큼(가장 먼 shift-x-2) + 회전이 만드는 여유분을 덱 컬럼
   우측에 예약한다 — 안 그러면 좁은 화면에서 카드가 컬럼/뷰포트 밖으로 넘쳐 가로 스크롤을
   유발한다(.e2-hero__col-deck 의 padding-right 에서 쓴다).
   ⚠️ shift-x-1 이 아니라 shift-x-2 를 기준으로 잡아야 한다 — 가장 멀리 나가는 장이 뒷장2다. */
/* 부채꼴 배율(--e2-fan)의 좁은 화면 값.
   ⚠️ 부채꼴은 넓은 화면에서 좋아 보이라고 키운 값이라, 그대로 375px 에 가져가면 재앙이다:
   우측에 92px 를 비워 두는 순간 카드 본문이 앉을 폭이 사라진다(327px 컬럼에서 235px 로).
   그래서 이동·회전·우측 버퍼를 '하나의 배율'로 묶어 한 번에 줄인다 — 값을 따로 관리하면
   셋 중 하나만 고치는 사고가 반드시 난다(버퍼만 줄이면 카드가 화면 밖으로 넘친다). */
/* ── 후기 카드의 표면 ──
   ⚠️ 여기에 리퀴드 글라스 토큰($e2-glass-tint / -blur / -saturate)이 있었다. 2026-07-14
   사용자가 "glass effect는 카드에서 빼도 됨"이라고 지시하면서 카드를 솔리드 흰색으로
   되돌렸고, 그 순간 세 토큰의 사용처가 0이 되어 삭제했다. 죽은 토큰을 남겨 두면 다음
   사람이 "이 카드는 유리인가 보다" 하고 읽는다.

   유리를 뺀 게 손해만은 아니다. 반투명 앞장 뒤로 뒷장 글자가 유령처럼 비치는 문제가
   같이 사라졌고(blur 24px 로도 안 뭉개졌다), 그래서 뒷장을 흐리게 죽여 둘 이유도 없어졌다 —
   부채꼴의 뒷장들이 또렷해졌다. Stripe 히어로의 카드들도 전부 솔리드 흰색이다.

   솔리드가 된 지금, 카드를 '떠 있는 판'으로 만드는 건 그림자 램프 하나뿐이다
   (_hero-for-enterprise.scss 의 .e2-deck__link — 5겹 램프). 그림자를 단층으로 줄이면
   즉시 스티커가 된다. */
/* TextAnimate(blurInUp, by=character) 모션 값 — MagicUI 프리뷰 기본값을 그대로 옮겼다.
   위 $e2-reveal-* 와 수치가 달라(블러 10px vs 8px, 이동 20px vs 16px) 섞으면 안 되므로
   별도 토큰으로 둔다. 글자당 스태거 30ms. */
/* Framer Motion tween 기본 이징(cubic-bezier(0, 0, 0.58, 1))과 근사치 */
/* AuroraText — 흐르는 그라디언트 텍스트.
   ⚠️ 2026-07-14 사용자 지시 2건:
     ① "이 페이지에서 초록색 리딩이 있으면 안 됨. 메인 주조색과 맞춰야 함."
     ② "오로라 텍스트의 색상도 CTA랑 맞춰야 함."
   초록(에메랄드 #16a34a → 틸 #0d9488)에서 출발하던 색 경로를 통째로 버리고, 이제 색을
   '적어두지' 않는다 — CTA 오로라·히어로 셰이더와 **같은 토큰(--e2-mesh-*)을 직접 읽는다**
   (.e2-auroratext__text 규칙 참고). 하드코딩된 $e2-auroratext-c1~c4 는 삭제했다: 색이 두 군데
   적혀 있으면 어긋나는 건 시간문제이고, 실제로 이 페이지는 그 사고를 이미 한 번 겪었다
   (CTA 오로라가 혼자 주황이던 사건 — progress.md 참고).

   ⚠️ 딱 한 곳에서만 CTA 와 색이 다르고, 그건 의도다: CTA 오로라의 세 번째 색 --e2-mesh-3
   (#fab2ff 연분홍)는 어두운 네이비 위에서 빛나라고 고른 값이라 '글자'로 쓸 수 없다
   (흰 배경 대비 1.6:1 — 글자가 사라진다). 아우라 텍스트가 놓이는 세 섹션(보안·설계·RSU)은
   전부 밝은 바닥이므로, 같은 hue 의 잉크용 짝인 --e2-mesh-ink(#c026d3, 4.7:1)로 갈아 끼운다.
   같은 팔레트라도 배경과 잉크는 서로 다른 절반을 쓴다(--e2-mesh-ink 토큰 주석 참고). */
/* ⚠️ 원본 MagicUI 는 글자에 rotate(±5deg)·scale(±10%)까지 걸지만, 여기서는 전부 걷어냈다.
   그 값은 "Aurora" 같은 짧은 영단어 배지 기준이다. 한글 제목 한 행 전체에 걸면 — 제목은
   페이지에서 가장 큰 활자라 — 1~2도만 기울어도 '흐르는 색'이 아니라 '글자가 떨리는 것'으로
   읽힌다. 진폭을 줄이는 것으로는 해결되지 않았다(사용자가 두 번 지적). 움직이는 것은
   background-position 뿐이며, 그게 AuroraText 의 본질이다. */
.enterprise-2-page {
  /* 히어로 덱의 뒷장은 부채꼴로 회전·이동하므로 컬럼 밖으로 조금 넘친다. 레이아웃 단계에서
     .e2-hero__col-deck 의 padding-right 로 이미 자리를 비워 두지만, 여기는 그 위의 2차 방어선이다.
     (한때 레이아웃 템플릿에 인라인 style 로 박혀 있었다 — 인라인 스타일 금지 규칙 위반이라 옮겼다.
     clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 sticky 커버리지 섹션을 깨지 않는다.) */
  overflow-x: clip;
  /* ── 이 페이지의 전체 팔레트 (라이트 캔버스) ──
   * 페이지가 통째로 이 변수들 위에 그려진다. 다크는 이제 전역 테마가 아니라
   * 히어로/CTA 블록(.e2-bleed)과 히어로 레일 카드에만 남는 '블록'이다(파일 하단 참고). */
  --e2-canvas: #fff;
  --e2-ink: #262626;
  --e2-ink-muted: #6b6b6b;
  --e2-hairline: #f0f0f0;
  /* 하이라이트 — 킥커·태그·기능 링크 같은 작은 강조.
     ⚠️ 2026-07-14 사용자 지시로 ZUZU 그린(#2b7d50)에서 리본의 인디고로 바꿨다:
     "이 페이지에서 초록색 리딩이 있으면 안 됨. 이 페이지의 메인 주조색과 맞춰야 함."
     그 전의 논리는 "네비 로고의 그린과 이어져 페이지가 브랜드에 정박한다"였는데, 히어로
     셰이더·듀오톤 아이콘·CTA 오로라가 전부 인디고→바이올렛→핑크 띠 위에 놓인 지금
     작은 초록 글자들만 그 띠 밖에서 겉돌고 있었다. 주조색은 하나여야 한다.

     값은 --e2-mesh-1 을 그대로 읽는다. 팔레트를 바꾸면(wave.js uC1~uC3 + --e2-mesh-*)
     하이라이트도 함께 움직인다 — 색이 두 군데 하드코딩돼 있으면 어긋나는 건 시간문제다.
     흰 캔버스 대비 9.8:1, 틴트(#f6f7f9) 대비 9.3:1 로 본문 기준(4.5:1)을 넉넉히 넘는다. */
  --e2-highlight: var(--e2-mesh-1);
  /* ── 메시 그라디언트의 색 (히어로 배경 셰이더) ──
     ⚠️ 이 값들은 static/assets/js/enterprise-2/wave.js 의 uC1/uC2/uC3 와 **같은 값**이어야
     한다. 셰이더는 GL 유니폼으로, 필기체 아이브로우는 background-clip 으로 같은 색을 쓴다.
     한쪽만 바꾸면 두 요소의 색이 조용히 어긋난다 — 팔레트를 바꿀 때는 반드시 둘 다. */
  --e2-mesh-1: #1904e5; /* 앵커 */
  --e2-mesh-2: #8a5bf2; /* 경유지 */
  --e2-mesh-3: #fab2ff; /* 하이라이트 — 배경 전용 */
  /* ⚠️ 흰 캔버스 위 '글자'에는 --e2-mesh-3 를 쓸 수 없다. 그 색은 배경 메시에서
     컷 경계를 부드럽게 하려고 일부러 밝게 잡은 값이라, 흰 종이 위에서는 글자가
     그냥 사라진다(실제로 아이브로우의 마지막 e 가 안 보였다).
     같은 팔레트라도 배경과 잉크는 서로 다른 절반을 쓴다 — 잉크용 밝은 끝은
     채도를 유지하되 명도를 내려 흰 배경 대비를 확보한다. */
  --e2-mesh-ink: #c026d3; /* 푸시아 — 흰 배경 대비 4.7:1 */
  /* ── 듀오톤 아이콘 3색 (Stripe /enterprise 아이콘 문법 — duo-icon.html) ──
     Stripe 는 배경도형/전경도형/교집합에 각각 다른 색을 주고, 교집합을 clipPath 로 잘라
     한 번 더 칠해 '반투명 합성'을 불투명 3색으로 흉내낸다. 알파를 안 쓰므로 어떤 바닥
     위에서도 색이 변하지 않는다.
     ⚠️ 새 hue 를 만들지 않는다 — 히어로 리본(메시)의 색 경로를 명도 순서대로 그대로 쓴다.
     밝은 끝이 본체, 중간이 뱃지, 어두운 끝이 교집합이다(교집합이 가장 어두워야 '겹쳐서
     진해졌다'로 읽힌다. 반대로 두면 겹친 자리가 오히려 튀어 보인다). */
  --e2-duo-bg: var(--e2-mesh-3); /* 연분홍 — 흰 배경 대비 1.6:1 (Stripe 의 연하늘 1.4:1 보다 진하다) */
  --e2-duo-fg: var(--e2-mesh-2); /* 바이올렛 — 3.1:1 */
  --e2-duo-x: var(--e2-mesh-1); /* 인디고 — 겹친 자리 */
  /* 카드 안의 구분선. 색인 행을 나누는 얇은 선(soft)과 제목 아래 선(strong). */
  --e2-hairline-soft: rgba(10, 31, 68, 0.07);
  --e2-hairline-strong: rgba(10, 31, 68, 0.14);
  /* 도트 그리드와 카드 그림자의 색 — 그림자는 순검정 대신 네이비를 틴트해
     라이트 캔버스 위에서 잿빛이 아니라 공기 같은 그늘이 되게 한다. */
  --e2-dot: rgba(10, 31, 68, 0.05);
  --e2-card-shadow-1: rgba(10, 31, 68, 0.18);
  --e2-card-shadow-2: rgba(10, 31, 68, 0.15);
  /* ── 액센트: 딥 네이비 색면 ──
   *
   * 글자가 앉는 바닥이다. 대비가 기준이다 — 딥 네이비는 흰 글자 대비 16.4:1,
   * 중간 블루도 8.7:1 로 여유가 크다.
   *
   * ⚠️ 여기에 주황(--e2-accent-warm #F97316 / -soft)과 브라이트 블루(--e2-accent-light)가
   * 있었다. 페이지 전체가 다크 네이비이던 초기 디자인에서 오로라의 '빛'을 담당하던 색들인데,
   * 페이지가 라이트 캔버스 + 메시 그라디언트로 바뀐 뒤로는 CTA 오로라 한 곳에만 남아
   * 페이지를 주황으로 닫고 있었다(히어로는 인디고→바이올렛→핑크로 여는데). 오로라를
   * --e2-mesh-* 로 옮기면서 셋 다 사용처가 0이 되어 삭제했다 — 죽은 토큰을 남겨 두면
   * 다음 사람이 "이 페이지는 주황도 쓰나 보다"라고 읽는다. */
  --e2-accent-dark: #0a1f44; /* 딥 네이비    — 흰 글자 대비 16.4:1 */
  --e2-accent-mid: #1b4a8f; /* 블루        — 흰 글자 대비  8.7:1 */
  /* ⚠️ 베이스는 어두워야 한다. 밝은 색은 전부 오로라가 가져온다.
   *
   * 처음엔 밝은 파랑을 베이스에 깔고 그 위에 주황을 screen 으로 얹으려 했는데,
   * 이길 수 없는 싸움이었다. screen 은 `1-(1-a)(1-b)` 로 밝게만 할 뿐 어둡게 하지 못한다.
   * 밝은 파랑(B=235) 위에 주황을 screen 하면 파랑의 B 채널이 그대로 살아남아
   * 결과가 분홍(250,169,237)이 된다. 반면 딥 네이비(B=68) 위에서는 (249,132,84) —
   * 진짜 주황이다. 주황은 어두운 곳에서만 주황일 수 있다.
   *
   * 그래서 Stripe 처럼 간다: 베이스는 거의 검정에 가까운 네이비로 비워 두고,
   * 파랑도 주황도 둘 다 오로라 블룸으로 띄운다. 각자 어두운 바닥 위에서 순색으로 피고,
   * 겹치는 자리에서만 자연스럽게 전이된다. 진흙이 생기지 않는다. */
  --e2-accent-base-hi: #0d2350;
  --e2-accent-base-lo: #06112a;
  --e2-accent-gradient: linear-gradient(
      135deg,
      var(--e2-accent-base-hi) 0%,
      var(--e2-accent-dark) 52%,
      var(--e2-accent-base-lo) 100%
  );
  /* 흰 배경 위에 얹는 액센트 색 글자·아이콘용.
     그라디언트의 중간 블루를 쓴다(흰 배경 대비 8.7:1). */
  --e2-accent: var(--e2-accent-mid);
  --e2-accent-hover: var(--e2-accent-dark);
  --e2-on-accent: #fff;
  --e2-on-accent-muted: rgba(255, 255, 255, 0.78);
  --e2-on-accent-hairline: rgba(255, 255, 255, 0.28);
  /* 흰 캔버스에 아주 옅은 도트 그리드를 깐다.
     순백 여백은 넓을수록 "덜 만든 화면"처럼 보인다. 점 하나가 20px 격자에 하나씩,
     거의 안 보일 정도(투명도 0.045)로만 있어도 면이 '재질'을 얻는다.
     하이라인 카드와 격자 주기를 맞춰 두 요소가 같은 그리드 위에 놓인 것처럼 읽힌다. */
  position: relative;
  background-color: var(--e2-canvas);
  background-image: radial-gradient(circle, var(--e2-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--e2-ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  /* ────────────────────────────────
   * 레이아웃
   * ──────────────────────────────── */
  /* Cloudflare 실측: max-width 1200px / padding-inline 32px.
     액센트 블록(1424px) 안에서 좌우로 112px씩 색면이 숨 쉬는 여백이 남는다.
     이 여백이 없으면 글자가 블록을 뚫고 나갈 듯 답답해 보인다. */
  /* ⚠️ 전역 reset 이 `section { `padding`: 6rem 4.5rem; }` 를 걸고 있다(_reset.scss).
     그대로 두면 좌우 72px 이 먹혀 풀블리드 블록이 1424 → 1280 으로 잘린다.
     전역 reset 은 다른 모든 페이지가 쓰므로 건드리지 않고, 이 페이지 안에서만 무력화한다. */
  /* 섹션 도입부. Cloudflare는 모든 섹션을 "중앙 정렬 큰 제목 + 한 줄 부제"로 연다.
   * 이 반복이 페이지에 리듬을 만든다. */
  /* ────────────────────────────────
       * 타이포그래피
       * ──────────────────────────────── */
  /* ⚠️ 여기만 800 이다(사용자 지시 2026-07-14). 토큰 $e2-weight-display(700)를 바꾸지 않고
     이 클래스에서만 올린 이유: 그 토큰은 .e2-h2(섹션 제목)도 함께 읽는다. 토큰을 올리면
     모든 섹션 제목이 같이 굵어져 히어로/CTA 와의 위계가 사라진다.
     디스플레이(히어로·CTA) 800 > 섹션 제목 700 — 굵기가 층위를 말한다. */
  /* 섹션 부제 — 제목 아래 한 줄. 항상 뮤트. */
  /* ────────────────────────────────
   * 카드 — 흰 하이라인이 기본. 액센트는 예외적으로만.
   * ──────────────────────────────── */
  /* 카드. 기본은 흰 면에 하이라인 하나.
   *
   * 호버에서 살짝 떠오른다. Stripe 가 쓰는 방식으로, 그림자를 두 겹 쌓는 게 핵심이다:
   * 짧고 진한 그림자는 카드를 면에서 '떼어내고', 길고 옅은 그림자는 그 아래 공간의
   * 깊이를 만든다. 한 겹짜리 그림자는 아무리 조정해도 스티커처럼 납작해 보인다. */
  /* 움직임을 원치 않는 사용자에게는 뜨는 동작 없이 그림자만 준다 */
  /* 액센트 카드. 한 섹션에 하나만 등장시킨다 — 둘 이상이면 위계가 무너진다.
     히어로·CTA 와 같은 그라디언트를 써서, 이 카드가 그 블록들과 한 몸임을 알린다. */
  /* ────────────────────────────────
   * 칩 — 히어로 상단 공지 pill, 섹션 인덱스 등
   * ──────────────────────────────── */
  /* 공지 pill. Cloudflare 히어로 최상단의 "Connect 2026 · … · Register" 그 자리다.
     링크로도 쓰이므로 hover 상태를 갖는다. */
  /* 구분점 — 문구 조각들을 나눈다 */
  /* 마지막 조각은 행동(다운로드)이라 밑줄로 클릭 가능함을 알린다 */
  /* ────────────────────────────────
   * 오로라 메시 — 액센트 블록 배경의 흐르는 빛
   *
   * Stripe 는 다크 네이비 위에 렌더링된 그라디언트 메시 이미지를 깐다.
   * 여기서는 큰 radial-gradient 를 여러 겹 쌓고 blur 로 뭉개, 이미지 없이 같은 인상을
   * 만든다. 외부 요청 0회, 용량 0KB.
   *
   * 주황은 오직 이 층에서만 등장한다. 색면이 아니라 빛이라서, 뒤의 파랑을 뚫고
   * 번지되 글자를 얹지 않는다. 파랑 위 흰 글자의 대비(8.7~16.4:1)는 그대로 유지된다.
   * ──────────────────────────────── */
  /* ⚠️ z-index 를 주면 안 된다. 값을 주는 순간 쌓임 맥락(stacking context)이 생기고,
     안쪽 레이어의 mix-blend-mode 가 뒤의 그라디언트가 아니라 이 투명한 상자와
     블렌딩된다 — 빛으로 더해질 대상이 사라진다.
     `z-index`: auto 로 두면 블렌딩이 .e2-bleed 의 배경까지 닿고,
     .e2-bleed 의 `isolation`: isolate 가 그 바깥으로 새는 것만 막아 준다. */
  /* ── WebGL 실크 웨이브 (wave.js) ──
   * Stripe 히어로 오마주. 오로라와 같은 자리에 깔리고, 첫 프레임이 그려지면
   * 오로라에서 웨이브로 크로스페이드한다. WebGL 이 없으면 opacity 0 인 채 남고
   * 오로라가 그대로 보인다 — 실패해도 페이지는 멀쩡해야 한다. */
  /* inset 을 음수로 크게 잡아, blur 로 번진 가장자리가 블록 경계에서 뚝 잘리지 않게 한다.
         ⚠️ 그 대가로 레이어가 블록보다 커진다(가로세로 160%). 따라서 아래 radial-gradient 의
         위치 %는 블록이 아니라 이 확대된 레이어 기준이다.
         블록 기준 좌표 x 를 레이어 좌표로 옮기려면  (x + 0.3) / 1.6  을 쓴다. */
  /* 움직임은 JS(aurora.js)가 --ax/--ay/--sc 커스텀 프로퍼티로 넣어 준다.
     CSS @keyframes 는 아무리 길게 잡아도 결국 같은 궤적을 반복하지만,
     JS 로 진동수가 서로 나누어떨어지지 않는 사인파를 합하면 궤적이 되풀이되지 않는다.
     transform 만 건드리므로 레이아웃 재계산 없이 컴포지터에서만 처리된다. */
  /* ⚠️ 두 층 모두 히어로 셰이더와 '같은' 팔레트(--e2-mesh-*)를 읽는다. 이게 핵심이다.
         예전엔 여기가 주황(--e2-accent-warm) + 파랑이었다 — 페이지 전체가 다크 네이비였던
         초기 디자인의 잔재다. 그래서 페이지가 인디고→바이올렛→핑크로 열리고 인디고→주황으로
         닫혔다. 색을 하나씩 손으로 맞추는 대신 토큰을 공유하게 만들었으니, 앞으로 팔레트를
         무엇으로 바꾸든(wave.js 의 uC1/uC2/uC3 와 --e2-mesh-* 를 함께 고치면) 히어로와 CTA 가
         같이 움직인다. 팔레트가 두 군데 하드코딩돼 있으면 어긋나는 건 시간문제다.

         screen 블렌드라 '밝게'만 한다 — 어두운 바닥 위에서만 색이 핀다(밝은 바닥 위에 얹으면
         색이 바래 흰빛으로 날아간다). CTA 블록이 다크인 이유가 여기 하나 더 있다.
         위치 %는 레이어(블록의 160%) 기준임에 유의 — 블록 기준 x 는 (x+0.3)/1.6 로 환산. */
  /* 두 층의 궤적이 서로 달라야 겹치는 무늬가 매번 바뀐다. */
  /* 움직임을 원치 않는 사용자에게는 정지된 메시로 보여준다.
     빛 자체는 장식이므로 없애지 않고, 흐름만 멈춘다. */
  /* ────────────────────────────────
   * 공용 부품 — 섹션 3곳 이상에서 쓰이면 여기로 승격한다
   * ──────────────────────────────── */
  /* 섹션 킥커 — 번호는 브랜드 그린 */
  /* 제목 안의 뮤트 행 */
  /* 번호 칩 — 플랫 화이트 + 헤어라인 + 그림자 램프.
     작은 부품이라 hairline-soft(옅은 선)로 충분하다 — strong 을 쓰면 칩이
     제 크기보다 무거워 보인다. */
  /* ── 듀오톤 아이콘의 기본 크기 ──
   * ⚠️ **SVG 에 크기를 안 주면 브라우저가 기본값(보통 300×150)으로 그린다.** duo-icon.html 은
   *    viewBox 만 갖고 width/height 속성이 없으므로, 담는 쪽이 크기를 정해 주지 않으면
   *    아이콘 하나가 카드를 통째로 잡아먹는다 — 보안 섹션에서 실제로 그렇게 터졌다.
   *    그래서 여기서 '안전한 기본값'을 한 번 못 박는다. 담는 쪽은 필요하면 덮어쓰면 된다
   *    (노드 원 20px, 노드 알약 18px, 보안 카드 36px …).
   *
   * ⚠️ .e2-icontile(44px 유리 스쿼클 타일)은 삭제했다. 소비자가 보안 섹션 하나였는데 그 섹션이
   *    커버리지와 같은 '맨몸 듀오톤' 문법으로 바뀌면서 사용처가 0이 됐다(사용자 지시: "다
   *    듀오톤으로"). 흰 카드 위에 유리 타일을 또 얹으면 층이 하나 늘 뿐이다. */
  /* ────────────────────────────────
   * 풀블리드 액센트 블록 — 히어로와 CTA가 공유한다.
   * 페이지의 처음과 끝을 같은 통짜 그린으로 닫아 수미상관을 만든다.
   * ──────────────────────────────── */
  /* 블록은 뷰포트 폭에서 좌우 8px 만 남기고 꽉 채운다(≈98.9%).
     콘텐츠는 안쪽 .e2-container 가 다시 1240px 로 가둔다. */
  /* ────────────────────────────────
   * 등장 모션
   *
   * JS 는 뷰포트 진입만 감지해 .is-revealed 를 붙인다. 실제 움직임은 전부 여기 있다.
   * group 에 클래스가 붙으면 안의 item 들이 --i 순서대로 시차를 두고 나온다.
   * ──────────────────────────────── */
  /* 제목은 블러에서 풀린다 — 초점이 맞는 듯한 느낌.
     npaystartup 의 data-reveal-blur 이 만드는 시그니처 동작이다. */
  /* 움직임을 원치 않는 사용자에게는 즉시 최종 상태로 보여준다.
     접근성 요구이자, 모션이 콘텐츠를 가리면 안 된다는 원칙이다. */
  /* ────────────────────────────────
   * AuroraText — 흐르는 그라디언트 텍스트
   *
   * 래퍼(.e2-auroratext)는 display:contents 로 레이아웃에서 사라진다 — sr-only 사본과
   * 그라디언트 사본만 남아, 이 스팬을 감싸는 바깥 뮤트 컨테이너(.e2-problem__dim 등)의
   * 레이아웃(block, 줄바꿈)을 그대로 물려받는다.
   * ──────────────────────────────── */
  /* ⚠️ display:block 이 두 가지를 동시에 해결한다.
    ① transform 은 비-교체 inline 요소에는 적용되지 않는다 — rotate/scale 이 먹으려면
       최소 inline-block 이상이어야 한다.
    ② 한글 제목 전체를 통짜 inline-block 으로 두면 좁은 화면에서 줄바꿈을 못 해
       가로 스크롤을 만든다. block 은 자기 폭 안에서 keep-all 그대로 줄바꿈하면서도
       transform 적용 대상이 된다 — 부모(.e2-ta__c, inline-block)가 shrink-to-fit 으로
       가용 폭에 맞춰 줄어들기 때문에 뷰포트를 넘치지 않는다. */
  /* 색은 CTA 오로라·히어로 셰이더와 '같은 토큰'을 읽는다(사용자 지시 2026-07-14).
     하드코딩된 색을 두지 않는 게 요점이다 — 팔레트를 바꾸면 넷이 함께 움직인다.
     가운데를 --e2-mesh-ink 로 두고 양끝을 --e2-mesh-1 로 닫아, 인디고 → 바이올렛 → 푸시아 →
     바이올렛 → 인디고 로 왕복한다(이음매 없이 흐르려면 첫 스톱과 끝 스톱이 같아야 한다).
     ⚠️ 세 번째 색만 CTA 와 다르다: CTA 의 --e2-mesh-3(#fab2ff)는 어두운 바닥 위 '빛'이라
        밝은 바닥 위 '글자'로는 사라진다(1.6:1). 같은 hue 의 잉크용 짝으로 바꿔 끼운다. */
  /* ⚠️ transform(rotate/scale)을 전부 걷어냈다 — 움직이는 건 그라디언트뿐이다.
     원본 MagicUI 는 글자 자체를 미세하게 기울이고 키웠는데, 이 페이지에서는 그게 '흐르는 색'이
     아니라 '글자가 떨리는 것'으로 읽혔다. 제목은 페이지에서 가장 큰 활자라 1~2° 의 기울기도
     눈에 띄게 흔들린다(작은 배지에서라면 안 보였을 것이다). rotate 만 빼고 scale 을 남기면
     ±1.5% 로 숨쉬는 잔상이 남아 어중간하므로 transform 자체를 없앴다.
     AuroraText 의 본질은 background-position 이 도는 것 — 그건 그대로 살아 있다. */
  /* 움직임을 원치 않는 사용자에게도 그라디언트 색 자체는 남긴다 — 사라지는 건 흐름뿐. */
  /* ────────────────────────────────
   * TextAnimate — 글자 단위 blurInUp 등장
   *
   * 계약은 위 [data-reveal] 과 같다: JS(text-animate.js)는 글자를 쪼개고 뷰포트 진입만
   * 감지해 .is-in 을 붙인다. 이동·블러·투명도는 전부 여기 있다.
   * ──────────────────────────────── */
  /* 어절 래퍼 — 줄바꿈 기회를 어절 사이로만 되돌린다.
     글자를 inline-block 으로 쪼개면 글자 사이가 전부 줄바꿈 지점이 되어 h1 의 `word-break`: keep-all
     이 무력화된다(375px 에서 "공시"/"까지"가 갈라졌다). 어절을 nowrap 으로 묶어야 keep-all 이
     의도한 것과 같은 결과가 된다 — 자세한 사정은 text-animate.js 의 splitText() 주석 참고. */
}
.enterprise-2-page .e2-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 2.0025rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-container {
    padding-inline: 1.5rem;
  }
}
.enterprise-2-page section {
  padding: 0;
}
.enterprise-2-page .e2-section {
  padding-block: 7.5rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-section {
    padding-block: 4.5rem;
  }
}
.enterprise-2-page .e2-section-head {
  max-width: 760px;
  margin-bottom: 4.5rem;
  text-align: center;
  margin-inline: auto;
}
.enterprise-2-page .e2-display {
  margin-left: -0.75%;
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.26;
  word-break: keep-all;
}
.enterprise-2-page .e2-h2 {
  color: var(--e2-ink);
  font-size: clamp(1.875rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.26;
  word-break: keep-all;
}
.enterprise-2-page .e2-h3 {
  color: var(--e2-ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.45;
  word-break: keep-all;
}
.enterprise-2-page .e2-sub {
  margin-top: 1.125rem;
  color: var(--e2-ink-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  word-break: keep-all;
}
.enterprise-2-page .e2-body {
  color: var(--e2-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  word-break: keep-all;
}
.enterprise-2-page .e2-card {
  position: relative;
  background: var(--e2-canvas);
  border: 1px solid var(--e2-hairline);
  border-radius: 6px;
  padding: 1.875rem;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.enterprise-2-page .e2-card:hover {
  border-color: transparent;
  box-shadow: 0 8px 16px -8px var(--e2-card-shadow-1), 0 20px 36px -12px var(--e2-card-shadow-2);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-card {
    transition: box-shadow 260ms ease;
  }
  .enterprise-2-page .e2-card:hover {
    transform: none;
  }
}
.enterprise-2-page .e2-card--accent {
  background: var(--e2-accent-gradient);
  border-color: transparent;
  color: var(--e2-on-accent);
}
.enterprise-2-page .e2-card--accent .e2-h3,
.enterprise-2-page .e2-card--accent .e2-h2 {
  color: var(--e2-on-accent);
}
.enterprise-2-page .e2-card--accent .e2-body,
.enterprise-2-page .e2-card--accent .e2-sub {
  color: var(--e2-on-accent-muted);
}
.enterprise-2-page .e2-chip {
  display: inline-flex;
  min-height: 2.0625rem;
  padding: 0.375rem 1.125rem;
  align-items: center;
  border: 1px solid var(--e2-hairline);
  border-radius: 999px;
  color: var(--e2-ink-muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  word-break: keep-all;
  transition: background-color 160ms ease, border-color 160ms ease;
  gap: 0.5625rem;
}
.enterprise-2-page .e2-chip__sep {
  opacity: 0.45;
}
.enterprise-2-page .e2-chip__action {
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  gap: 0.1875rem;
  text-underline-offset: 0.2em;
}
.enterprise-2-page .e2-chip--on-accent {
  border-color: var(--e2-on-accent-hairline);
  color: var(--e2-on-accent);
}
.enterprise-2-page .e2-chip--on-accent:hover {
  border-color: var(--e2-on-accent);
  background: rgba(255, 255, 255, 0.1);
}
.enterprise-2-page .e2-wave {
  position: absolute;
  z-index: auto;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
  inset: 0;
}
.enterprise-2-page .e2-bleed.is-wave-ready {
  /* ⚠️ 오로라를 opacity 로 페이드아웃하지 마라(2026-07-14 사용자 지시로 제거).
     오로라 레이어는 mix-blend-mode: screen 이라 흰 캔버스 위에서 스스로 흰색이 돼
     사라진다(opacity 1 일 때). 그런데 opacity 를 1→0 으로 굴리면 그 '중간' 값에서
     .e2-aurora 가 그룹으로 격리되고(opacity<1 이 grouping 을 만든다), 그 순간 screen
     블렌드의 상대가 흰 바닥이 아니라 '투명'이 된다 — 억눌려 있던 보라색 메시가 화면
     전체에 그대로 떠올랐다가(=히어로 전체가 번쩍) 페이드가 끝나며 사라졌다.
     그래서 오로라는 건드리지 않는다. 어차피 opacity 1 인 채로 흰 바닥 위에서 안 보이고,
     불투명한 웨이브 캔버스가 그 위를 덮으며 페이드인한다. WebGL 이 죽어 is-wave-ready 가
     빠지면 웨이브가 사라지고 이 '안 보이는 오로라'가 그대로 흰 폴백으로 남는다. */
}
.enterprise-2-page .e2-bleed.is-wave-ready .e2-wave {
  opacity: 1;
}
.enterprise-2-page .e2-aurora {
  position: absolute;
  z-index: auto;
  overflow: hidden;
  pointer-events: none;
  inset: 0;
}
.enterprise-2-page .e2-aurora__layer {
  position: absolute;
  display: block;
  filter: blur(70px);
  will-change: transform;
  transform: translate3d(var(--ax, 0), var(--ay, 0), 0) scale(var(--sc, 1));
  inset: -30%;
}
.enterprise-2-page .e2-aurora__layer--a {
  background: radial-gradient(circle at 70% 28%, var(--e2-mesh-2) 0%, transparent 30%), radial-gradient(circle at 78% 58%, var(--e2-mesh-3) 0%, transparent 24%);
  mix-blend-mode: screen;
}
.enterprise-2-page .e2-aurora__layer--b {
  background: radial-gradient(circle at 28% 34%, var(--e2-mesh-1) 0%, transparent 32%), radial-gradient(circle at 44% 74%, var(--e2-mesh-2) 0%, transparent 28%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-aurora__layer {
    animation: none;
  }
}
.enterprise-2-page .e2-kicker {
  display: inline-flex;
  margin-bottom: 1.5rem;
  align-items: center;
  color: var(--e2-ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.enterprise-2-page .e2-kicker__no {
  color: var(--e2-highlight);
}
.enterprise-2-page .e2-dim {
  display: block;
  color: var(--e2-ink-muted);
}
.enterprise-2-page .e2-glasschip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--e2-ink-muted);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--e2-hairline-soft);
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 31, 68, 0.05), 0 3px 6px rgba(10, 31, 68, 0.06);
}
.enterprise-2-page .e2-duo {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}
.enterprise-2-page .e2-bleed {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--e2-accent-gradient);
  color: var(--e2-on-accent);
  border-radius: 16px;
  margin-inline: 8px;
  isolation: isolate;
  /* 블록 자체도 유리판이다. 윗변에 정반사를 넣어 두께를 만든다 —
     이 선 하나로 '칠해진 사각형'이 '빛을 받는 물체'가 된다. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* ── 필름 그레인 ──
   * 이 크기(1424×760)의 그라디언트는 8bit 색 단계가 눈에 보이는 띠(banding)로 드러난다.
   * 아주 미세한 노이즈를 한 겹 덮으면 그 계단이 시각적으로 흩어져 사라지고,
   * 동시에 색면이 인쇄물 같은 질감을 얻는다. SVG feTurbulence 를 data URI 로 인라인해
   * 외부 이미지 요청 없이 처리한다. */
  /* ── 글로우 ──
   * Cloudflare 는 여기에 1424×760 <video> 를 깔아 실제로 움직이는 광원을 쓴다.
   * 영상을 흉내내지 않고 CSS 로 가되, 그라디언트 하나로는 "안개"가 되고 만다 —
   * 광원처럼 보이려면 좁고 밝은 코어와 넓고 옅은 헤일로, 두 겹이 필요하다.
   * 그라디언트의 밝은 끝(우하단)과 글로우가 만나 빛이 그쪽에서 오는 것처럼 읽힌다. */
  /* ⚠️ `> *` 로 뭉뚱그리면 안 된다. 그러면 이 안의 .e2-aurora 까지 붙잡아
     `position`: absolute 를 relative 로 덮어쓴다(명시도가 같아 뒤에 오는 쪽이 이긴다).
     그 순간 오로라가 흐름 안의 flex 아이템이 되어 100% 폭을 차지하고,
     콘텐츠를 옆으로 밀어낸다. 콘텐츠 래퍼만 정확히 지목한다. */
}
.enterprise-2-page .e2-bleed::before {
  position: absolute;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.2;
  content: "";
  pointer-events: none;
  inset: 0;
  mix-blend-mode: overlay;
}
.enterprise-2-page .e2-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 오로라가 이미 빛을 만들고 있으므로 글로우는 거들기만 한다.
     예전처럼 세게 넣으면 오로라의 색을 흰색으로 씻어내 버린다.
     바닥에서 살짝 올라오는 안착감만 남긴다. */
  background: radial-gradient(ellipse 46% 34% at 50% 106%, rgba(255, 247, 237, 0.34) 0%, rgba(254, 215, 170, 0.12) 40%, transparent 72%);
}
.enterprise-2-page .e2-bleed > .e2-container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.enterprise-2-page [data-reveal=item] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.enterprise-2-page [data-reveal=item][data-reveal-blur] {
  filter: blur(8px);
  transform: translateY(16px) scale(1.02);
}
.enterprise-2-page [data-reveal=group].is-revealed [data-reveal=item] {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page [data-reveal=item],
  .enterprise-2-page [data-reveal=item][data-reveal-blur] {
    opacity: 1;
    filter: none;
    transition: none;
    transform: none;
  }
}
.enterprise-2-page .e2-auroratext {
  display: contents;
}
.enterprise-2-page .e2-auroratext__text {
  display: block;
  background-clip: text;
  background-image: linear-gradient(135deg, var(--e2-mesh-1), var(--e2-mesh-2), var(--e2-mesh-ink), var(--e2-mesh-2), var(--e2-mesh-1));
  background-size: 200% auto;
  color: var(--e2-highlight);
  animation: e2-auroratext-flow 10s ease-in-out infinite alternate;
  will-change: background-position, transform;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes e2-auroratext-flow {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-auroratext__text {
    animation: none;
  }
}
.enterprise-2-page [data-text-animate] .e2-ta__w {
  display: inline-block;
  white-space: nowrap;
}
.enterprise-2-page [data-text-animate] .e2-ta__c {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity 400ms ease-out, filter 300ms ease-out, transform 300ms ease-out;
  transition-delay: calc(var(--ci, 0) * 30ms);
  will-change: opacity, filter, transform;
}
.enterprise-2-page [data-text-animate].is-in .e2-ta__c {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page [data-text-animate] .e2-ta__c {
    opacity: 1;
    filter: none;
    transition: none;
    transform: none;
  }
}

/* ────────────────────────────────────────────────────────────
 * 궤도 — 물체가 원을 돌되 '똑바로 선 채' 돈다.
 *
 * 레퍼런스: MagicUI Orbiting Circles / Spinning Text. 두 섹션이 같은 이 기계를 쓴다:
 *   · 설계·운영(.e2-found__orbit-node)  — 부여·관리·실현이 ZUZU 둘레를 돈다
 *   · 문제(.e2-worrycard)               — 걱정 카드가 거대한 원 궤도를 돈다(마키가 원이 됐다)
 * 값(각도·반지름·속도)만 각자 넘기고 수식은 여기 하나뿐이다 — 같은 수식을 두 파일에 적어 두면
 * 한쪽만 고쳐져 어긋나는 건 시간문제다.
 *
 * ⚠️ **rotate 를 두 번 건다.** 바깥 rotate 가 물체를 궤도에 태우고, 안쪽 rotate 가 정확히 같은
 *    각을 되돌려 물체를 수평으로 세운다. 되돌리지 않으면 카드가 궤도를 따라 물구나무를 선다
 *    (원 바닥에서 글자가 뒤집힌다). 사용자 지시의 핵심이 정확히 이것이다:
 *    "텍스트를 돌리라는 게 아니라 마키를 원 궤도로 돌리라는 것".
 *
 * ⚠️ 반지름은 var 로 받는다. SCSS 상수로 박으면 keyframe 이 반지름마다 하나씩 필요해진다 —
 *    @keyframes 는 최상위에만 놓을 수 있어 스코프로 분리할 수도 없다.
 * ──────────────────────────────────────────────────────────── */
@keyframes e2-orbit {
  from {
    transform: rotate(var(--e2-orbit-angle)) translateY(var(--e2-orbit-radius)) rotate(calc(var(--e2-orbit-angle) * -1));
  }
  to {
    transform: rotate(calc(var(--e2-orbit-angle) + 360deg)) translateY(var(--e2-orbit-radius)) rotate(calc(var(--e2-orbit-angle) * -1 - 360deg));
  }
}
/* ⚠️ @keyframes e2-sparkle 은 삭제했다(사용자 지시 2026-07-14: "Sparkle은 없애자").
      sparkles.js·.e2-sparkle 규칙까지 함께 걷어냈다 — 소비자가 문제 섹션의 심볼 하나뿐이었다.
      문제 섹션의 심볼을 살아 있게 하는 건 이제 반짝임이 아니라 **다섯 궤도에서 빔이 들어와
      꽂힌다는 사실**이다(hub-and-spoke). 되살리지 마라. */
/* ────────────────────────────────────────────────────────────
 * 다크는 이제 테마가 아니라 '블록'이다.
 *
 * 페이지 전역 다크 테마(.is-dark 토큰 반전)는 폐기했다. 다크는 히어로(.e2-hero__bleed)와
 * CTA(.e2-cta__bleed), 그리고 히어로 커버리지 레일 카드에만 남는다 — 라이트 페이지 위의
 * 다크 히어로(stripe.com/enterprise 문법). 그 블록들의 다크 값은 토큰 반전이 아니라
 * 각 섹션 SCSS 의 하드코딩(rgba(#fff,…) 유리, --e2-on-accent 잉크)으로 산다.
 * ──────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────
 * ⚠️ 주석 작성 규칙 — 이 레포의 pre-commit 훅이 걸린다
 *
 * 주석 안에 **[속성 이름][콜론][공백][값]** 꼴을 쓰지 마라. 이 레포의 pre-commit 훅
 * (sort-css-properties.js)이 주석 속 그 패턴을 CSS 선언으로 오인해 주석 기호를 벗겨 내고,
 * 그 결과 stylelint 가 CssSyntaxError 를 뱉으며 커밋이 통째로 막힌다.
 *
 * 실제로 겪었다: 훅이 **자기가 만든 오류에 걸려 넘어졌고**, 되돌리기까지 실패해 작업 트리가
 * 통째로 stash 로 날아갔다(94개 파일). 훅을 고치는 건 이 페이지의 일이 아니므로, 함정을 피한다.
 *
 * 나쁜 예: 주석에 `overflow` 와 `hidden` 을 콜론으로 이어 붙이는 것.
 * 좋은 예: "overflow 를 hidden 으로 주면 안 된다" / "줄높이가 1 이라" / "스크린 블렌드가"
 * 값을 꼭 밝혀야 하면 콜론을 빼고 조사로 잇는다.
 * ──────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────
 * 고아 단어(orphan) 방지 — 마지막 줄에 단어 하나만 남는 것을 막는다.
 *
 * 실측으로 세 곳에서 나왔다: 보안 카드의 "…암호화 적용"(1440에서 '적용'만 홀로),
 * "…정보보호관리체계 인증"(768에서 '인증'만), 증권사 카드의 "…90% 절감."(1440에서 '절감.'만).
 *
 * ⚠️ **카피를 고쳐서 해결하지 마라.** 문구를 다듬으면 그 폭에서만 맞고 다른 폭에서 다시 깨진다.
 *    게다가 이 문구들은 마케팅이 확정한 카피다(원본 커밋 "마케팅 최종 카피 반영") — 한 글자도
 *    건드릴 수 없다. 줄바꿈은 카피의 문제가 아니라 조판의 문제이므로 조판으로 푼다.
 * ⚠️ 미지원 브라우저는 이 선언을 그냥 무시한다(점진적 향상). 폴백이 필요 없다.
 * ⚠️ 제목에는 걸지 않는다. 제목은 프론트매터가 두 행으로 못 박아 둔 구조라(heading/headingAccent),
 *    브라우저가 줄을 재배분하면 의도한 행갈이가 무너진다.
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page .e2-sub,
.enterprise-2-page .e2-coverage__desc,
.enterprise-2-page .e2-found__lede,
.enterprise-2-page .e2-found__support,
.enterprise-2-page .e2-sec__lede,
.enterprise-2-page .e2-sec__body,
.enterprise-2-page .e2-brok__lede,
.enterprise-2-page .e2-brok__body,
.enterprise-2-page .e2-cta__body,
.enterprise-2-page .e2-hero__sub,
.enterprise-2-page .e2-faq__a,
.enterprise-2-page .e2-rsu__line {
  text-wrap: pretty;
}

/* 디자인 토큰($e2-*)은 common 모듈에 산다. Sass 모듈은 스코프가 파일 단위라
   여기서 명시적으로 @use 해야 보인다. */
/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — Hero (라이트)
 *
 * 흰 캔버스 위 RGB 리본 셰이더(wave.js) → 플랫 화이트 카드 레일.
 * 히어로·네비·페이지가 전부 흰 면이라 이음매 자체가 없다(stripe.com 홈 문법).
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page {
  /* 히어로는 네비게이션과 한 면이 되어야 한다(Stripe 문법).
     위 틈·거터·라운드가 각각 경계선을 만들므로 히어로만 풀블리드로 펼친다.
     네비(zz-bg-white)와 셰이더의 흰 캔버스가 같은 색이라 그대로 이어진다.
     CTA 블록은 그대로 인셋 라운드 다크 액센트다. */
  /* ── 액센트 블록 ── */
  /* 1424×760 (1.87:1). 높이를 고정해야 이 비율이 지켜진다.
     좁은 화면에서는 비율을 포기하고 패딩 기반 자동 높이로 흐르게 둔다. */
  /* 히어로 높이는 콘텐츠가 정한다.
     ⚠️ 예전에는 min-height($e2-hero-height)를 걸어야 했다 — 그걸 빼면 히어로가 짧아지고,
     셰이더가 uv(비율) 좌표계라 리본이 제목 위로 압축되어 올라왔기 때문이다.
     그런데 셰이더가 종횡비 보정 + 축(axis) 기반으로 바뀌면서 캔버스 높이가 달라져도
     리본이 알아서 적응한다. 기하를 제대로 짜니 레이아웃의 족쇄가 함께 풀렸다.

     하단 패딩(2026-07-14 사용자 지시로 48px → 96px). 두 가지가 겹쳐 바닥이 답답했다:
     ① 덱 화살표 버튼(44px + 여백)이 제거되면서 덱 아래를 받치던 68px 이 통째로 사라졌고,
     ② 부채꼴 뒷장이 아래로 42px 더 내려앉는다($e2-deck-shift-y-2). 즉 카드가 더 내려왔는데
     받침은 없어진 셈이라, 뒷장 모서리가 히어로 바닥선에 거의 닿아 있었다. */
  /* 2컬럼: 좌(제목·CTA·로고) / 우(후기 덱). 우측 컬럼은 5fr 로 좁게 잡아
     셰이더 리본이 퍼지는 우상단 공간을 덱 카드가 과하게 덮지 않게 한다. */
  /* ⚠️ 공통 규칙(.e2-bleed > .e2-container, 3클래스)의 `z-index`: 1 을 히어로에서만 푼다.
     z-index 가 붙으면 쌓임 맥락이 생겨, 아래 제목의 mix-blend-mode 가 셰이더
     캔버스까지 닿지 못하고 컨테이너 안에서 갇힌다(뒤가 투명 → 블렌드 무효).
     그리기 순서는 DOM 순서(오로라 → 캔버스 → 컨테이너)가 이미 보장한다.
     셀렉터를 공통 규칙과 같은 명시도(3클래스)로 맞춰야 이긴다 — 이 파일이 뒤에 로드된다. */
  /* 글자는 잉크 — 흰 캔버스 위이므로 텍스트섀도가 필요 없다. 리본이 글자 뒤를 지나는
     구간은 셰이더의 '제목 무대'(textShade)가 캔버스색으로 반쯤 바래 줘 대비를 지킨다. */
  /* 줄바꿈은 마크업의 .e2-hero__title-line 이 정한다.
     여기서 max-width 로 폭을 더 좁히면 그 위에서 한 번 더 접혀 의도치 않은 3줄이 된다. */
  /* ── 아이브로우 ──
     폰트는 선언하지 않는다 — 사이트 기본 폰트($fontSet, base/_typography.scss 가 body 에 건다)를
     그대로 상속받는 게 곧 "우리 웹사이트 폰트"다. 여기서 다시 적으면 사본이 하나 더 생길 뿐이다.

     ⚠️ 한때 필기체(Dancing Script)를 2.5rem 으로 썼다. 크기를 그대로 두고 폰트만 산세리프로
     바꾸면 안 된다 — 필기체 2.5rem 은 '장식'으로 읽히지만 같은 크기의 산세리프는 '두 번째 제목'으로
     읽혀 바로 아래 H1 과 위계를 다툰다. 폰트를 바꾸면 크기도 함께 내려와야 아이브로우로 남는다.
     (부수 효과로 Google Fonts 외부 의존도 사라졌다.)

     색은 히어로 배경 메시와 같은 스톱(--e2-mesh-*)을 `background-clip`: text 로 글자에 클립한다.
     ⚠️ -webkit-text-fill-color: transparent 를 빼먹으면 그라디언트가 글자 뒤에 깔릴 뿐
     글자 자체는 검게 남는다. 두 줄이 한 세트다.
     ⚠️ 잉크는 메시의 '어두운 절반'만 쓴다 — 밝은 끝(--e2-mesh-3)은 흰 종이 위에서 글자로는
     사라진다(실제로 마지막 'e' 가 안 보인 적이 있다). 그래서 --e2-mesh-ink 를 따로 둔다. */
  /* 광학 행잉은 공용 .e2-display 가 이미 걸고 있다($e2-optical-hang, _common.scss).
     여기서 다시 적으면 값이 두 군데로 갈라진다 — 히어로 제목은 .e2-display 를 함께 단다. */
  /* 데스크톱에선 두 줄로 확실히 끊어 리듬을 만들고, 좁은 화면에선 흘려보내
     어색한 공백이 생기지 않게 한다. */
  /* 세 행을 모든 폭에서 그대로 지킨다.
     예전엔 좁은 화면에서 `display`: inline 으로 풀어 흘려보냈다 — 그때 카피가
     "주식보상 설계·부여·행사·공시까지 / 하나의 시스템에서" 라는 가운뎃점 나열형이라
     행 나눔이 순전히 조판이었고, 좁은 화면에서 강제하면 어색한 짧은 행이 생겼기 때문이다.
     지금 카피는 마침표로 끊기는 문장 3개다("…설계부터 / …공시까지. / …시스템에서.").
     행 나눔이 곧 문장 경계이므로 조판 편의로 풀어 버리면 글이 다르게 읽힌다.
     375px(폭 339px, 25.5px 글자)에서 세 행 모두 들어가는 것을 실측으로 확인했다 —
     카피가 길어지면 이 전제가 깨지므로 다시 재라.
     (행 사이 공백은 마크업의 공백 텍스트 노드가 책임진다 — 파티셜 주석 참고.) */
  /* ── 광학 좌측 보정 (사용자 지적, 2026-07-14) ──
   *
   * 박스는 이미 완벽히 맞았다 — 아이브로우·H1 3행·본문·버튼이 전부 컨테이너 좌변(144.5px)에서
   * 시작한다. 그런데도 눈에는 버튼만 왼쪽으로 튀어나와 보였다. 기하학이 아니라 광학의 문제다:
   *
   *   글자에는 **좌측 사이드베어링**이 있다. 실제 잉크는 박스보다 안쪽에서 시작한다.
   *   버튼의 검정 알약은 **채워진 도형**이라 가장자리가 곧 박스다 — 여백이 0이다.
   *   둘을 같은 x 에 놓으면 도형만 그 베어링만큼 밖으로 튀어나온다.
   *
   * 픽셀 실측(1440, Pretendard): 아이브로우 / H1 세 행 / 본문의 잉크는 모두 x=2,
   * 버튼의 알약만 x=0. 즉 어긋난 것은 버튼 하나이고, 그 값이 정확히 $e2-optical-inset 이다.
   *
   * ⚠️ 반대로 '텍스트를 -2px 로 빼는' 해법은 쓰지 않는다. 이 페이지의 다른 섹션들도 텍스트
   *    박스를 컨테이너 좌변에 맞추고 있으므로, 히어로 텍스트만 빼면 히어로만 다른 선에 선다.
   *    고쳐야 할 것은 다수(텍스트)가 아니라 소수(도형)다.
   * ⚠️ 매직 넘버가 아니라 실측값이다. 폰트나 H1 크기가 바뀌면 다시 재야 한다 — 베어링은
   *    글꼴과 크기의 함수다. */
  /* 커버리지(사진 무대 + 카드 레일)는 _coverage-for-enterprise.scss 로 독립했다 —
     히어로와 커버리지가 서로 다른 파티셜/파일이 됐기 때문. */
  /* ⚠️ 여기 있던 .e2-railbtn(44px 원형 화살표 버튼)을 삭제했다. 소비자가 둘이었는데
     둘 다 사라졌기 때문이다: 커버리지 카드 레일(→ Stripe 그리드로 교체)과 히어로 후기 덱의
     이전/다음 버튼(→ 2026-07-14 사용자 지시로 제거). 죽은 규칙을 남기면 다음 사람이
     "이 페이지에는 화살표 버튼 문법이 있다"라고 읽는다. */
  /* ── 고객사 로고 marquee — 셰이더 위 ──
     트랙에 같은 로고 두 벌이 이어져 있고 translateX(-50%) 를 무한 반복한다.
     두 벌이 정확히 같은 폭이므로 -50% 지점과 0% 지점의 그림이 일치해 이음매가 없다. */
  /* ── 우측 컬럼: 후기 카드 덱 ──
     레퍼런스: Mobbin FOLLOW.ART(겹쳐 쌓인 카드 + 화살표 전환). 카드 자체의 시각 문법은
     홈 고객 인터뷰 스와이퍼(사진 → 칩 행 → 제목 → 설명, 아래 .e2-deck__photo 이하 규칙)에서
     가져왔다. 카드 3장을 absolute 로 완전히 포개고, deck.js 가 바꾸는 data-pos 값만으로
     앞/뒷장이 갈린다 — 움직임(transform/opacity)은 전부 여기, 상태 판단만 JS. */
  /* --e2-fan — 부채꼴의 배율. 이동·회전·우측 버퍼가 전부 이 하나를 곱해서 산다.
     셋을 따로 관리하면 반드시 어긋난다(버퍼만 줄이면 카드가 뷰포트 밖으로 넘치고,
     이동만 줄이면 우측에 빈 여백이 남는다). 좁은 화면에서는 이 값 하나만 내린다. */
  /* absolute 자식만 있는 컨테이너라 높이가 저절로 안 생긴다 — 직접 고정한다. */
  /* 카드 표면 — 솔리드 흰색. 유리는 걷어냈다(2026-07-14 사용자 지시: "glass effect는
     카드에서 빼도 됨"). Stripe 히어로의 부채꼴 카드들도 전부 불투명한 흰 판이다.

     솔리드에서 '떠 있는 판'을 만드는 건 그림자 램프 하나뿐이다. 반경·투명도를 배수로
     늘려가며 5겹을 쌓는다(2→7→14→28→54px) — 단층 그림자는 아무리 키워도 카드에서
     뚝 끊기는 테두리로 읽혀 스티커가 된다. 부채꼴에서는 이게 더 중요하다: 뒷장이 앞장
     아래로 파고드는 깊이감이 오직 이 그늘로만 표현되기 때문이다.

     `overflow`: hidden 은 사진·padding 없는 문단을 카드 라운드 모서리에 맞춰 자르기 위함
     (사진이 상단 모서리만 따라 둥글게 보이는 이유 — 사진 자체엔 radius 를 주지 않는다). */
  /* 사진 — 홈 고객 인터뷰 스와이퍼와 같은 비율($e2-deck-photo-height). 카드 폭에 맞춰
     채우고 넘치는 부분은 자른다(`object-fit`: cover). */
  /* 칩 행 — 로고 칩(둥근 로고 16px + 회사명) + 투자단계 칩. 따뜻한 회색 배경으로
     본문보다 한 단 낮은 위계를 준다(액센트 없이 뮤트된 정보). */
}
.enterprise-2-page .e2-hero {
  padding-top: 0;
}
.enterprise-2-page .e2-hero__bleed {
  min-height: 0;
  padding-block: 4.5rem 6rem;
  margin-inline: 0;
  border-radius: 0;
  align-items: flex-start;
  /* 히어로는 이제 라이트 블록 — 셰이더가 흰 캔버스 위에 리본을 그린다(wave.js).
     공용 .e2-bleed 의 다크 그라디언트·그레인·글로우·유리 림은 CTA 전용 유산이므로
     여기서는 전부 걷어내고, WebGL 폴백도 '흰 면 + 잉크 글자'로 멀쩡하게 남긴다
     (오로라의 screen 블렌드는 흰 바닥 위에서 스스로 사라진다). */
  background: var(--e2-canvas);
  color: var(--e2-ink);
  box-shadow: none;
}
.enterprise-2-page .e2-hero__bleed::before, .enterprise-2-page .e2-hero__bleed::after {
  content: none;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-hero__bleed {
    min-height: 0;
    align-items: center;
    padding-block: 5.25rem 4.5rem;
  }
}
.enterprise-2-page .e2-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 3.75rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-hero__stage {
    grid-template-columns: minmax(0, 1fr);
  }
}
.enterprise-2-page .e2-hero__col-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.enterprise-2-page .e2-hero__bleed > .e2-hero__stage {
  z-index: auto;
}
.enterprise-2-page .e2-hero__eyebrow {
  /* ⚠️ H1 은 줄높이가 1 이라 한글 글리프가 라인박스를 꽉 채운다 — 박스 간격보다
     '눈에 보이는' 간격이 좁게 나온다. 그래서 여기 값은 넉넉해 보여야 실제로 충분하다. */
  margin-bottom: 1.125rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  background-image: linear-gradient(100deg, var(--e2-mesh-1) 0%, var(--e2-mesh-2) 55%, var(--e2-mesh-ink) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.enterprise-2-page .e2-hero__title {
  max-width: 100%;
  color: var(--e2-ink);
}
.enterprise-2-page .e2-hero__title-line {
  display: block;
}
.enterprise-2-page .e2-hero__sub {
  max-width: 54ch;
  margin-top: 1.5rem;
  color: var(--e2-ink-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  white-space: pre-line;
  word-break: keep-all;
}
.enterprise-2-page .e2-hero__actions {
  display: flex;
  margin-top: 2.625rem;
  padding-left: 2px;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
}
.enterprise-2-page .e2-hero__col-deck {
  --e2-fan: 1;
  width: 100%;
  max-width: 420px;
  /* 뒷장이 오른쪽 아래로 삐져나오는 부채꼴이라, 그만큼을 컬럼 우측에 미리 비워 둔다 —
     안 그러면 좁은 화면(375px)에서 카드 모서리가 컨테이너/뷰포트 밖으로 넘쳐 가로
     스크롤을 유발한다(페이지 루트의 `overflow-x`: clip 이 실제 스크롤바는 막아 주지만,
     그전에 레이아웃으로 넉넉히 방지하는 쪽이 우선이다). */
  padding-right: calc(calc(74px + 0.75rem * 1.5) * var(--e2-fan));
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-hero__col-deck {
    --e2-fan: 0.4;
  }
}
.enterprise-2-page .e2-deck {
  position: relative;
  min-height: 500px;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-deck {
    min-height: 460px;
  }
}
.enterprise-2-page .e2-deck__card {
  position: absolute;
  inset: 0;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 520ms cubic-bezier(0.16, 1, 0.3, 1);
  /* 앞장 — 변형 없음, 유일하게 클릭 가능한 카드 */
  /* ── 뒷장 — 시계 방향으로 '접힌다' ──
     회전도, 오른쪽 이동도, 아래 이동도 뒤로 갈수록 단조 증가한다. 카드 한 벌을 손에
     쥐고 펼칠 때 생기는 모양이 이것이다. 부호를 섞으면(뒷장1 시계 + 뒷장2 반시계)
     펼친 손이 아니라 엎지른 카드가 된다 — 한때 그렇게 돼 있었고, 사용자가 Stripe
     히어로를 지목하며 바로잡으라고 했다(2026-07-14). $e2-deck-* 토큰 주석 참고.

     transform-origin 은 왼쪽 아래다. 부채꼴은 '한 점을 축으로' 펼쳐질 때만 부채꼴로
     읽힌다 — 기본값(중심)으로 돌리면 각 장이 제자리에서 따로 도는 것처럼 보인다.
     축을 왼쪽 아래에 두면 카드가 왼쪽 밑동을 붙들고 오른쪽 위로 벌어진다. */
  transform-origin: 0 100%;
}
.enterprise-2-page .e2-deck__card[data-pos="0"] {
  z-index: 3;
  transform: none;
  opacity: 1;
}
.enterprise-2-page .e2-deck__card[data-pos="1"] {
  z-index: 2;
  opacity: 1;
  transform: translate(calc(36px * var(--e2-fan, 1)), calc(18px * var(--e2-fan, 1))) scale(0.955) rotate(calc(5deg * var(--e2-fan, 1)));
  pointer-events: none;
}
.enterprise-2-page .e2-deck__card[data-pos="2"] {
  z-index: 1;
  opacity: 1;
  transform: translate(calc(74px * var(--e2-fan, 1)), calc(42px * var(--e2-fan, 1))) scale(0.91) rotate(calc(10deg * var(--e2-fan, 1)));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-deck__card {
    transition: none;
    /* 모션을 원치 않는 사용자에게는 회전·이동 없이 앞장만 보인다 — 부채꼴로 흩어진
       정적 상태조차 보여주지 않는다(둘 다 이미 `pointer-events`: none 이라
       상호작용에는 영향 없다, deck.js 버튼은 여전히 pos 만 바꿔 앞장을 교체한다). */
  }
  .enterprise-2-page .e2-deck__card[data-pos="1"], .enterprise-2-page .e2-deck__card[data-pos="2"] {
    transform: none;
    opacity: 0;
  }
}
.enterprise-2-page .e2-deck__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  text-decoration: none;
  background: #fff;
  /* 셰이더(메시 그라디언트) 위에 놓이는 흰 판이라, 테두리는 색이 아니라 아주 옅은
     네이비 헤어라인이어야 한다 — 흰 테두리는 흰 카드 위에서 사라진다. */
  border: 1px solid rgba(10, 31, 68, 0.06);
  box-shadow: 0 2px 3px rgba(10, 31, 68, 0.05), 0 7px 9px rgba(10, 31, 68, 0.06), 0 14px 18px rgba(10, 31, 68, 0.07), 0 28px 35px rgba(10, 31, 68, 0.08), 0 54px 64px rgba(10, 31, 68, 0.1);
}
.enterprise-2-page .e2-deck__photo {
  flex: 0 0 auto;
  width: 100%;
  height: 155px;
  overflow: hidden;
}
.enterprise-2-page .e2-deck__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.enterprise-2-page .e2-deck__body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 1.875rem;
  gap: 1.125rem;
  /* 뒷장으로 물러날 때 글자가 사라지고, 앞장으로 올라올 때 다시 나타난다.
     카드의 transform 과 같은 길이·같은 이징이라 한 동작으로 읽힌다. */
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-deck__body {
    transition: none;
  }
}
.enterprise-2-page .e2-deck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
}
.enterprise-2-page .e2-deck__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.675rem;
  border-radius: 6px;
  background: rgb(250, 249, 245);
  color: var(--e2-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.enterprise-2-page .e2-deck__chip-logo {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.enterprise-2-page .e2-deck__title {
  margin: 0;
  overflow: hidden;
  color: var(--e2-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.enterprise-2-page .e2-deck__link:hover .e2-deck__title {
  text-decoration: underline;
}
.enterprise-2-page .e2-deck__desc {
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--e2-ink-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* marquee 키프레임 — @keyframes 는 최상위에만 놓을 수 있다 */
/* 디자인 토큰($e2-*)은 common 모듈에 산다. Sass 모듈은 스코프가 파일 단위라
   여기서 명시적으로 @use 해야 보인다. */
/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 커버리지 (Stripe /enterprise 문법)
 *
 * 레퍼런스: stripe.com/enterprise "Boost revenue with advanced authorization optimization" 실측.
 *   컨텐츠 컬럼 1080px / 헤드라인 블록 → 그리드 56px / 열 간격 24px, 행 간격 32px
 *   셀 = [40px 아이콘 → 소제목 18px → 한 문장 15px], 구분선·테두리·배경 전부 0.
 *   셀 높이를 맞추지 않는다(`align-items`: start) — 내용이 높이를 정한다.
 *
 * 이 문법의 핵심은 '셀에 아무것도 두르지 않는' 것이다. 카드도 테두리도 구분선도 없이
 * 여백만으로 8칸을 나눈다 — 셀에 상자를 두르는 순간 그냥 흔한 기능 그리드가 된다.
 * (섹션 '바닥'은 별개다: 2026-07-14 사용자 지시로 옅은 회색 틴트가 깔린다 — _section-rhythm.scss.
 *  셀은 여전히 맨몸이므로 문법은 그대로다.)
 *
 * ⚠️ 예전 이 자리의 sticky 사진 무대(Apple Watch 건강 섹션)는 폐기가 아니라 '증권사 연동'
 *    섹션(.e2-brok)으로 **이사했다** — veil.js / $e2-veil-* / coverage-bg.jpg 가 거기서 산다.
 * ──────────────────────────────────────────────────────────── */
/* 8개 셀이 놓이는 열 수. 3열이라 3+3+2 로 떨어진다 — 마지막 줄이 두 칸만 차고 오른쪽이 비지만,
   그 빈자리가 오히려 '여기서 끝'을 말한다(Stripe 도 셀 높이·칸을 억지로 맞추지 않는다).
   ⚠️ 4열을 시도했다가 사용자가 3열로 지시했다(2026-07-14). 4열이면 컬럼이 266px 로 좁아져
   한글 한 문장이 4줄까지 늘어진다. 3열이면 362px — Stripe 의 528px 리듬에 훨씬 가깝다. */
.enterprise-2-page {
  /* 바닥 색은 _section-rhythm.scss 가 정한다(틴트 #f6f7f9). 여기서 다시 칠하지 않는다 —
     섹션 배경은 한 군데서만 결정해야 리듬이 어긋나지 않는다.
     .e2-section 이 상하 패딩(120px)을 준다. */
  /* ── 헤드라인 블록 — 좌측 정렬. Stripe 는 아이브로우가 없지만 우리는 킥커 한 줄을 갖는다
     (프론트매터 coverageHead.kicker). 제목보다 먼저 읽히되 이기지 않아야 하므로 작고 굵게, 색은 브랜드 그린. */
  /* ⚠️ 공용 .e2-h2 와 '완전히 같은 값'이다(46px @1440 / 700 / lh 1.26 / ls -0.03em) —
     problem·rsu·security·faq 의 제목과 픽셀 단위로 일치한다(사용자 지시, 2026-07-14).
     한때 증권사 섹션(64px)에 맞추려다 되돌렸다.
     ⚠️ 그냥 .e2-h2 클래스를 붙이지 않고 여기에 따로 쓰는 이유: .e2-h2 는 가운데 정렬
     래퍼(.e2-section-head)와 함께 다니는데, 이 섹션은 Stripe 문법이라 좌측 정렬이다.
     값이 어긋나지 않게 두 곳을 같은 숫자로 못 박아 둔다 — 바꿀 일이 있으면 반드시 함께 바꾼다. */
  /* Stripe 본문은 18px/300 이다. 한글에서 300 은 흐려서 못 쓴다 — 웨이트는 400 으로 올리고
     색을 뮤트로 내려 같은 '가벼움'을 만든다(굵기가 아니라 명도로 위계를 준다). */
  /* ── 8칸 그리드 ──
     셀 높이를 맞추지 않는다(`align-items`: start). Stripe 실측 그대로다 — 높이를 맞추면
     카드가 되고, 카드가 되면 테두리가 필요해지고, 테두리가 생기면 이 문법이 무너진다. */
  /* 등장: 그리드가 하나의 물체로 도착하고, 셀은 26ms 마이크로 스태거로 질감만 준다.
     공용 [data-reveal] 의 기본 스태거(70ms)를 그대로 두면 8칸이 차례로 켜지는
     타자기 연출이 된다 — 스킬이 금지하는 바로 그것. */
  /* 셀. 구분선도, 테두리도, 배경도 없다 — 여백만이 8칸을 나눈다.
     '전 단계 공통' 칸도 예외가 아니다: 한때 그 앞에 세로 헤어라인을 세웠지만 사용자가
     빼라고 지시했다(2026-07-14). 층위는 라벨 문구와 아이콘이 이미 말하고 있다. */
  /* 아이콘 — 타일 없이 맨몸. Stripe 실측: background transparent, border-radius 0.
     유리 스쿼클 타일에 담으면 이 섹션의 문법이 아니라 다른 섹션의 문법이 된다. */
  /* 크기는 공용 기본값(.e2-duo 40px, _common.scss)을 그대로 쓴다 — 여기서 다시 적으면
     기본값과 두 군데로 갈라진다. */
  /* 설명 — 불릿 나열이 아니라 완결된 한 문장(사용자 지시).
     Stripe 는 15px/300. 한글은 15px 가 작고 300 이 흐리므로 16px/400 으로 올린다. */
}
.enterprise-2-page .e2-coverage {
  position: relative;
}
.enterprise-2-page .e2-coverage__head {
  max-width: 810px; /* Stripe 실측: 본문 문단이 컬럼 전체로 늘어지지 않게 잡는 상한 */
  margin-bottom: 3.5025rem; /* 56px */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-coverage__head {
    margin-bottom: 2.4975rem;
  }
}
.enterprise-2-page .e2-coverage__kicker {
  margin: 0 0 0.75rem;
  color: var(--e2-highlight);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.enterprise-2-page .e2-coverage__heading {
  /* 광학 행잉 — 좌측 정렬 대형 제목. 이유는 $e2-optical-hang 주석(_common.scss). */
  margin: 0 0 0 -0.75%;
  color: var(--e2-ink);
  font-size: clamp(1.875rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.enterprise-2-page .e2-coverage__body {
  margin: 1.125rem 0 0;
  color: var(--e2-ink-muted);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.enterprise-2-page .e2-coverage__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 1.5rem; /* 24px — Stripe 실측 */
  row-gap: 3rem; /* 48px — Stripe 는 32px 지만 한글 세 줄 설명이 붙어 읽힌다 */
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-coverage__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-coverage__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.25rem;
  }
}
.enterprise-2-page .e2-coverage__grid [data-reveal=item] {
  transition-delay: calc(var(--i, 0) * 26ms);
}
.enterprise-2-page .e2-coverage__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.enterprise-2-page .e2-coverage__icon {
  display: block;
  margin-bottom: 0.75rem;
}
.enterprise-2-page .e2-coverage__label {
  margin: 0;
  color: var(--e2-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.enterprise-2-page .e2-coverage__desc {
  margin: 0.5625rem 0 0;
  color: var(--e2-ink-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 고객사 로고 격자 밴드
 *
 * 히어로와 커버리지(사진 무대) 사이에 놓인 조용한 신뢰 신호.
 * 흐르는 marquee 를 버린 이유: 움직이는 것은 언제나 시선을 이기므로, 정작 읽어야 할
 * 제목·버튼과 경쟁한다. 격자는 가만히 있으면서 "이만큼 쓴다"만 말한다.
 * ──────────────────────────────────────────────────────────── */
/* 로고 높이의 폴백. 실제 높이는 프론트매터가 로고마다 --logo-h 로 넘긴다 — 바운딩 박스가
   아니라 잉크 면적(불투명 픽셀 수) 기준으로 시각 보정한 값이라(h = H·√(A / N_ink)) 데이터의
   몫이다. 박스 기준으로 맞추면 여백이 넓은 로고는 작아 보이고 획이 굵은 로고는 커 보인다.
   이 값은 --logo-h 가 없을 때만 쓰인다. */
/* 전체 배율 (사용자 지시 2026-07-14: "현재보다 30% 더").
   ⚠️ 프론트매터의 12개 h 값을 하나씩 1.3배 해서 다시 적지 않는다. 그 값들은 로고마다 잉크
   면적으로 시각 보정한 '상대 비례'이고, 여기서 필요한 건 '전체 크기'다. 둘은 다른 축이다 —
   비례는 데이터가, 크기는 스타일이 정한다. 배율을 하나 두면 다음에 또 키우라고 할 때
   숫자 하나만 고치면 되고, 손으로 12개를 곱하다 하나를 틀리는 사고도 없다. */
.enterprise-2-page {
  /* 6열 x 2행. ⚠️ 로고마다 자연 폭이 크게 다르다(tmap 은 kbank 의 3배). 셀에 `min-width`: 0
     을 주지 않으면 가장 넓은 로고가 그 열을 밀어내 격자가 들쭉날쭉해진다 —
     grid 아이템의 기본 min-width 는 auto(콘텐츠 크기)이기 때문이다. */
  /* 색을 되찾았다. 메시 위에서는 로고가 배경색과 싸우므로 회색으로 눌러야 했지만,
     흰 밴드 위에서는 그럴 이유가 없다. */
}
.enterprise-2-page .e2-logos {
  padding-block: 4.5rem;
}
.enterprise-2-page .e2-logos__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  padding: 0;
  list-style: none;
  gap: 2.25rem 1.5rem;
  /* ⚠️ 모바일은 **2열**이다(사용자 지시 2026-07-14). 3열로 두면 셀 폭이 100px 남짓인데
     로고의 자연 폭 차이가 3배라(tmap vs kbank), 좁은 셀에서 넓은 로고가 뭉개져 글자가
     읽히지 않는다. 열을 줄이면 셀이 넓어져 로고가 제 크기를 되찾는다 —
     로고 격자는 '몇 개 보이느냐'가 아니라 '읽히느냐'가 요점이다. 12개 → 2열 6행. */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-logos__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-logos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.enterprise-2-page .e2-logos__cell {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}
.enterprise-2-page .e2-logos__img {
  display: block;
  /* 높이는 로고마다 다르다 — 프론트매터가 --logo-h 로 넘긴다(잉크 면적 기준 시각 보정값,
     파티셜 주석 참고). 값은 데이터가, 선언은 여기가 갖는다. 폴백은 격자 기본 높이.
     $e2-logo-scale 이 그 상대 비례를 유지한 채 전체 크기만 키운다. */
  height: calc(var(--logo-h, 20px) * 1.3);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 네비 이음매
 *
 * 히어로의 유체(WebGL 셰이더)가 네비 뒤까지 넘어가야 한다. 그러려면 두 가지를 해야 한다.
 *
 * 1) 네비 밑에 그어진 선을 지운다. 이건 border 가 아니라 box-shadow(0 1px 1px)다 —
 *    border 만 찾다가는 못 찾는다.
 *
 * 2) 히어로를 네비 높이만큼 끌어올린다. 캔버스는 .e2-bleed 안에 있고 .e2-bleed 는
 *    `overflow`: hidden 이라, 캔버스를 위로 늘리는 방식(`top`: -59px)은 그대로 잘린다.
 *    블록 자체를 올려야 한다.
 *    ⚠️ 네비는 `position`: relative + `z-index`: 2 이므로, 히어로가 그 아래로 파고들어도
 *    네비는 그대로 위에 얹혀 렌더된다. 배경이 transparent 라 유체가 그대로 비친다.
 *    콘텐츠까지 네비 밑으로 들어가면 안 되므로 끌어올린 만큼 padding-top 으로 되돌린다.
 *
 * ⚠️ 스코프: 네비(.main-nav)는 이 페이지 래퍼(.enterprise-2-page) 바깥, 공용
 *    baseof.html 에 산다. 그래서 전역 셀렉터를 쓸 수밖에 없는데, 이 CSS 파일은
 *    pageStyles 로 이 페이지에서만 로드되므로 다른 페이지로 새지 않는다.
 * ──────────────────────────────────────────────────────────── */
/* 네비 높이 실측: 데스크톱 59px, 그 아래 브레이크포인트 61px */
/* ⚠️ 원본 규칙이 `nav#main-nav` (ID 선택자, 명시도 0,1,0,1)라 `.main-nav`(0,0,1,0)로는
   절대 못 이긴다. 같은 명시도로 맞춰야 한다 — !important 를 쓰지 않고 이기는 유일한 길이다. */
nav#main-nav {
  /* 경계선의 정체 — border 가 아니라 box-shadow(0 1px 1px)다. border 만 찾으면 못 찾는다. */
  box-shadow: none;
}

.enterprise-2-page {
  margin-top: -59px;
  /* 끌어올린 만큼 되돌려, 제목·버튼이 네비 밑으로 파고들지 않게 한다.
     히어로 블록만 보정하면 된다 — 아래 섹션들은 히어로가 밀어 준다. */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page {
    margin-top: -61px;
  }
}
.enterprise-2-page .e2-hero__bleed {
  padding-top: calc(59px + 4.5rem);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-hero__bleed {
    padding-top: calc(61px + 5.25rem);
  }
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 섹션 리듬
 *
 * 흰 면이 계속 이어지면 페이지가 한 덩어리로 뭉개져 "어디서 끊기는지"가 사라진다.
 * 옅은 회색을 한 칸 걸러 깔아 섹션의 경계를 색으로 말한다 — 선을 긋지 않고도 나뉜다.
 *
 * ⚠️ 페이지 래퍼(.enterprise-2-page)에는 아주 옅은 도트 그리드가 깔려 있다. 틴트 섹션은
 *    그 위에 솔리드 색면을 얹으므로 도트가 가려진다. 그게 의도다 — 도트가 있는 면과
 *    없는 면이 번갈아 오면서 질감의 리듬까지 함께 생긴다.
 *
 * 다크 블록(히어로, CTA)은 이 리듬 밖이다. 그 둘이 이미 강한 구두점이라
 * 틴트까지 얹으면 위계가 무너진다.
 *
 * ⚠️ 2026-07-14 사용자 지시로 커버리지(스탯 8칸)에 틴트가 추가됐다. problem 은 한 번
 *    순백으로 뺐다가 다시 틴트로 되돌렸다(같은 날, 두 번의 지시). 지금 상태가 최종이다.
 *
 *    로고 밴드가 히어로 바로 아래에서 커버리지 아래로 내려오면서 리듬이 오히려 정돈됐다:
 *      히어로(흰 셰이더) → 커버리지(틴트) → 로고(흰) → problem(틴트) → foundation(흰) → …
 *    틴트 두 면 사이에 흰 로고 밴드가 끼어들어, 회색이 연달아 붙지 않는다.
 *
 *    이 페이지에서 틴트는 '배경이 있는 카드'가 아니라 '배경이 있는 면'이다 — 커버리지 셀은
 *    여전히 테두리도 카드도 없이 여백만으로 나뉜다(Stripe 문법). 바뀐 건 셀이 앉는 바닥뿐이다.
 * ──────────────────────────────────────────────────────────── */
/* 순백 옆에 놓았을 때 "다른 면"으로는 읽히되 "회색 상자"로는 안 읽히는 값.
   더 어두우면 카드(#fff)가 떠 보이고, 더 밝으면 차이가 사라진다. */
/* ⚠️ .e2-sec(보안)이 이 목록에서 빠졌다. 2026-07-14 사용자 지시로 그 섹션이 sticky **영상**
   무대가 됐기 때문이다 — 배경을 스스로 갖는 섹션(히어로·증권사·보안·CTA)은 리듬 밖이다.
   여기에 틴트를 남겨 두면 영상 뒤에 회색 면이 깔려 블리드 가장자리에서 새어 나온다. */
.enterprise-2-page .e2-coverage,
.enterprise-2-page .e2-problem,
.enterprise-2-page .e2-rsu {
  background: #f6f7f9;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 01 `Problem`: 여섯 궤도 + 한복판의 허브 (hub-and-spoke)
 *
 * 스물넷의 걱정이 여섯 궤도를 돌고, 그 데이터가 한복판의 ZUZU 로 **빨려 들어간다**.
 * 빔 레퍼런스는 사용자가 직접 지목했다: 04번 카드("공시·증권사 입고까지 한 번에 끝납니다")의
 * Animated Beam. 다만 방향이 반대다 — 거기선 ZUZU 에서 밖으로 뻗고, 여기선 밖에서 안으로 온다.
 *
 * 궤도 레퍼런스는 MagicUI Spinning Text 이지만 **돌리는 것은 '글자'가 아니라 '마키'다** —
 * 사용자의 정정이 정확히 그 지점이었다:
 *   "텍스트를 돌리라는 게 아니라 marquee 를 텍스트가 회전하는 것처럼 돌리란 말임."
 * 그래서 카드는 궤도를 돌되 **똑바로 선 채로** 돈다. 공용 @keyframes e2-orbit(_common.scss)이
 * rotate 를 두 번 걸어 각을 되돌린다 — 원 바닥에서 글자가 물구나무 서지 않는다.
 *
 * 여섯 궤도는 허브를 **빙 둘러** 놓이고, 중심이 전부 섹션 바깥이라 대부분이 잘려 나가고
 * 가장자리에 걸친 호(弧)만 보인다(사용자 요구: "충분히 커서 overflow hidden 되면 좋음").
 *
 * ⚠️ 원을 하나로 합치지 마라(동심원 금지). 사용자가 명시적으로 정정한 지점이다:
 *    "원은 여러개가 있어야 함. 하나의 원 중심에 로고를 넣는게 아님."
 *    흩어진 원들은 데이터의 **출처**(spoke)이고 로고는 **목적지**(hub)다. 합치는 게 아니라 잇는다.
 *
 * ⚠️ 이 섹션은 네 번 갈아엎었다. 되돌아가지 않기 위해 지나온 길을 남긴다.
 *    1차: 동등한 흰 알약 세 줄 → 균질한 태그 클라우드로 뭉쳤다. 게다가 마키가 아예 안 움직였다
 *         (@keyframes 미정의 — CSS 는 유효하지 않은 애니메이션 이름을 조용히 무시한다).
 *    2차: '신호/소음' 안개 구도 → 대비 실측 2.4~3.5:1 로 기준 미달. 눈에 보이는 텍스트를
 *         "장식"이라 부르며 기준을 면제받는 건 방어 논리지 준수가 아니다.
 *         **여기서 배운 것: 깊이를 흐림으로 만들지 마라.** 지금의 원근도 크기로만 만든다.
 *    3차: 가로 마키 3줄(MagicUI Marquee 계약 그대로).
 *    4차: 원 궤도 3개. 마키의 '흐름'은 남기고 방향만 직선 → 원으로 바꿨다.
 *    5차(현재): 궤도 6개 + 허브 + 빔. 여백 문제와 hub-and-spoke 지시가 사실 한 수정이었다 —
 *         궤도 중심이 전부 섹션 바깥이라 필드 한가운데는 원리적으로 비어 있었고(그래서
 *         "여백이 너무 많음"), 그 빈자리에 허브를 넣자 300px 넘던 죽은 공간이 콘텐츠가 됐다.
 *
 * ⚠️ 필드는 여전히 aria-hidden 이다. 카드가 궤도 위에서 읽기 순서를 잃기 때문이다.
 *    의미는 sr-only 목록이 갖는다(부서 5개 × 걱정 24개). 지우지 마라.
 * ──────────────────────────────────────────────────────────── */
/* 궤도 반지름 — 여섯 궤도가 **같은 값을 쓴다**. 크기 차이는 반지름이 아니라 원근(scale)이
   만든다(아래 --e2-depth 주석 참고).
   vw 로 잡아 화면과 함께 자란다 — px 로 박으면 넓은 화면에서 원이 상대적으로 작아져
   '그냥 동그랗게 배열된 카드'가 되어 버린다(잘림이 사라지는 순간 마법도 사라진다). */
/* 궤도의 속도 — **하나로 통일한다**.
   ⚠️ 한때 96s / 124s / 108s 로 달리 줬다(서로 나누어떨어지지 않아 무늬가 되풀이되지 않게).
   그런데 카드 수까지 8/9/7 로 갈려 있어서(각 간격 45°/40°/51°) 궤도들이 서로 다른 리듬으로
   돌았고, 합쳐진 그림이 무작위로 읽혔다 — 사용자 지적: "도는 게 왜 이렇게 불규칙적이지?"
   각 궤도는 그 자체로는 완벽히 규칙적이었다(각도 오차 0). 불규칙은 **궤도들 사이**에서 왔다.
   카드 수를 **4장씩 정확히** 맞추고(24 ÷ 6, 파티셜의 라운드로빈) 속도도 하나로 두면,
   반지름이 같으므로 접선 속도까지 같아진다 — 화면 어디를 봐도 카드가 같은 빠르기로 흐른다.
   (원근 scale 이 걸린 먼 궤도만 그만큼 느려 보인다 — 그것도 원근이 하는 일이다.)
   느리다: 이건 배경의 웅성거림이지 읽으라고 내미는 캐러셀이 아니다. */
/* ── 허브: 다섯 궤도가 흘려보내는 데이터가 도착하는 곳 ──
   ⚠️ 반짝임(sparkles)은 걷어냈다(사용자 지시 2026-07-14). sparkles.js·.e2-sparkle·@keyframes
      e2-sparkle 까지 전부 삭제했다 — 소비자가 여기 하나뿐이었다. 되살리지 마라.
      심볼을 살아 있게 하는 건 이제 반짝임이 아니라 **빔이 들어와 꽂힌다는 사실**이다. */
/* ── 선(線)의 문법 — 이 무대에는 선이 딱 두 종류뿐이다 ──
   ① **길**: 궤도선(카드들을 잇는 원) + 빔 트랙(궤도에서 허브로 가는 선). 정지해 있는 인프라다.
   ② **데이터**: 빔 위를 흐르는 빛. 움직인다.
   길과 데이터의 구분은 **굵기**가 세워야 한다 — 그러려면 길끼리는 굵기·농도가 같아야 한다.
   ⚠️ 한때 빔 트랙(1.5px/16%)과 궤도선(1px/11%)을 따로 정했다가 사용자에게 지적받았다
      ("데이터 오는 선과 marquee 연결선이 굵기가 다른데 의도한 거임?"). 의도가 아니라 실수였다.
      개념이 같으면 값도 같아야 한다 — 그래서 여기 토큰 하나로 묶는다. 따로 만지지 마라. */
/* 필드 높이 = 궤도가 앉을 무대이자 잘림이 일어나는 상자, 그리고 이제 **허브의 자리**다.
   ⚠️ 예전에는 이 상자 위(제목 블록 안)에 심볼이 따로 서 있었고, 그래서 섹션이
      [제목 → 108px 여백 → 260px 심볼 상자 → 필드] 로 세로로 늘어졌다. 실측 결과
      섹션 높이 1337px 중 죽은 공간이 300px 을 넘었다(사용자 지적: "여백이 너무 많음").
      허브를 필드 **안**으로 들이면 그 여백이 통째로 사라진다 — 원래 궤도 중심이 전부
      섹션 바깥이라 필드 한가운데는 비어 있었고, 그 빈자리가 정확히 허브의 자리였다. */
/* ── 걱정 카드 (MagicUI 리뷰 카드 문법) ── */
/* ── 카드 크기 = 간격 문제의 진짜 원인 ──
 * 사용자 지적: "왜 원에서 marquee 간의 간격이 다 다르지?"
 * 실측: 각 간격은 완벽히 45° 로 균일한데(오차 0), **눈에 보이는 빈틈은 8px ~ 167px** 로
 * 20배 차이가 났다. 원인은 각도가 아니라 **카드의 모양**이다:
 *
 *   카드는 가로로 긴 직사각형(256×97)인데 수평을 유지한 채 원을 돈다.
 *   원의 위·아래에서는 이웃을 잇는 현(弦)이 **가로**라 긴 변(256)끼리 마주쳐 거의 붙고(8px),
 *   원의 좌·우에서는 현이 **세로**라 짧은 변(97)끼리 마주쳐 확 벌어진다(167px).
 *
 * 각도를 아무리 고르게 나눠도 이건 안 없어진다 — 물체가 **정사각형에 가까워져야** 방향과
 * 무관하게 빈틈이 같아진다. 그래서 카드를 세로 구성(아바타 위 / 글자 아래)으로 바꿔
 * 130×134 의 거의 정사각형으로 만들었다. 이건 취향이 아니라 기하학이다.
 *
 * 동시에 사용자 지시로 원 둘레를 50% 이상 줄였다(반지름 360 → 210px, 둘레 -42%. 한 번 175px 까지 줄였다가 사용자가 "좀만 더 키우자"고 해 되올렸다).
 * 원이 작아지면 이웃 간 현도 짧아지므로(2R·sin(22.5°) = 161px) 카드도 함께 작아져야 한다 —
 * 안 그러면 카드가 서로 겹친다. 폰트·여백·아바타를 모두 줄인 이유가 그것이다. */
/* 아바타 ↔ 내용 */
.enterprise-2-page {
  /* ⚠️ `overflow`: hidden 이 이 섹션의 연출 그 자체다. 궤도의 대부분을 잘라 내는 상자가
     바로 여기다 — 지우면 원 세 개가 통째로 드러나 페이지가 무너진다. */
  /* 제목은 궤도 위로. 궤도의 중심이 전부 섹션 바깥이라 가운데는 비어 있지만,
     카드가 스쳐 지나가는 순간 글자와 겹칠 수 있으므로 층을 확실히 올린다. */
  /* ── 제목은 두 행이지만 **색은 하나다** — 진한 잉크 ──
     이 제목은 **한 문장**이다("단일 부서에서 / 감당하기 벅찬 파편화된 업무").
     한 문장을 두 색으로 칠하면 위계가 아니라 균열로 읽힌다 — 줄바꿈은 행갈이지 문단갈이가 아니다.
     ⚠️ 색을 두 번 바꿨다. 원래는 [1행 잉크 / 2행 뮤트]로 갈라져 있었고 → 사용자 지시로 둘 다
        뮤트로 통일했다가 → 다시 "진한 검정으로 복구" 지시를 받았다(2026-07-14).
        최종은 **둘 다 진한 잉크**다. '색은 하나'라는 원칙은 그대로 두고 그 하나를 잉크로 바꿨다.
     ⚠️ headingDim 은 여전히 <span> 으로 남긴다 — 색이 아니라 **줄바꿈**을 위한 것이다.
        데이터의 두 키를 하나로 합치지 마라(카피 구조는 프론트매터가 갖는다). */
  /* ── 궤도 필드 = 무대 ──
     이 상자 하나가 세 가지를 담는다: 다섯 궤도(가장자리), 빔 SVG(중간), 허브(한복판).
     쌓임 순서가 곧 이야기 순서다 —
       빔(0)  : 데이터가 지나는 길. 카드 **뒤로** 깔린다. 그래야 카드가 빔의 출발점을
                스쳐 지나갈 때 '카드에서 데이터가 떨어져 나와 길에 오른다'로 읽힌다.
       궤도(1): 걱정 카드. 길 위에 얹힌다.
       허브(2): 로고. 무엇에도 가리지 않는다 — 도착지니까. */
  /* 빔은 카드 뒤로. (.e2-beam-svg 의 position/inset 은 설계·운영 섹션이 이미 정의한다 —
     이 페이지 전체가 쓰는 클래스이므로 여기서는 쌓임 순서와 선의 무게만 정한다.) */
  /* 빔 트랙 = '길'. 궤도선과 **같은 토큰**을 쓴다(위 선의 문법 참고).
     ⚠️ 04번 카드의 빔은 기본 헤어라인(--e2-hairline-strong)으로 충분하지만, 여기 빔은
        400px 넘게 화면을 가로지르므로 그 옅기로는 유령선이 된다 — 첫 렌더에서 실제로 그랬다. */
  /* 빛은 굵게 + 번지게. 이게 '데이터가 빨려 들어간다'의 전부다 — 선은 길이고, 빛이 데이터다. */
  /* ── 궤도 위의 노드 = 빛이 태어나는 자리 (사용자 지시 2026-07-14:
         "marquee를 연결한 노드들에는 빛이 안 생김. 거기서부터 생겨서 와야 할 것 같은데") ──
     빔이 허공에서 시작하면 데이터의 **출처**가 없다. 궤도(카드들을 잇는 원) 위에 점을 찍어야
     "카드가 도는 원에서 데이터가 떨어져 나와 허브로 간다"가 한 그림이 된다.
     ⚠️ 점은 '길'이 아니라 '데이터'다 — 그래서 헤어라인 토큰이 아니라 빛의 색과 발광을 쓴다.
        여기서 선 색($e2-problem-line)을 쓰면 그냥 선 위의 얼룩이 된다. */
  /* 부푸는 헤일로 — 빔이 출발하는 순간에만. r·opacity 는 beams.js 가 매 프레임 쓴다
     (CSS 로는 '빔의 출발'이라는 타이밍을 알 수 없다). */
  /* ── 결론 문장 하이라이트 = 오로라 텍스트 (사용자 지시 2026-07-14) ──
     앞 문장이 '문제'라면 이 문장은 '답'이고, 바로 아래 무대가 그 답을 그림으로 반복한다.
     ⚠️ 형광펜 워시(배경 color-mix)를 먼저 넣었다가 걷어냈다 — 사용자 지적이 옳았다:
        "이건 오로라 텍스트 적용하면 되는거 아님?"
        이 페이지에는 이미 '흐르는 그라디언트'라는 강조 문법이 있다(.e2-auroratext, 설계·운영·
        RSU 제목). 거기에 형광펜을 새로 들이면 **강조 문법이 두 종류**가 된다.
        있는 문법을 쓰는 게 새 문법을 만드는 것보다 언제나 낫다.
     여기 남는 건 무게뿐이다 — 색은 .e2-auroratext 가 --e2-mesh-* 팔레트에서 가져온다
     (빔·궤도와 같은 토큰이라, 문장의 색이 아래 무대의 빛과 같은 색으로 흐른다). */
  /* ── 허브: 다섯 궤도가 흘려보내는 데이터가 도착하는 곳 ──
   * 궤도의 중심이 전부 섹션 바깥이라 필드 한가운데는 원래 비어 있다. 그 빈자리가 허브의 자리다 —
   * 스물넷의 걱정이 가장자리를 맴돌고, 그 한복판에 답이 하나 서 있는 구도.
   * 빔은 이 심볼에 닿기 직전에 끊긴다(beams.js) — 빛이 로고를 관통하지 않고 흡수돼야 한다. */
  /* 궤도의 '중심점'. 크기가 0인 상자이고, `place-items`: center 가 자식(카드)을 그 점에
     정확히 앉힌다 — inset 없는 absolute 는 '정상 흐름이었다면 있었을 자리'에 놓이는데,
     `place-items`: center 아래에서 그 자리가 곧 중심이다(MagicUI Orbiting Circles 의 요령).
     ⚠️ 중심이 섹션 **바깥**에 있어야 호만 보인다. 안쪽으로 들이는 순간 원 전체가 드러난다.

     ── 원근감은 scale 한 줄이 만든다 (사용자 지시: "원근감있게") ──
     궤도는 0×0 짜리 '점'이고 카드는 그 점을 중심으로 도는 절대배치 요소다. 그래서 점에
     `transform`: scale(d) 를 걸면 **반지름과 카드 크기가 동시에** 줄어든다 — 그게 곧 물리적
     원근이다(멀리 있는 원은 원이 작아 보이는 동시에 그 위의 물체도 작아 보인다).
     ⚠️ 반지름과 폰트 크기를 따로 지정해 '멀어 보이게' 흉내 내지 마라. 두 값이 반드시 어긋나고,
        그 순간 원근이 아니라 '크기가 제각각인 원들'이 된다. 다섯 궤도가 같은 반지름을 쓰는
        이유가 이것이다 — 차이는 오직 --e2-depth 가 만든다.
     ⚠️ 흐림(blur)이나 강한 페이드로 거리를 표현하지 않는다. 이 섹션은 이미 그 길로 갔다가
        되돌아왔다(위 '2차: 안개 구도' 참고 — 대비 미달로 폐기). 거리는 크기로만 말한다. */
  /* ── 궤도선: 같은 원의 카드들을 잇는다 (사용자 지시 2026-07-14:
         "한 원에 속한 각 marquee들도 연결이 되어 있어야 함") ──
     JS 가 필요 없다. 궤도는 이미 카드들의 중심점이고 반지름(--e2-orbit-radius)을 알고 있으므로,
     지름 2r 짜리 원을 그리면 그게 **정확히 카드가 지나는 경로**다. 좌표를 다시 계산할 일이 없다.
     ⚠️ 궤도에 걸린 scale(원근)이 이 원에도 그대로 적용된다 — 먼 궤도의 선은 저절로 얇고 작아진다.
        원근을 두 번 계산하지 마라(선을 따로 그리는 순간 카드와 어긋난다).
     ⚠️ inset 없는 absolute 라서 `place-items`: center 가 이 원을 중심점에 앉힌다 — 카드와 같은 요령.
     ⚠️ 점선 금지(디자인 규약). 실선 헤어라인이고, **빔 트랙과 같은 토큰**이다(위 선의 문법 참고). */
  /* 오른쪽 앞 — 가장 가까운 궤도. 중심이 오른쪽 밖이라 왼쪽 호가 섹션 안으로 들어온다. */
  /* 왼쪽 앞. 방향을 뒤집어 반대로 돈다 — 모든 궤도가 같은 방향으로 돌면 화면 양끝의 카드가
     나란히 같은 쪽으로 흘러 '한 덩어리'로 보인다. */
  /* 아래 — 중심이 아래 밖. 위쪽 호가 들어온다. 허브 바로 밑을 피해 살짝 오른쪽으로 民다:
     정확히 수직으로 놓으면 허브와의 거리가 필드 높이에 갇혀 빔이 뭉툭해진다. */
  /* 위 왼쪽 — 먼 궤도. 아래 호가 제목 옆 빈 곳으로 내려온다. */
  /* 위 오른쪽 — 먼 궤도. */
  /* 아래 왼쪽 — **가장 먼 궤도**(사용자 지시 2026-07-14: "좌측 하단에도 하나 있어야 할듯.
     좀 비어보임. 원근감으로 적용되어서 더 작게").
     궤도 3(아래 오른쪽)과 궤도 2(왼쪽) 사이가 비어 있었다 — 여섯 궤도가 허브를 빙 둘러야
     'hub-and-spoke'가 사방에서 모이는 그림이 된다. 한쪽이 비면 빔이 부챗살로 몰린다. */
  /* ── 좁은 화면: 궤도를 셋으로 줄이고 더 바깥으로 민다 ──
     ⚠️ 여섯 궤도는 **폭이 있어야** 성립한다. 375px 에서 여섯을 다 돌리면 원근이 아니라
        카드 벽이 되고(사용자 지적: "효과가 많고"), 위쪽 두 궤도(4·5)는 호가 아래로 내려와
        제목을 덮는다. 그래서 **위쪽·먼 궤도 셋을 끈다** — 남는 건 오른쪽·왼쪽·아래,
        즉 중심이 화면 밖에 있어 호만 걸치는 원래 문법에 맞는 셋뿐이다.
     ⚠️ 카드 12장이 사라지지만 콘텐츠는 잃지 않는다 — 이 필드는 aria-hidden 이고,
        걱정 24개의 원본은 아래 sr-only 목록이 갖는다.
     ⚠️ `display`: none 인 궤도의 빔도 함께 사라져야 한다. beams.js 가 카드의 getClientRects()
        가 비었는지 보고 그런 빔을 지운다 — 안 그러면 rect 가 전부 0 이라 빔이 필드
        좌상단 (0,0) 에서 튀어나온다. */
  /* ── 카드가 궤도를 돈다 ──
     각도 = 360도를 카드 수로 나눈 뒤 자기 인덱스만큼. 값(--e2-orbit-i/-n)은 파티셜이 인라인
     커스텀 프로퍼티로 넘기고(로고 밴드의 --logo-h 와 같은 계약), 계산과 선언은 여기서 한다.
     수식은 공용 @keyframes e2-orbit(_common.scss) — 설계·운영 섹션의 궤도와 같은 기계다. */
  /* 짝수 궤도는 반대로 돈다 — 다섯이 같은 방향으로 돌면 화면 곳곳의 카드가 나란히 같은 쪽으로
     흘러 '한 덩어리'로 보인다. 방향이 갈려야 서로를 지나가는 그림이 된다.
     ⚠️ 속도는 다섯 다 같다(위 $e2-problem-ring-speed 주석) — 방향만 다르다.
        반지름도 같으므로 접선 속도까지 같다: 화면 어디를 봐도 카드가 같은 빠르기로 흐른다.
        (원근 scale 이 걸린 먼 궤도는 그만큼 느려 보인다 — 그것도 원근이 하는 일이다.) */
  /* 아바타 — 부서 색은 여기(빛)에만 앉고 글자에는 닿지 않는다.
     카드 24장이 도는 면에서 글자까지 색을 가지면 그 순간 화면이 시끄러워진다.
     🚨 사진은 임시 자리표시자다(라이선스 미확인 — 파티셜 주석 참고). */
  /* ⚠️ `min-width`: 0 이 있어야 긴 걱정 문장이 flex 아이템의 기본 min-width(auto)에 걸려
     카드 폭을 밀어내지 않는다 — 폭이 밀리면 궤도 위 카드들의 크기가 제각각이 된다. */
  /* ⚠️ 높이를 못 박았으므로 넘치는 텍스트를 받아 낼 장치가 반드시 필요하다. 없으면 긴 걱정이
     카드 밖으로 삐져나와 이웃 카드 위에 글자가 겹친다(고정 높이의 고전적 사고).
     카드가 108px 로 좁아지면서 걱정 문장이 더 많이 접힌다 — clamp 를 4줄로 올린다
     ([부서명 한 줄] + [걱정 세 줄]). */
  /* 부서 5색 — currentColor 로 아바타에만 흘려보낸다 */
  /* ── 움직임을 원치 않는 사용자 ──
     궤도를 멈추면 카드 대부분이 섹션 밖에 얼어붙는다(중심이 바깥이므로) — '정지'가 아니라
     '사라짐'이다. 그래서 흐름을 멈추는 대신 **구도를 바꾼다**: 궤도를 풀고 24장을 한데 모아
     정적 필드로 만든다. 움직임은 없애되 콘텐츠는 남긴다.

     ⚠️ 허브는 카드 위를 떠 있으면 안 된다 — 궤도가 풀린 순간 '한복판'이라는 자리가 없어져
        로고가 카드 더미 위에 얹힌 스티커가 된다. 흐름에 되돌려 넣어 카드들 **위**에 세운다.
     ⚠️ 빔은 아예 그려지지 않는다(beams.js 가 inflow + reduced-motion 이면 즉시 반환한다).
        평평해진 배치에는 '원 위의 한 점'이라는 시작점이 존재하지 않으므로, 그렸다면 화면을
        가로지르는 낙서가 됐을 것이다. */
}
.enterprise-2-page .e2-problem {
  position: relative;
  overflow: hidden;
}
.enterprise-2-page .e2-problem > .e2-container {
  position: relative;
  z-index: 1;
}
.enterprise-2-page .e2-problem .e2-h2 {
  color: var(--e2-ink);
}
.enterprise-2-page .e2-problem__dim {
  display: block;
}
.enterprise-2-page .e2-problem__field {
  position: relative;
  z-index: 0;
  height: 600px;
  /* 제목 블록 아래 여백을 궤도가 먹고 들어온다. 허브가 필드 안으로 들어오면서
     제목과 심볼 사이의 108px 여백이 사라졌으므로, 여기서 조금 더 당긴다. */
  margin-top: -2.25rem;
  pointer-events: none;
  /* ⚠️ **모바일에서는 당기지 않는다.** 데스크톱에서는 궤도가 좌우로 멀리 흩어져 있어
     제목과 겹쳐도 카드가 글자 근처에 오지 않는다. 그런데 375px 에서는 가장자리가 곧
     한복판이라, -36px 겹침이 위쪽 궤도의 호를 정확히 제목 자리로 밀어 넣는다
     (사용자 지적: "효과가 많고 텍스트가 가려지고"). 텍스트에게 자기 띠를 준다. */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-problem__field {
    height: 470px;
    margin-top: 1.5rem;
  }
}
.enterprise-2-page .e2-problem__field .e2-beam-svg {
  z-index: 0;
}
.enterprise-2-page .e2-problem__field .e2-beam-track {
  stroke: color-mix(in srgb, var(--e2-ink) 13%, transparent);
  stroke-width: 1px;
}
.enterprise-2-page .e2-problem__field .e2-beam-glow {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--e2-mesh-2) 55%, transparent));
}
.enterprise-2-page .e2-problem__field .e2-beam-origin {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--e2-mesh-2) 60%, transparent));
}
.enterprise-2-page .e2-problem__field .e2-beam-pulse {
  pointer-events: none;
}
.enterprise-2-page .e2-problem__accent {
  font-weight: 600;
}
.enterprise-2-page .e2-problem__hub {
  position: absolute;
  /* 궤도 여섯이 z-index 6~1 을 쓰므로(원근 순서) 허브는 그 위에 있어야 한다.
     도착지가 지나가는 카드에 가려지면 'hub'가 아니라 '카드 더미 속의 로고'가 된다. */
  z-index: 10;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.enterprise-2-page .e2-problem__symbol {
  display: block;
  width: 108px;
  height: 108px;
  /* 심볼 뒤의 은은한 광원 — 빔이 이 빛으로 빨려 들어가는 것처럼 읽힌다.
     색은 리본 팔레트를 읽는다(빔과 같은 토큰). */
  filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--e2-mesh-2) 30%, transparent));
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-problem__symbol {
    width: 84px;
    height: 84px;
  }
}
.enterprise-2-page .e2-problem__ring {
  position: absolute;
  display: grid;
  place-items: center;
  width: 0;
  height: 0;
  transform: scale(var(--e2-depth, 1));
  /* ⚠️ 쌓임 순서가 원근의 **절반**이다. 크기만 줄이면 그냥 '작은 카드'이고,
     **가까운 것이 먼 것을 가려야** 비로소 '뒤에 있는 카드'가 된다(occlusion).
     첫 렌더에서 이걸 빠뜨렸더니 DOM 순서상 마지막인 6번 궤도(가장 먼 궤도)가 맨 앞에
     그려져 원근이 정확히 거꾸로 뒤집혔다 — 작은 카드가 큰 카드를 덮고 있었다.
     그래서 z-index 를 --e2-depth 의 역순으로 못 박는다: 가까울수록 위. */
  z-index: 1;
  --e2-orbit-radius: clamp(150px, 12.5vw, 180px);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-problem__ring {
    --e2-orbit-radius: clamp(112px, 28vw, 150px);
  }
}
.enterprise-2-page .e2-problem__ring::before {
  content: "";
  position: absolute;
  width: calc(var(--e2-orbit-radius) * 2);
  height: calc(var(--e2-orbit-radius) * 2);
  border: 1px solid color-mix(in srgb, var(--e2-ink) 13%, transparent);
  border-radius: 50%;
}
.enterprise-2-page .e2-problem__ring--1 {
  top: 46%;
  left: 98%;
  z-index: 6;
  --e2-depth: 1;
}
.enterprise-2-page .e2-problem__ring--2 {
  top: 38%;
  left: 2%;
  z-index: 5;
  --e2-depth: 0.94;
}
.enterprise-2-page .e2-problem__ring--3 {
  top: 110%;
  left: 60%;
  z-index: 4;
  --e2-depth: 0.86;
}
.enterprise-2-page .e2-problem__ring--4 {
  top: -6%;
  left: 20%;
  z-index: 3;
  --e2-depth: 0.78;
}
.enterprise-2-page .e2-problem__ring--5 {
  top: -2%;
  left: 84%;
  z-index: 2;
  --e2-depth: 0.7;
}
.enterprise-2-page .e2-problem__ring--6 {
  top: 104%;
  left: 14%;
  z-index: 1;
  --e2-depth: 0.62;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-problem__ring--1 {
    top: 42%;
    left: 114%;
  }
  .enterprise-2-page .e2-problem__ring--2 {
    top: 34%;
    left: -14%;
  }
  .enterprise-2-page .e2-problem__ring--3 {
    top: 118%;
    left: 56%;
  }
  .enterprise-2-page .e2-problem__ring--4,
  .enterprise-2-page .e2-problem__ring--5,
  .enterprise-2-page .e2-problem__ring--6 {
    display: none;
  }
}
.enterprise-2-page .e2-worrycard {
  position: absolute;
  display: flex;
  /* ⚠️ 세로 구성이다(아바타 위 / 글자 아래). 가로 구성으로는 130px 폭 안에 아바타와
     글자를 나란히 놓을 수 없다 — 글자 칸이 60px 밖에 안 남아 한 줄에 다섯 글자가 들어간다.
     그리고 **세로 구성이라야 카드가 정사각형에 가까워져 원 위의 빈틈이 고르게 된다** —
     이게 "간격이 다 다르다"는 문제의 진짜 해법이다(위 카드 크기 주석 참고). */
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
  width: 130px;
  height: 134px;
  padding: 12px;
  border: 1px solid var(--e2-hairline-soft);
  border-radius: 10px;
  background: #fff;
  /* ── 스무스 섀도 (사용자 지시 2026-07-14) ──
     단층 그림자는 '떠 있는 물체'가 아니라 '테두리가 두꺼운 사각형'으로 보인다.
     오프셋·블러를 **배수로 램프**해 다섯 겹을 겹치면(1→2→4→8→16 / 2→7→14→28→54)
     빛이 실제로 감쇠하는 곡선에 가까워져, 층이 아니라 하나의 부드러운 그늘이 된다.
     ⚠️ 알파를 층마다 낮춘다. 같은 알파로 다섯 겹을 쌓으면 그냥 진한 단층이 된다 —
        멀리 번지는 층일수록 옅어야 감쇠로 읽힌다.
     ⚠️ 궤도의 scale(원근)이 이 그림자에도 걸린다 — 먼 카드는 그림자까지 함께 작아진다.
        그게 맞다. 그림자는 물체에 딸린 것이지 화면에 딸린 게 아니다. */
  box-shadow: 0 1px 2px rgba(10, 31, 68, 0.05), 0 2px 7px rgba(10, 31, 68, 0.04), 0 4px 14px rgba(10, 31, 68, 0.035), 0 8px 28px rgba(10, 31, 68, 0.03), 0 16px 54px rgba(10, 31, 68, 0.025);
  --e2-orbit-angle: calc(360deg / var(--e2-orbit-n, 8) * var(--e2-orbit-i, 0));
  animation: e2-orbit 110s linear infinite;
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-worrycard {
    width: 116px;
    height: 120px;
  }
}
.enterprise-2-page .e2-problem__ring--2 .e2-worrycard,
.enterprise-2-page .e2-problem__ring--4 .e2-worrycard,
.enterprise-2-page .e2-problem__ring--6 .e2-worrycard {
  animation-direction: reverse;
}
.enterprise-2-page .e2-worrycard__avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, currentColor, rgba(255, 255, 255, 0.35));
}
.enterprise-2-page .e2-worrycard__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-worrycard__avatar {
    width: 24px;
    height: 24px;
  }
}
.enterprise-2-page .e2-worrycard__text {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--e2-ink-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-worrycard__text {
    font-size: 10px;
  }
}
.enterprise-2-page .e2-worrycard__name {
  color: var(--e2-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-worrycard__name {
    font-size: 10px;
  }
}
.enterprise-2-page .e2-worrycard--d1 {
  color: #ef4444;
}
.enterprise-2-page .e2-worrycard--d2 {
  color: #8b5cf6;
}
.enterprise-2-page .e2-worrycard--d3 {
  color: #2f6fe4;
}
.enterprise-2-page .e2-worrycard--d4 {
  color: #1ba58c;
}
.enterprise-2-page .e2-worrycard--d5 {
  color: #3dbd78;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-problem__field {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    margin-top: 3rem;
    justify-content: center;
    gap: 0.75rem;
  }
  .enterprise-2-page .e2-problem__ring {
    display: contents;
    transform: none;
  }
  .enterprise-2-page .e2-problem__hub {
    position: static;
    flex-basis: 100%;
    margin-bottom: 2.25rem;
    transform: none;
  }
  .enterprise-2-page .e2-worrycard {
    position: static;
    animation: none;
  }
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 02 Foundation (Stripe BucketGrid + 카드별 고유 비주얼)
 *
 * 레퍼런스: stripe.com/enterprise "Platform payments and embedded finance" 실측.
 *   카드: background #f6f9fc / border 1px #cbd6e0 / radius 8px / box-shadow **none**
 *   카드 내부 2열 57:43, gap 40px
 *   깊이는 카드가 아니라 '카드 안의 그림'이 갖는다 — 카드는 납작한 프레임일 뿐이다.
 *   링크는 필: radius 4px(캡슐 아님), 액센트 5% 워시 배경.
 *
 * ⚠️ 네 카드의 골격은 같고 다른 건 그림뿐이다. 한때 지구 카드만 항목이 좌측에 있고 나머지는
 *    우측 흰 패널에 있어 뼈대가 갈렸다 — 그건 '그림이 다른 것'이 아니라 '뼈대가 다른 것'이라
 *    같은 섹션에서 카드 한 장만 어긋나 보였다. 흰 패널은 통째로 걷어냈다: 그건 그림이 아니라
 *    텍스트를 담은 상자였고, Stripe 의 그림은 카드의 주장을 시각화한다.
 *
 * ⚠️ 같은 페이지의 아이콘 그리드(→ 커버리지 섹션)와는 정반대의 문법이다. 거기는 테두리도
 *    배경도 그림자도 0 이고, 여기는 테두리 있는 틴트 카드다. 둘을 섞으면 둘 다 죽는다.
 * ──────────────────────────────────────────────────────────── */
/* 좌측 하단 메시 삼각형 — 흰 면이 이어지는 구간에 색을 한 번 놓아 페이지를 환기한다.
 * 직각은 좌하단 꼭짓점에 온다: (0,위) → (0,아래) → (오른쪽,아래).
 * ⚠️ 색은 반드시 --e2-mesh-* 를 읽는다(히어로 셰이더 uC1~uC3 · CTA 오로라와 같은 토큰). */
/* 카드 프레임 — Stripe 실측값의 우리 팔레트 대응.
   #f6f9fc(틴트) → 아래 값, #cbd6e0(테두리) → 네이비를 옅게 푼 헤어라인. */
/* ── sticky 사이드바 (Stripe BucketGrid 의 나머지 절반) ──
   폭은 카드 안쪽 그림(300px)보다 살짝 좁게 잡는다 — 사이드바가 주인공이 아니라 곁다리 증거이므로,
   카드 안의 그림보다 크면 시선이 먼저 그리로 간다.
   top 은 고정 네비 높이 + 숨 쉴 틈이다. 0 으로 두면 sticky 가 네비 뒤로 파고든다. */
/* ── '촤르륵' — 포개진 덱이 펼쳐지는 동작 ──
   gather-*: 포개져 있을 때의 어긋남(오른쪽으로 살짝, 작게, 부챗살로).
   `deal`:     한 장이 자기 자리로 가는 시간. `stagger`: 장 사이의 시차 — **이 시차가 '촤르륵'의 정체다**
             (0 이면 세 장이 동시에 펴져 '뿅' 하고 나타나는 것과 구별되지 않는다).
   ⚠️ $e2-found-story-gap 은 .e2-found__sticky 의 gap 과 **반드시 같아야 한다**. 포갬 계산이
      translateY(-i × (100% + gap)) 이라, 둘이 어긋나면 카드가 정확히 겹치지 않는다. */
/* ── 스탯 카드 (Stripe 문법: 틴트 카드를 숫자 하나가 가득 채운다) ──
   ⚠️ 크기는 사이드바 폭(280px)이 정한다. "16,500명"은 일곱 글자라 Stripe 의 "300K+"(다섯 글자)
      보다 길다 — 원본 크기를 그대로 베끼면 카드 밖으로 삐져나간다. 안쪽 폭(280 - 좌우 패딩)에
      일곱 글자가 들어가는 값이 아래다. **레퍼런스의 크기는 레퍼런스의 글자 수와 한 쌍이다.**
   radius 는 bucket 카드(8px)보다 크게 — 카드가 크고 안이 비어 있어 8px 은 각져 보인다. */
/* 그림 칸의 정사각 무대. 네 그림(빔·궤도·지구)이 모두 이 상자 안에서 산다 —
   상자를 하나로 못 박아 두지 않으면 카드마다 그림 높이가 달라져 카드 높이가 들쭉날쭉해진다. */
/* 정원 노드의 지름. 아이콘 20px 를 담고도 숨이 남는 최소치이자,
   무대(300px) 안에서 세 개가 가로로 서도 붙지 않는 최대치다. */
/* 궤도 반지름. 무대(300px)의 절반(150)에서 노드의 절반 높이(원 48/2 + 라벨·간격 ≈ 42)만큼
   물러난 값 — 더 키우면 라벨이 무대 밖으로 나가 카드에 잘린다. */
.enterprise-2-page {
  /* 삼각형이 섹션 좌하단에 절대 배치되므로 기준점을 만든다.
     isolation 으로 쌓임 맥락을 닫아 삼각형(`z-index`: 0)이 이웃 섹션 아래로 새지 않게 한다. */
  /* ── 헤드라인 블록 — Stripe 실측: 좌측 정렬, 본문 max-width 810px, 아이브로우 없음 ── */
  /* 제목 1행 — 뮤트. 아우라 텍스트가 이 안에 들어온다(색은 CTA·셰이더와 같은 토큰). */
  /* ── 버킷 카드 ── */
  /* ── BucketGrid 의 진짜 골격: [카드 열 | sticky 사이드바] ──
     ⚠️ 한때 사이드바 없이 카드만 뒀다. 그러면 카드가 컨테이너 폭(1200px)을 통째로 먹어
        Stripe 의 비대칭 그리드가 아니라 그냥 '넓은 카드 4장'이 된다(사용자 지적).
        사이드바는 곁다리 장식이 아니라 **레이아웃의 절반**이다 — 그게 있어야 카드가 좁아진다.
     카드 안쪽 그림(.e2-found__viz)은 width:100% + aspect-ratio:1 이고 지구는 offsetWidth 를
     다시 읽으므로(globe.js), 열이 좁아져도 안전하다. */
  /* ── sticky 사이드바 ──
     카드 열을 스크롤하는 내내 따라붙는다: "이렇게 만든다"(좌) 옆에 "이렇게 쓰고 있다"(우).
     ⚠️ `position`: sticky 는 **부모가 자기보다 커야** 작동한다. .e2-found__body 에
        `align-items`: start 가 없으면 그리드 아이템이 stretch 되어 사이드바 높이가 카드 열과
        같아지고, 그러면 붙어 있을 여분이 없어 sticky 가 아무 일도 하지 않는다(고전적 사고).
     ⚠️ 헤더 높이만큼 띄운다 — 0 으로 두면 고정 네비 뒤로 파고든다. */
  /* ── 인터뷰 카드 — 히어로 덱이 여기로 와서 촤르륵 펼쳐진다 ──
   * 사용자 지시(2026-07-14): "고객 사례로 아예 새로운게 나오는게 아니라, 첫 Hero에 있던게
   * 스크롤 좀 내리면 어디선가 구석에 작게 모여있다가 촤르륵 정렬되면 좋겠음."
   *
   * 섹션 사이를 잇는 FLIP 애니메이션 같은 건 필요 없다. **같은 카드**(같은 인터뷰·같은 썸네일)를
   * 히어로 덱처럼 **포개 놓고 펼치면** 뇌가 "아까 그 덱이구나"를 알아서 이어 붙인다.
   *
   * 포갬은 translateY(-i × (100% + gap)) 하나로 끝난다 — 각 카드를 자기 높이만큼 위로 끌어
   * 올려 0번 카드 자리에 겹친다. **카드 높이를 JS 로 잴 필요가 없다**: transform 의 % 는
   * 자기 자신의 높이를 뜻하기 때문이다. 그래서 제목 길이가 달라져도 포갬이 어긋나지 않는다.
   *
   * ⚠️ 회전은 (i - 1) × 각도라 가운데(i=1)가 0° 다 — 손에 쥔 카드처럼 좌우로 부챗살이 된다.
   * ⚠️ transform-origin 을 위쪽에 둔다. 가운데면 카드가 제자리에서 빙글 돌고, 위쪽이라야
   *    한 점에 매달려 부채처럼 펴진다.
   * ⚠️ 이 카드에는 data-reveal="item" 을 달지 않는다(파티셜 주석 참고) — 공통 등장 모션의
   *    transform 과 여기 transform 이 서로를 덮어쓴다. --i 만 받고 움직임은 여기서 만든다. */
  /* 펼쳐진 상태 — 촤르륵. 시차가 '차르륵'의 정체다(동시에 펴지면 그냥 '뿅'이다). */
  /* ⚠️ 호버는 반드시 .is-revealed 아래에 둔다. 밖에 두면 위 규칙(.e2-found__aside.is-revealed
     .e2-found__story, 특정도 0-3-0)이 :hover(0-2-0)를 이겨 호버 transform 이 통째로 죽는다. */
  /* 움직임을 원치 않는 사용자: 포개지 않는다. 카드는 처음부터 제자리에 있다 —
     '촤르륵'은 움직임이고, 없어져도 잃을 콘텐츠가 없다. */
  /* 카드는 썸네일 하나뿐이다(사용자 지시) — 회사명·제목 블록은 걷어냈다.
     그래서 카드의 높이는 곧 이 비율이다. 16:9 로 못 박아 세 장의 높이를 같게 만든다:
     포갬 계산(translateY(-i × (100% + gap)))이 카드 높이가 같다는 전제 위에 서 있다. */
  /* ── 스탯 카드 (Stripe /enterprise 의 사이드바 스탯 문법) ──
     사이드바의 두 번째 증거다: 위가 "누가 쓰는가"(썸네일), 여기가 "얼마나 쓰는가"(수치).
     구조는 [틴트 카드 = 거대 숫자 하나] → [카드 **밖** 아래 = 설명]. 설명을 카드 안에 넣으면
     '숫자와 캡션이 든 상자'가 되지, 숫자가 주인공인 그림이 아니다.
     ⚠️ 값은 이 페이지가 지어낸 게 아니라 홈(data/main/counts.json)과 **같은 데이터**를 읽는다. */
  /* 틴트 카드 — bucket 카드와 같은 재질(같은 틴트·헤어라인·그림자 없음)이라 식구로 읽힌다.
     숫자와 라벨이 **카드 안에서 한 덩어리로** 가운데 정렬된다(사용자 지시). */
  /* ── 거대 숫자 — 검은 잉크 (사용자 지시 2026-07-14) ──
   * ⚠️ 그라디언트 텍스트(`background-clip`: text)를 걸었다가 **뺐다**. 되살리지 마라.
   *    이 섹션 안에는 이미 그라디언트 글자가 있고("6주" 카운트), 사이드바 숫자까지 흐르면
   *    한 화면에서 강조가 강조를 잡아먹는다. 숫자는 크기와 무게로 이미 충분히 크다 —
   *    색까지 쓸 필요가 없다. (같은 이유로 이 섹션 제목의 아우라도 뺐다.)
   * ⚠️ `tabular-nums`: 숫자가 도는 동안 글자 폭이 제각각이면 값이 덜덜 떨린다(1 은 0 보다 좁다). */
  /* 라벨 — 숫자 **밑**, 카드 **안**, 가운데(사용자 지시).
     ⚠️ 부모(.e2-found__stat-card)가 아니라 여기서 색을 다시 정해야 한다. 부모는 배경이지만
        숫자 형제가 -webkit-text-fill-color: transparent 를 쓰고 있어, 라벨이 그 규칙을
        상속받지 않도록 확실히 자기 색을 갖는다. */
  /* 카드 = 납작한 프레임. 그림자 없음(Stripe 실측: box-shadow none).
     깊이는 안쪽 그림이 갖는다 — 프레임과 그림 둘 다 떠 있으면 층위가 뭉개진다. */
  /* 리드 2행 — 앞 행은 뮤트, 강조 행은 잉크 굵게 */
  /* ── 항목 — 네 카드 모두 좌측 본문 아래에 있다(우측은 그림의 자리다) ── */
  /* 행 사이 구분선 — 실선 + 그라디언트(양끝 페이드). 점선 금지(스킬).
     ⚠️ border-image 로 하지 않는다: 네 변에 한꺼번에 적용되므로 "위쪽만 1px" 를 만들려면
     나머지 변의 width 를 0 으로 맞춰 두는 요령에 의존하게 되고, 그건 다음 사람이
     padding/border 를 건드리는 순간 조용히 깨진다. ::before 한 겹이 명시적이다. */
  /* ── 필 링크 (Stripe BucketLink) ──
     radius 4px 다. 캡슐(999px)로 만들면 '태그'(읽는 것)로 읽히고, 작은 사각형이라야
     '누를 수 있는 것'으로 읽힌다 — Stripe 가 이 자리에서만 캡슐을 안 쓰는 이유다. */
  /* ────────────────────────────────
   * 그림 — 카드마다 다르다. 각 그림이 그 카드의 주장 그 자체다.
   * 무대(정사각 300px)는 공통이다: 상자를 하나로 못 박아 두지 않으면 카드마다 그림 높이가
   * 달라져 카드 높이가 들쭉날쭉해진다.
   * ──────────────────────────────── */
  /* ── 지구 (MagicUI Globe → globe.js + 벤더링한 cobe) ──
     ⚠️ 정사각형이어야 한다. cobe 는 캔버스를 정사각형으로 가정하고 구를 그린다 —
        가로세로가 다르면 지구가 타원이 된다(무대의 aspect-ratio 가 이걸 보장한다). */
  /* WebGL 실패 — globe.js 가 붙인다. 빈 캔버스가 흰 구멍으로 남는 것보다,
     그림 칸을 통째로 접고 텍스트만 남기는 편이 낫다. */
  /* ── 궤도 (MagicUI Orbiting Circles) ──
   * 의존성 0. 움직임은 전부 아래 @keyframes 다.
   *
   * ⚠️ 노드가 `position`: absolute 인데 inset 을 주지 않는 게 핵심이다. inset 없는 absolute 는
   *    '정상 흐름이었다면 있었을 자리'에 놓이는데, 부모가 `place-items`: center 이므로 그 자리가
   *    곧 중심이다. 즉 좌표를 계산하지 않고도 모든 노드가 정확히 중심에서 출발한다.
   *    (MagicUI 원본이 쓰는 요령 그대로다. `inset`: 0 을 주는 순간 이 마법이 깨진다.)
   *
   * ⚠️ 회전을 두 번 건다. 바깥 rotate 가 노드를 궤도에 태우고, 안쪽 rotate 가 정확히 같은 각을
   *    되돌려 글자를 수평으로 세운다. 되돌리지 않으면 글자가 궤도를 따라 물구나무를 선다. */
  /* ── 중심 노드 = ZUZU 심볼 (사용자 지시 2026-07-14) ──
   * ⚠️ 로고는 페이지 팔레트에 복종하지 않는다. 중심을 인디고 색면으로 칠하고 심볼을 흰색으로
   *    뒤집을 수도 있었지만 그건 로고를 다시 칠하는 짓이다. 흰 원 위에 원색 심볼을 얹고,
   *    '중심'이라는 사실은 색이 아니라 **인디고 글로우와 크기**로 말한다.
   *    (이 페이지에서 걷어낸 초록은 '리딩 텍스트'의 초록이지 브랜드 마크의 초록이 아니다.)
   * 궤도 노드도 흰 알약이므로, 중심은 더 크고(56px 원) 더 강한 그림자로 층위를 만든다. */
  /* ⚠️ 그림자는 **스무스 섀도**다 — 한 겹을 진하게가 아니라 여러 겹을 옅게 쌓는다.
     블러·오프셋을 대략 배수로 늘리며 투명도를 낮춘 램프(1 → 3 → 6 → 12 → 24 → 44px)를
     겹쳐야 빛이 서서히 잦아드는 자연스러운 그늘이 된다. 3겹으로는 램프가 얕아 원이
     '떠 있는 물체'가 아니라 '테두리 있는 스티커'로 읽힌다(사용자 지적, 2026-07-14).
     마지막 한 겹은 그림자가 아니라 인디고 헤일로다 — 이 원이 다이어그램의 중심임을
     색면이 아니라 빛으로 말한다. */
  /* ── 정원 노드 (사용자 지시 2026-07-14: "이런 뱃지들이 원형을 유지하게. 정원.") ──
   *
   * ⚠️ 정원을 유지하면서 글자를 잃지 않는 방법은 라벨을 원 **밖으로** 빼는 것뿐이다.
   *    원 안에 "킥오프"를 넣으려면 원이 커지거나 글자가 작아져야 하고, 둘 다 원의 무게를 망친다.
   *    MagicUI 의 Orbiting Circles / Animated Beam 도 원 안에는 아이콘만 넣는다.
   *
   * ⚠️ 원은 `aspect-ratio: 1` 이 아니라 width/height 를 같은 값으로 **못 박는다**.
   *    aspect-ratio 는 콘텐츠(아이콘)가 상자를 늘리면 그대로 늘어난다 — 정원이 보장되지 않는다.
   *    `flex`: 0 0 auto 도 함께: 부모가 flex 라 shrink 가 걸리면 원이 타원이 된다. */
  /* 라벨 — 원 밖 아래. 원이 도형이고 라벨은 이름표다.
     nowrap 이 중요하다: "킥오프"가 두 줄로 갈라지면 원 아래 무게가 흔들려 정원이 안 정렬돼 보인다. */
  /* 노드 아이콘 — 공용 스트로크 아이콘(stat-icon.html)을 16px 로 줄여 알약 안에 넣는다.
     색은 액센트다: 아이콘이 잉크색이면 글자와 같은 무게로 읽혀 알약이 통째로 뭉개진다.
     작은 색점 하나가 '무엇에 관한 것인지'를 글자보다 먼저 말한다. */
  /* 로고 노드 (미래에셋·삼성증권) — 아이콘 대신 실제 로고. 사용자 지시다.
     은행 글리프 두 개를 나란히 놓으면 두 증권사가 구분되지 않고, 무엇보다 "연동돼 있다"는
     건 은유할 게 아니라 그 회사의 마크로 증명할 일이다.
     ⚠️ 로고 알약에는 글자를 쓰지 않는다 — 로고가 이미 그 이름이다(파티셜 주석 참고).
     좌우 패딩을 아이콘 알약보다 좁게 잡아 로고가 상자 안에서 숨 쉬게 한다. */
  /* 높이는 로고마다 다르다 — 프론트매터가 --node-logo-h 로 넘긴다. 바운딩 박스가 아니라
     '잉크 면적' 기준의 시각 보정값이다(로고 밴드의 --logo-h 와 같은 원리): 삼성증권은 한 줄
     볼드 워드마크라 같은 높이에서 훨씬 크게 읽히고, 미래에셋은 2행(영문+국문)이라 같은
     높이에서 국문 줄이 뭉개진다. 박스 기준으로 맞추면 나란히 놓았을 때 크기가 어긋나 보인다.
     값은 데이터가, 선언은 여기가 갖는다. */
  /* 아이콘 알약과 로고 알약의 높이를 맞춘다 — 세로로 늘어선 네 노드의 높이가 제각각이면
     빔이 닿는 지점이 들쭉날쭉해져 다이어그램이 흔들려 보인다.
     ⚠️ --pill 에만 건다. 정원 노드에 min-height 를 걸면 원이 늘어나 타원이 된다. */
  /* 카드 위에 마우스를 올리면 궤도가 멈춘다 — 읽으려는 사람 앞에서 글자가 도망가면 안 된다. */
  /* ── 빔 (MagicUI Animated Beam → beams.js) ──
     SVG 패스는 beams.js 가 노드의 실제 좌표에서 계산해 그린다 — 좌표를 CSS 로 못 박아 두면
     글자 길이가 바뀌거나 폰트가 로드되는 순간 선이 노드를 빗나간다(한글은 특히 폭이 들쭉날쭉하다). */
  /* SVG 는 노드 뒤에 깔린다 — 선이 노드를 가로지르면 노드가 '선 위의 정거장'이 아니라
     '선에 찔린 상자'로 보인다. */
  /* SVG 빔은 z-index 0 에 깔리고 노드가 그 위에 선다 — 선이 노드를 가로지르면
     노드가 '선 위의 정거장'이 아니라 '선에 찔린 상자'로 보인다. */
  /* 알약 노드 — 로고가 들어가는 카드(04)에서만 쓴다. 로고는 정원에 못 들어간다. */
  /* 허브형 — 좌측에 중심(ZUZU 심볼), 우측에 대외 기관들이 세로로 늘어선다. */
  /* ── 카운트다운 (01 설계 카드) ──
   * 숫자가 100 에서 6 으로 굴러떨어지고, 그 아래를 프로세스 빔이 흐른다.
   * 숫자가 '얼마나 빨리'를, 빔이 '무엇을 거쳐'를 말한다.
   *
   * ⚠️ 무대를 세로 스택으로 바꾼다(다른 그림은 `place-items`: center 로 가운데에 한 덩어리).
   *    숫자와 빔이 한 자리를 두고 겹치면 안 되기 때문이다. */
  /* ── 그라디언트 텍스트 (사용자 지시 2026-07-14) ──
   * 색은 아우라 텍스트·CTA 오로라·셰이더와 **같은 토큰**을 읽는다(--e2-mesh-*).
   * 색을 여기 다시 적으면 팔레트가 또 한 군데로 갈라진다 — 이 페이지는 그 사고를 이미 겪었다.
   *
   * ⚠️ `background-clip`: text 는 배경을 글자 모양으로 자르는 것이라, 배경이 **요소 상자 기준**으로
   *    그려진다. 숫자와 단위를 각각 잘라내면 그라디언트가 각자 처음부터 다시 시작해 둘의 색이
   *    이어지지 않는다(6 과 주 사이에서 색이 툭 끊긴다). 그래서 클립은 부모(.e2-found__count)가
   *    한 번만 걸고, 자식은 색을 상속받지 않고 **투명하게 비켜선다**(-webkit-text-fill-color).
   *
   * ⚠️ 폴백 color 를 반드시 둔다. `background-clip`: text 미지원 브라우저에서는
   *    -webkit-text-fill-color 도 무시되므로 이 색이 그대로 보인다 — 안 두면 글자가 검게 나온다. */
  /* ⚠️ 한때 `min-width`: 3ch + `text-align`: right 를 걸었다. 100 → 6 으로 굴러떨어지는 동안
     자릿수가 3 → 1 로 줄면서 옆의 '주' 가 끌려와 떨리는 걸 막으려던 것이었다.
     **그게 정렬을 깨뜨렸다**(사용자 지적: "왜 중앙 정렬이 안 되어 있지").
     애니메이션이 끝난 최종 상태는 "6" 한 글자다 — 세 칸짜리 상자 안에 한 글자만 우측 정렬로
     남으니, 상자는 정확히 가운데인데 **잉크는 두 칸만큼 오른쪽으로 쏠린다**(80px 폰트에서 ~40px).
     1.5초짜리 애니메이션의 미세한 흔들림을 막으려고 **영구적인 어긋남**을 산 셈이다.
     사람이 보는 건 최종 상태다. 폭 예약을 걷어내고, 자릿수가 줄면 그룹이 자연스럽게 다시
     가운데를 잡게 둔다(tabular-nums 덕에 같은 자릿수 안에서는 여전히 흔들리지 않는다). */
  /* 프로세스 빔 — 카운트다운 아래에 가로로 눕는다. 노드가 셋이라 300px 안에 들어간다. */
}
.enterprise-2-page .e2-found {
  position: relative;
  isolation: isolate;
}
.enterprise-2-page .e2-found__mesh {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 50%;
  height: 33.3333%;
  pointer-events: none;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  /* 메시 = 여러 개의 radial 블롭을 겹친 색장(色場). 단일 linear-gradient 는 '띠'로 읽히지
     '메시'로 읽히지 않는다 — 서로 다른 위치·반경의 블롭이 겹쳐야 색이 뭉쳐 흐른다.
     ⚠️ 투명도를 SCSS 의 rgba() 로 주려면 색 리터럴이 필요해서 --e2-mesh-* 를 못 쓴다.
        그래서 color-mix() 로 CSS 단계에서 섞는다 — 토큰을 그대로 읽으면서 알파를 얻는
        유일한 방법이다. 여기서 편하다고 hex 를 다시 박으면 팔레트가 또 두 군데로 갈라진다. */
  background: radial-gradient(60% 70% at 12% 92%, color-mix(in srgb, var(--e2-mesh-1) 42%, transparent) 0%, transparent 62%), radial-gradient(55% 60% at 42% 100%, color-mix(in srgb, var(--e2-mesh-2) 40%, transparent) 0%, transparent 66%), radial-gradient(70% 80% at 78% 96%, color-mix(in srgb, var(--e2-mesh-3) 50%, transparent) 0%, transparent 70%), #fff;
}
.enterprise-2-page .e2-found > .e2-container {
  position: relative;
  z-index: 1;
}
.enterprise-2-page .e2-found__head {
  max-width: 810px;
  margin-bottom: 3.5025rem; /* 56px */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-found__head {
    margin-bottom: 2.4975rem;
  }
}
.enterprise-2-page .e2-found__heading {
  /* 광학 행잉 — 좌측 정렬 대형 제목. 이유는 $e2-optical-hang 주석(_common.scss). */
  margin: 0 0 0 -0.75%;
  color: var(--e2-ink);
  font-size: clamp(1.875rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.enterprise-2-page .e2-found__dim {
  display: block;
  color: var(--e2-ink-muted);
}
.enterprise-2-page .e2-found__lede {
  margin: 1.125rem 0 0;
  color: var(--e2-ink-muted);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.enterprise-2-page .e2-found__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem;
  /* ⚠️ `align-items`: start 를 걸지 마라. 걸어 봤다가 sticky 가 통째로 죽었다(실측:
     aside 높이 850px = sticky 높이 850px → 붙어 있을 거리가 0).
     그리드에서 sticky 자식은 **부모 그리드 아이템 상자 안에서만** 움직인다. start 를 주면
     aside 상자가 내용 높이로 쪼그라들어 여행할 거리가 사라진다.
     기본값(stretch)이라야 aside 상자가 카드 열만큼 길어지고, 그 안에서 sticky 가 산다.
     ⚠️ `position`: sticky 가 걸렸는지만 확인하면 이 버그를 못 잡는다 — 높이를 재야 보인다. */
}
@media screen and (max-width: 1180px) {
  .enterprise-2-page .e2-found__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.enterprise-2-page .e2-found__buckets {
  display: grid;
  gap: 1.5rem; /* 24px — Stripe 실측 */
  min-width: 0;
}
.enterprise-2-page .e2-found__sticky {
  position: sticky;
  top: 96px;
  display: grid;
  /* ⚠️ 카드의 포갬 계산(translateY(-i × (100% + gap)))이 이 값을 그대로 쓴다.
     숫자를 여기 따로 적지 마라 — 어긋나는 순간 카드가 정확히 겹치지 않는다. */
  gap: 1.125rem;
}
.enterprise-2-page .e2-found__story {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(10, 31, 68, 0.13);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  /* 포개진 상태 — 구석에 작게 모여 있다 */
  transform: translate(16px, calc(-1 * var(--i, 0) * (100% + 1.125rem))) scale(0.78) rotate(calc((var(--i, 0) - 1) * 5deg));
  transform-origin: 50% 0;
  /* 포갠 동안은 앞 카드가 위에 온다(덱의 문법). 펼쳐진 뒤에는 아무 영향이 없다. */
  z-index: calc(9 - var(--i, 0));
  box-shadow: 0 6px 20px rgba(10, 31, 68, 0.08);
  transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 820ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.enterprise-2-page .e2-found__aside.is-revealed .e2-found__story {
  transform: none;
  /* 자기 자리에 앉으면 그림자를 버린다 — bucket 카드가 그림자 없는 납작한 프레임이라
     (Stripe 실측) 사이드바만 떠 있으면 같은 섹션의 식구로 안 읽힌다.
     그림자는 '포개져 떠 있던 동안'의 것이지 최종 상태의 것이 아니다. */
  box-shadow: none;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.enterprise-2-page .e2-found__aside.is-revealed .e2-found__story:hover {
  border-color: color-mix(in srgb, var(--e2-highlight) 40%, rgba(10, 31, 68, 0.13));
  transform: translateY(-2px);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-found__story {
    transform: none;
    box-shadow: none;
    transition: border-color 200ms ease;
  }
}
.enterprise-2-page .e2-found__story-thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f6f8fb;
}
.enterprise-2-page .e2-found__story-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.enterprise-2-page .e2-found__stats {
  display: grid;
  gap: 1.875rem;
  margin-top: 0.75rem;
}
.enterprise-2-page .e2-found__stat-card {
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 2.625rem 1.125rem;
  border: 1px solid rgba(10, 31, 68, 0.13);
  border-radius: 12px;
  background: #f6f8fb;
  text-align: center;
}
.enterprise-2-page .e2-found__stat-num {
  color: var(--e2-ink);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.enterprise-2-page .e2-found__stat-label {
  margin-top: 0.5625rem;
  color: var(--e2-ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.enterprise-2-page .e2-found__bucket {
  display: grid;
  grid-template-columns: 57fr 43fr;
  align-items: center;
  gap: 2.4975rem; /* 40px */
  padding: 3rem 2.4975rem;
  border: 1px solid rgba(10, 31, 68, 0.13);
  border-radius: 8px;
  background: #f6f8fb;
  /* 궤도 링과 빔이 무대 밖으로 삐죽 나가도 카드가 잘라 준다. */
  overflow: hidden;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-found__bucket {
    /* Stripe 실측: 모바일에서 그림이 위로 올라가고 1열이 된다. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.875rem;
    padding: 2.25rem;
  }
}
.enterprise-2-page .e2-found__copy {
  min-width: 0;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-found__copy {
    order: 2;
  }
}
.enterprise-2-page .e2-found__title {
  margin: 0;
  color: var(--e2-ink);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  word-break: keep-all;
}
.enterprise-2-page .e2-found__title-dim {
  display: block;
  color: var(--e2-ink-muted);
  font-weight: 600;
}
.enterprise-2-page .e2-found__support {
  max-width: 46ch;
  margin: 1.125rem 0 0;
  color: var(--e2-ink-muted);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  word-break: keep-all;
}
.enterprise-2-page .e2-found__rows {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.enterprise-2-page .e2-found__rowitem {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 0.9375rem;
  word-break: keep-all;
}
.enterprise-2-page .e2-found__rowitem + .e2-found__rowitem::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--e2-hairline-strong) 12%, var(--e2-hairline-strong) 88%, transparent 100%);
}
.enterprise-2-page .e2-found__rowitem b {
  color: var(--e2-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.enterprise-2-page .e2-found__rowitem span {
  color: var(--e2-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.enterprise-2-page .e2-found__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
  margin-top: 1.875rem;
}
.enterprise-2-page .e2-found__pill {
  padding: 0.375rem 0.9975rem 0.5025rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--e2-highlight) 6%, transparent);
  color: var(--e2-highlight);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  word-break: keep-all;
  transition: background-color 160ms ease;
}
.enterprise-2-page .e2-found__pill:hover {
  background: color-mix(in srgb, var(--e2-highlight) 12%, transparent);
}
.enterprise-2-page .e2-found__viz {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  justify-self: center;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-found__viz {
    order: 1;
    max-width: 260px;
  }
}
.enterprise-2-page .e2-found__globe-canvas {
  width: 100%;
  height: 100%;
  /* globe.js 가 첫 프레임을 그린 뒤 1 로 올린다 — WebGL 초기화 중의 검은 사각형을 감춘다. */
  opacity: 0;
  transition: opacity 500ms ease;
  /* 캔버스는 매 프레임 다시 그려진다. 레이아웃·페인트를 자기 상자 안에 가둬
     부모 카드의 리플로우를 유발하지 않게 한다(원본 MagicUI 도 같은 처방). */
  contain: layout paint size;
}
.enterprise-2-page .e2-found__viz.is-globe-failed {
  display: none;
}
.enterprise-2-page .e2-found__orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.enterprise-2-page .e2-found__orbit-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid var(--e2-hairline-strong);
  border-radius: 50%;
}
.enterprise-2-page .e2-found__orbit-hub,
.enterprise-2-page .e2-found__beam-hub {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--e2-hairline-soft);
  background: #fff;
  box-shadow: 0 1px 1px rgba(10, 31, 68, 0.04), 0 2px 3px rgba(10, 31, 68, 0.05), 0 4px 7px -1px rgba(10, 31, 68, 0.06), 0 8px 14px -2px rgba(10, 31, 68, 0.07), 0 16px 28px -6px rgba(10, 31, 68, 0.09), 0 32px 54px -12px rgba(10, 31, 68, 0.12), 0 0 0 6px color-mix(in srgb, var(--e2-mesh-1) 7%, transparent);
}
.enterprise-2-page .e2-found__hub-symbol {
  display: block;
  width: 28px;
  height: 28px;
}
.enterprise-2-page .e2-found__orbit-node {
  position: absolute;
  /* 각도 = 360도를 노드 수로 나눈 뒤 자기 인덱스만큼. 값(--e2-orbit-i/-n)은 파티셜이
     인라인 커스텀 프로퍼티로 넘기고, 계산과 선언은 여기서 한다(인라인 스타일 금지 규칙).
     반지름은 공용 keyframe(e2-orbit, _common.scss)이 읽는다 — 같은 기계를 문제 섹션의
     걱정 카드 링도 쓰므로, 수식은 한 곳에 두고 값만 각자 넘긴다. */
  --e2-orbit-angle: calc(360deg / var(--e2-orbit-n, 3) * var(--e2-orbit-i, 0));
  --e2-orbit-radius: 100px;
  animation: e2-orbit 26s linear infinite;
}
.enterprise-2-page .e2-found__beam-node--circle,
.enterprise-2-page .e2-found__orbit-node--circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.enterprise-2-page .e2-found__node-dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--e2-hairline-soft);
  background: #fff;
  color: var(--e2-highlight);
  /* 스무스 섀도 — 원이 면에서 떠 있어야 '정거장'으로 읽힌다. 단층이면 스티커다. */
  box-shadow: 0 1px 1px rgba(10, 31, 68, 0.04), 0 2px 3px rgba(10, 31, 68, 0.05), 0 5px 9px -2px rgba(10, 31, 68, 0.07), 0 12px 20px -6px rgba(10, 31, 68, 0.09);
}
.enterprise-2-page .e2-found__node-dot svg {
  width: 20px;
  height: 20px;
}
.enterprise-2-page .e2-found__node-label {
  color: var(--e2-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.enterprise-2-page .e2-found__node-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--e2-highlight);
}
.enterprise-2-page .e2-found__node-icon svg {
  width: 16px;
  height: 16px;
}
.enterprise-2-page .e2-found__beam-node--logo,
.enterprise-2-page .e2-found__orbit-node--logo {
  padding-inline: 0.6225rem;
}
.enterprise-2-page .e2-found__node-logo {
  display: block;
  height: var(--node-logo-h, 22px);
  width: auto;
  max-width: 96px;
  object-fit: contain;
}
.enterprise-2-page .e2-found__beam-node--pill {
  min-height: 38px;
}
.enterprise-2-page .e2-found__bucket:hover .e2-found__orbit-node {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-found__orbit-node {
    /* 멈추되 사라지지 않는다 — 금지되는 건 '움직임'이지 '그림'이 아니다.
       궤도 위 제자리에 정지한 다이어그램이 된다. */
    animation: none;
    transform: rotate(var(--e2-orbit-angle)) translateY(var(--e2-orbit-radius)) rotate(calc(var(--e2-orbit-angle) * -1));
  }
}
.enterprise-2-page .e2-found__beam {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.enterprise-2-page .e2-beam-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.enterprise-2-page .e2-found__beam-node {
  position: relative;
  z-index: 1;
}
.enterprise-2-page .e2-found__beam-node--pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.9375rem 0.375rem 0.6225rem;
  border-radius: 999px;
  border: 1px solid var(--e2-hairline-soft);
  background: #fff;
  color: var(--e2-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(10, 31, 68, 0.05), 0 4px 10px -2px rgba(10, 31, 68, 0.08);
}
.enterprise-2-page .e2-found__beam--hub {
  justify-content: space-between;
  gap: 1.5rem;
}
.enterprise-2-page .e2-found__beam-col {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-end;
}
.enterprise-2-page .e2-found__viz--countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
}
.enterprise-2-page .e2-found__count {
  display: flex;
  margin: 0;
  align-items: baseline;
  justify-content: center;
  gap: 0.375rem;
  line-height: 1;
  color: var(--e2-highlight);
  background-image: linear-gradient(120deg, var(--e2-mesh-1) 0%, var(--e2-mesh-2) 42%, var(--e2-mesh-ink) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.enterprise-2-page .e2-found__count-num {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.enterprise-2-page .e2-found__count-unit {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.enterprise-2-page .e2-found__beam--row {
  flex-direction: row;
  height: auto;
  align-items: center;
  justify-content: space-between;
}

/* ⚠️ @keyframes e2-orbit 은 _common.scss 로 올라갔다. 문제 섹션의 걱정 카드 링도 같은 기계를
   쓰기 때문이다(마키가 원 궤도로 바뀌었다) — 반지름은 --e2-orbit-radius 로 각자 정한다.
   같은 수식을 두 파일에 적어 두면 한쪽만 고쳐져 어긋나는 건 시간문제다. */
/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 04 증권사 연동 (sticky 사진 무대 + 흰 카드 3장)
 *
 * 레퍼런스: apple.com/kr/apple-watch-series-11 "건강 / 자신의 몸 상태를 심도 있게" 실측.
 * 패럴랙스가 아니다 — 사진은 1:1 로 스크롤되다 sticky 로 핀 고정되고, 카드가 얹히는
 * 구간에서만 베일이 blur+brightness 로 사진을 배경으로 강등시킨다.
 * 진행도(--e2-veil-*)는 veil.js 가 쓰고, 렌더링은 전부 여기 있다.
 *
 * ⚠️ 이 무대는 원래 커버리지 섹션의 것이었다(2026-07-14 사용자 지시로 이사).
 *    커버리지는 Stripe 아이콘 그리드가 됐고, 사진은 여기로 왔다.
 *
 * 층 구조:
 *   __media (sticky, 100vh)               사진 + 베일
 *   __flow  (`margin-top`: -100vh)          텍스트 무대(100vh) → 숨 고르기 → 카드 무대
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page {
  /* ── 사진 무대 — 첫 자식이 sticky, 콘텐츠가 -100vh 로 되끌려 올라와 그 위를 흐른다 ── */
  /* ── 사진 + 베일 — Apple 실측: 진입 blur(0) brightness(1) → 카드 구간 blur(20px)
     brightness(0.6) 이 스크롤에 연동 보간된다.
     ⚠️ Apple 은 오버레이의 backdrop-filter 로 만들지만, WebKit(사파리 엔진)에서
     sticky 무대 위 backdrop-filter 가 계산값만 있고 실제로 그려지지 않는 것을
     픽셀 실측으로 확인했다(375 `WebKit`: 카드 자리 대비 1.2:1 = 원본 사진 그대로).
     베일이 사진만 정확히 덮는 구조라 사진 레이어의 filter 로 그림이 동일하다 —
     전 브라우저 공통으로 이 방식을 쓴다.
     filter 의 기본값이 곧 최종(어두운) 상태다 — JS 가 없거나 reduced-motion 이면
     보간 없이 이 상태로 고정된다(흰 카드 가독성이 연출보다 우선). */
  /* ── 콘텐츠 흐름 — sticky 무대 위로 되끌려 올라온다 ──
     ⚠️ `z-index`: 1 이 스크림의 안전망이다. flow 가 쌓임 맥락을 만들어야
     스크림(`z-index`: -1)이 flow 바닥까지만 내려가고 사진 뒤로 빠지지 않는다. */
  /* ── 텍스트 무대 — 사진과 1:1 로 함께 스크롤되는 첫 화면 ── */
  /* 우측 절반이 텍스트 컬럼 — 인물(좌)의 반대편 네거티브 스페이스. */
  /* 순백 + 스무스 텍스트 섀도. 사진은 밝은 곳과 어두운 곳이 섞여 있으므로
     그늘 그라디언트만으로는 부족하다 — 이 텍스트 섀도가 흰 글자의 두 번째 보험이다
     ($e2-veil-text-shadow 주석 참고: 단층이 아니라 4겹 램프여야 테두리로 안 읽힌다).
     첫 행은 조금 물러선다 — 원래 이 페이지 문법에서 heading 은 뮤트, headingAccent 가
     강조였다. 사진 위에서는 색으로 위계를 줄 수 없으므로(어떤 색도 사진과 싸운다)
     불투명도로 나눈다. */
  /* 둘째 행이 핵심 주장이다 — 순백으로 앞선다. */
  /* ── 카드 무대 — 핀 고정된 사진 위로 흘러 올라온다 ──
     margin-top 이 '사진 단독 주인공' 숨 고르기 구간이다. */
  /* 4행(태그 / 스탯 / 제목 / 본문)을 격자에 선언하고, 각 카드가 subgrid 로 그 행을 '공유'한다.
     그래야 세 카드의 태그·스탯·제목·본문이 같은 선에서 시작한다.

     ⚠️ 이게 필요한 이유: 1열(계좌 개설)에는 statValue 가 없다. 카드마다 독립적으로 높이를
     쌓으면(=보통의 flow) 스탯이 없는 카드는 제목이 스탯 자리로 올라와 베이스라인이 어긋난다
     ("전사 임직원에 한 번에 개설"이 "90%↓" 높이에 앉는 버그가 실제로 있었다).
     빈 슬롯에 min-height 를 주는 방법도 있지만 그건 매직 넘버라 폰트가 바뀌면 다시 깨진다.
     subgrid 는 행 높이를 '세 카드 중 가장 큰 콘텐츠'가 정하게 하므로 스스로 맞는다.
     세 카드의 패딩이 동일하므로 패딩이 만드는 오프셋도 셋 다 같아 정렬이 유지된다. */
  /* 카드 — 플랫 화이트. 어두워진 사진 위라 헤어라인 + 네이비 그림자 램프가 경계를 만든다.
     ⚠️ 예전엔 카드가 아니라 헤어라인으로 나뉜 '조용한 컬럼'이었다. 흰 캔버스 위에서는
     그게 맞았지만, 바닥이 사진이 된 지금 헤어라인만으로는 글자가 사진 위에 그냥 떠 있게 된다.
     바닥이 바뀌면 부품도 바뀌어야 한다. */
  /* 스탯 슬롯.
     ⚠️ 한때 `justify-content`: flex-end 였다. 그때는 1열(계좌 개설)에 statValue 가 없어서,
     내용을 '아래로' 붙여야 스탯 블록의 밑선이 세 카드에서 맞았다. 2026-07-14 사용자가
     그 빈칸에 "All in one"을 넣으면서 세 카드가 모두 스탯을 갖게 됐고, 그 순간 기준선이
     뒤집혔다: 이제 맞춰야 하는 건 밑선이 아니라 **거대 숫자의 윗선**이다. flex-end 를
     그대로 뒀다면 캡션이 두 줄인 카드(MTS)만 숫자가 위로 밀려 올라가 어긋났을 것이다.
     (슬롯을 항상 렌더하는 계약 자체는 유지한다 — 나중에 다시 빈 카드가 생겨도 subgrid 가
      행을 지켜 준다.) */
  /* 거대 스탯 — 이 섹션의 주인공. 순검정 대신 네이비 잉크 — 페이지의 파랑 언어와 잇는다. */
  /* 카드가 솔리드 흰색이라 바닥이 이미 밝다 — 제목은 잉크색만으로 충분히 읽히고
     다크 글로우 텍스트섀도는 필요 없다(그건 사진 위 글자의 처방이다). */
}
.enterprise-2-page .e2-brok {
  position: relative;
  padding: 0;
  background: var(--e2-accent-base-lo);
  isolation: isolate;
}
.enterprise-2-page .e2-brok__media {
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100vh;
  pointer-events: none;
}
.enterprise-2-page .e2-brok__photo {
  position: absolute;
  /* blur(최대 20px)가 가장자리 바깥을 샘플링해 투명하게 새지 않도록
     사진을 무대보다 사방으로 키워 둔다(넘침은 __media 가 자른다). */
  inset: -48px;
  background-image: url("/assets/img/enterprise/coverage-bg.jpg");
  /* 인물을 왼쪽으로 밀어 텍스트·카드 뒤에 얼굴이 정면으로 걸리지 않게 한다 —
     텍스트가 앉는 오른쪽이 네거티브 스페이스가 된다. */
  background-position: 22% 32%;
  background-size: cover;
  /* ⚠️ grayscale 은 blur/brightness 체인에 '덧붙이는' 것이지 대체하는 게 아니다.
     이 filter 는 veil.js 가 스크롤 진행도로 보간하는 베일이라(--e2-veil-*),
     통째로 갈아치우면 sticky 무대의 blur/brightness 연출이 통째로 죽는다.
     순서도 의미가 있다: 채도를 먼저 없앤 뒤 흐리고 어둡게 한다. */
  filter: grayscale(1) blur(var(--e2-veil-blur, 20px)) brightness(var(--e2-veil-bright, 0.6));
}
.enterprise-2-page .e2-brok__flow {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
}
.enterprise-2-page .e2-brok__headstage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  /* ── 그늘 — 무대 전체를 가로지르는 방향성 그라디언트 ──
   *
   * ⚠️ 한때 텍스트 뒤에만 어두운 상자(.e2-brok__scrim)를 깔았다. 사용자가 "배경색을
   *    이상하게 넣는다"고 지적했고, 정확한 지적이다: 사진 위의 국소 스크림은 아무리
   *    부드럽게 페이드해도 '상자'가 드러난다. 상자 안팎에서 사진의 밝기가 다르니
   *    경계선이 눈에 보인다 — 페이드를 늘리면 흐려질 뿐 사라지지 않는다.
   *
   * 영화 포스터와 Apple 이 쓰는 해법은 반대다: 상자를 없애고 무대 '전체'를 덮는
   * 방향성 그라디언트를 깐다. 왼쪽(인물)은 투명, 오른쪽(텍스트 자리)은 어둡게.
   * 무대 전체를 덮으므로 잘릴 경계가 아예 존재하지 않는다. 사진은 살고 글자는 읽힌다.
   *
   * `z-index`: -1 — 부모(.e2-brok__flow)가 z-index:1 로 쌓임 맥락을 만들어 두었으므로
   * 이 값은 flow 바닥까지만 내려간다(sticky 사진 뒤로 빠지지 않는다).
   *
   * mask 로 아래쪽을 페이드한다. 안 그러면 무대 바닥(100vh)에서 그늘이 뚝 끊겨
   * 사진을 가로지르는 수평선이 생긴다 — 없앤 상자의 아랫변이 되살아나는 셈이다.
   * (위쪽은 섹션의 시작선과 겹치므로 페이드가 필요 없다.) */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__headstage {
    /* 좁은 화면에선 인물이 화면을 채우므로 텍스트를 바닥에 앉힌다
       (그늘도 아래에서 차오르는 방향으로 바뀐다 — ::before). */
    align-items: flex-end;
    padding-block-end: 6rem;
  }
}
.enterprise-2-page .e2-brok__headstage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 6%, rgba(4, 9, 26, 0.22) 32%, rgba(4, 9, 26, 0.62) 56%, rgba(4, 9, 26, 0.84) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__headstage::before {
    /* 좁은 화면은 텍스트가 바닥에 앉으므로 그늘도 아래에서 차오른다.
       가로 방향 그라디언트는 의미가 없다 — 사진이 화면을 꽉 채우기 때문. */
    background: linear-gradient(to top, rgba(4, 9, 26, 0.9) 0%, rgba(4, 9, 26, 0.7) 38%, rgba(4, 9, 26, 0.3) 66%, transparent 92%);
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.enterprise-2-page .e2-brok__headgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__headgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.enterprise-2-page .e2-brok__headcol {
  position: relative;
  grid-column: 2;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__headcol {
    grid-column: 1;
  }
}
.enterprise-2-page .e2-brok__heading {
  margin: 0 0 0 -0.75%;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
  text-shadow: 0 1px 2px rgba(4, 9, 26, 0.4), 0 2px 6px rgba(4, 9, 26, 0.32), 0 6px 16px rgba(4, 9, 26, 0.28), 0 12px 32px rgba(4, 9, 26, 0.22);
  word-break: keep-all;
}
.enterprise-2-page .e2-brok__heading-accent {
  display: block;
  color: #fff;
}
.enterprise-2-page .e2-brok__lede {
  max-width: 38ch;
  margin: 1.875rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.62;
  text-shadow: 0 1px 2px rgba(4, 9, 26, 0.5);
  word-break: keep-all;
}
.enterprise-2-page .e2-brok__cardstage {
  position: relative;
  margin-top: 68vh;
  padding-block: 0 9rem;
  /* 등장: 하나의 물체로 도착 (타자기식 순차 등장 금지) */
  opacity: 0;
  transform: translateY(34px) scale(0.988);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  /* 내부 카드는 26ms 마이크로 스태거로 질감만 준다 — 공용 70ms 를 그대로 두면
     카드 3장이 차례로 켜지는 타자기 연출이 된다. */
}
.enterprise-2-page .e2-brok__cardstage.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.enterprise-2-page .e2-brok__cardstage [data-reveal=item] {
  transition-delay: calc(var(--i, 0) * 26ms + 140ms);
  transition-duration: 600ms;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-brok__cardstage {
    opacity: 1;
    transition: none;
    transform: none;
  }
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__cardstage {
    padding-block: 0 6rem;
  }
}
.enterprise-2-page .e2-brok__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  align-items: start;
  gap: 1.125rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__grid {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
}
.enterprise-2-page .e2-brok__col {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  padding: 1.875rem;
  border-radius: 28px;
  border: 1px solid var(--e2-hairline-strong);
  background: #fff;
  box-shadow: 0 2px 3px rgba(10, 31, 68, 0.04), 0 7px 9px rgba(10, 31, 68, 0.05), 0 14px 18px rgba(10, 31, 68, 0.06), 0 28px 35px rgba(10, 31, 68, 0.08);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-brok__col {
    display: block;
  }
}
.enterprise-2-page .e2-brok__tag {
  color: var(--e2-highlight);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  word-break: keep-all;
}
.enterprise-2-page .e2-brok__statbox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.enterprise-2-page .e2-brok__stat {
  margin-top: 1.125rem;
  color: #16233f;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.enterprise-2-page .e2-brok__stat-caption {
  margin-top: 0.5625rem;
  color: var(--e2-ink-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  word-break: keep-all;
}
.enterprise-2-page .e2-brok__title {
  margin-top: 1.5rem;
  color: var(--e2-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
}
.enterprise-2-page .e2-brok__body {
  margin-top: 0.75rem;
  color: var(--e2-ink-muted);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  word-break: keep-all;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 03 RSU `Flow`: 3단계 스탯 컬럼
 * 탭 폐기 — 세 단계를 그라디언트 구분선의 컬럼으로 나란히 펼친다.
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page {
  /* en 라벨 (Grant / Manage / Settle) — 작은 캡스, 뮤트 */
}
.enterprise-2-page .e2-rsu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-rsu__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
}
.enterprise-2-page .e2-rsu__col {
  position: relative;
  padding-inline: 2.25rem;
}
.enterprise-2-page .e2-rsu__col::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--e2-hairline-strong) 28%, var(--e2-hairline-strong) 72%, transparent 100%);
  content: "";
}
.enterprise-2-page .e2-rsu__col:first-child {
  padding-inline-start: 0;
}
.enterprise-2-page .e2-rsu__col:first-child::before {
  content: none;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-rsu__col {
    padding-inline: 0;
  }
  .enterprise-2-page .e2-rsu__col::before {
    content: none;
  }
}
.enterprise-2-page .e2-rsu__en {
  margin-top: 1.125rem;
  color: var(--e2-ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.enterprise-2-page .e2-rsu__name {
  margin-top: 2px;
  color: var(--e2-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}
.enterprise-2-page .e2-rsu__line {
  margin-top: 0.9375rem;
  color: var(--e2-ink-muted);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  word-break: keep-all;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 06 보안 (sticky 영상 무대 + 흰 카드 6장)
 *
 * 증권사 연동 섹션(.e2-brok)과 **같은 무대 문법**이다(사용자 지시). 다른 건 배경이 사진이 아니라
 * 영상이라는 것 하나뿐이다. 베일(--e2-veil-*)은 veil.js 가 쓰고 렌더링은 전부 여기 있다 —
 * veil.js 는 배경이 사진인지 영상인지 모른다. 그저 섹션에 숫자를 쓸 뿐이고, 그 숫자를 무엇에
 * 거는지는 CSS 가 정한다. 그래서 영상 섹션이 하나 늘어도 veil.js 의 로직은 그대로다.
 *
 * ⚠️ 텍스트가 **좌측**이다(증권사는 우측). 두 가지 이유가 겹친다:
 *    ① 이 영상은 왼쪽(노트북·그늘)이 어둡고 오른쪽에 얼굴이 온다 — 글자는 어두운 쪽에 앉아야 한다.
 *    ② 앞 무대(증권사)가 우측이라, 좌우가 번갈아 오며 페이지에 리듬이 생긴다.
 *    좌우가 바뀌면 그늘 그라디언트의 방향도 함께 뒤집어야 한다(아래 __headstage::before).
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page {
  /* ── 영상 무대 — 첫 자식이 sticky, 콘텐츠가 -100vh 로 되끌려 올라와 그 위를 흐른다 ── */
  /* ⚠️ blur(최대 20px)가 가장자리 바깥을 샘플링해 투명하게 새지 않도록 영상을 무대보다
     사방으로 키워 둔다(넘침은 __media 가 자른다). 사진 무대와 같은 처방이다.
     ⚠️ `object-fit`: cover 가 필수다. <video> 는 내재 종횡비를 지키므로, 빼먹으면 16:9 영상이
     100vh 무대 안에서 늘어나거나(width/height 100%) 레터박스로 앉는다.
     ⚠️ filter 의 기본값이 곧 최종(어두운) 상태다 — JS 가 없거나 reduced-motion 이면
     보간 없이 이 상태로 고정된다. 흰 카드의 가독성이 연출보다 우선이다.
     grayscale 은 증권사 사진 무대와 같은 처방이다 — 두 무대의 재질이 갈리면 리듬이 깨진다. */
  /* ── 콘텐츠 흐름 — sticky 무대 위로 되끌려 올라온다 ──
     `z-index`: 1 이 쌓임 맥락을 만들어야 그늘(::before, `z-index`: -1)이 flow 바닥까지만
     내려가고 영상 뒤로 빠지지 않는다. */
  /* 좌측 절반이 텍스트 컬럼 — 영상의 어두운 쪽. */
  /* 순백 + 스무스 텍스트 섀도. 영상은 프레임마다 밝기가 바뀌므로 — 사진보다 더 위험하다 —
     그늘 그라디언트만으로는 부족하다. 이 4겹 램프가 흰 글자의 두 번째 보험이다.
     첫 행은 조금 물러선다: 색으로 위계를 줄 수 없으니(어떤 색도 영상과 싸운다) 불투명도로 나눈다. */
  /* 둘째 행이 핵심 주장이다 — 순백으로 앞선다. */
  /* ── 카드 무대 — 핀 고정된 영상 위로 흘러 올라온다 ──
     margin-top 이 '영상 단독 주인공' 숨 고르기 구간이다. */
  /* 카드 — 플랫 화이트. 어두워진 영상 위라 헤어라인 + 네이비 그림자 램프가 경계를 만든다.
     ⚠️ 예전엔 카드가 아니라 맨 컬럼(아이콘 타일 + 제목 + 본문)이었다. 흰 캔버스 위에서는
     그게 맞았지만, 바닥이 영상이 된 지금 맨 글자는 영상 위에 그냥 떠 있게 된다.
     바닥이 바뀌면 부품도 바뀌어야 한다(증권사 섹션과 같은 판단). */
  /* 아이콘 — 듀오톤, 타일 없이 맨몸(커버리지 섹션과 같은 문법).
     ⚠️ 크기를 여기서 반드시 정한다. duo-icon.html 은 viewBox 만 갖고 width/height 속성이
     없어서, 담는 쪽이 크기를 안 주면 브라우저 기본값(300×150)으로 그려진다 — 실제로 한 번
     카드를 통째로 잡아먹었다. 커버리지(40px)보다 한 단계 작다: 여기 카드는 3열이라 아이콘이
     제목보다 무거워지면 안 된다. */
  /* primary(ISMS) 는 제목이 액센트 — 색 하나가 "이게 인증의 핵심"을 말한다. */
  /* 공식 인증 마크(ISMS). 인증 마크는 글자를 읽히려는 게 아니라 "공식 인증이 있다"는 신호라,
     34px 에서도 제 일을 한다 — 안에 든 세 줄 텍스트가 안 읽혀도 상관없다.
     ⚠️ 로고에 색 보정을 걸지 않는다(grayscale·opacity 금지). 인증 마크는 발급 기관의 것이고,
     페이지 팔레트에 복종시키는 순간 그건 인증 마크가 아니라 우리 장식이 된다. */
}
.enterprise-2-page .e2-sec {
  position: relative;
  isolation: isolate;
  /* ⚠️ 여기에 overflow 를 hidden 으로 주면 안 된다 — 조상이 스크롤 컨테이너가 되는 순간 sticky 가
     뷰포트가 아니라 그 상자를 기준으로 붙어 핀 고정이 통째로 죽는다. */
  /* 영상 로드 전·블리드 가장자리에서 흰 캔버스가 비치지 않게 어두운 바닥을 깐다.
     poster 조차 못 뜨는 찰나에도 섹션이 흰 구멍으로 번쩍이지 않는다. */
  background: var(--e2-accent-base-lo);
  /* .e2-section 의 상하 패딩을 쓰지 않는다 — 무대 높이는 100vh 단위가 정한다. */
  padding: 0;
}
.enterprise-2-page .e2-sec__media {
  position: sticky;
  top: 0;
  height: 100vh;
  /* 영상 블리드와 blur 번짐을 무대 안에 가둔다 — sticky 요소 '자신'의 overflow 는
     핀 고정과 무관하다(문제는 조상뿐). */
  overflow: hidden;
  pointer-events: none;
}
.enterprise-2-page .e2-sec__video {
  position: absolute;
  inset: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  object-fit: cover;
  filter: grayscale(1) blur(var(--e2-veil-blur, 20px)) brightness(var(--e2-veil-bright, 0.6));
}
.enterprise-2-page .e2-sec__flow {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
}
.enterprise-2-page .e2-sec__headstage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  /* ── 그늘 — 무대 전체를 가로지르는 방향성 그라디언트 ──
   * 국소 스크림(텍스트 뒤에만 까는 어두운 상자)은 쓰지 않는다. 아무리 부드럽게
   * 페이드해도 상자 안팎의 밝기 차 때문에 경계선이 드러난다 — 증권사 섹션에서 겪었다.
   * 무대 전체를 덮으면 잘릴 경계가 아예 없다.
   * ⚠️ 증권사와 방향이 **반대**다(좌측이 어둡다). 글자가 왼쪽에 앉기 때문이다.
   *
   * mask 로 아래쪽을 페이드한다. 안 그러면 무대 바닥(100vh)에서 그늘이 뚝 끊겨
   * 영상을 가로지르는 수평선이 생긴다. */
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-sec__headstage {
    align-items: flex-end;
    padding-block-end: 6rem;
  }
}
.enterprise-2-page .e2-sec__headstage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(80deg, rgba(4, 9, 26, 0.86) 0%, rgba(4, 9, 26, 0.66) 42%, rgba(4, 9, 26, 0.26) 68%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-sec__headstage::before {
    /* 좁은 화면은 텍스트가 바닥에 앉으므로 그늘도 아래에서 차오른다. */
    background: linear-gradient(to top, rgba(4, 9, 26, 0.9) 0%, rgba(4, 9, 26, 0.7) 38%, rgba(4, 9, 26, 0.3) 66%, transparent 92%);
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.enterprise-2-page .e2-sec__headgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-sec__headgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.enterprise-2-page .e2-sec__headcol {
  grid-column: 1;
}
.enterprise-2-page .e2-sec__heading {
  /* 광학 행잉 — 좌측 정렬 대형 제목. 이유는 $e2-optical-hang 주석(_common.scss). */
  margin: 0 0 0 -0.75%;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.03em;
  word-break: keep-all;
  text-shadow: 0 1px 2px rgba(4, 9, 26, 0.4), 0 2px 6px rgba(4, 9, 26, 0.32), 0 6px 16px rgba(4, 9, 26, 0.28), 0 12px 32px rgba(4, 9, 26, 0.22);
}
.enterprise-2-page .e2-sec__heading-accent {
  display: block;
  color: #fff;
}
.enterprise-2-page .e2-sec__lede {
  max-width: 42ch;
  margin: 1.875rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.62;
  word-break: keep-all;
  text-shadow: 0 1px 2px rgba(4, 9, 26, 0.5);
}
.enterprise-2-page .e2-sec__cardstage {
  position: relative;
  margin-top: 68vh;
  padding-block: 0 9rem;
  /* 등장: 하나의 물체로 도착 (타자기식 순차 등장 금지) */
  opacity: 0;
  transform: translateY(34px) scale(0.988);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.enterprise-2-page .e2-sec__cardstage.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.enterprise-2-page .e2-sec__cardstage [data-reveal=item] {
  transition-delay: calc(var(--i, 0) * 26ms + 140ms);
  transition-duration: 600ms;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-sec__cardstage {
    opacity: 1;
    transition: none;
    transform: none;
  }
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-sec__cardstage {
    padding-block: 0 6rem;
  }
}
.enterprise-2-page .e2-sec__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-sec__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-sec__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.enterprise-2-page .e2-sec__col {
  display: flex;
  flex-direction: column;
  padding: 1.875rem;
  border-radius: 28px;
  border: 1px solid var(--e2-hairline-strong);
  background: #fff;
  box-shadow: 0 2px 3px rgba(10, 31, 68, 0.04), 0 7px 9px rgba(10, 31, 68, 0.05), 0 14px 18px rgba(10, 31, 68, 0.06), 0 28px 35px rgba(10, 31, 68, 0.08);
}
.enterprise-2-page .e2-sec__icon {
  display: block;
  margin-bottom: 0.375rem;
}
.enterprise-2-page .e2-sec__icon .e2-duo {
  width: 36px;
  height: 36px;
}
.enterprise-2-page .e2-sec__title {
  display: flex;
  margin-top: 1.3125rem;
  align-items: center;
  /* 제목이 길어 접히면 마크가 다음 줄로 내려간다 — 마크가 제목을 밀어내지 않게. */
  flex-wrap: wrap;
  gap: 0.5625rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--e2-ink);
  word-break: keep-all;
}
.enterprise-2-page .e2-sec__title.is-primary {
  color: var(--e2-highlight);
}
.enterprise-2-page .e2-sec__badge {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 34px;
}
.enterprise-2-page .e2-sec__body {
  margin-top: 0.5625rem;
  color: var(--e2-ink-muted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  word-break: keep-all;
}

/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 07 `FAQ`: 미니멀 아코디언
 * 네이티브 <details> — JS 0. 박스 없이 그라디언트 헤어라인으로만 행을 나눈다.
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page {
  /* 마커 — + 가 열리면 × 로 돈다. 두 획을 도형으로 그려 폰트에 기대지 않는다. */
}
.enterprise-2-page .e2-faq__list {
  max-width: 860px;
}
.enterprise-2-page .e2-faq__item {
  position: relative;
  padding-block: 1.875rem;
}
.enterprise-2-page .e2-faq__item + .e2-faq__item::before {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--e2-hairline-strong) 12%, var(--e2-hairline-strong) 88%, transparent 100%);
  content: "";
}
.enterprise-2-page .e2-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--e2-ink);
  word-break: keep-all;
  /* 브라우저 기본 disclosure 삼각형 제거 */
}
.enterprise-2-page .e2-faq__q::-webkit-details-marker {
  display: none;
}
.enterprise-2-page .e2-faq__marker {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.enterprise-2-page .e2-faq__marker::before, .enterprise-2-page .e2-faq__marker::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: rgba(10, 31, 68, 0.55);
  border-radius: 1px;
}
.enterprise-2-page .e2-faq__marker::before {
  width: 16px;
  height: 1.5px;
}
.enterprise-2-page .e2-faq__marker::after {
  width: 1.5px;
  height: 16px;
}
.enterprise-2-page .e2-faq__item[open] .e2-faq__marker {
  transform: rotate(45deg);
}
.enterprise-2-page .e2-faq__a {
  max-width: 64ch;
  margin-top: 1.125rem;
  color: var(--e2-ink-muted);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.75;
  word-break: keep-all;
}
@media (prefers-reduced-motion: reduce) {
  .enterprise-2-page .e2-faq__marker {
    transition: none;
  }
}

/* 디자인 토큰($e2-*)은 common 모듈에 산다. */
/* ────────────────────────────────────────────────────────────
 * Enterprise v2 — 최하단 CTA
 *
 * 히어로와 동일한 .e2-bleed 블록을 공유한다. 페이지를 열었던 통짜 그린으로
 * 다시 닫아 수미상관을 만든다. 색·글로우는 .e2-bleed 가 이미 갖고 있으므로
 * 여기서는 여백만 정의한다.
 * ──────────────────────────────────────────────────────────── */
.enterprise-2-page {
  /* 1424×528 (2.70:1). 히어로(1.87:1)보다 납작하다 —
     페이지를 여는 블록과 닫는 블록의 무게를 의도적으로 다르게 준 것이다. */
}
.enterprise-2-page .e2-cta {
  padding-block: 6rem 0.75rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-cta {
    padding-block: 3.75rem 0.75rem;
  }
}
.enterprise-2-page .e2-cta__bleed {
  min-height: 528px;
  padding-block: 3.75rem;
}
@media screen and (max-width: 992px) {
  .enterprise-2-page .e2-cta__bleed {
    min-height: 0;
    padding-block: 4.5rem;
  }
}
.enterprise-2-page .e2-cta__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.enterprise-2-page .e2-cta__title {
  max-width: 860px;
  color: var(--e2-on-accent);
}
.enterprise-2-page .e2-cta__title-line {
  display: block;
}
@media screen and (max-width: 480px) {
  .enterprise-2-page .e2-cta__title-line {
    display: inline;
    /* 히어로 제목과 같은 처방 — inline 전환 시 행 경계 단어가 붙지 않게 생성 공백 */
  }
  .enterprise-2-page .e2-cta__title-line:not(:last-child)::after {
    content: " ";
  }
}
.enterprise-2-page .e2-cta__body {
  max-width: 56ch;
  margin-top: 1.5rem;
  color: var(--e2-on-accent-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  word-break: keep-all;
}
.enterprise-2-page .e2-cta__actions {
  display: flex;
  margin-top: 2.625rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/*# sourceMappingURL=page-solutions-enterprise.css.map */