@charset "utf-8"; /* ----------------------------- 애니메이션 제어 (CSS 변수 오버라이드) ----------------------------- */ /* JS에서 태그에 .disable-animation 클래스를 붙이면 동작 */ html.disable-animation *, html.disable-animation *::before, html.disable-animation *::after { /* 모든 애니메이션과 트랜지션을 강제로 끕니다 */ transition-duration: 0s !important; animation-duration: 0s !important; /* 사용자가 정의한 CSS 변수 강제 초기화 */ --motion-duration: 0s !important; } /* 앱실행창 */ @keyframes slide-up {0% {transform:scale(0.7) translateY(200px);opacity:0;}100% {transform:scale(1) translateY(0);opacity:1;}} @keyframes slide-down {0% {transform:scale(1) translateY(0);opacity:1;}100% {transform:scale(0.7) translateY(200px);opacity:0;}} @keyframes openWindow {0% {opacity:0; transform:scale(0.92);}100% {opacity:1; transform:scale(1);}} @keyframes closeWindow {0% {opacity:1; transform:scale(1);}100% {opacity:0; transform:scale(0.92);}} @keyframes shake-anim {0%, 100% {transform:translateX(0);opacity:1;}20% {transform:translateX(-4px) rotate(-1deg);opacity:1;}40% {transform:translateX(4px) rotate(1deg)}60% {transform:translateX(-2px);opacity:1;}80% {transform:translateX(2px);opacity:1;}} /* window active */ @keyframes pulse-green {0% {box-shadow:0 0 0 0 rgba(16, 185, 129, 0.4)}70% {box-shadow:0 0 0 6px rgba(16, 185, 129, 0)}100% {box-shadow:0 0 0 0 rgba(16, 185, 129, 0)}} @keyframes pulse-ring {0% {transform:scale(0.8); opacity:1}100% {transform:scale(2.0); opacity:0}} @keyframes plusPulse {0%, 100% {transform:scale(1); opacity:0.6}50% {transform:scale(1.2); opacity:0.9}} @keyframes loadProgress { from { width: 0; } } /* exp */ @keyframes slideUpFadeIn {0% {opacity:0; transform:translateY(15px)} 100% {opacity:1; transform:translateY(0)} } /* left panel */ @keyframes smoothFadeIn {from {opacity:0; transform:translateY(20px)}to {opacity:1; transform:translateY(0)} } /* grid apps */ @keyframes popIn {0% {transform:scale(0); opacity:0}60% {transform:scale(1.2)}100% {transform:scale(1); opacity:1}} /* app delete */ @keyframes fastshake {0%, 100% {transform:rotate(-2deg)}50% {transform:rotate(2deg)} } /* app select*/ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* loading */ @keyframes rocketShake { 0% { transform: translate(-5px, 5px) scale(1) rotate(45deg); } 15% { transform: translate(-11px, 11px) scale(0.9) rotate(45deg); } 25% { transform: translate(5px, -5px) scale(1.1) rotate(45deg); } 30% { transform: translate(3px, -3px) scale(1.1) rotate(45deg); } 70% { transform: translate(-5px, 5px) scale(1) rotate(45deg); } 100% { transform: translate(-5px, 5px) scale(1) rotate(45deg); } } @keyframes fadeIn {to {opacity:1}} /*tab, app iframe */ @keyframes fadeOut {to {opacity:0; visibility:hidden}} @keyframes modalFadeIn {from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }to { opacity: 1; transform: translate(-50%, -50%) scale(1); }} /* system modal o */ @keyframes modalFadeOut {from { opacity: 1; transform: translate(-50%, -50%) scale(1); }to { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }} /* system modal c */ .shake-anim {animation:shake-anim var(--motion-duration) var(--motion) both !important} .slide-up {animation:slide-up var(--motion-duration) var(--motion) both}