/* 강의 페이지 디자인 표준화: board-standard.css 토큰(--accent, --surface …) 위에 플레이어와 목록을 얹는다. */
.lecture-page .lecture-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-bottom:16px}
.lecture-page .lecture-grid .card{margin-bottom:0}

/* 플레이어 */
.player-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface2);border-bottom:1.5px solid var(--border)}
.live-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#22a06b;animation:lecBlink 1.5s infinite}
@keyframes lecBlink{0%,100%{opacity:1}50%{opacity:.3}}
.now-title{font-size:.85rem;font-weight:700;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-wrap{position:relative;padding-top:56.25%;background:#0b0e12}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-info{padding:16px 20px 18px}
.lecture-num{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;font-weight:700;color:var(--accent);margin-bottom:4px}
.lecture-title{font-size:1rem;font-weight:700;color:var(--text);line-height:1.55;overflow-wrap:anywhere}
.instructor-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--text-2);font-size:.78rem;font-weight:700}

/* 목록 */
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface2);border-bottom:1.5px solid var(--border);font-size:.8rem;font-weight:700;color:var(--text-2)}
.count-badge{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
.search-wrap{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface)}
.lec-search{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-s);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.lec-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.lec-search .s-icon{color:var(--text-3);font-size:.85rem}
.lec-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.85rem}
.lec-search input::placeholder{color:var(--text-3)}
.clear-btn{display:none;border:0;background:none;color:var(--text-3);cursor:pointer;font-size:1rem;line-height:1}
.clear-btn.visible{display:block}
.search-result-count{padding:4px 2px 0;text-align:right;font-size:.75rem;color:var(--text-3)}
.playlist{max-height:480px;overflow-y:auto}
.playlist::-webkit-scrollbar,.drawer-playlist::-webkit-scrollbar{width:5px}
.playlist::-webkit-scrollbar-thumb,.drawer-playlist::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.playlist-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.playlist-item:last-child{border-bottom:0}
.playlist-item:hover{background:var(--surface2)}
.playlist-item.active{background:var(--surface2);box-shadow:inset 3px 0 0 var(--accent)}
.item-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700}
.playlist-item.active .item-num{background:var(--accent);color:#fff}
.item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;color:var(--text-2);line-height:1.4}
.playlist-item.active .item-title{color:var(--text);font-weight:700}
.play-icon{flex:0 0 auto;color:var(--accent);font-size:.8rem;opacity:0;transition:opacity .15s}
.playlist-item:hover .play-icon,.playlist-item.active .play-icon{opacity:1}
.no-result{padding:28px 16px;text-align:center;color:var(--text-3);font-size:.88rem}
.highlight{padding:0 1px;border-radius:2px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700}
.status-msg{padding:24px;text-align:center;color:var(--text-3);font-size:.88rem}
.status-msg .spinner{width:26px;height:26px;margin:0 auto 10px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:lecSpin .8s linear infinite}
@keyframes lecSpin{to{transform:rotate(360deg)}}

/* 모바일: 목록은 아래에서 올라오는 서랍 + 하단 바 */
.bottom-bar{display:none}
.drawer-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45)}
.drawer-overlay.open{display:block}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:201;display:flex;flex-direction:column;max-height:75vh;border-radius:20px 20px 0 0;background:var(--surface);color:var(--text);transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.drawer.open{transform:translateY(0)}
.drawer-handle{flex:0 0 auto;width:40px;height:4px;margin:12px auto 0;border-radius:99px;background:var(--border)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:12px 18px;border-bottom:1.5px solid var(--border);font-size:.92rem;font-weight:700}
.drawer-header .close-btn{border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--text-2);cursor:pointer;padding:4px 10px}
.drawer-playlist{flex:1;overflow-y:auto}

@media(max-width:900px){.lecture-page .lecture-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
  .lecture-page .sidebar{display:none}
  .lecture-page main{padding-bottom:96px}
  .bottom-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99;gap:10px;padding:10px 16px;border-top:1.5px solid var(--border);background:var(--surface);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .bottom-bar .bb-home,.bottom-bar .bb-list{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 0;border-radius:var(--r-s);font-size:.88rem;font-weight:700}
  .bottom-bar .bb-home{flex:1;border:1px solid var(--border);background:var(--surface2);color:var(--text-2)}
  .bottom-bar .bb-list{flex:2;border:0;background:var(--accent);color:#fff;cursor:pointer}
  .lecture-page .site-kakao-float{bottom:84px}
}