#story-layer{position:absolute;inset:0;z-index:20;background:transparent;color:#f3ebde;font-family:'Noto Sans KR','Malgun Gothic',sans-serif;isolation:isolate}
#story-layer[hidden]{display:none}.story-top{position:absolute;inset:3% 4% auto;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px}.story-top>span{font-size:clamp(9px,1.1vw,14px);letter-spacing:2px;color:#dcc396}.story-top button,.story-bottom button{background:#1d303ddd;color:#f5dcaf;border:1px solid #8e826d;padding:8px 15px;font:inherit;font-size:12px}
.story-fiction{position:absolute;top:12%;left:4%;z-index:4;font-size:clamp(7px,.75vw,10px);color:#a6b8bf;letter-spacing:.2px}
.story-portrait{position:absolute;top:auto;bottom:30%;width:24%;height:35%;filter:brightness(.78) saturate(.86);transition:filter .25s ease;mask-image:linear-gradient(#000 88%,transparent)}
/* Preserve the complete source-cell top, including hair/hats/helmets, at every size. */
.story-portrait-frame{position:absolute;inset:6px 0 0;overflow:hidden}
.story-portrait-frame>img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block}
#story-hero{left:3%;transform:scaleX(-1)}
#story-hero img{width:300%}
#story-boss{right:3%}#story-boss img{width:200%}
#story-enemy{right:3%}.story-portrait[hidden]{display:none}.story-portrait.speaker-active{filter:brightness(1) saturate(1)}
.story-shade{display:none}
.stage:has(#story-layer:not([hidden]))>.hud,.stage:has(#story-layer:not([hidden]))>.bottomhud{visibility:hidden}
.story-top>span,.story-fiction{text-shadow:0 1px 3px #000,0 0 8px #000;background:#0b151f99;padding:4px 7px}
.story-dialogue{position:absolute;inset:auto 5% 4%;z-index:3;border-top:1px solid #bca16c;background:linear-gradient(90deg,#111e2aea,#15222ce8);padding:14px 20px 10px;min-height:27%}
.story-label{display:flex;justify-content:space-between;align-items:center;gap:12px}.story-label strong{font-size:clamp(12px,1.3vw,18px);color:#f4cb8d;letter-spacing:1px}.story-label span{font:10px monospace;color:#9eadb4}
#story-text{white-space:pre-line;font-size:clamp(13px,1.45vw,20px);line-height:1.65;min-height:3.3em;margin:8px 0;color:#f4f0e6;word-break:keep-all}
.story-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.story-bottom span{font-size:9px;color:#96a8af}.story-bottom button{min-width:110px;padding:6px 14px}
#story-layer[data-mode=narration] .story-portrait{display:none}
#story-layer[data-mode=narration] .story-dialogue{border-top:0;border-left:3px solid #d9bb82;background:linear-gradient(90deg,#151e26ee,#151e26bb);padding-left:25px}
#story-layer[data-mode=narration] .story-label strong{font-size:clamp(10px,1vw,13px);letter-spacing:3px;color:#d9bb82}
#story-layer[data-mode=narration] #story-text{color:#deded7;font-weight:400;line-height:1.85}
#story-layer[data-mode=dialogue] .story-label strong:before{content:'대사 / ';font-size:9px;font-weight:400;letter-spacing:1px;color:#a5bdcc;margin-right:5px}
@media(max-width:700px){.story-dialogue{inset:auto 3% 3%;padding:8px 10px}.story-top{inset:2% 3% auto}.story-top button,.story-bottom button{font-size:9px;padding:5px 8px;min-width:70px}.story-fiction{top:13%;font-size:6px}.story-bottom span{font-size:7px}#story-text{font-size:11px;line-height:1.5;min-height:3em;margin:4px 0}.story-label strong{font-size:10px}.story-portrait{top:auto;bottom:35%;height:31.5%;width:24.5%}}
@media(prefers-reduced-motion:reduce){.story-portrait{transition:none}}
.story-preview-nav{padding:12px 4%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#20333e;font-size:12px}.story-preview-nav button{background:#314c5b;color:#e9d5af;border:1px solid #688290;padding:7px 13px}.story-preview-nav span{font-size:10px;color:#bedcca}