fix(storybook): align viewer property popup card layout

src/sw/sw-viewer-fixture.tsx

@@ -194,6 +194,8 @@ export function OptionsPanel({ demo, ...placement }: { demo: ViewerDemo } & Pane
   )
 }
 
+// 2026-10-23 (user request, viewer screenshot layout; same data): the id badge above two card groups.
+const ENTITY_ID = "LINE · h=2F1A"
 const ENTITY_ROWS: [string, string][] = [["유형", "LINE"], ["레이어", "CX-BORD-LIN1"], ["색상", "ByLayer"], ["선종류", "Continuous"]]
 const GEOMETRY_ROWS: [string, string][] = [["시작 X", "18432.512"], ["시작 Y", "2210.004"], ["끝 X", "18992.040"], ["끝 Y", "2210.004"], ["길이", "559.528"]]
 
@@ -205,8 +207,9 @@ export function PropertiesPanel({ demo, selected = true, ...placement }: { demo:
     <SWViewerPanel title="속성" open={demo.panels.properties} onClose={() => demo.toggle("properties", false)} {...placement}
       headerActions={selected ? <SWViewerButton variant="ghost" aria-label="선택 확대" title="선택 확대" onClick={() => demo.record("zoomToSelection (미연결)")}><ZoomIn size={16} /></SWViewerButton> : undefined}>
       {selected ? <>
-        <SWViewerSection surface="plain" title="일반 정보 (General)"><SWViewerBadge>LINE · h=2F1A</SWViewerBadge>{rows(ENTITY_ROWS)}</SWViewerSection>
-        <SWViewerSection surface="plain" title="기하 속성 (Geometry)" className="sw-viewer-story-props-next">{rows(GEOMETRY_ROWS)}</SWViewerSection>
+        <SWViewerBadge className="sw-viewer-story-props-id">{ENTITY_ID}</SWViewerBadge>
+        <SWViewerSection title="일반 정보 (General)">{rows(ENTITY_ROWS)}</SWViewerSection>
+        <SWViewerSection title="기하 속성 (Geometry)">{rows(GEOMETRY_ROWS)}</SWViewerSection>
       </> : (
         <div className="sw-viewer-story-empty"><MousePointerClick size={24} aria-hidden="true" />도면에서 객체(엔티티)를 클릭하면<br />상세 속성이 표시됩니다</div>
       )}

src/sw/sw-viewer-stories.css

@@ -34,12 +34,14 @@
 /* Visibility button around the public SWLayerVisibilityIcon (header bulb art, 20 x 20); 24 x 24 hit area kept. */
 .sw-viewer-story-bulb { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; }
 .sw-viewer-story-bulb:hover { background: rgba(154, 146, 132, 0.3); }
+/* 속성 Popup (2026-10-23): the id badge above the card groups (own width); the groups are default card Sections, so the
+   8px body gap alone separates them. Rows: name left, value right (ellipsis), thin property-table rule between rows. */
+.sw-viewer-story-props-id { align-self: flex-start; max-width: 100%; }
 .sw-viewer-story-props { margin: 0; }
-/* Property groups read as separate blocks: the panel spacing token on top of the shared 8px body gap (20px in all). */
-.sw-viewer-story-props-next { margin-top: var(--hm-sw-viewer-panel-spacing); }
-.sw-viewer-story-props > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hm-sw-viewer-panel-inner-border); font-size: 14px; }
-.sw-viewer-story-props dt { color: var(--hm-sw-viewer-panel-label); font-weight: 500; }
-.sw-viewer-story-props dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hm-sw-viewer-panel-text); user-select: all; }
+.sw-viewer-story-props > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hm-sw-property-table); font-size: 14px; }
+.sw-viewer-story-props > div:last-child { border-bottom: 0; }
+.sw-viewer-story-props dt { flex-shrink: 0; color: var(--hm-sw-viewer-panel-label); font-weight: 500; }
+.sw-viewer-story-props dd { min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; color: var(--hm-sw-viewer-panel-text); user-select: all; }
 .sw-viewer-story-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; text-align: center; font-size: 12px; color: var(--hm-sw-viewer-panel-label); }
 .sw-viewer-story-steps { margin: 0; padding-left: 20px; font-size: 14px; }
 .sw-viewer-story-context { display: flex; align-items: center; justify-content: center; height: 160px; border: 1px dashed #9a9284; border-radius: 4px; background: #f5f0e5; color: #3e3523; font-size: 13px; }