feat(site): 쇼케이스를 별도 페이지로 분리하고 본문을 존댓말로 바꾼다

홈에 있던 쇼케이스 섹션은 스크린샷 두 장을 카드에 넣고 각도를 준 것이었고,
눌러도 갈 곳이 없었다. 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다.

- /showcase 를 별도 페이지로 만들었다. 모자이크 그리드에 썸네일을 놓고
  누르면 실제로 도는 사이트(/work/<slug>/)가 열린다.
- 사례 데이터를 src/data/work.ts 한 곳에 모았다. 항목 하나만 추가하면
  그리드에 들어간다 — 페이지 코드는 건드리지 않는다.
- 첫 사례로 목요일의 화원(플로럴 스튜디오)을 넣고 실제 파일을
  public/work/thursday-flowers/ 에 함께 싣는다.
- 홈에서 예전 섹션을 제거하고 내비를 /showcase 로 돌렸다.

본문 말투:

  사이트 문장이 전부 반말이었고 일부는 내부 감사 로그처럼 읽혔다.
  스킬 문서의 단정한 반말은 의도지만, 방문자를 향한 화면은 다르다.
  제목은 단정문이 카피로서 힘을 가지므로 그대로 두고, 설명하는 문장과
  명령형("~해라")을 전부 존댓말로 바꿨다. 실측 결과 홈·쇼케이스 모두 0건.

구현에서 걸린 것:

  Base 레이아웃이 이미 <main class="page"> 를 제공하는데 새 페이지에서
  또 감쌌다. 바깥 page 의 본문 칼럼(561px) 안에 안쪽 page 가 들어가
  전 페이지가 좁아졌다 — 모자이크가 561px, 썸네일이 240px 이었다.
  중첩을 걷어내자 1180px / 596px 로 돌아왔다.

apps/site/public/work/thursday-flowers/styles/tokens.css

@@ -0,0 +1,84 @@
+/*
+  목요일의 화원 — 디자인 토큰
+  전부 3단계에서 확정한 값이고, 근거는 design.md 에 있다.
+
+  값의 출처는 취향이 아니라 실측이다.
+  Aesop(#FFFEF2) · Sarah Winward(#F8F7F3) · Cereal(#F7F6EF) 세 곳이
+  전부 순백을 피하고 따뜻한 오프화이트를 쓴다. 글자도 순검정이 아니다.
+*/
+:root {
+  /* ── 색 ──────────────────────────────────────────────
+     강조색은 하나다. 그리고 **면이 아니라 점**으로만 쓴다.
+     꽃 사진에는 이미 온갖 색이 들어 있어서, 화면에 색을 더 칠하면
+     사진과 싸운다. 링크·라벨·구분선 정도가 강조색이 쓰이는 전부다. */
+  --paper: #f8f6f0;
+  --paper-deep: #f1ede4; /* 섹션 하나만 살짝 눕힌다. 리듬용 */
+  --ink: #2a2723;
+  --ink-muted: #6b655c;
+  --ink-faint: #a09889;
+  --accent: #7c4a3f; /* 마른 장미. 꽃의 초록과 충돌하지 않는다 */
+  --line: #ddd7ca;
+
+  /* ── 타입 ────────────────────────────────────────────
+     크기를 4종으로 묶는다. Aesop 이 3종(31/14/12), Cereal 이 2종(12/11)이었다.
+     종류를 늘리면 위계가 아니라 소음이 된다.
+
+     자간은 크기에 따라 **방향이 뒤집힌다**(Kinfolk 실측).
+       50px → -0.5px(-1%)   ·   15px → +0.15px(+1%)
+     큰 글자는 조여서 덩어리로, 작은 글자는 풀어서 낱글자로 읽히게 한다. */
+  --font-display: "MaruBuri", "Nanum Myeongjo", Georgia, serif;
+  --font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;
+
+  /* 가장 긴 줄이 "그 주에 좋은 꽃만"(한글 7 + 공백 2 ≒ 7.7em)이다.
+     세로 라벨이 왼쪽에서 60px 을 먹으므로 텍스트 칼럼은 화면 폭의 절반보다 좁다.
+     1024px 에서 55.7px 로 잡히자 딱 넘쳐 3줄이 됐다(카운트 규칙 위반).
+     기울기를 낮춰 전 구간에서 2줄을 유지한다. */
+  --step-display: clamp(2.2rem, 1.3rem + 2.9vw, 4.2rem);
+  --step-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
+  --step-body: 1rem;
+  --step-label: 0.75rem;
+
+  --track-display: -0.02em;
+  --track-lead: -0.005em;
+  --track-body: 0;
+  --track-label: 0.14em;
+
+  /* 웨이트는 둘이면 충분하다. 굵기로 소리치지 않는다.
+     큰 글자일수록 가늘게 — Aesop 의 31px 이 400 이었고 12px 라벨이 700 이었다. */
+  --weight-regular: 400;
+  --weight-bold: 700;
+
+  --leading-tight: 1.2;
+  --leading-body: 1.85; /* 한글은 라틴보다 넉넉해야 한다. 받침 때문에 줄이 붙어 보인다 */
+
+  /* 한글 본문은 25~35자가 읽기 폭이다. 라틴 기준 65자를 그대로 쓰면 너무 넓다 */
+  --measure: 32ch;
+
+  /* ── 간격 ────────────────────────────────────────────
+     여백이 콘텐츠다. 섹션 간격을 본문 간격의 5배 이상으로 벌린다. */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6.5rem;
+  --space-8: clamp(6rem, 4rem + 8vw, 11rem); /* 섹션 사이 */
+
+  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
+  --container: 1240px;
+
+  /* ── 모션 ────────────────────────────────────────────
+     R1(sarahwinward.com)의 스크롤 이동량을 쟀더니 **0px** 이었다.
+     하이엔드 플로럴은 움직이지 않는다. 등장만 조용히 처리한다. */
+  --dur-slow: 900ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --rise: 10px;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --ink-muted: #4a453e;
+    --line: #b9b0a0;
+  }
+}