@charset "utf-8";
/* =========================================================
   공통 헤더 (디자인 개편)
   - 대상 마크업 : /resources/templates/front/layouts/Header.jsp
   - style.css 다음에 로드해서 기존 #header 규칙을 덮어쓴다.
   - commonUI.js 가 쓰는 클래스는 그대로 두고 표현만 바꾼다.

   [구조 메모]
   기존 템플릿은 데스크탑 GNB 를 .lib_nav 로, 모바일 로고바를 .gnb-wrap 으로 쓴다.
   (style.css 109줄 : .gnb-wrap{display:none} / 809줄 : 992px 이하에서 display:block)
   개편에서도 그 역할 분담을 그대로 따른다.
     데스크탑 : .util-wrap + .lib_nav
     모바일   : .gnb-wrap (로고 + 햄버거) + .m-gnb-area
   ========================================================= */

:root{
	--header-util-h: 34px;
	--header-gnb-h: 62px;
	--header-h: 98px;			/* util + gnb. main.css 의 섹션 오프셋이 이 값을 쓴다 */
	--header-line: #e8e8e8;
	--header-text: #1f1f1f;
	--header-sub: #6d6d6d;
	--header-point: #33302b;
}

/* position/left/top/width/z-index 는 style.css #header 와 값까지 같아 생략 */
#header{background-color:#fff;}

/* 메인 첫 화면(사진 위) : 헤더 바탕을 비운다 (데스크톱만, 메인 body.hd-on-visual).
   헤더에 마우스를 올리거나(대구도서관 방식), 메가메뉴가 열리거나(.is-open), 키보드 포커스가 들어오면
   흰 바탕 + 원래 색으로 돌아온다.
   비운 상태에선 반전 로고(logo_white.png)와 흰 글자를 쓴다.
   ※ 계절 사진 윗부분이 밝아 흰 글자 대비가 낮다 (2026-10 측정 1.0~2.2:1). 그림자로 보완만 한다.
   서브페이지는 내용이 헤더 밑으로 지나가므로 계속 흰색이다. */
/* 아래 .lib_logo a img{display:block} 보다 우선해야 해서 같은 선택자로 쓴다 */
#header .lib_nav .inner .lib_logo a img.logo-reverse{display:none;}
@media screen and (min-width:1025px){
	#header{transition:background-color .25s;}
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within){background-color:transparent;}
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .lib_nav .inner > ul > li > a,
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .util-menu li,
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .util-menu li .name,
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .util-menu li.cnt span{color:#fff;text-shadow:0 1px 3px rgba(0, 0, 0, .45);}
	/* 로그인/회원가입은 아이콘이 배경그림이라 링크째 흰색으로 뒤집는다 (글자도 흰색이 된다) */
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .util-menu li a{color:#111;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .5));text-shadow:none;}
	/* 로고 : 반전 로고 파일이 있을 때만 바꾼다 (없으면 a.no-reverse 가 붙어 원래 로고 유지) */
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .lib_logo a:not(.no-reverse) .logo-default{display:none;}
	body.hd-on-visual #header:not(:hover):not(.is-open):not(:focus-within) .lib_logo a:not(.no-reverse) .logo-reverse{display:block;}
}

/* =========================================================
   상단 유틸
   ========================================================= */
#header .util-wrap{width:100%;padding:0;}
#header .util-wrap .inner{padding-top: 10px; padding-bottom: 10px;}
#header .util-wrap .util-left{width:auto;}
#header .util-wrap .util-right{display:flex;align-items:center;justify-content: end;}

/* 통합웹검색은 시안에 없어 데스크탑에서는 감추고 모바일 검색 패널에서만 노출한다 */
#header .util-wrap .util-left .sch-wrap{display:none;}
/* commonUI.js 가 데스크탑 복귀 시 이 앵커 앞으로 검색창을 되돌린다. 지우면 안 된다 */
#header .util-wrap .sns-list{display:none;width:auto;float:none;margin:0;padding:0;}

#header .util-menu{float:none;display:flex;align-items:center;margin:0 12px 0 0;}
#header .util-menu li{float:none;margin:0 0 0 16px;padding:0;font-size:1rem;line-height:1;color:var(--header-sub);}
#header .util-menu li:first-child{margin-left:0;}
#header .util-menu li:before{display:none;}
#header .util-menu li a{font-size:1rem;color:var(--header-sub);letter-spacing:-0.03em;}
#header .util-menu li a:hover,
#header .util-menu li a:focus{color:var(--header-text);text-decoration:underline;}
#header .util-menu li.user{color:var(--header-sub);}
#header .util-menu li.user .name{font-weight:700;color:var(--header-text);}
#header .util-menu li.cnt span{font-weight:700;color:var(--header-text);}

/* 로그인 / 회원가입 아이콘 (assets/images/ico/)
   style.css 94줄의 .util-menu li.login a:before (ico_lock.png) 가 남아 있으면
   옛 자물쇠 아이콘이 겹쳐 보이므로 pseudo 를 명시적으로 죽인다. */
#header .util-menu li.login > a:before,
#header .util-menu li.login > a:after,
#header .util-menu li.join > a:before,
#header .util-menu li.join > a:after{content:none;display:none;background:none;}

#header .util-menu li.login > a,
#header .util-menu li.join > a{
	display:inline-block;position:relative;padding-left:24px;
	background-position:left center;background-repeat:no-repeat;background-size:20px;
}
#header .util-menu li.login > a{background-image:url(../images/ico/ico_login.svg);}
#header .util-menu li.join  > a{background-image:url(../images/ico/ico_join.svg);}


/* =========================================================
   데스크탑 로고 + GNB (.lib_nav)
   ========================================================= */
/* 구형 submenu-wrap 은 lib_nav(메가메뉴)로 대체됐다.
   commonUI.js 가 모바일 메뉴 복제 소스로 참조하므로 DOM 은 남기고 화면에서만 뺀다.
   slideDown 으로 인라인 display 가 들어와도 보이지 않게 visibility 까지 끈다. */
#header .submenu-wrap{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;visibility:hidden;}

/* style.css 의 .lib_nav 배경색을 걷어낸다.
   position:relative : 메가메뉴 패널(.gnb-panel)이 .lib_nav 아래에 화면 전체 폭으로 깔리는 기준점 */
#header .lib_nav{
	position:relative;height:auto;background:transparent;
	--gnb-promo-w:408px;	/* 왼쪽 홍보 칸 폭 (카드 348 + 오른쪽 여백 60) */
	--gnb-gap:60px;			/* 홍보 칸 경계 ~ 2뎁스 시작 */
	--gnb-edge:30px;		/* .inner 본문 시작 ~ 로고 왼쪽 (li 패딩). 패널 내용을 로고 선에 맞춘다 */
}
/* style.css 의 전역 .over{cursor:pointer} 가 열린 .lib_nav / .gnb-panel 에 붙어 패널 빈 곳까지 손가락 커서가 된다. 기본값으로 되돌린다 */
#header .lib_nav.over,
#header .lib_nav .gnb-panel.over{cursor:auto;}
/* 패널 기준을 .lib_nav 로 올리기 위해 중간 요소의 position 을 푼다 */
#header .lib_nav .inner{position:static;}
#header .lib_nav .inner > ul{display:flex;align-items:center;margin:0 auto;text-align:left;}
#header .lib_nav .inner > ul > li{float:none;display:block;width:auto;position:static;padding: 0 30px;}
#header .lib_nav .inner > ul > li.lib_logo{margin:0 auto 0 0;}

#header .lib_nav .inner .lib_logo{width:auto;}
#header .lib_nav .inner .lib_logo h1{width:auto;position:static;transform:none;}
#header .lib_nav .inner .lib_logo a{padding:0;display:flex;align-items:center;height:var(--header-gnb-h);border:0;}
#header .lib_nav .inner .lib_logo a img{display:block;height:34px;width:auto;}

#header .lib_nav .inner > ul > li > a{
	display:block;width:auto;padding:0;
	font-family: 'EliceDigitalBold', Sans-serif;
	font-size:22px;color:var(--header-text);letter-spacing:-0.04em;
	line-height:var(--header-gnb-h);white-space:nowrap;position:relative;
}
/* 열린 1뎁스 : 주요색 글자 + 아래 막대 */
#header .lib_nav .inner > ul > li:not(.lib_logo):not(.lib_sitemap) > a:after{
	content:'';position:absolute;left:-10px;right:-10px;bottom:0;width:auto;height:3px;
	background:var(--season-point);transform:scaleX(0);transition:transform .2s;
}
#header .lib_nav .inner > ul > li > a.click{color:var(--season-point);}
#header .lib_nav .inner > ul > li > a.click:after{transform:scaleX(1);}

/* 사이트맵 버튼 : 메뉴줄 맨 오른쪽. 3줄 아이콘은 CSS 로 그린다 (글자색을 따른다). 이름은 안의 .hidden "사이트맵" */
#header .lib_nav .inner > ul > li.lib_sitemap{padding-right:0;}
#header .lib_nav .inner > ul > li.lib_sitemap > a{
	display:flex;align-items:center;justify-content:center;
	width:44px;height:44px;border-radius:50%;line-height:normal;
	transition:background-color .2s, color .2s;
}
#header .lib_nav .inner > ul > li.lib_sitemap > a:before{
	content:'';width:22px;height:2px;border-radius:1px;
	background:currentColor;box-shadow:0 -7px 0 currentColor, 0 7px 0 currentColor;
}
#header .lib_nav .inner > ul > li.lib_sitemap > a:hover,
#header .lib_nav .inner > ul > li.lib_sitemap > a:focus-visible{
	background:rgba(var(--season-key-rgb, 30, 71, 120), .08);color:var(--season-point);
}
#header .lib_nav .inner > ul > li.lib_sitemap > a:focus-visible{outline:2px solid var(--season-point);outline-offset:2px;}

/* ---- 메가메뉴 패널 ----
   흰 바탕 한 장. 왼쪽 홍보 칸(.gnb-promo)은 감췄다 (마크업은 Header.jsp 에 남아 있다 → 되살릴 때 아래 display:none 만 지운다) */
#header .lib_nav .gnb-panel{display:none;}
#header .lib_nav .gnb-panel.over{
	display:block;position:absolute;left:0;right:0;top:100%;z-index:10;
	background:#fff;
	/* 하위 메뉴가 많아(나의도서관 등) 화면보다 길어지면 패널 안에서 스크롤한다. 헤더는 fixed 라 페이지 스크롤로는 볼 수 없다 */
	max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;
	border-top:1px solid #E0DEDE;
	box-shadow:0 12px 24px rgba(0,0,0,.08);
}
/* 왼쪽 아래 장식 그림 */
#header .lib_nav .gnb-panel.over:before{
	content:'';position:absolute;left:0;bottom:0;width:240px;height:240px;
	background:url(../images/common/menu_bg.png) right bottom no-repeat;
	opacity:.4;pointer-events:none;
}
#header .lib_nav .gnb-panel-in{
	position:relative;z-index:1;
	display:grid;grid-template-columns:minmax(0, 1fr);align-items:start;
	max-width:calc(1440px + 40px);margin:0 auto;padding:30px calc(20px + var(--gnb-edge));box-sizing:border-box;
}

/* 왼쪽 홍보 칸 : 지금은 쓰지 않는다 (화면에서 뺌) */
#header .lib_nav .gnb-promo{display:none;grid-column:1;grid-row:1;padding-right:var(--gnb-gap);}
#header .lib_nav .gnb-copy{
	margin:0 0 20px;font-size:20px;line-height:1.5;color:#333; font-family: 'EliceDigital', Sans-serif;
	text-align:center;letter-spacing:-0.03em;word-break:keep-all;
}
#header .lib_nav .gnb-copy strong{font-weight:700;color:var(--season-point);}
#header .lib_nav .gnb-card{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:20px;background:#fff;
	border:1px solid #E0DEDE;border-radius:8px;transition:border-color .15s;
}
#header .lib_nav .gnb-card + .gnb-card{margin-top:16px;}
#header .lib_nav .gnb-card .txt{min-width:0;}
#header .lib_nav .gnb-card .tit{display:block;font-size:20px;font-weight:700;line-height:1.4;color:var(--season-point);}
#header .lib_nav .gnb-card .desc{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:#555;}
/* 아이콘 원 : 계절 대표색 5% (서브 페이지는 data-season 이 없어 기본 #1E4778 5%) */
#header .lib_nav .gnb-card .ico{
	flex:0 0 68px;height:68px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:rgba(var(--season-key-rgb, 30, 71, 120), .05);
}
/* 아이콘 : ico_menu_*.svg 는 한 색(#1E4778)이라 모양만 mask 로 쓰고 계절 대표색으로 칠한다 (반투명 부분은 그대로 반투명) */
#header .lib_nav .gnb-card .ico:before{
	content:'';display:block;
	background:var(--season-key, #1E4778);
	-webkit-mask:var(--gnb-ico) center / contain no-repeat;
	        mask:var(--gnb-ico) center / contain no-repeat;
}
#header .lib_nav .gnb-card.is-tour .ico:before{--gnb-ico:url(../images/ico/ico_menu_tour.svg);width:41px;height:26px;}
#header .lib_nav .gnb-card.is-app .ico:before{--gnb-ico:url(../images/ico/ico_menu_app.svg);width:32px;height:36px;}
#header .lib_nav .gnb-card.is-locker .ico:before{--gnb-ico:url(../images/ico/ico_menu_locker.svg);width:36px;height:36px;}
#header .lib_nav .gnb-card:hover,
#header .lib_nav .gnb-card:focus-visible{border-color:var(--season-point);}
#header .lib_nav .gnb-card:hover .tit,
#header .lib_nav .gnb-card:focus-visible .tit{text-decoration:underline;text-underline-offset:3px;}

/* 오른쪽 2뎁스 : 3열 박스 */
#header .lib_nav .gnb-d2{
	grid-column:1;grid-row:1;
	display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:24px;align-items:start;	/* 한 줄 5칸 (1400px 이하 4칸) */
	margin:0;padding:0;
}
#header .lib_nav .gnb-d2 > li{margin:0;}
#header .lib_nav .gnb-d2 > li > a{
	display:flex;align-items:center;min-height:50px;padding:12px 16px;box-sizing:border-box;
	background:#fff;border:1px solid #E0DEDE;border-radius:8px;
	font-size:18px;line-height:1.3;color:#333;letter-spacing:-0.02em;word-break:keep-all;
	transition:border-color .15s, background-color .15s, color .15s;
}
#header .lib_nav .gnb-d2 > li > a:hover,
#header .lib_nav .gnb-d2 > li > a:focus-visible{
	/* 계절 색 그라디언트 (서브 페이지 기본 1, 64, 153) */
	background: linear-gradient(90deg, rgba(var(--season-gnb-rgb, 1, 64, 153), 0.00) 0%, rgba(var(--season-gnb-rgb, 1, 64, 153), 0.05) 100%);
	border-color:var(--season-point);color:var(--season-point);
}

/* 3뎁스 : 박스 아래 점 목록 */
#header .lib_nav .gnb-d3{margin:12px 0 0;padding:0 0 0 8px;}
#header .lib_nav .gnb-d3 > li + li{margin-top:4px;}
#header .lib_nav .gnb-d3 a{
	position:relative;display:inline-block;padding-left:12px;
	font-size:16px;line-height:1.5;color:#666;
}
#header .lib_nav .gnb-d3 a:before{
	content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
	width:3px;height:3px;border-radius:50%;background:#999;
}
#header .lib_nav .gnb-d3 a:hover,
#header .lib_nav .gnb-d3 a:focus-visible{color:var(--season-point);text-decoration:underline;text-underline-offset:3px;}

#header .lib_nav .gnb-panel a:focus-visible{outline:2px solid var(--season-point);outline-offset:2px;}

/* =========================================================
   모바일 (992px 이하) : .gnb-wrap 이 로고바 역할
   ========================================================= */
/* 1depth 메뉴가 들어갈 자리를 만든다.
   li 마다 style.css 의 padding:0 30px 이 붙어 7개면 420px 을 먹는다.
   데스크톱 기본값(글자 22px)은 폭 1399px 이 필요해서 뷰포트 약 1454px 부터 잘린다.
   그래서 첫 단계를 1470px 에서 시작했었다. 추가 구간은 1800 / 1400 으로 통일한다 (더 넓은 폭부터 줄이므로 잘리지 않는다).
   간격은 margin 을 0 으로 두고 li 의 좌우 패딩으로만 준다. */
@media screen and (max-width:1800px){
	#header .lib_nav{--gnb-edge:20px;}
	#header .lib_nav .inner > ul{width:100%;padding:0 20px;box-sizing:border-box;}
	#header .lib_nav .inner > ul > li{margin-left:0;padding:0 16px;}
	#header .lib_nav .inner > ul > li > a{font-size:20px;}
	/* style.css 는 .lib_logo 에 width:317px(≤1200 은 265px) 와 padding:0 30px 을 고정해 둔다.
	   로고 이미지는 height 로만 크기를 잡으므로 그 고정값과 어긋나 잘린다.
	   폭은 내용에 맡기고 높이로만 줄인다. */
	#header .lib_nav .inner .lib_logo{width:auto;flex:0 0 auto;padding:0;}
	#header .lib_nav .inner .lib_logo a img{height:32px;width:auto;max-width:none;}
}

@media screen and (max-width:1400px){
	#header .lib_nav .inner > ul > li{padding:0 12px;}
	#header .lib_nav .inner > ul > li > a{font-size: 18px;}
	#header .lib_nav .inner .lib_logo a img{height:26px;}
	#header .lib_nav{--gnb-promo-w:360px;--gnb-gap:30px;}
	#header .lib_nav .gnb-copy{font-size:18px; margin: 0 0 16px;}
	#header .lib_nav .gnb-d2{grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;}
	#header .lib_nav .gnb-panel-in {padding: 20px calc(20px + var(--gnb-edge));}
	#header .lib_nav .gnb-card + .gnb-card {margin-top: 12px;}
	#header .lib_nav .gnb-d2 > li > a {padding: 8px 12px; font-size: 16px;}
	#header .lib_nav .gnb-d3 a {font-size: 15px;}
	#header .lib_nav .gnb-card .tit {font-size: 18px;}
}

/* 모바일 헤더 전환 : 프로젝트 기준 1024px.
   style.css 는 992px 에서 전환하는데, 메인 반응형이 1024px 이라
   993~1024 구간에서 데스크톱 메가메뉴(.lib_nav)가 남아 가로로 넘쳤다.
   header.css 는 style.css 다음에 로드되므로 여기서 앞당기면 된다. */
@media screen and (max-width:1024px){
	/* ---- 모바일 메뉴 위쪽 사용자 영역 (.m-util-menu) ----
	   style.css 의 남색 바탕 + 가운데 큰 아바타 구성을 걷어내고
	   [아바타 + 인사말] 한 줄, [로그인·회원가입·도민인증] 둥근 버튼 한 줄로 정리한다. */
	#header .m-gnb-area .m-util-menu{
		padding:50px 20px 20px;
		background:var(--season-soft, #F9FBFC);border-bottom:1px solid #E0DEDE;
	}
	#header .m-gnb-area .m-util-top{display:flex;flex-wrap:wrap;gap:8px;text-align:left;font-size:16px;}
	#header .m-gnb-area .m-util-top li{display:block;width:auto;flex:1 1 0;min-width:0;margin:0;}
	#header .m-gnb-area .m-util-top li.user{
		order:-1;flex:0 0 100%;display:flex;align-items:center;gap:12px;
	}
	#header .m-gnb-area .m-util-top li.user img{
		flex:0 0 auto;display:block;width:48px;height:48px;border-radius:50%;
		border:1px solid #E0DEDE;background:#fff;object-fit:cover;
	}
	#header .m-gnb-area .m-user-txt{margin:0;font-size:16px;line-height:1.45;color:#333;word-break:keep-all;}
	#header .m-gnb-area .m-user-txt strong{font-weight:700;color:var(--season-deep, #14315A);}
	/* 둥근 버튼 : 로그인(로그아웃) / 회원가입 / 경북도민인증 */
	#header .m-gnb-area .m-util-top li:not(.user) > a{
		display:flex;align-items:center;justify-content:center;gap:6px;
		height:42px;padding:0 10px;box-sizing:border-box;
		border:1px solid #D5D7DA;border-radius:21px;background:#fff;
		font-size:16px;font-weight:600;line-height:1;color:#333;opacity:1;white-space:nowrap;
		transition:border-color .2s, color .2s;
	}
	#header .m-gnb-area .m-util-top li:not(.user) > a:hover,
	#header .m-gnb-area .m-util-top li:not(.user) > a:focus-visible{border-color:var(--season-point, #1E4778);color:var(--season-point, #1E4778);}
	#header .m-gnb-area .m-util-top li:not(.user) > a:focus-visible{outline:2px solid var(--season-point, #1E4778);outline-offset:2px;}
	/* 아이콘 : 데스크톱과 같은 ico_login / ico_join (style.css 의 m_gnb_ico png 는 쓰지 않는다) */
	#header .m-gnb-area .m-util-top li.login > a:before,
	#header .m-gnb-area .m-util-top li.join > a:before{
		content:'';position:static;display:block;flex:0 0 auto;width:18px;height:18px;
		background-position:center;background-repeat:no-repeat;background-size:contain;
	}
	#header .m-gnb-area .m-util-top li.login > a:before{background-image:url(../images/ico/ico_login.svg);}
	#header .m-gnb-area .m-util-top li.join > a:before{background-image:url(../images/ico/ico_join.svg);}
	/* 닫기 : 흰 X 그림(m_search_close.png)은 밝은 바탕에서 안 보여서 선으로 다시 그린다 */
	#header .m-gnb-area .m-gnb-close{
		top:10px;right:10px;width:40px;height:40px;border-radius:50%;
		background:none;
	}
	#header .m-gnb-area .m-gnb-close:before,
	#header .m-gnb-area .m-gnb-close:after{
		content:'';position:absolute;left:50%;top:50%;width:20px;height:2px;border-radius:1px;background:#333;
	}
	#header .m-gnb-area .m-gnb-close:before{transform:translate(-50%, -50%) rotate(45deg);}
	#header .m-gnb-area .m-gnb-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
	#header .m-gnb-area .m-gnb-close:hover,
	#header .m-gnb-area .m-gnb-close:focus-visible{background:rgba(0, 0, 0, .06);}

	:root{
		--header-util-h: 0px;
		--header-gnb-h: 70px;
		--header-h: 70px;
	}
	#header .util-wrap{display:none;}
	#header .lib_nav{display:none;}

	#header .gnb-wrap{display:block;height:70px;padding:0;background:#fff;border-bottom:1px solid var(--header-line);}
	#header .gnb-wrap .inner{height:70px;padding:0 70px;display:flex;align-items:center;justify-content:center;}
	#header .gnb-wrap .inner h1.logo{position:static;width:auto;margin:0;transform:none;}
	#header .gnb-wrap .inner h1.logo img{display:block;height:26px;width:auto;}
	#header .gnb-wrap .inner .gnb{display:none;}
	/* style.css 는 992px 에서 버튼을 켜므로 993~1024 구간이 비어 있었다 */
	/* style.css 는 버튼이 전역 90x90(파란/청록 블록), 600px 이하에서만 55x55 다.
	   흰 바에 색 블록 두 개가 박혀 개편 톤과 따로 놀아서, 크기를 바 높이에 맞추고
	   배경 블록을 걷어낸 뒤 아이콘만 브랜드색으로 남긴다. */
	#header .m-gnb-btn,
	#header .m-search-btn{
		display:block;width:70px;height:70px;
		background:transparent none;border:0;
		transition:background-color .2s;
	}
	#header .m-gnb-btn:hover,
	#header .m-search-btn:hover,
	#header .m-gnb-btn:focus-visible,
	#header .m-search-btn:focus-visible{background-color:#f5f3f0;}
	/* 검색 : ico_search.svg 는 stroke 가 흰색이라 어둡게 뒤집어 쓴다.
	   filter 를 버튼에 걸면 hover 배경까지 검게 변하므로 가상요소에만 건다. */
	#header .m-search-btn:before{
		content:'';position:absolute;left:50%;top:50%; transform: translate(-50%, -50%);
		width:26px;height:26px;
		background:url(../images/ico/ico_search.svg) center / contain no-repeat;
		filter:brightness(0);
	}
	/* mask 를 쓰면 햄버거와 똑같은 #33302b 로 칠할 수 있다.
	   미지원 브라우저는 위의 filter:brightness(0) 로 떨어진다. */
	@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
		#header .m-search-btn:before,
		#header .m-search-area .sch-btn:before{
			background:#33302b;filter:none;
			-webkit-mask:url(../images/ico/ico_search.svg) center / contain no-repeat;
			mask:url(../images/ico/ico_search.svg) center / contain no-repeat;
		}
	}
	/* 햄버거 : 전용 아이콘이 없어 3줄을 CSS 로 그린다 */
	#header .m-gnb-btn:before{
		content:'';position:absolute;left:50%;top:50%;
		width:22px;height:2px;transform:translate(-50%, -8px);
		background:#33302b;border-radius:1px;
		box-shadow:0 7px 0 #33302b, 0 14px 0 #33302b;
	}

	/* 검색 레이어 : 남색 배경(rgb(26,46,75)) 을 흰 바와 같은 톤으로 바꾸고
	   높이도 바와 맞춰 헤더를 덮어쓰는 형태로 만든다 */
	#header .m-search-area{
		height:var(--header-h);box-sizing:border-box;
		padding:0 20px 0 60px;
		background:#fff;border-bottom:1px solid var(--header-line);
	}
	/* 검색폼은 예전 90px 남색 바 기준(.sch-inner padding:10px 150px, 높이 58px)이라
	   56/70px 흰 바에서 그대로 깨진다. 이 안에서만 다시 짠다.
	   레거시가 .sch-btn / .m-search-close 에 left 값을 주고 있어 left:auto 가 필요하다. */
	#header .m-search-area .sch-wrap{width:100%;height:100%;background:transparent;}
	#header .m-search-area .sch-inner{
		height:100%;box-sizing:border-box;
		display:flex;align-items:center;
		padding:0;border:0;background:transparent;
	}
	/* 메인 통합검색(.main-search)과 같은 문법으로 맞춘다 :
	   라운드 입력창 + 브랜드색(--main-point) 정사각 버튼.
	   ico_search.svg 는 stroke 가 흰색이라 갈색 버튼 위에 그대로 얹으면 된다(필터 불필요). */
	#header .m-search-area .sch-inner form{
		width:100%;height:48px;margin:0;
		display:flex;align-items:center;gap:8px;
	}
	#header .m-search-area .sch-inner input{
		flex:1 1 auto;min-width:0;width:auto;height:48px;box-sizing:border-box;
		padding:0 16px;margin:0;
		border:1px solid #d9d4cc;border-radius:12px;background:#faf9f6;
		font-size:16px;color:#333;
	}
	#header .m-search-area .sch-inner input:focus{outline:0;border-color:#33302b;background:#fff;}
	#header .m-search-area .sch-inner input::placeholder{color:#707070;}	/* 대비 4.74:1 */
	/* 검색 버튼 : 레거시가 absolute + top/left/right + translateY(-50%) 를 잡아 두어
	   offset 4개와 transform 을 모두 되돌려야 좌표가 맞는다.
	   텍스트는 text-indent 로 숨기되 접근 가능한 이름('검색')은 유지한다. */
	#header .m-search-area .sch-btn{
		position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;
		flex:0 0 auto;width:48px;height:48px;margin:0;padding:0;
		background:#33302b url(../images/ico/ico_search.svg) center / 20px no-repeat;
		border-radius:12px;
		text-indent:-9999px;overflow:hidden;white-space:nowrap;
		transition:background-color .2s;
	}
	#header .m-search-area .sch-btn:hover,
	#header .m-search-area .sch-btn:focus-visible{background-color:#514339;}
	#header .m-search-area .m-search-close{
		left:10px;right:auto;top:50%;transform: translateY(-50%); width:40px;height:40px;
		background:none;border-radius:50%;
	}
	#header .m-search-area .m-search-close:hover,
	#header .m-search-area .m-search-close:focus-visible{background-color:#f5f3f0;}
	/* 닫기 X 도 CSS 로 */
	#header .m-search-area .m-search-close:before,
	#header .m-search-area .m-search-close:after{
		content:'';position:absolute;left:50%;top:50%;
		width:22px;height:2px;
		background:#33302b;border-radius:1px;
	}
	#header .m-search-area .m-search-close:before{transform:translate(-50%, -50%) rotate(45deg);}
	#header .m-search-area .m-search-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
	#header .submenu-wrap{display:none;}
}

/* 768px 이하 : 모바일 바를 56px 로 줄인다 */
@media screen and (max-width:768px){
	:root{
		--header-gnb-h: 56px;
		--header-h: 56px;
	}
	#header .gnb-wrap{height:56px;}
	#header .gnb-wrap .inner{height:56px;padding:0 56px;}
	#header .gnb-wrap .inner h1.logo img{height:24px;}
	#header .m-gnb-btn,
	#header .m-search-btn{width:56px;height:56px;}
	#header .m-search-btn:before{width:20px;height:20px;}
	#header .m-gnb-btn:before{width:20px;}
	#header .m-search-area{padding:0 16px 0 56px;}
	#header .m-search-area .m-search-close{right:16px;}
	#header .m-search-area .sch-inner form{height:42px;gap:6px;}
	#header .m-search-area .sch-inner input{height:42px;padding:0 12px;border-radius:10px;font-size:15px;}
	#header .m-search-area .sch-btn{width:42px;height:42px;border-radius:10px;background-size:18px;}
}