@props([
    'title',
    // 'must'（赤・必ずやる）/ 'caution'（黄・注意）/ 'optional'（黄・必要な人だけ）/ 'info'（中立・ただの説明）
    'variant' => 'info',
    // 既定は閉じる（説明を短く見せるため）。重要な節だけ open=true にできる。
    'open' => false,
])
@php
    $sid = 'helpsec-'.\Illuminate\Support\Str::random(8);
    $variant = in_array($variant, ['must', 'caution', 'optional', 'info'], true) ? $variant : 'info';
    $map = [
        'must' => [
            'badge' => '必ずやる', 'badgeClass' => 'bg-danger',
            'wrapClass' => 'help-section-must', 'headClass' => 'text-danger', 'icon' => 'bi-exclamation-triangle-fill',
        ],
        'caution' => [
            'badge' => '注意', 'badgeClass' => 'bg-warning text-dark',
            'wrapClass' => 'help-section-optional', 'headClass' => 'text-warning-emphasis', 'icon' => 'bi-exclamation-circle-fill',
        ],
        'optional' => [
            'badge' => '必要な人だけ', 'badgeClass' => 'bg-warning text-dark',
            'wrapClass' => 'help-section-optional', 'headClass' => 'text-warning-emphasis', 'icon' => 'bi-info-circle-fill',
        ],
        'info' => [
            'badge' => null, 'badgeClass' => '',
            'wrapClass' => 'help-section-info', 'headClass' => 'text-body', 'icon' => 'bi-card-text',
        ],
    ];
    $c = $map[$variant];
@endphp
@once
@push('head')
<style>
  .help-section { border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
  .help-section + .help-section { margin-top: .5rem; }
  .help-section-must { border-color: var(--bs-danger-border-subtle, #f1aeb5); background: var(--bs-danger-bg-subtle, #fce8ea); }
  .help-section-optional { border-color: var(--bs-warning-border-subtle, #ffe69c); background: var(--bs-warning-bg-subtle, #fff8e6); }
  .help-section-info { border-color: var(--bs-border-color); background: var(--bs-tertiary-bg, #f8f9fa); }
  .help-section-head { width: 100%; border: 0; background: transparent; text-align: left; text-decoration: none; padding: .55rem .75rem; }
  .help-section-head:focus { box-shadow: none; outline: none; }
  .help-section-head .help-section-chevron { transition: transform .15s ease; }
  .help-section-head[aria-expanded="true"] .help-section-chevron { transform: rotate(180deg); }
  .help-section-body { padding: .1rem .9rem .8rem; }
  .help-section-body ul, .help-section-body ol { margin-bottom: 0; }
</style>
@endpush
@endonce
<div class="help-section {{ $c['wrapClass'] }}">
  <button type="button"
    class="help-section-head d-flex align-items-center gap-2 {{ $c['headClass'] }}"
    data-bs-toggle="collapse" data-bs-target="#{{ $sid }}"
    data-no-row-toggle="1"
    aria-expanded="{{ $open ? 'true' : 'false' }}" aria-controls="{{ $sid }}">
    <i class="bi {{ $c['icon'] }}" aria-hidden="true"></i>
    <span class="fw-semibold flex-grow-1">{{ $title }}</span>
    @if($c['badge'])<span class="badge {{ $c['badgeClass'] }}">{{ $c['badge'] }}</span>@endif
    <i class="bi bi-chevron-down help-section-chevron" aria-hidden="true"></i>
  </button>
  <div id="{{ $sid }}" class="collapse{{ $open ? ' show' : '' }}">
    <div class="help-section-body small">
      {{ $slot }}
    </div>
  </div>
</div>