/* 25차 미리보기(2026-11-01 · ko-ver2) — 재식술: ‘단 한 번!’ 치아 가운데 · 논문/저서 카드 삭제 · 전후 사진 제목 한 줄 + 영문 소제목 · 대상 글 카드 6개 한 줄 · 후기 흐르는 줄 · 과정 시안 A(사진 카드 가로 줄) · B(3칸 카드). 생성 batch-1101d/r25.py */

/* ───── ‘단 한 번!’ 띠: 치아(가운데 묶음)를 제목 아래 가운데로 ───── */
.r25-band .r20-band__fig { margin-inline: auto; padding-bottom: clamp(60px, 4vw, 90px); }
/* 치아 묶음이 가운데로 오면 오른쪽 문구와 원장 사진이 겹친다 → 묶음 폭을 줄이고, 원장은 묶음 오른쪽 끝보다 오른쪽에만 둔다(좁은 화면에서는 화면 끝에 걸쳐 잘림).
   1024~1279px 는 자리가 모자라 원장 사진을 숨긴다(참고 화면처럼 치아 + 문구만) */
@media (min-width: 1280px) {
  .r25-band { --figw: clamp(860px, 52vw, 960px); }
  .r25-band .r20-band__fig { width: min(100%, var(--figw)); grid-template-columns: minmax(0, 1fr) clamp(240px, 16vw, 300px) minmax(0, 1fr); }
  .r25-band .r20-band__doc { --docw: clamp(260px, 24vw, 500px); width: var(--docw); right: auto; left: max(calc(50% + var(--figw) / 2 + 12px), calc(100% - var(--docw))); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .r25-band .r20-band__doc { display: none; } }

/* ───── 전후 사진: 영문 소제목 + 한 줄 제목(다른 섹션과 같은 .eyebrow · .s-h2) ───── */
.r24-ba__hd .eyebrow { margin-bottom: clamp(10px, 6px + .6vw, 16px); }
.r24-ba__t.s-h2 { font-size: clamp(30px, 26.3px + 1.026vw, 46px); line-height: 1.42; font-weight: 400; letter-spacing: -0.035em; }
.r24-ba__t.s-h2 em { font-weight: 700; }

/* ───── 대상: 사진 없이 글 카드 6개 한 줄(1024~1279px 3칸 · 모바일 2칸) ───── */
.r25-tg__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: clamp(36px, 3vw + 12px, 56px) 0 0; padding: 0; list-style: none; }
.r25-tc { position: relative; display: grid; align-content: start; gap: 18px; min-height: clamp(190px, 14vw, 230px); padding: 26px 22px 28px; border: 1px solid rgba(214,176,104,.22); background: rgba(255,255,255,.04); overflow: hidden; transition: border-color .3s, transform .3s, background-color .3s; }
.r25-tc::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); }
.r25-tc:hover { border-color: rgba(214,176,104,.6); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.r25-tc:hover::after { transform: scaleX(1); }
.r25-tc__no { display: flex; align-items: center; gap: 10px; font-size: 26px; line-height: 1; font-weight: 300; color: #d6b068; }
.r25-tc__no::after { content: ""; width: 22px; height: 1px; background: rgba(214,176,104,.6); }
.r25-tc h3 { margin: 0; font-size: clamp(16px, 14px + .3vw, 18.5px); line-height: 1.5; font-weight: 700; letter-spacing: -0.03em; color: #fff; word-break: keep-all; }
@media (max-width: 1279px) { .r25-tg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .r25-tg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .r25-tc { min-height: 0; gap: 12px; padding: 18px 14px 20px; }
  .r25-tc__no { font-size: 21px; }
  .r25-tc h3 { font-size: 15px; }
}

/* ───── 네이버 후기: 화면 폭 가득 카드 4장쯤 · 오른쪽 → 왼쪽으로 계속 흐름(마우스 · 초점이 있으면 멈춤) ───── */
.r25-rv .r23-rv__hd { grid-template-columns: none; }
.r25-rv .r23-rv__vp { margin-inline: calc(50% - 50vw); padding: 8px 0 6px; }
.r25-rv .r23-rv__track { width: max-content; gap: 24px; transition: none; }
.r25-rv .r23-rv__it { flex: 0 0 clamp(290px, 22vw, 400px); }
.r25-rv .r23-rc { gap: 12px; padding: clamp(24px, 1.2vw + 12px, 34px); }
.r25-rv .r23-rc__no { font-size: 76px; }
.r25-rv .r23-rc__h { font-size: clamp(19px, 15px + .55vw, 23px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r25-rv .r23-rc__b { font-size: 15px; }
.r25-rv .r23-rc__q { font-size: 180px; right: 22px; bottom: 26px; }
.r25-rv.is-flow .r23-rv__track { animation: r25Flow var(--dur, 90s) linear infinite; }
.r25-rv.is-flow .r23-rv__vp:hover .r23-rv__track, .r25-rv.is-flow .r23-rv__vp:focus-within .r23-rv__track { animation-play-state: paused; }
@keyframes r25Flow { to { transform: translateX(calc(-1 * var(--dist, 50%))); } }
.r25-rv:not(.is-flow) .r23-rv__vp { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gut); }
.r25-rv:not(.is-flow) .r23-rv__it { scroll-snap-align: start; }
@media (max-width: 1023px) {
  .r25-rv .r23-rv__it { flex-basis: 78vw; }
  .r25-rv .r23-rv__track { gap: 14px; }
  .r25-rv .r23-rc__no { font-size: 64px; }
}

/* ───── 과정 시안 A: 가운데 제목 · 세로로 긴 사진 카드가 가로로 이어짐(밀어서 넘김) · 마우스를 올리면 설명 ───── */
.r25-pa { padding: clamp(90px, 6vw + 50px, 150px) 0; background: #f6f3ee; color: var(--ink, #1b1916); overflow: hidden; }
.r25-pa__hd { text-align: center; }
.r25-pa__eb { display: inline-flex; align-items: center; gap: 14px; }
.r25-pa__eb::before, .r25-pa__eb::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.r25-pa__lead { max-width: 640px; margin: 16px auto 0; font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.75; color: #5f5a52; word-break: keep-all; }
.r25-pa__vp { margin-top: clamp(40px, 3vw + 14px, 64px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2)); scrollbar-width: none; }
.r25-pa__vp::-webkit-scrollbar { display: none; }
.r25-pa__track { display: flex; gap: 20px; width: max-content; margin: 0; padding: 0 max(var(--gut), calc((100vw - var(--maxw)) / 2)); list-style: none; }
.r25-pc { position: relative; flex: 0 0 clamp(280px, 22vw, 340px); aspect-ratio: 3 / 4; overflow: hidden; background: #1b1916; color: #fff; scroll-snap-align: start; outline-offset: 3px; }
.r25-pc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.r25-pc::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,18,14,.45) 0%, rgba(20,18,14,0) 26%, rgba(20,18,14,.15) 48%, rgba(20,18,14,.88) 100%); transition: background-color .45s; }
.r25-pc__no { position: absolute; z-index: 2; left: 26px; top: 24px; display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .14em; }
.r25-pc__no::after { content: ""; width: 22px; height: 1px; background: currentColor; }
.r25-pc__in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 0 26px 28px; }
.r25-pc__ph { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #e2c27f; }
.r25-pc__ph small { margin-left: 6px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.7); }
.r25-pc h3 { margin: 0; font-size: clamp(19px, 16px + .5vw, 23px); line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; }
.r25-pc__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.r25-pc__more > div { min-height: 0; overflow: hidden; }
.r25-pc__more p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.86); word-break: keep-all; }
.r25-pc__more .r25-pc__cap { font-size: 12px; color: rgba(255,255,255,.6); }
.r25-pc:hover::before, .r25-pc:focus-within::before, .r25-pc:focus::before { background-color: rgba(20,18,14,.55); }
.r25-pc:hover > img { transform: scale(1.06); }
.r25-pc:hover .r25-pc__more, .r25-pc:focus .r25-pc__more, .r25-pc:focus-within .r25-pc__more { grid-template-rows: 1fr; }
.r25-pa__ctl { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.r25-pa__bar { position: relative; flex: 1; height: 2px; background: #ddd5c8; }
.r25-pa__bar i { position: absolute; left: 0; top: 0; height: 100%; background: #a9843e; transition: left .2s, width .2s; }
.r25-pa__ctl button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #d8cfc0; border-radius: 50%; background: #fff; color: #1b1916; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.r25-pa__ctl button:hover:not(:disabled) { background: #a9843e; border-color: #a9843e; color: #fff; }
.r25-pa__ctl button:disabled { opacity: .35; cursor: default; }
.r25-pa__ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .r25-pc > img, .r25-pc__more { transition: none; } }
/* 모바일 · 터치: 사진 아래에 설명이 늘 보인다 */
@media (max-width: 767px), (hover: none) {
  .r25-pc { display: flex; flex-direction: column; aspect-ratio: auto; background: #fff; color: var(--ink, #1b1916); }
  .r25-pc > img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .r25-pc::before { bottom: auto; aspect-ratio: 4 / 3; background: linear-gradient(180deg, rgba(20,18,14,.5) 0%, rgba(20,18,14,0) 40%); }
  .r25-pc__no { color: #fff; }
  .r25-pc__in { position: static; padding: 18px 20px 22px; }
  .r25-pc__ph { color: #a9843e; }
  .r25-pc__ph small { color: #8a8378; }
  .r25-pc__more { grid-template-rows: 1fr; }
  .r25-pc__more p { color: #4a4540; }
  .r25-pc__more .r25-pc__cap { color: #8a8378; }
}
@media (max-width: 767px) {
  .r25-pc { flex-basis: 80vw; }
  .r25-pa__track { gap: 12px; }
  .r25-pa__ctl button { width: 40px; height: 40px; }
}

/* ───── 과정 시안 B: 가운데 제목 · 어두운 카드 3칸 × 2줄(번호 점선 원 · 단계 · 제목 · 설명), 마우스를 올리면 사진이 비침 ───── */
.r25-pb { padding: clamp(90px, 6vw + 50px, 150px) 0; background: #f6f3ee; color: var(--ink, #1b1916); }
.r25-pb__hd { text-align: center; }
.r25-pb__lead { max-width: 640px; margin: 16px auto 0; font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.75; color: #5f5a52; word-break: keep-all; }
.r25-pb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(40px, 3vw + 14px, 64px) 0 0; padding: 0; list-style: none; }
.r25-pb__c { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 22vw, 340px); padding: clamp(28px, 1.6vw + 14px, 44px); overflow: hidden; background: #1f1c17; color: #fff; isolation: isolate; outline-offset: 3px; }
.r25-pb__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .9s cubic-bezier(.2,.7,.2,1); }
.r25-pb__c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,18,14,.9) 0%, rgba(20,18,14,.62) 100%); opacity: 0; transition: opacity .5s; }
.r25-pb__c:hover .r25-pb__bg, .r25-pb__c:focus-within .r25-pb__bg, .r25-pb__c:focus .r25-pb__bg { opacity: 1; transform: none; }
.r25-pb__c:hover::before, .r25-pb__c:focus-within::before, .r25-pb__c:focus::before { opacity: 1; }
.r25-pb__ring { position: absolute; right: clamp(20px, 1.4vw + 8px, 30px); top: clamp(20px, 1.4vw + 8px, 30px); display: grid; place-items: center; width: 74px; height: 74px; border: 2px dotted rgba(226,194,127,.85); border-radius: 50%; font-size: 22px; font-weight: 300; color: #e2c27f; }
.r25-pb__ph { margin: 34px 0 0; font-size: 14.5px; font-weight: 600; color: #e2c27f; }
.r25-pb__ph small { margin-left: 6px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6); }
.r25-pb__c h3 { margin: 8px 0 0; padding-right: 70px; font-size: clamp(20px, 16px + .6vw, 25px); line-height: 1.35; font-weight: 800; letter-spacing: -0.035em; word-break: keep-all; }
.r25-pb__tx { margin-top: 20px; }
.r25-pb__tx p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.8); word-break: keep-all; }
.r25-pb__cap { margin: auto 0 0; padding-top: 14px; font-size: 12px; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .5s; }
.r25-pb__c:hover .r25-pb__cap, .r25-pb__c:focus-within .r25-pb__cap, .r25-pb__c:focus .r25-pb__cap { opacity: 1; }
@media (max-width: 1023px) { .r25-pb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px), (hover: none) {
  .r25-pb__bg { opacity: .32; transform: none; }
  .r25-pb__c::before { opacity: .55; }
  .r25-pb__cap { opacity: 1; }
}
@media (max-width: 767px) {
  .r25-pb__grid { grid-template-columns: none; gap: 12px; }
  .r25-pb__c { min-height: 0; padding: 26px 22px; }
  .r25-pb__ring { width: 58px; height: 58px; font-size: 18px; }
  .r25-pb__ph { margin-top: 18px; }
  .r25-pb__c h3 { padding-right: 60px; }
}
@media (prefers-reduced-motion: reduce) { .r25-pb__bg, .r25-pb__c::before, .r25-pb__cap { transition: none; } }