/* ============================================================
   motion-plus.css — 2025/26 트렌드 스크롤 모션 + 프리미엄 폴리시 (additive)
   내몸사랑한의원 전 페이지 공통. main.css 위에 얹는 "향상 레이어".

   설계 원칙
   - GSAP(ScrollTrigger)가 있고 + 사용자가 '모션 줄이기'가 아닐 때만
     <html class="mp-on">이 켜지고 → 아래의 '초기 은닉' 상태가 적용된다.
   - 따라서 스크립트 실패/구형 브라우저/reduced-motion 에서는
     은닉 자체가 적용되지 않아 콘텐츠가 '멈춘 채 숨김' 될 일이 없다.
   - hero 섹션(영상형 연출)은 건드리지 않는다. 본문 섹션만 대상.

   제거(원복) 방법
   - demo/index.html 에서 이 파일 <link> 한 줄과
     motion-plus.js <script> 한 줄(+ 원하면 Lenis <script>)을 지우면 끝.
   ============================================================ */

/* 0) 상단 스크롤 진행 바 ------------------------------------ */
.mp-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green-500),var(--gold-light));
  z-index:1100;pointer-events:none;
}

/* 1) 구조 상태 (mp-on 일 때만) ------------------------------
   ※ '시작(은닉) 상태'는 CSS가 아니라 JS의 gsap.from(immediateRender:false)이
      스크롤 진입 순간에만 적용한다. 따라서 자연 상태 = 가시 상태가 되어,
      트리거가 안 뜨거나 새로고침돼도 제목/카드가 영구히 숨겨지지 않는다. */
.mp-on .mp-mask{display:block;overflow:hidden}
.mp-on .mp-line{display:block;will-change:transform}
.mp-on .mp-card{will-change:transform,opacity,filter}
/* 루트 다이어그램 세로 줄기: 위에서 아래로 그려짐 */
.mp-on .root-diagram{--mp-line:0}
.mp-on .root-diagram::before{transform-origin:top center;transform:scaleY(var(--mp-line))}

/* 2) 질환 키워드 마퀴(무한 흐름) ---------------------------- */
.mp-marquee{
  --gap:3rem;overflow:hidden;margin:var(--space-12) 0 var(--space-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* 절제형: 느리고 가볍게(40s, weight 600, 살짝 작게) */
.mp-marquee__track{display:flex;gap:var(--gap);width:max-content;will-change:transform;animation:mpMarquee 40s linear infinite}
.mp-marquee:hover .mp-marquee__track{animation-play-state:paused}
.mp-marquee span{
  font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  font-size:clamp(.95rem,2vw,1.35rem);color:var(--green-700);
  display:inline-flex;align-items:center;gap:var(--gap);
}
.mp-marquee span::after{content:'·';color:var(--gold);font-weight:400}
@keyframes mpMarquee{to{transform:translateX(calc(-50% - (var(--gap) / 2)))}}

/* ============================================================
   3) PREMIUM POLISH (항상 적용 · 모션/JS 무관 · 전 페이지 공통)
   "프리미엄·절제형": 큰 구조 변화 없이 타이포·디테일·마이크로 인터랙션만 고급화.
   reduced-motion 사용자에게도 그대로 적용됨.
   ============================================================ */

/* 폰트 렌더링 품질 */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* 제목 줄바꿈 균형(고아 단어 방지) + 본문 pretty — 모던 타이포 기본기 */
h1,h2,h3,h4,.section-title,.breadcrumb-title,.hero-phrase-main{text-wrap:balance}
p,.section-desc,.card-desc,.hero-phrase-sub,.icon-card-desc{text-wrap:pretty}

/* 앵커 이동 시 고정 헤더 아래로 가리지 않게(스크롤 마진) */
section[id],div[id]{scroll-margin-top:84px}

/* 섹션 eyebrow(라벨): 앞에 짧은 선 악센트 + 정렬 정돈 */
.section-label{display:inline-flex;align-items:center;gap:.6em}
.section-label::before{content:"";width:1.6em;height:1px;background:currentColor;opacity:.55}
.section-header--center .section-label{justify-content:center}

/* 카드: 이미지 줌 + 그림자/보더 정밀 이징 (절제된 호버) */
.card{transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.card .card-img{transition:transform .6s var(--ease)}
.card:hover .card-img{transform:scale(1.045)}
.card:hover{border-color:var(--green-100)}

/* 데스크탑 내비 링크: 밑줄 슬라이드 인 */
@media(min-width:901px){
  .nav-link{position:relative}
  .nav-link::after{content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:5px;
    height:1.5px;background:currentColor;opacity:.7;transform:scaleX(0);transform-origin:left;
    transition:transform .3s var(--ease)}
  .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
}

/* 버튼: 부드러운 통합 이징(살짝 더 고급스러운 반응) */
.btn{transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
  border-color var(--dur) var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease)}

/* 포커스 가시성(접근성 디테일) */
a:focus-visible,.btn:focus-visible,button:focus-visible,.symptom:focus-visible,.accordion-btn:focus-visible{
  outline:2px solid var(--green-500);outline-offset:3px;border-radius:var(--radius-sm)}

/* 에디토리얼 풀쿼트(스토리텔링) — 기존 철학 문장을 한 호흡으로 강조 */
.pull-quote{font-family:var(--font-serif);font-weight:600;
  font-size:clamp(1.35rem,3vw,1.95rem);line-height:1.5;letter-spacing:-.02em;
  color:var(--green-800);margin:var(--space-10) 0;padding-left:var(--space-6);
  border-left:3px solid var(--gold);text-wrap:balance}

/* 플로팅 네이버 톡톡 버튼(카카오 대체) — 사이트 제이드 톤 */
.floating-btn--talk{background:var(--green-600);color:#fff}

/* ============================================================
   HERO (.hero--cine) — JS 제어 크로스페이드(8장) + 문구 동기화
   기존 main.css 키프레임을 끄고 .is-active 클래스로 제어.
   첫 슬라이드/문구는 인라인 .is-active로 JS 없이도 노출(폴백).
   ============================================================ */
.hero--cine .hero-slide{animation:none;opacity:0;transform:scale(1.08);
  transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
/* 활성 슬라이드: 켄번즈 줌을 keyframe로 → 첫 장(로드 시 is-active 포함)도 줌 재생 */
.hero--cine .hero-slide.is-active{opacity:1;animation:mpHeroKen 9s var(--ease) forwards}
@keyframes mpHeroKen{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero--cine .hero-phrase{animation:none;opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero--cine .hero-phrase.is-active{opacity:1;transform:none}
.hero--cine .hero-dot::after{animation:none;transform:scaleX(0);transform-origin:left}
.hero--cine .hero-dot.is-active::after{transform:scaleX(1);transition:transform .5s var(--ease)}

/* ============================================================
   HOME EDITORIAL (.home 한정) — "확 달라진" 트렌디 변화
   ① 섹션 번호 eyebrow(01·02…) ② 큰 제목 ③ 대형 통계 ④ 강한 카드 호버
   (절제형보다 한 단계 과감 — 톤은 유지)
   ============================================================ */
.home #main{counter-reset:sec}

/* eyebrow를 "01  라벨" 에디토리얼 섹션 마커로 (큰 세리프 골드 번호) */
.home .section .section-label{counter-increment:sec;gap:.55em;letter-spacing:.1em}
.home .section .section-label::before{
  content:counter(sec,decimal-leading-zero);
  width:auto;height:auto;background:none;opacity:1;
  font-family:var(--font-serif);font-weight:700;font-size:1.75em;line-height:1;
  letter-spacing:0;color:var(--gold)}

/* 제목 더 크게 — 에디토리얼 임팩트 */
.home .section .section-title{font-size:clamp(1.95rem,4.6vw,3.35rem);letter-spacing:-.028em}

/* 통계 숫자 대형화 */
.home .stat-strip{gap:clamp(var(--space-8),8vw,var(--space-24))}
.home .stat-strip .hero-stat-num{font-size:clamp(3.4rem,10vw,5.8rem)}

/* 카드 호버 더 또렷하게(리프트↑ + 그림자↑, 이미지 줌은 유지) */
.home .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* 4) 접근성 / 폴백 ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mp-progress{display:none}
  .mp-marquee__track{animation:none;transform:none}
  .card:hover .card-img{transform:none}
  .mp-on .root-diagram::before{transform:scaleY(1)}
}
