diff --git a/apps/web/src/api/analyze/api.ts b/apps/web/src/api/analyze/api.ts
index 8529fa3..4960583 100644
--- a/apps/web/src/api/analyze/api.ts
+++ b/apps/web/src/api/analyze/api.ts
@@ -3,7 +3,11 @@ import { type RiskDetectAnalyzeResponse, type RiskSaveBody } from './types';
 
 const isDev = process.env.NODE_ENV === 'development';
 
-export const analyzeRisk = async (formData: FormData, signal?: AbortSignal): Promise<RiskDetectAnalyzeResponse> => {
+export const analyzeRisk = async (
+  formData: FormData,
+  userId: number,
+  signal?: AbortSignal
+): Promise<RiskDetectAnalyzeResponse> => {
   if (isDev) {
     console.group('[진단] analyzeRisk — POST /api/v1/risk-detector/analyze');
     for (const [key, value] of formData.entries()) {
@@ -18,7 +22,7 @@ export const analyzeRisk = async (formData: FormData, signal?: AbortSignal): Pro
   const res = await client
     .post('api/v1/risk-detector/analyze', {
       body: formData,
-      headers: { 'content-type': undefined },
+      headers: { 'content-type': undefined, 'x-user-id': String(userId) },
       timeout: 180000,
       signal,
     })
diff --git a/apps/web/src/api/client.ts b/apps/web/src/api/client.ts
index cf4a97b..e8a703a 100644
--- a/apps/web/src/api/client.ts
+++ b/apps/web/src/api/client.ts
@@ -56,6 +56,10 @@ const createClient = () =>
     hooks: {
       beforeRetry: [
         async ({ request, error }) => {
+          const status = (error as { status?: number }).status;
+          if (status !== 401) {
+            throw error;
+          }
           if (isPreAuth(request.url) || isRefresh(request.url)) {
             throw error;
           }
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/LoadingScreen.css.ts b/apps/web/src/app/(main)/_components/LoadingScreen/LoadingScreen.css.ts
new file mode 100644
index 0000000..d4d6202
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/LoadingScreen.css.ts
@@ -0,0 +1,256 @@
+import { vars } from '@muneo/design-system';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const float = keyframes({
+  '0%, 100%': { transform: 'translateY(0px)' },
+  '50%': { transform: 'translateY(-12px)' },
+});
+
+const shadowPulse = keyframes({
+  '0%, 100%': { transform: 'scaleX(1)', opacity: 0.18 },
+  '50%': { transform: 'scaleX(0.72)', opacity: 0.08 },
+});
+
+const workingBounce = keyframes({
+  '0%, 80%, 100%': { transform: 'translateY(0)', opacity: 0.35 },
+  '40%': { transform: 'translateY(-6px)', opacity: 1 },
+});
+
+const msgIn = keyframes({
+  from: { opacity: 0, transform: 'translateY(8px)' },
+  to: { opacity: 1, transform: 'translateY(0)' },
+});
+
+const msgOut = keyframes({
+  from: { opacity: 1, transform: 'translateY(0)' },
+  to: { opacity: 0, transform: 'translateY(-6px)' },
+});
+
+const shimmer = keyframes({
+  from: { transform: 'translateX(-100%)' },
+  to: { transform: 'translateX(400%)' },
+});
+
+const cardIn = keyframes({
+  from: { opacity: 0, transform: 'translateX(24px)' },
+  to: { opacity: 1, transform: 'translateX(0)' },
+});
+
+const cardOut = keyframes({
+  from: { opacity: 1, transform: 'translateX(0)' },
+  to: { opacity: 0, transform: 'translateX(-24px)' },
+});
+
+const MOTION = '(prefers-reduced-motion: reduce)' as const;
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '60vh',
+  padding: '120px 24px 40px',
+});
+
+export const mascotWrap = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginBottom: '8px',
+});
+
+export const mascotFloating = style({
+  animation: `${float} 2.6s ease-in-out infinite`,
+  '@media': { [MOTION]: { animation: 'none' } },
+});
+
+export const mascotImg = style({
+  width: '92px',
+  height: 'auto',
+  display: 'block',
+});
+
+export const mascotShadow = style({
+  width: '56px',
+  height: '8px',
+  borderRadius: '50%',
+  background: 'rgba(132, 85, 223, 0.22)',
+  filter: 'blur(4px)',
+  marginTop: '2px',
+  animation: `${shadowPulse} 2.6s ease-in-out infinite`,
+  '@media': { [MOTION]: { animation: 'none' } },
+});
+
+export const workingDots = style({
+  display: 'flex',
+  gap: '6px',
+  justifyContent: 'center',
+  marginTop: '12px',
+  marginBottom: '20px',
+});
+
+export const workingDot = style({
+  width: '7px',
+  height: '7px',
+  borderRadius: '50%',
+  backgroundColor: vars.color.brand.primary,
+  opacity: 0.35,
+  animation: `${workingBounce} 1.4s ease-in-out infinite`,
+  '@media': { [MOTION]: { animation: 'none', opacity: 1 } },
+});
+
+export const msgWrap = style({
+  height: '22px',
+  display: 'flex',
+  alignItems: 'center',
+  marginBottom: '14px',
+});
+
+export const msg = style({
+  fontSize: vars.typography.fontSize.sm,
+  color: vars.color.neutral.n500,
+  textAlign: 'center',
+  fontWeight: vars.typography.fontWeight.medium,
+  animation: `${msgIn} 0.35s ease-out both`,
+  '@media': { [MOTION]: { animation: 'none' } },
+});
+
+export const msgExiting = style({
+  animation: `${msgOut} 0.25s ease-in both`,
+  '@media': { [MOTION]: { animation: 'none' } },
+});
+
+export const progressWrap = style({
+  width: '100%',
+  maxWidth: '320px',
+  height: '5px',
+  borderRadius: '10px',
+  backgroundColor: vars.color.neutral.n200,
+  overflow: 'hidden',
+  marginBottom: '32px',
+  position: 'relative',
+});
+
+export const progressFill = style({
+  height: '100%',
+  borderRadius: '10px',
+  background: 'linear-gradient(90deg, #7B5CE5 0%, #B199FF 100%)',
+  width: '0%',
+  willChange: 'width',
+  position: 'relative',
+  overflow: 'hidden',
+  selectors: {
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '25%',
+      height: '100%',
+      background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent)',
+      animation: `${shimmer} 2.2s ease-in-out infinite`,
+    },
+  },
+  '@media': {
+    [MOTION]: {
+      selectors: {
+        '&::after': { animation: 'none' },
+      },
+    },
+  },
+});
+
+export const tipCard = style({
+  width: '100%',
+  maxWidth: '480px',
+  boxSizing: 'border-box',
+  backgroundColor: '#F5F0FF',
+  border: '1px solid #E3D8FF',
+  borderRadius: '16px',
+  padding: '20px 24px 16px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+  marginBottom: '20px',
+  animation: `${cardIn} 0.4s cubic-bezier(0.22, 1, 0.36, 1) both`,
+  '@media': { [MOTION]: { animation: 'none' } },
+});
+
+export const tipCardExiting = style({
+  animation: `${cardOut} 0.28s ease-in both`,
+  '@media': { [MOTION]: { animation: 'none' } },
+});
+
+export const tipHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+export const tipLabel = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '5px',
+  fontSize: vars.typography.fontSize.xs,
+  fontWeight: vars.typography.fontWeight.semiBold,
+  color: '#7B5CE5',
+  letterSpacing: '0.02em',
+});
+
+export const tipCounter = style({
+  fontSize: vars.typography.fontSize.xs,
+  color: '#B199FF',
+  fontWeight: vars.typography.fontWeight.medium,
+  fontVariantNumeric: 'tabular-nums',
+});
+
+export const tipText = style({
+  fontSize: vars.typography.fontSize.base,
+  color: vars.color.neutral.n700,
+  lineHeight: '1.75',
+  fontWeight: vars.typography.fontWeight.regular,
+  wordBreak: 'keep-all',
+});
+
+export const tipProgressTrack = style({
+  width: '100%',
+  height: '3px',
+  borderRadius: '10px',
+  backgroundColor: '#E3D8FF',
+  overflow: 'hidden',
+  marginTop: '4px',
+});
+
+export const tipProgressFill = style({
+  height: '100%',
+  borderRadius: '10px',
+  background: 'linear-gradient(90deg, #8455DF, #B199FF)',
+  transition: 'width 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
+});
+
+export const footer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '10px',
+});
+
+export const footerText = style({
+  fontSize: vars.typography.fontSize.xs,
+  color: vars.color.neutral.n400,
+});
+
+export const cancelBtn = style({
+  background: 'none',
+  border: `1px solid ${vars.color.neutral.n300}`,
+  borderRadius: vars.radius.sm,
+  padding: '8px 20px',
+  fontSize: vars.typography.fontSize.sm,
+  color: vars.color.neutral.n500,
+  cursor: 'pointer',
+  fontFamily: vars.typography.fontFamily,
+  transition: 'opacity 0.15s ease',
+  selectors: {
+    '&:hover': { opacity: 0.65 },
+  },
+});
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/LoadingScreen.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/LoadingScreen.tsx
new file mode 100644
index 0000000..37d9c32
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/LoadingScreen.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { LoadingFooter } from './_components/LoadingFooter';
+import { Mascot } from './_components/Mascot';
+import { ProgressBar } from './_components/ProgressBar';
+import { RotatingMessage } from './_components/RotatingMessage';
+import { TipCard } from './_components/TipCard';
+import { WorkingDots } from './_components/WorkingDots';
+import { type ProgressStep } from './_hooks/useProgressSteps';
+import * as styles from './LoadingScreen.css';
+
+export type { ProgressStep };
+
+interface Props {
+  messages: string[];
+  tips: string[];
+  warningMessage: string;
+  warningDelayMs: number;
+  progressSteps: ProgressStep[];
+  footerText: string;
+  onCancel: () => void;
+}
+
+export const LoadingScreen = ({
+  messages,
+  tips,
+  warningMessage,
+  warningDelayMs,
+  progressSteps,
+  footerText,
+  onCancel,
+}: Props) => (
+  <div className={styles.container}>
+    <Mascot />
+    <WorkingDots />
+    <RotatingMessage messages={messages} warningMessage={warningMessage} warningDelayMs={warningDelayMs} />
+    <ProgressBar steps={progressSteps} />
+    <TipCard tips={tips} />
+    <LoadingFooter footerText={footerText} onCancel={onCancel} />
+  </div>
+);
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_components/LoadingFooter.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/_components/LoadingFooter.tsx
new file mode 100644
index 0000000..7052bf1
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_components/LoadingFooter.tsx
@@ -0,0 +1,15 @@
+import * as styles from '../LoadingScreen.css';
+
+interface Props {
+  footerText: string;
+  onCancel: () => void;
+}
+
+export const LoadingFooter = ({ footerText, onCancel }: Props) => (
+  <div className={styles.footer}>
+    <span className={styles.footerText}>{footerText}</span>
+    <button type="button" className={styles.cancelBtn} onClick={onCancel}>
+      취소
+    </button>
+  </div>
+);
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_components/Mascot.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/_components/Mascot.tsx
new file mode 100644
index 0000000..0f47b70
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_components/Mascot.tsx
@@ -0,0 +1,27 @@
+import * as styles from '../LoadingScreen.css';
+
+export const Mascot = () => (
+  <div className={styles.mascotWrap} aria-hidden="true">
+    <div className={styles.mascotFloating}>
+      <svg className={styles.mascotImg} viewBox="0 0 318 225" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M223.42 0C275.175 0 317.132 41.8155 317.132 93.3975C317.132 93.4476 317.131 93.4977 317.131 93.5479V179.104C316.852 186.528 317.902 197.168 310.961 207.93C304.019 218.692 291.293 222.535 279.723 206.008C277.366 202.641 271.45 200.284 267.768 206.008C258.127 220.998 240.388 221.766 229.59 206.008C226.864 202.031 219.692 201.636 216.863 206.008C207.413 220.613 190.254 221.766 178.684 206.008C175.985 201.012 169.732 200.628 166.344 206.008C158.118 219.076 145.519 220.614 136.649 209.083C132.065 202.396 130.395 197.783 129.708 187.276V93.3936H129.709C129.711 41.8134 171.666 9.71069e-05 223.42 0Z"
+          fill="#8455DF"
+        />
+        <path
+          d="M223.813 28.9412C261.903 28.9412 292.729 57.9991 292.729 93.781C292.729 129.563 261.903 158.621 223.813 158.621C185.723 158.621 154.897 129.563 154.897 93.781C154.897 57.9991 185.723 28.9412 223.813 28.9412Z"
+          fill="white"
+          stroke="#8455DF"
+        />
+        <rect x="188.056" y="95.0508" width="16.7396" height="30.5168" rx="8.3698" fill="#8455DF" stroke="#8455DF" />
+        <rect x="238.188" y="95.0508" width="16.7396" height="30.5168" rx="8.3698" fill="#8455DF" stroke="#8455DF" />
+        <path
+          d="M10.5085 127.034C12.4797 119.917 20.1856 114.827 24.049 111.845C36.6964 102.603 64.7902 82.015 72.2542 76.5606C79.7183 71.1061 84.3583 74.3151 85.8508 76.5606C86.9066 77.7862 90.494 82.8818 98.4228 94.1442L99.2493 95.3182C109.884 110.424 97.1264 112.066 85.8508 114.394C79.5814 115.689 80.3527 121.838 83.8235 127.219L114.457 172.128C116.959 176.179 120.7 186.762 109.662 194.097C99.2495 201.015 89.3928 193.328 85.1405 186.88C79.6263 178.518 67.1428 159.426 61.3218 149.953C54.201 138.366 52.6641 136.564 44.1022 141.44C33.304 147.59 35.6751 160.593 29.1858 161.522C22.6965 162.451 20.3332 159.889 14.3422 150.446C8.3513 141.002 8.61658 133.866 10.5085 127.034Z"
+          fill="#8455DF"
+          stroke="#8455DF"
+        />
+      </svg>
+    </div>
+    <div className={styles.mascotShadow} />
+  </div>
+);
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_components/ProgressBar.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/_components/ProgressBar.tsx
new file mode 100644
index 0000000..3ae06b6
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_components/ProgressBar.tsx
@@ -0,0 +1,26 @@
+import { type ProgressStep, useProgressSteps } from '../_hooks/useProgressSteps';
+import * as styles from '../LoadingScreen.css';
+
+interface Props {
+  steps: ProgressStep[];
+}
+
+export const ProgressBar = ({ steps }: Props) => {
+  const { value, duration, easing } = useProgressSteps(steps);
+
+  return (
+    <div
+      className={styles.progressWrap}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="분석 진행률"
+    >
+      <div
+        className={styles.progressFill}
+        style={{ width: `${value}%`, transition: `width ${duration}ms ${easing}` }}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_components/RotatingMessage.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/_components/RotatingMessage.tsx
new file mode 100644
index 0000000..de940dd
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_components/RotatingMessage.tsx
@@ -0,0 +1,28 @@
+import { useDelayedFlag } from '../_hooks/useDelayedFlag';
+import { useRotatingIndex } from '../_hooks/useRotatingIndex';
+import * as styles from '../LoadingScreen.css';
+
+interface Props {
+  messages: string[];
+  warningMessage: string;
+  warningDelayMs: number;
+}
+
+export const RotatingMessage = ({ messages, warningMessage, warningDelayMs }: Props) => {
+  const { index, exiting } = useRotatingIndex({ count: messages.length, interval: 4000, exitDuration: 270 });
+  const showWarning = useDelayedFlag(warningDelayMs);
+
+  return (
+    <div className={styles.msgWrap} aria-live="polite" aria-atomic="true">
+      {showWarning ? (
+        <span key="warning" className={styles.msg}>
+          {warningMessage}
+        </span>
+      ) : (
+        <span key={index} className={`${styles.msg}${exiting ? ` ${styles.msgExiting}` : ''}`}>
+          {messages[index]}
+        </span>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_components/TipCard.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/_components/TipCard.tsx
new file mode 100644
index 0000000..f9ea092
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_components/TipCard.tsx
@@ -0,0 +1,25 @@
+import { useRotatingIndex } from '../_hooks/useRotatingIndex';
+import * as styles from '../LoadingScreen.css';
+
+interface Props {
+  tips: string[];
+}
+
+export const TipCard = ({ tips }: Props) => {
+  const { index, exiting } = useRotatingIndex({ count: tips.length, interval: 8000, exitDuration: 330 });
+
+  return (
+    <div key={index} className={`${styles.tipCard}${exiting ? ` ${styles.tipCardExiting}` : ''}`}>
+      <div className={styles.tipHeader}>
+        <span className={styles.tipLabel}>💡 알아두면 좋아요</span>
+        <span className={styles.tipCounter}>
+          {index + 1} / {tips.length}
+        </span>
+      </div>
+      <p className={styles.tipText}>{tips[index]}</p>
+      <div className={styles.tipProgressTrack}>
+        <div className={styles.tipProgressFill} style={{ width: `${((index + 1) / tips.length) * 100}%` }} />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_components/WorkingDots.tsx b/apps/web/src/app/(main)/_components/LoadingScreen/_components/WorkingDots.tsx
new file mode 100644
index 0000000..d0d1232
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_components/WorkingDots.tsx
@@ -0,0 +1,11 @@
+import * as styles from '../LoadingScreen.css';
+
+const DOT_DELAYS = ['0ms', '160ms', '320ms'];
+
+export const WorkingDots = () => (
+  <div className={styles.workingDots} aria-hidden="true">
+    {DOT_DELAYS.map((delay, i) => (
+      <span key={i} className={styles.workingDot} style={{ animationDelay: delay }} />
+    ))}
+  </div>
+);
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useDelayedFlag.ts b/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useDelayedFlag.ts
new file mode 100644
index 0000000..f62d2b7
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useDelayedFlag.ts
@@ -0,0 +1,21 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * delayMs 이후 true가 되는 플래그를 반환합니다.
+ * 컴포넌트가 언마운트되면 타이머를 정리합니다.
+ *
+ * @example
+ * const showWarning = useDelayedFlag(30_000); // 30초 후 true
+ */
+export const useDelayedFlag = (delayMs: number): boolean => {
+  const [flag, setFlag] = useState(false);
+
+  useEffect(() => {
+    const t = setTimeout(() => setFlag(true), delayMs);
+    return () => clearTimeout(t);
+  }, [delayMs]);
+
+  return flag;
+};
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useProgressSteps.ts b/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useProgressSteps.ts
new file mode 100644
index 0000000..20b4522
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useProgressSteps.ts
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export interface ProgressStep {
+  delay: number;
+  value: number;
+  duration: number;
+  easing: string;
+}
+
+interface ProgressState {
+  value: number;
+  duration: number;
+  easing: string;
+}
+
+const INITIAL: ProgressState = { value: 0, duration: 0, easing: 'linear' };
+
+/**
+ * progressSteps 배열을 받아 각 step의 delay 후 progress 상태를 순차적으로 적용합니다.
+ * 컴포넌트가 언마운트되면 모든 타이머를 정리합니다.
+ */
+export const useProgressSteps = (steps: ProgressStep[]): ProgressState => {
+  const [progress, setProgress] = useState<ProgressState>(INITIAL);
+
+  useEffect(() => {
+    const timers = steps.map(({ delay, value, duration, easing }) =>
+      setTimeout(() => setProgress({ value, duration, easing }), delay)
+    );
+    return () => timers.forEach(clearTimeout);
+  }, [steps]);
+
+  return progress;
+};
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useRotatingIndex.ts b/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useRotatingIndex.ts
new file mode 100644
index 0000000..aae909a
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/_hooks/useRotatingIndex.ts
@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+interface Options {
+  /** 항목 개수 */
+  count: number;
+  /** 다음 항목으로 넘어가는 간격 (ms) */
+  interval: number;
+  /** exit 애니메이션 지속 시간 (ms) — 이 시간 후 인덱스가 바뀜 */
+  exitDuration: number;
+}
+
+interface RotatingIndex {
+  index: number;
+  exiting: boolean;
+}
+
+/**
+ * N개 항목을 일정 간격으로 순환하며, 전환 직전에 exiting 플래그를 노출합니다.
+ *
+ * @example
+ * const { index, exiting } = useRotatingIndex({ count: messages.length, interval: 4000, exitDuration: 270 });
+ */
+export const useRotatingIndex = ({ count, interval, exitDuration }: Options): RotatingIndex => {
+  const [index, setIndex] = useState(0);
+  const [exiting, setExiting] = useState(false);
+  const tidRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (tidRef.current !== null) {
+        clearTimeout(tidRef.current);
+      }
+      setExiting(true);
+      const tid = setTimeout(() => {
+        setIndex((i) => (i + 1) % count);
+        setExiting(false);
+        tidRef.current = null;
+      }, exitDuration);
+      tidRef.current = tid;
+    }, interval);
+
+    return () => {
+      clearInterval(id);
+      if (tidRef.current !== null) {
+        clearTimeout(tidRef.current);
+        tidRef.current = null;
+      }
+    };
+  }, [count, interval, exitDuration]);
+
+  return { index, exiting };
+};
diff --git a/apps/web/src/app/(main)/_components/LoadingScreen/index.ts b/apps/web/src/app/(main)/_components/LoadingScreen/index.ts
new file mode 100644
index 0000000..72fc0af
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/LoadingScreen/index.ts
@@ -0,0 +1 @@
+export { LoadingScreen } from './LoadingScreen';
diff --git a/apps/web/src/app/(main)/_components/UserProvider/UserProvider.tsx b/apps/web/src/app/(main)/_components/UserProvider/UserProvider.tsx
new file mode 100644
index 0000000..2f1aea3
--- /dev/null
+++ b/apps/web/src/app/(main)/_components/UserProvider/UserProvider.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import { type AuthUser } from '@/types/auth';
+
+const UserContext = createContext<AuthUser | null>(null);
+
+interface Props {
+  user: AuthUser;
+  children: ReactNode;
+}
+
+export const UserProvider = ({ user, children }: Props) => (
+  <UserContext.Provider value={user}>{children}</UserContext.Provider>
+);
+
+export const useUser = (): AuthUser => {
+  const user = useContext(UserContext);
+  if (!user) {
+    throw new Error('useUser는 UserProvider 안에서만 사용할 수 있습니다.');
+  }
+  return user;
+};
diff --git a/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.css.ts b/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.css.ts
deleted file mode 100644
index 4ef39a7..0000000
--- a/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.css.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { vars } from '@muneo/design-system';
-import { keyframes, style } from '@vanilla-extract/css';
-
-const float = keyframes({
-  '0%, 100%': { transform: 'translateY(0px)' },
-  '50%': { transform: 'translateY(-10px)' },
-});
-
-const msgIn = keyframes({
-  from: { opacity: 0, transform: 'translateY(8px)' },
-  to: { opacity: 1, transform: 'translateY(0)' },
-});
-
-const msgOut = keyframes({
-  from: { opacity: 1, transform: 'translateY(0)' },
-  to: { opacity: 0, transform: 'translateY(-6px)' },
-});
-
-const cardIn = keyframes({
-  from: { opacity: 0, transform: 'translateX(20px)' },
-  to: { opacity: 1, transform: 'translateX(0)' },
-});
-
-const cardOut = keyframes({
-  from: { opacity: 1, transform: 'translateX(0)' },
-  to: { opacity: 0, transform: 'translateX(-20px)' },
-});
-
-const MOTION = '(prefers-reduced-motion: reduce)' as const;
-
-export const container = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: '60vh',
-  padding: '40px 24px',
-});
-
-export const mascotWrap = style({
-  animation: `${float} 2.4s ease-in-out infinite`,
-  marginBottom: '24px',
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const mascotImg = style({
-  width: '108px',
-  height: 'auto',
-  display: 'block',
-});
-
-export const msgWrap = style({
-  height: '24px',
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: '16px',
-});
-
-export const msg = style({
-  fontSize: vars.typography.fontSize.sm,
-  color: vars.color.neutral.n600,
-  textAlign: 'center',
-  fontWeight: vars.typography.fontWeight.medium,
-  animation: `${msgIn} 0.35s ease-out both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const msgExiting = style({
-  animation: `${msgOut} 0.25s ease-in both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const progressWrap = style({
-  width: '280px',
-  height: '4px',
-  borderRadius: '2px',
-  backgroundColor: vars.color.neutral.n200,
-  overflow: 'hidden',
-  marginBottom: '32px',
-});
-
-export const progressFill = style({
-  height: '100%',
-  borderRadius: '2px',
-  background: 'linear-gradient(90deg, #453EEF 0%, #9B86FF 100%)',
-  width: '0%',
-  willChange: 'width',
-});
-
-export const tipCard = style({
-  width: '280px',
-  minHeight: '60px',
-  backgroundColor: vars.color.neutral.n100,
-  borderRadius: '12px',
-  padding: '14px 16px',
-  display: 'flex',
-  alignItems: 'flex-start',
-  gap: '10px',
-  marginBottom: '10px',
-  animation: `${cardIn} 0.4s ease-out both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const tipCardExiting = style({
-  animation: `${cardOut} 0.3s ease-in both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const tipIcon = style({
-  fontSize: '16px',
-  flexShrink: 0,
-  lineHeight: '22px',
-});
-
-export const tipText = style({
-  fontSize: vars.typography.fontSize.xs,
-  color: vars.color.neutral.n600,
-  lineHeight: vars.typography.lineHeight.lg,
-});
-
-export const dots = style({
-  display: 'flex',
-  gap: '5px',
-  marginBottom: '28px',
-});
-
-export const dot = style({
-  width: '5px',
-  height: '5px',
-  borderRadius: '50%',
-  backgroundColor: vars.color.neutral.n300,
-  transition: 'background-color 0.3s ease',
-});
-
-export const dotActive = style({
-  backgroundColor: vars.color.brand.primary,
-});
-
-export const footer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '10px',
-});
-
-export const footerText = style({
-  fontSize: vars.typography.fontSize.xs,
-  color: vars.color.neutral.n400,
-});
-
-export const cancelBtn = style({
-  background: 'none',
-  border: `1px solid ${vars.color.neutral.n300}`,
-  borderRadius: vars.radius.sm,
-  padding: '8px 20px',
-  fontSize: vars.typography.fontSize.sm,
-  color: vars.color.neutral.n500,
-  cursor: 'pointer',
-  fontFamily: vars.typography.fontFamily,
-  transition: 'opacity 0.15s ease',
-  selectors: {
-    '&:hover': { opacity: 0.65 },
-  },
-});
diff --git a/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.tsx b/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.tsx
index fd1f485..7080c73 100644
--- a/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.tsx
+++ b/apps/web/src/app/(main)/analysis/_components/AnalysisLoadingScreen/AnalysisLoadingScreen.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
-import * as styles from './AnalysisLoadingScreen.css';
+import { useMemo } from 'react';
+import { LoadingScreen } from '@/app/(main)/_components/LoadingScreen';
 
 const TIPS = [
   '견적서에 단가와 수량이 명시될수록 정확한 진단이 가능해요',
@@ -13,7 +13,12 @@ const TIPS = [
   '로스율이 명시된 자재 항목이 더 투명한 견적이에요',
 ];
 
-const WARNING_MSG = '분석에 시간이 걸리고 있어요. 조금만 더 기다려 주세요.';
+const PROGRESS_STEPS = [
+  { delay: 100, value: 15, duration: 3000, easing: 'ease-out' },
+  { delay: 5000, value: 40, duration: 20000, easing: 'linear' },
+  { delay: 25000, value: 65, duration: 30000, easing: 'linear' },
+  { delay: 55000, value: 82, duration: 40000, easing: 'linear' },
+];
 
 interface Props {
   companyName: string | null;
@@ -33,113 +38,15 @@ export const AnalysisLoadingScreen = ({ companyName, fileCount, onCancel }: Prop
     [companyName, fileCount]
   );
 
-  const [msgIdx, setMsgIdx] = useState(0);
-  const [msgExiting, setMsgExiting] = useState(false);
-  const [progress, setProgress] = useState<{ value: number; duration: number; easing: string }>({
-    value: 0,
-    duration: 0,
-    easing: 'linear',
-  });
-  const [tipIdx, setTipIdx] = useState(0);
-  const [tipExiting, setTipExiting] = useState(false);
-  const [showWarning, setShowWarning] = useState(false);
-
-  useEffect(() => {
-    const t1 = setTimeout(() => setProgress({ value: 15, duration: 3000, easing: 'ease-out' }), 100);
-    const t2 = setTimeout(() => setProgress({ value: 40, duration: 20000, easing: 'linear' }), 5000);
-    const t3 = setTimeout(() => setProgress({ value: 65, duration: 30000, easing: 'linear' }), 25000);
-    const t4 = setTimeout(() => setProgress({ value: 82, duration: 40000, easing: 'linear' }), 55000);
-    return () => [t1, t2, t3, t4].forEach(clearTimeout);
-  }, []);
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setMsgExiting(true);
-      const tid = setTimeout(() => {
-        setMsgIdx((i) => (i + 1) % messages.length);
-        setMsgExiting(false);
-      }, 270);
-      return () => clearTimeout(tid);
-    }, 4000);
-    return () => clearInterval(id);
-  }, [messages.length]);
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setTipExiting(true);
-      const tid = setTimeout(() => {
-        setTipIdx((i) => (i + 1) % TIPS.length);
-        setTipExiting(false);
-      }, 330);
-      return () => clearTimeout(tid);
-    }, 8000);
-    return () => clearInterval(id);
-  }, []);
-
-  useEffect(() => {
-    const t = setTimeout(() => setShowWarning(true), 90000);
-    return () => clearTimeout(t);
-  }, []);
-
   return (
-    <div className={styles.container}>
-      <div className={styles.mascotWrap}>
-        <svg className={styles.mascotImg} viewBox="0 0 318 225" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M223.42 0C275.175 0 317.132 41.8155 317.132 93.3975C317.132 93.4476 317.131 93.4977 317.131 93.5479V179.104C316.852 186.528 317.902 197.168 310.961 207.93C304.019 218.692 291.293 222.535 279.723 206.008C277.366 202.641 271.45 200.284 267.768 206.008C258.127 220.998 240.388 221.766 229.59 206.008C226.864 202.031 219.692 201.636 216.863 206.008C207.413 220.613 190.254 221.766 178.684 206.008C175.985 201.012 169.732 200.628 166.344 206.008C158.118 219.076 145.519 220.614 136.649 209.083C132.065 202.396 130.395 197.783 129.708 187.276V93.3936H129.709C129.711 41.8134 171.666 9.71069e-05 223.42 0Z"
-            fill="#8455DF"
-          />
-          <path
-            d="M223.813 28.9412C261.903 28.9412 292.729 57.9991 292.729 93.781C292.729 129.563 261.903 158.621 223.813 158.621C185.723 158.621 154.897 129.563 154.897 93.781C154.897 57.9991 185.723 28.9412 223.813 28.9412Z"
-            fill="white"
-            stroke="#8455DF"
-          />
-          <rect x="188.056" y="95.0508" width="16.7396" height="30.5168" rx="8.3698" fill="#8455DF" stroke="#8455DF" />
-          <rect x="238.188" y="95.0508" width="16.7396" height="30.5168" rx="8.3698" fill="#8455DF" stroke="#8455DF" />
-          <path
-            d="M10.5085 127.034C12.4797 119.917 20.1856 114.827 24.049 111.845C36.6964 102.603 64.7902 82.015 72.2542 76.5606C79.7183 71.1061 84.3583 74.3151 85.8508 76.5606C86.9066 77.7862 90.494 82.8818 98.4228 94.1442L99.2493 95.3182C109.884 110.424 97.1264 112.066 85.8508 114.394C79.5814 115.689 80.3527 121.838 83.8235 127.219L114.457 172.128C116.959 176.179 120.7 186.762 109.662 194.097C99.2495 201.015 89.3928 193.328 85.1405 186.88C79.6263 178.518 67.1428 159.426 61.3218 149.953C54.201 138.366 52.6641 136.564 44.1022 141.44C33.304 147.59 35.6751 160.593 29.1858 161.522C22.6965 162.451 20.3332 159.889 14.3422 150.446C8.3513 141.002 8.61658 133.866 10.5085 127.034Z"
-            fill="#8455DF"
-            stroke="#8455DF"
-          />
-        </svg>
-      </div>
-
-      <div className={styles.msgWrap}>
-        {showWarning ? (
-          <span key="warning" className={styles.msg}>
-            {WARNING_MSG}
-          </span>
-        ) : (
-          <span key={msgIdx} className={`${styles.msg}${msgExiting ? ` ${styles.msgExiting}` : ''}`}>
-            {messages[msgIdx]}
-          </span>
-        )}
-      </div>
-
-      <div className={styles.progressWrap}>
-        <div
-          className={styles.progressFill}
-          style={{ width: `${progress.value}%`, transition: `width ${progress.duration}ms ${progress.easing}` }}
-        />
-      </div>
-
-      <div key={tipIdx} className={`${styles.tipCard}${tipExiting ? ` ${styles.tipCardExiting}` : ''}`}>
-        <span className={styles.tipIcon}>💡</span>
-        <span className={styles.tipText}>{TIPS[tipIdx]}</span>
-      </div>
-
-      <div className={styles.dots}>
-        {TIPS.map((_, i) => (
-          <span key={i} className={`${styles.dot}${i === tipIdx ? ` ${styles.dotActive}` : ''}`} />
-        ))}
-      </div>
-
-      <div className={styles.footer}>
-        <span className={styles.footerText}>보통 1~2분 정도 소요돼요</span>
-        <button type="button" className={styles.cancelBtn} onClick={onCancel}>
-          취소
-        </button>
-      </div>
-    </div>
+    <LoadingScreen
+      messages={messages}
+      tips={TIPS}
+      warningMessage="분석에 시간이 걸리고 있어요. 조금만 더 기다려 주세요."
+      warningDelayMs={90000}
+      progressSteps={PROGRESS_STEPS}
+      footerText="보통 1~2분 정도 소요돼요"
+      onCancel={onCancel}
+    />
   );
 };
diff --git a/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.css.ts b/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.css.ts
index 4d234de..2945e06 100644
--- a/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.css.ts
+++ b/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.css.ts
@@ -69,60 +69,63 @@ export const sections = style({
   gap: '20px',
 });
 
-export const summaryBox = style({
-  backgroundColor: vars.color.white,
-  border: `1px solid ${vars.color.neutral.n200}`,
-  borderRadius: '12px',
-  padding: '20px',
+/* ── 인사이트 카드 ── */
+export const insightBox = style({
+  background: 'linear-gradient(135deg, #F5F0FF 0%, #EEF2FF 100%)',
+  border: '1px solid #E3D8FF',
+  borderRadius: '16px',
+  padding: '24px 28px',
   display: 'flex',
   flexDirection: 'column',
-  gap: '20px',
+  gap: '16px',
 });
 
-export const summaryTitle = style({
-  fontFamily: vars.typography.fontFamily,
-  fontSize: '20px',
-  fontWeight: vars.typography.fontWeight.bold,
-  color: vars.color.neutral.n900,
-  lineHeight: 'normal',
+export const insightHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
 });
 
-export const summaryBody = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '10px',
+export const insightIcon = style({
+  fontSize: '18px',
+  lineHeight: 1,
 });
 
-export const summarySubtitle = style({
+export const insightTitle = style({
   fontFamily: vars.typography.fontFamily,
   fontSize: vars.typography.fontSize.md,
-  fontWeight: vars.typography.fontWeight.bold,
-  color: vars.color.neutral.n500,
+  fontWeight: vars.typography.fontWeight.semiBold,
+  color: '#6D3FD4',
   lineHeight: 'normal',
 });
 
-export const summaryBadges = style({
+export const insightList = style({
   display: 'flex',
-  gap: '59px',
-  alignItems: 'center',
+  flexDirection: 'column',
+  gap: '12px',
+  paddingLeft: '2px',
 });
 
-export const summaryBadge = style({
-  borderRadius: '8px',
-  padding: '8px 16px',
+export const insightItem = style({
   display: 'flex',
-  alignItems: 'center',
-  gap: '4px',
-  fontFamily: vars.typography.fontFamily,
-  fontSize: vars.typography.fontSize.md,
-  fontWeight: vars.typography.fontWeight.bold,
-  lineHeight: 'normal',
-  whiteSpace: 'nowrap',
+  alignItems: 'flex-start',
+  gap: '10px',
+});
+
+export const insightBullet = style({
+  flexShrink: 0,
+  width: '6px',
+  height: '6px',
+  borderRadius: '50%',
+  backgroundColor: '#8455DF',
+  marginTop: '8px',
 });
 
-export const badgeDanger = style({ backgroundColor: vars.color.semantic.dangerBg, color: vars.color.semantic.danger });
-export const badgeWarning = style({
-  backgroundColor: vars.color.semantic.warningBg,
-  color: vars.color.semantic.warning,
+export const insightText = style({
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize.base,
+  fontWeight: vars.typography.fontWeight.regular,
+  color: vars.color.neutral.n700,
+  lineHeight: '1.7',
+  wordBreak: 'keep-all',
 });
-export const badgeInfo = style({ backgroundColor: vars.color.semantic.infoBg, color: vars.color.semantic.info });
diff --git a/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.tsx b/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.tsx
index aef0846..a1d6ad7 100644
--- a/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.tsx
+++ b/apps/web/src/app/(main)/analysis/_components/DiagnosisReport/DiagnosisReport.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { CircleWarningIcon, StatusCard, TriangleWarningIcon } from '@muneo/design-system';
+import { buildInsights } from '../../_lib/buildInsights';
 import { useAnalysisStore } from '../../_store/analysisStore';
 import { ProcessSection } from '../ProcessSection/ProcessSection';
 import * as styles from './DiagnosisReport.css';
@@ -21,9 +22,6 @@ export const DiagnosisReport = () => {
             {result.vendorLabel} · {result.areaLabel} · 분석일 {result.analyzedAt}
           </span>
         </div>
-        <button type="button" className={styles.pdfButton} onClick={() => window.print()}>
-          PDF ↓
-        </button>
       </div>
 
       <div className={styles.summaryCards}>
@@ -56,16 +54,19 @@ export const DiagnosisReport = () => {
         ))}
       </div>
 
-      <div className={styles.summaryBox}>
-        <span className={styles.summaryTitle}>진단 요약</span>
-        <div className={styles.summaryBody}>
-          <span className={styles.summarySubtitle}>전체 리스크 의심 항목</span>
-          <div className={styles.summaryBadges}>
-            <span className={`${styles.summaryBadge} ${styles.badgeDanger}`}>누락 {result.missingCount}</span>
-            <span className={`${styles.summaryBadge} ${styles.badgeWarning}`}>불분명 {result.riskCount}</span>
-            <span className={`${styles.summaryBadge} ${styles.badgeInfo}`}>중복 {result.insufficientCount}</span>
-          </div>
+      <div className={styles.insightBox}>
+        <div className={styles.insightHeader}>
+          <span className={styles.insightIcon}>💡</span>
+          <span className={styles.insightTitle}>종합 인사이트</span>
         </div>
+        <ul className={styles.insightList}>
+          {buildInsights(result).map((sentence, i) => (
+            <li key={i} className={styles.insightItem}>
+              <span className={styles.insightBullet} aria-hidden="true" />
+              <p className={styles.insightText}>{sentence}</p>
+            </li>
+          ))}
+        </ul>
       </div>
     </div>
   );
diff --git a/apps/web/src/app/(main)/analysis/_components/UploadPanel/UploadPanel.tsx b/apps/web/src/app/(main)/analysis/_components/UploadPanel/UploadPanel.tsx
index be7fa21..d3aba59 100644
--- a/apps/web/src/app/(main)/analysis/_components/UploadPanel/UploadPanel.tsx
+++ b/apps/web/src/app/(main)/analysis/_components/UploadPanel/UploadPanel.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from '@muneo/design-system';
 import { useRef, useState } from 'react';
-import { useAuthStore } from '@/store/authStore';
+import { useUser } from '@/app/(main)/_components/UserProvider/UserProvider';
 import { useAnalysisStore } from '../../_store/analysisStore';
 import * as styles from './UploadPanel.css';
 
@@ -10,7 +10,7 @@ const ACCEPT = '.pdf,.jpg,.jpeg,.png,.csv,.xls,.xlsx';
 
 export const UploadPanel = () => {
   const { files, loading, addFile, removeFile, submitAnalysis, reset } = useAnalysisStore();
-  const { user } = useAuthStore();
+  const user = useUser();
   const inputRef = useRef<HTMLInputElement>(null);
   const [dragging, setDragging] = useState(false);
 
diff --git a/apps/web/src/app/(main)/analysis/_lib/buildInsights.ts b/apps/web/src/app/(main)/analysis/_lib/buildInsights.ts
new file mode 100644
index 0000000..3fffa7a
--- /dev/null
+++ b/apps/web/src/app/(main)/analysis/_lib/buildInsights.ts
@@ -0,0 +1,42 @@
+interface Counts {
+  missingCount: number;
+  riskCount: number;
+  insufficientCount: number;
+}
+
+/**
+ * 누락·불분명·중복 카운트를 바탕으로 사용자에게 전달할 액션 인사이트 3문장을 반환합니다.
+ */
+export const buildInsights = ({ missingCount, riskCount, insufficientCount }: Counts): [string, string, string] => {
+  const total = missingCount + riskCount + insufficientCount;
+
+  if (total === 0) {
+    return [
+      '검토 결과 리스크 항목이 발견되지 않았습니다.',
+      '견적서 전체를 한 번 더 살펴보고, 공사 범위와 자재 기준이 계약서에 명확히 기재되었는지 확인하세요.',
+      '문제가 없더라도 계약 전 업체에 공정별 일정과 하자 보증 조건을 서면으로 확인받는 것을 권장합니다.',
+    ];
+  }
+
+  // 1. 전체 상황 요약
+  const overview =
+    total <= 3
+      ? `총 ${total}건(누락 ${missingCount} · 불분명 ${riskCount} · 중복 ${insufficientCount})의 확인이 필요한 항목이 발견되었습니다. 계약 전 업체에 해당 항목을 반드시 문의하세요.`
+      : `총 ${total}건(누락 ${missingCount} · 불분명 ${riskCount} · 중복 ${insufficientCount})의 리스크 항목이 발견되어 주의가 필요합니다. 업체와 항목별로 충분히 협의한 뒤 계약을 진행하세요.`;
+
+  // 2. 우선순위가 가장 높은 유형별 구체적 액션 (누락 > 불분명 > 중복)
+  let primaryAction: string;
+  if (missingCount > 0) {
+    primaryAction = `누락된 ${missingCount}개 항목은 공사 중 예상치 못한 추가 비용으로 이어질 수 있으므로, 포함 여부와 예상 금액을 업체에 서면으로 확인받으세요.`;
+  } else if (riskCount > 0) {
+    primaryAction = `불분명하게 기재된 ${riskCount}개 항목은 단가·수량·자재 규격을 구체적으로 명시해 달라고 요청해 추후 분쟁 소지를 없애세요.`;
+  } else {
+    primaryAction = `중복 청구가 의심되는 ${insufficientCount}개 항목은 업체에 실제 중복 여부를 확인하고, 해당 금액 차감을 협의하세요.`;
+  }
+
+  // 3. 계약 시 공통 조언
+  const contractAdvice =
+    '업체의 답변은 반드시 문자·이메일 등 서면으로 받아 계약서에 반영하세요. 구두 확인만으로는 분쟁 발생 시 보호받기 어렵습니다.';
+
+  return [overview, primaryAction, contractAdvice];
+};
diff --git a/apps/web/src/app/(main)/analysis/_lib/mapApiReport.ts b/apps/web/src/app/(main)/analysis/_lib/mapApiReport.ts
new file mode 100644
index 0000000..110f7eb
--- /dev/null
+++ b/apps/web/src/app/(main)/analysis/_lib/mapApiReport.ts
@@ -0,0 +1,33 @@
+import { type ApiProcessItem, type DiagnosisStatus, type RiskReport } from '@/api/analyze';
+import { type DiagnosisResult } from '../_types/analysis.types';
+
+const inferItemStatus = (item: ApiProcessItem): DiagnosisStatus =>
+  item.status === '불분명' && (item.title.includes('누락') || item.title.trim() === '') ? '누락' : item.status;
+
+export const mapApiReportToDiagnosisResult = (report: RiskReport, fallbackDate?: string): DiagnosisResult => {
+  const sections = report.process_sections.map((s, si) => ({
+    id: String(si),
+    name: s.display_name,
+    items: s.items.map((item, ii) => ({
+      id: `${si}_${ii}`,
+      status: inferItemStatus(item),
+      title: item.title,
+      description: item.description,
+      actionNote: item.guide,
+    })),
+  }));
+
+  const allItems = sections.flatMap((s) => s.items);
+
+  return {
+    vendorLabel: report.subtitle_fields.company_name,
+    areaLabel: `${report.subtitle_fields.pyeong}평 ${report.construction_info.space_type}`,
+    analyzedAt: (report.subtitle_fields.analyzed_date ?? fallbackDate ?? new Date().toISOString())
+      .slice(0, 10)
+      .replace(/-/g, '.'),
+    missingCount: allItems.filter((i) => i.status === '누락').length,
+    riskCount: allItems.filter((i) => i.status === '불분명').length,
+    insufficientCount: allItems.filter((i) => i.status === '중복').length,
+    sections,
+  };
+};
diff --git a/apps/web/src/app/(main)/analysis/_store/analysisStore.test.ts b/apps/web/src/app/(main)/analysis/_store/analysisStore.test.ts
index f06675d..f77d11c 100644
--- a/apps/web/src/app/(main)/analysis/_store/analysisStore.test.ts
+++ b/apps/web/src/app/(main)/analysis/_store/analysisStore.test.ts
@@ -32,7 +32,12 @@ const MOCK_REPORT = {
     {
       process: '철거',
       display_name: '철거 공사',
-      items: [{ title: '일반 철거', description: '180만원', guide: '', status: '정상' as const }],
+      items: [
+        { title: '일반 철거', description: '180만원', guide: '', status: '정상' as const },
+        { title: '철거 폐기물 처리비', description: '누락된 항목', guide: '', status: '누락' as const },
+        { title: '기타 비용', description: '불분명 항목', guide: '', status: '불분명' as const },
+        { title: '인건비', description: '중복 항목', guide: '', status: '중복' as const },
+      ],
     },
   ],
   summary: { total_risk_items: 3, chips: { 누락: 1, 중복: 1, 불분명: 1 } },
diff --git a/apps/web/src/app/(main)/analysis/_store/analysisStore.ts b/apps/web/src/app/(main)/analysis/_store/analysisStore.ts
index d7c9798..ea4fc9e 100644
--- a/apps/web/src/app/(main)/analysis/_store/analysisStore.ts
+++ b/apps/web/src/app/(main)/analysis/_store/analysisStore.ts
@@ -1,5 +1,6 @@
 import { create } from 'zustand';
-import { analyzeRisk, type RiskAnalyzeRequestBody, type RiskReport, saveRisk } from '@/api/analyze';
+import { analyzeRisk, type RiskAnalyzeRequestBody, saveRisk } from '@/api/analyze';
+import { mapApiReportToDiagnosisResult } from '../_lib/mapApiReport';
 import { type AnalysisFormData, type DiagnosisResult, type UploadedFile } from '../_types/analysis.types';
 
 const DEFAULT_FORM: AnalysisFormData = {
@@ -20,26 +21,6 @@ const formatSize = (bytes: number): string => {
   return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
 };
 
-const mapApiReportToDiagnosisResult = (report: RiskReport): DiagnosisResult => ({
-  vendorLabel: report.subtitle_fields.company_name,
-  areaLabel: `${report.subtitle_fields.pyeong}평 ${report.construction_info.space_type}`,
-  analyzedAt: (report.subtitle_fields.analyzed_date ?? new Date().toISOString()).slice(0, 10).replace(/-/g, '.'),
-  missingCount: report.summary.chips.누락,
-  riskCount: report.summary.chips.불분명,
-  insufficientCount: report.summary.chips.중복,
-  sections: report.process_sections.map((s, si) => ({
-    id: String(si),
-    name: s.display_name,
-    items: s.items.map((item, ii) => ({
-      id: `${si}_${ii}`,
-      status: item.status,
-      title: item.title,
-      description: item.description,
-      actionNote: item.guide,
-    })),
-  })),
-});
-
 interface AnalysisStore {
   view: 'input' | 'report';
   loading: boolean;
@@ -116,7 +97,7 @@ export const useAnalysisStore = create<AnalysisStore>((set, get) => ({
       // 3. 분석 요청 — 이전 요청이 진행 중이면 먼저 중단
       _abortController?.abort();
       _abortController = new AbortController();
-      const { report } = await analyzeRisk(formData, _abortController.signal);
+      const { report } = await analyzeRisk(formData, userId, _abortController.signal);
 
       // 4. 결과 저장
       await saveRisk({ input: requestBody, result: { report } }, userId);
@@ -131,7 +112,9 @@ export const useAnalysisStore = create<AnalysisStore>((set, get) => ({
       if (process.env.NODE_ENV === 'development') {
         console.error('[견적서 진단] 오류:', err);
       }
-      set({ error: '분석 중 오류가 발생했습니다.', loading: false });
+      const apiDetail = (err as { body?: { detail?: string } }).body?.detail;
+      const errorMessage = apiDetail ?? '분석 중 오류가 발생했습니다.';
+      set({ error: errorMessage, loading: false });
     } finally {
       _abortController = null;
     }
diff --git a/apps/web/src/app/(main)/analysis/page.css.ts b/apps/web/src/app/(main)/analysis/page.css.ts
index d4857dd..5601c05 100644
--- a/apps/web/src/app/(main)/analysis/page.css.ts
+++ b/apps/web/src/app/(main)/analysis/page.css.ts
@@ -40,8 +40,10 @@ export const pageSubtitle = style({
 
 export const loadingState = style({
   display: 'flex',
+  flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
+  gap: '16px',
   minHeight: '400px',
 });
 
@@ -56,3 +58,18 @@ export const errorText = style({
   fontSize: vars.typography.fontSize.md,
   color: vars.color.semantic.danger,
 });
+
+export const retryButton = style({
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize.sm,
+  fontWeight: vars.typography.fontWeight.medium,
+  color: vars.color.neutral.n700,
+  backgroundColor: 'transparent',
+  border: `1px solid ${vars.color.neutral.n300}`,
+  borderRadius: '8px',
+  padding: '8px 20px',
+  cursor: 'pointer',
+  ':hover': {
+    backgroundColor: vars.color.neutral.n100,
+  },
+});
diff --git a/apps/web/src/app/(main)/analysis/page.tsx b/apps/web/src/app/(main)/analysis/page.tsx
index 696de4a..22c6a32 100644
--- a/apps/web/src/app/(main)/analysis/page.tsx
+++ b/apps/web/src/app/(main)/analysis/page.tsx
@@ -29,6 +29,7 @@ const AnalysisPage = () => {
   const form = useAnalysisStore((s) => s.form);
   const files = useAnalysisStore((s) => s.files);
   const cancelAnalysis = useAnalysisStore((s) => s.cancelAnalysis);
+  const reset = useAnalysisStore((s) => s.reset);
 
   if (loading) {
     return (
@@ -43,6 +44,9 @@ const AnalysisPage = () => {
       <div className={styles.page}>
         <div className={styles.loadingState}>
           <p className={styles.errorText}>{error}</p>
+          <button type="button" onClick={reset} className={styles.retryButton}>
+            다시 시도
+          </button>
         </div>
       </div>
     );
diff --git a/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.css.ts b/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.css.ts
deleted file mode 100644
index 4ef39a7..0000000
--- a/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.css.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { vars } from '@muneo/design-system';
-import { keyframes, style } from '@vanilla-extract/css';
-
-const float = keyframes({
-  '0%, 100%': { transform: 'translateY(0px)' },
-  '50%': { transform: 'translateY(-10px)' },
-});
-
-const msgIn = keyframes({
-  from: { opacity: 0, transform: 'translateY(8px)' },
-  to: { opacity: 1, transform: 'translateY(0)' },
-});
-
-const msgOut = keyframes({
-  from: { opacity: 1, transform: 'translateY(0)' },
-  to: { opacity: 0, transform: 'translateY(-6px)' },
-});
-
-const cardIn = keyframes({
-  from: { opacity: 0, transform: 'translateX(20px)' },
-  to: { opacity: 1, transform: 'translateX(0)' },
-});
-
-const cardOut = keyframes({
-  from: { opacity: 1, transform: 'translateX(0)' },
-  to: { opacity: 0, transform: 'translateX(-20px)' },
-});
-
-const MOTION = '(prefers-reduced-motion: reduce)' as const;
-
-export const container = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: '60vh',
-  padding: '40px 24px',
-});
-
-export const mascotWrap = style({
-  animation: `${float} 2.4s ease-in-out infinite`,
-  marginBottom: '24px',
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const mascotImg = style({
-  width: '108px',
-  height: 'auto',
-  display: 'block',
-});
-
-export const msgWrap = style({
-  height: '24px',
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: '16px',
-});
-
-export const msg = style({
-  fontSize: vars.typography.fontSize.sm,
-  color: vars.color.neutral.n600,
-  textAlign: 'center',
-  fontWeight: vars.typography.fontWeight.medium,
-  animation: `${msgIn} 0.35s ease-out both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const msgExiting = style({
-  animation: `${msgOut} 0.25s ease-in both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const progressWrap = style({
-  width: '280px',
-  height: '4px',
-  borderRadius: '2px',
-  backgroundColor: vars.color.neutral.n200,
-  overflow: 'hidden',
-  marginBottom: '32px',
-});
-
-export const progressFill = style({
-  height: '100%',
-  borderRadius: '2px',
-  background: 'linear-gradient(90deg, #453EEF 0%, #9B86FF 100%)',
-  width: '0%',
-  willChange: 'width',
-});
-
-export const tipCard = style({
-  width: '280px',
-  minHeight: '60px',
-  backgroundColor: vars.color.neutral.n100,
-  borderRadius: '12px',
-  padding: '14px 16px',
-  display: 'flex',
-  alignItems: 'flex-start',
-  gap: '10px',
-  marginBottom: '10px',
-  animation: `${cardIn} 0.4s ease-out both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const tipCardExiting = style({
-  animation: `${cardOut} 0.3s ease-in both`,
-  '@media': { [MOTION]: { animation: 'none' } },
-});
-
-export const tipIcon = style({
-  fontSize: '16px',
-  flexShrink: 0,
-  lineHeight: '22px',
-});
-
-export const tipText = style({
-  fontSize: vars.typography.fontSize.xs,
-  color: vars.color.neutral.n600,
-  lineHeight: vars.typography.lineHeight.lg,
-});
-
-export const dots = style({
-  display: 'flex',
-  gap: '5px',
-  marginBottom: '28px',
-});
-
-export const dot = style({
-  width: '5px',
-  height: '5px',
-  borderRadius: '50%',
-  backgroundColor: vars.color.neutral.n300,
-  transition: 'background-color 0.3s ease',
-});
-
-export const dotActive = style({
-  backgroundColor: vars.color.brand.primary,
-});
-
-export const footer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '10px',
-});
-
-export const footerText = style({
-  fontSize: vars.typography.fontSize.xs,
-  color: vars.color.neutral.n400,
-});
-
-export const cancelBtn = style({
-  background: 'none',
-  border: `1px solid ${vars.color.neutral.n300}`,
-  borderRadius: vars.radius.sm,
-  padding: '8px 20px',
-  fontSize: vars.typography.fontSize.sm,
-  color: vars.color.neutral.n500,
-  cursor: 'pointer',
-  fontFamily: vars.typography.fontFamily,
-  transition: 'opacity 0.15s ease',
-  selectors: {
-    '&:hover': { opacity: 0.65 },
-  },
-});
diff --git a/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.tsx b/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.tsx
index 8ccbe19..cbe8254 100644
--- a/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.tsx
+++ b/apps/web/src/app/(main)/estimate/_components/EstimateLoadingScreen/EstimateLoadingScreen.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
-import * as styles from './EstimateLoadingScreen.css';
+import { useMemo } from 'react';
+import { LoadingScreen } from '@/app/(main)/_components/LoadingScreen';
 
 const TIPS = [
   '가견적은 실제 시공비와 ±20% 오차가 있을 수 있어요',
@@ -13,7 +13,12 @@ const TIPS = [
   '트럭 접근이 어려울수록 하차 비용이 추가돼요',
 ];
 
-const WARNING_MSG = '시간이 예상보다 걸리고 있어요. 조금만 더 기다려 주세요.';
+const PROGRESS_STEPS = [
+  { delay: 100, value: 30, duration: 3000, easing: 'ease-out' },
+  { delay: 3200, value: 70, duration: 8000, easing: 'linear' },
+  { delay: 11200, value: 85, duration: 12000, easing: 'linear' },
+  { delay: 23200, value: 92, duration: 20000, easing: 'linear' },
+];
 
 interface Props {
   region: string | null;
@@ -33,113 +38,15 @@ export const EstimateLoadingScreen = ({ region, processCount, onCancel }: Props)
     [region, processCount]
   );
 
-  const [msgIdx, setMsgIdx] = useState(0);
-  const [msgExiting, setMsgExiting] = useState(false);
-  const [progress, setProgress] = useState<{ value: number; duration: number; easing: string }>({
-    value: 0,
-    duration: 0,
-    easing: 'linear',
-  });
-  const [tipIdx, setTipIdx] = useState(0);
-  const [tipExiting, setTipExiting] = useState(false);
-  const [showWarning, setShowWarning] = useState(false);
-
-  useEffect(() => {
-    const t1 = setTimeout(() => setProgress({ value: 30, duration: 3000, easing: 'ease-out' }), 100);
-    const t2 = setTimeout(() => setProgress({ value: 70, duration: 8000, easing: 'linear' }), 3200);
-    const t3 = setTimeout(() => setProgress({ value: 85, duration: 12000, easing: 'linear' }), 11200);
-    const t4 = setTimeout(() => setProgress({ value: 92, duration: 20000, easing: 'linear' }), 23200);
-    return () => [t1, t2, t3, t4].forEach(clearTimeout);
-  }, []);
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setMsgExiting(true);
-      const tid = setTimeout(() => {
-        setMsgIdx((i) => (i + 1) % messages.length);
-        setMsgExiting(false);
-      }, 270);
-      return () => clearTimeout(tid);
-    }, 4000);
-    return () => clearInterval(id);
-  }, [messages.length]);
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setTipExiting(true);
-      const tid = setTimeout(() => {
-        setTipIdx((i) => (i + 1) % TIPS.length);
-        setTipExiting(false);
-      }, 330);
-      return () => clearTimeout(tid);
-    }, 8000);
-    return () => clearInterval(id);
-  }, []);
-
-  useEffect(() => {
-    const t = setTimeout(() => setShowWarning(true), 30000);
-    return () => clearTimeout(t);
-  }, []);
-
   return (
-    <div className={styles.container}>
-      <div className={styles.mascotWrap}>
-        <svg className={styles.mascotImg} viewBox="0 0 318 225" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M223.42 0C275.175 0 317.132 41.8155 317.132 93.3975C317.132 93.4476 317.131 93.4977 317.131 93.5479V179.104C316.852 186.528 317.902 197.168 310.961 207.93C304.019 218.692 291.293 222.535 279.723 206.008C277.366 202.641 271.45 200.284 267.768 206.008C258.127 220.998 240.388 221.766 229.59 206.008C226.864 202.031 219.692 201.636 216.863 206.008C207.413 220.613 190.254 221.766 178.684 206.008C175.985 201.012 169.732 200.628 166.344 206.008C158.118 219.076 145.519 220.614 136.649 209.083C132.065 202.396 130.395 197.783 129.708 187.276V93.3936H129.709C129.711 41.8134 171.666 9.71069e-05 223.42 0Z"
-            fill="#8455DF"
-          />
-          <path
-            d="M223.813 28.9412C261.903 28.9412 292.729 57.9991 292.729 93.781C292.729 129.563 261.903 158.621 223.813 158.621C185.723 158.621 154.897 129.563 154.897 93.781C154.897 57.9991 185.723 28.9412 223.813 28.9412Z"
-            fill="white"
-            stroke="#8455DF"
-          />
-          <rect x="188.056" y="95.0508" width="16.7396" height="30.5168" rx="8.3698" fill="#8455DF" stroke="#8455DF" />
-          <rect x="238.188" y="95.0508" width="16.7396" height="30.5168" rx="8.3698" fill="#8455DF" stroke="#8455DF" />
-          <path
-            d="M10.5085 127.034C12.4797 119.917 20.1856 114.827 24.049 111.845C36.6964 102.603 64.7902 82.015 72.2542 76.5606C79.7183 71.1061 84.3583 74.3151 85.8508 76.5606C86.9066 77.7862 90.494 82.8818 98.4228 94.1442L99.2493 95.3182C109.884 110.424 97.1264 112.066 85.8508 114.394C79.5814 115.689 80.3527 121.838 83.8235 127.219L114.457 172.128C116.959 176.179 120.7 186.762 109.662 194.097C99.2495 201.015 89.3928 193.328 85.1405 186.88C79.6263 178.518 67.1428 159.426 61.3218 149.953C54.201 138.366 52.6641 136.564 44.1022 141.44C33.304 147.59 35.6751 160.593 29.1858 161.522C22.6965 162.451 20.3332 159.889 14.3422 150.446C8.3513 141.002 8.61658 133.866 10.5085 127.034Z"
-            fill="#8455DF"
-            stroke="#8455DF"
-          />
-        </svg>
-      </div>
-
-      <div className={styles.msgWrap}>
-        {showWarning ? (
-          <span key="warning" className={styles.msg}>
-            {WARNING_MSG}
-          </span>
-        ) : (
-          <span key={msgIdx} className={`${styles.msg}${msgExiting ? ` ${styles.msgExiting}` : ''}`}>
-            {messages[msgIdx]}
-          </span>
-        )}
-      </div>
-
-      <div className={styles.progressWrap}>
-        <div
-          className={styles.progressFill}
-          style={{ width: `${progress.value}%`, transition: `width ${progress.duration}ms ${progress.easing}` }}
-        />
-      </div>
-
-      <div key={tipIdx} className={`${styles.tipCard}${tipExiting ? ` ${styles.tipCardExiting}` : ''}`}>
-        <span className={styles.tipIcon}>💡</span>
-        <span className={styles.tipText}>{TIPS[tipIdx]}</span>
-      </div>
-
-      <div className={styles.dots}>
-        {TIPS.map((_, i) => (
-          <span key={i} className={`${styles.dot}${i === tipIdx ? ` ${styles.dotActive}` : ''}`} />
-        ))}
-      </div>
-
-      <div className={styles.footer}>
-        <span className={styles.footerText}>보통 10~15초 정도 소요돼요</span>
-        <button type="button" className={styles.cancelBtn} onClick={onCancel}>
-          취소
-        </button>
-      </div>
-    </div>
+    <LoadingScreen
+      messages={messages}
+      tips={TIPS}
+      warningMessage="시간이 예상보다 걸리고 있어요. 조금만 더 기다려 주세요."
+      warningDelayMs={30000}
+      progressSteps={PROGRESS_STEPS}
+      footerText="보통 10~15초 정도 소요돼요"
+      onCancel={onCancel}
+    />
   );
 };
diff --git a/apps/web/src/app/(main)/estimate/_components/EstimateResultView/EstimateResultView.tsx b/apps/web/src/app/(main)/estimate/_components/EstimateResultView/EstimateResultView.tsx
index e728a45..39ea0b8 100644
--- a/apps/web/src/app/(main)/estimate/_components/EstimateResultView/EstimateResultView.tsx
+++ b/apps/web/src/app/(main)/estimate/_components/EstimateResultView/EstimateResultView.tsx
@@ -37,6 +37,7 @@ const buildDisplayItems = (lineItems: EstimateLineItem[]): DisplayItem[] =>
 
 const AccordionItem = ({ estimate }: { estimate: ProcessEstimateDisplay }) => {
   const [isOpen, setIsOpen] = useState(estimate.items.length > 0);
+  const hasRefData = estimate.items.some((item) => item.refCount > 0);
 
   return (
     <div className={styles.accordionItemWrapper}>
@@ -53,21 +54,23 @@ const AccordionItem = ({ estimate }: { estimate: ProcessEstimateDisplay }) => {
       <div className={`${styles.accordionBody}${isOpen ? ` ${styles.accordionBodyOpen}` : ''}`}>
         {estimate.items.length > 0 ? (
           <div className={styles.accordionContent}>
-            <div className={styles.accordionTableHeader}>
+            <div className={hasRefData ? styles.accordionTableHeader : styles.accordionTableHeaderNoRef}>
               <span>항목</span>
               <span>예상 범위</span>
-              <span>참조</span>
+              {hasRefData && <span>참조</span>}
             </div>
             <div className={styles.accordionDivider} />
 
             {estimate.items.map((item) => (
               <div key={item.name} className={styles.accordionRow}>
-                <div className={styles.accordionRowContent}>
+                <div className={hasRefData ? styles.accordionRowContent : styles.accordionRowContentNoRef}>
                   <span>{item.name}</span>
                   <span>{item.range}</span>
-                  <span className={item.refCount >= 5 ? styles.refCountGreen : styles.refCountOrange}>
-                    {item.refCount}건{item.refCount < 5 ? ' ⚠' : ''}
-                  </span>
+                  {hasRefData && (
+                    <span className={item.refCount >= 5 ? styles.refCountGreen : styles.refCountOrange}>
+                      {item.refCount}건{item.refCount < 5 ? ' ⚠' : ''}
+                    </span>
+                  )}
                 </div>
                 <div className={styles.accordionItemDivider} />
               </div>
@@ -91,7 +94,7 @@ const TotalBanner = ({ result }: { result: EstimateGenerateResponse }) => {
         <span className={styles.bannerSubtitle}>총 예상 견적 범위 (부가세 별도)</span>
         <span className={styles.bannerAmount}>{formatRange(최소, 최대)}</span>
       </div>
-      <span className={styles.bannerRef}>{result.참고_사례_수}건 참고</span>
+      {result.참고_사례_수 > 0 && <span className={styles.bannerRef}>{result.참고_사례_수}건 참고</span>}
     </div>
   );
 };
diff --git a/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.css.ts b/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.css.ts
index edff1ab..1b5b07d 100644
--- a/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.css.ts
+++ b/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.css.ts
@@ -9,7 +9,7 @@ const cardBase = style({
   overflow: 'hidden',
   cursor: 'pointer',
   backgroundColor: vars.color.white,
-  transition: 'border-color 0.15s ease',
+  transition: 'border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease',
   flexShrink: 0,
   padding: '11.5px 13.5px',
   display: 'flex',
@@ -18,6 +18,14 @@ const cardBase = style({
   alignItems: 'flex-start',
   justifyContent: 'flex-start',
   textAlign: 'left',
+  ':hover': {
+    transform: 'translateY(-2px)',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+  },
+  ':active': {
+    transform: 'translateY(0)',
+    boxShadow: 'none',
+  },
 });
 
 export const cardSelected = style([cardBase, { border: `1.5px solid ${vars.color.brand.secondary}` }]);
@@ -34,6 +42,19 @@ export const processName = style({
 export const processNameSelected = style([processName, { color: vars.color.neutral.n900 }]);
 export const processNameUnselected = style([processName, { color: vars.color.neutral.n500 }]);
 
+const detailDotBase = style({
+  position: 'absolute',
+  top: '8px',
+  right: '8px',
+  width: '6px',
+  height: '6px',
+  borderRadius: '50%',
+  flexShrink: 0,
+});
+
+export const detailDot = style([detailDotBase, { backgroundColor: vars.color.neutral.n300 }]);
+export const detailDotActive = style([detailDotBase, { backgroundColor: vars.color.brand.secondary }]);
+
 export const processDesc = style({
   fontSize: vars.typography.fontSize.xxs,
   fontWeight: vars.typography.fontWeight.regular,
diff --git a/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.tsx b/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.tsx
index bc9d52a..ffb42df 100644
--- a/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.tsx
+++ b/apps/web/src/app/(main)/estimate/_components/ProcessCheckbox/ProcessCheckbox.tsx
@@ -5,9 +5,10 @@ interface ProcessCheckboxProps {
   process: ProcessInfo<ProcessId>;
   selected: boolean;
   onToggle: (id: ProcessId) => void;
+  hasDetail?: boolean;
 }
 
-export const ProcessCheckbox = ({ process, selected, onToggle }: ProcessCheckboxProps) => {
+export const ProcessCheckbox = ({ process, selected, onToggle, hasDetail = false }: ProcessCheckboxProps) => {
   return (
     <button
       type="button"
@@ -15,6 +16,9 @@ export const ProcessCheckbox = ({ process, selected, onToggle }: ProcessCheckbox
       onClick={() => onToggle(process.id)}
       aria-pressed={selected}
     >
+      {hasDetail && (
+        <span className={selected ? styles.detailDotActive : styles.detailDot} title="세부 입력 항목이 있어요" />
+      )}
       <span className={selected ? styles.processNameSelected : styles.processNameUnselected}>{process.name}</span>
       <span className={styles.processDesc}>{process.description}</span>
     </button>
diff --git a/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.css.ts b/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.css.ts
index eee8ef7..fd06ee4 100644
--- a/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.css.ts
+++ b/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.css.ts
@@ -1,5 +1,10 @@
 import { vars } from '@muneo/design-system';
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const fadeSlideDown = keyframes({
+  from: { opacity: 0, transform: 'translateY(-10px)' },
+  to: { opacity: 1, transform: 'translateY(0)' },
+});
 
 export const container = style({
   display: 'flex',
@@ -40,8 +45,7 @@ export const titleHint = style({
 export const card = style({
   backgroundColor: vars.color.white,
   borderRadius: '12px',
-  overflow: 'hidden',
-  height: '630px',
+  minHeight: '630px',
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
@@ -83,9 +87,8 @@ export const cardBody = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'center',
   gap: '45px',
-  padding: '0 40px',
+  padding: '40px 40px',
   overflowY: 'auto',
 });
 
@@ -124,3 +127,156 @@ export const actions = style({
   height: '45px',
   flexShrink: 0,
 });
+
+export const detailSection = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  width: '100%',
+  animation: `${fadeSlideDown} 0.4s cubic-bezier(0.4, 0, 0.2, 1) both`,
+});
+
+export const detailDivider = style({
+  width: '100%',
+  height: '1px',
+  backgroundColor: vars.color.neutral.n200,
+});
+
+export const detailHint = style({
+  fontSize: vars.typography.fontSize.xs,
+  fontWeight: vars.typography.fontWeight.regular,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.color.neutral.n400,
+  lineHeight: '1.6',
+  margin: 0,
+});
+
+export const detailTitle = style({
+  fontSize: vars.typography.fontSize.md,
+  fontWeight: vars.typography.fontWeight.bold,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.color.neutral.n600,
+  lineHeight: 'normal',
+});
+
+export const accordionList = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const accordionItem = style({
+  borderBottom: `1px solid ${vars.color.neutral.n200}`,
+  selectors: {
+    '&:first-child': {
+      borderTop: `1px solid ${vars.color.neutral.n200}`,
+    },
+  },
+});
+
+export const accordionHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '14px 0',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  ':hover': { opacity: 0.75 },
+});
+
+export const accordionHeaderText = style({
+  fontSize: vars.typography.fontSize.md,
+  fontWeight: vars.typography.fontWeight.bold,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.color.neutral.n900,
+  lineHeight: 'normal',
+  transition: 'color 0.25s ease',
+});
+
+export const accordionHeaderTextOpen = style({
+  color: vars.color.brand.secondary,
+});
+
+export const accordionChevron = style({
+  width: '20px',
+  height: '20px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease',
+  color: vars.color.neutral.n500,
+  flexShrink: 0,
+});
+
+export const accordionChevronOpen = style({
+  transform: 'rotate(180deg)',
+  color: vars.color.brand.secondary,
+});
+
+export const accordionBody = style({
+  display: 'grid',
+  gridTemplateRows: '0fr',
+  transition: 'grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+});
+
+export const accordionBodyOpen = style({
+  gridTemplateRows: '1fr',
+});
+
+export const accordionBodyInner = style({
+  overflow: 'hidden',
+  paddingBottom: '0px',
+  transition: 'padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+});
+
+export const accordionBodyInnerOpen = style({
+  paddingBottom: '20px',
+});
+
+export const sectionBody = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '24px',
+});
+
+export const field = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+});
+
+export const fieldLabel = style({
+  fontSize: vars.typography.fontSize.sm,
+  fontWeight: vars.typography.fontWeight.bold,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.color.neutral.n900,
+  lineHeight: 'normal',
+});
+
+export const buttonRow = style({
+  display: 'flex',
+  gap: '10px',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+});
+
+export const conditionalField = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+  paddingLeft: '14px',
+  borderLeft: `2px solid ${vars.color.brand.secondary}`,
+});
+
+export const infoNote = style({
+  fontSize: vars.typography.fontSize.xs,
+  fontWeight: vars.typography.fontWeight.regular,
+  fontFamily: vars.typography.fontFamily,
+  color: vars.color.neutral.n500,
+  lineHeight: '1.5',
+  padding: '8px 12px',
+  backgroundColor: vars.color.neutral.n100,
+  borderRadius: vars.radius.base,
+  margin: 0,
+});
diff --git a/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.tsx b/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.tsx
index b2cdf27..f5deeae 100644
--- a/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.tsx
+++ b/apps/web/src/app/(main)/estimate/_components/Step2ProcessSelection/Step2ProcessSelection.tsx
@@ -1,24 +1,276 @@
 'use client';
 
-import { useState } from 'react';
+import { SelectButton } from '@muneo/design-system';
+import { type ReactNode, useState } from 'react';
 import { useEstimateStore } from '../../_store/estimateStore';
-import { BASIC_PROCESSES, OPTIONAL_PROCESSES } from '../../_types';
+import {
+  BASIC_PROCESSES,
+  OPTIONAL_PROCESSES,
+  SANITARY_WARES,
+  WALLPAPER_ROOMS,
+  type BathroomDetail,
+  type DemolitionDetail,
+  type FlooringDetail,
+  type KitchenDetail,
+  type WallpaperDetail,
+} from '../../_types';
+import { ChatHint } from '../ChatHint/ChatHint';
 import { ProcessCheckbox } from '../ProcessCheckbox/ProcessCheckbox';
 import { StepActions } from '../StepActions/StepActions';
 import * as styles from './Step2ProcessSelection.css';
 
+const ALL_PROCESSES = [...BASIC_PROCESSES, ...OPTIONAL_PROCESSES];
+
+const toggleItem = <T,>(arr: T[], item: T): T[] =>
+  arr.includes(item) ? arr.filter((i) => i !== item) : [...arr, item];
+
 const BASIC_ROWS = [BASIC_PROCESSES.slice(0, 5), BASIC_PROCESSES.slice(5, 10), BASIC_PROCESSES.slice(10)];
 
+// ─── 섹션 컴포넌트 ───
+
+interface FieldProps {
+  label: string;
+  children: ReactNode;
+  conditional?: boolean;
+}
+
+const Field = ({ label, children, conditional = false }: FieldProps) => (
+  <div className={conditional ? styles.conditionalField : styles.field}>
+    <span className={styles.fieldLabel}>{label}</span>
+    {children}
+  </div>
+);
+
+interface SectionProps<T> {
+  data: Partial<T>;
+  onChange: (patch: Partial<T>) => void;
+}
+
+const DemolitionSection = ({ data, onChange }: SectionProps<DemolitionDetail>) => (
+  <div className={styles.sectionBody}>
+    <Field label="철거 범위">
+      <div className={styles.buttonRow}>
+        {(['전체 철거', '부분 철거'] as const).map((opt) => (
+          <SelectButton key={opt} selected={data.scope === opt} onClick={() => onChange({ scope: opt })}>
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+  </div>
+);
+
+const WallpaperSection = ({ data, onChange }: SectionProps<WallpaperDetail>) => (
+  <div className={styles.sectionBody}>
+    <Field label="벽지 종류">
+      <div className={styles.buttonRow}>
+        {(['실크벽지', '합지벽지', '천연벽지'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.wallpaperType === opt}
+            onClick={() => onChange({ wallpaperType: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <Field label="시공 범위">
+      <div className={styles.buttonRow}>
+        {(['전체(벽면+천장)', '벽면만', '부분 도배'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.wallpaperScope === opt}
+            onClick={() =>
+              onChange(opt === '부분 도배' ? { wallpaperScope: opt } : { wallpaperScope: opt, partialRooms: undefined })
+            }
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    {data.wallpaperScope === '부분 도배' && (
+      <Field label="부분 도배 공간" conditional>
+        <div className={styles.buttonRow}>
+          {WALLPAPER_ROOMS.map((room) => (
+            <SelectButton
+              key={room}
+              selected={(data.partialRooms ?? []).includes(room)}
+              onClick={() => onChange({ partialRooms: toggleItem(data.partialRooms ?? [], room) })}
+            >
+              {room}
+            </SelectButton>
+          ))}
+        </div>
+      </Field>
+    )}
+    <Field label="초배 작업">
+      <div className={styles.buttonRow}>
+        {(['포함', '미포함', '모름'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.underpaperWork === opt}
+            onClick={() => onChange({ underpaperWork: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+      <ChatHint visible={data.underpaperWork === '모름'} message="도배 전 초배 작업이 필요한 경우는 언제인가요?" />
+    </Field>
+    <p className={styles.infoNote}>
+      실크벽지 기준으로 산출됩니다. 합지 선택 시 약 35% 저렴, 천연벽지는 약 40% 비쌉니다.
+    </p>
+  </div>
+);
+
+const FlooringSection = ({ data, onChange }: SectionProps<FlooringDetail>) => (
+  <div className={styles.sectionBody}>
+    <Field label="바닥재 종류">
+      <div className={styles.buttonRow}>
+        {(['강마루', '강화마루', '원목마루', '장판', '데코타일'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.floorMaterial === opt}
+            onClick={() => onChange({ floorMaterial: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <Field label="시공 범위">
+      <div className={styles.buttonRow}>
+        {(['전체', '거실+방만', '방만'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.flooringScope === opt}
+            onClick={() => onChange({ flooringScope: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <Field label="기존 바닥 철거">
+      <div className={styles.buttonRow}>
+        {(['필요', '불필요', '모름'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.floorDemolition === opt}
+            onClick={() => onChange({ floorDemolition: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+      <ChatHint visible={data.floorDemolition === '모름'} message="기존 바닥을 철거해야 하는 상황은 어떤 경우인가요?" />
+    </Field>
+    <p className={styles.infoNote}>강마루 기준 산출. 강화마루 약 25% 저렴, 원목마루 약 2배.</p>
+  </div>
+);
+
+const BathroomSection = ({ data, onChange }: SectionProps<BathroomDetail>) => (
+  <div className={styles.sectionBody}>
+    <Field label="욕실 개수">
+      <div className={styles.buttonRow}>
+        {(['1개', '2개', '3개 이상'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.bathroomCount === opt}
+            onClick={() => onChange({ bathroomCount: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <Field label="욕실 크기">
+      <div className={styles.buttonRow}>
+        {(['소형(1평 미만)', '중형(1~2평)', '대형(2평 이상)'] as const).map((opt) => (
+          <SelectButton key={opt} selected={data.bathroomSize === opt} onClick={() => onChange({ bathroomSize: opt })}>
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <Field label="타일 등급">
+      <div className={styles.buttonRow}>
+        {(['일반', '중급', '고급(수입)'] as const).map((opt) => (
+          <SelectButton
+            key={opt}
+            selected={data.bathroomTileGrade === opt}
+            onClick={() => onChange({ bathroomTileGrade: opt })}
+          >
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <Field label="위생도기">
+      <div className={styles.buttonRow}>
+        {SANITARY_WARES.map((item) => (
+          <SelectButton
+            key={item}
+            selected={(data.sanitaryWare ?? []).includes(item)}
+            onClick={() => onChange({ sanitaryWare: toggleItem(data.sanitaryWare ?? [], item) })}
+          >
+            {item}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <p className={styles.infoNote}>전면 리모델링 시 방수 공사가 필수 포함됩니다. 대형(2평 이상) 시 약 30% 할증.</p>
+  </div>
+);
+
+const KitchenSection = ({ data, onChange }: SectionProps<KitchenDetail>) => (
+  <div className={styles.sectionBody}>
+    <Field label="싱크대 형태">
+      <div className={styles.buttonRow}>
+        {(['ㄱ자(일자)', 'ㄷ자', 'ㄹ자(아일랜드 포함)'] as const).map((opt) => (
+          <SelectButton key={opt} selected={data.sinkShape === opt} onClick={() => onChange({ sinkShape: opt })}>
+            {opt}
+          </SelectButton>
+        ))}
+      </div>
+    </Field>
+    <p className={styles.infoNote}>ㄱ자 기준으로 산출. ㄷ자 약 40% 추가.</p>
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SECTION_MAP: Partial<Record<string, React.ComponentType<SectionProps<any>>>> = {
+  demolition: DemolitionSection,
+  wallpaper: WallpaperSection,
+  flooring: FlooringSection,
+  bathroom: BathroomSection,
+  kitchen: KitchenSection,
+};
+
+// ─── 메인 컴포넌트 ───
+
 export const Step2ProcessSelection = () => {
-  const { step2, setStep2, toggleProcess, nextStep, prevStep } = useEstimateStore();
-  const [validationError, setValidationError] = useState(false);
+  const { step2, step4, setStep2, setStep4, toggleProcess, nextStep, prevStep } = useEstimateStore();
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [openId, setOpenId] = useState<string | null>(null);
 
   const handleNext = () => {
     if (step2.selectedProcesses.length === 0) {
-      setValidationError(true);
+      setValidationError('공정을 1개 이상 선택해주세요.');
+      return;
+    }
+    const wallpaperSelected = step2.selectedProcesses.includes('wallpaper');
+    if (
+      wallpaperSelected &&
+      step4.wallpaper?.wallpaperScope === '부분 도배' &&
+      !step4.wallpaper?.partialRooms?.length
+    ) {
+      setValidationError('부분 도배 시공할 공간을 1개 이상 선택해주세요.');
       return;
     }
-    setValidationError(false);
+    setValidationError(null);
     nextStep();
   };
 
@@ -30,6 +282,8 @@ export const Step2ProcessSelection = () => {
     }
   };
 
+  const detailProcesses = ALL_PROCESSES.filter((p) => step2.selectedProcesses.includes(p.id) && SECTION_MAP[p.id]);
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -66,6 +320,7 @@ export const Step2ProcessSelection = () => {
                         process={process}
                         selected={step2.selectedProcesses.includes(process.id)}
                         onToggle={toggleProcess}
+                        hasDetail={Boolean(SECTION_MAP[process.id])}
                       />
                     ))}
                   </div>
@@ -82,15 +337,68 @@ export const Step2ProcessSelection = () => {
                     process={process}
                     selected={step2.selectedProcesses.includes(process.id)}
                     onToggle={toggleProcess}
+                    hasDetail={Boolean(SECTION_MAP[process.id])}
                   />
                 ))}
               </div>
             </div>
           </div>
 
-          {validationError && (
-            <p style={{ color: 'red', fontSize: '13px', marginBottom: '8px' }}>공정을 1개 이상 선택해주세요.</p>
+          {detailProcesses.length > 0 && (
+            <div className={styles.detailSection}>
+              <div className={styles.detailDivider} />
+              <span className={styles.detailTitle}>공정 세부 설정</span>
+              <p className={styles.detailHint}>
+                재질·범위에 따라 비용 차이가 큰 항목들이에요. 나머지 공정은 일반 기준으로 자동 반영됩니다.
+              </p>
+              <div className={styles.accordionList}>
+                {detailProcesses.map((process) => {
+                  const isOpen = openId === process.id;
+                  const SectionComponent = SECTION_MAP[process.id]!;
+                  return (
+                    <div key={process.id} className={styles.accordionItem}>
+                      <button
+                        type="button"
+                        className={styles.accordionHeader}
+                        onClick={() => setOpenId(isOpen ? null : process.id)}
+                      >
+                        <span
+                          className={`${styles.accordionHeaderText}${isOpen ? ` ${styles.accordionHeaderTextOpen}` : ''}`}
+                        >
+                          {process.name}
+                        </span>
+                        <span
+                          className={`${styles.accordionChevron}${isOpen ? ` ${styles.accordionChevronOpen}` : ''}`}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path
+                              d="M4 6L8 10L12 6"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <div className={`${styles.accordionBody}${isOpen ? ` ${styles.accordionBodyOpen}` : ''}`}>
+                        <div
+                          className={`${styles.accordionBodyInner}${isOpen ? ` ${styles.accordionBodyInnerOpen}` : ''}`}
+                        >
+                          <SectionComponent
+                            data={step4[process.id as keyof typeof step4] ?? {}}
+                            onChange={(patch) => setStep4(process.id as keyof typeof step4, patch)}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
           )}
+
+          {validationError && <p style={{ color: 'red', fontSize: '13px', marginBottom: '8px' }}>{validationError}</p>}
           <StepActions onNext={handleNext} onSecondary={prevStep} />
         </div>
       </div>
diff --git a/apps/web/src/app/(main)/estimate/_components/Step4ProcessDetail/Step4ProcessDetail.css.ts b/apps/web/src/app/(main)/estimate/_components/Step4ProcessDetail/Step4ProcessDetail.css.ts
deleted file mode 100644
index dc77aba..0000000
--- a/apps/web/src/app/(main)/estimate/_components/Step4ProcessDetail/Step4ProcessDetail.css.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-import { vars } from '@muneo/design-system';
-import { style } from '@vanilla-extract/css';
-
-export const container = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '20px',
-  width: '100%',
-});
-
-export const header = style({
-  display: 'flex',
-  alignItems: 'flex-end',
-  gap: '13px',
-  flexShrink: 0,
-});
-
-export const title = style({
-  fontSize: vars.typography.fontSize.xl,
-  fontWeight: vars.typography.fontWeight.bold,
-  fontFamily: vars.typography.fontFamily,
-  color: vars.color.neutral.n900,
-  lineHeight: 'normal',
-  margin: 0,
-});
-
-export const titleAccent = style({
-  color: vars.color.brand.secondary,
-});
-
-export const titleHint = style({
-  fontSize: vars.typography.fontSize.xs,
-  fontWeight: vars.typography.fontWeight.medium,
-  fontFamily: vars.typography.fontFamily,
-  color: 'rgba(79, 37, 162, 0.75)',
-  letterSpacing: '-0.12px',
-  lineHeight: 'normal',
-  whiteSpace: 'nowrap',
-});
-
-export const card = style({
-  backgroundColor: vars.color.white,
-  borderRadius: '12px',
-  boxShadow: '0px 2px 1px 0px rgba(0,0,0,0.11)',
-  padding: '20px 40px 28px',
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '24px',
-});
-
-export const contextBar = style({
-  display: 'inline-flex',
-  alignSelf: 'flex-start',
-  alignItems: 'center',
-  padding: '6px 16px',
-  borderRadius: '999px',
-  backgroundColor: 'rgba(79, 37, 162, 0.08)',
-});
-
-export const contextBarText = style({
-  fontSize: vars.typography.fontSize.xs,
-  fontWeight: vars.typography.fontWeight.medium,
-  fontFamily: vars.typography.fontFamily,
-  color: vars.color.brand.secondary,
-  lineHeight: 'normal',
-});
-
-export const accordionList = style({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const accordionItem = style({
-  borderBottom: `1px solid ${vars.color.neutral.n200}`,
-  selectors: {
-    '&:first-child': {
-      borderTop: `1px solid ${vars.color.neutral.n200}`,
-    },
-  },
-});
-
-export const accordionHeader = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
-  padding: '16px 0',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  ':hover': {
-    opacity: 0.75,
-  },
-});
-
-export const accordionHeaderText = style({
-  fontSize: vars.typography.fontSize.lg,
-  fontWeight: vars.typography.fontWeight.bold,
-  fontFamily: vars.typography.fontFamily,
-  color: vars.color.neutral.n900,
-  lineHeight: 'normal',
-});
-
-export const accordionHeaderTextOpen = style({
-  color: vars.color.brand.secondary,
-});
-
-export const accordionChevron = style({
-  width: '20px',
-  height: '20px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  transition: 'transform 0.25s ease',
-  color: vars.color.neutral.n500,
-  flexShrink: 0,
-});
-
-export const accordionChevronOpen = style({
-  transform: 'rotate(180deg)',
-  color: vars.color.brand.secondary,
-});
-
-export const accordionBody = style({
-  overflow: 'hidden',
-  transition: 'max-height 0.25s ease, padding 0.25s ease',
-  maxHeight: '0px',
-  paddingBottom: '0px',
-});
-
-export const accordionBodyOpen = style({
-  maxHeight: '3000px',
-  paddingBottom: '28px',
-});
-
-export const sectionBody = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '28px',
-});
-
-export const field = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '12px',
-});
-
-export const fieldLabel = style({
-  fontSize: vars.typography.fontSize.md,
-  fontWeight: vars.typography.fontWeight.bold,
-  fontFamily: vars.typography.fontFamily,
-  color: vars.color.neutral.n900,
-  lineHeight: 'normal',
-});
-
-export const buttonRow = style({
-  display: 'flex',
-  gap: '12px',
-  alignItems: 'center',
-  flexWrap: 'wrap',
-});
-
-export const conditionalField = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '12px',
-  paddingLeft: '16px',
-  borderLeft: `2px solid ${vars.color.brand.secondary}`,
-});
-
-export const numberInput = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  gap: '4px',
-  padding: `${vars.space.md} ${vars.space.lg}`,
-  border: `1.5px solid ${vars.color.neutral.n200}`,
-  borderRadius: vars.radius.base,
-  backgroundColor: vars.color.white,
-  overflow: 'hidden',
-  alignSelf: 'flex-start',
-  minWidth: '80px',
-});
-
-export const numberInputField = style({
-  fontSize: vars.typography.fontSize.sm,
-  fontWeight: vars.typography.fontWeight.bold,
-  fontFamily: vars.typography.fontFamily,
-  color: 'rgba(10, 10, 10, 0.5)',
-  lineHeight: 'normal',
-  border: 'none',
-  outline: 'none',
-  textAlign: 'right',
-  width: '40px',
-  backgroundColor: 'transparent',
-});
-
-export const numberInputUnit = style({
-  fontSize: vars.typography.fontSize.sm,
-  fontWeight: vars.typography.fontWeight.bold,
-  fontFamily: vars.typography.fontFamily,
-  color: 'rgba(10, 10, 10, 0.5)',
-  lineHeight: 'normal',
-  whiteSpace: 'nowrap',
-  flexShrink: 0,
-});
-
-export const infoNote = style({
-  fontSize: vars.typography.fontSize.xs,
-  fontWeight: vars.typography.fontWeight.regular,
-  fontFamily: vars.typography.fontFamily,
-  color: vars.color.neutral.n500,
-  lineHeight: '1.5',
-  padding: '10px 14px',
-  backgroundColor: vars.color.neutral.n100,
-  borderRadius: vars.radius.base,
-  margin: 0,
-});
diff --git a/apps/web/src/app/(main)/estimate/_components/Step4ProcessDetail/Step4ProcessDetail.tsx b/apps/web/src/app/(main)/estimate/_components/Step4ProcessDetail/Step4ProcessDetail.tsx
deleted file mode 100644
index f3c8daa..0000000
--- a/apps/web/src/app/(main)/estimate/_components/Step4ProcessDetail/Step4ProcessDetail.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-'use client';
-
-import { SelectButton } from '@muneo/design-system';
-import { type ReactNode, useState } from 'react';
-import { useEstimateStore } from '../../_store/estimateStore';
-import {
-  BASIC_PROCESSES,
-  OPTIONAL_PROCESSES,
-  SANITARY_WARES,
-  WALLPAPER_ROOMS,
-  type BathroomDetail,
-  type DemolitionDetail,
-  type FlooringDetail,
-  type KitchenDetail,
-  type WallpaperDetail,
-} from '../../_types';
-import { ChatHint } from '../ChatHint/ChatHint';
-import { StepActions } from '../StepActions/StepActions';
-import * as styles from './Step4ProcessDetail.css';
-
-const ALL_PROCESSES = [...BASIC_PROCESSES, ...OPTIONAL_PROCESSES];
-
-const toggleItem = <T,>(arr: T[], item: T): T[] => {
-  return arr.includes(item) ? arr.filter((i) => i !== item) : [...arr, item];
-};
-
-interface FieldProps {
-  label: string;
-  children: ReactNode;
-  conditional?: boolean;
-}
-
-const Field = ({ label, children, conditional = false }: FieldProps) => {
-  return (
-    <div className={conditional ? styles.conditionalField : styles.field}>
-      <span className={styles.fieldLabel}>{label}</span>
-      {children}
-    </div>
-  );
-};
-
-interface ProcessSectionProps<T> {
-  data: Partial<T>;
-  onChange: (patch: Partial<T>) => void;
-}
-
-// ─────────── 1. 철거 ───────────
-const DemolitionSection = ({ data, onChange }: ProcessSectionProps<DemolitionDetail>) => {
-  return (
-    <div className={styles.sectionBody}>
-      <Field label="철거 범위">
-        <div className={styles.buttonRow}>
-          {(['전체 철거', '부분 철거'] as const).map((opt) => (
-            <SelectButton key={opt} selected={data.scope === opt} onClick={() => onChange({ scope: opt })}>
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-    </div>
-  );
-};
-
-// ─────────── 2. 도배 ───────────
-const WallpaperSection = ({ data, onChange }: ProcessSectionProps<WallpaperDetail>) => {
-  return (
-    <div className={styles.sectionBody}>
-      <Field label="벽지 종류">
-        <div className={styles.buttonRow}>
-          {(['실크벽지', '합지벽지', '천연벽지'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.wallpaperType === opt}
-              onClick={() => onChange({ wallpaperType: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <Field label="시공 범위">
-        <div className={styles.buttonRow}>
-          {(['전체(벽면+천장)', '벽면만', '부분 도배'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.wallpaperScope === opt}
-              onClick={() =>
-                onChange(
-                  opt === '부분 도배' ? { wallpaperScope: opt } : { wallpaperScope: opt, partialRooms: undefined }
-                )
-              }
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      {data.wallpaperScope === '부분 도배' && (
-        <Field label="부분 도배 공간" conditional>
-          <div className={styles.buttonRow}>
-            {WALLPAPER_ROOMS.map((room) => (
-              <SelectButton
-                key={room}
-                selected={(data.partialRooms ?? []).includes(room)}
-                onClick={() => onChange({ partialRooms: toggleItem(data.partialRooms ?? [], room) })}
-              >
-                {room}
-              </SelectButton>
-            ))}
-          </div>
-        </Field>
-      )}
-
-      <Field label="초배 작업">
-        <div className={styles.buttonRow}>
-          {(['포함', '미포함', '모름'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.underpaperWork === opt}
-              onClick={() => onChange({ underpaperWork: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-        <ChatHint visible={data.underpaperWork === '모름'} message="도배 전 초배 작업이 필요한 경우는 언제인가요?" />
-      </Field>
-
-      <p className={styles.infoNote}>
-        실크벽지 기준으로 산출됩니다. 합지 선택 시 약 35% 저렴, 천연벽지는 약 40% 비쌉니다.
-      </p>
-    </div>
-  );
-};
-
-// ─────────── 3. 바닥 ───────────
-const FlooringSection = ({ data, onChange }: ProcessSectionProps<FlooringDetail>) => {
-  return (
-    <div className={styles.sectionBody}>
-      <Field label="바닥재 종류">
-        <div className={styles.buttonRow}>
-          {(['강마루', '강화마루', '원목마루', '장판', '데코타일'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.floorMaterial === opt}
-              onClick={() => onChange({ floorMaterial: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <Field label="시공 범위">
-        <div className={styles.buttonRow}>
-          {(['전체', '거실+방만', '방만'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.flooringScope === opt}
-              onClick={() => onChange({ flooringScope: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <Field label="기존 바닥 철거">
-        <div className={styles.buttonRow}>
-          {(['필요', '불필요', '모름'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.floorDemolition === opt}
-              onClick={() => onChange({ floorDemolition: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-        <ChatHint
-          visible={data.floorDemolition === '모름'}
-          message="기존 바닥을 철거해야 하는 상황은 어떤 경우인가요?"
-        />
-      </Field>
-
-      <p className={styles.infoNote}>강마루 기준 산출. 강화마루 약 25% 저렴, 원목마루 약 2배.</p>
-    </div>
-  );
-};
-
-// ─────────── 4. 욕실 ───────────
-const BathroomSection = ({ data, onChange }: ProcessSectionProps<BathroomDetail>) => {
-  return (
-    <div className={styles.sectionBody}>
-      <Field label="욕실 개수">
-        <div className={styles.buttonRow}>
-          {(['1개', '2개', '3개 이상'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.bathroomCount === opt}
-              onClick={() => onChange({ bathroomCount: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <Field label="욕실 크기">
-        <div className={styles.buttonRow}>
-          {(['소형(1평 미만)', '중형(1~2평)', '대형(2평 이상)'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.bathroomSize === opt}
-              onClick={() => onChange({ bathroomSize: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <Field label="타일 등급">
-        <div className={styles.buttonRow}>
-          {(['일반', '중급', '고급(수입)'] as const).map((opt) => (
-            <SelectButton
-              key={opt}
-              selected={data.bathroomTileGrade === opt}
-              onClick={() => onChange({ bathroomTileGrade: opt })}
-            >
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <Field label="위생도기">
-        <div className={styles.buttonRow}>
-          {SANITARY_WARES.map((item) => (
-            <SelectButton
-              key={item}
-              selected={(data.sanitaryWare ?? []).includes(item)}
-              onClick={() => onChange({ sanitaryWare: toggleItem(data.sanitaryWare ?? [], item) })}
-            >
-              {item}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <p className={styles.infoNote}>전면 리모델링 시 방수 공사가 필수 포함됩니다. 대형(2평 이상) 시 약 30% 할증.</p>
-    </div>
-  );
-};
-
-// ─────────── 5. 주방 ───────────
-const KitchenSection = ({ data, onChange }: ProcessSectionProps<KitchenDetail>) => {
-  return (
-    <div className={styles.sectionBody}>
-      <Field label="싱크대 형태">
-        <div className={styles.buttonRow}>
-          {(['ㄱ자(일자)', 'ㄷ자', 'ㄹ자(아일랜드 포함)'] as const).map((opt) => (
-            <SelectButton key={opt} selected={data.sinkShape === opt} onClick={() => onChange({ sinkShape: opt })}>
-              {opt}
-            </SelectButton>
-          ))}
-        </div>
-      </Field>
-
-      <p className={styles.infoNote}>ㄱ자 기준으로 산출. ㄷ자 약 40% 추가.</p>
-    </div>
-  );
-};
-
-// ─────────── 섹션 라우팅 맵 ───────────
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SECTION_MAP: Partial<Record<string, React.ComponentType<ProcessSectionProps<any>>>> = {
-  demolition: DemolitionSection,
-  wallpaper: WallpaperSection,
-  flooring: FlooringSection,
-  bathroom: BathroomSection,
-  kitchen: KitchenSection,
-};
-
-// ─────────── 메인 컴포넌트 ───────────
-export const Step4ProcessDetail = () => {
-  const { step1, step2, step4, setStep4, nextStep, prevStep } = useEstimateStore();
-
-  const selectedProcesses = ALL_PROCESSES.filter((p) => step2.selectedProcesses.includes(p.id));
-  const renderableProcesses = selectedProcesses.filter((p) => SECTION_MAP[p.id]);
-
-  const [openId, setOpenId] = useState<string | null>(renderableProcesses[0]?.id ?? null);
-
-  const contextLabel = step1.area && step1.roomCount ? `${step1.area}평 / 방 ${step1.roomCount} 기준` : null;
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <h2 className={styles.title}>
-          Step 4 <span className={styles.titleAccent}>공정별 세부사항</span>을 입력해주세요
-        </h2>
-        <span className={styles.titleHint}>(* 가견적 정확도 목표: ±20% 이내 — 상세 입력 시 정확도가 향상합니다.)</span>
-      </div>
-
-      <div className={styles.card}>
-        {contextLabel && (
-          <div className={styles.contextBar}>
-            <span className={styles.contextBarText}>{contextLabel}</span>
-          </div>
-        )}
-
-        {renderableProcesses.length === 0 ? (
-          <div className={styles.sectionBody}>
-            <p className={styles.infoNote}>입력할 세부 항목이 없습니다. 다음 단계로 이동해주세요.</p>
-          </div>
-        ) : (
-          <div className={styles.accordionList}>
-            {renderableProcesses.map((process) => {
-              const isOpen = openId === process.id;
-              const SectionComponent = SECTION_MAP[process.id]!;
-
-              return (
-                <div key={process.id} className={styles.accordionItem}>
-                  <button
-                    type="button"
-                    className={styles.accordionHeader}
-                    onClick={() => setOpenId(isOpen ? null : process.id)}
-                  >
-                    <span
-                      className={`${styles.accordionHeaderText}${isOpen ? ` ${styles.accordionHeaderTextOpen}` : ''}`}
-                    >
-                      {process.name}
-                    </span>
-                    <span className={`${styles.accordionChevron}${isOpen ? ` ${styles.accordionChevronOpen}` : ''}`}>
-                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                        <path
-                          d="M4 6L8 10L12 6"
-                          stroke="currentColor"
-                          strokeWidth="1.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-
-                  <div className={`${styles.accordionBody}${isOpen ? ` ${styles.accordionBodyOpen}` : ''}`}>
-                    <SectionComponent
-                      data={step4[process.id as keyof typeof step4] ?? {}}
-                      onChange={(patch) => setStep4(process.id as keyof typeof step4, patch)}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-
-        <StepActions onNext={nextStep} onSecondary={prevStep} />
-      </div>
-    </div>
-  );
-};
diff --git a/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.css.ts b/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.css.ts
index 0426dfb..633a515 100644
--- a/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.css.ts
+++ b/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.css.ts
@@ -418,15 +418,25 @@ export const accordionContent = style({
   padding: '0 4px',
 });
 
-export const accordionTableHeader = style({
-  display: 'grid',
-  gridTemplateColumns: '1fr 220px 60px',
+const accordionTableHeaderBase = {
   alignItems: 'center',
   fontSize: vars.typography.fontSize.xs,
   fontFamily: vars.typography.fontFamily,
   fontWeight: vars.typography.fontWeight.regular,
   color: vars.color.neutral.n500,
   lineHeight: 'normal',
+} as const;
+
+export const accordionTableHeader = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 220px 60px',
+  ...accordionTableHeaderBase,
+});
+
+export const accordionTableHeaderNoRef = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 220px',
+  ...accordionTableHeaderBase,
 });
 
 globalStyle(`${accordionTableHeader} > *:last-child`, {
@@ -445,15 +455,25 @@ export const accordionRow = style({
   gap: '4px',
 });
 
-export const accordionRowContent = style({
-  display: 'grid',
-  gridTemplateColumns: '1fr 220px 60px',
+const accordionRowContentBase = {
   alignItems: 'center',
   fontSize: vars.typography.fontSize.xs,
   fontWeight: vars.typography.fontWeight.bold,
   fontFamily: vars.typography.fontFamily,
   color: vars.color.neutral.n900,
   lineHeight: 'normal',
+} as const;
+
+export const accordionRowContent = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 220px 60px',
+  ...accordionRowContentBase,
+});
+
+export const accordionRowContentNoRef = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 220px',
+  ...accordionRowContentBase,
 });
 
 export const refCountGreen = style({
diff --git a/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.tsx b/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.tsx
index 6495189..87b6b63 100644
--- a/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.tsx
+++ b/apps/web/src/app/(main)/estimate/_components/Step5EstimateReview/Step5EstimateReview.tsx
@@ -4,7 +4,7 @@ import { ArrowLeftMdIcon, Button } from '@muneo/design-system';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { saveEstimate } from '@/api/estimate';
-import { useAuthStore } from '@/store/authStore';
+import { useUser } from '@/app/(main)/_components/UserProvider/UserProvider';
 import { useEstimateStore } from '../../_store/estimateStore';
 import { mapToApiPayload } from '../../_utils/mapToApiPayload';
 import { EstimateResultView } from '../EstimateResultView/EstimateResultView';
@@ -39,9 +39,6 @@ const DisclaimerSection = ({ isSaving, saveError, onEdit, onSave }: DisclaimerSe
           <ArrowLeftMdIcon width={20} height={20} />
           수정하기
         </Button>
-        <Button variant="outline" size="md" style={{ color: '#6B7280', borderRadius: '12px' }}>
-          PDF 다운로드
-        </Button>
         <Button variant="primary" size="md" onClick={onSave} disabled={isSaving}>
           {isSaving ? '저장 중...' : '저장하기'}
         </Button>
@@ -54,7 +51,7 @@ const DisclaimerSection = ({ isSaving, saveError, onEdit, onSave }: DisclaimerSe
 
 export const EstimateResult = () => {
   const { step1, step2, step3, step4, estimateResult, goToStep, reset } = useEstimateStore();
-  const { user } = useAuthStore();
+  const user = useUser();
   const router = useRouter();
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
@@ -66,9 +63,6 @@ export const EstimateResult = () => {
   const input = mapToApiPayload(step1, step2, step3, step4);
 
   const handleSave = async () => {
-    if (!user) {
-      return;
-    }
     setIsSaving(true);
     setSaveError(null);
     try {
@@ -88,7 +82,7 @@ export const EstimateResult = () => {
       result={estimateResult}
       onEdit={() => goToStep(1)}
       actions={
-        <DisclaimerSection isSaving={isSaving} saveError={saveError} onEdit={() => goToStep(4)} onSave={handleSave} />
+        <DisclaimerSection isSaving={isSaving} saveError={saveError} onEdit={() => goToStep(3)} onSave={handleSave} />
       }
     />
   );
diff --git a/apps/web/src/app/(main)/estimate/_components/StepIndicator/StepIndicator.tsx b/apps/web/src/app/(main)/estimate/_components/StepIndicator/StepIndicator.tsx
index 1bd9b1a..f4233a6 100644
--- a/apps/web/src/app/(main)/estimate/_components/StepIndicator/StepIndicator.tsx
+++ b/apps/web/src/app/(main)/estimate/_components/StepIndicator/StepIndicator.tsx
@@ -23,11 +23,10 @@ export const StepIndicator = ({ currentStep }: StepIndicatorProps) => {
     <div className={styles.container}>
       {ESTIMATE_STEPS.map((step) => {
         const state = getStepState(step, currentStep);
-        const isWide = step === 4;
 
         return (
           <div key={step} style={{ display: 'contents' }}>
-            <div className={isWide ? styles.stepItemWide : styles.stepItem}>
+            <div className={styles.stepItem}>
               <div
                 className={
                   state === 'completed'
diff --git a/apps/web/src/app/(main)/estimate/_store/estimateStore.test.ts b/apps/web/src/app/(main)/estimate/_store/estimateStore.test.ts
index 60b6bc1..b827dc8 100644
--- a/apps/web/src/app/(main)/estimate/_store/estimateStore.test.ts
+++ b/apps/web/src/app/(main)/estimate/_store/estimateStore.test.ts
@@ -22,25 +22,25 @@ describe('estimateStore', () => {
   });
 
   describe('단계 이동', () => {
-    it('nextStep으로 1 → 5까지 증가한다', () => {
+    it('nextStep으로 1 → 4까지 증가한다', () => {
       const { nextStep } = useEstimateStore.getState();
-      for (let i = 0; i < 4; i++) {
+      for (let i = 0; i < 3; i++) {
         nextStep();
       }
-      expect(useEstimateStore.getState().currentStep).toBe(5);
+      expect(useEstimateStore.getState().currentStep).toBe(4);
     });
 
-    it('nextStep은 5를 넘지 않는다', () => {
+    it('nextStep은 4를 넘지 않는다', () => {
       const store = useEstimateStore.getState();
-      store.goToStep(5);
+      store.goToStep(4);
       store.nextStep();
-      expect(useEstimateStore.getState().currentStep).toBe(5);
+      expect(useEstimateStore.getState().currentStep).toBe(4);
     });
 
-    it('prevStep으로 5 → 1까지 감소한다', () => {
+    it('prevStep으로 4 → 1까지 감소한다', () => {
       const store = useEstimateStore.getState();
-      store.goToStep(5);
-      for (let i = 0; i < 4; i++) {
+      store.goToStep(4);
+      for (let i = 0; i < 3; i++) {
         store.prevStep();
       }
       expect(useEstimateStore.getState().currentStep).toBe(1);
diff --git a/apps/web/src/app/(main)/estimate/_store/estimateStore.ts b/apps/web/src/app/(main)/estimate/_store/estimateStore.ts
index 035a98b..584db81 100644
--- a/apps/web/src/app/(main)/estimate/_store/estimateStore.ts
+++ b/apps/web/src/app/(main)/estimate/_store/estimateStore.ts
@@ -36,7 +36,7 @@ const initialStep3: Step3Data = {
 const initialStep4: Step4Data = {};
 
 const MIN_STEP: EstimateStep = 1;
-const MAX_STEP: EstimateStep = 5;
+const MAX_STEP: EstimateStep = 4;
 
 interface EstimateStore {
   currentStep: EstimateStep;
diff --git a/apps/web/src/app/(main)/estimate/_types/meta.ts b/apps/web/src/app/(main)/estimate/_types/meta.ts
index 4fc35cc..5f019d7 100644
--- a/apps/web/src/app/(main)/estimate/_types/meta.ts
+++ b/apps/web/src/app/(main)/estimate/_types/meta.ts
@@ -1,12 +1,11 @@
-export const ESTIMATE_STEPS = [1, 2, 3, 4, 5] as const;
+export const ESTIMATE_STEPS = [1, 2, 3, 4] as const;
 export type EstimateStep = (typeof ESTIMATE_STEPS)[number];
 
 export const STEP_LABELS = {
   1: '기본 정보',
   2: '공정 선택',
   3: '공사 조건',
-  4: '공정별 세부',
-  5: '견적 확인',
+  4: '견적 확인',
 } satisfies Record<EstimateStep, string>;
 
 export interface ProcessInfo<TId extends string = string> {
diff --git a/apps/web/src/app/(main)/estimate/page.tsx b/apps/web/src/app/(main)/estimate/page.tsx
index cd50128..afed62f 100644
--- a/apps/web/src/app/(main)/estimate/page.tsx
+++ b/apps/web/src/app/(main)/estimate/page.tsx
@@ -6,7 +6,6 @@ import { EstimateLoadingScreen } from './_components/EstimateLoadingScreen/Estim
 import { Step1BasicInfo } from './_components/Step1BasicInfo/Step1BasicInfo';
 import { Step2ProcessSelection } from './_components/Step2ProcessSelection/Step2ProcessSelection';
 import { Step3ConstructionConditions } from './_components/Step3ConstructionConditions/Step3ConstructionConditions';
-import { Step4ProcessDetail } from './_components/Step4ProcessDetail/Step4ProcessDetail';
 import { EstimateResult } from './_components/Step5EstimateReview/Step5EstimateReview';
 import { StepIndicator } from './_components/StepIndicator/StepIndicator';
 import { useEstimateStore } from './_store/estimateStore';
@@ -17,8 +16,7 @@ const STEP_COMPONENTS = {
   1: Step1BasicInfo,
   2: Step2ProcessSelection,
   3: Step3ConstructionConditions,
-  4: Step4ProcessDetail,
-  5: EstimateResult,
+  4: EstimateResult,
 } as const;
 
 const EstimatePage = () => {
@@ -35,7 +33,7 @@ const EstimatePage = () => {
   const goToStep = useEstimateStore((s) => s.goToStep);
 
   useEffect(() => {
-    if (currentStep !== 5 || estimateResult !== null || isGenerating || generateError !== null) {
+    if (currentStep !== 4 || estimateResult !== null || isGenerating || generateError !== null) {
       return;
     }
 
@@ -70,7 +68,7 @@ const EstimatePage = () => {
     setEstimateResult,
   ]);
 
-  if (currentStep === 5 && isGenerating) {
+  if (currentStep === 4 && isGenerating) {
     return (
       <div className={styles.page}>
         <div className={styles.content}>
@@ -80,7 +78,7 @@ const EstimatePage = () => {
             processCount={step2.selectedProcesses.length}
             onCancel={() => {
               setGeneratingState(false, null);
-              goToStep(4);
+              goToStep(3);
             }}
           />
         </div>
@@ -88,7 +86,7 @@ const EstimatePage = () => {
     );
   }
 
-  if (currentStep === 5 && generateError) {
+  if (currentStep === 4 && generateError) {
     return (
       <div className={styles.page}>
         <div className={styles.content}>
@@ -101,7 +99,7 @@ const EstimatePage = () => {
               type="button"
               onClick={() => {
                 setGeneratingState(false, null);
-                goToStep(4);
+                goToStep(3);
               }}
               style={{ padding: '10px 20px', borderRadius: '8px', border: '1px solid #E5E7EB', cursor: 'pointer' }}
             >
diff --git a/apps/web/src/app/(main)/history/[id]/page.tsx b/apps/web/src/app/(main)/history/[id]/page.tsx
index 5670a9a..e6b878d 100644
--- a/apps/web/src/app/(main)/history/[id]/page.tsx
+++ b/apps/web/src/app/(main)/history/[id]/page.tsx
@@ -3,7 +3,9 @@ import { notFound } from 'next/navigation';
 import { getServerEstimates, getServerRiskDetections } from '@/api/history';
 import { getServerMe } from '@/api/user/server';
 import { TransitionLink } from '@/components/TransitionLink';
+import { mapApiReportToDiagnosisResult } from '../../analysis/_lib/mapApiReport';
 import { EstimateResultView } from '../../estimate/_components/EstimateResultView/EstimateResultView';
+import { DiagnosisDetailView } from '../_components/DiagnosisDetailView/DiagnosisDetailView';
 import * as styles from './page.css';
 
 export default async function HistoryDetailPage({ params }: { params: Promise<{ id: string }> }) {
@@ -39,41 +41,7 @@ export default async function HistoryDetailPage({ params }: { params: Promise<{
             분석 이력
           </TransitionLink>
           <div className={styles.content}>
-            <div>
-              <h1 style={{ fontSize: '30px', fontWeight: 700, marginBottom: '8px' }}>리스크 진단 결과</h1>
-              <p style={{ color: '#6B7280', marginBottom: '24px' }}>
-                {risk.input.companyName} · {risk.input.spaceType} {risk.input.pyeong}평
-              </p>
-              <div
-                style={{
-                  background: '#fff',
-                  border: '1px solid #E5E7EB',
-                  borderRadius: '12px',
-                  padding: '24px',
-                  display: 'flex',
-                  gap: '32px',
-                }}
-              >
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ fontSize: '28px', fontWeight: 700, color: '#EF4444' }}>
-                    {risk.result.report.summary.chips.누락}
-                  </div>
-                  <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>누락</div>
-                </div>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ fontSize: '28px', fontWeight: 700, color: '#F59E0B' }}>
-                    {risk.result.report.summary.chips.중복}
-                  </div>
-                  <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>중복</div>
-                </div>
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ fontSize: '28px', fontWeight: 700, color: '#3B82F6' }}>
-                    {risk.result.report.summary.chips.불분명}
-                  </div>
-                  <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>불분명</div>
-                </div>
-              </div>
-            </div>
+            <DiagnosisDetailView result={mapApiReportToDiagnosisResult(risk.result.report, risk.created_at)} />
           </div>
         </div>
       </div>
diff --git a/apps/web/src/app/(main)/history/_components/DiagnosisDetailView/DiagnosisDetailView.tsx b/apps/web/src/app/(main)/history/_components/DiagnosisDetailView/DiagnosisDetailView.tsx
index beb9fc0..a6efe33 100644
--- a/apps/web/src/app/(main)/history/_components/DiagnosisDetailView/DiagnosisDetailView.tsx
+++ b/apps/web/src/app/(main)/history/_components/DiagnosisDetailView/DiagnosisDetailView.tsx
@@ -19,9 +19,6 @@ export const DiagnosisDetailView = ({ result }: DiagnosisDetailViewProps) => {
             {result.vendorLabel} · {result.areaLabel} · 분석일 {result.analyzedAt}
           </span>
         </div>
-        <button type="button" className={styles.pdfButton} onClick={() => window.print()}>
-          PDF ↓
-        </button>
       </div>
 
       <div className={styles.summaryCards}>
diff --git a/apps/web/src/app/(main)/history/_components/HistoryContent/HistoryContent.tsx b/apps/web/src/app/(main)/history/_components/HistoryContent/HistoryContent.tsx
index 4896565..de43320 100644
--- a/apps/web/src/app/(main)/history/_components/HistoryContent/HistoryContent.tsx
+++ b/apps/web/src/app/(main)/history/_components/HistoryContent/HistoryContent.tsx
@@ -8,11 +8,15 @@ import {
   parseDateParam,
   type AppliedFilters,
 } from '../../_lib/historyFilter';
-import { MOCK_HISTORY_ROWS } from '../../_mocks/history.mock';
+import { type HistoryRow } from '../../_types/history.types';
 import { HistoryFilterBar } from '../HistoryFilterBar/HistoryFilterBar';
 import { HistoryTable } from '../HistoryTable/HistoryTable';
 
-export const HistoryContent = () => {
+interface HistoryContentProps {
+  rows: HistoryRow[];
+}
+
+export const HistoryContent = ({ rows }: HistoryContentProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -23,7 +27,7 @@ export const HistoryContent = () => {
     endDate: parseDateParam(searchParams.get('to')),
   };
 
-  const filteredRows = applyFilters(MOCK_HISTORY_ROWS, appliedFilters);
+  const filteredRows = applyFilters(rows, appliedFilters);
 
   return (
     <>
diff --git a/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.css.ts b/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.css.ts
index ce93318..02888ee 100644
--- a/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.css.ts
+++ b/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.css.ts
@@ -17,11 +17,10 @@ export const table = style({
 
 export const colId = style({ width: '6%' });
 export const colDate = style({ width: '12%' });
-export const colAnalysisType = style({ width: '13%' });
-export const colConstructionType = style({ width: '26%' });
-export const colVendor = style({ width: '12%' });
-export const colRisk = style({ width: '13%' });
-export const colStatus = style({ width: '10%' });
+export const colAnalysisType = style({ width: '14%' });
+export const colConstructionType = style({ width: '38%' });
+export const colRisk = style({ width: '17%' });
+export const colStatus = style({ width: '13%' });
 
 export const thead = style({
   borderBottom: `1px solid ${vars.color.neutral.n200}`,
@@ -74,9 +73,9 @@ export const tdAnalysisType = style([
   },
 ]);
 
-export const riskDanger = style({ color: '#ef4444' });
-export const riskSafe = style({ color: '#10b981' });
-export const riskNone = style({ color: '#374151' });
+export const riskDanger = style({ color: '#ef4444', fontSize: '12px' });
+export const riskWarning = style({ color: '#f59e0b', fontSize: '12px' });
+export const riskNone = style({ color: '#9ca3af' });
 export const statusComplete = style({ color: '#10b981' });
 export const statusInProgress = style({ color: '#f59e0b' });
 export const statusPending = style({ color: '#9ca3af' });
diff --git a/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.tsx b/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.tsx
index a8df6b1..ef977ea 100644
--- a/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.tsx
+++ b/apps/web/src/app/(main)/history/_components/HistoryTable/HistoryTable.tsx
@@ -3,10 +3,10 @@ import * as styles from './HistoryTable.css';
 
 interface HistoryTableProps {
   rows: HistoryRow[];
-  onRowClick?: (id: number) => void;
+  onRowClick?: (id: string) => void;
 }
 
-const COLUMNS = ['번호', '날짜', '분석 유형', '공사 유형', '업체', '리스크', '상태'] as const;
+const COLUMNS = ['번호', '날짜', '분석 유형', '공사 유형', '리스크', '상태'] as const;
 
 const getStatusClass = (status: AnalysisStatus) => {
   if (status === '완료') {
@@ -19,13 +19,15 @@ const getStatusClass = (status: AnalysisStatus) => {
 };
 
 const RiskCell = ({ risk }: { risk: RiskStatus }) => {
-  if (risk.type === 'danger') {
-    return <span className={styles.riskDanger}>{risk.label}</span>;
+  if (risk.missing === 0 && risk.unclear === 0) {
+    return <span className={styles.riskNone}>—</span>;
   }
-  if (risk.type === 'safe') {
-    return <span className={styles.riskSafe}>{risk.label}</span>;
-  }
-  return <span className={styles.riskNone}>—</span>;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+      {risk.missing > 0 && <span className={styles.riskDanger}>누락 {risk.missing}건</span>}
+      {risk.unclear > 0 && <span className={styles.riskWarning}>불분명 {risk.unclear}건</span>}
+    </div>
+  );
 };
 
 export const HistoryTable = ({ rows, onRowClick }: HistoryTableProps) => {
@@ -37,7 +39,6 @@ export const HistoryTable = ({ rows, onRowClick }: HistoryTableProps) => {
           <col className={styles.colDate} />
           <col className={styles.colAnalysisType} />
           <col className={styles.colConstructionType} />
-          <col className={styles.colVendor} />
           <col className={styles.colRisk} />
           <col className={styles.colStatus} />
         </colgroup>
@@ -58,7 +59,7 @@ export const HistoryTable = ({ rows, onRowClick }: HistoryTableProps) => {
               </td>
             </tr>
           ) : (
-            rows.map((row) => (
+            rows.map((row, idx) => (
               <tr
                 key={row.id}
                 className={styles.tr}
@@ -71,11 +72,10 @@ export const HistoryTable = ({ rows, onRowClick }: HistoryTableProps) => {
                   }
                 }}
               >
-                <td className={styles.td}>{row.id}</td>
+                <td className={styles.td}>{idx + 1}</td>
                 <td className={styles.td}>{row.date}</td>
                 <td className={styles.tdAnalysisType}>{row.analysisType}</td>
                 <td className={styles.td}>{row.constructionType}</td>
-                <td className={styles.td}>{row.vendor}</td>
                 <td className={styles.td}>
                   <RiskCell risk={row.risk} />
                 </td>
diff --git a/apps/web/src/app/(main)/history/_lib/historyFilter.test.ts b/apps/web/src/app/(main)/history/_lib/historyFilter.test.ts
index 5b0273d..d73142a 100644
--- a/apps/web/src/app/(main)/history/_lib/historyFilter.test.ts
+++ b/apps/web/src/app/(main)/history/_lib/historyFilter.test.ts
@@ -2,13 +2,12 @@ import { describe, expect, it } from 'vitest';
 import { applyFilters, formatDateParam, parseDateParam } from './historyFilter';
 import { type HistoryRow } from '../_types/history.types';
 
-const makeRow = (id: number, analysisType: HistoryRow['analysisType'], date: string): HistoryRow => ({
+const makeRow = (id: string, analysisType: HistoryRow['analysisType'], date: string): HistoryRow => ({
   id,
   date,
   analysisType,
   constructionType: '아파트',
-  vendor: '문어건설',
-  risk: { type: 'none' },
+  risk: { missing: 0, unclear: 0 },
   status: '완료',
 });
 
@@ -66,9 +65,9 @@ describe('formatDateParam', () => {
 
 describe('applyFilters', () => {
   const rows: HistoryRow[] = [
-    makeRow(1, '리스크 진단', '2025-01-10'),
-    makeRow(2, '가견적서 생성', '2025-01-15'),
-    makeRow(3, '리스크 진단', '2025-02-01'),
+    makeRow('1', '리스크 진단', '2025-01-10'),
+    makeRow('2', '가견적서 생성', '2025-01-15'),
+    makeRow('3', '리스크 진단', '2025-02-01'),
   ];
 
   it('analysisType이 all이면 모든 행을 반환한다', () => {
@@ -78,7 +77,7 @@ describe('applyFilters', () => {
 
   it('analysisType이 risk이면 리스크 진단 행만 반환한다', () => {
     const result = applyFilters(rows, { analysisType: 'risk', startDate: undefined, endDate: undefined });
-    expect(result.map((r) => r.id)).toEqual([1, 3]);
+    expect(result.map((r) => r.id)).toEqual(['1', '3']);
   });
 
   it('startDate 이전 행은 제외한다', () => {
@@ -87,7 +86,7 @@ describe('applyFilters', () => {
       startDate: new Date('2025-01-14'),
       endDate: undefined,
     });
-    expect(result.map((r) => r.id)).toEqual([2, 3]);
+    expect(result.map((r) => r.id)).toEqual(['2', '3']);
   });
 
   it('endDate 이후 행은 제외한다', () => {
@@ -96,7 +95,7 @@ describe('applyFilters', () => {
       startDate: undefined,
       endDate: new Date('2025-01-15'),
     });
-    expect(result.map((r) => r.id)).toEqual([1, 2]);
+    expect(result.map((r) => r.id)).toEqual(['1', '2']);
   });
 
   it('startDate와 endDate를 동시에 적용한다', () => {
@@ -105,6 +104,6 @@ describe('applyFilters', () => {
       startDate: new Date('2025-01-12'),
       endDate: new Date('2025-01-20'),
     });
-    expect(result.map((r) => r.id)).toEqual([2]);
+    expect(result.map((r) => r.id)).toEqual(['2']);
   });
 });
diff --git a/apps/web/src/app/(main)/history/_mocks/history-detail.mock.ts b/apps/web/src/app/(main)/history/_mocks/history-detail.mock.ts
deleted file mode 100644
index 588db0e..0000000
--- a/apps/web/src/app/(main)/history/_mocks/history-detail.mock.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import { type DiagnosisResult } from '@/app/(main)/analysis/_types/analysis.types';
-import { type EstimateSummary } from '../_types/history.types';
-
-export const MOCK_DIAGNOSIS_DETAILS: Record<number, DiagnosisResult> = {
-  5: {
-    vendorLabel: 'A업체',
-    areaLabel: '주거 32평 전체 리모델링',
-    analyzedAt: '2026.04.15',
-    missingCount: 4,
-    riskCount: 2,
-    insufficientCount: 1,
-    sections: [
-      {
-        id: 'demolition',
-        name: '철거',
-        items: [
-          {
-            id: 'd-1',
-            status: '누락',
-            title: '철거 범위 미명시',
-            description: '계약서에 철거 범위가 구체적으로 명시되지 않았습니다.',
-            actionNote: '철거 범위를 평면도 기준으로 명확히 표기하도록 요청하세요.',
-          },
-          {
-            id: 'd-2',
-            status: '불분명',
-            title: '폐자재 처리 비용',
-            description: '폐자재 처리 비용의 포함 여부가 불분명합니다.',
-            actionNote: '견적서에 폐자재 처리 비용 포함 여부를 명시하도록 확인하세요.',
-          },
-        ],
-      },
-      {
-        id: 'plumbing',
-        name: '설비',
-        items: [
-          {
-            id: 'p-1',
-            status: '누락',
-            title: '급배수 교체 범위 미기재',
-            description: '급배수관 교체 범위가 계약서에 누락되어 있습니다.',
-            actionNote: '급배수 교체 범위와 사용 자재를 명시하도록 요청하세요.',
-          },
-        ],
-      },
-      {
-        id: 'electrical',
-        name: '전기/조명',
-        items: [
-          {
-            id: 'e-1',
-            status: '누락',
-            title: '조명 기구 수량 미기재',
-            description: '조명 기구 수량 및 사양이 계약서에 명시되지 않았습니다.',
-            actionNote: '조명 기구 수량, 브랜드, 사양을 구체적으로 명시하세요.',
-          },
-          {
-            id: 'e-2',
-            status: '중복',
-            title: '전기 용량 정보 부족',
-            description: '전기 용량 증설 여부에 대한 정보가 미비합니다.',
-            actionNote: '전기 용량 증설 필요 여부와 비용을 확인하세요.',
-          },
-        ],
-      },
-      {
-        id: 'carpentry',
-        name: '목공',
-        items: [
-          {
-            id: 'c-1',
-            status: '누락',
-            title: '붙박이장 포함 여부 미기재',
-            description: '붙박이장 시공 포함 여부가 명시되지 않았습니다.',
-            actionNote: '붙박이장 포함/제외 여부와 사양을 명시하도록 요청하세요.',
-          },
-          {
-            id: 'c-2',
-            status: '불분명',
-            title: '몰딩 처리 방식 불명확',
-            description: '몰딩 처리 방식(유무, 종류)이 불명확합니다.',
-            actionNote: '몰딩 종류와 적용 범위를 구체적으로 확인하세요.',
-          },
-        ],
-      },
-      {
-        id: 'flooring',
-        name: '바닥',
-        items: [
-          {
-            id: 'f-1',
-            status: '정상',
-            title: '바닥재 사양 명시',
-            description: '바닥재 제품명, 두께, 적용 범위가 정상적으로 명시되어 있습니다.',
-            actionNote: '',
-          },
-        ],
-      },
-    ],
-  },
-  3: {
-    vendorLabel: 'B업체',
-    areaLabel: '주거 28평 리모델링',
-    analyzedAt: '2026.04.12',
-    missingCount: 2,
-    riskCount: 1,
-    insufficientCount: 0,
-    sections: [
-      {
-        id: 'demolition',
-        name: '철거',
-        items: [
-          {
-            id: 'd-1',
-            status: '누락',
-            title: '철거 범위 미명시',
-            description: '계약서에 철거 범위가 구체적으로 명시되지 않았습니다.',
-            actionNote: '철거 범위를 평면도 기준으로 명확히 표기하도록 요청하세요.',
-          },
-        ],
-      },
-      {
-        id: 'wallpaper',
-        name: '도배',
-        items: [
-          {
-            id: 'w-1',
-            status: '누락',
-            title: '도배 자재 사양 누락',
-            description: '도배지 브랜드 및 등급이 명시되지 않았습니다.',
-            actionNote: '도배지 브랜드, 등급, 적용 범위를 명시하도록 요청하세요.',
-          },
-          {
-            id: 'w-2',
-            status: '불분명',
-            title: '도배 시공 범위 불명확',
-            description: '천장 포함 여부가 불명확합니다.',
-            actionNote: '천장 도배 포함 여부를 확인하세요.',
-          },
-        ],
-      },
-      {
-        id: 'flooring',
-        name: '바닥',
-        items: [
-          {
-            id: 'f-1',
-            status: '정상',
-            title: '바닥재 사양 명시',
-            description: '바닥재 제품명, 두께, 적용 범위가 정상적으로 명시되어 있습니다.',
-            actionNote: '',
-          },
-        ],
-      },
-    ],
-  },
-  1: {
-    vendorLabel: 'D업체',
-    areaLabel: '주거 32평 부분 리모델링',
-    analyzedAt: '2026.04.05',
-    missingCount: 0,
-    riskCount: 0,
-    insufficientCount: 0,
-    sections: [
-      {
-        id: 'kitchen',
-        name: '주방',
-        items: [
-          {
-            id: 'k-1',
-            status: '정상',
-            title: '주방 가구 사양 명시',
-            description: '주방 가구 브랜드, 사양, 색상이 정상적으로 명시되어 있습니다.',
-            actionNote: '',
-          },
-          {
-            id: 'k-2',
-            status: '정상',
-            title: '싱크대 교체 범위 명시',
-            description: '싱크대 교체 범위와 자재가 정상적으로 명시되어 있습니다.',
-            actionNote: '',
-          },
-        ],
-      },
-      {
-        id: 'bathroom',
-        name: '욕실',
-        items: [
-          {
-            id: 'b-1',
-            status: '정상',
-            title: '욕실 타일 사양 명시',
-            description: '욕실 타일 제품, 사이즈, 시공 범위가 명시되어 있습니다.',
-            actionNote: '',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export const MOCK_ESTIMATE_DETAILS: Record<number, EstimateSummary> = {
-  4: {
-    constructionType: '상업 20평 신규',
-    selectedProcesses: ['철거', '도배', '바닥', '전기/조명', '마감/공과잡비'],
-    totalEstimate: '약 2,800만원',
-    analyzedAt: '2026.04.14',
-  },
-  2: {
-    constructionType: '주거 45평 전체',
-    selectedProcesses: ['철거', '설비', '전기/조명', '목공', '도배', '바닥', '타일', '욕실', '주방', '마감/공과잡비'],
-    totalEstimate: '약 4,500만원',
-    analyzedAt: '2026.04.10',
-  },
-};
diff --git a/apps/web/src/app/(main)/history/_mocks/history.mock.ts b/apps/web/src/app/(main)/history/_mocks/history.mock.ts
deleted file mode 100644
index 45912cc..0000000
--- a/apps/web/src/app/(main)/history/_mocks/history.mock.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { type HistoryRow } from '../_types/history.types';
-
-export const MOCK_HISTORY_ROWS: HistoryRow[] = [
-  {
-    id: 5,
-    date: '2026-04-15',
-    analysisType: '리스크 진단',
-    constructionType: '주거 32평 리모델링',
-    vendor: 'A업체',
-    risk: { type: 'danger', label: '누락 4건' },
-    status: '완료',
-  },
-  {
-    id: 4,
-    date: '2026-04-14',
-    analysisType: '가견적서 생성',
-    constructionType: '상업 20평 신규',
-    vendor: '—',
-    risk: { type: 'none' },
-    status: '완료',
-  },
-  {
-    id: 3,
-    date: '2026-04-12',
-    analysisType: '리스크 진단',
-    constructionType: '주거 28평 리모델링',
-    vendor: 'B업체',
-    risk: { type: 'danger', label: '누락 2건' },
-    status: '완료',
-  },
-  {
-    id: 2,
-    date: '2026-04-10',
-    analysisType: '가견적서 생성',
-    constructionType: '주거 45평 전체',
-    vendor: '—',
-    risk: { type: 'none' },
-    status: '완료',
-  },
-  {
-    id: 1,
-    date: '2026-04-05',
-    analysisType: '리스크 진단',
-    constructionType: '주거 32평 부분',
-    vendor: 'D업체',
-    risk: { type: 'safe', label: '정상' },
-    status: '완료',
-  },
-];
diff --git a/apps/web/src/app/(main)/history/_types/history.types.ts b/apps/web/src/app/(main)/history/_types/history.types.ts
index bfe2984..d73964e 100644
--- a/apps/web/src/app/(main)/history/_types/history.types.ts
+++ b/apps/web/src/app/(main)/history/_types/history.types.ts
@@ -1,12 +1,11 @@
-export type RiskStatus = { type: 'danger'; label: string } | { type: 'safe'; label: string } | { type: 'none' };
+export type RiskStatus = { missing: number; unclear: number };
 export type AnalysisStatus = '완료' | '진행중' | '대기';
 
 export interface HistoryRow {
-  id: number;
+  id: string;
   date: string;
   analysisType: string;
   constructionType: string;
-  vendor: string;
   risk: RiskStatus;
   status: AnalysisStatus;
 }
diff --git a/apps/web/src/app/(main)/history/page.tsx b/apps/web/src/app/(main)/history/page.tsx
index 44b7926..7813c89 100644
--- a/apps/web/src/app/(main)/history/page.tsx
+++ b/apps/web/src/app/(main)/history/page.tsx
@@ -1,14 +1,65 @@
 import { Suspense } from 'react';
+import { getServerEstimates, getServerRiskDetections, type EstimateItem, type RiskItem } from '@/api/history';
+import { getServerMe } from '@/api/user/server';
+import { mapApiReportToDiagnosisResult } from '../analysis/_lib/mapApiReport';
 import { HistoryContent } from './_components/HistoryContent/HistoryContent';
+import { type AnalysisStatus, type HistoryRow } from './_types/history.types';
 import * as styles from './page.css';
 
-const HistoryPage = () => {
+const toDate = (iso: string) => iso.slice(0, 10);
+
+const buildHistoryRows = (estimates: EstimateItem[], risks: RiskItem[]): HistoryRow[] => {
+  interface Entry {
+    createdAt: string;
+    row: HistoryRow;
+  }
+
+  const estimateEntries: Entry[] = estimates.map((item) => ({
+    createdAt: item.created_at,
+    row: {
+      id: item.id,
+      date: toDate(item.created_at),
+      analysisType: '가견적서 생성',
+      constructionType: `${item.input.공간유형} ${item.input.평수}평`,
+      risk: { missing: 0, unclear: 0 },
+      status: '완료' as AnalysisStatus,
+    },
+  }));
+
+  const riskEntries: Entry[] = risks.map((item) => {
+    const diagnosis = mapApiReportToDiagnosisResult(item.result.report);
+    return {
+      createdAt: item.created_at,
+      row: {
+        id: item.id,
+        date: toDate(item.created_at),
+        analysisType: '리스크 진단',
+        constructionType: `${item.input.spaceType} ${item.input.pyeong}평`,
+        risk: {
+          missing: diagnosis.missingCount,
+          unclear: diagnosis.riskCount,
+        },
+        status: '완료' as AnalysisStatus,
+      },
+    };
+  });
+
+  return [...estimateEntries, ...riskEntries]
+    .sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+    .map((entry) => entry.row);
+};
+
+const HistoryPage = async () => {
+  const user = await getServerMe();
+  const [estimates, risks] = await Promise.all([getServerEstimates(user.id), getServerRiskDetections(user.id)]);
+  const rows = buildHistoryRows(estimates, risks);
+
   return (
     <div className={styles.page}>
       <div className={styles.content}>
         <h1 className={styles.title}>분석 이력</h1>
         <Suspense fallback={null}>
-          <HistoryContent />
+          <HistoryContent rows={rows} />
         </Suspense>
       </div>
     </div>
diff --git a/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.css.ts b/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.css.ts
index 385de11..76984fe 100644
--- a/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.css.ts
+++ b/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.css.ts
@@ -80,18 +80,6 @@ export const th = style({
   whiteSpace: 'nowrap',
 });
 
-export const thInner = style({
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: '2px',
-  cursor: 'pointer',
-  selectors: {
-    '&:hover': {
-      color: vars.color.neutral.n600,
-    },
-  },
-});
-
 export const tr = style({
   borderBottom: `1px solid ${vars.color.neutral.n200}`,
   cursor: 'pointer',
diff --git a/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.tsx b/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.tsx
index 143d980..e9f9571 100644
--- a/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.tsx
+++ b/apps/web/src/app/(main)/home/_components/HistoryTable/HistoryTable.tsx
@@ -48,10 +48,7 @@ export const HistoryTable = ({ rows, onDelete }: HistoryTableProps) => {
           <tr>
             {COLUMNS.map((col) => (
               <th key={col} className={styles.th}>
-                <span className={styles.thInner}>
-                  {col}
-                  <CaretDownSmIcon width={24} height={24} />
-                </span>
+                {col}
               </th>
             ))}
             <th className={styles.th} />
diff --git a/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.css.ts b/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.css.ts
index 84444d2..a30917f 100644
--- a/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.css.ts
+++ b/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.css.ts
@@ -6,7 +6,7 @@ export const card = style({
   backgroundColor: vars.color.white,
   borderRadius: '20px',
   boxShadow: '0px 2px 1px 0px rgba(0, 0, 0, 0.12)',
-  padding: '28px 14px',
+  padding: '28px 28px 28px 14px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -28,12 +28,6 @@ export const label = style({
   whiteSpace: 'nowrap',
 });
 
-export const right = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '15px',
-});
-
 export const count = style({
   fontSize: '24px',
   fontWeight: vars.typography.fontWeight.extraBold,
@@ -55,9 +49,3 @@ export const countDanger = style({
   whiteSpace: 'nowrap',
   color: vars.color.semantic.danger,
 });
-
-export const arrow = style({
-  display: 'flex',
-  alignItems: 'center',
-  color: vars.color.neutral.n400,
-});
diff --git a/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.tsx b/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.tsx
index 3c9b101..aedc067 100644
--- a/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.tsx
+++ b/apps/web/src/app/(main)/home/_components/SummaryCard/SummaryCard.tsx
@@ -1,4 +1,3 @@
-import { ArrowIcon } from '@muneo/design-system';
 import { type ReactNode } from 'react';
 import * as styles from './SummaryCard.css';
 
@@ -16,14 +15,9 @@ export const SummaryCard = ({ icon, label, count, danger = false }: SummaryCardP
         {icon}
         <span className={styles.label}>{label}</span>
       </div>
-      <div className={styles.right}>
-        <span className={danger ? styles.countDanger : styles.count}>
-          {typeof count === 'number' ? `${count}건` : count}
-        </span>
-        <span className={styles.arrow}>
-          <ArrowIcon width={24} height={24} />
-        </span>
-      </div>
+      <span className={danger ? styles.countDanger : styles.count}>
+        {typeof count === 'number' ? `${count}건` : count}
+      </span>
     </div>
   );
 };
diff --git a/apps/web/src/app/(main)/home/page.tsx b/apps/web/src/app/(main)/home/page.tsx
index c44d775..6d0ab61 100644
--- a/apps/web/src/app/(main)/home/page.tsx
+++ b/apps/web/src/app/(main)/home/page.tsx
@@ -38,6 +38,7 @@ const buildView = (estimates: EstimateItem[], risks: RiskItem[]) => {
 
   const rows = [...estimateEntries, ...riskEntries]
     .sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+    .slice(0, 10)
     .map((entry) => entry.row);
 
   const stats: SummaryStats = {
diff --git a/apps/web/src/app/(main)/layout.tsx b/apps/web/src/app/(main)/layout.tsx
index d780ce3..228c47d 100644
--- a/apps/web/src/app/(main)/layout.tsx
+++ b/apps/web/src/app/(main)/layout.tsx
@@ -5,6 +5,7 @@ import { isApiError } from '@/api/errors';
 import { getServerMe } from '@/api/user/server';
 import { type AuthUser } from '@/types/auth';
 import { SidebarShell } from './_components/SidebarShell';
+import { UserProvider } from './_components/UserProvider/UserProvider';
 import * as styles from './layout.css';
 
 export const metadata: Metadata = {
@@ -28,10 +29,12 @@ const MainLayout = async ({ children }: { children: ReactNode }) => {
   }
 
   return (
-    <div className={styles.wrapper}>
-      <SidebarShell className={styles.sidebar} user={user} />
-      <main className={styles.main}>{children}</main>
-    </div>
+    <UserProvider user={user}>
+      <div className={styles.wrapper}>
+        <SidebarShell className={styles.sidebar} user={user} />
+        <main className={styles.main}>{children}</main>
+      </div>
+    </UserProvider>
   );
 };
 
diff --git a/apps/web/src/store/authStore.ts b/apps/web/src/store/authStore.ts
deleted file mode 100644
index 234abee..0000000
--- a/apps/web/src/store/authStore.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { type AuthUser } from '@/types/auth';
-
-interface AuthStore {
-  user: AuthUser | null;
-  setUser: (user: AuthUser) => void;
-  clearUser: () => void;
-}
-
-export const useAuthStore = create<AuthStore>()(
-  persist(
-    (set) => ({
-      user: null,
-      setUser: (user) => set({ user }),
-      clearUser: () => set({ user: null }),
-    }),
-    { name: 'muneo-auth' }
-  )
-);