.board {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px; /* CLICK과 텍스트 간격 축소 */
overflow: visible; /* 박스 영역 제한 해제 */
padding: 0; /* 패딩 제거 */
border-radius: 0; /* 둥근 모서리 제거 */
border: none; /* 테두리 제거 */
background-color: white; /* 배경 제거 */
box-shadow: none; /* 그림자 제거 */
cursor: pointer;
transition: transform 180ms ease;
}
.board:hover {
transform: translateY(-3px) scale(1.02);
}
.board:focus,
.board:focus-visible {
outline: none; /* 포커스 아웃라인 제거 */
}
/* CLICK 배지 */
.cta-badge {
padding: 6px 14px;
border-radius: 999px;
background: #e50914;
color: #fff;
font-size: 16px;
font-weight: 900;
letter-spacing: 0.5px;
box-shadow: none;
animation: badgePulse 1.3s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
/* 텍스트: 20px로 확대, 볼드 제거, 배지와 간격 조정 */
.cta-text {
position: relative;
/* margin-left: auto; 제거하여 배지 옆으로 붙게 함 */
display: inline-block;
white-space: nowrap;
font-size: 20px; /* 글자 크기 20px */
font-weight: 400; /* 볼드 제거 */
letter-spacing: 0.2px;
background: linear-gradient(90deg, #ff3d00, #ffea00, #00e5ff, #7c4dff, #ff3d00);
background-size: 300% 100%;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 0.9px rgba(0,0,0,0.8);
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
animation: moveGradient 4s linear infinite, blinkTwice 5.6s linear infinite;
}
/* 텍스트 샤인 바 */
.cta-text::after {
content: "";
position: absolute;
top: 50%;
left: -25%;
width: 50%;
height: 70%;
transform: translateY(-50%) skewX(-18deg);
border-radius: 12px;
background: linear-gradient(115deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,0.55) 50%,
rgba(255,255,255,0) 60%);
mix-blend-mode: screen;
pointer-events: none;
animation: textShine 2.6s ease-in-out infinite;
}
@keyframes moveGradient {
0% { background-position: 0% 0%; }
100% { background-position: 100% 0%; }
}
@keyframes textShine {
0% { transform: translate(-120%, -50%) skewX(-18deg); opacity: 0.0; }
10% { opacity: 0.9; }
60% { transform: translate(120%, -50%) skewX(-18deg); opacity: 0.9; }
100% { opacity: 0.0; }
}
@keyframes blinkTwice {
0%, 86% { opacity: 1; }
88% { opacity: 0; }
90% { opacity: 1; }
92% { opacity: 0; }
94%, 100% { opacity: 1; }
}
/* 폴백: 텍스트 클리핑 미지원 시 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.cta-text {
color: #FFFF00 !important;
-webkit-text-fill-color: #FFFF00 !important;
background: none;
-webkit-text-stroke: 0;
text-shadow: 0 2px 6px rgba(0,0,0,0.45);
animation: blinkTwice 5.6s linear infinite;
}
.cta-text::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cta-badge, .cta-text, .cta-text::after { animation: none; }
}