.html-preview em {
  font-style: italic;
}

.html-preview strong,
.html-preview b {
  font-weight: bold;
}

.html-preview i {
  font-style: italic;
}

.html-preview u {
  text-decoration: underline;
}

.html-preview small {
  font-size: smaller;
}

.html-preview mark {
  background-color: yellow;
  color: black;
}

.html-preview del {
  text-decoration: line-through;
}

.html-preview ins {
  text-decoration: underline;
}

.html-preview sub {
  vertical-align: sub;
  font-size: smaller;
}

.html-preview sup {
  vertical-align: super;
  font-size: smaller;
}

.html-preview .annotation-box {
  cursor: pointer;
  transition:
    background-color 0.3s,
    border 0.3s;
}

.html-preview .annotation-box:hover {
  background-color: #ccc;
}

.area-box {
  padding: 5px;
}

.adminjs_Select {
  width: 100%;
}

section[data-css='sidebar'] {
  position: absolute !important;
}

@media (min-width: 1324px) {
  [data-css='topbar'] > section:first-child {
    display: block;
  }
}

.metadata-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.metadata-modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 800px;
  max-height: 90vh; /* 화면 높이의 90%로 최대 높이 제한 */
  overflow-y: auto; /* 내용이 넘칠 경우 수직 스크롤 활성화 */
}

/* General disabled form elements: Input, TextArea */
input:disabled,
textarea:disabled {
  background-color: #f1f1f1 !important; /* 비활성화 배경색 */
  opacity: 0.7;
  cursor: not-allowed;
}

/* For react-select based Select component */
.adminjs_Select .Select__control--is-disabled {
  background-color: #f1f1f1 !important;
  opacity: 0.7;
}

.adminjs_Select .Select__control--is-disabled * {
  cursor: not-allowed;
}

/* For custom CheckBox and Radio components */
.adminjs_Checkbox input[type='checkbox']:disabled + a,
input[type='radio']:disabled + span {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Also fade the labels for disabled checkboxes and radios */
.adminjs_Checkbox input[type='checkbox']:disabled ~ .adminjs_Label,
input[type='radio']:disabled ~ .adminjs_Label {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hide arrows from number inputs */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}