/* 메인 재구성 — index.html(10-16 적용) · index.new*.html (2026-10-15) — 조각 ~/tmp/renewal-src/build/main-1015/css-parts 를 build_new.py 가 이어 붙임 */
/* ── 00-base.css ── */
/* 공통 토큰 (10-15 오후 · 10-16 3차) — Why 부터 아래 섹션은 밝음/어두움을 번갈아 두고 경계 색을 서로 맞춘다
   어두운 섹션(5 Why · 7 후기 · 9-FAQ)의 위·아래 끝 색 = --n-dk
   밝은 섹션: 6 B&A = --n-lt(#fff) · 7-2 Film = --n-film · 8 Journal = --n-journal · 9-Visit = index.html 그대로(#fff)
   섹션 경계는 모두 곧은 직선(10-16 · 3차). 두 섹션 사이의 전환은 아래쪽 섹션이 맡는다(위 섹션의 끝 색을 알고 있으므로). */
:root {
  --n-dk: #1b1916;      /* 깊은 웜 차콜 — 히어로·Signature 와 같은 계열 */
  --n-dk-2: #24211d;    /* 어두운 섹션 안 카드·면 */
  --n-dk-line: rgba(255, 255, 255, .12);
  --n-dk-text: rgba(255, 255, 255, .72);
  --n-lt: #ffffff;
  --n-warm: #f6f3ee;    /* 따뜻한 밝은 면 */
  --n-film: #f1ece4;    /* 7-2 Film 바탕(10-16): 어두운 후기 아래 — 따뜻한 모래빛, 원래 배경 그림(film-bg.jpg)의 결은 곱하기로 남김 */
  --n-journal: #ffffff; /* 8 Journal 바탕(10-16): index.html 그대로 흰색 — 위 Film(모래빛)·아래 FAQ(어두움)와 갈린다 */
  --n-gold-lt: #d6b068; /* 어두운 바탕 위 금색(대비용) */
}
/* ── 10-hero.css ── */
/* 1 · 히어로 ‘한 줄기 빛’ (10-15 · sec/10-hero.html · 사진 hero_ray.py)
   사진 주변은 사진 자체에서 깊게 가라앉혔으므로 덮개(::before)는 글자 쪽만 읽히게 한다 — 입구의 빛은 덮지 않는다.
   style.css 의 .hero::before 는 사진(<img>)보다 먼저 그려져 사진 밑에 깔린다 → 여기서는 z-index 로 순서를 정한다.
   PC: 입구가 오른쪽(사진에서 옮김), 글자는 왼쪽 어둠 위 · 모바일(1023px 이하): 입구가 위, 글자는 아래 어두운 바닥 위. */
.hero--ray { --ray-gold: #dcbd82; height: auto; min-height: clamp(600px, 100vh, 1200px); min-height: clamp(600px, 100svh, 1200px); max-height: none; background: #0c0b0a; }
/* 사진 속 입구 중심(69% 47%)을 object-position 에도 같은 값으로 → 화면 비율이 달라도(1024×900 등) 입구가 늘 화면의 69% 47% 에 놓이고 오른쪽 끝에서 잘리지 않는다.
   fx.css 숨쉬기(scale)는 그대로 — transform-origin 도 같은 점이라 입구가 제자리에서 커진다 */
.hero--ray .hero__bg { z-index: 0; object-position: 69% 47%; transform-origin: 69% 47%; }
.hero--ray::before { z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,9,8,.72) 0%, rgba(10,9,8,.5) 24%, rgba(10,9,8,.14) 44%, rgba(10,9,8,0) 56%),
    linear-gradient(180deg, rgba(10,9,8,.42) 0%, rgba(10,9,8,0) 20%, rgba(10,9,8,0) 76%, rgba(10,9,8,.5) 100%); }
.hero--ray .hero__in { z-index: 2; padding-block: calc(var(--hdr-h) + 48px) 64px; }

.hero--ray .hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(26px, 1.4vw + 14px, 38px); font-size: clamp(14px, 13.3px + .19vw, 17px); font-weight: 500; letter-spacing: .01em; color: var(--ray-gold); }
.hero--ray .hero__eyebrow::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; opacity: .75; }

.hero--ray .hero__title { font-size: clamp(34px, 3.4vw + 15px, 76px); line-height: 1.24; font-weight: 300; letter-spacing: -0.045em; }
.hero--ray .hero__q { display: block; margin-bottom: .62em; font-size: .42em; line-height: 1.4; font-weight: 500; letter-spacing: -0.025em; color: rgba(255,255,255,.88); }
.hero--ray .hero__a { display: block; }
.hero--ray .hero__title em { color: var(--ray-gold); font-weight: 600; }

.hero--ray .hero__desc { margin-top: clamp(24px, 1.6vw + 8px, 36px); font-size: clamp(15px, 14.2px + .25vw, 19px); line-height: 1.75; color: rgba(255,255,255,.78); }
.hero--ray .hero__tag { width: fit-content; max-width: 100%; margin-top: clamp(22px, 1vw + 12px, 30px); padding-top: clamp(16px, .6vw + 11px, 20px); border-top: 1px solid rgba(255,255,255,.14); font-size: clamp(13.5px, 13px + .14vw, 15.5px); line-height: 1.5; letter-spacing: -0.01em; color: rgba(255,255,255,.6); }

.hero--ray .hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 2vw + 16px, 48px); }
.hero--ray .btn { margin-top: 0; height: 56px; padding: 0 28px; border-radius: 28px; font-size: 16px; font-weight: 600; }
.hero--ray .btn--gold { box-shadow: 0 14px 34px -14px rgba(207,167,91,.7); }
.btn--glass { gap: 10px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.72); }
.btn--glass .i-arr { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s cubic-bezier(.2,.7,.2,1); }
.btn--glass:hover .i-arr { translate: 3px 0; }

/* 한 줄 태그는 fx.js 등장 목록에 없다 → 설명 다음에 따라 나오게 (fx 가 꺼지면 애니메이션도 없다) */
.fx .hero--ray .hero__tag { animation: rayFade 1s ease .5s both; }
.fm .hero--ray .hero__tag { animation: rayRise 1.4s var(--fx-e) .5s both; }
.fm.fx-enter .hero--ray .hero__tag { animation-delay: .8s; }
@keyframes rayFade { from { opacity: 0; } }
@keyframes rayRise { from { opacity: 0; translate: 0 28px; } }

@media (max-width: 1023px) {
  .hero--ray { align-items: flex-end; min-height: clamp(560px, 100vh, 1200px); min-height: clamp(560px, 100svh, 1200px); }
  .hero--ray .hero__bg { object-position: 50% 50%; transform-origin: 50% 35%; }
  .hero--ray::before { background:
    linear-gradient(0deg, rgba(10,9,8,.6) 0%, rgba(10,9,8,0) 45%),
    linear-gradient(180deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,0) 16%); }
  .hero--ray .hero__in { --ray-top: calc(var(--hdr-h) + 200px); padding-block: var(--ray-top) clamp(40px, 6svh, 64px); }
  /* 글자 뒤 어둠은 글자 묶음에 붙인다 → 화면 높이가 낮아 입구와 겹쳐도 글자 바로 뒤는 늘 어둡다 */
  .hero--ray .hero__in::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(var(--ray-top) - 150px); pointer-events: none;
    background: linear-gradient(180deg, rgba(10,9,8,0) 0, rgba(10,9,8,.8) 130px, rgba(10,9,8,.9) 60%, rgba(10,9,8,.94) 100%); }
  .hero--ray .hero__eyebrow { gap: 10px; margin-bottom: 18px; font-size: 13.5px; }
  .hero--ray .hero__eyebrow::before { width: 20px; }
  .hero--ray .hero__title { font-size: clamp(30px, 5.6vw + 9px, 50px); line-height: 1.3; }
  .hero--ray .hero__q { margin-bottom: .55em; font-size: clamp(17px, 2.2vw + 8.5px, 25px); }
  .hero--ray .hero__desc { max-width: none; margin-top: 18px; font-size: 15px; line-height: 1.7; }
  .hero--ray .hero__tag { margin-top: 18px; padding-top: 14px; font-size: 13px; }
  .hero--ray .hero__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 440px; margin-top: 28px; }
  .hero--ray .btn { height: 50px; padding: 0 10px; border-radius: 25px; font-size: 14.5px; }
  .hero--ray .btn--glass { gap: 6px; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .hero--ray .hero__in { --ray-top: calc(var(--hdr-h) + 150px); }
}
/* 가로로 눕힌 폰·작은 태블릿: 세로 구도 사진이 위아래로 잘리므로 간판이 보이게 위쪽에 맞춘다 */
@media (max-width: 1023px) and (orientation: landscape) {
  .hero--ray .hero__bg { object-position: 50% 0; transform-origin: 50% 24%; }
}
@media (max-width: 359px) {
  .hero--ray .hero__btns { grid-template-columns: 1fr; }
}
/* ── 20-belief.css ── */
/* 2 · Our Belief (10-15)
   - 제목 두 줄: ‘자연치아 보존에 집중하는 곳입니다.’(보통) + ‘임플란트 진료를 하지 않습니다.’(가장 크고 굵게 · 금색 밑줄이 가운데서 양옆으로 자란다)
     두 줄 모두 h2.belief__title 안 → fx.js 가 단어로 나눠 차례로 떠오르게 한다(밑줄은 .fx-in 이 붙은 뒤)
   - 그림: 자연치아(img/n-bel-tooth.webp, 투명 배경) + 은은한 빛무리 + 금색 궤도선(뒤 반·앞 반 두 겹, 빛 한 점이 천천히 돈다)
   - 숫자: [치아보존과] [5,001개] [2008년] — 가운데 5,001개가 가장 크고 떠 있다. 모바일은 5,001개가 맨 위 한 줄 전체 */
.belief { padding: clamp(80px, 5.4vw + 62px, 150px) 0 clamp(84px, 5vw + 66px, 150px); }
@media (min-width: 1024px) { .fm .belief__fade { background: linear-gradient(rgba(255,255,255,0) 62%, #fff 97%); } }   /* 아래 경계에 고정 배경이 1px 비치지 않게 조금 일찍 흰색 */
.belief__title { font-size: inherit; line-height: inherit; letter-spacing: normal; }
.belief__lead { display: block; font-size: clamp(24px, 20.6px + .9vw, 38px); line-height: 1.45; font-weight: 400; letter-spacing: -0.035em; color: #3a3a3a; }
.belief__no { position: relative; display: block; width: fit-content; margin: clamp(14px, .9vw + 10px, 26px) auto 0; padding-bottom: clamp(10px, .5vw + 7px, 16px); font-size: clamp(58px, 20px + 3.65vw, 72px); line-height: 1.24; font-weight: 700; letter-spacing: -0.045em; color: #1b1b1b; }
/* 10-16 · 3차: ‘자연치아 보존’ · ‘하지 않습니다’ 강조 — 금색(큰 글자라 흰 바탕 대비 충분) · 앞 문장은 굵게도 */
.belief__title em { font-style: normal; color: var(--gold); }
.belief__lead em { font-weight: 700; }
.belief__no::after { content: ""; position: absolute; left: -.12em; right: -.12em; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(201,161,89,0), #c9a159 16%, #a9843e 50%, #c9a159 84%, rgba(201,161,89,0)); }
.fm .belief__no::after { transition: scale 1.6s var(--fx-e) .85s; }
.fm .belief__title:not(.fx-in) .belief__no::after { scale: 0 1; }
.fm .belief__no .fxw__i { transition-delay: calc(var(--fx-d, 0s) + var(--i, 0) * 70ms + .3s); }   /* 큰 문장은 한 박자 쉬고 */

/* 그림 */
.belief__visual--tooth { position: relative; width: min(500px, 40vw + 40px); margin: clamp(8px, 1.4vw, 24px) auto 0; --ring-w: 1.7; --sw: 1; }
.belief__visual--tooth::before { content: ""; position: absolute; inset: 2% 4% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.96), rgba(255,251,243,.62) 48%, rgba(255,255,255,0)); pointer-events: none; }
.belief__visual--tooth img { position: relative; mix-blend-mode: normal; }
.bel-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bel-orbit--front { z-index: 1; }
.bel-orbit ellipse { fill: none; stroke-linecap: round; }
.bel-orbit__ring { stroke: rgba(169,132,62,.45); stroke-width: var(--ring-w); }
/* 궤도를 도는 빛 한 점: 점(spark) + 꼬리 두 겹(tail1·tail2). 꼬리는 같은 움직임을 조금 늦게 따라와 점 뒤에 붙는다 */
.bel-orbit :is(.bel-orbit__spark, .bel-orbit__tail1, .bel-orbit__tail2) { opacity: 0; stroke-dasharray: 0 100; }
.bel-orbit__spark { stroke: #dcbc78; stroke-width: calc(11px * var(--sw)); filter: drop-shadow(0 0 5px rgba(220,188,120,.95)); }
.bel-orbit__tail1 { stroke: rgba(201,161,89,.6); stroke-width: calc(4.5px * var(--sw)); }
.bel-orbit__tail2 { stroke: rgba(201,161,89,.28); stroke-width: calc(2.6px * var(--sw)); }
.fm .bel-orbit__ring { stroke-dasharray: 101 101; transition: stroke-dashoffset 2.6s var(--fx-e) .2s; }
.fm .belief__visual--tooth:not(:has(> img.fx-in)) .bel-orbit__ring { stroke-dashoffset: 101; }
.fm .bel-orbit :is(.bel-orbit__spark, .bel-orbit__tail1, .bel-orbit__tail2) { opacity: 1; transition: opacity 1.2s ease 1.8s; animation: belSpark 11s linear infinite; }
.fm .bel-orbit .bel-orbit__spark { stroke-dasharray: .4 99.6; }
.fm .bel-orbit .bel-orbit__tail1 { stroke-dasharray: 5 95; animation-delay: -10.472s; }    /* 11s × (1 − 4.8%) */
.fm .bel-orbit .bel-orbit__tail2 { stroke-dasharray: 12 88; animation-delay: -9.702s; }    /* 11s × (1 − 11.8%) */
.fm .belief__visual--tooth:not(:has(> img.fx-in)) .bel-orbit :is(.bel-orbit__spark, .bel-orbit__tail1, .bel-orbit__tail2) { opacity: 0; }
.fm .belief__visual--tooth::before { animation: belGlow 7s ease-in-out infinite alternate; }
.fm .belief.fx-off .bel-orbit ellipse, .fm .belief.fx-off .belief__visual--tooth::before { animation-play-state: paused; }
@keyframes belSpark { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes belGlow { from { opacity: .75; scale: .96; } to { opacity: 1; scale: 1.04; } }

/* 숫자 상자 */
.stats--hero { grid-template-columns: 1fr 1.34fr 1fr; align-items: center; gap: clamp(16px, 1.8vw, 28px); margin-top: clamp(48px, 2vw + 28px, 64px); }   /* 가운데 상자가 30px 떠 있으니 그만큼 더 띄운다 */
.stats--hero > li { padding: 36px 20px 38px; background: rgba(255,255,255,.7); }
.stats--hero .stats__k { font-size: clamp(15px, 14px + .2vw, 17px); color: var(--sub); }
.stats--hero .stats__v { margin: 10px 0 14px; font-size: clamp(26px, 16px + 1.6vw, 40px); font-weight: 600; color: #2a2a2a; font-variant-numeric: tabular-nums; }
.stats--hero .stats__s { font-size: clamp(14px, 13.4px + .15vw, 16px); color: var(--sub); }
.stats--hero > .stats__main { position: relative; z-index: 1; margin-block: -30px; padding: 56px 24px 52px; background: #fff; border: 1px solid rgba(169,132,62,.38); box-shadow: 0 36px 70px -28px rgba(110,80,30,.3), 0 12px 24px -16px rgba(110,80,30,.14); }
.stats--hero > .stats__main::before { content: ""; position: absolute; left: 50%; top: -1px; width: 64px; height: 3px; margin-left: -32px; background: var(--gold-btn); }
.stats__main .stats__k { font-size: clamp(16px, 14.8px + .25vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: var(--gold); }
.stats__main .stats__v { margin: 6px 0 12px; font-size: clamp(54px, 28px + 3.9vw, 92px); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; color: #a9843e; background: linear-gradient(100deg, #cfa75b 0%, #a9843e 55%, #8f6c2c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats__main .stats__s { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .fm .stats--hero > li.stats__main:hover { background-color: #fff; box-shadow: 0 44px 80px -28px rgba(110,80,30,.36), 0 14px 28px -16px rgba(110,80,30,.18); }
}

@media (max-width: 1023px) {
  .belief__no { font-size: clamp(32px, 6.4vw + 15px, 52px); }
  .belief__visual--tooth { width: clamp(250px, 44vw, 380px); margin-top: 18px; --ring-w: 3.2; --sw: 1.8; }
  .stats--hero { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 12px; margin-top: 14px; }   /* 좁은 폰에서 한쪽 설명이 두 줄이 돼도 두 상자 높이를 맞춘다 */
  .stats--hero > li { justify-content: center; padding: 22px 8px 22px; background: rgba(255,255,255,.72); }
  .stats--hero .stats__v { margin: 6px 0 6px; font-size: 24px; font-weight: 700; }
  .stats--hero .stats__k, .stats--hero .stats__s { font-size: 14px; }
  .stats--hero > .stats__main { grid-column: 1 / -1; order: -1; margin: 0; padding: 32px 16px 28px; }
  .stats__main .stats__k { font-size: 16px; }
  .stats__main .stats__v { margin: 4px 0 8px; font-size: clamp(52px, 40px + 4vw, 72px); }
  .stats__main .stats__s { font-size: 14px; }
  .belief__fade { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,0) 80%, #fff 97%); }   /* 움직임 줄이기(.fm 없음)에서도 — 모바일은 배경 mask 가 없어 흰 마키 띠와 딱 끊긴다 */
}
/* 고대비(강제 색상) 모드: 글자 그라데이션이 지워져도 5,001개가 보이게 */
@media (forced-colors: active) { .stats__main .stats__v { background: none; -webkit-text-fill-color: currentColor; } }
/* ── 30-sig-marquee.css ── */
/* 3 · Treatment Program ↔ Signature 경계 마키 (index.html 그대로) — 10-16 · 4차 ‘이 문구 글자 조금 작게’
   style.css 의 --lead-f(PC clamp(48px, 4.6vw, 88px) · 모바일 40px)를 약 0.8배로. 간격(--lead-gap)·움직임은 그대로 */
:root { --lead-f: clamp(40px, 3.7vw, 70px); }
@media (max-width: 1023px) { :root { --lead-f: 32px; } }
/* ── 50-why-a.css ── */
/* 5 · 왜 재식술은 최용훈치과일까? — 시안 A ‘숫자 선언형’ (10-15 오후)
   깊은 웜 차콜(위·아래 끝 --n-dk) 위에 섹션 위끝부터 아래끝까지 내려오는 가는 금색 세로선 3개(장부처럼)로 3단을 나누고,
   근거마다 아주 큰 숫자 + 제목 + 한 줄. 이미지 없음. 모바일·태블릿(<1024)은 세로선 하나에 세 블록이 차례로 매달린다.
   .is-js  js-parts/50-why-a.js 가 붙인다(숫자 띠·세 조각을 만든 뒤). 숨김·이동은 전부 .fm .why-a.is-js 아래 — 움직임 줄이기·JS 실패면 완성된 정지 화면.
   연출(.fm): 근거 줄이 화면 아래 20% 선을 지나면 .is-on —
             ① 위 경계(밝은 Mission → 어두움)에 금색 실선이 왼쪽에서 오른쪽으로 그어지고
             ② 실선이 지나가는 차례대로 세로선이 위에서 아래로 떨어진다(PC). 모바일은 세로선 하나가 스크롤 따라(--wa-y) 그려진다
             ③ 세로선이 숫자에 닿으면 숫자: 5,001 은 자리마다 숫자 띠가 0 에서 굴러 차오르고, 3 은 세 조각이 모여 붙고(금색 이음매), 1 은 위에서 아래로 그어진다
             ④ 제목·한 줄이 차례로 떠오른다 */
.why-a { --wa-px: clamp(20px, 2.8vw, 52px); position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(112px, 5vw + 72px, 168px) 0 clamp(120px, 5vw + 76px, 168px);
  background: radial-gradient(52% 34% at 50% 60%, rgba(214, 176, 104, .07), rgba(214, 176, 104, 0) 100%), var(--n-dk); }
.why-a__head, .why-a__list { position: relative; z-index: 1; }

/* ① 위 경계의 금색 실선 */
.why-a::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(214, 176, 104, .5) 0%, var(--n-gold-lt) 30%, rgba(214, 176, 104, .7) 70%, rgba(214, 176, 104, .2) 100%);
  box-shadow: 0 0 10px 1px rgba(214, 176, 104, .35); transform-origin: 0 50%; }

/* ② 세로선 (섹션 전체 높이, 3단의 왼쪽 끝) */
.why-a__rules { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); pointer-events: none; }
.why-a__rules i { position: relative; }
.why-a__rules i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(214, 176, 104, .6) 0%, rgba(214, 176, 104, .42) 22%, rgba(214, 176, 104, .8) 46%, rgba(214, 176, 104, .26) 76%, rgba(214, 176, 104, 0) 100%); }

/* 머리: 첫째 칸 안, 왼쪽 정렬 (공통 eyebrow + .h2, 어두운 바탕용 색) */
.why-a__head { max-width: calc(100% / 3); padding-left: var(--wa-px); }
.why-a .eyebrow { color: var(--n-gold-lt); }
.why-a .h2, .why-a .h2 strong { color: #fff; }
.why-a__nw { white-space: nowrap; }   /* ‘최용훈치과일까?’ 가 둘로 갈리지 않게 */

/* 세 근거 */
.why-a__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(72px, 3vw + 52px, 112px); }
@media (min-width: 1024px) {   /* 칸 너비를 정수 px 로 — 1px 선이 두 화소로 번져 흐려지지 않게 (지원 안 하는 브라우저는 위 1fr).
                                  세로선과 근거 칸이 같은 값을 써야 점이 선 위에 온다 → .why-a__list 기본 규칙보다 뒤에 둔다 (검수 10-15: 1920 에서 셋째 점이 선에서 2px 어긋났음) */
  .why-a__rules, .why-a__list { grid-template-columns: repeat(3, round(down, 33.333%, 1px)); }
}
.why-a__item { --wa-d: calc(.7s + var(--i, 0) * .4s); position: relative; min-width: 0; padding: 0 12px 0 var(--wa-px); }   /* 오른쪽 12px — 1024 폭에서도 한 줄이 한 줄로 */
/* 세로선 위의 점: 숫자 윗선 높이 */
.why-a__num::before { content: ""; position: absolute; left: calc(-1 * var(--wa-px) - 3px); top: calc(.19em - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--n-gold-lt);
  box-shadow: 0 0 0 4px rgba(214, 176, 104, .14), 0 0 14px rgba(214, 176, 104, .45); }

/* 숫자 */
.why-a__num { position: relative; font-size: clamp(64px, 8.4vw + 18px, 150px); line-height: 1.1; font-weight: 200; letter-spacing: -0.05em; color: #f4eee4;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.why-a__n { position: relative; display: inline-block; font-weight: inherit; }
.why-a__n--one { font-variant-numeric: proportional-nums; }
.why-a__n[data-roll] { margin-right: -.1em; }   /* 고정폭 숫자 끝 ‘1’ 의 오른쪽 빈자리만큼 단위를 당긴다 */
.why-a__num small { margin-left: .3em; font-size: max(16px, .15em); font-weight: 500; letter-spacing: -0.02em; color: var(--n-gold-lt); }
.why-a__t { margin-top: clamp(18px, .8vw + 12px, 28px); font-size: clamp(19px, .45vw + 14.5px, 24px); line-height: 1.45; font-weight: 600; letter-spacing: -0.035em; color: #fff; }
.why-a__txt { margin-top: 10px; font-size: clamp(15px, .15vw + 13.6px, 17px); line-height: 1.7; color: var(--n-dk-text); text-wrap: pretty; }
.why-a__src { margin-top: 14px; font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; color: rgba(255, 255, 255, .56); }   /* 금빛 번짐 위에서도 4.5:1 이상 */

/* 숫자 띠 (JS 가 만든다): 자릿수마다 0~9 띠가 굴러 목표 숫자에서 멈춘다. 띠의 기본 위치 = 목표 숫자(정지 화면) */
.why-a__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.why-a__od { display: inline-flex; }
.why-a__od > * { display: block; height: 1.1em; line-height: 1.1em; letter-spacing: 0; margin-right: -.05em; }   /* 자간은 바깥 여백으로 — 마스크가 글자 끝을 자르지 않게 */
.why-a__dg { -webkit-mask: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
.why-a__st { display: block; transform: translateY(calc(var(--k, 0) * -1.1em)); }
.why-a__st > span { display: block; height: 1.1em; }

/* 세 조각 (JS 가 만든다): 같은 숫자 세 장을 금 간 선으로 잘라 겹치고, 이음매에 금색을 얹는다 */
.why-a__n.is-frag { color: transparent; }
.why-a__fr { position: absolute; inset: 0; }
.why-a__fr > span { position: absolute; inset: 0; color: #f4eee4; }
.why-a__pc--1 { clip-path: polygon(-30% -30%, 130% -30%, 130% 36%, 100% 36%, 85% 40%, 60% 33%, 30% 36%, 0 31%, -30% 31%); transform-origin: 50% 25%; }
.why-a__pc--2 { clip-path: polygon(-30% 31%, 0 31%, 30% 36%, 60% 33%, 85% 40%, 100% 36%, 130% 36%, 130% 59%, 100% 59%, 78% 64%, 55% 61%, 25% 68%, 0 71%, -30% 71%); transform-origin: 75% 48%; }
.why-a__pc--3 { clip-path: polygon(-30% 71%, 0 71%, 25% 68%, 55% 61%, 78% 64%, 100% 59%, 130% 59%, 130% 130%, -30% 130%); transform-origin: 50% 75%; }
.why-a .why-a__seam { color: transparent; filter: drop-shadow(0 0 5px rgba(232, 201, 131, .6));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23efd394' stroke-linejoin='round'%3E%3Cpolyline vector-effect='non-scaling-stroke' stroke-width='4' points='0,31 30,36 60,33 85,40 100,36'/%3E%3Cpolyline vector-effect='non-scaling-stroke' stroke-width='4' points='0,71 25,68 55,61 78,64 100,59'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; }

/* 1 이 그어질 때 위에서 아래로 지나가는 빛 (평소엔 보이지 않음) */
.why-a__n--one::after { content: ""; position: absolute; left: -.06em; right: -.06em; top: 0; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(239, 211, 148, 0), #efd394 50%, rgba(239, 211, 148, 0)); box-shadow: 0 0 12px rgba(239, 211, 148, .7); }

/* ── 움직임 (.fm 아래만) ── */
.why-a.is-prep::before, .why-a.is-prep *, .why-a.is-prep *::before, .why-a.is-prep *::after { transition: none !important; }
.fm .why-a.is-js::before { transition: transform 1.3s cubic-bezier(.6, 0, .3, 1); }
.fm .why-a.is-js:not(.is-on)::before { transform: scaleX(0); }
.fm .why-a.is-js .why-a__num::before { transition: scale .7s var(--fx-e) calc(var(--wa-d) + .1s), opacity .4s ease calc(var(--wa-d) + .1s); }
.fm .why-a.is-js .why-a__n, .fm .why-a.is-js .why-a__num small { transition: opacity .7s ease calc(var(--wa-d) + .2s); }
.fm .why-a.is-js .why-a__st { transition: transform 2.4s cubic-bezier(.3, .55, .1, 1) calc(var(--wa-d) + .2s); }
.fm .why-a.is-js .why-a__pc { transition: transform 1.5s cubic-bezier(.3, .7, .15, 1) calc(var(--wa-d) + .8s); }
.fm .why-a.is-js .why-a__seam { transition: opacity 1s ease calc(var(--wa-d) + 2s); }
.fm .why-a.is-js .why-a__n--one { clip-path: inset(0 -20%); transition: clip-path 1.1s cubic-bezier(.6, 0, .2, 1) calc(var(--wa-d) + .35s), opacity .4s ease calc(var(--wa-d) + .35s); }
.fm .why-a.is-js .why-a__item.is-in .why-a__n--one::after { animation: waScan 1.1s cubic-bezier(.6, 0, .2, 1) calc(var(--wa-d) + .35s) both; }
@keyframes waScan { 0% { opacity: 0; translate: 0 .16em; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 .93em; } }
.fm .why-a.is-js :is(.why-a__t, .why-a__txt, .why-a__src) { transition: opacity 1s var(--fx-e), translate 1.2s var(--fx-e); }
.fm .why-a.is-js .why-a__t { transition-delay: calc(var(--wa-d) + .7s); }
.fm .why-a.is-js .why-a__txt { transition-delay: calc(var(--wa-d) + .85s); }
.fm .why-a.is-js .why-a__src { transition-delay: calc(var(--wa-d) + 1s); }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__num::before { scale: 0; opacity: 0; }
.fm .why-a.is-js .why-a__item:not(.is-in) :is(.why-a__n, .why-a__num small) { opacity: 0; }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__st { transform: translateY(0); }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__pc--1 { transform: translate(-.07em, -.13em) rotate(-8deg); }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__pc--2 { transform: translate(.1em, .01em) rotate(6deg); }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__pc--3 { transform: translate(-.05em, .14em) rotate(-5deg); }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__seam { opacity: 0; }
.fm .why-a.is-js .why-a__item:not(.is-in) .why-a__n--one { clip-path: inset(0 -20% 100% -20%); }
.fm .why-a.is-js .why-a__item:not(.is-in) :is(.why-a__t, .why-a__txt, .why-a__src) { opacity: 0; translate: 0 18px; }
@media (min-width: 1024px) {   /* 실선이 지나가는 차례대로 (세 칸 왼쪽 끝 ≈ 실선의 0·⅓·⅔ 지점) */
  .fm .why-a.is-js .why-a__rules i::before { clip-path: inset(0); transition: clip-path 1.7s cubic-bezier(.5, 0, .2, 1) var(--wa-r, .05s); }
  .fm .why-a.is-js .why-a__rules i:nth-child(2) { --wa-r: .45s; }
  .fm .why-a.is-js .why-a__rules i:nth-child(3) { --wa-r: .85s; }
  .fm .why-a.is-js:not(.is-on) .why-a__rules i::before { clip-path: inset(0 0 100% 0); }
}

/* ── 모바일·태블릿: 세로선 하나에 세 블록, 숫자 크게. 세로선은 스크롤 따라 그려진다 ── */
@media (max-width: 1023px) {
  .why-a { --wa-px: clamp(22px, 5vw, 40px); padding: 96px 0 112px; }
  .why-a__rules { grid-template-columns: minmax(0, 1fr); }
  .why-a__rules i + i { display: none; }
  .why-a__rules i::before { background: linear-gradient(180deg, rgba(214, 176, 104, .3) 0%, rgba(214, 176, 104, .75) 22%, rgba(214, 176, 104, .6) 80%, rgba(214, 176, 104, 0) 100%); }
  .fm .why-a.is-js .why-a__rules i::before { clip-path: inset(0 0 calc(100% - var(--wa-y, 0px)) 0); }
  .why-a__head { max-width: none; }
  .why-a__list { grid-template-columns: minmax(0, 1fr); row-gap: 60px; margin-top: 56px; }
  .why-a__item { --wa-d: 0ms; padding: 0 0 0 var(--wa-px); }
  .why-a__num { font-size: clamp(80px, 26vw, 132px); }
  .why-a__num small { font-size: 17px; }
}
/* ── 50-why-b.css ── */
/* 5 · 왜 재식술은 최용훈치과일까? — 시안 B ‘사진 패널형’ (10-15 오후)
   바탕   어두움(--n-dk, 위·아래 끝 모두). 글자는 제목 3개 + 근거마다 핵심 한 줄 + 숫자 하나.
   위 경계 곧은 직선 — Our Mission 아래에 바로 붙는다(10-16 · 3차: 계단처럼 솟았다 내려앉던 셔터를 뺐다).
   PC     .why-b--acc (50-why-b.js · ≥1024 · 움직임 허용): 사진 패널 셋 중 하나(.is-open)가 넓게 펼쳐지고 둘은 좁게 접힌다.
          접힌 패널은 번호 + 세로 제목, 펼친 패널은 제목·한 줄(왼쪽) + 큰 숫자(오른쪽). 사진·글은 펼친 폭에 고정 → 펼치는 동안 사진이 다시 늘어나거나 줄바꿈이 흔들리지 않는다.
          자동 넘김: 펼친 패널 아래 금색 막대(CSS 애니메이션)가 끝나면 다음 패널. 마우스·초점·화면 밖이면 잠깐 멈춤, 누르면 완전히 멈춤(머리 버튼으로 다시).
          .why-b--acc 가 없으면(움직임 줄이기·JS 없음) 세 패널이 같은 폭으로 나란히 서고 글이 모두 보인다.
   모바일 옆으로 넘기는 큰 사진 카드(scroll-snap) — 사진은 카드 위 3/4, 글은 그 아래(사진 속 숫자·얼굴을 글이 가리지 않게) + 아래 얇은 위치 막대.
   게시판 사진(n-whyb-board2.jpg)은 가로로 긴 판이라 늘 폭에 맞춰 위에 두고 아래만 스며들게 한다 — 글 칸과 겹치지 않는다(.why-b__p--board).
   등장   PC: 패널이 아래에서 위로 걷히듯(clip-path) 차례로 · 모바일: 카드가 오른쪽에서 걷히듯(clip-path) 차례로 — 카드 자체를 옮기면(translate)
          가로 scroll-snap 이 옮겨진 자리에 맞춰 줄을 밀어 첫 카드가 왼쪽에서 잘렸다가 튄다. 숨김은 .fx .why-b--js 아래, 움직임은 .fm 아래에서만. */
.why-b { --wb-gap: 14px; --wb-r: 18px; --wb-h: clamp(500px, 44vw, 680px); --wb-gl: var(--n-gold-lt);
  --wb-ink: rgba(27, 25, 22, 1); --wb-ink0: rgba(27, 25, 22, 0);
  position: relative; isolation: isolate; background: var(--n-dk); color: #fff;
  padding: clamp(104px, 4vw + 64px, 156px) 0 clamp(112px, 5vw + 64px, 172px); }

/* ── 머리 ──────────────────────────────────────── */
.why-b__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(36px, 2vw + 24px, 60px); }
.why-b .eyebrow { color: var(--wb-gl); }
.why-b .h2, .why-b .h2 strong { color: #fff; }
.why-b__ctl { display: flex; align-items: center; gap: 20px; padding-bottom: 4px; }
.why-b__count { display: flex; align-items: baseline; gap: 8px; font-size: 14px; letter-spacing: .14em; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.why-b__count b { font-size: 18px; font-weight: 600; color: #fff; }
.why-b__play { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); transition: border-color .3s, background-color .3s; }
.why-b__play:hover { border-color: var(--wb-gl); background: rgba(214, 176, 104, .1); }
.why-b__play:focus-visible { outline-color: var(--wb-gl); }
.why-b__play i { position: relative; width: 10px; height: 12px; }
.why-b__play i::before, .why-b__play i::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; border-radius: 1px; background: #fff; }
.why-b__play i::before { left: 0; }
.why-b__play i::after { right: 0; }
.why-b.is-stopped .why-b__play i::before { left: 1px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.why-b.is-stopped .why-b__play i::after { display: none; }

/* ── 사진 패널 (기본: PC 같은 폭 셋) ───────────── */
.why-b__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-gap); }
.why-b__p { position: relative; isolation: isolate; overflow: hidden; height: var(--wb-h); border-radius: var(--wb-r); background: var(--n-dk-2); }
.why-b__p::before { content: ""; position: absolute; z-index: 5; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
/* 기본(같은 폭 셋 · 모바일 카드): 사진은 패널 위 74%, 아래로 스며들고 글은 그 아래 — 사진 속 숫자·얼굴을 글이 가리지 않는다.
   아코디언(.why-b--acc)에서는 사진이 패널 전체를 채운다 */
.why-b__ph { position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 74%; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
/* --ph-t: 사진을 위로 끌어올리는 양(사진 속 중요한 부분을 글 위로) */
.why-b__ph img { position: absolute; top: var(--ph-t, 0%); left: 0; width: 100%; height: calc(100% - var(--ph-t, 0%)); max-width: none; object-fit: cover; object-position: var(--op, 50% 50%); }
/* 게시판: 숫자판 아래 빈 판(사진 아래 11%)에서만 스며들고, 글 뒤 어둠도 짧게 — 숫자판이 흐려지지 않게 */
.why-b__ph--board { height: auto; aspect-ratio: 1170 / 780; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
.why-b .why-b__p--board .why-b__body::before { top: -20%; }
/* PC 같은 폭 셋(움직임 줄이기·JS 없음): 카드가 높아 판 양옆 여백만 잘라 크게 (글귀 폭 820 + 여백 → 카드 폭) */
@media (min-width: 1024px) {
  .why-b__ph--board { aspect-ratio: 880 / 780; }
  .why-b__ph--board img { left: 50%; width: 132.95%; translate: -50% 0; }
}
.why-b__ph--frac { --op: 50% 30%; }
.why-b__ph--doc { --op: 50% 20%; }
/* 사진 위 끝을 아주 옅게 눌러 캡션이 읽히게 */
.why-b__ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(27, 25, 22, .34) 0%, var(--wb-ink0) 24%); }
.why-b__ph figcaption { position: absolute; z-index: 1; top: 18px; left: 18px; max-width: calc(100% - 36px); padding: 6px 12px; border-radius: 999px; background: rgba(27, 25, 22, .52);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .88); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 접착 전 → 후 사이 화살표 (사진 가운데 틈 위) */
.why-b__arr { position: absolute; z-index: 1; left: 50%; top: 34%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(27, 25, 22, .72);
  border: 1px solid rgba(214, 176, 104, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.why-b__arr::before { content: ""; position: absolute; inset: 0; background: var(--wb-gl);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M13 20h13M21 14l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M13 20h13M21 14l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* 접힌 패널을 덮는 어두운 막 (펼치면 걷힌다) */
.why-b__p::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(27, 25, 22, .6); opacity: 0; pointer-events: none; }
.why-b__p--board::after { background: rgba(27, 25, 22, .84); }   /* 흰 판은 접혔을 때 더 깊게 눌러 세로 제목이 읽히게 */

.why-b__v { display: none; }
/* 글: 글 덩어리에 붙은 어두운 막(::before)이 글 높이만큼 아래를 깊게 눌러 준다 → 글이 길어져도 늘 읽힌다 */
.why-b__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(24px, 1.4vw + 12px, 40px); }
.why-b__body::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -24%; pointer-events: none;
  background: linear-gradient(180deg, var(--wb-ink0) 0%, rgba(27, 25, 22, .6) 26%, rgba(27, 25, 22, .9) 52%, rgba(27, 25, 22, .97) 100%); }
.why-b__no { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--wb-gl); font-variant-numeric: tabular-nums; }
.why-b__no::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.why-b__t { margin-top: 12px; font-size: clamp(21px, .9vw + 12px, 30px); line-height: 1.35; font-weight: 700; letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
.why-b__stat { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; line-height: 1; color: var(--wb-gl); white-space: nowrap; }
.why-b__stat b { font-size: clamp(52px, 2.6vw + 22px, 84px); font-weight: 300; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.why-b__stat small { font-size: clamp(17px, .4vw + 13px, 21px); font-weight: 500; letter-spacing: -0.02em; }
.why-b__line { margin-top: 12px; font-size: clamp(15px, .15vw + 13.6px, 17px); line-height: 1.6; color: rgba(255, 255, 255, .82); letter-spacing: -0.03em; text-wrap: pretty; }
.why-b__line small { display: inline-block; font-size: 12.5px; letter-spacing: 0; color: rgba(255, 255, 255, .52); white-space: nowrap; }
.why-b__hit, .why-b__bar, .why-b__track { display: none; }

/* ── PC 아코디언 (.why-b--acc) ───────────────────── */
.why-b--acc .why-b__list { --wb-o: 3.4; --wb-ow: calc((100cqw - 2 * var(--wb-gap)) * .6296); display: flex; container-type: inline-size; }
.why-b--acc .why-b__p { flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--fx-e, ease); }
.why-b--acc .why-b__p.is-open { flex-grow: var(--wb-o); }
.why-b--acc .why-b__ph { height: 100%; -webkit-mask-image: none; mask-image: none; }
.why-b--acc .why-b__ph img { left: 50%; width: var(--wb-ow); translate: calc(var(--fc, .5) * -100%) 0; scale: 1.06;
  transition: translate .9s var(--fx-e, ease), scale 1.6s var(--fx-e, ease); }
.why-b--acc .why-b__p.is-open .why-b__ph img { translate: -50% 0; scale: 1; }
/* 게시판: 펼친 폭에 맞춘 원래 비율, 판 위 여백만 조금 올려 숫자판이 글 위에서 끝나게 (틀은 패널 전체 — 기본의 aspect-ratio 를 풀어야 폭이 늘지 않는다) */
.why-b--acc .why-b__ph--board { aspect-ratio: auto; }
.why-b--acc .why-b__ph--board img { top: calc(var(--wb-ow) * -.075); height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
.why-b--acc .why-b__p::after { opacity: 1; transition: opacity .6s; }
.why-b--acc .why-b__p.is-open::after { opacity: 0; }
.why-b--acc .why-b__p:not(.is-open):hover::after { opacity: .4; }
.why-b--acc :is(.why-b__ph figcaption, .why-b__arr) { opacity: 0; transition: opacity .3s; }
.why-b--acc .why-b__p.is-open :is(.why-b__ph figcaption, .why-b__arr) { opacity: 1; transition: opacity .6s .55s; }
/* 접힌 패널: 번호 + 세로 제목 (왼쪽 줄) */
.why-b--acc .why-b__v { position: absolute; z-index: 2; top: 30px; left: clamp(22px, 1vw + 12px, 30px); display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: none;
  opacity: 1; transition: opacity .5s .35s; }
.why-b--acc .why-b__v i { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--wb-gl); font-variant-numeric: tabular-nums; }
.why-b--acc .why-b__v span { writing-mode: vertical-rl; font-size: clamp(17px, .3vw + 14px, 19px); font-weight: 600; letter-spacing: .03em; line-height: 1; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.why-b--acc .why-b__p.is-open .why-b__v { opacity: 0; transition: opacity .2s; }
/* 펼친 패널: 왼쪽 제목·한 줄, 오른쪽 큰 숫자 */
.why-b--acc .why-b__body { right: auto; width: var(--wb-ow); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no stat" "t stat" "line stat"; column-gap: 40px; align-items: end;
  opacity: 0; transition: opacity .3s; }
.why-b--acc .why-b__body::before { top: -90%; }
.why-b--acc .why-b__no { grid-area: no; }
.why-b--acc .why-b__t { grid-area: t; --n: 1; }
.why-b--acc .why-b__line { grid-area: line; --n: 2; }
.why-b--acc .why-b__stat { grid-area: stat; margin: 0 0 -4px; --n: 1; }
.why-b--acc .why-b__p.is-open .why-b__body { opacity: 1; transition: opacity .7s var(--fx-e, ease) .4s; }
.fm .why-b--acc .why-b__body > * { transition: translate .9s var(--fx-e) calc(.4s + var(--n, 0) * 80ms); }
.fm .why-b--acc .why-b__p:not(.is-open) .why-b__body > * { translate: 0 18px; transition-delay: 0s; }
/* 패널 전체가 버튼 */
.why-b--acc .why-b__hit { display: block; position: absolute; z-index: 4; inset: 0; width: 100%; border-radius: var(--wb-r); cursor: pointer; }
.why-b--acc .why-b__hit:focus-visible { outline: 2px solid var(--wb-gl); outline-offset: -4px; }
/* 자동 넘김 진행 막대 */
.why-b--acc .why-b__bar { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wb-gl); transform-origin: 0 50%; scale: 0 1; opacity: 0; transition: opacity .3s; }
.why-b--auto .why-b__p.is-open .why-b__bar { opacity: 1; }
.why-b--auto .why-b__bar.is-run { animation: whybProg var(--wb-dur, 6.5s) linear forwards; }
.why-b--auto.why-b--hold .why-b__bar.is-run { animation-play-state: paused; }
@keyframes whybProg { from { scale: 0 1; } to { scale: 1 1; } }

/* ── 모바일·태블릿 (≤1023): 옆으로 넘기는 사진 카드 ─────────── */
@media (max-width: 1023px) {
  .why-b { --wb-gap: 12px; --wb-r: 16px; padding: 76px 0 96px; }
  .why-b__head { margin-bottom: 30px; }
  .why-b__list { display: flex; gap: var(--wb-gap); margin-inline: calc(-1 * var(--gut)); padding: 0 0 0 var(--gut); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .why-b__list::-webkit-scrollbar { display: none; }
  .why-b__list::after { content: ""; flex: 0 0 calc(var(--gut) - var(--wb-gap)); }
  .why-b__p { flex: 0 0 min(80vw, 360px); height: auto; aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .why-b__ph figcaption { top: 14px; left: 14px; max-width: calc(100% - 28px); padding: 5px 11px; font-size: 12px; }
  .why-b__arr { width: 34px; height: 34px; margin: -17px 0 0 -17px; top: 36%; }
  .why-b__body { padding: 0 22px 24px; }
  .why-b__t { margin-top: 10px; font-size: 20px; }
  .why-b__stat { margin-top: 10px; }
  .why-b__stat b { font-size: 46px; }
  .why-b__stat small { font-size: 17px; }
  .why-b__line { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
  .why-b__line small { display: block; margin: 3px 0 0; font-size: 12px; }
  .why-b__track { display: block; position: relative; width: 84px; height: 2px; margin: 26px auto 0; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
  .why-b__track i { position: absolute; top: 0; left: 0; width: 33.334%; height: 100%; border-radius: 2px; background: var(--wb-gl); translate: calc(var(--wb-sp, 0) * 200%) 0; }
}

/* ── 등장 ──────────────────────────────────────── */
.why-b__p { --wb-d: calc(var(--i, 0) * 140ms); }
.fx .why-b--js .why-b__list:not(.is-in) .why-b__p { opacity: 0; }
.fx .why-b--js .why-b__p { transition: opacity .8s ease var(--wb-d); }
.fx .why-b--js.why-b--acc .why-b__p { transition: opacity .8s ease var(--wb-d), flex-grow .9s var(--fx-e, ease); }
@media (min-width: 1024px) {
  .fm .why-b--js .why-b__list .why-b__p { transition: opacity .5s ease var(--wb-d), clip-path 1.4s var(--fx-e) var(--wb-d), flex-grow .9s var(--fx-e); clip-path: inset(0 0 0 0 round var(--wb-r)); }
  .fm .why-b--js .why-b__list:not(.is-in) .why-b__p { opacity: 1; clip-path: inset(100% 0 0 0 round var(--wb-r)); }
  .fm .why-b--js .why-b__list:not(.is-in) .why-b__ph img { scale: 1.16; }
  .fm .why-b--js .why-b__ph img { transition: translate .9s var(--fx-e), scale 2s var(--fx-e) var(--wb-d); }
}
@media (max-width: 1023px) {
  .fm .why-b--js .why-b__list .why-b__p { transition: clip-path 1.1s var(--fx-e) var(--wb-d); clip-path: inset(0 0 0 0 round var(--wb-r)); }
  .fm .why-b--js .why-b__list:not(.is-in) .why-b__p { opacity: 1; clip-path: inset(0 0 0 100% round var(--wb-r)); }
  .fm .why-b--js .why-b__ph img { transition: scale 1.8s var(--fx-e) var(--wb-d); }
  .fm .why-b--js .why-b__list:not(.is-in) .why-b__ph img { scale: 1.12; }
}
/* ── 50-why-c.css ── */
/* 5 · 왜 재식술은 최용훈치과일까? — C안 · 스크롤 무대형 (10-15 오후 · 저녁: 모바일 무대 · 진입·숫자 연출 교체) · 어두운 바탕(위·아래 끝 --n-dk)
   컨셉   화면이 멈추고 스크롤할 때마다 한 장면씩 넘어가는 무대.
   PC     .is-stage   무대(.why-c__stage)가 화면에 고정 — 왼쪽: 큰 번호(굴러 바뀜)·제목·한 줄 / 오른쪽: 숫자·사진 판이 막이 오르듯 갈마든다 / 아래: 진행선
   모바일 .is-mstage  화면 가득 찬 무대(테두리·둥근 모서리 없음, 높이 100svh)가 고정 — 장면은 화면 전체(사진 전체 화면 + 아래 어둠 위에 번호·제목·한 줄),
                      장면이 막이 오르듯 아래에서 위로 바뀐다. 오른쪽 끝 세로 진행 표시 01/02/03. 머리(제목)는 01 장면에만 있고 02 부터 걷힌다.
   진입   조명이 켜지듯 — 무대를 덮은 어둠 두 겹(.why-c__lamp i: 고른 어둠 · 가장자리 어둠)이 스크롤에 따라 걷힌다 → 스포트라이트 자리가 먼저, 가장자리가 나중에 밝아진다
   01 숫자 둘레 원이 금색 획으로 그려지고(stroke-dashoffset) 숫자가 흐림 → 선명(.is-lit)
   그 밖(움직임 줄이기·스크립트 없음·낮은 화면): 고정·전환 없이 세 장면이 차례로 다 보인다 — 이 정지 상태가 완성된 모습이다(모바일도 화면 폭 가득 찬 장면).
   상태 클래스는 모두 js-parts/50-why-c.js 가 붙인다(.why-c--js 는 움직임 허용 .fm 일 때만). */
.why-c { position: relative; isolation: isolate; background: var(--n-dk); color: #fff; }
.why-c .eyebrow { color: var(--n-gold-lt); }
.why-c .h2 { color: #fff; }
.why-c__nw { white-space: nowrap; }
.why-c__stage { position: relative; background: radial-gradient(42% 52% at 74% 54%, rgba(214, 176, 104, .07), rgba(214, 176, 104, 0) 70%); }
.why-c__in { padding-block: clamp(96px, 5vw + 48px, 140px); }
.why-c__head { margin-bottom: clamp(48px, 3vw + 24px, 72px); }

/* 글: 큰 번호 · 제목 · 한 줄 */
.why-c__no { display: block; overflow: hidden; font-size: clamp(64px, 5vw + 36px, 132px); line-height: 1; }
.why-c__no > span, .why-c__n { display: block; font-weight: 200; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #f0dcae 0%, var(--n-gold-lt) 46%, #9c7a3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-c__no > span { padding-bottom: .02em; }
.why-c__t { margin-top: clamp(16px, 1vw + 6px, 26px); font-size: clamp(25px, 1.3vw + 17px, 46px); line-height: 1.32; font-weight: 700; letter-spacing: -0.045em; color: #fff; text-wrap: balance; }
.why-c__one { margin-top: clamp(12px, .6vw + 8px, 20px); max-width: 24em; font-size: clamp(16px, .3vw + 13.5px, 19px); line-height: 1.7; color: var(--n-dk-text); text-wrap: pretty; }

/* 그림 판 (공통) */
.why-c__vis { position: relative; overflow: hidden; margin: 0; border-radius: clamp(16px, .8vw + 10px, 24px); background: var(--n-dk-2); }
.why-c__vis::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }

/* 01 · 숫자 판: 나이테처럼 퍼지는 가는 금색 원 위에 5,001 — 둘레에 금색 원 하나(.why-c__ring) */
.why-c__vis--num { --nf: clamp(96px, 10vw + 20px, 216px); display: grid; place-content: center; justify-items: center; padding: 32px; text-align: center;
  background: radial-gradient(58% 52% at 50% 46%, rgba(214, 176, 104, .15), rgba(214, 176, 104, 0) 72%), var(--n-dk-2); }
.why-c__vis--num::before { content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(214, 176, 104, 0) 0 52px, rgba(214, 176, 104, .11) 53px 54px);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0) 92%); mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0) 92%); }
.why-c__big { position: relative; line-height: 1; }
.why-c__nb { display: flex; align-items: baseline; }
.why-c__n { font-size: var(--nf); }
.why-c__big small { margin-left: .18em; font-size: clamp(20px, .8vw + 13px, 30px); font-weight: 500; color: var(--n-gold-lt); }
/* 원: 지름 = 숫자 크기 × 3.05 (‘5,001개’ 양옆에 여백이 남게). 획 굵기는 viewBox(100) 단위 — 원 지름에 비례하므로 폭 구간마다 값을 달리해 약 1–1.7px 로 맞춘다 */
.why-c__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--nf) * 3.05); height: calc(var(--nf) * 3.05); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.why-c__ring circle { fill: none; stroke: var(--n-gold-lt); stroke-width: .26; stroke-linecap: round; opacity: .7; }
.why-c__src { position: relative; margin-top: clamp(16px, 1vw + 8px, 28px); font-size: 13px; line-height: 1.5; letter-spacing: .01em; color: rgba(255, 255, 255, .5); }

/* 02 · 접착 전·후 사진 */
.why-c__vis--pair img { width: 100%; height: 100%; object-fit: cover; }
.why-c__vis--pair figcaption { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; padding: 14px; pointer-events: none; }
.why-c__vis--pair figcaption span { justify-self: start; padding: 5px 12px; border-radius: 999px; background: rgba(27, 25, 22, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #fff; }
.why-c__vis--pair figcaption span + span { background: rgba(140, 111, 53, .92); }
/* 무대 전용: 같은 칸의 전 → 후 를 스크롤로 쓸어 바꾼다(오른쪽에서 왼쪽으로, 금색 선이 경계). 위치는 js 가 transform 으로만 */
.why-c__ba { display: none; }
.why-c__ba img { position: absolute; inset: 0; }
.why-c__after { position: absolute; inset: 0; z-index: 1; overflow: hidden; transform: translateX(100%); }
.why-c__after > div { position: absolute; inset: 0; transform: translateX(-100%); }
.why-c__after::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; background: var(--n-gold-lt);
  box-shadow: 0 0 16px 2px rgba(214, 176, 104, .5); opacity: calc((1 - var(--w, 0)) * 10); }
.why-c__tag { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(27, 25, 22, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #fff; }
.why-c__tag--after { left: auto; right: 14px; background: rgba(140, 111, 53, .92); }

/* 03 · 대표원장: 배경을 투명하게 오린 사진이 어두운 판 위 조명 아래 선다 */
.why-c__vis--doc { background: radial-gradient(64% 54% at 50% 26%, rgba(214, 176, 104, .2), rgba(214, 176, 104, 0) 72%), linear-gradient(180deg, #2b2722, var(--n-dk-2) 70%); }
.why-c__vis--doc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.why-c__vis--doc figcaption { position: absolute; z-index: 1; left: clamp(18px, 1.2vw + 8px, 30px); bottom: clamp(16px, 1.2vw + 6px, 28px); font-size: 15px; font-weight: 700; line-height: 1.45; color: #fff; }
.why-c__vis--doc figcaption span { display: block; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .6); }

/* 진행 표시 · 조명(어둠 막) — 무대에서만 */
.why-c__prog, .why-c__lamp { display: none; }
.why-c__prog span { display: grid; gap: 12px; }
.why-c__prog b { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .18em; color: rgba(255, 255, 255, .36); font-variant-numeric: tabular-nums; transition: color .5s; }
.why-c__prog .is-done b { color: rgba(255, 255, 255, .7); }
.why-c__prog .is-on b { color: var(--n-gold-lt); }
.why-c__prog i { position: relative; display: block; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.why-c__prog s { position: absolute; inset: 0; background: var(--n-gold-lt); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }

/* ── PC 정지 배치 ───────────────────────────── */
@media (min-width: 1024px) {
  .why-c__list { display: grid; gap: clamp(72px, 4vw + 32px, 112px); }
  .why-c__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 5.5vw, 104px); align-items: center; }
  .why-c__vis { aspect-ratio: 5 / 4; }
  .why-c__vis--num { --nf: clamp(80px, 8vw + 8px, 180px); }   /* 5:4 판 안에 원이 다 들어가게 (무대에서는 아래에서 다시 키운다) */
}

/* ── 모바일 정지 배치: 화면 폭 가득 찬 장면이 차례로(그림 위 → 아래 어둠에 번호·제목·한 줄이 겹쳐 얹힌다) ── */
@media (max-width: 1023px) {
  .why-c__stage { background: none; }   /* PC 판 뒤 금빛은 모바일 장면 사이 틈에 네모 얼룩으로 비친다 */
  .why-c__in { padding-block: 88px 0; }
  .why-c__head { margin-bottom: 40px; }
  .why-c__list { display: grid; margin-inline: calc(var(--gut) * -1); }
  .why-c__item { position: relative; display: flex; flex-direction: column; }
  .why-c__vis { order: -1; border-radius: 0; }
  .why-c__vis::after { inset: auto 0 0; height: 60%; border-radius: 0; box-shadow: none;
    background: linear-gradient(180deg, rgba(27, 25, 22, 0), rgba(27, 25, 22, .66) 52%, var(--n-dk)); }
  .why-c__txt { position: relative; z-index: 3; margin-top: -84px; padding: 0 var(--gut) 72px; }
  .why-c__item:last-child .why-c__txt { padding-bottom: 104px; }
  .why-c__no { font-size: clamp(52px, 8vw + 20px, 84px); }
  .why-c__t { margin-top: 8px; font-size: clamp(24px, 2.4vw + 16px, 34px); }
  .why-c__one { margin-top: 8px; font-size: 15.5px; line-height: 1.65; }
  /* 숫자·원장 장면 바탕은 섹션과 같은 --n-dk 에 빛만 얹는다 — 장면 위·아래 끝에 색 띠가 생기지 않게 */
  /* 숫자 크기는 폭·높이 중 작은 쪽에 맞추고(가로로 눕힌 휴대폰), 위·아래 여백은 원이 잘리지 않게 숫자 크기에 비례 */
  .why-c__vis--num { --nf: clamp(64px, min(22vw, 24vh), 150px); min-height: 112vw; min-height: min(112vw, 80svh); padding: calc(var(--nf) * 1.1) 0 calc(var(--nf) * .8 + 84px);
    background: radial-gradient(70% 40% at 50% 46%, rgba(214, 176, 104, .16), rgba(214, 176, 104, 0) 72%), var(--n-dk); }
  .why-c__big small { font-size: 20px; }
  .why-c__ring circle { stroke-width: .42; }
  .why-c__src { margin-top: 14px; font-size: 12.5px; }
  .why-c__vis--pair { aspect-ratio: 752 / 766; max-height: calc(100vh - var(--hdr-h)); max-height: calc(100svh - var(--hdr-h)); }
  .why-c__vis--doc { height: 118vw; height: min(118vw, 100svh - var(--hdr-h));
    background: radial-gradient(70% 38% at 50% 30%, rgba(214, 176, 104, .26), rgba(214, 176, 104, 0) 72%), var(--n-dk); }
  /* 사진 위 이름표: 둥근 알약 대신 가는 금색 선 + 글자 (B안 카드의 알약 이름표와 다르게) */
  .why-c__vis--pair figcaption { padding: 18px var(--gut); column-gap: var(--gut); }
  .why-c__vis--pair figcaption span, .why-c__tag { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 12.5px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
  .why-c__vis--pair figcaption span::before, .why-c__tag::before { content: ""; width: 18px; height: 1px; background: currentColor; }
  .why-c__vis--pair figcaption span + span, .why-c__tag--after { background: none; color: var(--n-gold-lt); }
  .why-c__tag { top: 18px; left: var(--gut); }
  .why-c__tag--after { left: auto; right: var(--gut); }
  .why-c__vis--doc figcaption { top: 18px; bottom: auto; left: var(--gut); font-size: 14px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
  .why-c__vis--doc figcaption span { font-size: 12.5px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .why-c__txt > * { max-width: 560px; }
  .why-c__ring circle { stroke-width: .3; }
  .why-c__vis--num { min-height: 80vw; min-height: min(80vw, 70svh); }
  .why-c__vis--doc { height: 90vw; height: min(90vw, 100svh - var(--hdr-h)); }
}

/* ── 정지 배치 등장 (움직임 허용 · 무대가 아닐 때): 장면이 화면에 들어오면 글이 차례로 떠오르고 사진이 제자리로 ── */
.why-c--js:not(.is-stage):not(.is-mstage) .why-c__txt > * { transition: opacity .9s var(--fx-e, ease), transform 1.1s var(--fx-e, ease); }
.why-c--js:not(.is-stage):not(.is-mstage) .why-c__txt > :nth-child(2) { transition-delay: .1s; }
.why-c--js:not(.is-stage):not(.is-mstage) .why-c__txt > :nth-child(3) { transition-delay: .2s; }
.why-c--js:not(.is-stage):not(.is-mstage) .why-c__item:not(.is-in) .why-c__txt > * { opacity: 0; transform: translateY(22px); }
.why-c--js:not(.is-stage):not(.is-mstage) .why-c__vis > img { transition: transform 1.6s var(--fx-e, ease), opacity 1.2s var(--fx-e, ease); }
.why-c--js:not(.is-stage):not(.is-mstage) .why-c__item:not(.is-in) .why-c__vis > img { transform: scale(1.08); opacity: .4; }

/* ── 01 숫자 등장 (움직임 허용일 때 · 모든 배치): 둘레 원이 금색 획으로 그려지고, 숫자가 흐림 → 선명. 원 둘레 = 2π × 49.5 ≈ 311 ── */
.why-c--js .why-c__ring circle { stroke-dasharray: 312 312; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .25, 1) .15s; }
.why-c--js .why-c__vis--num:not(.is-lit) .why-c__ring circle { stroke-dashoffset: 312; }
.why-c--js .why-c__nb { transition: opacity 1.1s ease .5s, filter 1.7s cubic-bezier(.2, .7, .2, 1) .5s, transform 2s cubic-bezier(.2, .7, .2, 1) .5s; }
.why-c--js .why-c__vis--num:not(.is-lit) .why-c__nb { opacity: 0; filter: blur(18px); transform: scale(.92); }
.why-c--js .why-c__src { transition: opacity 1s ease 1.5s; }
.why-c--js .why-c__vis--num:not(.is-lit) .why-c__src { opacity: 0; }

/* ── 무대 공통 (PC .is-stage · 모바일 .is-mstage) ── */
/* 조명: 고른 어둠(첫 겹)이 먼저 걷히고, 스포트라이트 둘레만 남긴 어둠(둘째 겹)이 나중에 걷힌다. 투명도는 js 가 스크롤에 맞춰 준다 */
.why-c:is(.is-stage, .is-mstage) .why-c__lamp { display: block; position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.why-c__lamp i { position: absolute; inset: 0; }
.why-c__lamp i:first-child { background: rgba(27, 25, 22, .9); }
.why-c__lamp i + i { background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(27, 25, 22, 0) var(--lr0, 160px), rgba(27, 25, 22, .86) var(--lr1, 440px)); }
/* 그림 판·장면: 막이 오르듯 — 새 장면은 아래에서 위로 열리고, 지난 장면은 같은 선을 따라 위로 걷힌다(스크롤을 되돌리면 반대로) */
.why-c:is(.is-stage, .is-mstage) .why-c__vis { z-index: 1; clip-path: inset(100% 0 0 0); transition: clip-path 1.05s cubic-bezier(.72, 0, .18, 1); }
.why-c:is(.is-stage, .is-mstage) .why-c__item.is-on .why-c__vis { z-index: 2; clip-path: inset(0 0 0 0); }
.why-c:is(.is-stage, .is-mstage) .why-c__item.is-past .why-c__vis { clip-path: inset(0 0 100% 0); }
.why-c:is(.is-stage, .is-mstage) .why-c__vis--pair :is(.why-c__pair, figcaption) { display: none; }
.why-c:is(.is-stage, .is-mstage) .why-c__ba { display: block; position: absolute; inset: 0; }
.why-c:is(.is-stage, .is-mstage) :is(.why-c__vis > img, .why-c__big, .why-c__ba) { transform: translateY(14%) scale(1.06); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.why-c:is(.is-stage, .is-mstage) .is-on :is(.why-c__vis > img, .why-c__big, .why-c__ba) { transform: none; }
.why-c:is(.is-stage, .is-mstage) .is-past :is(.why-c__vis > img, .why-c__big, .why-c__ba) { transform: translateY(-14%) scale(1.06); }
.why-c:is(.is-stage, .is-mstage) .why-c__vis figcaption { opacity: 0; transition: opacity .4s; }
.why-c:is(.is-stage, .is-mstage).is-in .is-on .why-c__vis figcaption { opacity: 1; transition: opacity .8s .7s; }
/* 글: 지난 글은 위로 사라지고 새 글이 아래에서 떠오른다. 번호는 칸 안에서 굴러 바뀐다 */
.why-c:is(.is-stage, .is-mstage) .why-c__txt > :not(.why-c__no) { opacity: 0; transform: translateY(32px); transition: opacity .35s ease, transform .5s cubic-bezier(.4, 0, .2, 1); }
.why-c:is(.is-stage, .is-mstage) .is-past .why-c__txt > :not(.why-c__no) { transform: translateY(-32px); }
.why-c:is(.is-stage, .is-mstage).is-in .is-on .why-c__txt > :not(.why-c__no) { opacity: 1; transform: none; transition: opacity .8s ease .42s, transform 1s cubic-bezier(.2, .7, .2, 1) .42s; }
.why-c:is(.is-stage, .is-mstage).is-in .is-on .why-c__txt > .why-c__one { transition-delay: .54s; }
.why-c:is(.is-stage, .is-mstage) .why-c__no > span { transform: translateY(105%); transition: transform .8s cubic-bezier(.72, 0, .18, 1); }
.why-c:is(.is-stage, .is-mstage) .is-past .why-c__no > span { transform: translateY(-105%); }
.why-c:is(.is-stage, .is-mstage).is-in .is-on .why-c__no > span { transform: none; transition-delay: .12s; }

/* ── PC 무대 (.is-stage: 움직임 허용 · 폭 ≥1024 · 화면 높이 600–1600 · 가로가 더 긴 화면) ── */
.why-c.is-stage .why-c__track { height: 340vh; }
.why-c.is-stage .why-c__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--hdr-h); overflow: hidden; display: grid; align-items: center; }
.why-c.is-stage .why-c__lamp { --lx: 74%; --ly: 54%; --lr0: 22vw; --lr1: 64vw; }
/* 무대 높이는 1040px 까지 — 아주 높은 화면(2560×1440 등)에서 그림 판이 좁고 길어져 사진이 지나치게 확대되지 않게, 남는 높이는 위아래로 나눈다 */
.why-c.is-stage .why-c__in { height: 100%; max-height: 1040px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(48px, 5.5vw, 104px); padding-block: clamp(28px, 6vh, 72px); }
.why-c.is-stage .why-c__head { grid-area: 1 / 1; margin: 0; }
.why-c.is-stage :is(.why-c__list, .why-c__item) { display: contents; }
.why-c.is-stage .why-c__txt { grid-area: 2 / 1; align-self: end; padding: 24px 0 clamp(20px, 6vh, 80px); }
.why-c.is-stage .why-c__one { min-height: 3.4em; }   /* 한 줄이 두 줄로 접혀도 세 근거의 번호 높이가 같게 */
.why-c.is-stage .why-c__no { font-size: clamp(72px, min(8vw, 15vh), 150px); }
.why-c.is-stage .why-c__vis { grid-area: 1 / 2 / 4 / 3; aspect-ratio: auto; min-height: 0; }
.why-c.is-stage .why-c__vis--num { --nf: clamp(96px, 10vw + 20px, 216px); }
.why-c.is-stage:not(.is-in) .why-c__item.is-on .why-c__vis { clip-path: inset(50% 0 50% 0); }   /* 처음 들어올 때: 가운데 한 줄에서 위아래로 열린다 */
/* 진행선 (가로) */
.why-c.is-stage .why-c__prog { grid-area: 3 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 420px; }

/* ── 모바일 무대 (.is-mstage: 움직임 허용 · 폭 <1024 · 화면 높이 ≥520) ──
   무대 높이 100svh(가장 작은 화면 높이 — iOS 주소창이 접히고 펴져도 무대 크기가 바뀌지 않는다. 주소창이 접혀 생기는 아래 틈은 같은 어두운 바탕)
   장면 영역 = 머리 띠(--hdr-h) 아래 전체. 장면 사이 스크롤 약 0.7 화면 */
.why-c.is-mstage { padding-bottom: clamp(24px, 4vh, 40px); }
.why-c.is-mstage .why-c__track { height: 320vh; height: 320svh; }
.why-c.is-mstage .why-c__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--n-dk); }
.why-c.is-mstage .why-c__lamp { --lx: 50%; --ly: 50%; --lr0: 30vw; --lr1: 92vw; }
.why-c.is-mstage .why-c__in { position: relative; height: 100%; max-width: none; padding: 0; }
.why-c.is-mstage .why-c__head { position: absolute; z-index: 4; top: calc(var(--hdr-h) + clamp(24px, 4.5vh, 52px)); left: var(--gut); right: var(--gut); margin: 0;
  transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.why-c.is-mstage.is-moved .why-c__head { opacity: 0; transform: translateY(-20px); transition: opacity .35s ease, transform .5s ease; }
/* 375 폭 아래(360 등)에서는 제목이 두 줄로 접혀 01 숫자 원 자리를 먹는다 → 무대에서만 한 줄에 들어가게 조금 줄인다(30px → 360 폭 28.8px) */
@media (max-width: 374px) { .why-c.is-mstage .why-c__head .h2 { font-size: 8vw; } }
.why-c.is-mstage .why-c__list { position: absolute; inset: var(--hdr-h) 0 0; display: block; margin: 0; }
.why-c.is-mstage .why-c__item { position: absolute; inset: 0; display: block; }
.why-c.is-mstage .why-c__vis { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; padding: 0; background-color: var(--n-dk); }
.why-c.is-mstage .why-c__vis::after { height: 56%; }
.why-c.is-mstage .why-c__txt { position: absolute; z-index: 3; left: var(--gut); right: calc(var(--gut) + 34px); bottom: clamp(28px, 5.5vh, 64px); margin: 0; padding: 0; }
.why-c.is-mstage .why-c__item:last-child .why-c__txt { padding: 0; }
/* 01 숫자 무대: 사진 없이 어둠 속 금빛 원 — 숫자는 머리 아래와 글 위 사이 가운데 */
.why-c.is-mstage .why-c__vis--num { --nf: clamp(64px, 22vw, 150px); place-content: center; padding: 15vh 0 25vh; padding: 15svh 0 25svh; }
/* js 가 머리 아래 끝(--b0)·01 글 위 끝(--b1, 아래에서 잰 값)·그 사이 띠 높이(--bh)를 재어 주면: 원 가운데 = 띠 가운데(원 아래 출처 줄 몫 33px 만큼 위 여백을 더 준다),
   원 지름(숫자 × 3.05) ≤ 띠 − 24px. 숫자 76px 밑으로는 줄이지 않는다(원 안 출처 줄이 원에 걸림) — 그만큼 띠가 안 나오는 낮은 화면은 js 가 정지 배치로 둔다 */
.why-c.is-mstage .why-c__vis--num.is-fit { --nf: clamp(76px, min(22vw, (var(--bh) - 24px) / 3.05), 150px); padding: calc(var(--b0) + 33px) 0 var(--b1); }
.why-c.is-mstage .why-c__vis--num::before { inset: -10% -60%; }
/* 02 접착 전 → 후: 사진이 장면 전체. 치아가 화면 가운데 오도록 오른쪽으로 당김 */
.why-c.is-mstage .why-c__ba img { object-position: 70% 40%; }
/* 03 원장: 머리 뒤 금빛 조명 아래 — 얼굴이 머리 띠와 글 사이에 오게 사진 상자를 조금 내린다 */
.why-c.is-mstage .why-c__vis--doc img { top: 11%; height: 89%; object-position: 45% 0; }
/* 세로 진행 표시: 오른쪽 끝, 장면 영역 가운데. 바탕은 밝은 사진(02 치아) 위에서도 글자 대비 4.5:1 이 나오게 .78 */
.why-c.is-mstage .why-c__prog { position: absolute; z-index: 5; right: calc(var(--gut) - 10px); top: calc(50% + var(--hdr-h) / 2); transform: translateY(-50%);
  display: grid; gap: 10px; justify-items: center; padding: 14px 7px; border-radius: 999px; background: rgba(27, 25, 22, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.why-c.is-mstage .why-c__prog span { justify-items: center; gap: 10px; }
.why-c.is-mstage .why-c__prog b { font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .62); }
.why-c.is-mstage .why-c__prog .is-done b { color: rgba(255, 255, 255, .8); }
.why-c.is-mstage .why-c__prog .is-on b { color: var(--n-gold-lt); }
.why-c.is-mstage .why-c__prog i { width: 1px; height: clamp(28px, 5vh, 48px); background: rgba(255, 255, 255, .24); }
.why-c.is-mstage .why-c__prog s { transform: scaleY(var(--f, 0)); transform-origin: 50% 0; }
@media (min-width: 600px) {
  .why-c.is-mstage .why-c__txt { right: calc(var(--gut) + 48px); }
  .why-c.is-mstage .why-c__ba img { object-position: 60% 40%; }
}
/* ── 51-why-b-r3.css ── */
/* 51 · 10-20 3차 반영: Why ‘03 제가 아니면 안 됩니다’ 카드 — 밝은 원장 사진(img/r3-whyb-doc.jpg: 얼굴 · 모자 · 몸은 실사진 m-doc-scrubs 그대로, 배경만 워커)
   사진 위 끝을 누르던 막은 빼고, 글 뒤 어둠은 아래쪽만 옅게. 마크업 sec/50-why-b.html (.why-b__p--doc3 · .why-b__ph--r3) */
.why-b__ph--r3 { --op: 50% 26%; }
.why-b__ph--r3::after { background: none; }
.why-b__p--doc3 .why-b__body::before { top: -40%;
  background: linear-gradient(180deg, var(--wb-ink0) 0%, rgba(27, 25, 22, .38) 40%, rgba(27, 25, 22, .72) 100%); }
.why-b--acc .why-b__p--doc3 .why-b__body::before { top: -55%; }
.why-b__p--doc3 .why-b__t, .why-b__p--doc3 .why-b__line { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
@media (max-width: 1023px) {
  /* 모바일 카드: 사진은 위 3/4, 글은 그 아래 어두운 칸 — 사진 아래 끝만 칸 색으로 스며듦(그대로) */
  .why-b__p--doc3 .why-b__body::before { top: 0; }
}
/* ── 60-ba.css ── */
/* 6 · Before & After — 장기 경과 엑스레이 (10-15 오후: 어두운 Why 와 어두운 후기 사이의 밝은 흰 판)
   바탕   .ba 는 --n-dk(위 Why 의 끝 색), 그 위에 흰 판 .ba__sheet 가 올라온다. 맨 아래 끝 색 = #fff.
   전환   '떠오르는 판' — .fm 일 때만 60-ba.js 가 판에 --bp(0→1)를 준다: 양옆 여백이 줄어 전체 폭이 된다(clip-path·translate 만).
          경계는 늘 곧은 직선(10-16 · 3차 ‘곡선 경계 말고 직선으로’ — 둥근 위 모서리를 뺐다).
          움직임 줄이기·JS 없음: 전체 폭으로 멈춘 판.
   배치   왼쪽 정렬 머리(제목 왼쪽 · 부제와 연수 탭 오른쪽) → 얇은 선 → 왼쪽 큰 연수·설명 / 오른쪽 엑스레이 두 장 (모바일은 위아래)
   .ba-js      60-ba.js 가 섹션에 붙인다. 없으면 탭 막대를 감추고 다섯 증례를 모두 차례로 보여 준다.
   .ba-rv      화면에 들어오면 .is-in (60-ba.js). 숨김은 .fx 아래에서만, 이동은 .fm 아래에서만.
   .is-auto    자동 넘김 중 · .is-hold 잠깐 멈춤(마우스·초점·화면 밖) — 진행 막대가 끝나면 다음 증례로 */
.ba { --ba-x: min(var(--side) - 8px, 5vw); --ba-y: 72px; --ba-rule: #e8e3da;
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(96px, 3.4vw + 72px, 140px) 0 clamp(104px, 4.4vw + 60px, 160px);
  background: linear-gradient(180deg, var(--n-dk) 0, var(--n-dk) 100vh, var(--n-lt) 100vh);
  margin-top: -1px; }   /* 10-15 통합 검수: 화면 배율 110·125·150%·폰(2.6x·3x)에서 Why 와의 경계가 소수 픽셀에 걸리면 흰 바탕이 비쳐 회색 실선이 생기던 것 — 1px 겹쳐 덮는다(같은 --n-dk 끼리) */
/* 판은 화면 한 장 높이만: 움직이는 동안(--bp < 1) 보이는 곳은 섹션 위쪽 화면 80% 안이라 그 아래는 바탕 흰색이면 된다 — 모바일에서 큰 레이어를 다시 그리지 않게 */
.ba__sheet { position: absolute; z-index: -1; inset: 0 0 auto; height: min(100%, 100vh + 80px); background: var(--n-lt); pointer-events: none; }

/* 머리: 제목 왼쪽, 부제·연수 탭 오른쪽 — 탭의 금색 표시줄이 아래 얇은 선 위에 놓인다 */
.ba__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
.ba__title .h2 { text-wrap: balance; }
.ba__title { padding-bottom: 26px; }
.ba__side { min-width: 0; }
.ba__sub { font-size: clamp(15px, 14px + .3vw, 17px); line-height: 1.7; color: var(--sub); }

/* 연수 탭: 시간 눈금처럼 — 얇은 선 위를 금색 막대가 미끄러지고, 자동 넘김 중에는 그 막대가 차오른다 */
.ba__bar { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.ba__seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ba__thumb { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 20%; height: 2px; background: var(--gold);
  translate: calc(var(--i, 0) * 100%) 0; transition: translate .7s var(--fx-e, ease), background-color .3s; }
.ba__prog { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; scale: 0 1; opacity: 0; transition: opacity .3s; }
.ba__box.is-auto .ba__thumb { background: rgba(169, 132, 62, .26); }
.ba__box.is-auto .ba__prog { opacity: 1; }
.ba__box.is-auto .ba__prog.is-run { animation: baProg var(--ba-dur, 8s) linear forwards; }
.ba__box.is-auto.is-hold .ba__prog.is-run { animation-play-state: paused; }
@keyframes baProg { to { scale: 1 1; } }
.ba__tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ba__tab { height: 60px; font-size: 14px; line-height: 60px; text-align: center; color: #8a8378; white-space: nowrap; transition: color .35s; }
.ba__tab b { margin-right: 1px; font-size: 24px; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ba__tab[aria-selected="true"] { color: var(--ink); }
.ba__tab[aria-selected="true"] b { font-weight: 600; }
.ba__tab:hover { color: var(--ink); }
.ba__tab:focus-visible { outline-offset: -2px; }
.ba__play { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .14); transition: box-shadow .2s; }
.ba__play:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.ba__play i, .ba__play i::before { position: absolute; top: 50%; left: 50%; }
.ba__play i { width: 10px; height: 12px; translate: -50% -50%; border-inline: 3px solid var(--ink); }
.ba__play[data-state="off"] i { width: 0; height: 0; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: var(--ink); translate: -35% -50%; }

/* 무대: 카드 없이 얇은 선 아래에 바로 — 왼쪽 큰 연수·설명, 오른쪽 엑스레이 두 장. 다섯 증례가 한 칸에 겹쳐 있어 바뀔 때 높이가 흔들리지 않는다 */
.ba__stage { position: relative; padding-top: clamp(44px, 2.6vw + 22px, 64px); border-top: 1px solid var(--ba-rule); }
.ba__case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); gap: clamp(40px, 5vw, 96px); align-items: stretch; }
.ba__pair { grid-column: 2; grid-row: 1; }
.ba__cap { grid-column: 1; grid-row: 1; }
.ba__case + .ba__case { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--ba-rule); }
.ba-js .ba__stage { display: grid; }
/* 바뀜(움직임 줄이기 포함): 짧게 사라지고 나타난다 — 움직임 허용이면 아래 '움직임' 에서 덮어쓴다 */
.ba-js .ba__case { grid-area: 1 / 1; align-content: start; margin: 0; padding: 0; border: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.ba-js .ba__case.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .5s ease .15s, visibility 0s; }

.ba__pair { --gap: 16px; --ar: 1; position: relative; container-type: inline-size; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.ba__frame { position: relative; overflow: hidden; aspect-ratio: 1 / var(--ar); border-radius: 16px; background: #121314; box-shadow: 0 30px 50px -34px rgba(20, 14, 4, .6); }
/* 같은 사진을 흐리게 깔아 빈 가장자리를 채운다 (검은 띠 없이) */
.ba__frame::before { content: ""; position: absolute; inset: -40px; background: var(--src) center / cover no-repeat; filter: blur(26px) grayscale(1) brightness(.5); opacity: .9; }
.ba__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.ba__frame img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.ba__lbl { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--sub); }
.ba__lbl::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #cfcac1; }
.is-after .ba__lbl { color: var(--ink); font-weight: 600; }
.is-after .ba__lbl::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(169, 132, 62, .16); }
/* 두 액자 사이: 시간이 흐른 방향 */
.ba__arrow { position: absolute; z-index: 1; left: 50%; top: calc((100cqw - var(--gap)) / 2 * var(--ar) / 2); width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .5), 0 8px 20px -6px rgba(40, 30, 10, .35); }
.ba__arrow::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 설명(PC): 위에 번호와 아주 큰 연수, 아래에 시간 막대·제목·연도·시술 시기 — 사진의 위·아래 끝에 맞춘다 */
.ba__cap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ba__no { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--gold); font-variant-numeric: tabular-nums; }
.ba__no i { font-style: normal; font-weight: 400; color: #bdb7ab; }
.ba__yr { margin-top: 18px; margin-left: -.05em; font-size: clamp(96px, 10vw + 24px, 216px); line-height: .84; font-weight: 200; letter-spacing: -0.06em;
  background: linear-gradient(135deg, #dcb978 0%, #b38c45 55%, #8f6c2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ba__yr small { margin-left: 8px; font-size: .17em; font-weight: 500; letter-spacing: 0; }
.ba__span { position: relative; display: block; width: 100%; height: 1px; margin: auto 0 26px; background: var(--ba-rule); }
.ba__span::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--yr, 14) / 14 * 100%); background: linear-gradient(90deg, rgba(169, 132, 62, .25), var(--gold)); transform-origin: 0 50%; }
.ba__span::after { content: ""; position: absolute; top: -3px; left: calc(var(--yr, 14) / 14 * 100% - 7px); width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.ba__ttl { font-size: clamp(20px, .6vw + 15px, 26px); line-height: 1.4; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.ba__meta { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--sub); }
.ba__snubh { margin-top: 18px; padding: 6px 13px; border-radius: 999px; background: var(--n-warm); font-size: 13px; line-height: 1.5; color: #85692f; }

/* 10-16 · 4차: 60증례 카드를 지우고 증례마다 ‘재직 시절 시술’ 표시 아래에 ‘전후 사진 보기’.
   10-16 ver1 적용 뒤: 모양은 후기의 ‘후기 전체 보기’ 알약(.rwd-pill — 밝은 알약 + 먹색 원 속 꺾쇠)과 같게, 링크는 ko-ver1/cases.html */
.ba__see { display: inline-flex; align-items: center; gap: 14px; height: 54px; margin: 18px 0 34px; padding: 0 8px 0 26px; border-radius: 27px;
  background: #f3eee6; color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 14px 30px -16px rgba(40, 30, 14, .38); transition: transform .3s, background-color .3s, box-shadow .3s; }
.ba__see::after { content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 14px no-repeat, var(--n-dk); }
.ba__see:hover { background: #ece5d9; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(40, 30, 14, .45); }

/* JS 가 없으면 탭 막대는 쓸 수 없으니 감춘다 */
.ba:not(.ba-js) .ba__bar { display: none; }
.ba:not(.ba-js) .ba__title { padding-bottom: 32px; }
.ba:not(.ba-js) .ba__side { padding-bottom: 32px; }

/* ── 움직임 ─────────────────────────────────── */
/* 떠오르는 판: --bp 0(판 위 끝이 화면 아래에 막 닿음) → 1(화면 위쪽에 이름). 정지 상태(--bp 없음)는 1 = 전체 폭. 모서리는 늘 직각 */
.fm .ba.ba-js .ba__sheet { --q: calc(1 - var(--bp, 1));
  clip-path: inset(0 calc(var(--q) * var(--ba-x)));
  translate: 0 calc(var(--q) * var(--ba-y)); }
.fm .ba.ba-js.is-near .ba__sheet { will-change: clip-path, translate; }

.fx .ba.ba-js .ba-rv:not(.is-in) { opacity: 0; }
.fx .ba.ba-js .ba-rv { transition: opacity .9s ease; }
.fm .ba.ba-js .ba-rv:not(.is-in) { translate: 0 28px; }
.fm .ba.ba-js .ba-rv { transition: opacity 1.2s var(--fx-e), translate 1.4s var(--fx-e), box-shadow .4s, background-color .4s; }
.fm .ba.ba-js .ba__bar.ba-rv { transition-delay: .1s; }
.fm .ba.ba-js .ba__stage.ba-rv { transition-delay: .2s; }
/* 얇은 선: 머리 아래 선이 왼쪽에서 자란다(무대가 나타날 때) */
.fm .ba.ba-js .ba__stage { border-top-color: transparent; }
.fm .ba.ba-js .ba__stage::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ba-rule); transform-origin: 0 50%; scale: 0 1; transition: scale 1.6s var(--fx-e) .15s; }
.fm .ba.ba-js .ba__stage.is-in::before { scale: 1 1; }

/* 증례 바뀜: 나가는 증례는 그대로 둔 채 들어오는 증례가 위에서 녹아들듯 덮는다(엑스레이끼리 겹쳐 바뀜 — 흰 바탕이 비치지 않게).
   나가는 설명은 빨리 사라지고, 들어오는 설명은 차례로 떠오른다. 사진은 살짝 크게 시작해 제자리로, 시간 막대는 왼쪽에서 자란다 */
.fm .ba-js .ba__case { transition: opacity 0s linear .9s, visibility 0s linear .9s; }
.fm .ba-js .ba__case.is-on { transition: opacity .8s ease, visibility 0s; }
.fm .ba-js .ba__case :is(.ba__lbl, .ba__cap > *) { transition: opacity .25s ease, translate 0s linear .9s; }
.fm .ba-js .ba__case:not(.is-on) :is(.ba__lbl, .ba__cap > *) { opacity: 0; }
.fm .ba-js .ba__case:not(.is-on) .ba__cap > * { translate: 0 14px; }
.fm .ba-js .ba__case.is-on .ba__lbl { transition: opacity .6s ease .3s; }
.fm .ba-js .ba__case.is-on .ba__cap > * { transition: translate 1s var(--fx-e) var(--d, .2s), opacity .9s ease var(--d, .2s); }
.fm .ba-js .ba__cap > :nth-child(2) { --d: .26s; }
.fm .ba-js .ba__cap > :nth-child(3) { --d: .34s; }
.fm .ba-js .ba__cap > :nth-child(4) { --d: .4s; }
.fm .ba-js .ba__cap > :nth-child(5) { --d: .46s; }
.fm .ba-js .ba__cap > :nth-child(6) { --d: .52s; }
.fm .ba-js .ba__frame img { transition: scale 0s linear .9s; }
.fm .ba-js .ba__case:not(.is-on) .ba__frame img { scale: 1.05; }
.fm .ba-js .ba__case.is-on .ba__frame img { transition: scale 1.8s var(--fx-e) calc(var(--k, 0) * .08s); }
.fm .ba-js .ba__span::before, .fm .ba-js .ba__span::after { transition: scale 0s linear .9s, opacity 0s linear .9s; }
.fm .ba-js .ba__case:not(.is-on) .ba__span::before { scale: 0 1; }
.fm .ba-js .ba__case:not(.is-on) .ba__span::after { opacity: 0; scale: .2; }
.fm .ba-js .ba__case.is-on .ba__span::before { transition: scale 1.4s var(--fx-e) .45s; }
.fm .ba-js .ba__case.is-on .ba__span::after { transition: opacity .4s ease 1.3s, scale .6s var(--fx-e) 1.3s; }
/* 섹션이 처음 나타날 때도 시간 막대가 자라도록: 무대가 보이기 전에는 막대를 접어 둔다 */
.fm .ba-js .ba__stage:not(.is-in) .ba__span::before { scale: 0 1; }
.fm .ba-js .ba__stage:not(.is-in) .ba__span::after { opacity: 0; scale: .2; }

/* ── 모바일 · 태블릿 (1023px 이하) ───────────────── */
@media (max-width: 1023px) {
  .ba { --ba-y: 28px; padding: 84px 0 92px; }
  .ba__head { grid-template-columns: minmax(0, 1fr); }
  .ba__title { padding-bottom: 0; }
  .ba__sub { margin-top: 14px; }
  .ba__bar { margin-top: 22px; gap: 12px; }
  .ba__stage { padding-top: 32px; }
  .ba__case { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ba__pair, .ba__cap { grid-column: 1; grid-row: auto; }
  .ba__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 24px 0 0; border-top: 1px solid var(--ba-rule); }
  .ba__no, .ba__span { display: none; }
  .ba__yr { grid-row: 1 / 6; margin: 0; font-size: 84px; line-height: .9; }
  .ba__ttl, .ba__meta, .ba__snubh { grid-column: 2; justify-self: start; }
  .ba__ttl { padding-top: 6px; }
  .ba__meta { margin-top: 6px; }
  .ba__snubh { margin: 12px 0 0; }
  .ba__see { grid-column: 2; justify-self: start; margin: 16px 0 0; }
  .ba:not(.ba-js) .ba__title { padding-bottom: 0; }
}
@media (max-width: 599px) {
  .ba__bar { gap: 8px; }
  .ba__tab { height: 52px; line-height: 52px; font-size: 12px; }
  .ba__tab b { font-size: 20px; }
  .ba__pair { --gap: 8px; --ar: 1.2; }
  .ba__frame { border-radius: 12px; }
  .ba__lbl { margin-top: 10px; font-size: 13px; gap: 6px; }
  .ba__arrow { width: 34px; height: 34px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 6px 14px -4px rgba(40, 30, 10, .35); }
  .ba__arrow::after { width: 13px; height: 13px; }
  .ba__case { gap: 22px; }
  .ba__cap { display: flex; padding: 20px 2px 0; }
  .ba__yr { font-size: 68px; }
  .ba__ttl { padding-top: 14px; font-size: 19px; }
  .ba__meta { font-size: 14px; }
  .ba__snubh { font-size: 12.5px; }
}
.ba__case:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
/* ── 70-reviews-dark.css ── */
/* 7 · 후기 — 어두운 안 (10-15 오후 · 10-16 · 4차에서 ‘어두운 안’으로 이름 붙임 → index.new.html · index.new.rv-dark.html)
   밝은 안은 71-reviews-light.css(index.new.rv-light.html). 섹션에 .rv-dark / .rv-light 를 조립기가 붙이고, 규칙은 모두 그 아래로 한정한다.
   글자·카드 내용·사진·버튼 동작은 index.html 그대로(p-rv-d.css · p-rv-d.js 수정 없음). 여기서 색·빛·여백만 덮어쓴다.
   전환 '빛으로 녹아드는 전환': 위 B&A 의 끝 색(#fff)에서 긴 그라데이션으로 --n-dk 에 녹아들고, 가운데는 빛이 조금 더 남아
   받침대로 떨어지는 빛 원뿔(.rwd__hero::before)로 이어진다. 화면에 들어오면 받침대 조명이 켜진다(.fm + js-parts/70-reviews.js 의 .rv-arm → .rv-lit).
   움직임 줄이기·스크립트 없음: 숨김 상태가 없어 처음부터 조명이 켜진 완성 화면. 맨 아래 끝 = --n-dk, 다음 Film 과 곧은 직선으로 만난다.
   10-16 · 3차: 맨 아래 ‘네이버 플레이스 전체 후기’ 링크·사진 안내 줄(.rwd__foot)을 지웠다(build_new.py).
   10-16 · 4차 ‘후기 박스를 배경보다 확실히 도드라지게’: 반투명 어두운 유리 → 바탕보다 한 단 밝은 불투명 웜 차콜 판 + 금색 실선 테두리 + 깊은 그림자, 글자는 더 밝게.
   카드 글자 크기(×1.3)와 카드 칸 높이는 두 안 공통 — 96-readable.css. */
#reviews.rv-dark.rwd { --rv-band: 340px;
  padding: calc(var(--rv-band) + 48px) 0 clamp(120px, 5vw + 76px, 168px);
  background:
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) calc(var(--rv-band) * .12)),   /* 10-15 통합 검수: 맨 위 끝은 B&A 끝 색 #fff 그대로 — 빛 웅덩이가 경계에서 바로 시작해 가운데에 옅은 단차가 생기던 것 */
    radial-gradient(32% calc(var(--rv-band) * 1.7) at 50% 0, rgba(255, 249, 238, .34), rgba(255, 249, 238, 0)),
    linear-gradient(180deg, #fff 0, #faf8f4 calc(var(--rv-band) * .08), #eee8df calc(var(--rv-band) * .18), #d3ccc2 calc(var(--rv-band) * .3),
      #a8a095 calc(var(--rv-band) * .42), #79736a calc(var(--rv-band) * .54), #4f4a44 calc(var(--rv-band) * .66), #332f2a calc(var(--rv-band) * .78),
      #221f1b calc(var(--rv-band) * .89), var(--n-dk) var(--rv-band)),
    var(--n-dk);
  color: var(--n-dk-text); }
#reviews.rv-dark.rwd::before, #reviews.rv-dark .rwd__light { display: none; }    /* 밝은 진료실의 둥근 창 · 천장 빛줄기 — 어두운 무대에서는 받침대 조명 하나로 */
#reviews.rv-dark :focus-visible { outline-color: var(--n-gold-lt); }

/* 머리 — eyebrow + .h2 (style.css 크기·간격 그대로, 색만) */
#reviews.rv-dark .eyebrow { color: var(--n-gold-lt); }
#reviews.rv-dark .rwd__head .h2 { color: #f3efe9; text-wrap: balance; }
#reviews.rv-dark .rwd__head .h2 strong { color: #fff; }
#reviews.rv-dark .rwd__lead { max-width: 640px; margin: clamp(14px, 10px + .5vw, 20px) auto 0; font-size: 16px; line-height: 1.75; color: var(--n-dk-text); }
/* 안내 문장은 fx.js 목록에 없다 → 제목이 나타난 뒤 따라 나오게 (fx 가 꺼지면 숨김도 없다) */
.fx #reviews.rv-dark .rwd__head .h2:not(.fx-in) ~ .rwd__lead { opacity: 0; }
.fx #reviews.rv-dark .rwd__head .rwd__lead { transition: opacity .6s ease .3s; }
.fm #reviews.rv-dark .rwd__head .h2:not(.fx-in) ~ .rwd__lead { translate: 0 28px; }
.fm #reviews.rv-dark .rwd__head .rwd__lead { transition: opacity 1.2s var(--fx-e) .35s, translate 1.4s var(--fx-e) .35s; }

/* 무대: 받침대 위 조명 — 빛 원뿔(위에서 녹아든 빛이 받침대로) · 바닥에 고이는 빛 */
#reviews.rv-dark .rwd__stage { margin-top: clamp(56px, 2vw + 44px, 84px); }
#reviews.rv-dark .rwd__hero { --rv-foot: 121px; }   /* 받침대 윗면 가운데가 .rwd__hero 아래 끝에서 떨어진 거리 (받침대 높이 150 − 윗면 58/2) */
#reviews.rv-dark .rwd__hero::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: var(--rv-foot); width: 1200px; height: 1150px; translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 167deg at 50% 0, rgba(255, 238, 208, 0) 0deg, rgba(255, 238, 208, .07) 5deg, rgba(255, 240, 214, .16) 13deg, rgba(255, 238, 208, .07) 21deg, rgba(255, 238, 208, 0) 26deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 26%, #000 50%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 26%, #000 50%, #000 94%, transparent 100%); }
#reviews.rv-dark .rwd__hero::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(var(--rv-foot) - 150px); width: min(900px, 220%); height: 300px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 176, 104, .24), rgba(214, 176, 104, .08) 55%, rgba(214, 176, 104, 0)); }
#reviews.rv-dark .rwd__photo { background: var(--n-dk-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 7px rgba(255, 255, 255, .035), 0 50px 90px -34px rgba(0, 0, 0, .85), 0 -24px 80px -30px rgba(255, 228, 182, .3); }
#reviews.rv-dark .rwd__pill { border-color: rgba(255, 255, 255, .16); background: rgba(24, 22, 19, .62); color: #fff; }
#reviews.rv-dark .rwd__shadow { background: radial-gradient(closest-side, rgba(14, 11, 8, .55), transparent); }
#reviews.rv-dark .rwd__pedestal::before { background: radial-gradient(ellipse at 50% 40%, #fbf4e8 0%, #e3d5bd 28%, #9a8b75 60%, #4a433a 88%, #38322c 100%);
  box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .25); }   /* 바깥 빛은 넣지 않는다 — 받침대의 mask 에 잘려 네모가 보인다 */
#reviews.rv-dark .rwd__pedestal::after { background: linear-gradient(90deg, #121110 0%, #24211d 20%, #3a342e 44%, #2c2824 64%, #151311 100%); }

/* 조명 켜기 (.fm 에서만, 스크립트가 .rv-arm 을 붙였을 때만 꺼진 상태가 있다) */
.fm #reviews.rv-dark.rv-arm:not(.rv-lit) .rwd__hero::before, .fm #reviews.rv-dark.rv-arm:not(.rv-lit) .rwd__hero::after { opacity: 0; }
.fm #reviews.rv-dark.rv-arm:not(.rv-lit) .rwd__pedestal::before { opacity: .18; }
.fm #reviews.rv-dark.rv-arm .rwd__hero::after { transition: opacity 2.2s var(--fx-e) .35s; }
.fm #reviews.rv-dark.rv-arm .rwd__pedestal::before { transition: opacity 1.4s ease .15s; }
.fm #reviews.rv-dark.rv-lit .rwd__hero::before { animation: rvLamp 2s linear both; }
@keyframes rvLamp { 0% { opacity: 0; } 6% { opacity: .8; } 11% { opacity: .25; } 45% { opacity: .9; } 100% { opacity: 1; } }

/* 카드 — 바탕(--n-dk)보다 확실히 밝은 불투명 판 · 금색 실선 · 깊은 그림자 (10-16 · 4차) */
#reviews.rv-dark .rwd-card > a { border-color: rgba(214, 176, 104, .34);
  background: linear-gradient(165deg, #403a33 0%, #36312b 55%, #312c27 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 36px 70px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
#reviews.rv-dark .rwd-card > a:hover { border-color: rgba(214, 176, 104, .6); box-shadow: 0 40px 76px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
#reviews.rv-dark .rw-ava { background: rgba(214, 176, 104, .18); color: var(--n-gold-lt); box-shadow: inset 0 0 0 1px rgba(214, 176, 104, .3); }
#reviews.rv-dark .rw-who { color: #fff; }
#reviews.rv-dark .rw-when { color: rgba(255, 255, 255, .7); }
#reviews.rv-dark .rwd-card__body { color: rgba(255, 255, 255, .93); }
#reviews.rv-dark .rwd-card__more { color: var(--n-gold-lt); }
/* 자동 넘김: 어두운 유리 카드는 서로 비쳐 보여, p-rv-d 의 0.6초 흐림 교차 때 나가는 카드 글자가 겹쳐 보였다
   → 나가는 카드는 0.2초에 지우고, 들어오는 카드는 그 뒤에 떠오른다(흐림 없이) */
#reviews.rv-dark .rwd-slot > .rwd-card { transition: opacity .5s .22s, transform .7s cubic-bezier(.2,.7,.2,1) .12s; }
#reviews.rv-dark .rwd-slot > .rwd-card.is-out { transition: opacity .2s, transform .4s; filter: none; }
#reviews.rv-dark .rwd-slot > .rwd-card.is-in { filter: none; }
/* 사진 있는 카드: 고정 높이 칸에서 본문 셋째 줄이 사진에 반쯤 가려지던 것(p-rv-d 그대로일 때도 있던 일) → 두 줄로 깔끔하게 자른다. 글은 그대로, ‘전체 읽기’로 이어진다 */
#reviews.rv-dark .rwd-card:not([data-ph="0"]) .rwd-card__body { -webkit-line-clamp: 2; }
#reviews.rv-dark .rwd-card__ph img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
#reviews.rv-dark .rwd-card__ph .rwd-card__plus { background: rgba(255, 255, 255, .1); color: #fff; }
#reviews.rv-dark .rwd__src { scrollbar-color: rgba(255, 255, 255, .22) transparent; }

/* 아래 줄 — 밝은 알약(어두운 바탕에서 뒤집음) · 유리 조작 버튼 · 쪽수 */
#reviews.rv-dark .rwd__bar { margin-top: clamp(28px, 2vw + 16px, 44px); }
#reviews.rv-dark .rwd-pill { background: #f3eee6; color: var(--ink); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .7); }
#reviews.rv-dark .rwd-pill:hover { background: #fff; }
#reviews.rv-dark .rwd-pill__i { background: var(--n-dk); }
#reviews.rv-dark .rwd-pill__i::after { border-color: #fff; }
#reviews.rv-dark .rwd__no { color: rgba(255, 255, 255, .55); }
#reviews.rv-dark .rwd__no b { color: #fff; }
#reviews.rv-dark .rwd-btn { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #f3efe9; box-shadow: none; }
#reviews.rv-dark .rwd-btn:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .12); }

@media (max-width: 1023px) {
  #reviews.rv-dark.rwd { --rv-band: 210px; padding: calc(var(--rv-band) + 34px) 0 104px; }
  #reviews.rv-dark .rwd__hero { --rv-foot: 87px; }   /* 받침대 110 − 윗면 46/2 */
  #reviews.rv-dark .rwd__hero::before { width: 900px; height: 900px; background: conic-gradient(from 168deg at 50% 0, rgba(255, 238, 208, 0) 0deg, rgba(255, 238, 208, .07) 4deg, rgba(255, 240, 214, .16) 12deg, rgba(255, 238, 208, .07) 20deg, rgba(255, 238, 208, 0) 24deg); }
  #reviews.rv-dark .rwd__hero::after { width: 560px; height: 220px; bottom: calc(var(--rv-foot) - 110px); }
  #reviews.rv-dark .rwd__lead { font-size: 15px; line-height: 1.7; }
}
/* ── 71-reviews-light.css ── */
/* 7 · 후기 — 밝은 안 (10-16 · 4차 ‘후기 박스를 배경보다 확실히 도드라지게. 어두운 버전 1개 + 밝은 버전 1개’ → index.new.rv-light.html)
   index.html 의 밝은 진료실 무대(p-rv-d.css: 둥근 창 · 천장 빛줄기 · 흰 받침대)를 그대로 쓰고, 두 가지만 바꾼다.
   - 바탕: 차가운 회색 → 따뜻한 회베이지(사이트 톤). 위 B&A(흰색)와 곧은 직선으로 갈린다.
   - 카드: 반투명 유리(흰색 58%) → 불투명 흰 판 + 옅은 테두리 + 깊은 그림자 — 바탕보다 확실히 떠 보이게. 글자는 더 진한 검정.
   카드 글자 크기(×1.3)·칸 높이는 두 안 공통 — 96-readable.css. */
#reviews.rv-light.rwd {
  padding: clamp(104px, 4vw + 72px, 150px) 0 clamp(112px, 5vw + 68px, 160px);
  background:
    radial-gradient(38% 42% at 50% 46%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(34% 55% at 6% 38%, rgba(206, 195, 178, .5), transparent 72%),
    radial-gradient(34% 55% at 94% 66%, rgba(206, 195, 178, .45), transparent 72%),
    linear-gradient(180deg, #ece7df 0%, #e3ddd2 100%); }
#reviews.rv-light .rwd__stage { margin-top: clamp(56px, 2vw + 44px, 84px); }
#reviews.rv-light .rwd__lead { max-width: 640px; margin: clamp(14px, 10px + .5vw, 20px) auto 0; font-size: 16px; line-height: 1.75; color: #4a4741; }
#reviews.rv-light .rwd__head .h2 { text-wrap: balance; }

#reviews.rv-light .rwd-card > a { border: 1px solid rgba(40, 32, 20, .08); background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 30px 56px -26px rgba(64, 46, 16, .42), 0 3px 8px rgba(64, 46, 16, .06); }
#reviews.rv-light .rwd-card > a:hover { border-color: rgba(169, 132, 62, .5); box-shadow: 0 36px 64px -26px rgba(64, 46, 16, .5), 0 3px 8px rgba(64, 46, 16, .06); }
#reviews.rv-light .rw-ava { background: #f1ebdf; color: #6f5527; }
#reviews.rv-light .rw-who { color: var(--rd-ink); }
#reviews.rv-light .rw-when { color: #555; }
#reviews.rv-light .rwd-card__body { color: var(--rd-ink); }
#reviews.rv-light .rwd-card__more { color: #8a6a2c; }
#reviews.rv-light .rwd-card:not([data-ph="0"]) .rwd-card__body { -webkit-line-clamp: 2; }   /* 사진 있는 카드: 셋째 줄이 사진에 반쯤 가려지던 것 — 어두운 안과 같게 */
#reviews.rv-light .rwd__no { color: #555; }
#reviews.rv-light .rwd__bar { margin-top: clamp(28px, 2vw + 16px, 44px); }
@media (max-width: 1023px) {
  #reviews.rv-light.rwd { padding: 84px 0 96px; }
  #reviews.rv-light .rwd__lead { font-size: 15px; line-height: 1.7; }
}
/* ── 75-film-journal.css ── */
/* 7-2 Film · 8 Journal — 디자인은 index.html 그대로, 바탕색만 앞뒤 섹션에 맞춘다 (10-16 · 3차 지시)
   7 후기(어두움) → Film(--n-film 따뜻한 모래빛) → Journal(--n-journal 흰색) → 9 FAQ(어두움). 경계는 모두 곧은 직선.
   Film 의 배경 그림(film-bg.jpg, 흰 곡면)은 지우지 않고 곱하기로 얹어 결만 남긴다 — 회색빛 대신 사이트의 따뜻한 톤. */
.film { background: var(--n-film); }
.film__bg { mix-blend-mode: multiply; opacity: .6; }
.journal { background: var(--n-journal); }
/* ── 90-faq.css ── */
/* 9-1 · FAQ — 어두운 웜 차콜 판 (10-15 오후 · 밝음/어두움 교차의 '어두움')
   글자·링크는 index.html 그대로 — HTML 대체본 sec/90-faq.html 은 판(.faq__panel)과 머리 묶음(.faq__head)만 더했다. 모든 규칙은 .faq 안으로 한정.
   전환 '펼쳐지는 패널': 위 섹션(Journal)의 바탕색 --n-journal 위로, 양옆 여백을 가진 어두운 판이 들어오며 전체 폭으로 펼쳐진다.
     모서리는 늘 직각 — 위·아래 경계 모두 곧은 직선(10-16 · 3차 ‘곡선 경계 말고 직선으로’).
     판 모양은 --k(0 = 다 펼침 · 1 = 들어오기 직전) 하나로 정하고, 움직임 허용(.fm)일 때만 js-parts/90-end.js 가 스크롤만큼 --k 를 바꾼다.
     정지 상태(움직임 줄이기 · JS 없음) = --k 0 = 전체 폭 판.
   PC: 왼쪽 eyebrow·제목(화면에 머묾) · 오른쪽 아코디언 / 모바일: 1단. details/summary 동작(main.js: 하나 열면 나머지 닫힘) 그대로. */
.faq { --fq-g: clamp(12px, 4vw, 72px);    /* 들어오기 직전 양옆 여백 */
  --fq-line: rgba(255, 255, 255, .12);
  position: relative; isolation: isolate; color: #fff;
  padding: clamp(104px, 9.4vw, 168px) 0 clamp(112px, 9.4vw, 168px);
  /* 판 바깥: 펼쳐지는 동안 보이는 양옆 띠 = Journal 바탕색 */
  background: var(--n-journal);
  margin-top: -1px; }   /* 10-15 통합 검수: 화면 배율 125·150% 에서 Journal 과의 경계가 소수 픽셀에 걸리면 흰 실선이 비치던 것 — 1px 겹쳐 덮는다 */
.faq .faq__panel { --k: 0; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44% 46% at 14% 12%, rgba(214, 176, 104, .09), rgba(214, 176, 104, 0) 72%),
              radial-gradient(40% 50% at 100% 100%, rgba(214, 176, 104, .06), rgba(214, 176, 104, 0) 70%), var(--n-dk);
  clip-path: inset(0 calc(var(--fq-g) * var(--k))); }

/* 머리 */
.faq .eyebrow, .faq .h2 { text-align: left; }
.faq .eyebrow { color: var(--n-gold-lt); }
.faq .h2 { color: #fff; }

/* 아코디언: 금색 윗선 · 어두운 바탕용 얇은 선 · 원 안의 +/− (열리면 원이 금색으로 채워짐) */
.faq .acc { margin-top: 0; border-top: 1px solid rgba(214, 176, 104, .55); }
.faq .acc details { border-bottom-color: var(--fq-line); }
.faq .acc summary { --ic: var(--n-gold-lt); padding: 30px 72px 30px 0; font-size: clamp(17px, .3vw + 13.5px, 20px); line-height: 1.5; color: rgba(255, 255, 255, .84); transition: color .3s; }
.faq .acc summary::before, .faq .acc summary::after { right: 0; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; transform: none; }
.faq .acc summary::before { border: 1px solid rgba(214, 176, 104, .42); background: transparent; transition: background-color .35s, border-color .35s; }
.faq .acc summary::after { background: linear-gradient(var(--ic), var(--ic)) center / 14px 1.5px no-repeat, linear-gradient(var(--ic), var(--ic)) center / 1.5px 14px no-repeat;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-size .45s cubic-bezier(.2, .7, .2, 1); }
.faq .acc details[open] summary { --ic: var(--n-dk); color: #fff; }
.faq .acc details[open] summary::before { border-color: var(--n-gold-lt); background: var(--n-gold-lt); }
.faq .acc details[open] summary::after { transform: rotate(180deg); background-size: 14px 1.5px, 1.5px 0; }
.faq .acc summary:hover, .fm .faq .acc summary:hover { color: var(--n-gold-lt); }
.faq .acc summary:hover::before { border-color: var(--n-gold-lt); }
.faq .acc details[open] summary:hover { color: #fff; }
.faq .acc__body { max-width: none; padding: 0 72px 34px 0; }
.faq .acc__body p { color: var(--n-dk-text); }

@media (min-width: 1024px) {
  .faq .faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 6vw, 120px); align-items: start;
    max-width: calc(1240px + var(--gut) * 2); }
  .faq .faq__head { position: sticky; top: calc(var(--hdr-h) + 48px); margin-top: -3px; }   /* eyebrow 글자 윗선 = 아코디언 금색 윗선 */
  .faq .faq__head .eyebrow { margin-bottom: 20px; }
}

@media (max-width: 1023px) {
  .faq { padding: 84px 0 92px; }
  .faq .faq__head { margin-bottom: 36px; }
  .faq .acc summary { padding: 22px 52px 22px 0; font-size: 16px; }
  .faq .acc summary::before, .faq .acc summary::after { width: 32px; height: 32px; margin-top: -16px; }
  .faq .acc summary::after { background-size: 12px 1.5px, 1.5px 12px; }
  .faq .acc details[open] summary::after { background-size: 12px 1.5px, 1.5px 0; }
  .faq .acc__body { padding: 0 0 28px; }
}
/* ── 92-cta.css ── */
/* 9-3 · CTA — index.html 디자인 그대로 (10-16 · 3차: 원래 메인 그대로 지시 → 10-15 오후에 더했던 무대 위 옅은 그늘은 뺐다. 이전 파일 archive-1016/92-cta.css)
   남긴 것 하나: 아주 좁은 폰(≤374px)에서 두 버튼이 두 줄로 갈라지던 것(index.html 도 같음) → 카드 양옆 안쪽 여백만 줄여 한 줄로. 넓은 화면 모습은 그대로. */
@media (max-width: 374px) { .cta--stage .cta__card { padding-inline: 14px; } }
/* ── 96-readable.css ── */
/* 작은 본문 글자 크게 · 더 진하게 (10-16 · 4차 ‘이 크기의 본문 글자 전부 30% 키우고 색을 더 진한 검정으로 (가독성)’)
   기준 = 사용자 화면의 B&A 설명 줄(15px)·‘재직 시절 시술’ 표시(13px). PC 에서 계산된 크기가 약 13~15.6px 인 본문 글(설명·부가 정보·날짜·사진 설명)을
   모두 찾아(scan_small.py) 원래 크기 × 1.3 으로 — PC·모바일 각각 원래 값에 1.3 을 곱했다. 단추·탭·링크 글자·쪽수·eyebrow 는 본문이 아니라 그대로.
   색: 밝은 바탕 = --rd-ink(더 진한 검정). 어두운 바탕(히어로·Why·어두운 후기)은 검정을 쓸 수 없어 흰 글자를 더 진하게(불투명하게).
   후기 카드 글자는 후기 두 안(70-reviews-dark · 71-reviews-light)에서 함께 다룬다. */
:root { --rd-ink: #1a1a1a; }

/* 1 히어로 (어두움) — 15.5 → 20.2 */
.hero.hero--ray .hero__tag { font-size: clamp(17.5px, 16.9px + .18vw, 20.2px); color: rgba(255, 255, 255, .86); }

/* 2 Our Belief — 숫자 상자 아래 설명 */
.belief .stats--hero .stats__s { font-size: clamp(18.2px, 17.4px + .2vw, 20.8px); color: var(--rd-ink); }

/* 3 Signature 카드 */
.sig .sig-card__en { font-size: 17px; color: var(--rd-ink); }
.sig .sig-card__desc { font-size: 19.5px; line-height: 1.68; color: var(--rd-ink); }

/* 5 Why(B) — 사진 위 이름표 · 숫자 출처 (어두움) */
.why-b .why-b__ph figcaption { font-size: 16.2px; }
.why-b .why-b__line small { font-size: 16.2px; color: rgba(255, 255, 255, .8); }

/* 6 Before & After — 설명 줄 · 재직 시절 표시 · 사진 아래 이름 */
.ba .ba__meta { font-size: 19.5px; color: var(--rd-ink); }
.ba .ba__snubh { font-size: 17px; color: var(--rd-ink); }
.ba .ba__lbl { font-size: 18.2px; color: var(--rd-ink); }

/* 7-2 Film — 영상 목록의 분류·길이 */
.film .film__m { font-size: 17px; color: var(--rd-ink); }

/* 8 Journal — 글 제목 · 날짜 */
.journal .journal__t { font-size: 19.5px; color: var(--rd-ink); }
.journal .journal__f { font-size: 17px; color: var(--rd-ink); }

/* 9 진료안내 — 접수 마감 안내 */
.visit .visit__note { font-size: 19.5px; color: var(--rd-ink); }

@media (max-width: 1023px) {
  .hero.hero--ray .hero__tag { font-size: 16.9px; }
  .belief .stats--hero .stats__s { font-size: 18.2px; }
  .why-b .why-b__ph figcaption { font-size: 15.6px; }
  .why-b .why-b__line small { font-size: 15.6px; }
  .film .film__m { font-size: 15.6px; }
}
@media (max-width: 599px) {
  .ba .ba__meta { font-size: 18.2px; }
  .ba .ba__snubh { font-size: 16.2px; }
  .ba .ba__lbl { font-size: 17px; }
}

/* 7 후기 카드 (어두운 안 · 밝은 안 공통) — 머리 14.5 → 18.9 · 본문 13.5 → 17.5 · 날짜·전체 읽기·사진 설명 12.5 → 16.2.
   카드는 고정 높이 칸(.rwd-slot)에 겹쳐 바뀌므로 칸을 글자만큼 높인다: PC 232 → 276 · 모바일 218 → 268 (본문 5줄 + 전체 읽기, 사진 카드는 2줄 + 사진 + 전체 읽기) */
#reviews .rwd-card__top { font-size: 18.9px; }
#reviews .rw-ava { width: 36px; height: 36px; font-size: 15px; }
#reviews .rw-when { font-size: 16.2px; }
#reviews .rwd-card__body { font-size: 17.5px; line-height: 1.62; }
#reviews .rwd-card__more { font-size: 16.2px; }
#reviews .rwd-card__more::after { width: 10px; height: 10px; }
#reviews .rwd__pill { font-size: 16.2px; }
#reviews .rwd-slot { height: 276px; }
@media (max-width: 1023px) { #reviews .rwd-slot { height: 268px; } }