diff --git a/src/components/common/layout/HeaderButton.tsx b/src/components/common/layout/HeaderButton.tsx
index 690d6da4..08b57bc4 100644
--- a/src/components/common/layout/HeaderButton.tsx
+++ b/src/components/common/layout/HeaderButton.tsx
@@ -11,22 +11,32 @@ interface HeaderButtonProps {
   icon?: ReactNode;
   onClick: () => void;
   className?: string;
+  iconOnlyOnMobile?: boolean;
 }
 
 /**
  * @description 헤더 우측 슬롯에서 공통으로 사용되는 아이콘+텍스트 버튼 컴포넌트
  */
-export function HeaderButton({ text, icon, onClick, className }: HeaderButtonProps) {
+export function HeaderButton({
+  text,
+  icon,
+  onClick,
+  className,
+  iconOnlyOnMobile = false,
+}: HeaderButtonProps) {
+  const shouldHideTextOnMobile = iconOnlyOnMobile && !!icon;
+
   return (
     <button
       type="button"
       onClick={onClick}
       className={clsx(
         'flex items-center gap-1 text-body-s-bold text-gray-800 cursor-pointer transition-colors hover:text-gray-600',
+        shouldHideTextOnMobile && 'justify-center',
         className,
       )}
     >
-      {text}
+      <span className={clsx(shouldHideTextOnMobile && 'hidden md:inline')}>{text}</span>
       {icon}
     </button>
   );
diff --git a/src/components/common/layout/LoginButton.tsx b/src/components/common/layout/LoginButton.tsx
index bc57a88a..52fd208f 100644
--- a/src/components/common/layout/LoginButton.tsx
+++ b/src/components/common/layout/LoginButton.tsx
@@ -6,17 +6,18 @@
  * 로그인 상태: 사용자 이름 + 프로필 이미지 (클릭 시 로그아웃/회원탈퇴 드롭다운)
  */
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useQueryClient } from '@tanstack/react-query';
 
 import { apiClient } from '@/api/client';
 import LoginIcon from '@/assets/icons/icon-login.svg?react';
 import LogoutIcon from '@/assets/icons/icon-logout.svg?react';
-import { Dropdown } from '@/components/common/Dropdown';
+import { Popover } from '@/components/common/Popover';
 import { UserAvatar } from '@/components/common/UserAvatar';
 import { useAuthStore } from '@/stores/authStore';
 import { useHomeStore } from '@/stores/homeStore';
+import { useThemeStore } from '@/stores/themeStore';
 import { isAnonymousEmail } from '@/utils/auth';
 import { showToast } from '@/utils/toast';
 import { getUserDisplayName } from '@/utils/user';
@@ -27,11 +28,14 @@ import { WithdrawConfirmModal } from './WithdrawConfirmModal';
 export function LoginButton() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const { pathname } = useLocation();
   const accessToken = useAuthStore((s) => s.accessToken);
   const user = useAuthStore((s) => s.user);
   const openLoginModal = useAuthStore((s) => s.openLoginModal);
   const logout = useAuthStore((s) => s.logout);
   const resetHome = useHomeStore((s) => s.reset);
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const setTheme = useThemeStore((s) => s.setTheme);
 
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
   const [isWithdrawing, setIsWithdrawing] = useState(false);
@@ -39,6 +43,8 @@ export function LoginButton() {
   const isGuest = !accessToken;
   const isAnon = accessToken && isAnonymousEmail(user?.email);
   const isSocial = accessToken && user?.email && !isAnonymousEmail(user.email);
+  const isSlideRoute = /\/slide\/?$/.test(pathname);
+  const isDark = resolvedTheme === 'dark';
 
   const handleLogout = () => {
     logout();
@@ -50,7 +56,14 @@ export function LoginButton() {
   };
   // 로그인 전 (게스트)
   if (isGuest) {
-    return <HeaderButton text="로그인" icon={<LoginIcon />} onClick={openLoginModal} />;
+    return (
+      <HeaderButton
+        text="로그인"
+        icon={<LoginIcon />}
+        onClick={openLoginModal}
+        iconOnlyOnMobile={isSlideRoute}
+      />
+    );
   }
 
   // 익명 사용자
@@ -60,7 +73,14 @@ export function LoginButton() {
 
   // 소셜이 아닌데 여기까지 왔다면(비정상 상태) 방어
   if (!isSocial) {
-    return <HeaderButton text="로그인" icon={<LoginIcon />} onClick={openLoginModal} />;
+    return (
+      <HeaderButton
+        text="로그인"
+        icon={<LoginIcon />}
+        onClick={openLoginModal}
+        iconOnlyOnMobile={isSlideRoute}
+      />
+    );
   }
 
   const handleWithdraw = async () => {
@@ -81,40 +101,101 @@ export function LoginButton() {
 
   return (
     <>
-      <Dropdown
+      <Popover
         key={`${accessToken ?? 'guest'}-${user?.id ?? 'nouser'}`}
         position="bottom"
         align="end"
         ariaLabel="사용자 메뉴"
+        className="mt-2 w-80 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-[0_0.5rem_1.25rem_rgba(0,0,0,0.08)]"
         trigger={
           <button
             type="button"
-            className="flex cursor-pointer items-center gap-2 text-body-s-bold text-gray-800 transition-colors hover:text-gray-600"
+            className="flex cursor-pointer items-center gap-2 rounded-full px-2 py-1 text-body-s-bold text-gray-800 transition-colors hover:bg-gray-100"
           >
-            {displayName}
+            <span
+              className={isSlideRoute ? 'hidden md:inline max-w-24 truncate' : 'max-w-24 truncate'}
+            >
+              {displayName}
+            </span>
             <UserAvatar src={user.profileImage} alt={displayName} size={24} />
           </button>
         }
-        items={[
-          {
-            id: 'logout',
-            label: (
-              <span className="flex items-center gap-1">
-                로그아웃
-                <LogoutIcon className="size-6" />
-              </span>
-            ),
-            onClick: handleLogout,
-            variant: 'danger',
-          },
-          {
-            id: 'withdraw',
-            label: '회원 탈퇴',
-            onClick: () => setIsWithdrawModalOpen(true),
-            variant: 'danger',
-          },
-        ]}
-      />
+      >
+        {({ close }) => (
+          <div className="p-3">
+            <div className="rounded-lg px-3 py-3">
+              <p className="text-caption-bold text-gray-600">내 계정</p>
+              <div className="mt-2 flex items-center gap-3">
+                <UserAvatar src={user.profileImage} alt={displayName} size={42} />
+                <div className="min-w-0">
+                  <p className="truncate text-body-m-bold text-gray-800">{displayName}</p>
+                  <p className="truncate text-caption text-gray-600">{user.email}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-2 border-t border-gray-200 pt-2">
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left transition-colors hover:bg-gray-100"
+                onClick={() => setTheme(isDark ? 'light' : 'dark')}
+              >
+                <div>
+                  <p className="text-body-s-bold text-gray-800">테마</p>
+                  <p className="text-caption text-gray-600">
+                    {isDark ? '다크 모드 사용 중' : '라이트 모드 사용 중'}
+                  </p>
+                </div>
+                <span
+                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                    isDark ? 'bg-main' : 'bg-gray-400'
+                  }`}
+                  aria-hidden="true"
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      isDark ? 'translate-x-4' : 'translate-x-1'
+                    }`}
+                  />
+                </span>
+              </button>
+            </div>
+
+            <div className="mt-1 border-t border-gray-200 pt-2">
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left text-body-s text-gray-800 transition-colors hover:bg-gray-100"
+                onClick={() => {
+                  close();
+                  handleLogout();
+                }}
+              >
+                <div>
+                  <p className="text-body-s-bold">로그아웃</p>
+                  <p className="text-caption text-gray-600">현재 계정에서 로그아웃합니다.</p>
+                </div>
+                <LogoutIcon className="size-5 text-gray-400" />
+              </button>
+            </div>
+
+            <div className="mt-1 border-t border-gray-200 pt-2">
+              <button
+                type="button"
+                className="w-full rounded-lg px-3 py-2 text-left transition-colors hover:bg-gray-100"
+                onClick={() => {
+                  close();
+                  setIsWithdrawModalOpen(true);
+                }}
+              >
+                <p className="text-caption-bold text-error">회원 탈퇴</p>
+                <p className="text-caption text-gray-600">
+                  계정과 데이터가 삭제되며 되돌릴 수 없습니다.
+                </p>
+              </button>
+            </div>
+          </div>
+        )}
+      </Popover>
 
       <WithdrawConfirmModal
         isOpen={isWithdrawModalOpen}
diff --git a/src/components/common/layout/PresentationTitleEditor.tsx b/src/components/common/layout/PresentationTitleEditor.tsx
index e93f6dd7..1d8ff6a6 100644
--- a/src/components/common/layout/PresentationTitleEditor.tsx
+++ b/src/components/common/layout/PresentationTitleEditor.tsx
@@ -6,7 +6,7 @@
  * - 클릭하면 Popover 열리고, 입력/저장 가능
  * - Enter 또는 저장 버튼으로 제출
  */
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
 import { usePresentation, useUpdatePresentation } from '@/hooks/queries/usePresentations';
 import { showToast } from '@/utils/toast';
@@ -15,13 +15,22 @@ import { TitleEditorPopover } from '../TitleEditorPopover';
 
 interface PresentationTitleEditorProps {
   readOnlyContent?: React.ReactNode;
+  titleOverride?: string;
 }
 
-export function PresentationTitleEditor({ readOnlyContent }: PresentationTitleEditorProps) {
+export function PresentationTitleEditor({
+  readOnlyContent,
+  titleOverride,
+}: PresentationTitleEditorProps) {
   const { projectId } = useParams<{ projectId: string }>();
+  const { pathname } = useLocation();
   const { data: presentation } = usePresentation(projectId ?? '');
 
-  const resolvedTitle = presentation?.title?.trim() ? presentation.title : '내 발표';
+  const resolvedTitle =
+    titleOverride?.trim() || (presentation?.title?.trim() ? presentation.title : '내 발표');
+  const isProjectTabPath =
+    /^\/[^/]+\/(slide|insight|videos)(\/[^/]+)?$/.test(pathname) || pathname.endsWith('/videos');
+  const titleClassName = isProjectTabPath ? 'max-w-52 truncate' : undefined;
 
   if (readOnlyContent) {
     return (
@@ -29,19 +38,28 @@ export function PresentationTitleEditor({ readOnlyContent }: PresentationTitleEd
         title={resolvedTitle}
         readOnlyContent={readOnlyContent}
         ariaLabel="발표 정보"
+        titleClassName={titleClassName}
       />
     );
   }
 
-  return <PresentationTitleEditorEditable projectId={projectId} title={resolvedTitle} />;
+  return (
+    <PresentationTitleEditorEditable
+      projectId={projectId}
+      title={resolvedTitle}
+      titleClassName={titleClassName}
+    />
+  );
 }
 
 function PresentationTitleEditorEditable({
   projectId,
   title,
+  titleClassName,
 }: {
   projectId?: string;
   title: string;
+  titleClassName?: string;
 }) {
   const { mutate: updatePresentation, isPending } = useUpdatePresentation();
 
@@ -74,6 +92,7 @@ function PresentationTitleEditorEditable({
       onSave={handleSave}
       ariaLabel="발표 이름 변경"
       isPending={isPending}
+      titleClassName={titleClassName}
     />
   );
 }
diff --git a/src/components/common/layout/ShareButton.tsx b/src/components/common/layout/ShareButton.tsx
index e1a1873a..cdd48e87 100644
--- a/src/components/common/layout/ShareButton.tsx
+++ b/src/components/common/layout/ShareButton.tsx
@@ -2,6 +2,8 @@
  * @file ShareButton.tsx
  * @description 공유 모달을 여는 헤더 버튼
  */
+import { useLocation } from 'react-router-dom';
+
 import ShareIcon from '@/assets/icons/icon-share.svg?react';
 import { useShareStore } from '@/stores/shareStore';
 
@@ -9,6 +11,15 @@ import { HeaderButton } from './HeaderButton';
 
 export function ShareButton() {
   const openShareModal = useShareStore((s) => s.openShareModal);
+  const { pathname } = useLocation();
+  const isSlideRoute = /\/slide\/?$/.test(pathname);
 
-  return <HeaderButton text="공유" icon={<ShareIcon />} onClick={openShareModal} />;
+  return (
+    <HeaderButton
+      text="공유"
+      icon={<ShareIcon />}
+      onClick={openShareModal}
+      iconOnlyOnMobile={isSlideRoute}
+    />
+  );
 }
diff --git a/src/components/feedback/FeedbackHeaderCenter.tsx b/src/components/feedback/FeedbackHeaderCenter.tsx
index b03c90f7..e0e666e4 100644
--- a/src/components/feedback/FeedbackHeaderCenter.tsx
+++ b/src/components/feedback/FeedbackHeaderCenter.tsx
@@ -1,19 +1,9 @@
-import { useParams } from 'react-router-dom';
-
 import InfoIcon from '@/assets/icons/icon-info.svg?react';
 import { Popover } from '@/components/common';
-import { usePresentation } from '@/hooks/queries/usePresentations';
-import dayjs from '@/utils/dayjs';
+import { useFeedbackHeaderInfo } from '@/hooks/useFeedbackHeaderInfo';
 
 export default function FeedbackHeaderCenter() {
-  const { projectId } = useParams<{ projectId: string }>();
-
-  const { data: presentation } = usePresentation(projectId ?? '');
-  const title = presentation?.title?.trim() ? presentation.title : '내 발표';
-  const postedAt = presentation?.updatedAt
-    ? dayjs(presentation.updatedAt).format('YYYY.MM.DD HH:mm:ss')
-    : '-';
-  const publisherName = presentation?.userName ?? '알 수 없음';
+  const { title, postedAt, publisherName } = useFeedbackHeaderInfo();
 
   return (
     <div className="flex md:hidden items-center">
diff --git a/src/components/feedback/FeedbackHeaderLeft.tsx b/src/components/feedback/FeedbackHeaderLeft.tsx
index 727f33f8..8e8e1107 100644
--- a/src/components/feedback/FeedbackHeaderLeft.tsx
+++ b/src/components/feedback/FeedbackHeaderLeft.tsx
@@ -1,22 +1,14 @@
-import { useParams } from 'react-router-dom';
-
 import { Logo, PresentationTitleEditor } from '@/components/common';
-import { usePresentation } from '@/hooks/queries/usePresentations';
-import dayjs from '@/utils/dayjs';
+import { useFeedbackHeaderInfo } from '@/hooks/useFeedbackHeaderInfo';
 
 export default function FeedbackHeaderLeft() {
-  const { projectId } = useParams<{ projectId: string }>();
-
-  const { data: presentation } = usePresentation(projectId ?? '');
-  const postedAt = presentation?.updatedAt
-    ? dayjs(presentation.updatedAt).format('YYYY.MM.DD HH:mm:ss')
-    : '-';
-  const publisherName = presentation?.userName ?? '알 수 없음';
+  const { title, postedAt, publisherName } = useFeedbackHeaderInfo();
 
   return (
     <>
       <Logo />
       <PresentationTitleEditor
+        titleOverride={title}
         readOnlyContent={
           <div className="grid grid-cols-[6.5rem_1fr] gap-x-5 gap-y-3 text-body-m text-gray-800">
             <span className="text-gray-600 text-body-s-bold">게시자</span>
diff --git a/src/components/feedback/ScriptPanel.tsx b/src/components/feedback/ScriptPanel.tsx
index f0e8f1e6..60fa2ed3 100644
--- a/src/components/feedback/ScriptPanel.tsx
+++ b/src/components/feedback/ScriptPanel.tsx
@@ -22,10 +22,10 @@ export default function ScriptPanel({
   return (
     <div id={id} role="tabpanel" aria-labelledby={ariaLabelledby} className={className}>
       <SlideTitle fallbackTitle={fallbackTitle} />
-      <div className="mt-3 bg-gray-200 rounded-lg px-4 py-3 h-48 overflow-y-auto">
+      <div className="mt-3 rounded-2xl border border-gray-200 bg-gray-200 px-4 py-3 h-48 overflow-y-auto pb-4">
         <p
-          className={`text-body-s ${script ? 'text-black' : 'text-gray-600'}`}
-          style={{ whiteSpace: 'pre-line' }}
+          className={`text-body-s leading-relaxed wrap-break-word ${script ? 'text-black' : 'text-gray-600'}`}
+          style={{ whiteSpace: 'pre-wrap' }}
         >
           {script || '대본이 없습니다.'}
         </p>
diff --git a/src/components/feedback/slide/SlideInfoPanel.tsx b/src/components/feedback/slide/SlideInfoPanel.tsx
index 26aef70f..d21289ba 100644
--- a/src/components/feedback/slide/SlideInfoPanel.tsx
+++ b/src/components/feedback/slide/SlideInfoPanel.tsx
@@ -42,10 +42,10 @@ export default function SlideInfoPanel({
         />
       </div>
 
-      <div className="bg-gray-200 rounded-t-lg px-4 py-3 h-48 overflow-y-auto">
+      <div className="rounded-2xl border border-gray-200 bg-gray-200 px-4 py-3 h-48 overflow-y-auto pb-4">
         <p
-          className={`text-body-s ${script ? 'text-black' : 'text-gray-600'}`}
-          style={{ whiteSpace: 'pre-line' }}
+          className={`text-body-s leading-relaxed break-words ${script ? 'text-black' : 'text-gray-600'}`}
+          style={{ whiteSpace: 'pre-wrap' }}
         >
           {script || '대본이 없습니다.'}
         </p>
diff --git a/src/components/share/share-modal/ShareModal.tsx b/src/components/share/share-modal/ShareModal.tsx
index e7e73637..7c462b65 100644
--- a/src/components/share/share-modal/ShareModal.tsx
+++ b/src/components/share/share-modal/ShareModal.tsx
@@ -14,7 +14,7 @@ import { Modal } from '@/components/common/Modal';
 import { useCreateShareLink, useShareableVideos } from '@/hooks/queries/useShares';
 import { type ShareType, useShareStore } from '@/stores/shareStore';
 import { formatTimestamp } from '@/utils/format';
-import { shareToFacebook, shareToInstagram, shareToKakao, shareToX } from '@/utils/snsShare';
+import { shareQrToInstagram, shareToFacebook, shareToKakao, shareToX } from '@/utils/snsShare';
 import { showToast } from '@/utils/toast';
 
 const KAKAO_JS_KEY = import.meta.env?.VITE_KAKAO_JS_KEY ?? '';
@@ -337,7 +337,7 @@ export function ShareModal() {
             <button
               type="button"
               aria-label="인스타그램으로 공유"
-              onClick={shareToInstagram}
+              onClick={() => void shareQrToInstagram({ url: shareUrl })}
               className="flex h-35 w-34 flex-col items-center justify-center gap-2 rounded-lg bg-white transition-colors hover:bg-gray-100"
             >
               <img src={instagramIcon} alt="" aria-hidden className="h-15 w-15" />
diff --git a/src/hooks/useFeedbackHeaderInfo.ts b/src/hooks/useFeedbackHeaderInfo.ts
new file mode 100644
index 00000000..01c76c55
--- /dev/null
+++ b/src/hooks/useFeedbackHeaderInfo.ts
@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { usePresentation } from '@/hooks/queries/usePresentations';
+import { useSharedContent } from '@/hooks/queries/useShares';
+import dayjs from '@/utils/dayjs';
+
+type SharedContentLike = {
+  shareInfo?: { createdAt?: string };
+  projectContent?: {
+    title?: string;
+    postedAt?: string;
+    publisherName?: string;
+    userName?: string;
+  };
+  presentation?: {
+    name?: string;
+    postedAt?: string;
+    publisherName?: string;
+  };
+};
+
+const FALLBACK_TITLE = '내 발표';
+const FALLBACK_PUBLISHER = '알 수 없음';
+const FALLBACK_POSTED_AT = '-';
+
+function formatPostedAt(value?: string): string {
+  if (!value) return FALLBACK_POSTED_AT;
+  const parsed = dayjs(value);
+  if (!parsed.isValid()) return FALLBACK_POSTED_AT;
+  return parsed.format('YYYY.MM.DD HH:mm:ss');
+}
+
+export function useFeedbackHeaderInfo() {
+  const { projectId, shareToken } = useParams<{ projectId?: string; shareToken?: string }>();
+  const { data: presentation } = usePresentation(projectId ?? '');
+  const { data: sharedContent } = useSharedContent(shareToken);
+
+  return useMemo(() => {
+    const shared = (sharedContent ?? null) as SharedContentLike | null;
+
+    const title =
+      presentation?.title?.trim() ||
+      shared?.projectContent?.title?.trim() ||
+      shared?.presentation?.name?.trim() ||
+      FALLBACK_TITLE;
+
+    const publisherName =
+      presentation?.userName?.trim() ||
+      shared?.projectContent?.publisherName?.trim() ||
+      shared?.projectContent?.userName?.trim() ||
+      shared?.presentation?.publisherName?.trim() ||
+      FALLBACK_PUBLISHER;
+
+    const postedAtRaw =
+      presentation?.updatedAt ||
+      shared?.projectContent?.postedAt ||
+      shared?.presentation?.postedAt ||
+      shared?.shareInfo?.createdAt;
+
+    return {
+      title,
+      publisherName,
+      postedAt: formatPostedAt(postedAtRaw),
+    };
+  }, [presentation, sharedContent]);
+}
diff --git a/src/pages/FeedbackSlidePage.tsx b/src/pages/FeedbackSlidePage.tsx
index a4bfce7a..1a950a71 100644
--- a/src/pages/FeedbackSlidePage.tsx
+++ b/src/pages/FeedbackSlidePage.tsx
@@ -158,10 +158,10 @@ export default function FeedbackSlidePage({
         scriptTabContent={
           <div className="px-4 py-4">
             <SlideTitle fallbackTitle={`슬라이드 ${slideIndex + 1}`} readOnly />
-            <div className="mt-3 bg-gray-200 rounded-lg px-4 py-3 h-48 overflow-y-auto">
+            <div className="mt-3 rounded-2xl border border-gray-200 bg-gray-200 px-4 py-3 h-48 overflow-y-auto pb-4">
               <p
-                className={`text-body-s ${script ? 'text-black' : 'text-gray-400'}`}
-                style={{ whiteSpace: 'pre-line' }}
+                className={`text-body-s leading-relaxed break-words ${script ? 'text-black' : 'text-gray-400'}`}
+                style={{ whiteSpace: 'pre-wrap' }}
               >
                 {script || '대본이 없습니다.'}
               </p>
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 397472b6..0a327a50 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -50,7 +50,7 @@ export const router = createBrowserRouter([
         }
         center={<Gnb />}
         right={
-          <div className="flex items-center gap-8">
+          <div className="flex items-center gap-3 md:gap-8">
             <ShareButton />
             <LoginButton />
           </div>
diff --git a/src/utils/snsShare.ts b/src/utils/snsShare.ts
index 317b1020..3b4a569e 100644
--- a/src/utils/snsShare.ts
+++ b/src/utils/snsShare.ts
@@ -46,6 +46,7 @@ declare global {
  * ───────────────────────────────────────────────────────────── */
 
 const DEFAULT_SHARE_TEXT = '내 발표를 확인하고 피드백을 남겨주세요!';
+const INSTAGRAM_WEB_URL = 'https://www.instagram.com/';
 
 function encode(value: string) {
   return encodeURIComponent(value);
@@ -57,6 +58,42 @@ function openNewTab(url: string) {
   if (!win) showToast.error('공유 창을 열지 못했습니다.', '팝업 차단을 해제해주세요.');
 }
 
+function isMobileDevice() {
+  return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
+}
+
+function buildQrCodeUrl(url: string, size = 512) {
+  return `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encode(url)}`;
+}
+
+async function downloadImage(url: string, fileName: string) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error('download failed');
+  const blob = await response.blob();
+  const objectUrl = URL.createObjectURL(blob);
+
+  const anchor = document.createElement('a');
+  anchor.href = objectUrl;
+  anchor.download = fileName;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(objectUrl);
+}
+
+function openInstagramStoryDeepLink(qrCodeUrl: string) {
+  const deepLink = `instagram-stories://share?backgroundImage=${encode(qrCodeUrl)}`;
+  const start = Date.now();
+  window.location.href = deepLink;
+
+  // 딥링크 실패(앱 미설치/미지원) 시 웹 인스타로 fallback
+  window.setTimeout(() => {
+    if (Date.now() - start < 1800) {
+      openNewTab(INSTAGRAM_WEB_URL);
+    }
+  }, 1200);
+}
+
 /** Kakao SDK 스크립트를 동적으로 로드 */
 async function loadKakaoSdk(): Promise<void> {
   if (window.Kakao) return;
@@ -139,8 +176,7 @@ export async function shareToKakao(params: {
       },
       buttons: [{ title: '링크 열기', link: { webUrl: url, mobileWebUrl: url } }],
     });
-  } catch (e) {
-    console.error(e);
+  } catch {
     showToast.error('카카오 공유에 실패했습니다.', '도메인, 키, 링크 설정을 확인해주세요.');
   }
 }
@@ -152,6 +188,45 @@ export function shareToInstagram() {
   showToast.info('인스타그램 공유는 지원하지 않습니다.', '링크를 복사해 앱에서 직접 공유해주세요.');
 }
 
+/**
+ * QR 코드 기반 인스타그램 공유
+ * - 모바일: 인스타그램 스토리 딥링크 시도
+ * - 웹: QR 코드 이미지 다운로드 후 인스타그램 열기
+ */
+export async function shareQrToInstagram(params: { url: string }) {
+  const { url } = params;
+  if (!url) {
+    showToast.error('공유할 링크가 없습니다.');
+    return;
+  }
+
+  const qrCodeUrl = buildQrCodeUrl(url, 640);
+
+  if (isMobileDevice()) {
+    openInstagramStoryDeepLink(qrCodeUrl);
+    showToast.info(
+      '인스타그램 앱으로 이동합니다.',
+      '스토리 작성 화면에서 QR 이미지를 선택해 공유해주세요.',
+    );
+    return;
+  }
+
+  try {
+    await downloadImage(qrCodeUrl, 'ttorang-share-qr.png');
+    showToast.success(
+      'QR 코드를 다운로드했습니다.',
+      '인스타그램에서 이미지를 첨부해 공유해주세요.',
+    );
+  } catch {
+    showToast.warning(
+      'QR 코드 다운로드에 실패했습니다.',
+      '인스타그램에서 링크를 직접 붙여넣어 공유해주세요.',
+    );
+  } finally {
+    openNewTab(INSTAGRAM_WEB_URL);
+  }
+}
+
 /**
  * X(트위터)로 공유
  *