@roottale/cms-renderer-next 0.65.0 → 0.66.0

package/dist/cms-public.css

@@ -5,7 +5,7 @@
  * 독립적인 `.rt-exposure*` 이름을 쓰며 공유 보조 클래스는 `.rt-*`로 구분한다.
  * 문서 선택자는 `:where()`로 명시도를 낮춘다(ADR-0023 §5.1 #10).
  * 노출 UI는 테마 변수와 해당 클래스 범위에서 고객 사이트가 조정할 수 있다.
- * `!important`는 사용자의 동작 줄이기 설정을 보장하는 규칙에만 사용한다.
+ * `!important`는 동작 줄이기 설정과 모바일의 저장된 인라인 글자 크기·행간 보정에 한정한다.
  *
  * Token contract (zero-dependency):
  *   Every `--rt-*` variable referenced below has a static fallback. The
@@ -14,6 +14,15 @@
  *   element — `:where()` lets a plain class override.
  */
 
+/* SIL OFL Pretendard. --rt-font-body 지정 시 고객 글꼴을 우선한다. */
+@font-face {
+  font-family: "Pretendard Variable";
+  src: url('./fonts/PretendardVariable.woff2') format('woff2');
+  font-weight: 45 920;
+  font-style: normal;
+  font-display: swap;
+}
+
 [data-roottale-cms] :where(.rt-cms-list) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
@@ -486,14 +495,16 @@
   [data-roottale-cms] :where(.rt-cms-layout--toc-side) {
     grid-template-columns: minmax(0, 1fr) 15rem;
     align-items: start;
-    max-inline-size: calc(var(--rt-cms-measure, 42.5rem) + 15rem + var(--rt-spacing-6, 1.5rem));
+    max-inline-size: calc(var(--rt-cms-measure, 45rem) + 15rem + var(--rt-spacing-6, 1.5rem));
     margin-inline: auto;
   }
   [data-roottale-cms] :where(.rt-cms-layout--toc-side .rt-cms-toc-side) {
     order: 0; /* 넓은 화면: 오른쪽 컬럼 */
     position: sticky;
-    top: var(--rt-spacing-4, 1rem);
-    max-block-size: calc(100vh - 2rem);
+    top: var(--rt-cms-scroll-offset, 5rem);
+    align-self: start;
+    max-block-size: calc(100dvh - var(--rt-cms-scroll-offset, 5rem) - 1rem);
+    overscroll-behavior: contain;
     overflow-y: auto;
   }
   /* 사이드바 목차는 컬럼 폭(15rem)에 맞춤 — 본문 measure cap 무시. */
@@ -503,23 +514,6 @@
   }
 }
 
-[data-roottale-cms] :where(.rt-cms-body),
-[data-roottale-cms] :where([data-roottale-cms="body"]) {
-  min-inline-size: 0;
-  font-family: var(--rt-font-body, system-ui, sans-serif);
-  /* 읽기 표면 전용 스케일 — 네이버 프리미엄콘텐츠 기준 18px 기본, 테마 base 에
-     비례(테마가 base 를 키우면 본문도 같이 커진다). */
-  font-size: var(--rt-cms-body-size, calc(var(--rt-font-size-base, 1rem) * 1.125));
-  line-height: 1.8;
-  letter-spacing: -0.01em; /* 한글 본문 대활자 자간 보정 */
-  color: var(--rt-color-foreground, #06162f);
-  /* 한글 조판 — 어절 단위 줄바꿈. 긴 URL·토큰만 anywhere 로 넘침 방지.
-     에디터(admin globals .tiptap-content)와 1:1 파리티. astro 는 rt-cms-body
-     class 없이 data-roottale-cms="body" 만 쓰므로 attribute 셀렉터도 함께. */
-  word-break: keep-all;
-  overflow-wrap: anywhere;
-}
-
 /* 외부 게시판 HTML 가져오기. 원문의 안전한 inline style은 유지하되,
    넓은 표·이미지가 본문 measure 밖으로 페이지를 밀지 않게 경계를 둔다. */
 [data-roottale-cms] :where(.rt-imported-html) {
@@ -534,7 +528,7 @@
 
 /* 시각 브레드크럼 (avcd 구조, opt-in — RootTaleBlogPost `breadcrumb` prop). */
 [data-roottale-cms] :where(.rt-cms-breadcrumb) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block-end: 1rem;
   font-family: var(--rt-font-body, system-ui, sans-serif);
@@ -581,10 +575,10 @@
 
 /* 네이버 프리미엄콘텐츠 류 크롬리스 헤더 — 장식 카드 대신 타이포+헤어라인. */
 [data-roottale-cms] :where(.rt-cms-post-header) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block-end: var(--rt-spacing-7, 2rem);
-  padding-block-end: var(--rt-spacing-5, 1.25rem);
+  padding-block-end: 42px;
   border-block-end: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 72%, transparent);
 }
 
@@ -610,13 +604,15 @@
 }
 
 [data-roottale-cms] :where(.rt-cms-post-header .rt-cms-title) {
-  font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.375rem);
-  font-weight: var(--rt-font-weight-bold, 800);
+  font-family: var(--rt-font-display, var(--rt-font-body, "Pretendard Variable", Pretendard, sans-serif));
+  font-size: 44px;
+  font-weight: var(--rt-font-weight-bold, 700);
   line-height: 1.3;
-  margin-block-end: var(--rt-spacing-3, 0.75rem);
+  letter-spacing: -0.03em;
+  margin-block-end: 12px;
   word-break: keep-all;
   overflow-wrap: anywhere;
-  text-wrap: balance;
+  text-wrap: wrap;
 }
 
 [data-roottale-cms] :where(.rt-cms-post-header .rt-cms-excerpt) {
@@ -630,24 +626,24 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* 네이버 프리미엄콘텐츠·avcd 기준 문단 간 ≈24px. */
+/* AVCD 읽기 기준: 본문 720px, 문단 간 24px. */
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] > * + *) {
-  margin-block-start: 1.35em;
+  margin-block-start: 1.5rem;
 }
 
 /* 읽기 measure — rem 고정값. 72ch 는 각 블록의 font-size 기준으로 해석돼
    h2 같은 대활자 블록이 문단보다 넓어지는 문제가 있었다(ch 는 해당 요소의
    0 글자 폭 기준) — 컬럼 폭을 블록마다 다르게 만들지 않으려면 폰트 크기와
-   무관한 고정 단위가 필요. 어드민 에디터(.tiptap-content > *)와 1:1 파리티. */
+   무관한 고정 단위가 필요. 테마의 --rt-cms-measure 재정의는 유지한다. */
 [data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] > *) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
 }
 
 [data-roottale-cms] :where(.rt-archive-related) {
   display: grid;
   gap: var(--rt-spacing-4, 1rem);
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block: var(--rt-spacing-6, 1.5rem) var(--rt-spacing-7, 2rem);
   padding: var(--rt-spacing-4, 1rem);
@@ -718,7 +714,7 @@
 
 /* W5-2 — 양식(필드 그룹) 스칼라 값 정보 패널 (연관 박스 아래). */
 [data-roottale-cms] :where(.rt-archive-facts) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block: var(--rt-spacing-5, 1.25rem) var(--rt-spacing-7, 2rem);
   padding: var(--rt-spacing-4, 1rem);
@@ -759,267 +755,363 @@
   white-space: pre-line;
 }
 
-/* 주의 — 본문 최상위 블록의 margin 은 단축 속성 금지: inline 축을 0 으로 덮으면
-   컬럼 중앙 정렬(> * 의 margin-inline: auto)이 풀린다. margin-block 만 쓴다. */
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] p) {
-  margin-block: 0;
-  /* line-height 는 .rt-cms-body 의 1.8 을 그대로 상속 */
-  text-wrap: pretty;
+/* AVCD article 조판. li까지 reset을 복원하며 독립 본문에도 적용한다. */
+:is([data-roottale-cms="body"], .rt-cms-body) {
+  min-width: 0;
+  max-width: var(--rt-cms-measure, 45rem);
+  margin-inline: auto;
+  font-family: var(--rt-font-body, "Pretendard Variable", Pretendard, system-ui, sans-serif);
+  color: var(--rt-color-foreground, #2b323c);
+  font-size: var(--rt-cms-body-size, 18px);
+  font-weight: 400;
+  line-height: 1.7;
+  letter-spacing: -0.03rem;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  text-wrap: wrap;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h2),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h3),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h4) {
-  font-family: var(--rt-font-display, system-ui, sans-serif);
-  color: var(--rt-color-foreground, #06162f);
-  letter-spacing: 0;
-  line-height: 1.4;
-  text-wrap: balance;
-  /* 목차 앵커 점프 시 sticky 헤더에 가리지 않게. */
-  scroll-margin-block-start: var(--rt-cms-scroll-offset, 5rem);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(p, li, ul, ol)) {
+  line-height: inherit;
+  letter-spacing: inherit;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h2) {
-  margin-block: 2.8em 0.7em;
-  font-size: var(--rt-font-size-3xl, 1.875rem);
-  font-weight: var(--rt-font-weight-bold, 700);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(p) {
+  margin-block: 0 24px;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h3) {
-  margin-block: 1.7em 0.5em;
-  font-family: var(--rt-font-body, system-ui, sans-serif);
-  font-size: 1.375rem;
-  font-weight: var(--rt-font-weight-semibold, 600);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(h2, h3, h4)) {
+  padding: 0;
+  border: 0;
+  font-family: inherit;
+  color: var(--rt-color-primary, #082215);
+  letter-spacing: normal;
+  text-wrap: wrap;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  scroll-margin-top: var(--rt-cms-scroll-offset, 5rem);
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h4) {
-  margin-block: 1.4em 0.35em;
-  font-family: var(--rt-font-body, system-ui, sans-serif);
-  font-size: 1.1875rem;
-  font-weight: var(--rt-font-weight-semibold, 600);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(h2) {
+  margin-block: 110px 20px;
+  font-size: 32px;
+  --rt-cms-heading-size: 32px;
+  font-weight: 700;
+  line-height: 1.3;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h2:first-child),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h3:first-child),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h4:first-child) {
-  margin-block-start: 0;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(h3) {
+  margin-block: 32px 12px;
+  font-size: 24px;
+  --rt-cms-heading-size: 24px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h2 + p),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h3 + p),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] h4 + p) {
-  margin-block-start: 0;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(h4) {
+  margin-block: 24px 8px;
+  font-size: 20px;
+  --rt-cms-heading-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ul),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ol) {
-  padding-inline-start: 1.5em;
-  margin-block: 0;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(strong, b)) {
+  font-weight: 700;
 }
 
-/* 고객 사이트의 CSS 리셋(Preflight 등)이 list-style 을 지워도 불릿/번호 유지. */
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ul) {
-  list-style: disc;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(em, i)) {
+  font-style: italic;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ol) {
-  list-style: decimal;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(a) {
+  color: var(--rt-color-primary, #082215);
+  font-weight: inherit;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: color 180ms ease, text-decoration-color 220ms ease;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ul ul) {
-  list-style: circle;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(a:hover, a:active, a:focus-visible) {
+  text-decoration-color: currentColor;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ul ul ul) {
-  list-style: square;
+@media (prefers-reduced-motion: reduce) {
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(a) { transition: none; }
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] li) {
-  text-wrap: pretty;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(a:focus-visible) {
+  outline: 2px solid var(--rt-color-primary, #082215);
+  outline-offset: 3px;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] li + li) {
-  margin-block-start: 0.4em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(ul, ol)) {
+  margin-block: 0 24px;
+  padding-inline-start: 24px;
+  list-style-position: outside;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] li > p) {
-  margin: 0;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(ul) {
+  list-style-type: disc;
 }
 
-/* avcd 식 액센트 마커. */
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ul li)::marker {
-  color: color-mix(in srgb, var(--rt-color-primary, #06162f) 72%, transparent);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(ol) {
+  list-style-type: decimal;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] ol li)::marker {
-  color: color-mix(in srgb, var(--rt-color-primary, #06162f) 85%, transparent);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(ul ul) {
+  list-style-type: circle;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] blockquote) {
-  border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 88%, transparent);
-  border-radius: min(var(--rt-radius-md, 0.5rem), 0.625rem);
-  background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 32%, transparent);
-  padding: 1.125rem 1.25rem;
-  /* 본문 최상위 블록 — margin 단축 금지(중앙 정렬 유지), margin-block 만. */
-  margin-block: 1.6em;
-  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 82%, transparent);
-  /* font-style: italic 제거 — 한글 가짜 기울임 방지. */
+:is([data-roottale-cms="body"], .rt-cms-body) :where(ul ul ul) {
+  list-style-type: square;
 }
 
-/* 카드 내부 리듬 — 본문 owl(> * + *)은 최상위 전용이라 인용구 안 문단 간격은
-   여기서 별도 부여. */
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] blockquote > * + *) {
-  margin-block-start: 0.75em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(li) {
+  display: list-item;
+  list-style: inherit;
+  margin: 0 0 20px;
+  padding: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] a) {
-  color: var(--rt-color-primary, #06162f);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in srgb, var(--rt-color-primary, #06162f) 42%, transparent);
-  text-underline-offset: 0.18em;
-  transition: text-decoration-color 140ms ease;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(li + li) {
+  margin-top: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] a:hover),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] a:focus-visible) {
-  text-decoration-color: var(--rt-color-primary, #06162f);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(li > :is(ul, ol)) {
+  margin-block: 20px 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] mark) {
-  border-radius: var(--rt-radius-sm, 0.25rem);
-  padding-inline: 0.1em;
-  background: var(--rt-color-highlight, #fef3c7);
-  color: inherit;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(li > p) {
+  margin-block: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] u) {
-  text-underline-offset: 0.16em;
-  text-decoration-thickness: 0.08em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(ul > li::marker) {
+  color: var(--rt-color-primary, #082215);
+  font-size: 0.85em;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] s) {
-  text-decoration-thickness: 0.08em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(ol > li::marker) {
+  color: var(--rt-color-primary, #082215);
+  font-weight: 700;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] code) {
-  border-radius: var(--rt-radius-sm, 0.25rem);
-  background: var(--rt-color-muted, #f7f8f7);
-  padding-inline: 0.25em;
-  font-family: var(--rt-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
-  font-size: 0.9em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(blockquote) {
+  margin-block: 32px;
+  padding: 24px;
+  border: 0.5px solid rgb(154 164 177 / 50%);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--rt-color-foreground, #2b323c);
+  font-size: inherit;
+  font-weight: 400;
+  line-height: inherit;
+  font-style: normal;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] pre) {
-  overflow-x: auto;
-  border-radius: var(--rt-radius-md, 0.5rem);
-  background: var(--rt-color-muted, #f7f8f7);
-  padding: var(--rt-spacing-3, 0.75rem);
-  font-family: var(--rt-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
-  font-size: 0.9em;
-  /* 코드는 어절 조판 대상 아님 — 가로 스크롤로 원문 유지. */
-  word-break: normal;
-  overflow-wrap: normal;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(blockquote p) {
+  margin-bottom: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] pre code) {
+:is([data-roottale-cms="body"], .rt-cms-body) :where(blockquote p + p) {
+  margin-top: 24px;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(hr) {
+  margin-block: 40px;
+  border: 0;
+  border-top: 1px solid #e5e9ee;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(img, video, iframe)) {
   display: block;
-  padding: 0;
-  background: transparent;
+  max-width: 100%;
+  height: auto;
+  border: 0;
+  border-radius: 8px;
+  margin: 32px auto;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] img) {
-  display: block; /* 인라인 하단 갭 제거 */
-  max-inline-size: 100%;
-  block-size: auto;
-  border-radius: var(--rt-radius-md, 0.5rem);
-  margin-block: 2em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(img, video, iframe)) {
+  width: 100%;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(iframe) {
+  aspect-ratio: 16 / 9;
 }
 
-/* figure — 최상위 블록. margin 은 figure 가 소유(margin-block 만, 중앙 정렬 유지). */
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] figure) {
-  margin-block: 2em;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(figure) {
+  max-width: 100%;
+  margin: 32px auto;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] figure img) {
+:is([data-roottale-cms="body"], .rt-cms-body) :where(figure :is(img, video, iframe)) {
   margin-block: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] figcaption) {
-  margin-block-start: 0.625rem;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(figcaption) {
+  margin-block: 8px 0;
+  color: #9aa4b1;
+  font-size: 15px;
+  font-style: italic;
+  line-height: 1.7;
   text-align: center;
-  color: color-mix(in srgb, var(--rt-color-foreground, #06162f) 52%, transparent);
-  font-size: 0.875rem;
-  line-height: 1.55;
-  /* italic 쓰지 말 것 — 한글 가짜 기울임 금지. */
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] hr) {
+:is([data-roottale-cms="body"], .rt-cms-body) :where(pre) {
+  max-width: 100%;
+  overflow-x: auto;
+  margin-block: 24px;
+  padding: 16px 20px;
   border: 0;
-  border-block-start: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 90%, transparent);
-  margin-block: 2.5rem;
+  border-radius: 8px;
+  background: #f0f2f5;
+  color: var(--rt-color-foreground, #2b323c);
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
 }
 
-/* 본문 텍스트 선택 색 — 프라이머리 색으로 브랜드 일관성. */
-[data-roottale-cms] :where(.rt-cms-article) ::selection {
-  background: color-mix(in srgb, var(--rt-color-primary, #06162f) 14%, transparent);
+:is([data-roottale-cms="body"], .rt-cms-body) :where(code) {
+  font-family: Consolas, Monaco, monospace;
 }
 
-/* 표(table) — 좁은 화면에서 가로 스크롤(wrap), 셀 경계선·머리행 강조.
-   에디터(ProseMirror)는 맨 table — 발행 .rt-table 과 같은 룰을 element 로도
-   적용(에디터-뷰어 단일 소스). 발행 HTML 의 table 은 .rt-table 이면서 table 이므로
-   중복 적용돼도 동일 값이라 무해함. */
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table-wrap) {
-  overflow-x: auto;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:not(pre) > code) {
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #f0f2f5;
+  color: var(--rt-color-foreground, #2b323c);
+  font-size: 0.875em;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table) {
-  inline-size: 100%;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(pre code) {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(table) {
+  display: table;
+  width: 100%;
+  max-width: 100%;
+  margin-block: 24px;
+  border: 1px solid #d6dbe2;
+  border-radius: 8px;
   border-collapse: separate;
   border-spacing: 0;
-  border: 1px solid var(--rt-color-border, #dceef3);
-  border-radius: min(var(--rt-radius-md, 0.5rem), 0.625rem);
   overflow: hidden;
-  font-size: 0.9375em;
+  font-size: 17px;
+  line-height: 1.7;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table th),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table td),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table th),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table td) {
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(th, td)) {
+  min-width: 0;
+  padding: 20px 14px;
   border: 0;
-  border-block-end: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 80%, transparent);
-  border-inline-end: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 55%, transparent);
-  padding: 0.625rem 0.875rem;
-  text-align: start;
+  border-right: 1px solid #d6dbe2;
+  border-bottom: 1px solid #d6dbe2;
+  color: var(--rt-color-foreground, #2b323c);
+  text-align: left;
   vertical-align: top;
+  word-break: break-all;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table th:last-child),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table td:last-child),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table th:last-child),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table td:last-child) {
-  border-inline-end: 0;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(th, td):last-child) {
+  border-right: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table tr:last-child > th),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table tr:last-child > td),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table tr:last-child > th),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table tr:last-child > td) {
-  border-block-end: 0;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(tr:last-child > :is(th, td)) {
+  border-bottom: 0;
 }
 
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] .rt-table th),
-[data-roottale-cms] :where(.rt-cms-article [data-roottale-cms="body"] table th) {
-  background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 72%, white);
-  font-weight: 600;
+:is([data-roottale-cms="body"], .rt-cms-body) :where(th) {
+  background: #e5e9ee;
+  font-weight: 700;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(td) {
+  background: #fff;
+  font-weight: 500;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(td:first-child) {
+  background: #e5e9ee;
+  font-weight: 700;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(:is(th, td) p) {
+  margin-bottom: 0;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(u) {
+  text-underline-offset: 3px;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(s) {
+  text-decoration: line-through;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(mark) {
+  background: #fef3c7;
+  color: inherit;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(> :first-child) {
+  margin-top: 0;
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(> :last-child) {
+  margin-bottom: 0;
 }
 
+@media (max-width: 767px) {
+  [data-roottale-cms] :where(.rt-cms-post-header .rt-cms-title) {
+    font-size: 28px;
+    font-weight: var(--rt-font-weight-semibold, 600);
+    line-height: 1.3;
+    letter-spacing: -0.03em;
+  }
+  [data-roottale-cms] :where(.rt-cms-post-header .rt-cms-excerpt) {
+    font-size: var(--rt-cms-body-size, 17px);
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) {
+    font-size: var(--rt-cms-body-size, 17px);
+  }
+  /* 저장된 고정 크기·행간도 모바일에서는 본문과 소제목의 읽기 크기를 따른다. */
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(:is(p, li, div, span, strong, b, em, i)[style*="font-size"]) {
+    font-size: inherit !important;
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(:is(p, li, div, span, strong, b, em, i)[style*="line-height"]) {
+    line-height: inherit !important;
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(h2) {
+    font-size: 22px;
+    --rt-cms-heading-size: 22px;
+    margin-bottom: 16px;
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(h3) {
+    font-size: 20px;
+    --rt-cms-heading-size: 20px;
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(h4) {
+    font-size: 18px;
+    --rt-cms-heading-size: 18px;
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(table) {
+    font-size: 15px;
+  }
+  :is([data-roottale-cms="body"], .rt-cms-body) :where(:is(th, td)) {
+    padding: 16px 14px;
+  }
+}
+
+:is([data-roottale-cms="body"], .rt-cms-body) :where(.rt-table-wrap) { max-width: 100%; overflow-x: auto; }
 /* 공식 출처 — 일반 목록과 구분되는 근거 묶음. */
 [data-roottale-cms] :where(.rt-cms-references) {
   padding: var(--rt-spacing-5, 1.25rem);
@@ -1039,7 +1131,7 @@
 
 /* 공통 블록 이전을 마치지 않은 사이트의 글 하단 CTA. */
 [data-roottale-cms] :where(.rt-cms-post-cta) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block-start: var(--rt-spacing-6, 1.5rem);
   padding: var(--rt-spacing-5, 1.25rem);
@@ -1082,7 +1174,7 @@
 /* 공통 블록(post_footer) — 본문 바로 아래, 본문과 같은 폭. 모양은 어드민 표시 형태
    (data-pattern-layout / data-pattern-link-style / --rt-pattern-bg / --rt-pattern-btn-n)를 따른다. */
 [data-roottale-cms] :where(.rt-cms-post-pattern) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block-start: var(--rt-spacing-6, 1.5rem);
 }
@@ -1199,7 +1291,7 @@
 
 /* 관련 글 (rt-cms-related) — 글 하단 같은 카테고리 최근 글. */
 [data-roottale-cms] :where(.rt-cms-related) {
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block: var(--rt-spacing-8, 2.5rem) var(--rt-spacing-6, 1.5rem);
 }
@@ -1250,7 +1342,7 @@
 [data-roottale-cms] :where(.rt-cms-toc) {
   position: relative;
   /* 본문 measure 와 동일 폭으로 정렬(본문 위 인라인 배치). */
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   background: color-mix(in srgb, var(--rt-color-muted, #f7f8f7) 34%, white);
   border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 86%, transparent);
@@ -1400,7 +1492,7 @@
   display: flex;
   align-items: center;
   gap: var(--rt-spacing-4, 1rem);
-  max-inline-size: var(--rt-cms-measure, 42.5rem);
+  max-inline-size: var(--rt-cms-measure, 45rem);
   margin-inline: auto;
   margin-block-start: var(--rt-spacing-8, 3rem);
   border: 1px solid color-mix(in srgb, var(--rt-color-border, #dceef3) 82%, transparent);
@@ -1483,23 +1575,27 @@
     margin-inline: max(
         0rem,
         calc(
-          (100cqi - var(--rt-cms-measure, 42.5rem) - 15rem - var(--rt-spacing-6, 1.5rem)) / 2
+          (100cqi - var(--rt-cms-measure, 45rem) - 15rem - var(--rt-spacing-6, 1.5rem)) / 2
         )
       )
       auto;
   }
 }
 
-@media (max-width: 640px) {
-  [data-roottale-cms] :where(.rt-cms-title) {
-    font-size: var(--rt-font-size-2xl, 1.5rem);
+@media (max-width: 767px) {
+  [data-roottale-cms] :where(.rt-cms-toc) {
+    padding: 9px 16px;
   }
+  [data-roottale-cms] :where(.rt-cms-toc-summary) {
+    box-sizing: border-box;
+    min-block-size: 32px;
+    line-height: 20px;
+  }
+}
 
-  /* .rt-cms-post-header .rt-cms-title 는 clamp() 가 이미 좁은 화면 크기를
-     처리하므로 별도 오버라이드 불필요(제거됨). */
-
-  [data-roottale-cms] :where(.rt-cms-toc) {
-    padding: 1.125rem;
+@media (max-width: 640px) {
+  [data-roottale-cms] :where(.rt-cms-title:not(.rt-cms-post-header .rt-cms-title)) {
+    font-size: var(--rt-font-size-2xl, 1.5rem);
   }
 
   [data-roottale-cms] :where(.rt-cms-toc-item a) {
@@ -1510,12 +1606,6 @@
     align-items: flex-start;
   }
 
-  /* 모바일 본문 — 데스크톱보다 살짝 낮춘 스케일(1.0625 = 17px 기준). */
-  [data-roottale-cms] :where(.rt-cms-body),
-  [data-roottale-cms] :where([data-roottale-cms="body"]) {
-    font-size: var(--rt-cms-body-size, calc(var(--rt-font-size-base, 1rem) * 1.0625));
-  }
-
   /* 브레드크럼 — 좁은 화면은 말줄임 대신 자연 줄바꿈 허용(가로 스크롤 방지). */
   [data-roottale-cms] :where(.rt-cms-breadcrumb li[aria-current="page"]) {
     overflow: visible;
@@ -1689,3 +1779,61 @@
   outline: 2px solid var(--rt-color-primary, #06162f);
   outline-offset: 2px;
 }
+
+/* 본문 이미지 확대. 포털은 콘텐츠 CSS·overflow 경계 밖에 놓인다. */
+[data-rt-image-zoom] { cursor: zoom-in; }
+[data-rt-image-zoom]:focus-visible { outline: 2px solid #3161b1; outline-offset: 4px; }
+
+dialog.rt-cms-image-dialog {
+  box-sizing: border-box;
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 20px;
+  border: 0;
+  color: #fff;
+  background: transparent;
+  overflow: hidden;
+}
+
+.rt-cms-image-dialog[open] { display: flex; flex-direction: column; gap: 16px; animation: rt-image-reveal 180ms ease-out; }
+.rt-cms-image-dialog::backdrop { background: rgb(10 15 22 / 92%); }
+.rt-cms-image-dialog__toolbar { display: flex; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }
+.rt-cms-image-dialog__toolbar button {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 44px;
+  padding: 8px 16px;
+  border: 1px solid rgb(255 255 255 / 35%);
+  border-radius: 6px;
+  color: #fff;
+  background: rgb(255 255 255 / 8%);
+  font: 500 14px/1.5 "Pretendard Variable", sans-serif;
+  cursor: pointer;
+  transition: background-color 180ms ease;
+}
+.rt-cms-image-dialog__toolbar button:hover { background: rgb(255 255 255 / 20%); }
+.rt-cms-image-dialog__toolbar button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+.rt-cms-image-dialog__toolbar span { font-size: 24px; line-height: 1; }
+.rt-cms-image-dialog__viewport { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; text-align: center; }
+.rt-cms-image-dialog__viewport img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  object-fit: contain;
+}
+.rt-cms-image-dialog__viewport[data-enlarged='true'] img { max-width: none; max-height: none; }
+@keyframes rt-image-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@media (max-width: 600px) { dialog.rt-cms-image-dialog { padding: 12px; gap: 12px; } }
+@media (prefers-reduced-motion: reduce) {
+  .rt-cms-image-dialog[open] { animation: none; }
+  .rt-cms-image-dialog__toolbar button { transition: none; }
+}