/**
 * Modal Components
 *
 * BEM 명명 규칙 사용
 */

/* Modal Backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-backdrop--open {
  opacity: 1;
  visibility: visible;
}

/* Modal */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal--open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Modal Sizes */
.modal--sm {
  max-width: 400px;
}

.modal--lg {
  max-width: 700px;
}

.modal--xl {
  max-width: 900px;
}

.modal--fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

/* Modal Header */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-neutral-200);
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.modal__close:hover {
  background-color: var(--color-neutral-100);
}

/* Modal Body */
.modal__body {
  flex: 1;
  padding: var(--spacing-6);
  overflow-y: auto;
}

/* Modal Footer */
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--color-neutral-200);
}

/* Confirm Dialog */
.confirm-dialog .modal__body {
  text-align: center;
}

.confirm-dialog__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-4);
  color: var(--color-warning);
}

.confirm-dialog__message {
  color: var(--color-text-secondary);
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: var(--spacing-6);
  right: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  z-index: var(--z-toast);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-neutral-800);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast--success {
  background-color: var(--color-success);
}

.toast--error {
  background-color: var(--color-error);
}

.toast--warning {
  background-color: var(--color-warning);
}

.toast__message {
  flex: 1;
  font-size: var(--font-size-sm);
}

.toast__close {
  color: currentColor;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.toast__close:hover {
  opacity: 1;
}

/* Tooltip */
.tooltip {
  position: absolute;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  background-color: var(--color-neutral-800);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  pointer-events: none;
}

[data-tooltip]:hover .tooltip {
  opacity: 1;
  visibility: visible;
}