/* 3차 추가(2026-10-20 저녁) Cases 띠(이식술 Cases · 세라믹 Real Cases) — 배경 3D 장식 + 자동 넘김(js/p-r3b-cases.js)
   장식 = 메인에서 쓰는 3D 치아 렌더 두 개(새로 만들지 않음) + 금색 궤도와 그 위를 도는 빛 한 점(메인 belief 와 같은 꼴).
   천천히 떠오르고, 스크롤에 따라 둘이 다른 깊이로 움직인다(--py). 움직임 줄이기면 멈춤. 생성 batch-1019/round3.py CS_DECO */
.bp-cs .wrap { z-index: 1; }
.bp-cs__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bp-cs__obj { position: absolute; display: block; aspect-ratio: 1; translate: 0 var(--py, 0px); will-change: translate; }
.bp-cs__obj::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 176, 104, .2), rgba(214, 176, 104, 0)); }
.bp-cs__obj img { position: absolute; left: 17%; top: 6%; width: 66%; height: auto; filter: drop-shadow(0 34px 38px rgba(0, 0, 0, .6)); }
.bp-cs__orb { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-cs__orb ellipse { fill: none; stroke-linecap: round; }
.bp-cs__ring { stroke: rgba(201, 161, 89, .5); stroke-width: 1.3; }
.bp-cs__tail { stroke: rgba(201, 161, 89, .55); stroke-width: 3.2; stroke-dasharray: 9 91; opacity: 0; }
.bp-cs__spark { stroke: #e2c47f; stroke-width: 7; stroke-dasharray: .4 99.6; filter: drop-shadow(0 0 5px rgba(226, 196, 127, .95)); opacity: 0; }
/* 왼쪽 위 큰 어금니(머리 옆) · 오른쪽 아래 작은 치아(조금 흐리게 — 더 멀리) */
.bp-cs__obj--a { left: max(-48px, -2.4vw); top: 7%; width: clamp(200px, 17vw, 330px); rotate: -6deg; }
.bp-cs__obj--b { right: max(-30px, -1.6vw); bottom: 5%; width: clamp(150px, 13vw, 250px); rotate: 12deg; opacity: .78; filter: blur(1.2px); }
@media (max-width: 1023px) {
  .bp-cs__obj--a { left: auto; right: -46px; top: 2px; width: 118px; }
  .bp-cs__obj--b { right: -26px; left: auto; bottom: -34px; width: 92px; opacity: .55; }   /* 아래 여백 칸에(고지문 글자와 겹치지 않게) */
}
@media (prefers-reduced-motion: no-preference) {
  .bp-cs__obj img { animation: bpcsFloat 7.5s ease-in-out infinite alternate; }
  .bp-cs__obj--b img { animation-duration: 9s; animation-delay: -3s; }
  .bp-cs__spark, .bp-cs__tail { opacity: 1; animation: bpcsSpark 12s linear infinite; }
  .bp-cs__tail { animation-delay: -10.92s; }                       /* 12s × (1 − 9%) — 빛 바로 뒤를 따라감 */
  .bp-cs__obj--b :is(.bp-cs__spark, .bp-cs__tail) { animation-duration: 15s; }
  .bp-cs__obj--b .bp-cs__tail { animation-delay: -13.65s; }
}
@keyframes bpcsFloat { from { translate: 0 -10px; rotate: -2.5deg; } to { translate: 0 12px; rotate: 2.5deg; } }
@keyframes bpcsSpark { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }