/* ════════════════════════════════════════════════════════════════════
   휴대폰 설치 앱(PWA) 시작 화면 — 로고 화면이 그대로 브랜드 영상으로 이어진다
   [2026-09-27 또율아빠 "앱 버튼을 누르면 나오는 첫 로고 화면을 브랜드 영상으로 멋들어지게 · 천천히 · 넘어가기 버튼"]

   휴대폰이 그리는 로고 화면(매니페스트의 배경색 + 아이콘)은 영상을 넣을 수 없다.
   그래서 이 화면은 그 로고 화면과 **같은 배경색 · 같은 로고 · 같은 자리**에서 시작한다 →
   로고가 위쪽 자리로 날아가 앉고, 그 사이 영상이 떠오른다. 이음새가 보이지 않게.
   앱 코드(React)가 받아지기 전에 떠야 해서 HTML 이 바로 읽는 이 파일에 둔다 (launch-reel.js 와 짝).
   이 화면 자체가 영상의 무대라 색은 브랜드 고정값(검정·호박) — 테마 변수를 따르지 않는다.
   ════════════════════════════════════════════════════════════════════ */
html.il-launch-open,html.il-launch-open body{background:#07080D; overflow:hidden}
.il-launch{position:fixed; inset:0; z-index:100001; display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  padding:max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); overflow:hidden;
  background:#07080D; color:#fff; -webkit-font-smoothing:antialiased;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
.il-launch.is-closing{animation:il-launch-out .55s ease-in forwards}

/* ① 로고 — 휴대폰 로고 화면과 같은 자리(가운데)에서 시작해, 위쪽 이름표 자리로 날아가 앉는다 */
.il-launch-logo{position:absolute; left:50%; top:50%; z-index:3; width:min(34vw,144px); aspect-ratio:1; margin:0; border-radius:24%;
  transform:translate(-50%,-50%); transform-origin:center; pointer-events:none;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .3s ease .7s}
.il-launch-logo img{display:block; width:100%; height:100%; border-radius:inherit}
.il-launch-logo::after{content:''; position:absolute; inset:-14%; border-radius:32%; pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,174,46,.0); animation:il-launch-halo 1.1s ease-out .15s both}
.il-launch.is-live .il-launch-logo{opacity:0}

/* ② 영상 무대 — 로고 단계에서는 숨어 있다가 떠오른다 */
.il-launch-ambient{position:absolute; inset:-12%; background-size:cover; background-position:center; filter:blur(38px) saturate(1.35) brightness(.55);
  transform:scale(1.08); opacity:0; transition:opacity 1.2s ease; pointer-events:none}
.il-launch.is-live .il-launch-ambient{opacity:1; animation:il-launch-drift 16s ease-in-out infinite alternate}
.il-launch::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 45%,rgba(7,8,13,0) 0%,rgba(7,8,13,.55) 70%,rgba(7,8,13,.9) 100%)}
.il-launch-top,.il-launch-stage,.il-launch-bottom{position:relative; z-index:1; width:min(100%,560px); margin:0 auto}
.il-launch-top{display:flex; align-items:center; gap:12px; padding-top:6px}
.il-launch-badge{width:46px; height:46px; border-radius:14px; flex:none; overflow:hidden; opacity:0; transition:opacity .25s ease .72s}
.il-launch-badge img{display:block; width:100%; height:100%}
.il-launch.is-live .il-launch-badge{opacity:1}
.il-launch-brand{display:grid; gap:4px; opacity:0; transform:translateX(-8px); transition:opacity .5s ease .75s, transform .5s ease .75s}
.il-launch.is-live .il-launch-brand{opacity:1; transform:none}
.il-launch-brand strong{font-size:22px; font-weight:900; letter-spacing:-.04em; line-height:1}
.il-launch-brand small{font-size:12.5px; font-weight:650; color:rgba(255,255,255,.72); letter-spacing:-.01em}
.il-launch-stage{display:grid; gap:18px; justify-items:center; opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .8s ease .25s, transform .9s cubic-bezier(.2,.8,.2,1) .25s}
.il-launch.is-live .il-launch-stage{opacity:1; transform:none}
.il-launch-frame{position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12)}
.il-launch-video{display:block; width:100%; height:100%; object-fit:cover; background:#000}
.il-launch-line{margin:0; text-align:center; font-size:15px; font-weight:750; line-height:1.6; letter-spacing:-.02em; color:rgba(255,255,255,.9); word-break:keep-all}

/* ③ 아래 — [넘어가기] 는 로고 단계부터 보인다 (기본으로 보여 달라는 요청) */
.il-launch-bottom{display:grid; gap:12px; animation:il-launch-rise .6s .2s ease-out both}
.il-launch-status,.il-launch-progress{opacity:0; transition:opacity .5s ease .5s}
.il-launch.is-live .il-launch-status,.il-launch.is-live .il-launch-progress{opacity:1}
.il-launch-status{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.78)}
.il-launch-dot{width:8px; height:8px; border-radius:50%; background:#FFAE2E; box-shadow:0 0 0 0 rgba(255,174,46,.6); animation:il-launch-pulse 1.4s ease-out infinite}
.il-launch-dot.is-ready{background:#34D399; animation:none; box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.il-launch-progress{height:4px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.14)}
.il-launch-progress i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#FFAE2E,#F97316); transform:scaleX(0); transform-origin:0 50%; transition:transform .25s linear}
.il-launch-actions{display:grid; grid-template-columns:auto 1fr; gap:10px}
.il-launch-btn{min-height:52px; padding:0 20px; border-radius:16px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08);
  color:#fff; font:inherit; font-size:15px; font-weight:800; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.il-launch-btn[aria-pressed="true"]{border-color:rgba(255,174,46,.75); color:#FFAE2E}
.il-launch-btn.is-skip{background:#FFAE2E; border-color:#FFAE2E; color:#160F02}
.il-launch-btn:focus-visible{outline:2px solid rgba(255,255,255,.85); outline-offset:3px}

@keyframes il-launch-out{to{opacity:0; visibility:hidden}}
@keyframes il-launch-rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes il-launch-drift{from{transform:scale(1.08) translate(-2%,-1%)}to{transform:scale(1.16) translate(2%,1%)}}
@keyframes il-launch-pulse{0%{box-shadow:0 0 0 0 rgba(255,174,46,.55)}100%{box-shadow:0 0 0 10px rgba(255,174,46,0)}}
@keyframes il-launch-halo{0%{box-shadow:0 0 0 0 rgba(255,174,46,.55)}100%{box-shadow:0 0 0 26px rgba(255,174,46,0)}}

/* 가로로 누운 화면(태블릿·가로 폰) — 영상이 화면 높이를 넘지 않게 */
@media (orientation:landscape) and (max-height:600px){
  .il-launch{gap:10px}
  .il-launch-top,.il-launch-stage,.il-launch-bottom{width:min(100%,calc((100vh - 190px) * 1.7778))}
  .il-launch-line{display:none}
}
@media (prefers-reduced-motion:reduce){
  .il-launch *,.il-launch{animation:none !important; transition:none !important}
}