:root{--paper:#f6f0e5;--ink:#29473d;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#e8e4db;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}main{width:100%;max-width:480px;min-height:100dvh;margin:auto;background:var(--paper)}a{color:inherit}button{font:inherit;cursor:pointer;touch-action:manipulation}a,button,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bf954c;outline-offset:4px}header{height:65px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.brand{font:700 25px serif;letter-spacing:2px;text-decoration:none}.brand small{font:10px system-ui;letter-spacing:0;color:#70796c}header>span{font-size:12px;color:#647362}.scene{aspect-ratio:9/16;position:relative;overflow:hidden;isolation:isolate;background:#0b211e;color:white}.poster,video,.shade{position:absolute;inset:0;width:100%;height:100%}.poster,video{object-fit:cover;object-position:48% 45%}video{opacity:0}video.ready{opacity:1}.shade{pointer-events:none;background:linear-gradient(#09221b30,transparent 25%,transparent 64%,#0b211eee 92%)}.top{position:absolute;z-index:3;inset:16px 16px auto;display:flex;align-items:center;justify-content:space-between}.chapter{font-size:11px;letter-spacing:1px;text-shadow:0 1px 6px #000}.dialogue{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}.speaker{font-size:11px;letter-spacing:2px;color:#dfc69a}.dialogue h1{font:400 29px/1.5 serif;margin:8px 0 7px;text-shadow:0 2px 15px #0009}.dialogue p{font-size:13px;line-height:1.7;margin:0 0 17px;color:#eee7d9;text-shadow:0 2px 8px #000}.begin{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;min-height:52px;background:#f3ead8;color:#294438;border-radius:8px;font-size:14px;text-decoration:none;font-weight:600}footer{text-align:center;font-size:11px;color:#798471;padding:10px 0 30px}@media(min-width:700px){main{margin:22px auto;border-radius:18px;overflow:hidden;box-shadow:0 20px 70px #1433281a}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.scene[data-phase="1"] .speaker,.scene[data-phase="1"] #subline{display:none}.scene[data-phase="1"] h1{font-size:23px;margin:0 0 16px}
header .brand{font-size:20px;letter-spacing:0;display:flex;align-items:center;gap:7px}header .exit{font-size:12px;text-decoration:none;color:#647362}.brand img{display:block}footer{line-height:2}
.dialogue h1{word-break:keep-all;overflow-wrap:break-word}