/* 보당당 입장 장면 (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{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}}
@media (prefers-reduced-motion:reduce){.sp-app{display:none!important}.sp,.sp *,html.sp-rise *{animation:none!important;transition:none!important}.sp-ic{opacity:.8}}