# Archetype-FirstSpark UI 에셋 가이드

## 1. 상점 아이템 아이콘 디자인 스펙

### 아이콘 규격
- **크기**: 64×64px (in-game), 36px (리스트 뷰)
- **배경**: 투명 또는 반경 12px 라운드 박스
- **스타일**: Ember_Origin 캐릭터와 동일한 카와이 치비 스타일

### 현재 상점 아이템 → 디자인 스펙

| 아이템 ID | 이름 | 이모지 | 아이콘 컨셉 | 주 색상 |
|-----------|------|--------|-----------|--------|
| `fire_boost` | 불꽃 강화석 | 🔥 | 불꽃 문양이 새겨진 붉은 보석 | `#FF4500` → `#FFAA00` 그라디언트 |
| `water_boost` | 물방울 강화석 | 💧 | 물결 문양 파란 보석 | `#1E90FF` → `#87CEEB` 그라디언트 |
| `fusion_scroll` | 합성 두루마리 | 📜 | 원소 문양이 빛나는 양피지 | `#DEB887`, `#FFD700` 잉크 |
| `gold_bag` | 골드 주머니 | 👝 | 빵빵하게 부푼 황금 주머니 | `#FFD700`, `#FF8C00` |

### 추가 예정 상점 아이템 (기획 확장용)

| 아이템 ID | 이름 | 아이콘 컨셉 | 설명 |
|-----------|------|-----------|------|
| `exp_crystal` | 경험치 수정 | 빛나는 보라 결정체 | 원소 EXP +100 |
| `speed_potion` | 속도 물약 | 회오리치는 파란 약병 | 생산 속도 2배 (30분) |
| `offline_booster` | 오프라인 부스터 | 달과 별이 새겨진 아이템 | 오프라인 보상 2배 |
| `discovery_ticket` | 발견 티켓 | 빛나는 황금 입장권 | 랜덤 Tier 3 원소 즉시 해금 |
| `legendary_shard` | 전설 파편 | 홀로그래픽 보석 조각 | 전설 원소 합성 확률 +5% |

### 상점 아이콘 박스 스펙 (컴포넌트 레벨)

```tsx
// 상점 아이콘 래퍼 (아이템 등급에 따른 배경 글로우)
const shopIconBoxStyle = (rarity: string) => css`
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: ${
    rarity === 'legendary' ? 'linear-gradient(135deg, #FF9800, #FFD700)' :
    rarity === 'epic'      ? 'linear-gradient(135deg, #7B1FA2, #9C27B0)' :
    rarity === 'rare'      ? 'linear-gradient(135deg, #1565C0, #2196F3)' :
    rarity === 'uncommon'  ? 'linear-gradient(135deg, #2E7D32, #4CAF50)' :
                              'linear-gradient(135deg, #616161, #9E9E9E)'
  };
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
`;
```

---

## 2. 도감 뱃지 디자인 (발견율 마일스톤)

### 뱃지 규격
- **크기**: 48×48px (도감 화면 내), 24×24px (프로필 미니 뱃지)
- **형태**: 육각형 또는 방패 형태 (수집/달성의 느낌)
- **스타일**: 금속성 질감, 원소 문양 새김

### 마일스톤 뱃지 목록

| 달성 조건 | 뱃지 이름 | 디자인 | 색상 |
|----------|----------|--------|------|
| 원소 1개 획득 | 첫 번째 불꽃 | 불꽃 모양 동판 뱃지 | Bronze `#CD7F32` |
| 원소 5개 획득 | 원소 탐험가 | 나침반 모양 은판 뱃지 | Silver `#C0C0C0` |
| 원소 10개 획득 | 중급 연금술사 | 플라스크 + 별 뱃지 | Silver `#C0C0C0` |
| 원소 15개 획득 | 고급 연금술사 | 빛나는 금판 + 원소기호 | Gold `#FFD700` |
| 원소 20개 획득 | 원소 마스터 | 왕관 + 4원소 합체 뱃지 | Gold `#FFD700` 글로우 |
| 원소 25개 획득 | 대현자 | 크리스탈 구슬 뱃지 | Purple `#9C27B0` |
| 원소 30개 전부 획득 | 세계의 창조자 | 무지개 오로라 뱃지 | Rainbow 홀로그래픽 |

### 뱃지 미획득/획득 상태

```tsx
const badgeContainerStyle = (achieved: boolean) => css`
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: ${achieved ? 'linear-gradient(135deg, #FFF8E1, #FFE082)' : adaptive.greyBackground};
  border: 2px solid ${achieved ? '#FFD700' : adaptive.grey300};
  opacity: ${achieved ? 1 : 0.4};
  filter: ${achieved ? 'none' : 'grayscale(100%)'};
  box-shadow: ${achieved ? '0 0 8px rgba(255, 215, 0, 0.4)' : 'none'};
`;
```

### 도감 화면 발견률 시각화

```
발견 진행 바:
[████████░░░░░░░░░░░] 8/30 (26.7%)

색상 구간:
0~33%   → grey gradient (초보)
34~66%  → blue gradient (중급)
67~99%  → purple gradient (고급)
100%    → rainbow gradient (전설)
```

---

## 3. 오프라인 보상 모달 비주얼 개선

### 현재 구현의 개선 포인트
1. 흰 배경 모달 → **배경에 밤하늘 + 별 이미지 또는 달 모티프 추가**
2. 단색 버튼 → **그라디언트 유지하되 별/달 아이콘 추가**
3. 보상 아이템 배경 `#F7F8FA` → **adaptive 색상으로 다크모드 대응**
4. 타이틀 이모지만 → **달과 별이 조합된 헤더 비주얼 추가**

### 개선된 스타일 스펙

```tsx
// 모달 헤더 영역
const offlineHeaderStyle = css`
  text-align: center;
  margin-bottom: 20px;
`;

// 달 아이콘 + 별 파티클 영역
const moonIconWrapStyle = css`
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
  /* 별 파티클은 CSS animation으로 처리 */
  position: relative;

  &::before, &::after {
    content: '✦';
    position: absolute;
    font-size: 14px;
    color: #FFD700;
    animation: starTwinkle 2s ease-in-out infinite alternate;
  }
  &::before { top: 0; left: 20%; }
  &::after  { top: 10%; right: 15%; animation-delay: 0.7s; }
`;

// 개선된 모달 배경
const modalStyle = css`
  background: ${adaptive.background};
  border-radius: 24px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  /* 상단 별밤 느낌 장식 */
  background-image: radial-gradient(
    circle at 50% 0%,
    rgba(124, 77, 255, 0.08) 0%,
    transparent 60%
  );
`;

// 보상 아이템 배경 (다크 대응)
const rewardItemStyle = css`
  display: flex;
  align-items: center;
  gap: 10px;
  background: ${adaptive.greyBackground};
  border-radius: 12px;
  padding: 10px 14px;
`;

// 수령 버튼 개선
const claimButtonStyle = css`
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #3182F6, #7C4DFF);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  /* 버튼 내부 반짝임 효과 */
  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent 40%,
      rgba(255,255,255,0.15) 50%,
      transparent 60%
    );
    animation: shimmer 2.5s ease-in-out infinite;
  }

  &:active {
    transform: scale(0.97);
  }
`;

// 골드 보상 행 (다크 대응)
const goldRowStyle = css`
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-gold-bg, #FFF8E1), #FFF3CD);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
`;
```

### 타이틀 섹션 개선 (JSX)

```tsx
// 개선된 모달 상단부
<div css={offlineHeaderStyle}>
  <span css={moonIconWrapStyle}>🌙</span>
  <h2 css={titleStyle}>오프라인 보상</h2>
  <p css={subtitleStyle}>
    {formatDuration(pendingOfflineReward.offlineSec)} 동안<br/>
    원소가 자동 수집되었습니다!
  </p>
</div>
```

---

## 4. 화면별 UI 에셋 요약

| 화면 | 주요 에셋 | 우선순위 |
|------|----------|---------|
| ShopScreen | 상점 아이템 아이콘 (고화질 PNG) | High |
| ElementsScreen | 도감 뱃지 시스템 | Medium |
| OfflineRewardModal | 달/별 헤더 이미지, 개선된 버튼 | Medium |
| FusionScreen | 합성 이펙트 파티클 | High |
| EvolutionScreen | 강화 에너지 링 이펙트 | Medium |

---

## 5. 애니메이션 스펙 (CSS Keyframes)

```css
@keyframes starTwinkle {
  from { opacity: 0.3; transform: scale(0.8); }
  to   { opacity: 1.0; transform: scale(1.2); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes elementIdle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}

@keyframes fusionPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes enhanceRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rarityGlow {
  0%, 100% { box-shadow: 0 0 6px currentColor; }
  50%       { box-shadow: 0 0 16px currentColor, 0 0 32px currentColor; }
}
```