/* L2 서류 상세(sdo_user/document_view.jsp · 흰 바탕 화면 .sdo-page)·위저드 ⓘ 모달 — 머리 그림 · 넓은 두 칸 · 저장 HTML 본문(표는 표로) · 적용법
   공용(sdo-band·sdo-section·sdo-detail-head·sdo-section-title·sdo-cta-bar)은 user_components.css · 색·크기 = user_variables.css 토큰만 */

/* ── 머리 ── */
/* 틀 = 공용 상세 머리(sdo-detail-head · 제목 sdo-detail-title · 한 줄 설명 sdo-detail-meta) · 구역 제목 = sdo-section-title · 여기는 그림 칸만 */
.dv-head-media { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; border-radius: var(--sdo-radius); }
.dv-head-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--sdo-accent-soft); color: var(--sdo-accent); font-size: var(--sdo-ic-lg); }

/* ── 두 칸 ── */
/* 본문 · 적용법 + 선택 버튼 */
.dv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sdo-sp-20); align-items: start; }
.dv-side { position: sticky; top: calc(var(--sdo-topbar-h) + var(--sdo-sp-20)); }
.dv-cta { margin-top: 0; }
.dv-back { margin-top: var(--sdo-sp-12); }

/* ── 저장된 본문 ── */
/* L1 이 저장한 HTML — 저장 HTML 의 칸 폭·pre·긴 주소는 본문 안에서만 가로 스크롤 · 그림 높이 속성은 폭에 맞춰 줄인다 */
.dv-body { overflow-x: auto; word-break: break-word; font-size: var(--sdo-fs-md); line-height: 1.8; color: var(--sdo-ink-sub); }
.dv-body p { margin: 0 0 var(--sdo-sp-8); }
.dv-body h1, .dv-body h2, .dv-body h3, .dv-body h4 { margin: var(--sdo-sp-20) 0 var(--sdo-sp-8); font-weight: var(--sdo-fw-heavy); color: var(--sdo-ink); }
.dv-body ul { list-style: disc; padding-left: var(--sdo-sp-20); margin: 0 0 var(--sdo-sp-8); }
.dv-body ol { list-style: decimal; padding-left: var(--sdo-sp-20); margin: 0 0 var(--sdo-sp-8); }
.dv-body table { width: 100%; margin: var(--sdo-sp-8) 0 var(--sdo-sp-12); font-size: var(--sdo-fs-sm); }
.dv-body th, .dv-body td { border: 1px solid var(--sdo-line); padding: var(--sdo-sp-8); text-align: left; vertical-align: top; }
.dv-body img { height: auto; }
.dv-body th { background: var(--sdo-surface-soft); color: var(--sdo-ink); font-weight: var(--sdo-fw-bold); }

/* ── 적용법 ── */
/* L1 이 줄을 나눠 적으면 그대로 */
.dv-law { margin: 0; overflow-wrap: anywhere; font-size: var(--sdo-fs-md); line-height: 1.7; color: var(--sdo-ink-sub); white-space: pre-line; }

@media (max-width: 980.98px) {
    .dv-head-media { width: 48px; height: 48px; }
    .dv-head-icon { font-size: var(--sdo-ic-md); }
    .dv-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sdo-sp-12); }
    .dv-side { position: static; }
    .dv-body, .dv-law { font-size: var(--sdo-fs-sm); }
}

/* ── 위저드 ⓘ 모달 ── */
/* 서류 이름은 모달 제목이 이미 보인다 · 구역 제목은 모달 제목보다 크지 않게 */
.sdo-modal .sdo-detail-title { display: none; }
.sdo-modal .sdo-detail-meta { margin-top: 0; font-size: var(--sdo-fs-md); color: var(--sdo-ink-sub); }
.sdo-modal .sdo-section-title { font-size: var(--sdo-fs-md); }