/* JetBrains Mono 불러오기 (구글 폰트) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* D2Coding 불러오기 (한글 폰트용) */
@import url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css');

/* Reset 및 기본 설정 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'JetBrains Mono', 'D2Coding','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f7f6;
  color: #333;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 헤더 영역 */
header {
  background-color: #2c3e50;
  color: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 1px;
}

/* 모드 전환 토글 스위치 */
.header-right {
  display: flex;
  align-items: center;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: bold;
}

.switch-label span {
  opacity: 0.5;
  transition: opacity 0.3s;
}

.switch-label span.active {
  opacity: 1;
  color: #f1c40f;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #7f8c8d;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #e74c3c;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 24px;
}
.slider.round:before {
  border-radius: 50%;
}

.hamburger-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.hamburger-btn:hover {
  opacity: 0.8;
}

/* 추가기능: 다중 미션 내비게이션바 영역 */
.theory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #34495e;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.theory-header h2 {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.mission-nav {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #34495e;
  padding: 5px 15px;
  border-radius: 20px;
}

.nav-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.nav-btn:hover:not(:disabled) {
  color: #f1c40f;
}

.nav-btn:disabled {
  color: #7f8c8d;
  cursor: not-allowed;
}

#missionProgress {
  font-size: 0.9rem;
  font-weight: bold;
  color: #bdc3c7;
}
.primary-btn {
  background-color: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.95rem;
  transition: background-color 0.2s;
}

.primary-btn:hover {
  background-color: #219653;
}

/* 메인 컨테이너 (3단 레이아웃) */
.container {
  display: flex;
  flex: 1;
  padding: 15px;
  gap: 15px;
  overflow: hidden;
}

/* 0. 사이드바 (목차 - Push 방식) */
.sidebar {
  /* position: fixed 제거, 다시 flex 레이아웃에 참여 */
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;

  /* 숨겨진 기본 상태: 음수 마진으로 화면 좌측 밖으로 밀어냄 */
  margin-left: -320px;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 사이드바가 열렸을 때의 상태 클래스 */
.sidebar.open {
  margin-left: 0;
}

.sidebar-header {
  background-color: #2c3e50;
  color: white;
  padding: 12px 15px;
  border-bottom: 2px solid #1a252f;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar h2 {
  font-size: 1rem;
  margin: 0;
  white-space: nowrap;
}

.toggle-btn {
  background: none;
  border: none;
  color: #bdc3c7;
  cursor: pointer;
  font-size: 1.4rem;
  transition: color 0.2s, transform 0.3s;
}

.toggle-btn:hover {
  color: white;
  transform: rotate(90deg);
}

.lesson-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
}

.lesson-list li {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.lesson-list li:hover {
  background-color: #f7f9f9;
  padding-left: 20px;
}

/* 사이드바 카테고리 (1뎁스 아코디언 헤더) */
.lesson-list li.category-title {
  background-color: #e5edf5;
  color: #2c3e50;
  font-weight: 700;
  cursor: pointer; /* 클릭 가능함을 표시 */
  padding: 10px 15px;
  font-size: 0.9rem;
  border-bottom: 2px solid #d1dfea;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}
.lesson-list li.category-title:hover {
  background-color: #d8e5f0;
}

/* 아코디언 하위 목록 컨테이너 */
.lesson-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 실제 클릭되는 강의 리스트 (2뎁스 트리구조) */
.lesson-list li.sub-item {
  padding-left: 25px; /* 들여쓰기 효과 */
  font-size: 0.9rem;
  position: relative;
}

.lesson-list li.sub-item::before {
  content: "↳";
  position: absolute;
  left: 10px;
  color: #bdc3c7;
}

.lesson-list li.sub-item:hover {
  padding-left: 30px;
}

.lesson-list li.active {
  background-color: #e8f4fd;
  color: #2980b9;
  font-weight: bold;
  border-left: 4px solid #3498db;
}

/* 각각의 패널 공통 스타일 */
.panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ecf0f1;
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
}

.panel-header h2 {
  font-size: 1rem;
  color: #2c3e50;
  margin: 0;
}

.editor-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: #2980b9;
}

.success-btn {
  background-color: #e67e22;
}

.success-btn:hover {
  background-color: #d35400;
}

.warning-btn {
  background-color: #f39c12;
}

.warning-btn:hover {
  background-color: #e67e22;
}

/* 1. 이론 패널 (좌측) */
.theory-panel {
  flex: 1;
  min-width: 300px;
}

.theory-content {
  padding: 25px 30px;
  overflow-y: auto;
  line-height: 1.7;
  color: #333;
  font-size: 0.95rem;
}

.theory-content h3 {
  color: #2980b9;
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 8px;
  border-bottom: 2px solid #ecf0f1;
}

.theory-content h3:first-child {
  margin-top: 0;
}

.theory-content p {
  margin-bottom: 1rem;
  color: #444;
}

.theory-content ul {
  padding-left: 20px;
  margin-bottom: 1.5rem;
  color: #555;
}

.theory-content li {
  margin-bottom: 8px;
}

.theory-content code {
  background: #fdf0f0;
  padding: 3px 6px;
  border-radius: 4px;
  color: #c0392b;
  font-family: 'JetBrains Mono', 'D2Coding', monospace;
  font-size: 0.9em;
  font-weight: 500;
  border: 1px solid #f9e3e3;
}

.theory-content b,
.theory-content strong {
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255, 235, 59, 0.4) 40%);
  color: #2c3e50;
}

.mission-box {
  margin-top: 30px;
  background-color: #e8f4fd;
  border-left: 5px solid #3498db;
  padding: 15px;
  border-radius: 4px;
}

.mission-box h3 {
  color: #2980b9;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

/* 2. 에디터 패널 (중앙) */
.editor-panel {
  flex: 1.5;
  min-width: 400px;
}

/* CodeMirror 사이즈 덮어쓰기 */
.CodeMirror {
  flex: 1;
  height: auto !important;
 
  font-family: 'JetBrains Mono', 'D2Coding', monospace;
  font-size: 15px;
  line-height: 1.6;
  font-variant-ligatures: contextual; 
}

/* 3. 미리보기 패널 (우측) */
.preview-panel {
  flex: 1.5;
  min-width: 400px;
}

.iframe-container {
  flex: 1;
  padding: 5px;
  background: #fff;
}

iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 4px;
}