/* ── 타이포그래피 ── */
.display-large {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-tight);
}

.display-medium {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-tight);
}

.heading-large {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-tight);
}

.heading-medium {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-tight);
}

.body-medium {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
}

.button-medium {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
}

.label-medium {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
}

.label-small {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-compact);
}

.caption-medium {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-height-normal);
}

.caption-small {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-height-compact);
}


/* ── Effects ── */
.elevation-1 {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
}

.elevation-2 {
  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.35);
}

.dim-blur {
  backdrop-filter: blur(2px);
}


/* ── 버튼 ── */
.btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--layout-space-4);
  height: 28px;
  padding: 0 var(--layout-space-12);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
  text-align: center;
  color: var(--color-semantic-button-priamry-label-default);
  background-color: var(--color-semantic-button-priamry-bg-enabled);
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--color-semantic-button-priamry-bg-hover);
}

.btn-primary:active {
  background-color: var(--color-semantic-button-priamry-bg-pressed);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  color: var(--color-semantic-button-priamry-label-disabled);
  background-color: var(--color-semantic-button-priamry-bg-disabled);
  cursor: not-allowed;
}

.btn-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--layout-space-4);
  height: 28px;
  padding: 0 var(--layout-space-12);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
  text-align: center;
  color: var(--color-semantic-button-secondary-label-default);
  background-color: var(--color-semantic-button-secondary-bg-enabled);
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--color-semantic-button-secondary-bg-hover);
}

.btn-secondary:active {
  background-color: var(--color-semantic-button-secondary-bg-pressed);
}

.btn-secondary:disabled,
.btn-secondary.is-disabled {
  color: var(--color-semantic-button-secondary-label-disabled);
  background-color: var(--color-semantic-button-secondary-bg-disabled);
  cursor: not-allowed;
}

.btn-ghost {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--layout-space-4);
  height: 28px;
  padding: 0 var(--layout-space-12);
  border: 1px solid var(--color-semantic-button-ghost-stroke-enabled);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
  text-align: center;
  color: var(--color-semantic-button-ghost-label-endabled);
  background-color: transparent;
  cursor: pointer;
}

.btn-ghost:not(:disabled):not(.is-disabled):hover {
  border-color: var(--color-semantic-button-ghost-stroke-hover);
  background-color: var(--color-semantic-button-ghost-bg-hover);
}

.btn-ghost:not(:disabled):not(.is-disabled):active {
  border-color: var(--color-semantic-button-ghost-stroke-pressed);
  background-color: var(--color-semantic-button-ghost-bg-pressed);
}

.btn-ghost:disabled,
.btn-ghost.is-disabled {
  border-color: var(--color-semantic-button-ghost-stroke-disabled);
  color: var(--color-semantic-button-ghost-label-disabled);
  cursor: not-allowed;
}

.btn-destructive {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--layout-space-4);
  height: 28px;
  padding: 0 var(--layout-space-12);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
  text-align: center;
  color: var(--color-semantic-button-destructive-label-default);
  background-color: var(--color-semantic-button-destructive-bg-enabled);
  cursor: pointer;
}

.btn-destructive:hover {
  background-color: var(--color-semantic-button-destructive-bg-hover);
}

.btn-destructive:active {
  background-color: var(--color-semantic-button-destructive-bg-pressed);
}

.btn-destructive:disabled,
.btn-destructive.is-disabled {
  color: var(--color-semantic-button-destructive-label-disabled);
  background-color: var(--color-semantic-button-destructive-bg-disabled);
  cursor: not-allowed;
}

.btn-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--layout-space-4);
  height: 28px;
  padding: 0 var(--layout-space-12);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
  text-align: center;
  color: var(--color-semantic-button-text-label-endabled);
  background-color: transparent;
  cursor: pointer;
}

.btn-text:not(:disabled):not(.is-disabled):hover {
  background-color: var(--color-semantic-button-text-bg-hover);
}

.btn-text:not(:disabled):not(.is-disabled):active {
  background-color: var(--color-semantic-button-text-bg-pressed);
}

.btn-text:disabled,
.btn-text.is-disabled {
  color: var(--color-semantic-button-text-label-disabled);
  cursor: not-allowed;
}

.btn-primary img,
.btn-secondary img,
.btn-ghost img,
.btn-destructive img,
.btn-text img {
  width: 16px;
  height: 16px;
}

.btn-small {
  height: 24px;
  padding: 0 var(--layout-space-8);
}

/* ── 필드 (공통 base) ── */
.field {
  display: flex;
  box-sizing: border-box;
  flex: 1 0 0;
  align-items: center;
  align-self: stretch;
  padding: var(--layout-space-4) var(--layout-space-8);
  border: 1px solid var(--color-semantic-border-group-default);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-group-default);
}

.field::placeholder {
  color: var(--color-semantic-text-secondary);
}

.field:hover {
  background-color: var(--color-semantic-surface-group-hover);
}

.field:focus {
  border-color: var(--color-semantic-border-group-selected);
  background-color: var(--color-semantic-surface-group-selected);
}

.field:disabled,
.field.is-disabled {
  border: none;
  color: var(--color-semantic-text-disabled);
  background: var(--color-semantic-surface-group-disabled);
  cursor: not-allowed;
}

.field--error {
  border-color: var(--color-base-red-400) !important;
}

/* ── SelectField ── */
.select-field {
  padding-right: calc(var(--layout-space-8) + 16px + var(--layout-space-8));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--layout-space-8) center;
  background-repeat: no-repeat;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.select-field.is-open {
  color: var(--color-semantic-text-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 10L8 6L12 10' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--layout-space-8) center;
  background-repeat: no-repeat;
}

.select-field:disabled,
.select-field.is-disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%235F5F66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--layout-space-8) center;
  background-repeat: no-repeat;
  cursor: not-allowed;
}

/* ── CustomSelectField (커스텀 드롭다운) ── */
.select-field-wrap {
  display: inline-flex;
  position: relative;
}

.select-field-wrap .select-field {
  text-align: left;
}

.select-field__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--layout-space-4));
  left: 0;
  z-index: 100;
  flex-direction: column;
  min-width: 100%;
  margin: 0;
  padding: var(--layout-space-4) 0;
  border: 1px solid var(--color-semantic-border-layout-popover);
  border-radius: var(--radius-sm);
  background: var(--color-semantic-surface-layout-popover);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
  list-style: none;
}

.select-field-wrap.is-open .select-field__dropdown {
  display: flex;
}

.select-field__option,
.select-field__dropdown .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--layout-space-4) var(--layout-space-8);
  border: none;
  border-radius: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-align: left;
  color: var(--color-semantic-text-secondary);
  background: transparent;
  cursor: pointer;
}

.select-field__option:hover,
.select-field__dropdown .dropdown-item:hover {
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-group-hover);
}

.select-field__option.is-selected,
.select-field__dropdown .dropdown-item.is-selected {
  color: var(--color-semantic-text-primary);
}

/* ── TextArea ── */
.textarea {
  min-height: 80px;
  resize: none;
}

/* ── Field Wrap / Label ── */
.field-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-space-2);
  width: 100%;
}

.field-label {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-compact);
  color: var(--color-semantic-text-primary);
}

.field-mandatory {
  color: var(--color-base-brand-500);
}

.field-wrap.is-disabled .field-label {
  color: var(--color-semantic-text-disabled);
}

/* ── PasswordField ── */
.field-password-wrap {
  display: flex;
  position: relative;
  width: 100%;
}

.field-password {
  padding-right: var(--layout-space-32);
}

.field-password-toggle {
  display: flex;
  position: absolute;
  top: 50%;
  right: var(--layout-space-8);
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.field-password-toggle img {
  width: 16px;
  height: 16px;
}

/* ── ValidationItem ── */
.validation-item {
  display: flex;
  align-items: center;
  gap: var(--layout-space-4);
  padding: 0 var(--layout-space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-secondary);
}

.validation-item::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23aaaab0' stroke-width='1'/%3E%3Cpath d='M5.5 8L7 9.5L10.5 6' stroke='%23aaaab0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.validation-item--success::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%231C83EB' stroke-width='1'/%3E%3Cpath d='M5.5 8L7 9.5L10.5 6' stroke='%231C83EB' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.validation-item--error {
  color: var(--color-semantic-text-alert);
}

.validation-item--error::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23e22929' stroke-width='1'/%3E%3Cpath d='M6.5 6.5L9.5 9.5M9.5 6.5L6.5 9.5' stroke='%23e22929' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── RadioButton ── */
.radio-btn {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.radio-btn.is-selected {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='white' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
}

/* ── Checkbox ── */
.checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.checkbox.is-selected,
input:checked ~ .checkbox {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(2,2)'%3E%3Cpath d='M0 2C0 0.895431 0.895431 0 2 0H10C11.1046 0 12 0.895431 12 2V10C12 11.1046 11.1046 12 10 12H2C0.895431 12 0 11.1046 0 10V2Z' fill='%231C83EB'/%3E%3Cpath d='M2 6.26232L4.67204 8.81745C4.77573 8.91661 4.94142 8.90834 5.03472 8.79936L10 3' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.checkbox.is-disabled,
input:disabled ~ .checkbox {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(2,2)'%3E%3Cpath d='M0 2C0 0.895431 0.895431 0 2 0H10C11.1046 0 12 0.895431 12 2V10C12 11.1046 11.1046 12 10 12H2C0.895431 12 0 11.1046 0 10V2Z' fill='%235F5F66'/%3E%3Cpath d='M2 6.26232L4.67204 8.81745C4.77573 8.91661 4.94142 8.90834 5.03472 8.79936L10 3' stroke='%23AAAAB0' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  cursor: not-allowed;
}

.checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--layout-space-8);
  cursor: pointer;
  user-select: none;
}

.checkbox-wrap input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.checkbox-wrap:has(input:disabled) {
  cursor: not-allowed;
}

.checkbox-wrap input:focus-visible ~ .checkbox {
  border-radius: 2px;
  outline: 2px solid var(--color-base-brand-400);
  outline-offset: 2px;
}


/* ── 드롭다운 ── */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--layout-space-8);
  padding: var(--layout-space-4) var(--layout-space-8);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  white-space: nowrap;
  color: var(--color-semantic-text-secondary);
  cursor: pointer;
}

.dropdown-item:not(.is-disabled):hover {
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-group-hover);
}

.dropdown-item.is-selected {
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-group-selected-brand);
}

/* ── SegmentedControl (pill) ── */
.segmented-control-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--layout-space-4) var(--layout-space-16);
  border: 1px solid var(--color-base-neutral-300);
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-compact);
  white-space: nowrap;
  color: var(--color-base-neutral-300);
  cursor: pointer;
}

.segmented-control-item:hover {
  border-color: var(--color-base-brand-700);
  color: var(--color-base-brand-700);
}

.segmented-control-item.is-selected {
  border-color: var(--color-base-brand-700);
  color: var(--color-base-neutral-0);
  background-color: var(--color-base-brand-700);
}

/* ── Segment ── */
.segment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 203px;
  padding: var(--layout-space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-secondary);
  cursor: pointer;
}

.segment:not(.is-disabled):hover {
  background-color: var(--color-semantic-control-segmented-control-hover);
}

.segment.is-selected {
  color: var(--color-semantic-text-primary);
  background-color: var(--color-semantic-control-segmented-control-selected);
}

.segment.is-selected:not(.is-disabled):hover {
  background-color: var(--color-semantic-control-segmented-control-hover);
}

.segment.is-disabled {
  color: var(--color-semantic-text-disabled);
  cursor: not-allowed;
}

.segment.is-disabled.is-selected {
  background-color: var(--color-semantic-control-segmented-control-disabled);
}

/* ── Toggle ── */
.toggle {
  display: flex;
  align-items: center;
  width: 28px;
  height: 16px;
  padding: var(--layout-space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-semantic-control-toggle-unselected);
  cursor: pointer;
}

.toggle::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-semantic-control-toggle-thumb);
}

.toggle:hover {
  background-color: var(--color-base-neutral-500);
}

.toggle.is-on {
  justify-content: flex-end;
  background-color: var(--color-semantic-control-toggle-selected);
}

.toggle.is-on:hover {
  background-color: var(--color-base-brand-400);
}

.toggle.is-disabled {
  background-color: var(--color-semantic-control-toggle-disabled-unselected);
  cursor: not-allowed;
}

.toggle.is-disabled::after {
  background-color: var(--color-semantic-control-toggle-disabled-thumb);
}

.toggle.is-disabled.is-on {
  background-color: var(--color-semantic-control-toggle-disabled-selected);
}

.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--layout-space-8);
  cursor: pointer;
  user-select: none;
}

.toggle-wrap input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.toggle-wrap:has(input:disabled) {
  cursor: not-allowed;
}

input:checked ~ .toggle {
  justify-content: flex-end;
  background-color: var(--color-semantic-control-toggle-selected);
}

input:checked ~ .toggle:hover {
  background-color: var(--color-base-brand-400);
}

input:disabled ~ .toggle {
  background-color: var(--color-semantic-control-toggle-disabled-unselected);
  cursor: not-allowed;
}

input:disabled ~ .toggle::after {
  background-color: var(--color-semantic-control-toggle-disabled-thumb);
}

input:checked:disabled ~ .toggle {
  background-color: var(--color-semantic-control-toggle-disabled-selected);
}

.toggle-wrap input:focus-visible ~ .toggle {
  outline: 2px solid var(--color-base-brand-400);
  outline-offset: 2px;
}

/* ── TabBar ── */
.tab-bar {
  display: flex;
  gap: var(--layout-space-16);
}

.tab-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-space-8);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-height-tight);
  color: var(--color-semantic-text-tertiary);
  cursor: pointer;
}

.tab-item:hover {
  color: var(--color-semantic-text-secondary);
}

.tab-item.is-active {
  padding-bottom: 1px;
  color: var(--color-semantic-text-primary);
}

.tab-item.is-active::after {
  content: '';
  align-self: stretch;
  height: 2px;
  background-color: var(--color-semantic-control-tab-bar-indicator);
}

/* ── ButtonSwitch ── */
.btn-switch {
  display: flex;
  width: 87px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.btn-switch-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--layout-space-2) var(--layout-space-8);
  border: 1px solid var(--color-semantic-border-group-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-compact);
  text-align: center;
  color: var(--color-semantic-text-secondary);
  background-color: var(--color-semantic-surface-group-default);
  cursor: pointer;
}

.btn-switch-item:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.btn-switch-item:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.btn-switch-item:hover {
  color: var(--color-semantic-text-primary);
  background-color: var(--color-semantic-surface-group-hover);
}

.btn-switch-item.is-active {
  z-index: 2;
  border-color: var(--color-semantic-border-group-selected-brand);
  color: var(--color-semantic-text-primary);
  background-color: var(--color-semantic-surface-group-selected-brand);
}

/* ── ButtonIconOnly ── */
.btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-semantic-button-text-icon-enabled);
  background: transparent;
  cursor: pointer;
}

.btn-icon:not(:disabled):hover {
  background-color: var(--color-semantic-surface-group-hover);
}

.btn-icon:not(:disabled):active {
  color: var(--color-semantic-button-ghost-icon-selected);
  background-color: var(--color-semantic-surface-group-selected);
}

.btn-icon:disabled {
  color: var(--color-semantic-button-text-icon-disabled);
  cursor: not-allowed;
}

/* ── ButtonToggle ── */
.btn-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-compact);
  color: var(--color-semantic-text-primary);
  background: transparent;
  cursor: pointer;
}

.btn-toggle:hover {
  background-color: var(--color-semantic-surface-group-hover);
}

.btn-toggle.is-selected {
  background-color: var(--color-semantic-surface-group-selected);
}

.btn-toggle.is-selected-brand {
  background-color: var(--color-semantic-surface-group-selected-brand);
}

.btn-toggle:disabled,
.btn-toggle.is-disabled {
  color: var(--color-semantic-text-disabled);
  background: transparent;
  cursor: not-allowed;
}

/* ── chip 공통 ── */
.chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--layout-space-2) var(--layout-space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  vertical-align: middle;
  color: var(--color-semantic-text-secondary);
}

/* 단독 dot 인디케이터 */
.status-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin: 4.5px;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

/* ── ActionStatusChip ── */
.chip--action-need-action,
.chip--action-processing,
.chip--action-completed,
.chip--action-system-completed {
  gap: var(--layout-space-2);
  padding: var(--layout-space-1) var(--layout-space-8) var(--layout-space-1) var(--layout-space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-base-neutral-750);
}

.chip--action-system-completed {
  gap: none;
  padding-left: var(--layout-space-8);
}

/* NeedAction: dot 색 */
.chip--action-need-action .status-dot {
  background-color: var(--color-base-red-400);
}

/* Processing: dot 색 override */
.chip--action-completed .status-dot {
  background-color: var(--color-base-neutral-50);
}

/* Completed: icon 크기 */
.chip--action-completed img{
  width: 16px;
  height: 16px;
}

/* ── InspectionResultChip ── */
.chip--result-normal,
.chip--result-warning,
.chip--result-danger,
.chip--result-fail {
  border-radius: var(--radius-md);
}

.chip--result-normal {
  background-color: var(--color-base-neutral-800);
}

.chip--result-warning {
  color: #f1c069; /* TODO: token */
  background-color: #554935; /* TODO: token */
}

.chip--result-danger {
  color: #ff8983; /* TODO: token */
  background-color: #553b40; /* TODO: token */
}

.chip--result-fail {
  border: 1px solid var(--color-base-neutral-700);
}

/* ── UserRoleChip ── */
.chip--role-owner {
  color: var(--color-semantic-chip-role-owner-text);
  background-color: var(--color-semantic-chip-role-owner-surface);
}

.chip--role-admin {
  color: var(--color-semantic-chip-role-company-admin-text);
  background-color: var(--color-semantic-chip-role-company-admin-surface);
}

.chip--role-team-admin {
  color: var(--color-semantic-chip-role-team-admin-text);
  background-color: var(--color-semantic-chip-role-team-admin-surface);
}

.chip--role-general {
  color: var(--color-semantic-chip-role-general-text);
  background-color: var(--color-semantic-chip-role-general-surface);
}

/* ── ScheduleStatusChip ── */
.chip--schedule-done,
.chip--schedule-stopped,
.chip--schedule-cancelled,
.chip--schedule-running {
  height: 14px;
  padding: 0 var(--layout-space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-height-normal);
}

.chip--schedule-done {
  color: #9EC8F9; /* TODO: token */
  background-color: #475A70; /* TODO: token */
}

.chip--schedule-stopped {
  color: #f08f97; /* TODO: token */
  background-color: #70494c; /* TODO: token */
}

.chip--schedule-cancelled {
  color: var(--color-base-neutral-150);
  background-color: var(--color-base-neutral-750);
}

.chip--schedule-running {
  color: var(--color-base-neutral-800);
  background-color: var(--color-base-neutral-300);
}

/* ── AccountStatusChip ── */
.chip--account {
  gap: var(--layout-space-2);
  border-color: transparent;
  color: var(--color-semantic-chip-account-inactive-text);
}

.chip--account .status-dot {
  background-color: var(--color-semantic-chip-account-inactive-indicator);
}

.chip--account.is-active {
  color: var(--color-semantic-chip-account-active-text);
  background-color: var(--color-semantic-chip-account-surface);
}

.chip--account.is-active .status-dot {
  background-color: var(--color-semantic-chip-account-active-indicator);
}

/* ── BannerMessage ── */
.banner--neutral,
.banner--complete,
.banner--alert,
.banner--error {
  display: flex;
  align-items: center;
  gap: var(--layout-space-12);
  width: 360px;
  padding: var(--layout-space-12);
  border: 1px solid var(--color-base-neutral-700);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-primary);
}

.banner--neutral img,
.banner--complete img,
.banner--alert img,
.banner--error img {
  width: 16px;
  height: 16px;
}

.banner--error {
  border-color: var(--color-base-red-800);
  background-color: var(--color-base-red-900);
}

.banner-desc {
  color: var(--color-semantic-text-secondary);
}

/* ── FilterButton ── */
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--layout-space-4);
  padding: var(--layout-space-2) var(--layout-space-8);
  border: 1px solid var(--color-semantic-border-group-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-primary);
  background: transparent;
  cursor: pointer;
}

.filter-btn > img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.filter-btn:not(:disabled):not(.is-disabled):hover {
  background-color: var(--color-semantic-surface-group-hover);
}

.filter-btn.is-open {
  border-color: var(--color-semantic-border-group-selected);
  background-color: var(--color-semantic-surface-group-selected);
}

.filter-btn.is-selected {
  border-color: var(--color-semantic-border-group-selected-brand);
  background-color: var(--color-semantic-surface-group-selected-brand);
}

.filter-btn.is-selected:not(:disabled):not(.is-disabled):hover {
  background-color: var(--color-semantic-surface-group-hover-brand);
}

.filter-btn.is-selected.is-open {
  border-color: var(--color-semantic-border-group-selected);
  background-color: var(--color-semantic-surface-group-hover-brand);
}

.filter-btn:disabled,
.filter-btn.is-disabled {
  border-color: var(--color-semantic-border-group-disabled);
  color: var(--color-semantic-text-disabled);
  cursor: not-allowed;
}

/* ── SearchField ── */
.search-field {
  display: flex;
  align-items: center;
  gap: var(--layout-space-8);
  padding: var(--layout-space-2) var(--layout-space-8);
  border: 1px solid var(--color-semantic-border-group-default);
  border-radius: var(--radius-sm);
  color: var(--color-semantic-text-secondary);
  background-color: var(--color-semantic-surface-group-default);
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-primary);
  background: transparent;
}

.search-field input::placeholder {
  color: var(--color-semantic-text-secondary);
}

.search-field > img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.search-field:not(.is-applied):hover {
  background-color: var(--color-semantic-surface-group-hover);
}

.search-field:focus-within {
  border-color: var(--color-semantic-border-group-selected);
  background-color: var(--color-semantic-surface-group-selected);
}

.search-field.is-applied {
  border-color: var(--color-semantic-border-group-selected-brand);
  background-color: var(--color-semantic-surface-group-selected-brand);
}

.search-field.is-applied:hover {
  background-color: var(--color-semantic-surface-group-hover-brand);
}

.search-field-clear {
  display: inline-flex;
  flex-shrink: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.search-field-clear img {
  width: 16px;
  height: 16px;
}

/* ── DatePicker ── */
.date-range-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 204px;
  padding: var(--layout-space-2) var(--layout-space-8);
  border: 1px solid var(--color-semantic-border-group-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  color: var(--color-semantic-text-primary);
  background-color: var(--color-semantic-surface-group-default);
  cursor: pointer;
}

.date-range-picker > span {
  flex: 1;
}

.date-range-picker > img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.date-range-picker:not(.is-disabled):hover {
  background-color: var(--color-semantic-surface-group-hover);
}

.date-range-picker.is-open {
  border-color: var(--color-semantic-border-group-selected);
  background-color: var(--color-semantic-surface-group-selected);
}

.date-range-picker.is-selected {
  border-color: var(--color-semantic-border-group-selected-brand);
  background-color: var(--color-semantic-surface-group-selected-brand);
}

.date-range-picker.is-selected:hover {
  background-color: var(--color-semantic-surface-group-hover-brand);
}

.date-range-picker.is-selected.is-open {
  border-color: var(--color-semantic-border-group-selected);
  background-color: var(--color-semantic-surface-group-hover-brand);
}

.date-range-picker.is-disabled {
  border-color: var(--color-semantic-border-group-disabled);
  color: var(--color-semantic-text-disabled);
  background-color: var(--color-semantic-surface-group-disabled);
  cursor: not-allowed;
}

/* ── SelectedOption ── */
.selected-option {
  gap: var(--layout-space-2);
  border: 1px solid var(--color-semantic-border-group-selected-brand);
  color: var(--color-semantic-text-primary);
  background-color: var(--color-semantic-surface-group-selected-brand);
}

.selected-option:hover {
  background-color: var(--color-semantic-surface-group-hover-brand);
}

.selected-option-remove {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
}

.selected-option-remove img{
  width: 16px;
  height: 16px;
}

/* ── 스크롤바 ── */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-semantic-control-scroll-bar-track);
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-semantic-control-scroll-bar-thumb);
}