/* ===================================
   A-RMS Blog Page Styles
   =================================== */

/* ===================================
   공통 로딩 상태 베이스 클래스
   
   사용 예시:
   <div class="base-loading-container compact">
     <div class="base-spinner primary"></div>
     <p class="base-loading-text">로딩 중...</p>
   </div>
   =================================== */

/* 베이스 로딩 컨테이너 */
.base-loading-container {
    /* text-align: center; → Bootstrap .text-center 클래스 사용으로 제거 */
    padding: 40px 20px;
}

.base-loading-container.compact {
    padding: 20px;
}

.base-loading-container.spacious {
    padding: 30px 20px;
}

/* 베이스 로딩 텍스트 */
.base-loading-text {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* 베이스 스피너 */
.base-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    animation: base-spin 1s linear infinite;
    margin: 0 auto 16px;
}

.base-spinner.primary {
    border-top: 3px solid #fa751e;
}

.base-spinner.blue {
    border-top: 3px solid #3498db;
}

.base-spinner.bootstrap {
    border-top: 3px solid #007bff;
}

/* 베이스 점 로딩 */
.base-loading-dots {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    gap: 4px;
}

.base-loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    animation: base-dot-fade 1.4s infinite ease-in-out;
}

.base-loading-dots span:nth-child(1) { animation-delay: 0s; }
.base-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.base-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes base-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes base-dot-fade {
    0%, 60%, 100% { opacity: 0.2; }
    30% { opacity: 1; }
}

/* ===================================
   공통 위젯 베이스 클래스
   
   사용 예시:
   <div class="base-widget">
     <div class="base-widget-header">제목</div>
     <div class="base-widget-content">내용</div>
   </div>
   =================================== */

/* 베이스 위젯 컨테이너 */
.base-widget {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

/* 베이스 위젯 콘텐츠 영역 */
.base-widget-content {
    padding: 16px;
}

/* 베이스 위젯 헤더 */
.base-widget-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
    font-weight: 600;
}

body {
    background-color: #f8f9fa;
}