body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #eef2f3, #dfe9f3);
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 30px;
  color: #333;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

h2 {
  font-size: 22px;
  color: #444;
}

button {
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
}

.upload-btn {
  background: #007bff;
  color: #fff;
}
.upload-btn:hover { background: #0056b3; }

.save-btn {
  background: #28a745;
  color: #fff;
}
.save-btn:hover { background: #1e7e34; }

textarea {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  resize: vertical;
}

.card.file { border-left: 6px solid #007bff; }
.card.image { border-left: 6px solid #6f42c1; }
.card.text { border-left: 6px solid #28a745; }

.dashboard-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dashboard-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .dashboard-horizontal { grid-template-columns: 1fr; }
}

/* 알림창 */
.alert {
  position: fixed;
  top: 20px;
  left: 1%;
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.alert.show { opacity: 1; }
.alert.success { background: #4caf50; }
.alert.error { background: #f44336; }

/* 파일 삭제 버튼 */
.delete-btn {
  font-size: 11px;       /* 글자 크기 줄이기 */
  padding: 2px 6px;      /* 버튼 안쪽 여백 최소화 */
  margin-left: 6px;      /* 파일 이름과 간격 */
  background: none;      /* 배경 제거 */
  color: #333;           /* 글자색은 기본 회색 */
  border: 1px solid #ccc;/* 얇은 테두리 */
  border-radius: 3px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #f0f0f0; /* 마우스 올리면 살짝 회색 배경 */
}

.preview img {
  max-width: 300px;   /* 가로 최대 300px */
  max-height: 300px;  /* 세로 최대 300px */
  object-fit: contain; /* 비율 유지하면서 축소 */
  margin: 10px;
  border: 1px solid #ccc;
}