@charset "utf-8"; /* ========================================================================= * JDH 프론트 서브페이지 공통 (헤더 정적화 + 기본 리셋) * · /include/jdh_header.jsp 와 짝. main_hero.css 다음에 로드한다. * (헤더/메가/모바일메뉴의 기본 스타일은 main_hero.css 에 있고, 여기서 서브용으로만 덮어씀) * ========================================================================= */ /* 서브 헤더: 메인의 고정 GNB(.jdh_sticky_header)를 항상 보이는 상단 고정 바로 전환 * ⚠ position:sticky 를 쓰면 안 된다 — basic.css 의 `html, body { overflow-x:hidden }` 때문에 * sticky 가 무력화되어 스크롤 시 헤더가 그냥 따라 올라가 사라진다(2026-07-30 확인). * → 메인과 동일하게 position:fixed 로 고정하고, 가려지는 만큼 .jdh_sub 에 상단 여백을 준다. */ .jdh_sub_header { position: fixed; top: 0; left: 0; width: 100%; transform: none; opacity: 1; pointer-events: auto; transition: none; } /* 페이지 안에서 position:sticky (주제 탭 등) 를 쓰는 서브페이지 전용 — * ⚠ basic.css 의 `html, body { overflow-x:hidden }` 중 **body 쪽**이 sticky 를 죽인다. * body 의 overflow-x 가 hidden 이면 overflow-y 가 auto 로 계산돼 body 자체가 스크롤 컨테이너가 되는데, * 실제 스크롤은 documentElement 에서 일어나므로 body 기준 sticky 는 영원히 발동하지 않는다 * (2026-08-28 실측: body 만 visible 로 풀면 탭이 top:72px 에 정상 고정됨). * 가로 잘림 방지는 html 의 overflow-x:hidden 이 그대로 담당하므로 안전하다. * → 전역(basic.css)은 레거시 페이지 영향이 커서 건드리지 않고, 이 클래스가 붙은 페이지에서만 푼다. */ body.jdh_sub_sticky { overflow-x: visible; } /* 서브페이지 본문 기본 — fixed 헤더 높이(main_hero.css: 72px / ≤1024px 60px) 만큼 밀어준다 */ .jdh_sub { background: #fff; padding-top: 72px; } @media all and (max-width: 1024px) { .jdh_sub { padding-top: 60px; } } .jdh_sub * { box-sizing: border-box; } .jdh_sub img { max-width: 100%; } /* 스크롤 진입 애니메이션 (섹션 공통) * ⚠ 초기 숨김은 html.jdh-anim 이 붙은 뒤에만 적용한다(JS 가 정상 초기화되었다는 신호). * JS 오류·미지원 환경에서 콘텐츠가 영구히 안 보이는 사고를 막기 위한 점진적 향상 구조. */ html.jdh-anim .jdh_sub .jdh-up { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } html.jdh-anim .jdh_sub .jdh-up.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.jdh-anim .jdh_sub .jdh-up { opacity: 1; transform: none; transition: none; } } /* 탭 전환 리빌 (2026-08-28) — "탭을 누르면 이 섹션들도 다시 로딩되는 느낌으로" * 주제탭을 눌러도 내용이 크게 겹치는 섹션(시술 과정·진단 시스템 등)은 화면이 그대로라 * 바뀐 게 읽히지 않는다. JS 가 대상 요소에 순번(--sw-i)을 심고 이 클래스를 다시 붙여 * 차례로 떠오르게 한다(솔루션 카드는 같은 원리의 전용 규칙이 jdh_solgrid.css 에 있다). * ⚠ 클래스를 떼지 않는 것이 전제다 — animation-fill-mode:both 가 최종 상태를 잡고 있어, * 떼면 아직 화면 밖이라 위 .jdh-up(opacity:0)이 남아 있는 요소가 도로 사라진다. * 재생은 remove → 리플로우 → add 로 트리거한다. * ⚠ .jdh-up 리빌(transition)과 같은 요소에 걸리지만 animation 이 우선하므로 충돌하지 않는다. */ @keyframes jdhSwapIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .jdh_sub .jdh-swapin { animation: jdhSwapIn .52s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--sw-i, 0) * .07s); } @media (prefers-reduced-motion: reduce) { .jdh_sub .jdh-swapin { animation: none; } } /* 모바일 메뉴 열림 시 배경 스크롤 잠금 */ body.jdh-noscroll { overflow: hidden; }