@props([
    // ラベル（赤バッジの文言）。既定は「次の作業」。
    'label' => '次の作業',
])
@once
@push('head')
<style>
  .next-action { display: flex; align-items: flex-start; gap: .5rem;
    border: 1px solid var(--bs-danger-border-subtle, #f1aeb5);
    border-left: 4px solid var(--bs-danger, #dc3545);
    background: var(--bs-danger-bg-subtle, #fce8ea);
    border-radius: .5rem; padding: .6rem .8rem; }
  .next-action-badge { flex: 0 0 auto; }
  .next-action-body { color: var(--bs-danger-text-emphasis, #b02a37); font-weight: 600; line-height: 1.5; }
  .next-action-body a { color: inherit; text-decoration: underline; }
</style>
@endpush
@endonce
<div {{ $attributes->merge(['class' => 'next-action mb-3']) }}>
  <span class="next-action-badge badge bg-danger d-inline-flex align-items-center gap-1">
    <i class="bi bi-arrow-right-circle-fill" aria-hidden="true"></i>{{ $label }}
  </span>
  <div class="next-action-body small">
    {{ $slot }}
  </div>
</div>