/* Dark Premium Footer Styles */ .dark-premium-footer { background: var(--bg-primary); border-top: 1px solid var(--border-glow); margin-top: var(--spacing-2xl); position: relative; overflow: hidden; } .footer-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .footer-glow { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); animation: glow-pulse 3s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); position: relative; z-index: 1; } .footer-main { padding: var(--spacing-2xl) 0 var(--spacing-xl); } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--spacing-2xl); } /* 회사 정보 */ .footer-info { display: flex; flex-direction: column; gap: var(--spacing-md); } .company-logo { margin-bottom: var(--spacing-md); } .footer-logo { height: 45px; width: auto; object-fit: contain; filter: brightness(1.2); } .company-details p { margin: 0 0 var(--spacing-xs) 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } .company-name { font-weight: 600; color: var(--text-primary); font-size: 1.1rem; margin-bottom: var(--spacing-sm); text-shadow: 0 0 10px var(--primary-color); } /* 푸터 메뉴 */ .footer-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); } .menu-section h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); text-transform: uppercase; letter-spacing: 0.05em; position: relative; } .menu-section h4::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); box-shadow: 0 0 5px var(--primary-color); } .menu-section ul { list-style: none; margin: 0; padding: 0; } .menu-section li { margin-bottom: var(--spacing-sm); } .menu-section a { color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; transition: all 0.3s ease; position: relative; } .menu-section a:hover { color: var(--primary-color); text-shadow: 0 0 5px var(--primary-color); } .menu-section a::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 1px; background: var(--primary-color); transition: width 0.3s ease; } .menu-section a:hover::before { width: 5px; } /* 소셜 미디어 */ .footer-social h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); text-transform: uppercase; letter-spacing: 0.05em; position: relative; } .footer-social h4::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); box-shadow: 0 0 5px var(--primary-color); } .social-links { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .social-link { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--bg-glass); color: var(--text-secondary); border: 1px solid var(--border-glow); border-radius: var(--radius-md); text-decoration: none; transition: all 0.3s ease; backdrop-filter: blur(10px); position: relative; overflow: hidden; } .social-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s ease; } .social-link:hover::before { left: 100%; } .neon-social { background: linear-gradient(135deg, var(--bg-glass), var(--bg-card)); border: 1px solid var(--border-glow); box-shadow: 0 0 10px rgba(0, 212, 255, 0.2); } .neon-social:hover { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--bg-primary); transform: translateY(-3px) scale(1.05); box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); } /* 푸터 하단 */ .footer-bottom { border-top: 1px solid var(--border-glow); padding: var(--spacing-lg) 0; position: relative; } .footer-bottom::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); opacity: 0.5; } .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); } .copyright { color: var(--text-secondary); font-size: 0.875rem; margin: 0; } .powered-by { color: var(--text-light); font-size: 0.75rem; margin: 0; } .powered-by a { color: var(--text-light); text-decoration: none; transition: all 0.3s ease; position: relative; } .powered-by a:hover { color: var(--primary-color); text-shadow: 0 0 5px var(--primary-color); } .powered-by a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--primary-color); transition: width 0.3s ease; } .powered-by a:hover::after { width: 100%; } /* 반응형 디자인 */ @media (max-width: 768px) { .footer-content { grid-template-columns: 1fr; gap: var(--spacing-xl); } .footer-menu { grid-template-columns: 1fr; gap: var(--spacing-lg); } .footer-bottom-content { flex-direction: column; text-align: center; gap: var(--spacing-sm); } .social-links { justify-content: center; } .menu-section h4::after, .footer-social h4::after { width: 20px; } } @media (max-width: 480px) { .footer-container { padding: 0 var(--spacing-sm); } .footer-main { padding: var(--spacing-xl) 0 var(--spacing-lg); } .footer-bottom { padding: var(--spacing-md) 0; } .social-links { justify-content: center; } .social-link { width: 40px; height: 40px; } }