/* 정산서 관리 움직임 — invoice-motion.js 가 body 에 ivm(움직여도 됨) 을, 칸마다 ivm-grid · ivm-sum · ivm-new · ivm-rows · ivm-saved 를 붙이고 뗀다.
   ① 파일을 끌어 오면 올리는 칸 테두리가 흐르고 화살표 통통  ② 읽는 동안 종이 위로 빛줄
   ③ 새로 들어온 달 칸 톡 + 초록 빛 · 합계 0 에서 올라감  ④ 회사를 바꾸면 열두 달 칸 차례로  ⑤ 상세 줄 차례로  ⑥ 저장되면 ✓
   움직임 줄이기 · 태극이면 ivm 이 붙지 않는다. */
body { --ivm-ease: cubic-bezier(.22, 1, .36, 1); --ivm-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ① 끄는 동안: 테두리가 흐르는 점선 · 화살표 통통 */
body.ivm .upload-area.dragover { border-style: solid !important; border-color: transparent !important;
  background: linear-gradient(var(--accent-10), var(--accent-10)) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
    repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 18px) border-box !important;
  background-size: auto, auto, 36px 100% !important; animation: ivm-ants .6s linear infinite; }   /* 안쪽은 칠하고 테두리 자리에서만 점선이 흐른다 */
body.ivm .upload-area.dragover .upload-icon { animation: ivm-hop .5s ease-in-out infinite alternate; }
/* ② 읽는 동안 */
.ivm-scan { display: none; }
body.ivm .loading.show .ivm-scan { display: block; width: 40px; height: 50px; margin: 0 auto 8px; overflow: visible; }
body.ivm .loading.show .ivm-scan + svg { display: none; }   /* 모래시계 대신 */
.ivm-scan .pg { fill: var(--surface); stroke: var(--ink-50, var(--line-2)); stroke-width: 2; }
.ivm-scan path { stroke: var(--ink-50, var(--line-2)); stroke-width: 2.4; stroke-linecap: round; }
.ivm-scan .beam { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); animation: ivm-scan 1.2s ease-in-out infinite alternate; }
/* ③ 새로 들어온 달 */
body.ivm .summary-card.ivm-new { animation: ivm-pop .5s var(--ivm-spring) both, ivm-glow 1.8s ease-out both; animation-delay: calc(var(--n, 0) * .05s), calc(.3s + var(--n, 0) * .05s); }
/* ④ 열두 달 · 합계 */
body.ivm #monthSummary.ivm-grid .summary-card { animation: ivm-rise .45s var(--ivm-ease) both; animation-delay: calc(var(--i, 0) * .035s); }
body.ivm #yearSum.ivm-sum .ys-tile { animation: ivm-pop .5s var(--ivm-spring) both; animation-delay: calc(var(--i, 0) * .07s); }
/* ⑤ 상세 줄 */
body.ivm #detailBody.ivm-rows tr { animation: ivm-row .4s var(--ivm-ease) both; animation-delay: calc(var(--i, 0) * .04s); }
/* ⑥ 저장 */
body.ivm .btn.ivm-saved { position: relative; animation: ivm-pulse .9s ease-out both; }
body.ivm .btn.ivm-saved::after { content: '✓'; position: absolute; right: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--t-green, var(--accent)); color: var(--surface); font-size: .8rem; font-weight: 900; animation: ivm-pop .45s var(--ivm-spring) both; }

@keyframes ivm-ants { to { background-position: 0 0, 0 0, 36px 0; } }
@keyframes ivm-hop { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes ivm-scan { from { transform: translateY(0); } to { transform: translateY(40px); } }
@keyframes ivm-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes ivm-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-green, var(--accent)) 70%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--t-green, var(--accent)) 30%, transparent), 0 0 18px color-mix(in srgb, var(--t-green, var(--accent)) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ivm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ivm-row { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes ivm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-green, var(--accent)) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

@media (prefers-reduced-motion: reduce) {
  .upload-area, .upload-area *, .ivm-scan *, .summary-card, .ys-tile, #detailBody tr, .btn, .btn::after { animation: none !important; }
}
@media print { .summary-card, .ys-tile, #detailBody tr { animation: none !important; } }