.story-overlay{padding:16px;background:#090d09bf}
.story-overlay>.story-panel{width:min(980px,100%);max-width:980px;max-height:calc(100dvh - 32px);padding:0;display:flex;flex-direction:column;overflow:hidden;text-align:left;background:#20241b}
.story-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;flex-shrink:0}
.story-header span{font-size:12px;color:#c4b694;letter-spacing:.04em}
.story-header h2{font-size:24px;margin:3px 0 0;color:#efdfb8}
.story-header .icon-btn{flex:0 0 44px;width:44px;height:44px;margin:0}
.story-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;flex-shrink:0;background:#191e16;border-block:1px solid #776847}
.story-chapters button{min-width:0;min-height:44px;background:transparent;border:0;border-bottom:2px solid transparent;color:#bdb69e;font:inherit;font-size:14px;cursor:pointer}
.story-chapters button span{font-size:11px;margin-right:6px;opacity:.7}
.story-chapters button[aria-current=page]{color:#f1d48e;border-bottom-color:#d5ad5d;background:#d4ad5912}
.story-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;background:#d5c19a;color:#332b20;scrollbar-color:#82714d #d5c19a}
.story-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;background:linear-gradient(90deg,transparent 48%,#73582714 50%,transparent 52%),url('./assets/ui-grain.svg');min-width:0}
.story-spread figure{margin:0;padding:26px 16px 26px 24px;min-width:0}
.story-spread img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply;border:0}
.story-spread figcaption{text-align:center;font:13px/1.6 'Batang','바탕',Georgia,serif;color:#69563a;margin-top:16px}
.story-copy{padding:30px 30px 30px 24px;font:17px/1.85 'Batang','바탕',Georgia,serif;word-break:keep-all;overflow-wrap:anywhere}
.story-kicker{font:12px/1.5 system-ui,sans-serif;color:#765c34;letter-spacing:.12em}
.story-copy h3{font-size:27px;line-height:1.45;color:#302318;margin:8px 0 20px}
.story-copy p{margin:0 0 16px;color:#3c3022}
.story-copy blockquote{margin:23px 0 0;padding-top:16px;border-top:1px solid #88714966;color:#5b452a;font-size:16px;font-style:normal}
.story-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 20px;flex-shrink:0;border-top:1px solid #84704a;background:#1d2319}
.story-footer>span{font-size:13px;color:#cabc9b;white-space:nowrap}
.story-footer button{width:100%;min-width:0;min-height:46px;margin:0;padding:10px 8px;font-size:14px;white-space:normal;line-height:1.4}
.story-footer button:disabled{opacity:.35;cursor:default}
.story-overlay button:focus-visible{outline:2px solid #ffe1a2;outline-offset:-4px}
.story-copy h3:focus{outline:none}
@media(max-width:720px){
 .story-overlay{padding:8px}
 .story-overlay>.story-panel{max-height:calc(100dvh - 16px)}
 .story-header{padding:12px 16px}
 .story-header h2{font-size:22px}
 .story-spread{grid-template-columns:1fr;background-image:url('./assets/ui-grain.svg')}
 .story-spread figure{padding:18px 20px 0}
 .story-spread img{max-height:240px}
 .story-spread figcaption{margin-top:7px;font-size:12px}
 .story-copy{padding:22px 22px 26px;font-size:16px;line-height:1.8}
 .story-copy h3{font-size:25px;margin-bottom:16px}
 .story-footer{padding:10px 12px;gap:10px}
 .story-footer button{font-size:13px}
}
@media(max-height:500px){
 .story-header{padding:6px 16px}.story-header>div>span{display:none}.story-header h2{font-size:20px}
 .story-footer{padding:7px 12px}.story-chapters button{min-height:40px}
 .story-spread{align-items:start}.story-spread figure{padding:16px}.story-spread img{max-height:40dvh}
 .story-copy{padding-top:20px;padding-bottom:20px}
}