/* ===== 아틀라스링크 헤더 보정 (기본 틀은 css/style.css 의 헤더 — 로아앤코와 동일한 동작·글자 크기·모션) =====
 * 여기서는 로고 비율(ATLAS LINK 는 가로 520 : 세로 273)과 언어 선택만 맞춘다. */

/* 로고: 메인 맨 위(흰색, logo-main) / 서브 페이지 위 줄(logo-sub) / 스크롤 후 작은 메뉴(logo-sub2) / 푸터(logo-footer)
 * 로아앤코 로고(380:120)와 비율이 달라서(ATLAS LINK 는 520:273) 높이·비율을 고정하면 찌그러진다.
 * 그래서 폭만 정하고 높이는 항상 자동(원본 비율 유지)으로 둔다. 로고 파일을 바꿔도 비율은 알아서 맞는다. */
.site-header .logo-img, .scrolled-logo-1, .scrolled-logo-2, .scrolled-logo-sub, .sub-logo-img, .footer-logo-img, .mobile-nav-logo {
  height: auto !important; aspect-ratio: auto !important; object-fit: contain;
}
.site-header.header-transparent .logo-img { width: 164px; }
.scrolled-logo-2 { width: 108px; display: block; }
.scrolled-logo-sub { display: none; width: 152px; }
.footer-logo-img { width: 170px; }
.mobile-nav-logo { width: 96px; }
@media (min-width: 1025px) {
  body.has-fixed-header:not(.is-scrolled) .scrolled-logo-2 { display: none; }
  body.has-fixed-header:not(.is-scrolled) .scrolled-logo-sub { display: block; }
}
@media (max-width: 1024px) {
  .scrolled-logo-2 { width: 100px; }
  .site-header.header-transparent .logo-img { width: 115px; }
}

/* 언어 선택 (한국어 / English) */
.ah-lang { position: relative; margin-left: 20px; z-index: 12; flex-shrink: 0; }
.ah-lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; background: none; border: 0; cursor: pointer;
  color: #333; font: 500 14px/1 inherit; font-family: inherit;
}
.ah-lang-btn .ah-caret { transition: transform .2s; }
.ah-lang.open .ah-lang-btn .ah-caret { transform: rotate(180deg); }
.ah-lang-list {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 112px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.ah-lang.open .ah-lang-list { display: block; }
/* 마우스를 올리면 바로 열린다(마우스가 있는 화면만). 버튼과 목록 사이 틈에서도 닫히지 않게 투명 다리를 둔다 */
@media (hover: hover) {
  .ah-lang:hover .ah-lang-list { display: block; }
  .ah-lang:hover .ah-lang-btn .ah-caret { transform: rotate(180deg); }
  .ah-lang-list::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
}
.ah-lang-list button {
  display: block; width: 100%; text-align: left; padding: 9px 16px; background: none; border: 0; cursor: pointer;
  font: 500 14px/1.2 inherit; font-family: inherit; color: #333;
}
.ah-lang-list button:hover { background: #f4f4f4; }
.ah-lang-list button.is-current { font-weight: 700; color: #000; }

/* 메인 맨 위(투명 헤더): 오른쪽 위 모서리, 흰 글씨 */
.site-header.header-transparent .ah-lang { position: absolute; right: 40px; top: 26px; margin: 0; }
.site-header.header-transparent .ah-lang-btn { color: #fff; }

/* 서브 페이지 위 줄(2단 헤더): 로고 줄 오른쪽에 둔다 */
@media (min-width: 1025px) {
  body.has-fixed-header:not(.is-scrolled) .ah-lang { position: absolute; right: 40px; top: 42px; margin: 0; }
}
@media (max-width: 1024px) {
  .ah-lang { display: none; }
}

/* 배너를 웹에서만 흑백으로 보이게 한다(원본 파일은 컬러 그대로). 회사소개 페이지에서 사용 */
.about-hero-img.is-gray { filter: grayscale(100%); }

/* 태블릿·모바일(1024px 이하) 헤더: 로고 영역을 키운다(헤더 높이 80px).
 * 그룹 로고(LOA)와 ATLAS LINK 글자 크기가 비슷하게 보이도록 ATLAS LINK 로고를 더 크게 한다.
 * 맨 위(투명 헤더)와 스크롤 후(흰 헤더) 모두 같은 크기를 쓴다. 폭이 아주 좁으면 화면 폭에 비례해 줄어든다. */
@media (max-width: 1024px) {
  .header-inner, .site-header.header-transparent .header-inner { height: 80px !important; }
  body.has-fixed-header { padding-top: 80px; }
  .header-brand, .site-header.header-transparent .header-brand { align-items: center; }
  .scrolled-brand { gap: 24px !important; }
  .scrolled-brand .scrolled-logo-1 { width: min(134px, 33vw) !important; max-width: none !important; }
  .scrolled-brand .scrolled-logo-2 { width: min(136px, 31vw) !important; max-width: none !important; }
  /* 맨 위(투명 헤더) 로고가 헤더 위로 삐져나와 잘리지 않도록: 이미지를 블록으로 두고 헤더 높이 안에 세로 가운데 정렬 */
  .site-header.header-transparent .logo-link.logo-white { display: flex; align-items: center; }
  .site-header.header-transparent .logo-link.logo-white .logo-img { width: min(136px, 31vw) !important; max-width: none !important; display: block !important; }
  .site-header.header-transparent .sub-logo-img.logo-white { width: min(138px, 34vw) !important; max-width: none !important; margin-right: 24px !important; }
}