/* 모돈 주차판 움직임 — sow-board-motion.js 가 body 에 swb(움직여도 됨) · swb-in 을, 칸마다 swb-paint · swb-erase · swb-wash · swb-bump · swb-tick · swb-tap · swb-stamp · swb-rewind · swb-up · swb-saved · swb-flash · swb-glow 를 붙이고 뗀다.
   판 칸(.s)은 크기 · 자리를 재는 검사가 있고 테두리 · 그림자를 돈방 표시가 쓴다 → 판 칸에는 opacity 와 안쪽 번짐(swb-wash)만, 눌림은 아주 작게.
   ① 세 칸 톡 · 판 물결  ② 색 번짐 · 숫자 톡  ③ 흐림이 부드럽게  ④ ✓ 톡 · 되감김  ⑤ 창 올라옴 · 저장 점 · 반짝.  움직임 줄이기 · 태극이면 swb 가 붙지 않는다. */
body { --swb-ease: cubic-bezier(.22, 1, .36, 1); --swb-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ① */
body.swb.swb-in #alerts .al, body.swb.swb-in #see .see-it { animation: swb-pop .45s var(--swb-spring) both; animation-delay: calc(var(--i, 0) * .07s); }
body.swb.swb-in #board .s { animation: swb-fade .35s ease-out both; animation-delay: calc(.15s + var(--w, 0) * .03s); }
body.swb.swb-in #board .s.prob { animation: swb-fade .35s ease-out both, probBlink 1.1s ease-in-out infinite; animation-delay: calc(.15s + var(--w, 0) * .03s), 0s; }
/* ② */
body.swb #board .s.swb-paint, body.swb .sides .s.swb-paint, body.swb #rn .s.swb-paint { animation: swb-press .3s ease-out both; }
body.swb .s.swb-paint.prob { animation: swb-press .3s ease-out both, probBlink 1.1s ease-in-out infinite; }
.swb-wash { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.swb-wash i { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; opacity: .9; animation: swb-wash .5s var(--swb-ease) forwards; }
.s:has(> .swb-wash) > .sn, .s:has(> .swb-wash) > .t { position: relative; z-index: 1; }   /* 번지는 색 위로 번호 · 이름표 (번지는 동안만) */
body.swb .s.swb-erase { animation: swb-erase .4s ease-out both; }
body.swb .swb-bump { display: inline-block; animation: swb-num .45s var(--swb-spring) both; }
body.swb #count.swb-tick b { display: inline-block; animation: swb-num .45s var(--swb-spring) both; }
/* ③ */
body.swb #board .s, body.swb .sides .s, body.swb #rn .s { transition: opacity .25s ease-out; }
body.swb .swb-tap { animation: swb-tap .35s var(--swb-spring) both; }
/* ④ */
body.swb .s .ckm.swb-stamp { animation: swb-stamp .4s var(--swb-spring) both; }
body.swb .s.swb-rewind { animation: swb-rewind .45s ease-in-out both; }
/* ⑤ */
body.swb #sheet.swb-up { animation: swb-pop-s .35s var(--swb-spring) both; }
@media (max-width: 768px) { body.swb #sheet.swb-up { animation: swb-rise .38s var(--swb-ease) both; } }
body.swb .sync.busy i { animation: swb-breathe 1s ease-in-out infinite; }
body.swb .sync.swb-saved { animation: swb-tap .4s var(--swb-spring) both; }
body.swb .sync.swb-saved i { animation: swb-num .45s var(--swb-spring) both; }
body.swb #alerts.swb-flash .al { animation: swb-ring 1.1s ease-out both; animation-delay: calc(var(--i, 0) * .1s); }
body.swb #snapCard.swb-glow { animation: swb-ring 1.3s ease-out both; }

@keyframes swb-pop { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes swb-pop-s { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes swb-rise { from { opacity: .4; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes swb-fade { from { opacity: 0; } }
@keyframes swb-press { 0% { scale: 1; } 35% { scale: .94; } 100% { scale: 1; } }
@keyframes swb-wash { from { transform: scale(1); opacity: .95; } to { transform: scale(14); opacity: 0; } }
@keyframes swb-erase { 0% { filter: none; scale: 1; } 40% { filter: grayscale(1) brightness(1.3); scale: .92; } 100% { filter: none; scale: 1; } }
@keyframes swb-num { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: none; } }
@keyframes swb-tap { 0% { transform: scale(1); } 40% { transform: scale(.93); } 100% { transform: none; } }
@keyframes swb-stamp { 0% { transform: scale(2.2) rotate(-30deg); opacity: 0; } 70% { transform: scale(.9); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes swb-rewind { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 65% { rotate: 3deg; } }
@keyframes swb-breathe { 50% { opacity: .3; transform: scale(.7); } }
@keyframes swb-ring { 0% { outline: 3px solid color-mix(in srgb, var(--c, var(--accent)) 70%, transparent); outline-offset: 0; } 100% { outline: 3px solid transparent; outline-offset: 8px; } }

@media (prefers-reduced-motion: reduce) {
  #alerts .al, #see .see-it, #board .s:not(.prob), .s .ckm, #sheet, .sync, .sync i, #snapCard, #count b, #chips .n { animation: none !important; }
  .s { transition: none !important; }
  .swb-wash { display: none; }
}
@media print { #board .s:not(.prob), #alerts .al { animation: none !important; } .swb-wash { display: none; } }