/* =========================================================
   Components (カード / ボタン / タグ)
   ========================================================= */

/* カード */
.toe-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.toe-card:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* ボタン（WPのbutton, .wp-element-button対応） */
button,
input[type="submit"],
.wp-element-button,
a.wp-element-button{
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(183,121,31,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
a.wp-element-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 12px 22px rgba(183,121,31,.22);
  text-decoration: none;
}

/* セカンダリ */
.toe-btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.toe-btn--ghost:hover{
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}

/* タグ */
.toe-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .9rem;
}
.toe-tag::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
.toe-tag.is-parenting::before{ background: var(--cat-parenting); }
.toe-tag.is-admin::before{ background: var(--cat-admin); }
.toe-tag.is-life::before{ background: var(--cat-life); }

/* モバイル */
@media (max-width: 720px){
  .toe-card{ padding: var(--space-4); }
}

.se-list {
  margin: 2rem 0;
  display: grid;
  gap: 1.2rem;
}

.se-item {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}

.se-title {
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--accent-money);
}