/* 28차 미리보기(2026-11-02 · ko-ver2) — 대표진료 4쪽. 생성 batch-1102/r28.py */

/* ───── 배너(세라믹 · 무통 마취): 재식술 · 이식술 배너와 같은 분위기의 새 그림(이미지 생성 워커) — 피사체가 오른쪽 ───── */
.r28-hero .shero__bg { object-position: 72% 50%; }
@media (max-width: 1023px) { .r28-hero .shero__bg { object-position: 50% 50%; } }

/* ───── 세라믹 과정 카드: 사진이 카드 가장자리까지 꽉 차게(위 · 좌우 여백 없음, 번호는 사진 위) ───── */
.r28ce-pa .r25-pc { position: relative; padding: 0 0 24px; }
.r28ce-pa .r25-pc__no { position: absolute; left: 20px; top: 16px; z-index: 2; margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.r28ce-pa .r25-pc__in { padding: 18px 22px 0; }
@media (max-width: 767px), (hover: none) {
  .r28ce-pa .r25-pc__no { color: #fff; }
  .r28ce-pa .r25-pc__in { padding: 18px 20px 0; }
}

/* ───── 무통 마취 · 마스터 코스(짧게): 수료증 + 한 줄 + 연표 4줄 + 사진 4장 ───── */
.r28-mc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(40px, 4vw, 72px); }
.r28-mc__cert { margin: 0; padding: clamp(12px, 1.2vw, 20px); background: #fff; box-shadow: 0 34px 60px -42px rgba(40,30,15,.55); }
.r28-mc__cert img { display: block; width: 100%; height: auto; }
.r28-mc__cert figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #8a8378; }
.r28-mc__lead { margin: 0; font-size: clamp(22px, 16px + 1vw, 31px); line-height: 1.45; font-weight: 700; letter-spacing: -0.035em; color: #1b1916; word-break: keep-all; }
.r28-mc__lead mark { background: none; color: #a9843e; }
.r28-mc__tl { margin: clamp(26px, 2.4vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid #e1d9cb; }
.r28-mc__tl li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid #e1d9cb; font-size: 16px; line-height: 1.5; color: #3d3934; word-break: keep-all; }
.r28-mc__tl b { font-weight: 700; letter-spacing: .02em; color: #a9843e; }
.r28-mc__tl .is-key span { font-weight: 700; color: #1b1916; }
.r28-mc__ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); margin: clamp(48px, 5vw, 88px) 0 0; padding: 0; list-style: none; }
.r28-mc__ph figure { margin: 0; }
.r28-mc__ph span { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e3d8; }
.r28-mc__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.r28-mc__ph li:hover img { transform: scale(1.05); }
.r28-mc__ph figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: #4a4540; word-break: keep-all; }
.r28-mc__ph figcaption b { margin-right: 8px; font-weight: 600; color: #a9843e; }
@media (max-width: 1023px) {
  .r28-mc__grid { grid-template-columns: 1fr; }
  .r28-mc__ph { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) { .r28-mc__tl li { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 13px 0; font-size: 15px; } }

/* ───── 이식술 ‘두 가지’ B안: 카드 2장 나란히(사진 위 · 글 아래 · 직각 · 마우스를 올리면 떠오르고 아래 금색 선) ───── */
.r28-wb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); max-width: 1180px; margin: clamp(48px, 4vw, 76px) auto 0; }
.r28-wb__card { position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid #e6dfd3; background: #fff; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s; }
.r28-wb__card::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: 0; height: 3px; background: #a9843e; transition: width .55s cubic-bezier(.2,.7,.2,1); }
.r28-wb__card:hover { transform: translateY(-6px); border-color: #c9a96a; box-shadow: 0 28px 50px -32px rgba(40,30,15,.45); }
.r28-wb__card:hover::after { width: calc(100% + 2px); }
.r28-wb__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1b1916; }
.r28-wb__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.r28-wb__card:hover .r28-wb__img img { transform: scale(1.04); }
.r28-wb__no { position: absolute; left: 22px; top: 12px; margin: 0; font-size: clamp(54px, 5vw, 84px); line-height: 1; font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.92); text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.r28-wb__txt { flex: 1; padding: clamp(24px, 2.4vw, 36px); }
.r28-wb__en { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .24em; color: #a9843e; }
.r28-wb__card h3 { margin: 10px 0 0; padding-bottom: 16px; border-bottom: 1px solid #1b1916; font-size: clamp(20px, 16px + .8vw, 26px); line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; color: #1b1916; word-break: keep-all; }
.r28-wb__txt > p:not(.r28-wb__en) { margin: 16px 0 0; font-size: 15.5px; line-height: 1.75; color: #4a4540; word-break: keep-all; }
.r28-wb .rt-meta { font-size: 13.5px; color: #6b655c; }
@media (max-width: 767px) { .r28-wb__grid { grid-template-columns: 1fr; } }

/* ───── 이식술 ‘두 가지’ C안: 어두운 바탕 · 왼쪽 두 줄(누르거나 마우스를 올리면 바뀜) · 오른쪽 큰 사진과 설명 ───── */
.r28-wc { background: #1b1916; color: #fff; }
.r28-wc .r26-hd__lab, .r28-wc .r26-hd .r26-hd__t { color: #fff; }
.r28-wc .r26-hd__bg { -webkit-text-stroke-color: rgba(201,169,106,.28); }
.r28-wc__box { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); max-width: 1180px; margin: clamp(48px, 4vw, 76px) auto 0; align-items: start; }
.r28-wc__tabs { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
.r28-wc__tab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; width: 100%; padding: clamp(22px, 2vw, 32px) 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: none; color: rgba(255,255,255,.5); font: inherit; text-align: left; cursor: pointer; transition: color .35s; position: relative; }
.r28-wc__tab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #c9a96a; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.r28-wc__tab b { font-size: clamp(40px, 3.4vw, 60px); line-height: .9; font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45); transition: -webkit-text-stroke-color .35s; }
.r28-wc__tab small { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .24em; color: #c9a96a; }
.r28-wc__tab span { font-size: clamp(18px, 14px + .7vw, 23px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; word-break: keep-all; }
.r28-wc__tab:hover, .r28-wc__tab[aria-selected="true"] { color: #fff; }
.r28-wc__tab[aria-selected="true"]::after { width: 100%; }
.r28-wc__tab:hover b { -webkit-text-stroke-color: rgba(255,255,255,.85); }
.r28-wc__tab[aria-selected="true"] b { -webkit-text-stroke-color: #c9a96a; }
.r28-wc__panel { animation: r28wc .6s cubic-bezier(.2,.7,.2,1); }
.r28-wc__panel[hidden] { display: none; }
.r28-wc__panel figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.r28-wc__panel img { width: 100%; height: 100%; object-fit: cover; }
.r28-wc__panel p { margin: 22px 0 0; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.82); word-break: keep-all; }
.r28-wc .rt-meta { font-size: 13.5px; color: rgba(255,255,255,.6); }
.r28-wc .rt-label { border-color: rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.75); }
.r28-wc .btn--line { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
.r28-wc .btn--line:hover { background: #a9843e; border-color: #a9843e; }
@keyframes r28wc { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) { .r28-wc__box { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .r28-wc__panel { animation: none; } }

/* ───── 무통 마취 CTA 바탕 시안(anesthesia.preview.cta-a · b · c): 피사체가 글 상자 밖에 보이게 ───── */
.r28-cta--a .v7-cta__bg img { object-position: 0% 50%; }
.r28-cta--b .v7-cta__bg img { object-position: 70% 50%; }
.r28-cta--c .v7-cta__bg img { object-position: 50% 30%; }
@media (max-width: 767px) {
  .r28-cta--a .v7-cta__bg img { object-position: 86% 50%; }
  .r28-cta--b .v7-cta__bg img { object-position: 74% 50%; }
}