지표와 그래프, 표를 담은 관리 화면

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.

# 작업: 지표와 그래프, 표를 담은 관리 화면

## 언제 쓰는 작업인가
관리자만 쓰는 내부 화면을 빨리 세워야 할 때 쓴다. 주문 관리, 회원 관리, 운영 현황처럼 지표 몇 개와 추이 하나, 그리고 목록 하나면 되는 화면이 전부 같은 모양이다. 네 덩이가 서로 독립이라 그래프를 빼거나 표를 두 개로 늘려도 나머지는 그대로 둔다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 지표 넷의 이름과 목표 숫자, 그리고 지난 기간 대비 몇 퍼센트인지가 있다
- 그래프에 넣을 값이 열두 개씩 두 벌 있다. 올해 한 벌, 비교용으로 지난해 한 벌이다
- 표에 넣을 줄이 아홉 개쯤 있다. 각 줄은 번호, 사람 이름, 상태, 금액, 시각이다
- Chart.js·Recharts·표 라이브러리·아이콘 패키지는 설치하지 않는다. 아이콘은 인라인 SVG 로 직접 그린다

## 건드릴 범위
사이드바, 상단 줄, 지표 카드 넷, 꺾은선 한 장, 정렬과 거르기가 되는 표 하나까지다. 로그인, 권한, 실제 서버 호출, 페이지 넘기기는 만들지 않는다. 값은 전부 코드에 적어 둔 것을 쓴다.

## 결과가 이렇게 보여야 한다
거의 검은 화면(#0A0C10) 위에 한 톤 밝은 판(#12151C)을 얹어 영역을 가른다. 색은 파랑 하나가 주인공이고 초록·주황·빨강은 상태를 가리킬 때만 아주 조금 쓴다. 왼쪽 사이드바는 화면 높이에 붙어 따라오고, 아래쪽 단추를 누르면 240px 에서 68px 아이콘 줄로 접힌다. 지표 카드 넷은 화면에 들어오는 순간 0 에서 제 숫자까지 세어 올라간다. 그래프는 파란 선 하나가 왼쪽에서 오른쪽으로 그려지고, 선 아래가 위에서 아래로 옅어지는 파란 면으로 채워진다. 지난해 선은 회색 점선으로 뒤에 깔린다. 커서를 그래프에 올리면 세로 안내선과 점이 가장 가까운 달로 붙고 그 옆에 값이 뜬다. 표는 머리글을 누를 때마다 그 기준으로 다시 늘어서고 화살표 방향이 바뀐다.

## 구현 순서
1. 색과 폭을 먼저 못박는다. 배경 #0A0C10, 판 #12151C, 한 단계 더 밝은 입력칸 #171B24, 선은 흰색 8%와 16% 두 단계, 본문 글자 #E9ECF2, 보조 글자 #868E9E 다. 파랑 #5B8CFF 가 주인공이고 초록 #35D6A4·주황 #FFB454·빨강 #FF6B81 은 상태 칩과 증감 표시에만 쓴다. 본문은 15px 에 줄간격 1.6, 작은 라벨과 숫자는 고정폭 글꼴에 자간 0.14em 대문자다. 사이드바는 240px, 상단 줄은 62px 이다.
2. 뼈대는 두 칸 격자다. grid-template-columns 를 var(--side) 1fr 로 두고 --side 를 240px 로 잡는다. 사이드바는 position sticky·top 0·height 100vh 라 본문만 스크롤된다. 상단 줄도 sticky·top 0·z-index 10 이고 배경을 82% 불투명에 blur 14px 로 깔아야 그 아래로 표가 지나가도 글자가 읽힌다.
3. 사이드바 접힘은 폭만 줄인다. --side 를 68px 로 바꾸고 grid-template-columns 에 260ms cubic-bezier(.4,0,.2,1) 전환을 건다. 글자는 지우지 말고 opacity 0 과 pointer-events none 으로 160ms 동안 사라지게 한다. 요소를 display none 으로 없애면 다시 펼 때 레이아웃이 한 번 튀고 키보드 초점도 잃는다. 접히면 아이콘만 남으므로 링크마다 title 로 이름을 남겨야 그게 무슨 메뉴인지 알 수 있다. 접기 단추에는 aria-expanded 를 달고 글자와 aria-label 과 title 을 '메뉴 접기'·'메뉴 펼치기'로 같이 바꾼다. 셋이 따로 놀면 화면과 보조기술이 서로 다른 말을 한다. 900px 아래에서는 접기 단추를 감추고 아이콘 줄로 고정한다.
4. 지표 카드는 repeat(4, 1fr) 에 간격 14px 이고 900px 에서 두 칸, 560px 에서 한 칸으로 접는다. 카드 안의 문단은 기본 여백을 0 으로 지워야 카드가 쓸데없이 길어지지 않는다. 숫자는 27px 굵기 700, 자간 -0.035em, font-variant-numeric tabular-nums 다. IntersectionObserver 를 threshold 0.45 로 걸어 화면에 들어온 카드부터 900ms 동안 센다. 진행률 t 에 1 - (1 - t)³ 를 씌우면 끝에서 부드럽게 멈춘다. 한 번 센 카드는 바로 관찰을 끊는다.
5. 그래프 판은 viewBox 0 0 760 200 에 preserveAspectRatio none 이다. 가로로 늘려 쓰겠다는 뜻이라 선이 같이 굵어지는데, 모든 path 에 vector-effect non-scaling-stroke 를 주면 굵기만 원래대로 남는다. 값 열두 개를 (값 - 최소) / (최대 - 최소) × 100 으로 0~100 범위에 맞춘 뒤, y 를 184 - (정규화값 / 100) × 170 으로 옮긴다. 위 14px 아래 16px 이 봉우리와 골이 잘리지 않게 남겨 둔 여유다.
6. 선은 C 명령으로 잇는다. 이웃한 두 점 사이 가로 거리의 0.42 배만큼 떨어진 자리에 제어점 두 개를 두면 점을 정확히 지나면서 부드러운 곡선이 나온다. 0.5 를 넘기면 봉우리 앞뒤가 부풀어 실제로는 없던 값이 있는 것처럼 보인다. 채움은 이 경로 뒤에 L 760 200 · L 0 200 · Z 로 바닥 두 점을 더해 닫고, 세로 그라디언트로 파랑 30% 에서 0% 까지 옅어지게 칠한다.
7. 그려지는 연출은 점선으로 만든다. getTotalLength() 로 경로 길이를 실제로 재서 stroke-dasharray 와 stroke-dashoffset 에 같은 값을 넣으면 선이 통째로 감춰진다. 여기서 getBoundingClientRect() 를 한 번 읽어 값을 확정시킨 뒤 dashoffset 을 0 으로 보내야 첫 프레임부터 움직인다. 1500ms cubic-bezier(.32,.72,.3,1) 이고 지난해 선은 220ms 늦게 시작한다. 지난해 선은 원래 5 6 점선이라 그리는 동안만 dasharray 를 비워 실선으로 두고, 끝나면 되돌린다. 전체는 IntersectionObserver threshold 0.3 으로 한 번만 돌린다.
8. 커서가 올라가면 값을 읽어 준다. pointermove 에서 (커서 x - 상자 왼쪽) / 상자 폭 비율을 구해 가장 가까운 달을 고르고, 세로 안내선과 점과 말풍선을 그 자리로 옮긴다. 이 셋은 SVG 가 아니라 HTML 로 만든다. preserveAspectRatio none 이라 SVG 안의 원과 글자는 가로로 찌그러진다. 말풍선 위치는 왼쪽 52px 과 오른쪽 끝에서 52px 사이로 가둬 화면 밖으로 나가지 않게 한다.
9. 표는 머리글 안에 단추를 넣는다. 누르면 그 열을 기준으로 배열을 정렬하고, 같은 열을 다시 누르면 방향을 뒤집는다. 그 자리에서 aria-sort 를 none·ascending·descending 으로 바꾸면 보조기술이 읽는 값과 화면의 화살표 방향이 한 곳에서 정해진다. 행은 처음에 아홉 개를 만들어 두고 다시 만들지 않는다. 정렬하거나 걸러도 만들어 둔 칸의 textContent 만 고쳐 쓰고 남는 행은 hidden 으로 접는다. 그러면 깜빡임이 없고 커서가 올라가 있던 행도 그대로 남는다. 상태 칩은 data-st 값으로 색을 가르고, 표는 min-width 640px 을 준 뒤 overflow-x auto 인 상자로 감싼다.
10. 마무리로 움직임을 줄인 설정을 받는다. prefers-reduced-motion 이면 모든 animation 과 transition 을 none 으로 덮고, 지표 숫자는 세지 않고 바로 최종값을 넣고, 그래프 선은 다 그려진 채로 둔다. 400px 과 1440px 에서 가로 스크롤이 없는지 보고 빌드를 통과시킨다.

## 기본값(필요하면 바꿔라)
- 접힌 사이드바 폭: 68px (바꿀 수 있는 범위: 56px ~ 84px(아이콘 24px 좌우 여백을 남기는 선까지))
- 곡선 제어점 비율: 0.42 (바꿀 수 있는 범위: 0.2 ~ 0.5(0.2 면 거의 직선, 0.5 를 넘기면 없던 봉우리가 생긴다))
- 선이 그려지는 시간: 1500ms (바꿀 수 있는 범위: 600ms ~ 2500ms)
- 지표 숫자 세는 시간: 900ms (바꿀 수 있는 범위: 400ms ~ 1600ms(길면 값을 읽으려고 기다리게 된다))
- 가로 눈금 줄 수: 5줄 (바꿀 수 있는 범위: 4 ~ 7줄(줄이 늘면 값은 촘촘해지지만 선이 배경에 묻힌다))

## 하지 말 것
- preserveAspectRatio none 을 쓰면서 vector-effect non-scaling-stroke 를 빼지 않는다. 가로로 늘어난 만큼 선이 굵어져 가로선과 세로선의 굵기가 달라 보인다.
- 정렬할 때 tbody 를 비우고 행을 다시 만들지 않는다. 한 프레임 깜빡이고, 커서가 올라가 있던 행과 키보드 초점을 잃는다.
- 경로 길이를 눈대중으로 적지 않는다. getTotalLength() 로 잰다. 값이 크면 선이 늦게 나타나고 작으면 다 그려지기 전에 멈춘다.
- 표에 min-width 를 주고 감싸는 상자를 빼먹지 않는다. 좁은 화면에서 페이지 전체가 가로로 밀린다.
- 지표 숫자에서 tabular-nums 를 빼지 않는다. 세는 동안 자릿수가 바뀌며 카드 폭이 흔들린다.
- 차트 라이브러리를 설치하지 않는다. 꺾은선 하나는 path 세 개면 끝난다.

## 출력 규칙 (HTML 단일 파일)
- 결과는 index.html 파일 하나로 저장한다. 외부 CDN 을 쓰지 않고 CSS·JS 를 파일 안에 넣는다.
- HTML 파일 하나로 완결한다. 별도 CSS·JS 파일을 만들지 않는다.
- 폰트는 시스템 폰트 스택을 기본으로 쓰고, 한글은 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic' 순으로 폴백한다.
- 색·간격·둥글기는 :root 의 CSS 변수로 모아 두고, 본문에서는 변수만 참조한다.
- 1200px 데스크톱과 400px 모바일에서 가로 스크롤이 생기지 않아야 한다.
- 움직임은 prefers-reduced-motion 을 존중한다.

끝나면 만든 파일 목록과 브라우저에서 확인할 URL 을 한 줄씩 적어라.