@charset "utf-8"; /* wr-sports 위젯 — 경기 카드 스킨(spa-card) 전용 스타일 REDESIGNED: 현대적·역동적 스포츠 카드 UI ───────────────────────────────────────── 색상 토큰 --spa-red : #f03055 홈팀 포인트 --spa-blue : #3b6ef5 원정팀 포인트 --spa-accent: #6366f1 브랜드 컬러 ───────────────────────────────────────── */ /* ═══════════════════════════════════════════ 0. 구글 폰트 (Barlow Condensed – VS 텍스트) ─ 이미 @import가 없다면 에 추가하거나 이 파일 상단에 아래 줄을 사용하세요. ═══════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&display=swap'); /* ═══════════════════════════════════════════ 1. 키프레임 ═══════════════════════════════════════════ */ @keyframes spaCardIn { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 60% { opacity: 1; transform: translateY(-2px) scale(1.005); } 100% { opacity: 1; transform: none; } } @keyframes spaPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } } @keyframes spaShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes spaHotBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,48,85,.5); } 50% { box-shadow: 0 0 0 5px rgba(240,48,85,0); } } @keyframes spaGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } /* ═══════════════════════════════════════════ 2. 래퍼 & 그리드 ═══════════════════════════════════════════ */ .wr-sports-spa.spa-list { padding: 4px 0 8px; } .wr-sports-spa .spa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; } /* ═══════════════════════════════════════════ 3. 카드 기본 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-card { position: relative; background: #ffffff; /* 그라디언트 테두리 효과 */ border: 1.5px solid transparent; background-clip: padding-box; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.07), 0 6px 24px rgba(99,102,241,.08); transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms ease, border-color 220ms ease; animation: spaCardIn 380ms cubic-bezier(.16,1,.3,1) both; /* 내부 pseudo-border로 그라디언트 보더 구현 */ } /* 카드 외곽 그라디언트 링 */ .wr-sports-spa .spa-card::after { content: ''; position: absolute; inset: -1.5px; border-radius: 19.5px; background: linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(240,48,85,.12) 50%, rgba(59,110,245,.18) 100%); z-index: -1; opacity: 0; transition: opacity 220ms ease; } .wr-sports-spa .spa-card:hover::after { opacity: 1; } .wr-sports-spa .spa-card:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 12px 36px rgba(99,102,241,.18), 0 4px 12px rgba(15,23,42,.08); border-color: rgba(99,102,241,.3); } /* 공지 카드 */ .wr-sports-spa .spa-card--notice { border-color: rgba(99,102,241,.22); background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 55%); } .wr-sports-spa .spa-card--notice::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Cpath d='M20 20L0 0h40z'/%3E%3C/g%3E%3C/svg%3E") repeat; pointer-events: none; z-index: 0; } /* ═══════════════════════════════════════════ 4. 내부 링크 래퍼 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-card__inner--list { display: flex; flex-direction: column; min-height: auto; align-items: stretch; text-decoration: none; color: inherit; position: relative; z-index: 1; } /* ═══════════════════════════════════════════ 5. 날짜 행 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-card__date-row { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(90deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%); background-size: 200% auto; padding: 8px 12px 7px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; animation: spaShimmer 3s linear infinite; } /* 달력 아이콘 */ .wr-sports-spa .spa-card__date-row::before { content: '📅'; font-size: .7rem; line-height: 1; margin-top:3px; } /* ═══════════════════════════════════════════ 6. 매치업 영역 (홈팀 VS 원정팀) ═══════════════════════════════════════════ */ .wr-sports-spa .spa-card__matchup { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 14px 16px; background: linear-gradient(160deg, #f8f9fe 0%, #eef0fb 100%); position: relative; overflow: hidden; } /* 배경 장식 — 다이나믹 사선 */ .wr-sports-spa .spa-card__matchup::before { content: ''; position: absolute; top: -20%; left: 35%; width: 30%; height: 140%; background: linear-gradient(180deg, rgba(99,102,241,.06) 0%, rgba(99,102,241,.0) 100%); transform: skewX(-12deg); pointer-events: none; } /* 상단 컬러 바 */ .wr-sports-spa .spa-card__inner--list .spa-card__matchup::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f03055 0%, #6366f1 50%, #3b6ef5 100%); border-radius: 0; } /* ═══════════════════════════════════════════ 7. 팀 공통 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-team { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; } /* ═══════════════════════════════════════════ 8. 팀 로고 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-team__logo { position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: visible; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #ff4060, #c1121f); box-shadow: 0 4px 14px rgba(240,48,85,.38), 0 0 0 3px rgba(240,48,85,.12); flex-shrink: 0; transition: transform 200ms ease, box-shadow 200ms ease; } .wr-sports-spa .spa-card:hover .spa-team__logo { transform: scale(1.08); box-shadow: 0 6px 20px rgba(240,48,85,.48), 0 0 0 4px rgba(240,48,85,.16); } .wr-sports-spa .spa-team__logo--away { background: linear-gradient(145deg, #4d8af5, #1d4ed8); box-shadow: 0 4px 14px rgba(59,110,245,.38), 0 0 0 3px rgba(59,110,245,.12); } .wr-sports-spa .spa-card:hover .spa-team__logo--away { box-shadow: 0 6px 20px rgba(59,110,245,.48), 0 0 0 4px rgba(59,110,245,.16); } .wr-sports-spa .spa-team__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; border-radius: 50%; } /* 리스트 모드 - 이미지 없을 때 */ .wr-sports-spa .spa-card__inner--list .spa-team__logo .spa-team__init { background: transparent; color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: -.01em; } /* ═══════════════════════════════════════════ 9. HOME / AWAY 라벨 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-team__lbl { position: absolute; top: -5px; right: -5px; font-size: .52rem; font-weight: 900; padding: 2px 6px; border-radius: 6px; line-height: 1.3; z-index: 2; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.18); letter-spacing: .04em; } .wr-sports-spa .spa-team__lbl--home { background: #e11d48; color: #fff; } .wr-sports-spa .spa-team__lbl--away { background: #1d4ed8; color: #fff; } /* ═══════════════════════════════════════════ 10. 팀 이름 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-team__name { font-size: .76rem; font-weight: 800; color: #1e2040; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; line-height: 1.2; transition: color 200ms ease; } .wr-sports-spa .spa-card:hover .spa-team--home .spa-team__name { color: #d31040; } .wr-sports-spa .spa-card:hover .spa-team--away .spa-team__name { color: #1740b8; } /* 이니셜 */ .wr-sports-spa .spa-team__init { font-size: .62rem; font-weight: 900; text-align: center; line-height: 1.1; color: #fff; letter-spacing: -.01em; } /* ═══════════════════════════════════════════ 11. VS 섹션 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-vs { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; position: relative; } .wr-sports-spa .spa-vs__txt { font-family: 'Barlow Condensed', 'Bebas Neue', 'Impact', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: .1em; line-height: 1; /* 그라디언트 텍스트 */ background: linear-gradient(135deg, #f03055 0%, #6366f1 50%, #3b6ef5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: spaPulse 2s ease-in-out infinite; filter: drop-shadow(0 1px 3px rgba(99,102,241,.25)); } /* VS 아래 시간 표시용 (옵션) */ .wr-sports-spa .spa-vs__time { font-size: .58rem; font-weight: 700; color: #94a3b8; letter-spacing: .04em; } /* ═══════════════════════════════════════════ 12. 통계 행 (조회 · 추천) ═══════════════════════════════════════════ */ .wr-sports-spa .spa-card__stats { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .7rem; font-weight: 600; color: #7c85a8; padding: 9px 12px 11px; background: #fff; border-top: 1px solid rgba(99,102,241,.08); letter-spacing: .01em; } /* 조회/추천 앞 아이콘 */ .wr-sports-spa .spa-card__stats::before { content: '👁'; font-size: .65rem; } .wr-sports-spa .spa-card__stats::after { content: '👍'; font-size: .65rem; order: 3; } /* ═══════════════════════════════════════════ 13. 뱃지 & 아이콘 (공지/HOT/NEW/SECRET) ═══════════════════════════════════════════ */ .wr-sports-spa .spa-badge { position: absolute; top: 38px; left: 10px; font-size: .58rem; font-weight: 900; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; z-index: 4; line-height: 1.6; box-shadow: 0 2px 8px rgba(79,70,229,.28); } .wr-sports-spa .spa-badge--notice { background: linear-gradient(90deg, #4f46e5, #818cf8); color: #fff; } .wr-sports-spa .ubg-icon { position: absolute; top: 38px; right: 10px; font-size: .6rem; font-weight: 900; padding: 3px 9px; border-radius: 999px; line-height: 1.6; z-index: 4; letter-spacing: .06em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .wr-sports-spa .ubg-icon--hot { background: linear-gradient(90deg, #f03055, #ff6580); color: #fff; animation: spaHotBlink 1.6s ease-in-out infinite; box-shadow: 0 2px 8px rgba(240,48,85,.38); } .wr-sports-spa .ubg-icon--new { background: linear-gradient(90deg, #6366f1, #818cf8); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.28); } .wr-sports-spa .ubg-icon--secret { background: rgba(71,85,105,.82); color: #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.18); } /* ═══════════════════════════════════════════ 14. 진입 딜레이 (스태거) ═══════════════════════════════════════════ */ .wr-sports-spa .spa-card:nth-child(1) { animation-delay: 0ms; } .wr-sports-spa .spa-card:nth-child(2) { animation-delay: 60ms; } .wr-sports-spa .spa-card:nth-child(3) { animation-delay: 120ms; } .wr-sports-spa .spa-card:nth-child(4) { animation-delay: 180ms; } .wr-sports-spa .spa-card:nth-child(5) { animation-delay: 240ms; } .wr-sports-spa .spa-card:nth-child(6) { animation-delay: 300ms; } .wr-sports-spa .spa-card:nth-child(7) { animation-delay: 360ms; } .wr-sports-spa .spa-card:nth-child(8) { animation-delay: 420ms; } .wr-sports-spa .spa-card:nth-child(9) { animation-delay: 480ms; } .wr-sports-spa .spa-card:nth-child(10) { animation-delay: 540ms; } /* ═══════════════════════════════════════════ 15. 더보기 버튼 재정의 ═══════════════════════════════════════════ */ .wr-sports-spa + div .btn-primary, section.wr-sports-spa ~ div .btn-primary { background: linear-gradient(90deg, #4f46e5, #6366f1) !important; border: none !important; border-radius: 999px !important; padding: 10px 32px !important; font-weight: 700 !important; font-size: .82rem !important; letter-spacing: .05em !important; box-shadow: 0 4px 14px rgba(99,102,241,.3) !important; transition: transform 180ms ease, box-shadow 180ms ease !important; } .wr-sports-spa + div .btn-primary:hover, section.wr-sports-spa ~ div .btn-primary:hover { transform: translateY(-2px) scale(1.04) !important; box-shadow: 0 8px 22px rgba(99,102,241,.42) !important; } .wr-sports-spa + div .btn-primary .fa, section.wr-sports-spa ~ div .btn-primary .fa { animation: spaGlow 1.6s ease-in-out infinite; } /* ═══════════════════════════════════════════ 16. 글 없음 메시지 ═══════════════════════════════════════════ */ .wr-sports-spa .spa-grid .text-muted { font-size: .82rem; color: #94a3b8 !important; padding: 2rem 1rem !important; } /* ═══════════════════════════════════════════ 17. 반응형 — 태블릿 (≤767px) ═══════════════════════════════════════════ */ @media (max-width: 767px) { .wr-sports-spa.spa-list { padding: 6px 8px 12px; } .wr-sports-spa .spa-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .wr-sports-spa .spa-team__logo, .wr-sports-spa .spa-team__logo--away { width: 48px; height: 48px; } .wr-sports-spa .spa-card__date-row { font-size: .68rem; padding: 7px 10px 6px; } .wr-sports-spa .spa-card__matchup { padding: 14px 10px 12px; gap: 10px; } .wr-sports-spa .spa-vs__txt { font-size: 1.2rem; } .wr-sports-spa .spa-team__name { font-size: .7rem; } } /* ═══════════════════════════════════════════ 18. 반응형 — 모바일 (≤640px) → 1열 / 가로형 레이아웃 ═══════════════════════════════════════════ */ @media (max-width: 640px) { .wr-sports-spa .spa-grid { grid-template-columns: 1fr; gap: 10px; } /* 모바일에서 매치업 가로 배치 */ .wr-sports-spa .spa-card__inner--list .spa-card__matchup { flex-direction: row; padding: 12px 14px; gap: 10px; align-items: center; } .wr-sports-spa .spa-card__inner--list .spa-team { flex-direction: row; flex: 0 0 auto; gap: 8px; align-items: center; } .wr-sports-spa .spa-card__inner--list .spa-team__logo, .wr-sports-spa .spa-card__inner--list .spa-team__logo--away { width: 40px; height: 40px; } .wr-sports-spa .spa-card__inner--list .spa-team__name { max-width: 72px; font-size: .72rem; text-align: left; } .wr-sports-spa .spa-team__logo, .wr-sports-spa .spa-team__logo--away { width: 40px; height: 40px; } .wr-sports-spa .spa-team__name { white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; } .wr-sports-spa .spa-vs { flex-direction: row; gap: 4px; align-items: center; } .wr-sports-spa .spa-vs__txt { font-size: 1.05rem; } .wr-sports-spa .spa-card__stats { font-size: .65rem; padding: 7px 10px 9px; gap: 10px; } } /* ═══════════════════════════════════════════ 19. prefers-reduced-motion 접근성 ═══════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .wr-sports-spa .spa-card, .wr-sports-spa .spa-card__date-row, .wr-sports-spa .spa-vs__txt, .wr-sports-spa .ubg-icon--hot, .wr-sports-spa .spa-team__logo { animation: none !important; transition: none !important; } }