@charset "UTF-8";

/* ==========================================================================
   상세 화면 (munjung/node.do — 서지 레벨) — 시안
     서지             : https://honam.figma.site/content_view_1
     해제             : https://honam.figma.site/content_view_2
     기사목록         : https://honam.figma.site/content_view_3
     이미지/원문/국역 : https://honam.figma.site/content_view_4
   --------------------------------------------------------------------------
   로드 : layout/head.jsp (list.css 다음)
   마크업 : munjung/node_view.jsp 의 `.cv-page` (서지 레벨) / `.cv-page--sub` (권차·문체·최종정보, [8]~[10]),
            node_view_articles.jspf 서지 분기, node_view_media.jspf(.kmv)
   ★ 예전 krds-node-media.css(.kmv) 는 head.jsp 에서 뺐다 — 그 자리를 [6] 이 대신한다.
     krds-node.css(.kn-page) 는 권차/문체/최종정보 레벨이 아직 쓰므로 남아 있다.
   ★ 태그 단위 기존 규칙(content.css `input[type="text"]`, `dl`, `table` …)을
     이기려고 셀렉터를 `.cv-page .x` (0,2,0) 이상으로 쓴다.

   시안 실측 (1920, 콘텐츠 x 480 ~ 1769)
     제목 32/52 명조 (y188 = 헤더 88 + .content 40 + 60)
     → 20 → 2px 검정 → 20 → 탭줄(40) → 20 → 1px 검정 → 60 → 패널
     → 60 → 1px 검정 → 20 → 이전·목록·다음(52) → .content 아래 여백 120
   ========================================================================== */

.cv-page{
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	color: #000;
	letter-spacing: normal;
}
.cv-page *{
	box-sizing: border-box;
}
.cv-page ul,
.cv-page ol{
	margin: 0;
	padding: 0;
	list-style: none;
}
.cv-page dl,
.cv-page dt,
.cv-page dd{
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.cv-page a{
	color: inherit;
	text-decoration: none;
}
.cv-page button{
	font-family: inherit;
}
.cv-blind{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.cv-page .cv-empty{
	margin: 0;
	padding: 60px 0;
	font-size: 16px;
	line-height: 24px;
	color: #999;
	text-align: center;
}


/* ==========================================================================
   [1] 제목 / 탭줄
   ========================================================================== */
.cv-page .cv-title{
	margin: 60px 0 0;
	padding: 0;
	font-family: var(--f-serif);
	font-size: 32px;
	line-height: 52px;
	font-weight: 400;
	color: #000;
	letter-spacing: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;	/* 띄어쓰기 없는 긴 자료명은 글자 단위로 (2026-10-29 시트 50) */
}

/* 라디오는 감추되 키보드 포커스는 살린다 */
.cv-page .cv-tabs__radio{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	opacity: 0;
}

.cv-page .cv-tabs__bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 20px;
	padding: 20px 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}
.cv-page .cv-tabs__list{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 40px;
}
/* 시안 : 기본 18px Regular, 선택 16px Bold (행높이 24 동일) */
.cv-page .cv-tabs__tab{
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	white-space: nowrap;
	cursor: pointer;
}
.cv-page .cv-tabs__tab:hover{
	text-decoration: underline;
	text-underline-offset: 4px;
}
#knTab-seoji:checked ~ .cv-tabs__bar label[for="knTab-seoji"],
#knTab-heje:checked  ~ .cv-tabs__bar label[for="knTab-heje"],
#knTab-gisa:checked  ~ .cv-tabs__bar label[for="knTab-gisa"],
#knTab-media:checked ~ .cv-tabs__bar label[for="knTab-media"]{
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
#knTab-seoji:focus-visible ~ .cv-tabs__bar label[for="knTab-seoji"],
#knTab-heje:focus-visible  ~ .cv-tabs__bar label[for="knTab-heje"],
#knTab-gisa:focus-visible  ~ .cv-tabs__bar label[for="knTab-gisa"],
#knTab-media:focus-visible ~ .cv-tabs__bar label[for="knTab-media"]{
	outline: 2px solid #000;
	outline-offset: 4px;
}

.cv-page .cv-btn-line{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #000;
	cursor: pointer;
}
.cv-page .cv-btn-line:hover{
	background: #f5f5f5;
}

/* 패널 : 선택된 라디오의 짝만 보인다 */
.cv-page .cv-tabs__panel{
	display: none;
	padding-top: 60px;
}
#knTab-seoji:checked ~ .cv-tabs__panel--seoji,
#knTab-heje:checked  ~ .cv-tabs__panel--heje,
#knTab-gisa:checked  ~ .cv-tabs__panel--gisa,
#knTab-media:checked ~ .cv-tabs__panel--media{
	display: block;
}


/* ==========================================================================
   [2] 서지 — 대표이미지 500x500 | 60 | 제목 · 기본정보 · 정의
   ========================================================================== */
.cv-page .cv-info{
	display: flex;
	align-items: flex-start;
	gap: 60px;
}
.cv-page .cv-info__thumb{
	flex: 0 0 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	height: 500px;
	background: #f5f5f5;
	overflow: hidden;
}
.cv-page .cv-info__thumb a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
/* 시안 : 231x340 표지가 상자 가운데 */
.cv-page .cv-info__thumb img{
	display: block;
	width: auto;
	height: auto;
	max-width: 400px;
	max-height: 340px;
	object-fit: contain;
}
.cv-page .cv-info__body{
	flex: 1 1 auto;
	min-width: 0;
}
.cv-page .cv-info__tit{
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	color: #000;
	word-break: keep-all;
	overflow-wrap: anywhere;	/* 띄어쓰기 없는 긴 자료명은 글자 단위로 (2026-10-29 시트 50) */
}
.cv-page .cv-subh{
	margin: 32px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.cv-page .cv-meta{
	margin-top: 12px;
}
.cv-page .cv-meta__row{
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	column-gap: 24px;
}
.cv-page .cv-meta__row + .cv-meta__row{
	margin-top: 16px;
}
.cv-page .cv-meta dt{
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #666;
	white-space: nowrap;
}
.cv-page .cv-meta dd{
	font-size: 16px;
	line-height: 24px;
	color: #000;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.cv-page .cv-meta__list li + li{
	margin-top: 4px;
}
.cv-page .cv-meta__list a{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cv-page .cv-meta__list .is-cur{
	font-weight: 700;
}
/* 누정 기본정보 (2026-10-19) : 제목(h3) 없이 "기본정보" 가 맨 위, 항목명이 길어 dt 칸을 넓힌다 */
.cv-page .cv-subh--first{
	margin-top: 0;
}
.cv-page .cv-meta--nj .cv-meta__row{
	grid-template-columns: 100px minmax(0, 1fr);
}
/* 금석문 기본정보 (2026-10-20) : 누정과 같은 틀, 가장 긴 항목명 "문화유산지정여부"(16px 8자)에 맞춰 dt 칸을 넓힌다 */
.cv-page .cv-meta--gs .cv-meta__row{
	grid-template-columns: 136px minmax(0, 1fr);
}

/* ==========================================================================
   [3] 본문 텍스트 (정의 · 해제) — XSL(ParaNode.xsl) 결과가 들어온다
   ========================================================================== */
.cv-page .cv-text{
	margin-top: 12px;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.cv-page .cv-text--heje{
	margin-top: 0;
}
/* content.css 가 .nodeview--para 등에 주는 들여쓰기·여백을 지운다 */
.cv-page .cv-text p,
.cv-page .cv-text .nodeview--para,
.cv-page .cv-text .trans_text{
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.cv-page .cv-text h1,
.cv-page .cv-text h2,
.cv-page .cv-text h3,
.cv-page .cv-text h4,
.cv-page .cv-text h5,
.cv-page .cv-text .nodeview--tit,
.cv-page .cv-text strong,
.cv-page .cv-text b{
	font-weight: 700;
}
.cv-page .cv-text h1,
.cv-page .cv-text h2,
.cv-page .cv-text h3,
.cv-page .cv-text h4,
.cv-page .cv-text h5,
.cv-page .cv-text .nodeview--tit{
	margin: 32px 0 12px;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}
.cv-page .cv-text > :first-child{
	margin-top: 0;
}
/* 해제 XSL 결과는 `<b>1. 개요</b><br> 문단… <br><b>2. 행력</b><br> …` 꼴이다.
   <br> 로 띄우던 간격을 시안 값(소제목 아래 12, 절 사이 32)으로 바꾼다. */
.cv-page .cv-text > br{
	display: none;
}
.cv-page .cv-text > b{
	display: block;
	margin: 32px 0 12px;
}
.cv-page .cv-text > b:first-child{
	margin-top: 0;
}
/* 금석문 해설 (2026-10-20) : 문단(.nodeview--para) 사이를 한 줄(24px) 띄운다 */
.cv-page .cv-text--gs .nodeview--para + .nodeview--para{
	margin-top: 24px;
}


/* ==========================================================================
   [4] 기사목록 — 권 제목 32 · 원문이미지 알약 · 접기 / 소제목 · 점 목록
   ========================================================================== */
.cv-page .cv-vol + .cv-vol,
.cv-page .cv-vols > .cv-bul--leaf + .cv-vol,
.cv-page .cv-vols > .cv-vol + .cv-bul--leaf{
	margin-top: 32px;
	padding-top: 40px;
	border-top: 1px solid #ddd;
}
.cv-page .cv-vol__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.cv-page .cv-vol__tit{
	min-width: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	color: #000;
	word-break: keep-all;
}
.cv-page .cv-vol__tit:hover{
	text-decoration: underline;
	text-underline-offset: 6px;
}
.cv-page .cv-vol__btns{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 18px;
}
.cv-page .cv-pill{
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #ddd;
	border-radius: 100px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	cursor: pointer;
}
.cv-page .cv-pill:hover{
	border-color: #999;
	color: #000;
}
/* 펼침 = 위 화살표(시안), 접힘(.close) = 아래 */
.cv-page .cv-vol__toggle{
	display: block;
	width: 18px;
	height: 18px;
	background: url(../images/ico-chevron-18.svg) no-repeat center / 18px 10px;
	transform: rotate(180deg);
	transition: transform .2s;
}
.cv-page .cv-vol__toggle.close{
	transform: none;
}
.cv-page .cv-vol__body{
	margin-top: 32px;
}

.cv-page .cv-grp__tit{
	display: block;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.cv-page .cv-grp__tit:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cv-page .cv-grp .cv-bul{
	margin-top: 12px;
}
.cv-page .cv-grp + .cv-grp,
.cv-page .cv-grp + .cv-bul--leaf,
.cv-page .cv-bul--leaf + .cv-grp{
	margin-top: 32px;
}
.cv-page .cv-bul--leaf + .cv-bul--leaf{
	margin-top: 8px;
}
.cv-page .cv-bul li{
	position: relative;
	padding-left: 16px;
	font-size: 16px;
	line-height: 24px;
}
.cv-page .cv-bul li + li{
	margin-top: 8px;
}
.cv-page .cv-bul li:before{
	content: "";
	position: absolute;
	top: 10px;
	left: 4px;
	width: 4px;
	height: 4px;
	background: #666;
}
.cv-page .cv-bul a{
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cv-page .cv-bul a:hover{
	color: #e98813;
}


/* ==========================================================================
   [5] 하단 — 이전 자료 · 목록(52 원) · 다음 자료
   ========================================================================== */
.cv-page .cv-pn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 60px;
	padding-top: 20px;
	border-top: 1px solid #000;
}
.cv-page .cv-pn__btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	color: #000;
}
.cv-page .cv-pn__btn:before,
.cv-page .cv-pn__btn:after{
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: url(../images/ico-arrow-right.svg) no-repeat center / 24px 24px;
}
.cv-page .cv-pn__btn--prev:before{ transform: rotate(180deg); }
.cv-page .cv-pn__btn--prev:after{ display: none; }
.cv-page .cv-pn__btn--next:before{ display: none; }
.cv-page .cv-pn__btn.is-dis{
	opacity: .3;
	cursor: default;
}
.cv-page a.cv-pn__btn:hover{
	text-decoration: underline;
	text-underline-offset: 4px;
}
.cv-page .cv-pn__list{
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: url(../images/btn-list-52.svg) no-repeat center / 52px 52px;
}

/* 오류 신고 — 이미지/원문/국역 탭에서만 (2026-10-28 시안)
   1px 검정 줄 → 20 → [오류 신고] 오른쪽 → 20 → 이전·☰·다음.
   줄을 .cv-pn 대신 .cv-err 가 가져가고 .cv-pn 은 위 여백만 20
   원문/국역(최종정보) 화면은 탭이 없어 늘 보인다 : .cv-err--on (2026-10-30 시트 52) */
.cv-page .cv-err{
	display: none;
}
.cv-page .cv-tabs:has(#knTab-media:checked) ~ .cv-err,
.cv-page .cv-err--on{
	display: flex;
	justify-content: flex-end;
	margin-top: 60px;
	padding-top: 20px;
	border-top: 1px solid #000;
}
.cv-page .cv-tabs:has(#knTab-media:checked) ~ .cv-err + .cv-pn,
.cv-page .cv-err--on + .cv-pn{
	margin-top: 20px;
	padding-top: 0;
	border-top: 0;
}


/* ==========================================================================
   [6] 이미지/원문/국역 — 내장 뷰어 (node_view_media.jspf, .kmv)
   --------------------------------------------------------------------------
   예전 krds-node-media.css 를 대신한다. 클래스는 JS(KMV) 훅이라 이름을 바꾸지 않았다.
   시안 : 머리줄(권1 32 / 경로 16 | 체크 20x20 주황 · 가+가가-) → 40 →
          본체 1289x580 [이미지 646 | 원문 290 / 국역 290]
          이미지 위 툴바·아래 내비바는 상자 안 8px 에 떠 있는 28x28 버튼들.
   ★ 본체 높이 : KMV.resize() 가 창 높이로 인라인 height 를 주지만
     시안은 580 고정이라 !important 로 덮는다.
   ========================================================================== */
.cv-page .kmv{
	position: relative;
	color: #000;
}

/* --- 머리줄 --- */
.cv-page .kmv__head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.cv-page .kmv__head__l{
	min-width: 0;
}
.cv-page .kmv__tit{
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	color: #000;
	word-break: keep-all;
	overflow-wrap: anywhere;	/* 띄어쓰기 없는 긴 자료명은 글자 단위로 (2026-10-29 시트 50) */
}
.cv-page .kmv__path{
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}
.cv-page .kmv__head__r{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 40px;
}
.cv-page .kmv__id{
	position: absolute;
	top: 44px;
	right: 0;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-align: right;
}
.cv-page .kmv__id > span{
	margin-right: 12px;
	color: #666;
}
.cv-page .kmv__id > em{
	font-style: normal;
}

/* --- 옵션 체크박스 : 20x20 r4, 체크 시 주황 #e98813 + 흰 체크 --- */
.cv-page .kmv__opts{
	display: flex;
	align-items: center;
	gap: 12px;
}
.cv-page .kmv-chk{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
	user-select: none;
}
.cv-page .kmv-chk__in{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	opacity: 0;
}
.cv-page .kmv-chk__box{
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}
.cv-page .kmv-chk__in:checked + .kmv-chk__box{
	border-color: #e98813;
	background: #e98813 url(../images/ico-check-w.svg) no-repeat center / 13px 10px;
}
.cv-page .kmv-chk__in:focus-visible + .kmv-chk__box{
	outline: 2px solid #000;
	outline-offset: 2px;
}
.cv-page .kmv-chk__in:disabled + .kmv-chk__box{
	background-color: #f5f5f5;
}
/* 시트 27 : 없는 원문/국역은 비활성 — 원문/국역 화면의 a.check_toggle.dis 와 같이 흐리게 */
.cv-page .kmv-chk__in:disabled + .kmv-chk__box,
.cv-page .kmv-chk__in:disabled ~ .kmv-chk__tx{
	opacity: .4;
}
.cv-page .kmv-chk:has(.kmv-chk__in:disabled){
	cursor: default;
}
.cv-page .kmv-chk__tx{
	font-size: 16px;
	line-height: 24px;
	color: #222;
	white-space: nowrap;
}

/* --- 글자크기 : 36x28 세 칸, 선택 칸 #ddd 바탕 #666 테두리 --- */
.cv-page .kmv__fs{
	display: flex;
	align-items: center;
	gap: 1px;
}
.cv-page .kmv .kmv-fsbtn{
	width: 36px;
	height: 28px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 0;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	cursor: pointer;
}
.cv-page .kmv .kmv-fsbtn:hover{
	color: #000;
}
.cv-page .kmv .kmv-fsbtn.is-on{
	border-color: #666;
	background: #ddd;
	color: #000;
	font-weight: 400;
}

/* --- 본체 --- */
.cv-page .kmv__body{
	display: flex;
	align-items: stretch;
	height: 580px !important;
	margin-top: 40px;
	border: 1px solid #ddd;
}
.cv-page .kmv__pane{
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.cv-page .kmv__pane--img{
	border-right: 1px solid #ddd;
}
.cv-page .kmv__pane--img.is-last{
	border-right: 0;
}
.cv-page .kmv__pane.is-off{
	display: none;
}

/* 이미지 패널 : 툴바·내비바는 스테이지 위에 떠 있다 */
.cv-page .kmv__imgbar{
	position: absolute;
	z-index: 6;
	top: 8px;
	left: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.cv-page .kmv__stage{
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background: #fff;
	overflow: hidden;
}
.cv-page .kmv__osd{
	width: 100%;
	height: 100%;
}
.cv-page .kmv__osd .navigator{
	border: 1px solid #ddd !important;
	background: rgba(255,255,255,.6);
}
.cv-page .kmv__msg{
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 24px;
	color: #999;
	text-align: center;
}
/* 시안에 없는 이미지 위 좌우 원형 버튼 — 내비바의 이전/다음과 같은 동작이라 감춘다 */
.cv-page .kmv .kmv-arrow{
	display: none;
}
.cv-page .kmv__navbar{
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.cv-page .kmv-grp{
	display: flex;
	align-items: center;
	gap: 4px;
}
.cv-page .kmv__page{
	margin: 0 12px;
	font-size: 14px;
	line-height: 20px;
	color: #000;
	white-space: nowrap;
}
.cv-page .kmv__page em{
	font-style: normal;
}
.cv-page .kmv__page #kmvCur{
	font-weight: 700;
}
.cv-page .kmv input[type="text"].kmv__num{
	width: 40px;
	height: 28px;
	margin: 0;
	padding: 0 2px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	background-image: none;
	font-size: 14px;
	line-height: normal;
	color: #000;
	text-align: center;
}
.cv-page .kmv .kmv-gbtn{
	min-width: 28px;
	height: 28px;
	padding: 0 4px;
	border: 1px solid #ddd;
	border-radius: 0;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #000;
	text-transform: capitalize;
	cursor: pointer;
}
.cv-page .kmv__sep{
	width: 0;
	height: 20px;
	margin: 0 6px;
}
.cv-page .kmv .kmv-ibtn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 0;
	background: #fff;
	color: #000;
	cursor: pointer;
}
.cv-page .kmv .kmv-ibtn:hover,
.cv-page .kmv .kmv-gbtn:hover{
	background: #f5f5f5;
}
.cv-page .kmv .kmv-ibtn:disabled{
	color: #ccc;
	background: #fff;
	cursor: default;
}
.cv-page .kmv .kmv-ibtn svg{
	display: block;
}

/* 텍스트 패널 : 원문 / 국역 각 절반, 머리 40 #f5f5f5 가운데 */
.cv-page .kmv__pane--txt{
	background: #fff;
}
.cv-page .kmv__sec{
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-height: 0;
}
.cv-page .kmv__sec + .kmv__sec{
	border-top: 1px solid #ddd;
}
.cv-page .kmv__sec.is-off{
	display: none;
}
.cv-page .kmv__sec.is-off + .kmv__sec{
	border-top: 0;
}
.cv-page .kmv__sec__h{
	flex-shrink: 0;
	margin: 0;
	padding: 0 16px;
	height: 40px;
	line-height: 40px;
	background: #f5f5f5;
	font-size: 16px;
	font-weight: 700;
	color: #000;
	text-align: center;
}
.cv-page .kmv__sec__b{
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	padding: 20px 24px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 16px;
	line-height: 28px;
	color: #000;
	word-break: break-all;
}
.cv-page .kmv__sec__b .trans_text{
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}
.cv-page .kmv__sec__b .nodeview--para{
	margin: 0 0 24px;
	padding: 0;
	line-height: inherit;
}
.cv-page .kmv__sec__b .nodeview--para:last-child{
	margin-bottom: 0;
}
/* 비었을 때 안내 — 시안은 칸 가운데 */
.cv-page .kmv__empty{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 24px;
	color: #999;
	text-align: center;
}
.cv-page .kmv__sec__b span.jusok{
	display: inline-block;
	min-width: 20px;
	margin: 0 2px;
	padding: 0 4px;
	border-radius: 4px;
	background: #e98813;
	font-size: 12px;
	line-height: 18px;
	color: #fff;
	text-align: center;
	vertical-align: 2px;
	cursor: pointer;
}

/* 주석 팝오버 */
.cv-page .kmv__jupop{
	position: absolute;
	z-index: 30;
	width: 380px;
	max-width: calc(100% - 40px);
	border: 1px solid #222;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	overflow: hidden;
}
.cv-page .kmv__jupop__h{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 40px;
	padding: 0 8px 0 16px;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: 700;
	color: #000;
}
.cv-page .kmv .kmv__jupop__x{
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1;
	color: #666;
	cursor: pointer;
}
.cv-page .kmv__jupop__b{
	max-height: 200px;
	padding: 12px 16px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 22px;
	color: #000;
	white-space: pre-wrap;
}
.cv-page .kmv .krds-blind{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

@media print{
	.cv-page .kmv__imgbar,
	.cv-page .kmv__navbar,
	.cv-page .kmv__head__r{ display: none !important; }
}


/* ==========================================================================
   [7] 좁은 화면
   ★ 2026-10-20 : PC 콘텐츠 폭이 1280 으로 고정(넓으면 양옆 여백, layout.css --gutter)되어 상세 본문은
     어느 폭에서나 920 이다 → 예전 "1599 이하" 규칙(대표이미지 위 · 기본정보 아래)을 항상 적용한다.
     (1600 이상에서 좌우 배치하던 규칙이 좁은 본문에 걸려 기본정보 값이 한 글자씩 세로로 깨졌다)
   ========================================================================== */
@media screen{
	.cv-page .cv-info{
		flex-direction: column;
		gap: 40px;
	}
	.cv-page .cv-info__thumb{
		flex-basis: auto;
	}
	.cv-page .kmv__head{
		flex-wrap: wrap;
	}
	.cv-page .kmv__id{
		position: static;
		margin-top: 12px;
	}
}
@media screen and (max-width: 1279px){
	.cv-page .kmv__body{
		flex-direction: column;
		height: auto !important;
	}
	.cv-page .kmv__pane{
		flex: 0 0 auto;
		height: 580px;
	}
	.cv-page .kmv__pane--img{
		border-right: 0;
		border-bottom: 1px solid #ddd;
	}
}


/* ==========================================================================
   [8] 권차 / 문체 / 최종정보 공통 — 시안 없음, 서지 레벨 문법을 따른다
   --------------------------------------------------------------------------
   마크업 : node_view.jsp 의 `.cv-page.cv-page--sub`
     명조 제목 → 20 → 2px 검정 · 위치줄(16, 구분 1x16 #ddd) + 카테고리 보기 · 1px 검정 → 60 → 본문
   ========================================================================== */
.cv-page .cv-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 20px;
	padding: 20px 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}
.cv-page .cv-crumb{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 4px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 24px;
	color: #666;
}
.cv-page .cv-crumb li{
	display: flex;
	align-items: center;
	min-width: 0;
}
.cv-page .cv-crumb li + li:before{
	content: "";
	flex-shrink: 0;
	width: 1px;
	height: 16px;
	margin: 0 20px;
	background: #ddd;
}
.cv-page .cv-crumb a:hover{
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cv-page .cv-crumb .is-cur{
	font-weight: 700;
	color: #000;
}
.cv-page .cv-list{
	padding-top: 60px;
}


/* ==========================================================================
   [9] 최종정보 — 도구줄 + 국역/원문 2단 본문
   --------------------------------------------------------------------------
   ★ 본문은 예전 클래스(JS 훅) 그대로다. content.css / common.css 의
     .text_body_tit · .option_btn · .text_body2 · .w50 규칙을 여기서 덮는다.
   ★ 2단 = 예전처럼 .w50(50% float). flex 로 바꾸지 않은 이유 : 글이 없는 쪽도
     빈 .txtTrans/.txtOrg 가 남는데, float 이면 높이 0 으로 사라지고
     flex 이면 빈 칸이 절반을 차지한다.
   ========================================================================== */
.cv-page .cv-tool{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 60px;
}
.cv-page .cv-tool__id{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	word-break: break-all;
}
.cv-page .cv-tool__id span{
	margin-right: 12px;
	color: #666;
}
.cv-page .cv-tool__r{
	display: flex;
	align-items: center;
	gap: 12px;
}
.cv-page .option_btn.cv-opt,
.cv-page .option_btn.cv-fs{
	float: none;
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 24px;
}
.cv-page .option_btn.cv-opt{
	gap: 12px;
}
.cv-page .option_btn.cv-fs{
	gap: 1px;
}
/* 국역 · 원문 · 동시스크롤 : 상세 뷰어 체크박스와 같은 20x20 r4, 켜짐 = 주황 */
.cv-page .cv-opt a.check_toggle,
.cv-page .cv-opt a.check_toggle.on,
.cv-page .cv-opt a.check_toggle.dis,
.cv-page .cv-opt a.check_toggle.on.dis{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #222;
	cursor: pointer;
	white-space: nowrap;
}
.cv-page .cv-opt a.check_toggle:before{
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}
.cv-page .cv-opt a.check_toggle.on:before{
	border-color: #e98813;
	background: #e98813 url(../images/ico-check-w.svg) no-repeat center / 13px 10px;
}
.cv-page .cv-opt a.check_toggle.dis{
	cursor: default;
	opacity: .4;
}
.cv-page .cv-fs a.btn,
.cv-page .cv-fs a.btn:not(:last-child){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 1px solid #ddd;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	cursor: pointer;
	transition: none;
}
.cv-page .cv-fs a.btn:hover{
	background: #f5f5f5;
	color: #000;
}

/* 2단 본문 */
.cv-page .cv-txt{
	margin-top: 20px;
}
.cv-page .cv-txt .orgtextInfo{
	display: flow-root;
}
.cv-page .cv-txt .txtTrans.w50 .text__body--info__text{ margin-right: 10px; }
.cv-page .cv-txt .txtOrg.w50 .text__body--info__text{ margin-left: 10px; }
.cv-page .cv-txt .text__body--info__text{
	padding: 0;
	border: 1px solid #ddd;
	font-size: 16px;
	line-height: 1.8;
}
/* 칸 머리 : 제목 + 원문이미지 알약 */
.cv-page .cv-txt .text_body_tit{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	margin: 0;
	padding: 12px 20px;
	border: 0;
	border-bottom: 1px solid #ddd;
	background: #f5f5f5;
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
	color: #000;
}
.cv-page .cv-txt .text_body_tit .btns{
	float: none;
	flex-shrink: 0;
	display: flex;
	gap: 8px;
}
.cv-page .cv-txt .text_body_tit .cv-pill{
	height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #ddd;
	border-radius: 100px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #666;
	vertical-align: middle;
}
.cv-page .cv-txt .text_body_tit .cv-pill:hover{
	border-color: #999;
	color: #000;
}
/* 칸 본문 (높이는 예전 resizeProc 가 창 높이로 준다 → 안에서 스크롤) */
.cv-page .cv-txt .text_body2{
	margin: 0;
	padding: 24px 24px 32px;
	overflow-y: auto;
}
.cv-page .cv-txt .trans_text{
	margin: 0;
	padding: 0;
	line-height: 1.8;
	color: #000;
}
.cv-page .cv-txt .txtTrans .trans_text{ font-size: 17px; }
.cv-page .cv-txt .txtOrg .trans_text{ font-size: 20px; }
.cv-page .cv-txt .nodeview--para{
	padding: 0;
	margin: 0 0 16px;
}
.cv-page .cv-txt .trans_text > br{
	display: none;
}
/* 본문 주석 번호 */
.cv-page .cv-txt span.jusok{
	margin: 0 2px;
	font-size: .75em;
	font-weight: 700;
	color: #e98813;
	text-decoration: none;
	vertical-align: super;
	line-height: 0;
	cursor: pointer;
}
.cv-page .cv-txt span.jusok:hover,
.cv-page .cv-txt span.jusok.focus{
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* 주석 목록 */
.cv-page .cv-txt .remark{
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}
.cv-page .cv-txt .text_body2 dl{
	margin: 0;
	padding: 10px 0;
	border: 0;
}
.cv-page .cv-txt .text_body2 dl + dl{
	border-top: 1px dashed #ddd;
}
.cv-page .cv-txt .text_body2 dl dt,
.cv-page .cv-txt .text_body2 dl dt.jusok-dt{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	color: #000;
}
.cv-page .cv-txt .text_body2 dl dt span.junum{
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 0 8px;
	border: 0;
	border-radius: 100px;
	background: #e98813;
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	color: #fff;
}
.cv-page .cv-txt .text_body2 dl dt.focus span.junum{
	background: #000;
}
.cv-page .cv-txt .text_body2 dl dd{
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 22px;
	color: #444;
}


/* 2단(원문·국역 둘 다 있음)일 때 두 칸 높이를 같게 (2026-10-21 수정요청 19번).
   위 [9] 의 "flex 로 안 바꾼 이유"(빈 칸이 절반 차지)는 :has(> .w50) 로 둘 다 있을 때만 켜서 피한다.
   구조가 둘이다 : 서지 B·누정 = div.orgtextInfo > .txtTrans/.txtOrg
                   고문서형 A   = dl.orgtextInfo > dd > .txtTrans/.txtOrg > dl > dd > .text__body--info__text
   국역·원문 토글로 한쪽을 숨기면(display:none) 남은 칸이 flex:1 로 꽉 찬다. */
.cv-page .cv-txt .orgtextInfo:has(> .w50),
.cv-page .cv-txt .orgtextInfo > dd:has(> .w50){
	display: flex;
	align-items: stretch;
}
.cv-page .cv-txt .orgtextInfo:has(> .w50) > div,
.cv-page .cv-txt .orgtextInfo > dd:has(> .w50) > div{
	float: none;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.cv-page .cv-txt .orgtextInfo .w50 > dl,
.cv-page .cv-txt .orgtextInfo .w50 > dl > dd,
.cv-page .cv-txt .orgtextInfo .w50 .text__body--info__text{
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
}
.cv-page .cv-txt .orgtextInfo .w50 .text_body2{
	flex: 1;
}


/* ==========================================================================
   [10] 좁은 화면 — 2단을 위아래로
   ========================================================================== */
@media screen and (max-width: 1279px){
	.cv-page .cv-txt .orgtextInfo:has(> .w50),
	.cv-page .cv-txt .orgtextInfo > dd:has(> .w50){
		display: flow-root;
	}
	.cv-page .cv-txt .w50{
		float: none;
		width: 100% !important;
	}
	.cv-page .cv-txt .txtTrans.w50 .text__body--info__text{ margin: 0 0 20px; }
	.cv-page .cv-txt .txtOrg.w50 .text__body--info__text{ margin: 0; }
}


/* ==========================================================================
   [11] 반응형 — 태블릿 800~1279 / 모바일 ~799 (시안 content_view_1~4 의 1024 · 390 폭)
   --------------------------------------------------------------------------
   [7](1599 이하 서지 세로 쌓기, 1279 이하 뷰어 패널 세로 쌓기) · [10](최종정보 2단 → 1단)
   은 그대로 두고, 시안의 태블릿·모바일 값만 여기에 얹는다.
   좌우 여백 / SNB 패널은 snb.css [4] 가 맡는다 (.content 40 / 24).

   시안 실측
     태블릿 : 명조 제목 28/52 · 탭 18 (선택 16 Bold) 사이 40 · 카테고리 보기 오른쪽
              대표이미지 = 가로 꽉 정사각 #f5f5f5 (안쪽 80) → 40 → 제목 28/40
              권 제목 28/32 · 뷰어 제목 28/32, 옵션줄은 경로 아래 오른쪽 정렬, 자료ID 그 아래 8
     모바일 : 명조 제목 24 (.content 위 40 에 바로) · 탭 16 사이 20, 한 줄
              탭 → 20 → 카테고리 보기(가로 꽉 40) → 20 → 1px 검정 → 40 → 패널
              대표이미지 정사각(안쪽 40) · 제목 24/40 · 기본정보 표 열 60 + 16
              권 제목 24/28 · 뷰어 제목 24/28 → 경로 → 16 → 체크 → 12 → 가+가가- → 8 → 자료ID → 40 → 본체(580)
              하단 이전·목록·다음 위 40
   권차/문체/최종정보(cv-page--sub)는 시안이 없다 → 같은 문법으로 세로로 쌓기만 한다.
   ========================================================================== */
/* XSL 결과 안의 이미지·표가 화면 밖으로 나가지 않게 (모든 폭) */
.cv-page .cv-text img,
.cv-page .cv-txt img{
	max-width: 100%;
	height: auto;
}
.cv-page .cv-text table,
.cv-page .cv-txt table{
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media screen and (max-width: 1279px){
	.cv-page .cv-title{
		font-size: 28px;
	}

	/* 서지 : 대표이미지 가로 꽉 정사각 */
	.cv-page .cv-info__thumb{
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		padding: 80px;
	}
	.cv-page .cv-info__thumb img{
		max-width: 100%;
		max-height: 100%;
	}
	.cv-page .cv-info__tit{
		font-size: 28px;
		line-height: 40px;
	}

	/* 기사목록 */
	.cv-page .cv-vol__tit{
		font-size: 28px;
		line-height: 32px;
	}

	/* 이미지/원문/국역 머리줄 : 제목·경로 / 옵션줄(오른쪽) / 자료ID(오른쪽) */
	.cv-page .kmv__head{
		row-gap: 16px;
	}
	.cv-page .kmv__head__l{
		flex: 1 1 100%;
	}
	.cv-page .kmv__head__r{
		margin-left: auto;
		flex-wrap: wrap;
		justify-content: flex-end;
		height: auto;
		min-height: 28px;
		row-gap: 12px;
	}
	.cv-page .kmv__opts{
		flex-wrap: wrap;
	}
	.cv-page .kmv__tit{
		font-size: 28px;
		line-height: 32px;
	}
	.cv-page .kmv__id{
		margin-top: 8px;
		text-align: right;
		word-break: break-all;
	}

	/* 권차·문체·최종정보 */
	.cv-page .cv-crumb li + li:before{
		margin: 0 12px;
	}
	.cv-page .cv-tool__r{
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 799px){
	/* 제목 : 한 줄이면 시안처럼 52 높이, 여러 줄이면 36 간격 */
	.cv-page .cv-title{
		margin-top: 0;
		padding: 8px 0;
		font-size: 24px;
		line-height: 36px;
	}

	/* 탭줄 → 탭 / 카테고리 보기(가로 꽉) 두 줄 */
	.cv-page .cv-tabs__bar,
	.cv-page .cv-bar{
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}
	.cv-page .cv-tabs__list{
		gap: 8px 20px;
	}
	.cv-page .cv-tabs__tab{
		font-size: 16px;
	}
	.cv-page .cv-btn-line{
		justify-content: center;
		width: 100%;
	}
	.cv-page .cv-err__btn{
		width: auto;
	}
	.cv-page .cv-tabs__panel{
		padding-top: 40px;
	}

	/* 서지 */
	.cv-page .cv-info{
		gap: 32px;
	}
	.cv-page .cv-info__thumb{
		padding: 40px;
	}
	.cv-page .cv-info__tit{
		font-size: 24px;
		line-height: 40px;
	}
	.cv-page .cv-meta__row{
		column-gap: 16px;
	}

	/* 기사목록 */
	.cv-page .cv-vol__head{
		gap: 16px;
	}
	.cv-page .cv-vol__tit{
		font-size: 24px;
		line-height: 28px;
	}
	.cv-page .cv-vol__btns{
		gap: 12px;
	}
	.cv-page .cv-vol__body{
		margin-top: 24px;
	}

	/* 하단 */
	.cv-page .cv-pn{
		gap: 24px;
		margin-top: 40px;
	}
	.cv-page .cv-tabs:has(#knTab-media:checked) ~ .cv-err,
	.cv-page .cv-err--on{
		margin-top: 40px;
	}

	/* 이미지/원문/국역 */
	.cv-page .kmv__tit{
		font-size: 24px;
		line-height: 28px;
	}
	.cv-page .kmv__head__r{
		flex: 1 1 100%;
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
		margin-left: 0;
	}
	.cv-page .kmv__id{
		text-align: left;
	}
	.cv-page .kmv__navbar{
		flex-wrap: wrap;
		padding: 0 8px;
	}
	.cv-page .kmv__page{
		margin: 0 6px;
	}
	.cv-page .kmv__sec__b{
		padding: 16px;
	}

	/* 권차·문체·최종정보 */
	.cv-page .cv-list{
		padding-top: 40px;
	}
	.cv-page .cv-tool{
		margin-top: 40px;
	}
	.cv-page .cv-tool__r{
		flex-direction: column;
		align-items: flex-start;
	}
	.cv-page .option_btn.cv-opt{
		flex-wrap: wrap;
	}
	.cv-page .cv-txt .text_body_tit{
		min-height: 52px;
		padding: 12px 16px;
		font-size: 16px;
		line-height: 24px;
	}
	.cv-page .cv-txt .text_body2{
		padding: 16px 16px 24px;
	}
}