/* 💡 [지시 준수] 코스 트리 스타일을 최초 순정 수치로 복구하고 탐색기 레이아웃 유지 */
* { box-sizing: border-box; }
body { background-color: #f8f9fa; display: flex; flex-direction: column; height: 100vh; width: 100vw; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; }

.dashboard-header { background: linear-gradient(135deg, #2c3e50, #3498db); color: white; padding: 10px 20px; flex-shrink: 0; }
.status-badge { font-size: 0.85em; padding: 5px 12px; border-radius: 15px; background: rgba(255,255,255,0.2); font-weight: bold; }

.delta-dashboard { font-size: 0.85em; border-bottom: 1px solid #ddd; background: #fff; flex-shrink: 0; height: 32px; display: flex; align-items: center; overflow-x: auto; white-space: nowrap; }
.delta-dashboard span { margin-left: 2px; }

.main-wrapper { flex: 1; display: flex; overflow: hidden; padding: 10px; gap: 10px; }

.left-panel { flex: 3; display: flex; flex-direction: column; overflow: hidden; min-width: 300px; }
.right-panel { flex: 7; display: flex; flex-direction: column; overflow: hidden; gap: 10px; }

.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-shrink: 0; }
.control-card { background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-left: 4px solid #3498db; }
.control-card h6 { font-size: 0.95em; font-weight: bold; margin-bottom: 8px; color: #2c3e50; }

.btn-xs { padding: 2px 6px; font-size: 0.85em; }

.mini-selector { font-size: 0.8em; padding: 5px; border: 1px solid #eee; border-radius: 4px; background: #fafafa; display: flex; gap: 8px; align-items: center; }
.lecture-border { border-color: #ffdadb; background: #fff9f9; }

.console-box {
    background: #1e1e1e;
    color: #a8b2bd;
    font-family: monospace;
    padding: 12px;
    border-radius: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 300px;   
    flex-shrink: 0;      
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    margin-top: 0 !important;
}

#curriculum-tree { font-size: 0.9em; }

.course-node { 
    margin-bottom: 4px; 
    border: 1px solid #ddd; 
    padding: 6px 10px; 
    border-radius: 6px; 
    background: #fafafa; 
    transition: background 0.2s;
    cursor: pointer;
}
.course-node:hover { background: #f0f4f8; }

.course-header { font-weight: bold; font-size: 0.9em; color: #2c3e50; display: flex; align-items: center; }

.chapter-box { margin-left: 10px; border-left: 2px solid #3498db; padding-left: 10px; margin-top: 4px; }
.chapter-title { color: #34495e; font-weight: bold; display: flex; align-items: center; font-size: 0.85em; padding: 2px 0; }

.video-list { margin-left: 15px; display: block; margin-top: 4px;}
.video-item { padding: 2px 0; color: #555; display: flex; align-items: center; font-size: 0.8em; }
.video-item:hover { background: #f8f9fa; }

.v-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }

.ghost-tag { color: #e74c3c; font-weight: bold; font-size: 0.75em; margin-left: 5px; animation: blink 1.2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.comp-tag { background: #27ae60; color: white; font-size: 0.65em; padding: 0 4px; border-radius: 3px; margin-left: 4px; font-weight: normal; }

.summary-row { background: #f0f2f5; border-left: 2px dashed #95a5a6; opacity: 0.7; }
.summary-row .v-title { color: #7f8c8d; font-style: italic; }

input[type="checkbox"] { transform: scale(1.0); cursor: pointer; margin-right: 6px; }
.toggle-icon { font-family: monospace; font-size: 1.0em; color: #e67e22; cursor: pointer; margin-right: 5px; user-select: none; font-weight: bold; }

.ch-badge-group, .c-badge-group { margin-right: 5px; display: inline-flex; gap: 2px; align-items: center; }
.sum-badge { font-size: 0.7em; padding: 0.25em 0.5em; font-weight: bold; }
.c-sum-badge { font-size: 0.65em; padding: 0.2em 0.4em; opacity: 0.8; }

.custom-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1050; }
.custom-modal-content { background: white; padding: 20px; border-radius: 10px; width: 90%; max-width: 800px; max-height: 85vh; overflow-y: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

@media (max-width: 992px) {
    body { height: auto; overflow-y: auto; display: block; }
    .main-wrapper { flex-direction: column; overflow: visible; height: auto; }
    .left-panel, .right-panel { flex: none; width: 100%; overflow: visible; height: auto; }
    .controls-grid { grid-template-columns: 1fr; }
    .console-box { min-height: 400px; flex: none; margin-bottom: 15px; }
}

/* style.css | 수정날짜: 2026-04-22 13:08:45 */