test: strengthen TechLog shell contracts

tests/features/tech-log/style-contract.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 
 import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { createElement } from "react";
@@ -64,6 +65,7 @@ describe("TechLog consumer-visible style contract", () => {
     const headerInner = view.container.querySelector<HTMLElement>(
       ".header-inner",
     );
+    const main = view.getByRole("main");
     const wordmark = view.getByRole("link", { name: "TechLog 홈" });
 
     expect(rootStyle.getPropertyValue("--canvas")).toBe("#f7f7f5");
@@ -71,6 +73,13 @@ describe("TechLog consumer-visible style contract", () => {
     expect(rootStyle.getPropertyValue("--signal")).toBe("#3e5cc7");
     expect(rootStyle.getPropertyValue("--shell")).toBe("1180px");
     expect(rootStyle.getPropertyValue("--body-copy")).toBe("42rem");
+    expect(rootStyle.color).toBe("var(--ink)");
+    expect(rootStyle.background).toBe("var(--canvas)");
+    expect(bodyStyle.color).toBe("var(--ink)");
+    expect(bodyStyle.background).toContain(
+      "linear-gradient(to bottom, rgba(255, 255, 255, 0.45), transparent 420px)",
+    );
+    expect(bodyStyle.background).toContain("var(--canvas)");
     expect(bodyStyle.fontFamily).toContain("Pretendard Variable");
     expect(bodyStyle.fontSize).toBe("16px");
     expect(bodyStyle.fontWeight).toBe("400");
@@ -80,10 +89,41 @@ describe("TechLog consumer-visible style contract", () => {
     expect(getComputedStyle(headerInner!).display).toBe("grid");
     expect(getComputedStyle(headerInner!).minHeight).toBe("76px");
     expect(getComputedStyle(headerInner!).gap).toBe("48px");
+    expect(getComputedStyle(main).width).toBe(
+      "min(var(--shell), calc(100% - 80px))",
+    );
     expect(getComputedStyle(wordmark).fontSize).toBe("17px");
     expect(getComputedStyle(wordmark).fontWeight).toBe("680");
   });
 
+  it("preserves keyboard focus and the real search-field focus relationship", async () => {
+    const user = userEvent.setup();
+    const view = renderPublicSurface(
+      createElement(
+        "main",
+        { id: "main-content", className: "shell" },
+        "공개 본문",
+      ),
+    );
+    const wordmark = view.getByRole("link", { name: "TechLog 홈" });
+    const searchInput = view.container.querySelector<HTMLInputElement>(
+      ".search-field input",
+    );
+    const searchField = view.container.querySelector<HTMLElement>(
+      ".search-field",
+    );
+
+    await user.tab();
+    await user.tab();
+    expect(wordmark).toHaveFocus();
+
+    searchInput!.focus();
+
+    expect(searchInput).toHaveFocus();
+    expect(searchField).not.toBeNull();
+    expect(searchField!.matches(":focus-within")).toBe(true);
+  });
+
   it("keeps every header and dialog control at the source minimum target size", () => {
     const view = renderPublicSurface(
       createElement(