/* 24차 미리보기(2026-11-01 · ko-ver2) — 재식술: 전후 사진(가운데 큰 카드 + 양옆 흐린 카드 · 자동 넘김) · ‘단 한 번!’ 띠 되돌림 + 논문/저서 카드. 생성 batch-1101c/r24.py */

/* ───── 전후 사진: 가운데 제목 · 가운데 카드(전 | 후) + 양옆 카드 흐리게 · 카드 옆 둥근 화살표 · 카드 아래 제목. 모서리 직각 ───── */
.r24-ba { --cw: min(760px, 58vw); --gap: clamp(48px, 6vw, 112px); --ar: 1.72;
  position: relative; overflow: hidden; padding: clamp(90px, 6vw + 30px, 140px) 0 clamp(70px, 5vw + 20px, 110px);
  background: linear-gradient(180deg, #f4f1ec 0%, #ebe5dc 100%); color: var(--ink, #1b1916); }
.r24-ba__hd { position: relative; text-align: center; }
.r24-ba__t { margin: 0; font-size: clamp(30px, 20px + 1.8vw, 50px); line-height: 1.22; font-weight: 800; letter-spacing: -0.05em; }
.r24-ba__t em { font-style: normal; color: #a9843e; }
.r24-ba__sub { margin: clamp(16px, 1vw + 8px, 26px) 0 0; font-size: clamp(15px, 14px + .25vw, 18px); color: #6a645c; }
.r24-ba__sub b { font-weight: 700; color: #1b1916; }
.r24-ba__more { position: absolute; right: var(--gut); top: 10px; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: #1b1916; }
.r24-ba__more i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1b1916; color: #fff; box-shadow: 0 8px 18px -8px rgba(27,25,22,.6); transition: background-color .3s; }
.r24-ba__more i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.r24-ba__more:hover i { background: #a9843e; }

.r24-ba__vp { position: relative; margin-top: clamp(44px, 3vw + 16px, 70px); }
.r24-ba__track { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; will-change: transform; }
.r24-ba__track.is-anim { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.r24-ba__it { flex: 0 0 var(--cw); opacity: .38; transition: opacity .7s; }
.r24-ba__it.is-on { opacity: 1; }
.r24-bc { margin: 0; }
.r24-bc__ph { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: var(--ar); overflow: hidden; background: #f4f1ec; box-shadow: 0 30px 60px -36px rgba(40,30,15,.55); }
.r24-bc__half { position: relative; display: block; overflow: hidden; background: #111; }
.r24-bc__half img { width: 100%; height: 100%; object-fit: cover; }
.r24-bc__half em { position: absolute; bottom: clamp(14px, 1.4vw, 24px); font-style: normal; font-size: clamp(15px, 12px + .6vw, 21px); font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.r24-bc__half:first-child em { left: clamp(16px, 1.8vw, 34px); }
.r24-bc__half:last-child em { right: clamp(16px, 1.8vw, 34px); color: #f0d79e; }
.r24-bc__cap { margin-top: clamp(22px, 1.4vw + 10px, 34px); text-align: center; }
.r24-bc__cap strong { display: block; text-wrap: balance; font-size: clamp(17px, 15px + .35vw, 21px); line-height: 1.45; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; }
.r24-bc__cap span { display: block; text-wrap: balance; margin-top: 6px; font-size: clamp(13px, 12px + .2vw, 15px); color: #8a8378; word-break: keep-all; }

.r24-ba__arr { position: absolute; z-index: 2; top: calc(var(--cw) / var(--ar) / 2); display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid #d8cfc0; border-radius: 50%; background: #fff; color: #1b1916; cursor: pointer; transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px -14px rgba(40,30,15,.6); transition: background-color .3s, color .3s, border-color .3s; }
.r24-ba__arr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.r24-ba__arr:hover, .r24-ba__arr:focus-visible { background: #a9843e; border-color: #a9843e; color: #fff; }
.r24-ba__arr--prev { left: calc(50% - var(--cw) / 2 - var(--gap) / 2); }
.r24-ba__arr--next { left: calc(50% + var(--cw) / 2 + var(--gap) / 2); }
.r24-ba__note { margin-top: clamp(30px, 2vw + 14px, 48px); text-align: center; font-size: 13px; color: #9a9388; }
@media (prefers-reduced-motion: reduce) { .r24-ba__track.is-anim, .r24-ba__it { transition: none; } }
.r24-ba__track.is-jump .r24-ba__it { transition: none; }   /* 31차: 복제본 → 원본으로 옮길 때 깜빡임 없음(js/p-r24.js) */

@media (max-width: 1023px) {
  .r24-ba { --cw: 84vw; --gap: 12px; --ar: 1.3333; padding: 70px 0 60px; }
  .r24-ba__more { position: static; margin-top: 18px; font-size: 14px; }
  .r24-ba__more i { width: 26px; height: 26px; }
  .r24-ba__vp { margin-top: 34px; }
  .r24-ba__it { opacity: .45; }
  .r24-bc__half em { bottom: 12px; font-size: 14px; }
  .r24-bc__half:first-child em { left: 12px; }
  .r24-bc__half:last-child em { right: 12px; }
  .r24-ba__arr { width: 38px; height: 38px; }
  .r24-ba__arr svg { width: 15px; height: 15px; }
  .r24-ba__arr--prev { left: calc(50% - var(--cw) / 2); }
  .r24-ba__arr--next { left: calc(50% + var(--cw) / 2); }
  .r24-bc__cap { padding: 0 6px; }
  .r24-ba__note { font-size: 12px; }
}

/* ───── ‘단 한 번!’ 띠: 21차 모양(가운데 치아 + 문구 4개 + 오른쪽 원장)으로 되돌림 · 아래에 논문/저서 카드(23차 합친 내용) ───── */
.r24-band .r20-band__fig { padding-bottom: 0; }
/* 카드 줄 = 왼쪽 문구 칸 + 치아 칸 폭(왼쪽 맞춤) → 오른쪽 원장 사진과 겹치지 않는다 */
.r24-band__ev { width: calc((min(100%, 980px) + clamp(260px, 22vw, 360px)) / 2); margin: clamp(40px, 3vw + 10px, 64px) 0 clamp(60px, 4vw, 90px); }
@media (max-width: 1279px) { .r24-band__ev { width: calc(100% + var(--gut) - clamp(320px, 30vw, 560px) - 24px); } }   /* 원장 사진(오른쪽 끝, 폭 30vw) 왼쪽까지 */
@media (max-width: 1023px) {
  .r24-band__ev { width: auto; margin: 30px 0 0; }
}