/* ── 메인 = 인물 한 장 ─────────────────────────────────
   L: "메인화면에는 딱 저거랑 왼쪽 상단에 RabbitHole : Production"
       "메뉴만 만들고 · 컨택 영어로 · 딱 요것만 심플하게"
       "그냥 안 움직이게 3d 고정으로 살짝 입체감 있게 정도만"
   그래서 화면에 있는 건 인물 · 로고 · Menu 버튼 셋뿐이고, **아무것도 움직이지 않는다.**
   메뉴·연락처는 전부 메뉴판 안 (base.css)
   ══════════════════════════════════════════════════════ */
body.home{height:100dvh;overflow:hidden}

/* ── WebGL 판 ────────────────────────────────────────
   인물은 여기에 그려진다. 한 번 그리고 끝 (js/figure3d.js).
   아래 .stage 는 WebGL 이 못 뜰 때의 대비다 */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
html.gl-on .stage .tilt{display:none}   /* WebGL 이 뜨면 <img> 는 물러난다. .halo 는 남는다 */

/* ── 무대 (WebGL 이 못 뜰 때 쓰는 CSS 판) ─────────────
   perspective 를 여기 걸어야 아래 .tilt 의 회전이 입체로 보인다.
   1500px 은 인물 높이(≈800px)의 두 배 남짓 — 실제 사람이 2m 앞에 선 정도라
   과장 없이 입체가 붙는다 (WebGL 쪽 카메라 화각도 이 값에 맞춰 계산한다) */
.stage{
  position:fixed;inset:0;z-index:0;
  display:grid;place-items:end center;
  perspective:1500px;perspective-origin:50% 44%;
  pointer-events:none;
}

/* ── 고정 기울기 ─────────────────────────────────────
   js/figure3d.js 의 ROT_Y / ROT_X / PUSH 와 같은 값. 둘이 어긋나면
   WebGL 이 못 뜬 사람만 다른 그림을 보게 된다.
   ⚠️ CSS 는 회전할 때 선명도가 크게 깎인다 (485 → 143 실측). 그래서 여긴 대비판일 뿐이다 */
.tilt{
  transform:rotateX(1.1deg) rotateY(-4.2deg) translateZ(70px);
}

/* ⛔ 인물 뒤에 그림자판·실루엣을 깔지 마라 (2026-08-14 실패)
   이 그림은 윤곽 안쪽이 대부분 "종이 흰색"이다 = 알파가 비어 있다.
   뒤에 뭘 두면 얼굴·줄무늬·문신의 흰 부분으로 전부 비쳐서 그림이 회색으로 죽는다.
   깊이는 원근과 기울기로만 만든다 */

/* ── 인물 ────────────────────────────────────────────
   ★ 원본보다 크게 늘리지 않는다 (PLAN §2 · v9 가 여기서 반려당했다)
   원본 잉크 2095×2776 → 화면 높이가 아무리 커도 2776px 에서 멈춘다.
   ⚠️ 이 숫자는 js/figure3d.js 의 NAT_H 와 같아야 한다. 원본이 바뀌면 둘을 같이 고친다
   원본은 아랫단이 잘려 있다. 화면 바닥에 붙여야 그 절단면이 의도처럼 읽힌다.

   ★ 인물은 어디도 잘리지 않는다 (L 2026-08-15: "앨리스가 짤려보이면 안 됨")
   높이(92dvh)와 폭(88vw) 중 먼저 걸리는 쪽이 크기를 정하고 — 폰에서는 가로가 먼저 걸린다 —
   object-fit:contain 이 비율을 지킨다. 아랫변은 object-position 으로 바닥에 붙여 둔다.
   ⚠️ 이 값은 translateZ(70px) 이 원근으로 약 1.05배 확대하는 걸 이미 뺀 값이다.
      WebGL 판(js/figure3d.js)은 모서리를 실제로 투영해서 재므로 여기보다 정확하다 */
.fig{
  display:block;
  height:min(92dvh,2776px);width:auto;max-width:88vw;
  object-fit:contain;object-position:50% 100%;
  /* ⛔ 여기엔 마스크를 걸지 않는다 — L: "메인은 그냥 그대로 가면 돼" (2026-08-15 밤).
     회사소개의 앨리스(css/page.css 의 .plate)만 아랫단을 흘린다 */
  /* ⛔ drop-shadow 를 쓰지 마라 (2026-08-14 실측)
     drop-shadow 는 알파 뒤에 그림자를 깔기 때문에, 알파가 빈 얼굴·줄무늬의
     흰 부분으로 회색이 새어 들어온다.
     실측: 뺨 밝기 217 → 194 (종이 247), 선명도 485 → 317. 두 번 손해다 */
}

/* 인물 뒤 아주 옅은 빛. 종이에 스탠드를 비춘 정도 — 이것도 고정이다 */
.halo{
  position:absolute;bottom:4vh;z-index:-1;
  width:min(96vw,1000px);aspect-ratio:1;
  transform:translate3d(0,0,-260px);
  background:radial-gradient(closest-side,
    rgba(13,12,11,.08) 0%,rgba(13,12,11,.038) 44%,rgba(13,12,11,0) 74%);
}
/* 다크에선 같은 빛이 반대로 서야 한다 (검정 위 검은 후광은 안 보인다) */
:root[data-theme="dark"] .halo{background:radial-gradient(closest-side,
  rgba(247,245,240,.07) 0%,rgba(247,245,240,.03) 44%,rgba(247,245,240,0) 74%)}

/* 화면에 늘 보이는 글자는 로고와 Menu 버튼 둘뿐이다.
   연락처는 메뉴판 안으로 들어갔다 (base.css) — L: "요 아래 컨택 들어가는 게 마음에 안 드네" */

/* ── 좁은 화면 ─────────────────────────────────────
   폰은 세로가 남고 가로가 모자란다 (원본 비 0.74) → 폭이 크기를 정한다 */
@media (max-width:640px){
  .fig{height:min(92dvh,2776px);max-width:84vw}
}