# 활동 로그 (`/activities`) — 디자인 v2

> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #5

## 레이아웃

```
┌──────────┬──────────────────────────────────────────────────┐
│ Sidebar  │  활동 로그 / ACTIVITY LOG   SYS_LOG_V.4.2 //... │
│          │  ──────────────────────────────────────────────  │
│          │                                                  │
│          │  [ALL] [SYSTEM] [SECURITY] [ORG] [BACKUP]  🔍... │
│          │                                                  │
│          │  ┌──────────────────────────────────────────────┐│
│          │  │ TIMESTAMP          TYPE     EVENT        CODE││
│          │  │ 2023-10-27 14:02  SYSTEM   Node [다랑]  0x402││
│          │  │ 2023-10-27 13:45  ORG      New sub-dir  0x112││
│          │  │ 2023-10-27 11:30  SECURITY Full sweep   0x000││
│          │  │ 2023-10-27 10:15  SYSTEM   Memory alloc 0x284││
│          │  │ 2023-10-27 09:15  ORG      Batch import 0x105││
│          │  │ 2023-10-27 08:00  BACKUP   Snapshot     0x900││
│          │  │ 2023-10-27 07:42  SECURITY SSH blocked  0x666││
│          │  │ 2023-10-27 04:20  SYSTEM   GC cycle     0x401││
│          │  │ 2023-10-27 01:12  SYSTEM   Kernel patch 0x400││
│          │  └──────────────────────────────────────────────┘│
│          │              SHOWING 1-9 OF 2,410  [PREV] 01 [NEXT]│
└──────────┴──────────────────────────────────────────────────┘
```

## 네비게이션 변경
- 사이드바에 **"활동"** 메뉴 추가 (대시 다음)

## 페이지 헤더
- page-title: "활동 로그" (24px 600) + ` / ACTIVITY LOG` (18px secondary)
- header-meta: mono 11px, "SYS_LOG_V.4.2 // RUNTIME: 428:12:05"
- border-bottom 1px

## 필터 + 검색 (Log Controls)
- `justify-content: space-between; align-items: center`
- **filter-group**: 가로 flex, gap 16px
  - filter-btn: 11px 700 uppercase, border 1px
  - active: 흰색 배경 + 검정 텍스트
  - 옵션: ALL / SYSTEM / SECURITY / ORG / BACKUP
- **search-box**: max-width 300px, flex-grow
  - search-input: `#1a1a1a` 배경, border 1px, mono 12px
  - placeholder: "SEARCH LOGS..."

## 로그 테이블 (Log Container)
- 외곽: border 1px, `background: #0d0d0d`
- table: 전체 너비, border-collapse
- **th**: 11px uppercase secondary, padding 16px, border-bottom 1px
- **td**: 12px mono, padding 12px 16px, border-bottom `#1a1a1a`
- **hover**: 배경 `#1a1a1a`

### 컬럼
| 컬럼 | 너비 | 스타일 |
|------|------|--------|
| TIMESTAMP | 180px | secondary |
| TYPE | 100px | bold + tag |
| EVENT | auto | primary, `[이름]` bold 강조 |
| CODE | 100px | right align |

### 태그 (Tag)
- 10px, padding 2px 6px, border 1px currentColor
- SYSTEM: `#888`
- SECURITY: `#ff5f5f`
- ORG: `#5fafff`
- BACKUP: `#5fff8a`

## 페이지네이션
- `justify-content: flex-end` / mono 11px
- "SHOWING 1-9 OF 2,410 ENTRIES"
- `[PREV]` `PAGE 01` `[NEXT]`
- PREV/NEXT: primary 색, hover underline

## 모바일 반응형
- filter-group: 가로 스크롤 또는 드롭다운 변환
- search-box: 풀 너비
- log-table: 가로 스크롤 wrapper 또는 카드 형태 변환
  - 카드: 타임스탬프 + 태그 상단, 이벤트 본문, 코드 하단
- 페이지네이션: 간소화 (< 01 >)