/* 앱 시작 화면(스플래시) — 2026-10-24 MD1-20261024-01 B안(생동감 있는 안) + 흰 연기 2차(B2), 시안: 🎬 콘텐츠제작
   - 재생 여부는 pwa.js 가 첫 그리기 전에 <html data-splash="play|skip"> 로 정한다(세션 첫 진입 1회, sessionStorage 'cntd.splash.seen').
     play 가 아니면 .splash 는 display:none — 애니메이션·텍스처 요청이 일어나지 않는다(텍스처 url 도 play 일 때만 적용).
   - 끝·건너뛰기·제거는 splash.js(.is-done → 0.2초 페이드 → 제거). 스크립트가 실패해도 3.6초에 스스로 사라진다(splash-failsafe).
   - 움직임은 transform·opacity 만. filter·blur 없음(저사양 휴대폰). 색 값은 이 화면 전용이라 .splash 블록의 변수로 둔다. */
.splash{display:none}
:root[data-splash="play"] .splash{
  --sp-a:#2E6CE6;--sp-b:#0047A0;--sp-c:#082D6B;--orb-red:rgba(232,65,77,.55);--orb-sky:rgba(140,190,255,.55);--orb-white:rgba(255,255,255,.22);
  --sp-text:#FFFFFF;--sp-sub:rgba(255,255,255,.6);--sp-plate:#FFFFFF;--sp-plate-shadow:0 18px 40px rgba(3,20,60,.35),0 0 0 1px rgba(255,255,255,.4);
  --sp-ring:rgba(255,255,255,.55);--sp-dot:rgba(255,255,255,.85);--sp-shine:rgba(255,255,255,.75);
  display:grid;place-items:center;position:fixed;inset:0;z-index:2147483000;overflow:hidden;color:var(--sp-text);
  background:linear-gradient(160deg,var(--sp-a) 0%,var(--sp-b) 48%,var(--sp-c) 100%);
  font-family:var(--font-sans);touch-action:none;-webkit-user-select:none;user-select:none;
  transition:opacity .2s ease;animation:splash-failsafe .2s ease 3.6s forwards
}
:root[data-splash="play"][data-theme="dark"] .splash{--sp-a:#13275A;--sp-b:#0B1A3D;--sp-c:#060C1C;--orb-red:rgba(255,122,132,.28);--orb-sky:rgba(110,168,254,.32);--orb-white:rgba(255,255,255,.06);
  --sp-sub:rgba(168,177,190,.75);--sp-plate:#F2F4F7;--sp-plate-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
@keyframes splash-failsafe{to{opacity:0;visibility:hidden}}

/* 빛 덩어리: 미리 흐린 radial-gradient(블러 필터 없음), 크기·투명도만 움직임 */
.splash__orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity;animation:splash-orb 1.4s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.splash__orb--red{width:120vw;aspect-ratio:1;left:-55vw;bottom:-30vh;background:radial-gradient(closest-side,var(--orb-red),transparent);--d:.5s}
.splash__orb--sky{width:110vw;aspect-ratio:1;right:-50vw;top:-22vh;background:radial-gradient(closest-side,var(--orb-sky),transparent);--d:.55s}
.splash__orb--white{width:80vw;aspect-ratio:1;left:10vw;top:22vh;background:radial-gradient(closest-side,var(--orb-white),transparent);--d:.65s}
.splash__center{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;transform:translateY(-4vh)}
/* 로고 판: 0.8초부터 살짝 튀어 오름(오버슈트) */
.splash__plate{position:relative;padding:20px 24px;border-radius:26px;background:var(--sp-plate);box-shadow:var(--sp-plate-shadow);overflow:hidden;
  --d:.8s;animation:splash-pop .62s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d)}
.splash__plate img{display:block;width:220px;max-width:62vw;height:auto}
/* 빛줄기: 로고 판 위를 한 번 지나감 */
.splash__plate::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,var(--sp-shine),transparent);transform:translateX(-160%) skewX(-12deg);
  --d:1.12s;animation:splash-shine .55s ease-out both;animation-delay:var(--d)}
/* 빛 고리: 로고 판 바깥으로 한 번 퍼짐 */
.splash__ring{position:absolute;left:50%;top:0;width:290px;height:120px;margin-left:-145px;border-radius:32px;border:2px solid var(--sp-ring);opacity:0;pointer-events:none;
  --d:.95s;animation:splash-ring .7s ease-out both;animation-delay:var(--d)}
.splash__name{margin:0;font-size:18px;font-weight:700;letter-spacing:.01em;--d:1.05s;animation:splash-up .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.splash__dots{display:flex;gap:6px;--d:1.25s;animation:splash-up .4s ease-out both;animation-delay:var(--d)}
.splash__dots i{width:6px;height:6px;border-radius:50%;background:var(--sp-dot);animation:splash-dot 1s ease-in-out infinite}
.splash__dots i:nth-child(2){animation-delay:.15s}.splash__dots i:nth-child(3){animation-delay:.3s}
.splash__foot{position:absolute;left:0;right:0;bottom:calc(36px + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:12px;letter-spacing:.14em;color:var(--sp-sub);
  --d:1.1s;animation:splash-up .5s ease-out both;animation-delay:var(--d)}
@keyframes splash-orb{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes splash-pop{0%{opacity:0;transform:scale(.8) translateY(14px)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes splash-shine{to{transform:translateX(330%) skewX(-12deg)}}
@keyframes splash-ring{0%{opacity:0;transform:scale(.92)}12%{opacity:.8}100%{opacity:0;transform:scale(1.25)}}
@keyframes splash-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes splash-dot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}

/* ===== 흰 연기(텍스처 5겹, 시안 smoke2.css) =====
   L1 줄기 1.6초 · L4 덮개 1.45초 · L2 덩어리 1.35초 · L3 소용돌이 1.15초 · L5 가는 줄기 0.9초, 총 23개.
   0~0.55초 피어오름 → 0.6~0.95초 화면 전체를 덮음 → 0.95~1.6초 위로 흩어지며 걷힘. 텍스처(합계 약 44KB)는 작게 한 번 그린 뒤 확대만 한다. */
.smoke2{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;contain:strict}
:root[data-theme="dark"] .smoke2{opacity:.6} /* 다크: 흰 연기를 옅게 → 남색 배경 위에서 회청색으로 보임 */
.smoke2 i{position:absolute;display:block;opacity:0;background:center/100% 100% no-repeat;will-change:transform,opacity;animation-fill-mode:both;animation-delay:var(--d,0s)}
:root[data-splash="play"] .smk-l1 i,:root[data-splash="play"] .smk-l5 i{background-image:url("/splash/smoke-plume.webp")}
:root[data-splash="play"] .smk-l2 i,:root[data-splash="play"] .smk-l4 i{background-image:url("/splash/smoke-puff.webp")}
:root[data-splash="play"] .smk-l3 i{background-image:url("/splash/smoke-swirl.webp")}

/* L1 연기 줄기(가장 느림): 화면 아래에서 세로 기둥이 솟아 위로 퍼짐 */
.smk-l1 i{bottom:-30vh;left:var(--x);width:52vw;height:115vh;margin-left:-26vw;transform-origin:50% 100%;
  animation-name:smk-plume;animation-duration:1.6s;animation-timing-function:cubic-bezier(.25,.6,.35,1)}
.smk-l1 i:nth-child(1){--x:22%;--d:0s;--r:-6deg}
.smk-l1 i:nth-child(2){--x:55%;--d:.04s;--r:3deg}
.smk-l1 i:nth-child(3){--x:84%;--d:.08s;--r:8deg}
@keyframes smk-plume{
  0%{opacity:0;transform:translateY(25vh) scale(.7,.6) rotate(calc(var(--r) * -.5))}
  15%{opacity:.78}
  55%{opacity:.7;transform:translateY(-30vh) scale(1.5,1.3) rotate(var(--r))}
  100%{opacity:0;transform:translateY(-75vh) scale(2.2,1.6) rotate(calc(var(--r) * 2))}
}
/* L4 덮개 덩어리: 큰 구름 4개가 가운데로 모여 화면을 덮었다가 흩어짐 */
.smk-l4 i{left:var(--x);top:var(--y);width:120vw;aspect-ratio:1;margin:-60vw 0 0 -60vw;
  animation-name:smk-cover;animation-duration:1.45s;animation-timing-function:cubic-bezier(.3,.55,.3,1)}
.smk-l4 i:nth-child(1){--x:30%;--y:62%;--d:.16s;--r:20deg}
.smk-l4 i:nth-child(2){--x:72%;--y:48%;--d:.2s;--r:-25deg}
.smk-l4 i:nth-child(3){--x:40%;--y:30%;--d:.26s;--r:30deg}
.smk-l4 i:nth-child(4){--x:62%;--y:82%;--d:.22s;--r:-15deg}
@keyframes smk-cover{
  0%{opacity:0;transform:translateY(60vh) scale(.5) rotate(0)}
  35%{opacity:1;transform:translateY(0) scale(1.15) rotate(calc(var(--r) * .5))}
  55%{opacity:1;transform:translateY(-6vh) scale(1.35) rotate(var(--r))}
  100%{opacity:0;transform:translateY(-38vh) scale(2.1) rotate(calc(var(--r) * 1.6))}
}
/* L2 뭉게 덩어리: 크기·회전이 다른 덩어리 6개가 겹치며 솟음 */
.smk-l2 i{bottom:-30vh;left:var(--x);width:var(--s);aspect-ratio:1;margin-left:calc(var(--s) / -2);
  animation-name:smk-billow;animation-duration:1.35s;animation-timing-function:cubic-bezier(.22,.6,.3,1)}
.smk-l2 i:nth-child(1){--x:10%;--s:70vw;--d:.02s;--r:40deg;--dx:-8vw}
.smk-l2 i:nth-child(2){--x:48%;--s:85vw;--d:.06s;--r:-30deg;--dx:2vw}
.smk-l2 i:nth-child(3){--x:90%;--s:72vw;--d:.04s;--r:35deg;--dx:8vw}
.smk-l2 i:nth-child(4){--x:30%;--s:60vw;--d:.14s;--r:-45deg;--dx:-5vw}
.smk-l2 i:nth-child(5){--x:70%;--s:64vw;--d:.16s;--r:50deg;--dx:6vw}
.smk-l2 i:nth-child(6){--x:50%;--s:55vw;--d:.24s;--r:-40deg;--dx:0vw}
@keyframes smk-billow{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  16%{opacity:1}
  55%{opacity:1;transform:translate(var(--dx),-62vh) scale(1.45) rotate(var(--r))}
  100%{opacity:0;transform:translate(calc(var(--dx) * 2),-115vh) scale(2.1) rotate(calc(var(--r) * 1.8))}
}
/* L3 소용돌이: 휘감는 결의 덩어리가 반대 방향으로 돌며 솟음 */
.smk-l3 i{bottom:-22vh;left:var(--x);width:var(--s);aspect-ratio:1;margin-left:calc(var(--s) / -2);
  animation-name:smk-swirl;animation-duration:1.15s;animation-timing-function:cubic-bezier(.2,.65,.3,1)}
.smk-l3 i:nth-child(1){--x:20%;--s:58vw;--d:.08s;--r:-90deg;--dx:4vw}
.smk-l3 i:nth-child(2){--x:62%;--s:66vw;--d:.12s;--r:80deg;--dx:-6vw}
.smk-l3 i:nth-child(3){--x:85%;--s:50vw;--d:.2s;--r:-70deg;--dx:-4vw}
.smk-l3 i:nth-child(4){--x:38%;--s:54vw;--d:.28s;--r:100deg;--dx:6vw}
.smk-l3 i:nth-child(5){--x:5%;--s:48vw;--d:.32s;--r:-80deg;--dx:8vw}
@keyframes smk-swirl{
  0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}
  18%{opacity:.9}
  60%{opacity:.9;transform:translate(var(--dx),-70vh) scale(1.5) rotate(var(--r))}
  100%{opacity:0;transform:translate(calc(var(--dx) * 1.8),-120vh) scale(2) rotate(calc(var(--r) * 1.7))}
}
/* L5 가는 줄기(가장 빠름): 먼저 치솟아 흔적만 남기고 사라짐 */
.smk-l5 i{bottom:-10vh;left:var(--x);width:20vw;height:55vh;margin-left:-10vw;transform-origin:50% 100%;
  animation-name:smk-wisp;animation-duration:.9s;animation-timing-function:cubic-bezier(.3,.6,.3,1)}
.smk-l5 i:nth-child(1){--x:14%;--d:0s;--r:-10deg}
.smk-l5 i:nth-child(2){--x:38%;--d:.05s;--r:6deg}
.smk-l5 i:nth-child(3){--x:60%;--d:.02s;--r:-4deg}
.smk-l5 i:nth-child(4){--x:80%;--d:.08s;--r:12deg}
.smk-l5 i:nth-child(5){--x:95%;--d:.1s;--r:-8deg}
@keyframes smk-wisp{
  0%{opacity:0;transform:translateY(10vh) scale(.6,.5) rotate(0)}
  20%{opacity:.55}
  60%{opacity:.4;transform:translateY(-55vh) scale(1.4,1.3) rotate(var(--r))}
  100%{opacity:0;transform:translateY(-110vh) scale(2,1.6) rotate(calc(var(--r) * 2))}
}

/* 끝·건너뛰기: 연기는 바로 숨기고 화면 전체 0.2초 페이드아웃. 투명해진 뒤에도 요소는 남아(pointer-events 그대로) 건너뛴 터치를
   손을 뗄 때까지 + 그 click 까지 받고 나서 splash.js 가 지운다 — 길게 눌러도 아래 입력칸에 포커스·키보드가 가지 않음 */
:root[data-splash="play"] .splash.is-done{opacity:0}
.splash.is-done .smoke2{display:none}
/* 움직임 줄이기: 연기·등장 효과 없이(style.css 가 모든 animation 을 끔) 로고를 바로 보이고, 끝날 때 페이드만 한다 */
@media (prefers-reduced-motion:reduce){
  .smoke2{display:none}
  :root[data-splash="play"] .splash{transition:opacity .2s ease!important;animation:splash-failsafe .2s ease 3.6s forwards!important}
}