feat(design): 사이트 전체를 앱과 같은 제품 톤으로

README.md

@@ -34,28 +34,28 @@ npm run build      # out/ 에 정적 파일 생성
 
 ## 디자인
 
-방향은 **육아수첩 · 관공서 기록부**입니다. 이 분야에서 흔한 파스텔 베이비 톤도, 핀테크식
-무채색도 쓰지 않았습니다. 정부가 나눠 주는 아기수첩 — 모눈 인쇄, 개월 수 탭, 도장, 표 — 을
-기준으로 삼았습니다.
+방향은 **앱과 같은 제품**입니다. 소개 사이트에서 본 것과 앱을 열었을 때의 인상이 같아야 합니다.
+색·서체·모서리는 [CareCode_FE](https://github.com/CareCode-Repo/CareCode_FE) 의
+`src/styles/globals.css`(@theme) 를 그대로 옮겼고, 로고와 파비콘도 앱 아이콘(`public/icon.svg`)을 씁니다.
+값을 바꿀 때는 앱 쪽이 원본입니다.
 
 | 토큰 | 값 | 쓰임 |
 |------|-----|------|
-| `--paper` | `#F6F8F3` | 재생지에 가까운 차가운 오프화이트 |
-| `--ink` | `#1C2620` | 도장 잉크에 가까운 진한 녹흑 |
-| `--seal` | `#36AA1C` | 유효·현재 (앱과 같은 브랜드 그린) |
-| `--past` | `#A8B2A5` | 이미 지나간 것 |
-| `--stamp` | `#C2453D` | 마감·경고 (경보 빨강이 아니라 도장 빨강) |
-| `--rule` | `#DCE3D6` | 모눈선 |
-
-### 표제를 얇게 쓰는 이유
-
-이 서비스의 목소리는 "다 받으세요"가 아니라 "이건 알고 이건 모릅니다"입니다.
-700 굵기 고딕 헤드라인은 그 성격에 맞지 않아, Pretendard 300 을 크게 놓아 표제를 만듭니다.
-
-한글 명조를 쓰면 더 좋았겠지만 `next/font` 에 한글 서브셋을 제공하는 구글 폰트가 없고,
-런타임에 외부에서 받아 오면 방문자 IP 가 매번 나갑니다. 개인정보 고지를 따로 두는 서비스에서
-그건 앞뒤가 맞지 않아 자체 호스팅한 Pretendard 만 씁니다. 숫자는 IBM Plex Mono 로 자릿수를
-맞춥니다.
+| `--bg` | `#FFFFFF` | 바탕 |
+| `--surface` | `#FAFAFA` (gray-50) | 카드 · 표 머리 · 막대 바탕 |
+| `--fg` / `--fg-soft` | `#212121` / `#616161` | 글자 |
+| `--brand` | `#4FBE27` (green-600) | 유효 · 현재. 앱 버튼과 같은 색 |
+| `--brand-deep` | `#007300` (green-900) | 초록 글자. 흰 바탕 본문 크기에서 4.5:1 을 넘기려면 900 까지 내려야 합니다 |
+| `--alert` / `--alert-deep` | `#E55656` / `#B83A3A` | 마감 · 경고. 앱의 red 는 면용이라 글자는 한 단계 짙게 씁니다 |
+| `--muted` | `#9E9E9E` | 이미 지나간 것 · 모르는 것 |
+| `--line` | `#EEEEEE` | 구분선 |
+
+표제는 Pretendard 700, 버튼은 앱의 `Button` 과 같은 둥근 12px · 600 굵기 · green 600→700 입니다.
+숫자는 서체를 바꾸지 않고 `tabular-nums` 로 자릿수만 맞춥니다.
+
+> 처음에는 "육아수첩 · 관공서 기록부" 방향(모눈 종이, 도장, 얇은 표제)이었습니다. 3D 동네와 두 시각
+> 언어가 부딪히고, 앱과 인상이 달라 바꿨습니다. 토큰 이름도 `--paper` · `--ink` · `--seal` 에서
+> 의미 이름으로 옮겼습니다.
 
 ### 시그니처
 
@@ -66,7 +66,7 @@ npm run build      # out/ 에 정적 파일 생성
 - **성장** — 유모차에서 걸음마로, 마지막에는 책가방을 멥니다. 태어난 봄에 심은 벚나무도 함께 자랍니다
 - **시선** — 그 시기에 부모가 드나드는 건물(어린이집 · 소아과 · 행정복지센터)로 카메라가 갑니다.
   건물 위의 알림 표식은 그 시기에 살아 있는 알림만큼 떠오르고, 부모급여가 끝나기 직전(20–24개월)에는
-  도장 빨강으로 바뀝니다
+  경고 빨강으로 바뀝니다
 
 4월생으로 고른 이유는 동네가 보이는 구간(출생 · 6 · 18 · 72개월)이 봄과 가을에 앉기 때문입니다.
 3월생이면 전부 초봄이라 계절이 흐르는 게 안 보입니다.
@@ -76,7 +76,12 @@ npm run build      # out/ 에 정적 파일 생성
 소급 개월)을 따랐고, 금액을 모르는 정책은 `미상` 으로 둡니다.
 
 구조 문법은 [JellySafe 소개 사이트](https://github.com/JellySafe/Introduce)(스크롤 = 하루)에서
-가져왔고, 색·서체·도장은 이 사이트의 육아수첩 토큰을 그대로 씁니다.
+가져왔고, 색은 3D 동네까지 앱 팔레트(흰 벽 · green · yellow · blue)로 칠했습니다.
+
+**구간은 실제로 그 개월 수에 일어나는 일이 있을 때만 둡니다** — 출생 · 1개월(출생신고) · 6개월(어린이집 대기) ·
+12개월(첫만남이용권 종료) · 18개월(접종) · 24개월(부모급여 종료) · 72개월(취학 전). 개월 수와 관계없는
+이야기(모르는 것 · 부모의 기록 · 개인정보)에 "48개월" 같은 배지를 붙이면 약속이 억지가 되어, 마지막 구간의
+원칙 카드로 모았습니다.
 
 ## 홈을 손볼 때
 
@@ -92,7 +97,7 @@ src/features/
 `[data-month]` 에서 읽습니다. 개발 모드에서는 둘이 어긋나면 콘솔에 경고가 뜹니다.
 
 **개월 수는 문서 진행도가 아니라 구간 위치로 정합니다.** 각 구간 머리가 화면 가운데에 온 순간을
-닻으로 삼아 사이를 잇습니다. 구간 길이가 제각각이라 진행도를 선형으로 나누면 "18개월" 도장을 읽는
+닻으로 삼아 사이를 잇습니다. 구간 길이가 제각각이라 진행도를 선형으로 나누면 "18개월" 배지를 읽는
 순간 장면은 15개월이 됩니다.
 
 **스크롤 경로에 React 상태를 두지 않습니다.** GrowScene 은 초당 60회 도는 경로라 값은 ref 로

src/app/benefits/page.tsx

@@ -26,17 +26,17 @@ export default function BenefitsPage(): ReactNode {
       />
 
       <Section label="자격 판정" title="세 갈래로 나눕니다">
-        <ul className="space-y-px" style={{ backgroundColor: 'var(--rule)' }}>
+        <ul className="space-y-px" style={{ backgroundColor: 'var(--line)' }}>
           {VERDICTS.map((v) => (
-            <li key={v.head} className="p-6" style={{ backgroundColor: 'var(--paper)' }}>
+            <li key={v.head} className="p-6" style={{ backgroundColor: 'var(--bg)' }}>
               <div className="flex flex-wrap items-baseline gap-3">
-                <span className="stamp" style={{ color: v.tone }}>
+                <span className="badge" style={{ color: v.tone }}>
                   {v.head}
                 </span>
               </div>
               <p
                 className="mt-4 max-w-2xl text-[0.95rem] leading-[1.85]"
-                style={{ color: 'var(--ink-soft)' }}
+                style={{ color: 'var(--fg-soft)' }}
               >
                 {v.body}
               </p>
@@ -54,15 +54,15 @@ export default function BenefitsPage(): ReactNode {
           </p>
         </div>
 
-        <div className="mt-8 grid gap-px md:grid-cols-2" style={{ backgroundColor: 'var(--rule)' }}>
-          <div className="p-6" style={{ backgroundColor: 'var(--paper)' }}>
+        <div className="mt-8 grid gap-px md:grid-cols-2" style={{ backgroundColor: 'var(--line)' }}>
+          <div className="p-6" style={{ backgroundColor: 'var(--bg)' }}>
             <p className="label">원인 하나</p>
             <p className="mt-3 text-[0.95rem] leading-[1.85]">
               자녀 수와 소득 조건을 보지 않고 지역에 있는 정책을 전부 더하고 있었습니다. 다자녀 전용
               지원금이 외동 가정에도 합산됐습니다.
             </p>
           </div>
-          <div className="p-6" style={{ backgroundColor: 'var(--paper)' }}>
+          <div className="p-6" style={{ backgroundColor: 'var(--bg)' }}>
             <p className="label">원인 둘</p>
             <p className="mt-3 text-[0.95rem] leading-[1.85]">
               <strong>대상 연령을 지급 기간으로 착각</strong>했습니다. 월 250만 원짜리 지원금에 대상
@@ -74,21 +74,21 @@ export default function BenefitsPage(): ReactNode {
         <div className="mt-8 flex flex-wrap items-center gap-5">
           <span
             className="figure text-[1.5rem]"
-            style={{ color: 'var(--past)', textDecoration: 'line-through' }}
+            style={{ color: 'var(--muted)', textDecoration: 'line-through' }}
           >
             295,068,000원
           </span>
-          <span aria-hidden="true" style={{ color: 'var(--past)' }}>
+          <span aria-hidden="true" style={{ color: 'var(--muted)' }}>
             →
           </span>
-          <span className="figure text-[1.75rem]" style={{ color: 'var(--seal-deep)' }}>
+          <span className="figure text-[1.75rem]" style={{ color: 'var(--brand-deep)' }}>
             80,568,000원
           </span>
         </div>
 
         <p
           className="mt-6 max-w-2xl text-[0.9rem] leading-[1.85]"
-          style={{ color: 'var(--ink-soft)' }}
+          style={{ color: 'var(--fg-soft)' }}
         >
           지급 기간을 별도 항목으로 떼어 내고 자격 판정을 넣은 결과입니다. 융자는 갚아야 하는 돈이라
           총액에서 빼고 따로 안내합니다. 같은 목적이라 동시에 받을 수 없는 지원금은 가장 큰 것
@@ -104,7 +104,7 @@ export default function BenefitsPage(): ReactNode {
             <span className="figure text-[0.95rem]">“융자(연 1.5%)”</span> 같은 식입니다.
             기계로 뽑다 실패한 정책을 버리면 목록에서 사라져 존재 자체를 모르게 됩니다.
           </p>
-          <p className="mt-5 text-[1.0625rem] leading-[1.9]" style={{ color: 'var(--ink-soft)' }}>
+          <p className="mt-5 text-[1.0625rem] leading-[1.9]" style={{ color: 'var(--fg-soft)' }}>
             그래서 버리지 않고 <span className="unknown">미상</span>으로 남깁니다. 대신 실제로
             받아 보신 분께 금액을 묻고, 같은 값이 세 건 모이면 그때 확정합니다. 관리자가 직접 확인한
             정책은 지역별 검증 비율과 함께 표시합니다.
@@ -129,7 +129,7 @@ export default function BenefitsPage(): ReactNode {
             같은 조건이어도 지자체마다 지원이 다릅니다. 다른 지역에 살면 얼마를 더 받는지 계산하고,
             차액의 근거가 된 정책 목록을 함께 드립니다.
           </p>
-          <p className="mt-5 text-[0.9rem] leading-[1.85]" style={{ color: 'var(--ink-soft)' }}>
+          <p className="mt-5 text-[0.9rem] leading-[1.85]" style={{ color: 'var(--fg-soft)' }}>
             숫자만 주면 믿을 이유가 없습니다. 어떤 정책 때문에 차이가 나는지 보이면 직접 확인하실 수
             있습니다.
           </p>