/**
 * NRS Article — 단일 공유 CSS (Round 19, 2026-05-24)
 *
 * 4개 화면 공통 사용:
 *  1) 프론트 단일 기사 (front-end /article/{UID}.html)
 *  2) 글 작성·편집 TinyMCE iframe (Classic Editor)
 *  3) 관리자 글 보기 (ArticleViewPage)
 *  4) 미발행 미리보기 (unpublished-preview.php)
 *
 * Canonical 값 (운영자 확정):
 *  - 폰트: Pretendard 우선
 *  - 제목 30 / 부제목 24 / 본문 18 / 캡션·태그 14 (px)
 *  - line-height: 본문 1.75, 제목/부제목 1.55, 캡션 1.4
 *  - 본문 텍스트 폭(단일 컬럼): 680px
 *  - 메인 컬럼(사이드 있음): 880px = 1200 − 300 − 20
 *  - 폰트 스케일 5단계: -2(0.5) … +2(1.5), 본문에만 적용(2026-09-29 운영자 지시 — 7단계에서 줄임)
 *
 * ★폭별 규칙(@media min/max-width)은 device 폴더의 기기 파일에 둔다 — B4(2026-09-15)에 이 파일의 모바일(≤767) 블록은
 *   device/mobile.css 로만 남기고 걷었다. 관리자 글보기(ArticleViewPage)는 이 파일을 번들 없이 직접 싣지만,
 *   기사 본문은 iframe 으로 실제 테마(번들 + 기기 파일)를 불러 그리므로 영향 없다.
 */

/* ─── 컨테이너 ─────────────────────────────────────────────────────── */
.nrs-article-root {
    max-width: 680px;
    margin: 0 auto;
    padding: 0;            /* v2.2.0-64: 좌우 패딩 제거 → 본문 콘텐츠 폭 정확히 680 (648 금지) */
    box-sizing: border-box;
    font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
                 "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1f2937;
}

/* ─── 제목 / 부제목 / 본문 — Round 20 (2026-05-24): .nrs-article-root 컨텍스트로 specificity 강화
 *   (`.nrs-wf-*` 같은 cascade 충돌 selector 가 같은 클래스를 다시 정의해도 덮이지 않음) */
.nrs-article-root .nrs-article-title,
.nrs-article-title {
    font-size: 30px;
    line-height: 1.55;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px; /* v2.2.0-56: 제목 아래 여백 20px */
}

.nrs-article-root .nrs-article-subtitle,
.nrs-article-subtitle {
    font-size: 22px; /* 본문 대비 과대 → 2px 축소(24→22) */
    line-height: 1.25; /* v2.2.0-57: 부제목 행간 1.55→1.25 */
    font-weight: 500;
    color: #475569;
    margin: 0 0 20px; /* v2.2.0-56: 부제목 아래 여백 20px */
    /* v2.2.0-58: 부제목 왼쪽 세로 실선(상위 본문 종속 표시). border-left 라 부제목 높이만큼 자동 신축(n행=n행). */
    border-left: 4px solid #849cb5;
    padding-left: 10px;
}

/* ─── 메타 (날짜·기자) ─────────────────────────────────────────────── */
.nrs-article-root .nrs-article-meta,
.nrs-article-meta {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 20px;
}

/* ─── 본문 — 5단계 스케일 적용 대상 (Round 21: 강제 명시 + p/li 직접 정의) ───── */
.nrs-article-root .nrs-article-body,
.nrs-article-body {
    font-size: calc(18px * var(--nrs-article-font-scale, 1)) !important;
    line-height: 1.75;
    color: #1f2937;
    /* v2.2.0-19: 본문 좌우(양끝) 정렬 — 행을 넘어가는 줄의 오른쪽 끝을 가지런히.
       마지막 줄은 자동 왼쪽. 단어 보존 불필요(영문·한글 단어 분할 허용). */
    text-align: justify;
    transition: font-size 0.15s ease; /* v2.2.0-78: style.css 에서 이관 — 스케일 토글 부드럽게 */
}
/* 자식 텍스트 element 에도 직접 정의 — inherit 차단 케이스 대비 */
.nrs-article-body p,
.nrs-article-body li,
.nrs-article-body blockquote,
.nrs-article-body div:not(.nrs-caption):not(.nrs-block-image):not(.nrs-block-embed):not(.nrs-block-video):not(.nrs-block-gallery) {
    font-size: calc(18px * var(--nrs-article-font-scale, 1)) !important;
    line-height: 1.75;
}
.nrs-article-body p { margin: 0 0 1.2em; }
.nrs-article-body h2 {
    font-size: calc(22px * var(--nrs-article-font-scale, 1));
    line-height: 1.4;
    font-weight: 700;
    margin: 1.8em 0 0.6em;
}
.nrs-article-body h3 {
    font-size: calc(20px * var(--nrs-article-font-scale, 1));
    line-height: 1.4;
    font-weight: 700;
    margin: 1.5em 0 0.5em;
}

/* 본문 미디어 컨테인 (Round 15 가드) */
.nrs-article-body { overflow-wrap: anywhere; }
/* Round 35 (2026-05-24): width: auto 제거 — TinyMCE 의 HTML width="N" 속성 존중.
 * max-width: 100% 만으로 부모 폭 초과 차단 충분. */
.nrs-article-body img,
.nrs-article-body video,
.nrs-article-body iframe,
.nrs-article-body embed,
.nrs-article-body object {
    max-width: 100% !important;
    height: auto;
}
.nrs-article-body figure,
.nrs-article-body .nrs-block-image,
.nrs-article-body .nrs-caption,
.nrs-article-body .nrs-block-embed,
.nrs-article-body .nrs-block-video {
    max-width: 100% !important;
    /* Round 36 (2026-05-24): width: auto !important 제거 — NRS [caption] 의 inline
     * style="width: Npx" 존중. aligncenter margin auto + alignleft/right float 활성화. */
    margin: 16px 0 !important;
    padding: 0 !important;
}
.nrs-article-body figure img,
.nrs-article-body .nrs-caption img,
.nrs-article-body .nrs-block-image img {
    display: block;
    margin: 0 !important;
    border-radius: 4px; /* v2.2.0-78: style.css 에서 이관 */
}
.nrs-article-body .alignwide,
.nrs-article-body .alignfull {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ─── Round 35·36 (2026-05-24): NRS 표준 align 클래스 — 본문 이미지 좌·중·우 정렬 ─────
 *   longhand 명시 + float reset + clear 로 Round 29 의 figure shorthand margin override 완전 차단. */
.nrs-article-body .alignleft,
.nrs-article-body figure.alignleft,
.nrs-article-body img.alignleft {
    float: left !important;
    margin-top: 8px !important;
    margin-right: 1.5em !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    clear: none;
}
.nrs-article-body .alignright,
.nrs-article-body figure.alignright,
.nrs-article-body img.alignright {
    float: right !important;
    margin-top: 8px !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
    margin-left: 1.5em !important;
    clear: none;
}
.nrs-article-body .aligncenter,
.nrs-article-body figure.aligncenter {
    display: block !important;
    float: none !important;            /* 이전 figure 의 float 상속·인접 영향 차단 */
    margin-top: 16px !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
    margin-left: auto !important;
    text-align: center;
    clear: both;                        /* 이전 floated figure 의 clear */
}
.nrs-article-body .alignnone,
.nrs-article-body figure.alignnone {
    float: none !important;
    margin-top: 8px !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
}

/* Round 57 (2026-05-25): Round 56 의 NRS 자체 정렬 (nrs-align-block-*) 롤백 — 운영자 명시. */
/* float 해제 — 본문 끝에서 다음 element 가 wrap 안 되도록 */
.nrs-article-body::after {
    content: "";
    display: table;
    clear: both;
}

/* ─── 사진 캡션 — Round 29 (2026-05-24): 사진과의 여백 통일 (8px 고정) ─────
 *   글 보기/미리보기 화면에서 nrs-admin core CSS 의 추가 margin 으로 인한 차이를 차단.
 *   margin / padding 모두 명시 + !important 로 admin·UA cascade 무력화. */
.nrs-article-body figure figcaption,
.nrs-article-body .nrs-caption .nrs-caption-text,
.nrs-article-body .nrs-caption-text,
.nrs-article-body figcaption,
.nrs-article-figcaption {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--nrs-text-primary, #111827);   /* 2026-09-27 안 A(옛 #6b7280) — 다크는 아래 블록(보조 → 앞면에서는 본문 글색) */
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: left;
    min-height: 1.5em; /* v2.2.0-78: style.css 에서 이관 — 캡션 없는 figure 의 레이아웃 안정 */
}
.nrs-article-body figure figcaption:empty { display: block; min-height: 1.5em; }

/* ─── 본문 인용/표 — v2.2.0-78: style.css 단일기사 중복 정의를 SSOT(nrs-article.css)로 이관 ───
 *   토큰 var(...) + 하드코딩 폴백 → color-scheme 미로드 컨텍스트(관리자 글보기·미리보기)에서도 안전. */
.nrs-article-body blockquote {
    border-left: 4px solid var(--nrs-color-primary, #0a3a6b);
    margin: 1.5em 0;
    padding: 12px 20px;
    background: var(--nrs-color-bg-sub, #f8fafc);
    border-radius: 0 4px 4px 0;
}
.nrs-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
}
.nrs-article-body table th,
.nrs-article-body table td {
    padding: 8px 12px;
    border: 1px solid var(--nrs-color-border, #e5e7eb);
}
.nrs-article-body table th { background: var(--nrs-color-bg-sub, #f8fafc); font-weight: 700; }

/* ─── 태그 (#태그 형태) ────────────────────────────────────────────── */
.nrs-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 24px 0;
    padding: 0;
}
.nrs-article-tag,
.nrs-article-tags a {
    font-size: 14px;
    line-height: 1.4;
    color: #475569;
    text-decoration: none;
}
.nrs-article-tag:hover,
.nrs-article-tags a:hover { color: #1d4ed8; }

/* ─── 5단계 폰트 스케일 (선형 -2=0.5 … +2=1.5) ───────────────────────
 * 2026-09-29 운영자 "7단계인데 이걸 5단계로 줄여라. 중앙 기본값에서 2단계 키우면 1.5배, 2단계 줄이면 0.5배"(목업 승인) —
 * ±1 은 고르게 나눈 0.75·1.25. 단계 범위(-2~2)는 main.js·nrs-article-scale.js·enqueue.php(머리 스크립트)와 짝. */
:root,
html[data-font-size="0"]  { --nrs-article-font-scale: 1.00; }
html[data-font-size="-2"] { --nrs-article-font-scale: 0.50; }
html[data-font-size="-1"] { --nrs-article-font-scale: 0.75; }
html[data-font-size="1"]  { --nrs-article-font-scale: 1.25; }
html[data-font-size="2"]  { --nrs-article-font-scale: 1.50; }

/* TinyMCE iframe 안에서는 <html> 이 별도이므로 body 에도 적용 */
body[data-font-size="0"]  { --nrs-article-font-scale: 1.00; }
body[data-font-size="-2"] { --nrs-article-font-scale: 0.50; }
body[data-font-size="-1"] { --nrs-article-font-scale: 0.75; }
body[data-font-size="1"]  { --nrs-article-font-scale: 1.25; }
body[data-font-size="2"]  { --nrs-article-font-scale: 1.50; }

/* ─── 스케일 토글 UI (글 보기·미리보기·프론트 공통) ─────────────── */
.nrs-article-scale-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 12px 0;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    color: #475569;
}
.nrs-article-scale-tools__label { margin-right: 8px; }
.nrs-article-scale-tools__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    color: #1f2937;
    font-family: inherit;
    line-height: 1;
}
.nrs-article-scale-tools__btn:hover { background: #f1f5f9; }
.nrs-article-scale-tools__btn--active,
.nrs-article-scale-tools__btn[aria-pressed="true"] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.nrs-article-scale-tools__btn--small { font-size: 11px; }

/* ──────────────────────────────────────────────────────────────────────────
 * 관련 기사 (Related) — 통합 글 보기 디자인 (2026-06-04 운영자 확정)
 * 기사별 제목 1행: `관련 기사` 헤딩 없음 · 구분 실선 없음 · 섬네일 없음 · 발행일시 없음.
 * 각 항목 = └ 아이콘(옅은 회색) + 제목 링크. 아이콘-제목 여백 약 15px.
 * 모든 글 보기 페이지(프런트·관리자·미리보기) 공통 적용(단일 렌더러 공유).
 * ────────────────────────────────────────────────────────────────────────── */
.nrs-wf-related {
    margin-top: 28px;
}
.nrs-wf-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nrs-wf-related-item {
    margin: 0;
    padding: 6px 0;
    border: 0; /* 구분 실선 없음 */
}
.nrs-wf-related-link {
    display: flex;
    align-items: baseline;
    gap: 15px; /* └ 아이콘 ↔ 제목 여백 */
    text-decoration: none;
    color: var(--nrs-color-text, #1e1e1e);
}
.nrs-wf-related-icon {
    flex-shrink: 0;
    color: #e2e5e8; /* 옅은 회색 */
    font-weight: 700;
    line-height: 1.5;
}
.nrs-wf-related-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    /* 제목이 길면 1행 말줄임 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nrs-wf-related-link:hover .nrs-wf-related-title {
    color: var(--nrs-color-primary, #0a3a6b);
    text-decoration: underline;
}
.nrs-article-scale-tools__btn--large { font-size: 18px; }

/* ─── 다크 모드 — 글자색 (2026-09-12) ─────────────────────────────────
 * 배경은 01-shared 스위치(body.nrs-scheme-*)가 --nrs-bg-primary 로 바꾼다 → 글자도 같은 스위치. 인쇄 제외.
 * .nrs-article-root 로 좁힘(.nrs-article-title 은 PageRenderer 목록도 쓴다). 상세: knowledge/nrs_dark_mode_two_switches.md */
@media screen {
    body.nrs-scheme-dark .nrs-article-root,
    body.nrs-scheme-dark .nrs-article-root .nrs-article-title,
    body.nrs-scheme-dark .nrs-article-root .nrs-article-body { color: var(--nrs-text-primary); }
    body.nrs-scheme-dark .nrs-article-root .nrs-article-subtitle,
    body.nrs-scheme-dark .nrs-article-root .nrs-article-tag,
    body.nrs-scheme-dark .nrs-article-root .nrs-article-tags a { color: var(--nrs-text-secondary); }
    body.nrs-scheme-dark .nrs-article-root .nrs-article-body figcaption,
    body.nrs-scheme-dark .nrs-article-root .nrs-article-body .nrs-caption-text { color: var(--nrs-text-tertiary); }
    body.nrs-scheme-dark .nrs-article-root .nrs-article-tag:hover,
    body.nrs-scheme-dark .nrs-article-root .nrs-article-tags a:hover { color: var(--nrs-accent-hover); }
}
@media screen and (prefers-color-scheme: dark) {
    body.nrs-scheme-auto .nrs-article-root,
    body.nrs-scheme-auto .nrs-article-root .nrs-article-title,
    body.nrs-scheme-auto .nrs-article-root .nrs-article-body { color: var(--nrs-text-primary); }
    body.nrs-scheme-auto .nrs-article-root .nrs-article-subtitle,
    body.nrs-scheme-auto .nrs-article-root .nrs-article-tag,
    body.nrs-scheme-auto .nrs-article-root .nrs-article-tags a { color: var(--nrs-text-secondary); }
    body.nrs-scheme-auto .nrs-article-root .nrs-article-body figcaption,
    body.nrs-scheme-auto .nrs-article-root .nrs-article-body .nrs-caption-text { color: var(--nrs-text-tertiary); }
    body.nrs-scheme-auto .nrs-article-root .nrs-article-tag:hover,
    body.nrs-scheme-auto .nrs-article-root .nrs-article-tags a:hover { color: var(--nrs-accent-hover); }
}