/* 프로젝트 상세 뷰 스타일 */

.project-detail-view {
  position: fixed;
  top: 60px; /* 헤더 높이 */
  left: 150px; /* 메인 사이드바 너비 */
  right: 0;
  bottom: 0;
  background: var(--bg-primary, #f5f5f5);
  z-index: 100;
  overflow: hidden;
}

.project-detail-container {
  width: 100%;
  height: 100%;
}

.project-editor-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 뒤로가기 버튼 (오버레이) */
.project-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10;
}

.project-back-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* 반응형 - 태블릿 (메인 사이드바 축소형 옆에 배치) */
@media (min-width: 769px) and (max-width: 1024px) {
  .project-detail-view {
    left: var(--sidebar-collapsed-width, 80px); /* 축소된 메인 사이드바 너비 */
    top: 60px;
  }
}

/* 반응형 - 모바일 (전체 화면) */
@media (max-width: 768px) {
  .project-detail-view {
    left: 0;
    top: 60px;
  }

  .project-back-btn {
    top: 8px;
    left: 8px;
    padding: 6px 10px;
    font-size: 12px;
  }
}