@charset "utf-8";
/**
 * PHOTO ARCHIVE - style.css
 * 리스트 구분선 및 모바일 최적화 통합본
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Noto+Sans+KR:wght@400;700&display=swap');

/* 기본 설정 */
.photo_skin, .photo_skin * { box-sizing: border-box !important; margin: 0; padding: 0; }
.photo_skin { 
    max-width: 1200px; 
    margin: 50px auto; 
    padding: 0 20px; 
    background-color: #fcfcfc; 
    color: #2d3748; 
    font-family: 'Noto Sans KR', sans-serif; 
}

/* 상단 타이틀 영역 */
.photo_skin .archive-top { 
    margin-bottom: 30px; 
    border-bottom: 3px solid #1a202c; 
    padding-bottom: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
}
.photo_skin .archive-top h2 { font-size: 22px; font-weight: 800; }
.photo_skin .archive-top h2 small { font-size: 14px; color: #718096; font-weight: 400; margin-left: 10px; }

/* 리스트 그리드 레이아웃 */
.photo_skin .pg-wrapper { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px 20px; 
    margin-bottom: 50px; 
}

/* 카드 아이템 및 구분선 */
.photo_skin .pg-item-wrap { 
    display: flex; 
    flex-direction: column; 
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2f7; /* 리스트 목록 구분선 추가 */
}

/* 태그 디자인 (DOC.ID / TYPE) */
.photo_skin .pg-tags { display: flex; align-items: flex-end; margin-left: -1px; }
.photo_skin .tag-id, .photo_skin .tag-type { 
    padding: 6px 12px; 
    font-size: 10px; 
    font-weight: 700; 
    border: 1px solid #e2e8f0; 
    border-bottom: none; 
    border-radius: 8px 8px 0 0; 
    line-height: 1; 
}
.photo_skin .tag-id { background: #e2e8f0; color: #4a5568; font-family: 'JetBrains Mono'; margin-right: -1px; }
.photo_skin .tag-type { background: #f1f5f9; color: #3b82f6; }

/* 카드 본체 */
.photo_skin .pg-card { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: #fff; 
    border: 1px solid #e2e8f0; 
    border-radius: 0 12px 12px 12px; 
    padding: 12px; 
    transition: 0.3s; 
}
.photo_skin .pg-thumb img { width: 100%; border-radius: 8px; display: block; }
.photo_skin .pg-title { 
    font-size: 15px; 
    font-weight: 700; 
    line-height: 1.4; 
    margin: 12px 0; 
    color: #1a202c; 
    text-decoration: none !important; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    min-height: 42px; 
}

/* 기간 정보 및 상태 배지 */
.photo_skin .pg-period-info { 
    background: #f8fafc; 
    padding: 8px 10px; 
    border-radius: 6px; 
    font-size: 10px; 
    color: #64748b; 
    margin-top: auto; 
    margin-bottom: 15px; 
    border: 1px solid #f1f5f9; 
    font-family: 'JetBrains Mono'; 
}
.photo_skin .pg-badge { font-size: 9px; font-weight: 800; padding: 2px 6px; border: 1px solid; border-radius: 3px; font-family: 'JetBrains Mono'; }
.photo_skin .bg-active { color: #2f855a; border-color: #9ae6b4; }
.photo_skin .bg-before { color: #d69e2e; border-color: #f6e05e; }
.photo_skin .bg-expired { color: #e53e3e; border-color: #feb2b2; }

/* 하단 등록 버튼 */
.photo_skin .btn-register { 
    display: inline-block;
    padding: 15px 30px;
    background: #1a202c;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    font-family: 'JetBrains Mono';
}

/* ============================================================
   모바일 최적화 대응 (640px 이하)
   ============================================================ */
@media (max-width: 1024px) { 
    .photo_skin .pg-wrapper { grid-template-columns: repeat(2, 1fr); gap: 20px; } 
}

@media (max-width: 640px) { 
    /* 상단 헤더 글자 위치 조정 */
    .photo_skin .archive-top { 
        flex-direction: column; 
        align-items: flex-start !important; 
        gap: 8px; 
    }
    .photo_skin .archive-top h2 { font-size: 18px; }
    .photo_skin .archive-top h2 small { display: block; margin-left: 0; margin-top: 4px; }

    /* 리스트 1열 배치 및 구분선 간격 확대 */
    .photo_skin .pg-wrapper { 
        grid-template-columns: 1fr !important; 
        gap: 0 !important; 
    } 
    .photo_skin .pg-item-wrap { 
        padding-bottom: 30px !important; 
        margin-bottom: 30px !important; 
    }

    /* 모바일 제목 폰트 가독성 상향 */
    .photo_skin .pg-title { font-size: 16px !important; min-height: auto !important; }
    
    /* 하단 버튼 꽉 차게 변경 */
    .photo_skin .btn-register { width: 100%; text-align: center; }
}