/*
 * Ryuyu Common Accordion v3
 * ----------------------------------------
 * アイコンのみのミニマルデザイン。
 * 見出しの文字色をそのまま使い、
 * 白いボタン感をなくして自然になじませます。
 */

:root {
  --ryuyu-acc-speed: 0.42s;
}

/* 開閉対象の見出し */
[data-ryuyu-accordion].ryuyu-acc-heading {
  position: relative;
  box-sizing: border-box;

  padding-left: 48px;
  padding-right: 48px;

  cursor: pointer;

  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

/* 見出し全体のhover */
@media (hover: hover) {
  [data-ryuyu-accordion].ryuyu-acc-heading:hover {
    filter: brightness(0.97);
  }
}

/* 右側ボタン */
.ryuyu-acc-toggle {
  -webkit-appearance: none;
  appearance: none;

  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  /* 見出しの文字色を継承 */
  color: inherit;

  cursor: pointer;

  transform: translateY(-50%);
}

/* JS側で生成される文字は非表示
   aria-labelは残るのでアクセシビリティは維持 */
.ryuyu-acc-toggle__label {
  display: none;
}

/* ＋ / − アイコン */
.ryuyu-acc-toggle__icon {
  position: relative;

  display: block;

  width: 24px;
  height: 24px;

  box-sizing: border-box;

  border: 1px solid currentColor;
  border-radius: 50%;

  opacity: 0.9;

  transform: rotate(0deg) scale(1);

  transition:
    transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease,
    background-color 0.2s ease;
}

/* ＋の横線 / 縦線 */
.ryuyu-acc-toggle__icon::before,
.ryuyu-acc-toggle__icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 1px;

  border-radius: 999px;
  background: currentColor;

  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s ease;
}

.ryuyu-acc-toggle__icon::before {
  transform: translate(-50%, -50%);
}

.ryuyu-acc-toggle__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg)
    scaleX(1);
}

/* hover：少しだけ反応 */
@media (hover: hover) {
  .ryuyu-acc-toggle:hover
    .ryuyu-acc-toggle__icon {
    opacity: 1;

    transform:
      rotate(8deg)
      scale(1.08);

    background: rgba(255, 255, 255, 0.12);
  }
}

/* 開いた状態：＋ → − */
[data-ryuyu-accordion].ryuyu-acc-heading.is-open
  > .ryuyu-acc-toggle
  .ryuyu-acc-toggle__icon {
  opacity: 1;

  transform:
    rotate(180deg)
    scale(1.03);
}

[data-ryuyu-accordion].ryuyu-acc-heading.is-open
  > .ryuyu-acc-toggle
  .ryuyu-acc-toggle__icon::after {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    rotate(90deg)
    scaleX(0);
}

/* タップ時 */
.ryuyu-acc-toggle:active
  .ryuyu-acc-toggle__icon {
  transform: scale(0.9);
}

/* キーボード操作 */
.ryuyu-acc-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 50%;
}

/* ==================================================
   中身
   ================================================== */

.ryuyu-acc-panel {
  display: grid;
  grid-template-rows: 0fr;

  opacity: 0;
  visibility: hidden;

  transition:
    grid-template-rows var(--ryuyu-acc-speed)
      cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.24s ease,
    visibility 0s linear var(--ryuyu-acc-speed);
}

.ryuyu-acc-panel__inner {
  min-height: 0;
  overflow: hidden;
}

.ryuyu-acc-panel.is-open {
  grid-template-rows: 1fr;

  opacity: 1;
  visibility: visible;

  transition:
    grid-template-rows var(--ryuyu-acc-speed)
      cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.24s ease,
    visibility 0s linear 0s;
}

/* ==================================================
   動きを減らす設定
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  .ryuyu-acc-panel,
  .ryuyu-acc-heading,
  .ryuyu-acc-toggle__icon,
  .ryuyu-acc-toggle__icon::before,
  .ryuyu-acc-toggle__icon::after {
    transition: none !important;
  }
}