feat(viewer): refine visual details to match design reference

Co-Authored-By: Claude Code <noreply@anthropic.com>

apps/viewer/src/components/PhotoLightbox.vue

@@ -602,6 +602,7 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
+      <!-- 参考稿：42px 细体（200）字形箭头 + 半透明圆底 rgba(0,0,0,.13) -->
       <button
         type="button"
         class="nav prev"
@@ -609,9 +610,7 @@ onBeforeUnmount(() => {
         :aria-label="t('viewer.previous')"
         @click="goTo(index - 1)"
       >
-        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-          <path d="m15 18-6-6 6-6" />
-        </svg>
+        <span class="nav-glyph" aria-hidden="true">‹</span>
       </button>
       <button
         type="button"
@@ -620,9 +619,7 @@ onBeforeUnmount(() => {
         :aria-label="t('viewer.next')"
         @click="goTo(index + 1)"
       >
-        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-          <path d="m9 6 6 6-6 6" />
-        </svg>
+        <span class="nav-glyph" aria-hidden="true">›</span>
       </button>
 
       <!-- 心形粒子层（Task 5 / V05 §6.2）：装饰性、不可交互；触发见上方互动编排 -->
@@ -849,23 +846,25 @@ onBeforeUnmount(() => {
   padding: 4px 12px;
   cursor: pointer;
 }
+/* 参考稿切换箭头：44px 宽 48px 高圆钮、半透明黑底 rgba(0,0,0,.13)、
+ * 42px/200 细体字形、白字 + 深色 text-shadow；top calc(50% - 24px)。 */
 .nav {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  top: calc(50% - 24px);
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--viewer-touch-target, 44px);
-  height: var(--viewer-touch-target, 44px);
+  height: 48px;
   border: none;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.13);
   color: #ffffff;
+  padding: 0;
   cursor: pointer;
 }
 .nav:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(0, 0, 0, 0.3);
 }
 .nav:focus-visible {
   outline: 2px solid var(--viewer-primary, #1a73e8);
@@ -874,20 +873,20 @@ onBeforeUnmount(() => {
   opacity: 0.3;
   cursor: default;
 }
-.nav svg {
-  width: 28px;
-  height: 28px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.nav-glyph {
+  font-size: 2.625rem;
+  font-weight: 200;
+  line-height: 1;
+  text-shadow: 0 1px 8px #000;
+  /* 字形基线在圆内视觉居中 */
+  transform: translateY(-2px);
+  user-select: none;
 }
 .nav.prev {
-  left: 8px;
+  left: 4px;
 }
 .nav.next {
-  right: 8px;
+  right: 4px;
 }
 
 /* 粒子层/互动提示层的定位与样式由 HeartParticles / InteractionNotice 自带
@@ -936,8 +935,9 @@ onBeforeUnmount(() => {
  * PhotoActionBar（§5.4：下载关闭移除整项并均分剩余栏宽）。 */
 .viewer-actionbar {
   flex: none;
-  padding: 6px 12px;
-  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+  /* 参考稿：5px 16px（+ 底部安全区） */
+  padding: 5px 16px;
+  padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
   background: rgba(14, 18, 24, 0.72);
 }