@charset "utf-8";
/* ==========================================================================
   2026-09-23 헤더 유틸 아이콘화 (kr/en/chn/jpn 공통)
   - 검색 / 로그인 / 문의사항 / 언어변경을 24px 아이콘으로 통일, 테두리 제거
   - 문의사항은 헤더 버튼으로만 연다 (우측 세로 탭은 main.php 에서 삭제).
     main.php 에만 있고 모바일(767px 이하)에서는 숨김
   - 폰트: 한국어·영어 Pretendard / 일본어 Pretendard JP / 중국어 Sarasa Gothic SC
     적용 범위는 헤더 유틸(.h_top)과 문의사항 패널(.contactus-main)
   - 각 언어 style.css / style_tab.css / style_mob.css 뒤에 로드되며,
     #header .h_top 으로 범위를 좁혀 기존 규칙보다 우선하게 했다.
   ========================================================================== */

/* ── 폰트 ─────────────────────────────────────────────────────────────── */
@font-face {font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: swap; src: url('/font/Pretendard-Regular.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-weight: 600; font-style: normal; font-display: swap; src: url('/font/Pretendard-SemiBold.woff2') format('woff2');}
@font-face {font-family: 'Pretendard JP'; font-weight: 400; font-style: normal; font-display: swap; src: url('/font/PretendardJP-Regular.woff2') format('woff2');}
@font-face {font-family: 'Pretendard JP'; font-weight: 600; font-style: normal; font-display: swap; src: url('/font/PretendardJP-SemiBold.woff2') format('woff2');}
/* 중국어: 전체 폰트(8MB)가 무거워 서버에 있는 상용 한자 서브셋(-subset, 약 330KB) 사용.
   서브셋에 없는 글자는 Microsoft YaHei 등 시스템 폰트로 표시됨 */
@font-face {font-family: 'Sarasa Gothic SC HU'; font-weight: 400; font-style: normal; font-display: swap; src: url('/font/SarasaGothicSC-Regular-subset.woff2') format('woff2');}
@font-face {font-family: 'Sarasa Gothic SC HU'; font-weight: 600; font-style: normal; font-display: swap; src: url('/font/SarasaGothicSC-SemiBold-subset.woff2') format('woff2');}

#header .h_top.hu_lang_kr, #header .h_top.hu_lang_kr *,
#header .h_top.hu_lang_en, #header .h_top.hu_lang_en *,
.pc_gnb_wrap.hu_lang_kr .depth01 > li > a,
.pc_gnb_wrap.hu_lang_en .depth01 > li > a,
.contactus-main.hu_lang_kr, .contactus-main.hu_lang_kr *,
.contactus-main.hu_lang_en, .contactus-main.hu_lang_en * {font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif;}
#header .h_top.hu_lang_jpn, #header .h_top.hu_lang_jpn *,
.pc_gnb_wrap.hu_lang_jpn .depth01 > li > a,
.contactus-main.hu_lang_jpn, .contactus-main.hu_lang_jpn * {font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif;}
#header .h_top.hu_lang_chn, #header .h_top.hu_lang_chn *,
.pc_gnb_wrap.hu_lang_chn .depth01 > li > a,
.contactus-main.hu_lang_chn, .contactus-main.hu_lang_chn * {font-family: 'Sarasa Gothic SC HU', 'Microsoft YaHei', 'PingFang SC', sans-serif;}

/* ── 아이콘 버튼 공통 ─────────────────────────────────────────────────── */
#header .h_top .hu_icon {display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: 0; cursor: pointer;}
#header .h_top .hu_icon img {display: block; width: 24px; height: 24px;}
#header .h_top .hu_icon:hover {opacity: .6;}

/* 로그인 후: 아이콘 + 드롭다운(로그아웃/마이페이지). 테두리·배경 제거 */
#header .h_top .user_menu {height: auto; border: 0 !important; background: transparent;}
#header .h_top .user_menu .login_tit {width: auto; font-size: 0;}
#header .h_top .user_menu .lang_menu {top: 100%; left: 50%; right: auto; width: 120px; margin-top: 8px; padding: 5px 0; transform: translateX(-50%); border: 1px solid #dfdfdf; background: #fff;}

/* 언어변경: 현재 언어명 + 아이콘(간격 1px), 테두리·화살표 제거 */
#header .h_top .language {width: auto; height: auto; border: 0 !important; background: transparent;}
#header .h_top .language .lang_tit,
#header .h_top .language.on .lang_tit {display: flex; align-items: center; gap: 1px; margin: 0; padding: 0; background: none !important; font-size: 13px; font-weight: normal; line-height: 24px; color: #000; white-space: nowrap;}
#header .h_top .language .lang_tit img {display: block; width: 24px; height: 24px;}
#header .h_top .language:hover .lang_tit {opacity: .6;}
#header .h_top .language .lang_menu {top: 100%; left: auto; right: 0; width: 100px; margin-top: 8px; padding: 5px 0; border: 1px solid #dfdfdf; background: #fff;}

#header .h_top .lang_menu li a {display: block; padding: 4px 12px; font-size: 12px; font-weight: normal; line-height: 20px; color: #333; white-space: nowrap; text-decoration: none;}
/* 마우스를 올리면 밑줄만 (색·굵기 변화 없음). style.css 의 .lang_menu li:hover a{font-weight:bold} 무효화 */
#header .h_top .lang_menu li:hover a,
#header .h_top .lang_menu li a:hover,
#header .h_top .lang_menu li a:focus-visible {color: #333; font-weight: normal; text-decoration: underline; text-underline-offset: 3px;}
/* 클릭 시 bootstrap 의 a:focus 둥근 포커스 테두리(outline 5px auto) 제거 */
#header .h_top a:focus,
#header .h_top a:active,
#header .h_top .lang_tit:focus {outline: none; box-shadow: none;}

@media screen and (max-width: 1024px) {
	#header .h_top .language .lang_tit {font-size: 12px;}
}

@media screen and (max-width: 767px) {
	#header .h_top .util_contact {display: none !important;}
	#header .h_top .hu_icon img,
	#header .h_top .language .lang_tit img {width: 20px; height: 20px;}
	#header .h_top .language .lang_tit {font-size: 10px; line-height: 20px;}
}

/* ==========================================================================
   2026-09-23 헤더 한 줄 레이아웃 (PC 전용. 태블릿/모바일 1024px 이하는 기존 그대로)
   [로고 10px] -20px- [GNB 텍스트 메뉴] ............ [검색·제품검색·로그인·문의·언어 10px]
   - 1025px~ : 헤더/푸터 좌우 여백 0 (꽉 차게), 로고 왼쪽 10px / 우측 아이콘 오른쪽 10px
   - 1280px~ : GNB(파란 띠)를 헤더 줄 안으로 올려 두 줄 -> 한 줄. hero 가 헤더 바로 아래에 붙는다
               GNB 항목 폭은 가장 긴 메뉴명에 맞춰 모두 같게(grid 1fr), 텍스트 가운데 정렬
   - 1025~1279px : 같은 폭 메뉴 + 우측 아이콘이 한 줄에 들어가지 않아(일본어 기준 약 100px 부족)
               GNB 는 기존처럼 헤더 아래 두 번째 줄에 둔다
   - GNB 는 DOM 위치를 옮기지 않고(#wrap 기준 absolute) 헤더 줄 위로 겹쳐 올린다.
     드롭다운 스크립트(script.js)는 손대지 않음
   ========================================================================== */
:root {--hu-header-h: 80px; --hu-edge: 10px; --hu-logo-w: 154px; --hu-logo-gap: 20px;}

@media screen and (min-width: 1025px) {
	/* 헤더: 좌우 여백 0 */
	#wrap #header .h_inner {margin: 0; max-width: none;}
	#wrap #header h1 {left: var(--hu-edge); width: var(--hu-logo-w);}
	#wrap #header .h_top {right: var(--hu-edge);}

	/* 푸터: 좌우 여백 0 (내용은 헤더와 같이 가장자리에서 10px) */
	#wrap #_footer > .inner {width: 100%; max-width: none; margin: 0; padding: 0 var(--hu-edge);}
}

@media screen and (min-width: 1280px) {
	/* 헤더 한 줄 높이, 로고 세로 가운데 */
	#wrap #header {height: var(--hu-header-h);}
	#wrap #header .h_inner {height: var(--hu-header-h);}
	#wrap #header h1 {top: 50%; bottom: auto; margin: 0; transform: translateY(-50%);}

	/* GNB: 헤더 줄로 올림 */
	#wrap > .pc_gnb_wrap {position: absolute; top: 0; left: calc(var(--hu-edge) + var(--hu-logo-w) + var(--hu-logo-gap)); height: var(--hu-header-h); z-index: 1050;}
	#wrap > .pc_gnb_wrap .pc_gnb {position: static; width: auto; height: var(--hu-header-h); border-top: 0; background: transparent;}
	#wrap > .pc_gnb_wrap .depth01 {display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 100%; margin: 0;}
	/* ul.clfix 의 :before/:after(clear 용 빈 박스)가 grid 칸으로 잡혀 폭이 1칸 늘어나는 것 방지 */
	#wrap > .pc_gnb_wrap .depth01:before,
	#wrap > .pc_gnb_wrap .depth01:after {content: none; display: none;}
	#wrap > .pc_gnb_wrap .depth01 > li {float: none; width: auto; height: 100%;}
	#wrap > .pc_gnb_wrap .depth01 > li > a {padding: 0 22px; line-height: var(--hu-header-h); font-size: 17px; font-weight: 600; color: #222; white-space: nowrap;}
	#wrap > .pc_gnb_wrap .depth01 > li:hover {background: transparent;}
	#wrap > .pc_gnb_wrap .depth01 > li:hover > a {color: #00b0f0;}
	#wrap > .pc_gnb_wrap .depth01 > li:hover > a:after {top: auto; bottom: 0; height: 3px; background-color: #00b0f0;}

	/* 드롭다운: 헤더 바로 아래에서 열림 (기준은 GNB 왼쪽 끝) */
	#wrap > .pc_gnb_wrap .depth02 {top: var(--hu-header-h);}
	/* 반투명 배경: 헤더 아래 화면 전체 */
	#wrap > .pc_gnb_wrap .gnb_bg {top: var(--hu-header-h); left: calc(-1 * (var(--hu-edge) + var(--hu-logo-w) + var(--hu-logo-gap))); width: 100vw; height: 10000px;}
	/* 채용(kr)은 드롭다운이 없으므로 올려도 배경을 깔지 않음 */
	#wrap > .pc_gnb_wrap:has(.gnb_recruit:hover) .gnb_bg {display: none !important;}
}

/* 1280~1399px: 메뉴 여백·글자 축소 (일본어 기준 아이콘 영역과 겹치지 않는 최소값) */
@media screen and (min-width: 1280px) and (max-width: 1399px) {
	#wrap > .pc_gnb_wrap .depth01 > li > a {padding: 0 12px; font-size: 16px;}
}