From 3382296c48d23352b842332aa281950aab7eeafd Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Thu, 24 Sep 2026 05:51:23 +0900
Subject: [PATCH] feat(site-kit): single-language header and a footer with
 business details (D-029)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nine options FM덴탈서비스's landing needed and the kit could not draw:
- SiteHeader locale is optional (no picker); SiteBrand.label names the
  brand link; a wordmark logo with name "" prints once.
- The narrow menu closes on Escape (focus back on the button) and when a
  link inside it is followed. Buttons, new-tab links, an Escape a control
  inside the header already handled, and an Escape from an aria-modal
  element leave it open.
- On touch the brand, navigation, footer and footer-language links are
  44px; at 720px and below the open menu is 44px rows and the closed
  header's first row is 64px.
- SiteFooter details (a block under the brand line) and linksLabel
  (a named nav); SiteLink.emphasis.
- Sections and the hero stop below the sticky header
  (--site-header-block-size); eyebrow tracking and weight hooks.
- Header and footer read brand (and details) once.

A five-lens review before the PR confirmed 15 findings; all are fixed or
documented here: the brand link's touch size, new-tab and modal Escape
cases, footer baseline alignment on touch, details margins, the 16px
mark size scoped to icon marks, and the defaults every consumer gets
(narrow header 89 to 65px on content-box consumers) plus the type change
on SiteHeaderProps["locale"].

Tests: 16 component cases, a development-build hydration test for
directly mounted chrome with getter props, source contracts, and
browser geometry at fine and coarse pointers. Each fails on the code or
CSS it guards.
---
 .../site-kit-single-language-landing.md       |  20 ++
 docs/backlog.md                               |  13 ++
 docs/decisions.md                             |  42 +++++
 package.json                                  |   2 +-
 packages/site-kit/README.ko.md                |  41 ++++
 packages/site-kit/README.md                   |  41 ++++
 packages/site-kit/site-sections.css           |   8 +-
 .../src/solid/__tests__/footer.test.tsx       |   2 +-
 .../solid/__tests__/landing-chrome.test.tsx   | 177 ++++++++++++++++++
 packages/site-kit/src/solid/chrome.tsx        | 139 ++++++++++----
 packages/site-kit/src/solid/types.ts          |  26 ++-
 packages/site-kit/styles.css                  |  34 +++-
 packages/site-kit/vitest.config.ts            |   1 +
 tests/browser/site-kit.spec.ts                | 146 +++++++++++++++
 tests/site-kit-contracts.test.mjs             |  32 ++++
 ...site-kit-landing-chrome-hydration.test.mjs | 150 +++++++++++++++
 16 files changed, 829 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/site-kit-single-language-landing.md
 create mode 100644 packages/site-kit/src/solid/__tests__/landing-chrome.test.tsx
 create mode 100644 tests/site-kit-landing-chrome-hydration.test.mjs

diff --git a/.changeset/site-kit-single-language-landing.md b/.changeset/site-kit-single-language-landing.md
new file mode 100644
index 0000000..fcfddd8
--- /dev/null
+++ b/.changeset/site-kit-single-language-landing.md
@@ -0,0 +1,20 @@
+---
+"@devslab/site-kit": minor
+---
+
+Header and footer options for a single-language landing and a footer that prints business details (D-029). The new props are optional:
+
+- `SiteHeader` `locale` is optional; without it no language picker renders.
+- `SiteBrand.label` names the header brand link; a wordmark `logo` with `name: ""` prints once and leaves no empty `<strong>` in the footer.
+- `SiteFooter` `details` (a block under the brand line) and `linksLabel` (wraps the links in `<nav aria-label>`); `SiteLink.emphasis` draws a link heavier.
+- Sections and the hero stop below the sticky header (`scroll-margin-block-start`, header height `--site-header-block-size`); `--site-hero-eyebrow-tracking` and `--site-hero-eyebrow-weight` tune the hero eyebrow.
+- The header and footer read `brand` (and the footer `details`) once, so inline JSX stays one build per side outside the shell too.
+
+Applies to every consumer:
+
+- The narrow-screen menu closes on Escape (focus back on the menu button) and when a link inside it is followed. Buttons, links that open a new tab or window, and an Escape handled by a control inside the header or an `aria-modal` element leave it open.
+- On touch, the brand link and header, footer and footer-language links are 44px targets.
+- At 720px and below the closed header's first row is 64px with no block padding: phone headers of products without a global `box-sizing: border-box` reset (TraceLinq, BookLinq) get 24px shorter (89px to 65px), and products with a 44px menu button 4px shorter. The open menu is 44px link rows with 12px under the controls. Check the phone header when upgrading.
+- Footer links are baseline-aligned; a footer row with details aligns on its first line. The 16px footer mark size now applies only beside a printed name.
+
+Type change: `SiteHeaderProps["locale"]` is now optional. Code that reads it from a `SiteHeaderProps` value must narrow it (BookLinq's `MarketingFrame` reads `props.header.locale.locale`).
diff --git a/docs/backlog.md b/docs/backlog.md
index a6db9aa..f6f21b7 100644
--- a/docs/backlog.md
+++ b/docs/backlog.md
@@ -206,6 +206,19 @@ D-025. VisionLinq가 `DataTable`로 옮긴 뒤에도 `product-shell.css`에 남
   dense 복사 버튼 규칙 삭제(`.dds-table .console-id`는 유지), 유닛·하네스·1440/390
   스크린샷 확인.
 
+### 16. site-kit 한 언어 랜딩·사업자 정보 바닥글 — `완료` (2026-09-24)
+D-029. FM덴탈서비스 랜딩 리뷰에서 kit으로 못 그리는 9건을 선택 props로:
+- [x] 헤더 `locale` 선택, 브랜드 링크 이름(`SiteBrand.label`), 빈 이름이면 푸터 `<strong>` 없음.
+- [x] 좁은 화면 메뉴: Esc로 닫고 버튼으로 포커스, 링크를 따라가면 닫힘(버튼은 유지, 안쪽이 처리한 Esc는 무시).
+- [x] 터치 44px 링크, 720px 이하 메뉴 44px 줄, 닫힌 좁은 헤더 첫 줄 64px.
+- [x] 섹션 `scroll-margin`(`--site-header-block-size`), 히어로 키커 자간·굵기 사용자 속성.
+- [x] 푸터 `details`·`linksLabel`, `SiteLink.emphasis`.
+- [x] 헤더·푸터가 `brand`·`details`를 한 번만 읽음 — 개발 빌드 하이드레이션 테스트로 고정.
+- [x] 테스트: 컴포넌트 16개(옛 코드에서 실패 확인), 소스 계약, 개발 빌드 하이드레이션(메모 제거 시 실패 확인), 브라우저 기하 마우스·터치·터치 넓은 화면(main CSS에서 실패 확인).
+- [x] 사전 리뷰(5개 관점, 확인된 지적 15건) 반영: 브랜드 링크 44px, 새 탭·수정 키·`aria-modal` Esc에서 메뉴 유지, 푸터 기준선 정렬, details 여백, 워드마크 로고 크기, 모든 소비자 기본값·타입 변경 문서화.
+- **다음(BookLinq·TraceLinq, 올릴 때)**: 휴대폰 헤더 89px → 65px — 375px 시각 확인. BookLinq는 `MarketingFrame`의 `SiteHeaderProps`를 `& { locale: LocaleState }`로 좁혀야 타입 검사가 통과.
+- **다음(fm-dental, 별도 세션)**: 랜딩 구현 때 이 버전을 쓴다 — 워드마크 `logo` + `name: ""` + `label`, `locale` 없음, `details`에 사업자 정보·주소, `linksLabel`, 개인정보처리방침 `emphasis`, 랜딩 뿌리에 `--site-hero-eyebrow-tracking: 0`.
+
 ---
 
 ## P3 — 모바일 이후
diff --git a/docs/decisions.md b/docs/decisions.md
index d2be1ef..4f15623 100644
--- a/docs/decisions.md
+++ b/docs/decisions.md
@@ -5,6 +5,48 @@
 
 ---
 
+## D-029 — 한 언어 랜딩과 사업자 정보 바닥글: 헤더·푸터 선택 props 9가지 (2026-09-24)
+
+**결정.** `SiteHeader`·`SiteFooter`에 선택 옵션을 더한다. 아무것도 넘기지 않는 소비자는 전과 같은 마크업을 받는다(모든 소비자에 적용되는 기본값 변화는 트레이드오프에).
+
+1. `SiteHeader.locale`을 선택으로 — 없으면 언어 메뉴를 그리지 않는다(푸터 `locale`과 같은 `<Show>`).
+2. `SiteBrand.label` → 헤더 브랜드 링크의 `aria-label`. 워드마크를 `logo`로 넘기고 `name: ""`이면 이름이 두 번 찍히지 않고, 푸터도 빈 `<strong>`을 그리지 않는다.
+3. 좁은 화면 메뉴: Esc로 닫고 메뉴 버튼으로 포커스 복귀, 안의 링크를 따라가면 닫힘(같은 페이지 앵커 포함). 버튼(테마 전환)과 새 탭·새 창으로 여는 링크(`target`·수정 키)는 닫지 않는다. 헤더 안 요소의 핸들러가 이미 처리한 Esc(`defaultPrevented` — 국기 메뉴)와 `aria-modal` 요소 안에서 온 Esc(문서에 리스너를 다는 DDS Dialog는 이 핸들러 뒤에 돈다)는 그 컨트롤에 맡긴다.
+4. 터치(`pointer: coarse`)에서 브랜드 링크·헤더·푸터·푸터 언어 링크 44px, 720px 이하 열린 메뉴의 링크는 44px 줄(간격 0 — 16px 간격의 글줄과 거의 같은 피치), 닫힌 좁은 헤더의 첫 줄은 버튼 크기와 무관하게 64px.
+5. 붙는 헤더 아래에 섹션이 멈추게: `.site-hero, .site-section { scroll-margin-block-start: calc(var(--site-header-block-size, 64px) + space-8) }`. 헤더 높이는 사용자 속성 하나(`--site-header-block-size`, 기본 64px).
+6. 히어로 키커의 자간·굵기를 사용자 속성으로: `--site-hero-eyebrow-tracking`(기본 `.18em`), `--site-hero-eyebrow-weight`(기본 `normal`).
+7. `SiteFooter.details`(JSX) — 브랜드 줄 아래 블록(`.site-footer__identity` > `.site-footer__details`, 줄 간격 4px·자식 여백 0). 이때 행은 첫 줄 기준선 정렬(`first baseline`), 푸터 링크 줄은 기준선 정렬 — 터치에서 44px 링크의 글자가 브랜드·저작권 글자와 같은 높이. 푸터 로고의 16px 크기는 이름(`<strong>`) 옆 아이콘 마크에만(`:has(> strong)`) — `name: ""` 워드마크는 자기 크기.
+8. `SiteFooter.linksLabel` — 링크 목록을 `<nav aria-label>`로 감싼다.
+9. `SiteLink.emphasis` — 링크를 굵게(700, `text-primary`). 헤더 내비·푸터 링크·패밀리 링크 모두.
+
+그리고 헤더·푸터가 `brand`(푸터는 `details`도)를 `createMemo`로 한 번만 읽는다 — 셸 밖에서 직접 마운트해도 D-027·D-028의 규칙이 지켜지게.
+
+**계기.** FM덴탈서비스(부산 치과기공물 수거·배송, 가족 밖 첫 site-kit 소비자) 랜딩의 디자인 리뷰가 확인한 36건 중 9건이 "지금 kit으로는 그릴 수 없음"이었다. 한국어만 쓰는데 헤더가 언어 메뉴를 늘 그리고(`locale` 필수), 워드마크 링크에 이름을 줄 방법이 없고, 좁은 화면 메뉴가 Esc·링크 클릭에 닫히지 않아 `#contact`로 가도 열린 메뉴가 섹션을 가렸다. 바닥글에는 사업자 정보·주소를 둘 자리가 없고(브랜드 줄은 인라인 `<p>`라 `<address>`를 넣을 수 없음), 링크 묶음에 이름을 줄 수 없고, 개인정보처리방침을 다른 링크와 구분해 눈에 띄게 할 수 없었다(한국 사이트에서 요구되는 표시). 한글 키커에 `.18em` 모노 자간이 그대로 걸렸다.
+
+**근거.**
+- props는 **선택·가산**이다: 기존 소비자(VisionLinq·AskLinq·BookLinq·TraceLinq)의 마크업은 바뀌지 않는다 — `locale`을 넘기면 메뉴가 그대로 그려지고, `details`·`linksLabel`이 없으면 행 구조(`.site-footer__row > .site-footer__brand` + `ul`)도 그대로다. 테스트가 이 두 경로를 회귀 가드로 고정한다. 기하·동작 기본값은 모든 소비자에 적용된다(트레이드오프).
+- 메뉴 닫힘은 모든 소비자의 결함이었다 — 같은 페이지 앵커 내비게이션은 문서를 바꾸지 않아 열린 메뉴가 남는다. 링크에서만 닫고 버튼에서는 두는 것은 "독자가 어딘가로 갔는가"로 가른 것.
+- 44px은 스펙 §6의 모바일 최소선이고 버튼은 이미 `button.css`의 거친 포인터 규칙으로 44px이다(D-025와 같은 원리: 터치에서는 하한이 이긴다). 좁은 화면 메뉴 줄은 포인터와 무관하게 44px — 줄 목록이라 간격 16px의 글줄(약 40px 피치)과 시각 변화가 거의 없다.
+- 키커 자간은 `:lang(ko)` 규칙이 아니라 사용자 속성으로 열었다: 한국어 키커를 쓰는 다른 가족 제품(AskLinq·VisionLinq)의 현재 모습을 이 결정이 바꾸지 않게. 각 제품이 자기 랜딩 뿌리에서 정한다.
+- `details`·`brand`를 메모로 한 번 읽는 것은 D-027(셸)·D-028(StatusBanner)의 "kit은 받은 JSX를 한 번만 읽는다"를 헤더·푸터 자체로 넓힌 것 — `tests/site-kit-landing-chrome-hydration.test.mjs`가 게터 props로 직접 마운트한 헤더·푸터를 **개발 빌드**로 하이드레이션해 예외 0·잃은 키 0을 고정한다(메모를 직접 읽기로 바꾸면 `Hydration Mismatch`로 실패함을 확인).
+
+**반려한 대안.**
+- **FM이 자기 헤더·푸터를 그림** — 가족 셸을 벗어나면 D-027의 하이드레이션 규율·국기 메뉴·스킵 링크를 다시 구현하게 되고, 메뉴 닫힘 같은 전 소비자 결함은 kit에 남는다.
+- **`messages`에 `footerLinksLabel` 키 추가** — 필수 키라 모든 소비자의 카탈로그가 깨진다(런타임 폴백은 금지 규칙). 선택 prop으로.
+- **한글 키커 자간을 `html:lang(ko)`로 0** — 타이포로는 맞지만 다른 제품의 현재 랜딩을 소리 없이 바꾼다. 필요해지면 그 제품들과 함께 기본값을 바꾼다.
+- **`SiteLink.emphasis`를 `<strong>`으로** — 링크 안 강조 요소는 이름에 섞여 읽힐 뿐 뜻을 더하지 않는다. 클래스(`site-link--emphasis`)로 모양만.
+
+**트레이드오프.** 모든 소비자에 적용되는 기본값이 있다 — 사전 리뷰가 소비자별로 잰 값:
+- 좁은 화면의 닫힌 헤더는 위아래 패딩 대신 첫 줄 높이(64px)로 만든다. `.site-header__inner`는 dds 클래스가 아니라 전역 `box-sizing: border-box` 리셋이 없는 제품에서는 content-box라, 휴대폰 헤더가 **89px → 65px**(TraceLinq·BookLinq, 이전엔 64px 최소 높이 + 위아래 12px 패딩), 메뉴 버튼이 44px인 제품은 69px → 65px(AskLinq 터치, VisionLinq). 데스크톱(65px)과 같아지고 스크롤 간격도 맞게 되지만, 두 제품의 휴대폰 모양이 요청 없이 바뀐다 — 올릴 때 375px 시각 확인이 필요하다. 64px보다 큰 로고를 쓰는 소비자는 `--site-header-block-size`를 올리고, **`:root`나 `.site-shell`에 정해야** 섹션 간격까지 따라온다(`.site-header`에 정하면 헤더만 바뀜).
+- 열린 메뉴: 링크는 간격 0의 44px 줄, 컨트롤 줄 아래 12px(이전엔 헤더 전체 패딩). 첫 링크가 헤더 윗변에서 조금 더 내려간다.
+- 터치 기기에서 가족 전 제품의 브랜드 링크·바닥 링크가 44px 누르는 면(이전엔 글줄 높이) — 바닥 링크 줄이 높아진다. 브랜드 링크는 inline에서 inline-flex(가운데 정렬)로.
+- 메뉴가 Esc·링크 따라가기로 닫힌다(전 소비자의 결함 수정).
+- **타입 변경**: `SiteHeaderProps["locale"]`이 선택이 되어, 그 값을 `SiteHeaderProps`에서 읽는 코드는 좁혀야 한다 — BookLinq `MarketingFrame`의 `props.header.locale.locale`이 `tsc --strict`에서 TS18048. 필수로 두고 컴포넌트 인자만 넓히는 안은 FM이 셸의 `header`로 `locale`을 빼고 넘길 수 없어 반려; 대신 changeset에 적고 BookLinq는 올릴 때 `SiteHeaderProps & { locale: LocaleState }`로 좁힌다(늘 넘기므로 정확). 브라우저 기하는 `tests/browser/site-kit.spec.ts`가 마우스·터치 두 포인터로 고정한다(main의 CSS로 돌리면 5개 실패 확인).
+
+**재검토 시점.** 한국어 키커를 쓰는 두 번째 제품이 자간 0을 원할 때(그때 `:lang(ko)` 기본값), 헤더가 두 줄 이상 높이를 가져야 하는 소비자가 나올 때, 또는 TraceLinq·BookLinq가 휴대폰 헤더의 이전 높이를 원할 때(그때 패딩 경로를 옵션으로).
+
+---
+
 ## D-028 — 부품은 `children`도 한 번만 읽는다: `StatusBanner`의 이중 읽기 (2026-09-16)
 
 **결정.** `StatusBanner`가 `props.children`을 `createMemo`로 한 번 읽어, 진위 검사와
diff --git a/package.json b/package.json
index 3a4bd21..c3280a4 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "verify:table:a11y": "pnpm --filter @devslab/dds-table run test:a11y",
     "verify:table:release": "pnpm run verify:foundation:core && pnpm --filter @devslab/dds-table run build && node scripts/verify-table-release.mjs",
     "verify:site-kit:i18n": "node --test tests/site-kit-core.test.mjs tests/site-kit-publisher.test.mjs",
-    "verify:site-kit:ui": "node --test tests/site-kit-contracts.test.mjs tests/site-kit-worker.test.mjs && pnpm --filter @devslab/site-kit run test && pnpm --filter @devslab/site-kit run check && pnpm --filter @devslab/site-kit run build && node --test tests/site-kit-hydration.test.mjs tests/site-kit-status-banner-hydration.test.mjs && pnpm --filter @devslab/site-kit run test:worker",
+    "verify:site-kit:ui": "node --test tests/site-kit-contracts.test.mjs tests/site-kit-worker.test.mjs && pnpm --filter @devslab/site-kit run test && pnpm --filter @devslab/site-kit run check && pnpm --filter @devslab/site-kit run build && node --test tests/site-kit-hydration.test.mjs tests/site-kit-status-banner-hydration.test.mjs tests/site-kit-landing-chrome-hydration.test.mjs && pnpm --filter @devslab/site-kit run test:worker",
     "verify:site-kit:seo": "node --test tests/site-kit-core.test.mjs tests/site-kit-publisher.test.mjs",
     "verify:site-kit:browser": "playwright test --config playwright.site-kit.config.ts",
     "verify:site-kit:release": "pnpm run verify:foundation:core && pnpm --filter @devslab/dds-solid run build && pnpm --filter @devslab/site-kit run build && node scripts/verify-site-kit-release.mjs",
diff --git a/packages/site-kit/README.ko.md b/packages/site-kit/README.ko.md
index 7419333..abcc279 100644
--- a/packages/site-kit/README.ko.md
+++ b/packages/site-kit/README.ko.md
@@ -21,6 +21,47 @@ claim leaf가 검증된 사실 레지스트리를 참조하도록 강제한다.
 
 `MarketingShell`은 아무것도 렌더하기 전에 `header`·`footer`를 한 번(메모) 읽는다. `header={{ … }}`는 게터로 컴파일되므로 셸이 prop마다 다시 읽으면 리터럴 안에서 즉시 만들어진 JSX(`actions` 앵커, 로고)가 읽을 때마다 다시 만들어져 하이드레이션 키를 소모하고 — 서버와 브라우저의 횟수가 다르다 — 클라이언트는 헤더를 템플릿에서 다시 만든다. 셸 밖에서 `SiteHeader`·`SiteFooter`를 직접 마운트하는 제품은 같은 방식으로 자기 props를 한 번만 읽어야 한다. 국기 스프라이트는 이유가 무엇이든 클라이언트에 빈 채로 도착하면 본문을 로드한다.
 
+헤더와 푸터는 `brand`(푸터는 `details`도)를 스스로 한 번만 읽는다. 그래서 셸 밖에서도 인라인으로 만든 로고·details 블록이 서버와 브라우저에서 각각 한 번씩만 만들어진다(D-029).
+
+## 헤더·푸터 옵션
+
+한 언어만 쓰는 제품과, 사업자 정보를 바닥에 적어야 하는 제품을 위한 옵션(D-029). props는 모두 선택이고, 아무것도 넘기지 않는 제품은 전과 같은 마크업을 받는다. 다만 모든 제품에 적용되는 기본값 몇 가지가 있다(옵션 목록 뒤).
+
+```tsx
+<MarketingShell
+  mainWidth="bleed"
+  header={{
+    brand: { name: "", href: "/", label: "Acme 첫 화면", logo: <Wordmark /> }, // 워드마크가 로고 — 이름이 두 번 찍히지 않게 name ""
+    navigation: [{ href: "#how", label: "이용 방법" }, { href: "#contact", label: "문의" }],
+    messages,
+    get actions() { return <a class="dds-btn dds-btn--primary" href="#contact">이용 문의</a>; },
+    // locale 없음: 언어 메뉴 없음
+  }}
+  footer={{
+    brand: { name: "", href: "/", logo: <Wordmark /> },
+    get details() { return <><p>상호 Acme · 사업자등록번호 000-00-00000</p><address>서울 …</address></>; },
+    linksLabel: "바닥 메뉴",
+    links: [{ href: "/terms", label: "이용약관" }, { href: "/privacy", label: "개인정보처리방침", emphasis: true }],
+    copyright: "© Acme",
+    messages,
+  }}
+  messages={messages}
+>…</MarketingShell>
+```
+
+- `SiteHeader`의 `locale`은 선택이다. 넘기지 않으면 언어 메뉴를 그리지 않는다 — 언어가 하나뿐인 메뉴는 고장 난 것처럼 보인다. 푸터의 `locale`은 원래 이렇게 동작했다.
+- `SiteBrand.label`은 헤더 브랜드 링크의 이름(`aria-label`)이다. 화면에 보이는 이름으로 시작한다. 워드마크를 `logo`로 넘기면 `name: ""` — 그러면 푸터도 빈 `<strong>`을 그리지 않는다.
+- 좁은 화면의 메뉴는 Esc로 닫히고(포커스는 메뉴 버튼으로 돌아감), 안의 링크를 따라가도 닫힌다 — 같은 페이지 앵커도. 안 그러면 열린 메뉴가 방금 고른 섹션을 가린다. 안의 버튼(테마 전환)과 새 탭·새 창으로 여는 링크는 메뉴를 닫지 않는다. 헤더 안의 컨트롤(국기 메뉴)이 이미 처리한 Esc와 `aria-modal` 요소 안에서 온 Esc는 그 컨트롤에 맡긴다.
+- 터치(`pointer: coarse`): 브랜드 링크·내비게이션·푸터·푸터 언어 링크가 버튼처럼 44px 누르는 면이다. 720px 이하에서 열린 메뉴의 링크는 44px 줄이고, 닫힌 헤더의 첫 줄은 64px 그대로다.
+- `SiteFooter`의 `details`: 브랜드 줄 아래 블록(사업자 정보, `<address>`), 줄 간격 4px·문단 여백 없음. `linksLabel`은 링크를 `<nav aria-label>`로 감싼다 — 헤더 내비게이션과 다른 이름으로. `logo`로 넘긴 푸터 워드마크(`name: ""`)는 자기 크기를 지킨다 — 16px은 이름 옆 아이콘 마크용 — 그리고 접근 가능한 이름을 스스로 가진다(`<img alt>`나 글자). `label`은 헤더 링크의 이름일 뿐이다.
+- `SiteLink.emphasis`는 링크를 굵게 그린다(헤더 내비게이션·푸터 링크·패밀리 링크). 법이 눈에 띄게 하라는 개인정보처리방침용.
+- 섹션(그리고 히어로)은 같은 페이지 링크로 이동하면 붙어 있는 헤더 아래에 멈춘다: `scroll-margin-block-start` = 헤더 높이 + 8px. 헤더 높이는 `--site-header-block-size`(기본 64px) — `:root`나 `.site-shell`(헤더와 `<main>`의 공통 조상)에 정한다. `.site-header`에 정하면 섹션은 64px 간격 그대로다.
+- `--site-hero-eyebrow-tracking`(기본 `.18em`)과 `--site-hero-eyebrow-weight`(기본 `normal`)로 히어로 키커를 조정한다. 넓은 모노 자간은 라틴 대문자에 맞고, 키커가 한국어인 제품은 랜딩 뿌리에서 자간을 `0`으로 둔다.
+
+새 props를 쓰든 안 쓰든 모든 제품에 적용되는 기본값: 위의 44px 터치 누르는 면, 좁은 헤더 첫 줄이 `--site-header-block-size`(64px)이고 위아래 패딩 없음 — 전역 `box-sizing: border-box` 리셋이 없는 제품은 휴대폰 헤더가 24px 낮아지고(64px에 위아래 12px 패딩이었음), 메뉴 버튼이 44px인 제품은 4px 낮아진다 — 열린 메뉴의 링크는 간격 없는 44px 줄이고 컨트롤 줄 아래 12px, 섹션·히어로의 스크롤 간격, Esc·링크로 메뉴 닫힘, 푸터 링크의 기준선 정렬과 details가 있는 줄의 첫 줄 정렬.
+
+타입 메모: `SiteHeaderProps["locale"]`은 이제 `LocaleState | undefined`다. `SiteHeaderProps` 값에서 읽는 코드(`header.locale.locale`)는 좁혀야 한다 — 예를 들어 제품이 늘 넘긴다면 그 값을 `SiteHeaderProps & { locale: LocaleState }`로 타입한다.
+
 ## 브랜드 아이콘
 
 모든 제품의 아이콘 파일은 `@devslab/linq-brand`(`dist/<product>/`)에서 온다. `brandIconLinks()`는 그중 어떤 파일을 페이지 head가 어떤 순서로 링크하는지 정하는 유일한 자리다.
diff --git a/packages/site-kit/README.md b/packages/site-kit/README.md
index 4bf7129..f3c8eab 100644
--- a/packages/site-kit/README.md
+++ b/packages/site-kit/README.md
@@ -21,6 +21,47 @@ control search indexing, citation crawlers, and model-training crawlers.
 
 `MarketingShell` reads `header` and `footer` once (a memo) before it renders anything. `header={{ … }}` compiles to a getter; if the shell re-read it per prop, any JSX built eagerly inside the literal (an `actions` anchor, a logo) would be built again on each read and consume hydration keys — a different number of times on the server than in the browser — and the client would rebuild the header from templates. A product that mounts `SiteHeader` or `SiteFooter` directly, outside the shell, has to read its own props once the same way. The flag sprite loads its bodies whenever it reaches the client empty, whatever the reason.
 
+The header and footer read `brand` (and the footer its `details`) once themselves, so a logo or details block built inline stays one build per side even outside the shell (D-029).
+
+## Header and footer options
+
+For a single-language product, and for a footer that has to print business details (D-029). The props are optional; a product that passes none of them gets the same markup. A few defaults apply to every product (listed after the options).
+
+```tsx
+<MarketingShell
+  mainWidth="bleed"
+  header={{
+    brand: { name: "", href: "/", label: "Acme home", logo: <Wordmark /> }, // the wordmark is the logo; name "" so it does not print twice
+    navigation: [{ href: "#how", label: "How it works" }, { href: "#contact", label: "Contact" }],
+    messages,
+    get actions() { return <a class="dds-btn dds-btn--primary" href="#contact">Get in touch</a>; },
+    // no `locale`: no language picker
+  }}
+  footer={{
+    brand: { name: "", href: "/", logo: <Wordmark /> },
+    get details() { return <><p>Acme Ltd · Reg. 000-00-00000</p><address>1 Main St</address></>; },
+    linksLabel: "Footer links",
+    links: [{ href: "/terms", label: "Terms" }, { href: "/privacy", label: "Privacy policy", emphasis: true }],
+    copyright: "© Acme",
+    messages,
+  }}
+  messages={messages}
+>…</MarketingShell>
+```
+
+- `SiteHeader` `locale` is optional. Omit it and no language picker renders — a picker with one language reads as broken. The footer's `locale` already worked this way.
+- `SiteBrand.label` names the header brand link (`aria-label`). Start it with the visible name. With a wordmark as `logo`, pass `name: ""`; the footer then renders no empty `<strong>`.
+- The narrow-screen menu closes on Escape (focus returns to the menu button) and when a link inside it is followed — including a same-page anchor, which would otherwise leave the open menu covering the section. Buttons inside it (the theme toggle) and links that open a new tab or window leave it open. An Escape that a control inside the header already handled (the flag menu), or that comes from inside an `aria-modal` element, is left to that control.
+- Touch (`pointer: coarse`): the brand link, navigation, footer and footer-language links are 44px targets, as buttons already are. At 720px and below the open menu's links are 44px rows, and the closed header's first row keeps its 64px height.
+- `SiteFooter` `details`: a block under the brand line (business registration, an `<address>`), its lines 4px apart with no paragraph margins. `linksLabel` wraps the links in `<nav aria-label>`; name it differently from the header's navigation. A footer wordmark passed as `logo` (with `name: ""`) keeps its own size — the 16px size is for an icon mark beside a printed name — and carries its own accessible text (`<img alt>`, or text), because `label` names only the header link.
+- `SiteLink.emphasis` draws a link heavier (header navigation, footer links, family links) — for a Korean site's privacy policy, which the law asks to stand out.
+- Sections (and the hero) stop below the sticky header when an in-page link targets them: `scroll-margin-block-start` is the header height plus 8px. The header height is `--site-header-block-size` (default 64px); set it on `:root` or `.site-shell` — an ancestor of both the header and `<main>` — not on `.site-header`, or the sections keep the 64px offset.
+- `--site-hero-eyebrow-tracking` (default `.18em`) and `--site-hero-eyebrow-weight` (default `normal`) tune the hero eyebrow. Wide mono tracking suits Latin capitals; a product whose eyebrow is Korean sets the tracking to `0` on its landing root.
+
+Defaults that apply to every product, with or without the new props: the 44px touch targets above; the narrow header's first row is `--site-header-block-size` (64px) with no block padding — a product without a global `box-sizing: border-box` reset loses 24px of phone header height (it was 64px plus 12px padding each side), and one whose menu button is 44px loses 4px; the open menu's links are 44px rows with no gap and its controls row has 12px below it; sections and the hero get the scroll offset; the menu closes on Escape and on following a link; footer links are baseline-aligned, and a row with details aligns on the first line.
+
+Type note: `SiteHeaderProps["locale"]` is now `LocaleState | undefined`. Code that reads it from a `SiteHeaderProps` value (`header.locale.locale`) must narrow it — for example type the value as `SiteHeaderProps & { locale: LocaleState }` where the product always sets it.
+
 ## Brand icons
 
 Every product's icon files come from `@devslab/linq-brand` (`dist/<product>/`); `brandIconLinks()` is the one place that says which of them a page head links, and in what order:
diff --git a/packages/site-kit/site-sections.css b/packages/site-kit/site-sections.css
index 25eb80a..2dbb8ef 100644
--- a/packages/site-kit/site-sections.css
+++ b/packages/site-kit/site-sections.css
@@ -4,6 +4,10 @@
    tokens carry light and dark. */
 
 .site-section { padding-block: var(--dds-space-64); border-block-start: 1px solid var(--dds-color-border-default); }
+/* The site header sticks to the top; an in-page link ("#how") stops the section below it, not under it.
+   A product that changes --site-header-block-size sets it on :root or .site-shell (an ancestor of both
+   the header and <main>) — set on .site-header it resizes the header but never reaches the sections. */
+.site-hero, .site-section { scroll-margin-block-start: calc(var(--site-header-block-size, 64px) + var(--dds-space-8)); }
 .site-section[data-tone="band"] { background: var(--dds-color-bg-subtle); }
 .site-section__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
 
@@ -53,7 +57,9 @@ html:lang(ko) .site-rows__body { word-break: keep-all; overflow-wrap: break-word
    height rule — a swapping scene fixes its own height in the consumer. */
 .site-hero { padding-block: var(--dds-space-64); }
 .site-hero__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dds-space-48); align-items: start; }
-.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); letter-spacing: .18em; }
+/* Tracking and weight are hooks: wide mono tracking suits Latin caps, not Hangul — a product whose
+   eyebrow is Korean sets --site-hero-eyebrow-tracking: 0 (and a weight) on its landing root. */
+.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); font-weight: var(--site-hero-eyebrow-weight, normal); letter-spacing: var(--site-hero-eyebrow-tracking, .18em); }
 .site-hero__copy h1 { margin: 0; font-size: var(--dds-typo-display-font-size); line-height: var(--dds-typo-display-line-height); letter-spacing: -.025em; text-wrap: balance; white-space: pre-line; }
 .site-hero__lede { margin: 0; margin-block-start: var(--dds-space-24); max-inline-size: 46ch; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-1-font-size); line-height: 1.7; }
 .site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dds-space-16) var(--dds-space-24); margin-block-start: var(--dds-space-32); }
diff --git a/packages/site-kit/src/solid/__tests__/footer.test.tsx b/packages/site-kit/src/solid/__tests__/footer.test.tsx
index bdb9312..cbae8b0 100644
--- a/packages/site-kit/src/solid/__tests__/footer.test.tsx
+++ b/packages/site-kit/src/solid/__tests__/footer.test.tsx
@@ -152,7 +152,7 @@ it("sizes the footer link row, so it does not inherit the body step", () => {
   // Without this the row renders at the 16px body size and reads a step larger
   // than the same row on a sibling product's page. Each consumer that noticed
   // had added the rule locally.
-  expect(STYLES).toMatch(/\.site-footer__links \{ font-size: var\(--dds-typo-body-2-font-size\); \}/);
+  expect(STYLES).toMatch(/\.site-footer__links \{ font-size: var\(--dds-typo-body-2-font-size\);[^}]*\}/);
 });
 
 it("collapses the language row behind the current language's own name", () => {
diff --git a/packages/site-kit/src/solid/__tests__/landing-chrome.test.tsx b/packages/site-kit/src/solid/__tests__/landing-chrome.test.tsx
new file mode 100644
index 0000000..5381e82
--- /dev/null
+++ b/packages/site-kit/src/solid/__tests__/landing-chrome.test.tsx
@@ -0,0 +1,177 @@
+import { render } from "solid-js/web";
+import { afterEach, expect, it, vi } from "vitest";
+
+import { SiteFooter, SiteHeader } from "../index";
+import { locale, messages } from "./fixtures";
+
+// D-029: what a single-language landing (FM덴탈서비스) needs from the chrome —
+// no picker, a named wordmark link, a menu that closes like a menu, and a
+// footer that carries business details.
+
+let dispose: (() => void) | undefined;
+afterEach(() => {
+  dispose?.();
+  dispose = undefined;
+  document.body.replaceChildren();
+  vi.unstubAllGlobals();
+});
+
+function mount(node: () => any) {
+  const host = document.body.appendChild(document.createElement("div"));
+  dispose = render(node, host);
+  return host;
+}
+
+const navigation = [{ href: "#how", label: "How it works" }, { href: "#contact", label: "Contact" }];
+
+function header(extra: Record<string, unknown> = {}) {
+  return mount(() => <SiteHeader
+    brand={{ name: "Acme", href: "/" }}
+    navigation={navigation}
+    messages={messages}
+    actions={<a class="cta" href="#contact">Get in touch</a>}
+    {...extra}
+  />);
+}
+
+const press = (target: Element, key: string) => target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+
+it("renders no language picker when no locale is passed, and keeps the actions", () => {
+  const host = header();
+  expect(host.querySelector(".site-locale, .site-locale-flag, select")).toBeNull();
+  expect(host.querySelector(".site-header__controls .cta")?.textContent).toBe("Get in touch");
+});
+
+it("still renders the picker when a locale is passed", () => {
+  const host = header({ locale });
+  expect(host.querySelector(".site-header__controls select, .site-header__controls .site-locale-flag")).not.toBeNull();
+});
+
+it("names the brand link and prints a wordmark logo once when the name is empty", () => {
+  const host = header({ brand: { name: "", href: "/", label: "Acme home", logo: <span class="mark"><b>Ac</b>me</span> } });
+  const brand = host.querySelector(".site-brand")!;
+  expect(brand.getAttribute("aria-label")).toBe("Acme home");
+  expect(brand.textContent).toBe("Acme");
+});
+
+it("leaves the brand link unlabelled when no label is given", () => {
+  const host = header();
+  expect(host.querySelector(".site-brand")?.hasAttribute("aria-label")).toBe(false);
+});
+
+it("closes the open menu on Escape and returns focus to the menu button", () => {
+  const host = header();
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+  const link = host.querySelector<HTMLAnchorElement>(".site-nav__list a")!;
+  link.focus();
+  press(link, "Escape");
+  expect(button.getAttribute("aria-expanded")).toBe("false");
+  expect(host.querySelector<HTMLElement>(".site-nav")!.dataset.open).toBe("false");
+  expect(document.activeElement).toBe(button);
+});
+
+it("leaves the menu open when a control inside already handled that Escape", () => {
+  const host = header();
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  const link = host.querySelector<HTMLAnchorElement>(".site-nav__list a")!;
+  // A nested disclosure (the flag menu) closes itself first and marks the event handled.
+  link.addEventListener("keydown", (event) => event.preventDefault());
+  press(link, "Escape");
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+});
+
+it("ignores other keys", () => {
+  const host = header();
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  press(button, "Enter");
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+});
+
+it("closes the menu when a navigation link or an action link is followed", () => {
+  const host = header();
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  host.querySelector<HTMLAnchorElement>(".site-nav__list a")!.click();
+  expect(button.getAttribute("aria-expanded")).toBe("false");
+
+  button.click();
+  host.querySelector<HTMLAnchorElement>(".site-header__controls .cta")!.click();
+  expect(button.getAttribute("aria-expanded")).toBe("false");
+  expect(host.querySelector<HTMLElement>(".site-header__controls")!.dataset.open).toBe("false");
+});
+
+it("keeps the menu open when a link opens a new tab or window", () => {
+  const host = header({ navigation: [...navigation, { href: "https://example.com", label: "Elsewhere", external: true }] });
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  const external = host.querySelector<HTMLAnchorElement>('.site-nav__list a[target="_blank"]')!;
+  // A new tab leaves this document where it was — the same rule as a button.
+  external.addEventListener("click", (event) => event.preventDefault());
+  external.click();
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+  const sameTab = host.querySelector<HTMLAnchorElement>('.site-nav__list a[href="#how"]')!;
+  sameTab.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, ctrlKey: true }));
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+});
+
+it("leaves an Escape from inside a modal in the header to the modal", () => {
+  const host = header({ actions: <div role="dialog" aria-modal="true"><button type="button" class="in-dialog">OK</button></div> });
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  press(host.querySelector(".in-dialog")!, "Escape");
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+});
+
+it("keeps the menu open when a button inside it is pressed", () => {
+  vi.stubGlobal("matchMedia", vi.fn(() => ({ matches: false })));
+  const host = header({ theme: { storageKey: "landing-chrome-theme" } });
+  const button = host.querySelector<HTMLButtonElement>(".site-menu-button")!;
+  button.click();
+  host.querySelector<HTMLButtonElement>(".site-theme-toggle")!.click();
+  expect(button.getAttribute("aria-expanded")).toBe("true");
+});
+
+it("marks an emphasised link in the header and the footer", () => {
+  const host = mount(() => <>
+    <SiteHeader brand={{ name: "Acme", href: "/" }} navigation={[{ href: "/pricing", label: "Pricing", emphasis: true }]} messages={messages} />
+    <SiteFooter brand={{ name: "Acme", href: "/" }} links={[{ href: "/terms", label: "Terms" }, { href: "/privacy", label: "Privacy", emphasis: true }]} copyright="© Acme" messages={messages} />
+  </>);
+  expect([...host.querySelectorAll("a.site-link--emphasis")].map((a) => a.textContent)).toEqual(["Pricing", "Privacy"]);
+  expect(host.querySelector('.site-footer__links a[href="/terms"]')?.hasAttribute("class")).toBe(false);
+});
+
+const footerBase = { brand: { name: "Acme", href: "/" }, links: [{ href: "/privacy", label: "Privacy" }], copyright: "© Acme", messages };
+
+it("puts details in a block under the brand line", () => {
+  const host = mount(() => <SiteFooter {...footerBase} details={<><p class="biz">Acme Ltd · Reg. 000-00-00000</p><address>1 Main St</address></>} />);
+  const identity = host.querySelector(".site-footer__row > .site-footer__identity")!;
+  expect(identity.querySelector(":scope > .site-footer__brand strong")?.textContent).toBe("Acme");
+  expect(identity.querySelector(".site-footer__details .biz")?.textContent).toBe("Acme Ltd · Reg. 000-00-00000");
+  expect(identity.querySelector(".site-footer__details address")?.textContent).toBe("1 Main St");
+  expect(host.querySelectorAll(".site-footer__details address")).toHaveLength(1);
+});
+
+it("keeps the original footer row when there are no details and no links label", () => {
+  const host = mount(() => <SiteFooter {...footerBase} />);
+  expect(host.querySelector(".site-footer__identity")).toBeNull();
+  expect(host.querySelector(".site-footer__row > .site-footer__brand")).not.toBeNull();
+  expect(host.querySelector(".site-footer__row > ul.site-footer__links")).not.toBeNull();
+  expect(host.querySelector("footer nav")).toBeNull();
+});
+
+it("names the footer links as their own landmark when a label is given", () => {
+  const host = mount(() => <SiteFooter {...footerBase} linksLabel="Legal" />);
+  const nav = host.querySelector(".site-footer__row > nav.site-footer__nav")!;
+  expect(nav.getAttribute("aria-label")).toBe("Legal");
+  expect(nav.querySelector(":scope > ul.site-footer__links a")?.textContent).toBe("Privacy");
+});
+
+it("renders no empty <strong> for a wordmark footer brand", () => {
+  const host = mount(() => <SiteFooter {...footerBase} brand={{ name: "", href: "/", logo: <span class="mark">Acme</span> }} />);
+  expect(host.querySelector(".site-footer__brand strong")).toBeNull();
+  expect(host.querySelector(".site-footer__brand .mark")?.textContent).toBe("Acme");
+});
diff --git a/packages/site-kit/src/solid/chrome.tsx b/packages/site-kit/src/solid/chrome.tsx
index 3c961d6..85c6bc2 100644
--- a/packages/site-kit/src/solid/chrome.tsx
+++ b/packages/site-kit/src/solid/chrome.tsx
@@ -1,5 +1,5 @@
 import { Button, Icon, IconButton } from "@devslab/dds-solid";
-import { For, Show, createSignal, onMount, type JSX } from "solid-js";
+import { For, Show, createMemo, createSignal, onMount, type JSX } from "solid-js";
 
 import { LocaleMenu, type LocaleMenuProps, type LocaleMenuVariant } from "./locale-menu";
 import { FAMILY_LOCALES, type LocaleRegistry, type SiteLocale } from "../core/locales.mjs";
@@ -62,7 +62,13 @@ export function ThemeToggle(props: ThemeToggleProps) {
 export interface SiteHeaderProps {
   brand: SiteBrand;
   navigation: SiteLink[];
-  locale: LocaleState;
+  /**
+   * The language picker's state. Omit it and no picker is rendered — a
+   * single-language product (FM덴탈서비스 is Korean-only) has nothing to pick,
+   * and a picker with one entry reads as broken. Same contract as the
+   * footer's `locale`.
+   */
+  locale?: LocaleState;
   messages: SiteMessages;
   theme?: Omit<ThemeToggleProps, "messages">;
   onLocaleChange?: LocaleMenuProps["onLocaleChange"];
@@ -76,27 +82,61 @@ export interface SiteHeaderProps {
   actions?: JSX.Element;
 }
 
+/** The emphasis class a `SiteLink` asks for, or none. */
+const linkClass = (item: SiteLink) => (item.emphasis ? "site-link--emphasis" : undefined);
+
 export function SiteHeader(props: SiteHeaderProps) {
   const [menuOpen, setMenuOpen] = createSignal(false);
+  // brand={{ logo: <Mark /> }} compiles to a getter that rebuilds the logo on
+  // every read; read it once (D-027).
+  const brand = createMemo(() => props.brand);
+  // The narrow-screen menu closes the way a menu is expected to. Escape closes
+  // it and puts focus back on the button that opened it — unless a control
+  // inside already used that Escape (the flag menu closes itself first and
+  // marks the event handled, so one press closes one layer). Following a link
+  // inside it closes it too: a same-page anchor ("#contact") scrolls the page
+  // but leaves the document in place, and without this the open menu kept
+  // covering the section the reader just asked for. Buttons (the theme toggle)
+  // leave it open — the reader has not gone anywhere — and so does a link that
+  // opens a new tab or window. Handlers on elements inside the header run
+  // before this one (the flag menu); a modal inside it (a DDS Dialog listens on
+  // the document, after this) owns its own Escape, so an Escape from inside an
+  // aria-modal element is left alone too.
+  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || !menuOpen()) return;
+    if ((event.target as Element | null)?.closest('[aria-modal="true"]')) return;
+    event.preventDefault();
+    setMenuOpen(false);
+    event.currentTarget.querySelector<HTMLButtonElement>(".site-menu-button")?.focus();
+  };
+  const closeOnLink: JSX.EventHandler<HTMLElement, MouseEvent> = (event) => {
+    const link = (event.target as Element | null)?.closest("a");
+    if (!menuOpen() || !link) return;
+    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+    if (link.target && link.target !== "_self") return;
+    setMenuOpen(false);
+  };
   return (
-    <header class="site-header">
+    <header class="site-header" onKeyDown={onKeyDown}>
       <a class="dds-sr-only" href="#main-content">{props.messages.skipToContent}</a>
       <div class="site-header__inner">
-        <a class="site-brand" href={props.brand.href}>{props.brand.logo}{props.brand.name}</a>
+        <a class="site-brand" href={brand().href} aria-label={brand().label}>{brand().logo}{brand().name}</a>
         <Button class="site-menu-button" tone="ghost" aria-expanded={menuOpen()} aria-controls="site-navigation" onClick={() => setMenuOpen((open) => !open)}>
           {menuOpen() ? props.messages.menuClose : props.messages.menuOpen}
         </Button>
-        <nav id="site-navigation" class="site-nav" data-open={String(menuOpen())} aria-label={props.messages.navigationLabel}>
-          <ul class="site-nav__list"><For each={props.navigation}>{(item) => <li><a href={item.href} target={item.external ? "_blank" : undefined} rel={item.external ? "noreferrer" : undefined}>{item.label}</a></li>}</For></ul>
+        <nav id="site-navigation" class="site-nav" data-open={String(menuOpen())} aria-label={props.messages.navigationLabel} onClick={closeOnLink}>
+          <ul class="site-nav__list"><For each={props.navigation}>{(item) => <li><a class={linkClass(item)} href={item.href} target={item.external ? "_blank" : undefined} rel={item.external ? "noreferrer" : undefined}>{item.label}</a></li>}</For></ul>
         </nav>
-        <div class="site-header__controls" data-open={String(menuOpen())}>
-          <LocaleMenu
-            state={props.locale}
-            messages={props.messages}
-            {...(props.localeVariant ? { variant: props.localeVariant } : {})}
-            {...(props.localeRegistry ? { registry: props.localeRegistry } : {})}
-            {...(props.onLocaleChange ? { onLocaleChange: props.onLocaleChange } : {})}
-          />
+        <div class="site-header__controls" data-open={String(menuOpen())} onClick={closeOnLink}>
+          <Show when={props.locale}>{(locale) => (
+            <LocaleMenu
+              state={locale()}
+              messages={props.messages}
+              {...(props.localeVariant ? { variant: props.localeVariant } : {})}
+              {...(props.localeRegistry ? { registry: props.localeRegistry } : {})}
+              {...(props.onLocaleChange ? { onLocaleChange: props.onLocaleChange } : {})}
+            />
+          )}</Show>
           {props.theme && <ThemeToggle {...props.theme} messages={props.messages} />}
           {props.actions}
         </div>
@@ -184,6 +224,19 @@ export interface SiteFooterProps {
   onLocaleSelect?: (locale: string) => void;
   /** Links after the brand name, middot-separated: the family line, the operator. */
   family?: SiteLink[];
+  /**
+   * A block under the brand line: the business registration line and the
+   * address a Korean commercial site must print, for one. Rendered as a block
+   * (the brand line is an inline `<p>`, where an `<address>` cannot go), and
+   * read once — JSX handed to the kit is built once per side (D-027, D-028).
+   */
+  details?: JSX.Element;
+  /**
+   * Names the link list: with it the list sits in `<nav aria-label>`, a
+   * landmark a screen-reader user can jump to — name it differently from the
+   * header's navigation. Without it the list stays a plain list.
+   */
+  linksLabel?: string;
 }
 
 /**
@@ -201,6 +254,35 @@ export interface SiteFooterProps {
  */
 export function SiteFooter(props: SiteFooterProps) {
   const registry = () => props.localeRegistry ?? (FAMILY_LOCALES as LocaleRegistry<string>);
+  const brand = createMemo(() => props.brand);
+  const details = createMemo(() => props.details);
+  // Each of these is called in exactly one branch of its <Show>, so each
+  // builds its nodes once.
+  const brandLine = () => (
+    <p class="site-footer__brand">
+      {brand().logo}
+      {/* A wordmark passed as the logo comes with `name: ""`; no empty <strong>. */}
+      <Show when={brand().name}>{(name) => <strong>{name()}</strong>}</Show>
+      <For each={props.family ?? []}>{(item) => <>
+        <span aria-hidden="true">·</span>
+        <a class={linkClass(item)} href={item.href}>{item.label}</a>
+      </>}</For>
+    </p>
+  );
+  const linkList = () => (
+    <ul class="site-footer__links">
+      <For each={props.links}>{(item) => <li><a class={linkClass(item)} href={item.href}>{item.label}</a></li>}</For>
+      {/*
+        A copyright like "© 2026 DevsLab" mixes neutral, digit and Latin
+        runs, which the bidi algorithm reorders on an RTL page into
+        "DevsLab 2026 ©". <bdi> isolates it so it reads as written in
+        every direction.
+      */}
+      <li><Show when={props.copyrightHref} fallback={<bdi>{props.copyright}</bdi>}>
+        {(href) => <a href={href()}><bdi>{props.copyright}</bdi></a>}
+      </Show></li>
+    </ul>
+  );
   return (
     <footer class="site-footer" aria-label={props.messages.footerLabel}>
       <div class="site-footer__inner">
@@ -213,26 +295,15 @@ export function SiteFooter(props: SiteFooterProps) {
           />
         )}</Show>
         <div class="site-footer__row">
-          <p class="site-footer__brand">
-            {props.brand.logo}
-            <strong>{props.brand.name}</strong>
-            <For each={props.family ?? []}>{(item) => <>
-              <span aria-hidden="true">·</span>
-              <a href={item.href}>{item.label}</a>
-            </>}</For>
-          </p>
-          <ul class="site-footer__links">
-            <For each={props.links}>{(item) => <li><a href={item.href}>{item.label}</a></li>}</For>
-            {/*
-              A copyright like "© 2026 DevsLab" mixes neutral, digit and Latin
-              runs, which the bidi algorithm reorders on an RTL page into
-              "DevsLab 2026 ©". <bdi> isolates it so it reads as written in
-              every direction.
-            */}
-            <li><Show when={props.copyrightHref} fallback={<bdi>{props.copyright}</bdi>}>
-              {(href) => <a href={href()}><bdi>{props.copyright}</bdi></a>}
-            </Show></li>
-          </ul>
+          <Show when={details()} fallback={brandLine()}>{(content) => (
+            <div class="site-footer__identity">
+              {brandLine()}
+              <div class="site-footer__details">{content()}</div>
+            </div>
+          )}</Show>
+          <Show when={props.linksLabel} fallback={linkList()}>{(label) => (
+            <nav class="site-footer__nav" aria-label={label()}>{linkList()}</nav>
+          )}</Show>
         </div>
       </div>
     </footer>
diff --git a/packages/site-kit/src/solid/types.ts b/packages/site-kit/src/solid/types.ts
index dbcc263..e93ce5a 100644
--- a/packages/site-kit/src/solid/types.ts
+++ b/packages/site-kit/src/solid/types.ts
@@ -21,7 +21,29 @@ export interface SiteMessages {
   retry: string;
 }
 
-export interface SiteLink { href: string; label: string; external?: boolean }
-export interface SiteBrand { name: string; href: string; logo?: JSX.Element }
+export interface SiteLink {
+  href: string;
+  label: string;
+  external?: boolean;
+  /**
+   * Drawn heavier than its neighbours. For a link the product must make
+   * easy to find — a Korean site's 개인정보처리방침 (privacy policy), which
+   * the law asks to stand out from the other footer links.
+   */
+  emphasis?: boolean;
+}
+export interface SiteBrand {
+  name: string;
+  href: string;
+  logo?: JSX.Element;
+  /**
+   * The header brand link's accessible name, when the visible name is not
+   * enough ("Acme home"). Start it with the visible name so voice users can
+   * say what they see. A product whose wordmark is its logo passes the mark
+   * as `logo` and `name: ""` — the name would otherwise print twice — and
+   * names the link here.
+   */
+  label?: string;
+}
 export interface LocaleState { locale: SiteLocale; hrefForLocale: (locale: SiteLocale) => string }
 export type ThemePreference = "system" | "light" | "dark";
diff --git a/packages/site-kit/styles.css b/packages/site-kit/styles.css
index ae2c942..90e8428 100644
--- a/packages/site-kit/styles.css
+++ b/packages/site-kit/styles.css
@@ -8,12 +8,14 @@
 .site-main { flex: 1; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
 .site-main--bleed { inline-size: 100%; }
 .site-header { position: sticky; inset-block-start: 0; z-index: 100; border-block-end: 1px solid var(--dds-color-border-default); background: var(--dds-color-bg-default); }
-.site-header__inner { min-block-size: 64px; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
+.site-header__inner { min-block-size: var(--site-header-block-size, 64px); inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
 .site-brand { justify-self: start; color: var(--dds-color-text-primary); font-weight: 700; text-decoration: none; }
 .site-nav { grid-column: 2; justify-self: center; min-inline-size: 0; }
 .site-nav__list, .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--dds-space-16); padding: 0; margin: 0; list-style: none; }
 .site-nav__list a, .site-footer__links a { color: var(--dds-color-text-secondary); text-decoration: none; }
 .site-nav__list a:hover, .site-footer__links a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+/* SiteLink.emphasis — a link the product must make easy to find (a Korean privacy policy). */
+:is(.site-nav__list, .site-footer__links, .site-footer__brand) a.site-link--emphasis { color: var(--dds-color-text-primary); font-weight: 700; }
 .site-header__controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--dds-space-8); }
 .site-menu-button { display: none; }
 .site-locale { inline-size: auto; min-inline-size: 9rem; }
@@ -22,7 +24,8 @@
 /* The kit gave these rows layout and colour but no size, so the footer
    inherited the 16px body and read a step larger than the same row on a
    sibling product's page. Every consumer that noticed fixed it locally. */
-.site-footer__links { font-size: var(--dds-typo-body-2-font-size); }
+/* Baseline, so a bare copyright line sits level with links that are 44px targets on touch. */
+.site-footer__links { font-size: var(--dds-typo-body-2-font-size); align-items: baseline; }
 .site-footer__langs { font-size: var(--dds-typo-caption-font-size); }
 .site-footer__langs-menu { position: relative; display: inline-block; }
 .site-footer__langs-trigger { display: inline-flex; align-items: center; gap: var(--dds-space-4); color: var(--dds-color-text-muted); cursor: pointer; list-style: none; }
@@ -38,9 +41,17 @@
 .site-footer__langs-list a[aria-current="page"] { color: var(--dds-color-text-primary); font-weight: 600; }
 .site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dds-space-16) var(--dds-space-32); }
 .site-footer__brand { display: inline-flex; align-items: center; gap: var(--dds-space-8); margin: 0; color: var(--dds-color-text-secondary); }
-.site-footer__brand img, .site-footer__brand svg { block-size: 16px; inline-size: 16px; }
+/* The icon mark beside a printed name. A wordmark passed as the logo (name "") keeps its own size. */
+.site-footer__brand:has(> strong) :is(img, svg) { block-size: 16px; inline-size: 16px; }
 .site-footer__brand a { color: inherit; text-decoration: none; }
 .site-footer__brand a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+/* SiteFooter.details — a block under the brand line (business registration, address). */
+.site-footer__identity { display: grid; gap: var(--dds-space-8); min-inline-size: 0; }
+.site-footer__details { display: grid; gap: var(--dds-space-4); color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-2-font-size); }
+.site-footer__details > * { margin: 0; }
+.site-footer__details address { font-style: normal; }
+/* With details the left column runs several lines; the links sit level with its first line, not its middle. */
+.site-footer__row:has(> .site-footer__identity) { align-items: first baseline; }
 .site-legal { max-inline-size: 760px; margin-inline: auto; padding-block: var(--dds-space-40); }
 .site-status { border: 1px solid var(--dds-color-border-default); border-inline-start-width: var(--dds-space-4); border-radius: var(--dds-radius-md); padding: var(--dds-space-12) var(--dds-space-16); }
 .site-status--danger { border-inline-start-color: var(--dds-color-status-danger); }
@@ -54,14 +65,25 @@
 .oss-product-mark--md { --oss-product-mark-size: 32px; }
 .oss-product-mark--lg { --oss-product-mark-size: 48px; }
 
+/* Touch: every link in the chrome is a 44px target (spec §6), as every button already is
+   (dds-css button.css). Placed before the narrow block so its menu rows can override the display. */
+@media (pointer: coarse) {
+  .site-brand, .site-nav__list a, .site-footer__links a, .site-footer__brand a, .site-footer__langs-trigger { display: inline-flex; align-items: center; min-block-size: 44px; }
+  .site-footer__langs-list a { display: flex; align-items: center; min-block-size: 44px; }
+}
+
 @media (max-width: 720px) {
-  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--dds-space-12); }
+  /* The first row is the header's own height whatever the button's size (44px on touch), so the
+     closed header is the same 64px everywhere and a section's scroll offset holds. */
+  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--site-header-block-size, 64px); padding-block: 0; }
   .site-menu-button { display: inline-flex; grid-column: 2; grid-row: 1; }
   .site-nav { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
   .site-nav[data-open="true"] { display: grid; }
-  .site-nav__list { display: grid; }
+  /* The open menu is a list of full-width 44px rows (about the pitch the 16px gap gave text lines). */
+  .site-nav__list { display: grid; gap: 0; }
+  .site-nav__list a { display: flex; align-items: center; min-block-size: 44px; }
   .site-header__controls { display: none; grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; }
-  .site-header__controls[data-open="true"] { display: flex; }
+  .site-header__controls[data-open="true"] { display: flex; padding-block-end: var(--dds-space-12); }
 }
 
 @media (prefers-reduced-motion: reduce) { .site-header { scroll-behavior: auto; } }
diff --git a/packages/site-kit/vitest.config.ts b/packages/site-kit/vitest.config.ts
index fb78e26..0a10075 100644
--- a/packages/site-kit/vitest.config.ts
+++ b/packages/site-kit/vitest.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
       "src/solid/__tests__/oss-product-mark.test.tsx",
       "src/solid/__tests__/sections.test.tsx",
       "src/solid/__tests__/footer.test.tsx",
+      "src/solid/__tests__/landing-chrome.test.tsx",
     ],
     restoreMocks: true,
   },
diff --git a/tests/browser/site-kit.spec.ts b/tests/browser/site-kit.spec.ts
index 3c85d2c..788bd02 100644
--- a/tests/browser/site-kit.spec.ts
+++ b/tests/browser/site-kit.spec.ts
@@ -147,3 +147,149 @@ for (const width of [1280, 375]) {
     await expect(page.locator('.site-locale-flag__option[lang="ko"]')).toBeFocused();
   });
 }
+
+// D-029: a single-language landing (FM덴탈서비스) — no picker, a named wordmark
+// link, a footer with business details, emphasised privacy link, sections that
+// stop below the sticky header. The markup is what SiteHeader/SiteFooter render
+// with those props; the geometry is the real cascade at both pointer types.
+const landingFixture = `<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>${tokens}\n${css}\n${site}
+.landing-root { --site-hero-eyebrow-tracking: 0; --site-hero-eyebrow-weight: 600; }
+.spacer { block-size: 900px; }</style></head><body class="landing-root">
+<div class="site-shell"><header class="site-header"><div class="site-header__inner">
+<a class="site-brand" href="/" aria-label="FM덴탈서비스 첫 화면"><span class="wordmark"><b>FM</b>덴탈서비스</span></a>
+<button type="button" class="dds-btn dds-btn--ghost site-menu-button" aria-expanded="false" aria-controls="site-navigation">메뉴</button>
+<nav id="site-navigation" class="site-nav" data-open="false" aria-label="사이트 메뉴"><ul class="site-nav__list"><li><a href="#how">이용 방법</a></li><li><a href="#scope">서비스 범위</a></li><li><a href="#contact">문의</a></li></ul></nav>
+<div class="site-header__controls" data-open="false"><a class="dds-btn dds-btn--ghost" href="/login">로그인</a><a class="dds-btn dds-btn--primary" href="#contact">이용 문의</a></div>
+</div></header><main id="main-content" class="site-main site-main--bleed">
+<section class="site-hero" aria-labelledby="hero-t"><div class="site-hero__shell"><div class="site-hero__copy"><p class="site-hero__eyebrow">부산 치과기공소 전담 수거·배송</p><h1 id="hero-t">이제 치기공물 수거·배송은
+FM덴탈서비스에서</h1><p class="site-hero__lede">거래 치과에서 수거해 기공소로.</p><div class="site-hero__actions"></div></div><figure class="site-hero__aside" aria-label="기공소 화면 예시"></figure></div></section>
+<section class="site-section" id="how" data-tone="band" aria-labelledby="how-t"><div class="site-section__shell"><h2 id="how-t">이용 방법</h2><div class="spacer"></div></div></section>
+<section class="site-section" id="scope" data-tone="default" aria-labelledby="scope-t"><div class="site-section__shell"><h2 id="scope-t">서비스 범위</h2><div class="spacer"></div></div></section>
+<section class="site-section" id="contact" data-tone="band" aria-labelledby="contact-t"><div class="site-section__shell"><h2 id="contact-t">문의</h2><div class="spacer"></div></div></section>
+</main><footer class="site-footer" aria-label="바닥글"><div class="site-footer__inner"><div class="site-footer__row">
+<div class="site-footer__identity"><p class="site-footer__brand"><span class="wordmark"><b>FM</b>덴탈서비스</span></p><div class="site-footer__details"><p>상호 FM덴탈서비스 · 대표 ○○○ · 사업자등록번호 ○○○-○○-○○○○○</p><address>부산광역시 연제구 거제대로108번길 47, 2층</address></div></div>
+<nav class="site-footer__nav" aria-label="바닥 메뉴"><ul class="site-footer__links"><li><a href="/terms">이용약관</a></li><li><a class="site-link--emphasis" href="/privacy">개인정보처리방침</a></li><li><a href="/login">로그인</a></li><li><bdi>© FM덴탈서비스</bdi></li></ul></nav>
+</div></div></footer></div>
+<script>document.querySelector('.site-menu-button').addEventListener('click', (event) => { const button=event.currentTarget; const open=button.getAttribute('aria-expanded')!=='true'; button.setAttribute('aria-expanded', String(open)); document.querySelector('#site-navigation').dataset.open=String(open); document.querySelector('.site-header__controls').dataset.open=String(open); });</script>
+</body></html>`;
+
+// The top of an element's first line of text — boxes on touch are 44px tall around their text.
+const textTops = (page: import("@playwright/test").Page, selectors: string[]) =>
+  page.evaluate((list) => list.map((selector) => {
+    const range = document.createRange();
+    range.selectNodeContents(document.querySelector(selector)!);
+    return Math.round(range.getClientRects()[0]!.top);
+  }), selectors);
+
+const svgMarkFixture = `<!doctype html><html lang="ko"><head><meta charset="utf-8"><style>${tokens}\n${css}\n${site}</style></head><body>
+<footer class="site-footer" id="wordmark"><div class="site-footer__inner"><div class="site-footer__row"><p class="site-footer__brand"><svg class="mark" width="120" height="20" viewBox="0 0 120 20" aria-label="Acme"><rect width="120" height="20"/></svg></p><ul class="site-footer__links"><li><a href="/p">Privacy</a></li></ul></div></div></footer>
+<footer class="site-footer" id="icon"><div class="site-footer__inner"><div class="site-footer__row"><p class="site-footer__brand"><svg class="mark" width="120" height="20" viewBox="0 0 120 20" aria-hidden="true"><rect width="120" height="20"/></svg><strong>Acme</strong></p><ul class="site-footer__links"><li><a href="/p">Privacy</a></li></ul></div></div></footer>
+</body></html>`;
+
+test("a footer wordmark logo keeps its own size; an icon mark beside a name is 16px", async ({ page }) => {
+  await page.setContent(svgMarkFixture);
+  const widths = await page.evaluate(() => ["#wordmark", "#icon"].map((id) => Math.round(document.querySelector(`${id} .mark`)!.getBoundingClientRect().width)));
+  expect(widths).toEqual([120, 16]);
+});
+
+const heightsOf = (page: import("@playwright/test").Page, selector: string) =>
+  page.locator(selector).evaluateAll((elements) => elements.map((element) => Math.round(element.getBoundingClientRect().height)));
+
+test.describe("landing chrome, fine pointer", () => {
+  test.use({ viewport: { width: 1280, height: 900 }, isMobile: false, hasTouch: false, deviceScaleFactor: 1 });
+
+  test.beforeEach(async ({ page }) => {
+    await page.setContent(landingFixture);
+    expect(await page.evaluate(() => matchMedia("(pointer: coarse)").matches)).toBe(false);
+  });
+
+  test("the header is one 64px row with centred links and no picker", async ({ page }) => {
+    expect(await heightsOf(page, ".site-header__inner")).toEqual([64]);
+    const centre = await page.evaluate(() => {
+      const nav = document.querySelector(".site-nav")!.getBoundingClientRect();
+      const inner = document.querySelector(".site-header__inner")!.getBoundingClientRect();
+      return Math.abs(nav.left + nav.width / 2 - (inner.left + inner.width / 2));
+    });
+    expect(centre).toBeLessThanOrEqual(1);
+    await expect(page.locator(".site-header select, .site-locale-flag")).toHaveCount(0);
+  });
+
+  test("an in-page link stops the section below the sticky header", async ({ page }) => {
+    await page.evaluate(() => { location.hash = "#contact"; });
+    const top = await page.locator("#contact").evaluate((element) => Math.round(element.getBoundingClientRect().top));
+    // 64px header row; the section keeps 8px of air below it.
+    expect(top).toBe(72);
+  });
+
+  test("the eyebrow takes the product's tracking and weight", async ({ page }) => {
+    const eyebrow = await page.locator(".site-hero__eyebrow").evaluate((element) => ({
+      letterSpacing: getComputedStyle(element).letterSpacing,
+      fontWeight: getComputedStyle(element).fontWeight,
+    }));
+    expect(["0px", "normal"]).toContain(eyebrow.letterSpacing);
+    expect(eyebrow.fontWeight).toBe("600");
+  });
+
+  test("the footer details sit under the brand, the links level with its first line, the privacy link heavier", async ({ page }) => {
+    const layout = await page.evaluate(() => {
+      const brand = document.querySelector(".site-footer__brand")!.getBoundingClientRect();
+      const details = document.querySelector(".site-footer__details")!;
+      const firstDetail = details.firstElementChild!.getBoundingClientRect();
+      const privacy = getComputedStyle(document.querySelector('a[href="/privacy"]')!);
+      const terms = getComputedStyle(document.querySelector('.site-footer__links a[href="/terms"]')!);
+      return { brandBottom: Math.round(brand.bottom), detailsTop: Math.round(firstDetail.top), detailsMargin: getComputedStyle(details.firstElementChild!).marginBlockStart, privacyWeight: privacy.fontWeight, termsWeight: terms.fontWeight, privacyColor: privacy.color, termsColor: terms.color };
+    });
+    // the details start one 8px gap under the brand line — no browser paragraph margin
+    expect(layout.detailsMargin).toBe("0px");
+    expect(layout.detailsTop - layout.brandBottom).toBe(8);
+    const [brandText, linkText, copyrightText] = await textTops(page, [".site-footer__brand", '.site-footer__links a[href="/terms"]', ".site-footer__links bdi"]);
+    // baseline-aligned: text of different sizes may differ by a couple of pixels, never a whole line
+    expect(Math.abs(brandText! - linkText!)).toBeLessThanOrEqual(3);
+    expect(copyrightText).toBe(linkText);
+    expect(layout.privacyWeight).toBe("700");
+    expect(layout.termsWeight).not.toBe("700");
+    expect(layout.privacyColor).not.toBe(layout.termsColor);
+    expect(await page.locator(".site-footer__details address").evaluate((element) => getComputedStyle(element).fontStyle)).toBe("normal");
+  });
+});
+
+test.describe("landing chrome, coarse pointer", () => {
+  test.use({ viewport: { width: 375, height: 812 }, isMobile: true, hasTouch: true, deviceScaleFactor: 2 });
+
+  test.beforeEach(async ({ page }) => {
+    await page.setContent(landingFixture);
+    expect(await page.evaluate(() => matchMedia("(pointer: coarse)").matches)).toBe(true);
+  });
+
+  test("the closed header keeps 64px with a 44px menu button and a 44px brand link", async ({ page }) => {
+    expect(await heightsOf(page, ".site-header__inner")).toEqual([64]);
+    expect(await heightsOf(page, ".site-menu-button")).toEqual([44]);
+    expect(await heightsOf(page, ".site-brand")).toEqual([44]);
+  });
+
+  test("the open menu is 44px link rows and the footer links are 44px targets", async ({ page }) => {
+    await page.getByRole("button", { name: "메뉴" }).click();
+    expect(await heightsOf(page, ".site-nav__list a")).toEqual([44, 44, 44]);
+    const rowsFill = await page.locator(".site-nav__list a").evaluateAll((elements) => {
+      const list = elements[0]!.closest("ul")!.getBoundingClientRect();
+      return elements.every((element) => Math.round(element.getBoundingClientRect().width) === Math.round(list.width));
+    });
+    expect(rowsFill, "each menu row is the full width of the list").toBe(true);
+    for (const height of await heightsOf(page, ".site-footer__links a")) expect(height).toBeGreaterThanOrEqual(44);
+    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+    expect(overflow).toBeLessThanOrEqual(0);
+  });
+});
+
+test.describe("landing chrome footer, coarse pointer, one row", () => {
+  test.use({ viewport: { width: 1024, height: 768 }, isMobile: true, hasTouch: true, deviceScaleFactor: 1 });
+
+  test("44px footer links stay level with the brand line and the copyright", async ({ page }) => {
+    await page.setContent(landingFixture);
+    expect(await page.evaluate(() => matchMedia("(pointer: coarse)").matches)).toBe(true);
+    for (const height of await heightsOf(page, ".site-footer__links a")) expect(height).toBeGreaterThanOrEqual(44);
+    const [brandText, linkText, copyrightText] = await textTops(page, [".site-footer__brand", '.site-footer__links a[href="/terms"]', ".site-footer__links bdi"]);
+    expect(Math.abs(brandText! - linkText!)).toBeLessThanOrEqual(3);
+    expect(copyrightText).toBe(linkText);
+  });
+});
diff --git a/tests/site-kit-contracts.test.mjs b/tests/site-kit-contracts.test.mjs
index bbb1b00..c9b5eca 100644
--- a/tests/site-kit-contracts.test.mjs
+++ b/tests/site-kit-contracts.test.mjs
@@ -202,3 +202,35 @@ test("the TanStack adapter accepts metadata built from a product registry", asyn
   assert.match(dts, /toTanStackHead<Code extends string = SiteLocale>\(metadata: SiteMetadata<Code>, options\?: TanStackHeadOptions\)/);
   assert.match(dts, /toHtmlAttributes: <Code extends string = SiteLocale>\(metadata: SiteMetadata<Code>\)/);
 });
+
+test("the landing chrome keeps its touch targets, scroll offset and eyebrow hooks (D-029)", async () => {
+  const [styles, sections, chrome] = await Promise.all([
+    read("packages/site-kit/styles.css"),
+    read("packages/site-kit/site-sections.css"),
+    read("packages/site-kit/src/solid/chrome.tsx"),
+  ]);
+  // Touch: links are 44px targets like every button; the open narrow menu is 44px rows.
+  const coarse = styles.match(/@media \(pointer: coarse\) \{([\s\S]*?)\n\}/)?.[1] ?? "";
+  for (const selector of [".site-brand", ".site-nav__list a", ".site-footer__links a", ".site-footer__langs-trigger", ".site-footer__langs-list a"]) {
+    assert.ok(coarse.includes(selector), `${selector} missing from the touch block`);
+  }
+  assert.match(coarse, /min-block-size:\s*44px/);
+  assert.ok(styles.indexOf("@media (pointer: coarse)") < styles.indexOf("@media (max-width: 720px)"), "the narrow menu rows must come after the touch block to set their display");
+  const narrow = styles.match(/@media \(max-width: 720px\) \{([\s\S]*?)\n\}/)?.[1] ?? "";
+  assert.match(narrow, /\.site-nav__list a \{[^}]*min-block-size:\s*44px/);
+  assert.match(narrow, /grid-template-rows: var\(--site-header-block-size, 64px\)/, "the closed narrow header keeps one height");
+  // The sticky header's height is one property, and sections stop below it.
+  assert.match(styles, /\.site-header__inner \{[^}]*min-block-size: var\(--site-header-block-size, 64px\)/);
+  assert.match(sections, /scroll-margin-block-start: calc\(var\(--site-header-block-size, 64px\)/);
+  // The 16px icon-mark size applies only beside a printed name, so a wordmark logo keeps its size.
+  assert.match(styles, /\.site-footer__brand:has\(> strong\) :is\(img, svg\) \{[^}]*16px/);
+  assert.doesNotMatch(styles, /\.site-footer__brand img, \.site-footer__brand svg/);
+  // Eyebrow tracking and weight are hooks with the family defaults.
+  assert.match(sections, /\.site-hero__eyebrow \{[^}]*letter-spacing: var\(--site-hero-eyebrow-tracking, \.18em\)/);
+  assert.match(sections, /\.site-hero__eyebrow \{[^}]*font-weight: var\(--site-hero-eyebrow-weight, normal\)/);
+  // The chrome reads handed-over JSX once (D-027, D-028).
+  assert.match(chrome, /const details = createMemo\(\(\) => props\.details\)/);
+  assert.equal((chrome.match(/const brand = createMemo\(\(\) => props\.brand\)/g) ?? []).length, 2, "header and footer each read brand once");
+  assert.doesNotMatch(chrome, /props\.details(?!\))/, "details is read only through the memo");
+  assert.doesNotMatch(chrome, /props\.brand\./, "brand is read only through the memo");
+});
diff --git a/tests/site-kit-landing-chrome-hydration.test.mjs b/tests/site-kit-landing-chrome-hydration.test.mjs
new file mode 100644
index 0000000..6f872cc
--- /dev/null
+++ b/tests/site-kit-landing-chrome-hydration.test.mjs
@@ -0,0 +1,150 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+/**
+ * Server-render a single-language SiteHeader and a SiteFooter with a details
+ * block — mounted directly, outside MarketingShell — then hydrate that HTML
+ * with the development browser build in jsdom and count the server keys that
+ * survived (D-029).
+ *
+ * The props arrive the way a compiled `brand={{ logo: <Wordmark /> }}` /
+ * `details={<address>…</address>}` reaches a component: getters that build
+ * their JSX again on every read. The shell's own memo (D-027) does not help a
+ * product that mounts the chrome itself, so the header and footer read
+ * `brand` and `details` once too. Were either read twice, the discarded build
+ * would ask for hydration keys the server never wrote, and the development
+ * build — the one every consumer's dev server runs — throws `Hydration
+ * Mismatch` (D-028). Same harness as site-kit-status-banner-hydration.test.mjs.
+ */
+
+const root = fileURLToPath(new URL("..", import.meta.url));
+const kit = join(root, "packages", "site-kit");
+
+const MESSAGES = {
+  navigationLabel: "사이트 메뉴", localeLabel: "언어", themeLabel: "테마", themeSystem: "시스템", themeLight: "라이트",
+  themeDark: "다크", menuOpen: "메뉴", menuClose: "닫기", footerLabel: "바닥글", skipToContent: "본문 바로가기",
+  updatedLabel: "수정", notFoundTitle: "없음", notFoundDescription: "없는 페이지", backHome: "첫 화면",
+  errorTitle: "오류", errorDescription: "다시 시도", retry: "다시 시도",
+};
+
+const PAGE_SOURCE = `
+export function page({ createComponent, SiteHeader, SiteFooter, wordmark, action, details, MESSAGES }) {
+  const header = {
+    get brand() { return { name: "", label: "FM덴탈서비스 첫 화면", href: "/", logo: wordmark() }; },
+    navigation: [{ href: "#how", label: "이용 방법" }, { href: "#contact", label: "문의" }],
+    messages: MESSAGES,
+    get actions() { return action(); },
+  };
+  const footer = {
+    get brand() { return { name: "", href: "/", logo: wordmark() }; },
+    get details() { return details(); },
+    linksLabel: "바닥 메뉴",
+    links: [{ href: "/terms", label: "이용약관" }, { href: "/privacy", label: "개인정보처리방침", emphasis: true }],
+    copyright: "© FM덴탈서비스",
+    messages: MESSAGES,
+  };
+  return [createComponent(SiteHeader, header), createComponent(SiteFooter, footer)];
+}
+`;
+
+const ssrScript = () => `
+import { renderToString, generateHydrationScript, ssr, ssrHydrationKey } from "solid-js/web";
+import { createComponent } from "solid-js";
+import { SiteHeader, SiteFooter } from ${JSON.stringify(pathToFileURL(join(kit, "dist", "solid.server.js")).href)};
+import { page } from "./page.mjs";
+const MESSAGES = ${JSON.stringify(MESSAGES)};
+const wordmark = () => ssr(["<span", " class=\\"wordmark\\"><b>FM</b>덴탈서비스</span>"], ssrHydrationKey());
+const action = () => ssr(["<a", " class=\\"cta\\" href=\\"#contact\\">이용 문의</a>"], ssrHydrationKey());
+const details = () => ssr(["<address", " class=\\"biz\\">부산광역시 연제구</address>"], ssrHydrationKey());
+const html = renderToString(() => page({ createComponent, SiteHeader, SiteFooter, wordmark, action, details, MESSAGES }));
+process.stdout.write(JSON.stringify({ bootstrap: generateHydrationScript(), html }));
+`;
+
+const hydrateScript = () => `
+process.on("uncaughtException", (e) => { process.stderr.write("UNCAUGHT " + (e && e.stack || e) + String.fromCharCode(10)); process.exit(1); });
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+const require = createRequire(${JSON.stringify(pathToFileURL(join(kit, "package.json")).href)});
+const { JSDOM } = require("jsdom");
+const { bootstrap, html } = JSON.parse(readFileSync(new URL("./ssr.json", import.meta.url), "utf8"));
+const dom = new JSDOM("<!doctype html><html><head>" + bootstrap + "</head><body><div id=\\"root\\">" + html + "</div></body></html>", { runScripts: "dangerously", pretendToBeVisual: true, url: "https://example.test/" });
+for (const key of ["window", "document", "Node", "HTMLElement", "SVGElement", "MutationObserver", "navigator", "requestAnimationFrame", "localStorage", "matchMedia"]) {
+  Object.defineProperty(globalThis, key, { value: dom.window[key], configurable: true, writable: true });
+}
+Object.defineProperty(globalThis, "_$HY", { value: dom.window._$HY, configurable: true, writable: true });
+const host = document.querySelector("#root");
+const serverKeys = [...host.querySelectorAll("[data-hk]")].map((element) => element.getAttribute("data-hk"));
+const { hydrate, template, getNextElement } = await import("solid-js/web");
+const { createComponent } = await import("solid-js");
+const { SiteHeader, SiteFooter } = await import(${JSON.stringify(pathToFileURL(join(kit, "dist", "solid.js")).href)});
+const { page } = await import("./page.mjs");
+const MESSAGES = ${JSON.stringify(MESSAGES)};
+const tmpl = (markup) => { const t = template(markup); return () => getNextElement(t); };
+const wordmark = tmpl('<span class="wordmark"><b>FM</b>덴탈서비스</span>');
+const action = tmpl('<a class="cta" href="#contact">이용 문의</a>');
+const details = tmpl('<address class="biz">부산광역시 연제구</address>');
+const diagnostics = [];
+const warn = console.warn, error = console.error;
+console.warn = (...v) => diagnostics.push(v.join(" "));
+console.error = (...v) => diagnostics.push(v.join(" "));
+hydrate(() => page({ createComponent, SiteHeader, SiteFooter, wordmark, action, details, MESSAGES }), host);
+await new Promise((resolve) => setTimeout(resolve, 100));
+console.warn = warn; console.error = error;
+const brand = host.querySelector(".site-brand");
+process.stdout.write(JSON.stringify({
+  diagnostics,
+  serverKeyed: serverKeys.length,
+  lostKeys: serverKeys.filter((key) => !host.querySelector('[data-hk="' + key + '"]')).length,
+  wordmarks: host.querySelectorAll(".wordmark").length,
+  wordmarksKeyed: [...host.querySelectorAll(".wordmark")].every((element) => element.hasAttribute("data-hk")),
+  brandLabel: brand && brand.getAttribute("aria-label"),
+  brandText: brand && brand.textContent,
+  pickers: host.querySelectorAll(".site-locale, .site-locale-flag, select").length,
+  details: host.querySelectorAll(".site-footer__details .biz").length,
+  detailsKeyed: host.querySelector(".site-footer__details .biz")?.hasAttribute("data-hk") ?? false,
+  footerNav: host.querySelector("footer nav.site-footer__nav")?.getAttribute("aria-label") ?? null,
+  emptyStrong: host.querySelectorAll(".site-footer__brand strong").length,
+  emphasis: [...host.querySelectorAll("a.site-link--emphasis")].map((element) => element.textContent),
+}));
+`;
+
+function runChrome() {
+  const dir = mkdtempSync(join(kit, ".landing-chrome-test-"));
+  try {
+    writeFileSync(join(dir, "package.json"), JSON.stringify({ type: "module" }));
+    writeFileSync(join(dir, "page.mjs"), PAGE_SOURCE);
+    writeFileSync(join(dir, "ssr.mjs"), ssrScript());
+    writeFileSync(join(dir, "hydrate.mjs"), hydrateScript());
+    const env = { ...process.env, NODE_PATH: join(kit, "node_modules") };
+    const server = spawnSync(process.execPath, [join(dir, "ssr.mjs")], { cwd: kit, encoding: "utf8", env });
+    assert.equal(server.status, 0, server.stderr);
+    writeFileSync(join(dir, "ssr.json"), server.stdout);
+    const client = spawnSync(process.execPath, ["--conditions=browser", "--conditions=development", join(dir, "hydrate.mjs")], { cwd: kit, encoding: "utf8", env });
+    assert.equal(client.status, 0, `the development build must hydrate without throwing:\n${client.stderr}`);
+    return { html: JSON.parse(server.stdout).html, ...JSON.parse(client.stdout) };
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+test("a single-language header and a footer with details, mounted directly with getter props, hydrate in place under the development build", () => {
+  const result = runChrome();
+  assert.deepEqual(result.diagnostics, []);
+  assert.equal((result.html.match(/class="wordmark"/g) ?? []).length, 2, "the server wrote the wordmark once in the header and once in the footer");
+  assert.equal((result.html.match(/class="biz"/g) ?? []).length, 1, "the server wrote the details block once");
+  assert.equal(result.lostKeys, 0, "every server hydration key is still in the document");
+  assert.equal(result.wordmarks, 2);
+  assert.ok(result.wordmarksKeyed, "both wordmarks kept their server keys");
+  assert.equal(result.details, 1);
+  assert.ok(result.detailsKeyed, "the details block kept its server key");
+  assert.equal(result.brandLabel, "FM덴탈서비스 첫 화면");
+  assert.equal(result.brandText, "FM덴탈서비스", "the wordmark is the visible name, printed once");
+  assert.equal(result.pickers, 0, "no language picker without a locale");
+  assert.equal(result.footerNav, "바닥 메뉴");
+  assert.equal(result.emptyStrong, 0, "an empty brand name renders no <strong>");
+  assert.deepEqual(result.emphasis, ["개인정보처리방침"]);
+});