/* =============================================
   ODI — Header & Footer Layout
   ============================================= */

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,22,40,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);transition:0.3s ease}
.site-header.scrolled{background:rgba(10,22,40,.98);border-bottom-color:rgba(26,111,212,.2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:var(--container);margin:0 auto;padding:0 var(--section-px)}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo__mark{width:36px;height:36px;background:var(--color-accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-weight:800;font-size:.9rem;color:#fff;letter-spacing:-.02em}
.logo__text{display:flex;flex-direction:column;line-height:1.1}
.logo__text-en{font-family:var(--font-en);font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:.04em}
.logo__text-ko{font-size:.62rem;color:rgba(255,255,255,.4);letter-spacing:.06em}

/* 이미지 로고 */
.logo--img{align-items:center}
.logo__img{
  height:40px;
  width:auto;
  display:block;
  /* PNG 배경(검정)을 제거해 헤더 배경에 자연스럽게 블렌딩 */
  mix-blend-mode:screen;
  filter:brightness(1.15) contrast(1.05);
  transition:opacity .3s ease;
}
.logo--img:hover .logo__img{opacity:.85}
/* 푸터용: 약간 작게 */
.logo__img--footer{height:36px;opacity:.85}

/* Nav */
.nav{display:flex;align-items:center;gap:.2rem}
.nav__item{position:relative}
.nav__link{display:block;padding:.5rem .9rem;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.75);letter-spacing:.02em;transition:var(--transition);border-radius:var(--radius-sm)}
.nav__link:hover,.nav__link.active{color:#fff;background:rgba(255,255,255,.07)}
.nav__dropdown{position:absolute;top:100%;left:0;min-width:180px;background:rgba(10,22,40,.98);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:.5rem 0.5rem 0.5rem;opacity:0;pointer-events:none;transform:translateY(-4px);transition:var(--transition);backdrop-filter:blur(16px)}
/* bridge: nav__item 위에 padding-top으로 투명 영역 확보해 hover 끊김 방지 */
.nav__dropdown::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav__item:hover .nav__dropdown,.nav__item.hover .nav__dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav__dropdown a{display:block;padding:.5rem .8rem;font-size:.83rem;color:rgba(255,255,255,.65);border-radius:var(--radius-sm);transition:var(--transition)}
.nav__dropdown a:hover{color:#fff;background:rgba(26,111,212,.15)}
.header-cta{display:flex;align-items:center;gap:.75rem;margin-left:1rem}
.hamburger{display:none;flex-direction:column;gap:5px;padding:4px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:2px;transition:var(--transition)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;background:rgba(10,22,40,.98);border-bottom:1px solid rgba(255,255,255,.08);padding:1rem var(--section-px) 1.5rem;z-index:999}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.7rem .5rem;color:rgba(255,255,255,.75);font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-nav a:hover{color:#fff}
.mobile-nav .mobile-sub a{padding-left:1.2rem;font-size:.83rem;color:rgba(255,255,255,.45)}

/* Footer */
.site-footer{background:#06101e;color:rgba(255,255,255,.55);padding:4rem 0 2rem;border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{max-width:var(--container);margin:0 auto;padding:0 var(--section-px)}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:2rem}
.footer-brand .logo{margin-bottom:1rem}
.footer-brand p{font-size:var(--fs-small);line-height:1.8;color:rgba(255,255,255,.4);max-width:280px}
.footer-col h4{font-size:var(--fs-small);font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.08em;margin-bottom:1rem}
.footer-col ul li{margin-bottom:.5rem}
.footer-col ul li a{font-size:var(--fs-small);color:rgba(255,255,255,.4);transition:var(--transition)}
.footer-col ul li a:hover{color:var(--color-accent-light)}
.footer-info{font-size:var(--fs-small);line-height:1.9;color:rgba(255,255,255,.3);margin-bottom:1.5rem}
.footer-info strong{color:rgba(255,255,255,.5)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.footer-bottom p{font-size:var(--fs-caption);color:rgba(255,255,255,.25)}
.footer-bottom-links{display:flex;gap:1.2rem}
.footer-bottom-links a{font-size:var(--fs-caption);color:rgba(255,255,255,.3);transition:var(--transition)}
.footer-bottom-links a:hover{color:rgba(255,255,255,.6)}

@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr;gap:2rem}.hamburger{display:flex}.nav,.header-cta{display:none}.footer-bottom{flex-direction:column;align-items:flex-start}}