feat(home): 소개 사이트에 앱 첫 화면을 보여준다

src/components/AppScreenMock.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react'
+
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
+
+/**
+ * 앱의 첫 화면.
+ *
+ * 소개 사이트가 제품 화면을 한 번도 보여주지 않으면, 읽는 사람은 "그래서 앱을 열면 뭐가
+ * 보이는데?" 를 끝까지 알 수 없다. 스크린샷 대신 같은 구조를 여기서 다시 그린다 — 화면이
+ * 바뀔 때마다 이미지를 다시 찍어 올릴 필요가 없고, 글자가 DOM 이라 읽히고 번역된다.
+ *
+ * 항목은 앱의 "지금 할 일"이 실제로 올리는 종류와 같다(소급 가능한 지원금 · 접종 예정일 ·
+ * 대기 순번). 값은 예시라 화면에도 예시라고 적는다.
+ */
+type Row = { tag: string; title: string; detail: string; urgent?: boolean }
+
+const ROWS: Row[] = [
+  {
+    tag: '지원금',
+    title: '소급 신청할 수 있는 지원금 2건',
+    detail: '120만원 · 기간이 지나면 사라져요',
+    urgent: true,
+  },
+  { tag: '접종', title: '서아 · 일본뇌염 2차', detail: '2026.10.02 · 7일 남음' },
+  { tag: '어린이집', title: '대기 중인 어린이집 3곳', detail: '가장 앞선 순번 4번' },
+]
+
+export default function AppScreenMock(): ReactNode {
+  return (
+    <figure className="yr-phone">
+      <div className="yr-phone__frame">
+        <div className="yr-phone__bar">
+          {/* eslint-disable-next-line @next/next/no-img-element -- 정적 출력이라 next/image 최적화를 쓸 수 없다 */}
+          <img src={`${BASE_PATH}/icon.svg`} alt="" width={20} height={20} className="rounded-[6px]" />
+          <span className="yr-phone__title">홈</span>
+        </div>
+
+        {/* 앱 상단의 기준 — 어느 아이, 어디 사는가 */}
+        <div className="yr-phone__chips">
+          <span className="yr-phone__chip yr-phone__chip--child">서아 · 2세 3개월</span>
+          <span className="yr-phone__chip">성남시 분당구</span>
+        </div>
+
+        <p className="yr-phone__section">지금 할 일</p>
+        <ul className="yr-phone__list">
+          {ROWS.map((row) => (
+            <li key={row.title}>
+              <span className={row.urgent ? 'yr-phone__tag yr-phone__tag--urgent' : 'yr-phone__tag'}>
+                {row.tag}
+              </span>
+              <span>
+                <b>{row.title}</b>
+                <small>{row.detail}</small>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <figcaption className="yr-fine">
+        앱을 열면 보이는 첫 화면입니다. 기한이 걸린 것만 위에 오고, 찾아보는 기능은 그 아래에
+        있습니다. 위 값은 예시입니다.
+      </figcaption>
+    </figure>
+  )
+}

src/features/stations/Month01.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import AppScreenMock from '@/components/AppScreenMock'
 import { MEASURED_LABEL, SOURCES, formatCount } from '@/content/figures'
 import { Station, StationHead } from './Station'
 
@@ -53,6 +54,21 @@ export function Month01(): ReactNode {
         ))}
       </div>
 
+      <div className="yr-with-phone">
+        <div>
+          <h3 className="yr-h3" style={{ marginTop: 0 }} data-in="">
+            앱에서는 이렇게 보입니다
+          </h3>
+          <p className="yr-body" data-in="">
+            아이를 등록하면 그 아이의 개월 수를 기준으로 무엇이 열려 있고 무엇이 닫히는지 계산합니다.
+            기한이 걸린 것만 첫 화면에 올라옵니다.
+          </p>
+        </div>
+        <div data-in="">
+          <AppScreenMock />
+        </div>
+      </div>
+
       <h3 className="yr-h3" data-in="">
         네 곳의 정부 데이터를 한 자리에 <span className="yr-when">{MEASURED_LABEL}</span>
       </h3>

src/styles/grow.css

@@ -854,3 +854,115 @@ body:has(.yr-sky) > footer {
     transition: none;
   }
 }
+/* ============================================================
+   앱 화면 — 소개 사이트에서 제품을 한 번은 보여준다
+   ============================================================ */
+.yr-phone {
+  margin: 0;
+  max-width: 340px;
+}
+
+.yr-phone__frame {
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  padding: 16px 14px 20px;
+}
+
+.yr-phone__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px 10px;
+}
+
+.yr-phone__title {
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.yr-phone__chips {
+  display: flex;
+  gap: 6px;
+  padding: 0 4px 14px;
+}
+
+.yr-phone__chip {
+  border-radius: 999px;
+  background: var(--gray-100);
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  color: var(--fg-soft);
+}
+
+.yr-phone__chip--child {
+  background: var(--brand-tint);
+  color: var(--brand-deep);
+  font-weight: 600;
+}
+
+.yr-phone__section {
+  padding: 0 4px 8px;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.yr-phone__list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.yr-phone__list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  background: var(--bg);
+  padding: 12px;
+}
+
+.yr-phone__list b {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.yr-phone__list small {
+  display: block;
+  margin-top: 2px;
+  font-size: 0.75rem;
+  color: var(--fg-soft);
+}
+
+.yr-phone__tag {
+  flex: none;
+  border-radius: 999px;
+  background: var(--brand-tint);
+  padding: 3px 8px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--brand-deep);
+}
+
+.yr-phone__tag--urgent {
+  background: color-mix(in srgb, var(--alert) 12%, transparent);
+  color: var(--alert-deep);
+}
+
+/* 1개월 구간: 간극 표 옆에 앱 화면을 나란히 */
+.yr-with-phone {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
+  gap: 40px;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .yr-with-phone {
+    grid-template-columns: 1fr;
+  }
+}