:root {
    --button-blue-bg: #3498db;
    --button-blue-hover: #2980b9;
    --button-blue-active: #21618c;
    
    --button-light-gray-bg: #f8f9fa;
    --button-light-gray-hover: #e9ecef;
    --button-light-gray-active: #dee2e6;
    
    --button-gray-bg: #6c757d;
    --button-gray-hover: #5a6268;
    --button-gray-active: #495057;
    
    --button-green-bg: #27ae60;
    --button-green-hover: #229954;
    --button-green-active: #1e8449;
    
    --button-red-bg: #e74c3c;
    --button-red-hover: #c0392b;
    --button-red-active: #a93226;
    
    --button-pink-bg: #e91e63;
    --button-pink-hover: #c2185b;
    --button-pink-active: #ad1457;
    
    --button-orange-bg: #f39c12;
    --button-orange-hover: #e67e22;
    --button-orange-active: #d35400;
    
    --button-sky-blue-bg: #17a2b8;
    --button-sky-blue-hover: #138496;
    --button-sky-blue-active: #0f6674;
    
    --button-white-bg: #ffffff;
    --button-white-hover: #f8f9fa;
    --button-white-active: #e9ecef;
    
    --button-padding-xs: 4px 8px;
    --button-padding-sm: 8px 12px;
    --button-padding-md: 12px 24px;
    --button-padding-lg: 16px 30px;
    --button-padding-xl: 16px 30px;
    
    --button-font-size-xs: 11px;
    --button-font-size-sm: 12px;
    --button-font-size-md: 14px;
    --button-font-size-lg: 16px;
    --button-font-size-xl: 18px;
    
    --button-height-xs: 26px;
    --button-height-sm: 32px;
    --button-height-md: 46px;
    --button-height-lg: 58px;
    --button-height-lg: 70px;
    
    --button-border-radius: 4px;
    --button-border-radius-round: 50px;
    --button-font-weight: bold;
    --button-transition: all 0.3s ease;
    --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    
    --button-disabled-opacity: 0.6;
    --button-loading-opacity: 0.8;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--button-padding-md);
    font-size: var(--button-font-size-md);
    font-weight: var(--button-font-weight);
    font-family: inherit;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: none;
    border-radius: var(--button-border-radius);
    background-color: transparent;
    color: inherit;
    transition: var(--button-transition);
    box-sizing: border-box;
    outline: none;
    min-height: var(--button-height-md);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.button-blue {
    background-color: var(--button-blue-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-blue:hover:not(:disabled) {
    background-color: var(--button-blue-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-blue:active {
    background-color: var(--button-blue-active);
    transform: translateY(0);
}

.button-light-gray {
    background-color: var(--button-light-gray-bg);
    color: #333;
    border: 1px solid #e9ecef;
    box-shadow: var(--button-shadow);
}
.button-light-gray:hover:not(:disabled) {
    background-color: var(--button-light-gray-hover);
    border-color: #dee2e6;
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-light-gray:active {
    background-color: var(--button-light-gray-active);
    border-color: #ced4da;
    transform: translateY(0);
}

.button-gray {
    background-color: var(--button-gray-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-gray:hover:not(:disabled) {
    background-color: var(--button-gray-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-gray:active {
    background-color: var(--button-gray-active);
    transform: translateY(0);
}

.button-green {
    background-color: var(--button-green-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-green:hover:not(:disabled) {
    background-color: var(--button-green-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-green:active {
    background-color: var(--button-green-active);
    transform: translateY(0);
}

.button-red {
    background-color: var(--button-red-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-red:hover:not(:disabled) {
    background-color: var(--button-red-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-red:active {
    background-color: var(--button-red-active);
    transform: translateY(0);
}

.button-pink {
    background-color: var(--button-pink-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-pink:hover:not(:disabled) {
    background-color: var(--button-pink-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-pink:active {
    background-color: var(--button-pink-active);
    transform: translateY(0);
}

.button-orange {
    background-color: var(--button-orange-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-orange:hover:not(:disabled) {
    background-color: var(--button-orange-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-orange:active {
    background-color: var(--button-orange-active);
    transform: translateY(0);
}

.button-sky-blue {
    background-color: var(--button-sky-blue-bg);
    color: white;
    box-shadow: var(--button-shadow);
}
.button-sky-blue:hover:not(:disabled) {
    background-color: var(--button-sky-blue-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-sky-blue:active {
    background-color: var(--button-sky-blue-active);
    transform: translateY(0);
}

.button-white {
    background-color: var(--button-white-bg);
    color: #333;
    border: 1px solid #dee2e6;
    box-shadow: var(--button-shadow);
}
.button-white:hover:not(:disabled) {
    background-color: var(--button-white-hover);
    border-color: #adb5bd;
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
}
.button-white:active {
    background-color: var(--button-white-active);
    border-color: #6c757d;
    transform: translateY(0);
}

.button-xs {
    padding: var(--button-padding-xs);
    font-size: var(--button-font-size-xs);
    min-height: var(--button-height-xs);
}

.button-sm {
    padding: var(--button-padding-sm);
    font-size: var(--button-font-size-sm);
    min-height: var(--button-height-sm);
}

.button-md {
    padding: var(--button-padding-md);
    font-size: var(--button-font-size-md);
    min-height: var(--button-height-md);
}

.button-lg {
    padding: var(--button-padding-lg);
    font-size: var(--button-font-size-lg);
    min-height: var(--button-height-lg);
}

.button-xl {
    padding: var(--button-padding-xl);
    font-size: var(--button-font-size-xl);
    min-height: var(--button-height-xl);
}

/* === Switch Toggle Button === */
.switch-toggle-button {
    width: 50px;
    height: 26px;
    padding: 0;
    min-height: 26px;
    border-radius: 26px;
    background-color: var(--button-light-gray-bg);
    border: none;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible;
    box-sizing: border-box;
}

.switch-toggle-button::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.switch-toggle-button:hover:not(:disabled) {
    /* hover 시 배경 색 변경 없음, 살짝 움직임만 유지 */
    transform: translateY(-1px);
    box-shadow: var(--button-shadow-hover);
    /* 기본 회색 배경 유지 */
    background-color: var(--button-light-gray-bg) !important;
}

.switch-toggle-button.active {
    background-color: var(--button-blue-bg);
}

.switch-toggle-button.active::before {
    transform: translateX(24px);
}

.switch-toggle-button:active {
    transform: translateY(0);
}

/* active 상태에서도 hover 효과 유지 (움직임만) */
.switch-toggle-button.active:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--button-shadow-hover);
    /* active 상태의 파란색 배경 유지 */
    background-color: var(--button-blue-bg) !important;
}

/* 토글 스위치가 active 상태일 때도 스위치 형태 유지 */
.switch-toggle-button.active {
    border-radius: 26px !important;
    width: 50px !important;
    height: 26px !important;
    overflow: visible !important;
    min-width: 50px !important;
    min-height: 26px !important;
    max-width: 50px !important;
    max-height: 26px !important;
}

/* 토글 스위치 렌더링 안정화 */
.switch-toggle-button,
.switch-toggle-button.active {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 토글 스위치 크기 고정 */
.switch-toggle-button {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ================================
   Count 버튼 스타일
   ================================ */
.button.count-btn {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.button.count-btn:hover {
    border-color: #007bff;
}

/* ================================
   오버레이 표시 시 버튼 스타일
   ================================ */

/* 오버레이로 인해 비활성화된 버튼 */
button[data-overlay-disabled="true"],
button[data-generation-overlay-disabled="true"] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* 버튼 처리 중 상태 */
button.button-processing {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative;
}

/* 버튼 처리 중 애니메이션 */
button.button-processing::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: button-spinner 0.6s linear infinite;
}

@keyframes button-spinner {
    to { transform: rotate(360deg); }
}

/* 오버레이가 활성화된 상태에서 버튼 그룹 */
.pending-overlay ~ *:not(.pending-overlay):not(.feature-edit-modal-overlay) button:not([data-overlay-disabled]),
.in-progress-overlay ~ *:not(.in-progress-overlay):not(.feature-edit-modal-overlay) button:not([data-overlay-disabled]),
.waiting-overlay ~ *:not(.waiting-overlay):not(.feature-edit-modal-overlay) button:not([data-overlay-disabled]),
.save-confirmation-overlay ~ *:not(.save-confirmation-overlay):not(.feature-edit-modal-overlay) button:not([data-generation-overlay-disabled]),
.generation-progress-overlay ~ *:not(.generation-progress-overlay):not(.feature-edit-modal-overlay) button:not([data-generation-overlay-disabled]) {
    pointer-events: none;
    opacity: 0.5;
}

/* 오버레이 내부의 버튼은 활성화 상태 유지 */
.pending-overlay button,
.in-progress-overlay button,
.waiting-overlay button,
.save-confirmation-overlay button,
.generation-progress-overlay button {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* feature edit modal 내부의 버튼도 활성화 상태 유지 */
.feature-edit-modal-overlay button {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}