app.css

<style>
/* Modern color scheme */
:root {
  /* 주요 브랜드 컬러 */
  --primary: #0066cc;      /* 메인 브랜드 컬러 */
  --secondary: #3385ff;    /* 밝은 액센트 */
  --accent: #66a3ff;       /* 부드러운 포인트 컬러 */

  /* 배경 컬러 */
  --background: #f7f9fc;   /* 메인 배경 */
  --surface: #ffffff;      /* 카드 배경 */
  
  /* 텍스트 컬러 */
  --text-primary: #2c3e50; /* 주요 텍스트 */
  --text-secondary: #546e7a; /* 부가 텍스트 */
  --text-tertiary: #78909c; /* 덜 중요한 텍스트 */
  
  /* 기능성 컬러 */
  --success: #34c759;      /* 성공/확인 */
  --warning: #ff9500;      /* 경고/주의 */
  --error: #ff3b30;        /* 오류/삭제 */
  
  /* 중립 컬러 */
  --neutral-100: #f8f9fa;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.5;
}

/* 우측 패널 크기 조절 */
.right_panel {
  position: relative;
  height: 600px; /* 기본 높이 축소 */
  min-height: 400px;
  max-height: 800px;
  resize: vertical;
  overflow: hidden;
  margin: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 리사이즈 핸들 */
.right_panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--neutral-200);
  cursor: ns-resize;
}

/* 렌더링 영역 */
.html_content {
  height: calc(100% - 30px);
  width: 100%;
  background: var(--surface);
}

.html_content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 렌더링 헤더 */
.render_header {
  height: 30px;
  background: var(--neutral-100);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}

.header_btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* 리사이즈 컨트롤 */
.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  background: var(--neutral-200);
  border-radius: 0 0 4px 0;
}

/* 반응형 조정 */
@media (max-width: 768px) {
  .right_panel {
    height: 400px;
    margin: 10px;
  }
}

/* 기존 스타일 유지 */
.left_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--surface), var(--neutral-100));
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--neutral-200);
  text-align: center;
  margin-bottom: 2rem;
}

/* 나머지 기존 스타일들... */

</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const panel = document.querySelector('.right_panel');
  let isResizing = false;
  let startY;
  let startHeight;

  // 리사이즈 이벤트
  panel.addEventListener('mousedown', function(e) {
    if (e.offsetY > panel.offsetHeight - 6) {
      isResizing = true;
      startY = e.pageY;
      startHeight = panel.offsetHeight;
      document.body.style.cursor = 'ns-resize';
    }
  });

  document.addEventListener('mousemove', function(e) {
    if (!isResizing) return;
    
    const diff = e.pageY - startY;
    const newHeight = Math.max(400, Math.min(800, startHeight + diff));
    panel.style.height = `${newHeight}px`;
  });

  document.addEventListener('mouseup', function() {
    isResizing = false;
    document.body.style.cursor = '';
  });

  // 더블클릭으로 크기 토글
  panel.addEventListener('dblclick', function(e) {
    if (e.offsetY > panel.offsetHeight - 6) {
      if (panel.offsetHeight === 600) {
        panel.style.height = '800px';
      } else {
        panel.style.height = '600px';
      }
    }
  });
});
</script>