/* SPA Core Styles - Extracted from index-integrated.html */
/* Lines 21-246 from original file */

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Touch optimization - remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    /* Adjust scroll padding for fixed navigation */
    scroll-padding-top: 80px;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background: #0A0514;
    color: #fff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Gradient backgrounds */
.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top, rgba(99, 179, 237, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at bottom left, rgba(229, 193, 189, 0.06) 0%, transparent 50%),
                linear-gradient(to bottom, #0A0514 0%, #0F0A1F 100%);
    z-index: -1;
}

/* Main container */
#app {
    position: relative;
    min-height: 100vh;
    z-index: 1;
}

/* Section spacing */
section {
    padding: 100px 20px;
    position: relative;
}

/* Typography */
h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    margin-bottom: 1rem;
}

p {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* Container utilities */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation placeholder styles */
cobx-navigation {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 5, 20, 0.95);
    backdrop-filter: blur(10px);
}

/* Section components base styles */
cobx-hero-section,
cobx-science-section,
cobx-pipeline-section,
cobx-leadership-section,
cobx-newsroom-section,
cobx-ir-section,
cobx-contact-section,
cobx-footer {
    display: block;
    width: 100%;
}

/* Visibility utilities */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Loading states */
.loading {
    position: relative;
    min-height: 400px;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 179, 237, 0.3);
    border-top-color: #63B3ED;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Fade animations */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.fade-out {
    animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Grid system */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Card styles */
.card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05); /* 경계선 투명도 증가 (더 연하게) */
    border-radius: 12px;
    padding: 2rem;
    transition: background 0.3s ease, border-color 0.3s ease; /* transform 제거 */
}

.card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 179, 237, 0.2); /* 호버시 경계선도 더 연하게 */
    /* transform: translateY(-4px); 제거 - 떠오르는 효과 제거 */
}

/* Button styles */
.btn {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, #63B3ED, #EC4899);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    /* Touch optimization */
    touch-action: manipulation; /* Prevent double-tap zoom delay */
    -webkit-touch-callout: none; /* Disable callout on long press */
    user-select: none; /* Prevent text selection on tap */
    min-height: 48px; /* Minimum touch target size */
}

.btn:hover {
    /* transform: translateY(-2px); 제거 - 떠오르는 효과 제거 */
    box-shadow: 0 5px 15px rgba(99, 179, 237, 0.2); /* 그림자 크기와 강도 줄임 */
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #63B3ED;
}

/* Responsive utilities */
@media (max-width: 768px) {
    section {
        padding: 60px 20px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Print styles */
@media print {
    .gradient-bg,
    cobx-navigation {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* Touch and Mobile Optimizations */
button, a, .filter-btn, input, select, textarea {
    /* Ensure minimum touch target size for mobile */
    min-height: 48px;
    min-width: 48px;
    /* Remove touch delay */
    touch-action: manipulation;
}

/* Smooth momentum scrolling on iOS */
.page-view {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevent pull-to-refresh */
}

/* Performance optimizations */
img {
    /* Native lazy loading */
    loading: lazy;
    /* Async decoding for better performance */
    decoding: async;
}

/* Reduce animations on mobile for better performance */
/* REMOVED: Animation timing changes completely disabled for mobile */
/* All animations now maintain their original timing on all devices */
/* @media (max-width: 640px) {
    -- Animation speed changes removed to maintain original timing --
} */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Page transition optimization - Added for smooth SPA navigation */
.page-view:not(.active) { 
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.page-view.active {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Prevent layout shift during page transitions */
#mainPage {
    min-height: 100vh;
    contain: layout style;
}

/* Optimize page transition animations */
.page-view {
    transition: opacity 0.2s ease-in-out;
}

/* Preload optimization hint for browsers */
.page-view[data-preload] {
    content-visibility: auto;
}