@charset "UTF-8";

/* =========================================================
   [SB 공통 스플릿 버튼 UI]
   - 좌측: 액션 텍스트 / 우측: 과금 정보 뱃지
========================================================= */

/* 버튼 컨테이너 기본 (button 태그 기본 스타일 초기화 및 Flex 레이아웃) */
.btn-sb-split {
    display: inline-flex;
    align-items: stretch; /* 좌우 높이를 꽉 차게 */
    border: none;
    border-radius: 6px; /* 에셋 등록 화면과 동일한 라운드 */
    overflow: hidden; /* 자식 요소가 모서리를 뚫지 못하게 */
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    font-family: inherit;
    text-decoration: none;
}

.btn-sb-split:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-sb-split:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 좌측 텍스트 영역 */
.btn-sb-split .btn-text {
    padding: 10px 20px;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1; /* 글자가 짧아도 영역 차지 */
    justify-content: center;
}

/* 우측 과금/무료 뱃지 영역 (항상 검은색 배경) */
.btn-sb-split .btn-badge {
    background: #090d16 !important; /* 칠흑 같은 솔리드 딥 블랙 */
    color: #ffffff;
    padding: 10px 15px;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------
   [테마 클래스]
--------------------------------------------------------- */

/* 테마 1: 하얀색 베이스 (예: 브레인스토밍, 재분석 등 2차 액션) */
.btn-theme-white {
    background: #ffffff;
    border: 1px solid #6366f1; /* 보라색 테두리 */
}
.btn-theme-white .btn-text {
    color: #6366f1;
}

/* 테마 2: 보라색 그라데이션 베이스 (예: 프롬프트 퓨전, 에셋 생성 등 메인 액션) */
.btn-theme-purple {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: 1px solid transparent;
}
.btn-theme-purple .btn-text {
    color: #ffffff;
}

/* =========================================================
   [SB 공통 일반 버튼 UI (뱃지 없음)]
   - 높이와 둥글기를 스플릿 버튼(btn-sb-split)과 완벽히 동기화
========================================================= */
.btn-sb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 10px 20px;
    border-radius: 6px; /* 공통 라운드 */
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    font-family: inherit;
}

.btn-sb:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.btn-sb:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 스타일 1: 위험/초기화 (빨간색 고스트) */
.btn-sb-danger {
    background: #ffffff;
    border: 1px solid #ef4444;
    color: #ef4444;
}
.btn-sb-danger:hover {
    background: #fef2f2;
}

/* 스타일 2: 일반/임시저장/목록 (회색 아웃라인) */
.btn-sb-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
}
.btn-sb-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}