:root{--paper:#f7f1e9;--ink:#40332e;--rose:#b86e79;--line:#d9c6b6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;height:100dvh;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);border-radius:12px;background:transparent;min-height:42px;touch-action:manipulation}button:hover{background:#b86e7912}button:focus-visible{outline:3px solid var(--rose);outline-offset:2px}button:disabled{opacity:.4;cursor:default}header{height:58px;display:flex;align-items:center;gap:18px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#faf6f0}header>button:first-child{width:42px}header strong{font-size:21px;letter-spacing:-1px}header strong span{font-size:10px;margin-left:16px;font-weight:400;letter-spacing:1px;color:#9b8278}#progress{position:absolute;left:50%;transform:translateX(-50%);border:0;font-size:18px;font-variant-numeric:tabular-nums}.tools{display:flex;gap:8px;margin-left:auto}.tools button{width:42px;border:0;font-size:23px}main{height:calc(100dvh - 58px);display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,31vw,440px)}.scene{position:relative;background:#5e554c;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center}.ambience{position:absolute;inset:-25px;background-position:center;background-size:cover;filter:blur(24px) brightness(.65);z-index:-1}.art{height:100%;aspect-ratio:2/3;max-width:100%;position:relative;flex-shrink:0;touch-action:manipulation}.art img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.scene-note{position:absolute;top:20px;left:22px;color:#fff7e6ad;font-size:11px;letter-spacing:2px;writing-mode:vertical-rl;z-index:1;pointer-events:none}.scene-caption{position:absolute;bottom:13px;left:18px;color:white;text-shadow:0 1px 5px #000;font-size:11px;pointer-events:none}.zoom{position:absolute;bottom:17px;right:18px;border-color:#fff9;color:white;width:44px;height:44px;background:#493a2e66;border-radius:50%;font-size:30px}.mark{position:absolute;width:15%;aspect-ratio:1;border:3px solid #ed7c7d;border-radius:47% 53% 49% 51%;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;filter:drop-shadow(0 1px 2px #3334);animation:draw .2s ease-out}.mark:after{content:'';position:absolute;inset:-3px 0 0 -3px;border:1px solid #ff9d9d;border-radius:48% 52% 51% 49%;transform:rotate(9deg)}.mark b{position:absolute;top:-8px;right:-6px;background:#ba6670;color:white;border-radius:50%;font-size:10px;width:17px;height:17px;display:grid;place-items:center}.mark.answer{border-color:#92c6aa}.mark.answer:after{border-color:#92c6aa}@keyframes draw{from{opacity:0;scale:.75}to{opacity:1;scale:1}}aside{padding:25px 28px 20px;background:linear-gradient(125deg,#fbf7f1,#f3eae1);display:flex;flex-direction:column;overflow:auto}.episode{font-size:10px;letter-spacing:2px;color:#8c5f65;background:#e8c9c8;border-radius:20px;padding:6px 13px;align-self:flex-start}h1{font-size:clamp(21px,2.4vw,33px);margin:12px 0 19px;letter-spacing:-1px;line-height:1.25}.rule{height:1px;background:var(--line);flex-shrink:0}.context{font-size:12px;color:#988278;line-height:1.7;margin:15px 0 11px}.line{display:grid;grid-template-columns:40px 1fr;gap:11px;margin:15px 0;font-size:clamp(13px,1.45vw,18px);line-height:1.7}.speaker{font-size:10px;align-self:start;background:#e8d7cc;border-radius:6px;text-align:center;padding:3px 5px;margin-top:3px}.line:nth-child(even) .speaker{background:#e9c9c7}.bottom{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}.prompt{text-align:center;font-size:13px;margin:0 0 10px}.counter{margin:auto;width:max-content;font-size:11px;background:#ead1cd;border-radius:20px;padding:5px 15px}.status{min-height:17px;text-align:center;font-size:11px;color:#96616c;margin:8px 0}.secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.secondary button{background:#fff4;min-height:43px;font-size:12px}.primary{border:0;background:var(--rose);color:white;min-height:52px;width:100%;font-weight:650;font-size:17px;margin-top:10px}.primary:hover{background:#a95e6c}.primary span{float:right;margin-right:13px}dialog{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:28px;width:min(590px,90vw);max-height:90dvh;overflow:auto;box-shadow:0 20px 80px #24181140}dialog::backdrop{background:#241b17a9;backdrop-filter:blur(7px)}dialog h2{margin:8px 0 14px;font-size:26px;letter-spacing:-1px}dialog p{font-size:14px;line-height:1.8;color:#806c61}.eyebrow{color:var(--rose);font-size:11px;letter-spacing:2px}.close{float:right;width:36px;min-height:36px;font-size:20px}.choice{display:block;width:100%;text-align:left;padding:14px 16px;margin:10px 0;background:#fffa;font-size:14px;line-height:1.5}.choice.wrong{border-color:#bb727c;background:#f6e0df}.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stage-button{padding:12px;text-align:left;background:#fff6;min-height:63px}.stage-button small{display:block;color:#9c7c73;font-size:10px;margin-bottom:5px}.stage-button.current{border-color:var(--rose)}.result-quote{font-size:20px!important;color:#8d4e5a!important;border-left:3px solid #bd7c85;padding-left:15px}.evidence{font-size:12px;line-height:1.8;background:#e9ded3;padding:13px 16px;border-radius:10px}.modal-actions{display:flex;gap:10px;margin-top:15px}.modal-actions button{flex:1}.zoomdialog{width:94vw;height:94dvh;padding:12px}.zoomhead{display:flex;align-items:center;gap:15px;margin-bottom:8px;font-size:12px}.zoomhead input{flex:1;accent-color:var(--rose)}.zoomscroll{height:calc(100% - 52px);overflow:auto;background:#423a34;touch-action:pan-x pan-y}.zoomscroll .art{height:auto;width:100%;max-width:none;margin:0 auto}.zoomscroll .art img{height:auto}.rotate{display:none;position:fixed;inset:0;z-index:10;background:#f7f1e9f5;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.rotate>div{font-size:65px;color:var(--rose)}.rotate h2{font-size:23px}.rotate p{font-size:14px;color:#9b8278}.rotate button{padding:0 25px;margin-top:15px}.rotate.dismissed{display:none!important}@media(orientation:portrait){.rotate{display:flex}main{grid-template-columns:1fr;grid-template-rows:50% 50%}aside{padding:15px 22px}header strong span{display:none}#progress{display:none}.conversation{display:flex;gap:18px}.line{flex:1}.context{margin:5px 0}.bottom{padding-top:8px}h1{margin:8px 0}.prompt{display:none}}@media(max-height:500px) and (orientation:landscape){header{height:43px;gap:10px}header strong{font-size:17px}header strong span{display:none}.tools button,header>button:first-child{min-height:34px;height:34px;width:34px}main{height:calc(100dvh - 43px)}aside{padding:12px 17px 10px}.episode{padding:3px 10px;font-size:8px}h1{font-size:20px;margin:7px 0 9px}.context{font-size:10px;line-height:1.5;margin:7px 0}.line{font-size:13px;line-height:1.5;margin:8px 0;gap:7px}.speaker{font-size:9px;padding:2px}.bottom{padding-top:9px}.prompt{font-size:10px;margin-bottom:5px}.counter{padding:3px 10px;font-size:10px}.status{font-size:10px;margin:4px 0;min-height:12px}.secondary button{min-height:35px;font-size:11px}.primary{min-height:40px;font-size:14px;margin-top:6px}.scene-note{font-size:9px;left:10px}.scene-caption{font-size:9px;bottom:7px}.zoom{bottom:10px;right:10px;min-height:35px;height:35px;width:35px}dialog{padding:20px;max-height:94dvh}dialog h2{font-size:22px}dialog p{font-size:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Fill the observation pane; swipe vertically to explore the complete portrait artwork. */
.scene{display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a59b #51473f}.scene .art{width:100%;height:auto;max-width:none;aspect-ratio:2/3;touch-action:pan-y}.scene .art img{height:auto;object-fit:initial}.scene .ambience{display:none}.scene-note{display:none}.scene-caption{position:fixed;bottom:10px;left:16px;background:#493a2e99;border-radius:15px;padding:5px 9px}.scene>.zoom{position:fixed;right:calc(clamp(270px,31vw,440px) + 16px);bottom:14px;z-index:2}@media(orientation:portrait){.scene>.zoom{right:14px;bottom:51%}.scene-caption{bottom:51%;font-size:9px}}
.score-badge{font-size:13px;color:#945461;background:#efdad7;border-radius:20px;padding:6px 13px;white-space:nowrap}.mark.correct{border-color:#65b38c}.mark.correct:after{border-color:#8cd6b0}.mark.correct b{background:#347f5b}.mark.incorrect{border-color:#de646c}.mark.incorrect:after{border-color:#ff9299}.mark.incorrect b{background:#b74450}.mark.correct b,.mark.incorrect b{width:29px;height:21px;border-radius:10px}.mark.answer{border-color:#d79d42;border-style:dashed;filter:drop-shadow(0 1px 1px #0008)}.mark.answer:after{border-color:#ffe3a0}.mark.answer b{background:#805e26;color:#fff;width:21px;height:21px}.stage-score{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0 17px;gap:12px}.stage-score strong{font-size:45px;line-height:1;color:var(--rose)}.stage-score strong small{font-size:14px;color:#9b8278}.stage-score>span{font-size:12px;line-height:1.8;text-align:right;color:#94776a}.selection-results{display:grid;gap:7px}.selection-result{border-radius:10px;background:#e8ede5;padding:10px 13px;display:flex;flex-direction:column;gap:4px;font-size:12px}.selection-result b{color:#347555}.selection-result span{font-size:11px;color:#76685c}.selection-result.is-incorrect{background:#f1dfe0}.selection-result.is-incorrect b{color:#ae4c59}dialog h3{font-size:15px;margin:22px 0 12px}.answer-layout{display:grid;grid-template-columns:145px minmax(0,1fr);gap:15px;align-items:start}.answer-preview{width:100%;aspect-ratio:2/3;position:relative;overflow:hidden;border-radius:9px}.answer-preview img{width:100%;height:auto;display:block}.answer-preview .mark{border-width:2px}.answer-preview .mark b{width:15px;height:15px;font-size:9px;top:-6px;right:-6px}.clue-explanation{display:flex;gap:9px;padding:0 0 13px}.clue-number{display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#b98b43;color:white;font-size:11px}.clue-explanation b{font-size:12px;line-height:1.6}.clue-explanation small{display:block;font-size:10px;color:#a17856;margin-top:2px}.clue-explanation p{font-size:11px;line-height:1.7;margin:5px 0 0}.fineprint{font-size:10px!important;color:#9b8278!important}.final-score{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0}.rank{width:80px;height:80px;background:linear-gradient(145deg,#b87984,#85515d);border-radius:24px;color:#fff;display:grid;place-items:center;font-size:46px;font-weight:700;box-shadow:0 8px 25px #b8798433}.rank-S{background:linear-gradient(145deg,#d3b06a,#997030)}.final-score strong{font-size:48px;font-variant-numeric:tabular-nums}.final-score strong small{font-size:15px;color:#9b8278}.final-score>span{font-size:12px;color:#9b8278}.score-breakdown{background:#fff7;border-radius:13px;padding:5px 13px}.breakdown-row{display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #d9c6b65a;border-radius:0;padding:8px 0;width:100%;text-align:left;gap:14px;font-size:11px;min-height:39px}.breakdown-row:last-child{border:0}.breakdown-row b{white-space:nowrap;color:#9b5a67}.grade-guide{margin-top:18px;font-size:12px}.grade-guide summary{cursor:pointer;padding:9px 0}.grade-guide p{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin:8px 0}.menu-score{display:flex;justify-content:space-between;background:#eadbd2;padding:13px;border-radius:11px;margin:15px 0;font-size:12px}.text-button{width:100%;border:0;font-size:11px;margin-top:6px;min-height:35px}.modal-actions{position:sticky;bottom:-28px;background:var(--paper);padding:13px 0 4px;z-index:1}.modal-actions .primary{margin:0}.modal-actions button{font-size:13px;min-height:47px}.close{position:sticky;top:0;background:var(--paper);z-index:2}@media(max-height:500px) and (orientation:landscape){.score-badge{font-size:11px;padding:5px 9px}.answer-layout{grid-template-columns:130px 1fr}.modal-actions{bottom:-20px}.stage-score strong{font-size:36px}.final-score{padding:10px 0}.final-score strong{font-size:35px}.rank{width:60px;height:60px;font-size:33px}.tools{gap:3px}.status{line-height:1.4}}@media(max-width:430px){header{gap:8px;padding-left:10px;padding-right:10px}header strong{font-size:17px}.tools{gap:2px}.tools button{width:30px}.score-badge{font-size:10px;padding:5px 8px}.answer-layout{grid-template-columns:100px 1fr}.clue-explanation{gap:6px}.stage-score strong{font-size:35px}}
.scene-actions{position:fixed;right:calc(clamp(270px,31vw,440px) + 16px);bottom:14px;display:flex;align-items:center;gap:9px;z-index:2}.scene-actions #markMode{background:#f8f1e9ed;border-color:#fff9;padding:0 16px;font-size:12px;box-shadow:0 2px 15px #0002}.scene-actions #markMode[aria-pressed=true]{background:#b86e79;color:white;border-color:#b86e79}.scene-actions .zoom{position:static!important;min-height:44px}.scene-actions #markMode:disabled{opacity:.65}.fullscreen-cutscene{position:fixed;inset:0;margin:0!important;padding:0!important;border:0;border-radius:0;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;background:#171412;overflow:hidden;box-shadow:none;cursor:zoom-out}.fullscreen-cutscene::backdrop{background:#171412}.fullscreen-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.fullscreen-inner img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.tap-dismiss{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#fff;background:#211b17b0;padding:9px 17px;border-radius:22px;font-size:12px;white-space:nowrap;pointer-events:none}@media(orientation:portrait){.scene-actions{right:14px;bottom:51%}.scene-caption{max-width:48%;font-size:8px}}@media(max-height:500px) and (orientation:landscape){.scene-actions{right:calc(clamp(270px,31vw,440px) + 10px);bottom:10px}.scene-actions #markMode{min-height:35px;font-size:10px;padding:0 12px}.scene-actions .zoom{min-height:35px;height:35px;width:35px}.scene-caption{font-size:8px;max-width:40%}}

.story-progress{margin:20px 0;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff6}.story-progress>span{font-size:12px;color:#94776a}.story-progress p{margin:9px 0 0}.story-progress b{color:var(--ink);font-size:18px}

.fullscreen-cutscene #modalBody{height:100%;display:flex;flex-direction:column}.fullscreen-cutscene .fullscreen-inner{flex:1;min-height:0;height:auto;padding:8px 8px 28px}.zoom-art{position:relative;height:100%;max-width:100%;aspect-ratio:2/3}.fullscreen-inner .zoom-art img{width:100%;height:100%;object-fit:fill}.zoom-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px max(8px,env(safe-area-inset-bottom));background:#29221f;color:#fff4e7}.zoom-toolbar button{background:#40342f;border-color:#887268;padding:0 12px;font-size:12px}.zoom-toolbar button[aria-pressed=true],#zoomAnalyze:not(:disabled){background:var(--rose);border-color:var(--rose)}#zoomCounter{font-size:12px;white-space:nowrap}.zoom-help{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:11px;color:#fff4e7;white-space:nowrap;pointer-events:none}.is-marking{cursor:crosshair}.zoom-art .mark{pointer-events:none}@media(max-width:430px){.zoom-toolbar{gap:5px;padding-left:6px;padding-right:6px}.zoom-toolbar button{font-size:10px;padding:0 7px}#zoomCounter{font-size:10px}}

.zoom-art{height:auto;width:min(100%,calc((100dvh - 100px)*2/3));max-height:100%;flex-shrink:0}

.hidden-invitation{margin:20px 0;padding:18px;border:1px solid #b99a60;border-radius:14px;background:linear-gradient(135deg,#efe4d1,#f8f0e4)}.hidden-invitation h3{margin-top:10px}.hidden-award{padding:12px 16px;border:1px solid #c5a56d;border-radius:10px;color:#876023!important;background:#efe6d1}

.zoom-detail .fullscreen-inner{display:block;overflow:auto;overscroll-behavior:contain;padding:0 0 28px;touch-action:pan-y}.zoom-detail .zoom-art{width:100%;max-width:none;max-height:none;height:auto;margin:0}.zoom-detail .zoom-help{position:fixed;bottom:80px;background:#211b17b0;padding:4px 8px;border-radius:10px;z-index:2}

/* Expanded cutscenes fill the screen width; dragging pans, a short tap marks. */
.zoom-detail #zoomViewport{overflow:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
.zoom-detail #zoomViewport:active{cursor:grabbing}
.zoom-detail #zoomArt{width:100%;min-width:100%;max-width:none;height:auto;max-height:none;aspect-ratio:2/3;touch-action:none}
.zoom-detail #zoomArt img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;pointer-events:none}
.zoom-detail .zoom-help{bottom:calc(env(safe-area-inset-bottom) + 66px)}

.audio-settings{display:grid;gap:16px;margin:20px 0}.audio-settings button{padding:12px;text-align:left;background:#fff6}.audio-settings button[aria-pressed=true]{border-color:var(--rose);background:#efdad7}.audio-settings label{font-size:13px}.audio-settings output{float:right;color:var(--rose)}.audio-settings input{width:100%;accent-color:var(--rose);min-height:32px}.music-title{color:var(--rose)!important;font-size:16px!important}