/* ============================================================
   Console Onboarding Guide — 4-Step Interactive
   Step 1: 드래그 유도 (오른쪽 플로팅 파일)
   Step 2: 미리보기 클릭 유도
   Step 3: 설문하기 체험 유도
   Step 4: 직접 업로드 안내
   ============================================================ */

/* --- Step 1: Floating file card (오른쪽 사이드) --- */
.onboard-float {
    position: fixed;
    top: 50%;
    right: 32px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-50%) translateX(20px);
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboard-float.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    animation: guidePulse 2s ease-in-out infinite;
}

/* 전체 가이드 두웅두웅 */
@keyframes guidePulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.03); }
}

/* Draggable file element */
.onboard-float-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: grab;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    -webkit-user-select: none;
}
.onboard-float-file:hover {
    border-color: var(--sf-primary, #667eea);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.18);
}
.onboard-float-file:active,
.onboard-float-file.dragging {
    cursor: grabbing;
    opacity: 0.7;
    transform: scale(0.95);
}

/* File icon */
.onboard-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eff6ff;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.onboard-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}
.onboard-float-file + .onboard-float-file {
    margin-top: 8px;
}
/* 모바일: 탭 모드 카드 */
.onboard-float-file.onboard-tap {
    cursor: pointer;
}
.onboard-float-file.onboard-tap:active {
    cursor: pointer;
    background: #eef2ff;
    border-color: var(--sf-primary, #667eea);
    transform: scale(0.97);
}

/* --- Badge (1, 2) — 일반 숫자 --- */
.onboard-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    background: var(--sf-primary, #667eea);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    z-index: 1;
}

/* --- Hint text --- */
.onboard-hint {
    font-size: 14px;
    color: #0f172a;
    text-align: center;
    line-height: 1.6;
    margin: 0;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Close button (shared) --- */
.onboard-float-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
}
.onboard-float .onboard-float-close {
    top: -6px;
    right: -6px;
}
.onboard-float-close:hover {
    background: #e2e8f0;
    color: #475569;
}

/* --- "다시 보지 않기" link --- */
.onboard-never {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.6);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.onboard-never:hover {
    color: #0f172a;
    text-decoration: underline;
}

/* --- Upload area highlight during Step 1 --- */
.upload-area.onboard-highlight {
    border-color: var(--sf-primary, #667eea);
    animation: onboardPulse 2s ease-in-out infinite;
}
@keyframes onboardPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.15); }
    50% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
}

/* --- Arrow SVG (점선 화살표) --- */
.onboard-arrow-path {
    animation: dashFlow 0.8s linear infinite;
}
@keyframes dashFlow {
    to { stroke-dashoffset: -14; }
}

/* --- Step 2/3/4: 공용 가이드 카드 (좌측 하단 고정) --- */
.onboard-guide {
    position: fixed;
    bottom: 100px;
    left: 40px;
    z-index: 1000;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.8);
    border: 1px solid #d1d5db;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 240px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.onboard-guide.visible {
    opacity: 1;
    transform: translateY(0);
    animation: guidePulseCard 2s ease-in-out infinite;
}

@keyframes guidePulseCard {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(0) scale(1.03); }
}

.onboard-guide .onboard-badge {
    position: relative;
    top: auto;
    left: auto;
}
.onboard-guide-text {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}
.onboard-guide-text strong {
    color: var(--sf-primary, #667eea);
    font-weight: 700;
}

/* --- Overlay (반투명 배경) --- */
.onboard-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
}

/* --- 스크롤 잠금 --- */
body.onboard-no-scroll {
    overflow: hidden !important;
}

/* --- 스포트라이트 대상 — 오버레이 위로 올림 --- */
.onboard-spotlight {
    position: relative;
    z-index: 999 !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3);
    border-radius: 12px;
}

/* --- Mobile --- */
@media (max-width: 900px) {
    .onboard-float {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%) translateY(20px);
    }
    .onboard-float.visible {
        transform: translateX(50%) translateY(0);
        animation: guidePulseMobile 2s ease-in-out infinite;
    }
    @keyframes guidePulseMobile {
        0%, 100% { transform: translateX(50%) scale(1); }
        50% { transform: translateX(50%) scale(1.03); }
    }
    .onboard-guide {
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 20px;
        top: auto !important;
    }
    .onboard-guide.visible {
        transform: translateX(-50%);
        animation: guidePulseCardMobile 2s ease-in-out infinite;
    }
    @keyframes guidePulseCardMobile {
        0%, 100% { transform: translateX(-50%) scale(1); }
        50% { transform: translateX(-50%) scale(1.03); }
    }
}

/* --- Mobile 768px: 온보딩 카드/텍스트 축소 --- */
@media (max-width: 768px) {
    .onboard-float-file { padding: 10px 14px; gap: 8px; }
    .onboard-file-icon { width: 32px; height: 32px; font-size: 12px; }
    .onboard-file-name { font-size: 12px; }
    .onboard-hint { font-size: 13px; }
    .onboard-guide { padding: 12px 16px; }
    .onboard-guide-text { font-size: 13px; }
}