diff --git a/frontend/src/pages/DocViewerPage.jsx b/frontend/src/pages/DocViewerPage.jsx
index 2c0ff03..d42833c 100644
--- a/frontend/src/pages/DocViewerPage.jsx
+++ b/frontend/src/pages/DocViewerPage.jsx
@@ -92,11 +92,21 @@ export default function DocViewerPage() {
         //   아니라서). 그러면 문서 CSS의 `body { ... }` 기본 규칙(폰트·배경 등)이 적용될
         //   대상이 사라진다. 그래서 본문을 .__docbody div로 감싸고, CSS의 `body` 선택자를
         //   `.__docbody`로 바꿔치기해 규칙이 그 div에 걸리게 한다. (선택자 시작 위치에서만 치환)
-        styles = styles.replace(/(^|[}{,])(\s*)body\b/g, '$1$2.__docbody');
+        styles = styles
+          .replace(/(^|[}{,])(\s*)body\b/g, '$1$2.__docbody')
+          // ⚠️ Shadow DOM 안에는 :root(=document의 html)가 없다. 문서가 :root에 정의한
+          //   CSS 변수(--ink, --paper …)가 통째로 죽어서, var(--ink)로 칠한 한글 텍스트가
+          //   색을 잃고 배경과 같아진다(안드로이드·아이폰 공통). :root를 :host(그림자 뿌리)로
+          //   바꿔 변수를 그림자 트리 안에 심는다. data-theme 규칙은 host에 속성이 없어 무시되고
+          //   OS 설정(prefers-color-scheme)만 따르는데, 최소한 텍스트가 보이는 게 우선이다.
+          .replace(/:root\b/g, ':host');
 
         const bodyInner = parsed.body.innerHTML;
         const bodyClass = parsed.body.className;
-        setShadowHtml(`<style>${styles}</style><div class="__docbody ${bodyClass}">${bodyInner}</div>`);
+        // 문서가 변수 정의에 실패하더라도 글자가 배경에 묻히지 않도록 기본 배경·글자색을 깐다
+        // (문서 자체 규칙이 있으면 구체성으로 그게 이긴다). 라이트 팔레트 기준.
+        const base = ':host,.__docbody{background:var(--paper,#FAFBFD);color:var(--ink,#101A28);}';
+        setShadowHtml(`<style>${base}${styles}</style><div class="__docbody ${bodyClass}">${bodyInner}</div>`);
       })
       .catch(() => {
         if (!cancelled) setError(true);