/* 1. 기본 초기화 및 폰트 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    color: #1a1a1a;
    background-color: #ffffff;
    display: flex;
}

/* --- 사이드바: 마우스 호버 시 확장되는 플러스 버튼 디자인 --- */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 60px; /* 접혔을 때의 너비 */
    background-color: #fff;
    border-right: 1px solid #f0f0f0;
    z-index: 1000;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden; 
    white-space: nowrap; 
}

/* ✨ 플러스(+) 기호: 로고 대신 첫인상을 담당합니다 */
.sidebar::before {
    content: "+";
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem; 
    font-weight: 300;
    color: #000; /* 선명한 검은색 */
    opacity: 1; 
    transition: opacity 0.3s ease;
    z-index: 1001;
}

/* 사이드바 확장 */
.sidebar:hover {
    width: 220px; 
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.03);
}

/* 확장 시 플러스(+) 기호 숨기기 */
.sidebar:hover::before {
    opacity: 0;
}

/* 로고 스타일: 평소엔 m도 안 보이게 숨깁니다 */
.logo {
    padding: 40px 0 60px 22px; 
    opacity: 0; 
    transition: opacity 0.3s ease;
}

.sidebar:hover .logo {
    opacity: 1;
}

.logo h1 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* 메뉴 스타일 */
.menu {
    list-style: none;
    padding-left: 22px;
}

.menu li {
    margin-bottom: 25px;
}

.menu li a {
    text-decoration: none;
    color: #999;
    font-size: 0.9rem;
    opacity: 0; /* 접혔을 때 글자 숨김 */
    transition: all 0.3s ease;
}

.sidebar:hover .menu li a {
    opacity: 1;
}

/* 현재 페이지 및 호버 강조 */
.menu li a.active, .menu li a:hover {
    color: #000;
    font-weight: 600;
}

/* 본문 영역 위치 조정: 사이드바가 접힌 상태(60px)를 기준으로 여백을 줍니다 */
.content {
    margin-left: 60px;
    padding: 80px;
    transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* (선택 사항) 사이드바가 열릴 때 본문도 같이 옆으로 밀고 싶다면 주석을 해제하세요 */
/* .sidebar:hover ~ .content { margin-left: 220px; } */

/* 1. 모든 페이지의 공통 본문 영역 (기본 뼈대) */
.content {
    margin-left: 60px; /*사이드바가 접혔을 때의 여백 */
    width: calc(100% - 60px);
    min-height: 100vh; /* 최소 높이는 유지하되, 내용이 많으면 늘어나게 합니다 */

    /* 본문이 이동할 때의 부드러운 애니메이션 */
    transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) ,
                width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) ;
    
}

/* 2. 홈 화면 (index.html)에서만 구체를 중앙에 놓는 설정 */
/* HTML의 <main class="content home-stage"> 부분에 적용됩니다 */
.home-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 홈 화면은 딱 한 화면에 들어오게 고정 */
    overflow: hidden;
}

/* 3. 사이드바가 열릴 때 본문의 반응 (기존 유지) */
.sidebar:hover ~ .content {
    margin-left: 250px;
    width: calc(100% - 250px);
}

.intro h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 20px;
}

/* 4. About 페이지 전용: 흑백 대비 디자인 */
.about-section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #ccc;
    margin-bottom: 60px;
    text-align: center;
}

.contrast-layout {
    display: flex;
    width: 70%;
    height: 40vh;
    margin: 0 auto 60px;
}

.meaning-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden; /* 큰 글자가 박스 밖으로 나가지 않게 함 */
    transition: all 0.3s ease;
}

.meaning-item p {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 5px 0;
    position: relative;
    z-index: 1;

    transition: color 0.3s ease, transform 0.3s ease;
    cursor: default;
}

.meaning-item p:hover {
    color: #CDDC39;
    transform: translateX(5px);
}

.left-contrast {
    background-color: #000;
    color: #fff;
    align-items: flex-end;
    text-align: right;
}

.right-contrast {
    background-color: #fff;
    color: #000;
    align-items: flex-start;
    text-align: left;
    border-left: 1px solid #000;
}

.initial {
    font-size: 12rem; /* 이니셜을 아주 크게 */
    font-weight: 900;
    position: absolute;
    opacity: 0.1;
    z-index: 0;
}

.left-contrast .initial { right: -30px; color: #fff; }
.right-contrast .initial { left: -30px; color: #000; }

.words { z-index: 1; }

.meaning-item p {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 5px 0;
}

.description {
    text-align: center;
    color: #888;
    font-style: italic;
    margin-top: 40px;
}

/* About 페이지 추가 문구 스타일 */

.bio-content {
    margin-top: 50px; /* m/t 박스와의 간격 */
    max-width: 700px;  /* 글이 너무 길게 퍼지지 않도록 너비 제한 */
}

.bio-statement {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px; /* 다음 문장과 칸을 띄우는 설정 */
    color: #000;
    letter-spacing: -0.02em;
}

.bio-philosophy p {
    font-size: 0.8rem;
    line-height: 2;    /* 줄 간격을 넉넉하게 하여 가독성 높임 */
    color: #444;
    
    /* 자연스러운 줄바꿈을 위한 핵심 코드 */
    word-break: keep-all; 
    overflow-wrap: break-word;
}

/* About 페이지 전체 서체 통일 */
.profile-intro {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* 위쪽 문단과 자연스럽게 구분 */
}

/* 성함(안마리 | Marie Ahn)을 상단 '예술은...' 문구와 같은 결로 */
.profile-name {
    /* 기존 About 폰트 스타일 그대로 적용 */
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-top: 2px;
    margin-bottom: 15px;
}

/* 소개 문구를 위쪽 철학 문단과 같은 줄 간격으로 통일 */
.profile-text {
    /* 기존 About 폰트 스타일 그대로 적용 */
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
    font-size: 0.8rem;
    line-height: 2.2; /* 위쪽 철학 문단과 똑같은 줄 간격으로 통일 */
    color: #444;
    font-weight: 400;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
    letter-spacing: -0.01em;
}

/* --- 홈 화면: 고정 원석과 공전 궤도 (Orbit) 설정 --- */

/* 1. 무대 설정: 중앙 정렬 유지 */
.home-stage {
    position: relative;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 2. 원석과 궤도를 감싸는 컨테이너 */
.stone-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 600px;
}

/* 3. 중앙 고정 원석 (애니메이션 제거) */
.fixed-stone img {
    max-width: 320px;
    height: auto;
    position: relative;
    z-index: 2; /* 궤도 선보다 앞에 위치 */
}

/* --- 홈 화면: 고정 원석과 빛의 꼬리 궤도 설정 --- */

/* 1. 무대 및 컨테이너 설정 (기존 유지) */
.home-stage {
    position: relative;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.stone-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 600px;
}

/* 2. 중앙 고정 원석 (기존 유지) */
.fixed-stone img {
    max-width: 320px;
    height: auto;
    position: relative;
    z-index: 2;
}

/* 3. 기본 바탕이 되는 궤도 (얇은 점선, 회전 X) */
.orbit-circle {
    position: absolute;
    width: 450px;
    height: 450px;
    /* 아주 연하고 얇은 기본 점선 */
    border: 1px dashed #eee; 
    border-radius: 50%;
    z-index: 1;
    /* 중요: 여기서는 회전 애니메이션을 뺍니다 */
}

/* 4. 빛의 꼬리 효과 (가상 요소 사용) */
.orbit-circle::after {
    content: '';
    position: absolute;
    /* 기본 궤도와 완전히 겹치도록 위치 설정 */
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    
    /* 꼬리의 디자인: 조금 더 두껍고 진한 실선 */
    border: 2px solid #888; 
    
    /* 핵심 기술: 코닉 그라데이션 마스크 (빛이 서서히 사라지는 효과) */
    /* 90도 구간 동안 검은색(보임)에서 투명색(안 보임)으로 변합니다 */
    -webkit-mask-image: conic-gradient(from 0deg, transparent 0%, black 10%, transparent 90%);
    mask-image: conic-gradient(from 0deg, transparent 0%, black 10%, transparent 90%);
    
    /* 이 꼬리 부분만 회전시킵니다 */
    animation: rotateOrbit 20s linear infinite;
}

/* 회전 규칙 정의 */
@keyframes rotateOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* archive.html 전용: 도감형 그리드 스타일 */

.index-grid {
    display: grid;
    /* 가로로 6개의 똑같은 칸을 만듭니다 (레퍼런스와 유사) */
    grid-template-columns: repeat(6, 1fr); 
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    margin-top: 20px;
}

.grid-cell {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    aspect-ratio: 1 / 1.2; /* 세로가 약간 더 긴 직사각형 형태 */
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 내용 중앙 정렬 */
    align-items: center;
}

/* 왼쪽 상단의 작은 번호 */
.cell-num {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    color: #bbb;
    font-family: 'Helvetica', sans-serif;
}

/* 칸 내부 콘텐츠 스타일 */
.cell-content {
    width: 100%;
    text-align: center;
}

.cell-content img {
    max-width: 80%; /* 칸 안에 꽉 차지 않게 여백을 둠 */
    height: auto;
    filter: grayscale(100%); /* 흑백으로 처리하여 무드 통일 */
}

.cell-content h3 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.cell-content .desc {
    font-size: 0.65rem;
    line-height: 1.4;
    color: #666;
    word-break: keep-all;
}

/* --- About 페이지 연락처 스타일 --- */

.contact-section {
    margin-top: 40px; /* 자기소개 글과의 간격 */
    border-top: 1px solid #f0f0f0; /* 얇은 구분선 */
    padding-top: 25px;
}

.contact-item {
    margin-bottom: 12px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* 왼쪽의 라벨 (Instagram, Email) */
.contact-item .label {
    display: inline-block;
    width: 80px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase; /* 대문자로 표시하여 도감 같은 느낌 부여 */
    font-size: 0.75rem;
}

/* 실제 링크 주소 */
.contact-item a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

/* 마우스를 올렸을 때의 효과 */
.contact-item a:hover {
    color: #000;
    border-bottom: 1px solid #000;
}

.essay-post {
    max-width: 800px; /* 글 너비를 제한해서 읽기 편하게 만듭니다 */
    margin: 60px auto; /* 위아래 여백을 주고 가운데로 정렬합니다 */
    padding: 0 40px;
    line-height: 1.8; /* 줄 간격을 넉넉하게 줍니다 */
}

.essay-header {
    margin-bottom: 50px;
    border-bottom: 1px solid #eee; /* 제목 아래 얇은 선 */
    padding-bottom: 20px;
}

.essay-num { font-size: 0.8rem; color: #999; }
.essay-title { font-size: 2rem; margin-top: 10px; }
.essay-body p { margin-bottom: 30px; } /* 문단 사이 간격 */

/* 전시 포스트 내 이미지 스타일 */
.post-image-box {
    margin: 50px 0; /* 사진 위아래로 넉넉한 여백 */
    text-align: center;
}

.post-image-box img {
    max-width: 60%; /* 화면 너비를 넘지 않게 조절 */
    height: auto;
    border: 1px solid #f0f0f0; /* 아주 연한 테두리로 작품 경계 표시 */
}

.post-image-box figcaption {
    margin-top: 15px;
    font-size: 0.75rem; /* 작고 섬세한 글씨체 */
    color: #888;
    font-style: italic; /* 도록 느낌을 주는 기울임꼴 */
    letter-spacing: 0.05em;
}


/* style.css 맨 아래에 추가 */

/* --- 갤러리형 이미지 배치 (두 장 나란히 보기) --- */

/* 1. 두 사진을 감싸는 큰 상자 */
.two-up-gallery {
    display: flex;           /* 내용물을 가로로 나란히 배치하라는 명령 */
    justify-content: space-between; /* 두 사진 사이에 균등한 간격을 줍니다 */
    gap: 10px;               /* 사진 사이의 간격을 20px로 설정합니다 */
    margin: 50px 0;          /* 위아래 여백 */
}

/* 2. 나란히 배치될 때 각각의 사진 박스 스타일 조절 */
.two-up-gallery .post-image-box.item {
    flex: 1;                 /* 두 사진이 공간을 1:1로 공평하게 나눠 가집니다 */
    margin: 0;               /* 기존의 위아래 여백을 없애서 높이를 맞춥니다 */
}

/* (선택 사항) 모바일 화면에서는 다시 세로로 보이게 하기 */
@media (max-width: 768px) {
    .two-up-gallery {
        flex-direction: column; /* 좁은 화면에서는 세로로 쌓이게 변경 */
        gap: 20px;
    }
}