/* ============================================================ */
/* header_v2.css — PC 공통 헤더/메가메뉴/검색/퀵메뉴 리디자인     */
/* 2026-04-11 main.asp에서 분리                                   */
/* ============================================================ */

/* ── 헤더 리디자인 ── */
/*
 * 좌표계 고정 (2026-04-13):
 * #wrapper가 min-width:1260px인데 #header는 position:fixed; width:100%라
 * 뷰포트가 1260 미만이 되면 헤더 폭이 줄면서 안쪽 .top(1260 centered)과
 * 검색 버튼/오버레이가 뷰포트 중심을 따라 좌우로 움직이는 현상 발생.
 * → #header에도 min-width:1260px를 강제해서 본문과 동일한 좌표계 유지.
 */
#header {
	background: rgba(255,255,255,0.92) !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border-bottom: none !important;
	transition: background 0.3s !important;
	z-index: 10005 !important;
	min-width: 1260px !important;
}
/*
 * 로고 vs 메뉴 클릭 문제 해결:
 * .top(z:10003) > #lnb(z:10002) 이지만
 * .top은 pointer-events:none → 마우스 이벤트가 아래 #lnb로 통과
 * h1만 pointer-events:auto → 로고 클릭 가능
 */
#header .top { z-index: 10003 !important; position: relative !important; pointer-events: none !important; }
/* 로고를 .pc-inner 콘텐츠 영역 좌측 edge(.top left+30, padding 40 - .top마진 10)에 정렬 */
#header .top h1 { pointer-events: auto !important; left: 30px !important; }
/* 메뉴 좌표 (2026-04-13): 로고/버튼 boundary gap ≈ inter-menu gap. 5 col × 190 = 950, margin-left 200 (로고 우측 150 + 50 여백) */
#lnb { z-index: 10002 !important; position: relative !important; pointer-events: none !important; width: 1260px !important; padding: 0 !important; overflow: visible !important; }
#lnb ul { display: flex !important; width: 950px !important; margin-left: 200px !important; padding: 0 !important; }
#lnb ul li { float: none !important; flex: 0 0 190px !important; width: 190px !important; text-align: center !important; font-family: 'Noto Sans KR', sans-serif !important; }
#lnb ul li a { pointer-events: auto !important; }

/* gnb_txt 숨김 → 메가메뉴 안으로 이동 */
#gnb .gnb_txt { display: none !important; }
#gnb { pointer-events: none !important; }

/* 검색 버튼 래퍼: .pc-inner 콘텐츠 우측 edge(.top x=1230)에 flush, 로고(left:30)와 대칭 */
.pc-search-btn-wrap {
	position: absolute;
	top: 15px;
	right: calc(50% - 600px);
	z-index: 10003;
	pointer-events: auto;
}
/* 검색 버튼 */
.pc-search-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border: 0; background: none;
	cursor: pointer; border-radius: 50%; transition: background 0.2s;
	vertical-align: middle;
}
.pc-search-btn:hover { background: none; }

/* ── 메가메뉴 리디자인 ── */
#allMenuView {
	top: 0 !important;
	padding-top: 60px !important;
	background: #fff !important;
	border: none !important;
	box-shadow: 0 8px 40px rgba(0,0,0,0.06) !important;
	min-width: 1260px !important;
}

/* 메가메뉴 뒤 블라인드 */
.pc-menu-backdrop {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	min-width: 1260px;
	background: rgba(0,0,0,0.3);
	z-index: 9999;
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s;
}
.pc-menu-backdrop.show { opacity: 1; visibility: visible; }

/* 유저 링크 (로그인/회원가입/English) — 돋보기 버튼 중심(.top x=1215) 아래 중앙정렬 */
#allMenuView .pc-user-links { position: absolute; top: 24px; left: calc(50% + 585px); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; white-space: nowrap; }
#allMenuView .pc-user-links a { font-size: 13px; color: #86868b; text-decoration: none; transition: color 0.2s; white-space: nowrap; }
#allMenuView .pc-user-links a:hover { color: #ff842f; }

/* 좌측 연락처 숨김 */
#allMenuView .m_left { display: none !important; }

/* 메뉴 컬럼 — #lnb(950 wide, margin-left 200) 동기화 */
#allMenuView .menu_cen { width: 950px !important; margin-left: 200px !important; background: none !important; }
#allMenuView .menu { width: 190px !important; background: none !important; height: auto !important; padding: 24px 0 28px !important; text-align: center !important; }
#allMenuView .menu:last-child { border-right: none !important; }

/* 메뉴 항목 — center 정렬 (상단 #lnb와 컬럼 중심 일치).
   layout8.css `.a1 a~.a5 a { margin-left: 35~50px }` 글로벌 규칙이 .menu.a1~.a5 안의 <a>를 점증적으로 밀고 있어서 margin-left:0 !important로 무효화 필수 */
#allMenuView .menu ul li { height: auto !important; padding: 0 !important; }
#allMenuView .menu ul li a { font-size: 15px !important; color: #555 !important; font-family: 'Noto Sans KR', sans-serif !important; letter-spacing: -0.03em !important; display: block !important; margin-left: 0 !important; padding: 5px 0 !important; transition: color 0.2s !important; font-weight: 400 !important; }
#allMenuView .menu ul li a:hover { color: #ff842f !important; }

/* NEW 뱃지 */
#allMenuView .menu ul li a .new-badge { display: none !important; }


/* ── 검색 오버레이 ── */
/* 헤더와 동일한 1260 좌표계를 강제: 백드롭/오버레이/이너 모두 min-width 1260 */
.pc-search-backdrop {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	min-width: 1260px;
	background: rgba(0,0,0,0.3);
	z-index: 9999; opacity: 0; visibility: hidden;
	transition: opacity 0.3s;
}
.pc-search-backdrop.open { opacity: 1; visibility: visible; }

.pc-search-overlay {
	position: fixed; top: 0; left: 0; right: 0;
	min-width: 1260px;
	background: #fff;
	z-index: 10000;
	padding-top: 60px;
	transform: translateY(-100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 8px 40px rgba(0,0,0,0.06);
	max-height: 100vh; overflow-y: auto;
}
.pc-search-overlay.open { transform: translateY(0); }
/* width:1260 (max-width 아님) — 뷰포트가 좁아져도 입력 박스 위치 유지 */
/* padding 30/30: 로고(.top x=30)와 검색 버튼(.top x=1230) 사이 정확히 매칭 → .pc-inner 콘텐츠 영역과 동일 좌표 */
.pc-search-inner { width: 1260px; margin: 0 auto; padding: 16px 30px 24px 30px; box-sizing: border-box; }

.pc-search-input-wrap { display: flex; align-items: center; border-bottom: none; padding-bottom: 8px; margin-bottom: 20px; }
/* 자식 결합자로 돋보기 svg만 타겟 — 하위 버튼 svg(.pc-search-clear)에 opacity 0.4 상속 방지 */
.pc-search-input-wrap > svg { flex-shrink: 0; margin-right: 12px; opacity: 0.4; width: 20px; height: 20px; }
.pc-search-input-wrap input { flex: 1; border: 0; background: none; font-size: 18px; font-weight: 600; color: #1d1d1f; outline: none; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; }
.pc-search-input-wrap input::placeholder { color: #c7c7cc; font-weight: 600; }
/* 검색어 지우기 버튼 (Apple식) — 돋보기 버튼 바로 아래 */
.pc-search-clear { flex-shrink: 0; margin-left: 12px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.pc-search-clear.show { opacity: 1; visibility: visible; }
.pc-search-clear:hover svg circle { fill: #000; }

.pc-sq-title { font-size: 11px; font-weight: 600; color: #86868b; margin-bottom: 8px; letter-spacing: 0.5px; }
.pc-sq-item { display: block; padding: 7px 0; font-size: 14px; font-weight: 600; color: #1d1d1f; text-decoration: none; font-family: 'Noto Sans KR', sans-serif; transition: color 0.2s; }
.pc-sq-item:hover { color: #ff842f; }
.pc-sq-arrow { display: inline-block; color: #86868b; margin-right: 10px; font-weight: 400; font-size: 12px; }

/* 검색 결과 */
#pcSearchResults { position: relative; max-height: calc(100vh - 180px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d2d2d7 transparent; }
#pcSearchResults { padding-right: 10px; }
#pcSearchResults::-webkit-scrollbar { width: 4px; }
#pcSearchResults::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 4px; }
#pcSearchResults.has-scroll::after { content: ''; position: sticky; bottom: 0; left: 0; right: 0; display: block; height: 60px; background: linear-gradient(transparent, #fff); pointer-events: none; }
/* 검색 관련 플로팅 토스트 (결과 더보기 안내, 닫힘 경고 공용) */
.pc-sr-toast, #pcSrFloatHint, #pcSrCloseHint { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,0.78); color:#fff; font-size:13px; font-weight:500; padding:10px 24px; border-radius:100px; opacity:0; transition:opacity 0.35s, transform 0.35s; z-index:99999; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,0.2); pointer-events:none; }
.pc-sr-toast.show, #pcSrFloatHint.show, #pcSrCloseHint.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* 닫힘 경고는 눈에 띄도록 오렌지 + 흰 글씨 */
#pcSrCloseHint { background: #ff842f; color: #fff; font-weight: 600; box-shadow: 0 4px 16px rgba(255,132,47,0.35); }

/* 닫힘 경고 시 검색 내용이 살짝 튀어올랐다 내려오는 바운스 효과 */
@keyframes pcSearchBounce {
	0%   { transform: translateY(0); }
	35%  { transform: translateY(-24px); }
	65%  { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}
.pc-search-inner.bounce { animation: pcSearchBounce 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.pc-sr-section { margin-bottom: 36px; }
.pc-sr-title { font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 12px; }
.pc-sr-item { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f0f0f0; text-decoration: none; color: #1d1d1f; transition: color 0.2s; }
.pc-sr-item:hover { color: #ff842f; }
.pc-sr-item:last-child { border-bottom: none; }
.pc-sr-thumb { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-right: 16px; flex-shrink: 0; }
.pc-sr-info { flex: 1; }
.pc-sr-name { font-size: 16px; font-weight: 600; }
.pc-sr-name .pc-sr-position { font-size: 13px; font-weight: 400; color: #86868b; margin-left: 8px; }
.pc-sr-dept { font-size: 14px; color: #86868b; margin-top: 2px; }
.pc-sr-specialty { font-size: 13px; color: #aeaeb2; margin-top: 2px; }
.pc-sr-arrow { font-size: 20px; color: #d2d2d7; margin-left: 12px; }


/* ── 구 퀵메뉴(#banner) 숨김 ── */
#banner { display: none !important; }

/* ── 우측 플로팅 퀵메뉴 (참포도나무 스타일) ── */
.pmc-quick-wrap {
	position: fixed;
	right: 58px;
	bottom: 45px;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}
.pmc-quick-wrap.show {
	opacity: 1;
	pointer-events: auto;
}

.pmc-quick-btn {
	display: flex;
	align-items: flex-end;
	height: 80px;
	background: #ff842f;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(255,132,47,0.25);
	transition: height 0.5s cubic-bezier(0.4,0,0.2,1);
	cursor: pointer;
}
.pmc-quick-btn:hover {
	height: 480px;
}
.pmc-quick-box {
	display: flex;
	flex-direction: column;
}
.pmc-quick-box .qitem {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 14px;
	transition: background 0.3s, opacity 0.5s;
	text-decoration: none;
	color: #fff;
	opacity: 0;
}
.pmc-quick-btn:hover .qitem {
	opacity: 1;
}
.pmc-quick-box .qitem:hover {
	background: #e06a10;
}
.pmc-quick-box .qitem.qtoggle {
	opacity: 1;
}
.pmc-quick-box .qitem .qico {
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pmc-quick-box .qitem .qico svg {
	width: 26px;
	height: 26px;
	fill: #fff;
	stroke: none;
}
.pmc-quick-box .qitem .qico svg.stroke-icon {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pmc-quick-box .qitem .qtxt {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	font-family: 'Noto Sans KR', sans-serif;
}

/* 채팅상담 버튼 */
.pmc-chat-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 80px;
	height: 80px;
	margin-top: 12px;
	border-radius: 14px;
	background: #fff;
	color: #1d1d1f;
	font-size: 12px;
	font-weight: 600;
	font-family: 'Noto Sans KR', sans-serif;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: background 0.3s, transform 0.2s, color 0.3s;
	text-decoration: none;
	border: none;
}
.pmc-chat-btn:hover {
	background: #1d1d1f;
	color: #fff;
	transform: scale(1.05);
}
.pmc-chat-btn .qico {
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.pmc-chat-btn .qico svg {
	width: 26px;
	height: 26px;
	transition: fill 0.3s;
}
.pmc-chat-btn:hover .qico svg path:first-child {
	fill: #fff;
}
.pmc-chat-btn:hover .qico svg path:last-child {
	stroke: #1d1d1f;
}

/* 위로가기 버튼 */
.pmc-top-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin-top: 12px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	border: none;
}
.pmc-top-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
.pmc-top-btn svg {
	width: 30px;
	height: 30px;
	stroke: #1d1d1f;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.3s;
}
.pmc-top-btn:hover svg {
	stroke: #ff842f;
}