/* ============================================
   c-badge-01 — 汎用バッジコンポーネント
   用途: 施術バッジ、カテゴリラベル、重要マーク等
   ============================================ */

.c-badge-01 {
    display: inline-block;
    padding: var(--space-3-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    white-space: nowrap;
}

/* --- カラーバリエーション --- */

/* カテゴリ（ピンク背景・ダーク文字） */
.c-badge-01--category {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* 診療科（ダーク背景・白文字） */
.c-badge-01--department {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* 初回限定（オレンジ） */
.c-badge-01--initial {
    background-color: var(--color-badge-initial);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

/* モニター（パープル） */
.c-badge-01--monitor {
    background-color: var(--color-badge-monitor);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

/* 期間限定（レッド） */
.c-badge-01--limited {
    background-color: var(--color-badge-limited);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

/* 重要（レッド） */
.c-badge-01--importance {
    background-color: var(--color-danger);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
}

/* 監修ラベル */
.c-badge-01--supervisor {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--font-size-3-xs);
    padding: var(--space-4-xs) var(--space-2-xs);
}

/* 肩書（ダークグレー背景） */
.c-badge-01--title {
    background-color: var(--color-text);
    color: var(--color-white);
    font-size: var(--font-size-3-xs);
    font-weight: var(--font-weight-semibold);
}

/* --- サイズバリエーション --- */

.c-badge-01--sm {
    padding: var(--space-4-xs) var(--space-xs);
    font-size: var(--font-size-3-xs);
}

.c-badge-01--sm .material-icons,
.c-badge-01--sm .material-icons-outlined {
    font-size: var(--font-size-2-xs);
    line-height: 1;
    vertical-align: middle;
}

/* Figma書き出しのSVGアイコン（初回/期間限定/モニター） */
.c-badge-01__icon {
    display: inline-block;
    width: auto;
    height: var(--space-lg); /* 14px = Figmaアイコン実寸 */
    vertical-align: middle;
    margin-right: var(--space-3-xs);
}

.c-badge-01--initial,
.c-badge-01--limited,
.c-badge-01--monitor {
    white-space: nowrap;
}

.c-badge-01--pill {
    border-radius: var(--radius-pill);
}

/* --- バッジグループ --- */

.c-badge-01__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2-xs);
}

.c-badge-01__group--vertical {
    flex-direction: column;
    align-items: flex-start;
}
/* ============================================
   c-badge-01 modifiers - Activity Category Colors
   ============================================ */

/* --- Academic Presentation (purple tint) --- */
.c-badge-01--academic {
    background-color: #f3e8ff;
    color: #6d28d9;
}

/* --- Lecture (blue tint) --- */
.c-badge-01--lecture {
    background-color: #dbeafe;
    color: #1d4ed8;
}

/* --- Seminar (teal tint) --- */
.c-badge-01--seminar {
    background-color: #ccfbf1;
    color: #0f766e;
}

/* --- Media Appearance (pink tint) --- */
.c-badge-01--media {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* --- Paper Publication (amber tint) --- */
.c-badge-01--paper {
    background-color: #fef3c7;
    color: #b45309;
}

/* --- Default / Other (gray tint) --- */
.c-badge-01--default {
    background-color: var(--color-bg-sub);
    color: var(--color-text-light);
}

/* --- Approval (green tint) --- */
.c-badge-01--approval {
    background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}

.c-badge-01--approval .material-icons {
    font-size: var(--font-size-3-xs);
}

/* --- Clinic (gray background) --- */
.c-badge-01--clinic {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4-xs);
    background-color: var(--color-gray-lighter);
    color: var(--color-text-light);
}

/* --- Type (search filter) --- */
.c-badge-01--type {
    background-color: var(--color-bg-sub);
    color: var(--color-text-light);
}

/* --- Badge icon element --- */
.c-badge-01__icon {
    font-size: var(--font-size-2-xs);
}