@charset "UTF-8";
/* 1. 이미지 삽입 모달 바디를 2컬럼 Grid로 */
.note-modal .modal-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
}

/* 2. Form-group을 세로 정렬 컨테이너로 */
.note-modal .note-form-group {
  display: flex;
  flex-direction: column;
}

/* 3. 레이블 스타일 */
.note-modal .note-form-group .note-form-label {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #495057;
}

/* 4. 공통 인풋 스타일 (file & url) */
.note-modal .note-form-group input[type="text"],
.note-modal .note-form-group input[type="url"],
.note-modal .note-form-group input[type="file"] {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* 5. URL 입력 박스 앞에 아이콘 붙이고 싶으면… */
.note-modal .note-group-image-url {
  position: relative;
}
.note-modal .note-group-image-url input[type="url"] {
  padding-left: 2rem;
}

/* 6. 모바일(좁은 화면)에서는 세로 1열 */
@media (max-width: 576px) {
  .note-modal .modal-body {
    grid-template-columns: 1fr;
  }
}