/* =========================================
   About Page: Minimalist "Rue Studio" Theme
   ========================================= */

/* Reset & Base */
body.about-minimal-body {
    background-color: #ffffff !important;
    /* Light base restored */
    color: #000000 !important;
    font-family: 'Space Grotesk', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Slide-up White Background */
/* Slide-up White Background REMOVED for consistency */

.minimal-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 60px;
    line-height: 1.4;
    letter-spacing: 0.5px;
}



/* --- Layout: 3-Column Grid --- */
.minimal-grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    /* Left | Center | Right */
    min-height: 100vh;
    padding: 40px 40px;
    /* Matched Global Style */
    box-sizing: border-box;
    gap: 40px;
    align-items: start;

    /* Initial State for JS Animation */
    opacity: 0;
    transform: translateY(50px);
}


/* Column 1: Identity (Fixed) */
.col-left {
    position: sticky;
    top: 40px;
    margin-bottom: 40px;
    z-index: 20;
    /* Keep Logo above mask */
}

.minimal-logo {
    font-family: 'Space Grotesk', sans-serif !important;
    /* Match Cover Font */
    font-size: 28px;
    /* Larger Size */
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    color: #000000;
    letter-spacing: -0.5px;
    /* Tighter tracking like header */
}

/* Column 2: Center Content (Scrollable) */
.col-center {
    padding-top: 0;
    /* Reverted to 0 as per user request */
    max-width: 900px;
}

.minimal-section {
    margin-bottom: 120px;
    /* Generous whitespace */
}

/* Headings */
.minimal-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

/* Body Text */
.minimal-text-block {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    /* Readable, slightly large */
    line-height: 1.4;
    font-weight: 400;
    color: #000000;
}

.bio-kr,
.bio-en {
    margin-bottom: 32px;
    word-break: keep-all;
    /* Natural Korean break */
}

/* Lists (CV) */
.minimal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.minimal-list li {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    /* Medium-Bold for crisp look */
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 16px;
    line-height: 1.3;
}

/* Footer Info */
.footer-info p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.footer-info a {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #000000;
}

/* Column 3: Navigation (Fixed) */
.col-right {
    position: sticky;
    top: 40px;
    height: calc(100vh - 80px);
    /* Full height minus padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Nav top, Copyright bottom */
    text-align: right;
    z-index: 20;
    /* Keep Nav above mask */
}

.minimal-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.minimal-nav-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #B0B0B0;
    /* Muted by default */
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.minimal-nav-link:hover,
.minimal-nav-link.active {
    color: #000000;
    /* Black on hover/active */
}

.minimal-copyright {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

/* --- Responsive Layout --- */
@media (max-width: 1024px) {
    .minimal-grid-container {
        grid-template-columns: 140px 1fr 140px;
        gap: 20px;
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .minimal-grid-container {
        display: block;
        /* Stack on mobile */
        padding: 20px;
    }

    .intro-header {
        flex-direction: column-reverse;
        /* Text on top, or maybe Image on top? User asked for image right of text. On mobile, usually image top or bottom. Let's keep text top as per flow, or image top. Let's do Image top for mobile visual. */
        flex-direction: column;
        gap: 20px;
    }

    .intro-image-side {
        width: 100%;
        margin-bottom: 20px;
    }

    .col-left {
        position: static;
        margin-bottom: 40px;
    }

    .col-right {
        position: static;
        height: auto;
        text-align: left;
        margin-top: 60px;
        flex-direction: column;
        gap: 40px;
    }

    .minimal-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .minimal-heading {
        margin-top: 60px;
        /* Spacing between sections */
    }

    .minimal-text-block {
        font-size: 16px;
    }
}


/* Animation Keyframes */
@keyframes bgSlideUp {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes contentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}