/* ================================
   タブ全体（横スクロール）
================================ */
.card-tabs {
  display: flex;
  overflow-x: auto;
  padding: var(--space-sm) var(--space-lg);
  gap: var(--space-sm);
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none; /* Firefox */
}

.card-tabs::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* ================================
   タブ（共通）
================================ */
.card-tab {
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-label);
  white-space: nowrap;
  color: var(--color-text-sub);
  background: #FFFFFF;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

/* ホバー（PC 用） */
.card-tab:hover {
  background: #F3F4F6;
}

/* ================================
   アクティブタブ
================================ */
.card-tab--active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  background: rgba(37, 99, 235, 0.08); /* 青の薄い背景 */
}

/* ================================
   追加タブ（＋）
================================ */
.card-tab--add {
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

.card-tab--add:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* ================================
   スマホでのタップ時
================================ */
.card-tab:active {
  background: #E5E7EB;
}