/* ==========================================================================
   Tag Component - Unified Tag Styles
   모든 태그/뱃지에 사용하는 통합 컴포넌트
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Tag - Default (Small for cards)
   --------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Tag Sizes
   --------------------------------------------------------------------------- */
/* Small (default) - for cards */
.tag--sm {
  padding: var(--spacing-1);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

/* Large - for edit pages, selectors */
.tag--lg {
  padding: var(--spacing-2);
  font-size: var(--font-size-md);
  border-radius: var(--radius-base);
}

/* ---------------------------------------------------------------------------
   Tag States
   --------------------------------------------------------------------------- */
/* Active/Selected state */
.tag--active,
.tag.active {
  border-color: var(--color-fill-dark);
  background: var(--color-bg-white);
}

/* ---------------------------------------------------------------------------
   Tag Selector (for forms)
   --------------------------------------------------------------------------- */
.tag-selector {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.tag-selector__input {
  display: none;
}

.tag-selector__label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--spacing-list-sm) var(--spacing-list-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: 1;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  transition: all 0.15s ease;
  cursor: pointer;
}

.tag-selector__input:checked + .tag-selector__label,
.tag-selector__label--active {
  border-color: var(--color-fill-dark);
  background: var(--color-fill-dark);
  color: var(--color-bg-white);
}

/* ---------------------------------------------------------------------------
   Tag Add Button
   --------------------------------------------------------------------------- */
.tag-add {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  min-height: 32px;
  padding: var(--spacing-list-sm) var(--spacing-list-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: 1;
  color: var(--color-bg-white);
  background: var(--color-fill-dark);
  border: 1px solid var(--color-fill-dark);
  border-radius: var(--radius-base);
  cursor: pointer;
}

.tag-add svg {
  stroke: var(--color-bg-white);
}

/* ---------------------------------------------------------------------------
   Tag Custom Input (inline editing)
   --------------------------------------------------------------------------- */
.tag-custom-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-list-sm);
}

.tag-custom-input {
  min-height: 32px;
  width: 120px;
  padding: var(--spacing-list-sm) var(--spacing-list-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: 1;
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  outline: none;
}

.tag-custom-input:focus {
  border-color: var(--color-fill-dark);
}

.tag-custom-input::placeholder {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Tag Modal (centered popup for adding custom tags)
   --------------------------------------------------------------------------- */
.tag-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-section);
}

.tag-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.tag-modal__content {
  position: relative;
  width: 100%;
  max-width: 300px;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-section);
  box-shadow: var(--shadow-modal);
}

.tag-modal__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 var(--spacing-section);
}

.tag-modal__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--spacing-list-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  outline: none;
}

.tag-modal__input:focus {
  border-color: var(--color-fill-dark);
}

.tag-modal__input::placeholder {
  color: var(--color-text-muted);
}

.tag-modal__actions {
  display: flex;
  gap: var(--spacing-list-sm);
  margin-top: var(--spacing-section);
}

.tag-modal__btn {
  flex: 1;
  height: 44px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
}

.tag-modal__btn--cancel {
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}

.tag-modal__btn--add {
  color: var(--color-bg-white);
  background: var(--color-fill-dark);
}