/* 에디터 전용 CSS를 독립 자산으로 제공해 배포 캐시와 테마 CSS 순서에 영향을 받지 않게 합니다. */
.static-editor.code-editor {
  display: grid;
  gap: .7rem;
  max-width: 56rem;
  padding: 1rem;
  border: 1px solid var(--ui-border, #d9dee7);
  border-radius: .5rem;
  background: var(--ui-page, #fff);
}

.static-editor.code-editor .editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.static-editor.code-editor .editor-toolbar button {
  min-height: 2.1rem;
  padding: .35rem .7rem;
  border: 1px solid var(--ui-accent, #176b52);
  border-radius: .35rem;
  background: var(--ui-accent, #176b52);
  color: #fff;
  cursor: pointer;
}

.static-editor.code-editor .editor-toolbar button:hover,
.static-editor.code-editor .editor-toolbar button:focus-visible {
  background: color-mix(in srgb, var(--ui-accent, #176b52) 82%, #000);
}

.static-editor.code-editor .editor-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--ui-muted, #5d6675);
}

.static-editor.code-editor .code-editor-body {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid var(--ui-border, #d9dee7);
  border-radius: .35rem;
  background: var(--ui-surface, #f7f8fa);
}

.static-editor.code-editor .editor-gutter {
  box-sizing: border-box;
  min-width: 3rem;
  min-height: 12rem;
  margin: 0;
  padding: .75rem .55rem;
  border: 0;
  border-right: 1px solid var(--ui-border, #d9dee7);
  background: var(--ui-surface-raised, #eef1f5);
  color: var(--ui-muted, #687384);
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
  user-select: none;
  white-space: pre;
}

.static-editor.code-editor .code-editor-surface {
  display: grid;
  position: relative;
  min-width: 0;
  min-height: 12rem;
  overflow: hidden;
}

.static-editor.code-editor .code-editor-surface .editor-highlight,
.static-editor.code-editor .code-editor-surface textarea {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 100%;
  min-height: 12rem;
  margin: 0;
  padding: .75rem;
  border: 0;
  border-radius: 0;
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}

.static-editor.code-editor .code-editor-surface .editor-highlight {
  z-index: 0;
  pointer-events: none;
  color: var(--ui-text, #18202b);
  scrollbar-width: none;
}

.static-editor.code-editor .code-editor-surface textarea {
  z-index: 1;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--ui-text, #18202b);
}

.static-editor.code-editor .code-editor-surface textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--ui-accent, #176b52) 35%, transparent);
  outline-offset: -3px;
}

.static-editor.code-editor .code-editor-surface .editor-token-keyword,
.static-editor.code-editor .code-editor-surface mark.editor-token-keyword {
  color: #075985;
  background: transparent;
  font-weight: 750;
}

.static-editor.code-editor .code-editor-surface .editor-token-comment,
.static-editor.code-editor .code-editor-surface mark.editor-token-comment {
  color: #6b7280;
  background: transparent;
  font-style: italic;
}

.static-editor.code-editor .code-editor-surface .editor-token-string,
.static-editor.code-editor .code-editor-surface mark.editor-token-string {
  color: #047857;
  background: transparent;
}

.static-editor.code-editor .editor-status {
  color: var(--ui-muted, #687384);
  font-size: .85rem;
}

@media (max-width: 36rem) {
  .static-editor.code-editor .code-editor-body {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
}