/* 기본 리셋 및 폰트 설정 */
* { margin: 0; padding: 0; box-box: border-box; }
body { 
    font-family: 'Noto Sans KR', sans-serif; 
    background-color: #ffffff; 
    color: #111111;
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* 레이아웃 컨테이너 */
#wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* 헤더 스타일 */
#header { padding: 40px 0; border-bottom: 1px solid #f0f0f0; }
.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.logo a { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; text-transform: uppercase; }
.nav ul { display: flex; list-style: none; }
.nav ul li { margin-left: 20px; }
.nav ul li a { font-size: 15px; color: #666; font-weight: 500; }
.nav ul li a:hover { color: #111; }

/* 메인 컨테이너 */
#container { padding: 40px 0; min-height: 600px; }

/* 포트폴리오 그리드 (반응형의 핵심) */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 기본 PC 화면: 3열 */
    gap: 25px; /* 사진 사이 간격 */
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
}

/* 썸네일 비율 유지 (4:5 비율 예시 - 인물/프로필 사진에 적합) */
.thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 125%; /* 4:5 비율 (가로 100 : 세로 125) */
    overflow: hidden;
}
.thumb-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채움 */
    transition: transform 0.5s ease;
}

/* 마우스 오버 시 사진 확대 효과 */
.portfolio-item:hover .thumb-wrap img {
    transform: scale(1.05);
}

/* 마우스 오버 시 정보 레이어(오버레이) */
.item-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 어두운 반투명 배경 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 20px;
}
.portfolio-item:hover .item-overlay { opacity: 1; }

.item-info h3 { color: #fff; font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.item-info p { color: #ccc; font-size: 13px; }

/* 상세 페이지 스타일 */
.article-detail { max-width: 800px; margin: 0 auto; padding: 20px 0; }
.article-header { margin-bottom: 40px; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.article-header h2 { font-size: 28px; font-weight: 600; margin-bottom: 10px; }
.article-meta { font-size: 14px; color: #888; }
.article-body { font-size: 16px; line-height: 1.8; color: #333; }
.article-body img { margin: 20px auto; }

/* 푸터 스타일 */
#footer { padding: 40px 0; text-align: center; border-top: 1px solid #f0f0f0; color: #888; font-size: 13px; }

/* ------------------------------------------------
   반응형 미디어 쿼리 (Responsive Media Queries)
------------------------------------------------ */

/* 태블릿 화면 (화면 폭 1024px 이하) */
@media screen and (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2열로 변경 */
        gap: 15px;
    }
    .logo a { font-size: 22px; }
}

/* 모바일 화면 (화면 폭 768px 이하) */
@media screen and (max-width: 768px) {
    #header { padding: 25px 0; }
    .header-container { flex-direction: column; text-align: center; }
    .nav { margin-top: 15px; }
    .nav ul li { margin: 0 10px; }
    
    .portfolio-grid {
        grid-template-columns: repeat(1, 1fr); /* 1열로 변경 (세로로 길게) */
        gap: 15px;
    }
    .article-header h2 { font-size: 22px; }
}