/* button.css — ボタン
   Figma: Button (node 990:27433 / Describe Row1 内) */

.c-button {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: clip;
  width: 14.25rem; /* Figma: 228px */
  max-width: 100%;
  padding: var(--space-16) var(--space-64);
  /* 枠線は border ではなく inset shadow で描く。
     Figma は枠線をフレーム境界の中央に描くためテキスト領域を削らないが、
     border だと border-box の内側が左右1pxずつ狭まり、
     ラベル（Figma実測で余裕0.5px弱）が改行してしまう。 */
  box-shadow: inset 0 0 0 var(--border-width) var(--color-ink);
  border-radius: var(--radius-full); /* Figma: 100px（高さの半分を超えるためピル形）*/
  background: var(--color-white-80);
  color: var(--color-text);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-control);
  transition:
    translate var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease,
    background-color var(--transition-fast) ease;
}

/* 統一hover演出（tokens.css 参照）：浮き上がり＋浮き影＋白へ、チェブロンが右へ */
.c-button:hover {
  text-decoration: none;
  background: var(--color-white);
  translate: 0 var(--hover-lift);
  /* 内側の枠線（inset）は維持したまま浮き影を重ねる */
  box-shadow:
    inset 0 0 0 var(--border-width) var(--color-ink),
    var(--shadow-hover);
}

/* 不透明な白。Figma: p-fv のCTAは下地を透かさない（Describe Row のボタンは白80%）*/
.c-button--opaque { background: var(--color-white); }

.c-button__label {
  flex: 1 0 0;
  min-width: 0;
}

/* Figma: 右端から23pxの位置に上下中央でチェブロン */
.c-button__icon {
  position: absolute;
  top: 50%;
  right: 1.4375rem; /* Figma: 23px */
  width: 0.25rem;   /* Figma: 3.999px */
  height: 0.5rem;   /* Figma: 7.997px */
  translate: 0 -50%;
  transition: translate var(--transition-fast) ease;
}

.c-button:hover .c-button__icon {
  translate: var(--space-4) -50%;
}

@media (prefers-reduced-motion: reduce) {
  .c-button,
  .c-button__icon { transition: none; }
}