/* ── 업로드 영역, 파이프라인, 상태 ── */

/* Pipeline steps */
.pipeline-steps {
    display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 28px;
}
.pipeline-step {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 18px; border-radius: 24px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    font-size: 13px; color: #64748b; font-weight: 500;
    transition: all 0.3s;
}
.pipeline-step svg { width: 16px; height: 16px; stroke: #94a3b8; flex-shrink: 0; transition: all 0.3s; }
.pipeline-step:hover {
    background: var(--sf-primary-light); border-color: var(--sf-primary-border);
    color: var(--sf-primary);
}
.pipeline-step:hover svg { stroke: var(--sf-primary); }
.pipeline-step.active {
    background: var(--sf-primary-light); border-color: var(--sf-primary-border);
    color: var(--sf-primary); font-weight: 600;
}
.pipeline-step.active svg { stroke: var(--sf-primary); }
.pipeline-arrow {
    color: #cbd5e1; font-size: 13px; margin: 0 6px; flex-shrink: 0;
}

/* Upload area */
.upload-area {
    border: 1.5px dashed var(--sf-primary-border);
    border-radius: 12px;
    padding: 36px 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #fcfcff;
}
.upload-area:hover, .upload-area.dragover {
    border-color: var(--sf-primary); background: #f0f2ff;
    box-shadow: 0 0 0 4px rgba(102,126,234,0.06);
}
.upload-area.uploading {
    border-color: var(--sf-primary);
    animation: uploadPulse 2s ease-in-out infinite;
}
@keyframes uploadPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234,0.1); }
    50% { box-shadow: 0 0 0 8px rgba(102,126,234,0.06); }
}
.upload-icon { margin-bottom: 12px; }
.upload-icon svg { width: 40px; height: 40px; stroke: #94a3b8; }
.upload-area:hover .upload-icon svg,
.upload-area.dragover .upload-icon svg { stroke: var(--sf-primary); }
.upload-text-mobile { display: none; }
.file-badges { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.file-badge {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 4px;
    letter-spacing: 0.02em;
}
.file-badge.hwp { background: #eff6ff; color: #3b82f6; }
.file-badge.docx { background: #f0fdf4; color: #22c55e; }
.file-badge.pdf { background: #fef2f2; color: #ef4444; }
.file-input { display: none; }

/* Result links */
.result-links { margin-top: 20px; display: none; }
.result-links.show { display: block; }

/* Test mode controls */
.test-controls {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.test-controls .btn-mock {
    font-size: 11px; padding: 6px 10px; border-radius: 6px;
    border: none; cursor: pointer; font-weight: 600;
    transition: all 0.2s;
}
.test-controls .btn-mock.btn-complete {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.test-controls .btn-mock.btn-complete:hover { opacity: 0.85; transform: translateY(-1px); }
.test-controls .btn-mock.btn-fail {
    background: #f8d7da; color: #721c24;
}
.test-controls .btn-mock.btn-fail:hover { background: #f5c6cb; }