/* 사이트 공통 움직임 (메인·읽을거리·약관 모두 이 파일 하나를 불러옴). 튀지 않게 짧고 부드럽게 */
:root { --ease: cubic-bezier(.22,.61,.36,1); --egg-hover:#7E52B8; --egg-deep:#4E2A7C; --tint:#FAF6FF; }

/* 페이지가 열릴 때 살며시 떠오름 */
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
main > * { animation: rise .5s var(--ease) both; }
main > *:nth-child(2) { animation-delay: .06s; }
main > *:nth-child(3) { animation-delay: .12s; }
main > *:nth-child(4) { animation-delay: .18s; }
main > *:nth-child(n+5) { animation-delay: .24s; }

/* 링크: 색이 부드럽게 바뀌고 밑줄이 그어짐 */
a { transition: color .2s var(--ease), background-size .25s var(--ease); }
main a:not(.btn):hover { color: var(--egg-deep); }
main a:not(.btn) { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; }
main a:not(.btn):hover, main a:not(.btn):focus-visible { background-size: 100% 1.5px; }

/* 카드·글 상자: 올리면 살짝 뜨고 그림자가 늘어남 */
.card, article { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease); }

/* 버튼: 올리면 뜨고 누르면 눌림 (앱의 도트 버튼과 같은 느낌) */
.btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s var(--ease); }
.btn:not(.off):active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); transition-duration: .06s; }

/* 마우스가 있는 기기에서만: 올리면 살짝 뜨고 한 가지 색 계열(가지 보라)로 은은하게 물듦. 휴대폰은 누를 때만 반응 */
@media (hover: hover) {
  .card:hover, article:hover { transform: translate(-2px,-3px); border-color: var(--egg); background-color: var(--tint); box-shadow: 7px 8px 0 var(--egg); }
  .btn:not(.off):hover { transform: translate(-2px,-2px); background-color: var(--egg-hover); box-shadow: 5px 5px 0 var(--ink); }
}

/* 목록 줄: 올리면 살짝 오른쪽으로 */
.more li, main ul li { transition: transform .2s var(--ease); }
@media (hover: hover) { .more li:hover { transform: translateX(4px); } }

/* 표: 올린 줄이 은은하게 밝아짐 */
table tr { transition: background-color .2s var(--ease); }
table tr:hover td { background-color: rgba(107,63,160,.06); }

/* 메인 카드의 가지 신령: 숨 쉬듯 두 장면을 오감 (스프라이트 시트 앞 2프레임) */
@keyframes idle { from { background-position: 0 0; } to { background-position: -128px 0; } }
.sprite:not(.none) { animation: idle 1.4s steps(2) infinite; }

/* 움직임을 줄여 달라는 기기 설정을 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}