@charset "UTF-8";
/*
 * Action Text / Trix
 *
 *= require trix
 */
/* =========================================================
   Action Text attachment gallery
   ========================================================= */
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

/* =========================================================
   Light Theme
   ========================================================= */
trix-editor {
  background-color: #fff;
  color: #212529;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.75rem;
  min-height: 15em;
}

trix-editor:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: 0;
}

trix-toolbar {
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 0.375rem 0.375rem 0 0;
}

/* =========================================================
   Dark Theme
   Bootstrap 5 dark theme
   ========================================================= */
[data-bs-theme=dark] trix-editor {
  background-color: #212529;
  color: #f8f9fa;
  border-color: #495057;
}

[data-bs-theme=dark] trix-editor:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: 0;
}

[data-bs-theme=dark] trix-toolbar {
  background-color: #343a40;
  border-color: #495057;
}

/* =========================================================
   Toolbar buttons
   ========================================================= */
/*
 * Trix 기본 버튼의 흰색 배경 제거
 */
[data-bs-theme=dark] trix-toolbar .trix-button {
  background-color: transparent !important;
  color: #dee2e6 !important;
  border-color: #495057 !important;
}

/*
 * Hover
 */
[data-bs-theme=dark] trix-toolbar .trix-button:hover {
  background-color: #495057 !important;
  color: #fff !important;
}

/*
 * Active
 */
[data-bs-theme=dark] trix-toolbar .trix-button.trix-active {
  background-color: #0d6efd !important;
  color: #fff !important;
}

/*
 * Disabled
 */
[data-bs-theme=dark] trix-toolbar .trix-button:disabled {
  background-color: transparent !important;
  color: #6c757d !important;
  opacity: 0.65;
}

/* =========================================================
   Trix SVG icons
   ========================================================= */
/*
 * Trix 아이콘이 background-image / SVG로 렌더링되는 경우를 고려해서
 * 버튼의 기본 밝은 아이콘이 어두운 테마에서도 보이도록 처리한다.
 *
 * !important는 trix.css의 기본 background 설정과 충돌하지 않도록 사용.
 */
[data-bs-theme=dark] trix-toolbar .trix-button--icon::before {
  opacity: 0.9;
}

/*
 * Hover / Active 상태에서는 아이콘을 더 밝게
 */
[data-bs-theme=dark] trix-toolbar .trix-button--icon:hover::before,
[data-bs-theme=dark] trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

/* =========================================================
   Toolbar separator
   ========================================================= */
[data-bs-theme=dark] trix-toolbar .trix-button-group {
  border-color: #495057 !important;
}

/* =========================================================
   Links
   ========================================================= */
trix-editor a {
  color: #0d6efd;
}

[data-bs-theme=dark] trix-editor a {
  color: #6ea8fe;
}

/* =========================================================
   Blockquote
   ========================================================= */
trix-editor blockquote {
  border-left: 4px solid #dee2e6;
  padding-left: 1rem;
  color: #6c757d;
}

[data-bs-theme=dark] trix-editor blockquote {
  border-left-color: #495057;
  color: #adb5bd;
}

/* =========================================================
   Code
   ========================================================= */
[data-bs-theme=dark] .trix-content pre {
  background-color: #1a1d20;
  color: #f8f9fa;
  border-color: #495057;
}

[data-bs-theme=dark] .trix-content code {
  color: #e9ecef;
}

/* =========================================================
   Lists
   ========================================================= */
[data-bs-theme=dark] .trix-content ul,
[data-bs-theme=dark] .trix-content ol {
  color: #f8f9fa;
}

/* =========================================================
   Attachment
   ========================================================= */
[data-bs-theme=dark] .trix-content .attachment {
  color: #f8f9fa;
}

/* =========================================================
   Placeholder
   ========================================================= */
[data-bs-theme=dark] trix-editor::placeholder {
  color: #6c757d;
  opacity: 1;
}