/* 출하 관리 움직임 — shipment-motion.js 가 body 에 sbm(움직여도 됨) 을, 칸 · 목록에 sbm-in · sbm-rows · sbm-todo · sbm-open 을 붙이고 뗀다.
   ① 위 세 칸 톡 · 숫자 0 에서 올라감 · 차이 ▲▼  ② 불러오는 동안 트럭이 달림  ③ 출하 날 줄 차례로 · 날짜 칸 달력 넘기듯 · 방 칩 차례로
   ④ 맞음 톡 · 다름 흔들림  ⑤ 챙길 것 상자 내려오며 흔들림  ⑥ 줄을 열면 제자리에서 드러남 · 판정 줄 차례로
   움직임 줄이기 · 태극이면 sbm 이 붙지 않는다. */
body { --sbm-ease: cubic-bezier(.22, 1, .36, 1); --sbm-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ① */
body.sbm #sbTiles.sbm-in > div { animation: sbm-pop .5s var(--sbm-spring) both; animation-delay: calc(var(--i, 0) * .08s); }
body.sbm #sbTiles.sbm-count :is(.sb-up, .sb-dn) { animation: sbm-pop .45s var(--sbm-spring) both; animation-delay: .7s; }
body.sbm #sbTiles .sb-up::before { content: '▲ '; font-size: .7em; }
body.sbm #sbTiles .sb-dn::before { content: '▼ '; font-size: .7em; }
/* ② 트럭 */
.sbm-truck svg { display: block; width: 72px; height: 36px; margin: 0 auto 6px; overflow: visible; animation: sbm-bob .35s ease-in-out infinite alternate; }
.sbm-truck .tb { fill: var(--accent); }
.sbm-truck .tc { fill: color-mix(in srgb, var(--accent) 60%, var(--ink)); }
.sbm-truck .tw { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.sbm-truck .tr { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; animation: sbm-wind .5s linear infinite; }
/* ③ ④ 출하 날 줄 */
body.sbm #shipList.sbm-rows .sb-day { animation: sbm-row .45s var(--sbm-ease) both; animation-delay: calc(var(--i, 0) * .06s); }
body.sbm #shipList.sbm-rows .sb-day .d { perspective: 200px; animation: sbm-flip .55s var(--sbm-ease) both; transform-origin: top center; animation-delay: calc(.1s + var(--i, 0) * .06s); }
body.sbm #shipList.sbm-rows .sb-rc { display: inline-block; animation: sbm-pop .4s var(--sbm-spring) both; animation-delay: calc(.2s + var(--i, 0) * .06s + var(--j, 0) * .05s); }
body.sbm #shipList.sbm-rows .sb-tag.ok { animation: sbm-pop .45s var(--sbm-spring) both; animation-delay: calc(.45s + var(--i, 0) * .06s); }
body.sbm #shipList.sbm-rows .sb-tag.diff { animation: sbm-pop .45s var(--sbm-spring) both, sbm-shake .5s ease-in-out both; animation-delay: calc(.45s + var(--i, 0) * .06s), calc(.95s + var(--i, 0) * .06s); }
body.sbm #shipList .sb-tag.ok::before { content: '✓ '; }
/* ⑤ 챙길 것 */
body.sbm #sbTodo.sbm-todo { animation: sbm-down .45s var(--sbm-ease) both, sbm-shake .5s ease-in-out both; animation-delay: 0s, .5s; }
body.sbm #sbTodo.sbm-todo button { animation: sbm-pop .4s var(--sbm-spring) both; animation-delay: calc(.3s + var(--i, 0) * .06s); }
/* ⑥ 줄 열기 */
body.sbm .sb-open.sbm-open { animation: sbm-reveal .35s var(--sbm-ease) both; }
body.sbm .sb-open.sbm-open > * { animation: sbm-row .35s var(--sbm-ease) both; animation-delay: calc(.1s + var(--i, 0) * .08s); }

@keyframes sbm-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes sbm-row { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes sbm-flip { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }
@keyframes sbm-shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -3px 0; } 40%, 80% { translate: 3px 0; } }
@keyframes sbm-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sbm-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sbm-bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes sbm-wind { to { stroke-dashoffset: 12; } }

@media (prefers-reduced-motion: reduce) {
  #sbTiles *, #shipList *, #sbTodo, #sbTodo *, .sbm-truck * { animation: none !important; }
}
@media print { #sbTiles *, #shipList *, #sbTodo, #sbTodo * { animation: none !important; } }