# Figma 도형 + 그라데이션 처리

## 핵심 원리

Figma에서 도형 작업 방식:
1. 박스(프레임/컨테이너) 안에 도형을 만든다 (border-radius + gradient)
2. **박스를 회전**시킨다 (도형 자체가 아니라)
3. 박스가 돌면 그 안의 도형도 같이 돌아간다 → border-radius와 gradient가 함께 회전

## CSS 구현 구조

**도형 자체에 transform 적용 금지. 반드시 래퍼(wrapper) 컨테이너에 적용한다.**

```html
<div class="wrapper">   <!-- 이게 회전한다 -->
  <div class="shape"></div>  <!-- 이건 건드리지 않는다 -->
</div>
```

```css
.wrapper {
  position: absolute;
  /* pre-rotation position/size */
  transform: rotate(X deg);  /* Figma gradient 각도의 부호 반대 */
}
.shape {
  width: 100%; height: 100%;
  border-radius: <Figma 값 그대로>;
  background: linear-gradient(90deg, <Figma 색상 그대로>);
  /* CSS 90deg = Figma 0deg = 왼→오, 이것이 "기본 상태" */
}
```

## 프로세스

```
1. Figma gradient 각도 확인 (예: 90°)
2. 기본 상태(Figma 0°) 정의
   - shape: border-radius = Figma 값, gradient = CSS 90deg (left→right) + Figma 색상
3. 래퍼의 pre-rotation 위치/크기 계산
   - 90° 회전이면 width/height 교환
   - 래퍼 중심 = 최종 중심 (Figma position + size/2)
4. 래퍼에 transform: rotate() 적용
   - Figma +90° → CSS rotate(-90deg) (부호 반대, CSS는 CW 기준)
```

## 예시: 42335

Figma 데이터:
- 위치: (574, 45), 크기: 205×424 (tall, 최종 상태)
- border-radius: 102 0 0 102 (왼쪽 둥근, 기본 상태 기준)
- gradient: 90deg (시계 반대 방향 90도 회전됨)

Pre-rotation 계산:
- 최종 중심: (676.5, 257)
- Pre-rotation 크기: 424×205 (swap)
- Pre-rotation top-left: (464.5, 154.5)

CSS:
```html
<div class="wrapper-42335">
  <div class="shape-42335"></div>
</div>
```
```css
.wrapper-42335 {
  position: absolute;
  left: 464.5px; top: 154.5px;
  width: 424px; height: 205px;
  transform: rotate(-90deg);
}
.shape-42335 {
  width: 100%; height: 100%;
  border-radius: 102px 0 0 102px;
  background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
}
```

## Figma gradient 각도 → CSS transform 변환

Figma는 시계방향이 양수, CSS transform은 시계방향이 양수이지만:
- Figma gradient 각도는 **도형 내부 방향** 기준
- 박스를 회전시키는 관점에서는 부호가 반대

```
Figma gradient  0° → CSS transform: rotate(0deg)   (회전 없음)
Figma gradient +90° → CSS transform: rotate(-90deg) (반시계)
Figma gradient -90° → CSS transform: rotate(+90deg) (시계)
Figma gradient ±180° → CSS transform: rotate(180deg)
```

## 주의사항

- Figma 데이터가 유일한 소스. PNG는 픽셀 분석으로만 교차 검증.
- 이미지를 눈으로 보고 방향 판단 금지 (멀티모달 해석 불안정).
- border-radius와 gradient를 각각 수동 계산하지 않는다. **래퍼를 회전**시킨다.
- 작동하는 값은 건드리지 않는다. 사용자가 지적한 것만 수정한다.