/* 보당당 입장 장면 (10/27 저녁 개정: 끊김 없는 2초). 공개 사이트와 설계사 앱이 같이 쓴다. 짝 splash.js, 시험 도구/시험_입장장면.cjs.
   앱 쪽은 한 문서 안에서 2.0초(세션 두 번째부터 1.0초). 사이트 쪽은 입구 단추를 누르면 같은 모양의 정지 덮개(.sp-site)로 덮고 바로 앱으로 간다.
   CRIT 표시와 END 표시 사이(바로 아래 한 구역)는 build.mjs 가 앱 쪽 머리에 그대로 인라인한다(첫 그리기부터 초록 + 같은 자리). 2KB 를 넘기지 말 것.
   움직이는 건 opacity·translate·rotate·scale·transform 뿐이다. */
/*CRIT*/
:root{--spbg:radial-gradient(70% 42% at 50% 20%,rgba(255,255,255,.17),rgba(255,255,255,0) 70%),radial-gradient(80% 45% at 50% 105%,rgba(143,211,182,.22),rgba(143,211,182,0) 70%),linear-gradient(170deg,#0A7352 0%,#08503B 55%,#06382A 100%);--ms:2000ms}
html.sp-s{--ms:1000ms}
html:not(.sp-on) .sp-app{display:none}
.sp-hi{display:none}
.sp{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:var(--spbg);color:#fff;font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;touch-action:none}
.sp-core{position:relative;display:flex;flex-direction:column;align-items:center;width:min(86%,360px);margin-top:-5vh;text-align:center}
.sp-mark{display:block;width:84px;height:84px}
.sp-name{margin-top:22px;font-size:26px;font-weight:700;line-height:1.3;letter-spacing:-.03em}
.sp-msg{min-height:51px;margin:10px 0 0;font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.02em;color:rgba(255,255,255,.86)}
.sp-bar{display:block;width:min(176px,54%);height:3px;margin-top:34px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.22)}
.sp-bar u{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
@media (min-width:700px){.sp-name{font-size:32px}.sp-msg{min-height:57px;font-size:19px}.sp-mark{width:100px;height:100px}}
/*END*/

/* 걷히는 방식: 덮개가 옅어지며 걷힌다(300ms). 앱 쪽은 스크립트가 못 돌아도 3.2초 뒤 CSS 만으로 덮개와 초록 바탕이 걷힌다 */
.sp{overscroll-behavior:contain;transition:opacity .3s ease}
.sp-out{opacity:0;pointer-events:none}
.sp-app{animation:sp-gone 1ms linear 3.2s forwards}
html.sp-on{animation:sp-bg 1ms linear 3.2s forwards}
html.sp-lock{overflow:hidden}
@keyframes sp-gone{to{visibility:hidden}}
@keyframes sp-bg{to{background-color:transparent}}
/* 사이트 쪽 정지 덮개: 마크와 「보당당 수첩」만 같은 자리에 두고(문구·진행선·아이콘 자리는 비워 둔다) 100ms 에 덮는다 */
.sp-site{animation:sp-in .1s ease backwards}
.sp-site .sp-msg,.sp-site .sp-bar{visibility:hidden}
@keyframes sp-in{from{opacity:0}}
.sp-mark{filter:drop-shadow(0 12px 28px rgba(0,0,0,.28))}
.sp::before{content:"";position:absolute;inset:-10%;background:radial-gradient(45% 30% at 50% 38%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);animation:sp-glow 2.4s ease-in-out infinite alternate}
.sp-site::before{animation:none;opacity:.4;scale:.94}
@keyframes sp-glow{from{opacity:.4;scale:.94}to{opacity:1;scale:1.06}}
/* 앱 쪽: 마크와 이름은 처음부터 그 자리에 서 있고(사이트 덮개와 같은 모양), 문구와 진행선만 0.1초 뒤 0.3초 동안 나타난다. 진행선은 0 에서 100% 까지 한 번 */
.sp-app .sp-msg::before{content:"수첩을 여는 중이에요"}
html[data-spl="1"] .sp-app .sp-msg::before{content:"오늘 연락 드릴 분을 찾는 중이에요"}
html[data-spl="2"] .sp-app .sp-msg::before{content:"다 됐어요"}
.sp-msg{text-wrap:balance}
.sp-app .sp-msg{animation:sp-up .3s cubic-bezier(.2,.8,.2,1) .1s backwards}
.sp-app .sp-bar{animation:sp-fade .3s ease .1s backwards}
.sp-bar u{text-decoration:none;animation:sp-fill var(--ms) linear forwards}
@keyframes sp-up{from{opacity:0;translate:0 10px}}
@keyframes sp-fade{from{opacity:0}}
@keyframes sp-fill{to{transform:scaleX(1)}}
/* 영상 자리: 바탕 위에 깔리고 짙은 덮개가 글자를 받친다 */
.sp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.sp-shade{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(6,56,42,.5),rgba(6,56,42,.28) 38%,rgba(6,56,42,.72));transition:opacity .3s ease}
.sp-v video,.sp-v .sp-shade{opacity:1}
.sp-v .sp-ic{display:none}
/* 장식: 3D 아이콘 넷은 처음부터 떠 있는 채로(날아 들어오지 않는다) 아주 천천히 위아래로 흔들린다. 그림이 받아지면 0.2초에 보인다 */
.sp-ic{position:absolute;left:calc(50% + var(--x)*var(--k,1));top:calc(50% + var(--y)*var(--k,1));width:calc(var(--w)*var(--k,1));height:auto;margin:calc(var(--w)*var(--k,1)*-.5) 0 0 calc(var(--w)*var(--k,1)*-.5);opacity:0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.25));transition:opacity .2s ease;animation:sp-drift var(--dr,3.6s) ease-in-out var(--dl,0ms) infinite alternate}
.sp-ic.ld{opacity:.92}
@keyframes sp-drift{from{translate:0 0;rotate:-1.5deg}to{translate:0 -10px;rotate:1.5deg}}
@media (min-width:700px){.sp{--k:1.45}}
/* 앱 쪽: 덮개가 걷힐 때 첫 화면이 아래서 살짝 떠오른다 */
html.sp-rise :is(.pbody,.pbar,.ptab){animation:sp-rise .24s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes sp-rise{from{opacity:0;translate:0 14px}}
/* 10/31 CSS 판 장면: 사장님 PC 가 윈도 애니메이션 꺼짐(움직임 줄이기)이라 당당이 입장을 한 번도 못 봤다 → 줄이기와 상관없이 같은 장면이 항상 나온다.
   영상 없이 CSS 만으로 「당당이 인사(인사말 + 끄덕임) → 커지며 수첩 그림으로 바뀜」 1.6초(세션 두 번째는 0.9초). 움직임 줄이기 설정이거나, 영상이 없거나 안 돌 때 splash.js 가 html 에 sp-r 을 달아 준다(바탕은 영상 장면과 같은 크림). */
html.sp-r{--cs:1.6s}
html.sp-r.sp-s{--cs:.9s}
html.sp-r .sp{background:#F6F0E4;color:#10261F}
html.sp-r .sp-core,html.sp-r .sp-ic,html.sp-r .sp-shade,html.sp-r .sp::before{display:none}
html.sp-r .sp-hi{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:min(86%,360px);margin-top:-4vh;text-align:center;animation:sp-fade .2s ease backwards}
.sp-st{position:relative;display:block;width:min(46vw,190px);aspect-ratio:360/447}
.sp-dd,.sp-bk{position:absolute;display:block;height:auto;transform-origin:50% 86%}
.sp-dd{left:0;top:0;width:100%;height:100%;object-fit:contain;animation:sp-dd var(--cs) cubic-bezier(.4,0,.2,1) both}
.sp-bk{left:50%;top:50%;width:82%;margin:-41% 0 0 -41%;opacity:0;transform-origin:50% 50%;animation:sp-bk var(--cs) cubic-bezier(.3,0,.2,1) both}
.sp-hit{font-size:28px;font-weight:800;line-height:1.35;letter-spacing:-.03em;text-wrap:balance;animation:sp-hit var(--cs) ease both}
.sp-hit::before{content:var(--hi,"어서 오세요")}
@keyframes sp-dd{0%{opacity:0;scale:.88;translate:0 14px}14%{opacity:1;scale:1;translate:0 0}30%{rotate:0deg}38%{rotate:6deg;translate:0 5px}48%{rotate:-2deg;translate:0 0}54%{rotate:0deg;scale:1;opacity:1}80%,100%{scale:2.6;opacity:0;rotate:0deg}}
@keyframes sp-bk{0%,52%{opacity:0;scale:.5}74%{opacity:1;scale:1.05}100%{opacity:1;scale:1.7}}
@keyframes sp-hit{0%,5%{opacity:0;translate:0 8px}20%,52%{opacity:1;translate:0 0}66%,100%{opacity:0;translate:0 0}}
html.sp-r .sp-app{animation-delay:4.4s}
html.sp-r.sp-on{animation-delay:4.4s}
/* 움직임 줄이기 설정에서도 위 장면(html.sp-r)은 그대로 움직인다. 그 밖의 장면 움직임과 첫 화면 떠오름만 끈다 */
@media (prefers-reduced-motion:reduce){html:not(.sp-r) .sp *,html:not(.sp-r) .sp::before,html.sp-rise *{animation:none!important;transition:none!important}html:not(.sp-r) .sp{transition:opacity .2s ease}}
/* 10/28 밤 당당이 입장 영상(img/pro/splash.mp4): 당당이가 배꼽인사 → 수첩을 펼침 → 끝 0.55초에 화면이 수첩 속으로 확대되며 앱 바탕색으로 덮인다.
   영상이 돌기 시작하면(sp-v) 바탕을 영상 바탕색으로 바꾸고 마크·문구·진행선·짙은 덮개는 숨긴다. 영상은 정사각이라 화면 짧은 변에 맞춰 가운데, 가장자리는 바탕과 섞이게 흐린다. */
.sp.sp-v{background:#F6F0E4;transition:opacity .3s ease}
.sp.sp-v .sp-shade{opacity:0}
.sp.sp-v .sp-core{opacity:0}
.sp.sp-v::before{opacity:0;animation:none}
.sp.sp-v video{inset:auto;left:50%;top:50%;width:min(100vw,100vh);height:min(100vw,100vh);translate:-50% -50%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect;transform-origin:50% 52%;transition:opacity .3s ease,scale .55s cubic-bezier(.5,0,.75,0)}
.sp.sp-v::after{content:"";position:absolute;inset:0;background:#F6F0E4;opacity:0;transition:opacity .4s ease .08s}
.sp-app.sp-v{animation-delay:4.6s} /* 영상 중엔 CSS 보험을 4.6초로 */
.sp.sp-zoom video{scale:3.2}
.sp.sp-zoom::after{opacity:1}