feat: add Tailwind semantic design tokens

src/presentation/routes/app-router.jsx

@@ -10,7 +10,7 @@ import { decideRouteAccess } from "./navigation-policy.js";
 
 function HomePage() {
   return (
-    <main>
+    <main className="ui-page">
       <h1>Clean Architecture Frontend</h1>
       <p>런타임 계약이 검증되었습니다.</p>
       <Link to={routePath("SAMPLE_RESOURCE_LIST")}>샘플 리소스</Link>
@@ -20,7 +20,7 @@ function HomePage() {
 
 function SamplePlaceholder() {
   return (
-    <main>
+    <main className="ui-page">
       <h1>샘플 리소스</h1>
       <p>계약 fixture를 준비하고 있습니다.</p>
     </main>
@@ -29,7 +29,7 @@ function SamplePlaceholder() {
 
 function NotFoundPage() {
   return (
-    <main>
+    <main className="ui-page">
       <h1>페이지를 찾을 수 없습니다.</h1>
       <Link to={routePath("APP_HOME")}>홈으로 이동</Link>
     </main>
@@ -48,9 +48,11 @@ function GuardedSampleRoute({ authSession }) {
   );
   if (!decision.allowed) {
     return (
-      <main>
+      <main className="ui-page">
         <h1>세션이 필요합니다.</h1>
-        <button type="button">로그인</button>
+        <button className="ui-button" type="button">
+          로그인
+        </button>
       </main>
     );
   }