fix(sw): viewer popup inputs match the property window, header labels hide by group

Viewer popup value inputs (number, text) take the property window field: transparent
1px border, radius 2, 7px inset, 14px 500 #E60403; hover / editing border, #0F0D0A
editing face with the outlined value. A field unit (px/mm) sits inside the box and
turns white on the editing face. Layer search, sizes and layout unchanged.

Viewer header labels hide per iconOnlyBelow value instead of one by one: 레이어 /
설정 / 속성 together, 전체 보기 on its own; More collapse unchanged.

Verified in Storybook: Settings Popup editing / unit / gauge sync; Responsive More
at 1920 / 1440 / 1280 / ~1100 / 950, shrink-and-grow restore, no overflow.
Not re-run: viewer browser tests.

packages/sw/src/components/sw-viewer/SWViewerHeader.tsx

@@ -94,25 +94,24 @@ const isShown = (item: { id: string; hidden?: boolean }, collapsed: ReadonlySet<
 
 /**
  * Measured responsive steps (2026-10-21), applied one at a time while the header has no room left and undone in reverse
- * order once the room a step freed is back: 1. items with an `icon` and `iconOnlyBelow` show their icon only one by one
- * (label kept as tooltip and accessible name); 2. `collapseBelow` items move into More one by one, the higher value first and,
- * for the same value, the rightmost first. No fixed width decides a step: the values only give the order.
+ * order once the room a step freed is back: 1. items with an `icon` and `iconOnlyBelow` show their icon only, the items
+ * sharing one value together (label kept as tooltip and accessible name), the higher value first; 2. `collapseBelow` items
+ * move into More one by one, the higher value first and, for the same value, the rightmost first. No fixed width decides
+ * a step: the values only give the order and the sets.
  */
 type Step = { kind: "icons"; ids: string[] } | { kind: "collapse"; id: string }
-// 2026-10-22 (user request): labels hide one item at a time (not all at once), so a label with room stays (e.g. 전체 보기
-// at 1440 / 1280): the higher `iconOnlyBelow` first, the rightmost first for the same value; extra icons (Open) first.
+// 2026-10-22 (user request, replaces the one-by-one labels of 83405c4): one icon step per `iconOnlyBelow` value, so e.g.
+// 레이어 / 설정 / 속성 (900) hide and come back together and 전체 보기 (560) on its own; extra icons (Open) first.
 function responsiveSteps(groups: SWViewerHeaderGroup[], extraIcons: string[] = []): Step[] {
-  const icons: { id: string; rank: number; order: number }[] = extraIcons.map((id, order) => ({ id, rank: Infinity, order }))
+  const icons = new Map<number, string[]>(extraIcons.length ? [[Infinity, [...extraIcons]]] : [])
   const collapse: { id: string; rank: number; order: number }[] = []
   groups.filter(group => !group.hidden).flatMap(group => group.items).forEach((item, order) => {
     if (item.hidden) return
-    if (item.type !== "custom" && item.icon && !item.iconOnly && item.iconOnlyBelow !== undefined) icons.push({ id: item.id, rank: item.iconOnlyBelow, order: order + extraIcons.length })
+    if (item.type !== "custom" && item.icon && !item.iconOnly && item.iconOnlyBelow !== undefined) icons.set(item.iconOnlyBelow, [...(icons.get(item.iconOnlyBelow) ?? []), item.id])
     if (item.collapseBelow !== undefined) collapse.push({ id: item.id, rank: item.collapseBelow, order })
   })
-  const byRank = (a: { rank: number; order: number }, b: { rank: number; order: number }) => b.rank - a.rank || b.order - a.order
-  icons.sort(byRank)
-  collapse.sort(byRank)
-  return [...icons.map(item => ({ kind: "icons" as const, ids: [item.id] })), ...collapse.map(item => ({ kind: "collapse" as const, id: item.id }))]
+  collapse.sort((a, b) => b.rank - a.rank || b.order - a.order)
+  return [...[...icons].sort(([a], [b]) => b - a).map(([, ids]) => ({ kind: "icons" as const, ids })), ...collapse.map(item => ({ kind: "collapse" as const, id: item.id }))]
 }
 
 /**