/* 5차 미리보기(2026-10-27 오후 ‘메인 · 메뉴 재구성’) — *.preview.* 에만 붙는다. 생성기 ~/tmp/renewal-src/build/batch-1027/r5.py
   문구는 섹션마다 핵심 한 줄, 참고 사이트는 배치 · 연출만(복제 아님). 밝음/어두움 교차, 경계는 곧은 직선 */

.r5-why .h2, .r5-sig .h2, .r5-media .h2, .r4-ba .h2 { font-size: clamp(32px, 26px + 1.3vw, 48px); }

/* ── 3 슬로건 + 원장 사진: 큰 글자 왼쪽, 원장 누끼 오른쪽 아래(섹션 바닥에 붙여 잘린 곳을 숨김) ── */
.r5-dr { position: relative; display: flex; align-items: center; min-height: clamp(600px, 44vw + 60px, 860px); overflow: hidden; color: #fff;
  background: radial-gradient(ellipse 46% 64% at 74% 70%, rgba(214,176,104,.26), rgba(214,176,104,0) 70%), linear-gradient(180deg, #14120f, #1b1916 60%, #221e19); }
.r5-dr__bg { position: absolute; left: 0; right: 0; bottom: 14%; margin: 0; white-space: nowrap; font-size: clamp(90px, 11vw, 210px); line-height: 1; font-weight: 900; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(214,176,104,.2); pointer-events: none; }
.r5-dr__track { display: inline-flex; animation: r5Marq 70s linear infinite; }
.r5-dr__track > span { flex: none; padding-right: .45em; }
@keyframes r5Marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .r5-dr__track { animation: none; } }
.r5-dr__in { position: relative; z-index: 2; padding-block: clamp(90px, 6vw + 40px, 140px); }
.r5-dr__t { display: grid; gap: .18em; max-width: 58%; margin: 0; }
.r5-dr__l1 { font-size: clamp(30px, 2.4vw + 10px, 54px); line-height: 1.25; font-weight: 300; letter-spacing: -0.045em; color: rgba(255,255,255,.9); }
.r5-dr__l2 { font-size: clamp(60px, 6vw + 14px, 132px); line-height: 1.04; font-weight: 900; letter-spacing: -0.055em; color: #d6b068;
  background: linear-gradient(100deg, #f3dca6 0%, #d6b068 45%, #a9843e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.r5-dr__name { display: flex; align-items: center; gap: 14px; margin: clamp(28px, 2vw + 10px, 44px) 0 0; font-size: clamp(16px, 15px + .3vw, 20px); color: rgba(255,255,255,.75); }
.r5-dr__name::before { content: ""; flex: none; width: 44px; height: 1px; background: #d6b068; }
.r5-dr__name b { font-weight: 700; color: #fff; }
.r5-dr__ph { position: absolute; z-index: 1; right: max(0px, calc((100% - var(--maxw)) / 2)); bottom: 0; width: min(48%, 740px); margin: 0; }
.r5-dr__ph img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
@media (max-width: 1023px) {
  .r5-dr { display: block; min-height: 0; text-align: center; }
  .r5-dr__in { padding: 72px var(--gut) 0; }
  .r5-dr__t { max-width: none; }
  .r5-dr__l1 { font-size: clamp(22px, 5.6vw, 32px); }
  .r5-dr__l2 { font-size: clamp(48px, 13vw, 84px); }
  .r5-dr__name { justify-content: center; font-size: 15px; }
  .r5-dr__ph { position: relative; right: auto; width: min(100%, 560px); margin: 30px auto 0; }
  .r5-dr__bg { bottom: 18%; font-size: 92px; }
}

/* ── 4 Why: 사진 카드 3장 — 위 아이콘 · 번호, 아래 제목 + 한 줄 ── */
.r5-why { padding: clamp(80px, 5vw + 50px, 140px) 0; background: var(--n-warm, #f6f3ee); }
.r5-why__head, .r5-sig__head, .r5-media__head { text-align: center; }
.r5-why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: clamp(40px, 2vw + 28px, 64px) 0 0; padding: 0; list-style: none; }
.r5-wc { position: relative; isolation: isolate; height: clamp(400px, 26vw + 90px, 520px); overflow: hidden; border-radius: 20px; background: #1b1916; color: #fff; box-shadow: 0 26px 50px -30px rgba(40,30,15,.6); }
.r5-wc__ph { position: absolute; inset: 0; z-index: -1; }
.r5-wc__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.r5-wc:hover .r5-wc__ph img { transform: scale(1.06); }
.r5-wc__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,25,22,.25) 0%, rgba(27,25,22,.35) 30%, rgba(27,25,22,.8) 60%, rgba(27,25,22,.96) 100%); }
.r5-wc__top { position: absolute; left: 26px; right: 26px; top: 24px; display: flex; align-items: center; justify-content: space-between; }
.r5-wc__ic { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(214,176,104,.75); border-radius: 50%; background: rgba(27,25,22,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.r5-wc__ic svg { width: 28px; height: 28px; fill: none; stroke: #d6b068; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.r5-wc__no { font-size: 15px; letter-spacing: .22em; color: rgba(255,255,255,.8); }
.r5-wc__tx { position: absolute; left: 28px; right: 28px; bottom: 30px; display: grid; gap: 14px; }
.r5-wc__t { font-size: clamp(23px, 18px + .9vw, 31px); line-height: 1.34; font-weight: 700; letter-spacing: -0.035em; }
.r5-wc__d { padding-top: 14px; border-top: 1px solid rgba(214,176,104,.5); font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.55; color: rgba(255,255,255,.85); }
.r5-wc__d b { color: #d6b068; }
@media (max-width: 1023px) {
  .r5-why__list { grid-template-columns: none; gap: 14px; }
  .r5-wc { height: 300px; border-radius: 16px; }
  .r5-wc__top { left: 20px; right: 20px; top: 18px; }
  .r5-wc__ic { width: 48px; height: 48px; }
  .r5-wc__ic svg { width: 24px; height: 24px; }
  .r5-wc__tx { left: 22px; right: 22px; bottom: 22px; gap: 10px; }
  .r5-wc__d { padding-top: 10px; }
}

/* ── 5 대표진료: 어두운 바탕, 엇갈린 두 줄 사진 카드 + 가운데 금색 선 ── */
.r5-sig { padding: clamp(80px, 5vw + 50px, 140px) 0 clamp(160px, 10vw + 60px, 260px); background: #1b1916; color: #fff; }
.r5-sig .eyebrow { color: #d6b068; }
.r5-sig__list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(60px, 9vw, 180px); row-gap: clamp(64px, 5vw, 100px); max-width: 1120px; margin: clamp(48px, 3vw + 30px, 84px) auto 0; padding: 0; list-style: none; }
.r5-sig__list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: calc(clamp(100px, 9vw, 160px) * -1); width: 1px; background: linear-gradient(rgba(214,176,104,.55), rgba(214,176,104,.05)); }
.r5-sc:nth-child(even) { transform: translateY(clamp(100px, 9vw, 160px)); }
.r5-sc__a { display: block; color: #fff; }
.r5-sc__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #2a2620; }
.r5-sc__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.92); transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .4s; }
.r5-sc__a:hover .r5-sc__ph img, .r5-sc__a:focus-visible .r5-sc__ph img { transform: scale(1.05); filter: none; }
.r5-sc__no { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 26px; border: 1px solid #d6b068; border-radius: 50%; background: #1b1916; font-size: 22px; font-weight: 300; color: #d6b068; }
.r5-sc__en { display: block; margin-top: 22px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: rgba(214,176,104,.85); }
.r5-sc__t { display: block; margin-top: 8px; font-size: clamp(30px, 24px + 1.2vw, 44px); line-height: 1.2; font-weight: 700; letter-spacing: -0.04em; }
.r5-sc__d { display: block; margin-top: 12px; font-size: clamp(16px, 15px + .3vw, 19px); line-height: 1.55; color: rgba(255,255,255,.8); }
.r5-sc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid rgba(214,176,104,.6); font-size: 15px; font-weight: 600; color: #d6b068; }
.r5-sc__more .i-arr { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s; }
.r5-sc__a:hover .r5-sc__more .i-arr { transform: translateX(4px); }
@media (max-width: 1023px) {
  .r5-sig { padding-bottom: 88px; }
  .r5-sig__list { grid-template-columns: none; row-gap: 52px; }
  .r5-sig__list::before { display: none; }
  .r5-sc:nth-child(even) { transform: none; }
  .r5-sc__no { width: 56px; height: 56px; margin: -28px 0 0 18px; font-size: 18px; }
  .r5-sc__en { margin-top: 16px; font-size: 12px; }
}

/* ── 6 전후 사진 탭: ‘조금 더 크게’ ── */
.r4-ba__tabs { gap: 12px; }
.r4-ba__tab { min-width: 168px; height: 60px; padding: 0 28px; font-size: 19px; }
.r4-ba__dots { gap: clamp(18px, 2.2vw, 40px); }
.r4-ba__th { width: clamp(96px, 6vw + 44px, 144px); }
.r4-ba__lab { font-size: 16px; }
.r4-ba__views { max-width: 1280px; }
.r4-ba__pair { gap: 18px; }
.r4-ba__fr { height: clamp(360px, 26vw + 150px, 600px); }
.r4-ba__fr figcaption { left: 16px; top: 16px; padding: 6px 14px; font-size: 16px; }
.r4-ba__arr { width: 56px; height: 56px; }
.r4-ba__arr svg { width: 22px; height: 22px; }
.r4-ba__t { margin-top: 28px; font-size: clamp(20px, 17px + .7vw, 28px); }
.r4-ba__m { font-size: 16px; }
@media (max-width: 599px) {
  .r4-ba__tab { min-width: 0; height: 52px; padding: 0 8px; font-size: 16px; }
  .r4-ba__th { width: 70px; }
  .r4-ba__lab { font-size: 13px; }
  .r4-ba__pair { gap: 8px; }
  .r4-ba__fr { height: 260px; }
  .r4-ba__fr figcaption { left: 6px; top: 6px; padding: 3px 8px; font-size: 12px; }
  .r4-ba__arr { width: 36px; height: 36px; }
  .r4-ba__t { font-size: 18px; }
}

/* ── 7 유튜브 + 블로그: 알약 탭 → 왼쪽 큰 화면 + 오른쪽 목록 ── */
.r5-media { padding: clamp(80px, 5vw + 50px, 140px) 0; background: #fff; }
.r5-mtabs { display: flex; gap: 6px; width: fit-content; margin: clamp(30px, 2vw + 18px, 44px) auto 0; padding: 7px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #ebe5da, 0 14px 30px -12px rgba(40,30,15,.25); }
.r5-mt { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 30px 0 10px; border: 0; border-radius: 999px; background: transparent; font: inherit; color: var(--sub); cursor: pointer; transition: background-color .25s, color .25s; }
.r5-mt:hover { color: var(--ink); }
.r5-mt__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f3eee6; color: var(--gold); }
.r5-mt__ic svg, .r5-lt__ic svg, .r5-lp__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.r5-mt__ic svg .f, .r5-lt__ic svg .f, .r5-lp__ic svg .f { fill: currentColor; stroke: none; }
.r5-mt__k { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.r5-mt__n { font-size: 15px; font-weight: 500; }
.r5-mt[aria-selected="true"] { background: #1b1916; color: #fff; }
.r5-mt[aria-selected="true"] .r5-mt__ic { background: var(--gold-btn); color: #fff; }
.r5-mp { margin-top: clamp(36px, 2vw + 24px, 60px); }
.r5-mp__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 2.6vw, 48px); align-items: start; }
.r5-yt__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 26px 50px -26px rgba(0,0,0,.5); }
.r5-yt__poster { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.r5-yt__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.r5-yt__poster:hover img { transform: scale(1.03); }
.r5-yt__play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); border: 1px solid rgba(214,176,104,.9); border-radius: 50%; background: rgba(27,25,22,.72); }
.r5-yt__play::before { content: ""; position: absolute; left: 37px; top: 29px; border-left: 21px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.r5-yt__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.r5-yt__now { margin: 20px 0 0; font-size: clamp(18px, 16px + .5vw, 24px); line-height: 1.45; font-weight: 700; letter-spacing: -0.03em; }
.r5-yt__list, .r5-bl__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.r5-yi, .r5-bi { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.r5-yi:hover, .r5-bi:hover { background: #f6f3ee; }
.r5-yi.is-on { background: #f6f3ee; box-shadow: inset 3px 0 0 var(--gold); }
.r5-yi__th, .r5-bi__th { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #111; }
.r5-bi__th { aspect-ratio: 4 / 3; background: #eee; }
.r5-yi__th img, .r5-bi__th img, .r5-bl__ph img { width: 100%; height: 100%; object-fit: cover; }
.r5-yi__tx, .r5-bi__tx { display: grid; gap: 5px; }
.r5-yi__t, .r5-bi__t { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; line-height: 1.45; font-weight: 700; letter-spacing: -0.02em; }
.r5-yi__m, .r5-bi__tx time { font-size: 14px; color: var(--muted); }
.r5-bi__s { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.5; color: var(--sub); }
.r5-bl { display: block; color: var(--ink); }
.r5-bl__ph { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #eee; box-shadow: 0 26px 50px -30px rgba(40,30,15,.5); }
.r5-bl__ph img { transition: transform .6s; }
.r5-bl:hover .r5-bl__ph img { transform: scale(1.03); }
.r5-bl__d { display: block; margin-top: 20px; font-size: 14px; color: var(--muted); }
.r5-bl__t { display: block; margin-top: 6px; font-size: clamp(20px, 17px + .6vw, 26px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; }
.r5-bl__sum { display: block; margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--sub); }
.r5-mp__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(34px, 2vw + 22px, 52px); }
@media (max-width: 1023px) {
  .r5-mtabs { width: 100%; }
  .r5-mt { flex: 1; justify-content: center; height: 56px; padding: 0 14px 0 8px; }
  .r5-mt__n { display: none; }
  .r5-mp__grid { grid-template-columns: none; }
  .r5-yi, .r5-bi { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 4px; }
  .r5-yi__t, .r5-bi__t { font-size: 15px; }
  .r5-yt__list > li:nth-child(n+5) { display: none; }   /* 모바일은 4개만(더 보기는 learn 페이지) */
}

/* ── 새 페이지 learn.preview.php: 배너 제목 + [YouTube][Blog] 상자 ── */
.r5-ltabs { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 14px; margin-top: clamp(30px, 2vw + 18px, 46px); }
.r5-lt { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 14px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.4); border-radius: 16px; background: rgba(20,18,16,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: inherit; text-align: left; color: #fff; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.r5-lt:hover { border-color: #fff; }
.r5-lt__ic { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.14); }
.r5-lt__ic svg { width: 26px; height: 26px; }
.r5-lt__k { font-size: 21px; line-height: 1.2; font-weight: 800; }
.r5-lt__n { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.78); }
.r5-lt[aria-selected="true"] { border-color: #fff; background: #fff; color: var(--ink); }
.r5-lt[aria-selected="true"] .r5-lt__ic { background: var(--gold-btn); color: #fff; }
.r5-lt[aria-selected="true"] .r5-lt__n { color: var(--sub); }
.r5-learn .news { padding: 110px 0 130px; background: #f1f0ed; }
.r5-lp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.r5-lp__h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 28px; font-size: clamp(28px, 22px + 1.2vw, 40px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.r5-lp__bar .r5-lp__h { margin: 0; }
.r5-lp__h small { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--sub); }
.r5-lp__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-btn); color: #fff; }
.r5-lp .bp-vlib__ch .r5-go, .r5-lp__bar .r5-go { height: 50px; padding: 0 24px; }
@media (max-width: 1023px) {
  .r5-ltabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .r5-lt { grid-template-columns: none; justify-items: start; row-gap: 10px; padding: 16px; }
  .r5-lt__ic { grid-row: auto; width: 42px; height: 42px; }
  .r5-lt__k { font-size: 18px; }
  .r5-lt__n { font-size: 13px; }
  .r5-learn .news { padding: 56px 0 88px; }
  .r5-lp__ic { width: 38px; height: 38px; }
}