/* ───────────────────────────────────────────────────────────
 * TipTap(v2) 발행 콘텐츠 스타일
 *
 * 목적: 에디터(app/views/admin/board/v2_write.php 의 .ProseMirror)에서 보이는
 *       typography 를 발행 페이지(.view_box)에 그대로 적용한다 (작성=발행, drift 0).
 *
 * 로드 시점: data/skin/*/outline/header.html 의 seo['tiptap_v2'] 분기에서만 <link> 로 로드.
 *           → 레거시(구 에디터) 게시글 페이지에는 절대 로드되지 않으므로 영향 없음.
 *
 * 에디터와의 의도적 차이 (단 하나):
 *   에디터는 작성 중 가독성을 위해 span{color:#111827 !important} 로 글자색을 강제하지만,
 *   발행 페이지는 작성자가 지정한 inline color / font-size / <mark> 하이라이트를 "존중"한다.
 *   → 그래서 글자색·글자크기·하이라이트 관련에는 절대 !important 를 쓰지 않는다.
 *      (inline style 이 자연스럽게 우선되도록)
 *   → 반대로 사이트 공통 css(common/sub/skin)와 충돌하는 구조적 typography
 *      (heading 크기, 목록, 이미지, 표, 인용)에는 !important 로 우선권을 확보한다.
 * ─────────────────────────────────────────────────────────── */

.view_box { color: #111827; font-size: 16px; line-height: 1.8; word-break: break-word; }

/* 제목 — 컴포넌트별 고정 글자 크기 (노션 #3 요구: 사전 정의 고정 Font Size 자동 반영) */
.view_box h1, .view_box h2, .view_box h3, .view_box h4 { color: #0f172a !important; font-weight: 700 !important; line-height: 1.3 !important; }
.view_box h1 { font-size: 1.875em !important; border-bottom: 2px solid #e5e7eb; padding-bottom: .3em; margin: 1.2em 0 .6em; }
.view_box h2 { font-size: 1.5em !important;   border-bottom: 1px solid #e5e7eb; padding-bottom: .25em; margin: 1.6em 0 .6em; }
.view_box h3 { font-size: 1.25em !important;  margin: 1.2em 0 .5em; }
.view_box h4 { font-size: 1.1em !important;   margin: 1em 0 .4em; }

/* 문단 간격 — 사이트 공통 reset.css(p{margin:0}) 에 눌리지 않도록 !important 로 확보(에디터와 동일).
   빈 문단(엔터로 만든 빈 줄)은 높이가 0 이라 사라지므로 min-height 로 한 줄 간격 보장. */
.view_box p { line-height: 1.8; margin: .9em 0 !important; }
.view_box p:empty { min-height: 1.2em; }
.view_box a { color: #2563eb; text-decoration: underline; }
/* reset.css / cssreset 가 strong·em 을 normal 로 죽이고 tiptap-content.css 보다 늦게 로드되므로
   !important 로 굵게/기울임을 강제해야 발행 페이지에 반영됨. */
.view_box strong, .view_box b { font-weight: 700 !important; }
.view_box em, .view_box i { font-style: italic !important; }

/* 하이라이트(형광펜) — 작성자가 색을 지정하면 inline style 이 우선됨 */
.view_box mark { padding: .05em .15em; border-radius: 2px; }

.view_box code { color: #be185d; background: #fef2f2; padding: 1px 6px; border-radius: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: .9em; }
.view_box pre { background: #0f172a; color: #f1f5f9; padding: 14px 16px; border-radius: 6px; overflow-x: auto; margin: 1em 0; }
.view_box pre code { background: transparent; color: inherit; padding: 0; }

.view_box blockquote { border-left: 4px solid #3b82f6 !important; background: #eff6ff; padding: 8px 16px; margin: .8em 0; color: #1e293b; border-radius: 0 6px 6px 0; }
.view_box blockquote p { margin: 0; }

.view_box hr { border: none !important; height: 1px; background: #94a3b8; margin: 1.8em 0; }

/* 이미지 — 발행 화면 규격 벗어남 방지 (노션 #5 요구: max-width / 레이아웃 깨짐 방지).
 * 에디터에서 드래그로 지정한 width(<img width="..">)는 max-width 안에서 유지된다. */
.view_box img { max-width: 100% !important; height: auto !important; border-radius: 8px; }

/* 목록 — 사이트 reset.css 가 list-style 을 죽이므로 !important 로 복구 */
.view_box ul { list-style: disc outside !important; padding-left: 1.8em !important; margin: .6em 0 !important; }
.view_box ol { list-style: decimal outside !important; padding-left: 1.8em !important; margin: .6em 0 !important; }
.view_box ul ul { list-style: circle outside !important; }
.view_box ol ol { list-style: lower-alpha outside !important; }
.view_box li { margin: .2em 0 !important; display: list-item !important; list-style: inherit !important; }
/* reset.css 의 `li{list-style:none}` 가 li에 직접 지정돼 ul의 list-style를 무력화하므로,
   li 에도 직접 list-style-type 을 !important 로 부여해야 불릿/번호가 나온다. */
.view_box ul > li { list-style-type: disc !important; }
.view_box ol > li { list-style-type: decimal !important; }
.view_box ul ul > li { list-style-type: circle !important; }
.view_box ol ol > li { list-style-type: lower-alpha !important; }
.view_box li > p { margin: 0; }
.view_box li::marker { color: #111827; font-weight: 700; }

.view_box table { border-collapse: collapse; width: 100%; margin: .8em 0; }
.view_box th, .view_box td { border: 1px solid #d1d5db; padding: 6px 10px; }
.view_box th { background: #f3f4f6; font-weight: 600; }

/* YouTube / Vimeo 임베드 — 반응형 16:9 */
.view_box div[data-youtube-video], .view_box div[data-vimeo] { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 1em 0; border-radius: 8px; background: #000; }
.view_box div[data-youtube-video] iframe, .view_box div[data-vimeo] iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.view_box iframe.arklink-youtube { display: block; max-width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 8px; margin: 1em 0; }