06보증 배지 섹션

<main class="stage is-demo">
  <section class="gb">
    <p class="gb__title">안심하고 시작하세요</p>
    <ul class="gb__grid">
      <li class="gb__cell" style="--i:0; --r:-6deg">
        <button type="button" class="gb__badge" aria-expanded="false" aria-controls="gb-m1">
          <span class="gb__stamp">
            <svg class="gb__ic" viewBox="0 0 256 256" width="20" height="20" aria-hidden="true"><g fill="currentColor"><path d="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z"/></g></svg>
            <svg class="gb__draw" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><polyline points="6 12.6 10 16.6 18 8" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </span>
          <span class="gb__label">14일 환불 보증</span>
        </button>
        <div class="gb__more" id="gb-m1"><div class="gb__more-in"><p>이유를 묻지 않고 14일 안에 전액 돌려드립니다.</p></div></div>
      </li>
      <li class="gb__cell" style="--i:1; --r:6deg">
        <button type="button" class="gb__badge" aria-expanded="false" aria-controls="gb-m2">
          <span class="gb__stamp">
            <svg class="gb__ic" viewBox="0 0 256 256" width="20" height="20" aria-hidden="true"><g fill="currentColor"><path d="M208 88H48a8 8 0 0 0-8 8v112a8 8 0 0 0 8 8h160a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8m-80 72a20 20 0 1 1 20-20a20 20 0 0 1-20 20" opacity=".2"/><path d="M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16M96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160zm-80-96a28 28 0 0 0-8 54.83V184a8 8 0 0 0 16 0v-17.17a28 28 0 0 0-8-54.83m0 40a12 12 0 1 1 12-12a12 12 0 0 1-12 12"/></g></svg>
          </span>
          <span class="gb__label">안전한 결제</span>
        </button>
        <div class="gb__more" id="gb-m2"><div class="gb__more-in"><p>결제 정보는 우리 서버에 저장하지 않습니다.</p></div></div>
      </li>
      <li class="gb__cell" style="--i:2; --r:-6deg">
        <button type="button" class="gb__badge" aria-expanded="false" aria-controls="gb-m3">
          <span class="gb__stamp">
            <svg class="gb__ic" viewBox="0 0 256 256" width="20" height="20" aria-hidden="true"><g fill="currentColor"><path d="M232 80v96a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V80a8 8 0 0 1 8-8h192a8 8 0 0 1 8 8" opacity=".2"/><path d="M224 64H32a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16m0 112H32V80h192zm-24-48a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/></g></svg>
          </span>
          <span class="gb__label">데이터 보호</span>
        </button>
        <div class="gb__more" id="gb-m3"><div class="gb__more-in"><p>내 데이터는 언제든 내려받고 지울 수 있습니다.</p></div></div>
      </li>
      <li class="gb__cell" style="--i:3; --r:6deg">
        <button type="button" class="gb__badge" aria-expanded="false" aria-controls="gb-m4">
          <span class="gb__stamp">
            <svg class="gb__ic" viewBox="0 0 256 256" width="20" height="20" aria-hidden="true"><g fill="currentColor"><path d="M216 48v40H40V48a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160zm-50.34-74.34L139.31 152l18.35 18.34a8 8 0 0 1-11.32 11.32L128 163.31l-18.34 18.35a8 8 0 0 1-11.32-11.32L116.69 152l-18.35-18.34a8 8 0 0 1 11.32-11.32L128 140.69l18.34-18.35a8 8 0 0 1 11.32 11.32"/></g></svg>
          </span>
          <span class="gb__label">언제든 해지</span>
        </button>
        <div class="gb__more" id="gb-m4"><div class="gb__more-in"><p>해지 버튼 하나면 끝, 다음 달 청구는 없습니다.</p></div></div>
      </li>
    </ul>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;
$easing: $ease-pop;
$color: $subject-blue;

@include stage($stage-yellow);

.gb {
  width: min(312px, 94vw);
  box-sizing: border-box;
  background: $stage-paper;
  border-radius: $r-card;
  box-shadow: $shadow-press;
  padding: $sp-4;
}

.gb__title {
  margin: 0 0 $sp-3;
  font-family: inherit; font-weight: 800; font-size: 13px; line-height: 1.2;
  color: $subject-ink;
  text-align: center;
}

.gb__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: $sp-2; }
.gb__cell { display: flex; flex-direction: column; align-items: center; }

.gb__badge {
  display: flex; flex-direction: column; align-items: center; gap: $sp-1;
  width: 100%; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit;
}
.gb__badge:focus-visible { outline: 2px solid $color; outline-offset: 2px; border-radius: $r-sm; }

.gb__stamp {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 2px solid rgba(47, 109, 246, .3);
  border-radius: 50%;
  background: rgba(47, 109, 246, .08);
  color: $color;
}
.gb__ic { grid-area: 1 / 1; }
.gb__draw { grid-area: 1 / 1; color: #50a26e; }
.gb__draw polyline { stroke-dasharray: 26; stroke-dashoffset: 0; }

.gb__label {
  font-weight: 700; font-size: 10px; line-height: 1.3;
  color: rgba(23, 20, 26, .78);
  text-align: center;
}

// ── 설명 펼침 (grid 0fr → 1fr, 한 번에 하나) ─────────
.gb__more { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows $dur-base $easing; }
.gb__cell.is-open .gb__more { grid-template-rows: 1fr; }
.gb__more-in { overflow: hidden; }
.gb__more p {
  margin: 0; padding: $sp-1 0 0;
  font-family: inherit; font-weight: 500; font-size: 9px; line-height: 1.4;
  color: rgba(23, 20, 26, .6);
  text-align: center;
}

// ── 측정용 루프 (.is-demo) ───────────────────────────
// 배지 4개가 100ms 간격으로 도장 찍히듯 내려앉고 첫 배지 체크가 그려진다. 2s 루프의 90% 안에 복귀.
.stage.is-demo .gb__stamp {
  animation-name: gb-stamp;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * 100ms);
}
// 투명도는 등장 초반에 몰아서 올린다 — 중간 알파에 걸린 프레임이 대표 이미지로 뽑히면 배지가 유령처럼 찍힌다
@keyframes gb-stamp {
  0%       { opacity: 0; transform: scale(1.4) rotate(var(--r)); }
  6%       { opacity: 1; transform: scale(1.16) rotate(0deg); }
  16%      { opacity: 1; transform: scale(.94) rotate(0deg); }
  24%, 70% { opacity: 1; transform: scale(1) rotate(0deg); }
  100%     { opacity: 0; transform: scale(1.4) rotate(var(--r)); }
}

.stage.is-demo .gb__label {
  animation-name: gb-label;
  animation-duration: $duration;
  animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes gb-label {
  0%       { opacity: 0; transform: translateY(5px); }
  10%      { opacity: 1; transform: translateY(2px); }
  22%, 70% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(5px); }
}

.stage.is-demo .gb__draw polyline {
  animation-name: gb-draw;
  animation-duration: $duration;
  animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: 160ms;
}
@keyframes gb-draw {
  0%        { stroke-dashoffset: 26; }
  34%, 70%  { stroke-dashoffset: 0; }
  74%, 100% { stroke-dashoffset: 26; }
}

// ── 접근성 ──────────────────────────────────────────
@media (prefers-reduced-motion: reduce) {
  .gb__more { transition: none !important; }
  .stage.is-demo .gb__stamp,
  .stage.is-demo .gb__label,
  .stage.is-demo .gb__draw polyline { animation: none !important; }
  .stage.is-demo .gb__stamp { opacity: 1 !important; transform: none !important; }
  .stage.is-demo .gb__label { opacity: 1 !important; transform: none !important; }
  .stage.is-demo .gb__draw polyline { stroke-dashoffset: 0 !important; }
}

// ── 반응형(320×200) ──────────────────────────────────
@media (max-width: 340px), (max-height: 220px) {
  .gb { width: min(272px, 92vw); padding: $sp-2; }
  .gb__title { margin: 0 0 $sp-2; font-size: 11px; }
  .gb__grid { grid-template-columns: repeat(2, 1fr); gap: $sp-1; }
  .gb__stamp { width: 28px; height: 28px; border-width: 1.5px; }
  .gb__ic, .gb__draw { width: 15px; height: 15px; }
  .gb__label { font-size: 9px; line-height: 1.2; }
  .gb__more p {
    padding: 0; font-size: 8px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.gb {
  width: min(312px, 94vw);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  padding: 16px;
}

.gb__title {
  margin: 0 0 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: #17141a;
  text-align: center;
}

.gb__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.gb__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gb__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.gb__badge:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
  border-radius: 8px;
}

.gb__stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(47, 109, 246, 0.3);
  border-radius: 50%;
  background: rgba(47, 109, 246, 0.08);
  color: #2f6df6;
}

.gb__ic {
  grid-area: 1/1;
}

.gb__draw {
  grid-area: 1/1;
  color: #50a26e;
}

.gb__draw polyline {
  stroke-dasharray: 26;
  stroke-dashoffset: 0;
}

.gb__label {
  font-weight: 700;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.78);
  text-align: center;
}

.gb__more {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 300ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.gb__cell.is-open .gb__more {
  grid-template-rows: 1fr;
}

.gb__more-in {
  overflow: hidden;
}

.gb__more p {
  margin: 0;
  padding: 4px 0 0;
  font-family: inherit;
  font-weight: 500;
  font-size: 9px;
  line-height: 1.4;
  color: rgba(23, 20, 26, 0.6);
  text-align: center;
}

.stage.is-demo .gb__stamp {
  animation-name: gb-stamp;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * 100ms);
}

@keyframes gb-stamp {
  0% {
    opacity: 0;
    transform: scale(1.4) rotate(var(--r));
  }
  6% {
    opacity: 1;
    transform: scale(1.16) rotate(0deg);
  }
  16% {
    opacity: 1;
    transform: scale(0.94) rotate(0deg);
  }
  24%, 70% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.4) rotate(var(--r));
  }
}
.stage.is-demo .gb__label {
  animation-name: gb-label;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * 100ms);
}

@keyframes gb-label {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  10% {
    opacity: 1;
    transform: translateY(2px);
  }
  22%, 70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
.stage.is-demo .gb__draw polyline {
  animation-name: gb-draw;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: 160ms;
}

@keyframes gb-draw {
  0% {
    stroke-dashoffset: 26;
  }
  34%, 70% {
    stroke-dashoffset: 0;
  }
  74%, 100% {
    stroke-dashoffset: 26;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gb__more {
    transition: none !important;
  }
  .stage.is-demo .gb__stamp,
  .stage.is-demo .gb__label,
  .stage.is-demo .gb__draw polyline {
    animation: none !important;
  }
  .stage.is-demo .gb__stamp {
    opacity: 1 !important;
    transform: none !important;
  }
  .stage.is-demo .gb__label {
    opacity: 1 !important;
    transform: none !important;
  }
  .stage.is-demo .gb__draw polyline {
    stroke-dashoffset: 0 !important;
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .gb {
    width: min(272px, 92vw);
    padding: 8px;
  }
  .gb__title {
    margin: 0 0 8px;
    font-size: 11px;
  }
  .gb__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .gb__stamp {
    width: 28px;
    height: 28px;
    border-width: 1.5px;
  }
  .gb__ic, .gb__draw {
    width: 15px;
    height: 15px;
  }
  .gb__label {
    font-size: 9px;
    line-height: 1.2;
  }
  .gb__more p {
    padding: 0;
    font-size: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 실제 동작: 배지를 누르면(마우스·Enter·Space) 그 배지 설명만 grid 0fr→1fr 로 펼쳐지고 나머지는 닫힌다.
var stage = document.querySelector('.stage');
var cells = [].slice.call(document.querySelectorAll('.gb__cell'));
['pointerdown', 'keydown'].forEach(function (t) {
  window.addEventListener(t, function () { stage.classList.remove('is-demo'); }, { once: true });
});
cells.forEach(function (cell) {
  var badge = cell.querySelector('.gb__badge');
  badge.addEventListener('click', function () {
    var willOpen = !cell.classList.contains('is-open');
    cells.forEach(function (other) {
      other.classList.remove('is-open');
      other.querySelector('.gb__badge').setAttribute('aria-expanded', 'false');
    });
    if (willOpen) {
      cell.classList.add('is-open');
      badge.setAttribute('aria-expanded', 'true');
    }
  });
});

import { useEffect, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./GuaranteeBadges.module.scss";

export type GuaranteeBadgesProps = { duration?: number; easing?: string; color?: string };
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string; "--i"?: string; "--r"?: string };

const shield: ReactNode = (
  <svg className={styles.ic} viewBox="0 0 256 256" width="20" height="20" aria-hidden="true">
    <g fill="currentColor">
      <path d="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2" />
      <path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z" />
    </g>
  </svg>
);

const lock: ReactNode = (
  <svg className={styles.ic} viewBox="0 0 256 256" width="20" height="20" aria-hidden="true">
    <g fill="currentColor">
      <path d="M208 88H48a8 8 0 0 0-8 8v112a8 8 0 0 0 8 8h160a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8m-80 72a20 20 0 1 1 20-20a20 20 0 0 1-20 20" opacity=".2" />
      <path d="M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16M96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160zm-80-96a28 28 0 0 0-8 54.83V184a8 8 0 0 0 16 0v-17.17a28 28 0 0 0-8-54.83m0 40a12 12 0 1 1 12-12a12 12 0 0 1-12 12" />
    </g>
  </svg>
);

const drive: ReactNode = (
  <svg className={styles.ic} viewBox="0 0 256 256" width="20" height="20" aria-hidden="true">
    <g fill="currentColor">
      <path d="M232 80v96a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V80a8 8 0 0 1 8-8h192a8 8 0 0 1 8 8" opacity=".2" />
      <path d="M224 64H32a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16m0 112H32V80h192zm-24-48a12 12 0 1 1-12-12a12 12 0 0 1 12 12" />
    </g>
  </svg>
);

const calendarX: ReactNode = (
  <svg className={styles.ic} viewBox="0 0 256 256" width="20" height="20" aria-hidden="true">
    <g fill="currentColor">
      <path d="M216 48v40H40V48a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2" />
      <path d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160zm-50.34-74.34L139.31 152l18.35 18.34a8 8 0 0 1-11.32 11.32L128 163.31l-18.34 18.35a8 8 0 0 1-11.32-11.32L116.69 152l-18.35-18.34a8 8 0 0 1 11.32-11.32L128 140.69l18.34-18.35a8 8 0 0 1 11.32 11.32" />
    </g>
  </svg>
);

const BADGES = [
  { label: "14일 환불 보증", more: "이유를 묻지 않고 14일 안에 전액 돌려드립니다.", icon: shield, draw: true, r: "-6deg" },
  { label: "안전한 결제", more: "결제 정보는 우리 서버에 저장하지 않습니다.", icon: lock, draw: false, r: "6deg" },
  { label: "데이터 보호", more: "내 데이터는 언제든 내려받고 지울 수 있습니다.", icon: drive, draw: false, r: "-6deg" },
  { label: "언제든 해지", more: "해지 버튼 하나면 끝, 다음 달 청구는 없습니다.", icon: calendarX, draw: false, r: "6deg" },
];

export default function GuaranteeBadges({
  duration = 2000,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#2f6df6",
}: GuaranteeBadgesProps) {
  const [openIdx, setOpenIdx] = useState(-1);
  // 측정용 루프: 처음 조작(pointerdown·keydown)에서 루프를 끈다 — vanilla 판과 같은 동작
  const [demo, setDemo] = useState(true);
  useEffect(() => {
    const off = () => setDemo(false);
    window.addEventListener("pointerdown", off, { once: true });
    window.addEventListener("keydown", off, { once: true });
    return () => {
      window.removeEventListener("pointerdown", off);
      window.removeEventListener("keydown", off);
    };
  }, []);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <section className={`${styles.gb} ${demo ? styles.isDemo : ""}`} style={vars}>
      <p className={styles.title}>안심하고 시작하세요</p>
      <ul className={styles.grid}>
        {BADGES.map((b, i) => {
          const cellVars: Vars = { "--i": String(i), "--r": b.r };
          const open = openIdx === i;
          return (
            <li key={b.label} className={`${styles.cell} ${open ? styles.isOpen : ""}`} style={cellVars}>
              <button
                type="button"
                className={styles.badge}
                aria-expanded={open}
                aria-controls={`gb-m-${i}`}
                onClick={() => setOpenIdx(open ? -1 : i)}
              >
                <span className={styles.stamp}>
                  {b.icon}
                  {b.draw && (
                    <svg className={styles.draw} viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                      <polyline points="6 12.6 10 16.6 18 8" fill="none" stroke="currentColor" strokeWidth={2.6} strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  )}
                </span>
                <span className={styles.label}>{b.label}</span>
              </button>
              <div className={styles.more} id={`gb-m-${i}`}>
                <div className={styles.moreIn}>
                  <p>{b.more}</p>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}