:root{--player-ink:#1e2431;--player-ink-soft:#5b657b;--player-accent:#435ac6;--player-accent-soft:#e9edff;--player-alert:#f06c90;--player-border:#bcc4d5;--player-shadow:0 22px 38px rgba(25,35,58,0.2);--player-header:#1f2d45}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 18% 8%,rgba(195,204,234,.34),transparent 36%),radial-gradient(circle at 85% 90%,rgba(168,181,214,.24),transparent 42%),#e7e9ef;color:var(--player-ink);font-family:Pretendard,Noto Sans KR,Apple SD Gothic Neo,Segoe UI,sans-serif}main{min-height:100vh}.classroom-shell{min-height:100vh;padding:clamp(.65rem,1.6vw,1.2rem)}.classroom-shell__layout{width:min(1480px,100%);margin:0 auto}.content-stage{position:relative;display:flex;flex-direction:column;--content-stage-right-rail:clamp(18rem,23vw,22rem);animation:stage-enter .42s ease-out both}.content-stage__toolbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:start;gap:.56rem;padding:.72rem .82rem;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#243553,#1a263d);color:#eef3ff;box-shadow:0 10px 24px rgba(17,24,40,.25)}.content-stage__back-button{width:1.9rem;height:1.9rem;border:0;border-radius:6px;background:rgba(141,156,192,.22);color:#dbe5ff;font-size:1rem;cursor:pointer}.content-stage__page{display:inline-flex;align-items:center;min-height:1.9rem;padding:0 .62rem;border-radius:999px;background:rgba(147,162,197,.28);color:#f2f6ff;font-size:.84rem;font-weight:620}.content-stage__chapter{align-self:center;font-size:.95rem;font-weight:620;color:#f3f7ff;letter-spacing:-.01em}.system-message-bar__zoom{justify-self:end;display:grid;gap:.33rem;min-width:172px;padding:.5rem .54rem;border-radius:10px;background:rgba(248,250,255,.96);color:#2b3552;border:1px solid rgba(180,190,213,.78)}.system-message-bar__zoom-controls{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:.2rem}.system-message-bar__zoom-button,.system-message-bar__zoom-reset{border:0;border-radius:6px;background:#e8edf9;color:#2f3d5f;min-height:1.45rem;padding:0 .4rem;font-size:.75rem;font-weight:620;cursor:pointer}.system-message-bar__zoom-level{min-width:2.6rem;text-align:center;font-size:.8rem;font-weight:700;color:#223051}.system-message-bar__zoom-reset{min-width:2.2rem;background:#eef2fb}.system-message-bar__zoom-guide{margin:0;font-size:.66rem;color:#6f7892;text-align:center}.content-stage__canvas{position:relative;min-height:clamp(560px,75vh,880px);border:1px solid #b7bfce;border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#dde2eb,#d2d8e3);box-shadow:var(--player-shadow);overflow:hidden}.content-stage__paper{position:absolute;inset:.8rem var(--content-stage-right-rail) 4.9rem .86rem;border-radius:6px;border:1px solid var(--player-border);background:linear-gradient(180deg,#ffffff,#f7f8fd);box-shadow:0 14px 28px rgba(24,35,57,.16);display:grid;grid-template-columns:172px minmax(0,1fr);overflow:hidden}.content-stage__paper:before{content:"";position:absolute;left:0;right:0;top:0;height:76px;background:linear-gradient(90deg,rgba(176,181,221,.26),rgba(197,206,233,.14));pointer-events:none}.content-stage__paper:after{content:"";position:absolute;top:1.05rem;right:.55rem;bottom:1.05rem;width:.46rem;border-radius:999px;background:linear-gradient(180deg,#cad1df,#dce1eb)}.content-stage__margin-notes{z-index:1;margin:0;display:grid;align-content:start;gap:.62rem;padding:1.12rem .78rem;border-right:1px solid #d5dbe7;background:#f1f4fb;color:#5a6380;line-height:1.5;font-size:.87rem}.content-stage__margin-notes p{margin:0}.content-stage__lesson{z-index:1;display:grid;align-content:start;gap:.86rem;padding:1.05rem 1.5rem 1rem 1.15rem}.content-stage__lesson-title{margin:0;width:fit-content;display:inline-flex;align-items:center;gap:.54rem;padding:.42rem 1.2rem .42rem .62rem;border-radius:999px;background:linear-gradient(90deg,#6d61c6,#af9bdd);color:#fefeff;font-size:clamp(1.05rem,2vw,2rem);letter-spacing:-.01em}.content-stage__lesson-title:before{content:"1";width:2.18rem;height:2.18rem;border-radius:999px;display:grid;place-items:center;background:#4e439c;font-size:1.05rem;font-weight:760}.content-stage__lesson p{margin:0;max-width:94%;color:#2c3551;line-height:1.72;font-size:clamp(.93rem,1.26vw,1.38rem);letter-spacing:-.005em}.content-stage__diagram{margin-top:auto;width:min(94%,980px);margin-inline:auto;align-self:center;min-height:180px;border:2px solid #bec4d1;border-radius:18px;background:#ffffff;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.58rem;padding:.95rem}.content-stage__diagram-item{writing-mode:vertical-rl;text-orientation:mixed;display:grid;place-items:center;border:2px solid #b6a6d8;border-radius:999px;background:#f6f3ff;color:#3d3a5a;font-size:clamp(.8rem,1.1vw,1.1rem);font-weight:650;padding:.35rem}.content-stage__page-index{position:absolute;right:calc(var(--content-stage-right-rail) + .85rem);color:#59617c;font-size:1.82rem;font-family:Times New Roman,Cambria,serif;opacity:.9;pointer-events:none}.content-stage__page-index--top{top:2.5rem}.content-stage__page-index--middle{top:13.5rem}.content-stage__page-index--bottom{bottom:6.5rem}.content-stage__hint{position:absolute;right:1.2rem;bottom:9.7rem;width:min(280px,calc(100% - 2.4rem));padding:.76rem .9rem;border:3px solid var(--player-alert);border-radius:10px;background:#ffffff;color:#343a52;box-shadow:0 14px 24px rgba(34,46,79,.16);z-index:4}.content-stage__hint p{margin:0;font-size:.95rem;line-height:1.44}.content-stage__hint:after{content:"";position:absolute;right:2.4rem;bottom:-13px;border-width:12px 10px 0;border-style:solid;border-color:var(--player-alert) transparent transparent}.content-stage__hint:before{content:"";position:absolute;right:2.7rem;bottom:-8px;border-color:#ffffff transparent transparent;border-style:solid;border-width:8px 7px 0;z-index:1}.content-stage__actor{position:absolute;z-index:5}.content-stage__actor--student{left:1rem;bottom:4.75rem}.content-stage__actor--assistant{right:1rem;bottom:4.5rem;display:flex;flex-direction:column;align-items:flex-end;gap:.52rem}.content-stage__assistant-tools{display:grid;justify-items:center;gap:.48rem}.content-stage__controls{position:absolute;left:50%;bottom:.92rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.52rem;padding:.32rem .52rem;border-radius:999px;background:rgba(14,20,32,.84);border:1px solid rgba(106,118,146,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:6}.content-stage__control{width:2.35rem;height:2.35rem;border:0;border-radius:999px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.content-stage__control--wave{gap:2px;background:rgba(43,177,224,.22)}.content-stage__control--wave span{width:3px;border-radius:999px;background:#54d6ff;animation:voice-wave 1.2s ease-in-out infinite}.content-stage__control--wave span:first-child{height:32%}.content-stage__control--wave span:nth-child(2){height:66%;animation-delay:.12s}.content-stage__control--wave span:nth-child(3){height:90%;animation-delay:.18s}.content-stage__control--wave span:nth-child(4){height:56%;animation-delay:.24s}.content-stage__control--wave span:nth-child(5){height:30%;animation-delay:.32s}.content-stage__control-label{color:#d6e0ff;font-size:.74rem;font-weight:550;white-space:nowrap;padding-right:.34rem}.highlight-overlay{position:absolute;border:2px solid #f07a9b;border-radius:12px;background:linear-gradient(180deg,rgba(255,156,187,.2),rgba(255,156,187,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 10px 18px rgba(190,84,117,.2);pointer-events:none;z-index:3;transition:top .26s ease,left .26s ease,width .26s ease,height .26s ease,opacity .18s ease}.highlight-overlay__label{position:absolute;left:0;top:-1.65rem;border-radius:999px;border:1px solid #f29ab3;background:rgba(255,248,251,.95);color:#9d4464;font-size:.67rem;font-weight:640;letter-spacing:.01em;white-space:nowrap;padding:.18rem .5rem}.student-avatar{width:4.35rem;min-height:5.3rem;border-radius:.82rem;border:1px solid #7f8ca8;background:linear-gradient(180deg,#52617b,#3a475f);box-shadow:0 12px 18px rgba(24,33,52,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}.student-avatar__badge{width:2rem;height:2rem;border-radius:999px;border:2px solid rgba(222,233,255,.85);background:rgba(29,39,57,.46);display:grid;place-items:center;color:#eef4ff;font-size:.72rem;font-weight:760}.student-avatar__name{color:#eff3ff;font-size:.7rem;font-weight:570}.teacher-avatar{display:grid;justify-items:center;gap:.35rem}.teacher-avatar__badge{width:3.3rem;height:3.3rem;border-radius:999px;border:1px solid #f4b4c5;background:radial-gradient(circle at 32% 20%,#ffe5ec,#f8b3c7 62%,#ef8fab 100%);color:#d44f74;font-size:.78rem;font-weight:760;display:grid;place-items:center;box-shadow:0 10px 16px rgba(202,93,130,.3)}.teacher-avatar__name{color:#a65373;font-size:.68rem;font-weight:650}.student-bubble,.teacher-bubble{max-width:min(280px,46vw);border-radius:11px;padding:.62rem .74rem;background:#ffffff;box-shadow:0 12px 20px rgba(31,43,74,.14)}.teacher-bubble{border:2px solid #f1789b}.student-bubble{display:none}.student-bubble p,.teacher-bubble p{margin:0;color:#2f3650;line-height:1.35;font-size:.78rem}.hint-button{width:3.3rem;min-height:3.3rem;border:1px solid #f4c3cf;border-radius:999px;background:linear-gradient(180deg,#fff7f9,#ffeef3);color:#cb4e75;font-size:.68rem;font-weight:700;cursor:pointer;box-shadow:0 8px 14px rgba(208,103,136,.2)}.recording-indicator{position:absolute;right:1.1rem;top:1.1rem;z-index:7;display:inline-flex;align-items:center;gap:.42rem;border-radius:999px;border:1px solid rgba(250,138,163,.72);background:rgba(15,23,38,.9);color:#eff4ff;padding:.26rem .54rem;font-size:.74rem;font-weight:580}.recording-indicator__dot{width:.48rem;height:.48rem;border-radius:999px;background:#ff6f93;animation:pulse-dot .92s ease-in-out infinite}.mic-button{border:1px solid rgba(242,162,181,.7);border-radius:999px;background:radial-gradient(circle at 30% 20%,#ff9fb2,#de476a);color:#ffffff;min-height:2.35rem;display:inline-flex;align-items:center;gap:.34rem;padding:0 .78rem;cursor:pointer}.mic-button__icon{font-size:.72rem;line-height:1}.mic-button__label{font-size:.72rem;font-weight:720}.mic-button--recording{background:radial-gradient(circle at 30% 20%,#ff6f8a,#a71f3e)}.popup-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:1rem;background:rgba(13,19,33,.56)}.popup-card{width:min(420px,100%);border-radius:14px;border:2px solid var(--player-accent);background:#f8faff;box-shadow:0 24px 38px rgba(15,22,38,.34);padding:1.12rem 1.06rem;display:grid;gap:.7rem}.popup-card h2,.popup-card p{margin:0}.popup-card h2{color:#202941;font-size:1.16rem}.popup-card p{color:#46506b;line-height:1.5}.popup-card button{border:0;border-radius:8px;min-height:2rem;background:#2f41ff;color:#ffffff;font-size:.83rem;font-weight:620;cursor:pointer}.popup-card__options{display:grid;gap:.46rem}.popup-card--error{border-color:#ef507f}.popup-card--error button{background:#ef507f}.side-panel{display:none}.avatar-bubble{gap:.42rem;border-radius:14px;padding:.42rem .48rem;border:1px solid rgba(96,112,178,.3);background:rgba(255,255,255,.95)}.avatar-bubble,.avatar-bubble__badge{display:inline-flex;align-items:center}.avatar-bubble__badge{width:1.82rem;height:1.82rem;border-radius:999px;justify-content:center;color:#fff;font-size:.72rem;font-weight:760}.avatar-bubble--student .avatar-bubble__badge{background:linear-gradient(135deg,#6785fa,#3f58d3)}.avatar-bubble--assistant .avatar-bubble__badge{background:linear-gradient(135deg,#ff879f,#f04b72)}.avatar-bubble__text strong{display:block;font-size:.76rem;letter-spacing:.01em}.avatar-bubble__text p{margin:0;color:#5d6682;font-size:.68rem}.avatar-bubble--compact .avatar-bubble__text p{display:none}@keyframes stage-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes voice-wave{0%,to{transform:scaleY(.55);opacity:.5}50%{transform:scaleY(1);opacity:1}}@keyframes pulse-dot{0%,to{opacity:.45;transform:scale(.76)}50%{opacity:1;transform:scale(1)}}@media (max-width:980px){.content-stage{--content-stage-right-rail:0.75rem}.content-stage__toolbar{grid-template-columns:auto auto minmax(0,1fr);align-items:center}.system-message-bar__zoom{grid-column:1/-1;justify-self:stretch}.content-stage__paper{inset:.75rem .75rem 5.2rem}.content-stage__lesson p{max-width:100%}.content-stage__page-index{right:1.35rem}}@media (max-width:760px){.classroom-shell{padding:.4rem}.content-stage__chapter{font-size:.82rem}.content-stage__canvas{min-height:82vh}.content-stage__paper{inset:.6rem .56rem 5.6rem;grid-template-columns:1fr}.content-stage__margin-notes{display:none}.content-stage__lesson{padding:1rem 1.25rem 1rem .88rem}.content-stage__diagram{grid-template-columns:repeat(3,minmax(0,1fr));min-height:140px}.content-stage__page-index,.highlight-overlay__label{display:none}.content-stage__hint{left:.62rem;right:.62rem;width:auto;bottom:10.2rem}.content-stage__actor--student{left:.62rem;bottom:5.1rem}.content-stage__actor--assistant{right:.62rem;bottom:5.05rem}.teacher-bubble{max-width:min(270px,66vw)}.content-stage__controls{width:calc(100% - 1.12rem);justify-content:center}.content-stage__control-label{display:none}}