diff --git a/client/src/components/ComparePage/ComparisonActionButtons.tsx b/client/src/components/ComparePage/ComparisonActionButtons.tsx
index fc82e96..133ad37 100644
--- a/client/src/components/ComparePage/ComparisonActionButtons.tsx
+++ b/client/src/components/ComparePage/ComparisonActionButtons.tsx
@@ -5,6 +5,7 @@ interface ComparisonActionButtonsProps {
   rightButtonText?: string;
   onLeftClick: () => void;
   onRightClick: () => void;
+  className?: string;
 }
 
 const ComparisonActionButtons: React.FC<ComparisonActionButtonsProps> = ({
@@ -12,10 +13,11 @@ const ComparisonActionButtons: React.FC<ComparisonActionButtonsProps> = ({
   rightButtonText,
   onLeftClick,
   onRightClick,
+  className = '',
 }) => {
   return (
     <div
-      className="flex flex-col justify-center items-center text-center gap-6 fixed bottom-[50px] max-w-[560px]"
+      className={`flex flex-col justify-center items-center text-center gap-6 ${className}`}
       style={{ width: 'calc(100% - 40px)' }}
     >
       <div className="flex w-full">
diff --git a/client/src/components/ComparePage/ComparisonResult.tsx b/client/src/components/ComparePage/ComparisonResult.tsx
index c4f3653..72bb680 100644
--- a/client/src/components/ComparePage/ComparisonResult.tsx
+++ b/client/src/components/ComparePage/ComparisonResult.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import togetherIcon from '@/assets/image/card_family.png';
 import premiumAddonsIcon from '@/assets/icon/special.png';
 import mediaAddonsIcon from '@/assets/icon/media.png';
@@ -22,6 +22,7 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [pendingLink, setPendingLink] = useState<string | null>(null);
+  const [showButtons, setShowButtons] = useState(false);
 
   const handleDetailClick = (detailUrl?: string) => {
     if (detailUrl) {
@@ -29,6 +30,25 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
       setIsModalOpen(true); // 모달 먼저 띄우기
     }
   };
+  useEffect(() => {
+    const scrollContainer = document.querySelector('.scroll-target');
+    if (!scrollContainer) return;
+
+    const handleScroll = () => {
+      const scrollTop = scrollContainer.scrollTop;
+      const containerHeight = scrollContainer.clientHeight;
+      const scrollHeight = scrollContainer.scrollHeight;
+
+      if (scrollTop + containerHeight >= scrollHeight - 100) {
+        setShowButtons(true);
+      } else {
+        setShowButtons(false);
+      }
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
+  }, []);
 
   // 데이터 값 계산
   const leftDataValue = selectedLeft
@@ -159,19 +179,27 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
           />
         </div>
       </div>
-
       <ComparisonActionButtons
         leftButtonText={selectedLeft ? '자세히 보기' : ''}
         rightButtonText={selectedRight ? '자세히 보기' : ''}
         onLeftClick={() => handleDetailClick(selectedLeft?.detailUrl)}
         onRightClick={() => handleDetailClick(selectedRight?.detailUrl)}
+        className={`fixed bottom-[50px] max-w-[560px] transition-all duration-500
+    ${showButtons ? 'opacity-100 translate-y-0 pointer-events-auto' : 'opacity-0 translate-y-5 pointer-events-none'}
+  `}
       />
 
       <Modal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
         modalTitle="요금제 자세히 알아보기"
-        modalDesc="요금제 상세 페이지는 외부 사이트로 연결됩니다. 계속 진행하시겠습니까?"
+        modalDesc={
+          <>
+            요금제 상세 페이지는 외부 사이트로 연결됩니다.
+            <br />
+            계속 진행하시겠습니까?
+          </>
+        }
       >
         <Button
           fullWidth
@@ -179,7 +207,7 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
           size="medium"
           onClick={() => setIsModalOpen(false)}
         >
-          취소
+          닫기
         </Button>
         <Button
           fullWidth
diff --git a/client/src/components/common/Modal.tsx b/client/src/components/common/Modal.tsx
index 4c0edc0..8991768 100644
--- a/client/src/components/common/Modal.tsx
+++ b/client/src/components/common/Modal.tsx
@@ -5,7 +5,7 @@ interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   modalTitle: string;
-  modalDesc?: string;
+  modalDesc?: React.ReactNode;
   children: React.ReactNode;
 }
 
diff --git a/client/src/components/common/ToastAlert.tsx b/client/src/components/common/ToastAlert.tsx
new file mode 100644
index 0000000..05200f2
--- /dev/null
+++ b/client/src/components/common/ToastAlert.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ToastAlertProps {
+  message: string;
+  onClose?: () => void;
+}
+
+function ToastAlert({ message, onClose }: ToastAlertProps) {
+  const [visible, setVisible] = useState(true);
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsClosing(true);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleAnimationEnd = () => {
+    if (isClosing) {
+      setVisible(false);
+      if (onClose) onClose();
+    }
+  };
+
+  if (!visible) return null;
+
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        top: '15px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: 'calc(100% - 20px)',
+        maxWidth: '560px',
+        padding: '16px 20px',
+        backgroundColor: 'rgba(255, 255, 255, 1)',
+        borderRadius: '12px',
+        boxShadow: '0 0 10px rgba(0, 0, 0, 0.08)',
+        fontSize: '14px',
+        lineHeight: '19px',
+        textAlign: 'center',
+        color: '#6B7280',
+        zIndex: 9999,
+        animation: isClosing
+          ? 'slideUp 0.3s ease forwards'
+          : 'slideDown 0.3s ease forwards',
+        whiteSpace: 'pre-line',
+      }}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      {message}
+      <style>
+        {`
+          @keyframes slideDown {
+            from {
+              opacity: 0.7;
+              transform: translate(-50%, -20px);
+            }
+            to {
+              opacity: 1;
+              transform: translate(-50%, 0);
+            }
+          }
+
+          @keyframes slideUp {
+            from {
+              opacity: 1;
+              transform: translate(-50%, 0);
+            }
+            to {
+              opacity: 0;
+              transform: translate(-50%, -20px);
+            }
+          }
+        `}
+      </style>
+    </div>,
+    document.body,
+  );
+}
+
+export default ToastAlert;
diff --git a/client/src/pages/ChatbotPage.tsx b/client/src/pages/ChatbotPage.tsx
index eda435a..06a4c8c 100644
--- a/client/src/pages/ChatbotPage.tsx
+++ b/client/src/pages/ChatbotPage.tsx
@@ -18,6 +18,7 @@ import Modal from '@/components/common/Modal';
 import Button from '@/components/common/Button';
 import LoadingSpinner from '@/components/common/LoadingSpinner';
 import type { UserProfile } from '@/utils/chatStorage';
+import ToastAlert from '@/components/common/ToastAlert';
 
 // 사용자 정보 타입 제거 (chatStorage에서 import)
 
@@ -81,7 +82,9 @@ const MemoizedInputBox = React.memo(InputBox);
 const MemoizedUserBubble = React.memo(UserBubble);
 const MemoizedBotBubbleFrame = React.memo(BotBubbleFrame);
 const MemoizedLoadingBubble = React.memo(LoadingBubble);
-
+const isMobile =
+  /iPhone|iPad|iPod|Android/.test(navigator.userAgent) &&
+  !/Macintosh|Windows/.test(navigator.userAgent);
 const ChatbotPage = () => {
   const [input, setInput] = useState('');
   const {
@@ -102,7 +105,7 @@ const ChatbotPage = () => {
   const [showBackModal, setShowBackModal] = useState(false);
   const [showCallModal, setShowCallModal] = useState(false);
   const hasInitializedForUrlParams = useRef(false); // URL 파라미터 초기화 여부 추적
-
+  const [toastMessage, setToastMessage] = useState('');
   // 사용자 정보 확인: URL 파라미터에서만 읽음 - 메모이제이션으로 최적화
   const urlUserProfile = useMemo(
     () => parseUserProfileFromURL(searchParams),
@@ -456,7 +459,7 @@ const ChatbotPage = () => {
           fullWidth
           onClick={handleClose}
         >
-          돌아가기
+          닫기
         </Button>
 
         <Button
@@ -471,12 +474,22 @@ const ChatbotPage = () => {
           새로 시작하기
         </Button>
       </Modal>
-
+      {toastMessage && (
+        <ToastAlert
+          message={toastMessage}
+          onClose={() => setToastMessage('')}
+        />
+      )}
       <Modal
         isOpen={showCallModal}
         onClose={() => setShowCallModal(false)}
-        modalTitle="고객센터 080-019-7000"
-        modalDesc="상담원 연결을 시작할 경우, 이전에 진행한 상담은 모두 초기화됩니다."
+        modalTitle="고객센터 연결 | 080-019-7000"
+        modalDesc={
+          <>
+            상담원 연결을 진행할 경우, 이전에 진행한 상담은 모두 초기화됩니다.
+            <br />※ 전화 연결은 모바일 환경에서만 가능합니다.
+          </>
+        }
       >
         <Button
           variant="secondary"
@@ -484,20 +497,41 @@ const ChatbotPage = () => {
           fullWidth
           onClick={handleClose}
         >
-          돌아가기
-        </Button>
-
-        <Button
-          variant="primary"
-          size="medium"
-          fullWidth
-          onClick={() => {
-            handleNewChat();
-            handleClose();
-          }}
-        >
-          전화하기
+          닫기
         </Button>
+        {isMobile ? (
+          <a
+            href="tel:0800197000"
+            onClick={async (e) => {
+              e.stopPropagation();
+              await navigator.clipboard.writeText('0800197000');
+            }}
+            className="w-full"
+          >
+            <Button variant="primary" size="medium" fullWidth>
+              전화하기
+            </Button>
+          </a>
+        ) : (
+          <Button
+            variant="primary"
+            size="medium"
+            fullWidth
+            onClick={async () => {
+              try {
+                await navigator.clipboard.writeText('080-019-7000');
+                setToastMessage(
+                  '전화 연결 기능은 모바일에서만 지원됩니다. 고객센터 번호가 복사되었습니다.',
+                );
+              } catch {
+                setToastMessage('전화 연결 기능은 모바일에서만 지원됩니다.');
+              }
+              handleClose();
+            }}
+          >
+            전화하기
+          </Button>
+        )}
       </Modal>
     </>
   );
diff --git a/client/src/pages/ComparePage.tsx b/client/src/pages/ComparePage.tsx
index 822dc1b..aeda201 100644
--- a/client/src/pages/ComparePage.tsx
+++ b/client/src/pages/ComparePage.tsx
@@ -146,7 +146,7 @@ const ComparePage: React.FC = () => {
     <div className="h-[100dvh] flex flex-col scroll-auto">
       <Header title="요금제 비교하기" onBackClick={() => openModal()} />
 
-      <div className="flex-1 overflow-y-auto px-5 hide-scrollbar">
+      <div className="flex-1 overflow-y-auto px-5 hide-scrollbar scroll-target">
         <ComparePageTitle>
           비교하고 싶은
           <br />
diff --git a/client/src/pages/MainPage.tsx b/client/src/pages/MainPage.tsx
index f41e27c..9741080 100644
--- a/client/src/pages/MainPage.tsx
+++ b/client/src/pages/MainPage.tsx
@@ -24,94 +24,99 @@ const MainPage: React.FC = () => {
   const shouldCenter = windowHeight >= 790;
 
   return (
-    <div
-      className={`flex flex-col ${shouldCenter ? 'justify-center h-[100vh] ' : 'justify-start pt-8 pb-8'}`}
-    >
-      <div className="px-5" style={{ top: '25px' }}>
-        {/* 제목 */}
-        <FadeInUpDiv custom={0} className="mb-[37px]">
-          <h2 className="text-2xl font-semibold">
-            <span className="text-primary-pink">LG U+</span> 요금제 추천 AI 챗봇
-          </h2>
-          <h1 className="inline-block text-gradation text-[32px] font-semibold">
-            Me플러스
-          </h1>
-        </FadeInUpDiv>
+    <div className="w-full h-[100dvh] flex justify-center items-stretch overflow-hidden">
+      <div className="w-full max-w-[600px] flex flex-col overflow-hidden">
+        <div
+          className={`flex-1 overflow-y-auto px-5 pt-8 pb-8 hide-scrollbar ${
+            shouldCenter ? 'justify-center' : 'justify-start pt-8 pb-8'
+          }`}
+        >
+          {/* 제목 */}
+          <FadeInUpDiv custom={0} className="mb-[37px]">
+            <h2 className="text-2xl font-semibold">
+              <span className="text-primary-pink">LG U+</span> 요금제 추천 AI
+              챗봇
+            </h2>
+            <h1 className="inline-block text-gradation text-[32px] font-semibold">
+              Me플러스
+            </h1>
+          </FadeInUpDiv>
 
-        {/* 설명 */}
-        <FadeInUpDiv custom={1} className="flex flex-col gap-[7px] mb-[15px]">
-          <p className="text-xs text-gray500 h-[12px]">
-            밤낮없이 24시간 상담 가능
-          </p>
-          <h3 className="text-xl font-semibold">
-            내게 맞는 요금제, 지금 찾아보세요!
-          </h3>
-        </FadeInUpDiv>
+          {/* 설명 */}
+          <FadeInUpDiv custom={1} className="flex flex-col gap-[7px] mb-[15px]">
+            <p className="text-xs text-gray500 h-[12px]">
+              밤낮없이 24시간 상담 가능
+            </p>
+            <h3 className="text-xl font-semibold">
+              내게 맞는 요금제, 지금 찾아보세요!
+            </h3>
+          </FadeInUpDiv>
 
-        {/* 카드들 */}
-        <div className="flex flex-col gap-[20px]">
-          <FadeInUpDiv custom={2}>
-            <AnimatedShaker>
+          {/* 카드들 */}
+          <div className="flex flex-col gap-[20px]">
+            <FadeInUpDiv custom={2}>
+              <AnimatedShaker>
+                <LinkCard
+                  to="/chatbot"
+                  title="챗봇 상담하기"
+                  description={
+                    <>
+                      데이터 용량부터 사소한 궁금증까지
+                      <br />
+                      해결해드려요.
+                    </>
+                  }
+                  icon={chatbotIcon}
+                  variant="primary"
+                  size="large"
+                />
+              </AnimatedShaker>
+            </FadeInUpDiv>
+            <FadeInUpDiv custom={3}>
               <LinkCard
-                to="/chatbot"
-                title="챗봇 상담하기"
+                to="/plan-test"
+                title="맞춤형 요금제 찾아보기"
                 description={
                   <>
-                    데이터 용량부터 사소한 궁금증까지
+                    간단한 설문을 통해
                     <br />
-                    해결해드려요.
+                    맞춤형 요금제를 찾아드려요.
                   </>
                 }
-                icon={chatbotIcon}
-                variant="primary"
+                icon={testIcon}
+                variant="gradient"
                 size="large"
               />
-            </AnimatedShaker>
-          </FadeInUpDiv>
-          <FadeInUpDiv custom={3}>
-            <LinkCard
-              to="/plan-test"
-              title="맞춤형 요금제 찾아보기"
-              description={
-                <>
-                  간단한 설문을 통해
-                  <br />
-                  맞춤형 요금제를 찾아드려요.
-                </>
-              }
-              icon={testIcon}
-              variant="gradient"
-              size="large"
-            />
-          </FadeInUpDiv>
-          <FadeInUpDiv custom={4}>
-            <div className="flex gap-[10px] min-h-[127px]">
-              <div className="flex-[2]">
-                <LinkCard
-                  to="/compare"
-                  title="요금제 비교"
-                  description="궁금한 요금제를 한눈에 비교해봐요."
-                  icon={compareIcon}
-                  variant="gradient"
-                  size="medium"
-                />
-              </div>
-              <div className="flex-[1]">
-                <LinkCard
-                  to="/service-guide"
-                  title={
-                    <>
-                      서비스
-                      <br />
-                      가이드
-                    </>
-                  }
-                  variant="shadow"
-                  size="medium"
-                />
+            </FadeInUpDiv>
+            <FadeInUpDiv custom={4}>
+              <div className="flex gap-[10px] min-h-[127px]">
+                <div className="flex-[2]">
+                  <LinkCard
+                    to="/compare"
+                    title="요금제 비교"
+                    description="궁금한 요금제를 한눈에 비교해봐요."
+                    icon={compareIcon}
+                    variant="gradient"
+                    size="medium"
+                  />
+                </div>
+                <div className="flex-[1]">
+                  <LinkCard
+                    to="/service-guide"
+                    title={
+                      <>
+                        서비스
+                        <br />
+                        가이드
+                      </>
+                    }
+                    variant="shadow"
+                    size="medium"
+                  />
+                </div>
               </div>
-            </div>
-          </FadeInUpDiv>
+            </FadeInUpDiv>
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/pages/TestPage.tsx b/client/src/pages/TestPage.tsx
index 91c2a71..f5c617c 100644
--- a/client/src/pages/TestPage.tsx
+++ b/client/src/pages/TestPage.tsx
@@ -257,174 +257,178 @@ const TestPage = () => {
   );
 
   return (
-    <div className="px-5 flex flex-col">
-      <Header
-        title="나에게 잘 어울리는 요금제는?"
-        onBackClick={handleBackClick}
-      />
+    <div className="h-[100dvh] flex flex-col items-center overflow-hidden">
+      <div className="w-full max-w-[600px] flex-1 overflow-y-auto mt-[35px] px-5 hide-scrollbar">
+        <Header
+          title="나에게 잘 어울리는 요금제는?"
+          onBackClick={handleBackClick}
+        />
 
-      <ProgressBar
-        currentStep={currentIndex + 1}
-        totalSteps={questions.length}
-      />
+        <ProgressBar
+          currentStep={currentIndex + 1}
+          totalSteps={questions.length}
+        />
 
-      <div className="flex flex-col items-center justify-between flex-1 py-6">
-        <div className="flex flex-col items-center gap-4 w-full">
-          <IconSwitcher
-            isAnswered={isAnswered}
-            shouldBounce={shouldBounce}
-            srcAnswered={moonerAhaImage}
-            srcIdle={moonerImage}
-            alt={isAnswered ? '무너 (답변 완료)' : '무너 (대기 중)'}
-            className="w-[140px]"
-          />
+        <div className="flex flex-col items-center justify-between flex-1 py-6">
+          <div className="flex flex-col items-center gap-4 w-full">
+            <IconSwitcher
+              isAnswered={isAnswered}
+              shouldBounce={shouldBounce}
+              srcAnswered={moonerAhaImage}
+              srcIdle={moonerImage}
+              alt={isAnswered ? '무너 (답변 완료)' : '무너 (대기 중)'}
+              className="w-[140px]"
+            />
 
-          <div className="relative w-full flex justify-center">
-            <p className="text-center text-gray800 text-[20px] font-semibold w-[calc(100%-64px)]">
-              {currentQuestion.text}
-            </p>
+            <div className="relative w-full flex justify-center">
+              <p className="text-center text-gray800 text-[20px] font-semibold w-[calc(100%-64px)]">
+                {currentQuestion.text}
+              </p>
 
-            <button
-              onClick={handleBack}
-              disabled={currentIndex === 0 || isTransitioning}
-              className="absolute left-0 top-1/2 -translate-y-1/2 p-3 cursor-pointer
+              <button
+                onClick={handleBack}
+                disabled={currentIndex === 0 || isTransitioning}
+                className="absolute left-0 top-1/2 -translate-y-1/2 p-3 cursor-pointer
              transition-transform duration-200 ease-in-out
              hover:scale-130 disabled:cursor-not-allowed disabled:opacity-50"
-              style={{ willChange: 'transform' }}
-            >
-              <img src={back} alt="이전질문" className="w-[8px] h-[16px]" />
-            </button>
+                style={{ willChange: 'transform' }}
+              >
+                <img src={back} alt="이전질문" className="w-[8px] h-[16px]" />
+              </button>
 
-            <button
-              onClick={handleNext}
-              disabled={
-                currentIndex === questions.length - 1 || isTransitioning
-              }
-              className="absolute right-0 top-1/2 -translate-y-1/2 p-3 cursor-pointer             transition-transform duration-200 ease-in-out
+              <button
+                onClick={handleNext}
+                disabled={
+                  currentIndex === questions.length - 1 || isTransitioning
+                }
+                className="absolute right-0 top-1/2 -translate-y-1/2 p-3 cursor-pointer             transition-transform duration-200 ease-in-out
              hover:scale-130 disabled:cursor-not-allowed disabled:opacity-50"
-              style={{ willChange: 'transform' }}
-            >
-              <img src={next} alt="다음질문" className="w-[8px] h-[16px]" />
-            </button>
-          </div>
-
-          {currentQuestion.type === 'binary' ? (
-            <div className="flex gap-4 mt-3">
-              <SelectButton
-                label="그렇다"
-                selected={selected === 'yes'}
-                onClick={() => handleSelect('yes')}
-                type="yes"
-                disabled={isTransitioning}
-                animationDisabled={animationDisabled}
-              />
-              <SelectButton
-                label="아니다"
-                selected={selected === 'no'}
-                onClick={() => handleSelect('no')}
-                type="no"
-                disabled={isTransitioning}
-                animationDisabled={animationDisabled}
-              />
+                style={{ willChange: 'transform' }}
+              >
+                <img src={next} alt="다음질문" className="w-[8px] h-[16px]" />
+              </button>
             </div>
-          ) : (
-            <div className="flex flex-col gap-3 w-full mt-4">
-              {currentQuestion.options?.map((opt) => (
-                <SelectButton3
-                  key={opt}
-                  label={opt}
-                  selected={selected === opt}
-                  onClick={() => handleSelect(opt)}
+
+            {currentQuestion.type === 'binary' ? (
+              <div className="flex gap-4 mt-3">
+                <SelectButton
+                  label="그렇다"
+                  selected={selected === 'yes'}
+                  onClick={() => handleSelect('yes')}
+                  type="yes"
                   disabled={isTransitioning}
                   animationDisabled={animationDisabled}
                 />
-              ))}
-            </div>
-          )}
+                <SelectButton
+                  label="아니다"
+                  selected={selected === 'no'}
+                  onClick={() => handleSelect('no')}
+                  type="no"
+                  disabled={isTransitioning}
+                  animationDisabled={animationDisabled}
+                />
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3 w-full mt-4">
+                {currentQuestion.options?.map((opt) => (
+                  <SelectButton3
+                    key={opt}
+                    label={opt}
+                    selected={selected === opt}
+                    onClick={() => handleSelect(opt)}
+                    disabled={isTransitioning}
+                    animationDisabled={animationDisabled}
+                  />
+                ))}
+              </div>
+            )}
 
-          <div className="flex flex-col items-start mt-6 w-full px-4">
-            <div className="flex items-center justify-center gap-1 text-primary-pink shimmer-text">
-              <img src={tips} alt="꿀팁" className="w-[17px]" />
-              <p className="text-primary text-[12px] leading-none align-middle">
-                꿀팁
-              </p>
-            </div>
-            <p className="text-gray500 text-[11px] font-medium leading-snug mt-2">
-              <span className="text-secondary-purple-80">
-                “{currentQuestion.tip.highlight}”
-              </span>
-              {currentQuestion.tip.rest}
-            </p>{' '}
-            {allAnswered && (
-              <div className="fade-in-up fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[560px] px-4 pb-6 z-50">
-                <Button
-                  onClick={() => {
-                    const matchedRules = rules.filter((rule) =>
-                      rule.condition(selectedOptions),
-                    );
+            <div className="flex flex-col items-start mt-6 w-full px-4">
+              <div className="flex items-center justify-center gap-1 text-primary-pink shimmer-text">
+                <img src={tips} alt="꿀팁" className="w-[17px]" />
+                <p className="text-primary text-[12px] leading-none align-middle">
+                  꿀팁
+                </p>
+              </div>
+              <p className="text-gray500 text-[11px] font-medium leading-snug mt-2">
+                <span className="text-secondary-purple-80">
+                  “{currentQuestion.tip.highlight}”
+                </span>
+                {currentQuestion.tip.rest}
+              </p>{' '}
+              {allAnswered && (
+                <div className="fade-in-up fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[560px] px-4 pb-6 z-50">
+                  <Button
+                    onClick={() => {
+                      const matchedRules = rules.filter((rule) =>
+                        rule.condition(selectedOptions),
+                      );
 
-                    const matchedPlans = matchedRules
-                      .map((rule) => {
-                        if (!rule?.resultId) return undefined;
-                        return fetchedPlans.find((p) => p.id === rule.resultId);
-                      })
-                      .filter((p): p is PlanResult => !!p); // null/undefined 제거
+                      const matchedPlans = matchedRules
+                        .map((rule) => {
+                          if (!rule?.resultId) return undefined;
+                          return fetchedPlans.find(
+                            (p) => p.id === rule.resultId,
+                          );
+                        })
+                        .filter((p): p is PlanResult => !!p); // null/undefined 제거
 
-                    const sortedPlans = matchedPlans.sort(
-                      (a, b) => a.priority - b.priority,
-                    );
+                      const sortedPlans = matchedPlans.sort(
+                        (a, b) => a.priority - b.priority,
+                      );
 
-                    const bestPlan = sortedPlans[0];
+                      const bestPlan = sortedPlans[0];
 
-                    if (bestPlan) {
-                      navigate('/test-wait', {
-                        state: { planId: bestPlan.id },
-                      });
-                    } else {
-                      alert('조건에 맞는 요금제를 찾을 수 없어요.');
-                    }
-                  }}
-                  fullWidth
-                  size="large"
-                  variant="custom"
-                  className="bg-secondary-purple-60 text-white text-[14px] px-4 py-[10px] rounded-[10px] font-medium w-full"
-                >
-                  Me플러스 맞춤 추천 받기
-                </Button>
-              </div>
-            )}
+                      if (bestPlan) {
+                        navigate('/test-wait', {
+                          state: { planId: bestPlan.id },
+                        });
+                      } else {
+                        alert('조건에 맞는 요금제를 찾을 수 없어요.');
+                      }
+                    }}
+                    fullWidth
+                    size="large"
+                    variant="custom"
+                    className="bg-secondary-purple-60 text-white text-[14px] px-4 py-[10px] rounded-[10px] font-medium w-full"
+                  >
+                    Me플러스 맞춤 추천 받기
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-      <Modal
-        isOpen={showBackModal}
-        onClose={() => setShowBackModal(false)}
-        modalTitle="맞춤형 요금제 찾기를 그만두시겠어요?"
-        modalDesc="홈으로 이동하면 현재 진행 중인 테스트는 초기화됩니다."
-      >
-        <Button
-          variant="secondary"
-          size="medium"
-          fullWidth
-          onClick={() => setShowBackModal(false)}
+        <Modal
+          isOpen={showBackModal}
+          onClose={() => setShowBackModal(false)}
+          modalTitle="맞춤형 요금제 찾기를 그만두시겠어요?"
+          modalDesc="홈으로 이동하면 현재 진행 중인 테스트는 초기화됩니다."
         >
-          계속할래요
-        </Button>
+          <Button
+            variant="secondary"
+            size="medium"
+            fullWidth
+            onClick={() => setShowBackModal(false)}
+          >
+            계속할래요
+          </Button>
 
-        <Button
-          variant="primary"
-          size="medium"
-          fullWidth
-          onClick={() => {
-            setShowBackModal(false);
-            setTimeout(() => {
-              navigate('/');
-            }, 300);
-          }}
-        >
-          그만둘래요
-        </Button>
-      </Modal>
+          <Button
+            variant="primary"
+            size="medium"
+            fullWidth
+            onClick={() => {
+              setShowBackModal(false);
+              setTimeout(() => {
+                navigate('/');
+              }, 300);
+            }}
+          >
+            그만둘래요
+          </Button>
+        </Modal>
+      </div>
     </div>
   );
 };
diff --git a/client/src/pages/TestResultPage.tsx b/client/src/pages/TestResultPage.tsx
index a33d41b..3e4475a 100644
--- a/client/src/pages/TestResultPage.tsx
+++ b/client/src/pages/TestResultPage.tsx
@@ -142,169 +142,160 @@ const TestResultPage = () => {
   }
 
   return (
-    <>
-      {isModalOpen && (
-        <Modal
-          isOpen={isModalOpen}
-          onClose={() => setIsModalOpen(false)}
-          modalTitle="요금제 자세히 알아보기"
-          modalDesc="요금제 상세 페이지는 LG U+외부 사이트로 연결됩니다. 계속 진행하시겠습니까?"
-        >
-          <Button
-            variant="secondary"
-            size="medium"
-            fullWidth
-            onClick={() => setIsModalOpen(false)}
+    <div className="h-[100dvh] flex flex-col items-center overflow-hidden relative bg-gradient-to-b from-[#dfe4fd] to-white">
+      <div className="w-full max-w-[600px] flex-1 overflow-y-auto px-5 z-10 text-center hide-scrollbar">
+        {isModalOpen && (
+          <Modal
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            modalTitle="요금제 자세히 알아보기"
+            modalDesc="요금제 상세 페이지는 LG U+외부 사이트로 연결됩니다. 계속 진행하시겠습니까?"
           >
-            취소
-          </Button>
+            <Button
+              variant="secondary"
+              size="medium"
+              fullWidth
+              onClick={() => setIsModalOpen(false)}
+            >
+              취소
+            </Button>
 
-          <Button
-            variant="primary"
-            size="medium"
-            fullWidth
-            onClick={() => {
-              if (plan?.link) window.open(plan.link, '_blank');
-              setIsModalOpen(false);
+            <Button
+              variant="primary"
+              size="medium"
+              fullWidth
+              onClick={() => {
+                if (plan?.link) window.open(plan.link, '_blank');
+                setIsModalOpen(false);
+              }}
+            >
+              이동하기
+            </Button>
+          </Modal>
+        )}
+
+        <div className="absolute inset-0 bg-gradient-to-b from-[#dfe4fd] to-white z-0" />
+        <Header
+          title="나에게 잘 어울리는 요금제는?"
+          onBackClick={handleBackClick}
+          isSpecialColor={true}
+        />
+        <div className=" z-10 p-5 flex flex-1 flex-col w-full items-center text-center bg-transparent">
+          <motion.div
+            initial={{ scale: 0.7, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{
+              duration: 1.2,
+              ease: 'easeOut',
             }}
           >
-            이동하기
-          </Button>
-        </Modal>
-      )}
-
-      <div className="absolute inset-0 bg-gradient-to-b from-[#dfe4fd] to-white z-0" />
-      <Header
-        title="나에게 잘 어울리는 요금제는?"
-        onBackClick={handleBackClick}
-        isSpecialColor={true}
-      />
-      <div className=" z-10 p-5 flex flex-1 flex-col w-full items-center text-center bg-transparent">
-        <motion.div
-          initial={{ scale: 0.7, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          transition={{
-            duration: 1.2,
-            ease: 'easeOut',
-          }}
-        >
-          <div className="z-10 flex flex-col justify-center mt-10 gap-2">
-            <div className="z-10 text-[21.5px] font-semibold text-secondary-purple-80">
-              {plan.name}
-            </div>
-            {plan.tagLine && (
-              <div className="px-4 py-1 shimmer-text shimmer-text-slow bg-gradation rounded-full text-[17px] text-white font-semibold inline-flex items-center gap-1">
-                <img src={plus} alt="더해서" className="w-[16px] h-[16px]" />
-                {plan.tagLine}
+            <div className="z-10 flex flex-col justify-center mt-10 gap-2">
+              <div className="z-10 text-[21.5px] font-semibold text-secondary-purple-80">
+                {plan.name}
               </div>
-            )}
-          </div>
-        </motion.div>
-
-        {/* <div className="relative w-full flex justify-center items-center mt-6">
-        <img
-          src={confetti}
-          alt="컨페티"
-          className="absolute top-0 left-1/2 -translate-x-1/2 w-full z-0"
-        />
-        <img
-          src={moonerFunImage}
-          alt="무너"
-          className="relative z-10 w-[140px]"
-        />
-      </div> */}
-
-        {plan && (
-          <>
-            <AnimatePresence>
-              {showConfetti && (
-                <motion.div
-                  initial={{ opacity: 1 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 1 }}
-                  style={{
-                    position: 'absolute',
-                    width: '100%',
-                    inset: 0,
-                    maxWidth: '600px',
-                    margin: '0 auto',
-                    overflow: 'hidden',
-                    pointerEvents: 'none',
-                    zIndex: 9999,
-                  }}
-                >
-                  <Confetti
-                    width={width}
-                    height={height}
-                    numberOfPieces={1200}
-                    recycle={false}
-                    gravity={1.0}
-                    initialVelocityY={40}
-                  />
-                </motion.div>
+              {plan.tagLine && (
+                <div className="px-4 py-1 shimmer-text shimmer-text-slow bg-gradation rounded-full text-[17px] text-white font-semibold inline-flex items-center gap-1">
+                  <img src={plus} alt="더해서" className="w-[16px] h-[16px]" />
+                  {plan.tagLine}
+                </div>
               )}
-            </AnimatePresence>
+            </div>
+          </motion.div>
 
-            <section className="relative w-full flex flex-col items-center justify-center min-h-[150px] mt-6">
-              <BounceIcon
-                src={confetti}
-                alt="컨페티"
-                className="absolute top-0 left-1/2 -translate-x-1/2 w-full z-0"
-                animationType="scaleIn"
-              />
-              <BounceIcon
-                src={moonerFunImage}
-                alt="무너"
-                className="bottom-[-30px] relative z-10 w-[140px]"
-                animationType="bounce"
-              />
-            </section>
-          </>
-        )}
-        <div className="mt-9 relative w-full">
-          <div className="mt-4">
-            <FadeInUpDiv custom={1}>
-              <UsageBar label="통화" percent={plan.callUsage} />
-            </FadeInUpDiv>
-            <FadeInUpDiv custom={2}>
-              <UsageBar label="메시지" percent={plan.messageUsage} />
+          {plan && (
+            <>
+              <AnimatePresence>
+                {showConfetti && (
+                  <motion.div
+                    initial={{ opacity: 1 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 1 }}
+                    style={{
+                      position: 'absolute',
+                      width: '100%',
+                      inset: 0,
+                      maxWidth: '600px',
+                      margin: '0 auto',
+                      overflow: 'hidden',
+                      pointerEvents: 'none',
+                      zIndex: 9999,
+                    }}
+                  >
+                    <Confetti
+                      width={width}
+                      height={height}
+                      numberOfPieces={1200}
+                      recycle={false}
+                      gravity={1.0}
+                      initialVelocityY={40}
+                    />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              <section className="relative w-full flex flex-col items-center justify-center min-h-[150px] mt-6">
+                <BounceIcon
+                  src={confetti}
+                  alt="컨페티"
+                  className="absolute top-0 left-1/2 -translate-x-1/2 w-full z-0"
+                  animationType="scaleIn"
+                />
+                <BounceIcon
+                  src={moonerFunImage}
+                  alt="무너"
+                  className="bottom-[-30px] relative z-10 w-[140px]"
+                  animationType="bounce"
+                />
+              </section>
+            </>
+          )}
+          <div className="mt-9 relative w-full">
+            <div className="mt-4">
+              <FadeInUpDiv custom={1}>
+                <UsageBar label="통화" percent={plan.callUsage} />
+              </FadeInUpDiv>
+              <FadeInUpDiv custom={2}>
+                <UsageBar label="메시지" percent={plan.messageUsage} />
+              </FadeInUpDiv>
+              <FadeInUpDiv custom={3}>
+                <UsageBar label="데이터" percent={plan.dataUsage} />
+              </FadeInUpDiv>
+            </div>
+            <FadeInUpDiv custom={4} className="mt-6">
+              <ul className="pl-5 z-10 text-sm text-gray500 list-disc max-w-[600px] text-left">
+                {plan.description.split('\n').map((line, idx) => (
+                  <li className="leading-[22px] py-[2px]" key={idx}>
+                    {line}
+                  </li>
+                ))}
+              </ul>
             </FadeInUpDiv>
-            <FadeInUpDiv custom={3}>
-              <UsageBar label="데이터" percent={plan.dataUsage} />
+            <FadeInUpDiv
+              custom={6}
+              className="z-10 mt-[10px] text-[32px] font-semibold text-primary-pink pb-[65px]"
+            >
+              월 {plan.price?.toLocaleString()}원
             </FadeInUpDiv>
           </div>
-          <FadeInUpDiv custom={4} className="mt-6">
-            <ul className="pl-5 z-10 text-sm text-gray500 list-disc max-w-[600px] text-left">
-              {plan.description.split('\n').map((line, idx) => (
-                <li className="leading-[22px] py-[2px]" key={idx}>
-                  {line}
-                </li>
-              ))}
-            </ul>
-          </FadeInUpDiv>
-          <FadeInUpDiv
-            custom={6}
-            className="z-10 mt-[10px] text-[32px] font-semibold text-primary-pink pb-[50px]"
-          >
-            월 {plan.price?.toLocaleString()}원
-          </FadeInUpDiv>
+        </div>
+        <div className="fixed bottom-0 left-1/2 -translate-x-1/2 px-5 pb-6 w-full max-w-[600px] z-10">
+          <div className="fade-in-up flex justify-center gap-[13px]">
+            <Button
+              fullWidth
+              variant="secondary"
+              size="large"
+              onClick={handleChatbotClick}
+            >
+              챗봇 상담하기
+            </Button>
+            <Button fullWidth size="large" onClick={() => setIsModalOpen(true)}>
+              요금제 자세히보기
+            </Button>
+          </div>
         </div>
       </div>
-      <div className="fade-in-up fixed px-5 pb-6 bottom-0 w-full max-w-[600px] z-10 flex justify-center gap-[13px]">
-        <Button
-          fullWidth
-          variant="secondary"
-          size="large"
-          onClick={handleChatbotClick}
-        >
-          챗봇 상담하기
-        </Button>
-        <Button fullWidth size="large" onClick={() => setIsModalOpen(true)}>
-          요금제 자세히보기
-        </Button>
-      </div>
-    </>
+    </div>
   );
 };