@charset "utf-8";

/* ==========================================================
   Header
   ========================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  font-family:var(--font-display);
  transition:background-color .25s;
}
.header .u-container{
  max-width:100%;padding:0 80px;
  display:flex;align-items:center;height:var(--header-height);
}
/* 원본은 스크롤(.header-on)뿐 아니라 헤더 hover 시에도 흰 배경으로 반전된다 */
.header--scrolled,
.header:hover{background:#fff;}
.header--scrolled .header__logo,
.header:hover .header__logo{color:var(--color-black);}
.header--scrolled .nav__link,
.header:hover .nav__link{color:var(--color-black);}
.header--scrolled .lang__link,
.header:hover .lang__link{color:#ccc;}
.header--scrolled .lang__link--active,
.header:hover .lang__link--active{color:var(--color-black);font-weight:700;}
.header--scrolled .lang__divider,
.header:hover .lang__divider{background:#ddd;}

.header__logo{font-weight:800;font-size:20px;color:#fff;letter-spacing:.5px;}

.nav{flex:1;min-width:0;}
.nav__list{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(40px, calc(100 / var(--inner) * 100vw), 100px);
}
.nav__item{position:relative;}
.nav__link{
  display:flex;align-items:center;justify-content:center;height:var(--header-height);
  color:#fff;font-size:var(--fs-18);font-weight:600;line-height:1.2em;position:relative;
}
.nav__link::after{
  content:'';position:absolute;bottom:27px;left:0;width:0;height:3px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));
  transition:width .2s;
}
.nav__item:hover .nav__link::after{width:100%;}

.nav__submenu{
  display:none;position:absolute;top:100%;left:-20px;min-width:220px;padding-top:10px;
}
.nav__item:hover .nav__submenu{display:block;}
.nav__submenu-list{
  display:grid;gap:25px;padding:var(--sp-35) var(--sp-40);
  background:#fff;border:1px solid #242424;border-radius:12px;
}
.nav__submenu-link{display:block;color:#878787;font-weight:600;line-height:1.5em;}
.nav__submenu-link:hover{color:var(--color-primary);text-decoration:underline;}

.lang{display:flex;align-items:center;gap:10px;}
.lang__link{font-size:var(--fs-18);color:rgba(255,255,255,.5);font-weight:400;}
.lang__link--active{color:#fff;font-weight:700;}
.lang__divider{width:1px;height:10px;background:rgba(255,255,255,.4);}

.header__menu-btn{display:none;width:22px;height:22px;margin-left:20px;position:relative;}
.header__menu-btn span,
.header__menu-btn::before,
.header__menu-btn::after{
  content:'';position:absolute;left:0;right:0;height:2px;background:#fff;transition:transform .2s;
}
.header__menu-btn::before{top:4px;}
.header__menu-btn span{top:10px;}
.header__menu-btn::after{top:16px;}
.header--scrolled .header__menu-btn::before,
.header--scrolled .header__menu-btn span,
.header--scrolled .header__menu-btn::after,
.header:hover .header__menu-btn::before,
.header:hover .header__menu-btn span,
.header:hover .header__menu-btn::after{background:var(--color-black);}

@media (max-width:1024px){
  :root{--header-height:80px;}
  .header .u-container{padding:0 var(--contain-x);}
  .nav{display:none;}
  .header__menu-btn{display:block;}
}

/* ==========================================================
   Footer — 원본은 라이트 톤(border-top #ddd)
   ========================================================== */
.footer{border-top:1px solid #ddd;font-family:var(--font-display);background:#fff;}
.footer .u-container{max-width:100%;padding:0 var(--contain-x2);}

.footer__top{display:flex;gap:40px;flex-wrap:wrap;padding:var(--sp-90) 0;border-bottom:1px solid #ddd;}
.footer__brand{flex:1;}
.footer__logo{font-weight:800;font-size:20px;color:var(--color-black);letter-spacing:.5px;}
.footer__tagline{
  margin-top:var(--sp-30);
  font-size:var(--fs-32);font-weight:600;line-height:1.37em;letter-spacing:-.03em;color:#000;
}

/* 원본 .fnb — GNB 전체를 그대로 복제한 사이트맵 */
.footer__nav{display:flex;gap:var(--sp-80);flex-wrap:wrap;color:var(--color-black);}
.footer__nav-link{
  display:inline-block;margin-bottom:var(--sp-30);
  font-size:var(--fs-18);font-weight:600;line-height:1.37em;letter-spacing:-.03em;
}
.footer__nav-link:hover{color:var(--color-primary);}
.footer__nav-sub li{margin-bottom:var(--sp-20);line-height:1.3em;}
.footer__nav-sub li:last-child{margin-bottom:0;}
.footer__nav-sub a:hover{color:var(--color-primary);text-decoration:underline;}

.footer__bottom{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;padding:var(--sp-60) 0;}
.footer__info{font-style:normal;line-height:2.25em;color:#505050;}
.footer__info strong{color:var(--color-black);font-weight:600;}
.footer__info-bar{display:inline-block;padding:0 var(--sp-15);color:#878787;}

.footer__meta{text-align:right;}
.footer__policy{display:flex;gap:16px;justify-content:flex-end;}
.footer__policy-link{display:block;color:#505050;}
.footer__policy-link:hover{color:var(--color-black);font-weight:700;}
.footer__copy{margin-top:var(--sp-25);font-size:var(--fs-14);color:#878787;line-height:1.3em;}

@media (max-width:640px){
  :root{--header-height:60px;--contain-x:15px;--contain-x2:15px;}
  .footer__top{display:block;padding:30px 0 15px;}
  .footer__brand{margin-bottom:15px;}
  .footer__tagline br{display:none;}

  .footer__nav{display:block;}
  .footer__nav-col{margin-bottom:5px;}
  .footer__nav-col:last-child{margin-bottom:0;}
  .footer__nav-link{margin-bottom:0;font-size:13px;}
  .footer__nav-sub{display:flex;flex-wrap:wrap;gap:0 10px;}
  .footer__nav-sub li{margin-bottom:0;}

  .footer__bottom{display:block;padding:15px 0 30px;}
  .footer__meta{text-align:left;margin-top:16px;}
  .footer__policy{justify-content:flex-start;}
}