/* ==========================================================================
   rb2026 메인 — 원장 이야기 → 원칙 「시각 이음」 (sections/story/doctor.php · principle.php). 문구는 v2 그대로.
   스위치: inc/palette.php 의 dv_story() — 전환 touch ko/rb2026/STORY · 롤백 rm · 미리보기 ?dvstory=1(쿠키 유지, ?dvstory=0 해제)
   home-layout.css(v2) 뒤에 실린다. 색은 --dv-* 토큰만. Dr. Kim Story 의 글 기둥은 손대지 않는다(사용자 지시 2026-09-26).
   2026-09-26 비교했던 A(사진이 이음매를 넘음)·B(원칙 판 걸침) 안은 폐기, C(실) 안만 남아 라이브 적용.

   구성: Story 는 아이보리(앞 Signature 크림과 구분)이고, 바닥 --dv-story-ext 구간에서 그라디에이션이 먼저 시작한다(콘텐츠 뒤 — 거의 아이보리).
   원칙 밴드는 한 요소(.dv-story-photo)에 수술실 사진을 깔고, 그 위 ::before 오버레이가 위 2×th 구간에서 아이보리 → 차콜로 내려가며
   후반(1×th 부근)부터 투명도가 풀려 사진이 비친다 → 사진이 차콜 평면 뒤가 아니라 색 전환 도중에 나타난다. 실(2×th)과 올리브 점은 그 위.
   곡선: 아이보리 → 차콜을 OKLab 에서 ease-in(t^1.6, t>.8 부터는 3차 에르미트로 점 아래 2.55th 에서 기울기 0 으로 닿음 — 끝의 꺾임 제거)으로 보간하고, 중간에 OKLab (a,b) 를 sin 곡선으로 (+.010,+.024) 더해 따뜻하게(명도는 그대로라 실 정지점 불변;
   2026-09-26 「중간 회색이 강하다」). 사진은 곡선의 40%(실의 18% 지점)부터 비친다(「윤곽이 일찍」). 이전의 Taupe 경유 + smoothstep 은 중간 톤이 좁은 띠로 몰려
   「회갈색 띠가 실보다 먼저 보인다」(2026-09-26) — 경유점을 빼고 중간이 몰리지 않는 곡선으로 바꿨다.
   정지점은 한 곡선을 Story 쪽(ext, 16개)과 밴드 쪽(0~2.6th, 53개)으로 약 6px 간격으로 샘플링한 것 — 성긴 꺾은선(정지점 14개)은 정지점마다 기울기가 꺾여 「툭툭」 끊겨 보였다(2026-09-26).
   투명도도 smoothstep. 한쪽만 고치면 이음이 생긴다. 계산식은 표준 OKLab 변환 + 위 곡선(세션 grad3.py).
   ========================================================================== */
.dv-doctor--story,.dv-principle--story{--dv-story-th:clamp(72px,8vw,120px);--dv-story-ext:calc(var(--dv-story-th) * .75)}

/* ---- Story: 아이보리 + 바닥 ext 그라디에이션(콘텐츠 뒤에서 시작). 여백 0 — 밴드가 바로 이어진다(「1cm 위로」) ---- */
.dv-doctor--story{
  background:var(--dv-cream-2) linear-gradient(180deg,#F7F3ED 0,#F7F3ED calc(100% - var(--dv-story-ext) * 1),#F7F3ED calc(100% - var(--dv-story-ext) * 0.9333),#F6F2EC calc(100% - var(--dv-story-ext) * 0.8667),#F5F1EA calc(100% - var(--dv-story-ext) * 0.8),#F4EFE9 calc(100% - var(--dv-story-ext) * 0.7333),#F3EEE7 calc(100% - var(--dv-story-ext) * 0.6667),#F2ECE5 calc(100% - var(--dv-story-ext) * 0.6),#F0EAE3 calc(100% - var(--dv-story-ext) * 0.5333),#EFE8E0 calc(100% - var(--dv-story-ext) * 0.4667),#EDE6DE calc(100% - var(--dv-story-ext) * 0.4),#EBE4DB calc(100% - var(--dv-story-ext) * 0.3333),#E9E1D8 calc(100% - var(--dv-story-ext) * 0.2667),#E7DFD5 calc(100% - var(--dv-story-ext) * 0.2),#E5DCD2 calc(100% - var(--dv-story-ext) * 0.1333),#E2D9CE calc(100% - var(--dv-story-ext) * 0.0667),#E0D6CB calc(100% - var(--dv-story-ext) * 0));
  padding-bottom:0;
}

/* ---- Story 모바일(≤1023, 2026-09-26 A안): 사진을 세로로 키우고 인터뷰 영상은 사진 바로 아래 작은 가로 카드 → 글 → 이력 → 버튼 → 실.
   전에는 16:10 사진(원장님이 작음) 뒤 글·이력·버튼 다음에 큰 영상 카드가 꼬리로 붙어 실 앞을 막았다. 문구 동일, PC(≥1024) 무변화.
   줄바꿈: 문단 balance 는 전 폭(MOBILE_RULES 1-3; PC 는 줄 수 그대로), 「페이스 리프팅」「(동안 시크릿 등)」은 doctor.php 의 U+00A0 로 묶음 ---- */
.dv-doctor--story .dv-doctor-text p{text-wrap:balance}
@media (max-width:1023px){
  .dv-doctor--story .dv-doctor-media .dv-doctor-clip{order:1;display:grid;grid-template-columns:42% minmax(0,1fr);gap:0 12px;align-items:center;width:100%;margin-top:14px}
  .dv-doctor--story .dv-doctor-clip-cap{margin-top:0}
  .dv-doctor--story .dv-doctor-clip-k{font-size:11px;white-space:nowrap}
  .dv-doctor--story .dv-doctor-clip-cap strong{font-size:14px;line-height:1.4}
  .dv-doctor--story .dv-doctor-clip .dv-lite-play{width:38px;height:38px}
  .dv-doctor--story .dv-doctor-clip .dv-lite-play svg{width:14px;height:14px}
  .dv-doctor--story .dv-doctor-career{margin-top:22px;padding-top:22px;gap:7px 0}
  /* 제목·이름을 사진 앞으로(2026-09-26 「헤더가 사진 전에」, PC 무변화): 글 묶음을 풀어(display:contents) 자식이 직접 그리드 항목이 되게 하고 order 로 줄 세운다.
     0 제목·이름 → 1 사진·인터뷰 → 2 이야기·이력·버튼. 그리드 gap 은 0 으로 두고 간격은 각 항목의 margin 이 맡는다(안 그러면 항목마다 28px 이 벌어진다).
     .dv-reveal 은 상자가 없어 애니메이션 없이 바로 보인다 — 사진 쪽(.dv-doctor-media)도 이미 그렇다 */
  .dv-doctor--story .dv-doctor-grid{gap:0}
  .dv-doctor--story .dv-doctor-body{display:contents}
  .dv-doctor--story .dv-doctor-body>*{order:2}
  .dv-doctor--story .dv-doctor-body>.dv-disp,.dv-doctor--story .dv-doctor-body>.dv-head{order:0}
  .dv-doctor--story .dv-doctor-media .dv-doctor-photo{margin-top:clamp(20px,5vw,28px)}
  .dv-doctor--story .dv-doctor-body>a.dv-doctor-more{justify-self:start}   /* 그리드 항목이 되면 stretch 로 폭이 늘어난다 → 원래처럼 내용 폭 */
}
/* 둘째 문단 강조 두 가지(2026-09-27, 전 폭 — 모바일 T1 을 PC 까지 확장):
   ① 질문 ‘정말 해도 될까? …’ 는 명조 18px 로 한 줄에 서고(display:block → 뒤의 「— 수술의 …」 가 다음 줄로 내려간다), 원칙 밴드 제목과 같은 서체.
   ② 「필요하지 않은 수술은 권하지 않습니다.」 는 고딕 볼드 + 올리브라이트 마커(글자 아래 40% 띠) — 약속의 느낌, ①과 다른 결. 마크업 <b>·<strong class="dv-doctor-vow">, 문구 동일 */
.dv-doctor--story .dv-doctor-text p b{display:block;margin:0 0 6px;font-family:var(--dv-serif-kr,var(--dv-ff));font-weight:600;font-size:18px;line-height:1.5;letter-spacing:-.02em;color:var(--dv-ink)}
.dv-doctor--story .dv-doctor-vow{font-weight:700;color:var(--dv-ink);background:linear-gradient(transparent 60%,var(--dv-olive-soft) 60%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
@media (max-width:767px){   /* 폰: 세로 4:5 — 태블릿(768~1023)은 한 칼럼이 넓어 4:5 면 1000px 넘게 커지므로 16:10 유지 */
  .dv-doctor--story .dv-doctor-media .dv-doctor-photo{aspect-ratio:4/5}
  .dv-doctor--story .dv-doctor-photo img{object-position:100% 50%}
}

/* ---- 밴드: 섹션 자체는 여백·오버레이 없이 사진 구간 하나 ---- */
.dv-principle--story{padding:0}
.dv-principle--story::before{display:none}   /* v2 의 섹션 전체 오버레이는 .dv-story-photo::before 가 대신한다 */
.dv-principle--story .dv-principle-p{text-wrap:balance;font-size:clamp(17px,1.3vw,20px);line-height:1.75}   /* v2 15.5~18px → 한 단계 위(2026-09-26 「위계 고려해 조금만」). 제목 30~56px 과의 간격은 유지 */
.dv-principle--story .dv-principle-txt{display:flex;flex-direction:column;align-items:center}   /* v2 의 .dv-principle-in 가운데 정렬을 안쪽 묶음이 이어받는다 */
/* 버튼은 온라인상담 하나, 진료안내는 아래 밑줄 텍스트 링크 — 같은 크기 버튼 둘이 나란히 서면 고를 것이 생긴다(2026-09-27, PC·모바일 공통). 문구·링크는 그대로 */
.dv-principle--story .dv-principle-btns{flex-direction:column;align-items:center;gap:18px;width:auto}
.dv-principle--story .dv-principle-btns .dv-btn--primary{min-width:220px;flex:none}
.dv-principle--story .dv-principle-btns .dv-btn.dv-btn--ring{flex:none;height:auto;min-height:44px;padding:0 12px;background:none;border:0;border-radius:0;font-size:14px;font-weight:600;color:rgba(252,250,247,.78);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(252,250,247,.4);transition:color .2s}
.dv-principle--story .dv-principle-btns .dv-btn.dv-btn--ring:hover,.dv-principle--story .dv-principle-btns .dv-btn.dv-btn--ring:focus-visible{background:none;color:#FCFAF7}
.dv-principle--story .dv-principle-btns .dv-btn.dv-btn--ring svg{display:none}

/* 사진 구간: 위 2×th 는 그라디에이션+실 자리(padding-top), 글은 그 아래 — 점(실 끝)과 「DIVA Principle」 사이 53px(가운데 정렬이면 326px 벌어져 이음이 끊겨 보였다).
   높이는 내용이 정한다. 세로 크롭 때 초점은 집도의 얼굴(65% 35%) */
.dv-principle--story .dv-story-photo{
  position:relative;isolation:isolate;box-sizing:border-box;display:flex;align-items:flex-start;
  width:100%;padding:calc(var(--dv-story-th) * 2 + 56px) 0 clamp(56px,6vw,96px);   /* 56 고정: 점 → 라벨 53px 을 모든 폭에서 같게 */
  background-color:var(--dv-navy);background-size:cover;background-position:65% 35%;background-repeat:no-repeat;
}
.dv-principle--story .dv-story-photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#E0D6CB calc(var(--dv-story-th) * 0.00),#DDD3C7 calc(var(--dv-story-th) * 0.05),#DBD0C4 calc(var(--dv-story-th) * 0.10),#D8CDC0 calc(var(--dv-story-th) * 0.15),#D5C9BC calc(var(--dv-story-th) * 0.20),#D2C6B8 calc(var(--dv-story-th) * 0.25),#CFC2B4 calc(var(--dv-story-th) * 0.30),#CCBEAF calc(var(--dv-story-th) * 0.35),rgba(201,187,171,1.000) calc(var(--dv-story-th) * 0.40),rgba(198,183,167,0.998) calc(var(--dv-story-th) * 0.45),rgba(194,179,163,0.996) calc(var(--dv-story-th) * 0.50),rgba(191,175,158,0.993) calc(var(--dv-story-th) * 0.55),rgba(187,171,154,0.990) calc(var(--dv-story-th) * 0.60),rgba(183,167,149,0.986) calc(var(--dv-story-th) * 0.65),rgba(180,163,145,0.981) calc(var(--dv-story-th) * 0.70),rgba(176,158,140,0.975) calc(var(--dv-story-th) * 0.75),rgba(172,154,136,0.970) calc(var(--dv-story-th) * 0.80),rgba(167,150,131,0.963) calc(var(--dv-story-th) * 0.85),rgba(163,145,127,0.956) calc(var(--dv-story-th) * 0.90),rgba(159,141,122,0.949) calc(var(--dv-story-th) * 0.95),rgba(154,136,118,0.942) calc(var(--dv-story-th) * 1.00),rgba(150,132,114,0.934) calc(var(--dv-story-th) * 1.05),rgba(145,127,109,0.926) calc(var(--dv-story-th) * 1.10),rgba(140,123,105,0.918) calc(var(--dv-story-th) * 1.15),rgba(135,118,101,0.909) calc(var(--dv-story-th) * 1.20),rgba(130,113,96,0.901) calc(var(--dv-story-th) * 1.25),rgba(125,109,92,0.892) calc(var(--dv-story-th) * 1.30),rgba(120,104,88,0.884) calc(var(--dv-story-th) * 1.35),rgba(115,99,84,0.875) calc(var(--dv-story-th) * 1.40),rgba(109,95,80,0.867) calc(var(--dv-story-th) * 1.45),rgba(104,90,76,0.858) calc(var(--dv-story-th) * 1.50),rgba(99,86,73,0.850) calc(var(--dv-story-th) * 1.55),rgba(94,82,70,0.842) calc(var(--dv-story-th) * 1.60),rgba(89,78,66,0.835) calc(var(--dv-story-th) * 1.65),rgba(85,74,64,0.827) calc(var(--dv-story-th) * 1.70),rgba(81,70,61,0.820) calc(var(--dv-story-th) * 1.75),rgba(77,67,58,0.814) calc(var(--dv-story-th) * 1.80),rgba(73,64,56,0.807) calc(var(--dv-story-th) * 1.85),rgba(69,61,54,0.802) calc(var(--dv-story-th) * 1.90),rgba(66,59,52,0.797) calc(var(--dv-story-th) * 1.95),rgba(63,56,50,0.792) calc(var(--dv-story-th) * 2.00),rgba(60,54,48,0.788) calc(var(--dv-story-th) * 2.05),rgba(58,52,47,0.785) calc(var(--dv-story-th) * 2.10),rgba(56,50,45,0.783) calc(var(--dv-story-th) * 2.15),rgba(54,48,44,0.781) calc(var(--dv-story-th) * 2.20),rgba(52,47,43,0.780) calc(var(--dv-story-th) * 2.25),rgba(50,46,42,0.780) calc(var(--dv-story-th) * 2.30),rgba(49,45,41,0.780) calc(var(--dv-story-th) * 2.35),rgba(48,44,41,0.780) calc(var(--dv-story-th) * 2.40),rgba(48,43,40,0.780) calc(var(--dv-story-th) * 2.45),rgba(47,43,40,0.780) calc(var(--dv-story-th) * 2.50),rgba(47,43,40,0.780) calc(var(--dv-story-th) * 2.55),rgba(47,43,40,0.780) calc(var(--dv-story-th) * 2.60));
}
.dv-principle--story .dv-story-photo .dv-principle-in{width:100%}
/* 실: 에스프레소 → 샴페인. 시작점은 --dv-story-rise(px, 이음매 위로 올라가는 길이) — 2열에서는 principle.php 의 스크립트가 「원장 소개 자세히」 버튼 아래 끝까지로 잰다(2026-09-26).
   색 정지점은 아래 끝(점) 기준 th 단위: 배경 곡선이 실 명도와 교차하는 자리를 점에서 th 거리로 환산 — 실 길이가 변해도 같은 자리에서 섞인다.
   단색 실은 배경이 같은 톤을 지나는 구간에서 사라진다 — 바꾸면 캡처 픽셀로 ΔL 을 재서 확인할 것 */
.dv-principle--story .dv-story-thread{
  position:absolute;left:calc(50% - .5px);top:calc(-1 * var(--dv-story-rise,0px));z-index:1;width:1px;height:calc(var(--dv-story-th) * 2 + var(--dv-story-rise,0px));
  background:linear-gradient(to top,var(--dv-rose) calc(var(--dv-story-th) * 0.0000),var(--dv-rose) calc(var(--dv-story-th) * 0.6600),#B09D8A calc(var(--dv-story-th) * 0.7013),#837264 calc(var(--dv-story-th) * 0.7425),#584941 calc(var(--dv-story-th) * 0.7838),var(--dv-ink-2) calc(var(--dv-story-th) * 0.8250),var(--dv-ink-2) 100%);
}
.dv-principle--story .dv-story-thread::after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--dv-olive-lt);transform:translateX(-50%)}
/* PC: v2 처럼 사진을 뷰포트에 고정(스크롤하면 글만 움직인다). 사진 구간은 85vh(2026-09-26 70/80/90 비교 후 90 → 같은 날 85 로) + 그라디에이션 2×th.
   고정 배경은 창이 작아도 스크롤 동안 사진 전체가 지나간다. 내용이 넘치면 늘어난다 */
/* 노이즈: 8비트 그라디에이션의 밝기 단계(밝은 쪽은 한 단계가 3px 넘게 이어진다)를 흩뜨린다(2026-09-26 「노이즈 텍스처도」).
   96px 회색 노이즈 타일(평균 128 = soft-light 중립이라 평균 밝기·색은 그대로, σ26)을 Story 바닥 ext 와 밴드 위 2.6th(+0.6th 페이드)에 얹는다. 글 아래(z-index:-1) */
.dv-doctor--story{isolation:isolate}
.dv-doctor--story::after,.dv-principle--story .dv-story-photo::after{
  content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  background:url(https://channel-static.rebeauty.co.kr/diva/ko/rb2026/img/noise-96.png) 0 0/96px 96px;mix-blend-mode:soft-light;
}
/* soft-light 는 밝은 곳에서 약하고 중간 톤에서 세다 → 밝은 ext 는 진하게, 밴드는 옅게 해서 노이즈 세기를 σ≈3 레벨로 맞춘다(실측) */
.dv-doctor--story::after{bottom:0;height:var(--dv-story-ext);opacity:.95}
@media (min-resolution:1.5dppx){   /* 고해상도 화면: 타일을 절반 크기로 깔아 노이즈 알갱이가 기기 픽셀 1개(2배 확대되면 알갱이가 굵어 보인다) */
  .dv-doctor--story::after,.dv-principle--story .dv-story-photo::after{background-size:48px 48px}
}
.dv-principle--story .dv-story-photo::after{
  top:0;height:calc(var(--dv-story-th) * 3.2);opacity:.3;
  -webkit-mask-image:linear-gradient(#000 calc(var(--dv-story-th) * 2.6),transparent);mask-image:linear-gradient(#000 calc(var(--dv-story-th) * 2.6),transparent);
}
@media (min-width:1025px) and (hover:hover){
  .dv-principle--story .dv-story-photo{background-attachment:fixed;min-height:calc(max(85vh,560px) + var(--dv-story-th) * 2)}   /* 90→85vh: 문구 아래 사진이 길다(2026-09-26), 위 구간은 그대로 */
}
@media (prefers-reduced-motion:reduce){
  .dv-principle--story .dv-story-photo{background-attachment:scroll}
}