/* 랜딩 오프닝 (F-1105-02 · opening.js) — 우주 → 망원경 초점 → 구름 뚫기 → 엔진 바다 비행 → 첫 화면. 오프닝을 안 할 때(class 없음) = 이 파일은 아무것도 바꾸지 않음 */
/* 덮개: opening.js가 html.op을 단 순간부터(본문 첫 그리기 전) 캔버스가 붙을 때까지 첫 화면이 비치지 않게 */
html.op body::before { content: ""; position: fixed; inset: 0; z-index: 9000; background: #02030b; }
/* 첫 화면 제목 글자 솟기 = 오프닝이 끝날 때 시작 (글은 DOM에 처음부터 있음 — 보이는 것만 늦음) */
html.op .kin .c { animation-play-state: paused; }
/* 쇼윈도 엔진을 화면 가득 (자리는 그대로 — 상자 흐름 안 바뀜) · 쇼윈도 말풍선·조작 숨김 */
html.op-live .live__clip { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; block-size: 100lvh; z-index: 9001; opacity: 1; transition: opacity 1s ease; }
html.op-live .live__box { z-index: 9001; } /* 상자가 쌓임 맥락(isolation)이라 상자째 덮개 위로 */
html.op-live .live__fx, html.op-live .live__view { visibility: hidden; }
html.op-out .live__clip { opacity: 0; }
.op-layer { position: fixed; inset: 0; z-index: 9002; touch-action: pan-y; transition: opacity 1s ease; }
.op-layer__cv { display: block; inline-size: 100%; block-size: 100%; }
html.op-out .op-layer { opacity: 0; pointer-events: none; }
.op__skip { position: fixed; z-index: 9003; inset-inline-end: max(16px, env(safe-area-inset-right)); inset-block-end: max(20px, env(safe-area-inset-bottom)); min-block-size: 48px; padding: 0 20px; border: 1px solid #ffffff59; border-radius: 999px; background: #0612248c; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); transition: opacity .3s; }
.op__skip:hover, .op__skip:focus-visible { background: #0b2a48d9; border-color: #fff; outline: none; }
.op__skip:focus-visible { box-shadow: 0 0 0 3px #ffd24a; }
html.op-out .op__skip { opacity: 0; pointer-events: none; }
html.op-fast .op-layer, html.op-fast .live__clip { transition-duration: .4s; }