/* 16차 미리보기(2026-10-30 · ko-ver2) — 병원 소개: 첫 배너(이미지 07) · Our Mission · 진료시간 사진, Treatment Philosophy 새 문구 3안. 생성 batch-1030h/r16.py */

/* 첫 배너: 이미지 07(글자 지운 바탕) — 사진이 원래 어두워 덮개를 옅게(글자 쪽만) */
.r16-hero.shero--dim::before { background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 66%); }
.r16-hero .shero__bg { object-position: 50% 60%; }
@media (max-width: 1023px) {
  .r16-hero.shero--dim::before { background: rgba(0,0,0,.42); }
  .r16-hero .shero__bg { object-position: 66% 50%; }
}

/* ───── Treatment Philosophy 공통 ───── */
.r16-ph { position: relative; overflow: hidden; }
.r16-ph__t { margin: 0; font-size: clamp(30px, 20px + 1.9vw, 54px); line-height: 1.32; font-weight: 300; letter-spacing: -0.04em; }
.r16-ph__t em { font-style: normal; font-weight: 800; }
.r16-ph__list { margin: 0; padding: 0; list-style: none; }
.r16-ph__it h3 { margin: 0; font-size: clamp(20px, 16px + .6vw, 25px); line-height: 1.4; font-weight: 700; letter-spacing: -0.03em; }
.r16-ph__it p { margin: 0; font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.7; letter-spacing: -0.02em; }
.r16-ph__no { display: block; font-variant-numeric: tabular-nums; }

/* ───── A안: 어두운 바탕 · 왼쪽 큰 제목(고정) · 오른쪽 2×2 카드, 윤곽 숫자 ───── */
.r16-ph--a { padding: clamp(90px, 6vw + 50px, 160px) 0; background: #17150f; color: #fff; }
.r16-ph--a::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 10%, rgba(214,176,104,.12), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(214,176,104,.07), transparent 60%); }
.r16-ph--a .r16-ph__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.r16-ph--a .r16-ph__hd { position: sticky; top: 120px; }
.r16-ph--a .r16-ph__t em { display: block; background: linear-gradient(90deg, #e9cf98, #c79a4f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r16-ph--a .r16-ph__line { display: block; width: 64px; height: 1px; margin: clamp(28px, 2vw + 12px, 44px) 0 0; background: #d6b068; }
.r16-ph--a .r16-ph__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(214,176,104,.22); border: 1px solid rgba(214,176,104,.22); }
.r16-ph--a .r16-ph__it { display: grid; align-content: start; gap: 14px; min-height: 280px; padding: clamp(28px, 2vw + 16px, 44px); background: #17150f; transition: background-color .4s; }
.r16-ph--a .r16-ph__no { margin-bottom: 18px; font-size: clamp(54px, 40px + 1.6vw, 76px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(214,176,104,.75); transition: color .4s; }
.r16-ph--a .r16-ph__it p { color: rgba(255,255,255,.72); }
@media (hover: hover) { .r16-ph--a .r16-ph__it:hover { background: #201d16; } .r16-ph--a .r16-ph__it:hover .r16-ph__no { color: #d6b068; } }
@media (max-width: 1023px) {
  .r16-ph--a .r16-ph__in { grid-template-columns: none; }
  .r16-ph--a .r16-ph__hd { position: static; }
  .r16-ph--a .r16-ph__list { grid-template-columns: none; }
  .r16-ph--a .r16-ph__it { min-height: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; }
  .r16-ph--a .r16-ph__no { grid-row: span 2; margin: 0; font-size: 44px; }
}

/* ───── B안: 밝은 바탕 · 가운데 제목 · 가로 진행선 위 번호 원 4개(모바일은 세로선) ───── */
.r16-ph--b { padding: clamp(90px, 6vw + 50px, 150px) 0; background: #f6f3ee; color: var(--ink, #1b1916); text-align: center; }
.r16-ph--b .r16-ph__hd { max-width: 820px; margin: 0 auto; }
.r16-ph--b .r16-ph__t em { color: #a9843e; }
.r16-ph--b .r16-ph__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 36px); margin-top: clamp(56px, 4vw + 24px, 96px); }
.r16-ph--b .r16-ph__list::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 32px; height: 1px; background: linear-gradient(90deg, #d8c39a, #a9843e, #d8c39a); }
.r16-ph--b .r16-ph__it { position: relative; display: grid; justify-items: center; gap: 14px; }
.r16-ph--b .r16-ph__no { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border: 1px solid #a9843e; border-radius: 50%; background: #f6f3ee; font-size: 18px; font-weight: 700; letter-spacing: .04em; color: #a9843e; transition: background-color .35s, color .35s; }
.r16-ph--b .r16-ph__it p { max-width: 260px; color: #55504a; }
@media (hover: hover) { .r16-ph--b .r16-ph__it:hover .r16-ph__no { background: #a9843e; color: #fff; } }
@media (max-width: 1023px) {
  .r16-ph--b { text-align: left; }
  .r16-ph--b .r16-ph__list { grid-template-columns: none; gap: 34px; padding-left: 0; }
  .r16-ph--b .r16-ph__list::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; background: linear-gradient(180deg, #d8c39a, #a9843e, #d8c39a); }
  .r16-ph--b .r16-ph__it { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; column-gap: 18px; row-gap: 6px; }
  .r16-ph--b .r16-ph__no { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 16px; }
  .r16-ph--b .r16-ph__it p { max-width: none; }
}

/* ───── C안: 흰 바탕 · 왼쪽 원장 실사진(고정) · 오른쪽 제목 + 큰 번호 줄 목록 ───── */
.r16-ph--c { padding: clamp(90px, 6vw + 50px, 150px) 0; background: #fff; color: var(--ink, #1b1916); }
.r16-ph--c .r16-ph__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 100px); align-items: start; }
.r16-ph--c .r16-ph__ph { position: sticky; top: 110px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #ece6dc; }
.r16-ph--c .r16-ph__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.r16-ph--c .r16-ph__t em { color: #a9843e; }
.r16-ph--c .r16-ph__list { margin-top: clamp(40px, 3vw + 16px, 64px); border-top: 1px solid #1b1916; }
.r16-ph--c .r16-ph__it { display: grid; grid-template-columns: clamp(72px, 4vw + 40px, 120px) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 8px; padding: clamp(24px, 1.5vw + 14px, 36px) 0; border-bottom: 1px solid #e3ddd2; }
.r16-ph--c .r16-ph__no { grid-row: span 2; font-size: clamp(40px, 28px + 1.6vw, 64px); line-height: 1; font-weight: 200; letter-spacing: -0.04em; color: #c9b48a; transition: color .35s, transform .35s; }
.r16-ph--c .r16-ph__it p { color: #55504a; }
@media (hover: hover) { .r16-ph--c .r16-ph__it:hover .r16-ph__no { color: #a9843e; transform: translateX(6px); } }
@media (max-width: 1023px) {
  .r16-ph--c .r16-ph__in { grid-template-columns: none; }
  .r16-ph--c .r16-ph__ph { position: static; aspect-ratio: 4 / 3; }
  .r16-ph--c .r16-ph__it { grid-template-columns: 64px minmax(0, 1fr); }
}