/* 29차 미리보기(2026-11-02 · ko-ver2) — 무통 마취 과정 카드 · 이식술 ‘두 가지’ 번호. 생성 batch-1102b/r29.py */

/* ───── 무통 마취 과정: 사진이 카드를 꽉 채움(직각) · 아래 어둡게 · 아이콘 + 단계 + 제목, 마우스를 올리면 설명. 모바일도 같은 모양 ───── */
.r29an-pa { background: #fff; }
.r29-ic { display: block; width: 42px; height: 42px; margin-bottom: 8px; color: #e2c27f; }
.r29-ic svg { display: block; width: 100%; height: 100%; }
.r29an-pa .r25-pc::before { background: linear-gradient(180deg, rgba(20,18,14,.42) 0%, rgba(20,18,14,0) 24%, rgba(20,18,14,.12) 46%, rgba(20,18,14,.9) 100%); }
@media (max-width: 767px), (hover: none) {
  .r29an-pa .r25-pc { display: block; aspect-ratio: 3 / 4; background: #1b1916; color: #fff; }
  .r29an-pa .r25-pc > img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .r29an-pa .r25-pc::before { bottom: 0; aspect-ratio: auto; }
  .r29an-pa .r25-pc__in { position: absolute; padding: 0 22px 24px; }
  .r29an-pa .r25-pc__ph { color: #e2c27f; }
  .r29an-pa .r25-pc__more p { color: rgba(255,255,255,.86); }
}

/* ───── 이식술 ‘두 가지’(B안 확정): 번호를 사진 모서리에(01 왼쪽 위 · 02 오른쪽 위), 번호 둘레를 금색 호가 돈다 ───── */
.r29-no { position: absolute; top: clamp(14px, 1.6vw, 24px); z-index: 2; display: grid; place-items: center; width: clamp(74px, 6.4vw, 100px); aspect-ratio: 1; border-radius: 50%; background: rgba(20,18,14,.34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.r29-no--l { left: clamp(14px, 1.6vw, 24px); }
.r29-no--r { right: clamp(14px, 1.6vw, 24px); }
.r29-no svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; animation: r29spin 5s linear infinite; }
.r29-no__trk { stroke: rgba(255,255,255,.32); stroke-width: 1; }
.r29-no__arc { stroke: #e2c27f; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 22 78; }
.r29-no--r svg { animation-direction: reverse; }
.r29-no b { position: relative; font-size: clamp(26px, 2.3vw, 36px); line-height: 1; font-weight: 300; letter-spacing: .02em; color: #fff; }
.r28-wb__card:hover .r29-no svg { animation-duration: 2.2s; }
@keyframes r29spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .r29-no svg { animation: none; } }