/* 일리애드 GEO/AIO — 손으로 관리하는 보정 CSS * * build_css.py 가 생성하는 파일들과 달리 이 파일은 재생성되지 않는다. * Astro 원본이 에 의존하던 규칙처럼, .geo-aio-page 네임스페이스 * 안으로 넣으면 동작하지 않는 것들만 여기에 둔다. * geo_head() 가 생성 CSS 뒤에 마지막으로 로드한다. */ /* ------------------------------------------------------------------ * 샘플 리포트 모달이 열렸을 때 뒤 페이지 스크롤 잠금 * * 원본은 `body.report-dialog-open{overflow:hidden}` 이었다. * 네임스페이스 변환기가 body 를 .geo-aio-page 로 바꾸는데, JS 는 클래스를 * document.body 에 붙이므로 서로 어긋나 잠금이 걸리지 않았다. * 이 규칙은 반드시 body 에 있어야 하므로 네임스페이스 밖에 둔다. * (클래스가 붙은 동안에만 적용되고, 그 클래스는 GEO 스크립트만 붙인다) * ------------------------------------------------------------------ */ body.report-dialog-open, html:has(body.report-dialog-open) { overflow: hidden; } /* 모달 내부 스크롤 영역이 화면을 넘지 않도록 확실히 잡아 준다 */ .geo-aio-page .report-dialog__scroll, dialog.report-dialog .report-dialog__scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------ * 스크롤 등장 모션 · 제목 모션 되살리기 * * 원본 Astro CSS 는 `.motion-ready [data-reveal]` 처럼 클래스 하나로 * 시작한다. 이 클래스는 JS 가 에 붙인다 * (geo-service.js: document.documentElement.classList.add('motion-ready')). * * 그런데 네임스페이스 변환기가 앞에 `.geo-aio-page ` 를 붙이면서 * .geo-aio-page .motion-ready [data-reveal] * 이 됐다. 이러면 motion-ready 가 래퍼 "안쪽"에 있어야 하는데 실제로는 * 래퍼보다 바깥()에 있으므로 이 규칙은 절대 걸리지 않는다. * 그 결과 [data-reveal] / [data-title-motion] 요소가 처음부터 최종 상태로 * 그려져 등장 모션이 통째로 사라져 있었다. * (위의 report-dialog-open 과 똑같은 유형의 어긋남이다) * * 조상 관계를 바로잡아 다시 선언한다. 선언 내용은 geo-common.css 의 * 것을 그대로 옮긴 것이므로, 생성 CSS 가 바뀌면 여기도 함께 갱신해야 한다. * ------------------------------------------------------------------ */ html.motion-ready .geo-aio-page [data-reveal] {opacity:0;transform:translateY(var(--motion-distance));transition:opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);transition-delay:calc(var(--reveal-delay,0s) + .12s)} html.motion-ready .geo-aio-page [data-reveal=soft] {transform:translateY(18px)} html.motion-ready .geo-aio-page [data-reveal].is-visible {opacity:1;transform:translateY(0)} html.title-motion-ready .geo-aio-page [data-title-motion]:not([data-title-motion=stagger]) {opacity:0} html.title-motion-ready .geo-aio-page [data-title-motion=stagger] [data-title-part] {opacity:0;transform:translateY(var(--title-rise-distance))} html.title-motion-ready .geo-aio-page [data-title-motion=stagger].is-title-visible [data-title-part] {animation:.86s cubic-bezier(.16,1,.3,1) both title-stagger-rise;animation-delay:calc(var(--title-part-index,0) * var(--title-stagger-step))} html.title-motion-ready .geo-aio-page [data-title-motion=rise].is-title-visible {animation:.76s cubic-bezier(.16,1,.3,1) both title-rise-settle} html.title-motion-ready .geo-aio-page [data-title-motion=clip] {clip-path:inset(0 0 100%);transform:translateY(18px)} html.title-motion-ready .geo-aio-page [data-title-motion=clip].is-title-visible {animation:.86s cubic-bezier(.16,1,.3,1) both title-clip-reveal} html.title-motion-ready .geo-aio-page [data-title-motion=clip].is-title-visible:after {animation:.52s cubic-bezier(.16,1,.3,1) .42s both title-line-draw} html.title-motion-ready .geo-aio-page [data-title-motion=focus].is-title-visible {animation:.78s cubic-bezier(.16,1,.3,1) both title-focus-in} html.title-motion-ready .geo-aio-page [data-title-motion=wipe] {clip-path:inset(0 100% 0 0);transform:translate(-14px)} html.title-motion-ready .geo-aio-page [data-title-motion=wipe].is-title-visible {animation:.82s cubic-bezier(.16,1,.3,1) both title-wipe-in} html.title-motion-ready .geo-aio-page [data-title-motion=tilt] {transform-origin:50% 100%;transform:perspective(640px)rotateX(26deg)translateY(26px)} html.title-motion-ready .geo-aio-page [data-title-motion=tilt].is-title-visible {animation:.84s cubic-bezier(.16,1,.3,1) both title-tilt-settle} @media (width<=680px) { html.title-motion-ready .geo-aio-page [data-title-motion=stagger].is-title-visible [data-title-part] {animation-duration:.7s} html.title-motion-ready .geo-aio-page [data-title-motion=rise].is-title-visible {animation-duration:.64s} html.title-motion-ready .geo-aio-page [data-title-motion=clip].is-title-visible {animation-duration:.72s} html.title-motion-ready .geo-aio-page [data-title-motion=focus].is-title-visible {animation-duration:.66s} html.title-motion-ready .geo-aio-page [data-title-motion=wipe].is-title-visible {animation-duration:.7s} html.title-motion-ready .geo-aio-page [data-title-motion=tilt].is-title-visible {animation-duration:.72s} } /* 칼럼 본문 유튜브 영상 (2026-09-15) — {{youtube:ID|제목}} → geo_markdown.inc */ .geo-aio-page .article-content .video-embed { margin: 2.25rem 0; } .geo-aio-page .article-content .video-embed__frame { position: relative; padding-top: 56.25%; border-radius: .9rem; overflow: hidden; background: #000; } .geo-aio-page .article-content .video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .geo-aio-page .article-content .video-embed figcaption { margin-top: .6rem; font-size: .85rem; color: var(--color-muted, #667085); }