@hjmds/react 1.27.1 → 1.28.0

package/dist/styles.layered.css

@@ -62,9 +62,9 @@
 .hjm-text[data-variant="title"] { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
 .hjm-text[data-variant="titleLarge"] { font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); }
 .hjm-text[data-variant="heading"] { font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); }
-.hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-font-weight-regular); }
-.hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-font-weight-semibold); }
-.hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-font-weight-bold); }
+.hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-text-emphasis-regular); }
+.hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-text-emphasis-medium); }
+.hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-text-emphasis-strong); }
 .hjm-text[data-tone="primary"] { color: var(--hjm-color-text); }
 .hjm-text[data-tone="body"] { color: var(--hjm-color-text-body); }
 .hjm-text[data-tone="muted"] { color: var(--hjm-color-text-muted); }
@@ -162,7 +162,7 @@
   border-radius: var(--hjm-radius-md);
   color: var(--hjm-color-on-primary);
   background: var(--hjm-color-primary);
-  font-weight: var(--hjm-font-weight-semibold);
+  font-weight: var(--hjm-text-emphasis-medium);
   text-decoration: none;
   transform: translateY(calc(-100% - (2 * var(--hjm-space-sm))));
   transition: transform var(--hjm-motion-fast);
@@ -214,7 +214,7 @@
 .hjm-icon-button,
 .hjm-link {
   font: inherit;
-  font-weight: var(--hjm-font-weight-semibold);
+  font-weight: var(--hjm-text-emphasis-medium);
   transition: background-color var(--hjm-motion-fast), color var(--hjm-motion-fast), opacity var(--hjm-motion-fast), transform var(--hjm-motion-fast);
 }
 .hjm-button,
@@ -304,6 +304,23 @@
 .hjm-icon-button[data-size="small"] { inline-size: var(--hjm-control-button-small); block-size: var(--hjm-control-button-small); min-inline-size: 0; min-block-size: 0; }
 .hjm-icon-button[data-size="small"]::after { content: ""; position: absolute; inset: calc(-1 * var(--hjm-space-xxs)); }
 .hjm-icon-button[data-size="large"] { inline-size: var(--hjm-control-button-large); block-size: var(--hjm-control-button-large); }
+/* Edge alignment (iconButtonRecipe.edge / resolveButtonEdgeOverhang, 2026-10-17 measured audit): a ghost control on a
+   container edge keeps its hit area but overhangs that edge, so its glyph slot or label sits on the inset like text.
+   Framed tones never get an overhang variable and stay put. Logical margins mirror in RTL. */
+.hjm-icon-button[data-tone="ghost"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-medium); }
+.hjm-icon-button[data-tone="ghost"][data-size="small"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-small); }
+.hjm-icon-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: var(--hjm-icon-button-edge-large); }
+/* + 1px: every Web button keeps a 1px transparent frame border (.hjm-button above) inside which the padding starts;
+   Native ghost buttons have no border, so their overhang is the padding alone. */
+.hjm-button[data-tone="ghost"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-medium) + 1px); }
+.hjm-button[data-tone="ghost"][data-size="small"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-small) + 1px); }
+.hjm-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-large) + 1px); }
+:is(.hjm-icon-button, .hjm-button):is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-edge-overhang, 0px)); }
+:is(.hjm-icon-button, .hjm-button):is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-edge-overhang, 0px)); }
+/* NotificationBell wraps a default (ghost, medium) IconButton with a badge anchored to its own end, so the bell root
+   takes the same overhang and the badge keeps the icon's corner (2026-10-17 1.27.2 adoption: Spint's top-bar bell). */
+.hjm-notification-bell:is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-icon-button-edge-medium)); }
+.hjm-notification-bell:is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
 .hjm-link { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; color: var(--hjm-color-content-brand); text-underline-offset: 0.18em; }
 .hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
 .hjm-link[data-variant="standalone"] { min-block-size: var(--hjm-control-min-touch-target); min-inline-size: var(--hjm-control-min-touch-target); justify-content: center; text-decoration: none; }
@@ -323,12 +340,15 @@
   outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
   outline-offset: var(--hjm-focus-offset);
 }
+/* An edge-aligned control overhangs into the container padding, where an outer ring can be clipped by the container's
+   overflow (lists, cards); draw the ring inside its own box instead, as the Toast close does. */
+:is(.hjm-icon-button, .hjm-button)[data-edge]:focus-visible, .hjm-notification-bell[data-edge] > .hjm-icon-button:focus-visible { outline-offset: calc(-1 * var(--hjm-focus-width)); }
 
 /* Input interiors use the theme canvas (white in light mode), not tinted
    surfaces. Focus and selection still use blue borders and compact indicators. */
 .hjm-field {
   font-family: var(--hjm-font-family-ui, inherit); display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
-.hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-field__control {
   display: flex;
   align-items: center;
@@ -467,7 +487,7 @@
   background: var(--hjm-color-bg);
   font-size: var(--hjm-type-title-size);
   line-height: var(--hjm-type-title-line-height);
-  font-weight: var(--hjm-font-weight-semibold);
+  font-weight: var(--hjm-text-emphasis-medium);
 }
 .hjm-otp-field__control[data-size="large"] .hjm-otp-field__slot { font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); }
 .hjm-otp-field__slot[data-state="filled"] { border-color: var(--hjm-color-content-brand); }
@@ -556,8 +576,8 @@
 .hjm-bottom-navigation__indicator[data-state="selected"] > :first-child { transform: scale(1.06); }
 /* Icon-only items center the indicator in the density's minimum height instead of leaving an empty label row. */
 .hjm-bottom-navigation[data-labels="hidden"] .hjm-bottom-navigation__item { justify-content: center; }
-.hjm-bottom-navigation__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-semibold); }
-.hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-bold); }
+.hjm-bottom-navigation__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); }
+.hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-semibold); }
 .hjm-bottom-navigation__badge {
   position: absolute;
   inset-block-start: calc(-1 * var(--hjm-space-xxs));
@@ -767,9 +787,9 @@
 .hjm-choice[data-state="mixed"] .hjm-choice__indicator::after, .hjm-choice__indicator[data-state="mixed"]::after { content: ""; inline-size: 10px; block-size: 2px; background: var(--hjm-color-on-primary); }
 .hjm-choice__copy { display: grid; gap: var(--hjm-space-xxs); padding-block: 2px; }
 .hjm-choice[data-state="checked"] .hjm-choice__copy > :first-child,
-.hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-bold); }
+.hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-semibold); }
 .hjm-radio-group { min-inline-size: 0; padding: 0; border: 0; }
-.hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-radio-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
 .hjm-radio-group[data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-xxs); }
 .hjm-radio-group[data-presentation="grouped"] .hjm-radio-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
@@ -777,7 +797,7 @@
 .hjm-radio-group[data-orientation="horizontal"][data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-sm); }
 .hjm-radio-group[data-orientation="horizontal"][data-presentation="grouped"] .hjm-radio-group__items { gap: 0; }
 .hjm-checkbox-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
-.hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-checkbox-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
 .hjm-checkbox-group[data-presentation="plain"] .hjm-checkbox-group__items { gap: var(--hjm-space-xxs); }
 .hjm-checkbox-group[data-presentation="grouped"] .hjm-checkbox-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
@@ -799,8 +819,9 @@
 .hjm-switch__copy { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
 .hjm-switch__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-switch[data-presentation="row"] { display: flex; inline-size: 100%; justify-content: space-between; }
-/* switchRecipe.rowTwoLineMinHeight (= list-row comfortable two-line 68), same as Native for a described switch. */
-.hjm-switch[data-two-line="true"] { min-block-size: var(--hjm-switch-row-two-line-min-height); }
+/* A described switch: copy + switchRecipe.rowPaddingVertical 8 on both sides, min rowTwoLineMinHeight 56, same as Native.
+   Stacked switch rows carry this spacing themselves; containers add no gap between them (2026-10-17). */
+.hjm-switch[data-two-line="true"] { min-block-size: var(--hjm-switch-row-two-line-min-height); padding-block: var(--hjm-switch-row-padding-vertical); }
 .hjm-switch[data-presentation="row"] .hjm-switch__copy { order: -1; flex: 1; }
 /* Inherited layout variables reset at nested providers and keep ./selection independent. */
 .hjm-root { --hjm-switch-row-direction: row; --hjm-switch-row-align: center; --hjm-switch-copy-flex: 1; }
@@ -821,15 +842,24 @@
 /* margin: 0 resets the UA fieldset 2px inline margin (as the other HJM fieldsets do); it offset the track from the parent edges. */
 .hjm-segmented { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
 /* segmentedControlRecipe (2026-10-06 follow-up): track padding/gap spacing.xxs 4, radius lg, 1px border; item radius md,
-   medium 44 · padding md, small 36 · padding sm with a 4px vertical hit slop. Web had drawn a 2px track with radius md,
-   no small size, and a 1px selected ring; Native already read the recipe. */
-.hjm-segmented__items { display: flex; min-inline-size: 0; gap: var(--hjm-space-xxs); padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); overflow-x: auto; }
-.hjm-segmented__item { position: relative; flex: 1 1 0; min-inline-size: max-content; min-block-size: var(--hjm-control-min-touch-target); display: grid; place-items: center; gap: var(--hjm-space-xxs); padding: 0 var(--hjm-space-md); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); cursor: pointer; }
-.hjm-segmented[data-size="small"]:not([data-presentation="pills"]) .hjm-segmented__item { min-block-size: 36px; padding-inline: var(--hjm-space-sm); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
+   padding md (medium) / sm (small). Web had drawn a 2px track with radius md, no small size, and a 1px selected ring;
+   Native already read the recipe. */
+/* 2026-10-17 ("높이 맞춰"): the connected control's OUTER height is the Button/Chip height of its size
+   (--hjm-segmented-height, segmentedControlRecipe.sizes.height); options get that minus the 4 padding + 1 border on
+   each side and reach the 44 target with an invisible vertical ::after. The scroller sits outside the drawn track and
+   reaches past a short track by negative margin, so neither the hit area is clipped nor the layout grows. */
+.hjm-segmented { --hjm-segmented-height: var(--hjm-control-button-medium); }
+.hjm-segmented[data-size="small"] { --hjm-segmented-height: var(--hjm-control-button-small); }
+.hjm-segmented__scroller { min-inline-size: 0; overflow-x: auto; }
+.hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__scroller { --hjm-segmented-outer-slop: max(0px, (var(--hjm-control-min-touch-target) - var(--hjm-segmented-height)) / 2); padding-block: var(--hjm-segmented-outer-slop); margin-block: calc(-1 * var(--hjm-segmented-outer-slop)); }
+.hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__items { inline-size: max-content; min-inline-size: 100%; }
+.hjm-segmented__items { display: flex; min-inline-size: 0; gap: var(--hjm-space-xxs); padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
+.hjm-segmented__item { position: relative; flex: 1 1 0; min-inline-size: max-content; min-block-size: calc(var(--hjm-segmented-height) - 2 * (var(--hjm-space-xxs) + 1px)); display: grid; place-items: center; gap: var(--hjm-space-xxs); padding: 0 var(--hjm-space-md); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
+.hjm-segmented[data-size="small"]:not([data-presentation="pills"]) .hjm-segmented__item { padding-inline: var(--hjm-space-sm); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
 /* Vertical only: neighbours are 4px apart, so a horizontal slop would overlap the next option's target. */
-.hjm-segmented[data-size="small"]:not([data-presentation="pills"]) .hjm-segmented__item::after { content: ""; position: absolute; inset: -4px 0; }
+.hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__item::after { content: ""; position: absolute; inset: calc((var(--hjm-segmented-height) - 2 * (var(--hjm-space-xxs) + 1px) - var(--hjm-control-min-touch-target)) / 2) 0; }
 .hjm-segmented__item input { position: absolute; opacity: 0; }
-.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 2px var(--hjm-color-focus); color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); font-weight: var(--hjm-font-weight-bold); }
+.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 2px var(--hjm-color-focus); color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 
 /* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
@@ -840,17 +870,19 @@
    Pills are excluded (segmentedControlRecipe.pills.largeTextLayout "wrap", 1.13.1): they wrap in a block and
    stay one line in a scroll rail. Stacking them turned a filter rail into a tall column (utilverse, 2026-10-06). */
 @media (max-width: 11em) {
-  .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
-  .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
+  .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
+  .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; min-block-size: var(--hjm-control-min-touch-target); }
+  .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
 }
-[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
-[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
+[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
+[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; min-block-size: var(--hjm-control-min-touch-target); }
+[data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
 
 .hjm-tabs { min-inline-size: 0; }
 .hjm-tabs__list { display: flex; gap: var(--hjm-space-xs); min-inline-size: 0; overflow-x: auto; border-block-end: 1px solid var(--hjm-color-border); }
 .hjm-tabs[data-overflow="clip"] .hjm-tabs__list { overflow: hidden; }
 .hjm-tabs[data-layout="fitted"] .hjm-tabs__tab { flex: 1 1 0; }
-.hjm-tabs__tab { position: relative; min-block-size: 48px; padding: var(--hjm-space-xs) var(--hjm-space-md); border: 0; color: var(--hjm-color-text-muted); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-semibold); white-space: nowrap; cursor: pointer; }
+.hjm-tabs__tab { position: relative; min-block-size: 48px; padding: var(--hjm-space-xs) var(--hjm-space-md); border: 0; color: var(--hjm-color-text-muted); background: transparent; font: inherit; font-weight: var(--hjm-text-emphasis-medium); white-space: nowrap; cursor: pointer; }
 .hjm-tabs[data-size="small"] .hjm-tabs__tab { min-block-size: 44px; padding-inline: var(--hjm-space-sm); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
 .hjm-tabs__leading { display: inline-flex; flex: 0 0 auto; align-items: center; margin-inline-end: var(--hjm-space-xs); }
 .hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-text); }
@@ -865,7 +897,7 @@
 .hjm-tabs[data-orientation="vertical"] .hjm-tabs__tab[data-state="selected"]::after { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; inline-size: 2px; block-size: auto; }
 
 .hjm-badge, .hjm-tag { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; overflow-wrap: anywhere; }
-.hjm-badge { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-full); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-bold); }
+.hjm-badge { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-full); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-badge[data-size="small"] { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); } /* badgeRecipe.sizes.small.paddingHorizontal xxs 4 (2026-10-06; Web had kept medium's 8) */
 .hjm-badge[data-tone="strong"] { color: var(--hjm-color-bg); background: var(--hjm-color-text); border-color: transparent; } /* neutral/brand plates are canvas-white and need badgeRecipe's border to stay visible (2026-10-17) */
 .hjm-badge[data-tone="brand"] { color: var(--hjm-color-content-brand); }
@@ -881,7 +913,7 @@
 .hjm-badge[data-variant="outline"][data-tone="warning"] { border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
 .hjm-badge[data-variant="outline"][data-tone="attention"] { border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
 .hjm-badge[data-variant="outline"][data-tone="danger"] { border-color: color-mix(in srgb, var(--hjm-color-danger) 30%, transparent); }
-.hjm-tag { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-tag { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-tag[data-tone="brand"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
 .hjm-tag[data-tone="info"] { background: var(--hjm-color-bg); }
 .hjm-tag[data-tone="success"] { background: color-mix(in srgb, var(--hjm-accent-success) 10%, transparent); }
@@ -897,7 +929,7 @@
 .hjm-icon[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-icon[data-tone="inverse"] { color: var(--hjm-color-on-primary); }
 /* Counts must not flex-shrink below their text and padding in narrow rows. */
-.hjm-counter-badge { flex-shrink: 0; display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); color: var(--hjm-color-bg); background: var(--hjm-color-text); font-size: var(--hjm-type-caption-size); line-height: 1; font-weight: var(--hjm-font-weight-bold); font-variant-numeric: tabular-nums; }
+.hjm-counter-badge { flex-shrink: 0; display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); color: var(--hjm-color-bg); background: var(--hjm-color-text); font-size: var(--hjm-type-caption-size); line-height: 1; font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
 .hjm-counter-badge[data-size="small"] { min-inline-size: 16px; block-size: 16px; padding-inline: var(--hjm-space-xxs); }
 .hjm-counter-badge[data-tone="brand"] { color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
 .hjm-counter-badge[data-tone="danger"] { color: var(--hjm-color-on-danger); background: var(--hjm-color-danger-fill); }
@@ -912,31 +944,53 @@
 .hjm-card__header { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); min-inline-size: 0; }
 .hjm-card__leading { flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 1; }
 .hjm-card__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xs); }
-.hjm-card__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); overflow-wrap: anywhere; }
+/* cardRecipe.title.emphasis "strong": without a weight the h2–h6 element fell back to the UA bold (700). */
+.hjm-card__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-text-emphasis-strong); overflow-wrap: anywhere; }
 .hjm-card__description { margin: 0; overflow-wrap: anywhere; }
 .hjm-card__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-md) var(--hjm-space-md); }
 /* Row rhythm reads the recipe density variables so the stylesheet does not
    carry a second copy of the same numbers. */
-.hjm-list-row { inline-size: 100%; display: flex; align-items: center; gap: var(--hjm-list-row-gap); min-block-size: var(--hjm-list-row-comfortable-one-line); padding-inline: var(--hjm-list-row-comfortable-padding-inline); padding-block: var(--hjm-list-row-comfortable-padding-block); border: 0; color: inherit; background: transparent; text-align: start; text-decoration: none; font: inherit; }
+/* Inline placement (listRowRecipe.surfaceBleed, 2026-10-17 user decision): the row text sits on the container's content
+   edge and the row box — hover/pressed/selected fill, focus ring, hit area — bleeds outward by the density's inline
+   padding. The padding used to sit inside the container's content box, so row text started at 16 + 8 = 24 while section
+   titles and result headers started at 16. Containers need that much inline room (screen gutter, card/sheet padding). */
+.hjm-list-row { --hjm-list-row-inline: var(--hjm-list-row-comfortable-padding-inline); inline-size: calc(100% + 2 * var(--hjm-list-row-inline)); margin-inline: calc(-1 * var(--hjm-list-row-inline)); display: flex; align-items: center; gap: var(--hjm-list-row-gap); min-block-size: var(--hjm-list-row-comfortable-one-line); padding-inline: var(--hjm-list-row-inline); padding-block: var(--hjm-list-row-comfortable-padding-block); border: 0; color: inherit; background: transparent; text-align: start; text-decoration: none; font: inherit; }
 button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row[data-lines="two"] { min-block-size: var(--hjm-list-row-comfortable-two-line); }
-.hjm-list-row[data-density="compact"] { min-block-size: var(--hjm-list-row-compact-one-line); padding-inline: var(--hjm-list-row-compact-padding-inline); padding-block: var(--hjm-list-row-compact-padding-block); }
+.hjm-list-row[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); min-block-size: var(--hjm-list-row-compact-one-line); padding-block: var(--hjm-list-row-compact-padding-block); }
 .hjm-list-row[data-density="compact"][data-lines="two"] { min-block-size: var(--hjm-list-row-compact-two-line); }
 /* The two wider steps read the same generated variables; no numbers here. */
-.hjm-list-row[data-density="relaxed"] { min-block-size: var(--hjm-list-row-relaxed-one-line); padding-inline: var(--hjm-list-row-relaxed-padding-inline); padding-block: var(--hjm-list-row-relaxed-padding-block); }
+.hjm-list-row[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); min-block-size: var(--hjm-list-row-relaxed-one-line); padding-block: var(--hjm-list-row-relaxed-padding-block); }
 .hjm-list-row[data-density="relaxed"][data-lines="two"] { min-block-size: var(--hjm-list-row-relaxed-two-line); }
-.hjm-list-row[data-density="spacious"] { min-block-size: var(--hjm-list-row-spacious-one-line); padding-inline: var(--hjm-list-row-spacious-padding-inline); padding-block: var(--hjm-list-row-spacious-padding-block); }
+.hjm-list-row[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); min-block-size: var(--hjm-list-row-spacious-one-line); padding-block: var(--hjm-list-row-spacious-padding-block); }
 .hjm-list-row[data-density="spacious"][data-lines="two"] { min-block-size: var(--hjm-list-row-spacious-two-line); }
 .hjm-list-row[data-state="selected"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-list-row[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
+/* trailingAction: one surface for the row command and its separate action, as Native. The frame takes the bleed; the
+   command keeps the start padding and the action the end padding, so the action box ends on the content edge (an
+   `edge="end"` IconButton then puts its glyph on that line). */
+.hjm-list-row-frame { --hjm-list-row-inline: var(--hjm-list-row-comfortable-padding-inline); display: flex; align-items: center; gap: var(--hjm-list-row-gap); inline-size: calc(100% + 2 * var(--hjm-list-row-inline)); margin-inline: calc(-1 * var(--hjm-list-row-inline)); }
+.hjm-list-row-frame[data-density="compact"] { --hjm-list-row-inline: var(--hjm-list-row-compact-padding-inline); }
+.hjm-list-row-frame[data-density="relaxed"] { --hjm-list-row-inline: var(--hjm-list-row-relaxed-padding-inline); }
+.hjm-list-row-frame[data-density="spacious"] { --hjm-list-row-inline: var(--hjm-list-row-spacious-padding-inline); }
+.hjm-list-row-frame[data-state="selected"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
+.hjm-list-row-frame[data-state="disabled"] { opacity: 0.5; }
+.hjm-list-row-frame > .hjm-list-row { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; margin-inline: 0; padding-inline-end: 0; }
+.hjm-list-row-frame > .hjm-list-row[data-state] { background: transparent; box-shadow: none; opacity: 1; }
+.hjm-list-row-frame > .hjm-list-row[data-state="disabled"] { cursor: not-allowed; }
+.hjm-list-row__action { flex: 0 0 auto; display: flex; align-items: center; padding-inline-end: var(--hjm-list-row-inline); }
 .hjm-list-row__leading, .hjm-list-row__trailing { flex: 0 0 auto; }
+/* Trailing was a blockified span, so an inline svg/switch sat on the text
+   baseline 2–2.5px above the row center (2026-10-17 measured audit); a flex
+   box centers any trailing node like Native's row-centered View. */
+.hjm-list-row__trailing { display: flex; align-items: center; }
 /* `leadingSize` was declared by the recipe but unbound, so consumers rebuilt
    the avatar box in product styles. */
 .hjm-list-row__leading { display: flex; align-items: center; justify-content: center; inline-size: var(--hjm-list-row-leading-size); block-size: var(--hjm-list-row-leading-size); overflow: hidden; }
 .hjm-list-row__leading[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
 .hjm-list-row__content { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
 /* listRowRecipe title bodyLarge / description body (2026-10-17: Web inherited 14 for both while Native used the recipe). */
-.hjm-list-row__title { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
+.hjm-list-row__title { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
 .hjm-list-row[data-tone="danger"] .hjm-list-row__title { color: var(--hjm-color-danger); }
 .hjm-list-row__description, .hjm-list-row__trailing { color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-list-row__description { font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
@@ -946,7 +1000,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-section__copy { display: grid; flex: 1 1 auto; gap: var(--hjm-space-xxs); min-inline-size: 0; }
 /* sectionRecipe.title is the `title` variant (18/26 bold) and description the `caption` variant (11/16), as Native draws them.
    Until 2026-10-06 Web inherited body (14) for both, so the same Section header was smaller on Web. */
-.hjm-section__title { margin: 0; color: var(--hjm-color-text-body); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
+.hjm-section__title { margin: 0; color: var(--hjm-color-text-body); font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
 .hjm-section__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); overflow-wrap: anywhere; }
 .hjm-section__action { flex: 0 0 auto; }
 .hjm-section__content { min-inline-size: 0; }
@@ -962,7 +1016,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    recipe-only sizes as custom properties so theme.ts does not pull this opt-in contract into every graph. */
 /* fit-content: a column Stack stretched the pill to its max width with empty space after the label; Native sizes it
    to its content (2026-10-17 review F N13). Unlike align-self it keeps vertical centering in a TopBar row. */
-.hjm-activity-chip { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-block-size: var(--hjm-control-min-touch-target); inline-size: fit-content; max-inline-size: var(--hjm-activity-chip-max-width); min-inline-size: 0; padding-block: 0; padding-inline: var(--hjm-space-xxs) var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; color: var(--hjm-color-text); background: var(--hjm-color-surface); font: inherit; font-size: var(--hjm-type-label-size, 0.75rem); line-height: var(--hjm-type-label-line-height, 1.5); font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
+.hjm-activity-chip { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-block-size: var(--hjm-control-min-touch-target); inline-size: fit-content; max-inline-size: var(--hjm-activity-chip-max-width); min-inline-size: 0; padding-block: 0; padding-inline: var(--hjm-space-xxs) var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; color: var(--hjm-color-text); background: var(--hjm-color-surface); font: inherit; font-size: var(--hjm-type-label-size, 0.75rem); line-height: var(--hjm-type-label-line-height, 1.5); font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 /* Without media the pill keeps the symmetric label inset; the media hugs the start edge like an avatar chip. */
 .hjm-activity-chip:not([data-media]) { padding-inline-start: var(--hjm-space-sm); }
 .hjm-activity-chip[data-emphasis="emphasis"] { border-color: var(--hjm-color-primary); color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
@@ -971,7 +1025,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-activity-chip__media { flex: none; display: grid; place-items: center; inline-size: var(--hjm-activity-chip-media-size); block-size: var(--hjm-activity-chip-media-size); overflow: hidden; border-radius: 50%; }
 .hjm-activity-chip__media > :is(img, svg) { inline-size: 100%; block-size: 100%; object-fit: contain; }
 .hjm-activity-chip__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.hjm-chip { position: relative; min-block-size: var(--hjm-control-min-touch-target); display: inline-flex; align-items: center; gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: 999px; background: var(--hjm-color-bg); color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-font-weight-medium); cursor: pointer; }
+.hjm-chip { position: relative; min-block-size: var(--hjm-control-min-touch-target); display: inline-flex; align-items: center; gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: 999px; background: var(--hjm-color-bg); color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 .hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); gap: var(--hjm-space-xxs); }
 .hjm-chip[data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
 .hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
@@ -980,14 +1034,21 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chip__indicator, .hjm-chip__leading, .hjm-chip__trailing { display: inline-flex; flex: 0 0 auto; }
 .hjm-chip__label { overflow-wrap: anywhere; }
 
-.hjm-list { overflow: hidden; min-inline-size: 0; }
-.hjm-list[data-appearance="grouped"] { border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
+/* A plain list does not clip: its rows bleed their surface into the container inset (listRowRecipe.surfaceBleed).
+   A grouped list clips to its rounded surface, so it keeps that bleed as inline padding (listRecipe.grouped). */
+.hjm-list { min-inline-size: 0; }
+.hjm-list[data-appearance="grouped"] { overflow: hidden; padding-inline: var(--hjm-list-grouped-padding-inline); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
 .hjm-list__item { min-inline-size: 0; }
-.hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item { border-block-start: 1px solid var(--hjm-color-border); }
 /* Indent only the divider: moving the row shifted every title after the first
-   and narrowed its text column in the notification-settings composition. */
-.hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item { position: relative; }
-.hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: calc(var(--hjm-space-xs) + 40px + var(--hjm-space-sm)) 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; } /* listRecipe.separators.indented.insetStart = row padding 8 + leading 40 + sm 12 = 60, as Native (2026-10-17) */
+   and narrowed its text column in the notification-settings composition. Insets are measured from the list content
+   edge (where the row text sits) and come from listRecipe.separators: full spans the row surface; indented follows
+   the text column of the row above (the separator belongs to that row, as Native draws it after the row) — 52 after a
+   row with leading (ListRow root `data-leading`), 0 after one without, ending on the content edge (2026-10-17). */
+.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item { position: relative; }
+.hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; }
+.hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item::before { inset-inline: var(--hjm-list-separator-full-start) var(--hjm-list-separator-full-end); }
+.hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item::before { inset-inline: var(--hjm-list-separator-indented-start) var(--hjm-list-separator-indented-end); }
+.hjm-list[data-separator="indented"] > .hjm-list__item:has(> [data-leading]) + .hjm-list__item::before { inset-inline-start: var(--hjm-list-separator-indented-leading-start); }
 
 /* statisticRecipe.density (2026-10-06 follow-up): line gap comfortable xs 8 · compact xxs 4, surface padding md 16 · sm 12,
    group gap xs 8. Web had drawn 4/2, a fixed 16 and 12, Native read the recipe. */
@@ -999,14 +1060,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    (compact `title`) heavy, affix `body` semibold in content.body, hint and trend `caption` (trend bold). Until 2026-10-06
    Web drew a body-size medium label, a title-size value at both densities (scaled twice by --hjm-text-scale, which the
    --hjm-type-* sizes already include) and muted affixes. */
-.hjm-statistic__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
+.hjm-statistic__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
 .hjm-statistic[data-density="compact"] .hjm-statistic__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-statistic__value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--hjm-space-xxs); min-inline-size: 0; }
-.hjm-statistic__value { color: var(--hjm-color-text); font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); font-weight: var(--hjm-font-weight-heavy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.hjm-statistic__value { color: var(--hjm-color-text); font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); font-weight: var(--hjm-font-weight-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .hjm-statistic[data-density="compact"] .hjm-statistic__value { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
-.hjm-statistic__affix { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-statistic__affix { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-statistic__hint { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
-.hjm-statistic__trend { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
+.hjm-statistic__trend { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
 .hjm-statistic__trend[data-tone="success"] { color: var(--hjm-accent-success); }
 .hjm-statistic__trend[data-tone="warning"] { color: var(--hjm-accent-warning); }
 .hjm-statistic__trend[data-tone="danger"] { color: var(--hjm-color-danger); }
@@ -1023,20 +1084,30 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-notice[data-tone="danger"] { border-color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 10%, var(--hjm-color-bg)); }
 /* Reserve readable copy; wrap the action instead of crushing its label. */
 .hjm-notice__content { flex: 1 1 60%; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
+/* First-line anchor (2026-10-17 measured audit): the inline action (contract: Button size="small") centered 8px
+   below the title's first line and the icon box had no rule at all. Icon, first line and action now share one
+   anchor — the line box (1lh) alone, or the small-button height when an action sits on the row. Extra lines
+   grow downward; Native keeps the action under the copy (docs/usage/components/notice.md). */
+.hjm-notice { --hjm-notice-anchor: 1lh; }
+.hjm-notice:has(> .hjm-notice__action) { --hjm-notice-anchor: var(--hjm-control-button-small); }
+.hjm-notice__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-inline-size: 1.25rem; block-size: var(--hjm-notice-anchor); }
+.hjm-notice__content > :first-child { margin-block-start: calc((var(--hjm-notice-anchor) - 1lh) / 2); }
 .hjm-notice__action { flex: 0 0 auto; max-inline-size: 100%; }
 .hjm-notice__title, .hjm-notice__description { overflow-wrap: anywhere; }
+/* noticeRecipe/emptyStateRecipe title weight; the <strong> otherwise draws the UA bold (700). */
+.hjm-notice__title { font-weight: var(--hjm-type-title-weight); }
 
 /* emptyStateRecipe.density.regular paddingVertical xxxl 40 (2026-10-06; Web had xxl 32, Native read the recipe). */
 /* Like Native, a regular empty state fills the rest of a flex host and centers in it; compact (cards, sheets) stays content-high. */
 .hjm-empty-state { display: grid; flex-grow: 1; align-content: center; justify-items: center; gap: var(--hjm-space-xs); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); color: var(--hjm-color-text-muted); text-align: center; }
 .hjm-empty-state[data-density="compact"] { flex-grow: 0; padding-block: var(--hjm-space-xl); }
-.hjm-empty-state__title { color: var(--hjm-color-text); }
+.hjm-empty-state__title { color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); }
 .hjm-result { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); text-align: center; }
-.hjm-result__icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--hjm-radius-full); font-size: 1.5rem; font-weight: var(--hjm-font-weight-bold); }
+.hjm-result__icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--hjm-radius-full); font-size: 1.5rem; font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-result[data-status="success"] .hjm-result__icon { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 12%, transparent); }
 .hjm-result[data-status="failure"] .hjm-result__icon { color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 12%, transparent); }
 .hjm-result[data-status="info"] .hjm-result__icon { color: var(--hjm-accent-info); background: var(--hjm-color-bg); }
-.hjm-result__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); overflow-wrap: anywhere; }
+.hjm-result__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); font-weight: var(--hjm-type-title-large-weight); overflow-wrap: anywhere; }
 .hjm-result__description { max-inline-size: 40rem; margin: 0; color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-xs); }
 .hjm-progress { display: grid; gap: var(--hjm-space-xs); }
@@ -1102,7 +1173,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row--loading [data-placeholder] {
   display: block;
   border-radius: var(--hjm-radius-sm);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-skeleton-background); /* same placeholder fill as Skeleton */
 }
 .hjm-list-row--loading .hjm-list-row__title[data-placeholder] {
   block-size: var(--hjm-type-body-large-line-height);
@@ -1110,7 +1181,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row--loading .hjm-list-row__description[data-placeholder] {
   block-size: var(--hjm-type-body-line-height);
 }
-.hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-color-surface-alt); }
+.hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-skeleton-background); }
 .hjm-list-row--loading .hjm-list-row__trailing[data-placeholder] { block-size: var(--hjm-type-caption-line-height); }
 .hjm-spinner { display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-content-brand); }
 .hjm-spinner[data-tone="neutral"] { color: var(--hjm-color-text-muted); }
@@ -1118,10 +1189,15 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-spinner[data-size="small"] { font-size: 14px; }
 .hjm-spinner[data-size="medium"] { font-size: 20px; }
 .hjm-spinner[data-size="large"] { font-size: 28px; }
-.hjm-skeleton { border: 1px solid var(--hjm-color-border); display: block; inline-size: 100%; min-block-size: var(--hjm-space-xxl); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); }
+/* Filled placeholder (recipe background, 2026-10-17): a canvas fill + hairline was invisible on white. */
+.hjm-skeleton { display: block; inline-size: 100%; min-block-size: var(--hjm-space-xxl); border-radius: var(--hjm-radius-md); background: var(--hjm-skeleton-background); }
 .hjm-skeleton[data-shape="text"] { min-block-size: var(--hjm-space-md); border-radius: var(--hjm-radius-sm); }
-.hjm-skeleton[data-shape="circle"] { inline-size: var(--hjm-skeleton-circle-size); block-size: var(--hjm-skeleton-circle-size); border-radius: var(--hjm-radius-full); }
-.hjm-skeleton[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
+.hjm-skeleton[data-shape="circle"] { flex: none; inline-size: var(--hjm-skeleton-circle-size); block-size: var(--hjm-skeleton-circle-size); border-radius: var(--hjm-radius-full); }
+.hjm-skeleton[data-shape="media"] { min-block-size: 0; aspect-ratio: var(--hjm-skeleton-media-aspect); }
+.hjm-skeleton[data-shape="button"] { min-block-size: var(--hjm-skeleton-button-height); }
+.hjm-skeleton-lines { display: flex; flex-direction: column; gap: var(--hjm-skeleton-lines-gap); inline-size: 100%; }
+.hjm-skeleton-lines > [data-last] { inline-size: var(--hjm-skeleton-last-line-width); }
+.hjm-skeleton[data-animated="true"], .hjm-skeleton-lines[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
 
 /* CommandPalette ---------------------------------------------------------- */
 /*
@@ -1186,7 +1262,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 .hjm-data-table[data-density="compact"] .hjm-data-table__table th,
 .hjm-data-table[data-density="compact"] .hjm-data-table__table td { padding: var(--hjm-space-xs) var(--hjm-space-sm); }
-.hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-data-table__selector { inline-size: var(--hjm-control-min-touch-target); }
 .hjm-data-table__sort {
   display: inline-flex;
@@ -1227,7 +1303,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-data-table__table .hjm-data-table__pinned { position: sticky; z-index: 1; background: var(--hjm-color-bg); }
 .hjm-data-table__table .hjm-data-table__pinned-edge { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
 .hjm-data-table__table .hjm-data-table__pinned-edge:dir(rtl) { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
-.hjm-data-table__table tfoot td { border-block-start: 1px solid var(--hjm-color-border); border-block-end: 0; font-weight: var(--hjm-font-weight-semibold); }
+.hjm-data-table__table tfoot td { border-block-start: 1px solid var(--hjm-color-border); border-block-end: 0; font-weight: var(--hjm-text-emphasis-medium); }
 
 /* DataTable family (2026-10-14): header bands, row groups, sub-row indent, tone/heat, bounded
    height. Colors mirror dataTableFamilyRecipe; heat is a background-image so pinned cells keep
@@ -1241,7 +1317,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   background: var(--hjm-color-surface-alt);
   color: var(--hjm-color-text-muted);
   font-size: var(--hjm-type-label-size);
-  font-weight: var(--hjm-font-weight-bold);
+  font-weight: var(--hjm-text-emphasis-medium);
   text-align: start;
 }
 /* The label stays in view while a wide table scrolls sideways. */
@@ -1258,37 +1334,37 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-table-family { min-inline-size: 0; overflow-x: auto; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); }
 .hjm-line-score__table, .hjm-matrix-table__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
 .hjm-line-score__table th, .hjm-line-score__table td { padding: var(--hjm-space-xs) var(--hjm-space-xxs); text-align: center; white-space: nowrap; }
-.hjm-line-score__table thead th { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
-.hjm-line-score__table th.hjm-line-score__team { padding-inline: var(--hjm-space-sm); text-align: start; color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-line-score__table thead th { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
+.hjm-line-score__table th.hjm-line-score__team { padding-inline: var(--hjm-space-sm); text-align: start; color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-line-score__team-content { display: inline-flex; align-items: center; gap: var(--hjm-space-xs); }
-.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-line-score { --hjm-line-score-total-width: 30px; scroll-padding-inline-end: calc(var(--hjm-line-score-total-width) * var(--hjm-line-score-total-count, 0)); }
 .hjm-line-score__table .hjm-line-score__team, .hjm-line-score__table .hjm-line-score__total { position: sticky; z-index: 1; background: var(--hjm-color-surface); }
 .hjm-line-score__table .hjm-line-score__team { inset-inline-start: 0; }
 .hjm-line-score__table td.hjm-line-score__period { min-inline-size: 26px; color: var(--hjm-color-text-sub); }
-.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-line-score__table [data-current] { background: var(--hjm-table-family-selected); }
 .hjm-line-score__table th[data-current] { color: var(--hjm-color-content-brand); }
-.hjm-line-score__total { inline-size: var(--hjm-line-score-total-width); min-inline-size: var(--hjm-line-score-total-width); color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-line-score__total { inline-size: var(--hjm-line-score-total-width); min-inline-size: var(--hjm-line-score-total-width); color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
 /* A collapsed-table border stays with the table, not the pinned cell, so the edge is an inset shadow. */
 .hjm-line-score__total-edge { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
 .hjm-line-score__total-edge:dir(rtl) { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
-.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-matrix-table__table th, .hjm-matrix-table__table td { padding: var(--hjm-space-xs); text-align: center; white-space: nowrap; border-block-start: 1px solid var(--hjm-color-border); }
-.hjm-matrix-table__table thead th { border-block-start: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
-.hjm-matrix-table__table tbody th { text-align: start; padding-inline: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); border-inline-end: 1px solid var(--hjm-color-border); }
+.hjm-matrix-table__table thead th { border-block-start: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
+.hjm-matrix-table__table tbody th { text-align: start; padding-inline: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); border-inline-end: 1px solid var(--hjm-color-border); }
 .hjm-matrix-table__table td { color: var(--hjm-color-text-muted); }
 .hjm-matrix-table__table thead td { border-block-start: 0; }
 .hjm-matrix-table__self { background: var(--hjm-color-surface-alt); }
 .hjm-matrix-table__table tr[data-highlighted] > * { background-color: var(--hjm-table-family-selected); }
 .hjm-comparison-table { padding-block: var(--hjm-space-xs); }
-.hjm-comparison-table__sides { display: flex; justify-content: space-between; padding: var(--hjm-space-xs) var(--hjm-space-md); font-weight: var(--hjm-font-weight-bold); }
+.hjm-comparison-table__sides { display: flex; justify-content: space-between; padding: var(--hjm-space-xs) var(--hjm-space-md); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-comparison-table__rows { margin: 0; padding: 0; list-style: none; }
 .hjm-comparison-table__row { display: grid; gap: var(--hjm-space-xs); padding: var(--hjm-space-sm) var(--hjm-space-md); border-block-start: 1px solid var(--hjm-color-border); }
 .hjm-comparison-table__rows:first-child > :first-child { border-block-start: 0; }
 .hjm-comparison-table__values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--hjm-space-sm); font-variant-numeric: tabular-nums; color: var(--hjm-color-text-sub); }
 .hjm-comparison-table__values > :last-child { text-align: end; }
-.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-comparison-table__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); }
 .hjm-comparison-table__bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hjm-space-sm); block-size: 5px; }
 .hjm-comparison-table__track { display: flex; justify-content: flex-end; border-radius: 2px; background: var(--hjm-color-surface-alt); overflow: hidden; }
@@ -1314,8 +1390,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chart__cursor { stroke: var(--hjm-chart-axis-label); }
 .hjm-chart__dot { stroke: var(--hjm-color-bg); }
 .hjm-chart__label { fill: var(--hjm-chart-axis-label); font-family: inherit; font-size: var(--hjm-type-caption-size); }
-.hjm-chart__label[data-focused], .hjm-chart__axis-name, .hjm-chart__value { fill: var(--hjm-chart-legend-label); font-weight: var(--hjm-font-weight-semibold); }
-.hjm-chart__extreme { font-weight: var(--hjm-font-weight-semibold); }
+.hjm-chart__label[data-focused], .hjm-chart__axis-name, .hjm-chart__value { fill: var(--hjm-chart-legend-label); font-weight: var(--hjm-text-emphasis-medium); }
+.hjm-chart__extreme { font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-chart__bubble {
   position: absolute;
   inset-block-start: 0;
@@ -1327,7 +1403,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-chart-tooltip-content);
   font-size: var(--hjm-type-caption-size);
   line-height: var(--hjm-type-caption-line-height);
-  font-weight: var(--hjm-font-weight-bold);
+  font-weight: var(--hjm-text-emphasis-medium);
   white-space: nowrap;
   pointer-events: none;
 }
@@ -1335,7 +1411,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chart__pie-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
 .hjm-chart__slice[role="button"], .hjm-chart--pie .hjm-chart__slice[data-id] { cursor: pointer; }
 .hjm-chart__slice:focus-visible { outline: none; stroke: var(--hjm-color-focus); stroke-width: var(--hjm-focus-width); }
-.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-font-weight-bold); }
+.hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-chart__axis-titles { display: flex; justify-content: space-between; color: var(--hjm-chart-axis-label); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-chart-legend {
   display: flex;
@@ -1368,7 +1444,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-chart-legend__button:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-chart-legend__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
 .hjm-chart-legend[data-interactive] .hjm-chart-legend__label { flex: 1; }
-.hjm-chart-legend__value { font-weight: var(--hjm-font-weight-bold); font-variant-numeric: tabular-nums; }
+.hjm-chart-legend__value { font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
 
 /* Mentions ---------------------------------------------------------------- */
 /*
@@ -1429,7 +1505,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding-inline: var(--hjm-space-sm);
   border-block-end: 1px solid var(--hjm-color-border);
 }
-.hjm-transfer-list__title { font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
+.hjm-transfer-list__title { font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
 .hjm-transfer-list__select-all { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
 /* These rows center the indicator, so drop the 2px top offset Checkbox uses to sit on its first text line. */
 .hjm-transfer-list__select-all > .hjm-choice__indicator,
@@ -1682,6 +1758,42 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   margin-block-start: var(--hjm-auth-screen-footer-gap);
   text-align: center;
 }
+/* 히어로 문구와 정책 링크(AuthScreenHero·AuthScreenFooter). 글자 단계·간격은 계약 값이다. */
+.hjm-auth-screen__copy { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
+.hjm-auth-screen__footer-content { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
+.hjm-auth-screen__links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  column-gap: var(--hjm-auth-screen-link-gap);
+}
+/* 2026-10-17 "간격 줄여": 보이는 간격은 gap + 구분점뿐이다. 44 터치 높이는 배경 없는 min-block-size,
+   가로 터치 폭은 보이지 않는 가상 요소가 구분점 앞까지 넓힌다 — 버튼 안쪽 여백으로 만들면 글자 사이가 다시 벌어진다. */
+.hjm-auth-screen__link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--hjm-auth-screen-link-target);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-family: var(--hjm-font-family-ui, inherit);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+  cursor: pointer;
+}
+.hjm-auth-screen__link::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline: calc(var(--hjm-auth-screen-link-gap) * -1);
+}
+.hjm-auth-screen__link:focus-visible {
+  outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
+  outline-offset: var(--hjm-focus-offset);
+}
 
 /* Sidebar ----------------------------------------------------------------- */
 .hjm-sidebar {
@@ -1731,7 +1843,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-sidebar__item[aria-current="page"] {
   background: var(--hjm-color-bg);
   color: var(--hjm-color-content-brand);
-  font-weight: var(--hjm-font-weight-semibold);
+  font-weight: var(--hjm-text-emphasis-strong);
  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-sidebar__item[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-sidebar__item:focus-visible,
@@ -1766,7 +1878,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border-color: var(--hjm-color-focus);
   background: var(--hjm-color-bg);
   color: var(--hjm-color-content-brand);
-  font-weight: var(--hjm-font-weight-semibold);
+  font-weight: var(--hjm-text-emphasis-strong);
 }
 .hjm-toggle-group__item:disabled { cursor: default; color: var(--hjm-color-text-weak); }
 .hjm-toggle-group__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2105,12 +2217,18 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    title line-height or patched this private selector to achieve this alignment. */
 .hjm-sheet__header { align-items: center; }
 .hjm-sheet__header > div { min-inline-size: 0; }
+/* Sheets have no visible title (2026-10-17 user decision); a header holds only the description and/or ×,
+   and the × stays at the inline end even when there is no description. */
+.hjm-sheet__header > div { flex: 1 1 auto; }
+.hjm-sheet__header > .hjm-dialog__close { margin-inline-start: auto; }
+/* Overlay titles render h2: without an explicit weight they fell back to the UA bold (700) instead of
+   the recipe's title weight (2026-10-17 lighter scale). */
 .hjm-dialog__title,
-.hjm-sheet__title,
 .hjm-alert-dialog__title {
   margin: 0;
   font-size: var(--hjm-type-title-size);
   line-height: var(--hjm-type-title-line-height);
+  font-weight: var(--hjm-type-title-weight);
   overflow-wrap: anywhere;
 }
 .hjm-dialog__description,
@@ -2205,7 +2323,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 .hjm-sheet__header,
 .hjm-sheet__footer { flex: 0 0 auto; }
-.hjm-sheet > .hjm-sheet__header { min-block-size: var(--hjm-control-min-touch-target); gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-lg); }
+/* The header sits inside the drag zone (.hjm-sheet__drag, 2026-10-16), so a direct-child selector stopped matching and
+   the Dialog's 20px top padding leaked in; scope by the sheet instead. */
+.hjm-sheet .hjm-sheet__header { min-block-size: var(--hjm-control-min-touch-target); gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-lg); }
 .hjm-sheet > .hjm-sheet__footer { padding: var(--hjm-space-sm) var(--hjm-space-lg) 0; }
 .hjm-sheet__body {
   min-block-size: 0;
@@ -2298,6 +2418,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   margin: 0;
   font-size: var(--hjm-type-title-size);
   line-height: var(--hjm-type-title-line-height);
+  font-weight: var(--hjm-type-title-weight);
   overflow-wrap: anywhere;
 }
 .hjm-side-panel__description {
@@ -2350,7 +2471,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   pointer-events: auto;
 }
 .hjm-tour__counter { margin: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
-.hjm-tour__title { margin: var(--hjm-space-xxs) 0 0; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); overflow-wrap: anywhere; }
+.hjm-tour__title { margin: var(--hjm-space-xxs) 0 0; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
 .hjm-tour__description { margin: var(--hjm-space-xs) 0 0; color: var(--hjm-color-text-body); overflow-wrap: anywhere; }
 .hjm-tour__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hjm-space-xs); }
 .hjm-tour:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2409,12 +2530,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-menu__item:hover,
 .hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
-.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
 .hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-menu__state-message { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
-.hjm-menu__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-menu__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-menu__separator { block-size: 1px; margin: var(--hjm-space-xxs) var(--hjm-space-xs); background: var(--hjm-color-border); }
-.hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-font-weight-bold); }
+.hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-menu__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
 .hjm-menu__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
 .hjm-menu__leading,
@@ -2436,13 +2557,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-select__busy-indicator { flex: 0 0 auto; inline-size: 1em; block-size: 1em; border: 2px solid var(--hjm-color-content-brand); border-inline-end-color: transparent; border-radius: 50%; animation: hjm-spin 800ms linear infinite; }
 .hjm-select__native + .hjm-select__indicator { margin-inline-start: calc(-1 * var(--hjm-space-lg)); }
 .hjm-select__listbox { position: fixed; z-index: var(--hjm-layer-dropdown); max-inline-size: min(26.25rem, calc(100vw - (2 * var(--hjm-space-md)))); max-block-size: 22.5rem; overflow: auto; padding: var(--hjm-select-popover-padding, var(--hjm-space-xs)); /* selectRecipe.popover.padding 8 (was 4 until 2026-10-06) */ border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: var(--hjm-shadow-floating); }
-.hjm-select__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-select__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-select__option, .hjm-select__message { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xs) var(--hjm-space-sm); border-radius: var(--hjm-radius-sm); overflow-wrap: anywhere; }
 .hjm-select[data-density="comfortable"] .hjm-select__option,
 .hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
 .hjm-select__option { cursor: pointer; }
 .hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
-.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
+.hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
 .hjm-select__option-description, .hjm-select__message { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
@@ -2483,7 +2604,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
 .hjm-combobox__option { cursor: pointer; }
 .hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
-.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
+.hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-combobox__message { color: var(--hjm-color-text-muted); }
 .hjm-form__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
@@ -2493,18 +2614,22 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-form__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-sm); }
 
 /* Advanced display ------------------------------------------------------- */
-.hjm-timeline { display: grid; gap: var(--hjm-space-md); margin: 0; padding: 0; list-style: none; }
+/* timelineRecipe label/description are `body`; binding it here lets the rail and timestamp derive from the same line box. */
+.hjm-timeline { display: grid; gap: var(--hjm-space-md); margin: 0; padding: 0; list-style: none; font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
 .hjm-timeline__item { min-inline-size: 0; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--hjm-space-sm); }
 .hjm-timeline__rail { position: relative; display: flex; justify-content: center; }
-.hjm-timeline__dot { position: relative; z-index: 1; inline-size: 0.625rem; block-size: 0.625rem; margin-block-start: 0.25rem; border: 1px solid transparent; border-radius: var(--hjm-radius-full); background: var(--hjm-color-text-muted); }
+/* Dot, label first line and timestamp share the label's first line box (2026-10-17 measured audit: centers 396/397/398.5).
+   The rail inherits the label's line height, so 1lh is that line box. */
+.hjm-timeline__dot { position: relative; z-index: 1; inline-size: 0.625rem; block-size: 0.625rem; margin-block-start: calc((1lh - 0.625rem) / 2); border: 1px solid transparent; border-radius: var(--hjm-radius-full); background: var(--hjm-color-text-muted); }
 .hjm-timeline__item[data-tone="info"] .hjm-timeline__dot { border-color: var(--hjm-accent-info); background: var(--hjm-accent-info); }
 .hjm-timeline__item[data-tone="success"] .hjm-timeline__dot { border-color: var(--hjm-accent-success); background: var(--hjm-accent-success); }
 .hjm-timeline__item[data-tone="attention"] .hjm-timeline__dot { border-color: var(--hjm-accent-attention); background: var(--hjm-accent-attention); }
-.hjm-timeline__connector { position: absolute; inset-block: 0.875rem calc(-1 * var(--hjm-space-md)); inline-size: 1px; background: var(--hjm-color-border); }
+.hjm-timeline__connector { position: absolute; inset-block: calc((1lh + 0.625rem) / 2) calc(-1 * var(--hjm-space-md)); inline-size: 1px; background: var(--hjm-color-border); }
 .hjm-timeline__content { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-block-end: var(--hjm-space-xxs); }
-.hjm-timeline__heading { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--hjm-space-xxs) var(--hjm-space-sm); }
-.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
-.hjm-timeline__timestamp { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
+.hjm-timeline__heading { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--hjm-space-xxs) var(--hjm-space-sm); }
+.hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
+/* Baseline sharing put the smaller caption 1.5px under the label's center; center it on the label's first line instead. */
+.hjm-timeline__timestamp { margin-block-start: calc((var(--hjm-type-body-line-height) - var(--hjm-type-caption-line-height)) / 2); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-timeline__description { color: var(--hjm-color-text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
 .hjm-accordion { border-block-start: 1px solid var(--hjm-color-border); }
 .hjm-accordion__item { border-block-end: 1px solid var(--hjm-color-border); }
@@ -2521,7 +2646,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-color-text-body);
   background: transparent;
   font: inherit;
-  font-weight: var(--hjm-font-weight-bold);
+  font-weight: var(--hjm-type-title-weight);
   text-align: start;
   cursor: pointer;
 }
@@ -2541,7 +2666,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border-radius: 50%;
   color: var(--hjm-color-text-muted);
   background: var(--hjm-color-bg);
-  font-weight: var(--hjm-font-weight-bold);
+  font-weight: var(--hjm-text-emphasis-strong);
 }
 .hjm-avatar[data-size="small"] { inline-size: 2rem; block-size: 2rem; font-size: var(--hjm-type-label-size); }
 .hjm-avatar[data-size="large"] { inline-size: 3rem; block-size: 3rem; }
@@ -2556,11 +2681,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-divider[data-orientation="horizontal"][data-inset="both"] { margin-inline: var(--hjm-space-md); inline-size: calc(100% - (2 * var(--hjm-space-md))); }
 .hjm-description-list { display: grid; grid-template-columns: repeat(var(--hjm-description-columns), minmax(0, 1fr)); gap: var(--hjm-space-sm); margin: 0; }
 .hjm-description-list__item { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
-.hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-description-list__value { margin: 0; color: var(--hjm-color-text); overflow-wrap: anywhere; }
 .hjm-table-scroll { max-inline-size: 100%; overflow: auto; outline-offset: 2px; }
 .hjm-table { inline-size: 100%; border-collapse: collapse; color: var(--hjm-color-text-body); }
-.hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); text-align: start; }
+.hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); text-align: start; }
 .hjm-table__header,
 .hjm-table__cell { padding: var(--hjm-space-sm); border-block-end: 1px solid var(--hjm-color-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
 .hjm-table__header { color: var(--hjm-color-text); background: var(--hjm-color-bg); }
@@ -2575,7 +2700,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-pagination__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hjm-space-xxs); margin: 0; padding: 0; list-style: none; }
 .hjm-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-inline-size: 0; }
 .hjm-breadcrumb__link { color: var(--hjm-color-text-muted); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
-.hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
+.hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
 .hjm-breadcrumb__separator { color: var(--hjm-color-text-weak); }
 [dir="rtl"] .hjm-breadcrumb__separator[data-default="true"],
 [dir="rtl"] .hjm-pagination__previous > span,
@@ -2592,13 +2717,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 .hjm-pagination__item { color: var(--hjm-color-text-body); background: transparent; font: inherit; cursor: pointer; }
 .hjm-pagination__item:hover:not([aria-disabled="true"]) { background: var(--hjm-color-bg); }
-.hjm-pagination__item[data-state="current"] { border-color: var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
+.hjm-pagination__item[data-state="current"] { border-color: var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
 .hjm-pagination__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-pagination__ellipsis { color: var(--hjm-color-text-muted); }
 .hjm-load-more { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding-block: var(--hjm-space-lg); text-align: center; }
 .hjm-load-more[data-density="compact"] { gap: var(--hjm-space-xs); padding-block: var(--hjm-space-sm); }
 .hjm-load-more__sentinel { inline-size: 1px; block-size: 1px; }
-.hjm-load-more__trigger { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
+.hjm-load-more__trigger { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 .hjm-load-more__status, .hjm-load-more__error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--hjm-space-sm); color: var(--hjm-color-text-muted); }
 .hjm-load-more__error { color: var(--hjm-color-danger); }
 .hjm-load-more__end { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); }
@@ -2608,23 +2733,23 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-steps { display: grid; grid-template-columns: repeat(var(--hjm-steps-count, auto-fit), minmax(0, 1fr)); gap: var(--hjm-space-xs); margin: 0; padding: 0; list-style: none; }
 .hjm-steps__step { min-inline-size: 0; display: grid; align-content: start; gap: var(--hjm-space-xs); }
 .hjm-steps__rail { display: flex; align-items: center; min-inline-size: 0; }
-.hjm-steps__indicator { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
+.hjm-steps__indicator { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
 .hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
 .hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-accent-success); color: var(--hjm-accent-success); background: var(--hjm-color-bg); }
 .hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
 .hjm-steps__step[data-status="error"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-danger); color: var(--hjm-color-danger); background: var(--hjm-color-danger-fill); }
 .hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
-.hjm-steps__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
+.hjm-steps__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
 .hjm-steps__step[data-status="pending"] .hjm-steps__label { color: var(--hjm-color-text-muted); }
 .hjm-steps__step[data-status="error"] .hjm-steps__label { color: var(--hjm-color-danger); }
 .hjm-steps__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); overflow-wrap: anywhere; }
 
 .hjm-file-picker { display: grid; gap: var(--hjm-space-xs); }
-.hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-file-picker__dropzone { min-block-size: 8rem; display: grid; place-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xl); border: 1px dashed var(--hjm-color-border); border-radius: var(--hjm-radius-lg); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); text-align: center; }
 .hjm-file-picker[data-dragging] .hjm-file-picker__dropzone { border-color: var(--hjm-color-focus); background: var(--hjm-color-bg); }
-.hjm-file-picker__dropzone button { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
+.hjm-file-picker__dropzone button { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 .hjm-file-picker__hint { color: var(--hjm-color-text-muted); }
 .hjm-file-picker__error { color: var(--hjm-color-danger); }
 
@@ -2643,7 +2768,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-upload-item__action { flex: 0 0 auto; margin-inline-start: auto; }
 
 .hjm-date-picker { display: grid; gap: var(--hjm-space-xs); }
-.hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-date-picker__anchor { position: relative; display: flex; align-items: center; }
 .hjm-date-picker__trigger { inline-size: 100%; min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding-inline: var(--hjm-space-md) 3rem; border: 1px solid var(--hjm-color-border-control); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-bg); font: inherit; text-align: start; cursor: pointer; }
 /* datePickerRecipe.sizes.large.minHeight is control.buttonHeight.large (52), as Select/NumberField large. Web drew 56 until 2026-10-06. */
@@ -2668,7 +2793,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    controlled Toast outside the viewport keeps it too (it stretched to 1200px in the layout story, 2026-10-17 review).
    1.10.0 layout: [tone badge][title + description][close] / action pill on its own row, end-aligned.
    The 2px tone strip is retired — the tinted badge carries tone (toastRecipe.toneMark width 0). */
-.hjm-toast { position: relative; min-inline-size: 0; max-inline-size: min(26.25rem, 100%); min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--hjm-space-sm); row-gap: var(--hjm-space-xs); padding: var(--hjm-space-sm) var(--hjm-space-xs) var(--hjm-space-sm) var(--hjm-space-md); overflow: hidden; border: var(--hjm-toast-border-width) solid var(--hjm-toast-border); border-radius: var(--hjm-toast-radius); color: var(--hjm-color-text); background: var(--hjm-toast-background); box-shadow: var(--hjm-toast-shadow); pointer-events: auto; }
+.hjm-toast { position: relative; min-inline-size: 0; max-inline-size: min(26.25rem, 100%); min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--hjm-space-sm); row-gap: var(--hjm-space-xs); padding: var(--hjm-toast-padding-block) var(--hjm-toast-padding-inline); overflow: hidden; border: var(--hjm-toast-border-width) solid var(--hjm-toast-border); border-radius: var(--hjm-toast-radius); color: var(--hjm-color-text); background: var(--hjm-toast-background); box-shadow: var(--hjm-toast-shadow); pointer-events: auto; }
 /* Whole-card activation is a sibling surface; explicit controls stay above it. */
 .hjm-toast__press { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
 .hjm-toast__press:focus-visible { outline: 2px solid var(--hjm-color-content-brand); outline-offset: -2px; }
@@ -2680,10 +2805,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-toast[data-tone="success"] .hjm-toast__icon { color: var(--hjm-toast-accent-success); background: var(--hjm-toast-badge-success); }
 .hjm-toast[data-tone="warning"] .hjm-toast__icon { color: var(--hjm-toast-accent-warning); background: var(--hjm-toast-badge-warning); }
 .hjm-toast[data-tone="danger"] .hjm-toast__icon { color: var(--hjm-toast-accent-danger); background: var(--hjm-toast-badge-danger); }
-.hjm-toast__content { grid-column: 2; grid-row: 1; align-self: center; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-block: var(--hjm-space-xxs); overflow-wrap: anywhere; word-break: keep-all; }
-.hjm-toast__title { font-weight: var(--hjm-font-weight-bold); line-height: var(--hjm-toast-title-line-height, 1.35); }
+/* First-line anchor (toastRecipe.anchor, 2026-10-17): the first line (title, else description) is centred on the
+   badge box via its own line height (1lh), so profile and text-scale line heights stay aligned; extra lines grow
+   downward while the lead column and close stay beside the first line. */
+.hjm-toast__content { grid-column: 2; grid-row: 1; align-self: start; min-inline-size: 0; min-block-size: var(--hjm-toast-anchor-size); display: grid; align-content: start; gap: var(--hjm-space-xxs); overflow-wrap: anywhere; word-break: keep-all; }
+.hjm-toast__content > :first-child { margin-block-start: calc((var(--hjm-toast-anchor-size) - 1lh) / 2); }
+.hjm-toast__title { font-weight: var(--hjm-type-title-weight); line-height: var(--hjm-toast-title-line-height, 1.35); }
 .hjm-toast__description { color: var(--hjm-toast-description-color); line-height: var(--hjm-toast-description-line-height, 1.45); }
-.hjm-toast__close { grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; inline-size: var(--hjm-control-min-touch-target); min-block-size: var(--hjm-control-min-touch-target); margin-block-start: calc(-1 * var(--hjm-space-xxs)); border: 0; border-radius: 50%; color: var(--hjm-color-text-muted); background: transparent; cursor: pointer; }
+.hjm-toast__close { grid-column: 3; grid-row: 1; align-self: start; display: grid; place-items: center; inline-size: var(--hjm-toast-close-size); block-size: var(--hjm-toast-close-size); margin-block: calc(-1 * var(--hjm-toast-close-block-overhang)); margin-inline-end: calc(-1 * var(--hjm-toast-close-inline-overhang)); padding: 0; border: 0; border-radius: 50%; color: var(--hjm-color-text-muted); background: transparent; cursor: pointer; }
 .hjm-toast__close:hover { color: var(--hjm-color-text); }
 /* 2026-10-10 panel toast: product media replaces the tone badge in the leading column (toastRecipe.media),
    and a running task shows its steps under the description (toastRecipe.progress). */
@@ -2693,9 +2822,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-toast__progress-step { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); color: var(--hjm-toast-progress-label); }
 .hjm-toast__progress-dot { flex: none; inline-size: var(--hjm-toast-progress-dot); block-size: var(--hjm-toast-progress-dot); border-radius: 50%; background: var(--hjm-toast-progress-upcoming); }
 .hjm-toast__progress-step[data-state="done"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); }
-.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-font-weight-bold); }
+.hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-text-emphasis-strong); }
 .hjm-toast__progress-step[data-state="current"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); transform: scale(var(--hjm-toast-progress-current-scale)); }
-.hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: var(--hjm-toast-action-align, start); margin-inline-end: var(--hjm-space-xs); min-block-size: var(--hjm-control-min-touch-target); max-inline-size: 100%; padding-inline: var(--hjm-space-md); border: 0; border-radius: 999px; color: var(--hjm-toast-action-color); background: var(--hjm-toast-action-background); font: inherit; font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; text-align: center; cursor: pointer; }
+.hjm-toast__action { grid-column: 2 / -1; grid-row: 2; justify-self: var(--hjm-toast-action-align, start); min-block-size: var(--hjm-control-min-touch-target); max-inline-size: 100%; padding-inline: var(--hjm-space-md); border: 0; border-radius: 999px; color: var(--hjm-toast-action-color); background: var(--hjm-toast-action-background); font: inherit; font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; text-align: center; cursor: pointer; }
 .hjm-toast__action:hover { filter: brightness(0.97); }
 .hjm-toast[data-state="closing"] { opacity: 0; transform: translateY(var(--hjm-space-xs)); transition: opacity var(--hjm-toast-exit-duration) var(--hjm-toast-exit-easing), transform var(--hjm-toast-exit-duration) var(--hjm-toast-exit-easing); }
 
@@ -2717,6 +2846,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   outline: 2px solid var(--hjm-color-content-brand);
   outline-offset: 2px;
 }
+/* The close target overhangs into the card padding (toastRecipe.close.inlineOverhang), so an outer ring would be
+   clipped by the card's overflow; draw it inside the 44 target instead. */
+.hjm-toast__close:focus-visible { outline-offset: -2px; }
 
 @keyframes hjm-spin { to { transform: rotate(360deg); } }
 @keyframes hjm-pulse { from { opacity: var(--hjm-skeleton-from-opacity); } to { opacity: var(--hjm-skeleton-to-opacity); } }
@@ -2724,6 +2856,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-root[data-motion="reduced"] .hjm-button__spinner,
 .hjm-root[data-motion="reduced"] .hjm-spinner__glyph,
 .hjm-root[data-motion="reduced"] .hjm-skeleton,
+.hjm-root[data-motion="reduced"] .hjm-skeleton-lines,
 .hjm-root[data-motion="reduced"] .hjm-combobox__spinner {
   animation: none;
 }
@@ -2741,6 +2874,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   .hjm-button__spinner,
   .hjm-spinner__glyph,
   .hjm-skeleton,
+  .hjm-skeleton-lines,
   .hjm-combobox__spinner {
     animation: none;
   }
@@ -2765,7 +2899,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-top-bar__trailing { justify-content: flex-end; }
 .hjm-top-bar__title { min-inline-size: 0; text-align: center; overflow-wrap: anywhere; }
 .hjm-top-bar__subtitle { display: block; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
-.hjm-top-bar__heading { margin: 0; font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-font-weight-bold); }
+.hjm-top-bar__heading { margin: 0; font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-type-title-weight); }
 .hjm-top-bar__heading > span { display: inline-flex; align-items: center; gap: var(--hjm-top-bar-gap); }
 .hjm-top-bar[data-centered="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
 .hjm-top-bar[data-centered="false"] .hjm-top-bar__title { text-align: start; }
@@ -2776,7 +2910,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-bottom-cta[data-position="sticky"] { position: sticky; inset-block-end: 0; z-index: var(--hjm-layer-sticky); }
 /* Inside ScreenLayout's footer the footer owns border, padding, surface and safe area; BottomCTA keeps only its copy,
    actions and an explicit safeAreaBottom (2026-10-17: the doubled bar inset the buttons twice). */
-.hjm-bottom-cta[data-placement="screen-footer"] { position: static; min-block-size: 0; padding: 0 0 var(--hjm-bottom-cta-safe-area); border: 0; background: none; box-shadow: none; }
+/* The screen footer already pads max(screen padding, env(safe-area-inset-bottom)); an explicit safeAreaBottom adds only
+   the remainder so the gap is max(footer, inset), not their sum (2026-10-17 "버튼 아래 여백이 많아"). */
+.hjm-bottom-cta[data-placement="screen-footer"] { position: static; min-block-size: 0; padding: 0 0 max(0px, calc(var(--hjm-bottom-cta-safe-area) - max(var(--hjm-screen-padding), env(safe-area-inset-bottom, 0px)))); border: 0; background: none; box-shadow: none; }
 .hjm-bottom-cta__description { margin: 0; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-bottom-cta__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-bottom-cta-gap); }
 /* bottomCtaRecipe.contentMaxWidth: the surface spans the viewport, its copy and actions stop at the reading width. */
@@ -2814,7 +2950,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    the grid instead of shrinking dates or wrapping a week onto another row. */
 .hjm-calendar { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; max-inline-size: var(--hjm-calendar-max-width); }
 .hjm-calendar__header { display: grid; grid-template-columns: var(--hjm-control-min-touch-target) minmax(0, 1fr) var(--hjm-control-min-touch-target); align-items: center; gap: var(--hjm-space-xs); }
-.hjm-calendar__header strong { text-align: center; overflow-wrap: anywhere; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-font-weight-bold); }
+.hjm-calendar__header strong { text-align: center; overflow-wrap: anywhere; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-type-title-weight); }
 .hjm-calendar__header button { min-block-size: var(--hjm-control-min-touch-target); border: 0; border-radius: var(--hjm-radius-full); background: transparent; color: var(--hjm-color-text-body); font: inherit; cursor: pointer; }
 .hjm-calendar__viewport { overflow-x: auto; padding: var(--hjm-space-xxs); }
 .hjm-calendar__grid { min-inline-size: calc(7 * var(--hjm-calendar-cell-size)); }
@@ -2843,7 +2979,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-anchor__list { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); list-style: none; margin: 0; padding: 0; }
 .hjm-anchor__link { display: block; padding: var(--hjm-space-xs); border-inline-start: 2px solid transparent; color: var(--hjm-color-text-muted); text-decoration: none; overflow-wrap: anywhere; }
 .hjm-anchor__link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
-.hjm-anchor__link[aria-current="location"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-focus); font-weight: var(--hjm-font-weight-bold); }
+.hjm-anchor__link[aria-current="location"] { color: var(--hjm-color-content-brand); border-color: var(--hjm-color-focus); font-weight: var(--hjm-text-emphasis-strong); }
 .hjm-anchor__link:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
 .hjm-anchor[data-orientation="horizontal"] .hjm-anchor__list { flex-direction: row; flex-wrap: wrap; }
 .hjm-anchor[data-orientation="horizontal"] .hjm-anchor__link { border-inline-start: 0; border-block-end: 2px solid transparent; }
@@ -2854,7 +2990,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-popover { box-sizing: border-box; inline-size: var(--hjm-popover-max-width); overflow: auto; overscroll-behavior: contain; padding: var(--hjm-space-sm); border: var(--hjm-stroke-default) solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); color: var(--hjm-color-text-body); pointer-events: auto; animation: hjm-popover-in var(--hjm-popover-duration) var(--hjm-popover-easing); }
 .hjm-popover[data-state="closed"] { pointer-events: none; animation-name: hjm-popover-out; }
 .hjm-popover__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hjm-space-xs); }
-.hjm-popover__title { flex: 1 1 50%; min-inline-size: 0; margin: 0; font-size: var(--hjm-type-body-size); font-weight: var(--hjm-font-weight-bold); line-height: var(--hjm-type-body-line-height); overflow-wrap: anywhere; }
+.hjm-popover__title { flex: 1 1 50%; min-inline-size: 0; margin: 0; font-size: var(--hjm-type-body-size); font-weight: var(--hjm-type-title-weight); line-height: var(--hjm-type-body-line-height); overflow-wrap: anywhere; }
 .hjm-popover__description { margin-block: var(--hjm-space-xs) var(--hjm-space-md); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-popover__body { min-inline-size: 0; padding-block-start: var(--hjm-space-xs); overflow-wrap: anywhere; }
 .hjm-popover:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2917,7 +3053,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-menu-morph__measure { position: absolute; visibility: hidden; pointer-events: none; inset-block-start: 0; inset-inline-start: 0; }
 .hjm-menu-morph__surface { color: var(--hjm-color-text); background: var(--hjm-color-bg); border: 1px solid var(--hjm-color-border-control); }
 .hjm-menu-morph[data-open="false"] .hjm-menu-morph__surface { box-shadow: none !important; }
-.hjm-menu-morph__trigger { gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); font-family: var(--hjm-font-family-ui, inherit); font-size: var(--hjm-type-body-size); font-weight: var(--hjm-font-weight-semibold); line-height: var(--hjm-type-body-line-height); }
+.hjm-menu-morph__trigger { gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); font-family: var(--hjm-font-family-ui, inherit); font-size: var(--hjm-type-body-size); font-weight: var(--hjm-text-emphasis-medium); line-height: var(--hjm-type-body-line-height); }
 .hjm-menu-morph [role="button"]:focus-visible, .hjm-menu-morph__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
 .hjm-menu-morph__item { display: flex; width: 100%; align-items: center; gap: var(--hjm-space-sm); min-height: var(--hjm-control-min-touch-target); padding: var(--hjm-space-sm); border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
 .hjm-menu-morph__item:hover, .hjm-menu-morph__item:focus { background: var(--hjm-color-bg); }
@@ -3008,7 +3144,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 @supports (backdrop-filter: blur(20px)) {
   .hjm-navigation-bar { background: color-mix(in srgb, var(--hjm-color-surface) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
 }
-.hjm-navigation-bar__brand { flex-shrink: 0; padding-inline: var(--hjm-space-xs); }
+/* The brand added spacing.xs on top of the bar's spacing.sm padding, so it started 21px in against 13px for the
+   end controls (2026-10-17 measured audit). Native has no extra brand inset; both edges now use the bar padding. */
+.hjm-navigation-bar__brand { flex-shrink: 0; }
 .hjm-navigation-bar__destinations, .hjm-navigation-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hjm-space-xs); min-inline-size: 0; }
 .hjm-navigation-bar__destinations { flex: 1; }
 .hjm-navigation-bar__actions > * { max-inline-size: 100%; }
@@ -3103,7 +3241,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-screen__exit-glyph[data-kind="back"]:dir(rtl) { transform: scaleX(-1); }
 
 .hjm-image-choice { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
-.hjm-image-choice__label { font-weight: 600; }
+.hjm-image-choice__label { font-weight: var(--hjm-text-emphasis-medium); }
 .hjm-image-choice__tiles { display: flex; flex-wrap: wrap; gap: var(--hjm-image-choice-gap); }
 .hjm-image-choice__tile { position: relative; inline-size: calc(var(--hjm-image-choice-size) + (var(--hjm-image-choice-ring) + var(--hjm-image-choice-offset)) * 2); aspect-ratio: 1; padding: var(--hjm-image-choice-offset); border: var(--hjm-image-choice-ring) solid transparent; border-radius: calc(var(--hjm-image-choice-radius) + var(--hjm-image-choice-ring) + var(--hjm-image-choice-offset)); background: none; cursor: pointer; }
 .hjm-image-choice__tile[data-selected] { border-color: var(--hjm-color-content-brand); }
@@ -3147,13 +3285,21 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-comment-thread { display: flex; flex-direction: column; }
 .hjm-comment-row__avatar { flex: 0 0 auto; display: flex; justify-content: center; }
 .hjm-comment-row__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
+/* The <time> wrapper is a flex box so its caption is the line: as an inline box it added the body line-height strut,
+   making the identity line 19 tall and moving the author 1.5px off the action anchor (2026-10-17 measurement). */
+.hjm-comment-row__time { display: flex; }
 .hjm-comment-row__reactions { display: flex; flex-direction: column; gap: 2px; border-radius: var(--hjm-radius-sm); -webkit-touch-callout: none; }
 .hjm-comment-row__reactions:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; }
 .hjm-comment-row__media { align-self: flex-start; overflow: hidden; margin-block-start: 4px; }
 .hjm-comment-row__media > img { display: block; inline-size: 100%; block-size: auto; }
-.hjm-comment-row__like { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
+/* commentThreadRecipe.actionAnchor (2026-10-17 measured audit): the 44 targets centre on the identity's first line
+   (--hjm-comment-anchor-line, set per row), so like/more glyphs share the author line's centre instead of sitting
+   12px below it. When HJM's own like/more is the last control (data-edge), the whole column takes the IconButton edge
+   overhang: the 44-wide like count under the heart shares the column, so a margin on the button alone was absorbed. */
+.hjm-comment-row__like { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; margin-block-start: calc((var(--hjm-comment-anchor-line) - var(--hjm-control-button-medium)) / 2); }
+.hjm-comment-row__like[data-edge="end"] { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
 .hjm-comment-row__like-count { text-align: center; }
-.hjm-comment-row__action { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--hjm-color-text-muted); font: inherit; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: 600; cursor: pointer; }
+.hjm-comment-row__action { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--hjm-color-text-muted); font: inherit; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-text-emphasis-medium); cursor: pointer; }
 .hjm-comment-row__action:disabled { opacity: 0.5; cursor: default; }
 .hjm-comment-row__action:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
 .hjm-chat-screen__jump { position: absolute; inset-block-end: calc(100% + var(--hjm-space-xs) + var(--hjm-screen-padding)); inset-inline-end: 0; }
@@ -3224,7 +3370,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item { padding-block:var(--hjm-space-xs); position:relative; flex:0 1 auto; min-inline-size:0; min-block-size:var(--hjm-control-min-touch-target); border:0; border-radius:var(--hjm-radius-full); background:transparent; box-shadow:none; padding-inline:var(--hjm-space-md); color:var(--hjm-color-text-muted); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item::before { content:""; position:absolute; inset:var(--hjm-space-xs) 0; border-radius:var(--hjm-radius-full); background:var(--hjm-color-surface-alt); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item > span { position:relative; overflow-wrap:anywhere; }
-.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-bold); }
+.hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-semibold); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-text-body); }
 .hjm-segmented[data-presentation="pills"] .hjm-segmented__item:focus-within { outline:2px solid var(--hjm-color-focus); outline-offset:2px; }
 
@@ -3273,12 +3419,12 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 
 /* Text radio navigation shares the selection engine and its focus behavior. */
 .hjm-segmented[data-presentation="text"] .hjm-segmented__items { flex-direction:row; gap:var(--hjm-space-md); padding:0; border:0; border-radius:0; background:transparent; }
-.hjm-segmented[data-presentation="text"] .hjm-segmented__item { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; min-block-size:var(--hjm-control-min-touch-target); padding:0; gap:var(--hjm-space-xxs); box-shadow:none; background:transparent; color:var(--hjm-color-text-muted); font-size:var(--hjm-type-body-large-size); font-weight:500; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; min-block-size:var(--hjm-control-min-touch-target); padding:0; gap:var(--hjm-space-xxs); box-shadow:none; background:transparent; color:var(--hjm-color-text-muted); font-size:var(--hjm-type-body-large-size); font-weight:var(--hjm-text-emphasis-medium); }
 .hjm-segmented[data-presentation="text"] .hjm-segmented__item::after { content:""; position:static; width:16px; height:2px; border-radius:var(--hjm-radius-full); background:transparent; }
-.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:700; }
+.hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:var(--hjm-font-weight-semibold); }
 .hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
-.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:400; }
-.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:600; }
+.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:var(--hjm-text-emphasis-regular); }
+.hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:var(--hjm-text-emphasis-strong); }
 
 /* Long read-only records need a stable label column across wrapped values. */
 .hjm-description-list[data-layout="inline"] { gap: 0; }