/* ========================================
   프로젝트 페이지 스타일 (Project Page Styles)
   ======================================== */

/* 전역 리셋: body 기본 여백 제거 및 박스 사이징 통일 */
html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  /* 필요시 overflow-x:hidden으로 오른쪽 스페이스를 숨김 */
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: inherit; }

/* 안정적 간격 변수 (상단에 선언) */
:root {
    --project-gap: 12px;
}

/* 프로젝트 갤러리 스타일 */
.project-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--project-gap);
    box-sizing: border-box;
    justify-content: flex-start;
    width: 100%;            /* 명시적으로 컨테이너 너비 고정 */
    margin: 0;              /* 혹시 인라인 여백이 있으면 제거 */
    padding: 0;             /* 컨테이너 패딩이 너비 계산에 영향을 주지 않도록 기본 제거 */
    overflow-x: visible;    /* overflow-x:hidden은 위에서 이미 처리했으므로 기본은 visible */
}

.project-item {
    box-sizing: border-box;
    flex: 0 0 calc((100% - (2 * var(--project-gap))) / 3);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    container-type: inline-size; /* 컨테이너 쿼리 활성화 */
}

.project-item a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* 인라인 이미지 하단 여백 방지 */
}

/* 프로젝트 제목 스타일 */
.project-title {
    /* 갤러리 아이템 너비의 8%로 조절 (실제 아이템 크기에 비례) */
    font-size: clamp(10px, 8cqw, 13px);
    color: #666;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: normal;
    /* 한 줄 고정 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 프로젝트 페이지 반응형 */
@media (max-width: 768px) {
    .project-gallery {
        gap: var(--project-gap);
        justify-content: flex-start; /* 반드시 flex-start 유지 */
    }

    /* 2열 계산: 각 아이템 너비 = (100% - gap) / 2 */
    .project-item {
        flex: 0 0 calc((100% - var(--project-gap)) / 2);
    }
    
    .project-title {
        font-size: clamp(9px, 10cqw, 12px); /* 모바일에서 비율 조정 */
    }
}