@charset "UTF-8";

/* ==========================================================================
   KRDS UI - 상세(4뎁스) "이미지/원문/국역" 탭 = 내장 이미지뷰어
   --------------------------------------------------------------------------
   대상 : munjung/node_view_media.jspf  (node_view.jsp 의 4번째 탭 패널)
   시안 : design-ref/viewer.png  (1920 아트보드 2배율 → 시안px / 2 = CSS px)
   로딩 : head.jsp 에서 krds-node.css 다음에 로드한다.

   ★ 스코프
     모든 규칙이 `.kmv` 로 시작한다. 이 탭 밖으로 새지 않는다.
     되돌리려면 head.jsp 의 <link> 한 줄만 주석 처리하면 된다.

   ★ 독립 뷰어(viewer/viewer.jsp + krds-viewer.css)와는 완전히 별개다.
     그쪽은 `.viewer__wrap__*` 클래스에 JS 픽셀계산(IV.OPT)이 물려 있고
     여기는 flex 로만 짠다. 두 파일을 섞지 말 것.

   ------------------------------------------------------------------
   시안 실측값 (전부 CSS px)
     본체 좌우 2단        이미지 : 텍스트 = 844 : 853  → 1:1 flex
     이미지 상단 툴바     40 높이 / 버튼 28x28 / 간격 4 / 좌여백 12
     이미지 스테이지      배경 #ebebeb
     좌우 원형 이동버튼   38지름 / 배경 #fcfcfc / 테두리 #d1d5dc / 화살표 #4a5565
     이미지 하단 내비바   42 높이 / 버튼 28x28 / 간격 4 / 가운데 정렬
                          페이지 입력칸 36x28 · go 32x28 · 구분선 1px #e5e7eb
     텍스트 섹션 머리     30 높이 / 배경 #f7f7f7 / 12px 볼드 #364153 / 좌여백 16
     텍스트 본문          13px / 행간 24.7 (=1.9) / 여백 16 20
     경계선               패널·섹션 #e0e0e0  ·  컨트롤 테두리 #d1d5dc
     체크박스             14x14 / 체크색 #003087 / 라벨 12px / 간격 4·13
     글자크기 버튼        32x26 / 12px / 활성 배경 #e5e7eb 테두리 #6a7282
     상단 부제            15px 볼드 · 경로 11px #6a7282 · 자료ID 11px

   ※ 글자 크기는 전부 **같은 문자열을 실제 사이트 CSS 로 렌더해 잉크 상자를
     시안과 맞춰** 정했다(비례 환산은 힌팅 때문에 틀린다).
     검증 기준점 : 탭 라벨 "기사목록" 13px → 잉크 88x23(2배율) = 시안과 동일.
   ------------------------------------------------------------------

   ★ 특이도 함정 (KRDS-README [2-7] / krds-css-specificity-traps 메모)
     - content.css 의 `input[type="text"]`(0,1,1) 이 클래스 하나를 이긴다
       → 페이지 입력칸은 `.kmv input[type="text"].kmv__num` 으로 받는다.
     - content.css 가 `.viewer` 계열과 `table`·`dl` 을 광범위하게 잡는다.
       여기서는 그 클래스명을 아예 쓰지 않는다(`kmv-` 접두).
     - base.css 의 `a{}` 색을 이기려면 `.kmv a` 로 한 단계 올려야 한다.
   ========================================================================== */


/* ==========================================================================
   [1] 패널 컨테이너
   --------------------------------------------------------------------------
   .kn-tabs 가 이미 `margin:0 -25px` 로 #content 여백을 뚫고 나와 있다.
   그래서 본체(.kmv__body)는 손대지 않아도 화면 폭을 꽉 채운다.
   머리줄(.kmv__head)만 25px 를 되돌려 준다.
   ========================================================================== */
.kn-tabs__panel--media{
	/* 이 패널만 .wrap__text__body--info__text 래퍼를 쓰지 않는다 */
	padding: 0;
}

.kmv{
	position: relative;
	color: #1a1a1a;
}


/* ==========================================================================
   [2] 머리줄 — 부제 / 분류경로 / 옵션 체크박스 / 글자크기 / 자료ID
   ========================================================================== */
.kmv__head{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 25px 0;
}

.kmv__head__l{ min-width: 0; }

.kmv__tit{
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #101828;
	word-break: keep-all;
}

.kmv__path{
	margin: 2px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: #6a7282;
}

.kmv__head__r{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 40px;              /* 시안 : 동시스크롤 라벨 끝 ~ 가+ 상자 = 41px */
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

/* --- 자료ID 줄 : 머리줄 오른쪽 아래 --- */
.kmv__id{
	margin: 4px 0 0;
	padding: 0 25px 8px;
	font-size: 11px;
	line-height: 1.4;
	color: #364153;
	text-align: right;
}

.kmv__id > span{
	margin-right: 11px;
	color: #99a1af;
}

/* 자료ID 값 : 라벨은 11px 로 잉크가 정확히 맞는데(56x19) 값은 시안이 9% 좁다.
   (시안 417x17 / 11px 렌더 458x18) → 자간으로 맞춘다. 크기를 10px 로 내리면
   높이가 안 맞는다. */
.kmv__id > em{
	font-style: normal;
	letter-spacing: -0.04em;
}


/* ==========================================================================
   [3] 옵션 체크박스 (이미지 / 원문 / 국역 / 동시스크롤)
   --------------------------------------------------------------------------
   기존 `.checkbox__wrap--viewer` 는 bg-check-*3.png 이미지 스프라이트라
   시안(14x14 · #003087 · 흰 체크)과 모양이 다르다. 순수 CSS 로 새로 그린다.
   ※ 이미지 파일을 만들지 않는다 → KRDS-README [2-7] 5번(필터로 만들지 말 것)과
     같은 이유로, 단색 도형은 CSS 로 그리는 편이 배율에 안전하다.
   ========================================================================== */
.kmv__opts{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 13px;
}

.kmv-chk{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 4px;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* 실제 input 은 감추되 포커스는 살린다(키보드 조작) */
.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;
}

.kmv-chk__box{
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	width: 14px;
	height: 14px;
	border: 1px solid #8e949c;
	border-radius: 2px;
	background: #fff;
	transition: background-color var(--krds-duration, .15s) var(--krds-easing, ease),
	            border-color var(--krds-duration, .15s) var(--krds-easing, ease);
}

/* 체크 표시 : 회전한 두 변으로 그린다(이미지 없음) */
.kmv-chk__box:after{
	content: "";
	position: absolute;
	top: 0;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0;
}

.kmv-chk__in:checked + .kmv-chk__box{
	border-color: #003087;
	background: #003087;
}

.kmv-chk__in:checked + .kmv-chk__box:after{ opacity: 1; }

.kmv-chk__in:focus + .kmv-chk__box{
	outline: 2px solid #003087;
	outline-offset: 1px;
}

.kmv-chk__in:disabled + .kmv-chk__box{
	border-color: #cdd1d5;
	background: #f2f3f5;
}

.kmv-chk__in:disabled ~ .kmv-chk__tx{ color: #adb3ba; }

.kmv-chk__tx{
	font-size: 12px;
	line-height: 1;
	color: #1a1a1a;
}


/* ==========================================================================
   [4] 글자크기 버튼 (가+ / 가 / 가-)
   ========================================================================== */
.kmv__fs{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 1px;
}

.kmv .kmv-fsbtn{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 32px;
	height: 26px;
	padding: 0;
	border: 1px solid #d1d5dc;
	border-radius: 2px;
	background: #fff;
	font-size: 12px;
	line-height: 1;
	color: #364153;
	cursor: pointer;
}

.kmv .kmv-fsbtn:hover{ background: #f2f3f5; }

.kmv .kmv-fsbtn.is-on{
	border-color: #6a7282;
	background: #e5e7eb;
	color: #101828;
	font-weight: 700;
}


/* ==========================================================================
   [5] 본체 2단 (이미지 | 원문·국역)
   --------------------------------------------------------------------------
   높이는 JS(KMV.resize)가 준다. 계산 전에도 화면이 깨지지 않도록
   min-height 를 둔다.
   ※ 한쪽 컬럼을 끄면(이미지/원문/국역 체크 해제) 나머지가 flex 로 채운다.
   ========================================================================== */
.kmv__body{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	min-height: 520px;
	border-top: 1px solid #e0e0e0;
}

.kmv__pane{
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0%;
	flex: 1 1 0%;
	min-width: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.kmv__pane--img{ border-right: 1px solid #e0e0e0; }

/* 마지막으로 보이는 패널의 오른쪽 선은 지운다 */
.kmv__pane--img.is-last{ border-right: 0; }

.kmv__pane.is-off{ display: none; }


/* ==========================================================================
   [6] 이미지 패널
   ========================================================================== */
/* --- 상단 툴바 --- */
.kmv__imgbar{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 4px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	height: 40px;
	padding: 0 12px;
	border-bottom: 1px solid #e0e0e0;
	background: #fff;
}

/* --- 스테이지 --- */
.kmv__stage{
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
	background: #ebebeb;
	overflow: hidden;
}

.kmv__osd{
	width: 100%;
	height: 100%;
}

/* OpenSeadragon 네비게이터(미니맵) : 시안은 우상단 흰 테두리 상자 */
.kmv__osd .navigator{
	border: 1px solid #d1d5dc !important;
	background: rgba(255,255,255,.6);
}

/* 이미지가 없을 때 안내 (OpenSeadragon 캔버스 위에 뜬다) */
.kmv__msg{
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 14px;
	color: #6d7882;
	text-align: center;
}

/* --- 좌우 원형 이동버튼 --- */
.kmv .kmv-arrow{
	position: absolute;
	top: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	padding: 0;
	border: 1px solid #d1d5dc;
	border-radius: 50%;
	background: #fcfcfc;
	color: #4a5565;
	cursor: pointer;
	z-index: 5;
	transition: background-color var(--krds-duration, .15s) var(--krds-easing, ease);
}

.kmv .kmv-arrow:hover{ background: #fff; }
.kmv .kmv-arrow--prev{ left: 12px; }
.kmv .kmv-arrow--next{ right: 12px; }

.kmv .kmv-arrow svg{ display: block; margin: 0 auto; }

/* --- 하단 내비바 --- */
.kmv__navbar{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	height: 42px;
	border-top: 1px solid #e0e0e0;
	background: #fff;
}

.kmv-grp{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 4px;
}

.kmv__page{
	margin: 0 13px;
	font-size: 12px;
	line-height: 1;
	color: #364153;
	white-space: nowrap;
}

/* ★ content.css 의 input[type="text"](0,1,1) 를 이기려면
     타입선택자를 함께 써야 한다. 클래스 하나로는 진다. */
.kmv input[type="text"].kmv__num{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 36px;
	height: 28px;
	margin: 0 4px 0 0;
	padding: 0 2px;
	border: 1px solid #d1d5dc;
	border-radius: 2px;
	background: #fff;
	background-image: none;   /* shorthand background 잔재 제거 → [2-7] 2번 */
	font-size: 12px;
	/* ★ line-height 를 height 와 같게 주면 글자가 잘린다 → [2-7] 4번 */
	line-height: normal;
	color: #364153;
	text-align: center;
}

.kmv .kmv-gbtn{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 28px;
	min-width: 32px;
	padding: 0 6px;
	border: 1px solid #d1d5dc;
	border-radius: 2px;
	background: #fff;
	font-size: 12px;
	line-height: 1;
	color: #364153;
	cursor: pointer;
}

.kmv .kmv-gbtn:hover{ background: #f2f3f5; }

.kmv__sep{
	width: 1px;
	height: 20px;
	margin: 0 8px;
	background: #e5e7eb;
}


/* --- 아이콘 버튼 공용 (툴바 · 내비바) --- */
.kmv .kmv-ibtn{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #d1d5dc;
	border-radius: 2px;
	background: #fff;
	color: #364153;
	cursor: pointer;
	transition: background-color var(--krds-duration, .15s) var(--krds-easing, ease);
}

.kmv .kmv-ibtn:hover{ background: #f2f3f5; }

.kmv .kmv-ibtn:disabled,
.kmv .kmv-arrow:disabled{
	border-color: #e5e7eb;
	color: #c1c6cc;
	cursor: default;
	background: #fff;
}

.kmv .kmv-ibtn svg,
.kmv .kmv-gbtn svg{ display: block; }


/* ==========================================================================
   [7] 텍스트 패널 (원문 / 국역)
   ========================================================================== */
.kmv__pane--txt{
	background: #fff;
}

.kmv__sec{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0%;
	flex: 1 1 0%;
	min-height: 0;
}

.kmv__sec + .kmv__sec{ border-top: 1px solid #e0e0e0; }

.kmv__sec.is-off{ display: none; }

/* ★ 앞 섹션을 접으면 뒤 섹션이 시각적으로 첫 번째가 된다.
     `+` 는 display:none 형제에도 매칭되므로 패널 상단선과 겹쳐 두 줄이 된다. */
.kmv__sec.is-off + .kmv__sec{ border-top: 0; }

.kmv__sec__h{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin: 0;
	padding: 0 16px;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid #e0e0e0;
	background: #f7f7f7;
	font-size: 12px;
	font-weight: 700;
	color: #364153;
}

.kmv__sec__b{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 20px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 13px;
	line-height: 1.9;
	color: #1a1a1a;
	word-break: break-all;
}

/* XSL(TransText.xsl) 이 만들어 주는 블록.
   ★ content.css 가 .trans_text / .nodeview--para 에 위아래 여백을 준다.
     안 지우면 첫 줄이 시안보다 18px 쯤 내려간다(실측으로 잡은 함정). */
.kmv__sec__b .trans_text{
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.kmv__sec__b .nodeview--para{
	margin: 0 0 24px;
	padding: 0;
	line-height: inherit;
}

.kmv__sec__b .nodeview--para:first-child{ margin-top: 0; }
.kmv__sec__b .nodeview--para:last-child{ margin-bottom: 0; }

/* 원문/국역이 비었을 때.
   ★ 영역은 그대로 잡아 두고 안내문만 넣는다(2026-09-02 지시).
     체크박스도 잠그지 않으므로 사용자가 접었다 폈다 할 수 있다. */
.kmv__empty{
	margin: 0;
	padding: 40px 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6d7882;
	text-align: center;
}

/* 주석 번호 뱃지 — 시안은 주황 알약 */
.kmv__sec__b span.jusok{
	display: inline-block;
	min-width: 20px;
	margin: 0 2px;
	padding: 0 4px;
	border-radius: 3px;
	background: #f36f21;
	font-size: 11px;
	line-height: 16px;
	color: #fff;
	text-align: center;
	vertical-align: 2px;
	cursor: pointer;
}

.kmv__sec__b span.jusok:hover{ background: #d95f16; }


/* ==========================================================================
   [8] 주석 팝오버
   --------------------------------------------------------------------------
   독립 뷰어의 `#layer_kakju_copy`(pop_mark) 와 같은 역할이지만
   common.css 의 .pop_mark 규칙과 얽히지 않도록 클래스를 새로 쓴다.
   ========================================================================== */
.kmv__jupop{
	position: absolute;
	z-index: 30;
	width: 380px;
	max-width: calc(100% - 40px);
	border: 1px solid #6a7282;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(16,24,40,.16);
}

.kmv__jupop__h{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 8px;
	height: 30px;
	padding: 0 8px 0 12px;
	border-bottom: 1px solid #e0e0e0;
	background: #f7f7f7;
	font-size: 12px;
	font-weight: 700;
	color: #364153;
}

.kmv .kmv__jupop__x{
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1;
	color: #6a7282;
	cursor: pointer;
}

.kmv__jupop__b{
	max-height: 180px;
	padding: 10px 12px;
	overflow-y: auto;
	font-size: 13px;
	line-height: 1.6;
	color: #1a1a1a;
	white-space: pre-wrap;
}


/* ==========================================================================
   [9] 접근성 / 인쇄
   ========================================================================== */
.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{
	.kmv__imgbar,
	.kmv__navbar,
	.kmv-arrow,
	.kmv__head__r{ display: none !important; }
}


/* ==========================================================================
   [10] 좁은 화면 — 2단을 위아래로 접는다
   --------------------------------------------------------------------------
   시안은 1920 기준이다. SNB(200px)를 뺀 본문이 좁아지면 두 패널을 쌓는다.
   ========================================================================== */
@media screen and (max-width: 1279px){
	.kmv__body{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.kmv__pane--img{
		border-right: 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.kmv__pane{ -ms-flex: 1 1 50%; flex: 1 1 50%; }
}