@nurihaus/web-design-system 3.0.0 → 3.0.3

package/dist/components.css

@@ -0,0 +1,1984 @@
+/* 유틸리티 + 컴포넌트 스타일. 토큰·글꼴·리셋은 없다.
+   글꼴을 앱이 직접 관리할 때 tokens.css 와 함께 가져온다. 컴포넌트 글자는 앱의 글꼴을 물려받는다. */
+
+/* 컴포넌트 글자는 앱의 글꼴을 물려받는다. <button> 처럼 브라우저가 글꼴을 따로 주는 요소도 포함한다.
+   :where 로 우선순위를 0 으로 둔다. styles.css 에서는 token/font-face.css 의 .nuri-theme 글꼴이 이긴다. */
+
+:where(.nuri-theme) {
+  font-family: inherit;
+}
+
+/* Utility */
+
+.nuri-display-flex {
+  display: flex;
+}
+
+.nuri-display-inline-flex {
+  display: inline-flex;
+}
+
+.nuri-display-block {
+  display: block;
+}
+
+.nuri-display-inline-block {
+  display: inline-block;
+}
+
+.nuri-display-grid {
+  display: grid;
+}
+
+.nuri-display-inline-grid {
+  display: inline-grid;
+}
+
+.nuri-display-contents {
+  display: contents;
+}
+
+.nuri-display-none {
+  display: none;
+}
+
+.nuri-position-static {
+  position: static;
+}
+
+.nuri-position-relative {
+  position: relative;
+}
+
+.nuri-position-absolute {
+  position: absolute;
+}
+
+.nuri-position-fixed {
+  position: fixed;
+}
+
+.nuri-position-sticky {
+  position: sticky;
+}
+
+.nuri-flex-row {
+  flex-direction: row;
+}
+
+.nuri-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.nuri-flex-column {
+  flex-direction: column;
+}
+
+.nuri-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.nuri-ai-start {
+  align-items: flex-start;
+}
+
+.nuri-ai-center {
+  align-items: center;
+}
+
+.nuri-ai-end {
+  align-items: flex-end;
+}
+
+.nuri-ai-stretch {
+  align-items: stretch;
+}
+
+.nuri-ai-baseline {
+  align-items: baseline;
+}
+
+.nuri-justify-content-start {
+  justify-content: flex-start;
+}
+
+.nuri-justify-content-center {
+  justify-content: center;
+}
+
+.nuri-justify-content-end {
+  justify-content: flex-end;
+}
+
+.nuri-justify-content-between {
+  justify-content: space-between;
+}
+
+.nuri-justify-content-around {
+  justify-content: space-around;
+}
+
+.nuri-justify-content-evenly {
+  justify-content: space-evenly;
+}
+
+.nuri-overflow-visible {
+  overflow: visible;
+}
+
+.nuri-overflow-hidden {
+  overflow: hidden;
+}
+
+.nuri-overflow-scroll {
+  overflow: scroll;
+}
+
+.nuri-overflow-auto {
+  overflow: auto;
+}
+
+.nuri-overflow-x-visible {
+  overflow-x: visible;
+}
+
+.nuri-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.nuri-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.nuri-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.nuri-overflow-y-visible {
+  overflow-y: visible;
+}
+
+.nuri-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.nuri-overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.nuri-overflow-y-auto {
+  overflow-y: auto;
+}
+
+/* Component */
+
+.base-avatar {
+  border-radius: 50%;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  overflow: hidden;
+}
+
+.base-avatar.avatar-image {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+.base-avatar .avatar-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+:is(.base-avatar .avatar-fallback) svg {
+      width: 100%;
+      height: 100%;
+    }
+
+/***************************************************************************************************
+*                                                                                                 *
+* avatar                                                                                          *
+*                                                                                                 *
+***************************************************************************************************/
+
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar.size-xl {
+    width: var(--avatar-size-xl);
+    height: var(--avatar-size-xl);
+    border: var(--hairline) solid var(--color-grey-scale-200);
+  }
+
+.avatar.size-l {
+    width: var(--avatar-size-l);
+    height: var(--avatar-size-l);
+    border: var(--hairline) solid var(--color-grey-scale-200);
+  }
+
+.avatar.size-m {
+    width: var(--avatar-size-m);
+    height: var(--avatar-size-m);
+    border: var(--hairline) solid var(--color-grey-scale-200);
+  }
+
+.avatar.size-s {
+    width: var(--avatar-size-s);
+    height: var(--avatar-size-s);
+    border: var(--hairline) solid var(--color-grey-scale-200);
+  }
+
+.avatar-badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-4);
+  border-radius: var(--radius-full);
+  border: var(--hairline) solid var(--color-grey-scale-200);
+}
+
+.avatar-badge.size-xl {
+    width: var(--avatar-badge-size-xl);
+    height: var(--avatar-badge-size-xl);
+  }
+
+.avatar-badge.size-l {
+    width: var(--avatar-badge-size-l);
+    height: var(--avatar-badge-size-l);
+  }
+
+.avatar-badge.size-m {
+    width: var(--avatar-badge-size-m);
+    height: var(--avatar-badge-size-m);
+  }
+
+.avatar-badge.size-s {
+    width: var(--avatar-badge-size-s);
+    height: var(--avatar-badge-size-s);
+  }
+
+.base-badge {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  border-radius: var(--radius-full);
+}
+
+.base-badge.size-xl {
+    height: var(--label-height-xl);
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.base-badge.size-l {
+    height: var(--label-height-l);
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.base-badge.size-m {
+    height: var(--label-height-m);
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.base-badge.size-s {
+    height: var(--label-height-s);
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-bold);
+  }
+
+.base-badge.size-xs {
+    height: var(--label-height-xs);
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-bold);
+  }
+
+.base-badge.icon-text-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0 var(--spacing-20);
+  }
+
+/***************************************************************************************************
+*                                                                                                 *
+* option-badge                                                                                    *
+*                                                                                                 *
+***************************************************************************************************/
+
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-width: var(--hairline);
+  border-style: solid;
+}
+
+/***************************************************************************************************
+*                                                                                                 *
+* option-badge                                                                                    *
+*                                                                                                 *
+***************************************************************************************************/
+
+.icon-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-4);
+
+  border-width: var(--hairline);
+  border-style: solid;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * icon-text-option-badge                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.icon-text-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 var(--spacing-20);
+}
+
+.icon-text-option  > span {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * variant                                                                                         *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.variant-neutral:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border-color: transparent;
+  }
+
+.variant-primary:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-purple-900);
+    background-color: var(--color-purple-50);
+    border-color: transparent;
+  }
+
+.variant-danger:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-accent-red-700);
+    background-color: var(--color-accent-red-50);
+    border-color: transparent;
+  }
+
+/* icon-text-option 은 테두리가 없는 모양이라 두께·스타일까지 여기서 준다. */
+
+.variant-outlined:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border: var(--hairline) solid var(--color-grey-scale-300);
+  }
+
+.base-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-10);
+  border-radius: var(--radius-6);
+  border: none;
+  cursor: pointer;
+}
+
+.base-button:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * cta-button                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.cta-button {
+  border-radius: var(--radius-6);
+}
+
+.cta-button.variant-primary {
+    background-color: var(--color-purple-900);
+    border: var(--hairline) solid var(--color-purple-900);
+    color: var(--color-white);
+  }
+
+.cta-button.variant-primary:not(:disabled):hover {
+      background-color: var(--color-purple-900);
+      border-color: var(--color-purple-900);
+      color: var(--color-white);
+    }
+
+.cta-button.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+  }
+
+.cta-button.variant-secondary:not(:disabled):hover {
+      background-color: var(--color-purple-100);
+      border-color: var(--color-purple-100);
+      color: var(--color-purple-900);
+    }
+
+.cta-button.variant-ghost {
+    background-color: var(--color-white);
+    border: var(--hairline) solid var(--color-grey-scale-300);
+    color: var(--color-purple-900);
+  }
+
+.cta-button.variant-ghost:not(:disabled):hover {
+      background-color: var(--color-white);
+      border-color: var(--color-purple-900);
+      color: var(--color-purple-900);
+    }
+
+.cta-button.variant-neutral {
+    background-color: var(--color-white);
+    color: var(--color-purple-900);
+  }
+
+.cta-button.variant-neutral:not(:disabled):hover {
+      background-color: var(--color-grey-scale-100);
+      border: var(--hairline) solid var(--color-grey-scale-100);
+      color: var(--color-purple-900);
+    }
+
+.cta-button.variant-confirm {
+    background-color: var(--color-accent-red-500);
+    border: var(--hairline) solid var(--color-accent-red-500);
+    color: var(--color-white);
+  }
+
+.cta-button.variant-confirm:not(:disabled):hover {
+      background-color: var(--color-accent-red-700);
+      border-color: var(--color-accent-red-700);
+      color: var(--color-white);
+    }
+
+.cta-button.variant-outlined {
+    background-color: var(--color-white);
+    border: var(--hairline) solid var(--color-accent-red-700);
+    color: var(--color-accent-red-700);
+  }
+
+.cta-button.size-xl {
+    height: var(--control-height-xl);
+
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+    font-weight: var(--font-weight-bold);
+  }
+
+.cta-button.size-l {
+    height: var(--control-height-l);
+
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    font-weight: var(--font-weight-bold);
+  }
+
+.cta-button.size-m {
+    height: var(--control-height-m);
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.cta-button.size-s {
+    height: var(--control-height-s);
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.cta-button.size-xs {
+    height: var(--control-height-xs);
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.cta-button:disabled {
+    background-color: var(--color-grey-scale-200);
+    color: var(--color-white);
+    cursor: not-allowed;
+    border: none;
+  }
+
+.base-check-box.label {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * check-box                                                                                       *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.check-box {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-10);
+
+  background-color: transparent;
+  border: none;
+}
+
+.check-box-indicator.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-4);
+    border: var(--checkbox-border) solid var(--color-purple-900);
+  }
+
+.check-box-indicator {
+
+  width: 100%;
+  height: 100%;
+}
+
+.check-box-indicator.size-l {
+    width: var(--checkbox-size-l);
+    height: var(--checkbox-size-l);
+  }
+
+.check-box-indicator.size-m {
+    width: var(--checkbox-size-m);
+    height: var(--checkbox-size-m);
+  }
+
+.check-box-indicator.size-s {
+    width: var(--checkbox-size-s);
+    height: var(--checkbox-size-s);
+  }
+
+.check-box-indicator[data-state='unchecked'] {
+    background-color: var(--color-white);
+  }
+
+.check-box-indicator[data-state='checked'] {
+    background-color: var(--color-purple-900);
+  }
+
+.check-box-indicator[data-disabled='true'] {
+    border: none;
+    border-radius: var(--radius-4);
+    background-color: var(--color-grey-scale-300);
+  }
+
+.base-collapsible-menu.trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-10);
+    width: 100%;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * collapsible-menu                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.collapsible-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.collapsible-menu.size-s .collapsible-menu-row {
+    height: var(--menu-row-height-s);
+  }
+
+.collapsible-menu.size-m .collapsible-menu-row {
+    height: var(--menu-row-height-m);
+  }
+
+.collapsible-menu-row {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-10);
+
+  width: 100%;
+  padding: 0 var(--spacing-12);
+  /* figma 토큰에 --radius-8 없음. 디자이너 확인 전까지 숫자 유지 */
+  border-radius: 8px; /* raw-px */
+  cursor: pointer;
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--collapsible-menu-text-color, var(--color-grey-scale-700));
+}
+
+.collapsible-menu-row:hover {
+    background-color: var(--collapsible-menu-hover-bg-color, var(--color-grey-scale-100));
+  }
+
+.collapsible-menu-row.is-active {
+    background-color: var(--collapsible-menu-active-bg-color, var(--color-grey-scale-100));
+    color: var(--collapsible-menu-active-text-color, var(--color-purple-800));
+    font-weight: var(--collapsible-menu-active-font-weight, 600);
+  }
+
+.collapsible-menu-row:disabled,.collapsible-menu-row[aria-disabled='true'] {
+    cursor: not-allowed;
+    color: var(--collapsible-menu-disabled-text-color, var(--color-grey-scale-400));
+  }
+
+.collapsible-menu-left {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-10);
+  min-width: 0;
+}
+
+.collapsible-menu-left > * {
+  min-width: 0;
+}
+
+.collapsible-menu-chevron {
+  width: var(--icon-size-s);
+  height: var(--icon-size-s);
+  color: var(--color-grey-scale-500);
+  transition: transform var(--motion-fast) var(--motion-ease);
+}
+
+.base-collapsible-menu.trigger[data-state='open'] .collapsible-menu-chevron {
+  transform: rotate(180deg);
+}
+
+.collapsible-menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-4);
+}
+
+/* placeholder 로 넘기는 span 의 색. base-drop-down 이 기본 placeholder 에 붙인다. */
+
+.nuri-placeholder {
+  color: var(--color-grey-scale-400);
+}
+
+.base-drop-down.trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-10);
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * drop-down-single                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.drop-down-single-trigger.size-s {
+    height: var(--control-height-s);
+  }
+
+.drop-down-single-trigger.size-m {
+    height: var(--control-height-m);
+  }
+
+.drop-down-single-trigger {
+
+  border: var(--hairline) solid var(--color-grey-scale-300);
+  border-radius: var(--radius-4);
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 0 var(--spacing-14);
+  background-color: var(--color-white);
+}
+
+.drop-down-single-trigger:focus {
+    border-color: var(--color-purple-900);
+  }
+
+.drop-down-single-trigger[data-placeholder] .drop-down-single-icon {
+      color: var(--color-grey-scale-400);
+    }
+
+.drop-down-single-trigger[data-placeholder] svg {
+      color: var(--color-grey-scale-400);
+    }
+
+.drop-down-single-trigger:not([data-placeholder]) .drop-down-single-icon {
+      color: var(--color-black);
+    }
+
+.drop-down-single-trigger:not([data-placeholder]) svg {
+      color: var(--color-black);
+    }
+
+.drop-down-single-trigger[data-state='open'] .rotate {
+      transform: rotate(180deg);
+      transform-origin: 50% 50%;
+      transition: transform var(--motion-fast) var(--motion-ease);
+      will-change: transform;
+    }
+
+.drop-down-single-label {
+  gap: var(--spacing-10);
+}
+
+.drop-down-single-value {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+
+  text-align: left;
+}
+
+.drop-down-single-value ::-moz-placeholder {
+    color: var(--color-grey-scale-400);
+  }
+
+.drop-down-single-value ::placeholder {
+    color: var(--color-grey-scale-400);
+  }
+
+.drop-down-single-content {
+  z-index: var(--z-popover);
+  min-width: var(--radix-select-trigger-width);
+  overflow: hidden;
+  box-shadow: var(--shadow-popover);
+  border-radius: var(--radius-6);
+}
+
+.drop-down-single-item {
+  padding: var(--spacing-14);
+  background-color: var(--color-white);
+  outline: none;
+  height: var(--drop-down-item-height);
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+
+  cursor: pointer;
+}
+
+.drop-down-single-item[data-highlighted] {
+    background-color: var(--color-purple-50);
+    outline: none;
+  }
+
+.drop-down-single-item:disabled {
+    background-color: var(--color-grey-scale-100);
+    color: var(--color-grey-scale-400);
+    cursor: not-allowed;
+  }
+
+.base-text:where(.xsm) {
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+  }
+
+.base-text:where(.sm) {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+.base-text:where(.base) {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+
+.base-text:where(.lg) {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+
+.base-text:where(.xl) {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+  }
+
+.base-text:where(.t-2xl) {
+    font-size: var(--font-size-2xl);
+    line-height: var(--line-height-2xl);
+  }
+
+.base-text:where(.t-3xl) {
+    font-size: var(--font-size-3xl);
+    line-height: var(--line-height-3xl);
+  }
+
+.base-text:where(.t-4xl) {
+    font-size: var(--font-size-4xl);
+    line-height: var(--line-height-4xl);
+  }
+
+.base-text:where(.t-5xl) {
+    font-size: var(--font-size-5xl);
+    line-height: var(--line-height-5xl);
+  }
+
+.base-text:where(.t-6xl) {
+    font-size: var(--font-size-6xl);
+    line-height: var(--line-height-6xl);
+  }
+
+.base-text:where(.regular) {
+    font-weight: var(--font-weight-regular);
+  }
+
+.base-text:where(.medium) {
+    font-weight: var(--font-weight-medium);
+  }
+
+.base-text:where(.semibold) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+.base-text:where(.bold) {
+    font-weight: var(--font-weight-bold);
+  }
+
+.base-text:where(.extrabold) {
+    font-weight: var(--font-weight-extrabold);
+  }
+
+.base-text.textAlign-left[class*='textAlign-'] {
+      text-align: left;
+    }
+
+.base-text.textAlign-center[class*='textAlign-'] {
+      text-align: center;
+    }
+
+.base-text.textDecoration-underline[class*='textDecoration-'] {
+      text-decoration: underline;
+    }
+
+.base-text.textDecoration-none[class*='textDecoration-'] {
+      text-decoration: none;
+    }
+
+.base-text.textDecoration-lineThrough[class*='textDecoration-'] {
+      text-decoration: line-through;
+    }
+
+.base-text.textDecoration-overline[class*='textDecoration-'] {
+      text-decoration: overline;
+    }
+
+.base-text.textDecoration-blink[class*='textDecoration-'] {
+      text-decoration: blink;
+    }
+
+.base-text.wordBreak-normal[class*='wordBreak-'] {
+      word-break: normal;
+    }
+
+.base-text.wordBreak-breakAll[class*='wordBreak-'] {
+      word-break: break-all;
+    }
+
+.base-text.wordBreak-breakWord[class*='wordBreak-'] {
+      word-break: break-word;
+    }
+
+.base-text.wordBreak-keepAll[class*='wordBreak-'] {
+      word-break: keep-all;
+    }
+
+.base-text.wordBreak-keepWord[class*='wordBreak-'] {
+      word-break: keep-word;
+    }
+
+.base-text.wordBreak-breakSpaces[class*='wordBreak-'] {
+      word-break: break-spaces;
+    }
+
+.base-text.wordBreak-all[class*='wordBreak-'] {
+      word-break: all;
+    }
+
+.base-text.whiteSpace-normal[class*='whiteSpace-'] {
+      white-space: normal;
+    }
+
+.base-text.whiteSpace-nowrap[class*='whiteSpace-'] {
+      white-space: nowrap;
+    }
+
+.base-text.whiteSpace-pre[class*='whiteSpace-'] {
+      white-space: pre;
+    }
+
+.base-text.whiteSpace-preLine[class*='whiteSpace-'] {
+      white-space: pre-line;
+    }
+
+.base-text.whiteSpace-preWrap[class*='whiteSpace-'] {
+      white-space: pre-wrap;
+    }
+
+.base-text.color-black[class*='color-'] {
+      color: var(--color-black);
+    }
+
+.base-text.color-white[class*='color-'] {
+      color: var(--color-white);
+    }
+
+.base-text.color-grey-scale-50[class*='color-'] {
+      color: var(--color-grey-scale-50);
+    }
+
+.base-text.color-grey-scale-100[class*='color-'] {
+      color: var(--color-grey-scale-100);
+    }
+
+.base-text.color-grey-scale-200[class*='color-'] {
+      color: var(--color-grey-scale-200);
+    }
+
+.base-text.color-grey-scale-300[class*='color-'] {
+      color: var(--color-grey-scale-300);
+    }
+
+.base-text.color-grey-scale-400[class*='color-'] {
+      color: var(--color-grey-scale-400);
+    }
+
+.base-text.color-grey-scale-500[class*='color-'] {
+      color: var(--color-grey-scale-500);
+    }
+
+.base-text.color-grey-scale-600[class*='color-'] {
+      color: var(--color-grey-scale-600);
+    }
+
+.base-text.color-grey-scale-700[class*='color-'] {
+      color: var(--color-grey-scale-700);
+    }
+
+.base-text.color-grey-scale-800[class*='color-'] {
+      color: var(--color-grey-scale-800);
+    }
+
+.base-text.color-grey-scale-900[class*='color-'] {
+      color: var(--color-grey-scale-900);
+    }
+
+.base-text.color-purple-50[class*='color-'] {
+      color: var(--color-purple-50);
+    }
+
+.base-text.color-purple-100[class*='color-'] {
+      color: var(--color-purple-100);
+    }
+
+.base-text.color-purple-200[class*='color-'] {
+      color: var(--color-purple-200);
+    }
+
+.base-text.color-purple-300[class*='color-'] {
+      color: var(--color-purple-300);
+    }
+
+.base-text.color-purple-400[class*='color-'] {
+      color: var(--color-purple-400);
+    }
+
+.base-text.color-purple-500[class*='color-'] {
+      color: var(--color-purple-500);
+    }
+
+.base-text.color-purple-600[class*='color-'] {
+      color: var(--color-purple-600);
+    }
+
+.base-text.color-purple-700[class*='color-'] {
+      color: var(--color-purple-700);
+    }
+
+.base-text.color-purple-800[class*='color-'] {
+      color: var(--color-purple-800);
+    }
+
+.base-text.color-purple-900[class*='color-'] {
+      color: var(--color-purple-900);
+    }
+
+.base-text.color-accent-red-50[class*='color-'] {
+      color: var(--color-accent-red-50);
+    }
+
+.base-text.color-accent-red-100[class*='color-'] {
+      color: var(--color-accent-red-100);
+    }
+
+.base-text.color-accent-red-200[class*='color-'] {
+      color: var(--color-accent-red-200);
+    }
+
+.base-text.color-accent-red-300[class*='color-'] {
+      color: var(--color-accent-red-300);
+    }
+
+.base-text.color-accent-red-400[class*='color-'] {
+      color: var(--color-accent-red-400);
+    }
+
+.base-text.color-accent-red-500[class*='color-'] {
+      color: var(--color-accent-red-500);
+    }
+
+.base-text.color-accent-red-600[class*='color-'] {
+      color: var(--color-accent-red-600);
+    }
+
+.base-text.color-accent-red-700[class*='color-'] {
+      color: var(--color-accent-red-700);
+    }
+
+.base-text.color-accent-red-800[class*='color-'] {
+      color: var(--color-accent-red-800);
+    }
+
+.base-text.color-accent-red-900[class*='color-'] {
+      color: var(--color-accent-red-900);
+    }
+
+.base-text.color-accent-pink-50[class*='color-'] {
+      color: var(--color-accent-pink-50);
+    }
+
+.base-text.color-accent-pink-100[class*='color-'] {
+      color: var(--color-accent-pink-100);
+    }
+
+.base-text.color-accent-pink-200[class*='color-'] {
+      color: var(--color-accent-pink-200);
+    }
+
+.base-text.color-accent-pink-300[class*='color-'] {
+      color: var(--color-accent-pink-300);
+    }
+
+.base-text.color-accent-pink-400[class*='color-'] {
+      color: var(--color-accent-pink-400);
+    }
+
+.base-text.color-accent-pink-500[class*='color-'] {
+      color: var(--color-accent-pink-500);
+    }
+
+.base-text.color-accent-pink-600[class*='color-'] {
+      color: var(--color-accent-pink-600);
+    }
+
+.base-text.color-accent-pink-700[class*='color-'] {
+      color: var(--color-accent-pink-700);
+    }
+
+.base-text.color-accent-pink-800[class*='color-'] {
+      color: var(--color-accent-pink-800);
+    }
+
+.base-text.color-accent-pink-900[class*='color-'] {
+      color: var(--color-accent-pink-900);
+    }
+
+.base-text.color-accent-magenta-50[class*='color-'] {
+      color: var(--color-accent-magenta-50);
+    }
+
+.base-text.color-accent-magenta-100[class*='color-'] {
+      color: var(--color-accent-magenta-100);
+    }
+
+.base-text.color-accent-magenta-200[class*='color-'] {
+      color: var(--color-accent-magenta-200);
+    }
+
+.base-text.color-accent-magenta-300[class*='color-'] {
+      color: var(--color-accent-magenta-300);
+    }
+
+.base-text.color-accent-magenta-400[class*='color-'] {
+      color: var(--color-accent-magenta-400);
+    }
+
+.base-text.color-accent-magenta-500[class*='color-'] {
+      color: var(--color-accent-magenta-500);
+    }
+
+.base-text.color-accent-magenta-600[class*='color-'] {
+      color: var(--color-accent-magenta-600);
+    }
+
+.base-text.color-accent-magenta-700[class*='color-'] {
+      color: var(--color-accent-magenta-700);
+    }
+
+.base-text.color-accent-magenta-800[class*='color-'] {
+      color: var(--color-accent-magenta-800);
+    }
+
+.base-text.color-accent-magenta-900[class*='color-'] {
+      color: var(--color-accent-magenta-900);
+    }
+
+.base-text.color-accent-blue-50[class*='color-'] {
+      color: var(--color-accent-blue-50);
+    }
+
+.base-text.color-accent-blue-100[class*='color-'] {
+      color: var(--color-accent-blue-100);
+    }
+
+.base-text.color-accent-blue-200[class*='color-'] {
+      color: var(--color-accent-blue-200);
+    }
+
+.base-text.color-accent-blue-300[class*='color-'] {
+      color: var(--color-accent-blue-300);
+    }
+
+.base-text.color-accent-blue-400[class*='color-'] {
+      color: var(--color-accent-blue-400);
+    }
+
+.base-text.color-accent-blue-500[class*='color-'] {
+      color: var(--color-accent-blue-500);
+    }
+
+.base-text.color-accent-blue-600[class*='color-'] {
+      color: var(--color-accent-blue-600);
+    }
+
+.base-text.color-accent-blue-700[class*='color-'] {
+      color: var(--color-accent-blue-700);
+    }
+
+.base-text.color-accent-blue-800[class*='color-'] {
+      color: var(--color-accent-blue-800);
+    }
+
+.base-text.color-accent-blue-900[class*='color-'] {
+      color: var(--color-accent-blue-900);
+    }
+
+.base-text.color-accent-mint-50[class*='color-'] {
+      color: var(--color-accent-mint-50);
+    }
+
+.base-text.color-accent-mint-100[class*='color-'] {
+      color: var(--color-accent-mint-100);
+    }
+
+.base-text.color-accent-mint-200[class*='color-'] {
+      color: var(--color-accent-mint-200);
+    }
+
+.base-text.color-accent-mint-300[class*='color-'] {
+      color: var(--color-accent-mint-300);
+    }
+
+.base-text.color-accent-mint-400[class*='color-'] {
+      color: var(--color-accent-mint-400);
+    }
+
+.base-text.color-accent-mint-500[class*='color-'] {
+      color: var(--color-accent-mint-500);
+    }
+
+.base-text.color-accent-mint-600[class*='color-'] {
+      color: var(--color-accent-mint-600);
+    }
+
+.base-text.color-accent-mint-700[class*='color-'] {
+      color: var(--color-accent-mint-700);
+    }
+
+.base-text.color-accent-mint-800[class*='color-'] {
+      color: var(--color-accent-mint-800);
+    }
+
+.base-text.color-accent-mint-900[class*='color-'] {
+      color: var(--color-accent-mint-900);
+    }
+
+.base-text.color-accent-green-50[class*='color-'] {
+      color: var(--color-accent-green-50);
+    }
+
+.base-text.color-accent-green-100[class*='color-'] {
+      color: var(--color-accent-green-100);
+    }
+
+.base-text.color-accent-green-200[class*='color-'] {
+      color: var(--color-accent-green-200);
+    }
+
+.base-text.color-accent-green-300[class*='color-'] {
+      color: var(--color-accent-green-300);
+    }
+
+.base-text.color-accent-green-400[class*='color-'] {
+      color: var(--color-accent-green-400);
+    }
+
+.base-text.color-accent-green-500[class*='color-'] {
+      color: var(--color-accent-green-500);
+    }
+
+.base-text.color-accent-green-600[class*='color-'] {
+      color: var(--color-accent-green-600);
+    }
+
+.base-text.color-accent-green-700[class*='color-'] {
+      color: var(--color-accent-green-700);
+    }
+
+.base-text.color-accent-green-800[class*='color-'] {
+      color: var(--color-accent-green-800);
+    }
+
+.base-text.color-accent-green-900[class*='color-'] {
+      color: var(--color-accent-green-900);
+    }
+
+.base-text.color-accent-yellow-50[class*='color-'] {
+      color: var(--color-accent-yellow-50);
+    }
+
+.base-text.color-accent-yellow-100[class*='color-'] {
+      color: var(--color-accent-yellow-100);
+    }
+
+.base-text.color-accent-yellow-200[class*='color-'] {
+      color: var(--color-accent-yellow-200);
+    }
+
+.base-text.color-accent-yellow-300[class*='color-'] {
+      color: var(--color-accent-yellow-300);
+    }
+
+.base-text.color-accent-yellow-400[class*='color-'] {
+      color: var(--color-accent-yellow-400);
+    }
+
+.base-text.color-accent-yellow-500[class*='color-'] {
+      color: var(--color-accent-yellow-500);
+    }
+
+.base-text.color-accent-yellow-600[class*='color-'] {
+      color: var(--color-accent-yellow-600);
+    }
+
+.base-text.color-accent-yellow-700[class*='color-'] {
+      color: var(--color-accent-yellow-700);
+    }
+
+.base-text.color-accent-yellow-800[class*='color-'] {
+      color: var(--color-accent-yellow-800);
+    }
+
+.base-text.color-accent-yellow-900[class*='color-'] {
+      color: var(--color-accent-yellow-900);
+    }
+
+.base-text.color-accent-orange-50[class*='color-'] {
+      color: var(--color-accent-orange-50);
+    }
+
+.base-text.color-accent-orange-100[class*='color-'] {
+      color: var(--color-accent-orange-100);
+    }
+
+.base-text.color-accent-orange-200[class*='color-'] {
+      color: var(--color-accent-orange-200);
+    }
+
+.base-text.color-accent-orange-300[class*='color-'] {
+      color: var(--color-accent-orange-300);
+    }
+
+.base-text.color-accent-orange-400[class*='color-'] {
+      color: var(--color-accent-orange-400);
+    }
+
+.base-text.color-accent-orange-500[class*='color-'] {
+      color: var(--color-accent-orange-500);
+    }
+
+.base-text.color-accent-orange-600[class*='color-'] {
+      color: var(--color-accent-orange-600);
+    }
+
+.base-text.color-accent-orange-700[class*='color-'] {
+      color: var(--color-accent-orange-700);
+    }
+
+.base-text.color-accent-orange-800[class*='color-'] {
+      color: var(--color-accent-orange-800);
+    }
+
+.base-text.color-accent-orange-900[class*='color-'] {
+      color: var(--color-accent-orange-900);
+    }
+
+.base-inline-loading {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+
+/* 링은 currentColor 다. 우선순위 0 이라 넘겨받은 className 이나 style 의 color 가 늘 이긴다. */
+
+:where(.base-inline-loading) {
+  color: var(--color-grey-scale-200);
+}
+
+.base-overlay-loading {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.page-loading-backdrop {
+  position: absolute;
+  inset: 0;
+}
+
+.page-loading-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+
+/* 기본 스피너(20px)를 확대 */
+
+.page-loading-indicator {
+  transform: scale(3.2);
+  transform-origin: center;
+}
+
+.page-loading-text {
+  position: relative;
+}
+
+.base-spinner {
+  display: flex;
+  width: var(--icon-size-m);
+  height: var(--icon-size-m);
+  align-items: center;
+  justify-content: center;
+}
+
+/* 우선순위 0 이라 넘겨받은 className 이나 style 의 color 가 늘 이긴다. */
+
+:where(.base-spinner) {
+  color: var(--color-grey-scale-200);
+}
+
+.loading-indicator-ring {
+  position: relative;
+  width: var(--icon-size-m);
+  height: var(--icon-size-m);
+}
+
+.loading-indicator-single-ring {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: var(--spinner-stroke) solid;
+  border-radius: 50%;
+  animation: lds-ring var(--spinner-duration) var(--spinner-ease) infinite;
+  border-color: currentColor transparent transparent transparent;
+}
+
+.loading-indicator-single-ring:nth-child(1) {
+  animation-delay: calc(var(--spinner-duration) * -0.375);
+}
+
+.loading-indicator-single-ring:nth-child(2) {
+  animation-delay: calc(var(--spinner-duration) * -0.25);
+}
+
+.loading-indicator-single-ring:nth-child(3) {
+  animation-delay: calc(var(--spinner-duration) * -0.125);
+}
+
+.loading-indicator-single-ring:nth-child(4) {
+  animation-delay: 0s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Title·Close 같은 조각도 base-modal 을 달므로 상자 스타일은 container·overlay 에만 건다. */
+
+.base-modal:where(.modal-container, .modal-overlay) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: var(--spacing-30);
+  border-radius: var(--radius-6);
+}
+
+.base-modal.modal-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--z-modal);
+    background-color: var(--color-white);
+  }
+
+.base-modal.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-overlay);
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * modal-with-double-button                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.modal-with-double-button-close-button {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+}
+
+.modal-with-double-button-container.size-s {
+    width: var(--modal-width-s);
+  }
+
+.modal-with-double-button-container.size-m {
+    width: var(--modal-width-m);
+  }
+
+.modal-with-double-button-container.size-l {
+    width: var(--modal-width-l);
+  }
+
+.modal-with-double-button-title-icon {
+  margin-bottom: var(--spacing-20);
+}
+
+.modal-with-double-button-title {
+  margin-bottom: var(--spacing-4);
+}
+
+.modal-with-double-button-content {
+  margin-top: var(--spacing-20);
+}
+
+.modal-with-double-button-close {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-16);
+  width: 100%;
+  margin-top: var(--spacing-30);
+}
+
+.modal-with-double-button-close.row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-16);
+  }
+
+.modal-with-double-button-close.row  > * {
+      flex: 1;
+    }
+
+.modal-with-double-button-close.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-10);
+  }
+
+.modal-with-double-button-close.column  > * {
+      width: 100%;
+    }
+
+.base-radio:where(.button) {
+    padding: 0;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * radio                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.radio:where(.radio-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+
+.radio:where(.radio-option) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-6);
+  }
+
+.radio:where(.radio-button) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border-radius: 50%;
+    background-color: var(--color-grey-scale-200);
+  }
+
+.radio:where(.radio-indicator) {
+    width: var(--radio-dot-size);
+    height: var(--radio-dot-size);
+    border-radius: 50%;
+    background-color: var(--color-purple-900);
+  }
+
+.radio:where(.radio-label) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+  }
+
+.base-table {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.base-table .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+.base-table .body {
+    width: 100%;
+  }
+
+.base-table .row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+.base-table .cell {
+    text-align: start;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * data-table                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.data-table {
+  position: relative;
+  width: 100%;
+}
+
+.data-table-header {
+  position: sticky;
+  top: 0;
+  background-color: var(--color-white);
+  z-index: var(--z-sticky-header);
+  border-bottom: var(--hairline) solid var(--color-grey-scale-200);
+}
+
+.data-table-row {
+  position: relative;
+  border-bottom: var(--hairline) solid var(--color-grey-scale-200);
+}
+
+.data-table-row .fixed {
+    position: sticky;
+    background-color: var(--color-white);
+    z-index: var(--z-sticky);
+  }
+
+:is(.data-table-row .fixed) > * {
+      position: relative;
+      z-index: var(--z-raised);
+    }
+
+.body .data-table-row:hover {
+  background-color: var(--color-grey-scale-100);
+}
+
+:is(.body .data-table-row:hover) .fixed {
+    background-color: var(--color-grey-scale-100);
+  }
+
+.fixed-cell {
+  position: sticky;
+  left: 0;
+}
+
+.base-tabs:where(.root) {
+    width: 100%;
+    display: block;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * tabs                                                                                            *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.tabs-list {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.tabs-list.variant-underline {
+    border-bottom: var(--hairline) solid var(--color-grey-scale-200);
+
+    /* Scrollable logic */
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+.tabs-list.variant-underline::-webkit-scrollbar {
+      display: none;
+    }
+
+.tabs-trigger {
+  /* 1. 구조적 스타일 (Layout) */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  flex-shrink: 0;
+
+  /* 2. 테마 스타일 (Theme) */
+  /* figma 토큰에 11px 없음. 디자이너 확인 전까지 숫자 유지 */
+  padding: 10px 30px 11px 30px; /* raw-px */
+  color: var(--color-grey-scale-400);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  border-bottom: var(--hairline) solid var(--color-grey-scale-200);
+  transition: color var(--motion-base) var(--motion-ease);
+}
+
+.tabs-trigger:hover {
+    color: var(--color-purple-700);
+  }
+
+.tabs-trigger[data-state='active'] {
+    color: var(--color-purple-700);
+    font-weight: var(--font-weight-bold);
+  }
+
+.tabs-trigger.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+/* 3. 변이 스타일 (Variants) */
+
+.tabs-trigger.variant-underline {
+    border-bottom: 0;
+  }
+
+.tabs-trigger.variant-underline[data-state='active'] {
+      border-bottom-color: transparent;
+    }
+
+.tabs-trigger.variant-filled {
+    flex: 1; /* full-width logic integrated */
+    text-align: center;
+    /* figma 토큰에 11px 없음. 디자이너 확인 전까지 숫자 유지 */
+    padding: 11px 30px; /* raw-px */
+    border-bottom: 0;
+    z-index: var(--z-raised);
+  }
+
+.tabs-trigger.variant-filled:hover,.tabs-trigger.variant-filled[data-state='active'] {
+      background-color: transparent;
+    }
+
+.tabs-indicator {
+  /* 1. 구조적 스타일 (Layout) */
+  position: absolute;
+  pointer-events: none;
+  z-index: var(--z-raised);
+  transition:
+    left var(--motion-base) var(--motion-ease),
+    width var(--motion-base) var(--motion-ease);
+
+  /* 2. 변이 스타일 (Variants) */
+}
+
+.tabs-indicator.variant-underline {
+    bottom: 0;
+    height: var(--tab-indicator-thickness);
+    background-color: var(--color-purple-800);
+  }
+
+.tabs-indicator.variant-filled {
+    top: 0;
+    bottom: 0;
+    background-color: var(--color-purple-50);
+    z-index: var(--z-base);
+  }
+
+.base-text-field.input {
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+.base-text-field.input::-moz-placeholder {
+      color: var(--color-grey-scale-400);
+    }
+
+.base-text-field.input::placeholder {
+      color: var(--color-grey-scale-400);
+    }
+
+.base-text-field.input:-webkit-autofill,.base-text-field.input:-webkit-autofill:hover,.base-text-field.input:-webkit-autofill:focus,.base-text-field.input:-webkit-autofill:active {
+      /* 브라우저 자동완성 배경을 덮는 관용 해킹. 토큰이 아니라 고정값이다 */ /* raw-value */
+      box-shadow: 0 0 0px 1000px transparent inset; /* raw-value */
+      -webkit-transition: background-color 5000s ease-in-out 0s;
+      transition: background-color 5000s ease-in-out 0s; /* raw-value */
+    }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * base-text-field                                                                                 *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.text-field {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.text-field-title {
+  margin-bottom: var(--spacing-8);
+}
+
+.text-field-input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-10);
+
+  padding: 0 var(--spacing-14);
+
+  border-radius: var(--radius-4);
+  border: var(--hairline) solid var(--color-grey-scale-300);
+}
+
+.text-field-input-wrapper.size-s {
+    height: var(--control-height-s);
+  }
+
+.text-field-input-wrapper.size-m {
+    height: var(--control-height-m);
+  }
+
+.text-field-input-wrapper:has( > input[data-disabled='true']) {
+    border-color: var(--color-grey-scale-300);
+    background-color: var(--color-grey-scale-100);
+  }
+
+.text-field-input-wrapper:focus-within {
+    border: var(--hairline) solid var(--color-purple-900);
+  }
+
+.text-field-input-wrapper  > input {
+    width: 100%;
+  }
+
+.text-field-helper-text {
+  margin-top: var(--spacing-4);
+}
+
+.text-field-helper-text.error {
+    color: var(--color-accent-red-500);
+  }
+
+/* Trigger 도 base-tooltip 을 달므로 z-index 는 Content 에만 건다. */
+
+.base-tooltip:where(.content) {
+    z-index: var(--z-tooltip);
+  }
+
+.base-tooltip.content {
+    text-align: center;
+  }
+
+.base-tooltip:where(.trigger) {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * tooltip                                                                                         *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.tooltip-content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: var(--spacing-10);
+
+  background-color: var(--color-purple-900);
+  color: var(--color-white);
+  border-radius: var(--radius-6);
+  padding: var(--spacing-12);
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+
+  position: relative;
+}
+
+.tooltip-content::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+.tooltip-content.direction-top {
+    transform: translateY(calc(-1 * var(--spacing-10)));
+  }
+
+.tooltip-content.direction-top::before {
+      bottom: calc(-1 * var(--tooltip-arrow));
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: var(--tooltip-arrow) var(--tooltip-arrow) 0 var(--tooltip-arrow);
+      border-color: var(--color-purple-900) transparent transparent transparent;
+    }
+
+.tooltip-content.direction-bottom {
+    transform: translateY(var(--spacing-10));
+  }
+
+.tooltip-content.direction-bottom::before {
+      top: calc(-1 * var(--tooltip-arrow));
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 0 var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow);
+      border-color: transparent transparent var(--color-purple-900) transparent;
+    }
+
+.tooltip-content.direction-left {
+    transform: translateX(calc(-1 * var(--spacing-10)));
+  }
+
+.tooltip-content.direction-left::before {
+      right: calc(-1 * var(--tooltip-arrow));
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: var(--tooltip-arrow) 0 var(--tooltip-arrow) var(--tooltip-arrow);
+      border-color: transparent transparent transparent var(--color-purple-900);
+    }
+
+.tooltip-content.direction-right {
+    transform: translateX(var(--spacing-10));
+  }
+
+.tooltip-content.direction-right::before {
+      left: calc(-1 * var(--tooltip-arrow));
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow) 0;
+      border-color: transparent var(--color-purple-900) transparent transparent;
+    }