/* 23차 미리보기(2026-11-01 · ko-ver2) — 재식술: 전후 사진(아웃 프레임 원장 · 자동 넘김) · ‘단 한 번!’ + 논문/저서 합침 · 대상 + 증례 합침 · 네이버 후기. 생성 batch-1101b/r23.py */

/* ───── 전후 사진: 위쪽은 흰 바탕, 아래 판(베이지) 위로 원장 머리가 튀어나옴(아웃 프레임) ───── */
.r23-ba { position: relative; padding-top: clamp(80px, 6vw, 130px); background: #fff; color: var(--ink, #1b1916); }
.r23-ba__panel { position: relative; background: linear-gradient(180deg, #f4f1ec 0%, #ebe5dc 100%); }
.r23-ba__in { position: relative; display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: end; gap: clamp(20px, 3vw, 60px); }
/* 원장: 왼쪽 칸 폭에 맞춘 상자를 판보다 높게 → 머리가 판 위(흰 바탕)로 튀어나옴. 상반신 컷이 가로로 넓어 어깨 양끝은 상자 밖으로 흐리게 */
.r23-ba__doc { position: absolute; z-index: 2; left: 0; bottom: 0; width: min(50%, 660px); height: calc(100% + clamp(60px, 4.5vw, 96px)); margin: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 80%, transparent 100%); }
.r23-ba__doc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.r23-ba__body { grid-column: 2; }
.r23-ba__sign { position: absolute; z-index: 3; left: 0; bottom: clamp(18px, 2vw, 32px); pointer-events: auto; display: grid; gap: 2px; padding: 12px 18px; background: rgba(255,255,255,.92); font-size: 13px; line-height: 1.5; color: #4a4540; box-shadow: 0 12px 30px -18px rgba(40,30,15,.5); }
.r23-ba__sign b { font-size: 15px; color: #1b1916; }
.r23-ba__body { align-self: center; padding: clamp(30px, 1.6vw + 12px, 46px) 0; text-align: center; }
.r23-ba__pill { display: inline-block; margin: 0; padding: 8px 20px; background: #1b1916; font-size: clamp(14px, 13px + .3vw, 17px); font-weight: 600; color: #fff; }
.r23-ba__pill mark { background: none; color: #e2c27f; }
.r23-ba__t { margin: 12px 0 0; font-size: clamp(30px, 20px + 1.8vw, 50px); line-height: 1.15; font-weight: 800; letter-spacing: -0.05em; }
.r23-ba__t em { font-style: normal; color: #a9843e; }
.r23-ba__stage { position: relative; max-width: 440px; margin: clamp(22px, 1.6vw + 10px, 36px) auto 0; }
.r23-ba__slide { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 2vw, 34px); }
.r23-ba__slide[hidden] { display: none; }
.r23-ba__slide.is-in { animation: r23Fade .7s ease both; }
@keyframes r23Fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .r23-ba__slide.is-in { animation: none; } }
.r23-ba__fig { display: grid; justify-items: center; gap: 12px; margin: 0; }
.r23-ba__circle { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 4px solid #fff; background: #111; box-shadow: 0 24px 50px -28px rgba(40,30,15,.55); }
.r23-ba__circle img { width: 100%; height: 100%; object-fit: cover; }
.r23-ba__fig figcaption { font-size: clamp(17px, 13px + .7vw, 23px); font-weight: 800; letter-spacing: .08em; }
.r23-ba__fig small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #6a645c; }
.r23-ba__fig--after figcaption { color: #a9843e; }
.r23-ba__arr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #a9843e; color: #fff; }
.r23-ba__arr svg { width: 16px; height: 16px; fill: currentColor; }
.r23-ba__cap { grid-column: 1 / -1; margin: 4px 0 0; font-size: clamp(15px, 14px + .2vw, 17px); font-weight: 700; letter-spacing: -0.02em; }
.r23-ba__cap span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: #8a8378; }
.r23-ba__dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.r23-ba__dots button { width: 28px; height: 4px; padding: 0; border: 0; background: #d8cfc0; cursor: pointer; transition: background-color .3s, width .3s; }
.r23-ba__dots button[aria-current="true"] { width: 44px; background: #a9843e; }
.r23-ba__more { margin: 18px 0 0; font-size: 15px; }
.r23-ba__more a { color: #6f5527; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) {
  .r23-ba { padding-top: 70px; }
  .r23-ba__in { grid-template-columns: none; min-height: 0; }
  .r23-ba__body { grid-column: auto; }
  /* 모바일: 원장을 판 맨 위에 두고 머리가 판 위로 나오게 */
  .r23-ba__doc { position: relative; left: auto; bottom: auto; order: -1; justify-self: center; width: min(76%, 320px); height: auto; margin: -56px 0 0; overflow: visible; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
  .r23-ba__doc img { width: 100%; height: auto; object-fit: initial; }
  .r23-ba__sign { position: absolute; left: auto; right: 0; bottom: 14px; max-width: 70%; padding: 10px 14px; }
  .r23-ba__body { padding: 16px 0 50px; }
  .r23-ba__arr { width: 34px; height: 34px; }
}

/* ───── ‘단 한 번!’ + 논문 · 저서: 제목 가운데 · 왼쪽 글(문구 4개 + 근거 카드 2장) · 오른쪽 원장 사진 ───── */
.r23-band { position: relative; overflow: hidden; padding: clamp(80px, 5vw + 40px, 130px) 0 0; background: #15130f; color: #fff; isolation: isolate; }
.r23-band__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.r23-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(.55) brightness(.36); transform: scale(1.1); }
.r23-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 30% 60%, rgba(214,176,104,.12), transparent 70%), linear-gradient(180deg, rgba(21,19,15,.5), rgba(21,19,15,.15) 40%, rgba(21,19,15,.8)); }
.r23-band__t { margin: 0; text-align: center; font-size: clamp(32px, 20px + 2.2vw, 58px); line-height: 1.3; font-weight: 300; letter-spacing: -0.045em; }
.r23-band__t strong { font-weight: 800; color: #e2c27f; }
.r23-band__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 80px); align-items: end; margin-top: clamp(36px, 3vw + 12px, 60px); }
.r23-band__txt { align-self: center; padding-bottom: clamp(60px, 5vw, 100px); }
.r23-band__pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(214,176,104,.35); }
.r23-band__pts li { display: flex; align-items: center; gap: 12px; padding: clamp(18px, 1.4vw, 24px) 6px; border-bottom: 1px solid rgba(214,176,104,.2); font-size: clamp(18px, 14px + .6vw, 23px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; }
.r23-band__pts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d6b068; box-shadow: 0 0 0 5px rgba(214,176,104,.16); }
.r23-band__pts b { color: #e2c27f; }
.r23-band__ev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: clamp(22px, 2vw, 34px) 0 0; padding: 0; list-style: none; }
.r23-ev { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(214,176,104,.22); }
.r23-ev__ph { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #ebe5db; }
.r23-ev__ph img { width: 100%; height: 100%; object-fit: cover; }
.r23-ev__ph--paper img { object-position: 50% 0; }
.r23-ev__y { display: block; font-size: 26px; line-height: 1; font-weight: 300; color: #d6b068; }
.r23-ev__t { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; font-weight: 700; }
.r23-ev__s { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); }
.r23-band__doc { margin: 0; align-self: end; }
.r23-band__doc img { display: block; width: 100%; max-width: 480px; height: auto; margin-left: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
@media (max-width: 1023px) {
  .r23-band__grid { grid-template-columns: none; }
  .r23-band__txt { padding-bottom: 0; }
  .r23-band__pts { grid-template-columns: none; }
  .r23-band__ev { grid-template-columns: none; }
  .r23-band__doc img { width: min(72%, 320px); margin: 24px auto 0; }
}

/* ───── 재식술 대상 + 증례 합침(대상 B안 바탕 유지): 사진 카드 4 + 글 카드 2 ───── */
.r23-tg__sub { margin: 14px auto 0; max-width: 620px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); }
.r23-tg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(36px, 3vw + 12px, 56px) 0 0; padding: 0; list-style: none; }
.r23-tc { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(214,176,104,.22); background: rgba(255,255,255,.04); transition: border-color .3s, transform .3s; }
.r23-tc:hover { border-color: rgba(214,176,104,.7); transform: translateY(-4px); }
.r23-tc__ph { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: #0f0e0b; }
.r23-tc__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.r23-tc:hover .r23-tc__ph img { transform: scale(1.05); }
.r23-tc__tag { position: absolute; left: 12px; top: 12px; padding: 4px 12px; background: rgba(0,0,0,.62); font-size: 12.5px; font-weight: 600; color: #fff; }
.r23-tc__tx { display: grid; align-content: start; gap: 10px; padding: 18px 18px 22px; }
.r23-tc__no { font-size: 13px; letter-spacing: .18em; color: #d6b068; }
.r23-tc__tx h3 { margin: 0; font-size: clamp(16px, 14px + .35vw, 19px); line-height: 1.45; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.r23-tg__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.r23-tg__more li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid rgba(214,176,104,.22); background: rgba(255,255,255,.04); }
.r23-tg__more .r23-tc__no { flex: none; }
.r23-tg__more h3 { margin: 0; font-size: clamp(16px, 14px + .35vw, 19px); line-height: 1.45; font-weight: 700; color: #fff; }
.r21-tg .btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.r21-tg .btn--line, .r23-rv .btn--line { background: transparent; border-color: rgba(214,176,104,.6); color: #fff; }
.r21-tg .btn--line:hover, .r23-rv .btn--line:hover { background: #d6b068; border-color: #d6b068; color: #1b1916; }
@media (max-width: 1023px) {
  .r23-tg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .r23-tc__tx { padding: 12px 12px 16px; gap: 6px; }
  .r23-tg__more { grid-template-columns: none; gap: 10px; }
}

/* ───── 네이버 후기: 어두운 바탕 · 큰 윤곽 글자 · 2장씩 넘기는 직각 카드(별점 대신 인증 표시) · 화살표 · 진행 막대 ───── */
.r23-rv { position: relative; overflow: hidden; padding: clamp(90px, 6vw + 40px, 150px) 0; background: #14120e; color: #fff; }
.r23-rv__hd { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.r23-rv__bgt { position: absolute; left: -0.03em; top: -0.42em; margin: 0; font-size: clamp(80px, 9vw, 170px); line-height: 1; font-weight: 800; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px rgba(214,176,104,.16); pointer-events: none; white-space: nowrap; }
.r23-rv__lab { position: relative; margin: 0; font-size: 15px; letter-spacing: .04em; color: #fff; }
.r23-rv__lab i { margin-right: 10px; font-style: normal; color: #d6b068; }
.r23-rv__t { position: relative; margin: 12px 0 0; font-size: clamp(32px, 22px + 2vw, 56px); line-height: 1.2; font-weight: 800; letter-spacing: -0.045em; }
.r23-rv__t em { font-style: normal; color: #d6b068; }
.r23-rv__sub { position: relative; margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.66); }
.r23-rv__sub b { color: #e2c27f; }
.r23-rv__nav { display: flex; gap: 12px; }
.r23-rv__nav button { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; transition: background-color .25s, border-color .25s; }
.r23-rv__nav button:last-child { background: #a9843e; border-color: #a9843e; }
.r23-rv__nav button:hover { background: #d6b068; border-color: #d6b068; color: #1b1916; }
.r23-rv__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.r23-rv__vp { overflow: hidden; margin-top: clamp(36px, 3vw + 12px, 56px); }
.r23-rv__track { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .r23-rv__track { transition: none; } }
.r23-rv__it { flex: 0 0 calc((100% - 24px) / 2); }
.r23-rc { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; height: 100%; margin: 0; padding: clamp(26px, 2vw + 12px, 40px); background: #221f19; border-radius: 0; overflow: hidden; transition: transform .35s, background-color .35s; }
.r23-rc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #d6b068; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.r23-rc:hover { transform: translateY(-6px); background: #29251e; }
.r23-rc:hover::after { transform: scaleX(1); }
.r23-rc__no { position: absolute; right: 22px; top: 6px; font-size: 92px; line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); pointer-events: none; }
.r23-rc__q { position: absolute; right: 30px; bottom: 30px; font-size: 220px; line-height: .6; font-family: Georgia, serif; color: rgba(255,255,255,.04); pointer-events: none; }
.r23-rc__badge { position: relative; justify-self: start; padding: 4px 12px; border: 1px solid rgba(214,176,104,.6); font-size: 12.5px; font-weight: 600; color: #e2c27f; }
.r23-rc__h { position: relative; margin: 0; font-size: clamp(20px, 15px + .9vw, 27px); line-height: 1.4; font-weight: 800; letter-spacing: -0.035em; }
.r23-rc__h::before { content: "“"; margin-right: 2px; color: #d6b068; }
.r23-rc__h::after { content: "”"; margin-left: 2px; color: #d6b068; }
.r23-rc__b { position: relative; margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.r23-rc__b mark { background: none; color: inherit; }
.r23-rc__who { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.r23-rc__av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #d6b068, #8f6a2c); font-size: 18px; font-weight: 800; color: #1b1916; }
.r23-rc__nm { display: grid; gap: 2px; font-size: 16px; font-weight: 700; }
.r23-rc__nm small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); }
.r23-rc__who a { font-size: 13px; color: #e2c27f; text-decoration: underline; text-underline-offset: 3px; }
.r23-rv__bar { display: flex; justify-content: center; gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.r23-rv__bar button { width: 48px; height: 4px; padding: 0; border: 0; background: rgba(255,255,255,.18); cursor: pointer; transition: background-color .3s; }
.r23-rv__bar button[aria-current="true"] { background: #d6b068; }
.r23-rv .btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.r23-rv__note { margin: 22px 0 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.45); }
@media (max-width: 1023px) {
  .r23-rv__hd { grid-template-columns: none; }
  .r23-rv__nav button { width: 48px; height: 48px; }
  .r23-rv__it { flex-basis: 100%; }
  .r23-rv__track { gap: 16px; }
  .r23-rc__no { font-size: 70px; }
  .r23-rv__bar button { width: 28px; }
}