:root{
  --navbar-h: 56px;
  --footer-h: 48px;
}
html, body {
  height: 100%;
  margin: 0;
  font-family: monospace;
}
body { position: relative; }

/* 상단 네비게이션 */
.navbar { height: var(--navbar-h); }

/* 고정 컨트롤 */
#controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  position: fixed;
  top: 0; /* JS에서 동적 처리 */
  left: 0;
  width: 100%;
  align-items: center;
  background: #fff;
  z-index: 1000;
  padding: 6px 10px;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
}

/* 메인 컨테이너 */
#container {
  position: absolute;
  top: 0; /* JS에서 동적 처리 */
  bottom: var(--footer-h);
  left: 0;
  right: 0;
  display: flex;
  gap: 0;
  box-sizing: border-box;
  padding: 10px;
  flex-direction: row;
}

/* 레이아웃 클래스 */
#container.horizontal { flex-direction: row; }
#container.horizontal #editor,
#container.horizontal #preview { width: 50%; height: 100%; }
#container.vertical { flex-direction: column; }
#container.vertical #editor,
#container.vertical #preview { width: 100%; height: 50%; }

/* 에디터 */
#editor {
  border-right: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  padding-top: 6px;
  overflow: hidden;
}
#codeArea { flex: 1; height: 100%; min-height: 0; }
#codeArea .cm-editor { height: 100%; overflow: auto; border-bottom: 4px solid #333; }

/* 미리보기 */
#preview {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border-bottom: 4px solid #333;
}
#previewFrame { width: 100%; height: 100%; border: none; }
#previewOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* 에러 / 콘솔 */
#errorMsg, #consoleLog {
  display: none;
  color: #b00;
  font-family: monospace;
  white-space: pre-wrap;
  margin-top: 8px;
  flex: 0 0 auto;
  overflow-y: auto;
  max-height: 150px;
  background: #f8f9fa;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #e3e3e3;
}

/* 프로그램 타이틀 */
#programTitle { font-weight: 700; font-size: 1.2rem; }

/* 푸터 */
footer.fixed-bottom {
  height: var(--footer-h);
  line-height: var(--footer-h);
  background: #111;
  color: #fff;
  text-align: center;
}

/* 반응형 */
@media (max-width: 900px) {
  #container { flex-direction: column; padding: 8px; }
  #editor, #preview { width: 100%; height: 50%; }
  #controls { height: auto; padding: 6px 5px; }
}

/* 실행 버튼 숨기기 */
#runBtn {
  display: none;
}

/* 반응형 미리보기 컨트롤 */
.preview-size-controls {
  display: flex;
  gap: 5px;
  padding: 5px;
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.preview-size-btn {
  padding: 4px 8px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  font-size: 11px;
  border-radius: 3px;
}

.preview-size-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.preview-size-btn:hover {
  background: #e9ecef;
}

.preview-size-btn.active:hover {
  background: #0056b3;
}

/* 기본 레이어 스타일 */
.notification-layer {
position: fixed; /* 화면의 특정 위치에 고정 */
bottom: 100px; /* 화면 하단에서 20px 위 */
left: 50%; /* 가로 중앙 정렬을 위한 위치 설정 */
transform: translateX(-50%); /* 정확한 중앙 정렬 */
background-color: #333; /* 어두운 배경색 */
color: #fff; /* 흰색 글자색 */
padding: 15px 25px; /* 내부 여백 */
border-radius: 5px; /* 모서리 둥글게 */
z-index: 1000; /* 다른 요소 위에 표시 */
opacity: 0; /* 초기 상태: 투명 (숨겨짐) */
visibility: hidden; /* 초기 상태: 보이지 않음 */
transition: opacity 0.3s ease, visibility 0.3s ease; /* 부드러운 전환 효과 */
}

/* 활성화 상태 (알림 표시) */
.notification-layer.show {
opacity: 1; /* 투명도 1로 변경하여 보이게 함 */
visibility: visible; /* 보이게 설정 */
}