/* 기본 스타일 */
body {
    font-family: 'pretendard', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
    color: #333333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 일반 img 태그 스타일을 최소화하여 다른 요소에 영향을 주지 않도록 합니다. */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 1. HEADER */
header {
    background-color: #fafafa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 1rem 0;
}

.logo img {
    /* 수정: 비율에 맞게 높이 80px로 변경, 너비는 auto로 설정 */
    height: 80px;
    width: auto;
}

.nav-links {
    /* 모바일 우선: 기본적으로 숨김 */
    display: none; 
}

@media (min-width: 768px) {
    .nav-links {
        display: flex !important;
    }
}

.nav-links a {
    text-decoration: none;
    color: #555555;
    font-weight: 600;
    margin-left: 1.5rem;
    padding: 0.5rem;
    transition: color 0.3s ease;
    
    /* Rainbow Underline 효과 */
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
}

/* Rainbow Underline - 가상 요소 (밑줄) 스타일 */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; 
    height: 3px;
    
    background: linear-gradient(90deg, #F21D92, #04B2D9, #BAD94A, #F2CC0F, #F28627);
    
    transition: width 0.4s ease-out; 
    z-index: -1; 
    border-radius: 5px;
}

/* Rainbow Underline - 호버 시 애니메이션 */
.nav-links a:hover::after {
    width: 100%; 
}

/* Rainbow Underline - 호버 시 텍스트 색상 변경 */
.nav-links a:hover {
    color: #333333; 
}

/* MAIN */
main {
    /* 기본적으로 헤더 높이만큼 패딩을 줍니다. (다른 페이지를 위해) */
    padding-top: 100px; 
    position: relative;
    z-index: 1;
}

/* Index 페이지 main (여백 제거) */
.index-main {
    padding-top: 0; 
}

.about-main {
    padding-top: 0;
}
/* Artwork 페이지 배너 높이를 헤더에 맞게 조정 */
.artwork-main {
    padding-top: 0; 
}


/* HAMBURGER BUTTON */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
}


/* 2. HERO IMAGE (index.html 및 artwork.html에서 사용) */

/* 일반 Hero 이미지 스타일 (Artwork Hero) */
.hero-image {
    width: 100%;
    height: 60vh; 
    position: relative; 
    overflow: hidden; 
    background-color: #000; 
}

/* Artwork 페이지의 Hero */
.artwork-main .hero-image {
    height: 60vh; /* 수정: 명시적 높이 설정 */
    min-height: 0; /* min-height 제거 */
    padding-top: 80px; /* 헤더 아래 여백 */
    background-color: #fafafa;
}
.artwork-main .hero-image img {
    object-fit: cover; /* 수정: 이미지가 컨테이너를 가득 채우도록 변경 */
    width: 100%;
    height: 100%; /* 수정: 컨테이너 높이에 맞춤 */
    max-height: none; /* 수정: 최대 높이 제약 해제 */
}

/* Index.html의 새로운 메인 배너 스타일 */
.hero-image.new-main-hero {
    height: auto; 
    min-height: 0; 
    
    /* Header 아래에 여백 없이 딱 붙도록 조정 */
    padding-top: 80px; 
    
    margin-bottom: 0; 
    background-color: #fafafa;
    overflow: hidden; 
    z-index: 50; 
}

/* Index.html의 새로운 메인 배너 이미지 */
.hero-image.new-main-hero img {
    /* 왜곡 없이 원본 비율 유지 */
    width: 100%;
    height: auto;
    max-height: none; 
    object-fit: contain; 
    opacity: 1; 
    position: relative;
    z-index: 7; 
}


/* 2-B. NEW MATRIX PATTERN (artwork.html 전용) */

.matrix-container {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    z-index: 5; 
}

.matrix-pattern {
    position: relative;
    width: 100%; 
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.matrix-column {
    position: absolute;
    top: -100%;
    width: 20px;
    height: 100%;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    animation: fall linear infinite;
    white-space: nowrap;
}

.matrix-column::before {
    content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to bottom,
      #333333 0%, 
      #333333 5%,
      #555555 10%, 
      #555555 20%,
      #777777 30%,
      #999999 40%,
      #BBBBBB 50%,
      #DDDDDD 60%,
      #EEEEEE 70%,
      #F2F2F2 80%,
      rgba(0, 0, 0, 0.2) 90%, 
      transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    writing-mode: vertical-lr;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 개별 컬럼 애니메이션 속성 */
.matrix-column:nth-child(1) { left: 0%; animation-delay: -2.5s; animation-duration: 3s; }
.matrix-column:nth-child(2) { left: 2.5%; animation-delay: -3.2s; animation-duration: 4s; }
.matrix-column:nth-child(3) { left: 5%; animation-delay: -1.8s; animation-duration: 2.5s; }
.matrix-column:nth-child(4) { left: 7.5%; animation-delay: -2.9s; animation-duration: 3.5s; }
.matrix-column:nth-child(5) { left: 10%; animation-delay: -1.5s; animation-duration: 3s; }
.matrix-column:nth-child(6) { left: 12.5%; animation-delay: -3.8s; animation-duration: 4.5s; }
.matrix-column:nth-child(7) { left: 15%; animation-delay: -2.1s; animation-duration: 2.8s; }
.matrix-column:nth-child(8) { left: 17.5%; animation-delay: -2.7s; animation-duration: 3.2s; }
.matrix-column:nth-child(9) { left: 20%; animation-delay: -3.4s; animation-duration: 3.8s; }
.matrix-column:nth-child(10) { left: 22.5%; animation-delay: -1.9s; animation-duration: 2.7s; }
.matrix-column:nth-child(11) { left: 25%; animation-delay: -3.6s; animation-duration: 4.2s; }
.matrix-column:nth-child(12) { left: 27.5%; animation-delay: -2.3s; animation-duration: 3.1s; }
.matrix-column:nth-child(13) { left: 30%; animation-delay: -3.1s; animation-duration: 3.6s; }
.matrix-column:nth-child(14) { left: 32.5%; animation-delay: -2.6s; animation-duration: 2.9s; }
.matrix-column:nth-child(15) { left: 35%; animation-delay: -3.7s; animation-duration: 4.1s; }
.matrix-column:nth-child(16) { left: 37.5%; animation-delay: -2.8s; animation-duration: 3.3s; }
.matrix-column:nth-child(17) { left: 40%; animation-delay: -3.3s; animation-duration: 3.7s; }
.matrix-column:nth-child(18) { left: 42.5%; animation-delay: -2.2s; animation-duration: 2.6s; }
.matrix-column:nth-child(19) { left: 45%; animation-delay: -3.9s; animation-duration: 4.3s; }
.matrix-column:nth-child(20) { left: 47.5%; animation-delay: -2.4s; animation-duration: 3.4s; }
.matrix-column:nth-child(21) { left: 50%; animation-delay: -1.7s; animation-duration: 2.4s; }
.matrix-column:nth-child(22) { left: 52.5%; animation-delay: -3.5s; animation-duration: 3.9s; }
.matrix-column:nth-child(23) { left: 55%; animation-delay: -2s; animation-duration: 3s; }
.matrix-column:nth-child(24) { left: 57.5%; animation-delay: -4s; animation-duration: 4.4s; }
.matrix-column:nth-child(25) { left: 60%; animation-delay: -1.6s; animation-duration: 2.3s; }
.matrix-column:nth-child(26) { left: 62.5%; animation-delay: -3s; animation-duration: 3.5s; }
.matrix-column:nth-child(27) { left: 65%; animation-delay: -3.8s; animation-duration: 4s; }
.matrix-column:nth-child(28) { left: 67.5%; animation-delay: -2.5s; animation-duration: 2.8s; }
.matrix-column:nth-child(29) { left: 70%; animation-delay: -3.2s; animation-duration: 3.6s; }
.matrix-column:nth-child(30) { left: 72.5%; animation-delay: -2.7s; animation-duration: 3.2s; }
.matrix-column:nth-child(31) { left: 75%; animation-delay: -1.8s; animation-duration: 2.7s; }
.matrix-column:nth-child(32) { left: 77.5%; animation-delay: -3.6s; animation-duration: 2.6s; }
.matrix-column:nth-child(33) { left: 80%; animation-delay: -2.1s; animation-duration: 3.1s; }
.matrix-column:nth-child(34) { left: 82.5%; animation-delay: -3.4s; animation-duration: 3.7s; }
.matrix-column:nth-child(35) { left: 85%; animation-delay: -2.8s; animation-duration: 2.9s; }
.matrix-column:nth-child(36) { left: 87.5%; animation-delay: -3.7s; animation-duration: 4.2s; }
.matrix-column:nth-child(37) { left: 90%; animation-delay: -2.3s; animation-duration: 3.3s; }
.matrix-column:nth-child(38) { left: 92.5%; animation-delay: -1.9s; animation-duration: 2.5s; }
.matrix-column:nth-child(39) { left: 95%; animation-delay: -3.5s; animation-duration: 3.8s; }
.matrix-column:nth-child(40) { left: 97.5%; animation-delay: -2.6s; animation-duration: 3.4s; }

.matrix-column:nth-child(odd)::before { content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン123456789"; }
.matrix-column:nth-child(even)::before { content: "ガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヴァィゥェォャュョッABCDEFGHIJKLMNOPQRSTUVWXYZ"; }
.matrix-column:nth-child(3n)::before { content: "アカサタナハマヤラワイキシチニヒミリウクスツヌフムユルエケセテネヘメレオコソトノホモヨロヲン0987654321"; }
.matrix-column:nth-child(4n)::before { content: "ンヲロヨモホノトソコオレメヘネテセケエルユムフヌツスクウリミヒニチシキイワラヤマハナタサカア"; }
.matrix-column:nth-child(5n)::before { content: "ガザダバパギジヂビピグズヅデドボポヴァィゥェォャュョッ!@#$%^&*()_+-=[]{}|;:,.<>?"; }

@keyframes fall {
    0% { transform: translate(0, 0); }
    100% { transform: translateY(200%); opacity: 0; }
}

/* 3. SUPERFLAT (슬로건) - Index.html의 타원형 디자인 제거 후 원복 */
.superflat-section {
    padding: 4rem 0;
    background-color: #444444;
    /* Hero 이미지와 붙도록 마진 제거 */
    margin-top: 0;
}

/* 타원형 디자인 제거 후 원복 스타일 */
.superflat-section.overlapping-banner {
    position: relative;
    z-index: 1;
    margin-top: 0; 
    padding-top: 4rem;
    padding-bottom: 4rem; 
    background-color: #444444;
    border-radius: 0; 
    box-shadow: none;
}

.superflat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.superflat-title h2 {
    font-size: 3rem;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    color: #fafafa; 
    /* 중앙 정렬 제거 후 왼쪽 정렬 (원래 스타일) */
    text-align: left; 
}

.superflat-description p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #fafafa;
    /* 중앙 정렬 제거 후 왼쪽 정렬 (원래 스타일) */
    text-align: left; 
    max-width: none; 
    margin: 0;
}

/* 4. ARTWORK (index.html 섹션) */
.artwork-section {
    padding: 4rem 0;
    background-color: #fafafa; 
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5rem; 
}

.artwork-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 4-B. ARTWORK ANIMATION */
@keyframes float1 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-20px, -30px); } 
    100% { transform: translate(0, 0); }
}
@keyframes float2 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(20px, -40px); } 
    100% { transform: translate(0, 0); }
}
@keyframes float3 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 20px); } 
    100% { transform: translate(0, 0); }
}
@keyframes float4 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(20px, 30px); } 
    100% { transform: translate(0, 0); }
}

/* 5. COLLABO */
.collabo-section {
    padding: 4rem 0;
    background-color: #444444;
}

.collabo-section .section-title,
.superflat-section .section-title { 
    color: #ffffff;
}


.collabo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem; 
}

.collabo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.collabo-img-wrapper {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.collabo-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collabo-name {
    /* 요청에 따라 콜라보 이름 폰트 색상을 흰색으로 명시 */
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff; 
    margin: 0;
}

/* 6. EXHIBITION (index.html 섹션) */
.exhibition-section {
    padding: 4rem 0;
    background-color: #fafafa; 
}

.exhibition-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.exhibition-item {
}

/* index.html의 전시 이미지 wrapper */
.exhibition-img-wrapper {
    width: 100%;
    height: 500px;
    border-radius: 150px 150px 0 0;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.exhibition-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 7. FOOTER */
footer {
    background-color: #222222;
    color: #fafafa;
    padding: 4rem 0;
    position: relative; /* 캐릭터의 absolute 포지션을 위한 기준점 */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo h3 {
    margin: 0;
    font-size: 1.5rem;
}

.footer-info h4, .footer-social h4 {
    color: #aaaaaa;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.footer-info p {
    margin: 0.5rem 0;
    color: #dddddd;
}

.footer-social a {
    display: inline-block;
    color: #dddddd;
    text-decoration: none;
    margin-right: 1.5rem; /* 아이콘 간격 조정 */
    font-size: 1.5rem; /* 아이콘 크기 조정 */
}

.footer-social a:hover {
    color: #fafafa;
}
.footer-social a i {
    color: inherit;
}


/* Mobile: 데스크톱 미디어 쿼리 시작 */
@media (min-width: 768px) {
    /* 3. SUPERFLAT */
    .superflat-grid {
        grid-template-columns: 1fr 1.5fr; 
    }
    
    .superflat-title h2 {
        font-size: 4rem;
    }

    /* 4. ARTWORK */
    .artwork-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, 60px); 
    }
    
    .art-item-1 {
        grid-column: 2 / span 4; 
        grid-row: 1 / span 4;
        animation: float1 6s ease-in-out infinite;
    }
    .art-item-2 {
        grid-column: 8 / span 3; 
        grid-row: 2 / span 5;
        animation: float2 5s ease-in-out infinite;
        animation-delay: -2s;
    }
    .art-item-3 {
        grid-column: 5 / span 4; 
        grid-row: 6 / span 4;
        animation: float3 7s ease-in-out infinite;
    }
    .art-item-4 {
        grid-column: 3 / span 7; 
        grid-row: 10 / span 3;
        animation: float4 6s ease-in-out infinite;
        animation-delay: -4s;
    }

    /* 5. COLLABO */
    .collabo-grid {
        grid-template-columns: repeat(4, 1fr); 
    }

    /* 6. EXHIBITION */
    .exhibition-grid {
        grid-template-columns: repeat(3, 1fr); 
    }

    /* 7. FOOTER */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr; 
    }
    .footer-social a {
        font-size: 1.5rem;
    }

    /* 11. ABOUT CARD GRID */
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* 14. PROJECT PAGE STYLES */
    .project-item:nth-child(odd) {
        flex-direction: row;
        text-align: left !important;
    }
    .project-item:nth-child(even) {
        flex-direction: row-reverse;
        text-align: right !important;
    }
    .project-item:nth-child(even) .project-content {
        margin-right: 0;
        margin-left: 2rem;
    }
    .project-item:nth-child(odd) .project-content {
        margin-left: 0;
        margin-right: 2rem;
    }
    
    /* ARTWORK PAGE - 데스크톱 이미지 비율 및 배치 */
    .artwork-photo-wrapper img {
        /* 이미지 크기 변형 문제 해결: 부모 컨테이너(artwork-photo-wrapper) 크기에 맞추고 비율 유지 */
        width: 100%;
        height: 100%; 
        object-fit: contain;
    }
    
    /* Louis Vuitton, Billie Eilish Name Wrapper - 이미지와 세로선상 가운데 정렬 및 이미지에 붙임 */
    .lv-section .lv-name-wrapper {
        grid-area: name;
        display: flex; 
        flex-direction: column;
        justify-content: center; /* 세로 가운데 정렬 */
        align-items: flex-start; 
        padding-left: 0; 
        height: 400px; 
        /* 오른쪽 여백을 0으로 설정하여 이미지에 붙임 */
        padding-right: 0; 
    }
    /* Billie Eilish Name Wrapper - 이미지와 세로선상 가운데 정렬 및 이미지에 붙임 */
    .billie-section .billie-name-wrapper {
        grid-area: name;
        display: flex; 
        flex-direction: column;
        justify-content: center; /* 세로 가운데 정렬 */
        align-items: flex-end; 
        padding-right: 0; 
        height: 400px; 
        padding-left: 0; 
    }

    /* PROJECT PAGE 메인 이미지 크기 명확히 지정 */
    .project-main-image {
        /* 부모 컨테이너가 400px 높이를 가지므로, 내부 이미지가 컨테이너를 채우도록 설정 */
        height: 100%; 
    }
    .project-main-image img {
        /* 이미지 크기 변형 문제 해결: 부모 컨테이너(project-main-image) 크기에 맞추고 비율 유지 */
        width: 100%;
        height: 100%;
        object-fit: cover; /* 메인 이미지는 컨테이너를 채우도록 cover 유지 */
    }
    
    /* Artwork Content Text Alignment */
    .artwork-list-item:nth-child(even) .artwork-list-content {
        text-align: right; /* 짝수번째 아이템: 텍스트 오른쪽 정렬 */
    }
    .artwork-list-item:nth-child(even) .artwork-list-content .artwork-year {
        text-align: right;
    }
    
    /* 데스크톱에서 설명 표시 (Louis Vuitton/Billie Eilish) */
    .project-description-wrapper {
        display: flex; 
    }
    
    /* Louis Vuitton의 설명 텍스트를 오른쪽에 배치 */
    .lv-section .project-description-wrapper {
        grid-column: 4 / span 1; /* 마지막 열에 배치 */
        grid-row: 1; /* 서브 이미지와 같은 줄에 배치 */
    }
    
    /* Billie Eilish의 설명 텍스트를 왼쪽에 배치 */
    .billie-section .project-description-wrapper {
        grid-column: 1 / span 1; /* 첫 번째 열에 배치 */
        grid-row: 1; /* 서브 이미지와 같은 줄에 배치 */
    }

    /* 서브 이미지의 레이아웃을 다시 정의 */
    .lv-section .lv-sub-images-bottom {
        grid-template-columns: 200px 200px 200px minmax(0, 1fr);
    }
    .billie-section .billie-sub-images-bottom {
        grid-template-columns: minmax(0, 1fr) 200px 200px 200px;
    }
}

/* 다른 페이지들을 위한 공통 스타일 */
.page-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: 60vh; 
}

.page-title {
    position: absolute;
    top: 100px; /* 헤더 높이에 맞게 조정 */
    left: 5%; 
    font-size: 4rem;
    font-weight: 900;
    color: #333;
    z-index: 10;
}


.page-text {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* 8. HERO IMAGE FLIP CARD (artwork.html에서 사용) */
.hero-image .card {
    width: 40rem;
    cursor: pointer;
    position: absolute;
    top: 50%; 
    right: 10%; 
    transform: translateY(-50%); 
    z-index: 10; 
}

.hero-image .content {
    text-align: center;
    position: relative;
    transition: all 2.25s;
    background-color: transparent;
    padding: 9em;
    transform-style: preserve-3d;
}

.hero-image .card:hover .content {
    transform: rotateY(0.5turn);
}

.hero-image .front,
.hero-image .back {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 2.5em;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-image .title {
    transform: translateZ(6.25rem);
    font-size: 4rem;
    animation: blink 2s infinite;
    transition: opacity 0.5s ease;
}

.hero-image .card:hover .title {
    opacity: 0;
}

.hero-image .back {
    transform: rotateY(0.5turn);
    background-color: #444444;
    color: white; 
}

.hero-image .description {
    transform: translateZ(3.75rem);
    font-size: 4rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-image .card:hover .description {
    opacity: 1;
    transition-delay: 1s;
}

/* 9. CARD BLINK ANIMATION */

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

/* 11. ABOUT PAGE - NEW PROFILE LAYOUT (새로운 프로필 섹션 스타일) */

.intro-profile-section {
    padding: 4rem 0;
    min-height: 80vh; 
    position: relative; /* 캐릭터 배치를 위한 기준점 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px; /* main.about-main의 padding-top: 0을 덮기 위해 추가 */
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; 
    gap: 40px;
    align-items: center;
    padding: 40px 0;
}

.profile-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.profile-image-wrapper img {
    width: 90%;
    max-width: 400px; 
    height: auto;
    object-fit: contain;
}

.profile-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.profile-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: left;
    border-bottom: 3px solid #eeeeee;
    padding-bottom: 10px;
}

/* 프로필 테이블 스타일 재정의 */
.profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    border-top: none; 
}

.profile-table th, 
.profile-table td {
    padding: 10px 10px; 
    font-size: 1.1rem; 
    border-bottom: 1px solid #f0f0f0; 
    background-color: transparent; 
}

.profile-table th {
    width: 30%; 
    font-weight: 700;
    color: #333;
    text-align: left; 
}

.profile-table td {
    text-align: left; 
    color: #555;
}

.profile-table tr:last-child th,
.profile-table tr:last-child td {
    border-bottom: none;
}
/* ---------------------------------------------------- */


/* 10. ABOUT PAGE TIMELINE */
.timeline-section {
    padding: 5rem 0;
    overflow-x: hidden; 
}

/* 타임라인 제목 (리본 스타일) */
.timeline-ribbon-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
    position: relative;
}

.timeline-ribbon {
    display: inline-block;
    padding: 15px 60px;
    background-color: #f7f7f7; 
    color: #333333;
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.timeline-ribbon::before, .timeline-ribbon::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 30px;
    height: 15px;
    background: #e0e0e0;
}

.timeline-ribbon::before {
    left: 0;
    border-radius: 0 0 0 8px;
}

.timeline-ribbon::after {
    right: 0;
    border-radius: 0 0 8px 0;
}

.timeline-title-main {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #333333;
}


/* 타임라인 메인 래퍼 */
.timeline-wrapper {
    position: relative;
    width: 90%; 
    max-width: 1200px; 
    margin: 0 auto;
    padding: 20px 0;
}

/* 중앙 세로선 */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    width: 2px; 
    background-color: #333333;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
    z-index: 1;
}

/* 개별 타임라인 항목 */
.timeline-item {
    padding: 30px 0;
    position: relative;
    width: 50%; 
    box-sizing: border-box; 
    z-index: 2;
    clear: both; 
    margin-bottom: 20px;
}

/* 좌우 교차 배치 (지그재그) */
.timeline-item.item-left {
    float: left;
    padding-right: 60px;
}

/* item-right는 데스크탑에서만 필요함. 모바일에서 float 제거 */
.timeline-item.item-right {
    float: right;
    padding-left: 60px; 
}


/* 타임라인 내용 박스 (말풍선 효과) */
.timeline-content-box {
    background-color: #fafafa;
    border: 2px solid #e0e0e0;
    padding: 25px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-height: 100px;
}

.timeline-content-box h3 {
    /* h3가 굵게 표시되도록 수정 */
    margin-top: 0;
    font-size: 1.8rem;
    font-weight: 900; 
    color: #444444;
    /* 추가: 부제목과 설명 사이 간격 조정 */
    margin-bottom: 10px;
}

.timeline-content-box p {
    /* p 태그 스타일을 Artwork 및 Project 설명과 동일하게 변경 */
    margin-top: 0; 
    margin-bottom: 0;
    font-size: 1rem; /* Artwork와 통일 */
    line-height: 1.8; /* Artwork와 통일 */
    color: #555555;
    text-align: justify; /* Artwork와 통일 */
}

/* 연도/날짜 표시 */
.timeline-year-ref {
    position: absolute;
    font-weight: 700;
    color: #333;
    font-size: 1.4rem;
    padding: 0; 
    
    top: 50%; 
    transform: translateY(-50%);
    z-index: 3;
}

/* 연도 텍스트 배치 (마커 옆) */
.timeline-item.item-left .timeline-year-ref {
    right: -150px; 
    text-align: right;
}

/* 연도 텍스트 배치 (마커 옆) */
.timeline-item.item-right .timeline-year-ref {
    left: -150px; 
    text-align: left;
}


/* 중앙 원형 마커 (이미지 대체) */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
    
    width: 40px; 
    height: 40px; 
    
    border: none; 
    border-radius: 50%;
    background-color: transparent; 
    box-shadow: none; 
    
    background-image: url('img/maker.png');
    background-size: cover;
    background-repeat: no-repeat;
    
    z-index: 2;
}

/* item-left: 오른쪽에 마커 위치 */
.timeline-item.item-left::after {
    right: -21px;
}

/* item-right: 왼쪽에 마커 위치 */
.timeline-item.item-right::after {
    left: -21px;
}

/* Clearfix for floating elements */
.timeline-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* ARTWORK LIST (크기 변형 및 좌우 교차) */
.artwork-list-section {
    padding: 4rem 0;
}

.artwork-list-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 5rem;
}

.artwork-list-item {
    /* 수정: 이미지와 텍스트를 확실히 분리하고, 가운데 공간을 확보 */
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 밀어내 가운데 공간 확보 */
    align-items: flex-start;
    padding: 3rem 0; /* [유지] 세로 간격 */
    border-bottom: 1px solid #eeeeee;
}

.artwork-list-item:last-child {
    border-bottom: none;
}

.artwork-list-content {
    /* [수정] 500px로 늘려 가운데 여백 감소 */
    flex-grow: 0;
    flex-shrink: 0;
    width: 500px; 
    padding: 0; 
    margin: 0; 
}

.artwork-list-content h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.artwork-list-content p {
    font-size: 1rem;
    color: #555;
    /* 문단 양쪽 정렬 및 줄 간격 조정 */
    text-align: justify;
    line-height: 1.8; 
}

.artwork-list-content .artwork-year {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.5;
}


.artwork-photo-wrapper {
    /* [수정] 500px로 늘려 가운데 여백 감소 */
    flex-shrink: 0;
    flex-grow: 0;
    width: 500px; 
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 이미지 원본 비율 유지 */
.artwork-photo-wrapper img {
    /* 이미지 크기 변형 문제 해결: 부모 컨테이너(artwork-photo-wrapper) 크기에 맞추고 비율 유지 */
    width: 100%;
    height: 100%; 
    object-fit: contain; 
}


/* 좌우 교차 정렬 */
.artwork-list-item:nth-child(odd) {
    flex-direction: row-reverse; /* 이미지: 오른쪽, 텍스트: 왼쪽 */
}
.artwork-list-item:nth-child(even) {
    flex-direction: row; /* 이미지: 왼쪽, 텍스트: 오른쪽 */
}

/* 텍스트 정렬 */
/* 홀수 (텍스트 왼쪽) - Mr. DOB, Flower Series */
.artwork-list-item:nth-child(odd) .artwork-list-content {
    text-align: left;
}
.artwork-list-item:nth-child(odd) .artwork-list-content .artwork-year {
    text-align: left;
}
.artwork-list-item:nth-child(odd) .artwork-list-content p {
    text-align: justify; /* 본문은 양쪽 정렬 유지 */
}

/* 짝수 (텍스트 오른쪽) - Kaikai & Kiki, Tan Tan Bo */
.artwork-list-item:nth-child(even) .artwork-list-content {
    text-align: right; 
}
.artwork-list-item:nth-child(even) .artwork-list-content h3 {
    text-align: right;
}
.artwork-list-item:nth-child(even) .artwork-list-content .artwork-year {
    text-align: right;
}
.artwork-list-item:nth-child(even) .artwork-list-content p {
    /* 오른쪽 정렬된 텍스트 박스 안의 본문은 양쪽 정렬 유지 */
    text-align: justify; 
}

/* PRODUCT CAROUSEL */
.product-section {
    padding: 4rem 0;
    text-align: center;
}
.product-section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
}

.carousel-container {
    overflow: hidden;
    margin: 0 auto;
}

.product-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.product-item {
    min-width: 250px;
    margin: 0 10px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
}

.product-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.carousel-dots {
    margin-top: 2rem;
    text-align: center;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #cccccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #444444;
}


/* 13. EXHIBITION PAGE STYLES */

/* EXHIBITION HERO */
.exhibition-hero {
    position: relative;
    height: 60vh;
    overflow: hidden;
    margin-bottom: 4rem;
    background-color: #fafafa; 
    
    display: flex;
    flex-direction: column; /* 텍스트를 아래에 배치하기 위해 컬럼으로 변경 */
    justify-content: center;
    align-items: center;
    
    /* 텍스트 공간 확보를 위해 높이 재조정 */
    min-height: 70vh;
}

/* 비디오 컨테이너를 중앙 정렬하는 래퍼 */
.hero-video-wrapper-center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* 비디오를 감싸는 영역 */
.exhibition-hero-img-wrapper {
    position: relative;
    width: 60%;
    height: 80%; /* 텍스트 공간 확보를 위해 높이 줄임 */
    overflow: hidden;
    border-radius: 0 0 200px 200px; 
    background-color: #fff; 
}

.exhibition-hero-img-wrapper .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; 
}

/* [Revert: 비디오 아래 텍스트 스타일] */
.exhibition-hero .hero-description-text {
    /* position: absolute; 제거 (flex container 내에서 자연스럽게 배치) */
    width: 80%;
    max-width: 800px;
    text-align: center;
    font-size: 1.3rem; /* [유지] 요청에 따른 크기 */
    font-weight: 500;
    color: #333333; /* [Revert] 네온 효과 제거, 기본 색상으로 */
    padding: 2rem 0 0; /* 상단 패딩 유지 */
    z-index: 10; /* z-index를 기본 값으로 설정 */
    line-height: 1.8; /* 줄 간격 유지 */
    /* [Revert] 네온/글리치 효과 관련 스타일 삭제 */
    text-shadow: none;
    animation: none;
}


/* CURRENT SECTION */
.current-section {
    /* [요청 사항: RECENT 섹션을 아래로 이동하고 PAST와 가깝게] */
    padding: 5rem 0 3rem; /* padding-top 2rem -> 5rem (콘텐츠 아래로), padding-bottom 5rem -> 3rem */
    background-color: #fafafa;
    border-radius: 0;
    box-shadow: none;
    
    margin: 0 auto 3rem; /* margin-bottom 5rem -> 3rem (PAST와 가깝게) */
    width: 90%;
    max-width: 1200px;
    text-align: center;
}

.current-section h2, .past-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 3rem;
    text-transform: uppercase;
    padding-top: 2rem;
}

.current-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.current-item {
    flex-basis: 30%;
    text-align: center;
}

.current-photo {
    width: 100%;
    height: 300px;
    background-color: #ccc; 
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
}
.current-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 전시회 이름 스타일 추가 */
.current-item .exhibit-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1rem 0;
    color: #444444; 
    min-height: 2.2rem; /* 두 줄 이상일 경우를 대비해 최소 높이 확보 */
    display: block;
}

.info-button {
    background-color: #444444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}
.info-button:hover {
    background-color: #000000;
}

/* PAST SECTION (Automatic Slider) */
.past-section {
    padding: 2rem 0;
    overflow: hidden;
}

.past-section h2 {
    margin-bottom: 3rem;
    text-align: center !important;
}

.past-carousel-wrapper {
    overflow: hidden;
}

.past-carousel-track {
    display: flex;
    width: calc(320px * 8);
    animation: slideRight 20s linear infinite;
}

.past-carousel-track:hover {
    animation-play-state: paused;
}

.past-item {
    width: 300px; 
    height: 200px;
    background-color: #e0e0e0;
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 12px;
    overflow: hidden;
}
.past-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes slideRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* MODAL STYLE (전시 정보 카드) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(-50px);
    transition: transform 0.3s;
}

.modal-overlay.active .modal-card {
    transform: translateY(0);
}

.modal-card h3 {
    font-size: 1.8rem;
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.modal-content p {
    margin-bottom: 10px;
    font-size: 1rem;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    border: none;
    background: none;
    color: #333;
}

/* 15. CONTACT PAGE STYLES */
.contact-wrap {
    flex-direction: column;
    gap: 1.5rem !important;
}


/* 16. PROJECT PAGE LAYOUT */

.project-main-content {
    background-color: #f7f7f7;
    position: relative;
    padding-top: 10rem; 
    padding-bottom: 5rem;
    overflow: hidden;
}

/* 배경 웨이브 효과 */
.project-main-content::before, .project-main-content::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%; 
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0.5) 100%);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    top: 0;
    left: -50%;
    animation: waveScroll 20s linear infinite;
    border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%;
}

.project-main-content::after {
    top: 5%;
    left: -60%;
    width: 220%;
    height: 90%;
    opacity: 0.5;
    background: linear-gradient(to left, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0.3) 100%);
    animation: waveScroll 30s linear infinite reverse;
    border-radius: 60% 40% 30% 70% / 70% 40% 60% 30%;
}

@keyframes waveScroll {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(100px, 50px) rotate(5deg); }
}

.collaboration-title {
    position: relative;
    text-align: center;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 3rem;
    z-index: 10; 
}

/* Project Section - Louis Vuitton and Billie Eilish Layout */
.project-section {
    position: relative;
    padding: 3rem 0;
    z-index: 10;
    
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 12rem; 
}

/* Louis Vuitton: Title Left, Image+Description Right */
.lv-section {
    display: grid;
    /* 4열 그리드: Name(1.2fr) + Main Image(3fr) */
    grid-template-columns: minmax(100px, 1.2fr) repeat(3, 1fr); 
    grid-template-rows: auto 400px auto; 
    grid-template-areas: "name main-img main-img main-img" 
                         "sub-area sub-area sub-area sub-area";
    align-items: flex-start; 
    width: 100%;
    gap: 10px; 
}

/* Billie Eilish: Image+Description Left, Title Right */
.billie-section {
    display: grid;
    /* 4열 그리드: Main Image(3fr) + Name(1.2fr) */
    grid-template-columns: repeat(3, 1fr) minmax(100px, 1.2fr); 
    grid-template-rows: auto 400px auto;
    grid-template-areas: "main-img main-img main-img name" 
                         "sub-area sub-area sub-area sub-area";
    align-items: flex-start; 
    width: 100%;
    gap: 10px; 
}

/* Louis Vuitton, Billie Eilish 공통: 메인 이미지 컨테이너 */
.lv-img-wrapper {
    grid-area: main-img;
    height: 400px; /* 메인 이미지 크기 고정 */
}
.billie-img-wrapper {
    grid-area: main-img;
    height: 400px; /* 메인 이미지 크기 고정 */
}

/* Louis Vuitton Name Wrapper - 이미지와 세로선상 가운데 정렬 및 이미지에 붙임 */
.lv-section .lv-name-wrapper {
    grid-area: name;
    display: flex; 
    flex-direction: column;
    justify-content: center; /* 세로 가운데 정렬 */
    align-items: flex-start; 
    padding-left: 0; 
    height: 400px; 
    padding-right: 0; 
}
/* Billie Eilish Name Wrapper - 이미지와 세로선상 가운데 정렬 및 이미지에 붙임 */
.billie-section .billie-name-wrapper {
    grid-area: name;
    display: flex; 
    flex-direction: column;
    justify-content: center; /* 세로 가운데 정렬 */
    align-items: flex-end; 
    padding-right: 0; 
    height: 400px; 
    padding-left: 0; 
}


.lv-section .project-name, .billie-section .project-name {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0; 
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* 서브 이미지 + 설명 배치 그리드 */
.sub-area-grid {
    grid-area: sub-area;
    padding-top: 2rem; 
    
    display: grid;
    /* 4열: 서브이미지 3개 + 설명 1개 */
    grid-template-columns: 200px 200px 200px 1fr; 
    gap: 30px;
}
.lv-section .sub-area-grid {
    grid-column: 1 / span 4;
    justify-content: flex-start;
}
.billie-section .sub-area-grid {
    grid-column: 1 / span 4;
    justify-content: flex-end;
    /* Billie는 순서가 반대이므로 템플릿 영역을 다시 지정 */
    grid-template-columns: 1fr 200px 200px 200px;
}


/* Louis Vuitton/Billie Eilish 설명 Wrapper - 배경/그림자 제거 */
.project-description-wrapper {
    background-color: transparent; /* 하얀색 박스 제거 */
    border-radius: 0; 
    padding: 10px 20px; /* 여백 유지 */
    box-shadow: none; /* 그림자 제거 */
    
    display: flex;
    align-items: center;
    /* 모바일에서 숨기기 위한 기본 설정 */
    display: none; 
}

/* 데스크톱에서만 설명 표시 */
@media (min-width: 768px) {
    .project-description-wrapper {
        display: flex; 
    }
    
    /* Louis Vuitton의 설명 텍스트를 오른쪽에 배치 */
    .lv-section .project-description-wrapper {
        grid-column: 4 / span 1; /* 마지막 열에 배치 */
        grid-row: 1; /* 서브 이미지와 같은 줄에 배치 */
    }
    
    /* Billie Eilish의 설명 텍스트를 왼쪽에 배치 */
    .billie-section .project-description-wrapper {
        grid-column: 1 / span 1; /* 첫 번째 열에 배치 */
        grid-row: 1; /* 서브 이미지와 같은 줄에 배치 */
    }

    /* 서브 이미지의 레이아웃을 다시 정의 */
    .lv-section .lv-sub-images-bottom {
        grid-template-columns: 200px 200px 200px minmax(0, 1fr);
    }
    .billie-section .billie-sub-images-bottom {
        grid-template-columns: minmax(0, 1fr) 200px 200px 200px;
    }
}


/* Louis Vuitton/Billie Eilish 설명 스타일 (폰트 크기 유지) */
.project-description-inline {
    font-size: 0.95rem; 
    line-height: 1.6;
    color: #555;
    margin: 0;
    text-align: justify; /* 설명 텍스트 양쪽 정렬 */
}


/* 서브 이미지 공통 스타일 */
.sub-image-wrapper {
    width: 200px; 
    height: 200px; 
    flex-shrink: 0; 
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.sub-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* NewJeans & Kanye West (Center Aligned) */
.center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 5rem;
}
.center-section .project-name {
    text-align: center;
    padding-top: 2rem;
    font-size: 2.5rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
}

/* 중앙 정렬 섹션의 설명 텍스트 스타일 (이미지/비디오 아래로 이동) */
.center-section .project-description {
    font-size: 1rem; 
    line-height: 1.8; 
    color: #555;
    max-width: 800px;
    margin: 2.5rem auto 2rem; 
    padding: 0 20px;
    text-align: center; /* 가운데 정렬로 변경 */
}

.center-item .project-main-image {
    width: 1000%;
    max-width: 800px;
    margin: 0 auto;
}

/* Kanye West Video */
.project-video-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; 
    text-align: center;
    
    /* [데스크톱 유지] 반응형 속성을 제거하고 고정 높이로 유지 */
    position: relative;
    padding-bottom: 0; 
    height: 450px; /* 데스크톱에서 여백 없이 꽉 채우기 위한 고정 높이 */
    overflow: hidden;
    margin-bottom: 1rem; 
}
/* 796줄 */
.project-video-wrapper iframe {
    /* Make iframe fill the wrapper. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* --- 캐릭터 공통 및 개별 스타일 (수정) --- */
.character {
    position: fixed; /* Start fixed to follow scroll */
    width: 150px; 
    height: auto;
    object-fit: contain;
    z-index: 10; 
    transition: transform 0.3s ease-in-out;
    animation: floatCharacter 4s ease-in-out infinite;
    
    /* Fixed Placement on viewport: Adjusted to be more right */
    right: 2%; /* 오른쪽으로 더 붙임 */
    bottom: 40px; /* Default fixed bottom position */
}

.character:hover {
    transform: scale(1.1) translateY(-5px);
    animation-play-state: paused;
    cursor: pointer;
}

@keyframes floatCharacter {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}


/* Mobile Styles */
    
@media (max-width: 767px) {
    
    /* Mobile: HEADER/NAVIGATION FIX */
    header .container {
        padding: 0.5rem 5%;
    }
    .logo img {
        height: 80px;
        width: auto;
    }
    .hamburger-btn {
        display: block;
        z-index: 110;
    }
    .nav-links {
        /* [수정] 모바일 메뉴를 header 바로 아래에 전체 폭으로 드롭다운되도록 수정 */
        position: absolute;
        top: 90px; /* 헤더 높이(80px) + 여백 */
        left: 0;
        width: 100%;
        background-color: #fafafa;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 그림자 강화 */
        
        /* 세로로 정렬되도록 Flex Direction 변경 */
        display: flex; 
        flex-direction: column; 
        
        text-align: center;
        padding: 1rem 0;
        z-index: 99;
        
        /* 초기에는 숨김 처리 */
        display: none; 
    }
    .nav-links a {
        /* [핵심 수정] 링크가 한 줄 전체를 차지하도록 block 속성 추가 */
        display: block;
        margin: 0.5rem 0;
        padding: 0.8rem 0;
        margin-left: 0;
        border-bottom: 1px solid #eee;
    }
    .nav-links a:last-child {
        border-bottom: none;
    }
    
    /* Mobile: GENERAL LAYOUT & ARTWORK FIX */
    main {
        padding-top: 100px;
    }
    /* index.html의 main 여백 제거 오버라이드 */
    .index-main {
        padding-top: 0;
    }
    .artwork-main {
        padding-top: 0; 
    }
    .artwork-list-section h2, .section-title {
        margin-bottom: 2rem;
        font-size: 2rem;
    }

    /* ===== [인덱스: Superflat 섹션 크기 및 간격 조정] ===== */
    .superflat-section {
        padding: 0.2rem 0;
    }
    .superflat-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: center;
        text-align: center;
    }
    .superflat-title {
        width: 100%;
        text-align: center;
    }
    .superflat-title h2 {
        font-size: 1.1rem; 
        margin-bottom: 0.2rem;
        text-align: center;
    }
    .superflat-description {
        width: 90%;
        margin: 0 auto;
    }
    .superflat-description p {
        font-size: 0.7rem;
        margin: 0.1rem 0 0.3rem 0;
        text-align: center;
    }
    /* ============================================= */
    
    /* [수정] ARTWORK PAGE FIX: Image -> Text 순서 통일 */
    .artwork-list-item {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        padding: 1.5rem 0; 
    }
    
    .artwork-list-content,
    .artwork-photo-wrapper {
        width: 90%; 
        max-width: 90%;
    }
    
    /* Artwork 텍스트 정렬 수정: 모든 콘텐츠를 왼쪽 정렬 */
    .artwork-list-item:nth-child(even) .artwork-list-content,
    .artwork-list-item:nth-child(odd) .artwork-list-content {
        text-align: left; 
        padding: 0.5rem 0;
    }
    
    /* 카이카이 & 키키, 탄탄보(짝수번째) 제목/연도 정렬 수정 요청 반영: 왼쪽 정렬 */
    .artwork-list-item:nth-child(even) .artwork-list-content h3,
    .artwork-list-item:nth-child(even) .artwork-list-content .artwork-year {
        text-align: left !important;
    }

    .artwork-list-content h3 {
        font-size: 1.6rem;
    }
    .artwork-list-content p {
        font-size: 0.95rem;
        text-align: left;
        line-height: 1.8; 
    }
    .artwork-list-content .artwork-year {
        text-align: left !important;
    }
    
    /* Mobile: ABOUT PAGE FIX */
    .intro-profile-section {
        height: auto;
        padding-top: 20px;
        padding-bottom: 40px;
        margin-top: 0;
    }
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .profile-image-wrapper img {
        max-width: 250px;
    }
    .profile-content {
        padding: 20px;
    }
    .profile-table th,
    .profile-table td {
        font-size: 0.9rem;
        padding: 5px;
        white-space: normal;
    }
    
    /* TIMELINE FIX */
    .timeline-wrapper {
        width: 100%;
        max-width: none;
        padding: 0 10px;
    }
    .timeline-item {
        width: 100%;
        padding: 10px 0;
    }
    .timeline-wrapper::before {
        left: 20px;
    }
    .timeline-item.item-left {
        float: none;
        padding-left: 50px;
        padding-right: 10px;
    }
    .timeline-item.item-right {
        float: none;
        padding-left: 50px;
        padding-right: 10px;
    }
    .timeline-item.item-left::after,
    .timeline-item.item-right::after {
        left: 3px;
    }
    .timeline-item.item-left .timeline-year-ref,
    .timeline-item.item-right .timeline-year-ref {
        position: static;
        transform: none;
        text-align: left;
        font-size: 1rem;
        margin-bottom: 5px;
        display: block;
    }
    .timeline-content-box {
        min-height: 0;
    }
    .timeline-ribbon {
        font-size: 1.5rem;
        padding: 10px 30px;
    }

    /* Mobile: EXHIBITION HERO TEXT */
    .exhibition-hero .hero-description-text {
        font-size: 1.0rem; 
        padding-bottom: 1rem;
        color: #333333; 
        text-shadow: none; 
        width: 90%;
    }

    /* ===== [Project 페이지 최종 모바일 레이아웃 및 정렬] ===== */
    
    /* Project 섹션 컨테이너: 너비 100% 확보, 중앙 정렬 */
    .project-section {
        width: 100%;
        padding: 0 5%; 
        box-sizing: border-box;
        display: flex; 
        flex-direction: column;
        align-items: center;
        gap: 1.5rem; /* 간격 최소화 */
    }
    
    /* Louis Vuitton/Billie Eilish 섹션 (이름, 메인 이미지, 서브 이미지, 설명) */
    .lv-section, .billie-section {
        min-width: 0;
        width: 100%; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 0.5rem; /* 요소 간 간격 최소화 */
        text-align: center;
    }

    /* --- 순서 재배치 및 간격/정렬 --- */
    /* 1. 이름 (Name) - 가운데 정렬 및 간격 최소화 */
    .lv-name-wrapper, .billie-name-wrapper { 
        order: 1; 
        width: fit-content; 
        margin: 0 auto 0.5rem auto; /* 간격 최소화 */
        text-align: center; 
    }
    .lv-section .project-name, .billie-section .project-name {
        text-align: center;
    }

    /* 2. 메인 이미지 (Main Image) - 간격 최소화 */
    .lv-img-wrapper, .billie-img-wrapper { 
        order: 2; 
        height: auto !important; 
        width: 100% !important; 
        min-width: 0; 
        margin-bottom: 0.5rem; /* 간격 최소화 */
    }
    .project-main-image { height: auto !important; width: 100% !important; }
    .project-main-image img { object-fit: contain; width: 100%; height: auto; }

    /* 3. 서브 이미지 그룹 (가로 배열 및 중앙 정렬) */
    .lv-sub-images-bottom, .billie-sub-images-bottom { 
        order: 3; 
        width: 100%; 
        
        display: flex; 
        flex-direction: column; /* 서브 이미지 그룹과 설명 글을 수직으로 배열 (상위 래퍼) */
        align-items: center; /* 수직 배열된 요소들을 중앙 정렬 */

        padding: 0; /* 패딩 제거 */
        box-sizing: border-box;
        min-width: 0;
    }

    /* 서브 이미지 3개만 담는 내부 Flex 컨테이너 (가로 배치 및 중앙 정렬) */
    .lv-sub-images-bottom .sub-area-grid,
    .billie-sub-images-bottom .sub-area-grid {
        display: flex;
        flex-direction: row; /* 서브 이미지들을 가로로 나열 */
        flex-wrap: nowrap; 
        
        justify-content: space-between; /* 가로로 딱 붙지 않고 균등 분배 */
        
        width: 90%; /* 화면의 90%만 사용하도록 너비 제한 */
        margin: 0 auto 0.5rem auto; /* 간격 최소화 및 블록 요소 중앙 정렬 */
        
        gap: 0; 
        padding: 0;
        order: 1; 
    }
    
    /* 서브 이미지 래퍼: 1:1 비율 및 크기 조정 */
    .sub-image-wrapper {
        width: 32%; /* 33.3% 대신 32%로 줄여 간격 확보 */
        height: 0; 
        padding-bottom: 32%; 
        position: relative;
        overflow: hidden;
        margin: 0; 
        flex-shrink: 0; 
    }
    .sub-image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* 4. 설명 글 (Description) - 간격 최소화 */
    .project-description-wrapper { 
        order: 4; 
        display: block !important;
        width: 100% !important; 
        margin-top: 0; /* 간격 최소화 */
        margin-bottom: 0;
        padding: 0; 
        box-sizing: border-box;
    }
    
    /* 설명 글꼴 스타일 (가운데 정렬) */
    .project-description-wrapper .project-description-inline {
        text-align: center !important; 
        white-space: normal !important; 
        overflow-wrap: break-word; 
        word-break: break-word;
        font-size: 0.9rem; 
        line-height: 1.6;
        padding: 0 5%; 
        margin: 0;
    }

    /* NewJeans & Kanye West (Center Section) 간격 조정 */
    .center-section {
        width: 100%;
        text-align: center;
        gap: 0.5rem; /* 요소 간 간격 최소화 */
        margin-bottom: 1.5rem; /* 섹션 간 간격 */
    }
    .center-section .project-name {
        padding-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .center-section .project-description {
        padding: 0 5%; 
        margin: 0.5rem auto 1rem; /* 설명글 상하 간격 최소화 */
        font-size: 0.95rem;
        text-align: center !important; 
        width: 100%;
    }
.project-video-wrapper {
        width: 100%; 
        max-width: none; 
        
        /* [핵심 수정] 모바일에서 높이 고정을 무효화하고 16:9 비율로 유동적 높이 설정 */
        padding-bottom: 56.25%; /* 16:9 비율 */
        height: 0;
        
        overflow: hidden;
    }
    .project-video-wrapper iframe {
        margin-top: 0;
    }
    
    /* ============================================= */


    /* Mobile: FOOTER FIX */
    .footer-logo {
        align-items: center;
    }
    .footer-grid {
        text-align: center;
    }

    /* --- 캐릭터 모바일 위치 조정 --- */
    .character {
        width: 100px; 
        bottom: 20px; 
        right: 2%; 
    }
}