/* ═══════════════════════════════════════════════════════════ motion.css — 스크롤 등장 모션 (성능 우선 재설계) 법무법인 더벨 · 2026-09-03 · v11 이 파일이 하는 일은 다섯 가지다. 1. 등장 전 상태를 만든다 (opacity:0) — js/motion.js 와 짝 2. 동작 줄이기 설정에서 등장 연출을 못 박아 끈다 3. 차분한 호버 반응을 건다 4. info03 도트 매트릭스 캔버스 자리를 잡아 준다 — js/dotmatrix.js 와 짝 5. info03 차트 막대가 바닥에서 자라 오르게 한다 — js/motion.js 와 짝 [v1 에서 덜어낸 것] · 포인터를 따라오는 광택 · 지나가는 광택 · CTA 채움판/안쪽 링 · 단어 분해 조각(.tx-part / .tx-line) 관련 일체 · blur / clip-path / 큰 scale / 화살표 곡예 / back.out 계열 이징 [v10 에서 더 덜어낸 것] · html.motion-soft 블록 전체 — 동작 줄이기는 "약하게 재생" 이 아니라 "아예 재생하지 않음" 이 됐다. 그 경로를 타는 CSS 가 통째로 필요 없어졌다. · info05 번호 배지 pop — 등장 연출을 제목/본문·카드/이미지 + 차트 막대로 제한했다. ※ v1 의 info03 WebGL 도트 매트릭스 배경(js/dotmatrix.js)은 그대로 가져왔다. 화면 밖·백그라운드 탭에서 멈추고 20fps 로 묶여 있어 스크롤을 건드리지 않는다. ═══════════════════════════════════════════════════════════ */ /* ── 0. 공통값 ───────────────────────────────────────────── 호버 시간을 하나로 묶는다. 끝나는 시각이 여러 개면 버튼 하나가 여러 번 반응하는 것처럼 어수선하게 보인다 */ :root { --mo-hover:0.28s; --mo-press:0.12s; --mo-ease:cubic-bezier(0.22, 0.61, 0.36, 1); } /* ═══════════════════════════════════════════════════════════ 1. 등장 전 상태 — 프리하이드 ═══════════════════════════════════════════════════════════ 여기에 "움직이기 전 모습" 을 통째로 담는다 — opacity 0 과 시작 이동값. 재생은 js/motion.js 가 인라인 transition 을 걸어 이 상태를 풀어 주는 것뿐이다. 실제 보간은 브라우저 CSS 엔진이 한다(합성 스레드) — 외부 라이브러리가 없다. transform 은 레이아웃을 건드리지 않으므로 미리 걸어도 CLS 가 생기지 않는다. 레이어는 motion.js 가 재생 직전에 will-change 로 띄우고 끝나는 즉시 내린다. .motion-ready 는 js/motion.js 가 에서 동기로 붙인다. IntersectionObserver 가 없는 브라우저면 아예 붙지 않고, 초기화가 늦으면 워치독이 3.5초 뒤 떼어낸다 → 어떤 경우에도 콘텐츠가 숨겨진 채 남지 않는다. ※ 아래 목록은 motion.js 의 SECTIONS 표에서 기계적으로 뽑아낸 것이다. 선택자를 손으로 고치지 말고 SECTIONS 를 고친 뒤 다시 뽑아라. 한쪽만 고치면 그 요소는 영영 안 보이거나 툭 튀어나온다. */ /* ── 1-1. 제목 — 24px 아래에서 올라온다 ───────────────── */ html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .title_con > .title_small > span, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .title_con > span, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .title_con > .main_title, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .title_con > .sub_area, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .title_con > .title_small > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .title_con > span, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .text_con > .title_con, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .title_con {opacity:0; transform:translateY(24px);} /* ── 1-2. 본문 · 카드 — 16px ──────────────────────────── */ html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text_con > span, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .contents_con > ul > li, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .desc_con > p, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .btn_con > a, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .first_con > ul > li, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .first_con > .sub_info_text, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .contents_con .y_val, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .contents_con .x_item, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .left_con > .title_con, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .left_con > .list_con > ul > li, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .right_con > .title_con, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .right_con > .list_con > ul > li, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .list_con > ul > li, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .step_wrap .list_con > ul > li, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .contents_con > .text_con > span, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .name_con > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .spec_con > ul > li, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left02_con > .history_con > .history_box > li, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .list_con > ul > li, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .text_con > .sub_con, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text01_con > ul > li, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text02_wrap > .text02_con > ul > li, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text02_wrap > .btn_con > a {opacity:0; transform:translateY(16px);} /* ── 1-3. 이미지 — 이동 없이 밝아지기만 ───────────────── */ html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .right_con img, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .right_con img, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .img_con img {opacity:0;} /* ── 1-4. 모바일 — 이동 거리를 절반으로 ───────────────── */ @media (max-width:1024px) { html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .title_con > .title_small > span, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .title_con > span, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .title_con > .main_title, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .title_con > .sub_area, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .title_con > .title_small > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .title_con > span, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .text_con > .title_con, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .title_con {transform:translateY(12px);} html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text_con > span, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .contents_con > ul > li, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .desc_con > p, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .btn_con > a, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .first_con > ul > li, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .first_con > .sub_info_text, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .contents_con .y_val, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .contents_con .x_item, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .left_con > .title_con, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .left_con > .list_con > ul > li, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .right_con > .title_con, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .right_con > .list_con > ul > li, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .list_con > ul > li, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .step_wrap .list_con > ul > li, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .contents_con > .text_con > span, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .name_con > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .spec_con > ul > li, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left02_con > .history_con > .history_box > li, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .list_con > ul > li, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .text_con > .sub_con, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text01_con > ul > li, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text02_wrap > .text02_con > ul > li, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text02_wrap > .btn_con > a {transform:translateY(8px);} } /* 안전망 — 캐시된 옛 js 가 남아 프리하이드만 걸리는 사고를 막는다. .motion-ready 가 붙었는데 3.5초 안에 아무 섹션도 재생되지 않으면 motion.js 가 클래스를 떼어낸다. 이건 그 이중 잠금이다 */ /* 동작 줄이기 — "끄기"가 아니라 "움직임 빼기"다. reduce 가 막으려는 것은 전정기관을 자극하는 이동·확대·시차이지 페이드가 아니다. 여기서는 이동(transform)과 keyframes 만 못 박고, 불투명도 페이드는 남긴다. ※ 예전에는 opacity:1 !important 로 페이드까지 막았는데, 그러면 윈도우 성능 옵션에서 애니메이션을 꺼 둔 PC 에서 스크롤 모션이 통째로 사라진다. */ @media (prefers-reduced-motion: reduce) { /* [왜 `#main_con *` 이 아닌가 — 2026-09-03] 예전에는 `html.motion-ready #main_con *` 에 transform:none !important 를 걸었다. 그 별표가 **Swiper 가 슬라이드를 옮기는 데 쓰는 wrapper 까지** 잡아 버렸다. Swiper 는 "옮겼다" 고 알고 있는데 화면은 제자리에 붙어 있으니, 선명한 슬라이드가 한 칸 옆으로 밀린 채 멈춘 것처럼 보였다(실측 오프셋 1795px). info02 인용 슬라이더와 모바일 슬라이더 3종(wrapperClass:'mo_slide_list')이 전부 같은 이유로 죽었다. 남의 transform 을 건드리지 않도록, **이 파일이 직접 거는 transform 만** 되돌린다. (motion.js 는 동작 줄이기일 때 자기 연출 대상에 인라인으로 transform:none 을 이미 걸고 있으므로, 등장 모션 몫은 여기서 다시 할 필요가 없다) ※ 이 목록은 motion.css 안의 transform 선언에서 기계적으로 뽑았다. 새 transform 을 추가하면 이 목록도 같이 갱신할 것. ※ 헤더 메뉴 인디케이터(::after)가 목록에 있는 것은 의도된 것이다 — transform 이 none 이 되면 막대가 처음부터 제 길이가 되고, 보이고 안 보이고는 opacity 가 맡으므로 움직임만 빠지고 표시는 정상이다. */ html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .title_con > .title_small > span, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .title_con > span, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .title_con > .main_title, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .title_con > .sub_area, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .title_con > .title_small > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .title_con > span, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .title_con > .title_small > span, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .title_con > span, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .text_con > .title_con, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .title_con, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text_con > span, html.motion-ready #main_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #main_con > .info02_con > .contents_con > .first_con:not(.mo-done) > .contents_con > ul > li, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .desc_con > p, html.motion-ready #main_con > .info02_con > .contents_con > .third_con:not(.mo-done) > .left_con > .btn_con > a, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .first_con > ul > li, html.motion-ready #main_con > .info03_con > .contents_con:not(.mo-done) > .first_con > .sub_info_text, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .contents_con .y_val, html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) > .contents_con .x_item, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .left_con > .title_con, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .left_con > .list_con > ul > li, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .right_con > .title_con, html.motion-ready #main_con > .info04_con > .contents_con:not(.mo-done) > .contents_con > .right_con > .list_con > ul > li, html.motion-ready #main_con > .info05_con > .contents_con:not(.mo-done) > .list_con > ul > li, html.motion-ready #main_con > .info06_con > .contents_con:not(.mo-done) > .step_wrap .list_con > ul > li, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .contents_con > .text_con > span, html.motion-ready #main_con > .info07_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .name_con > span, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left01_con > .spec_con > ul > li, html.motion-ready #main_con > .info08_con > .contents_con:not(.mo-done) > .left02_con > .history_con > .history_box > li, html.motion-ready #main_con > .info09_con > .contents_con:not(.mo-done) > .list_con > ul > li, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .text_con > .sub_con, html.motion-ready #main_con > .info10_con > .contents_con:not(.mo-done) > .contents_con > .btn_con > a, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text01_con > ul > li, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text02_wrap > .text02_con > ul > li, html.motion-ready #footer > .contents_con > .info01_con > .contents_con:not(.mo-done) > .contents_con > .text02_wrap > .btn_con > a, #main_con .btn_con > a:hover, #main_con .bottom_con > .right_btn > a:hover, #main_con .btn_con > a:active, #main_con .bottom_con > .right_btn > a:active, #footer .btn_con > a:hover > img, #footer .btn_con > a:active > img, #header .nav_td .list_con > ul > li > a:hover, #header .logo_td > a:hover > img, #header .logo_td > a:active > img, #header .menu_btn_td > a:hover > img, #header .menu_btn_td > a:active > img, .diagnosis_popup .option_btn:active, .diagnosis_popup .next_btn:not(:disabled):hover, .diagnosis_popup .submit_btn:not(:disabled):hover, .diagnosis_popup .confirm_btn:not(:disabled):hover, .diagnosis_popup .next_btn:not(:disabled):active, .diagnosis_popup .submit_btn:not(:disabled):active, .diagnosis_popup .confirm_btn:not(:disabled):active, .diagnosis_popup > .popup_inner > .popup_close:hover, .diagnosis_popup > .popup_inner > .popup_close:active, #container > .floating_con > ul > li > a:active { transform:none !important; } /* 모바일 내비 패널이 열릴 때의 애니메이션 */ #header .nav_td .list_con.on { animation:none !important; } /* ── 버튼 화살표는 동작 줄이기에서도 움직인다 (협의된 예외) ──────── [왜 예외인가 — 2026-09-03] 처음엔 다른 이동과 똑같이 막았다. 그런데 "오버해도 화살표가 아예 안 움직인다" 는 신고가 세 번 들어왔고, 원인이 이것이었다. 신고자 PC 는 윈도우 '애니메이션 표시' 가 꺼져 있어 이 블록을 탄다. 그 환경에서는 색·그림자만 반응하고 이동은 통째로 사라진다 — 실제로 재현했다. 이 사이트에서 두 번째로 겪는 같은 원인이다 (첫 번째는 스크롤 등장 모션이 안 보인다는 신고였다). [왜 이건 되살려도 되나] reduce 가 막으려는 것은 전정기관을 자극하는 큰 이동·확대·시차다. 이 움직임은 11×18px 짜리 화살표가 최대 11px 미끄러지는 것이고, 사용자가 직접 커서를 올렸을 때만, 그 버튼 안에서만 일어난다. 무엇보다 이 이동은 장식이 아니라 "누르면 다음으로 간다" 는 안내다 — 빼면 버튼이 무엇을 하는지 알려 줄 수단이 하나 사라진다. [어떻게 되살렸나 — 여기에 규칙이 없는 것이 그 방법이다] 위 transform:none 목록에서 화살표 선택자를 빼기만 했다. 그러면 (hover: hover) 쪽 규칙이 그대로 살아 움직인다. 처음엔 여기서 !important 로 다시 걸었다가 화살표가 붙박여 꿈쩍하지 않았다. 그때는 반복(keyframes)으로 만들어 두었는데, **!important 는 keyframes 를 이긴다** — animation 은 붙어 있고 animationName 도 정상으로 읽히는데, 매 프레임 transform 을 important 선언이 덮어써 버렸다. 되살리려고 건 규칙이 되살리려던 것을 막고 있었다. 반복을 걷어낸 지금도 여기서 !important 로 다시 걸지 말 것 — 규칙을 없애는 것이 답이다. ※ 같은 이유로 헤더 메뉴의 금색 인디케이터도 목록에서 뺐다. 그 막대는 scaleX 로 가운데부터 열리는 것이 연출의 전부라, 이동을 막으면 폭 그대로 켜졌다 꺼지기만 한다 — "스케일 애니메이션이 없다" 는 지적이 이것이었다. 막대 하나가 글자 밑에서 0.28초 동안 가로로 열리는 것이고, 커서를 올렸을 때만 일어난다. ※ 버튼이 떠오르는 것(translateY)과 헤더 링크가 한 픽셀 뜨는 것은 계속 막아 둔다. 그건 장식이라 빠져도 알려 주는 것이 없다. ※ 이 예외를 되돌리려면 위 두 목록에 아래 네 줄을 다시 넣으면 된다. #main_con .btn_con > a:hover > img #main_con .bottom_con > .right_btn > a:hover > img .diagnosis_popup .next_btn:not(:disabled):hover::after (+ submit_btn · confirm_btn) 단 꺾쇠는 transform:none 이 아니라 rotate(45deg) 로 되돌려야 한다 — 그 회전은 움직임이 아니라 화살표의 모양이다. */ /* 막대는 예외다. 자기 밑변에 붙어 자기 자리 안에서만 커지므로 화면이 밀리지 않고, 이 그래프에서는 자라는 동작이 곧 정보(기준중위소득 대비 최저생계비 비교)다. 위의 transform:none 이 여기까지 덮지 않도록 --chart_scale 은 건드리지 않는다. */ } /* ═══════════════════════════════════════════════════════════ 2. 호버 — 차분하게, 하나의 어법으로 ═══════════════════════════════════════════════════════════ (hover: hover) 게이트 하나만 쓴다. 터치 기기에서 호버 상태가 눌린 뒤 그대로 눌어붙는 것을 막는다. 누름(:active)은 게이트 밖. */ /* ── 2-1. CTA 버튼 ──────────────────────────────────────── 금색·남색 CTA 모두 같은 반응 — 살짝 떠오르고 그림자가 깊어진다. 화살표만 한 걸음 앞으로 나간다. (배경색까지 밝아지는 것은 남색 단색 버튼 두 개뿐이다 — 바로 아래) */ #main_con .btn_con > a, #main_con .bottom_con > .right_btn > a { transition:transform var(--mo-hover) var(--mo-ease), box-shadow var(--mo-hover) var(--mo-ease), background-color var(--mo-hover) var(--mo-ease), filter var(--mo-hover) var(--mo-ease), opacity var(--mo-hover) var(--mo-ease); } #main_con .btn_con > a > img, #main_con .bottom_con > .right_btn > a > img { transition:transform var(--mo-hover) var(--mo-ease); } @media (hover: hover) { /* 2026-09-03 — 반응을 한 단계 또렷하게 키웠다. -2px 는 큰 화면에서 거의 감지되지 않는다는 지적을 받았다. 대신 광택 스윕은 넣지 않는다 (v1 에서 성능 때문에 걷어낸 연출이다). */ #main_con .btn_con > a:hover, #main_con .bottom_con > .right_btn > a:hover { transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(0, 0, 0, 0.55); } /* 화살표 — 오버하면 한 번 스윽 미끄러지고 그 자리에 머문다. [왜 반복을 뺐나 — 2026-09-03] 한때 "① transition 으로 전진 → ② keyframes 로 무한 반복" 두 단계로 만들었다. 움직임은 확실히 보였지만 "두 번 움직여서 별로다" 는 지적을 받았다. 실제로 두 동작이었다 — 미끄러진 뒤에 또 밀린다. 지금은 transition 하나다. 오버하면 한 번 미끄러지고, 커서를 떼면 같은 시간에 제자리로 돌아온다. [반복 없이도 보이는 이유] 반복을 넣었던 건 "옮겨 놓기만 하면 안 움직이는 걸로 읽힌다" 는 지적 때문이었는데, 그 지적의 진짜 원인은 거리도 반복 여부도 아니라 검수 환경의 동작 줄이기 설정이었다(아래 prefers-reduced-motion 블록 참고). 그쪽을 고치고 나니 한 번 미끄러지는 것으로 충분히 읽힌다. [거리는 세 번 줄여서 여기까지 왔다 — 0.6vw → 0.3vw] 9.6px 는 "너무 멀다" 는 지적을 받았다. 화살표가 제자리에서 한 걸음 나가는 게 아니라 버튼 밖으로 빠져나가려는 것처럼 보였다. 지금은 그 절반인 0.3vw = 4.8px(@1600) 다. ※ 상한은 화살표 오른쪽 여백이고, 기준은 가장 좁은 버튼이다 — info01 하단 남색 버튼의 16.6px(@1600). 지금 값이면 11.8px 이 남는다. 한때 16px 까지 밀면서 "알약이 둥그니 실제로는 안 닿는다" 고 적어 두었는데 틀린 설명이었다. 화살표는 세로 가운데, 곧 알약이 가장 넓은 지점에 있어서 둥근 모서리가 여유를 전혀 주지 않는다. 스크린샷으로 재 보니 가장자리에서 0.6px 까지 붙었다. 키우지 말 것. ※ 화살표는 SVG 원본 크기 그대로 11×18px 고정인데 버튼은 vw 라 화면이 커질수록 버튼만 커진다(1920 에서 328×68). 이동량을 vw 로 둔 이유다 — px 로 두면 큰 화면에서 다시 안 보인다. */ #main_con .btn_con > a:hover > img, #main_con .bottom_con > .right_btn > a:hover > img { transform:translateX(0.3vw); } } /* ── 2-1a. 금색 CTA — 금빛이 짙어지고 화살표가 앞으로 나간다 ── [왜 색을 뒤집지 않는가 — 2026-09-03] 한 번은 면과 글자를 통째로 뒤집어 봤다(금색 면/검은 글자 → 남색 면/흰 글자 + 금색 테두리). 기능은 다 됐지만 반응이 너무 크다는 판단이었다. 이 버튼은 페이지에서 가장 눈에 띄는 금색 덩어리인데, 오버 한 번에 정체가 바뀌어 버리면 같은 버튼이라는 감각이 끊긴다. 방향을 바꿨다 — 금색은 금색인 채로 두고, 금속이 빛을 더 받은 것처럼 한 톤만 밝아진다. 바뀌는 것이 아니라 살아나는 쪽이다. [왜 filter 인가] 이 버튼의 배경은 linear-gradient 다. 그라디언트는 보간되지 않아 background 를 바꾸면 전환이 뚝 끊긴다. brightness 는 그린 결과에 걸리므로 그라디언트든 뭐든 부드럽게 밝아진다. 검은 글자와 검은 화살표는 brightness 로 변하지 않는다(0 × 1.06 = 0) — 면만 밝아지고 글자는 그대로다. 이 버튼에 딱 맞는 성질이다. ※ 1.06 이상은 올리지 말 것. 그라디언트의 밝은 띠(#F7E293)가 흰색으로 타 버려 금색이 아니라 바랜 색으로 보인다. */ @media (hover: hover) { #main_con > .info01_con .btn_con > a:hover, #main_con > .info02_con .third_con .btn_con > a:hover, /* 2026-09-03 — info10 과 하단 고정바 버튼도 금색이 됐다(style.css). 남색이던 시절의 배경 밝아짐은 빼고 금색 어법으로 옮겼다. ※ 하단 고정바 선택자에 .info01_con 을 붙인 이유는 우선순위다. 위쪽 일반 CTA 규칙(#main_con .bottom_con > .right_btn > a:hover)이 검은 그림자를 걸고 있어서, 같은 길이로 쓰면 순서에 따라 밀린다. */ #main_con > .info10_con .btn_con > a:hover, #main_con > .info01_con .bottom_con > .right_btn > a:hover { filter:brightness(1.06); box-shadow:0 14px 30px -12px rgba(198, 148, 59, 0.55); } } /* 남색 단색 CTA(info07 · info10) — 배경까지 한 톤 밝아진다. [복구 기록 — 2026-09-03] 이 블록은 한 번 사라졌었다. 금색 CTA 의 색반전 연출을 걷어낼 때 주석 범위로 잘라냈는데, 그 사이에 끼어 있던 이 규칙까지 같이 지워졌다. 그 뒤로 info07·info10 은 오버해도 배경이 그대로였다. 되살렸다. [왜 이 둘만인가] 금색 CTA 에는 걸지 않는다. 그쪽 배경은 linear-gradient 인데 그라디언트는 보간되지 않아 transition 이 뚝 끊긴다. 없는 편이 낫다. [왜 색이 서로 다른가] info07 은 밝은 금색 배경 위라 쉬는 색이 #08223F 로 어둡고, 오버하면 #0E3A68 로 한 단계 밝아진다. info10 은 어두운 사진 배경 위라 쉬는 색 자체를 #154680 으로 올렸다 (style.css). 옛 호버색 #0E3A68 을 그대로 두면 오버할 때 오히려 어두워지므로 그보다 밝은 #1D5EA8 로 맞췄다. ※ 선택자가 긴 이유 — style.css 가 이 버튼의 background 를 `#main_con > .info07_con > .contents_con > .contents_con > .btn_con > a` 로 못 박아 두었다. 짧게 쓰면 우선순위에서 밀려 한 번도 적용되지 않는다. */ @media (hover: hover) { #main_con > .info07_con > .contents_con > .contents_con > .btn_con > a:hover { background-color:#0E3A68; } } /* ── 2-1b. 푸터 SNS 아이콘 ──────────────────────────────── 여기는 위 CTA 와 같은 규칙을 쓰고 있었다. 그런데 이 링크는 배경도 테두리도 없는 아이콘이라, CTA 용 그림자를 그대로 받으면 남색 푸터 위에 아이콘과 상관없는 검은 사각형이 하나 떠오른다. 아이콘에는 아이콘의 반응을 준다 — 한 걸음 떠오르는 것 하나면 충분하다 */ #footer .btn_con > a > img { transition:transform var(--mo-hover) var(--mo-ease); } @media (hover: hover) { #footer .btn_con > a:hover > img {transform:translateY(-3px);} } #footer .btn_con > a:active > img {transform:translateY(0) scale(0.92); transition-duration:var(--mo-press);} /* ── 2-2. 카드 · 목록 ───────────────────────────────────── 뜨지 않는다. 그림자만 한 겹 깊어진다. 카드가 뜨면 옆 카드와 간격이 달라 보여 오히려 산만하다 */ #main_con > .info02_con .first_con .contents_con > ul > li, #main_con > .info03_con .first_con > ul > li, #main_con > .info05_con .list_con > ul > li { transition:box-shadow var(--mo-hover) var(--mo-ease); } @media (hover: hover) { #main_con > .info02_con .first_con .contents_con > ul > li:hover, #main_con > .info03_con .first_con > ul > li:hover, #main_con > .info05_con .list_con > ul > li:hover { box-shadow:0 12px 28px -14px rgba(0, 0, 0, 0.35); } } /* info06 진행 절차(STEP 01~05)는 호버를 걸지 않는다 — 2026-09-03 카드가 아니라 하나로 이어진 흐름도다. 아이콘·제목·설명이 곡선 하나로 묶여 있어서, 그중 한 칸에만 그림자가 들어오면 이어진 선이 그 자리에서 끊겨 보인다. 누를 수 있는 것도 아니라 호버가 알려 줄 것도 없다. */ /* ── 2-3. FAQ ─────────────────────────────────────────────*/ #main_con > .info09_con .list_con > ul > li:not(.title_list) > .faq_q { cursor:pointer; transition:opacity var(--mo-hover) var(--mo-ease); } @media (hover: hover) { #main_con > .info09_con .list_con > ul > li:not(.title_list) > .faq_q:hover {opacity:0.75;} } /* ── 2-4. 헤더 ────────────────────────────────────────────*/ #header .nav_td .list_con > ul > li > a { transition:color var(--mo-hover) var(--mo-ease), opacity var(--mo-hover) var(--mo-ease), transform var(--mo-hover) var(--mo-ease); } @media (hover: hover) { /* style.css 가 이 링크의 색을 아주 긴 선택자로 못 박아 둔 탓에 (`#header > .contents_con > table > tbody > tr > .nav_td > .list_con > ul > li > a`), 짧은 선택자로 쓴 호버 색은 우선순위에서 밀려 **한 번도 적용된 적이 없었다**. 그래서 여기만 같은 길이의 선택자를 쓴다. 길이 자체가 이유다 — 줄이지 말 것. */ #header > .contents_con > table > tbody > tr > .nav_td > .list_con > ul > li > a:hover { color:#F6DFA4; } } /* 누름 반응은 데스크탑·모바일 공통 (모바일 전체화면 메뉴에서도 눌린 게 보여야 한다) */ #header .nav_td .list_con > ul > li > a:active {opacity:0.7; transition-duration:var(--mo-press);} /* 데스크탑 메인 메뉴 — 글자가 금색으로 바뀌며 한 픽셀 떠오르고, 글자 아래에서 금색 인디케이터가 가운데부터 글자 너비만큼 열린다. [스케일 — 0 에서 1 로 연다] 한동안 scaleX(0.3) 에서 시작했다. 켜는 순간 이미 30% 가 그어져 있어 "열린다" 기보다 "짧은 막대가 길어진다" 로 보였다. 0 에서 열면 글자 한가운데에서 양쪽으로 그어져 나가는 것이 그대로 보인다. ※ 동작 줄이기에서도 이 스케일은 살려 뒀다 — 아래 prefers-reduced-motion 블록의 예외 항목을 볼 것. 그 설정에서 막대의 연출은 이것이 전부다. [왜 opacity 도 같이 쓰는가] scaleX(0) 이면 폭이 0 이라 opacity 없이도 안 보인다. 그래도 같이 두는 것은 안전장치다 — 어떤 이유로든 transform 이 none 으로 고정되는 환경에서는 막대가 제 길이로 서 버리는데, 그때 보이고 안 보이고를 opacity 가 맡는다. */ @media (min-width: 1025px) { #header .nav_td .list_con > ul > li > a {position:relative;} /* 호버가 닿는 판을 헤더 줄 높이만큼 넓힌다. 이 링크는 padding 이 없는 display:block 이라 실제 상자가 글자 한 줄 높이(약 1.25vw)뿐이다. 헤더 줄은 4.90vw 니까, 항목 바로 위아래 여백에 커서를 두면 호버가 켜졌다 꺼졌다 한다 — 반응이 있는데도 없어 보인다. 판은 절대배치라 줄 높이를 밀지 않고, 투명하며, 링크 안에 있으니 클릭도 그대로 링크로 간다. 위아래 1.5vw 는 줄 안쪽에 머무는 값이다. ※ ::after(금색 막대)는 이 판보다 나중에 그려지므로 가려지지 않는다 */ #header .nav_td .list_con > ul > li > a::before { content:''; position:absolute; left:0; right:0; top:-1.5vw; bottom:-1.5vw; } /* 인디케이터는 에 붙는다 — 앵커가 아니다. 앵커는 글자 수와 무관하게 width:7.81vw 로 고정이라, 여기에 left:0/right:0 으로 막대를 그리면 "FAQ" 같은 짧은 항목에서 글자보다 세 배 긴 줄이 뜬다. 그래서 한동안 1.30vw 짜리 짧은 막대를 가운데 두고 썼는데, 이번엔 "글자 너비만큼" 이라는 요구가 왔다. 글자를 으로 감싸(include/header.html) 그 인라인 상자에 붙였다. span 은 글자에 딱 붙는 상자라 left:0/right:0 이 곧 글자 폭이다. ※ 앵커의 7.81vw 는 그대로 뒀다 — 메뉴 간격과 호버 판(::before)이 그 폭에 걸려 있다. 건드리면 헤더 레이아웃이 통째로 움직인다. */ #header .nav_td .list_con > ul > li > a > span { position:relative; display:inline-block; } #header .nav_td .list_con > ul > li > a > span::after { content:''; position:absolute; left:0; right:0; bottom:-0.31vw; height:2px; background:linear-gradient(90deg, #C6943B, #F7E293, #BE8F3A); border-radius:2px; opacity:0; transform:scaleX(0); transform-origin:center; transition:opacity var(--mo-hover) var(--mo-ease), transform var(--mo-hover) var(--mo-ease); pointer-events:none; } } @media (min-width: 1025px) and (hover: hover) { #header .nav_td .list_con > ul > li > a:hover {transform:translateY(-1px);} #header .nav_td .list_con > ul > li > a:hover > span::after {opacity:1; transform:scaleX(1);} } #header .logo_td > a > img, #header .menu_btn_td > a > img { transition:opacity var(--mo-hover) var(--mo-ease), transform var(--mo-hover) var(--mo-ease); } /* 로고 · 메뉴 버튼 — 여태 누름 반응만 있고 호버에는 아무 일도 없었다. 둘 다 그림 하나뿐인 링크라 색을 건드릴 데가 없다. 크기 하나로만 답한다. 로고는 3%, 메뉴 버튼은 8% — 작은 것일수록 같은 비율이 덜 보이기 때문이다. 확대는 가운데 기준이라 헤더 줄 높이를 밀지 않는다(레이아웃 영향 없음) */ @media (hover: hover) { #header .logo_td > a:hover > img {transform:scale(1.03);} #header .menu_btn_td > a:hover > img {transform:scale(1.08);} } #header .logo_td > a:active > img {transform:scale(0.99); opacity:0.7; transition-duration:var(--mo-press);} #header .menu_btn_td > a:active > img {transform:scale(0.88); opacity:0.75; transition-duration:var(--mo-press);} /* ── 2-5. 진단 팝업 ─────────────────────────────────────── 선택지는 테두리와 그림자만, 진행 버튼은 살짝 떠오르기만 한다 */ .diagnosis_popup .option_btn { transition:border-color var(--mo-hover) var(--mo-ease), box-shadow var(--mo-hover) var(--mo-ease), transform var(--mo-hover) var(--mo-ease); } @media (hover: hover) { .diagnosis_popup .option_btn:hover { border-color:rgba(204, 160, 75, 0.75); box-shadow:inset 6px 6px 12px rgba(0, 0, 0, 0.04), inset -6px -6px 12px rgba(255, 255, 255, 1), 0 10px 24px -12px rgba(204, 160, 75, 0.5); } } .diagnosis_popup .option_btn:active {transform:scale(0.99); transition-duration:var(--mo-press);} .diagnosis_popup .next_btn, .diagnosis_popup .submit_btn, .diagnosis_popup .confirm_btn { transition:transform var(--mo-hover) var(--mo-ease), box-shadow var(--mo-hover) var(--mo-ease), opacity var(--mo-hover) var(--mo-ease); } @media (hover: hover) { .diagnosis_popup .next_btn:not(:disabled):hover, .diagnosis_popup .submit_btn:not(:disabled):hover, .diagnosis_popup .confirm_btn:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(204, 160, 75, 0.6); } } .diagnosis_popup .next_btn:not(:disabled):active, .diagnosis_popup .submit_btn:not(:disabled):active, .diagnosis_popup .confirm_btn:not(:disabled):active { transform:translateY(0) scale(0.99); transition-duration:var(--mo-press); } /* 진행 버튼의 화살표 — 여기엔 움직일 화살표가 아예 없었다. 마크업이 뿐이라 메인 CTA 처럼 를 밀어 줄 대상이 없다. 그래서 CSS 로 그린다. 절대배치라 가운데 정렬된 글자를 밀지 않는다 — 글자 위치는 그대로다. 흰 꺾쇠인 이유는 이 버튼의 글자색이 #fff 라서다. 글자와 같은 색이어야 하나의 덩어리로 읽힌다. ※ :disabled 일 때는 버튼 전체 opacity 0.4 를 그대로 물려받아 같이 흐려진다. 움직임은 아래 :not(:disabled) 가 막는다 — 못 누르는 버튼이 재촉하면 안 된다. */ .diagnosis_popup .next_btn, .diagnosis_popup .submit_btn, .diagnosis_popup .confirm_btn {position:relative;} .diagnosis_popup .next_btn::after, .diagnosis_popup .submit_btn::after, .diagnosis_popup .confirm_btn::after { content:''; position:absolute; top:50%; right:2vw; width:0.44vw; height:0.44vw; margin-top:-0.31vw; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); transition:transform var(--mo-hover) var(--mo-ease); pointer-events:none; } /* 메인 CTA 화살표와 같은 어법 — 오버하면 한 번 스윽 미끄러진다. 회전은 꺾쇠의 모양 그 자체라 이동에 그대로 달고 간다. transform 은 목록을 통째로 덮어쓰므로 rotate 를 빼먹으면 네모로 펴진다 */ @media (hover: hover) { .diagnosis_popup .next_btn:not(:disabled):hover::after, .diagnosis_popup .submit_btn:not(:disabled):hover::after, .diagnosis_popup .confirm_btn:not(:disabled):hover::after { transform:translateX(0.3vw) rotate(45deg); } } /* 약관 보기(>) — 누를 수 있는 것인데 아무 반응이 없어 장식으로 읽혔다. 1vw 짜리 화살표라 움직임을 주면 흔들리는 것처럼 보인다. 농도만 낮춘다 */ .diagnosis_popup .agree_view { transition:opacity var(--mo-hover) var(--mo-ease); } @media (hover: hover) { .diagnosis_popup .agree_view:hover {opacity:0.55;} } .diagnosis_popup .agree_view:active {opacity:0.4; transition-duration:var(--mo-press);} /* 닫기 — 이미 X 자라 회전이 가장 읽기 쉬운 반응이다 */ .diagnosis_popup > .popup_inner > .popup_close { transition:transform var(--mo-hover) var(--mo-ease); } @media (hover: hover) { .diagnosis_popup > .popup_inner > .popup_close:hover {transform:rotate(90deg);} } .diagnosis_popup > .popup_inner > .popup_close:active {transform:rotate(90deg) scale(0.9); transition-duration:var(--mo-press);} /* ═══════════════════════════════════════════════════════════ 3. 모바일 ═══════════════════════════════════════════════════════════ 모바일에는 :hover 가 없다. 누르는 순간의 반응만 남긴다 */ @media all and (max-width: 1024px) { /* 전체메뉴 — display:none → block 이라 transition 이 안 걸린다. 그래서 keyframes 하나. 항목별 지연은 두지 않는다(요구: 산만함 제거) */ #header .nav_td .list_con.on {animation:moNavPanel 0.24s ease both;} /* 팝업 진행 버튼 꺾쇠 — 모바일은 글자가 6.67vw 로 커지고 버튼도 화면 폭을 다 쓴다. 데스크탑 값(0.44vw)을 그대로 두면 2px 도 안 되는 점으로 보인다. 여기선 오버가 없으니 모양만 맞춰 둔다 */ .diagnosis_popup .next_btn::after, .diagnosis_popup .submit_btn::after, .diagnosis_popup .confirm_btn::after { right:6vw; width:2.4vw; height:2.4vw; margin-top:-1.7vw; border-top-width:2.5px; border-right-width:2.5px; } #container > .floating_con > ul > li > a { transition:transform var(--mo-press) var(--mo-ease); } #container > .floating_con > ul > li > a:active {transform:scale(0.94);} } @keyframes moNavPanel { from {opacity:0;} to {opacity:1;} } /* ══════════════════════════════════════════════════════════ 4. info03 배경 — 도트 매트릭스 (js/dotmatrix.js) 원본: Originkit "Dot Matrix" (React + ogl) → 순수 WebGL2 이식 ══════════════════════════════════════════════════════════ */ /* 캔버스 자리. style.css 가 이 섹션에 만들어 둔 z-index 층을 그대로 쓴다 — .bg_box 가 1, .contents_con 이 2 다. 캔버스를 1 에 두면 글자 뒤로 깔린다. (info03 의 .bg_box 는 마크업에서 주석 처리돼 있어 자리가 비어 있었다) 섹션에 이미 overflow:hidden 이 걸려 있어 따로 자를 필요가 없다. */ #main_con > .info03_con > .dotmatrix_bg { position:absolute; inset:0; z-index:1; pointer-events:none; } #main_con > .info03_con > .dotmatrix_bg > canvas { display:block; width:100%; height:100%; } /* 캔버스가 **실제로 살아났을 때만** 정적 도트 배경을 끈다. style.css 의 conic-gradient(20px 격자)와 겹치면 격자가 두 겹으로 보인다. WebGL2 가 없거나 셰이더가 깨지면 dotmatrix.js 가 이 클래스를 붙이지 않으므로 정적 배경이 그대로 남는다 — 화면이 비는 경우는 생기지 않는다. */ #main_con > .info03_con.dotmatrix-on {background-image:none;} /* ══════════════════════════════════════════════════════════ 5. info03 차트 막대 — 바닥에서 자라 오른다 ══════════════════════════════════════════════════════════ [왜 scaleY 가 아니라 높이인가] 막대 윗변에 border-radius 20px 이 걸려 있다. transform:scaleY 로 늘리면 그 둥근 모서리까지 같이 눌렸다 펴져서 자라는 내내 윗변이 찌그러져 보인다. 그래서 v1 과 똑같이 높이 자체를 키운다. 막대는 높이가 고정된 absolute 컨테이너(.bars_group) 안에 bottom 정렬로 들어 있어 높이가 0 에서 시작해도 바깥 레이아웃이 밀리지 않는다 (CLS 없음). [왜 커스텀 속성을 등록하는가] 등록하지 않은 커스텀 속성은 브라우저가 "그냥 문자열" 로 보기 때문에 0 에서 1 로 보간하지 않는다 — @property 로 라고 알려 줘야 CSS transition 이 프레임마다 값을 만들어 준다. 지원하지 않는 브라우저에서는 보간 없이 최종 높이로 즉시 선다(사라지지 않는다). */ @property --chart_scale { syntax: ""; inherits: false; initial-value: 1; } /* 기본값이 1 이라 이 한 줄만으로는 지금과 똑같이 보인다. style.css 를 건드리지 않고 자랄 여지만 만들어 두는 것이다 */ #main_con > .info03_con > .contents_con > .second_con .bar { height:calc(var(--bar_h) * var(--chart_scale, 1)); } /* style.css 의 transition:height 는 여기서 끈다. 높이는 --chart_scale 을 따라 이미 움직이는데 그 위에 height 트랜지션이 한 번 더 걸리면 두 애니메이션이 겹쳐 막대가 뒤늦게 따라오며 끊긴다. 모션이 살아 있을 때(.motion-ready)만 끄므로, 모션이 없으면 원래대로 남는다 */ html.motion-ready #main_con > .info03_con > .contents_con > .second_con .bar { transition:none; } /* 등장 전 — 높이 0. motion.js 가 인라인으로 transition 과 1 을 걸어 풀어 준다. 워치독이 .motion-ready 를 떼어내면 이 줄이 통째로 사라져 막대가 제 높이로 선다 */ html.motion-ready #main_con > .info03_con > .contents_con > .second_con:not(.mo-done) .bar { --chart_scale:0; }