/**
 * [스타일 모듈] 컴포넌트 특화 디자인
 * 책임: 재사용 가능한 UI 블록(유리 카드, 네온 버튼, 네비바 등) 디자인 관리
 */

 /* 1. 네비게이션 캡슐 디자인 (Glassmorphism) */
.navbar {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 36px;
    border-radius: 60px;
    z-index: 100;
    
    /* 애플(Apple) 감성의 진정한 배경 블러 처리 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.navbar .logo {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.nav-links a {
    color: var(--text-mute);
    text-decoration: none;
    margin-left: 0;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.3s;
    white-space: nowrap;
    word-break: keep-all;
}

.nav-links a:hover { color: var(--text-main); }

/* 상담 문의 CTA 버튼 (네비바) */
.btn-primary-small {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
    color: #fff !important;
    padding: 8px 18px !important;
    border-radius: 20px;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
}
.btn-primary-small:hover { opacity: 0.85; transform: translateY(-2px); }

/* 2. 네온 파워 CTA 버튼 */
.btn-glow {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
    border: none;
    padding: 20px 48px;
    border-radius: 40px;
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 50px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.3);
}

.btn-glow:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.7);
}

/* 3. 서비스 소개용 투명 3D 카드 컨테이너 */
.card-container {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
    justify-content: center;
}

.glass-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 44px 32px;
    flex: 1 1 280px;
    max-width: 380px;
    text-align: left;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.glass-card:hover {
    transform: translateY(-12px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.glass-card .icon {
    font-size: 3rem;
    margin-bottom: 25px;
}

.glass-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    letter-spacing: -0.03em;
}

.glass-card p {
    color: var(--text-mute);
    line-height: 1.6;
}

/* 4. 히어로 전용 폰트 디자인 및 글자색 채색 */
.hero-title {
    font-size: 4.5rem;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.highlight {
    background: linear-gradient(to right, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.4rem;
    color: var(--text-mute);
    text-align: center;
    font-weight: 400;
}

/* 5. 등장 애니메이션 지연 클래스 팩토리 */
.delay-1 { transition-delay: 0.15s !important; }
.delay-2 { transition-delay: 0.3s !important; }

/* 6. Contact Form (보안 통신 폼) 디자인 */
.glass-form {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 50px;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.form-group label {
    font-size: 0.95rem;
    color: var(--text-mute);
    font-weight: 500;
}

.form-group input, .form-group textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    padding: 15px;
    border-radius: 12px;
    color: var(--text-main);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--neon-purple);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.w-100 {
    width: 100%;
    margin-top: 20px;
}

/* 7. 포트폴리오(Case Studies) 특화 조판 */
.portfolio-section {
    padding: 100px 20px;
    width: 100%;
}

.section-subtitle {
    text-align: center;
    color: var(--text-mute);
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 60px;
    max-width: 700px;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 50px;
}

.case-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 40px;
    transition: transform 0.3s, border-color 0.3s;
}

.case-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.5);
}

.case-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.case-card h3 {
    font-size: 1.35rem;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.case-problem {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #fca5a5;
    margin-bottom: 20px;
    border-left: 4px solid #ef4444;
    line-height: 1.5;
}

.case-solution {
    list-style: none;
}

.case-solution li {
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 12px;
    line-height: 1.5;
}

.industry-stats {
    text-align: center;
    width: 100%;
    max-width: 900px;
    padding-top: 40px;
    border-top: 1px solid var(--glass-border);
}

.industry-stats h3 {
    margin-bottom: 20px;
    color: var(--text-mute);
    font-weight: 500;
}

.stat-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.stat-tags span {
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* 8. 상세페이지 신뢰도 태그 (Tech-stack) */
.tech-stack-banner {
    margin-top: 60px;
    padding: 20px 45px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1.1rem;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.tech-stack-banner strong {
    color: #fff;
    letter-spacing: 1px;
}

/* 9. UX Agitation Section (Problem vs Solution) */
.problem-section {
    padding: 100px 20px;
    width: 100%;
}

.vs-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1100px;
    margin: 50px auto 0;
    flex-wrap: wrap;
}

.vs-box {
    flex: 1;
    min-width: 300px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 40px;
    transition: transform 0.3s;
}

.vs-box.before {
    border-top: 4px solid #ef4444;
}

.vs-box.after {
    border-top: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.05); /* subtle green glow */
}

.vs-box h3 {
    font-size: 1.4rem;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 700;
}

.vs-box ul {
    list-style: none;
}

.vs-box ul li {
    font-size: 1.05rem;
    color: var(--text-mute);
    margin-bottom: 18px;
    position: relative;
    padding-left: 20px;
}

.vs-box ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--neon-blue);
    font-weight: bold;
}

.vs-box.before ul li::before {
    color: #ef4444;
}

.badge {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--neon-blue);
    color: #93c5fd;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

@keyframes pulseBorder {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

.pulse-anim {
    animation: pulseBorder 2s infinite;
}

/* 10. Philosophy Multi-Grid Styles */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

@media (max-width: 1024px) {
    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
    }
}

.philosophy-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 25px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: left;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.philosophy-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
}

.philosophy-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.5;
    word-break: keep-all;
}

.philosophy-card p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* Colorful glowing gradients for each card */
.p-card-1 { border-top: 4px solid #8b5cf6; box-shadow: 0 10px 40px rgba(139, 92, 246, 0.08); }
.p-card-2 { border-top: 4px solid #3b82f6; box-shadow: 0 10px 40px rgba(59, 130, 246, 0.08); }
.p-card-3 { border-top: 4px solid #10b981; box-shadow: 0 10px 40px rgba(16, 185, 129, 0.08); }
.p-card-4 { border-top: 4px solid #f59e0b; box-shadow: 0 10px 40px rgba(245, 158, 11, 0.08); }
.p-card-5 { border-top: 4px solid #ef4444; box-shadow: 0 10px 40px rgba(239, 68, 68, 0.08); }
.p-card-6 { border-top: 4px solid #ec4899; box-shadow: 0 10px 40px rgba(236, 72, 153, 0.08); }

/* 11. 구글 번역기 — 지구본 아이콘만 표시 */
#google_translate_element .goog-te-gadget-simple {
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    overflow: hidden !important;
}
#google_translate_element .goog-te-gadget-simple a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* 모든 텍스트 span 숨김 */
#google_translate_element .goog-te-gadget-simple span,
#google_translate_element .goog-te-gadget-simple b { display: none !important; }
/* 지구본 이미지만 표시 */
#google_translate_element .goog-te-gadget-simple img {
    width: 18px !important;
    height: 18px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.75 !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }
font, font * { font-family: inherit !important; } /* 번역기 폰트 깨짐 방지 */
@media screen and (max-width: 768px) { #google_translate_element { display: none; } }

/* 12. API 상품 카드 그리드 반응형 */
#api-products > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1024px) {
    #api-products > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    #api-products > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* 모바일 반응형 완벽 보장 (Mobile Responsive Grids & Typography) */
.grid-layout-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-layout-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-layout-3.gap-25 { gap: 25px; }
.grid-contact { display: grid; grid-template-columns: 1fr auto; gap: 40px; text-align: left; }

@media screen and (max-width: 1024px) {
    .grid-layout-4 { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .grid-layout-3 { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .grid-contact { grid-template-columns: 1fr; gap: 25px; text-align: center !important; }
    .grid-contact > div:last-child { justify-content: center !important; }
}

@media screen and (max-width: 768px) {
    .grid-layout-4 { grid-template-columns: 1fr !important; }
    .grid-layout-3 { grid-template-columns: 1fr !important; }
    .inline-grid-md { grid-template-columns: 1fr !important; }
    
    /* 4단계 프로세스 그리드 & 필로소피 그리드 모바일 정렬 (4번 항목 완벽 해결) */
    .process-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    .philosophy-grid { grid-template-columns: 1fr !important; gap: 15px !important; padding: 0; }
    
    .grid-contact { grid-template-columns: 1fr; gap: 20px; text-align: center !important; padding: 30px 20px !important; }
    .grid-contact > div:last-child { justify-content: center !important; }
    .hero-title { font-size: 2.1rem !important; }
    .hero-subtitle { font-size: 1.05rem !important; padding: 0 10px; }
    .section-title { font-size: 1.7rem !important; margin-bottom: 25px !important; line-height: 1.4 !important; }
    section { padding: 60px 15px !important; }
    body { overflow-x: hidden; }
    
    /* 모든 카드류 모바일 최적화 여백 및 사이즈 박스 */
    .card-container { gap: 16px !important; }
    .glass-card { padding: 24px 20px !important; max-width: 100% !important; margin-bottom: 15px; }
    .graph-card { min-width: 100% !important; padding: 24px 20px !important; }
    .philosophy-card { padding: 24px 20px !important; }
    .demo-card { min-width: 100% !important; padding: 24px 20px !important; }
    
    /* 네비바 제어 (햄버거 메뉴) */
    .mobile-menu-btn { display: block !important; margin-left: auto; }
    .nav-links { 
        display: none !important; 
        position: absolute; top: 100%; left: 0; width: 100%; 
        background: rgba(15,15,30,0.98); backdrop-filter: blur(15px); border-radius: 20px; 
        flex-direction: column; padding: 10px 20px; border: 1px solid rgba(139,92,246,0.5); 
        margin-top: 15px; z-index: 1000; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    }
    .nav-links.active { display: flex !important; }
    .nav-links a { margin: 8px 0 !important; font-size: 1.1rem !important; text-align: center; width: 100%; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .nav-links a:nth-child(8) { border-bottom: none; }
    #lang-toggle-btn { margin: 15px auto !important; width: 100% !important; max-width: 250px; padding: 10px; height: 44px; font-size: 1rem !important; }
    .navbar { padding: 12px 18px !important; top: 10px !important; width: 95% !important; border-radius: 40px !important; flex-wrap: wrap; }
    .navbar .logo { font-size: 1.05rem !important; gap: 5px !important; }
    .btn-glow { padding: 14px 28px !important; font-size: 0.95rem !important; margin-top: 30px !important; }
}

/* 📱 아이폰 14/15/16 Pro Max, Galaxy S24 Ultra (최대 430px) 등 대화면 스마트폰 디테일 최적화 */
@media screen and (max-width: 430px) {
    /* 아이폰 노치/다이내믹 아일랜드(Safe Area) 여백 대응 */
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .navbar { top: calc(10px + env(safe-area-inset-top)) !important; }
    
    .hero-title { font-size: 1.9rem !important; line-height: 1.25 !important; }
    .section-title { font-size: 1.6rem !important; line-height: 1.35 !important; }
    section { padding: 50px 18px !important; }
    
    .glass-card, .graph-card, .philosophy-card, .demo-card { 
        padding: 22px 18px !important;
        margin-bottom: 12px;
    }
}

/* ─── Feature 카드 1~4 반응형 (실제 AI 봇 작동화면 섹션) ─── */

/* 430px 이하: 아이폰 Pro Max, Galaxy S24 Ultra 등 일반 대화면 스마트폰 */
@media screen and (max-width: 430px) {
    .feature-card { padding: 20px 16px !important; }
    .feature-demo-box { height: 210px !important; }

    /* 하단 뱃지: 폰트·패딩 축소, 줄바꿈 허용 */
    .feature-demo-badge {
        font-size: 0.75rem !important;
        padding: 7px 10px !important;
        white-space: normal !important;
        max-width: 80% !important;
        letter-spacing: 0 !important;
    }

    /* n8n 노드 위치 조정 (310px → 화면 안으로) */
    .n8n-node { width: 58px !important; font-size: 0.68rem !important; padding: 9px 0 !important; }
    .n8n-webhook  { left: 4px !important; }
    .n8n-center-top, .n8n-center-bottom { left: 48% !important; }
    .n8n-deploy   { left: calc(100% - 68px) !important; }
}

/* 380px 이하: Galaxy Z Fold 전면(280px), iPhone SE 등 초소형 */
@media screen and (max-width: 380px) {
    .feature-card { padding: 16px 13px !important; }
    .feature-demo-box { height: 180px !important; padding: 12px !important; }

    .feature-demo-badge {
        font-size: 0.68rem !important;
        padding: 5px 8px !important;
        max-width: 75% !important;
    }

    /* n8n SVG 선 숨김 (280px에서 경로 좌표 overflow) */
    .n8n-svg-lines { display: none !important; }

    /* 노드 더 작게 */
    .n8n-node { width: 50px !important; font-size: 0.6rem !important; padding: 7px 0 !important; }
    .n8n-webhook  { left: 2px !important; top: 80px !important; }
    .n8n-center-top  { left: 44% !important; top: 40px !important; }
    .n8n-center-bottom { left: 44% !important; top: 120px !important; }
    .n8n-deploy   { left: calc(100% - 56px) !important; top: 80px !important; }

    /* Feature 카드 h3 텍스트 크기 */
    .feature-card h3 { font-size: 1.1rem !important; line-height: 1.35 !important; }
    .feature-card p  { font-size: 0.88rem !important; line-height: 1.55 !important; }
    .feature-card ul { font-size: 0.82rem !important; }
}

/* ─── 인라인 그리드 모바일 강제 단열 (minmax overflow 방지) ─── */
/* minmax(300px~380px) 인라인 그리드가 폴드폰·소형폰에서 가로 overflow 유발 → 강제 1컬럼 */
@media screen and (max-width: 480px) {
    .inline-grid-lg,
    .inline-grid-md {
        grid-template-columns: 1fr !important;
    }
    /* 회사 신뢰 배너 헤더: 과도한 패딩 축소 */
    .trust-banner-header {
        padding: 20px 18px !important;
        gap: 14px !important;
    }
}

/* 갤럭시 Z 폴드(Fold 전면 액정 280px) 및 최신 초소형폰(iPhone SE 등) 완벽 초밀착 대응 */
@media screen and (max-width: 380px) {
    .hero-title { font-size: 1.7rem !important; }
    .section-title { font-size: 1.45rem !important; margin-bottom: 20px !important; }
    .section-subtitle { font-size: 0.95rem !important; }
    
    .glass-card, .graph-card, .philosophy-card, .demo-card { 
        padding: 20px 15px !important;
        border-radius: 16px !important;
    }
    
    .philosophy-card h3, .glass-card h3 { font-size: 1.15rem !important; margin-bottom: 12px !important; }
    .philosophy-card p, .glass-card p { font-size: 0.95rem !important; line-height: 1.5 !important; }
    
    /* 기존 카테고리 숨김 코드 삭제 (햄버거 메뉴 사용) */
    .navbar { padding: 10px 15px !important; width: 98% !important; }
    .navbar .logo { font-size: 0.95rem !important; }
    
    .tech-stack-banner { font-size: 0.85rem !important; padding: 15px !important; }
}

/* ─── proof 섹션 stats-grid 모바일 대응 ─── */
@media screen and (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stats-grid > div {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .stats-grid > div:last-child {
        grid-column: 1 / -1;   /* 마지막 카카오모빌리티 항목 전체 너비 */
        border-bottom: none;
    }
}

/* ─── 그래프 바 스크롤 인 애니메이션 ─── */
/* transform 기반 — 인라인 width/height 와 충돌 없음 */
@keyframes growRight {
    from { transform: scaleX(0); opacity: 0.3; }
    to   { transform: scaleX(1); opacity: 1; }
}
@keyframes growUp {
    from { transform: scaleY(0); opacity: 0.3; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* 가로 바 */
.bar-h {
    transform-origin: left center;
    animation: growRight 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
    animation-play-state: paused;
}
/* 세로 바 */
.bar-v {
    transform-origin: bottom center;
    animation: growUp 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
    animation-play-state: paused;
}
/* 딜레이 단계 */
.bar-h.d1, .bar-v.d1 { animation-delay: 0.1s; }
.bar-h.d2, .bar-v.d2 { animation-delay: 0.4s; }
.bar-h.d3, .bar-v.d3 { animation-delay: 0.7s; }
.bar-h.d4, .bar-v.d4 { animation-delay: 1.0s; }

/* 카드가 뷰포트에 들어오면 재생 */
.graph-card.bar-ready .bar-h,
.graph-card.bar-ready .bar-v { animation-play-state: running; }

/* ═══════════════════════════════════════════════════════════════
   13. Hero 3D Core 애니메이션 (inline → 모듈화)
═══════════════════════════════════════════════════════════════ */
@keyframes rotateCore { 0% { transform: rotateX(15deg) rotateY(0); } 100% { transform: rotateX(15deg) rotateY(360deg); } }
@keyframes counterRotate { 0% { transform: rotateY(0) rotateX(-15deg); } 100% { transform: rotateY(-360deg) rotateX(-15deg); } }
@keyframes pulseGlow { 0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 30px #8b5cf6, 0 0 50px #3b82f6; } 100% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 50px #8b5cf6, 0 0 90px #3b82f6; } }

/* ═══════════════════════════════════════════════════════════════
   14. 마퀴(Marquee) 브랜드 슬라이더
═══════════════════════════════════════════════════════════════ */
@keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee-wrapper { overflow: hidden; white-space: nowrap; display: flex; background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 35px 0; margin-bottom: 80px; }
.marquee-content { display: flex; animation: slide-left 35s linear infinite; }
.marquee-item { font-size: 1.5rem; font-weight: 800; color: rgba(255,255,255,0.3); margin: 0 45px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; cursor: default; }
.marquee-item:hover { color: rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════════════════════════════
   15. 3D AI 시뮬레이션 씬 (proof 섹션)
═══════════════════════════════════════════════════════════════ */
.scene-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(25deg) rotateY(-15deg); animation: floatScene 10s ease-in-out infinite alternate; }
@keyframes floatScene { 0% { transform: rotateX(20deg) rotateY(-10deg) translateY(10px); } 100% { transform: rotateX(25deg) rotateY(-20deg) translateY(-10px); } }
.panel-3d { position: absolute; background: rgba(20,20,25,0.85); border: 2px solid rgba(255,255,255,0.1); padding: 25px; border-radius: 12px; backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 15px 35px rgba(0,0,0,0.5); transition: all 0.5s; width: 180px; height: 160px; text-align: center; }
.panel-1 { top: 20%; left: 10%; transform: translateZ(50px); border-color: rgba(139,92,246,0.5); box-shadow: 0 0 30px rgba(139,92,246,0.2); }
.panel-2 { top: 40%; left: 40%; transform: translateZ(150px); border-color: rgba(239,68,68,0.5); box-shadow: 0 0 30px rgba(239,68,68,0.2); }
.panel-3 { top: 20%; left: 70%; transform: translateZ(50px); border-color: rgba(16,185,129,0.5); box-shadow: 0 0 30px rgba(16,185,129,0.2); }
.data-beam { position: absolute; width: 12px; height: 12px; background: #fff; border-radius: 50%; filter: blur(2px); box-shadow: 0 0 20px #fff; opacity: 0; }
.beam-1 { animation: fireBeam1 3s infinite cubic-bezier(0.4,0,0.2,1); }
.beam-2 { animation: fireBeam2 3s infinite cubic-bezier(0.4,0,0.2,1); animation-delay: 1.5s; }
@keyframes fireBeam1 { 0% { top:35%; left:25%; transform:translateZ(50px); opacity:1; background:var(--neon-purple); } 100% { top:55%; left:45%; transform:translateZ(150px); opacity:0; } }
@keyframes fireBeam2 { 0% { top:55%; left:55%; transform:translateZ(150px); opacity:1; } 100% { top:35%; left:75%; transform:translateZ(50px); opacity:0; } }
.code-line { width:100%; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; margin:5px 0; overflow:hidden; display:flex; justify-content:flex-start; }
.code-fill { height:100%; background:var(--neon-blue); width:0%; animation:typingCode 3s infinite; }
.code-fill.delay { animation-delay:0.5s; background:#fff; }
@keyframes typingCode { 0%{width:0%;} 50%,100%{width:100%;} }
.status-pulse { width:45px; height:45px; border-radius:50%; background:rgba(16,185,129,0.2); display:flex; align-items:center; justify-content:center; margin-top:15px; animation: pulseGlowStatus 2s infinite; border:1px solid #10b981; }
.status-pulse span { color:#10b981; font-size:1.5rem; text-shadow:0 0 10px #10b981; }
@keyframes pulseGlowStatus { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0.5);} 70%{box-shadow:0 0 0 25px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* ═══════════════════════════════════════════════════════════════
   16. 교육 섹션 프리미엄 글로우 카드 hover 효과
═══════════════════════════════════════════════════════════════ */
@keyframes scanline { 0%{left:-100%;} 100%{left:200%;} }
@keyframes scanline-reverse { 0%{right:-100%;} 100%{right:200%;} }
.glow-card-premium:hover         { transform:translateY(-5px); box-shadow:0 10px 30px rgba(139,92,246,0.3), inset 0 0 30px rgba(139,92,246,0.1); border-color:rgba(139,92,246,0.8); }
.glow-card-premium-orange:hover  { transform:translateY(-5px); box-shadow:0 10px 30px rgba(218,119,86,0.3), inset 0 0 30px rgba(218,119,86,0.1); border-color:rgba(218,119,86,0.8); }
.glow-card-premium-green:hover   { transform:translateY(-5px); box-shadow:0 10px 30px rgba(16,185,129,0.3), inset 0 0 30px rgba(16,185,129,0.1); border-color:rgba(16,185,129,0.8); }
.glow-card-premium-pink:hover    { transform:translateY(-5px); box-shadow:0 10px 30px rgba(236,72,153,0.3), inset 0 0 30px rgba(236,72,153,0.1); border-color:rgba(236,72,153,0.8); }
.glow-card-premium-cyan:hover    { transform:translateY(-5px); box-shadow:0 10px 30px rgba(6,182,212,0.3), inset 0 0 30px rgba(6,182,212,0.1); border-color:rgba(6,182,212,0.8); }

/* ═══════════════════════════════════════════════════════════════
   17. Live Tech Demo 카드 (가로 3열)
═══════════════════════════════════════════════════════════════ */
.demo-card { flex:1; min-width:260px; border-radius:20px; padding:32px 28px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); text-align:left; transition:transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease, border-color 0.35s ease; cursor:default; position:relative; overflow:hidden; }
.demo-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:20px 20px 0 0; }
.demo-card:hover { transform:translateY(-10px); }
.demo-card-n8n::before    { background:linear-gradient(90deg,#ff6d5b,#ff9a8b); }
.demo-card-n8n:hover      { box-shadow:0 24px 60px rgba(255,109,91,0.25); border-color:rgba(255,109,91,0.4); }
.demo-card-claude::before { background:linear-gradient(90deg,#da7756,#f59e0b); }
.demo-card-claude:hover   { box-shadow:0 24px 60px rgba(218,119,86,0.25); border-color:rgba(218,119,86,0.4); }
.demo-card-openclaw::before { background:linear-gradient(90deg,#3b82f6,#a78bfa); }
.demo-card-openclaw:hover   { box-shadow:0 24px 60px rgba(59,130,246,0.25); border-color:rgba(59,130,246,0.4); }
.demo-chip { display:inline-flex; align-items:center; padding:6px 13px; border-radius:7px; font-size:0.8rem; font-weight:700; letter-spacing:0.3px; }
.demo-flow-arrow { color:rgba(255,255,255,0.3); font-size:1rem; }
@keyframes blink-cursor { 0%,100%{opacity:1;} 50%{opacity:0;} }
.cursor-blink { display:inline-block; width:7px; height:13px; background:#da7756; margin-left:4px; vertical-align:middle; animation:blink-cursor 1s step-end infinite; border-radius:1px; }
@keyframes progress-fill { from{width:0%;} to{width:68%;} }
.progress-bar-animated { animation:progress-fill 2s ease-out forwards; }

/* ═══════════════════════════════════════════════════════════════
   18. 포트폴리오 대시보드 애니메이션
═══════════════════════════════════════════════════════════════ */
@keyframes blink     { 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;} }
@keyframes scan-vert { 0%{top:-100%;} 100%{top:100%;} }
@keyframes popUp1    { 0%,100%{transform:translateY(20px);opacity:0;} 10%,90%{transform:translateY(0);opacity:1;} }
@keyframes popUp2    { 0%,100%{transform:translateY(20px);opacity:0;} 10%,90%{transform:translateY(0);opacity:1;} }
.animated-path         { stroke-dasharray:8,8; stroke-dashoffset:100; animation:dashAnim 4s linear infinite; }
.animated-path-reverse { stroke-dasharray:8,8; stroke-dashoffset:-100; animation:dashAnimRev 4s linear infinite; }
@keyframes dashAnim    { to{stroke-dashoffset:0;} }
@keyframes dashAnimRev { to{stroke-dashoffset:0;} }

/* ═══════════════════════════════════════════════════════════════
   19. AI 챗봇 위젯 애니메이션
═══════════════════════════════════════════════════════════════ */
@keyframes floatMsg         { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-8px);} }
@keyframes floatAvatar      { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-5px);} }
@keyframes rotateCoreMini   { 0%{transform:rotateX(20deg) rotateY(0deg);} 100%{transform:rotateX(20deg) rotateY(360deg);} }
@keyframes counterRotateMini{ 0%{transform:rotateY(0deg) rotateX(-20deg);} 100%{transform:rotateY(-360deg) rotateX(-20deg);} }
@keyframes pulseEye         { 0%{transform:scale(0.9);box-shadow:0 0 10px #3b82f6;} 100%{transform:scale(1.1);box-shadow:0 0 30px #3b82f6,0 0 50px #a78bfa;} }

/* ═══════════════════════════════════════════════════════════════
   20. 카카오톡 플로팅 버튼
═══════════════════════════════════════════════════════════════ */
.floating-btn:hover { transform:translateY(-5px) scale(1.05); box-shadow:0 15px 35px rgba(254,229,0,0.6) !important; }
@keyframes floatBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* ═══════════════════════════════════════════════════════════════
   21. Suno AI 음파 파형 애니메이션
═══════════════════════════════════════════════════════════════ */
@keyframes soundWaveAnim { 0%,100%{height:20%;} 50%{height:100%;} }

/* ═══════════════════════════════════════════════════════════════
   22. 모바일 성능 추가 최적화
═══════════════════════════════════════════════════════════════ */
/* 네비바 backdrop-filter 모바일 경감 */
@media screen and (max-width: 768px) {
    .navbar {
        top: 42px !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 12px 16px !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    /* nav-links: 모바일에서 기본 숨김 → 햄버거 클릭 시 풀스크린 오버레이 */
    .nav-links {
        display: none !important;
        position: fixed !important;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: rgba(7,7,10,0.97);
        z-index: 998;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        overflow-y: auto;
        padding: 60px 20px 20px;
    }
    .nav-links.active { display: flex !important; }
    /* 햄버거 버튼 노출 */
    .mobile-menu-btn { display: block !important; position: relative; z-index: 999; }
    /* 3D 씬 모바일 과부하 정지 */
    .scene-3d { animation: none !important; }
    .data-beam { display: none !important; }
    /* 마퀴 슬라이더 GPU 경감 */
    .marquee-content { will-change: transform; }
    /* 플로팅 채팅 창 모바일 너비 보호 */
    #aitf-web-chat {
        width: calc(100vw - 40px) !important;
        max-width: 340px !important;
        right: 10px !important;
    }
}

/* urgency-bar 모바일: 1줄 강제 → spacer 높이 안정화 */
@media screen and (max-width: 480px) {
    #urgency-bar {
        flex-wrap: nowrap !important;
        padding: 8px 36px 8px 12px !important;
        gap: 8px !important;
    }
    #urgency-bar > span:first-child { display: none !important; }
    #urgency-bar > span:nth-child(2) { font-size: 0.75rem !important; }
    #urgency-bar > button:first-of-type { padding: 4px 10px !important; font-size: 0.72rem !important; white-space: nowrap; }
    #urgency-spacer { height: 42px !important; }
}

/* iOS 입력창 자동 확대(16px 미만 폰트) 방지 */
@media screen and (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}