From 24611af8b6ae6d180d9bd739bbf329aedc824e37 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 4 Jun 2026 10:38:49 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BD=9C=EC=95=84=EC=9B=83=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=EA=B3=BC=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=ED=8C=A8=EB=84=90=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/admin/AdminBlockEditor.vue         | 56 ++++++++++++-------
 components/admin/AdminEditorBlockPanel.vue    | 12 +---
 components/admin/AdminPostForm.vue            |  4 +-
 .../content/ContentMarkdownEditableInline.vue |  2 +
 components/content/ProseCallout.vue           | 20 ++-----
 docs/changelog.md                             |  6 ++
 docs/deploy.md                                |  9 ++-
 docs/history.md                               |  4 ++
 docs/map.md                                   |  8 +--
 docs/spec.md                                  |  8 +--
 docs/update.md                                |  7 +++
 lib/markdown-callout.js                       |  5 +-
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 14 files changed, 89 insertions(+), 58 deletions(-)

diff --git a/components/admin/AdminBlockEditor.vue b/components/admin/AdminBlockEditor.vue
index 8558e2d..3aaadf0 100644
--- a/components/admin/AdminBlockEditor.vue
+++ b/components/admin/AdminBlockEditor.vue
@@ -49,10 +49,42 @@ const calloutBackgroundOptions = [
   { value: 'green', label: '초록' },
   { value: 'yellow', label: '노랑' },
   { value: 'red', label: '빨강' },
-  { value: 'purple', label: '보라' },
-  { value: 'pink', label: '핑크' }
+  { value: 'purple', label: '보라' }
 ]
 
+/**
+ * 콜아웃 배경 스와치 색상을 반환한다.
+ * @param {string} background - 배경 키
+ * @returns {string} CSS 배경색
+ */
+const getCalloutBackgroundSwatch = (background) => {
+  if (background === 'gray') {
+    return 'color-mix(in srgb, #050505 10%, #ffffff)'
+  }
+
+  if (background === 'blue') {
+    return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
+  }
+
+  if (background === 'green') {
+    return 'color-mix(in srgb, #16ae68 10%, #ffffff)'
+  }
+
+  if (background === 'yellow') {
+    return 'color-mix(in srgb, #ffff00 10%, #ffffff)'
+  }
+
+  if (background === 'red') {
+    return 'color-mix(in srgb, #ff0000 10%, #ffffff)'
+  }
+
+  if (background === 'purple') {
+    return 'color-mix(in srgb, #8800ff 10%, #ffffff)'
+  }
+
+  return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
+}
+
 const blockCommands = [
   {
     type: 'paragraph',
@@ -2170,15 +2202,7 @@ defineExpose({
                 ></span>
                 <span
                   class="relative block size-full rounded-full border-2 border-white ring-1 ring-black/10"
-                  :style="{
-                    background: block.calloutBackground === 'gray' ? 'rgba(100,116,139,0.28)'
-                      : block.calloutBackground === 'blue' ? 'rgba(59,130,246,0.3)'
-                      : block.calloutBackground === 'green' ? 'rgba(34,197,94,0.3)'
-                      : block.calloutBackground === 'yellow' ? 'rgba(245,158,11,0.34)'
-                      : block.calloutBackground === 'red' ? 'rgba(239,68,68,0.3)'
-                      : block.calloutBackground === 'purple' ? 'rgba(168,85,247,0.3)'
-                      : 'rgba(236,72,153,0.3)'
-                  }"
+                  :style="{ background: getCalloutBackgroundSwatch(block.calloutBackground) }"
                 ></span>
               </button>
 
@@ -2197,15 +2221,7 @@ defineExpose({
                     >
                       <span
                         class="size-[1.4rem] rounded-full border border-black/10"
-                        :style="{
-                          background: backgroundOption.value === 'gray' ? 'rgba(100,116,139,0.28)'
-                            : backgroundOption.value === 'blue' ? 'rgba(59,130,246,0.3)'
-                            : backgroundOption.value === 'green' ? 'rgba(34,197,94,0.3)'
-                            : backgroundOption.value === 'yellow' ? 'rgba(245,158,11,0.34)'
-                            : backgroundOption.value === 'red' ? 'rgba(239,68,68,0.3)'
-                            : backgroundOption.value === 'purple' ? 'rgba(168,85,247,0.3)'
-                            : 'rgba(236,72,153,0.3)'
-                        }"
+                        :style="{ background: getCalloutBackgroundSwatch(backgroundOption.value) }"
                       ></span>
                     </button>
                   </li>
diff --git a/components/admin/AdminEditorBlockPanel.vue b/components/admin/AdminEditorBlockPanel.vue
index 5c8b569..051edc3 100644
--- a/components/admin/AdminEditorBlockPanel.vue
+++ b/components/admin/AdminEditorBlockPanel.vue
@@ -2,6 +2,7 @@
 import { getImageAltAttribute, getImageDefaultAltLabel } from '../../lib/markdown-image.js'
 import {
   CALLOUT_BACKGROUND_OPTIONS,
+  CALLOUT_BACKGROUND_SWATCHES,
   CALLOUT_EMOJI_OPTIONS,
   QUOTE_BACKGROUND_LABELS,
   QUOTE_BACKGROUND_OPTIONS,
@@ -42,18 +43,11 @@ const backgroundLabels = {
   green: '초록',
   yellow: '노랑',
   red: '빨강',
-  purple: '보라',
-  pink: '분홍'
+  purple: '보라'
 }
 
 const backgroundSwatches = {
-  gray: 'rgba(100,116,139,0.28)',
-  blue: 'rgba(59,130,246,0.3)',
-  green: 'rgba(34,197,94,0.3)',
-  yellow: 'rgba(245,158,11,0.34)',
-  red: 'rgba(239,68,68,0.3)',
-  purple: 'rgba(168,85,247,0.3)',
-  pink: 'rgba(236,72,153,0.28)'
+  ...CALLOUT_BACKGROUND_SWATCHES
 }
 
 const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql']
diff --git a/components/admin/AdminPostForm.vue b/components/admin/AdminPostForm.vue
index 0dc3c43..4cfb9ca 100644
--- a/components/admin/AdminPostForm.vue
+++ b/components/admin/AdminPostForm.vue
@@ -1621,11 +1621,11 @@ defineExpose({
     </div>
 
     <aside
-      class="admin-post-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out"
+      class="admin-post-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out max-lg:fixed max-lg:inset-y-0 max-lg:right-0 max-lg:z-50 max-lg:max-w-[calc(100vw-40px)] max-lg:shadow-[-18px_0_60px_rgba(15,23,42,0.14)]"
       :class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
       :aria-hidden="!isSettingsOpen"
     >
-      <div class="admin-post-form__settings-inner relative flex h-full w-[420px] flex-col">
+      <div class="admin-post-form__settings-inner relative flex h-full w-[420px] max-lg:w-full flex-col">
         <div class="admin-post-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
           <h2 class="admin-post-form__settings-title text-xl font-bold text-black">
             게시물 설정
diff --git a/components/content/ContentMarkdownEditableInline.vue b/components/content/ContentMarkdownEditableInline.vue
index b8a7df8..53ae2fc 100644
--- a/components/content/ContentMarkdownEditableInline.vue
+++ b/components/content/ContentMarkdownEditableInline.vue
@@ -499,6 +499,8 @@ const getNavigationElements = () => {
   }
 
   return [...root.querySelectorAll('[data-source-line]')]
+    .filter((element) => element.getAttribute('contenteditable') === 'true'
+      || element.getAttribute('data-preview-card-block') === 'true')
     .sort((left, right) => Number(left.dataset.sourceLine) - Number(right.dataset.sourceLine))
 }
 
diff --git a/components/content/ProseCallout.vue b/components/content/ProseCallout.vue
index a7f5fa3..1777578 100644
--- a/components/content/ProseCallout.vue
+++ b/components/content/ProseCallout.vue
@@ -35,10 +35,6 @@ const backgroundClass = computed(() => {
     return 'prose-callout--purple'
   }
 
-  if (props.background === 'pink') {
-    return 'prose-callout--pink'
-  }
-
   return 'prose-callout--blue'
 })
 </script>
@@ -59,30 +55,26 @@ const backgroundClass = computed(() => {
 
 <style scoped>
 .prose-callout--gray {
-  background: rgba(100, 116, 139, 0.12);
+  background: color-mix(in srgb, #050505 10%, #ffffff);
 }
 
 .prose-callout--blue {
-  background: rgba(59, 130, 246, 0.14);
+  background: color-mix(in srgb, #0055ff 10%, #ffffff);
 }
 
 .prose-callout--green {
-  background: rgba(34, 197, 94, 0.14);
+  background: color-mix(in srgb, #16ae68 10%, #ffffff);
 }
 
 .prose-callout--yellow {
-  background: rgba(245, 158, 11, 0.16);
+  background: color-mix(in srgb, #ffff00 10%, #ffffff);
 }
 
 .prose-callout--red {
-  background: rgba(239, 68, 68, 0.14);
+  background: color-mix(in srgb, #ff0000 10%, #ffffff);
 }
 
 .prose-callout--purple {
-  background: rgba(168, 85, 247, 0.14);
-}
-
-.prose-callout--pink {
-  background: rgba(236, 72, 153, 0.14);
+  background: color-mix(in srgb, #8800ff 10%, #ffffff);
 }
 </style>
diff --git a/docs/changelog.md b/docs/changelog.md
index 699fdcd..15c96c2 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,11 @@
 # 업데이트 요약
 
+## v1.5.46
+
+- 콜아웃 배경색도 인용 블록과 같은 6색 팔레트로 맞추고 분홍 선택지를 제거했다.
+- 라이브 작성 모드에서 방향키로 위에서 아래로 이동할 때 콜아웃·인용 블록에 진입하지 못하던 문제를 수정했다.
+- 작은 화면에서 게시물 설정 패널이 본문을 압축하지 않고 오른쪽 오버레이로 뜨도록 정리했다.
+
 ## v1.5.45
 
 - 인용 블록 기본 색상을 회색으로 바꾸고 분홍 선택지를 제거했다.
diff --git a/docs/deploy.md b/docs/deploy.md
index 7536d5e..d49019f 100644
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
 # 배포 가이드
 
-> 로컬 기준 v1.5.45에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.5.46에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
 
 ## 빌드 유형
 
@@ -68,6 +68,13 @@ docker exec sori-studio-db pg_isready -U sori_studio -d sori_studio
 docker exec sori-studio-db psql -U sori_studio -d sori_studio -c 'SELECT count(*) AS posts_count FROM posts;'
 ```
 
+### v1.5.46 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 관리자 글쓰기 라이브 모드에서 위에서 아래 방향키로 콜아웃·인용 블록에 진입되는지 확인한다.
+- 콜아웃·인용 배경 프리셋에 분홍이 보이지 않고 같은 6색 팔레트를 쓰는지 확인한다.
+- 작은 화면에서 게시물 설정 패널을 열어도 본문 폭이 압축되지 않는지 확인한다.
+
 ### v1.5.45 참고
 
 - 추가 DB 마이그레이션은 없다.
diff --git a/docs/history.md b/docs/history.md
index d5c3118..84759dd 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-06-04 v1.5.46 — 콜아웃과 인용 팔레트는 하나로 맞춘다
+
+콜아웃과 인용은 모두 작성자가 본문 안에서 특정 문맥을 강조하는 블록이므로 배경색 선택지가 서로 다르면 오른쪽 설정 패널의 의미가 흐려진다. 분홍은 빨강과 역할이 겹치고 실제 팔레트 변경 후에도 남아 있던 선택지라 제거하고, 두 블록 모두 같은 6색 팔레트를 사용한다. 라이브 편집의 방향키 이동은 옵션 선언 줄처럼 화면에 직접 편집 영역이 없는 줄을 건너뛰어야 하므로, 탐색 대상은 실제 contenteditable 줄과 카드형 블록으로 제한한다. 작은 화면의 게시물 설정 패널은 문서를 밀어내지 않는 고정 오버레이로 두어 본문 폭을 압축하지 않게 한다.
+
 ## 2026-06-04 v1.5.45 — 라이브 작성 블록 옵션도 오른쪽 패널로 통일한다
 
 소스 모드에서는 커서가 옵션을 가진 블록 안에 들어가는 것만으로 오른쪽 설정 패널이 열리는데, 라이브 모드 콜아웃은 별도 모달을 열어 같은 기능을 다른 방식으로 제공하고 있었다. 작성자가 모드에 따라 다른 조작을 기억하지 않도록 콜아웃과 인용 블록 모두 라이브 영역에 포커스가 들어오면 오른쪽 패널을 쓰도록 통일한다. 인용 색상은 새 팔레트 기준으로 회색을 기본값으로 두고, 빨강과 역할이 겹치는 분홍은 선택지에서 제거한다.
diff --git a/docs/map.md b/docs/map.md
index a8ca5e5..06a5e15 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -91,11 +91,11 @@
 | components/admin/AdminSiteCodeSettingsCard.vue | 관리자 사이트 설정의 ads.txt·공통 헤더 코드·공통 푸터 코드 카드 |
 | components/admin/AdminPostExportFileRow.vue | 관리자 사이트 설정 내보내기 작업의 분할 파일 선택 행 |
 | components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 |
-| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(영문 상태·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약·멤버십·비공개 상태 저장, 발행 모달(중앙 배치), 좌우 설정 패널, 미리보기 emit·미저장 이탈 가드, 추천 글 토글, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
+| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(영문 상태·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약·멤버십·비공개 상태 저장, 발행 모달(중앙 배치), 좌우 설정 패널(작은 화면은 오른쪽 고정 오버레이), 미리보기 emit·미저장 이탈 가드, 추천 글 토글, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, 페이지 공개 상태 선택, HTML 문서 기본 모드, 빈 본문/`!`+Tab HTML 골격 자동 완성, 항상 보이는 일반 텍스트/HTML 모드 선택, 한글 제목 영문 슬러그 자동 변환, HTML textarea 커서 위치 파일 URL 삽입 |
 | components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령·미디어 모달(이미지·갤러리·비디오·오디오·파일), 커서 블록 컨텍스트·`block-panel` emit, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 블록 패널 바깥 클릭 닫기·미디어 모달 중 유지, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원 |
 | components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(이미지·갤러리·임베드·인용 배경색·콜아웃·코드·토글), 갤러리 선택 이미지 강조 |
-| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
+| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·인용과 같은 배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼(이름/슬러그/설명/색상만 편집) |
 | components/admin/AdminMemberForm.vue | 관리자 멤버 추가/수정 폼(Ghost형 3분할, 기존 회원 보기/수정 모드 분리, 요약 1fr·입력 2fr, 원형 썸네일 hover 등록·변경·삭제, 기본 정보·레이블·관리자 노트·활동 요약, 설정 메뉴의 비밀번호 변경·멤버 삭제 모달, 저장 토스트, 미저장 변경사항 이탈 확인) |
 | components/admin/AdminUnsavedChangesModal.vue | 관리자 편집 화면 공통 미저장 변경사항 이탈 확인 모달(상단 40px 위치) |
@@ -111,7 +111,7 @@
 | 파일 | 화면 위치 |
 |------|-----------|
 | components/content/ContentRenderer.vue | 게시물/페이지 본문 |
-| components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 문단 text-base(16px), 빈 줄 spacer 보존·hard break `<br>` 처리, 확장 블록 파싱, 인용 배경 옵션(`> [!bg=...]`), 라이브 콜아웃·인용 포커스 기반 오른쪽 설정 패널 연결, 라이브 이미지·갤러리 드래그 병합·추가·분리 UI, 갤러리 비율 기반 행 레이아웃, 라이브 갤러리 개별 이미지 편집·삭제, 리스트 마커 파란 계열 통일 |
+| components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 문단 text-base(16px), 빈 줄 spacer 보존·hard break `<br>` 처리, 확장 블록 파싱, 인용 배경 옵션(`> [!bg=...]`), 라이브 콜아웃·인용 포커스 기반 오른쪽 설정 패널 연결, 라이브 방향키 이동 시 편집 가능한 줄·카드형 블록 탐색, 라이브 이미지·갤러리 드래그 병합·추가·분리 UI, 갤러리 비율 기반 행 레이아웃, 라이브 갤러리 개별 이미지 편집·삭제, 리스트 마커 파란 계열 통일 |
 | components/content/ProseHeading.vue | h1~h6 제목, 기본 mt-12 제거 |
 | components/content/ProseImage.vue | 본문 내 이미지, 로드 실패·빈 URL placeholder |
 | components/content/ProseList.vue | 목록 |
@@ -119,7 +119,7 @@
 | components/content/ProseCodeBlock.vue | 코드 블록 공통 셸(다크 배경, 줄번호 gutter, 공개 복사 버튼) |
 | components/content/ContentMarkdownCodeBlockEditor.vue | 라이브 모드 코드 블록 인라인 편집(Language·줄번호 토글) |
 | components/content/ProseButton.vue | 버튼 |
-| components/content/ProseCallout.vue | Callout 카드(Emoji 표시/숨김, 배경 프리셋, 상단 여백 중심) |
+| components/content/ProseCallout.vue | Callout 카드(Emoji 표시/숨김, 인용과 같은 배경 프리셋, 상단 여백 중심) |
 | components/content/ProseToggle.vue | Toggle 카드(펼침 애니메이션, chevron 트리거) |
 | components/content/ContentMarkdownToggleEditor.vue | 라이브 모드 토글 제목·본문 인라인 편집 |
 | components/content/ProseVideo.vue | `:::video` 공개 비디오 카드 |
diff --git a/docs/spec.md b/docs/spec.md
index 1cdba44..f363ae6 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -77,7 +77,7 @@
 - 댓글 정렬은 `인기순`(좋아요 우선), `최신순`, `오래된순`을 제공한다.
 - 댓글 아바타 이미지 로드 실패 시 이니셜 아바타로 즉시 대체한다.
 - 공개 게시물 본문은 콘텐츠 타입별 컴포넌트로 분리해 추후 스타일 변경이 쉽도록 구성
-- 인용문(`>`)은 첫 줄 옵션 `> [!bg=blue]` 또는 `> {bg=blue}`로 배경색을 지정할 수 있으며, 지원 값은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`, `pink`이다.
+- 인용문(`>`)은 첫 줄 옵션 `> [!bg=blue]` 또는 `> {bg=blue}`로 배경색을 지정할 수 있으며, 지원 값은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이다.
 - 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정을 지원한다. 콜아웃은 아이콘 표시 여부·아이콘·배경색, 코드 블록은 언어·줄번호 표시 여부, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다.
 - 게시물 상세의 오른쪽 사이드바는 데스크톱에서 추천 사이트 대신 본문 H1~H3 제목 기반 TOC를 표시한다. TOC 링크는 본문 제목에 부여된 앵커 ID로 부드럽게 이동하며, 고정 상단 헤더 높이와 여백을 반영해 제목이 화면 밖에 걸리지 않게 한다. 본문 스크롤 중에는 현재 제목에 해당하는 TOC 항목을 강조하고, 목차 항목이 많으면 TOC 내부 스크롤이 활성 항목을 따라간다. 본문 제목이 없으면 목차 없음 문구를 표시한다. 오른쪽 사이드바가 본문 아래로 내려가는 모바일 폭에서는 TOC를 숨긴다.
 - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다.
@@ -625,8 +625,8 @@ components/content/
 - 라이브 모드 단일 이미지 블록을 기존 갤러리 이미지 셀에 드롭하면 해당 셀 뒤에 이미지를 추가하고 원래 단일 이미지 줄은 제거한다(`insert-image-to-gallery`).
 - 라이브 모드 갤러리 이미지를 블록 사이 얇은 삽입선(또는 문서 맨 아래 삽입선)에 드롭하면 해당 위치에 단일 이미지 마크다운 줄을 삽입하고 갤러리에서 제거한다(`extract-gallery-image`). 갤러리에 이미지가 1장만 남으면 갤러리 블록을 단일 이미지 줄로 바꾸고, 0장이면 갤러리 블록을 제거한다.
 - `ProseImage`는 URL이 비어 있거나 로드에 실패해도 최소 높이 placeholder와 「이미지를 불러올 수 없음」 안내를 표시해 라이브 모드에서 블록 선택·편집이 가능하다.
-- 인용(`>`) 블록은 첫 인용 줄에 `> [!bg=yellow]` 또는 `> {bg=yellow}` 옵션 줄을 두면 해당 줄은 숨기고 블록 배경을 바꾼다. 지원 배경 프리셋은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`, `pink`이며, 옵션이 없으면 기존 pink 계열 기본 인용 스타일을 쓴다.
-- 관리자 **라이브 모드**(미리보기) 인라인 편집: 문단·빈 줄·제목·인용·목록·코드 블록·콜아웃·토글을 렌더 스타일 그대로 contenteditable로 수정한다. blur·문단 이동(방향키) 시 편집 영역의 `<strong>`·`<em>` 등을 `**`·`*` 마크다운으로 다시 직렬화해 저장한다. **Enter**·**Shift+Enter** 모두 다음 문단(블록) 분리. 문단 안 `/`로 슬래시 명령 메뉴(`/image`+Enter 이미지 삽입 등). **소스(작성) 모드** textarea에서도 동일한 `/` 슬래시 메뉴를 사용하며, 상단 마크다운 툴바는 두지 않는다. 슬래시 기본 제목은 **h2·h3·h4**만 표시하며, 본문 **h1**은 `/h1` 검색 시에만 삽입한다(게시물 **제목 필드**가 페이지의 유일한 h1). 콜아웃 옵션은 첫 줄 `:::callout emoji=💡 bg=blue`처럼 `emoji`·`bg`(gray|blue|green|yellow|red|purple|pink)로 지정하며, 라이브 모드에서는 아이콘 클릭으로 모달에서 편집한다(이모지 7종 프리셋·배경색 스와치, 직접 입력 없음). 코드 블록은 ` ```언어`·`nolinenos`(줄 번호 숨김)를 지원한다. 라이브·공개 모두 `ProseCodeBlock`(`#15171a`, `px-4 py-3`, `text-sm leading-6`)으로 동일하게 표시한다. 라이브 모드 호버·포커스 시 Language 입력·줄번호 토글이 보인다. 공개 화면에는 언어 라벨 옆 **복사** 버튼으로 본문을 클립보드에 넣는다. 본문 하단 클릭으로 새 문단을 추가한다.
+- 인용(`>`) 블록은 첫 인용 줄에 `> [!bg=yellow]` 또는 `> {bg=yellow}` 옵션 줄을 두면 해당 줄은 숨기고 블록 배경을 바꾼다. 지원 배경 프리셋은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이며, 옵션이 없으면 회색 기본 인용 스타일을 쓴다.
+- 관리자 **라이브 모드**(미리보기) 인라인 편집: 문단·빈 줄·제목·인용·목록·코드 블록·콜아웃·토글을 렌더 스타일 그대로 contenteditable로 수정한다. blur·문단 이동(방향키) 시 편집 영역의 `<strong>`·`<em>` 등을 `**`·`*` 마크다운으로 다시 직렬화해 저장한다. **Enter**·**Shift+Enter** 모두 다음 문단(블록) 분리. 문단 안 `/`로 슬래시 명령 메뉴(`/image`+Enter 이미지 삽입 등). **소스(작성) 모드** textarea에서도 동일한 `/` 슬래시 메뉴를 사용하며, 상단 마크다운 툴바는 두지 않는다. 슬래시 기본 제목은 **h2·h3·h4**만 표시하며, 본문 **h1**은 `/h1` 검색 시에만 삽입한다(게시물 **제목 필드**가 페이지의 유일한 h1). 콜아웃 옵션은 첫 줄 `:::callout emoji=💡 bg=blue`처럼 `emoji`·`bg`(gray|blue|green|yellow|red|purple)로 지정하며, 라이브 모드에서는 블록에 포커스가 들어오면 오른쪽 설정 패널에서 수정한다. 코드 블록은 ` ```언어`·`nolinenos`(줄 번호 숨김)를 지원한다. 라이브·공개 모두 `ProseCodeBlock`(`#15171a`, `px-4 py-3`, `text-sm leading-6`)으로 동일하게 표시한다. 라이브 모드 호버·포커스 시 Language 입력·줄번호 토글이 보인다. 공개 화면에는 언어 라벨 옆 **복사** 버튼으로 본문을 클립보드에 넣는다. 본문 하단 클릭으로 새 문단을 추가한다.
 - 이미지 파일을 붙여넣거나 드롭하면 관리자 업로드 API로 저장한 뒤 현재 커서 위치에 이미지 또는 갤러리 마크다운을 삽입한다.
 - 툴바 `이미지`·`갤러리`는 미디어 모달을 연다. 모달 기본 탭은 **미디어 라이브러리**이며 **업로드** 탭에서 드래그·파일 선택 후 즉시 삽입한다.
 - 미디어 라이브러리에서 단일 이미지를 선택하면 `![alt](url)` 형식으로 삽입한다.
@@ -691,7 +691,7 @@ components/content/
 - 콜아웃 블록은 `:::callout` fenced block 안에 본문을 저장한다.
 - 콜아웃 블록은 선언부 옵션으로 `emoji`, `bg`를 저장할 수 있다. 예: `:::callout emoji=💡 bg=blue`
 - `emoji=none`이면 공개 렌더러에서 이모지를 숨긴다.
-- 콜아웃 배경 프리셋은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`, `pink`를 지원한다.
+- 콜아웃 배경 프리셋은 인용 블록과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`를 지원한다.
 - 토글 블록은 `:::toggle 제목` fenced block 안에 펼침 본문을 저장한다. 라이브 모드에서는 제목·본문을 인라인 편집하며, chevron으로 펼침·접힘 시 본문이 애니메이션된다.
 - 임베드 블록은 이미지 파일 URL을 제외한 단독 `http(s)` URL 한 줄을 기본 저장 형식으로 사용한다.
 - 기존 `:::embed` fenced block은 이전 콘텐츠 호환을 위해 계속 파싱·렌더링한다.
diff --git a/docs/update.md b/docs/update.md
index 46d5ab7..6d3213c 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,12 @@
 # 업데이트 이력
 
+## v1.5.46
+
+- 게시물 글쓰기: 콜아웃 배경색에서 분홍 옵션 제거.
+- 게시물 글쓰기: 콜아웃 배경색을 인용 블록과 같은 색상 팔레트로 통일.
+- 게시물 글쓰기: 라이브 모드 방향키 이동 시 콜아웃·인용 블록 선언 줄에 커서가 걸려 사라지던 문제 수정.
+- 게시물 글쓰기: 작은 화면에서 게시물 설정 패널이 본문 폭을 압축하지 않도록 고정 오버레이로 표시.
+
 ## v1.5.45
 
 - 게시물 글쓰기: 인용 블록 기본 배경색을 회색으로 변경.
diff --git a/lib/markdown-callout.js b/lib/markdown-callout.js
index 3a01274..2b8be55 100644
--- a/lib/markdown-callout.js
+++ b/lib/markdown-callout.js
@@ -1,5 +1,5 @@
 /** @type {string[]} */
-export const CALLOUT_BACKGROUND_OPTIONS = ['gray', 'blue', 'green', 'yellow', 'red', 'purple', 'pink']
+export const CALLOUT_BACKGROUND_OPTIONS = ['gray', 'blue', 'green', 'yellow', 'red', 'purple']
 
 /** @type {string[]} */
 export const QUOTE_BACKGROUND_OPTIONS = ['gray', 'blue', 'green', 'yellow', 'red', 'purple']
@@ -24,6 +24,9 @@ export const QUOTE_BACKGROUND_SWATCHES = {
   purple: 'color-mix(in srgb, #8800ff 10%, #ffffff)'
 }
 
+/** @type {Record<string, string>} */
+export const CALLOUT_BACKGROUND_SWATCHES = QUOTE_BACKGROUND_SWATCHES
+
 /** @type {string[]} */
 export const CALLOUT_EMOJI_OPTIONS = ['💡', '⚠️', '❗', '✅', '📌', '🔥', '💬']
 
diff --git a/package-lock.json b/package-lock.json
index 5f738ac..62b6a71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.5.45",
+  "version": "1.5.46",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.5.45",
+      "version": "1.5.46",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index d55d09c..0aadc0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.5.45",
+  "version": "1.5.46",
   "private": true,
   "type": "module",
   "imports": {