diff --git a/apps/web/public/logo-dark.svg b/apps/web/public/logo-dark.svg
new file mode 100644
index 0000000..e4b4966
--- /dev/null
+++ b/apps/web/public/logo-dark.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_0_31)">
+<path id="Vector" d="M40 0H16C7.16344 0 0 7.16344 0 16V40C0 48.8366 7.16344 56 16 56H40C48.8366 56 56 48.8366 56 40V16C56 7.16344 48.8366 0 40 0Z" fill="#9BB4FF"/>
+<path id="Vector_2" d="M18 15H13V41H18M38 15H43V41H38" stroke="#101522" stroke-width="3" stroke-linecap="round"/>
+<path id="Vector_3" d="M23 35H27V28H31V21H35" stroke="#101522" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_31">
+<rect width="56" height="56" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/src/CodeEditor.tsx b/apps/web/src/CodeEditor.tsx
index 2cca728..a9dcfbb 100644
--- a/apps/web/src/CodeEditor.tsx
+++ b/apps/web/src/CodeEditor.tsx
@@ -6,4 +6,26 @@ import "monaco-editor/languages/definitions/java/register.js";
 import EditorWorker from "monaco-editor/editor/editor.worker.js?worker";
 window.MonacoEnvironment = { getWorker: () => new EditorWorker() };
 loader.config({ monaco });
+monaco.editor.defineTheme("algostep-light", {
+  base: "vs",
+  inherit: true,
+  rules: [],
+  colors: {
+    "editor.background": "#f6f7fb",
+    "editor.foreground": "#18213a",
+    "editor.lineHighlightBackground": "#eaf0ff",
+    "editorLineNumber.foreground": "#63708a",
+  },
+});
+monaco.editor.defineTheme("algostep-dark", {
+  base: "vs-dark",
+  inherit: true,
+  rules: [],
+  colors: {
+    "editor.background": "#222d43",
+    "editor.foreground": "#edf1fa",
+    "editor.lineHighlightBackground": "#22365f",
+    "editorLineNumber.foreground": "#a8b5cf",
+  },
+});
 export default Editor;
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index c7feaef..eab1975 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -17,7 +17,6 @@ import { createRoot } from "react-dom/client";
 import {
   BookOpen,
   Code2,
-  History,
   ArrowRight,
   Sun,
   Moon,
@@ -25,7 +24,6 @@ import {
   AlertCircle,
   Play,
   FileDown,
-  GitBranch,
   Search,
   Check,
   ArrowLeft,
@@ -514,7 +512,12 @@ function App() {
   const header = (
     <header>
       <button className="brand" onClick={() => void navigate("home")}>
-        <img src="/logo.svg" alt="" width="38" height="38" />
+        <img
+          src={theme === "dark" ? "/logo-dark.svg" : "/logo.svg"}
+          alt=""
+          width="56"
+          height="56"
+        />
         <b>알고리즘</b>
       </button>
       {user && (
@@ -527,7 +530,6 @@ function App() {
             }
             onClick={() => void navigate("home")}
           >
-            <BookOpen size={18} />
             학습 홈
           </button>
           {!mobile && (
@@ -540,14 +542,13 @@ function App() {
                 }
                 onClick={() => void navigate("problems")}
               >
-                <Code2 size={18} />
                 문제 풀기
               </button>
               <button
                 className={page === "history" ? "nav active" : "nav"}
                 onClick={() => void navigate("history")}
               >
-                <History size={18} />내 기록
+                내 기록
               </button>
             </>
           )}
@@ -578,6 +579,9 @@ function App() {
           }}
         >
           {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
+          <span className="theme-label">
+            테마 · {theme === "dark" ? "다크" : "라이트"}
+          </span>
         </button>
         {user && (
           <button
@@ -834,41 +838,67 @@ function App() {
         )}
         {actualPage === "home" && (
           <>
-            <section className="hero">
-              <div>
-                <span className="eyebrow">LEARN BY UNDERSTANDING</span>
+            {mobile ? (
+              <section className="mobile-intro">
                 <h1>
-                  오늘은 어떤 흐름을
+                  짧은 틈에도,
                   <br />
-                  이해해 볼까요?
+                  이해는 한 걸음 더.
                 </h1>
-                <p>
-                  자료구조를 살펴보고, 알고리즘의 다음 단계를 직접 따라가세요.
-                </p>
-                <button
-                  onClick={() => {
-                    const t = topics.find((t) => t.id === "binary-search");
-                    openLesson(t);
-                  }}
-                >
-                  이진 탐색부터 시작하기 <ArrowRight size={18} />
-                </button>
-              </div>
-              <div className="hero-diagram">
-                <span className="badge">작은 단계가 만드는 이해</span>
-                <div className="array">
-                  {[2, 5, 8, 13, 21].map((v, i) => (
-                    <div className={`cell ${i === 2 ? "active" : ""}`} key={v}>
-                      <small>{i}</small>
-                      <strong>{v}</strong>
-                    </div>
-                  ))}
+                <p>오늘은 어떤 원리를 알아볼까요?</p>
+                <div className="continue-lesson">
+                  <small>추천 학습</small>
+                  <h3>이진 탐색</h3>
+                  <p>범위를 절반씩 줄이는 이유</p>
+                  <button
+                    onClick={() =>
+                      openLesson(topics.find((t) => t.id === "binary-search"))
+                    }
+                  >
+                    개념 살펴보기
+                  </button>
                 </div>
-                <p>
-                  관찰하고 <span>→</span> 예측하고 <span>→</span> 확인하세요
-                </p>
-              </div>
-            </section>
+              </section>
+            ) : (
+              <section className="hero">
+                <div>
+                  <span className="eyebrow">LEARN BY SEEING</span>
+                  <h1>
+                    코드를 따라가면,
+                    <br />
+                    원리가 보입니다.
+                  </h1>
+                  <p>
+                    한 줄의 실행이 어떻게 답을 만드는지 살펴보세요.
+                    <br />
+                    직접 작성하고, 움직임을 확인하고, 이해를 쌓아가세요.
+                  </p>
+                  <button
+                    onClick={() => {
+                      const t = topics.find((t) => t.id === "binary-search");
+                      openLesson(t);
+                    }}
+                  >
+                    이진 탐색부터 시작하기 <ArrowRight size={18} />
+                  </button>
+                </div>
+                <div className="hero-diagram">
+                  <span className="eyebrow">BINARY SEARCH</span>
+                  <h3>절반을 지울 때마다, 더 가까이</h3>
+                  <div className="array">
+                    {[2, 5, 8, 13, 21].map((v, i) => (
+                      <div
+                        className={`cell ${i === 2 ? "active" : ""}`}
+                        key={v}
+                      >
+                        <strong>{v}</strong>
+                      </div>
+                    ))}
+                  </div>
+                  <code>mid = 2　 ·　 target = 13</code>
+                </div>
+              </section>
+            )}
             <div className="section-heading">
               <div>
                 <span className="eyebrow">LEARNING PATH</span>
@@ -920,16 +950,7 @@ function App() {
                         openLesson(t);
                       }}
                     >
-                      <div className="section-heading">
-                        <span className="topic-symbol">
-                          {t.category === "그래프" ? (
-                            <GitBranch />
-                          ) : (
-                            <BookOpen />
-                          )}
-                        </span>
-                        <span className="badge">{group.name}</span>
-                      </div>
+                      <span className="card-category">{group.name}</span>
                       <h4>{t.title}</h4>
                       <p>{t.body.split(". ")[0]}.</p>
                       <span className="card-link">
@@ -1174,6 +1195,23 @@ function App() {
                 </button>
               </div>
             </div>
+            <div className="problem-description workspace-description">
+              <h3>문제</h3>
+              <p>{problem.statement}</p>
+              <details>
+                <summary>입출력 조건과 공개 테스트</summary>
+                <p>{problem.input_spec}</p>
+                <p>{problem.output_spec}</p>
+                <small>{problem.constraints_text}</small>
+                {problem.tests.map((t: any, i: number) => (
+                  <div className="public-test" key={i}>
+                    <strong>테스트 {i + 1}</strong>
+                    <pre>{t.input}</pre>
+                    <code>예상 출력: {JSON.stringify(t.expected)}</code>
+                  </div>
+                ))}
+              </details>
+            </div>
             <div className="workspace">
               <section className="panel editor-panel">
                 <div className="language-tabs">
@@ -1200,15 +1238,25 @@ function App() {
                   </code>
                   <span role="status">{saveStatus}</span>
                 </div>
-                <Suspense fallback={<p>코드 편집기를 준비하고 있어요.</p>}>
+                <Suspense
+                  fallback={
+                    <p className="editor-loading">
+                      코드 편집기를 준비하고 있어요.
+                    </p>
+                  }
+                >
                   <Editor
-                    height="410px"
+                    height="392px"
                     language={language === "cpp" ? "cpp" : language}
                     value={source}
                     onChange={(s) => editCode(s ?? "")}
-                    theme={theme === "dark" ? "vs-dark" : "light"}
+                    theme={
+                      theme === "dark" ? "algostep-dark" : "algostep-light"
+                    }
                     options={{
                       fontSize: 14,
+                      lineHeight: 24,
+                      fontFamily: "JetBrains Mono, monospace",
                       minimap: { enabled: false },
                       scrollBeyondLastLine: false,
                       automaticLayout: true,
@@ -1261,43 +1309,8 @@ function App() {
                 </button>
               </section>
               <div className="right-column">
-                <div className="panel problem-description">
-                  <h3>문제</h3>
-                  <p>{problem.statement}</p>
-                  <details>
-                    <summary>입출력 조건과 공개 테스트</summary>
-                    <p>{problem.input_spec}</p>
-                    <p>{problem.output_spec}</p>
-                    <small>{problem.constraints_text}</small>
-                    {problem.tests.map((t: any, i: number) => (
-                      <div className="public-test" key={i}>
-                        <strong>테스트 {i + 1}</strong>
-                        <pre>{t.input}</pre>
-                        <code>예상 출력: {JSON.stringify(t.expected)}</code>
-                      </div>
-                    ))}
-                  </details>
-                </div>
                 <section className="panel results">
-                  <div className="language-tabs">
-                    {[
-                      ["visual", "시각화"],
-                      ["tests", "테스트 결과"],
-                      ["review", "코드 리뷰"],
-                    ].map(([k, v]) => (
-                      <button
-                        key={k}
-                        className={`tab ${tab === k ? "active" : ""}`}
-                        onClick={() => {
-                          setTab(k);
-                          track("RESULT_TAB_VIEWED", { tab: k });
-                        }}
-                      >
-                        {v}
-                      </button>
-                    ))}
-                  </div>
-                  {tab !== "review" && (
+                  {
                     <>
                       <div className="execution-state">
                         <span className="badge">
@@ -1353,8 +1366,8 @@ function App() {
                         </select>
                       )}
                     </>
-                  )}
-                  {tab === "visual" && (
+                  }
+                  {
                     <>
                       <TraceViewer
                         trace={selectedTest?.trace ?? []}
@@ -1393,125 +1406,140 @@ function App() {
                         </div>
                       )}
                     </>
-                  )}
-                  {tab === "tests" &&
-                    (selectedTest ? (
-                      <>
-                        <div className="metrics">
-                          <div>
-                            <small>실행 시간</small>
-                            <strong>{selectedTest.elapsedMs} ms</strong>
-                          </div>
-                          <div>
-                            <small>최대 메모리</small>
-                            <strong>
-                              {(
-                                selectedTest.peakMemoryBytes /
-                                1024 /
-                                1024
-                              ).toFixed(2)}{" "}
-                              MiB
-                            </strong>
-                          </div>
-                        </div>
-                        <p className="caption">
-                          엄격 비교 · 아래 표기는 공백과 줄바꿈을 포함해요.
-                        </p>
-                        {[
-                          ["입력", selectedTest.input],
-                          [
-                            "예상 출력",
-                            selectedTest.expected === null
-                              ? "사용자 입력 실행 — 채점 없음"
-                              : JSON.stringify(selectedTest.expected),
-                          ],
-                          ["실제 출력", JSON.stringify(selectedTest.actual)],
-                          ["실행 오류", selectedTest.stderr || "없음"],
-                        ].map(([k, v]) => (
-                          <div key={k}>
-                            <h4>{k}</h4>
-                            <pre>{v}</pre>
-                          </div>
-                        ))}
-                      </>
-                    ) : (
-                      <p className="empty">
-                        코드를 실행하면 테스트 결과가 여기에 표시돼요.
-                      </p>
-                    ))}
-                  {tab === "review" && (
-                    <>
-                      <div className="section-heading">
-                        <h3>코드 리뷰</h3>
-                        <span className="badge">
-                          무료{" "}
-                          {Math.max(
-                            0,
-                            3 - (usage?.consumed ?? 0) - (usage?.reserved ?? 0),
+                  }
+                </section>
+              </div>
+            </div>
+            <section
+              className="panel workspace-outcomes"
+              aria-label="테스트 결과와 코드 리뷰"
+            >
+              <div className="language-tabs">
+                {[
+                  ["tests", "테스트 결과"],
+                  ["review", "코드 리뷰"],
+                ].map(([k, v]) => (
+                  <button
+                    key={k}
+                    className={`tab ${(tab === "visual" ? "tests" : tab) === k ? "active" : ""}`}
+                    onClick={() => {
+                      setTab(k);
+                      track("RESULT_TAB_VIEWED", { tab: k });
+                    }}
+                  >
+                    {v}
+                  </button>
+                ))}
+              </div>
+              {tab !== "review" &&
+                (selectedTest ? (
+                  <>
+                    <div className="metrics">
+                      <div>
+                        <small>실행 시간</small>
+                        <strong>{selectedTest.elapsedMs} ms</strong>
+                      </div>
+                      <div>
+                        <small>최대 메모리</small>
+                        <strong>
+                          {(selectedTest.peakMemoryBytes / 1024 / 1024).toFixed(
+                            2,
                           )}{" "}
-                          / 3건 남음
-                        </span>
+                          MiB
+                        </strong>
                       </div>
-                      <p className="muted">
-                        논리 오류 · 효율 개선 · 대안 코드를 확인해요.
-                        <br />
-                        작성 코드, 권장 코드, 문제를 LLM에 전달합니다.
-                      </p>
-                      <button
-                        disabled={busy || !config?.reviewEnabled}
-                        onClick={() => void review()}
-                      >
-                        현재 코드 리뷰 요청
-                      </button>
-                      {!config?.reviewEnabled && (
-                        <p className="caption">
-                          리뷰 서비스 연결이 준비 중이에요. 이용량은 차감되지
-                          않아요.
+                    </div>
+                    <p className="caption">
+                      엄격 비교 · 아래 표기는 공백과 줄바꿈을 포함해요.
+                    </p>
+                    {[
+                      ["입력", selectedTest.input],
+                      [
+                        "예상 출력",
+                        selectedTest.expected === null
+                          ? "사용자 입력 실행 — 채점 없음"
+                          : JSON.stringify(selectedTest.expected),
+                      ],
+                      ["실제 출력", JSON.stringify(selectedTest.actual)],
+                      ["실행 오류", selectedTest.stderr || "없음"],
+                    ].map(([k, v]) => (
+                      <div key={k}>
+                        <h4>{k}</h4>
+                        <pre>{v}</pre>
+                      </div>
+                    ))}
+                  </>
+                ) : (
+                  <p className="empty">
+                    코드를 실행하면 테스트 결과가 여기에 표시돼요.
+                  </p>
+                ))}
+              {tab === "review" && (
+                <>
+                  <div className="section-heading">
+                    <h3>코드 리뷰</h3>
+                    <span className="badge">
+                      무료{" "}
+                      {Math.max(
+                        0,
+                        3 - (usage?.consumed ?? 0) - (usage?.reserved ?? 0),
+                      )}{" "}
+                      / 3건 남음
+                    </span>
+                  </div>
+                  <p className="muted">
+                    논리 오류 · 효율 개선 · 대안 코드를 확인해요.
+                    <br />
+                    작성 코드, 권장 코드, 문제를 LLM에 전달합니다.
+                  </p>
+                  <button
+                    disabled={busy || !config?.reviewEnabled}
+                    onClick={() => void review()}
+                  >
+                    현재 코드 리뷰 요청
+                  </button>
+                  {!config?.reviewEnabled && (
+                    <p className="caption">
+                      리뷰 서비스 연결이 준비 중이에요. 이용량은 차감되지
+                      않아요.
+                    </p>
+                  )}
+                  <p className="caption">
+                    KST 매월 1일 초기화 · 이월 없음 · 추가 구매는 가격 확정 후
+                    제공
+                  </p>
+                  {record.reviews?.map((r: any) => (
+                    <article className="review" key={r.id}>
+                      <span className="badge">{r.status}</span>
+                      <small>
+                        {new Date(r.created_at).toLocaleString("ko-KR")}
+                      </small>
+                      {r.status === "FAILED" && (
+                        <p>
+                          리뷰를 완료하지 못했어요. 이용량은 차감되지 않았어요.
                         </p>
                       )}
-                      <p className="caption">
-                        KST 매월 1일 초기화 · 이월 없음 · 추가 구매는 가격 확정
-                        후 제공
-                      </p>
-                      {record.reviews?.map((r: any) => (
-                        <article className="review" key={r.id}>
-                          <span className="badge">{r.status}</span>
-                          <small>
-                            {new Date(r.created_at).toLocaleString("ko-KR")}
-                          </small>
-                          {r.status === "FAILED" && (
-                            <p>
-                              리뷰를 완료하지 못했어요. 이용량은 차감되지
-                              않았어요.
-                            </p>
-                          )}
-                          {r.result && (
-                            <>
-                              <h4>논리 오류</h4>
-                              <p className="pre-wrap">
-                                {r.result.logicalErrors}
-                              </p>
-                              <h4>효율 개선</h4>
-                              <p className="pre-wrap">
-                                {r.result.efficiencyImprovements}
-                              </p>
-                              <h4>대안 코드</h4>
-                              <pre>{r.result.alternativeCode}</pre>
-                            </>
-                          )}
-                          <details>
-                            <summary>
-                              리뷰 당시 코드 · {labels[r.language]}
-                            </summary>
-                            <pre>{r.source}</pre>
-                          </details>
-                        </article>
-                      ))}
-                    </>
-                  )}
-                </section>
-              </div>
-            </div>
+                      {r.result && (
+                        <>
+                          <h4>논리 오류</h4>
+                          <p className="pre-wrap">{r.result.logicalErrors}</p>
+                          <h4>효율 개선</h4>
+                          <p className="pre-wrap">
+                            {r.result.efficiencyImprovements}
+                          </p>
+                          <h4>대안 코드</h4>
+                          <pre>{r.result.alternativeCode}</pre>
+                        </>
+                      )}
+                      <details>
+                        <summary>리뷰 당시 코드 · {labels[r.language]}</summary>
+                        <pre>{r.source}</pre>
+                      </details>
+                    </article>
+                  ))}
+                </>
+              )}
+            </section>
           </>
         )}
         {actualPage === "history" && (
@@ -1580,6 +1608,34 @@ function App() {
           </>
         )}
       </main>
+      {mobile && (
+        <nav className="mobile-navigation" aria-label="모바일 학습 메뉴">
+          <button
+            className={actualPage === "home" ? "nav active" : "nav"}
+            onClick={() => void navigate("home")}
+          >
+            홈
+          </button>
+          <button
+            className={actualPage === "lesson" ? "nav active" : "nav"}
+            onClick={() =>
+              openLesson(topic ?? topics.find((t) => t.id === "binary-search"))
+            }
+          >
+            학습
+          </button>
+          <button
+            className={actualPage === "practice" ? "nav active" : "nav"}
+            onClick={() => {
+              setTopic(topic ?? topics.find((t) => t.id === "binary-search"));
+              setPage("practice");
+              window.scrollTo(0, 0);
+            }}
+          >
+            퀴즈
+          </button>
+        </nav>
+      )}
       <footer>
         알고리즘 <span>이해가 쌓이는 학습 공간</span>
         <small>Python 3.10 · C++20 · Java 21</small>
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 4dbb37e..501ab07 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -43,7 +43,7 @@
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 10px 12px;
-  min-height: 44px;
+  min-height: 48px;
   max-width: 100%;
 }
 .dashboard small,
@@ -334,16 +334,17 @@ p {
 h1 {
   font-size: 36px;
   line-height: 1.45;
-  letter-spacing: -1.3px;
+  letter-spacing: 0;
   margin-bottom: 16px;
 }
 h2 {
-  font-size: 25px;
-  letter-spacing: -0.8px;
+  font-size: 28px;
+  line-height: 40px;
+  letter-spacing: 0;
   margin-bottom: 16px;
 }
 h3 {
-  font-size: 18px;
+  font-size: 20px;
   line-height: 1.6;
   margin-bottom: 12px;
 }
@@ -352,8 +353,8 @@ h4 {
   margin-bottom: 8px;
 }
 p {
-  font-size: 14px;
-  line-height: 1.9;
+  font-size: 16px;
+  line-height: 26px;
 }
 small,
 .caption {
@@ -377,20 +378,22 @@ pre {
 }
 header {
   height: 88px;
-  padding: 0 40px;
+  padding: 0 48px;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--border);
+  border-radius: 0 0 12px 12px;
   gap: 20px;
 }
 header .brand {
   padding: 0;
   background: none;
   color: var(--text);
-  font-size: 24px;
-  letter-spacing: -1px;
+  font-size: 28px;
+  letter-spacing: 0;
+  gap: 16px;
+  flex-shrink: 0;
 }
 .brand img {
   display: block;
@@ -402,7 +405,8 @@ nav {
 nav .nav {
   color: var(--muted);
   background: none;
-  padding: 12px 22px;
+  padding: 12px 24px;
+  white-space: nowrap;
 }
 .nav.active,
 .tab.active {
@@ -412,7 +416,8 @@ nav .nav {
 .header-right {
   display: flex;
   align-items: center;
-  gap: 18px;
+  gap: 16px;
+  flex-shrink: 0;
 }
 .icon-button,
 .account {
@@ -424,9 +429,16 @@ nav .nav {
   max-width: 130px;
   overflow: hidden;
 }
+.header-right .icon-button {
+  border-color: var(--border);
+  padding: 12px 16px;
+}
+.theme-label {
+  white-space: nowrap;
+}
 main {
   max-width: 1440px;
-  padding: 40px 48px 64px;
+  padding: 48px 48px 64px;
   margin: auto;
   min-height: calc(100vh - 170px);
 }
@@ -460,9 +472,10 @@ footer small {
 }
 .eyebrow {
   display: block;
-  letter-spacing: 2px;
-  font-size: 11px;
-  font-weight: 700;
+  letter-spacing: 0;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
   color: var(--accent);
   margin-bottom: 14px;
 }
@@ -483,7 +496,7 @@ footer small {
 }
 .actions {
   display: flex;
-  gap: 10px;
+  gap: 16px;
   flex-wrap: wrap;
 }
 .panel {
@@ -507,36 +520,56 @@ footer small {
 }
 .hero {
   display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  gap: 40px;
-  padding: 32px 0 52px;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
+  gap: 48px;
+  padding: 40px;
   margin-bottom: 32px;
-  border-bottom: 1px solid var(--border);
+  background: var(--accent-soft);
+  border-radius: 24px;
+  align-items: start;
 }
 .hero h1 {
-  font-size: 42px;
+  font-size: 56px;
+  line-height: 76px;
 }
 .hero p {
   color: var(--muted);
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 .hero-diagram {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  gap: 25px;
-  padding: 30px;
+  border-radius: 16px;
+  gap: 24px;
+  padding: 24px;
 }
-.hero-diagram p {
+.hero-diagram h3,
+.hero-diagram .eyebrow {
   margin: 0;
-  font-size: 13px;
 }
-.hero-diagram p span {
-  padding: 0 10px;
+.hero-diagram .eyebrow {
+  font-size: 12px;
+  line-height: 20px;
+}
+.hero-diagram code {
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--muted);
+}
+.hero-diagram .array {
+  padding: 0;
+  gap: 12px;
+}
+.hero-diagram .cell {
+  min-width: 56px;
+  min-height: 56px;
+  border-radius: 12px;
+  background: var(--subtle);
+}
+.hero-diagram .cell.active {
+  background: var(--accent);
 }
 .array {
   display: flex;
@@ -587,7 +620,7 @@ footer small {
 .topic-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
+  gap: 24px;
 }
 .category-nav {
   display: flex;
@@ -622,25 +655,41 @@ footer small {
   margin: 0 0 16px;
 }
 .topic-card h4 {
-  font-size: 18px;
-  margin: 20px 0 12px;
+  font-size: 20px;
+  line-height: 32px;
+  margin: 0;
 }
 .topic-card {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
   text-align: left;
   padding: 24px;
   color: var(--text);
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 12px;
 }
 .topic-card:hover {
   transform: translateY(-2px);
 }
 .topic-card p {
   color: var(--muted);
-  font-size: 13px;
-  min-height: 48px;
+  font-size: 14px;
+  line-height: 22px;
+  min-height: 44px;
+  margin: 0;
+  font-weight: 400;
+}
+.card-category {
+  color: var(--accent);
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 400;
+}
+.topic-card .card-link {
+  margin-top: auto;
 }
 .topic-symbol {
   display: inline-flex;
@@ -684,7 +733,7 @@ footer small {
 }
 .lesson-layout {
   display: grid;
-  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 24px;
   align-items: start;
 }
@@ -826,7 +875,7 @@ footer small {
 }
 .workspace {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 640fr) minmax(0, 680fr);
   gap: 24px;
 }
 .editor-panel {
@@ -834,12 +883,37 @@ footer small {
   position: sticky;
   top: 20px;
 }
+.editor-loading {
+  height: 392px;
+  padding: 16px;
+  background: var(--subtle);
+  border-radius: 12px;
+}
+.editor-panel .monaco-editor {
+  border-radius: 12px;
+  overflow: hidden;
+}
 .language-tabs {
   display: flex;
-  gap: 6px;
-  margin-bottom: 18px;
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.editor-panel .tab {
+  flex: 1;
+}
+.workspace-description {
+  margin-bottom: 32px;
+}
+.workspace-description h3 {
+  display: none;
+}
+.workspace-description p {
+  font-size: 14px;
+  line-height: 22px;
+}
+.workspace-outcomes .metrics {
+  max-width: 640px;
 }
 .tab {
   background: transparent;
@@ -850,7 +924,7 @@ footer small {
   display: flex;
   justify-content: space-between;
   color: var(--muted);
-  font-size: 11px;
+  font-size: 12px;
   margin-bottom: 14px;
 }
 .input-label {
@@ -1317,9 +1391,9 @@ svg text {
   --subtle: #222d43;
   --text: #edf1fa;
   --muted: #a8b5cf;
-  --border: #34425d;
+  --border: #35435d;
   --accent: #9bb4ff;
-  --accent-soft: #283a61;
+  --accent-soft: #22365f;
   --on-accent: #101522;
   --success: #7cdbbd;
   --success-soft: #203f3b;
@@ -1327,12 +1401,95 @@ svg text {
   background: var(--bg);
   color: var(--text);
 }
+.mobile-navigation {
+  display: flex;
+  position: fixed;
+  left: 24px;
+  right: 24px;
+  bottom: 16px;
+  z-index: 20;
+  padding: 12px 8px;
+  gap: 4px;
+  border-radius: 16px;
+  background: var(--surface);
+  box-shadow: 0 4px 20px #10152212;
+}
+.mobile-navigation .nav {
+  flex: 1;
+  font-size: 14px;
+}
+body:has(.mobile-navigation) footer {
+  padding-bottom: 112px;
+}
+.mobile-intro {
+  margin-bottom: 32px;
+}
+.mobile-intro h1 {
+  font-size: 28px;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+.mobile-intro > p {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 24px;
+}
+.continue-lesson {
+  padding: 24px;
+  border-radius: 24px;
+  background: var(--accent-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.continue-lesson small {
+  color: var(--accent);
+}
+.continue-lesson h3,
+.continue-lesson p {
+  margin: 0;
+}
+.continue-lesson p {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (max-width: 1250px) {
+  .theme-label {
+    display: none;
+  }
+  header > nav {
+    gap: 4px;
+  }
+  .hero {
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
+    gap: 24px;
+    padding: 32px;
+  }
+  .hero h1 {
+    font-size: 42px;
+    line-height: 60px;
+  }
+  .hero-diagram .cell {
+    min-width: 44px;
+    min-height: 48px;
+  }
+}
 @media (max-width: 1100px) {
   header {
     padding: 0 24px;
   }
+  header .brand {
+    font-size: 24px;
+    gap: 12px;
+  }
+  header .brand img {
+    width: 48px;
+    height: 48px;
+  }
   nav .nav {
-    padding: 10px 14px;
+    padding: 10px;
   }
   main {
     padding: 28px;
@@ -1358,16 +1515,27 @@ svg text {
 }
 @media (max-width: 849px) {
   header {
-    height: 72px;
-    padding: 0 18px;
+    height: auto;
+    min-height: 104px;
+    padding: 24px;
     gap: 12px;
+    flex-wrap: wrap;
+    background: var(--bg);
   }
   header .brand {
-    font-size: 20px;
+    font-size: 28px;
+    gap: 16px;
   }
-  .brand img {
-    width: 30px;
-    height: 30px;
+  header .brand img {
+    width: 56px;
+    height: 56px;
+  }
+  header > nav {
+    order: 3;
+    flex-basis: 100%;
+  }
+  header > nav > button:first-child {
+    display: none;
   }
   nav .nav {
     padding: 8px;
@@ -1384,7 +1552,14 @@ svg text {
     font-size: 11px;
   }
   main {
-    padding: 24px 18px;
+    padding: 24px;
+  }
+  .mobile-navigation {
+    margin: 0;
+  }
+  h2 {
+    font-size: 20px;
+    line-height: 32px;
   }
   .hero {
     grid-template-columns: 1fr;
@@ -1486,7 +1661,7 @@ svg text {
   header {
     height: auto;
     min-height: 72px;
-    padding: 12px 18px;
+    padding: 24px;
     flex-wrap: wrap;
     gap: 8px 12px;
   }
diff --git a/docs/figma-design-parity.md b/docs/figma-design-parity.md
new file mode 100644
index 0000000..04e1a25
--- /dev/null
+++ b/docs/figma-design-parity.md
@@ -0,0 +1,24 @@
+# Figma와 웹 디자인 정렬
+
+기준 파일: [알고리즘](https://www.figma.com/design/lPDjWigwlNvT2oAjAjxoyx?node-id=4-79).
+
+| 화면 | Figma 기준 | 반영한 구성 |
+| --- | --- | --- |
+| 웹 홈 | 05 · Web / 9:20 | 88px 헤더, 56px 로고, 56/76 제목, 파란 배경 배너, 배열 예시 카드, 카드 간격·타이포그래피 |
+| 개념 학습 | 05 · Web / 9:58 | 설명과 예시를 1:2 비율로 배치, 공통 제목·버튼·패널 스타일 |
+| 코드 작성 | 05 · Web / 9:77 | 전체 너비 문제 설명, 640:680 편집기·시각화 열, 아래 전체 너비 테스트 결과·리뷰, 편집기 색상 |
+| 모바일 홈 | 06 · Android / 16:234, 23:1056 | 모바일 전용 소개·추천 학습 카드, 24px 여백, 홈·학습·퀴즈 하단 메뉴 |
+| 다크 모드 | 06 · Android / 23:1056 | 원본 로고 자산, 강조 배경 #22365f, 테두리 #35435d, 편집기 테마 |
+
+원본의 시각적 구성에 이후 확정한 제품 요구사항을 적용했다. 전체 47개 개념의 종류별 분류와 검색, 개념→퀴즈→코드 문제 화면 분리, 사용 용도, 관리자·문의 기능을 유지한다. 모바일에는 코드 작성·실행 메뉴를 노출하지 않는다. OS 상태 표시줄은 웹에서 재현하지 않는다.
+
+홈의 추천은 실제 이어보기 기록이 아니므로 ‘추천 학습’으로 표시한다. 예시 화면에 있는 정답·실행 결과·복잡도·리뷰 수치는 복사하지 않고 서버가 제공하는 실제 상태를 표시한다. 시각화는 테스트 결과·리뷰 탭을 전환해도 코드 옆에 계속 남아 있다. 그래프·트리·배열의 이동과 확대·축소 기능도 유지한다.
+
+범위: 공통 스타일과 위 화면의 레이아웃 정렬. 모든 Figma 예외 상태 및 부가 화면을 픽셀 단위로 대조한 결과를 의미하지 않는다.
+
+## 검증 및 배포 (2026-09-20)
+
+- `npm run check`: 빌드·타입 검사 통과, 서버/워커 테스트 55개 통과. 별도 PostgreSQL 환경 검사 1개는 기존 조건에 따라 생략.
+- 브라우저 테스트 17개 통과. 360/412/768/850/1024/1440px의 라이트·다크 가로 넘침, 모바일 하단 메뉴 이동, 리뷰 전환 시 시각화 유지 확인.
+- Cloud Build `c8d1f888-3f10-4cf9-bc03-628fafaa619b` 성공, 기존 Cloud Run 이미지 업데이트 완료. 데이터베이스·IAM·워커 변경 없음.
+- 운영 health/metrics 200, 익명 관리자·문의 API 401, 새 웹 번들 확인.
diff --git a/docs/implementation-status.md b/docs/implementation-status.md
index f61d000..368d3a9 100644
--- a/docs/implementation-status.md
+++ b/docs/implementation-status.md
@@ -2,6 +2,8 @@
 
 ## 구현한 동작
 
+- Figma 웹·Android 원본 기준으로 홈 배너, 공통 타이포그래피·로고·카드, 개념 학습 비율, 코드 작성/시각화/테스트 결과 배치, 모바일 하단 메뉴 및 다크 토큰을 정렬했다. 이후 확정한 종류별 목록과 학습 단계 분리는 유지한다. [반영 범위](figma-design-parity.md) 참조.
+
 - Google 검증 이메일로 접근을 제한한 관리자 대시보드: KST 누적/일/주/월 고유 접속자, 가입자, 기간별 차트와 표, LLM 실제 사용량, 비용 원장 및 청구 JSON 가져오기, 매출/환불 원장, 문의 접수·답변·상태 관리와 비즈니스 이벤트 로그. 방문은 도입 이후 수집하며 GCP Billing export 자동 연결 및 PG 실결제는 미연동이다. [지표 정의와 운영 경계](admin-dashboard.md) 참조.
 
 - 온디맨드 N2 워커 최대 2대: 큐 기반 기동, 호스트당 2슬롯, 15분 유휴 종료, 종료 전 작업 배정 차단, Compute 요청 재시도. Supabase 전용 스키마 및 Vertex Express 연결. 클라우드 실제 배포와 검증 상태는 [배포 문서](gemini-deployment.md)를 확인한다.
diff --git a/tests/browser/platform.spec.ts b/tests/browser/platform.spec.ts
index 4bd61ba..ca8dca2 100644
--- a/tests/browser/platform.spec.ts
+++ b/tests/browser/platform.spec.ts
@@ -8,14 +8,12 @@ test("problem navigation opens the selected coding workspace directly", async ({
   const before = (await (await page.request.get("/api/records")).json()).records
     .length;
   await page.getByRole("button", { name: "문제 풀기", exact: true }).click();
-  const row = page
-    .getByRole("article")
-    .filter({
-      has: page.getByRole("heading", {
-        name: "FFT로 다항식 곱하기",
-        exact: true,
-      }),
-    });
+  const row = page.getByRole("article").filter({
+    has: page.getByRole("heading", {
+      name: "FFT로 다항식 곱하기",
+      exact: true,
+    }),
+  });
   await expect(
     row.getByRole("button", { name: "개념과 예제 보기", exact: true }),
   ).toBeVisible();
@@ -118,6 +116,39 @@ async function authenticate(page: any) {
   });
 }
 
+test("home remains usable across desktop and mobile widths and both themes", async ({
+  page,
+}) => {
+  await authenticate(page);
+  await page.goto("/");
+  await expect(
+    page.getByRole("heading", { name: "개념별 학습" }),
+  ).toBeVisible();
+  for (const width of [1440, 1024, 850, 768, 412, 360]) {
+    await page.setViewportSize({ width, height: 1000 });
+    for (const theme of ["light", "dark"]) {
+      if ((await page.locator("html").getAttribute("data-theme")) !== theme)
+        await page.getByRole("button", { name: "테마 변경" }).click();
+      expect(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= innerWidth,
+        ),
+      ).toBe(true);
+      if (width < 850) {
+        const nav = page.getByRole("navigation", { name: "모바일 학습 메뉴" });
+        await expect(nav).toBeInViewport();
+        await page.locator("footer").scrollIntoViewIfNeeded();
+        await expect(nav).toBeInViewport();
+        await page.evaluate(() => window.scrollTo(0, 0));
+      }
+      if (width === 1440 || width === 412)
+        await page.screenshot({
+          path: `test-results/figma-home-${width}-${theme}.png`,
+        });
+    }
+  }
+});
+
 test("expanded quizzes and movable diagrams retain positions across steps", async ({
   page,
 }) => {
@@ -485,6 +516,19 @@ test("mobile offers lessons and quizzes, not coding navigation", async ({
     ),
   ).toBe(true);
   await page.screenshot({ path: "test-results/mobile.png", fullPage: true });
+  const mobileNav = page.getByRole("navigation", { name: "모바일 학습 메뉴" });
+  await mobileNav.getByRole("button", { name: "학습", exact: true }).click();
+  await expect(
+    page.getByRole("heading", { name: "기본 개념", exact: true }),
+  ).toBeVisible();
+  await mobileNav.getByRole("button", { name: "퀴즈", exact: true }).click();
+  await expect(
+    page.getByRole("heading", { name: "잠깐, 이해했나요?", exact: true }),
+  ).toBeVisible();
+  await mobileNav.getByRole("button", { name: "홈", exact: true }).click();
+  await expect(
+    page.getByRole("heading", { name: "개념별 학습" }),
+  ).toBeVisible();
 });
 test("network outage uses full-screen recovery CTA", async ({ page }) => {
   await authenticate(page);
@@ -631,6 +675,13 @@ test("worker result contract renders actual supplied trace and strict outputs",
   await page.getByRole("button", { name: "테스트 결과", exact: true }).click();
   await expect(page.getByText("13 ms", { exact: true })).toBeVisible();
   await expect(page.getByText('"0 1\\n"', { exact: true })).toBeVisible();
+  await page.getByRole("button", { name: "코드 리뷰", exact: true }).click();
+  await expect(
+    page.getByRole("button", { name: "현재 코드 리뷰 요청", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("img", { name: "객체 필드와 참조 관계" }),
+  ).toBeVisible();
 });
 test("Android tablet remains learning-only at desktop width", async ({
   page,