sheeteasyAI/src/index.css

/* Univer CE 공식 스타일 - @import는 맨 위에 */
@import '@univerjs/design/lib/index.css';
@import '@univerjs/ui/lib/index.css';
@import '@univerjs/docs-ui/lib/index.css';
@import '@univerjs/sheets-ui/lib/index.css';
@import '@univerjs/sheets-formula-ui/lib/index.css';
@import '@univerjs/sheets-numfmt-ui/lib/index.css';

/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 전역 스타일 */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Univer 컨테이너 스타일 */
.univer-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 커스텀 스크롤바 (Univer와 일치) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 파일 업로드 영역 스타일 */
.file-upload-area {
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.file-upload-area:hover {
  border-color: #3b82f6;
  background-color: #f8fafc;
}

.file-upload-area.dragover {
  border-color: #3b82f6;
  background-color: #dbeafe;
}

/* 로딩 애니메이션 */
.loading-spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 상태 표시 점 애니메이션 */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* 에러 메시지 스타일 */
.error-message {
  color: #dc2626;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin: 0.5rem 0;
}

/* 성공 메시지 스타일 */
.success-message {
  color: #059669;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin: 0.5rem 0;
}

/* 정보 메시지 스타일 */
.info-message {
  color: #2563eb;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin: 0.5rem 0;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .file-upload-area {
    padding: 16px;
    font-size: 14px;
  }
  
  .univer-container {
    font-size: 12px;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .file-upload-area {
    border-color: #374151;
    background-color: #1f2937;
    color: #f9fafb;
  }
  
  .file-upload-area:hover {
    border-color: #60a5fa;
    background-color: #111827;
  }
  
  .file-upload-area.dragover {
    border-color: #60a5fa;
    background-color: #1e3a8a;
  }
}

/* 랜딩페이지 추가 스타일 */
.bg-grid-slate-100 {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='m0 .5h32v32'/%3e%3cpath d='m.5 0v32h32'/%3e%3c/svg%3e");
}

.bg-grid-white\/\[0\.05\] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='m0 .5h32v32'/%3e%3cpath d='m.5 0v32h32'/%3e%3c/svg%3e");
}

/* 부드러운 스크롤 */
html {
  scroll-behavior: smooth;
}

/* 컨테이너 스타일 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}