홈 Featured 슬라이드 폭을 원본 비율 기준으로 세부 조정.

브레이크포인트별 카드 노출 비율(1.4/1.6/2.6)에 맞춘 폭 계산식을 적용하고, 좌우 이동량도 실제 카드 폭 기준으로 계산해 슬라이드 이동 감각을 원본에 가깝게 보정했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/update.md

@@ -19,6 +19,7 @@
 - 홈 Latest와 태그 상세 목록 카드 우하단 hover 화살표 액션 버튼 추가.
 - 홈 Latest와 태그 상세 목록 카드의 우하단 액션 화살표를 텍스트에서 SVG 아이콘으로 교체.
 - 홈 Featured 영역을 그리드에서 가로 슬라이드 트랙(좌우 버튼 이동) 구조로 변경.
+- 홈 Featured 슬라이드 폭을 브레이크포인트별 1.4/1.6/2.6 카드 비율 계산식으로 보정.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44

pages/index.vue

@@ -74,7 +74,10 @@ const scrollFeatured = (direction) => {
     return
   }
 
-  const offset = direction === 'left' ? -268 : 268
+  const firstCard = featuredTrackRef.value.querySelector('[data-featured-slide]')
+  const cardWidth = firstCard ? firstCard.getBoundingClientRect().width : 244
+  const gap = 24
+  const offset = direction === 'left' ? -(cardWidth + gap) : cardWidth + gap
 
   featuredTrackRef.value.scrollBy({
     left: offset,
@@ -118,13 +121,14 @@ const scrollFeatured = (direction) => {
         </div>
         <div
           ref="featuredTrackRef"
-          class="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          class="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-1 [--slides:1.4] sm:[--slides:1.6] lg:[--slides:2.6] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         >
           <NuxtLink
             v-for="post in featuredPosts"
             :key="`featured-${post.slug}`"
             :to="`/post/${post.slug}`"
-            class="group relative block aspect-video w-[244px] shrink-0 snap-start overflow-hidden rounded-[10px] sm:w-[260px] lg:w-[244px]"
+            class="group relative block aspect-video w-[calc((100%-(24px*(var(--slides)-1)))/var(--slides))] shrink-0 snap-start overflow-hidden rounded-[10px]"
+            data-featured-slide
           >
             <img
               v-if="post.featuredImage"