diff --git a/src/entities/project/ui/prompt-card/PromptCard.tsx b/src/entities/project/ui/prompt-card/PromptCard.tsx
index 1c0bc5f..0b9c1ab 100644
--- a/src/entities/project/ui/prompt-card/PromptCard.tsx
+++ b/src/entities/project/ui/prompt-card/PromptCard.tsx
@@ -23,8 +23,8 @@ const PromptLine = ({ line }: { line: string }) => {
       color={color}
       display="block"
       fontFamily="mono"
-      fontSize="sm"
-      lineHeight="1.4"
+      fontSize={{ base: "xs", md: "sm" }}
+      lineHeight="1.5"
     >
       {line}
     </Text>
@@ -47,28 +47,35 @@ export const PromptCard = ({
       bg="neutral.50"
       border="1px solid"
       borderColor="neutral.50"
-      borderRadius="2xl"
+      borderRadius={{ base: "xl", md: "2xl" }}
       overflow="hidden"
       w="full"
     >
       <Flex
-        align="center"
+        align={{ base: "flex-start", md: "center" }}
         borderBottom="1px solid"
         borderBottomColor="neutral.50"
+        direction="row"
+        gap={{ base: 3, md: 0 }}
         justify="space-between"
-        pb="17px"
-        pt="16px"
-        px={6}
+        pb={{ base: 3, md: "17px" }}
+        pt={{ base: 3, md: "16px" }}
+        px={{ base: 4, md: 6 }}
       >
         <Flex align="center" gap={2}>
           <DocumentTextIcon boxSize={3} color="neutral.600" />
-          <Text color="neutral.600" fontSize="xs" fontWeight="medium">
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "2xs", md: "xs" }}
+            fontWeight="medium"
+          >
             {label}
           </Text>
         </Flex>
 
         <Box
           as="button"
+          alignSelf={{ base: "flex-start", md: "auto" }}
           bg="white"
           border="1px solid"
           borderColor="neutral.50"
@@ -76,17 +83,17 @@ export const PromptCard = ({
           boxShadow="0px 1px 2px 0px rgba(0,0,0,0.05)"
           cursor="pointer"
           onClick={onCopy}
-          px="13px"
-          py="7px"
+          px={{ base: 3, md: "13px" }}
+          py={{ base: 1.5, md: "7px" }}
           _hover={{ boxShadow: "0px 2px 4px 0px rgba(0,0,0,0.08)" }}
         >
-          <Flex align="center" gap="6px">
+          <Flex align="center" gap={{ base: 1.5, md: "6px" }}>
             <CopyIcon boxSize={3} color={copied ? "seed" : "neutral.900"} />
             <Text
               color={copied ? "seed" : "neutral.900"}
-              fontSize="xs"
+              fontSize={{ base: "2xs", md: "xs" }}
               fontWeight="semibold"
-              lineHeight="16px"
+              lineHeight="1.4"
             >
               {copied ? "복사됨 ✓" : "복사하기"}
             </Text>
@@ -94,15 +101,15 @@ export const PromptCard = ({
         </Box>
       </Flex>
 
-      <Box bg="neutral.50" p="28px">
+      <Box bg="neutral.50" p={{ base: 4, md: "28px" }}>
         {isPrompt ? (
           lines.map((line, i) => <PromptLine key={i} line={line} />)
         ) : (
           <Text
             color="neutral.900"
-            fontSize="sm"
+            fontSize={{ base: "xs", md: "sm" }}
             fontWeight="medium"
-            lineHeight="1.4"
+            lineHeight="1.5"
             whiteSpace="pre-wrap"
           >
             {content}
diff --git a/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx b/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx
index 308ec3c..2f56ec2 100644
--- a/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx
+++ b/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx
@@ -9,77 +9,90 @@ type Props = {
 
 export const UploadStepIndicator = ({ current, stepCodes }: Props) => {
   return (
-    <Box position="relative" px="88px" w="full">
+    <Box overflowX={{ base: "auto", md: "visible" }} w="full">
       <Flex
-        align="center"
-        justify="space-between"
-        left="88px"
-        maxW="672px"
-        position="absolute"
-        px={12}
-        right="88px"
-        top="22px"
+        align="flex-start"
+        justify={{ base: "flex-start", md: "space-between" }}
+        maxW={{ base: "none", md: "672px" }}
+        mx={{ base: 0, md: "auto" }}
+        px={{ base: 4, md: 0 }}
+        w={{ base: "max-content", md: "full" }}
       >
-        {Array.from({ length: stepCodes.length - 1 }, (_, i) => (
-          <Box key={i} bg="neutral.100" flex={1} h="2px" />
-        ))}
-      </Flex>
-
-      <Flex align="flex-start" justify="space-between" maxW="672px" w="full">
         {stepCodes.map((code, i) => {
           const stepId = i + 1;
           const isActive = stepId === current;
           const isDone = stepId < current;
+          const isLast = i === stepCodes.length - 1;
 
           return (
-            <Flex align="center" direction="column" gap={3} key={code} w={24}>
+            <Flex align="flex-start" flexShrink={0} key={code}>
               <Flex
                 align="center"
-                boxSize={12}
-                justify="center"
-                position="relative"
+                direction="column"
+                gap={{ base: 2, md: 3 }}
+                px={{ base: 2, md: 0 }}
+                w={{ base: "88px", md: "96px" }}
               >
-                <Box
-                  bg={isActive ? "seed" : "neutral.100"}
-                  borderRadius="full"
-                  bottom={0}
-                  left={0}
-                  opacity={isActive ? 0.3 : 0.6}
-                  position="absolute"
-                  right={0}
-                  top={0}
-                />
                 <Flex
                   align="center"
-                  bg={isActive || isDone ? "seed" : "neutral.300"}
-                  borderRadius="full"
-                  boxSize={7}
+                  boxSize={{ base: 10, md: 12 }}
                   justify="center"
                   position="relative"
-                  zIndex={1}
                 >
-                  <Text
-                    color="white"
-                    fontSize="xs"
-                    fontWeight="bold"
-                    lineHeight="16px"
-                    textAlign="center"
+                  <Box
+                    bg={isActive ? "seed" : "neutral.100"}
+                    borderRadius="full"
+                    bottom={0}
+                    left={0}
+                    opacity={isActive ? 0.3 : 0.6}
+                    position="absolute"
+                    right={0}
+                    top={0}
+                  />
+                  <Flex
+                    align="center"
+                    bg={isActive || isDone ? "seed" : "neutral.300"}
+                    borderRadius="full"
+                    boxSize={{ base: 6, md: 7 }}
+                    justify="center"
+                    position="relative"
+                    zIndex={1}
                   >
-                    {stepId}
-                  </Text>
+                    <Text
+                      color="white"
+                      fontSize={{ base: "2xs", md: "xs" }}
+                      fontWeight="bold"
+                      lineHeight="1"
+                      textAlign="center"
+                    >
+                      {stepId}
+                    </Text>
+                  </Flex>
                 </Flex>
+
+                <Text
+                  color={isActive ? "neutral.900" : "neutral.600"}
+                  fontSize={{ base: "xs", md: "sm" }}
+                  fontWeight={isActive ? "bold" : "medium"}
+                  lineHeight={{ base: "1.4", md: "20px" }}
+                  textAlign="center"
+                  whiteSpace="normal"
+                  wordBreak="keep-all"
+                >
+                  {ROADMAP_STEP_NAMES[code] ?? code}
+                </Text>
               </Flex>
 
-              <Text
-                color={isActive ? "neutral.900" : "neutral.600"}
-                fontSize="sm"
-                fontWeight={isActive ? "bold" : "medium"}
-                lineHeight="20px"
-                textAlign="center"
-                wordBreak="keep-all"
-              >
-                {ROADMAP_STEP_NAMES[code] ?? code}
-              </Text>
+              {!isLast && (
+                <Box
+                  alignSelf="flex-start"
+                  bg="neutral.100"
+                  flexShrink={0}
+                  h="2px"
+                  mt={{ base: "19px", md: "23px" }}
+                  w={{ base: "24px", md: "48px" }}
+                />
+              )}
             </Flex>
           );
         })}
diff --git a/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx b/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx
index fa20850..0f9bf86 100644
--- a/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx
+++ b/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx
@@ -7,10 +7,10 @@ type Props = {
 
 export const UploadStepResultInput = ({ value, onChange }: Props) => {
   return (
-    <VStack align="flex-start" gap={6} w="full">
+    <VStack align="flex-start" gap={{ base: 4, md: 6 }} w="full">
       <Text
         color="neutral.900"
-        fontSize="2xl"
+        fontSize={{ base: "xl", md: "2xl" }}
         fontWeight="bold"
         lineHeight="1.4"
       >
@@ -28,11 +28,11 @@ export const UploadStepResultInput = ({ value, onChange }: Props) => {
           border="none"
           borderRadius="xl"
           color="neutral.900"
-          fontSize="sm"
+          fontSize={{ base: "xs", md: "sm" }}
           fontWeight="medium"
           minH={60}
           onChange={(e) => onChange(e.target.value)}
-          p={6}
+          p={{ base: 4, md: 6 }}
           placeholder="이전 단계 프롬프트로 얻은 AI의 답변을 여기에 붙여넣어 주세요. 정보를 입력하면 다음 단계 로드맵이 더욱 정교해집니다."
           resize="vertical"
           value={value}
@@ -41,14 +41,19 @@ export const UploadStepResultInput = ({ value, onChange }: Props) => {
           backdropFilter="blur(2px)"
           bg="rgba(255,255,255,0.6)"
           borderRadius="4px"
-          bottom="20px"
+          bottom={{ base: "16px", md: "20px" }}
           position="absolute"
           px={2}
           py={1}
-          right="20px"
+          right={{ base: "16px", md: "20px" }}
         >
           <Text color="neutral.600" fontSize="xs" fontWeight="medium">
-            Ctrl + V
+            <Box as="span" display={{ base: "none", md: "inline" }}>
+              Ctrl + V
+            </Box>
+            <Box as="span" display={{ base: "inline", md: "none" }}>
+              붙여넣기
+            </Box>
           </Text>
         </Box>
       </Box>
diff --git a/src/features/upload/ui/section/UploadLoadingSection.tsx b/src/features/upload/ui/section/UploadLoadingSection.tsx
index 0e4023c..777cfe6 100644
--- a/src/features/upload/ui/section/UploadLoadingSection.tsx
+++ b/src/features/upload/ui/section/UploadLoadingSection.tsx
@@ -25,8 +25,8 @@ export const UploadLoadingSection = ({
       <Box
         bg="seed.subtle"
         borderRadius="full"
-        filter="blur(32px)"
         boxSize="800px"
+        filter="blur(32px)"
         left="50%"
         opacity={0.5}
         position="absolute"
@@ -36,11 +36,11 @@ export const UploadLoadingSection = ({
       />
 
       <VStack
-        gap={6}
+        gap={{ base: 4, md: 6 }}
         left="50%"
         maxW="576px"
         position="absolute"
-        px={6}
+        px={{ base: 4, md: 6 }}
         textAlign="center"
         top="50%"
         transform="translate(-50%, -50%)"
@@ -49,35 +49,47 @@ export const UploadLoadingSection = ({
       >
         <Image
           alt="background circle"
-          src={AbstractBackgroundCircle}
           boxSize={30}
           objectFit="contain"
+          src={AbstractBackgroundCircle}
         />
 
         <SproutAnimation progress={progress} />
 
-        <VStack gap={4}>
+        <VStack gap={{ base: 3, md: 4 }}>
           <Text
             color="neutral.900"
-            fontSize="4xl"
+            fontSize={{ base: "2xl", md: "4xl" }}
             fontWeight="bold"
-            lineHeight="40px"
+            lineHeight={{ base: "1.35", md: "40px" }}
           >
             AI가 과제의 핵심을
             <br />
             분석하고 있어요
           </Text>
-          <Text color="neutral.600" fontSize="lg" fontWeight="medium">
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "sm", md: "lg" }}
+            fontWeight="medium"
+          >
             분석이 완료되면 나만의 로드맵이 펼쳐집니다.
           </Text>
         </VStack>
 
-        <VStack gap={3} maxW={80} w="full">
+        <VStack gap={{ base: 2, md: 3 }} maxW={80} w="full">
           <Flex align="center" justify="space-between" w="full">
-            <Text color="seed" fontSize="xs" fontWeight="medium">
+            <Text
+              color="seed"
+              fontSize={{ base: "2xs", md: "xs" }}
+              fontWeight="medium"
+            >
               {currentStepMessage}
             </Text>
-            <Text color="seed" fontSize="xs" fontWeight="medium">
+            <Text
+              color="seed"
+              fontSize={{ base: "2xs", md: "xs" }}
+              fontWeight="medium"
+            >
               {Math.round(progress)}%
             </Text>
           </Flex>
@@ -98,7 +110,11 @@ export const UploadLoadingSection = ({
             />
           </Box>
 
-          <Text color="neutral.600" fontSize="xs" pt={2}>
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "2xs", md: "xs" }}
+            pt={{ base: 1, md: 2 }}
+          >
             잠시만 기다려주세요, 거의 다 되었습니다.
           </Text>
         </VStack>
diff --git a/src/features/upload/ui/section/UploadStepContentSection.tsx b/src/features/upload/ui/section/UploadStepContentSection.tsx
index a18ef33..962c6be 100644
--- a/src/features/upload/ui/section/UploadStepContentSection.tsx
+++ b/src/features/upload/ui/section/UploadStepContentSection.tsx
@@ -55,19 +55,35 @@ export const UploadStepContentSection = ({ projectId, stepNum }: Props) => {
     <Box
       bg="white"
       border="1px solid white"
-      borderRadius="4xl"
+      borderRadius={{ base: "3xl", md: "4xl" }}
       boxShadow="0px 20px 60px -10px rgba(0,0,0,0.08)"
       overflow="hidden"
     >
-      <VStack align="flex-start" gap={8} p={12}>
-        <VStack align="flex-start" gap="11px" w="full">
+      <VStack
+        align="flex-start"
+        gap={{ base: 6, md: 8 }}
+        p={{ base: 4, md: 12 }}
+      >
+        <VStack align="flex-start" gap={{ base: 2, md: "11px" }} w="full">
           <Text color="seed" fontSize="xs" fontWeight="bold">
             Step {stepNum}
           </Text>
-          <Text color="neutral.900" fontSize="2xl" fontWeight="bold">
+          <Text
+            color="neutral.900"
+            fontSize={{ base: "xl", md: "2xl" }}
+            fontWeight="bold"
+            lineHeight="1.4"
+            wordBreak="keep-all"
+          >
             {stepName}
           </Text>
-          <Text color="neutral.600" fontWeight="regular" lineHeight="1.4">
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "sm", md: "md" }}
+            fontWeight="regular"
+            lineHeight="1.5"
+            wordBreak="keep-all"
+          >
             AI가 과제 주제를 분석하여 최적의 자료 조사를 위한 프롬프트를
             생성했습니다.
             <br />이 프롬프트를 사용하여 고품질의 레퍼런스를 확보하세요.
@@ -83,7 +99,7 @@ export const UploadStepContentSection = ({ projectId, stepNum }: Props) => {
             overflow="hidden"
             w="full"
           >
-            <Box bg="neutral.50" p="28px">
+            <Box bg="neutral.50" p={{ base: 4, md: "28px" }}>
               <Text
                 color="neutral.300"
                 fontFamily="mono"
@@ -106,16 +122,22 @@ export const UploadStepContentSection = ({ projectId, stepNum }: Props) => {
         ) : null}
 
         {formatPrompt && (
-          <VStack align="flex-start" gap={6} w="full">
+          <VStack align="flex-start" gap={{ base: 4, md: 6 }} w="full">
             <Text
               color="neutral.900"
-              fontSize="2xl"
+              fontSize={{ base: "xl", md: "2xl" }}
               fontWeight="bold"
               lineHeight="1.4"
             >
               결과 추출
             </Text>
-            <Text color="neutral.600" fontWeight="regular" lineHeight="1.4">
+            <Text
+              color="neutral.600"
+              fontSize={{ base: "sm", md: "md" }}
+              fontWeight="regular"
+              lineHeight="1.5"
+              wordBreak="keep-all"
+            >
               이 프롬프트를 사용하여 ai와 함께 작업한 결과를 추출해주세요.
             </Text>
             <PromptCard
@@ -134,20 +156,27 @@ export const UploadStepContentSection = ({ projectId, stepNum }: Props) => {
           onChange={handleResultTextChange}
         />
 
-        <Flex justify="flex-end" pt={8} w="full">
+        <Flex
+          justify={{ base: "stretch", md: "flex-end" }}
+          pt={{ base: 2, md: 8 }}
+          w="full"
+        >
           <Button
             bg="seed"
             borderRadius="xl"
             color="white"
             disabled={!resultText.trim() || isSubmitting}
+            fontSize={{ base: "sm", md: "md" }}
             fontWeight="bold"
             gap={1}
+            h={{ base: 12, md: "auto" }}
             onClick={() => {
               void submitStepResult(resultText);
             }}
-            opacity={resultText.trim() && !isSubmitting ? 1 : 0.5}
-            px={10}
-            py={4}
+            px={{ base: 6, md: 10 }}
+            py={{ base: 3, md: 4 }}
+            w={{ base: "full", md: "auto" }}
+            _disabled={{ opacity: 0.5 }}
             _hover={{
               opacity: resultText.trim() && !isSubmitting ? 0.85 : 0.5,
             }}
diff --git a/src/features/upload/ui/section/UploadStepHeaderSection.tsx b/src/features/upload/ui/section/UploadStepHeaderSection.tsx
index d542118..d652f3d 100644
--- a/src/features/upload/ui/section/UploadStepHeaderSection.tsx
+++ b/src/features/upload/ui/section/UploadStepHeaderSection.tsx
@@ -17,10 +17,10 @@ export const UploadStepHeaderSection = ({ projectId, stepNum }: Props) => {
 
   return (
     <>
-      <VStack align="flex-start" gap={6}>
+      <VStack align="flex-start" gap={{ base: 4, md: 6 }} w="full">
         <BackButton label="이전 단계로" onClick={goToPrevStep} />
 
-        <VStack align="flex-start" gap={2}>
+        <VStack align="flex-start" gap={2} w="full">
           <Box
             bg="neutral.50"
             border="1px solid white"
@@ -28,8 +28,8 @@ export const UploadStepHeaderSection = ({ projectId, stepNum }: Props) => {
             color="neutral.600"
             fontSize="2xs"
             fontWeight="regular"
-            px="9px"
-            py="5px"
+            px={{ base: 2, md: "9px" }}
+            py={{ base: 1, md: "5px" }}
           >
             {project?.roadmapType
               ? (ROADMAP_TYPE_LABEL[project.roadmapType] ?? project.roadmapType)
@@ -37,9 +37,11 @@ export const UploadStepHeaderSection = ({ projectId, stepNum }: Props) => {
           </Box>
           <Text
             color="neutral.900"
-            fontSize="3xl"
+            fontSize={{ base: "xl", md: "3xl" }}
             fontWeight="bold"
             lineHeight="1.4"
+            w="full"
+            wordBreak="keep-all"
           >
             {project?.title}
           </Text>
diff --git a/src/pages/upload/_step/UploadStepPage.tsx b/src/pages/upload/_step/UploadStepPage.tsx
index 8fb5756..f985015 100644
--- a/src/pages/upload/_step/UploadStepPage.tsx
+++ b/src/pages/upload/_step/UploadStepPage.tsx
@@ -33,8 +33,21 @@ export default function UploadStepPage() {
   }
 
   return (
-    <Flex bg="white" direction="column" minH="100vh" pb="127px" pt="80px">
-      <Flex direction="column" gap={10} mx="auto" px={6} w="full" maxW="896px">
+    <Flex
+      bg="white"
+      direction="column"
+      minH="100vh"
+      pb={{ base: "72px", md: "127px" }}
+      pt={{ base: "40px", md: "80px" }}
+    >
+      <Flex
+        direction="column"
+        gap={{ base: 6, md: 10 }}
+        maxW="896px"
+        mx="auto"
+        px={{ base: 4, md: 6 }}
+        w="full"
+      >
         <UploadStepHeaderSection projectId={projectId} stepNum={stepNum} />
 
         <UploadStepContentSection projectId={projectId} stepNum={stepNum} />