/* ==========================================================================
   두 갈래(Solutions) → AI 개발 방법론(ADD) 이어받기
   --------------------------------------------------------------------------
   두 갈래 섹션이 고정된 채, 글과 카드 두 장이 왼쪽으로 빠지고 배경이 어두워지면서
   ADD 의 세 덩어리(제목 · 판/단계 · 버튼)가 오른쪽에서 차례로 들어온다.

   ⚠️ 켜고 끄는 법 — 자리 계산과 타임라인은 전부 two-hand.js 에 있다.
      그 파일(과 이 파일)의 <link>·<script> 를 지우면 지금까지의 화면이 그대로 돌아온다.
      이 파일은 **켜졌을 때만** 쓰이는 규칙만 담는다. 클래스는 JS 가 붙인다
      (`.xc-two--hand` · `.xc-add--hand`) — 1024 이하·모션 최소화에서는 안 붙는다.

   ⚠️ 배경을 여기서 칠하지 않는다. 이 구간은 흰 바탕 고정이고(2026-08-28), 그 전에는
      물듦 배경막(--xc-stain · .xc-veil)이 칠했다. 어느 쪽이든 이 파일이 낄 자리가 아니다 —
      두 겹으로 칠하면 경계가 생긴다. 경위는 docs/HANDOFF-2026-08-28-라이트.md
   ========================================================================== */

/* 고정되는 상자. 화면 하나만큼이라야 ADD 가 들어와 앉는 자리와 맞는다
   (ADD 의 .xc-add__pin 도 100dvh 다. 둘이 어긋나면 이어받는 순간 위아래로 튄다). */
.xc-two__pin {
  min-height: 100dvh;
  display: flex; align-items: center;
  /* ⚠️ 좌우 이탈을 **여기서** 자른다. .xc-two 에 두면 안 된다 — 크롬은
     overflow: clip 이 걸린 조상이 position: fixed 자손까지 자르는 경우가 있어
     고정된 상자가 통째로 사라진다. 자르는 자리는 고정되는 상자 자신이어야 한다.
     ⚠️ 세로는 열어 둔다. 카드 그림자가 위아래로 나간다. */
  overflow-x: clip; overflow-y: visible;
}
.xc-two__pin > .xc-area { width: 100%; }

/* 섹션 자신은 자르지 않는다(위 주석). 고정 상자가 이미 자른다.
   ⚠️⚠️ 위아래 섹션 여백을 없앤다. 여백이 남으면 **고정이 그만큼 늦게 시작**하고,
      그 사이(1440 에서 144px) 화면이 위로 밀린다. 그런데 카드 두 장이 등장하는 구간이
      바로 거기와 겹쳐서, 카드가 나타나는 내내 화면이 흔들려 보인다(실측:
      카드 등장 9070~9520 · 밀리는 구간 9360~9504).
      여백을 0 으로 두면 고정 시작 = 원 와이프가 끝나는 자리가 되어, 섹션이 드러난
      첫 프레임부터 마지막까지 자리가 한 번도 안 변한다.
   ⚠️ 안쪽 여백은 .xc-two__pin 의 align-items: center 가 알아서 낸다 — 화면 하나 안에서
      가운데 정렬이라 위아래가 저절로 빈다. */
.xc-two--hand { overflow: visible; padding-block: 0; }

/* ADD — 오른쪽 대기 자리가 가로 스크롤을 만들지 않게 자른다.
   ⚠️ 여기서도 섹션이 아니라 **고정되는 상자**를 자른다. 이유는 위와 같다. */
.xc-add--hand .xc-add__pin { overflow-x: clip; overflow-y: visible; }

/* 들어오는 동안 ADD 상자가 화면을 덮고 있다. 그 아래 두 갈래 카드의 링크를 막지 않는다. */
.xc-add--hand.is-handing { pointer-events: none; }
.xc-add--hand.is-handing a { pointer-events: none; }

/* ⚠️ `.xc-add__ln` 은 2026-08-28 에 없어졌다. ADD 제목을 줄마다 갈라 한 줄씩 띄우던
   장치인데, 사용자가 「한 덩어리로 나타나야 함」이라고 정했다. 줄바꿈은 마크업의 <br> 이
   그대로 한다. 되살리는 법은 two-hand.js 의 같은 자리 주석에 있다. */

/* ⚠️ 초기 상태를 CSS 에 두지 않는다. opacity: 0 을 여기 쓰면 GSAP 이 막혔을 때
   (폐쇄망·CDN 차단) ADD 가 영영 안 보인다. 시작값은 JS 가 넣는다 — main.js 의 원칙과 같다. */