@tailwind base; @tailwind components; @tailwind utilities; /* 색상 변수 정의 */ :root { --disable-light: #F8F8F8; --disable-normal: #B8B9B4; --disable-dark: #8A8B87; --disable-darker: #40413F; --point-light: #F9FBFF; --point-normal: #C2D6FA; --point-dark: #92A1BC; --point-darker: #444B58; --text-title: #1D1D1D; --text-detail: #545454; --text-disabled: #8E8E8E; --text-white: #FFFFFF; --text-black: #000000; --text-border: #C6C6C6; } /* 클리핑 애니메이션 (왼쪽부터 점점 보임) */ @keyframes clipReveal { from { clip-path: inset(0 100% 0 0); /* 왼쪽만 남기고 나머지 잘라냄 */ } to { clip-path: inset(0 0 0 0); /* 전체 다 보임 */ } } .clip-reveal { animation: clipReveal 2500ms ease forwards; } /* 텍스트 블링크 */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .animate-blink { animation: blink 1.2s infinite; } /* 로고 마스크 설정 */ .mask-logo { -webkit-mask-image: url('/logo.png'); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; mask-image: url('/logo.png'); mask-size: cover; mask-repeat: no-repeat; mask-position: center; }