/* Custom CSS Variables */
:root {
    --primary-bg-color: rgba(245, 233, 233, 0.69); /* Original RGBA value for background */
    --text-color-dark: black;
    --text-color-medium: #666666;
    --text-color-link: #767676; /* Based on Figma's link color */
    --font-anonymous-pro: 'Anonymous Pro', monospace;
    --max-content-width: 960px; /* Max width of the main content area */
    --page-horizontal-padding: 16px; /* Padding on the left/right of the main wrapper */
    --gap-between-sections: 60px; /* Space between major content blocks */
    --gap-between-items: 60px; /* Space between portfolio items */
}

/* Basic Reset & Box-Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Keep for smooth scrolling */
}

body {
    background-color: var(--primary-bg-color);
    font-family: var(--font-anonymous-pro);
    color: var(--text-color-dark);
    line-height: 1.5; /* Default line height for most text */
    display: flex;
    justify-content: center; /* Center the wrapper horizontally */
    align-items: flex-start; /* Align wrapper to the top */
    min-height: 100vh; /* Ensures body takes at least full viewport height */
    padding: var(--page-horizontal-padding); /* Padding around the entire content */
}

.wrapper {
    width: 100%;
    max-width: calc(var(--max-content-width) + (2 * var(--page-horizontal-padding))); /* Max width of the wrapper, including its own padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items within the wrapper */
}

/* Links */
a {
    color: inherit; /* Inherit color from parent by default */
    text-decoration: none; /* Remove default underline */
}

a.link {
    text-decoration: underline; /* Apply underline only to links with 'link' class */
    color: var(--text-color-link);
}

a.link-korean {
    text-decoration: underline;
    color: var(--text-color-medium); /* Specific color for the Korean link */
    font-size: 13px; /* Original explicit font size, not a general text size */
}

/* Header / Intro Section */
.intro-section {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line on smaller screens */
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-content-width); /* Align with the inner content width */
    margin-bottom: var(--gap-between-sections);
}

.about-me,
.recent-contact {
    flex: 1; /* Allow flexibility */
    min-width: 400px; /* Minimum width before wrapping */
    max-width: calc(50% - 20px); /* Roughly half width minus gap */
    margin-bottom: 20px; /* Space between columns when they stack */
}

/* Tighter spacing for intro-section text */
.about-me p {
    font-size: 14px; /* Keeping font size as is */
    line-height: 21px; /* Original line-height from Figma */
    margin-bottom: 3px; /* Reduced spacing */
    word-wrap: break-word;
}
.about-me p:last-child {
    margin-bottom: 0;
}
.about-me em {
    font-style: italic;
}


.recent-heading {
    font-size: 14px; /* Keeping font size as is */
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 5px;
}
/* Extra spacing above contact heading */
.contact-heading {
    font-size: 14px; /* Keeping font size as is */
    font-weight: 400;
    line-height: 21px;
    margin-top: 15px;
    margin-bottom: 5px; /* Ensure some bottom margin */
}

/* Specific styling for recent entries */
.recent-entry {
    font-size: 14px; /* Keeping font size as is */
    line-height: 1.3; /* Adjusted for better spacing without overlap */
    margin-bottom: 5px; /* Default small spacing */
    word-wrap: break-word;
}
.recent-entry .text-small {
    font-size: 11px; /* Keeping font size as is */
    line-height: 17px; /* From original Figma code */
    display: block; /* Ensure it starts on a new line */
}
.recent-entry strong {
    font-weight: 700;
}
.recent-entry.spacer-top {
    margin-top: 10px; /* Add some top margin for visual separation if needed */
}

/* Styling for contact entries */
.contact-entry {
    font-size: 14px; /* Keeping font size as is */
    line-height: 1.5; /* More appropriate line-height for readability */
    margin-bottom: 5px; /* Consistent spacing, corrected from 'margin: 3 !important;' */
    word-wrap: break-word;
}
.contact-entry:last-child {
    margin-bottom: 0;
}

/* EYES Generative Design Canvas Styles */
.eyes-container {
    margin-top: 30px; /* 15px에서 30px로 증가하여 밑으로 이동 */
    width: 100%;
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬 */
}

#eyes-canvas-container {
    border-radius: 50%; /* 원형으로 만들기 */
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

#eyes-canvas-container canvas {
    display: block !important;
    border-radius: 50%;
    width: 200px !important; /* 300px 캔버스를 200px로 축소하여 고해상도 효과 */
    height: 200px !important;
}


/* Portfolio Items Grid */
.portfolio-grid {
    width: 100%;
    max-width: var(--max-content-width);
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align caption to the right */
    margin-bottom: var(--gap-between-items);
}

/* Base style for all media containers (HTML uses portfolio-image-container) */
.portfolio-image-container {
    width: 100%;
    position: relative; /* Needed for absolute positioning of slides/iframes */
    overflow: hidden; /* Ensures content stays within bounds */
    margin-bottom: 5px;
    /* Default aspect ratio for containers. Can be overridden by specific types. */
    padding-top: 56.25%; /* Default to 16:9 ratio, common for videos and full-width slideshows */
    background-color: #f0f0f0; /* Light background while content loads */
}

/* Styles for actual images, videos, iframes within portfolio-image-container */
.portfolio-image-container img,
.portfolio-image-container video,
.portfolio-image-container iframe {
    position: absolute; /* To fit within padding-top container */
    top: 0;
    left: 0;
    width: 100%; /* Make media fill its container */
    height: 100%; /* Make media fill its container */
    object-fit: cover; /* Crop to fill frame while maintaining aspect ratio */
    display: block; /* Remove extra space below images */
    border: 0; /* Remove default iframe border */
}

/* Slideshow specific styles (applies when .slideshow is present) */
.portfolio-image-container.slideshow {
    cursor: pointer; /* Indicates it's clickable */
}
.portfolio-image-container.slideshow .slide {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.portfolio-image-container.slideshow .slide.active {
    opacity: 1;
}

/* Loading placeholder styles */
.portfolio-image-container.loading-box { /* Apply loading-box styles to the common container */
    background: #fff;
    /* padding-top: 56.25%; is already set on .portfolio-image-container */
}
.portfolio-image-container.loading-box .loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px; /* Keeping this specific font-size for loading text */
    color: #000;
    font-family: var(--font-anonymous-pro);
}

/* Specific adjustment for the last image/video based on original Figma (Adidas campaign had a narrower container) */
/* This rule affects the container itself, making it narrower on wider screens. */
.portfolio-item:last-of-type .portfolio-image-container {
    max-width: 754px; /* Adidas image container was 754px in Figma, if you want this specific width */
    margin-left: auto; /* Pushes it to the right if the parent is wider */
    margin-right: 0; /* Align right within its flex parent */
}

/* Ensure last loading box matches full width */
.portfolio-item:last-of-type .portfolio-image-container.loading-box {
    max-width: var(--max-content-width) !important;
}

/* Caption styles */
.portfolio-caption {
    width: 100%;
    max-width: 480px; /* Caption width from Figma */
    text-align: right; /* Aligns text within caption div to the right */
    margin-left: auto; /* Pushes the caption to the right */
    margin-top: 10px; /* Space between media and caption */
}

.caption-title {
    color: var(--text-color-medium);
    font-size: 11.81px; /* Keeping font size as is */
    font-weight: 700;
    line-height: 17px;
    margin-bottom: 5px;
}

.caption-description {
    color: var(--text-color-dark);
    font-size: 12px; /* Keeping font size as is */
    line-height: 17px;
}

.caption-description em {
    font-style: italic;
}

.caption-description strong {
     font-weight: 700;
}

/* Footer */
.site-footer {
    width: 100%;
    max-width: var(--max-content-width);
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.copyright {
    color: var(--text-color-medium);
    font-size: 14px; /* Keeping font size as is */
    font-weight: 700;
    line-height: 17px;
}

/* Media Queries for Responsiveness */

/* Tablets and smaller desktops */
@media (max-width: 990px) {
    .intro-section {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center the stacked columns */
    }

    .about-me,
    .recent-contact {
        max-width: 600px; /* Give them more width on medium screens */
        width: 100%; /* Take full width of parent */
        flex: none; /* Remove flex sizing to allow max-width to control */
        margin-bottom: 40px; /* More space between stacked sections */
        text-align: center; /* Center text within these sections */
    }

    .about-me {
        margin-top: 20px; /* Space from top */
    }

    .portfolio-item {
        align-items: center; /* Center image and caption on smaller screens */
    }

    .portfolio-caption {
        text-align: center; /* Center text within caption */
        margin-left: auto;
        margin-right: auto; /* Center the caption div */
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    :root {
        --page-horizontal-padding: 10px; /* Reduce padding for smaller screens */
        --max-content-width: 90vw; /* Use percentage of viewport width */
        --gap-between-sections: 40px;
        --gap-between-items: 40px;
    }

    body {
        padding: var(--page-horizontal-padding);
    }

    .about-me,
    .recent-contact {
        max-width: 100%; /* Take full width of content area */
        min-width: unset; /* Remove min-width constraint */
        text-align: left; /* 모바일에서 왼쪽 정렬 */
    }

    /* Removed font-size changes here as per request */
    .about-me p,
    .recent-contact p {
        line-height: 1.6; /* Adjusted line height for better mobile readability */
    }

    /* Removed font-size changes here as per request */
    .recent-heading,
    .contact-heading,
    .caption-title {
        text-align: center;
    }
    .recent-entry,
    .contact-entry {
        text-align: center;
    }

    /* Removed font-size changes here as per request */
    .recent-entry {
        font-size: 11px;/* font-size: inherit; */ /* No change to font-size here */
    }

    .recent-entry .text-small {
        font-size: 9px; /* Keeping this specific font-size change for small text */
    }

    /* Removed font-size changes here as per request */
    .contact-entry {
        /* font-size: inherit; */ /* No change to font-size here */
        line-height: 1.5; /* Keeping this specific line-height change for mobile */
        margin-bottom: 5px; /* Keeping consistent small margin */
    }

    .caption-title {
        font-size: 11px; /* Keeping this specific font-size change */
    }
    .caption-description {
        font-size: 11px; /* Keeping this specific font-size change */
    }
    
    /* EYES Canvas responsive styles */
    .eyes-container {
        justify-content: center; /* 모바일에서는 중앙 정렬 */
    }
    
    #eyes-canvas-container canvas {
        width: 160px !important; /* 모바일에서는 조금 더 작게 */
        height: 160px !important;
    }

    .portfolio-caption,
    .portfolio-caption .caption-title,
    .portfolio-caption .caption-description,
    .portfolio-caption .festival-award {
        text-align: right;
    }
}

.festival-award {
    font-size: 10px;
    line-height: 14px;
    color: var(--text-color-dark); /* 기본은 검정 */
    letter-spacing: 0.01em;
    font-weight: 400;
}
.festival-award a {
    color: var(--text-color-medium); /* 링크만 중간톤 */
}