/* 막차 이야기 재생기 (2026-10-12) — js/story.js */
#story{position:fixed;inset:0;z-index:9500;background:#07060A;color:#F2EBDD;opacity:0;transition:opacity .35s;overflow:hidden;user-select:none;-webkit-user-select:none;font-family:inherit}
#story.on{opacity:1}
#story .sbBg{position:absolute;inset:-20px;background:url("../img/title/bg.webp") center/cover;filter:blur(6px) brightness(.45) saturate(.85);transform:scale(1.05)}
#story .sbBg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,10,.55),rgba(7,6,10,.15) 40%,rgba(7,6,10,.9))}
/* 제목 */
#story .sbTitle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;transition:opacity .5s, transform .5s}
#story .sbTitle span{padding:3px 12px;border-radius:12px;font:13px 'Black Han Sans',sans-serif;color:#fff}
#story .sbTitle h2{margin:0;font:28px/1.3 'Black Han Sans',sans-serif;letter-spacing:.02em}
#story .sbTitle small{font-size:14px;color:#B9B0A0}
#story.go .sbTitle{opacity:0;transform:translateY(-12px);pointer-events:none}
#story:not(.go) .sbCast,#story:not(.go) .sbBox,#story:not(.go) .sbNote{opacity:0}
/* 지문 */
#story .sbNote{position:absolute;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 60px);font-size:14px;line-height:1.6;color:#CFC6B5;text-align:center;opacity:0;transition:opacity .5s}
#story .sbNote.in{opacity:1}
/* 귀신들 — 카드 그림을 무대에 세운다. 말하는 귀신이 밝아지고 조금 올라온다 */
#story .sbCast{position:absolute;left:0;right:0;top:30%;display:flex;justify-content:center;align-items:flex-end;gap:10px;padding:0 12px;transition:opacity .4s}
#story .sbC{flex:0 1 120px;max-width:150px;text-align:center;filter:brightness(.42) saturate(.6);transform:translateY(10px) scale(.94);transition:filter .3s, transform .3s}
#story .sbCast.n1 .sbC{flex-basis:170px;max-width:190px}
#story .sbC i{display:block;aspect-ratio:3/4;border-radius:10px;background:#111 center/cover;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#story .sbC span{display:block;margin-top:6px;font:13px 'Black Han Sans',sans-serif;color:#E8DFCF}
#story .sbC.talk{filter:none;transform:none}
#story.quiet .sbC{filter:brightness(.3) grayscale(1);transition-duration:1.2s}
#story.shake .sbCast{animation:sbShake .45s}
@keyframes sbShake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* 장부 */
#story .sbDoc{position:absolute;left:50%;top:22%;width:min(300px,84vw);transform:translateX(-50%) rotate(-2deg);padding:18px 18px 14px;border-radius:4px;background:#E9DEC6;color:#2B2620;box-shadow:0 18px 40px rgba(0,0,0,.7);font-family:serif;animation:sbDocIn .6s cubic-bezier(.2,1.3,.4,1)}
#story .sbDoc h4{margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid #8A2B22;font:20px 'Black Han Sans',sans-serif;color:#8A2B22;text-align:center}
#story .sbDoc p{margin:6px 0;font-size:15px}
#story.docOn .sbCast{opacity:.25}
@keyframes sbDocIn{from{opacity:0;transform:translateX(-50%) translateY(30px) rotate(4deg)}}
/* 대사창 */
#story .sbBox{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);min-height:120px;padding:14px 16px 26px;border-radius:14px;background:rgba(20,18,24,.92);box-shadow:inset 0 0 0 1.5px rgba(232,182,76,.35),0 10px 30px rgba(0,0,0,.5)}
#story .sbWho{display:block;margin-bottom:6px;font:15px 'Black Han Sans',sans-serif;color:var(--gold,#E8B64C)}
#story .sbBox.me .sbWho{color:#9DC3FF}
#story .sbBox.narr .sbWho{display:none}
#story .sbBox.narr .sbT{color:#CFC6B5;font-style:italic}
#story .sbT{margin:0;font-size:17px;line-height:1.6;min-height:2.6em}
#story .sbNext{position:absolute;right:14px;bottom:8px;font-size:13px;color:#8E8676;font-style:normal;animation:sbBlink 1s infinite}
@keyframes sbBlink{50%{opacity:.2}}
#story .sbSkip{position:absolute;right:10px;top:calc(env(safe-area-inset-top,0px) + 10px);min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:22px;background:rgba(255,255,255,.1);color:#E8DFCF;font:14px 'Black Han Sans',sans-serif}
/* 단서 */
#story .sbClue{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);padding:22px 18px 18px;border-radius:12px;background:#EDE3CC;color:#2B2620;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.7);animation:sbDocIn .6s cubic-bezier(.2,1.3,.4,1)}
#story .sbClue .sbFold{display:inline-block;margin-bottom:8px;padding:2px 10px;border-radius:8px;background:#8A2B22;color:#fff;font:13px 'Black Han Sans',sans-serif;letter-spacing:.08em}
#story .sbClue h3{margin:4px 0 10px;font:20px 'Black Han Sans',sans-serif}
#story .sbClue p{font-size:15px;line-height:1.6;margin:0 0 16px}
#story .sbClue .btn{width:100%}
#story.clue .sbCast{opacity:.15}
/* 설정 「막차 이야기」 */
.sbBookP{font-size:14px;color:var(--muted)}
.sbList{display:flex;flex-direction:column;gap:6px}
.sbCl{margin:6px 0;padding:10px 12px;border-radius:10px;background:#E8DFD0}
.sbCl b{font:15px 'Black Han Sans',sans-serif}
.sbCl p{margin:4px 0 0;font-size:14px;line-height:1.5}
#story .sbClue .sbReward{margin:-6px 0 14px;font:16px 'Black Han Sans',sans-serif;color:#8A2B22}