/* =========================================================
   Artstore Works — 노트 리치 편집기 (WYSIWYG)
   저장 형식은 계속 마크다운. 이 파일은 편집 UI 스타일만 담당.
   색상은 전부 CSS 변수 사용 (다크 모드 자동 대응)
   ========================================================= */

/* 헤더의 서식/원문 토글이 좁은 폭에서 줄바꿈되지 않도록 */
.notes-head .segmented { flex: none; }
.notes-head .segmented button { white-space: nowrap; }

/* ---------- 툴바 ---------- */
.ne-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-sunken);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ne-toolbar .ne-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--line);
  flex: none;
}

.ne-tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background .13s, color .13s;
}

.ne-tb svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ne-tb:hover { background: var(--bg-hover); color: var(--text); }
.ne-tb:active { background: var(--bg-active); }
.ne-tb.on { background: var(--accent-tint); color: var(--accent-text, var(--accent)); }
.ne-tb[disabled] { opacity: .4; cursor: default; }
.ne-tb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ne-tb.ne-tb-b { font-weight: 800; }
.ne-tb.ne-tb-i { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.ne-tb.ne-tb-code { font-family: var(--font-mono); font-size: 12px; }

/* ---------- 본문 (contenteditable) ---------- */
.ne-body {
  min-height: 320px;
  padding: 2px 2px 40px;
  outline: 0;
  border: 0;
  border-radius: 8px;
  caret-color: var(--accent);
  /* .prose 클래스와 함께 사용 — 보기/편집이 동일하게 보이도록 */
}

.ne-body:focus { outline: 0; }

.ne-body[data-empty="1"]::before {
  content: attr(data-ph);
  color: var(--text-4);
  pointer-events: none;
  display: block;
  height: 0;
}

/* 편집 중에는 블록 사이 여백을 조금 넉넉히 — 클릭해서 커서 넣기 쉽게 */
.ne-body > * { margin-top: 0; }
.ne-body p:last-child { margin-bottom: 0; }

.ne-body pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.ne-body pre code { display: block; min-height: 1.2em; }

.ne-body hr {
  cursor: pointer;
}

.ne-body input[type=checkbox] {
  cursor: pointer;
  vertical-align: -1px;
  accent-color: var(--accent);
}

/* styles.css 의 전역 리셋(ul{list-style:none})으로 글머리 기호가 사라져
   편집 중에 목록인지 알기 어렵다 — 편집기 안에서만 되살린다 */
.ne-body ul { list-style: disc outside; }
.ne-body ol { list-style: decimal outside; }
.ne-body ul > li, .ne-body ol > li { list-style: inherit; }
.ne-body ul, .ne-body ol { padding-left: 22px; }
.ne-body li { margin: 0; }
.ne-body li:has(> input[type=checkbox]) { list-style: none; margin-left: -4px; }

.ne-body blockquote { border-left: 3px solid var(--accent); }

.ne-body a { cursor: pointer; }

.ne-body ::selection { background: var(--accent-tint); }

/* ---------- 원문(마크다운) 모드 ---------- */
.ne-raw {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg-sunken);
  outline: 0;
  resize: vertical;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
}

.ne-raw:focus { border-color: var(--accent); }

/* ---------- 경고 배너 (편집기가 다루기 어려운 서식) ---------- */
.ne-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow, var(--accent));
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.6;
}

.ne-warn svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ne-warn b { color: var(--text); font-weight: 600; }
.ne-warn button {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.ne-warn button:hover { background: var(--bg-hover); }

/* ---------- 링크 입력 모달 보조 ---------- */
.ne-link-row { display: flex; flex-direction: column; gap: 8px; }
.ne-link-row label { font-size: 11.5px; color: var(--text-3); font-weight: 600; }

/* ---------- 모바일 ---------- */
@media (max-width: 720px) {
  .notes-head { flex-wrap: wrap; }
  .notes-head .note-title { flex: 1 1 100%; }
  .ne-toolbar { gap: 1px; padding: 4px; }
  .ne-tb { min-width: 26px; height: 26px; padding: 0 4px; }
  .ne-toolbar .ne-sep { margin: 2px; }
}