/* Logpresso component CSS
   Scope: Button 215:5886, iconButton 16508:3064, buttonGroup 8557:9670,
   iconButtonGroup 8557:9808, Checkbox 13390:26116,
   Radiobox 11992:1029, Switch 16615:9360, Checkbox Group 17159:1142,
   Radio Group 17159:1143, Switch Group 17159:1144, and
   Tree Panel Composition 13663:6329 / 13663:6343, Filter & Multi Sort
   204:330, Field Item 301:15746 from Figma UI-5.1.
   Base: immutable sonar5.css selectors. This file follows the same selector
   grammar and only patches confirmed Figma gaps. */

@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/MaterialIconsOutlined-Regular.otf") format("opentype");
  font-display: block;
}

.btn {
  box-sizing: border-box;
  overflow: hidden;
  border-color: var(--color-neutral-alpha-300);
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0;
}

.btn {
  height: 24px;
  gap: 4px;
  padding-inline: 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
}

.btn.btn-xs {
  height: 20px;
  gap: 4px;
  padding-inline: 6px;
  border-radius: 6px;
}

.btn.btn-md {
  height: 30px;
  gap: 8px;
  padding-inline: 12px;
  font-size: 14px;
  line-height: 20px;
}

.btn.btn-lg {
  height: 42px;
  gap: 8px;
  padding-inline: 16px;
  font-size: 14px;
  line-height: 20px;
}

.btn > span:not(.material-icon):not(.loading-indicator) {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.btn > .material-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  overflow: hidden;
  font-size: 16px;
  line-height: 16px;
}

.btn[aria-haspopup="menu"] {
  padding-right: 2px;
}

.btn.btn-md[aria-haspopup="menu"] {
  padding-right: 6px;
}

.btn.btn-lg[aria-haspopup="menu"] {
  padding-right: 10px;
}

.btn.btn-xs[aria-haspopup="menu"] {
  padding-right: 2px;
}

.btn[aria-haspopup="menu"] > .material-icon:last-child {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.btn > .material-icon.is-visibility-preserved {
  opacity: 0;
}

.btn.btn-icon-only {
  width: 24px;
  height: 24px;
  padding: 3px;
}

.btn.btn-icon-only.btn-xs {
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 6px;
}

.btn.btn-icon-only.btn-md {
  width: 30px;
  height: 30px;
  padding: 5px;
}

.btn.btn-icon-only.btn-lg {
  width: 42px;
  height: 42px;
  padding: 11px;
}

.btn.btn-icon[aria-label][aria-haspopup="menu"] {
  width: 44px;
  height: 24px;
  gap: 2px;
  padding: 3px;
}

.btn.btn-icon.btn-xs[aria-label][aria-haspopup="menu"] {
  width: 38px;
  height: 20px;
  padding: 1px;
}

.btn.btn-icon.btn-md[aria-label][aria-haspopup="menu"] {
  width: 56px;
  height: 30px;
  gap: 4px;
  padding: 5px;
}

.btn.btn-icon.btn-lg[aria-label][aria-haspopup="menu"] {
  width: 68px;
  height: 42px;
  gap: 8px;
  padding: 11px;
}

.loading-indicator {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: component-loading-spin 0.8s linear infinite;
}

.btn.is-hover,
.btn:hover {
  border-color: var(--color-neutral-alpha-300);
  background-color: var(--color-neutral-100);
}

.btn.btn-primary.is-hover,
.btn.btn-primary:hover {
  background-color: var(--color-primary-200);
}

.btn.btn-danger.is-hover,
.btn.btn-danger:hover {
  background-color: var(--color-error-300);
}

.btn.is-pressed,
.btn:active {
  border-color: var(--color-primary);
  background-color: var(--color-neutral-200);
  color: var(--color-primary);
}

.btn.btn-primary.is-pressed,
.btn.btn-primary:active {
  background-color: var(--color-primary-300);
  color: var(--color-primary-content);
}

.btn.btn-danger.is-pressed,
.btn.btn-danger:active {
  background-color: var(--color-error-400);
  color: var(--color-primary-content);
}

.btn.is-focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Field Item: UI-5.1 301:15746.
   Reuses sonar5.css .field-item, .badge, .icon, .label, .close-btn, and .checkbox grammar. */
[data-field-item-set] {
  box-sizing: border-box;
  width: 256px;
  max-width: 100%;
  min-height: 370px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

[data-field-item].field-item {
  box-sizing: border-box;
  width: 216px;
  height: 30px;
  flex: 0 0 auto;
  gap: 4px;
  padding: 5px;
  overflow: hidden;
  border-color: var(--color-neutral-alpha-300);
  background-color: var(--color-neutral);
  color: var(--color-base-content);
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-field-item].field-item .badge {
  box-sizing: border-box;
  width: 100px;
  height: 18px;
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 4px;
  padding-inline: 8px;
  color: var(--color-base-content);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

[data-field-item].field-item .checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  border-width: 2px;
}

[data-field-item].field-item .icon,
[data-field-item].field-item .field-item-badge-icon,
[data-field-item].field-item .close-btn {
  width: 16px;
  height: 16px;
  color: currentColor;
  font-family: "Material Icons Outlined";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

[data-field-item].field-item .icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

[data-field-item].field-item .material-icon[data-icon]::before {
  content: attr(data-icon);
}

[data-field-item].field-item .label {
  min-width: 0;
  color: var(--color-base-content);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

[data-field-item].field-item .close-btn {
  right: 5px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  transform: translateY(-50%);
}

[data-field-item].field-item.hover {
  background-color: var(--color-neutral-100);
}

[data-field-item].field-item.hover .badge {
  background-color: var(--color-neutral-100);
}

[data-field-item].field-item.active {
  border-color: var(--color-primary);
  background-color: var(--color-neutral-100);
  color: var(--color-primary);
}

[data-field-item].field-item.active .badge {
  height: 20px;
  background-color: var(--color-primary);
  color: var(--color-base-content);
}

[data-field-item].field-item.active .checkbox {
  border-color: var(--color-primary);
}

[data-field-item].field-item.active .label,
[data-field-item].field-item.active .icon {
  color: var(--color-primary);
  font-weight: 400;
}

[data-field-item].field-item[data-state="applied"] {
  gap: 4px;
  border-color: var(--color-neutral-alpha-300);
  background-color: var(--color-primary-100, #ff7d4a);
  padding-inline: 9px;
}

[data-field-item].field-item[data-state="applied"] .label,
[data-field-item].field-item[data-state="applied"] .close-btn {
  color: var(--color-base-content);
}

[data-field-item].field-item[data-state="disabled+none-data"],
[data-field-item].field-item[data-state="state7"] {
  border-color: var(--color-neutral-alpha-300);
  background-color: var(--color-neutral);
}

[data-field-item].field-item[data-state="state7"] .label {
  color: var(--color-base-content-200);
}

[data-field-item].field-item.highlight {
  border-color: var(--color-primary);
  background-color: var(--color-primary-alpha);
  padding: 5px;
}

.btn-group {
  box-sizing: border-box;
  height: 24px;
  border-radius: 8px;
}

.btn-group > .btn {
  min-width: 45px;
  height: 24px;
  padding-inline: 8px;
}

.btn-group > .btn + .btn {
  margin-left: -1px;
}

.btn-group[aria-label="Button Group"] > .btn {
  min-width: 39px;
  width: 39px;
}

.btn-group[aria-label="Icon Button Group"] > .btn {
  min-width: 24px;
  width: 24px;
  padding: 3px;
}

.btn-group[aria-label="Icon Button Group"] > .btn > .material-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.checkbox {
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 3px;
}

.checkbox.checkbox-md {
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 3px;
}

.checkbox.checkbox-xs {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 2px;
  border-radius: 2px;
}

.checkbox:hover:not(:disabled) {
  background-color: var(--color-primary-alpha-100);
}

.checkbox::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  rotate: 0deg;
  clip-path: none;
  box-shadow: none;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.15 12.65 3.35 8.85l1.35-1.35 2.45 2.45 6.15-6.15 1.35 1.35-7.5 7.5Z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.15 12.65 3.35 8.85l1.35-1.35 2.45 2.45 6.15-6.15 1.35 1.35-7.5 7.5Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.checkbox.checkbox-md::before {
  width: 16px;
  height: 16px;
}

.checkbox.checkbox-xs::before {
  width: 14px;
  height: 14px;
}

.checkbox:checked::before {
  clip-path: none;
  rotate: 0deg;
  opacity: 1;
}

.checkbox:indeterminate::before {
  clip-path: none;
  rotate: 0deg;
  opacity: 1;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='black' x='4' y='8' width='10' height='2' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='black' x='4' y='8' width='10' height='2' rx='1'/%3E%3C/svg%3E");
}

.radio[data-size="md"] {
  width: 24px;
  height: 24px;
}

.radio[data-size="xs"] {
  width: 18px;
  height: 18px;
}

.radio[data-size="md"]::before {
  width: 10px;
  height: 10px;
}

.radio[data-size="xs"]::before {
  width: 6px;
  height: 6px;
}

.radio:hover:not(:disabled) {
  background-color: var(--color-primary-alpha-100);
}

.toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 40px;
  height: 24px;
  padding: 3px;
  border-radius: 64px;
}

.toggle::before {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.toggle:checked {
  justify-content: flex-end;
}

.toggle.toggle-xs {
  width: 32px;
  height: 20px;
  padding: 3px;
}

.toggle.toggle-xs::before {
  width: 14px;
  height: 14px;
}

.toggle.toggle-lg {
  width: 56px;
  height: 30px;
  padding: 3px;
}

.toggle.toggle-lg::before {
  width: 24px;
  height: 24px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.checkbox-group[aria-label="Checkbox Group"] {
  width: 126px;
}

.checkbox-group[aria-label="Radio Group"] {
  width: 112px;
}

.checkbox-group[aria-label="Switch Group"] {
  width: 132px;
  gap: 8px;
}

.checkbox-group > :not(:last-child) {
  margin-block-start: 0;
  margin-block-end: 0;
}

.checkbox-group .checkbox-item {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group[aria-label="Switch Group"] .checkbox-item {
  height: 24px;
  gap: 12px;
}

.checkbox-group .label {
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 20px;
  color: var(--color-base-content);
}

.checkbox-group[aria-label="Switch Group"] .label {
  font-size: 16px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 24px;
}

.checkbox-group[aria-label="Switch Group"] .toggle::before {
  width: 18px;
  height: 18px;
}

.badge[data-color],
.badge[data-component="tag"] {
  box-sizing: border-box;
  min-height: 20px;
  gap: 4px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: var(--font-weight-normal, 400);
  line-height: 18px;
  letter-spacing: 0;
}

.badge[data-color] {
  height: 20px;
  padding: 1px 8px;
}

.badge[data-color] > .material-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.badge[data-filled="true"][data-color="default"],
.badge[data-component="tag"][data-tone="default"],
.badge[data-component="tag"]:not([data-tone]) {
  background-color: var(--color-neutral-600);
  color: var(--color-primary-content);
}

.badge[data-filled="false"][data-color="default"] {
  border-color: var(--color-neutral-600);
  color: var(--color-base-content);
}

.badge[data-filled="true"][data-color="warning"] {
  color: var(--color-base-content-400);
}

.badge[data-filled="false"] {
  background-color: transparent;
}

.badge[data-component="tag"] {
  min-height: 20px;
  padding: 1px 8px;
  border-radius: 64px;
  color: var(--color-primary-content);
}

.badge[data-component="tag"][data-removable="true"] {
  padding-right: 4px;
}

.badge[data-component="tag"] .badge-close {
  width: 16px;
  height: 16px;
  margin-left: 0;
  font-size: 16px;
  line-height: 16px;
  color: currentColor;
}

[data-badge-sample-set],
[data-tag-sample-set] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  max-width: 260px;
}

[data-status-dot],
[data-priority-indicator] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-status-dot] {
  width: 20px;
  height: 20px;
  padding: 4px;
}

[data-status-dot] [data-indicator] {
  width: 12px;
  height: 12px;
  border-radius: 64px;
  background-color: var(--color-base-content-200);
}

[data-status-dot][data-state="low"] [data-indicator] {
  background-color: var(--color-success-200);
}

[data-status-dot][data-state="medium"] [data-indicator] {
  background-color: var(--color-warning-200);
}

[data-status-dot][data-state="high"] [data-indicator] {
  background-color: var(--color-error-300);
}

[data-priority-indicator] {
  width: 28px;
  height: 20px;
  gap: 2px;
  padding-block: 6px;
}

[data-priority-indicator] [data-segment] {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--color-base-content-200);
}

[data-priority-indicator][data-priority="low"] [data-segment]:first-child {
  background-color: var(--color-info-200);
}

[data-priority-indicator][data-priority="medium"] [data-segment]:nth-child(-n + 2) {
  background-color: var(--color-warning-200);
}

[data-priority-indicator][data-priority="high"] [data-segment] {
  background-color: var(--color-error-400);
}

[data-progressbar] {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  width: 104px;
  height: 20px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-neutral-alpha-300);
  border-radius: 4px;
  background-color: var(--color-neutral);
  padding: 1px 3px;
}

[data-progressbar] .progress-bar {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 33px;
  height: 12px;
  transform: translateY(-50%);
}

[data-progressbar][data-state="66"] .progress-bar {
  width: 66px;
}

[data-progressbar][data-state="99"] .progress-bar {
  width: 96px;
}

[data-progressbar] .progress-text {
  position: relative;
  inset: auto;
  z-index: 1;
  translate: none;
  transform: none;
  color: var(--color-base-content);
  line-height: 18px;
}

[data-status-dot-sample-set],
[data-priority-indicator-sample-set],
[data-progressbar-sample-set] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.tabs {
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
}

.tabs .tab {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid var(--color-neutral-alpha-300);
  border-bottom-width: 0;
  background-color: transparent;
  color: var(--color-base-content-200);
  font-size: 14px;
  line-height: 20px;
}

.tabs .tab:hover:not(.active) {
  background-color: var(--color-neutral-100);
  color: var(--color-base-content);
}

.tabs .tab.active {
  background-color: var(--color-neutral);
  border-color: var(--color-primary-alpha-300);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold, 700);
}

.tabs .tab-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tabs .tab-badge,
.tab-nav .tab-badge,
[data-variant="pill-tabs"] .tab-badge {
  display: inline-flex;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border-radius: 64px;
  background-color: var(--color-neutral-600);
  color: var(--color-primary-content);
  font-size: 12px;
  line-height: 18px;
}

.tabs .tab.active .tab-badge,
.tab-nav .tab-nav-item.active .tab-badge {
  background-color: var(--color-primary);
}

[data-tab-sample-set],
[data-tab-nav-sample-set],
[data-pill-tabs-sample-set],
[data-tab-add-sample-set] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

[data-tab-inline-add] {
  display: flex;
  align-items: stretch;
}

[data-tab-add] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

[data-tab-add-frame] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-tab-add] .tab-add-button,
[data-tab-inline-add] .tab-add-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 8px;
}

[data-tab-add] .tab-add-icon,
[data-tab-inline-add] .tab-add-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

[data-tab-add] .tab-add-button.is-add-hover,
[data-tab-add] .tab-add-button:hover {
  background-color: var(--color-neutral-100);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-tab-add] .tab-add-button.is-add-active,
[data-tab-add] .tab-add-button:active {
  border-color: var(--color-primary);
  background-color: var(--color-neutral-200);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.tab-nav {
  box-sizing: border-box;
  min-height: 40px;
  align-items: flex-start;
}

.tab-nav .tab-nav-container {
  display: flex;
  flex: 0 1 auto;
  align-items: flex-start;
  gap: 4px;
}

.tab-nav .tab-nav-item {
  height: 36px;
  padding: 8px 16px;
}

.tab-nav .tab-nav-item:hover:not(.active)::after {
  content: none;
}

.tab-nav .tab-nav-add {
  box-sizing: border-box;
  width: 24px;
  min-width: 24px;
  height: 24px;
  align-self: center;
  border: 1px solid var(--color-primary-alpha-300);
  background-color: var(--color-neutral);
  padding: 3px;
}

.tab-nav .tab-nav-add-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.tab-nav [data-state-indicator] {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 64px;
  background-color: var(--color-primary);
}

[data-pill-tabs] {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-pill-tabs][data-orientation="vertical"] {
  flex-direction: column;
  align-items: flex-start;
}

[data-variant="pill-tabs"] {
  box-sizing: border-box;
  flex-wrap: nowrap;
  gap: 4px;
  border: 1px solid var(--color-primary-alpha-300);
  border-radius: 8px;
  padding: 3px;
}

[data-pill-tabs][data-orientation="vertical"] [data-variant="pill-tabs"] {
  flex-direction: column;
}

[data-variant="pill-tabs"] .tab-item {
  box-sizing: border-box;
  width: 105px;
  height: 28px;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 6px;
}

[data-variant="pill-tabs"] .tab-item:hover:not(.tab-item-active) {
  background-color: var(--color-primary-alpha-200);
}

[data-variant="pill-tabs"] .tab-item-active {
  background-color: var(--color-primary-alpha-100);
}

[data-variant="pill-tabs"] .tab-text {
  font-size: 14px;
  line-height: 20px;
}

/* Slider / Tooltip / InlineAlert / Toast: UI-5.1 nodes 8786:9124, 2594:51482, 17540:8162, 9064:2211. */
.slider[data-slider] {
  --slider-bar-width: 100px;
  box-sizing: border-box;
  display: flex;
  width: 394px;
  height: 12px;
  align-items: center;
  overflow: visible;
  border: 1px solid rgba(126, 140, 222, 0.16);
  border-radius: 64px;
  background-color: #070b13;
  padding: 2px;
  cursor: pointer;
}

.slider[data-slider][data-value="low"] {
  --slider-bar-width: 8px;
}

.slider[data-slider][data-value="high"] {
  --slider-bar-width: 382px;
}

.slider[data-slider] [data-slider-bar] {
  position: relative;
  display: flex;
  width: var(--slider-bar-width);
  height: 8px;
  align-items: center;
  flex-shrink: 0;
  border-radius: 64px;
  background-color: #ff692a;
}

.slider[data-slider] [data-slider-handle] {
  position: absolute;
  top: 50%;
  right: -10px;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border-radius: 64px;
  background-color: #ff692a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.slider[data-slider] [data-slider-handle-inner] {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(126, 140, 222, 0.16);
  border-radius: 64px;
  background-color: #ebebeb;
}

[data-slider-sample-set],
[data-tooltip-sample-set],
[data-inline-alert-sample-set],
[data-toast-sample-set] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.tooltip-container[data-tooltip] {
  --tooltip-surface: var(--surface-raised);
  --tooltip-border: var(--border);
  --tooltip-text: var(--text);
  --tooltip-shadow: 0 8px 18px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  display: flex;
  border-color: var(--tooltip-border);
  background-color: var(--tooltip-surface);
  color: var(--tooltip-text);
  box-shadow: var(--tooltip-shadow);
  font-size: 12px;
  line-height: 18px;
  white-space: normal;
}

html[data-theme="dark"] .tooltip-container[data-tooltip] {
  --tooltip-surface: #070b13;
  --tooltip-border: rgba(126, 140, 222, 0.16);
  --tooltip-text: #ebebeb;
  --tooltip-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tooltip-container[data-tooltip][data-content-type="text-min"] {
  width: max-content;
  min-width: 95px;
  min-height: 26px;
  align-items: center;
  white-space: nowrap;
}

.tooltip-container[data-tooltip][data-content-type="text-max"] {
  width: 296px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.tooltip-container[data-tooltip][data-content-type="text-max"] [data-tooltip-text] {
  max-width: 280px;
}

.tooltip-container[data-tooltip][data-content-type="info"] {
  width: 286px;
  height: 222px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.tooltip-container[data-tooltip] [data-tooltip-row] {
  display: flex;
  width: 270px;
  align-items: center;
  justify-content: space-between;
}

.tooltip-container[data-tooltip] [data-tooltip-label] {
  width: 150px;
}

.tooltip-container[data-tooltip] [data-tooltip-value] {
  width: 100px;
  font-family: Roboto, Pretendard, sans-serif;
  line-height: 18px;
}

.alert[data-inline-alert] {
  box-sizing: border-box;
  width: 300px;
  height: 28px;
  gap: 8px;
  border-width: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
}

.alert[data-inline-alert] [data-inline-alert-icon] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
  font-size: 16px;
  line-height: 16px;
}

.alert[data-inline-alert][data-type="error"] {
  background-color: var(--color-error, #ffebef);
  color: var(--color-error-content-100, #d50000);
}

.alert[data-inline-alert][data-type="warning"] {
  background-color: var(--color-warning, #fff8e4);
  color: var(--color-warning-200, #fba434);
}

.alert[data-inline-alert][data-type="success"] {
  background-color: #e3f2ff;
  color: #009f59;
}

.alert[data-inline-alert][data-type="info"] {
  background-color: var(--color-info, #e3f2ff);
  color: var(--color-info-200, #0875dc);
}

.alert[data-inline-alert][data-type="system"] {
  background-color: var(--color-system, #f2e9ff);
  color: var(--color-system-100, #915cff);
}

.alert[data-inline-alert][data-type="neutral"] {
  background-color: #1d2544;
  color: #ebebeb;
}

.toast-message[data-toast-message] {
  box-sizing: border-box;
  width: 600px;
  max-width: none;
  min-width: 0;
  height: 64px;
  margin: 0;
  gap: 16px;
  border-style: solid;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 14px;
  line-height: 20px;
}

.toast-message[data-toast-message] .toast-message-content {
  min-width: 0;
  gap: 16px;
}

.toast-message[data-toast-message] [data-toast-icon],
.toast-message[data-toast-message] .toast-close .material-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
  font-size: 16px;
  line-height: 16px;
}

.toast-message[data-toast-message] .toast-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-base-content-inverse, #191919);
}

.toast-message[data-toast-message] .toast-title,
.toast-message[data-toast-message] .toast-message-text {
  margin: 0;
  color: currentColor;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.toast-message[data-toast-message].danger {
  border-color: var(--color-error-content-100, #d50000);
  background-color: var(--color-error, #ffebef);
  color: var(--color-error-content-100, #d50000);
}

.toast-message[data-toast-message].warning {
  border-color: var(--color-warning-100, #ffca48);
  background-color: var(--color-warning, #fff8e4);
  color: var(--color-warning-100, #ffca48);
}

.toast-message[data-toast-message].success {
  border-color: var(--color-success-100, #00cc88);
  background-color: #e3f2ff;
  color: var(--color-success-100, #00cc88);
}

.toast-message[data-toast-message].info {
  border-color: var(--color-info-100, #36a4ff);
  background-color: var(--color-info, #e3f2ff);
  color: var(--color-info-100, #36a4ff);
}

.toast-message[data-toast-message].system {
  border-color: var(--color-system-100, #915cff);
  background-color: var(--color-system, #f2e9ff);
  color: var(--color-system-100, #915cff);
}

.toast-message[data-toast-message].message {
  border-color: rgba(126, 140, 222, 0.16);
  background-color: #070b13;
  color: #ebebeb;
}

.toast-message[data-toast-message].message .toast-text {
  color: #ebebeb;
}

.toast-message[data-toast-message]:not(.message) .toast-text {
  color: var(--color-base-content-inverse, #191919);
}

[data-calendar-surface-sample-set],
[data-inline-message-sample-set] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.datetime[data-calendar-surface] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  border: 1px solid rgba(126, 140, 222, 0.16);
  border-radius: 8px;
  background-color: #070b13;
  padding: 8px;
  color: #ebebeb;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.datetime[data-calendar-surface][data-month-layout="single"] {
  width: 248px;
}

.datetime[data-calendar-surface][data-month-layout="double"] {
  width: 488px;
}

.datetime[data-calendar-surface][data-time="false"] {
  height: 348px;
}

.datetime[data-calendar-surface][data-time="true"] {
  height: 446px;
}

.datetime[data-calendar-surface] [data-calendar-header] {
  display: flex;
  min-height: 20px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.datetime[data-calendar-surface] [data-calendar-header] > strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.datetime[data-calendar-surface] [data-calendar-presets] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.datetime[data-calendar-surface] .btn {
  min-width: 24px;
  height: 24px;
  border-color: rgba(126, 140, 222, 0.16);
  background-color: #070b13;
  color: #ebebeb;
  padding: 3px 7px;
  font-size: 12px;
  line-height: 18px;
}

.datetime[data-calendar-surface] .btn-primary {
  background-color: #ff692a;
  color: #ebebeb;
}

.datetime[data-calendar-surface] .btn-icon {
  width: 24px;
  padding: 3px;
}

.datetime[data-calendar-surface] .material-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.datetime[data-calendar-surface] [data-calendar-body] {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
}

.datetime[data-calendar-surface] [data-calendar-column] {
  display: flex;
  width: 232px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.datetime[data-calendar-surface] [data-year-month-navigation] {
  display: flex;
  width: 232px;
  height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.datetime[data-calendar-surface] [data-year-month-navigation] .btn:not(.btn-icon) {
  gap: 4px;
}

.datetime[data-calendar-surface] [data-calendar-grid] {
  box-sizing: border-box;
  width: 232px;
  padding: 8px;
}

.datetime[data-calendar-surface] [data-calendar-weekdays],
.datetime[data-calendar-surface] [data-calendar-dates] {
  display: grid;
  grid-template-columns: repeat(7, 24px);
  gap: 8px;
}

.datetime[data-calendar-surface] [data-calendar-weekdays] {
  margin-bottom: 8px;
}

.datetime[data-calendar-surface] [data-calendar-weekdays] span,
.datetime[data-calendar-surface] [data-calendar-date] {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #ebebeb;
  padding: 0;
  font-size: 12px;
  line-height: 18px;
}

.datetime[data-calendar-surface] [data-calendar-date][data-calendar-date-tone="muted"] {
  color: #808080;
}

.datetime[data-calendar-surface] [data-calendar-date][data-empty="true"] {
  pointer-events: none;
}

.datetime[data-calendar-surface] [data-calendar-time-group] {
  display: flex;
  width: 160px;
  height: 90px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.datetime[data-calendar-surface] [data-calendar-time-fields] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.datetime[data-calendar-surface] [data-calendar-time-slot] {
  display: flex;
  width: 40px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #ebebeb;
  font-size: 12px;
  line-height: 18px;
}

.datetime[data-calendar-surface] [data-calendar-time-input] {
  box-sizing: border-box;
  width: 40px;
  height: 28px;
  padding: 4px 8px;
  color: #ebebeb;
}

.datetime[data-calendar-surface] [data-calendar-time-input] input {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  outline: 0;
}

.datetime[data-calendar-surface] [data-calendar-time-colon] {
  padding-top: 5px;
  color: #ebebeb;
  font-size: 14px;
  line-height: 20px;
}

.datetime[data-calendar-surface] [data-calendar-now] {
  height: 20px;
  border: 0;
  padding: 0;
  color: #ff692a;
  text-decoration: underline;
}

.datetime[data-calendar-surface] [data-calendar-footer] {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
}

.alert.alert-general[data-inline-message] {
  box-sizing: border-box;
  width: 280px;
  height: 28px;
  gap: 4px;
  border-width: 0;
  border-radius: 8px;
  background-color: #1d2544;
  padding: 4px 8px;
  color: #ebebeb;
  font-size: 14px;
  line-height: 20px;
}

.alert.alert-general[data-inline-message] [data-inline-message-text] {
  white-space: nowrap;
}

.alert.alert-general[data-inline-message] [data-inline-code] {
  display: inline-flex;
  height: 20px;
  align-items: center;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: D2Coding, monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

[data-blankslate] {
  box-sizing: border-box;
  display: flex;
  width: 1192px;
  height: 992px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(126, 140, 222, 0.16);
  border-radius: 8px;
  background-color: #070b13;
  padding: 16px;
  color: #ebebeb;
}

[data-blankslate-title],
[data-blankslate-context],
[data-blankslate-subtitle] {
  margin: 0;
  text-align: center;
}

[data-blankslate-title] {
  color: #ebebeb;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

[data-blankslate-context] {
  color: #ebebeb;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

[data-blankslate-subtitle] {
  color: #b5b5b5;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.btn[data-blankslate-primary] {
  height: 30px;
  border-color: rgba(126, 140, 222, 0.16);
  background-color: #ff692a;
  padding: 5px 13px;
  color: #ebebeb;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.btn[data-blankslate-link] {
  height: 20px;
  min-height: 20px;
  border: 0;
  padding: 0;
  color: #ff692a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
}

.divider-vertical[data-divider] {
  display: inline-block;
  width: 2px;
  height: 12px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background-color: rgba(126, 140, 222, 0.16);
  box-shadow: none;
}

[data-modal-overlay] {
  position: absolute;
  inset: 16px;
  z-index: 7;
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.24);
}

[data-modal-overlay][hidden] {
  display: none;
}

.modal[data-modal-shell] {
  box-sizing: border-box;
  display: flex;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: clip;
  border-color: var(--semantic-color-border-default);
  background-color: var(--semantic-color-background-canvas);
  color: var(--semantic-color-text-primary);
  box-shadow:
    0 2px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.modal[data-modal-size="1120"] {
  width: 1120px;
}

.modal[data-modal-size="880"] {
  width: 880px;
}

.modal[data-modal-size="600"] {
  width: 600px;
}

.modal[data-modal-size="360"] {
  width: 360px;
}

.modal[data-modal-shell] > .modal-title {
  box-sizing: border-box;
  display: flex;
  min-height: 56px;
  align-items: center;
  border-bottom-color: var(--semantic-color-interactive-brand-accent);
  padding: 16px;
}

.modal[data-modal-shell] [data-modal-label] {
  display: grid;
  gap: 4px;
}

.modal[data-modal-shell] [data-modal-label] strong {
  color: var(--semantic-color-text-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.modal[data-modal-shell] [data-modal-label] span {
  color: var(--semantic-color-text-helper);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.modal[data-modal-shell] > .modal-content {
  box-sizing: border-box;
  display: grid;
  min-height: 120px;
  flex: 1 1 auto;
  gap: 16px;
  overflow: auto;
  padding: 16px;
}

.modal[data-modal-shell] [data-modal-field] {
  width: 100%;
}

.modal[data-modal-shell] > .modal-footer {
  box-sizing: border-box;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top-color: var(--semantic-color-divider-default);
  padding: 16px;
}

.modal[data-modal-shell] [data-modal-leading-option] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--semantic-color-text-primary);
  font-size: 14px;
  line-height: 20px;
}

.modal[data-modal-shell] [data-modal-footer-actions] {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pagination[data-pagination] {
  box-sizing: border-box;
  width: 782px;
  max-width: 100%;
  color: var(--color-base-content, #191919);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.pagination[data-pagination] + .pagination[data-pagination] {
  margin-top: 20px;
}

.pagination[data-pagination][data-pagination-variant="default"] {
  display: block;
}

.pagination[data-pagination] [data-pagination-container] {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pagination[data-pagination][data-pagination-variant="widget-only"] {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pagination[data-pagination] [data-pagination-cluster],
.pagination[data-pagination] [data-pagination-actions] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination[data-pagination] [data-pagination-control] {
  box-sizing: border-box;
  min-height: 24px;
  border-color: var(--color-neutral-alpha-300, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  background-color: var(--color-neutral, #ffffff);
  color: var(--color-base-content, #191919);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.pagination[data-pagination] [data-pagination-direction],
.pagination[data-pagination] [data-pagination-page-button] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 3px;
}

.pagination[data-pagination] [data-pagination-direction] .material-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.pagination[data-pagination] [data-pagination-page-button] {
  text-align: center;
}

.pagination[data-pagination] [data-pagination-page-size] {
  width: 52px;
  height: 24px;
  justify-content: center;
  gap: 4px;
  padding: 3px 5px 3px 9px;
}

.pagination[data-pagination] [data-pagination-page-size] .material-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.pagination[data-pagination] [data-pagination-page-input] {
  display: flex;
  width: 56px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 3px;
}

.pagination[data-pagination] [data-pagination-page-input] input {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 18px;
  padding: 0;
  text-align: center;
  outline: 0;
}

.pagination[data-pagination] [data-pagination-page-input] input::-webkit-outer-spin-button,
.pagination[data-pagination] [data-pagination-page-input] input::-webkit-inner-spin-button {
  appearance: none;
}

.pagination[data-pagination] [data-pagination-meta] {
  color: var(--color-base-content, #191919);
}

.pagination[data-pagination] [data-pagination-helper] {
  color: var(--color-base-content-200, #666666);
}

.pagination[data-pagination] [data-pagination-state="active"] {
  border-color: var(--color-primary, #ff692a);
  background-color: var(--color-neutral-100, #f5f5f5);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.pagination[data-pagination] [data-pagination-state="disabled"] {
  background-color: var(--color-neutral-100, #f5f5f5);
  color: var(--color-base-content-200, #666666);
  cursor: default;
  box-shadow: none;
}

html[data-theme="dark"] .pagination[data-pagination],
.dark-theme .pagination[data-pagination] {
  color: #ebebeb;
}

html[data-theme="dark"] .pagination[data-pagination] [data-pagination-control],
.dark-theme .pagination[data-pagination] [data-pagination-control] {
  border-color: rgba(126, 140, 222, 0.16);
  background-color: #070b13;
  color: #ebebeb;
}

html[data-theme="dark"] .pagination[data-pagination] [data-pagination-meta],
.dark-theme .pagination[data-pagination] [data-pagination-meta] {
  color: #ebebeb;
}

html[data-theme="dark"] .pagination[data-pagination] [data-pagination-helper],
.dark-theme .pagination[data-pagination] [data-pagination-helper] {
  color: #808080;
}

html[data-theme="dark"] .pagination[data-pagination] [data-pagination-state="active"],
.dark-theme .pagination[data-pagination] [data-pagination-state="active"] {
  border-color: #ff692a;
  background-color: #0e1322;
}

html[data-theme="dark"] .pagination[data-pagination] [data-pagination-state="disabled"],
.dark-theme .pagination[data-pagination] [data-pagination-state="disabled"] {
  background-color: #151c33;
  color: #808080;
}

/* Table Cell / Data Table Cell / Sheet Table Cell: UI-5.1 node 51:1459. */
[data-table-cell-sample-set] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

[data-cell-section] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

[data-cell-section-title] {
  margin: 0;
  color: #b5b5b5;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

[data-cell-specimens] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

[data-cell-row] {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

[data-table-example] {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.table-cell[data-grid] {
  --table-cell-surface: var(--spec-surface-default, var(--color-neutral));
  --table-cell-surface-emphasis: var(--spec-surface-emphasis, var(--color-neutral-200));
  --table-cell-divider: var(--spec-border, var(--color-neutral-alpha-300));
  --table-cell-accent: var(--spec-accent, var(--color-primary));
  --table-cell-brand-emphasis: var(--accent-soft, var(--color-primary-alpha-100));
  --table-cell-brand-active: color-mix(in srgb, var(--table-cell-accent) 30%, transparent);
  --table-cell-text-primary: var(--spec-text-primary, var(--color-base-content));
  --table-cell-text-secondary: var(--spec-text-secondary, var(--color-base-content-100));
  --table-cell-text-helper: var(--spec-text-helper, var(--color-base-content-200));
  --table-cell-license-border: var(--semantic-color-utility-border-alpha, rgba(23, 39, 101, 0.16));
  --table-cell-badge-surface: var(--semantic-color-surface-badge-neutral-strong, var(--color-neutral-600));
  --table-cell-license-surface: var(--color-license-blue, #0094ff);
  --table-cell-error: var(--spec-danger, var(--color-error-content-100));
  box-sizing: border-box;
  position: relative;
  display: flex;
  height: 36px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--table-cell-divider);
  background-color: var(--table-cell-surface);
  padding: 8px;
  color: var(--table-cell-text-primary);
  font-family: Pretendard, Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

html[data-theme="dark"] .table-cell[data-grid] {
  --table-cell-surface: #070b13;
  --table-cell-surface-emphasis: #151c33;
  --table-cell-divider: rgba(126, 140, 222, 0.16);
  --table-cell-accent: #ff692a;
  --table-cell-brand-emphasis: rgba(255, 105, 42, 0.15);
  --table-cell-brand-active: rgba(255, 105, 42, 0.3);
  --table-cell-text-primary: #ebebeb;
  --table-cell-text-secondary: #b5b5b5;
  --table-cell-text-helper: #808080;
  --table-cell-license-border: rgba(255, 255, 255, 0.1);
  --table-cell-badge-surface: #616ebb;
  --table-cell-license-surface: #0094ff;
  --table-cell-error: #d50000;
}

.table-cell[data-grid="table"] {
  width: 460px;
}

.table-cell[data-grid="table"][data-column="selection"] {
  width: 36px;
  flex: 0 0 36px;
  justify-content: center;
}

.table-cell[data-grid="table"][data-cell-role="header-label"] {
  width: auto;
  min-width: 0;
}

.table-cell[data-grid="table"][data-cell-width="36"] {
  width: 36px;
  flex: 0 0 36px;
}

.table-cell[data-grid="table"][data-cell-width="41"] {
  width: 41px;
  flex: 0 0 41px;
}

.table-cell[data-grid="table"][data-cell-width="53"] {
  width: 53px;
  flex: 0 0 53px;
}

.table-cell[data-grid="table"][data-cell-width="100"] {
  width: 100px;
  flex: 0 0 100px;
}

.table-cell[data-grid="table"][data-cell-width="120"] {
  width: 120px;
  flex: 0 0 120px;
}

.table-cell[data-grid="table"][data-cell-role="body-text"] {
  width: 460px;
}

.table-cell[data-grid="table"][data-cell-role="center"],
.table-cell[data-grid="table"][data-cell-role="progress"] {
  justify-content: center;
}

.table-cell[data-grid="table"][data-cell-role="progress"] [data-progressbar] {
  flex: 0 0 auto;
}

.table-cell[data-grid="data"],
.table-cell[data-grid="sheet"] {
  width: 240px;
  font-family: D2Coding, Pretendard, monospace;
}

.table-cell[data-cell-type="header"][data-grid="table"],
.table-cell[data-cell-type="header"][data-grid="data"] {
  border-bottom-color: var(--table-cell-accent);
}

.table-cell[data-cell-type="header"][data-state="hover"],
.table-cell[data-cell-type="header"][data-state="dropdown-pending"] {
  background-color: var(--table-cell-surface-emphasis);
}

.table-cell[data-cell-type="body"][data-state="hover"],
.table-cell[data-cell-type="body-rich"][data-state="hover"],
.table-cell[data-cell-type="input"][data-state="hover"],
.table-cell[data-grid="sheet"][data-mode="drag"] {
  background-color: var(--table-cell-brand-emphasis);
}

.table-cell[data-cell-type="body"][data-state="active"],
.table-cell[data-cell-type="body-rich"][data-state="active"],
.table-cell[data-cell-type="input"][data-state="active"] {
  background-color: var(--table-cell-brand-active);
}

.table-cell[data-cell-type="input"] {
  gap: 8px;
  padding: 6px 8px;
}

.table-cell[data-cell-type="input"][data-state="hover"],
.table-cell[data-cell-type="input"][data-state="active"] {
  border-top: 1px solid var(--table-cell-divider);
}

.table-cell[data-cell-type="license"][data-state="expired"] {
  background-color: var(--color-error-alpha, rgba(255, 42, 49, 0.5));
}

.table-cell[data-cell-type="license"][data-state="out-of-service"] {
  background-color: var(--color-warning-alpha, rgba(254, 195, 61, 0.5));
}

.table-cell[data-cell-type="license"][data-state="invalid"] {
  background-color: var(--color-alert-alpha, rgba(255, 105, 42, 0.5));
}

.table-cell[data-grid="data"][data-mode="none-data-pending"] {
  background-color: var(--table-cell-divider);
}

.table-cell[data-grid="data"][data-mode="add-data"] {
  background-color: var(--color-primary-alpha, rgba(255, 105, 42, 0.5));
}

.table-cell[data-grid="sheet"][data-mode="add-data"] {
  border: 1px solid var(--color-primary-alpha, rgba(255, 105, 42, 0.5));
  border-bottom-color: var(--color-primary-alpha, rgba(255, 105, 42, 0.5));
}

.table-cell[data-grid="sheet"][data-mode="validation-error"] {
  border: 1px solid var(--table-cell-error);
}

.table-cell .checkbox {
  flex: 0 0 auto;
}

.table-cell .checkbox.checkbox-xs {
  width: 16px;
  height: 16px;
  padding: 0;
}

.table-cell .checkbox.checkbox-xs::before {
  width: 16px;
  height: 16px;
}

.table-cell .checkbox.checkbox-md {
  flex-basis: 20px;
}

.table-cell [data-cell-icon] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--table-cell-text-secondary);
  font-size: 20px;
  line-height: 20px;
}

.table-cell [data-cell-text] {
  flex: 0 0 auto;
  color: var(--table-cell-text-primary);
  font-weight: 300;
}

.table-cell[data-grid="data"] [data-cell-text],
.table-cell[data-grid="sheet"] [data-cell-text] {
  font-weight: 400;
}

.table-cell [data-cell-weight="header"] {
  color: var(--table-cell-text-secondary);
  font-weight: 700;
}

.table-cell[data-state="hover"] [data-cell-weight="header"] {
  color: var(--table-cell-text-primary);
  font-weight: 400;
}

.table-cell [data-cell-badge] {
  height: 18px;
  min-height: 18px;
  gap: 4px;
  padding: 0 8px;
  background-color: var(--table-cell-badge-surface);
  color: var(--color-primary-content, #ebebeb);
}

.table-cell [data-cell-badge] [data-cell-icon] {
  width: 16px;
  height: 16px;
  color: currentColor;
  font-size: 16px;
  line-height: 16px;
}

.table-cell [data-cell-license-badge] {
  height: 20px;
  min-height: 20px;
  padding: 1px 8px;
  border: 1px solid var(--table-cell-license-border);
  background-color: var(--table-cell-license-surface);
  color: var(--color-primary-content, #ebebeb);
  font-size: 12px;
  line-height: 18px;
}

.table-cell .btn {
  flex: 0 0 auto;
}

.table-cell .btn:not(.btn-icon-only) {
  min-width: 0;
}

.table-cell .btn.btn-icon-only {
  width: 24px;
}

.table-cell .toggle.toggle-xs {
  flex: 0 0 auto;
}

.table-cell [data-status-dot] {
  flex: 0 0 auto;
}

.table-cell [data-priority-indicator] {
  flex: 0 0 auto;
}

.table-cell [data-cell-field] {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  gap: 4px;
  padding: 3px 9px;
}

.table-cell [data-cell-field="input"] {
  position: relative;
  padding-right: 22px;
}

.table-cell [data-cell-field="input"] input {
  min-width: 0;
  color: var(--table-cell-text-helper);
  font-size: 12px;
  line-height: 18px;
}

.table-cell [data-cell-field="select"] {
  width: auto;
  justify-content: flex-start;
}

.table-cell [data-cell-field] [data-cell-icon],
.table-cell [data-cell-field] .expand-icon {
  width: 16px;
  height: 16px;
  color: var(--table-cell-text-helper);
  font-size: 16px;
  line-height: 16px;
}

.table-cell [data-cell-field-trailing] {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
}

.table-cell [data-cell-dropdown] {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 16px;
}

.table-cell [data-cell-edge-divider] {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 2px;
  height: 12px;
  transform: translateY(-50%);
  background-color: var(--table-cell-divider);
}

.table-cell [data-cell-edit-icon] {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.table-cell [data-cell-edit-dot] {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 3px;
  height: 3px;
  border-radius: 64px;
  background-color: var(--table-cell-accent);
}

.glass-container[data-surface-foundation="overview"] {
  box-sizing: border-box;
  width: min(100%, 520px);
  min-height: 320px;
  --glass-radius: 8px;
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-surface: rgba(137, 137, 137, 0.05);
  overflow: hidden;
  animation: none;
}

.glass-container[data-surface-foundation="overview"] > .glass-container-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  color: var(--color-base-content);
}

[data-surface-foundation-summary] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

[data-surface-foundation-summary] strong,
[data-surface-foundation-item] strong {
  color: var(--color-base-content);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--text-sm--line-height);
}

[data-surface-foundation-summary] span,
[data-surface-foundation-item] span,
[data-surface-foundation-item] p {
  margin: 0;
  color: var(--color-base-content-100);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

[data-surface-foundation-grid] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.glass-container[data-surface-foundation-item],
.glass-card-container[data-surface-foundation-item] {
  box-sizing: border-box;
  min-height: 112px;
  border-radius: 8px;
}

.glass-container[data-surface-foundation-item] {
  --glass-radius: 8px;
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  overflow: hidden;
  animation: none;
}

.glass-card-container[data-surface-foundation-item] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.glass-card-container[data-card-item="specimen"] {
  box-sizing: border-box;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  border-color: rgba(126, 140, 222, 0.16);
  background-image: linear-gradient(92.11233447830095deg, rgba(255, 255, 255, 0.05) 0%, rgba(153, 153, 153, 0.02) 100.03%);
  overflow: hidden;
}

.glass-container[data-widget-container="specimen"] {
  box-sizing: border-box;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  --glass-radius: 8px;
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-surface: rgba(137, 137, 137, 0.05);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
  --glass-ellipse-top: -30px;
  --glass-ellipse-width: 200px;
  --glass-ellipse-height: 60px;
  overflow: hidden;
  animation: none;
}

html[data-theme="light"] .glass-container[data-widget-container="specimen"] {
  --glass-surface: rgba(137, 137, 137, 0.05);
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
}

.glass-container[data-section-container="specimen"] {
  box-sizing: border-box;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  --glass-radius: 8px;
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-surface: rgba(137, 137, 137, 0.05);
  --glass-highlight: rgba(255, 125, 74, 0.604);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
  --glass-top-line-left: 49px;
  --glass-top-line-width: 150px;
  --glass-bottom-line-left: auto;
  --glass-bottom-line-right: 29px;
  --glass-left-line-top: 49px;
  --glass-left-line-height: 100px;
  --glass-right-line-top: auto;
  --glass-right-line-height: 150px;
  --glass-ellipse-top: -30px;
  --glass-ellipse-width: 200px;
  --glass-ellipse-height: 60px;
  overflow: hidden;
  animation: none;
}

.glass-container[data-section-container="specimen"] .glass-container-bottom-line {
  right: var(--glass-bottom-line-right);
  width: 300px;
}

.glass-container[data-section-container="specimen"] .glass-container-right-line {
  top: auto;
  bottom: 29px;
}

html[data-theme="light"] .glass-container[data-section-container="specimen"] {
  --glass-surface: rgba(137, 137, 137, 0.05);
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
}

.glass-container[data-drawer-container="specimen"] {
  box-sizing: border-box;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  --glass-radius: 8px;
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-surface: rgba(14, 19, 34, 0.5);
  --glass-highlight: rgba(255, 125, 74, 0.604);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
  --glass-top-line-left: 49px;
  --glass-top-line-width: 150px;
  --glass-bottom-line-left: auto;
  --glass-bottom-line-right: 29px;
  --glass-left-line-top: 49px;
  --glass-left-line-height: 100px;
  --glass-right-line-top: auto;
  --glass-right-line-height: 150px;
  --glass-ellipse-top: -30px;
  --glass-ellipse-width: 200px;
  --glass-ellipse-height: 60px;
  overflow: hidden;
  animation: none;
}

.glass-container[data-drawer-container="specimen"] .glass-container-bottom-line {
  right: var(--glass-bottom-line-right);
  width: 300px;
}

.glass-container[data-drawer-container="specimen"] .glass-container-right-line {
  top: auto;
  bottom: 29px;
}

html[data-theme="light"] .glass-container[data-drawer-container="specimen"] {
  --glass-surface: rgba(14, 19, 34, 0.5);
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
}

.glass-container[data-surface-foundation-item] > .glass-container-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.glass-container[data-surface-foundation-item="drawer"] {
  --glass-surface: rgba(14, 19, 34, 0.5);
}

.glass-container[data-surface-foundation-item="section"],
.glass-container[data-surface-foundation-item="widget"] {
  --glass-surface: rgba(137, 137, 137, 0.05);
}

html[data-theme="light"] .glass-container[data-surface-foundation="overview"],
html[data-theme="light"] .glass-container[data-surface-foundation-item],
html[data-theme="light"] .glass-container[data-widget-container="specimen"],
html[data-theme="light"] .glass-container[data-section-container="specimen"],
html[data-theme="light"] .glass-container[data-drawer-container="specimen"] {
  --glass-surface: rgba(0, 0, 0, 0.03);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-highlight: rgba(255, 125, 74, 0.4);
  --glass-ellipse: rgba(114, 114, 114, 0.3);
}

html[data-theme="light"] .glass-card-container[data-surface-foundation-item],
html[data-theme="light"] .glass-card-container[data-card-item="specimen"] {
  border-color: rgba(0, 0, 0, 0.08);
  background-image: linear-gradient(92.11233447830095deg, rgba(0, 0, 0, 0.035) 0%, rgba(0, 0, 0, 0.012) 100.03%);
}

/* Tree Panel Composition: UI-5.1 13663:6329 / 13663:6343.
   Reuses glass-container, btn, input, dropdown-list, checkbox, and label grammar. */
[data-tree-panel-composition] {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: 300px;
  height: 1000px;
  max-width: 100%;
  align-items: center;
  color: var(--color-base-content);
}

[data-tree-panel-composition][data-expanded="false"] {
  width: 24px;
  justify-content: center;
}

.glass-container[data-tree-panel-shell] {
  width: 300px;
  height: 100%;
  flex: 0 0 300px;
  overflow: visible;
  --glass-radius: 8px;
  --glass-blur: 75px;
  --glass-surface: rgba(137, 137, 137, 0.05);
  --glass-border: 1px solid rgba(126, 140, 222, 0.16);
  --glass-highlight: rgba(255, 125, 74, 0.4);
  --glass-ellipse: rgba(114, 114, 114, 0.2);
  --glass-top-line-left: 37.5px;
  --glass-top-line-width: 112.5px;
  --glass-bottom-line-left: 52.5px;
  --glass-bottom-line-right: 22.5px;
  --glass-left-line-top: 125px;
  --glass-left-line-height: 250px;
  --glass-right-line-top: 550px;
  --glass-right-line-height: 375px;
  --glass-ellipse-top: -38px;
  --glass-ellipse-width: 170px;
  --glass-ellipse-height: 77px;
}

[data-tree-panel-composition][data-expanded="false"] .glass-container[data-tree-panel-shell] {
  width: 1px;
  flex-basis: 1px;
  overflow: hidden;
}

[data-tree-panel-composition][data-expanded="false"] .glass-container-decorations {
  display: none;
}

[data-tree-panel-content] {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

[data-tree-panel-header-actions] {
  display: flex;
  width: 100%;
  height: 24px;
  justify-content: flex-end;
}

[data-tree-panel-action].btn {
  padding-right: 2px;
}

[data-tree-panel-action] .material-icon[data-icon],
[data-tree-panel-toggle] .material-icon[data-icon] {
  width: 18px;
  height: 18px;
  overflow: hidden;
  color: currentColor;
  font-family: "Material Icons Outlined";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  text-transform: none;
}

[data-tree-panel-action] .material-icon[data-icon]::before,
[data-tree-panel-toggle] .material-icon[data-icon]::before {
  content: attr(data-icon);
}

[data-tree-panel-body] {
  box-sizing: border-box;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--color-neutral-alpha-300);
  border-radius: 8px;
  padding: 8px;
}

[data-tree-panel-body] .input.input-search {
  width: calc(100% + 2px);
  flex: 0 0 24px;
  margin-inline: -1px;
}

[data-tree-panel-item-list].dropdown-list {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
}

[data-tree-panel-row].dropdown-option {
  box-sizing: border-box;
  width: calc(100% + 2px);
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 0;
  margin-inline: -1px;
  gap: 8px;
  padding: 4px;
  color: var(--color-base-content);
}

[data-tree-panel-row].dropdown-option .label {
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 20px;
}

[data-tree-panel-row][data-depth="1"].dropdown-option {
  padding-left: 26px;
}

[data-tree-panel-row][data-depth="2"].dropdown-option {
  padding-left: 48px;
}

[data-tree-panel-row][aria-selected="true"].dropdown-option {
  background-color: var(--color-primary-alpha-100);
  color: var(--color-base-content);
}

[data-tree-panel-toggle].btn {
  position: absolute;
  top: 56px;
  right: -12px;
  z-index: 2;
  box-shadow: var(--preview-shell-shadow);
}

[data-tree-panel-composition][data-expanded="false"] [data-tree-panel-toggle].btn {
  left: 0;
  right: auto;
}

html[data-theme="light"] .glass-container[data-tree-panel-shell] {
  --glass-surface: rgba(0, 0, 0, 0.03);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-highlight: rgba(255, 125, 74, 0.4);
  --glass-ellipse: rgba(114, 114, 114, 0.3);
}

/* Filter & Multi Sort: UI-5.1 204:330.
   Reuses btn, input, dropdown-list, dropdown-option, checkbox, and label grammar. */
[data-filter-multi-sort] {
  box-sizing: border-box;
  width: 544px;
  max-width: 100%;
  min-height: 412px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-base-content);
}

[data-filter-multi-sort-toolbar],
[data-filter-multi-sort-applied-row] {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

[data-filter-multi-sort-toolbar] {
  min-height: 236px;
}

[data-filter-multi-sort-applied-row] {
  min-height: 164px;
}

[data-filter-multi-sort] .material-icon[data-icon] {
  width: 18px;
  height: 18px;
  overflow: hidden;
  color: currentColor;
  font-family: "Material Icons Outlined";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

[data-filter-multi-sort] .material-icon[data-icon]::before {
  content: attr(data-icon);
}

[data-filter-multi-sort] .material-icon[data-filter-icon="16"] {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

[data-filter-trigger].btn,
[data-sort-trigger].btn {
  width: 24px;
  height: 24px;
  padding: 3px;
}

[data-filter-trigger][data-state="active"].btn,
[data-sort-trigger][data-state="active"].btn,
[data-filter-add-set][data-state="active"] > .btn,
[data-filter-applied-item][data-state="active"].btn,
[data-sort-applied-set][data-state="active"] > .btn {
  border-color: var(--color-primary);
  background-color: var(--color-neutral-200);
  color: var(--color-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

[data-filter-add-set] {
  position: relative;
  flex: 0 0 auto;
}

[data-filter-add-set] > .btn,
[data-sort-add-button].btn {
  width: 63px;
  padding-inline: 9px 3px;
}

[data-filter-reset-button].btn {
  width: 50px;
  padding-inline: 9px;
}

[data-filter-add-panel].dropdown-list {
  box-sizing: border-box;
  position: absolute;
  z-index: 4;
  top: 28px;
  left: 0;
  width: 200px;
  height: 208px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  margin: 0;
  padding: 4px;
  border-color: var(--color-neutral-alpha-300);
  background-color: var(--color-neutral);
  box-shadow: var(--preview-shell-shadow);
}

[data-filter-search].input.input-search {
  width: 100%;
  height: 24px;
  flex: 0 0 24px;
  padding-inline: 4px !important;
}

[data-filter-search] input {
  min-width: 0;
  font-size: 12px;
  line-height: 18px;
}

[data-filter-search-count] {
  flex: 0 0 auto;
  color: var(--color-base-content-200);
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 18px;
}

[data-filter-option-list] {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

[data-filter-option].dropdown-option {
  box-sizing: border-box;
  width: 100%;
  min-height: 28px;
  margin: 0;
  gap: 4px;
  padding: 4px;
}

[data-filter-option].dropdown-option .label {
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 20px;
}

[data-filter-scroll-affordance] {
  position: absolute;
  top: 31px;
  right: 3px;
  width: 4px;
  height: 69px;
  border-radius: 999px;
  background: var(--color-neutral-alpha-300);
}

[data-filter-applied-item].btn,
[data-sort-applied-item].btn {
  padding-inline: 9px 3px;
}

[data-filter-applied-item][data-state="applied"].btn,
[data-sort-applied-set][data-state="active"] > .btn {
  color: var(--color-primary);
}

[data-filter-applied-item][data-item-type="normal"][data-state="applied"].btn {
  width: 129px;
}

[data-filter-applied-item][data-item-type="calendar"][data-state="applied"].btn {
  width: 247px;
}

[data-sort-applied-set] {
  position: relative;
  flex: 0 0 auto;
}

[data-sort-applied-item].btn {
  width: 89px;
}

[data-sort-panel] {
  box-sizing: border-box;
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 0;
  width: 296px;
  height: 136px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--color-neutral-alpha-300);
  border-radius: 8px;
  background-color: var(--color-neutral);
  padding: 8px;
  box-shadow: var(--preview-shell-shadow);
}

[data-sort-panel-title],
[data-sort-rule],
[data-sort-panel-actions] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

[data-sort-panel-title] {
  width: 280px;
  height: 20px;
  justify-content: space-between;
  padding-inline: 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 18px;
}

[data-sort-panel-title] .btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

[data-sort-rule] {
  width: 280px;
  height: 24px;
  gap: 16px;
  padding-inline: 8px 0;
}

[data-sort-rule-button].btn {
  width: 78px;
  padding-inline: 7px 1px;
}

[data-sort-rule-remove].btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

[data-sort-panel-actions] {
  width: 280px;
  gap: 8px;
}

[data-sort-panel-action].btn {
  padding-inline: 7px;
}

html[data-theme="light"] [data-filter-add-panel].dropdown-list,
html[data-theme="light"] [data-sort-panel] {
  box-shadow: 0 2px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* breadcrumb: UI-5.1 6301:4310. Reuses sonar5.css .breadcrumbs grammar. */
[data-breadcrumb-stack] {
  box-sizing: border-box;
  display: grid;
  width: 391px;
  max-width: 100%;
  min-height: 196px;
  gap: 20px;
  justify-items: start;
  padding: 20px;
}

.breadcrumbs[data-breadcrumb] {
  box-sizing: border-box;
  min-height: 24px;
  margin: 0;
  padding: 2px 0;
  list-style: none;
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.breadcrumbs[data-breadcrumb] > li {
  min-width: 0;
  white-space: nowrap;
}

.breadcrumbs[data-breadcrumb] > li > .breadcrumbs-caret {
  width: 18px;
  height: 18px;
  overflow: hidden;
  color: var(--color-base-content-200);
  font-family: "Material Icons Outlined";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.breadcrumbs[data-breadcrumb] > li > .breadcrumbs-caret::before {
  content: attr(data-icon);
}

/* Navigation shell: UI-5.1 GNB 9001:7167, SNB 12236:8684. */
.gnb-shell {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--spec-border);
  background: transparent;
  color: var(--spec-text-primary);
  padding: 12px 16px;
  overflow: hidden;
}

.gnb-shell__left,
.gnb-shell__utility {
  min-width: 0;
  display: flex;
  align-items: center;
}

.gnb-shell__left {
  flex: 1 1 0;
  gap: 10px;
}

.gnb-shell__utility {
  flex: 1 1 0;
  gap: 8px;
  justify-content: flex-end;
}

.gnb-shell__logo {
  display: block;
  width: 139px;
  height: 24px;
  object-fit: contain;
}

.gnb-shell__logo--dark {
  display: none;
}

html[data-theme="dark"] .gnb-shell__logo--light {
  display: none;
}

html[data-theme="dark"] .gnb-shell__logo--dark {
  display: block;
}

.gnb-shell__divider {
  width: 2px;
  height: 12px;
  flex: 0 0 2px;
  background: var(--spec-border);
}

.gnb-shell__breadcrumb {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  color: var(--spec-accent);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.gnb-shell__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gnb-shell__icon-button,
.gnb-shell__tenant {
  appearance: none;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--spec-text-primary);
  font: inherit;
  padding: 0;
}

.gnb-shell__icon-button {
  width: 24px;
  flex: 0 0 24px;
  padding: 3px;
}

.gnb-shell__icon-button--snb {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.gnb-shell__icon-button--utility {
  border-color: var(--spec-border);
  background: var(--spec-surface-default);
}

.gnb-shell__tenant {
  gap: 4px;
  flex: 0 0 auto;
  border-color: var(--spec-border);
  background: var(--spec-surface-default);
  padding: 3px 3px 3px 9px;
  color: var(--spec-text-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.gnb-shell .material-icon[data-icon],
.snb-shell .material-icon[data-icon],
.snb-control .material-icon[data-icon],
.user-console-trigger .material-icon[data-icon] {
  width: 1em;
  height: 1em;
  overflow: hidden;
  color: currentColor;
  font-family: "Material Icons Outlined";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.gnb-shell .material-icon[data-icon]::before,
.snb-shell .material-icon[data-icon]::before,
.snb-control .material-icon[data-icon]::before,
.user-console-trigger .material-icon[data-icon]::before {
  content: attr(data-icon);
}

.snb-control {
  appearance: none;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--spec-text-primary);
  padding: 0;
}

.snb-control .material-icon[data-icon] {
  font-size: 20px;
}

.snb-control__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
}

.btn.btn-icon-only.user-console-trigger {
  width: 24px;
  height: 24px;
  padding: 3px;
}

.btn.btn-icon-only.user-console-trigger .material-icon[data-icon] {
  font-size: 18px;
}

.btn.btn-icon-only.user-console-trigger[aria-expanded="true"],
.btn.btn-icon-only.user-console-trigger.is-active {
  border-color: var(--color-primary);
  background-color: var(--color-neutral-200);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.snb-shell {
  box-sizing: border-box;
  width: 200px;
  height: 1032px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid var(--spec-border);
  background: transparent;
  color: var(--spec-text-primary);
  overflow: hidden;
}

.snb-shell__app {
  box-sizing: border-box;
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--spec-border);
  padding: 4px 8px;
}

.snb-shell__app-button,
.snb-shell__row {
  appearance: none;
  box-sizing: border-box;
  width: 184px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--spec-text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
}

.snb-shell__app-button {
  padding: 6px 8px;
}

.snb-shell__nav-list {
  box-sizing: border-box;
  width: 200px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.snb-shell__row {
  position: relative;
  padding: 6px 32px 6px 8px;
}

.snb-shell__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  opacity: 0.65;
}

.snb-shell__chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  color: currentColor;
  font-size: 20px;
  transform: translateY(-50%);
}

/* Screen output shell: generated screen HTML composition uses current-spec GNB/SNB. */
[data-screen-shell] {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  background: var(--color-base-100, #f7f8fb);
  color: var(--color-base-content, #111827);
}

[data-screen-shell="false"] {
  display: block;
}

[data-screen-shell-body] {
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
}

[data-screen-shell="false"] [data-screen-shell-body],
[data-screen-shell-snb="false"] [data-screen-shell-body] {
  grid-template-columns: minmax(0, 1fr);
}

[data-screen-workspace] {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

main.workspace-page[data-screen-family] {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
}

main.workspace-page.list-page[data-screen-family="List"] {
  flex-direction: column;
  gap: 16px;
}

[data-screen-section="component-references"] table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 18px;
}

[data-screen-section="component-references"] th,
[data-screen-section="component-references"] td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}

[data-screen-section="component-references"] code {
  display: inline-block;
  margin: 0 4px 4px 0;
  white-space: normal;
}

[data-screen-section="family-pattern"] {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
  border-radius: 8px;
  background: var(--color-base-100, #fff);
}

[data-screen-section="decision-framework"] {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
  border-radius: 8px;
  background: var(--color-base-100, #fff);
}

[data-screen-section="family-pattern"] h2 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 24px;
}

[data-screen-section="decision-framework"] h2 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

[data-screen-section="family-pattern"] p {
  margin: 0;
  color: var(--color-base-content-600, #64748b);
  font-size: 12px;
  line-height: 18px;
}

[data-screen-decision-framework] {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
}

[data-screen-decision-row] {
  display: grid;
  grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
}

[data-screen-decision-row] dt {
  color: var(--color-base-content-600, #64748b);
  font-size: 12px;
  line-height: 18px;
}

[data-screen-decision-row] dd {
  margin: 0;
  color: var(--color-base-content, #111827);
  font-size: 12px;
  line-height: 18px;
}

[data-screen-pattern-grid] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

[data-screen-pattern-card] {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
  border-radius: 8px;
  background: var(--color-neutral-50, rgba(255, 255, 255, 0.72));
}

[data-screen-pattern-card] strong {
  font-size: 12px;
  line-height: 18px;
}

[data-screen-pattern-card] span,
[data-screen-pattern-state] {
  color: var(--color-base-content-600, #64748b);
  font-size: 11px;
  line-height: 16px;
}

[data-screen-pattern-states] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-screen-pattern-state] {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 8px;
  border: 1px solid var(--color-neutral-200, rgba(126, 140, 222, 0.16));
  border-radius: 999px;
  background: var(--color-neutral-50, rgba(255, 255, 255, 0.72));
}

@media (max-width: 520px) {
  [data-surface-foundation-grid] {
    grid-template-columns: 1fr;
  }
}

@keyframes component-loading-spin {
  to {
    transform: rotate(360deg);
  }
}