/*
 * 공통 프리미티브 스타일 (foundation)
 * 토큰만 참조한다. 값은 design-system/{foundation,localboard}/tokens.json 에서 바꾼다.
 * 포커스 링은 globals.css 의 전역 :focus-visible 규칙에 맡긴다 — 여기서 outline 을 지우지 않는다 (B4).
 */

/* ---------- Button ---------- */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-l);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-body-xs-size);
  font-weight: 700;
  letter-spacing: var(--text-body-xs-tracking);
  line-height: var(--text-body-xs-leading);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.ds-button__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--duration-base) var(--ease-out);
}

.ds-button:hover:not(:disabled, [aria-disabled="true"]) {
  opacity: 0.72;
}

.ds-button:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(0.98);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
  cursor: not-allowed;
}

.ds-button:disabled .ds-button__label,
.ds-button[aria-disabled="true"] .ds-button__label {
  opacity: 0.4;
}

.ds-button--primary {
  background: var(--color-fg-default);
  color: var(--color-fg-inverse);
}

.ds-button--secondary {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-fg-secondary);
}

.ds-button--ghost {
  background: transparent;
  color: var(--color-fg-muted);
}

.ds-button--accent {
  background: var(--color-accent-default);
  color: var(--color-fg-inverse);
}

.ds-button--danger {
  background: var(--color-danger-default);
  color: var(--color-fg-inverse);
}

.ds-button--s,
.ds-button--m {
  padding: 0 var(--space-3);
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  letter-spacing: var(--text-label-sm-tracking);
  line-height: var(--text-label-sm-leading);
}

.ds-button--s {
  min-height: var(--control-height-s);
}

.ds-button--m {
  min-height: var(--control-height-m);
}

.ds-button--l {
  min-height: var(--control-height-l);
}

.ds-button--xl {
  min-height: var(--control-height-xl);
}

.ds-button--icon {
  padding: 0;
}

.ds-button--icon.ds-button--s {
  width: var(--control-height-s);
}

.ds-button--icon.ds-button--m {
  width: var(--control-height-m);
}

.ds-button--icon.ds-button--l {
  width: var(--control-height-l);
}

.ds-button--icon.ds-button--xl {
  width: var(--control-height-xl);
}

@media (pointer: coarse) {
  .ds-button,
  .ds-button--s,
  .ds-button--m,
  .ds-button--l,
  .ds-button--xl {
    min-height: var(--control-touch-min);
  }

  .ds-button--icon.ds-button--s,
  .ds-button--icon.ds-button--m,
  .ds-button--icon.ds-button--l {
    width: var(--control-touch-min);
  }
}

/* ---------- Card ---------- */
.ds-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  /* 카드는 그림자 대신 헤어라인 (B1) */
  box-shadow: none;
}

.ds-card--pad-sm {
  padding: var(--space-3);
}

.ds-card--pad-md {
  padding: var(--space-4);
}

.ds-card--pad-lg {
  padding: var(--space-6);
}

.ds-card--interactive {
  transition:
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.ds-card--interactive:hover {
  border-color: var(--color-accent-border-strong);
}

.ds-card--interactive:focus-within {
  border-color: var(--color-accent-default);
}

.ds-card--interactive:active {
  transform: scale(0.99);
}

/* ---------- Badge ---------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  line-height: var(--text-caption-leading);
  white-space: nowrap;
}

.ds-badge--neutral {
  background: var(--color-bg-soft);
  color: var(--color-fg-secondary);
}

.ds-badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-fg);
}

.ds-badge--positive {
  background: var(--color-positive-soft);
  color: var(--color-positive-default);
}

.ds-badge--info {
  background: var(--color-info-soft);
  color: var(--color-info-fg);
}

.ds-badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-fg);
}

.ds-badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-fg);
}

/* ---------- Chip ---------- */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-height-m);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card);
  color: var(--color-fg-secondary);
  font-family: inherit;
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  letter-spacing: var(--text-label-sm-tracking);
  line-height: var(--text-label-sm-leading);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.ds-chip:hover {
  opacity: 0.72;
}

.ds-chip--selected {
  border-color: var(--color-fg-default);
  background: var(--color-fg-default);
  color: var(--color-fg-inverse);
}

.ds-chip__count {
  color: var(--color-fg-muted);
  font-size: var(--text-caption-size);
  font-variant-numeric: tabular-nums;
}

.ds-chip--selected .ds-chip__count {
  color: var(--color-fg-inverse-muted);
}

@media (pointer: coarse) {
  .ds-chip {
    min-height: var(--control-touch-min);
  }
}

/* ---------- Input · Textarea · Field ---------- */
.ds-input,
.ds-textarea {
  width: 100%;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-leading);
  transition: border-color var(--duration-base) var(--ease-out);
}

.ds-input {
  height: var(--control-touch-min);
  padding: 0 var(--space-3);
}

.ds-textarea {
  padding: var(--space-3);
  resize: vertical;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--color-fg-faint);
}

.ds-input:focus,
.ds-textarea:focus {
  border-color: var(--color-accent-default);
}

.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] {
  border-color: var(--color-danger-default);
}

.ds-input:disabled,
.ds-textarea:disabled {
  color: var(--color-fg-faint);
  cursor: not-allowed;
}

.ds-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-field__label {
  margin-bottom: var(--space-2);
  color: var(--color-fg-secondary);
  font-size: var(--text-label-sm-size);
  font-weight: 700;
  line-height: var(--text-label-sm-leading);
}

.ds-field__hint,
.ds-field__error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
}

.ds-field__hint {
  color: var(--color-fg-muted);
}

.ds-field__error {
  color: var(--color-danger-fg);
  font-weight: var(--text-caption-weight);
}

/* ---------- EmptyState ---------- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-10) * 8);
  padding: var(--space-10) var(--space-5);
  text-align: center;
}

.ds-empty--compact {
  min-height: 0;
  padding: var(--space-6) var(--space-4);
}

.ds-empty__icon {
  display: grid;
  place-items: center;
  width: var(--control-height-xl);
  height: var(--control-height-xl);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  color: var(--color-fg-muted);
}

.ds-empty--accent .ds-empty__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent-fg);
}

.ds-empty__title {
  margin: 0;
  color: var(--color-fg-default);
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  letter-spacing: var(--text-heading-tracking);
  line-height: var(--text-heading-leading);
}

.ds-empty__body {
  max-width: calc(var(--space-10) * 8);
  margin: var(--space-2) 0 0;
  color: var(--color-fg-muted);
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-leading);
}

.ds-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ---------- Skeleton ---------- */
.ds-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: var(--space-4);
  background: var(--color-bg-skeleton);
}

.ds-skeleton--sm {
  border-radius: var(--radius-sm);
}

.ds-skeleton--md {
  border-radius: var(--radius-md);
}

.ds-skeleton--xl {
  border-radius: var(--radius-xl);
}

.ds-skeleton--pill {
  border-radius: var(--radius-pill);
}

.ds-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-bg-skeleton-shine), transparent);
  transform: translateX(-100%);
  content: "";
}

/* 움직임 축소를 원하지 않을 때만 반짝인다 (A5) */
@media (prefers-reduced-motion: no-preference) {
  .ds-skeleton::after {
    animation: ds-skeleton-shine 1.4s var(--ease-out) infinite;
  }
}

@keyframes ds-skeleton-shine {
  to {
    transform: translateX(100%);
  }
}