/* ================================================================
   pages/crud-form.css — CRUD 등록/수정 쇼케이스 전용 스타일
   - 첨부 파일 드롭존 / 파일 리스트
   - 리치 텍스트 에디터 (툴바 + contenteditable 본문)
   ================================================================ */

/* ── 첨부 파일 드롭존 ──────────────────────────────────────── */
.crud-file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--wd-space-xl) var(--wd-space-lg);
  border: 1.5px dashed var(--wd-border);
  border-radius: var(--wd-radius-md);
  background: var(--wd-bg-subtle, #f8fafc);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  text-align: center;
}

.crud-file-drop.is-dragover {
  background: var(--wd-primary-light);
  border-color: var(--wd-primary);
}

.crud-file-drop-icon {
  color: var(--wd-text-muted);
}

.crud-file-drop.is-dragover .crud-file-drop-icon {
  color: var(--wd-primary);
}

.crud-file-drop-text {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--wd-text-sm);
  color: var(--wd-text);
}

.crud-file-drop-text label { margin: 0; }

.crud-file-drop-hint {
  font-size: var(--wd-text-xs);
  color: var(--wd-text-muted);
}

/* ── 첨부 파일 리스트 ──────────────────────────────────────── */
.crud-file-list {
  margin-top: var(--wd-space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crud-file-empty {
  padding: var(--wd-space-md);
  font-size: var(--wd-text-xs);
  color: var(--wd-text-muted);
  text-align: center;
  border: 1px dashed var(--wd-border);
  border-radius: var(--wd-radius-sm);
}

.crud-file-item {
  display: flex;
  align-items: center;
  gap: var(--wd-space-md);
  padding: 10px 14px;
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius-sm);
  background: #ffffff;
}

[data-theme="dark"] .crud-file-item {
  background: rgba(255, 255, 255, 0.02);
}

.crud-file-icon {
  flex-shrink: 0;
  color: var(--wd-primary);
}

.crud-file-meta { flex: 1; min-width: 0; }

.crud-file-name {
  font-size: var(--wd-text-sm);
  font-weight: var(--wd-weight-semibold);
  color: var(--wd-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crud-file-size {
  font-size: var(--wd-text-xs);
  color: var(--wd-text-muted);
  margin-top: 2px;
}

/* ── 리치 텍스트 에디터 ─────────────────────────────────── */
.crud-editor {
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius-sm);
  background: #ffffff;
  overflow: hidden;
}

[data-theme="dark"] .crud-editor {
  background: rgba(255, 255, 255, 0.02);
}

.crud-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--wd-border);
  background: var(--wd-bg-subtle, #f8fafc);
}

[data-theme="dark"] .crud-editor-toolbar {
  background: rgba(255, 255, 255, 0.03);
}

.crud-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--wd-radius-xs, 4px);
  background: transparent;
  color: var(--wd-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.crud-editor-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--wd-primary);
}

[data-theme="dark"] .crud-editor-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.crud-editor-btn.is-active {
  background: var(--wd-primary-light);
  color: var(--wd-primary);
  border-color: rgba(26, 115, 232, 0.25);
}

.crud-editor-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--wd-border);
}

.crud-editor-body {
  min-height: 180px;
  padding: 14px 16px;
  font-size: var(--wd-text-sm);
  line-height: 1.75;
  color: var(--wd-text);
  outline: none;
}

.crud-editor-body:focus {
  background: rgba(26, 115, 232, 0.02);
}

.crud-editor-body p  { margin: 0 0 8px; }
.crud-editor-body ul,
.crud-editor-body ol { margin: 0 0 8px; padding-left: 24px; }
.crud-editor-body h2 { font-size: var(--wd-text-lg); font-weight: var(--wd-weight-bold); margin: 12px 0 6px; color: var(--wd-text-dark); }
.crud-editor-body a  { color: var(--wd-primary); text-decoration: underline; }

/* ── 컴포넌트 쇼케이스 보조: 수정 모드 라벨 색상 변경 ───── */
.crud-form-mode-edit .page-title [data-mode-label] { color: var(--wd-primary); }