/* ==========================================================================
   Form Field Component - Unified Form Field Styles
   라벨 + 필드 구조의 통합 컴포넌트
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Form Field
   --------------------------------------------------------------------------- */
.form-field {
  margin-bottom: var(--spacing-section);
}

.form-field__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);           /* 11px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-list-sm);    /* 8px - 라벨과 필드 사이 */
}

.form-field__required {
  color: var(--color-danger);
}

/* Show red border on invalid fields after form submission attempt */
.was-validated .form-field__input:invalid {
  border-color: var(--color-warning);
}

.form-field__hint {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--spacing-1) 0 0 0;
}

/* ---------------------------------------------------------------------------
   Input Base
   --------------------------------------------------------------------------- */
.form-field__input {
  width: 100%;
  padding: 0 var(--spacing-section);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.form-field__input:focus {
  border-color: var(--color-fill-dark);
}

.form-field__input::placeholder {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Input Sizes
   --------------------------------------------------------------------------- */
/* Small - for compact inputs (duration numbers) */
.form-field__input--sm {
  height: var(--btn-height-sm);
  font-size: var(--font-size-sm);
}

/* Medium - default single line input */
.form-field__input--md {
  height: var(--btn-height-md);             /* 40px */
}

/* Large - for textarea */
.form-field__input--lg {
  min-height: var(--textarea-height-sm);
  height: auto;
  padding: var(--spacing-input-y) var(--spacing-section);
  resize: none;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Input Variants
   --------------------------------------------------------------------------- */
/* Select */
.form-field__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23858281' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-section) center;
}

html.dark .form-field__input--select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239C9895' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Number (centered text) */
.form-field__input--number {
  width: 64px;
  text-align: center;
  padding: 0 var(--spacing-list-sm);
  font-weight: var(--font-weight-medium);
}

/* Completed state (strikethrough for completed todos) */
.form-field__input--completed {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Inline Fields (for duration: number + label pairs)
   --------------------------------------------------------------------------- */
.form-field__inline {
  display: flex;
  gap: var(--spacing-section-gap);
}

.form-field__inline-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-list-sm);
}

.form-field__inline-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------------------------
   Tag Selector Container
   --------------------------------------------------------------------------- */
.form-field__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-list-sm);
}

/* Remove break - Add tag button flows with other tags */
.form-field__tags-break {
  flex-basis: 100%;
  height: var(--spacing-list-sm);
}

/* ---------------------------------------------------------------------------
   Character Counter
   --------------------------------------------------------------------------- */
.char-counter {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-1);
}

.char-counter--warning {
  color: var(--color-warning);
}

.char-counter--over {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}

.form-field__input--over {
  border-color: var(--color-danger);
}

.detail-btn--disabled {
  opacity: var(--opacity-hint);
  pointer-events: none;
}