/**
 * WFOPS components.css
 * btn, card, badge, form-control, section-title, action-row
 * 점진 이전용 - 기존 common.css와 병행
 */

/* --- Button System --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-secondary {
  background: #e5e5e5;
  border-color: #ccc;
  color: #333;
}

.btn-secondary:hover:not(:disabled) {
  background: #ddd;
  border-color: #999;
}

.btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

/* --- Card --- */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.card:last-child { margin-bottom: 0; }

/* --- Badge --- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  line-height: 1.2;
}

.badge-primary { background: #3b82f6; color: #fff; }
.badge-success { background: #22c55e; color: #fff; }
.badge-danger { background: #dc2626; color: #fff; }
.badge-secondary { background: #9ca3af; color: #fff; }

/* --- Form Control --- */
.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #3b82f6;
}

/* --- Section Title --- */
.section-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* --- Action Row --- */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.action-row .btn { margin: 0; }