@uniai-fe/uds-primitives 0.2.11 → 0.3.1

package/dist/styles.css

@@ -18,24 +18,30 @@
   --button-default-gap-small: var(--spacing-gap-1);
   --button-default-gap-medium: var(--spacing-gap-2);
   --button-default-gap-large: var(--spacing-gap-3);
+  /* 변경: Figma node(705:13710) 기준 table 버튼 gap을 보정한다. */
+  --button-default-gap-table: var(--spacing-gap-1);
   --button-default-padding-inline-base: var(--spacing-padding-4);
   --button-default-padding-inline-small: var(--spacing-padding-6);
   --button-default-padding-inline-medium: var(--spacing-padding-7);
   --button-default-padding-inline-large: var(--spacing-padding-9);
+  --button-default-padding-inline-table: var(--spacing-padding-5);
   --button-default-padding-block-base: 0px;
   --button-default-padding-block-small: 0px;
   --button-default-padding-block-medium: 0px;
   --button-default-padding-block-large: 0px;
+  --button-default-padding-block-table: 0px;
   /* default button sizing */
   --button-default-width-min-base: var(--theme-size-small-2);
   --button-default-height-small: var(--theme-size-small-3, 32px);
   --button-default-height-medium: var(--theme-size-medium-1, 40px);
   --button-default-height-large: var(--theme-size-medium-2, 48px);
   --button-default-height-xlarge: var(--theme-size-medium-3, 56px);
+  --button-default-height-table: var(--theme-size-small-2, 24px);
   --button-default-radius-small: var(--theme-radius-medium-3);
   --button-default-radius-medium: var(--theme-radius-medium-3);
   --button-default-radius-large: var(--theme-radius-large-1);
   --button-default-radius-xlarge: var(--theme-radius-large-2);
+  --button-default-radius-table: var(--theme-radius-medium-2);
   /* text buttons */
   --button-text-padding-block-base: var(--spacing-padding-4, 8px);
   --button-text-padding-inline-small: var(--spacing-padding-4, 8px);
@@ -90,6 +96,16 @@
   --button-default-font-body-large-letter-spacing: var(
   --font-body-large-letter-spacing
   );
+  /* 변경: table 버튼은 caption-large 스케일(12px)을 사용한다. */
+  --button-default-font-caption-large-size: var(--font-caption-large-size);
+  /* 변경: table 버튼 텍스트는 font-weight를 400으로 고정한다. */
+  --button-default-font-caption-large-weight: 400;
+  --button-default-font-caption-large-line-height: var(
+  --font-caption-large-line-height
+  );
+  --button-default-font-caption-large-letter-spacing: var(
+  --font-caption-large-letter-spacing
+  );
   --button-default-font-weight: 400;
   /* default button colors (priority 기반) */
   --button-default-neutral-foreground: var(--color-neutral-20);
@@ -166,12 +182,32 @@
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
   --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-chip-height: var(--theme-size-small-3, 32px);
-  --theme-chip-padding-inline: var(--spacing-padding-5, 12px);
+  --theme-chip-padding-horizontal: var(--spacing-padding-5, 12px);
+  --theme-chip-gap: var(--spacing-gap-1, 4px);
+  /* 변경: table chip 수치를 Figma table 액션 셀 기준으로 보정한다. */
+  /* 변경: table chip 높이는 button table과 동일하게 24px로 맞춘다. */
+  --theme-chip-height-table: 24px;
+  --theme-chip-padding-horizontal-table: var(--spacing-padding-5, 12px);
+  --theme-chip-padding-left-table: var(--spacing-padding-5, 12px);
+  --theme-chip-padding-right-table: var(--spacing-padding-4, 8px);
+  /* 변경: table chip은 높이 24px 고정을 위해 수직 padding을 사용하지 않는다. */
+  --theme-chip-padding-block-table: 0px;
+  --theme-chip-gap-table: var(--spacing-gap-1, 4px);
+  --theme-chip-font-size-table: var(--font-caption-large-size, 12px);
+  /* 변경: table chip 텍스트는 font-weight를 400으로 고정한다. */
+  --theme-chip-font-weight-table: 400;
+  --theme-chip-line-height-table: var(--font-caption-large-line-height, 1.5);
+  /* 변경: Figma 705:13702 기준으로 table chip radius를 6px로 고정한다. */
+  --theme-chip-radius-table: var(--theme-radius-medium-2, 6px);
   --theme-chip-radius: var(--theme-radius-medium-3, 8px);
   --theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
   --theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
   --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
   --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
+  --divider-width: 1px;
+  --divider-height: 12px;
+  --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
+  --divider-margin: var(--spacing-gap-4, 8px);
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
   --drawer-surface-bg: var(--color-surface-static-white);
   --drawer-radius-large: var(--theme-radius-large-2);
@@ -228,17 +264,45 @@
   --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
   --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
   --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
-  --tooltip-message-background: var(--color-cool-gray-20);
-  --tooltip-message-foreground: var(--color-common-100);
-  --tooltip-message-radius: var(--theme-radius-medium-3);
-  --tooltip-message-padding-inline: var(--spacing-padding-5);
-  --tooltip-message-padding-block: var(--spacing-padding-4);
-  --tooltip-message-font-size: var(--font-caption-large-size);
-  --tooltip-message-line-height: var(--font-caption-large-line-height);
-  --tooltip-message-letter-spacing: var(--font-caption-large-letter-spacing);
-  --tooltip-message-font-weight: 400;
-  --tooltip-trigger-icon-size: 16px;
-  --tooltip-trigger-icon-color: var(--color-label-alternative);
+  --form-field-width: auto;
+  --form-field-flex: 0 0 auto;
+  --form-field-gap-x: var(--spacing-gap-5, 12px);
+  --form-field-gap-y: var(--spacing-gap-3, 6px);
+  --form-field-label-font-size: var(--font-label-small-size);
+  --form-field-label-font-weight: 400;
+  --form-field-label-line-height: var(--font-label-small-line-height);
+  --form-field-label-color: var(--color-label-standard);
+  --form-field-helper-font-size: var(--font-caption-medium-size);
+  --form-field-helper-font-weight: 400;
+  --form-field-helper-line-height: var(--font-caption-medium-line-height);
+  --form-field-helper-color: var(--color-label-neutral);
+  --info-box-background-color: color-mix(
+  in srgb,
+  var(--color-feedback-information) 9%,
+  var(--color-common-100)
+  );
+  --info-box-border-color: color-mix(
+  in srgb,
+  var(--color-feedback-information) 24%,
+  var(--color-common-100)
+  );
+  --info-box-icon-color: var(--color-feedback-information);
+  --info-box-heading-color: var(--color-feedback-information);
+  --info-box-body-color: var(--color-label-strong);
+  --info-box-radius: var(--theme-radius-120x120);
+  --info-box-padding-block: var(--spacing-padding-6);
+  --info-box-padding-inline: var(--spacing-padding-6);
+  --info-box-gap-icon: var(--spacing-gap-4);
+  --info-box-gap-contents: var(--spacing-gap-3);
+  --info-box-icon-size: 24px;
+  --info-box-heading-font-size: var(--font-heading-xsmall-size);
+  --info-box-heading-line-height: var(--font-heading-xsmall-line-height);
+  --info-box-heading-letter-spacing: var(--font-heading-xsmall-letter-spacing);
+  --info-box-heading-font-weight: var(--font-heading-xsmall-weight);
+  --info-box-body-font-size: var(--font-body-small-size);
+  --info-box-body-line-height: var(--font-body-small-line-height);
+  --info-box-body-letter-spacing: var(--font-body-small-letter-spacing);
+  --info-box-body-font-weight: var(--font-body-small-weight);
   /* Layout presets */
   --input-width: 100%;
   --input-flex: 0 1 auto;
@@ -288,6 +352,46 @@
   --input-surface-color: var(--color-common-100);
   --input-surface-muted-color: var(--color-neutral-99);
   --input-surface-disabled-color: var(--color-neutral-95);
+  --theme-navigation-height: 86px;
+  --theme-navigation-padding-inline: 32px;
+  --theme-navigation-padding-block-start: 8px;
+  --theme-navigation-padding-block-end: 20px;
+  --theme-navigation-item-gap: 2px;
+  --theme-navigation-icon-size: 24px;
+  --theme-navigation-label-font-size: 12px;
+  --theme-navigation-label-line-height: 1.4;
+  --theme-navigation-label-font-weight: 500;
+  --theme-navigation-label-letter-spacing: -0.12px;
+  --theme-navigation-bg: var(--color-common-100, #ffffff);
+  --theme-navigation-border: var(--color-border-assistive, #e4e5e7);
+  --theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
+  --theme-navigation-color: var(--color-label-strong, #3d3f43);
+  --theme-navigation-color-active: var(--color-primary-default, #0061ff);
+  --theme-navigation-color-disabled: var(--color-label-disabled, #c5c6cc);
+  --theme-radio-frame-size-medium: 20px;
+  --theme-radio-frame-size-large: 24px;
+  --theme-radio-indicator-size-medium: 16px;
+  --theme-radio-indicator-size-large: 20px;
+  --theme-radio-indicator-border-width: 1.4px;
+  --theme-radio-indicator-border-width-selected-medium: 4px;
+  --theme-radio-indicator-border-width-selected-large: 6px;
+  --theme-radio-border-color: var(--color-border-assistive);
+  --theme-radio-border-selected: var(--color-primary-default);
+  --theme-radio-surface-selected: var(--color-primary-default);
+  --theme-radio-surface-disabled: var(--color-border-assistive);
+  --theme-radio-border-disabled: var(--color-border-assistive);
+  --theme-radio-disabled-selected-fill: var(--color-primary-default);
+  --theme-radio-label-color: var(--color-label-strong);
+  --theme-radio-label-disabled: var(--color-label-disabled);
+  --theme-radio-helper-color: var(--color-label-neutral);
+  --theme-radio-helper-disabled: var(--color-label-disabled);
+  --theme-radio-card-background: var(--color-common-100);
+  --theme-radio-card-title-color: var(--color-label-strong);
+  --theme-radio-card-description-color: var(--color-label-neutral);
+  --theme-radio-card-badge-background: var(--color-surface-static-blue);
+  --theme-radio-card-badge-color: var(--color-primary-default);
+  --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
+  --theme-radio-disabled-selected-opacity: 0.28;
   /* layout presets */
   --select-width: 100%;
   --select-flex: 0 1 auto;
@@ -398,58 +502,6 @@
   --font-body-medium-line-height
   );
   --select-multiple-chip-summary-font-weight: 400;
-  --form-field-width: auto;
-  --form-field-flex: 0 0 auto;
-  --form-field-gap-x: var(--spacing-gap-5, 12px);
-  --form-field-gap-y: var(--spacing-gap-3, 6px);
-  --form-field-label-font-size: var(--font-label-small-size);
-  --form-field-label-font-weight: 400;
-  --form-field-label-line-height: var(--font-label-small-line-height);
-  --form-field-label-color: var(--color-label-standard);
-  --form-field-helper-font-size: var(--font-caption-medium-size);
-  --form-field-helper-font-weight: 400;
-  --form-field-helper-line-height: var(--font-caption-medium-line-height);
-  --form-field-helper-color: var(--color-label-neutral);
-  --theme-navigation-height: 86px;
-  --theme-navigation-padding-inline: 32px;
-  --theme-navigation-padding-block-start: 8px;
-  --theme-navigation-padding-block-end: 20px;
-  --theme-navigation-item-gap: 2px;
-  --theme-navigation-icon-size: 24px;
-  --theme-navigation-label-font-size: 12px;
-  --theme-navigation-label-line-height: 1.4;
-  --theme-navigation-label-font-weight: 500;
-  --theme-navigation-label-letter-spacing: -0.12px;
-  --theme-navigation-bg: var(--color-common-100, #ffffff);
-  --theme-navigation-border: var(--color-border-assistive, #e4e5e7);
-  --theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
-  --theme-navigation-color: var(--color-label-strong, #3d3f43);
-  --theme-navigation-color-active: var(--color-primary-default, #0061ff);
-  --theme-navigation-color-disabled: var(--color-label-disabled, #c5c6cc);
-  --theme-radio-frame-size-medium: 20px;
-  --theme-radio-frame-size-large: 24px;
-  --theme-radio-indicator-size-medium: 16px;
-  --theme-radio-indicator-size-large: 20px;
-  --theme-radio-indicator-border-width: 1.4px;
-  --theme-radio-indicator-border-width-selected-medium: 4px;
-  --theme-radio-indicator-border-width-selected-large: 6px;
-  --theme-radio-border-color: var(--color-border-assistive);
-  --theme-radio-border-selected: var(--color-primary-default);
-  --theme-radio-surface-selected: var(--color-primary-default);
-  --theme-radio-surface-disabled: var(--color-border-assistive);
-  --theme-radio-border-disabled: var(--color-border-assistive);
-  --theme-radio-disabled-selected-fill: var(--color-primary-default);
-  --theme-radio-label-color: var(--color-label-strong);
-  --theme-radio-label-disabled: var(--color-label-disabled);
-  --theme-radio-helper-color: var(--color-label-neutral);
-  --theme-radio-helper-disabled: var(--color-label-disabled);
-  --theme-radio-card-background: var(--color-common-100);
-  --theme-radio-card-title-color: var(--color-label-strong);
-  --theme-radio-card-description-color: var(--color-label-neutral);
-  --theme-radio-card-badge-background: var(--color-surface-static-blue);
-  --theme-radio-card-badge-color: var(--color-primary-default);
-  --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
-  --theme-radio-disabled-selected-opacity: 0.28;
   --table-border-color: var(--color-border-standard-cool-gray);
   --table-line-head-background-color: var(--color-surface-static-cool-gray);
   --table-grid-head-background-color: var(
@@ -472,10 +524,17 @@
   --table-td-text-size: 15px;
   --table-td-text-weight: var(--font-body-xsmall-weight);
   --table-td-text-line-height: var(--font-body-xsmall-line-height);
-  --divider-width: 1px;
-  --divider-height: 12px;
-  --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
-  --divider-margin: var(--spacing-gap-4, 8px);
+  --tooltip-message-background: var(--color-cool-gray-20);
+  --tooltip-message-foreground: var(--color-common-100);
+  --tooltip-message-radius: var(--theme-radius-medium-3);
+  --tooltip-message-padding-inline: var(--spacing-padding-5);
+  --tooltip-message-padding-block: var(--spacing-padding-4);
+  --tooltip-message-font-size: var(--font-caption-large-size);
+  --tooltip-message-line-height: var(--font-caption-large-line-height);
+  --tooltip-message-letter-spacing: var(--font-caption-large-letter-spacing);
+  --tooltip-message-font-weight: 400;
+  --tooltip-trigger-icon-size: 16px;
+  --tooltip-trigger-icon-color: var(--color-label-alternative);
 }
 
 @keyframes alternate-loading-spin {
@@ -948,6 +1007,19 @@
   line-height: var(--button-default-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
   letter-spacing: var(--button-default-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
 }
+.button:where(.button-size-table) {
+  padding-inline: var(--button-default-padding-inline-table, var(--spacing-padding-5, 12px));
+  gap: var(--button-default-gap-table, var(--spacing-gap-1, 4px));
+  padding-block: var(--button-default-padding-block-table, 0px);
+  min-height: var(--button-default-height-table, var(--theme-size-small-2, 24px));
+  border-radius: var(--button-default-radius-table, var(--theme-radius-medium-2, 6px));
+}
+.button:where(.button-size-table) span {
+  font-size: var(--button-default-font-caption-large-size, var(--font-caption-large-size, 12px));
+  font-weight: var(--button-default-font-caption-large-weight, var(--button-default-font-weight, 400));
+  line-height: var(--button-default-font-caption-large-line-height, var(--font-caption-large-line-height, 1.5em));
+  letter-spacing: var(--button-default-font-caption-large-letter-spacing, var(--font-caption-large-letter-spacing, 0px));
+}
 .button:where(.button-fill-outlined) {
   box-shadow: none;
 }
@@ -1480,7 +1552,7 @@
 
 
 .chip {
-  --chip-gap: var(--spacing-gap-1, 4px);
+  --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
   --chip-label-color: var(--color-label-standard, #3d3f43);
@@ -1489,7 +1561,8 @@
   justify-content: center;
   gap: var(--chip-gap);
   height: var(--theme-chip-height);
-  padding-inline: var(--theme-chip-padding-inline);
+  padding-left: var(--theme-chip-padding-horizontal);
+  padding-right: var(--theme-chip-padding-horizontal);
   padding-block: 0;
   border-radius: var(--theme-chip-radius);
   border: 1px solid var(--chip-border-color);
@@ -1553,8 +1626,34 @@ figure.chip {
   --chip-bg: var(--color-common-100, #ffffff);
   --chip-label-color: var(--color-label-standard, #3d3f43);
   --chip-border-color: var(--color-border-assistive, #e4e5e7);
-  padding-inline-start: var(--spacing-padding-4, 8px);
-  padding-inline-end: var(--spacing-padding-2, 4px);
+  padding-left: var(--spacing-padding-4, 8px);
+  padding-right: var(--spacing-padding-2, 4px);
+}
+
+.chip:where([data-size=table]) {
+  height: var(--theme-chip-height-table);
+  padding-left: var(--theme-chip-padding-horizontal-table);
+  padding-right: var(--theme-chip-padding-horizontal-table);
+  padding-block: var(--theme-chip-padding-block-table);
+  --chip-gap: var(--theme-chip-gap-table);
+  font-size: var(--theme-chip-font-size-table);
+  font-weight: var(--theme-chip-font-weight-table);
+  line-height: var(--theme-chip-line-height-table);
+  border-radius: var(--theme-chip-radius-table);
+}
+
+.chip:where([data-size=table]) .chip-label {
+  line-height: var(--theme-chip-line-height-table);
+}
+
+.chip:where([data-size=table][data-kind=input]) {
+  padding-left: var(--theme-chip-padding-left-table);
+  padding-right: var(--theme-chip-padding-right-table);
+}
+
+.chip:where([data-size=table][data-kind=input]) .chip-remove-button {
+  width: fit-content;
+  height: fit-content;
 }
 
 .chip:where([data-kind=input][data-selected=true]) {
@@ -1562,7 +1661,7 @@ figure.chip {
 }
 
 .chip-leading {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
@@ -1570,7 +1669,7 @@ figure.chip {
 }
 
 .chip-label {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--spacing-gap-1, 4px);
   color: inherit;
@@ -1579,11 +1678,11 @@ figure.chip {
 }
 
 .chip-remove-button {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: fit-content;
+  height: fit-content;
   border: none;
   background: transparent;
   color: var(--color-label-neutral, #797e86);
@@ -1603,6 +1702,19 @@ figure.chip {
   height: 100%;
 }
 
+/* Divider 토큰도 전역 :root 범위에 선언한다. */
+
+
+.divider {
+  width: var(--divider-width);
+  height: var(--divider-height);
+  background-color: var(--divider-color);
+  margin: 0 var(--divider-margin);
+  vertical-align: middle;
+  align-self: center;
+  font-size: 0;
+}
+
 
 
 .drawer-overlay {
@@ -1951,81 +2063,131 @@ figure.chip {
   padding: 0;
 }
 
-.pop-over-content {
-  position: relative;
-  z-index: 50;
-  outline: none;
+
+
+.form-field-container {
+  display: block;
+  width: var(--form-field-width);
+  flex: var(--form-field-flex);
+}
+.form-field-container[data-width=auto] {
+  --form-field-width: auto;
+  --form-field-flex: 0 0 auto;
+}
+.form-field-container[data-width=fill] {
+  --form-field-width: auto;
+  --form-field-flex: 1 1 0%;
+}
+.form-field-container[data-width=full] {
+  --form-field-width: 100%;
+  --form-field-flex: 0 0 100%;
+}
+.form-field-container[data-width=fit] {
+  --form-field-width: fit-content;
+  --form-field-flex: 0 0 auto;
+}
+.form-field-container[data-width=custom] {
+  --form-field-flex: 0 0 auto;
 }
 
-.pop-over-content {
-  width: fit-content;
-  max-width: min(100vw - 24px, max-content);
-  box-sizing: border-box;
-  background-color: var(--color-common-100);
-  border-radius: var(--theme-radius-large-2);
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
+.form-field-header {
+  margin-bottom: var(--form-field-gap-y);
 }
 
-.pop-over-content[data-width=match] {
-  width: var(--radix-popover-trigger-width);
+.form-field-required {
+  color: var(--color-feedback-error);
 }
 
-.pop-over-content[data-width=fit-content] {
-  width: fit-content;
+.form-field-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-1);
+  font-size: var(--form-field-label-font-size);
+  font-weight: var(--form-field-label-font-weight);
+  line-height: var(--form-field-label-line-height);
+}
+.form-field-label span:not(.form-field-required) {
+  color: var(--form-field-label-color);
 }
 
-.pop-over-content[data-width=max-content] {
-  width: max-content;
+.form-field-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-field-gap-x);
+  width: 100%;
+}
+
+.form-field-footer {
+  margin-top: var(--form-field-gap-y);
+  font-size: var(--form-field-helper-font-size);
+  line-height: var(--form-field-helper-line-height);
+}
+.form-field-footer p,
+.form-field-footer span {
+  color: var(--form-field-helper-color);
 }
 
 
 
-.tooltip-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--info-box-gap-icon);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--info-box-padding-block) var(--info-box-padding-inline);
+  border: 1px solid var(--info-box-border-color);
+  border-radius: var(--info-box-radius);
+  background-color: var(--info-box-background-color);
 }
 
-.tooltip-template-trigger {
+.info-box:where([data-state=info]) {
+  --info-box-icon-color: var(--color-feedback-information);
+  --info-box-heading-color: var(--color-feedback-information);
+}
+
+.info-box-icon {
   display: inline-flex;
-  width: var(--tooltip-trigger-icon-size);
-  height: var(--tooltip-trigger-icon-size);
   align-items: center;
   justify-content: center;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  color: var(--tooltip-trigger-icon-color);
-  cursor: pointer;
+  margin: 0;
+  width: var(--info-box-icon-size);
+  height: var(--info-box-icon-size);
+  color: var(--info-box-icon-color);
+  flex-shrink: 0;
 }
 
-.tooltip-template-trigger svg {
+.info-box-icon svg {
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
 }
 
-.tooltip-message {
-  max-width: min(20rem, 100vw - 1.5rem);
-  box-sizing: border-box;
-  border-radius: var(--tooltip-message-radius);
-  background-color: var(--tooltip-message-background);
-  padding: var(--tooltip-message-padding-block) var(--tooltip-message-padding-inline);
+.info-box-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--info-box-gap-contents);
 }
 
-.tooltip-message-text {
-  display: block;
-  color: var(--tooltip-message-foreground);
-  font-size: var(--tooltip-message-font-size);
-  line-height: var(--tooltip-message-line-height);
-  letter-spacing: var(--tooltip-message-letter-spacing);
-  font-weight: var(--tooltip-message-font-weight);
-  white-space: normal;
+.info-box-heading {
+  margin: 0;
+  color: var(--info-box-heading-color);
+  font-size: var(--info-box-heading-font-size);
+  line-height: var(--info-box-heading-line-height);
+  letter-spacing: var(--info-box-heading-letter-spacing);
+  font-weight: var(--info-box-heading-font-weight);
 }
 
-.tooltip-message-arrow {
-  fill: var(--tooltip-message-background);
+.info-box-body {
+  margin: 0;
+  color: var(--info-box-body-color);
+  font-size: var(--info-box-body-font-size);
+  line-height: var(--info-box-body-line-height);
+  letter-spacing: var(--info-box-body-letter-spacing);
+  font-weight: var(--info-box-body-font-weight);
 }
 
 
@@ -2586,988 +2748,952 @@ figure.chip {
   cursor: pointer;
 }
 
-/* Select tokens mapped to Input primary tokens for visual parity */
 
 
-.select {
-  display: flex;
-  width: var(--select-width);
-  flex: var(--select-flex);
-  flex-direction: column;
-  gap: var(--spacing-gap-2);
-  min-width: 0;
+.bottom-navigation {
+  width: 100%;
+  position: relative;
+  z-index: 10;
+  background-color: var(--theme-navigation-bg);
+  border-top: 1px solid var(--theme-navigation-border);
+  box-shadow: var(--theme-navigation-shadow, 0 -4px 16px rgba(0, 0, 0, 0.04));
+  padding-inline: var(--theme-navigation-padding-inline);
+  padding-block-start: var(--theme-navigation-padding-block-start);
+  padding-block-end: max(var(--theme-navigation-padding-block-end), env(safe-area-inset-bottom, 0px));
+  min-height: var(--theme-navigation-height);
 }
 
-.select[data-width=auto] {
-  --select-width: auto;
-  --select-flex: 0 1 auto;
+.bottom-navigation[data-fixed=true] {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 20;
 }
 
-.select[data-width=fill] {
-  --select-width: auto;
-  --select-flex: 1 1 0%;
+.bottom-navigation-list {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
-.select[data-width=full],
-.select-block {
-  --select-width: 100%;
-  --select-flex: 0 0 100%;
+.bottom-navigation-item {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
 }
 
-.select[data-width=fit] {
-  --select-width: fit-content;
-  --select-flex: 0 0 auto;
+.bottom-navigation-trigger {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--theme-navigation-item-gap);
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  appearance: none;
+  text-decoration: none;
+  color: var(--theme-navigation-color);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 0.16s ease;
 }
 
-.select[data-width=custom] {
-  --select-flex: 0 0 auto;
+.bottom-navigation-trigger[data-active=true] {
+  color: var(--theme-navigation-color-active);
 }
 
-.select-button {
-  --select-icon-fill: var(--select-icon-color-default);
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: var(--select-primary-gap-inline);
-  min-height: var(--select-primary-height-medium);
-  padding: var(--select-primary-padding-block) var(--select-primary-padding-inline);
-  border: var(--select-primary-border-width-default) solid var(--select-primary-color-border);
-  border-radius: var(--select-primary-radius-medium);
-  background-color: var(--input-surface-color);
-  cursor: pointer;
-  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
-  text-align: left;
-}
-.select-button[data-size=small] {
-  min-height: var(--select-primary-height-small);
-  border-radius: var(--select-primary-radius-small);
+.bottom-navigation-trigger[data-disabled=true],
+.bottom-navigation-trigger:disabled {
+  color: var(--theme-navigation-color-disabled);
+  cursor: default;
+  pointer-events: none;
 }
-.select-button[data-size=large] {
-  min-height: var(--select-primary-height-large);
-  border-radius: var(--select-primary-radius-large);
+
+.bottom-navigation-trigger:focus-visible {
+  outline: none;
+  border-radius: var(--theme-radius-large-1, 12px);
+  box-shadow: 0 0 0 2px var(--color-primary-focus, rgba(0, 97, 255, 0.2));
 }
-.select-button[data-multiple=true] {
+
+.navigation-item-icon {
+  display: inline-flex;
   align-items: center;
-  flex-wrap: nowrap;
-  overflow: hidden;
+  justify-content: center;
+  width: var(--theme-navigation-icon-size);
+  height: var(--theme-navigation-icon-size);
+  color: currentColor;
 }
-.select-button[data-priority=secondary] {
-  width: fit-content;
-  max-width: 100%;
-  min-height: auto;
-  border: none;
-  border-radius: var(--select-secondary-radius);
-  padding: var(--select-secondary-padding-block) var(--select-secondary-padding-inline);
-  background-color: transparent;
-  gap: var(--select-secondary-gap);
-  position: relative;
-  --select-icon-fill: currentColor;
-  transition: background-color 150ms ease, color 150ms ease;
+.navigation-item-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
-.select-button[data-priority=secondary]:hover:not([data-state=disabled]) {
-  background-color: var(--select-color-surface-secondary-hover);
+.navigation-item-icon {
+  /* SVG fill/stroke를 currentColor로 맞춰 selected 컬러만 제어한다. */
 }
-.select-button[data-priority=secondary]:active:not([data-state=disabled]) {
-  background-color: var(--select-color-surface-secondary-active);
+.navigation-item-icon svg [fill]:not([fill=none]) {
+  fill: currentColor;
 }
-.select-button[data-priority=secondary][data-state=focused], .select-button[data-priority=secondary][data-open=true] {
-  background-color: var(--select-color-surface-secondary-hover);
+.navigation-item-icon svg [stroke]:not([stroke=none]) {
+  stroke: currentColor;
 }
-.select-button[data-priority=secondary][data-state=focused]::after, .select-button[data-priority=secondary][data-open=true]::after {
-  height: var(--select-secondary-underline-width-focus);
-  background-color: var(--select-color-border-secondary-focused);
+
+.navigation-item-label {
+  display: block;
+  font-size: var(--theme-navigation-label-font-size);
+  font-weight: var(--theme-navigation-label-font-weight);
+  line-height: var(--theme-navigation-label-line-height);
+  letter-spacing: var(--theme-navigation-label-letter-spacing);
+  color: currentColor;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
-.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
-  color: var(--color-label-disabled);
-  cursor: not-allowed;
+
+/* Pagination native 구현 스타일 */
+.pagination {
+  --pagination-gap: var(--spacing-gap-2, 8px);
+  --pagination-number-height: var(--theme-size-small-2, 24px);
+  --pagination-number-min-width: var(--theme-size-small-2, 24px);
+  --pagination-number-radius: var(--theme-radius-medium-1, 6px);
+  --pagination-color-active-bg: var(--color-cool-gray-10, #18191b);
+  --pagination-color-active-label: var(--color-common-100, #ffffff);
+  --pagination-color-inactive-label: var(--color-label-alternative, #afb1b6);
+  --pagination-dot-size: 8px;
+  --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
+  --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
+  --pagination-dot-active-bg-secondary: var(
+    --color-surface-heavy,
+    #313235
+  );
+  --pagination-carousel-height: 8px;
+  --pagination-carousel-dot-width: 8px;
+  --pagination-carousel-active-width: 20px;
+  --pagination-count-bg: var(--color-cool-gray-10, #18191b);
+  --pagination-count-divider: var(--color-common-100, #ffffff);
+  --pagination-count-total: var(--color-label-alternative, #afb1b6);
+  display: inline-flex;
+  gap: var(--pagination-gap);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
-.select-button[data-priority=table] {
-  border-radius: var(--select-table-radius);
-  border-color: var(--select-table-border-default-color);
-  background-color: var(--select-table-surface-color);
-  --select-icon-fill: var(--select-table-icon-color-default);
+
+.pagination[data-interactive=false] .pagination-button,
+.pagination-button:disabled {
+  cursor: default;
 }
-.select-button:not([data-priority=secondary])[data-state=focused], .select-button:not([data-priority=secondary])[data-open=true], .select-button:not([data-priority=secondary]):focus-visible {
-  border-color: var(--select-primary-color-border-focused);
-  border-width: var(--select-primary-border-width-focus);
-  --select-icon-fill: var(--select-icon-color-focused);
+
+.pagination-item {
+  list-style: none;
 }
-.select-button[data-priority=table][data-state=focused], .select-button[data-priority=table][data-open=true], .select-button[data-priority=table]:focus-visible {
-  border-color: var(--select-table-border-focus-color);
-  border-width: var(--select-primary-border-width-focus);
-  --select-icon-fill: var(--select-table-icon-color-focused);
-}
-.select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
-  border-color: var(--select-primary-color-border-disabled);
-  background-color: var(--select-primary-color-surface-disabled);
-  cursor: not-allowed;
-  --select-icon-fill: var(--select-icon-color-disabled);
-}
-.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
-  border-color: transparent;
-  background-color: var(--select-color-surface-secondary-disabled);
-}
-.select-button[data-priority=secondary][data-state=disabled]::after, .select-button[data-priority=secondary]:disabled::after {
-  background-color: var(--select-color-border-secondary-disabled);
-  height: var(--select-secondary-underline-width-default);
-}
-.select-button[data-priority=table][data-state=disabled], .select-button[data-priority=table]:disabled {
-  border-color: var(--select-table-border-disabled-color);
-  background-color: var(--select-table-surface-disabled-color);
-  cursor: not-allowed;
-  --select-icon-fill: var(--select-table-icon-color-disabled);
+
+.pagination-button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
 }
 
-.select-value {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-2);
+.pagination--variant-list {
+  gap: var(--spacing-gap-1, 4px);
 }
 
-.select-label {
-  flex: 1 1 auto;
-  min-width: 0;
-  font-family: var(--font-body-medium-family);
-  font-size: var(--select-text-medium-size);
-  font-weight: var(--select-text-medium-weight);
-  line-height: var(--select-text-medium-line-height);
-  letter-spacing: var(--select-text-medium-letter-spacing);
-  color: var(--select-primary-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.select-button[data-priority=secondary] .select-label {
-  color: var(--select-secondary-color-text);
+.pagination--variant-list .pagination-button {
+  min-width: var(--pagination-number-min-width);
+  height: var(--pagination-number-height);
+  padding-inline: var(--spacing-padding-2, 8px);
+  border-radius: var(--pagination-number-radius);
+  background-color: transparent;
+  color: var(--pagination-color-inactive-label);
+  font-size: var(--font-label-medium-size, 12px);
+  font-weight: var(--font-label-medium-weight, 400);
+  line-height: var(--font-label-medium-line-height, 1.5);
 }
-.select-button[data-priority=table] .select-label {
-  color: var(--select-table-color-text);
+
+.pagination[data-interactive=true] .pagination--variant-list .pagination-button:not([data-active=true]):hover {
+  background-color: var(--color-bg-alternative-cool-gray, #f0f1f5);
+  color: var(--color-label-strong, #5b5c60);
 }
-.select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
-  color: var(--select-primary-color-text-focused);
+
+.pagination--variant-list .pagination-button[data-active=true] {
+  background-color: var(--pagination-color-active-bg);
+  color: var(--pagination-color-active-label);
 }
-.select-button[data-state=disabled] .select-label {
-  color: var(--select-primary-color-text-disabled);
+
+.pagination-number {
+  min-width: 1ch;
+  text-align: center;
 }
-.select-button[data-priority=secondary][data-state=disabled] .select-label {
-  color: var(--color-label-disabled);
+
+.pagination--variant-carousel {
+  gap: 5px;
+  min-height: var(--pagination-carousel-height);
+  align-items: center;
 }
 
-.select-label-placeholder {
-  color: var(--select-primary-color-placeholder);
+.pagination--variant-carousel[data-priority=secondary] {
+  --pagination-dot-active-bg: var(
+    --pagination-dot-active-bg-secondary,
+    var(--color-secondary-strong, #ccdeff)
+  );
 }
-.select-button[data-priority=secondary] .select-label-placeholder {
-  color: var(--select-secondary-color-placeholder);
+
+.pagination--variant-carousel .pagination-button {
+  width: auto;
+  height: var(--pagination-carousel-height);
+  padding: 0;
 }
-.select-button[data-priority=table] .select-label-placeholder {
-  color: var(--select-table-color-placeholder);
+
+.pagination--variant-carousel .pagination-dot {
+  display: inline-flex;
+  width: var(--pagination-carousel-dot-width);
+  height: var(--pagination-carousel-height);
+  border-radius: calc(var(--pagination-carousel-height) / 2);
+  background-color: var(--pagination-dot-bg);
+  transition: width 0.16s ease, background-color 0.16s ease;
 }
 
-.select-button[data-size=small] .select-label {
-  font-size: var(--select-text-small-size);
-  line-height: var(--select-text-small-line-height);
-  letter-spacing: var(--select-text-small-letter-spacing);
-  font-weight: var(--select-text-small-weight);
+.pagination--variant-carousel .pagination-button[data-active=true] .pagination-dot {
+  width: var(--pagination-carousel-active-width);
+  background-color: var(--pagination-dot-active-bg);
 }
 
-.select-button[data-priority=table][data-size=small] .select-label {
-  font-size: var(--select-table-text-small-size);
-  line-height: var(--select-table-text-small-line-height);
-  font-weight: var(--select-table-text-small-weight);
+.pagination--variant-count {
+  gap: 0;
 }
 
-.select-button[data-size=large] .select-label {
-  font-size: var(--select-text-large-size);
-  line-height: var(--select-text-large-line-height);
-  letter-spacing: var(--select-text-large-letter-spacing);
-  font-weight: var(--select-text-large-weight);
+.pagination--variant-count .pagination-button {
+  border-radius: var(--theme-radius-large-2, 16px);
+  padding-inline: var(--spacing-padding-4, 16px);
+  background-color: var(--pagination-count-bg);
+  color: var(--pagination-color-active-label);
+  font-weight: var(--font-label-medium-weight, 400);
+  line-height: 1.5;
 }
 
-.select-button[data-priority=table][data-size=medium] .select-label {
-  font-size: var(--select-table-text-medium-size);
-  line-height: var(--select-table-text-medium-line-height);
-  font-weight: var(--select-table-text-medium-weight);
+.pagination--variant-count.pagination--count-size-small .pagination-button {
+  height: var(--theme-size-small-2, 24px);
+  font-size: var(--font-label-medium-size, 12px);
 }
 
-.select-button[data-priority=table][data-size=large] .select-label {
-  font-size: var(--select-table-text-large-size);
-  line-height: var(--select-table-text-large-line-height);
-  font-weight: var(--select-table-text-large-weight);
+.pagination--variant-count.pagination--count-size-xsmall .pagination-button {
+  height: var(--theme-size-small-1, 20px);
+  font-size: var(--font-label-small-size, 11px);
 }
 
-.select-button[data-priority=secondary][data-size=large] .select-label {
-  font-weight: 600;
+.pagination-count-current {
+  color: var(--pagination-color-active-label);
 }
 
-.select-tags {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: var(--select-multiple-chip-gap);
-  align-items: center;
-  min-width: 0;
-  flex: 1 1 auto;
+.pagination-count-divider {
+  margin-inline: var(--spacing-gap-1, 4px);
+  color: var(--pagination-count-divider);
 }
 
-.select-tag {
-  display: flex;
-  align-items: center;
-  gap: var(--select-multiple-chip-gap);
-  padding: var(--select-multiple-chip-padding-block) var(--select-multiple-chip-padding-inline);
-  border-radius: var(--select-multiple-chip-radius);
-  border: 1px solid var(--select-multiple-chip-border-color, var(--color-border-standard-cool-gray));
-  background-color: var(--select-multiple-chip-surface);
-  color: var(--select-multiple-chip-color);
-  font-size: var(--select-multiple-chip-font-size);
-  line-height: var(--select-multiple-chip-line-height);
-  font-weight: var(--select-multiple-chip-font-weight);
-  white-space: nowrap;
-  min-height: var(--select-multiple-chip-height);
+.pagination-count-total {
+  color: var(--pagination-count-total);
 }
-.select-tag:focus-within {
-  border-color: var(--select-color-border-secondary-focused);
+
+.pop-over-content {
+  position: relative;
+  z-index: 50;
+  outline: none;
 }
-.select-tag[data-removable=true] {
-  padding-right: var(--spacing-padding-2);
+
+.pop-over-content {
+  width: fit-content;
+  max-width: min(100vw - 24px, max-content);
+  box-sizing: border-box;
+  background-color: var(--color-common-100);
+  border-radius: var(--theme-radius-large-2);
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
 }
 
-.select-tag[data-kind=summary],
-.select-tag-summary {
-  background-color: var(--select-multiple-chip-summary-surface);
-  border-color: var(--select-multiple-chip-summary-border-color);
-  color: var(--select-multiple-chip-summary-color);
-  padding: var(--select-multiple-chip-summary-padding-block) var(--select-multiple-chip-summary-padding-inline);
-  border-radius: var(--select-multiple-chip-summary-radius);
-  font-size: var(--select-multiple-chip-summary-font-size);
-  line-height: var(--select-multiple-chip-summary-line-height);
-  font-weight: var(--select-multiple-chip-summary-font-weight);
-  min-height: auto;
+.pop-over-content[data-width=match] {
+  width: var(--radix-popover-trigger-width);
 }
 
-.select-tag-label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap-1);
-  min-width: 0;
+.pop-over-content[data-width=fit-content] {
+  width: fit-content;
 }
 
-.select-tag-suffix {
-  color: var(--select-multiple-chip-suffix-color);
-  font-size: inherit;
-  line-height: inherit;
+.pop-over-content[data-width=max-content] {
+  width: max-content;
 }
 
-.select-tag-remove {
-  display: flex;
+
+
+.radio {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--select-icon-size-small);
-  height: var(--select-icon-size-small);
+  inline-size: var(--theme-radio-frame-size-medium);
+  block-size: var(--theme-radio-frame-size-medium);
   border: none;
   background-color: transparent;
+  border-radius: 0;
   padding: 0;
   cursor: pointer;
-  color: var(--select-multiple-chip-remove-color);
-  flex-shrink: 0;
-  border-radius: 9999px;
-  transition: color 150ms ease;
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
 }
-.select-tag-remove:focus-visible {
-  outline: 0.2rem solid var(--color-border-strong);
-  outline-offset: 0.1rem;
+.radio[data-size=large] {
+  inline-size: var(--theme-radio-frame-size-large);
+  block-size: var(--theme-radio-frame-size-large);
 }
-.select-tag-remove:hover {
-  color: var(--select-multiple-chip-remove-hover-color);
+.radio[data-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.select-tag-remove svg {
-  width: 100%;
-  height: 100%;
+
+.radio:focus-visible {
+  box-shadow: 0 0 0 2px var(--theme-radio-focus-ring);
 }
-.select-tag-remove svg path {
-  fill: currentColor;
+
+.radio-indicator {
+  inline-size: var(--theme-radio-indicator-size-medium);
+  block-size: var(--theme-radio-indicator-size-medium);
+  border-radius: 9999px;
+  border: var(--theme-radio-indicator-border-width) solid var(--theme-radio-border-color);
+  transition: border-color 0.15s ease;
 }
 
-.select-icon {
-  flex-shrink: 0;
-  width: var(--select-icon-size-medium);
-  height: var(--select-icon-size-medium);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-}
-.select-icon[data-size=small] {
-  width: var(--select-icon-size-small);
-  height: var(--select-icon-size-small);
-}
-.select-icon[data-size=large] {
-  width: var(--select-icon-size-large);
-  height: var(--select-icon-size-large);
-}
-[data-open=true] .select-icon {
-  transform: rotate(180deg);
-}
-.select-icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.select-icon svg path {
-  fill: var(--select-icon-fill);
+.radio[data-state=checked] .radio-indicator,
+.radio[data-size=medium][data-state=checked] .radio-indicator {
+  border-width: var(--theme-radio-indicator-border-width-selected-medium);
 }
 
-
-
-.form-field-container {
-  display: block;
-  width: var(--form-field-width);
-  flex: var(--form-field-flex);
-}
-.form-field-container[data-width=auto] {
-  --form-field-width: auto;
-  --form-field-flex: 0 0 auto;
-}
-.form-field-container[data-width=fill] {
-  --form-field-width: auto;
-  --form-field-flex: 1 1 0%;
-}
-.form-field-container[data-width=full] {
-  --form-field-width: 100%;
-  --form-field-flex: 0 0 100%;
+.radio[data-size=large] .radio-indicator {
+  inline-size: var(--theme-radio-indicator-size-large);
+  block-size: var(--theme-radio-indicator-size-large);
 }
-.form-field-container[data-width=fit] {
-  --form-field-width: fit-content;
-  --form-field-flex: 0 0 auto;
+.radio[data-size=large][data-state=checked] .radio-indicator {
+  border-width: var(--theme-radio-indicator-border-width-selected-large);
 }
-.form-field-container[data-width=custom] {
-  --form-field-flex: 0 0 auto;
+
+.radio[data-state=checked] .radio-indicator {
+  border-color: var(--theme-radio-border-selected);
 }
 
-.form-field-header {
-  margin-bottom: var(--form-field-gap-y);
+.radio[data-disabled=true] .radio-indicator {
+  border-color: var(--theme-radio-border-disabled);
+  background-color: var(--theme-radio-surface-disabled);
+  opacity: 1;
 }
 
-.form-field-required {
-  color: var(--color-feedback-error);
+.radio[data-disabled=true][data-state=checked] .radio-indicator {
+  border-color: var(--theme-radio-disabled-selected-fill);
+  opacity: var(--theme-radio-disabled-selected-opacity);
 }
 
-.form-field-label {
+.radio-field {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: var(--spacing-gap-1);
-  font-size: var(--form-field-label-font-size);
-  font-weight: var(--form-field-label-font-weight);
-  line-height: var(--form-field-label-line-height);
+  color: var(--theme-radio-label-color);
 }
-.form-field-label span:not(.form-field-required) {
-  color: var(--form-field-label-color);
+
+.radio-field[data-disabled=true] {
+  color: var(--theme-radio-label-disabled);
 }
 
-.form-field-body {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--form-field-gap-x);
-  width: 100%;
+.radio-label-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  cursor: pointer;
 }
 
-.form-field-footer {
-  margin-top: var(--form-field-gap-y);
-  font-size: var(--form-field-helper-font-size);
-  line-height: var(--form-field-helper-line-height);
+.radio-label-wrapper[data-disabled=true] {
+  cursor: not-allowed;
 }
-.form-field-footer p,
-.form-field-footer span {
-  color: var(--form-field-helper-color);
+
+.radio-label-text {
+  font-weight: var(--font-body-medium-weight);
+  user-select: none;
 }
 
+.radio-field[data-size=medium] .radio-label-text {
+  font-size: var(--font-body-xsmall-size);
+  line-height: var(--font-body-xsmall-line-height);
+}
 
+.radio-field[data-size=large] .radio-label-text {
+  font-size: var(--font-body-medium-size);
+  line-height: var(--font-body-medium-line-height);
+}
 
-.bottom-navigation {
-  width: 100%;
-  position: relative;
-  z-index: 10;
-  background-color: var(--theme-navigation-bg);
-  border-top: 1px solid var(--theme-navigation-border);
-  box-shadow: var(--theme-navigation-shadow, 0 -4px 16px rgba(0, 0, 0, 0.04));
-  padding-inline: var(--theme-navigation-padding-inline);
-  padding-block-start: var(--theme-navigation-padding-block-start);
-  padding-block-end: max(var(--theme-navigation-padding-block-end), env(safe-area-inset-bottom, 0px));
-  min-height: var(--theme-navigation-height);
+.radio-helper {
+  margin: 0;
+  font-size: var(--font-caption-large-size);
+  line-height: var(--font-caption-large-line-height);
+  color: var(--theme-radio-helper-color);
+  user-select: none;
 }
 
-.bottom-navigation[data-fixed=true] {
-  position: fixed;
-  inset-inline: 0;
-  bottom: 0;
-  z-index: 20;
+.radio-field[data-disabled=true] .radio-helper {
+  color: var(--theme-radio-helper-disabled);
 }
 
-.bottom-navigation-list {
+.radio-card-group {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  gap: var(--spacing-gap-3);
+}
+
+.radio-card {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 0;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+  inline-size: 100%;
+  gap: var(--spacing-gap-3);
+  padding: 16px 24px;
+  background-color: var(--theme-radio-card-background);
+  transition: background-color 0.15s ease;
+  cursor: pointer;
+}
+.radio-card[data-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.7;
 }
 
-.bottom-navigation-item {
-  flex: 1;
-  min-width: 0;
+.radio-card-content {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: var(--spacing-gap-1);
+  min-inline-size: 0;
 }
 
-.bottom-navigation-trigger {
+.radio-card-title-row {
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  gap: var(--theme-navigation-item-gap);
-  min-width: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  appearance: none;
-  text-decoration: none;
-  color: var(--theme-navigation-color);
-  font: inherit;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  transition: color 0.16s ease;
+  gap: var(--spacing-gap-1);
+  min-inline-size: 0;
 }
 
-.bottom-navigation-trigger[data-active=true] {
-  color: var(--theme-navigation-color-active);
+.radio-card-title {
+  font-size: var(--font-heading-small-size);
+  line-height: var(--font-heading-small-line-height);
+  font-weight: var(--font-heading-small-weight);
+  letter-spacing: 0.2px;
+  color: var(--theme-radio-card-title-color);
+  white-space: nowrap;
 }
 
-.bottom-navigation-trigger[data-disabled=true],
-.bottom-navigation-trigger:disabled {
-  color: var(--theme-navigation-color-disabled);
-  cursor: default;
-  pointer-events: none;
+.radio-card-badge {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  font-size: var(--font-caption-medium-size);
+  line-height: var(--font-caption-medium-line-height);
+  border-radius: 6px;
+  background-color: var(--theme-radio-card-badge-background);
+  color: var(--theme-radio-card-badge-color);
 }
 
-.bottom-navigation-trigger:focus-visible {
-  outline: none;
-  border-radius: var(--theme-radius-large-1, 12px);
-  box-shadow: 0 0 0 2px var(--color-primary-focus, rgba(0, 97, 255, 0.2));
+.radio-card[data-state=checked] .radio-card-title {
+  color: var(--theme-radio-card-badge-color);
+}
+.radio-card[data-state=checked] .radio-card-badge {
+  display: inline-flex;
 }
 
-.navigation-item-icon {
+.radio-card-description {
+  margin: 0;
+  font-size: var(--font-body-small-size);
+  line-height: var(--font-body-small-line-height);
+  color: var(--theme-radio-card-description-color);
+}
+
+.radio-card-indicator-wrapper {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--theme-navigation-icon-size);
-  height: var(--theme-navigation-icon-size);
-  color: currentColor;
-}
-.navigation-item-icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.navigation-item-icon {
-  /* SVG fill/stroke를 currentColor로 맞춰 selected 컬러만 제어한다. */
-}
-.navigation-item-icon svg [fill]:not([fill=none]) {
-  fill: currentColor;
+  flex-shrink: 0;
 }
-.navigation-item-icon svg [stroke]:not([stroke=none]) {
-  stroke: currentColor;
+
+.radio-card-indicator {
+  inline-size: var(--theme-radio-indicator-size-medium);
+  block-size: var(--theme-radio-indicator-size-medium);
+  border-radius: 9999px;
+  border: var(--theme-radio-indicator-border-width) solid var(--theme-radio-border-color);
+  transition: border-color 0.15s ease;
 }
 
-.navigation-item-label {
-  display: block;
-  font-size: var(--theme-navigation-label-font-size);
-  font-weight: var(--theme-navigation-label-font-weight);
-  line-height: var(--theme-navigation-label-line-height);
-  letter-spacing: var(--theme-navigation-label-letter-spacing);
-  color: currentColor;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
-/* Pagination native 구현 스타일 */
-.pagination {
-  --pagination-gap: var(--spacing-gap-2, 8px);
-  --pagination-number-height: var(--theme-size-small-2, 24px);
-  --pagination-number-min-width: var(--theme-size-small-2, 24px);
-  --pagination-number-radius: var(--theme-radius-medium-1, 6px);
-  --pagination-color-active-bg: var(--color-cool-gray-10, #18191b);
-  --pagination-color-active-label: var(--color-common-100, #ffffff);
-  --pagination-color-inactive-label: var(--color-label-alternative, #afb1b6);
-  --pagination-dot-size: 8px;
-  --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
-  --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
-  --pagination-dot-active-bg-secondary: var(
-    --color-surface-heavy,
-    #313235
-  );
-  --pagination-carousel-height: 8px;
-  --pagination-carousel-dot-width: 8px;
-  --pagination-carousel-active-width: 20px;
-  --pagination-count-bg: var(--color-cool-gray-10, #18191b);
-  --pagination-count-divider: var(--color-common-100, #ffffff);
-  --pagination-count-total: var(--color-label-alternative, #afb1b6);
-  display: inline-flex;
-  gap: var(--pagination-gap);
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+.radio-card[data-size=large] .radio-card-indicator {
+  inline-size: var(--theme-radio-indicator-size-large);
+  block-size: var(--theme-radio-indicator-size-large);
 }
 
-.pagination[data-interactive=false] .pagination-button,
-.pagination-button:disabled {
-  cursor: default;
+.radio-card[data-state=checked] .radio-card-indicator {
+  border-color: var(--theme-radio-border-selected);
+  border-width: var(--theme-radio-indicator-border-width-selected-medium);
 }
 
-.pagination-item {
-  list-style: none;
+.radio-card[data-size=large][data-state=checked] .radio-card-indicator {
+  border-width: var(--theme-radio-indicator-border-width-selected-large);
 }
 
-.pagination-button {
-  appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: inherit;
-  font: inherit;
-  transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
+.segmented-control {
+  --segmented-height: 34px;
+  --segmented-padding: 2px;
+  --segmented-radius: 16px;
+  --segmented-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
+  --segmented-indicator-bg: var(--color-common-100, #ffffff);
+  --segmented-indicator-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
+  --segmented-label-color: var(--color-label-neutral, #797e86);
+  --segmented-label-active-color: var(--color-label-strong, #181a1b);
+  --segmented-disabled-opacity: 0.4;
+  --segmented-gap: 2px;
+  --segmented-item-padding-x: 22px;
+  --segmented-item-padding-y: 4px;
+  --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
+  --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
+  --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  padding: var(--segmented-padding);
+  border-radius: var(--segmented-radius);
+  background: var(--segmented-bg);
+  width: fit-content;
+  min-height: var(--segmented-height);
+  isolation: isolate;
+  overflow: hidden;
 }
 
-.pagination--variant-list {
-  gap: var(--spacing-gap-1, 4px);
+.segmented-control:where([data-keep-selected=true]) {
+  --segmented-disabled-opacity: 0.3;
 }
 
-.pagination--variant-list .pagination-button {
-  min-width: var(--pagination-number-min-width);
-  height: var(--pagination-number-height);
-  padding-inline: var(--spacing-padding-2, 8px);
-  border-radius: var(--pagination-number-radius);
-  background-color: transparent;
-  color: var(--pagination-color-inactive-label);
-  font-size: var(--font-label-medium-size, 12px);
-  font-weight: var(--font-label-medium-weight, 400);
-  line-height: var(--font-label-medium-line-height, 1.5);
+.segmented-control-indicator {
+  position: absolute;
+  top: var(--segmented-padding);
+  bottom: var(--segmented-padding);
+  left: 0;
+  width: 0px;
+  height: calc(100% - var(--segmented-padding) * 2);
+  margin: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  background: var(--segmented-indicator-bg);
+  box-shadow: var(--segmented-indicator-shadow);
+  transition: transform 0.2s ease, width 0.2s ease, opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.pagination[data-interactive=true] .pagination--variant-list .pagination-button:not([data-active=true]):hover {
-  background-color: var(--color-bg-alternative-cool-gray, #f0f1f5);
-  color: var(--color-label-strong, #5b5c60);
+.segmented-control-indicator[data-visible=false] {
+  opacity: 0;
 }
 
-.pagination--variant-list .pagination-button[data-active=true] {
-  background-color: var(--pagination-color-active-bg);
-  color: var(--pagination-color-active-label);
+.segmented-control-list {
+  display: flex;
+  column-gap: var(--segmented-gap);
+  row-gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  z-index: 1;
 }
 
-.pagination-number {
-  min-width: 1ch;
-  text-align: center;
+.segmented-control-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.pagination--variant-carousel {
-  gap: 5px;
-  min-height: var(--pagination-carousel-height);
+.segmented-control-button {
+  position: relative;
+  z-index: 1;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  min-width: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
+  transition: color 0.2s ease;
 }
 
-.pagination--variant-carousel[data-priority=secondary] {
-  --pagination-dot-active-bg: var(
-    --pagination-dot-active-bg-secondary,
-    var(--color-secondary-strong, #ccdeff)
-  );
+.segmented-control-button:where([data-disabled=true]) {
+  cursor: not-allowed;
+  opacity: var(--segmented-disabled-opacity);
 }
 
-.pagination--variant-carousel .pagination-button {
-  width: auto;
-  height: var(--pagination-carousel-height);
-  padding: 0;
+.segmented-control-button:where(:focus-visible) {
+  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
+  outline-offset: 2px;
 }
 
-.pagination--variant-carousel .pagination-dot {
-  display: inline-flex;
-  width: var(--pagination-carousel-dot-width);
-  height: var(--pagination-carousel-height);
-  border-radius: calc(var(--pagination-carousel-height) / 2);
-  background-color: var(--pagination-dot-bg);
-  transition: width 0.16s ease, background-color 0.16s ease;
+.segmented-control-button-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--segmented-item-font-size);
+  font-weight: var(--segmented-item-font-weight);
+  line-height: var(--segmented-item-line-height);
+  letter-spacing: 0.2px;
+  color: var(--segmented-label-color);
+  transition: color 0.2s ease;
 }
 
-.pagination--variant-carousel .pagination-button[data-active=true] .pagination-dot {
-  width: var(--pagination-carousel-active-width);
-  background-color: var(--pagination-dot-active-bg);
+.segmented-control-button:where([data-state=on]) .segmented-control-button-label {
+  color: var(--segmented-label-active-color);
 }
 
-.pagination--variant-count {
-  gap: 0;
-}
+/* Select tokens mapped to Input primary tokens for visual parity */
 
-.pagination--variant-count .pagination-button {
-  border-radius: var(--theme-radius-large-2, 16px);
-  padding-inline: var(--spacing-padding-4, 16px);
-  background-color: var(--pagination-count-bg);
-  color: var(--pagination-color-active-label);
-  font-weight: var(--font-label-medium-weight, 400);
-  line-height: 1.5;
-}
 
-.pagination--variant-count.pagination--count-size-small .pagination-button {
-  height: var(--theme-size-small-2, 24px);
-  font-size: var(--font-label-medium-size, 12px);
+.select {
+  display: flex;
+  width: var(--select-width);
+  flex: var(--select-flex);
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+  min-width: 0;
 }
 
-.pagination--variant-count.pagination--count-size-xsmall .pagination-button {
-  height: var(--theme-size-small-1, 20px);
-  font-size: var(--font-label-small-size, 11px);
+.select[data-width=auto] {
+  --select-width: auto;
+  --select-flex: 0 1 auto;
 }
 
-.pagination-count-current {
-  color: var(--pagination-color-active-label);
+.select[data-width=fill] {
+  --select-width: auto;
+  --select-flex: 1 1 0%;
 }
 
-.pagination-count-divider {
-  margin-inline: var(--spacing-gap-1, 4px);
-  color: var(--pagination-count-divider);
+.select[data-width=full],
+.select-block {
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
 }
 
-.pagination-count-total {
-  color: var(--pagination-count-total);
+.select[data-width=fit] {
+  --select-width: fit-content;
+  --select-flex: 0 0 auto;
 }
 
+.select[data-width=custom] {
+  --select-flex: 0 0 auto;
+}
 
-
-.radio {
-  display: inline-flex;
+.select-button {
+  --select-icon-fill: var(--select-icon-color-default);
+  display: flex;
+  width: 100%;
   align-items: center;
-  justify-content: center;
-  inline-size: var(--theme-radio-frame-size-medium);
-  block-size: var(--theme-radio-frame-size-medium);
-  border: none;
-  background-color: transparent;
-  border-radius: 0;
-  padding: 0;
+  gap: var(--select-primary-gap-inline);
+  min-height: var(--select-primary-height-medium);
+  padding: var(--select-primary-padding-block) var(--select-primary-padding-inline);
+  border: var(--select-primary-border-width-default) solid var(--select-primary-color-border);
+  border-radius: var(--select-primary-radius-medium);
+  background-color: var(--input-surface-color);
   cursor: pointer;
-  transition: box-shadow 0.15s ease, transform 0.15s ease;
-}
-.radio[data-size=large] {
-  inline-size: var(--theme-radio-frame-size-large);
-  block-size: var(--theme-radio-frame-size-large);
-}
-.radio[data-disabled=true] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.radio:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-radio-focus-ring);
-}
-
-.radio-indicator {
-  inline-size: var(--theme-radio-indicator-size-medium);
-  block-size: var(--theme-radio-indicator-size-medium);
-  border-radius: 9999px;
-  border: var(--theme-radio-indicator-border-width) solid var(--theme-radio-border-color);
-  transition: border-color 0.15s ease;
-}
-
-.radio[data-state=checked] .radio-indicator,
-.radio[data-size=medium][data-state=checked] .radio-indicator {
-  border-width: var(--theme-radio-indicator-border-width-selected-medium);
+  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+  text-align: left;
 }
-
-.radio[data-size=large] .radio-indicator {
-  inline-size: var(--theme-radio-indicator-size-large);
-  block-size: var(--theme-radio-indicator-size-large);
+.select-button[data-size=small] {
+  min-height: var(--select-primary-height-small);
+  border-radius: var(--select-primary-radius-small);
 }
-.radio[data-size=large][data-state=checked] .radio-indicator {
-  border-width: var(--theme-radio-indicator-border-width-selected-large);
+.select-button[data-size=large] {
+  min-height: var(--select-primary-height-large);
+  border-radius: var(--select-primary-radius-large);
 }
-
-.radio[data-state=checked] .radio-indicator {
-  border-color: var(--theme-radio-border-selected);
+.select-button[data-multiple=true] {
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
-
-.radio[data-disabled=true] .radio-indicator {
-  border-color: var(--theme-radio-border-disabled);
-  background-color: var(--theme-radio-surface-disabled);
-  opacity: 1;
+.select-button[data-priority=secondary] {
+  width: fit-content;
+  max-width: 100%;
+  min-height: auto;
+  border: none;
+  border-radius: var(--select-secondary-radius);
+  padding: var(--select-secondary-padding-block) var(--select-secondary-padding-inline);
+  background-color: transparent;
+  gap: var(--select-secondary-gap);
+  position: relative;
+  --select-icon-fill: currentColor;
+  transition: background-color 150ms ease, color 150ms ease;
 }
-
-.radio[data-disabled=true][data-state=checked] .radio-indicator {
-  border-color: var(--theme-radio-disabled-selected-fill);
-  opacity: var(--theme-radio-disabled-selected-opacity);
+.select-button[data-priority=secondary]:hover:not([data-state=disabled]) {
+  background-color: var(--select-color-surface-secondary-hover);
 }
-
-.radio-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-1);
-  color: var(--theme-radio-label-color);
+.select-button[data-priority=secondary]:active:not([data-state=disabled]) {
+  background-color: var(--select-color-surface-secondary-active);
 }
-
-.radio-field[data-disabled=true] {
-  color: var(--theme-radio-label-disabled);
+.select-button[data-priority=secondary][data-state=focused], .select-button[data-priority=secondary][data-open=true] {
+  background-color: var(--select-color-surface-secondary-hover);
 }
-
-.radio-label-wrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-gap-2);
-  cursor: pointer;
+.select-button[data-priority=secondary][data-state=focused]::after, .select-button[data-priority=secondary][data-open=true]::after {
+  height: var(--select-secondary-underline-width-focus);
+  background-color: var(--select-color-border-secondary-focused);
 }
-
-.radio-label-wrapper[data-disabled=true] {
+.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
+  color: var(--color-label-disabled);
   cursor: not-allowed;
 }
-
-.radio-label-text {
-  font-weight: var(--font-body-medium-weight);
-  user-select: none;
-}
-
-.radio-field[data-size=medium] .radio-label-text {
-  font-size: var(--font-body-xsmall-size);
-  line-height: var(--font-body-xsmall-line-height);
+.select-button[data-priority=table] {
+  border-radius: var(--select-table-radius);
+  border-color: var(--select-table-border-default-color);
+  background-color: var(--select-table-surface-color);
+  --select-icon-fill: var(--select-table-icon-color-default);
 }
-
-.radio-field[data-size=large] .radio-label-text {
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
+.select-button:not([data-priority=secondary])[data-state=focused], .select-button:not([data-priority=secondary])[data-open=true], .select-button:not([data-priority=secondary]):focus-visible {
+  border-color: var(--select-primary-color-border-focused);
+  border-width: var(--select-primary-border-width-focus);
+  --select-icon-fill: var(--select-icon-color-focused);
 }
-
-.radio-helper {
-  margin: 0;
-  font-size: var(--font-caption-large-size);
-  line-height: var(--font-caption-large-line-height);
-  color: var(--theme-radio-helper-color);
-  user-select: none;
+.select-button[data-priority=table][data-state=focused], .select-button[data-priority=table][data-open=true], .select-button[data-priority=table]:focus-visible {
+  border-color: var(--select-table-border-focus-color);
+  border-width: var(--select-primary-border-width-focus);
+  --select-icon-fill: var(--select-table-icon-color-focused);
 }
-
-.radio-field[data-disabled=true] .radio-helper {
-  color: var(--theme-radio-helper-disabled);
+.select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
+  border-color: var(--select-primary-color-border-disabled);
+  background-color: var(--select-primary-color-surface-disabled);
+  cursor: not-allowed;
+  --select-icon-fill: var(--select-icon-color-disabled);
 }
-
-.radio-card-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-3);
+.select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
+  border-color: transparent;
+  background-color: var(--select-color-surface-secondary-disabled);
 }
-
-.radio-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  inline-size: 100%;
-  gap: var(--spacing-gap-3);
-  padding: 16px 24px;
-  background-color: var(--theme-radio-card-background);
-  transition: background-color 0.15s ease;
-  cursor: pointer;
+.select-button[data-priority=secondary][data-state=disabled]::after, .select-button[data-priority=secondary]:disabled::after {
+  background-color: var(--select-color-border-secondary-disabled);
+  height: var(--select-secondary-underline-width-default);
 }
-.radio-card[data-disabled=true] {
+.select-button[data-priority=table][data-state=disabled], .select-button[data-priority=table]:disabled {
+  border-color: var(--select-table-border-disabled-color);
+  background-color: var(--select-table-surface-disabled-color);
   cursor: not-allowed;
-  opacity: 0.7;
+  --select-icon-fill: var(--select-table-icon-color-disabled);
 }
 
-.radio-card-content {
+.select-value {
+  flex: 1 1 auto;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-1);
-  min-inline-size: 0;
-}
-
-.radio-card-title-row {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-gap-1);
-  min-inline-size: 0;
+  gap: var(--spacing-gap-2);
 }
 
-.radio-card-title {
-  font-size: var(--font-heading-small-size);
-  line-height: var(--font-heading-small-line-height);
-  font-weight: var(--font-heading-small-weight);
-  letter-spacing: 0.2px;
-  color: var(--theme-radio-card-title-color);
+.select-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--font-body-medium-family);
+  font-size: var(--select-text-medium-size);
+  font-weight: var(--select-text-medium-weight);
+  line-height: var(--select-text-medium-line-height);
+  letter-spacing: var(--select-text-medium-letter-spacing);
+  color: var(--select-primary-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.radio-card-badge {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 6px;
-  font-size: var(--font-caption-medium-size);
-  line-height: var(--font-caption-medium-line-height);
-  border-radius: 6px;
-  background-color: var(--theme-radio-card-badge-background);
-  color: var(--theme-radio-card-badge-color);
+.select-button[data-priority=secondary] .select-label {
+  color: var(--select-secondary-color-text);
 }
-
-.radio-card[data-state=checked] .radio-card-title {
-  color: var(--theme-radio-card-badge-color);
+.select-button[data-priority=table] .select-label {
+  color: var(--select-table-color-text);
 }
-.radio-card[data-state=checked] .radio-card-badge {
-  display: inline-flex;
+.select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
+  color: var(--select-primary-color-text-focused);
 }
-
-.radio-card-description {
-  margin: 0;
-  font-size: var(--font-body-small-size);
-  line-height: var(--font-body-small-line-height);
-  color: var(--theme-radio-card-description-color);
+.select-button[data-state=disabled] .select-label {
+  color: var(--select-primary-color-text-disabled);
 }
-
-.radio-card-indicator-wrapper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.select-button[data-priority=secondary][data-state=disabled] .select-label {
+  color: var(--color-label-disabled);
 }
 
-.radio-card-indicator {
-  inline-size: var(--theme-radio-indicator-size-medium);
-  block-size: var(--theme-radio-indicator-size-medium);
-  border-radius: 9999px;
-  border: var(--theme-radio-indicator-border-width) solid var(--theme-radio-border-color);
-  transition: border-color 0.15s ease;
+.select-label-placeholder {
+  color: var(--select-primary-color-placeholder);
+}
+.select-button[data-priority=secondary] .select-label-placeholder {
+  color: var(--select-secondary-color-placeholder);
+}
+.select-button[data-priority=table] .select-label-placeholder {
+  color: var(--select-table-color-placeholder);
 }
 
-.radio-card[data-size=large] .radio-card-indicator {
-  inline-size: var(--theme-radio-indicator-size-large);
-  block-size: var(--theme-radio-indicator-size-large);
+.select-button[data-size=small] .select-label {
+  font-size: var(--select-text-small-size);
+  line-height: var(--select-text-small-line-height);
+  letter-spacing: var(--select-text-small-letter-spacing);
+  font-weight: var(--select-text-small-weight);
 }
 
-.radio-card[data-state=checked] .radio-card-indicator {
-  border-color: var(--theme-radio-border-selected);
-  border-width: var(--theme-radio-indicator-border-width-selected-medium);
+.select-button[data-priority=table][data-size=small] .select-label {
+  font-size: var(--select-table-text-small-size);
+  line-height: var(--select-table-text-small-line-height);
+  font-weight: var(--select-table-text-small-weight);
 }
 
-.radio-card[data-size=large][data-state=checked] .radio-card-indicator {
-  border-width: var(--theme-radio-indicator-border-width-selected-large);
+.select-button[data-size=large] .select-label {
+  font-size: var(--select-text-large-size);
+  line-height: var(--select-text-large-line-height);
+  letter-spacing: var(--select-text-large-letter-spacing);
+  font-weight: var(--select-text-large-weight);
 }
 
-.segmented-control {
-  --segmented-height: 34px;
-  --segmented-padding: 2px;
-  --segmented-radius: 16px;
-  --segmented-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
-  --segmented-indicator-bg: var(--color-common-100, #ffffff);
-  --segmented-indicator-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
-  --segmented-label-color: var(--color-label-neutral, #797e86);
-  --segmented-label-active-color: var(--color-label-strong, #181a1b);
-  --segmented-disabled-opacity: 0.4;
-  --segmented-gap: 2px;
-  --segmented-item-padding-x: 22px;
-  --segmented-item-padding-y: 4px;
-  --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
-  --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
-  --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  padding: var(--segmented-padding);
-  border-radius: var(--segmented-radius);
-  background: var(--segmented-bg);
-  width: fit-content;
-  min-height: var(--segmented-height);
-  isolation: isolate;
-  overflow: hidden;
+.select-button[data-priority=table][data-size=medium] .select-label {
+  font-size: var(--select-table-text-medium-size);
+  line-height: var(--select-table-text-medium-line-height);
+  font-weight: var(--select-table-text-medium-weight);
 }
 
-.segmented-control:where([data-keep-selected=true]) {
-  --segmented-disabled-opacity: 0.3;
+.select-button[data-priority=table][data-size=large] .select-label {
+  font-size: var(--select-table-text-large-size);
+  line-height: var(--select-table-text-large-line-height);
+  font-weight: var(--select-table-text-large-weight);
 }
 
-.segmented-control-indicator {
-  position: absolute;
-  top: var(--segmented-padding);
-  bottom: var(--segmented-padding);
-  left: 0;
-  width: 0px;
-  height: calc(100% - var(--segmented-padding) * 2);
-  margin: 0;
-  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  background: var(--segmented-indicator-bg);
-  box-shadow: var(--segmented-indicator-shadow);
-  transition: transform 0.2s ease, width 0.2s ease, opacity 0.2s ease;
-  pointer-events: none;
-  z-index: 0;
+.select-button[data-priority=secondary][data-size=large] .select-label {
+  font-weight: 600;
 }
 
-.segmented-control-indicator[data-visible=false] {
-  opacity: 0;
+.select-tags {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--select-multiple-chip-gap);
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
 }
 
-.segmented-control-list {
+.select-tag {
   display: flex;
-  column-gap: var(--segmented-gap);
-  row-gap: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: relative;
-  z-index: 1;
+  align-items: center;
+  gap: var(--select-multiple-chip-gap);
+  padding: var(--select-multiple-chip-padding-block) var(--select-multiple-chip-padding-inline);
+  border-radius: var(--select-multiple-chip-radius);
+  border: 1px solid var(--select-multiple-chip-border-color, var(--color-border-standard-cool-gray));
+  background-color: var(--select-multiple-chip-surface);
+  color: var(--select-multiple-chip-color);
+  font-size: var(--select-multiple-chip-font-size);
+  line-height: var(--select-multiple-chip-line-height);
+  font-weight: var(--select-multiple-chip-font-weight);
+  white-space: nowrap;
+  min-height: var(--select-multiple-chip-height);
+}
+.select-tag:focus-within {
+  border-color: var(--select-color-border-secondary-focused);
+}
+.select-tag[data-removable=true] {
+  padding-right: var(--spacing-padding-2);
 }
 
-.segmented-control-item {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.select-tag[data-kind=summary],
+.select-tag-summary {
+  background-color: var(--select-multiple-chip-summary-surface);
+  border-color: var(--select-multiple-chip-summary-border-color);
+  color: var(--select-multiple-chip-summary-color);
+  padding: var(--select-multiple-chip-summary-padding-block) var(--select-multiple-chip-summary-padding-inline);
+  border-radius: var(--select-multiple-chip-summary-radius);
+  font-size: var(--select-multiple-chip-summary-font-size);
+  line-height: var(--select-multiple-chip-summary-line-height);
+  font-weight: var(--select-multiple-chip-summary-font-weight);
+  min-height: auto;
 }
 
-.segmented-control-button {
-  position: relative;
-  z-index: 1;
+.select-tag-label {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: none;
-  background: transparent;
-  cursor: pointer;
+  gap: var(--spacing-gap-1);
   min-width: 0;
-  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
-  transition: color 0.2s ease;
 }
 
-.segmented-control-button:where([data-disabled=true]) {
-  cursor: not-allowed;
-  opacity: var(--segmented-disabled-opacity);
+.select-tag-suffix {
+  color: var(--select-multiple-chip-suffix-color);
+  font-size: inherit;
+  line-height: inherit;
 }
 
-.segmented-control-button:where(:focus-visible) {
-  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
-  outline-offset: 2px;
+.select-tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--select-icon-size-small);
+  height: var(--select-icon-size-small);
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: var(--select-multiple-chip-remove-color);
+  flex-shrink: 0;
+  border-radius: 9999px;
+  transition: color 150ms ease;
+}
+.select-tag-remove:focus-visible {
+  outline: 0.2rem solid var(--color-border-strong);
+  outline-offset: 0.1rem;
+}
+.select-tag-remove:hover {
+  color: var(--select-multiple-chip-remove-hover-color);
+}
+.select-tag-remove svg {
+  width: 100%;
+  height: 100%;
+}
+.select-tag-remove svg path {
+  fill: currentColor;
 }
 
-.segmented-control-button-label {
+.select-icon {
+  flex-shrink: 0;
+  width: var(--select-icon-size-medium);
+  height: var(--select-icon-size-medium);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--segmented-item-font-size);
-  font-weight: var(--segmented-item-font-weight);
-  line-height: var(--segmented-item-line-height);
-  letter-spacing: 0.2px;
-  color: var(--segmented-label-color);
-  transition: color 0.2s ease;
+  margin-left: auto;
 }
-
-.segmented-control-button:where([data-state=on]) .segmented-control-button-label {
-  color: var(--segmented-label-active-color);
+.select-icon[data-size=small] {
+  width: var(--select-icon-size-small);
+  height: var(--select-icon-size-small);
+}
+.select-icon[data-size=large] {
+  width: var(--select-icon-size-large);
+  height: var(--select-icon-size-large);
+}
+[data-open=true] .select-icon {
+  transform: rotate(180deg);
+}
+.select-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.select-icon svg path {
+  fill: var(--select-icon-fill);
 }
 
 .tab-root {
@@ -3905,22 +4031,52 @@ figure.chip {
   line-height: inherit;
 }
 
-.table-cell-content[data-align-x=left],
-.table-cell-content[data-align=left] {
+.table-cell-content[data-align-x=left] {
   justify-content: flex-start;
-  text-align: left;
 }
 
-.table-cell-content[data-align-x=center],
-.table-cell-content[data-align=center] {
+.table-cell-content[data-align-x=center] {
   justify-content: center;
-  text-align: center;
 }
 
-.table-cell-content[data-align-x=right],
-.table-cell-content[data-align=right] {
+.table-cell-content[data-align-x=right] {
   justify-content: flex-end;
-  text-align: right;
+}
+
+.table-cell-content[data-align-x=normal] {
+  justify-content: normal;
+}
+
+.table-cell-content[data-align-x=start] {
+  justify-content: start;
+}
+
+.table-cell-content[data-align-x=end] {
+  justify-content: end;
+}
+
+.table-cell-content[data-align-x=flex-start] {
+  justify-content: flex-start;
+}
+
+.table-cell-content[data-align-x=flex-end] {
+  justify-content: flex-end;
+}
+
+.table-cell-content[data-align-x=space-between] {
+  justify-content: space-between;
+}
+
+.table-cell-content[data-align-x=space-around] {
+  justify-content: space-around;
+}
+
+.table-cell-content[data-align-x=space-evenly] {
+  justify-content: space-evenly;
+}
+
+.table-cell-content[data-align-x=stretch] {
+  justify-content: stretch;
 }
 
 .table-cell-content[data-align-y=top] {
@@ -3935,6 +4091,42 @@ figure.chip {
   align-items: flex-end;
 }
 
+.table-cell-content[data-align-y=normal] {
+  align-items: normal;
+}
+
+.table-cell-content[data-align-y=stretch] {
+  align-items: stretch;
+}
+
+.table-cell-content[data-align-y=start] {
+  align-items: start;
+}
+
+.table-cell-content[data-align-y=end] {
+  align-items: end;
+}
+
+.table-cell-content[data-align-y=flex-start] {
+  align-items: flex-start;
+}
+
+.table-cell-content[data-align-y=flex-end] {
+  align-items: flex-end;
+}
+
+.table-cell-content[data-align-y=self-start] {
+  align-items: self-start;
+}
+
+.table-cell-content[data-align-y=self-end] {
+  align-items: self-end;
+}
+
+.table-cell-content[data-align-y=baseline] {
+  align-items: baseline;
+}
+
 .table-cell.table-head-cell .table-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
@@ -3974,15 +4166,51 @@ figure.chip {
   line-height: var(--table-td-text-line-height);
 }
 
-/* Divider 토큰도 전역 :root 범위에 선언한다. */
 
 
-.divider {
-  width: var(--divider-width);
-  height: var(--divider-height);
-  background-color: var(--divider-color);
-  margin: 0 var(--divider-margin);
-  vertical-align: middle;
-  align-self: center;
-  font-size: 0;
+.tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-template-trigger {
+  display: inline-flex;
+  width: var(--tooltip-trigger-icon-size);
+  height: var(--tooltip-trigger-icon-size);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--tooltip-trigger-icon-color);
+  cursor: pointer;
+}
+
+.tooltip-template-trigger svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.tooltip-message {
+  max-width: min(20rem, 100vw - 1.5rem);
+  box-sizing: border-box;
+  border-radius: var(--tooltip-message-radius);
+  background-color: var(--tooltip-message-background);
+  padding: var(--tooltip-message-padding-block) var(--tooltip-message-padding-inline);
+}
+
+.tooltip-message-text {
+  display: block;
+  color: var(--tooltip-message-foreground);
+  font-size: var(--tooltip-message-font-size);
+  line-height: var(--tooltip-message-line-height);
+  letter-spacing: var(--tooltip-message-letter-spacing);
+  font-weight: var(--tooltip-message-font-weight);
+  white-space: normal;
+}
+
+.tooltip-message-arrow {
+  fill: var(--tooltip-message-background);
 }