/* 기획전·덤증정 이벤트 목록 머리: 목록 상단 이미지 바로 아래에 분류 탭이 간격 없이 붙는다 */ .event-list-head { margin: 0 0 24px; padding: 0; } .event-list-head .event-list-image { margin: 0; padding: 0; line-height: 0; text-align: center; } .event-list-head .event-list-image img { display: block; width: 100%; height: auto; margin: 0; } .event-category-tabs { margin: 0; padding: 0; } .event-category-tabs ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0 0 0 1px; list-style: none; } .event-category-tabs li { position: relative; flex: 1 1 auto; margin: 0 0 -1px -1px; padding: 0; } .event-category-tabs li a { display: block; height: 44px; margin: 0; padding: 0 18px; border: 1px solid #c1c1c1; background: #fafafa; color: #888; font-size: 0.9375rem; line-height: 42px; text-align: center; text-decoration: none; white-space: nowrap; } .event-category-tabs li a:hover { color: #111; } .event-category-tabs li.active { z-index: 2; } .event-category-tabs li.active a { border-color: #303030; background: #fff; color: #111; font-weight: 600; } /* 모바일: 한 줄 가로 스크롤 밑줄 탭 */ .event-list-head.mobile { margin: 0 0 12px; } .event-list-head.mobile .event-category-tabs { border-bottom: 1px solid #eee; background: #fff; } .event-list-head.mobile .event-category-tabs ul { flex-wrap: nowrap; padding: 0 6px; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .event-list-head.mobile .event-category-tabs ul::-webkit-scrollbar { display: none; } .event-list-head.mobile .event-category-tabs li { flex: 0 0 auto; margin: 0; } .event-list-head.mobile .event-category-tabs li a { height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #666; font-size: 0.9286rem; line-height: 44px; } .event-list-head.mobile .event-category-tabs li.active a { border-bottom-color: var(--point-color, #111); background: transparent; color: #111; font-weight: 600; } /* 기획전 전체 목록(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); } }