react-layout-timbel/dist/Modal.css

모던한 React 컴포넌트 라이브러리입니다. Layout, Card, Button 컴포넌트를 포함합니다.

.modal {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 테마별 스타일 */
.modal.light {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #e9ecef;
}

.modal.dark {
  background-color: #2d2d2d;
  color: #ffffff;
  border: 1px solid #404040;
}

/* 크기별 스타일 */
.modal.small {
  padding: 0.75rem;
  font-size: 0.875rem;
}

.modal.medium {
  padding: 1rem;
  font-size: 1rem;
}

.modal.large {
  padding: 1.5rem;
  font-size: 1.125rem;
}

/* 제목 스타일 */
.modal-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.modal.small .modal-title {
  font-size: 1.1rem;
  margin-bottom: 0.375rem;
}

.modal.large .modal-title {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

/* 콘텐츠 스타일 */
.modal-content {
  line-height: 1.6;
}

.modal.small .modal-content {
  font-size: 0.9rem;
}

.modal.large .modal-content {
  font-size: 1.1rem;
}

/* 호버 효과 */
.modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .modal.large {
    padding: 1.25rem;
    font-size: 1rem;
  }
  
  .modal.large .modal-title {
    font-size: 1.25rem;
  }
}