diff --git a/docs/conventions/component-convention.md b/docs/conventions/component-convention.md
index 6034744..e68cf6c 100644
--- a/docs/conventions/component-convention.md
+++ b/docs/conventions/component-convention.md
@@ -59,6 +59,7 @@ interface RentalItemCardProps {
   2. **이름 붙인 토큰**: 화면의 기준이 되는 크기(배너 높이 등)나 Figma 효과 스타일(그림자)은 `index.css`의 `@theme`에 이름을 붙여 쓴다 — `--spacing-notice-banner: 261px` → `h-notice-banner`, `--shadow-spread-small` → `shadow-spread-small`. 색 토큰과 같은 방식이다.
   3. **구조로 없애기**: 그림 위치·크기를 숫자로 맞춰야 하는 자리는 에셋을 Figma 배치대로 잘라 받아(카드 크기 그림, 회전이 반영된 SVG 등) `w-full`·고유 크기로 놓는다. 글자 폭처럼 남는 공간을 채우는 값은 `flex-1`·`min-w-0`으로 둔다.
   4. **예외**: 0.5px 선처럼 단계·토큰으로 나타낼 수 없는 값만 임의값으로 쓰고, 어느 Figma 값인지 주석을 남긴다.
+- **회색 배경 위 흰 카드 사이는 8px(`gap-2`)로 통일한다.** 화면마다 12px로 그려진 곳이 섞여 있었는데 디자이너가 8px로 정리했다(Figma `4174:101198` 간격통일, #123). Figma가 12px로 보여도 흰 카드끼리면 8px로 둔다. 섹션 제목과 카드 묶음 사이, 카드 안쪽 간격은 이 규칙과 별개다.
 
 ### 타이포그래피
 
diff --git a/src/features/events/EventsApplicationScreen.tsx b/src/features/events/EventsApplicationScreen.tsx
index 5131d9d..6239e16 100644
--- a/src/features/events/EventsApplicationScreen.tsx
+++ b/src/features/events/EventsApplicationScreen.tsx
@@ -121,7 +121,7 @@ function EventsApplicationScreen() {
   return (
     <div className="flex h-full flex-col">
       <div className="scrollbar-hidden flex-1 overflow-y-auto">
-        <div className="flex flex-col gap-3 px-5 pb-8">
+        <div className="flex flex-col gap-2 px-5 pb-8">
           <EventsSummaryCard
             dateTime={dateTime}
             eventName={eventName}
diff --git a/src/features/feedbacks/components/FeedbacksMineList.tsx b/src/features/feedbacks/components/FeedbacksMineList.tsx
index 48a0fa2..c8e98e5 100644
--- a/src/features/feedbacks/components/FeedbacksMineList.tsx
+++ b/src/features/feedbacks/components/FeedbacksMineList.tsx
@@ -28,7 +28,7 @@ function FeedbacksMineList({ onSelect, onWrite }: FeedbacksMineListProps) {
   }
 
   return (
-    <div className="flex flex-col gap-3 px-5 pb-4">
+    <div className="flex flex-col gap-2 px-5 pb-4">
       {feedbacks.map((feedback) => (
         <FeedbacksHistoryCard
           feedback={feedback}
diff --git a/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx b/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx
index fdd8aad..02d0410 100644
--- a/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx
+++ b/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx
@@ -10,7 +10,7 @@ function FeedbacksMineSkeleton() {
   const animation = useSkeletonAnimation();
 
   return (
-    <div className="flex flex-col gap-3 overflow-hidden px-5">
+    <div className="flex flex-col gap-2 overflow-hidden px-5">
       {SKELETON_ROW_KEYS.slice(0, 3).map((key) => (
         <div
           className="flex flex-col gap-2 rounded-xl bg-background-normal p-4"
diff --git a/src/features/home/HomeScreen.tsx b/src/features/home/HomeScreen.tsx
index b87a01a..2040be7 100644
--- a/src/features/home/HomeScreen.tsx
+++ b/src/features/home/HomeScreen.tsx
@@ -90,15 +90,15 @@ function HomeScreen() {
             }
           />
         </div>
-        <div className="flex flex-col gap-3 pt-0.5 pb-4">
+        <div className="flex flex-col gap-2 pt-0.5 pb-4">
           <HomeNoticeBanner
             notices={HOME_MOCK_DATA.notices}
             onSelect={(noticeId) => push(`/notices/${noticeId}`)}
           />
           {/* 배너 카드(relative)가 뒤 섹션보다 나중에 그려져 그림자가 덮지 않게 뒤 섹션도 relative로 둔다 */}
-          <div className="relative flex flex-col gap-3">
+          <div className="relative flex flex-col gap-2">
             {HOME_MOCK_DATA.applyCards.length > 0 && (
-              <div className="flex flex-col gap-3 px-5">
+              <div className="flex flex-col gap-2 px-5">
                 {HOME_MOCK_DATA.applyCards.map((card) => (
                   <HomeApplyCard
                     card={card}