/* Teacher pages scroll the page itself: keep the scrollbar's place even when a tab is short, so switching tabs never slides the page sideways (owner 2026-11-04 video: "탭을 누르면 탭에 따라서 화면이 이동을 해. 가만히 있게"). */
html:has(body[data-view="teacher"]){scrollbar-gutter:stable}
/* That kept place lies outside every fixed layer, so a dimmed overlay stops short of it; empty, it would stay a bright
   strip beside the dim (review 2026-11-04). Only the page's background colour paints there, so while an overlay dims the
   page that colour becomes the overlay's own veil over the page colour (--gutter-veil) and an image of the page colour
   keeps the rest of the page as it was (a scrollbar, when shown, covers the place as before). The veils: ⚙ 설정
   (.look-scrim; a centred card from 700px), a book setting's sheet (.book-option-scrim, the same dim; 2026-11-05), 체험하기
   (.activity-trial-backdrop, from 700px) and any modal dialog (dialog::backdrop). no-blink.test.mjs checks them against those overlays in every theme. Phones and tablets draw
   their scrollbars over the page and never have the place, so their page colour stays as it was. */
@media (hover:hover) and (pointer:fine){html:has(body[data-view="teacher"]):is(:has(dialog:modal),.has-activity-trial,:has(.look-layer),:has(.book-option-layer)){background-color:var(--gutter-veil,var(--cream));background-image:linear-gradient(var(--cream),var(--cream))}}
html:has(dialog:modal){--gutter-veil:color-mix(in srgb,var(--n-3e3a32,#3e3a32) 41.961%,var(--cream))}
@media (min-width:700px){
 html:has(.look-layer){--gutter-veil:color-mix(in srgb,var(--t-ink) 42%,var(--cream))}
 :root[data-theme="dark"]:has(.look-layer){--gutter-veil:color-mix(in srgb,var(--t-bg) 72%,var(--cream))}
}
@media (min-width:700px){
 html:has(.book-option-layer){--gutter-veil:color-mix(in srgb,var(--t-ink) 42%,var(--cream))}
 :root[data-theme="dark"]:has(.book-option-layer){--gutter-veil:color-mix(in srgb,var(--t-bg) 72%,var(--cream))}
}
@supports (color:color(from transparent srgb r g b / 1)){@media (min-width:700px){
 html.has-activity-trial{--gutter-veil:color-mix(in srgb,color(from var(--n-2b211880,#2b211880) srgb r g b / 1) 50.196%,var(--cream))}
}}
body[data-view="teacher"] .header{min-height:48px;padding:4px max(5vw,20px);gap:12px;flex-wrap:nowrap}
body[data-view="teacher"] .brand{gap:7px}
body[data-view="teacher"] .brand-logo{width:28px;height:34px}
body[data-view="teacher"] .brand-name{font-size:17px}
body[data-view="teacher"] .brand-name small,body[data-view="teacher"] .header-caption,body[data-view="teacher"] .mode-badge,body[data-view="teacher"] #connectionButton{display:none}
body[data-view="teacher"] main{padding-top:14px}
body[data-view="teacher"] #schoolNotice:empty{display:none}
.teacher-home-view{--teacher-ink:var(--n-403b35,#403b35);--teacher-muted:var(--n-716d63,#716d63);--teacher-line:var(--n-eee3d5,#eee3d5);max-width:850px;margin:0 auto 32px;color:var(--teacher-ink)}
.teacher-home-view [hidden]{display:none!important}
.teacher-home-view button:focus-visible,.teacher-home-view summary:focus-visible{outline:3px solid var(--n-a94c31,#a94c31);outline-offset:3px}
.teacher-welcome{display:flex;align-items:center;gap:12px;min-height:42px;margin:0 0 14px}
.teacher-welcome h1{flex:1;min-width:0;font-size:18px;line-height:1.4;letter-spacing:-.6px;margin:0;overflow-wrap:anywhere}
.teacher-home-title{display:block;min-height:44px;max-width:100%;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;letter-spacing:inherit;text-align:left;line-height:1.4;overflow-wrap:anywhere}
.teacher-home-title:hover:not(:disabled){background:transparent;color:var(--n-8d5d31,#8d5d31);filter:none}
.teacher-main-tabs{display:flex;align-items:center;gap:25px;margin:0 0 15px;border-bottom:1px solid var(--teacher-line)}
.teacher-main-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;position:relative;min-height:46px;padding:10px 1px 11px;border:0;border-radius:0;background:transparent;color:var(--n-8a8174,#8a8174);font-size:15px;font-weight:650;letter-spacing:-.4px;box-shadow:none;white-space:nowrap}
.teacher-main-tabs button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.teacher-main-tabs button.selected{background:transparent;color:var(--n-744c25,#744c25);font-weight:800;box-shadow:none}
.teacher-main-tabs button.selected:after{position:absolute;content:'';height:2px;bottom:-1px;left:0;right:0;background:var(--n-b98b55,#b98b55);border-radius:1px}
.teacher-main-tabs button:hover:not(:disabled){filter:none;background:transparent;color:var(--n-744c25,#744c25)}
.teacher-class-tabs{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 1px 10px;margin:0 0 8px}
.teacher-class-tabs button{flex:1 0 58px;min-height:43px;padding:9px 12px;max-width:170px;border:1px solid var(--n-d5ccbd,#d5ccbd);border-radius:11px;background:var(--n-e8e0d3,#e8e0d3);color:var(--n-6b6155,#6b6155);font-size:15px;line-height:1.4;font-weight:700;white-space:nowrap}
.teacher-class-tabs button.selected{background:var(--n-fff3d3,#fff3d3);border:2px solid var(--n-c79b5f,#c79b5f);color:var(--n-4d3920,#4d3920)}
.teacher-class-tabs button:hover:not(:disabled){filter:none;background:var(--n-fff0df,#fff0df)}
.teacher-home-status{font-size:12px;line-height:1.7;padding:9px 12px;margin:3px 0 14px;color:var(--n-41664c,#41664c);background:var(--n-edf4ec,#edf4ec);border-radius:9px}
.teacher-home-status:empty{display:none}
.teacher-home-status.warning{color:var(--i-a13e36,#a13e36);background:var(--i-fff0e7,#fff0e7)}
.teacher-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0 12px;min-height:34px}
.teacher-section-heading h2{font-size:15px;letter-spacing:-.4px;line-height:1.5;margin:0}
.teacher-section-heading>span{font-size:10px;color:var(--teacher-muted);text-align:right;line-height:1.6}
.teacher-section-heading .secondary{padding:7px 12px;font-size:11px;min-height:34px}
.teacher-student-row,.teacher-book-row{position:relative;margin:0 0 10px;border:1px solid var(--teacher-line);border-radius:15px;background:var(--n-fffdf8,#fffdf8);overflow:clip}
.teacher-student-row>summary,.teacher-book-row>summary{display:flex;align-items:center;gap:10px;list-style:none;min-height:58px;padding:13px 17px;cursor:pointer;line-height:1.5}
.teacher-student-row>summary::-webkit-details-marker,.teacher-book-row>summary::-webkit-details-marker{display:none}
.teacher-student-row>summary>strong{font-size:15px;font-weight:750;overflow-wrap:anywhere}
.teacher-student-summary{margin-left:auto;font-size:11px;color:var(--teacher-muted);text-align:right}
.teacher-chevron{flex-shrink:0;margin-left:auto;font-size:20px;line-height:1;color:var(--n-a99579,#a99579)}
.teacher-student-summary+.teacher-chevron{margin-left:1px}
.teacher-student-row[open]>summary,.teacher-book-row[open]>summary{border-bottom:1px solid var(--teacher-line);background:var(--n-fff8ec,#fff8ec)}
.teacher-student-row[open]>summary>.teacher-chevron,.teacher-book-row[open]>summary>.teacher-chevron{transform:rotate(180deg)}
.teacher-student-content,.teacher-book-content{padding:16px}
.teacher-homework-book{margin:0 0 19px}.teacher-homework-book:last-child{margin-bottom:0}
.teacher-homework-book h3{font-size:14px;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.teacher-day-status{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:0 0 13px}
.teacher-day-status>div{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--n-f5f0e7,#f5f0e7);border:1px solid var(--n-e8dfd1,#e8dfd1);border-radius:9px;padding:9px 3px;text-align:center}
.teacher-day-status span{font-size:10px;color:var(--n-7b6a53,#7b6a53)}.teacher-day-status strong{font-size:19px;font-weight:700;color:var(--n-9c8c72,#9c8c72);line-height:1.3}.teacher-day-status small{font-size:9px;color:var(--n-80776b,#80776b)}
.teacher-day-status .done{background:var(--i-edf4e7,#edf4e7);border-color:var(--i-cdddc4,#cdddc4)}.teacher-day-status .done strong,.teacher-day-status .done small{color:var(--i-547e4b,#547e4b)}
.teacher-day-status .pending{background:var(--n-fff4dc,#fff4dc);border-color:var(--n-ecdbb5,#ecdbb5)}.teacher-day-status .pending strong{color:var(--n-ab7d32,#ab7d32)}
.teacher-day-status .stale{background:var(--n-fff0e9,#fff0e9);border-color:var(--n-edcfc1,#edcfc1)}.teacher-day-status .stale strong{color:var(--n-ad5b3b,#ad5b3b)}
.teacher-homework-item{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;border-top:1px solid var(--n-eee6db,#eee6db);padding:10px 0;font-size:11px}
.teacher-homework-item>strong{font-size:11px;flex:1;overflow-wrap:anywhere}.teacher-homework-item>span{color:var(--n-a07839,#a07839)}.teacher-homework-item>span.done{color:var(--i-547e4b,#547e4b)}
.teacher-task-parts{display:flex;flex-wrap:wrap;gap:4px;width:100%}.teacher-task-parts span{font-size:10px;padding:3px 7px;border-radius:6px;background:var(--n-f3eee4,#f3eee4);color:var(--n-7e7361,#7e7361)}.teacher-task-parts span.done{background:var(--i-e8f0e2,#e8f0e2);color:var(--i-547e4b,#547e4b)}
.teacher-order-help{font-size:11px;line-height:1.8;color:var(--teacher-muted);margin:0 0 12px}
.teacher-book-row>summary{padding-right:58px;gap:8px;min-height:64px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.teacher-book-number{position:relative;top:1px;width:20px;flex-shrink:0;font-size:14px;color:var(--n-a08762,#a08762);font-weight:700}
.teacher-book-row>summary>strong{min-width:0;flex:1;overflow-wrap:anywhere;font-size:16px;line-height:1.5;font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif}
.teacher-book-row>summary>.teacher-chevron{margin-left:3px}
.teacher-book-order{position:absolute;top:10px;right:7px;display:flex;align-items:center}
.teacher-book-order button{display:grid;place-items:center;width:44px;min-height:44px;padding:0;color:var(--n-8c7759,#8c7759);background:transparent;border:0;border-radius:7px;font-size:19px;line-height:1}
.teacher-book-order button:hover:not(:disabled){background:var(--n-f8ecd9,#f8ecd9);filter:none}
.teacher-book-order button:disabled,.teacher-book-order button[aria-disabled="true"]{color:var(--n-c5bba9,#c5bba9);opacity:.65;cursor:default}
.teacher-book-order .teacher-drag-handle{font-size:25px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.teacher-book-row.is-previewing{transition:transform .16s ease;will-change:transform}
.teacher-book-row.is-dragging{border:1px dashed var(--n-be996b,#be996b);background:var(--n-f8ead5,#f8ead5);box-shadow:inset 0 0 0 3px var(--n-fff6e6,#fff6e6);transition:transform .16s ease}
.teacher-book-row.is-dragging>summary,.teacher-book-row.is-dragging>.teacher-book-content{opacity:0}
.teacher-book-row.is-dragging .teacher-drag-handle,.teacher-book-row.is-dragging>summary{cursor:grabbing}
.teacher-book-row.is-drop-target{border-color:var(--n-b07e49,#b07e49);background:var(--n-fdf1d9,#fdf1d9)}
.teacher-book-row.is-drop-before{box-shadow:inset 0 4px var(--n-ad8051,#ad8051)}
.teacher-book-row.is-drop-after{box-shadow:inset 0 -4px var(--n-ad8051,#ad8051)}
.teacher-book-content .book-card-actions{margin:0 0 13px;padding:8px 0 0;gap:7px}
.teacher-book-content .book-card-actions button{font-size:11px;min-height:36px;padding:8px 10px}
.teacher-book-content .book-class-form{padding-top:13px}.teacher-book-content .book-class-form label,.teacher-book-content .book-class-form .field-help{font-size:11px}.teacher-book-content .book-class-form select{font-size:12px}.teacher-book-content .book-class-form button{font-size:11px}
.teacher-empty{margin:0;padding:30px 18px;border:1px solid var(--teacher-line);border-radius:15px;background:var(--n-fffdf8,#fffdf8);font-size:12px;line-height:1.9;color:var(--teacher-muted);text-align:center}
.teacher-management{border:1px solid var(--teacher-line);border-radius:13px;padding:14px 16px;margin:18px 0 0;background:var(--n-f8f5ed,#f8f5ed)}
.teacher-management>summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--n-756955,#756955);line-height:1.7}
.teacher-management .academy-management{border:0;padding:0;margin:18px 0 0;box-shadow:none;background:transparent}
.teacher-management .academy-title{display:none}
.teacher-management .student-reports{border-top:1px solid var(--teacher-line);padding-top:15px}
.teacher-management .student-reports>h3:before{content:'상세 '}
.teacher-management .class-settings{margin:15px 0 0;padding:0;border:0;background:transparent}
.teacher-management .class-settings>summary{display:none}
.teacher-class-management .teacher-new-class-form{gap:8px;margin:0 0 14px;padding:12px;border:1px solid var(--teacher-line);border-radius:12px;background:var(--n-fffdf8,#fffdf8)}
.teacher-class-management .teacher-new-class-form label{font-size:12px}
.teacher-new-class-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.teacher-new-class-row input{flex:1 1 160px;min-height:44px}
.teacher-class-management .teacher-new-class-row button{width:auto;min-height:44px;padding:8px 14px;font-size:12.5px;white-space:nowrap}
@media(max-width:540px){.teacher-new-class-row input{flex-basis:100%}.teacher-class-management .teacher-new-class-row button{flex:1 1 0}}
.teacher-bottom-links{display:flex;justify-content:space-between;gap:16px;margin-top:19px;font-size:11px;line-height:1.8}.teacher-bottom-links a{color:var(--n-8d533c,#8d533c)}
@media(min-width:680px){.teacher-main-tabs{gap:34px}.teacher-main-tabs button{min-height:48px}.teacher-class-tabs button{flex:0 0 90px}.teacher-student-row>summary{min-height:63px}.teacher-student-content,.teacher-book-content{padding:20px}}
@media(max-width:420px){body[data-view="teacher"] .header{padding:4px 17px;gap:9px}body[data-view="teacher"] main{padding:12px 18px 0}.teacher-welcome{margin-bottom:11px;gap:8px}.teacher-welcome h1{font-size:16px}.teacher-main-tabs{gap:19px;margin-bottom:13px}.teacher-main-tabs button{min-height:44px;font-size:13px;padding:10px 0}.teacher-main-tabs button svg{width:16px;height:16px}.teacher-class-tabs{gap:7px}.teacher-class-tabs button{min-height:41px;padding:8px 10px;font-size:14px}.teacher-student-row>summary{padding:12px 13px;gap:7px}.teacher-student-summary{font-size:10px}.teacher-student-content,.teacher-book-content{padding:13px}.teacher-book-row>summary{padding-left:12px;padding-right:52px;gap:4px}.teacher-book-row>summary>strong{font-size:15px}.teacher-book-number{width:17px;font-size:12px}.teacher-book-order{right:4px}.teacher-book-order button{width:42px}.teacher-section-heading>span{font-size:9px}.teacher-management{padding:13px 12px}.teacher-day-status{gap:4px}}
@media(prefers-reduced-motion:reduce){.teacher-home-view *{scroll-behavior:auto!important;transition:none!important}}

/* The floating card lives directly under body and inherits no home variables. It is the row's own face (the same
   padding, places and type as .teacher-book-row>summary or .teacher-category-row), moved straight with translate3d only.
   A book card covers the row's summary exactly: its edge is a 1px ring outside the box (where the row's border is), so
   the title has the row's width and never wraps differently. A category row carries its own border, and so does its card. */
.teacher-book-drag-ghost{position:fixed;z-index:1000;display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:5px;box-sizing:border-box;margin:0;padding:13px 58px 13px 17px;border:0;border-radius:15px;background:var(--n-fffdf8,#fffdf8);color:var(--n-403b35,#403b35);line-height:1.5;box-shadow:0 0 0 1px var(--n-c9955a,#c9955a),0 18px 36px #4b341f40,0 4px 10px #4b341f20;pointer-events:none;user-select:none;-webkit-user-select:none;font-family:var(--font-en),Arial,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;will-change:transform;overflow:hidden}
.teacher-book-drag-ghost>strong{min-width:0;flex:1;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.teacher-book-drag-ghost>.teacher-chevron{margin-left:3px}
.teacher-book-drag-ghost.is-open{background:var(--n-fff8ec,#fff8ec)}.teacher-book-drag-ghost.is-open>.teacher-chevron{transform:rotate(180deg)}
.teacher-book-drag-ghost .teacher-book-order>span{display:grid;place-items:center;width:44px;min-height:44px;padding:0;color:var(--n-8c7759,#8c7759);font-size:19px;line-height:1}
.teacher-book-drag-ghost .teacher-book-order>.teacher-drag-handle{font-size:25px}
.teacher-category-drag-ghost{flex-wrap:nowrap;gap:6px;padding:3px 3px 3px 12px;border:1px solid var(--n-c9955a,#c9955a);border-radius:11px;line-height:normal;box-shadow:0 18px 36px #4b341f40,0 4px 10px #4b341f20}
.teacher-category-drag-ghost>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:normal}
.teacher-category-drag-ghost>.teacher-drag-handle{display:grid;place-items:center;width:40px;min-height:40px;color:var(--n-8c7759,#8c7759);font-size:18px;line-height:1}
.teacher-category-drag-ghost>.teacher-drag-handle{font-size:23px}
.teacher-book-drag-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:420px){.teacher-book-drag-ghost{padding:13px 52px 13px 12px;gap:4px}.teacher-book-drag-ghost>strong{font-size:15px}.teacher-book-drag-ghost .teacher-book-order>span{width:42px}.teacher-category-drag-ghost{padding:3px 3px 3px 12px;gap:6px}.teacher-category-drag-ghost>strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.teacher-book-row.is-previewing,.teacher-book-row.is-dragging{transition:none}}

/* Activity homework uses the current published books, without assignments. */
.teacher-activity-student>summary{gap:8px}
.teacher-activity-student>summary>strong{flex:0 1 92px;min-width:37px;font-size:14px}
.teacher-activity-student>summary>.teacher-chevron{margin-left:0}
.teacher-activity-chips{display:grid;grid-template-columns:repeat(var(--chip-count,5),minmax(0,1fr));gap:5px;flex:1;min-width:0;margin-left:auto;max-width:340px}
.teacher-activity-chip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 1px;border:1px solid var(--n-e5dfd3,#e5dfd3);border-radius:7px;background:var(--n-f5f1e9,#f5f1e9);color:var(--n-8a8172,#8a8172);line-height:1.35;font-size:10px;font-weight:500}
.teacher-activity-chip b{font-size:11px;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.teacher-activity-chip.started{background:var(--n-fff1d5,#fff1d5);border-color:var(--n-e6cfa4,#e6cfa4);color:var(--n-956a2d,#956a2d)}
.teacher-activity-chip.done{background:var(--i-e9f3e5,#e9f3e5);border-color:var(--i-c7dbbd,#c7dbbd);color:var(--i-46733b,#46733b)}
.teacher-homework-filter{margin:0 0 12px}
.teacher-book-select{display:flex;align-items:center;gap:10px;margin:0 0 5px;font-size:11px;font-weight:700}
.teacher-book-select select{min-width:0;flex:1;margin:0;padding:8px 10px;font-size:12px;max-width:100%;min-height:44px;border-color:var(--n-e5dccf,#e5dccf);border-radius:9px;background:var(--n-fffdf8,#fffdf8);color:var(--teacher-ink)}
.teacher-detail-days{display:flex;gap:5px;margin:0;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 4px}
.teacher-detail-days button{min-height:44px;flex:1 0 43px;padding:7px 8px;border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;color:var(--n-8a7e6e,#8a7e6e);font-size:12px;white-space:nowrap}
.teacher-detail-days button.selected{background:transparent;color:var(--n-65431e,#65431e);border-bottom-color:var(--n-bd965f,#bd965f);font-weight:750}
.teacher-detail-days button:hover:not(:disabled){background:var(--n-fff7e7,#fff7e7);filter:none}
.teacher-activity-results{list-style:none;margin:0;padding:0}
.teacher-activity-result{display:grid;grid-template-columns:minmax(80px,1fr) auto auto auto;align-items:center;gap:12px;min-height:38px;padding:7px 0;border:0;border-bottom:1px solid var(--n-eee6db,#eee6db);background:transparent;font-size:12px;line-height:1.6;white-space:nowrap}
.teacher-activity-result:last-child{border-bottom:0}
.teacher-activity-result>strong{font-size:12px;font-weight:650;letter-spacing:-.25px}
.teacher-activity-count{min-width:50px;text-align:right;font-variant-numeric:tabular-nums;color:var(--n-706756,#706756)}
.teacher-activity-result.done .teacher-activity-count{color:var(--i-4a793d,#4a793d);font-weight:700}
.teacher-activity-result .teacher-score-line{min-width:60px;text-align:right;color:var(--n-8a6a40,#8a6a40);font-size:11px;font-variant-numeric:tabular-nums;word-break:keep-all}
.teacher-activity-stamps{color:var(--i-a39b90,#a39b90);font-size:10px;font-variant-numeric:tabular-nums}
.teacher-activity-stamps.earned{color:var(--i-b84d40,#b84d40)}
.teacher-recordings-title{font-size:12px;line-height:1.6;margin:18px 0 4px;font-weight:700}
.teacher-best-recordings{list-style:none;padding:0;margin:0}
.teacher-best-recordings>.field-help{font-size:11px;padding:8px 0}
.teacher-best-recording{padding:10px 0;border-top:1px solid var(--n-eee6db,#eee6db)}
.teacher-recording-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.teacher-recording-heading p{min-width:0;flex:1;margin:0;font:12px/1.6 var(--font-en),Arial,'Noto Sans KR',sans-serif;overflow-wrap:anywhere}
.teacher-recording-heading p>span{color:var(--n-a38b6c,#a38b6c)}
.teacher-recording-heading>span{flex-shrink:0;font-size:10px;line-height:1.8;color:var(--n-8a6a40,#8a6a40);font-variant-numeric:tabular-nums}
.teacher-best-recording audio{display:block;width:100%;max-width:500px;height:36px;margin-top:6px}
.teacher-management{margin:0;border-radius:15px;background:var(--n-fffdf8,#fffdf8)}
.teacher-management .academy-management{margin-top:10px}
.teacher-management .teacher-section-heading{margin:0 0 12px}
@media(max-width:420px){.teacher-welcome{gap:5px}.teacher-welcome h1{font-size:15px}.teacher-activity-student>summary{gap:6px;padding:11px 10px}.teacher-activity-student>summary>strong{flex-basis:55px;font-size:13px;min-width:30px}.teacher-activity-chips{gap:3px}.teacher-activity-chip{font-size:9px;padding:4px 0;border-radius:6px}.teacher-activity-chip b{font-size:10px}.teacher-activity-student>summary>.teacher-chevron{font-size:17px}.teacher-activity-result{grid-template-columns:minmax(70px,1fr) auto auto auto;gap:7px;font-size:10px}.teacher-activity-result>strong{font-size:10px}.teacher-activity-count{min-width:40px}.teacher-activity-result .teacher-score-line{font-size:10px;min-width:51px}.teacher-activity-stamps{font-size:9px}.teacher-book-select{gap:7px}.teacher-detail-days{gap:4px}.teacher-detail-days button{padding:7px 4px;flex-basis:42px}}
@media(min-width:680px){.teacher-activity-student>summary{gap:15px}.teacher-activity-result{gap:20px}}

/* Student management is one entry; class settings belongs to the navigation row. */
.teacher-primary-tabs{display:flex;align-items:center;gap:inherit;min-width:0}
.teacher-main-tabs .teacher-settings-button{margin-left:auto;flex:0 0 38px;min-width:38px;width:38px;padding:6px;gap:0;font-size:22px}
.teacher-main-tabs .teacher-settings-button[aria-pressed="true"]{color:var(--n-744c25,#744c25);background:var(--n-fff0d0,#fff0d0);border-radius:8px}
.teacher-management-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.teacher-management-actions button{font-size:12px;padding:8px 11px;white-space:nowrap}
@media(max-width:420px){.teacher-main-tabs{gap:10px}.teacher-primary-tabs{gap:16px}.teacher-main-tabs .teacher-settings-button{flex-basis:32px;min-width:32px;width:32px;font-size:21px}.teacher-management-actions{gap:5px}.teacher-management-actions button{font-size:11px;padding:7px 9px}}

/* Keep all five destinations aligned, including narrow teacher screens. */
.teacher-main-tabs{gap:0;justify-content:space-between;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:1px}
.teacher-main-tabs::-webkit-scrollbar{display:none}
.teacher-primary-tabs{display:contents}
.teacher-main-tabs button{flex:1 0 auto;gap:5px;padding:10px 7px;font-size:14px}
.teacher-main-tabs .teacher-nav-management{margin:0}
.teacher-library-navigation{margin:0 0 15px}
.teacher-library-category-tabs{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 1px 7px;scrollbar-width:thin}
.teacher-library-category-tabs button{flex:0 0 auto;min-height:40px;max-width:200px;padding:8px 14px;border:1px solid var(--n-ded4c5,#ded4c5);border-radius:10px;background:var(--n-eee7dc,#eee7dc);color:var(--n-6b6155,#6b6155);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.teacher-library-category-tabs button.selected{background:var(--n-fff3d3,#fff3d3);border-color:var(--n-c79b5f,#c79b5f);color:var(--n-4d3920,#4d3920);font-weight:750}
.teacher-library-category-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.teacher-library-category-actions button{font-size:11px;min-height:34px;padding:5px 0;color:var(--n-7d6b54,#7d6b54)}
.teacher-library-category-form{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:10px 0}
.teacher-library-category-form label{font-size:12px;width:100%}
.teacher-library-category-form input{flex:1;min-width:100px;min-height:40px;margin:0;padding:8px 10px;font-size:13px}
.teacher-library-category-form button{font-size:12px;padding:8px 12px;min-height:40px}
.teacher-book-category{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:12px}
.teacher-book-category select{flex:1;min-width:0;max-width:260px;padding:7px 10px;min-height:38px;font-size:12px;margin:0}
.teacher-class-book-picker{border-top:1px solid var(--teacher-line);margin:16px 0 0;padding-top:14px}
.teacher-class-books-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.teacher-class-books-heading h3{margin:0;font-size:14px}
.teacher-class-books-heading button{padding:7px 10px;font-size:11px;min-height:38px}
.teacher-class-book-picker>.field-help{font-size:11px;margin:7px 0 10px}
.teacher-class-books-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:350px;overflow:auto;overscroll-behavior:contain}
.teacher-class-books-options label{display:flex;align-items:center;gap:8px;border:1px solid var(--n-e5dccd,#e5dccd);border-radius:9px;background:var(--n-fffdf8,#fffdf8);padding:9px;font-size:12px;min-height:42px;cursor:pointer}
.teacher-class-books-options input{width:17px;height:17px;flex:0 0 17px;padding:0;margin:0;accent-color:var(--n-986a3d,#986a3d)}
.teacher-class-books-options span{min-width:0;overflow-wrap:anywhere}
.teacher-class-books-options .teacher-book-activity-badge{flex:none;margin-left:auto;overflow-wrap:normal}
@media(max-width:540px){.teacher-main-tabs button{font-size:11px;gap:3px;padding:10px 4px}.teacher-main-tabs button svg{width:15px;height:15px}.teacher-class-books-options{grid-template-columns:1fr}}
@media(max-width:350px){.teacher-main-tabs button{font-size:10px;padding:10px 2px;gap:2px}.teacher-main-tabs button svg{width:13px;height:13px}}

/* Category and class strips swipe sideways, keep their place and fade only toward hidden tabs. */
.teacher-library-category-tabs,.teacher-class-tabs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.teacher-library-category-tabs>button,.teacher-class-tabs>button{scroll-snap-align:start}
.teacher-library-category-tabs[data-fade="end"],.teacher-class-tabs[data-fade="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
.teacher-library-category-tabs[data-fade="start"],.teacher-class-tabs[data-fade="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px);mask-image:linear-gradient(90deg,transparent,#000 16px)}
.teacher-library-category-tabs[data-fade="both"],.teacher-class-tabs[data-fade="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.teacher-library-category-actions .teacher-category-presets{min-height:34px;padding:6px 11px;border:1px dashed var(--n-c9a273,#c9a273);border-radius:9px;background:var(--n-fff8ea,#fff8ea);color:var(--n-7a5428,#7a5428);font-size:11px;font-weight:700}
.teacher-category-presets span{font-weight:500;color:var(--n-9a7a55,#9a7a55)}
.teacher-library-category-actions .teacher-category-presets:hover:not(:disabled){background:var(--n-fff0d6,#fff0d6);filter:none}
.teacher-category-order{margin:8px 0 2px;padding:12px;border:1px solid var(--teacher-line);border-radius:13px;background:var(--n-fffdf8,#fffdf8)}
.teacher-category-order-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.teacher-category-order-heading h3{margin:0;font-size:13px}
.teacher-category-order-heading button{min-height:34px;padding:6px 12px;font-size:11px}
.teacher-category-order>.field-help{margin:5px 0 9px;font-size:11px;line-height:1.6}
.teacher-category-order-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.teacher-category-row{position:relative;display:flex;align-items:center;gap:6px;min-height:46px;padding:3px 3px 3px 12px;border:1px solid var(--n-e8dfd1,#e8dfd1);border-radius:11px;background:var(--n-ffffff,#fff);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.teacher-category-row>strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.teacher-category-number{flex-shrink:0;width:20px;font-size:12px;font-weight:700;color:var(--n-a08762,#a08762)}
.teacher-category-row button{display:grid;place-items:center;width:40px;min-height:40px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--n-8c7759,#8c7759);font-size:18px;line-height:1}
.teacher-category-row button:hover:not(:disabled){background:var(--n-f8ecd9,#f8ecd9);filter:none}
.teacher-category-row button:disabled,.teacher-category-row button[aria-disabled="true"]{color:var(--n-c5bba9,#c5bba9);opacity:.65;cursor:default}
.teacher-category-row .teacher-drag-handle{font-size:23px;cursor:grab;touch-action:pan-y}
.teacher-category-row.is-previewing{transition:transform .16s ease;will-change:transform}
.teacher-category-row.is-dragging{border:1px dashed var(--n-be996b,#be996b);background:var(--n-f8ead5,#f8ead5);cursor:grabbing}
.teacher-category-row.is-dragging>*{opacity:0}
.teacher-category-row.is-drop-target{border-color:var(--n-b07e49,#b07e49);background:var(--n-fdf1d9,#fdf1d9)}
@media(max-width:540px){.teacher-library-category-tabs{gap:6px}.teacher-library-category-tabs>button{flex:0 0 calc((100% - 24px)/5);min-width:0;max-width:none;padding:8px 3px;text-align:center;font-size:13px}}
@media(prefers-reduced-motion:reduce){.teacher-category-row.is-previewing{transition:none}}

/* Six destinations: on phones each entry stacks its icon over a short label so all fit at 375px. */
@media(max-width:540px){.teacher-main-tabs{overflow:visible}.teacher-main-tabs button{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;min-height:54px;padding:8px 0 7px;font-size:11px;letter-spacing:-.6px;line-height:1.2}.teacher-main-tabs button svg{width:19px;height:19px}.teacher-main-tabs button>span{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}}
@media(max-width:350px){.teacher-main-tabs button{font-size:10px;letter-spacing:-.8px}.teacher-main-tabs button svg{width:17px;height:17px}}

/* Activities tab (owner, 2026-10-28): three stacked sections (단어, 문장, 파닉스), each a grid of four icon tiles a row
   at every width; a tapped tile opens one guide panel right below its row in its own section. */
.teacher-activity-sections{display:grid;gap:16px;margin:0}
.teacher-activity-section{min-width:0}
.teacher-activity-section+.teacher-activity-section{padding-top:14px;border-top:1px solid var(--n-eadfcd,#eadfcd)}
.teacher-activity-section-title{display:flex;flex-wrap:wrap;align-items:center;gap:0 7px;min-width:0;margin:0 0 8px;padding:0 2px;color:var(--teacher-ink);font-size:14px;font-weight:800;line-height:1.4;letter-spacing:-.3px;word-break:keep-all}
.teacher-activity-section-title::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--i-7fae62,#7fae62)}
.teacher-activity-section.is-sentence .teacher-activity-section-title::before{background:var(--i-6f8fc4,#6f8fc4)}
.teacher-activity-section.is-phonics .teacher-activity-section-title::before{background:var(--i-c47a9e,#c47a9e)}
.teacher-activity-section.is-speaking-game .teacher-activity-section-title::before{background:var(--i-d08a3c,#d08a3c)}
.teacher-activity-section-title small{color:var(--n-6f6350,#6f6350);font-size:11.5px;font-weight:650;letter-spacing:-.2px}
/* 스피킹 게임 › 학생끼리 대결 (학원 전체 · 같은 반만 · 끄기): under the section's tiles; the box keeps its size while it is
   read or saved, and the meta line keeps one line's room so nothing below moves when the last change line arrives. */
.teacher-speaking-friends{margin:10px 0 0;padding:11px 12px 10px;border:1px solid var(--n-ebd6b2,#ebd6b2);border-radius:14px;background:var(--n-fffaf0,#fffaf0)}
.teacher-speaking-friends-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.teacher-speaking-friends-title{flex:none;color:var(--teacher-ink);font-size:14px;font-weight:800;letter-spacing:-.3px}
.teacher-speaking-friends-options{display:flex;flex:1 1 240px;min-width:0;max-width:440px;gap:6px}
.teacher-speaking-friends-option{flex:1 1 0;min-width:0;min-height:40px;padding:8px 6px;border:1px solid var(--n-ded4c5,#ded4c5);border-radius:10px;background:var(--n-eee7dc,#eee7dc);color:var(--n-6b6155,#6b6155);font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher-speaking-friends-option.selected{background:var(--n-fff3d3,#fff3d3);border-color:var(--n-c79b5f,#c79b5f);color:var(--n-4d3920,#4d3920);font-weight:800}
.teacher-speaking-friends-option[aria-disabled="true"]{cursor:default}
.teacher-speaking-friends-option[aria-disabled="true"]:not(.selected){opacity:.72}
.teacher-speaking-friends-options[aria-busy="true"] .teacher-speaking-friends-option{cursor:progress}
.teacher-speaking-friends-help{margin:8px 0 0;color:var(--n-6f6350,#6f6350);font-size:12px;line-height:1.5;word-break:keep-all}
.teacher-speaking-friends-meta{min-height:1.5em;margin:4px 0 0;color:var(--teacher-muted);font-size:12px;line-height:1.5;word-break:keep-all}
.teacher-speaking-friends-meta .warning{color:var(--i-a5402f,#a5402f)}
.teacher-activity-grid{--guide-gap:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--guide-gap);margin:0}
.teacher-activity-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:96px;margin:0;padding:13px 3px 9px;border:1px solid var(--teacher-line);border-radius:15px;background:var(--n-fffdf8,#fffdf8);color:var(--teacher-ink);font-size:12px;font-weight:750;line-height:1.3;letter-spacing:-.3px;text-align:center;box-shadow:0 1px 2px #4b341f0d;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.teacher-activity-tile:hover:not(:disabled){filter:none;border-color:var(--n-e2cba6,#e2cba6);background:var(--n-fff8ec,#fff8ec)}
.teacher-activity-tile-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31);transition:transform .18s ease,background .18s ease}
.teacher-activity-tile-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.teacher-activity-tile-name{display:block;max-width:100%;word-break:keep-all;overflow-wrap:anywhere}
/* 준비 중 (registry preview): a dashed tile with a badge; a demo only, never picked. The dimmed look is on the icon
   and border; the name keeps 4.5:1. On phones the tile is too narrow for a corner badge beside the icon, so the
   badge sits centred on the tile's top edge, clear of the icon (the grid gap leaves room above it). */
.teacher-activity-tile-soon{position:absolute;z-index:1;top:5px;right:5px;padding:2px 6px;border-radius:999px;background:var(--n-fdecc8,#fdecc8);color:var(--n-7a5418,#7a5418);font-size:10px;font-weight:750;line-height:1.2;white-space:nowrap}
@media(max-width:540px){.teacher-activity-tile-soon{top:-6px;right:auto;left:50%;transform:translateX(-50%);box-shadow:0 0 0 2px var(--cream,var(--n-fffaf2,#fffaf2))}}
.teacher-activity-tile.is-preview{border-style:dashed;border-color:var(--n-ddd2c1,#ddd2c1);background:var(--n-f6f2eb,#f6f2eb);box-shadow:none}
.teacher-activity-tile.is-preview.is-picking{opacity:.55;cursor:not-allowed}
.teacher-activity-tile.is-preview .teacher-activity-tile-icon{background:var(--n-ebe5db,#ebe5db);color:var(--n-a0958a,#a0958a)}
.teacher-activity-tile.is-preview .teacher-activity-tile-name{color:var(--n-6f675b,#6f675b);font-weight:650}
.teacher-activity-tile[aria-expanded="true"]{border-style:solid;border-color:var(--n-c79b5f,#c79b5f);background:var(--n-fff3d3,#fff3d3);box-shadow:0 0 0 1px var(--n-c79b5f,#c79b5f),0 6px 14px var(--n-8d5d311f,#8d5d311f)}
.teacher-activity-tile[aria-expanded="true"] .teacher-activity-tile-icon{background:var(--n-ffe2ad,#ffe2ad);transform:translateY(-1px) scale(1.05)}
.teacher-activity-tile.is-preview[aria-expanded="true"] .teacher-activity-tile-icon{background:var(--n-efe5d4,#efe5d4)}
.teacher-activity-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.teacher-activity-guide{grid-column:1/-1;position:relative;min-width:0;margin:2px 0 4px;padding:12px;border:1px solid var(--n-ebd6b2,#ebd6b2);border-radius:16px;background:var(--n-fff8ea,#fff8ea);box-shadow:0 8px 20px var(--n-8d5d3114,#8d5d3114)}
/* The open panel shows at once at its final look: no fade in, no pulse (owner, 2026-10-30: "엑티비티 미리보기 탭 켤때 깜빡깜빡
   하는 효과 없애줘"; it used to carry is-opening, which the busy rule below turned into a pulse for as long as it was open). */
/* The caret sits over the open tile's column (--guide-pos is its centre as a share of the row). */
.teacher-activity-guide-caret{position:absolute;top:-8px;left:calc((100% + var(--guide-gap,8px))*var(--guide-pos,.125) - var(--guide-gap,8px)/2 - 8px);width:14px;height:14px;border:1px solid var(--n-ebd6b2,#ebd6b2);border-right:0;border-bottom:0;border-radius:3px 0 0 0;background:var(--n-fff8ea,#fff8ea);transform:rotate(45deg)}
/* Panel head: the activity name (and 준비 중), the facts line, 체험하기 and 닫기 on one row, then the demo (owner, 2026-10-29). */
.teacher-activity-guide-head{display:flex;align-items:center;gap:6px 8px;min-width:0;margin:0 0 8px}
.teacher-activity-guide h4{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;flex:1;min-width:0;margin:0;font-size:15px;line-height:1.35;letter-spacing:-.4px;color:var(--n-4d3920,#4d3920);word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-state{flex:none;padding:2px 8px;border-radius:999px;background:var(--n-ebe4d8,#ebe4d8);color:var(--n-665b4c,#665b4c);font-size:10.5px;font-weight:750;line-height:1.5}
.teacher-activity-state.is-soon{background:var(--i-fdecc8,#fdecc8);color:var(--i-7a5418,#7a5418)}
.teacher-activity-soon{margin:0;padding:6px 10px;border-radius:9px;background:var(--n-fdf1d8,#fdf1d8);color:var(--n-7a5418,#7a5418);font-size:11.5px;font-weight:700;line-height:1.5;word-break:keep-all}
.teacher-activity-guide-body{display:grid;gap:12px;min-width:0}
.teacher-activity-guide-body>.activity-demo{justify-self:center;width:100%;max-width:380px;margin:0}
.teacher-activity-facts{margin:0;padding:6px 10px;border:1px solid var(--n-f0e0c4,#f0e0c4);border-radius:9px;background:var(--n-fffdf8,#fffdf8);color:var(--n-6f604c,#6f604c);font-size:11.5px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-facts>span{white-space:nowrap}
/* 교재에 넣기: the toggle above the grid (선택 취소 while picking), tiles as numbered toggles and a sticky bar with the book, its Days (several at once), the plan and 뺄 활동. */
.teacher-activity-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.teacher-activity-toolbar>.teacher-order-help{flex:1;min-width:0;margin:0;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-select-toggle{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:44px;padding:6px 12px 6px 10px;border:1px solid var(--n-d7b37f,#d7b37f);border-radius:999px;background:var(--n-fff6e2,#fff6e2);color:var(--n-7a5428,#7a5428);font-size:12px;font-weight:800;white-space:nowrap}
.teacher-activity-select-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.teacher-activity-select-toggle.is-cancel{border-color:var(--n-d9cdb9,#d9cdb9);background:var(--n-fffdf8,#fffdf8);color:var(--n-6f5f49,#6f5f49);font-weight:750}
.teacher-activity-select-toggle:hover:not(:disabled){filter:none}
.teacher-activity-tile-pick{position:absolute;z-index:1;top:6px;left:6px;width:19px;height:19px;border:2px solid var(--n-a0907a,#a0907a);border-radius:50%;background:var(--n-ffffff,#fff)}
.teacher-activity-tile-check{position:absolute;z-index:1;top:5px;left:5px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--i-3f7a35,#3f7a35);color:var(--i-ffffff,#fff);font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--i-ffffff,#fff)}
.teacher-activity-tile.is-picked{border-style:solid;border-color:var(--n-3f7a35,#3f7a35);background:var(--n-eef6ea,#eef6ea);box-shadow:0 0 0 1px var(--n-3f7a35,#3f7a35),0 6px 14px #3f6b3424}
.teacher-activity-tile.is-picked:hover:not(:disabled){border-color:var(--n-3f7a35,#3f7a35);background:var(--n-e6f2e0,#e6f2e0)}
.teacher-activity-tile.is-picked .teacher-activity-tile-icon{background:var(--n-d9ecd0,#d9ecd0);color:var(--n-3f6b34,#3f6b34)}
.teacher-activity-tile.is-picked .teacher-activity-tile-name{color:var(--n-2f5327,#2f5327);font-weight:800}
/* Room under a focused or scrolled-to tile, so the sticky bar never hides it. */
html:has([data-activity-select-bar]){scroll-padding-bottom:150px}
.teacher-activity-sections.is-picking .teacher-activity-tile{scroll-margin-bottom:150px}
.teacher-activity-selectbar{position:sticky;bottom:8px;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"count pickers actions" "days days days" "level level level" "note note note" "drops drops drops" "retry retry retry";align-items:center;gap:8px 10px;margin:14px 0 0;padding:10px 10px 10px 14px;border:1px solid var(--n-9fc28f,#9fc28f);border-radius:14px;background:var(--n-f3f9effa,#f3f9effa);box-shadow:0 8px 22px #3f6b3424;font-size:12px;color:var(--n-3f5a37,#3f5a37)}
.teacher-activity-select-count{grid-area:count;font-size:13px;font-weight:800;white-space:nowrap;color:var(--n-2f5327,#2f5327)}
.teacher-activity-select-pickers{grid-area:pickers;display:flex;gap:6px;min-width:0}
.teacher-activity-select-pickers select{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:6px 8px;border:1px solid var(--n-cfdcc5,#cfdcc5);border-radius:10px;background:var(--n-ffffff,#fff);color:var(--teacher-ink);font-size:12.5px}
.teacher-activity-select-actions{grid-area:actions;display:flex;justify-content:flex-end;gap:6px}
.teacher-activity-select-actions button{min-width:44px;min-height:44px;padding:7px 14px;font-size:12.5px;font-weight:750;white-space:nowrap}
.teacher-activity-select-actions button[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
.teacher-activity-select-actions button[aria-disabled="true"]:hover{filter:none}
.teacher-activity-select-actions button[aria-disabled="true"]:active{transform:none}
.teacher-activity-select-note{grid-area:note;margin:0;color:var(--n-4d6545,#4d6545);font-size:11.5px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-select-note.warning{color:var(--i-a13e36,#a13e36)}
.teacher-activity-select-plan{display:block;color:var(--n-2f5327,#2f5327);font-size:12px}
.teacher-activity-selectbar>[data-activity-select-retry]{grid-area:retry;justify-self:start;min-height:44px;padding:6px 12px;font-size:12px}
@media(max-width:600px){html:has([data-activity-select-bar]){scroll-padding-bottom:210px}.teacher-activity-sections.is-picking .teacher-activity-tile{scroll-margin-bottom:210px}.teacher-activity-selectbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"count actions" "pickers pickers" "days days" "level level" "note note" "drops drops" "retry retry";gap:6px 8px;padding:7px 8px 8px 11px}.teacher-activity-select-note{font-size:11px}.teacher-activity-select-plan{font-size:11.5px}}
@media(min-width:600px){.teacher-activity-sections{gap:20px}.teacher-activity-section+.teacher-activity-section{padding-top:16px}.teacher-activity-grid{--guide-gap:10px}.teacher-activity-section-title{font-size:15px}.teacher-activity-tile{min-height:104px;font-size:12.5px}.teacher-activity-tile-icon{width:50px;height:50px}.teacher-activity-guide{padding:14px 18px 16px}}
@media(max-width:360px){.teacher-activity-grid{--guide-gap:6px}.teacher-activity-tile{min-height:90px;font-size:11px}.teacher-activity-tile-icon{width:40px;height:40px}.teacher-activity-tile-icon svg{width:27px;height:27px}.teacher-activity-guide{padding:10px}.teacher-activity-toolbar{gap:8px}.teacher-activity-select-toggle{padding:6px 10px 6px 8px}.teacher-activity-select-count{font-size:12px}.teacher-activity-select-actions button{padding:7px 11px}}
/* Mini student screens from dist/activity-guide.js: fixed example content on a gentle 7s loop. */
.guide-preview{display:grid;place-items:center;min-height:180px;padding:12px;border-radius:14px;background:linear-gradient(160deg,var(--n-f3ece0,#f3ece0),var(--n-ede2d0,#ede2d0));overflow:hidden}
.guide-screen{position:relative;width:min(100%,236px);padding:10px 12px 12px;border:1px solid var(--n-e6d9c6,#e6d9c6);border-radius:16px;background:var(--n-fffefb,#fffefb);box-shadow:0 8px 18px #4b341f17;color:var(--n-3d3a35,#3d3a35);text-align:center}
.guide-screen p{margin:0}
.guide-screen svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.guide-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:9px;font-size:10px;font-weight:700;color:var(--n-8a8172,#8a8172)}
.guide-pill{padding:2px 8px;border-radius:999px;background:var(--n-e8f1e3,#e8f1e3);color:var(--n-46733b,#46733b)}
.guide-pill.is-ranking{background:var(--i-fff0d0,#fff0d0);color:var(--i-9a5f1c,#9a5f1c)}
.guide-meta{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.guide-letters{display:flex;justify-content:center;gap:5px;margin:2px 0 8px}
.guide-letters b{--guide-rest:var(--n-faf7f1,#faf7f1);display:grid;place-items:center;width:26px;height:30px;border:1px solid var(--n-e3dccf,#e3dccf);border-radius:8px;background:var(--guide-rest);color:var(--n-5a5245,#5a5245);font-size:17px;font-weight:700;animation:guide-glow 7s infinite both}
.guide-letters .guide-l2{animation-delay:.5s}.guide-letters .guide-l3{animation-delay:1s}.guide-letters .guide-l4{animation-delay:1.5s}
.guide-word{display:inline-block;padding:0 8px;border-radius:9px;font-size:24px;font-weight:700;line-height:1.3;color:var(--n-2f3b63,#2f3b63);animation:guide-glow 7s 2.2s infinite both}
.guide-meaning{width:max-content;margin:3px auto 0!important;padding:1px 10px;border-radius:999px;font-size:13px;font-weight:700;color:var(--n-6a5a43,#6a5a43);animation:guide-glow 7s 3s infinite both}
.guide-say{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:10px!important;padding:6px 8px;border-radius:10px;background:var(--n-eef5ea,#eef5ea);color:var(--n-46733b,#46733b);font-size:11px;font-weight:750;animation:guide-pulse 7s 3.8s infinite both}
.guide-rounds{display:inline-flex;gap:3px}
.guide-rounds i{width:8px;height:8px;border-radius:50%;background:var(--n-e4ddd0,#e4ddd0)}
.guide-rounds i:nth-child(-n+2){background:var(--n-6b9a5d,#6b9a5d)}
.guide-rounds i:nth-child(3){background:var(--n-e3b866,#e3b866)}
.guide-rounds i.is-korean{box-sizing:border-box;border:1.5px solid var(--n-d6c8b0,#d6c8b0);background:transparent}
.guide-sentence{font-size:17px;font-weight:700;line-height:1.45;color:var(--n-2f3b63,#2f3b63)}
.guide-sentence span{--guide-rest:transparent;display:inline-block;padding:0 2px;border-radius:5px;animation:guide-glow 7s infinite both}
.guide-sentence .guide-w2{animation-delay:.45s}.guide-sentence .guide-w3{animation-delay:.9s}.guide-sentence .guide-w4{animation-delay:1.35s}
.guide-translation{margin-top:4px!important;font-size:12px;color:var(--n-7a6f5f,#7a6f5f)}
.guide-record{display:flex;align-items:center;justify-content:center;gap:10px;min-height:36px;margin-top:10px}
.guide-mic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--i-df6f50,#df6f50);color:var(--i-ffffff,#fff);animation:guide-ring 7s 2.4s infinite both}
.guide-screen .guide-mic svg{width:16px;height:16px}
.guide-score{font-size:15px;font-weight:800;color:var(--n-46733b,#46733b);animation:guide-pop 7s 4.2s infinite both}
.guide-score small{font-size:10px;font-weight:700;color:var(--n-7a8a6f,#7a8a6f)}
.guide-board{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;border-radius:12px;background:var(--i-e4f3ee,#e4f3ee)}
.guide-board>div{display:grid;gap:5px}
.guide-board b{display:grid;place-items:center;min-height:27px;padding:2px 4px;border:1px solid var(--i-cfe5dc,#cfe5dc);border-radius:8px;background:var(--n-ffffff,#fff);color:var(--n-35524a,#35524a);font-size:12px;font-weight:700}
.guide-board .guide-a1{animation:guide-pick-a1 7s infinite both}.guide-board .guide-a2{animation:guide-pick-a2 7s infinite both}
.guide-board .guide-b1{animation:guide-pick-b1 7s infinite both}.guide-board .guide-b2{animation:guide-pick-b2 7s infinite both}
.guide-plus{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;margin:-12px 0 0 -19px;border-radius:50%;background:var(--i-5fae74,#5fae74);color:var(--i-ffffff,#fff);font-size:13px;font-weight:800;opacity:0;pointer-events:none;box-shadow:0 4px 10px #2f6b4033}
.guide-plus-a{animation:guide-plus-a 7s infinite both}.guide-plus-b{animation:guide-plus-b 7s infinite both}
.guide-answer~.guide-plus{top:44%;animation:guide-plus-c 7s infinite both}
.guide-prompt{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:9px!important;font-size:14px;font-weight:750;color:var(--n-5d4a2f,#5d4a2f)}
.guide-answer{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;min-height:34px;margin-bottom:10px}
.guide-slot{display:grid;place-items:center;min-width:26px;height:32px;padding:0 5px;border-bottom:2px solid var(--n-c9b79b,#c9b79b);color:var(--n-2f3b63,#2f3b63);font-size:19px;font-weight:700}
.guide-tray{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.guide-tile{display:grid;place-items:center;min-width:30px;height:32px;padding:0 8px;border:1px solid var(--n-d9cbb5,#d9cbb5);border-radius:9px;background:var(--n-fff7e6,#fff7e6);color:var(--n-5a4630,#5a4630);font-size:16px;font-weight:700;box-shadow:0 2px 0 var(--n-e6d6bd,#e6d6bd);opacity:.3}
.guide-answer.is-chunks .guide-slot{min-width:34px;font-size:14px}
.guide-tray.is-chunks .guide-tile{font-size:13px}
.guide-slot .guide-k1{animation:guide-in-1 7s infinite both}.guide-slot .guide-k2{animation:guide-in-2 7s infinite both}.guide-slot .guide-k3{animation:guide-in-3 7s infinite both}.guide-slot .guide-k4{animation:guide-in-4 7s infinite both}
.guide-tile.guide-k1{animation:guide-out-1 7s infinite both}.guide-tile.guide-k2{animation:guide-out-2 7s infinite both}.guide-tile.guide-k3{animation:guide-out-3 7s infinite both}.guide-tile.guide-k4{animation:guide-out-4 7s infinite both}
.guide-generic{display:grid;justify-items:center;gap:8px;padding:6px 2px}
.guide-generic-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31);animation:guide-float 3.2s ease-in-out infinite}
.guide-screen .guide-generic-icon svg{width:30px;height:30px;stroke-width:1.6}
.guide-generic p{font-size:12px;line-height:1.6;color:var(--n-6a5f50,#6a5f50);word-break:keep-all}
.guide-dots{display:flex;gap:5px}
.guide-dots i{width:6px;height:6px;border-radius:50%;background:var(--n-d6c3a2,#d6c3a2);animation:guide-float 1.4s ease-in-out infinite}
.guide-dots i:nth-child(2){animation-delay:.2s}.guide-dots i:nth-child(3){animation-delay:.4s}
/* Game scenes of word rain, hangman and phonics (older rules; every game demo is scripted and styled in
   activity-demo.css, whose scenes for the six games of 2026-10-28 need nothing here). */
.guide-sky{position:relative;height:104px;border-radius:12px;background:linear-gradient(var(--i-e6f2f6,#e6f2f6),var(--i-fdf7ec,#fdf7ec));box-shadow:inset 0 -12px 0 var(--i-e2cfa9,#e2cfa9);overflow:hidden}
.guide-drop{position:absolute;top:4px;padding:2px 9px;border:1.5px solid var(--n-e2d3b8,#e2d3b8);border-radius:999px;background:var(--n-ffffff,#fff);color:var(--n-403b35,#403b35);font-size:13px;font-weight:700;box-shadow:0 2px 0 var(--n-e7d9c3,#e7d9c3);animation:guide-fall 7s linear infinite both}
.guide-d1{left:6%;animation-delay:-2.4s}.guide-d2{left:38%;animation-name:guide-fall-hit}.guide-d3{left:68%;animation-delay:-4.8s}
.guide-rain-prompt{width:max-content;margin:7px auto 0!important;padding:3px 14px;border-radius:999px;background:var(--n-fff3d3,#fff3d3);color:var(--n-79562d,#79562d);font-size:13px;font-weight:800}
/* A missed word's 다시 나와요 sign on the ground (shown only by the scripted demo). */
.guide-rain-miss{position:absolute;left:calc(6% + 56px);bottom:14px;padding:0 7px;border:1px solid var(--i-eba596,#eba596);border-radius:999px;background:var(--i-fde9e4,#fde9e4);color:var(--i-b0402f,#b0402f);font-size:10px;font-weight:800;line-height:15px;white-space:nowrap;opacity:0;pointer-events:none}
.guide-balloons{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.guide-balloons i{position:relative;width:15px;height:19px;border-radius:50% 50% 46% 46%;background:#e6806a}
.guide-balloons i:nth-child(2n){background:#e9b949}.guide-balloons i:nth-child(3n){background:#7fb3a0}
.guide-balloons i:after{position:absolute;top:100%;left:50%;width:1px;height:9px;background:#b9a98f;content:''}
.guide-balloons i.is-away{animation:guide-away 7s ease-in infinite both}
.guide-keys{display:flex;justify-content:center;gap:4px;margin-top:2px}
.guide-keys b{display:grid;place-items:center;width:24px;height:28px;border:1px solid var(--n-e0d4c1,#e0d4c1);border-radius:7px;background:var(--n-fffaf2,#fffaf2);color:var(--n-5a4630,#5a4630);font-size:13px;font-weight:700;box-shadow:0 2px 0 var(--n-e7d9c3,#e7d9c3)}
.guide-keys b.is-used{opacity:.35;text-decoration:line-through}
.guide-phonics{position:relative;display:inline-block;margin:6px 0 16px!important;color:var(--n-2f3b63,#2f3b63);font-size:34px;font-weight:700;line-height:1.1;letter-spacing:1px}
.guide-red{color:var(--i-d4382c,#d4382c)}
.guide-r1,.guide-r2{display:inline-block;animation:guide-sound 7s infinite both}.guide-r2{animation-delay:1.6s}
.guide-arc{position:absolute;right:14%;bottom:-9px;left:41%;height:9px;border:2px solid var(--i-d4382c,#d4382c);border-top:0;border-radius:0 0 12px 12px}
.guide-done-chip{display:inline-block;margin-top:8px;padding:5px 12px;border-radius:999px;background:var(--i-2a8058,#2a8058);color:var(--i-ffffff,#fff);font-size:12px;font-weight:800;animation:guide-pulse 7s 4.6s infinite both}
.guide-listen{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 6px}
@keyframes guide-fall{from{transform:translateY(-26px)}to{transform:translateY(100px)}}
@keyframes guide-fall-hit{0%{transform:translateY(-26px)}38%{transform:translateY(30px)}42%,52%{border-color:var(--i-2a8058,#2a8058);background:var(--i-dff1e7,#dff1e7);color:var(--i-2a8058,#2a8058);transform:translateY(32px) scale(1.12);opacity:1}60%,100%{transform:translateY(32px) scale(.6);opacity:0}}
@keyframes guide-away{0%,30%{transform:none;opacity:1}55%,100%{transform:translate(8px,-34px);opacity:0}}
@keyframes guide-sound{0%,8%,32%,100%{transform:none}12%,18%,24%,28%{transform:translateY(-3px) scale(1.12)}}
@keyframes guide-glow{0%,15%,100%{background-color:var(--guide-rest,transparent);transform:none}4%,10%{background-color:var(--n-ffe2a8,#ffe2a8);transform:translateY(-2px)}}
@keyframes guide-pulse{0%,36%,100%{transform:none;box-shadow:0 0 0 0 var(--n-cfe4c600,#cfe4c600)}9%,28%{transform:scale(1.04);box-shadow:0 0 0 4px var(--n-cfe4c6,#cfe4c6)}}
@keyframes guide-ring{0%,32%,100%{box-shadow:0 0 0 0 var(--i-df6f5000,#df6f5000)}8%,24%{box-shadow:0 0 0 7px var(--i-df6f5033,#df6f5033)}}
@keyframes guide-pop{0%,40%,100%{opacity:0;transform:translateY(4px) scale(.85)}6%,30%{opacity:1;transform:none}}
@keyframes guide-pick-a1{0%,9%,98%,100%{background:var(--n-ffffff,#fff);border-color:var(--i-cfe5dc,#cfe5dc);opacity:1;transform:none}11%,27%{background:var(--n-fff1c7,#fff1c7);border-color:var(--n-e2b04f,#e2b04f);opacity:1;transform:translateY(-1px)}30%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:1;transform:none}35%,93%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:.12;transform:scale(.92)}}
@keyframes guide-pick-a2{0%,19%,98%,100%{background:var(--n-ffffff,#fff);border-color:var(--i-cfe5dc,#cfe5dc);opacity:1;transform:none}21%,27%{background:var(--n-fff1c7,#fff1c7);border-color:var(--n-e2b04f,#e2b04f);opacity:1;transform:translateY(-1px)}30%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:1;transform:none}35%,93%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:.12;transform:scale(.92)}}
@keyframes guide-pick-b1{0%,49%,98%,100%{background:var(--n-ffffff,#fff);border-color:var(--i-cfe5dc,#cfe5dc);opacity:1;transform:none}51%,67%{background:var(--n-fff1c7,#fff1c7);border-color:var(--n-e2b04f,#e2b04f);opacity:1;transform:translateY(-1px)}70%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:1;transform:none}75%,93%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:.12;transform:scale(.92)}}
@keyframes guide-pick-b2{0%,59%,98%,100%{background:var(--n-ffffff,#fff);border-color:var(--i-cfe5dc,#cfe5dc);opacity:1;transform:none}61%,67%{background:var(--n-fff1c7,#fff1c7);border-color:var(--n-e2b04f,#e2b04f);opacity:1;transform:translateY(-1px)}70%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:1;transform:none}75%,93%{background:var(--n-c9ebd6,#c9ebd6);border-color:var(--n-7fbf98,#7fbf98);opacity:.12;transform:scale(.92)}}
@keyframes guide-plus-a{0%,28%,100%{opacity:0;transform:scale(.7)}31%{opacity:1;transform:scale(1)}40%{opacity:0;transform:translateY(-12px)}}
@keyframes guide-plus-b{0%,68%,100%{opacity:0;transform:scale(.7)}71%{opacity:1;transform:scale(1)}80%{opacity:0;transform:translateY(-12px)}}
@keyframes guide-plus-c{0%,52%,100%{opacity:0;transform:scale(.7)}55%{opacity:1;transform:scale(1)}66%{opacity:0;transform:translateY(-12px)}}
@keyframes guide-in-1{0%,13%{opacity:0;transform:translateY(10px)}17%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes guide-in-2{0%,23%{opacity:0;transform:translateY(10px)}27%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes guide-in-3{0%,33%{opacity:0;transform:translateY(10px)}37%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes guide-in-4{0%,43%{opacity:0;transform:translateY(10px)}47%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes guide-out-1{0%,11%,97%,100%{opacity:1;transform:none}15%,92%{opacity:.3;transform:scale(.9)}}
@keyframes guide-out-2{0%,21%,97%,100%{opacity:1;transform:none}25%,92%{opacity:.3;transform:scale(.9)}}
@keyframes guide-out-3{0%,31%,97%,100%{opacity:1;transform:none}35%,92%{opacity:.3;transform:scale(.9)}}
@keyframes guide-out-4{0%,41%,97%,100%{opacity:1;transform:none}45%,92%{opacity:.3;transform:scale(.9)}}
@keyframes guide-float{0%,100%{transform:none}50%{transform:translateY(-3px)}}
/* Without motion the mock shows its finished state: the word built, the tiles used, nothing looping. */
@media(prefers-reduced-motion:reduce){.guide-preview,.guide-preview *{animation:none!important}.teacher-activity-tile,.teacher-activity-tile-icon{transition:none}}
.teacher-activity-slot{flex:0 0 16px;font-size:12px;font-weight:750;color:var(--n-a08762,#a08762);text-align:center;font-variant-numeric:tabular-nums}
.teacher-activity-mini-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* The student roster (학생관리) picks a student's own 1-5 activities (compact rows and chips since 2026-10-30). */
.teacher-activity-counter{display:inline-grid;place-items:center;min-width:36px;padding:2px 8px;border-radius:999px;background:var(--n-eee7dc,#eee7dc);color:var(--n-6b6155,#6b6155);font-size:11px;font-variant-numeric:tabular-nums}
.teacher-activity-counter.is-full{background:var(--n-fff0d0,#fff0d0);color:var(--n-8a5a1f,#8a5a1f)}
.teacher-activity-chosen{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:0;padding:0;list-style:none}
.teacher-activity-chosen>li{min-width:0;display:flex;align-items:center;gap:6px;min-height:34px;padding:1px 2px;border:1px solid var(--n-e5dccd,#e5dccd);border-radius:8px;background:var(--n-ffffff,#fff);touch-action:pan-y}
.teacher-activity-chosen>li>strong{flex:1;min-width:0;font-size:12.5px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-mini-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:var(--n-fff1d9,#fff1d9);color:var(--n-8d5d31,#8d5d31)}
.teacher-activity-mini-icon svg{width:18px;height:18px}
.teacher-activity-warning{flex-shrink:0;padding:2px 7px;border-radius:999px;background:var(--i-fff0e7,#fff0e7);color:var(--i-ad5b3b,#ad5b3b);font-size:10px;font-weight:700;white-space:nowrap;cursor:help}
.teacher-activity-warning:before{content:'⚠ '}
.teacher-activity-shift{display:flex;gap:1px;flex-shrink:0}
.teacher-activity-shift button{display:grid;place-items:center;width:30px;min-height:30px;padding:2px;border:0;border-radius:7px;background:transparent;color:var(--n-8c7759,#8c7759);font-size:16px;line-height:1}
.teacher-activity-shift button:hover:not(:disabled){background:var(--n-f8ecd9,#f8ecd9);filter:none}
.teacher-activity-shift button:disabled{color:var(--n-d0c6b5,#d0c6b5);background:transparent}
.teacher-activity-options{display:flex;flex-wrap:wrap;gap:4px}
.teacher-activity-options label{display:flex;align-items:center;gap:5px;min-height:30px;padding:3px 10px 3px 7px;border:1px solid var(--n-e5dccd,#e5dccd);border-radius:999px;background:var(--n-fffdf8,#fffdf8);font-size:12px;cursor:pointer}
.teacher-activity-options label:has(input:checked){border-color:var(--n-c79b5f,#c79b5f);background:var(--n-fff3d3,#fff3d3);color:var(--n-5d3f1f,#5d3f1f)}
.teacher-activity-options label>span{min-width:0;overflow-wrap:anywhere}
.teacher-activity-options input{width:15px;height:15px;flex:0 0 15px;margin:0;padding:0;accent-color:var(--n-986a3d,#986a3d)}
.teacher-activity-options label:has(input:disabled:not(:checked)){opacity:.5;cursor:default}
.teacher-activity-chips{max-width:calc(var(--chip-count,5)*68px)}

.teacher-activity-subhead{margin:0 0 4px;font-size:11px;font-weight:750;color:var(--n-8a7a64,#8a7a64);letter-spacing:-.2px}
/* A student whose own books leave out the selected book (학생관리 › 교재). */
.teacher-activity-chips.teacher-activity-nobook{display:flex;align-items:center;justify-content:center;max-width:150px;padding:6px 10px;border:1px dashed var(--n-d8cdbd,#d8cdbd);border-radius:8px;background:var(--n-faf7f1,#faf7f1);color:var(--n-8a8172,#8a8172);font-size:11px;font-weight:600;white-space:nowrap}
.teacher-class-book-tabs{margin:2px 0 10px}.teacher-class-book-count{display:inline-block;min-width:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--n-c79b5f,#c79b5f);color:var(--n-ffffff,#fff);font-size:11px;font-weight:750;line-height:18px;text-align:center;vertical-align:1px}
/* 교재관리: a book row's activity badges (활동 정함, Day 3·5 따로); its 활동 section is at the end of this file. */
.teacher-book-row>summary:has(.teacher-book-activity-badges:not(:empty)){flex-wrap:wrap;row-gap:5px}
.teacher-book-activity-badges{display:flex;flex-wrap:wrap;gap:4px;flex:1 0 100%;min-width:0;margin:-3px 0 0 28px}
.teacher-book-activity-badges:empty{display:none}
.teacher-book-activity-badge{padding:1px 8px;border-radius:999px;background:var(--n-e9f3e5,#e9f3e5);color:var(--n-46733b,#46733b);font-size:10.5px;font-weight:750;line-height:1.7;white-space:nowrap}

/* 2026-10-29: activities are chosen in books. The Activities tab panel has 체험하기 and 닫기 (no 설정); 교재에 넣기
   takes several Days at once; a book row shows its activity summary and 활동 고르기; 반설정 only picks books. */
.teacher-activity-guide>.teacher-activity-facts{margin:0 0 8px}
/* 스피킹 게임 panel (그림 스무고개): what it is and what it teaches around the facts line; the small English name. */
.teacher-activity-guide>.teacher-activity-about{margin:0 0 8px;color:var(--n-4d3920,#4d3920);font-size:12.5px;font-weight:650;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-guide>.teacher-activity-about.is-teaches{color:var(--n-6f604c,#6f604c);font-weight:600}
.teacher-activity-guide h4 small{color:var(--n-8a7a64,#8a7a64);font-size:11.5px;font-weight:650;letter-spacing:0}
/* 스피킹 게임 샘플 (2026-10-30, spec sgsamples §A.7): the small 샘플 pill beside the game name. */
.teacher-activity-guide h4 .teacher-activity-sample{align-self:center;flex:none;padding:1px 8px;border-radius:999px;background:var(--n-fdecc8,#fdecc8);color:var(--n-8a5a12,#8a5a12);font-size:11px;font-weight:800;line-height:1.5;letter-spacing:0}
.teacher-activity-guide>.teacher-activity-soon{margin:0 0 8px}
/* 철자 퍼즐 panel: the one line saying the level is a book setting, in the facts line's size, 8px above the buttons. */
.teacher-activity-guide>.teacher-activity-level-note{margin:0 0 8px;color:var(--n-6f604c,#6f604c);font-size:11.5px;font-weight:650;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.teacher-activity-guide-actions button{min-height:44px;margin:0;padding:8px 18px;font-size:13px;font-weight:750;white-space:nowrap}
@media(max-width:420px){.teacher-activity-guide-actions{flex-wrap:nowrap}.teacher-activity-guide-actions button{flex:1 1 0;min-width:0;padding:8px 10px}}
/* 교재에 넣기 › 회차: chips that wrap (never a sideways scroll); a long book scrolls inside the box. Pressed chips
   also carry ✓, so the state never depends on colour. */
html:has([data-activity-book-days]){scroll-padding-bottom:230px}
.teacher-activity-sections.is-picking .teacher-activity-tile{scroll-margin-bottom:230px}
.teacher-activity-select-days{grid-area:days;display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-height:30vh;overflow-y:auto;overscroll-behavior:contain;padding:1px}
.teacher-activity-day-chip,.teacher-activity-drop-chip{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0;padding:5px 12px;border:1px solid var(--i-cfdcc5,#cfdcc5);border-radius:999px;background:var(--i-ffffff,#fff);color:var(--i-3f5a37,#3f5a37);font-size:12.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.teacher-activity-day-chip small{color:var(--n-62775a,#62775a);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.teacher-activity-day-chip[aria-pressed="true"]{border-color:var(--n-3f7a35,#3f7a35);background:var(--n-e3f1dc,#e3f1dc);color:var(--n-2f5327,#2f5327);box-shadow:inset 0 0 0 1px var(--n-3f7a35,#3f7a35)}
.teacher-activity-day-chip[aria-pressed="true"]::before,.teacher-activity-drop-chip[aria-pressed="true"]::before{content:'✓';font-weight:800}
.teacher-activity-day-chip:hover:not(:disabled),.teacher-activity-drop-chip:hover:not(:disabled){filter:none;background:var(--i-f0f7ec,#f0f7ec)}
.teacher-activity-select-note>.teacher-activity-select-plan{display:grid;gap:3px;margin:0;padding:0;list-style:none;color:var(--n-2f5327,#2f5327);font-size:12px;line-height:1.5}
.teacher-activity-select-plan>li.warning{color:var(--i-a13e36,#a13e36);font-weight:700}
.teacher-activity-select-drops{grid-area:drops;display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-height:24vh;overflow-y:auto;overscroll-behavior:contain;padding:1px}
.teacher-activity-select-drops>p{flex:1 0 100%;margin:0;color:var(--n-7a4b22,#7a4b22);font-size:11.5px;font-weight:700;line-height:1.5;word-break:keep-all}
.teacher-activity-drop-chip{border-color:var(--i-e4cbb8,#e4cbb8);color:var(--i-7a4b22,#7a4b22)}
.teacher-activity-drop-chip[aria-pressed="true"]{border-color:var(--i-b9513f,#b9513f);background:var(--i-fbe9e4,#fbe9e4);color:var(--i-8d3526,#8d3526);box-shadow:inset 0 0 0 1px var(--i-b9513f,#b9513f)}
/* The bar grew (Days and 뺄 활동): it is opaque, so nothing shows through it, and on phones each box keeps to a
   few rows (it scrolls inside itself) so the tiles above stay usable. */
.teacher-activity-selectbar:has([data-activity-book-days]){background:var(--n-f3f9ef,#f3f9ef)}
/* On phones the grown bar (Days, plan, 뺄 활동) flows in the page under the tiles instead of covering them: no
   sticky bar, no inner scroll boxes, every chip in sight. */
@media(max-width:600px){html:has([data-activity-book-days]){scroll-padding-bottom:0}.teacher-activity-sections.is-picking .teacher-activity-tile{scroll-margin-bottom:0}.teacher-activity-selectbar:has([data-activity-book-days]){position:static;box-shadow:none}.teacher-activity-select-days{max-height:none;overflow:visible;gap:5px}.teacher-activity-select-drops{max-height:none;overflow:visible;gap:5px}.teacher-activity-day-chip,.teacher-activity-drop-chip{padding:5px 10px;font-size:12px}.teacher-activity-select-plan{font-size:11.5px}}
/* 교재관리 › a book row: what the book's lists are, and 활동 고르기 (the book wizard). */
.teacher-book-activities{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;padding:10px 12px;border:1px solid var(--n-eadfcd,#eadfcd);border-radius:13px;background:var(--n-fffaf2,#fffaf2)}
.teacher-book-activity-summary{flex:1 1 200px;min-width:0;margin:0;color:var(--teacher-muted);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.teacher-book-activity-summary>span{margin-right:4px;font-weight:700}
.teacher-book-activity-summary>strong{color:var(--teacher-ink)}
.teacher-book-activities>button{min-height:44px;margin:0;padding:8px 16px;font-size:12.5px;white-space:nowrap}
/* 반설정 › 사용할 교재: where activities are chosen now. */
.teacher-class-books-activity-note{margin-top:-2px;color:var(--n-7b6a53,#7b6a53)}
/* 교재관리's heading button and the homework panel of an academy without books. */
.teacher-new-book{min-height:40px;white-space:nowrap}
.teacher-first-book{display:grid;justify-items:center;gap:10px}
.teacher-first-book>p{margin:0}
.teacher-first-book>button{min-height:44px}

/* 교재에 넣기: the last-picked activity's panel under the tiles (no caret), and the last 넣기 result under the
   toolbar. */
.teacher-activity-pick-guide{margin:14px 0 0}
.teacher-activity-guide.is-below{margin:0}
.teacher-activity-added{margin:0 0 10px;padding:9px 12px;border:1px solid var(--n-9fc28f,#9fc28f);border-radius:12px;background:var(--n-f3f9ef,#f3f9ef);color:var(--n-2f5327,#2f5327);font-size:13px;font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.teacher-activity-added::before{content:'✓ '}
.teacher-activity-added.warning{border-color:var(--i-e4b9a6,#e4b9a6);background:var(--i-fdf1ec,#fdf1ec);color:var(--i-8d3526,#8d3526)}
.teacher-activity-added.warning::before{content:'⚠ '}
/* 교재관리 rows: a book no class uses yet, and the confirmation after the book wizard saves. */
.teacher-book-hidden{color:var(--i-a13e36,#a13e36);font-weight:700}
.teacher-book-saved{margin:0 0 10px;padding:9px 12px;border:1px solid var(--n-9fc28f,#9fc28f);border-radius:12px;background:var(--n-f3f9ef,#f3f9ef);color:var(--n-2f5327,#2f5327);font-size:14px;font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
/* 반설정: 교재 배정 저장 again under the list, kept in reach at the bottom of a phone screen while unsaved. */
.teacher-class-books-footer{position:sticky;bottom:8px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:12px 0 0;padding:8px 10px;border:1px solid var(--n-eadfcd,#eadfcd);border-radius:12px;background:var(--n-fffaf2f5,#fffaf2f5);box-shadow:0 6px 16px #54482a14}
.teacher-class-books-footer p{flex:1 1 160px;margin:0;font-size:13px;color:var(--n-7a4b22,#7a4b22);font-weight:700}
.teacher-class-books-footer button{min-height:44px}
.teacher-resume-draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--n-f0c9b4,#f0c9b4);border-radius:14px;background:var(--n-fff0e7,#fff0e7)}
.teacher-resume-draft p{flex:1 1 220px;margin:0;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.teacher-resume-draft p strong{margin-right:4px}
.teacher-resume-draft button{min-height:44px}
/* No loading flashes (2026-10-30): a list with nothing to show yet keeps its place with rows of the final size; the
   loading words are for screen readers only. The rows are still (no shimmer sweeping across them: owner, 2026-10-30,
   "깜빡깜빡 하는 효과 없애줘"). */
.teacher-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.teacher-skeleton{display:flow-root}
.teacher-skeleton-row{display:block;box-sizing:border-box;height:75px;margin:0 0 10px;border:1px solid var(--teacher-line,var(--n-e6d9c6,#e6d9c6));border-radius:15px;background:var(--n-fbf6ee,#fbf6ee)}
.teacher-skeleton.is-option .teacher-skeleton-row{height:44px;margin-bottom:8px;border-radius:12px}
.teacher-skeleton.is-book .teacher-skeleton-row{height:66px}
.teacher-skeleton.is-filter .teacher-skeleton-row{height:99px;margin:0;border-radius:12px}
.teacher-class-settings-slot{display:contents}
.teacher-activity-day-chip.is-skeleton{width:84px;border-color:var(--n-e6eadf,#e6eadf);background:var(--n-f4f6f0,#f4f6f0)}
.teacher-activity-select-days.is-waiting{pointer-events:none}
.teacher-category-skeleton{flex:0 0 auto;width:72px;min-height:40px;border:1px solid var(--n-ece4d8,#ece4d8);border-radius:10px;background:var(--n-f4eee5,#f4eee5)}
/* A control that opens something (학생 화면 미리보기, 교재 고치기) says it is busy without blinking (owner, 2026-10-30:
   "엑티비티 미리보기 탭 켤때 깜빡깜빡 하는 효과 없애줘"): aria-busy and the progress cursor at once; only a read that takes longer
   than 0.4 s dims the control, once and steadily, until it ends (no pulse, no fade). Scoped to aria-busy so no other part's
   is-opening class picks it up (the activity panel pulsed through the old rule for as long as it was open). */
#schoolPanel .is-opening[aria-busy="true"]{cursor:progress;opacity:1;animation:teacher-busy 0s linear .4s both}
@keyframes teacher-busy{to{opacity:.6}}

/* 숙제관리 student detail: today's finished practice (what opens 랭킹 도전) and a kind ranked without being in 내 학습. */
.teacher-activity-mark{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--n-e8f3ec,#e8f3ec);color:var(--n-2f6b4f,#2f6b4f);font-size:11px;font-weight:700;line-height:1.6;vertical-align:1px;white-space:nowrap}
.teacher-ranking-chip{flex:0 0 auto;margin:0 6px;padding:1px 7px;border-radius:999px;background:var(--n-f1ece4,#f1ece4);color:var(--n-6f685f,#6f685f);font-size:11px;font-weight:700;line-height:1.6;white-space:nowrap;font-variant-numeric:tabular-nums}
.teacher-ranking-chip.is-open{background:var(--n-fbeee3,#fbeee3);color:var(--n-8a4b2c,#8a4b2c)}
/* A locked row keeps 랭킹 열림's place while another row shows it (review 2026-11-04): same words, drawn by CSS, never seen. */
.teacher-ranking-chip.is-placeholder{visibility:hidden}
.teacher-ranking-chip.is-placeholder::before{content:'랭킹 0/0 열림'}
/* A book setting's control (dist/builder-level-control.js, 2026-11-05, owner: "… 상자 속에 '알파벳 읽기 - 켜기 끄기' '난이도 -
   쉬움, 보통, 어려움' 이렇게 간략히 보이게 해주고 누르면 상세 설명이 나오도록 해줘"): a short label with a small i (it opens the
   setting's sheet, dist/book-option-detail.js), then the chips on one line; the chips wrap under the label only where the
   box is too narrow for both. 철자 퍼즐 · 문장 퍼즐 난이도 and 단어 익히기 알파벳 읽기 in the book row's 랭킹 도전 boxes, the wizard's ④
   cards, the 교재에 넣기 bar and the 체험하기 frame. */
.builder-level,.book-option-box{--bl-ink:var(--n-403b35,#403b35);--bl-muted:var(--n-716d63,#716d63);--bl-line:var(--n-e5dccf,#e5dccf);--bl-surface:var(--n-fffdf8,#fffdf8);--bl-on:var(--n-a94c31,#a94c31);--bl-on-soft:var(--n-fbeee3,#fbeee3);--bl-on-ink:var(--n-8a3b22,#8a3b22);--bl-focus:var(--n-d4916b,#d4916b);min-width:0;color:var(--bl-ink)}
:root[data-theme="dark"] .builder-level{--bl-ink:#f1e9de;--bl-muted:#b9ad9c;--bl-line:#3d352b;--bl-surface:#28231d;--bl-on:#e0835f;--bl-on-soft:#3a2a20;--bl-on-ink:#f3b99d;--bl-focus:#e0a37f}
:root[data-theme="dark"] .book-option-box{--bl-ink:#f1e9de;--bl-muted:#b9ad9c;--bl-line:#3d352b;--bl-surface:#28231d;--bl-on:#e0835f;--bl-on-soft:#3a2a20;--bl-on-ink:#f3b99d;--bl-focus:#e0a37f}
.book-option{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.book-option-label{display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;min-height:44px;margin:0;padding:0 4px 0 0;border:0;border-radius:8px;background:transparent;color:var(--bl-ink);font:inherit;font-size:12.5px;font-weight:800;line-height:1.3;text-align:left;word-break:keep-all;cursor:pointer;box-shadow:none}
.book-option-label:hover{filter:none;background:transparent;text-decoration:underline;text-underline-offset:3px}
.book-option-label:focus-visible{outline:3px solid var(--bl-focus);outline-offset:2px}
.book-option-i{display:inline-grid;place-items:center;flex:0 0 auto;width:17px;height:17px;border:1.5px solid var(--bl-muted);border-radius:50%;color:var(--bl-muted);font-size:11px;font-style:italic;font-weight:700;line-height:1}
.builder-level-options{display:inline-flex;flex:0 0 auto;gap:4px;margin-left:auto}
/* A chosen chip shows ✓ in a 1em slot; the others keep that room as padding (half each side), so a choice never changes
   a chip's width and nothing slides under the pointer. */
.builder-level-option{min-width:48px;min-height:44px;margin:0;padding:4px calc(9px + .5em);border:1.5px solid var(--bl-line);border-radius:999px;background:var(--bl-surface);color:var(--bl-ink);font:inherit;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;box-shadow:none}
.builder-level-option[aria-checked="true"]{padding-inline:9px;border-color:var(--bl-on);background:var(--bl-on-soft);color:var(--bl-on-ink);box-shadow:inset 0 0 0 1px var(--bl-on)}
.builder-level-option[aria-checked="true"]::before{content:'✓';display:inline-block;width:1em;font-weight:800;text-align:left}
.builder-level-option:hover:not(:disabled):not([aria-disabled="true"]){filter:none;background:var(--bl-on-soft)}
.builder-level-option:focus-visible{outline:3px solid var(--bl-focus);outline-offset:2px}
.builder-level-option:disabled,.builder-level-option[aria-disabled="true"]{cursor:default;opacity:.7}
/* Two lines kept for the saved/kept/reload line, so a save never pushes the row down. */
.builder-level-status{min-height:3em;margin:4px 0 0;color:var(--teacher-muted,var(--n-716d63,#716d63));font-size:12.5px;line-height:1.5;word-break:keep-all}
.builder-level-status.warning{color:var(--i-b4532a,#b4532a)}
@media(max-width:360px){.builder-level-option,.builder-level-option[aria-checked="true"]{min-width:44px;padding:4px 7px;font-size:12px}.builder-level-option[aria-checked="true"]::before{content:none}}
/* The 단어 익히기 box under the 랭킹 도전 boxes (dist/book-settings-control.js vocabularyBoxHTML): the same shape as a 랭킹 도전 box,
   but a quieter line (no number, no ⠿: it is not a 랭킹 도전 activity). */
.book-option-box{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-height:52px;padding:2px 8px 2px 10px;border:1.5px dashed var(--bl-line);border-radius:12px;background:var(--bl-surface)}
.book-option-box-name{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;font-size:13px;font-weight:700;line-height:1.3}
.book-option-box-name svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--n-8b847a,#8b847a)}
.book-option-box>.book-option{flex:1 1 auto}
/* Several settings standing alone (the picker's fallback card): a dashed line between them. */
.ranking-picker-boxes>.builder-level+.builder-level,.ranking-picker-boxes>.book-option-box+.builder-level{margin-top:6px;padding-top:6px;border-top:1px dashed var(--bl-line,var(--n-e5dccf,#e5dccf))}
/* The setting's sheet (dist/book-option-detail.js): it rises from the bottom over the dimmed page; a centred card from 700px.
   Pulled down past a third of its height it closes (dist/sheet-drag.js). */
.book-option-layer{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center}
.book-option-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--t-ink) 42%,transparent)}
:root[data-theme="dark"] .book-option-scrim{background:color-mix(in srgb,var(--t-bg) 72%,transparent)}
.book-option-sheet{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;max-height:calc(100dvh - 24px);margin:0;padding:0 0 env(safe-area-inset-bottom);overflow:hidden;border-radius:20px 20px 0 0;background:var(--t-card,var(--n-fffdf8,#fffdf8));color:var(--t-ink,var(--n-403b35,#403b35));box-shadow:0 -10px 30px #4b341f33}
@media (prefers-reduced-motion:no-preference){.book-option-sheet{animation:book-option-in .22s ease-out both}.book-option-scrim{animation:book-option-fade .22s ease-out both}}
@keyframes book-option-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes book-option-fade{from{opacity:0}to{opacity:1}}
.book-option-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 18px 4px;overscroll-behavior:contain}
.book-option-title{margin:4px 0 10px;font-size:17px;line-height:1.35}
.book-option-rows{display:grid;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.book-option-row{padding:9px 12px;border:1.5px solid var(--n-eadfcd,#eadfcd);border-radius:12px;background:var(--n-fffaf2,#fffaf2)}
.book-option-row.is-chosen{border-color:var(--n-c2643a,#c2643a);background:var(--n-fbeee3,#fbeee3)}
.book-option-row p{margin:0}
.book-option-row-head{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4}
.book-option-now{padding:1px 8px;border-radius:999px;background:var(--n-a94c31,#a94c31);color:var(--n-ffffff,#fff);font-size:11px;font-weight:700;line-height:1.6}
.book-option-row-text{margin-top:2px!important;font-size:13px;line-height:1.55;color:var(--n-716d63,#716d63);word-break:keep-all}
.book-option-sample{display:flex;align-items:baseline;gap:6px;margin-top:4px!important;font-size:13px;line-height:1.5}
.book-option-sample-tag{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--n-8a7a64,#8a7a64)}
.book-option-sample [lang="en"]{font-family:var(--font-en),'Noto Sans KR',sans-serif;font-weight:700;overflow-wrap:anywhere}
/* A row of blanks (cake → ____) reads as four blanks, not one line. */
.book-option-sample .is-pattern{letter-spacing:.12em}
.book-option-foot{margin:0 0 6px;font-size:12.5px;line-height:1.55;color:var(--n-716d63,#716d63);word-break:keep-all}
.book-option-actions{display:flex;justify-content:flex-end;padding:10px 18px 14px;border-top:1px solid var(--n-eadfcd,#eadfcd)}
.book-option-actions button{min-width:96px;min-height:44px}
:root[data-theme="dark"] .book-option-row{border-color:#3d352b;background:#28231d}
:root[data-theme="dark"] .book-option-row.is-chosen{border-color:#e0835f;background:#3a2a20}
@media(min-width:700px){.book-option-layer{align-items:center}.book-option-sheet{width:520px;max-height:calc(100dvh - 48px);border-radius:20px}}
/* 교재에 넣기: after the Day chips, the whole bar width. */
.teacher-activity-select-level{grid-area:level;min-width:0;margin:2px 0 0;padding:6px 10px;border:1px solid var(--n-cfdcc5,#cfdcc5);border-radius:12px;background:var(--n-ffffff,#fff)}
/* Several settings picked: one under another with a dashed line between them on a phone, side by side where the bar is
   wide, so the sticky bar stays low (a dotted line between them). */
.teacher-activity-select-level>.builder-level+.builder-level{margin-top:4px;padding-top:4px;border-top:1px dashed var(--bl-line,var(--n-e5dccf,#e5dccf))}
@media(min-width:720px){.teacher-activity-select-level.is-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}.teacher-activity-select-level.is-pair>.builder-level+.builder-level{margin-top:0;padding-top:0;padding-left:14px;border-top:0;border-left:1px dashed var(--bl-line,var(--n-e5dccf,#e5dccf))}}
/* 체험하기 frame (html[data-activity-trial]): under the reassurance line, as wide as the screen card. */
html[data-activity-trial] .activity-trial-frame-level{max-width:760px;margin:0 auto 8px;padding:8px 12px;border:1px solid var(--n-eadfcd,#eadfcd);border-radius:13px;background:var(--n-fffdf8,#fffdf8)}
/* 화면 색 (2026-10-31): in the four other colour sets the 교재 설정 choices' focus ring (--bl-focus, a light coral 2.5:1 on the
   card) is the set's --t-focus; 지금 keeps it, and 밤's own .builder-level block still wins there. */
:where(:root[data-theme]:not([data-theme="classic"])) .builder-level,:where(:root[data-theme]:not([data-theme="classic"])) .book-option-box{--bl-focus:var(--t-focus)}

/* Press-and-hold reorder (dist/press-reorder.js, 2026-11-04, owner: "꾹 눌러 이동가능하게 하고 붙잡고 움직이는 점 6개 끝으로
   이동"): one look for every list a teacher puts in order. Each row ends with its ⠿ grip; while a row is lifted, the
   others slide (transform only) and its own place shows dashed. Lifted cards live under body. */
.press-reorder-grip{display:grid;place-items:center;flex:0 0 auto;width:40px;min-height:40px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--n-8c7759,#8c7759);font-size:22px;line-height:1;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.press-reorder-grip:hover:not(:disabled){background:var(--n-f8ecd9,#f8ecd9);filter:none}
.press-reorder-grip:disabled{color:var(--n-c5bba9,#c5bba9);opacity:.65;cursor:default}
.press-reorder-row{touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.press-reorder-row.is-previewing{position:relative;transition:transform .16s ease;will-change:transform}
.press-reorder-row.is-dragging{background:var(--n-f8ead5,#f8ead5);box-shadow:inset 0 0 0 1px var(--n-be996b,#be996b);cursor:grabbing}
.press-reorder-row.is-dragging>*{opacity:0}
.press-reorder-row.is-drop-before{box-shadow:inset 0 3px var(--n-ad8051,#ad8051)}
.press-reorder-row.is-drop-after{box-shadow:inset 0 -3px var(--n-ad8051,#ad8051)}
/* :where() keeps these at zero specificity, so a list's own card (교재관리's book card, ②'s sheet row) wins. */
:where(.press-reorder-ghost){position:fixed;z-index:1000;display:flex;align-items:center;gap:8px;box-sizing:border-box;margin:0;padding:0 4px 0 10px;border:1px solid var(--n-c9955a,#c9955a);border-radius:9px;background:var(--n-fffdf8,#fffdf8);color:var(--n-403b35,#403b35);font-size:14px;line-height:1.4;box-shadow:0 14px 28px #4b341f40,0 3px 8px #4b341f20;pointer-events:none;user-select:none;-webkit-user-select:none;will-change:transform;overflow:hidden}
:where(.press-reorder-ghost)>.press-reorder-grip{display:grid;place-items:center;width:40px;min-height:0;font-size:22px;color:var(--n-8c7759,#8c7759)}
@media(prefers-reduced-motion:reduce){.press-reorder-row.is-previewing{transition:none}}
/* While a card is lifted the browser does not anchor the scroll (with instant row moves, anchoring shifted the page
   under an edge scroll and dropped the card, review 2026-11-04); a finger on a ⠿ may still scroll the page (pan-y):
   it lifts only after a short hold. */
html.press-reorder-lifted,html.press-reorder-lifted *{overflow-anchor:none}

/* 반설정 › 사용할 교재 › 학생 화면 순서 (item 6): the class's books, numbered, each ending with its ⠿. */
.teacher-class-books-layout{display:grid;gap:0 16px;align-items:start}
.teacher-class-books-choose{min-width:0}
@media(min-width:900px){.teacher-class-books-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.teacher-class-books-layout>.teacher-class-order{margin-top:0}}
.teacher-class-order{margin:10px 0 12px;padding:10px 10px 8px;border:1px solid var(--n-e5dccd,#e5dccd);border-radius:12px;background:var(--n-fffdf8,#fffdf8)}
.teacher-class-order-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 6px}
.teacher-class-order-heading h4{margin:0;font-size:13px}
.teacher-class-order-heading span{font-size:11px;color:var(--n-8a7a64,#8a7a64)}
.teacher-class-order-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.teacher-class-order-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px 0 10px;border:1px solid var(--n-e5dccd,#e5dccd);border-radius:9px;background:var(--n-ffffff,#fff)}
.teacher-class-order-number{flex:0 0 22px;font-size:12px;font-weight:700;color:var(--n-a08762,#a08762);font-variant-numeric:tabular-nums}
.teacher-class-order-title{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-en),Arial,'Noto Sans KR',sans-serif}
.teacher-class-order-empty{margin:0}
.teacher-class-order-ghost{min-height:44px}
.teacher-class-order-ghost>strong{flex:1;min-width:0;font-size:13px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-class-order-ghost .teacher-class-order-number{flex:0 0 22px}

/* 교재에 넣기 › 고른 활동 (items 3 and 4): numbered places under the bar's top row; an empty place keeps its number. */
.teacher-pick-box{grid-area:picks;min-width:0}
.teacher-pick-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.teacher-pick-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px 0 10px;border:1px solid var(--n-cfdcc5,#cfdcc5);border-radius:10px;background:var(--n-ffffff,#fff)}
.teacher-pick-row.is-empty{border-style:dashed;background:transparent}
.teacher-pick-number{flex:0 0 16px;font-size:12.5px;font-weight:800;color:var(--n-2f5327,#2f5327);font-variant-numeric:tabular-nums}
.teacher-pick-icon svg{display:block;width:22px;height:22px;fill:none;stroke:var(--n-2f5327,#2f5327);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.teacher-pick-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--n-2f5327,#2f5327);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher-pick-empty{flex:1;min-width:0;font-size:11.5px;color:var(--n-4d6545,#4d6545);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher-pick-remove{display:grid;place-items:center;flex:0 0 auto;width:40px;min-height:40px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--n-8c7759,#8c7759);font-size:15px;line-height:1}
.teacher-pick-remove:hover:not(:disabled){background:var(--n-f8ecd9,#f8ecd9);filter:none}
.teacher-pick-ghost{min-height:44px;font-size:12.5px;font-weight:700}
.teacher-pick-ghost>strong{flex:1;min-width:0}
.teacher-pick-ghost .teacher-pick-icon svg{display:block;width:22px;height:22px;fill:none;stroke:var(--n-2f5327,#2f5327);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.teacher-activity-selectbar{grid-template-areas:"count pickers actions" "picks picks picks" "days days days" "level level level" "note note note" "drops drops drops" "retry retry retry"}
@media(max-width:600px){.teacher-activity-selectbar{grid-template-areas:"count actions" "pickers pickers" "picks picks" "days days" "level level" "note note" "drops drops" "retry retry"}}
/* The bar stays low (review 2026-11-04: five places in a column made the sticky bar cover most of a 720px screen).
   Wide screens: the five places in one row of chips (number · name · ✕ · ⠿, moved sideways). In between (601–899px,
   too narrow for five chips) the bar with places is not sticky, as on phones, so it never covers the tiles. */
@media(min-width:900px){
 .teacher-pick-list{display:flex;gap:4px}
 /* One width for every place (final check 2026-11-04): a place that turns empty keeps its size, so the others never
    slide; tight insides so the longest name (‘소리 바구니’) still fits five across. */
 .teacher-pick-row{flex:1 1 0;min-width:0;gap:3px;padding:0 0 0 6px}
 .teacher-pick-row .teacher-pick-number,.teacher-pick-ghost .teacher-pick-number{flex-basis:12px}
 .teacher-pick-row .teacher-pick-icon,.teacher-pick-empty-more{display:none}
 .teacher-pick-row .teacher-pick-remove,.teacher-pick-row .press-reorder-grip{width:32px}
 .teacher-pick-ghost{gap:3px;padding:0 0 0 6px}
 .teacher-pick-ghost .teacher-pick-icon{display:none}
 .teacher-pick-ghost>.press-reorder-grip{width:32px}
}
@media(min-width:601px) and (max-width:899px){.teacher-activity-selectbar:has([data-activity-picks]){position:static;box-shadow:none}}

/* 학생관리 › 학생 화면 순서: an empty place keeps its number; ✕ and ⠿ end each activity. */
.teacher-activity-chosen>li.is-empty{border-style:dashed;background:transparent}
/* Filled and empty places are one line of the same height, so ✕ never moves the places below (review 2026-11-04). */
.teacher-activity-chosen>li{min-height:36px}
.teacher-activity-chosen>li>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher-activity-empty{flex:1;min-width:0;font-size:11.5px;color:var(--n-8a7a64,#8a7a64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){.teacher-activity-empty-more{display:none}}
.teacher-activity-shift .press-reorder-grip{width:34px;min-height:30px;font-size:18px}
.teacher-activity-subhead small{font-weight:400;color:var(--n-8a7a64,#8a7a64)}
.teacher-activity-chosen-ghost{min-height:34px;gap:6px;padding:1px 2px 1px 6px;border-radius:8px;font-size:12.5px}
.teacher-activity-chosen-ghost>strong{flex:1;min-width:0}
.teacher-activity-chosen-ghost .teacher-activity-slot{flex:0 0 16px;font-size:12px;font-weight:750;text-align:center}