@charset "utf-8";

/* ==========================================================================
   KRDS UI - 상세 화면 (munjung/node_view.jsp)
   --------------------------------------------------------------------------
   시안 : design-ref/node_view.png (3840x2012)

   ★ 배율 주의
     이 시안만 **1920px 아트보드의 2배율**이다(다른 시안은 1509 아트보드 2배율).
     글자 크기·헤더 치수는 두 시안이 같으므로 배율은 동일하고 뷰포트만 넓다.
     따라서 좌우 여백·컬럼 폭처럼 "화면 폭에 딸린" 수치는 그대로 옮기면 안 된다.
     여기서는 배율과 무관한 값(글자·높이·색·테두리)만 시안대로 맞췄다.

   ★ 시안에는 SNB 가 없지만(본문이 화면 전체 폭) **SNB 는 그대로 두기로 했다**
     (2026-09-01 사용자 결정). 한 번 빼 봤다가 되돌렸다 —
     snb.jsp 안에 라우터·ajax 핸들러가 들어 있어 위험이 컸고,
     #container 의 SNB 자리(padding-left)를 지우는 것도 header.jsp:101 이
     class 를 통째로 덮어써서 우회가 필요했다. KRDS-README [3-7] 참고.

   [목차]
     [1] 브레드크럼 / 제목
     [2] 탭 (라디오 기반, JS 없음)
     [3] 탭 우측 유틸 버튼
     [4] 패널 내용 / 기본정보 표
     [5] 접근성
   ========================================================================== */


/* ==========================================================================
   [1] 브레드크럼 / 제목
   시안 : 메뉴바 아래 제목 스트립, 제목 24px 볼드, 아래 1px #e0e0e0
   ========================================================================== */
.kn-page .path{
	height: 33px;
	margin: 0 -25px 0;
	padding: 0 25px;
	border-bottom: 1px solid #e5e7eb;
	background: var(--krds-bg-surface);
}

.kn-page .path ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 33px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-page .path ul li{
	position: relative;
	height: auto;
	padding: 0 0 0 22px;
	font-size: 13px;
	line-height: 1.4;
	color: #4a5565;
	background: none;
}

.kn-page .path ul li:after{ display: none; content: none; }

.kn-page .path ul li:before{
	content: "/";
	position: absolute;
	left: 8px;
	color: #b1b8be;
}

.kn-page .path ul li:first-child{ padding-left: 0; }
.kn-page .path ul li:first-child:before{ display: none; }
.kn-page .path ul li:last-child{ color: #1a1a1a; }

.kn-page .path ul li.home{
	width: 15px;
	min-width: 15px;
	height: 33px;
	padding: 0;
	overflow: hidden;
	text-indent: -999em;
	background: none;
}

/* ★ display:block 을 명시해야 한다.
   위의 `li:first-child:before{display:none}` 과 특이도가 같다(0,3,3).
   홈 아이콘은 언제나 첫 항목이다. content 만 바꿔도 display 는
   그대로 none 이라 집 아이콘이 아예 안 보인다. */
.kn-page .path ul li.home:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%; left: 0;
	width: 13px; height: 12px;
	margin-top: -6px;
	background: #1b2d52;
	-webkit-clip-path: polygon(50% 0, 100% 45%, 100% 100%, 62% 100%, 62% 62%, 38% 62%, 38% 100%, 0 100%, 0 45%);
	clip-path: polygon(50% 0, 100% 45%, 100% 100%, 62% 100%, 62% 62%, 38% 62%, 38% 100%, 0 100%, 0 45%);
}

/* --- 제목 스트립 --- */
.kn-page .tit__section{
	margin: 0 -25px;
	padding: 10px 25px;
	border-bottom: 1px solid #e0e0e0;
	background: none;
}

.kn-page .tit__section:before{ display: none; content: none; }

/* ★ 4차(2026-09-02) 수정 : 24px/-0.03em → 20px/normal
     3차에는 `-trim` 오프셋을 잘못 읽어 크게 잡았다(KRDS-README [3-0] 함정).
     viewer.png · node_view.png 두 시안 모두 같은 문자열의 잉크 상자가
     475x42(2배율) = 237.5x21 CSS 다. 현재 24px 렌더는 551x42(2배율).
       - 높이비 42/51 → 24 x 0.824 = 19.8  → 20px
       - 그 20px 에 자간을 normal 로 두면 폭도 475 로 맞는다(계산 일치) */
.kn-page .tit__section h2{
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #1a1a1a;
	letter-spacing: normal;
}


/* ==========================================================================
   [2] 탭 — 라디오 기반 (JS 없음)
   --------------------------------------------------------------------------
   .kn-tabs 의 직계 형제 관계가 전부다.
     input.kn-tabs__radio  →  .kn-tabs__bar  →  .kn-tabs__panel x4
   `:checked ~ .kn-tabs__panel--xxx` 로 패널을,
   `:checked ~ .kn-tabs__bar .kn-tabs__tab[for=...]` 로 탭 활성 표시를 켠다.
   구조를 바꿀 때 이 형제 관계를 깨지 말 것.

   시안 실측 : 바 42px / 탭 좌우 여백 32 / 글자 13
               활성 #003087 볼드 + 아래 2px 같은 색 / 비활성 #4d5868
               바 아래 1px #e0e0e0
   ========================================================================== */
.kn-tabs{
	position: relative;
	margin: 0 -25px;
	padding: 0;
}

/* 라디오는 화면에서만 감춘다(포커스는 살아 있어야 키보드 조작이 된다) */
.kn-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;
}

.kn-tabs__bar{
	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: 16px;
	height: 42px;
	padding: 0 25px 0 0;
	border-bottom: 1px solid #e0e0e0;
	background: var(--krds-bg-surface);
}

.kn-tabs__list{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	height: 42px;
}

.kn-tabs__tab{
	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;
	position: relative;
	height: 42px;
	padding: 0 32px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: #4d5868;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: color var(--krds-duration) var(--krds-easing);
}

.kn-tabs__tab:hover{ color: #1b2d52; }

/* 활성 밑줄 : 바의 1px 아래선 위에 겹쳐 그린다(높이 불변) */
.kn-tabs__tab:after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: #003087;
	opacity: 0;
}

#knTab-seoji:checked ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-seoji"],
#knTab-heje:checked  ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-heje"],
#knTab-gisa:checked  ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-gisa"],
#knTab-media:checked ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-media"]{
	color: #003087;
	font-weight: 700;
}

#knTab-seoji:checked ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-seoji"]:after,
#knTab-heje:checked  ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-heje"]:after,
#knTab-gisa:checked  ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-gisa"]:after,
#knTab-media:checked ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-media"]:after{
	opacity: 1;
}

/* --- 패널 --- */
.kn-tabs__panel{ display: none; }

#knTab-seoji:checked ~ .kn-tabs__panel--seoji,
#knTab-heje:checked  ~ .kn-tabs__panel--heje,
#knTab-gisa:checked  ~ .kn-tabs__panel--gisa,
#knTab-media:checked ~ .kn-tabs__panel--media{
	display: block;
}

.kn-tabs__panel > .wrap__text__body--info__text{
	margin: 0;
	padding: 24px 25px 0;
	border: 0;
}

.kn-page .kn-empty{
	margin: 0;
	padding: 60px 0;
	font-size: 15px;
	color: #6d7882;
	text-align: center;
}


/* ==========================================================================
   [3] 탭 우측 유틸 버튼
   시안 실측 : 높이 32, 글자 13, 테두리 #d1d5dc, 간격 4
   --------------------------------------------------------------------------
   PREVID / NEXTID 는 컨트롤러가 최종정보 레벨에만 담아 준다
   (MunjungController:186~190). 서지 레벨에서는 비어 있어 .is-dis 로 나온다.
   서지 레벨에서도 살리려면 컨트롤러에 이전/다음 조회를 추가해야 한다.
   ========================================================================== */
.kn-tabs__util{
	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;
}

.kn-page .kn-btn{
	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;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 32px;
	padding: 0 14px;
	border: 1px solid #d1d5dc;
	border-radius: var(--krds-radius-s);
	background: var(--krds-bg-surface);
	font-size: 13px;
	line-height: 1;
	color: #364153;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.kn-page a.kn-btn:hover,
.kn-page a.kn-btn:focus{
	border-color: #8a949e;
	background: #f4f5f6;
	color: #1b2d52;
	text-decoration: none;
}

.kn-page .kn-btn.is-dis{
	color: #b1b8be;
	background: #fafafa;
	cursor: default;
}


/* ==========================================================================
   [4] 패널 내용 — 기본정보 표
   시안 : 왼쪽 썸네일 패널(#f4f4f4) + 오른쪽 표, th 배경 #f4f4f4
   ※ 시안은 1920 뷰포트라 썸네일 패널 절대폭(603px)을 그대로 쓸 수 없다.
     비율(32%)로 옮기고 상한만 뒀다.
   ========================================================================== */
.kn-page .wrap__text__body--info{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 16px;
}

.kn-page .text__body--info__thumb{
	-ms-flex-negative: 0;
	flex-shrink: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 32%;
	max-width: 420px;
	padding: 24px;
	background: #f4f4f4;
}

.kn-page .text__body--info__thumb img{
	display: block;
	width: 100%;
	height: auto;
}

.kn-page table.htable{
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	border: 0;
	border-top: 1px solid #e0e0e0;
	border-collapse: collapse;
	border-radius: 0;
	background: none;
	table-layout: fixed;
	font-size: 15px;
	line-height: 1.6;
}

.kn-page table.htable th{
	width: 114px;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid #e0e0e0;
	background: #f4f4f4;
	font-size: 15px;
	font-weight: 400;
	color: #333d4b;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

.kn-page table.htable td{
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid #e0e0e0;
	background: none;
	font-size: 15px;
	color: #464c53;
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: break-word;
}

/* --- 패널 안 dl 제목 (기본정보 / 정의) --- */
.kn-page .kn-tabs__panel dl > dt{
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a;
}

.kn-page .kn-tabs__panel dl > dd{
	margin: 0 0 32px;
	padding: 0;
}


/* ==========================================================================
   [5] 접근성
   ========================================================================== */
#knTab-seoji:focus-visible ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-seoji"],
#knTab-heje:focus-visible  ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-heje"],
#knTab-gisa:focus-visible  ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-gisa"],
#knTab-media:focus-visible ~ .kn-tabs__bar .kn-tabs__tab[for="knTab-media"]{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: -3px;
}

@media (forced-colors: active){
	.kn-tabs__tab:after{ background: Highlight; }
	.kn-page .kn-btn{ border-color: ButtonText; }
}


/* ==========================================================================
   [6] 레거시 규칙 되돌리기
   --------------------------------------------------------------------------
   ★ 특이도/미지정 때문에 실제로 물렸던 것들. 지우지 말 것.
   ========================================================================== */

/* content.css:483 이 썸네일을 position:absolute; right:0 으로 띄운다.
   width 만 덮으면 여전히 떠 있어 표와 겹친다 → position 을 명시해야 한다.
   (시안은 썸네일이 왼쪽, 표가 오른쪽인 2단 flex) */
.kn-page .wrap__text__body--info .text__body--info__thumb{
	position: static;
	top: auto; right: auto;
	width: 32%;
	max-width: 420px;
	text-align: left;
}

/* content.css:485 의 200x200 고정 액자 해제 */
.kn-page .wrap__text__body--info .text__body--info__thumb .view__thumb{
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: normal;
	background: none;
}

.kn-page .wrap__text__body--info .text__body--info__thumb .item_image_box{
	display: block;
	width: auto;
	height: auto;
	line-height: normal;
}

.kn-page .wrap__text__body--info .text__body--info__thumb img{
	max-width: 100%;
	max-height: none;
	border: 1px solid #e0e0e0;
}

/* content.css:481 / krds.css 의 카드 배경·여백 해제 */
.kn-page .wrap__text__body--info{
	position: relative;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* content.css:446 의 주황 점(dt:before) 제거 — 시안엔 없다 */
.kn-page .wrap__text__body--info__text dl dt:before{
	display: none;
	content: none;
}

/* content.css:445 의 dt 여백·아래선 해제 (kwch 제목은 기사목록에서 계속 쓴다) */
.kn-page .kn-tabs__panel .wrap__text__body--info__text dl dt:not(.kwch){
	padding: 0;
	border-bottom: 0;
}

/* 정의/해제 본문 */
.kn-page .kn-tabs__panel .text__body--info__text{
	font-size: 15px;
	line-height: 1.75;
	color: #464c53;
}