/* 판교 최용훈치과의원 — ko-preview 효과 레이어 (ver3 · 뿌리·호흡·성장 — 2026-10-05 채택, 원본 renewal/ko-fx3)
   style.css(ko-preview 와 같음) 위에 덧씌운다. 내용·레이아웃·색은 바꾸지 않고 움직임만 더한다.
   모바일: 흐림·루페·기울기·끌림 없음, 이동은 transform 계열만. 움직임 줄이기 설정: 투명도 전환만. */
/* ── 공통: 숨김 상태 ─────────────────────────────────────────────
   html.fx      효과 켜짐 (head 인라인 스크립트가 붙임. fx.js 가 3초 안에 안 불리면 떼어 원래 화면으로)
   html.fm      움직임 허용 — 이동·확대·클립은 전부 .fm 아래에만 쓴다
   html.fx-lite 움직임 줄이기 설정 — 아래 투명도 전환만 남는다
   .fx-in       화면에 들어와 나타난 요소 (fx.js 가 붙임)
   숨김은 :not(.fx-in) 으로만 걸어서, 나타난 뒤에는 style.css 규칙(호버 등)이 그대로 산다. */
.fx :is(.hero__title, .shero__title, .h2, .s-h2, .belief__title, .mission__title, .cta__title):not(.fx-split):not(.fx-in),
.fx :is(.eyebrow, .hero__eyebrow, .hero__desc, .hero .btn, .shero__desc, .c-proc__sticky > p, .c-core__sub, .c-case__sub, .c-intro__text > *, .belief__visual img, .journal__desc, .journal__all, .news__lead, .visit__sub, .visit__info > .hours, .visit__note, .visit__info > .btns, .visit__addr, .visit__maplink, .c-case__note, .c-note__box, .step__no, .step h3, .step p, .c-soon p, .c-soon .btns, .prog, .sig__slider, .clinic__slider, .cta .btns, .vsec__ch, .film__caption, .film__ch, .c-map .link-arrow, .article__meta, .article__body, .article__foot, .pagination, .news-msg):not(.fx-in),
.fx :is(.c-intro__img, .step__img, .diff-card__img, .sig__media, .clinic__media, .visit__mapimg, .c-map__img, .film__player):not(.fx-in),
.fx :is(.stats, .core-list, .case-list, .news-list, .vgrid, .journal__list, .voices__track, .acc, .pills, .diff-grid, .film__list):not(.fx-in) > * { opacity: 0; }
.fx :is(.hero__title, .shero__title, .h2, .s-h2, .belief__title, .mission__title, .cta__title, .eyebrow, .hero__eyebrow, .hero__desc, .hero .btn, .shero__desc, .c-proc__sticky > p, .c-core__sub, .c-case__sub, .c-intro__text > *, .belief__visual img, .journal__desc, .journal__all, .news__lead, .visit__sub, .visit__info > .hours, .visit__note, .visit__info > .btns, .visit__addr, .visit__maplink, .c-case__note, .c-note__box, .step__no, .step h3, .step p, .c-soon p, .c-soon .btns, .prog, .sig__slider, .clinic__slider, .cta .btns, .vsec__ch, .film__caption, .film__ch, .c-map .link-arrow, .article__meta, .article__body, .article__foot, .pagination, .news-msg, .c-intro__img, .step__img, .diff-card__img, .sig__media, .clinic__media, .visit__mapimg, .c-map__img, .film__player) { transition: opacity .6s ease var(--fx-d, 0s); }
.fx :is(.stats, .core-list, .case-list, .news-list, .vgrid, .journal__list, .voices__track, .acc, .pills, .diff-grid, .film__list) > * { transition: opacity .6s ease calc(var(--n, 0) * 60ms); }
.fx .hero .btn { transition: background-color .2s, color .2s, border-color .2s, opacity .6s ease var(--fx-d, 0s); }

/* ═══ ver3 — 뿌리·호흡·성장 (자체 창작) ═══
   숨 쉬듯 천천히 확대되는 히어로 · 초점이 맞춰지듯 드러나는 단어와 사진 · 배경 사진의 느린 시차
   · 진료 단계를 따라 자라는 금색 뿌리선 · 자라나는 구분선 · 떠 있는 임플란트 · 손끝을 따르는 카드 기울기 · 부드러운 페이드 전환 */
:root { --fx-e: cubic-bezier(.2, .7, .2, 1); }
.fm.fx-enter { --t0: .35s; }

/* 제목: 단어가 흐릿하게 떠올라 또렷해진다 (흐림은 PC만) */
.fm .fxw { display: inline-block; }
.fm .fxw__i { display: inline-block; transition: opacity 1.1s var(--fx-e), translate 1.3s var(--fx-e), filter 1.1s var(--fx-e); transition-delay: calc(var(--fx-d, 0s) + var(--i, 0) * 70ms); }
.fm .fx-split:not(.fx-in) .fxw__i { opacity: 0; translate: 0 .45em; }

/* 문단: 천천히 떠오른다 */
.fm :is(.eyebrow, .hero__eyebrow, .hero__desc, .hero .btn, .shero__desc, .c-proc__sticky > p, .c-core__sub, .c-case__sub, .c-intro__text > *, .belief__visual img, .journal__desc, .journal__all, .news__lead, .visit__sub, .visit__info > .hours, .visit__note, .visit__info > .btns, .visit__addr, .visit__maplink, .c-case__note, .c-note__box, .step__no, .step h3, .step p, .c-soon p, .c-soon .btns, .prog, .sig__slider, .clinic__slider, .cta .btns, .vsec__ch, .film__caption, .film__ch, .c-map .link-arrow, .article__meta, .article__body, .article__foot, .pagination, .news-msg):not(.fx-in) { translate: 0 28px; }
.fm :is(.eyebrow, .hero__eyebrow, .hero__desc, .hero .btn, .shero__desc, .c-proc__sticky > p, .c-core__sub, .c-case__sub, .c-intro__text > *, .belief__visual img, .journal__desc, .journal__all, .news__lead, .visit__sub, .visit__info > .hours, .visit__note, .visit__info > .btns, .visit__addr, .visit__maplink, .c-case__note, .c-note__box, .step__no, .step h3, .step p, .c-soon p, .c-soon .btns, .prog, .sig__slider, .clinic__slider, .cta .btns, .vsec__ch, .film__caption, .film__ch, .c-map .link-arrow, .article__meta, .article__body, .article__foot, .pagination, .news-msg) { transition: opacity 1.2s var(--fx-e) var(--fx-d, 0s), translate 1.4s var(--fx-e) var(--fx-d, 0s); }
.fm .hero .btn { transition: background-color .2s, color .2s, border-color .2s, opacity 1.2s var(--fx-e) var(--fx-d, 0s), translate 1.4s var(--fx-e) var(--fx-d, 0s), transform .45s var(--fx-e); }

/* 사진: 초점이 맞듯 — 살짝 크고 흐린 상태에서 제자리로 (흐림은 PC만) */
.fm :is(.c-intro__img, .step__img, .diff-card__img, .sig__media, .clinic__media, .visit__mapimg, .c-map__img, .film__player) { transition: opacity 1.2s var(--fx-e) var(--fx-d, 0s); }
.fm :is(.c-intro__img, .step__img, .diff-card__img, .visit__mapimg, .c-map__img, .film__player) img { transition: scale 2s var(--fx-e) var(--fx-d, 0s), filter 1.4s var(--fx-e) var(--fx-d, 0s); }
.fm :is(.c-intro__img, .step__img, .diff-card__img, .visit__mapimg, .c-map__img, .film__player):not(.fx-in) img { scale: 1.12; }
@media (min-width: 1024px) and (hover: hover) {
  .fm .fx-split:not(.fx-in) .fxw__i { filter: blur(8px); }
  .fm :is(.c-intro__img, .step__img, .diff-card__img, .visit__mapimg, .c-map__img, .film__player):not(.fx-in) img { filter: blur(12px); }
}

/* 카드 묶음: 아래에서 자라나듯 */
.fm :is(.stats, .core-list, .case-list, .news-list, .vgrid, .journal__list, .voices__track, .acc, .pills, .diff-grid, .film__list):not(.fx-in) > * { translate: 0 24px; scale: .96; }
.fm :is(.stats, .core-list, .case-list, .news-list, .vgrid, .journal__list, .voices__track, .acc, .pills, .diff-grid, .film__list) > * { transition: opacity 1s var(--fx-e), translate 1.3s var(--fx-e), scale 1.3s var(--fx-e); transition-delay: calc(var(--n, 0) * 100ms); }

/* 히어로: 어둠 속에서 밝아진 뒤 숨 쉬듯 천천히 확대·축소 (화면 밖이면 멈춘다) */
.fm :is(.hero__bg, .shero__bg) { scale: 1.12; animation: fxBreath 16s ease-in-out infinite alternate, fxFadeIn 1.6s ease var(--t0, 0s) both; }
.fm .fx-off :is(.hero__bg, .shero__bg), .fm .belief.fx-off .belief__visual img { animation-play-state: paused; }
@keyframes fxBreath { from { scale: 1.12; } to { scale: 1.2; } }
@keyframes fxFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 배경 사진: 느린 시차 (fx.js 가 translate 만 바꾼다. 가장자리가 비지 않게 조금 크게) */
.fm :is(.sig__media, .clinic__media) { overflow: hidden; }
.fm :is(.mission__bg, .film__bg, .sig__media img, .clinic__media img) { scale: 1.12; }
@media (max-width: 1023px) { .fm :is(.mission__bg, .film__bg, .sig__media img, .clinic__media img) { scale: 1.08; } }

/* 임플란트 그림: 떠 있는 듯 천천히 오르내린다 */
.fm .belief__visual img { animation: fxFloat 7s ease-in-out infinite; }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 진료 단계: 왼쪽 여백에 금색 뿌리선이 스크롤만큼 자라고, 지나간 단계에 마디가 맺힌다 */
.fm .c-proc__right { position: relative; }
.fx-root { position: absolute; left: calc((100% - min(705px, 100% - 80px)) / 2 - 22px); width: 1px; background: rgba(169,132,62,.22); pointer-events: none; }
.fx-root i { position: absolute; inset: 0; background: var(--gold); transform-origin: 50% 0; transform: scaleY(0); }
.fx-root b { position: absolute; left: -4px; width: 9px; height: 9px; margin-top: -4.5px; border: 1px solid var(--gold); border-radius: 50%; background: var(--dark); scale: .45; opacity: .6; transition: scale .7s var(--fx-e), opacity .7s, background-color .7s; }
.fx-root b.is-on { scale: 1; opacity: 1; background: var(--gold); }
@media (max-width: 1023px) { .fx-root { left: calc(var(--gut) / 2); } }

/* 핵심 목록: 구분선이 왼쪽에서 자라난다 */
.fm .core-list { position: relative; border-top-color: transparent; }
.fm .core-list::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform-origin: 0 50%; scale: 0 1; transition: scale 1.4s var(--fx-e); }
.fm .core-list > li { position: relative; border-bottom-color: transparent; }
.fm .core-list > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform-origin: 0 50%; scale: 0 1; transition: scale 1.4s var(--fx-e) calc(var(--n, 0) * 120ms + .15s); }
.fm .core-list.fx-in::before, .fm .core-list.fx-in > li::after { scale: 1 1; }

/* FAQ 열림 */
.fm .acc details[open] .acc__body { animation: fxSoft .8s var(--fx-e); }
@keyframes fxSoft { from { opacity: 0; translate: 0 10px; } }

/* 마우스: 카드가 손끝을 따라 살짝 기울고, 버튼은 손끝 쪽으로 끌린다 */
@media (hover: hover) and (pointer: fine) {
  .fm .fx-tilt { transition: transform .5s var(--fx-e); }
  .fm .journal__list a.fx-tilt { transition: border-color .2s, transform .5s var(--fx-e); }
  .fm .fx-tilt.is-tilting { transition-duration: .2s, .2s; }
  .fm .btn { transition: background-color .2s, color .2s, border-color .2s, opacity .2s, transform .45s var(--fx-e); }
  .fm :is(.arrow, .hdr__cta) { transition: background-color .2s, color .2s, transform .45s var(--fx-e); }
}

/* 페이지 전환: 본문이 부드럽게 사라지고 다음 페이지가 부드럽게 나타난다 */
.fm.fx-leave :is(main, .ftr) { opacity: 0; transition: opacity .4s ease; }
.fm.fx-enter :is(main, .ftr) { animation: fxFadeIn .8s ease both; }

/* ═══════════ 메인 효과 수정 (2026-10-05) ═══════════ */
/* 1. Our Belief: 스크롤해도 배경은 제자리(고정), 글·임플란트·숫자만 지나간다.
      position: fixed + 부모 clip-path 라 모바일(iOS 포함)에서도 합성만으로 움직인다. 화면에서 멀면 감춘다 */
.fm .belief { clip-path: inset(0); }
.fm .belief__bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; -webkit-mask-image: none; mask-image: none; }
.fm .belief.fx-far .belief__bg { visibility: hidden; }
@media (min-width: 1024px) {
  .fm .belief__fade { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,0) 66%, #fff); }
}

/* 5. Signature: CRAZY DOCTOR 가 끊김 없이 흐른다 (같은 글자 4번 → 절반만큼 이동하면 처음과 같은 모양) */
.fm .sig__deco-track { animation: fxMarquee 32s linear infinite; }
.fm .sig.fx-far .sig__deco-track { animation-play-state: paused; }
@keyframes fxMarquee { to { translate: -50% 0; } }

/* 6. Our Mission: 배경 아이콘이 서로 다른 깊이에서 천천히 떠오르고, 층 전체가 스크롤·마우스에 따라 기운다(fx.js) */
.fm .mission__layer { will-change: transform; }
.fm .mfx { animation: fxBob var(--d, 7s) ease-in-out var(--dl, 0s) infinite alternate; }
.fm .mfx:nth-child(2n) { --d: 9s; --dl: -3s; }
.fm .mfx:nth-child(3n) { --d: 6s; --dl: -1.5s; }
.fm .mission.fx-far .mfx { animation-play-state: paused; }
@keyframes fxBob { from { translate: 0 -8px; } to { translate: 0 10px; } }
@media (min-width: 1024px) and (hover: hover) { .fm :is(.mfx--6, .mfx--8) { filter: blur(1.5px); } }

/* 8. 호버 (마우스 전용) */
@media (hover: hover) and (pointer: fine) {
  .fm :is(.sig-card__img, .clinic__track figure, .visit__mapimg, .film__poster, .prog__img) img { transition: transform .9s var(--fx-e); }
  .fm .sig-card:hover .sig-card__img img, .fm .clinic__track figure:hover img, .fm .visit__mapimg:hover img, .fm .film__poster:hover img { transform: scale(1.06); }
  .fm .prog__img:hover img { transform: scale(1.08); }
  .fm .sig-card__more { transition: background-color .3s; }
  .fm .sig-card__more::before, .fm .sig-card__more::after { transition: rotate .5s var(--fx-e); }
  .fm .sig-card:hover .sig-card__more { background-color: var(--gold); }
  .fm .sig-card:hover .sig-card__more::before, .fm .sig-card:hover .sig-card__more::after { rotate: 90deg; }
  .fm :is(.stats, .voices__track) > * { transition: opacity 1s var(--fx-e) calc(var(--n, 0) * 100ms), translate 1.3s var(--fx-e) calc(var(--n, 0) * 100ms), scale 1.3s var(--fx-e) calc(var(--n, 0) * 100ms), transform .5s var(--fx-e), box-shadow .5s, background-color .5s; }
  .fm .stats > li:hover { transform: translateY(-6px); background-color: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
  .fm .voices__track > .voice:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.12); }
  .fm .journal__t, .fm .acc summary { transition: color .3s; }
  .fm .journal__list a:hover .journal__t, .fm .acc summary:hover { color: var(--gold); }
  .fm :is(.link-arrow, .journal__f)::after, .fm .arrow svg { transition: translate .4s var(--fx-e); }
  .fm .link-arrow:hover::after, .fm .journal__list a:hover .journal__f::after { translate: 3px -3px; }
  .fm .arrow[data-next]:hover svg { translate: 4px 0; }
  .fm .arrow[data-prev]:hover svg { translate: -4px 0; }
}

/* 9. 메인 CTA (2026-10-06): 치아 두 개가 서로 다른 깊이에서 떠오르고, 스크롤·마우스에 따라 어긋나게 움직인다(fx.js 가 translate)
      앞 치아는 크고 또렷하게 빨리, 뒤 치아는 작고 흐리게 느리게 — 카드를 사이에 둔 앞뒤 층 */
.fx .cta__obj { transition: opacity 1.4s ease var(--fx-d, 0s); }
.fx .cta__obj:not(.fx-in) { opacity: 0; }
.fm .cta__obj { transition: opacity 1.4s ease var(--fx-d, 0s), scale 2s var(--fx-e) var(--fx-d, 0s); }
.fm .cta__obj:not(.fx-in) { scale: .8; }
.fm .cta__obj--back { --fx-d: .25s; }
.fm .cta__obj img { animation: fxFloat 8s ease-in-out infinite; }
.fm .cta__obj--back img { animation-duration: 10s; animation-delay: -4s; }
.fm .cta--stage.fx-far .cta__obj img { animation-play-state: paused; }

/* 10. Our Belief 임플란트 분해 전환 (2026-10-06 · fx.js 가 .im-stage 를 만든다)
       무대 전체를 곱하기로 합성(배경 사진 위에서 흰 바탕이 사라진다). 무대 안의 층 위치·투명도는 fx.js 가 프레임마다 정한다 */
.belief__visual[data-implant] { position: relative; }
.belief__visual.is-im > img { visibility: hidden; }
.im-stage { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; opacity: 0; }
.is-im > .im-stage { opacity: 1; }
.fm .im-stage { animation: fxFloat 7s ease-in-out infinite; }
.fm .belief.fx-off .im-stage { animation-play-state: paused; }
.im-space { position: absolute; left: 0; top: 0; width: 800px; height: 800px; transform-origin: 0 0; }
.im-space > div { position: absolute; background: no-repeat 0 0 / 100% 100%; will-change: transform, opacity; }
.im-ring { position: absolute; left: 0; top: 0; width: 800px; height: 800px; overflow: visible; }
.im-ring path { fill: none; stroke: #b2b2b2; stroke-linecap: round; }
.im-ring--back path { stroke: #c8c8c8; }

/* 11. Signature 슬로건(섹션 위 경계): CRAZY DOCTOR 와 같은 빠르기(px/초)로 반대 방향. (한 벌 길이가 CRAZY DOCTOR 한 벌의 약 1.21배 → 32초 × 1.21 ≈ 39초. 글꼴·크기를 바꾸면 다시 잰다) */
@keyframes fxMarqueeRight { from { translate: -50% 0; } to { translate: 0 0; } }
.fm .sig-lead__track { animation: fxMarqueeRight 39s linear infinite; }   /* 위·아래 두 띠가 어긋나지 않게 멈추지 않는다(fx.js 가 시작 시점도 맞춘다) */