/* ─────────────────────────────────────────────────────────────────────────────
   mirabel-dental-hornsby 리치텍스트 본문 스타일
   — **사이트와 어드민 에디터가 함께 쓰는 한 파일**

   🔴이 파일이 정본이다. 어드민(app.jiunstudio.com)이 이 URL 을 <link> 로 읽어 편집 화면을
     사이트와 같은 모습으로 그린다. 여기를 고치면 **양쪽이 동시에** 바뀐다 —
     어드민에 값을 옮겨 적는 미러는 없다.

   ⛔Tailwind 유틸 금지. public/ 은 빌드를 타지 않는다 — 순수 CSS 로만.
   ⚠️값은 전부 **실측**이다(2026-08-28, 라이브 blog 상세에서 getComputedStyle).
     이 사이트는 @tailwindcss/typography(prose)를 쓰는데 그 규칙은 `:where()` 라 명시도가 0이라,
     클래스 하나짜리인 아래 규칙이 항상 이긴다. 그래서 article 의 prose 는 그대로 두어도 된다
     (이미지·표처럼 여기서 다루지 않는 요소를 계속 prose 가 맡는다).
   서체는 아래 @import 가 직접 가져온다(소비자가 미리 등록해 둘 필요 없음).
   ───────────────────────────────────────────────────────────────────────────── */

/* 🔴이 파일이 쓰는 서체를 **스스로 가져온다**(@import). 어드민이 테넌트 폰트를 미리 알고
   등록해 둘 필요가 없어진다 — 새 테넌트가 생겨도 어드민 코드는 그대로다.
   ⚠️next/font 로 어드민에 등록하는 방식은 못 쓴다: next/font 는 `__Rubik_a1b2` 처럼 **해시된
     이름**을 만들어서, 이 파일의 `font-family: Rubik` 과 이름이 맞지 않는다(2026-08-28 실측 —
     document.fonts.check("16px Rubik") 이 false 였다).
   ⚠️사이트에서도 이 줄이 실행돼 next/font 와 겹치지만, display=swap 이라 렌더를 막지 않고
     브라우저가 같은 URL 을 재요청하지 않는다. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Newsreader:wght@400;500&display=swap');


/* 본문 래퍼 — 원래: font-body text-[18px] leading-[1.75] text-[#2b3335] max-w-[720px] */
.cms-body {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #2b3335;
}


/* ── 제목: Newsreader 400(세리프). prose-headings:font-display·font-normal 의 결과 ─── */
.cms-body :is(.cms-h1, .cms-h2, .cms-h3, .cms-h4, .cms-h5, .cms-h6) {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-weight: 400;
  color: #14181a; /* --ink */
}
.cms-body :is(.cms-h1, .cms-h2, .cms-h3, .cms-h4, .cms-h5, .cms-h6):first-child {
  margin-top: 0;
}

.cms-h1 {
  margin: 0 0 36px;
  font-size: 40.5px;
  line-height: 45px;
  letter-spacing: -0.81px;
}

/* ⛔제목에 밑줄을 자동으로 넣지 않는다(2026-08-28 확정) — 그 선은 이 사이트가 고른 디자인이
   아니라 어드민 테마(shadcn Typography 의 h2 `border-b pb-2`)를 복사해 오면서 딸려온 것이었다.
   선이 필요한 자리는 운영자가 **Horizontal Rule 블록**으로 넣는다(제목 장식이 아니라 문서 구조). */
.cms-h2 {
  margin: 64px 0 32px;
  font-size: 32px;
  line-height: 36.8px;
  letter-spacing: -0.64px;
}

.cms-h3 {
  margin: 36px 0 13.5px;
  font-size: 22.5px;
  line-height: 36px;
  letter-spacing: -0.45px;
}
.cms-h4 {
  margin: 0 0 9px;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.36px;
}
/* h5·h6 은 이 사이트가 따로 꾸미지 않는다(본문 크기 그대로) — 실측 그대로 옮긴다. */
.cms-h5,
.cms-h6 {
  margin: 0;
  font-size: 18px;
  line-height: 31.5px;
  letter-spacing: -0.36px;
}

/* ── 문단 ─────────────────────────────────────────────────────────────────── */
.cms-p {
  margin: 22.5px 0;
  line-height: 28px;
}
.cms-p:first-child {
  margin-top: 0;
}

/* 인용 — 틴트 패널. prose-blockquote:border-0·bg-tint·rounded-card-sm·px-8·py-7·not-italic */
.cms-quote {
  margin: 35.2px 0;
  padding: 28px 32px;
  border: 0;
  border-radius: 16px; /* --r-card-sm */
  background: #f7f9f9; /* --tint */
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
  line-height: 38.5px;
  color: #14181a;
}

/* 링크 — prose-a:text-pri + no-underline, hover 에서만 밑줄 */
.cms-link {
  color: #2f7d78; /* --pri */
  font-weight: 500;
  text-decoration: none;
}
.cms-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* ── 목록 ─────────────────────────────────────────────────────────────────── */
.cms-ul,
.cms-ol {
  padding-left: 29.25px;
  line-height: 31.5px;
}
.cms-ul {
  margin: 22.5px 0;
  list-style-type: disc;
}
.cms-ol {
  margin: 24px 0;
  list-style-type: decimal;
}
.cms-li {
  margin: 9px 0;
  padding-left: 6.75px;
}

/* ── 구분선(Horizontal Rule) ─────────────────────────────────────────────────
   운영자가 툴바 `+ Insert → Horizontal Rule` 로 **원하는 자리에** 넣는 선.
   제목에 자동으로 붙던 밑줄을 걷어낸 대신, 선이 필요하면 이걸로 넣는다 —
   제목 장식이 아니라 "여기서 내용이 바뀐다"는 문서 구조다.
   ⚠️선은 ::after 가 그린다(어드민 에디터가 클릭 영역을 위해 그렇게 만들어 두었다).
   색 출처: 한때 h2 에 자동으로 붙던 선과 같은 색. */
.cms-hr {
  margin: 2rem 0;
}
.cms-hr::after {
  height: 1px;
  background: #edf0f0;
}