v0.0.52: Featured 정렬·상세 메타 구분자

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

docs/history.md

@@ -1,5 +1,11 @@
 # 의사결정 이력
 
+## 2026-05-08 v0.0.52
+
+### 목록 Featured 아이콘 정렬과 상세 메타 구분자
+
+홈/태그 목록에서 Featured 아이콘을 제목 텍스트 라인에 단순 `inline-flex`+음수 마진으로 올리면, 특정 폰트 렌더링에서 라인박스 높이가 달라져 카드 높이가 미묘하게 흔들릴 수 있다. 아이콘을 `h-4 w-4` 고정 박스로 만들고 `items-center`로 정렬해 제목 줄 높이를 안정화했다. 게시물 상세의 제목 아래 메타 정보는 원본 스킨처럼 `/` 구분자를 매번 수동으로 넣지 않고, 래퍼에서 `after` 규칙으로 일관되게 출력하도록 통일했다.
+
 ## 2026-05-08 v0.0.51
 
 ### 사이드바 고정 높이와 발행일 포맷

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v0.0.52
+
+- 홈/태그 목록 Featured 아이콘이 제목 줄 높이를 흔들지 않도록 고정 크기(`h-4 w-4`)·정렬 방식으로 보정.
+- 게시물 상세 제목 아래 메타 정보에 `/` 구분자 표시를 `after` 규칙으로 통일.
+
 ## v0.0.51
 
 - 좌·우 사이드바 데스크톱 열 높이를 `calc(100vh - 57px)`로 고정해 내부 스크롤·하단 푸터 배치가 뷰포트 기준으로 맞도록 수정.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "private": true,
   "type": "module",
   "scripts": {

pages/index.vue

@@ -350,8 +350,8 @@ const scrollFeatured = (direction) => {
                 >
                   <h2 class="max-w-[90%] text-sm font-medium leading-tight">
                     <NuxtLink :to="post.to" class="transition-opacity duration-200 hover:opacity-75">
-                      <span v-if="post.isFeatured" class="mr-1 inline-flex text-[var(--site-accent)] [&_svg]:-mt-0.5">
-                        <svg 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">
+                      <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" />
                         </svg>
                       </span>
@@ -370,7 +370,7 @@ const scrollFeatured = (direction) => {
                     <time v-if="post.publishedAt" :datetime="post.publishedAtIso">{{ post.publishedAt }}</time>
                     <span class="text-[var(--site-line)]">/</span>
                     <span
-                      class="rounded-sm px-1.5 py-px font-medium text-[var(--site-text)]"
+                      class="rounded-md px-1.5 py-px font-medium text-[var(--site-text)]"
                       :style="{ backgroundColor: `${post.tagColor}1a` }"
                     >
                       {{ post.tagName }}

pages/post/[slug].vue

@@ -131,7 +131,7 @@ useHead(() => ({
         </h1>
 
         <div class="relative border-b border-[var(--site-line)] pb-4">
-          <div class="flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5">
+          <div class="post-detail__meta flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5 [&>*]:after:content-['/'] [&>*]:after:ml-2 sm:[&>*]:after:ml-1.5 [&>*]:after:text-[var(--site-line)] [&>*:last-child]:after:hidden">
             <time v-if="publishedAtLabel" :datetime="post.publishedAt">
               {{ publishedAtLabel }}
             </time>

pages/tag/[slug].vue

@@ -73,8 +73,8 @@ const tagPosts = computed(() => posts.value
               <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="transition-opacity duration-200 hover:opacity-75">
-                    <span v-if="post.isFeatured" class="mr-1 inline-flex text-[var(--site-accent)] [&_svg]:-mt-0.5">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <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" />
                       </svg>
                     </span>
@@ -88,7 +88,7 @@ const tagPosts = computed(() => posts.value
                   <time v-if="post.publishedAt" :datetime="post.publishedAtIso">{{ post.publishedAt }}</time>
                   <span class="text-[var(--site-line)]">/</span>
                   <span
-                    class="rounded-sm px-1.5 py-px font-medium text-[var(--site-text)]"
+                    class="rounded-md px-1.5 py-px font-medium text-[var(--site-text)]"
                     :style="{ backgroundColor: `${post.tagColor}1a` }"
                   >
                     {{ post.tag }}