/* AI 매직 스타일 배지 — main_list 카드 상단 · project_detail 헤더 공용 (functions.php magicStyleBadgeHtml).
   보라 계열의 ring/hover Tailwind 클래스가 dist/tailwind.css 에 없어 여기서 직접 정의한다
   (CSS 빌드 없이 배포되게). 크기는 옆의 카테고리 배지(px-2 py-1 text-xs)와 맞춘다. */
.magic-style-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: #7e22ce;
    background-color: rgba(168, 85, 247, 0.10);
    box-shadow: inset 0 0 0 1px rgba(147, 51, 234, 0.25);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.magic-style-badge:hover { background-color: rgba(168, 85, 247, 0.18); }
html.dark .magic-style-badge {
    color: #d8b4fe;
    background-color: rgba(126, 34, 206, 0.22);
    box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.35);
}
html.dark .magic-style-badge:hover { background-color: rgba(126, 34, 206, 0.38); }
/* 지금 이 스타일로 거르는 중 — main_list ?style=<id> */
.magic-style-badge.is-active { box-shadow: inset 0 0 0 2px rgba(168, 85, 247, 0.85); }