diff --git a/2_frontend/index.html b/2_frontend/index.html
index e2ea420..c4e213a 100644
--- a/2_frontend/index.html
+++ b/2_frontend/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <title>Frontend Template</title>
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <title>CodeAssist</title>
     <script>
       // FOUC 방지 — React 마운트 전 [data-theme] + .dark 미리 박음.
       // 팔레트는 localStorage 'theme' 키, 다크모드는 'theme-store' (zustand persist).
@@ -21,10 +21,10 @@
           }
           document.documentElement.setAttribute("data-theme", pal)
           var raw = localStorage.getItem("theme-store")
-          var mode = "light"
+          var mode = "dark" // 저장값 없으면 다크 (themeStore 기본과 동일)
           if (raw) {
             try {
-              mode = (JSON.parse(raw).state || {}).theme || "light"
+              mode = (JSON.parse(raw).state || {}).theme || "dark"
             } catch (e) {}
           }
           var dark =
diff --git a/2_frontend/public/favicon.png b/2_frontend/public/favicon.png
new file mode 100644
index 0000000..713ad48
Binary files /dev/null and b/2_frontend/public/favicon.png differ
diff --git a/2_frontend/public/favicon.svg b/2_frontend/public/favicon.svg
deleted file mode 100644
index 198f3d3..0000000
--- a/2_frontend/public/favicon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="14" fill="#0f172a"/>
-  <text x="50%" y="50%" dy="0.35em" text-anchor="middle"
-        font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
-        font-weight="700" font-size="36" fill="#38bdf8">F</text>
-</svg>
diff --git a/2_frontend/src/assets/logo-dark.png b/2_frontend/src/assets/logo-dark.png
new file mode 100644
index 0000000..a9ece4c
Binary files /dev/null and b/2_frontend/src/assets/logo-dark.png differ
diff --git a/2_frontend/src/assets/logo.png b/2_frontend/src/assets/logo.png
new file mode 100644
index 0000000..8eabb55
Binary files /dev/null and b/2_frontend/src/assets/logo.png differ
diff --git a/2_frontend/src/features/auth/components/LoginForm.test.tsx b/2_frontend/src/features/auth/components/LoginForm.test.tsx
index aae31e4..b1f10ad 100644
--- a/2_frontend/src/features/auth/components/LoginForm.test.tsx
+++ b/2_frontend/src/features/auth/components/LoginForm.test.tsx
@@ -37,7 +37,7 @@ describe("LoginForm 회귀", () => {
   it("이메일/비번 입력 + submit → useLogin.mutate 호출", async () => {
     renderForm()
     await userEvent.type(screen.getByLabelText("이메일"), "a@b.com")
-    await userEvent.type(screen.getByLabelText("비번"), "secret")
+    await userEvent.type(screen.getByLabelText("비밀번호"), "secret")
     await userEvent.click(screen.getByRole("button", { name: /로그인/ }))
 
     expect(mutate).toHaveBeenCalledOnce()
@@ -47,7 +47,7 @@ describe("LoginForm 회귀", () => {
   it("무효 이메일 → 에러 메시지 + mutate 호출 X", async () => {
     const { container } = renderForm()
     await userEvent.type(screen.getByLabelText("이메일"), "not-email")
-    await userEvent.type(screen.getByLabelText("비번"), "secret")
+    await userEvent.type(screen.getByLabelText("비밀번호"), "secret")
     // type="email" 의 HTML5 native validation 이 jsdom 에서 submit 을 막아서
     // userEvent.click(submit) 으로는 zod 까지 안 감 → form.submit 직접 발사
     const form = container.querySelector("form")!
@@ -68,7 +68,7 @@ describe("LoginForm 회귀", () => {
   it("from=/snap/new + 성공 → navigate('/snap/new')", async () => {
     renderForm("?from=/snap/new")
     await userEvent.type(screen.getByLabelText("이메일"), "a@b.com")
-    await userEvent.type(screen.getByLabelText("비번"), "secret")
+    await userEvent.type(screen.getByLabelText("비밀번호"), "secret")
     await userEvent.click(screen.getByRole("button", { name: /로그인/ }))
 
     const [, opts] = mutate.mock.calls[0]
@@ -79,7 +79,7 @@ describe("LoginForm 회귀", () => {
   it("from=외부 도메인 → navigate PATHS.SNAP (safeRedirectPath 가드)", async () => {
     renderForm("?from=//evil.com")
     await userEvent.type(screen.getByLabelText("이메일"), "a@b.com")
-    await userEvent.type(screen.getByLabelText("비번"), "secret")
+    await userEvent.type(screen.getByLabelText("비밀번호"), "secret")
     await userEvent.click(screen.getByRole("button", { name: /로그인/ }))
 
     const [, opts] = mutate.mock.calls[0]
diff --git a/2_frontend/src/features/auth/pages/LoginPage.test.tsx b/2_frontend/src/features/auth/pages/LoginPage.test.tsx
index 224cfd5..3ee20ff 100644
--- a/2_frontend/src/features/auth/pages/LoginPage.test.tsx
+++ b/2_frontend/src/features/auth/pages/LoginPage.test.tsx
@@ -36,9 +36,9 @@ describe("LoginPage", () => {
     expect(section.compareDocumentPosition(form) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
   })
 
-  it("h1 '로그인' 표시", () => {
+  it("h1 'CodeAssist' 브랜드 제목 표시", () => {
     renderPage()
-    expect(screen.getByRole("heading", { level: 1, name: "로그인" })).toBeInTheDocument()
+    expect(screen.getByRole("heading", { level: 1, name: "CodeAssist" })).toBeInTheDocument()
   })
 
   it("로그인 입력 영역을 화면 가운데 정렬", () => {
diff --git a/2_frontend/src/features/auth/pages/LoginPage.tsx b/2_frontend/src/features/auth/pages/LoginPage.tsx
index 84201fa..0477441 100644
--- a/2_frontend/src/features/auth/pages/LoginPage.tsx
+++ b/2_frontend/src/features/auth/pages/LoginPage.tsx
@@ -1,14 +1,25 @@
-import LoginForm from "../components/LoginForm"
-import EntraLoginSection from "../components/EntraLoginSection"
-
-export default function LoginPage() {
-  return (
-    <div className="flex flex-1 items-center justify-center">
-      <div className="w-full max-w-sm space-y-6">
-        <h1 className="text-2xl font-semibold">로그인</h1>
-        <EntraLoginSection />
-        <LoginForm />
-      </div>
-    </div>
-  )
-}
+import { LogoMark } from "@/shared/components/LogoMark"
+import LoginForm from "../components/LoginForm"
+import EntraLoginSection from "../components/EntraLoginSection"
+
+/** 로그인 — ABAP_OPENCODE 로그인 카드와 같은 구성(로고 · 제목 · 부제 · 폼 · 안내). */
+export default function LoginPage() {
+  return (
+    <div className="flex flex-1 items-center justify-center px-4 py-6">
+      <div className="bg-card border-border flex w-full max-w-[414px] flex-col gap-3.5 rounded-2xl border px-8 pt-9 pb-7 shadow-[var(--shadow-float)]">
+        <div className="mb-1 flex justify-center">
+          <LogoMark width={52} />
+        </div>
+        <h1 className="text-center text-[19px] font-semibold">CodeAssist</h1>
+        <p className="text-muted-foreground mb-3 text-center text-[13px]">
+          SAP GUI · Eclipse 옆에서 바로 쓰는 ABAP 코드 도우미
+        </p>
+        <EntraLoginSection />
+        <LoginForm />
+        <p className="text-muted-foreground mt-1 text-center text-xs">
+          계정이 필요하면 관리자에게 문의해 주세요.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/2_frontend/src/features/snap/components/ChatHeader.tsx b/2_frontend/src/features/snap/components/ChatHeader.tsx
index a66655d..b2ecaa1 100644
--- a/2_frontend/src/features/snap/components/ChatHeader.tsx
+++ b/2_frontend/src/features/snap/components/ChatHeader.tsx
@@ -19,20 +19,20 @@ export function ChatHeader({ session, onBack }: Props) {
   // 게이지 색 — 90%↑ 빨강, 70%↑ 주황, 그 외 기본.
   const barColor = ratio >= 0.9 ? "bg-red-500" : ratio >= 0.7 ? "bg-amber-500" : "bg-primary"
   return (
-    <div className="border-border bg-card flex flex-none items-center gap-2 border-b px-3 py-2.5">
+    <div className="border-border flex flex-none items-center gap-2 border-b px-3 py-2">
       <button
         type="button"
         onClick={onBack}
         title="목록으로 (Esc)"
-        className="border-border bg-background text-muted-foreground hover:border-ring hover:text-foreground inline-flex items-center gap-1 rounded-md border px-2 py-1 font-mono text-[11px]"
+        className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11.5px] transition-colors focus-visible:ring-2 focus-visible:outline-none"
       >
-        <ChevronLeft className="size-3" />
+        <ChevronLeft className="size-3.5" aria-hidden="true" />
         목록
         <Kbd>Esc</Kbd>
       </button>
       <div className="min-w-0 flex-1">
-        <div className="truncate font-serif text-base font-semibold italic">{title}</div>
-        <div className="text-muted-foreground font-mono text-[9.5px] tracking-wide uppercase">
+        <div className="truncate text-[15px] font-semibold">{title}</div>
+        <div className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">
           {(session.tag ?? "SESSION").toUpperCase()} · 대화 세션
         </div>
       </div>
@@ -41,7 +41,7 @@ export function ChatHeader({ session, onBack }: Props) {
         className="flex flex-none flex-col items-end gap-1"
         title={`${used.toLocaleString()} / ${limit.toLocaleString()} tokens`}
       >
-        <span className="text-muted-foreground font-mono text-[10px] tabular-nums">
+        <span className="text-muted-foreground text-[10.5px] tabular-nums">
           {fmtTokens(used)}
           <span className="text-muted-foreground/50"> / {fmtTokens(limit)}</span>
         </span>
diff --git a/2_frontend/src/features/snap/components/CodeBlock.tsx b/2_frontend/src/features/snap/components/CodeBlock.tsx
index d90d02d..082df26 100644
--- a/2_frontend/src/features/snap/components/CodeBlock.tsx
+++ b/2_frontend/src/features/snap/components/CodeBlock.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from "react"
 import { Check, ClipboardPaste, Copy } from "lucide-react"
 import { toast } from "sonner"
 import { isWebView, pasteToApp } from "@/lib/bridge/webviewBridge"
+import { useThemeStore } from "@/shared/store/themeStore"
 import hljs from "highlight.js/lib/core"
 import sql from "highlight.js/lib/languages/sql"
 import json from "highlight.js/lib/languages/json"
@@ -47,10 +48,11 @@ interface Props {
 export function CodeBlock({ code, lang, index, plain = false }: Props) {
   const key = (lang ?? "").toLowerCase()
   const resolved = ALIAS[key] ?? key
-  // ABAP 은 SAP 에디터처럼 밝은 배경으로 렌더 — 나머지 언어는 어두운 테마 유지.
+  // ABAP 은 SAP 에디터처럼 밝은 배경으로 — 단, 앱이 라이트 모드일 때만. 다크 캔버스 위 흰 상자는 튐.
   const isAbap = resolved === "abap"
-  // 언어 없는 펜스(ASCII 다이어그램 등)도 밝게 — 어두운 코드 테마는 언어 지정 블록만.
-  const isLight = isAbap || resolved === ""
+  const appLight = useThemeStore((s) => s.resolved) === "light"
+  // 언어 없는 펜스(ASCII 다이어그램 등)도 같은 규칙.
+  const isLight = appLight && (isAbap || resolved === "")
   const html = useMemo(() => {
     if (resolved && hljs.getLanguage(resolved)) {
       return hljs.highlight(code, { language: resolved, ignoreIllegals: true }).value
@@ -83,7 +85,7 @@ export function CodeBlock({ code, lang, index, plain = false }: Props) {
           <span className="flex gap-1">
             <span className="size-2 rounded-full bg-rose-400/70" />
             <span className="size-2 rounded-full bg-amber-400/70" />
-            <span className="size-2 rounded-full bg-emerald-400/70" />
+            <span className="bg-success/70 size-2 rounded-full" />
           </span>
           <span
             className={
@@ -114,7 +116,7 @@ export function CodeBlock({ code, lang, index, plain = false }: Props) {
         </div>
         <pre className="min-w-0 flex-1 px-3 py-3 font-mono whitespace-pre">
           <code
-            className={isAbap ? "hljs-abap-light" : undefined}
+            className={isAbap && isLight ? "hljs-abap-light" : undefined}
             dangerouslySetInnerHTML={{ __html: html }}
           />
         </pre>
diff --git a/2_frontend/src/features/snap/components/Composer.tsx b/2_frontend/src/features/snap/components/Composer.tsx
index 0cf1eda..973f04b 100644
--- a/2_frontend/src/features/snap/components/Composer.tsx
+++ b/2_frontend/src/features/snap/components/Composer.tsx
@@ -157,8 +157,9 @@ export function Composer({ onSend, busy, onStop, placeholder, acceptCapture }: P
     }
   }
   return (
-    <div className="border-border bg-card flex-none border-t p-3">
-      <div className="border-border bg-background focus-within:border-ring focus-within:ring-ring/20 rounded-lg border p-2 focus-within:ring-2">
+    // 목록·새 대화와 같은 가운데 열(760px). 테두리 상자 하나에 입력 + 도구 줄.
+    <div className="flex-none px-5 pt-2 pb-3">
+      <div className="border-border bg-card focus-within:border-ring mx-auto w-full max-w-[760px] rounded-lg border px-3 pt-2.5 pb-2 transition-colors">
         {/* 캡쳐·클립보드 이미지 첨부 — 썸네일 + X 로 제거 */}
         {imageAttachments.length > 0 && (
           <div className="mb-2 flex flex-wrap gap-1.5">
@@ -192,7 +193,7 @@ export function Composer({ onSend, busy, onStop, placeholder, acceptCapture }: P
                 key={i}
                 className="border-border bg-muted/60 text-muted-foreground flex max-w-full items-center gap-1.5 rounded-md border px-2 py-1 text-[11px]"
               >
-                <ClipboardPaste className="size-3.5 flex-none text-emerald-500" />
+                <ClipboardPaste className="text-success size-3.5 flex-none" />
                 <span className="min-w-0 truncate font-mono">
                   {a.replace(/\s+/g, " ").slice(0, 40)}…
                 </span>
@@ -237,17 +238,17 @@ export function Composer({ onSend, busy, onStop, placeholder, acceptCapture }: P
           rows={1}
           disabled={busy}
           placeholder={busy ? "응답 중…" : (placeholder ?? "메시지를 입력하세요…")}
-          className="placeholder:text-muted-foreground field-sizing-content max-h-32 min-h-10 w-full resize-none bg-transparent text-sm outline-none"
+          className="placeholder:text-muted-foreground/70 field-sizing-content max-h-40 min-h-9 w-full resize-none bg-transparent text-[13.5px] leading-relaxed outline-none"
         />
-        <div className="mt-2 flex items-center gap-2">
+        <div className="mt-1.5 flex items-center gap-1">
           <button
             type="button"
             onClick={pasteFromClipboard}
             disabled={busy || !clipboardSupported}
             title={clipboardSupported ? "클립보드에서 가져오기" : "이 환경은 클립보드 읽기 미지원"}
-            className="border-border text-muted-foreground hover:border-ring hover:text-foreground inline-flex items-center gap-1 rounded-md border px-2 py-1 font-mono text-[10px] transition-colors disabled:opacity-50"
+            className="text-muted-foreground hover:bg-accent hover:text-foreground inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] transition-colors disabled:opacity-50"
           >
-            <ClipboardPaste className="size-3" />
+            <ClipboardPaste className="size-3.5" aria-hidden="true" />
             클립보드
           </button>
           <button
@@ -256,16 +257,16 @@ export function Composer({ onSend, busy, onStop, placeholder, acceptCapture }: P
             aria-pressed={explain}
             title={explain ? "설명 모드 — 배경·원리까지" : "간결 모드 — 답만"}
             className={cn(
-              "inline-flex items-center gap-1 rounded-md border px-2 py-1 font-mono text-[10px] transition-colors",
+              "inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] transition-colors",
               explain
-                ? "border-primary bg-primary/10 text-primary"
-                : "border-border text-muted-foreground hover:border-ring hover:text-foreground"
+                ? "bg-primary/12 text-primary"
+                : "text-muted-foreground hover:bg-accent hover:text-foreground"
             )}
           >
-            <BookOpen className="size-3" />
+            <BookOpen className="size-3.5" aria-hidden="true" />
             설명
           </button>
-          <span className="text-muted-foreground font-mono text-[10px] tracking-wide">
+          <span className="text-muted-foreground/70 ml-1 hidden text-[10.5px] sm:inline">
             Enter 전송 · Shift+Enter 줄바꿈
           </span>
           {busy ? (
@@ -273,17 +274,17 @@ export function Composer({ onSend, busy, onStop, placeholder, acceptCapture }: P
               type="button"
               size="sm"
               variant="destructive"
-              className="ml-auto"
+              className="ml-auto h-7 px-2.5 text-[12px]"
               onClick={onStop}
             >
-              <Square className="size-3.5 fill-current" />
+              <Square className="size-3 fill-current" />
               중단
             </Button>
           ) : (
             <Button
               type="button"
               size="sm"
-              className="ml-auto"
+              className="ml-auto h-7 px-2.5 text-[12px]"
               disabled={!value.trim() && attachments.length === 0 && imageAttachments.length === 0}
               onClick={submit}
             >
diff --git a/2_frontend/src/features/snap/components/Hero.tsx b/2_frontend/src/features/snap/components/Hero.tsx
index a3bc78d..360af4d 100644
--- a/2_frontend/src/features/snap/components/Hero.tsx
+++ b/2_frontend/src/features/snap/components/Hero.tsx
@@ -1,17 +1,41 @@
-export function Hero() {
+import { LogoMark } from "@/shared/components/LogoMark"
+
+interface Props {
+  /** 예시 질문 칩을 누르면 그 문장으로 바로 대화 시작. */
+  onPick?: (text: string) => void
+  disabled?: boolean
+}
+
+// 실제로 자주 묻는 것들 — 누르면 바로 답이 오는 걸 보여주는 게 빈 화면 설명보다 낫다.
+const EXAMPLES = [
+  "MARA 에서 자재번호로 자재유형(MTART) 읽는 SELECT SINGLE",
+  "셀렉션 화면 있는 ALV 리포트 뼈대 (CL_SALV_TABLE)",
+  "내부 테이블 LOOP 에서 그룹 소계 구하는 관용구",
+]
+
+export function Hero({ onPick, disabled }: Props) {
   return (
-    <section className="flex flex-col items-center px-6 py-10 text-center">
-      <div className="bg-primary text-primary-foreground mb-4 grid size-14 place-items-center rounded-xl font-serif text-2xl font-bold italic">
-        S
-      </div>
-      <span className="text-muted-foreground mb-3 inline-flex items-center gap-1.5 font-mono text-[10px] tracking-widest uppercase">
-        <span className="size-1.5 rounded-full bg-emerald-500" />
-        New Session
-      </span>
-      <h1 className="mb-2 font-serif text-2xl font-semibold italic">무엇을 도와드릴까요?</h1>
-      <p className="text-muted-foreground max-w-sm text-sm leading-relaxed">
-        ABAP · CDS 뷰 · HANA · 에러 분석까지 — 코드나 로그를 붙여넣거나 질문을 입력해봐.
+    <section className="flex w-full max-w-[560px] flex-col items-center py-6 text-center">
+      <LogoMark width={56} className="mb-5" />
+      <h1 className="mb-1.5 text-[21px] font-semibold text-balance">무엇을 도와드릴까요?</h1>
+      <p className="text-muted-foreground mb-6 text-[13px] leading-relaxed">
+        ABAP · CDS 뷰 · HANA · 에러 분석. 코드나 로그를 붙여넣거나 질문을 입력하면 바로 답해.
       </p>
+      {onPick && (
+        <div className="flex flex-wrap justify-center gap-2">
+          {EXAMPLES.map((text) => (
+            <button
+              key={text}
+              type="button"
+              disabled={disabled}
+              onClick={() => onPick(text)}
+              className="border-border bg-card text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring inline-flex items-center rounded-full border px-3 py-1.5 text-[12px] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+            >
+              {text}
+            </button>
+          ))}
+        </div>
+      )}
     </section>
   )
 }
diff --git a/2_frontend/src/features/snap/components/Message.test.tsx b/2_frontend/src/features/snap/components/Message.test.tsx
index 7a112b0..7fb505b 100644
--- a/2_frontend/src/features/snap/components/Message.test.tsx
+++ b/2_frontend/src/features/snap/components/Message.test.tsx
@@ -23,8 +23,8 @@ describe("Message 코드펜스 렌더", () => {
     // 스크롤 컨테이너 있는 CodeBlock 으로 감싸져야 함
     const block = container.querySelector("[data-code-block]")
     expect(block).not.toBeNull()
-    // 언어 없는 펜스는 다크 코드 테마가 아니라 라이트로
-    expect(block?.className).toContain("bg-white")
+    // 코드 상자 색은 앱 테마를 따름 — 기본(다크)에선 어두운 코드 상자, 라이트 모드면 흰 에디터 룩
+    expect(block?.className).toContain("bg-[#0d1117]")
     // 인라인 code 스타일(bg-black/10)로 새지 않아야 함
     expect(container.querySelector("code.rounded")).toBeNull()
   })
diff --git a/2_frontend/src/features/snap/components/Message.tsx b/2_frontend/src/features/snap/components/Message.tsx
index 4f4c619..b7137e8 100644
--- a/2_frontend/src/features/snap/components/Message.tsx
+++ b/2_frontend/src/features/snap/components/Message.tsx
@@ -65,12 +65,12 @@ export function Message({ role, content, totalTokens, elapsedMs }: Props) {
     <div className={cn("flex flex-col gap-1", isUser ? "items-end" : "items-start")}>
       <div className={cn("flex items-center gap-1.5", !isUser && "w-full")}>
         {!isUser && (
-          <span className="bg-primary text-primary-foreground grid size-4 place-items-center rounded font-serif text-[9px] leading-none font-bold italic">
-            S
+          <span className="bg-primary text-primary-foreground grid size-4 place-items-center rounded text-[8px] leading-none font-semibold">
+            AI
           </span>
         )}
         <span className="text-muted-foreground font-mono text-[9.5px] tracking-widest uppercase">
-          {isUser ? "나 · YOU" : "SNAP MATE"}
+          {isUser ? "나 · YOU" : "CODEASSIST"}
         </span>
         {!isUser && (
           <DropdownMenu>
@@ -99,9 +99,10 @@ export function Message({ role, content, totalTokens, elapsedMs }: Props) {
       <div
         className={cn(
           "rounded-lg px-3 py-2 text-sm leading-[1.9]",
+          // 질문 = 오른쪽 연한 칩, 답변 = 상자 없이 본문 글자(ABAP_OPENCODE 대화 톤). 코드블럭은 자기 상자를 가짐.
           isUser
             ? "bg-secondary text-secondary-foreground max-w-[85%] whitespace-pre-wrap"
-            : "border-border bg-card text-card-foreground w-full border"
+            : "text-foreground w-full px-0 py-0"
         )}
       >
         {isUser ? (
diff --git a/2_frontend/src/features/snap/components/NavRail.tsx b/2_frontend/src/features/snap/components/NavRail.tsx
index baa8716..f49438c 100644
--- a/2_frontend/src/features/snap/components/NavRail.tsx
+++ b/2_frontend/src/features/snap/components/NavRail.tsx
@@ -45,7 +45,7 @@ export function NavRail({ blocks, containerRef }: Props) {
       <ClipboardHistory />
 
       <div className="border-border flex flex-none items-center gap-1.5 border-b px-3 py-2.5">
-        <span className="size-1.5 rounded-full bg-emerald-500" />
+        <span className="size-1.5 rounded-full bg-success" />
         <span className="text-muted-foreground font-mono text-[10px] tracking-widest uppercase">
           Source Nav
         </span>
@@ -79,7 +79,7 @@ export function NavRail({ blocks, containerRef }: Props) {
                 className="text-muted-foreground/50 hover:text-foreground flex-none rounded p-1.5 transition-colors"
               >
                 {copiedIdx === b.index ? (
-                  <Check className="size-3 text-emerald-500" />
+                  <Check className="size-3 text-success" />
                 ) : (
                   <Copy className="size-3" />
                 )}
diff --git a/2_frontend/src/features/snap/components/SearchHitCard.tsx b/2_frontend/src/features/snap/components/SearchHitCard.tsx
index 6b63630..4393458 100644
--- a/2_frontend/src/features/snap/components/SearchHitCard.tsx
+++ b/2_frontend/src/features/snap/components/SearchHitCard.tsx
@@ -1,7 +1,8 @@
-import { CornerDownRight, MessageSquare } from "lucide-react"
+import { MessageSquare } from "lucide-react"
 import type { ReactNode } from "react"
 import type { SnapMessage } from "../contract/types"
 import { formatRelativeKo } from "@/lib/utils/relativeTime"
+import { cn } from "@/lib/utils/cn"
 
 interface Props {
   hit: SnapMessage
@@ -11,8 +12,17 @@ interface Props {
   selected?: boolean
 }
 
+// 마크다운 코드펜스 기호는 빼고 한 줄로 — 목록에서 ```abap 같은 게 보이면 안 되니까.
+function plain(text: string): string {
+  return text
+    .replace(/```[a-z0-9_-]*/gi, "")
+    .replace(/\s+/g, " ")
+    .trim()
+}
+
 // 매칭 지점 주변만 잘라 보여주고, 검색어를 <mark> 로 강조.
-function snippet(text: string, query: string): ReactNode {
+function snippet(raw: string, query: string): ReactNode {
+  const text = plain(raw)
   const idx = text.toLowerCase().indexOf(query.toLowerCase())
   if (idx < 0) return text.slice(0, 120)
   const start = Math.max(0, idx - 40)
@@ -30,29 +40,35 @@ function snippet(text: string, query: string): ReactNode {
   )
 }
 
+/** 검색 결과 한 행 — SessionCard 와 같은 행 규칙(블록이 테두리, 행은 배경만). */
 export function SearchHitCard({ hit, query, onOpen, selected }: Props) {
   return (
     <button
       type="button"
       onClick={() => onOpen(hit.sessionId)}
       data-snap-selected={selected ? "true" : undefined}
-      className={`focus-visible:ring-ring flex w-full items-start gap-3 rounded-lg p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none ${
-        selected ? "bg-accent text-accent-foreground" : "hover:bg-muted"
-      }`}
+      className={cn(
+        "focus-visible:bg-accent flex w-full items-start gap-2.5 px-3 py-2.5 text-left transition-colors focus-visible:outline-none",
+        selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"
+      )}
     >
-      <MessageSquare className="text-muted-foreground mt-0.5 size-4 flex-none" />
-      <span className="flex min-w-0 flex-col">
-        <span className="line-clamp-2 text-xs leading-relaxed break-words whitespace-pre-wrap">
+      <MessageSquare
+        className={cn(
+          "mt-0.5 size-3.5 flex-none",
+          selected ? "text-primary" : "text-muted-foreground"
+        )}
+        aria-hidden="true"
+      />
+      <span className="flex min-w-0 flex-1 flex-col gap-1">
+        <span className="line-clamp-2 text-[12.5px] leading-relaxed break-words whitespace-pre-wrap">
           {snippet(hit.content, query)}
         </span>
-        <span className="text-muted-foreground mt-1.5 flex items-center gap-2 font-mono text-[9.5px]">
-          <span className="tracking-wide uppercase">
-            {hit.role === "user" ? "나" : "SNAP MATE"}
+        <span className="text-muted-foreground flex items-center gap-1.5 text-[10.5px]">
+          <span className="font-semibold tracking-wide uppercase">
+            {hit.role === "user" ? "나" : "CodeAssist"}
           </span>
-          <span>·</span>
-          <span>{formatRelativeKo(hit.createdAt)}</span>
-          <CornerDownRight className="size-3" />
-          <span>세션 열기</span>
+          <span aria-hidden="true">·</span>
+          <span className="tabular-nums">{formatRelativeKo(hit.createdAt)}</span>
         </span>
       </span>
     </button>
diff --git a/2_frontend/src/features/snap/components/SessionCard.tsx b/2_frontend/src/features/snap/components/SessionCard.tsx
index 76c936c..9883127 100644
--- a/2_frontend/src/features/snap/components/SessionCard.tsx
+++ b/2_frontend/src/features/snap/components/SessionCard.tsx
@@ -1,6 +1,7 @@
-import { MessageSquare, ChevronRight } from "lucide-react"
+import { MessageSquare } from "lucide-react"
 import type { SnapSession } from "../contract/types"
 import { formatRelativeKo } from "@/lib/utils/relativeTime"
+import { cn } from "@/lib/utils/cn"
 
 interface Props {
   session: SnapSession
@@ -9,35 +10,39 @@ interface Props {
   selected?: boolean
 }
 
+/** 목록 한 행. 테두리는 목록 블록이 갖고, 행은 배경 한 단계(호버)·선택색(sel-bg)만 바뀜. */
 export function SessionCard({ session, onOpen, selected }: Props) {
   const title = session.titleLlm ?? session.title ?? "제목 없음"
   return (
-    // 컴팩트 1행 — 세로를 1/3로. 제목·태그·시간·상태를 한 줄에, 스니펫은 생략(제목 title 로 노출).
     <button
       type="button"
       onClick={() => onOpen(session.id)}
       data-snap-selected={selected ? "true" : undefined}
       title={session.snippet ?? title}
-      className={`focus-visible:ring-ring flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none ${
-        selected ? "bg-accent text-accent-foreground" : "hover:bg-muted"
-      }`}
+      className={cn(
+        "focus-visible:bg-accent flex h-10 w-full items-center gap-2.5 px-3 text-left transition-colors focus-visible:outline-none",
+        selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"
+      )}
     >
-      <span className="bg-muted text-muted-foreground grid size-8 flex-none place-items-center rounded-lg">
-        <MessageSquare className="size-4" />
-      </span>
-      <span className="min-w-0 flex-1 truncate text-sm font-medium">{title}</span>
+      <MessageSquare
+        className={cn("size-3.5 flex-none", selected ? "text-primary" : "text-muted-foreground")}
+        aria-hidden="true"
+      />
+      <span className="min-w-0 flex-1 truncate text-[13px] font-medium">{title}</span>
       {session.tag && (
-        <span className="border-border text-muted-foreground flex-none rounded border px-1.5 font-mono text-[9.5px] tracking-wide uppercase">
+        <span className="bg-secondary text-muted-foreground flex-none rounded px-1.5 py-0.5 text-[10px] font-semibold tracking-wide uppercase">
           {session.tag}
         </span>
       )}
       {session.isGenerating && (
-        <span className="size-1.5 flex-none rounded-full bg-emerald-500" title="생성 중" />
+        <span className="text-success flex items-center gap-1 text-[10.5px]" title="생성 중">
+          <span className="bg-success size-1.5 rounded-full" />
+          생성 중
+        </span>
       )}
-      <span className="text-muted-foreground flex-none font-mono text-[9.5px]">
+      <span className="text-muted-foreground flex-none text-[11px] tabular-nums">
         {formatRelativeKo(session.updatedAt)}
       </span>
-      <ChevronRight className="text-muted-foreground size-3.5 flex-none" />
     </button>
   )
 }
diff --git a/2_frontend/src/features/snap/components/SessionSearch.tsx b/2_frontend/src/features/snap/components/SessionSearch.tsx
index 9cce961..49ccce8 100644
--- a/2_frontend/src/features/snap/components/SessionSearch.tsx
+++ b/2_frontend/src/features/snap/components/SessionSearch.tsx
@@ -6,6 +6,7 @@ interface Props {
   onChange: (v: string) => void
 }
 
+/** 런처 검색 입력. 테두리·포커스 표시는 부모 검색 행이 맡고(focus-within), 여긴 입력만. */
 export function SessionSearch({ value, onChange }: Props) {
   // 런처 답게 뜨자마자 검색창에 포커스 — 여기서 타이핑=필터, ↑↓=목록 이동, Enter=열기.
   // 창이 다시 떠서(핫키 재소환) window 가 포커스 받을 때도 다시 잡아준다.
@@ -18,8 +19,8 @@ export function SessionSearch({ value, onChange }: Props) {
   }, [])
 
   return (
-    <div className="relative flex min-w-0 flex-1 items-center">
-      <Search className="text-muted-foreground pointer-events-none absolute left-0 size-5" />
+    <div className="flex min-w-0 flex-1 items-center gap-2">
+      <Search className="text-muted-foreground size-4 flex-none" aria-hidden="true" />
       <input
         ref={ref}
         type="text"
@@ -27,19 +28,19 @@ export function SessionSearch({ value, onChange }: Props) {
         onChange={(e) => onChange(e.target.value)}
         aria-label="대화 내용 검색"
         placeholder="대화 내용 검색…"
-        className="placeholder:text-muted-foreground/75 focus-visible:ring-ring/40 w-full rounded-md bg-transparent py-3 pr-9 pl-9 text-lg outline-none focus-visible:ring-2"
+        className="placeholder:text-muted-foreground/70 h-full min-w-0 flex-1 bg-transparent text-[14px] outline-none"
       />
       {value && (
         <button
           type="button"
           aria-label="검색어 지우기"
-          className="text-muted-foreground hover:bg-accent focus-visible:ring-ring absolute right-1 rounded p-1 focus-visible:ring-2"
+          className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring flex size-6 flex-none items-center justify-center rounded focus-visible:ring-2 focus-visible:outline-none"
           onClick={() => {
             onChange("")
             ref.current?.focus()
           }}
         >
-          <X className="size-4" />
+          <X className="size-3.5" />
         </button>
       )}
     </div>
diff --git a/2_frontend/src/features/snap/components/SnapLayout.tsx b/2_frontend/src/features/snap/components/SnapLayout.tsx
index d41a1a0..13473a6 100644
--- a/2_frontend/src/features/snap/components/SnapLayout.tsx
+++ b/2_frontend/src/features/snap/components/SnapLayout.tsx
@@ -4,8 +4,10 @@ import { Outlet, useNavigate } from "react-router-dom"
 import { PATHS } from "@/config/routes"
 import { startWindowDrag } from "@/lib/bridge/webviewBridge"
 import { SnapUserControls } from "./SnapUserControls"
+import { LogoMark } from "@/shared/components/LogoMark"
 
-/** 웹뷰 풀블리드 셸 — .NET 창이 진짜 크롬을 주므로 가짜 타이틀바는 없음. 얇은 브랜드 스트립만. */
+/** Snap 셸. 웹에선 얇은 브랜드 바(드래그 영역)에 테마·로그아웃까지 넣고,
+ *  Tauri 에선 창 제목줄(DesktopWindowFrame)이 같은 역할을 하므로 여기선 안 그림. */
 export function SnapLayout() {
   const navigate = useNavigate()
 
@@ -24,19 +26,20 @@ export function SnapLayout() {
 
   return (
     <div className="bg-background text-foreground flex h-screen flex-col">
-      {/* 헤더 = 창 드래그 영역(프레임리스 제목표시줄 대체) — title-bar 드래그라 a11y 룰 한 줄 예외 */}
       {hostKind() !== "tauri" && (
-        <header
-          role="presentation"
-          onMouseDown={startWindowDrag}
-          className="border-border flex h-9 flex-none items-center gap-2 border-b px-4 select-none"
-        >
-          <span className="font-mono text-[11px] font-semibold tracking-[0.12em]">
-            Chat Everywhere
-          </span>
+        <header className="border-border flex h-9 flex-none items-center gap-2 border-b pr-2 pl-3 select-none">
+          {/* 로고 쪽 = 창 드래그 영역(프레임리스 제목표시줄 대체) — title-bar 드래그라 a11y 룰 한 줄 예외 */}
+          <div
+            role="presentation"
+            onMouseDown={startWindowDrag}
+            className="flex h-full min-w-0 flex-1 items-center gap-2"
+          >
+            <LogoMark width={26} />
+            <span className="text-[11px] font-semibold tracking-wide">CodeAssist</span>
+          </div>
+          <SnapUserControls />
         </header>
       )}
-      <SnapUserControls />
       <div className="min-h-0 flex-1">
         <Outlet />
       </div>
diff --git a/2_frontend/src/features/snap/components/SnapUserControls.tsx b/2_frontend/src/features/snap/components/SnapUserControls.tsx
index 4199207..ccec12c 100644
--- a/2_frontend/src/features/snap/components/SnapUserControls.tsx
+++ b/2_frontend/src/features/snap/components/SnapUserControls.tsx
@@ -5,7 +5,7 @@ import { useLogout } from "@/features/auth/hooks/useLogout"
 import { ThemeToggle } from "@/shared/components/ThemeToggle"
 import { Button } from "@/shared/ui/button"
 
-/** 사이드바 없는 Snap 창에서도 테마 변경과 로그아웃에 바로 접근하게 함. */
+/** 테마 변경 + 로그아웃. 상단 바(웹: SnapLayout 헤더, Tauri: 창 제목줄) 오른쪽에 인라인으로 들어감. */
 export function SnapUserControls() {
   const navigate = useNavigate()
   const logout = useLogout()
@@ -17,18 +17,19 @@ export function SnapUserControls() {
   }
 
   return (
-    <div className="border-border bg-background/90 fixed top-11 right-3 z-40 flex items-center gap-1 rounded-lg border p-1 shadow-sm backdrop-blur">
+    <div className="flex items-center gap-0.5">
       <ThemeToggle />
       <Button
         type="button"
         variant="ghost"
         size="icon"
+        className="text-muted-foreground hover:text-foreground size-7"
         aria-label="로그아웃"
         title="로그아웃"
         disabled={logout.isPending}
         onClick={handleLogout}
       >
-        <LogOut className="size-4" aria-hidden="true" />
+        <LogOut className="size-3.5" aria-hidden="true" />
       </Button>
     </div>
   )
diff --git a/2_frontend/src/features/snap/pages/NewChatPage.tsx b/2_frontend/src/features/snap/pages/NewChatPage.tsx
index 4d71aa2..ff51b4c 100644
--- a/2_frontend/src/features/snap/pages/NewChatPage.tsx
+++ b/2_frontend/src/features/snap/pages/NewChatPage.tsx
@@ -1,19 +1,19 @@
-import { useRef, useState } from "react"
+import { useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { ChevronLeft } from "lucide-react"
 import { PATHS } from "@/config/routes"
+import { Kbd } from "@/shared/components/Kbd"
 import { useCreateSession } from "../api/snap.api"
 import { Hero } from "../components/Hero"
-import { NavRail } from "../components/NavRail"
 import { Composer } from "../components/Composer"
 import { useEscapeKey } from "../hooks/useEscapeKey"
 import type { SnapImageInput } from "../contract/types"
 
+/** 새 대화 — 목록과 같은 가운데 열(760px). 코드블럭 레일은 대화가 생긴 뒤(SessionChatPage)부터. */
 export default function NewChatPage() {
   const navigate = useNavigate()
   const createSession = useCreateSession()
   const [pending, setPending] = useState(false)
-  const scrollRef = useRef<HTMLDivElement>(null)
 
   // 단계적 Esc: 새 대화 화면에선 목록으로.
   useEscapeKey(() => navigate(PATHS.SNAP))
@@ -26,31 +26,26 @@ export default function NewChatPage() {
     navigate(`/snap/s/${session.id}`, { state: { firstMessage: text, firstImages: images } })
   }
 
-  // 새 대화도 좌측 레일 유지 — 클립보드 이력은 바로 쓰고, Source Nav 는 코드블럭 없음 상태로 표시.
   return (
     <div className="flex h-full flex-col">
-      <div className="border-border bg-card flex flex-none items-center border-b px-3 py-2.5">
+      <div className="mx-auto flex w-full max-w-[760px] flex-none items-center px-5 pt-3">
         <button
           type="button"
           onClick={() => navigate(PATHS.SNAP)}
-          className="border-border bg-background text-muted-foreground hover:border-ring hover:text-foreground inline-flex items-center gap-1 rounded-md border px-2 py-1 font-mono text-[11px]"
+          className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring -ml-2 inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11.5px] transition-colors focus-visible:ring-2 focus-visible:outline-none"
         >
-          <ChevronLeft className="size-3" />
+          <ChevronLeft className="size-3.5" aria-hidden="true" />
           목록
+          <Kbd>Esc</Kbd>
         </button>
       </div>
-      <div className="flex min-h-0 flex-1">
-        <NavRail blocks={[]} containerRef={scrollRef} />
-        <div ref={scrollRef} className="min-w-0 flex-1 overflow-y-auto">
-          <div className="mx-auto max-w-2xl">
-            <Hero />
-          </div>
-        </div>
+      <div className="grid min-h-0 flex-1 place-items-center overflow-y-auto px-5">
+        <Hero onPick={(text) => void start(text, [])} disabled={pending} />
       </div>
       <Composer
         onSend={start}
         busy={pending}
-        placeholder="새 대화를 시작하세요 — 질문을 입력하거나 코드를 붙여넣어봐…"
+        placeholder="질문을 입력하거나 코드·에러 로그를 붙여넣어봐…"
         acceptCapture
       />
     </div>
diff --git a/2_frontend/src/features/snap/pages/SessionChatPage.tsx b/2_frontend/src/features/snap/pages/SessionChatPage.tsx
index 169b318..9409616 100644
--- a/2_frontend/src/features/snap/pages/SessionChatPage.tsx
+++ b/2_frontend/src/features/snap/pages/SessionChatPage.tsx
@@ -146,83 +146,86 @@ export default function SessionChatPage() {
       <ChatHeader session={session} onBack={() => navigate(PATHS.SNAP)} />
       <div className="flex min-h-0 flex-1">
         <NavRail blocks={navBlocks} containerRef={scrollRef} />
-        <div
-          ref={scrollRef}
-          onWheel={onWheel}
-          onTouchMove={restick}
-          className="min-w-0 flex-1 overflow-y-auto"
-        >
-          <div className="theme-light mx-auto flex max-w-2xl flex-col gap-4 p-4">
-            {messages.map((m, i) => {
-              const isLiveLast =
-                busy && i === messages.length - 1 && m.role === "assistant" && !m.frozen
-              if (isLiveLast) {
-                return (
-                  <div key={m.id} className="flex flex-col items-start gap-1">
-                    <span className="text-muted-foreground font-mono text-[9.5px] tracking-widest uppercase">
-                      SNAP MATE
-                    </span>
-                    <div className="border-border bg-card text-card-foreground w-full rounded-lg border px-3 py-2 text-sm leading-[1.9]">
-                      {m.content === "" ? (
-                        // 첫 토큰 오기 전 빈 시간 메움 — 시머 텍스트로 "생각 중" 신호
-                        <span className="shimmer-text text-sm">생각하는 중…</span>
-                      ) : (
-                        <StreamingText
-                          text={m.content}
-                          isStreaming={isStreaming}
-                          cps={{ baseCps: 200, maxCps: 200, startEmpty: m.reveal }}
-                          onRevealEnd={() => useSnapChatStore.getState().setRevealing(false)}
-                        />
-                      )}
+        {/* 본문 열 — 메시지와 입력창이 같은 열(같은 폭·같은 왼쪽 끝)에 놓이게 여기서 묶음 */}
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div
+            ref={scrollRef}
+            onWheel={onWheel}
+            onTouchMove={restick}
+            className="min-h-0 min-w-0 flex-1 overflow-y-auto"
+          >
+            <div className="mx-auto flex w-full max-w-[760px] flex-col gap-5 px-5 py-4">
+              {messages.map((m, i) => {
+                const isLiveLast =
+                  busy && i === messages.length - 1 && m.role === "assistant" && !m.frozen
+                if (isLiveLast) {
+                  return (
+                    <div key={m.id} className="flex flex-col items-start gap-1">
+                      <span className="text-muted-foreground font-mono text-[9.5px] tracking-widest uppercase">
+                        CODEASSIST
+                      </span>
+                      <div className="border-border bg-card text-card-foreground w-full rounded-lg border px-3 py-2 text-sm leading-[1.9]">
+                        {m.content === "" ? (
+                          // 첫 토큰 오기 전 빈 시간 메움 — 시머 텍스트로 "생각 중" 신호
+                          <span className="shimmer-text text-sm">생각하는 중…</span>
+                        ) : (
+                          <StreamingText
+                            text={m.content}
+                            isStreaming={isStreaming}
+                            cps={{ baseCps: 200, maxCps: 200, startEmpty: m.reveal }}
+                            onRevealEnd={() => useSnapChatStore.getState().setRevealing(false)}
+                          />
+                        )}
+                      </div>
                     </div>
-                  </div>
-                )
-              }
-              if (m.frozen && m.role === "assistant") {
+                  )
+                }
+                if (m.frozen && m.role === "assistant") {
+                  return (
+                    <div key={m.id} className="flex flex-col gap-2">
+                      <Message
+                        role={m.role}
+                        content={m.content}
+                        totalTokens={m.totalTokens}
+                        elapsedMs={m.elapsedMs}
+                      />
+                      <StoppedNotice onRetry={retry} disabled={busy} />
+                    </div>
+                  )
+                }
                 return (
-                  <div key={m.id} className="flex flex-col gap-2">
-                    <Message
-                      role={m.role}
-                      content={m.content}
-                      totalTokens={m.totalTokens}
-                      elapsedMs={m.elapsedMs}
-                    />
-                    <StoppedNotice onRetry={retry} disabled={busy} />
-                  </div>
+                  <Message
+                    key={m.id}
+                    role={m.role}
+                    content={m.content}
+                    totalTokens={m.totalTokens}
+                    elapsedMs={m.elapsedMs}
+                  />
                 )
-              }
-              return (
-                <Message
-                  key={m.id}
-                  role={m.role}
-                  content={m.content}
-                  totalTokens={m.totalTokens}
-                  elapsedMs={m.elapsedMs}
-                />
-              )
-            })}
-            {generatingRemotely && (
-              <div className="flex flex-col items-start gap-1">
-                <span className="text-muted-foreground font-mono text-[9.5px] tracking-widest uppercase">
-                  SNAP MATE
-                </span>
-                <div className="border-border bg-card text-card-foreground w-full rounded-lg border px-3 py-2 text-sm leading-[1.9]">
-                  <span className="shimmer-text text-sm">생각하는 중…</span>
+              })}
+              {generatingRemotely && (
+                <div className="flex flex-col items-start gap-1">
+                  <span className="text-muted-foreground font-mono text-[9.5px] tracking-widest uppercase">
+                    CODEASSIST
+                  </span>
+                  <div className="border-border bg-card text-card-foreground w-full rounded-lg border px-3 py-2 text-sm leading-[1.9]">
+                    <span className="shimmer-text text-sm">생각하는 중…</span>
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
+          <Composer
+            onSend={(t, images) => {
+              stickRef.current = true // 전송 시 바닥 고정 재개 → 새 질문/답변 따라감
+              void send(t, images)
+            }}
+            busy={busy || generatingRemotely}
+            onStop={stop}
+            placeholder="ABAP · CDS · 에러 로그를 붙여넣거나 질문하세요…"
+          />
         </div>
       </div>
-      <Composer
-        onSend={(t, images) => {
-          stickRef.current = true // 전송 시 바닥 고정 재개 → 새 질문/답변 따라감
-          void send(t, images)
-        }}
-        busy={busy || generatingRemotely}
-        onStop={stop}
-        placeholder="ABAP · CDS · 에러 로그를 붙여넣거나 질문하세요…"
-      />
     </div>
   )
 }
diff --git a/2_frontend/src/features/snap/pages/SessionListPage.tsx b/2_frontend/src/features/snap/pages/SessionListPage.tsx
index f6f5344..9467e0f 100644
--- a/2_frontend/src/features/snap/pages/SessionListPage.tsx
+++ b/2_frontend/src/features/snap/pages/SessionListPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { ChevronLeft, ChevronRight, Plus } from "lucide-react"
+import { cn } from "@/lib/utils/cn"
 import { PATHS } from "@/config/routes"
 import { useDebounce } from "@/lib/hooks/useDebounce"
 import { hideWindow } from "@/lib/bridge/webviewBridge"
@@ -83,53 +84,51 @@ export default function SessionListPage() {
   }, [navigate])
 
   return (
-    <div className="scrollbar-hide mx-auto flex h-full max-w-2xl flex-col gap-4 overflow-y-auto p-6">
-      <div className="flex items-center gap-3">
-        <div className="bg-primary text-primary-foreground grid size-9 flex-none place-items-center rounded-md font-serif text-lg font-bold italic">
-          S
-        </div>
-        <div className="flex flex-col">
-          <span className="font-serif text-base font-semibold italic">지난 대화</span>
-          <span className="text-muted-foreground font-mono text-[9.5px] tracking-widest uppercase">
-            Snap Mate · Workspace
-          </span>
-        </div>
+    <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-3 px-5 pt-6 pb-5">
+      {/* 검색 행 = 런처의 명령줄. 오른쪽에 새 대화. */}
+      <div className="border-border bg-card focus-within:border-ring flex h-11 flex-none items-center gap-2 rounded-lg border pr-1.5 pl-3 transition-colors">
+        <SessionSearch value={q} onChange={setQ} />
+        <span className="bg-border h-5 w-px flex-none" aria-hidden="true" />
         <button
           type="button"
           onClick={() => navigate(PATHS.SNAP_NEW)}
           title="새 대화 (Ctrl+N)"
-          className="bg-primary text-primary-foreground ml-auto grid size-9 flex-none place-items-center rounded-md transition-opacity hover:opacity-90"
+          className="bg-primary text-primary-foreground focus-visible:ring-ring flex h-7 flex-none items-center gap-1 rounded-md px-2.5 text-[12px] font-semibold transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none"
         >
-          <Plus className="size-4" />
+          <Plus className="size-3.5" aria-hidden="true" />새 대화
         </button>
       </div>
 
-      <SessionSearch value={q} onChange={setQ} />
-
-      <div className="flex items-center justify-between">
-        <span className="text-muted-foreground font-mono text-[10px] tracking-wide uppercase">
-          {searching ? "검색 결과 (본문)" : "최근 진행 대화"}
-        </span>
-        <span className="border-border text-muted-foreground rounded-full border px-2 font-mono text-[10px]">
-          {total}
+      <div className="flex items-center justify-between px-0.5">
+        <span className="text-muted-foreground text-[11px] font-semibold tracking-wide">
+          {searching ? "검색 결과" : "최근 대화"}
         </span>
+        <span className="text-muted-foreground text-[11px] tabular-nums">{total}</span>
       </div>
 
-      <div ref={listRef} className="flex flex-col gap-2">
+      {/* 목록 블록 — 테두리는 여기 한 번, 행 사이는 옅은 구분선(ABAP_OPENCODE 콜랩스 블록 규칙) */}
+      <div
+        ref={listRef}
+        className="border-border bg-card divide-border/70 scrollbar-hide min-h-0 flex-none divide-y overflow-y-auto rounded-lg border"
+      >
         {active.isLoading && (
-          <div className="text-muted-foreground py-8 text-center font-mono text-xs">
-            불러오는 중…
-          </div>
+          <div className="text-muted-foreground py-10 text-center text-xs">불러오는 중…</div>
         )}
 
         {!active.isLoading && searching && hits.length === 0 && (
-          <div className="text-muted-foreground py-8 text-center font-mono text-xs">
-            검색 결과가 없습니다 · NO MATCH
+          <div className="text-muted-foreground flex flex-col items-center gap-1 py-10 text-center text-xs">
+            <span>"{debouncedQ.trim()}" 에 맞는 대화가 없어</span>
+            <span className="text-muted-foreground/70">
+              다른 단어로 찾아보거나 Esc 로 검색어를 지워봐
+            </span>
           </div>
         )}
         {!active.isLoading && !searching && sessions.length === 0 && (
-          <div className="text-muted-foreground py-8 text-center font-mono text-xs">
-            아직 대화가 없습니다
+          <div className="text-muted-foreground flex flex-col items-center gap-1 py-10 text-center text-xs">
+            <span>아직 대화가 없어</span>
+            <span className="text-muted-foreground/70">
+              새 대화(Ctrl+N)를 열고 코드나 에러를 붙여넣어봐
+            </span>
           </div>
         )}
 
@@ -153,15 +152,18 @@ export default function SessionListPage() {
             ))}
 
         {searching && meta && meta.totalPages > 1 && (
-          <div className="text-muted-foreground mt-1 flex items-center justify-center gap-3 font-mono text-xs">
+          <div className="text-muted-foreground flex items-center justify-center gap-3 py-2 text-[11px]">
             <button
               type="button"
               onClick={() => setPage((p) => p - 1)}
               disabled={!meta.hasPreviousPage || active.isFetching}
-              className="border-border hover:border-ring hover:text-foreground disabled:hover:border-border grid size-7 place-items-center rounded-md border transition-colors disabled:opacity-40"
+              className={cn(
+                "hover:bg-accent hover:text-foreground grid size-6 place-items-center rounded-md transition-colors",
+                "disabled:opacity-40 disabled:hover:bg-transparent"
+              )}
               title="이전"
             >
-              <ChevronLeft className="size-4" />
+              <ChevronLeft className="size-3.5" />
             </button>
             <span className="tabular-nums">
               {page} / {meta.totalPages}
@@ -170,16 +172,20 @@ export default function SessionListPage() {
               type="button"
               onClick={() => setPage((p) => p + 1)}
               disabled={!meta.hasNextPage || active.isFetching}
-              className="border-border hover:border-ring hover:text-foreground disabled:hover:border-border grid size-7 place-items-center rounded-md border transition-colors disabled:opacity-40"
+              className={cn(
+                "hover:bg-accent hover:text-foreground grid size-6 place-items-center rounded-md transition-colors",
+                "disabled:opacity-40 disabled:hover:bg-transparent"
+              )}
               title="다음"
             >
-              <ChevronRight className="size-4" />
+              <ChevronRight className="size-3.5" />
             </button>
           </div>
         )}
       </div>
 
-      <div className="text-muted-foreground border-border bg-background/95 sticky bottom-0 -mx-6 mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 border-t px-6 pt-2 font-mono text-[10px] backdrop-blur">
+      {/* 키 안내 — 한 줄, 조용하게 */}
+      <div className="text-muted-foreground mt-auto flex flex-none flex-wrap items-center gap-x-4 gap-y-1 px-0.5 pt-3 text-[10.5px]">
         <span className="flex items-center gap-1">
           <Kbd>↑</Kbd>
           <Kbd>↓</Kbd>
@@ -195,7 +201,7 @@ export default function SessionListPage() {
         </span>
         <span className="flex items-center gap-1">
           <Kbd>Esc</Kbd>
-          닫기
+          {q ? "검색 지우기" : "닫기"}
         </span>
       </div>
     </div>
diff --git a/2_frontend/src/features/snippets/pages/SnippetPalettePage.tsx b/2_frontend/src/features/snippets/pages/SnippetPalettePage.tsx
index 6a6b27d..2e357e0 100644
--- a/2_frontend/src/features/snippets/pages/SnippetPalettePage.tsx
+++ b/2_frontend/src/features/snippets/pages/SnippetPalettePage.tsx
@@ -1,4 +1,5 @@
 import { hostKind, send } from "@/lib/bridge/transport"
+import { LogoMark } from "@/shared/components/LogoMark"
 // 검색 → 결과 → 직접 선택한 코드 순서로 화면과 데스크톱 창을 펼침.
 import { useEffect, useMemo, useRef, useState } from "react"
 import { Check, Search } from "lucide-react"
@@ -287,9 +288,8 @@ export default function SnippetPalettePage() {
           onMouseDown={startWindowDrag}
           className="border-border flex h-9 flex-none items-center gap-2 border-b px-4 select-none"
         >
-          <span className="font-mono text-[11px] font-semibold tracking-[0.12em]">
-            Snippet Everywhere
-          </span>
+          <LogoMark width={28} />
+          <span className="text-[11px] font-semibold tracking-wide">CodeAssist · Snippet</span>
         </header>
       )}
       {/* 상단 검색 입력 */}
diff --git a/2_frontend/src/main.tsx b/2_frontend/src/main.tsx
index dd1c10c..7991b15 100644
--- a/2_frontend/src/main.tsx
+++ b/2_frontend/src/main.tsx
@@ -6,10 +6,9 @@ import { Toaster } from "sonner"
 import App from "./App"
 import { queryClient } from "./lib/query/queryClient"
 import { ALL_THEMES_CSS } from "@/shared/theme/derive"
-import "@fontsource-variable/geist"
 import "./styles/globals.css"
 
-// 24 팔레트 토큰을 <head>에 한 번 주입.
+// 팔레트 토큰을 <head>에 한 번 주입. 서체는 globals.css 의 시스템 산세리프(ABAP_OPENCODE 와 동일).
 // index.html 인라인 스크립트가 [data-theme] 을 미리 박아둠 → 첫 페인트부터 색 적용.
 const styleEl = document.createElement("style")
 styleEl.id = "palette-tokens"
diff --git a/2_frontend/src/shared/components/DesktopWindowFrame.tsx b/2_frontend/src/shared/components/DesktopWindowFrame.tsx
index 74be4d7..80e5aa9 100644
--- a/2_frontend/src/shared/components/DesktopWindowFrame.tsx
+++ b/2_frontend/src/shared/components/DesktopWindowFrame.tsx
@@ -4,8 +4,11 @@ import { invoke } from "@tauri-apps/api/core"
 import { X } from "lucide-react"
 import { toast } from "sonner"
 import { useLocation } from "react-router-dom"
+import { LogoMark } from "@/shared/components/LogoMark"
+import { SnapUserControls } from "@/features/snap/components/SnapUserControls"
 
-/** Tauri 프레임리스 창의 공통 제목줄. 닫기는 트레이로 숨김. */
+/** Tauri 프레임리스 창의 공통 제목줄. 닫기는 트레이로 숨김.
+ *  로그인 뒤 화면(snap·snippet)에선 테마·로그아웃도 여기 오른쪽에 — 따로 떠 있는 상자 없이. */
 export function DesktopWindowFrame({ children }: { children: ReactNode }) {
   const { pathname } = useLocation()
   const palette = pathname === "/snippet" || pathname === "/snap" || pathname.startsWith("/snap/")
@@ -18,29 +21,33 @@ export function DesktopWindowFrame({ children }: { children: ReactNode }) {
   return (
     <div className="bg-background text-foreground flex h-screen flex-col overflow-hidden">
       <header
-        className={`flex shrink-0 items-center select-none ${palette ? "h-7" : "border-border h-9 border-b"}`}
+        className={`border-border flex h-8 shrink-0 items-center border-b select-none ${palette ? "" : "h-9"}`}
       >
         <div
-          className="text-muted-foreground flex h-full min-w-0 flex-1 items-center px-4 text-[10px] font-medium"
+          className="text-muted-foreground flex h-full min-w-0 flex-1 items-center gap-2 px-3 text-[10.5px] font-semibold tracking-wide"
           onMouseDown={(event) => {
             if (event.button === 0) run("window_drag")
           }}
           // 창 이동은 포인터 전용 동작이며 버튼과 영역을 분리함.
           role="presentation"
         >
+          <LogoMark width={22} />
           CodeAssist
         </div>
+        {palette && <SnapUserControls />}
         <button
           type="button"
           aria-label="창 닫기"
           title="닫기 (트레이로 숨기기)"
-          className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring mr-1 flex h-full w-8 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset"
+          className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring mr-1 ml-0.5 flex size-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset"
           onClick={() => run("window_hide")}
         >
-          <X className="size-4" aria-hidden="true" />
+          <X className="size-3.5" aria-hidden="true" />
         </button>
       </header>
-      <div className="min-h-0 flex-1 overflow-auto [&_.h-screen]:h-full">{children}</div>
+      <div className="min-h-0 flex-1 overflow-auto [&_.h-screen]:h-full [&_.min-h-screen]:min-h-full">
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/2_frontend/src/shared/components/Layout.tsx b/2_frontend/src/shared/components/Layout.tsx
index 7b9b1ce..075a5d1 100644
--- a/2_frontend/src/shared/components/Layout.tsx
+++ b/2_frontend/src/shared/components/Layout.tsx
@@ -1,19 +1,26 @@
 import { Link, Outlet } from "react-router-dom"
+import { hostKind } from "@/lib/bridge/transport"
 import { PATHS } from "@/config/routes"
 import { ThemeToggle } from "@/shared/components/ThemeToggle"
+import { LogoMark } from "@/shared/components/LogoMark"
 
+/** 로그인 등 공개 화면 셸. Tauri 에선 창 제목줄(DesktopWindowFrame)이 로고·테마를 이미 보여주므로 헤더를 안 그림. */
 export default function Layout() {
+  const tauri = hostKind() === "tauri"
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="border-b">
-        <div className="container flex h-14 items-center justify-between">
-          <Link to={PATHS.HOME} className="font-semibold">
-            Frontend Template
-          </Link>
-          <ThemeToggle />
-        </div>
-      </header>
-      <main className="container flex min-h-0 flex-1 flex-col py-8">
+      {!tauri && (
+        <header className="border-border border-b">
+          <div className="mx-auto flex h-9 w-full max-w-5xl items-center justify-between pr-2 pl-3">
+            <Link to={PATHS.HOME} className="flex items-center gap-2 text-[11px] font-semibold">
+              <LogoMark width={26} />
+              CodeAssist
+            </Link>
+            <ThemeToggle />
+          </div>
+        </header>
+      )}
+      <main className="mx-auto flex min-h-0 w-full max-w-5xl flex-1 flex-col px-4 py-8">
         <Outlet />
       </main>
     </div>
diff --git a/2_frontend/src/shared/components/LogoMark.tsx b/2_frontend/src/shared/components/LogoMark.tsx
new file mode 100644
index 0000000..c8d3299
--- /dev/null
+++ b/2_frontend/src/shared/components/LogoMark.tsx
@@ -0,0 +1,19 @@
+import logo from "@/assets/logo.png"
+import logoDark from "@/assets/logo-dark.png"
+import { cn } from "@/lib/utils/cn"
+
+interface LogoMarkProps {
+  /** 로고 가로 폭(px) — 원본 비율(약 2.06:1) 유지 */
+  width?: number
+  className?: string
+}
+
+/** 브랜드 마크 — ABAP_OPENCODE 와 같은 PwC 로고. 다크에선 밝은 글자 변형. */
+export function LogoMark({ width = 38, className }: LogoMarkProps) {
+  return (
+    <span className={cn("inline-flex shrink-0", className)} style={{ width }}>
+      <img src={logo} alt="PwC" className="block h-auto w-full dark:hidden" />
+      <img src={logoDark} alt="PwC" className="hidden h-auto w-full dark:block" />
+    </span>
+  )
+}
diff --git a/2_frontend/src/shared/store/themeStore.ts b/2_frontend/src/shared/store/themeStore.ts
index 417f335..325b5f3 100644
--- a/2_frontend/src/shared/store/themeStore.ts
+++ b/2_frontend/src/shared/store/themeStore.ts
@@ -35,8 +35,8 @@ const ORDER: Theme[] = ["light", "dark", "system"]
 export const useThemeStore = create<ThemeState>()(
   persist(
     (set, get) => ({
-      theme: "light",
-      resolved: resolve("light"),
+      theme: "dark", // ABAP_OPENCODE 와 같이 다크가 기본
+      resolved: resolve("dark"),
       setTheme: (theme) => {
         const resolved = resolve(theme)
         applyToDocument(resolved)
diff --git a/2_frontend/src/shared/theme/derive.ts b/2_frontend/src/shared/theme/derive.ts
index 805b6a5..07388c6 100644
--- a/2_frontend/src/shared/theme/derive.ts
+++ b/2_frontend/src/shared/theme/derive.ts
@@ -83,34 +83,35 @@ export type DerivedTokens = {
 // 의미색 — 모든 테마 공통
 const DESTRUCTIVE = "oklch(0.577 0.245 27.325)"
 
-// 사용자가 선택한 목업 색을 그대로 유지. 명도 정렬로 primary가 차콜로 바뀌지 않게 함.
+// 기본 팔레트(id 는 하위호환으로 clean-blue 유지) — ABAP_OPENCODE DESIGN_SYSTEM.md §7 라이트 값.
+// globals.css :root 와 같은 값. 명도 정렬(derive)을 안 타서 블루가 차콜로 안 바뀜.
 const CLEAN_BLUE_TOKENS: DerivedTokens = {
-  background: "#FFFFFF",
-  foreground: "#242C39",
-  card: "#F7F9FC",
-  cardForeground: "#242C39",
+  background: "#FAFBFC",
+  foreground: "#1A1D22",
+  card: "#FFFFFF",
+  cardForeground: "#1A1D22",
   popover: "#FFFFFF",
-  popoverForeground: "#242C39",
-  primary: "#034EA2",
+  popoverForeground: "#1A1D22",
+  primary: "#3563E9",
   primaryForeground: "#FFFFFF",
-  secondary: "#F0F3F8",
-  secondaryForeground: "#242C39",
-  muted: "#F7F9FC",
-  mutedForeground: "#606D7F",
-  accent: "#EDF3FC",
-  accentForeground: "#034EA2",
+  secondary: "#EFF1F4",
+  secondaryForeground: "#1A1D22",
+  muted: "#F2F3F5",
+  mutedForeground: "#494F59",
+  accent: "#E4E8EF",
+  accentForeground: "#1A1D22",
   destructive: DESTRUCTIVE,
-  border: "#E1E6EE",
-  input: "#BBC7D8",
-  ring: "#034EA2",
-  sidebar: "#F7F9FC",
-  sidebarForeground: "#242C39",
-  sidebarPrimary: "#034EA2",
+  border: "#E1E3E8",
+  input: "#E1E3E8",
+  ring: "#3563E9",
+  sidebar: "#F2F3F5",
+  sidebarForeground: "#1A1D22",
+  sidebarPrimary: "#3563E9",
   sidebarPrimaryForeground: "#FFFFFF",
-  sidebarAccent: "#EDF3FC",
-  sidebarAccentForeground: "#034EA2",
-  sidebarBorder: "#E1E6EE",
-  sidebarRing: "#034EA2",
+  sidebarAccent: "#E9EBEF",
+  sidebarAccentForeground: "#1A1D22",
+  sidebarBorder: "#E9EBEF",
+  sidebarRing: "#3563E9",
 }
 
 export function derivePaletteTokens(
diff --git a/2_frontend/src/shared/theme/palettes.ts b/2_frontend/src/shared/theme/palettes.ts
index 03aa479..baf0ecf 100644
--- a/2_frontend/src/shared/theme/palettes.ts
+++ b/2_frontend/src/shared/theme/palettes.ts
@@ -10,9 +10,9 @@ export type RawPalette = {
 
 export const PALETTES: RawPalette[] = [
   {
-    id: "clean-blue",
-    name: "클린 블루",
-    swatch: ["#FFFFFF", "#F7F9FC", "#034EA2", "#242C39"],
+    id: "clean-blue", // id 는 저장된 값 호환 위해 유지 — 실제 토큰은 derive.ts 워크스페이스(ABAP_OPENCODE) 값
+    name: "워크스페이스",
+    swatch: ["#FAFBFC", "#F2F3F5", "#3563E9", "#1A1D22"],
   },
   // Sheet 1
   { id: "dark-teal", name: "Dark Teal", swatch: ["#1A222B", "#2D3540", "#009E9F", "#ECECEC"] },
diff --git a/2_frontend/src/styles/globals.css b/2_frontend/src/styles/globals.css
index 6a31138..4b0f852 100644
--- a/2_frontend/src/styles/globals.css
+++ b/2_frontend/src/styles/globals.css
@@ -15,12 +15,14 @@
 
 /* shadcn/ui 토큰 → Tailwind 색상·반경 매핑 */
 @theme inline {
+  /* ABAP_OPENCODE DESIGN_SYSTEM.md 와 같은 시스템 산세리프. 메타 라벨(font-mono 클래스)도 같은 서체 —
+     그쪽 UI 가 10~11px 산세리프 메타를 쓰기 때문. 코드블럭은 CodeBlock 이 자체 monospace 지정. */
   --font-sans:
-    "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans KR", sans-serif;
+    -apple-system, "Segoe UI", "Inter", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
   --font-mono:
-    "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans KR", sans-serif;
+    -apple-system, "Segoe UI", "Inter", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
+  --color-success: var(--success);
+  --color-warning: var(--warning);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -55,76 +57,80 @@
 }
 
 /* ────────────────────────────────────────────────────────────────────────────
-   팔레트 시스템 — palettes.ts 의 DEFAULT_THEME(=clean-blue) 폴백.
-   런타임 CSS는 main.tsx 가 ALL_THEMES_CSS 를 <style> 로 주입.
-   index.html 인라인 스크립트가 첫 페인트 전 [data-theme]/.dark 박음 → FOUC 없음.
-   의미색(destructive, chart-1..5)은 모든 팔레트 공통이므로 :root 에만 둠.
+   팔레트 — 기본은 ABAP_OPENCODE 의 "Dark Workspace" 테마(DESIGN_SYSTEM.md §1/§7)를
+   shadcn 토큰으로 옮긴 것. 계층(사이드바 < 패널 < 캔버스 < 카드)으로 깊이를 내고,
+   카드엔 항상 border, 악센트는 블루(선택·포커스)/그린(상태)/오렌지(경고) 셋만.
+   palettes.ts 의 DEFAULT_THEME(=clean-blue, 이름 "워크스페이스") 가 라이트 값을 덮고,
+   .dark 는 여기 값이 그대로 쓰임. index.html 이 첫 페인트 전 [data-theme]/.dark 박음.
    ──────────────────────────────────────────────────────────────────────────── */
 :root {
-  /* 클린 블루 기본 — derive.ts의 고정 토큰과 동일 */
-  --background: #ffffff;
-  --foreground: #242c39;
-  --card: #f7f9fc;
-  --card-foreground: #242c39;
+  /* 라이트 — 회색 층 → 흰 카드 */
+  --background: #fafbfc; /* canvas */
+  --foreground: #1a1d22; /* text-hi */
+  --card: #ffffff;
+  --card-foreground: #1a1d22;
   --popover: #ffffff;
-  --popover-foreground: #242c39;
-  --primary: #034ea2;
+  --popover-foreground: #1a1d22;
+  --primary: #3563e9; /* blue (흰 배경 대비용으로 진하게) */
   --primary-foreground: #ffffff;
-  --secondary: #f0f3f8;
-  --secondary-foreground: #242c39;
-  --muted: #f7f9fc;
-  --muted-foreground: #606d7f;
-  --accent: #edf3fc;
-  --accent-foreground: #034ea2;
+  --secondary: #eff1f4; /* chip */
+  --secondary-foreground: #1a1d22;
+  --muted: #f2f3f5; /* sidebar */
+  --muted-foreground: #494f59; /* text-md */
+  --accent: #e4e8ef; /* sel-bg */
+  --accent-foreground: #1a1d22;
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: #e1e6ee;
-  --input: #bbc7d8;
-  --ring: #034ea2;
-  --radius: 0.625rem;
+  --success: #22a85c; /* green — 상태·진행 */
+  --warning: #d07e44; /* orange — 보조·경고 */
+  --border: #e1e3e8;
+  --input: #e1e3e8;
+  --ring: #3563e9;
+  --radius: 0.5rem; /* 카드 8px, 소형 6px */
+  --shadow-float: 0 4px 14px rgba(23, 26, 31, 0.08), 0 1px 3px rgba(23, 26, 31, 0.06);
   /* 사이드바 */
-  --sidebar: #f7f9fc;
-  --sidebar-foreground: #242c39;
-  --sidebar-primary: #034ea2;
+  --sidebar: #f2f3f5;
+  --sidebar-foreground: #1a1d22;
+  --sidebar-primary: #3563e9;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #edf3fc;
-  --sidebar-accent-foreground: #034ea2;
-  --sidebar-border: #e1e6ee;
-  --sidebar-ring: #034ea2;
+  --sidebar-accent: #e9ebef;
+  --sidebar-accent-foreground: #1a1d22;
+  --sidebar-border: #e9ebef;
+  --sidebar-ring: #3563e9;
 }
 
-/*
- * 다크모드 — themeStore (light/dark/system) 가 .dark 클래스 토글.
- * 24 팔레트는 라이트 톤 기준이라 다크는 grayscale 베이스로 통일.
- */
+/* 다크(기본 모드) — 어두운 층 → 밝은 카드. themeStore 가 .dark 토글. */
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --background: #15171c; /* canvas */
+  --foreground: #e8eaed; /* text-hi (순백 금지) */
+  --card: #1a1d22;
+  --card-foreground: #e8eaed;
+  --popover: #1b1e24; /* float */
+  --popover-foreground: #e8eaed;
+  --primary: #4c7dff;
+  --primary-foreground: #ffffff;
+  --secondary: #1d2127; /* chip */
+  --secondary-foreground: #c9cdd3;
+  --muted: #191c21; /* item */
+  --muted-foreground: #9aa0a8; /* text-md */
+  --accent: #22262c; /* hover */
+  --accent-foreground: #e8eaed;
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --success: #35c96e;
+  --warning: #e0915a;
+  --border: #24272d;
+  --input: #24272d;
+  --ring: #4c7dff;
+  --shadow-float: 0 6px 18px rgba(0, 0, 0, 0.45);
+  --sidebar: #0c0d0f;
+  --sidebar-foreground: #c9cdd3;
+  --sidebar-primary: #4c7dff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #20242c; /* sel-bg */
+  --sidebar-accent-foreground: #e8eaed;
+  --sidebar-border: #1e2126;
+  --sidebar-ring: #4c7dff;
 }
 
 @layer base {
@@ -140,6 +146,41 @@
       "rlig" 1,
       "calt" 1;
   }
+  /* 스크롤바·선택·캐럿 — ABAP_OPENCODE 와 같은 얇은 오버레이 스타일 */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--accent);
+  }
+  ::selection {
+    background: color-mix(in srgb, var(--primary) 28%, transparent);
+  }
+  :root {
+    caret-color: var(--primary);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }
 
 /* 시머 텍스트 — "생각하는 중…" 등 대기 문구에 밝은 띠가 좌→우로 쓸고 지나감.
