/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 12 2026 | 12:03:48 */
/* ==========================================================================
 * [워드프레스 버튼 추가 CSS 및 클래스 가이드]
 * --------------------------------------------------------------------------
 * 사용법: 본문에서 버튼 블록 선택 -> 우측 설정 '추가 CSS 클래스' 칸에 
 * 아래의 클래스명(예: btn-red)을 입력하시면 해당 색상으로 자동 적용됩니다.
 * ========================================================================== */

/* 1. 공통 버튼 기본 스타일 초기화 (프론트엔드 + 에디터 공용 적용) */
:root :where(.wp-block-button[class*="btn-"]),
.editor-styles-wrapper .wp-block-button[class*="btn-"] {
    margin: 24px 0 !important; /* 버튼 블록 자체의 위아래 여백 설정 */
}
:root :where(.wp-block-button[class*="btn-"] .wp-block-button__link),
.editor-styles-wrapper .wp-block-button[class*="btn-"] .wp-block-button__link {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    border: none !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer;
}

/* [클래스명: btn-red] 와인색 버튼 */
:root :where(.wp-block-button.btn-red .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-red .wp-block-button__link { background-color: #A34444 !important; }

/* [클래스명: btn-orange] 테라코타 주황색 버튼 */
:root :where(.wp-block-button.btn-orange .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-orange .wp-block-button__link { background-color: #BE652A !important; }

/* [클래스명: btn-yellow] 머스타드 골드 노란색 버튼 */
:root :where(.wp-block-button.btn-yellow .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-yellow .wp-block-button__link { background-color: #B59410 !important; }

/* [클래스명: btn-green] 포레스트 그린 초록색 버튼 */
:root :where(.wp-block-button.btn-green .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-green .wp-block-button__link { background-color: #4A6741 !important; }

/* [클래스명: btn-blue] 스틸 블루 하늘색 버튼 */
:root :where(.wp-block-button.btn-blue .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-blue .wp-block-button__link { background-color: #4682B4 !important; }

/* [클래s명: btn-navy] 미드나잇 네이비 남색 버튼 */
:root :where(.wp-block-button.btn-navy .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-navy .wp-block-button__link { background-color: #2C3E50 !important; }

/* [클래스명: btn-purple] 더스티 퍼플 보라색 버튼 */
:root :where(.wp-block-button.btn-purple .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-purple .wp-block-button__link { background-color: #6D5B97 !important; }

/* [클래스명: btn-red-vivid] 경쾌한 체리 레드 */
:root :where(.wp-block-button.btn-red-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-red-vivid .wp-block-button__link { background-color: #E74C3C !important; }

/* [클래스명: btn-orange-vivid] 생기 넘치는 만다린 주황 */
:root :where(.wp-block-button.btn-orange-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-orange-vivid .wp-block-button__link { background-color: #E67E22 !important; }

/* [클래스명: btn-yellow-vivid] 밝고 화사한 선샤인 노랑 */
:root :where(.wp-block-button.btn-yellow-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-yellow-vivid .wp-block-button__link { background-color: #F1C40F !important; }

/* [클래스명: btn-green-vivid] 싱그러운 라임 그린 */
:root :where(.wp-block-button.btn-green-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-green-vivid .wp-block-button__link { background-color: #2ECC71 !important; }

/* [클래스명: btn-blue-vivid] 시원한 스카이 블루 */
:root :where(.wp-block-button.btn-blue-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-blue-vivid .wp-block-button__link { background-color: #3498DB !important; }

/* [클래스명: btn-navy-vivid] 세련된 로얄 블루 */
:root :where(.wp-block-button.btn-navy-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-navy-vivid .wp-block-button__link { background-color: #2980B9 !important; }

/* [클래스명: btn-purple-vivid] 화사한 라벤더 퍼플 */
:root :where(.wp-block-button.btn-purple-vivid .wp-block-button__link),
.editor-styles-wrapper .wp-block-button.btn-purple-vivid .wp-block-button__link { background-color: #9B59B6 !important; }

/* 2. 마우스 오버(Hover) 시 효과 */
:root :where(.wp-block-button[class*="btn-"] .wp-block-button__link):hover,
.editor-styles-wrapper .wp-block-button[class*="btn-"] .wp-block-button__link:hover {
    opacity: 1 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    filter: brightness(115%);
}

/* 3. 마우스 클릭(Active) 시 효과 */
:root :where(.wp-block-button[class*="btn-"] .wp-block-button__link):active,
.editor-styles-wrapper .wp-block-button[class*="btn-"] .wp-block-button__link:active {
    transform: translateY(-2px) scale(0.98);
}

/* 4. 모바일 반응형 */
@media (max-width: 768px) {
    :root :where(.wp-block-button[class*="btn-"]),
    .editor-styles-wrapper .wp-block-button[class*="btn-"] {
        display: block !important;
        width: 100% !important;
    }
    :root :where(.wp-block-button[class*="btn-"] .wp-block-button__link),
    .editor-styles-wrapper .wp-block-button[class*="btn-"] .wp-block-button__link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}