/*
=========================================================================
HEADER
=========================================================================
*/
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(11,17,32,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); transition: box-shadow .3s var(--ease) }
#header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.4); }
.headerInner{ max-width: var(--max-cont); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 64px }
.logo{width: 155px; height: 80px;}
.logo img{object-fit: contain;}

.gnb{display: flex; gap: 36px; }
.gnb a{font-size: 1em; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: .03em; transition: color .2s; position: relative}
.gnb a::after{content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--blue); transition: width .25s var(--ease) }
.gnb a:hover{color: var(--white);}
.gnb a:hover::after{width: 100%;}
.headerActions {display: flex; align-items: center; gap: 20px;}
.langBtnWrap{display: flex; align-items: center;}
.langBtn{font-size: .75em; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.5); padding: 4px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 2px; transition: color .2s}
.langBtn.ko{border-top-right-radius: 0; border-bottom-right-radius: 0;}
.langBtn.en{border-top-left-radius: 0; border-bottom-left-radius: 0;}
.langBtn.active{color: var(--white); border-color: var(--blue); background: var(--blue);}
.langBtn:hover{color: var(--white);}
.headerCta{ font-size: .85em; font-weight: 600; background: var(--blue); color: var(--white); padding: 8px 18px; border-radius: 2px; letter-spacing: .04em; transition: background .2s;}
.headerCta:hover{background: var(--blue-hover);}

@media (max-width: 1200px) {
    .logo{width: 140px; height: 75px;}
}

@media (max-width: 900px) {
  .headerInner{padding: 0 20px;}
  .gnb{gap: 20px;}
}

/* ===== HAMBURGER & MOBILE DRAWER ===== */
.hamburger { display: none; flex-direction: column; justify-content: center; width: 34px; height: 34px; cursor: pointer; z-index: 1100; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; margin: 3.5px 0; }

/* 오버레이 */
.drawerOverlay { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); z-index: 1050; opacity: 0; transition: opacity .3s; }
.drawerOverlay.open { opacity: 1; }

/* 드로어 */
.mobileDrawer{position: fixed; top: 0; right: 0; width: 280px; height: 100dvh; background: var(--navy2); z-index: 1060; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; padding: 0 0 40px;}
.mobileDrawer.open {transform: translateX(0);}

/* 드로어 닫기 버튼 */
.drawerClose{display: flex; align-items: center; justify-content: flex-end; padding: 20px 24px; background: none; border: none; cursor: pointer;}
.drawerClose svg {width: 25px; height: 25px; color: rgba(255,255,255,.7); transition: color .2s;}
.drawerClose:hover svg{color: var(--white);}

.drawerNav{display: flex; flex-direction: column;}
.drawerNav a{font-size: 1.05em; font-weight: 500; color: rgba(255,255,255,.75); padding: 10px 20px; letter-spacing: .03em; transition: color .2s, background .2s;}
.drawerActions { padding: 25px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.drawerCta{display: block; text-align: center; font-size: .9em; font-weight: 600; background: var(--blue); color: var(--white); padding: 10px 18px; border-radius: 2px; letter-spacing: .04em; transition: background .2s;}
.drawerCta:hover{background: var(--blue-hover);}

@media (max-width: 720px) {
  .gnb{display: none;}
  .headerCta{display: none;}
  .hamburger{display: flex;}
}

/*
=========================================================================
FOOTER
=========================================================================
*/
.footer{background: var(--navy); border-top: 1px solid rgba(255,255,255,.07); padding: 45px 0 32px;}
.footerTop{display: flex; justify-content: space-between; gap: 60px; margin-bottom: 30px;}
.footerBrand .logo{width: 120px; height: 40px; margin-bottom: 10px; opacity: .7;}
.footerBrandDesc{font-size: .8em; color: rgba(255,255,255,.35);}
.footerRight{display: flex; gap: 80px;}
.fChipArea{max-width: 300px;}
.footerColTitle{font-size: .7em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px }
.footerLinks{display: flex; flex-direction: column; gap: 10px; }
.footerLinks a{font-size: .85em; color: rgba(255,255,255,.7); transition: color .2s }
.footerLinks a:hover{color: var(--white); }

.cdChips{display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px;}
.certChip{font-size: .7em; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.5); background: rgba(255, 255, 255, .05); border: 1px solid rgba(190, 190, 190, 0.15); padding: 3px 10px; border-radius: 2px;}

.footerBottom{border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px }
.fCopy{font-size: .75em; color: rgba(255,255,255,.25);}

@media (max-width: 900px) {
  .footer{padding: 30px 0;}
  .footerBrand .logo{width: 90px; height: 30px; margin-bottom: 5px;}
  .footerTop{flex-direction: column; gap: 20px; margin-bottom: 25px;}
  .footerRight{flex-direction: column; gap: 12px;}
  .footerLinks{flex-direction: row;}
  .fChipArea{max-width: inherit;}
  .footerColTitle{margin-bottom: 4px;}
  .footerBottom{padding-top: 15px;}
}


/*
=========================================================================
BACK TO TOP
=========================================================================
*/
.topBtn{position: fixed; bottom: 20px; right: 20px; z-index: 500; width: 40px; height: 40px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(30,72,212,.4); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s, transform .25s }
.topBtn.show { opacity: 1; pointer-events: auto; transform: none; }
.topBtn:hover { background: var(--blue); }
.topBtn svg { width: 18px; height: 18px; }


@media (max-width: 900px) {
  .topBtn{position: fixed; bottom: 10px; right: 10px; width: 35px; height: 35px;}
}