feat: improve back link UI with arrow transition and styling updates

app/pages/writing/[...slug].vue

@@ -26,7 +26,10 @@ definePageMeta({
     >
         <template #header-upper>
             <div class="header-upper-inner">
-                <NuxtLink href="/writing"><-- Back</NuxtLink>
+                <NuxtLink to="/writing" class="back-link" aria-label="Back to writing">
+                    <span class="arrow">←</span>
+                    <span>Back</span>
+                </NuxtLink>
             </div>
         </template>
         <ContentRenderer class="writing__content" v-if="page" :value="page" />
@@ -37,16 +40,26 @@ definePageMeta({
 .header-upper-inner {
     display: flex;
     align-items: center;
-    gap: 1rem;
     height: 100%;
     padding: 0 2rem;
 }
 
-.header-upper-inner a {
+.back-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     font-size: small;
     color: var(--text);
-    text-decoration: underline;
-    text-underline-offset: 4px;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+}
+
+.back-link .arrow {
+    transition: transform 0.2s ease;
+}
+
+.back-link:hover .arrow {
+    transform: translateX(-4px);
 }
 
 .writing__content {