/* =========================================================
   グラスモーフィズム維持 + 色だけテーマ追従（共通CSS非依存）
   - 文字色: inherit
   - 背景: 半透明 + ぼかし + ハイライトグラデ
   - 枠線/リング: currentColor を薄めて使う
   ※「色」だけ @layer に入れておくと共通CSSがあれば上書きもされやすい
   ========================================================= */
@layer button-colors {

  :root{
    /* 形や質感は維持（必要なら調整） */
    --radius: 12px;

    /* ガラスの“透明度・ハイライト”は固定（テーマ色は下地で透ける） */
    --glass-bg: rgb(255 255 255 / 0.14);
    --glass-bg-hover: rgb(255 255 255 / 0.18);
    --glass-highlight-top: rgb(255 255 255 / 0.28);
    --glass-highlight-bottom: rgb(255 255 255 / 0.10);

    /* 枠線：文字色（テーマ）に追従しつつ薄く */
    --glass-border-alpha: 0.22;

    /* 影：今の雰囲気を維持（必要なら弱めてOK） */
    --shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 6px 18px rgb(0 0 0 / 0.08);
    --shadow-hover: 0 2px 3px rgb(0 0 0 / 0.10), 0 10px 28px rgb(0 0 0 / 0.12);

    /* ぼかし量（グラスモーフィズムの肝） */
    --glass-blur: 10px;

    /* フォーカスリング（テーマ文字色に寄せる） */
    --ring-alpha: 0.45;
  }

  .btn{
    /* ✅文字色はテーマ（親）に追従 */
    color: inherit;

    /* ✅枠線もテーマ（文字色）に追従 */
    border-color: color-mix(in oklab, currentColor calc(var(--glass-border-alpha) * 100%), transparent);

    /* ✅ガラス背景：半透明 + ハイライトグラデ（見た目は維持、色は透ける） */
    background:
      linear-gradient(to bottom, var(--glass-highlight-top), var(--glass-highlight-bottom)),
      var(--glass-bg);

    /* ✅背景を“透かす”ためのブラー */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    /* ✅グラスっぽい影 */
    box-shadow: var(--shadow);
  }

  .btn:hover{
    background:
      linear-gradient(to bottom, color-mix(in oklab, var(--glass-highlight-top), white 8%), var(--glass-highlight-bottom)),
      var(--glass-bg-hover);
    box-shadow: var(--shadow-hover);
  }

  .btn:active{
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.10),
      inset 0 1px 0 rgb(255 255 255 / 0.28);
    filter: saturate(0.98);
  }

  .btn:focus-visible{
    /* ✅リングも currentColor から作るのでテーマに追従 */
    box-shadow:
      0 0 0 3px color-mix(in oklab, currentColor calc(var(--ring-alpha) * 100%), transparent),
      var(--shadow-hover);
  }

  /* primary / current（強調）も “ガラスのまま” トーンだけ上げる */
  .btn--primary,
  .btn[aria-current="page"]{
    /* ガラスを維持しつつ濃度を少し上げる */
    background:
      linear-gradient(to bottom, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.10)),
      color-mix(in oklab, var(--glass-bg), currentColor 8%);

    /* 強調は読みやすさ優先で文字色は親に追従のままでもOK。
       もし「primaryは常に白文字」等にしたいならここで color を変える */
    color: inherit;

    border-color: color-mix(in oklab, currentColor 35%, transparent);
  }

  .btn--primary:hover,
  .btn[aria-current="page"]:hover{
    background:
      linear-gradient(to bottom, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0.12)),
      color-mix(in oklab, var(--glass-bg-hover), currentColor 10%);
  }

  /* disabled は質感を落とす（現行踏襲） */
  .btn:disabled,
  .btn[aria-disabled="true"]{
    box-shadow: none;
    opacity: 0.55;
  }

  /* 強制カラーモード（現行踏襲） */
  @media (forced-colors: active){
    .btn{
      forced-color-adjust: auto;
      border: 1px solid ButtonText;
      background: ButtonFace;
      color: ButtonText;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .btn:focus-visible{
      outline: 2px solid Highlight;
      outline-offset: 2px;
      box-shadow: none;
    }
  }
}

/* =========================
   構造・操作感（共通CSSに負けにくくしたい部分）
   ※レイヤー外（通常）に置く
   ========================= */

.button-list{
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.btn{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 44px;
  padding: 12px 16px;

  border-radius: var(--radius);
  border-width: 1px;
  border-style: solid;

  text-decoration: none;
  font: inherit;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.01em;

  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    filter 140ms ease;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); filter: saturate(0.98); }
.btn:focus-visible{ outline: none; }

/* disabled */
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* 小画面 */
@media (max-width: 480px){
  .button-list{
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-inline: 12px;
    scroll-snap-type: x mandatory;
  }
  .button-list > li{ scroll-snap-align: start; }
}

/* 動きを減らす */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
  .btn:hover, .btn:active{ transform: none; }
}