/* 기획전 전체 목록(PC): 갤러리형 카드 그리드 */ #plan-index-page { padding-bottom: 40px; } /* 카드 그리드 — PC 4열 */ #plan-index-page .plan-card-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; list-style: none; margin: 18px 0 0; padding: 0; } #plan-index-page .plan-card-item { margin: 0; } #plan-index-page .plan-card { display: block; color: inherit; text-decoration: none; } /* 썸네일 — 4:3 비율 고정, 이미지 커버 */ #plan-index-page .plan-card-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #eee; border-radius: 8px; background: #f7f7f7; } #plan-index-page .plan-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } /* 호버 확대는 마우스 기기에서만. 터치에서는 스크롤 중 :hover 가 연쇄로 걸려 카드마다 합성 레이어가 생기고, 넘치면 썸네일 칸이 빈 채로 남는다 */ @media (hover: hover) and (pointer: fine) { #plan-index-page .plan-card:hover .plan-card-thumb img { transform: scale(1.04); } } /* 노이미지 플레이스홀더 */ #plan-index-page .plan-card-thumb .no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #cfcfcf; font-size: 40px; } /* 카드 정보 */ #plan-index-page .plan-card-info { padding: 12px 4px 0; } #plan-index-page .plan-card-title { display: block; font-size: 15px; font-weight: 600; color: #222; line-height: 1.4; /* 2줄 말줄임 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* hover 시 밑줄 제거 — 색만 진하게 */ #plan-index-page .plan-card:hover .plan-card-title { color: #000; text-decoration: none; } /* 데이터 없음 */ #plan-index-page .list-no-data { } #plan-index-page .list-no-data i { } /* 페이지네이션 여백 */ #plan-index-page .pagination { margin-top: 36px; } /* 좁은 데스크톱 — 3열 */ @media (max-width: 1100px) { #plan-index-page .plan-card-list { grid-template-columns: repeat(3, 1fr); } }