/* components/tag.css — カテゴリタグ/バッジ（Figma: Tag / CategoryTag）
   アクセント色（--color-accent）に追従する角丸ピル。 */

.c-tag {
  display: inline-block;
  padding: 0.2em var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-accent) url(../../images/common/label-bg.png) center / cover no-repeat;
  color: var(--color-white);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-decoration: none;
  white-space: nowrap;
}
a.c-tag:hover { filter: brightness(0.95); }

/* アウトライン版（フィルタの非アクティブ等） */
.c-tag--outline {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* 必須バッジ（フォーム用・赤） */
.c-badge-required {
  display: inline-block;
  padding: 0.1em var(--space-8);
  border-radius: var(--radius-sm);
  background: #d9333f;
  color: var(--color-white);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

@media (max-width: 768px) {
  .c-tag {
    font-size: var(--font-size-3xs);
  }
}