@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)가 무거워 헤더·문의 패널 글자만 뽑은 서브셋 사용.
   chn 헤더/문의 패널 문구를 바꾸면 서브셋을 다시 만들어야 한다 (없는 글자는 시스템 폰트로 표시됨) */
@font-face {font-family: 'Sarasa Gothic SC HU'; font-weight: 400; font-style: normal; font-display: swap; src: url('/font/SarasaGothicSC-Regular.header.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.header.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 *,
.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 *,
.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 *,
.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; line-height: 20px; color: #333; white-space: nowrap;}
#header .h_top .lang_menu li a:hover {color: #00b0f0; font-weight: normal;}

@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;}
}