/* 에디터로 쓴 글이 상세 화면에서 **서식 그대로** 보이게 한다.
 *
 * 왜 필요한가: 저장되는 것은 순수 HTML 이다(h1·blockquote·table·ul …). 사이트 CSS 가
 * 리셋을 걸어 두면 그 태그들이 전부 밋밋한 문단으로 보인다 — 어드민 편집 화면에서는
 * 멀쩡하던 글이 사이트에서만 깨지고, 쓴 사람은 이유를 알 수 없다.
 *
 * 그래서 **본문 영역 안에서만** 기본 서식을 되살린다. `[data-editor-view]` 바깥에는
 * 한 줄도 영향을 주지 않는다 — 사이트 디자인을 건드리면 안 된다.
 *
 * 범위는 API 새니타이저가 허용하는 것과 같다(aibuilder-api html_sanitizer):
 * 허용 밖 태그는 저장 때 사라지므로 여기서도 다루지 않는다.
 *
 * ⚠ **정본은 빌더다** — aibuilder-builder `widgets/board/PostDetailPage.tsx` 의 `.rte-content`.
 * 같은 글이 빌더 기본 사이트와 우리 산출물에서 다르게 보이면 그 자체가 결함이라,
 * 크기·여백은 정본 값을 그대로 쓴다(기준 15px · h1 2em · 줄간격 1.625 · p 여백 .5em 0).
 * 우리가 더 가진 것(u·figcaption·tiptap-table·정렬 클래스·편집 화면)은 새니타이저가
 * 허용하는데 정본에 없는 것들이라 남긴다 — **더 가지는 건 되고, 다르게 갖는 건 안 된다.**
 */

[data-editor-view] {
  /* ⚠ **기준 크기를 반드시 박는다.** 아래 위계가 전부 em 상대값이라, 기준이 없으면
   * 사이트 body 크기를 그대로 받는다 — 전역 11px 인 몰에서 h2 가 21px 이 아니라
   * 16.5px 로 나와 **위계가 통째로 축소된다**(2026-08-20 아워커버스 실측).
   * 값은 빌더 정본과 같은 15px. 참고로 어드민 편집 화면은 14px(useTermsEditor `text-sm`)이라
   * 쓰기와 읽기가 1px 어긋나 있는데, 그건 상류에서 정리할 일이고 우리는 읽는 쪽을 따른다. */
  font-size: 15px;
  line-height: 1.625;
  word-break: break-word;
}

/* 문단·줄바꿈 — 리셋이 margin 을 0 으로 만든 사이트가 많다 */
[data-editor-view] p { margin: .5em 0; }
[data-editor-view] p:last-child { margin-bottom: 0; }
[data-editor-view] hr { margin: 1.5em 0; border: 0; border-top: 1px solid currentColor; opacity: .2; }

/* 제목 — 크기 위계가 없으면 글 구조가 사라진다 */
[data-editor-view] h1,
[data-editor-view] h2,
[data-editor-view] h3,
[data-editor-view] h4,
[data-editor-view] h5,
[data-editor-view] h6 { margin: 1.4em 0 .6em; font-weight: 700; line-height: 1.35; }
[data-editor-view] h1 { font-size: 2em; }
[data-editor-view] h2 { font-size: 1.5em; }
[data-editor-view] h3 { font-size: 1.25em; }
[data-editor-view] h4 { font-size: 1.1em; }
[data-editor-view] h5 { font-size: 1em; }
[data-editor-view] h6 { font-size: .9em; }
[data-editor-view] > :first-child { margin-top: 0; }

/* 목록 — list-style 을 지운 리셋이 흔하다. 여기서만 되살린다 */
[data-editor-view] ul,
[data-editor-view] ol { margin: 0 0 1em; padding-left: 1.6em; }
[data-editor-view] ul { list-style: disc; }
[data-editor-view] ol { list-style: decimal; }
[data-editor-view] li { margin: .2em 0; }
[data-editor-view] li > ul,
[data-editor-view] li > ol { margin-bottom: 0; }

/* 인용·코드 */
[data-editor-view] blockquote {
  margin: 1em 0; padding: .2em 0 .2em 1em;
  border-left: 3px solid currentColor; opacity: .85;
}
[data-editor-view] pre {
  margin: 1em 0; padding: 1em; overflow-x: auto;
  background: rgba(0, 0, 0, .05); border-radius: 4px;
  white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
[data-editor-view] code {
  padding: .15em .35em; background: rgba(0, 0, 0, .06); border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em;
}
[data-editor-view] pre code { padding: 0; background: none; }

/* 강조 — u/s 는 리셋에 자주 지워진다 */
[data-editor-view] strong, [data-editor-view] b { font-weight: 700; }
[data-editor-view] em, [data-editor-view] i { font-style: italic; }
[data-editor-view] u { text-decoration: underline; }
[data-editor-view] s { text-decoration: line-through; }
[data-editor-view] a { text-decoration: underline; }

/* 표 — 어드민이 tiptap-table 클래스를 붙인다. 그 클래스가 없어도 보이게 태그로도 건다 */
[data-editor-view] table,
[data-editor-view] .tiptap-table {
  width: 100%; margin: 1em 0; border-collapse: collapse; table-layout: fixed;
}
[data-editor-view] th,
[data-editor-view] td {
  padding: .5em .7em; border: 1px solid rgba(0, 0, 0, .15);
  vertical-align: top; text-align: left;
}
[data-editor-view] th { background: rgba(0, 0, 0, .04); font-weight: 700; }
/* 좁은 화면에서 표가 레이아웃을 밀지 않게 — 가로 스크롤은 본문 안에서만 */
[data-editor-view] { overflow-x: auto; }

/* 이미지 — 원본 크기 그대로면 모바일에서 넘친다 */
[data-editor-view] img { max-width: 100%; height: auto; }
[data-editor-view] figure { margin: 1em 0; }
[data-editor-view] figcaption { margin-top: .5em; font-size: .9em; opacity: .75; }

/* 정렬 — TextAlign 확장이 style="text-align:…" 로 넣는다. 새니타이저 허용 목록에 있다.
   클래스로 넣는 구현도 있어 둘 다 받는다. */
[data-editor-view] .has-text-align-left { text-align: left; }
[data-editor-view] .has-text-align-center { text-align: center; }
[data-editor-view] .has-text-align-right { text-align: right; }
[data-editor-view] .has-text-align-justify { text-align: justify; }

/* 편집 화면(글쓰기) — 상세와 같은 서식으로 보여야 "쓴 대로 나온다" 가 성립한다 */
.ahb-ui-editor .ProseMirror { min-height: 320px; padding: .8em 1em; outline: none; }
.ahb-ui-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: left; height: 0; pointer-events: none; opacity: .45;
}