/* 상세 가이드 섹션 디자인 개선 (Professional & Compact) */

/* 가이드 블록 컨테이너 */
.guide-block {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 900px !important;
    padding: 0 24px 20px !important;
    margin-top: 10px !important;
    text-align: center !important;
}

/* 섹션 타이틀 */
.guide-block .guide-section-title {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: block !important;
}

/* 카드 컨테이너 (Flex Row) */
.guide-block .chatgpt-purpose-cards {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    /* 기존 Grid 무력화 */
}

/* 가이드 카드 (Glassmorphism & Compact) */
.guide-block .chatgpt-purpose-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    min-width: 180px !important;
    flex: 0 1 auto !important;
    text-align: left !important;
}

.guide-block .chatgpt-purpose-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 아이콘 스타일 */
.guide-block .purpose-card-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.guide-block .purpose-card-icon i {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 텍스트 콘텐츠 */
.guide-block .purpose-card-content {
    text-align: left !important;
    flex: 1 !important;
}

.guide-block .purpose-card-content h3 {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* 설명 텍스트 숨김 */
.guide-block .purpose-card-content p {
    display: none !important;
}

/* ==========================================================================
   레이아웃 밸런스 수정 (Layout Fixes)
   ========================================================================== */

/* 메인 히어로 섹션: Space-Between 제거하고 자연스러운 흐름으로 변경 */
.main-hero-section {
    justify-content: flex-start !important;
    gap: 0 !important;
    /* 요소 간 간격은 개별 마진으로 제어 */
}

/* 히어로 콘텐츠 영역 (타이틀): 상단 여백 대폭 추가하여 시선 내리기 */
.hero-content-area {
    padding-top: 180px !important;
    /* 80px -> 180px */
    padding-bottom: 40px !important;
    flex: 0 0 auto !important;
}

/* 목적 카드 블록 */
.purpose-block {
    margin-bottom: 10px !important;
}

/* 가이드 블록 위치 미세 조정 */
.guide-block {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

/* 하단 챗봇 입력창: 화면 하단에 고정하되 자연스럽게 */
.floating-chatbot {
    margin-top: auto !important;
    /* Flex 컨테이너에서 하단으로 밀어내기 */
    padding-bottom: 50px !important;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .hero-content-area {
        padding-top: 140px !important;
    }

    .floating-chatbot {
        padding-bottom: 30px !important;
    }
}