@supports (corner-shape: squircle) {
.squircle,
.banner-track,
.header-search,
.header-account-avatar {
    corner-shape: var(--corner-shape-squircle);
  }
}

@supports (corner-shape: squircle) {
.button:not(.button--pill) {
    corner-shape: var(--corner-shape-squircle);
  }
}

.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: var(--size-control-md);
  padding-inline: var(--space-md);
  border: var(--line-width-default) solid rgb(var(--color-gray-900));
  border-radius: var(--radius-xl);
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-gray-100));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-md);
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
}

.button--sm {
  height: var(--size-control-sm);
  padding-inline: var(--space-sm);
  border-radius: calc(var(--radius-md) * 2);
}

.button--lg {
  height: var(--size-control-lg);
  padding-inline: var(--space-2xl);
}

.button--square {
  width: var(--size-control-md);
  padding: 0;
}

.button--sm.button--square {
  width: var(--size-control-sm);
}

.button--lg.button--square {
  width: var(--size-control-lg);
}

.button--pill {
  border-radius: var(--radius-full);
}

.button--secondary {
  border-color: rgb(var(--color-gray-500));
  background: rgb(var(--color-gray-100));
  color: rgb(var(--color-gray-900));
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: rgb(var(--color-gray-900));
}

@media (hover: hover) {
.button:is(:enabled, a, summary):hover {
    background: rgb(var(--color-gray-900));
    border-color: rgb(var(--color-gray-900));
  }

.button--primary:is(:enabled, a, summary):hover {
    background: rgb(var(--color-gray-500));
    border-color: transparent;
  }

.button--secondary:is(:enabled, a, summary):hover {
    background: rgb(var(--color-gray-100));
    border-color: rgb(var(--color-gray-500));
  }

.button--ghost:is(:enabled, a, summary):hover {
    background: rgb(var(--color-gray-100));
    border-color: transparent;
  }
}

.button:is(:enabled, a, summary):active {
  transform: translateY(var(--line-width-default));
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
}

@media (prefers-reduced-motion: no-preference) {
.button {
    transition: background-color var(--duration-ui-default) var(--easing-default), border-color var(--duration-ui-default) var(--easing-default), color var(--duration-ui-default) var(--easing-default);
  }
}

@media (forced-colors: active) {
.button {
    border: var(--line-width-default) solid ButtonText;
  }
}

@supports (corner-shape: squircle) {
.pagination-link {
    corner-shape: var(--corner-shape-squircle);
  }
}

.pagination-pill {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-full);
  corner-shape: round;
  background: rgb(var(--color-gray-50));
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
}

.pagination-pill::-webkit-scrollbar { display: none; }

.pagination-number,
.pagination-arrow,
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--pagination-number-box-size);
  height: var(--pagination-number-box-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-medium);
}

.pagination-number[aria-current="page"] {
  color: rgb(var(--color-gray-900));
  font-weight: var(--font-weight-semibold);
}

.pagination-number:focus-visible,
.pagination-arrow:is(:hover, :focus-visible):enabled {
  color: rgb(var(--color-gray-900));
}

.pagination-arrow::before {
  content: "";
  width: var(--font-size-xs);
  height: var(--font-size-xs);
  background: currentColor;
  mask: var(--pagination-arrow-icon) center / contain no-repeat;
}

.pagination-arrow--previous {
  --pagination-arrow-icon: url("/assets/icons/chevron-left.svg?v=70ca6ce8");
}

.pagination-arrow--next {
  --pagination-arrow-icon: url("/assets/icons/chevron-right.svg?v=d1400e82");
}

.pagination-arrow:disabled {
  opacity: var(--opacity-disabled);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-md);
  height: var(--size-control-md);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-xl);
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-md);
}

.pagination-link:hover {
  background: rgb(var(--color-gray-100));
}

.pagination-link:disabled {
  color: rgb(var(--color-gray-500));
}

@media (prefers-reduced-motion: no-preference) {
.pagination-link {
    transition: background-color var(--duration-ui-default) var(--easing-default), border-color var(--duration-ui-default) var(--easing-default), color var(--duration-ui-default) var(--easing-default);
  }
}

@supports (corner-shape: squircle) {
.input {
    corner-shape: var(--corner-shape-squircle);
  }
}

.field {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.field-label {
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-md);
}

.field-hint {
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
}

.field[data-invalid="true"] .field-hint {
  color: rgb(var(--color-gray-900));
}

.input {
  width: 100%;
  min-width: 0;
  height: var(--dropdown-item-block-size);
  padding-inline: var(--dropdown-padding-inline);
  border: var(--line-width-default) solid var(--dropdown-border-color);
  border-radius: var(--dropdown-border-radius);
  background: var(--dropdown-background-color);
  color: rgb(var(--color-gray-900));
  font-size: var(--dropdown-font-size);
  font-weight: var(--dropdown-font-weight);
  line-height: var(--dropdown-line-height);
}

.field[data-invalid="true"] .input {
  border-color: rgb(var(--color-gray-900));
}

.input:disabled {
  color: var(--dropdown-text-color);
}

@media (forced-colors: none) {
.input:where(:enabled):is(:hover, :focus-visible) {
    border-color: var(--dropdown-border-color-active);
  }
}

.input--textarea {
  height: auto;
  min-height: calc(var(--dropdown-item-block-size) * 3);
  padding-block: var(--dropdown-padding-inline);
  resize: vertical;
}

.input--with-icon {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: rgb(var(--color-gray-500));
}

.input--with-icon i {
  flex-shrink: 0;
  font-size: var(--size-icon-md);
}

.icon-search {
  display: grid;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

.icon-search::before {
  content: "";
  background: currentColor;
  mask: url("/assets/icons/search.svg") center / contain no-repeat;
}

input[type="search"]::-webkit-search-cancel-button {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: rgb(var(--color-gray-500));
  mask: url("/assets/icons/close-square.svg") center / contain no-repeat;
  cursor: pointer;
}

.input--with-icon input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: rgb(var(--color-gray-900));
  font: inherit;
}

@media (forced-colors: active) {
.input {
    border: var(--line-width-default) solid ButtonText;
  }
}

@supports (corner-shape: squircle) {
.selection-picker-field,
.selection-picker-overlay,
.selection-picker-option,
.selection-picker-tag {
    corner-shape: var(--corner-shape-squircle);
  }

@supports (appearance: base-select) {
.input--select::picker(select),
.input--select option {
      corner-shape: var(--corner-shape-squircle);
    }
}
}

.input--select,
.input--select option,
.selection-picker-field,
.selection-picker-tag,
.selection-picker-option {
  font-size: var(--dropdown-font-size);
  font-weight: var(--dropdown-font-weight);
  line-height: var(--dropdown-line-height);
}

.input--select,
.selection-picker-field {
  position: relative;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-height: var(--dropdown-item-block-size);
  padding-inline-start: var(--dropdown-padding-inline);
  padding-inline-end: calc(var(--dropdown-padding-inline) + var(--size-icon-2xs) + var(--space-2xs));
  border: var(--line-width-default) solid var(--dropdown-border-color);
  border-radius: var(--dropdown-border-radius);
  background-color: var(--dropdown-background-color);
  color: var(--dropdown-text-color);
  text-align: start;
  cursor: pointer;
}

.input--select {
  height: var(--dropdown-item-block-size);
  corner-shape: var(--corner-shape-squircle);
  background-image: url("/assets/icons/arrow-down.svg?v=992951ef");
  background-repeat: no-repeat;
  background-position: right var(--dropdown-padding-inline) center;
  background-size: var(--size-icon-2xs);
  text-align-last: start;
  appearance: none;
}

.input--select-connected { width: max-content; }

.input-select-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

@supports (width: calc-size(max-content, size)) {
.input--select-connected { width: calc-size(max-content, round(up, size, var(--space-2xs))); }
}

.selection-picker-field::after {
  position: absolute;
  inset-inline-end: var(--dropdown-padding-inline);
  width: var(--size-icon-2xs);
  height: var(--size-icon-2xs);
  background: var(--dropdown-border-color);
  mask: url("/assets/icons/arrow-down.svg?v=992951ef") center / contain no-repeat;
  content: "";
}

.selection-picker[data-open="true"] .selection-picker-field::after {
  mask-image: url("/assets/icons/arrow-up.svg?v=99d40fe8");
}

.input--select option:checked,
.selection-picker-option[aria-selected="true"] {
  font-weight: var(--dropdown-font-weight-selected);
}

@supports (appearance: base-select) {
.input--select,
.input--select::picker(select) { appearance: base-select; }

.input--select {
    padding-block: 0;
    background-image: none;
  }

.input--select::picker-icon {
    display: block;
    position: absolute;
    inset-inline-end: var(--dropdown-padding-inline);
    width: var(--size-icon-2xs);
    height: var(--size-icon-2xs);
    margin: 0;
    content: "";
    background: var(--dropdown-border-color);
    mask: url("/assets/icons/arrow-down.svg?v=992951ef") center / contain no-repeat;
    transform: none;
  }

.input--select:open::picker-icon { mask-image: url("/assets/icons/arrow-up.svg?v=99d40fe8"); }

.input--select::picker(select) {
    position-area: block-end;
    position-try-fallbacks: none;
    inline-size: anchor-size(self-inline);
    max-block-size: min(var(--dropdown-list-block-size-max), var(--runtime-dropdown-available-block-size, 100dvh));
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: var(--line-width-default) solid var(--dropdown-border-color-active);
    border-block-start: 0;
    border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
    corner-shape: var(--corner-shape-squircle);
    background: var(--dropdown-background-color);
  }

.input--select option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: var(--dropdown-item-block-size);
    padding-inline: var(--dropdown-padding-inline);
    border-radius: 0;
    background: none;
    color: var(--dropdown-text-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.input--select option::checkmark { display: none; }

.input--select:open {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    /* 선 두께를 유지해 열기 전후 글자의 세로 위치를 보존한다. */
    border-block-end-color: transparent;
  }

.input--select[data-dropdown-placement="above"]::picker(select) {
    position-area: block-start;
    border-block-start: var(--line-width-default) solid var(--dropdown-border-color-active);
    border-block-end: 0;
    border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
  }

.input--select[data-dropdown-placement="above"]:enabled:open {
    border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
    border-block-start-color: var(--dropdown-background-color);
    border-block-end-color: var(--dropdown-border-color-active);
  }

.input--select-connected::picker(select) {
    min-inline-size: anchor-size(self-inline);
    max-inline-size: anchor-size(self-inline);
  }

@media (forced-colors: none) {
.input--select option:is(:hover, :focus-visible, :checked) {
      background: var(--gradient-primary-vertical);
      background-clip: text;
      color: transparent;
    }

.input--select:enabled:is(:hover, :active, :open, :focus-visible)::picker-icon {
      background: var(--dropdown-border-color-active);
    }
}
}

@media (forced-colors: none) {
.input--select:enabled:is(:hover, :active, :open, :focus-visible),
.selection-picker:not([data-disabled="true"]):is(:hover, [data-open="true"], :focus-within) .selection-picker-field {
    border-color: var(--dropdown-border-color-active);
  }

.input--select:not([data-dropdown-placement="above"]):open { border-block-end-color: transparent; }

.selection-picker:not([data-disabled="true"]):is(:hover, [data-open="true"], :focus-within) .selection-picker-field::after {
    background: var(--dropdown-border-color-active);
  }
}

.selection-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

.selection-picker-field {
  display: flex;
  width: 100%;
}

.selection-picker[data-open="true"] .selection-picker-field {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-block-end-color: var(--dropdown-background-color);
}

.selection-picker[data-open="true"][data-placement="above"] .selection-picker-field {
  border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
  border-block-start-color: var(--dropdown-background-color);
  border-block-end-color: var(--dropdown-border-color-active);
}

.selection-picker[data-disabled="true"] .selection-picker-field {
  color: rgb(var(--color-gray-500));
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.selection-picker-values {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.selection-picker-tag {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--dropdown-line-height);
  padding-inline: 0;
  border-radius: var(--dropdown-border-radius);
  background: var(--dropdown-background-color);
  color: var(--dropdown-text-color);
}

.selection-picker:has(select[multiple]) .selection-picker-tag {
  padding-inline: var(--dropdown-padding-inline);
  border: var(--line-width-default) solid var(--dropdown-border-color);
}

.selection-picker-tag-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-picker-remove {
  display: grid;
  visibility: hidden;
  flex-shrink: 0;
  place-items: center;
  color: rgb(var(--color-gray-500));
  font-size: var(--size-icon-xs);
}

.selection-picker[data-open="true"] .selection-picker-remove {
  visibility: visible;
}

.selection-picker-remove:hover {
  color: rgb(var(--color-gray-900));
}

.selection-picker-placeholder {
  color: var(--dropdown-text-color);
}

.selection-picker-overlay {
  position: fixed;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
  max-height: var(--dropdown-list-block-size-max);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: var(--line-width-default) solid var(--dropdown-border-color-active);
  border-radius: var(--dropdown-border-radius);
  background: var(--dropdown-background-color);
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

.selection-picker[data-open="true"] .selection-picker-overlay {
  border-block-start: 0;
  border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
}

.selection-picker[data-open="true"][data-placement="above"] .selection-picker-overlay {
  border-block-start: var(--line-width-default) solid var(--dropdown-border-color-active);
  border-block-end: 0;
  border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
}

.selection-picker-options {
  display: grid;
  gap: 0;
}

.selection-picker-option {
  display: flex;
  width: 100%;
  min-height: var(--dropdown-item-block-size);
  align-items: center;
  padding-inline: var(--dropdown-padding-inline);
  border-radius: 0;
  color: var(--dropdown-text-color);
  text-align: left;
}

.selection-picker-option:disabled {
  color: rgb(var(--color-gray-500));
  cursor: not-allowed;
}

@media (forced-colors: none) {
.selection-picker-option:is(:hover, :focus-visible, [aria-selected="true"]) {
    background: var(--gradient-primary-vertical);
    background-clip: text;
    color: transparent;
  }
}

.new-item-indicator {
  position: absolute;
  z-index: var(--z-index-indicator);
  inset-inline-start: calc(var(--new-item-indicator-anchor-inline) - var(--new-item-indicator-size) / 2 - var(--new-item-indicator-inset-inline));
  width: var(--new-item-indicator-size);
  height: var(--new-item-indicator-size);
  border-radius: var(--radius-full);
  background: rgb(var(--color-primary-start));
  pointer-events: none;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--size-control-md);
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  cursor: pointer;
}

.choice input {
  flex-shrink: 0;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin: 0;
  border: var(--line-width-default) solid rgb(var(--color-gray-500));
  border-radius: var(--radius-sm);
  background: rgb(var(--color-gray-100)) center / 100% no-repeat;
  cursor: pointer;
  appearance: none;
}

.choice input:hover {
  border-color: rgb(var(--color-gray-500));
}

.choice input:checked {
  border-color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-900));
}

.choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E");
}

.choice input:disabled {
  border-color: rgb(var(--color-gray-500));
  background-color: rgb(var(--color-gray-100));
}

.choice input:checked:disabled {
  border-color: rgb(var(--color-gray-500));
  background-color: rgb(var(--color-gray-500));
}

.choice:has(input:disabled) {
  color: rgb(var(--color-gray-500));
  cursor: not-allowed;
}

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--size-control-sm);
  padding-inline: var(--space-sm);
  border: var(--line-width-default) solid transparent;
  border-radius: var(--radius-sm);
  background: rgb(var(--color-gray-200));
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-sm);
  white-space: nowrap;
}

.badge + .badge {
  margin-inline-start: var(--space-xs);
}

.badge[aria-pressed="false"] {
  border-color: rgb(var(--color-gray-500));
  background: none;
  color: rgb(var(--color-gray-500));
}

.badge[aria-pressed="false"]:hover {
  color: rgb(var(--color-gray-900));
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.badge-group .badge + .badge {
  margin-inline-start: 0;
}

@media (forced-colors: active) {
.badge {
    border: var(--line-width-default) solid ButtonText;
  }
}

.accordion {
  border-block-end: var(--line-width-default) solid rgb(var(--color-gray-500));
}

.accordion:first-of-type {
  border-block-start: var(--line-width-default) solid rgb(var(--color-gray-500));
}

.accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--size-control-md);
  padding-block: var(--space-xs);
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-md);
  list-style: none;
  cursor: pointer;
}

.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-summary::after {
  flex-shrink: 0;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  background: rgb(var(--color-gray-500));
  mask: url("/assets/icons/chevron-right.svg?v=d1400e82") center / contain no-repeat;
  transform: rotate(90deg);
  content: "";
}

.accordion[open] .accordion-summary::after {
  transform: rotate(-90deg);
}

.accordion-body {
  padding-block: 0 var(--space-md);
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
}

@media (prefers-reduced-motion: no-preference) {
.accordion-summary::after {
    transition: transform var(--duration-ui-default) var(--easing-default);
  }
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--size-control-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-gray-100));
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
}

:root .toast[popover] {
  position: fixed;
  inset-block-start: calc(var(--header-block-size) + var(--space-md));
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: var(--layout-gutter-inline);
  width: max-content;
  max-width: calc(100% - var(--layout-gutter-inline) - var(--layout-gutter-inline));
  max-height: calc(100dvh - var(--header-block-size) - var(--space-md) - var(--layout-gutter-inline));
  margin: 0;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--line-width-default) solid rgb(var(--color-gray-500));
  border-radius: var(--radius-squircle-sm);
  corner-shape: var(--corner-shape-squircle);
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-gray-100));
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-line;
  text-align: start;
  pointer-events: none;
}

.toast[popover]:not(:popover-open) { display: none; }

.toast[popover][data-toast-follows-pointer] {
  inset-block-start: var(--runtime-toast-inset-block, var(--toast-viewport-gap));
  inset-inline-start: var(--runtime-toast-inset-inline, var(--toast-viewport-gap));
  inset-inline-end: auto;
  max-height: calc(100dvh - var(--toast-viewport-gap) - var(--toast-viewport-gap));
}

.toast[popover]:popover-open { display: block; }

.toast[popover]::backdrop { pointer-events: none; }

.toast[popover][data-toast-scrollable] { pointer-events: auto; }

@media (forced-colors: active) {
.toast {
    border: var(--line-width-default) solid ButtonText;
  }
}

/* 내용 폭에 맞는 조작 요소를 공통 간격 격자로 올림한다. */
@supports (width: calc-size(max-content, size)) {
  :is(.button:not(.button--square), .badge, .pagination-link, .toast) {
    justify-content: center;
    width: calc-size(max-content, round(up, size, var(--space-2xs)));
  }
}