/* =========================================================
   휘슬(010car.kr) 공통 헤더 / 푸터 스타일
   - 원본: common.min.css / pc.min.css / mobile.min.css 에서
     #header, #footer, .quickMoveTop 관련 규칙만 추출
   - 원본은 html{font-size:62.5%} 기준 rem 단위 → 10px = 10px
   - 배포용 px 변환본 (원본 rem 버전: whistle-common.src.css)
   ========================================================= */

/* ---------- 폰트 (원본 font.cdn.css) ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ---------- 헤더/푸터 영역에만 적용되는 리셋 ---------- */
#header, #footer, .quickMoveTop,
#header *, #footer *, .quickMoveTop * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1;
}
#header, #footer, .quickMoveTop {
  font-family: "Pretendard Variable", sans-serif;
  letter-spacing: -0.4px;
  color: #222;
  font-weight: 300;
  font-size: 16px;
}
#header ul, #header ol, #footer ul, #footer ol { list-style: none; }
#header img, #footer img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
#header em, #footer em { font-style: inherit; }
#header a, #footer a { text-decoration: none; color: #222; }
#header h1, #footer h1 { font-weight: normal; font-size: inherit; }
#header button, #footer button, .quickMoveTop button {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0;
  background-color: transparent;
  border-radius: 0; border: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit;
  text-transform: none; color: inherit;
  cursor: pointer; box-sizing: border-box;
}
#header :focus, #footer :focus { outline: 0; }

/* ---------- 공통 유틸 ---------- */
.pc_hide { display: none !important; }
html.scrollNone, body.scrollNone { overflow: hidden; }

/* ---------- 레이아웃 래퍼 ---------- */
#wrap { position: relative; left: 0; right: 0; overflow: hidden; min-width: 1200px; }
#wrap .innerWrap { position: relative; max-width: 1200px; margin: 0 auto; }
#header .innerWrap, #footer .innerWrap { position: relative; max-width: 1200px; margin: 0 auto; } /* #wrap 없는 테마(Kadence 등) 대응 */
#wrap.sub { padding-top: 100px; } /* 고정 헤더 높이만큼 본문 밀기 */

/* ---------- 플러그인 방식(Kadence 등): body.whistle-hub 기준 ---------- */
body.whistle-hub { padding-top: 100px; }
body.whistle-hub.admin-bar #header { top: 32px; }
body.whistle-hub.admin-bar #header .innerWrap .allMenuWrap,
body.whistle-hub.admin-bar #header .innerWrap .userMenu { top: 32px; }
body.whistle-hub #header .innerWrap .logo { opacity: 1; }
body.whistle-hub #header .innerWrap .btnBack { display: none; }
@media (min-width: 769px) and (max-width: 1280px) {
  body.whistle-hub #header .innerWrap { padding: 0 20px; }
  body.whistle-hub #header .innerWrap .logo { left: 20px; }
  body.whistle-hub #footer .innerWrap .fooInner > div { padding: 0 20px; }
  body.whistle-hub #footer .companyInfo .social { right: 20px; }
}
/* 1200px 미만 데스크톱·태블릿: 메뉴 간격을 줄여 오른쪽이 잘리지 않게 (본사이트는 min-width 1200 고정) */
@media (min-width: 769px) and (max-width: 1150px) {
  body.whistle-hub #header .innerWrap nav > ul > li ~ li { margin-left: 50px; }
  body.whistle-hub #header .innerWrap nav > ul li .subDep { width: calc(100% + 50px); }
  body.whistle-hub #header .innerWrap .userMenu { margin-left: 80px; }  /* 새 GNB 비율(메뉴 간격 < 로그인 간격) 유지 */
}
@media (min-width: 769px) and (max-width: 940px) {
  body.whistle-hub #header .innerWrap nav > ul > li ~ li { margin-left: 28px; }
  body.whistle-hub #header .innerWrap nav > ul li a { font-size: 16px; }
  body.whistle-hub #header .innerWrap nav > ul li .subDep { width: calc(100% + 28px); }
  body.whistle-hub #header .innerWrap .userMenu { margin-left: 45px; }
}

/* ---------- 상단 이동 버튼 ---------- */
.quickMoveTop { position: fixed; right: calc(50% - 670px); bottom: 70px; z-index: 1; width: 60px; height: 60px; border-radius: 50%; box-shadow: rgba(0,0,0,0.05) 0 3px 6px; overflow: hidden; opacity: 0; transition-duration: 0.4s; }
.quickMoveTop button { width: 100%; height: 100%; font-size: 0; letter-spacing: -999px; background: url("../images/common/icon_quickTop.png") center center / auto no-repeat #fff; }
.quickMoveTop.active { opacity: 1; }

/* =========================================================
   HEADER (PC)
   ========================================================= */
#header { position: fixed; left: 0; right: 0; top: 0; z-index: 5; width: 100%; border-bottom: 1px solid #ddd; background-color: #fff; transition-duration: 0.4s; }
#header .innerWrap { height: 100px; overflow: hidden; transition-duration: 0.6s; }
#header .innerWrap .logo { position: absolute; left: 0; top: 30px; }
#header .innerWrap .logo a { display: inline-block; }

#header .innerWrap nav { float: right; }
#header .innerWrap nav > ul { display: flex; align-items: center; }
#header .innerWrap nav > ul li { position: relative; }
#header .innerWrap nav > ul li ~ li { margin-left: 80px; }  /* 2026-10-20 새 GNB: 140 → 80 */
#header .innerWrap nav > ul li .dep { position: relative; height: 100px; line-height: 100px; }
#header .innerWrap nav > ul li a { display: inline-block; vertical-align: middle; font-size: 18px; font-weight: 500; line-height: 26px; color: #222; }
#header .innerWrap nav > ul li a::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 2px; background-color: #f04806; transition-duration: 0.4s; transform: scaleX(0); }
#header .innerWrap nav > ul li a.on,
#header .innerWrap nav > ul li a:hover { color: #f04806 !important; }
#header .innerWrap nav > ul li a.on::after,
#header .innerWrap nav > ul li a:hover::after { transform: scaleX(1); }

/* 2뎁스 (호버 시 innerWrap 높이가 늘어나며 노출) */
#header .innerWrap nav > ul li .subDep { position: absolute; left: 0; top: 99px; width: calc(100% + 100px); height: auto; padding: 40px 0; transition-duration: 0.6s; }
#header .innerWrap nav > ul li .subDep li { margin: 0; display: block; height: auto; }
#header .innerWrap nav > ul li .subDep li ~ li { margin-top: 20px; }
#header .innerWrap nav > ul li .subDep li a { position: relative; font-weight: 300; }
#header .innerWrap nav > ul li .subDep li a::after { display: none; }
#header .innerWrap nav > ul li .subDep li a.on,
#header .innerWrap nav > ul li .subDep li a:hover { font-weight: 400; }

#header .innerWrap .btnBack,
#header .innerWrap .btnAllMenuOpen,
#header .innerWrap .btnAllMenuClose { display: none; }

#header .innerWrap .userMenu { float: right; margin-left: 130px; font-size: 0; line-height: 100px; }  /* 2026-10-20 새 GNB: 70 → 130 */
#header .innerWrap .userMenu .hBtn { position: relative; display: inline-block; vertical-align: middle; }
#header .innerWrap .userMenu .hBtn a { font-size: 14px; font-weight: 400; line-height: 22px; }
#header .innerWrap .userMenu .hBtn a.on,
#header .innerWrap .userMenu .hBtn a:hover { color: #f04806 !important; }
#header .innerWrap .userMenu .hBtn ~ .hBtn { margin-left: 14px; }
#header .innerWrap .userMenu .hBtn ~ .hBtn::before { content: ""; position: absolute; left: -7px; top: 50%; width: 2px; height: 2px; border-radius: 2px; background-color: #7a7a7a; }

#header .innerWrap .btn_app { display: none; }
#header::after { content: ""; position: absolute; left: 0; top: 100px; z-index: -1; width: 100%; height: 1px; background-color: #eee; }
#header.fixed { border-color: #eee; background-color: #fff; }
#header.mouse_on { border-bottom: 0; box-shadow: rgba(0,0,0,0.05) 0 3px 8px; }
#header.mouse_on .innerWrap .allMenuWrap { height: 100%; }

/* 2026-10-20 새 GNB: 본사이트에서 1280px 이하 간격 규칙(100px/40px)이 삭제되어 함께 제거 */

/* =========================================================
   FOOTER (PC)
   ========================================================= */
#footer { border-top: 1px solid #ddd; }
#footer .innerWrap { position: relative; max-width: 100%; overflow: hidden; font-size: 16px; color: #222; }
#footer .innerWrap .fooInner { max-width: 100%; padding: 40px 0; background-color: #fafafa; }
#footer .innerWrap .fooInner > div { max-width: 1200px; margin: 0 auto; }
#footer .innerWrap .fooInner > div ~ div { margin-top: 40px; }
#footer .innerWrap .fooInner .fooMenuList ul { display: block; overflow: hidden; }
#footer .innerWrap .fooInner .fooMenuList ul li { float: left; padding: 0; min-width: auto; }
#footer .innerWrap .fooInner .fooMenuList ul li ~ li { margin-left: 36px; }
#footer .innerWrap .fooInner .fooMenuList ul li button { line-height: 24px; font-weight: 300; color: #7a7a7a; }
#footer .innerWrap .fooInner .fooMenuList ul li button.point { color: #f04806; font-weight: 400; }
#footer .fooMenuList { position: relative; }
#footer .fooMenuList ul { max-width: 950px; }
#footer .fooMenuList ul li { display: inline-block; vertical-align: top; min-width: 120px; }
#footer .fooMenuList ul li ~ li { margin-left: 50px; }
#footer .fooMenuList ul li p { line-height: 30px; }
#footer .fooMenuList ul li p.tit { margin-bottom: 20px; line-height: 24px; color: #222; }
#footer .companyInfo { color: #7a7a7a; }
#footer .companyInfo .social { position: absolute; right: calc(50% - 600px); top: 35px; text-align: right; font-size: 0; }
#footer .companyInfo .social a { display: inline-block; vertical-align: middle; width: 34px; height: 32px; letter-spacing: -999px; background: url("../images/common/icon_social_blog.png") center center / auto 32px no-repeat; }
#footer .companyInfo .social a ~ a { margin-left: 20px; background-image: url("../images/common/icon_social_insta.png"); }
#footer .companyInfo .info { margin-top: 20px; }
#footer .companyInfo .info span { display: inline-block; font-size: 14px; font-weight: 300; line-height: 22px; }
#footer .companyInfo .info p { font-size: 14px; font-weight: 300; line-height: 22px; }
#footer .companyInfo .info .bar { display: inline-block; width: 1px; height: 11px; margin: 0 4px; background-color: #7a7a7a; }
#footer .tit { font-weight: 500; line-height: 24px; color: #7a7a7a; }

/* =========================================================
   MOBILE (max-width: 768px)
   ========================================================= */
@media (max-width: 768px) {
  .mo_hide { display: none !important; }
  .pc_hide { display: initial !important; }
  .pc_hide.flex { display: flex !important; }
  body { touch-action: manipulation; }

  #wrap { overflow: hidden visible; min-width: 320px; }
  #wrap.sub { padding-top: 70px; }
  body.whistle-hub { padding-top: 70px; }
  body.whistle-hub #header .innerWrap .btnBack { display: none; }

  /* 헤더 */
  #header { border-bottom: 0; }
  #header .innerWrap { height: 70px; padding: 20px; }
  #header .innerWrap .logo { top: 20px; left: 20px; z-index: 101; }
  #header .innerWrap .logo a { width: 95px; height: 30px; }
  #header .innerWrap .logo a img { height: 100%; }
  #header .innerWrap .btnBack,
  #header .innerWrap .btnAllMenuOpen,
  #header .innerWrap .btnAllMenuClose { display: block; }

  #header .innerWrap .btnBack { position: absolute; left: 10px; top: 17px; z-index: 101; font-size: 0; width: 36px; height: 36px; background: url("../images/common/m_btn_back2.png") center center / 12px auto no-repeat; transition-duration: 0.4s; }
  #header .innerWrap .btnAllMenuOpen { position: absolute; right: 20px; top: 23px; z-index: 101; width: 24px; height: 24px; text-indent: -10000px; font-size: 1px; color: transparent; }
  #header .innerWrap .btnAllMenuOpen span { position: absolute; display: block; width: 24px; height: 2px; background-color: #222; transition-duration: 0.4s; }
  #header .innerWrap .btnAllMenuOpen span.line1 { top: 3px; }
  #header .innerWrap .btnAllMenuOpen span.line2 { top: 50%; margin-top: -1px; opacity: 1; }
  #header .innerWrap .btnAllMenuOpen span.line3 { bottom: 3px; }
  #header .innerWrap .btnAllMenuOpen.on span.line1 { transform: rotate(225deg); top: 11px; }
  #header .innerWrap .btnAllMenuOpen.on span.line2 { transform: translateX(100%); opacity: 0; }
  #header .innerWrap .btnAllMenuOpen.on span.line3 { transform: rotate(-225deg); bottom: 11px; }

  /* 서브페이지(#wrap.sub) 모바일: 로고 숨기고 뒤로가기 노출, 전체메뉴 열리면 반대로 (원본과 동일) */
  #wrap.sub #header .innerWrap .logo { display: block; opacity: 0; transition-duration: 0.4s; }
  #wrap.sub #header.allMenu .innerWrap .logo { opacity: 1; }
  #wrap.sub #header.allMenu .innerWrap .btnBack { opacity: 0; }

  /* 허브사이트(#wrap.hub): 모바일에서도 로고 항상 노출, 뒤로가기 버튼 숨김
     (원본 서브페이지 방식으로 돌리려면 header.php 의 #wrap 에서 hub 클래스만 제거) */
  #wrap.hub #header .innerWrap .logo { opacity: 1; }
  #wrap.hub #header .innerWrap .btnBack { display: none; }

  /* 전체메뉴 (슬라이드 패널) */
  #header .innerWrap .allMenuWrap { position: fixed; right: 0; top: 0; z-index: 100; display: none; width: 100%; height: 100%; background: #fff; padding-top: 85px; padding-bottom: 150px; transform: translateX(100%); transition: 0.3s; }
  #header .innerWrap .allMenuWrap > ul { display: block; height: 100%; overflow-y: scroll; }
  #header .innerWrap .allMenuWrap > ul > li { display: block; }
  #header .innerWrap .allMenuWrap > ul > li ~ li { margin: 0; }
  #header .innerWrap .allMenuWrap > ul > li .dep { height: 65px; padding: 0 30px; }
  #header .innerWrap .allMenuWrap > ul > li .dep a { display: block; font-size: 20px; font-weight: 500; line-height: 65px; color: #222; }
  #header .innerWrap .allMenuWrap > ul > li .dep a::after { left: auto; right: 30px; top: 20px; width: 24px; height: 24px; background: url("../images/common/m_all_menu_arr.png") center center / auto 9px no-repeat; transform: scaleX(1) !important; }
  #header .innerWrap .allMenuWrap > ul > li .dep a:hover { color: inherit !important; }
  #header .innerWrap .allMenuWrap > ul > li .dep a.on { color: #ff4901 !important; }
  #header .innerWrap .allMenuWrap > ul > li .dep a.on::after { transform: rotate(180deg) !important; }
  #header .innerWrap .allMenuWrap > ul > li .subDep { position: static; display: none; width: 100%; padding: 0 50px 15px; transition-duration: inherit; }
  #header .innerWrap .allMenuWrap > ul > li .subDep li { height: 50px; }
  #header .innerWrap .allMenuWrap > ul > li .subDep li ~ li { margin: 0; }
  #header .innerWrap .allMenuWrap > ul > li .subDep li a { display: block; line-height: 50px; color: #222; }
  #header .innerWrap .allMenuWrap.on { transform: translateX(0); display: block; }

  #header .innerWrap .allMenuBot { position: absolute; left: 20px; bottom: 20px; width: calc(100% - 40px); }
  #header .innerWrap .allMenuBot .txtBtn { display: block; padding: 0 10px; font-size: 16px; font-weight: 300; line-height: 24px; color: #555; }
  #header .innerWrap .allMenuBot .txtBtn a { padding-right: 15px; background: url("../images/common/m_txtbtn_arr.png") right center / 6.5px auto no-repeat; }
  #header .innerWrap .allMenuBot .appBanner { height: 70px; margin-top: 18px; border: 1px solid #ddd; border-radius: 10px; }
  #header .innerWrap .allMenuBot .appBanner a { position: relative; display: flex; align-items: center; height: 100%; padding: 15px 15px 15px 75px; background: url("../images/common/m_appBanner_v2.png") left 15px center / 40px auto no-repeat; }
  #header .innerWrap .allMenuBot .appBanner a::after { content: ""; width: 14px; height: 14px; background: url("../images/common/m_appbanner_arr.png") center center / 7px auto no-repeat; }
  #header .innerWrap .allMenuBot .appBanner a p { flex: 1 1 auto; font-size: 16px; font-weight: 500; line-height: 24px; color: #222; }

  #header .innerWrap .userMenu { position: fixed; right: 60px; top: 0; z-index: 101; float: none; width: auto; height: 70px; line-height: 70px; margin: 0; transition: 0.3s; opacity: 0; pointer-events: none; }
  #header .innerWrap .userMenu .hBtn ~ .hBtn { margin-left: 10px; }
  #header .innerWrap .userMenu .hBtn ~ .hBtn::before { display: none; }
  #header .innerWrap .userMenu a { display: block; font-size: 14px; color: #7a7a7a; }
  #header .innerWrap .userMenu a.join { width: 80px; height: 40px; line-height: 38px; text-align: center; border: 1px solid #ddd; border-radius: 50px; }

  #header .innerWrap .btn_app { position: absolute; right: 60px; display: flex; justify-content: center; align-items: center; width: 85px; height: 34px; font-size: 12px; font-weight: 700; background: #fff; color: #242a33; border-radius: 25px; }
  #header.fixed .btnAllMenuOpen span { background-color: #222; }
  #header.fixed .btn_app { color: #fff; background-color: #f04806; }
  #header::after { display: none; }
  #header.allMenu .userMenu { opacity: 1; pointer-events: auto; }

  /* 푸터 */
  #footer { border-top: 0; }
  #footer .innerWrap .fooInner { position: relative; padding: 40px 20px; }
  #footer .innerWrap .fooInner .fooMenuList { position: static; }
  #footer .innerWrap .fooInner .fooMenuList ul { text-align: left; margin-left: -20px; }
  #footer .innerWrap .fooInner .fooMenuList ul li ~ li { margin: 0; }
  #footer .innerWrap .fooInner .fooMenuList ul li:first-child,
  #footer .innerWrap .fooInner .fooMenuList ul li + li { margin-left: 20px; padding: 5px 0; }
  #footer .innerWrap .fooInner .fooMenuList ul li button { font-size: 14px; font-weight: 300; line-height: 20px; color: #333; }
  #footer .innerWrap .fooInner .fooMenuList ul li button.point { font-weight: 500; }
  #footer .companyInfo { position: relative; color: #7a7a7a; }
  #footer .companyInfo .social { top: 0; right: 0; }
  #footer .companyInfo .social a { width: 25px; height: 25px; background-size: auto 100%; }
  #footer .companyInfo .social a ~ a { margin-left: 15px; }
  #footer .companyInfo .info { margin-top: 14px; }
  #footer .companyInfo .info span { line-height: 24px; }
  #footer .companyInfo .info p { line-height: 24px; }

  .quickMoveTop { right: 20px; bottom: 50px; width: 45px; height: 45px; }
  .quickMoveTop button { background-size: auto 18px; }
}

@media (max-width: 782px) {
  body.whistle-hub.admin-bar #header { top: 46px; }
  body.whistle-hub.admin-bar #header .innerWrap .allMenuWrap,
  body.whistle-hub.admin-bar #header .innerWrap .userMenu { top: 46px; }
}

@media (max-width: 320px) {
  #header .innerWrap .btn_app { width: 72px; font-size: 11px; }
}