# 신버전 디자인 기본값

작은 글자로 정보를 밀어 넣지 않는다. 방문자가 내용을 읽고 다음 행동을 고를 수
있도록 크기, 간격, 상태 피드백을 함께 설계한다. 이 기준은 `v2/` 전체에 적용한다.
비교용 구버전의 기본 타이포그래피·화면 구조는 보존한다. 공유 아이콘과 상태 알림은
이번 사용자가 요구한 일관성 수정의 적용 대상이다.

## CSS의 기준점

`styles/tokens.css`는 색상·폰트·외곽 여백을, `styles/defaults.css`는 글자 크기·행간·
조작 크기·상태 색상을 정의한다. 호환 CSS 다음에 토큰과 기본값을 읽고,
기본·컴포넌트·화면 스타일 순으로 적용한다. 호환 화면도 같은 크기 토큰을 사용한다.

브라우저 기본 글자 크기는 100%로 보존한다. 아래 px 값은 기본 16px 설정 기준이며,
실제 구현에는 rem 토큰을 사용하여 사용자의 글자 크기 설정과 확대를 따른다.

| 역할 | 토큰 | 기본 크기 | 사용 |
| --- | --- | --- | --- |
| 보조 정보·분류 | `--text-sm` | 16px | 그룹명, 날짜, 상태, 입력 안내, 법적 고지 |
| 기본 본문 | `--text-body` | 18px | 본문과 일반 안내 |
| 강조 안내 | `--text-lead` | 20px | 배너 아래 안내 문구 |
| 빠른 메뉴 | `--text-action` | 22px / 모바일 20px | 일정·예매·방문 링크 |
| 안내 항목 제목 | `--text-item-title` | 20px / 650 | 방문 안내·정보 링크 제목 |
| 포스터 제목 | `--text-card-title` | 20px / 650 | 카드 아래 작품 제목 |
| 카드 메타 | `--text-meta` | 16px | 장르·상태·날짜·장소 |
| 중간 제목 | `--text-heading` | 28–40px | 신규 섹션 제목의 기본값 |

보조 정보를 포함한 일반 UI 글자는 **16px 미만으로 지정하지 않는다**. 모바일에서도
글자를 줄이지 않고 줄바꿈, 세로 배치, 간격 조절로 대응한다. 기존의 큰 제목과
포스터·지도·도형 속 글자는 별도의 콘텐츠이며 이 최소 크기 규칙의 대상이 아니다.
본문 행간은 1.7, 메뉴·짧은 레이블은 1.5를 기본값으로 한다. 굵기는 본문 400, 레이블 500, 주요 행동 600, 항목 제목 650, 큰 제목 720을
`--weight-*` 토큰으로 관리한다. 새 스타일에는
`font-size: var(--text-body)`처럼 역할 토큰을 사용한다.

## 조작과 상태

- 일반 버튼의 기본 조작 크기는 48px, 빠른 메뉴의 높이는 64px이다.
- 빠른 메뉴의 글자와 아이콘 주변 여백도 클릭 가능하다. 별도 아이콘 박스와
  의미 없는 화살표를 반복하지 않는다.
- 호버는 `--state-hover`, 누름은 `--state-pressed`로 구분한다. 링크 밑줄은
  즉시 표시한다. 위치 이동, 들뜸, 커지는 그림자, 늘어나는 밑줄 효과를 쓰지 않는다.
- 키보드 포커스는 3px 외곽선과 4px 간격으로 표시한다. 탭 순서는 시각 순서와 같다.
- 배너는 현재 순서와 전체 개수를 표시하고 이전·다음·재생 상태를 실제 동작과
  함께 갱신한다. 수동 이동은 보조기기에 알리고 자동 이동은 반복 낭독하지 않는다.
- 모션 감소 설정에서는 배너 전환을 즉시 처리하고 자동 재생을 멈춘 상태로 시작한다.

### 알림·모달의 모서리

관심 프로그램 저장·삭제처럼 짧은 상태 피드백은 토스트다. 구·신버전에서
`assets/ui-feedback.css`를 함께 읽고 `--radius-pill: 9999px`로 양끝이 완전히 둥근
캡슐을 만든다. 사용자 표현의 ‘radius 100%’는 이 형태를 뜻한다. CSS `100%`는
긴 타원을 만들 수 있으므로 실제 반원 끝을 만드는 큰 길이 값을 사용한다.
`role="status"`, `aria-live="polite"`, 기존 3.5초 자동 닫힘을 보존하며 배경막이나
포커스 가두기를 추가하지 않는다.

검색·전체 메뉴처럼 큰 내용을 담는 실제 모달은 `--radius-dialog: 1.5rem`(24px)을
모바일에서도 유지한다. 알림과 모달을 직각 또는 거의 직각으로 보이게 만들지 않는다.
사진·지도·표까지 캡슐로 만드는 규칙은 아니다. 모서리는 요소의 역할별로 검토한다.

## 문구와 이미지

문구는 화면 이해, 행동 선택, 일정·장소 확인, 출처·권리 고지에 도움이 될 때 쓴다.
장식만을 위한 영문 지명·연도·슬로건·분류용 소제목을 빈 공간에 덧붙이지 않는다.
`광화문, 세종문화회관 / SEOUL · SINCE 1978`처럼 사진에서 이미 알 수 있는 내용을
반복하는 캡션은 사용하지 않는다. 시설 이미지에는 필요한 대체 텍스트를 유지하고,
출처는 `docs/asset-sources.json`에서 관리한다. 법적 고지와 체험 안내는 유지한다.

같은 원칙을 소개 페이지에도 적용한다. `SINCE 1978 · GWANGHWAMUN, SEOUL`,
`A PLACE FOR EVERYONE`, 장식용 민트 점, 사진 하단의 주소 반복을 추가하지 않는다.
영문 소제목을 지운 자리에 새 슬로건이나 다른 장식을 넣지 않는다. 소개 페이지의
하단 큰 민트 원·천지인 도형 패널은 최신 요청에 따라 보존·복구한다. 제목 옆 작은 장식은
계속 제거한다. 이전 하단 도형 제거 정책은 폐기되었다. 천·지·인 설명과 안내 링크,
실제 주소·연혁 데이터, 접근성 안내는 보존한다. 다른 페이지의 실제 로고·CI 자료를
무차별 삭제하는 규칙은 아니다.

## 확인 방법

저장소 루트에서 Python 서버를 실행한 뒤 다음 명령으로 확인한다.

```bash
node --test tests/*.test.mjs v2/tests/*.test.mjs
node v2/tests/readability.cjs
node v2/tests/design-consistency.cjs
```

두 번째 명령은 제공된 Playwright와 Chromium을 사용한다. 필요하면
`CHROMIUM_PATH`와 `SEJONG_TEST_URL`을 지정한다. 기본 대상은
`http://127.0.0.1:8000/v2/index.html`이다.

320·390·768·1024·1440px에서 실제 렌더링된 글자 크기, 메뉴 영역, 가로 넘침,
키보드·호버·누름 상태, 링크 이동, 배너 순서·재생·모션 감소를 확인한다.
추가 화면을 바꿀 때에는 일정·상세·길찾기·예매 화면도 함께 검증한다.

## 공통 카드와 전환

`src/components/cards.js`에서 카드-포스터·카드-히어로·카드-배너를 관리하고
`styles/cards.css`가 공통 모양과 입력 상태를 담당한다. 포스터 매체는 패딩 0,
width/height 100%, object-fit cover로 양방향을 채운다. 제목·일정·장소까지 전체 카드다.
하트는 전체 카드 hover 또는 focus-within에서 opacity만 180ms 전환한다.
터치에서는 기본 노출하여 hover 없이도 사용할 수 있다. 관심 버튼은 카드 링크 밖에 둔다.

모든 카드 내부는 user-select none, 이미지/링크 draggable false와 위임된 dragstart 차단을
함께 적용한다. 우클릭 메뉴는 보존한다. 히어로의 pointer 드래그는 별도 동작이며
양방향 이동, 드래그 후 클릭 억제, 모바일 세로 스크롤을 지원한다.

히어로 자동 재생은 시작 간격 2700ms, 왼쪽 이동 800ms, shade/copy opacity 650ms다.
기존 카드를 재배치해 루프하며 전환 중 이미지를 전체 재생성하지 않는다.
`src/components/carousel.js`가 조작·재생·정리 정책을 담당한다.

불필요한 PLAN YOUR VISIT 등 영문 장식은 공통 머리말과 각 페이지에서 제거한다.
체험·이용 조건은 `components/notices.js`와 `styles/notices.css`를 통해 색 띠나
회색 네모 박스 없이 표시한다. 실제 주소·프로그램명·법적 고지는 보존한다.

추가 검사는 `node v2/tests/cards-carousel.cjs`와
`node skills/sejongpac-renewmakes/scripts/check-decoration.cjs`로 실행한다.