/**
 * TERMINAL WINDOW PORTFOLIO
 * Centered floating window with paper aesthetic
 */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@400;600;700&family=Lora:wght@400;500;600;700&display=swap');

:root {
    /* Color Palette - Paper Aesthetic */
    --bg-canvas: #FAFAF9;
    --bg-window: #FFFFFF;
    --bg-sidebar: #F5F5F4;
    --bg-content: #FAFAF9;
    
    --text-primary: #1A1A1A;
    --text-secondary: #525252;
    --text-muted: #A3A3A3;
    --text-bright: #1A1A1A;
    
    --accent-primary: #78716C;
    --accent-secondary: #44403C;
    
    --border-color: #E7E5E4;
    --hover-bg: #F5F5F4;
    --active-bg: #E7E5E4;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
    --font-display: 'Crimson Pro', serif;
    --font-cambria: 'Lora', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-canvas);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden; /* Prevent scrolling on outer canvas */
    position: fixed; /* Lock body in place */
    width: 100%;
}

/* ============================================
   CANVAS BACKGROUND
   ============================================ */
.canvas-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(120, 113, 108, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(68, 64, 60, 0.02) 0%, transparent 50%),
        linear-gradient(180deg, #FAFAF9 0%, #F5F5F4 100%);
}

.grid-overlay {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(26, 26, 26, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 26, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
}

/* ============================================
   MAIN CONTENT - CENTERED
   ============================================ */
.main-content {
    position: relative;
    z-index: 10;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

/* Desktop Resonance Carousel Slides - Hidden by default on desktop */
@media (min-width: 769px) {
    .desktop-resonance-slide {
        display: none;
    }
}

/* Desktop Resonance Carousel Dots - Vertical Stack */
.desktop-resonance-dots {
    display: none; /* Hidden on mobile */
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 50px 0 0px 0;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
}

.desktop-resonance-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #d4d4d4;
    cursor: pointer;
    transition: all 0.3s ease;
}

.desktop-resonance-dot:hover {
    background-color: #a3a3a3;
    transform: scale(1.2);
}

.desktop-resonance-dot.active {
    background-color: #525252;
    transform: scale(1.3);
}

/* Show desktop dots only on desktop */
@media (min-width: 1025px) {
    .desktop-resonance-dots {
        display: flex;
    }
}

/* Mobile: center vertically */
@media (max-width: 1024px) {
    .main-content {
        align-items: center;
        padding-bottom: 20px;
    }
}

/* Desktop: position at bottom when there's a non-minimized terminal window */
@media (min-width: 1025px) {
    .main-content.has-active-terminal {
        align-items: flex-end;
        padding-bottom: 60px;
    }
}

/* Center main content when browser is in fullscreen mode (F11) on desktop */
html:fullscreen .main-content,
body:fullscreen .main-content {
    align-items: center !important;
    padding-bottom: 20px !important;
}

/* Alternative approach: Use display-mode media query for fullscreen */
@media (min-width: 1025px) and (display-mode: fullscreen) {
    .main-content {
        align-items: center !important;
        padding-bottom: 20px !important;
    }
}

/* JavaScript-based fullscreen detection */
@media (min-width: 1025px) {
    body.browser-fullscreen .main-content {
        align-items: center !important;
        padding-bottom: 20px !important;
    }
}

/* ============================================
   TERMINAL WINDOW
   ============================================ */
.terminal-window {
    width: 100%;
    max-width: 1400px;
    background: var(--bg-window);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative !important;
    height: auto;
}

/* Override position when fullscreen */
.terminal-window.fullscreen {
    position: fixed !important;
}

/* Ensure position is relative when not fullscreen or minimized */
.terminal-window:not(.fullscreen):not(.minimized) {
    position: relative !important;
}

/* Desktop minimized state - centered at bottom */
@media (min-width: 1025px) {
    .terminal-window.minimized {
        max-width: 220px !important;
        height: 48px !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1000;
    }
}

.terminal-window.minimized .window-content,
.terminal-window.minimized .command-line,
.terminal-window.minimized .terminal-footer {
    display: none;
}

.terminal-window.minimized .window-titlebar {
    cursor: pointer;
}

.terminal-window.minimized .language-toggle {
    display: none !important;
}

.terminal-window.minimized .window-controls {
    order: 2 !important;
}

.terminal-window.minimized .window-title {
    order: 1 !important;
    flex: 1 !important;
}

.terminal-window.minimized .window-btn.minimize,
.terminal-window.minimized .window-btn.close {
    display: none !important;
}

.terminal-window.minimized .window-btn.maximize {
    display: block !important;
}

/* Restore icon for minimized state - upward chevron */
.terminal-window.minimized .window-btn.maximize::before {
    content: '';
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    width: 6px;
    height: 6px;
    border: none;
    border-top: 2px solid var(--text-secondary);
    border-right: 2px solid var(--text-secondary);
}

.terminal-window.minimized .window-btn.maximize::after {
    display: none;
}

/* Desktop Folders */
.desktop-folders {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: row;
    gap: 60px;
    z-index: 100;
    pointer-events: none;
}

.desktop-folders.visible {
    display: flex;
}

.desktop-folder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 20px;
    border-radius: 8px;
    transition: background 0.2s ease;
    width: 100px;
    pointer-events: auto;
}

.desktop-folder:hover {
    background: rgba(255, 255, 255, 0.05);
}

.desktop-folder-icon {
    width: 56px !important;
    height: 56px !important;
    color: var(--text-secondary);
    stroke-width: 1.5;
}

.desktop-folder-icon svg {
    width: 56px !important;
    height: 56px !important;
}

.desktop-folder-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
}

/* Folder Window */
.folder-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 500px;
    background: var(--bg-window);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
    z-index: 1001;
}

.folder-window.active {
    display: flex;
}

.folder-window-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    gap: 16px;
}

.window-titlebar .language-toggle {
    margin: 0;
    margin-left: auto;
}

.folder-window-title {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
}

.folder-window-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 24px;
    align-content: start;
}

.folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.folder-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.folder-item-icon {
    width: 48px !important;
    height: 48px !important;
    color: var(--text-secondary);
}

.folder-item-icon svg {
    width: 48px !important;
    height: 48px !important;
}

.folder-item-icon svg {
    stroke-width: 1.5;
}

.folder-item-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    word-break: break-word;
    max-width: 100px;
}

/* PDF Viewer Window */
.pdf-viewer-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 85%;
    max-width: 1000px;
    background: var(--bg-window);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
    z-index: 1002;
}

.pdf-viewer-window.active {
    display: flex;
}

.pdf-viewer-content {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

.pdf-viewer-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 12px 12px;
}

/* Text Document Viewer Window */
.text-viewer-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 600px;
    background: var(--bg-window);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
    z-index: 1002;
}

.text-viewer-window.active {
    display: flex;
}

.text-viewer-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.text-viewer-content pre {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

/* Video Viewer Window */
.video-viewer-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    background: var(--bg-window);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    display: none;
    flex-direction: column;
    z-index: 10000;
}

.video-viewer-window.active {
    display: flex;
}

.video-viewer-content {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    position: relative;
}

.video-viewer-content .custom-video-player {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-viewer-content .custom-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-viewer-content video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
}

@keyframes windowsMaximize {
    0% {
        opacity: 0.95;
    }
    100% {
        opacity: 1;
    }
}

/* Letter spacing breathing animation for sticky text - GLOBAL */
@keyframes breathingSpacing {
    0%, 100% {
        letter-spacing: 0.05em;
    }
    50% {
        letter-spacing: 0.2em;
    }
}

/* Mobile Styles - Complete Redesign */
@media (max-width: 1024px) {
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* NUCLEAR RESET - Hide everything desktop */
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0 !important;
        padding: 0 !important;
        /* Safe area support for iOS */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        overflow: hidden !important;
        background: #FFFFFF !important;
    }
    
    .canvas-background {
        display: none !important;
    }
    
    .main-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* FORCE SIMPLE FLEX LAYOUT */
    .terminal-window {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #FFFFFF !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .window-titlebar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: var(--bg-titlebar);
        border-bottom: 1px solid #E5E5E5 !important;
        padding: 8px 16px;
        border-radius: 0 !important;
        position: sticky !important;
        top: 0 !important;
        /* Safe area support for iOS notch/dynamic island */
        padding-top: 8px; /* Fallback for browsers without env() support */
        padding-top: max(8px, env(safe-area-inset-top));
        height: 40px; /* Fallback */
        height: calc(40px + env(safe-area-inset-top));
        flex-shrink: 0;
        z-index: 1000 !important;
    }
    
    .desktop-title {
        display: none !important;
    }
    
    .mobile-title {
        display: inline !important;
    }
    
    .window-controls {
        display: none !important;
    }
    
    .window-btn {
        display: none !important;
    }
    
    .window-titlebar .nav-toggle {
        display: flex !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 4px;
        border: none;
        background: transparent;
        z-index: 200;
        cursor: pointer;
        color: var(--text-secondary);
    }
    
    /* HIDE ALL DESKTOP STRUCTURE */
    .window-content,
    .sidebar-nav,
    .content-area {
        display: none !important;
    }
    
    /* MOBILE NAV OVERLAY */
    .mobile-nav-overlay {
        display: block !important;
        position: fixed !important;
        top: 40px !important; /* Fallback */
        top: calc(40px + env(safe-area-inset-top)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        z-index: 100 !important;
        transition: max-height 0.3s ease !important;
    }
    
    .mobile-nav-overlay.expanded {
        max-height: 300px !important;
        overflow-y: auto !important;
        background: rgba(245, 245, 244, 0.8) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid #E5E5E5 !important;
        padding: 8px 16px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* SHOW MOBILE-ONLY CONTAINER */
    .mobile-content-container {
        display: block !important;
        flex: 1 !important;
        width: 100% !important;
        max-width: 100vw !important;
        background: #FFFFFF !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        padding: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Beige background for hero section only */
    .mobile-content-container.hero-bg {
        background: #FAF9F9 !important;
    }
    
    /* Force all children to wrap */
    .mobile-content-container * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
    
    .window-content > .nav-toggle {
        display: none !important;
    }
    
    .nav-toggle svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }
    
    .nav-toggle.expanded svg {
        transform: rotate(180deg);
    }
    
    .nav-header,
    .nav-subheader {
        display: none !important;
    }
    
    .nav-folder {
        margin-bottom: 6px;
    }
    
    .nav-folder:not(.expanded) .nav-folder-contents {
        display: none;
    }
    
    .nav-folder-header {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .nav-item {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* Hide footer completely on mobile */
    .terminal-footer {
        display: none !important;
        background: var(--bg-sidebar) !important;
        border-top: 1px solid var(--border-color) !important;
        font-size: 10px !important;
    }
    
    /* Mobile scroll indicator */
    .mobile-scroll-indicator {
        position: fixed;
        bottom: 60px; /* Fallback */
        bottom: max(60px, calc(60px + env(safe-area-inset-bottom)));
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        pointer-events: none;
        opacity: 0.4;
        animation: bounce 2s infinite;
    }
    
    .mobile-scroll-indicator svg {
        width: 40px;
        height: 40px;
        color: var(--text-secondary);
    }
    
    /* Hide command line on mobile */
    .command-line {
        display: none !important;
    }
    
    .content-header {
        display: none !important;
    }
    
    /* Content takes full width in column layout */
    .content-area {
        display: block !important;
        width: 100% !important;
        flex: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #FFFFFF !important;
        position: relative !important;
        order: 1 !important;
    }
    
    #content {
        display: block !important;
        width: 100% !important;
        background: #FFFFFF !important;
    }
    
    .content-body {
        display: block !important;
        width: 100% !important;
        background: #FFFFFF !important;
    }
    
    /* Make sure ALL content shows */
    .hero-intro,
    .hero-content,
    .hero-question,
    .hero-description,
    #code-architecture-canvas,
    .code-line {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure canvas renders */
    #code-architecture-canvas {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Add padding to all sections except hero and mobile-about with safe areas - doubled side padding */
    .mobile-content-container > *:not(.hero-intro):not(.mobile-about-container):not(.cv-medium) {
        padding: 20px calc(40px + env(safe-area-inset-right)) 20px calc(40px + env(safe-area-inset-left)) !important;
    }
    
    /* cv-medium should only have side padding, no top/bottom */
    .mobile-content-container > .cv-medium {
        padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left)) !important;
    }
    
    /* Mobile about section gets original padding (not doubled) */
    .mobile-content-container > .mobile-about-container {
        padding: 20px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left)) !important;
    }
    
    /* Also add safe area padding to individual content sections */
    .mobile-content-container > *:last-child {
        margin-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Hero content (text part) gets padding with extra bottom space */
    .hero-content {
        padding: 20px 20px !important;
        padding-bottom: calc(15vh + 60px + env(safe-area-inset-bottom)) !important;
        min-height: 40vh !important;
    }
    
    /* Hero canvas (animation) has no padding */
    .hero-intro {
        padding: 0 !important;
    }
    
    /* About section - hide photos */
    #profile-picture,
    .profile-image,
    .about-image {
        display: none !important;
    }
    
    /* Fix typography for mobile - match research/exhibition sections (14px) */
    .about-section p,
    .mobile-content-container p:not(.cv-year):not(.cv-location):not(.cv-medium):not(.exhibition-text):not(.hero-intro p):not(.process-section p) {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
        color: var(--text-secondary) !important;
        font-weight: 400 !important;
    }
    
    .about-section em,
    .mobile-content-container em {
        font-style: normal !important;
        font-weight: normal !important;
        font-size: 14px !important;
        display: inline !important;
    }
    
    .about-section strong,
    .mobile-content-container strong {
        font-weight: 600 !important;
        font-size: 15px !important;
        display: inline !important;
    }
    
    /* Fix list items */
    .mobile-content-container li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
        word-wrap: break-word !important;
    }
    
    /* Remove extra spacing from code-style text */
    .mobile-content-container code,
    .mobile-content-container .code-style {
        display: inline !important;
        font-size: 13px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Fix headings - match exhibition header margins */
    .mobile-content-container h1 {
        font-size: 26px !important;
        line-height: 1.4 !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
    }
    
    .mobile-content-container h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
    }
    
    .mobile-content-container h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
    }
    
    /* Faster, smoother image fade-in on mobile */
    .image-item {
        animation-duration: 0.5s !important;
    }
    
    .image-item:nth-child(1) { animation-delay: 0.3s !important; }
    .image-item:nth-child(2) { animation-delay: 0.45s !important; }
    .image-item:nth-child(3) { animation-delay: 0.6s !important; }
    .image-item:nth-child(4) { animation-delay: 0.75s !important; }
    .image-item:nth-child(5) { animation-delay: 0.9s !important; }
    .image-item:nth-child(6) { animation-delay: 1.05s !important; }
    
    /* Fade-in animation for typewriter text on mobile only */
    .typewriter-text.fade-in {
        animation: fadeInMobile 0.6s ease-in forwards !important;
    }
    
    @keyframes fadeInMobile {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Add line breaks after videos on mobile experience page */
    .mobile-content-container .image-item video {
        margin-bottom: 48px !important;
    }
    
    /* Add spacing between main text and first video section */
    .mobile-content-container .typewriter-container {
        margin-bottom: 100px !important;
    }
    
    /* Old mobile process-images - REMOVED */
    
    /* Tighter line spacing for about.md on mobile */
    .mobile-content-container .output-line {
        padding: 0 !important;
        margin-bottom: 4px !important;
        line-height: 1.5 !important;
    }
    
    .mobile-content-container .output-line.blank {
        height: 12px !important;
    }
    
    /* Mobile-only parallax about section */
    .mobile-about-container {
        position: relative;
        width: 100%;
        min-height: 200vh; /* Allow scrolling */
    }
    
    .mobile-about-sticky {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh; /* Changed from height to min-height */
        z-index: 10;
        pointer-events: none;
        transition: opacity 0.3s ease;
        overflow: hidden; /* Clip text within bounds */
    }
    
    .mobile-about-sticky::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
        z-index: 5;
    }
    
    .mobile-about-sticky .about-terminal {
        width: 100%;
        height: 100%;
        padding: 20px 30px 60px 30px; /* Same padding for all languages */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Also clip at terminal level */
    }
    
    /* Korean-specific: Reduce left padding by 1px to prevent text cut-off */
    :lang(ko) .mobile-about-sticky .about-terminal {
        padding-left: 31.5px;
    }
    
    .mobile-about-sticky .terminal-output {
        overflow: hidden; /* Clip at output level */
        max-height: calc(100vh - 120px); /* Constrain height to fit within viewport */
        display: flex;
        justify-content: flex-end; /* Align vertical text to the right */
        text-align: right;
    }
    
    /* MOBILE STICKY TEXT - All styles in one place */
    .mobile-about-sticky .output-line {
        writing-mode: vertical-rl !important;
        text-orientation: upright !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        color: var(--text-secondary) !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: breathingSpacing 10s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    }
    
    /* Keep line marker horizontal */
    .mobile-about-sticky .line-marker {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        display: inline-block;
    }
    
    .mobile-about-scroll-content {
        position: relative;
        z-index: 20;
        background: transparent;
        pointer-events: auto;
        /* Remove scroll - let main container handle it */
        overflow: visible;
        height: auto;
    }
    
    .mobile-about-spacer {
        height: 10vh; /* Space before content appears */
        background: transparent;
        scroll-snap-align: start;
    }
    
    .mobile-about-text-section {
        padding: 100px 30px 100px 30px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        scroll-snap-align: start;
        /* Remove min-height constraint and disable internal scroll */
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        /* Ensure content expands naturally without being cut off */
        display: block !important;
    }
    
    /* h2 title styling - must be more specific than .mobile-content-container h2 */
    .mobile-content-container .mobile-about-text-section h2 {
        font-size: 22px !important;
        font-weight: 600 !important;
        margin-bottom: 32px !important;
        line-height: 1.4 !important;
        letter-spacing: -0.02em !important;
    }
    
    /* Second h2 (Systems Artist) - smaller and less gap */
    .mobile-content-container .mobile-about-text-section h2:nth-of-type(2) {
        font-size: 14px !important;
        font-weight: 400 !important;
        margin-top: -20px !important;
        margin-bottom: 32px !important;
    }
    
    /* About section h1 - exclude from exhibition header margin style */
    .mobile-content-container .mobile-about-text-section h1 {
        margin-top: 0 !important;
    }
    
    /* Paragraphs use exhibition-text class - match RCS section styles */
    .mobile-about-text-section .exhibition-text {
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
        color: var(--text-secondary) !important;
        font-family: var(--font-mono) !important;
    }
    
    /* Korean text - match desktop styling */
    :lang(ko) .mobile-about-text-section .exhibition-text {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 15px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.8 !important;
        word-break: keep-all !important;
    }
    
    /* Mobile exhibition layout - tight spacing */
    .mobile-exhibition-header {
        margin-bottom: 12px;
        margin-top: 20px;
    }
    
    .mobile-exhibition-header h1 {
        margin: 0 0 4px 0 !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        font-family: 'Lora', serif !important;
        line-height: 1.4 !important;
        letter-spacing: 0.01em;
    }
    
    /* Korean h1 for mobile exhibitions - match desktop styling */
    :lang(ko) .mobile-exhibition-header h1 {
        font-size: 26px !important;
        font-family: 'Noto Serif KR', serif !important;
        line-height: 1.4 !important;
        letter-spacing: -0.02em !important;
        font-weight: 400 !important; /* Match desktop weight */
    }
    
    /* Remove extra spacing for Korean quotation marks */
    :lang(ko) h1,
    :lang(ko) .cv-title,
    :lang(ko) .cv-location {
        letter-spacing: -0.02em;
    }
    
    .mobile-exhibition-header .cv-year,
    .mobile-exhibition-header .cv-location {
        margin: 0 0 2px 0 !important;
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
    }
    
    .mobile-content-container .cv-medium {
        font-size: 11px;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .mobile-exhibition-description {
        margin: 12px 0;
    }
    
    .mobile-exhibition-description .exhibition-text {
        margin: 0 0 16px 0 !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        font-family: 'Noto Sans', sans-serif !important;
        letter-spacing: 0.02em !important;
        word-break: break-word;
    }
    
    /* Korean exhibition text for mobile - match desktop styling */
    :lang(ko) .mobile-exhibition-description .exhibition-text {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 15px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.8 !important;
        word-break: keep-all !important;
    }
    
    /* English exhibition text for mobile */
    :lang(en) .mobile-exhibition-description .exhibition-text {
        font-family: var(--font-sans) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        letter-spacing: 0.02em;
        line-height: 1.8 !important;
        word-break: break-word;
    }
    
    .mobile-exhibition-description .exhibition-text:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Mobile-specific: Center flowchart circle horizontally */
    .flowchart-circle {
        left: 50% !important;
    }
    
    .lang-en .flowchart-circle {
        left: 50% !important;
    }
    
    /* Mobile-specific: Fix list margins in collapsible sections */
    .collapsible-section ol,
    .collapsible-section ul,
    .section-content ol,
    .section-content ul,
    .exhibition-list {
        padding-left: 24px !important;
        margin-left: 0 !important;
    }
    
    /* Ensure ordered exhibition lists have consistent indentation */
    ol.exhibition-list {
        padding-left: 24px !important;
        margin-left: 0 !important;
    }
    
    .collapsible-section li,
    .section-content li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Mobile-specific: Extra spacing before h2 sections (except first) */
    .lang-en h2:not(:first-of-type),
    .lang-kr h2:not(:first-of-type) {
        margin-top: 48px !important;
    }
    
    /* Mobile-specific: Bold and larger h2 titles on research pages */
    .mobile-content-container h2 {
        font-weight: 600 !important;
        font-size: 22px !important;
    }
    
    /* Korean h1 titles on mobile - 26px */
    :lang(ko) .mobile-content-container h1 {
        font-size: 26px !important;
        font-family: 'Noto Serif KR', serif !important;
    }
    
    /* Korean h2 titles on mobile - 22px across all sections, bold like research */
    :lang(ko) .mobile-content-container h2,
    :lang(ko) .mobile-about-text-section h2,
    :lang(ko) h2 {
        font-size: 22px !important;
        font-weight: 600 !important;
        font-family: 'Noto Serif KR', serif !important;
    }
    
    /* Mobile-specific: Extra spacing before 내면 독백 생성 section on resonance loop page */
    .mobile-exhibition-description h3.exhibition-subheading {
        margin-top: 32px !important;
    }
    
    /* Lightbox navigation - vertical on mobile */
    .lightbox-nav {
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 15px !important;
    }
    
    .lightbox-prev {
        top: 80px !important;
        left: 50% !important;
    }
    
    .lightbox-prev svg {
        transform: rotate(0deg) !important;
    }
    
    .lightbox-next {
        bottom: 80px !important;
        right: auto !important;
        left: 50% !important;
    }
    
    .lightbox-next svg {
        transform: rotate(0deg) !important;
    }
    
    /* Exhibition overview - create space for images */
    .cv-entry {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        align-items: flex-start !important;
    }
    
    .cv-text {
        flex: 1 !important;
        padding-top: 0 !important;
    }
    
    /* Images stay sticky on right, smaller size */
    .cv-flyer {
        max-width: 30% !important;
        min-width: 30% !important;
        height: auto !important;
        position: sticky !important;
        top: 80px !important;
        flex-shrink: 0 !important;
    }
    
    /* Add minimum height to text to accommodate image */
    .cv-text {
        min-height: 200px !important;
    }
    
    /* Decrease text sizes in exhibition overview */
    .mobile-content-container .cv-year,
    .cv-entry .cv-year {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    
    .mobile-content-container .cv-title,
    .cv-entry .cv-title {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    .mobile-content-container .cv-location,
    .cv-entry .cv-location {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    
    .mobile-content-container .cv-description,
    .cv-entry .cv-description {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
    
    .mobile-content-container .cv-medium,
    .cv-entry .cv-medium {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }
    
    /* Reduce spacing between entries and sections */
    .cv-entry {
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }
    
    .cv-entry-list {
        margin-bottom: 16px !important;
    }
    
    /* Reduce spacing between sections - override inline styles */
    .mobile-content-container h2,
    .mobile-content-container .section-header,
    .mobile-content-container .section-header {
        margin-top: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Override any inline styles on headers */
    .mobile-content-container [style*="margin-top"] {
        margin-top: 16px !important;
    }
    
    /* Contact section - center vertically in viewport */
    .mobile-content-container:has(.terminal-output-style) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: calc(100vh - 40px - 40px) !important;
    }
    
    .terminal-output-style {
        width: 100% !important;
        text-align: left !important;
    }
    
    .terminal-line,
    .terminal-line-primary,
    .terminal-line-email,
    .terminal-line-muted {
        text-align: left !important;
    }
    
    /* Ensure nav is collapsed by default */
    .sidebar-nav:not(.expanded) {
        max-height: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Hide desktop folders on mobile */
    .desktop-folders {
        display: none !important;
    }
    
    
    /* Folder windows on mobile */
    .folder-window {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    
    .folder-window-content {
        padding: 16px;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 16px;
    }
    
    .folder-item {
        padding: 8px;
    }
    
    .folder-item-icon {
        width: 40px;
        height: 40px;
    }
    
    .folder-item-label {
        font-size: 9px;
    }
    
    /* PDF, text, and video viewers on mobile */
    .pdf-viewer-window,
    .text-viewer-window,
    .video-viewer-window {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    
    .text-viewer-content {
        padding: 16px;
    }
    
    .text-viewer-content pre {
        font-size: 13px;
        line-height: 1.6;
    }
    
    /* Hero section mobile */
    .hero-title {
        display: none !important;
    }
    
    .hero-subtitle {
        display: none !important;
    }
    
    .hero-intro {
        position: relative;
        width: 100%;
        height: 45vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    #code-architecture-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 1;
    }
    
    .hero-content {
        position: relative;
        z-index: 2;
        margin: 0;
        padding: 20px 16px 20px 16px;
    }
    
    .hero-question {
        margin: 0 0 16px 0;
        padding-bottom: 20px !important;
    }
    
    .hero-content p {
        margin: 0 0 12px 0;
    }
    
    .hero-content p:last-child {
        margin-bottom: 0;
        padding-bottom: calc(10vh + 40px) !important;
    }
    
    /* Extra spacing for hero description typewriter */
    .hero-description {
        padding-bottom: calc(10vh + 40px) !important;
    }
    
    
    /* Navigation mobile */
    .nav-folder-contents {
        padding-left: 12px;
    }
    
    .language-toggle {
        margin: 12px 0;
    }
}

.terminal-window.fullscreen {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.1s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.terminal-window.fullscreen-restoring {
    transition: all 0.1s cubic-bezier(0.4, 0.0, 1, 1);
}

.terminal-window.fullscreen .window-content {
    height: calc(100vh - 48px - 50px - 40px) !important;
    max-height: none !important;
    transition: none !important;
}

.terminal-window.fullscreen .content-body {
    height: 100% !important;
    transition: none !important;
}

.terminal-window.fullscreen #code-architecture-canvas {
    width: 100% !important;
    height: 100% !important;
    transition: none !important;
}

.terminal-window.fullscreen * {
    transition: none !important;
}

/* Window Title Bar - Windows Style */
.window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.window-titlebar .language-toggle {
    margin: 0;
    margin-left: auto;
}

.mobile-title {
    display: none;
}

.desktop-title {
    display: inline;
}

.nav-toggle {
    display: none;
}

.window-controls {
    display: flex;
    gap: 1px;
}

.window-btn {
    width: 46px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
}

.window-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.window-btn.close:hover {
    background: #E81123;
}

/* Windows-style button icons */
.window-btn.minimize::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 1px;
    background: var(--text-secondary);
}

.window-btn.close:hover::before,
.window-btn.close:hover::after {
    background: white;
}

.window-btn.maximize::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 1px solid var(--text-secondary);
}

/* Restore icon when fullscreen (two overlapping squares) */
.terminal-window.fullscreen .window-btn.maximize::before {
    width: 8px;
    height: 8px;
    transform: translate(-40%, -40%);
}

.terminal-window.fullscreen .window-btn.maximize::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -60%);
    width: 8px;
    height: 8px;
    border: 1px solid var(--text-secondary);
    border-bottom: none;
    border-right: none;
    background: var(--bg-sidebar);
}

.window-btn.close:hover::before {
    border-color: white;
}

.window-btn.close::before,
.window-btn.close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1px;
    background: var(--text-secondary);
}

.window-btn.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.window-btn.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.window-title {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
}

/* Hide mobile container on desktop */
.mobile-content-container {
    display: none;
}

/* Window Content */
.window-content {
    display: flex;
    height: calc(100vh - 260px);
    max-height: 700px;
}

/* Desktop-specific: Hide line breaks in collapsible h2 titles only */
@media (min-width: 1025px) {
    .collapsible-title br {
        display: none;
    }
    
    /* Hide mobile-only line breaks on desktop */
    .mobile-only-br {
        display: none;
    }
    
    /* Remove top margin from first h2 in language containers */
    .lang-en > h2:first-child,
    .lang-kr > h2:first-child {
        margin-top: 0 !important;
    }
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */
.sidebar-nav {
    width: 280px;
    background: linear-gradient(to bottom, var(--bg-sidebar), #FAFAF9);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 24px 20px;
}

.nav-section {
    padding: 0;
}

.nav-header {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--text-primary);
    padding: 0;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}

.nav-subheader {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 24px;
    padding: 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

/* Language Toggle */
.language-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 12px;
    padding: 0;
}

.lang-separator {
    color: var(--text-muted);
}

.lang-btn {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.3s ease;
    color: var(--text-muted);
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.lang-btn.active {
    color: var(--text-primary);
    background: rgba(120, 113, 108, 0.1);
}

.lang-btn:hover {
    color: var(--text-primary);
    background: rgba(120, 113, 108, 0.05);
}

/* Hide process.md from navigation */
.nav-item[data-file="process"] {
    display: none !important;
}

/* Nav Items - Relational Network Style */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    padding-left: 0;
    position: relative;
}

.nav-item:hover {
    color: var(--text-primary);
}

.nav-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-label {
    font-size: 13px;
    flex: 1;
    font-family: var(--font-mono);
    font-weight: 400;
}

/* Folder Structure - Network Nodes */
.nav-folder {
    margin-bottom: 16px;
    position: relative;
}

.nav-folder::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 32px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--border-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-folder.expanded::before {
    opacity: 1;
}

.nav-folder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.nav-folder-header:hover {
    color: var(--text-primary);
}

.folder-arrow {
    width: 12px;
    height: 12px;
    stroke-width: 2;
    color: var(--text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.nav-folder.expanded .folder-arrow {
    transform: rotate(90deg);
    color: var(--accent-primary);
}

.folder-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    flex-shrink: 0;
    opacity: 0.6;
}

.nav-folder-contents {
    display: none;
    padding-left: 16px;
    margin-top: 6px;
    margin-bottom: 0;
}

.nav-folder.expanded .nav-folder-contents {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* ============================================
   CONTENT AREA
   ============================================ */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-content);
}

/* Hero Intro Section */
.hero-intro {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-content);
}

#code-architecture-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-text {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px;
    max-width: 800px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

.content-header {
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    display: flex;
    align-items: flex-end;
}

.content-breadcrumb {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-window);
    padding: 10px 16px;
    border-right: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-primary);
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: fit-content;
    white-space: nowrap;
    height: 35px;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s;
}

.content-breadcrumb:not(.tab-active) {
    opacity: 0.6;
    background: var(--bg-sidebar);
    border-top-color: transparent;
    cursor: pointer;
}

.content-breadcrumb:not(.tab-active):hover {
    opacity: 0.8;
}

.content-breadcrumb::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 1px;
    height: 1px;
    background: var(--bg-window);
}

/* Video Player Tab (appears next to page tab) */
.video-tab {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-window);
    padding: 10px 16px;
    border-right: 1px solid var(--border-color);
    border-top: 2px solid var(--accent-primary);
    display: none;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    height: 35px;
    box-sizing: border-box;
}

:lang(ko) .video-tab,
:lang(ko) #video-tab-title {
    font-family: 'Noto Sans KR', sans-serif;
}

.video-tab * {
    cursor: pointer;
}

.video-tab.active {
    display: inline-flex;
}

.video-tab:not(.tab-active) {
    opacity: 0.6;
    background: var(--bg-sidebar);
    border-top-color: transparent;
    cursor: pointer;
}

.video-tab:not(.tab-active):hover {
    opacity: 0.8;
}

.video-tab-close {
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    font-size: 18px;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: var(--text-secondary);
}

.video-tab-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* Video player content area */
.video-content {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--bg-content);
    padding: 32px;
    overflow: auto;
}

.video-content.active {
    display: flex;
}

.video-caption {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 20px;
    width: 100%;
}

.video-caption .prompt {
    color: var(--accent-primary);
    margin-right: 6px;
}

:lang(ko) .video-caption {
    font-family: 'Noto Sans KR', sans-serif;
}

.video-content video {
    max-width: 85%;
    max-height: 85%;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.content-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    font-size: 15px;
    line-height: 1.7;
    background: var(--bg-content);
}

/* Content Typography */
h1 {
    font-size: 2.5rem;
    font-weight: 400;
    font-family: 'Lora', serif;
    margin-bottom: 16px;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Korean h1 uses Noto Serif KR */
.lang-kr h1 {
    font-family: 'Noto Serif KR', serif;
}

h2 {
    font-size: 1.75rem;
    font-weight: 500;
    font-family: 'Lora', serif;
    margin-top: 40px;
    margin-bottom: 16px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.lang-kr h2 {
    font-family: 'Noto Serif KR', serif;
}

/* First section title after image caption needs more space */
.cv-medium + h2 {
    margin-top: 48px;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
    font-family: 'Lora', serif;
    margin-top: 32px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.lang-kr h3 {
    font-family: 'Noto Serif KR', serif;
}

.content-body p {
    margin-bottom: 16px;
    color: var(--text-primary);
}

.content-body strong {
    color: var(--text-bright);
    font-weight: 600;
}

.content-body a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.content-body a:hover {
    border-bottom-color: var(--accent-primary);
}

.content-body ul {
    margin-bottom: 16px;
    padding-left: 24px;
}

.content-body li {
    margin-bottom: 8px;
}

.content-body hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 32px 0;
}

/* Subtitle */
.subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* CV Entries */
.cv-entry-list {
    width: 100%;
}

.cv-entry {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.cv-entry:last-child {
    border-bottom: none;
}

.cv-text {
    flex: 1;
    max-width: 700px;
}

.cv-flyer {
    position: sticky;
    top: 20px;
    width: 150px;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
}

.cv-flyer:hover {
    opacity: 1;
}

.cv-year {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 8px 0;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
}

.cv-title {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-weight: 500;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
}

.cv-title-link {
    cursor: pointer;
}

.cv-medium {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin: 8px 0 32px 0;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
}

/* Desktop exhibition pages: smaller, italic caption styling */
@media (min-width: 1025px) {
    .content-body .cv-medium {
        font-size: 10px !important;
        font-style: italic !important;
        line-height: 1.4 !important;
    }
    
    :lang(ko) .content-body .cv-medium {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 10px !important;
        font-style: italic !important;
        line-height: 1.4 !important;
    }
    
    /* Desktop English: Use sans-serif font for main text (not mono) */
    /* Apply to: process, exhibitions, research sections */
    .lang-en .exhibition-text,
    .lang-en .content-body p:not(.cv-year):not(.cv-location):not(.cv-medium):not(.cv-title),
    .lang-en .process-section p,
    .content-body .lang-en .exhibition-text,
    .content-body .lang-en p:not(.cv-year):not(.cv-location):not(.cv-medium):not(.cv-title) {
        font-family: var(--font-sans) !important;
        font-weight: 400 !important;
    }
    
    /* Exhibition overview only: smaller CV info (year, location only) */
    .cv-entry-list .cv-year,
    .cv-entry-list .cv-location {
        font-size: 10px !important;
    }
    
    /* Korean: slightly larger (11px) */
    :lang(ko) .cv-entry-list .cv-year,
    :lang(ko) .cv-entry-list .cv-location {
        font-size: 11px !important;
    }
    
    /* Individual exhibition pages: larger main text (18px) for both English and Korean */
    .content-body .lang-en .exhibition-text,
    .content-body .lang-kr .exhibition-text {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }
}

.cv-location {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
}

.cv-description {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.6;
}

/* Research Columns */
.research-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
}

.research-column h3 {
    margin-top: 0;
}

.research-column ul {
    list-style: none;
    padding-left: 0;
}

.research-column li {
    margin-bottom: 8px;
    font-size: 14px;
}

/* Process Items */
.process-circle-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

.process-item h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.process-item p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Contact Email Large */
.contact-email-large {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    margin: 32px 0;
}

.social-links-content {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.social-links-content a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.social-links-content a:hover {
    color: var(--accent-primary);
}

/* ============================================
   COMMAND LINE
   ============================================ */
.command-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
}

.command-prompt {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent-primary);
    font-weight: 600;
}

.command-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
}

.command-input::-webkit-input-placeholder {
    color: var(--text-muted);
}

.command-input::placeholder {
    color: var(--text-muted);
}

/* ============================================
   TERMINAL FOOTER
   ============================================ */
.terminal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
}

.terminal-footer .footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-footer .footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    font-size: 11px;
}

.terminal-footer .footer-links a:hover {
    color: var(--accent-primary);
}

.terminal-footer .footer-links span {
    color: var(--text-muted);
}

/* ============================================
   ABOUT TERMINAL OUTPUT
   ============================================ */
.profile-picture {
    position: sticky;
    top: 20px;
    float: right;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
    margin-left: 24px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.about-terminal {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    max-width: 900px;
    background: transparent;
    padding: 0;
    border-radius: 4px;
}

.terminal-prompt {
    color: var(--text-muted);
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
}

.prompt-symbol {
    color: var(--text-primary);
}

.prompt-command {
    color: var(--text-secondary);
}

.terminal-output {
    margin-bottom: 8px;
}

.output-line {
    margin: 0;
    padding: 2px 0;
    color: var(--text-secondary);
    display: flex;
    gap: 6px;
    align-items: flex-start;
    opacity: 0;
}

.output-line.fade-in-about-text {
    opacity: 0;
    animation: fadeInAboutText 1.2s ease-out forwards;
}

@keyframes fadeInAboutText {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.output-line.blank {
    height: 8px;
    opacity: 1;
}

.line-marker {
    color: var(--text-muted);
    min-width: 12px;
    flex-shrink: 0;
}

.terminal-cursor {
    display: inline-block;
    color: var(--text-primary);
    animation: blink 1s infinite;
    margin-left: 12px;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.output-line.section-marker {
    color: var(--text-muted);
    font-weight: 500;
    margin: 8px 0;
}

/* Emphasis words that break out of terminal style */
.emphasis-word {
    font-family: 'Lora', 'Noto Serif KR', serif;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    color: #292524;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    display: inline-block;
}

.emphasis-word:hover {
    font-size: 20px;
    color: #1C1917;
    transform: translateY(-1px);
}

/* Pulse animation for key concepts */
.emphasis-word.pulse {
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Glow effect for critical terms */
.emphasis-word.glow {
    animation: glow 4s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { 
        text-shadow: 0 0 0px rgba(120, 113, 108, 0);
    }
    50% { 
        text-shadow: 0 0 8px rgba(120, 113, 108, 0.4);
    }
}

/* ============================================
   KOREAN LANGUAGE STYLING
   ============================================ */
/* Korean text in about content ONLY - keep terminal mono font */
:lang(ko) .output-line {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Korean emphasis words use Noto Serif KR */
:lang(ko) .emphasis-word {
    font-family: 'Noto Serif KR', serif;
    font-style: normal;
    font-weight: 600;
}

/* Old Korean process sections - REMOVED (replaced by newer styles) */

/* Korean CV entries - use Noto Sans KR */
:lang(ko) .cv-year,
:lang(ko) .cv-title,
:lang(ko) .cv-location,
:lang(ko) .cv-description,
:lang(ko) .cv-medium {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Korean process sections - desktop only */
@media (min-width: 1025px) {
    :lang(ko) .process-section p {
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 14px;
        line-height: 1.6;
        letter-spacing: 0.02em;
        margin-bottom: 50px;
    }
}

/* Korean h3 titles - match h2 weight */
:lang(ko) .process-section h3,
:lang(ko) .audio-section h3,
:lang(ko) h3 {
    font-family: 'Noto Serif KR', serif !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
}

/* Duplicate Korean h3 titles - REMOVED (covered by :lang(ko) selectors above) */

/* Language container visibility */
.lang-en,
.lang-kr {
    display: none;
}

/* Show the active language */
body[data-lang="en"] .lang-en {
    display: block;
}

body[data-lang="kr"] .lang-kr {
    display: block;
}

/* Collapsible sections - tight spacing */
.collapsible-section {
    margin: 20px 0;
}

.section-content {
    padding-top: 20px;
}

/* Remove top margin from first element in collapsible sections */
.section-content > *:first-child {
    margin-top: 0 !important;
}

/* Collapsible sections */
.collapsible-title {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.2s;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.collapsible-title:hover {
    opacity: 0.8;
}

.toggle-icon {
    font-size: 14px;
    margin-left: 8px;
    color: var(--accent-primary);
    transition: transform 0.3s;
}

/* Exhibition titles now use h1 tags and inherit h1 styling */

/* Line numbers for section titles */
.line-number {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    margin-right: 12px;
    opacity: 0.7;
    font-weight: 500;
}

/* Exhibition two-column grid layout */
.exhibition-content-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Left column 3x wider than right */
    gap: 40px;
    margin-top: 0;
}

/* Mobile: hide two-column wrapper completely */
@media (max-width: 1024px) {
    .exhibition-content-wrapper {
        display: block;
    }
    
    .exhibition-text-column,
    .exhibition-image-column {
        display: contents;
    }
}

/* Exhibition text */
.exhibition-text {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 16px;
    letter-spacing: 0.01em;
    word-spacing: 0.05em;
    overflow-wrap: break-word;
}

.lang-kr .exhibition-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.8;
    word-break: keep-all;
}

.exhibition-subtitle {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
    margin: 16px 0 12px 0;
    font-weight: 500;
}

:lang(ko) .exhibition-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Exhibition subheadings now use h3 global styles */

/* Flowchart styling - simple horizontal flow */
.flowchart {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 2;
    margin: 20px 0;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--accent-primary);
    border-radius: 2px;
    position: relative;
    overflow: visible;
}

.flowchart-circle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 150px !important;
    height: 150px !important;
    margin-left: -75px !important;
    margin-top: -75px !important;
    border-radius: 50% !important;
    background: rgba(255, 100, 50, 0.2) !important;
    border: none !important;
    box-shadow: none !important;
    animation: pulse-circle 4s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
}

.lang-en .flowchart-circle {
    left: 45% !important;
}

.orbit-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    background: rgba(255, 100, 50, 0.9);
    border-radius: 50%;
    animation: orbit 3s linear infinite;
    transform-origin: 50% 75px;
}

@keyframes pulse-circle {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
}

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

.lang-kr .flowchart {
    font-family: 'Noto Sans KR', sans-serif;
}

.lang-en .exhibition-text {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    line-height: 1.8 !important;
    word-break: break-word;
}

.lang-en .exhibition-list {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.lang-en .exhibition-list li {
    margin-bottom: 12px;
}

.lang-en .flowchart {
    font-family: 'IBM Plex Mono', monospace !important;
}

/* English headings use Lora */
.lang-en h1,
.lang-en h2,
.lang-en h3,
.lang-en h4,
.lang-en h5,
.lang-en h6 {
    font-family: 'Lora', serif !important;
}

/* English exhibition subheadings bold */
.lang-en .exhibition-subheading {
    font-weight: 600 !important;
}

/* Bold text styling for English exhibition content */
.lang-en .exhibition-text strong,
.lang-en .exhibition-list strong,
.lang-en .exhibition-list li strong {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
}

/* Bold text styling for Korean exhibition content */
.lang-kr .exhibition-text strong,
.lang-kr .exhibition-list strong,
.lang-kr .exhibition-list li strong {
    font-weight: 600;
    font-size: 14px;
}

.flow-step {
    display: inline;
    color: var(--text-primary);
    position: relative !important;
    z-index: 10 !important;
    font-size: 11px !important;
}

.flow-arrow {
    display: inline;
    color: var(--accent-primary);
    margin: 0 8px;
    font-size: 11px !important;
    opacity: 0.7;
    position: relative !important;
    z-index: 10 !important;
}

.flow-loop {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Exhibition lists */
.exhibition-list {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 16px 0;
    padding-left: 24px;
}

/* Ensure ordered lists have proper indentation */
ol.exhibition-list {
    padding-left: 24px;
    margin-left: 0;
}

:lang(ko) .exhibition-list {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.lang-kr .exhibition-list {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.lang-kr .exhibition-list li {
    margin-bottom: 12px;
}

.exhibition-list li {
    margin-bottom: 8px;
}

.exhibition-list li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.exhibition-list .exhibition-list {
    margin: 8px 0 8px 20px;
}

/* Code blocks */
.code-block {
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 12px 0 16px 0;
    overflow-x: auto;
}

.code-block code {
    color: var(--accent-primary);
    font-family: var(--font-mono);
}

/* Terminal output style for contact section */
.terminal-output-style {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 20px 0;
    margin-bottom: 32px;
}

/* Desktop: push typewriter lower */
@media (min-width: 1025px) {
    .typewriter-container {
        margin-bottom: 80px;
    }
}

.typewriter-container .prompt {
    color: var(--accent-primary);
    margin-right: 6px;
}

.typewriter-text {
    visibility: hidden;
    opacity: 0;
}

.typewriter-text.typing {
    visibility: visible;
    opacity: 1;
}

.cursor-blink {
    color: var(--accent-primary);
    animation: blink 1s infinite;
    visibility: hidden;
}

.typewriter-text.typing ~ .cursor-blink {
    visibility: visible;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Fade-in for research pages (no typewriter) - match exhibition animation */
.typewriter-text.fade-in-research {
    visibility: visible;
    opacity: 0;
    animation: fadeInExhibition 0.8s ease-out forwards;
}

/* Fade-in for exhibition and research pages - all elements start hidden */
.content-body h1,
.content-body h2,
.content-body p,
.lang-en h1,
.lang-en h2,
.lang-kr h1,
.lang-kr h2,
.exhibition-text,
.cv-entry,
.cv-year,
.cv-location,
.cv-medium,
.cv-title,
.terminal-line,
.terminal-line-primary,
.terminal-line-email,
.terminal-line-muted {
    opacity: 0;
    visibility: hidden;
}


.content-body h1.fade-in-exhibition,
.content-body h2.fade-in-exhibition,
.content-body p.fade-in-exhibition,
.lang-en h1.fade-in-exhibition,
.lang-en h2.fade-in-exhibition,
.lang-kr h1.fade-in-exhibition,
.lang-kr h2.fade-in-exhibition,
.exhibition-text.fade-in-exhibition,
.cv-entry.fade-in-exhibition,
.terminal-line.fade-in-exhibition,
.terminal-line-primary.fade-in-exhibition,
.terminal-line-email.fade-in-exhibition,
.terminal-line-muted.fade-in-exhibition {
    opacity: 0;
    animation: fadeInExhibition 0.8s ease-out forwards;
}

@keyframes fadeInExhibition {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
    }
    1% {
        visibility: visible;
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Ambient fade-in for contact page - slower, smoother */
@keyframes fadeInAmbient {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    1% {
        visibility: visible;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* Special slow fade for "say hello" text */
.terminal-line-primary.fade-in-contact {
    opacity: 0;
    animation: fadeInAmbient 2s ease-in-out forwards;
}

/* Fade-in for exhibition images - use same class as text */
.image-grid .grid-image,
.cv-flyer,
.image-item {
    opacity: 0;
    margin-bottom: 16px;
}

.image-grid .grid-image.fade-in-exhibition,
.cv-flyer.fade-in-exhibition,
.image-item.fade-in-exhibition {
    opacity: 0;
    animation: fadeInExhibition 0.8s ease-out forwards;
}

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

.image-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.image-label .prompt {
    color: var(--accent-primary);
    margin-right: 6px;
}

.image-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}

:lang(ko) .image-description {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Terminal output style for contact section */
.terminal-output-style {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 20px 0;
}

.terminal-line {
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.terminal-line-blank {
    height: 1.6em;
}

.terminal-line-primary {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.terminal-line-email {
    margin-bottom: 4px;
}

.terminal-line-email .prompt-symbol {
    color: var(--accent-primary);
    margin-right: 6px;
}

.terminal-line-email .contact-email {
    color: var(--text-primary);
    text-decoration: none;
}

.terminal-line-email .contact-email:hover {
    text-decoration: underline;
}

.terminal-line-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.terminal-line-muted .prompt-symbol {
    color: var(--accent-primary);
    margin-right: 6px;
}

.terminal-line-muted .contact-link {
    color: var(--text-muted);
    text-decoration: none;
}

.terminal-line-muted .contact-link:hover {
    text-decoration: underline;
}

.terminal-line-muted .separator {
    color: var(--text-muted);
}

:lang(ko) .terminal-output-style {
    font-family: 'Noto Sans KR', sans-serif;
}

:lang(ko) .terminal-line-en-only,
:lang(ko) .terminal-line-blank-en-only {
    display: none;
}

.image-item img,
.image-item video {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.image-item img:hover,
.image-item video:hover {
    opacity: 1;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 280px;
    background: #000;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.2s;
}

.video-thumbnail:hover {
    opacity: 0.9;
}

.video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.video-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
}

.video-thumbnail:hover .video-thumbnail-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.video-play-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.video-thumbnail:hover .video-play-icon {
    transform: scale(1.1);
}

.video-play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid var(--text-primary);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.video-grid video {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* ============================================
   IMAGE GRID & LIGHTBOX
   ============================================ */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.grid-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.grid-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(245, 245, 244, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: var(--text-secondary);
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: var(--text-primary);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-prev {
    left: 40px;
}

.lightbox-prev svg {
    transform: rotate(-90deg);
}

.lightbox-next {
    right: 40px;
}

.lightbox-next svg {
    transform: rotate(-90deg);
}

.lightbox-nav:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.2);
}

/* Lightbox Caption */
.lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    max-width: 80%;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .main-content {
        padding: 20px 10px;
    }
    
    .terminal-window {
        border-radius: 8px;
    }
    
    .window-content {
        flex-direction: column;
        height: auto;
        min-height: 500px;
    }
    
    .sidebar-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 300px;
    }
    
    .content-body {
        padding: 20px;
    }
    
    .content-body h1,
    .mobile-content-container h1 {
        font-size: 26px !important;
        font-family: 'Lora', 'Noto Serif KR', serif !important;
    }
    
    .content-body h2 {
        font-size: 1.5rem;
    }
    
    .research-columns {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   EASTER EGG: WAVING HAND
   ============================================ */
.waving-hand-svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: waveAndFadeOut 2s ease forwards;
    opacity: 0;
}

.waving-hand-svg img {
    width: 320px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes waveAndFadeOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    20% {
        transform: translate(-50%, -50%) scale(1) rotate(-15deg);
    }
    30% {
        transform: translate(-50%, -50%) scale(1) rotate(15deg);
    }
    40% {
        transform: translate(-50%, -50%) scale(1) rotate(-15deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1) rotate(15deg);
    }
    60% {
        transform: translate(-50%, -50%) scale(1) rotate(-15deg);
    }
    70% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.98);
    }
    85% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.92);
    }
    95% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.88);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
}

/* ============================================
   EASTER EGG: SWEAR REACTION (SHAKING FROWN)
   ============================================ */
.shaking-frown-svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: shakeAndFadeOut 2s ease forwards;
    opacity: 0;
}

.shaking-frown-svg img {
    width: 320px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes shakeAndFadeOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    15% {
        transform: translate(calc(-50% - 10px), -50%);
    }
    20% {
        transform: translate(calc(-50% + 10px), -50%);
    }
    25% {
        transform: translate(calc(-50% - 10px), -50%);
    }
    30% {
        transform: translate(calc(-50% + 10px), -50%);
    }
    35% {
        transform: translate(calc(-50% - 10px), -50%);
    }
    40% {
        transform: translate(calc(-50% + 10px), -50%);
    }
    45% {
        transform: translate(calc(-50% - 10px), -50%);
    }
    50% {
        transform: translate(calc(-50% + 10px), -50%);
    }
    55% {
        transform: translate(calc(-50% - 10px), -50%);
    }
    60% {
        transform: translate(calc(-50% + 10px), -50%);
    }
    65%, 75% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.98);
    }
    85% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.92);
    }
    95% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.88);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
}

/* ============================================
   EASTER EGG: HEART (FADING)
   ============================================ */
.fading-heart-svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: slowFadeInOut 3s ease forwards;
    opacity: 0;
}

.fading-heart-svg img {
    width: 400px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes slowFadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20%, 80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* ============================================
   EASTER EGG: FUNNY FACE (ROTATING)
   ============================================ */
.rotating-funny-svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: rotateAndFadeOut 2s ease forwards;
    opacity: 0;
}

.rotating-funny-svg img {
    width: 320px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes rotateAndFadeOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-20deg) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
    }
    20% {
        transform: translate(-50%, -50%) rotate(20deg) scale(1);
    }
    30% {
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
    }
    40% {
        transform: translate(-50%, -50%) rotate(20deg) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
    }
    60% {
        transform: translate(-50%, -50%) rotate(20deg) scale(1);
    }
    70%, 80% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
    }
}

/* ============================================
   EASTER EGG: FIRE (ROTATING)
   ============================================ */
.rotating-fire-svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: simpleFadeInOut 2s ease forwards;
    opacity: 0;
}

.rotating-fire-svg img {
    width: 320px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes simpleFadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@keyframes rotateAndFadeOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-20deg) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
    }
    20% {
        transform: translate(-50%, -50%) rotate(20deg) scale(1);
    }
    30% {
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
    }
    40% {
        transform: translate(-50%, -50%) rotate(20deg) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
    }
    60% {
        transform: translate(-50%, -50%) rotate(20deg) scale(1);
    }
    70%, 80% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
    }
}

/* ============================================
   EASTER EGG: CAT (STATIC)
   ============================================ */
.static-cat-svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: staticCat 2s ease forwards;
    opacity: 0;
}

.static-cat-svg img {
    width: 240px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes staticCat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.98);
    }
    85% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95);
    }
    90% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.92);
    }
    95% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.88);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
}
    
    /* OLD MOBILE CAROUSEL RULES REMOVED - Now properly inside media query */

/* Process sections - Base Desktop Styles */
.process-sections {
    background: var(--bg-content);
    padding: 0;
}

.process-section {
    max-width: none;
    margin: 0 0 100px 0;
    padding: 0;
}

.process-section:first-child {
    padding-top: 0;
}

.process-section:first-child {
    margin-top: 0;
}

.process-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    margin-bottom: 50px;
}

/* Mobile styles for process sections */
@media (max-width: 1024px) {
    .process-sections {
        padding: 0;
    }
    
    .process-section {
        margin: 0 auto 60px auto;
        padding: 0;
    }
    
    .process-section h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .process-section p {
        font-size: 14px;
        line-height: 1.7;
        font-family: var(--font-mono);
        font-weight: 400;
        margin-bottom: 16px;
        letter-spacing: 0.01em;
    }
    
    /* Process section elements start hidden for fade-in animation */
    .process-section h1,
    .process-section p,
    .mobile-process-carousel {
        opacity: 0;
    }
    
    /* Fade-in class added by JavaScript */
    .process-section h1.fade-in-exhibition,
    .process-section p.fade-in-exhibition,
    .mobile-process-carousel.fade-in-exhibition {
        animation: fadeInExhibition 0.8s ease-out forwards;
    }
    
    /* Hide desktop carousel on mobile */
    .process-carousel {
        display: none !important;
    }
    
    /* Mobile Carousel - Separate System */
    .mobile-process-carousel {
        position: relative;
        width: 100%;
        margin: 24px 0;
        overflow: hidden;
    }
    
    /* Mobile Resonance Loop Text Carousel */
    .mobile-resonance-carousel {
        display: block;
        position: relative;
        width: 100%;
        margin: 24px 0;
        overflow: hidden;
        scroll-margin-top: 20px;
    }
    
    .mobile-process-carousel .mobile-carousel-track {
        display: flex;
        transition: transform 0.3s ease;
    }
    
    .mobile-process-carousel .mobile-carousel-slide {
        width: 100%;
        flex-shrink: 0;
    }
    
    .mobile-process-carousel .mobile-carousel-slide img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }
    
    .mobile-process-carousel .mobile-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 0;
        margin: 0;
    }
    
    .mobile-process-carousel .mobile-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(82, 82, 82, 0.4);
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .mobile-process-carousel .mobile-carousel-dot.active {
        background-color: #525252;
    }
    
    /* Hide original text when carousel is present - ONLY ON MOBILE */
    @media (max-width: 1024px) {
        .mobile-resonance-carousel ~ .mobile-exhibition-description,
        .mobile-resonance-carousel ~ .exhibition-content-wrapper,
        .lang-en .mobile-resonance-carousel ~ .mobile-exhibition-description,
        .lang-en .mobile-resonance-carousel ~ .exhibition-content-wrapper,
        .lang-kr .mobile-resonance-carousel ~ .mobile-exhibition-description,
        .lang-kr .mobile-resonance-carousel ~ .exhibition-content-wrapper,
        .mobile-embodied-carousel ~ .mobile-exhibition-description,
        .mobile-embodied-carousel ~ .exhibition-content-wrapper,
        .lang-en .mobile-embodied-carousel ~ .mobile-exhibition-description,
        .lang-en .mobile-embodied-carousel ~ .exhibition-content-wrapper,
        .lang-kr .mobile-embodied-carousel ~ .mobile-exhibition-description,
        .lang-kr .mobile-embodied-carousel ~ .exhibition-content-wrapper {
            display: none !important;
        }
    }
    
    /* Also hide if carousel is in parent */
    .mobile-exhibition-description:has(~ .mobile-resonance-carousel),
    .exhibition-content-wrapper:has(~ .mobile-resonance-carousel) {
        display: none !important;
    }
    
    /* Mobile Resonance Carousel Track and Slides - Copy process carousel structure */
    .mobile-resonance-carousel .mobile-resonance-track {
        display: flex;
        transition: transform 0.3s ease;
    }
    
    .mobile-resonance-carousel .mobile-resonance-slide {
        min-width: 100%;
        flex-shrink: 0;
        padding: 0 6px 80px 6px;
        box-sizing: border-box;
        overflow-y: auto;
        max-height: 90vh;
        /* Hide scrollbar but keep scrolling functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .mobile-resonance-carousel .mobile-resonance-slide::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    /* Add safety margin to last element in each slide */
    .mobile-resonance-carousel .mobile-resonance-slide > *:last-child {
        margin-bottom: 80px !important;
    }
    
    .mobile-resonance-carousel .mobile-resonance-slide h2 {
        font-size: 16px;
        margin-bottom: 16px;
        color: var(--text-primary);
    }
    
    /* Carousel text styling - match mobile-exhibition-description */
    .mobile-resonance-carousel .exhibition-text {
        margin: 0 0 16px 0 !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        font-family: var(--font-sans) !important;
        font-weight: 400 !important;
        letter-spacing: 0.01em !important;
    }
    
    /* Korean carousel text */
    :lang(ko) .mobile-resonance-carousel .exhibition-text {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 15px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.8 !important;
        word-break: keep-all !important;
    }
    
    /* English carousel text */
    :lang(en) .mobile-resonance-carousel .exhibition-text {
        font-family: var(--font-sans) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.8 !important;
    }
    
    /* Mobile Resonance Carousel Dots */
    .mobile-resonance-carousel .mobile-resonance-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 0 0 20px 0;
        margin: 0;
    }
    
    .mobile-resonance-carousel .mobile-resonance-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #d4d4d4;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .mobile-resonance-carousel .mobile-resonance-dot.active {
        background-color: #525252;
    }
    
    /* Mobile Embodied Algorithms Carousel */
    .mobile-embodied-carousel {
        display: block;
        position: relative;
        width: 100%;
        margin: 24px 0;
        overflow: hidden;
        scroll-margin-top: 20px;
    }
    
    .mobile-embodied-carousel .mobile-embodied-track {
        display: flex;
        transition: transform 0.3s ease;
    }
    
    .mobile-embodied-carousel .mobile-embodied-slide {
        min-width: 100%;
        flex-shrink: 0;
        padding: 0 6px 80px 6px;
        box-sizing: border-box;
        overflow-y: auto;
        max-height: 90vh;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .mobile-embodied-carousel .mobile-embodied-slide::-webkit-scrollbar {
        display: none;
    }
    
    .mobile-embodied-carousel .mobile-embodied-slide > *:last-child {
        margin-bottom: 80px !important;
    }
    
    .mobile-embodied-carousel .mobile-embodied-slide h2 {
        font-size: 16px;
        margin-bottom: 16px;
        color: var(--text-primary);
    }
    
    .mobile-embodied-carousel .exhibition-text {
        margin: 0 0 16px 0 !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        font-family: var(--font-sans) !important;
        font-weight: 400 !important;
        letter-spacing: 0.01em !important;
    }
    
    :lang(ko) .mobile-embodied-carousel .exhibition-text {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 15px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.8 !important;
        word-break: keep-all !important;
    }
    
    :lang(en) .mobile-embodied-carousel .exhibition-text {
        font-family: var(--font-sans) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.8 !important;
    }
    
    .mobile-embodied-carousel .mobile-embodied-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 0 0 20px 0;
        margin: 0;
    }
    
    .mobile-embodied-carousel .mobile-embodied-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #d4d4d4;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .mobile-embodied-carousel .mobile-embodied-dot.active {
        background-color: #525252;
    }
    
    /* Korean process sections - mobile specific - must override .mobile-content-container p */
    .mobile-content-container:lang(ko) .process-section p,
    :lang(ko) .mobile-content-container .process-section p,
    :lang(ko) .process-section p {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 15px !important;
        line-height: 1.8 !important;
        letter-spacing: 0.02em !important;
        margin-bottom: 16px !important;
        word-break: keep-all !important;
    }
    
    /* Horizontal Process Section Carousel for Mobile */
    .mobile-process-sections-container {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        touch-action: pan-y; /* Only allow vertical scrolling by default */
    }
    
    .mobile-process-sections-track {
        display: flex;
        height: 100%;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        scroll-snap-type: x mandatory;
    }
    
    .mobile-process-section-slide {
        min-width: 100%;
        height: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 0 12px;
        box-sizing: border-box;
        overflow-y: auto;
        /* Hide scrollbar but keep scrolling functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        /* Opacity transition for inactive sections */
        opacity: 0.1;
        transition: opacity 0.4s ease;
    }
    
    .mobile-process-section-slide.active {
        opacity: 1;
    }
    
    .mobile-process-section-slide::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    /* Start elements hidden for fade-in animation */
    .mobile-process-section-slide .process-section h1,
    .mobile-process-section-slide .process-section h2,
    .mobile-process-section-slide h1,
    .mobile-process-section-slide h2,
    .mobile-process-section-slide p,
    .mobile-process-section-slide .exhibition-text,
    .mobile-process-section-slide .mobile-process-carousel,
    .mobile-process-section-slide .grid-image,
    .mobile-process-section-slide .image-item {
        opacity: 0;
        visibility: hidden;
    }
    
    /* Navigation Arrows */
    .mobile-process-nav {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        cursor: pointer;
        opacity: 0.3;
        transition: opacity 0.3s ease;
        pointer-events: auto;
    }
    
    .mobile-process-nav:hover {
        opacity: 0.6;
    }
    
    .mobile-process-nav-left {
        left: 10px;
    }
    
    .mobile-process-nav-right {
        right: 10px;
    }
    
    .mobile-process-nav svg {
        width: 24px;
        height: 24px;
        stroke: var(--text-secondary);
        stroke-width: 2;
    }
    
    .mobile-process-nav.hidden {
        display: none;
    }
}

/* Desktop About Page - Exact same styles as mobile */
.desktop-about-container {
    position: relative;
    width: 100%;
    min-height: 200vh; /* Allow scrolling */
}

.desktop-about-sticky {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-content);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Clip text within bounds */
}

.desktop-about-sticky::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    pointer-events: none;
    z-index: 5;
}

.desktop-about-sticky .about-terminal {
    width: 100%;
    height: 100%;
    padding: 20px 30px 60px 30px; /* Same padding for all languages */
    position: relative;
    z-index: 10;
    overflow: hidden; /* Also clip at terminal level */
}

.desktop-about-sticky .terminal-output {
    overflow: hidden; /* Clip at output level */
    max-height: calc(100vh - 120px); /* Constrain height to fit within viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* DESKTOP STICKY TEXT - Match mobile version exactly */
.desktop-about-sticky .output-line {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: breathingSpacing 10s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* Keep line marker horizontal */
.desktop-about-sticky .line-marker {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: inline-block;
}

.desktop-about-scroll-content {
    position: relative;
    z-index: 20;
    background: transparent;
    pointer-events: auto;
}

.desktop-about-spacer {
    height: 20vh; /* Bring content up higher on the page */
    background: transparent;
}

.desktop-about-text-section {
    padding: 100px 60px 100px 60px !important;
    background: rgba(250, 250, 249, 0.3) !important; /* Use --bg-content color (#FAFAF9) with transparency */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
    max-width: 700px !important;
}

.lang-en .desktop-about-text-section {
    max-width: 680px !important;
}

/* h2 title styling - must be more specific than .mobile-content-container h2 */
.desktop-about-text-section h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 32px !important;
    color: var(--text-primary) !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

/* Second h2 (Systems Artist) - smaller and less gap */
.desktop-about-text-section h2:nth-of-type(2) {
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-top: -20px !important;
    margin-bottom: 32px !important;
}

/* Make desktop about h2 visible (override fade-in default) */
.desktop-about-text-section h2 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Paragraphs use exhibition-text class - match contact page terminal-output-style */
.desktop-about-text-section .exhibition-text {
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    color: var(--text-primary) !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

/* Korean text */
:lang(ko) .desktop-about-text-section .exhibition-text {
    font-family: 'Noto Sans KR', sans-serif !important;
    line-height: 1.8 !important;
}

/* References section - mobile (applies to all screen sizes) */
.content-body h2.references-section ~ p.exhibition-text,
.mobile-content-container h2.references-section ~ p.exhibition-text {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

/* Custom Video Player */
.custom-video-player {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: transparent;
}

.custom-video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

/* Desktop-specific video player styles */
@media (min-width: 769px) {
    .desktop-resonance-slide .custom-video-player {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .desktop-resonance-slide .custom-video {
        max-height: 500px;
    }
}

.custom-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.custom-video-player.playing .custom-video-overlay {
    opacity: 0;
}

.custom-play-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.3s ease;
    padding: 0;
}

.custom-play-btn:hover {
    transform: scale(1.1);
}

.custom-play-btn svg {
    width: 80px;
    height: 80px;
    fill: #525252;
    transition: fill 0.3s ease;
}

.custom-play-btn:hover svg {
    fill: #3a3a3a;
}

/* Video Loading Spinner */
.video-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 4px solid rgba(82, 82, 82, 0.2);
    border-top-color: #525252;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.custom-video-player.loading .video-loading-spinner {
    opacity: 1;
}

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

/* Custom Video Controls */
.custom-video-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 16px;
    border-radius: 24px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.custom-fullscreen-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
    width: 44px;
    height: 44px;
}

.custom-video-player.playing .custom-video-controls,
.custom-video-player.playing .custom-fullscreen-btn {
    opacity: 0;
    pointer-events: none;
}

.custom-video-player.playing .custom-video-controls.show-controls,
.custom-video-player.playing .custom-fullscreen-btn.show-controls {
    opacity: 1;
    pointer-events: auto;
}

.custom-mute-btn,
.custom-volume-btn,
.custom-fullscreen-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.custom-mute-btn:hover,
.custom-volume-btn:hover,
.custom-fullscreen-btn:hover {
    transform: scale(1.1);
}

.custom-mute-btn .volume-icon,
.custom-volume-btn .volume-icon {
    width: 24px;
    height: 24px;
    stroke: #525252;
}

.custom-fullscreen-btn svg {
    width: 24px;
    height: 24px;
    stroke: #525252;
    fill: none;
}

/* Fullscreen mode styles - container goes fullscreen to keep custom controls */
.custom-video-player:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.custom-video-player:fullscreen .custom-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-video-player:fullscreen .custom-video-controls,
.custom-video-player:fullscreen .custom-fullscreen-btn {
    position: fixed;
    z-index: 10001;
}

/* Webkit fullscreen */
.custom-video-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.custom-video-player:-webkit-full-screen .custom-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-video-player:-webkit-full-screen .custom-video-controls,
.custom-video-player:-webkit-full-screen .custom-fullscreen-btn {
    position: fixed;
    z-index: 10001;
}

/* Firefox fullscreen */
.custom-video-player:-moz-full-screen {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.custom-video-player:-moz-full-screen .custom-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-video-player:-moz-full-screen .custom-video-controls,
.custom-video-player:-moz-full-screen .custom-fullscreen-btn {
    position: fixed;
    z-index: 10001;
}

/* MS fullscreen */
.custom-video-player:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.custom-video-player:-ms-fullscreen .custom-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.custom-video-player:-ms-fullscreen .custom-video-controls,
.custom-video-player:-ms-fullscreen .custom-fullscreen-btn {
    position: fixed;
    z-index: 10001;
}

.custom-mute-btn.muted .volume-waves,
.custom-volume-btn.muted .volume-waves {
    display: none;
}

.custom-volume-slider {
    width: 80px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: #d3d3d3;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
}

.custom-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #525252;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.custom-volume-slider::-webkit-slider-thumb:hover {
    background: #3a3a3a;
}

.custom-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #525252;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    transition: background 0.2s ease;
}

.custom-volume-slider::-moz-range-thumb:hover {
    background: #3a3a3a;
}

/* Desktop process pages - match about page font sizes */
@media (min-width: 1025px) {
    /* Override content-body base font size for desktop */
    .content-body {
        font-size: 13px !important;
    }
    
    .content-body .exhibition-text {
        font-size: 13px !important;
        line-height: 1.7 !important;
        font-family: var(--font-mono) !important;
        letter-spacing: 0.01em !important;
        word-spacing: 0.05em !important;
    }
    
    /* Korean text for desktop process pages */
    :lang(ko) .content-body .exhibition-text {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 15px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.8 !important;
        word-break: keep-all !important;
    }
    
    /* All paragraphs in content-body should be small */
    .content-body p {
        font-size: 13px !important;
        line-height: 1.7 !important;
        font-family: var(--font-mono) !important;
    }
    
    /* Korean paragraphs */
    :lang(ko) .content-body p {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
    }
    
    /* Desktop process page headings - match exhibition h2 styling */
    .content-body h2 {
        font-size: 1.75rem !important; /* Match exhibition h2 */
        font-weight: 500 !important; /* Match exhibition h2 */
        font-family: 'Lora', serif !important; /* Match exhibition h2 */
        margin-top: 40px !important;
        margin-bottom: 16px !important;
        color: var(--text-primary) !important;
        letter-spacing: -0.01em !important;
    }
    
    /* Korean h2 titles use default Korean font */
    :lang(ko) .content-body h2 {
        font-family: 'Noto Serif KR', serif !important;
    }
    
    /* References section - smaller text for both English and Korean */
    .content-body h2.references-section ~ p.exhibition-text {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    
    /* ============================================
       DESKTOP-ONLY CAROUSEL (Base styles removed - will be desktop-specific)
       ============================================ */

/* Desktop Process Carousels - DESKTOP ONLY - Complete Self-Contained */
    /* Hide mobile carousels on desktop */
    .mobile-process-carousel,
    .mobile-resonance-carousel,
    .mobile-embodied-carousel {
        display: none !important;
    }
    
    /* Process section elements start hidden for fade-in animation */
    .process-section h1,
    .process-section p,
    .process-carousel {
        opacity: 0;
    }
    
    /* Fade-in class added by JavaScript */
    .process-section h1.fade-in-exhibition,
    .process-section p.fade-in-exhibition,
    .process-carousel.fade-in-exhibition {
        animation: fadeInExhibition 0.8s ease-out forwards;
    }
    
    .process-carousel {
        display: block;
        position: relative;
        width: 480px;
        margin: 24px 0;
    }
    
    .process-carousel .carousel-track {
        display: flex;
        width: 480px;
        height: 320px;
        justify-content: center;
        align-items: center;
    }
    
    .process-carousel .carousel-slide {
        display: none;
        width: 480px;
        height: 320px;
        margin: 0;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .process-carousel .carousel-slide:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .process-carousel .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    .process-carousel .carousel-slide:first-child {
        display: block;
    }
    
    /* Desktop dots */
    .process-carousel .carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        margin: 20px 0 0 0;
    }
    
    .process-carousel .carousel-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: rgba(82, 82, 82, 0.12);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .process-carousel .carousel-dot:hover {
        background-color: rgba(82, 82, 82, 0.25);
    }
    
    .process-carousel .carousel-dot.active {
        background-color: rgba(82, 82, 82, 0.5);
        transform: scale(1.2);
    }
}

    /* Audio Section */
    .audio-section {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid var(--text-muted);
    }
    
    .audio-section h3 {
        font-family: var(--font-mono);
        font-size: 16px;
        color: var(--text-primary);
        margin-bottom: 20px;
        font-weight: 400;
    }
    
    /* Audio Carousel */
    .audio-carousel {
        position: relative;
        width: 100%;
        margin: 20px 0;
        overflow: hidden;
    }
    
    .audio-carousel-track {
        display: flex;
        transition: transform 0.3s ease;
    }
    
    .audio-carousel-slide {
        width: 100%;
        flex-shrink: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .audio-player {
        width: 100%;
        max-width: 400px;
        height: 40px;
    }
    
    .audio-carousel-caption {
        text-align: center;
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.4;
    }
    
    /* Korean audio caption font */
    :lang(ko) .audio-carousel-caption {
        font-family: 'Noto Sans KR', sans-serif;
    }
    
    /* Audio Carousel Dots */
    .audio-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 16px 0 8px 0;
        margin: 0;
    }
    
    .audio-carousel-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(82, 82, 82, 0.4);
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .audio-carousel-dot.active {
        background: var(--text-secondary);
    }

/* OLD MOBILE CAROUSEL DOT RULES REMOVED */