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

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

   ⛔Tailwind 유틸 금지. public/ 은 빌드를 타지 않는다 — 순수 CSS 로만.
   ⚠️값은 실측이다(2026-08-28, news 상세에서 테마 클래스를 실제로 적용해 getComputedStyle).

   🔴🔴**이 사이트만 배경색을 갖는다.** 다른 테넌트는 밝은 종이라 어드민 크림 위에 그대로
     얹으면 되지만, fitness 는 다크(페이지 배경 #0c0a09 · 글자 흰색)라 배경 없이 얹으면
     **크림 위의 흰 글자가 되어 안 보인다**. 그래서 .cms-body 가 배경을 함께 든다 —
     어드민 UI(툴바·주변)는 크림 그대로이고 본문 캔버스만 어두워진다.
   ───────────────────────────────────────────────────────────────────────────── */

/* 🔴이 파일이 쓰는 서체를 **스스로 가져온다**(@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=Montserrat:wght@400;500;600;800&display=swap');


/* 본문 — Montserrat 18px. 색은 prose-invert 계열(흰색은 본문으로 눈부시다). */
.cms-body {
  background: #0c0a09;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5556; /* 실측 28px / 18px */
  color: #d1d5dc;
}


/* ── 제목: 흰색. 크기·굵기·자간은 실측 그대로(text-4xl~ · font-semibold · tracking-tight) ── */
.cms-body :is(.cms-h1, .cms-h2, .cms-h3, .cms-h4, .cms-h5, .cms-h6) {
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  color: #fff;
  letter-spacing: -0.025em; /* tracking-tight — 크기에 비례하도록 em 으로 */
}
.cms-body :is(.cms-h1, .cms-h2, .cms-h3, .cms-h4, .cms-h5, .cms-h6):first-child {
  margin-top: 0;
}

/* ⚠️위 여백(margin-top)은 실측에 **없던 값**을 새로 준다 — 이 사이트 테마에는 제목 여백이
   아예 없어서 제목이 앞 문단에 붙어 있었다(편집 화면에서도 글 구조가 안 보인다).
   다른 테넌트(PT·mirabel)와 같은 계단으로 맞춘다. */
.cms-h1 {
  margin-top: 3rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
}
.cms-h2 {
  margin-top: 3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
}
.cms-h3 {
  margin-top: 2.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.cms-h4 {
  margin-top: 2rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.cms-h5 {
  margin-top: 2rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.cms-h6 {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .cms-h1 {
    font-size: 3rem;
    line-height: 1;
  } /* lg:text-5xl */
}

/* ── 문단 ─────────────────────────────────────────────────────────────────── */
.cms-p:not(:first-child) {
  margin-top: 1.5rem;
}

/* mt-6 border-l-2 pl-6 italic */
.cms-quote {
  margin-top: 1.5rem;
  border-left: 2px solid #e5e5e5;
  padding-left: 1.5rem;
  font-style: italic;
}

/* text-blue-600 — 다크 위에서 어두워 보이지만 사이트가 쓰는 색 그대로 둔다.
   바꾸려면 여기 한 줄만 고치면 사이트·에디터가 함께 바뀐다. */
/* 🔴본문 링크는 **어두운 면 위에서 읽히는 파랑**이어야 한다. 종전 #2563eb(blue-600)는
   ink(#0c0a09) 위 대비가 3.82:1 로 WCAG AA(4.5:1) 미달이었다 — 2026-09-11 Lighthouse
   실측에서 뉴스 상세 접근성 점수를 100 에서 96 으로 끌어내린 유일한 항목.
   #60a5fa(blue-400) = 7.77:1. 사이트와 어드민이 같은 파일을 쓰고 이 테넌트의 `.cms-body` 는
   양쪽 다 어두우므로(위 배경 주석) 한 번 고치면 둘 다 맞는다.
   ⚠️밝은 배경 테넌트가 이 파일을 쓰게 되면 그때는 면별로 갈라야 한다 — 지금은 한 값이다. */
.cms-link {
  color: #60a5fa;
  /* 🔴밑줄은 장식이 아니라 **요건**이다. 본문 한가운데 있는 링크는 색만으로 구분되면 안
     된다(WCAG 1.4.1). 링크 #60a5fa 와 본문 #d1d5dc 의 대비는 1.72:1 로 3:1 을 한참 밑돈다 —
     색을 더 밝히면 이번엔 배경 대비가 무너지므로 답은 색이 아니라 밑줄이다.
     2026-09-11 Lighthouse 실측: 이 한 줄이 없어서 뉴스 상세 접근성이 96 이었다
     (`link-in-text-block`, 가중치 7). hover 는 색이 아니라 **굵기**로 바뀐다. */
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.cms-link:hover {
  cursor: pointer;
  text-decoration-thickness: 2px;
}

/* ── 본문 이미지 ───────────────────────────────────────────────────────────── */
/* 🔴`height:auto` 가 비율 박스를 완성한다. 렌더러가 치수를 **속성**으로 내면
   (cms-runtime 0.13.2+) 브라우저가 `aspect-ratio: width/height` 를 잡아 로드 전에 자리를
   비운다 — 대신 그 상태로 두면 원본 픽셀 높이 그대로 나오므로 `height:auto` 가 필요하다.
   실측(2026-09-11, Chrome / 400px 칸에 2560×1706): 속성+auto = 267px(정확), 속성 없음 = 0px.
   그 0px 이 teambros 뉴스 상세의 CLS 0.108~0.276 이었다 — 이미지가 도착하는 순간 읽던
   문단이 아래로 튄다. ⚠️치수를 모르는 이미지는 종전대로 0px 이다(렌더러가 속성을 안 단다). */
.cms-body img.cmsl-image {
  height: auto;
}

/* ── 목록 ─────────────────────────────────────────────────────────────────── */
.cms-ul,
.cms-ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}
.cms-ul {
  list-style-type: disc;
}
.cms-ol {
  list-style-type: decimal;
}
.cms-li + .cms-li {
  margin-top: 0.5rem;
}

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