/* 온스토리 예약 «작동 방식» 모션 v1 (2026-11-05) — 맞춤형 칸의 data-book-flow · data-book-step · data-book-icon 표시가 부른다 · 스크립트 0
   그림 = lib/custom-section/book-flow.ts BOOK_FLOW_SVG · 10초 한 바퀴:
     ① 메뉴 0~19%  ② 날짜 20~44%  ③ 비어 있는 시간 45~64%  ④ 이름·연락처·신청 65~84%  ⑤ 사장님 알림·확정 85~100% → 처음으로
   단계 카드 data-book-step: 1=① · 2=②③ · 3=④ · 4=⑤ (같은 박자로 켜짐)
   색 = 칸 글자색(currentColor)·강조색(--cs-accent) · 빨강 안 씀 · «움직임 줄이기»는 안 읽는다(대표님 10/3) · 사장님 «애니메이션 최소»(data-anim-off)면 ③ 한 장면에 멈춤 */
.bf { --bf-a: var(--cs-accent, #1f5c48); --bf-t: 10s; display: grid; justify-items: center; margin: 8px auto 20px; }
.bf-wrap { grid-template-columns: 1fr; gap: 18px; align-items: center; }
/* 🆕 11/5 밤 대표님 «폰 화면 바로 옆에, 1,2,3,4 카드가 좀 가까이 있고» — 폰과 카드 사이를 넓힘(PC 32 → 64 · 폰 18 → 28) */
.bf-wrap { gap: 28px; }
@media (min-width: 820px) { .bf-wrap { grid-template-columns: 210px 1fr; justify-items: stretch; gap: 64px; } .bf-wrap .bf-phone { justify-self: center; } }
.bf-phone { position: relative; width: 168px; max-width: 46vw; container-type: inline-size; }
@media (min-width: 820px) { .bf-phone { width: 210px; } }
.bf-side { min-width: 0; width: 100%; display: grid; gap: 16px; }
/* 공통 단계 카드 넷(사이트가 단계 카드를 안 넣은 자리) — 글자색 바탕의 옅은 판 · 번호 동그라미 · 지금 단계가 빛남(아래 ::after) */
.bf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bf-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 6%, transparent); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: left; }
.bf-steps b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; }
.bf-svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }

/* 그림 색 */
.bf-body { fill: color-mix(in srgb, currentColor 6%, #10140f); }
.bf-scr { fill: #fff; }
.bf-h { font-size: 11px; font-weight: 800; fill: #14231d; }
.bf-m { font-size: 8.5px; fill: #5d6b65; }
.bf-c text { text-anchor: middle; }
.bf-mid { text-anchor: middle; }
.bf-bt { font-size: 10.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
.bf-a { fill: var(--bf-a); }
.bf-dark { fill: color-mix(in srgb, var(--bf-a) 72%, #000); }
.bf-a2 { fill: color-mix(in srgb, var(--bf-a) 45%, #fff); }
.bf-g { fill: #c4d0ca; } .bf-g2 { fill: #dde5e1; }
.bf-card { fill: #fff; stroke: #d5e2db; stroke-width: 1.5; }
.bf-wl { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bf-day rect { fill: color-mix(in srgb, var(--bf-a) 12%, #fff); }
.bf-day .bf-off { fill: #ececec; }
.bf-full { fill: #ececec; } .bf-tf { font-size: 9px; font-weight: 700; fill: #a9b3ae; text-anchor: middle; }
.bf-free { fill: #fff; stroke: var(--bf-a); stroke-width: 1.5; } .bf-ta { font-size: 9px; font-weight: 700; fill: var(--bf-a); text-anchor: middle; }
.bf-in { fill: #f5f8f6; stroke: #d5e2db; }
.bf-ink { fill: #14231d; }
.bf-nt { font-size: 8.5px; font-weight: 800; fill: #fff; } .bf-ns { font-size: 7.5px; fill: #cfe0d8; }
.bf-soft { fill: color-mix(in srgb, var(--bf-a) 14%, #fff); }
.bf-ok { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bf-pickon { fill: none; stroke: var(--bf-a); stroke-width: 2.2; opacity: 0; }
.bf-pickdayon, .bf-pickon3 { opacity: 0; }
.bf-tw { font-size: 9px; font-weight: 700; fill: #fff; text-anchor: middle; }
.bf-tapx { position: absolute; left: 0; top: 0; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 999px; background: color-mix(in srgb, var(--bf-a) 45%, transparent); border: 2px solid #fff; opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* 움직임 — 모두 같은 10초 시계 */
.bf-svg *, .bf-tapx { animation-duration: var(--bf-t, 10s); animation-iteration-count: infinite; animation-timing-function: ease; }
/* 🆕 11/5 밤 속도 — 기본은 «멈춤»(첫 장면에 서 있음) · 칸이 화면 가까이 오면(data-bf-on · book-flow-play.tsx) 돈다 · 화면 밖에서는 매 프레임 계산 0 */
.bf-svg *, .bf-tapx, [data-book-step]::after { animation-play-state: paused; }
[data-bf-on] .bf-svg *, [data-bf-on] .bf-tapx, [data-bf-on] [data-book-step]::after { animation-play-state: running; }
.bf-s { opacity: 0; }
.bf-s1 { animation-name: bf-s1; } .bf-s2 { animation-name: bf-s2; } .bf-s3 { animation-name: bf-s3; } .bf-s4 { animation-name: bf-s4; } .bf-s5 { animation-name: bf-s5; }
@keyframes bf-s1 { 0%, 18% { opacity: 1; } 20%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bf-s2 { 0%, 19% { opacity: 0; } 21%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes bf-s3 { 0%, 44% { opacity: 0; } 46%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes bf-s4 { 0%, 64% { opacity: 0; } 66%, 83% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes bf-s5 { 0%, 84% { opacity: 0; } 86%, 97% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
/* ① 메뉴를 톡 → 초록 테두리(겹친 판 opacity) + 체크 */
.bf-pickon { animation-name: bf-pickon; } @keyframes bf-pickon { 0%, 9% { opacity: 0; } 11%, 100% { opacity: 1; } }
.bf-chk1 { animation-name: bf-pop; transform-box: fill-box; transform-origin: center; } @keyframes bf-pop { 0%, 9% { opacity: 0; transform: scale(.4); } 12%, 100% { opacity: 1; transform: none; } }
/* ② 날짜 칸이 채워짐 */
.bf-pickdayon { animation-name: bf-on32; } @keyframes bf-on32 { 0%, 31% { opacity: 0; } 33%, 100% { opacity: 1; } }
/* ③ 시간 칸이 퐁퐁 → 하나가 채워짐 */
.bf-sl { transform-box: fill-box; transform-origin: center; }
.bf-sl1 { animation-name: bf-sl1; } .bf-sl2 { animation-name: bf-sl2; } .bf-sl3 { animation-name: bf-sl3; } .bf-sl4 { animation-name: bf-sl4; } .bf-sl5 { animation-name: bf-sl5; } .bf-sl6 { animation-name: bf-sl6; }
@keyframes bf-sl1 { 0%, 45% { opacity: 0; transform: scale(.6); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes bf-sl2 { 0%, 46% { opacity: 0; transform: scale(.6); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes bf-sl3 { 0%, 47% { opacity: 0; transform: scale(.6); } 49%, 100% { opacity: 1; transform: none; } }
@keyframes bf-sl4 { 0%, 48% { opacity: 0; transform: scale(.6); } 50%, 100% { opacity: 1; transform: none; } }
@keyframes bf-sl5 { 0%, 49% { opacity: 0; transform: scale(.6); } 51%, 100% { opacity: 1; transform: none; } }
@keyframes bf-sl6 { 0%, 50% { opacity: 0; transform: scale(.6); } 52%, 100% { opacity: 1; transform: none; } }
.bf-pickon3 { animation-name: bf-on57; } @keyframes bf-on57 { 0%, 56% { opacity: 0; } 58%, 100% { opacity: 1; } }
/* ④ 타자 치듯 채움 → [예약 신청] 눌림 */
.bf-ink { transform-box: fill-box; transform-origin: left center; }
.bf-type1 { animation-name: bf-type1; } @keyframes bf-type1 { 0%, 66% { transform: scaleX(0); } 71%, 100% { transform: none; } }
.bf-type2 { animation-name: bf-type2; } @keyframes bf-type2 { 0%, 71% { transform: scaleX(0); } 76%, 100% { transform: none; } }
.bf-send { transform-box: fill-box; transform-origin: center; animation-name: bf-send; } @keyframes bf-send { 0%, 79% { transform: none; } 80.5% { transform: scale(.94); } 82%, 100% { transform: none; } }
/* ⑤ 알림이 톡 내려오고 → 체크가 그려짐 */
.bf-noti { animation-name: bf-noti; } @keyframes bf-noti { 0%, 85% { opacity: 0; transform: translateY(-34px); } 88%, 100% { opacity: 1; transform: none; } }
.bf-ok { animation-name: bf-ok; } @keyframes bf-ok { 0%, 88% { opacity: 0; } 91%, 100% { opacity: 1; } }
/* 손가락(동그라미) — 고를 때마다 그 자리에서 톡 · 🆕 11/5 밤 겉 HTML(.bf-tapx · transform·opacity 만) · 자리 = 그림 좌표 ÷ 2 (cqw = 폰 칸 너비의 1% · 그림 200×360) */
.bf-tapx { animation-name: bf-tap; }
@keyframes bf-tap {
  0%, 5% { opacity: 0; transform: translate(60cqw, 46cqw) scale(1.4); }
  8% { opacity: 1; transform: translate(60cqw, 46cqw) scale(1); } 10% { opacity: 1; transform: translate(60cqw, 46cqw) scale(.8); } 13% { opacity: 0; transform: translate(60cqw, 46cqw) scale(1); }
  28% { opacity: 0; transform: translate(53cqw, 54cqw) scale(1.4); } 31% { opacity: 1; transform: translate(53cqw, 54cqw) scale(1); } 33% { opacity: 1; transform: translate(53cqw, 54cqw) scale(.8); } 36% { opacity: 0; transform: translate(53cqw, 54cqw) scale(1); }
  53% { opacity: 0; transform: translate(34.5cqw, 54.5cqw) scale(1.4); } 56% { opacity: 1; transform: translate(34.5cqw, 54.5cqw) scale(1); } 58% { opacity: 1; transform: translate(34.5cqw, 54.5cqw) scale(.8); } 61% { opacity: 0; transform: translate(34.5cqw, 54.5cqw) scale(1); }
  77% { opacity: 0; transform: translate(56cqw, 157.5cqw) scale(1.4); } 79.5% { opacity: 1; transform: translate(56cqw, 157.5cqw) scale(1); } 81% { opacity: 1; transform: translate(56cqw, 157.5cqw) scale(.8); } 84%, 100% { opacity: 0; transform: translate(56cqw, 157.5cqw) scale(1); }
}
/* 단계 카드 — 폰과 같은 박자로 하나씩 켜짐(테두리 빛 + 옅은 바탕)
   ⚠ 카드 자체가 아니라 «겉에 덧씌운 한 겹»(::after)이 움직인다 — 카드에 등장 움직임(data-anim · anim.css 의 스크롤 시계 animation-timeline:view())이
     함께 달리면 같은 칸의 animation 을 서로 덮어 빛이 안 켜졌다(11/5 미리보기 실측) */
[data-book-step] { position: relative; }
[data-book-step]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  /* 🆕 11/5 밤 «한단계 넘어갈때마다 그 단계 라는게 어떤 건지 알 수 있게» — 테두리 3px + 옅은 판 + 그림자로 더 또렷하게 */
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 95%, transparent), 0 10px 26px -10px color-mix(in srgb, currentColor 70%, transparent);
  background: color-mix(in srgb, currentColor 14%, transparent);
  animation-duration: var(--bf-t, 10s); animation-iteration-count: infinite; animation-timing-function: ease; animation-timeline: auto; }
[data-book-step="1"]::after { animation-name: bf-st1; } [data-book-step="2"]::after { animation-name: bf-st2; } [data-book-step="3"]::after { animation-name: bf-st3; } [data-book-step="4"]::after { animation-name: bf-st4; }
@keyframes bf-st1 { 0%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes bf-st2 { 0%, 19% { opacity: 0; } 21%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes bf-st3 { 0%, 64% { opacity: 0; } 66%, 83% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes bf-st4 { 0%, 84% { opacity: 0; } 86%, 98% { opacity: 1; } 100% { opacity: 0; } }
/* 단추 아이콘 */
[data-book-icon] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bf-ic { flex: none; width: 18px; height: 18px; }
/* 사장님 «애니메이션 효과 — 최소» — ③(비어 있는 시간) 한 장면에 멈춤 · 카드 빛 없음 */
[data-anim-off] .bf-svg *, [data-anim-off] .bf-tapx, [data-anim-off] [data-book-step]::after { animation: none !important; }
[data-anim-off] .bf-s3, [data-anim-off] .bf-sl { opacity: 1; }
[data-anim-off] .bf-pickon3 { opacity: 1; }