/* ================================
   전역 변수(색/크기/애니메이션 시간)
   ================================ */
   :root{
    --nav-height: 80px;                  /* 헤더 높이 */
    --panel-max-h: 320px;                /* 서브메뉴 최대 높이 */
  
    /* 전환 속도/커브(느리게, 부드럽게) */
    --underline-ms: 420ms;
    --panel-ms: 420ms;
    --ease-smooth: cubic-bezier(.25,.8,.25,1);
  
    --gap: 44px;                         /* 상위 메뉴 간격 */
    --font-menu: 18px;
    --font-util: 15px;
  
    --site-max: 1280px;                  /* 본문 최대 폭 */
    --pad-x: 40px;                       /* 헤더 좌우 패딩 */
  
    /* 톤: 헤더=흰색 / 본문=옅은 회색 */
    --bg-header: #ffffff;
    --bg-panel:  #f7f9fb;
    --bg-body:   #f7f9fb;
  
    --fg-strong: #000000;
    --fg:        #111111;
    --fg-dim:    #555;
    --line:      #e6e6e6;
    --accent:    #0d72c7;                /* 블루 */
  
    /* 패럴랙스 오프셋(스크롤에 따라 JS로 업데이트) */
    --parallax-y: 0px;
  }
  
  /* ================================
     리셋/기본 타이포
     ================================ */
  *{ box-sizing: border-box; }
  html, body { margin:0; padding:0; }
  body{
    background: var(--bg-body);
    color: var(--fg);
    font-family: "Roboto","Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  }
  a{ text-decoration:none; color:inherit; }
  
  /* 본문 컨테이너(중앙 1280px) */
  .container{
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 24px 24px;
  }
  
  /* ================================
     헤더/네비게이션 바
     ================================ */
  .site-header.site-theme{
    position: sticky; top:0; z-index:1000;
    background: var(--bg-header); color: var(--fg-strong);
    border-bottom:1px solid var(--line);
  }
  
  /* 풀폭 헤더: max-width 제거 + 좌우 패딩 */
  .site-header .nav-wrap{
    height: var(--nav-height);
    max-width: none;
    width: 100%;
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:12px;
    padding: 0 var(--pad-x);
    margin:0;
  }
  
  /* 로고 */
  .site-header .logo{ justify-self:start; display:flex; align-items:center; }
  .site-header .logo img{ height: 50px; display:block; }
  
  /* 상위 메뉴 (중앙) */
  .site-header .main-nav{ justify-self:center; }
  .site-header .menu{
    list-style:none; display:flex; gap:var(--gap); margin:0; padding:0;
  }
  .site-header .menu-item{ position:relative; }
  .site-header .menu-item > a{
    font: 700 var(--font-menu)/1.2 "Roboto","Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing:.02em;
    color: var(--fg-strong);
    padding: 28px 2px;
    display:inline-block;
  }
  
  /* 중앙 언더라인 — 느리게/부드럽게 */
  .site-header .menu-item .underline{
    position:absolute; left:50%; bottom:0; width:0; height:3px;
    background: var(--accent); border-radius:2px; transform:translateX(-50%);
    transition: width var(--underline-ms) var(--ease-smooth);
  }
  .site-header .menu-item:hover .underline,
  .site-header .menu-item:focus-within .underline{ width:100%; }
  
  /* 우측 유틸 */
  .site-header .nav-right{ display:flex; align-items:center; gap:14px; justify-self:end; }
  .site-header .util-btn{
    font: 500 var(--font-util)/1 "Roboto","Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    color:#333; background:transparent; border:0; padding:6px 10px; border-radius:8px; cursor:pointer;
  }
  .site-header .util-btn:hover{ background:#f3f6fb; color:#111; }
  
  /* ================================
     하위 메뉴(부드러운 슬라이드+페이드)
     ================================ */
  .site-header .submenu-host{
    position:relative;
    width:100%;
    padding:0;
  }
  
  /* 패널은 좌우 풀폭으로 깔고, 내부 콘텐츠(.panel-inner)를 중앙 정렬한다 */
  .site-header .submenu-panel{
    position:absolute; left:0; right:0; top:100%;
    overflow:hidden;
    transform: translateY(-10px);
    opacity:0;
    max-height:0;
    background: var(--bg-panel);
    border-top:1px solid var(--line);
    box-shadow:0 16px 40px rgba(0,0,0,.08);
    z-index:999;
    will-change: transform, opacity, max-height;
    transition:
      transform var(--panel-ms) var(--ease-smooth),
      opacity   var(--panel-ms) var(--ease-smooth),
      max-height var(--panel-ms) var(--ease-smooth);
  }
  .site-header .submenu-panel.active{
    transform: translateY(0);
    opacity:1;
    max-height: var(--panel-max-h);
    pointer-events:auto;
  }
  
  /* ★ 중앙 정렬 + 간격 최적화 */
  .site-header .panel-inner {
    max-width: var(--site-max);
    margin: 0 auto;
    display: flex;                 /* grid → flex 변경 */
    justify-content: center;       /* 항상 중앙 정렬 */
    gap: 70px;                     /* 메뉴 간 간격 (원하는 만큼 조정) */
    padding: 18px var(--pad-x);
  }
  .site-header .panel-inner a {
    font: 500 15px/1.4 "Roboto","Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    color: #222;
    padding: 6px 8px;
    border-radius: 8px;
  }
  .site-header .panel-inner a:hover {
    background: #eef4ff;
    color: var(--accent);
  }
  
  /* ================================
     전체 화면 오버레이(메뉴 로드맵)
     ================================ */
/* 전체 화면 햄버거 오버레이 */
.mega-nav {
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; 와 동일 */
  background: #ffffff;
  z-index: 9999;

  display: flex;
  flex-direction: column;

  /* ★ 핵심: 오버레이 안에서 세로 스크롤 가능하게 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* open 클래스 붙기 전에는 숨기기 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mega-nav.open {
  opacity: 1;
  pointer-events: auto;
}

/* 안쪽 콘텐츠 래퍼 */
.mega-nav .mega-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 20px 40px;  /* 위에 로고/버튼 자리를 위해 여유 */
  box-sizing: border-box;
}

/* 섹션 구분 정도만 참고용 */
.mega-nav .mega-section {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

  
  .mega-close{
    position:absolute; top:24px; right:24px;
    width:44px; height:44px; border-radius:12px;
    background:#0d72c7; color:#fff; border:0; cursor:pointer;
    font-size:20px; line-height:44px; text-align:center;
    box-shadow:0 6px 18px rgba(13,114,199,.25);
  }
  .mega-close:hover{ filter:brightness(1.05); }
  
  .mega-wrap{
    max-width:1100px; margin:96px auto 48px; padding:0 24px;
    display:grid; grid-template-columns:1fr; gap:28px;
  }
  .mega-section{ padding:18px 0; border-bottom:1px solid #e6e6e6; }
  .mega-section:last-child{ border-bottom:0; }
  .mega-section>h3{
    margin:0 0 14px;
    font:700 22px/1.2 "Roboto","Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    letter-spacing:.02em;
  }
  .mega-links{ display:flex; flex-wrap:wrap; gap:18px 28px; }
  .mega-links a{
    color:#333; font:500 15px/1.4 "Roboto","Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    padding:6px 8px; border-radius:8px;
  }
  .mega-links a:hover{ background:#eef4ff; color:#0d72c7; }
  
  /* ================================
     헤더 아래 히어로 (문구 없는 상태)
     - Ken Burns는 ::before 레이어에서
     - 패럴랙스: --parallax-y 변수를 transform에 합성
     ================================ */
  .nav-hero{
    --hero: url("/static/image/nav_hero_default.png");
    height: 200px;                      /* 데스크톱 */
    position: relative;
    z-index: 1;                         /* 헤더(1000) 아래, 서브메뉴(999) 아래 */
    isolation: isolate;
    overflow: hidden;                   /* 확대 시 넘침 방지 */
    background: none !important;
  }
  
  /* 배경 이미지 레이어 */
  .nav-hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: var(--hero);
    background-size: cover;
    background-position: 50% 49%;
    transform-origin: 50% 50%;
    z-index: 0;
    animation: hero-kenburns 8s ease-in-out infinite alternate;
    will-change: transform, background-position;
  }
  
  /* 라이트한 가독성 보정(필요 없으면 삭제 가능) */
  .nav-hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.06) 100%);
    z-index: 1;
  }
  
  /* (문구는 제거된 상태) hero-content 자체를 쓰지 않음 */
  
  /* 서브메뉴가 열릴 때(= body.sub-open) 보정 */
  body.sub-open .nav-hero{
    transform: scale(1.02) translateY(2px);   /* 살짝 확대 + 아래로 2px */
    filter: brightness(.88) saturate(1.05) blur(.4px);
  }
  body.sub-open .nav-hero::before{
    transform: scale(1.04) translateY(calc(var(--parallax-y) - 1%));
    background-position: 50% 47%;
  }
  
  /* Ken Burns 키프레임
     - scale/배경위치 변화 + 패럴랙스 오프셋을 합성
     - var(--parallax-y)는 JS로 매 프레임 업데이트됨 */
  @keyframes hero-kenburns{
    0%{
      transform: scale(1.1) translateY(calc(var(--parallax-y)));
      background-position: 50% 49%;
    }
    100%{
      transform: scale(1.0) translateY(calc(var(--parallax-y) - 2%));
      background-position: 50% 46%;
    }
  }
  
  /* 접근성: 모션 최소화 환경에서는 애니메이션/패럴랙스 비활성화 */
  @media (prefers-reduced-motion: reduce){
    .nav-hero::before{ animation: none !important; transform: none !important; }
    .scroll-indicator{ animation: none !important; }
    :root{ --parallax-y: 0px !important; }
  }
  
  /* ================================
     반응형
     ================================ */
  @media (max-width: 1024px){
    .site-header .menu{ gap:28px; }
    .site-header .panel-inner{
      max-width: 900px;
      grid-template-columns: repeat(3, minmax(160px, 1fr));
      gap: 8px 14px;
      padding: 16px var(--pad-x);
    }
  
    .nav-hero{ height: 150px; }
    .nav-hero::before{ background-position: 50% 50%; }
    body.sub-open .nav-hero::before{ background-position: 50% 48%; }
    .mega-section > h3{ font-size:22px; }
    .menu-item > a{ font-size:17px; }
  }
  
  @media (max-width: 768px){
    .site-header .main-nav{ display:none; } /* 모바일은 햄버거 사용 */
    .site-header .panel-inner{
      max-width: 680px;
      grid-template-columns: repeat(2, minmax(160px, 1fr));
      gap: 8px 12px;
      padding: 14px var(--pad-x);
    }
  
    .nav-hero{ height: 125px; }
    .nav-hero::before{ background-position: 50% 52%; }
    body.sub-open .nav-hero::before{ background-position: 50% 50%; }
  
    .mega-wrap{ margin-top:84px; }
    .mega-section > h3{ font-size:20px; }
    .menu-item > a{ font-size:16px; }
  }
  
  @media (max-width: 480px){
    .nav-hero{ height: 105px; }
    .nav-hero::before{ background-position: 50% 54%; }
    body.sub-open .nav-hero::before{ background-position: 50% 52%; }
  
    .mega-section > h3{ font-size:18px; }
    .menu-item > a{ font-size:14px; }
  }
  
  /* (옵션) 스크롤 인디케이터 — 필요 시 HTML에 .scroll-indicator 요소 추가 */
  .scroll-indicator{
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
    z-index: 2; font-size:20px; color:#fff; opacity:.75;
    animation: scroll-bounce 1.8s ease-in-out infinite;
  }
  @keyframes scroll-bounce{
    0%,100%{ transform:translate(-50%,0); opacity:.7; }
    50%    { transform:translate(-50%,6px); opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-indicator{ animation:none; }
  }

  /* ================================
   공통 강조 텍스트
   ================================ */
.emphasis-text {
  margin-top: 4px;
  font-size: 15px;         /* 기본 텍스트보다 살짝 크게 */
  font-weight: 700;        /* 굵게 */
  color: var(--accent);    /* 사이트 공통 포인트 색(파란색) */
}