/* 일령 관리 → 주차판 → 흐름판 움직임 — cohort-board.js 가 #cohortBody 에 ckm(움직여도 됨) · ckm-in(처음 여는 중) 을 붙이고 뗀다.
   지연은 calc(… + var(--ckm-t)) — 처음 여는 도중에 다시 그려지면 지난 시간만큼 앞당겨 이어서.
   축사 사이 화살표는 움직임과 상관없이 늘 보인다 (분만사 → 인큐 → … → 함평, 흐르는 방향).
   ① 축사 머리가 왼쪽부터 들어오고 화살표가 그어짐  ② 무리 카드가 차례로 내려앉음  ③ 머리 줄을 따라 빛이 흐르는 방향으로 (계속, 9초마다)
   ④ 숫자가 0 에서 올라감 (JS)  ⑤ 출하 창이 다가온 · 지난 카드는 테두리 빛이 돎 (계속)  ⑥ 폰에서 축사를 바꾸면 고른 쪽에서 미끄러져 들어옴
   움직임 줄이기 · 태극이면 ckm 이 붙지 않는다. */
@property --ckm-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#cohortBody { --ckm-ease: cubic-bezier(.22, 1, .36, 1); --ckm-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* 축사 사이 화살표 (흐르는 방향) */
.ck-flow .ck-fcol { position: relative; }
.ck-flow .ck-fcol:not(:last-child)::after { content: ''; position: absolute; top: 15px; right: -8px; width: 7px; height: 7px; z-index: 1; pointer-events: none;
  border-top: 2px solid var(--ink-50); border-right: 2px solid var(--ink-50); transform: rotate(45deg); transform-origin: center; }

/* ① ② 처음 열 때 */
#cohortBody.ckm.ckm-in .ck-fh { animation: ckm-in .45s var(--ckm-ease) both; animation-delay: calc(var(--ci, 0) * .12s + var(--ckm-t, 0s)); }
#cohortBody.ckm.ckm-in .ck-flow .ck-fcol:not(:last-child)::after { animation: ckm-arrow .45s var(--ckm-spring) both; animation-delay: calc(.25s + var(--ci, 0) * .12s + var(--ckm-t, 0s)); }
#cohortBody.ckm.ckm-in .ck-fc { animation: ckm-drop .5s var(--ckm-spring) both; animation-delay: calc(.35s + var(--ci, 0) * .12s + var(--i, 0) * .07s + var(--ckm-t, 0s)); }
#cohortBody.ckm.ckm-in .ck-fchips button { animation: ckm-pop .45s var(--ckm-spring) both; animation-delay: calc(var(--ci, 0) * .06s + var(--ckm-t, 0s)); }
#cohortBody.ckm.ckm-in .ck-funk button { animation: ckm-pop .45s var(--ckm-spring) both; animation-delay: calc(1.3s + var(--ckm-t, 0s)); }

/* ③ 흐르는 빛 — 머리 줄마다 차례로 (왼쪽에서 오른쪽으로 이어진다) */
#cohortBody.ckm .ck-fh { position: relative; overflow: hidden; isolation: isolate; }
#cohortBody.ckm .ck-flow .ck-fh::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c) 45%, transparent) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat;
  animation: ckm-flow 9s linear infinite; animation-delay: calc(1.6s + var(--ci, 0) * .22s); }

/* ⑤ 출하 창이 다가온(노랑) · 지난(빨강) 카드 — 테두리를 따라 빛이 돈다 */
#cohortBody.ckm :is(.ck-fc.ckm-urg, .ck-fc.ckm-soon) { position: relative; isolation: isolate; }
#cohortBody.ckm :is(.ck-fc.ckm-urg, .ck-fc.ckm-soon)::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ckm-ang), transparent 0 62%, var(--c) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ckm-spin 3.2s linear infinite; }
#cohortBody.ckm .ck-fc.ckm-urg::after { animation-duration: 2s; }

/* ⑥ 폰: 고른 축사 쪽에서 들어온다 */
#cohortBody.ckm .ck-flow-ph .ck-fcol.ckm-from-r { animation: ckm-from-r .4s var(--ckm-ease) both; }
#cohortBody.ckm .ck-flow-ph .ck-fcol.ckm-from-l { animation: ckm-from-l .4s var(--ckm-ease) both; }
#cohortBody.ckm .ck-fchips button.on { animation: ckm-pop .4s var(--ckm-spring) both; }

@keyframes ckm-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes ckm-arrow { from { opacity: 0; transform: translateX(-8px) rotate(45deg) scale(.4); } to { opacity: 1; transform: rotate(45deg); } }
@keyframes ckm-drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ckm-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ckm-flow { 0% { background-position: -100% 0; } 7%, 100% { background-position: 200% 0; } }
@keyframes ckm-spin { to { --ckm-ang: 360deg; } }
@keyframes ckm-from-r { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ckm-from-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #cohortBody *, #cohortBody *::before, #cohortBody *::after { animation: none !important; }
}
@media print { #cohortBody *, #cohortBody *::before, #cohortBody *::after { animation: none !important; } }