/* ── Structure editor tool ── */
.editor-wrapper {
    display: flex; flex-direction: column; gap: 1rem;
}
.jsme-box {
    width: 100%; min-height: 420px;
    border: 1px solid var(--color-border); border-radius: 0.5rem;
    background: var(--color-surface); overflow: hidden; position: relative;
}
.jsme-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: 0.875rem;
}
.jsme-loading.hidden { display: none; }
.smiles-sync {
    display: flex; gap: 0.5rem; align-items: center;
}
.smiles-sync input {
    flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border);
    border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem;
    background: var(--color-bg); color: var(--color-text);
}
/* tool.css의 .tool-body button (0,1,1) 보다 높은 명시도(0,2,1)로 sync bar 버튼 크기 재정의 */
.tool-body .smiles-sync button {
    min-height: unset;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    font-weight: 600;
}
.editor-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.editor-actions button {
    padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.375rem;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text); cursor: pointer;
}
.editor-actions button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.editor-actions .btn-cta { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.editor-actions .btn-cta:hover { opacity: 0.9; }

/* #249 1단계 — white text on --color-primary fails WCAG AA in dark (3.67:1). */
:root[data-theme="dark"] .editor-actions .btn-cta {
    background: var(--color-primary-on-fill);
    border-color: var(--color-primary-on-fill);
}
:root[data-theme="dark"] .editor-actions .btn-cta:hover {
    opacity: 1;
    background: var(--color-primary-on-fill-hover);
}
.editor-preview {
    text-align: center; padding: 1rem;
    border: 1px solid var(--color-border); border-radius: 0.5rem;
    background: var(--color-surface); min-height: 80px;
}
.editor-preview img { max-width: 300px; max-height: 200px; }

/* ── Preview Hint ── */
.editor-preview-hint {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}