/* ============================================================
   인생샷 웹 데모 — 사이트 공통 영역(헤더·앱 메뉴 막대·푸터)과 앱 화면을 함께 놓는 틀.

   데모 자체(/products/lifeshot/demo/demo.css)는 앱 화면을 폰 한 칸 크기로 그대로 옮긴 것이라 손대지 않는다.
   - 소개 화면: 사이트의 한 페이지처럼 헤더 아래로 흐르고 푸터로 끝난다.
   - 카메라·결과 화면: 시작하면 전처럼 화면을 꽉 채운다(헤더 위를 덮는다).
     카메라 배치는 demo.js 가 .app 의 크기로 계산하므로, 그 크기를 화면 전체로 되돌려 주는 것이 핵심이다.
   어느 화면인지는 demo.js 가 <html data-demo-screen> 에 적는다. 스크립트가 돌기 전에는 처음 값(intro)이다.
   선택자에 html[data-demo-screen] 을 붙여 demo.css 보다 구체적이게 했다(이 파일이 먼저 불린다).
   ============================================================ */

/* ------------------------------------------------------------ 소개 화면 */
html[data-demo-screen="intro"],
html[data-demo-screen="intro"] body { height: auto; overflow: visible; overscroll-behavior: auto; }
html[data-demo-screen="intro"] .app { height: auto; overflow: visible; }
html[data-demo-screen="intro"] .screen-intro { position: static; overflow: visible; }
html[data-demo-screen="intro"] .intro-scroll { height: auto; overflow: visible; padding: 36px 24px 64px; }

/* ------------------------------------------------------------ 카메라·결과 화면 */
html[data-demo-screen="cam"] body,
html[data-demo-screen="shot"] body { overflow: hidden; }
/* 폰 한 칸(.app) 바깥도 앱 바탕으로 덮어 뒤쪽 헤더·글이 비치지 않게 한다 */
html[data-demo-screen="cam"] body::before,
html[data-demo-screen="shot"] body::before { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--ground); }
html[data-demo-screen="cam"] .app,
html[data-demo-screen="shot"] .app { position: fixed; inset: 0; z-index: 100; }