@hjmds/react 1.27.2 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/auth-screen.d.ts +32 -2
  2. package/dist/auth-screen.d.ts.map +1 -1
  3. package/dist/auth-screen.js +52 -4
  4. package/dist/auth-screen.js.map +1 -1
  5. package/dist/chart.d.ts +1 -1
  6. package/dist/chart.js.map +1 -1
  7. package/dist/collection-editing.js.map +1 -1
  8. package/dist/communication.js +1 -1
  9. package/dist/communication.js.map +1 -1
  10. package/dist/data-table.d.ts +2 -2
  11. package/dist/data-table.d.ts.map +1 -1
  12. package/dist/data-table.js.map +1 -1
  13. package/dist/display.d.ts.map +1 -1
  14. package/dist/display.js +5 -2
  15. package/dist/display.js.map +1 -1
  16. package/dist/evidence.d.ts +1 -1
  17. package/dist/evidence.js +2 -2
  18. package/dist/evidence.js.map +1 -1
  19. package/dist/feedback.d.ts +10 -0
  20. package/dist/feedback.d.ts.map +1 -1
  21. package/dist/feedback.js +6 -1
  22. package/dist/feedback.js.map +1 -1
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js +1 -1
  26. package/dist/index.js.map +1 -1
  27. package/dist/internal/list-row-scroll-room.d.ts +16 -0
  28. package/dist/internal/list-row-scroll-room.d.ts.map +1 -0
  29. package/dist/internal/list-row-scroll-room.js +17 -0
  30. package/dist/internal/list-row-scroll-room.js.map +1 -0
  31. package/dist/notification-bell.d.ts +4 -1
  32. package/dist/notification-bell.d.ts.map +1 -1
  33. package/dist/notification-bell.js +5 -2
  34. package/dist/notification-bell.js.map +1 -1
  35. package/dist/overlays.js +2 -2
  36. package/dist/overlays.js.map +1 -1
  37. package/dist/screen-flows.d.ts +2 -2
  38. package/dist/screen-flows.d.ts.map +1 -1
  39. package/dist/screen-flows.js +1 -1
  40. package/dist/screen-flows.js.map +1 -1
  41. package/dist/screens.d.ts +1 -1
  42. package/dist/screens.d.ts.map +1 -1
  43. package/dist/screens.js.map +1 -1
  44. package/dist/selection.d.ts.map +1 -1
  45. package/dist/selection.js +2 -2
  46. package/dist/selection.js.map +1 -1
  47. package/dist/styles.css +183 -108
  48. package/dist/styles.layered.css +183 -108
  49. package/dist/theme.d.ts.map +1 -1
  50. package/dist/theme.js +14 -3
  51. package/dist/theme.js.map +1 -1
  52. package/dist/top.js +1 -1
  53. package/dist/top.js.map +1 -1
  54. package/dist/virtual-list.js +4 -4
  55. package/dist/virtual-list.js.map +1 -1
  56. package/package.json +3 -3
@@ -62,9 +62,9 @@
62
62
  .hjm-text[data-variant="title"] { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
63
63
  .hjm-text[data-variant="titleLarge"] { font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); }
64
64
  .hjm-text[data-variant="heading"] { font-size: var(--hjm-type-heading-size); line-height: var(--hjm-type-heading-line-height); }
65
- .hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-font-weight-regular); }
66
- .hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-font-weight-semibold); }
67
- .hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-font-weight-bold); }
65
+ .hjm-text[data-emphasis="regular"] { font-weight: var(--hjm-text-emphasis-regular); }
66
+ .hjm-text[data-emphasis="medium"] { font-weight: var(--hjm-text-emphasis-medium); }
67
+ .hjm-text[data-emphasis="strong"] { font-weight: var(--hjm-text-emphasis-strong); }
68
68
  .hjm-text[data-tone="primary"] { color: var(--hjm-color-text); }
69
69
  .hjm-text[data-tone="body"] { color: var(--hjm-color-text-body); }
70
70
  .hjm-text[data-tone="muted"] { color: var(--hjm-color-text-muted); }
@@ -162,7 +162,7 @@
162
162
  border-radius: var(--hjm-radius-md);
163
163
  color: var(--hjm-color-on-primary);
164
164
  background: var(--hjm-color-primary);
165
- font-weight: var(--hjm-font-weight-semibold);
165
+ font-weight: var(--hjm-text-emphasis-medium);
166
166
  text-decoration: none;
167
167
  transform: translateY(calc(-100% - (2 * var(--hjm-space-sm))));
168
168
  transition: transform var(--hjm-motion-fast);
@@ -214,7 +214,7 @@
214
214
  .hjm-icon-button,
215
215
  .hjm-link {
216
216
  font: inherit;
217
- font-weight: var(--hjm-font-weight-semibold);
217
+ font-weight: var(--hjm-text-emphasis-medium);
218
218
  transition: background-color var(--hjm-motion-fast), color var(--hjm-motion-fast), opacity var(--hjm-motion-fast), transform var(--hjm-motion-fast);
219
219
  }
220
220
  .hjm-button,
@@ -317,6 +317,10 @@
317
317
  .hjm-button[data-tone="ghost"][data-size="large"] { --hjm-edge-overhang: calc(var(--hjm-button-edge-large) + 1px); }
318
318
  :is(.hjm-icon-button, .hjm-button):is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-edge-overhang, 0px)); }
319
319
  :is(.hjm-icon-button, .hjm-button):is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-edge-overhang, 0px)); }
320
+ /* NotificationBell wraps a default (ghost, medium) IconButton with a badge anchored to its own end, so the bell root
321
+ takes the same overhang and the badge keeps the icon's corner (2026-10-17 1.27.2 adoption: Spint's top-bar bell). */
322
+ .hjm-notification-bell:is([data-edge="start"], [data-edge="both"]) { margin-inline-start: calc(-1 * var(--hjm-icon-button-edge-medium)); }
323
+ .hjm-notification-bell:is([data-edge="end"], [data-edge="both"]) { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
320
324
  .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; }
321
325
  .hjm-link[data-tone="neutral"] { color: var(--hjm-color-text-body); }
322
326
  .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; }
@@ -338,13 +342,13 @@
338
342
  }
339
343
  /* An edge-aligned control overhangs into the container padding, where an outer ring can be clipped by the container's
340
344
  overflow (lists, cards); draw the ring inside its own box instead, as the Toast close does. */
341
- :is(.hjm-icon-button, .hjm-button)[data-edge]:focus-visible { outline-offset: calc(-1 * var(--hjm-focus-width)); }
345
+ :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)); }
342
346
 
343
347
  /* Input interiors use the theme canvas (white in light mode), not tinted
344
348
  surfaces. Focus and selection still use blue borders and compact indicators. */
345
349
  .hjm-field {
346
350
  font-family: var(--hjm-font-family-ui, inherit); display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
347
- .hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-font-weight-semibold); }
351
+ .hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-text-emphasis-medium); }
348
352
  .hjm-field__control {
349
353
  display: flex;
350
354
  align-items: center;
@@ -483,7 +487,7 @@
483
487
  background: var(--hjm-color-bg);
484
488
  font-size: var(--hjm-type-title-size);
485
489
  line-height: var(--hjm-type-title-line-height);
486
- font-weight: var(--hjm-font-weight-semibold);
490
+ font-weight: var(--hjm-text-emphasis-medium);
487
491
  }
488
492
  .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); }
489
493
  .hjm-otp-field__slot[data-state="filled"] { border-color: var(--hjm-color-content-brand); }
@@ -572,8 +576,8 @@
572
576
  .hjm-bottom-navigation__indicator[data-state="selected"] > :first-child { transform: scale(1.06); }
573
577
  /* Icon-only items center the indicator in the density's minimum height instead of leaving an empty label row. */
574
578
  .hjm-bottom-navigation[data-labels="hidden"] .hjm-bottom-navigation__item { justify-content: center; }
575
- .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); }
576
- .hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-bold); }
579
+ .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); }
580
+ .hjm-bottom-navigation__item[data-state="selected"] .hjm-bottom-navigation__label { font-weight: var(--hjm-font-weight-semibold); }
577
581
  .hjm-bottom-navigation__badge {
578
582
  position: absolute;
579
583
  inset-block-start: calc(-1 * var(--hjm-space-xxs));
@@ -783,9 +787,9 @@
783
787
  .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); }
784
788
  .hjm-choice__copy { display: grid; gap: var(--hjm-space-xxs); padding-block: 2px; }
785
789
  .hjm-choice[data-state="checked"] .hjm-choice__copy > :first-child,
786
- .hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-bold); }
790
+ .hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-semibold); }
787
791
  .hjm-radio-group { min-inline-size: 0; padding: 0; border: 0; }
788
- .hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-font-weight-semibold); }
792
+ .hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
789
793
  .hjm-radio-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
790
794
  .hjm-radio-group[data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-xxs); }
791
795
  .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); }
@@ -793,7 +797,7 @@
793
797
  .hjm-radio-group[data-orientation="horizontal"][data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-sm); }
794
798
  .hjm-radio-group[data-orientation="horizontal"][data-presentation="grouped"] .hjm-radio-group__items { gap: 0; }
795
799
  .hjm-checkbox-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
796
- .hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-font-weight-semibold); }
800
+ .hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-text-emphasis-medium); }
797
801
  .hjm-checkbox-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
798
802
  .hjm-checkbox-group[data-presentation="plain"] .hjm-checkbox-group__items { gap: var(--hjm-space-xxs); }
799
803
  .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); }
@@ -815,8 +819,9 @@
815
819
  .hjm-switch__copy { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
816
820
  .hjm-switch__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
817
821
  .hjm-switch[data-presentation="row"] { display: flex; inline-size: 100%; justify-content: space-between; }
818
- /* switchRecipe.rowTwoLineMinHeight (= list-row comfortable two-line 68), same as Native for a described switch. */
819
- .hjm-switch[data-two-line="true"] { min-block-size: var(--hjm-switch-row-two-line-min-height); }
822
+ /* A described switch: copy + switchRecipe.rowPaddingVertical 8 on both sides, min rowTwoLineMinHeight 56, same as Native.
823
+ Stacked switch rows carry this spacing themselves; containers add no gap between them (2026-10-17). */
824
+ .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); }
820
825
  .hjm-switch[data-presentation="row"] .hjm-switch__copy { order: -1; flex: 1; }
821
826
  /* Inherited layout variables reset at nested providers and keep ./selection independent. */
822
827
  .hjm-root { --hjm-switch-row-direction: row; --hjm-switch-row-align: center; --hjm-switch-copy-flex: 1; }
@@ -837,15 +842,24 @@
837
842
  /* margin: 0 resets the UA fieldset 2px inline margin (as the other HJM fieldsets do); it offset the track from the parent edges. */
838
843
  .hjm-segmented { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
839
844
  /* segmentedControlRecipe (2026-10-06 follow-up): track padding/gap spacing.xxs 4, radius lg, 1px border; item radius md,
840
- medium 44 · padding md, small 36 · padding sm with a 4px vertical hit slop. Web had drawn a 2px track with radius md,
841
- no small size, and a 1px selected ring; Native already read the recipe. */
842
- .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; }
843
- .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; }
844
- .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); }
845
+ padding md (medium) / sm (small). Web had drawn a 2px track with radius md, no small size, and a 1px selected ring;
846
+ Native already read the recipe. */
847
+ /* 2026-10-17 ("높이 맞춰"): the connected control's OUTER height is the Button/Chip height of its size
848
+ (--hjm-segmented-height, segmentedControlRecipe.sizes.height); options get that minus the 4 padding + 1 border on
849
+ each side and reach the 44 target with an invisible vertical ::after. The scroller sits outside the drawn track and
850
+ reaches past a short track by negative margin, so neither the hit area is clipped nor the layout grows. */
851
+ .hjm-segmented { --hjm-segmented-height: var(--hjm-control-button-medium); }
852
+ .hjm-segmented[data-size="small"] { --hjm-segmented-height: var(--hjm-control-button-small); }
853
+ .hjm-segmented__scroller { min-inline-size: 0; overflow-x: auto; }
854
+ .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)); }
855
+ .hjm-segmented:where(:not([data-presentation="pills"]):not([data-presentation="text"])) .hjm-segmented__items { inline-size: max-content; min-inline-size: 100%; }
856
+ .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); }
857
+ .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; }
858
+ .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); }
845
859
  /* Vertical only: neighbours are 4px apart, so a horizontal slop would overlap the next option's target. */
846
- .hjm-segmented[data-size="small"]:not([data-presentation="pills"]) .hjm-segmented__item::after { content: ""; position: absolute; inset: -4px 0; }
860
+ .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; }
847
861
  .hjm-segmented__item input { position: absolute; opacity: 0; }
848
- .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); }
862
+ .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); }
849
863
  .hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
850
864
 
851
865
  /* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
@@ -856,17 +870,19 @@
856
870
  Pills are excluded (segmentedControlRecipe.pills.largeTextLayout "wrap", 1.13.1): they wrap in a block and
857
871
  stay one line in a scroll rail. Stacking them turned a filter rail into a tall column (utilverse, 2026-10-06). */
858
872
  @media (max-width: 11em) {
859
- .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
860
- .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
873
+ .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
874
+ .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); }
875
+ .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
861
876
  }
862
- [data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
863
- [data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
877
+ [data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__items { flex-direction: column; overflow-x: visible; inline-size: auto; }
878
+ [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); }
879
+ [data-large-text="true"] .hjm-segmented:not([data-presentation="pills"]) .hjm-segmented__item::after { inset: 0; }
864
880
 
865
881
  .hjm-tabs { min-inline-size: 0; }
866
882
  .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); }
867
883
  .hjm-tabs[data-overflow="clip"] .hjm-tabs__list { overflow: hidden; }
868
884
  .hjm-tabs[data-layout="fitted"] .hjm-tabs__tab { flex: 1 1 0; }
869
- .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; }
885
+ .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; }
870
886
  .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); }
871
887
  .hjm-tabs__leading { display: inline-flex; flex: 0 0 auto; align-items: center; margin-inline-end: var(--hjm-space-xs); }
872
888
  .hjm-tabs__tab[data-state="selected"] { color: var(--hjm-color-text); }
@@ -881,7 +897,7 @@
881
897
  .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; }
882
898
 
883
899
  .hjm-badge, .hjm-tag { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; overflow-wrap: anywhere; }
884
- .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); }
900
+ .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); }
885
901
  .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) */
886
902
  .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) */
887
903
  .hjm-badge[data-tone="brand"] { color: var(--hjm-color-content-brand); }
@@ -897,7 +913,7 @@
897
913
  .hjm-badge[data-variant="outline"][data-tone="warning"] { border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
898
914
  .hjm-badge[data-variant="outline"][data-tone="attention"] { border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
899
915
  .hjm-badge[data-variant="outline"][data-tone="danger"] { border-color: color-mix(in srgb, var(--hjm-color-danger) 30%, transparent); }
900
- .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); }
916
+ .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); }
901
917
  .hjm-tag[data-tone="brand"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
902
918
  .hjm-tag[data-tone="info"] { background: var(--hjm-color-bg); }
903
919
  .hjm-tag[data-tone="success"] { background: color-mix(in srgb, var(--hjm-accent-success) 10%, transparent); }
@@ -913,7 +929,7 @@
913
929
  .hjm-icon[data-tone="danger"] { color: var(--hjm-color-danger); }
914
930
  .hjm-icon[data-tone="inverse"] { color: var(--hjm-color-on-primary); }
915
931
  /* Counts must not flex-shrink below their text and padding in narrow rows. */
916
- .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; }
932
+ .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; }
917
933
  .hjm-counter-badge[data-size="small"] { min-inline-size: 16px; block-size: 16px; padding-inline: var(--hjm-space-xxs); }
918
934
  .hjm-counter-badge[data-tone="brand"] { color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
919
935
  .hjm-counter-badge[data-tone="danger"] { color: var(--hjm-color-on-danger); background: var(--hjm-color-danger-fill); }
@@ -928,7 +944,8 @@
928
944
  .hjm-card__header { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); min-inline-size: 0; }
929
945
  .hjm-card__leading { flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 1; }
930
946
  .hjm-card__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xs); }
931
- .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; }
947
+ /* cardRecipe.title.emphasis "strong": without a weight the h2–h6 element fell back to the UA bold (700). */
948
+ .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; }
932
949
  .hjm-card__description { margin: 0; overflow-wrap: anywhere; }
933
950
  .hjm-card__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-space-sm); padding: 0 var(--hjm-space-md) var(--hjm-space-md); }
934
951
  /* Row rhythm reads the recipe density variables so the stylesheet does not
@@ -973,7 +990,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
973
990
  .hjm-list-row__leading[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
974
991
  .hjm-list-row__content { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
975
992
  /* listRowRecipe title bodyLarge / description body (2026-10-17: Web inherited 14 for both while Native used the recipe). */
976
- .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; }
993
+ .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; }
977
994
  .hjm-list-row[data-tone="danger"] .hjm-list-row__title { color: var(--hjm-color-danger); }
978
995
  .hjm-list-row__description, .hjm-list-row__trailing { color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
979
996
  .hjm-list-row__description { font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
@@ -983,7 +1000,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
983
1000
  .hjm-section__copy { display: grid; flex: 1 1 auto; gap: var(--hjm-space-xxs); min-inline-size: 0; }
984
1001
  /* sectionRecipe.title is the `title` variant (18/26 bold) and description the `caption` variant (11/16), as Native draws them.
985
1002
  Until 2026-10-06 Web inherited body (14) for both, so the same Section header was smaller on Web. */
986
- .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; }
1003
+ .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; }
987
1004
  .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; }
988
1005
  .hjm-section__action { flex: 0 0 auto; }
989
1006
  .hjm-section__content { min-inline-size: 0; }
@@ -999,7 +1016,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
999
1016
  recipe-only sizes as custom properties so theme.ts does not pull this opt-in contract into every graph. */
1000
1017
  /* fit-content: a column Stack stretched the pill to its max width with empty space after the label; Native sizes it
1001
1018
  to its content (2026-10-17 review F N13). Unlike align-self it keeps vertical centering in a TopBar row. */
1002
- .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; }
1019
+ .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; }
1003
1020
  /* Without media the pill keeps the symmetric label inset; the media hugs the start edge like an avatar chip. */
1004
1021
  .hjm-activity-chip:not([data-media]) { padding-inline-start: var(--hjm-space-sm); }
1005
1022
  .hjm-activity-chip[data-emphasis="emphasis"] { border-color: var(--hjm-color-primary); color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
@@ -1008,7 +1025,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1008
1025
  .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%; }
1009
1026
  .hjm-activity-chip__media > :is(img, svg) { inline-size: 100%; block-size: 100%; object-fit: contain; }
1010
1027
  .hjm-activity-chip__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1011
- .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; }
1028
+ .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; }
1012
1029
  .hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-sm); gap: var(--hjm-space-xxs); }
1013
1030
  .hjm-chip[data-size="small"]::after { content: ""; position: absolute; inset: -4px 0; }
1014
1031
  .hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
@@ -1024,12 +1041,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1024
1041
  .hjm-list__item { min-inline-size: 0; }
1025
1042
  /* Indent only the divider: moving the row shifted every title after the first
1026
1043
  and narrowed its text column in the notification-settings composition. Insets are measured from the list content
1027
- edge (where the row text sits) and come from listRecipe.separators: full spans the row surface, indented starts at
1028
- the text after leading 40 + gap 12 = 52, as Native. */
1044
+ edge (where the row text sits) and come from listRecipe.separators: full spans the row surface; indented follows
1045
+ the text column of the row above (the separator belongs to that row, as Native draws it after the row) — 52 after a
1046
+ row with leading (ListRow root `data-leading`), 0 after one without, ending on the content edge (2026-10-17). */
1029
1047
  .hjm-list:is([data-separator="full"], [data-separator="indented"]) > .hjm-list__item + .hjm-list__item { position: relative; }
1030
1048
  .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; }
1031
1049
  .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); }
1032
1050
  .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); }
1051
+ .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); }
1033
1052
 
1034
1053
  /* statisticRecipe.density (2026-10-06 follow-up): line gap comfortable xs 8 · compact xxs 4, surface padding md 16 · sm 12,
1035
1054
  group gap xs 8. Web had drawn 4/2, a fixed 16 and 12, Native read the recipe. */
@@ -1041,14 +1060,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1041
1060
  (compact `title`) heavy, affix `body` semibold in content.body, hint and trend `caption` (trend bold). Until 2026-10-06
1042
1061
  Web drew a body-size medium label, a title-size value at both densities (scaled twice by --hjm-text-scale, which the
1043
1062
  --hjm-type-* sizes already include) and muted affixes. */
1044
- .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; }
1063
+ .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; }
1045
1064
  .hjm-statistic[data-density="compact"] .hjm-statistic__label { font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
1046
1065
  .hjm-statistic__value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--hjm-space-xxs); min-inline-size: 0; }
1047
- .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; }
1066
+ .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; }
1048
1067
  .hjm-statistic[data-density="compact"] .hjm-statistic__value { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
1049
- .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); }
1068
+ .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); }
1050
1069
  .hjm-statistic__hint { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
1051
- .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; }
1070
+ .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; }
1052
1071
  .hjm-statistic__trend[data-tone="success"] { color: var(--hjm-accent-success); }
1053
1072
  .hjm-statistic__trend[data-tone="warning"] { color: var(--hjm-accent-warning); }
1054
1073
  .hjm-statistic__trend[data-tone="danger"] { color: var(--hjm-color-danger); }
@@ -1075,18 +1094,20 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1075
1094
  .hjm-notice__content > :first-child { margin-block-start: calc((var(--hjm-notice-anchor) - 1lh) / 2); }
1076
1095
  .hjm-notice__action { flex: 0 0 auto; max-inline-size: 100%; }
1077
1096
  .hjm-notice__title, .hjm-notice__description { overflow-wrap: anywhere; }
1097
+ /* noticeRecipe/emptyStateRecipe title weight; the <strong> otherwise draws the UA bold (700). */
1098
+ .hjm-notice__title { font-weight: var(--hjm-type-title-weight); }
1078
1099
 
1079
1100
  /* emptyStateRecipe.density.regular paddingVertical xxxl 40 (2026-10-06; Web had xxl 32, Native read the recipe). */
1080
1101
  /* Like Native, a regular empty state fills the rest of a flex host and centers in it; compact (cards, sheets) stays content-high. */
1081
1102
  .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; }
1082
1103
  .hjm-empty-state[data-density="compact"] { flex-grow: 0; padding-block: var(--hjm-space-xl); }
1083
- .hjm-empty-state__title { color: var(--hjm-color-text); }
1104
+ .hjm-empty-state__title { color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); }
1084
1105
  .hjm-result { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); text-align: center; }
1085
- .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); }
1106
+ .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); }
1086
1107
  .hjm-result[data-status="success"] .hjm-result__icon { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 12%, transparent); }
1087
1108
  .hjm-result[data-status="failure"] .hjm-result__icon { color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 12%, transparent); }
1088
1109
  .hjm-result[data-status="info"] .hjm-result__icon { color: var(--hjm-accent-info); background: var(--hjm-color-bg); }
1089
- .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; }
1110
+ .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; }
1090
1111
  .hjm-result__description { max-inline-size: 40rem; margin: 0; color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
1091
1112
  .hjm-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-xs); }
1092
1113
  .hjm-progress { display: grid; gap: var(--hjm-space-xs); }
@@ -1152,7 +1173,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1152
1173
  .hjm-list-row--loading [data-placeholder] {
1153
1174
  display: block;
1154
1175
  border-radius: var(--hjm-radius-sm);
1155
- background: var(--hjm-color-surface-alt);
1176
+ background: var(--hjm-skeleton-background); /* same placeholder fill as Skeleton */
1156
1177
  }
1157
1178
  .hjm-list-row--loading .hjm-list-row__title[data-placeholder] {
1158
1179
  block-size: var(--hjm-type-body-large-line-height);
@@ -1160,7 +1181,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1160
1181
  .hjm-list-row--loading .hjm-list-row__description[data-placeholder] {
1161
1182
  block-size: var(--hjm-type-body-line-height);
1162
1183
  }
1163
- .hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-color-surface-alt); }
1184
+ .hjm-list-row--loading .hjm-list-row__leading[data-placeholder] { background: var(--hjm-skeleton-background); }
1164
1185
  .hjm-list-row--loading .hjm-list-row__trailing[data-placeholder] { block-size: var(--hjm-type-caption-line-height); }
1165
1186
  .hjm-spinner { display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-content-brand); }
1166
1187
  .hjm-spinner[data-tone="neutral"] { color: var(--hjm-color-text-muted); }
@@ -1168,10 +1189,15 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1168
1189
  .hjm-spinner[data-size="small"] { font-size: 14px; }
1169
1190
  .hjm-spinner[data-size="medium"] { font-size: 20px; }
1170
1191
  .hjm-spinner[data-size="large"] { font-size: 28px; }
1171
- .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); }
1192
+ /* Filled placeholder (recipe background, 2026-10-17): a canvas fill + hairline was invisible on white. */
1193
+ .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); }
1172
1194
  .hjm-skeleton[data-shape="text"] { min-block-size: var(--hjm-space-md); border-radius: var(--hjm-radius-sm); }
1173
- .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); }
1174
- .hjm-skeleton[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
1195
+ .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); }
1196
+ .hjm-skeleton[data-shape="media"] { min-block-size: 0; aspect-ratio: var(--hjm-skeleton-media-aspect); }
1197
+ .hjm-skeleton[data-shape="button"] { min-block-size: var(--hjm-skeleton-button-height); }
1198
+ .hjm-skeleton-lines { display: flex; flex-direction: column; gap: var(--hjm-skeleton-lines-gap); inline-size: 100%; }
1199
+ .hjm-skeleton-lines > [data-last] { inline-size: var(--hjm-skeleton-last-line-width); }
1200
+ .hjm-skeleton[data-animated="true"], .hjm-skeleton-lines[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
1175
1201
 
1176
1202
  /* CommandPalette ---------------------------------------------------------- */
1177
1203
  /*
@@ -1236,7 +1262,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1236
1262
  }
1237
1263
  .hjm-data-table[data-density="compact"] .hjm-data-table__table th,
1238
1264
  .hjm-data-table[data-density="compact"] .hjm-data-table__table td { padding: var(--hjm-space-xs) var(--hjm-space-sm); }
1239
- .hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
1265
+ .hjm-data-table__table th { color: var(--hjm-color-text-muted); font-weight: var(--hjm-text-emphasis-medium); }
1240
1266
  .hjm-data-table__selector { inline-size: var(--hjm-control-min-touch-target); }
1241
1267
  .hjm-data-table__sort {
1242
1268
  display: inline-flex;
@@ -1277,7 +1303,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1277
1303
  .hjm-data-table__table .hjm-data-table__pinned { position: sticky; z-index: 1; background: var(--hjm-color-bg); }
1278
1304
  .hjm-data-table__table .hjm-data-table__pinned-edge { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
1279
1305
  .hjm-data-table__table .hjm-data-table__pinned-edge:dir(rtl) { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
1280
- .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); }
1306
+ .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); }
1281
1307
 
1282
1308
  /* DataTable family (2026-10-14): header bands, row groups, sub-row indent, tone/heat, bounded
1283
1309
  height. Colors mirror dataTableFamilyRecipe; heat is a background-image so pinned cells keep
@@ -1291,7 +1317,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1291
1317
  background: var(--hjm-color-surface-alt);
1292
1318
  color: var(--hjm-color-text-muted);
1293
1319
  font-size: var(--hjm-type-label-size);
1294
- font-weight: var(--hjm-font-weight-bold);
1320
+ font-weight: var(--hjm-text-emphasis-medium);
1295
1321
  text-align: start;
1296
1322
  }
1297
1323
  /* The label stays in view while a wide table scrolls sideways. */
@@ -1308,37 +1334,37 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1308
1334
  .hjm-table-family { min-inline-size: 0; overflow-x: auto; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); }
1309
1335
  .hjm-line-score__table, .hjm-matrix-table__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
1310
1336
  .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; }
1311
- .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); }
1312
- .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); }
1337
+ .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); }
1338
+ .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); }
1313
1339
  .hjm-line-score__team-content { display: inline-flex; align-items: center; gap: var(--hjm-space-xs); }
1314
- .hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
1340
+ .hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
1315
1341
  .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)); }
1316
1342
  .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); }
1317
1343
  .hjm-line-score__table .hjm-line-score__team { inset-inline-start: 0; }
1318
1344
  .hjm-line-score__table td.hjm-line-score__period { min-inline-size: 26px; color: var(--hjm-color-text-sub); }
1319
- .hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
1345
+ .hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
1320
1346
  .hjm-line-score__table [data-current] { background: var(--hjm-table-family-selected); }
1321
1347
  .hjm-line-score__table th[data-current] { color: var(--hjm-color-content-brand); }
1322
- .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); }
1348
+ .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); }
1323
1349
  /* A collapsed-table border stays with the table, not the pinned cell, so the edge is an inset shadow. */
1324
1350
  .hjm-line-score__total-edge { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
1325
1351
  .hjm-line-score__total-edge:dir(rtl) { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
1326
- .hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
1352
+ .hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
1327
1353
  .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); }
1328
- .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); }
1329
- .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); }
1354
+ .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); }
1355
+ .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); }
1330
1356
  .hjm-matrix-table__table td { color: var(--hjm-color-text-muted); }
1331
1357
  .hjm-matrix-table__table thead td { border-block-start: 0; }
1332
1358
  .hjm-matrix-table__self { background: var(--hjm-color-surface-alt); }
1333
1359
  .hjm-matrix-table__table tr[data-highlighted] > * { background-color: var(--hjm-table-family-selected); }
1334
1360
  .hjm-comparison-table { padding-block: var(--hjm-space-xs); }
1335
- .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); }
1361
+ .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); }
1336
1362
  .hjm-comparison-table__rows { margin: 0; padding: 0; list-style: none; }
1337
1363
  .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); }
1338
1364
  .hjm-comparison-table__rows:first-child > :first-child { border-block-start: 0; }
1339
1365
  .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); }
1340
1366
  .hjm-comparison-table__values > :last-child { text-align: end; }
1341
- .hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
1367
+ .hjm-comparison-table__values > [data-win] { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
1342
1368
  .hjm-comparison-table__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); }
1343
1369
  .hjm-comparison-table__bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hjm-space-sm); block-size: 5px; }
1344
1370
  .hjm-comparison-table__track { display: flex; justify-content: flex-end; border-radius: 2px; background: var(--hjm-color-surface-alt); overflow: hidden; }
@@ -1364,8 +1390,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1364
1390
  .hjm-chart__cursor { stroke: var(--hjm-chart-axis-label); }
1365
1391
  .hjm-chart__dot { stroke: var(--hjm-color-bg); }
1366
1392
  .hjm-chart__label { fill: var(--hjm-chart-axis-label); font-family: inherit; font-size: var(--hjm-type-caption-size); }
1367
- .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); }
1368
- .hjm-chart__extreme { font-weight: var(--hjm-font-weight-semibold); }
1393
+ .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); }
1394
+ .hjm-chart__extreme { font-weight: var(--hjm-text-emphasis-medium); }
1369
1395
  .hjm-chart__bubble {
1370
1396
  position: absolute;
1371
1397
  inset-block-start: 0;
@@ -1377,7 +1403,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1377
1403
  color: var(--hjm-chart-tooltip-content);
1378
1404
  font-size: var(--hjm-type-caption-size);
1379
1405
  line-height: var(--hjm-type-caption-line-height);
1380
- font-weight: var(--hjm-font-weight-bold);
1406
+ font-weight: var(--hjm-text-emphasis-medium);
1381
1407
  white-space: nowrap;
1382
1408
  pointer-events: none;
1383
1409
  }
@@ -1385,7 +1411,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1385
1411
  .hjm-chart__pie-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
1386
1412
  .hjm-chart__slice[role="button"], .hjm-chart--pie .hjm-chart__slice[data-id] { cursor: pointer; }
1387
1413
  .hjm-chart__slice:focus-visible { outline: none; stroke: var(--hjm-color-focus); stroke-width: var(--hjm-focus-width); }
1388
- .hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-font-weight-bold); }
1414
+ .hjm-chart__slice-label { fill: #ffffff; font-family: inherit; font-size: var(--hjm-type-caption-size); font-weight: var(--hjm-text-emphasis-medium); }
1389
1415
  .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); }
1390
1416
  .hjm-chart-legend {
1391
1417
  display: flex;
@@ -1418,7 +1444,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1418
1444
  .hjm-chart-legend__button:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
1419
1445
  .hjm-chart-legend__swatch { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; }
1420
1446
  .hjm-chart-legend[data-interactive] .hjm-chart-legend__label { flex: 1; }
1421
- .hjm-chart-legend__value { font-weight: var(--hjm-font-weight-bold); font-variant-numeric: tabular-nums; }
1447
+ .hjm-chart-legend__value { font-weight: var(--hjm-text-emphasis-medium); font-variant-numeric: tabular-nums; }
1422
1448
 
1423
1449
  /* Mentions ---------------------------------------------------------------- */
1424
1450
  /*
@@ -1479,7 +1505,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1479
1505
  padding-inline: var(--hjm-space-sm);
1480
1506
  border-block-end: 1px solid var(--hjm-color-border);
1481
1507
  }
1482
- .hjm-transfer-list__title { font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
1508
+ .hjm-transfer-list__title { font-weight: var(--hjm-type-title-weight); overflow-wrap: anywhere; }
1483
1509
  .hjm-transfer-list__select-all { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
1484
1510
  /* These rows center the indicator, so drop the 2px top offset Checkbox uses to sit on its first text line. */
1485
1511
  .hjm-transfer-list__select-all > .hjm-choice__indicator,
@@ -1732,6 +1758,42 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1732
1758
  margin-block-start: var(--hjm-auth-screen-footer-gap);
1733
1759
  text-align: center;
1734
1760
  }
1761
+ /* 히어로 문구와 정책 링크(AuthScreenHero·AuthScreenFooter). 글자 단계·간격은 계약 값이다. */
1762
+ .hjm-auth-screen__copy { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
1763
+ .hjm-auth-screen__footer-content { display: flex; flex-direction: column; align-items: center; inline-size: 100%; }
1764
+ .hjm-auth-screen__links {
1765
+ display: flex;
1766
+ flex-wrap: wrap;
1767
+ justify-content: center;
1768
+ align-items: center;
1769
+ column-gap: var(--hjm-auth-screen-link-gap);
1770
+ }
1771
+ /* 2026-10-17 "간격 줄여": 보이는 간격은 gap + 구분점뿐이다. 44 터치 높이는 배경 없는 min-block-size,
1772
+ 가로 터치 폭은 보이지 않는 가상 요소가 구분점 앞까지 넓힌다 — 버튼 안쪽 여백으로 만들면 글자 사이가 다시 벌어진다. */
1773
+ .hjm-auth-screen__link {
1774
+ position: relative;
1775
+ display: inline-flex;
1776
+ align-items: center;
1777
+ min-block-size: var(--hjm-auth-screen-link-target);
1778
+ margin: 0;
1779
+ padding: 0;
1780
+ border: 0;
1781
+ background: none;
1782
+ font-family: var(--hjm-font-family-ui, inherit);
1783
+ text-decoration: underline;
1784
+ text-underline-offset: 0.18em;
1785
+ cursor: pointer;
1786
+ }
1787
+ .hjm-auth-screen__link::after {
1788
+ content: "";
1789
+ position: absolute;
1790
+ inset-block: 0;
1791
+ inset-inline: calc(var(--hjm-auth-screen-link-gap) * -1);
1792
+ }
1793
+ .hjm-auth-screen__link:focus-visible {
1794
+ outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
1795
+ outline-offset: var(--hjm-focus-offset);
1796
+ }
1735
1797
 
1736
1798
  /* Sidebar ----------------------------------------------------------------- */
1737
1799
  .hjm-sidebar {
@@ -1781,7 +1843,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1781
1843
  .hjm-sidebar__item[aria-current="page"] {
1782
1844
  background: var(--hjm-color-bg);
1783
1845
  color: var(--hjm-color-content-brand);
1784
- font-weight: var(--hjm-font-weight-semibold);
1846
+ font-weight: var(--hjm-text-emphasis-strong);
1785
1847
  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
1786
1848
  .hjm-sidebar__item[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
1787
1849
  .hjm-sidebar__item:focus-visible,
@@ -1816,7 +1878,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
1816
1878
  border-color: var(--hjm-color-focus);
1817
1879
  background: var(--hjm-color-bg);
1818
1880
  color: var(--hjm-color-content-brand);
1819
- font-weight: var(--hjm-font-weight-semibold);
1881
+ font-weight: var(--hjm-text-emphasis-strong);
1820
1882
  }
1821
1883
  .hjm-toggle-group__item:disabled { cursor: default; color: var(--hjm-color-text-weak); }
1822
1884
  .hjm-toggle-group__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2155,12 +2217,18 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2155
2217
  title line-height or patched this private selector to achieve this alignment. */
2156
2218
  .hjm-sheet__header { align-items: center; }
2157
2219
  .hjm-sheet__header > div { min-inline-size: 0; }
2220
+ /* Sheets have no visible title (2026-10-17 user decision); a header holds only the description and/or ×,
2221
+ and the × stays at the inline end even when there is no description. */
2222
+ .hjm-sheet__header > div { flex: 1 1 auto; }
2223
+ .hjm-sheet__header > .hjm-dialog__close { margin-inline-start: auto; }
2224
+ /* Overlay titles render h2: without an explicit weight they fell back to the UA bold (700) instead of
2225
+ the recipe's title weight (2026-10-17 lighter scale). */
2158
2226
  .hjm-dialog__title,
2159
- .hjm-sheet__title,
2160
2227
  .hjm-alert-dialog__title {
2161
2228
  margin: 0;
2162
2229
  font-size: var(--hjm-type-title-size);
2163
2230
  line-height: var(--hjm-type-title-line-height);
2231
+ font-weight: var(--hjm-type-title-weight);
2164
2232
  overflow-wrap: anywhere;
2165
2233
  }
2166
2234
  .hjm-dialog__description,
@@ -2255,7 +2323,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2255
2323
  }
2256
2324
  .hjm-sheet__header,
2257
2325
  .hjm-sheet__footer { flex: 0 0 auto; }
2258
- .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); }
2326
+ /* The header sits inside the drag zone (.hjm-sheet__drag, 2026-10-16), so a direct-child selector stopped matching and
2327
+ the Dialog's 20px top padding leaked in; scope by the sheet instead. */
2328
+ .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); }
2259
2329
  .hjm-sheet > .hjm-sheet__footer { padding: var(--hjm-space-sm) var(--hjm-space-lg) 0; }
2260
2330
  .hjm-sheet__body {
2261
2331
  min-block-size: 0;
@@ -2348,6 +2418,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2348
2418
  margin: 0;
2349
2419
  font-size: var(--hjm-type-title-size);
2350
2420
  line-height: var(--hjm-type-title-line-height);
2421
+ font-weight: var(--hjm-type-title-weight);
2351
2422
  overflow-wrap: anywhere;
2352
2423
  }
2353
2424
  .hjm-side-panel__description {
@@ -2400,7 +2471,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2400
2471
  pointer-events: auto;
2401
2472
  }
2402
2473
  .hjm-tour__counter { margin: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
2403
- .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; }
2474
+ .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; }
2404
2475
  .hjm-tour__description { margin: var(--hjm-space-xs) 0 0; color: var(--hjm-color-text-body); overflow-wrap: anywhere; }
2405
2476
  .hjm-tour__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hjm-space-xs); }
2406
2477
  .hjm-tour:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2459,12 +2530,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2459
2530
  .hjm-menu__item:hover,
2460
2531
  .hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg); box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
2461
2532
  .hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
2462
- .hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
2533
+ .hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-text-emphasis-strong); }
2463
2534
  .hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
2464
2535
  .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; }
2465
- .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); }
2536
+ .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); }
2466
2537
  .hjm-menu__separator { block-size: 1px; margin: var(--hjm-space-xxs) var(--hjm-space-xs); background: var(--hjm-color-border); }
2467
- .hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-font-weight-bold); }
2538
+ .hjm-menu__danger-indicator { flex: 0 0 auto; color: var(--hjm-color-danger); font-weight: var(--hjm-text-emphasis-medium); }
2468
2539
  .hjm-menu__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
2469
2540
  .hjm-menu__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
2470
2541
  .hjm-menu__leading,
@@ -2486,13 +2557,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2486
2557
  .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; }
2487
2558
  .hjm-select__native + .hjm-select__indicator { margin-inline-start: calc(-1 * var(--hjm-space-lg)); }
2488
2559
  .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); }
2489
- .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); }
2560
+ .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); }
2490
2561
  .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; }
2491
2562
  .hjm-select[data-density="comfortable"] .hjm-select__option,
2492
2563
  .hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
2493
2564
  .hjm-select__option { cursor: pointer; }
2494
2565
  .hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
2495
- .hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
2566
+ .hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
2496
2567
  .hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
2497
2568
  .hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
2498
2569
  .hjm-select__option-description, .hjm-select__message { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
@@ -2533,7 +2604,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2533
2604
  .hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
2534
2605
  .hjm-combobox__option { cursor: pointer; }
2535
2606
  .hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
2536
- .hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
2607
+ .hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
2537
2608
  .hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
2538
2609
  .hjm-combobox__message { color: var(--hjm-color-text-muted); }
2539
2610
  .hjm-form__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
@@ -2556,7 +2627,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2556
2627
  .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); }
2557
2628
  .hjm-timeline__content { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-block-end: var(--hjm-space-xxs); }
2558
2629
  .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); }
2559
- .hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
2630
+ .hjm-timeline__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
2560
2631
  /* Baseline sharing put the smaller caption 1.5px under the label's center; center it on the label's first line instead. */
2561
2632
  .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); }
2562
2633
  .hjm-timeline__description { color: var(--hjm-color-text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
@@ -2575,7 +2646,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2575
2646
  color: var(--hjm-color-text-body);
2576
2647
  background: transparent;
2577
2648
  font: inherit;
2578
- font-weight: var(--hjm-font-weight-bold);
2649
+ font-weight: var(--hjm-type-title-weight);
2579
2650
  text-align: start;
2580
2651
  cursor: pointer;
2581
2652
  }
@@ -2595,7 +2666,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2595
2666
  border-radius: 50%;
2596
2667
  color: var(--hjm-color-text-muted);
2597
2668
  background: var(--hjm-color-bg);
2598
- font-weight: var(--hjm-font-weight-bold);
2669
+ font-weight: var(--hjm-text-emphasis-strong);
2599
2670
  }
2600
2671
  .hjm-avatar[data-size="small"] { inline-size: 2rem; block-size: 2rem; font-size: var(--hjm-type-label-size); }
2601
2672
  .hjm-avatar[data-size="large"] { inline-size: 3rem; block-size: 3rem; }
@@ -2610,11 +2681,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2610
2681
  .hjm-divider[data-orientation="horizontal"][data-inset="both"] { margin-inline: var(--hjm-space-md); inline-size: calc(100% - (2 * var(--hjm-space-md))); }
2611
2682
  .hjm-description-list { display: grid; grid-template-columns: repeat(var(--hjm-description-columns), minmax(0, 1fr)); gap: var(--hjm-space-sm); margin: 0; }
2612
2683
  .hjm-description-list__item { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
2613
- .hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-semibold); }
2684
+ .hjm-description-list__label { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-text-emphasis-medium); }
2614
2685
  .hjm-description-list__value { margin: 0; color: var(--hjm-color-text); overflow-wrap: anywhere; }
2615
2686
  .hjm-table-scroll { max-inline-size: 100%; overflow: auto; outline-offset: 2px; }
2616
2687
  .hjm-table { inline-size: 100%; border-collapse: collapse; color: var(--hjm-color-text-body); }
2617
- .hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); text-align: start; }
2688
+ .hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-type-title-weight); text-align: start; }
2618
2689
  .hjm-table__header,
2619
2690
  .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; }
2620
2691
  .hjm-table__header { color: var(--hjm-color-text); background: var(--hjm-color-bg); }
@@ -2629,7 +2700,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2629
2700
  .hjm-pagination__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hjm-space-xxs); margin: 0; padding: 0; list-style: none; }
2630
2701
  .hjm-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-inline-size: 0; }
2631
2702
  .hjm-breadcrumb__link { color: var(--hjm-color-text-muted); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
2632
- .hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
2703
+ .hjm-breadcrumb__current { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); overflow-wrap: anywhere; }
2633
2704
  .hjm-breadcrumb__separator { color: var(--hjm-color-text-weak); }
2634
2705
  [dir="rtl"] .hjm-breadcrumb__separator[data-default="true"],
2635
2706
  [dir="rtl"] .hjm-pagination__previous > span,
@@ -2646,13 +2717,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2646
2717
  }
2647
2718
  .hjm-pagination__item { color: var(--hjm-color-text-body); background: transparent; font: inherit; cursor: pointer; }
2648
2719
  .hjm-pagination__item:hover:not([aria-disabled="true"]) { background: var(--hjm-color-bg); }
2649
- .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); }
2720
+ .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); }
2650
2721
  .hjm-pagination__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
2651
2722
  .hjm-pagination__ellipsis { color: var(--hjm-color-text-muted); }
2652
2723
  .hjm-load-more { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding-block: var(--hjm-space-lg); text-align: center; }
2653
2724
  .hjm-load-more[data-density="compact"] { gap: var(--hjm-space-xs); padding-block: var(--hjm-space-sm); }
2654
2725
  .hjm-load-more__sentinel { inline-size: 1px; block-size: 1px; }
2655
- .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; }
2726
+ .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; }
2656
2727
  .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); }
2657
2728
  .hjm-load-more__error { color: var(--hjm-color-danger); }
2658
2729
  .hjm-load-more__end { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); }
@@ -2662,23 +2733,23 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2662
2733
  .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; }
2663
2734
  .hjm-steps__step { min-inline-size: 0; display: grid; align-content: start; gap: var(--hjm-space-xs); }
2664
2735
  .hjm-steps__rail { display: flex; align-items: center; min-inline-size: 0; }
2665
- .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); }
2736
+ .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); }
2666
2737
  .hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
2667
2738
  .hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
2668
2739
  .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); }
2669
2740
  .hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
2670
2741
  .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); }
2671
2742
  .hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
2672
- .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; }
2743
+ .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; }
2673
2744
  .hjm-steps__step[data-status="pending"] .hjm-steps__label { color: var(--hjm-color-text-muted); }
2674
2745
  .hjm-steps__step[data-status="error"] .hjm-steps__label { color: var(--hjm-color-danger); }
2675
2746
  .hjm-steps__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); overflow-wrap: anywhere; }
2676
2747
 
2677
2748
  .hjm-file-picker { display: grid; gap: var(--hjm-space-xs); }
2678
- .hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
2749
+ .hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
2679
2750
  .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; }
2680
2751
  .hjm-file-picker[data-dragging] .hjm-file-picker__dropzone { border-color: var(--hjm-color-focus); background: var(--hjm-color-bg); }
2681
- .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; }
2752
+ .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; }
2682
2753
  .hjm-file-picker__hint { color: var(--hjm-color-text-muted); }
2683
2754
  .hjm-file-picker__error { color: var(--hjm-color-danger); }
2684
2755
 
@@ -2697,7 +2768,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2697
2768
  .hjm-upload-item__action { flex: 0 0 auto; margin-inline-start: auto; }
2698
2769
 
2699
2770
  .hjm-date-picker { display: grid; gap: var(--hjm-space-xs); }
2700
- .hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
2771
+ .hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-text-emphasis-medium); }
2701
2772
  .hjm-date-picker__anchor { position: relative; display: flex; align-items: center; }
2702
2773
  .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; }
2703
2774
  /* datePickerRecipe.sizes.large.minHeight is control.buttonHeight.large (52), as Select/NumberField large. Web drew 56 until 2026-10-06. */
@@ -2739,7 +2810,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2739
2810
  downward while the lead column and close stay beside the first line. */
2740
2811
  .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; }
2741
2812
  .hjm-toast__content > :first-child { margin-block-start: calc((var(--hjm-toast-anchor-size) - 1lh) / 2); }
2742
- .hjm-toast__title { font-weight: var(--hjm-font-weight-bold); line-height: var(--hjm-toast-title-line-height, 1.35); }
2813
+ .hjm-toast__title { font-weight: var(--hjm-type-title-weight); line-height: var(--hjm-toast-title-line-height, 1.35); }
2743
2814
  .hjm-toast__description { color: var(--hjm-toast-description-color); line-height: var(--hjm-toast-description-line-height, 1.45); }
2744
2815
  .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; }
2745
2816
  .hjm-toast__close:hover { color: var(--hjm-color-text); }
@@ -2751,9 +2822,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2751
2822
  .hjm-toast__progress-step { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); color: var(--hjm-toast-progress-label); }
2752
2823
  .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); }
2753
2824
  .hjm-toast__progress-step[data-state="done"] .hjm-toast__progress-dot { background: var(--hjm-toast-progress-done); }
2754
- .hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-font-weight-bold); }
2825
+ .hjm-toast__progress-step[data-state="current"] { color: var(--hjm-toast-progress-current-label); font-weight: var(--hjm-text-emphasis-strong); }
2755
2826
  .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)); }
2756
- .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-font-weight-bold); overflow-wrap: anywhere; text-align: center; cursor: pointer; }
2827
+ .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; }
2757
2828
  .hjm-toast__action:hover { filter: brightness(0.97); }
2758
2829
  .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); }
2759
2830
 
@@ -2785,6 +2856,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2785
2856
  .hjm-root[data-motion="reduced"] .hjm-button__spinner,
2786
2857
  .hjm-root[data-motion="reduced"] .hjm-spinner__glyph,
2787
2858
  .hjm-root[data-motion="reduced"] .hjm-skeleton,
2859
+ .hjm-root[data-motion="reduced"] .hjm-skeleton-lines,
2788
2860
  .hjm-root[data-motion="reduced"] .hjm-combobox__spinner {
2789
2861
  animation: none;
2790
2862
  }
@@ -2802,6 +2874,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2802
2874
  .hjm-button__spinner,
2803
2875
  .hjm-spinner__glyph,
2804
2876
  .hjm-skeleton,
2877
+ .hjm-skeleton-lines,
2805
2878
  .hjm-combobox__spinner {
2806
2879
  animation: none;
2807
2880
  }
@@ -2826,7 +2899,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2826
2899
  .hjm-top-bar__trailing { justify-content: flex-end; }
2827
2900
  .hjm-top-bar__title { min-inline-size: 0; text-align: center; overflow-wrap: anywhere; }
2828
2901
  .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); }
2829
- .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); }
2902
+ .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); }
2830
2903
  .hjm-top-bar__heading > span { display: inline-flex; align-items: center; gap: var(--hjm-top-bar-gap); }
2831
2904
  .hjm-top-bar[data-centered="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
2832
2905
  .hjm-top-bar[data-centered="false"] .hjm-top-bar__title { text-align: start; }
@@ -2837,7 +2910,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2837
2910
  .hjm-bottom-cta[data-position="sticky"] { position: sticky; inset-block-end: 0; z-index: var(--hjm-layer-sticky); }
2838
2911
  /* Inside ScreenLayout's footer the footer owns border, padding, surface and safe area; BottomCTA keeps only its copy,
2839
2912
  actions and an explicit safeAreaBottom (2026-10-17: the doubled bar inset the buttons twice). */
2840
- .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; }
2913
+ /* The screen footer already pads max(screen padding, env(safe-area-inset-bottom)); an explicit safeAreaBottom adds only
2914
+ the remainder so the gap is max(footer, inset), not their sum (2026-10-17 "버튼 아래 여백이 많아"). */
2915
+ .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; }
2841
2916
  .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; }
2842
2917
  .hjm-bottom-cta__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-bottom-cta-gap); }
2843
2918
  /* bottomCtaRecipe.contentMaxWidth: the surface spans the viewport, its copy and actions stop at the reading width. */
@@ -2875,7 +2950,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2875
2950
  the grid instead of shrinking dates or wrapping a week onto another row. */
2876
2951
  .hjm-calendar { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; max-inline-size: var(--hjm-calendar-max-width); }
2877
2952
  .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); }
2878
- .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); }
2953
+ .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); }
2879
2954
  .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; }
2880
2955
  .hjm-calendar__viewport { overflow-x: auto; padding: var(--hjm-space-xxs); }
2881
2956
  .hjm-calendar__grid { min-inline-size: calc(7 * var(--hjm-calendar-cell-size)); }
@@ -2904,7 +2979,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2904
2979
  .hjm-anchor__list { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); list-style: none; margin: 0; padding: 0; }
2905
2980
  .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; }
2906
2981
  .hjm-anchor__link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
2907
- .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); }
2982
+ .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); }
2908
2983
  .hjm-anchor__link:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
2909
2984
  .hjm-anchor[data-orientation="horizontal"] .hjm-anchor__list { flex-direction: row; flex-wrap: wrap; }
2910
2985
  .hjm-anchor[data-orientation="horizontal"] .hjm-anchor__link { border-inline-start: 0; border-block-end: 2px solid transparent; }
@@ -2915,7 +2990,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2915
2990
  .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); }
2916
2991
  .hjm-popover[data-state="closed"] { pointer-events: none; animation-name: hjm-popover-out; }
2917
2992
  .hjm-popover__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hjm-space-xs); }
2918
- .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; }
2993
+ .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; }
2919
2994
  .hjm-popover__description { margin-block: var(--hjm-space-xs) var(--hjm-space-md); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
2920
2995
  .hjm-popover__body { min-inline-size: 0; padding-block-start: var(--hjm-space-xs); overflow-wrap: anywhere; }
2921
2996
  .hjm-popover:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2978,7 +3053,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
2978
3053
  .hjm-menu-morph__measure { position: absolute; visibility: hidden; pointer-events: none; inset-block-start: 0; inset-inline-start: 0; }
2979
3054
  .hjm-menu-morph__surface { color: var(--hjm-color-text); background: var(--hjm-color-bg); border: 1px solid var(--hjm-color-border-control); }
2980
3055
  .hjm-menu-morph[data-open="false"] .hjm-menu-morph__surface { box-shadow: none !important; }
2981
- .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); }
3056
+ .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); }
2982
3057
  .hjm-menu-morph [role="button"]:focus-visible, .hjm-menu-morph__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
2983
3058
  .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; }
2984
3059
  .hjm-menu-morph__item:hover, .hjm-menu-morph__item:focus { background: var(--hjm-color-bg); }
@@ -3166,7 +3241,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
3166
3241
  .hjm-screen__exit-glyph[data-kind="back"]:dir(rtl) { transform: scaleX(-1); }
3167
3242
 
3168
3243
  .hjm-image-choice { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
3169
- .hjm-image-choice__label { font-weight: 600; }
3244
+ .hjm-image-choice__label { font-weight: var(--hjm-text-emphasis-medium); }
3170
3245
  .hjm-image-choice__tiles { display: flex; flex-wrap: wrap; gap: var(--hjm-image-choice-gap); }
3171
3246
  .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; }
3172
3247
  .hjm-image-choice__tile[data-selected] { border-color: var(--hjm-color-content-brand); }
@@ -3224,7 +3299,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
3224
3299
  .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); }
3225
3300
  .hjm-comment-row__like[data-edge="end"] { margin-inline-end: calc(-1 * var(--hjm-icon-button-edge-medium)); }
3226
3301
  .hjm-comment-row__like-count { text-align: center; }
3227
- .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; }
3302
+ .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; }
3228
3303
  .hjm-comment-row__action:disabled { opacity: 0.5; cursor: default; }
3229
3304
  .hjm-comment-row__action:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
3230
3305
  .hjm-chat-screen__jump { position: absolute; inset-block-end: calc(100% + var(--hjm-space-xs) + var(--hjm-screen-padding)); inset-inline-end: 0; }
@@ -3295,7 +3370,7 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
3295
3370
  .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); }
3296
3371
  .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); }
3297
3372
  .hjm-segmented[data-presentation="pills"] .hjm-segmented__item > span { position:relative; overflow-wrap:anywhere; }
3298
- .hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-bold); }
3373
+ .hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-bg); font-weight:var(--hjm-font-weight-semibold); }
3299
3374
  .hjm-segmented[data-presentation="pills"] .hjm-segmented__item[data-state="checked"]::before { background:var(--hjm-color-text-body); }
3300
3375
  .hjm-segmented[data-presentation="pills"] .hjm-segmented__item:focus-within { outline:2px solid var(--hjm-color-focus); outline-offset:2px; }
3301
3376
 
@@ -3344,12 +3419,12 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
3344
3419
 
3345
3420
  /* Text radio navigation shares the selection engine and its focus behavior. */
3346
3421
  .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; }
3347
- .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; }
3422
+ .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); }
3348
3423
  .hjm-segmented[data-presentation="text"] .hjm-segmented__item::after { content:""; position:static; width:16px; height:2px; border-radius:var(--hjm-radius-full); background:transparent; }
3349
- .hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:700; }
3424
+ .hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"] { color:var(--hjm-color-text); font-weight:var(--hjm-font-weight-semibold); }
3350
3425
  .hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
3351
- .hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:400; }
3352
- .hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:600; }
3426
+ .hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:var(--hjm-text-emphasis-regular); }
3427
+ .hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:var(--hjm-text-emphasis-strong); }
3353
3428
 
3354
3429
  /* Long read-only records need a stable label column across wrapped values. */
3355
3430
  .hjm-description-list[data-layout="inline"] { gap: 0; }