@charset "UTF-8";

/* KRDS 본문 서체. @import 는 @charset 직후에만 유효하므로 최상단에 위치.
   CDN 미접속(폐쇄망) 환경에서는 아래 [3] 의 폴백 서체로 자연 대체된다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ==========================================================================
   KRDS (Korea Design System) UI 적용 - 사용자(Front) 영역  [전면 개편판]
   --------------------------------------------------------------------------
   적용범위 : layout.common / layout.dir / layout.pop (= layout/head.jsp)
   로딩순서 : base.css → jquery-ui.css → common.css → content.css → krds.css
              (최후순위 로딩이므로 !important 없이 기존 규칙을 재정의한다)

   원칙
    - 마크업(JSP/HTML) 구조, class/id/name/data-* 를 변경하지 않는다.
    - JavaScript 로직/이벤트에 영향을 주지 않는다.
    - 기존 셀렉터를 그대로 사용하고 "값"만 KRDS 기준으로 재정의한다.

   ★ 절대 변경 금지 수치 (JS 픽셀 계산이 의존함)
      - #header 전체 높이 160px (header__top 30px + header 130px)
      - .wrap__snb .snb__title 높이 80px
      - SNB 폭 240px / opened 360px  (#container padding-left)
      → header.jsp 의 resizeWindow() 가 winH-150, (81+204+20+5) 로 계산
   ========================================================================== */


/* ==========================================================================
   [1] 디자인 토큰 (Design Token)
   --------------------------------------------------------------------------
   Primary : KRDS 표준 블루(#256EF4) 스케일  ← 전면 개편의 핵심 변경
   Navy    : 기존 브랜드 네이비(#0f317e) 는 Secondary(深) 로 보존
   Point   : 기존 크림슨(#b4091e) 은 Point 로 보존
   ※ 브랜드 네이비로 되돌리려면 --krds-primary-50/60 두 줄만 교체하면 된다.
   ========================================================================== */
:root{
	/* --- Gray (KRDS 표준) --- */
	--krds-gray-0  : #ffffff;
	--krds-gray-5  : #f4f5f6;
	--krds-gray-10 : #e6e8ea;
	--krds-gray-20 : #cdd1d5;
	--krds-gray-30 : #b1b8be;
	--krds-gray-40 : #8a949e;
	--krds-gray-50 : #6d7882;
	--krds-gray-60 : #58616a;
	--krds-gray-70 : #464c53;
	--krds-gray-80 : #33363d;
	--krds-gray-90 : #1e2124;
	--krds-gray-95 : #131416;

	/* --- Primary (KRDS 표준 Government Blue) --- */
	--krds-primary-5  : #ecf2fe;
	--krds-primary-10 : #d8e5fd;
	--krds-primary-20 : #b1cefb;
	--krds-primary-30 : #86aff9;
	--krds-primary-40 : #4c87f6;
	--krds-primary-50 : #256ef4;	/* ★ 기본 액션 */
	--krds-primary-60 : #0b50d0;	/* ★ hover / pressed */
	--krds-primary-70 : #083891;
	--krds-primary-80 : #052561;
	--krds-primary-90 : #03163a;

	/* --- Secondary : 기존 브랜드 네이비 --- */
	--krds-navy-5  : #edf1fa;
	--krds-navy-40 : #4e71be;
	--krds-navy-60 : #1b3f8f;
	--krds-navy-70 : #0f317e;	/* ★ 기존 브랜드 색 */
	--krds-navy-80 : #0a2461;

	/* --- Point : 기존 크림슨 --- */
	--krds-point-50 : #d63d4a;
	--krds-point-60 : #b4091e;

	/* --- System (KRDS 표준) --- */
	--krds-danger      : #de3412;
	--krds-warning     : #ffb114;
	--krds-warning-text: #9e6a00;
	--krds-success     : #228738;
	--krds-information : #0b78cb;

	/* --- Semantic : 텍스트 --- */
	--krds-text-default  : var(--krds-gray-90);
	--krds-text-basic    : var(--krds-gray-70);
	--krds-text-assistive: var(--krds-gray-50);
	--krds-text-disabled : var(--krds-gray-40);
	--krds-text-invert   : var(--krds-gray-0);
	--krds-text-point    : var(--krds-primary-60);

	/* --- Semantic : 배경 --- */
	--krds-bg-canvas  : var(--krds-gray-5);	/* 페이지 캔버스 */
	--krds-bg-surface : var(--krds-gray-0);	/* 카드 표면 */
	--krds-bg-alt     : var(--krds-gray-5);
	--krds-bg-disabled: var(--krds-gray-20);

	/* --- Semantic : 테두리 --- */
	--krds-border-strong : var(--krds-gray-60);	/* 입력요소 (대비 6.28:1) */
	--krds-border-default: var(--krds-gray-30);
	--krds-border-light  : var(--krds-gray-20);
	--krds-border-subtle : var(--krds-gray-10);

	/* --- Focus (KRDS 표준) --- */
	--krds-focus       : #256ef4;
	--krds-focus-width : 3px;
	--krds-focus-offset: 2px;

	/* --- Radius (KRDS 표준) --- */
	--krds-radius-xs  : 2px;
	--krds-radius-s   : 4px;
	--krds-radius-m   : 6px;
	--krds-radius-l   : 8px;
	--krds-radius-card: 12px;
	--krds-radius-pill: 1000px;

	/* --- Spacing (KRDS 8-Point Grid) --- */
	--krds-space-1: 4px;
	--krds-space-2: 8px;
	--krds-space-3: 12px;
	--krds-space-4: 16px;
	--krds-space-5: 24px;
	--krds-space-6: 32px;
	--krds-space-7: 40px;
	--krds-space-8: 48px;

	/* --- Control Height (KRDS Button/Input Size Scale) --- */
	--krds-control-xs: 32px;
	--krds-control-s : 40px;
	--krds-control-m : 48px;
	--krds-control-l : 56px;

	/* --- Motion --- */
	--krds-duration: .2s;
	--krds-easing  : ease-in-out;
}


/* ==========================================================================
   [2] 접근성 : 포커스 표시 복원  ★ 최우선 개선항목
   --------------------------------------------------------------------------
   base.css 의 `input,select,textarea,button{outline:none}` / `button{outline:0}`
   으로 포커스 표시가 전역 제거되어 키보드 사용자가 현재 위치를 알 수 없었다.
   (WCAG 2.4.7 Focus Visible / KWCAG 2.1 위반)

   KRDS 규격은 box-shadow 4px 이나, box-shadow 는 Windows 고대비 모드에서
   렌더링되지 않으므로 outline 으로 구현한다. outline 은 레이아웃 공간을
   차지하지 않아 기존 배치에 전혀 영향이 없다.
   ========================================================================== */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
area:focus,
[tabindex]:focus{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: var(--krds-focus-offset);
}

/* 마우스 클릭 시에는 링을 숨기고 키보드 조작 시에만 노출 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
area:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible){
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
area:focus-visible,
[tabindex]:focus-visible{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: var(--krds-focus-offset);
}

/* 어두운 배경 위 요소는 흰색 링으로 대비 확보
   (.snb__title 은 밝은 배경이므로 여기에 포함하지 않는다) */
.viewer__header a:focus-visible,
.pop__filter .pop__filter__head a:focus-visible{
	outline-color: var(--krds-gray-0);
	outline-offset: -3px;
}

/* 동작 최소화 설정 존중 (KRDS Motion 지침) */
@media (prefers-reduced-motion: reduce){
	*,
	*:before,
	*:after{
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ==========================================================================
   [3] 타이포그래피
   --------------------------------------------------------------------------
   - KRDS 는 자간 인위적 압축을 금지 → -0.1em / -0.05em 을 normal 로 정상화
   - 본문 17px / 행간 1.6 (KRDS Body medium)
   - 서체 : Pretendard GOV → Pretendard → 기존 폰트 폴백
   ========================================================================== */
body,
th, td,
input, select, textarea, button{
	font-family: "Pretendard GOV", "Pretendard", "Malgun Gothic",
	             "Apple SD Gothic Neo", "Noto Sans KR", "nanum gothic", sans-serif;
	color: var(--krds-text-default);
	letter-spacing: normal;
}

/* 회색 캔버스는 #container 배경으로 그린다. body 는 흰색을 유지해
   팝업(layout_pop) 화면이 회색으로 물들지 않도록 한다. */
body{
	letter-spacing: normal;
	background: var(--krds-bg-surface);
}

a{
	color: var(--krds-text-default);
}

h1, h2, h3, h4, h5, h6{
	letter-spacing: normal;
}


/* ==========================================================================
   [4] 레이아웃 셸 : 헤더 / 컨테이너 / SNB / 콘텐츠
   --------------------------------------------------------------------------
   기존 : 진한 네이비 GNB 바 + 흰색 콘텐츠 + 세로 라인 배경이미지
   개편 : 화이트 헤더 + 회색 캔버스 + 화이트 카드 (KRDS 레퍼런스 사이트 구조)
   ※ 높이 수치(160px / 80px / 240px)는 JS 계산 의존이므로 유지한다.
   ========================================================================== */

/* --- 헤더 전체 ------------------------------------------------------------
   ※ #header / #header .header 에는 background 를 선언하지 않는다.
     메인(main.css)이 #header 에 히어로 배경(bg-header.png / 네이비 밴드)을,
     #header .header 에 background:none 을 지정하고 있어 krds.css 가 나중에
     로드되면 히어로가 흰색으로 덮여버리기 때문이다.
     서브 화면은 body 가 흰색이므로 별도 지정 없이도 흰 헤더가 된다.
     하단 구분선은 서브에만 존재하는 .gnb 에 inset shadow 로 넣는다. */
#header .header__top{
	background: var(--krds-bg-surface);
}

#header .header__top:after{
	background: var(--krds-border-subtle);
}

#header .header__top ul.global li a{
	font-size: 14px;
	font-weight: 400;
	color: var(--krds-text-basic);
	line-height: 30px;
	transition: color var(--krds-duration) var(--krds-easing);
}

#header .header__top ul.global li a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

#header .header__top ul.global li:nth-child(2) a:after{
	background: var(--krds-border-light);
}

#header .header__top ul.info li a{
	font-size: 14px;
	color: var(--krds-text-basic);
	transition: color var(--krds-duration) var(--krds-easing);
}

#header .header__top ul.info li a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

#header .header__top ul.info li:after{
	background: var(--krds-border-light);
}

/* --- GNB : 네이비 바 → 화이트 바 + 블루 언더라인 인디케이터 (서브 전용) --- */
#header .header .gnb{
	background: var(--krds-bg-surface);
	box-shadow: inset 0  1px 0 0 var(--krds-border-subtle),
	            inset 0 -1px 0 0 var(--krds-border-light);
}

#header .header .gnb ul li a{
	padding: 12px 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--krds-text-basic);
	line-height: 22px;
	transition: color var(--krds-duration) var(--krds-easing);
}

#header .header .gnb ul li a:hover,
#header .header .gnb ul li a.active{
	color: var(--krds-primary-60);
	text-decoration: none;
}

#header .header .gnb ul li a:after{
	height: 4px;
	background: var(--krds-primary-50);
	border-radius: var(--krds-radius-pill) var(--krds-radius-pill) 0 0;
}

/* 원래 5·6번째였던 "국역 / 표점" 은 1뎁스에서 제거하고 SNB 의 제공서비스
   2뎁스로 옮겼다(header.jsp / munjung/snb.jsp 참고).
   그 두 항목만 다른 배경·글자색을 주던 nth-child(5)/(6) 규칙도 함께 삭제했다.
   지금은 1뎁스가 4개뿐이라 규칙이 매칭되지 않지만, 나중에 항목이 늘어나면
   엉뚱한 항목에 적용되므로 남겨 두지 않는다. */

/* --- 통합검색 : 필드+버튼을 하나의 pill 형태로 --- */
/* ※ 높이는 메인(main.css)의 50px 과 동일하게 맞춰 충돌을 없앤다.
   font-size / padding / width 는 선언하지 않아 메인·서브 각자의 값을 지킨다. */
#header .header .search input{
	height: 50px;
	font-weight: 400;
	color: var(--krds-text-default);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-strong);
	border-right: none;
	border-radius: var(--krds-radius-l) 0 0 var(--krds-radius-l);
	box-sizing: border-box;
	transition: border-color var(--krds-duration) var(--krds-easing);
}

#header .header .search input:hover,
#header .header .search input:focus{
	border-color: var(--krds-primary-50);
}

#header .header .search .btn--word{
	height: 50px;
	background-color: var(--krds-bg-surface);
	background-position: center;
	border-top: 1px solid var(--krds-border-strong);
	border-bottom: 1px solid var(--krds-border-strong);
	transition: background-color var(--krds-duration) var(--krds-easing);
}

#header .header .search .btn--word:hover{
	background-color: var(--krds-primary-5);
}

#header .header .search .btn--search{
	height: 50px;
	font-size: 17px;
	font-weight: 700;
	color: var(--krds-text-invert);
	background-color: var(--krds-primary-50);
	background-position: 18px center;
	border-radius: 0 var(--krds-radius-l) var(--krds-radius-l) 0;
	transition: background-color var(--krds-duration) var(--krds-easing);
}

#header .header .search .btn--search:hover{
	background-color: var(--krds-primary-60);
}

#header .header .search .btn--search--detail{
	height: 50px;
	font-weight: 700;
	color: var(--krds-primary-60);
	line-height: 50px;
}

/* --- 컨테이너 : 배경 라인이미지 제거, 좌측 SNB 영역만 화이트로 --- */
#container{
	background-color: var(--krds-bg-canvas);
	background-image: linear-gradient(to right,
		var(--krds-bg-surface) 0,
		var(--krds-bg-surface) 240px,
		var(--krds-border-subtle) 240px,
		var(--krds-border-subtle) 241px,
		var(--krds-bg-canvas) 241px);
	background-repeat: repeat-y;
	background-position: left top;
}

#container.opened{
	background-image: linear-gradient(to right,
		var(--krds-bg-surface) 0,
		var(--krds-bg-surface) 360px,
		var(--krds-border-subtle) 360px,
		var(--krds-border-subtle) 361px,
		var(--krds-bg-canvas) 361px);
}

#container.closed{
	background-image: none;
}

/* --- 콘텐츠 : 흰 배경 → 회색 캔버스 (카드가 떠 보이도록) --- */
.content{
	padding: 0 var(--krds-space-6) var(--krds-space-8);
	font-size: 17px;
	line-height: 1.6;
	background: transparent;
}


/* ==========================================================================
   [5] 좌측 메뉴 (SNB)
   --------------------------------------------------------------------------
   ※ .snb__title 높이 80px 은 resizeWindow() 계산에 사용 → 유지
   ========================================================================== */
/* --- SNB 타이틀 -----------------------------------------------------------
   bg-snb.png (76x80 투명 PNG / 옅은 회청색 #E2E5EB 전통 문양 워터마크) 를
   그대로 살리고, 그 아래에 흰색→연블루 그라데이션을 깔아 문양이 자연스럽게
   비치도록 한다. (background 다중 레이어 : 앞 레이어가 위에 그려짐)

   ※ 높이 80px + 하단 1px = 81px 은 header.jsp resizeWindow() 의
     (81+204+20+5) 계산과 일치해야 하므로 border 는 1px 을 유지한다.
     강조선은 박스 크기를 바꾸지 않는 inset box-shadow 로 표현한다. */
.wrap__snb .snb__title{
	background: url('../images/bg-snb.png') no-repeat left top,
	            linear-gradient(180deg, var(--krds-gray-0) 0%, var(--krds-primary-5) 100%);
	border-bottom: 1px solid var(--krds-border-light);
	box-shadow: inset 0 -3px 0 0 var(--krds-primary-50);
	font-size: 22px;
	font-weight: 700;
	color: var(--krds-primary-70);
	letter-spacing: normal;
}

.wrap__snb nav > ul{
	padding: var(--krds-space-2) 0;
}

/* ★ 상하 padding 15px / font-size 15px 은 원본 그대로 유지해야 한다.
   header.jsp resizeWindow() 가 SNB 메뉴 높이를 204px 로 하드코딩해
   (81+204+20+5) 로 .snb__filter 높이를 계산하기 때문이다.
   항목 높이가 커지면 검색 화면의 멀티필터 패널이 화면 밖으로 밀린다.
   → 세로 여백·글자크기는 건드리지 않고 좌측 들여쓰기와 색상만 조정한다. */
.wrap__snb nav > ul > li > a{
	padding: 15px 40px 15px 20px;
	font-size: 15px;
	font-weight: 400;
	color: var(--krds-text-basic);
	background-color: var(--krds-bg-surface);
	background-position: right 16px center;
	border-bottom: 1px solid var(--krds-border-subtle);
	transition: background-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.wrap__snb nav > ul > li > a:hover{
	color: var(--krds-primary-60);
	background-color: var(--krds-primary-5);
	text-decoration: none;
}

/* 선택 상태 : 색상 단독이 아닌 굵기 + 좌측 표시자 + 기존 불릿 아이콘 병행 */
.wrap__snb nav > ul > li.open > a{
	padding-left: 17px;
	font-weight: 700;
	color: var(--krds-primary-60);
	background-color: var(--krds-primary-5);
	border-left: 3px solid var(--krds-primary-50);
}

.wrap__snb nav > ul > li > ul{
	padding: var(--krds-space-2) var(--krds-space-1) var(--krds-space-2) var(--krds-space-5);
	border-bottom: 1px solid var(--krds-border-subtle);
}

.wrap__snb nav > ul > li > ul > li{
	padding: var(--krds-space-1) 0;
	font-size: 15px;
}

/* --- 검색 화면(search/snb.jsp) 전용 상태 : 기존에 CSS 가 없던 클래스 --- */

/* 분류 그룹 헤더 (li.grp) : 하위 섹션과 위계 구분 (높이는 불변) */
.wrap__snb nav > ul > li.grp > a{
	font-weight: 700;
	color: var(--krds-text-default);
	background-color: var(--krds-bg-alt);
}

.wrap__snb nav > ul > li.grp > a:hover{
	color: var(--krds-primary-60);
	background-color: var(--krds-primary-5);
}

/* 결과 0건 섹션 (li.disable) : 선택 불가임을 색 외에 커서로도 표시 */
.wrap__snb nav > ul > li.disable > a{
	color: var(--krds-text-disabled);
	background-color: var(--krds-bg-surface);
	cursor: not-allowed;
}

.wrap__snb nav > ul > li.disable > a:hover{
	color: var(--krds-text-disabled);
	background-color: var(--krds-bg-surface);
}

.wrap__snb nav > ul > li > ul > li a{
	color: var(--krds-text-basic);
}

.wrap__snb nav > ul > li > ul > li a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}


/* ==========================================================================
   [6] 브레드크럼 (.path)
   --------------------------------------------------------------------------
   기존 : 45도 회전한 1px 선 구분자 + 현재 위치에 밑줄(링크로 오인)
   개편 : 셰브론(>) 구분자 + 현재 위치는 굵은 글씨
   ========================================================================== */
.path{
	padding: var(--krds-space-5) 0 var(--krds-space-3);
}

.path ul li{
	height: 24px;
	padding: 0 24px 0 0;
	font-size: 15px;
	color: var(--krds-text-assistive);
	line-height: 24px;
}

.path ul li.home{
	min-width: 18px;
	background-position: left center;
}

.path ul li a{
	color: var(--krds-text-assistive);
}

.path ul li a:hover{
	color: var(--krds-text-default);
	text-decoration: underline;
}

.path ul li:after{
	top: 50%;
	right: 9px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	background: none;
	border-top: 1.5px solid var(--krds-gray-40);
	border-right: 1.5px solid var(--krds-gray-40);
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.path ul li:last-child{
	font-weight: 700;
	color: var(--krds-text-default);
	text-decoration: none;
}


/* ==========================================================================
   [7] 페이지 제목 (.tit__section)
   --------------------------------------------------------------------------
   기존 : 24px + 배경이미지 밑줄
   개편 : 32px(KRDS Heading large) + 좌측 블루 액센트 바, 밑줄 제거
   ※ :before 는 CSS 의사요소 - 마크업 변경 아님
   ========================================================================== */
.tit__section{
	margin: 0 0 var(--krds-space-5);
	padding: 0 0 0 18px;
	background: none;
}

.tit__section:before{
	position: absolute;
	content: '';
	top: 6px;
	left: 0;
	display: block;
	width: 6px;
	height: 28px;
	background: var(--krds-primary-50);
	border-radius: var(--krds-radius-pill);
}

.tit__section h2{
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--krds-text-default);
	letter-spacing: normal;
}

.tit__section--search--section:before{
	background: var(--krds-primary-50);
	box-shadow: none;
}

.tit__section--search--section h2{
	font-size: 20px;
	font-weight: 700;
	color: var(--krds-text-default);
}

/* --- 섹션별 "더보기+" 버튼 -----------------------------------------------
   기존 : 래퍼(.tit__section__option)에 20px 높이 테두리+inset 그림자를 주고
          안쪽 <a> 는 스타일이 없어 작은 회색 상자에 글자만 얹힌 형태였다.
   개편 : 래퍼를 투명하게 비우고 <a> 를 KRDS Tertiary pill 버튼으로 만든다. */
.tit__section--search--section .tit__section__option{
	height: auto;
	min-width: 0;
	padding: 0;
	line-height: normal;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.tit__section--search--section .tit__section__option a{
	display: inline-block;
	height: 32px;
	padding: 0 var(--krds-space-4);
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
	color: var(--krds-primary-60);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-primary-20);
	border-radius: var(--krds-radius-pill);
	box-sizing: border-box;
	white-space: nowrap;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            border-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.tit__section--search--section .tit__section__option a:hover,
.tit__section--search--section .tit__section__option a:focus{
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border-color: var(--krds-primary-50);
	text-decoration: none;
}


/* ==========================================================================
   [8] 폼 컨트롤 : Input / Select / Textarea
   --------------------------------------------------------------------------
   기존 : 높이 24px, 테두리 #d6d6d6(대비 1.5:1), readonly/disabled 시 테두리 소멸
   개편 : 높이 48px(KRDS medium), 테두리 gray-60(대비 6.28:1), radius 8px
   ========================================================================== */
/* ★ `.km-search__input` 제외 이유
   이 규칙은 태그+속성 선택자라 특이도가 (0,1,1) 이다.
   메인 히어로의 통합검색창(.km-search__input)은 흰 라운드 박스(.km-search) 안에
   테두리 없는 입력만 얹는 구조인데, 여기서 border 가 상속되면
   박스 테두리와 겹쳐 "선이 두 줄"로 보인다.
   krds-main.css 에서 클래스 2개(0,2,0)로 이기게 해 뒀지만,
   특이도 싸움에 의존하는 건 깨지기 쉬워 발생 지점에서 직접 제외한다. */
input[type="text"]:not(.km-search__input),
input[type="search"]:not(.km-search__input),
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"]{
	height: var(--krds-control-m);
	padding: 0 var(--krds-space-4);
	font-size: 17px;
	color: var(--krds-text-default);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-strong);
	border-radius: var(--krds-radius-l);
	box-sizing: border-box;
	transition: border-color var(--krds-duration) var(--krds-easing),
	            box-shadow var(--krds-duration) var(--krds-easing);
}

input[type="text"]:not(.km-search__input):hover,
input[type="search"]:not(.km-search__input):hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover{
	border-color: var(--krds-primary-50);
}

input[type="text"]:not(.km-search__input):focus,
input[type="search"]:not(.km-search__input):focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus{
	border-color: var(--krds-primary-50);
}

/* 읽기전용 : 편집 불가임을 배경으로 구분하되 경계는 유지 */
input[type="text"]:read-only,
input[type="search"]:read-only,
input[type="password"]:read-only{
	color: var(--krds-text-basic);
	background: var(--krds-bg-alt);
	border-color: var(--krds-border-default);
}

/* 비활성 : 기존에는 테두리를 흰색으로 지워 요소 존재 자체를 인지 불가했음 */
input[type="text"]:disabled,
input[type="search"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="email"]:disabled{
	color: var(--krds-text-assistive);
	background: var(--krds-bg-disabled);
	border-color: var(--krds-gray-30);
	cursor: not-allowed;
}

::-webkit-input-placeholder{ color: var(--krds-text-disabled); }
::-moz-placeholder{ color: var(--krds-text-disabled); opacity: 1; }
:-ms-input-placeholder{ color: var(--krds-text-disabled); }
::placeholder{ color: var(--krds-text-disabled); opacity: 1; }

/* --- Select : 화살표를 SVG 로 교체(고해상도 대응). 파일 추가 없음 --- */
select{
	height: var(--krds-control-m);
	padding: 0 44px 0 var(--krds-space-4);
	font-size: 17px;
	color: var(--krds-text-default);
	background: var(--krds-bg-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%2358616a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid var(--krds-border-strong);
	border-radius: var(--krds-radius-l);
	box-sizing: border-box;
	transition: border-color var(--krds-duration) var(--krds-easing);
}

select:hover,
select:focus{
	border-color: var(--krds-primary-50);
}

select:disabled{
	color: var(--krds-text-assistive);
	background: var(--krds-bg-disabled) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%238a949e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	border-color: var(--krds-gray-30);
	cursor: not-allowed;
}

select option:checked,
select option:hover{
	background: var(--krds-primary-50);
	color: var(--krds-text-invert);
}

textarea{
	padding: var(--krds-space-4);
	font-size: 17px;
	line-height: 1.6;
	color: var(--krds-text-default);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-strong);
	border-radius: var(--krds-radius-l);
	box-sizing: border-box;
	transition: border-color var(--krds-duration) var(--krds-easing);
}

textarea:hover,
textarea:focus{
	border-color: var(--krds-primary-50);
}

textarea:disabled{
	color: var(--krds-text-assistive);
	background: var(--krds-bg-disabled);
	border-color: var(--krds-gray-30);
	cursor: not-allowed;
}


/* ==========================================================================
   [9] 버튼
   --------------------------------------------------------------------------
   기존 : .btn1 / .small_btn2 / .btn--go / .btn__list--search 가 서로 다른
          높이·색·radius 사용 → KRDS Button 규격으로 통일
   ========================================================================== */

/* --- Primary Large : 목록/확인 등 주요 동작 --- */
.btn1{
	display: inline-block;
	min-width: 120px;
	height: var(--krds-control-l);
	padding: 0 var(--krds-space-6);
	font-size: 19px;
	font-weight: 700;
	line-height: 54px;
	text-align: center;
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border: 1px solid var(--krds-primary-50);
	border-radius: var(--krds-radius-l);
	box-sizing: border-box;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            border-color var(--krds-duration) var(--krds-easing);
}

.btn1:hover,
.btn1:focus{
	color: var(--krds-text-invert);
	background: var(--krds-primary-60);
	border-color: var(--krds-primary-60);
	text-decoration: none;
}

.btn1:active{
	background: var(--krds-primary-70);
	border-color: var(--krds-primary-70);
}

/* --- Primary Medium : 목록 검색 버튼 등 --- */
.small_btn2{
	display: inline-block;
	height: var(--krds-control-m);
	padding: 0 var(--krds-space-5);
	font-size: 17px;
	font-weight: 700;
	line-height: 46px;
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border: 1px solid var(--krds-primary-50);
	border-radius: var(--krds-radius-l);
	box-sizing: border-box;
	vertical-align: middle;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            border-color var(--krds-duration) var(--krds-easing);
}

.small_btn2:hover,
.small_btn2:focus{
	color: var(--krds-text-invert);
	background: var(--krds-primary-60);
	border-color: var(--krds-primary-60);
	text-decoration: none;
}

/* --- Tertiary(Outline) --- */
.small_btn2.c01{
	font-size: 17px;
	font-weight: 400;
	color: var(--krds-text-default);
	background: var(--krds-bg-surface);
	border-color: var(--krds-border-strong);
}

.small_btn2.c01:hover,
.small_btn2.c01:focus{
	color: var(--krds-primary-60);
	background: var(--krds-primary-5);
	border-color: var(--krds-primary-50);
}

/* --- 목록 유틸 검색 버튼 (검색결과·디렉토리 화면 높이 정렬) --- */
.wrap__list__util .wrap__list__util__option .btn__list--search{
	height: var(--krds-control-m);
	padding: 0 var(--krds-space-5);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border: 1px solid var(--krds-primary-50);
	border-radius: var(--krds-radius-l);
	box-sizing: border-box;
	vertical-align: middle;
}

.wrap__list__util .wrap__list__util__option .btn__list--search:hover{
	background: var(--krds-primary-60);
	border-color: var(--krds-primary-60);
}

/* --- 하단 액션 영역 : 우측 정렬 → 중앙 정렬 (KRDS) --- */
.wrap--btn--bottom1{
	margin: var(--krds-space-7) 0 0;
	text-align: center;
}


/* ==========================================================================
   [10] 목록 유틸 툴바 (건수 표기 + 검색 폼) → 화이트 카드
   ========================================================================== */
/* ★ height: auto !important 가 필요한 이유
   search/group.jsp 는 이 요소에 style="height:38px" 를 인라인으로 지정한다.
   인라인 스타일은 !important 없이는 재정의할 수 없다.
   카드로 바꾸면서 상하 패딩(12+12)과 제목 높이(약 27px)의 합이 38px 를
   넘어, "…건의 자료가 검색되었습니다" 문구가 카드 밖으로 넘쳤다.
   이 파일에서 !important 를 쓰는 유일한 지점이다. */
.wrap__list__util{
	height: auto !important;
	margin: 0 0 var(--krds-space-4);
	padding: var(--krds-space-3) var(--krds-space-5);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	box-sizing: border-box;
}

/* 우측 컨트롤(48px)과 수직 중앙을 맞추기 위한 상단 여백.
   컨트롤이 없는 화면(group.jsp)에서도 과하지 않도록 10px 로 억제. */
.wrap__list__util .wrap__list__util__tit{
	padding: 10px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--krds-text-basic);
}

/* 검색어 하이라이트 : mark 는 CSS 가 없어 브라우저 기본 형광노랑으로 나온다 */
.wrap__list__util .wrap__list__util__tit mark,
.wrap__list mark,
mark.mark1{
	padding: 0 3px;
	font-weight: 700;
	color: var(--krds-primary-70);
	background: var(--krds-primary-10);
	border-radius: var(--krds-radius-xs);
}

.wrap__list__util .wrap__list__util__tit strong{
	font-weight: 700;
	color: var(--krds-primary-60);
}

/* 컨트롤 높이 정렬 */
.wrap__list__util .wrap__list__util__option input,
.wrap__list__util .wrap__list__util__option select,
.wrap__list__util .wrap__list__util__option button{
	vertical-align: middle;
}

/* ※ 폭 증가로 인한 줄바꿈을 피하기 위해 컨트롤 글자크기는 15px 로 억제 */
.wrap__list__util .wrap__list__util__option input{
	width: 160px;
	height: var(--krds-control-m);
	font-size: 15px;
}

.wrap__list__util .wrap__list__util__option select{
	height: var(--krds-control-m);
	padding-right: 38px;
	font-size: 15px;
	background-position: right 12px center;
}

.wrap__list__util .wrap__list__util__option .small_btn2{
	font-size: 15px;
	padding: 0 var(--krds-space-4);
}

.wrap__list__util .wrap__list__util__option .array--inline1 .array--margin1{
	margin-right: var(--krds-space-2);
}

/* --- 보기모드 전환(간략보기/리스트보기) --------------------------------
   기존에는 하단 테두리에 붙는 "탭" 형태(border-bottom:none + :after 흰 띠)라
   툴바가 카드가 되면서 어색해진다. KRDS 세그먼트 버튼으로 재정의한다. */
.wrap__list__util .wrap__list__util__option .btn__list--toggle{
	height: var(--krds-control-m);
	padding: 0 14px;
	margin: 0 0 0 var(--krds-space-2);
	font-size: 15px;
	font-weight: 700;
	line-height: 46px;
	color: var(--krds-text-basic);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-default);
	border-radius: 0;
	box-sizing: border-box;
	vertical-align: middle;
	white-space: nowrap;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.wrap__list__util .wrap__list__util__option .btn__list--toggle + .btn__list--toggle{
	margin: 0 0 0 -1px;
	border-radius: 0 var(--krds-radius-l) var(--krds-radius-l) 0;
}

.wrap__list__util .wrap__list__util__option .tab--common_ns .btn__list--toggle:first-child{
	border-radius: var(--krds-radius-l) 0 0 var(--krds-radius-l);
}

.wrap__list__util .wrap__list__util__option .btn__list--toggle:hover{
	color: var(--krds-primary-60);
	background: var(--krds-primary-5);
}

/* 선택 상태 : 색상 + 굵기 (색상 단독 정보전달 금지) */
.wrap__list__util .wrap__list__util__option .btn__list--toggle.selected{
	z-index: 1;
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border: 1px solid var(--krds-primary-50);
}

/* 기존 탭 연결용 장식(상단 라인 / 하단 흰 띠) 제거 */
.wrap__list__util .wrap__list__util__option .btn__list--toggle.selected:before,
.wrap__list__util .wrap__list__util__option .btn__list--toggle.selected:after{
	display: none;
}


/* ==========================================================================
   [11] 목록 테이블 → 화이트 카드 테이블
   --------------------------------------------------------------------------
   border-collapse:separate + 모서리 radius 로 카드형 구현
   (base.css 의 border-collapse:collapse 를 재정의)
   ========================================================================== */
table.list__table{
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-top: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;	/* KRDS Body small : 다열 데이터 테이블용 */
	line-height: 1.5;
}

/* ※ 좌우 패딩 주의
   munjung/list.jsp(간략보기) 등은 <col width="50"> 인 좁은 컬럼
   (해제/원문/국역/이미지)이 있다. 좌우 패딩이 크면 헤더 글자가 세로로
   쌓이므로 6px 로 억제하고 헤더에는 nowrap 을 적용한다.
   (col width 는 힌트이므로 nowrap 시 브라우저가 필요한 만큼만 넓힌다) */
table.list__table th{
	padding: 16px 6px;
	height: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--krds-text-default);
	background: var(--krds-bg-alt);
	border-bottom: 1px solid var(--krds-border-light);
	white-space: nowrap;
}

table.list__table td{
	padding: 16px 6px;
	color: var(--krds-text-basic);
	border-bottom: 1px solid var(--krds-border-subtle);
	word-break: keep-all;		/* 한글 어절 단위 줄바꿈 */
	overflow-wrap: break-word;	/* 긴 단어는 강제 줄바꿈 */
}

table.list__table tr:last-child td{
	border-bottom: none;
}

/* 카드 모서리 */
table.list__table tr:first-child th:first-child{ border-top-left-radius: var(--krds-radius-card); }
table.list__table tr:first-child th:last-child { border-top-right-radius: var(--krds-radius-card); }
table.list__table tr:last-child td:first-child{ border-bottom-left-radius: var(--krds-radius-card); }
table.list__table tr:last-child td:last-child { border-bottom-right-radius: var(--krds-radius-card); }

table.list__table tr:hover td{
	background: var(--krds-primary-5);
}

table.list__table tr:hover th{
	background: var(--krds-bg-alt);
}

table.list__table a{
	color: var(--krds-text-default);
	font-weight: 500;
}

table.list__table a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

/* .list__table2 는 기존에 상단 네이비 2px 선 → 카드 스타일로 통일 */
table.list__table2{
	border-top: 1px solid var(--krds-border-light);
}

table.list__table2 th{
	background: var(--krds-bg-alt);
}


/* ==========================================================================
   [12] 페이지네이션 → 원형 pill
   --------------------------------------------------------------------------
   기존 : 7px/11px 패딩 사각 버튼 + 구형 오프셋 그림자
   개편 : 44x44 원형 (WCAG 2.5.8 Target Size 충족), 그림자 제거
   ========================================================================== */
.wrap__page--count{
	margin-top: var(--krds-space-6);
}

.wrap__page--count .page--move__input{
	font-size: 15px;
	font-weight: 400;
	color: var(--krds-text-basic);
	line-height: var(--krds-control-s);
}

.wrap__page--count .page--move__input input{
	width: 56px;
	height: var(--krds-control-s);
	padding: 0 var(--krds-space-3);
	font-size: 15px;
	font-weight: 400;
	text-align: right;
	color: var(--krds-text-default);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-strong);
	border-radius: var(--krds-radius-m);
	box-sizing: border-box;
	vertical-align: middle;
}

.wrap__page--count .page--move__input .btn--go{
	display: inline-block;
	width: 48px;
	height: var(--krds-control-s);
	line-height: 38px;
	text-align: center;
	font-weight: 700;
	color: var(--krds-text-invert);
	background: var(--krds-gray-60);
	border: 1px solid var(--krds-gray-60);
	border-radius: var(--krds-radius-m);
	box-sizing: border-box;
	vertical-align: middle;
	transition: background-color var(--krds-duration) var(--krds-easing);
}

.wrap__page--count .page--move__input .btn--go:hover{
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border-color: var(--krds-primary-50);
	text-decoration: none;
}

/* .page--move__input 가 position:absolute(top:0) 로 겹쳐 있으므로,
   페이지 번호는 그 아래(48px)에서 시작시켜 충돌을 피한다. */
.page__num{
	padding: var(--krds-space-8) 0 0;
}

.page__num span,
.page__num a{
	display: inline-block;
	min-width: 44px;
	height: 44px;
	margin: 0 3px;
	padding: 0 var(--krds-space-3);
	font-size: 16px;
	font-weight: 400;
	line-height: 42px;
	text-align: center;
	border-radius: var(--krds-radius-pill);
	box-sizing: border-box;
	box-shadow: none;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            border-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

/* 현재 페이지 : 색상 외에 굵은 글씨로도 구분 (색상 단독 정보전달 금지) */
.page__num span{
	font-weight: 700;
	color: var(--krds-text-invert);
	background: var(--krds-primary-50);
	border: 1px solid var(--krds-primary-50);
}

.page__num a{
	color: var(--krds-text-basic);
	background: transparent;
	border: 1px solid transparent;
}

.page__num a:hover{
	color: var(--krds-primary-60);
	background: var(--krds-primary-5);
	border-color: var(--krds-primary-20);
	text-decoration: none;
}

.page__num a.page__btn{
	color: var(--krds-text-basic);
	font-weight: 700;
	background: var(--krds-bg-surface);
	border-color: var(--krds-border-light);
}

.page__num a.page__btn:hover{
	color: var(--krds-primary-60);
	border-color: var(--krds-primary-20);
}


/* ==========================================================================
   [13] 게시글 상세 → 화이트 카드
   ========================================================================== */
table.board__view__table{
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-top: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	border-collapse: separate;
	border-spacing: 0;
}

table.board__view__table th{
	padding: var(--krds-space-6) var(--krds-space-6) var(--krds-space-5);
	background: var(--krds-bg-alt);
	border-bottom: 1px solid var(--krds-border-light);
	border-top-left-radius: var(--krds-radius-card);
	border-top-right-radius: var(--krds-radius-card);
}

table.board__view__table td{
	padding: var(--krds-space-5) var(--krds-space-6);
	border-bottom: 1px solid var(--krds-border-subtle);
}

table.board__view__table tr:last-child td{
	border-bottom: none;
	border-bottom-left-radius: var(--krds-radius-card);
	border-bottom-right-radius: var(--krds-radius-card);
}

table.board__view__table .board__view__title{
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--krds-text-default);
}

table.board__view__table .board__view__date{
	margin: var(--krds-space-4) 0 0;
	font-size: 15px;
	color: var(--krds-text-assistive);
}

table.board__view__table .board__view__body{
	padding: var(--krds-space-3) 0;
	color: var(--krds-text-default);
}

table.board__view__table td.att div{
	padding: var(--krds-space-4) var(--krds-space-6);
	border-bottom: 1px dashed var(--krds-border-subtle);
}

table.board__view__table td.att a{
	color: var(--krds-text-basic);
}

table.board__view__table td.att a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

table.board__view__table td.att .fc2{
	color: var(--krds-primary-60);
}

/* --- 이전글 / 다음글 --- */
table.htable--list{
	margin-top: var(--krds-space-5);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-top: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	font-size: 16px;
}

table.htable--list th{
	padding: var(--krds-space-4) var(--krds-space-5);
	height: auto;
	font-weight: 700;
	color: var(--krds-text-default);
	background: var(--krds-bg-alt);
	border-bottom: 1px solid var(--krds-border-subtle);
	white-space: nowrap;
}

table.htable--list td{
	padding: var(--krds-space-4) var(--krds-space-5);
	height: auto;
	color: var(--krds-text-basic);
	border-bottom: 1px solid var(--krds-border-subtle);
}

table.htable--list tr:last-child th,
table.htable--list tr:last-child td{
	border-bottom: none;
}

table.htable--list tr:first-child th:first-child{ border-top-left-radius: var(--krds-radius-card); }
table.htable--list tr:first-child td:last-child { border-top-right-radius: var(--krds-radius-card); }
table.htable--list tr:last-child th:first-child{ border-bottom-left-radius: var(--krds-radius-card); }
table.htable--list tr:last-child td:last-child { border-bottom-right-radius: var(--krds-radius-card); }

table.htable--list td a{
	color: var(--krds-text-default);
}

table.htable--list td a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}


/* ==========================================================================
   [14] 인접 화면 보정
   --------------------------------------------------------------------------
   .content 가 회색 캔버스로 바뀌었으므로, 같은 head.jsp 를 쓰는 다른 화면
   (검색결과 / 디렉토리열람) 의 주요 블록도 화이트 카드로 정리해 어색해지지
   않도록 한다. 구조·클래스 변경 없이 표면 스타일만 부여.
   ========================================================================== */
.wrap__list{
	padding: var(--krds-space-2) var(--krds-space-5);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-top: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	box-sizing: border-box;
}

.wrap__list li{
	padding: var(--krds-space-5) 0;
	border-bottom: 1px solid var(--krds-border-subtle);
}

.wrap__list li:last-child{
	border-bottom: none;
}

.wrap__list li .list__title{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

/* ★ 본문 미리보기 줄 잘림 해소
   content.css 는 height:57px / line-height:1.3 고정인데, 이는 본문 14px
   기준(18.2px x 3.13줄)으로 맞춘 값이다. 17px 로 키우면 22.1px x 2.58줄이
   되어 3번째 줄이 글자 가운데에서 가로로 잘린다.
   → 고정 높이를 버리고 line-clamp 로 "줄 단위" 자르기 + 말줄임 처리한다.
     글자 크기가 바뀌어도 항상 줄 경계에서 잘리므로 재발하지 않는다. */
.wrap__list li .list__txt1{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	height: auto;
	max-height: none;
	margin: var(--krds-space-2) 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--krds-text-basic);
	overflow: hidden;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 검색결과 목록(search/list.do)은 2줄 클램프 + 행간 1.8 을 유지 */
.wrap__list--search li .list__txt1{
	-webkit-line-clamp: 2;
	height: auto;
	max-height: none;
	line-height: 1.8;
}

.wrap__list li .list__title a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

.wrap__list li .list__thumb{
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-l);
	background: var(--krds-bg-alt);
}

.wrap__list--search{
	padding: var(--krds-space-2) var(--krds-space-5);
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
}

.wrap__list--search li{
	border-bottom: 1px solid var(--krds-border-subtle);
}

.wrap__list--search .search--keyword{
	color: var(--krds-primary-60);
	font-weight: 700;	/* 색상 단독 강조 방지 */
}

.wrap__list--search .search--info{
	color: var(--krds-text-assistive);
}

.wrap__page__filter{
	margin: 0 0 var(--krds-space-4);
	padding: var(--krds-space-3) 90px var(--krds-space-3) var(--krds-space-4);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
}

.wrap__page__filter ul li a{
	font-size: 15px;
	color: var(--krds-text-basic);
}

.wrap__page__filter a.btn--reset{
	background-color: var(--krds-primary-50);
	border-radius: var(--krds-radius-pill);
	font-size: 14px;
	line-height: 22px;
}

.wrap__page__filter a.btn--reset:hover{
	background-color: var(--krds-primary-60);
}

/* ※ overflow:hidden 을 주면 .wrap__content__filter--more(bottom:-23px) 가
   잘리므로 사용하지 않는다. */
.wrap__content__filter{
	background: var(--krds-bg-surface);
}

/* 셀 폭이 16.666% 로 좁고 ellipsis 처리되어 있어 본문 17px 대신 15px 사용 */
.wrap__content__filter li .checkbox__wrap .checkbox__wrap--style1{
	font-size: 15px;
	color: var(--krds-text-basic);
}

.wrap__content__filter li .checkbox__wrap.disabled .checkbox__wrap--style1{
	color: var(--krds-text-disabled);
	cursor: not-allowed;
}

.wrap__content__filter li .checkbox__wrap input[type="checkbox"]:checked + .checkbox__wrap--style1{
	background: var(--krds-primary-50);
	color: var(--krds-text-invert);
	font-weight: 700;
}

.wrap__content__filter li .checkbox__wrap:hover .checkbox__wrap--style1{
	background: var(--krds-primary-5);
	color: var(--krds-primary-60);
}

/* 상세 본문/서지 영역 카드화 */
.wrap__text__body--info{
	padding: var(--krds-space-5);
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	box-sizing: border-box;
}

.text__body{
	line-height: 1.8;
}

.wrap__uci span{
	border: 1px solid var(--krds-primary-20);
	border-radius: var(--krds-radius-s);
	color: var(--krds-primary-60);
	background: var(--krds-primary-5);
	padding: 2px 8px;
}

/* SNB 필터 패널 */
.snb__filter .snb__filter__header{
	background-color: var(--krds-primary-60);
}

.snb__filter .snb__filter__container{
	border-color: var(--krds-border-light);
	border-radius: 0 0 var(--krds-radius-l) var(--krds-radius-l);
}

.snb__filter .snb__filter__selected .list__top a{
	background-color: var(--krds-primary-50);
	border-radius: var(--krds-radius-pill);
}

.snb__filter .snb__filter__selected .list__top a:hover{
	background-color: var(--krds-primary-60);
}

.snb__filter .snb__filter__list .list__top h5{
	color: var(--krds-primary-60);
}

.snb__filter .snb__filter__list .list__top .filter--more{
	color: var(--krds-primary-60);
	cursor: pointer;
}

.snb__filter .snb__filter__list .list__top .filter--more:hover{
	text-decoration: underline;
}


/* ==========================================================================
   [17] 멀티필터 "더보기 +" 레이어 팝업 (.pop-filter)
   --------------------------------------------------------------------------
   /search/moreFilter.do 응답이 #pop_filterMore_layer 에 삽입된다.
   ※ 컨테이너(#pop_filterMore_layer)의 position/width/height 는 snb.jsp 의
     인라인 style 이라 건드리지 않고, 내부 .pop-filter 만 재정의한다.
   ※ .pop-filter_list 의 height 는 서버가 인라인으로 내려주므로 유지.
   ========================================================================== */
.pop-filter{
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-light);
	border-radius: var(--krds-radius-card);
	box-shadow: 0 12px 32px 0 rgba(0, 0, 0, .24);
	overflow: hidden;
}

.pop-filter .pophead-filter{
	height: 48px;
	background: var(--krds-primary-50);
}

.pop-filter .pophead-filter .pophead-tit{
	padding: 0 56px 0 20px;
	font-size: 17px;
	font-weight: 700;
	line-height: 48px;
	color: var(--krds-text-invert);
	letter-spacing: normal;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pop-filter .pophead-filter .pophead-tit .small{
	font-size: 14px;
	font-weight: 400;
	opacity: .85;
}

/* 닫기 : 원형 고스트 버튼 (48px 헤더 기준 수직 중앙) */
.pop-filter .pophead-filter .pophead-btn_close{
	top: 7px;
	right: 10px;
}

.pop-filter .pophead-filter .pophead-btn_close a{
	display: block;
	width: 34px;
	height: 34px;
	line-height: 32px;
	text-align: center;
	background-color: rgba(255, 255, 255, .16);
	/* border-radius: var(--krds-radius-pill); */
	cursor: pointer;
	transition: background-color var(--krds-duration) var(--krds-easing);
}

.pop-filter .pophead-filter .pophead-btn_close a:hover{
	background-color: rgba(255, 255, 255, .32);
}

.pop-filter .pophead-filter .pophead-btn_close a:focus-visible{
	outline: 3px solid var(--krds-gray-0);
	outline-offset: 2px;
}

/* 목록 : 2열 유지, 각 항목을 라운드 행으로 */
.pop-filter .pop-filter_list{
	padding: var(--krds-space-3) var(--krds-space-4);
	background: var(--krds-bg-surface);
}

.pop-filter .pop-filter_list li{
	padding: 1px 0;
}

.pop-filter .pop-filter_list li a{
	display: block;
	padding: 7px 10px;
	font-size: 15px;
	color: var(--krds-text-basic);
	border-radius: var(--krds-radius-m);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: background-color var(--krds-duration) var(--krds-easing),
	            color var(--krds-duration) var(--krds-easing);
}

.pop-filter .pop-filter_list li a:hover,
.pop-filter .pop-filter_list li a:focus{
	color: var(--krds-primary-60);
	background-color: var(--krds-primary-5);
	text-decoration: none;
}

/* --- 멀티필터 항목 ------------------------------------------------------
   search/snb.jsp 의 <a class="checkbox-wrap"><i class="check-icon"></i>…</a>
   는 지금까지 CSS 가 전혀 없어 아이콘이 보이지 않았다.
   (실제 input 이 아니라 링크이므로, 체크박스 "모양"만 CSS 로 만든다)
   ※ .snb__filter 높이는 JS 가 지정하고 overflow-y:auto 이므로
     항목이 커져도 스크롤로 흡수된다. */
.snb__filter .snb__filter__list ul li a.checkbox-wrap{
	display: block;
	position: relative;
	padding: 2px 0 2px 22px;
	color: var(--krds-text-basic);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.snb__filter .snb__filter__list ul li a.checkbox-wrap .check-icon{
	position: absolute;
	left: 0;
	top: 4px;
	display: block;
	width: 15px;
	height: 15px;
	background: var(--krds-bg-surface);
	border: 1px solid var(--krds-border-strong);
	border-radius: var(--krds-radius-xs);
	box-sizing: border-box;
}

.snb__filter .snb__filter__list ul li a.checkbox-wrap:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

.snb__filter .snb__filter__list ul li a.checkbox-wrap:hover .check-icon{
	border-color: var(--krds-primary-50);
}

/* 선택 상태 : 체크 표시(모양) + 굵은 글씨 + 색상 (색상 단독 전달 아님) */
.snb__filter .snb__filter__list ul li a.checkbox-wrap.on{
	color: var(--krds-primary-60);
	font-weight: 700;
}

.snb__filter .snb__filter__list ul li a.checkbox-wrap.on .check-icon{
	background: var(--krds-primary-50) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6.8L5.4 9.2 10 4.2'/%3E%3C/svg%3E") no-repeat center;
	border-color: var(--krds-primary-50);
}

/* 선택한 속성 목록의 삭제 링크 */
.snb__filter .snb__filter__selected ul li a{
	color: var(--krds-text-basic);
}

.snb__filter .snb__filter__selected ul li a:hover{
	color: var(--krds-primary-60);
	text-decoration: underline;
}

/* 팝업(layout_pop) : #container/.content 가 없는 구조이므로 흰 배경 유지 */
#wrap.wrap__pop{
	background: var(--krds-bg-surface);
}

/* --- 공통 레이어 팝업 --- */
.pop--fixed{
	border-radius: var(--krds-radius-card);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16);
}

.pop__filter{
	border-color: var(--krds-primary-50);
	border-radius: 0 0 var(--krds-radius-l) var(--krds-radius-l);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16);
}

.pop__filter .pop__filter__head{
	background: var(--krds-primary-50);
}


/* ==========================================================================
   [15] 체크박스 / 라디오 접근성  ★
   --------------------------------------------------------------------------
   common.css / content.css 는 input 을 display:none 으로 감추고 배경이미지
   span.ico 로 상태를 표현한다. display:none 인 요소는 포커스를 받을 수 없어
   키보드만으로는 선택 자체가 불가능했다. (WCAG 2.1.1 Keyboard)

   → display:none 대신 "보이지 않지만 포커스는 받는" 방식으로 전환하고,
     포커스 시 아이콘/칩에 포커스 링을 표시한다.
     position:absolute + opacity:0 이라 레이아웃 공간을 차지하지 않으므로
     기존 배치에는 전혀 영향이 없다. (label 이 감싸고 있어 클릭 동작도 동일)
   ========================================================================== */
.checkbox__wrap,
.checkbox__wrap--small,
.checkbox__wrap--viewer,
.radio__wrap{
	position: relative;
}

.checkbox__wrap input[type="checkbox"],
.checkbox__wrap--small input[type="checkbox"],
.checkbox__wrap--viewer input[type="checkbox"],
.radio__wrap input[type="radio"]{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 17px;
	height: 17px;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* 포커스 링 : 아이콘(span.ico) 또는 필터 칩에 표시 */
.checkbox__wrap input[type="checkbox"]:focus-visible + span.ico,
.checkbox__wrap--small input[type="checkbox"]:focus-visible + span.ico,
.checkbox__wrap--viewer input[type="checkbox"]:focus-visible + span.ico,
.radio__wrap input[type="radio"]:focus-visible + span.ico,
.checkbox__wrap input[type="checkbox"]:focus-visible + .checkbox__wrap--style1{
	outline: var(--krds-focus-width) solid var(--krds-focus);
	outline-offset: var(--krds-focus-offset);
}

.checkbox__wrap input[type="checkbox"]:disabled,
.checkbox__wrap--small input[type="checkbox"]:disabled,
.checkbox__wrap--viewer input[type="checkbox"]:disabled,
.radio__wrap input[type="radio"]:disabled{
	cursor: not-allowed;
}