.markdown-editor--hidden {
  display: none !important;
}

.toastui-editor-defaultUI {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background-color: #ffffff;
  color: #212529;
}

.toastui-editor-defaultUI-toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.toastui-editor-defaultUI .toastui-editor-contents {
  font-size: 1rem;
  line-height: 1.6;
}

.toastui-editor-defaultUI-toolbar .markdown-token-button::before {
  content: "{{}}";
  font-weight: 700;
  font-size: 0.85rem;
}

.markdown-token-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  margin: 0.1rem;
  font-size: 0.85rem;
  border-radius: 999px;
  background: #e7f1ff;
  color: #0d6efd;
  border: 1px dashed #9ec5fe;
}

.markdown-token-badge[data-token="streamplayer"],
.markdown-token-badge[data-token="stripe_ticket"] {
  background: #e8f7ec;
  color: #0c7c3f;
  border-color: #86d39e;
}

.markdown-token-badge[data-token="dj_timetable"],
.markdown-token-badge[data-token="vj_timetable"] {
  background: #fff5e6;
  color: #b26b00;
  border-color: #f3c98b;
}

.markdown-token-badge--unknown {
  background: #fff0f0;
  color: #c1121f;
  border-color: #f3a6ad;
}

.markdown-token-button {
  background: none !important;
}


.markdown-token-button::before {
  content: none !important;
}

.markdown-html-to-md-button {
  background: none;
  border: 0;
  padding: 0 8px;
  width: auto !important;
  height: 30px;
  line-height: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: #212529 !important;
}

[data-bs-theme="dark"] .markdown-html-to-md-button {
  color: #e9ecef !important;
}

.toastui-editor-contents .email-event-button-wrap {
  text-align: center;
  margin: 16px 0;
}

.toastui-editor-contents .email-event-button {
  display: block;
  width: 50%;
  margin: 0 auto;
  padding: 12px 0;
  background: #4caf50;
  color: #ffffff;
  text-decoration: none;
  border: 2px solid #000;
  font-weight: bold;
}

.token-preview {
  display: block;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.6rem 0.75rem;
  margin: 0.35rem 0;
  border-radius: 6px;
  background: #e7f1ff;
  color: #0d6efd;
  border: 1px dashed #9ec5fe;
  pointer-events: none;
}

.token-preview__label {
  display: block;
  margin-bottom: 0.15rem;
}

.token-preview__token {
  display: none;
}

.token-preview ul {
  margin: 0;
  padding-left: 1.25rem;
}

.token-preview--unknown {
  background: #fff0f0;
  color: #c1121f;
  border-color: #f3a6ad;
}

.toastui-editor-contents .tui-widget {
  line-height: 1;
}

.toastui-editor-contents .tui-widget .token-preview {
  margin: 0;
}

.toastui-editor-md-container .ProseMirror .token-preview {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.toastui-editor-md-container .ProseMirror .token-preview__label {
  display: none;
}

.toastui-editor-md-container .ProseMirror .token-preview__token {
  display: inline;
}


.token-picker-dialog {
  border: none;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.token-picker {
  min-width: 260px;
}

/* Toast UI's own chrome (toolbar, popups, panes, syntax highlighting, etc.) is
   dark-themed by the official @toast-ui/editor/dist/theme/toastui-editor-dark.css,
   toggled via the .toastui-editor-dark class in markdown_editor_controller.js.
   Only genuinely project-specific elements (not owned by Toast UI) are themed here. */

[data-bs-theme="dark"] .token-picker-dialog {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .markdown-token-badge {
  background: #1f2a3d;
  color: #9ec5fe;
  border-color: #2f4a74;
}

[data-bs-theme="dark"] .markdown-token-badge--unknown {
  background: #30101a;
  color: #ffb3c1;
  border-color: #803447;
}