feat: add Tailwind semantic design tokens

src/presentation/components/async-surface.jsx

@@ -11,7 +11,7 @@ export function LoadingSurface({ label = "불러오는 중" }) {
 /** @param {{ title?: string, action?: React.ReactNode }} props */
 export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
   return (
-    <section>
+    <section className="ui-empty">
       <p>{title}</p>
       {action}
     </section>
@@ -28,10 +28,14 @@ export function EmptySurface({ title = "표시할 항목이 없습니다.", acti
  */
 export function TerminalErrorSurface({ userMessageKey, action, onAction }) {
   return (
-    <section role="alert" aria-labelledby="terminal-error-message">
+    <section
+      className="ui-terminal-error"
+      role="alert"
+      aria-labelledby="terminal-error-message"
+    >
       <p id="terminal-error-message">{userMessageKey}</p>
       {action !== "none" && (
-        <button type="button" onClick={onAction}>
+        <button className="ui-button" type="button" onClick={onAction}>
           {action}
         </button>
       )}