/* Story keeps its book geometry; Study is one document with a continuous transcript. */
html:has(body.study-active){overflow:auto;scroll-padding-bottom:var(--study-bottom,130px)}
body.study-active{overflow:visible}
#reader-app.study-mode{padding:0;min-height:100dvh;height:auto;overflow:visible}
#reader-app.study-mode .reading-room{display:block;max-width:1280px;width:100%;margin:auto;padding:0 20px;box-sizing:border-box;height:auto;overflow:visible}
#reader-app.study-mode .book-stage,#reader-app.study-mode .masthead,#reader-app.study-mode .caption-box,#reader-app.study-mode #reader-chrome,#reader-app.study-mode #status,#reader-app.study-mode .colophon,#reader-app.study-mode #exit-immersive,#reader-app.study-mode #immersive-hint{display:none!important}
.study-panel{min-width:0;text-align:left;padding-bottom:calc(var(--study-bottom,130px) + 28px);color:#304638}
.study-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 0}
.study-top h2{font:500 21px/1.4 Georgia,serif;margin:0}
.study-panel button{cursor:pointer}
.study-top button,.study-summary,.study-transport button,.study-settings button,.study-definition button{min-height:48px;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.4}
.study-top button:hover,.study-summary:hover{background:#dfe8da}
.study-summary{display:block;text-align:left;font-size:13px;color:#405642;padding:8px 0;margin:0 0 10px;white-space:normal;width:100%}
.study-layout{display:block;min-width:0}
.study-preview{display:none}
.study-art{display:flex;aspect-ratio:2/1;overflow:hidden;width:100%;background:#e3e9df;border-radius:5px}
.study-art img{width:50%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}
.study-scene{margin:0 0 36px;scroll-margin-top:16px}
.study-scene-heading{font-size:12px;font-weight:500;color:#52634f;margin:12px 0}
.study-scene ol{list-style:none;padding:0;margin:0}
.study-cue{padding:16px 12px;border-left:3px solid transparent;margin:4px 0;border-radius:0 12px 12px 0;scroll-margin-block:24px calc(var(--study-bottom,130px) + 24px);overflow-wrap:anywhere}
.study-cue[aria-current=true]{border-left-color:#597248;background:#e3ebdc}
.study-cue:focus-visible,.study-word:focus-visible,.study-panel button:focus-visible{outline:2px solid #385c36;outline-offset:4px}
.study-meta{display:flex;justify-content:space-between;gap:12px;color:#4c614b;font-size:13px;line-height:1.5;margin-bottom:8px}
.study-original{font-size:21px;line-height:1.65;color:#293e2c;white-space:pre-wrap;margin:0}
.study-translation{font-size:17px;line-height:1.65;color:#465845;white-space:pre-wrap;margin:10px 0 0}
.study-panel.hide-translations .study-translation{display:none}
.study-panel .study-word{display:inline;font:inherit;line-height:inherit;color:inherit;padding:0;margin:0;min-height:0;text-decoration:underline dotted #657c59;text-underline-offset:5px;border-radius:3px}
.study-word:hover{background:#d1dfc7}.study-silent{font-size:14px;color:#52634f;line-height:1.7}
.study-transport-wrap{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,640px);padding:8px 16px max(12px,env(safe-area-inset-bottom));box-sizing:border-box;background:#f3f6edf5;backdrop-filter:blur(12px);border-top:1px solid #d1dccb;z-index:25}
.study-transport{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}.study-transport button{font-size:15px;padding:10px 6px;white-space:normal}.study-transport .primary{background:#405d40;color:#fff}
#study-status:empty{display:none}#study-status{font-size:13px;line-height:1.5;margin:0 0 6px;color:#40543c}#study-return{font-size:13px;min-height:44px;text-decoration:underline;width:100%}
.study-settings{max-width:480px}.study-settings label{display:flex;flex-direction:column;gap:8px;margin:20px 0;font-size:15px;color:#344b35}.study-settings select{width:100%;min-width:0;min-height:48px;font-size:16px;border:1px solid #cbd7c4;border-radius:12px;background:#fffdf6;padding:10px;color:#304638}
.study-settings .study-toggle{flex-direction:row;align-items:center}.study-toggle input{width:22px;height:22px}.study-settings summary,.study-definition summary{padding:14px 0;min-height:44px;box-sizing:border-box;cursor:pointer;font-size:15px}.study-settings p,.study-definition p{font-size:15px;line-height:1.65;color:#465845;overflow-wrap:anywhere}
.saved-word{position:relative;border-bottom:1px solid #d1dccb;padding:14px 0}.saved-word p{margin:5px 0}.saved-word small{color:#52634f}.saved-word button{display:block}.study-definition{max-width:360px;padding:24px;background:#fffdf4}.study-definition h3{font-size:23px;margin:8px 44px 14px 0}.study-definition .definition-close{position:absolute;right:8px;top:8px;min-width:48px}.study-definition #study-save{width:100%;border:1px solid #c5d3bd;margin-top:12px}.study-definition::backdrop{background:#20371c24}.study-definition[open]{animation:shade-in .15s}
@media(min-width:1060px){
 .study-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
 .study-preview{display:block;position:sticky;top:28px;align-self:start}.study-preview p{font-size:13px;color:#52634f;margin:12px 0}
 .study-scene .study-art{display:none}.study-scene{margin-bottom:36px}.study-original{font-size:22px}
 .study-transport-wrap{left:auto;right:max(20px,calc((100vw - 1240px)/2));transform:none;width:min(calc((100vw - 84px)/2),598px)}
}
@media(max-width:1059px){.study-definition{position:fixed;top:auto;bottom:12px;margin:0 auto;width:calc(100% - 32px);max-width:480px;max-height:70dvh;padding:20px}}
@media(max-width:420px){#reader-app.study-mode .reading-room{padding:0 16px}.study-top{gap:6px}.study-top button{padding:10px 8px;font-size:14px}.study-cue{padding:14px 9px}.study-original{font-size:20px}.study-translation{font-size:17px}}
@media(prefers-reduced-motion:reduce){.study-definition[open]{animation:none}.study-panel{scroll-behavior:auto}}

.study-top{position:sticky;top:0;z-index:26;background:#f7f5edf5;backdrop-filter:blur(10px);padding-bottom:8px}.study-cue{scroll-margin-top:84px}.study-scene{scroll-margin-top:84px}@media(min-width:1060px){.study-preview{top:88px}}

/* Keep the artwork in the viewport while the transcript remains document-scrolled. */
@media(min-width:1060px){
 .study-preview{position:fixed;top:140px;left:max(20px,calc((100% - 1240px)/2));width:min(calc((100% - 84px)/2),598px);z-index:2}
 .study-preview .study-art{max-width:calc((100dvh - 200px)*2);margin-inline:auto}
 .study-transcript{grid-column:2}
}

/* The glossary stays nonmodal so selection handles remain usable on phones. */
.study-original,.study-original .study-word{user-select:text;-webkit-user-select:text}
.study-selection{position:fixed;right:24px;bottom:100px;z-index:90;width:min(360px,calc(100vw - 24px));max-height:44dvh;overflow:auto;padding:16px 20px;background:#fffdf5;border:1px solid #cbd5c2;border-radius:20px;box-shadow:0 12px 40px #20371c30;overscroll-behavior:contain}
.study-selection[hidden]{display:none}.selection-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.selection-heading h3{margin:0;font-size:17px}.selection-heading button{min-height:44px;min-width:44px;border-radius:50%;background:#edf1e7}.study-selection dl{margin:8px 0}.study-selection dl div{display:grid;grid-template-columns:minmax(70px,1fr) 2fr;gap:16px;padding:9px 0;border-top:1px solid #e8ecdf}.study-selection dt{font-weight:600;overflow-wrap:anywhere}.study-selection dd{margin:0;line-height:1.5;font-size:14px}.study-selection p{font-size:11px;line-height:1.6;color:#63715c;margin:8px 0 0}
@media(max-width:540px){.study-selection{left:12px;right:12px;bottom:100px;padding:12px 16px;width:auto;max-height:36dvh}}

/* Quiet highlighter ink; only Korean original receives these spans. */
.study-read-current{background:#f3df93;color:#243c30;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;box-shadow:0 2px 0 #f3df93}