@kjun-ui/native 0.3.2 → 0.4.1

package/dist/styles.css

@@ -698,7 +698,6 @@
   --_kjun-motion-distance-modal-exit: 8px;
   --_kjun-motion-distance-popup: 4px;
   --_kjun-motion-distance-toast: 8px;
-  font-family: var(--kjun-font); color: var(--kjun-text);
 }
 
 .kjun-scope {
@@ -946,50 +945,103 @@
   --_kjun-card-border: var(--_kjun-color-glass-border);
 }
 
-/* Scoped baseline required by the component utilities. No app-wide reset. */
-.kjun-scope,
-.kjun-scope *,
-.kjun-scope::before,
-.kjun-scope::after,
-.kjun-scope *::before,
-.kjun-scope *::after {
+/* Baseline for kjun-owned markup only. Component roots carry a kjun- class (Vue adds kjun-root, the Vue layer host is kjun-layers);
+   portal roots pair kjun-scope with a kjun- class. The bare Provider root (kjun-scope) is excluded, so app markup inside the Provider keeps its own styles.
+   Slot content placed inside a kjun component follows this baseline; style it with classes. */
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::before,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::after,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::before,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::after {
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
   border-color: var(--_kjun-color-border);
 }
-.kjun-scope :where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre) {
   margin: 0;
 }
-.kjun-scope :where(h1, h2, h3, h4, h5, h6) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(h1, h2, h3, h4, h5, h6) {
   font-size: inherit;
   font-weight: inherit;
 }
-.kjun-scope :where(button, input, optgroup, select, textarea) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, input, optgroup, select, textarea),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, input, optgroup, select, textarea) {
   font: inherit;
   letter-spacing: inherit;
   color: inherit;
   margin: 0;
   padding: 0;
 }
-.kjun-scope :where(button, select) { text-transform: none; }
-.kjun-scope :where(button, [type="button"], [type="reset"], [type="submit"]) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, select),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, select) { text-transform: none; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [type="button"], [type="reset"], [type="submit"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, [type="button"], [type="reset"], [type="submit"]) {
   -webkit-appearance: button;
   background-color: transparent;
   background-image: none;
 }
-.kjun-scope :where(button, [role="button"]) { cursor: pointer; }
-.kjun-scope :where(:disabled) { cursor: default; }
-.kjun-scope :where(a) { color: inherit; text-decoration: inherit; }
-.kjun-scope :where(ol, ul, menu) { list-style: none; margin: 0; padding: 0; }
-.kjun-scope :where(table) { text-indent: 0; border-color: inherit; border-collapse: collapse; }
-.kjun-scope :where(fieldset, legend) { margin: 0; padding: 0; }
-.kjun-scope :where(textarea) { resize: vertical; }
-.kjun-scope :where(input, textarea)::placeholder { opacity: 1; }
-.kjun-scope :where(img, video) { max-width: 100%; height: auto; }
-.kjun-scope :where([hidden]:not([hidden="until-found"])) { display: none; }
-
-.kjun-scope, .kjun-scope *, .kjun-scope::before, .kjun-scope::after, .kjun-scope *::before, .kjun-scope *::after {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [role="button"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, [role="button"]) { cursor: pointer; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(:disabled),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(:disabled) { cursor: default; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(a),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(a) { color: inherit; text-decoration: inherit; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(ol, ul, menu),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(ol, ul, menu) { list-style: none; margin: 0; padding: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(table),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(table) { text-indent: 0; border-color: inherit; border-collapse: collapse; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(fieldset, legend),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(fieldset, legend) { margin: 0; padding: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(textarea),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(textarea) { resize: vertical; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(input, textarea)::placeholder,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(input, textarea)::placeholder { opacity: 1; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(img, video),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(img, video) { max-width: 100%; height: auto; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where([hidden]:not([hidden="until-found"])),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where([hidden]:not([hidden="until-found"])) { display: none; }
+/* Last so it wins over the element resets above (e.g. font: inherit on a root <button>).
+   The outermost kjun element takes the scope's text style; nested kjun elements inherit it.
+   Icons (svg) are excluded: they follow the surrounding text's colour and size (currentColor, 1em). */
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(:not(svg)):not(:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *) {
+  font-family: var(--kjun-font);
+  color: var(--kjun-text);
+  font-size: var(--_kjun-type-body-size);
+  line-height: var(--_kjun-type-body-line);
+  font-weight: var(--_kjun-type-body-weight);
+  letter-spacing: var(--_kjun-type-body-tracking);
+}
+/* A Provider nested inside kjun markup (e.g. in a modal) re-reads its own font and color variables;
+   otherwise its content would inherit the outer kjun element's resolved values. */
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .kjun-scope {
+  font-family: var(--kjun-font);
+  color: var(--kjun-text);
+}
+/* A React overlay used without any Provider portals straight to document.body, so it has no .kjun-scope
+   ancestor: its root (kjun-scope plus a kjun- class) is the outermost kjun element. Zero specificity. */
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)),
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *,
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::before,
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--_kjun-color-border);
+}
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) {
+  font-family: var(--kjun-font);
+  color: var(--kjun-text);
+  font-size: var(--_kjun-type-body-size);
+  line-height: var(--_kjun-type-body-line);
+  font-weight: var(--_kjun-type-body-weight);
+  letter-spacing: var(--_kjun-type-body-tracking);
+}
+
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::before, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::after, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::before, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::after, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)), :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::before, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::after, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *::before, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -1042,7 +1094,7 @@
     --tw-contain-paint:  ;
     --tw-contain-style:  
 }
-.kjun-scope::backdrop, .kjun-scope *::backdrop {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::backdrop, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::backdrop, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::backdrop, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *::backdrop {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -1095,7 +1147,7 @@
     --tw-contain-paint:  ;
     --tw-contain-style:  
 }
-.kjun-scope .sr-only {
+.kjun-scope .kj-sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -1106,245 +1158,221 @@
     white-space: nowrap;
     border-width: 0
 }
-.kjun-scope .pointer-events-none {
+.kjun-scope .kj-pointer-events-none {
     pointer-events: none
 }
-.kjun-scope .visible {
-    visibility: visible
-}
-.kjun-scope .invisible {
+.kjun-scope .kj-invisible {
     visibility: hidden
 }
-.kjun-scope .collapse {
-    visibility: collapse
-}
-.kjun-scope .fixed {
+.kjun-scope .kj-fixed {
     position: fixed
 }
-.kjun-scope .absolute {
+.kjun-scope .kj-absolute {
     position: absolute
 }
-.kjun-scope .relative {
+.kjun-scope .kj-relative {
     position: relative
 }
-.kjun-scope .sticky {
+.kjun-scope .kj-sticky {
     position: sticky
 }
-.kjun-scope .inset-y-0 {
+.kjun-scope .kj-inset-y-0 {
     top: 0px;
     bottom: 0px
 }
-.kjun-scope .top-0 {
+.kjun-scope .kj-top-0 {
     top: 0px
 }
-.kjun-scope .isolate {
-    isolation: isolate
-}
-.kjun-scope .z-10 {
+.kjun-scope .kj-z-10 {
     z-index: 10
 }
-.kjun-scope .z-50 {
+.kjun-scope .kj-z-50 {
     z-index: 50
 }
-.kjun-scope .mx-2 {
+.kjun-scope .kj-mx-2 {
     margin-left: 8px;
     margin-right: 8px
 }
-.kjun-scope .mb-3 {
+.kjun-scope .kj-mb-3 {
     margin-bottom: 12px
 }
-.kjun-scope .ml-0\.5 {
+.kjun-scope .kj-ml-0\.5 {
     margin-left: 2px
 }
-.kjun-scope .ml-1 {
+.kjun-scope .kj-ml-1 {
     margin-left: 4px
 }
-.kjun-scope .ml-2 {
+.kjun-scope .kj-ml-2 {
     margin-left: 8px
 }
-.kjun-scope .ml-3 {
+.kjun-scope .kj-ml-3 {
     margin-left: 12px
 }
-.kjun-scope .ml-financial-affix-gap {
+.kjun-scope .kj-ml-financial-affix-gap {
     margin-left: 4px
 }
-.kjun-scope .mr-1 {
+.kjun-scope .kj-mr-1 {
     margin-right: 4px
 }
-.kjun-scope .mr-1\.5 {
+.kjun-scope .kj-mr-1\.5 {
     margin-right: 6px
 }
-.kjun-scope .mr-2 {
+.kjun-scope .kj-mr-2 {
     margin-right: 8px
 }
-.kjun-scope .mt-0\.5 {
+.kjun-scope .kj-mt-0\.5 {
     margin-top: 2px
 }
-.kjun-scope .mt-1 {
+.kjun-scope .kj-mt-1 {
     margin-top: 4px
 }
-.kjun-scope .mt-4 {
+.kjun-scope .kj-mt-4 {
     margin-top: 16px
 }
-.kjun-scope .mt-form-label-gap {
+.kjun-scope .kj-mt-form-label-gap {
     margin-top: 8px
 }
-.kjun-scope .block {
+.kjun-scope .kj-block {
     display: block
 }
-.kjun-scope .inline-block {
+.kjun-scope .kj-inline-block {
     display: inline-block
 }
-.kjun-scope .\!inline {
-    display: inline !important
-}
-.kjun-scope .inline {
-    display: inline
-}
-.kjun-scope .flex {
+.kjun-scope .kj-flex {
     display: flex
 }
-.kjun-scope .inline-flex {
+.kjun-scope .kj-inline-flex {
     display: inline-flex
 }
-.kjun-scope .table {
-    display: table
-}
-.kjun-scope .grid {
+.kjun-scope .kj-grid {
     display: grid
 }
-.kjun-scope .hidden {
+.kjun-scope .kj-hidden {
     display: none
 }
-.kjun-scope .h-button-heights-lg {
+.kjun-scope .kj-h-button-heights-lg {
     height: 48px
 }
-.kjun-scope .h-button-heights-md {
+.kjun-scope .kj-h-button-heights-md {
     height: 40px
 }
-.kjun-scope .h-button-heights-sm {
+.kjun-scope .kj-h-button-heights-sm {
     height: 32px
 }
-.kjun-scope .h-button-heights-xl {
+.kjun-scope .kj-h-button-heights-xl {
     height: 56px
 }
-.kjun-scope .h-button-heights-xs {
+.kjun-scope .kj-h-button-heights-xs {
     height: 24px
 }
-.kjun-scope .h-full {
+.kjun-scope .kj-h-full {
     height: 100%
 }
-.kjun-scope .h-menu-icon-size {
+.kjun-scope .kj-h-menu-icon-size {
     height: 16px
 }
-.kjun-scope .h-progress-heights-lg {
+.kjun-scope .kj-h-progress-heights-lg {
     height: 12px
 }
-.kjun-scope .h-progress-heights-md {
+.kjun-scope .kj-h-progress-heights-md {
     height: 8px
 }
-.kjun-scope .h-progress-heights-sm {
+.kjun-scope .kj-h-progress-heights-sm {
     height: 4px
 }
-.kjun-scope .h-selection-dot-size {
+.kjun-scope .kj-h-selection-dot-size {
     height: 8px
 }
-.kjun-scope .h-spinner-sizes-lg {
+.kjun-scope .kj-h-spinner-sizes-lg {
     height: 32px
 }
-.kjun-scope .h-spinner-sizes-md {
+.kjun-scope .kj-h-spinner-sizes-md {
     height: 24px
 }
-.kjun-scope .h-spinner-sizes-sm {
+.kjun-scope .kj-h-spinner-sizes-sm {
     height: 16px
 }
-.kjun-scope .h-spinner-sizes-xl {
+.kjun-scope .kj-h-spinner-sizes-xl {
     height: 48px
 }
-.kjun-scope .h-spinner-sizes-xs {
+.kjun-scope .kj-h-spinner-sizes-xs {
     height: 12px
 }
-.kjun-scope .h-tooltip-arrow-size {
+.kjun-scope .kj-h-tooltip-arrow-size {
     height: 8px
 }
-.kjun-scope .max-h-menu-list-max-height {
+.kjun-scope .kj-max-h-menu-list-max-height {
     max-height: 240px
 }
-.kjun-scope .min-h-0 {
+.kjun-scope .kj-min-h-0 {
     min-height: 0px
 }
-.kjun-scope .w-fit {
+.kjun-scope .kj-w-fit {
     width: fit-content
 }
-.kjun-scope .w-full {
+.kjun-scope .kj-w-full {
     width: 100%
 }
-.kjun-scope .w-menu-icon-size {
+.kjun-scope .kj-w-menu-icon-size {
     width: 16px
 }
-.kjun-scope .w-selection-dot-size {
+.kjun-scope .kj-w-selection-dot-size {
     width: 8px
 }
-.kjun-scope .w-spinner-sizes-lg {
+.kjun-scope .kj-w-spinner-sizes-lg {
     width: 32px
 }
-.kjun-scope .w-spinner-sizes-md {
+.kjun-scope .kj-w-spinner-sizes-md {
     width: 24px
 }
-.kjun-scope .w-spinner-sizes-sm {
+.kjun-scope .kj-w-spinner-sizes-sm {
     width: 16px
 }
-.kjun-scope .w-spinner-sizes-xl {
+.kjun-scope .kj-w-spinner-sizes-xl {
     width: 48px
 }
-.kjun-scope .w-spinner-sizes-xs {
+.kjun-scope .kj-w-spinner-sizes-xs {
     width: 12px
 }
-.kjun-scope .w-table-search-width {
+.kjun-scope .kj-w-table-search-width {
     width: 200px
 }
-.kjun-scope .w-tooltip-arrow-size {
+.kjun-scope .kj-w-tooltip-arrow-size {
     width: 8px
 }
-.kjun-scope .min-w-0 {
+.kjun-scope .kj-min-w-0 {
     min-width: 0px
 }
-.kjun-scope .min-w-menu-minimum-width {
+.kjun-scope .kj-min-w-menu-minimum-width {
     min-width: 160px
 }
-.kjun-scope .max-w-\[calc\(100vw-2\*var\(--extension-floating-viewport-inset\)\)\] {
+.kjun-scope .kj-max-w-\[calc\(100vw-2\*var\(--extension-floating-viewport-inset\)\)\] {
     max-width: calc(100vw - 2 * var(--extension-floating-viewport-inset))
 }
-.kjun-scope .max-w-full {
+.kjun-scope .kj-max-w-full {
     max-width: 100%
 }
-.kjun-scope .max-w-tooltip-max-width {
+.kjun-scope .kj-max-w-tooltip-max-width {
     max-width: 256px
 }
-.kjun-scope .flex-1 {
+.kjun-scope .kj-flex-1 {
     flex: 1 1 0%
 }
-.kjun-scope .flex-shrink {
-    flex-shrink: 1
-}
-.kjun-scope .flex-shrink-0 {
+.kjun-scope .kj-flex-shrink-0 {
     flex-shrink: 0
 }
-.kjun-scope .shrink-0 {
+.kjun-scope .kj-shrink-0 {
     flex-shrink: 0
 }
-.kjun-scope .rotate-180 {
+.kjun-scope .kj-rotate-180 {
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.kjun-scope .rotate-45 {
+.kjun-scope .kj-rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.kjun-scope .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-@keyframes spin {
+@keyframes kj-spin {
     to {
         transform: rotate(360deg)
     }
@@ -1355,486 +1383,452 @@
         transform: rotate(360deg)
     }
 }
-.kjun-scope .animate-spin {
-    animation: spin 1s linear infinite
+.kjun-scope .kj-animate-spin {
+    animation: kj-spin 1s linear infinite
 }
-.kjun-scope .cursor-not-allowed {
+.kjun-scope .kj-cursor-not-allowed {
     cursor: not-allowed
 }
-.kjun-scope .cursor-pointer {
+.kjun-scope .kj-cursor-pointer {
     cursor: pointer
 }
-.kjun-scope .select-none {
+.kjun-scope .kj-select-none {
     user-select: none
 }
-.kjun-scope .resize-none {
+.kjun-scope .kj-resize-none {
     resize: none
 }
-.kjun-scope .resize-y {
+.kjun-scope .kj-resize-y {
     resize: vertical
 }
-.kjun-scope .resize-x {
+.kjun-scope .kj-resize-x {
     resize: horizontal
 }
-.kjun-scope .resize {
+.kjun-scope .kj-resize {
     resize: both
 }
-.kjun-scope .grid-cols-1 {
+.kjun-scope .kj-grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
-.kjun-scope .flex-col {
+.kjun-scope .kj-flex-col {
     flex-direction: column
 }
-.kjun-scope .flex-wrap {
+.kjun-scope .kj-flex-wrap {
     flex-wrap: wrap
 }
-.kjun-scope .flex-nowrap {
+.kjun-scope .kj-flex-nowrap {
     flex-wrap: nowrap
 }
-.kjun-scope .items-center {
+.kjun-scope .kj-items-center {
     align-items: center
 }
-.kjun-scope .justify-end {
+.kjun-scope .kj-justify-end {
     justify-content: flex-end
 }
-.kjun-scope .justify-center {
+.kjun-scope .kj-justify-center {
     justify-content: center
 }
-.kjun-scope .justify-between {
+.kjun-scope .kj-justify-between {
     justify-content: space-between
 }
-.kjun-scope .gap-1 {
+.kjun-scope .kj-gap-1 {
     gap: 4px
 }
-.kjun-scope .gap-1\.5 {
+.kjun-scope .kj-gap-1\.5 {
     gap: 6px
 }
-.kjun-scope .gap-2 {
+.kjun-scope .kj-gap-2 {
     gap: 8px
 }
-.kjun-scope .gap-2\.5 {
+.kjun-scope .kj-gap-2\.5 {
     gap: 10px
 }
-.kjun-scope .gap-4 {
+.kjun-scope .kj-gap-4 {
     gap: 16px
 }
-.kjun-scope .gap-pagination-gap {
+.kjun-scope .kj-gap-pagination-gap {
     gap: 12px
 }
-.kjun-scope .gap-pagination-item-gap {
+.kjun-scope .kj-gap-pagination-item-gap {
     gap: 4px
 }
-.kjun-scope :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-space-y-3 > :not([hidden]) ~ :not([hidden])) {
     --tw-space-y-reverse: 0;
     margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(12px * var(--tw-space-y-reverse))
 }
-.kjun-scope :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-divide-y > :not([hidden]) ~ :not([hidden])) {
     --tw-divide-y-reverse: 0;
     border-top-width: calc(var(--_kjun-border-default-width) * calc(1 - var(--tw-divide-y-reverse)));
     border-bottom-width: calc(var(--_kjun-border-default-width) * var(--tw-divide-y-reverse))
 }
-.kjun-scope :is(.divide-border > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-divide-border > :not([hidden]) ~ :not([hidden])) {
     border-color: var(--border-primary)
 }
-.kjun-scope :is(.divide-border-primary > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-divide-border-primary > :not([hidden]) ~ :not([hidden])) {
     border-color: var(--border-primary)
 }
-.kjun-scope .overflow-hidden {
+.kjun-scope .kj-overflow-hidden {
     overflow: hidden
 }
-.kjun-scope .overflow-x-auto {
+.kjun-scope .kj-overflow-x-auto {
     overflow-x: auto
 }
-.kjun-scope .overflow-y-auto {
+.kjun-scope .kj-overflow-y-auto {
     overflow-y: auto
 }
-.kjun-scope .truncate {
+.kjun-scope .kj-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap
 }
-.kjun-scope .whitespace-normal {
+.kjun-scope .kj-whitespace-normal {
     white-space: normal
 }
-.kjun-scope .whitespace-nowrap {
+.kjun-scope .kj-whitespace-nowrap {
     white-space: nowrap
 }
-.kjun-scope .break-words {
+.kjun-scope .kj-break-words {
     overflow-wrap: break-word
 }
-.kjun-scope .rounded {
+.kjun-scope .kj-rounded {
     border-radius: 6px
 }
-.kjun-scope .rounded-badge {
+.kjun-scope .kj-rounded-badge {
     border-radius: 6px
 }
-.kjun-scope .rounded-card {
+.kjun-scope .kj-rounded-card {
     border-radius: 12px
 }
-.kjun-scope .rounded-financial-pill-radius {
+.kjun-scope .kj-rounded-financial-pill-radius {
     border-radius: 6px
 }
-.kjun-scope .rounded-full {
+.kjun-scope .kj-rounded-full {
     border-radius: 9999px
 }
-.kjun-scope .rounded-pagination-radius {
+.kjun-scope .kj-rounded-pagination-radius {
     border-radius: 6px
 }
-.kjun-scope .border {
-    border-width: var(--_kjun-border-default-width)
-}
-.kjun-scope .border-b {
+.kjun-scope .kj-border-b {
     border-bottom-width: var(--_kjun-border-default-width)
 }
-.kjun-scope .border-t {
+.kjun-scope .kj-border-t {
     border-top-width: var(--_kjun-border-default-width)
 }
-.kjun-scope .border-border {
+.kjun-scope .kj-border-border {
     border-color: var(--border-primary)
 }
-.kjun-scope .border-border-primary {
+.kjun-scope .kj-border-border-primary {
     border-color: var(--border-primary)
 }
-.kjun-scope .bg-bg-secondary {
+.kjun-scope .kj-bg-bg-secondary {
     background-color: var(--bg-secondary)
 }
-.kjun-scope .bg-brand {
+.kjun-scope .kj-bg-brand {
     background-color: var(--brand)
 }
-.kjun-scope .bg-brand-subtle-bg {
+.kjun-scope .kj-bg-brand-subtle-bg {
     background-color: var(--brand-subtle-bg)
 }
-.kjun-scope .bg-card-bg {
+.kjun-scope .kj-bg-card-bg {
     background-color: var(--card-bg)
 }
-.kjun-scope .bg-chart-tooltip-bg {
+.kjun-scope .kj-bg-chart-tooltip-bg {
     background-color: var(--chart-tooltip-bg)
 }
-.kjun-scope .bg-danger {
+.kjun-scope .kj-bg-danger {
     background-color: var(--danger)
 }
-.kjun-scope .bg-danger-bg {
+.kjun-scope .kj-bg-danger-bg {
     background-color: var(--danger-bg)
 }
-.kjun-scope .bg-info {
+.kjun-scope .kj-bg-info {
     background-color: var(--info)
 }
-.kjun-scope .bg-info-bg {
+.kjun-scope .kj-bg-info-bg {
     background-color: var(--info-bg)
 }
-.kjun-scope .bg-price-down {
+.kjun-scope .kj-bg-price-down {
     background-color: var(--price-down)
 }
-.kjun-scope .bg-price-down-bg {
+.kjun-scope .kj-bg-price-down-bg {
     background-color: var(--price-down-bg)
 }
-.kjun-scope .bg-price-up {
+.kjun-scope .kj-bg-price-up {
     background-color: var(--price-up)
 }
-.kjun-scope .bg-price-up-bg {
+.kjun-scope .kj-bg-price-up-bg {
     background-color: var(--price-up-bg)
 }
-.kjun-scope .bg-selected-bg {
+.kjun-scope .kj-bg-selected-bg {
     background-color: var(--selected-bg)
 }
-.kjun-scope .bg-success {
+.kjun-scope .kj-bg-success {
     background-color: var(--success)
 }
-.kjun-scope .bg-success-bg {
+.kjun-scope .kj-bg-success-bg {
     background-color: var(--success-bg)
 }
-.kjun-scope .bg-surface-card {
+.kjun-scope .kj-bg-surface-card {
     background-color: var(--card-bg)
 }
-.kjun-scope .bg-transparent {
+.kjun-scope .kj-bg-transparent {
     background-color: transparent
 }
-.kjun-scope .bg-warning {
+.kjun-scope .kj-bg-warning {
     background-color: var(--warning)
 }
-.kjun-scope .bg-warning-bg {
+.kjun-scope .kj-bg-warning-bg {
     background-color: var(--warning-bg)
 }
-.kjun-scope .p-2 {
+.kjun-scope .kj-p-2 {
     padding: 8px
 }
-.kjun-scope .px-2 {
+.kjun-scope .kj-px-2 {
     padding-left: 8px;
     padding-right: 8px
 }
-.kjun-scope .px-3 {
+.kjun-scope .kj-px-3 {
     padding-left: 12px;
     padding-right: 12px
 }
-.kjun-scope .px-3\.5 {
+.kjun-scope .kj-px-3\.5 {
     padding-left: 14px;
     padding-right: 14px
 }
-.kjun-scope .px-4 {
+.kjun-scope .kj-px-4 {
     padding-left: 16px;
     padding-right: 16px
 }
-.kjun-scope .px-financial-pill-padding-x {
+.kjun-scope .kj-px-financial-pill-padding-x {
     padding-left: 8px;
     padding-right: 8px
 }
-.kjun-scope .px-pagination-label-padding-x {
+.kjun-scope .kj-px-pagination-label-padding-x {
     padding-left: 12px;
     padding-right: 12px
 }
-.kjun-scope .px-pagination-padding {
+.kjun-scope .kj-px-pagination-padding {
     padding-left: 16px;
     padding-right: 16px
 }
-.kjun-scope .px-tooltip-padding-x {
+.kjun-scope .kj-px-tooltip-padding-x {
     padding-left: 8px;
     padding-right: 8px
 }
-.kjun-scope .py-0\.5 {
+.kjun-scope .kj-py-0\.5 {
     padding-top: 2px;
     padding-bottom: 2px
 }
-.kjun-scope .py-2 {
+.kjun-scope .kj-py-2 {
     padding-top: 8px;
     padding-bottom: 8px
 }
-.kjun-scope .py-2\.5 {
+.kjun-scope .kj-py-2\.5 {
     padding-top: 10px;
     padding-bottom: 10px
 }
-.kjun-scope .py-3 {
+.kjun-scope .kj-py-3 {
     padding-top: 12px;
     padding-bottom: 12px
 }
-.kjun-scope .py-3\.5 {
+.kjun-scope .kj-py-3\.5 {
     padding-top: 14px;
     padding-bottom: 14px
 }
-.kjun-scope .py-4 {
+.kjun-scope .kj-py-4 {
     padding-top: 16px;
     padding-bottom: 16px
 }
-.kjun-scope .py-financial-pill-padding-y {
+.kjun-scope .kj-py-financial-pill-padding-y {
     padding-top: 2px;
     padding-bottom: 2px
 }
-.kjun-scope .py-pagination-padding {
+.kjun-scope .kj-py-pagination-padding {
     padding-top: 16px;
     padding-bottom: 16px
 }
-.kjun-scope .py-state-padding-lg {
+.kjun-scope .kj-py-state-padding-lg {
     padding-top: 80px;
     padding-bottom: 80px
 }
-.kjun-scope .py-state-padding-md {
+.kjun-scope .kj-py-state-padding-md {
     padding-top: 48px;
     padding-bottom: 48px
 }
-.kjun-scope .py-state-padding-sm {
+.kjun-scope .kj-py-state-padding-sm {
     padding-top: 24px;
     padding-bottom: 24px
 }
-.kjun-scope .py-tooltip-padding-y {
+.kjun-scope .kj-py-tooltip-padding-y {
     padding-top: 4px;
     padding-bottom: 4px
 }
-.kjun-scope .text-left {
+.kjun-scope .kj-text-left {
     text-align: left
 }
-.kjun-scope .text-center {
+.kjun-scope .kj-text-center {
     text-align: center
 }
-.kjun-scope .text-right {
+.kjun-scope .kj-text-right {
     text-align: right
 }
-.kjun-scope .align-top {
+.kjun-scope .kj-align-top {
     vertical-align: top
 }
-.kjun-scope .align-middle {
+.kjun-scope .kj-align-middle {
     vertical-align: middle
 }
-.kjun-scope .text-\[length\:var\(--control-label-size\)\] {
+.kjun-scope .kj-text-\[length\:var\(--control-label-size\)\] {
     font-size: var(--control-label-size)
 }
-.kjun-scope .text-base {
+.kjun-scope .kj-text-base {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: 0em
 }
-.kjun-scope .text-lg {
+.kjun-scope .kj-text-lg {
     font-size: 1.25rem;
     line-height: 1.75rem;
     letter-spacing: 0em
 }
-.kjun-scope .text-sm {
+.kjun-scope .kj-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: 0em
 }
-.kjun-scope .text-xs {
+.kjun-scope .kj-text-xs {
     font-size: 0.75rem;
     line-height: 1rem;
     letter-spacing: 0em
 }
-.kjun-scope .font-medium {
+.kjun-scope .kj-font-medium {
     font-weight: var(--_kjun-type-label-weight)
 }
-.kjun-scope .font-semibold {
+.kjun-scope .kj-font-semibold {
     font-weight: var(--_kjun-type-control-weight)
 }
-.kjun-scope .uppercase {
-    text-transform: uppercase
-}
-.kjun-scope .tabular-nums {
+.kjun-scope .kj-tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
 }
-.kjun-scope .leading-relaxed {
+.kjun-scope .kj-leading-relaxed {
     line-height: 1.625
 }
-.kjun-scope .text-brand {
+.kjun-scope .kj-text-brand {
     color: var(--brand)
 }
-.kjun-scope .text-brand-hover {
+.kjun-scope .kj-text-brand-hover {
     color: var(--brand-hover)
 }
-.kjun-scope .text-chart-tooltip-text {
+.kjun-scope .kj-text-chart-tooltip-text {
     color: var(--chart-tooltip-text)
 }
-.kjun-scope .text-danger {
+.kjun-scope .kj-text-danger {
     color: var(--danger)
 }
-.kjun-scope .text-danger-accent {
+.kjun-scope .kj-text-danger-accent {
     color: var(--danger-accent)
 }
-.kjun-scope .text-favorite {
+.kjun-scope .kj-text-favorite {
     color: var(--favorite)
 }
-.kjun-scope .text-info {
+.kjun-scope .kj-text-info {
     color: var(--info)
 }
-.kjun-scope .text-info-accent {
+.kjun-scope .kj-text-info-accent {
     color: var(--info-accent)
 }
-.kjun-scope .text-interest {
+.kjun-scope .kj-text-interest {
     color: var(--interest)
 }
-.kjun-scope .text-on-brand {
+.kjun-scope .kj-text-on-brand {
     color: var(--on-brand)
 }
-.kjun-scope .text-price-down {
+.kjun-scope .kj-text-price-down {
     color: var(--price-down)
 }
-.kjun-scope .text-price-up {
+.kjun-scope .kj-text-price-up {
     color: var(--price-up)
 }
-.kjun-scope .text-success {
+.kjun-scope .kj-text-success {
     color: var(--success)
 }
-.kjun-scope .text-text-disabled {
+.kjun-scope .kj-text-text-disabled {
     color: var(--text-disabled)
 }
-.kjun-scope .text-text-primary {
+.kjun-scope .kj-text-text-primary {
     color: var(--text-primary)
 }
-.kjun-scope .text-text-secondary {
+.kjun-scope .kj-text-text-secondary {
     color: var(--text-secondary)
 }
-.kjun-scope .text-text-tertiary {
+.kjun-scope .kj-text-text-tertiary {
     color: var(--text-tertiary)
 }
-.kjun-scope .text-warning {
+.kjun-scope .kj-text-warning {
     color: var(--warning)
 }
-.kjun-scope .text-warning-accent {
+.kjun-scope .kj-text-warning-accent {
     color: var(--warning-accent)
 }
-.kjun-scope .\!underline {
-    text-decoration-line: underline !important
-}
-.kjun-scope .underline {
-    text-decoration-line: underline
-}
-.kjun-scope .opacity-disabled {
+.kjun-scope .kj-opacity-disabled {
     opacity: var(--_kjun-state-opacity-disabled)
 }
-.kjun-scope .outline {
-    outline-style: solid
-}
-.kjun-scope .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
-.kjun-scope .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
-.kjun-scope .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
-}
-.kjun-scope .transition {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-timing-function: var(--ease-out);
-    transition-duration: var(--motion-control)
-}
-.kjun-scope .transition-colors {
+.kjun-scope .kj-transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: var(--ease-out);
     transition-duration: var(--motion-control)
 }
-.kjun-scope .transition-transform {
+.kjun-scope .kj-transition-transform {
     transition-property: transform;
     transition-timing-function: var(--ease-out);
     transition-duration: var(--motion-control)
 }
-.kjun-scope .ease-in-out {
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
-}
-.kjun-scope .hover\:bg-bg-hover:hover {
+.kjun-scope .hover\:kj-bg-bg-hover:hover {
     background-color: var(--bg-hover)
 }
-.kjun-scope .hover\:text-brand:hover {
+.kjun-scope .hover\:kj-text-brand:hover {
     color: var(--brand)
 }
-.kjun-scope .hover\:text-text-primary:hover {
+.kjun-scope .hover\:kj-text-text-primary:hover {
     color: var(--text-primary)
 }
-.kjun-scope .disabled\:cursor-not-allowed:disabled {
+.kjun-scope .disabled\:kj-cursor-not-allowed:disabled {
     cursor: not-allowed
 }
-.kjun-scope .disabled\:opacity-disabled:disabled {
+.kjun-scope .disabled\:kj-opacity-disabled:disabled {
     opacity: var(--_kjun-state-opacity-disabled)
 }
 @media (min-width: 640px) {
-    .kjun-scope .pagination\:block {
+    .kjun-scope .pagination\:kj-block {
         display: block
     }
-    .kjun-scope .pagination\:flex {
+    .kjun-scope .pagination\:kj-flex {
         display: flex
     }
-    .kjun-scope .pagination\:hidden {
+    .kjun-scope .pagination\:kj-hidden {
         display: none
     }
-    .kjun-scope .pagination\:flex-row {
+    .kjun-scope .pagination\:kj-flex-row {
         flex-direction: row
     }
-    .kjun-scope .pagination\:items-center {
+    .kjun-scope .pagination\:kj-items-center {
         align-items: center
     }
-    .kjun-scope .pagination\:justify-between {
+    .kjun-scope .pagination\:kj-justify-between {
         justify-content: space-between
     }
 }
 @media (min-width: 1024px) {
-    .kjun-scope .pagination-wide\:px-6 {
+    .kjun-scope .pagination-wide\:kj-px-6 {
         padding-left: 24px;
         padding-right: 24px
     }
 }
 /* KJUN-owned field geometry and interaction styles. */
 /* 입력의 표면·상태는 한 곳에서 관리한다. 모든 크기는 같은 size의 버튼 높이와 정렬한다. */
-.kjun-scope .ds-field--sm {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--sm, .kjun-scope .ds-field--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --field-height: var(--_kjun-geometry-input-sm-height);
   --field-font-size: var(--_kjun-geometry-input-sm-font-size);
   --field-placeholder-size: var(--_kjun-geometry-input-sm-placeholder-size);
@@ -1847,7 +1841,7 @@
   --field-textarea-padding-y: var(--_kjun-geometry-input-sm-textarea-padding-y);
 }
 
-.kjun-scope .ds-field--md {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--md, .kjun-scope .ds-field--md:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --field-height: var(--_kjun-geometry-input-md-height);
   --field-font-size: var(--_kjun-geometry-input-md-font-size);
   --field-placeholder-size: var(--_kjun-geometry-input-md-placeholder-size);
@@ -1860,7 +1854,7 @@
   --field-textarea-padding-y: var(--_kjun-geometry-input-md-textarea-padding-y);
 }
 
-.kjun-scope .ds-field--lg {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--lg, .kjun-scope .ds-field--lg:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --field-height: var(--_kjun-geometry-input-lg-height);
   --field-font-size: var(--_kjun-geometry-input-lg-font-size);
   --field-placeholder-size: var(--_kjun-geometry-input-lg-placeholder-size);
@@ -1873,7 +1867,7 @@
   --field-textarea-padding-y: var(--_kjun-geometry-input-lg-textarea-padding-y);
 }
 
-.kjun-scope .ds-field {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field, .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   display: block;
   width: 100%;
   min-width: 0;
@@ -1890,48 +1884,52 @@
   transition: background-color var(--motion-control) var(--ease-out), border-color var(--motion-control) var(--ease-out);
 }
 
-.kjun-scope .ds-field::placeholder { color: var(--input-placeholder); font-size: var(--field-placeholder-size); opacity: 1; }
-.kjun-scope .ds-field-placeholder { color: var(--input-placeholder); font-size: var(--field-placeholder-size); }
-.kjun-scope .ds-field:hover:not(:disabled):not(:focus):not([readonly]):not([aria-expanded="true"]):not(.ds-field--open):not(.ds-field--error) { background: var(--bg-hover); }
-.kjun-scope .ds-field:focus, .kjun-scope .ds-field--open, .kjun-scope .ds-field[aria-expanded="true"] {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field::placeholder, .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::placeholder { color: var(--input-placeholder); font-size: var(--field-placeholder-size); opacity: 1; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-placeholder, .kjun-scope .ds-field-placeholder:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { color: var(--input-placeholder); font-size: var(--field-placeholder-size); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:hover:not(:disabled):not(:focus):not([readonly]):not([aria-expanded="true"]):not(.ds-field--open):not(.ds-field--error), .kjun-scope .ds-field:hover:not(:disabled):not(:focus):not([readonly]):not([aria-expanded="true"]):not(.ds-field--open):not(.ds-field--error):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--bg-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:focus, .kjun-scope .ds-field:focus:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--open, .kjun-scope .ds-field--open:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field[aria-expanded="true"], .kjun-scope .ds-field[aria-expanded="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: none;
   border-color: var(--input-border-focus);
   background: var(--input-bg);
 }
-.kjun-scope .ds-field--error, .kjun-scope .ds-field--error:focus, .kjun-scope .ds-field--error.ds-field--open, .kjun-scope .ds-field--error[aria-expanded="true"] {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error, .kjun-scope .ds-field--error:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error:focus, .kjun-scope .ds-field--error:focus:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error.ds-field--open, .kjun-scope .ds-field--error.ds-field--open:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error[aria-expanded="true"], .kjun-scope .ds-field--error[aria-expanded="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   border-color: var(--danger);
   background: var(--input-bg);
 }
-.kjun-scope .ds-field[readonly] { color: var(--text-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field[readonly], .kjun-scope .ds-field[readonly]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { color: var(--text-secondary); }
 /* The ring covers the control border so keyboard focus reads as one outline. */
-.kjun-scope .ds-field:focus-visible:not(:disabled) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:focus-visible:not(:disabled), .kjun-scope .ds-field:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: var(--_kjun-state-focus-width) solid var(--focus-ring);
   outline-offset: var(--_kjun-state-focus-inset-offset);
 }
-.kjun-scope .ds-field--error:focus-visible:not(:disabled),
-.kjun-scope .ds-field[aria-invalid="true"]:focus-visible:not(:disabled) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error:focus-visible:not(:disabled),
+.kjun-scope .ds-field--error:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field[aria-invalid="true"]:focus-visible:not(:disabled),
+.kjun-scope .ds-field[aria-invalid="true"]:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline-offset: var(--_kjun-state-focus-offset);
 }
-.kjun-scope .ds-field-shell[data-disabled="true"] :is(.ds-field-prefix, .ds-field-suffix), .kjun-scope .ds-field-shell:has(> :disabled) :is(.ds-field-prefix, .ds-field-suffix, .ds-select-indicator) { color: var(--text-disabled); }
-.kjun-scope .ds-field-shell[data-disabled="true"] .ds-field-suffix .ds-icon,
-.kjun-scope .ds-field-shell .ds-field-clear:disabled { color: var(--text-disabled); }
-.kjun-scope .ds-field-shell .ds-field-clear:disabled { opacity: 1; }
-.kjun-scope .ds-field:disabled .ds-field-placeholder { color: var(--text-disabled); }
-.kjun-scope .ds-field:disabled {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell[data-disabled="true"] :is(.ds-field-prefix, .ds-field-suffix), .kjun-scope .ds-field-shell[data-disabled="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.ds-field-prefix, .ds-field-suffix), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell:has(> :disabled) :is(.ds-field-prefix, .ds-field-suffix, .ds-select-indicator), .kjun-scope .ds-field-shell:has(> :disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.ds-field-prefix, .ds-field-suffix, .ds-select-indicator) { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell[data-disabled="true"] .ds-field-suffix .ds-icon,
+.kjun-scope .ds-field-shell[data-disabled="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-suffix .ds-icon,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell .ds-field-clear:disabled,
+.kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear:disabled { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell .ds-field-clear:disabled, .kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear:disabled { opacity: 1; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:disabled .ds-field-placeholder, .kjun-scope .ds-field:disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-placeholder { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:disabled, .kjun-scope .ds-field:disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   cursor: not-allowed;
   color: var(--text-disabled);
   background: var(--input-bg);
 }
-.kjun-scope .ds-field:disabled::placeholder { color: var(--text-disabled); }
-.kjun-scope .ds-field--prefix { padding-left: calc(var(--field-padding) + var(--field-icon-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-field--suffix { padding-right: calc(var(--field-padding) + var(--field-clear-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-input-native.ds-field--prefix { padding-left: calc(var(--field-padding) + var(--input-prefix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-input-native.ds-field--suffix { padding-right: calc(var(--field-padding) + var(--input-suffix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-field--clearable > .truncate { padding-right: calc(var(--field-clear-size) + var(--field-affix-gap)); }
-.kjun-scope .ds-field--select { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: var(--_kjun-geometry-dimension-value8); }
-.kjun-scope .ds-field--textarea { height: auto; padding-top: var(--field-textarea-padding-y); padding-bottom: var(--field-textarea-padding-y); }
-.kjun-scope .ds-field-shell { position: relative; min-width: 0; --input-prefix-width: 0px; --input-suffix-width: 0px; }
-.kjun-scope .ds-field-prefix, .kjun-scope .ds-field-suffix {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:disabled::placeholder, .kjun-scope .ds-field:disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::placeholder { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--prefix, .kjun-scope .ds-field--prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-left: calc(var(--field-padding) + var(--field-icon-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--suffix, .kjun-scope .ds-field--suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-right: calc(var(--field-padding) + var(--field-clear-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-input-native.ds-field--prefix, .kjun-scope .ds-input-native.ds-field--prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-left: calc(var(--field-padding) + var(--input-prefix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-input-native.ds-field--suffix, .kjun-scope .ds-input-native.ds-field--suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-right: calc(var(--field-padding) + var(--input-suffix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--clearable > .truncate, .kjun-scope .ds-field--clearable:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) > .truncate { padding-right: calc(var(--field-clear-size) + var(--field-affix-gap)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--select, .kjun-scope .ds-field--select:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: var(--_kjun-geometry-dimension-value8); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--textarea, .kjun-scope .ds-field--textarea:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { height: auto; padding-top: var(--field-textarea-padding-y); padding-bottom: var(--field-textarea-padding-y); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell, .kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { position: relative; min-width: 0; --input-prefix-width: 0px; --input-suffix-width: 0px; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-prefix, .kjun-scope .ds-field-prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-suffix, .kjun-scope .ds-field-suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -1941,25 +1939,25 @@
   color: var(--text-tertiary);
   font-size: var(--field-icon-size);
 }
-.kjun-scope .ds-field-prefix { left: var(--field-padding); pointer-events: none; }
-.kjun-scope .ds-field-suffix { right: var(--field-padding); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-prefix, .kjun-scope .ds-field-prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { left: var(--field-padding); pointer-events: none; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-suffix, .kjun-scope .ds-field-suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { right: var(--field-padding); }
 /* Override the shared Button's inline geometry only inside a field. */
-.kjun-scope .ds-field-shell .ds-field-clear { padding: 0 !important; width: var(--field-clear-size) !important; height: var(--field-clear-size) !important; min-height: var(--field-clear-size) !important; border-radius: 50% !important; flex-shrink: 0; }
-.kjun-scope .ds-field-clear .ds-icon, .kjun-scope .ds-select-indicator { width: var(--field-icon-size); height: var(--field-icon-size); }
-.kjun-scope .ds-field-error { margin-top: var(--extension-form-message-gap); font-size: var(--_kjun-type-caption-size); color: var(--danger); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); }
-.kjun-scope .ds-form-group { margin-bottom: var(--extension-form-item-gap); min-width: 0; }
-.kjun-scope .ds-form-group:last-child { margin-bottom: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell .ds-field-clear, .kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear { padding: 0 !important; width: var(--field-clear-size) !important; height: var(--field-clear-size) !important; min-height: var(--field-clear-size) !important; border-radius: 50% !important; flex-shrink: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear .ds-icon, .kjun-scope .ds-field-clear:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-icon, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-select-indicator, .kjun-scope .ds-select-indicator:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--field-icon-size); height: var(--field-icon-size); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-error, .kjun-scope .ds-field-error:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-top: var(--extension-form-message-gap); font-size: var(--_kjun-type-caption-size); color: var(--danger); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-form-group, .kjun-scope .ds-form-group:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-bottom: var(--extension-form-item-gap); min-width: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-form-group:last-child, .kjun-scope .ds-form-group:last-child:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-bottom: 0; }
 /* 그리드·툴바는 부모 gap을 사용하고, 일반 문서 흐름의 기존 폼만 기본 간격을 유지한다. */
-.kjun-scope :where(.flex, .inline-flex, .grid, .inline-grid, .ds-form-layout) > .ds-form-group { margin-bottom: 0; }
-.kjun-scope .ds-field-menu {
+.kjun-scope :where(.flex, .inline-flex, .grid, .inline-grid, .kj-flex, .kj-inline-flex, .kj-grid, .kj-inline-grid, .ds-form-layout) > .ds-form-group:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-bottom: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-menu, .kjun-scope .ds-field-menu:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   padding: var(--extension-menu-padding);
   border: var(--_kjun-border-default-width) solid var(--border-primary);
   border-radius: var(--_kjun-geometry-radius-radius12);
   background: var(--card-bg);
   box-shadow: var(--_kjun-menu-elevation);
 }
-.kjun-scope .ds-field-menu[role="menu"] { border-radius: var(--extension-menu-radius); }
-.kjun-scope .ds-field-option {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-menu[role="menu"], .kjun-scope .ds-field-menu[role="menu"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { border-radius: var(--extension-menu-radius); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option, .kjun-scope .ds-field-option:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1972,11 +1970,11 @@
   color: var(--text-primary);
   cursor: pointer;
 }
-.kjun-scope .ds-field-option:hover:not([aria-disabled="true"]), .kjun-scope .ds-field-option--highlighted:not([aria-disabled="true"]) { background: var(--bg-hover); }
-.kjun-scope .ds-field-option[aria-selected="true"] { background: var(--selected-bg); }
-.kjun-scope .ds-field-option:focus-visible { outline: var(--_kjun-state-focus-width) solid var(--focus-ring); outline-offset: var(--_kjun-state-focus-inset-offset); }
-.kjun-scope .ds-field-option[aria-disabled="true"] { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
-.kjun-scope .ds-dropdown-item {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option:hover:not([aria-disabled="true"]), .kjun-scope .ds-field-option:hover:not([aria-disabled="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option--highlighted:not([aria-disabled="true"]), .kjun-scope .ds-field-option--highlighted:not([aria-disabled="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--bg-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option[aria-selected="true"], .kjun-scope .ds-field-option[aria-selected="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--selected-bg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option:focus-visible, .kjun-scope .ds-field-option:focus-visible:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { outline: var(--_kjun-state-focus-width) solid var(--focus-ring); outline-offset: var(--_kjun-state-focus-inset-offset); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option[aria-disabled="true"], .kjun-scope .ds-field-option[aria-disabled="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item, .kjun-scope .ds-dropdown-item:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   gap: var(--_kjun-geometry-dimension-value8);
   min-height: var(--extension-menu-option-height);
   padding: var(--extension-menu-option-padding-y) var(--extension-menu-option-padding-x);
@@ -1986,26 +1984,26 @@
   letter-spacing: var(--_kjun-type-body-tracking);
   line-height: var(--extension-menu-option-line-height);
 }
-.kjun-scope .ds-dropdown-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-label, .kjun-scope .ds-dropdown-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
 /* Same border role and inset as the React and Native menu dividers. */
-.kjun-scope .ds-dropdown-divider { height: var(--extension-menu-divider-height); margin: var(--_kjun-geometry-dimension-value4) 0; background: var(--border-primary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-divider, .kjun-scope .ds-dropdown-divider:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { height: var(--extension-menu-divider-height); margin: var(--_kjun-geometry-dimension-value4) 0; background: var(--border-primary); }
 /* Pointer hover moves focus (DropdownItem), so only the focused item paints as current. */
-.kjun-scope .ds-dropdown-item:focus:not(:disabled):not([aria-checked="true"]) { background: var(--bg-hover); }
-.kjun-scope .ds-dropdown-item[data-variant="danger"]:focus:not(:disabled):not([aria-checked="true"]) { background: var(--danger-bg); }
-.kjun-scope .ds-dropdown-item[aria-checked="true"] { background: var(--selected-bg); }
-.kjun-scope .ds-dropdown-item:not([data-variant="danger"]) .ds-dropdown-icon { color: var(--text-secondary); }
-.kjun-scope [role="menu"]:has(.ds-dropdown-icon) .ds-dropdown-item:not(:has(.ds-dropdown-icon)) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:focus:not(:disabled):not([aria-checked="true"]), .kjun-scope .ds-dropdown-item:focus:not(:disabled):not([aria-checked="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--bg-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item[data-variant="danger"]:focus:not(:disabled):not([aria-checked="true"]), .kjun-scope .ds-dropdown-item[data-variant="danger"]:focus:not(:disabled):not([aria-checked="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--danger-bg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item[aria-checked="true"], .kjun-scope .ds-dropdown-item[aria-checked="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--selected-bg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:not([data-variant="danger"]) .ds-dropdown-icon, .kjun-scope .ds-dropdown-item:not([data-variant="danger"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-icon { color: var(--text-secondary); }
+.kjun-scope [role="menu"]:has(.ds-dropdown-icon) :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:not(:has(.ds-dropdown-icon)), .kjun-scope [role="menu"]:has(.ds-dropdown-icon) .ds-dropdown-item:not(:has(.ds-dropdown-icon)):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   padding-left: calc(var(--extension-menu-option-padding-x) + var(--extension-menu-icon-size) + var(--_kjun-geometry-dimension-value8));
 }
-.kjun-scope .ds-dropdown-item:focus-visible:not(:disabled) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:focus-visible:not(:disabled), .kjun-scope .ds-dropdown-item:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: var(--_kjun-state-focus-width) solid var(--focus-ring);
   outline-offset: var(--_kjun-state-focus-inset-offset);
 }
 
-.kjun-scope .ds-choice { position: relative; display: inline-flex; align-items: center; min-height: var(--extension-choice-minimum-height); cursor: pointer; vertical-align: middle; }
-.kjun-scope .ds-choice--disabled { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
-.kjun-scope .ds-choice-label { margin-left: var(--extension-checkbox-label-gap); font-size: var(--_kjun-type-label-size); color: var(--text-primary); line-height: var(--_kjun-type-label-line); font-weight: var(--_kjun-type-label-weight); letter-spacing: var(--_kjun-type-label-tracking); }
-.kjun-scope .ds-choice-control {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice, .kjun-scope .ds-choice:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { position: relative; display: inline-flex; align-items: center; min-height: var(--extension-choice-minimum-height); cursor: pointer; vertical-align: middle; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled, .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-label, .kjun-scope .ds-choice-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-left: var(--extension-checkbox-label-gap); font-size: var(--_kjun-type-label-size); color: var(--text-primary); line-height: var(--_kjun-type-label-line); font-weight: var(--_kjun-type-label-weight); letter-spacing: var(--_kjun-type-label-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-control, .kjun-scope .ds-choice-control:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -2017,34 +2015,36 @@
   background: var(--card-bg);
   transition: border-color var(--motion-control) var(--ease-out), background-color var(--motion-control) var(--ease-out);
 }
-.kjun-scope .ds-checkbox { border-radius: var(--extension-checkbox-radii-md); }
-.kjun-scope .ds-checkbox--sm { width: var(--extension-checkbox-sizes-sm); height: var(--extension-checkbox-sizes-sm); border-radius: var(--extension-checkbox-radii-sm); }
-.kjun-scope .ds-checkbox--lg { width: var(--extension-checkbox-sizes-lg); height: var(--extension-checkbox-sizes-lg); border-radius: var(--extension-checkbox-radii-lg); }
-.kjun-scope .ds-checkbox--checked { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
-.kjun-scope .ds-radio {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox, .kjun-scope .ds-checkbox:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { border-radius: var(--extension-checkbox-radii-md); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox--sm, .kjun-scope .ds-checkbox--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--extension-checkbox-sizes-sm); height: var(--extension-checkbox-sizes-sm); border-radius: var(--extension-checkbox-radii-sm); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox--lg, .kjun-scope .ds-checkbox--lg:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--extension-checkbox-sizes-lg); height: var(--extension-checkbox-sizes-lg); border-radius: var(--extension-checkbox-radii-lg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox--checked, .kjun-scope .ds-checkbox--checked:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio, .kjun-scope .ds-radio:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   width: var(--extension-radio-size);
   height: var(--extension-radio-size);
   border-width: var(--extension-radio-border-width);
   border-radius: 50%;
   border-color: var(--border-strong);
 }
-.kjun-scope .ds-radio--checked { border-color: var(--brand); }
-.kjun-scope .ds-radio-dot { width: var(--extension-radio-dot); height: var(--extension-radio-dot); border-radius: 50%; background: var(--brand); }
-.kjun-scope .ds-radio + .ds-choice-label { margin-left: var(--extension-radio-label-gap); }
-.kjun-scope .ds-choice--disabled :is(.ds-radio:not(.ds-radio--checked), .ds-checkbox:not(.ds-checkbox--checked)) { border-color: var(--border-secondary); }
-.kjun-scope .ds-choice--disabled .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--border-secondary); }
-.kjun-scope .ds-choice--disabled .ds-switch:not(.ds-switch--on) .ds-switch-thumb { background: var(--border-secondary); }
-.kjun-scope .ds-choice input:focus-visible + .ds-choice-control, .kjun-scope .ds-switch:focus-visible {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio--checked, .kjun-scope .ds-radio--checked:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { border-color: var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio-dot, .kjun-scope .ds-radio-dot:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--extension-radio-dot); height: var(--extension-radio-dot); border-radius: 50%; background: var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio + .ds-choice-label, .kjun-scope .ds-radio:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) + .ds-choice-label { margin-left: var(--extension-radio-label-gap); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled :is(.ds-radio:not(.ds-radio--checked), .ds-checkbox:not(.ds-checkbox--checked)), .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.ds-radio:not(.ds-radio--checked), .ds-checkbox:not(.ds-checkbox--checked)) { border-color: var(--border-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled .ds-switch:not(.ds-switch--on), .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--border-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled .ds-switch:not(.ds-switch--on) .ds-switch-thumb, .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:not(.ds-switch--on) .ds-switch-thumb { background: var(--border-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice input:focus-visible + .ds-choice-control, .kjun-scope .ds-choice:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) input:focus-visible + .ds-choice-control, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:focus-visible, .kjun-scope .ds-switch:focus-visible:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: var(--_kjun-state-focus-width) solid var(--focus-ring);
   outline-offset: var(--_kjun-state-focus-choice-offset);
 }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):hover .ds-choice-control { border-color: var(--brand); }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):hover .ds-radio { border-color: var(--brand-hover); }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):hover .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--brand); }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):active .ds-radio,
-.kjun-scope .ds-choice:not(.ds-choice--disabled) input:active + .ds-radio { border-color: var(--brand-active); }
-.kjun-scope .ds-switch + .ds-choice-label { margin-left: var(--extension-switch-label-gap); }
-.kjun-scope .ds-switch {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):hover .ds-choice-control, .kjun-scope .ds-choice:not(.ds-choice--disabled):hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-control { border-color: var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):hover .ds-radio, .kjun-scope .ds-choice:not(.ds-choice--disabled):hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio { border-color: var(--brand-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):hover .ds-switch:not(.ds-switch--on), .kjun-scope .ds-choice:not(.ds-choice--disabled):hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):active .ds-radio,
+.kjun-scope .ds-choice:not(.ds-choice--disabled):active:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled) input:active + .ds-radio,
+.kjun-scope .ds-choice:not(.ds-choice--disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) input:active + .ds-radio { border-color: var(--brand-active); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch + .ds-choice-label, .kjun-scope .ds-switch:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) + .ds-choice-label { margin-left: var(--extension-switch-label-gap); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch, .kjun-scope .ds-switch:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   position: relative;
   flex-shrink: 0;
   --_kjun-switch-width: var(--extension-switch-widths-md);
@@ -2058,12 +2058,12 @@
   box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--border-strong);
   transition: background-color var(--motion-control) var(--ease-out), box-shadow var(--motion-control) var(--ease-out);
 }
-.kjun-scope .ds-switch--sm { --_kjun-switch-width: var(--extension-switch-widths-sm); --_kjun-switch-height: var(--extension-switch-heights-sm); }
-.kjun-scope .ds-switch--lg { --_kjun-switch-width: var(--extension-switch-widths-lg); --_kjun-switch-height: var(--extension-switch-heights-lg); }
-.kjun-scope .ds-switch--on { background: var(--brand); box-shadow: none; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--sm, .kjun-scope .ds-switch--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { --_kjun-switch-width: var(--extension-switch-widths-sm); --_kjun-switch-height: var(--extension-switch-heights-sm); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--lg, .kjun-scope .ds-switch--lg:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { --_kjun-switch-width: var(--extension-switch-widths-lg); --_kjun-switch-height: var(--extension-switch-heights-lg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--on, .kjun-scope .ds-switch--on:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--brand); box-shadow: none; }
 /* The off boundary sits inside the padding, so the off thumb also clears the border width:
    both states keep the same gap between thumb and edge, and the thumb grows as it turns on. */
-.kjun-scope .ds-switch-thumb {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch-thumb, .kjun-scope .ds-switch-thumb:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --_kjun-switch-thumb-inset: calc(var(--extension-switch-padding) + var(--_kjun-border-control-width));
   display: block;
   width: calc(var(--_kjun-switch-height) - 2 * var(--_kjun-switch-thumb-inset));
@@ -2075,7 +2075,7 @@
   transition: transform var(--motion-control) var(--ease-out), background-color var(--motion-control) var(--ease-out),
     width var(--motion-control) var(--ease-out), height var(--motion-control) var(--ease-out), margin var(--motion-control) var(--ease-out);
 }
-.kjun-scope .ds-switch--on .ds-switch-thumb {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--on .ds-switch-thumb, .kjun-scope .ds-switch--on:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch-thumb {
   --_kjun-switch-thumb-inset: var(--extension-switch-padding);
   margin: 0;
   background: var(--on-brand);
@@ -2083,11 +2083,11 @@
 }
 
 @media (pointer: coarse) {
-  .kjun-scope .ds-choice { min-height: var(--_kjun-geometry-native-minimum-touch-target); }
+  .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice, .kjun-scope .ds-choice:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { min-height: var(--_kjun-geometry-native-minimum-touch-target); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kjun-scope .ds-field { transition: none; }
+  .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field, .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { transition: none; }
 }
 
 
@@ -3954,7 +3954,6 @@
   --_kjun-type-display-lg-line: 3rem;
   --_kjun-type-display-lg-weight: 700;
   --_kjun-type-display-lg-tracking: -0.02em;
-  font-size: var(--_kjun-type-body-size); line-height: var(--_kjun-type-body-line); font-weight: var(--_kjun-type-body-weight); letter-spacing: var(--_kjun-type-body-tracking);
 }
 .kjun-scope .kjun-type-caption { font-size: var(--_kjun-type-caption-size); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-type-meta { font-size: var(--_kjun-type-meta-size); line-height: var(--_kjun-type-meta-line); font-weight: var(--_kjun-type-meta-weight); letter-spacing: var(--_kjun-type-meta-tracking); }
@@ -4037,7 +4036,7 @@
 .kjun-scope .price-flash-down-bg-pop { animation: price-flash-down-bg-pop var(--motion-price-background) var(--ease-out); }
 
 
-.kjun-scope .ds-price-cell, .kjun-scope .kjun-price-cell {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-price-cell, .kjun-scope .ds-price-cell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope .kjun-price-cell {
   display: inline-block;
   padding: var(--_kjun-geometry-dimension-value2) var(--_kjun-geometry-dimension-value8);
   border-radius: var(--_kjun-geometry-radius-radius9999);
@@ -4046,19 +4045,6 @@
 @media (prefers-reduced-motion: reduce) { .kjun-scope [class*="price-flash-"] { animation: none; } }
 
 /* KJUN 공통 구조. 색상과 서체는 프로젝트가 제공한 CSS 변수를 사용한다. */
-.kjun-scope {
-  box-sizing: border-box;
-  line-height: var(--_kjun-type-body-line);
-}
-.kjun-scope *,
-.kjun-scope *::before,
-.kjun-scope *::after {
-  box-sizing: border-box;
-}
-.kjun-scope button,
-.kjun-scope input {
-  font-family: inherit;
-}
 .kjun-button {
   position: relative;
   display: inline-flex;
@@ -4171,7 +4157,8 @@
   vertical-align: middle;
 }
 .kjun-spin,
-.ds-icon-spin {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-icon-spin,
+.ds-icon-spin:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   animation: kjun-spin var(--motion-spin) linear infinite;
 }
 @keyframes kjun-spin {
@@ -4442,7 +4429,8 @@
     transition-duration: 0.01ms !important;
   }
   .kjun-scope .kjun-input,
-  .kjun-scope .ds-field { transition: none !important; }
+  .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field,
+  .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { transition: none !important; }
 }
 
 .kjun-skeleton {
@@ -4846,10 +4834,6 @@
 .kjun-form-skeleton > div > .kjun-skeleton:last-child .kjun-skeleton-block,
 .kjun-form-skeleton > div > .ds-skeleton:last-child .ds-skeleton-block { border-radius: var(--form-skeleton-radius); }
 
-.kjun-scope textarea,
-.kjun-scope select {
-  font-family: inherit;
-}
 .kjun-sr-only {
   position: absolute;
   width: 1px;
@@ -4862,12 +4846,14 @@
   white-space: nowrap;
   border: 0;
 }
-.kjun-scope .ds-choice[data-focus-visible] .ds-choice-control,
-.kjun-scope .ds-choice[data-focus-visible] .ds-switch {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice[data-focus-visible] .ds-choice-control,
+.kjun-scope .ds-choice[data-focus-visible]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-control,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice[data-focus-visible] .ds-switch,
+.kjun-scope .ds-choice[data-focus-visible]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch {
   outline: var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);
   outline-offset: var(--_kjun-state-focus-choice-offset);
 }
-.kjun-scope .ds-switch {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch, .kjun-scope .ds-switch:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   border: 0;
 }
 .kjun-textarea {
@@ -5446,7 +5432,8 @@
 }
 /* Underlined as well as recolored: with a near-text brand color, hover would otherwise look like the current page. */
 .kjun-breadcrumb a:hover,
-.ds-breadcrumb-link:hover {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-breadcrumb-link:hover,
+.ds-breadcrumb-link:hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   color: var(--_kjun-color-brand);
   text-decoration: underline;
   text-underline-offset: var(--_kjun-geometry-dimension-value2);
@@ -5774,11 +5761,16 @@
 .kjun-state-actions .kjun-button > .kjun-button-label { min-width: 0; }
 
 .kjun-animated-number,
-.ds-signed-value,
-.ds-deviation,
-.ds-deviation-badge .ds-badge,
-.ds-heatmap-cell,
-.ds-progress-cell-label,
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-signed-value,
+.ds-signed-value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-deviation,
+.ds-deviation:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-deviation-badge .ds-badge,
+.ds-deviation-badge:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-badge,
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-heatmap-cell,
+.ds-heatmap-cell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-progress-cell-label,
+.ds-progress-cell-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
 .kjun-signed-value,
 .kjun-deviation,
 .kjun-deviation-badge .kjun-badge,
@@ -5843,7 +5835,7 @@
   outline: none;
 }
 /* Vue's tooltip wrapper is inline-block; as a flex box it centres the target instead of seating it on the baseline. */
-.ds-deviation-badge > .ds-tooltip-wrapper {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-deviation-badge > .ds-tooltip-wrapper, .ds-deviation-badge:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) > .ds-tooltip-wrapper {
   display: flex;
 }
 /* Freshness badges are tooltip targets: focusable, with the system ring around the badge. */
@@ -6568,7 +6560,7 @@
     letter-spacing: var(--_kjun-type-body-tracking);
   }
   /* Vue's signed value carries text-xs; inherit the change line like Web .kjun-market-change .kjun-signed-value. */
-  .mobile-simple-list .mobile-simple-list__change .ds-signed-value {
+  .mobile-simple-list .mobile-simple-list__change :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-signed-value, .mobile-simple-list .mobile-simple-list__change .ds-signed-value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
     font-size: inherit;
     line-height: inherit;
     font-weight: var(--_kjun-type-label-weight);
@@ -7614,67 +7606,95 @@
 
 /* Shared financial typography. Geometry remains in the component styles. */
 .kjun-scope .kjun-kpi-hero__label,
-.kjun-scope .ds-kpi-hero__label { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__label,
+.kjun-scope .ds-kpi-hero__label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-hero__sec-label,
-.kjun-scope .ds-kpi-hero__sec-label { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__sec-label,
+.kjun-scope .ds-kpi-hero__sec-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-hero__sec-desc,
-.kjun-scope .ds-kpi-hero__sec-desc { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__sec-desc,
+.kjun-scope .ds-kpi-hero__sec-desc:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-hero__delta-desc,
-.kjun-scope .ds-kpi-hero__delta-desc { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__delta-desc,
+.kjun-scope .ds-kpi-hero__delta-desc:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-hero__value,
-.kjun-scope .ds-kpi-hero__value { font-size:var(--_kjun-type-display-lg-size); line-height:var(--_kjun-type-display-lg-line); font-weight:var(--_kjun-type-display-lg-weight); letter-spacing:var(--_kjun-type-display-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__value,
+.kjun-scope .ds-kpi-hero__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-display-lg-size); line-height:var(--_kjun-type-display-lg-line); font-weight:var(--_kjun-type-display-lg-weight); letter-spacing:var(--_kjun-type-display-lg-tracking); }
 .kjun-scope .kjun-kpi-hero__affix,
-.kjun-scope .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__affix,
+.kjun-scope .ds-kpi-hero__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
 .kjun-scope .kjun-kpi-hero__sec-value,
-.kjun-scope .ds-kpi-hero__sec-value { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__sec-value,
+.kjun-scope .ds-kpi-hero__sec-value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 .kjun-scope .kjun-kpi-hero__delta-abs,
-.kjun-scope .ds-kpi-hero__delta-abs { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__delta-abs,
+.kjun-scope .ds-kpi-hero__delta-abs:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 .kjun-scope .kjun-kpi-hero__sec-value .kjun-number-affix,
 .kjun-scope .ds-kpi-hero__sec-value .kjun-number-affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-hero__delta-pct,
-.kjun-scope .ds-kpi-hero__delta-pct { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__delta-pct,
+.kjun-scope .ds-kpi-hero__delta-pct:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 .kjun-scope .kjun-kpi-row__label,
-.kjun-scope .ds-kpi-row__label { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__label,
+.kjun-scope .ds-kpi-row__label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-row__desc,
-.kjun-scope .ds-kpi-row__desc { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__desc,
+.kjun-scope .ds-kpi-row__desc:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-row__segment-label,
-.kjun-scope .ds-kpi-row__segment-label { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__segment-label,
+.kjun-scope .ds-kpi-row__segment-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-row__badge,
-.kjun-scope .ds-kpi-row__badge { font-size:var(--_kjun-type-control-small-size); line-height:var(--_kjun-type-control-small-line); font-weight:var(--_kjun-type-control-small-weight); letter-spacing:var(--_kjun-type-control-small-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__badge,
+.kjun-scope .ds-kpi-row__badge:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-control-small-size); line-height:var(--_kjun-type-control-small-line); font-weight:var(--_kjun-type-control-small-weight); letter-spacing:var(--_kjun-type-control-small-tracking); }
 .kjun-scope .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
 .kjun-scope .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 @media (width <= 768px) {
 .kjun-scope .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row__value { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
 .kjun-scope .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-row--mobile-summary .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
 .kjun-scope .kjun-kpi-row--mobile-summary .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 .kjun-scope .kjun-kpi-row--mobile-summary .kjun-kpi-row__item--secondary .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__item--secondary .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-row--mobile-summary .kjun-kpi-row__item--secondary .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__value { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__item--secondary .ds-kpi-row__value { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 }
 @media (width <= 640px) {
 .kjun-scope .kjun-kpi-hero__value,
-.kjun-scope .ds-kpi-hero__value { font-size:var(--_kjun-type-display-md-size); line-height:var(--_kjun-type-display-md-line); font-weight:var(--_kjun-type-display-md-weight); letter-spacing:var(--_kjun-type-display-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__value,
+.kjun-scope .ds-kpi-hero__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-display-md-size); line-height:var(--_kjun-type-display-md-line); font-weight:var(--_kjun-type-display-md-weight); letter-spacing:var(--_kjun-type-display-md-tracking); }
 .kjun-scope .kjun-kpi-hero__affix,
-.kjun-scope .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__affix,
+.kjun-scope .ds-kpi-hero__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 }
 .kjun-scope .kjun-kpi-hero--sm .kjun-kpi-hero__value,
-.kjun-scope .ds-kpi-hero--sm .ds-kpi-hero__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero--sm .ds-kpi-hero__value,
+.kjun-scope .ds-kpi-hero--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
 .kjun-scope .kjun-kpi-hero--sm .kjun-kpi-hero__affix,
-.kjun-scope .ds-kpi-hero--sm .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero--sm .ds-kpi-hero__affix,
+.kjun-scope .ds-kpi-hero--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 .kjun-scope .kjun-kpi-row--sm .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row--sm .ds-kpi-row__value { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--sm .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
 .kjun-scope .kjun-kpi-row--sm .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row--sm .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--sm .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-kpi-row .kjun-kpi-row__item .kjun-kpi-row__value--text,
-.kjun-scope .ds-kpi-row .ds-kpi-row__item .ds-kpi-row__value--text { font-size:var(--_kjun-type-body-size); line-height:var(--_kjun-type-body-line); font-weight:var(--_kjun-type-body-weight); letter-spacing:var(--_kjun-type-body-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row .ds-kpi-row__item .ds-kpi-row__value--text,
+.kjun-scope .ds-kpi-row:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__item .ds-kpi-row__value--text { font-size:var(--_kjun-type-body-size); line-height:var(--_kjun-type-body-line); font-weight:var(--_kjun-type-body-weight); letter-spacing:var(--_kjun-type-body-tracking); }
 .kjun-scope :is(.kjun-kpi-row__badge,.ds-kpi-row__badge,.kjun-kpi-hero__sec-label,.ds-kpi-hero__sec-label) { white-space:normal; overflow-wrap:anywhere; }
 
 .kjun-scope :is(.kjun-kpi-hero__sec-affix,.ds-kpi-hero__sec-affix,.kjun-number-affix,.ds-animated-number__affix) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); }
@@ -7688,7 +7708,8 @@
 .kjun-scope .ds-kpi-hero__delta-line .kjun-number-affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 
 .kjun-scope .kjun-kpi-row .kjun-kpi-row__value--text .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row .ds-kpi-row__value--text .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row .ds-kpi-row__value--text .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value--text .ds-kpi-row__affix { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); font-weight:var(--_kjun-type-caption-weight); letter-spacing:var(--_kjun-type-caption-tracking); }
 .kjun-scope :is(.kjun-kpi-row__value--text, .ds-kpi-row__value--text) :is(.kjun-animated-number, .ds-animated-number) {
   font-family: var(--kjun-font);
   font-variant-numeric: normal;