/* 워크북 플립북 스타일 */

/* 플립북 섹션 */
.workbook-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 40px;
    color: white;
}

.workbook-section h3 {
    color: white;
}

/* 변환 모달 */
#workbookConvertModal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

#workbookConvertModal .modal-header {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 30px;
}

#workbookConvertModal .modal-body {
    padding: 30px;
}

#workbookConvertModal .modal-footer {
    border-top: 1px solid #f0f0f0;
    padding: 20px 30px;
}

/* 파일 입력 */
#workbook-pdf-file {
    padding: 12px;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s;
}

#workbook-pdf-file:hover {
    border-color: #6c5ce7;
    background: #f8f7ff;
}

/* 프로그레스 바 */
#convert-progress .progress {
    height: 8px;
    border-radius: 4px;
    background: #f0f0f0;
}

#convert-progress .progress-bar {
    background: linear-gradient(90deg, #6c5ce7 0%, #a29bfe 100%);
}

/* 알림 메시지 */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-info {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    color: #1976d2;
}

.alert-danger {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    color: #c62828;
}

.alert i {
    font-size: 20px;
}

/* 버튼 스타일 개선 */
.button.-purple-1 {
    transition: all 0.3s;
}

.button.-purple-1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3);
}

.button.-outline-purple-1:hover {
    background: #6c5ce7;
    color: white !important;
}

/* 로딩 스피너 */
.spinner-border {
    width: 40px;
    height: 40px;
}

/* 반응형 */
@media (max-width: 768px) {
    .workbook-section {
        padding: 30px 20px;
    }
    
    #workbookConvertModal .modal-body {
        padding: 20px;
    }
}

/* 아이콘 스타일 */
.icon-book::before {
    content: "📚";
    font-style: normal;
}

.icon-refresh::before {
    content: "🔄";
    font-style: normal;
}

.icon-information-circle::before {
    content: "ℹ️";
    font-style: normal;
}

.icon-close-circle::before {
    content: "❌";
    font-style: normal;
}

/* 아이콘이 이미 있는 경우 대비 */
i.icon-book,
i.icon-refresh,
i.icon-information-circle,
i.icon-close-circle {
    display: inline-block;
    width: 1em;
    text-align: center;
}