/* r8's fit-shell18 selector has two classes and previously beat teacher-scroll300.
   Keep the entire page within the app shell and let its content determine height. */
html body #main.content.flow-page301{display:block!important;box-sizing:border-box!important;height:var(--page-room301,calc(100dvh - 64px))!important;max-height:var(--page-room301,calc(100dvh - 64px))!important;min-height:0!important;flex:1 1 auto!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#9daac4 transparent;overscroll-behavior-y:contain;scroll-padding-block:16px}
html body #main.content.flow-page301>.page{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;overflow:visible!important;padding-bottom:28px!important}
html body #main.content.flow-page301>.page>:is(.desk11,.v6-desk,.community9,.resources9,.contests15,.teacher-page298,.teacher-shell298,.course21,.live22,.studio-desk6,.media-desk11,.ranking283){height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;overflow:visible!important}
html body #main.content.flow-page301 :is(.workspace-board6,.workspace-viewport6,.admin-board7,#adminViewport7,#studioViewport6,.studio-layout6,.studio-viewport6,.teacher-content298,.teacher-group-page298,.cogo-groups){height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;overflow:visible!important}
html body #main.content.flow-page301 .teacher-nav298{flex-wrap:wrap;overflow:visible;gap:6px}
html body #main.content.flow-page301 .cogo-g-table{max-height:none!important;overflow-x:auto!important}
html body #main.content.flow-page301 .teacher-group-page298{overflow-wrap:anywhere}
html body #main.content.flow-page301 :is(.sprint11,.exam-question11,.exam-reading11){height:auto!important;max-height:none!important;min-height:0!important;flex:none!important;overflow:visible!important}
html body #main.content.flow-page301 .exam-numbers11{flex-wrap:wrap;gap:6px}
html body #main.content.flow-page301 .exam-actions11{flex-wrap:wrap;gap:10px}
html body #main.content.flow-page301 .page-footer{position:static!important;flex:none!important;margin-top:20px}
html body #main.content.flow-page301::-webkit-scrollbar{display:block!important;width:8px;height:8px}
html body #main.content.flow-page301::-webkit-scrollbar-thumb{background:#9daac4;border:2px solid transparent;background-clip:padding-box;border-radius:8px}
html body #main.content.flow-page301::-webkit-scrollbar-track{background:transparent}
html body #main .admin-tabs7 button{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.admin-count301{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:2px 7px;border-radius:6px;background:#edf1fb;color:#5265a3;font-size:11px;font-weight:650;line-height:1.6;font-variant-numeric:tabular-nums}
.admin-tabs7 .active .admin-count301{background:#dce5ff;color:#314ecc}.admin-count301.stale301{color:#7b8090}
/* Natural card heights keep titles and play controls inside the card. */
html body #main.content.flow-page301 #lectureCards11{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex:none!important;align-content:start!important;align-items:stretch;gap:18px!important;padding:0!important}
html body #main.content.flow-page301 .media-desk11,html body #main.content.flow-page301 .media-desk11>:not(header){height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex:none!important}
.lecture-card301{display:flex;flex-direction:column;min-width:0;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden;border:1px solid var(--line,#dbe3f1);border-radius:16px;background:var(--surface,#fff);transition:border-color .15s,box-shadow .15s}
.lecture-card301:hover{border-color:#adbbed;box-shadow:0 5px 20px #243c7510}
.lecture-art301{width:100%;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center;background:linear-gradient(130deg,#e9eeff,#f3f6fc);flex:none}
.lecture-art301>img{display:block;width:100%;height:100%;object-fit:cover}
.lecture-art301>span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;color:#596bd2}
.lecture-art301 .icon{width:28px;height:28px}
.lecture-info301{display:flex;flex-direction:column;gap:10px;padding:18px;flex:1;min-width:0}
.lecture-info301>small{color:var(--muted,#667993);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.lecture-info301>h3{margin:0 0 6px;font-size:14px;line-height:1.6;font-weight:650;overflow-wrap:anywhere;min-height:45px}
.lecture-watch301{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin-top:auto;border:1px solid #dce4fa;border-radius:9px;background:#f4f7ff;color:#4059bd;min-height:40px;line-height:1.4;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.lecture-watch301>.icon{width:16px;height:16px}.lecture-watch301>span:last-child{margin-left:auto}.lecture-watch301:hover{background:#eaf0ff}.lecture-watch301:focus-visible{outline:3px solid #a7b9ff;outline-offset:2px}
/* Modal link colors must not override a filled lecture action's text. Also
   cover the original guest player, which uses the sibling .btn.full link. */
html body #modal #modalContent a.lecture-external301,html body #modal #modalContent .lecture-player11~a.btn.full{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;min-height:46px;padding:12px 16px;background:#4054dc!important;color:#fff!important;font-size:14px!important;font-weight:700;line-height:1.5;text-align:center;text-decoration:none!important;white-space:normal;visibility:visible!important;opacity:1!important}
html body #modal #modalContent a.lecture-external301>span,html body #modal #modalContent .lecture-player11~a.btn.full>span{display:inline!important;color:inherit!important;font-size:inherit!important;visibility:visible!important;opacity:1!important}
html body #modal #modalContent a.lecture-external301:hover,html body #modal #modalContent .lecture-player11~a.btn.full:hover{background:#3144c5!important}
html body #modal #modalContent a.lecture-external301:focus-visible,html body #modal #modalContent .lecture-player11~a.btn.full:focus-visible{outline:3px solid #9faeff;outline-offset:3px}
@media(min-width:1700px){html body #main.content.flow-page301 #lectureCards11{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1100px){html body #main.content.flow-page301 #lectureCards11{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){html body #main.content.flow-page301 #lectureCards11{grid-template-columns:1fr!important;gap:14px!important}.lecture-info301{padding:15px}.lecture-info301>h3{min-height:0}.lecture-watch301{min-height:44px;font-size:13px}}
/* Compact account: two short panels, keeping the existing form and action nodes. */
html body #modal.account-modal285{width:min(720px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important}
html body #modal.account-modal285>.dialog-head{padding:12px 20px!important;min-height:48px;box-sizing:border-box}
html body #modal.account-modal285>#modalContent{overflow-y:auto!important;overflow-x:hidden!important;min-height:0}
.compact-account301 [hidden]{display:none!important}
html body .compact-account301 .account-hero285{padding:16px 22px;gap:16px;flex-wrap:nowrap;min-height:104px;box-sizing:border-box}
html body .compact-account301 .account-avatar285{width:56px;height:76px;border-radius:16px}
html body .compact-account301 .account-hero285>div:nth-child(2){min-width:0;flex:1}
html body .compact-account301 .account-hero285>div>span{display:none}
html body .compact-account301 .account-hero285 h2{font-size:23px;line-height:1.25;margin:0 0 4px}
html body .compact-account301 .account-hero285 p{margin:0 0 4px;font-size:11px;line-height:1.5}
html body .compact-account301 .account-profile285{position:static;align-self:center;margin:0;padding:9px;font-size:11px}
.account-tabs301{display:flex;gap:4px;margin:0;padding:7px 20px 0;border-bottom:1px solid var(--line,#e2e8f2);background:var(--surface,#fff)}
.account-tabs301 button{padding:9px 18px;border:0;border-bottom:2px solid transparent;color:var(--muted,#67758e);font:inherit;font-size:13px;font-weight:650}
.account-tabs301 button[aria-selected=true]{border-bottom-color:#445ce2;color:#445ce2}
html body .compact-account301 .account-body285{display:block;padding:18px 22px}
html body .compact-account301 .account-body285 h3{margin:0 0 10px;font-size:13px}
html body .compact-account301 .form6{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;margin:0;padding:0;border:0}
html body .compact-account301 .form6 label{grid-column:1;grid-row:1;display:grid;gap:4px;font-size:12px;min-width:0}
html body .compact-account301 .form6 button{grid-column:2;grid-row:1;align-self:end;width:auto;min-height:40px;padding:9px 13px;font-size:12px;white-space:nowrap}
html body .compact-account301 .form6 p{grid-column:1/-1;font-size:11px;line-height:1.45;margin:0}
html body .compact-account301 .form6 input{min-height:40px!important;width:100%;box-sizing:border-box;padding:8px 10px}
html body .compact-account301 .form6 textarea{height:60px;min-height:60px;width:100%;box-sizing:border-box;resize:none;padding:8px 10px;font:inherit;line-height:1.5}
html body .compact-account301 .motto-form300{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#e2e8f2)}
html body .compact-account301 .account-links285{border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
html body .compact-account301 .account-links285 h3{grid-column:1/-1;margin:0}
html body .compact-account301 .account-links285>button{padding:9px 0;min-height:42px;gap:7px;font-size:12px}
html body .compact-account301 .social-account288{margin:14px 0 0;padding-top:12px}
html body .compact-account301 .social-account288 h3{margin-bottom:4px}
html body .compact-account301 .social-account288 p{font-size:11px;line-height:1.5}
html body .compact-account301 .social-options288.social-circles289{margin:8px 0 0;gap:22px;justify-content:flex-start}
html body .compact-account301 .social-circle289{width:38px;height:38px;min-height:38px}
html body .compact-account301 .social-item289{gap:2px;font-size:11px}
html body .compact-account301 .account-footer285{padding:10px 22px;align-items:center;gap:8px;font-size:10px}
html body .compact-account301 .account-footer285 span{max-width:none;line-height:1.4}
@media(max-width:600px){
 html body #main.content.flow-page301{scroll-padding-bottom:24px}
 html body #main.content.flow-page301 .teacher-nav298{gap:3px}
 html body #main.content.flow-page301 .teacher-nav298 button{padding:9px;font-size:12px}
 html body #modal.account-modal285{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
 html body #modal.account-modal285>.dialog-head{padding:10px 14px!important}
 html body .compact-account301 .account-hero285{padding:12px 14px;gap:10px;min-height:88px}
 html body .compact-account301 .account-avatar285{width:44px;height:64px}
 html body .compact-account301 .account-hero285 h2{font-size:20px}
 html body .compact-account301 .account-profile285{font-size:10px;padding:7px}
 html body .compact-account301 .account-body285{padding:14px}
 .account-tabs301{padding:4px 14px 0}
 html body .compact-account301 .form6{gap:5px 8px}
 html body .compact-account301 .form6 button{padding:9px;font-size:11px}
 html body .compact-account301 .account-links285{gap:5px 12px}
 html body .compact-account301 .account-links285>button{font-size:11px}
 html body .compact-account301 .account-footer285{padding:9px 14px}
}
@media print{html body #main.content.flow-page301{height:auto!important;max-height:none!important;overflow:visible!important}}
html body #main .community284 .board-table-head282,html body #main .community284 .board-row282{display:grid;grid-template-columns:56px minmax(0,1fr) 112px 170px 64px;gap:14px;align-items:center;height:auto!important;min-height:48px;overflow:visible}
html body #main .community284 .board-row282 .post-title28{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
html body #main .community284 .board-views301{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;color:var(--muted,#64758e)}
@media(max-width:900px){html body #main .community284 .board-table-head282,html body #main .community284 .board-row282{grid-template-columns:44px minmax(0,1fr) 76px 138px 44px;gap:8px}}
@media(max-width:600px){
 html body #main .community284 .board-table-head282{display:none}
 html body #main .community284 .board-row282{grid-template-columns:34px minmax(0,1fr) 50px;gap:3px 8px;padding:12px!important}
 html body #main .community284 .board-row282>.badge{grid-column:1;grid-row:1;align-self:start}
 html body #main .community284 .board-row282>.post-title28{grid-column:2;grid-row:1;font-size:13px}
 html body #main .community284 .board-row282>.board-author282{display:block!important;grid-column:2;grid-row:2;font-size:11px}
 html body #main .community284 .board-row282>time{display:block!important;grid-column:2;grid-row:3;font-size:10px}
 html body #main .community284 .board-row282>.board-views301{grid-column:3;grid-row:1/4;font-size:11px;align-self:center}
 html body #main .community284 .board-row282>.board-views301:before{content:'조회';display:block;font-size:10px;color:#8090a5}
}