게시물 카드 클릭 피드백 통일 및 개선

- 메인·전체·태그 목록 카드 제목을 포인트 컬러로 강조하는 공통 인터랙션 적용
- 회색 배경 hover 제거로 모바일 sticky 배경·탭 하이라이트 해소
- 데스크톱 hover 기기 전용 색 변경, 모바일은 :active 눌림 반영
- v1.10.35

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

assets/css/main.css

@@ -284,6 +284,27 @@
     background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
   }
 
+  /**
+   * 게시물 카드 제목 링크 공통 인터랙션 — 메인·전체 목록 통일.
+   * 데스크톱은 실제 hover 가능 기기에서만 색을 바꾸고, 모바일은 누르는 순간(:active)에만 반영해
+   * 탭 후 색이 남는 sticky hover와 회색 탭 하이라이트를 없앤다.
+   */
+  .post-title-link {
+    color: var(--site-text);
+    transition: color 0.15s ease;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @media (hover: hover) {
+    .post-title-link:hover {
+      color: var(--site-accent);
+    }
+  }
+
+  .post-title-link:active {
+    color: var(--site-accent);
+  }
+
   /**
    * 왼쪽 사이드바 1차 네비·태그 카테고리·테마 점 등 행 호버 — 라이트 테마에서 밝은 크림 톤, 다크는 패널 대비 유지
    */

components/site/PostCard.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <article class="post-card site-section site-panel-hover group relative">
+  <article class="post-card site-section group relative">
     <div class="post-card__body site-section-body flex gap-4">
       <PostCardMedia
         :to="post.to"
@@ -20,7 +20,7 @@ defineProps({
       />
       <div class="post-card__content min-w-0">
         <h2 class="post-card__title text-base font-semibold leading-tight">
-          <NuxtLink class="post-card__title-link site-interactive hover:opacity-70" :to="post.to">
+          <NuxtLink class="post-card__title-link post-title-link" :to="post.to">
             {{ post.title }}
           </NuxtLink>
         </h2>

docs/map.md

@@ -413,7 +413,7 @@
 | package.json | Nuxt 실행 스크립트와 의존성 |
 | nuxt.config.js | Nuxt 앱 설정, `tailwindcss.cssPath`로 `main.css` 단일 엔트리, Tailwind 모듈, 관리자 QA를 위한 개발 도구 비활성화, 회원 썸네일 최소/최대 해상도·품질 런타임 설정 |
 | tailwind.config.js | Tailwind 테마 설정 |
-| assets/css/main.css | 전역 스타일, 공개 배경·사이드바 배경 통일 기준, 관리자 라이트 테마 격리(`admin-layout`), 좌측 사이드바/그리드 전환 애니메이션, 네비게이션 세로 바 hover 효과 |
+| assets/css/main.css | 전역 스타일, 공개 배경·사이드바 배경 통일 기준, 관리자 라이트 테마 격리(`admin-layout`), 좌측 사이드바/그리드 전환 애니메이션, 네비게이션 세로 바 hover 효과, 게시물 카드 제목 공통 인터랙션(`post-title-link`), 이동 중 클릭 잠금(`site-navigating`) |
 | composables/useMenuState.js | 좌측 메뉴 열림 상태·`closeMenu`(모바일 백드롭 등), 모바일은 마운트 시 항상 닫힘 시작·`menuMounted`로 첫 페인트 슬라이드 플래시 방지 |
 | composables/useThemeMode.js | 사용자 화면 라이트/다크 테마 상태 관리 |
 | middleware/admin-auth.global.js | 관리자 페이지 접근 인증 |

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.10.35
+
+- 게시물 카드 클릭 피드백을 메인·전체 목록·태그 목록에서 제목 포인트 컬러 강조로 통일.
+- 전체·태그 목록 카드의 회색 배경 hover 제거(모바일 탭 후 남는 sticky 배경 해소).
+- 공통 `.post-title-link` 추가: 데스크톱은 hover 가능 기기에서만 색 변경, 모바일은 `:active` 눌림에만 반영, 회색 탭 하이라이트 제거.
+
 ## v1.10.34
 
 - 페이지 이동 중 링크·버튼 중복 클릭(연타) 차단 추가.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.10.34",
+  "version": "1.10.35",
   "private": true,
   "type": "module",
   "imports": {

pages/index.vue

@@ -1022,7 +1022,7 @@ watch([latestPosts, hasHomeInfeedAd], () => {
                 >
                   <div class="post-feed__content-inner flex min-h-0 flex-1 flex-col gap-1">
                     <h2 class="max-w-[90%] text-sm font-medium leading-tight">
-                      <NuxtLink :to="post.to" class="flex items-center transition-opacity duration-200 hover:opacity-75">
+                      <NuxtLink :to="post.to" class="post-title-link flex items-center">
                         <span v-if="post.isFeatured" class="post-feed__featured-icon mr-1 inline-flex h-4 w-4 items-center justify-center text-[var(--site-accent)]">
                           <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                             <path d="M13 3v7h6l-8 11v-7H5l8-11" />

pages/tag/[slug].vue

@@ -118,7 +118,7 @@ const tagPosts = computed(() => (postsResponse.value?.items || [])
           <article
             v-for="post in tagPosts"
             :key="post.to"
-            class="tag-posts-list__item site-section site-panel-hover group relative text-[var(--site-text)]"
+            class="tag-posts-list__item site-section group relative text-[var(--site-text)]"
           >
             <div class="tag-posts-list__body site-section-body flex flex-row gap-3">
               <PostCardMedia
@@ -133,7 +133,7 @@ const tagPosts = computed(() => (postsResponse.value?.items || [])
               <div class="relative flex-[3] md:flex-[4]">
                 <div class="flex h-full flex-col gap-1.5">
                   <h2 class="max-w-[90%] text-sm font-medium leading-tight">
-                    <NuxtLink :to="post.to" class="flex items-center transition-opacity duration-200 hover:opacity-75">
+                    <NuxtLink :to="post.to" class="post-title-link flex items-center">
                       <span v-if="post.isFeatured" class="post-feed__featured-icon mr-1 inline-flex h-4 w-4 items-center justify-center text-[var(--site-accent)]">
                         <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                           <path d="M13 3v7h6l-8 11v-7H5l8-11" />