/* Smart Lazy Loader Styles */

.sll-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.sll-loading:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: sll-spin 1s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

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

.sll-error {
    text-align: center;
    padding: 20px;
    color: #e74c3c;
    background-color: #fdf2f2;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    margin: 10px 0;
}

.sll-placeholder {
    min-height: 100px;
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    border-radius: 4px;
}

.sll-load-trigger {
    background-color: #007cba;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 10px 0;
}

.sll-load-trigger:hover {
    background-color: #005a87;
    color: white;
    text-decoration: none;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .sll-placeholder {
        min-height: 80px;
        margin: 15px 0;
    }

    .sll-loading {
        padding: 15px;
        font-size: 14px;
    }
}

/* 로딩 완료 후 애니메이션 */
.sll-loaded {
    animation: sll-fadeIn 0.5s ease-in;
}

@keyframes sll-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}