/* TRNB M3.1 — Toast UI Editor theme integration (overrides only). */

/* frame: match site surface/lines, never wider than the page (§48/§69) */
.editor-holder { margin-top: 6px; }
.editor-holder .toastui-editor-defaultUI {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 100%;
  font-family: inherit;
}
.editor-holder .toastui-editor-toolbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.editor-holder .toastui-editor-toolbar-icons {
  color: var(--text);
  border-radius: 6px;
}
.editor-holder .toastui-editor-toolbar-icons:hover:not(:disabled),
.editor-holder .toastui-editor-toolbar-icons.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.editor-holder .toastui-editor-mode-switch { background: var(--bg); }
.editor-holder .tab-item.active { color: var(--accent); background: var(--surface); }
.editor-holder .toastui-editor-main .ProseMirror,
.editor-holder .toastui-editor-md-preview .toastui-editor-contents {
  background: var(--surface);
  color: var(--text);
}
.editor-holder .toastui-editor-defaultUI-toolbar {
  flex-wrap: wrap;              /* keep every tool + mode switch visible */
  row-gap: 2px;
}

/* custom YouTube toolbar button — Toast UI wraps custom toolbar items in
   .toastui-editor-toolbar-item-wrapper (margin 7px 5px) and its generic
   `.toastui-editor-defaultUI-toolbar button` rule re-adds the same margin,
   so an own margin double-spaces the button 7px below the built-in icons.
   Scope past the generic rule, drop the margin (the wrapper owns spacing)
   and let the button fill its wrapper exactly like the 32px icon buttons. */
.editor-holder .toastui-editor-defaultUI-toolbar .yt-toolbar-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; background: transparent; color: #c00;
  font-size: 13px; cursor: pointer; border-radius: 6px;
}
.editor-holder .toastui-editor-defaultUI-toolbar .yt-toolbar-btn:hover:not(:disabled) {
  background: var(--accent-soft);
}
.editor-holder .yt-toolbar-btn svg { display: block; }

/* editor-canvas youtube block preview */
.yt-editor-preview {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #000; color: #eee; padding: 8px; max-width: 480px;
}
.yt-editor-preview img { height: 54px; border-radius: 4px; }
.yt-editor-preview span { font-size: 12px; }
.yt-editor-invalid {
  border: 1px solid #d66; border-radius: 8px; padding: 8px 12px;
  color: #a00; background: #fee; font-size: 13px;
}

/* dialog (§22/§49) */
.yt-dialog {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; min-width: 320px; max-width: 92vw;
}
.yt-dialog::backdrop { background: rgba(0,0,0,.45); }
.yt-dialog h2 { margin: 0 0 4px; font-size: 17px; }
.yt-dialog input[type=url] {
  width: 100%; padding: 8px 10px; margin: 8px 0;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.yt-dialog-error { color: #b00; font-size: 13px; margin: 0 0 6px; }
.yt-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* hidden value-holder textarea (no-JS fallback keeps it visible) */
.editor-value-hidden { display: none; }
.editor-error { color: #b00020; font-size: 13px; margin: 6px 0 0; }