/*
 * 리치 본문 공용 스타일(단일 정본) — 에디터 미리보기와 열람 화면이 같은 파일을 로드한다.
 *  - 에디터: RichEditorImpl 의 content_css ("/richtext.css")
 *  - 열람:  RichContent 의 <link rel="stylesheet" precedence> (React 19 호이스팅·중복 제거)
 * 클래스 목록은 살균 화이트리스트(src/lib/sanitize.ts 의 allowedClasses)와 반드시 일치시킨다.
 * 색상은 다크 테마 토큰 값을 그대로 쓴다(tailwind.config.ts: gold #dABA65 — 여기선 정적 CSS라 hex 직접 표기).
 *
 * 특이도 노트: TinyMCE 편집 화면의 기본 인용 규칙이
 * `.mce-content-body:not([dir="rtl"]) blockquote` — 특이도 (0,2,1) — 로 회색 세로선을 긋는다.
 * 스타일 인용구/구분선 선택자는 클래스를 3중 반복해 (0,3,1)로 선언, 에디터·열람(prose) 양쪽에서
 * 항상 이기게 한다. 반복을 줄이면 에디터 안에서 세로선이 되살아나는 회귀가 생긴다(2026-08-21).
 */

/* ── 인용구 스타일 ───────────────────────────────────────────── */

blockquote.bq-quote.bq-quote.bq-quote,
blockquote.bq-bubble.bq-bubble.bq-bubble,
blockquote.bq-postit.bq-postit.bq-postit,
blockquote.bq-frame.bq-frame.bq-frame,
blockquote.bq-line-quote.bq-line-quote.bq-line-quote {
  /* 기본 인용구의 좌측 세로선 제거 — prose 는 논리 속성(border-inline-start)을 쓰므로 함께 리셋 */
  border-left: 0;
  border-inline-start: 0;
  margin-left: 0;
  margin-right: 0;
  font-style: normal;
}

/* 기본 인용(세로선)이 스타일 인용구를 감싸며 중첩된 경우(인용 버튼 → 스타일 적용 순서)
   바깥 인용구의 세로선·들여쓰기를 제거해 스타일 인용구만 보이게 한다.
   [class] 반복은 TinyMCE 기본 규칙(0,2,1)을 이기기 위한 특이도 보강. */
blockquote:has(> blockquote[class^="bq-"][class]),
blockquote:has(> blockquote[class*=" bq-"][class]) {
  border-left: 0;
  border-inline-start: 0;
  margin-left: 0;
  padding-left: 0;
  padding-inline-start: 0;
  font-style: normal;
}

/* 타이포그래피 플러그인(prose)이 넣는 장식 따옴표 억제 — 스타일 인용구와 중복 방지 */
:is(.bq-quote, .bq-bubble, .bq-postit, .bq-frame, .bq-line-quote) p:first-of-type::before,
:is(.bq-quote, .bq-bubble, .bq-postit, .bq-frame, .bq-line-quote) p:last-of-type::after {
  content: none;
}

/* 따옴표: 중앙 정렬 + 위(여는)·아래(닫는) 큰 골드 따옴표 */
blockquote.bq-quote.bq-quote.bq-quote {
  padding: 0 1rem;
  text-align: center;
}
blockquote.bq-quote.bq-quote.bq-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: #daba65;
}
blockquote.bq-quote.bq-quote.bq-quote::after {
  content: "\201D";
  display: block;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  margin-top: 0.5rem;
  color: #daba65;
}

/* 말풍선: 둥근 박스 */
blockquote.bq-bubble.bq-bubble.bq-bubble {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
}

/* 포스트잇: 옅은 골드 배경 + 상단 골드 라인 */
blockquote.bq-postit.bq-postit.bq-postit {
  padding: 1.25rem;
  background: rgba(218, 186, 101, 0.12);
  border-top: 2px solid #daba65;
}

/* 프레임: 골드 테두리 박스 + 중앙 정렬 */
blockquote.bq-frame.bq-frame.bq-frame {
  padding: 1.5rem;
  border: 1px solid rgba(218, 186, 101, 0.45);
  text-align: center;
}

/* 라인&따옴표: 위아래 구분선 사이에 큰 골드 따옴표 + 중앙 텍스트 (네이버 '라인&따옴표'형) */
blockquote.bq-line-quote.bq-line-quote.bq-line-quote {
  padding: 1rem 1rem 1.5rem;
  border-top: 1px solid rgba(218, 186, 101, 0.45);
  border-bottom: 1px solid rgba(218, 186, 101, 0.45);
  text-align: center;
}
blockquote.bq-line-quote.bq-line-quote.bq-line-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  color: #daba65;
}

/* ── 이미지/figure 정렬 ──────────────────────────────────────── */

/* 캡션 이미지(figure.image)의 정렬: TinyMCE 가 부여하는 align-* 클래스를 열람 화면에서도 재현.
   정렬 클래스가 있을 때만 figure 를 내용 크기(shrink-to-fit)로 줄인다 — 기본 figure 를 줄이면
   내부 img 의 margin:auto 가운데 정렬이 무력화된다(후기 GIF 좌측 붙음 회귀, 2026-08-21). */
figure.image.align-left,
figure.image.align-right,
figure.image.align-center {
  display: table;
}
figure.image.align-center {
  margin-left: auto;
  margin-right: auto;
}
figure.image.align-left {
  float: left;
  margin-right: 1rem;
}
figure.image.align-right {
  float: right;
  margin-left: 1rem;
}

/* ── 이미지 캡션 ─────────────────────────────────────────────── */

/* 에디터(figcaption)와 열람(.prose figcaption — 타이포그래피 플러그인 :where 규칙보다
   높은 특이도로 덮어씀)을 같은 모양으로 맞춘다: 작은 회색 글씨 + 중앙 정렬 */
figcaption,
.prose figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #a8a29e; /* neutral-400 */
  text-align: center;
}

/* ── 구분선 스타일 ───────────────────────────────────────────── */

hr.hr-dashed.hr-dashed.hr-dashed {
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
}
hr.hr-dotted.hr-dotted.hr-dotted {
  border: 0;
  border-top: 2px dotted rgba(255, 255, 255, 0.3);
}
hr.hr-thick.hr-thick.hr-thick {
  border: 0;
  border-top: 3px solid rgba(255, 255, 255, 0.2);
}
hr.hr-short.hr-short.hr-short {
  width: 5rem;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  border-top: 1px solid rgba(218, 186, 101, 0.6);
}
hr.hr-diamond.hr-diamond.hr-diamond {
  border: 0;
  text-align: center;
}
hr.hr-diamond.hr-diamond.hr-diamond::before {
  content: "◆ ◆ ◆";
  display: block;
  letter-spacing: 0.75em;
  /* letter-spacing 은 마지막 글자 뒤에도 붙는다 — 중앙 보정 */
  padding-left: 0.75em;
  font-size: 0.625rem;
  color: rgba(218, 186, 101, 0.7);
}