Popover

// 기본 — panelLabel 있음
<Popover
  panelLabel="안내"
  triggerContent={
    <Button className="popover_trigger" variant="outline" label="Popover 열기" aria-haspopup="dialog" />
  }
>
  <p>트리거를 클릭하면 이 패널이 표시됩니다.</p>
</Popover>

// panelLabel 없음
<Popover
  triggerContent={
    <Button className="popover_trigger" variant="outline" label="라벨 없음" aria-haspopup="dialog" />
  }
>
  <p>짧은 안내 문구만 필요할 때 사용합니다.</p>
</Popover>

// 제목 · 푸터
<Popover
  title="항목 삭제"
  triggerContent={
    <Button className="popover_trigger" variant="outline" label="삭제 확인" aria-haspopup="dialog" />
  }
  footer={
    <>
      <Button variant="ghost" size="sm" label="취소" data-popover-close="" />
      <Button variant="filled" color="danger" size="sm" label="삭제" data-popover-close="" />
    </>
  }
>
  <p>이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?</p>
</Popover>

// 호버 트리거
<Popover
  trigger="hover"
  panelLabel="에스크로 설명"
  triggerContent={<Link className="popover_trigger" label="에스크로" aria-haspopup="dialog" />}
>
  구매자가 상품 수령을 확인할 때까지 대금을 안전하게 보관하는 결제 방식입니다.
</Popover>

// 배치 · 크기 · 간격
<Popover
  placement="top-center"
  size="lg"
  offset="lg"
  panelLabel="큰 Popover"
  triggerContent={
    <Button className="popover_trigger" variant="outline" label="위 · 가운데" aria-haspopup="dialog" />
  }
>
  <p>큰 패널입니다.</p>
</Popover>

// 간격 — 방향별
<Popover
  placement="left"
  offsetLeft="lg"
  panelLabel="왼쪽 간격 lg"
  triggerContent={
    <Button className="popover_trigger" variant="outline" label="offset-left" aria-haspopup="dialog" />
  }
>
  <p>트리거 왼쪽 배치 시 offsetLeft가 적용됩니다.</p>
</Popover>

// 혼합 — 패널 가운데 · 화살표 왼쪽
<Popover
  arrowAnchor="mixed"
  panelAlign="center"
  arrowTargetAlign="left"
  open
  panelLabel="혼합"
  triggerContent={
    <Button className="popover_trigger" variant="outline" size="sm" label="S" aria-haspopup="dialog" aria-expanded="true" />
  }
>
  <p>패널은 가운데, 화살표는 트리거 왼쪽을 가리킵니다.</p>
</Popover>