@charset "UTF-8";

/**
 * 나홀로소송 지원센터 전용 스타일
 * [AGENTS.md] 가이드라인 준수: 최상위 래퍼 #ai-litigation-page-wrapper 사용
 */

#ai-litigation-page-wrapper {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.02em;
    background-color: #ffffff;
}

#ai-litigation-page-wrapper .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Hero Section */
#ai-litigation-page-wrapper .ai-hero-bg {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 100%), url('../images/litigation_hero_bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

@media (max-width: 768px) {
    #ai-litigation-page-wrapper .ai-hero-bg {
        min-height: 500px; /* 모바일에서 고도를 약간 낮춤 */
        padding: 60px 0;
    }
}

/* Tab Transitions & States */
#ai-litigation-page-wrapper .tab-content {
    display: none;
    animation: ai-litigation-fadeIn 0.4s ease-out;
}

#ai-litigation-page-wrapper .tab-content.active {
    display: flex;
}

@keyframes ai-litigation-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#ai-litigation-page-wrapper .tab-btn.active {
    background-color: #1A1A1A !important;
    color: #FED65B !important;
    border-color: #1A1A1A !important;
}

/* Process Section */
#ai-litigation-page-wrapper .process-line {
    background: linear-gradient(90deg, #E0E0E0 0%, #C5A358 50%, #E0E0E0 100%);
}

#ai-litigation-page-wrapper .step-card .step-number {
    transition: all 0.3s ease;
}

#ai-litigation-page-wrapper .step-card:hover .step-number {
    background-color: #C5A358;
    color: white;
    transform: translateY(-5px);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    #ai-litigation-page-wrapper .tab-content.active {
        flex-direction: column;
    }
}