/* cover.css — 앱 실행 인트로 (도깨비 APP INTRO → VILLAGE ENTRY · 2026-09-18 사람 지시)
 *
 * 2026-09-17 CSS 로고+슬로건 스플래시(옛 sp-* 규칙 일체)는 걷어냈다 — 새 인트로 영상
 * 자체 안에 "도깨비" 붓글씨와 슬로건이 이미 들어있어 역할이 완전히 겹쳤다(사람 지시 3절
 * "영상 인트로 이후 기존 CSS 스플래시를 다시 보여주지 않는다"). #cover-screen 이라는
 * id·z-index:9999 규약만 그대로 둔다 — village-onboarding.js·village-guide.js 가
 * getElementById("cover-screen") 로 이 화면이 사라지는 시점을 지켜본다(MutationObserver).
 * id 를 바꾸면 그 두 파일도 고쳐야 해서 최소수정 원칙에 어긋난다.
 *
 * 2026-09-21 사람 지시 [인트로 영상 → 마을 메인 화면 전환] — 종료 전환을 "즉시 remove"에서
 * "영상 레이어만 0.3초 페이드"로 바꾼다(검은 프레임 금지). 그러려면 영상 뒤에 **영상 마지막
 * 프레임과 픽셀 동일한 정지 이미지**(.iv-cover-bg)를 처음부터 깔아 둬야 한다 — 영상이 옅어지는
 * 동안 그 밑으로 같은 그림이 그대로 있어 크로스페이드 없이도 이음매가 안 보인다. 이 PNG는
 * **인트로 전용**이다(마을 실제 배경·walkmask 좌표계는 절대 안 건드린다 — village-cover.js 주석 참고).
 *
 * 2026-09-22 [DokkaebiIntro 패키지 통합] — 인트로 CSS 는 **계속 이 파일이다.** 패키지의
 * `intro/intro.css`(#dk-intro·.dk-village-bg·.dk-world·[data-awake])는 **쓰지 않는다** —
 * .dk-village-bg 가 마을 배경을 갈아끼우고 .dk-world 가 position:fixed+translate 로 좌표를
 * 다시 잡아, 이 앱의 walkmask·village.js 좌표계와 정면으로 부딪힌다(미니미 이동·건물
 * 히트박스가 밀린다). 패키지에서 가져온 것은 연출 규칙뿐이고 그건 village-cover.js 에 있다.
 * 그 파일들은 2026-09-22 에 app\www 에서 내렸다 → `자산\구버전\2026-09-22_인트로_9x21판_미사용\`.
 * 이 파일의 #cover-screen/.iv-* 규칙은 전부 살아 있는 CSS 다. */

#cover-screen{
  position:fixed; inset:0; z-index:9999;
  background:#000;               /* 영상 로드 전 찰나 틈에도 흰/회색이 아닌 검정(영상 톤과 가장 가깝다) */
  overflow:hidden;
}
/* 2026-09-21 갱신 — 영상 레이어(.iv-video)만 0.3초 페이드아웃한다(JS 의 element.animate() 가 건다 —
   village-intro.js 와 같은 이유로 WAAPI를 쓴다, CSS transition 아님). #cover-screen 자체·.iv-cover-bg 는
   페이드 없이 그대로 있다가 영상이 다 가려진 "다음" 프레임에 한 번에 remove 된다(사람 지시 §FAIL 금지 목록 —
   흰 플래시·로딩화면·로고 재등장 금지, 검은 프레임도 금지). */

/* ── 2026-09-22 [배경 정합] 인트로 두 겹을 **마을 배경과 같은 상자**에 그린다 ──────────
   왜 화면 전체(inset:0)가 아닌가:
     마을 배경은 화면을 꽉 채우지 않는다. village-fullbleed.js 가 `.village-map` 을 원화 비율
     그대로 px 로 잡아(실측 SM-F966N: 뷰포트 411x960 안에서 534x948 @ left=-75,top=0) 좌우를
     화면 밖으로 흘려보낸다 — 즉 원화 가로 14.0%~91.0% 만 보인다. 인트로를 화면 전체에 깔면
     같은 그림이라도 **배율과 자리가 달라** 커버가 걷히는 순간 그림이 움직인다.
     그래서 상자를 배경과 똑같이 맞춘다. 그 상자를 정하는 계산(안전영역·달 보존·정문 클램프)은
     village-fullbleed.js 하나가 정본이라 여기서 다시 계산하지 않는다 — village-cover.js 가
     이미 그려진 `.village-map` 의 자리를 **읽어서** 아래 네 변수로 넘긴다(지도는 안 건드린다).
     변수가 아직 없을 때(스크립트 전)의 기본값은 옛 동작(화면 전체)이다.
   filter 를 같이 거는 이유:
     배경 <img> 에는 village.css:206 의 색보정이 걸려 있다. 영상에 같은 값을 안 걸면 그림은
     같아도 **채도·대비가 달라** 전환 순간 색이 튄다. 되돌리려면 이 두 줄만 지우면 된다.
   ---------------------------------------------------------------------------------- */
.iv-cover-bg,
.iv-video{
  position:absolute;
  left:var(--iv-map-x, 0px);
  top:var(--iv-map-y, 0px);
  width:var(--iv-map-w, 100%);
  height:var(--iv-map-h, 100%);
  object-fit:cover; object-position:center center;   /* 배경 <img> 와 같은 규칙(village.css:190) */
  filter:none;   /* 2026-09-29 마을톤조정 — 등급을 원화에 구웠다. 되돌리려면 saturate(1.18) contrast(1.06) brightness(.98) */   /* = village.css:206 낮 배경 보정 */
}
.iv-cover-bg{
  background:#000;
  z-index:0;
}
.iv-video{
  background:transparent;   /* 밑에 .iv-cover-bg(동일 마지막 프레임)가 있어 검정일 필요가 없다 */
  z-index:1;
}

/* 건너뛰기 — 실제 <button>. 우상단 · safe-area 대응 · 터치 영역은 글자보다 넉넉히(44px 이상) */
.iv-skip{
  position:absolute;
  top:calc(env(safe-area-inset-top) + 14px);
  right:calc(env(safe-area-inset-right) + 14px);
  z-index:1;
  min-width:44px; min-height:44px;
  padding:8px 16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(0,0,0,.32);
  color:rgba(255,255,255,.92);
  font-family:var(--font-ui,"Malgun Gothic",sans-serif);
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
}
.iv-skip:active{ background:rgba(0,0,0,.5); }
/* 2026-09-19 사람 지시 — 첫 화면(한지)엔 안 보인다. 둘째 화면(검은 연기)부터 village-cover.js 가 뗀다. */
.iv-skip.iv-skip--hidden{ display:none; }

@media (max-height:480px){
  .iv-skip{ padding:6px 13px; font-size:.78rem; }
}