CSSで、アコーディオンをなめらかに開閉する方法

<div class="faq">
  <details>
    <summary>ごはんは1日に何回ですか</summary>
    <p class="body">朝と夜の2回が目安です。量はフードの袋の表示を見て決めます。<a href="#">ごはんの記録</a></p>
  </details>
  <details>
    <summary>爪切りはいつしますか</summary>
    <p class="body">2週間に1回が目安です。</p>
  </details>
</div>

/* details と summary で作る、なめらかに開閉するアコーディオン */
.faq details {
  border-bottom: 1px solid #c9dfe5;
  /* auto への補間を、この中だけで許す */
  interpolate-size: allow-keywords;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  list-style: none;
  cursor: pointer;
  font-weight: bold;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid #067a98;
  border-bottom: 2px solid #067a98;
  transform: rotate(45deg);
  transition: transform 300ms;
}
.faq details[open] > summary::after {
  transform: rotate(-135deg);
}
/* 開閉で動かすのは、中身を包む ::details-content の高さ */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 300ms ease,
    content-visibility 300ms allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
}
/* 余白は ::details-content ではなく、中の要素に付ける */
.faq .body {
  margin: 0;
  padding: 0 8px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content,
  .faq summary::after {
    transition: none;
  }
}

[details の基本形] 閉じた状態 49px
  開く: 0ms 49px / 50ms 70px / 100ms 89px / 150ms 100px / 200ms 106px / 250ms 109px / 300ms 109px / 350ms 109px
  閉じる: 0ms 109px / 50ms 88px / 100ms 69px / 150ms 58px / 200ms 52px / 250ms 49px / 300ms 49px / 350ms 49px

[content-visibility の transition を外す] 閉じた状態 49px
  開く: 0ms 49px / 50ms 62px / 100ms 84px / 150ms 97px / 200ms 104px / 250ms 108px / 300ms 109px / 350ms 109px
  閉じる: 0ms 49px / 50ms 49px / 100ms 49px / 150ms 49px / 200ms 49px / 250ms 49px / 300ms 49px / 350ms 49px

[details の基本形、::details-content の content-visibility] 閉じる: 50ms visible / 150ms visible / 400ms hidden
[content-visibility の transition を外す] 閉じる: 50ms hidden / 150ms hidden / 400ms hidden

[余白を ::details-content に付ける] 閉じた状態 61px
  開く: 0ms 61px / 50ms 72px / 100ms 89px / 150ms 100px / 200ms 105px / 250ms 108px / 300ms 109px / 350ms 109px
  閉じる: 0ms 109px / 50ms 92px / 100ms 77px / 150ms 68px / 200ms 63px / 250ms 61px / 300ms 61px / 350ms 61px

.faq details[open]::details-content {
  block-size: calc-size(auto, size);
}

[calc-size(auto, size) で書く] 閉じた状態 49px
  開く: 0ms 49px / 50ms 62px / 100ms 84px / 150ms 97px / 200ms 104px / 250ms 108px / 300ms 109px / 350ms 109px
  閉じる: 0ms 109px / 50ms 88px / 100ms 69px / 150ms 58px / 200ms 52px / 250ms 49px / 300ms 49px / 350ms 49px

[details、prefers-reduced-motion: reduce] 閉じた状態 49px
  開く: 0ms 109px / 50ms 109px / 100ms 109px / 150ms 109px / 200ms 109px / 250ms 109px / 300ms 109px / 350ms 109px
  閉じる: 0ms 49px / 50ms 49px / 100ms 49px / 150ms 49px / 200ms 49px / 250ms 49px / 300ms 49px / 350ms 49px

<button class="trigger" type="button" aria-expanded="false" aria-controls="p1">ごはんは1日に何回ですか</button>
<div class="panel" id="p1">
  <div class="inner">
    <p class="body">朝と夜の2回が目安です。量はフードの袋の表示を見て決めます。<a href="#">ごはんの記録</a></p>
  </div>
</div>

/* details を使わない場合：grid-template-rows を 0fr から 1fr へ動かす */
.panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 300ms ease,
    visibility 300ms;
}
.trigger[aria-expanded='true'] + .panel {
  grid-template-rows: 1fr;
  visibility: visible;
}
/* 1fr の行に入る中身は、min-height: 0 と overflow: hidden で縮める */
.panel > .inner {
  min-height: 0;
  overflow: hidden;
}
.panel .body {
  margin: 0;
  padding: 0 8px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

// ボタンを押すたびに aria-expanded を切り替える
document.querySelectorAll('.trigger').forEach((button) => {
  button.addEventListener('click', () => {
    const open = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!open));
  });
});

[grid-template-rows の基本形] 閉じた状態 0px
  開く: 0ms 0px / 50ms 21px / 100ms 40px / 150ms 51px / 200ms 57px / 250ms 60px / 300ms 60px / 350ms 60px
  閉じる: 0ms 60px / 50ms 39px / 100ms 20px / 150ms 9px / 200ms 3px / 250ms 0px / 300ms 0px / 350ms 0px

[details、閉じた状態] Tab のあと: <summary> 爪切りはいつしますか
[grid、閉じた状態（visibility あり）] Tab のあと: <button> 後ろのボタン
[grid、閉じた状態（visibility を外す）] Tab のあと: <a> ごはんの記録

[grid、.panel の visibility] 閉じる: 50ms visible / 150ms visible / 400ms hidden