vivid 短文标记去线改淡底块：背景不占布局宽度，正文与卡片左缘对齐，区分信号 = accent 淡底 + SHORT 徽标

frontend/src/ui/yohaku/home.css

@@ -107,18 +107,18 @@ html[data-ui='vivid'] .card .tags {display:flex;gap:14px;flex-wrap:wrap;margin-t
 html[data-ui='vivid'] .tg {font-size:12.5px;font-weight:600;color:var(--muted);
   transition:color .35s var(--ease);}
 html[data-ui='vivid'] .tg::before {content:"#"}
-/* 短文纸条：左线收细到 2px，去掉 12px 左外边距、内边距收窄——
-   短文本身显示面积就少，左侧原来共吃掉近 60px（wrap 20 + margin 12 +
-   border 3 + padding 24），内容往边框靠，给正文腾宽度 */
-html[data-ui='vivid'] .note {display:block;background:transparent;
-  border-left:2px solid var(--accent);
-  border-radius:0 var(--radius) var(--radius) 0;
-  padding:14px 16px;
+/* 短文纸条：不再用左线标记（线 + 内边距在手机上吃掉近 30px，且离内容有段
+   间距）。区分改用两层信号：极淡的强调色底块（背景不占布局宽度）+ meta 里的
+   SHORT 徽标；正文与长文卡片左缘对齐，一行内容都不浪费。 */
+html[data-ui='vivid'] .note {display:block;
+  background:color-mix(in srgb,var(--accent) 7%,transparent);
+  border-radius:var(--radius);
+  padding:14px;
   margin-left:0;
   position:relative;
   transition:background .35s var(--ease),transform .55s var(--spring),border-color .3s;}
 @media (hover: hover) and (pointer: fine) {
-  html[data-ui='vivid'] .note:hover {background:var(--card);
+  html[data-ui='vivid'] .note:hover {background:color-mix(in srgb,var(--accent) 12%,transparent);
   transform:translateX(6px);
   box-shadow:var(--shadow);}
 }