/* 분석관리 첫 화면 움직임 — 화면 스크립트가 #mainContent 에 anm(움직여도 됨) · anm-in(처음 여는 중) · anm-data(요약이 막 들어옴) 을 붙이고 뗀다.
   ① 이번 달 챙길 것: 줄이 차례로 들어오고 아이콘이 톡 · 한 번 딩 흔들림, 개수 톡 (모두 끝이면 ✓ 가 그어지고 초록 물결)
   ② 칸 셋이 물결처럼 올라오고 동그라미가 톡
   ③ 작은 선 그래프가 왼쪽부터 그려지고 전망 점선이 이어짐, 끝점이 톡 · 물결 한 번
   ④ 숫자가 0 에서 올라감 (JS)  ⑤ 전망이 오르면 ▲ 가 위로, 내리면 ▼ 가 아래로 톡
   ⑥ 정산서 '아직' 알약이 톡 · 한 번 흔들림 (다 올렸으면 반짝)
   ⑦ 손끝: 칸 위에서 마우스를 움직이면 선 그래프 위 점이 따라감
   탭마다 처음 한 번. 계속 움직이는 것은 없다. 움직임 줄이기 · 태극이면 anm 이 붙지 않는다. */
#mainContent { --anm-ease: cubic-bezier(.22, 1, .36, 1); --anm-spring: cubic-bezier(.34, 1.56, .64, 1); }
a.tile .gl .sp { position: relative; }
.anm-end, .anm-cur { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); pointer-events: none; }
.anm-end.fc { background: var(--t-amber); }
.anm-end { display: none; }
#mainContent.anm .anm-end { display: block; }
.anm-cur { display: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.anm-cur::before { content: ''; position: absolute; left: 3px; top: -40px; width: 2px; height: 80px; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent); }

/* ① 이번 달 챙길 것 */
#mainContent.anm.anm-in .an-sec, #mainContent.anm.anm-in .an-do { animation: anm-in .5s var(--anm-ease) both; }
#mainContent.anm.anm-in .an-do { animation-delay: .08s; }
#mainContent.anm.anm-data .an-do > a, #mainContent.anm.anm-data .an-do > .an-none { animation: anm-row .45s var(--anm-ease) both; animation-delay: calc(.1s + var(--i, 0) * .09s); }
#mainContent.anm.anm-data .an-do .i { animation: anm-pop .5s var(--anm-spring) both; animation-delay: calc(.25s + var(--i, 0) * .09s); }
#mainContent.anm.anm-data .an-do > a .i svg { animation: anm-ding .7s ease-in-out both; animation-delay: calc(.75s + var(--i, 0) * .09s); transform-origin: 50% 10%; }
#mainContent.anm.anm-data #doCount { display: inline-block; animation: anm-pop .5s var(--anm-spring) both; animation-delay: .2s; }
#mainContent.anm.anm-data .an-none .i { animation: anm-pop .5s var(--anm-spring) both, anm-ring .9s ease-out both; animation-delay: .25s, .55s; --anm-c: var(--t-green); }
#mainContent.anm.anm-data .an-none .i svg path, #mainContent.anm.anm-data .an-none .i svg polyline { stroke-dasharray: 30; animation: anm-draw .5s ease-out both; animation-delay: .5s; }

/* ② 칸 셋 */
#mainContent.anm.anm-in .grid .tile { animation: anm-rise .55s var(--anm-spring) both; animation-delay: calc(.2s + var(--i, 0) * .1s); }
#mainContent.anm.anm-in .grid .tile .ico { animation: anm-pop .55s var(--anm-spring) both; animation-delay: calc(.4s + var(--i, 0) * .1s); }

/* ③ 선 그래프 */
#mainContent.anm.anm-data .gl svg { animation: anm-wipe 1s cubic-bezier(.5, 0, .3, 1) both; animation-delay: calc(.3s + var(--i, 0) * .12s); }
#mainContent.anm.anm-data .gl svg polyline + polyline { animation: anm-fade .3s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * .12s); }
#mainContent.anm.anm-data .anm-end { animation: anm-pop .45s var(--anm-spring) both, anm-ring .8s ease-out both; animation-delay: calc(1.15s + var(--i, 0) * .12s), calc(1.35s + var(--i, 0) * .12s); }
#mainContent.anm.anm-data .anm-end.fc { animation-delay: calc(1.4s + var(--i, 0) * .12s), calc(1.6s + var(--i, 0) * .12s); }

/* ⑤ 오르내림 */
/* 색(.up 빨강 · .down 초록)은 좋고 나쁨이라, 화살표 방향은 스크립트가 값으로 data-anm-dir 에 적는다 (MSY 가 오르면 초록 ▲) */
#mainContent.anm a.tile .gl [data-anm-dir]::before { display: inline-block; margin-right: 2px; font-size: .7em; }
#mainContent.anm a.tile .gl [data-anm-dir="u"]::before { content: '▲'; }
#mainContent.anm a.tile .gl [data-anm-dir="d"]::before { content: '▼'; }
#mainContent.anm.anm-data a.tile .gl [data-anm-dir="u"]::before { animation: anm-up .6s var(--anm-spring) both; animation-delay: calc(1.3s + var(--i, 0) * .12s); }
#mainContent.anm.anm-data a.tile .gl [data-anm-dir="d"]::before { animation: anm-down .6s var(--anm-spring) both; animation-delay: calc(1.3s + var(--i, 0) * .12s); }

/* ⑥ 정산서 알약 */
#mainContent.anm.anm-data .gl .tag { display: inline-block; animation: anm-pop .45s var(--anm-spring) both, anm-shake .5s ease-in-out both; animation-delay: 1.2s, 1.65s; }
#mainContent.anm.anm-data .gl .tag.ok { animation: anm-pop .45s var(--anm-spring) both, anm-shine .8s ease-out both; animation-delay: 1.2s, 1.65s; }

/* ⑦ 손끝 */
@media (hover: hover) {
  #mainContent.anm a.tile:hover .anm-cur { display: block; }
  #mainContent.anm a.tile .ico svg { transition: scale .25s var(--anm-spring); }
  #mainContent.anm a.tile:hover .ico svg { scale: 1.12; }
}

@keyframes anm-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes anm-row { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes anm-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.22); } 100% { opacity: 1; transform: none; } }
@keyframes anm-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--anm-c, var(--accent)) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes anm-ding { 0%, 100% { transform: none; } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } }
@keyframes anm-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes anm-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes anm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes anm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anm-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes anm-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes anm-shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -3px 0; } 40%, 80% { translate: 3px 0; } }
@keyframes anm-shine { 0%, 100% { filter: none; } 40% { filter: brightness(1.35); } }

@media (prefers-reduced-motion: reduce) {
  #mainContent *, #mainContent *::before { animation: none !important; transition: none !important; }
}
@media print { #mainContent *, #mainContent *::before { animation: none !important; } .anm-end, .anm-cur { display: none !important; } }