@charset "utf-8";

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(7,21,35,.07);
}
.header-top{
  border-bottom:1px solid rgba(7,21,35,.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,
.mode-links,
.gnb-list{
  display:flex;
  align-items:center;
}
.top-links,
.mode-links{gap:16px;}
.top-links a,
.mode-btn{
  font-size:12px;
  color:#667588;
}
.mode-btn.is-active{
  color:var(--primary);
  font-weight:700;
}
.header-main-inner{
  min-height:88px;
  gap:34px;
}
.logo{
  flex:0 0 auto;
  width:196px;
}
.gnb{flex:1 1 auto;}
.gnb-list{
  justify-content:center;
  gap:38px;
}
.gnb-list > li{
  position:relative;
}
.gnb-list > li > a{
  display:inline-flex;
  align-items:center;
  min-height:88px;
  font-size:17px;
  font-weight:700;
  color:var(--primary);
}
.depth2{
  position:absolute;
  top:100%;
  left:50%;
  min-width:184px;
  display:grid;
  gap:12px;
  padding:22px;
  border:1px solid rgba(7,21,35,.08);
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 48px rgba(7,21,35,.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;
}
.depth2 strong{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  color:var(--primary);
}
.depth2 a{
  display:block;
  font-size:14px;
  color:#556477;
}
.gnb-list > li:hover .depth2{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.header-actions{display:flex;align-items:center;}
.menu-toggle{
  position:relative;
  display:none;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#f0f4f9;
}
.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(7,21,35,.08);
  background:#fff;
}
.mobile-menu.is-open{display:block;}
.mobile-menu-inner{padding:8px 0 18px;}
.mobile-item{border-bottom:1px solid rgba(7,21,35,.08);}
.mobile-item button{
  width:100%;
  min-height:58px;
  padding:0 24px;
  text-align:left;
  font-size:17px;
  font-weight:700;
  color:var(--primary);
}
.mobile-depth2{
  display:none;
  padding:0 24px 16px;
}
.mobile-depth2 a{
  display:block;
  padding:10px 0;
  font-size:15px;
  color:#5b697a;
}

.site-footer{
  padding:34px 0 48px;
  background:#071523;
  color:rgba(255,255,255,.82);
}
.footer-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px 24px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.footer-brand img{width:26px;height:26px;}
.footer-brand strong{
  font-size:16px;
  letter-spacing:.08em;
}
.footer-copy{
  font-size:13px;
  color:rgba(255,255,255,.54);
}
.footer-right{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:14px;
}

@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;}
  .logo{width:178px;}
}

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