:root{--ui-bg: rgba(16, 15, 12, .74);--ui-bg-strong: rgba(16, 15, 12, .94);--ui-line: rgba(255, 255, 255, .16);--ui-ink: #f1ece0;--ui-dim: #b5ad9c;--gold: #e9c46a;--gold-ink: #ffe3a3;--ivy: #5c7d33;--paper: #f6edd9;--paper-2: #efe3c9;--paper-line: #d6c6a3;--ink: #2c2519;--dim: #6d6250;--brick: #a84b30;--display: "Gowun Batang", "Noto Serif KR", serif;--body: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%}body{background:#f6efe2;color:var(--ui-ink);font-family:var(--body);font-size:14px;line-height:1.55;overflow:hidden;word-break:keep-all}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.paperish button:focus-visible{outline-color:var(--brick)}h1,h2,h3,p{margin:0}.stage{position:fixed;inset:0}.stage canvas{display:block;width:100%;height:100%}.quest{position:fixed;top:max(14px,env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));z-index:5;max-width:min(420px,calc(100% - 340px));pointer-events:none;color:#2b2418;text-shadow:0 0 10px rgba(255,250,235,.9),0 0 2px rgba(255,250,235,.9)}.quest small{display:block;font-size:12px;color:#5d5240}.quest strong{display:block;font-family:var(--display);font-size:18px;font-weight:700;line-height:1.35}.quest .progress{display:block;margin-top:2px;font-size:12px;color:#5d5240}.tools{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:6;display:flex;gap:6px}.tool{position:relative;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--ui-line);border-radius:11px;background:var(--ui-bg);color:var(--ui-ink);box-shadow:0 4px 14px #00000040;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tool:hover{border-color:#e9c46ab3}.tool[aria-pressed=true],.tool.on{border-color:var(--gold);color:var(--gold-ink)}.tool.glow{border-color:var(--gold);animation:glow 1.6s ease-in-out infinite}.tool kbd{position:absolute;left:4px;bottom:2px;font:inherit;font-size:9px;font-weight:600;color:var(--ui-dim)}@keyframes glow{50%{box-shadow:0 0 0 5px #e9c46a4d}}.caption{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:5;width:max-content;max-width:min(640px,calc(100% - 28px));padding:9px 18px;border:0;border-radius:10px;background:#100f0cd6;color:var(--ui-ink);font-size:14.5px;text-align:left}.caption.with-ms{left:calc((100% - 444px)/2);max-width:calc(100% - 468px)}.caption b{color:var(--gold);margin-right:8px;font-weight:600}.ctx{position:fixed;left:0;top:0;z-index:6;display:grid;gap:4px;padding:5px;border-radius:11px;background:var(--ui-bg-strong);border:1px solid rgba(233,196,106,.55);box-shadow:0 8px 24px #00000059}.ctx button{min-height:38px;padding:6px 16px;border:0;border-radius:7px;background:transparent;color:var(--gold-ink);font-size:14px;font-weight:600;text-align:left;white-space:nowrap}.ctx button:hover,.ctx button:focus-visible{background:#e9c46a2e}.ctx button.quiet{color:var(--ui-dim);font-weight:500}.hover-label{position:fixed;z-index:7;pointer-events:none;padding:3px 10px;border-radius:6px;background:#100f0cdb;color:var(--gold-ink);font-size:13px;font-weight:500;transform:translate(14px,14px)}.ms{position:fixed;z-index:8;top:66px;right:12px;bottom:12px;width:min(420px,calc(100% - 24px));display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 18px 50px #0006}.ms header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 8px 18px;border-bottom:1px solid var(--paper-line)}.ms h2{font-family:var(--display);font-size:18px}.ms .body{overflow:auto;padding:12px 18px 20px;display:grid;gap:14px;align-content:start}.para{display:grid;gap:4px;scroll-margin-top:10px}.para.flash{animation:flash 1.2s ease-out}@keyframes flash{0%,40%{background:#e9c46a73}}.para-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--dim)}.listen{padding:1px 9px;border:1px solid var(--paper-line);border-radius:5px;background:transparent;font-size:12px;color:var(--dim)}.para p{font-family:var(--display);font-size:16.5px;line-height:1.85;color:var(--ink)}.sent{display:inline;padding:1px;border:0;background:transparent;font:inherit;color:inherit;text-align:left;line-height:inherit}button.sent{border-bottom:2px dashed #bda877}button.sent:hover{background:#e9c46a47}button.sent[aria-pressed=true]{background:#f7e27d;border-bottom-color:#b89a12}.close{width:34px;height:34px;padding:0;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:inherit}.close:hover{background:#00000014}.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:#14110b80}.book{width:min(980px,100%);height:min(680px,100%);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 24px 70px #00000080;overflow:hidden}.book>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 10px 22px;border-bottom:1px solid var(--paper-line)}.book h2{font-family:var(--display);font-size:20px}.steps{display:flex;gap:4px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--dim)}.steps li{padding:2px 10px;border-radius:999px;border:1px solid var(--paper-line)}.steps li.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.book-body{overflow:auto;padding:16px 22px;display:grid;gap:14px;align-content:start}.book>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 22px;border-top:1px solid var(--paper-line);background:var(--paper-2)}.ask{font-family:var(--display);font-size:18px;line-height:1.5}.note{color:var(--dim);font-size:13px}.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.two>*{min-width:0}.sketch{position:relative;aspect-ratio:1;max-height:390px;border:1px solid var(--paper-line);background:#fbf5e6;overflow:hidden;display:grid;place-items:center}.sketch img{width:100%;height:100%;object-fit:contain;display:block}.sketch .empty{padding:20px;text-align:center;color:var(--dim);font-family:var(--display);font-size:16px}.sketch .margin-notes{position:absolute;left:6px;right:6px;bottom:6px;display:flex;flex-wrap:wrap;gap:4px}.sketch .margin-notes span{padding:1px 8px;background:#fbf5e6eb;border:1px solid var(--paper-line);font-size:11.5px;color:var(--dim)}.cards{display:grid;gap:7px}.card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px 9px 13px;border:1px solid var(--paper-line);border-radius:6px;background:#fbf5e6}.card.center{border-color:var(--brick);box-shadow:inset 3px 0 0 var(--brick)}.card .acts{display:flex;gap:4px}.chip{padding:3px 10px;border:1px solid #b7a67f;border-radius:5px;background:transparent;color:var(--ink);font-size:12.5px;white-space:nowrap}.chip:hover{background:#0000000f}.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.btn{padding:8px 18px;border:1px solid #94855f;border-radius:7px;background:transparent;color:var(--ink);font-weight:600}.btn:hover{background:#0000000f}.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}.btn.primary:hover{background:#443a29}.btn[disabled]{opacity:.45;cursor:default}.fb{display:grid;gap:8px}.fb p{padding:10px 14px;background:#fbf5e6;border-left:3px solid var(--gold);font-size:15px}.hint{padding:9px 14px;background:#fff3cd;border-left:3px solid #c9a227;font-size:14px}.sub{font-size:12.5px;font-weight:600;color:var(--dim)}.buckets{display:grid;gap:7px}.bubble-wrap{position:relative}.bubbles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.bubble{min-height:72px;padding:8px 12px;border:1.5px solid var(--ink);border-radius:16px;background:#fffdf6;font-size:13.5px;display:grid;gap:3px;align-content:start}.bubble b{font-size:12px;font-weight:600;color:var(--dim)}.bubble span{font-family:var(--display)}.bubble em{font-style:normal;color:var(--dim);font-size:13px}.record{width:100%;border-collapse:collapse;font-size:13.5px}.record th,.record td{padding:6px 8px;border-bottom:1px solid var(--paper-line);text-align:left;vertical-align:top}.record th{font-weight:600;color:var(--dim);white-space:nowrap}select{font:inherit;padding:2px 6px;border:1px solid #b7a67f;border-radius:5px;background:#fbf5e6;color:var(--ink);max-width:100%}textarea{width:100%;font:inherit;padding:7px 9px;border:1px solid #b7a67f;border-radius:5px;background:#fffdf6;color:var(--ink);resize:vertical}.cover{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;overflow:auto;background:linear-gradient(#f6efe280,#f6efe280),var(--cover, none) center / cover no-repeat #f6efe2;color:var(--ink)}.cover-card{width:min(520px,100%);display:grid;gap:14px;padding:26px 28px;border-radius:8px;background:var(--paper);box-shadow:0 20px 60px #3c280a4d}.cover h1{font-family:var(--display);font-size:36px;line-height:1.2}.cover .by{color:var(--dim);font-size:13px}.choices{display:grid;gap:8px}.choice{display:grid;gap:2px;padding:11px 14px;border:1px solid var(--paper-line);border-radius:7px;background:#fbf5e6;color:var(--ink);text-align:left}.choice:hover{border-color:var(--brick)}.choice strong{font-family:var(--display);font-size:17px}.choice small{color:var(--dim);font-size:12.5px}.teacher{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--dim)}.teacher input{margin-top:4px}.care{font-size:13px;color:var(--dim);padding-top:10px;border-top:1px solid var(--paper-line)}.loading{display:grid;gap:8px;text-align:center;font-family:var(--display);font-size:17px}.bar{height:5px;background:var(--paper-line)}.bar i{display:block;height:100%;background:var(--brick);transition:width .2s}.list-panel{position:fixed;z-index:8;top:66px;right:12px;width:min(260px,calc(100% - 24px));max-height:calc(100% - 80px);overflow:auto;padding:6px;display:grid;gap:2px;border-radius:10px;background:var(--ui-bg-strong);border:1px solid var(--ui-line)}.list-panel button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--ui-ink);text-align:left}.list-panel button:hover{background:#ffffff14}.list-panel i{font-style:normal;color:var(--gold);font-size:12px}@media(max-width:760px){.quest{max-width:calc(100% - 28px);top:64px}.quest strong{font-size:15.5px}.tool{width:40px;height:40px}.tools{gap:4px}.ms{inset:auto 8px 8px;width:auto;height:58%}.caption.with-ms{left:50%;max-width:calc(100% - 28px);bottom:calc(58% + 16px)}.two{grid-template-columns:minmax(0,1fr)}.sketch{max-height:240px;aspect-ratio:auto;height:240px}.modal{padding:0}.book{height:100%;border-radius:0}.book-body{padding:12px 14px}.book>footer{padding:8px 14px}.book>header{padding:8px 8px 8px 14px}.steps{display:none}}@media(prefers-reduced-motion:reduce){.tool.glow,.para.flash{animation:none}}