/* 필 LMS — 강의실 */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.flp{background:#0f1117;color:#e7e9ee;font-family:Pretendard,'Malgun Gothic',sans-serif;font-size:15px;line-height:1.6;display:flex;flex-direction:column}
a{color:inherit}
.flp-top{height:60px;flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;background:#161922;border-bottom:1px solid #242835}
.flp-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:28px;text-decoration:none;border-radius:6px;color:#aeb4c2}
.flp-back:hover{background:#242835;color:#fff}
.flp-ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.flp-ttl small{color:#8a91a3;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flp-ttl b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flp-prog{display:flex;align-items:center;gap:8px;font-size:13px;color:#aeb4c2;white-space:nowrap}
.flp-prog b{color:#fff;font-weight:700}
.flp-bar{width:120px;height:6px;background:#2a2f3d;border-radius:3px;overflow:hidden}
.flp-bar i{display:block;height:100%;background:var(--fl);transition:width .4s}
.flp-cert{font-size:13px;font-weight:700;text-decoration:none;border:1px solid var(--fl);color:#fff;background:var(--fl);padding:6px 12px;border-radius:6px}
.flp-cert[hidden]{display:none}
.flp-menu{display:none;background:none;border:0;color:#fff;font-size:22px;width:40px;height:40px;cursor:pointer}
.flp-main{flex:1;min-height:0;display:flex}
.flp-stage{flex:1;min-width:0;overflow-y:auto}
.flp-video{position:relative;background:#000;aspect-ratio:16/9;max-height:calc(100vh - 60px);width:100%;margin:0 auto}
.flp-video video,.flp-video iframe,#flp-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.flp-wm{position:absolute;z-index:3;pointer-events:none;color:#fff;opacity:.22;font-size:14px;font-weight:600;text-shadow:0 0 2px #000;transition:left 1.2s,top 1.2s;user-select:none}
.flp-info{max-width:960px;margin:0 auto;padding:26px 28px 60px;position:relative}
.flp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.flp-h h1{font-size:22px;margin:0;font-weight:700;color:#fff}
.flp-no{font-size:13px;font-weight:700;color:var(--fl);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:4px}
.flp-tag{font-size:12px;border:1px solid #4b5264;color:#aeb4c2;padding:1px 8px;border-radius:4px}
.flp-body{color:#c7ccd8;border-top:1px solid #242835;padding-top:16px}
.flp-body a{color:#8fb0ff}
.flp-body img{max-width:100%;height:auto}
.flp-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:30px}
.flp-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:8px;background:var(--fl);border:1px solid var(--fl);color:#fff;font:700 15px Pretendard,sans-serif;text-decoration:none;cursor:pointer}
.flp-btn.line{background:transparent;border-color:#3a4050;color:#e7e9ee}
.flp-btn[disabled]{opacity:.55;cursor:default}
.flp-side{width:340px;flex:none;background:#161922;border-left:1px solid #242835;overflow-y:auto;padding-bottom:30px}
.flp-side-h{position:sticky;top:0;z-index:1;background:#161922;padding:16px 18px;font-weight:700;border-bottom:1px solid #242835}
.flp-side-h small{color:#8a91a3;font-weight:400;margin-left:4px}
.flp-sec{padding:14px 18px 6px;font-size:13px;font-weight:700;color:#8a91a3}
.flp-item{display:flex;align-items:center;gap:10px;padding:10px 18px;text-decoration:none;font-size:14px;color:#c7ccd8;border-left:3px solid transparent}
.flp-item:hover{background:#1d2130}
.flp-item i{font-style:normal;width:22px;height:22px;flex:none;border-radius:50%;background:#2a2f3d;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#aeb4c2}
.flp-item span{flex:1;min-width:0}
.flp-item small{color:#6f7689;font-size:12px;white-space:nowrap}
.flp-item.done i{background:var(--fl);color:#fff}
.flp-item.on{background:#1f2433;border-left-color:var(--fl);color:#fff;font-weight:600}
.flp-item.lock{opacity:.5}
.flp-next{position:absolute;inset:0;z-index:4;background:rgba(10,12,18,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.flp-next p{margin:0;color:#c7ccd8}
.flp-next b{font-size:44px;color:#fff}
.flp-next div{display:flex;gap:8px}
.flp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:rgba(30,34,46,.96);color:#fff;padding:12px 20px;border-radius:24px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.flp-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:960px){
	body.flp{height:auto;min-height:100%}
	.flp-main{flex-direction:column}
	.flp-stage{overflow:visible}
	.flp-menu{display:block}
	.flp-bar{width:60px}
	.flp-side{width:100%;border-left:0;border-top:1px solid #242835;max-height:none}
	.flp-info{padding:20px 16px 30px}
	.flp-h h1{font-size:19px}
	.flp-prog{display:none}
	body.flp-open .flp-side{position:fixed;inset:60px 0 0 0;z-index:20}
	.flp-nav .flp-btn{padding:0 14px;flex:1}
}

.flp-poster{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;cursor:pointer;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.flp-poster:before{content:"";position:absolute;inset:0;background:rgba(8,10,16,.28);transition:background .2s}
.flp-poster:hover:before{background:rgba(8,10,16,.12)}
.flp-play{position:relative;width:84px;height:84px;border-radius:50%;background:var(--fl);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.flp-play svg{margin-left:4px}
.flp-poster:hover .flp-play{transform:scale(1.07)}
.flp-poster em{position:relative;font-style:normal;color:#fff;font:600 14px Pretendard,sans-serif;background:rgba(0,0,0,.55);padding:6px 14px;border-radius:16px}
@media (max-width:600px){.flp-play{width:62px;height:62px}.flp-play svg{width:26px;height:26px}}