/* 31차 미리보기(2026-11-02 · ko-ver2) — 배너 · 메인 카드 · 이야기 탭 · FAQ 분류 · 과정 일러스트. 생성 batch-1102d/r31.py */

/* ───── 새 배너(진료비용 · 후기 · FAQ · 이야기): 피사체가 오른쪽 ───── */
.r31-hero .shero__bg { object-position: 72% 50%; }
@media (max-width: 1023px) { .r31-hero .shero__bg { object-position: 50% 50%; } }
.r31-hero--dr .shero__bg { object-position: 100% 30%; }                      /* 이야기: 원장 사진이 오른쪽 끝 */
@media (max-width: 1023px) { .r31-hero--dr .shero__bg { object-position: 50% 0%; } }

/* ───── 메인 ‘왜 재식술은’ 카드 01: 사진만(글자 얹지 않음) — 사진 위 어두운 그러데이션도 없음 ───── */
.r5-wc.r31-wc-img .r5-wc__ph::after { content: none; }

/* ───── 이야기(유튜브 · 블로그) 탭: 다른 쪽 배너 단추와 같은 모양(금색 · 유리 알약) ───── */
.r31-lhero .r5-ltabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 1.4vw + 16px, 44px); }
.r31-lhero .r5-lt { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 7px; border: 1px solid rgba(255,255,255,.34); border-radius: 25px;
  background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 15px; transition: background-color .2s, border-color .2s; }
.r31-lhero .r5-lt:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.72); }
.r31-lhero .r5-lt__ic { grid-row: auto; width: 36px; height: 36px; background: rgba(255,255,255,.14); }
.r31-lhero .r5-lt__ic svg { width: 20px; height: 20px; }
.r31-lhero .r5-lt__k { font-size: 15px; line-height: 1; font-weight: 700; }
.r31-lhero .r5-lt__n { font-size: 13px; line-height: 1; color: rgba(255,255,255,.72); }
.r31-lhero .r5-lt[aria-selected="true"] { border-color: transparent; background: var(--gold-btn); color: #fff; }
.r31-lhero .r5-lt[aria-selected="true"] .r5-lt__ic { background: rgba(255,255,255,.22); color: #fff; }
.r31-lhero .r5-lt[aria-selected="true"] .r5-lt__n { color: rgba(255,255,255,.86); }
@media (max-width: 767px) {
  .r31-lhero .r5-ltabs { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 320px; margin-top: 28px; }
  .r31-lhero .r5-lt { justify-content: flex-start; padding: 0 20px 0 7px; }
}

/* ───── FAQ 분류: 한 줄(좁으면 옆으로 밀어 보기) ───── */
.r31-cats.bp-faqp__cats { flex-wrap: nowrap; justify-content: center; gap: 6px; max-width: none; overflow-x: auto; scrollbar-width: none; }
.r31-cats.bp-faqp__cats::-webkit-scrollbar { display: none; }
.r31-cats.bp-faqp__cats a { flex: none; gap: 6px; padding: 9px 12px; font-size: 14px; white-space: nowrap; }
@media (max-width: 1279px) { .r31-cats.bp-faqp__cats { justify-content: flex-start; } }

/* ───── 과정 카드(재식술 · 이식술 · 세라믹): 일러스트가 카드를 꽉 채움 — 무통 마취와 같음(r29an-pa) ───── */