/* 체험하기 (dist/activity-trial.js): the sheet over the teacher page, and the page inside its frame. */
/* The sheet: full screen on phones, a large card on wider screens; one size from the hidden warm-up to the close. */
.activity-trial{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;font-family:var(--font-en),'Noto Sans KR','Apple SD Gothic Neo',sans-serif}
.activity-trial.is-idle{visibility:hidden;pointer-events:none}
.activity-trial-backdrop{position:absolute;inset:0;background:var(--n-2b211880,#2b211880)}
.activity-trial-sheet{position:relative;box-sizing:border-box;width:min(860px,calc(100vw - 32px));height:calc(100vh - 32px);height:calc(100dvh - 32px);overflow:hidden;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:20px;background:var(--n-fffaf2,#fffaf2);box-shadow:0 24px 60px #2b21184d;outline:none}
/* The frame always fills the sheet, so the screen inside never changes size when the bar goes away. */
.activity-trial-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--n-fffaf2,#fffaf2);color-scheme:normal}
.activity-trial:not(.is-ready) .activity-trial-frame{visibility:hidden}
/* The bar shows only while the screen is not drawn yet (loading) or could not be (failed). It draws the game screen's
   own top at the frame's places (review 2026-10-30): the centred reassurance line (as html[data-activity-trial]
   .activity-trial-frame-note), the activity's name with a 52x44 닫기 where the screen's toolbar has them, and the card
   below, so the drawn screen replaces it without a jump. Sizes follow the frame's own breakpoints (the sheet is the
   frame's viewport, hence container queries). */
.activity-trial-sheet{container-type:size}
.activity-trial-bar{position:absolute;z-index:2;top:0;left:0;right:0;box-sizing:border-box;padding:12px 12px 0;background:transparent}
.activity-trial.is-ready .activity-trial-bar{display:none}
.activity-trial-note{max-width:760px;margin:0 auto 8px;color:var(--n-5f4b33,#5f4b33);font-size:12px;font-weight:650;line-height:1.45;text-align:center;word-break:keep-all}
.activity-trial-head{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:760px;min-height:44px;margin:0 auto}
.activity-trial-name{flex:1 1 auto;min-width:0;margin:0;color:var(--n-3f3328,#3f3328);font-size:15px;font-weight:800;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-trial-status{max-width:760px;margin:16px auto 0;color:var(--i-8f3a2c,#8f3a2c);font-size:15px;font-weight:650;line-height:1.45;word-break:keep-all}
.activity-trial:not(.is-failed) .activity-trial-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.activity-trial-actions{display:flex;flex:0 0 auto;gap:8px;margin-left:auto}
.activity-trial-actions button{min-width:52px;min-height:44px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.3}
.activity-trial-actions .activity-trial-close{border:1px solid var(--n-e6d9c6,#e6d9c6);background:var(--n-ffffff,#fff);color:var(--n-6a5f50,#6a5f50);box-shadow:0 1px 2px #4b341f0f}
/* The card's place, as the screen's card (game kit: 8px under the toolbar, radius 20). */
.activity-trial-skeleton{position:absolute;z-index:1;top:89px;left:12px;right:12px;height:min(421px,calc(100% - 101px));box-sizing:border-box;border:1px solid var(--n-efe4d4,#efe4d4);border-radius:20px;background:var(--n-fffefb,#fffefb)}
.activity-trial.is-ready .activity-trial-skeleton,.activity-trial.is-failed .activity-trial-skeleton{display:none}
@container (min-width:700px){
 .activity-trial-bar{padding:20px 24px 0}
 /* The game kit is at most 620px wide there, centred. */
 .activity-trial-head{max-width:620px}
 .activity-trial-skeleton{top:97px;left:50%;right:auto;width:min(620px,calc(100% - 48px));height:min(511px,calc(100% - 129px));transform:translateX(-50%)}
}
@container (min-width:700px) and (min-height:560px){
 .activity-trial-note{font-size:13px}
 .activity-trial-skeleton{top:99px;height:min(511px,calc(100% - 131px))}
}
html.has-activity-trial,html.has-activity-trial body{overflow:hidden}
@media (max-width:699px){
 .activity-trial-sheet{width:100vw;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none}
 .activity-trial-backdrop{display:none}
}

/* Inside the frame (/teacher?trial=1): only the activity panels show, laid out like an open row of the student home. */
html[data-activity-trial],html[data-activity-trial] body{min-height:100%;background:var(--n-fffaf2,#fffaf2)}
/* A book setting's sheet (dist/book-option-detail.js, opened from the 난이도 / 알파벳 읽기 label above the screen) is a child of
   body too and must show: hidden, it left every other child inert and froze the frame (review 2026-11-05). */
html[data-activity-trial] body>:not(main):not(.book-option-layer){display:none!important}
html[data-activity-trial] main>:not(#learningPanelStorage):not(.activity-trial-frame-note):not(.activity-trial-frame-level),html[data-activity-trial] #speakingPanel{display:none!important}
html[data-activity-trial] .activity-trial-frame-note{max-width:760px;margin:0 auto 8px;color:var(--n-5f4b33,#5f4b33);font-size:var(--act-label,13px);font-weight:650;line-height:1.45;text-align:center;word-break:keep-all}
html[data-activity-trial] main{max-width:none;margin:0;padding:12px 12px max(20px,env(safe-area-inset-bottom))}
html[data-activity-trial] #studyPanel,html[data-activity-trial] #readingPanel{max-width:760px;margin:0 auto!important;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
@media (min-width:700px){html[data-activity-trial] main{padding:20px 24px 28px}}