/* ==========================================================================
   ui-elements.css - UI要素 (gColors-rev2 クレンジング版)
   ========================================================================== */

/* -----------------------------------------------------
   1. ボタン (質感を定義)
   ----------------------------------------------------- */
.wp-block-button__link,
button,
.wp-element-button {
  /*background: var(--gc-12-ai-iro, #0F4C81);
  color: #fff;*/
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.75rem 1.5rem;
}

.wp-block-button__link:hover,
button:hover {
  /*background: var(--gc-12-kon-iro, #192F60);*/
  transform: translateY(-2px);
}

/* -----------------------------------------------------
   2. カード・グループ
   ----------------------------------------------------- */
.card,
.wp-block-group.card {
  background: #fff;
  border: 1px solid var(--gc-12-gin-nezu);
  box-shadow: 0 1px 2px var(--gc-12-sumi-iro-10);
  padding: 2rem; /* 内側の余白のみ */
}

/* -----------------------------------------------------
   3. バッジ・タグ
   ----------------------------------------------------- */
.tech-tag {
  font-size: 11px;
  color: #FFFFFF;
  background: var(--gc-12-ai-iro);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
}

/* -----------------------------------------------------
   4. アラート (透過階調の活用)
   ----------------------------------------------------- */
.alert { padding: 1rem 1.5rem; border-left: 4px solid; }

.alert-info {
  background: var(--gc-12-mizu-iro-20);
  border-color: var(--gc-12-ai-iro);
  color: var(--gc-12-ai-iro);
}

/* -----------------------------------------------------
   5. 代替画像 (No Image)
   ----------------------------------------------------- */
.no-image {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d7dde5, #9aa3b8);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #BDC0BA;
  border-radius: 4px;
}