@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap");

/* ==========================================================================
   공통 레이아웃 (헤더 / 통합검색 레이어 / 푸터)
   --------------------------------------------------------------------------
   시안 : https://honam.figma.site  (메인)
          https://honam.figma.site/category-1  (서브)
          수치는 1920 뷰포트에서 실측한 값 그대로 (배율 1:1)

   로드하는 곳
     · 메인 : layout/head_main.jsp  (reset.css → layout.css → main.css)
     · 서브 : layout/head.jsp       (기존 CSS 뒤에 layout.css → snb.css)

   ★ 서브는 아직 기존 CSS(base/common/content/krds-*)가 같이 로드된다.
     그래서 이 파일에는 전역 리셋을 두지 않고, 모든 셀렉터를 hd- / ft- 접두
     클래스로만 쓴다. 기존 CSS 가 #header 에 거는 규칙(content.css:5
     `#header{height:160px}`, krds-chrome.css:66 `#header{height:130px}`)은
     `#header.hd` (1,1,0) 로 덮는다.

   ★ 서브 헤더 높이 88px 은 layout/header.jsp 의 resizeWindow() 상수와 짝이다.
     HEADER_H = 88 / CONTENT_OFFSET = 78. 높이를 바꾸면 둘 다 고칠 것.

   마크업 : layout/hd_inc.jspf (메인·서브 공용 헤더)
            layout/footer.jsp   (공용 푸터)
   ========================================================================== */

/* 2026-10-22 시트 30 "폰트가 달라 보인다" : 서체는 시안과 같은 Pretendard(실측 동일)인데
   시안(honam.figma.site/category-2)은 antialiased, 서브는 reset.css 를 안 써서 auto 였다.
   macOS 에서 auto 는 글자가 굵고 번져 보인다 → 메인(reset.css)과 같이 맞춘다. 윈도는 변화 없음. */
html{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root{
	--c-black: #000;
	--c-ink: #222;
	--c-gray-6: #666;
	--c-gray-9: #999;
	--c-line: #ddd;
	--c-bg: #f5f5f5;
	--c-accent: #e98813;
	--f-sans: "Pretendard", "Pretendard Variable", "Malgun Gothic", "맑은 고딕", sans-serif;
	--f-serif: "Noto Serif KR", "Nanum Myeongjo", serif;
	/* PC 콘텐츠 폭 1280 (2026-10-20 사용자 지시) : 로고~아이콘, SNB+본문이 1280 폭으로 가운데.
	   남는 폭은 양옆 여백 → --gutter = (화면 - 1280) / 2. 1920 이면 320.
	   단 최소 40 (1280 화면에서 양옆이 딱 붙는다는 지적, 같은 날) → 1360 이상부터 정확히 1280 폭.
	   40 은 태블릿 여백과 같아 1279 ↔ 1280 경계에서 여백이 튀지 않는다.
	   헤더·푸터·메인·검색 머리·서브 틀(snb.css [1])이 전부 이 값 하나로 따라온다.
	   1279 이하는 아래 [4] 에서 40 / 24 로 덮는다. (예전 1920 시안 값은 120 고정이었다) */
	--gutter: max(40px, calc((100vw - 1280px) / 2));
}

.hd-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;
}


/* ==========================================================================
   [1] 헤더
   --------------------------------------------------------------------------
   88px / 좌우 120 / 로고 174x40 (top 24) / 메뉴 16px Bold 흰색, 간격 60
   메뉴는 로고와 아이콘 사이 남는 공간의 가운데 (시안 1889·1409 두 폭에서 확인)
   아이콘 : 검색 22 → 27 → 알림 28 (주황 점 8px)
   서브 = #222 배경 / 메인 = 투명 (히어로 이미지 위)
   ========================================================================== */
#header.hd{
	position: relative;
	z-index: 100;
	width: 100%;
	min-width: 0;
	height: 88px;
	background: #222;
	font-family: var(--f-sans);
}
#header.hd--main{
	position: absolute;
	top: 0; left: 0;
	background: transparent;
}
.hd__inner{
	display: flex;
	align-items: center;
	height: 88px;
	padding: 0 var(--gutter);
	box-sizing: border-box;
}
.hd__logo{
	flex: none;
	margin: 0;
	line-height: 0;
}
.hd__logo a{
	display: block;
	width: 174px;
	height: 40px;
}
.hd__logo img{
	display: block;
	width: 174px;
	height: 40px;
}

.hd__gnb{
	flex: 1;
	display: flex;
	justify-content: center;
}
.hd__gnb ul{
	display: flex;
	gap: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hd__gnb li{
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}
.hd__gnb a{
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.hd__gnb a:after{
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--c-accent);
	transform: scaleX(0);
	transition: transform .2s ease;
}
.hd__gnb a:hover:after,
.hd__gnb a.active:after{
	transform: scaleX(1);
}

.hd__util{
	flex: none;
	display: flex;
	align-items: center;
	gap: 27px;
}
.hd__btn{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.hd__btn--search{
	width: 22px;
}
.hd__btn img{
	display: block;
}
.hd__btn--bell .hd__dot{
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-accent);
}


/* ==========================================================================
   [2] 통합검색 레이어 (서브 헤더의 돋보기 → 펼침)
   --------------------------------------------------------------------------
   시안 서브 헤더에는 검색창이 없고 돋보기 아이콘만 있다.
   기존 헤더의 통합검색(#searchPane/#q_query)을 없앨 수는 없어서 아이콘을
   누르면 헤더 아래로 펼쳐지는 레이어에 넣었다. 검색창 모양은 메인 히어로와 같다.
   ★ #searchPane > #q_query 포함관계는 search.js getTotalQuery() 가 읽는다.
   ========================================================================== */
.hd-search{
	position: absolute;
	top: 88px; left: 0;
	width: 100%;
	padding: 32px var(--gutter) 40px;
	background: #222;
	box-sizing: border-box;
	box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.hd-search[hidden]{
	display: none;
}

/* 검색창 (메인 히어로 / 서브 레이어 공용) */
.sch{
	display: flex;
	justify-content: center;
	gap: 8px;
	font-family: var(--f-sans);
}
.sch__box{
	position: relative;
	display: flex;
	align-items: center;
	width: 509px;
	height: 60px;
	padding: 0 24px;
	background: #fff;
	border-radius: 100px;
	box-sizing: border-box;
}
#header .sch__input,
.sch .sch__input{
	flex: 1;
	min-width: 0;
	width: auto;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 400;
	color: #000;
	outline: none;
	box-shadow: none;
	float: none;
}
.sch .sch__input::placeholder{
	color: var(--c-gray-9);
	opacity: 1;
}
.sch__ime{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 16px;
}
.sch__ime img{
	display: block;
	width: 24px;
	height: 18px;
}
.sch__btn{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: #000;
	cursor: pointer;
}
.sch__btn img{
	display: block;
	width: 19px;
	height: 19px;
}
/* 버튼 글자 "검색"(2026-10-22 시트 32, 원래 Search) 은 메인 히어로 모바일에서만 (main.css [7]) */
.sch__btn-txt{
	display: none;
}


/* ==========================================================================
   [3] 푸터
   --------------------------------------------------------------------------
   검정 / 상하 58·60 / 링크줄 → 53 → 주소 → 10 → 연락처 → 10 → 저작권 → 32 → 문체부 로고
   오른쪽 관련사이트 240x48 알약 (흰 1px 테두리)
   ========================================================================== */
.ft{
	position: relative;
	background: #000;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}
.ft__inner{
	position: relative;
	padding: 58px var(--gutter) 60px;
}
.ft__links{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ft__links li{
	display: flex;
	align-items: center;
}
.ft__links li + li:before{
	content: '';
	display: block;
	width: 1px;
	height: 16px;
	margin: 0 16px 0 15px;
	background: var(--c-line);
}
.ft__links a{
	color: #fff;
	text-decoration: none;
}
.ft__links a:hover{
	text-decoration: underline;
}
.ft__links .is-strong{
	font-weight: 700;
}
.ft__addr{
	margin: 29px 0 0;
	font-style: normal;
}
.ft__contact{
	display: flex;
	gap: 21px;
	margin: 10px 0 0;
	line-height: 19px;
}
.ft__contact dt,
.ft__contact dd{
	display: inline;
	margin: 0;
}
.ft__contact dt{
	color: var(--c-gray-9);
}
.ft__contact a{
	color: #fff;
	text-decoration: none;
}
.ft__copy{
	margin: 11px 0 0;
	color: var(--c-line);
}
.ft__gov{
	display: block;
	margin-top: 32px;
	line-height: 0;
}
.ft__gov img{
	display: block;
	width: 160px;
	height: 32px;
}

/* 관련사이트 */
.ft__related{
	position: absolute;
	top: 60px;
	right: var(--gutter);
	width: 240px;
}
.ft__related__btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 240px;
	height: 48px;
	padding: 0 20px;
	border: 1px solid #fff;
	border-radius: 100px;
	background: transparent;
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-line);
	box-sizing: border-box;
	cursor: pointer;
}
.ft__related__btn img{
	display: block;
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}
.ft__related__btn[aria-expanded="true"] img{
	transform: rotate(180deg);
}
/* 목록은 버튼 위로 펼친다 (푸터가 페이지 맨 아래라 아래로는 공간이 없다) */
.ft__related__list{
	position: absolute;
	left: 0;
	bottom: 56px;
	width: 240px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.24);
	box-sizing: border-box;
}
.ft__related__list[hidden]{
	display: none;
}
.ft__related__list a{
	display: block;
	padding: 8px 20px;
	font-size: 15px;
	color: #000;
	text-decoration: none;
}
.ft__related__list a:hover{
	background: var(--c-bg);
}


/* ==========================================================================
   [4] 반응형 — 시안 브레이크포인트 그대로 : 태블릿 800~1279 / 모바일 ~799
   --------------------------------------------------------------------------
   시안 실측 (1024 · 390 뷰포트)
     · 여백 : 태블릿 40 / 모바일 24  (--gutter 만 바꾸면 헤더·푸터·본문이 같이 따라온다)
     · 헤더 : 태블릿 82 / 모바일 62, 로고 148x34, 1뎁스 메뉴 숨김 → 햄버거(20x18)
              아이콘 간격 27·28 그대로
     · 푸터 : 태블릿부터 링크 줄바꿈, 연락처 세로, 관련사이트 버튼이 본문 흐름으로(로고는 오른쪽)
              모바일은 관련사이트 가로 꽉 + 로고가 그 아래 (2026-10-15 Tablet/Mobile.jpg)
   햄버거 패널은 시안에 없다 → 헤더와 같은 #222 위에 메뉴를 세로로 편다.
   토글 : hd_inc.jspf hdToggleMenu() 가 #header 에 is-menu-open 을 붙인다.
   ========================================================================== */
.hd__btn--menu{
	display: none;
	width: 24px;
}
.hd__btn--menu .hd__ico-close{
	display: none;
}

@media screen and (max-width: 1279px){
	:root{
		--gutter: 40px;
		--hd-h: 82px;
	}
	#header.hd,
	.hd__inner{
		height: var(--hd-h);
	}
	.hd__logo a,
	.hd__logo img{
		width: 148px;
		height: 34px;
	}
	.hd__util{
		margin-left: auto;
		gap: 27px;
	}
	.hd__btn--menu{
		display: flex;
	}

	/* 1뎁스 메뉴 → 헤더 아래 패널 */
	.hd__gnb{
		display: none;
		position: absolute;
		top: var(--hd-h);
		left: 0;
		width: 100%;
		background: #222;
		border-top: 1px solid rgba(255,255,255,.12);
		box-shadow: 0 12px 24px rgba(0,0,0,.18);
	}
	.hd.is-menu-open .hd__gnb{
		display: block;
	}
	.hd.is-menu-open,
	#header.hd--main.is-menu-open{
		background: #222;
	}
	.hd.is-menu-open .hd__ico-open{
		display: none;
	}
	.hd.is-menu-open .hd__ico-close{
		display: block;
	}
	.hd__gnb ul{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		padding: 12px var(--gutter) 20px;
	}
	.hd__gnb a{
		padding: 14px 0;
	}
	.hd__gnb a:after{
		bottom: 8px;
		right: auto;
		width: 24px;
	}

	.hd-search{
		top: var(--hd-h);
		padding: 24px var(--gutter) 32px;
	}

	/* 푸터 (시안 Tablet.jpg) : 상하 40 / 링크 → 32 → 주소 → 연락처 세로 → 저작권 → 40 →
	   [관련사이트 240x48 (왼쪽) · 문체부 로고 (오른쪽, 버튼과 가운데 맞춤)] */
	.ft__inner{
		display: flex;
		flex-direction: column;
		padding: 40px var(--gutter);
	}
	.ft__links{
		flex-wrap: wrap;
		gap: 8px 12px;
	}
	/* 구분선을 항목 뒤에 붙인다 — 줄이 바뀌면 시안처럼 윗줄 끝에 남고 새 줄은 글자로 시작 */
	.ft__links li + li:before{
		display: none;
	}
	.ft__links li:not(:last-child):after{
		content: '';
		display: block;
		width: 1px;
		height: 16px;
		margin-left: 12px;
		background: var(--c-line);
	}
	.ft__addr{
		margin-top: 32px;
	}
	.ft__contact{
		flex-direction: column;
		gap: 13px;
		margin-top: 10px;
	}
	.ft__copy{
		margin-top: 11px;
	}
	.ft__related{
		order: 1;
		position: relative;
		top: auto;
		right: auto;
		margin-top: 40px;
	}
	.ft__gov{
		position: absolute;
		right: var(--gutter);
		bottom: 48px;
		margin: 0;
	}
}

@media screen and (max-width: 799px){
	:root{
		--gutter: 24px;
		--hd-h: 62px;
	}
	.hd__gnb ul{
		grid-template-columns: repeat(2, 1fr);
	}

	/* 검색창 : 가로 꽉 / 높이 52 */
	.sch__box{
		flex: 1;
		width: auto;
		min-width: 0;
		height: 52px;
		padding: 0 20px;
	}
	#header .sch__input,
	.sch .sch__input{
		height: 52px;
		font-size: 14px;
	}
	.sch__btn{
		width: 52px;
		height: 52px;
	}

	/* 푸터 : 관련사이트 가로 꽉, 문체부 로고는 그 아래 (시안 Mobile.jpg) */
	.ft__related{
		width: auto;
	}
	.ft__related__btn,
	.ft__related__list{
		width: 100%;
	}
	.ft__gov{
		order: 2;
		position: static;
		align-self: flex-start;
		margin-top: 24px;
	}
}


/* ==========================================================================
   [5] 검색 히어로 — 통합검색 화면(search/group.do · list.do) 머리 (시안 _search_results_01/02, 2026-10-15)
   --------------------------------------------------------------------------
   마크업 : layout/hd_inc.jspf 의 hdHero 분기 (header.jsp 가 /search/ 주소일 때 켠다)
            <div class="hd-hero"> 안에 투명 헤더(hd--main) + 제목 + 검색창(.sch, 메인 히어로와 같은 부품)
            ★ #searchPane > #q_query 는 이 히어로에 한 벌만 — 헤더 아래 검색 레이어(.hd-search)는 만들지 않는다
   시안 실측 : PC·태블릿 352 고정, 제목 20/28 명조 흰색 (위 145) → 32 → 검색창 508x60 + 버튼 60
               모바일 : 제목 두 줄(20/26, 위 94) → 28 → 입력칸 52 / [상세 검색 120][검색 나머지] 52 한 줄, 좌우 16, 아래 52 (2026-10-30 시트 48)
   ========================================================================== */
/* 배경 : 2026-11-02 시안 '검색결과 배너' (서고 + 호남 지도) — PC 2560x704 / 태블릿 1600x704 / 모바일 750x676 (@2x)
   그림에 어둡게 처리가 이미 들어가 있다(시안 화면과 픽셀 같음) → 예전 검정 40% 덮개(:before)는 뺐다 */
.hd-hero{
	position: relative;
	height: 352px;
	background: #222 url('../images/search-hero-pc.jpg') no-repeat center / cover;
	font-family: var(--f-sans);
}
@media screen and (max-width: 1279px){
	.hd-hero{
		background-image: url('../images/search-hero-ta.jpg');
	}
}
.hd-hero__body{
	position: relative;
	padding: 145px var(--gutter) 0;
	text-align: center;
}
.hd-hero__tit{
	margin: 0;
	font-family: var(--f-serif);
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	color: #fff;
}
.hd-hero__br{
	display: none;
}
.hd-hero .sch{
	margin-top: 32px;
}
.hd-hero .sch__box{
	width: 508px;
}
/* 서브 화면은 예전 공용 CSS(input 테두리·안쪽 여백)가 같이 로드된다 → id 로 덮는다 */
.hd-hero #q_query.sch__input{
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px;
	color: #000;
}

@media screen and (max-width: 799px){
	.hd-hero{
		height: auto;
		padding-bottom: 52px;
		background-image: url('../images/search-hero-mo.jpg');
	}
	.hd-hero__body{
		padding: 94px 16px 0;
	}
	.hd-hero__tit{
		line-height: 26px;
	}
	.hd-hero__br{
		display: inline;
	}
	/* 검색창 한 줄 → 아래 줄 [상세 검색 120 (이 파일 [8])][검색 나머지] (메인과 같은 배치, 2026-10-30 시트 48) */
	.hd-hero .sch{
		flex-flow: row wrap;
		gap: 8px;
		margin-top: 28px;
	}
	.hd-hero .sch__box{
		flex: none;
		width: 100%;
	}
	.hd-hero .sch__btn{
		order: 2;
		flex: 1;
		gap: 13px;
		width: auto;
	}
	.hd-hero #q_query.sch__input{
		height: 52px;
		font-size: 14px;
	}
	.hd-hero .sch__btn-txt{
		display: block;
		font-size: 14px;
		line-height: 20px;
		font-weight: 700;
		color: #fff;
	}
}


/* ==========================================================================
   [6] 문자입력기 레이어 (common.js openWebime / closeWebime) — 2026-10-15 새 창 → 레이어
   --------------------------------------------------------------------------
   화면 전체를 덮는 투명 iframe 만 둔다. 어두운 바탕 · 가운데 카드 · 바깥 클릭 닫기는
   iframe 안의 webime 페이지가 그린다 (ime.css [11] html.is-layer)
   ========================================================================== */
/* 열기 : is-open(자리) → is-shown(덮개 페이드인) → is-ready(webime 가 다 그린 뒤 카드 페이드인 + 살짝 올라옴)
   닫기 : is-ready · is-shown 을 빼서 페이드아웃 → .2s 뒤 is-open 해제 (common.js) */
.ime-layer{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: rgba(0,0,0,.6);
	opacity: 0;
	transition: opacity .2s ease;
}
.ime-layer.is-open{
	display: block;
}
.ime-layer.is-shown{
	opacity: 1;
}
.ime-layer iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	color-scheme: normal;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .2s ease, transform .25s ease;
}
.ime-layer.is-ready iframe{
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.ime-layer,
	.ime-layer iframe{
		transition: none;
	}
}
html.is-ime-open,
html.is-ime-open body{
	overflow: hidden;
}


/* ==========================================================================
   [7] 로딩 (jquery.blockUI) — 2026-10-23 시안 /loading_size + 모션 loading_2.svg → 2026-10-28 loading_2_1027_fade.svg → 2026-10-30 loading_2_1028_brush.svg (시트 57)
   --------------------------------------------------------------------------
   그림 : /resources/style/images/loading.svg (시안 loading_2_1028_brush.svg 그대로 — 1초 반복, 가운데서 나선을 따라 붓으로 그리듯 드러난 뒤 페이드)
   붙는 곳 : head.jsp · head_main.jsp 가 $.blockUI.defaults 의 message · blockMsgClass(hk-loading) 를 바꾼다.
            부르는 곳은 카테고리 트리 이동(munjung/snb.jsp loadAjaxData) — 예전 busy.gif 대신
   · 덮개 : 시안 회색 #C6C6C6 = 흰 화면 위 검정 22%
   · 로고 폭 : PC 187(SVG 원래 크기) · 태블릿 165 · 모바일 133 (시안 캡처 실측)
   · SVG 는 위로 점이 떨어질 자리(-80)를 품고 있어 상자(viewBox y -80~200) 가운데 ≠ 로고 가운데.
     로고(점 위 ~ 소용돌이 아래, viewBox y 0~185)의 가운데가 화면 가운데에 오도록 -61.6% 올린다 ((80+92.5)/280)
   ★ common.css:247 의 예전 검은 상자(div.blockUI.blockMsg 200x100)를 클래스 하나 더 붙여 덮는다
   ========================================================================== */
div.blockUI.blockOverlay{
	background: rgba(0,0,0,.22);
	opacity: 1;
	cursor: wait;
}
div.blockUI.blockMsg.hk-loading{
	left: 50%;
	top: 50%;
	width: 187px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	opacity: 1;
	transform: translate(-50%, -61.6%);
	pointer-events: none;
}
div.blockUI.blockMsg.hk-loading img{
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 1279px){
	div.blockUI.blockMsg.hk-loading{
		width: 165px;
	}
}
@media (max-width: 799px){
	div.blockUI.blockMsg.hk-loading{
		width: 133px;
	}
}


/* ==========================================================================
   [8] 상세검색 — 검색창 옆 버튼(.sch__dtl) + 레이어(layout/sch_detail.jspf)
   --------------------------------------------------------------------------
   2026-10-23 처음 (시안 없이 사이트 문법) → 2026-10-28 시안 반영
     메인 버튼 : 메인/{Desktop,Tablet,Mobile}.jpg — PC·태블릿 60 검정 원 "상세/검색" 두 줄 14/18,
                 모바일 120x52 검정 알약 "상세 검색" + 검색 버튼과 한 줄
     레이어   : 상세 검색 팝업/Position+hover.jpg (@2x) — 960 폭 · 모서리 20 · 머리 80 검정 · 안쪽 40
                 칸 48(모서리 6, 1px 검정) · 항목 120 + 12 + 검색어 · 줄 간격 12 · 버튼 80x50 닫기/검색 가운데
                 항목 고르기 = 직접 그린 목록(120 폭, 1px #cdd0d5, 줄 40, 고른 것·hover 굵게). 값은 숨긴 select 에 둔다
   2026-10-30 시트 48 : 검색결과 히어로 · 서브 GNB 검색 레이어도 메인과 같은 검정 원 (검색결과/{Desktop,Tablet,Mobile}.jpg)
                        + 검색결과 히어로의 검색 버튼만 주황 원(--c-accent). 모바일 히어로는 메인처럼 [상세 검색 120][검색 나머지] 한 줄
   2026-11-02 사용자 : 서브 GNB 검색 레이어(.hd-search) 검색 버튼은 메인과 같은 검정 — 주황은 검색결과 히어로만
   ★ 서브 화면은 예전 공용 CSS(select · input 테두리·높이)가 같이 로드된다 → #schDtl 로 덮는다
   ========================================================================== */
/* 버튼 : 60 검정 원, "상세/검색" 두 줄 (메인 · 검색결과 히어로 · 서브 검색 레이어 공용) */
.sch__dtl{
	flex: none;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	font-family: var(--f-sans);
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.sch__dtl:hover,
.sch__dtl:focus-visible{
	background: #333;
}
/* 검색 버튼 : 검색결과 히어로만 주황 원 (메인 · 서브 GNB 검색 레이어는 검정 그대로) */
.hd-hero .sch__btn{
	background: var(--c-accent);
	transition: background .15s ease;
}
.hd-hero .sch__btn:hover,
.hd-hero .sch__btn:focus-visible{
	background: #d17708;
}

/* 레이어 */
html.is-sd-open,
html.is-sd-open body{
	overflow: hidden;
}
.sd-layer{
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	padding: 24px;
	box-sizing: border-box;
	overflow-y: auto;
	font-family: var(--f-sans);
}
.sd-layer[hidden]{
	display: none;
}
.sd-dim{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
}
/* 목록이 팝업 아래로 넘쳐도 보이게 overflow 는 두지 않는다 (머리 모서리는 머리에 따로) */
.sd-pop{
	position: relative;
	width: 960px;
	max-width: 100%;
	margin: auto;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.sd-pop__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 80px;
	padding: 0 40px;
	border-radius: 20px 20px 0 0;
	background: #000;
	box-sizing: border-box;
}
.sd-pop__tit{
	margin: 0;
	padding: 0;
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	color: #fff;
}
.sd-pop__close{
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	margin-right: -4px;
	padding: 0;
	border: 0;
	background: url(../images/ico-close-w-24.svg) no-repeat center / 24px 24px;
	cursor: pointer;
}
.sd-pop__body{
	padding: 40px;
}
.sd-row{
	display: flex;
	gap: 12px;
}
.sd-row + .sd-row{
	margin-top: 12px;
}

/* 항목 고르기 */
.sd-sel{
	position: relative;
	flex: none;
	width: 120px;
}
#schDtl .sd-sel__btn{
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 44px 0 20px;
	border: 1px solid #000;
	border-radius: 6px;
	background: #fff url('../images/ico-select-down.svg') no-repeat right 20px center / 16px 16px;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	text-align: left;
	white-space: nowrap;
	box-sizing: border-box;
	cursor: pointer;
}
.sd-sel__list{
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 2;
	width: 100%;
	margin: 0;
	padding: 7px 0;
	border: 1px solid #cdd0d5;
	border-radius: 6px;
	background: #fff;
	list-style: none;
	box-sizing: border-box;
}
.sd-sel__list[hidden]{
	display: none;
}
#schDtl .sd-sel__opt{
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	background: none;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	text-align: left;
	cursor: pointer;
}
#schDtl .sd-sel__opt[aria-selected="true"],
#schDtl .sd-sel__opt:hover,
#schDtl .sd-sel__opt:focus-visible{
	font-weight: 700;
}

#schDtl .sd-row__val{
	flex: 1;
	min-width: 0;
	width: auto;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 6px;
	background: #fff;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	color: #000;
	box-shadow: none;
	box-sizing: border-box;
	outline: none;
	float: none;
}
#schDtl .sd-row__val:focus{
	box-shadow: inset 0 0 0 1px #000;
}
#schDtl .sd-row__val::placeholder{
	color: #989898;
	opacity: 1;
}
.sd-pop__foot{
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 12px;
}
.sd-btn{
	width: 80px;
	height: 50px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	border-radius: 6px;
	background: #fff;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
	cursor: pointer;
}
.sd-btn:hover{
	background: #f5f5f5;
}
.sd-btn--go{
	background: #000;
	color: #fff;
}
.sd-btn--go:hover{
	background: #333;
}

@media screen and (max-width: 799px){
	/* 서브 검색 레이어 : 검색창 · 검색 버튼이 52 → 원도 52 */
	.sch__dtl{
		width: 52px;
		height: 52px;
	}
	/* 메인 · 검색결과 히어로 모바일 : 검색창 아래 [상세 검색 120][검색 나머지] 한 줄
	   (줄바꿈 · 검색 버튼은 main.css [7] · 이 파일 [5]) */
	.mn-hero .sch__dtl,
	.hd-hero .sch__dtl{
		order: 1;
		width: 120px;
		height: 52px;
		border-radius: 100px;
		line-height: 20px;
		white-space: nowrap;
	}
	.mn-hero .sch__dtl-br,
	.hd-hero .sch__dtl-br{
		display: none;
	}
	.sd-layer{
		padding: 16px;
	}
	.sd-pop{
		border-radius: 12px;
	}
	.sd-pop__head{
		height: 60px;
		padding: 0 20px;
		border-radius: 12px 12px 0 0;
	}
	.sd-pop__tit{
		font-size: 20px;
		line-height: 28px;
	}
	.sd-pop__body{
		padding: 24px 20px;
	}
	.sd-row{
		gap: 8px;
	}
	.sd-row + .sd-row{
		margin-top: 8px;
	}
	.sd-sel{
		width: 96px;
	}
	#schDtl .sd-sel__btn{
		padding: 0 32px 0 12px;
		background-position: right 12px center;
	}
	#schDtl .sd-sel__opt{
		padding: 0 12px;
	}
	#schDtl .sd-row__val{
		padding: 0 12px;
		font-size: 16px;	/* iOS 포커스 자동확대 방지 (16 미만이면 확대) */
	}
	.sd-btn{
		flex: 1;
		max-width: 120px;
	}
}