@charset "utf-8";

.site-header{
  position:sticky;
  top:0;
  left:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,29,46,.06);
}
.header-top{
  border-bottom:1px solid rgba(15,29,46,.08);
}
.header-top-inner,
.header-main-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-top-inner{
  min-height:42px;
  gap:20px;
}
.top-links,
.lang-links,
.gnb-list,
.header-actions{
  display:flex;
  align-items:center;
}
.top-links,
.lang-links{gap:18px;}
.top-links a,
.lang-links a{
  font-size:12px;
  color:#697587;
}
.header-main-inner{
  min-height:86px;
  gap:32px;
}
.logo{
  flex:0 0 auto;
  width:208px;
}
.gnb{flex:1 1 auto;}
.gnb-list{
  justify-content:center;
  gap:42px;
}
.gnb-list > li{
  position:relative;
}
.gnb-list > li > a{
  display:inline-flex;
  align-items:center;
  min-height:86px;
  font-size:17px;
  font-weight:700;
  color:var(--primary);
}
.depth2{
  position:absolute;
  top:100%;
  left:50%;
  display:grid;
  gap:12px;
  min-width:180px;
  padding:22px;
  border:1px solid rgba(15,29,46,.08);
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 48px rgba(15,29,46,.12);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 12px);
  transition:all .25s ease;
}
.depth2-wide{
  grid-template-columns:repeat(3, minmax(140px, 1fr));
  min-width:560px;
  left:50%;
}
.depth2 strong{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  color:var(--primary);
}
.depth2 a{
  display:block;
  font-size:14px;
  color:#556274;
}
.gnb-list > li:hover .depth2{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.header-actions{
  gap:12px;
}
.search-btn,
.menu-toggle{
  position:relative;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#f3f6fa;
}
.search-btn span{
  position:absolute;
  inset:0;
}
.search-btn span::before,
.search-btn span::after{
  content:"";
  position:absolute;
}
.search-btn span::before{
  top:14px;
  left:14px;
  width:13px;
  height:13px;
  border:2px solid var(--primary);
  border-radius:50%;
}
.search-btn span::after{
  top:27px;
  left:27px;
  width:9px;
  height:2px;
  background:var(--primary);
  transform:rotate(45deg);
  transform-origin:center;
}
.menu-toggle{display:none;}
.menu-toggle span{
  position:absolute;
  left:14px;
  width:20px;
  height:2px;
  background:var(--primary);
  transition:.25s ease;
}
.menu-toggle span:nth-child(1){top:16px;}
.menu-toggle span:nth-child(2){top:23px;}
.menu-toggle span:nth-child(3){top:30px;}
.menu-toggle.is-active span:nth-child(1){top:23px;transform:rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){top:23px;transform:rotate(-45deg);}

.mobile-menu{
  display:none;
  border-top:1px solid rgba(15,29,46,.08);
  background:#fff;
}
.mobile-menu.is-open{display:block;}
.mobile-menu-inner{
  padding:10px 0 20px;
}
.mobile-item{
  border-bottom:1px solid rgba(15,29,46,.08);
}
.mobile-item button{
  width:100%;
  min-height:60px;
  padding:0 24px;
  text-align:left;
  font-size:17px;
  font-weight:700;
  color:var(--primary);
}
.mobile-depth2{
  display:none;
  padding:0 24px 18px;
}
.mobile-depth2 a{
  display:block;
  padding:10px 0;
  font-size:15px;
  color:#586679;
}

.site-footer{
  padding:36px 0 52px;
  background:#0f1722;
  color:rgba(255,255,255,.82);
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-brand img{width:28px;height:28px;}
.footer-brand strong{
  font-size:16px;
  letter-spacing:.08em;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:14px;
}
.footer-copy{
  width:100%;
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.54);
}

@media (max-width:1439px){
  .gnb-list{gap:28px;}
  .gnb-list > li > a{font-size:16px;}
}

@media (max-width:1279px){
  .header-main-inner{min-height:78px;}
  .gnb{display:none;}
  .menu-toggle{display:inline-flex;}
  .search-btn{display:none;}
  .logo{width:184px;}
}

@media (max-width:767px){
  .header-top{display:none;}
  .header-main-inner{min-height:72px;gap:18px;}
  .logo{width:162px;}
  .mobile-item button{padding:0 16px;font-size:16px;}
  .mobile-depth2{padding:0 16px 16px;}
  .footer-inner{display:block;}
  .footer-links{margin-top:16px;gap:12px 16px;}
  .footer-copy{margin-top:18px;}
}