/*
 * THEMARU 공통 헤더/내비게이션 보정 파일
 * 최종 수정일: 2026-09-16
 * 수정 내용: 모바일 메뉴 아이콘 정렬, 문의하기 버튼 여백 및 모바일 표시 안정화
 * - PC: 고정 헤더, 전체 폭 드롭다운, 문의하기/언어 선택 영역
 * - 모바일(900px 이하): 햄버거 버튼과 전체 화면 메뉴
 * - 기존 common.css 뒤에서 불러와 최종 디자인 값을 덮어씁니다.
 */

/* PC 공통 헤더: 로고, 1차 메뉴, 문의하기 버튼 */
.site-header.header-v2{position:fixed!important;inset:0 0 auto;z-index:2000;height:86px;padding:0;overflow:visible;isolation:isolate;background:rgba(255,255,255,.96)!important;border-bottom-color:#e4edf6!important;box-shadow:0 5px 20px rgba(30,72,115,.035);backdrop-filter:blur(14px)}
.header-v2__inner{width:min(1440px,calc(100% - 64px));height:100%}
.header-v2 .brand img{display:block;width:190px;filter:none!important}
.gnb-v2{display:flex;align-self:stretch;gap:34px;margin-left:auto}
.header-v2 .nav-group{position:relative;display:flex;height:auto;align-items:center}
.header-v2 .nav-top{position:relative;display:flex;align-items:center;gap:9px;height:100%;padding:0;border:0;background:none;color:#17243a!important;font-family:inherit;font-size:var(--type-gnb-size);font-weight:var(--type-gnb-weight);line-height:var(--type-gnb-line-height);letter-spacing:-.01em;cursor:pointer;appearance:none}
.header-v2 .nav-top::after{content:"";position:absolute;right:50%;bottom:0;left:50%;height:2px;background:var(--color-primary);transition:.22s}
.header-v2 .nav-group.is-open .nav-top::after,.header-v2 .nav-top:hover::after,.header-v2 .nav-top:focus-visible::after{right:0;left:0}
.header-v2 .nav-top i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.22s}
.header-v2 .contact-link{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:44px;min-height:0;margin-left:34px;padding:0 20px;border:1px solid #d9e3ed!important;border-radius:5px;background:transparent;color:#17243a!important;font-family:inherit;font-size:var(--type-gnb-size);font-weight:var(--type-gnb-weight);line-height:var(--type-gnb-line-height);letter-spacing:-.01em;text-decoration:none;transition:color .22s ease,border-color .22s ease,background-color .22s ease}
.header-v2 .contact-link::before{position:absolute;inset:0;z-index:-1;background:var(--color-primary);content:"";transform:translateX(-102%);transition:transform .25s ease}
.header-v2 .contact-link span{position:relative;transition:transform .22s ease}
.header-v2 .contact-link:hover,.header-v2 .contact-link:focus-visible{border-color:var(--color-primary)!important;background-color:var(--color-primary);color:#fff!important}
.header-v2 .contact-link:hover::before,.header-v2 .contact-link:focus-visible::before{transform:translateX(0)}
.header-v2 .contact-link:hover span,.header-v2 .contact-link:focus-visible span{transform:translate(3px,-3px)}
.header-v2 .language-button{display:grid;place-items:center;width:42px;height:42px;margin-left:10px;padding:0;border:0;background:transparent;color:#17243a!important;appearance:none}
.header-v2 .language-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.header-v2 .nav-panel{top:86px}
.home-page .header-v2 .nav-panel,.home-page .header-v2 .fullmenu{top:86px;inset-block-start:86px}
.header-v2 .fullmenu{position:fixed;inset:86px 0 auto;z-index:2005;width:100%;min-height:0;padding:0;background:#f6f9fd!important;color:#0a1b34;border:0;border-bottom:1px solid #e1e8f1;border-radius:0;box-shadow:0 12px 28px rgba(17,40,70,.06);opacity:0;transform:translateY(-6px);transition:opacity 240ms ease,transform 240ms ease,visibility 240ms ease}
.header-v2 .nav-group.is-open>.fullmenu{opacity:1;transform:none}
.header-v2 .fullmenu--short{height:178px!important}.header-v2 .fullmenu--solutions{height:238px!important}
.header-v2 .fullmenu__inner{width:min(1440px,calc(100% - 128px));grid-template-columns:245px 1fr}
.header-v2 .fullmenu__title{border-right-color:#e2e8f0}.header-v2 .fullmenu__title span{color:var(--color-primary);font-size:11px}.header-v2 .fullmenu__title strong{color:#0a1b34;font-size:28px;font-weight:600}
.header-v2 .fullmenu__items{padding-left:54px}.header-v2 .fullmenu__items--2{gap:70px}.header-v2 .fullmenu__items--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}.header-v2 .fullmenu__items--4{gap:34px}
.header-v2 .fullmenu__items>a{height:92px;color:#0d203a}.header-v2 .fullmenu__items>a::after{bottom:12px;background:var(--color-primary)}.header-v2 .fullmenu__items small{margin-bottom:12px;color:#8493a7;font-size:10px;opacity:1}.header-v2 .fullmenu__items b{color:#0d203a;font-size:16px;font-weight:500}.header-v2 .fullmenu__items em{margin-top:9px;color:#7c8999;font-size:13px}.header-v2 .fullmenu__items>a:hover b,.header-v2 .fullmenu__items>a:focus-visible b{color:var(--color-primary)}
.header-v2 .fullmenu__categories{padding:34px 0 28px 54px;gap:32px}.header-v2 .fullmenu__categories--business{grid-template-columns:minmax(280px,360px) minmax(280px,360px);align-content:center;justify-content:start;gap:120px}.header-v2 .fullmenu__categories b{margin-bottom:18px;color:#0d203a;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em}.header-v2 .fullmenu__categories a{margin-bottom:12px;color:#607087;font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.01em}.header-v2 .fullmenu__categories a:hover,.header-v2 .fullmenu__categories a:focus-visible{color:var(--color-primary)}
@media(max-width:900px){.site-header.header-v2{height:72px}.header-v2__inner{width:calc(100% - 40px)}.header-v2 .brand img{width:150px}.gnb-v2,.header-v2 .contact-link,.header-v2 .language-button{display:none}.header-v2 .menu-btn{display:flex;width:42px;height:42px;margin-left:auto;padding:0;border:0;background:none;color:#17243a!important}.header-v2 .menu-btn span{background:#17243a}.header-v2 .fullmenu{display:none!important}}

/* 메인 페이지 드롭다운: 서브 페이지와 동일한 밝은 패널 사용 */
.home-page .header-v2 .nav-panel,
.home-page .header-v2 .fullmenu{top:80px;inset:80px 0 auto;background:#f6f9fd!important;color:#0a1b34;border:0;border-bottom:1px solid #e1e8f1;box-shadow:0 12px 28px rgba(17,40,70,.06);backdrop-filter:none;-webkit-backdrop-filter:none}
.home-page .header-v2 .fullmenu.fullmenu--short{height:178px!important}
.home-page .header-v2 .fullmenu.fullmenu--solutions{height:238px!important}
.home-page .header-v2 .fullmenu__inner{width:min(1440px,calc(100% - 128px));grid-template-columns:245px 1fr}
.home-page .header-v2 .fullmenu__title{border-right-color:#e2e8f0}
.home-page .header-v2 .fullmenu__title strong{color:#0a1b34}
.home-page .header-v2 .fullmenu__items b,
.home-page .header-v2 .fullmenu__categories b{color:#0d203a}
.home-page .header-v2 .fullmenu__items small{color:#8493a7}
.home-page .header-v2 .fullmenu__categories a{color:#607087}
.home-page .header-v2 .fullmenu__items>a:hover b,
.home-page .header-v2 .fullmenu__items>a:focus-visible b,
.home-page .header-v2 .fullmenu__categories a:hover,
.home-page .header-v2 .fullmenu__categories a:focus-visible{color:var(--color-primary)}

/* 메인 페이지 상단 바만 어두운 배경을 사용하며 드롭다운은 밝게 유지 */
.home-page .site-header.header-v2{
  height:80px;
  background:#010612!important;
  border-bottom-color:rgba(145,171,204,.16)!important;
  box-shadow:none
}
.home-page .site-header.header-v2.is-scrolled{
  background:#010612!important;
  border-bottom-color:rgba(145,171,204,.2)!important
}
.home-page .header-v2 .brand img{filter:brightness(0) invert(1)!important}
.home-page .header-v2 .nav-top,
.home-page .header-v2 .contact-link,
.home-page .header-v2 .language-button{color:#fff!important}
.home-page .header-v2 .contact-link{border-color:rgba(255,255,255,.34)!important}
.home-page .header-v2 .menu-btn{color:#fff!important}
.home-page .header-v2 .menu-btn span{background:#fff}

/* 메인 메뉴가 열리면 헤더를 밝게 전환해 메뉴 가독성 확보 */
.home-page .site-header.header-v2,
.home-page .header-v2 .brand img,
.home-page .header-v2 .nav-top,
.home-page .header-v2 .contact-link,
.home-page .header-v2 .language-button{
  transition:background-color .26s ease,color .26s ease,border-color .26s ease,filter .26s ease,box-shadow .26s ease
}
.home-page .site-header.header-v2:has(.nav-group.is-open){
  background:rgba(255,255,255,.98)!important;
  border-bottom-color:#e1e8f1!important;
  box-shadow:0 5px 20px rgba(30,72,115,.035)
}
.home-page .site-header.header-v2:has(.nav-group.is-open) .brand img{filter:none!important}
.home-page .site-header.header-v2:has(.nav-group.is-open) .nav-top,
.home-page .site-header.header-v2:has(.nav-group.is-open) .contact-link,
.home-page .site-header.header-v2:has(.nav-group.is-open) .language-button{color:#17243a!important}
.home-page .site-header.header-v2:has(.nav-group.is-open) .contact-link{border-color:#d9e3ed!important}
.home-page .site-header.header-v2:has(.nav-group.is-open) .menu-btn{color:#17243a!important}
.home-page .site-header.header-v2:has(.nav-group.is-open) .menu-btn span{background:#17243a}

/* 우측 언어 선택 미니 메뉴 */
.language-selector{position:relative;display:grid;place-items:center;align-self:center;margin-left:10px;z-index:2010}
.language-selector .language-button{margin-left:0}
.language-menu{position:absolute;top:calc(100% + 6px);left:50%;display:flex;min-width:58px;padding:11px 0;flex-direction:column;align-items:center;gap:8px;background:#fff;color:#17243a;border:1px solid #e1e8f1;border-radius:10px;box-shadow:0 8px 20px rgba(4,20,40,.1);font-family:inherit;font-size:13px;font-weight:500;line-height:1.35;letter-spacing:.02em;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-5px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.language-menu::before{position:absolute;right:0;bottom:100%;left:0;height:10px;content:""}
.language-selector:hover .language-menu,
.language-selector:focus-within .language-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.language-menu span{display:block;min-width:100%;padding:2px 0;text-align:center;cursor:pointer}
.language-menu span:hover,.language-menu span:focus{color:#1677ff}
@media(max-width:900px){.language-selector{display:none}}

/*
 * 모바일 헤더/전체 화면 메뉴
 * 주의: 햄버거·닫기 아이콘은 이미지가 아니라 CSS 가상 요소로 그립니다.
 * 아이콘 위치 수정 시 button 크기(44px)와 선의 top/left 값을 함께 확인하세요.
 */
@media(max-width:900px){
  .site-header.header-v2,
  .home-page .site-header.header-v2{height:72px!important}
  .header-v2__inner,
  .home-page .header-v2__inner{width:calc(100% - 40px)!important}
  .header-v2 .menu-btn,
  .home-page .header-v2 .menu-btn{
    position:relative;display:block!important;width:44px;height:44px;flex:0 0 44px;
    margin-left:auto;padding:0;border:0;background:transparent;color:#17243a!important
  }
  .home-page .header-v2 .menu-btn{color:#fff!important}
  .header-v2 .menu-btn span,
  .home-page .header-v2 .menu-btn span{
    position:absolute;right:8px;display:block!important;width:26px!important;height:2px!important;
    margin:0!important;border-radius:2px;background:currentColor!important;opacity:1!important;visibility:visible!important
  }
  .header-v2 .menu-btn span:first-child{top:15px}
  .header-v2 .menu-btn span:last-child{top:27px}
  .mobile-menu-v2{
    inset:0!important;width:100%!important;max-width:none!important;min-height:100dvh;background:#071426
  }
  .mobile-menu-v2__head{height:72px;padding:0 20px}
  .mobile-menu-v2__head>a{display:block;padding:0!important;border:0!important;font-size:0!important}
  .mobile-menu-v2__head img{display:block;width:150px;filter:brightness(0) invert(1)!important}
  .mobile-menu-v2__body{padding:20px}
  .mobile-group>button{height:66px;font-size:21px}
  /* 2026-09-16 수정: 중복되어 있던 모바일 메뉴 화살표 규칙을 하나로 통합 */
  .mobile-group>button i{
    display:block;flex:0 0 8px;width:8px;height:8px;margin-right:3px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    opacity:1!important;visibility:visible!important;transform:rotate(45deg) translateY(-2px)
  }
  .mobile-group>div a{font-size:15px}
  .mobile-menu-v2 .mobile-contact{
    /* 문의하기 문구와 화살표가 가장자리에 붙지 않도록 좌우 여백 고정 */
    box-sizing:border-box;min-height:58px;align-items:center;margin-top:28px;
    padding:0 22px!important;border:0!important;font-size:17px!important
  }
  .mobile-menu-v2 .mobile-close{
    /* 공통 button의 align-self:flex-end 영향을 제거하고 헤더 중앙에 배치 */
    display:block;align-self:center!important;flex:0 0 44px;width:44px;height:44px;margin:0!important
  }
  .mobile-menu-v2 .mobile-close span{top:21px;left:11px;width:20px;height:2px}
  .header-v2 .menu-btn::before,
  .header-v2 .menu-btn::after{
    position:absolute;right:8px;width:26px;height:2px;border-radius:2px;
    background:currentColor;content:"";opacity:1;visibility:visible
  }
  .header-v2 .menu-btn::before{top:15px}
  .header-v2 .menu-btn::after{top:27px}
  .header-v2 .menu-btn span{display:none!important}
  .mobile-menu-v2 .mobile-close::before,
  .mobile-menu-v2 .mobile-close::after{
    /* 모바일 메뉴 닫기(X) 아이콘 */
    position:absolute;top:21px;left:11px;width:20px;height:2px;
    background:#fff;content:"";opacity:1;visibility:visible
  }
  .mobile-menu-v2 .mobile-close::before{transform:rotate(45deg)}
  .mobile-menu-v2 .mobile-close::after{transform:rotate(-45deg)}
  .mobile-menu-v2 .mobile-close span{display:none!important}
  .mobile-group>button[aria-expanded=true] i{transform:rotate(225deg) translate(-1px,-1px)}
  .mobile-menu-v2 .mobile-contact span{
    display:block!important;margin-left:24px;color:#fff!important;font-size:20px;opacity:1!important
  }
  .category-hero :is(
    .reveal-item,
    .company-hero__inner,
    .notice-hero__copy,
    .research-hero__copy,
    .contact-hero__copy,
    .certifications-hero__copy,
    .fr-hero__copy,
    .srm-hero__copy
  ){
    /* 모바일에서 진입 애니메이션 지연으로 텍스트가 사라져 보이는 현상 방지 */
    opacity:1!important;transform:none!important;animation:none!important
  }
}