/** * v7/widgets/home/home-widget.css * * home 모듈 위젯 전체 CSS. * 뉴스 탭, 최신 게시글 카드, 인기 게시글 순위, 모바일 배너 등 홈페이지 콘텐츠 위젯의 스타일을 모아 관리한다. * * 이 파일은 layout.php의 에서 로드된다. * * @see v7/widgets/home/*.php */ /* ===== 홈페이지 콘텐츠 ===== */ .v7-home-content { padding: 0; } /* ===== 뉴스 탭 ===== */ .v7-news-tabs .tab-header { display: flex; gap: 0.5rem; border-bottom: 2px solid var(--wa-color-neutral-90, #e5e7eb); margin-bottom: 1rem; padding: 0 0.25rem; } .v7-news-tabs .tab-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.85rem; border: none; background: transparent; cursor: pointer; font-size: 0.95rem; font-weight: 500; color: var(--wa-color-text-quiet, #6b7280); position: relative; transition: color 0.2s ease; white-space: nowrap; } .v7-news-tabs .tab-btn:hover { color: var(--wa-color-brand-50, #3178c0); } .v7-news-tabs .tab-btn.active { color: var(--wa-color-brand-50, #3178c0); font-weight: 600; } /* 활성 탭 파란색 하단 인디케이터 */ .v7-news-tabs .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--wa-color-brand-50, #3178c0); border-radius: 3px 3px 0 0; } .v7-news-tabs .tab-btn i { font-size: 0.9rem; } .v7-news-tabs .tab-content { padding: 0.75rem 0; } /* 뉴스 탭 2컬럼 레이아웃: 왼쪽 썸네일 + 오른쪽 불릿 리스트 */ .v7-news-tabs .news-layout { display: flex; gap: 1.25rem; align-items: flex-start; } .v7-news-tabs .news-thumb { flex-shrink: 0; width: 200px; } .v7-news-tabs .news-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; } .v7-news-tabs .news-thumb-caption { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--wa-color-text, #222); } .v7-news-tabs .news-thumb-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .v7-news-tabs .news-thumb-link:hover { color: var(--wa-color-brand-50, #3178c0); } .v7-news-tabs .news-list { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; } .v7-news-tabs .news-list-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0.4rem; font-size: 0.88rem; line-height: 1.4; color: var(--wa-color-text, #333); text-decoration: none; border-radius: 4px; transition: color 0.2s ease, background 0.15s ease; } .v7-news-tabs .news-list-item:hover { color: var(--wa-color-brand-50, #3178c0); background: var(--wa-color-neutral-95, rgba(0, 0, 0, 0.02)); } .v7-news-tabs .news-list-item::before { content: '•'; color: var(--wa-color-text-quiet, #9ca3af); font-size: 0.9rem; flex-shrink: 0; } /* 뉴스 목록 제목 줄임표 */ .v7-news-tabs .news-list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 뉴스 목록 댓글 수 배지 */ .v7-news-tabs .news-comment-badge { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--wa-color-brand-50, #3178c0); background: var(--wa-color-brand-95, #e7f5ff); padding: 0.1rem 0.4rem; border-radius: 4px; line-height: 1.4; } /* 모바일: 탭 아이콘 숨김 + 사진 왼쪽-글 오른쪽 유지 */ @media (max-width: 767px) { .v7-news-tabs .tab-btn i { display: none; } .v7-news-tabs .news-layout { flex-direction: row; } .v7-news-tabs .news-thumb { width: 120px; } .v7-news-tabs .news-thumb-caption { font-size: 0.8rem; } } /* ===== 최신 게시글 2열 카드 ===== */ .v7-posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v7-gap); margin: var(--v7-gap) 0; } @media (max-width: 767px) { .v7-posts-grid { grid-template-columns: 1fr; } } .v7-post-card { border: none; box-shadow: none; border-radius: 8px; overflow: hidden; background: var(--wa-color-neutral-95, #f8f9fa); } .v7-post-card .card-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.85rem; font-weight: 600; font-size: 0.92rem; background: var(--wa-color-neutral-fill-quiet, #f0f0f0); border-bottom: none; color: var(--wa-color-text, #222); } .v7-post-card .card-header .card-header-left { display: flex; align-items: center; gap: 0.4rem; } .v7-post-card .card-header .card-header-left i { color: var(--wa-color-brand-50, #3178c0); font-size: 0.9rem; } /* 더보기 링크 */ .v7-card-more-link { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; font-weight: 500; color: var(--wa-color-brand-50, #3178c0); text-decoration: none; transition: color 0.2s ease; } .v7-card-more-link:hover { color: var(--wa-color-brand-40, #1d5fa0); } .v7-card-more-link i { font-size: 0.65rem; } .v7-post-card .card-body { padding: 0.35rem 0; } .v7-post-card .post-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.85rem; font-size: 0.88rem; color: var(--wa-color-text, #333); text-decoration: none; border-radius: 4px; transition: background 0.15s ease, color 0.2s ease, transform 0.15s ease; } .v7-post-card .post-item::before { content: '•'; color: var(--wa-color-text-quiet, #9ca3af); font-size: 0.9rem; flex-shrink: 0; } .v7-post-card .post-item:hover { background: var(--wa-color-neutral-90, rgba(0, 0, 0, 0.04)); color: var(--wa-color-brand-50, #3178c0); transform: translateX(3px); } /* 게시글 제목 줄임표 */ .v7-post-card .post-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 댓글 수 배지 */ .v7-post-card .post-comment-badge { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--wa-color-brand-50, #3178c0); background: var(--wa-color-brand-95, #e7f5ff); padding: 0.1rem 0.4rem; border-radius: 4px; line-height: 1.4; } /* 빈 상태 */ .v7-latest-empty { text-align: center; color: var(--wa-color-text-quiet, #999); padding: 1.5rem 0; } .v7-latest-empty i { font-size: 1.5rem; display: block; margin-bottom: 0.4rem; opacity: 0.5; } .v7-latest-empty p { font-size: 0.82rem; margin: 0; opacity: 0.75; } /* ===== 인기 게시글 위젯 ===== */ .v7-popular-posts-widget { margin: var(--v7-gap) 0; } /* 헤더: 🔥 인기 게시글 / 최근 30일 — 보더 없이 여백으로 구분 */ .v7-popular-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.6rem; margin-bottom: 0.35rem; } .v7-popular-header-left { display: flex; align-items: center; gap: 0.45rem; font-size: 1.1rem; font-weight: 700; color: var(--wa-color-text, #222); } .v7-popular-fire-icon { color: #dc2626; font-size: 1.1rem; } .v7-popular-header-right { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--wa-color-text-quiet, #999); font-weight: 400; } /* 더보기 링크 */ .v7-popular-more-link { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.82rem; color: var(--wa-color-brand-50, #3178c0); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .v7-popular-more-link:hover { color: var(--wa-color-brand-40, #1d5fa0); } .v7-popular-more-link i { font-size: 0.68rem; } /* 목록 */ .v7-popular-list { display: flex; flex-direction: column; gap: 2px; } /* 각 아이템 — 구분선 없이 여백 + 호버 배경으로 구분 */ .v7-popular-posts-widget .v7-popular-item { display: flex !important; align-items: center; gap: 0.7rem; padding: 0.6rem 0.5rem; text-decoration: none; color: inherit; border-radius: 8px; transition: background 0.2s ease; } .v7-popular-item:hover { background: var(--wa-color-neutral-95, rgba(0, 0, 0, 0.03)); } /* 순위 뱃지 (원형) */ .v7-popular-rank { min-width: 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--wa-color-text-quiet, #9ca3af); color: #fff; border-radius: 50%; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; } .v7-popular-rank.top3 { background: var(--wa-color-brand-50, #3178c0); } /* 썸네일 — span 태그이므로 display: block 필수 */ .v7-popular-thumb { display: block; flex-shrink: 0; width: 56px; min-width: 56px; height: 56px; border-radius: 8px; overflow: hidden; } .v7-popular-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .v7-popular-item:hover .v7-popular-thumb img { transform: scale(1.05); } /* 게시글 정보 */ .v7-popular-info { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; overflow: hidden; gap: 0.3rem; } /* 제목 */ .v7-popular-title { display: block; font-size: 0.95rem; font-weight: 500; line-height: 1.45; color: var(--wa-color-text, #222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v7-popular-item:hover .v7-popular-title { color: var(--wa-color-brand-50, #3178c0); } /* 메타 정보 (댓글 수 + 좋아요 + 시간) */ .v7-popular-meta { display: flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--wa-color-text-quiet, #999); } .v7-popular-comments i, .v7-popular-time i, .v7-popular-good i { font-size: 0.76rem; margin-right: 0.2rem; opacity: 0.8; } /* 댓글 수 색상 (10개 이상: 빨강, 5개 이상: 파랑) */ .v7-popular-comments.hot { color: #dc2626; font-weight: 600; } .v7-popular-comments.warm { color: var(--wa-color-brand-50, #3178c0); font-weight: 600; } /* 좋아요 */ .v7-popular-good { color: var(--wa-color-brand-50, #3178c0); font-weight: 500; } /* 시간 */ .v7-popular-time { opacity: 0.7; font-size: 0.8rem; } /* 빈 상태 */ .v7-popular-empty { text-align: center; color: var(--wa-color-text-quiet, #999); padding: 2.5rem 0; } .v7-popular-empty i { font-size: 2rem; display: block; margin-bottom: 0.5rem; opacity: 0.5; } .v7-popular-empty p { font-size: 0.85rem; margin: 0; opacity: 0.75; } /* ===== 모바일 배너 그리드 ===== */ .v7-mobile-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--v7-gap); } .v7-mobile-wing-banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--v7-gap); }