/* 글쓰기 화면. 색·간격은 base.css 변수만 쓴다. */
.write-title { margin-bottom: var(--space-3); }
.write-note { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; margin-bottom: var(--space-4); }
.write-note-strong { color: var(--ink); font-weight: 500; }
.write-card { max-width: 480px; }
.write-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.draft-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius-m);
  font-size: 0.9375rem; line-height: 1.6;
}
.draft-band p { margin: 0; flex: 1 1 220px; }

.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.counter { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; white-space: nowrap; }

.write-help { margin-bottom: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.write-help summary { cursor: pointer; padding: var(--space-2) var(--space-3); font-weight: 500; font-size: 0.9375rem; min-height: 44px; display: flex; align-items: center; }
.write-help-body { padding: 0 var(--space-3) var(--space-3); font-size: 0.9375rem; line-height: 1.7; }
.write-help-body ul { margin-bottom: var(--space-2); }
.write-help-body code { white-space: pre-wrap; }

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); }
.tab {
  min-height: 44px; padding: var(--space-2) var(--space-4); font: inherit; font-weight: 500;
  color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--orange); }

#body-input { min-height: calc(12 * 1.8em + 2 * var(--space-2) + 3px); overflow: hidden; resize: none; }

.tag-preview { margin: var(--space-2) 0 0; min-height: 0; }
.preview-pane { min-height: 240px; }
.preview-title { margin: 0 0 var(--space-3); font-size: 1.75rem; line-height: 1.4; }
.preview-empty { color: var(--muted); }

.save-bar {
  position: sticky; bottom: 0; z-index: 10;
  margin: var(--space-5) calc(-1 * var(--space-4)) calc(-1 * var(--space-6));
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
}
.save-bar .btn { flex: 0 0 auto; }
.save-status { flex: 1 1 160px; margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

.tag-dropped { margin-top: var(--space-1); }
.conflict-box:not([hidden]) { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.conflict-box p { flex: 1 1 220px; margin: 0; }