/* ══════════════════════════════════════════════════════════════
   시술 페이지 모션 — 임시 도구

   1부 · 블록 모션 = A(올라오기) 고정
     · 트리거 92% → 85% (다 보이고 나서 움직이던 것을 없앰)
     · 지속 0.8초 → 0.55초
     · 인라인 계단식 지연(최대 450ms) 제거
   2부 · 배경 모션 = 5안 스위처

   ⚠ 모션은 CSS 가 아니라 JS(Web Animations API)로 건다. 이유는 아래를 읽어라.
   ══════════════════════════════════════════════════════════════ */


/* 중립화 — 이 블록이 핵심이다.
   테마는 같은 요소에 opacity 800ms 전환을 걸어두고 매 프레임 되살린다.
   CSS 캐스케이드에서 **전환(transition)은 author !important 보다 위**라서,
   `opacity:0 !important` 를 써도 전환값에 밀린다 — 실제로 밀렸다.
   그래서 전환·애니메이션을 여기서 끊어내고, 모션은 WAAPI 로 건다.
   WAAPI 애니메이션은 테마의 일반 선언보다 위에 있어 특정도 싸움 자체가 없어진다. */
.bml-t{
  transition:none !important;
  animation:none !important;
}
/* ⚠ will-change 를 여기에 박아두면 안 된다 — 블록 수십 개가 **처음부터 끝까지**
   합성 레이어로 승격된 채 남는다. 스크롤 내내 GPU 가 그 레이어를 전부 들고 간다.
   재생 직전에 JS 가 걸고, 끝나면 JS 가 뗀다. (2026-09-16) */


/* ── 배경 레이어 ───────────────────────────────────────────────
   원본 마크업은 고치지 않는다. 배경 사진과 같은 그림을 든 레이어를
   맨 앞 자식으로 끼워 넣고 그것만 움직인다.
     · 히어로: ::after(사진, z=0) 위 / ::before(어둠 막, z=1) 아래 → 막은 그대로 산다
     · d2-photo: 자기 배경 위 / 내용 .wrap(z=2) 아래
   inset:-8% 는 패럴랙스가 가장자리를 비우지 않게 하는 여유다. */
.bml-bgl{
  position:absolute; inset:-8%;
  background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
  z-index:0; pointer-events:none;
  /* ⚠ will-change 상시 금지 — 이 레이어는 3500x1500 급이다. 필터가 걸린 채
     승격돼 있으면 스크롤할 때마다 그 크기의 필터 패스를 다시 돈다.
     재생 직전에 JS 가 걸고, 끝나면 JS 가 뗀다. (2026-09-16) */
}
/* 레이어가 밖으로 새지 않도록. 히어로는 이미 overflow:hidden 이다. */
/* ⚠ 모션 레이어를 뺀 뒤에도 이 규칙은 남겨 둔다 (2026-09-19).
   `background-attachment:fixed`(haneul.css 826)는 배경 크기를 **요소가 아니라 화면**
   기준으로 잡는다. 그러면 `cover` 가 화면 비율에 맞춰 사진을 다시 키워 좌우를 자른다.
   레이어가 없어진 지금은 이 한 줄이 "사진을 제 크기로 그리게" 하는 역할을 한다. */
html[data-bmlbg]:not([data-bmlbg="off"]) #secD .d2-photo{
  overflow:hidden;
  /* 모션 레이어가 이 칸의 배경을 **완전히 덮는다**(inset:-8%). 그런데 원래 배경에는
     `background-attachment:fixed` 가 걸려 있어(haneul.css 1188), 보이지도 않는 그림을
     스크롤할 때마다 다시 칠하고 있었다. 레이어가 사는 동안에는 꺼 둔다.
     — 모션을 끄면(off·감속모드) 규칙이 풀려 원래 패럴랙스가 그대로 돌아온다. (2026-09-16) */
  background-attachment:scroll;
}

/* E · 배경 고정 — 여유(-8%)가 있으면 화면 기준 정렬이 어긋난다 */
html[data-bmlbg="e"] .bml-bgl{ inset:0; background-attachment:fixed; }

/* ── 여유(-8%)는 **움직이는 안에만** 필요하다 (2026-09-19) ──────────
   -8% 는 레이어를 박스보다 상하좌우 8%씩 크게 깐다. 패럴랙스(A)가 위아래로
   움직일 때 가장자리가 비지 않게 하려는 여유다.

   그런데 확정된 안은 **B+C(어둠에서 + 켄번즈)** 로, 자리를 옮기는 동작이 전혀 없다
   (filter 와 scale 뿐이다. scale 은 가운데에서 커지므로 가장자리를 비우지 않는다).
   D(클립)도 안쪽으로만 깎는다. 즉 이 셋에서 -8% 는 **쓰이지 않으면서
   사진만 키워 좌우를 잘라먹고 있었다.**

   실측(1900px 화면, 3400x1466 사진): 좌우 안 보이는 비율
     cover 만        16.4%
     -8% 까지        36.7%   ← 20%p 가 순전히 이 여유 탓
   움직이지 않는 안에서는 0 으로 둔다. A(패럴랙스)만 -8% 를 유지한다. */
html[data-bmlbg="b"]  .bml-bgl,
html[data-bmlbg="c"]  .bml-bgl,
html[data-bmlbg="bc"] .bml-bgl,
html[data-bmlbg="d"]  .bml-bgl{ inset:0; }
/* ⚠ 단, 패럴랙스가 켜져 있으면(기본 ⑤) lab.js 가 레이어에 inset 을 **인라인으로** 쓴다.
   인라인은 어떤 선택자보다 세므로 위 규칙은 그때 무시된다 — 좌우 여유를 없애는 처리는
   lab.js 의 `파라적용()` 안에 함께 넣어 두었다. 여기만 고치면 아무 일도 일어나지 않는다. */

/* 원본 — 레이어를 완전히 숨긴다 */
html[data-bmlbg="off"] .bml-bgl{ display:none; }

@media (prefers-reduced-motion: reduce){
  .bml-bgl{ display:none !important; }
  /* 레이어가 사라지면 **원래 배경이 다시 보인다.** 그러면 위에서 꺼 둔 패럴랙스도
     같이 돌려놔야 원본과 같은 화면이 된다. 이걸 빼먹어 캡처가 미세하게 어긋났다. */
  html[data-bmlbg]:not([data-bmlbg="off"]) #secD .d2-photo{ background-attachment:fixed; }
}

/* ── 패럴랙스 시안 스위처 ──────────────────────────────────────
   눈 수술 페이지에서만 뜬다(html[data-bmlpara-switch]).
   고르는 동안만 쓰는 장치다 — 정하고 나면 이 블록과 스위처 코드를 걷어낸다. */
.bml-para-sw{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; flex-direction:column; gap:6px;
  padding:14px 14px 12px; border-radius:12px;
  background:rgba(17,17,17,0.92); color:#fff;
  font-family:'Noto Sans','Noto Sans KR',sans-serif; font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.bml-para-sw b{ font-size:12px; letter-spacing:0.02em; opacity:0.75; font-weight:500; margin-bottom:2px; }
.bml-para-sw button{
  appearance:none; border:1px solid rgba(255,255,255,0.22); background:transparent;
  color:#fff; padding:7px 12px; border-radius:8px; cursor:pointer;
  font-size:13px; text-align:left; transition:background .15s, border-color .15s;
}
.bml-para-sw button:hover{ background:rgba(255,255,255,0.12); }
.bml-para-sw button.on{ background:#fff; color:#111; border-color:#fff; font-weight:700; }
.bml-para-sw i{ font-style:normal; font-size:11px; opacity:0.5; margin-top:4px; }
@media(max-width:768px){ .bml-para-sw{ right:10px; bottom:10px; font-size:12px; } }