/* ============================================================================
   ArtVoice Private Docent Studio - Ultimate Theme Styles
   Theme: Royal Teal (로얄 청록색 - 겹치지 않는 프라이빗 갤러리 톤)
   ============================================================================ */

:root {
    /* 프라이빗 도슨트 핵심 테마 컬러 (Royal Teal) */
    --private-main: #0d9488; /* Teal 600 */
    --private-light: #2dd4bf; /* Teal 400 */
    --private-bg-hover: #f0fdfa; /* Teal 50 */
    --private-bg-active: #ccfbf1; /* Teal 100 */
    --private-text-dark: #0f766e; /* Teal 700 */
}

/* 🌌 1. 은은한 배경 효과 (라이트 톤 오로라) */
.aurora-blur {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    background: radial-gradient(circle at 15% 50%, rgba(13, 148, 136, 0.05), transparent 35%),
                radial-gradient(circle at 85% 30%, rgba(13, 148, 136, 0.03), transparent 35%);
    pointer-events: none;
}

/* 🎛️ 2. 보이스 & 모션 선택 그리드 (화이트/청록색 하이라이트) */
.voice-opt-grid, 
.motion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.75rem;
}

.voice-opt, 
.motion-opt {
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #64748b; 
}

.voice-opt:hover, 
.motion-opt:hover {
    background: var(--private-bg-hover);
    border-color: var(--private-light);
    color: var(--private-text-dark);
    transform: translateY(-2px);
}

.voice-opt.active, 
.motion-opt.active {
    background: var(--private-bg-active);
    border-color: var(--private-main) !important;
    color: var(--private-main) !important;
    box-shadow: 0 0 15px rgba(13, 148, 136, 0.15) !important;
    font-weight: 900;
}

.icon-box {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.active .icon-box {
    background: var(--private-main);
    color: #ffffff;
    border-color: var(--private-main);
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.3);
}

/* 🤖 3. AI 어시스트 버튼 */
.ai-assist-btn {
    width: 100%;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-assist-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 148, 136, 0.4);
    background: #ffffff;
    box-shadow: 0 10px 20px -5px rgba(13, 148, 136, 0.15);
}

/* 📜 4. 커스텀 얇은 스크롤바 */
.custom-scroll::-webkit-scrollbar, 
.category-scroll::-webkit-scrollbar {
    width: 6px; height: 6px;
}
.custom-scroll::-webkit-scrollbar-track, 
.category-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb, 
.category-scroll::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.3);
    border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover, 
.category-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 148, 136, 0.6);
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 🎞️ 5. 캔버스 오버레이 및 자막 폰트 */
.font-serif { 
    font-family: 'Noto Serif KR', 'KoPub Batang', 'AppleSDGothicNeo-Regular', serif; 
}
.play-overlay-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 4rem; color: rgba(255,255,255,0.8); text-shadow: 0 0 20px rgba(0,0,0,0.5);
    pointer-events: none; transition: opacity 0.3s ease; z-index: 50;
}

/* 📱 6. 앱 아이콘 버튼 */
.app-icon-btn {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.1s; text-decoration: none;
}
.app-icon-btn:active { transform: scale(0.9); }

/* ✨ 7. 애니메이션 (모두 외부 CSS로 통합) */
@keyframes guidePulse {
    0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4); border-color: rgba(13, 148, 136, 1); }
    70% { box-shadow: 0 0 0 15px rgba(13, 148, 136, 0); border-color: rgba(13, 148, 136, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); border-color: rgba(13, 148, 136, 1); }
}
.step-1-pulse {
    animation: guidePulse 2s infinite !important;
    border: 2px dashed var(--private-main) !important; 
    transition: all 0.3s ease;
}

@keyframes btnPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(13, 148, 136, 0.6); }
    100% { transform: scale(1); }
}
.step-2-pulse {
    animation: btnPulse 1.5s infinite !important;
}

@keyframes stepBorderPulse {
    0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4); border-color: rgba(13, 148, 136, 1); }
    70% { box-shadow: 0 0 0 15px rgba(13, 148, 136, 0); border-color: rgba(13, 148, 136, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); border-color: rgba(13, 148, 136, 1); }
}
@keyframes stepBtnPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(13, 148, 136, 0.7); }
    50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(13, 148, 136, 0.9); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(13, 148, 136, 0); }
}
.step-pulse-box { animation: stepBorderPulse 2s infinite !important; transition: all 0.3s ease; }
.step-pulse-btn { animation: stepBtnPulse 1.5s infinite !important; }

/* 🔒 8. 스텝 잠금 */
.step-dimmed { 
    opacity: 0.4 !important; 
    pointer-events: none !important; 
    filter: grayscale(80%); 
    transition: all 0.5s ease; 
}
/* ==========================================================
   추가 보완: 로얄 청록색(Teal) 테마 강제 매핑 (HTML 수정 없이 CSS로만 덮어쓰기)
   ========================================================== */

/* 1. 작품 분야 (라디오 버튼) 선택 시 청록색 불 들어오게 하기 */
input[type="radio"].category-radio:checked + label {
    background-color: #ccfbf1 !important; /* 연한 청록색 바탕 */
    border-color: #0d9488 !important;     /* 진한 청록색 테두리 */
    color: #0d9488 !important;            /* 청록색 글씨 */
    font-weight: 900 !important;
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.2) !important;
}

/* 2. 대본 길이 선택 버튼(10초, 20초 등) 알록달록한 색상 -> 깔끔한 청록색 톤으로 통일 */
.script-tool-btn {
    background-color: #f8fafc !important; /* 기본 밝은 회색 */
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    transition: all 0.3s ease !important;
}

/* 대본 버튼에 마우스를 올렸을 때 (Hover) */
.script-tool-btn:hover {
    background-color: #0d9488 !important; /* 로얄 청록색 바탕 */
    border-color: #0d9488 !important;
    color: #ffffff !important;            /* 흰색 글씨 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3) !important;
}

/* 3. 모션/보이스 선택 버튼 아이콘 색상 강제 통일 (혹시 남아있을 노란색 제거) */
.voice-opt i, 
.motion-opt i {
    color: inherit;
}

/* ==========================================================
   모바일 화면 글자 넘침 방지 및 UI 최적화 (반응형)
   ========================================================== */

@media (max-width: 480px) {
    /* 1. 메인 헤더 제목 크기 축소 (작가님의 프라이빗...) */
    h2.text-5xl {
        font-size: 1.875rem !important; /* 약 30px */
        line-height: 1.3 !important;
    }

    /* 2. 탭 버튼 (사진으로 제작 / 영상에 더빙) 글자 크기 및 간격 조정 */
    #tabImageBtn, #tabVideoBtn {
        font-size: 11px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        letter-spacing: -0.05em !important;
    }

    /* 3. AI_START 버튼 텍스트 크기 조정 */
    #generateBtn span {
        font-size: 1.25rem !important; /* 20px */
    }

    /* 4. [가장 문제되는 부분] 최종 영상 만들기 버튼 폰트 축소 */
    #renderVoiceBtn {
        font-size: 0.95rem !important; /* 글자가 한 줄에 들어오도록 축소 */
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        white-space: nowrap; /* 줄바꿈 방지 */
    }

    /* 5. 이용약관 동의 텍스트 크기 조정 */
    #termsAgreeCheckbox + span {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* 6. 드롭존(파일 선택창) 안내 문구 크기 조정 */
    #imageDropZone p, #videoDropZone p {
        font-size: 11px !important;
    }

    /* 7. 카테고리 라벨(버튼) 크기 미세 조정 */
    .category-radio + label {
        font-size: 10px !important;
        padding: 6px 12px !important;
    }
}

/* 초소형 기기 (아이폰 SE 등 가로 320px대) 대응 */
@media (max-width: 360px) {
    #renderVoiceBtn {
        font-size: 0.85rem !important;
    }
    #generateBtn span {
        font-size: 1.1rem !important;
    }
}