@charset "UTF-8";
:root {
  --baseUnit: 0.75rem;
  --gutter: 2.25rem;
  --xs: 375px;
  --sm: 480px;
  --md: 992px;
  --lg: 1180px;
  --xl: 1920px;
  /* ── 듀오톤 아이콘 3색 (녹색, 로고 충실) — duotone-icon.html 이 읽는다 ──
     밝은 녹색(본체) → 짙은 녹색(뱃지) → 더 짙은 녹색(교집합·앵커)의 명도 램프.
     흰 캔버스에서 밝은 녹색만으론 대비가 빠듯하므로(≈1.9:1) 가장 어두운
     교집합 톤이 그래픽 대비(≥3:1)를 담당한다. 상세: DESIGN.md "Duotone Icon System".
     엔터프라이즈(/solutions/enterprise/)는 mesh 팔레트를 쓰므로 자기 스코프에서
     이 --zz-duo-* 를 mesh 값으로 덮어쓴다(_common.scss). */
  --zz-duo-bg: #60d084; /* 밝은 녹색 — 본체(가장 넓음)        대비 ~1.9:1 */
  --zz-duo-fg: #4aa570; /* 짙은 녹색(#4aa570) — 뱃지(중간) 대비 ~3.0:1 */
  --zz-duo-x: rgb(58.2092050209, 129.7907949791, 88.10041841); /* 더 짙은 녹색 — 교집합·앵커  대비 ~4:1+ */
  /* 경고(warning) 듀오톤 — 개념(녹색)과 시맨틱을 가르는 앰버 2톤.
     alert-triangle·file-warning 전용. 밝은 앰버(본체) + 짙은 앰버(느낌표).
     뱃지는 체크가 아니라 느낌표. 짙은 앰버가 그래픽 대비를 담당한다. */
  --zz-duo-warn-bg: #fcd34d; /* 밝은 앰버 — 본체 */
  --zz-duo-warn-x: #b45309; /* 짙은 앰버 — 느낌표 (밝은 본체 위 강한 대비) */
}

/* 다크 섹션(네비·CTA 등) 위에서는 밝은 녹색이 지배하도록 반전.
   셀렉터는 코드베이스 다크 표준(_color.scss / dark-theme-mixins)과 정렬한다. */
.zz-bg-black,
.zz-bg-black-dim,
.zz-bg-dark {
  --zz-duo-bg: #8fe3ab;
  --zz-duo-fg: #60d084;
  --zz-duo-x: #c9f5da;
  /* 경고 앰버 — 다크 섹션에서도 본체가 지배하고 느낌표가 읽히도록 유지 */
  --zz-duo-warn-bg: #fbbf24;
  --zz-duo-warn-x: #7c2d12;
}

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 아이콘 문법 — 공용 duotone-icon.html) ──
     Stripe 는 배경도형/전경도형/교집합에 각각 다른 색을 주고, 교집합을 clipPath 로 잘라
     한 번 더 칠해 '반투명 합성'을 불투명 3색으로 흉내낸다. 알파를 안 쓰므로 어떤 바닥
     위에서도 색이 변하지 않는다.
     ⚠️ 새 hue 를 만들지 않는다 — 히어로 리본(메시)의 색 경로를 명도 순서대로 그대로 쓴다.
     밝은 끝이 본체, 중간이 뱃지, 어두운 끝이 교집합이다(교집합이 가장 어두워야 '겹쳐서
     진해졌다'로 읽힌다. 반대로 두면 겹친 자리가 오히려 튀어 보인다). */
  /* 엔터프라이즈는 사이트 공용 duotone-icon.html 을 쓰되 mesh 팔레트를 유지한다 —
     공용 파티셜이 읽는 --zz-duo-* 를 이 스코프에서 mesh 로 덮어쓴다(녹색이 아니라 mesh). */
  --zz-duo-bg: var(--e2-mesh-3); /* 연분홍 — 흰 배경 대비 1.6:1 */
  --zz-duo-fg: var(--e2-mesh-2); /* 바이올렛 — 3.1:1 */
  --zz-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;
}

/* ────────────────────────────────────────────────────────────
 * 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;
}

#content.zz-overflow-x-hidden {
  overflow-x: clip;
}

.enterprise-2-page {
  --zz-duo-bg: #60d084;
  --zz-duo-fg: #4aa570;
  --zz-duo-x: rgb(58.2092050209, 129.7907949791, 88.10041841);
  --e2-highlight: rgb(58.2092050209, 129.7907949791, 88.10041841);
}

/*# sourceMappingURL=page-home-security.css.map */