/* ════════════════════════════════════════════════════════════════════════════
   SHARED CSS - Common Styles for All Pages
   ════════════════════════════════════════════════════════════════════════════ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Pretendard:wght@300;500;700;900&display=swap');

/* Base Styles */
.bg-clip-text {
    overflow: visible !important;
    padding-bottom: 0.15em;
    display: inline-block;
}

h1 {
    line-height: 1.4;
    overflow: visible;
    display: block !important;
    width: 100% !important;
}

h1.bg-clip-text {
    display: block !important;
    width: 100% !important;
}

/* Hero Section - 통일된 레이아웃 강제 */
.space-y-6 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.space-y-6 > .inline-flex {
    width: fit-content !important;
    flex-shrink: 0 !important;
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: #000000;
    color: #e2e8f0;
    overflow-x: hidden;
    padding-top: 76px;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════════════════════════════════════
   3D Transform Utilities
   ════════════════════════════════════════════════════════════════════════════ */

.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-visible {
    backface-visibility: visible;
}

/* Rotations (260px cube with 130px depth) */
.rotate-y-90 { transform: rotateY(90deg) translateZ(130px); }
.rotate-y-180 { transform: rotateY(180deg) translateZ(130px); }
.rotate-y-neg-90 { transform: rotateY(-90deg) translateZ(130px); }
.rotate-x-90 { transform: rotateX(90deg) translateZ(130px); }
.rotate-x-neg-90 { transform: rotateX(-90deg) translateZ(130px); }
.translate-z-80 { transform: translateZ(130px); }

/* ════════════════════════════════════════════════════════════════════════════
   Common Animations
   ════════════════════════════════════════════════════════════════════════════ */

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

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-in-out;
}

.animate-slideUp {
    animation: slideUp 0.8s ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
    animation: spin 2s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════════════
   Common UI Patterns
   ════════════════════════════════════════════════════════════════════════════ */

/* Glass Panel Effect */
.glass-panel {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* ASCII Art Text */
.ascii-art {
    white-space: pre;
    word-break: break-word;
    line-height: 1.2;
    font-family: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════════════════════════════════════
   Utility Classes
   ════════════════════════════════════════════════════════════════════════════ */

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════════════════════════════════════════════════════ */

/* Mobile Optimization Overrides */
@media (max-width: 768px) {
    .mag-title {
        font-size: 2.5rem !important; /* Smaller titles on mobile */
    }
    .mag-number {
        font-size: 3rem !important;
        top: -1.5rem !important;
    }
    .mag-visual-box {
        min-height: 300px !important; /* Shorter visual boxes */
    }
    .container, .max-w-7xl {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    pre, .ascii-art {
        overflow-x: auto;
        max-width: 100%;
        font-size: 0.7rem !important; /* Smaller ASCII on mobile */
    }
    /* Stack generic grids */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    /* exception for small grids that fit */
    .grid-cols-2.mobile-preserve {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}