/* 3.buttons.css - Buttons Styles */

/* ------------------------------------------------------------
   A. 기본 버튼 (Base)
   ------------------------------------------------------------ */
.btn-base {
    height: 32px; padding: 0 15px;
    border-radius: 6px; font-weight: 600; font-size: 13px;
    cursor: pointer; border: none;
    transition: all 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-base:hover { 
    filter: brightness(1.15); 
    transform: translateY(-1px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-base:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ------------------------------------------------------------
   B. 색상 변형 (Theme 변수 활용)
   ------------------------------------------------------------ */
.btn-run-main   { background-color: var(--btn-main-bg); color: white; }
.btn-run-sub    { background-color: var(--btn-sub-bg); color: white; }
.btn-open-popup { background-color: var(--btn-popup-bg); color: white; }
.btn-save       { background-color: var(--btn-save-bg); color: white; }
.btn-danger     { background-color: var(--btn-danger-bg); color: #ffffff !important; }
.btn-setting    { background-color: var(--btn-setting-bg); color: white; }
.btn-download   { background-color: var(--btn-down-bg); color: #333 !important; }
.btn-close      { background-color: var(--btn-close-bg); color: #333 !important; }

/* ------------------------------------------------------------
   C. 필터 토글 버튼 (옵션 선택용)
   ------------------------------------------------------------ */
/* 기본 상태 (회색) */
.btn-filter {
    background-color: #ecf0f1; color: #2c3e50;
    border: 1px solid #bdc3c7; font-weight: 600;
    padding: 6px 12px; border-radius: 4px; cursor: pointer;
    transition: all 0.2s; /* 부드러운 전환 추가 */
}

/* [추가됨] 마우스 올렸을 때 (반응형 피드백) */
.btn-filter:hover {
    background-color: #bdc3c7; 
    border-color: #95a5a6;
}

/* 활성화 상태 (파란색) */
.btn-filter.active {
    background-color: var(--primary-color) !important;
    color: white !important; border-color: var(--primary-color) !important;
}

/* [3.button.css] 파일 맨 아래에 추가 */

/* 페이지네이션 버튼 기본 */
.page-btn {
    min-width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s; /* 부드러운 효과 추가 */
}

/* 호버 효과 */
.page-btn:hover { 
    background: #f5f5f5; 
}

/* 활성화(선택된 페이지) 상태 */
.page-btn.active {
    background: var(--accent-blue, #3498db); 
    color: white;
    border-color: var(--accent-blue, #3498db);
    font-weight: bold;
}

/* 비활성화(이전/다음 없음) 상태 */
.page-btn:disabled { 
    color: #ccc; 
    cursor: default; 
    background: #fff; /* 배경색 유지 */
}